@font-face { font-family: "Newsreader"; src: url(/assets/fonts/newsreader-300.woff2) format("woff2"); font-weight: 300; font-style: normal; font-display: swap; }
@font-face { font-family: "Newsreader"; src: url(/assets/fonts/newsreader-400-kursiv.woff2) format("woff2"); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "Public Sans"; src: url(/assets/fonts/public-sans.woff2) format("woff2"); font-weight: 400 600; font-display: swap; }

:root {
  --grund: #F5F2EA; --flaeche: #FFFDF8; --text: #1A2233; --leise: #4F5A6E; --blau: #0F1E3A;
  --gold: #B89B5E; --gold-ziffer: #8E733A; --gold-text: #75602E;
  --akzent: var(--blau); --akzent-text: #F5F2EA; --linie: #DDD6C4; --fehler: #A33224; --fokus: var(--blau);
  --schrift-titel: "Newsreader", Georgia, serif; --schrift-text: "Public Sans", "Helvetica Neue", Arial, sans-serif;
  --titel-gewicht: 300; --groesse: 17px; --breite: 1180px; --rundung-fenster: 2px;
  --rahmen-h: 48px;
}
h1, h2 { font-optical-sizing: auto; letter-spacing: -.01em; }
em { font-style: italic; font-weight: 400; color: var(--blau); }

/* Briefkopf */
.ka-briefkopf { position: relative; display: grid; justify-items: center; gap: 10px; padding-block: 40px 0; text-align: center; }
.ka-datum { position: absolute; top: 34px; right: 0; font: italic 400 17px/1.5 var(--schrift-titel); color: var(--leise); }
.ka-logo { display: block; line-height: 0; }
.ka-logo svg { height: 44px; width: auto; overflow: visible; }
.logo-blatt { fill: none; stroke: var(--gold); stroke-width: 2; stroke-linejoin: round; }
.logo-rippe { fill: none; stroke: var(--gold); stroke-width: 1.4; }
.ka-absender {
  padding-bottom: 16px; font-size: 13px; line-height: 1.5; font-weight: 600; letter-spacing: .26em; text-transform: uppercase;
  border-bottom: 1px solid var(--gold);
}

/* Satzspiegel mit Marginalie */
.ka-satz { display: grid; grid-template-columns: 170px minmax(0, 1fr); gap: 0 64px; padding-top: 24px; }
.ka-rand { position: sticky; top: calc(var(--rahmen-h) + 32px); align-self: start; display: grid; gap: 4px; padding-top: 120px; }
.ka-rand a { display: flex; align-items: baseline; gap: 10px; padding: 5px 0; font: italic 400 18px/1.5 var(--schrift-titel); color: var(--leise); text-decoration: none; }
.ka-rand a::before { content: ""; width: 0; height: 1px; align-self: center; background: var(--gold); transition: width .3s; }
.ka-rand a[aria-current] { color: var(--gold-text); }
.ka-rand a[aria-current]::before { width: 18px; }
.ka-rand a:hover { color: var(--text); }
.ka-rz { min-width: 1.8em; }
.ka-zeile { display: none; }

