/* ==========================================================================
   Scara Sicherheitsberatung - Stilvorlage
   Ein Verfahren fuehrt sich nicht auf: Haarlinien statt Karten, kein Radius,
   keine Schatten, eine einzige Buntfarbe. Alles selbst gehostet.

   Farbrunde vom 03.09.2026, Muster A "Graphit & Bordeaux" (Entscheidung
   Matthias): warmes Graphit statt des kuehlen Fast-Schwarz, Sand fuer die
   Schrift, Bordeaux als Siegel- und Linienfarbe.

   Der Bordeaux traegt auf dunklem Grund NIEMALS Text - er kommt dort nur
   auf 1,6:1. Fuer Akzenttext gibt es --siegel-hell mit 6,0:1. Genau daran
   ist der urspruengliche Entwurf gescheitert: dort stand die Farbe #5c1d12
   auf #0a0a0c, also 1,54:1, und war praktisch unlesbar.

   Die Seite hat ab jetzt genau eine Welt: dunkel. Kein Hell-Dunkel-Wechsel
   mehr, weil die ganze Gestaltung auf dem dunklen Grund aufgebaut ist.
   ========================================================================== */

/* --- Schriften (selbst gehostet, keine Drittanfrage) ---------------------
   Aus dem Claude-Design-Entwurf uebernommen: Spectral fuer Ueberschriften,
   Archivo fuer den Fliesstext, JetBrains Mono fuer Label und Zahlen.
   Archivo und JetBrains Mono sind veraenderliche Schriften - eine Datei
   deckt den ganzen Gewichtsbereich ab.
   Die frueheren Newsreader- und IBM-Plex-Dateien liegen noch im Ordner,
   werden aber nicht mehr geladen.                                        */

