/* Die Startseite von honeypod.io, nach der Leinwand „Honeypod Website
   Stufe 4 - Startseite" (Claude Design, 22.10.2026). Die Leinwand zeichnet
   zwei feste Breiten, 1440 und 390. Dazwischen gleitet jedes Maß linear, mit
   clamp() zwischen beiden Werten. Wo die Leinwand umbricht (drei Kacheln
   nebeneinander oder untereinander), bricht die Seite nach dem Platz um. */

.mitte { display: flex; flex-direction: column; align-items: center; text-align: center; }
.abschnitt { padding-block: var(--abstand); }
.nie-trennen { white-space: nowrap; }

/* Der Strich in Bernstein unter einem Wort, von Hand gezogen. */
.strich-wort { position: relative; display: inline-block; }
.strich {
  position: absolute; left: -2%; bottom: -0.14em; width: 104%; height: 0.26em; overflow: visible;
  pointer-events: none;
}
.strich path {
  fill: none; stroke: var(--bernstein); stroke-width: 4; stroke-linecap: round;
  vector-effect: non-scaling-stroke;
  stroke-dasharray: 1; stroke-dashoffset: 1;
  transition: stroke-dashoffset 1.2s cubic-bezier(0.33, 1, 0.68, 1);
}
.an > .strich-wort > .strich path, .strich-wort.an > .strich path { stroke-dashoffset: 0; }

.pille-neu {
  display: inline-block; padding: 3px 9px; border-radius: 999px;
  font-size: 12px; font-weight: 600; line-height: 1.4; color: var(--auf-honig);
  background: linear-gradient(90deg, var(--honig), var(--bernstein));
}

/* Was noch fehlt, ist sichtbar. Das Deploy-Skript lässt keine Seite mit
   data-platzhalter hinaus. */
[data-platzhalter] {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
}
[data-platzhalter] > span {
  padding: 8px 14px; border-radius: 999px; font-size: 15px; color: var(--text-2);
  background: var(--glas); box-shadow: inset 0 0 0 1px var(--glas-kante);
}

/* ══ Hero ═══════════════════════════════════════════════════ */
.hero {
  position: relative;
  padding-top: clamp(104px, 81.71px + 5.714vw, 164px);
  padding-bottom: clamp(40px, 28.11px + 3.048vw, 72px);
  text-align: center;
  overflow-x: clip;
}
.hero-kopf { display: flex; flex-direction: column; align-items: center; }
.hero h1 { max-width: 1000px; line-height: 1.04; }
.hero-wort { white-space: nowrap; }
/* Die drei Wörter schalten die Szene. Sie sehen aus wie Text, sind aber Knöpfe. */
.wort-knopf {
  font: inherit; color: inherit; letter-spacing: inherit; line-height: inherit;
  background: none; border: 0; padding: 0; margin: 0; cursor: pointer; text-align: inherit;
}
.wort-knopf:focus-visible { outline-offset: 6px; border-radius: 10px; }
.hero-leit { margin-top: 22px; max-width: 620px; }
.hero-buehne { position: relative; margin-top: clamp(32px, 23.09px + 2.286vw, 56px); }
.hero-schein {
  position: absolute; inset: -6% -4%; background: var(--tapete);
  filter: blur(80px) saturate(1.5); opacity: 0.7; transform: scale(1.1); pointer-events: none;
}
.hero-karte {
  position: relative; height: clamp(420px, 345.71px + 19.05vw, 620px);
  border-radius: 24px; overflow: hidden; background: var(--tapete);
  box-shadow: 0 0 0 1px var(--linie), inset 0 1px 0 rgba(255, 255, 255, 0.12);
}
.szene { position: absolute; inset: 0; }
.hero-karte { container-type: inline-size; }

/* Links und rechts zwei Bilder der App, weich ausgeblendet zur Mitte hin.
   Sie stehen fest (Tim, 22.10.2026): Der äußere Rand jedes Bildes liegt
   genau auf dem Rand der Karte, so ist dort nie der Grund dahinter zu sehen.
   Die Karte schneidet die Ecken selbst. Ausgeblendet wird waagerecht, bis
   zum inneren Rand ganz: Die runde Maske ließ am Telefon oben und unten die
   Kante des Bildes stehen, denn dort ist die Karte höher als breit. Seit dem
   25.10.2026 ohne Weichzeichner und zu 40 % deckend, schmal zu 20 % (Tim).

   Das linke Bild trägt am Rand 30 Pixel mehr Grau als die Übersicht
   (`hero-uebersicht.webp`), damit die Seitenleiste so weit vom Kartenrand
   steht wie rechts die Tabelle vom Fensterrand, 44 Pixel im Bild. Es läuft
   früher aus als das rechte: Diagramm und Kennzahlen liegen weiter innen als
   die Tabelle der Bank. Gemessen an der sichtbaren Struktur endet so links
   wie rechts 90 % bei gut 250 Pixeln vom Rand (25.10.2026). */
