/* Einheitlicher Tooltip-Stil für alle .tooltip-btn auf der Control-Seite */
.tooltip-btn {
    position: relative;
}
.tooltip-btn[data-tooltip]:hover:after,
.tooltip-btn[data-tooltip]:focus:after {
    content: attr(data-tooltip);
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: 120%;
    background: #232323;
    color: #fff;
    padding: 6px 14px;
    border-radius: 7px;
    white-space: nowrap;
    font-size: 0.8em;
    box-shadow: 0 2px 8px #0005;
    opacity: 1;
    pointer-events: none;
    z-index: 100;
    transition: opacity 0.15s;
    line-height: 1.2;
    letter-spacing: 0.01em;
}
.tooltip-btn[data-tooltip]:after {
    opacity: 0;
    pointer-events: none;
}
.tooltip-btn[data-tooltip]:hover:after,
.tooltip-btn[data-tooltip]:focus:after {
    opacity: 1;
}
/* Ausgeblendete Dienste (Adminpanel) */
.hidden-service {
    background: #232323 !important;
    color: #888 !important;
    opacity: 0.65;
    font-style: italic;
}
/* Hauptnavigation im Header */
.main-nav {
    display: flex;
    gap: 9px;
    background: rgba(30,30,30,0.85);
    border-radius: 6px;
    padding: 2px 9px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.10);
    align-items: center;
    height: 28px;
    min-height: 0;
}
.main-nav .nav-btn {
    color: #fff;
    font-family: 'Roboto', sans-serif;
    font-weight: 500;
    font-size: 0.54em;
    text-decoration: none;
    padding: 3px 7px;
    border-radius: 4px;
    transition: background 0.18s, color 0.18s;
    display: flex;
    align-items: center;
    gap: 4px;
    min-height: 0;
}
.main-nav .nav-btn i {
    font-size: 1.1em;
}
.main-nav .nav-btn:hover, .main-nav .nav-btn.active {
    background: #232323;
    color: #89CFF0;
}
/* body styles */
html, body {
    overflow: hidden; /* prevent scrolling */
    height: 100%; /* set height to full viewport */
    margin: 0; /* remove default margin */
    padding: 0; /* remove default padding */
}

@keyframes moveBackground {
    0% { background-position: 0 0; } /* start position */
    50% { background-position: 100% 100%; } /* middle position */
    100% { background-position: 0 0; } /* end position */
}

body {
    background: url('bg.avif') repeat; /* set background image to repeat */
    animation: moveBackground 200s linear infinite; /* animate background movement */
    color: #ffffff; /* set text color to white */
    font-family: 'Roboto', sans-serif; /* set font family */
    display: flex; /* use flexbox layout */
    flex-direction: column; /* arrange children in a column */
    height: 100vh; /* set height to full viewport height */
    background-color: #121212; /* set background color */
}

/* content area styles */
#contentArea {
    overflow-y: scroll; /* enable vertical scrolling */
    overflow-x: hidden; /* disable horizontal scrolling */
    height: 80%; /* set height to full container height */
}

/* header styles */
header {
    background-color: rgba(18, 18, 18, 0.8); /* semi-transparent background */
    color: #fff; /* set text color to white */
    text-align: center; /* center align text */
    position: sticky; /* make header sticky */
    z-index: 1001; /* set z-index for layering */
    font-size: 1.5em; /* set font size */
    top: 0; /* position at the top */
    padding: 10px; /* set padding */
}

/* container styles */
.container {
    flex: 1; /* allow container to grow */
    overflow-y: scroll; /* enable vertical scrolling */
    padding: 20px; /* set padding */
    background-color: rgba(18, 18, 18, 0.8); /* semi-transparent background */
    margin-top: 20px; /* set top margin */
    margin-bottom: 80px; /* set bottom margin to maintain distance from footer */
    z-index: 1000; /* set z-index for layering */
}

/* scrollbar styles */
::-webkit-scrollbar {
    width: 12px; /* set scrollbar width */
}

::-webkit-scrollbar-track {
    background: #1e1e1e; /* set track background color */
}

::-webkit-scrollbar-thumb {
    background-color: #333; /* set thumb color */
    border-radius: 10px; /* round the corners */
    border: 3px solid #1e1e1e; /* set border color */
}

/* dark mode input styles */
.dark-input {
    background-color: #333; /* set background color */
    color: #fff; /* set text color */
    border: 1px solid #555; /* set border color */
    border-radius: 5px; /* round the corners */
    padding: 10px; /* set padding */
    font-size: 1em; /* set font size */
}

.dark-input::placeholder {
    color: #bbb; /* set placeholder color */
}

.dark-input:focus {
    background-color: #444; /* change background color on focus */
    color: #fff; /* set text color */
    border-color: #777; /* change border color on focus */
    outline: none; /* remove default outline */
    box-shadow: 0 0 5px rgba(0, 123, 255, 0.5); /* add shadow on focus */
}

/* centered list item styles */
.centered-list-item {
    display: flex; /* use flexbox layout */
    align-items: center; /* center align items vertically */
    justify-content: space-between; /* space items evenly */
}

