/* ======================================================
   BRIGHT MODE – PREMIUM WHITE/GLASS + GOLD ACCENTS
   ====================================================== */

[data-theme="bright"] body {
    background: #faf8f2 !important;   /* warm ivory */
    color: #3a3a3a !important;
}

/* Text / Links */
[data-theme="bright"] .account-btn,
[data-theme="bright"] a,
[data-theme="bright"] a:visited {
    color: #919191 !important;        /* gold-braun */
}
[data-theme="bright"] a:hover {
    color: #d4a200 !important;        /* helleres Gold */
}
[data-theme="bright"] .account-dropdown-header {
    border-bottom: 1px solid #909090 !important;
	color: #919191 !important;
}

/* Navigation Bar */
[data-theme="bright"] .bar {
    background: rgba(255,255,255,0.55) !important;
    border-bottom: 1px solid rgba(0,0,0,0.08) !important;
    backdrop-filter: blur(14px);
}
[data-theme="bright"] .bar.scrolled {
    background: rgba(255,255,255,0.75) !important;
}
[data-theme="bright"] .bar-line {
    background: #6b6b6b !important;   /* dunkler als Dark Mode */
}

/* Dropdown Menüs */
[data-theme="bright"] .glass-menu,
[data-theme="bright"] .glass-menu-desktop,
[data-theme="bright"] .account-dropdown-content,
[data-theme="bright"] .dropdown-content {
    background: rgba(255,255,255,0.7) !important;
    border-color: rgba(0,0,0,0.08) !important;
    backdrop-filter: blur(14px);
}

/* Hover Hintergrund */
[data-theme="bright"] .glass-menu .navigation a::before,
[data-theme="bright"] .glass-menu-desktop .navigation a::before {
    background: rgba(255,225,140,0.20) !important; /* warm highlight */
}

/* Hover Farbe */
[data-theme="bright"] .glass-menu .navigation a:hover,
[data-theme="bright"] .glass-menu-desktop .navigation a:hover,
[data-theme="bright"] .account-dropdown-content a:hover {
    background: rgba(255,225,140,0.25) !important;
    color: #c89200 !important;
}

/* Boxen / Content Bereiche */
[data-theme="bright"] .website .pageContainer,
[data-theme="bright"] .news,
[data-theme="bright"] .box-inner,
[data-theme="bright"] .box-head,
[data-theme="bright"] .download-glass-box,
[data-theme="bright"] .avatar-newsbox,
[data-theme="bright"] .team_box {
    background: rgba(255,255,255,0.55) !important;
    border-color: rgba(0,0,0,0.10) !important;
    box-shadow: 0 6px 18px rgba(0,0,0,0.15) !important;
    color: #2a2a2a !important;
}

/* Spezielle Boxköpfe */
[data-theme="bright"] .box-head {
    background: rgba(255,255,255,0.8) !important;
    color: #c89200 !important;
}

/* BRIGHT IMAGE FILTERS (leicht warm & heller) */
[data-theme="bright"] .glass-header img,
[data-theme="bright"] .logo-container img,
[data-theme="bright"] .download-glass-box img {
    filter: brightness(100%) saturate(120%) sepia(48%);
}
[data-theme="bright"] .logo-container:hover img {
    filter: brightness(100%);
}

/* Header Slider Panel */
[data-theme="bright"] .glass-header {
    background: rgba(255,255,255,0.55) !important;
    border-color: rgba(0,0,0,0.10) !important;
}

/* Slider Bilder */
[data-theme="bright"] .website .head .image_slider img {
    border: 1px solid rgba(120,100,0,0.25) !important; /* warm gold */
    filter: brightness(115%) saturate(120%) sepia(8%);
}

/* Footer */
[data-theme="bright"] .footer {
    background: rgba(255,255,255,0.7) !important;
    border-color: rgba(0,0,0,0.08) !important;
}
[data-theme="bright"] .footer-inner * {
    color: #919191 !important;
}
[data-theme="bright"] .footer-inner a:hover {
    color: #c89200 !important; /* gold */
}

/* Avatar Rahmen & Bilder */
[data-theme="bright"] .account-avatar,
[data-theme="bright"] .account-dropdown-avatar,
[data-theme="bright"] .avatar-item,
[data-theme="bright"] .frame-item img,
[data-theme="bright"] .avatar-preview img {
    border-color: #c89200 !important;
    box-shadow: 0 0 6px rgba(200,140,10,0.35) !important;
}

