/* =============================================================================
   AskAERO – askaero.de (Plattform). Farben und Schrift wie AERO
   (frontend/src/styles.css), hell und dunkel nach Geräteeinstellung (B4).
   Bewegung nur mit JavaScript (html.js) und ohne „reduzierte Bewegung“ –
   ohne beides steht alles sofort sichtbar da.
   Schriftgrößen in rem (1 rem = 16 px), damit die Schriftgröße des Browsers
   greift; Abstände und Umbrüche bleiben in px.
   ============================================================================= */

:root {
    --bg: #f4f5f8;
    --flaeche: #ffffff;
    --flaeche-2: #fbfbfd;
    --flaeche-3: #eceef3;
    --linie: rgba(20, 22, 34, .12);
    --linie-stark: rgba(20, 22, 34, .26);
    --text: #14161d;
    --text-leise: #4e5364;
    --text-still: #5c6274;   /* 5,6:1 auf --bg, auch im Petrol-Schein des Abschlusses über 4,5:1 */
    --akzent: #00756c;
    --akzent-hell: #005c55;
    --akzent-weich: rgba(0, 117, 108, .09);
    --akzent-linie: rgba(0, 117, 108, .32);
    --auf-akzent: #ffffff;
    --schein: rgba(0, 150, 138, .16);
    --schatten: 0 1px 2px rgba(20, 22, 34, .05), 0 12px 40px -12px rgba(20, 22, 34, .18);
    --warnung: #b42318;
    --kopf-glas: rgba(244, 245, 248, .78);
    --reiter-an: #ffffff;
    --reiter-schatten: 0 1px 3px rgba(0, 0, 0, .12);
    --rund-karte: 24px;
    --rund-pille: 9999px;

    /* Schriftstufen – jede mit einer festen Rolle (vorher 14 Größen, viele nur 1 px auseinander). */
    --t-display: clamp(2.375rem, 5.4vw, 4.125rem);   /* 38–66: Hero-Frage */
    --t-abschluss: clamp(1.875rem, 4.4vw, 3.25rem);  /* 30–52: Abschluss */
    --t-titel: clamp(1.875rem, 4vw, 2.875rem);       /* 30–46: Abschnittstitel */
    --t-unter: 1.75rem;      /* 28: Tafel-Titel */
    --t-h3: 1.3125rem;       /* 21: Karten- und Schritt-Titel */
    --t-lead: 1.125rem;      /* 18: Einleitungen */
    --t-text: 1.0625rem;     /* 17: Fließtext */
    --t-klein: .9375rem;     /* 15: Knöpfe, Navigation, Karten */
    --t-mini: .8125rem;      /* 13: Kennungen, Fuß */
    color-scheme: light;
}
@media (prefers-color-scheme: dark) {
    :root {
        --bg: #121214;
        --flaeche: #1d1d22;
        --flaeche-2: #18181c;
        --flaeche-3: #2b2b33;
        --linie: rgba(255, 255, 255, .08);
        --linie-stark: rgba(255, 255, 255, .18);
        --text: #ffffff;
        --text-leise: #a8a8b3;
        --text-still: #8c8c98;
        --akzent: #00d1c1;
        --akzent-hell: #5ce6db;
        --akzent-weich: rgba(0, 209, 193, .10);
        --akzent-linie: rgba(0, 209, 193, .32);
        --auf-akzent: #0b1413;
        --schein: rgba(0, 209, 193, .13);
        --schatten: 0 1px 2px rgba(0, 0, 0, .4), 0 18px 50px -16px rgba(0, 0, 0, .7);
        --warnung: #ff8a7a;
        --kopf-glas: rgba(18, 18, 20, .72);
        /* gewählter Tab heller als die Leiste – erhaben wie im Hellen, nicht als Loch */
        --reiter-an: #45454f;
        --reiter-schatten: 0 1px 2px rgba(0, 0, 0, .5);
        color-scheme: dark;
    }
}
/* „Kontrast erhöhen“ am Gerät: Linien und leise Texte deutlich kräftiger. */
@media (prefers-contrast: more) {
    :root {
        --linie: rgba(20, 22, 34, .45);
        --linie-stark: rgba(20, 22, 34, .75);
        --text-leise: #2f3341;
        --text-still: #3f4452;
        --akzent-linie: rgba(0, 117, 108, .7);
    }
}
@media (prefers-contrast: more) and (prefers-color-scheme: dark) {
    :root {
        --linie: rgba(255, 255, 255, .4);
        --linie-stark: rgba(255, 255, 255, .7);
        --text-leise: #d6d6de;
        --text-still: #c4c4ce;
        --akzent-linie: rgba(0, 209, 193, .7);
    }
}

