/* Aktions Tracker – zentrales Stylesheet
   Schriften (beide SIL Open Font License, lokal in vendor/fonts):
   Bricolage Grotesque (Überschriften), Public Sans (Text) */

@font-face { font-family: 'Bricolage Grotesque'; font-weight: 500 800; font-display: swap; src: url('../vendor/fonts/bricolage-grotesque-var.woff2') format('woff2'); }
@font-face { font-family: 'Public Sans'; font-weight: 400 700; font-display: swap; src: url('../vendor/fonts/public-sans-var.woff2') format('woff2'); }

/* ── Tokens ─────────────────────────────────────────────────────────────── */
:root {
  /* Farben */
  --tinte: #0b1c2e;        /* Text, dunkle Flächen */
  --marine: #14304d;       /* Markenblau der App */
  --marine-hell: #1f4a75;
  --amber: #f5a623;        /* nur Haupthandlung und "live" */
  --amber-tief: #b97708;
  --amber-hauch: #fdecc8;
  --papier: #ffffff;
  --nebel: #f3f6fa;
  --linie: #dde4ec;
  --grau: #55657a;         /* Nebentext, 5.9:1 auf Papier */
  --text-weich: #2b3d51;
  --erledigt: #188f7f;     /* Haken, Abschnittsmarke */
  --gruen: #1e8e4e; --lila: #5b2f8a; --rot: #c93a30; /* nur in den Beispielansichten der App */
  --auf-dunkel: rgba(255, 255, 255, .78);
  --linie-dunkel: rgba(255, 255, 255, .16);

  /* Schrift */
  --f-display: 'Bricolage Grotesque', 'Public Sans', 'Segoe UI', system-ui, sans-serif;
  --f-body: 'Public Sans', 'Segoe UI', system-ui, -apple-system, sans-serif;
  --f-data: var(--f-body); /* Marken und Zahlen: Textschrift */
  --t-klein: .8125rem;
  --t-neben: .9375rem;
  --t-text: 1.0625rem;
  --t-vorspann: 1.2rem;
  --t-h3: 1.4rem;
  --t-h2: clamp(1.9rem, 3.4vw, 3rem);
  --t-h1: clamp(2.4rem, 4.2vw, 3.7rem);

  /* Abstände */
  --rand: clamp(1.25rem, 5vw, 4.5rem);
  --band: clamp(3.5rem, 7vw, 5.5rem);
  --a1: .5rem; --a2: 1rem; --a3: 1.5rem; --a4: 2.5rem; --a5: 4rem;

  --radius: 10px;
  --radius-gross: 18px;
  --schatten: 0 1px 2px rgba(11, 28, 46, .06), 0 12px 32px -12px rgba(11, 28, 46, .18);
  --kopf-hoehe: 4rem;
  --geraet-b: 17.5rem;      /* Außenbreite eines Geräterahmens; je Einsatzort überschrieben */
}