/* Tabellen */
[data-theme="bright"] div.table .tbody .tr {
    background: rgba(255,255,255,0.55) !important;
    border-color: rgba(0,0,0,0.08) !important;
}
[data-theme="bright"] div.table .thead .tr {
    background: rgba(255,245,180,0.6) !important;
    border-color: rgba(0,0,0,0.10) !important;
    color: #5a4a00 !important;
}

/* Formulare */
[data-theme="bright"] input,
[data-theme="bright"] textarea,
[data-theme="bright"] select {
    background: rgba(255,255,255,0.85) !important;
    color: #3a3a3a !important;
    border: 1px solid rgba(0,0,0,0.12) !important;
}
[data-theme="bright"] input:focus,
[data-theme="bright"] textarea:focus,
[data-theme="bright"] select:focus {
    border-color: #d4a200 !important;
}

/* Headings */
[data-theme="bright"] h1,
[data-theme="bright"] h2,
[data-theme="bright"] h3,
[data-theme="bright"] h4,
[data-theme="bright"] h5,
[data-theme="bright"] h6 {
    background: rgba(255,255,255,0.75) !important;
    border-color: rgba(0,0,0,0.10) !important;
    color: #c89200 !important;
}

/* HR */
[data-theme="bright"] hr {
    background: rgba(0,0,0,0.15) !important;
}

/* HOME ALT-Sprechblase */
[data-theme="bright"] .icon-box::after {
        content: attr(data-alt); /* Alternativ: attr(alt) */
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%) translateY(-10px);
    background: rgba(200, 200, 200, 0.15);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    padding: 8px 18px;
    border-radius: 12px;
    font-size: 14px;
    font-weight: 600;
    color: #000000 !important;
    white-space: nowrap;
    opacity: 0;
    transition: opacity 0.25s ease, transform 0.25s ease;
    border: 1px solid rgba(225, 225, 225, 0.25);
    }
	.icon-box::before {
		content: "";
    position: absolute;
    bottom: calc(100% - 6px);
    left: 50%;
    transform: translateX(-50%);
    width: 12px;
    height: 12px;
    background: rgba(200, 200, 200, 0.15);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border-left: 1px solid rgba(225, 225, 225, 0.25);
    border-top: 1px solid rgba(225, 225, 225, 0.25);
    transform: translateX(-50%) rotate(45deg);
    opacity: 0;
    transition: opacity 0.25s ease;
    }
	.icon-box:hover::after,
	.icon-box:hover::before{
		opacity: 1;
	}

/* ===========================
   DARK MODE – ONLY OVERRIDES
   ===========================*/

[data-theme="dark"] body {
    background: #0d0d10 !important;
    color: #cecece !important;
}

/* Text / Links */
[data-theme="dark"] a,
[data-theme="dark"] a:visited {
    color: #c2c2c2 !important;
}
[data-theme="dark"] a:hover {
    color: #f4d47a !important;
}

/* Navigation Bar */
[data-theme="dark"] .bar {
    background: rgba(20,20,20,0.55) !important;
    border-bottom: 1px solid rgba(255,255,255,0.12) !important;
    backdrop-filter: blur(14px);
}
[data-theme="dark"] .bar.scrolled {
    background: rgba(35,35,35,0.7) !important;
}
[data-theme="dark"] .bar-line {
    background: #ffffff !important;
}

/* Dropdown Menüs */
[data-theme="dark"] .glass-menu,
[data-theme="dark"] .glass-menu-desktop,
[data-theme="dark"] .account-dropdown-content,
[data-theme="dark"] .dropdown-content {
    background: rgba(25,25,25,0.55) !important;
    border-color: rgba(255,255,255,0.12) !important;
}

/* Hover Hintergrund */
[data-theme="dark"] .glass-menu .navigation a::before,
[data-theme="dark"] .glass-menu-desktop .navigation a::before {
    background: rgba(255,255,255,0.08) !important;
}

/* Hover Farbe */
[data-theme="dark"] .glass-menu .navigation a:hover,
[data-theme="dark"] .glass-menu-desktop .navigation a:hover,
[data-theme="dark"] .account-dropdown-content a:hover {
    background: rgba(255,255,255,0.12) !important;
    color: #f4d47a !important;
}