/* ── Grundlagen ─────────────────────────────────────────────────────────── */
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 88px; }
body {
    margin: 0;
    background: var(--bg);
    color: var(--text);
    font-family: "Segoe UI", -apple-system, BlinkMacSystemFont, Roboto, Helvetica, Arial, sans-serif;
    font-size: var(--t-text);
    line-height: 1.55;
    overflow-x: hidden;
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--akzent); }
h1, h2, h3 { line-height: 1.15; }
/* Überschriften ohne einzelnes Wort in der letzten Zeile; Fließtext ohne Hurenkinder. */
h2, h3, .claim { text-wrap: balance; }
.held-unter, .abschnitt-text, .tafel-text p, .fall p, .schritte p { text-wrap: pretty; }
.breite { width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 32px; }
.nur-vorlesen { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.sprung { position: absolute; left: 16px; top: -60px; z-index: 100; padding: 10px 18px; border-radius: var(--rund-pille); background: var(--akzent); color: var(--auf-akzent); font-weight: 600; }
.sprung:focus { top: 12px; }
:focus-visible { outline: 3px solid var(--akzent); outline-offset: 3px; }

.sy { flex: none; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.sy .sy-f { fill: var(--akzent); stroke: none; opacity: .9; }
.sy .sy-a { stroke: var(--akzent); }

.testband {
    background: repeating-linear-gradient(-45deg, var(--akzent-weich) 0 12px, transparent 12px 24px), var(--flaeche-3);
    color: var(--text-leise); font-size: var(--t-mini); font-weight: 600; text-align: center; padding: 6px 16px;
}

/* ── Knöpfe (pillenförmig, mind. 44 px) ─────────────────────────────────── */
.knopf {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    min-height: 44px; padding: 0 22px; border-radius: var(--rund-pille);
    font: inherit; font-size: var(--t-klein); font-weight: 600; text-decoration: none; cursor: pointer;
    border: 1px solid transparent; white-space: nowrap;
    transition: background-color .2s, border-color .2s, transform .2s, filter .2s;
}
.knopf:active { transform: scale(.98); }
.knopf-voll { background: var(--akzent); color: var(--auf-akzent); }
.knopf-voll:hover { filter: brightness(1.08); }
.knopf-leise { background: transparent; color: var(--text); border-color: var(--linie-stark); }
.knopf-leise:hover { border-color: var(--akzent); color: var(--akzent); }
.knopf-gross { min-height: 52px; padding: 0 28px; font-size: var(--t-text); }
.knopf-breit { width: 100%; }

/* ── Kopf ──────────────────────────────────────────────────────────────── */
.kopf { position: sticky; top: 0; z-index: 50; transition: background-color .3s, border-color .3s; border-bottom: 1px solid transparent; }
.gescrollt .kopf { background: var(--kopf-glas); -webkit-backdrop-filter: saturate(160%) blur(16px); backdrop-filter: saturate(160%) blur(16px); border-bottom-color: var(--linie); }
/* „Transparenz reduzieren“ oder „Kontrast erhöhen“: deckender Kopf statt Glas. */
@media (prefers-reduced-transparency: reduce), (prefers-contrast: more) {
    .gescrollt .kopf { background: var(--bg); -webkit-backdrop-filter: none; backdrop-filter: none; }
}
.kopf-innen { max-width: 1200px; margin: 0 auto; padding: 14px 32px; display: flex; align-items: center; gap: 32px; }
/* Die Marke bleibt in px: Schriftzug und SVG-Wortmarke müssen zusammen passen. */
.marke { display: inline-flex; align-items: center; gap: 5px; color: var(--text); text-decoration: none; flex: none; min-height: 44px; }
.marke-ask { font-size: 20px; font-weight: 600; letter-spacing: -.01em; }
.wortmarke { height: 18px; width: auto; fill: currentColor; }
.wortmarke .wm-lambda { fill: var(--akzent); }
.nav { display: flex; gap: 4px; flex: 1; }
.nav a {
    color: var(--text-leise); text-decoration: none; font-size: var(--t-klein); font-weight: 500; white-space: nowrap;
    padding: 10px 14px; border-radius: var(--rund-pille); min-height: 44px; display: inline-flex; align-items: center;
}
.nav a:hover, .nav a[aria-current="page"] { color: var(--text); background: var(--akzent-weich); }
/* „Demo anfragen“ im Menü: nur im Handy-Menü sichtbar (siehe max-width 768px). */
.nav a.nav-aktion { display: none; }
.kopf-aktionen { display: flex; align-items: center; gap: 10px; }
.menue-knopf { display: none; }

/* ── Hero ──────────────────────────────────────────────────────────────── */
.held { position: relative; padding: 56px 0 72px; overflow: hidden; }
/* Hintergrund: die Higgsfield-Welle (Motiv 2, gewählt am 01.11.2026), hell und
   dunkel, treibt sehr langsam. Nur transform – bei reduzierter Bewegung steht sie. */
.held-kunst { position: absolute; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; }
.held-kunst::before {
    content: ""; position: absolute; inset: -6%;
    background: url("/assets/bilder/held-welle-hell.webp") right bottom / cover no-repeat;
    transform-origin: 75% 70%;
    animation: welle-treibt 38s ease-in-out infinite alternate;
    will-change: transform;
}
.held-kunst::after {
    /* links unter dem Text und unten zum nächsten Abschnitt in den Seitengrund ausblenden */
    content: ""; position: absolute; inset: 0;
    background:
        linear-gradient(90deg, var(--bg) 0%, var(--bg) 18%, transparent 52%),
        linear-gradient(0deg, var(--bg) 0%, transparent 22%);
}
@media (prefers-color-scheme: dark) {
    .held-kunst::before { background-image: url("/assets/bilder/held-welle-dunkel.webp"); }
}
@keyframes welle-treibt {
    0%   { transform: scale(1) translate3d(0, 0, 0); }
    50%  { transform: scale(1.07) translate3d(-1.6%, -1.2%, 0) rotate(-.5deg); }
    100% { transform: scale(1.04) translate3d(1.2%, -2.2%, 0) rotate(.6deg); }
}
.held-innen { display: grid; grid-template-columns: 1.08fr .92fr; gap: 56px; align-items: center; }
.zustand {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 6px 14px; border-radius: var(--rund-pille);
    background: var(--akzent-weich); color: var(--akzent-hell); font-size: var(--t-klein); font-weight: 600;
}
.zustand::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
/* Frage und Claim bilden zusammen die h1 – Aussehen wie zwei eigene Zeilen. */
.held-titel { margin: 0; font: inherit; line-height: 1.15; }
.held-titel .frage, .held-titel .claim { display: block; }
.frage { margin: 22px 0 0; font-size: var(--t-display); line-height: 1.05; font-weight: 700; letter-spacing: -.03em; }
.frage em { font-style: italic; color: var(--akzent); }
.zusammen { white-space: nowrap; }
.wechsel { display: inline-grid; vertical-align: bottom; overflow: hidden; padding-bottom: .1em; margin-bottom: -.1em; }
.wechsel > span { grid-area: 1 / 1; color: var(--akzent); }
.js .wechsel > span { transition: transform .6s cubic-bezier(.2, .8, .2, 1), opacity .6s ease; }
.wechsel > span:not(.an) { transform: translateY(75%); opacity: 0; }
.wechsel > span.weg { transform: translateY(-75%); opacity: 0; }
.claim { margin: 26px 0 0; font-size: clamp(1.25rem, 2.2vw, 1.625rem); font-weight: 600; letter-spacing: -.01em; }
.held-unter { margin: 12px 0 0; color: var(--text-leise); font-size: var(--t-lead); max-width: 50ch; }
.held-knoepfe { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }

.held-bild { position: relative; perspective: 1400px; }
.produkt-karte {
    margin: 0; padding: 26px; border-radius: var(--rund-karte);
    background: var(--flaeche); border: 1px solid var(--linie); box-shadow: var(--schatten);
    /* --tiefe/--neigung setzt askaero.js beim Scrollen (leichtes Gegengleiten). */
    transform: translateY(var(--tiefe, 0px)) rotateY(var(--neigung, -7deg)) rotateX(3deg); transform-origin: 60% 50%;
    will-change: transform;
}
.pk-kopf { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.pk-code {
    font-family: "Consolas", "SF Mono", monospace; font-size: var(--t-mini); letter-spacing: .04em;
    color: var(--akzent); background: var(--akzent-weich); border: 1px solid var(--akzent-linie);
    padding: 3px 10px; border-radius: var(--rund-pille);
}
.pk-kategorie { display: inline-flex; align-items: center; gap: 6px; font-size: var(--t-mini); color: var(--text-still); }
.pk-titel { margin: 14px 0 0; font-size: var(--t-h3); font-weight: 700; line-height: 1.25; }
.pk-sofort { margin: 14px 0 0; padding: 12px 14px; border-radius: 14px; background: var(--akzent-weich); font-size: var(--t-klein); color: var(--text); }
.pk-schritte { list-style: none; margin: 16px 0 0; padding: 0; display: grid; gap: 10px; }
.pk-schritte li { display: flex; gap: 12px; align-items: flex-start; font-size: var(--t-klein); color: var(--text-leise); }
.pk-schritte strong { display: block; color: var(--text); font-weight: 600; }
.pk-nr {
    flex: none; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center;
    background: var(--flaeche-3); color: var(--text); font-size: var(--t-mini); font-weight: 700;
}
.pk-fuss { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--linie); display: flex; align-items: center; gap: 8px; font-size: var(--t-mini); color: var(--text-still); }

/* Bereichs-Chips: jeder führt zum passenden Tab (askaero.js, data-tab-ziel),
   ohne JavaScript einfach zum Abschnitt. */
.bereich-chips { list-style: none; margin-top: 64px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.bereich-chips li { display: flex; }
.chip {
    flex: 1; display: flex; gap: 14px; align-items: flex-start; padding: 18px;
    border-radius: 20px; background: var(--flaeche); border: 1px solid var(--linie);
    font-size: var(--t-klein); color: var(--text-leise); text-decoration: none;
    transition: border-color .2s;
}
.chip strong { display: block; color: var(--text); font-size: var(--t-text); }
@media (hover: hover) and (pointer: fine) {
    .chip:hover { border-color: var(--akzent-linie); }
}
/* Buchstaben nur getönt: die volle Akzentfläche bleibt „Demo anfragen“ vorbehalten. */
.chip-kurz {
    flex: none; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center;
    background: var(--akzent-weich); color: var(--akzent-hell); box-shadow: inset 0 0 0 1px var(--akzent-linie);
    font-weight: 700; font-size: var(--t-text);
}

/* ── Vertrauensleiste ─────────────────────────────────────────────────── */
.vertrauen { border-top: 1px solid var(--linie); border-bottom: 1px solid var(--linie); background: var(--flaeche-2); }
.vertrauen-liste { list-style: none; margin: 0 auto; padding-top: 40px; padding-bottom: 40px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; }
.vertrauen-liste li { display: grid; gap: 2px; align-content: start; }
.v-zahl { font-size: 3.25rem; font-weight: 700; line-height: 1; color: var(--akzent); letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.v-einheit { font-weight: 600; font-size: var(--t-text); margin-top: 8px; }
.v-text { color: var(--text-leise); font-size: var(--t-klein); }

/* ── Abschnitte ───────────────────────────────────────────────────────── */
.abschnitt { padding: 104px 0; }
.abschnitt-leise { background: var(--flaeche-2); border-top: 1px solid var(--linie); border-bottom: 1px solid var(--linie); }
.abschnitt-titel { margin: 0; font-size: var(--t-titel); font-weight: 700; letter-spacing: -.025em; max-width: 22ch; }
.abschnitt-hinweis { margin: 12px 0 0; color: var(--text-still); font-size: var(--t-klein); }
.abschnitt-text { margin: 16px 0 0; color: var(--text-leise); font-size: var(--t-lead); max-width: 48ch; }

/* Tabs */
.tabs { margin-top: 40px; }
.tab-leiste {
    display: inline-flex; gap: 4px; padding: 5px; border-radius: var(--rund-pille);
    background: var(--flaeche-3); max-width: 100%; overflow-x: auto; scrollbar-width: none;
}
.tab-leiste::-webkit-scrollbar { display: none; }
.tab-leiste [role="tab"] {
    display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 18px;
    border: 0; border-radius: var(--rund-pille); background: transparent; color: var(--text-leise);
    font: inherit; font-size: var(--t-klein); font-weight: 600; cursor: pointer; white-space: nowrap;
    transition: background-color .25s, color .25s, box-shadow .25s;
}
.tab-leiste [role="tab"]:hover { color: var(--text); }
/* Fokusring knapp außen: passt in die 5 px Innenabstand und wird nicht beschnitten. */
.tab-leiste [role="tab"]:focus-visible { outline-offset: 1px; }
/* Gewählt: hellere Pille UND ein Ring in Akzentfarbe – nicht nur Füllfarbe (4,8:1 zur Leiste). */
.tab-leiste [role="tab"][aria-selected="true"] { background: var(--reiter-an); color: var(--text); box-shadow: var(--reiter-schatten), inset 0 0 0 2px var(--akzent); }
/* Text über dem Bild, das Bildschirmfoto in voller Breite – so bleibt die
   echte Oberfläche lesbar (vorher Maßstab 45 % neben dem Text). */
.tafel { display: grid; gap: 28px; align-items: start; margin-top: 36px; }
.tafel[hidden] { display: none; }
.tafel:focus-visible { outline-offset: 12px; border-radius: var(--rund-karte); }
.ohne-js .tafel + .tafel { margin-top: 64px; }
.js .tafel:not([hidden]) .tafel-text, .js .tafel:not([hidden]) .screen { animation: tafel-rein .55s cubic-bezier(.2, .8, .2, 1) both; }
.js .tafel:not([hidden]) .screen { animation-delay: .06s; }
@keyframes tafel-rein { from { transform: translateY(14px); opacity: .001; } to { transform: none; opacity: 1; } }
.tafel-text { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 48px; align-items: end; }
.tafel-text h3 { margin: 0; font-size: var(--t-unter); letter-spacing: -.02em; }
.tafel-text p { margin: 0; color: var(--text-leise); font-size: var(--t-lead); }
.screen {
    display: block; border-radius: 20px; overflow: hidden; border: 1px solid var(--linie);
    /* ruhiger Platzhalter, solange das Foto lädt */
    box-shadow: var(--schatten); background: var(--flaeche-3); aspect-ratio: 16 / 10;
}
.screen img { width: 100%; height: 100%; object-fit: cover; object-position: top left; }
.screen-platzhalter { display: grid; place-content: center; justify-items: center; gap: 10px; color: var(--text-still); font-size: var(--t-klein); }

/* Anwendungsfälle (keine Links – daher kein Hover-Hub) */
.faelle { list-style: none; margin: 40px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.fall { padding: 26px; border-radius: var(--rund-karte); background: var(--flaeche); border: 1px solid var(--linie); }
.fall-symbol { display: inline-grid; place-items: center; width: 52px; height: 52px; border-radius: 16px; background: var(--akzent-weich); color: var(--text); }
.fall h3 { margin: 16px 0 0; font-size: var(--t-h3); }
.fall p { margin: 6px 0 0; color: var(--text-leise); font-size: var(--t-klein); }

/* Sicherheit */
.sicherheit-innen { display: grid; grid-template-columns: 1.1fr .9fr; gap: 64px; align-items: center; }
.sicherheit-liste { list-style: none; margin: 28px 0 0; padding: 0; display: grid; gap: 14px; }
.sicherheit-liste li { display: flex; gap: 14px; align-items: flex-start; font-size: var(--t-text); }
.sicherheit-liste .sy { margin-top: 1px; color: var(--text); }
.trennung { display: grid; gap: 14px; padding: 28px; border-radius: 28px; background: var(--flaeche-2); border: 1px solid var(--linie); }
.trennung-db {
    display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; column-gap: 14px; align-items: center;
    padding: 18px 20px; border-radius: 18px; background: var(--flaeche); border: 1px solid var(--linie);
}
.trennung-db .sy { grid-row: span 2; width: 36px; height: 36px; padding: 8px; border-radius: 12px; background: var(--akzent-weich); box-sizing: content-box; }
.td-name { font-weight: 700; }
.td-db { color: var(--text-still); font-size: var(--t-mini); font-family: "Consolas", "SF Mono", monospace; }
.trennung-db:first-child { border-color: var(--akzent-linie); }

/* Startschritte mit Leitlinie */
.schritte { list-style: none; margin: 48px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; position: relative; }
.schritte::before {
    content: ""; position: absolute; top: 26px; left: 26px; right: calc(33.3% - 26px); height: 2px;
    background: linear-gradient(90deg, var(--akzent), var(--akzent-linie));
    transform-origin: left center;
}
.js .schritte::before { transform: scaleX(0); transition: transform 1.2s cubic-bezier(.2, .8, .2, 1) .2s; }
.js .schritte.sichtbar::before { transform: scaleX(1); }
.schritte li { position: relative; }
/* Nummern als Ring statt voller Akzentfläche (nicht klickbar). Der Grund ist
   deckend, damit die Leitlinie nicht durchscheint. */
.schritt-nr {
    position: relative; display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%;
    background: linear-gradient(var(--akzent-weich), var(--akzent-weich)), var(--bg);
    color: var(--akzent-hell); font-weight: 700; font-size: 1.25rem;
    box-shadow: inset 0 0 0 1.5px var(--akzent), 0 0 0 8px var(--bg);
}
.schritte h3 { margin: 20px 0 0; font-size: var(--t-h3); }
.schritte p { margin: 6px 0 0; color: var(--text-leise); }

/* Abschluss */
.abschluss { position: relative; padding: 112px 0; text-align: center; overflow: hidden; }
.abschluss::before {
    content: ""; position: absolute; inset: 0; z-index: -1;
    background: radial-gradient(46rem 22rem at 50% 100%, var(--schein), transparent 70%);
}
.abschluss-innen { display: grid; justify-items: center; }
.abschluss h2 { margin: 0; font-size: var(--t-abschluss); letter-spacing: -.025em; max-width: 20ch; }
.abschluss p { margin: 16px 0 28px; color: var(--text-leise); font-size: var(--t-lead); }
.abschluss .abschluss-mail { margin: 18px 0 0; font-size: var(--t-klein); color: var(--text-still); }
/* Mail-Link: dunklerer Akzent (6:1 im Schein) und 44 px hohe Trefferfläche ohne Layoutsprung. */
.abschluss-mail a { color: var(--akzent-hell); display: inline-block; padding: 12px 6px; margin: -12px -6px; }

/* ── Fuß ───────────────────────────────────────────────────────────────── */
.fuss { border-top: 1px solid var(--linie); background: var(--flaeche-2); }
.fuss-innen { max-width: 1200px; margin: 0 auto; padding: 48px 32px 24px; display: grid; grid-template-columns: 1.6fr 1fr 1fr; gap: 32px; }
.fuss-marke p { margin: 10px 0 0; color: var(--text-leise); font-size: var(--t-klein); max-width: 28ch; }
.fuss-spalte { display: grid; align-content: start; gap: 2px; }
/* ohne Versalien: „AskAERO“ bleibt in seiner Schreibweise */
.fuss-spalte h2 { margin: 0 0 8px; font-size: var(--t-mini); font-weight: 600; color: var(--text-still); }
.fuss-spalte a { color: var(--text-leise); text-decoration: none; font-size: var(--t-klein); min-height: 44px; display: inline-flex; align-items: center; }
.fuss-spalte a:hover { color: var(--akzent); }
.fuss-zeile { max-width: 1200px; margin: 0 auto; padding: 16px 32px 32px; color: var(--text-still); font-size: var(--t-mini); }

/* ── Anmelde-Weiche ────────────────────────────────────────────────────── */
.anmelden { padding: 64px 16px 96px; display: grid; place-items: center; position: relative; }
.anmelden::before { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(36rem 24rem at 50% 0%, var(--schein), transparent 70%); }
.anmelden-karte { width: 100%; max-width: 520px; padding: 40px; border-radius: 28px; background: var(--flaeche); border: 1px solid var(--linie); box-shadow: var(--schatten); }
.anmelden-karte h1 { margin: 0; font-size: 2.125rem; letter-spacing: -.02em; }
.anmelden-text { margin: 8px 0 24px; color: var(--text-leise); }
.firmenfeld {
    display: flex; align-items: center; min-height: 56px; padding: 0 20px; border-radius: var(--rund-pille);
    background: var(--flaeche-3); border: 1px solid var(--linie); transition: border-color .2s, box-shadow .2s;
}
.firmenfeld:focus-within { border-color: var(--akzent); box-shadow: 0 0 0 4px var(--akzent-weich); }
.firmenfeld.fehlerhaft { border-color: var(--warnung); }
.firmenfeld input {
    flex: 1; min-width: 0; border: 0; background: transparent; color: var(--text); outline: none;
    font: inherit; font-size: var(--t-lead); font-weight: 600; text-align: right; padding: 0;
}
.firmenfeld input::placeholder { color: var(--text-still); font-weight: 500; }
.firmenfeld-endung { color: var(--text-leise); font-size: var(--t-lead); white-space: nowrap; }
.anmelden-klein { margin: 10px 4px 0; font-size: var(--t-klein); color: var(--text-still); }
.anmelden-fehler { display: flex; align-items: center; gap: 8px; margin: 12px 4px 0; color: var(--warnung); font-size: var(--t-klein); font-weight: 600; }
.anmelden-form .knopf { margin-top: 20px; }
.hilfe { margin-top: 32px; padding-top: 24px; border-top: 1px solid var(--linie); }
.hilfe h2 { margin: 0 0 8px; font-size: var(--t-text); }
.hilfe-punkt { border-bottom: 1px solid var(--linie); }
.hilfe-punkt summary {
    cursor: pointer; list-style: none; min-height: 48px; display: flex; align-items: center; justify-content: space-between;
    font-weight: 600; color: var(--text); font-size: var(--t-klein);
}
.hilfe-punkt summary::-webkit-details-marker { display: none; }
.hilfe-punkt summary::after { content: "+"; font-size: 1.375rem; font-weight: 400; color: var(--text-still); transition: transform .2s; }
.hilfe-punkt[open] summary::after { transform: rotate(45deg); }
.hilfe-punkt p { margin: 0 0 16px; color: var(--text-leise); font-size: var(--t-klein); }
.hilfe-kontakt { display: flex; align-items: center; gap: 8px; margin: 18px 0 0; font-size: var(--t-klein); color: var(--text-leise); }

/* ── Rechtsseiten, 404 ─────────────────────────────────────────────────── */
.recht { max-width: 760px; padding-top: 56px; padding-bottom: 96px; }
.recht h1 { font-size: 2.5rem; letter-spacing: -.02em; margin: 0 0 24px; }
.recht h2 { font-size: var(--t-lead); margin: 28px 0 6px; }
.recht p { margin: 0 0 10px; color: var(--text-leise); }
.leer-seite { padding-top: 96px; padding-bottom: 120px; }

/* ── Scroll-Einblenden (html.js setzt askaero.js) ──────────────────────── */
.js [data-einblenden] {
    opacity: 0; transform: translateY(20px);
    transition: opacity .7s ease, transform .8s cubic-bezier(.2, .8, .2, 1);
    transition-delay: calc(var(--v, 0) * 90ms);
}
.js [data-einblenden].sichtbar { opacity: 1; transform: none; }
.js .held-bild[data-einblenden] { transform: translateY(28px) scale(.98); }
.js .held-bild[data-einblenden].sichtbar { transform: none; }
[data-verzoegerung="1"] { --v: 1; } [data-verzoegerung="2"] { --v: 2; } [data-verzoegerung="3"] { --v: 3; }
[data-verzoegerung="4"] { --v: 4; } [data-verzoegerung="5"] { --v: 5; } [data-verzoegerung="6"] { --v: 6; }

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    .js [data-einblenden], .js .held-bild[data-einblenden] { opacity: 1; transform: none; transition: none; }
    .js .wechsel > span, .js .schritte::before { transition: none; }
    .js .tafel:not([hidden]) .tafel-text, .js .tafel:not([hidden]) .screen { animation: none; }
    .produkt-karte { transform: none; }
    .held-kunst::before { animation: none; }
}

/* Erzwungene Farben (Windows-Kontrastdesign): Füllung und Schatten fallen weg,
   der gewählte Tab bekommt deshalb die Systemfarbe für Auswahl. */
@media (forced-colors: active) {
    .tab-leiste [role="tab"][aria-selected="true"] { forced-color-adjust: none; background: SelectedItem; color: SelectedItemText; box-shadow: none; }
}

/* ── Handy (Pflicht: max-width 768px) ──────────────────────────────────── */
@media (max-width: 1024px) {
    .bereich-chips { grid-template-columns: repeat(2, 1fr); }
    .faelle { grid-template-columns: repeat(2, 1fr); }
}
/* Die Navigation wird etwas früher zum Menü als das Layout einspaltig (900),
   sonst bricht die Kopfzeile zwischen 901 und 940 px zweizeilig um. */
@media (max-width: 940px) {
    .nav { display: none; }
    .kopf-innen { gap: 12px; justify-content: space-between; }
    .menue-knopf {
        display: inline-grid; place-items: center; width: 44px; height: 44px; border-radius: 50%;
        border: 1px solid var(--linie-stark); background: transparent; color: var(--text); cursor: pointer;
    }
    .menue-strich, .menue-strich::before, .menue-strich::after { display: block; width: 18px; height: 2px; border-radius: 2px; background: currentColor; position: relative; transition: transform .25s, background-color .25s; }
    .menue-strich::before, .menue-strich::after { content: ""; position: absolute; left: 0; }
    .menue-strich::before { top: -6px; } .menue-strich::after { top: 6px; }
    .menue-offen .menue-strich { background: transparent; }
    .menue-offen .menue-strich::before { transform: translateY(6px) rotate(45deg); }
    .menue-offen .menue-strich::after { transform: translateY(-6px) rotate(-45deg); }
    .menue-offen .nav {
        display: grid; position: absolute; top: 100%; left: 16px; right: 16px; padding: 10px; gap: 2px;
        border-radius: 22px; background: var(--flaeche); border: 1px solid var(--linie); box-shadow: var(--schatten);
    }
    .menue-offen .nav a { font-size: var(--t-text); padding: 12px 16px; }
}
@media (max-width: 900px) {
    .held-innen, .sicherheit-innen { grid-template-columns: 1fr; }
    .held-bild { max-width: 560px; }
    .produkt-karte { transform: none; }
    /* Einspaltig läuft der Hero-Text über die ganze Breite. Er bekommt deshalb
       eigenen Seitengrund, der unter ihm in die Welle ausläuft – gebunden an den
       Text, nicht an Prozente der Abschnittshöhe, damit es auf jeder Breite
       passt (vorher lag der Text bei 769–900 px direkt auf der Welle). Die Welle
       bleibt unter und neben der Karte sichtbar. */
    .held-kunst::after { background: linear-gradient(0deg, var(--bg) 0%, transparent 16%); }
    .held-text { position: relative; }
    .held-text::before {
        content: ""; position: absolute; z-index: -1; pointer-events: none;
        top: -120px; bottom: -160px; left: -100vw; right: -100vw;
        background: linear-gradient(180deg, var(--bg) calc(100% - 160px), transparent);
    }
}
@media (max-width: 768px) {
    body { font-size: 1rem; }
    .breite, .kopf-innen, .fuss-innen, .fuss-zeile { padding-left: 16px; padding-right: 16px; }
    .knopf-demo { display: none; }
    /* Der Kopf blendet „Demo anfragen“ aus – darum steht es im Menü. Der
       Selektor schlägt „.menue-offen .nav a“ (Farbe, Hover). */
    .menue-offen .nav a.nav-aktion {
        display: flex; justify-content: center; margin-top: 8px; min-height: 52px;
        background: var(--akzent); color: var(--auf-akzent);
    }
    .held { padding: 32px 0 48px; }
    .held-innen { gap: 36px; }
    .held-knoepfe .knopf { flex: 0 1 auto; }
    .bereich-chips { margin-top: 40px; }
    .vertrauen-liste { gap: 24px 16px; padding-top: 28px; padding-bottom: 28px; }
    .v-zahl { font-size: 2.625rem; }
    .abschnitt { padding: 64px 0; }
    /* Bereichs-Tabs als Segment-Schalter: vier gleich breite Segmente, nur
       Text, nichts rollt oder verschwindet seitlich. */
    .tab-leiste { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); width: 100%; gap: 2px; padding: 4px; overflow: visible; }
    .tab-leiste [role="tab"] { justify-content: center; min-width: 0; padding: 0 4px; font-size: var(--t-mini); }
    .tab-leiste [role="tab"] .sy { display: none; }
    .tab-leiste [role="tab"] span { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
    .tafel { gap: 20px; margin-top: 24px; }
    .tafel-text { grid-template-columns: 1fr; gap: 10px; }
    .tafel-text h3 { font-size: 1.4375rem; }
    /* Bildschirmfotos: Hochformat-Ausschnitt der Inhaltsspalte statt des ganzen
       Desktops (Text etwa doppelt so groß). Liegen echte Handy-Fotos vor
       (<id>-handy-*.webp, start.js setzt .screen-handy), zeigen wir die. */
    .screen:not(.screen-handy) { aspect-ratio: 4 / 5; }
    .screen:not(.screen-handy) img { object-position: 4% 0; }
    #tafel-assistant .screen:not(.screen-handy) img { object-position: 36% 0; } /* Assistant steht mittig */
    .screen-handy { aspect-ratio: 390 / 720; max-width: 300px; margin-inline: auto; border-radius: 28px; }
    .screen-handy img { object-position: top center; }
    .schritte { grid-template-columns: 1fr; gap: 28px; }
    .schritte::before { top: 26px; bottom: 26px; left: 25px; right: auto; width: 2px; height: auto; background: linear-gradient(180deg, var(--akzent), var(--akzent-linie)); transform-origin: top center; }
    .js .schritte::before { transform: scaleY(0); }
    .js .schritte.sichtbar::before { transform: scaleY(1); }
    .schritte li { padding-left: 72px; min-height: 52px; }
    .schritt-nr { position: absolute; left: 0; top: 0; }
    .schritte h3 { margin-top: 10px; }
    .abschluss { padding: 72px 0; }
    .fuss-innen { grid-template-columns: 1fr 1fr; padding-top: 36px; }
    .fuss-marke { grid-column: 1 / -1; }
    .anmelden { padding: 32px 16px 64px; }
    .anmelden-karte { padding: 28px 20px; border-radius: 24px; }
    .firmenfeld input, .firmenfeld-endung { font-size: 1rem; }
    .recht h1 { font-size: 2rem; }
}
/* Handy: alles steht einspaltig untereinander – kürzer und ohne Staffel,
   damit beim Lesen niemand auf Inhalte wartet (höchstens 0,45 s). */
@media (max-width: 768px) and (prefers-reduced-motion: no-preference) {
    .js [data-einblenden] { transform: translateY(12px); transition-duration: .35s, .45s; transition-delay: 0s; }
}
/* Kurze Karten stapeln erst unter 560 px – bei 768 px (Tablet hochkant)
   stehen sie noch zu zweit statt 736 px breit. */
@media (max-width: 560px) {
    .held-knoepfe .knopf { flex: 1 1 100%; }
    .bereich-chips { gap: 10px; }
    .chip { padding: 12px; gap: 10px; align-items: center; min-height: 64px; }
    .chip-kurz { width: 32px; height: 32px; font-size: var(--t-klein); }
    .chip-text { display: none; }   /* die Tafeln darunter erklären jeden Bereich ausführlich */
    .faelle { grid-template-columns: 1fr; }
    .vertrauen-liste { grid-template-columns: 1fr; gap: 20px; }
}
@media (max-width: 374px) {
    .bereich-chips { grid-template-columns: 1fr; }
    .tab-leiste { grid-template-columns: repeat(2, minmax(0, 1fr)); border-radius: 24px; }
}