/* Startseite vertragsvorlagen.kukanilea.de -- Aufbau der musterbrief-Startseite (Hero mit Suche,
   Faecher, Band, Schaukasten, Themenabschnitte), Farbe Petrol. Zwei Themes ueber Tokens:
   Light = reines Weiss, Dark = Midnight (#0b0f19); die Werte stehen in styles.css.

   Kontraste (WCAG 2.1) werden nicht hier behauptet, sondern von axe in beiden Themes gemessen:
   tests/e2e/vertragsvorlagen-routen.spec.mjs. Die Blaetter (.sv-blatt) bleiben in beiden
   Themes weisses Papier -- ein Dokument wird im Dark Mode nicht dunkel. */
:root {
  --st-b2b: #1d4ed8;
  --st-b2b-flaeche: #eff4ff;
  --st-b2b-kante: #bfd3ff;
  --st-b2b-punkt: #3b82f6;
  --st-papier: var(--paper);
  --st-papier-2: var(--paper-2);
  --st-flaeche: var(--white);
  --st-tinte: var(--ink);
  --st-text-2: #334155;
  --st-grau: var(--ink-3);
  --st-kante: var(--line);
  --st-kante-warm: #dbe3ea;
  --st-feldkante: #64748b;
  --st-kupfer: var(--blue);
  --st-kupfer-tief: var(--blue-2);
  --st-kupfer-hell: var(--blue-tint);
  --st-marke: #134e4a;
  --st-marke-kante: #b7ddd6;
  --st-auf-akzent: var(--auf-akzent);
  --st-ease: cubic-bezier(0.16, 1, 0.3, 1);
  --st-schatten: 0 1px 2px rgb(15 23 42 / .04), 0 10px 30px -10px rgb(0 0 0 / .05);
}
:root[data-theme="dark"] {
  --st-b2b: #93c5fd;
  --st-b2b-flaeche: #172554;
  --st-b2b-kante: #1e3a8a;
  --st-b2b-punkt: #60a5fa;
  --st-text-2: #cbd5e1;
  --st-kante-warm: #263244;
  --st-feldkante: #94a3b8;
  --st-marke: #99f6e4;
  --st-marke-kante: #1f4f4a;
  --st-schatten: 0 10px 30px -10px rgb(0 0 0 / .5);
}

body { background: var(--st-papier); }

/* ── Kopfbereich ── */
.st-hero {
  background:
    radial-gradient(70% 90% at 85% 0%, color-mix(in srgb, var(--st-kupfer) 9%, transparent), transparent 70%),
    var(--st-papier);
  border-bottom: 1px solid var(--st-kante);
  color: var(--st-tinte);
  padding: 64px 0 40px;
}
.st-hero-innen { text-align: center; }
.st-kicker {
  margin: 0 0 16px; font-size: 12.5px; font-weight: 700; letter-spacing: .12em;
  text-transform: uppercase; color: var(--st-kupfer-tief);
}
.st-hero h1 {
  font-weight: 700; font-size: clamp(32px, 5vw, 52px);
  line-height: 1.12; letter-spacing: -0.01em; margin: 0 auto 16px; max-width: 24ch; color: var(--st-tinte);
  text-wrap: balance;
}
.st-lede { font-size: 18px; line-height: 1.6; color: var(--st-grau); max-width: 56ch; margin: 0 auto 32px; }

/* Suche */
.st-suche { position: relative; max-width: 640px; margin-inline: auto; text-align: left; }
.st-suche-label { display: block; font-weight: 700; font-size: 15px; margin-bottom: 8px; color: var(--st-tinte); }
.st-suche-feld {
  display: flex; align-items: center; gap: 10px; background: var(--st-flaeche); color: var(--st-tinte);
  border: 1px solid var(--st-feldkante); border-radius: 10px; padding: 0 16px; box-shadow: var(--st-schatten);
}
.st-suche-feld input {
  flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; min-height: 56px;
  font-size: 17px; font-family: inherit; color: var(--st-tinte);
}
.st-suche-feld:focus-within { outline: 3px solid var(--st-kupfer-tief); outline-offset: 2px; }
.st-treffer {
  list-style: none; margin: 8px 0 0; padding: 6px; background: var(--st-flaeche); border: 1px solid var(--st-kante);
  border-radius: 10px; box-shadow: 0 12px 30px -16px rgb(30 41 59 / .3);
}
.st-treffer a {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 48px;
  padding: 8px 12px; border-radius: 8px; color: var(--st-tinte); text-decoration: none; font-weight: 600;
}
.st-treffer a:hover, .st-treffer a:focus-visible { background: var(--st-kupfer-hell); outline: none; }
.st-treffer small { font-weight: 400; color: var(--st-grau); font-size: 12.5px; }
.st-suche-status { min-height: 1.3em; margin: 8px 0 0; font-size: 14px; color: var(--st-grau); }

