i.flag-icon {
    border-radius: 50%;
}

/* ==========================================================
   SweetAlert – CI Dark Theme
   ========================================================== */
.sweet-alert {
    background-color: #07091e !important;
    border-radius: 16px !important;
    border: 1px solid rgba(96,194,219,0.15) !important;
    box-shadow: 0 24px 60px rgba(0,0,0,0.6) !important;
    padding: 32px 40px 28px !important;
}
.sweet-alert h2 {
    color: #ffffff !important;
    font-size: 22px !important;
    font-weight: 700 !important;
    line-height: 1.3 !important;
}
.sweet-alert p {
    color: rgba(255,255,255,0.60) !important;
    font-size: 15px !important;
    font-weight: 400 !important;
}

/* Buttons */
.sweet-alert button.confirm {
    background-color: #60c2db !important;
    border-radius: 8px !important;
    color: #07091e !important;
    font-weight: 700 !important;
    font-size: 15px !important;
    padding: 10px 28px !important;
}
.sweet-alert button.confirm:hover {
    background-color: #7dd4e8 !important;
}
.sweet-alert button.cancel {
    background-color: rgba(255,255,255,0.08) !important;
    border-radius: 8px !important;
    color: rgba(255,255,255,0.65) !important;
    font-weight: 600 !important;
    font-size: 15px !important;
    padding: 10px 28px !important;
}

/* ── Success icon: fix white masks on dark bg ── */
.sweet-alert .icon.success {
    border-color: #60c2db !important;
}
.sweet-alert .icon.success::before,
.sweet-alert .icon.success::after {
    background: #07091e !important;
}
.sweet-alert .icon.success .placeholder {
    border-color: rgba(96,194,219,0.20) !important;
}
.sweet-alert .icon.success .fix {
    background-color: #07091e !important;
}
.sweet-alert .icon.success .line {
    background-color: #60c2db !important;
}

/* ── Error icon ── */
.sweet-alert .icon.error {
    border-color: #f87171 !important;
}
.sweet-alert .icon.error .line {
    background-color: #f87171 !important;
}

/* ── Warning icon ── */
.sweet-alert .icon.warning {
    border-color: #fbbf24 !important;
}
.sweet-alert .icon.warning .body,
.sweet-alert .icon.warning .dot {
    background-color: #fbbf24 !important;
}

/* ── Info icon ── */
.sweet-alert .icon.info {
    border-color: #60c2db !important;
}
.sweet-alert .icon.info::before,
.sweet-alert .icon.info::after {
    background-color: #60c2db !important;
}

/* ==========================================================
   Gradient Buttons: .butn-arrow.butn-rounded
   Beide Hauptfarben: #24244F (Navy) → #60c2db (Cyan).
   Der Gradient "fährt" auf Hover von links nach rechts (200%
   Breite, background-position-x animiert). Funktioniert in
   Dark-Mode (default) und Light-Mode (body.light).
   ========================================================== */

