/* Startseite musterbrief.kukanilea.de -- "Papier & Tinte".
   Ruhig wie ein Schreibbuero: Creme statt Verlauf, Tinte statt Tech-Blau,
   Kupfer aus dem Markenzeichen als Siegel.

   Kontraste gerechnet (WCAG 2.1, relative Leuchtdichte):
     Tinte   #1e293b auf #faf9f6 13,9:1 · auf #f3f0ea 12,9:1
     Grau    #475569 auf #faf9f6  7,2:1 · auf #f3f0ea  6,7:1
     Kupfer  #976523 auf #faf9f6  4,8:1 · auf weiss 5,0:1 · weiss darauf 5,0:1
     Kicker  #8a5a1c auf #f3f0ea  5,2:1
     Marke   #7a5019 auf #f6ecdd  6,0:1
   Das helle Kupfer #c6842e erreicht auf Creme nur 3,0:1 und traegt deshalb
   ausschliesslich Linien und Kanten, nie Text und keinen Fokusrahmen. */
:root {
  --st-papier: var(--paper);
  --st-papier-2: #f3f0ea;
  --st-tinte: var(--ink-2);
  --st-grau: var(--ink-3);
  --st-kante: var(--line);
  --st-kante-warm: #e7e1d6;
  --st-kupfer: var(--kupfer);
  --st-kupfer-tief: var(--kupfer-tief);
  --st-kupfer-hell: var(--blue-tint);
  --st-serif: var(--serif);
  --st-schatten: 0 1px 2px rgb(30 41 59 / .04), 0 2px 8px rgb(30 41 59 / .03);
}

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

/* ── Kopfbereich ── */
.st-hero {
  background: var(--st-papier-2);
  border-bottom: 1px solid var(--st-kante-warm);
  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: #8a5a1c;
}
.st-hero h1 {
  font-family: var(--st-serif); font-weight: 600; 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: #fff; color: var(--st-tinte);
  border: 1px solid #b9ae9c; 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: #fff; 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: #fff; 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: #7a5019; background: var(--st-kupfer-hell); border: 1px solid #ead8bd; padding: 1px 8px; border-radius: 999px;
}
.st-deck-card strong { font-family: var(--st-serif); font-size: 19px; font-weight: 600; 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(30 41 59 / .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(198 132 46 / .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 #b9ae9c; border-radius: 8px; background: #fff; 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,
.st-band-haelt .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: #fff; 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(30 41 59 / .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-family: var(--st-serif); font-size: 18px; font-weight: 600; 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: #fff; 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: #fff; 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: #334155; 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-tief); color: #fff; font-weight: 700; font-size: 16px; text-decoration: none;
  transition: background-color .25s ease;
}
.st-cta:hover { background: #7a5019; }
.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-family: var(--st-serif); 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-family: var(--st-serif); font-weight: 600; 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: #fff; 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: #fffdf9; }
.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: #7a5019; border: 1px solid #ead8bd;
}

/* ── Gemeinsame Titel ── */
.st-titel { font-family: var(--st-serif); font-weight: 600; 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: #fff; 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: #fff; 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: #334155; 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: #64748b; }
.sv-blatt .sv-fett { font-weight: 700; fill: var(--st-tinte); }
.sv-papier { fill: #fff; stroke: #e2e8f0; stroke-width: .6; }
.sv-marke { stroke: #94a3b8; stroke-width: .6; }
.sv-fenster { fill: #f6f4ef; }
.sv-linie { stroke: #cbd5e1; stroke-width: .3; }
.sv-balken { fill: #e3e0da; }
.sv-logo { fill: var(--st-kupfer); }
.sv-unterschrift { fill: none; stroke: #1d3b8a; stroke-width: .7; stroke-linecap: round; stroke-linejoin: round; }
.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: #7a5019; }

/* Miniatur neben einem Verweis -- nur mit Maus, siehe start-vorschau.js */
.st-pop {
  position: fixed; z-index: 50; width: 196px; padding: 10px; background: #fff; 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); }

/* ── 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-deck-card:hover, .st-deck-card:focus-visible { transform: rotate(0deg); }
  .st-slide:hover, .st-slide:focus-visible { transform: none; }
  .st-pop { transition: opacity .15s ease; transform: none; }
  .st-band-laeuft .st-band-spur { animation: none; }
}