/* panel styles */
.panel {
    background-color: #1e1e1e; /* set background color */
    border-radius: 10px; /* round the corners */
    padding: 20px; /* set padding */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* add shadow */
    margin-left: 100px; /* set left margin */
    margin-right: 100px; /* set right margin */
}

/* heading styles */
h2 {
    font-family: 'Source Code Pro', monospace; /* set font family */
}

/* paragraph styles */
p {
    font-family: 'Roboto', sans-serif; /* set font family */
}

/* robot icon styles */
.fa-robot {
    color: orange; /* set icon color */
    opacity: 0.5; /* make icon semi-transparent */
}

/* user icon styles */
.fa-user {
    color: #757575; /* set icon color */
    opacity: 0.5; /* make icon semi-transparent */
    z-index: 2001; /* set z-index for layering */
}

.fa-user:hover {
    color: #89CFF0; /* change color on hover */
}

/* login popup styles */
#loginPopup {
    display: none; /* hide by default */
    position: fixed; /* fix position */
    top: 50px; /* set top position */
    right: 50px; /* set right position */
    width: 300px; /* set width */
    padding: 5px; /* set padding */
    background-color: rgba(40, 40, 40, 0.8); /* semi-transparent background */
    color: #232323; /* set text color */
    border: 1px solid #232323; /* set border color */
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.7); /* add shadow */
    z-index: 2000; /* set z-index for layering */
    border-radius: 10px; /* round the corners */
}

#loginPopup input, #loginPopup select {
    background-color: #555; /* set background color */
    color: #232323; /* set text color */
    border: 1px solid #232323; /* set border color */
    border-radius: 5px; /* round the corners */
    padding: 1px; /* set padding */
    padding-left: 15px; /* set left padding */
    font-size: 1em; /* set font size */
}

#loginPopup input[type="text"]::before {
    content: "\f007"; /* FontAwesome user icon */
    font-family: "Font Awesome 5 Free"; /* FontAwesome font family */
    font-weight: 900; /* FontAwesome solid style */
    margin-right: 10px; /* space between icon and text */
    color: #bbb; /* icon color */
}

#loginPopup input[type="password"]::before {
    content: "\f023"; /* FontAwesome lock icon */
    font-family: "Font Awesome 5 Free"; /* FontAwesome font family */
    font-weight: 900; /* FontAwesome solid style */
    margin-right: 10px; /* space between icon and text */
    color: #bbb; /* icon color */
}

input, select {
    background-color: #333; /* set background color */
    color: #232323; /* set text color */
    border: 1px solid #232323; /* set border color */
    border-radius: 5px; /* round the corners */
    padding: 1px; /* set padding */
    font-size: 1em; /* set font size */
}

input::placeholder, select::placeholder {
    color: #232323; /* set placeholder color */
}

input:focus, select:focus {
    background-color: #232323; /* change background color on focus */
    color: #232323; /* set text color */
    border-color: #232323; /* change border color on focus */
    outline: none; /* remove default outline */
    box-shadow: 0 0 5px #007bff80; /* add shadow on focus */
}

.form-control {
    background-color: #333333; /* set background color */
    color: #232323; /* set text color */
    border: 1px solid #232323; /* set border color */
}

.form-control::placeholder {
    color: #232323; /* set placeholder color */
}

.btn-primary {
    background-color: #333333; /* set background color */
    border-color: #232323; /* set border color */
}

.btn-primary:hover {
    background-color: #333333; /* change background color on hover */
    border-color: #232323; /* change border color on hover */
}

.btn-custom {
    width: 40px;
    height: calc(1.5em + .75rem + 0px);
    margin-top: 1px;
}

/* rechte Seitenleiste (permanent) */



/* Kompakter Spendenkasten unten rechts */
.sidebar-fixed {
    position: fixed;
    right: 15px;
    bottom: 40px;
    width: 138px;
    background: rgba(24, 24, 24, 0.55);
    box-shadow: 0 2.5px 15px 0 rgba(0,0,0,0.18);
    z-index: 100;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    padding: 11px 9px 9px 9px;
    border: 1.2px solid #232323;
    gap: 7.5px;
}

body {
    margin-right: 0 !important;
}

.sidebar-fixed .paypal-btn {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    background: none;
    border: none;
    padding: 0;
    margin: 0;
}

.sidebar-fixed img {
    width: 90%;
    max-width: 113px;
    border-radius: 5px;
    box-shadow: 0 1.25px 5px rgba(0,0,0,0.18);
    transition: box-shadow 0.2s;
}
.sidebar-fixed img:hover {
    box-shadow: 0 2.5px 11px rgba(0,123,255,0.18);
}

.sidebar-fixed .sidebar-text {
    color: #eee;
    font-size: 0.66em;
    text-align: center;
    font-family: 'Roboto', sans-serif;
    margin-top: 3.75px;
    margin-bottom: 0;
    letter-spacing: 0.02em;
}

@media (max-width: 700px) {
    .sidebar-fixed {
        display: none;
    }
    body {
        margin-right: 0 !important;
    }
}

