/* cereno · Website (Produkt ImmoDMS)
   Leitbild: modernes, neues Haus. Warmweiße Wände, Fensterprofile in Anthrazit (RAL 7016),
   Bronze als einzige Farbe: im Licht, in den Akzenten und als Farbe der Hauptaktion.
   Signatur: bronzefarbenes Abendlicht auf der Wand, darin der Schatten eines Olivenzweigs. */

@font-face {
  font-family: 'Albert Sans';
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url(fonts/albert-sans-latin-ext-wght-normal.woff2) format('woff2-variations');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Albert Sans';
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url(fonts/albert-sans-latin-wght-normal.woff2) format('woff2-variations');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  /* Farben */
  --kalk: #fafaf8;          /* Seitengrund: Kalkputz */
  --weiss: #ffffff;
  --wand: #ebebe6;          /* Wand im Schatten, Kopfbereich */
  --beton: #f2f2ef;         /* Sichtbeton, ruhige Flächen */
  --anthrazit: #2a2f33;     /* Fensterprofil, Schrift, Hauptaktion */
  --anthrazit-2: #4c5257;   /* Fließtext */
  --grau: #5c6267;          /* Nebentext (≥ 5:1 auch auf Travertin, Wand und Bronze-hell) */
  --linie: #e1e2de;
  --linie-2: #cfd1cc;
  --linie-feld: #8a8e89;    /* Rahmen von Eingabefeldern (≥ 3:1 auf Weiß) */
  --bronze: #a0703f;        /* einzige Farbe: Linien, Licht, Akzente (weiße Schrift darauf nur 4.3:1) */
  --bronze-flaeche: #94663a; /* Bronze als Fläche unter weißer Schrift: Knöpfe, Ziffern (5:1) */
  --bronze-dunkel: #86592c;
  --bronze-text: #7a5025;   /* Bronze für Text (6.6:1 auf Kalk) */
  --bronze-hell: #f2e8dc;
  --travertin: #f2eee8;     /* warme Steinfläche */

  /* Kopfbereich: warme Wand im Schatten, Bronzelicht vom Fenster */
  --wand-oben: #ebe7e1;
  --wand-mitte: #f1eee9;
  --sonne-a: #fdf5ea;
  --sonne-b: #fdf8f2;
  --sonne-deckung: .95;
  --blattschatten: #5a4430;
  --blatt-deckung: .12;
  --schatten-ton: 64 48 32;

  /* Schrift */
  --schrift: 'Albert Sans', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --fs-titel: clamp(2.55rem, 1.35rem + 4.6vw, 5.1rem);
  --fs-h2: clamp(2rem, 1.35rem + 2.3vw, 3.15rem);
  --fs-satz: clamp(1.55rem, 1.1rem + 1.7vw, 2.45rem);
  --fs-h3: 1.3125rem;
  --fs-lead: clamp(1.125rem, 1.05rem + .3vw, 1.3125rem);
  --fs-text: 1.0625rem;
  --fs-klein: .9375rem;

  /* Raum */
  --rand: clamp(1rem, .4rem + 2.6vw, 2.5rem);
  --breite: 1240px;
  --abschnitt: clamp(5.5rem, 3.5rem + 7vw, 10rem);
  --r-fenster: 18px;
  --r-innen: 10px;

  --ease: cubic-bezier(.2, .7, .1, 1);
  --schatten-fenster: 0 0 0 1px rgb(var(--schatten-ton) / .08), 0 2px 4px rgb(var(--schatten-ton) / .05), 0 24px 48px -24px rgb(var(--schatten-ton) / .26), 0 64px 120px -48px rgb(var(--schatten-ton) / .22);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 100px; }
body {
  margin: 0;
  background: var(--kalk);
  color: var(--anthrazit-2);
  font-family: var(--schrift);
  font-size: var(--fs-text);
  line-height: 1.6;
  font-weight: 400;
  font-feature-settings: 'kern', 'liga';
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img, video, svg { display: block; max-width: 100%; }
h1, h2, h3, p, dl, dd, ul, ol, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
h1, h2, h3 { color: var(--anthrazit); text-wrap: balance; }
p { text-wrap: pretty; }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--bronze); outline-offset: 3px; border-radius: 4px; }

.wrap { width: 100%; max-width: calc(var(--breite) + 2 * var(--rand)); margin-inline: auto; padding-inline: var(--rand); }

