/* =========================================================
   AT-PC-Services – Haupt-Stylesheet
   Design-Tokens abgeleitet aus dem Firmenlogo:
   Indigo  #403C8F   (Marke, Überschriften, Flächen)
   Rot     #C30022   (Akzent, CTA, Signal-Badges)
   ========================================================= */

:root {
    --color-primary: #403c8f;
    --color-primary-dark: #2c2a63;
    --color-primary-light: #6a66b8;
    --color-accent: #c30022;
    --color-accent-dark: #97001a;
    --color-bg-dark: #0b1220;
    --color-bg-dark-2: #121b30;
    --color-bg-light: #f5f6fb;
    --color-white: #ffffff;
    --color-text: #1b1b2a;
    --color-text-muted: #5b5f73;
    --color-border: #e3e4ee;

    /* Gold-Akzent: dezent für Umrandungen/Glow bei Premium-Elementen (CTA, Cookie-Banner, Header) */
    --color-gold: #cda054;
    --color-gold-light: #f2d9a1;
    --color-gold-dark: #9c7936;

    --font-display: 'Poppins', 'Segoe UI', sans-serif;
    --font-body: 'Inter', 'Segoe UI', sans-serif;

    --radius-sm: 8px;
    --radius-md: 16px;
    --radius-lg: 28px;

    --shadow-md: 0 10px 30px rgba(11, 18, 32, 0.12);
    --shadow-lg: 0 20px 50px rgba(11, 18, 32, 0.25);

    --max-width: 1180px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
    margin: 0;
    font-family: var(--font-body);
    color: var(--color-text);
    background: var(--color-bg-light);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }

h1, h2, h3, h4 {
    font-family: var(--font-display);
    color: var(--color-primary);
    line-height: 1.15;
    margin: 0 0 0.5em;
}

h1 { font-size: clamp(2rem, 4vw, 2.9rem); font-weight: 700; }
h2 { font-size: clamp(1.6rem, 3vw, 2.2rem); font-weight: 700; }
h3 { font-size: 1.25rem; font-weight: 600; }

p { margin: 0 0 1em; color: var(--color-text-muted); }

a { color: var(--color-primary); text-decoration: none; }
a:hover { text-decoration: underline; }

.container {
    max-width: var(--max-width);
    margin: 0 auto;
    padding: 0 24px;
}

.section { padding: 72px 0; }
.section--tight { padding: 48px 0; }
.section--light { background: var(--color-bg-light); }
.section--dark {
    background: linear-gradient(160deg, var(--color-bg-dark) 0%, var(--color-bg-dark-2) 100%);
    color: #cfd2e6;
}
.section--dark h1, .section--dark h2, .section--dark h3 { color: var(--color-white); }
.section--dark p { color: #b7bbd6; }

.eyebrow {
    display: inline-block;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 0.9rem;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: var(--color-accent);
    margin-bottom: 14px;
}

/* Buttons */
.btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 14px 28px;
    border-radius: 999px;
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 0.95rem;
    text-decoration: none;
    border: 2px solid transparent;
    cursor: pointer;
    transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}