/* footer styles */
footer {
    background-color: rgba(18, 18, 18, 0.8); /* semi-transparent background */
    color: #fff; /* set text color */
    text-align: center; /* center align text */
    padding: 5px 10px; /* adjust padding to move text up */
    position: absolute; /* fix position */
    bottom: 0; /* position at the bottom */
    width: 100%; /* set width to full container width */
    z-index: 0; /* set z-index to be behind main content */
    height: 25px; /* set height to 25px */
    font-size: 10px; /* set text size to 10px */
    font-family: 'Courier New', Courier, monospace; /* set font family */
    letter-spacing: 1px; /* increase letter spacing */
}

/* ========== Reusable Component Classes ========== */

/* Page section wrapper */
.section-wrapper {
    margin: 32px 0 0 30px;
    max-width: 650px;
    font-family: 'Roboto', sans-serif;
}

.section-wrapper-wide {
    margin: 32px 0 0 30px;
    max-width: 900px;
    font-family: 'Roboto', sans-serif;
}

.section-wrapper-xl {
    margin: 32px 0 0 30px;
    max-width: 1200px;
    font-family: 'Roboto', sans-serif;
}

/* Page headings */
.page-heading {
    color: #89CFF0;
    font-size: 2.1em;
    margin-bottom: 22px;
    letter-spacing: 0.5px;
}

.page-heading-sm {
    color: #89CFF0;
    font-size: 1.3em;
    margin-bottom: 12px;
}

/* Dark card/panel */
.card-dark {
    background: #232323;
    color: #fff;
    border-radius: 8px;
    padding: 18px 22px;
}

.card-dark-sm {
    background: #232323;
    color: #fff;
    border-radius: 6px;
    padding: 14px 18px;
    margin-bottom: 14px;
}

/* Info box with left border */
.info-box {
    background: #232323;
    color: #89CFF0;
    border-left: 5px solid #89CFF0;
    padding: 12px 18px;
    border-radius: 6px;
    margin-bottom: 18px;
    font-size: 1.08em;
}

.info-box-success {
    background: #232323;
    color: #4be37a;
    border-left: 5px solid #4be37a;
    padding: 12px 18px;
    border-radius: 6px;
    margin-bottom: 18px;
    font-size: 1.08em;
}

.info-box-warning {
    background: #232323;
    color: #FFB86C;
    border-left: 5px solid #FFB86C;
    padding: 12px 18px;
    border-radius: 6px;
    margin-bottom: 18px;
    font-size: 1.08em;
}

.info-box-error {
    background: #232323;
    color: #ff6b6b;
    border-left: 5px solid #ff6b6b;
    padding: 12px 18px;
    border-radius: 6px;
    margin-bottom: 18px;
    font-size: 1.08em;
}

/* Error/success message inline */
.msg-error {
    color: #ff6b6b;
    background: #232323;
    border-left: 4px solid #ff6b6b;
    max-width: 420px;
    margin: 0 auto 18px auto;
    padding: 10px 18px;
    border-radius: 5px;
    font-size: 1em;
    font-family: 'Roboto', sans-serif;
    text-align: center;
}

.msg-success {
    color: #4be37a;
    background: #232323;
    border-left: 4px solid #4be37a;
    max-width: 420px;
    margin: 0 auto 18px auto;
    padding: 10px 18px;
    border-radius: 5px;
    font-size: 1em;
    font-family: 'Roboto', sans-serif;
    text-align: center;
}

/* Dark form input */
.input-dark {
    width: 100%;
    padding: 7px 10px;
    margin: 7px 0 14px 0;
    border-radius: 4px;
    border: 1px solid #232323;
    background: #181818;
    color: #fff;
    font-family: 'Roboto', sans-serif;
}

.input-dark-lg {
    width: 100%;
    padding: 10px;
    margin: 10px 0 18px 0;
    border-radius: 6px;
    border: 1px solid #444;
    background: #181818;
    color: #fff;
}

/* Buttons */
.btn-primary-custom {
    width: 100%;
    background: #89CFF0;
    color: #181818;
    font-weight: 700;
    border: none;
    border-radius: 4px;
    padding: 8px 0;
    font-family: 'Roboto', sans-serif;
    cursor: pointer;
}

.btn-primary-custom:hover {
    background: #a0dbf7;
}

/* News card with orange border */
.news-card {
    background: #232323;
    color: #fff;
    border-radius: 6px;
    padding: 14px 18px;
    margin-bottom: 14px;
    border-left: 5px solid #FFA500;
}

/* Description text */
.text-desc {
    color: #d0e7ff;
    line-height: 1.7;
    margin-bottom: 22px;
}

/* Login success box */
.login-success-box {
    background: #232323;
    color: #89CFF0;
    border-left: 5px solid #89CFF0;
    padding: 20px;
    border-radius: 10px;
    margin: 40px auto 0 auto;
    max-width: 500px;
    font-size: 1.1em;
    font-family: 'Roboto', sans-serif;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    text-align: left;
}

/* Toggle icon states */
.toggle-on {
    color: #4be37a;
    font-size: 1.3em;
    cursor: pointer;
}

.toggle-off {
    color: #888;
    font-size: 1.3em;
    cursor: pointer;
}

.toggle-disabled {
    font-size: 1.3em;
}