/* Kopf, rein typografisch */
.ka-kopf { padding-block: 96px 120px; }
.ka-kopf h1 { font-size: clamp(56px, 8.4vw, 9rem); line-height: 1.02; }
.ka-unterstrichen { position: relative; white-space: nowrap; }
.ka-feder { position: absolute; left: 0; bottom: -.1em; width: 100%; height: .2em; overflow: visible; }
.ka-feder path { fill: none; stroke: var(--gold); stroke-width: 3; stroke-linecap: round; stroke-dasharray: 1; animation: feder 1.2s .5s cubic-bezier(.3, 0, .1, 1) backwards; }
@keyframes feder { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
.ka-satz-text { max-width: 44ch; margin-top: 48px; font-size: 21px; color: var(--leise); }
.ka-textlink {
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px; margin-top: 24px; padding: 0; border: 0; background: none;
  font: italic 400 24px/1.5 var(--schrift-titel); color: var(--text); text-decoration: underline; text-decoration-color: var(--gold);
  text-decoration-thickness: 1px; text-underline-offset: 7px;
}
.ka-textlink:hover { text-decoration-thickness: 2px; }

/* Abschnitte */
.ka-teil { padding-block: 72px; border-top: 1px solid var(--linie); }
.ka-teil h2 { display: flex; align-items: baseline; gap: 22px; font-size: clamp(36px, 4.2vw, 58px); line-height: 1.1; }
.ka-ziffer { flex: none; min-width: 1.6em; font: 300 .6em/1 var(--schrift-titel); color: var(--gold-ziffer); }
.ka-blau .ka-ziffer { color: var(--gold); }
.ka-absaetze { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 56px; margin: 44px 0 0; }
.ka-absaetze dt { margin-bottom: 6px; font: italic 400 25px/1.25 var(--schrift-titel); }
.ka-absaetze dd { margin: 0; color: var(--leise); }

/* Tinte: nur Deckkraft */
.sehen-bereit [data-beim-sehen] { transition: opacity .4s linear; }
.sehen-bereit [data-beim-sehen]:not([data-gesehen]) { opacity: 0; }

/* Unterlagen auf Tiefblau */
.ka-blau { --text: #F5F2EA; --leise: #B9C2D3; --linie: #2A3D61; --fehler: #FFB4A8; --fokus: var(--gold);
  margin-block: 24px; padding: 64px 56px; border: 0; background: var(--blau); color: var(--text); }
.ka-blau + .ka-teil { border-top: 0; }
.ka-einleitung { margin-top: 18px; font-size: 19px; color: var(--leise); }
.ka-unterlagen { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 48px; margin-top: 40px; align-items: start; }
.ka-auswahl { position: sticky; top: calc(var(--rahmen-h) + 24px); }
.ka-auswahl legend { font-weight: 600; }
.ka-auswahl .haken input { appearance: none; flex: none; width: 24px; height: 24px; margin: 0; border: 1px solid var(--gold); border-radius: 2px; background: transparent no-repeat center / 16px; cursor: pointer; }
.ka-auswahl .haken input:checked { background-color: var(--gold); background-image: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 16 16%27 fill=%27none%27 stroke=%27%230F1E3A%27 stroke-width=%272.2%27 stroke-linecap=%27round%27%3E%3Cpath d=%27M3 8.5 6.5 12 13 4%27/%3E%3C/svg%3E"); }
.ka-auswahl .haken input:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
.ka-schalter { display: grid; gap: 6px; padding-top: 18px; border-top: 1px solid var(--linie); }
.schalter { align-items: center; gap: 14px; }
.schalter input { appearance: none; flex: none; position: relative; width: 46px; height: 26px; margin: 0; border-radius: 999px; background: #3A4C6E; cursor: pointer; transition: background .2s; }
.schalter input::after { content: ""; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: #F5F2EA; transition: transform .2s; }
.schalter input:checked { background: var(--gold); }
.schalter input:checked::after { transform: translateX(20px); }
.schalter input:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }

.ka-blatt { --text: #1A2233; --leise: #4F5A6E; --linie: #DDD6C4; --fokus: var(--blau);
  padding: 36px 36px 30px; background: var(--flaeche); color: var(--text); box-shadow: 0 30px 60px #0007; }
.ka-zaehler-zeile { display: grid; gap: 10px; }
.ka-zaehler { font: italic 400 30px/1.2 var(--schrift-titel); }
.ka-goldlinie { display: grid; gap: 3px; }
.ka-goldlinie span { display: block; height: 2px; background: var(--gold); transform-origin: left; transform: scaleX(var(--anteil, 0)); transition: transform .5s cubic-bezier(.3, 0, .2, 1); }
.ka-goldlinie span + span { transform: scaleX(0); }
.ka-goldlinie.alle span + span { transform: scaleX(1); transition-delay: .3s; }
.ka-gruppe { margin-top: 26px; }
.ka-gruppe h3 { padding-bottom: 6px; border-bottom: 1px solid var(--gold); font: 600 13px/1.5 var(--schrift-text); letter-spacing: .14em; text-transform: uppercase; color: var(--gold-text); }
.ka-gruppe ul { list-style: none; margin: 4px 0 0; padding: 0; }
.ka-gruppe.aus h3 { border-bottom-style: dashed; color: #5D6577; }
.ka-gruppe.aus li { position: relative; padding: 8px 0 8px 36px; line-height: 1.5; color: #6A7183; }
.ka-gruppe.aus li::before { content: ""; position: absolute; left: 0; top: 10px; width: 24px; height: 24px; box-sizing: border-box; border: 1px dashed #A9AFBB; border-radius: 2px; }

/* Haken mit Goldstrich */
.ka-blatt .haken { position: relative; }
.ka-blatt .haken input { appearance: none; flex: none; width: 24px; height: 24px; margin: 0; border: 1px solid #9AA2B1; border-radius: 2px; background: #fff; cursor: pointer; }
.ka-blatt .haken input:focus-visible { outline: 2px solid var(--blau); outline-offset: 2px; }
.ka-haken { position: absolute; left: 2px; top: 6px; width: 26px; height: 24px; overflow: visible; pointer-events: none; }
.ka-haken path { fill: none; stroke: var(--gold-text); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset .25s ease-out; }
.ka-blatt .haken input:checked ~ .ka-haken path { stroke-dashoffset: 0; }
.ka-blatt .haken input:checked ~ span:not(.ka-haken) { color: var(--leise); text-decoration: line-through; text-decoration-color: var(--gold); }

.ka-drucken { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 22px; margin-top: 30px; }
.ka-drucken p { flex: 1 1 220px; font-size: 15px; line-height: 1.5; color: var(--leise); }
.ka-blatt .knopf { min-height: 48px; padding: 10px 22px; border-color: var(--blau); background: var(--blau); color: #F5F2EA; }
.ka-kennzeichnung { margin-top: 22px; font-size: 14px; line-height: 1.5; color: var(--leise); }
.druck-kopf, .druck-fuss { display: none; }

/* Arbeitsweise mit Tiefdruck */
.ka-grundsaetze { list-style: none; margin: 44px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px; }
.ka-grundsaetze li { display: grid; gap: 12px; align-content: start; }
.ka-roemisch { font: 300 46px/1 var(--schrift-titel); color: var(--gold-ziffer); }
.ka-grundsaetze p { color: var(--leise); }
.ka-grundsaetze strong { display: block; margin-bottom: 6px; color: var(--text); font: italic 400 23px/1.3 var(--schrift-titel); }
.ka-abbildung { width: min(560px, 100%); margin: 56px 0 0 auto; }
.ka-tiefdruck { position: relative; aspect-ratio: 16 / 9; background: var(--blau); }
.ka-tiefdruck img { filter: grayscale(1) contrast(1.15) brightness(1.08); mix-blend-mode: screen; }
.ka-tiefdruck::after { content: ""; position: absolute; inset: 0; background: var(--grund); mix-blend-mode: multiply; pointer-events: none; }
.ka-abbildung figcaption { margin-top: 12px; font: italic 400 17px/1.5 var(--schrift-titel); color: var(--leise); }

/* Die Kanzlei und Briefschluss */
.ka-brieftext { max-width: 46ch; margin-top: 32px; font-size: 19px; }
.ka-briefschluss { display: flex; align-items: flex-end; justify-content: space-between; gap: 40px; margin-top: 72px; }
.ka-gruss { font-size: 17px; }
.ka-unterschrift { display: block; width: 300px; height: auto; margin: 6px 0 2px -10px; overflow: visible; }
.ka-unterschrift path { fill: none; stroke: var(--gold-text); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; transform: skewX(-10deg); transform-origin: 0 100%; }
.sehen-bereit .ka-unterschrift[data-beim-sehen] { opacity: 1; transition: none; }
.sehen-bereit .ka-unterschrift:not(.unterschreibt) path { stroke-dashoffset: 1; }
.ka-unterschrift.unterschreibt path { stroke-dashoffset: 0; transition: stroke-dashoffset 1.6s cubic-bezier(.45, 0, .4, 1); }
.ka-name { font-size: 17px; font-weight: 600; }
.ka-briefschluss .ka-textlink { margin-top: 10px; font-size: 21px; }
.ka-siegel { position: relative; flex: none; width: 138px; aspect-ratio: 3 / 4; background: var(--blau); outline: 1px solid var(--gold); outline-offset: 6px; }
.ka-siegel img { filter: grayscale(1) contrast(1.15) brightness(1.08); mix-blend-mode: screen; }
.ka-siegel::after { content: ""; position: absolute; inset: 0; background: var(--grund); mix-blend-mode: multiply; pointer-events: none; }

/* Fußzeile des Briefbogens */
.fuss { padding-top: 24px; }
.ka-briefbogen { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; margin-left: 234px; padding-top: 18px; border-top: 1px solid var(--gold); font-size: 14px; line-height: 1.6; color: var(--leise); }
.ka-briefbogen .beispielangaben { font-size: 12px; line-height: 1.6; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--gold-text); }
.fuss-zeile { border-top-color: var(--linie); }

@media (max-width: 1099px) {
  .ka-satz { grid-template-columns: 140px minmax(0, 1fr); gap: 0 36px; }
  .ka-briefbogen { margin-left: 176px; }
  .ka-unterlagen { grid-template-columns: 1fr; }
  .ka-auswahl { position: static; }
  .ka-blau { padding: 48px 32px; }
}

/* Unter 960 px sind die Ziffern kleiner als 24 px: dunkleres Gold für 4,5 zu 1 */
@media (max-width: 959px) {
  .ka-ziffer { color: var(--gold-text); }
}
@media (max-width: 759px) {
  .ka-briefkopf { padding-top: 16px; }
  .ka-datum { position: static; justify-self: end; font-size: 15px; }
  .ka-absender { font-size: 11px; letter-spacing: .14em; }
  .ka-satz { display: block; padding-top: 0; }
  .ka-rand { display: none; }
  .ka-zeile {
    display: block; position: sticky; top: 0; z-index: 10; margin-inline: calc(-1 * var(--rand)); padding: 10px var(--rand);
    background: var(--grund); border-bottom: 1px solid var(--linie); font: italic 400 17px/1.5 var(--schrift-titel); color: var(--gold-text);
    transition: opacity .3s;
  }
  .ka-zeile.leer { opacity: 0; }
  .ka-kopf { padding-block: 48px 64px; }
  .ka-kopf h1 { font-size: 13vw; }
  .ka-satz-text { margin-top: 32px; font-size: 19px; }
  .ka-textlink { font-size: 22px; }
  .ka-teil { padding-block: 56px; }
  .ka-teil h2 { gap: 14px; }
  .ka-ziffer { color: var(--gold-text); }
  .ka-absaetze { grid-template-columns: 1fr; gap: 22px; }
  .ka-blau { margin-inline: calc(-1 * var(--rand)); padding: 48px var(--rand); }
  .ka-blatt { margin-inline: -6px; padding: 24px 18px; }
  .ka-zaehler-zeile { position: sticky; bottom: 0; z-index: 2; margin-inline: -18px; padding: 12px 18px 14px; background: var(--flaeche); box-shadow: 0 -10px 16px -12px #0003; }
  .ka-zaehler { font-size: 26px; }
  .ka-grundsaetze { grid-template-columns: 1fr; gap: 28px; }
  .ka-abbildung { margin-top: 40px; }
  .ka-briefschluss { margin-top: 56px; gap: 18px; }
  .ka-unterschrift { width: 210px; }
  .ka-siegel { width: min(88px, 22vw); outline-offset: 4px; }
  .ka-briefschluss > div { min-width: 0; }
  .ka-unterschrift { max-width: 100%; }
  .ka-briefbogen { grid-template-columns: 1fr; gap: 12px; margin-left: 0; }
}

@media print {
  @page { margin: 18mm; }
  body { background: #fff; color: #000; }
  body > *:not(main), main > *:not(.ka-satz), .ka-rand, .ka-zeile, .ka-spalte > :not(#unterlagen), #unterlagen h2, #unterlagen .ka-einleitung, .ka-auswahl, .ka-drucken, .ka-kennzeichnung, .ka-goldlinie { display: none !important; }
  .ka-satz { display: block; padding: 0; }
  #unterlagen { margin: 0; padding: 0; background: #fff; }
  .ka-unterlagen { display: block; margin: 0; }
  .ka-blatt { padding: 0; box-shadow: none; background: none; }
  .druck-kopf, .druck-fuss { display: block; font: 12pt var(--schrift-text); }
  .druck-kopf { margin-bottom: 8mm; padding-bottom: 3mm; border-bottom: 1px solid #000; font-weight: 600; }
  .druck-fuss { margin-top: 10mm; font-size: 9pt; }
  .ka-zaehler { color: #000; }
  .ka-gruppe { break-inside: avoid; }
}