/* ── Faecher im Kopfbereich ──
   Unter 992 px ein 2x2-Raster ohne Drehung. Darueber liegen vier Karten
   versetzt uebereinander. Die Lage steht in left/top, die Drehung allein im
   transform: beim Zeigen richtet sich die Karte auf und hebt sich um 8 px,
   bleibt aber unter dem Zeiger. Mit der Verschiebung im transform wuerde sie
   unter der Maus wegrutschen, die Hover-Lage verlieren und flackern.
   80 px Stufe, 6 px Anheben: am 2026-09-25 bei 66 px und 8 px live gesehen --
   der Zeiger lag auf dem Titel "Mietwohnung", und die Karte DARUNTER richtete
   sich auf. Ihre Oberkante lag knapp unter dem Titel, und das Anheben schob
   sie weiter darueber. Die Kante muss den Titel mit Abstand tragen, auch
   wenn die Nachbarkarte sich aufrichtet und hebt. */
.st-hero-deck { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; max-width: 640px; margin: 28px auto 0; }
.st-deck-card {
  display: flex; align-items: center; gap: 14px; min-height: 64px; padding: 12px 14px; text-align: left;
  background: var(--st-flaeche); border: 1px solid var(--st-kante); border-radius: 10px;
  box-shadow: 0 10px 25px -5px rgb(30 41 59 / .08); color: var(--st-tinte); text-decoration: none;
  transition: transform .25s cubic-bezier(.16, 1, .3, 1), box-shadow .25s ease, border-color .25s ease;
}
.st-deck-card:hover { border-color: var(--st-kupfer); }
.st-deck-card:focus-visible { outline: 3px solid var(--st-kupfer-tief); outline-offset: 3px; }
.st-deck-text { display: grid; gap: 3px; min-width: 0; flex: 1; }
.st-deck-badge {
  justify-self: start; font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: var(--st-marke); background: var(--st-kupfer-hell); border: 1px solid var(--st-marke-kante); padding: 1px 8px; border-radius: 999px;
}
.st-deck-card strong { font-size: 19px; font-weight: 700; line-height: 1.2; }
.st-deck-card small { font-size: 13px; color: var(--st-grau); line-height: 1.35; }
.st-deck-card small:empty { display: none; }
.st-deck-los { font-size: 13.5px; font-weight: 700; color: var(--st-kupfer-tief); margin-top: 4px; }
.st-deck-bild { flex: none; width: 64px; }
@media (min-width: 992px) { .st-deck-bild { width: 104px; } }
.st-deck-bild .sv-blatt { box-shadow: 0 1px 3px rgb(15 23 42 / .18); border-radius: 2px; }
/* Telefon und Tablet: vier Daumenziele unter der Suche, ein Tipp startet die
   Vorlage. Kennzeichen oben, Titel unten -- die Karte ist gross genug, um sie
   ohne Zielen zu treffen. */
@media (max-width: 991px) {
  .st-deck-bild, .st-deck-los { display: none; }
  .st-deck-card { min-height: 96px; align-items: stretch; }
  .st-deck-text { align-content: space-between; }
}

@media (min-width: 992px) {
  .st-hero-innen { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 40px; align-items: center; text-align: left; }
  .st-hero-text .st-kicker, .st-hero-text h1, .st-hero-text .st-lede, .st-hero-text .st-suche { margin-left: 0; }
  .st-hero-text h1 { max-width: 16ch; }

  .st-hero-deck { display: block; position: relative; width: 420px; height: 450px; max-width: none; margin: 0 auto; }
  .st-deck-card {
    position: absolute; left: var(--x); top: var(--y); width: 350px; min-height: 176px; box-sizing: border-box;
    align-items: flex-start; padding: 16px 16px 16px 18px; transform: rotate(var(--dreh));
  }
  .st-deck-1 { --x: 0px;  --y: 0px;   --dreh: -4deg;  z-index: 1; }
  .st-deck-2 { --x: 48px; --y: 80px;  --dreh: 2.5deg; z-index: 2; }
  .st-deck-3 { --x: 14px; --y: 160px; --dreh: -1.5deg; z-index: 3; }
  .st-deck-4 { --x: 56px; --y: 240px; --dreh: 3deg;   z-index: 4; }
  .st-deck-card:hover, .st-deck-card:focus-visible {
    transform: translateY(-6px) rotate(0deg); z-index: 20; border-color: var(--st-kupfer);
    box-shadow: 0 20px 30px -10px rgb(15 118 110 / .25), 0 10px 15px -5px rgb(30 41 59 / .1);
  }
}