@font-face{
  font-family:'Spectral';
  src:url('schrift/spectral-600-latin.woff2') format('woff2');
  font-weight:600; font-style:normal; font-display:swap;
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:'Spectral';
  src:url('schrift/spectral-600-latin-ext.woff2') format('woff2');
  font-weight:600; font-style:normal; font-display:swap;
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face{
  font-family:'Spectral';
  src:url('schrift/spectral-700-latin.woff2') format('woff2');
  font-weight:700; font-style:normal; font-display:swap;
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:'Spectral';
  src:url('schrift/spectral-700-latin-ext.woff2') format('woff2');
  font-weight:700; font-style:normal; font-display:swap;
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face{
  font-family:'Spectral';
  src:url('schrift/spectral-400-italic-latin.woff2') format('woff2');
  font-weight:400; font-style:italic; font-display:swap;
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:'Spectral';
  src:url('schrift/spectral-400-italic-latin-ext.woff2') format('woff2');
  font-weight:400; font-style:italic; font-display:swap;
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face{
  font-family:'Archivo';
  src:url('schrift/archivo-latin.woff2') format('woff2');
  font-weight:400 600; font-style:normal; font-stretch:100%; font-display:swap;
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:'Archivo';
  src:url('schrift/archivo-latin-ext.woff2') format('woff2');
  font-weight:400 600; font-style:normal; font-stretch:100%; font-display:swap;
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face{
  font-family:'JetBrains Mono';
  src:url('schrift/jetbrains-mono-latin.woff2') format('woff2');
  font-weight:400 500; font-style:normal; font-display:swap;
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:'JetBrains Mono';
  src:url('schrift/jetbrains-mono-latin-ext.woff2') format('woff2');
  font-weight:400 500; font-style:normal; font-display:swap;
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

/* --- Rohpalette ---------------------------------------------------------- */

:root{
  --graphit:#1e1d1b;
  --graphit-2:#26241f;
  --graphit-3:#312e28;
  --papier:#efe9dd;
  --papier-2:#d8d2c6;
  --siegel:#6d2434;
  --siegel-hell:#c98a7d;
  --siegel-tief:#4a1723;
  --kreide:#b8b1a4;
  --blei:#928b7d;

  --serif:'Spectral',ui-serif,Georgia,'Times New Roman',serif;
  --sans:'Archivo',ui-sans-serif,system-ui,-apple-system,'Segoe UI',sans-serif;
  --mono:'JetBrains Mono',ui-monospace,'SFMono-Regular',Consolas,monospace;

  /* Die Mono-Label stehen eine Stufe groesser als im Entwurf. Dort waren
     sie 9,5 px in Versalien mit weitem Sperrsatz - auf einem Notebook
     nicht mehr zu lesen.                                                */
  --fs-mono-xs:.75rem;
  --fs-mono-s:.8125rem;
  --fs-body:clamp(1rem,.95rem + .25vw,1.0625rem);
  --fs-lead:clamp(1.1875rem,1.1rem + .5vw,1.4375rem);
  --fs-h3:clamp(1.25rem,1.1rem + .6vw,1.5625rem);
  --fs-h2:clamp(1.6875rem,1.4rem + 1.4vw,2.375rem);
  --fs-h1:clamp(2.125rem,1.6rem + 3.2vw,3.5rem);

  --sp-1:.25rem; --sp-2:.5rem;  --sp-3:.75rem; --sp-4:1rem;  --sp-5:1.5rem;
  --sp-6:2rem;   --sp-7:3rem;   --sp-8:4rem;   --sp-9:6rem;  --sp-10:8rem;

  --marke-breite:0rem;
  --bahn:78rem;

  color-scheme:dark;
}

/* Feinere Toene auf Bildschirmen mit groesserem Farbraum. Reine Zugabe -
   der Hex-Wert oben bleibt die verbindliche Grundlage. */
@supports (color:oklch(50% .1 25)){
  :root{
    --graphit:oklch(23.1% .004 85);
    --graphit-2:oklch(26.1% .010 89);
    --graphit-3:oklch(30.2% .011 85);
    --papier:oklch(93.5% .017 85);
    --papier-2:oklch(86.5% .018 85);
    --siegel:oklch(37.6% .104 10);
    --siegel-hell:oklch(69.3% .080 32);
    --siegel-tief:oklch(29.0% .078 9);
    --kreide:oklch(76.3% .020 83);
    --blei:oklch(63.0% .022 85);
  }
}

/* --- Semantische Ebene: eine Welt, dunkel -------------------------------- */

:root{
  --grund:var(--graphit);
  --grund-2:var(--graphit-2);
  --schrift:var(--papier);
  --schrift-2:var(--kreide);
  --akzent:var(--siegel-hell);      /* alles, was Text ist:    6,0:1 */
  --siegelflaeche:var(--siegel);    /* alles, was Flaeche ist        */
  --linie:rgba(239,233,221,.15);
  --linie-stark:rgba(239,233,221,.30);
}

/* Ein Band hebt sich ab, statt umzukehren. In der einen dunklen Welt gibt
   es nichts umzukehren - die Rechtsseiten benutzen das Attribut an ihrer
   Fusszeile und bekommen dadurch weiterhin eine abgesetzte Flaeche. */
[data-band="invert"]{
  --grund:var(--graphit-2);
  --grund-2:var(--graphit-3);
}

/* --- Grundlagen ---------------------------------------------------------- */

*,*::before,*::after{box-sizing:border-box}

html{
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
}
@media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto} }

body{
  margin:0;
  background:var(--grund);
  color:var(--schrift);
  font-family:var(--sans);
  font-size:var(--fs-body);
  line-height:1.6;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}

h1,h2,h3{
  font-family:var(--serif);
  font-weight:600;
  text-wrap:balance;
  margin:0;
}
h1{font-size:var(--fs-h1);line-height:1.08;letter-spacing:-.012em}
h2{font-size:var(--fs-h2);line-height:1.15;letter-spacing:-.008em}
h3{font-size:var(--fs-h3);line-height:1.25}

p{margin:0 0 var(--sp-4);text-wrap:pretty;hyphens:auto}
p:last-child{margin-bottom:0}

a{color:inherit;text-underline-offset:.18em;text-decoration-thickness:1px;
  text-decoration-color:var(--akzent)}
a:hover{text-decoration-thickness:2px}

:focus-visible{outline:2px solid var(--akzent);outline-offset:3px;border-radius:2px}

::selection{background:var(--akzent);color:var(--grund)}

img,svg{max-width:100%;height:auto}

strong{font-weight:600}

/* --- Bausteine der Auszeichnung ------------------------------------------ */

.mono{
  font-family:var(--mono);
  font-weight:500;
  font-size:var(--fs-mono-xs);
  letter-spacing:.16em;
  text-transform:uppercase;
  line-height:1.4;
  hyphens:none;
}
.zahl{font-variant-numeric:tabular-nums}

.leitsatz{
  font-family:var(--serif);
  font-weight:500;
  font-style:italic;
  font-size:var(--fs-lead);
  line-height:1.4;
}

.lead{font-size:var(--fs-lead);line-height:1.45;color:var(--schrift)}

/* --- Baender und Bahn ---------------------------------------------------- */

.band{
  background:var(--grund);
  color:var(--schrift);
  border-top:1px solid var(--linie);
}
.band:first-of-type{border-top:0}

.bahn{
  max-width:var(--bahn);
  margin-inline:auto;
  padding-inline:clamp(1rem,4vw,3.5rem);
  padding-block:clamp(2.5rem,6vw,5rem);
  display:grid;
  grid-template-columns:[marke] var(--marke-breite) [haupt] minmax(0,1fr);
  column-gap:0;
  position:relative;
}
.bahn > *{grid-column:haupt}

/* Die durchgehende Haarlinie der Markenspalte - der rote Faden. */
@media (min-width:64rem){
  :root{--marke-breite:8rem}
  .bahn{column-gap:var(--sp-6)}
  .bahn::before{
    content:'';
    position:absolute;
    top:0;bottom:0;
    left:calc(clamp(1rem,4vw,3.5rem) + 8rem + var(--sp-6) / 2);
    width:1px;
    background:var(--linie);
  }
  .bahn > .kennung{grid-column:marke;justify-self:start}
}

.kennung{
  display:block;
  font-family:var(--mono);
  font-weight:500;
  font-size:var(--fs-mono-xs);
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--schrift-2);
  margin-bottom:var(--sp-4);
  hyphens:none;
  line-height:1.5;
}
.kennung b{color:var(--akzent);font-weight:500;margin-right:.6em}

/* Textspalte und Randnotizen */
.satz{max-width:64ch}
.mit-notiz{display:grid;gap:var(--sp-5);grid-template-columns:minmax(0,1fr)}
@media (min-width:64rem){
  .mit-notiz{grid-template-columns:minmax(0,62ch) minmax(0,17rem);gap:var(--sp-6)}
}
/* Randnotiz: die Marke in Mono, der Satz in der Lesetype - Mono-Fliesstext
   auf 11 px ist eine Zumutung. */
.notiz{
  font-size:.875rem;
  line-height:1.6;
  color:var(--schrift-2);
  border-left:1px solid var(--akzent);
  padding-left:var(--sp-4);
  align-self:start;
}
.notiz b{
  display:block;color:var(--schrift);font-weight:500;
  font-family:var(--mono);font-size:var(--fs-mono-xs);
  letter-spacing:.16em;text-transform:uppercase;
  margin-bottom:var(--sp-2);
}

/* --- Kopf ---------------------------------------------------------------- */

.kopf{
  position:sticky;top:0;z-index:50;
  background:var(--grund);
  border-bottom:1px solid var(--linie);
}
.kopf__inhalt{
  max-width:var(--bahn);
  margin-inline:auto;
  padding:var(--sp-3) clamp(1rem,4vw,3.5rem);
  display:flex;align-items:center;gap:var(--sp-5);
  min-height:3.5rem;
}
.wortmarke{
  font-family:var(--mono);
  font-weight:500;
  font-size:1rem;
  letter-spacing:.28em;
  text-transform:uppercase;
  text-decoration:none;
  margin-right:auto;
  display:flex;flex-direction:column;gap:.15rem;
}
.wortmarke small{
  font-size:.5625rem;letter-spacing:.2em;color:var(--schrift-2);
  text-transform:uppercase;
}
.kopf__nav{display:none;gap:var(--sp-5);align-items:center}
@media (min-width:60rem){ .kopf__nav{display:flex} }
.kopf__nav a{
  font-family:var(--mono);font-size:var(--fs-mono-xs);letter-spacing:.16em;
  text-transform:uppercase;text-decoration:none;color:var(--schrift-2);
}
.kopf__nav a:hover{color:var(--schrift)}

/* --- Notfallnummer und Warnruf -------------------------------------------
   Die Nummer steht ab jetzt in der Kopfzeile, also auf jeder Seite und ohne
   Scrollen erreichbar. Wer in einer akuten Lage auf diese Seite kommt, soll
   nicht erst ein Formular suchen muessen.
   Das Siegel-Schild ist bewusst die einzige gefuellte Bordeauxflaeche neben
   dem Anfrage-Knopf - Bordeaux traegt hier Sandschrift mit 8,9:1.          */

.notruf{
  display:flex;align-items:center;gap:var(--sp-3);
  min-height:44px;text-decoration:none;flex:none;
}
.notruf__marke{
  font-family:var(--mono);font-weight:500;font-size:.6875rem;
  letter-spacing:.22em;text-transform:uppercase;
  background:var(--siegelflaeche);color:var(--papier);
  padding:.32rem .6rem;white-space:nowrap;
}
.notruf__nr{
  font-family:var(--mono);font-size:.875rem;letter-spacing:.04em;
  font-variant-numeric:tabular-nums;color:var(--schrift);white-space:nowrap;
}
.notruf:hover .notruf__nr,
.notruf:focus-visible .notruf__nr{color:var(--akzent)}

/* Auf schmalen Geraeten bleibt das Schild - antippen waehlt die Nummer,
   die ausgeschriebene Ziffernfolge braucht dort niemand. */
@media (max-width:34rem){
  .notruf__nr{display:none}
  .kopf__inhalt{gap:var(--sp-3)}
  /* Der Zusatz unter der Wortmarke wuerde hier dreizeilig umbrechen und die
     beiden Knoepfe einquetschen. Er steht ohnehin in der Fusszeile. */
  .wortmarke small{display:none}
}

/* Der Hinweis neben dem Formular. Wer eine akute Lage hat, soll das Formular
   gerade NICHT ausfuellen - deshalb steht der Ruf als eigener Block mit
   Siegelrahmen und die Nummer als gefuellter Knopf. */
.warnruf{
  margin-top:var(--sp-5);
  border:1px solid var(--siegelflaeche);
  border-left-width:3px;
  background:linear-gradient(90deg,
    color-mix(in oklab,var(--siegel) 30%,transparent),transparent 78%);
  padding:var(--sp-4);
  display:flex;flex-direction:column;align-items:flex-start;gap:var(--sp-3);
}
.warnruf__titel{
  margin:0;font-family:var(--mono);font-weight:500;font-size:var(--fs-mono-xs);
  letter-spacing:.2em;text-transform:uppercase;color:var(--akzent);
}
.warnruf__text{margin:0;color:var(--schrift);font-size:.9375rem;line-height:1.6}
.warnruf__knopf{font-variant-numeric:tabular-nums;letter-spacing:.06em}

/* --- Knopf --------------------------------------------------------------- */

/* Der Siegellack bleibt Siegellack - auf hellem wie auf dunklem Grund.
   Der aufgehellte Akzent taugt fuer Schrift, nicht fuer eine Flaeche. */
.knopf{
  display:inline-flex;align-items:center;gap:var(--sp-3);
  min-height:2.75rem;padding:.7rem 1.35rem;
  background:var(--siegel);
  color:var(--papier);
  border:1px solid var(--siegel);
  font-family:var(--mono);font-weight:500;font-size:var(--fs-mono-s);
  letter-spacing:.14em;text-transform:uppercase;
  text-decoration:none;cursor:pointer;
  transition:background-color .2s,color .2s,border-color .2s;
}
.knopf:hover{background:transparent;color:var(--akzent);border-color:var(--akzent)}
.knopf[disabled]{opacity:.55;cursor:default}
.knopf[disabled]:hover{background:var(--siegel);color:var(--papier);border-color:var(--siegel)}
.knopf--leer{background:transparent;color:var(--schrift);border-color:var(--linie-stark)}
.knopf--leer:hover{background:transparent;color:var(--akzent);border-color:var(--akzent)}
.knopf svg{width:.9em;height:.9em;fill:none;stroke:currentColor;stroke-width:1.6}
@media (prefers-reduced-motion:reduce){ .knopf{transition:none} }

/* --- Kopfbereich --------------------------------------------------------- */

.einstieg .bahn{padding-block:clamp(3.5rem,10vw,7rem)}
.einstieg h1{max-width:15ch;margin-bottom:var(--sp-5)}
.einstieg .lead{max-width:52ch;color:var(--schrift-2);margin-bottom:var(--sp-6)}
.einstieg__aktion{display:flex;flex-wrap:wrap;gap:var(--sp-4);align-items:center}
.einstieg__zusage{
  margin-top:var(--sp-5);padding-top:var(--sp-4);
  border-top:1px solid var(--linie);
  color:var(--schrift-2);max-width:52ch;
}

/* --- Beweisband ---------------------------------------------------------- */

.beweis .bahn{padding-block:var(--sp-5)}
.beweis__liste{
  list-style:none;margin:0;padding:0;
  display:flex;flex-wrap:wrap;
  font-family:var(--mono);font-size:var(--fs-mono-xs);
  letter-spacing:.14em;text-transform:uppercase;color:var(--schrift-2);
}
.beweis__liste li{padding:.35rem var(--sp-4) .35rem 0;margin-right:var(--sp-4);
  border-right:1px solid var(--linie)}
.beweis__liste li:last-child{border-right:0;margin-right:0}
.beweis__liste b{color:var(--schrift);font-weight:500}

/* --- Verfahrenslinie ----------------------------------------------------- */

@property --spur{
  syntax:'<percentage>';
  inherits:true;
  initial-value:100%;
}

.verfahren__liste{
  list-style:none;margin:var(--sp-6) 0 0;padding:0;
  position:relative;
  container:verfahren / inline-size;
}
.verfahren__liste::before{
  content:'';
  position:absolute;
  top:.9rem;bottom:.9rem;left:4px;
  width:1px;
  background:linear-gradient(var(--akzent) var(--spur),var(--linie) 0);
}
.stufe{
  display:grid;
  grid-template-columns:1.75rem minmax(0,1fr);
  column-gap:var(--sp-4);
  padding:var(--sp-5) 0;
  border-top:1px solid var(--linie);
}
.stufe:first-child{border-top:0;padding-top:0}
.stufe__marke{
  grid-column:1;grid-row:1 / span 3;
  width:9px;height:9px;margin-top:.5rem;
  background:var(--grund);
  box-shadow:0 0 0 4px var(--grund),inset 0 0 0 1px var(--linie-stark);
}
.stufe__nr{
  grid-column:2;
  font-family:var(--mono);font-size:var(--fs-mono-xs);letter-spacing:.2em;
  text-transform:uppercase;color:var(--schrift-2);margin:0 0 var(--sp-2);
}
.stufe__titel{grid-column:2;margin-bottom:var(--sp-2)}
.stufe__text{grid-column:2;color:var(--schrift-2);max-width:56ch;margin-bottom:var(--sp-3)}
.stufe__frist{
  grid-column:2;
  font-family:var(--mono);font-size:var(--fs-mono-s);letter-spacing:.08em;
  font-variant-numeric:tabular-nums;color:var(--akzent);margin:0;
}
.stufe__hinweis{
  grid-column:2;margin:var(--sp-3) 0 0;padding-left:var(--sp-4);
  border-left:1px solid var(--linie-stark);
  font-size:.875rem;color:var(--schrift-2);max-width:56ch;
}

@media (min-width:48rem){
  .stufe{grid-template-columns:1.75rem minmax(0,1fr) 14rem}
  .stufe__frist{grid-column:3;grid-row:1 / span 2;justify-self:start;margin-top:.15rem}
  .stufe__hinweis{grid-column:2 / span 2}
}

/* Die Spur fuellt sich beim Scrollen, die Marken schalten von leer auf
   gesetzt. Der Endzustand ist der Grundzustand: wo das nicht laeuft, ist
   die Linie durchgezogen und alle Marken sind gesetzt. */
.stufe__marke{
  /* Raute statt Quadrat - die Marke aus dem Claude-Design-Entwurf. */
  transform:rotate(45deg);
  background:var(--akzent);
  box-shadow:0 0 0 4px var(--grund),inset 0 0 0 1px var(--akzent);
}
@media (prefers-reduced-motion:no-preference){
  @supports (animation-timeline:view()){
    .verfahren__liste{
      animation:spur-fuellen linear both;
      animation-timeline:view();
      animation-range:cover 10% cover 75%;
    }
    @keyframes spur-fuellen{ from{--spur:0%} to{--spur:100%} }

    .stufe__marke{
      animation:marke-setzen linear both;
      animation-timeline:view();
      animation-range:entry 25% cover 35%;
    }
    @keyframes marke-setzen{
      from{background:var(--grund);box-shadow:0 0 0 4px var(--grund),inset 0 0 0 1px var(--linie-stark)}
      to{background:var(--akzent);box-shadow:0 0 0 4px var(--grund),inset 0 0 0 1px var(--akzent)}
    }
    @container verfahren (width < 34rem){
      .stufe__marke{animation-range:entry 8% cover 20%}
    }
  }
}

/* --- Sparten ------------------------------------------------------------- */

.sparte{
  padding:var(--sp-5) 0;
  border-top:1px solid var(--linie);
  container:sparte / inline-size;
}
.sparte:first-of-type{border-top:1px solid var(--linie-stark)}
.sparte__kopf{display:flex;flex-wrap:wrap;align-items:baseline;gap:var(--sp-3);
  margin-bottom:var(--sp-3)}
.sparte__code{
  font-family:var(--mono);font-size:var(--fs-mono-s);letter-spacing:.2em;
  color:var(--akzent);
}
.sparte__text{color:var(--schrift-2);max-width:62ch}
.sparte__aus{
  margin-top:var(--sp-3);
  font-size:.9375rem;color:var(--schrift-2);max-width:62ch;line-height:1.6;
}
.sparte__aus b{
  display:block;color:var(--schrift);font-weight:500;
  font-family:var(--mono);font-size:var(--fs-mono-xs);
  letter-spacing:.16em;text-transform:uppercase;
  margin-bottom:var(--sp-2);
}

/* --- Vorlauf und Express ------------------------------------------------- */

.vorlauf{width:100%;border-collapse:collapse;margin:var(--sp-5) 0 0;
  font-variant-numeric:tabular-nums}
.vorlauf caption{text-align:left;color:var(--schrift-2);margin-bottom:var(--sp-4);
  max-width:62ch}
.vorlauf th,.vorlauf td{
  text-align:left;padding:var(--sp-4) var(--sp-4) var(--sp-4) 0;
  border-top:1px solid var(--linie);vertical-align:top;
}
.vorlauf thead th{
  border-top:1px solid var(--linie-stark);
  font-family:var(--mono);font-weight:500;font-size:var(--fs-mono-xs);
  letter-spacing:.16em;text-transform:uppercase;color:var(--schrift-2);
}
.vorlauf tbody th{font-weight:400}
.vorlauf td:last-child{padding-right:0}
.vorlauf .wert{font-family:var(--mono);font-size:var(--fs-mono-s);letter-spacing:.06em;
  color:var(--akzent);white-space:nowrap}

.weg{
  border-top:1px solid var(--linie);
  padding:var(--sp-5) 0;
  display:grid;gap:var(--sp-3);
}
.weg--ruf{border-left:2px solid var(--akzent);padding-left:var(--sp-4);
  border-top:1px solid var(--linie)}
.weg__titel{font-family:var(--mono);font-size:var(--fs-mono-xs);letter-spacing:.18em;
  text-transform:uppercase;color:var(--akzent);margin:0}
.weg p{color:var(--schrift-2);max-width:62ch;margin:0}
.ruf{
  font-family:var(--mono);font-size:1.0625rem;letter-spacing:.06em;
  font-variant-numeric:tabular-nums;color:var(--schrift);
  text-decoration:none;border-bottom:1px solid var(--akzent);
  align-self:start;justify-self:start;padding-bottom:.15rem;
}

/* --- Nachweise ----------------------------------------------------------- */

.nachweis{
  display:grid;gap:var(--sp-3);
  grid-template-columns:minmax(0,1fr);
  padding:var(--sp-4) 0;
  border-top:1px solid var(--linie);
}
@media (min-width:44rem){
  .nachweis{grid-template-columns:9rem minmax(0,1fr);gap:var(--sp-5)}
}
.nachweis dt{
  font-family:var(--mono);font-size:var(--fs-mono-xs);letter-spacing:.16em;
  text-transform:uppercase;color:var(--akzent);
}
.nachweis dd{margin:0;color:var(--schrift-2);max-width:62ch}

/* --- Formular ------------------------------------------------------------ */

.anfrage__raster{display:grid;gap:var(--sp-7);grid-template-columns:minmax(0,1fr)}
@media (min-width:64rem){
  .anfrage__raster{grid-template-columns:minmax(0,22rem) minmax(0,1fr);gap:var(--sp-8)}
}

.ablauf{list-style:none;margin:var(--sp-5) 0 0;padding:0}
.ablauf li{
  padding:var(--sp-4) 0;border-top:1px solid var(--linie);
  color:var(--schrift-2);
}
.ablauf b{display:block;color:var(--schrift);font-family:var(--mono);
  font-size:var(--fs-mono-xs);letter-spacing:.16em;text-transform:uppercase;
  margin-bottom:var(--sp-2)}

.formular{margin-top:var(--sp-5)}
.schritt{border:0;margin:0 0 var(--sp-6);padding:0}
.schritt > legend{padding:0;margin-bottom:var(--sp-5);width:100%}
.schritt__titel{
  font-size:var(--fs-h3);margin:0;
  padding-bottom:var(--sp-3);border-bottom:1px solid var(--linie-stark);
}
.feld{display:block;margin-bottom:var(--sp-5)}
.feld > span{
  display:block;
  font-family:var(--mono);font-size:var(--fs-mono-xs);letter-spacing:.16em;
  text-transform:uppercase;color:var(--schrift-2);margin-bottom:var(--sp-2);
}
.feld input[type=text],
.feld input[type=email],
.feld textarea{
  width:100%;
  background:transparent;
  border:0;border-bottom:1px solid var(--linie-stark);
  color:var(--schrift);
  font-family:var(--sans);font-size:var(--fs-body);
  padding:.6rem 0;min-height:2.75rem;
  border-radius:0;
}
.feld textarea{resize:vertical;min-height:5.5rem;field-sizing:content}
.feld input:focus-visible,.feld textarea:focus-visible{
  outline:0;border-bottom-color:var(--akzent);border-bottom-width:2px;
  padding-bottom:calc(.6rem - 1px);
}
.feld input:user-invalid,.feld textarea:user-invalid{border-bottom-color:var(--akzent)}

.wahl{display:grid;gap:var(--sp-2);margin:0;padding:0;border:0}
.wahl > legend{
  font-family:var(--mono);font-size:var(--fs-mono-xs);letter-spacing:.16em;
  text-transform:uppercase;color:var(--schrift-2);margin-bottom:var(--sp-3);padding:0;
}
.wahl label{
  display:flex;align-items:center;gap:var(--sp-3);
  min-height:2.75rem;padding:.5rem var(--sp-4) .5rem var(--sp-3);
  border:1px solid var(--linie);cursor:pointer;
}
.wahl label:hover{border-color:var(--linie-stark)}
.wahl input{accent-color:var(--akzent);width:1rem;height:1rem;flex:none}
.wahl input:checked + span{color:var(--schrift)}
.wahl span{color:var(--schrift-2)}

.warnung{
  margin:0 0 var(--sp-4);padding-left:var(--sp-4);
  border-left:1px solid var(--akzent);
  font-size:.9375rem;color:var(--schrift-2);
}

.einwilligung{
  display:flex;gap:var(--sp-3);align-items:flex-start;
  margin:var(--sp-5) 0;cursor:pointer;
}
.einwilligung input{accent-color:var(--akzent);width:1rem;height:1rem;flex:none;
  margin-top:.3rem}
.einwilligung span{font-size:.9375rem;color:var(--schrift-2);line-height:1.55}

.zaehler{
  display:block;text-align:right;
  font-family:var(--mono);font-size:var(--fs-mono-xs);letter-spacing:.08em;
  color:var(--schrift-2);font-variant-numeric:tabular-nums;margin-top:var(--sp-2);
}

.fortschritt{
  font-family:var(--mono);font-size:var(--fs-mono-xs);letter-spacing:.14em;
  text-transform:uppercase;color:var(--schrift-2);
  font-variant-numeric:tabular-nums;margin:0 0 var(--sp-5);
  display:flex;align-items:center;gap:var(--sp-3);
}
.fortschritt b{color:var(--schrift);font-weight:500}
.fortschritt i{display:flex;gap:4px;font-style:normal}
.fortschritt i span{width:22px;height:2px;background:var(--linie-stark)}
.fortschritt i span[data-an]{background:var(--akzent)}

.formular__fuss{display:flex;flex-wrap:wrap;gap:var(--sp-4);align-items:center}

.fehlermeldung{
  display:block;
  font-family:var(--mono);font-size:var(--fs-mono-xs);letter-spacing:.08em;
  color:var(--akzent);margin-bottom:var(--sp-2);
}

.honig{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

.formular__fuss--nav{margin-top:var(--sp-5)}

/* --- FAQ ----------------------------------------------------------------- */

.faq details{border-top:1px solid var(--linie)}
.faq details:last-of-type{border-bottom:1px solid var(--linie)}
.faq summary{
  list-style:none;cursor:pointer;
  display:flex;gap:var(--sp-4);align-items:baseline;
  padding:var(--sp-4) 0;min-height:2.75rem;
  font-family:var(--serif);font-weight:600;font-size:var(--fs-h3);
}
.faq summary::-webkit-details-marker{display:none}
.faq summary span{flex:1}
.faq summary::after{
  content:'+';color:var(--akzent);font-family:var(--mono);font-size:1.25rem;
  line-height:1;flex:none;
}
.faq details[open] summary::after{content:'\2013'}
.faq details p{color:var(--schrift-2);max-width:64ch;margin:0 0 var(--sp-5)}

/* --- Fuss ---------------------------------------------------------------- */

.fuss .bahn{padding-block:var(--sp-6)}
.fuss__raster{display:grid;gap:var(--sp-5);grid-template-columns:minmax(0,1fr)}
@media (min-width:48rem){
  .fuss__raster{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--sp-6)}
}
@media (min-width:68rem){
  .fuss__raster{grid-template-columns:repeat(4,minmax(0,1fr))}
}
.fuss__spalte{display:flex;flex-direction:column;gap:var(--sp-2);
  font-size:.9375rem;color:var(--schrift-2)}
.fuss__spalte b{
  font-family:var(--mono);font-size:var(--fs-mono-xs);letter-spacing:.16em;
  text-transform:uppercase;color:var(--schrift);font-weight:500;
  margin-bottom:var(--sp-1);
}
.fuss__spalte a{text-decoration:none}
.fuss__spalte a:hover{text-decoration:underline}
.fuss__zeile{
  border-top:1px solid var(--linie);margin-top:var(--sp-6);padding-top:var(--sp-4);
  display:flex;flex-wrap:wrap;gap:var(--sp-4);justify-content:space-between;
  font-family:var(--mono);font-size:var(--fs-mono-xs);letter-spacing:.14em;
  text-transform:uppercase;color:var(--schrift-2);
}

/* --- Rechtsseiten -------------------------------------------------------- */

.recht .bahn{padding-block:clamp(2.5rem,6vw,4.5rem)}
.recht h1{margin-bottom:var(--sp-5)}
.recht h2{
  font-size:var(--fs-h3);margin:var(--sp-7) 0 var(--sp-4);
  padding-bottom:var(--sp-2);border-bottom:1px solid var(--linie);
}
.recht p,.recht li{color:var(--schrift-2);max-width:68ch}
.recht ul,.recht ol{margin:0 0 var(--sp-4);padding-left:1.35rem}
.recht li{margin-bottom:var(--sp-2)}
.recht dl{margin:0}

.hinweisbox{
  border-left:2px solid var(--akzent);
  padding:var(--sp-4) 0 var(--sp-4) var(--sp-5);
  margin:0 0 var(--sp-6);
  max-width:68ch;
}
.hinweisbox p{color:var(--schrift)}
.hinweisbox p:last-child{margin-bottom:0}

.offen{
  display:inline-block;
  border-bottom:1px dashed var(--akzent);
  color:var(--akzent);
  font-family:var(--mono);font-size:.8125rem;letter-spacing:.06em;
}

/* --- Ladevorhang ---------------------------------------------------------
   Er steht NICHT im Markup. `scara.js` baut ihn im Kopf der Seite auf.
   Ohne JavaScript gibt es ihn schlicht nicht - dadurch ist die Seite auch
   dann sofort lesbar, wenn das Skript gar nicht laedt oder an einem Filter
   scheitert. Ein Vorhang im Markup waere in diesen Faellen ein schwarzes
   Bild, aus dem niemand herauskommt.

   Er faehrt als Ganzes nach oben weg, wie im urspruenglichen Entwurf
   (Entscheidung Matthias, 03.09.2026). Man kann ihn auch mit dem Finger
   oder der Maus hochziehen - er folgt der Bewegung und rastet ein, sobald
   weit genug gezogen wurde.

   Bewegt wird ausschliesslich `transform` an EINEM Element. Das erledigt
   der Kompositor, es gibt nichts neu zu zeichnen.                        */

.vorhang{
  position:fixed;inset:0;z-index:100;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:var(--sp-5);
  background:var(--grund);
  touch-action:none;cursor:grab;
  will-change:transform;
}
.vorhang[data-zustand="loest-auf"]{pointer-events:none}

.vorhang__marke{
  position:relative;display:flex;
  font-family:var(--serif);font-weight:700;
  font-size:clamp(2.4rem,9vw,5.6rem);line-height:1;
  letter-spacing:.24em;text-indent:.24em;text-transform:uppercase;
  animation:sperrung-ein 1.9s cubic-bezier(.3,0,.2,1) both;
}
/* Der Farbverlauf sitzt auf JEDEM BUCHSTABEN, nicht auf dem Elternelement.
   Laege er oben, stanzte background-clip:text ihn durch alle Glyphen
   zugleich - die einzelnen <i> waeren farblos und liessen sich weder
   einzeln einblenden noch bewegen. Jeder Buchstabe zeigt einen anderen
   Ausschnitt, deshalb wandert das Licht beim Einblenden durch das Wort.
   Die Toene sind alle tragfaehig: mit --siegel an den Enden laegen
   C-A-R-A auf dem Graphit bei 1,6:1 und waeren unsichtbar. */
.vorhang__marke i{
  display:inline-block;font-style:normal;
  background:linear-gradient(100deg,var(--siegel-hell) 0%,var(--kreide) 24%,
             var(--papier) 50%,var(--kreide) 76%,var(--siegel-hell) 100%);
  background-size:320% 100%;
  -webkit-background-clip:text;background-clip:text;color:transparent;
  animation:marke-ein 1.6s cubic-bezier(.3,0,.2,1) both;
}
.vorhang__marke i:nth-child(1){animation-delay:0s}
.vorhang__marke i:nth-child(2){animation-delay:.07s}
.vorhang__marke i:nth-child(3){animation-delay:.14s}
.vorhang__marke i:nth-child(4){animation-delay:.21s}
.vorhang__marke i:nth-child(5){animation-delay:.28s}

.vorhang__linie{
  position:relative;width:min(220px,42vw);height:1px;background:var(--akzent);
  animation:linie-ein .8s cubic-bezier(.4,0,.2,1) .95s both;
}
.vorhang__claim{
  position:relative;
  font-family:var(--mono);font-size:var(--fs-mono-xs);
  letter-spacing:.4em;text-transform:uppercase;color:var(--schrift-2);
  animation:claim-ein 1s ease 1.25s both;
}

@keyframes sperrung-ein{
  from{letter-spacing:.5em;text-indent:.5em}
  to  {letter-spacing:.24em;text-indent:.24em}
}
@keyframes marke-ein{
  0%  {opacity:0;filter:blur(7px);background-position:190% 0}
  40% {opacity:1;filter:blur(0)}
  100%{opacity:1;filter:blur(0);background-position:-70% 0}
}
@keyframes linie-ein{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes claim-ein{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

/* Wer keine Bewegung will, bekommt eine kurze Blende statt der Fahrt.
   Die Wegfahrt selbst setzt das Skript ueber el.style.transform - das
   laeuft ueber das CSSOM und ist von der CSP nicht betroffen. */
@media (prefers-reduced-motion:reduce){
  .vorhang{transition:opacity 200ms linear}
  .vorhang[data-zustand="loest-auf"]{opacity:0}
  .vorhang__marke,.vorhang__marke i,.vorhang__linie,.vorhang__claim{animation:none}
}

/* --- Einstieg: Grund, Rauchlabel, Schwaerzung ----------------------------
   Der Entwurf legte hier ein 3,4-MB-PNG hin. Es war gar kein Foto, sondern
   eine abstrakte Textur aus diagonalen Streifen mit einem roten Schimmer.
   Genau das steht jetzt in CSS: gleicher Eindruck, keine Ladelast, und es
   nimmt die Siegelfarbe der Seite an.                                    */

.einstieg{position:relative;overflow:clip;isolation:isolate}
.einstieg .bahn{position:relative;z-index:1}

.einstieg__grund{position:absolute;inset:0;z-index:0;pointer-events:none}
.einstieg__grund::before{
  content:"";position:absolute;inset:0;
  background:
    radial-gradient(70% 56% at 12% 86%,
      color-mix(in oklab,var(--siegel) 60%,transparent) 0%, transparent 62%),
    linear-gradient(104deg,
      var(--graphit) 0%, var(--graphit-3) 54%, var(--graphit) 100%);
}
/* Die Streifen. Der Winkel ist derselbe wie im Entwurf. */
.einstieg__grund::after{
  content:"";position:absolute;inset:-20%;
  background:repeating-linear-gradient(-21deg,
    transparent 0 82px,
    rgba(239,233,221,.085) 82px 83px,
    transparent 83px 176px,
    rgba(239,233,221,.04) 176px 177px,
    transparent 177px 340px);
}
.einstieg__korn{
  position:absolute;inset:0;z-index:0;pointer-events:none;
  opacity:.15;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='128' height='128'%3E%3Cfilter id='k'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='128' height='128' filter='url(%23k)'/%3E%3C/svg%3E");
}

/* Ein Hauch Rauch hinter der Vorzeile. Bewusst nur EINMAL auf der ganzen
   Seite - im Entwurf hing er an acht Labeln und nutzte sich ab.          */
.rauch{display:block;margin:0 0 var(--sp-5)}
.rauch > span{position:relative;display:inline-block;isolation:isolate;color:var(--akzent)}
.rauch > span > span{position:relative;z-index:1}
.rauch > span::before{
  content:"";position:absolute;z-index:-1;
  left:-26px;right:-22px;top:-28px;bottom:-28px;
  opacity:.45;filter:blur(9px);
  background:
    radial-gradient(circle 26px at 18% 48%,rgba(239,233,221,.40),transparent 100%),
    radial-gradient(circle 32px at 46% 56%,rgba(239,233,221,.34),transparent 100%),
    radial-gradient(circle 24px at 74% 42%,rgba(239,233,221,.28),transparent 100%);
}

/* Die Schwaerzung: ein Siegelbalken faehrt ueber die Zeile und gibt sie
   frei. Grundzustand ist "freigegeben" - ohne Skript steht der Text da.  */
.schwarz{position:relative;display:inline-block}
.schwarz > span{display:block}
.schwarz::after{
  content:"";position:absolute;inset:-.06em -.16em;
  background:var(--siegelflaeche);
  transform:scaleX(0);transform-origin:right center;
}
[data-einblenden] .schwarz:not([data-sichtbar]) > span{opacity:0;clip-path:inset(0 100% 0 0)}
[data-einblenden] .schwarz[data-sichtbar] > span{
  opacity:1;clip-path:inset(0 0 0 0);
  transition:clip-path .9s cubic-bezier(.3,0,.2,1) .28s,opacity .2s ease .28s;
}
[data-einblenden] .schwarz[data-sichtbar]::after{
  animation:schwaerzung 1.1s cubic-bezier(.5,0,.2,1) both;
}
@keyframes schwaerzung{
  0%  {transform-origin:left;transform:scaleX(0)}
  30% {transform-origin:left;transform:scaleX(1)}
  31% {transform-origin:right;transform:scaleX(1)}
  100%{transform-origin:right;transform:scaleX(0)}
}
.einstieg h1 .schwarz + .schwarz{margin-top:.08em}

/* --- Leistungsstufen je Sparte -------------------------------------------
   Aus dem Entwurf: drei Stufen je Sparte, ohne Preise. Der Umfang wird im
   Vorgespraech festgelegt - das steht so auch im Text.                   */

.stufenliste{margin:var(--sp-4) 0 0}
.stufenliste .reihe{
  display:flex;flex-wrap:wrap;align-items:baseline;
  gap:var(--sp-2) var(--sp-5);
  padding:var(--sp-4) 0;
  border-top:1px solid var(--linie);
}
.stufenliste dt{
  margin:0;min-width:7.5rem;
  font-family:var(--mono);font-size:var(--fs-mono-s);letter-spacing:.18em;
  text-transform:uppercase;color:var(--schrift);
}
.stufenliste dd{
  margin:0;flex:1 1 20rem;
  color:var(--schrift-2);font-size:.9375rem;line-height:1.65;
}
/* Die oberste Stufe wird durch eine Siegelspur gehoben, nicht durch eine
   Karte. Haarlinien statt Kaesten - das ist die Hausregel.               */
.stufenliste .reihe--gehoben{
  padding-inline:var(--sp-4);margin-inline:calc(var(--sp-4) * -1);
  border-left:1px solid var(--linie-stark);
  background:linear-gradient(90deg,
    color-mix(in oklab,var(--siegel) 30%,transparent),transparent 70%);
}
.stufenliste .reihe--gehoben dt{color:var(--papier)}

/* --- Zusatzleistungen ----------------------------------------------------- */

.zusatz{
  display:grid;
  grid-template-columns:minmax(0,1fr);
  gap:1px;background:var(--linie);
  margin:var(--sp-4) 0 0;border:1px solid var(--linie);
}
.zusatz > div{
  background:var(--grund-2);padding:var(--sp-5);
  display:flex;flex-direction:column;gap:var(--sp-2);
}
.zusatz dt{
  font-family:var(--serif);font-weight:600;font-size:1.125rem;
  line-height:1.25;margin:0;color:var(--schrift);
}
.zusatz dd{margin:0;color:var(--schrift-2);font-size:.9375rem;line-height:1.6}
@media (min-width:44rem){ .zusatz{grid-template-columns:repeat(2,minmax(0,1fr))} }

.sparte__zusatztitel{
  font-family:var(--mono);font-size:var(--fs-mono-xs);letter-spacing:.2em;
  text-transform:uppercase;color:var(--schrift-2);
  font-weight:500;margin:0;
}

/* --- Unternehmen und Partner ---------------------------------------------- */

.partner{
  display:grid;grid-template-columns:minmax(0,1fr);
  gap:var(--sp-5);margin:var(--sp-6) 0 0;list-style:none;padding:0;
}
@media (min-width:44rem){ .partner{grid-template-columns:repeat(2,minmax(0,1fr))} }
.partner > li{
  border-left:1px solid var(--siegelflaeche);
  padding:var(--sp-1) 0 var(--sp-1) var(--sp-4);
  display:flex;flex-direction:column;gap:var(--sp-2);
}
.partner__feld{
  font-family:var(--mono);font-size:var(--fs-mono-xs);letter-spacing:.2em;
  text-transform:uppercase;color:var(--schrift-2);
}
.partner h3{
  font-family:var(--serif);font-weight:600;font-size:1.25rem;
  line-height:1.25;margin:0;
}
.partner p{margin:0;color:var(--schrift-2);font-size:.9375rem;line-height:1.6}

/* --- Leitsatz im Einstieg -------------------------------------------------- */

.einstieg__satz{
  display:flex;align-items:center;gap:var(--sp-4);
  margin:var(--sp-6) 0 0;
  font-family:var(--serif);font-style:italic;font-weight:400;
  font-size:clamp(1.0625rem,1rem + .5vw,1.375rem);
  color:var(--schrift-2);
}
.einstieg__satz::before{
  content:"";flex:none;width:clamp(28px,4vw,56px);height:1px;
  background:var(--akzent);
}

/* --- Einblendungen --------------------------------------------------------
   Der Endzustand ist der Grundzustand: ohne Skript steht alles da. Das
   Attribut `data-einblenden` setzt erst `scara.js`, und zwar nur, wenn es
   einen IntersectionObserver gibt. Bewegt werden ausschliesslich `opacity`,
   `transform` und `clip-path` - nie Hoehen oder Abstaende, damit nichts
   springt.
   Ueber dem Falz wird nichts versteckt und Bedienbares nie: ein Formular
   auf opacity:0 waere eine Falle, sobald der Beobachter aussetzt.        */

@media (prefers-reduced-motion:no-preference){
  [data-einblenden] [data-zeigen]{
    transition:opacity .52s cubic-bezier(.2,0,0,1),
               transform .62s cubic-bezier(.2,0,0,1);
  }
  [data-einblenden] [data-zeigen]:not([data-sichtbar]){opacity:0;transform:translateY(12px)}
  [data-einblenden] [data-zeigen][data-sichtbar]{opacity:1;transform:none}

  /* Eine Kennung schiebt sich seitlich ein, statt zu steigen - sonst
     bewegt sich die ganze Seite gleich.                                 */
  [data-einblenden] .kennung[data-zeigen]:not([data-sichtbar]){transform:translateX(-10px)}

  /* Sparten und Zusatzkacheln werden gewischt wie ein Stempel. */
  [data-einblenden] .sparte__kopf h3[data-zeigen]:not([data-sichtbar]){
    opacity:1;transform:none;clip-path:inset(0 100% 0 0);
  }
  [data-einblenden] .sparte__kopf h3[data-zeigen]{
    transition:clip-path .5s cubic-bezier(.2,0,0,1);
  }
  [data-einblenden] .sparte__kopf h3[data-zeigen][data-sichtbar]{clip-path:inset(0 0 0 0)}

  /* Tabellenzeilen nur blenden - `transform` auf `tr` ist zwischen den
     Browsern nicht verlaesslich.                                        */
  [data-einblenden] .vorlauf tr[data-zeigen]:not([data-sichtbar]){opacity:0;transform:none}

  /* Gleichzeitig sichtbare Gruppen werden gestaffelt. Wo die Elemente
     einzeln ins Bild kommen, entsteht die Staffelung aus dem Scrolltempo -
     das wirkt natuerlicher als ein Takt.                                */
  [data-einblenden] .beweis__liste li:nth-child(2){transition-delay:.05s}
  [data-einblenden] .beweis__liste li:nth-child(3){transition-delay:.10s}
  [data-einblenden] .beweis__liste li:nth-child(4){transition-delay:.15s}
  [data-einblenden] .beweis__liste li:nth-child(5){transition-delay:.20s}
  [data-einblenden] .zusatz > div:nth-child(2){transition-delay:.06s}
  [data-einblenden] .zusatz > div:nth-child(3){transition-delay:.12s}
  [data-einblenden] .zusatz > div:nth-child(4){transition-delay:.18s}
  [data-einblenden] .zusatz > div:nth-child(5){transition-delay:.24s}
  [data-einblenden] .zusatz > div:nth-child(6){transition-delay:.30s}
  [data-einblenden] .partner > li:nth-child(2){transition-delay:.07s}
  [data-einblenden] .partner > li:nth-child(3){transition-delay:.14s}
  [data-einblenden] .partner > li:nth-child(4){transition-delay:.21s}
  [data-einblenden] .fuss__spalte:nth-child(2){transition-delay:.07s}
  [data-einblenden] .fuss__spalte:nth-child(3){transition-delay:.14s}
  [data-einblenden] .fuss__spalte:nth-child(4){transition-delay:.21s}
}

/* --- Kleinteile statt style-Attribute ------------------------------------
   Jede Regel hier ersetzt ein `style="..."` im Markup. Damit kommt die
   Seite ohne Inline-CSS aus, und `style-src 'unsafe-inline'` kann aus
   sicherheit.conf verschwinden. Das ist der eigentliche Gewinn: die
   Haertung wird durch den Umbau besser statt schlechter.               */

.sprite{position:absolute;width:0;height:0;overflow:hidden}

/* Zwei Baender, die als ein durchgehendes Feld gelesen werden sollen. */
.band--anschluss{border-top:0}
.band--anschluss > .bahn{padding-top:0}

.mono--gedaempft{color:var(--schrift-2)}

.leitsatz{margin-bottom:var(--sp-5)}
.mit-notiz .satz > h2{margin-bottom:var(--sp-4)}
.faq .satz{margin-bottom:var(--sp-6)}

.sparte__aus + .sparte__aus{margin-top:var(--sp-4)}

.nachweise{margin-top:var(--sp-5)}
.weg--ruf:first-of-type{margin-top:var(--sp-6)}
.anfrage__raster{margin-top:var(--sp-6)}
.ablauf + .notiz{margin-top:var(--sp-5)}

.fuss__zeile--solo{margin-top:0;border-top:0;padding-top:0}
.kleingedruckt{margin-top:var(--sp-7);font-size:.875rem}
.rueckweg{margin-top:var(--sp-7)}
.lead--unter{color:var(--schrift-2);margin-bottom:var(--sp-6)}
.ablauf--oben{margin-top:0}
/* Auf den Rechtsseiten gewinnt sonst ".recht ol{padding-left:1.35rem}" und
   die Ablaufliste steht 22 Pixel eingerueckt neben ihren eigenen Haarlinien. */
.recht .ablauf{padding-left:0}
/* Ohne diese Regel faellt <code> auf die Systemschrift zurueck - unter
   Windows Courier New, was neben Archivo aus der Zeit faellt. */
code{font-family:var(--mono);font-size:.9em;letter-spacing:.02em}

/* --- Uebergaenge zwischen den Seiten ------------------------------------- */

@view-transition{ navigation:auto }

@media (prefers-reduced-motion:reduce){
  ::view-transition-group(*),
  ::view-transition-old(*),
  ::view-transition-new(*){animation:none !important}
}

/* --- Sichtbarkeit -------------------------------------------------------- */

.nur-vorleser{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0;
}

[hidden]{display:none !important}

:target{scroll-margin-top:5rem}