/* ── Dark Mode ───────────────────────────────────────────── */
.butn-arrow.butn-rounded {
    background-image: linear-gradient(120deg, #24244f 0%, #60c2db 100%) !important;
    background-size:  200% 100% !important;
    background-position-x: 0% !important;
    background-color: transparent !important;
    color: #fff !important;
    border: none !important;
    transition: background-position-x 0.55s ease,
                box-shadow            0.4s  ease;
}

.butn-arrow.butn-rounded span {
    color: #fff !important;
}

/* Arrow-Icon: Frosted-Glass auf dem Gradient */
.butn-arrow.butn-rounded .arrow-icon {
    background: rgba(255, 255, 255, 0.16) !important;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    border: 1px solid rgba(255, 255, 255, 0.28) !important;
    transition: background 0.4s ease;
}

.butn-arrow.butn-rounded .arrow-icon svg {
    stroke: #fff;
}

/* Hover: Gradient gleitet zu Cyan, sanftes Glow */
.butn-arrow.butn-rounded:hover {
    background-image:     linear-gradient(120deg, #24244f 0%, #60c2db 100%) !important;
    background-size:      200% 100% !important;
    background-position-x: 100% !important;
    background-color:     transparent !important;
    box-shadow: 0 6px 28px rgba(96, 194, 219, 0.50),
                0 2px 10px rgba(36, 36, 79,  0.35) !important;
    color: #fff !important;
}

.butn-arrow.butn-rounded:hover span {
    color: #fff !important;
}

.butn-arrow.butn-rounded:hover .arrow-icon {
    background: rgba(255, 255, 255, 0.28) !important;
}

/* ── Light Mode (body.light) ─────────────────────────────── */
body.light .butn-arrow.butn-rounded {
    background-image: linear-gradient(120deg, #24244f 0%, #60c2db 100%) !important;
    background-size:  200% 100% !important;
    background-position-x: 0% !important;
    background-color: transparent !important;
    color: #fff !important;
    border: none !important;
    transition: background-position-x 0.55s ease,
                box-shadow            0.4s  ease;
}

body.light .butn-arrow.butn-rounded span {
    color: #fff !important;
}

body.light .butn-arrow.butn-rounded .arrow-icon {
    background: rgba(255, 255, 255, 0.16) !important;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    border: 1px solid rgba(255, 255, 255, 0.28) !important;
    transition: background 0.4s ease;
}

body.light .butn-arrow.butn-rounded .arrow-icon svg {
    stroke: #fff !important;
}

body.light .butn-arrow.butn-rounded:hover {
    background-image:     linear-gradient(120deg, #24244f 0%, #60c2db 100%) !important;
    background-size:      200% 100% !important;
    background-position-x: 100% !important;
    background-color:     transparent !important;
    box-shadow: 0 6px 28px rgba(96, 194, 219, 0.55),
                0 2px 10px rgba(36, 36, 79,  0.40) !important;
    color: #fff !important;
}

body.light .butn-arrow.butn-rounded:hover span {
    color: #fff !important;
}

body.light .butn-arrow.butn-rounded:hover .arrow-icon {
    background: rgba(255, 255, 255, 0.28) !important;
}

/* ==========================================================
   Mobile Responsive Fixes – index page
   ========================================================== */

/* --- 3 Flip-Cards (Value / Growth / Legacy) ---
   GSAP-Flip-Animation nur noch ab 1270px (Desktop).
   Darunter: gestapeltes Layout, card-back direkt sichtbar.
   Breakpoint muss mit den matchMedia-Werten in index.php übereinstimmen
   (max-width: 1269px / min-width: 1270px). */
@media (max-width: 1269px) {
    .sticky {
        display: block !important;
        margin-top: 100px;
    }
    .sticky-header {
        position: static !important;
        transform: none !important;
    }
    .sticky-header h1 {
        opacity: 1 !important;
        transform: none !important;
        font-size: clamp(28px, 7vw, 72px) !important;
    }

    /* Cards stapeln statt Flex-Reihe */
    .card-container {
        display: block !important;
        transform: none !important;
    }
    .card-container .serv-card {
        width: 100% !important;
        max-width: 520px !important;
        margin: 20px auto !important;
        aspect-ratio: auto !important;
        border-radius: 20px !important;
        flex: none !important;
    }

    /* Vorderseite aus, Rückseite immer sichtbar */
    .serv-card .card-front {
        display: none !important;
    }
    .serv-card .card-back {
        position: static !important;
        height: auto !important;
        overflow: visible !important;
        backface-visibility: visible !important;
        transform: none !important;
        padding: 40px 32px !important;
    }
    #card-1, #card-2, #card-3, .card-back {
        transform: none !important;
    }

    .serv-card .card-back h5 {
        font-size: clamp(16px, 3.5vw, 22px);
    }
    .serv-card .card-back p {
        font-size: clamp(13px, 2vw, 15px);
        line-height: 1.6;
    }
}

/* --- Schriftgrößen-Skalierung ab 992px abwärts --- */
@media screen and (max-width: 992px) {
    /* Hero-Subtitle */
    .hero-style1 h2.fs-40 {
        font-size: 26px !important;
        line-height: 1.3;
    }

    /* Intro: langer Fließtext-h2 */
    .intro-style1 h2.fs-40 {
        font-size: 26px !important;
        line-height: 1.35;
    }

    /* "Dein Vermögen wächst mit deiner Persönlichkeit" */
    .hero-style2 .caption h2.fs-80 {
        font-size: 48px !important;
        line-height: 1.15;
    }

    /* Education-Themen Seitentitel */
    .portfolio-style1 h2.fs-80 {
        font-size: 52px !important;
    }

    /* Blog-Sektion Hauptüberschrift */
    .blog-style2 h2.fs-60 {
        font-size: 38px !important;
    }
}

/* --- Aggressivere Reduktion auf kleinen Phones (< 576px) --- */
@media screen and (max-width: 575px) {
    /* Hero h1: 10vw = 37.5px bei 375px – passt, aber Fallback für sehr enge Screens */
    .hero-style1 h1 {
        font-size: clamp(28px, 10vw, 52px);
    }

    /* Hero-Subtitle */
    .hero-style1 h2.fs-40 {
        font-size: 20px !important;
    }

    /* Intro-Bereich: langer Fließtext-h2 */
    .intro-style1 h2.fs-40 {
        font-size: 20px !important;
        line-height: 1.35;
    }

    /* Sticky-Section "Coindrop steht für" */
    .sticky-header h1 {
        font-size: clamp(26px, 9vw, 48px) !important;
        padding: 0 12px;
    }

    /* "Dein Vermögen wächst..." */
    .hero-style2 .caption h2.fs-80 {
        font-size: 28px !important;
        line-height: 1.2;
    }

    /* Education-Themen Seitentitel */
    .portfolio-style1 h2.fs-80 {
        font-size: 36px !important;
    }

    /* Blog-Sektion */
    .blog-style2 h2.fs-60 {
        font-size: 26px !important;
    }

    .blog-style2 h4 {
        font-size: 15px !important;
        line-height: 1.4;
    }

    /* Stat-Zahlen (1200+, 1000+, …) leicht reduzieren */
    .intro-style1 .item-numb h2 {
        font-size: 42px !important;
    }

    /* Cards auf sehr kleinen Screens: weniger Padding */
    .serv-card .card-back {
        padding: 28px 16px !important;
    }

    /* Gallery-Bilder in hero-style2 */
    .hero-style2 .gellry-imgs .img {
        width: 100px !important;
        height: 130px !important;
    }
}
select.is-valid, select.is-valid:focus,
.was-validated select:valid, .was-validated select:valid:focus {
    background-repeat: no-repeat !important;
}

/* ── Global: kein blauer Focus-Ring auf Inputs ── */
.form-control:focus,
.form-select:focus {
    box-shadow: none !important;
}

/* ==========================================================
   Shared CD Components – Label, Buttons, Stats
   ========================================================== */

.cd-label {
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: #60c2db;
    margin-bottom: 14px;
    display: block;
}

.cd-btn-primary {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 15px 36px;
    border-radius: 50px;
    background: linear-gradient(135deg, #60c2db, #4a9fb8);
    color: #fff;
    font-weight: 700;
    font-size: .92rem;
    text-decoration: none;
    box-shadow: 0 8px 28px rgba(96,194,219,.35);
    transition: transform .18s, box-shadow .18s;
    border: none;
    cursor: pointer;
}
.cd-btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 36px rgba(96,194,219,.45);
    color: #fff;
    text-decoration: none;
}

.cd-btn-outline {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 14px 32px;
    border-radius: 50px;
    border: 1.5px solid rgba(96,194,219,.5);
    color: #60c2db;
    font-weight: 700;
    font-size: .92rem;
    text-decoration: none;
    transition: all .18s;
}
.cd-btn-outline:hover {
    background: rgba(96,194,219,.1);
    border-color: #60c2db;
    color: #60c2db;
    text-decoration: none;
}

/* Stats cards */
.cd-stat-card {
    background: rgba(255,255,255,.03);
    border: 1px solid rgba(255,255,255,.09);
    border-radius: 20px;
    padding: 36px 24px;
    text-align: center;
    transition: border-color .2s, transform .2s;
}
.cd-stat-card:hover {
    border-color: rgba(96,194,219,.35);
    transform: translateY(-3px);
}
.cd-stat-card.accent {
    border-color: rgba(96,194,219,.3);
    background: rgba(96,194,219,.05);
}
.cd-stat-number {
    font-size: clamp(2.5rem, 4vw, 3.5rem);
    font-weight: 300;
    color: #60c2db;
    line-height: 1;
    margin-bottom: 10px;
}
.cd-stat-number sup {
    font-size: 1.2rem;
}
.cd-stat-label {
    font-size: .85rem;
    color: rgba(255,255,255,.55);
    font-weight: 500;
}
body.light .cd-stat-card {
    background: rgba(0,0,0,.04);
    border-color: rgba(0,0,0,.14);
}
body.light .cd-stat-card:hover { border-color: rgba(96,194,219,.5); }
body.light .cd-stat-card.accent {
    background: rgba(96,194,219,.13);
    border-color: rgba(96,194,219,.45);
}
body.light .cd-stat-label { color: rgba(0,0,0,.55); }
body.light .cd-stat-number { color: #3a8fa8; }

/* Portfolio education items */
.portfolio-style1 .cont h4 {
    font-size: 1rem;
    font-weight: 700;
    color: rgba(255,255,255,.9);
    margin-bottom: 8px;
}
.portfolio-style1 .cont p {
    font-size: .88rem;
    color: rgba(255,255,255,.5);
    line-height: 1.75;
    margin: 0;
}
body.light .portfolio-style1 .cont h4 { color: rgba(0,0,0,.85); }
body.light .portfolio-style1 .cont p  { color: rgba(0,0,0,.5); }

/* hero-style1 large screens */
@media (min-width: 1600px) { .hero-style1 h1 { font-size: 8vw; } }
@media (min-width: 2000px) { .hero-style1 h1 { font-size: 6vw; } }

/* Marquee even items */
.main-marq .box:last-of-type .item:nth-of-type(even) h4 {
    color: #aaa;
    -webkit-text-stroke: 0;
}

/* Sticky flip-cards */
#card-3.serv-card h5, #card-3.serv-card p { color: #ccc; }
.serv-card h5 { font-size: clamp(18px, 1.8vw, 24px); }
.serv-card p  { font-size: clamp(14px, 1.0vw, 16px); }
.sec-colorbg  { background: #24244F; }

/* hero-style2 */
.hero-style2 { padding-top: 50px; padding-bottom: 50px; }

/* ==========================================================
   Footer & Navbar (moved from main.php)
   ========================================================== */

.footer-style1 .fo-box-left .tags a:hover { border-color: #60c2db; }

/* Footer Glass – Dark Mode */
body:not(.light) .footer-style1 .fo-box-left,
body:not(.light) .footer-style1 .fo-box-right {
    background: rgba(7,9,30,.55) !important;
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    border: 1px solid rgba(255,255,255,.07);
}
.social-icon-circle a:hover { background: #60c2db; }

.lang-trigger {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 7px 12px 7px 10px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 40px;
    text-decoration: none;
    color: rgba(255, 255, 255, 0.8);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.5px;
    transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
    white-space: nowrap;
}
.lang-trigger:hover {
    background: rgba(96, 194, 219, 0.12);
    border-color: rgba(96, 194, 219, 0.4);
    color: #60C2DB;
    text-decoration: none;
}
.lang-trigger-flag {
    font-size: 18px;
    line-height: 1;
    flex-shrink: 0;
}
.lang-trigger-chevron {
    opacity: 0.5;
    transition: transform 0.2s ease;
}
.lang-trigger:hover .lang-trigger-chevron {
    transform: translateY(1px);
    opacity: 0.8;
}

/* ==========================================================
   Navbar – Active state
   ========================================================== */

.navbar .navbar-nav .nav-link.active {
    color: #60c2db !important;
}
/* Desktop: teal dot below active link */
@media (min-width: 992px) {
    .navbar .navbar-nav .nav-item.active > .nav-link {
        position: relative;
    }
    .navbar .navbar-nav .nav-item.active > .nav-link::after {
        content: '';
        position: absolute;
        bottom: -4px;
        left: 50%;
        transform: translateX(-50%);
        width: 18px;
        height: 2px;
        background: #60c2db;
        border-radius: 2px;
    }
}
/* Mobile: teal left border */
@media (max-width: 991px) {
    .navbar .navbar-nav .nav-link.active {
        border-left: 3px solid #60c2db;
        padding-left: 13px !important;
    }
}

/* ==========================================================
   Navbar – Mobile controls (lang + dark-mode inside collapse)
   ========================================================== */

.navbar-mobile-controls {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 0 6px;
    border-top: 1px solid rgba(255,255,255,.08);
    margin-top: 8px;
}
body.light .navbar-mobile-controls {
    border-top-color: rgba(0,0,0,.1);
}

/* ==========================================================
   Mobile Hero – Padding & Layout
   ========================================================== */

/* Move main padding-top out of inline style */
main.o-hidden { padding-top: 40px; }

@media (max-width: 991px) {
    main.o-hidden    { padding-top: 20px; }
    .hero-style1     { padding-top: 90px !important; }
}
@media (max-width: 575px) {
    main.o-hidden    { padding-top: 10px; }
    .hero-style1     { padding-top: 70px !important; }

    /* Tag-row: wrap as teal pills instead of justified row */
    .hero-style1 .caption .d-flex.justify-content-between {
        flex-wrap: wrap !important;
        justify-content: center !important;
        gap: 8px !important;
        margin-top: 28px !important;
    }
    .hero-style1 .caption .d-flex span {
        background: rgba(96,194,219,.08);
        border: 1px solid rgba(96,194,219,.22);
        border-radius: 20px;
        padding: 5px 14px;
        font-size: .72rem;
        margin: 0 !important;
    }

    /* Mobile hero images */
    .hero-style1 .d-block.d-sm-none .o-hidden {
        border-radius: 20px !important;
    }
    .hero-style1 .d-block.d-sm-none img {
        border-radius: 20px;
        height: 200px;
        width: 100%;
        object-fit: cover;
        object-position: center top;
    }
}

/* ==========================================================
   CD Shared Components – Sections, Typography, Layout
   (moved from ueber-uns.php + produkte.php)
   ========================================================== */

.cd-section    { padding: 80px 0; }
.cd-section-sm { padding: 60px 0; }
.cd-section-subtle { background: linear-gradient(180deg, transparent, rgba(96,194,219,.03), transparent); }

.cd-h2   { font-size: clamp(1.8rem, 3.5vw, 2.6rem); font-weight: 900; margin-bottom: 16px; line-height: 1.1; }
.cd-lead { font-size: 1rem; color: rgba(255,255,255,.6); line-height: 1.8; margin-bottom: 16px; }
.cd-text { font-size: .9rem; color: rgba(255,255,255,.55); line-height: 1.85; margin-bottom: 14px; }
.cd-accent { color: #60c2db; }

.cd-list { list-style: none; padding: 0; margin: 0 0 24px; display: flex; flex-direction: column; gap: 9px; }
.cd-list li { display: flex; align-items: flex-start; gap: 10px; font-size: .88rem; color: rgba(255,255,255,.65); line-height: 1.5; }
.cd-list li i { color: #60c2db; margin-top: 3px; flex-shrink: 0; }

.cd-split { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; }
@media (max-width: 767px) { .cd-split { grid-template-columns: 1fr; gap: 36px; } }

/* Placeholder boxes */
.cd-ph { background: linear-gradient(135deg, rgba(6,9,38,.9), rgba(10,14,50,.9)); border: 1.5px dashed rgba(96,194,219,.22); border-radius: 18px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; padding: 40px 20px; text-align: center; overflow: hidden; position: relative; }
.cd-ph::before { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse at 50% 0%, rgba(96,194,219,.06), transparent 65%); pointer-events: none; }
.cd-ph-icon   { font-size: 2rem; color: rgba(96,194,219,.35); }
.cd-ph-label  { font-size: .72rem; font-weight: 700; color: rgba(96,194,219,.5); text-transform: uppercase; letter-spacing: .1em; }
.cd-ph-desc   { font-size: .75rem; color: rgba(255,255,255,.25); max-width: 280px; line-height: 1.5; }
.cd-ph-format { font-size: .65rem; font-weight: 700; background: rgba(96,194,219,.1); border: 1px solid rgba(96,194,219,.2); color: rgba(96,194,219,.7); padding: 3px 10px; border-radius: 20px; letter-spacing: .05em; margin-top: 2px; }
.cd-ph-hero   { min-height: 420px; }
.cd-ph-split  { min-height: 340px; }
.cd-ph-medium { min-height: 280px; }
.cd-ph-sm     { min-height: 200px; }
.cd-ph-grid   { min-height: 220px; }

/* ── Image frames (real images) ── */
.cd-img-frame {
    position: relative;
    border-radius: 22px;
    overflow: hidden;
    box-shadow: 0 24px 80px rgba(0,0,0,.55), 0 0 0 1px rgba(96,194,219,.15);
}
.cd-img-frame img {
    width: 100%; height: auto;
    display: block;
    transition: transform .5s ease;
}
.cd-img-frame:hover img { transform: scale(1.03); }

/* Accent top border */
.cd-img-frame::before {
    content: '';
    position: absolute; top: 0; left: 10%; right: 10%; height: 2px; z-index: 2;
    background: linear-gradient(90deg, transparent, rgba(96,194,219,.8), transparent);
    border-radius: 2px;
}
/* Coinarity: warm rose accent */
.cd-img-frame-heart::before {
    background: linear-gradient(90deg, transparent, rgba(251,113,133,.8), transparent);
}

/* Glow underneath hero image */
.cd-img-glow {
    position: absolute; inset: 0; pointer-events: none; z-index: 1;
    background: linear-gradient(to bottom, transparent 60%, rgba(6,9,38,.6) 100%);
}

/* Floating badge on image */
.cd-img-badge {
    position: absolute; bottom: 16px; z-index: 3;
    display: inline-flex; align-items: center;
    padding: 6px 14px; border-radius: 20px;
    font-size: .72rem; font-weight: 700;
    background: rgba(6,9,38,.82); backdrop-filter: blur(10px);
    border: 1px solid rgba(96,194,219,.3); color: rgba(255,255,255,.85);
}
.cd-img-badge-left  { left: 16px; }
.cd-img-badge-right { right: 16px; }
.cd-img-badge-heart { border-color: rgba(251,113,133,.35); }
.cd-img-badge i     { color: #60c2db; }
.cd-img-badge-heart i { color: #fb7185; }

/* Hero sections */
.cd-hero { padding: 120px 0 70px; position: relative; overflow: hidden; }
.cd-hero::before { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse at 50% 0%, rgba(96,194,219,.1), transparent 60%); pointer-events: none; }
.cd-hero h1       { font-size: clamp(2.2rem, 5.5vw, 3.8rem); font-weight: 900; line-height: 1.08; margin-bottom: 22px; }
.cd-hero-sub      { font-size: 1.1rem; color: rgba(255,255,255,.65); max-width: 580px; line-height: 1.7; margin-bottom: 14px; }
.cd-hero-text     { font-size: .9rem; color: rgba(255,255,255,.5); max-width: 560px; line-height: 1.8; margin-bottom: 36px; }
.cd-hero-btns     { display: flex; flex-wrap: wrap; gap: 14px; margin-bottom: 56px; }

/* Inline utility classes (replaces inline style="" attributes) */
.cd-quote-inline  { font-style: italic; color: rgba(255,255,255,.7); border-left: 3px solid #60c2db; padding-left: 16px; }
.cd-lead-centered { max-width: 560px; margin: 0 auto; }
.cd-text-centered { max-width: 580px; margin-left: auto; margin-right: auto; }
.cd-btns-center   { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; }
.cd-hero-btns-row { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.cd-target-featured { border-color: rgba(96,194,219,.25) !important; background: rgba(96,194,219,.04) !important; }

/* ==========================================================
   Über Uns – Community, Coinarity, Target, Events, Phil
   ========================================================== */

.cd-why-bg { background: linear-gradient(180deg, transparent, rgba(96,194,219,.03), transparent); }

.cd-comm-list { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 20px; }
@media (max-width: 575px) { .cd-comm-list { grid-template-columns: 1fr; } }
.cd-comm-item { display: flex; align-items: center; gap: 10px; background: rgba(255,255,255,.03); border: 1px solid rgba(255,255,255,.07); border-radius: 10px; padding: 12px 14px; font-size: .83rem; color: rgba(255,255,255,.7); }
.cd-comm-item i { color: #60c2db; flex-shrink: 0; }

.cd-coinarity { background: linear-gradient(135deg, rgba(6,9,38,.95), rgba(8,12,48,.95)); border: 1px solid rgba(96,194,219,.15); border-radius: 24px; padding: 56px 48px; position: relative; overflow: hidden; }
@media (max-width: 767px) { .cd-coinarity { padding: 36px 24px; } }
.cd-coinarity::before { content: ''; position: absolute; top: 0; left: 10%; right: 10%; height: 1px; background: linear-gradient(90deg, transparent, rgba(96,194,219,.4), transparent); }
.cd-coinarity-quote { font-size: clamp(1.1rem, 2.5vw, 1.5rem); font-style: italic; color: rgba(255,255,255,.7); line-height: 1.7; margin: 24px 0; border-left: 3px solid #60c2db; padding-left: 20px; }

.cd-target-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 20px; margin-top: 40px; }
@media (max-width: 767px) { .cd-target-grid { grid-template-columns: 1fr; } }
.cd-target-card { background: rgba(255,255,255,.03); border: 1px solid rgba(255,255,255,.09); border-radius: 20px; padding: 32px 24px; transition: border-color .2s, transform .2s; }
.cd-target-card:hover { border-color: rgba(96,194,219,.35); transform: translateY(-3px); }
.cd-target-icon  { width: 52px; height: 52px; border-radius: 14px; background: rgba(96,194,219,.1); border: 1px solid rgba(96,194,219,.22); display: flex; align-items: center; justify-content: center; font-size: 1.3rem; color: #60c2db; margin-bottom: 18px; }
.cd-target-title { font-size: 1rem; font-weight: 800; color: #fff; margin-bottom: 10px; }
.cd-target-text  { font-size: .83rem; color: rgba(255,255,255,.55); line-height: 1.65; }

.cd-events-stats { display: grid; grid-template-columns: repeat(3,1fr); gap: 16px; margin-top: 28px; }
@media (max-width: 575px) { .cd-events-stats { grid-template-columns: 1fr; } }
.cd-events-stat       { text-align: center; background: rgba(255,255,255,.03); border: 1px solid rgba(255,255,255,.07); border-radius: 14px; padding: 20px 14px; }
.cd-events-stat-num   { font-size: 1.6rem; font-weight: 900; color: #60c2db; margin-bottom: 4px; }
.cd-events-stat-label { font-size: .72rem; color: rgba(255,255,255,.45); }

.cd-phil { padding: 100px 0; text-align: center; background: radial-gradient(ellipse at 50% 50%, rgba(96,194,219,.07), transparent 65%); }
.cd-phil h2 { font-size: clamp(2rem, 4vw, 3rem); font-weight: 900; margin-bottom: 0; }
.cd-phil-pillars { display: grid; grid-template-columns: repeat(3,1fr); gap: 24px; margin: 48px 0; }
@media (max-width: 767px) { .cd-phil-pillars { grid-template-columns: 1fr; } }
.cd-pillar      { background: rgba(255,255,255,.03); border: 1px solid rgba(255,255,255,.09); border-radius: 20px; padding: 32px 24px; text-align: left; }
.cd-pillar-word { font-size: 1.5rem; font-weight: 900; color: #60c2db; margin-bottom: 12px; }
.cd-pillar-text { font-size: .88rem; color: rgba(255,255,255,.58); line-height: 1.7; }
.cd-phil-closing { font-size: 1.05rem; color: rgba(255,255,255,.6); max-width: 520px; margin: 0 auto 36px; line-height: 1.75; }

/* ==========================================================
   Produkte – Hero, Education, BAZE, Memberships, Coins…
   ========================================================== */

.cd-prod-hero { padding: 120px 0 70px; position: relative; overflow: hidden; }
.cd-prod-hero::before { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse at 50% 0%, rgba(96,194,219,.09), transparent 60%); pointer-events: none; }
.cd-prod-hero h1 { font-size: clamp(2.2rem, 5.5vw, 3.6rem); font-weight: 900; line-height: 1.08; margin-bottom: 20px; }

.cd-edu-topics { display: grid; grid-template-columns: repeat(2,1fr); gap: 8px; margin: 20px 0 28px; }
@media (max-width: 575px) { .cd-edu-topics { grid-template-columns: 1fr; } }
.cd-edu-topic { display: flex; align-items: center; gap: 9px; font-size: .82rem; color: rgba(255,255,255,.65); padding: 8px 12px; background: rgba(255,255,255,.03); border-radius: 8px; border: 1px solid rgba(255,255,255,.06); }
.cd-edu-topic i { color: #60c2db; flex-shrink: 0; font-size: .7rem; }

.cd-course-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px,1fr)); gap: 10px; margin-top: 32px; }
.cd-course-item { background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.08); border-radius: 10px; padding: 12px 10px; font-size: .75rem; color: rgba(255,255,255,.65); text-align: center; line-height: 1.4; transition: border-color .15s; }
.cd-course-item:hover { border-color: rgba(96,194,219,.3); color: rgba(255,255,255,.85); }
.cd-course-item i { display: block; font-size: 1rem; color: #60c2db; margin-bottom: 6px; }

.cd-baze-hero { background: linear-gradient(135deg, rgba(8,12,48,.98), rgba(10,15,55,.98)); border: 1px solid rgba(96,194,219,.28); border-radius: 24px; overflow: hidden; position: relative; box-shadow: 0 16px 56px rgba(0,0,0,.5); }
.cd-baze-hero::before { content: ''; position: absolute; top: 0; left: 10%; right: 10%; height: 1px; background: linear-gradient(90deg, transparent, rgba(96,194,219,.55), transparent); }
.cd-baze-hero-inner { display: grid; grid-template-columns: 1fr 1fr; }
@media (max-width: 767px) { .cd-baze-hero-inner { grid-template-columns: 1fr; } }
.cd-baze-hero-content { padding: 48px 44px; }
@media (max-width: 991px) { .cd-baze-hero-content { padding: 32px 26px; } }
.cd-baze-tag { display: inline-flex; align-items: center; gap: 7px; background: rgba(96,194,219,.1); border: 1px solid rgba(96,194,219,.28); color: #60c2db; font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .12em; padding: 5px 14px; border-radius: 50px; margin-bottom: 18px; }
.cd-baze-hero-visual { background: linear-gradient(135deg, rgba(96,194,219,.06), rgba(168,85,247,.06)); display: flex; align-items: center; justify-content: center; padding: 36px; position: relative; }
.cd-baze-hero-visual::before { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse at 60% 40%, rgba(96,194,219,.1), transparent 65%); }

.cd-mem-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 22px; margin-top: 44px; align-items: stretch; }
@media (max-width: 767px) { .cd-mem-grid { grid-template-columns: 1fr; } }
.cd-mem-card { background: rgba(255,255,255,.03); border: 1px solid rgba(255,255,255,.1); border-radius: 22px; padding: 32px 26px; position: relative; transition: border-color .2s, transform .2s; display: flex; flex-direction: column; }
.cd-mem-card .cd-mem-features { flex: 1; }
.cd-mem-card:hover { transform: translateY(-3px); }
.cd-mem-card.featured { border-color: rgba(96,194,219,.45); background: rgba(96,194,219,.05); box-shadow: 0 0 36px rgba(96,194,219,.1); }
.cd-mem-badge { position: absolute; top: -13px; left: 50%; transform: translateX(-50%); background: linear-gradient(135deg, #60c2db, #4a9fb8); color: #fff; font-size: .68rem; font-weight: 700; padding: 4px 18px; border-radius: 50px; white-space: nowrap; letter-spacing: .06em; text-transform: uppercase; }
.cd-mem-name  { font-size: 1.05rem; font-weight: 800; color: #fff; margin-bottom: 6px; }
.cd-mem-price { font-size: 2.2rem; font-weight: 900; color: #60c2db; line-height: 1; margin: 16px 0 20px; padding-bottom: 18px; border-bottom: 1px solid rgba(255,255,255,.07); }
.cd-mem-price .per { font-size: .78rem; font-weight: 500; color: rgba(255,255,255,.4); }
.cd-mem-features { list-style: none; padding: 0; margin: 0 0 26px; display: flex; flex-direction: column; gap: 9px; }
.cd-mem-features li { display: flex; align-items: flex-start; gap: 9px; font-size: .83rem; color: rgba(255,255,255,.68); line-height: 1.45; }
.cd-mem-features li i { color: #60c2db; margin-top: 3px; flex-shrink: 0; font-size: .7rem; }
.cd-mem-cta { display: block; text-align: center; padding: 12px 22px; border-radius: 50px; font-weight: 700; font-size: .88rem; text-decoration: none; transition: all .18s; }
.cd-mem-cta.primary { background: linear-gradient(135deg, #60c2db, #4a9fb8); color: #fff; box-shadow: 0 5px 20px rgba(96,194,219,.28); }
.cd-mem-cta.primary:hover { box-shadow: 0 8px 28px rgba(96,194,219,.42); color: #fff; }
.cd-mem-cta.outline { border: 1.5px solid rgba(255,255,255,.18); color: rgba(255,255,255,.68); }
.cd-mem-cta.outline:hover { border-color: rgba(96,194,219,.45); color: #60c2db; }

.cd-coins-note { background: rgba(96,194,219,.05); border: 1px solid rgba(96,194,219,.15); border-radius: 12px; padding: 16px 18px; font-size: .8rem; color: rgba(255,255,255,.5); line-height: 1.65; margin-top: 20px; }
.cd-coins-note strong { color: rgba(255,255,255,.7); }

.cd-drop-card { background: linear-gradient(135deg, rgba(8,12,48,.98), rgba(10,15,55,.98)); border: 1px solid rgba(96,194,219,.22); border-radius: 22px; padding: 48px 44px; position: relative; overflow: hidden; }
.cd-drop-card::before { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse at 70% 50%, rgba(96,194,219,.08), transparent 60%); pointer-events: none; }
@media (max-width: 767px) { .cd-drop-card { padding: 32px 22px; } }
.cd-drop-badge { display: inline-flex; align-items: center; gap: 8px; background: rgba(251,184,56,.12); border: 1px solid rgba(251,184,56,.3); color: #fbb838; font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .12em; padding: 5px 14px; border-radius: 50px; margin-bottom: 18px; }
.cd-drop-quote { font-style: italic; border-left: 3px solid #fbb838; padding-left: 16px; color: rgba(255,255,255,.65); }

.cd-agent-card { background: rgba(255,255,255,.02); border: 1px solid rgba(255,255,255,.09); border-radius: 22px; padding: 44px 40px; }
@media (max-width: 767px) { .cd-agent-card { padding: 28px 20px; } }
.cd-agent-price     { display: inline-flex; align-items: baseline; gap: 6px; margin: 16px 0 8px; }
.cd-agent-price-num { font-size: 2.4rem; font-weight: 900; color: #60c2db; }
.cd-agent-price-note { font-size: .8rem; color: rgba(255,255,255,.4); }
.cd-agent-note { background: rgba(255,165,0,.06); border: 1px solid rgba(255,165,0,.18); border-radius: 10px; padding: 14px 16px; font-size: .8rem; color: rgba(255,255,255,.55); line-height: 1.65; margin-top: 18px; }

.cd-car-btn { width: 36px; height: 36px; border-radius: 50%; border: 1px solid rgba(96,194,219,.3); background: rgba(96,194,219,.08); color: #60c2db; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; font-size: .78rem; transition: background .15s, border-color .15s; flex-shrink: 0; }
.cd-car-btn:hover { background: rgba(96,194,219,.18); border-color: rgba(96,194,219,.6); }
.cd-carousel { display: flex; gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; -webkit-overflow-scrolling: touch; padding-bottom: 4px; scroll-behavior: smooth; }
.cd-carousel::-webkit-scrollbar { display: none; }
.cd-car-card { flex: 0 0 180px; scroll-snap-align: start; background: rgba(255,255,255,.03); border: 1px solid rgba(255,255,255,.08); border-radius: 14px; overflow: hidden; transition: transform .18s, border-color .18s; cursor: default; }
.cd-car-card:hover { transform: translateY(-3px); border-color: rgba(96,194,219,.3); }
.cd-car-img-wrap { aspect-ratio: 3/4; overflow: hidden; position: relative; }
.cd-car-img-wrap img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .28s; }
.cd-car-card:hover .cd-car-img-wrap img { transform: scale(1.05); }
.cd-car-info  { padding: 10px 12px 12px; }
.cd-car-title { font-size: .72rem; font-weight: 600; color: rgba(255,255,255,.75); line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
@media (max-width: 575px) { .cd-car-card { flex: 0 0 140px; } }

.cd-legal     { padding: 40px 0 60px; }
.cd-legal-box { background: rgba(255,255,255,.02); border: 1px solid rgba(255,255,255,.07); border-radius: 14px; padding: 28px 32px; font-size: .78rem; color: rgba(255,255,255,.35); line-height: 1.8; }
.cd-legal-box strong { color: rgba(255,255,255,.5); }

/* ==========================================================
   Kontakt page
   ========================================================== */

.cd-contact-wrap { padding: 100px 0 80px; }
.cd-contact-grid { display: grid; grid-template-columns: 1fr 1.6fr; gap: 60px; align-items: start; }
@media (max-width: 767px) { .cd-contact-grid { grid-template-columns: 1fr; gap: 36px; } }

.cd-contact-label { font-size: .72rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: #60c2db; margin-bottom: 14px; display: block; }
.cd-contact-h1  { font-size: clamp(2rem, 4.5vw, 3rem); font-weight: 900; line-height: 1.08; margin-bottom: 18px; }
.cd-contact-sub { font-size: .95rem; color: rgba(255,255,255,.58); line-height: 1.8; margin-bottom: 36px; }

.cd-contact-details    { display: flex; flex-direction: column; gap: 16px; }
.cd-contact-detail     { display: flex; align-items: center; gap: 14px; }
.cd-contact-detail-icon { width: 42px; height: 42px; border-radius: 11px; background: rgba(96,194,219,.1); border: 1px solid rgba(96,194,219,.2); display: flex; align-items: center; justify-content: center; color: #60c2db; font-size: .95rem; flex-shrink: 0; }
.cd-contact-detail-text { font-size: .88rem; color: rgba(255,255,255,.65); line-height: 1.5; }
.cd-contact-detail-text a { color: #60c2db; text-decoration: none; }
.cd-contact-detail-text a:hover { color: #7dd4e8; }

.cd-contact-card { background: rgba(6,9,38,.85); border: 1px solid rgba(96,194,219,.18); border-radius: 24px; padding: 44px 40px; box-shadow: 0 12px 48px rgba(0,0,0,.45); position: relative; overflow: hidden; }
.cd-contact-card::before { content: ''; position: absolute; top: 0; left: 15%; right: 15%; height: 1px; background: linear-gradient(90deg, transparent, rgba(96,194,219,.45), transparent); }
@media (max-width: 575px) { .cd-contact-card { padding: 28px 22px; } }
.cd-contact-card .form-label  { font-size: .8rem; font-weight: 600; color: rgba(255,255,255,.65); margin-bottom: 6px; }
.cd-contact-card .form-control { background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.12); border-radius: 10px; color: #fff; font-size: .88rem; padding: 11px 14px; transition: border-color .18s, box-shadow .18s; }
.cd-contact-card .form-control:focus { background: rgba(96,194,219,.07); border-color: rgba(96,194,219,.45); box-shadow: none; color: #fff; }
.cd-contact-card .form-control::placeholder { color: rgba(255,255,255,.22); }
.cd-contact-card textarea.form-control { resize: vertical; min-height: 130px; }
.cd-contact-card .invalid-feedback { font-size: .78rem; }
.cd-captcha-wrap { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.cd-captcha-wrap .captcha-image img { border-radius: 8px; cursor: pointer; }
.cd-captcha-wrap .form-control { flex: 1; min-width: 120px; }
.cd-submit-btn { width: 100%; padding: 14px; border-radius: 50px; background: linear-gradient(135deg, #60c2db, #4a9fb8); color: #fff; font-weight: 700; font-size: .95rem; border: none; cursor: pointer; box-shadow: 0 8px 24px rgba(96,194,219,.3); transition: transform .18s, box-shadow .18s; margin-top: 8px; }
.cd-submit-btn:hover { transform: translateY(-2px); box-shadow: 0 12px 32px rgba(96,194,219,.42); }
.cd-flash         { border-radius: 14px; padding: 18px 22px; margin-bottom: 28px; font-size: .9rem; display: flex; align-items: flex-start; gap: 12px; }
.cd-flash-success { background: rgba(74,222,128,.08); border: 1px solid rgba(74,222,128,.25); color: rgba(255,255,255,.8); }
.cd-flash-success i { color: #4ade80; margin-top: 2px; flex-shrink: 0; }
.cd-flash-error   { background: rgba(248,113,113,.08); border: 1px solid rgba(248,113,113,.25); color: rgba(255,255,255,.8); }
.cd-flash-error i { color: #f87171; margin-top: 2px; flex-shrink: 0; }

/* ==========================================================
   Cookie Consent Modal (moved from _cookieconsent.php)
   ========================================================== */

#modalCookieConsent {
    --cc-bg: #0b0b18; --cc-surface: rgba(255,255,255,.04);
    --cc-border: rgba(255,255,255,.08); --cc-accent: #60C2DB;
    --cc-green: #4ade80; --cc-text: rgba(255,255,255,.85); --cc-muted: rgba(255,255,255,.42);
}
#modalCookieConsent .modal-dialog { max-width: 560px; transform: translateY(22px) scale(0.97); transition: transform .38s cubic-bezier(.34,1.4,.64,1), opacity .25s ease; opacity: 0; }
#modalCookieConsent.show .modal-dialog { transform: translateY(0) scale(1); opacity: 1; }
#modalCookieConsent .modal-content { background: var(--cc-bg); border: 1px solid rgba(96,194,219,.15); border-radius: 24px; padding: 0; box-shadow: 0 40px 100px rgba(0,0,0,.75), 0 0 0 1px rgba(96,194,219,.05); color: var(--cc-text); overflow: hidden; }

.cc-static-header { display: flex; align-items: center; gap: 14px; padding: 28px 32px 0; }
.cc-shield-icon { width: 42px; height: 42px; flex-shrink: 0; border-radius: 11px; background: rgba(96,194,219,.1); border: 1px solid rgba(96,194,219,.2); display: flex; align-items: center; justify-content: center; color: var(--cc-accent); }
.cc-static-header .cc-label { display: block; font-size: 10px; font-weight: 700; letter-spacing: 2.5px; text-transform: uppercase; color: var(--cc-accent); margin-bottom: 3px; }
.cc-static-header h5 { font-size: 19px; font-weight: 700; color: #fff; margin: 0; letter-spacing: -.3px; }
.cc-header-divider { height: 1px; margin: 20px 32px 0; background: linear-gradient(90deg, rgba(96,194,219,.25) 0%, rgba(255,255,255,.05) 60%, transparent 100%); }

.cc-body { padding: 22px 32px 0; max-height: 60vh; overflow-y: auto; scrollbar-width: thin; scrollbar-color: rgba(96,194,219,.2) transparent; }
.cc-body::-webkit-scrollbar { width: 4px; }
.cc-body::-webkit-scrollbar-track { background: transparent; }
.cc-body::-webkit-scrollbar-thumb { background: rgba(96,194,219,.25); border-radius: 4px; }
.cc-desc { font-size: 13.5px; color: var(--cc-muted); line-height: 1.7; margin: 0; }
.cc-desc a { color: var(--cc-accent); text-decoration: none; }
.cc-desc a:hover { text-decoration: underline; }

.cc-categories { display: flex; flex-direction: column; gap: 10px; margin-top: 18px; }
.cc-category { background: var(--cc-surface); border: 1px solid var(--cc-border); border-radius: 14px; padding: 16px 18px; transition: border-color .2s ease; }
.cc-category:hover { border-color: rgba(96,194,219,.18); }
.cc-cat-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.cc-cat-left { display: flex; align-items: center; gap: 10px; min-width: 0; flex: 1; }
.cc-cat-icon { width: 30px; height: 30px; flex-shrink: 0; border-radius: 8px; display: flex; align-items: center; justify-content: center; font-size: 13px; }
.cc-cat-icon.lock  { background: rgba(96,194,219,.1); color: var(--cc-accent); }
.cc-cat-icon.media { background: rgba(74,222,128,.1); color: var(--cc-green); }
.cc-cat-name  { font-size: 13.5px; font-weight: 600; color: #fff; }
.cc-cat-count { font-size: 11px; color: var(--cc-muted); font-weight: 400; margin-left: 4px; }
.cc-cat-desc  { font-size: 12.5px; color: var(--cc-muted); line-height: 1.6; margin: 10px 0 0; }

.cc-toggle { position: relative; display: inline-flex; align-items: center; cursor: pointer; border: none; background: none; padding: 0; flex-shrink: 0; }
.cc-toggle.locked { cursor: default; pointer-events: none; }
.cc-track { width: 44px; height: 24px; border-radius: 12px; background: rgba(255,255,255,.11); position: relative; transition: background .25s ease; display: block; }
.cc-toggle.on .cc-track     { background: var(--cc-green); }
.cc-toggle.locked .cc-track { background: var(--cc-accent); }
.cc-thumb { position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: #fff; box-shadow: 0 1px 4px rgba(0,0,0,.3); transition: transform .25s cubic-bezier(.34,1.56,.64,1); display: block; }
.cc-toggle.on .cc-thumb, .cc-toggle.locked .cc-thumb { transform: translateX(20px); }

.cc-details-btn { display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; color: var(--cc-accent); cursor: pointer; background: none; border: none; padding: 0; margin-top: 9px; transition: opacity .2s ease; text-decoration: none; }
.cc-details-btn:hover { opacity: .7; color: var(--cc-accent); text-decoration: none; }
.cc-details-btn svg { width: 11px; height: 11px; transition: transform .2s ease; }
.cc-details-btn.open svg { transform: rotate(180deg); }

.cc-info { margin-top: 12px; padding: 12px 14px; background: rgba(0,0,0,.25); border-radius: 10px; border: 1px solid rgba(255,255,255,.05); }
.cc-info + .cc-info { margin-top: 8px; }
.cc-info-title { font-size: 11px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; color: rgba(255,255,255,.3); margin-bottom: 10px; }
.cc-info-row { display: grid; grid-template-columns: 110px 1fr; gap: 4px 12px; font-size: 12px; padding: 5px 0; border-bottom: 1px solid rgba(255,255,255,.04); }
.cc-info-row:last-child { border-bottom: none; padding-bottom: 0; }
.cc-info-row dt { color: var(--cc-muted); font-weight: 600; font-style: normal; }
.cc-info-row dd { color: rgba(255,255,255,.65); margin: 0; word-break: break-word; }
.cc-info-row dd a    { color: var(--cc-accent); text-decoration: none; font-size: 11px; }
.cc-info-row dd code { font-family: monospace; font-size: 11px; background: rgba(255,255,255,.07); padding: 1px 5px; border-radius: 4px; }

.cc-sub-services { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--cc-border); display: flex; flex-direction: column; gap: 12px; }
.cc-sub-row  { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.cc-sub-name { font-size: 13px; font-weight: 600; color: rgba(255,255,255,.65); display: flex; align-items: center; gap: 8px; }

.cc-footer { padding: 20px 32px 28px; margin-top: 20px; }
.cc-compact-footer  { display: flex; gap: 10px; flex-wrap: nowrap; align-items: stretch; }
.cc-settings-footer { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.cc-settings-footer .cc-btn-primary { margin-left: auto; }

.cc-btn { display: inline-flex; align-items: center; justify-content: center; gap: 7px; padding: 10px 18px; border-radius: 40px; font-size: 13px; font-weight: 600; letter-spacing: .15px; cursor: pointer; transition: all .2s ease; border: none; white-space: nowrap; text-decoration: none; }
.cc-btn:focus-visible { outline: 2px solid var(--cc-accent); outline-offset: 2px; }
.cc-btn-ghost   { background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.1); color: rgba(255,255,255,.55); }
.cc-btn-ghost:hover { background: rgba(255,255,255,.09); color: #fff; text-decoration: none; }
.cc-btn-outline { background: transparent; border: 1px solid rgba(96,194,219,.32); color: var(--cc-accent); }
.cc-btn-outline:hover { background: rgba(96,194,219,.08); border-color: rgba(96,194,219,.55); color: var(--cc-accent); text-decoration: none; }
.cc-btn-primary { background: linear-gradient(120deg, #24244f 0%, #60c2db 100%); color: #fff; }
.cc-btn-primary:hover { box-shadow: 0 6px 22px rgba(96,194,219,.32); transform: translateY(-1px); color: #fff; text-decoration: none; }

.cc-float-btn { position: fixed; bottom: 24px; left: 24px; z-index: 9990; width: 44px; height: 44px; border-radius: 50%; background: rgba(11,11,24,.88); border: 1px solid rgba(96,194,219,.22); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); display: flex; align-items: center; justify-content: center; cursor: pointer; transition: all .22s ease; color: rgba(255,255,255,.45); box-shadow: 0 4px 18px rgba(0,0,0,.35); text-decoration: none; }
.cc-float-btn:hover { border-color: rgba(96,194,219,.5); color: var(--cc-accent); transform: scale(1.1); box-shadow: 0 6px 24px rgba(96,194,219,.18); }
.cc-float-btn svg { width: 17px; height: 17px; flex-shrink: 0; }

@media (max-width: 576px) {
    #modalCookieConsent .modal-dialog { margin: 12px; max-width: 100%; }
    .cc-static-header { padding: 22px 20px 0; }
    .cc-header-divider { margin: 18px 20px 0; }
    .cc-body { padding: 18px 20px 0; }
    .cc-footer { padding: 16px 20px 24px; }
    .cc-compact-footer, .cc-settings-footer { flex-direction: column; }
    .cc-settings-footer .cc-btn-primary { margin-left: 0; }
    .cc-btn { width: 100%; justify-content: center; }
    .cc-info-row { grid-template-columns: 1fr; }
    .cc-info-row dt { color: rgba(255,255,255,.3); font-size: 10px; letter-spacing: .5px; text-transform: uppercase; }
    .cc-static-header h5 { font-size: 16px; }
}

/* ==========================================================
   Language Modal (moved from _sprachen.php)
   ========================================================== */

#modalSprachen {
    --lang-accent: #60C2DB; --lang-bg: #0b0b18;
    --lang-card-bg: rgba(255,255,255,.04); --lang-border: rgba(255,255,255,.08);
}
#modalSprachen .modal-dialog { max-width: 680px; margin: auto; transform: translateY(24px) scale(0.98); transition: transform .35s cubic-bezier(.34,1.56,.64,1), opacity .25s ease; opacity: 0; }
#modalSprachen.show .modal-dialog { transform: translateY(0) scale(1); opacity: 1; }
#modalSprachen .modal-content { background: var(--lang-bg); border: 1px solid rgba(96,194,219,.18); border-radius: 24px; padding: 40px 40px 32px; box-shadow: 0 32px 80px rgba(0,0,0,.7), 0 0 0 1px rgba(96,194,219,.06); overflow: hidden; }
#modalSprachen .modal-backdrop { backdrop-filter: blur(10px) !important; -webkit-backdrop-filter: blur(10px) !important; background: rgba(0,0,0,.6) !important; }
#modalSprachen .modal-header { border: none; padding: 0 0 32px 0; align-items: flex-start; }

.lang-modal-title { display: flex; flex-direction: column; gap: 6px; }
.lang-modal-title .label { font-size: 11px; font-weight: 700; letter-spacing: 3px; text-transform: uppercase; color: var(--lang-accent); }
.lang-modal-title h4 { font-size: 28px; font-weight: 700; color: #fff; margin: 0; line-height: 1.2; letter-spacing: -.5px; }
.lang-modal-close { width: 40px; height: 40px; min-width: 40px; border-radius: 50%; background: rgba(255,255,255,.06); border: 1px solid var(--lang-border); display: flex; align-items: center; justify-content: center; cursor: pointer; transition: background .2s ease, border-color .2s ease, transform .2s ease; color: rgba(255,255,255,.6); text-decoration: none; flex-shrink: 0; margin-left: auto; margin-top: 4px; }
.lang-modal-close:hover { background: rgba(96,194,219,.15); border-color: rgba(96,194,219,.4); color: var(--lang-accent); transform: rotate(90deg); }
.lang-modal-divider { height: 1px; background: linear-gradient(90deg, rgba(96,194,219,.25) 0%, rgba(255,255,255,.05) 60%, transparent 100%); margin-bottom: 28px; }

.lang-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px,1fr)); gap: 12px; }
.lang-card { position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; padding: 20px 12px 16px; background: var(--lang-card-bg); border: 1px solid var(--lang-border); border-radius: 16px; text-decoration: none; cursor: pointer; overflow: hidden; transition: border-color .25s ease, box-shadow .25s ease, background .25s ease, transform .25s cubic-bezier(.34,1.56,.64,1); }
.lang-card::before { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse at 50% 0%, rgba(96,194,219,.12), transparent 70%); opacity: 0; transition: opacity .3s ease; }
.lang-card:hover, .lang-card:focus { border-color: rgba(96,194,219,.5); box-shadow: 0 8px 28px rgba(96,194,219,.12), inset 0 1px 0 rgba(255,255,255,.06); transform: translateY(-3px); background: rgba(96,194,219,.06); text-decoration: none; }
.lang-card:hover::before, .lang-card:focus::before { opacity: 1; }
.lang-card.is-active { border-color: var(--lang-accent); background: rgba(96,194,219,.08); box-shadow: 0 0 0 1px rgba(96,194,219,.25), 0 8px 24px rgba(96,194,219,.1); }
.lang-card.is-active::before { opacity: 1; }
.lang-card.is-disabled { opacity: .38; cursor: not-allowed; pointer-events: none; }

.lang-flag { font-size: 36px; line-height: 1; display: block; margin-bottom: 12px; transition: transform .25s cubic-bezier(.34,1.56,.64,1); }
.lang-card:hover .lang-flag, .lang-card.is-active .lang-flag { transform: scale(1.15); }
.lang-native  { display: block; font-size: 14px; font-weight: 600; color: #fff; line-height: 1.3; margin-bottom: 3px; }
.lang-en-name { display: block; font-size: 11px; color: rgba(255,255,255,.35); line-height: 1; }

.lang-check { position: absolute; top: 9px; right: 9px; width: 20px; height: 20px; border-radius: 50%; background: var(--lang-accent); display: flex; align-items: center; justify-content: center; box-shadow: 0 2px 8px rgba(96,194,219,.4); }
.lang-check svg { width: 11px; height: 11px; stroke: #fff; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; fill: none; }
.lang-soon { position: absolute; top: 8px; right: 8px; font-size: 8px; font-weight: 800; letter-spacing: .8px; text-transform: uppercase; color: rgba(255,255,255,.35); background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.1); padding: 2px 5px; border-radius: 6px; }

.lang-modal-footer { margin-top: 28px; padding-top: 20px; border-top: 1px solid var(--lang-border); display: flex; align-items: center; justify-content: center; gap: 8px; color: rgba(255,255,255,.25); font-size: 12px; }
.lang-modal-footer i { color: var(--lang-accent); opacity: .7; }

@media (max-width: 576px) {
    #modalSprachen .modal-content { padding: 28px 20px 24px; border-radius: 20px; }
    .lang-modal-title h4 { font-size: 22px; }
    .lang-grid { grid-template-columns: repeat(3,1fr); gap: 10px; }
    .lang-card { padding: 16px 8px 12px; }
    .lang-flag { font-size: 28px; }
    .lang-native { font-size: 12px; }
}

/* ==========================================================
   Impressum partial (_impressum.php)
   ========================================================== */

.imp-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 16px; }
.imp-card { background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.08); border-radius: 14px; padding: 20px 22px; position: relative; overflow: hidden; }
.imp-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px; background: linear-gradient(90deg, rgba(96,194,219,.35) 0%, transparent 70%); }
.imp-card-label { display: flex; align-items: center; gap: 8px; font-size: 10px; font-weight: 700; letter-spacing: 2.5px; text-transform: uppercase; color: #60C2DB; margin-bottom: 14px; }
.imp-card-icon { width: 24px; height: 24px; border-radius: 6px; background: rgba(96,194,219,.1); display: flex; align-items: center; justify-content: center; color: #60C2DB; flex-shrink: 0; }
.imp-card h3 { font-size: 15px; font-weight: 700; color: #fff; margin: 0 0 8px; letter-spacing: -.2px; }
.imp-card h3 + h3 { margin-top: 18px; }
.imp-card address { font-style: normal; color: rgba(255,255,255,.5); font-size: 13px; line-height: 1.8; }
.imp-person-row  { display: flex; align-items: center; gap: 12px; margin-top: 6px; }
.imp-avatar { width: 40px; height: 40px; flex-shrink: 0; border-radius: 50%; background: linear-gradient(135deg, #24244F, #60C2DB); display: flex; align-items: center; justify-content: center; font-size: 14px; font-weight: 700; color: #fff; letter-spacing: -.5px; }
.imp-person-name { font-size: 15px; font-weight: 600; color: #fff; }
.imp-person-role { font-size: 11px; color: rgba(255,255,255,.38); margin-top: 2px; }
.imp-note { background: rgba(96,194,219,.04); border: 1px solid rgba(96,194,219,.13); border-radius: 14px; padding: 18px 20px; display: flex; gap: 14px; align-items: flex-start; }
.imp-note-icon { width: 32px; height: 32px; flex-shrink: 0; border-radius: 8px; background: rgba(96,194,219,.1); display: flex; align-items: center; justify-content: center; color: #60C2DB; margin-top: 1px; }
.imp-note p { font-size: 12.5px; color: rgba(255,255,255,.42); line-height: 1.7; margin: 0; }
.imp-note p strong { color: rgba(255,255,255,.65); font-weight: 600; }
.imp-note p a { color: #60C2DB; text-decoration: none; }
.imp-note p a:hover { text-decoration: underline; }
@media (max-width: 576px) { .imp-grid { grid-template-columns: 1fr; } .imp-note { flex-direction: column; gap: 10px; } }

/* ==========================================================
   Impressum page (impressum.php)
   ========================================================== */

.impressum-hero { padding: 100px 0 32px; position: relative; overflow: hidden; }
.impressum-hero::before { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: radial-gradient(ellipse 80% 60% at 50% 0%, rgba(96,194,219,.08) 0%, transparent 70%); pointer-events: none; }
.impressum-hero .eyebrow { display: inline-flex; align-items: center; gap: 8px; font-size: 11px; font-weight: 700; letter-spacing: 3px; text-transform: uppercase; color: #60C2DB; margin-bottom: 20px; }
.impressum-hero .eyebrow::before { content: ''; display: block; width: 24px; height: 1px; background: #60C2DB; }
.impressum-hero h1 { font-size: clamp(48px, 8vw, 96px); font-weight: 700; letter-spacing: -2px; line-height: 1; margin: 0; }
.impressum-hero h1 .muted { opacity: .25; }

.impressum-content { padding-bottom: 120px; }
.impressum-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-bottom: 24px; }
.impressum-card { background: rgba(255,255,255,.03); border: 1px solid rgba(255,255,255,.07); border-radius: 20px; padding: 32px; position: relative; overflow: hidden; transition: border-color .25s ease; }
.impressum-card:hover { border-color: rgba(96,194,219,.18); }
.impressum-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px; background: linear-gradient(90deg, rgba(96,194,219,.3) 0%, transparent 70%); }
.impressum-card .card-label { display: flex; align-items: center; gap: 10px; font-size: 10px; font-weight: 700; letter-spacing: 2.5px; text-transform: uppercase; color: #60C2DB; margin-bottom: 20px; }
.impressum-card .card-label-icon { width: 28px; height: 28px; border-radius: 7px; background: rgba(96,194,219,.1); display: flex; align-items: center; justify-content: center; color: #60C2DB; }
.impressum-card h3 { font-size: 20px; font-weight: 700; color: #fff; margin-bottom: 16px; letter-spacing: -.3px; }
.impressum-card address { font-style: normal; color: rgba(255,255,255,.55); font-size: 14.5px; line-height: 1.9; }
.impressum-card .person-row    { display: flex; align-items: center; gap: 14px; margin-top: 8px; }
.impressum-card .person-avatar { width: 44px; height: 44px; flex-shrink: 0; border-radius: 50%; background: linear-gradient(135deg, #24244F, #60C2DB); display: flex; align-items: center; justify-content: center; font-size: 16px; font-weight: 700; color: #fff; letter-spacing: -.5px; }
.impressum-card .person-name { font-size: 16px; font-weight: 600; color: #fff; }
.impressum-card .person-role { font-size: 12px; color: rgba(255,255,255,.4); margin-top: 2px; }

.impressum-note { background: rgba(96,194,219,.04); border: 1px solid rgba(96,194,219,.12); border-radius: 20px; padding: 28px 32px; display: flex; gap: 18px; align-items: flex-start; }
.impressum-note .note-icon { width: 36px; height: 36px; flex-shrink: 0; border-radius: 9px; background: rgba(96,194,219,.1); display: flex; align-items: center; justify-content: center; color: #60C2DB; margin-top: 2px; }
.impressum-note p { font-size: 13.5px; color: rgba(255,255,255,.45); line-height: 1.7; margin: 0; }
.impressum-note p strong { color: rgba(255,255,255,.7); font-weight: 600; }
.impressum-note p a { color: #60C2DB; text-decoration: none; }
.impressum-note p a:hover { text-decoration: underline; }

/* ── Impressum: Kontakt, Geltungsbereich, Register-/Steuernummern ── */
.imp-mail { display: inline-block; margin-top: 12px; font-size: 14px; color: #60C2DB; text-decoration: none; word-break: break-all; }
.imp-mail:hover { text-decoration: underline; }

.imp-scope-label { margin-top: 26px; margin-bottom: 10px; font-size: 10px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; color: rgba(255,255,255,.32); }
.imp-scope { display: flex; flex-wrap: wrap; gap: 7px; }
.imp-chip { display: inline-block; padding: 4px 11px; border-radius: 999px; background: rgba(96,194,219,.08); border: 1px solid rgba(96,194,219,.18); font-size: 12px; color: rgba(255,255,255,.68); white-space: nowrap; }
.imp-scope-note { margin: 10px 0 0; font-size: 12.5px; line-height: 1.6; color: rgba(255,255,255,.35); }

.imp-facts-group { margin-top: 26px; padding-top: 22px; border-top: 1px solid rgba(255,255,255,.06); }
.imp-facts-title { font-size: 13px; font-weight: 700; color: #fff; margin-bottom: 12px; letter-spacing: -.1px; }
.imp-facts { margin: 0; }
.imp-fact { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 6px 18px; padding: 7px 0; border-bottom: 1px dashed rgba(255,255,255,.06); }
.imp-fact:last-child { border-bottom: none; }
.imp-fact dt { flex: 1 1 190px; font-size: 12.5px; color: rgba(255,255,255,.4); margin: 0; }
.imp-fact dd { margin: 0; font-size: 13.5px; font-weight: 600; color: rgba(255,255,255,.85); font-variant-numeric: tabular-nums; text-align: right; }

.imp-subblock { margin-top: 16px; padding: 14px 16px; border-radius: 12px; background: rgba(255,255,255,.025); border: 1px solid rgba(255,255,255,.06); }
.imp-subblock-title { font-size: 11px; font-weight: 700; letter-spacing: 1.4px; text-transform: uppercase; color: rgba(255,255,255,.35); margin-bottom: 8px; }
.imp-subblock address { font-style: normal; font-size: 13.5px; line-height: 1.75; color: rgba(255,255,255,.55); margin: 0; }

.impressum-section { background: rgba(255,255,255,.03); border: 1px solid rgba(255,255,255,.07); border-radius: 20px; padding: 32px; margin-bottom: 24px; position: relative; overflow: hidden; }
.impressum-section::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px; background: linear-gradient(90deg, rgba(96,194,219,.3) 0%, transparent 70%); }
.impressum-section .card-label { display: flex; align-items: center; gap: 10px; font-size: 10px; font-weight: 700; letter-spacing: 2.5px; text-transform: uppercase; color: #60C2DB; margin-bottom: 20px; }
.impressum-section .card-label-icon { width: 28px; height: 28px; border-radius: 7px; background: rgba(96,194,219,.1); display: flex; align-items: center; justify-content: center; color: #60C2DB; flex-shrink: 0; }
.impressum-section h3 { font-size: 18px; font-weight: 700; color: #fff; margin-bottom: 12px; letter-spacing: -.3px; }
.impressum-section address { font-style: normal; color: rgba(255,255,255,.55); font-size: 14.5px; line-height: 1.9; margin: 0; }
.imp-section-text { font-size: 14px; line-height: 1.75; color: rgba(255,255,255,.5); margin: 0 0 18px; }
.imp-inline-company { padding: 20px 22px; border-radius: 14px; background: rgba(255,255,255,.025); border: 1px solid rgba(255,255,255,.06); }

.imp-marken-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
.imp-marken-col .imp-fact dd { text-align: right; font-weight: 500; font-size: 13px; }
.imp-badge { display: inline-block; margin-right: 6px; padding: 2px 8px; border-radius: 5px; font-size: 10px; font-weight: 700; letter-spacing: .5px; text-transform: uppercase; color: rgba(255,255,255,.45); background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.1); }
.imp-badge-ok { color: #6ee7a8; background: rgba(110,231,168,.1); border-color: rgba(110,231,168,.25); }
.imp-nizza { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-top: 22px; padding-top: 18px; border-top: 1px solid rgba(255,255,255,.06); font-size: 12.5px; color: rgba(255,255,255,.4); }

.imp-legal { font-size: 14px; line-height: 1.85; color: rgba(255,255,255,.5); margin: 0 0 16px; }
.imp-legal:last-child { margin-bottom: 0; }
.imp-legal a { color: #60C2DB; text-decoration: none; }
.imp-legal a:hover { text-decoration: underline; }
.impressum-note p + p { margin-top: 10px; }

.impressum-back { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: rgba(255,255,255,.35); text-decoration: none; margin-bottom: 48px; transition: color .2s ease; }
.impressum-back:hover { color: rgba(255,255,255,.7); text-decoration: none; }
.impressum-back svg { width: 14px; height: 14px; transition: transform .2s ease; }
.impressum-back:hover svg { transform: translateX(-3px); }

/* Tablet: die Karten stehen noch nebeneinander, sind aber zu schmal fuer
   Bezeichnung + Nummer in einer Zeile — deshalb hier schon stapeln. */
@media (max-width: 991px) {
    .imp-fact { flex-direction: column; align-items: flex-start; gap: 2px; }
    .imp-fact dt { flex: 0 0 auto; }
    .imp-fact dd { text-align: left; }
    .imp-marken-col .imp-fact dd { text-align: left; }
}

@media (max-width: 768px) {
    .impressum-hero { padding: 80px 0 24px; }
    .impressum-grid { grid-template-columns: 1fr; }
    .impressum-note { flex-direction: column; gap: 14px; }
    .impressum-card, .impressum-section { padding: 24px 20px; }
    .imp-marken-grid { grid-template-columns: 1fr; }
    /* Label und Wert untereinander — nebeneinander wird es bei den langen
       Bezeichnungen (z. B. "UAE Corporate Tax Registration Number") zu eng. */
    .imp-fact { flex-direction: column; align-items: flex-start; gap: 2px; }
    /* flex-basis zurücksetzen: in einer Spalte wirkt sie auf die HÖHE — die 190px
       aus der Desktop-Regel würden das Label 190px hoch machen. */
    .imp-fact dt { flex: 0 0 auto; }
    .imp-fact dd { text-align: left; }
    .imp-marken-col .imp-fact dd { text-align: left; }
    .imp-fact dd, .imp-mail { overflow-wrap: anywhere; }
    .impressum-hero h1 { letter-spacing: -1px; }
}

/* ==========================================================
   Light Mode – CD Components
   ========================================================== */

body.light .cd-h2,
body.light .cd-target-title,
body.light .cd-pillar-word,
body.light .cd-mem-name { color: #1a1a2e; }

body.light .cd-lead,
body.light .cd-text,
body.light .cd-hero-sub,
body.light .cd-hero-text { color: rgba(0,0,0,.6); }

body.light .cd-list li,
body.light .cd-target-text,
body.light .cd-pillar-text,
body.light .cd-phil-closing,
body.light .cd-comm-item,
body.light .cd-mem-features li,
body.light .cd-edu-topic { color: rgba(0,0,0,.65); }

body.light .cd-ph { background: linear-gradient(135deg, rgba(240,245,250,.9), rgba(230,240,248,.9)); border-color: rgba(96,194,219,.25); }
body.light .cd-ph-icon  { color: rgba(96,194,219,.5); }
body.light .cd-ph-label { color: rgba(42,127,160,.6); }
body.light .cd-ph-desc  { color: rgba(0,0,0,.3); }

body.light .cd-target-card,
body.light .cd-pillar,
body.light .cd-comm-item,
body.light .cd-course-item,
body.light .cd-mem-card,
body.light .cd-edu-topic { background: rgba(0,0,0,.03); border-color: rgba(0,0,0,.09); }

body.light .cd-coinarity         { background: linear-gradient(135deg, #f0f4f8, #e8f0f5); border-color: rgba(96,194,219,.2); }
body.light .cd-coinarity-quote   { color: rgba(0,0,0,.65); }
body.light .cd-events-stat       { background: rgba(0,0,0,.03); border-color: rgba(0,0,0,.08); }
body.light .cd-events-stat-num   { color: #2a7fa0; }
body.light .cd-events-stat-label { color: rgba(0,0,0,.45); }
body.light .cd-pillar-word       { color: #2a7fa0; }
body.light .cd-mem-price         { color: #2a7fa0; }
body.light .cd-mem-cta.outline   { color: rgba(0,0,0,.6); border-color: rgba(0,0,0,.18); }
body.light .cd-baze-hero         { background: linear-gradient(135deg, #f0f4f8, #e8f0f5); border-color: rgba(96,194,219,.3); }
body.light .cd-coins-note        { color: rgba(0,0,0,.5); }
body.light .cd-agent-card        { background: rgba(0,0,0,.02); border-color: rgba(0,0,0,.09); }
body.light .cd-agent-price-num   { color: #2a7fa0; }
body.light .cd-legal-box         { background: rgba(0,0,0,.02); border-color: rgba(0,0,0,.07); color: rgba(0,0,0,.4); }
body.light .cd-contact-h1        { color: #1a1a2e; }
body.light .cd-contact-sub       { color: rgba(0,0,0,.58); }
body.light .cd-contact-detail-text { color: rgba(0,0,0,.65); }
body.light .cd-contact-card      { background: rgba(240,245,250,.9); border-color: rgba(96,194,219,.25); box-shadow: 0 8px 32px rgba(0,0,0,.1); }
body.light .cd-contact-card .form-label     { color: rgba(0,0,0,.65); }
body.light .cd-contact-card .form-control   { background: rgba(255,255,255,.8); border-color: rgba(0,0,0,.15); color: #1a1a2e; }
body.light .cd-contact-card .form-control:focus { background: #fff; border-color: rgba(96,194,219,.5); }
body.light .cd-contact-card .form-control::placeholder { color: rgba(0,0,0,.3); }
body.light .cd-contact-detail-icon { background: rgba(96,194,219,.08); }

body.light .cd-quote-inline       { color: rgba(0,0,0,.55); }
body.light .cd-mem-price .per     { color: rgba(0,0,0,.4); }
body.light .cd-agent-price-note   { color: rgba(0,0,0,.42); }
body.light .cd-agent-note         { background: rgba(255,152,0,.05); border-color: rgba(255,152,0,.2); color: rgba(0,0,0,.58); }
body.light .cd-agent-note strong  { color: rgba(0,0,0,.75); }
body.light .cd-coins-note strong  { color: rgba(0,0,0,.72); }
body.light .cd-drop-card          { background: linear-gradient(135deg, #edf2f8, #e4ecf5); border-color: rgba(96,194,219,.28); }
body.light .cd-drop-card .cd-h2,
body.light .cd-drop-card .cd-lead,
body.light .cd-drop-card .cd-text { color: rgba(0,0,0,.65) !important; }
body.light .cd-legal-box strong   { color: rgba(0,0,0,.55); }
body.light .cd-car-title          { color: rgba(0,0,0,.72); }

/* Impressum — Light-Mode NUR auf der Impressum-Seite (.impressum-content).
   Derselbe Inhalt steckt via _impressum.php auch im Landingpage-Modal, und das hat
   einen fest dunklen Hintergrund (#0b0b18): dort muessen die hellen Schriftfarben
   bleiben, sonst steht dunkel auf dunkel. Deshalb jede Regel scopen. */
body.light .impressum-content .impressum-card              { background: rgba(0,0,0,.03); border-color: rgba(0,0,0,.1); }
body.light .impressum-content .impressum-card h3           { color: #1a1a2e; }
body.light .impressum-content .impressum-card address      { color: rgba(0,0,0,.55); }
body.light .impressum-content .impressum-card .person-name { color: #1a1a2e; }
body.light .impressum-content .impressum-card .person-role { color: rgba(0,0,0,.42); }
body.light .impressum-content .impressum-note p            { color: rgba(0,0,0,.5); }
body.light .impressum-content .impressum-note p strong     { color: rgba(0,0,0,.72); }
body.light .impressum-back                                 { color: rgba(0,0,0,.38); }
body.light .impressum-back:hover                           { color: rgba(0,0,0,.7); }

/* Abschnitte, Fakten-Listen, Chips und Rechtstexte */
body.light .impressum-content .impressum-section           { background: rgba(0,0,0,.03); border-color: rgba(0,0,0,.1); }
body.light .impressum-content .impressum-section h3        { color: #1a1a2e; }
body.light .impressum-content .impressum-section address   { color: rgba(0,0,0,.55); }
body.light .impressum-content .card-label                  { color: #3a8fa8; }
body.light .impressum-content .card-label-icon             { background: rgba(96,194,219,.14); color: #3a8fa8; }

body.light .impressum-content .imp-mail                    { color: #3a8fa8; }
body.light .impressum-content .imp-scope-label             { color: rgba(0,0,0,.4); }
body.light .impressum-content .imp-scope-note              { color: rgba(0,0,0,.42); }
body.light .impressum-content .imp-chip                    { background: rgba(96,194,219,.12); border-color: rgba(96,194,219,.3); color: rgba(0,0,0,.7); }

body.light .impressum-content .imp-facts-group             { border-top-color: rgba(0,0,0,.09); }
body.light .impressum-content .imp-facts-title             { color: #1a1a2e; }
body.light .impressum-content .imp-fact                    { border-bottom-color: rgba(0,0,0,.08); }
body.light .impressum-content .imp-fact dt                 { color: rgba(0,0,0,.45); }
body.light .impressum-content .imp-fact dd                 { color: rgba(0,0,0,.8); }

body.light .impressum-content .imp-subblock                { background: rgba(0,0,0,.025); border-color: rgba(0,0,0,.08); }
body.light .impressum-content .imp-subblock-title          { color: rgba(0,0,0,.4); }
body.light .impressum-content .imp-subblock address        { color: rgba(0,0,0,.55); }
body.light .impressum-content .imp-inline-company          { background: rgba(0,0,0,.025); border-color: rgba(0,0,0,.08); }

body.light .impressum-content .imp-section-text            { color: rgba(0,0,0,.55); }
body.light .impressum-content .imp-legal                   { color: rgba(0,0,0,.6); }
body.light .impressum-content .imp-legal a                 { color: #3a8fa8; }

body.light .impressum-content .imp-badge                   { color: rgba(0,0,0,.5); background: rgba(0,0,0,.05); border-color: rgba(0,0,0,.12); }
body.light .impressum-content .imp-badge-ok                { color: #1f7a4d; background: rgba(31,122,77,.1); border-color: rgba(31,122,77,.28); }
body.light .impressum-content .imp-nizza                   { border-top-color: rgba(0,0,0,.09); color: rgba(0,0,0,.45); }

/* ── Lightbox ── */
.cd-lb-overlay {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 9999;
    background: rgba(0,0,0,.88);
    align-items: center;
    justify-content: center;
    cursor: zoom-out;
    backdrop-filter: blur(6px);
}
.cd-lb-overlay.active { display: flex; }
.cd-lb-overlay img {
    max-width: 90vw;
    max-height: 88vh;
    border-radius: 10px;
    box-shadow: 0 8px 60px rgba(0,0,0,.6);
    cursor: default;
    object-fit: contain;
}
.cd-lb-close {
    position: absolute;
    top: 18px;
    right: 22px;
    color: #fff;
    font-size: 1.8rem;
    line-height: 1;
    cursor: pointer;
    opacity: .7;
    transition: opacity .15s;
}
.cd-lb-close:hover { opacity: 1; }
.cd-lb-caption {
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    color: rgba(255,255,255,.7);
    font-size: .85rem;
    white-space: nowrap;
    pointer-events: none;
}

/* ==========================================================
   Mobile Responsive – global ordering & layout fixes
   ========================================================== */

/* Text immer vor Bild bei cd-split auf Mobile */
@media (max-width: 767px) {
    .cd-split .cd-img-frame { order: 2; }
}

/* Hero-Sektionen: weniger Top-Padding auf Mobile */
@media (max-width: 767px) {
    .cd-hero       { padding: 80px 0 40px; }
    .cd-prod-hero  { padding: 80px 0 40px; }
    .cd-hero h1    { font-size: clamp(1.8rem, 8vw, 2.6rem); }
}

/* BAZE-Hero: visueller Block unter dem Content auf Mobile */
@media (max-width: 767px) {
    .cd-baze-hero-visual { padding: 24px; }
}

/* Agent-Card / Drop-Card: etwas enger auf kleinen Screens */
@media (max-width: 575px) {
    .cd-agent-card { padding: 22px 16px; }
    .cd-agent-price-num { font-size: 2rem; }
}

/* ==========================================================
   Footer – Mobile Responsive
   ========================================================== */

@media (max-width: 767px) {
    /* Headline-Zeile: h2 + Button untereinander statt nebeneinander */
    .footer-style1 .fo-box-left .d-flex.justify-content-between {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 16px;
    }
    .footer-style1 .fo-box-left .d-flex.justify-content-between h2 {
        font-size: clamp(1.4rem, 5vw, 2rem);
    }

    /* Logo / Links / Social: untereinander statt nebeneinander */
    .footer-style1 .fo-box-left .d-flex.align-items-end.justify-content-between {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 20px;
    }
    .footer-style1 .fo-box-left .tags {
        text-align: left !important;
        margin-bottom: 0 !important;
    }
    .footer-style1 .fo-box-left .d-flex.v-align-between {
        width: 100%;
    }
    .footer-style1 .social-icon-circle { margin-top: 16px; }
}

/* ==========================================================
   cd-mem-grid – auf Mobile angenehmer scrollbar
   ========================================================== */

@media (max-width: 575px) {
    .cd-mem-grid { gap: 32px; }
    .cd-mem-card.featured { margin-top: 16px; }
    .cd-mem-card { padding: 28px 18px; }
}

/* ==========================================================
   cd-split – kleiner Gap auf Mobile
   ========================================================== */

@media (max-width: 575px) {
    .cd-split { gap: 24px; }
    .cd-section { padding: 56px 0; }
    .cd-section-sm { padding: 40px 0; }
}

/* ==========================================================
   Über Uns – Mobile
   ========================================================== */

@media (max-width: 767px) {
    /* Buttons im Hero nicht zu weit weg vom Text */
    .cd-hero-btns { margin-bottom: 28px; }
    /* Coinarity-Kasten: Zitat-Blockquote nicht zu breit */
    .cd-coinarity-quote { font-size: 1rem; }
}

@media (max-width: 575px) {
    /* Outline-Button im Hero: volle Breite damit er nicht bricht */
    .cd-hero-btns { flex-direction: column; align-items: flex-start; }
    .cd-hero-btns .cd-btn-outline,
    .cd-hero-btns .cd-btn-primary { width: 100%; justify-content: center; }
    /* Zielgruppen-Karten: weniger Padding */
    .cd-target-card { padding: 24px 18px; }
}

/* ==========================================================
   Kontakt – Mobile
   ========================================================== */

@media (max-width: 767px) {
    .cd-contact-wrap  { padding: 60px 0 40px; }
    .cd-contact-h1    { font-size: clamp(1.8rem, 7vw, 2.6rem); }
    /* Captcha: Bild und Input untereinander auf sehr kleinen Screens */
}

@media (max-width: 575px) {
    .cd-contact-wrap  { padding: 44px 0 32px; }
    .cd-contact-card  { padding: 24px 16px; }
    /* Captcha-Zeile stapeln */
    .cd-captcha-wrap  { flex-direction: column; align-items: stretch; }
    .cd-captcha-wrap .captcha-image img { width: 100%; height: auto; }
    .cd-captcha-wrap .form-control { min-width: 0; }
}
.cd-car-img-wrap { cursor: zoom-in; }

/* ═══════════════════════════════════════════════════════════
   PAGE BACKGROUND SYSTEM
   Aktiv auf ueber-uns, produkte, kontakt, impressum (body.page-bg).
   Nur im Dark Mode (:not(.light)).
   ═══════════════════════════════════════════════════════════ */

body.page-bg:not(.light) {
    background:
        linear-gradient(rgba(7,9,30,.68), rgba(7,9,30,.68)),
        url('/img/bg/bg1.webp') center / cover no-repeat fixed !important;
}

/* Glass-Behandlung für Cards, die über dem Bild stehen */
body.page-bg:not(.light) .cd-target-card,
body.page-bg:not(.light) .cd-mem-card,
body.page-bg:not(.light) .cd-agent-card,
body.page-bg:not(.light) .cd-legal-box,
body.page-bg:not(.light) .impressum-card,
body.page-bg:not(.light) .impressum-note {
    background: rgba(7,9,30,.82) !important;
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border-color: rgba(96,194,219,.18) !important;
    box-shadow: 0 8px 32px rgba(0,0,0,.4);
}

/* Featured-Varianten: Akzentfarbe beibehalten */
body.page-bg:not(.light) .cd-mem-card.featured {
    background: rgba(10,22,56,.90) !important;
    border-color: rgba(96,194,219,.45) !important;
    box-shadow: 0 0 36px rgba(96,194,219,.12), 0 8px 32px rgba(0,0,0,.45);
}
body.page-bg:not(.light) .cd-target-card.cd-target-featured {
    background: rgba(10,20,50,.85) !important;
    border-color: rgba(96,194,219,.30) !important;
}

/* Hintergrundfarbe der Phil-Section entfernen */
body.page-bg:not(.light) .cd-phil {
    background: transparent !important;
}

/* Bereits dunkle Glass-Cards: nur Blur ergänzen für mehr Tiefe */
body.page-bg:not(.light) .cd-baze-hero,
body.page-bg:not(.light) .cd-drop-card,
body.page-bg:not(.light) .cd-coinarity,
body.page-bg:not(.light) .cd-contact-card {
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
}

/* Navbar Glass im page-bg Modus */
body.page-bg:not(.light) nav.navbar {
    background: rgba(7,9,30,.90) !important;
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
}

/* ══════════════════════════════════════════════════════════════════════════
   EMPFEHLUNGS-MODAL  ·  ef-*
   Vorstellung des werbenden Agents beim ersten Besuch mit ?a=<alias>.
   Zwei Ausbaustufen: mit freigegebenen Daten (Bild, Name, Social) oder
   reduziert mit Rang-Icon, Rang, Alias und Land.
   ══════════════════════════════════════════════════════════════════════════ */
.ef-overlay {
    position: fixed;
    inset: 0;
    z-index: 20000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    background: rgba(3, 5, 18, .78);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    /* Passt das Modal nicht auf den Schirm (kleines Handy, Tastatur offen, Querformat),
       muss das Overlay scrollen — sonst ist der untere Teil samt Buttons unerreichbar.
       margin:auto am Modal haelt es trotzdem mittig, solange es passt. */
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    opacity: 0;
    visibility: hidden;
    transition: opacity .25s ease, visibility .25s ease;
}
.ef-overlay.is-open { opacity: 1; visibility: visible; }
body.ef-locked { overflow: hidden; }

.ef-modal {
    --ef-farbe: #60c2db;
    position: relative;
    width: 100%;
    max-width: 420px;
    margin: auto;
    padding: 38px 30px 30px;
    border-radius: 22px;
    text-align: center;
    background: rgba(10, 14, 40, .96);
    border: 1px solid rgba(255,255,255,.10);
    box-shadow: 0 30px 80px rgba(0,0,0,.55);
    transform: translateY(16px) scale(.97);
    transition: transform .3s cubic-bezier(.2,.8,.2,1);
}
.ef-overlay.is-open .ef-modal { transform: translateY(0) scale(1); }
/* Farbakzent des Agents als Lichtschein hinter dem Kopf */
.ef-modal::before {
    content: '';
    position: absolute;
    top: -40%; left: 50%;
    width: 300px; height: 300px;
    transform: translateX(-50%);
    background: radial-gradient(circle, var(--ef-farbe) 0%, transparent 70%);
    opacity: .16;
    pointer-events: none;
}

.ef-close {
    position: absolute;
    top: 14px; right: 14px;
    width: 32px; height: 32px;
    display: flex; align-items: center; justify-content: center;
    border-radius: 50%;
    border: 1px solid rgba(255,255,255,.12);
    background: rgba(255,255,255,.06);
    color: rgba(255,255,255,.55);
    font-size: .8rem;
    cursor: pointer;
    transition: background .15s, color .15s;
}
.ef-close:hover { background: rgba(255,255,255,.14); color: #fff; }

.ef-eyebrow {
    position: relative;
    font-size: .68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .12em;
    color: var(--ef-farbe);
    margin-bottom: 18px;
}

.ef-avatar {
    position: relative;
    width: 96px; height: 96px;
    margin: 0 auto 16px;
    border-radius: 50%;
    overflow: hidden;
    border: 2px solid var(--ef-farbe);
    box-shadow: 0 0 0 6px rgba(255,255,255,.04);
}
.ef-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Rang-Icon ist kein Foto: nicht beschneiden, sondern einpassen */
.ef-avatar--rang {
    border-color: rgba(255,255,255,.14);
    background: rgba(255,255,255,.04);
}
.ef-avatar--rang img { object-fit: contain; padding: 14px; }

.ef-name {
    position: relative;
    font-size: 1.35rem;
    font-weight: 800;
    color: #fff;
    margin: 0 0 12px;
    line-height: 1.2;
}

.ef-meta {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 7px;
    margin-bottom: 16px;
}
.ef-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 12px;
    border-radius: 50px;
    font-size: .74rem;
    font-weight: 600;
    color: rgba(255,255,255,.72);
    background: rgba(255,255,255,.06);
    border: 1px solid rgba(255,255,255,.09);
}
.ef-chip i { font-size: .68rem; opacity: .6; }
.ef-chip img { width: 15px; height: 15px; object-fit: contain; }
.ef-chip .flag-icon { width: 16px; height: 12px; border-radius: 2px; }
.ef-chip--rang { color: var(--ef-farbe); border-color: color-mix(in srgb, var(--ef-farbe) 35%, transparent); }

.ef-text {
    font-size: .86rem;
    line-height: 1.6;
    color: rgba(255,255,255,.55);
    margin: 0 auto 20px;
    max-width: 30ch;
}

.ef-social {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 22px;
}
.ef-social a {
    width: 38px; height: 38px;
    display: flex; align-items: center; justify-content: center;
    border-radius: 50%;
    background: rgba(255,255,255,.06);
    border: 1px solid rgba(255,255,255,.10);
    color: rgba(255,255,255,.70);
    font-size: .92rem;
    text-decoration: none;
    transition: background .15s, color .15s, border-color .15s, transform .15s;
}
.ef-social a:hover {
    background: color-mix(in srgb, var(--ef-farbe) 18%, transparent);
    border-color: var(--ef-farbe);
    color: #fff;
    transform: translateY(-2px);
}

.ef-actions { display: flex; flex-direction: column; gap: 9px; }
.ef-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 13px 24px;
    border-radius: 50px;
    font-size: .88rem;
    font-weight: 700;
    text-decoration: none;
    cursor: pointer;
    border: 1px solid rgba(255,255,255,.14);
    background: rgba(255,255,255,.05);
    color: rgba(255,255,255,.72);
    transition: background .18s, color .18s, transform .18s, box-shadow .18s;
}
.ef-btn:hover { background: rgba(255,255,255,.12); color: #fff; text-decoration: none; }
.ef-btn--primary {
    border-color: transparent;
    background: linear-gradient(135deg, var(--ef-farbe), color-mix(in srgb, var(--ef-farbe) 70%, #0a0e28));
    color: #fff;
    box-shadow: 0 8px 26px color-mix(in srgb, var(--ef-farbe) 32%, transparent);
}
.ef-btn--primary:hover { transform: translateY(-2px); color: #fff; }

@media (max-width: 480px) {
    .ef-overlay { padding: 14px 12px; align-items: flex-start; }
    .ef-modal { padding: 30px 18px 22px; border-radius: 18px; }
    .ef-close { top: 10px; right: 10px; width: 30px; height: 30px; }
    .ef-eyebrow { font-size: .62rem; letter-spacing: .1em; margin-bottom: 14px; }
    .ef-avatar { width: 78px; height: 78px; margin-bottom: 13px; }
    .ef-avatar--rang img { padding: 11px; }
    .ef-name { font-size: 1.15rem; margin-bottom: 10px; }
    .ef-chip { padding: 4px 10px; font-size: .7rem; }
    .ef-text { font-size: .82rem; margin-bottom: 16px; max-width: 34ch; }
    .ef-social { gap: 7px; margin-bottom: 18px; }
    .ef-social a { width: 36px; height: 36px; font-size: .86rem; }
    .ef-btn { padding: 12px 18px; font-size: .85rem; }
}

/* Sehr schmal (iPhone SE & Co.): Chips duerfen umbrechen, nichts darf abgeschnitten werden */
@media (max-width: 360px) {
    .ef-modal { padding: 26px 14px 18px; }
    .ef-avatar { width: 68px; height: 68px; }
    .ef-name { font-size: 1.05rem; }
    .ef-chip { font-size: .66rem; padding: 4px 9px; gap: 5px; }
    .ef-social a { width: 33px; height: 33px; }
}

/* Flache Viewports (Querformat, kleine Notebooks): Luft rausnehmen statt scrollen */
@media (max-height: 700px) {
    .ef-modal { padding-top: 28px; padding-bottom: 20px; }
    .ef-avatar { width: 68px; height: 68px; margin-bottom: 11px; }
    .ef-eyebrow { margin-bottom: 12px; }
    .ef-text { margin-bottom: 14px; }
    .ef-social { margin-bottom: 14px; }
}

/* Ganz flach (Handy im Querformat): so weit zusammenziehen, dass es ohne Scrollen passt */
@media (max-height: 520px) {
    .ef-overlay { padding: 10px; align-items: flex-start; }
    .ef-modal { padding: 18px 18px 14px; }
    .ef-eyebrow { margin-bottom: 8px; }
    .ef-avatar { width: 52px; height: 52px; margin-bottom: 8px; }
    .ef-avatar--rang img { padding: 8px; }
    .ef-name { font-size: 1rem; margin-bottom: 8px; }
    .ef-meta { margin-bottom: 10px; gap: 5px; }
    .ef-text { font-size: .78rem; line-height: 1.45; margin-bottom: 10px; max-width: 46ch; }
    .ef-social { margin-bottom: 10px; gap: 6px; }
    .ef-social a { width: 30px; height: 30px; font-size: .78rem; }
    .ef-actions { flex-direction: row; justify-content: center; }
    .ef-btn { padding: 9px 18px; font-size: .8rem; }
}

/* Header-Zeile: auf schmalen Schirmen nicht umbrechen lassen, lieber kuerzen */
@media (max-width: 575px) {
    .ef-brand-note {
        font-size: .62rem;
        max-width: 62vw;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
}

/* Zeile unter dem Logo: "Partnerpage von …" — oeffnet das Empfehlungs-Modal erneut */
.ef-brand-wrap { display: flex; flex-direction: column; gap: 2px; }
.ef-brand-note {
    display: inline-block;
    font-size: .68rem;
    line-height: 1.3;
    color: rgba(255,255,255,.42);
    text-decoration: none;
    letter-spacing: .01em;
    transition: color .15s;
}
.ef-brand-note strong { color: #60c2db; font-weight: 700; }
.ef-brand-note:hover { color: rgba(255,255,255,.70); text-decoration: none; }
.ef-brand-note:hover strong { text-decoration: underline; }