/* ── Band: fertige Dokumente zum Ansehen ── */
.st-band { padding: 36px 0 12px; }
.st-band-kopf { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 16px; }
.st-band-titel { margin: 0; font-size: 15px; font-weight: 700; letter-spacing: .04em; color: var(--st-grau); }
.st-band-pause {
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 14px;
  border: 1px solid var(--st-feldkante); border-radius: 8px; background: var(--st-flaeche); color: var(--st-tinte);
  font: inherit; font-size: 14px; font-weight: 600; cursor: pointer;
}
.st-band-pause[hidden] { display: none; }
.st-band-pause:hover { border-color: var(--st-kupfer); }
.st-band-pause:focus-visible { outline: 3px solid var(--st-kupfer-tief); outline-offset: 2px; }
.st-band-angehalten .st-band-pause svg path { d: path("M8 5.5v13l11-6.5z"); }

/* Ohne Lauf (Touch, reduzierte Bewegung, kein JavaScript): eine Reihe zum
   Wischen, jede Karte rastet ein. */
.st-band-fenster {
  overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory;
  padding: 8px max(20px, calc((100vw - 1200px) / 2)) 16px; scrollbar-width: thin;
  /* Ohne das rastet die erste Karte an der Bildschirmkante statt am Rand ein. */
  scroll-padding-inline: max(20px, calc((100vw - 1200px) / 2));
}
/* Abstand als Rand je Karte, nicht als gap: nur so ist die Spur genau zwei
   gleiche Haelften breit, und -50 % trifft die Naht auf den Pixel. */
.st-band-spur { list-style: none; display: flex; margin: 0; padding: 0; width: max-content; }
.st-band-spur > li { scroll-snap-align: start; padding-right: 16px; }

/* Mit Lauf: das Fenster schneidet ab, die Spur gleitet von links nach rechts.
   Sie traegt jede Karte zweimal -- bei -50 % steht die zweite Runde genau
   dort, wo die erste begann, und der Sprung ist unsichtbar. Der Tastaturfokus
   haelt nur an, wenn er auf einer KARTE liegt -- laege er am Knopf, bliebe
   das Band nach "fortsetzen" einfach stehen. */
.st-band-laeuft .st-band-fenster { overflow: hidden; scroll-snap-type: none; padding-inline: 0; }
.st-band-laeuft .st-band-spur { animation: st-band 80s linear infinite; }
.st-band-laeuft:hover .st-band-spur,
.st-band-laeuft .st-band-fenster:focus-within .st-band-spur,
.st-band-angehalten .st-band-spur { animation-play-state: paused; }
@keyframes st-band { from { transform: translateX(-50%); } to { transform: translateX(0); } }

.st-slide {
  display: flex; align-items: center; gap: 14px; width: 250px; min-height: 104px; padding: 12px 14px;
  background: var(--st-flaeche); border: 1px solid var(--st-kante); border-radius: 10px; box-shadow: var(--st-schatten);
  color: var(--st-tinte); text-decoration: none; transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease;
}
.st-slide:hover, .st-slide:focus-visible {
  transform: translateY(-3px); border-color: var(--st-kupfer);
  box-shadow: 0 10px 24px -14px rgb(30 41 59 / .35);
}
.st-slide:focus-visible { outline: 3px solid var(--st-kupfer-tief); outline-offset: 2px; }
.st-slide-bild { flex: none; width: 58px; }
.st-slide-bild .sv-blatt { box-shadow: 0 1px 3px rgb(15 23 42 / .18); border-radius: 2px; }
.st-slide-text { display: grid; gap: 2px; min-width: 0; }
.st-slide-art { font-size: 11.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--st-kupfer-tief); }
.st-slide strong { font-size: 18px; font-weight: 700; line-height: 1.2; }
.st-slide small { font-size: 12.5px; color: var(--st-grau); line-height: 1.35; }
.st-slide small:empty { display: none; }