.hero-seite {
  position: absolute; top: 0; height: 100%; width: 480px; pointer-events: none;
  opacity: 0.4; filter: saturate(0.9);
  background-size: auto 100%; background-repeat: no-repeat;
}
.hero-seite-links {
  left: 0; background-image: var(--hero-links); background-position: left center;
  -webkit-mask-image: linear-gradient(90deg, #000 0%, #000 20%, transparent 65%);
  mask-image: linear-gradient(90deg, #000 0%, #000 20%, transparent 65%);
}
.hero-seite-rechts {
  right: 0; background-image: var(--hero-rechts); background-position: right center;
  -webkit-mask-image: linear-gradient(270deg, #000 0%, #000 20%, transparent 100%);
  mask-image: linear-gradient(270deg, #000 0%, #000 20%, transparent 100%);
}
:root { --hero-links: url("/bilder/hero-uebersicht.webp?v=34f7bebda6"); --hero-rechts: url("/bilder/buehne-bank-deckend.webp?v=1781682830"); }
:root[data-thema="hell"] { --hero-links: url("/bilder/hero-uebersicht-hell.webp?v=8ff5ba2040"); --hero-rechts: url("/bilder/buehne-bank-hell-deckend.webp?v=30cbdf5e15"); }
/* Auf Tablet und Telefon überlappen sich die beiden Bilder, dort stehen sie
   leiser: auf dem Tablet zu 20 %, am Telefon zu 10 % (25. und 26.10.2026). */
@container (max-width: 959px) {
  .hero-seite { opacity: 0.2; }
}
@container (max-width: 559px) {
  .hero-seite { width: 150px; opacity: 0.1; }
  .hero-seite-links {
    -webkit-mask-image: linear-gradient(90deg, #000 0%, transparent 100%);
    mask-image: linear-gradient(90deg, #000 0%, transparent 100%);
  }
  .hero-seite-rechts {
    -webkit-mask-image: linear-gradient(270deg, #000 0%, transparent 100%);
    mask-image: linear-gradient(270deg, #000 0%, transparent 100%);
  }
}
.hero-verlauf {
  position: absolute; inset: 0; pointer-events: none;
  background: var(--hero-verlauf);
}
.hero-unten {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: clamp(22px, 15.31px + 1.714vw, 40px);
  display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; flex-wrap: wrap;
  text-align: left; color: var(--hero-text);
}
.hero-satz { display: flex; flex-direction: column; gap: 6px; max-width: 460px; }
/* Breit steht der Satz in einer Zeile, wie auf der Leinwand. */
@media (min-width: 900px) {
  .hero-satz { max-width: none; }
  .hero-satz p:last-child { white-space: nowrap; }
}
.hero-satz p:last-child { font-size: 15px; line-height: 1.5; color: var(--hero-text-2); }
.hero-knoepfe { display: flex; gap: 10px; flex-wrap: wrap; }

/* ══ Neu ════════════════════════════════════════════════════ */
.neu-karte {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr);
  gap: 48px; align-items: center;
  padding: clamp(22px, 15.31px + 1.714vw, 40px);
  border-radius: 24px; background: var(--flaeche); box-shadow: 0 0 0 1px var(--linie);
}
.neu-text { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; }
.neu-marke { display: flex; align-items: center; gap: 10px; font-size: 16px; font-weight: 500; }
.neu-marke img { width: 40px; height: 40px; }
.neu-text p { font-size: 16px; line-height: 1.55; color: var(--text-2); max-width: 420px; }
.neu-text .knopf { height: 42px; padding: 0 18px; }
.neu-bild {
  display: block; border-radius: 16px; overflow: hidden; background: var(--flaeche);
  box-shadow: 0 0 0 1px var(--linie);
}
.neu-bild img { width: 100%; height: auto; }
/* Die Abbildung des neuesten Artikels, wie auf der vorderen Karte der
   Neuigkeiten (.nk-karte-flaeche in neuigkeiten.css). js/start.js wählt von
   seinen Abbildungen die mit der besten Füllung und passt sie ein (--abb-w,
   --abb-s). Sie passt immer hinein, beschnitten wird deshalb nichts. Ohne
   Skript bleibt die Fläche leer und die Karte steht in einer Spalte. */
.neu-abb {
  position: relative; aspect-ratio: 16 / 10;
  border-radius: 16px; background: var(--grund); box-shadow: 0 0 0 1px var(--linie);
}
.neu-abb:empty { display: none; }
.neu-karte:has(.neu-abb:empty) { grid-template-columns: minmax(0, 1fr); }
.neu-abb .abb-bild {
  position: absolute; left: 50%; top: 50%;
  width: var(--abb-w, 400px);
  transform: translate(-50%, -50%) scale(var(--abb-s, 1));
}
.neu-abb .abb-bild * { margin: revert-layer; padding: revert-layer; }
@media (max-width: 900px) {
  .neu-karte { grid-template-columns: minmax(0, 1fr); gap: 24px; }
}

/* ══ Sonntag ════════════════════════════════════════════════ */
.sonntag { overflow-x: clip; }
.sonntag-satz { margin-top: 14px; max-width: 980px; }
.satz-a, .satz-b { color: var(--text-2); transition: color 1.05s var(--einblenden); }
.sonntag-satz.an .satz-b { color: var(--text); }
.sonntag-bild { position: relative; width: 100%; max-width: 1024px; margin-top: clamp(32px, 23.09px + 2.286vw, 56px); }
.sonntag-schein {
  position: absolute; inset: -60px; pointer-events: none;
  background: radial-gradient(ellipse 38% 46% at 50% 40%, rgba(234, 180, 74, var(--schein-stark)) 0%, rgba(234, 180, 74, var(--schein-mitte)) 45%, transparent 78%);
}
.schuhkarton {
  position: relative; height: clamp(300px, 218.29px + 20.95vw, 520px);
  border-radius: 24px; background: var(--flaeche); box-shadow: 0 0 0 1px var(--linie), var(--schatten);
  overflow: hidden;
}

/* ══ Drei Versprechen ═══════════════════════════════════════ */
.versprechen h2 { margin-top: 14px; }
.versprechen-raster {
  margin-top: 56px; width: 100%;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; text-align: left;
}
.versprechen-kachel { display: flex; flex-direction: column; gap: 16px; }
.versprechen-kachel p { font-size: 16px; line-height: 1.55; color: var(--text-2); }
.versprechen-kachel p b { color: var(--text); font-weight: 500; }
/* Von jeder Kachel und jeder Karte ein Weg zur Seite, die mehr erzählt
   (25.10.2026). Vorher führte aus dem Inhalt der Startseite keiner dorthin. */
.mehr { display: inline-flex; align-items: center; gap: 6px; align-self: flex-start; font-size: 15px; font-weight: 500; }
.mehr svg { width: 16px; height: 16px; flex: none; transition: transform 300ms var(--kurve); }
.mehr:hover svg { transform: translateX(3px); }
.versprechen-kachel .mehr { margin-top: -6px; }
.karte-text .mehr { margin-top: 2px; color: var(--hero-text); }
.karte-text .mehr:hover { color: var(--hero-text); text-decoration: underline; text-underline-offset: 3px; }
.fach {
  position: relative; aspect-ratio: 1; border-radius: 24px; overflow: hidden;
  background: var(--flaeche); box-shadow: 0 0 0 1px var(--linie);
  --sp: 0; --skala: 0.9;
}
@media (max-width: 899px) {
  .versprechen-raster { grid-template-columns: minmax(0, 1fr); gap: 40px; }
  .fach { aspect-ratio: 16 / 10; }
}
.fach-schein {
  position: absolute; inset: 0;
  background: radial-gradient(ellipse 50% 50% at 50% 50%, rgba(228, 105, 58, var(--schein-mitte)), transparent 75%);
}
.fach-mitte { position: absolute; left: 50%; top: 52%; width: 0; height: 0; transform: scale(var(--skala)); }
.fach.offen { --sp: 1; }
.fach.offen:hover { --sp: 1.16; }

/* Ein Teil im Fächer: Lage, Drehung und Größe in Einheiten der Leinwand.
   Geschlossen liegen alle aufeinander, geöffnet fächern sie auf. Ein festes
   Teil (Streifen und Niete) dreht sich nur, es wandert nicht. */
.teil {
  --t: var(--sp); --s: 1;
  position: absolute; left: 0; top: 0;
  width: calc(var(--w) * 1px); height: calc(var(--h) * 1px);
  margin: calc(var(--h) * -0.5px) 0 0 calc(var(--w) * -0.5px);
  z-index: var(--z);
  transform: translate(calc(var(--x) * var(--t) * 1px), calc(var(--y) * var(--t) * 1px)) rotate(calc(var(--r) * var(--sp) * 1deg)) scale(var(--s));
  transition: transform 0.9s var(--einblenden), filter 0.9s var(--einblenden);
}
.teil.fest { --t: 1; }
.fach.offen .teil.weich { filter: blur(1.4px) saturate(0.85); }
.fach.offen .teil.weicher { filter: blur(2.6px) saturate(0.75); }
.teil-bild { width: 100%; height: 100%; object-fit: cover; border-radius: 6px; box-shadow: var(--fach-schatten); }
.teil-bon { border-radius: 4px; }
.pille-erkannt {
  position: absolute; transform: translate(-50%, -50%);
  height: 24px; display: inline-flex; align-items: center; padding: 0 10px; border-radius: 999px;
  background: var(--honig); color: var(--auf-honig); font-size: 12px; font-weight: 600; white-space: nowrap;
  box-shadow: 0 0 0 4px rgba(234, 180, 74, 0.24), 0 6px 16px -4px rgba(0, 0, 0, 0.35);
  opacity: 0; transition: opacity 0.4s ease-out;
}
.fach.offen .pille-erkannt { opacity: 1; transition-delay: 0.7s; }
.dienst-kachel {
  width: 100%; height: 100%; border-radius: 30px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px;
  background: var(--reiter); -webkit-backdrop-filter: blur(24px); backdrop-filter: blur(24px);
  box-shadow: inset 0 0 0 1px var(--glas-kante), inset 0 1px 0 rgba(255, 255, 255, 0.14), var(--fach-schatten);
}
.dienst-kachel .wolke { width: 46px; height: 46px; color: var(--text-2); }
.dienst-kachel span { font-size: 13px; font-weight: 600; color: var(--text); white-space: nowrap; }
.schloss {
  position: absolute; right: -12px; top: -12px; width: 36px; height: 36px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--honig); color: var(--auf-honig); box-shadow: 0 8px 20px -6px rgba(234, 180, 74, 0.6);
}
.schloss svg { width: 17px; height: 17px; }
.streifen {
  --w: 52; --h: 250; --x: 0; --y: 32; --r: calc(var(--d) * 15);
  transform-origin: 26px 228px;
  border-radius: var(--rund);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.18), transparent 32%), var(--farbe);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.16), var(--fach-schatten);
  display: flex; justify-content: center; padding-top: 16px;
}
.zeichen { display: block; background: rgba(255, 255, 255, 0.92); }
.zeichen.kreis { width: 18px; height: 18px; border-radius: 50%; }
.zeichen.breit { width: 28px; height: 12px; border-radius: 3px; }
.zeichen.eckig { width: 16px; height: 16px; border-radius: 1px; }
.zeichen.topf { width: 24px; height: 24px; background: url("/bilder/topf.svg?v=cc7781ae1c") center / contain no-repeat; }
.niete {
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #f4f5f7, #8c9199 55%, #3c4147);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.5), inset 0 0 0 1px rgba(0, 0, 0, 0.25);
}

/* ══ Das ist Honeypod: die Bühne ════════════════════════════ */
.honeypod { overflow-x: clip; }
.honeypod h2 { margin-top: 14px; line-height: 1.06; }
.topf-im-satz {
  display: inline-block; height: 1.05em; width: auto; vertical-align: -0.18em;
  filter: drop-shadow(0 10px 24px rgba(228, 105, 58, 0.35));
}
.honeypod-leit { margin: 22px auto 0; max-width: 600px; }
.buehne {
  position: relative; width: calc(100% - var(--rand-l) - var(--rand-r)); max-width: 1024px;
  margin: 44px auto 0; perspective: 1500px;
}
.buehne-scheine { position: absolute; inset: -140px -50vw; pointer-events: none; opacity: 0; }
.buehne-schein {
  position: absolute; inset: 0; opacity: 0; transition: opacity 700ms ease-out;
  background: radial-gradient(ellipse 38% 46% at 50% 40%, rgba(var(--farbe), var(--schein-stark)) 0%, rgba(var(--farbe), var(--schein-mitte)) 45%, transparent 78%);
}
.buehne-schein.an { opacity: 1; }
.buehne-fenster {
  position: relative; width: 100%; aspect-ratio: 1440 / 900;
  border-radius: 18px; overflow: hidden; transform-origin: 50% 0%;
  transform: scale(0.5) rotateX(50deg); will-change: transform;
  background: var(--tapete);
  box-shadow: 0 0 0 1px var(--kante), inset 0 1px 0 rgba(255, 255, 255, 0.12), var(--schatten);
  container-type: inline-size;
}
.buehne-fenster::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: 5;
  box-shadow: inset 1px 1px 0 rgba(255, 255, 255, 0.38), inset -1px -1px 0 rgba(255, 255, 255, 0.14);
}
.buehne-schirm { position: absolute; inset: 0; opacity: 0; transform: scale(1.02); transition: opacity 500ms ease-out, transform 500ms ease-out; }
.buehne-schirm.an { opacity: 1; transform: none; }
.buehne-schirm img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.buehne-schirm .deckend { display: none; }
.buehne-ampel { position: absolute; z-index: 4; left: calc(20 / 1440 * 100cqw); top: calc(20 / 1440 * 100cqw); display: flex; gap: calc(8 / 1440 * 100cqw); }
.buehne-ampel i { width: max(4px, calc(12 / 1440 * 100cqw)); height: max(4px, calc(12 / 1440 * 100cqw)); border-radius: 50%; }
.buehne-ampel i:nth-child(1) { background: #ff5f57; }
.buehne-ampel i:nth-child(2) { background: #febc2e; }
.buehne-ampel i:nth-child(3) { background: #28c840; }
@media (max-width: 640px) { .buehne-fenster { border-radius: 12px; } }

.stationen {
  display: flex; justify-content: center; gap: 8px; margin: 36px auto 0;
  max-width: calc(var(--inhalt) + var(--rand-l) + var(--rand-r));
  padding-left: var(--rand-l); padding-right: var(--rand-r);
  overflow-x: auto; scrollbar-width: none;
}
.stationen::-webkit-scrollbar { display: none; }
.station {
  position: relative; flex: none; width: 176px; padding: 16px 14px 14px;
  border: 0; border-radius: 16px; background: transparent; color: var(--text-3);
  text-align: left; cursor: pointer; transition: color 300ms var(--kurve);
}
.station::before, .station::after {
  content: ""; position: absolute; left: 14px; top: 0; height: 2px; border-radius: 2px;
}
.station::before { right: 14px; background: var(--linie); }
.station::after { width: 0; background: var(--text); transition: width 500ms var(--kurve); }
.station.an { color: var(--text); }
.station.an::after { width: calc(100% - 28px); }
.station b { display: block; font-size: 13px; font-weight: 600; }
.station span { display: block; margin-top: 3px; font-size: 13px; line-height: 1.35; opacity: 0.85; }
@media (max-width: 1000px) {
  .stationen { justify-content: flex-start; }
  .station { width: 150px; }
}
.aufrufe { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 36px; padding-inline: var(--rand-l) var(--rand-r); }
.aufrufe .knopf { height: 46px; padding: 0 22px; }

/* Das Karussell: Karten mit Bild, verschieden breit, wie bei Umbrel. */
.karussell { margin-top: 44px; }
.so-gehts h2 { margin-top: 14px; }
.so-gehts-leit { margin: 22px auto 0; max-width: 600px; }
/* Breit steht der zweite Satz in seiner eigenen Zeile (Tim, 22.10.2026).
   Schmal bricht schon der erste um, dort laufen beide ineinander (25.10.2026). */
@media (max-width: 700px) { .umbruch-breit { display: none; } }
.karussell-spur {
  --anfang: max(var(--rand-l), calc((100vw - var(--inhalt)) / 2));
  display: flex; gap: 20px; overflow-x: auto; overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory; scroll-padding-inline: var(--anfang);
  padding-inline: var(--anfang); scrollbar-width: none; text-align: left;
}
.karussell-spur::-webkit-scrollbar { display: none; }
.karussell-spur:focus-visible { outline-offset: -2px; }
.karte {
  position: relative; flex: none; width: min(var(--b), 86vw);
  height: clamp(400px, 370.29px + 7.619vw, 480px);
  border-radius: 24px; overflow: hidden; background: var(--flaeche);
  box-shadow: 0 0 0 1px var(--linie); scroll-snap-align: start;
}
.karte-bild { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center top; }
.karte-schleier {
  position: absolute; left: 0; right: 0; bottom: 0; height: 55%;
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  -webkit-mask-image: linear-gradient(transparent, #000 70%); mask-image: linear-gradient(transparent, #000 70%);
}
.karte-verlauf { position: absolute; inset: 0; background: var(--karte-verlauf); }
.karte-text { position: absolute; left: 0; right: 0; bottom: 0; padding: 26px; display: flex; flex-direction: column; gap: 8px; color: var(--hero-text); }
.karte-text .pille-neu { align-self: flex-start; }
.karte-text h3 { line-height: 1.2; }
.karte-text p { font-size: 15px; line-height: 1.5; color: var(--hero-text-2); }
.karussell-leiste { margin-top: 22px; display: flex; align-items: center; justify-content: space-between; }
.karussell-punkte { display: flex; gap: 7px; }
.karussell-punkte i { width: 7px; height: 7px; border-radius: 999px; background: rgba(160, 164, 171, 0.35); transition: width 300ms var(--kurve), background-color 300ms var(--kurve); }
.karussell-punkte i.an { width: 22px; background: var(--text-2); }
.karussell-pfeile { display: flex; gap: 8px; }
.pfeil {
  width: 40px; height: 40px; border: 0; border-radius: 50%; cursor: pointer; color: var(--text);
  display: flex; align-items: center; justify-content: center;
  background: var(--glas); box-shadow: inset 0 0 0 1px var(--glas-kante);
  transition: opacity 200ms var(--kurve);
}
.pfeil svg { width: 18px; height: 18px; }
.pfeil:disabled { opacity: 0.35; cursor: default; }

/* ══ Sorgfalt ═══════════════════════════════════════════════ */
.sorgfalt { position: relative; }
.sorgfalt-schein {
  position: absolute; inset: 0; pointer-events: none;
  --rgb: 234, 180, 74;
  background: radial-gradient(ellipse 60% 50% at 50% 46%, rgba(var(--rgb), var(--schein-mitte)), transparent 75%);
}
.sorgfalt .breite { position: relative; }
.sorgfalt h2 { margin-top: 14px; }
.reiter-reihe { margin-top: 44px; display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; }
.reiter {
  position: relative; width: clamp(110px, 95.14px + 3.81vw, 150px); height: 96px;
  border: 0; border-radius: 24px; padding: 14px; cursor: pointer; overflow: hidden;
  display: flex; flex-direction: column; justify-content: flex-end; align-items: flex-start; text-align: left;
  background: var(--reiter); -webkit-backdrop-filter: blur(24px); backdrop-filter: blur(24px);
  box-shadow: inset 0 0 0 1px rgba(127, 127, 127, 0.18);
  transition: box-shadow 300ms var(--kurve);
}
.reiter.an { box-shadow: inset 0 0 0 1px rgba(127, 127, 127, 0.45); }
.reiter::before { content: ""; position: absolute; left: 16px; right: 16px; top: 0; height: 2px; border-radius: 2px; background: var(--linie); }
.reiter-lauf { position: absolute; left: 16px; top: 0; height: 2px; width: 0; border-radius: 2px; background: var(--text); }
.reiter.an.laeuft .reiter-lauf { animation: reiter-lauf var(--reiter-dauer) linear forwards; }
@keyframes reiter-lauf { from { width: 0; } to { width: calc(100% - 32px); } }
.reiter b { font-size: 22px; font-weight: 600; letter-spacing: -0.01em; font-variant-numeric: tabular-nums; }
.reiter > span:not(.reiter-lauf) { font-size: 12.5px; color: var(--text-2); }
/* Am Telefon stehen die vier Reiter zu zweit in zwei Reihen. In einer
   Reihe hätte „Nutzungsdauern" keine 125 Pixel. */
@media (max-width: 520px) {
  .reiter-reihe { width: 100%; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px; }
  .reiter { width: auto; padding: 14px 12px; }
}

.sorgfalt-karte {
  margin-top: 28px; width: 100%; max-width: 1024px; text-align: left;
  padding: clamp(22px, 15.31px + 1.714vw, 40px);
  border-radius: 24px; background: var(--flaeche); box-shadow: 0 0 0 1px var(--linie), var(--schatten);
}
.tafel {
  display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: 48px; align-items: center;
}
.tafel[hidden] { display: none; }
@media (max-width: 900px) { .tafel { grid-template-columns: minmax(0, 1fr); gap: 24px; } }
.tafel-text { display: flex; flex-direction: column; gap: 12px; }
.tafel-text p { font-size: 16px; line-height: 1.55; color: var(--text-2); }
.tafel-bild { display: flex; flex-direction: column; gap: 12px; }
.legende { font-size: 12px; line-height: 1.5; color: var(--text-2); }

.saeulen {
  position: relative; height: clamp(200px, 177.71px + 5.714vw, 260px); margin-bottom: 26px;
  display: flex; align-items: flex-end; gap: 10px; border-bottom: 1px solid var(--linie);
}
.saeulen-auszug { gap: 18px; }
.saeulen-linie {
  position: absolute; left: 0; right: 0; bottom: 0; border-top: 1px dashed var(--text-3); pointer-events: none;
  transition: bottom 1.05s var(--einblenden);
}
.gewachsen .saeulen-linie { bottom: 80%; }
.saeulen-linie span { position: absolute; right: 0; top: -19px; font-size: 11.5px; color: var(--text-2); font-variant-numeric: tabular-nums; }
.saeule {
  position: relative; flex: 1; min-width: 0; height: 100%;
  display: flex; flex-direction: column; justify-content: flex-end; align-items: center; gap: 5px;
}
.balken-paar { width: 100%; height: 100%; display: flex; align-items: flex-end; gap: 3px; }
.balken-paar i {
  flex: 1; height: 0; border-radius: 3px 3px 0 0; background: var(--c);
  transition: height 1.05s var(--einblenden);
}
.balken-paar i.blass { background: color-mix(in srgb, var(--c) 22%, transparent); box-shadow: inset 0 0 0 1.5px var(--c); }
.gewachsen .balken-paar i { height: calc(var(--h) / 4.5 * 80%); }
.punkt { position: absolute; left: 50%; bottom: -24px; width: 10px; height: 10px; margin-left: -5px; border-radius: 50%; background: var(--c); }
.wert { font-size: 11.5px; color: var(--text-2); font-variant-numeric: tabular-nums; white-space: nowrap; }
.balken-einzeln {
  width: 100%; height: 0; flex-shrink: 0; border-radius: 3px 3px 0 0; background: var(--c);
  transition: height 1.05s var(--einblenden);
}
.gewachsen .balken-einzeln { height: calc(var(--h) * 1%); }
.beschriftung { position: absolute; left: 0; right: 0; bottom: -24px; text-align: center; font-size: 11.5px; color: var(--text-3); white-space: nowrap; }
.baender { display: flex; flex-direction: column; gap: 14px; }
/* GoBD: festgeschriebene Quartale und das Protokoll als Kette (seit 25.10.2026,
   die Aussage stand auf der alten Startseite, Tim wollte sie zurück). */
.gobd { --kette: 127, 100, 237; display: flex; flex-direction: column; gap: 14px; }
.gobd-quartale { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.gobd-quartal {
  display: flex; align-items: center; justify-content: center; gap: 6px; height: 40px; border-radius: 12px;
  font-size: 14px; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--text-2);
  background: var(--spur); box-shadow: inset 0 0 0 1px var(--linie);
}
.gobd-quartal svg { width: 15px; height: 15px; flex: none; }
.gobd-quartal.zu { color: var(--text); background: rgba(var(--kette), 0.14); box-shadow: inset 0 0 0 1px rgba(var(--kette), 0.38); }
.gobd-quartal.zu svg { color: rgb(var(--kette)); }
:root[data-thema="hell"] .gobd-quartal.zu svg { color: #5a3fd0; }
.gobd-kette { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; position: relative; }
.gobd-kette li {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 12px;
  padding: 9px 14px; border-radius: 12px; font-size: 13px;
  background: var(--spur); box-shadow: inset 0 0 0 1px var(--linie);
  opacity: 0; transform: translateY(6px);
  transition: opacity 0.4s var(--einblenden), transform 0.4s var(--einblenden);
  transition-delay: calc(var(--i) * 140ms);
}
.gewachsen .gobd-kette li { opacity: 1; transform: none; }
.gobd-nr { color: var(--text-3); font-variant-numeric: tabular-nums; }
.gobd-was { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gobd-kette code { font: 500 12px/1 ui-monospace, "SF Mono", Menlo, monospace; color: var(--text-2); white-space: nowrap; }
.gobd-geprueft { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 500; color: var(--text); }
.gobd-geprueft svg { width: 16px; height: 16px; color: #54b98c; flex: none; }
:root[data-thema="hell"] .gobd-geprueft svg { color: #2c7a55; }
@media (max-width: 420px) { .gobd-nr { display: none; } .gobd-kette li { grid-template-columns: minmax(0, 1fr) auto; } }
.band { display: flex; flex-direction: column; gap: 6px; }
.band-kopf { display: flex; justify-content: space-between; gap: 12px; font-size: 13px; }
.band-kopf span { color: var(--text-2); }
.band-kopf b { font-weight: 600; font-variant-numeric: tabular-nums; }
.band-spur { height: 8px; border-radius: 999px; background: var(--spur); }
.band-spur i { display: block; height: 100%; width: 0; border-radius: 999px; background: #9f7ed6; transition: width 1.05s var(--einblenden); }
.gewachsen .band-spur i { width: calc(var(--w) * 1%); }
@media (max-width: 480px) { .saeulen-auszug .wert { font-size: 10.5px; } }

/* ══ Individualisierbarkeit ═════════════════════════════════ */
.individuell { overflow: hidden; }
.individuell h2 { margin-top: 14px; line-height: 1.06; }
.individuell-leit { margin: 22px auto 0; max-width: 600px; }
.individuell-mehr { margin-top: 26px; height: 42px; padding: 0 18px; }
/* Der Behälter heißt nicht `.ring`: Die Klasse kennt auch Tailwind, und
   neuigkeiten/abbildungen.css, das die Startseite für den neuesten Artikel
   lädt, legte ihm einen Rahmen von einem Pixel in Schriftfarbe um (Tim,
   28.10.2026). scripts/website-klassen-pruefen.mjs meldet solche Namen. */
.vorlagenring { position: relative; margin-top: 56px; height: clamp(420px, 308.57px + 28.57vw, 720px); --vz: 1; }
.vorlagenring-blaetter img {
  position: absolute; left: 50%; top: 50%; will-change: transform;
}
.vorlagenring-blaetter img[data-blatt="0"] { width: 150px; height: 212px; margin: -106px 0 0 -75px; border-radius: 4px; box-shadow: 0 18px 34px -14px rgba(24, 24, 27, 0.35), 0 0 0 1px rgba(27, 28, 30, 0.08); }
/* Die Tiefe kommt aus Größe und Unschärfe, nicht aus Durchsicht: Halb
   durchsichtige Blätter ergaben keinen Sinn (Tim, 25.10.2026). Gezeichnet
   wird von hinten nach vorn: Im Dokument stehen die scharfen Blätter zuerst,
   ohne eigene Ebene lagen die weichen deshalb vor ihnen. Das Fenster der
   Vorführung liegt vor allen. */
.vorlagenring-blaetter img[data-blatt="0"] { z-index: 3; }
.vorlagenring-blaetter img[data-blatt="1"] { z-index: 2; width: 135px; height: 186px; margin: -93px 0 0 -67.5px; }
.vorlagenring-blaetter img[data-blatt="2"] { z-index: 1; width: 129px; height: 170px; margin: -85px 0 0 -64.5px; }
.vorfuehrung-rahmen {
  position: absolute; left: 50%; top: 50%; z-index: 4;
  transform: translate(-50%, -50%) scale(var(--vz)); transform-origin: center;
  padding: 8px; border-radius: 32px;
  background: var(--rahmen-bg); border: 1px solid var(--rahmen-kante);
  -webkit-backdrop-filter: blur(24px); backdrop-filter: blur(24px);
  box-shadow: var(--rahmen-schatten);
}
.vorfuehrung-innen {
  width: 836px; padding: 8px; border-radius: 24px; background: var(--rahmen-innen); overflow: hidden;
}
/* Die Vorführung zeichnet sich 1031 breit, die Leinwand zeigt sie in 820.
   Ihre Höhe misst start.js, der Rand unten nimmt den Rest der Verkleinerung. */
.vorfuehrung-innen > .vorfuehrung {
  width: 1031px; transform: scale(0.7953); transform-origin: 0 0;
  margin-right: calc(1031px * (0.7953 - 1));
  margin-bottom: var(--vf-unten, 0px);
}
/* Am Telefon steht die Vorführung hochkant und in voller Größe (Tim,
   25.10.2026): verkleinert war darin nichts zu lesen. Sie steht im Fluss,
   die Vorlagen ziehen ihre Bahn um sie herum und zeigen sich darüber und
   darunter, um ein Drittel kleiner. Umgeschaltet wird in start.js nach der
   Breite des Rings, nie nach dem Fenster. */
.vorlagenring.vorlagenring-hoch { height: auto; padding-block: 118px; }
.vorlagenring-hoch .vorfuehrung-rahmen {
  position: relative; left: auto; top: auto; transform: none;
  width: min(100%, 420px); margin: 0 auto; padding: 6px; border-radius: 26px;
}
.vorlagenring-hoch .vorfuehrung-innen { width: auto; padding: 6px; border-radius: 20px; }
.vorlagenring-hoch .vorfuehrung-innen > .vorfuehrung { width: auto; transform: none; margin: 0; }
.vorlagenring-hoch .vorlagenring-blaetter img[data-blatt="0"] { width: 100px; height: 141px; margin: -70.5px 0 0 -50px; }
.vorlagenring-hoch .vorlagenring-blaetter img[data-blatt="1"] { width: 90px; height: 124px; margin: -62px 0 0 -45px; }
.vorlagenring-hoch .vorlagenring-blaetter img[data-blatt="2"] { width: 86px; height: 113px; margin: -56.5px 0 0 -43px; }

/* ══ Hell und dunkel ════════════════════════════════════════ */
/* Das Band steht im Takt der Abschnitte: Unter ihm und im Mittel über ihm
   steht so viel Luft wie zwischen zwei Abschnitten, zweimal --abstand (Tim,
   26. und 28.10.2026). Bis dahin waren es bei 1440 Pixeln oben und unten 166
   statt 240, die Datenkontrolle stand so näher am Band als am Abschnitt nach
   ihr. Über dem Band ziehen die Vorlagen ihre Bahn bis in den Rand des
   Abschnitts und am Telefon darüber hinaus, start.js meldet wie weit
   (--bahn-mitte im Mittel, --bahn-tief am tiefsten Punkt). Kommt die Bahn
   dem Band näher als den halben Abstand, rückt es um den Rest nach unten. */
.individuell + .tag-nacht {
  --tn-oben: max(var(--abstand) + var(--bahn-mitte, 0px), var(--bahn-tief, 0px) - var(--abstand) / 2);
  padding-block: var(--tn-oben) calc(var(--tn-oben) - var(--bahn-mitte, 0px));
}

/* ══ Datenkontrolle ═════════════════════════════════════════ */
.daten-karte {
  position: relative; overflow: hidden; container-type: inline-size;
  padding: clamp(22px, 15.31px + 1.714vw, 40px);
  border-radius: 24px; box-shadow: 0 0 0 1px var(--linie);
  background: radial-gradient(ellipse 70% 90% at 85% 50%, rgba(228, 105, 58, var(--schein-stark)) 0%, rgba(234, 180, 74, var(--schein-mitte)) 45%, transparent 78%), var(--flaeche);
}
.daten-text { position: relative; z-index: 2; display: flex; flex-direction: column; gap: 14px; text-align: left; }
.daten-text .knopf { align-self: flex-start; margin-top: 6px; height: 42px; padding: 0 18px; }
.daten-bild { position: relative; width: 100%; max-width: 720px; margin: 28px auto 0; aspect-ratio: 720 / 470; container-type: inline-size; }
@media (min-width: 1240px) {
  .daten-karte { min-height: 560px; }
  .daten-text { max-width: 480px; }
  .daten-bild {
    position: absolute; right: 24px; top: 45px; margin: 0; max-width: none;
    width: min(720px, calc(100% - 592px));
  }
}

/* Geräte in Einheiten der Leinwand (720 × 470), umgerechnet in Prozent der
   Fläche. Rundungen in cqw, damit sie mit der Fläche wachsen. 1cqw = 7,2 Einheiten. */
.geraet { position: absolute; }
.laptop-sockel {
  left: calc(10 / 7.2 * 1%); top: calc(406 / 4.7 * 1%); width: calc(340 / 7.2 * 1%); height: calc(14 / 4.7 * 1%);
  border-radius: calc(2 / 7.2 * 1cqw) calc(2 / 7.2 * 1cqw) calc(14 / 7.2 * 1cqw) calc(14 / 7.2 * 1cqw);
  background: linear-gradient(180deg, #2c2f34, #131416);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.26), 0 18px 28px -12px rgba(0, 0, 0, 0.55);
}
.laptop-kerbe {
  left: calc(150 / 7.2 * 1%); top: calc(406 / 4.7 * 1%); width: calc(60 / 7.2 * 1%); height: calc(5 / 4.7 * 1%);
  border-radius: 0 0 calc(6 / 7.2 * 1cqw) calc(6 / 7.2 * 1cqw); background: #0b0c0d;
}
.laptop-schirm, .monitor-schirm {
  background: linear-gradient(150deg, rgba(228, 105, 58, 0.22) 0%, transparent 42%), linear-gradient(180deg, #1d1f23, #101113);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.14), inset 0 1px 0 rgba(255, 255, 255, 0.24), 0 30px 60px -24px rgba(0, 0, 0, 0.65);
}
.laptop-schirm {
  left: calc(30 / 7.2 * 1%); top: calc(211 / 4.7 * 1%); width: calc(300 / 7.2 * 1%); height: calc(195 / 4.7 * 1%);
  border-radius: calc(14 / 7.2 * 1cqw) calc(14 / 7.2 * 1cqw) calc(4 / 7.2 * 1cqw) calc(4 / 7.2 * 1cqw);
  padding: calc(9 / 7.2 * 1cqw);
}
.monitor-schirm {
  left: calc(380 / 7.2 * 1%); top: calc(146 / 4.7 * 1%); width: calc(320 / 7.2 * 1%); height: calc(208 / 4.7 * 1%);
  border-radius: calc(16 / 7.2 * 1cqw); padding: calc(10 / 7.2 * 1cqw);
}
.geraet-bild {
  width: 100%; height: 100%; border-radius: calc(6 / 7.2 * 1cqw);
  background: var(--geraet-bild) center / cover no-repeat, var(--tapete);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.45);
}
.monitor-schirm .geraet-bild { border-radius: calc(7 / 7.2 * 1cqw); }
.monitor-hals {
  left: calc(513 / 7.2 * 1%); top: calc(354 / 4.7 * 1%); width: calc(54 / 7.2 * 1%); height: calc(58 / 4.7 * 1%);
  background: linear-gradient(90deg, #131416, #2a2d32 50%, #131416);
}
.monitor-fuss {
  left: calc(470 / 7.2 * 1%); top: calc(410 / 4.7 * 1%); width: calc(140 / 7.2 * 1%); height: calc(10 / 4.7 * 1%);
  border-radius: calc(6 / 7.2 * 1cqw) calc(6 / 7.2 * 1cqw) calc(4 / 7.2 * 1cqw) calc(4 / 7.2 * 1cqw);
  background: linear-gradient(180deg, #2c2f34, #131416);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.22), 0 14px 24px -10px rgba(0, 0, 0, 0.55);
}
.geraet-name {
  position: absolute; top: calc(428 / 4.7 * 1%); width: calc(200 / 7.2 * 1%);
  text-align: center; font-size: 13px; font-weight: 500; color: var(--text-3);
}
.laptop-name { left: calc(80 / 7.2 * 1%); }
.monitor-name { left: calc(440 / 7.2 * 1%); }
.pakete { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; z-index: 1; pointer-events: none; }
.pfad-grund { fill: none; stroke: var(--glas-kante); stroke-width: 2; vector-effect: non-scaling-stroke; }
.pfad-lauf {
  fill: none; stroke: var(--honig); stroke-opacity: 0.55; stroke-width: 2.4; stroke-dasharray: 0.1 11; stroke-linecap: round;
  vector-effect: non-scaling-stroke; animation: pfad-lauf 0.8s linear infinite;
}
@keyframes pfad-lauf { to { stroke-dashoffset: -11.1; } }
.pakete .paket rect { fill: var(--honig); filter: drop-shadow(0 6px 10px rgba(0, 0, 0, 0.35)); }
.pakete .paket path { fill: none; stroke: var(--auf-honig); stroke-width: 1.5; stroke-linejoin: round; }
.dienst-pille {
  position: absolute; z-index: 2; left: 50%; top: calc(70 / 4.7 * 1%); transform: translate(-50%, -50%);
  display: flex; align-items: center; gap: 9px; height: 44px; padding: 0 16px; border-radius: 999px;
  white-space: nowrap; font-size: 14px;
  /* So breit wie ihr Text: Mit left: 50% durfte sie sonst nur die halbe
     Fläche nehmen, und „iCloud Drive · verschlüsselt“ lief am Telefon über
     ihren Rand (25.10.2026). */
  width: max-content;
  background: var(--reiter); -webkit-backdrop-filter: blur(24px); backdrop-filter: blur(24px);
  box-shadow: inset 0 0 0 1px var(--glas-kante), var(--schatten);
}
.dienst-pille svg { width: 16px; height: 16px; flex: none; }
.dienst-pille b { font-weight: 600; }
.dienst-pille span { color: var(--text-2); }
/* Schmal behält die Pille ihre Größe in Pixeln, die Zeichnung schrumpft.
   Am Telefon deckte sie so den rechten Strang bis 11 Pixel über dem
   Bürorechner zu (Tim, 30.10.2026). Sie rückt deshalb nach oben, so weit,
   dass sie die Enden der Stränge auf der Höhe 70 noch mit 4 Pixeln deckt:
   Mitte 70 weniger halbe Höhe (19) weniger 4. Die Regel steht hinter der
   Grundregel der Pille, davor gewann die und die Pille wurde nie kleiner. */
@container (max-width: 520px) {
  .geraet-name { font-size: 11px; }
  .dienst-pille { gap: 7px; height: 38px; padding: 0 13px; font-size: 13px; top: calc(70 / 4.7 * 1% - 15px); }
}

/* ══ Schluss ════════════════════════════════════════════════ */
.schluss {
  padding-block: clamp(88px, 67.2px + 5.333vw, 144px);
  background: radial-gradient(ellipse 50% 70% at 50% 100%, rgba(234, 180, 74, var(--schein-mitte)), transparent 78%);
}
.schluss .mitte { gap: 22px; }
.schluss h2 { max-width: 900px; line-height: 1.04; }

/* ══ Ruhige Fassung ═════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
  .strich path { transition: none; }
  .gobd-kette li { opacity: 1; transform: none; transition: none; }
  .teil, .pille-erkannt, .balken-paar i, .balken-einzeln, .band-spur i, .saeulen-linie,
  .buehne-schirm, .buehne-schein, .satz-a, .satz-b, .karussell-punkte i { transition: none; }
  .buehne-fenster { transform: none !important; }
  .pfad-lauf { display: none; }
  .reiter.an.laeuft .reiter-lauf { animation: none; width: calc(100% - 32px); }
}
@media (prefers-reduced-transparency: reduce) {
  .buehne-schirm .glas { display: none; }
  .buehne-schirm .deckend { display: block; }
}