.sprung { position: absolute; left: 1rem; top: -4rem; z-index: 100; background: var(--anthrazit); color: #fff; padding: .6rem 1rem; border-radius: 8px; text-decoration: none; }
.sprung:focus { top: 1rem; }

/* ---------- Knöpfe ---------- */
.knopf {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  min-height: 52px; padding: 0 1.5rem; border-radius: 12px;
  font: 560 1rem/1 var(--schrift); letter-spacing: .005em; text-decoration: none; cursor: pointer;
  border: 1px solid transparent;
  transition: background-color .2s var(--ease), border-color .2s var(--ease), color .2s var(--ease), transform .2s var(--ease);
}
.knopf:active { transform: translateY(1px); }
.knopf-klein { min-height: 42px; padding: 0 1.1rem; font-size: .9375rem; border-radius: 10px; }
.knopf-dunkel { background: var(--anthrazit); color: #fff; }
.knopf-dunkel:hover { background: #1d2124; }
.knopf-linie { border-color: var(--linie-2); color: var(--anthrazit); background: rgb(255 255 255 / .55); }
.knopf-linie:hover { border-color: var(--anthrazit); background: #fff; }
.knopf-bronze { background: var(--bronze-flaeche); color: #fff; box-shadow: inset 0 1px 0 rgb(255 255 255 / .18), 0 1px 2px rgb(64 48 32 / .2); }
.knopf-bronze:hover { background: var(--bronze-dunkel); }

/* ---------- Kopfzeile ---------- */
.kopf {
  position: sticky; top: 0; z-index: 50;
  background: transparent;
  transition: background-color .3s var(--ease), box-shadow .3s var(--ease);
}
/* fast deckend: über den dunklen Abschnitten soll die Kopfzeile nicht grau werden */
.kopf.ist-gescrollt { background: rgb(250 250 248 / .95); backdrop-filter: saturate(1.4) blur(14px); -webkit-backdrop-filter: saturate(1.4) blur(14px); box-shadow: 0 1px 0 var(--linie); }
.kopf-innen { display: flex; align-items: center; gap: 2rem; height: 76px; }
.logo { display: inline-flex; align-items: center; gap: .6rem; text-decoration: none; color: var(--anthrazit); font-weight: 620; font-size: 1.1875rem; letter-spacing: -.01em; }
.logo-bild { height: 16px; width: calc(16px * 4726 / 514); color: var(--anthrazit); }
.logo-licht { fill: var(--bronze); }
.nav { display: flex; align-items: center; gap: 2rem; margin-left: auto; }
.nav a { text-decoration: none; color: var(--anthrazit-2); font-size: .9688rem; position: relative; padding: .4rem 0; }
.nav a::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--anthrazit); transform: scaleX(0); transform-origin: left; transition: transform .3s var(--ease); }
.nav a:hover { color: var(--anthrazit); }
.nav a:hover::after { transform: scaleX(1); }

/* ---------- 1 · Kopfbereich mit Licht ---------- */
.held {
  position: relative; overflow: clip; margin-top: -76px; padding-top: calc(76px + clamp(2.5rem, 1rem + 4vw, 4.75rem));
  /* Schattenwand oben (kühl), Wärme vom Fenster links oben, nach unten weich in den Kalkgrund */
  background:
    linear-gradient(to bottom, var(--wand-oben) 0, var(--wand-mitte) 50%, var(--kalk) 84%);
}
.licht { position: absolute; inset: 0 0 25% 0; pointer-events: none; z-index: 0; -webkit-mask-image: linear-gradient(to bottom, #000 55%, transparent); mask-image: linear-gradient(to bottom, #000 55%, transparent); }
.licht svg { width: 100%; height: 100%; }
.licht-fenster { transform-box: fill-box; transform-origin: 50% 0; animation: sonne 70s ease-in-out infinite alternate; }
.scheiben { opacity: var(--sonne-deckung); }
.sonne-a { stop-color: var(--sonne-a); stop-opacity: 1; }
.sonne-b { stop-color: var(--sonne-b); stop-opacity: .3; }
@keyframes sonne {
  from { transform: translateX(-3%) skewX(0deg); }
  to { transform: translateX(4%) skewX(-4deg); }
}

.held-raster { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: 2.25rem 4rem; }
.held-text { grid-column: 2; }
.held-titel { grid-column: 1 / -1; font-size: var(--fs-titel); font-weight: 340; line-height: 1.02; letter-spacing: -.035em; }
.zeile { display: block; overflow: clip; padding-bottom: .06em; }
.zeile > span { display: block; }
.lead { font-size: var(--fs-lead); line-height: 1.55; color: var(--anthrazit-2); max-width: 34em; }
.aktionen { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 1.75rem; }
.vertrauen { display: flex; flex-wrap: wrap; gap: .5rem 1.4rem; margin-top: 1.5rem; font-size: var(--fs-klein); color: var(--grau); }
.vertrauen li { display: inline-flex; align-items: center; gap: .4rem; }
.vertrauen svg { width: 18px; height: 18px; color: var(--bronze); }

.held-fenster { position: relative; z-index: 1; margin-top: clamp(2.75rem, 1.5rem + 3vw, 4.5rem); will-change: transform; transform-origin: 50% 0; }
.held-fenster figcaption { margin-top: 1rem; font-size: var(--fs-klein); color: var(--grau); }

/* Fenster: schmales Profil, weiße Laibung, Bild dahinter */
.fenster { background: #fff; border-radius: var(--r-fenster); padding: clamp(6px, .4vw + 4px, 10px); box-shadow: var(--schatten-fenster); }
.fenster img, .fenster video { width: 100%; height: auto; border-radius: var(--r-innen); background: var(--beton); }
.fenster-video video { aspect-ratio: 16 / 10; object-fit: cover; }

/* ---------- 2 · Ausgangslage ---------- */
.lage { padding-block: var(--abschnitt) calc(var(--abschnitt) * .7); }
.lage-satz { font-size: var(--fs-satz); line-height: 1.3; letter-spacing: -.02em; color: var(--grau); font-weight: 360; max-width: 28em; }
.lage-antwort { margin-top: 2rem; font-size: var(--fs-satz); line-height: 1.3; letter-spacing: -.02em; color: var(--anthrazit); font-weight: 420; display: flex; align-items: center; gap: 1.25rem; }
.lage-antwort::before { content: ''; flex: none; width: 56px; height: 2px; background: var(--bronze); }

/* ---------- Abschnittsköpfe ---------- */
.abschnitt-kopf { max-width: 40rem; margin-bottom: clamp(2.5rem, 2rem + 2vw, 4rem); }
.abschnitt-kopf h2, .unternehmen-text h2, .fragen h2, .demo h2 { font-size: var(--fs-h2); font-weight: 360; line-height: 1.08; letter-spacing: -.03em; }
.abschnitt-kopf p { margin-top: 1rem; font-size: var(--fs-lead); color: var(--grau); }

/* Achsbeschriftung wie im Grundriss: Ziffer im Kreis */
.achse {
  display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: 50%;
  border: 1px solid var(--bronze); color: var(--bronze-text); font-size: .875rem; font-weight: 560;
  font-variant-numeric: tabular-nums; background: var(--kalk);
}

/* ---------- 3 · Weg eines Belegs ---------- */
.weg { padding-bottom: var(--abschnitt); }
.weg-raster { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: 4rem; }
.schritte { position: relative; }
.schritte::before { /* Achse, die die Schritte verbindet */
  content: ''; position: absolute; left: 16.5px; top: 40px; bottom: 40px; width: 1px; background: var(--linie);
}
.schritt { position: relative; min-height: 80vh; display: flex; flex-direction: column; justify-content: center; padding-left: 64px; }
.schritt-inhalt { position: relative; }
.schritt .achse { position: absolute; left: -64px; top: -6px; transition: background-color .4s var(--ease), color .4s var(--ease); }
.schritt.ist-aktiv .achse { background: var(--bronze-flaeche); border-color: var(--bronze-flaeche); color: #fff; }
.schritt h3 { font-size: clamp(1.6rem, 1.3rem + 1vw, 2.1rem); font-weight: 400; line-height: 1.15; letter-spacing: -.02em; }
.schritt-name { display: block; font-size: var(--fs-klein); font-weight: 560; letter-spacing: 0; color: var(--bronze-text); margin-bottom: .6rem; }
.schritt p { margin-top: 1rem; max-width: 30em; }
/* Nicht aktive Schritte treten zurück, bleiben aber lesbar (Grau statt Transparenz, ≥ 5:1) */
.schritt h3, .schritt p, .schritt .fakten { transition: color .5s var(--ease); }
.schritt:not(.ist-aktiv) h3, .schritt:not(.ist-aktiv) p, .schritt:not(.ist-aktiv) .fakten { color: var(--grau); }
.fakten { margin-top: 1.4rem; display: grid; gap: .55rem; font-size: var(--fs-klein); color: var(--anthrazit-2); }
.fakten li { display: flex; gap: .7rem; align-items: baseline; }
.fakten li::before { content: ''; flex: none; width: 14px; height: 1px; background: var(--bronze); transform: translateY(-.3em); }
.schritt-medien { display: none; }
.schritt-medien video { cursor: zoom-in; }

.buehne { position: relative; }
.buehne-innen { position: sticky; top: max(96px, calc(50vh - 260px)); }
.buehne-videos { position: relative; aspect-ratio: 16 / 10; border-radius: var(--r-innen); overflow: hidden; background: var(--beton); }
/* Folien der Bühne: siehe Abschnitt „Mehrseitig“ */
.video-leiste { display: flex; align-items: center; gap: .5rem; padding: 10px 4px 2px 6px; }
.video-fortschritt { flex: 1; height: 2px; background: var(--linie); border-radius: 2px; overflow: hidden; }
.video-fortschritt span { display: block; height: 100%; width: 100%; background: var(--bronze); transform: scaleX(0); transform-origin: left; }
.video-knopf {
  display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: 8px; border: 0;
  background: transparent; color: var(--grau); cursor: pointer; transition: background-color .2s, color .2s;
}
.video-knopf:hover { background: var(--beton); color: var(--anthrazit); }
.video-knopf svg { width: 18px; height: 18px; }

/* ---------- 4 · Handy ---------- */
.telefon { position: relative; justify-self: center; width: min(330px, 78vw); }
/* Weißer Rahmen wie bei den Videofenstern: feine Kante, weicher Schatten */
.telefon-rahmen {
  border-radius: 44px; padding: 10px; background: #fff;
  box-shadow: var(--schatten-fenster); container-type: inline-size;
}
/* Bildschirm: feine Linie, damit er sich vom weißen Rahmen abhebt. Oben Statusleiste, unten Home-Balken wie
   bei einem echten Handy; das App-Bild liegt dazwischen und reicht nie in die runden Ecken. */
.telefon-schirm {
  position: relative; overflow: hidden; border-radius: 34px; background: #fff; box-shadow: 0 0 0 1px var(--linie);
  padding: 12cqw 0 8cqw;
}
.telefon-schirm::before {
  content: '9:41'; content: '9:41' / '';
  position: absolute; inset: 0 0 auto; height: 12cqw; padding: 1cqw 9cqw 0; display: flex; align-items: center;
  font: 620 3.8cqw/1 var(--schrift); letter-spacing: .01em; color: #15181d;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 38 12' fill='%2315181d'%3E%3Crect x='0' y='8' width='3' height='4' rx='.8'/%3E%3Crect x='4.5' y='6' width='3' height='6' rx='.8'/%3E%3Crect x='9' y='3.5' width='3' height='8.5' rx='.8'/%3E%3Crect x='13.5' y='1' width='3' height='11' rx='.8'/%3E%3Crect x='20.5' y='1.5' width='14' height='9' rx='2.6' fill='none' stroke='%2315181d' stroke-opacity='.4'/%3E%3Crect x='22.2' y='3.2' width='10.6' height='5.6' rx='1.4'/%3E%3Cpath d='M36 4.6v2.8c.7-.2 1.2-.8 1.2-1.4s-.5-1.2-1.2-1.4z' fill-opacity='.4'/%3E%3C/svg%3E") no-repeat right 8cqw center / 10cqw auto;
}
.telefon-schirm::after {
  content: ''; position: absolute; left: 50%; bottom: 2.6cqw; width: 34cqw; height: max(4px, 1.3cqw);
  transform: translateX(-50%); border-radius: 99px; background: #15181d;
}
.telefon-schirm video { display: block; width: 100%; aspect-ratio: 1 / 2; object-fit: cover; background: #fff; }
/* Anhalten und Vergrößern unter jedem Video außerhalb der Bühne */
.video-knoepfe { display: flex; justify-content: flex-end; gap: .25rem; margin-top: .5rem; }
.medium-telefon .video-knoepfe, .schritt-medien-telefon .video-knoepfe { justify-content: center; }

/* ---------- 5 · Sicherheit ---------- */
.sicherheit { padding-block: var(--abschnitt); }
.regeln { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 3rem; border-top: 1px solid var(--linie); }
.regeln > div { padding: 1.75rem 0 2rem; border-bottom: 1px solid var(--linie); }
.regeln dt { color: var(--anthrazit); font-weight: 560; font-size: 1.0625rem; }
.regeln dd { margin-top: .4rem; font-size: var(--fs-klein); color: var(--grau); max-width: 26em; }
/* Merksatz: wie die Leistungsblöcke mit Bronzelinie oben, ohne Kasten */
.hinweis {
  margin-top: clamp(3.5rem, 2.5rem + 3vw, 5rem); display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: 1rem 4rem;
  padding-top: 1.6rem; border-top: 2px solid var(--bronze);
}
.hinweis h3 { font-size: clamp(1.5rem, 1.25rem + .8vw, 1.9rem); font-weight: 400; line-height: 1.2; letter-spacing: -.02em; }
.hinweis p { font-size: var(--fs-lead); line-height: 1.55; color: var(--anthrazit-2); max-width: 36em; }

/* ---------- 6 · Einführung ---------- */
/* auf Kalk, damit auf der Startseite nicht zwei weiße Flächen aufeinanderfolgen */
.einfuehrung { padding-block: var(--abschnitt); background: var(--kalk); }
.einfuehrung .ablauf .achse { background: var(--kalk); }
.ablauf { position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 2.5rem; }
.ablauf::before { /* Linie wird beim Hineinscrollen gezogen */
  content: ''; position: absolute; left: 17px; right: 0; top: 17px; height: 1px; background: var(--bronze);
  transform: scaleX(0); transform-origin: left; transition: transform 1.4s var(--ease);
}
.ablauf.ist-sichtbar::before { transform: scaleX(1); }
.ablauf li { position: relative; }
.ablauf .achse { position: relative; z-index: 1; background: var(--weiss); }
.ablauf h3 { margin-top: 1.5rem; font-size: var(--fs-h3); font-weight: 520; letter-spacing: -.01em; }
.ablauf p { margin-top: .5rem; font-size: var(--fs-klein); color: var(--grau); max-width: 22em; }

/* ---------- Bausteine ---------- */
.bausteine { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2.25rem 2.5rem; }
.bausteine > div { padding-top: 1.1rem; border-top: 2px solid var(--bronze); }
.bausteine dt { color: var(--anthrazit); font-weight: 540; font-size: 1.1875rem; letter-spacing: -.01em; }
.bausteine dd { margin-top: .4rem; font-size: var(--fs-klein); color: var(--grau); }

/* ---------- 7 · Unternehmen ---------- */
.unternehmen { padding-block: var(--abschnitt); background: var(--travertin); }
.unternehmen-raster { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: clamp(3rem, 2rem + 4vw, 7rem); align-items: start; }
.unternehmen-text .lead { margin-top: 1.5rem; }
.eckdaten { display: flex; flex-wrap: wrap; gap: 1.5rem 3rem; margin-top: 2.5rem; }
.eckdaten dt { font-size: var(--fs-klein); color: var(--grau); }
.eckdaten dd { margin-top: .2rem; font-size: 1.25rem; color: var(--anthrazit); font-weight: 460; }
.werte { display: grid; gap: 0; border-top: 1px solid var(--linie-2); }
.werte li { padding: 1.6rem 0; border-bottom: 1px solid var(--linie-2); }
.werte h3 { font-size: var(--fs-h3); font-weight: 480; letter-spacing: -.01em; }
.werte p { margin-top: .35rem; font-size: var(--fs-klein); color: var(--grau); }

/* Platzhalter für Inhalte, die noch geliefert werden */
.platzhalter { background: repeating-linear-gradient(135deg, rgb(160 112 63 / .14) 0 6px, rgb(160 112 63 / .06) 6px 12px); border-radius: 4px; padding: 0 .35em; color: var(--bronze-text); }

/* ---------- 8 · Fragen ---------- */
.fragen { padding-block: var(--abschnitt); }
.fragen-raster { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: 2rem 4rem; }
.fragen-liste { border-top: 1px solid var(--linie); }
.fragen details { border-bottom: 1px solid var(--linie); }
.fragen summary {
  list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 1.5rem;
  padding: 1.4rem 0; font-size: 1.125rem; color: var(--anthrazit); font-weight: 480;
}
.fragen summary::-webkit-details-marker { display: none; }
.fragen summary::after { /* Plus, das zum Minus wird */
  content: ''; flex: none; width: 14px; height: 14px;
  background: linear-gradient(var(--anthrazit), var(--anthrazit)) center / 14px 1.5px no-repeat, linear-gradient(var(--anthrazit), var(--anthrazit)) center / 1.5px 14px no-repeat;
  transition: transform .3s var(--ease), background-size .3s var(--ease);
}
.fragen details[open] summary::after { background-size: 14px 1.5px, 1.5px 0; transform: rotate(180deg); }
.fragen details p { padding: 0 2.5rem 1.6rem 0; color: var(--anthrazit-2); max-width: 40em; }
@supports (interpolate-size: allow-keywords) {
  .fragen { interpolate-size: allow-keywords; }
  .fragen details::details-content { block-size: 0; overflow: hidden; transition: block-size .35s var(--ease), content-visibility .35s allow-discrete; }
  .fragen details[open]::details-content { block-size: auto; }
}

/* ---------- 9 · Abschluss ---------- */
.demo {
  color: #c9cdd0; padding-block: var(--abschnitt);
  background: var(--anthrazit);
}
.demo h2 { color: #fff; }
.demo-raster { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: 3rem clamp(3rem, 2rem + 4vw, 7rem); align-items: start; }
.demo-text p { margin-top: 1.25rem; font-size: var(--fs-lead); max-width: 30em; }
.demo-text .demo-alternativ { margin-top: 1rem; font-size: var(--fs-text); color: #aab0b4; }
.demo-alternativ a { color: #e8cfae; text-underline-offset: 3px; }
.demo .platzhalter { color: #e5cfae; background: repeating-linear-gradient(135deg, rgb(229 207 174 / .16) 0 6px, rgb(229 207 174 / .07) 6px 12px); }
.ansprechpartner { display: flex; align-items: center; gap: 1rem; margin-top: 2.5rem; padding-top: 2rem; border-top: 1px solid rgb(255 255 255 / .12); }
.ap-bild { flex: none; width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center; background: var(--bronze-flaeche); color: #fff; font-weight: 560; }
.ansprechpartner p { margin: 0; font-size: var(--fs-text); }
.ap-name { color: #fff; font-weight: 520; }
.ap-rolle { font-size: var(--fs-klein) !important; color: #aab0b4; }

.formular { display: grid; gap: 1.1rem; padding: clamp(1.5rem, 1rem + 2vw, 2.25rem); border-radius: var(--r-fenster); background: rgb(255 255 255 / .04); box-shadow: inset 0 0 0 1px rgb(255 255 255 / .1); }
.feld { display: grid; gap: .4rem; }
/* Falle für Bots (Anfrageformular, Lösungsfinder): nicht sichtbar, nicht per Tab erreichbar, muss leer bleiben */
.feld-falle { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.feld label { font-size: var(--fs-klein); color: #dfe2e4; }
.feld-optional { color: #9ea4a8; }
/* Rahmen mit .4 Deckkraft: ≥ 3:1 gegen das dunkle Formular */
.feld input, .feld select, .feld textarea {
  width: 100%; min-height: 50px; padding: 0 1rem; border-radius: 10px; border: 1px solid rgb(255 255 255 / .4);
  background: rgb(255 255 255 / .06); color: #fff; font: 400 1rem var(--schrift); transition: border-color .2s, background-color .2s;
}
.feld textarea { min-height: 96px; padding: .8rem 1rem; line-height: 1.5; resize: vertical; }
.feld select { appearance: none; background-image: linear-gradient(45deg, transparent 50%, #c9cdd0 50%), linear-gradient(135deg, #c9cdd0 50%, transparent 50%); background-position: right 1.1rem center, right .8rem center; background-size: 5px 5px; background-repeat: no-repeat; padding-right: 2.5rem; }
.feld select option { color: var(--anthrazit); }
.feld input:hover, .feld select:hover, .feld textarea:hover { border-color: rgb(255 255 255 / .6); }
.feld input:focus, .feld select:focus, .feld textarea:focus { outline: none; border-color: var(--bronze); background-color: rgb(255 255 255 / .09); box-shadow: 0 0 0 3px rgb(160 112 63 / .3); }
.feld.hat-fehler input { border-color: #e39a8f; }
.feld-fehler { font-size: .875rem; color: #f0b3aa; }
.formular .knopf { margin-top: .4rem; width: 100%; }
.formular-hinweis { font-size: .875rem; color: #9ea4a8; }
.formular-hinweis a { color: #dfe2e4; }
.formular-status:empty { display: none; }
.formular-status { font-size: var(--fs-text); color: #fff; }
.formular-status:focus { outline: none; }
.formular.ist-gesendet .feld, .formular.ist-gesendet .knopf, .formular.ist-gesendet .formular-hinweis { display: none; }
.formular.ist-gesendet .formular-status { padding: 1rem 0; }
.formular-status strong { display: block; font-size: 1.375rem; font-weight: 460; margin-bottom: .4rem; }

/* ---------- Leuchtkasten ---------- */
.leuchtkasten { width: min(1400px, 94vw); max-width: none; padding: 0; border: 0; border-radius: var(--r-fenster); background: #fff; box-shadow: var(--schatten-fenster); overflow: visible; }
.leuchtkasten::backdrop { background: rgb(42 47 51 / .55); backdrop-filter: blur(4px); }
.leuchtkasten video { width: 100%; border-radius: var(--r-fenster); }
.leuchtkasten-zu { position: absolute; right: -14px; top: -14px; width: 40px; height: 40px; border-radius: 50%; border: 0; background: var(--anthrazit); color: #fff; display: grid; place-items: center; cursor: pointer; }
.leuchtkasten-zu svg { width: 18px; height: 18px; }
.leuchtkasten[open] { animation: aufziehen .35s var(--ease); }
@keyframes aufziehen { from { opacity: 0; transform: translateY(12px) scale(.985); } }

/* ---------- Auftritt beim Laden (ein einziger orchestrierter Moment) ---------- */
.js .zeile > span { transform: translateY(105%); }
.js .held-text, .js .held-fenster { opacity: 0; }
.js .held-fenster { transform: translateY(28px); }
.ist-bereit .zeile > span { transform: none; transition: transform 1.1s var(--ease); }
.ist-bereit .zeile:nth-child(2) > span { transition-delay: .09s; }
.ist-bereit .held-text { opacity: 1; transition: opacity 1s var(--ease) .35s; }
.ist-bereit .held-fenster { opacity: 1; transform: translateY(var(--hub, 0px)) scale(var(--skala, 1)); transition: opacity 1.2s var(--ease) .5s, transform 1.2s var(--ease) .5s; }
.ist-bereit.ist-gelandet .held-fenster { transition: none; }

/* ---------- Schmal ---------- */
@media (max-width: 1080px) {
  .nav { gap: 1.4rem; }
  .regeln { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ablauf { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 3rem; }
  .ablauf::before { display: none; }
}
@media (max-width: 900px) {
  .nav { display: none; }
  .kopf-innen { height: 64px; justify-content: space-between; }
  .held { margin-top: -64px; padding-top: calc(64px + 3rem); }
  .held-text { grid-column: 1; }
  html { scroll-padding-top: 84px; }
  .held-raster { grid-template-columns: minmax(0, 1fr); gap: 1.75rem; }
  .held-titel, .unter-held h1, .finder-seite h1 { hyphens: auto; overflow-wrap: break-word; }
  .licht { inset: 0 0 18% 0; }

  .weg-raster { grid-template-columns: 1fr; }
  .buehne { display: none; }
  .schritte::before { display: none; }
  .schritt { min-height: 0; padding-left: 0; padding-bottom: 4rem; }
  .schritt .achse { position: static; margin-bottom: 1.25rem; }
  .schritt-inhalt { position: static; }
  .schritt:not(.ist-aktiv) h3 { color: var(--anthrazit); }
  .schritt:not(.ist-aktiv) p, .schritt:not(.ist-aktiv) .fakten { color: var(--anthrazit-2); }
  .schritt.ist-aktiv .achse { background: var(--kalk); color: var(--bronze-text); }
  .schritt-medien { display: block; margin-top: 2rem; }

  .unternehmen-raster, .fragen-raster, .demo-raster { grid-template-columns: 1fr; }
  .hinweis { grid-template-columns: 1fr; }

  .kopf .knopf { min-height: 40px; }
}
@media (max-width: 600px) {
  .regeln { grid-template-columns: 1fr; }
  .ablauf { grid-template-columns: 1fr; }
  .bausteine { grid-template-columns: 1fr; }
  .kopf .knopf-klein { padding: 0 .9rem; }
  .aktionen .knopf { flex: 1 1 100%; }
  .fragen details p { padding-right: 0; }
  .telefon { width: min(300px, 74vw); }
}

/* ---------- Ruhe für alle, die Bewegung reduzieren ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .licht-fenster { animation: none; }
  .js .zeile > span, .js .held-text, .js .held-fenster { transform: none !important; opacity: 1 !important; transition: none !important; }
  .ablauf::before { transform: none; transition: none; }
  .leuchtkasten[open] { animation: none; }
}

/* =====================================================================
   Mehrseitig: Menü, Unterseiten, Bühnenfolien, Fuß
   ===================================================================== */
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Menü „Leistungen“ */
.nav-menue { position: relative; }
.nav-knopf { display: inline-flex; align-items: center; gap: .3rem; padding: .4rem 0; border: 0; background: none; font: inherit; font-size: .9688rem; color: var(--anthrazit-2); cursor: pointer; }
.nav-knopf:hover, .nav-knopf[aria-expanded="true"], .nav-knopf.ist-aktiv { color: var(--anthrazit); }
.nav-knopf.ist-aktiv { box-shadow: inset 0 -1px 0 var(--bronze); }
.pfeil-unten { width: 12px; height: 12px; transition: transform .25s var(--ease); }
.nav-knopf[aria-expanded="true"] .pfeil-unten { transform: rotate(180deg); }
.nav a[aria-current="page"] { color: var(--anthrazit); }
.nav a[aria-current="page"]::after { transform: scaleX(1); background: var(--bronze); }
.menue {
  position: absolute; top: calc(100% + 14px); left: -28px; width: 600px; padding: 10px; z-index: 60;
  background: #fff; border-radius: 18px; box-shadow: var(--schatten-fenster);
  animation: aufziehen .25s var(--ease);
}
.menue::before { content: ''; position: absolute; left: 0; right: 0; top: -16px; height: 16px; } /* Brücke für die Maus */
.menue ul { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2px; }
.menue ul a { display: grid; gap: .15rem; padding: .8rem 1rem; border-radius: 12px; text-decoration: none; }
.menue ul a::after { display: none; }
.menue ul a:hover, .menue ul a:focus-visible, .menue ul a[aria-current="page"] { background: var(--bronze-hell); }
.menue strong { color: var(--anthrazit); font-weight: 560; font-size: .9688rem; }
.menue span { color: var(--grau); font-size: .875rem; line-height: 1.4; }
.menue .menue-fuss { display: block; margin: 6px 6px 2px; padding: .8rem .6rem .5rem; border-top: 1px solid var(--linie); color: var(--bronze-text); font-size: .9063rem; font-weight: 520; text-decoration: none; }
.menue .menue-fuss::after { display: none; }
.menue .menue-fuss:hover { text-decoration: underline; text-underline-offset: 3px; }

/* Handy-Menü */
.handy-knopf { display: none; }
.handy-menue { display: none; }
@media (max-width: 900px) {
  .handy-knopf { display: inline-grid; place-items: center; width: 42px; height: 42px; margin-left: .25rem; border-radius: 10px; border: 1px solid var(--linie-2); background: rgb(255 255 255 / .6); cursor: pointer; }
  .handy-striche { position: relative; width: 18px; height: 12px; border-top: 1.5px solid var(--anthrazit); border-bottom: 1.5px solid var(--anthrazit); transition: border-color .2s; }
  .handy-striche::before, .handy-striche::after { content: ''; position: absolute; left: 0; right: 0; top: 50%; height: 1.5px; margin-top: -.75px; background: var(--anthrazit); transition: transform .25s var(--ease); }
  .handy-knopf[aria-expanded="true"] .handy-striche { border-color: transparent; }
  .handy-knopf[aria-expanded="true"] .handy-striche::before { transform: rotate(45deg); }
  .handy-knopf[aria-expanded="true"] .handy-striche::after { transform: rotate(-45deg); }
  .kopf-innen { gap: .75rem; }
  .kopf-innen .logo { margin-right: auto; }
  .handy-menue:not([hidden]) {
    display: block; position: absolute; left: 0; right: 0; top: 100%; max-height: calc(100dvh - 64px); overflow-y: auto;
    background: var(--kalk); border-bottom: 1px solid var(--linie); box-shadow: 0 24px 40px -24px rgb(64 48 32 / .3); padding: .5rem 0 1.5rem;
  }
  .kopf.menue-offen { background: var(--kalk); box-shadow: 0 1px 0 var(--linie); }
  .handy-titel { font-size: var(--fs-klein); font-weight: 600; color: var(--bronze-text); margin: .75rem 0 .25rem; }
  .handy-menue ul a { display: block; padding: .8rem 0; border-bottom: 1px solid var(--linie); text-decoration: none; color: var(--anthrazit); font-size: 1.125rem; }
  .handy-menue ul a[aria-current="page"] { color: var(--bronze-text); }
  .handy-weitere { margin-top: 1rem; }
  .handy-weitere a { font-size: 1rem !important; color: var(--anthrazit-2) !important; }
  .handy-menue .knopf { margin-top: 1.5rem; width: 100%; }
}
@media (max-width: 520px) {
  .kopf-cta { display: none; }
}

/* Sprachwahl: dieselbe Seite in der anderen Sprache */
.sprache { display: inline-flex; align-items: center; gap: .4rem; min-height: 42px; color: var(--anthrazit-2); font-size: .8438rem; font-weight: 560; letter-spacing: .06em; text-decoration: none; transition: color .2s var(--ease); }
.sprache:hover { color: var(--anthrazit); }
.sprache-bild { width: 15px; height: 15px; color: var(--grau); transition: color .2s var(--ease); }
.sprache:hover .sprache-bild { color: var(--bronze); }
@media (max-width: 900px) {
  .sprache { padding-inline: .35rem; }
}

/* Mehr-Verweise */
.mehr-link { display: inline-block; margin-top: 1.25rem; color: var(--bronze-text); font-weight: 560; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; transition: color .2s var(--ease); }
.mehr-link:hover { color: var(--anthrazit); }

/* Allgemeine Abschnitte */
.abschnitt { padding-block: var(--abschnitt); }
.abschnitt-hell { background: var(--weiss); }
.abschnitt .regeln + .mehr-link, .abschnitt .bausteine + .mehr-link { margin-top: 2rem; }
.hinweis-ohne-abstand { margin-top: 0; }
.bausteine-drei { grid-template-columns: repeat(3, minmax(0, 1fr)); }

/* Bühne mit Folien (Video oder Handy) */
.buehne-folie { position: absolute; inset: 0; opacity: 0; transition: opacity .6s var(--ease); }
.buehne-folie.ist-aktiv { opacity: 1; }
.buehne-folie > video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: 0; }
.buehne-folie-telefon { display: block; }
/* Handy frei im Bild, ohne Fensterrahmen. So groß, wie die Fensterhöhe zwischen Kopfzeile und unterem Rand zulässt,
   und in diesem Raum mittig: main.js setzt --telefon-b (Breite) und --telefon-dy (Versatz zur Mitte der Bühnenfläche).
   Ohne JS gilt die alte Näherung; 2.2 = Video 1:2 plus Statusleiste und Home-Balken. */
.buehne-folie-telefon .telefon-rahmen {
  position: absolute; left: 50%; top: 50%; min-width: 0;
  width: var(--telefon-b, min(46%, calc((100vh - 246px) / 2.2)));
  transform: translate(-50%, calc(-50% + var(--telefon-dy, 0px)));
}
.buehne-folie-telefon .telefon-schirm video { width: 100%; height: auto; aspect-ratio: 1 / 2; }
.buehne .fenster-video { transition: background-color .5s var(--ease), box-shadow .5s var(--ease); }
.buehne-videos { transition: background-color .5s var(--ease); }
.video-fortschritt { transition: opacity .4s var(--ease); }
.buehne.ist-telefon .fenster-video { background-color: transparent; box-shadow: none; }
.buehne.ist-telefon .buehne-videos { background-color: transparent; overflow: visible; }
.buehne.ist-telefon .video-fortschritt { opacity: 0; }
.schritt .mehr-link { margin-top: 1.4rem; }
.telefon-klein { width: min(300px, 78vw); margin-inline: auto; }

/* Startseite: Individualsoftware und Beratung */
.zwei-wege { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(2.5rem, 1.5rem + 3vw, 5rem); }
.weg-block { padding-top: 1.4rem; border-top: 2px solid var(--bronze); }
.weg-block h3 { margin-top: .5rem; font-size: clamp(1.6rem, 1.3rem + 1vw, 2.1rem); font-weight: 400; line-height: 1.15; letter-spacing: -.02em; }
.weg-block > p:not(.schritt-name) { margin-top: .9rem; max-width: 32em; }

/* Kopfbereich der Unterseiten */
.unter-held {
  position: relative; margin-top: -76px; padding-top: calc(76px + clamp(2.5rem, 1rem + 4vw, 4.75rem)); padding-bottom: clamp(3.5rem, 2rem + 4vw, 6rem);
  background: linear-gradient(to bottom, var(--wand-oben), var(--wand-mitte) 55%, var(--kalk));
}
.unter-held-flach { background: var(--kalk); }
.unter-held-raster { display: grid; grid-template-columns: minmax(0, 1fr); gap: 3rem 4rem; align-items: center; }
.mit-medium .unter-held-raster { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); }
.medium-telefon .unter-held-raster { grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); }
.medium-liste .unter-held-raster { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); align-items: end; }
.unter-held-text { max-width: 44rem; }
.brotkrumen { font-size: var(--fs-klein); font-weight: 560; }
.brotkrumen a { color: var(--bronze-text); text-decoration: none; }
.brotkrumen a:hover { text-decoration: underline; text-underline-offset: 3px; }
.unter-held h1 { margin-top: .75rem; font-size: clamp(2.4rem, 1.4rem + 3.2vw, 4rem); font-weight: 340; line-height: 1.04; letter-spacing: -.035em; }
.unter-held .lead { margin-top: 1.25rem; }
.unter-held-medium { position: relative; }
.medium-telefon .unter-held-medium { justify-self: center; }
.medium-telefon .telefon { width: min(340px, 78vw); }
/* sagt unter den Knöpfen, was beim Gespräch passiert */
.aktionen-hinweis { margin-top: .9rem; font-size: var(--fs-klein); color: var(--grau); }
/* ein Satz unter Video oder Bild im Kopfbereich: was ist zu sehen */
.medium-unterschrift { margin-top: 1rem; font-size: var(--fs-klein); color: var(--grau); max-width: 36em; }
.medium-telefon .medium-unterschrift { margin: .6rem auto 0; max-width: 340px; text-align: center; }
.medium-liste .bausteine > div { border-top-color: var(--bronze); }

/* Abschluss-Band der Unterseiten */
.cta-band {
  color: #c9cdd0; padding-block: clamp(4rem, 3rem + 4vw, 6.5rem);
  background: var(--anthrazit);
}
.cta-raster { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 2rem 4rem; align-items: end; }
.cta-band h2 { color: #fff; font-size: var(--fs-h2); font-weight: 360; line-height: 1.08; letter-spacing: -.03em; }
.cta-band p { margin-top: 1rem; font-size: var(--fs-lead); max-width: 32em; }
.cta-band .aktionen { justify-content: flex-end; margin-top: 0; }
.knopf-linie-hell { border-color: rgb(255 255 255 / .28); color: #fff; background: transparent; }
.knopf-linie-hell:hover { border-color: #fff; }

/* Weitere Leistungen */
.weitere { padding-block: clamp(4rem, 3rem + 3vw, 6rem); }
.weitere h2 { font-size: 1.5rem; font-weight: 420; letter-spacing: -.015em; }
.weitere-liste { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 2.5rem; margin-top: 1.5rem; }
.weitere-liste a { display: grid; gap: .25rem; padding: 1.2rem 0 1.3rem; border-top: 1px solid var(--linie); text-decoration: none; }
.weitere-liste strong { color: var(--anthrazit); font-weight: 540; font-size: 1.0938rem; transition: color .2s; }
.weitere-liste span { color: var(--grau); font-size: var(--fs-klein); }
.weitere-liste a:hover strong { color: var(--bronze-text); text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; }

/* Fuß */
.fuss { padding-block: 3.5rem 3rem; border-top: 1px solid var(--linie); }
.fuss-marke .fuss-kontakt { margin-top: .6rem; }
.fuss-kontakt a { color: var(--anthrazit-2); text-underline-offset: 3px; }
.fuss-kontakt a:hover { color: var(--anthrazit); }
.fuss-raster { display: grid; grid-template-columns: minmax(0, 4fr) repeat(3, minmax(0, 2fr)); gap: 2.5rem; font-size: var(--fs-klein); color: var(--grau); }
.fuss-marke p { margin-top: 1rem; max-width: 24em; }
.fuss-titel { color: var(--anthrazit); font-weight: 560; margin-bottom: .6rem; }
.fuss-raster ul { display: grid; gap: .45rem; }
.fuss-raster a { text-decoration: none; }
.fuss-raster nav a:hover { color: var(--anthrazit); text-decoration: underline; text-underline-offset: 3px; }

/* Leuchtkasten für Hochformat */
/* Breite aus der Fensterhöhe ableiten (Video 1:2), sonst fehlt auf niedrigen Bildschirmen unten ein Stück */
.leuchtkasten.ist-hoch { width: min(400px, 90vw, calc((100vh - 48px) / 2)); width: min(400px, 90vw, calc((100dvh - 48px) / 2)); }

@media (max-width: 1080px) {
  .menue { left: -120px; }
  .weitere-liste { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bausteine-drei { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  .unter-held { margin-top: -64px; padding-top: calc(64px + 2.5rem); }
  .mit-medium .unter-held-raster, .medium-telefon .unter-held-raster, .medium-liste .unter-held-raster { grid-template-columns: 1fr; }
  .zwei-wege, .cta-raster { grid-template-columns: 1fr; }
  .cta-band .aktionen { justify-content: flex-start; }
  .fuss-raster { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fuss-marke { grid-column: 1 / -1; }
}
@media (max-width: 600px) {
  .weitere-liste, .bausteine-drei { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .buehne-folie, .menue { transition: none; animation: none; }
}

/* =====================================================================
   Wissensassistent (Demo) auf der Startseite
   ===================================================================== */
.wissen { padding-block: var(--abschnitt); }
.wissen-raster { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(2.5rem, 1.5rem + 3vw, 5rem); align-items: start; }
.wissen-text h2 { margin-top: .5rem; font-size: var(--fs-h2); font-weight: 360; line-height: 1.08; letter-spacing: -.03em; }
.wissen-text .lead { margin-top: 1.25rem; }

.demo-hinweis { margin-bottom: .85rem; font-size: var(--fs-klein); color: var(--grau); }
.chat { display: flex; flex-direction: column; padding: 0; overflow: hidden; }
.chat-kopf { display: flex; align-items: center; gap: .75rem; padding: 14px 18px; border-bottom: 1px solid var(--linie); }
.chat .chat-bild { flex: none; width: 30px; height: 30px; padding: 5px; border-radius: 50%; background: var(--bronze-hell); } /* stärker als „.fenster img“ */
.chat-name { color: var(--anthrazit); font-weight: 560; font-size: .9688rem; line-height: 1.2; }
.chat-unter { color: var(--grau); font-size: .8125rem; line-height: 1.3; }
.chat-marke { margin-left: auto; padding: 2px 10px; border-radius: 999px; background: var(--bronze-hell); color: var(--bronze-text); font-size: .75rem; font-weight: 600; }
/* wächst mit der Unterhaltung: kein leerer Raum zwischen Begrüßung und Vorschlägen */
.chat-verlauf { display: grid; align-content: start; gap: 12px; max-height: 360px; padding: 18px; overflow-y: auto; scroll-behavior: smooth; }
.nachricht { max-width: 86%; padding: 10px 14px; font-size: .9375rem; line-height: 1.55; }
.nachricht-nutzer { justify-self: end; background: var(--anthrazit); color: #fff; border-radius: 16px 16px 4px 16px; }
.nachricht-assistent { justify-self: start; background: var(--kalk); color: var(--anthrazit-2); border-radius: 16px 16px 16px 4px; box-shadow: inset 0 0 0 1px var(--linie); }
.quellen { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 8px; font-size: .8125rem; color: var(--grau); }
.quelle { padding: 2px 10px; border-radius: 999px; background: var(--bronze-hell); color: var(--bronze-text); text-decoration: none; font-weight: 520; }
.quelle:hover { text-decoration: underline; text-underline-offset: 2px; }
.tippt { display: flex; gap: 5px; padding: 14px 16px; }
.tippt span:not(.sr) { width: 7px; height: 7px; border-radius: 50%; background: var(--grau); opacity: .35; animation: tippen 1s infinite ease-in-out; }
.tippt span:nth-child(2) { animation-delay: .15s; }
.tippt span:nth-child(3) { animation-delay: .3s; }
@keyframes tippen { 50% { opacity: 1; transform: translateY(-3px); } }
.chat-vorschlaege { display: flex; flex-wrap: wrap; gap: 8px; padding: 0 18px 14px; }
.chat-vorschlaege[hidden] { display: none; }
.chat-vorschlaege button { padding: 6px 12px; border-radius: 999px; border: 1px solid var(--linie-2); background: #fff; color: var(--anthrazit-2); font: 400 .875rem var(--schrift); cursor: pointer; transition: border-color .2s, color .2s; }
.chat-vorschlaege button:hover { border-color: var(--bronze); color: var(--anthrazit); }
.chat-eingabe { display: flex; gap: 8px; padding: 12px 14px; border-top: 1px solid var(--linie); }
.chat-eingabe input { flex: 1; min-width: 0; min-height: 46px; padding: 0 14px; border-radius: 12px; border: 1px solid var(--linie-feld); background: #fff; color: var(--anthrazit); font: 400 1rem var(--schrift); }
.chat-eingabe input:focus { outline: none; border-color: var(--bronze); box-shadow: 0 0 0 3px rgb(160 112 63 / .18); }
.chat-senden { min-height: 46px; width: 46px; padding: 0; border-radius: 12px; }
.chat-senden svg { width: 20px; height: 20px; }
.chat-senden:disabled { opacity: .55; cursor: default; }
.chat-hinweis { padding: 0 18px 14px; font-size: .8125rem; color: var(--grau); }

@media (max-width: 900px) {
  .wissen-raster { grid-template-columns: minmax(0, 1fr); }
  .wissen-text .mehr-link { margin-top: 1.5rem; }
  .chat-verlauf { max-height: 320px; }
}
@media (prefers-reduced-motion: reduce) {
  .tippt span:not(.sr) { animation: none; opacity: .6; }
  .chat-verlauf { scroll-behavior: auto; }
}

/* Impressum: Bezeichnung links, Angabe rechts */
.recht-seite .lead { margin-top: 1.25rem; }
.recht-seite h1 { font-size: clamp(2.4rem, 1.4rem + 3.2vw, 4rem); font-weight: 340; line-height: 1.04; letter-spacing: -.035em; }
.recht { max-width: 56rem; margin-top: clamp(2.5rem, 2rem + 2vw, 4rem); border-top: 1px solid var(--linie); }
.recht > div { display: grid; grid-template-columns: minmax(0, 16rem) minmax(0, 1fr); gap: .35rem 2rem; padding: 1.4rem 0; border-bottom: 1px solid var(--linie); }
.recht dt { font-size: var(--fs-klein); font-weight: 560; color: var(--anthrazit); padding-top: .1em; }
.recht dd { line-height: 1.6; overflow-wrap: anywhere; }
.recht a, .recht-seite .lead a { color: var(--anthrazit); text-underline-offset: 3px; }
@media (max-width: 600px) { .recht > div { grid-template-columns: minmax(0, 1fr); } }

/* Datenschutzerklärung: Abschnitte als ruhiger Fließtext */
.recht-text { max-width: 46rem; margin-top: clamp(2.5rem, 2rem + 2vw, 4rem); border-top: 1px solid var(--linie); }
.recht-text section { padding: 1.5rem 0; border-bottom: 1px solid var(--linie); }
.recht-text h2 { font-size: 1.1875rem; font-weight: 560; letter-spacing: -.01em; }
.recht-text p { margin-top: .5rem; line-height: 1.65; overflow-wrap: anywhere; }
.recht-text a { color: var(--anthrazit); text-underline-offset: 3px; }
.recht-stand { margin-top: 1.5rem; font-size: var(--fs-klein); color: var(--grau); }

/* ---------- Cookie-Hinweis (main.js) ---------- */
/* Kein Einwilligungs-Banner: die Seite setzt keine Cookies. Karte unten rechts (links stehen die Hauptknöpfe), blockiert nichts. */
.cookie-hinweis {
  position: fixed; right: var(--rand); bottom: var(--rand); z-index: 90; max-width: 340px;
  padding: 1rem 1.15rem 1.05rem; border-radius: var(--r-fenster); background: var(--weiss); color: var(--anthrazit-2);
  box-shadow: var(--schatten-fenster); font-size: var(--fs-klein); line-height: 1.55;
  opacity: 0; transform: translateY(12px); transition: opacity .45s var(--ease), transform .45s var(--ease);
}
.cookie-hinweis.ist-sichtbar { opacity: 1; transform: none; }
.cookie-hinweis strong { display: block; margin-bottom: .2rem; color: var(--anthrazit); font-size: 1rem; font-weight: 560; }
.cookie-hinweis-aktionen { display: flex; align-items: center; gap: 1.1rem; margin-top: .75rem; }
.cookie-hinweis-aktionen a { color: var(--anthrazit); text-underline-offset: 3px; }
@media (max-width: 600px) {
  .cookie-hinweis { left: .75rem; right: .75rem; bottom: .75rem; max-width: none; }
}
/* Rückmeldung zu cereno.me/#nicht-zaehlen (nur für uns, siehe Besucherzählung in main.js) */
.zaehl-meldung {
  position: fixed; left: 50%; top: 5.5rem; z-index: 95; transform: translateX(-50%); margin: 0;
  padding: .6rem 1rem; border-radius: 999px; background: var(--anthrazit); color: #fff; font-size: var(--fs-klein);
}
@media (prefers-reduced-motion: reduce) {
  .cookie-hinweis { transform: none; transition: opacity .2s linear; }
}