/* ── Schaukasten: ein Blatt in voller Groesse ── */
.st-schau {
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 56px; align-items: center;
  margin-top: 40px; padding: 48px; background: var(--st-flaeche); border: 1px solid var(--st-kante);
  border-radius: 12px; box-shadow: var(--st-schatten);
}
.st-schau-blatt { justify-self: center; width: 100%; max-width: 340px; }
.st-schau-blatt:empty { display: none; }
.st-schau-blatt .sv-blatt { box-shadow: 0 1px 2px rgb(30 41 59 / .08), 0 18px 40px -20px rgb(30 41 59 / .4); border-radius: 2px; }
.st-schau-blatt .sv-merkmale { justify-content: center; margin-top: 16px; gap: 6px; }
.st-schau-blatt .sv-merkmale li { font-size: 12.5px; padding: 3px 10px; }
.st-schau .st-titel { margin: 0 0 8px; text-wrap: balance; }
.st-untertitel { margin: 0; color: var(--st-grau); font-size: 15.5px; }
.st-reiter { display: inline-flex; flex-wrap: wrap; gap: 4px; margin: 22px 0 18px; padding: 4px; background: var(--st-papier-2); border: 1px solid var(--st-kante-warm); border-radius: 10px; }
.st-reiter[hidden] { display: none; }
.st-reiter button {
  min-height: 44px; padding: 0 16px; border: 0; border-radius: 7px; background: transparent;
  font: inherit; font-weight: 600; font-size: 15px; color: var(--st-grau); cursor: pointer;
}
.st-reiter button:hover { color: var(--st-tinte); }
.st-reiter button[aria-selected="true"] { background: var(--st-flaeche); color: var(--st-tinte); box-shadow: 0 1px 3px rgb(30 41 59 / .12), inset 0 -2px 0 var(--st-kupfer); }
.st-reiter button:focus-visible { outline: 3px solid var(--st-kupfer-tief); outline-offset: 2px; }
.st-schau-text p { margin: 0 0 20px; color: var(--st-text-2); font-size: 16px; line-height: 1.65; max-width: 52ch; }
.st-schau-text + .st-schau-text { margin-top: 24px; }
.st-reiter:not([hidden]) ~ .st-schau-text + .st-schau-text { margin-top: 0; }
.st-cta {
  display: inline-flex; align-items: center; gap: 8px; min-height: 48px; padding: 0 22px; border-radius: 8px;
  background: var(--st-kupfer); color: var(--st-auf-akzent); font-weight: 700; font-size: 16px; text-decoration: none;
  transition: background-color .25s ease;
}
.st-cta:hover { background: var(--st-marke); }
.st-cta:focus-visible { outline: 3px solid var(--st-tinte); outline-offset: 3px; }

/* ── Kapitel ── */
.st-kapitel-liste { margin-top: 24px; }
.st-kapitel {
  display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: 32px;
  padding: 56px 0; border-top: 1px solid var(--st-kante-warm);
  scroll-margin-top: 96px;
}
.st-kapitel:first-child { border-top: 0; }
.st-kapitel-num {
  margin: 0; font-size: 56px; line-height: 1; font-weight: 500;
  color: var(--st-kupfer-tief); font-variant-numeric: lining-nums;
}
.st-kapitel-num::after { content: ""; display: block; width: 40px; height: 2px; margin-top: 14px; background: var(--st-kupfer); }
.st-kapitel h2 {
  text-wrap: balance;
  font-weight: 700; font-size: clamp(26px, 3.2vw, 34px);
  line-height: 1.2; margin: 0 0 10px; color: var(--st-tinte);
}
.st-kapitel-text { margin: 0 0 24px; max-width: 62ch; color: var(--st-grau); font-size: 16.5px; line-height: 1.6; }
.st-link-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 20px; }
.st-story-link {
  display: flex; align-items: center; gap: 10px; min-height: 52px; padding: 10px 16px;
  background: var(--st-flaeche); border: 1px solid var(--st-kante); border-radius: 8px; box-shadow: var(--st-schatten);
  color: var(--st-tinte); font-weight: 600; font-size: 15.5px; text-decoration: none;
  transition: border-color .25s ease, background-color .25s ease;
}
.st-story-link::after { content: "→"; margin-left: auto; color: var(--st-kupfer-tief); transition: transform .25s ease; }
.st-story-link:hover { border-color: var(--st-kupfer); background: var(--st-kupfer-hell); }
.st-story-link:hover::after, .st-story-link:focus-visible::after { transform: translateX(3px); }
.st-story-link:focus-visible { outline: 3px solid var(--st-kupfer-tief); outline-offset: 2px; }
.st-tag {
  font-style: normal; font-size: 11.5px; font-weight: 700; padding: 2px 8px; border-radius: 999px;
  background: var(--st-kupfer-hell); color: var(--st-marke); border: 1px solid var(--st-marke-kante);
}