/* ── Grundlage ──────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--kopf-hoehe) + 1rem); -webkit-text-size-adjust: 100%; }
body { margin: 0; font-family: var(--f-body); font-size: var(--t-text); line-height: 1.6; color: var(--tinte); background: var(--papier); -webkit-font-smoothing: antialiased; }
img { max-width: 100%; height: auto; display: block; }
h1, h2, h3, h4, p, ul, ol, dl, dd, figure, blockquote { margin: 0; }
ul, ol { padding: 0; list-style: none; }
a { color: inherit; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
strong, b { font-weight: 600; }
:focus-visible { outline: 3px solid var(--marine); outline-offset: 3px; border-radius: 2px; }
.band--tinte :focus-visible, .kontakt :focus-visible, .fuss :focus-visible { outline-color: var(--amber); }
[hidden] { display: none !important; }
.zusammen { white-space: nowrap; }
.nur-vorlesen { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.sprung { position: absolute; left: var(--rand); top: -4rem; z-index: 60; background: var(--tinte); color: #fff; padding: .6rem 1rem; border-radius: var(--radius); }
.sprung:focus { top: .5rem; }

h1, h2, h3 { font-family: var(--f-display); font-weight: 700; letter-spacing: -.02em; text-wrap: balance; }
h1 { font-size: var(--t-h1); line-height: 1.04; }
h2 { font-size: var(--t-h2); line-height: 1.05; }
h3 { font-size: var(--t-h3); line-height: 1.2; }

/* ── Raster ─────────────────────────────────────────────────────────────── */
.rahmen { max-width: 80rem; margin-inline: auto; padding-inline: var(--rand); }
.band { padding-block: var(--band); }
.band--nebel { background: var(--nebel); }
.band--tinte { background: var(--tinte); color: #fff; }

/* Abschnitt: kleine Marke über der Überschrift, darunter der Inhalt */
.gliederung { display: block; }
.randspalte { font-family: var(--f-body); font-size: var(--t-klein); font-weight: 700; line-height: 1.4; letter-spacing: .1em; text-transform: uppercase; color: var(--erledigt); margin: 0 0 .8rem; }
.band--tinte .randspalte { color: var(--amber); }
.vorspann { font-size: var(--t-vorspann); color: var(--text-weich); max-width: 38em; margin-top: var(--a2); }
.band--tinte .vorspann { color: var(--auf-dunkel); }
.inhalt > * + * { margin-top: var(--a4); }
.inhalt > h2 + .vorspann { margin-top: var(--a2); }

/* ── Knöpfe und Verweise ────────────────────────────────────────────────── */
.knopf { display: inline-flex; align-items: center; justify-content: center; gap: .6rem; padding: .85rem 1.5rem; border: 0; border-radius: 999px; background: var(--amber); color: var(--tinte); font-weight: 700; text-decoration: none; transition: transform .15s ease, box-shadow .15s ease, background-color .15s ease; }
.knopf:hover { transform: translateY(-1px); box-shadow: 0 8px 20px -8px rgba(245, 166, 35, .7); }
.knopf:active { transform: none; box-shadow: none; }
.knopf--klein { padding: .55rem 1.1rem; font-size: var(--t-neben); }
.knopf--breit { width: 100%; }
.knopf--tinte { background: var(--tinte); color: #fff; box-shadow: none; }
.knopf--tinte:hover { background: var(--marine); box-shadow: none; }
.knopf--linie { background: transparent; color: var(--tinte); box-shadow: inset 0 0 0 1.5px var(--tinte); }
.knopf--linie:hover { background: var(--tinte); color: #fff; box-shadow: inset 0 0 0 1.5px var(--tinte); }
.knopf--hell { background: transparent; color: #fff; box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .55); }
.knopf--hell:hover { background: #fff; color: var(--tinte); box-shadow: inset 0 0 0 1.5px #fff; }
.knopf[disabled] { opacity: .6; cursor: wait; transform: none; }

.verweis { font-weight: 600; text-decoration: none; border-bottom: 2px solid var(--linie); padding-bottom: .12rem; transition: border-color .15s ease; }
.verweis:hover { border-color: currentColor; }
.band--tinte .verweis, .kontakt .verweis { border-color: var(--linie-dunkel); }
.textlink { text-decoration: underline; text-decoration-color: var(--linie); text-underline-offset: .22em; text-decoration-thickness: 2px; }
.textlink:hover { text-decoration-color: currentColor; }

.schild { display: inline-block; font-family: var(--f-data); font-size: .7rem; letter-spacing: .05em; text-transform: uppercase; font-weight: 700; padding: .15rem .5rem; border-radius: 4px; border: 1px solid var(--linie); vertical-align: middle; white-space: nowrap; }
.schild--amber { background: var(--amber-hauch); border-color: #f3d38e; }
.schild--marine { background: var(--marine); border-color: var(--marine); color: #fff; }
.leise { font-size: var(--t-neben); color: var(--grau); }
.oben-1 { margin-top: .6rem; } .oben-2 { margin-top: var(--a2); } .oben-3 { margin-top: var(--a3); }
.schmal { max-width: 44em; }

/* Listen mit Haken / Strich */
.haken > li { position: relative; padding-left: 1.7rem; }
.haken > li + li { margin-top: .55rem; }
.haken > li::before { content: ""; position: absolute; left: .3rem; top: .42em; width: .42em; height: .78em; border: solid var(--erledigt); border-width: 0 2px 2px 0; transform: rotate(45deg); }
.haken > li.fehlt { color: var(--grau); }
.haken > li.fehlt::before { width: .7em; height: 0; top: .78em; left: .2rem; border-width: 0 0 2px 0; border-color: #a3b0be; transform: none; }
.band--tinte .haken > li::before, .kontakt .haken > li::before, .block-marine .haken > li::before { border-color: var(--amber); }

/* ── Kopfzeile ──────────────────────────────────────────────────────────── */
.kopf { position: sticky; top: 0; z-index: 50; background: rgba(11, 28, 46, .94); backdrop-filter: blur(10px); color: #fff; }
.kopf :focus-visible { outline-color: var(--amber); }
.kopf__zeile { display: flex; align-items: center; justify-content: space-between; gap: var(--a3); min-height: var(--kopf-hoehe); }
.marke { display: inline-flex; align-items: center; gap: .45rem; font-family: var(--f-display); font-weight: 700; font-size: 1.25rem; letter-spacing: -.01em; text-decoration: none; }
/* Bildmarke wie das App-Icon: Marineblau, weißes AT, türkiser Strich mit Punkt */
.marke__zeichen { position: relative; width: 32px; height: 32px; flex: none; border-radius: 8px; background: linear-gradient(225deg, #24507d, #1a3a5c); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .2); color: #fff; display: grid; place-items: center; padding-bottom: 6px; font-family: var(--f-body); font-size: .82rem; font-weight: 800; letter-spacing: -.02em; }
.marke__zeichen::after { content: ""; position: absolute; left: 6px; right: 6px; bottom: 7px; height: 2.5px; border-radius: 2px; background: linear-gradient(90deg, #00c8b4 0 74%, transparent 74% 86%, #00c8b4 86%); }
.kopf__nav { display: flex; align-items: center; gap: clamp(1rem, 2.2vw, 2rem); }
.kopf__links { display: flex; gap: clamp(1rem, 2.2vw, 2rem); font-size: var(--t-neben); }
.kopf__links a { text-decoration: none; padding-block: .4rem; border-bottom: 2px solid transparent; color: rgba(255, 255, 255, .85); }
.kopf__links a:hover { color: #fff; }
.kopf__links a:hover { border-color: var(--amber); }
.kopf__schalter { display: none; width: 44px; height: 44px; background: none; border: 0; padding: 0; align-items: center; justify-content: center; }
.kopf__schalter span, .kopf__schalter span::before, .kopf__schalter span::after { display: block; width: 22px; height: 2px; background: #fff; border-radius: 2px; }
.kopf__schalter span { position: relative; }
.kopf__schalter span::before, .kopf__schalter span::after { content: ""; position: absolute; left: 0; }
.kopf__schalter span::before { top: -7px; }
.kopf__schalter span::after { top: 7px; }

/* ── Live-Demo ──────────────────────────────────────────────────────────── */
.zweispalter { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: clamp(2rem, 5vw, 4.5rem); align-items: start; }
.zweispalter > div > * + * { margin-top: var(--a3); }
.kasten { border: 1px solid var(--linie); border-radius: var(--radius-gross); padding: clamp(1.25rem, 3vw, 2rem); background: var(--papier); }
.kasten__titel { font-family: var(--f-data); font-size: var(--t-klein); letter-spacing: .05em; text-transform: uppercase; font-weight: 700; color: var(--grau); margin-bottom: var(--a2); }
.spalten-2 { columns: 2; column-gap: 2rem; }
.spalten-2 > li { break-inside: avoid; }
.merksatz { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--linie); margin-top: var(--a3); }
.merksatz > div { padding: 1rem 1rem 0 0; }
.merksatz dt { font-family: var(--f-display); font-weight: 700; font-size: 1.25rem; line-height: 1.15; }
.merksatz dd { font-size: var(--t-neben); color: var(--grau); margin-top: .2rem; }
.notiz { font-size: var(--t-neben); color: var(--text-weich); border-left: 3px solid var(--amber); padding: .2rem 0 .2rem 1rem; }
.notiz--gross { font-size: var(--t-text); max-width: 46em; }

/* ── Vom Chaos zur Klarheit ─────────────────────────────────────────────── */
.chaos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--a3); }
.zettel { border: 1px solid var(--linie-dunkel); border-radius: var(--radius-gross); background: rgba(255, 255, 255, .05); overflow: hidden; font-size: var(--t-neben); }
.zettel__kopf { padding: .7rem 1rem; border-bottom: 1px solid var(--linie-dunkel); font-family: var(--f-data); font-size: .78rem; color: var(--auf-dunkel); overflow-wrap: anywhere; }
.zettel__inhalt { padding: 1rem; }
.chat > * + * { margin-top: .5rem; }
.chat__msg { max-width: 88%; padding: .5rem .75rem; border-radius: 10px; background: rgba(255, 255, 255, .1); }
.chat__msg--ich { margin-left: auto; background: var(--marine); }
.chat__name { display: block; font-size: .75rem; font-weight: 600; color: var(--amber); }
.chat__ungelesen { text-align: center; font-size: .82rem; color: var(--amber); padding-top: .5rem; border-top: 1px solid var(--linie-dunkel); }
.excel { width: 100%; border-collapse: collapse; font-family: var(--f-data); font-size: .84rem; }
.excel th, .excel td { text-align: left; padding: .4rem .5rem; border-bottom: 1px solid var(--linie-dunkel); }
.excel th { color: var(--auf-dunkel); font-weight: 400; }
.excel .luecke { color: #f08a8a; }
.zettel__fuss { font-size: .78rem; font-style: italic; color: var(--auf-dunkel); margin-top: .7rem; }
.mail__meta { font-size: .8rem; color: var(--auf-dunkel); }
.mail__text { margin-top: .6rem; padding: .6rem .8rem; border-left: 3px solid var(--amber); background: rgba(255, 255, 255, .06); }
.mail__faden { margin-top: .6rem; font-size: .82rem; color: var(--auf-dunkel); }

.ansichten { margin-top: var(--a5); }
.ansichten__titel { margin: 0 0 var(--a3); }
.ansichten__reiter { display: inline-flex; gap: .25rem; padding: .3rem; border: 1px solid var(--linie-dunkel); border-radius: 999px; }
.ansichten__reiter button { border: 0; background: transparent; color: var(--auf-dunkel); font-weight: 600; font-size: var(--t-neben); padding: .5rem 1.2rem; border-radius: 999px; min-height: 44px; transition: background-color .15s ease, color .15s ease; }
.ansichten__reiter button[aria-selected="true"] { background: var(--papier); color: var(--tinte); }
/* Wischreihe: Geräte in einer Zeile, rastet je Gerät ein (Scroll-Snap, kein Skript).
   Breite je Gerät aus der Reihenbreite (cqw); ohne Container-Einheiten bleibt der feste Wert. */
.galerie { container-type: inline-size; display: flex; gap: var(--a3); margin: var(--a3) -.375rem 0; padding: .5rem .375rem .8rem; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: .375rem; scrollbar-width: thin; scrollbar-color: rgba(255, 255, 255, .3) transparent; }
.galerie[hidden] { display: none; }
.galerie figure { --geraet-b: 11.875rem; flex: none; width: var(--geraet-b); scroll-snap-align: start; }
@supports (width: 1cqw) {
  .galerie figure { --geraet-b: clamp(11rem, calc((100cqw - 4 * var(--a3)) / 5), 13.25rem); }
}
.galerie .geraet { transition: transform .2s ease; }
.galerie .geraet:hover { transform: translateY(-4px); }
.galerie figcaption { margin-top: 1rem; font-size: .86rem; color: var(--auf-dunkel); }
.galerie figcaption b { display: block; color: #fff; font-size: var(--t-neben); }
/* Raster statt Wischreihe: Desktop-Aufnahmen im Fensterrahmen, 2 × 2 */
.galerie--raster { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--a4) var(--a3); overflow: visible; scroll-snap-type: none; }
.galerie--raster figure { width: auto; }
/* Fensterrahmen um eine Desktop-Aufnahme (Stil wie .fenster im Einstieg): Titelleiste mit drei Punkten als Pseudo-Element */
.bildfenster { display: block; width: 100%; padding: 0; border: 0; border-radius: 12px; overflow: hidden; background: var(--marine); box-shadow: 0 0 0 1px rgba(255, 255, 255, .14), 0 30px 60px -28px rgba(0, 0, 0, .7); transition: transform .2s ease; }
.bildfenster:hover { transform: translateY(-4px); }
.bildfenster::before { content: ""; display: block; height: 1.5rem; background: radial-gradient(circle closest-side, rgba(255, 255, 255, .34) 92%, transparent) 0.7rem 50% / .5rem .5rem no-repeat, radial-gradient(circle closest-side, rgba(255, 255, 255, .34) 92%, transparent) 1.5rem 50% / .5rem .5rem no-repeat, radial-gradient(circle closest-side, rgba(255, 255, 255, .34) 92%, transparent) 2.3rem 50% / .5rem .5rem no-repeat, #101d2c; }
.bildfenster img { width: 100%; }

/* ── Schritte (echte Reihenfolge) ───────────────────────────────────────── */
.ablauf { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--a3); counter-reset: schritt; }
.ablauf > li { counter-increment: schritt; background: var(--papier); border: 1px solid var(--linie); border-radius: var(--radius-gross); padding: 1.25rem; }
.ablauf > li::before { content: counter(schritt); display: grid; place-items: center; width: 2.1rem; height: 2.1rem; border-radius: 50%; background: var(--amber); color: var(--tinte); font-family: var(--f-display); font-weight: 800; margin-bottom: .8rem; }
.ablauf b { display: block; }
.ablauf span { display: block; font-size: var(--t-neben); color: var(--grau); margin-top: .2rem; }
.anstoss { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--a3); }
.anstoss p { max-width: 34em; }
.anstoss__wege { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem var(--a2); }
.anstoss__wege span { font-size: var(--t-neben); color: var(--text-weich); }
.anstoss small { display: block; font-size: var(--t-neben); color: var(--grau); margin-top: .35rem; }

/* ── Funktionen ─────────────────────────────────────────────────────────── */
.leitfunktion { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(1.5rem, 4vw, 3.5rem); }
.leitfunktion article { display: grid; grid-template-columns: minmax(0, 1fr) 11rem; gap: var(--a3); align-items: start; background: var(--nebel); border-radius: var(--radius-gross); padding: clamp(1.25rem, 2.5vw, 2rem); }
.leitfunktion p { color: var(--text-weich); margin-top: .6rem; }
.leitfunktion img { border-radius: 12px; box-shadow: 0 0 0 1px var(--linie), 0 24px 40px -24px rgba(15, 34, 56, .35); }
.merkmale { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--a2); }
.merkmale > li { background: var(--nebel); border-radius: var(--radius-gross); padding: 1.25rem 1.4rem; }
.merkmale h3 { font-size: 1.15rem; }
.merkmale p { font-size: var(--t-neben); color: var(--text-weich); margin-top: .45rem; }
.merkmale .schild { margin-left: .35rem; }
.merkmal__knopf { all: unset; box-sizing: border-box; display: flex; justify-content: space-between; align-items: center; gap: 1rem; width: 100%; min-height: 44px; cursor: pointer; }
.merkmal__knopf::after { content: ""; flex: none; width: .55rem; height: .55rem; border: solid var(--tinte); border-width: 0 2px 2px 0; transform: rotate(45deg); transition: transform .2s ease; margin-right: .3rem; }
.merkmal__knopf[aria-expanded="true"]::after { transform: rotate(225deg); }
.merkmal__knopf:focus-visible { outline: 3px solid var(--marine); outline-offset: 3px; border-radius: 2px; }
.haken.gekuerzt > li:nth-child(n+4) { display: none; }
.schalter-text { background: none; border: 0; border-bottom: 2px solid var(--linie); padding: .5rem 0 .15rem; font-weight: 600; font-size: var(--t-neben); min-height: 44px; margin-bottom: var(--a3); align-self: flex-start; }

.block-marine { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); background: var(--marine); color: #fff; border-radius: var(--radius-gross); overflow: hidden; }
.block-marine > div { padding: clamp(1.5rem, 4vw, 3rem); }
.block-marine > div > * + * { margin-top: var(--a2); }
.block-marine .block-marine__marker { font-family: var(--f-data); font-size: var(--t-klein); letter-spacing: .05em; text-transform: uppercase; font-weight: 700; color: var(--amber); }
.block-marine p, .block-marine li { color: rgba(255, 255, 255, .86); }
.block-marine__seite { border-left: 1px solid var(--linie-dunkel); display: flex; flex-direction: column; justify-content: center; background: rgba(15, 34, 56, .35); }
.block-marine .block-marine__zahl { font-family: var(--f-display); font-weight: 700; font-size: clamp(3rem, 6vw, 4.5rem); line-height: 1; color: var(--amber); }
.block-marine .block-marine__zeit { font-family: var(--f-display); font-weight: 700; font-size: 1.6rem; line-height: 1.1; color: var(--amber); }
.block-marine__fuss { padding-top: var(--a2); border-top: 1px solid var(--linie-dunkel); font-size: var(--t-neben); }
.block-marine--hell { background: var(--nebel); color: var(--tinte); border: 1px solid var(--linie); }
.block-marine--hell p, .block-marine--hell li { color: var(--text-weich); }
.block-marine--hell .block-marine__marker { color: var(--grau); }
.block-marine--hell .block-marine__seite { background: var(--papier); border-color: var(--linie); }
.block-marine--hell .block-marine__zeit { color: var(--tinte); }
.block-marine--hell .block-marine__fuss { border-color: var(--linie); }
.block-marine--hell .haken > li::before { border-color: var(--erledigt); }

/* ── Für wen ────────────────────────────────────────────────────────────── */
.gruppen { display: grid; gap: var(--a2); }
.gruppen > li { background: var(--papier); border: 1px solid var(--linie); border-radius: var(--radius-gross); padding: 1.1rem 1.3rem; }
.gruppen h3 { font-size: 1.2rem; }
.gruppen p { font-size: var(--t-neben); color: var(--text-weich); margin-top: .3rem; }

/* ── In 3 Schritten ─────────────────────────────────────────────────────── */
.startklar { counter-reset: start; }
.startklar > li { counter-increment: start; display: grid; grid-template-columns: 4rem minmax(0, 1fr) minmax(0, 1fr); gap: var(--a2) var(--a4); padding-block: var(--a3); border-top: 1px solid var(--linie-dunkel); }
.startklar > li:last-child { border-bottom: 1px solid var(--linie-dunkel); }
.startklar > li::before { content: counter(start); font-family: var(--f-display); font-weight: 700; font-size: 3rem; line-height: .9; color: var(--amber); }
.startklar small { display: block; font-family: var(--f-data); font-size: var(--t-klein); letter-spacing: .05em; text-transform: uppercase; font-weight: 700; color: var(--auf-dunkel); margin-bottom: .4rem; }
.startklar h3 { font-size: 1.25rem; }
.startklar p { font-size: var(--t-neben); color: var(--auf-dunkel); margin-top: .3rem; }

/* ── Eckdaten ───────────────────────────────────────────────────────────── */
.eckdaten { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--a3); }
.eckdaten > div { background: var(--nebel); border-radius: var(--radius-gross); padding: 1.25rem; }
.eckdaten dt { font-family: var(--f-display); font-weight: 700; font-size: clamp(1.8rem, 3.2vw, 2.5rem); line-height: 1; }
.eckdaten dd { font-size: var(--t-neben); color: var(--text-weich); margin-top: .5rem; }
.eckdaten dd small { display: block; color: var(--grau); font-size: var(--t-klein); margin-top: .15rem; }

/* ── Rechner ────────────────────────────────────────────────────────────── */
.rechner { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); border: 1px solid var(--linie); border-radius: var(--radius-gross); background: var(--papier); overflow: hidden; }
.rechner__eingabe { padding: clamp(1.25rem, 3vw, 2.25rem); border-right: 1px solid var(--linie); }
.rechner__ergebnis { padding: clamp(1.25rem, 3vw, 2.25rem); display: flex; flex-direction: column; gap: var(--a3); background: var(--nebel); }
.rechner h3 { font-size: 1.2rem; margin-bottom: var(--a3); }
.rk-field + .rk-field { margin-top: var(--a3); }
.rk-field label { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; font-size: var(--t-neben); font-weight: 600; margin-bottom: .6rem; }
.rk-field .val { font-family: var(--f-data); font-weight: 400; white-space: nowrap; }
.rk-field .hint { font-size: var(--t-klein); color: var(--grau); margin-top: .45rem; }
.rk-field input[type="range"] { -webkit-appearance: none; appearance: none; width: 100%; height: 28px; background: transparent; cursor: pointer; margin: 0; }
.rk-field input[type="range"]::-webkit-slider-runnable-track { height: 4px; border-radius: 4px; background: var(--linie); }
.rk-field input[type="range"]::-moz-range-track { height: 4px; border-radius: 4px; background: var(--linie); }
.rk-field input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 22px; height: 22px; margin-top: -9px; border-radius: 50%; background: var(--amber); border: 2px solid var(--tinte); }
.rk-field input[type="range"]::-moz-range-thumb { width: 18px; height: 18px; border-radius: 50%; background: var(--amber); border: 2px solid var(--tinte); }
.rk-field select { width: 100%; padding: .7rem .8rem; border-radius: var(--radius); border: 1px solid var(--linie); background: var(--papier); font-weight: 600; }
.rk-hero { background: var(--tinte); color: #fff; border-radius: var(--radius-gross); padding: 1.5rem; }
.rk-hero .label { font-family: var(--f-data); font-size: var(--t-klein); letter-spacing: .05em; text-transform: uppercase; font-weight: 700; color: var(--amber); }
.rk-hero .amount { font-family: var(--f-display); font-weight: 700; font-size: clamp(2.4rem, 5vw, 3.4rem); line-height: 1.05; font-variant-numeric: tabular-nums; margin-top: .3rem; }
.rk-hero .amount span { font-size: .4em; color: var(--auf-dunkel); }
.rk-hero .sub { font-size: var(--t-neben); color: var(--auf-dunkel); margin-top: .3rem; }
.rk-stat-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--a2); }
.rk-stat { background: var(--papier); border-radius: var(--radius); padding: .8rem 1rem; }
.rk-stat .rk-label { font-size: var(--t-klein); color: var(--grau); }
.rk-stat .rk-value { font-family: var(--f-display); font-weight: 700; font-size: 1.7rem; line-height: 1.15; font-variant-numeric: tabular-nums; }
.rk-stat .rk-value small { display: block; font-family: var(--f-body); font-weight: 400; font-size: var(--t-klein); color: var(--grau); }
.rk-amort { font-size: var(--t-neben); border-left: 3px solid var(--erledigt); padding-left: 1rem; }
.rk-cta { display: flex; flex-wrap: wrap; gap: var(--a2); }
.rk-disclaimer { grid-column: 1 / -1; font-size: var(--t-klein); color: var(--grau); padding: 1.1rem clamp(1.25rem, 3vw, 2.25rem); border-top: 1px solid var(--linie); background: var(--papier); }

/* ── Referenz ───────────────────────────────────────────────────────────── */
.zitat blockquote { font-family: var(--f-display); font-weight: 700; font-size: clamp(1.6rem, 3.3vw, 2.6rem); line-height: 1.18; letter-spacing: -.01em; max-width: 24em; text-wrap: pretty; }
.zitat blockquote::before { content: "„"; color: var(--amber); }
.zitat blockquote::after { content: "“"; color: var(--amber); }
.zitat figcaption { display: flex; align-items: center; gap: var(--a2); margin-top: var(--a4); }
.zitat figcaption img { width: 64px; height: 64px; border-radius: 50%; }
.zitat figcaption span { display: block; font-size: var(--t-neben); color: var(--grau); }

/* ── Preise ─────────────────────────────────────────────────────────────── */
[data-billing="monthly"] .billing-annual, [data-billing="annual"] .billing-monthly { display: none; }
.abrechnung { display: inline-flex; gap: .25rem; padding: .3rem; border: 1px solid var(--linie); border-radius: 999px; background: var(--papier); }
.abrechnung button { border: 0; background: transparent; font-weight: 600; font-size: var(--t-neben); padding: .5rem 1.2rem; border-radius: 999px; min-height: 44px; color: var(--grau); }
.abrechnung button[aria-pressed="true"] { background: var(--tinte); color: #fff; }
.abrechnung .schild { margin-left: .4rem; }
.abrechnung button[aria-pressed="true"] .schild { color: var(--tinte); }
.paket__zubuchbar { font-size: var(--t-klein); color: var(--text-weich); background: var(--nebel); border-radius: var(--radius); padding: .7rem .8rem; margin-bottom: var(--a3); }
.zusagen { display: flex; flex-wrap: wrap; gap: .5rem 2rem; font-size: var(--t-neben); color: var(--text-weich); }
.zusagen li { padding-left: 1.4rem; position: relative; }
.zusagen li::before { content: ""; position: absolute; left: .2rem; top: .42em; width: .42em; height: .78em; border: solid var(--erledigt); border-width: 0 2px 2px 0; transform: rotate(45deg); }
.pakete { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--a3); align-items: start; }
.paket { display: flex; flex-direction: column; border: 1px solid var(--linie); border-top: 4px solid var(--marine); border-radius: var(--radius-gross); background: var(--papier); padding: clamp(1.25rem, 2.5vw, 2rem); height: 100%; }
.paket--empfohlen { border-top-color: var(--amber); box-shadow: 0 30px 60px -36px rgba(15, 34, 56, .35); }
.paket__name { display: flex; justify-content: space-between; align-items: center; gap: .5rem; min-height: 1.7rem; margin: 0; font-family: var(--f-data); font-size: var(--t-klein); letter-spacing: .08em; text-transform: uppercase; font-weight: 700; color: var(--grau); }
.paket__preis { font-family: var(--f-display); font-weight: 700; font-size: 2.7rem; line-height: 1; font-variant-numeric: tabular-nums; margin-top: var(--a3); }
.paket__preis sub { font-family: var(--f-body); font-weight: 400; font-size: .95rem; color: var(--grau); vertical-align: baseline; margin-left: .15rem; bottom: 0; }
.paket__zeile { font-size: var(--t-neben); color: var(--grau); margin-top: .25rem; }
.paket__einmalig { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 0 1rem; margin-top: var(--a2); padding-top: var(--a2); border-top: 1px solid var(--linie); font-size: var(--t-neben); color: var(--text-weich); }
.paket__einmalig b { font-family: var(--f-data); font-weight: 400; color: var(--tinte); white-space: nowrap; }
.paket .haken { margin-block: var(--a3); font-size: var(--t-neben); flex: 1; }
.paket__mehr { font-size: var(--t-klein); color: var(--grau); margin-top: var(--a2); }
.individuell { display: grid; grid-template-columns: 12rem minmax(0, 1fr) auto; gap: var(--a3) var(--a4); align-items: center; border: 1.5px dashed #b8c4d1; border-radius: var(--radius-gross); padding: clamp(1.25rem, 2.5vw, 2rem); }
.individuell__preis { font-family: var(--f-display); font-weight: 700; font-size: 1.7rem; line-height: 1.1; }
.individuell small { display: block; font-size: var(--t-klein); color: var(--grau); }
.individuell .zusagen { margin-top: .6rem; font-size: var(--t-klein); }
.vergleich { font-size: var(--t-neben); color: var(--text-weich); border-left: 3px solid var(--amber); padding-left: 1rem; max-width: 58em; }
.zusatz { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--a3); margin-top: var(--a3); }
.zusatz[hidden] { display: none; }
.zusatz > li { border: 1px solid var(--linie); border-radius: var(--radius-gross); padding: clamp(1.1rem, 2vw, 1.6rem); background: var(--papier); }
.zusatz h4 { font-family: var(--f-display); font-weight: 700; font-size: 1.25rem; line-height: 1.2; margin: 0; }
.zusatz__kopf { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; flex-wrap: wrap; }
.zusatz__preis { font-family: var(--f-data); font-size: var(--t-neben); white-space: nowrap; }
.zusatz .haken { font-size: var(--t-neben); margin-top: var(--a2); }
.zusatz__fuss { font-size: var(--t-klein); color: var(--grau); margin-top: var(--a2); padding-top: .7rem; border-top: 1px solid var(--linie); }
.kleingedrucktes { font-size: var(--t-klein); color: var(--grau); max-width: 60em; }
.kleingedrucktes + .kleingedrucktes { margin-top: .6rem; }

/* ── Über mich ──────────────────────────────────────────────────────────── */
.brief { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--a2) clamp(2rem, 5vw, 4.5rem); align-items: start; }
.brief > p:not(:first-child) { grid-column: 2; }
.brief > p:first-child { grid-row: 1 / span 6; font-family: var(--f-display); font-weight: 700; font-size: clamp(1.6rem, 3vw, 2.2rem); line-height: 1.15; }
.brief > p:last-child { font-weight: 600; border-left: 3px solid var(--amber); padding-left: 1rem; margin-top: .5rem; }

/* ── Häufige Fragen ─────────────────────────────────────────────────────── */
.fragen { max-width: 52em; display: grid; gap: .6rem; }
.fragen details { background: var(--papier); border: 1px solid var(--linie); border-radius: var(--radius); padding-inline: 1.2rem; }
.fragen summary { display: flex; justify-content: space-between; align-items: center; gap: var(--a2); padding: 1.1rem 0; font-weight: 600; cursor: pointer; list-style: none; }
.fragen summary::-webkit-details-marker { display: none; }
.fragen summary::after { content: ""; flex: none; width: .6rem; height: .6rem; border: solid var(--tinte); border-width: 0 2px 2px 0; transform: rotate(45deg); transition: transform .2s ease; margin-right: .3rem; }
.fragen details[open] summary::after { transform: rotate(225deg); }
.fragen summary:hover { color: var(--marine); }
.fragen__antwort { padding-bottom: 1.3rem; color: var(--text-weich); max-width: 46em; }
.fragen__antwort > p + p { margin-top: .7rem; }
.fragen__antwort .leise { font-size: var(--t-neben); color: var(--grau); }

/* ── Kontakt ────────────────────────────────────────────────────────────── */
.kontakt { background: var(--marine); color: #fff; padding-block: var(--band); }
.kontakt__raster { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: clamp(2rem, 5vw, 5rem); align-items: start; }
.kontakt__text > * + * { margin-top: var(--a3); }
.kontakt__text p, .kontakt__text li { color: rgba(255, 255, 255, .86); }
.kontakt__telefon { font-size: var(--t-vorspann); font-weight: 600; }
.kontakt__telefon a { color: var(--amber); text-underline-offset: 3px; white-space: nowrap; }
.kontakt__telefon small { display: block; margin-top: .2rem; font-size: var(--t-klein); font-weight: 400; color: var(--auf-dunkel); }
.kontakt__neben { padding-top: var(--a3); border-top: 1px solid var(--linie-dunkel); }
.kontakt__neben p { font-size: var(--t-neben); margin-bottom: var(--a2); }
.formular { background: var(--papier); color: var(--tinte); border-radius: var(--radius-gross); padding: clamp(1.25rem, 3.5vw, 2.5rem); }
.formular h3 { margin-bottom: var(--a3); }
.formular__felder { display: grid; grid-template-columns: 1fr 1fr; gap: var(--a2); }
.formular__felder .ganz { grid-column: 1 / -1; }
.formular label { display: block; font-size: var(--t-neben); font-weight: 600; margin-bottom: .35rem; }
.formular label span { font-weight: 400; color: var(--grau); }
.formular input, .formular textarea { width: 100%; padding: .75rem .85rem; border: 1px solid #b8c4d1; border-radius: var(--radius); background: var(--papier); }
.formular input:focus, .formular textarea:focus { outline: 3px solid var(--marine); outline-offset: 1px; border-color: var(--marine); }
.formular ::placeholder { color: #8795a4; }
.formular__fehler { font-size: var(--t-neben); color: #a3261c; margin-top: .7rem; }
.formular__hinweis { font-size: var(--t-klein); color: var(--grau); text-align: center; margin-top: .7rem; }
.formular__danke { text-align: center; padding-block: var(--a4); }
.formular__danke p { color: var(--grau); margin-top: .5rem; }
.formular__danke[hidden] { display: none; }

/* ── Fuß ────────────────────────────────────────────────────────────────── */
.fuss { background: var(--tinte); color: var(--auf-dunkel); font-size: var(--t-neben); padding-block: var(--a4); }
.fuss__zeile { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: var(--a2) var(--a4); }
.fuss .marke { color: #fff; font-size: 1.25rem; }
.fuss nav { display: flex; flex-wrap: wrap; gap: .5rem var(--a3); }
.fuss a:not(.marke) { text-decoration: none; border-bottom: 1px solid var(--linie-dunkel); }
.fuss a:not(.marke):hover, .fuss__knopf:hover { color: #fff; border-color: #fff; }
.fuss__knopf { padding: 0; border: 0; border-bottom: 1px solid var(--linie-dunkel); background: none; }
.fuss__meldung { flex-basis: 100%; color: #fff; }
.fuss__meldung:empty { display: none; }

/* ── Großansicht der Screenshots ────────────────────────────────────────── */
.grossbild { position: fixed; inset: 0; z-index: 80; display: none; align-items: center; justify-content: center; gap: var(--a2); padding: var(--a2); background: rgba(9, 20, 34, .94); color: #fff; }
.grossbild.offen { display: flex; }
.grossbild__mitte { display: flex; flex-direction: column; align-items: center; max-width: min(90vw, 26rem); }
.grossbild img { max-height: 70vh; width: auto; border-radius: 12px; }
.grossbild__text { text-align: center; margin-top: var(--a2); }
.grossbild__text small { display: block; color: var(--auf-dunkel); }
.grossbild__zaehler { font-family: var(--f-data); font-size: var(--t-klein); margin-top: .4rem; }
.grossbild__knopf { width: 48px; height: 48px; flex: none; border-radius: 50%; border: 1.5px solid rgba(255, 255, 255, .5); background: transparent; color: #fff; font-size: 1.3rem; line-height: 1; }
.grossbild__knopf:hover { background: #fff; color: var(--tinte); }
.grossbild__zu { position: absolute; top: var(--a2); right: var(--a2); }
.grossbild .ansichten__reiter { margin-bottom: var(--a2); }
.grossbild--breit .grossbild__mitte { max-width: min(100%, 78rem); min-width: 0; }
.grossbild__bild { display: contents; }
.grossbild--breit img { width: 100%; object-fit: contain; }
/* Desktop-Aufnahme auf dem Handy: vergrößert und im Rahmen verschiebbar, damit die Schrift lesbar bleibt */
@media (max-width: 40rem) {
  .grossbild--breit .grossbild__bild { display: block; max-width: 100%; max-height: 62vh; overflow: auto; border-radius: 12px; }
  .grossbild--breit .grossbild__bild img { width: 240%; max-width: none; max-height: none; border-radius: 0; }
}

/* ── Einwilligung ───────────────────────────────────────────────────────── */
.einwilligung { position: fixed; z-index: 70; left: var(--a2); right: var(--a2); bottom: var(--a2); max-width: 46rem; margin-inline: auto; display: none; align-items: center; gap: var(--a2) var(--a3); padding: 1rem 1.25rem; background: var(--tinte); color: rgba(255, 255, 255, .9); border-radius: var(--radius-gross); box-shadow: 0 20px 50px -20px rgba(0, 0, 0, .5); font-size: var(--t-neben); }
.einwilligung p { flex: 1; }
.einwilligung a { color: #fff; }
.einwilligung__kurz { display: none; }
.wischen { display: none; font-size: var(--t-klein); color: var(--grau); margin: 0 0 .5rem; }
.band--tinte .zitat figcaption span { color: var(--auf-dunkel); }
.einwilligung__knoepfe { display: flex; gap: .6rem; flex: none; }
.einwilligung button { min-height: 44px; padding: .55rem 1.1rem; border-radius: 999px; font-weight: 600; background: transparent; color: #fff; border: 1.5px solid rgba(255, 255, 255, .7); }
.einwilligung button:hover { background: #fff; color: var(--tinte); }

/* ── Einblenden beim Scrollen (Klasse setzt nur das Skript) ─────────────── */
.einblenden { opacity: 0; transform: translateY(18px); transition: opacity .6s ease, transform .6s cubic-bezier(.2, .7, .2, 1); }
.einblenden.sichtbar { opacity: 1; transform: none; }

/* ── Einstieg ───────────────────────────────────────────────────────────── */
.einstieg { background: radial-gradient(75rem 38rem at 78% 30%, var(--marine-hell) 0%, transparent 60%), linear-gradient(180deg, var(--tinte), var(--marine)); color: #fff; padding-top: clamp(2.5rem, 6vw, 4.5rem); overflow: hidden; }
.einstieg :focus-visible { outline-color: var(--amber); }
.einstieg__raster { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(2rem, 4vw, 3rem); align-items: start; }
.einstieg__raster > * { min-width: 0; }
.einstieg__text { padding-bottom: clamp(2rem, 5vw, 3.5rem); }
.einstieg__marker { display: inline-flex; align-items: center; gap: .5rem; font-size: .85rem; font-weight: 600; padding: .35rem .8rem; border-radius: 999px; background: rgba(255, 255, 255, .1); margin-bottom: 1.4rem; }
.einstieg__marker::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--amber); }
.einstieg h1 em { font-style: normal; color: var(--amber); }
.einstieg__vorspann { font-size: var(--t-vorspann); color: var(--auf-dunkel); margin: 1.3rem 0 2rem; max-width: 30em; }
.tueren__titel { font-size: .8rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--auf-dunkel); margin-bottom: .7rem; }
.tueren { display: grid; grid-template-columns: 1fr 1fr; gap: .8rem; }
.tuer { display: grid; gap: .15rem; align-content: start; padding: 1rem 1.1rem; border-radius: 14px; text-decoration: none; transition: transform .15s ease, background-color .15s ease, box-shadow .15s ease; }
.tuer b { display: flex; justify-content: space-between; align-items: center; gap: .5rem; font-family: var(--f-display); font-weight: 700; font-size: 1.15rem; }
.tuer span { font-size: .88rem; }
.tuer--haupt { background: var(--amber); color: var(--tinte); }
.tuer--haupt:hover { box-shadow: 0 10px 24px -10px rgba(245, 166, 35, .8); }
.tuer--zweit { background: rgba(255, 255, 255, .08); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .28); }
.tuer--zweit span { color: var(--auf-dunkel); }
.tuer--zweit:hover { background: rgba(255, 255, 255, .15); }
.tuer:hover { transform: translateY(-2px); }
.einstieg__hinweis { font-size: .88rem; color: var(--auf-dunkel); margin-top: .9rem; }
.einstieg__hinweis a { color: #fff; text-underline-offset: 3px; }

/* Bühne: vorn ein echter App-Screenshot im Geräterahmen, dahinter die nachgebaute Team-Übersicht.
   Höhe eines Geräts = Breite × 2,25 (Rahmen + Schirm 390:910). */
.buehne { --geraet-b: 16.5rem; position: relative; min-height: calc(var(--geraet-b) * 2.15 + 1.75rem); padding-bottom: 3rem; }
.fenster { margin: 2.25rem -9rem 0 16rem; background: var(--nebel); color: var(--tinte); border-radius: 14px 14px 0 0; box-shadow: 0 30px 80px -20px rgba(0, 0, 0, .6); overflow: hidden; font-size: .78rem; line-height: 1.45; }
/* Wie die App seit 2026.10.2: schlanke Kopfzeile (Eintragen-Knopf, Glocke, Konto) und Seitenleiste nach Bereichen */
.fenster__leiste { font-size: .74rem; display: flex; gap: .7rem; align-items: center; padding: .5rem .9rem; background: var(--marine); color: #fff; font-weight: 600; white-space: nowrap; overflow: hidden; }
.fenster__leiste b { font-family: var(--f-display); font-weight: 700; font-size: .95rem; }
.fenster__knopf { background: var(--amber); color: var(--tinte); border-radius: 6px; padding: .22rem .6rem; font-weight: 700; }
.fenster__glocke { margin-left: auto; position: relative; display: inline-flex; opacity: .9; }
.fenster__glocke i { position: absolute; top: -.4rem; right: -.55rem; background: var(--rot); color: #fff; font-style: normal; font-size: .58rem; line-height: 1; padding: .12rem .28rem; border-radius: 999px; }
.fenster__nutzer { display: inline-flex; align-items: center; gap: .4rem; margin-left: .5rem; }
.fenster__nutzer i { font-style: normal; font-size: .62rem; background: var(--marine-hell); border: 1px solid rgba(255, 255, 255, .35); border-radius: 999px; width: 1.55rem; height: 1.55rem; display: inline-grid; place-items: center; }
.fenster__rumpf { display: grid; grid-template-columns: 7.6rem minmax(0, 1fr); }
/* Neben der Seitenleiste bleibt weniger Breite: Kacheln kleiner, die beiden Tafeln untereinander */
.fenster__rumpf .app-kachel { padding: .55rem .6rem; }
.fenster__rumpf .app-kachel b { font-size: 1.2rem; }
.fenster__rumpf .fenster__zwei { grid-template-columns: minmax(0, 1fr); }
.fenster__seite { display: flex; flex-direction: column; gap: .05rem; padding: .7rem .4rem .7rem .9rem; background: var(--papier); border-right: 1px solid var(--linie); font-size: .68rem; white-space: nowrap; overflow: hidden; }
.fenster__seite small { font-size: .58rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--grau); margin: .55rem .4rem .15rem; }
.fenster__seite small:first-child { margin-top: 0; }
.fenster__seite span { padding: .22rem .4rem; border-radius: 6px; color: var(--text-weich); }
.fenster__seite span.an { background: #e6eef7; color: var(--marine); font-weight: 700; box-shadow: inset 2px 0 0 var(--marine-hell); }
.fenster__seite span i { font-style: normal; font-size: .58rem; background: var(--rot); color: #fff; border-radius: 999px; padding: .05rem .3rem; margin-left: .2rem; }
.fenster__inhalt { display: grid; gap: .8rem; padding: .9rem; align-content: start; }
.app-kacheln { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .6rem; }
.app-kachel { border-radius: 10px; color: #fff; padding: .7rem .8rem; }
.app-kachel small { display: block; opacity: .88; font-size: .7rem; }
.app-kachel b { font-family: var(--f-display); font-weight: 700; font-size: 1.6rem; line-height: 1.1; font-variant-numeric: tabular-nums; }
.app-kachel--1 { background: linear-gradient(135deg, #1f4a75, #2e6da4); }
.app-kachel--2 { background: linear-gradient(135deg, #a86f06, #d9921a); }
.app-kachel--3 { background: linear-gradient(135deg, #17713e, #24914f); }
.app-kachel--4 { background: linear-gradient(135deg, #4a2470, #7a45ad); }
.fenster__zwei { display: grid; grid-template-columns: 1.15fr 1fr; gap: .8rem; }
.tafel { background: var(--papier); border: 1px solid var(--linie); border-radius: 10px; overflow: hidden; }
.tafel__kopf { display: flex; justify-content: space-between; align-items: center; padding: .5rem .8rem; font-weight: 700; border-bottom: 1px solid var(--linie); }
.tzeile { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: .7rem; align-items: center; padding: .5rem .8rem; border-bottom: 1px solid #eef2f6; }
.tzeile--ohne { grid-template-columns: minmax(0, 1fr) auto; }
.tzeile:last-child { border-bottom: 0; }
.tzeile small { display: block; color: var(--grau); }
.kuerzel { width: 26px; height: 26px; border-radius: 7px; display: grid; place-items: center; font-weight: 800; font-size: .7rem; color: #fff; background: var(--marine-hell); }
.kuerzel--2 { background: var(--erledigt); } .kuerzel--3 { background: var(--rot); } .kuerzel--4 { background: var(--lila); }
.etikett { font-size: .66rem; font-weight: 700; padding: .12rem .5rem; border-radius: 999px; white-space: nowrap; text-align: center; }
.etikett--aufbau { background: #e3f4ea; color: #17613a; }
.etikett--bestellung { background: var(--amber-hauch); color: #7a5206; }
.etikett--besuch { background: #e6eef7; color: var(--marine-hell); }
.etikett--hoch { background: #fbe3e1; color: #9c2a22; }
.etikett--neu { background: var(--amber); color: var(--tinte); }

.buehne .geraet { position: absolute; left: 0; top: 0; z-index: 2; }
.paar { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; }
.fotofeld { min-height: 2.9rem; border-radius: 9px; background: repeating-linear-gradient(135deg, #d9e3ee 0 8px, #e8eef5 8px 16px); display: grid; place-items: center; color: var(--grau); font-weight: 700; font-size: .68rem; }
.meldung { position: absolute; z-index: 3; left: 18.5rem; bottom: 3.2rem; display: flex; gap: .7rem; align-items: center; max-width: 16rem; padding: .7rem .9rem; background: var(--papier); color: var(--tinte); border-radius: 12px; border-left: 4px solid var(--erledigt); box-shadow: var(--schatten); font-size: .82rem; line-height: 1.4; }
.meldung small { display: block; color: var(--grau); }
.meldung svg { width: 22px; height: 22px; flex: none; color: var(--erledigt); }
.buehne__fuss { position: absolute; right: 0; bottom: .8rem; font-size: .75rem; color: var(--auf-dunkel); }

/* ── Geräterahmen ───────────────────────────────────────────────────────────
   Rahmen rein per CSS um ein normales Bild: <figure|button class="geraet"><span class="geraet__schirm"><img></span>.
   Statusleiste, Kamera-Punkt und Home-Balken sind Pseudo-Elemente, nicht ins Bild gemalt.
   Größe allein über --geraet-b (Außenbreite). --leiste = Kopffarbe der App hinter der Statusleiste (wie am echten Gerät dunkelblau, Schrift weiß), --fuss = Farbe am unteren Bildrand. */
.geraet {
  --leiste: #1a3a5c; --fuss: #1a3a5c; --fuss-balken: rgba(255, 255, 255, .85);
  --_rand: calc(var(--geraet-b) * .032); --_radius: calc(var(--geraet-b) * .135);
  position: relative; display: block; flex: none; width: var(--geraet-b); margin: 0; padding: var(--_rand); border: 0; border-radius: var(--_radius);
  background: linear-gradient(145deg, #2a323d, #10151c 38%, #0b0f14);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .22), inset 0 0 0 calc(var(--_rand) * .34) #161c24, 0 0 0 1px #05080c, 0 calc(var(--geraet-b) * .01) calc(var(--geraet-b) * .02) rgba(11, 28, 46, .16), 0 calc(var(--geraet-b) * .09) calc(var(--geraet-b) * .16) calc(var(--geraet-b) * -.06) rgba(4, 10, 18, .55);
}
.geraet:focus-visible { border-radius: var(--_radius); }
/* seitliche Tasten, nur angedeutet */
.geraet::before, .geraet::after { content: ""; position: absolute; width: calc(var(--geraet-b) * .009); background: #1b222b; border-radius: 1px; }
.geraet::before { left: calc(var(--geraet-b) * -.009); top: 21%; height: 7%; box-shadow: 0 calc(var(--geraet-b) * .2) 0 #1b222b; }
.geraet::after { right: calc(var(--geraet-b) * -.009); top: 27%; height: 11%; }
.geraet__schirm { display: flex; flex-direction: column; overflow: hidden; aspect-ratio: 390 / 866; /* 44 Statusleiste + 800 Bild (Aufnahme 1080 × 2216) + 22 Fuß */ border-radius: calc(var(--_radius) - var(--_rand)); background: var(--leiste); }
/* Statusleiste: Uhrzeit, Kamera-Punkt (Verlauf), Netz/WLAN/Akku (neutrale Formen als eingebettetes SVG) */
.geraet__schirm::before {
  content: "9:41"; flex: 44 0 0; display: flex; align-items: center; padding-left: 8.5%; text-align: left;
  font: 600 calc(var(--geraet-b) * .0415)/1 var(--f-body); letter-spacing: -.01em; font-variant-numeric: tabular-nums; color: #fff;
  background:
    radial-gradient(circle closest-side, #0b0f14 62%, #1c232d 66% 94%, transparent) 50% 38% / calc(var(--geraet-b) * .036) calc(var(--geraet-b) * .036) no-repeat,
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 70 12' fill='%23fff'%3E%3Crect y='8' width='3' height='4' rx='.8'/%3E%3Crect x='5' y='5.5' width='3' height='6.5' rx='.8'/%3E%3Crect x='10' y='3' width='3' height='9' rx='.8'/%3E%3Crect x='15' width='3' height='12' rx='.8'/%3E%3Cpath transform='translate(23)' d='M8 9.2a1.4 1.4 0 1 1 0 2.8 1.4 1.4 0 0 1 0-2.8ZM3.6 7.3a6.2 6.2 0 0 1 8.8 0l-1.3 1.3a4.4 4.4 0 0 0-6.2 0L3.6 7.3ZM.6 4.3a10.5 10.5 0 0 1 14.8 0l-1.3 1.3a8.6 8.6 0 0 0-12.2 0L.6 4.3Z'/%3E%3Cg transform='translate(44)'%3E%3Cpath fill-rule='evenodd' d='M3.5 0h16A3.5 3.5 0 0 1 23 3.5v5a3.5 3.5 0 0 1-3.5 3.5h-16A3.5 3.5 0 0 1 0 8.5v-5A3.5 3.5 0 0 1 3.5 0Zm0 1.2a2.3 2.3 0 0 0-2.3 2.3v5a2.3 2.3 0 0 0 2.3 2.3h16a2.3 2.3 0 0 0 2.3-2.3v-5a2.3 2.3 0 0 0-2.3-2.3h-16Z'/%3E%3Crect x='2.4' y='2.4' width='15' height='7.2' rx='1.4'/%3E%3Cpath d='M24.2 4v4c.9-.3 1.5-1.1 1.5-2s-.6-1.7-1.5-2Z'/%3E%3C/g%3E%3C/svg%3E") right calc(var(--geraet-b) * .07) center / auto calc(var(--geraet-b) * .034) no-repeat,
    var(--leiste);
}
.geraet__schirm img { flex: 800 0 0; width: 100%; min-height: 0; object-fit: cover; object-position: top; }
.geraet__schirm::after { content: ""; flex: 22 0 0; background: linear-gradient(var(--fuss-balken), var(--fuss-balken)) center / 35% calc(var(--geraet-b) * .012) no-repeat, var(--fuss); }
.geraet--abgedunkelt { --fuss: #0d1d2e; --fuss-balken: rgba(255, 255, 255, .6); } /* Motiv mit geöffnetem Dialog */

.fakten { background: var(--papier); border-bottom: 1px solid var(--linie); }
.fakten__raster { display: grid; grid-template-columns: 1.2fr repeat(3, 1fr); gap: 1.2rem 2rem; padding-block: 1.3rem; align-items: center; }
.fakten small { display: block; color: var(--grau); font-size: .8rem; }
.fakten b { font-family: var(--f-display); font-weight: 700; font-size: 1.12rem; line-height: 1.25; }
.fakten__ref { display: flex; align-items: center; gap: 1rem; }
.fakten__ref img { width: 46px; height: 46px; border-radius: 50%; }
.zusagen--leiste { justify-content: space-between; padding-block: .9rem; border-top: 1px solid var(--linie); }

/* ── Ein Besuch und was daraus entsteht ─────────────────────────────────── */
.kette { display: grid; grid-template-columns: 18.5rem minmax(0, 1fr); gap: clamp(1.5rem, 4vw, 3.5rem); align-items: start; }
.schritte { display: grid; gap: .6rem; position: sticky; top: calc(var(--kopf-hoehe) + 1.5rem); }
.schritt { display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: .8rem; align-items: start; width: 100%; text-align: left; padding: .9rem 1rem; background: var(--papier); border: 1px solid var(--linie); border-radius: 14px; transition: border-color .2s ease, box-shadow .2s ease; }
.schritt i { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: var(--nebel); color: var(--grau); font-family: var(--f-display); font-style: normal; font-weight: 800; transition: background-color .2s ease, color .2s ease; }
.schritt b { display: block; font-family: var(--f-display); font-weight: 700; font-size: 1.05rem; }
.schritt span { font-size: .88rem; color: var(--grau); }
.schritt.an { border-color: var(--marine); box-shadow: var(--schatten); }
.schritt.an i { background: var(--amber); color: var(--tinte); }
.folgen__titel { display: flex; align-items: center; gap: .6rem; font-weight: 700; margin-bottom: 1rem; }
.folgen__titel::before { content: "→"; color: var(--amber-tief); font-size: 1.4rem; line-height: 1; }
.folgen { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
.wirkung { display: grid; gap: .7rem; align-content: start; padding: 1.1rem; background: var(--papier); border: 1px solid var(--linie); border-radius: 14px; transition: opacity .35s ease, transform .35s ease, border-color .35s ease, box-shadow .35s ease; }
.kette.laeuft .wirkung { opacity: .72; }
.kette.laeuft .wirkung.an { opacity: 1; border-color: #b9c9da; box-shadow: var(--schatten); }
.kette.laeuft .wirkung.neu { transform: translateY(-4px); border-color: var(--amber); }
.wirkung__wer { font-size: .68rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--grau); }
.wirkung h3 { font-size: 1.1rem; line-height: 1.2; }
.wirkung p { font-size: .9rem; color: var(--grau); }
.mini { display: grid; gap: .4rem; padding: .7rem; background: var(--nebel); border-radius: 10px; font-size: .8rem; line-height: 1.4; }
.mini .tzeile { padding: .35rem 0; border-color: #e2e8ef; }
.mini__zahl { display: flex; justify-content: space-between; align-items: end; }
.mini__zahl b { font-family: var(--f-display); font-weight: 700; font-size: 1.7rem; line-height: 1; }
.balken { height: 8px; border-radius: 4px; background: var(--linie); overflow: hidden; }
.balken span { display: block; height: 100%; background: var(--erledigt); border-radius: 4px; }
.balken__stand { width: 62%; }

/* ── Mitgedacht: Wenn … dann … ──────────────────────────────────────────── */
.logik { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 1rem; }
.regel { grid-column: span 4; display: grid; gap: .9rem; align-content: start; padding: 1.5rem; background: var(--nebel); border-radius: var(--radius-gross); }
.regel--breit { grid-column: span 6; }
.regel--voll { grid-column: span 12; }
.regel .wenn { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; font-size: .9rem; font-weight: 700; color: #8a5a06; }
.regel .wenn::before { content: "Wenn"; font-size: .68rem; letter-spacing: .08em; text-transform: uppercase; background: rgba(200, 134, 10, .15); border-radius: 4px; padding: .1rem .4rem; }
.regel .dann { font-family: var(--f-display); font-weight: 700; font-size: 1.4rem; line-height: 1.15; letter-spacing: -.01em; }
.regel--breit .dann { font-size: 1.65rem; }
.regel .mehr { font-size: .92rem; color: var(--grau); }
.regel .mini { background: var(--papier); }

/* ── Funktionsumfang in fünf Spalten ────────────────────────────────────── */
.umfang { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 1.5rem; }
.umfang h3 { font-size: 1.15rem; padding-bottom: .6rem; margin-bottom: .8rem; border-bottom: 3px solid var(--marine); }
.umfang > div:nth-child(2) h3 { border-color: var(--amber); }
.umfang > div:nth-child(3) h3 { border-color: var(--erledigt); }
.umfang > div:nth-child(4) h3 { border-color: var(--lila); }
.umfang > div:nth-child(5) h3 { border-color: var(--gruen); }
.umfang ul { display: grid; gap: .45rem; font-size: .93rem; }
.umfang li { position: relative; padding-left: 1.05rem; }
.umfang li::before { content: ""; position: absolute; left: 0; top: .72em; width: .55rem; height: 2px; background: var(--marine); }
.umfang > div:nth-child(2) li::before { background: var(--amber); }
.umfang > div:nth-child(3) li::before { background: var(--erledigt); }
.umfang > div:nth-child(4) li::before { background: var(--lila); }
.umfang > div:nth-child(5) li::before { background: var(--gruen); }
.schluss { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 1.2rem 2rem; padding: clamp(1.5rem, 3vw, 2.2rem) clamp(1.5rem, 3vw, 2.5rem); background: var(--tinte); color: #fff; border-radius: var(--radius-gross); }
.schluss h3 { font-size: clamp(1.3rem, 2.4vw, 1.7rem); }
.schluss p { color: var(--auf-dunkel); margin-top: .3rem; }
.schluss :focus-visible { outline-color: var(--amber); }
.schluss__knoepfe { display: flex; flex-wrap: wrap; gap: .7rem; }

/* ── Kleinere Bildschirme ───────────────────────────────────────────────── */
@media (max-width: 1000px) {
  .gliederung { grid-template-columns: minmax(0, 1fr); }
  .merkmale { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pakete { grid-template-columns: minmax(0, 1fr); max-width: 34rem; }
  .individuell { grid-template-columns: 1fr; }
  .leitfunktion { grid-template-columns: minmax(0, 1fr); }
  .block-marine { grid-template-columns: 1fr; }
  .block-marine__seite { border-left: 0; border-top: 1px solid var(--linie-dunkel); }
}
@media (max-width: 860px) {
  .kopf__schalter { display: inline-flex; }
  .kopf__nav { position: absolute; left: 0; right: 0; top: 100%; flex-direction: column; align-items: stretch; gap: 0; padding: .5rem var(--rand) 1.25rem; background: var(--tinte); box-shadow: 0 20px 30px -20px rgba(0, 0, 0, .5); display: none; }
  .kopf__nav.offen { display: flex; }
  .kopf__links { flex-direction: column; gap: 0; font-size: var(--t-text); }
  .kopf__links a { display: block; padding: .85rem 0; border-bottom: 1px solid var(--linie-dunkel); }
  .kopf__nav .knopf { margin-top: 1rem; }
  .zweispalter, .kontakt__raster, .rechner { grid-template-columns: 1fr; }
  .brief { grid-template-columns: minmax(0, 1fr); }
  .brief > p:first-child { grid-row: auto; }
  .brief > p:not(:first-child) { grid-column: auto; }
  .rechner__eingabe { border-right: 0; border-bottom: 1px solid var(--linie); }
  .chaos { grid-template-columns: 1fr; }
  .ablauf { grid-template-columns: 1fr; }
  .eckdaten { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .startklar > li { grid-template-columns: 2.6rem minmax(0, 1fr); column-gap: var(--a2); }
  .startklar > li > div { grid-column: 2; }
  .zusatz { grid-template-columns: 1fr; }
  .galerie { margin-inline: calc(var(--rand) * -1); padding-inline: var(--rand); scroll-padding-inline: var(--rand); }
  .galerie figure { scroll-snap-align: center; }
  @supports (width: 1cqw) { .galerie figure { --geraet-b: clamp(11rem, 66cqw, 15.5rem); } }
}
@media (max-width: 560px) {
  .galerie--raster { grid-template-columns: 1fr; }
  .merkmale { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .merkmale > li { padding-block: .35rem; }
  .merkmale p { padding-bottom: .8rem; margin-top: 0; }
  .abrechnung button { padding-inline: .8rem; white-space: nowrap; }
  .abrechnung .schild { font-size: .62rem; padding-inline: .35rem; }
  .paket .haken.gekuerzt { margin-bottom: .4rem; }
  .merksatz { grid-template-columns: 1fr; }
  .spalten-2 { columns: 1; }
  .leitfunktion article { grid-template-columns: minmax(0, 1fr) 7.5rem; }
  .formular__felder { grid-template-columns: 1fr; }
  .formular__felder > * { grid-column: 1 / -1; }
  .einwilligung { flex-direction: column; align-items: stretch; font-size: var(--t-klein); padding: .85rem 1rem; }
  .einwilligung__knoepfe button { flex: 1; }
  .grossbild__knopf:not(.grossbild__zu) { position: absolute; bottom: var(--a2); }
  .grossbild__knopf--zurueck { left: 25%; }
  .grossbild__knopf--weiter { right: 25%; }
}
@media (max-width: 350px) {
  .merkmale .schild { white-space: normal; margin-left: 0; }
  .abrechnung { gap: 0; }
  .leitfunktion article { grid-template-columns: minmax(0, 1fr) 5.5rem; gap: var(--a2); }
  .leitfunktion h3 { font-size: 1.2rem; overflow-wrap: anywhere; }
  .abrechnung button { padding-inline: .5rem; font-size: .84rem; }
  .abrechnung .schild { margin-left: .25rem; letter-spacing: 0; padding-inline: .25rem; }
}

/* Neue Bausteine auf kleineren Bildschirmen */
@media (max-width: 1100px) {
  .einstieg__raster, .kette { grid-template-columns: minmax(0, 1fr); }
  .einstieg__text { padding-bottom: 0; }
  .fenster { margin: 0; }
  .buehne { --geraet-b: 13.5rem; min-height: calc(var(--geraet-b) * 2.15 + 3rem); padding-bottom: 0; }
  .buehne .geraet { left: auto; right: 1.5rem; top: 1.5rem; }
  .meldung { left: 1rem; bottom: 1.5rem; }
  .buehne__fuss { display: none; }
  .schritte { position: static; grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .schritt { grid-template-columns: minmax(0, 1fr); }
  .folgen { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .regel, .regel--breit { grid-column: span 6; }
  .regel--voll { grid-column: span 12; }
  .umfang { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .fakten__raster { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 700px) {
  .tueren { grid-template-columns: minmax(0, 1fr); }
  .schritte { grid-template-columns: 1fr 1fr; }
  .regel, .regel--breit { grid-column: span 12; }
  .regel--breit .dann { font-size: 1.2rem; }
  .wischen { display: block; }
  .einwilligung__lang { display: none; }
  .einwilligung__kurz { display: inline; }
  .umfang { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 72%; gap: 1.2rem; overflow-x: auto; scroll-snap-type: x proximity; margin-inline: calc(var(--rand) * -1); padding: 0 var(--rand) .8rem; scroll-padding-inline: var(--rand); scrollbar-width: thin; }
  .umfang > div { scroll-snap-align: start; }
  .folgen { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 78%; overflow-x: auto; scroll-snap-type: x proximity; margin-inline: calc(var(--rand) * -1); padding: .4rem var(--rand) .8rem; scroll-padding-inline: var(--rand); scrollbar-width: thin; }
  .wirkung { scroll-snap-align: start; }
  .regel .mini { display: none; }
  .regel { padding: 1.1rem 1.2rem; gap: .6rem; }
  .regel .dann { font-size: 1.2rem; }
  .app-kacheln { grid-template-columns: 1fr 1fr; }
  .fenster__zwei { grid-template-columns: minmax(0, 1fr); }
  .fenster__zwei .tafel:last-child { display: none; }
  .fenster { border-radius: 14px; }
  .fenster__rumpf { grid-template-columns: minmax(0, 1fr); }
  .fenster__seite, .fenster__knopf, .fenster__nutzer { display: none; }
  .buehne { --geraet-b: min(16rem, 74vw); min-height: 0; padding-bottom: 2rem; }
  .buehne .geraet { position: relative; right: auto; top: auto; margin: -3.5rem auto 0; }
  .meldung { display: none; }
  .zusagen--leiste { justify-content: flex-start; }
}


@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .einblenden { opacity: 1; transform: none; }
}

@media print {
  .kopf, .einwilligung, .grossbild { display: none !important; }
  .band--tinte, .kontakt, .fuss, .block-marine { background: #fff; color: #000; }
}