.btn:hover { text-decoration: none; transform: translateY(-2px) scale(1.035); }
.btn:active { transform: translateY(0) scale(0.98); }
.btn svg { width: 20px; height: 20px; flex-shrink: 0; }
.btn { white-space: nowrap; }
.btn--accent { background: var(--color-accent); color: #fff; box-shadow: var(--shadow-md); }
.btn--accent:hover { background: var(--color-accent-dark); }
.btn--outline { border-color: rgba(255,255,255,0.6); color: #fff; }
.btn--outline:hover { background: rgba(255,255,255,0.1); }
.btn--outline-dark { border-color: var(--color-primary); color: var(--color-primary); }
.btn--outline-dark:hover { background: var(--color-primary); color: #fff; }
.btn-row { display: flex; gap: 16px; flex-wrap: wrap; margin-top: 28px; }

/* Hero (split layout: text left, framed image right) */
.hero { position: relative; overflow: hidden; padding: 56px 0 64px; }
.hero-grid {
    display: grid;
    grid-template-columns: 1.1fr 0.9fr;
    gap: 48px;
    align-items: center;
}
.hero-grid--no-image { grid-template-columns: 1fr; max-width: 760px; }
.hero-copy p.lead { font-size: 1.15rem; color: #cfd2e6; }
.hero-frame { position: relative; max-width: 380px; margin: 0 auto; }
.hero-frame img {
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    border: 6px solid rgba(255,255,255,0.06);
}
.hero-usps {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 28px;
    margin-top: 32px;
    padding-top: 24px;
    border-top: 1px solid rgba(255,255,255,0.12);
}
.hero-usps span { font-size: 0.88rem; color: #cfd2e6; display: flex; align-items: center; gap: 8px; }
.hero-usps span::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--color-accent); display: inline-block; }

@media (max-width: 860px) {
    .hero-grid { grid-template-columns: 1fr; }
    .hero-frame { order: -1; max-width: 280px; }
}

/* Gestapelter Startseiten-Hero: Bild volle Breite oben, Text darunter im
   selben dunklen Bereich - das Bild geht per Farbverlauf in den Hero-Hintergrund
   über, statt hart abzuschneiden. */
.hero--stacked { padding-top: 0; }
.hero-banner { position: relative; width: 100%; overflow: hidden; line-height: 0; }
.hero-banner img { width: 100%; height: auto; display: block; }
.hero-banner::after {
    content: "";
    position: absolute;
    left: 0; right: 0; bottom: 0;
    height: 22%;
    background: linear-gradient(to bottom, rgba(11,18,32,0) 0%, var(--color-bg-dark) 92%);
    pointer-events: none;
}
.hero-copy--centered {
    max-width: 760px;
    margin: 0 auto;
    text-align: center;
    padding-top: 8px;
}
.hero-copy--centered .btn-row { justify-content: center; }
.hero-usps--centered { justify-content: center; }

@media (max-width: 560px) {
    .hero-banner::after { height: 30%; }
}

/* Feature / icon list */
.feature-list { display: grid; gap: 22px; }
.feature-item { display: flex; gap: 16px; align-items: flex-start; }
.feature-icon {
    flex: none;
    width: 46px; height: 46px;
    border-radius: 50%;
    background: var(--color-primary);
    color: #fff;
    display: flex; align-items: center; justify-content: center;
}
.feature-icon svg { width: 22px; height: 22px; }
.feature-item h3 { margin-bottom: 2px; font-size: 1.05rem; }
.feature-item p { margin: 0; font-size: 0.95rem; }

/* Card grid (Übersichtsseiten) – flex statt grid, damit eine einzelne Karte in der
   letzten Zeile zentriert steht statt links hängen zu bleiben. */
.card-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 24px;
}
.card {
    background: #fff;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: 28px;
    flex: 1 1 300px;
    max-width: 320px;
    text-align: center;
    transition: box-shadow 0.2s ease, transform 0.2s ease, border-color 0.2s ease;
}
.card:hover { box-shadow: var(--shadow-md); transform: translateY(-6px); border-color: var(--color-gold); }
.card .feature-icon { margin: 0 auto 14px; }
.card h3 { margin-bottom: 8px; }
.card p { font-size: 0.94rem; margin-bottom: 12px; }
.card .card-link { font-size: 0.9rem; font-weight: 600; }
@media (max-width: 560px) {
    .card { flex-basis: 100%; max-width: 360px; }
}

/* Two-column content-with-image section */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; }
.split img { border-radius: var(--radius-md); box-shadow: var(--shadow-md); }
.split.reverse .split-media { order: 2; }
@media (max-width: 860px) {
    .split { grid-template-columns: 1fr; }
    .split.reverse .split-media { order: -1; }
}

/* CTA band */
.cta-band {
    position: relative;
    background: linear-gradient(155deg, #26224f 0%, #1a1740 55%, #120f30 100%);
    color: #fff;
    border-radius: var(--radius-lg);
    padding: 48px;
    text-align: center;
    border: 1px solid var(--color-gold);
    box-shadow: 0 0 0 1px rgba(205, 160, 84, 0.15), 0 25px 60px rgba(5, 6, 20, 0.45);
    overflow: hidden;
}
.cta-band::before {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 15% 0%, rgba(242, 217, 161, 0.16) 0%, rgba(242, 217, 161, 0) 45%);
    pointer-events: none;
}
.cta-band::after {
    content: "";
    position: absolute;
    top: 0;
    left: -60%;
    width: 40%;
    height: 100%;
    background: linear-gradient(100deg, rgba(255,255,255,0) 0%, rgba(242, 217, 161, 0.12) 50%, rgba(255,255,255,0) 100%);
    animation: cta-shine 7s ease-in-out infinite;
    pointer-events: none;
}
@keyframes cta-shine {
    0%, 60% { left: -60%; }
    100% { left: 130%; }
}
.cta-band h2 { color: #fff; position: relative; }
.cta-band p { color: #cfcae8; max-width: 560px; margin-inline: auto; position: relative; }
.cta-band .btn-row { justify-content: center; position: relative; }

/* Prose: gerenderter WordPress-Content (the_content) auf Inhaltsseiten */
.prose { max-width: 760px; font-size: 1.08rem; }
.prose h2 { margin-top: 1.3em; }
.prose h3 { margin-top: 1.1em; color: var(--color-text); }
.prose p { color: #454863; }
.prose ul, .prose ol { color: #454863; padding-left: 1.3em; margin: 0 0 1em; }
.prose li { margin-bottom: 0.5em; }
.prose strong { color: var(--color-text); }
.prose a { text-decoration: underline; font-weight: 600; }

/* Zentrierter Intro-Text auf der Startseite (zwischen Hero und Leistungs-Kacheln). */
.prose--centered { max-width: 720px; margin: 0 auto; text-align: center; }

/* Übersichtsseite: Intro-Bereich über dem Card-Grid */
.overview-intro { max-width: 680px; margin: 0 auto 48px; text-align: center; }
.overview-intro .prose p { font-size: 1.15rem; }

/* Leistungs-Kacheln (Startseite): schlichte <ul> aus dem Original-Content wird
   als hochwertiges Kachelraster mit Gold-Rand dargestellt, statt als kleine
   Aufzählung unterzugehen. */
.usp-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
    margin-top: 32px;
}
.usp-chip {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 12px 18px;
    background: #fff;
    border: 1px solid var(--color-gold);
    border-radius: var(--radius-md);
    box-shadow: 0 1px 0 rgba(205, 160, 84, 0.15), var(--shadow-md);
    font-family: var(--font-display);
    font-size: 0.92rem;
    font-weight: 600;
    color: var(--color-text);
    flex: 1 1 230px;
    max-width: 270px;
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}
.usp-chip:hover {
    transform: translateY(-4px);
    border-color: var(--color-gold-dark);
    box-shadow: 0 1px 0 rgba(205, 160, 84, 0.25), var(--shadow-lg);
}
.usp-chip-icon {
    flex: none;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
    color: var(--color-gold-light);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 0 0 3px rgba(205, 160, 84, 0.2);
}
.usp-chip-icon svg { width: 14px; height: 14px; stroke-width: 2.8; }

@media (max-width: 560px) {
    .usp-chip { flex-basis: 100%; max-width: 360px; font-size: 0.92rem; padding: 12px 16px; }
}

/* Zurück-Link zur Übersichtsseite */
.parent-link { margin-bottom: 24px; }
.parent-link a { font-weight: 600; font-size: 0.9rem; }

/* Kontakt-Layout */
.contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: start; }
.contact-info-card {
    background: #fff;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: 32px;
}
.contact-info-card .feature-list { margin-top: 20px; }
@media (max-width: 860px) {
    .contact-grid { grid-template-columns: 1fr; }
}

/* Contact Form 7 – Formularfelder im Design-System einkleiden */
.wpcf7-form { max-width: 640px; }
.wpcf7-form p { margin-bottom: 18px; }
.wpcf7-form label { display: block; font-weight: 600; font-size: 0.9rem; margin-bottom: 6px; }
.wpcf7-form input[type="text"],
.wpcf7-form input[type="email"],
.wpcf7-form input[type="tel"],
.wpcf7-form input[type="number"],
.wpcf7-form select,
.wpcf7-form textarea {
    width: 100%;
    padding: 12px 14px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    font-family: var(--font-body);
    font-size: 1rem;
    background: #fff;
}
.wpcf7-form input:focus, .wpcf7-form textarea:focus, .wpcf7-form select:focus {
    outline: 2px solid var(--color-primary);
    outline-offset: 1px;
}
.wpcf7-form .wpcf7-acceptance label { display: flex; align-items: flex-start; gap: 8px; font-weight: 400; font-size: 0.85rem; color: var(--color-text-muted); }
.wpcf7-form input[type="submit"] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 14px 28px;
    border-radius: 999px;
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 0.95rem;
    border: 2px solid transparent;
    cursor: pointer;
    background: var(--color-accent);
    color: #fff;
    box-shadow: var(--shadow-md);
    transition: transform 0.15s ease, background 0.15s ease;
}
.wpcf7-form input[type="submit"]:hover { background: var(--color-accent-dark); transform: translateY(-2px); }
.wpcf7-not-valid-tip { color: var(--color-accent); font-size: 0.82rem; margin-top: 4px; }
.wpcf7-response-output {
    padding: 16px 20px;
    border-radius: var(--radius-sm);
    margin: 0 0 24px;
    font-size: 0.95rem;
    border: 1px solid var(--color-border);
}
.wpcf7-mail-sent-ok { background: #e7f6ec; color: #1c6b3a; border-color: #b9e3c6; }
.wpcf7-validation-errors, .wpcf7-mail-sent-ng, .wpcf7-spam-blocked { background: #fbe9ea; color: #9a1c28; border-color: #f1c0c4; }

/* Im Original-Content eingebetteter "großer Button" (Reparaturauftrag-Link) */
.prose .big-button { margin: 28px 0; }
.prose .big-button a {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 14px 28px;
    border-radius: 999px;
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 0.95rem;
    text-decoration: none;
    background: var(--color-accent);
    color: #fff;
    box-shadow: var(--shadow-md);
    transition: transform 0.15s ease, background 0.15s ease;
}
.prose .big-button a:hover { background: var(--color-accent-dark); transform: translateY(-2px); text-decoration: none; }

/* Legal / Impressum-Datenschutz */
.legal-page .prose { max-width: 820px; }

/* Utility */
.text-center { text-align: center; }
.mt-0 { margin-top: 0; }
.small { font-size: 0.85rem; }

/* =========================================================
   Header / Navigation
   ========================================================= */
.site-header {
    position: sticky;
    top: 0;
    z-index: 100;
    background: rgba(255, 255, 255, 0.97);
    backdrop-filter: blur(6px);
    box-shadow: 0 2px 16px rgba(11, 18, 32, 0.06);
    transition: box-shadow 0.2s ease;
}
.site-header::after {
    content: "";
    position: absolute;
    left: 0; right: 0; bottom: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--color-gold-dark) 0%, var(--color-gold-light) 50%, var(--color-gold-dark) 100%);
}
.site-header .header-inner {
    max-width: 1180px;
    margin: 0 auto;
    padding: 14px 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
}
.site-header .logo-link { display: flex; align-items: center; flex-shrink: 0; }
.site-header .logo-link img { height: 56px; width: auto; }

.site-nav { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.site-nav .nav-item { position: relative; }
.site-nav a.nav-link {
    position: relative;
    display: block;
    padding: 10px 14px;
    color: var(--color-primary);
    font-family: 'Poppins', 'Segoe UI', sans-serif;
    font-weight: 500;
    font-size: 0.94rem;
    border-radius: 999px;
    transition: background 0.15s ease, color 0.15s ease;
}
.site-nav a.nav-link::after {
    content: "";
    position: absolute;
    left: 14px;
    right: 14px;
    bottom: 5px;
    height: 2px;
    background: linear-gradient(90deg, var(--color-gold-dark), var(--color-gold-light));
    border-radius: 2px;
    transform: scaleX(0);
    transform-origin: center;
    transition: transform 0.25s ease;
}
.site-nav a.nav-link:hover,
.site-nav a.nav-link[aria-current="page"] {
    background: rgba(64, 60, 143, 0.06);
    color: var(--color-primary-dark);
    text-decoration: none;
}
.site-nav a.nav-link:hover::after,
.site-nav a.nav-link[aria-current="page"]::after {
    transform: scaleX(1);
}

/* top:100% ohne Lücke zum Menüpunkt, damit der Hover beim Herunterfahren zum
   Dropdown nicht abreißt (eine transparente Lücke würde das Menü sofort schließen,
   bevor man die Unterpunkte erreicht). Der optische Abstand kommt stattdessen
   über das eigene Padding der Box. */
.nav-item.has-dropdown .dropdown {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 260px;
    background: #ffffff;
    border-radius: 12px;
    box-shadow: 0 20px 45px rgba(0,0,0,0.25);
    padding: 16px 10px 10px;
}
.nav-item.has-dropdown:hover .dropdown,
.nav-item.has-dropdown:focus-within .dropdown,
.nav-item.has-dropdown.dropdown-open .dropdown { display: block; }
.dropdown a { display: block; padding: 10px 14px; border-radius: 8px; color: #1b1b2a; font-size: 0.92rem; }
.dropdown a:hover { background: #f2f2fb; text-decoration: none; }

.header-cta { flex-shrink: 0; display: flex; align-items: center; gap: 8px; }
.header-cta a.phone-cta {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    background: #c30022;
    color: #fff;
    padding: 9px 16px;
    border-radius: 999px;
    font-weight: 600;
    font-size: 0.86rem;
    white-space: nowrap;
}
.header-cta a.phone-cta:hover { background: #97001a; text-decoration: none; }
.header-cta a.phone-cta svg { width: 15px; height: 15px; }

.header-cta a.whatsapp-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: #25d366;
    color: #fff;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.header-cta a.whatsapp-cta:hover { transform: translateY(-2px); box-shadow: 0 6px 16px rgba(37, 211, 102, 0.4); }
.header-cta a.whatsapp-cta svg { width: 19px; height: 19px; }

.nav-toggle { display: none; background: none; border: none; color: var(--color-primary); font-size: 1.6rem; cursor: pointer; padding: 6px 10px; }

@media (max-width: 900px) {
    .nav-toggle { display: block; }
    .site-nav {
        display: flex;
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        background: #ffffff;
        flex-direction: column;
        flex-wrap: nowrap;
        align-items: stretch;
        padding: 0 12px;
        border-bottom: 1px solid var(--color-border);
        box-shadow: 0 12px 24px rgba(11, 18, 32, 0.08);
        max-height: 0;
        opacity: 0;
        overflow: hidden;
        pointer-events: none;
        transform: translateY(-6px);
        transition: max-height 0.32s ease, opacity 0.22s ease, transform 0.22s ease, padding 0.32s ease;
    }
    .site-nav.open {
        max-height: 80vh;
        opacity: 1;
        overflow-y: auto;
        pointer-events: auto;
        transform: translateY(0);
        padding: 12px;
    }
    .site-nav .nav-item { width: 100%; }
    .nav-item.has-dropdown .dropdown { position: static; box-shadow: none; background: var(--color-bg-light); margin-top: 4px; }
    .dropdown a:hover { background: #eceafa; }
    .header-cta .phone-label { display: none; }
    .header-cta a.whatsapp-cta { width: 34px; height: 34px; }
    .header-cta a.whatsapp-cta svg { width: 17px; height: 17px; }

    /* Ohne Rufnummer-Text wird der Anruf-Button zum reinen Icon-Kreis (wie WhatsApp),
       statt der breiteren Pillenform mit ungenutztem Innenabstand. */
    .header-cta a.phone-cta {
        width: 34px;
        height: 34px;
        padding: 0;
        justify-content: center;
        gap: 0;
    }
    .header-cta a.phone-cta svg { width: 16px; height: 16px; }
}

/* Sehr schmale Displays: Logo, Abstände und Kopfzeilen-Innenabstand zusätzlich verkleinern,
   damit Logo + Menü-Button + WhatsApp + Telefon garantiert nebeneinander Platz finden. */
@media (max-width: 420px) {
    .site-header .header-inner { padding: 10px 12px; gap: 10px; }
    .site-header .logo-link img { height: 40px; }
    .header-cta { gap: 6px; }
    .nav-toggle { padding: 4px 6px; font-size: 1.4rem; }
}

/* =========================================================
   Footer
   ========================================================= */
.site-footer { background: #0b1220; color: #b7bbd6; padding: 56px 0 24px; }
.site-footer .footer-inner { max-width: 1180px; margin: 0 auto; padding: 0 24px; }
.footer-grid {
    display: grid;
    grid-template-columns: 1.4fr 1fr 1fr;
    gap: 40px;
    padding-bottom: 36px;
    border-bottom: 1px solid rgba(255,255,255,0.1);
}
.footer-col h4 {
    color: #fff;
    font-family: 'Poppins', 'Segoe UI', sans-serif;
    font-size: 0.95rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 16px;
}
.footer-col img.footer-logo { height: 46px; margin-bottom: 14px; }
.footer-col p { margin: 0 0 8px; font-size: 0.9rem; }
.footer-col ul { list-style: none; margin: 0; padding: 0; }
.footer-col ul li { margin-bottom: 8px; }
.footer-col a { color: #b7bbd6; font-size: 0.9rem; text-decoration: none; }
.footer-col a:hover { color: #ffffff; text-decoration: underline; }

.footer-bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    padding-top: 20px;
    font-size: 0.82rem;
}
.footer-bottom a { color: #b7bbd6; }
.footer-bottom a:hover { color: #fff; }
.footer-legal-links { display: flex; gap: 18px; flex-wrap: wrap; }

@media (max-width: 720px) {
    .footer-grid { grid-template-columns: 1fr; gap: 28px; }
    .contact-grid { grid-template-columns: 1fr; }
}

/* =========================================================
   Cookie-Banner
   Mobil: schwebende Karte unten (volle Breite).
   Desktop: zentriertes, breiteres Modal mit abgedunkeltem Hintergrund.
   ========================================================= */
.cookie-backdrop {
    position: fixed;
    inset: 0;
    z-index: 299;
    background: rgba(11, 18, 32, 0.55);
}
.cookie-backdrop[hidden] { display: none; }

body.cookie-lock { overflow: hidden; }

.cookie-banner {
    position: fixed;
    left: 12px;
    right: 12px;
    bottom: 12px;
    z-index: 300;
    width: auto;
    max-width: none;
    max-height: calc(100vh - 24px);
    overflow-y: auto;
    background: linear-gradient(180deg, #fffdf8 0%, #ffffff 14%);
    border: 1px solid var(--color-gold);
    border-radius: var(--radius-md);
    box-shadow: 0 0 0 1px rgba(205, 160, 84, 0.12), var(--shadow-lg);
    padding: 22px 20px;
}
.cookie-banner[hidden] { display: none; }

/* Ab Tablet/Desktop-Breite: zentriertes, breiteres Modal statt Karte unten links. */
@media (min-width: 561px) {
    .cookie-banner {
        left: 50%;
        right: auto;
        bottom: auto;
        top: 50%;
        transform: translate(-50%, -50%);
        width: 640px;
        max-width: min(92vw, 640px);
        max-height: min(88vh, 560px);
        padding: 34px 38px 30px;
    }
    .cookie-categories { grid-template-columns: 1fr 1fr; }
    .cookie-categories .cookie-category:first-child { grid-column: 1 / -1; }
    .cookie-banner-actions { flex-direction: row; flex-wrap: wrap; }
    .cookie-banner-actions .btn { width: auto; flex: 1 1 auto; }
    .cookie-reject-link { flex-basis: 100%; text-align: center; margin-top: 2px; }
}
.cookie-banner-icon {
    width: 46px;
    height: 46px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
    box-shadow: 0 0 0 3px rgba(205, 160, 84, 0.25);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 14px;
}
.cookie-banner-icon svg { width: 22px; height: 22px; }
.cookie-banner h3 { margin-bottom: 8px; font-size: 1.05rem; }
.cookie-banner p { margin: 0 0 18px; font-size: 0.88rem; color: var(--color-text-muted); line-height: 1.55; }
.cookie-banner a { color: var(--color-primary); text-decoration: underline; font-weight: 600; }

.cookie-categories { display: grid; gap: 12px; margin-bottom: 20px; }
.cookie-category {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 10px 12px;
    background: var(--color-bg-light);
    border-radius: var(--radius-sm);
    cursor: pointer;
}
.cookie-category input {
    margin-top: 3px;
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    accent-color: var(--color-primary);
}
.cookie-category input:disabled { accent-color: var(--color-text-muted); cursor: not-allowed; }
.cookie-category strong { display: block; font-size: 0.86rem; color: var(--color-text); }
.cookie-category small { display: block; font-size: 0.78rem; color: var(--color-text-muted); margin-top: 2px; line-height: 1.4; }

.cookie-banner-actions { display: flex; flex-direction: column; gap: 10px; }
.cookie-banner-actions .btn { width: 100%; justify-content: center; padding: 12px 20px; font-size: 0.88rem; }
.cookie-reject-link {
    background: none;
    border: none;
    color: var(--color-text-muted);
    font-family: var(--font-body);
    font-size: 0.82rem;
    text-decoration: underline;
    cursor: pointer;
    padding: 4px;
}
.cookie-reject-link:hover { color: var(--color-text); }

/* =========================================================
   Scroll-Reveal: Überschriften/Karten blenden sanft ein, sobald sie beim
   Scrollen in den sichtbaren Bereich kommen (per IntersectionObserver in main.js).
   Inhalt steht von Anfang an im DOM - nur die Optik wird animiert, kein
   Nachteil für Barrierefreiheit/SEO, falls JS mal nicht laeuft.
   ========================================================= */
.reveal {
    opacity: 0;
    transform: translateY(22px);
    transition: opacity 0.6s ease, transform 0.6s ease;
}
.reveal.is-visible { opacity: 1; transform: translateY(0); }
.reveal-group .reveal:nth-child(2) { transition-delay: 0.08s; }
.reveal-group .reveal:nth-child(3) { transition-delay: 0.16s; }
.reveal-group .reveal:nth-child(4) { transition-delay: 0.24s; }
.reveal-group .reveal:nth-child(5) { transition-delay: 0.32s; }

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    .card, .btn { transition: none; }
    .reveal { opacity: 1; transform: none; transition: none; }
    .cta-band::after { animation: none; }
}