/* ── Gemeinsame Titel ── */
.st-titel { font-weight: 700; font-size: clamp(24px, 3vw, 30px); margin: 56px 0 20px; color: var(--st-tinte); }

/* ── Vorteile ── */
.st-vorteile { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.st-vorteil { background: var(--st-flaeche); border: 1px solid var(--st-kante); border-radius: 10px; padding: 24px; box-shadow: var(--st-schatten); }
.st-vorteil h3 { margin: 14px 0 6px; font-size: 17px; color: var(--st-tinte); }
.st-vorteil p { margin: 0; color: var(--st-grau); font-size: 15px; line-height: 1.6; }
.st-card-icon {
  display: inline-grid; place-items: center; width: 44px; height: 44px; border-radius: 50%;
  background: var(--st-kupfer-hell); color: var(--st-kupfer-tief);
}

/* ── FAQ ── */
.st-faq { background: var(--st-flaeche); border: 1px solid var(--st-kante); border-radius: 10px; padding: 4px 24px; margin-bottom: 48px; box-shadow: var(--st-schatten); }
.st-faq details + details { border-top: 1px solid var(--st-kante); }
.st-faq summary {
  list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between;
  gap: 16px; min-height: 56px; font-weight: 700; font-size: 16px; color: var(--st-tinte);
  position: relative; padding-right: 32px;
}
.st-faq summary::-webkit-details-marker { display: none; }
/* Plus aus zwei Balken; beim Oeffnen legt sich der senkrechte flach. */
.st-faq summary::before, .st-faq summary::after {
  content: ""; position: absolute; right: 4px; top: 50%; width: 16px; height: 2px;
  margin-top: -1px; background: var(--st-kupfer-tief); border-radius: 1px;
}
.st-faq summary::before { transform: rotate(90deg); transition: transform .3s ease; }
.st-faq details[open] summary::before { transform: rotate(0deg); }
.st-faq summary:focus-visible { outline: 3px solid var(--st-kupfer-tief); outline-offset: 2px; border-radius: 6px; }
.st-faq ul { margin: 0 0 18px; padding-left: 20px; display: grid; gap: 6px; color: var(--st-text-2); font-size: 15px; line-height: 1.6; }

/* ── Papierblatt (SVG in Millimetern; Farben hier statt im Skript) ── */
.sv-blatt { display: block; width: 100%; height: auto; }
.sv-blatt text { font-family: Arial, Helvetica, sans-serif; fill: #1e293b; }
.sv-blatt .sv-grau { fill: var(--st-feldkante); }
.sv-blatt .sv-fett { font-weight: 700; fill: #1e293b; }
.sv-papier { fill: #fff; stroke: #e2e8f0; stroke-width: .6; }

.sv-linie { stroke: #cbd5e1; stroke-width: .3; }
.sv-balken { fill: #dbe3ea; }

.sv-merkmale { list-style: none; display: flex; flex-wrap: wrap; gap: 4px; margin: 8px 0 0; padding: 0; }
.sv-merkmale li { font-size: 11px; font-weight: 600; padding: 2px 8px; border-radius: 999px; background: var(--st-kupfer-hell); color: var(--st-marke); }

/* Miniatur neben einem Vorlagenverweis -- nur mit Maus, siehe start-vorschau.js.
   position: fixed am body: verschiebt kein Layout. */
.st-pop {
  position: fixed; z-index: 50; width: 196px; padding: 10px; background: var(--st-flaeche); border: 1px solid var(--st-kante);
  border-radius: 10px; box-shadow: 0 16px 40px -14px rgb(30 41 59 / .35);
  opacity: 0; transform: translateY(4px); transition: opacity .15s ease, transform .15s ease;
}
.st-pop.st-pop-an { opacity: 1; transform: translateY(0); }
.st-pop .sv-blatt { border-radius: 2px; }

/* ── Schmale Breiten ── */
@media (max-width: 899px) {
  .st-schau { grid-template-columns: 1fr; gap: 24px; padding: 28px 20px; }
  .st-schau-blatt { order: 2; max-width: 260px; }
}
/* Drei Reiter in einer Zeile, auch bei 320 px. */
@media (max-width: 599px) {
  .st-reiter { display: flex; flex-wrap: nowrap; width: 100%; box-sizing: border-box; }
  .st-reiter button { flex: 1 1 auto; padding: 0 6px; font-size: 14px; white-space: nowrap; }
}
@media (max-width: 767px) {
  .st-hero { padding: 40px 0 32px; }
  .st-lede { font-size: 16.5px; }
  .st-kapitel { grid-template-columns: 1fr; gap: 8px; padding: 40px 0; }
  .st-kapitel-num { font-size: 40px; }
  .st-kapitel-num::after { margin-top: 10px; }
  .st-link-grid { grid-template-columns: 1fr; }
  .st-vorteile { grid-template-columns: 1fr; }
  .st-band-kopf { justify-content: flex-start; }
  .st-slide { width: 232px; }
}

@media (prefers-reduced-motion: reduce) {
  .st-slide, .st-story-link, .st-story-link::after, .st-faq summary::before, .st-cta, .st-deck-card { transition: none; }
  .st-pop { transition: opacity .15s ease; transform: none; }
  .st-deck-card:hover, .st-deck-card:focus-visible { transform: rotate(0deg); }
  .st-slide:hover, .st-slide:focus-visible { transform: none; }
  .st-band-laeuft .st-band-spur { animation: none; }
}

/* Die Faecherkarten ueberlappen sich; der Untertitel der unteren Karten wuerde von der
   naechsten abgeschnitten. Oben bleibt Kennzeichen und Titel, die letzte Karte zeigt alles. */
@media (min-width: 992px) {
  .st-deck-1 small, .st-deck-2 small, .st-deck-3 small { display: none; }
  /* Die Aufforderung ragt sonst halb unter der naechsten Karte hervor; beim Zeigen richtet sich
     die Karte auf und zeigt sie ganz. */
  .st-deck-1 .st-deck-los, .st-deck-2 .st-deck-los, .st-deck-3 .st-deck-los { visibility: hidden; }
  .st-deck-1:hover .st-deck-los, .st-deck-2:hover .st-deck-los, .st-deck-3:hover .st-deck-los,
  .st-deck-1:focus-visible .st-deck-los, .st-deck-2:focus-visible .st-deck-los, .st-deck-3:focus-visible .st-deck-los { visibility: visible; }
}

/* ── Schnellwahl unter der Suche ── */
.st-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0 0; padding: 0; list-style: none; }
.st-chip {
  min-height: 44px; padding: 0 16px; border: 1px solid var(--st-kante-warm); border-radius: 999px;
  background: var(--st-flaeche); color: var(--st-tinte); font: inherit; font-size: 14.5px; font-weight: 600; cursor: pointer;
  transition: border-color .25s var(--st-ease), background-color .25s var(--st-ease), transform .25s var(--st-ease);
}
.st-chip:hover { border-color: var(--st-kupfer); background: var(--st-kupfer-hell); }
.st-chip[aria-pressed="true"] { background: var(--st-kupfer); border-color: var(--st-kupfer); color: var(--st-auf-akzent); }
.st-chip:focus-visible { outline: 2px solid var(--st-kupfer); outline-offset: 2px; }
.st-chips[hidden] { display: none; }
.st-chip-more {
  min-height: 48px; margin: 10px 0 0; padding: 0 4px; border: 0; background: none; color: var(--st-tinte); font: inherit; font-size: 14.5px; font-weight: 600;
  text-decoration: underline; text-underline-offset: 3px; cursor: pointer;
}
.st-chip-more:hover { color: var(--st-kupfer); }
.st-chip-more:focus-visible { outline: 2px solid var(--st-kupfer); outline-offset: 2px; }

/* Suchfeld: leichte Glasflaeche ueber dem Kopfbereich */
.st-suche-feld {
  background: color-mix(in srgb, var(--st-flaeche) 82%, transparent);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
}

/* ── Micro-Interactions ──
   Kurve und Weg gleich fuer alle Karten. Die Deck-Karten heben sich schon (transform mit Drehung);
   Verweiskarten und Bandkarten ziehen nach, und das Blatt in der Karte hebt sich ein Stueck mit. */
.st-story-link, .st-slide { transition: transform .25s var(--st-ease), border-color .25s var(--st-ease), box-shadow .25s var(--st-ease), background-color .25s var(--st-ease); }
.st-story-link:hover, .st-story-link:focus-visible, .st-slide:hover, .st-slide:focus-visible { transform: translateY(-4px) scale(1.01); }
.st-story-link:hover, .st-slide:hover { box-shadow: 0 16px 30px -14px rgb(15 118 110 / .4); }
.st-deck-bild svg, .st-slide-bild svg { transition: transform .25s var(--st-ease), box-shadow .25s var(--st-ease); }
.st-deck-card:hover .st-deck-bild svg, .st-deck-card:focus-visible .st-deck-bild svg,
.st-slide:hover .st-slide-bild svg, .st-slide:focus-visible .st-slide-bild svg { transform: translateY(-3px); box-shadow: 0 8px 14px -6px rgb(15 23 42 / .35); }

/* ── Platz reservieren (CLS = 0): die Blaetter zeichnet ein Skript, der Rahmen steht von Anfang an ── */
.st-deck-bild, .st-slide-bild { aspect-ratio: 210 / 297; }
.st-deck-bild:empty, .st-slide-bild:empty { background: var(--st-papier-2); border-radius: 2px; }
.sv-rahmen { aspect-ratio: 210 / 297; width: 100%; }
.st-schau-blatt { min-height: 1px; }

@media (prefers-reduced-motion: reduce) {
  .st-chip, .st-deck-bild svg, .st-slide-bild svg { transition: none; }
  .st-story-link:hover, .st-story-link:focus-visible, .st-slide:hover, .st-slide:focus-visible { transform: none; }
  .st-deck-card:hover .st-deck-bild svg, .st-slide:hover .st-slide-bild svg { transform: none; }
}

/* B2B: Royal Blue (Text dunkler bzw. heller als der Punkt, damit 4,5:1 halten; der Punkt allein traegt Farbe) */
.st-slide-art.st-b2b, .st-tag.st-b2b, .st-deck-badge.st-b2b { color: var(--st-b2b); }
.st-deck-badge.st-b2b { background: var(--st-b2b-flaeche); border-color: var(--st-b2b-kante); }
.st-tag.st-b2b { background: var(--st-b2b-flaeche); border-color: var(--st-b2b-kante); }
.st-slide-art.st-b2b::before { content: ""; display: inline-block; width: 8px; height: 8px; margin-right: 6px; border-radius: 50%; background: var(--st-b2b-punkt); }
.st-chip-b2b { border-color: var(--st-b2b-kante); }
.st-chip-b2b::before { content: ""; display: inline-block; width: 8px; height: 8px; margin-right: 8px; border-radius: 50%; background: var(--st-b2b-punkt); }
.st-chip-b2b[aria-pressed="true"] { background: var(--st-b2b); border-color: var(--st-b2b); color: var(--st-papier); }
.st-chip-b2b:hover { background: var(--st-b2b-flaeche); border-color: var(--st-b2b-punkt); }

/* Blaetter auf 2x/3x-Bildschirmen: gerade Kanten liegen auf ganzen Geraetepixeln, Text wird nicht auf Raster gezwungen */
.sv-blatt { text-rendering: geometricPrecision; }
.sv-blatt line, .sv-blatt rect, .sv-blatt path { shape-rendering: crispEdges; }

/* Verlinkungen im Kapitelraster duerfen umbrechen: bei 768 px stehen zwei Spalten, und der nicht kuerzbare Name plus Schlagwort plus Pfeil ragte 11 px ueber den Rand */
.st-link-grid > li { min-width: 0; }
.st-story-link { min-width: 0; }
.st-story-name { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; }
.st-story-link .st-tag { flex: none; }
@media (max-width: 768px) {
  .st-chip, #stReiterA, #stReiterM, #stReiterV, .st-story-link { min-height: 48px; min-width: 48px; touch-action: manipulation; }
}