/* ============================================================================
   DROPPY NEXT - neues Erscheinungsbild
   ----------------------------------------------------------------------------
   Wird NACH main.css / pages/*.css / blog.css geladen und ueberschreibt:
   1. Tokens (Farben, Radien, Schatten, Schrift)  -> faerbt alle Bausteine um
   2. Layout-Ebene (Navigation, Hero, Karten, Buttons, Footer)
   Rueckschalter: includes/design.php  ($DROPPY_DESIGN = 'classic')
   ============================================================================ */

/* ----------------------------------------------------------------------------
   1. TOKENS
   ---------------------------------------------------------------------------- */
:root {
    /* Farben: Tinte, warmes Papier, Koralle als Signalfarbe, Tuerkis als Zweitfarbe */
    --c-dark: #0b1020;
    --c-dark-deep: #070a16;
    --c-dark-2: #151c36;
    --c-dark-3: #1f2848;
    --c-dark-line: #262f52;
    --c-text: #4a5164;
    --c-muted: #7d8497;
    --c-bg: #f5f4ef;
    --c-line: #e6e4dc;
    --c-coral: #ee4b2b;
    --c-coral-dark: #c93a1d;
    --c-teal: #0ea5a0;
    --c-teal-dark: #0a7f7b;
    --c-on-dark-link: #9db4ff;
    --rgb-dark: 11 16 32;
    --rgb-coral: 238 75 43;
    --rgb-teal: 14 165 160;

    /* Formen */
    --radius: 24px;
    --radius-sm: 14px;
    --radius-xs: 8px;

    /* Schatten mit leichtem Indigo-Ton */
    --shadow-card: 0 1px 2px rgb(var(--rgb-dark) / .04), 0 12px 32px -12px rgb(30 40 110 / .14);
    --shadow-page: 0 2px 6px rgb(var(--rgb-dark) / .04), 0 40px 80px -30px rgb(30 40 110 / .28);
    --shadow-hero: 0 20px 40px -20px rgb(30 40 110 / .25);

    /* Schrift: Systemschrift (schnell, keine externe Anfrage) */
    --font-sans: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --font-serif: var(--font-sans);

    /* Seitenaufbau */
    --page-width: 1040px;
    --hero-height: 460px;
    --gap-grid: 1.25rem;
    --space-card: 1.75rem;

    /* Neu */
    --aurora:
        radial-gradient(55% 90% at 12% 18%, rgb(255 92 56 / .85), transparent 62%),
        radial-gradient(45% 80% at 88% 8%, rgb(124 92 255 / .70), transparent 62%),
        radial-gradient(50% 90% at 72% 105%, rgb(0 214 180 / .55), transparent 62%),
        linear-gradient(180deg, #0b1020, #121a38);
    --grad-cta: linear-gradient(135deg, #ff6a3d 0%, #ee4b2b 55%, #d93a6a 120%);
    --ease: cubic-bezier(.2, .7, .2, 1);
}

/* ----------------------------------------------------------------------------
   2. BASIS
   ---------------------------------------------------------------------------- */
html { scroll-padding-top: 96px; }

body {
    font-weight: 400;
    font-size: 1.0625rem;
    line-height: 1.7;
    background-color: var(--c-bg) !important;
    letter-spacing: -0.003em;
}

::selection { background: rgb(var(--rgb-coral) / .22); color: var(--c-dark); }

h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
    font-weight: 700;
    letter-spacing: -0.025em;
    line-height: 1.12;
    color: var(--c-dark);
}

a { color: var(--c-coral-dark); text-underline-offset: 3px; }
a:hover, a:focus { color: var(--c-coral); }

:focus-visible { outline: 3px solid rgb(var(--rgb-coral) / .55); outline-offset: 2px; border-radius: 6px; }

b, strong { font-weight: 650; color: var(--c-dark); }

.highlight, .text-highlight { color: inherit; background: var(--grad-cta); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }

.bg-gray, .bg-droppy-light { background-color: transparent; }

/* ----------------------------------------------------------------------------
   3. NAVIGATION: schwebende Glas-Pille
   ---------------------------------------------------------------------------- */
.header,
.header.scrolled {
    position: relative;
    height: auto;
    background: transparent;
    box-shadow: none;
    z-index: 1000;
}

@media (min-width: 768px) {
    .header.navbar-fixed-top,
    .header.scrolled {
        position: fixed;
        top: 14px;
        left: 50%;
        right: auto;
        width: min(1180px, calc(100% - 32px));
        transform: translateX(-50%);
        height: 64px;
        border-radius: 999px;
        background: rgb(255 255 255 / .88);
        -webkit-backdrop-filter: saturate(1.6) blur(18px);
        backdrop-filter: saturate(1.6) blur(18px);
        box-shadow: 0 1px 0 rgb(255 255 255 / .6) inset, 0 10px 30px -10px rgb(30 40 110 / .28);
        border: 1px solid rgb(255 255 255 / .55);
        transition: box-shadow .3s var(--ease), background-color .3s var(--ease);
    }

    .header.scrolled { background: rgb(255 255 255 / .92); box-shadow: 0 12px 36px -12px rgb(30 40 110 / .38); }
}

.header .container { display: flex; align-items: center; justify-content: space-between; height: 100%; width: 100%; padding-left: 22px; padding-right: 14px; }
.header .container::before, .header .container::after { display: none; }

.header .logo { float: none; display: flex; align-items: center; }
.header .logo a { padding: 0; max-width: none; display: flex; align-items: center; }
.header .logo img { width: auto; height: 38px; max-width: none; }

.header .main-nav { margin: 0; float: none; display: flex; align-items: center; }
.header .main-nav .navbar-collapse { padding: 0; }

@media (min-width: 768px) {
    .header .main-nav .navbar-collapse.collapse { display: flex !important; align-items: center; height: auto !important; overflow: visible; }
    .header .main-nav .nav { display: flex; align-items: center; gap: 2px; float: none; margin: 0; }
    .header .main-nav .nav > li { float: none; }
}

.header .main-nav .nav .nav-item { margin: 0; font-size: .9rem; font-weight: 500; text-transform: none; }

.header .main-nav .nav .nav-item > a,
.header.scrolled .main-nav .nav > .nav-item > a {
    color: var(--c-dark);
    padding: 9px 14px;
    border-radius: 999px;
    opacity: 1;
    text-shadow: none;
    transition: background-color .2s var(--ease), color .2s var(--ease);
}

.header .main-nav .nav .nav-item > a:hover,
.header .main-nav .nav .nav-item > a:focus,
.header .main-nav .nav .nav-item.open > a,
.header.scrolled .main-nav .nav > .nav-item > a:hover,
.header.scrolled .main-nav .nav > .nav-item > a:focus {
    background: rgb(var(--rgb-dark) / .07);
    color: var(--c-dark);
}

.header .main-nav .nav .nav-item.active > a { color: var(--c-coral-dark) !important; background: rgb(var(--rgb-coral) / .10); }

/* CTA in der Navigation */
.header .main-nav .nav .nav-item.nav-item-cta a.btn-cta-secondary,
.header.scrolled .main-nav .nav .nav-item.nav-item-cta a.btn-cta-secondary {
    margin: 0 0 0 6px;
    padding: 10px 20px;
    border: 0;
    border-radius: 999px;
    background: var(--grad-cta);
    color: var(--c-white);
    font-weight: 600;
    box-shadow: 0 8px 20px -8px rgb(var(--rgb-coral) / .7);
    transition: transform .2s var(--ease), box-shadow .2s var(--ease);
}

.header .main-nav .nav .nav-item.nav-item-cta a.btn-cta-secondary:hover,
.header .main-nav .nav .nav-item.nav-item-cta a.btn-cta-secondary:focus {
    background: var(--grad-cta);
    color: var(--c-white);
    box-shadow: 0 12px 24px -8px rgb(var(--rgb-coral) / .85);
}

/* Aufklapp-Menues: helle Karten */
.header .main-nav .nav .dropdown-menu {
    margin-top: 12px;
    padding: 8px;
    min-width: 220px;
    border: 1px solid rgb(var(--rgb-dark) / .06);
    border-radius: 20px;
    background: rgb(255 255 255 / .97);
    -webkit-backdrop-filter: blur(18px);
    backdrop-filter: blur(18px);
    box-shadow: 0 24px 60px -16px rgb(30 40 110 / .35);
}
.header .main-nav .nav .dropdown-menu::before { display: none; }

.header .main-nav .nav .dropdown-menu a,
.header.scrolled .main-nav .nav .dropdown-menu a {
    padding: 9px 14px;
    border: 0;
    border-radius: 12px;
    color: var(--c-dark);
    font-size: .9rem;
    font-weight: 450;
}

.header .main-nav .nav .dropdown-menu a:hover,
.header .main-nav .nav .dropdown-menu .active > a { background: rgb(var(--rgb-dark) / .06); color: var(--c-coral-dark); }

.header .main-nav .nav .dropdown-menu .divider { margin: 6px 8px; background: rgb(var(--rgb-dark) / .08); }

/* Hamburger */
.header .main-nav .navbar-toggle { border: 0; position: static; transform: none; margin: 0; padding: 12px; border-radius: 999px; background: rgb(var(--rgb-dark) / .06); }
.header .main-nav .navbar-toggle .icon-bar { background-color: var(--c-dark); height: 2px; border-radius: 2px; }
.header .main-nav .navbar-toggle:hover .icon-bar { background-color: var(--c-coral); }

@media (max-width: 767px) {
    .header, .header.scrolled { margin: 10px 12px 0; position: absolute; left: 0; right: 0; width: auto; transform: none; height: 60px;
        border-radius: 999px; background: rgb(255 255 255 / .9); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
        box-shadow: 0 10px 30px -12px rgb(30 40 110 / .4); }
    .header .container { padding-left: 18px; padding-right: 10px; }
    .header .logo img { height: 34px; }
    .header .main-nav .navbar-collapse,
    .navbar-collapse {
        position: absolute; top: 68px; left: 0; right: 0; width: auto; max-height: 75vh; overflow-y: auto;
        padding: 10px; border: 0; border-radius: 28px; background: var(--c-dark); box-shadow: 0 30px 60px -20px rgb(0 0 0 / .5);
    }
    .header .main-nav .nav > li > a, .header.scrolled .main-nav .nav > .nav-item > a { color: var(--c-white); padding: 12px 16px; border-radius: 14px; }
    .header .main-nav .nav .nav-item > a:hover, .header .main-nav .nav .nav-item.open > a { background: rgb(255 255 255 / .08); color: var(--c-white); }
    .header .main-nav .nav .nav-item.active > a { background: rgb(255 255 255 / .1); color: var(--c-white) !important; }
    .header .main-nav .nav .nav-item.nav-item-cta a.btn-cta-secondary { margin: 6px 0 0; display: block; text-align: center; }
    .header .main-nav .nav .dropdown-menu { background: var(--c-dark-2); box-shadow: none; border: 0; margin: 0 0 6px; }
    .header .main-nav .nav .dropdown-menu a, .header.scrolled .main-nav .nav .dropdown-menu a { color: var(--c-white); }
    .header .main-nav .nav .dropdown-menu a:hover { background: rgb(255 255 255 / .08); color: var(--c-white); }
}

/* ----------------------------------------------------------------------------
   4. HERO: Farbverlauf statt Foto
   ---------------------------------------------------------------------------- */
.bg-img.hero-band:not(.hero-photo),
.section-promo.bg-img,
.bg-img-promo:not(.hero-photo) {
    background-image: var(--aurora) !important;
    background-size: 140% 140%;
    background-position: 0% 50%;
    animation: auroraShift 24s ease-in-out infinite alternate;
}

@keyframes auroraShift { to { background-position: 100% 50%; } }

.bg-img.hero-band, .bg-img-promo { border-radius: 0 0 48px 48px; overflow: hidden; }

/* Der Foto-Schleier faellt weg; feines Raster fuer Tiefe */
.bg-img.hero-band.bg-overlay:not(.hero-photo)::before,
.bg-img-promo.bg-overlay:not(.hero-photo)::before {
    background-color: transparent;
    opacity: 1;
    background-image: linear-gradient(rgb(255 255 255 / .06) 1px, transparent 1px), linear-gradient(90deg, rgb(255 255 255 / .06) 1px, transparent 1px);
    background-size: 56px 56px;
    -webkit-mask-image: radial-gradient(80% 100% at 50% 0%, #000 20%, transparent 80%);
    mask-image: radial-gradient(80% 100% at 50% 0%, #000 20%, transparent 80%);
}

@media (prefers-reduced-motion: reduce) {
    .bg-img.hero-band, .section-cta.bg-img, .section-promo.bg-img, .bg-img-promo { animation: none; }
    * { scroll-behavior: auto !important; }
}

/* Titelbereich: linksbuendig, gross, eng */
.section-on-bg .caption,
.section-on-bg .caption.text-center { text-align: left; max-width: 1040px; margin-left: auto; margin-right: auto; }

.section-on-bg .caption .title,
.section-on-bg .caption h1,
.section-on-bg .caption h2 {
    color: var(--c-white);
    font-size: clamp(2rem, 4.6vw, 3.6rem);
    font-weight: 750;
    letter-spacing: -0.035em;
    line-height: 1.04;
    max-width: 22ch;
    margin-bottom: 18px;
    text-shadow: none;
}

.section-on-bg .caption .title br { display: none; }

.section-on-bg .caption .intro {
    max-width: 46rem;
    color: rgb(255 255 255 / .82);
    font-size: clamp(1.02rem, 1.4vw, 1.2rem);
    font-weight: 400;
}

.section-on-bg .caption .highlight { background: linear-gradient(135deg, #ffb199, #ff7a5c 60%, #ffd0a6); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }

/* ----------------------------------------------------------------------------
   5. SEITENKARTE UND ABSCHNITTE
   ---------------------------------------------------------------------------- */
.section-story .story-container-inner,
body:not(.blog-page) .section.section-story .story-container-inner {
    border: 0;
    border-radius: 36px;
    background: var(--c-white);
    box-shadow: var(--shadow-page);
}

.section-story .about { padding: clamp(1.5rem, 4vw, 3.5rem); }

.page-title, .section-title,
.section-story .about > .page-title, .section-story .about h2.page-title {
    color: var(--c-dark);
    font-size: clamp(1.7rem, 3vw, 2.4rem);
    font-weight: 750;
    letter-spacing: -0.03em;
    text-align: left;
}

.section-story .about h2,
.section-story .about h3,
.text-section h2 { color: var(--c-dark); }

.eyebrow {
    display: inline-block;
    padding: 5px 12px;
    border-radius: 999px;
    background: rgb(var(--rgb-teal) / .12);
    color: var(--c-teal-dark);
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .14em;
}

.content-box {
    border: 0;
    border-radius: var(--radius);
    background: var(--c-bg);
    box-shadow: none;
}
.content-box--page { border-left: 0; background: linear-gradient(135deg, rgb(var(--rgb-teal) / .08), rgb(124 92 255 / .06)); }

/* Kacheln: Bento */
.card-tile {
    border: 1px solid rgb(var(--rgb-dark) / .06);
    border-radius: var(--radius);
    background: var(--c-white);
    box-shadow: var(--shadow-card);
    transition: transform .35s var(--ease), box-shadow .35s var(--ease), border-color .35s var(--ease);
}

.card-tile:hover { transform: translateY(-4px); box-shadow: 0 30px 60px -24px rgb(30 40 110 / .32); border-color: rgb(var(--rgb-coral) / .25); }

.card-grid { gap: var(--gap-grid); }

@media (min-width: 992px) {
    /* erste Kachel einer Dreier-/Vierer-Gruppe etwas hervorgehoben */
    /* (Hervorhebung der ersten Kachel entfernt: alle Kacheln gleich) */
}

.step-icon, .step-icon--num {
    background: var(--grad-cta);
    color: var(--c-white);
    box-shadow: 0 10px 22px -8px rgb(var(--rgb-coral) / .7);
}

.section-steps.bg-gray { background: transparent; border: 0; box-shadow: none; }
.section-steps .step .title { text-align: left; }

/* ----------------------------------------------------------------------------
   6. BUTTONS
   ---------------------------------------------------------------------------- */
.btn { border-radius: 999px; font-weight: 600; letter-spacing: 0; text-transform: none; }

.btn-cta, .btn-cta-primary {
    border: 0;
    padding: 14px 28px;
    background: var(--grad-cta);
    color: var(--c-white);
    box-shadow: 0 14px 30px -12px rgb(var(--rgb-coral) / .75);
    transition: transform .25s var(--ease), box-shadow .25s var(--ease), filter .25s;
}
.btn-cta:hover, .btn-cta:focus, .btn-cta-primary:hover, .btn-cta-primary:focus {
    background: var(--grad-cta);
    color: var(--c-white);
    filter: brightness(1.06) saturate(1.1);
    box-shadow: 0 20px 36px -12px rgb(var(--rgb-coral) / .9);
}
.btn-cta.btn-lg, .btn-cta-primary.btn-lg { padding: 16px 34px; font-size: 1.05rem; }

.btn.btn-cta-secondary, .btn-ghost {
    padding: 12px 26px;
    border: 1.5px solid var(--c-coral);
    background: var(--c-white);
    color: var(--c-coral-dark);
    box-shadow: 0 8px 20px -12px rgb(var(--rgb-coral) / .6);
}
.btn.btn-cta-secondary:hover, .btn.btn-cta-secondary:focus, .btn-ghost:hover {
    border-color: transparent;
    background: var(--grad-cta);
    color: var(--c-white);
}

/* ----------------------------------------------------------------------------
   7. FORMULARE
   ---------------------------------------------------------------------------- */
.form-control, input.form-control, textarea.form-control, select.form-control {
    border: 1.5px solid var(--c-line);
    border-radius: var(--radius-sm);
    background: #fbfbf8;
    box-shadow: none;
    transition: border-color .2s, box-shadow .2s, background-color .2s;
}
.form-control:focus { border-color: var(--c-coral); background: var(--c-white); box-shadow: 0 0 0 4px rgb(var(--rgb-coral) / .14); }

/* ----------------------------------------------------------------------------
   8. HOME: grosser Auftritt
   ---------------------------------------------------------------------------- */
.section-promo { background-color: transparent; border-radius: 0 0 48px 48px; overflow: hidden; }
.section-promo .title { font-size: clamp(2.4rem, 6vw, 4.6rem); font-weight: 800; letter-spacing: -0.04em; line-height: 1.02; color: var(--c-white); }
.section-promo .intro { opacity: .85; color: var(--c-white); }
.section-promo > .container { text-align: center; }

/* ----------------------------------------------------------------------------
   9. CTA-BAND UND FOOTER
   ---------------------------------------------------------------------------- */
.section-cta.bg-img { width: auto; max-width: var(--page-width); margin: 0 auto; border-radius: 44px; overflow: hidden; }

.footer {
    margin-top: 28px;
    padding-top: 4rem;
    border-radius: 44px 44px 0 0;
    background:
        radial-gradient(60% 80% at 10% 0%, rgb(238 75 43 / .22), transparent 60%),
        radial-gradient(50% 70% at 95% 0%, rgb(124 92 255 / .22), transparent 60%),
        var(--c-dark);
}
.footer a { color: rgb(255 255 255 / .72); transition: color .2s; }
.footer a:hover { color: var(--c-white); }
.footer .title { color: var(--c-white); font-size: .8rem; letter-spacing: .14em; text-transform: uppercase; font-weight: 700; opacity: .9; }

/* ----------------------------------------------------------------------------
   10. BLOG
   ---------------------------------------------------------------------------- */
.blog-header { background: transparent; }
.blog-list .post { border-radius: var(--radius); }

/* ----------------------------------------------------------------------------
   11. FEINSCHLIFF
   ---------------------------------------------------------------------------- */
.section-promo, .bg-img-promo { height: 620px; }
.section-overlap { margin-top: 0; }

.card-tile--step { text-align: left; }
.card-tile--step .step-icon { margin-left: 0; margin-right: 0; }

.card-tile--stat { border-top: 1px solid rgb(var(--rgb-dark) / .06); text-align: left; background: linear-gradient(160deg, #fff 60%, rgb(var(--rgb-teal) / .09)); }
.card-tile--stat .title, .card-tile--stat .stat-value { color: var(--c-dark); font-weight: 800; letter-spacing: -0.03em; }

/* Hero: Mindesthoehe, die genaue Hoehe setzt scripts/next.js passend zum Titeltext */
.bg-img.hero-band { height: auto; min-height: var(--hero-height); }


/* ----------------------------------------------------------------------------
   12. KORREKTUREN v6.0.1
   ---------------------------------------------------------------------------- */
/* Aufklapp-Menues: kein Spalt zwischen Link und Karte (Hover bleibt erhalten) */
.header .main-nav .nav .dropdown-menu { margin-top: 0; top: 100%; }
.header .main-nav .nav .dropdown-menu::before {
    display: block; content: ""; position: absolute; left: 0; right: 0; top: -22px; height: 22px;
    width: auto; border: 0; background: transparent;
}
.header .main-nav .nav > .nav-item { position: relative; }
.header .main-nav .nav > .nav-item > a { position: relative; }

/* Blog-Archiv: heller Hintergrund, dunkle Schrift */
body .header.blog-header .archive-dropdown .dropdown-menu { background-color: rgb(255 255 255 / .98) !important; top: 66px; padding-top: 28px; border-radius: 24px; }
body .header.blog-header .archive-dropdown .dropdown-menu::before { display: none; }
body .header.blog-header .archive-dropdown .dropdown-menu a.archive-item,
body .header.blog-header.scrolled .main-nav .nav .dropdown-menu a.archive-item { color: var(--c-dark); }
body .header.blog-header .archive-dropdown .dropdown-menu a.archive-item:hover,
body .header.blog-header.scrolled .main-nav .nav .dropdown-menu a.archive-item:hover { background: rgb(var(--rgb-dark) / .06); color: var(--c-coral-dark); }

/* Blogbeitrag: Titel, Datum und Autor im Hero zentriert */
body.blog-page-single .caption,
body.blog-page-single .caption .title,
body.blog-page-single .caption .intro { text-align: center; margin-left: auto; margin-right: auto; }

/* CTA-Band: Titel hell */
.section-cta .title, .section-cta h2 { color: var(--c-white) !important; }
.section-on-bg .caption .intro a { color: #ffb199; }

/* Buttons: nur Farbe, beim Druecken leicht kleiner */
.btn, .btn-cta, .btn-cta-primary, .btn-cta-secondary { transform: none !important; }
.btn:active, .btn-cta:active, .btn-cta-primary:active, .btn-cta-secondary:active { transform: scale(.97) !important; }

/* Grosse Karten (Formular, Spenden) ohne Hover-Effekt */
.card-tile--form:hover, .donation-card:hover, .donation-tile:hover, .contact-form-inner:hover {
    transform: none; box-shadow: var(--shadow-card); border-color: rgb(var(--rgb-dark) / .06);
}

/* Untermenue (2. Ebene) direkt neben dem Eintrag, ohne Spalt */
.header .main-nav .nav .dropdown-submenu > .dropdown-menu {
    top: -9px; left: calc(100% - 6px); margin: 0;
}
.header .main-nav .nav .dropdown-submenu > .dropdown-menu::before { display: none; }

/* ----------------------------------------------------------------------------
   13. v6.3
   ---------------------------------------------------------------------------- */
/* CTA-Band vor dem Footer: dezent hell, zentriert */
.section-cta.bg-img {
    background-image: linear-gradient(135deg, rgb(var(--rgb-coral) / .22), rgb(var(--rgb-teal) / .26)) !important;
    background-color: var(--c-white);
    background-size: auto; animation: none;
    border: 1px solid rgb(var(--rgb-dark) / .06);
    box-shadow: var(--shadow-card);
    padding: 56px 24px;
    text-align: center;
}
.section-cta.bg-overlay::before { display: none; }
.section-cta .container { width: auto; max-width: 100%; margin: 0 auto; padding: 0; text-align: center; }
.section-cta .title, .section-cta h2 { color: var(--c-dark) !important; text-align: center; }
.section-cta .intro, .section-cta p { color: var(--c-text); text-align: center; opacity: 1; }
.section-cta .intro .counting { color: var(--c-dark); }

/* Spenden: Text links als ruhige weisse Karte (ragt ins Hero), kein Hover-Effekt */
.spenden-page .donation-card, .spenden-page .donation-card:hover {
    transform: none !important; border: 0 !important;
    background: var(--c-white) !important; border-radius: 36px !important;
    box-shadow: var(--shadow-page) !important; padding: clamp(20px, 4vw, 40px) !important;
}
.spenden-page .donation-card *:hover { transform: none; }

/* Sprachauswahl im Menueband */
.header .main-nav .nav .nav-item-lang { display: flex; align-items: center; }
.nav-item-lang .gtranslate_wrapper { position: relative; }
.nav-item-lang .gt_switcher { width: auto !important; font-size: 13px; }
.nav-item-lang .gt_switcher .gt_selected { width: auto !important; min-width: 0; background: rgb(var(--rgb-dark) / .06) !important; border: 0 !important; border-radius: 999px; }
.nav-item-lang .gt_switcher .gt_selected a { padding: 7px 14px; color: var(--c-dark) !important; border: 0 !important; }
.nav-item-lang .gt_switcher .gt_option { position: absolute !important; top: 100%; right: 0; left: auto; margin-top: 8px; width: 170px !important; border: 1px solid rgb(var(--rgb-dark) / .08) !important; border-radius: 16px; background: #fff !important; box-shadow: 0 20px 50px -16px rgb(30 40 110 / .35); z-index: 1100 !important; }
.nav-item-lang .gt_switcher .gt_option a { color: var(--c-dark) !important; }

/* Blog-Archiv mobil: dunkle Schrift auf hellem Feld */
@media screen and (max-width: 991px) {
    body .header.blog-header .archive-dropdown .dropdown-menu a.archive-item,
    body .header.blog-header .main-nav .nav .archive-dropdown .dropdown-menu li a.archive-item,
    body .header.blog-header.scrolled .main-nav .nav .dropdown-menu a.archive-item { color: var(--c-dark) !important; background: transparent !important; }
    body .header.blog-header .archive-dropdown .dropdown-menu a.archive-item:hover { color: var(--c-coral-dark) !important; background: rgb(var(--rgb-dark) / .06) !important; }
}

/* Footer mobil: zwei Spalten */
@media screen and (max-width: 767px) {
    .footer .row { display: flex; flex-wrap: wrap; }
    .footer .row > [class*="col-"] { width: 50%; float: none; }
    .footer .row > .footer-col.connect, .footer .row > [class*="col-"]:last-child { width: 100%; }
}

@media screen and (max-width: 767px) {
    .nav-item-lang .gt_switcher .gt_selected { background: rgb(255 255 255 / .1) !important; }
    .nav-item-lang .gt_switcher .gt_selected a { color: var(--c-white) !important; }
    .nav-item-lang .gt_switcher .gt_option { left: 0; right: auto; }
}

/* Hero mit Foto: auf der jeweiligen Seite dem Hero-div die Klasse "hero-photo" geben */
.bg-img.hero-band.hero-photo, .bg-img-promo.hero-photo { background-size: cover; background-position: center; }
.bg-img.hero-band.hero-photo.bg-overlay::before, .bg-img-promo.hero-photo.bg-overlay::before {
    background: linear-gradient(180deg, rgb(11 16 32 / .55), rgb(11 16 32 / .35) 60%, rgb(11 16 32 / .6));
    opacity: 1;
}

/* Suchfeld liegt beim Aufklappen ueber der Sprachauswahl */
.nav-item-lang .gt_switcher .gt_selected { z-index: 1 !important; }
.header .searchbox-container { z-index: 2000; }
.header .searchbox-container .searchbox.searchbox-open .searchbox-input { background: #fff !important; }
/* Offenes Suchfeld: Sprachauswahl und Button dahinter ausblenden (nur moderne Browser, sonst wie bisher) */
.header:has(.searchbox-open) .nav-item-lang,
.header:has(.searchbox-open) .nav-item-cta { visibility: hidden; }

/* v6.8: Band "Bereit fuer den ersten Transfer?": Text links, Button rechts, ruhig und klar */
.cta-band {
    display: flex; align-items: center; justify-content: space-between; gap: 24px;
    max-width: var(--page-width); margin: 32px auto 56px;
    padding: 28px 36px; text-align: left;
    background: var(--c-dark); border: 0; border-radius: 32px;
    box-shadow: var(--shadow-card);
    position: relative; overflow: hidden;
}
.cta-band::before {
    content: ""; position: absolute; inset: 0; pointer-events: none;
    background: radial-gradient(60% 140% at 0% 0%, rgb(var(--rgb-coral) / .45), transparent 60%),
                radial-gradient(50% 120% at 100% 100%, rgb(var(--rgb-teal) / .4), transparent 60%);
}
.cta-band > * { position: relative; }
.cta-band p, .cta-band .title { margin: 0; max-width: none; flex: 1; color: var(--c-white) !important; font-size: clamp(1.15rem, 2.4vw, 1.5rem); font-weight: 700; letter-spacing: -0.02em; text-align: left; }
.cta-band .btn { flex: none; white-space: nowrap; }
.story-container-inner .cta-band { margin: 40px 0 0; }
@media (max-width: 640px) {
    .cta-band { flex-direction: column; align-items: flex-start; padding: 24px; }
    .cta-band .btn { width: 100%; text-align: center; }
}

/* Cookie-Dialog: Titel lesbar, Cookie-Knopf immer klickbar */
#cookieNoticePro h4, #cookieNoticePro .title-wrap h4 { color: #fff !important; background: none !important; text-shadow: none; }
#cookieMinimizeIcon { z-index: 2147483000 !important; pointer-events: auto !important; }