/* Boxen */
[data-theme="dark"] .website .pageContainer,
[data-theme="dark"] .news,
[data-theme="dark"] .box-inner,
[data-theme="dark"] .box-head,
[data-theme="dark"] .download-glass-box,
[data-theme="dark"] .avatar-newsbox,
[data-theme="dark"] .team_box {
    background: rgba(25,25,25,0.5) !important;
    border-color: rgba(255,255,255,0.12) !important;
    box-shadow: 0 6px 18px rgba(0,0,0,0.75) !important;
    color: #cecece !important;
}

/* Spezielle Boxköpfe */
[data-theme="dark"] .box-head {
    background: rgba(35,35,35,0.7) !important;
    color: #f4d47a !important;
}

/* SCHWARZ-WEISS FILTER FÜR WEBSITE-BILDER */
[data-theme="dark"] .glass-header img {
    filter: grayscale(80%) brightness(70%);
}
[data-theme="dark"] .logo-container img {
    filter: grayscale(80%) brightness(70%);
}
[data-theme="dark"] .logo-container:hover img {
    filter: grayscale(0%) brightness(70%);
}
[data-theme="dark"] .slider-dots {
    filter: grayscale(80%) brightness(70%);
}
[data-theme="dark"] .download-glass-box img {
    filter: grayscale(80%) brightness(70%);
}

/* Header Slider */
[data-theme="dark"] .glass-header {
    background: rgba(20,20,20,0.55) !important;
    border-color: rgba(255,255,255,0.12) !important;
}

/* Header Slider BILDER */
[data-theme="dark"] .website .head .image_slider img {
    border: 1px solid #F4E4B0 !important;
    border-color: rgba(255,255,255,0.45) !important;
	filter: grayscale(80%) brightness(70%);
}

/* HOVER FILTER FÜR WEBSITE-BILDER */
[data-theme="dark"] .download-glass-box:hover img {
    filter: grayscale(0%) brightness(100%);
	border: 1px solid #F4E4B0 ;
}
[data-theme="dark"] .website .head .image_slider:hover img {
    filter: grayscale(0%) brightness(100%);
}
[data-theme="dark"] .slider-dots:hover {
    filter: grayscale(0%) brightness(100%);
}

/* Footer */
[data-theme="dark"] .footer {
    background: rgba(25,25,25,0.7) !important;
    border-color: rgba(255,255,255,0.12) !important;
}
[data-theme="dark"] .footer-inner * {
    color: #c2c2c2 !important;
}
[data-theme="dark"] .footer-inner a:hover {
    color: #f4d47a !important;
}

/* Avatar Rahmen & Bilder */
[data-theme="dark"] .account-avatar,
[data-theme="dark"] .account-dropdown-avatar,
[data-theme="dark"] .avatar-item,
[data-theme="dark"] .frame-item img,
[data-theme="dark"] .avatar-preview img {
    border-color: #f4d47a !important;
    box-shadow: 0 0 8px rgba(250,212,45,0.45) !important;
}

/* Tabellen */
[data-theme="dark"] div.table .tbody .tr {
    background: rgba(25,25,25,0.5) !important;
    border-color: rgba(255,255,255,0.12) !important;
}
[data-theme="dark"] div.table .thead .tr {
    background: rgba(90,90,150,0.4) !important;
    border-color: rgba(255,255,255,0.12) !important;
    color: #ffffff !important;
}

/* Formulare */
[data-theme="dark"] input,
[data-theme="dark"] textarea,
[data-theme="dark"] select {
    background: rgba(35,35,35,0.7) !important;
    color: #ffffff !important;
    border: 1px solid rgba(255,255,255,0.12) !important;
}
[data-theme="dark"] input:focus,
[data-theme="dark"] textarea:focus,
[data-theme="dark"] select:focus {
    border-color: #f4d47a !important;
}

/* Headings */
[data-theme="dark"] h1,
[data-theme="dark"] h2,
[data-theme="dark"] h3,
[data-theme="dark"] h4,
[data-theme="dark"] h5,
[data-theme="dark"] h6 {
    background: rgba(35,35,35,0.7) !important;
    border-color: rgba(255,255,255,0.12) !important;
    color: #f4d47a !important;
}

/* HR */
[data-theme="dark"] hr {
    background: rgba(255,255,255,0.12) !important;
}

/* DARKMODE BUTTON */
.theme-switch {
    display: flex;
    align-items: center;
    margin-left: -5px;
}

/* Outer Glass Capsule */
.theme-toggle {
    width: 45px;
    height: 15px;
    border-radius: 40px;
    padding: 3px;
    cursor: url("../images/website/icons/cursor-hover.png") 4 4, pointer !important;
    position: relative;
    display: flex;
    align-items: center;

    background: rgba(121, 138, 186, 0.48);
    backdrop-filter: blur(12px) saturate(180%);
    border: 1px solid rgba(255, 255, 255, 0.35);
    transition:
        background .35s ease,
        border-color .35s ease,
        box-shadow .35s ease;
}

/* Hover Glow (dezent & edel) */
.theme-toggle:hover {
    box-shadow:
        0 0 6px rgba(250, 212, 45, 0.35),
        0 0 10px rgba(250, 212, 45, 0.18);
}

/* Dark Mode Outer Glass */
[data-theme="bright"] .theme-toggle {
    background: rgba(25, 25, 25, 0.35);
    border-color: rgba(255, 255, 255, 0.18);
	filter: brightness(100%) saturate(120%) sepia(48%);
}
/* Dark Mode Outer Glass */
[data-theme="dark"] .theme-toggle {
    background: rgba(25, 25, 25, 0.35);
    border-color: rgba(255, 255, 255, 0.18);
}

/* Sliding Handle */
.switch-handle {
    width: 17px;
    height: 17px;
    border-radius: 50%;
    position: absolute;
    left: 2px;
    top: 50%;
	transform: translateY(-50%);

    display: flex;
    align-items: center;
    justify-content: center;

    background: rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(14px);

    box-shadow:
        0 1px 3px rgba(0,0,0,0.20),
        inset 0 0 3px rgba(255,255,255,0.6),
        0 0 4px rgba(255, 226, 150, 0.35); /* slight golden aura */

    /* iOS Snap Animation */
    transition:
        left .35s cubic-bezier(0.25, 1.6, 0.35, 1),
        background .25s ease,
        box-shadow .25s ease;
}

/* Handle Glow on Hover (subtle) */
.theme-toggle:hover .switch-handle {
    cursor: url("../images/website/icons/cursor-hover.png") 4 4, pointer !important;
	box-shadow:
        0 1px 3px rgba(0,0,0,0.20),
        inset 0 0 4px rgba(255,255,255,0.7),
        0 0 8px rgba(250, 212, 45, 0.45);
}

/* Dark Mode Handle */
[data-theme="dark"] .switch-handle {
    background: rgba(255, 255, 255, 0.08);
    box-shadow:
        0 0 6px rgba(0,0,0,0.6),
        inset 0 0 4px rgba(255,255,255,0.2),
        0 0 4px rgba(255, 226, 150, 0.20);
}

/* Bright = mittig */
[data-theme="bright"] .theme-toggle .switch-handle {
    left: 16.5px;   /* perfekte Mitte für 45px */
}

/* Move handle to the right in dark mode */
[data-theme="dark"] .theme-toggle .switch-handle {
    left: 32px;
}

/* Sun + Moon Icons */
.switch-handle svg {
    position: absolute;
	width: 10px;
    height: 10px;
    stroke: #888;
    fill: none;
    transition: opacity .25s ease, stroke .25s ease, fill .25s ease;
}

/* Sun Gold in Light Mode */
.icon-sun {
    stroke: #f5c053;
    opacity: 1;
}

/* Moon hidden in Light Mode */
.icon-moon {
    fill: #ccc;
    opacity: 0;
}

.icon-bright {
    stroke: #f5d97a;     /* warm gold */
    fill: none;
    stroke-linejoin: round;
    stroke-width: 1.0;
    opacity: 0;
    transition: opacity .25s ease, stroke .25s ease;
}

/* Bright Mode sichtbar */
[data-theme="bright"] .icon-bright {
    opacity: 1;
}
[data-theme="bright"] .icon-sun,
[data-theme="bright"] .icon-moon {
    opacity: 0;
}

/* In Dark Mode: Moon becomes visible, Sun fades */
[data-theme="dark"] .icon-sun,
[data-theme="dark"] .icon-bright {
    opacity: 0;
}

[data-theme="dark"] .icon-moon {
    opacity: 1;
    fill: #f4d47a;
}