/* ===========================================================================
   Dossierfoto, laufende Gestaltung: "Passepartout"
   Entschieden am 2026-09-15 aus drei Entwuerfen. Protokoll der Runde in
   docs/variante-{a,b,c}.md, der Entscheid in docs/gestaltung.md.

   Grundlage ist Entwurf A. Uebernommen wurde ausserdem das Zeichen aus
   Entwurf C (das Passepartout mit der Gehrung, jetzt in scripts/build-brand.py
   und in den Farben dieser Seite) sowie die Markup-Befunde aus Entwurf B.
   Aus B NICHT uebernommen: die zweite Schriftfamilie und die dunklen
   Baender im Seitenkoerper. Aus C NICHT uebernommen: Petrolwand und Messing.

   Die Idee in einem Satz: Die Seite ist eine Portraetseite und kein
   Produktprospekt. Sie hat den Ton einer Ausstellungswand, die Fotografien
   liegen gross und rahmenlos darauf, und der ganze Text spricht mit einer
   einzigen Stimme.

   Drei Entscheidungen, jede an etwas Nachpruefbarem festgemacht.

   1. DER GRUND IST MITTELHELL, NICHT WEISS UND NICHT SCHWARZ.
      Gemessen an den ausgelieferten Bildern: der hellste Bildhintergrund im
      Produkt ist der Stil "Hell" mit rgb(232,227,222), relative Leuchtdichte
      0.774. Der dunkelste Gesamtton ist "Klassisch" mit 0.148. Eine fast
      weisse Seite laesst das helle Portraet ausfransen, der Kopf schwebt
      dann ohne Kante. Eine fast schwarze Seite macht aus jedem Portraet ein
      leuchtendes Rechteck und aus der Seite eine Diashow. Der Grund hier
      liegt bei 0.684: unter jedem Bildhintergrund, ueber jedem Bildgesamtton.
      Die Farbe selbst ist der Ton von Passepartout-Karton, ein Grau mit einem
      kaum messbaren Gelbgruenstich.

   2. EINE FAMILIE, ZWEI OPTISCHE GROESSEN.
      Newsreader hat eine opsz-Achse. Der Textschnitt (opsz 16) hat offenere
      Punzen und dickere Haarstriche, damit er bei 17 Pixeln nicht zufaellt;
      der Titelschnitt (opsz 48) zieht Haarstriche und Serifen duenner und die
      Buchstaben enger, weil dieselbe Zeichnung bei 60 Pixeln klobig wirkt.
      Genau das tut ein Art-Director mit einer richtigen Familie. Es gibt
      deshalb keine zweite Schrift: das Produkt sind die Portraets, die
      Schrift hat eine Stimme zu haben und sich sonst herauszuhalten.

   3. EINE AKZENTFARBE, NUR FUER HANDLUNG UND ZUSTAND.
      Ultramarin, die Farbe, in der man in der Schweiz ein Formular
      unterschreibt. Sie steht auf Schaltflaechen, Verweisunterstrichen, dem
      Fokusring, dem Fortschrittsbalken und den drei Schrittzahlen. Nirgends
      sonst. Alles andere ist Grund, Tinte und Haarlinie.

   Verbrauchte Richtungen, die hier bewusst NICHT wiederholt werden:
   Kontaktbogen (Papiergrau, Signalrot, Schnittmarken, Archivo), warm und hell
   (Eukalyptus, Fraunces und Figtree, runde Karten), dunkel nach studioshot
   (rgb(12,12,12), Instrument Sans und Serif, Pillen-Knoepfe, kein Akzent).
   Ebenso wenig der Baukasten, an dem man erzeugte Seiten erkennt: gesperrter
   Versalsatz ueber jeder Ueberschrift, Angaben mit Mittelpunkten verkettet,
   ein Pfeil im Knopftext, gleiche Radien und gleiche graue Schatten auf allem.

   Kontrastwerte stehen als Kommentar an jeder Farbe. Nachgerechnet, nicht
   geschaetzt.
   =========================================================================== */

:root {
  /* --- Grund und Flaechen ------------------------------------------------ */
  --grund:       #D6D9CF;  /* L 0.684 */
  --flaeche:     #CDD1C5;  /* L 0.626, eine Stufe tiefer, nur fuer Bedienflaechen */
  --flaeche-tief:#C3C8B9;

  /* --- Tinte ------------------------------------------------------------- */
  --tinte:       #1D2119;  /* 11.4:1 auf Grund, 10.5:1 auf Flaeche */
  --tinte-weich: #3B4037;  /*  7.4:1 auf Grund,  6.8:1 auf Flaeche */
  --tinte-still: #4F544A;  /*  5.4:1 auf Grund,  5.0:1 auf Flaeche */

  /* --- Linien ------------------------------------------------------------ */
  --linie:       #B6BBAC;
  --linie-fein:  #C4C8B9;
  --linie-stark: #9AA08D;

  /* --- Akzent ------------------------------------------------------------ */
  --akzent:      #1B3FD4;  /*  5.4:1 auf Grund; Weiss darauf 7.8:1 */
  --akzent-tief: #15309F;
  --auf-akzent:  #F4F6F0;

  /* --- Meldungen. Nur Zustand, nie Schmuck. ------------------------------ */
  --warn:        #6E4A0B;  /*  6.0:1 auf --warn-grund */
  --warn-grund:  #E4DEC4;
  --fehl:        #8A2415;  /*  6.6:1 auf --fehl-grund */
  --fehl-grund:  #E8D9D2;
  --gut:         #1B5734;  /*  6.7:1 auf --gut-grund */
  --gut-grund:   #D2DFD0;

  /* --- Mass -------------------------------------------------------------- */
  --spalte: 1160px;
  --schmal: 680px;

  --s1:.25rem; --s2:.5rem;  --s3:.75rem; --s4:1rem;   --s5:1.5rem;
  --s6:2rem;   --s7:3rem;   --s8:4.5rem; --s9:6.5rem;

  /* Fotografien sind Rechtecke. Kein Radius, nirgends, ausser dort wo ein
     Finger hindrueckt. */
  --r-knopf: 3px;
  --r-feld:  3px;

  --schrift:       "Newsreader Text", Georgia, "Times New Roman", serif;
  --schrift-titel: "Newsreader Display", Georgia, "Times New Roman", serif;

  /* --- Erbstuecke, die nicht wegduerfen ---------------------------------
     In content/artikel/ stecken selbst gezeichnete SVG-Infografiken, und die
     faerben ihre Flaechen ueber genau diese Namen: --graphit (118 Stellen),
     --graphit-weich (93), --linie (61), --signal und --papier-hoch (je 21).
     Ein undefiniertes var() in einem fill ist zur Rechenzeit ungueltig, die
     Eigenschaft faellt auf ihren Anfangswert zurueck, und der ist bei fill
     Schwarz. Ohne diese sechs Zeilen sind alle Grafiken im Ratgeber schwarze
     Kloetze, ohne eine einzige Fehlermeldung. Erst im Bild gesehen. */
  --graphit:       #1D2119;
  --graphit-weich: #3B4037;
  --graphit-still: #4F544A;
  --papier-hoch:   #E6E8DF;  /* heller als der Grund, damit Formen abheben */
  --signal:        #1B3FD4;
}

/* Die Seite steht in einem Schema. base.html meldet es dem Browser per
   <meta name="color-scheme" content="light">, hier steht dasselbe noch einmal:
   ohne das zeichnet die Oberflaeche Formularfelder und Rollbalken dunkel in
   eine helle Seite, sobald das Geraet auf dunkel steht. */
:root { color-scheme: light; }

/* ---------- Schriften -----------------------------------------------------
   Sechs Dateien, eine Familie. Die beiden Namen sind zwei optische
   Groessen derselben Zeichnung, nicht zwei Schriften. */
@font-face{font-family:"Newsreader Text";src:url("/static/fonts/newsreader-text-400.woff2")format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Newsreader Text";src:url("/static/fonts/newsreader-text-500.woff2")format("woff2");font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:"Newsreader Text";src:url("/static/fonts/newsreader-text-600.woff2")format("woff2");font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:"Newsreader Text";src:url("/static/fonts/newsreader-text-400i.woff2")format("woff2");font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:"Newsreader Display";src:url("/static/fonts/newsreader-disp-400.woff2")format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Newsreader Display";src:url("/static/fonts/newsreader-disp-600.woff2")format("woff2");font-weight:600;font-style:normal;font-display:swap}

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

/* Sicherheitsnetz. Mehrere Bausteine dieser Seite werden von den beiden
   Skripten ueber das hidden-Attribut geschaltet (#kaufen, #lauf, #meldung,
   #ablage-leer, #ablage-voll, #fertig-text). Wer denen spaeter im
   Stylesheet ein display gibt, schaltet sie dauerhaft sichtbar und zeigt
   eine Kaufleiste ueber einem leeren Formular. */
[hidden]{display:none !important}

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(--tinte);
  font-family:var(--schrift);
  font-size:1.0625rem;      /* 17px */
  line-height:1.62;
  font-weight:400;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-wrap:break-word;
}

img{max-width:100%; height:auto; display:block}

/* Verweise tragen die Akzentfarbe im Unterstrich, nicht im Text. Auf einer
   Ratgeberseite mit dreissig Verweisen waere durchgehendes Blau Laerm; der
   farbige Strich reicht als Zeichen und erfuellt zugleich 1.4.1, weil er
   nicht allein von der Farbe lebt. */
a{
  color:inherit;
  text-decoration:underline;
  text-decoration-color:var(--akzent);
  text-decoration-thickness:1px;
  text-underline-offset:.22em;
}
a:hover{color:var(--akzent); text-decoration-thickness:2px}

/* Senkrechter Innenabstand zaehlt bei Inline-Elementen nicht in den
   Textfluss: die Trefferflaeche waechst auf ueber 24 Pixel, ohne dass die
   Zeilen auseinanderrutschen. */
p a,li a,figcaption a,.leise a,.artikel-text a,.frage-text a,.still a{
  padding-block:max(.32em,6px)
}

:focus-visible{outline:2.5px solid var(--akzent); outline-offset:2px; border-radius:1px}
.knopf:focus-visible{outline-color:var(--tinte)}
/* Auf den beiden dunklen Baendern traegt Ultramarin zu wenig Kontrast. */
.fuss :focus-visible,.leiste :focus-visible{outline-color:var(--grund)}

/* ---------- Typografie ---------------------------------------------------
   Das Gewicht steigt, waehrend die Groesse faellt. Ein Titelschnitt bei 60
   Pixeln braucht kein Fett, ein Zwischentitel bei 17 Pixeln schon. */
h1,h2{
  font-family:var(--schrift-titel); font-weight:400;
  margin:0 0 var(--s4); line-height:1.08; letter-spacing:-0.018em;
}
h3,h4{
  font-family:var(--schrift); font-weight:600;
  margin:0 0 var(--s3); line-height:1.3; letter-spacing:-0.004em;
}
h1{font-size:2.125rem; line-height:1.06; letter-spacing:-0.022em}
h2{font-size:1.625rem}
h3{font-size:1.0625rem}
h4{font-size:.9375rem}
@media (min-width:480px){ h1{font-size:2.625rem} }
@media (min-width:720px){
  h1{font-size:3.25rem; letter-spacing:-0.026em}
  h2{font-size:2.25rem}
  h3{font-size:1.125rem}
}
@media (min-width:1040px){ h1{font-size:3.75rem; letter-spacing:-0.03em} }

p{margin:0 0 var(--s4); max-width:64ch}
ul,ol{margin:0 0 var(--s4); padding-left:1.25em; max-width:64ch}
li{margin-bottom:var(--s2)}
strong{font-weight:600}
hr{border:0; border-top:1px solid var(--linie); margin:var(--s7) 0}
small{font-size:max(.875rem,13px)}
code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:.9em;
  background:var(--flaeche); padding:.1em .35em; border-radius:2px}

.huelle{max-width:var(--spalte); margin-inline:auto; padding-inline:1.25rem}
@media (min-width:720px){ .huelle{padding-inline:var(--s6)} }
.eng{max-width:var(--schmal); margin-inline:auto}
.abschnitt{padding-block:var(--s7)}
.abschnitt-fein{padding-block:var(--s6)}
@media (min-width:720px){
  .abschnitt{padding-block:5rem}
  .abschnitt-fein{padding-block:var(--s7)}
}
.zentriert{text-align:center}
.zentriert p{margin-inline:auto}
/* Der Abbinder. Ohne ihn stand die letzte Aufforderung als einzelnes Wort in
   zweihundert Pixeln Leere, und die Seite hoerte einfach auf, statt zu
   schliessen. Eine kraeftige Linie darueber, viel Luft darunter. */
.huelle.zentriert{border-top:2px solid var(--tinte); padding-top:var(--s7)}
.huelle.zentriert h2{font-size:2rem; margin-bottom:var(--s3)}
@media (min-width:720px){
  .huelle.zentriert{padding-top:var(--s8)}
  .huelle.zentriert h2{font-size:2.75rem}
}

/* Der Vorspann. Gross genug, um nach Stimme zu klingen, nicht nach Unterzeile. */
.still{color:var(--tinte-weich); font-size:1.125rem; max-width:58ch}
/* Das Kleingedruckte. Aufrecht, nicht kursiv: unter .leise stehen auf der
   Kaufseite sechs Zeilen ueber Stripe, Rueckerstattung und AGB, und sechs
   Zeilen Kursive liest niemand gern. Die Kursive bleibt der Legendenschrift
   vorbehalten, also Bildunterschriften und Datumsangaben, und markiert dort
   eine eigene Ebene, weil sie kurz ist. */
.leise{color:var(--tinte-still); font-size:max(.875rem,14px);
  line-height:1.55; max-width:62ch}
.nur-lesegeraet{position:absolute; width:1px; height:1px; overflow:hidden;
  clip:rect(0 0 0 0); white-space:nowrap}

.sprunglink{position:absolute; left:-9999px; top:0; z-index:100;
  background:var(--akzent); color:var(--auf-akzent); padding:var(--s3) var(--s5);
  text-decoration:none; font-weight:600; border-radius:0 0 var(--r-knopf) 0}
.sprunglink:focus{left:0}

/* ---------- Die beiden dunklen Baender -----------------------------------
   Die Vorschauleiste oben und die Fusszeile unten sind in Tinte gesetzt und
   klammern die helle Seite ein. Das ist keine Deko, sondern der Anfang und
   das Ende: dazwischen liegt das Heft. */
.leiste{background:var(--tinte); color:var(--grund); font-size:max(.8125rem,12px);
  font-style:italic; padding-block:var(--s2); text-align:center;
  padding-inline:1.25rem}
.leiste a{color:inherit}

/* ---------- Kopfzeile ----------------------------------------------------- */
.kopf{background:var(--grund); border-bottom:1px solid var(--linie); z-index:40}
/* Auf dem Handy klebt sie nicht: 125 Pixel sind dort ein Siebtel des
   Bildschirms, und der Kaufknopf steht ohnehin im Held und auf der Kaufseite
   unten fest. */
@media (min-width:860px){
  .kopf{position:sticky; top:0;
    background:color-mix(in srgb, var(--grund) 93%, transparent);
    backdrop-filter:saturate(1.2) blur(9px)}
}
.kopf-inhalt{display:flex; align-items:center; gap:var(--s3); flex-wrap:wrap;
  padding-block:var(--s3)}

/* Die Kopfzeile traegt logo.svg: dunkles Blatt, helles Fenster, dunkler
   Schriftzug. Die Fusszeile steht auf Tinte und traegt logo-dunkel.svg, das
   Negativ davon. Beide Dateien kommen aus scripts/build-brand.py; wer dort
   den Schriftzug aendert, zieht width/height in templates/base.html nach,
   sonst reserviert der Browser einen falschen Platz. */
.kopf-logo{display:inline-flex; align-items:center; min-height:44px; flex-shrink:0;
  text-decoration:none}
.kopf-logo img{height:30px; width:auto}

/* Der Zwischenraum schrumpft mit der Breite, damit auf einem 390er Handy
   alle fuenf Eintraege hineinpassen. Vorher fehlten genau 27 Pixel, und
   'Fragen' stand dauerhaft halb unter der Verlaufsmaske: das sieht nicht
   nach rollbar aus, sondern nach kaputt. Auf 320 Pixeln rollt die Leiste
   weiterhin, dort fehlen 97 Pixel und das ist als Rollbewegung lesbar. */
.kopf-nav{display:flex; align-items:center; gap:clamp(.55rem,2.4vw,1rem); width:100%;
  order:3; overflow-x:auto; overflow-y:hidden; scrollbar-width:none;
  -webkit-overflow-scrolling:touch; margin-inline:-1.25rem;
  padding-inline:1.25rem; scroll-padding-inline:1.25rem}
.kopf-nav::-webkit-scrollbar{display:none}
/* Unter 385 Pixeln passen die fuenf Eintraege auch mit dem engsten
   Zwischenraum nicht in eine Zeile: der reine Textbedarf ist 313 Pixel, und
   bei 360 Pixeln Fensterbreite stehen 320 zur Verfuegung. Statt "Fragen"
   hinter der Maske verschwinden zu lassen, bricht die Leiste hier um. Nichts
   ist versteckt, und niemand muss auf dem kleinsten Geraet seitlich wischen,
   wo das am schwersten faellt. */
@media (max-width:384px){
  .kopf-nav{flex-wrap:wrap; overflow:visible; row-gap:0;
    -webkit-mask-image:none; mask-image:none}
}
@media (max-width:859px){
  .kopf-nav{
    -webkit-mask-image:linear-gradient(to right,#000 calc(100% - 2.25rem),transparent);
            mask-image:linear-gradient(to right,#000 calc(100% - 2.25rem),transparent);
  }
}
.kopf-nav a{text-decoration:none; font-size:1rem; font-weight:400;
  color:var(--tinte-weich); min-height:44px; min-width:44px; display:inline-flex;
  align-items:center; justify-content:center; white-space:nowrap; flex:0 0 auto}
.kopf-nav a:hover{color:var(--tinte)}
.kopf-nav a[aria-current]{color:var(--tinte); font-weight:600;
  text-decoration:underline; text-decoration-color:var(--akzent);
  text-decoration-thickness:2px; text-underline-offset:.4em}

/* `.kopf-nav a` (0,1,1) schlaegt `.knopf` (0,1,0). Ohne diese Zeile bekommt
   die Kaufschaltflaeche die Textfarbe der Navigation. Derselbe Fehler ist in
   diesem Projekt schon zweimal hereingekommen. */
.kopf-nav a.knopf,.kopf-nav a.knopf:hover{color:var(--auf-akzent); text-decoration:none}

.kopf-kauf{margin-left:auto; flex:0 0 auto}
@media (min-width:860px){
  .kopf-inhalt{flex-wrap:nowrap}
  /* margin-inline MUSS vor margin-left stehen: die Kurzform setzt die Langform
     zurueck, wenn sie danach kommt. Genau daran klebte die Navigation schon
     einmal am Logo statt am rechten Rand. */
  .kopf-nav{width:auto; order:0; overflow:visible; margin-inline:0;
    margin-left:auto; padding-inline:0; gap:var(--s5)}
  .kopf-kauf{margin-left:var(--s5)}
}

/* ---------- Schaltflaechen ------------------------------------------------ */
.knopf{
  display:inline-flex; align-items:center; justify-content:center; gap:var(--s2);
  font-family:var(--schrift); font-weight:600; font-size:1.0625rem; line-height:1.2;
  padding:.82em 1.5em; border:1.5px solid transparent; border-radius:var(--r-knopf);
  background:var(--akzent); color:var(--auf-akzent); text-decoration:none;
  cursor:pointer; min-height:48px;
  transition:background .14s ease;
}
.knopf:hover{background:var(--akzent-tief); color:var(--auf-akzent)}
.knopf:active{background:var(--akzent-tief)}
.knopf[disabled],.knopf[aria-disabled="true"]{
  background:var(--flaeche-tief); color:var(--tinte-still);
  border-color:var(--linie-stark); cursor:not-allowed}
.knopf-rand{background:transparent; color:var(--tinte); border-color:var(--tinte)}
.knopf-rand:hover{background:var(--tinte); color:var(--grund); border-color:var(--tinte)}
.knopf-gross{font-size:1.125rem; padding:.95em 1.8em; min-height:54px; width:100%}
@media (min-width:560px){ .knopf-gross{width:auto} }
.knopf-klein{font-size:.9375rem; padding:.55em 1em; min-height:44px}

/* ---------- Bilder -------------------------------------------------------
   Kein Rahmen, kein Radius, kein Schatten. Eine Haarlinie von innen, damit
   das helle Portraet ("Hell", Hintergrund 0.774) auf diesem Grund (0.684)
   eine Kante behaelt. Auf dunklen Portraets sieht man sie gar nicht. */
.rahmen{position:relative; display:block; background:var(--flaeche); overflow:hidden}
.rahmen img{width:100%; aspect-ratio:3/4; object-fit:cover}
.rahmen.quadrat img{aspect-ratio:1/1}
.rahmen.frei img{aspect-ratio:auto}
.rahmen::after{content:""; position:absolute; inset:0; pointer-events:none;
  box-shadow:inset 0 0 0 1px rgba(29,33,25,.20)}

/* ---------- Der Auftakt ---------------------------------------------------
   Zwei ungleiche Spalten, und die Fotografie bekommt die breitere. Das ist
   die Umkehrung der ueblichen Aufteilung und genau der Punkt: hier ist das
   Bild der Inhalt und der Text die Bildunterschrift.

   `display:contents` loest die Huelle .held-text auf, damit Vorzeile, Titel
   und Vorspann einzeln im Raster liegen koennen, ohne dass die Vorlage
   angefasst werden muss. */
.held{padding-block:var(--s4) var(--s7)}
.held-raster{display:grid; gap:var(--s4)}
.held-raster>*{min-width:0}
.held-text{display:contents}

/* Auf dem Handy steht das Bild direkt unter dem Titel und VOR dem Vorspann.
   Die Aufgabe der ersten zehn Sekunden ist zu zeigen, dass es funktioniert;
   der Vorspann erklaert danach, wie. Mit dem Vorspann davor begann das Foto
   erst bei 545 Pixeln und war auf einem 844 hohen Bildschirm halb abgeschnitten. */
.held-raster .pillen{order:1}
.held-raster h1{order:2}
.held-raster .held-bild{order:3}
.held-raster .held-lead{order:4}
.held-raster .held-aktion-block{order:5}

/* Der Titel im Auftakt skaliert stufenlos mit der Spalte statt in Stufen.
   Grund: die laengste Zeile des Satzes ist "Und Sie bleiben Sie." mit zwanzig
   Zeichen, und sobald die nicht mehr passt, faellt der Titel von drei auf vier
   Zeilen und die vorletzte Zeile schrumpft auf "wird ein". Gemessen braucht
   Newsreader Display rund 0.427 em je Zeichen; die Steigung hier ist so
   gewaehlt, dass zwanzig Zeichen von 320 bis 1600 Pixeln in die Spalte passen.
   text-wrap:balance gleicht die Zeilen zusaetzlich aus; wo der Browser es
   nicht kennt, bricht er wie immer. */
.held h1{margin-bottom:0; text-wrap:balance;
  font-size:clamp(2rem, .95rem + 3.1vw, 3.5rem)}
.held-lead{font-size:1.1875rem; color:var(--tinte-weich); max-width:42ch;
  margin-bottom:0; line-height:1.55}
.held-aktion{display:flex; flex-direction:column; gap:var(--s4); align-items:stretch;
  margin-top:var(--s2)}
.held-beleg{margin:var(--s4) 0 0; font-size:max(.9375rem,14px);
  color:var(--tinte-weich); max-width:44ch}
@media (min-width:560px){
  .held-aktion{flex-direction:row; align-items:center; gap:var(--s5)}
}
@media (min-width:940px){
  .held{padding-block:var(--s6) var(--s9)}
  /* Die mittlere Zeile waechst. Dadurch sinkt der Kaufknopf auf die Hoehe des
     unteren Bilddrittels, statt dass unter der Textspalte ein totes Feld von
     zweihundert Pixeln stehen bleibt. Der Leerraum liegt dann zwischen
     Vorspann und Aufforderung, und dort liest er sich als Luft. */
  .held-raster{
    grid-template-columns:minmax(0,1fr) minmax(0,1.06fr);
    grid-template-rows:auto auto 1fr auto;
    grid-template-areas:
      "vorzeile bild"
      "titel    bild"
      "vorspann bild"
      "aktion   bild";
    column-gap:var(--s7); row-gap:var(--s5);
  }
  .held-raster .pillen{grid-area:vorzeile; order:0}
  .held-raster h1{grid-area:titel; order:0}
  .held-raster .held-lead{grid-area:vorspann; order:0; align-self:start}
  .held-raster .held-aktion-block{grid-area:aktion; order:0; align-self:end}
  .held-raster .held-bild{grid-area:bild; order:0; align-self:start}
  .held-lead{font-size:1.25rem}
}
@media (min-width:1120px){
  .held-raster{column-gap:var(--s8)}
}

/* Das Paar. Auf JEDER Breite ein einziges Bild: das Ergebnis gross, das
   Handyfoto als kleiner aufgelegter Abzug in der unteren linken Ecke, und
   darunter eine gemeinsame Legendenzeile. Die erste Fassung dieser Seite
   stellte beide nebeneinander; dann liest man zwei Bilder statt einer
   Verwandlung. */
.paar{position:relative; display:grid; padding-bottom:2.9rem}
.paar>figure{grid-area:1/1; margin:0; min-width:0}
.paar .nachher{width:100%}
.paar .nachher .rahmen img{aspect-ratio:3/4}
/* Der kleine Abzug steht im Quelltext VOR dem grossen Bild. Zwei Rasterfelder
   auf derselben Zelle stapeln in Quelltextreihenfolge, das spaetere malt
   oben: ohne z-index lag das Handyfoto unsichtbar unter dem Ergebnis, und die
   Verwandlung, um die es auf dieser Seite geht, war schlicht nicht zu sehen.
   z-index wirkt auf Rasterfelder auch ohne position. */
.paar .vorher{width:32%; align-self:end; justify-self:start; margin:0 0 4.5% 4.5%;
  z-index:2}
.paar .vorher .rahmen img{aspect-ratio:1/1}
/* Der Passepartout-Rand in Grundfarbe legt den kleinen Abzug auf das grosse
   Bild, statt ihn hineinzuschneiden. Der eine Schatten der ganzen Seite steht
   hier, weil sich sonst zwei Fotografien ohne Kante beruehren. */
.paar .vorher .rahmen{box-shadow:0 0 0 5px var(--grund), 0 10px 22px -12px rgba(29,33,25,.65)}
.paar .vorher .rahmen::after{box-shadow:inset 0 0 0 1px rgba(29,33,25,.28)}
.paar figcaption{position:absolute; bottom:0; margin:0; font-style:italic;
  font-size:max(.8125rem,13px); line-height:1.35; color:var(--tinte-still)}
.paar .vorher figcaption{left:0; max-width:47%}
.paar .nachher figcaption{right:0; max-width:50%; text-align:right}
@media (min-width:940px){
  .paar{padding-bottom:2.1rem}
  .paar .vorher{width:29%}
  /* Das Auftaktbild ist in der Hoehe gedeckelt und leicht angeschnitten, der
     Kopf sitzt dabei auf der oberen Drittellinie. Das volle Format 3:4, das
     ausgeliefert wird, steht acht Mal weiter unten auf der Tafel. Ohne den
     Deckel waere das Portraet hier 684 Pixel hoch und die Textspalte daneben
     nur halb so lang. */
  .paar .nachher .rahmen img{aspect-ratio:auto; height:min(60vh,560px);
    object-fit:cover; object-position:50% 24%}
}
@media (min-width:1120px){
  .paar .nachher .rahmen img{height:min(64vh,620px)}
}
.held-bild .leise{margin:var(--s3) 0 0; font-style:italic; max-width:58ch}

/* ---------- Vorzeile ------------------------------------------------------
   Drei Angaben, keine Etiketten: kein Versalsatz, keine Mittelpunkte, keine
   Pillen. Die erste Fassung stellte jeder Angabe eine senkrechte Haarlinie
   voran; im Bild las sich das als Reihe von Pipe-Zeichen, nicht als Struktur.
   Jetzt traegt die ganze Zeile eine Linie unter sich, wie der Strich unter
   einem Zeitschriftenkopf, und die drei Angaben stehen frei darauf. */
.pillen{display:flex; flex-wrap:wrap; gap:var(--s1) var(--s4); margin:0;
  padding:0 0 var(--s3); list-style:none;
  border-bottom:1px solid var(--linie)}
.pillen li{margin:0}
.pille{display:inline-flex; align-items:center;
  font-size:max(.9375rem,14px); font-style:italic; color:var(--tinte-still);
  line-height:1.45}
@media (min-width:720px){ .pillen{column-gap:var(--s6)} }

/* ---------- Preis --------------------------------------------------------- */
.preis{display:inline-flex; align-items:baseline; gap:.32em;
  font-family:var(--schrift-titel); letter-spacing:-0.03em;
  font-variant-numeric:tabular-nums}
.preis-wert{font-size:2.75rem; font-weight:400; color:var(--tinte); line-height:1}
.preis-waehrung{font-size:1rem; font-weight:600; color:var(--tinte-still);
  letter-spacing:0; font-family:var(--schrift)}
.preis-zusatz{font-size:max(.9375rem,14px); font-weight:400; font-style:italic;
  color:var(--tinte-still); font-family:var(--schrift); letter-spacing:0}
@media (min-width:720px){ .preis-wert{font-size:3.25rem} }

/* ---------- Der Bogen ----------------------------------------------------
   Acht Bilder aus einem Auftrag. Enge Fuge, damit sie als eine Tafel lesen
   und nicht als acht Kacheln. Zwei Spalten auf dem Handy, vier auf dem
   Rechner, dazwischen nichts: bei drei Spalten stuenden die zwei Fassungen
   eines Stils nicht mehr nebeneinander. */
.bogen{display:grid; grid-template-columns:repeat(2,1fr); gap:1.6rem 5px}
.bogen>*{min-width:0}
.bogen figure{margin:0}
.bogen figcaption{margin-top:var(--s2); font-size:max(.8125rem,13px);
  font-style:italic; color:var(--tinte-still); line-height:1.35}
.bogen figcaption a{font-style:normal}
@media (min-width:840px){ .bogen{grid-template-columns:repeat(4,1fr)} }

/* ---------- Vergleichspaare (Musterseite) --------------------------------- */
.paare{display:grid; gap:var(--s6)}
.paare>*{min-width:0}
@media (min-width:680px){ .paare{grid-template-columns:repeat(2,1fr); gap:var(--s6) var(--s5)} }
@media (min-width:1000px){ .paare{grid-template-columns:repeat(3,1fr)} }
/* Keine Karte: eine Linie oben, dann Bild und Text. */
.vergleich{border-top:2px solid var(--tinte); padding-top:var(--s4)}
.vergleich-bilder{display:grid; grid-template-columns:.52fr 1fr; gap:5px;
  align-items:end}
.vergleich-bilder>*{min-width:0}
.vergleich-bilder figure{margin:0}
.vergleich-bilder .vorher img{aspect-ratio:1/1}
.vergleich-bilder figcaption{margin-top:var(--s2); font-size:max(.8125rem,13px);
  font-style:italic; color:var(--tinte-still)}
.vergleich h3{font-size:1.0625rem; margin:var(--s4) 0 var(--s2)}
.vergleich p{font-size:max(.9375rem,15px); color:var(--tinte-weich); margin:0}

/* ---------- Vertrauensband ------------------------------------------------ */
.band{background:var(--flaeche); border-block:1px solid var(--linie);
  padding-block:var(--s6)}
.band-liste{display:grid; gap:var(--s5); list-style:none; padding:0; margin:0;
  max-width:none}
.band-liste>*{min-width:0}
@media (min-width:640px){ .band-liste{grid-template-columns:repeat(2,1fr); gap:var(--s5) var(--s6)} }
@media (min-width:1000px){ .band-liste{grid-template-columns:repeat(4,1fr)} }
.band-liste li{margin:0; font-size:max(.9375rem,15px); color:var(--tinte-weich);
  line-height:1.5}
.band-liste strong{display:block; color:var(--tinte); font-weight:600;
  font-size:1.0625rem; margin-bottom:var(--s1)}

/* ---------- Ablauf --------------------------------------------------------
   Das ist tatsaechlich eine Folge (waehlen, bezahlen, laden), also darf sie
   nummeriert sein. Haengende Ziffern in der Akzentfarbe, keine Plaketten. */
.ablauf{display:grid; gap:var(--s5); counter-reset:schritt; padding:0; list-style:none;
  max-width:none}
.ablauf>*{min-width:0}
@media (min-width:760px){ .ablauf{grid-template-columns:repeat(3,1fr); gap:var(--s6)} }
.schritt{counter-increment:schritt; position:relative; padding-left:2.6rem; margin:0;
  border-top:1px solid var(--linie); padding-top:var(--s4)}
.schritt::before{content:counter(schritt); position:absolute; left:0;
  top:calc(var(--s4) - .12em); font-family:var(--schrift-titel); font-weight:400;
  font-size:1.9rem; line-height:1; color:var(--akzent); letter-spacing:-0.03em}
.schritt h3{margin-bottom:var(--s2)}
.schritt p{font-size:max(.9375rem,15px); color:var(--tinte-weich); margin:0}

/* ---------- Bloecke statt Karten -----------------------------------------
   Kein Kaestchen-Baukasten. Jeder Block bekommt eine kraeftige Linie oben und
   viel Luft: das sagt "hier faengt etwas Gleichrangiges an", ohne dass vier
   graue Kaesten mit vier gleichen Schatten entstehen. */
.karten{display:grid; gap:var(--s5)}
.karten>*{min-width:0}
@media (min-width:640px){ .karten{grid-template-columns:repeat(2,1fr); gap:var(--s6) var(--s5)} }
@media (min-width:1000px){ .karten{grid-template-columns:repeat(4,1fr)} }
.karte{border-top:2px solid var(--tinte); padding-top:var(--s4)}
.karte h3{margin-bottom:var(--s2)}
.karte p{font-size:max(.9375rem,15px); color:var(--tinte-weich)}
.karte p:last-child{margin-bottom:0}
.karte .knopf{margin-top:var(--s2)}

/* ---------- Was bleibt, was geht -----------------------------------------
   Der eine Moment, an dem die Typografie laut werden darf. Die Liste der
   Dinge, die unveraendert bleiben, steht im Titelschnitt und traegt die
   Seite; die Liste der Dinge, die ersetzt werden, steht klein daneben. Das
   Groessenverhaeltnis IST das Argument: viel bleibt, wenig geht. */
.gegenueber{display:grid; gap:var(--s6)}
.gegenueber>*{min-width:0}
@media (min-width:820px){
  .gegenueber{grid-template-columns:1.4fr 1fr; gap:var(--s8); align-items:start}
}
.gegenueber h3{font-size:.9375rem; font-weight:600; color:var(--tinte-still);
  margin-bottom:var(--s4); padding-bottom:var(--s2);
  border-bottom:1px solid var(--linie)}
.gegenueber .bleibt h3{color:var(--tinte); border-bottom-color:var(--tinte)}
.gegenueber .bleibt .merkmale li{
  font-family:var(--schrift-titel); font-weight:400;
  font-size:1.3125rem; line-height:1.25; letter-spacing:-0.012em;
  color:var(--tinte); padding-left:0; margin-bottom:var(--s3);
}
.gegenueber .bleibt .merkmale li::before{display:none}
@media (min-width:820px){
  .gegenueber .bleibt .merkmale li{font-size:1.5rem}
}
/* Die rechte Spalte ist der Nebensatz und bleibt schmal, auch wenn die Spalte
   breiter wird. Das Groessenverhaeltnis der beiden Listen IST das Argument. */
.gegenueber .ersetzt{max-width:38ch}
.gegenueber .merkmale-weg li{
  font-size:max(.9375rem,15px); color:var(--tinte-still); padding-left:1.4em;
  margin-bottom:var(--s3)}
.gegenueber .merkmale-weg li::before{
  content:""; position:absolute; left:0; top:.72em;
  width:.85em; height:1px; background:var(--linie-stark);
  -webkit-mask:none; mask:none}

/* ---------- Merkmalslisten (ueberall sonst) ------------------------------- */
.merkmale{list-style:none; padding:0; margin:0 0 var(--s4)}
.merkmale li{position:relative; padding-left:1.6em; margin-bottom:var(--s3)}
.merkmale li::before{
  content:""; position:absolute; left:0; top:.36em;
  width:1em; height:1em;
  background:var(--akzent);
  -webkit-mask:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M2.6 8.6l3.4 3.6L13.4 3.8' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;
          mask:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M2.6 8.6l3.4 3.6L13.4 3.8' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;
}
.merkmale-weg li::before{
  background:var(--linie-stark);
  -webkit-mask-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.4 3.4l9.2 9.2M12.6 3.4l-9.2 9.2' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E");
          mask-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.4 3.4l9.2 9.2M12.6 3.4l-9.2 9.2' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E");
}

/* ---------- Tabelle ------------------------------------------------------- */
.tabelle-huelle{overflow-x:auto; margin-bottom:var(--s5); border-top:2px solid var(--tinte)}
table{border-collapse:collapse; width:100%; font-size:max(.9375rem,15px);
  font-variant-numeric:tabular-nums}
th,td{text-align:left; padding:.75em .9em .75em 0; border-bottom:1px solid var(--linie);
  vertical-align:top}
th:last-child,td:last-child{padding-right:0}
th{font-weight:600; white-space:nowrap; font-size:max(.875rem,14px);
  color:var(--tinte-still); padding-top:var(--s3)}
tbody tr:last-child td{border-bottom:0}

/* ---------- Hochladen ----------------------------------------------------- */
.ablage{
  /* Der gestrichelte Rahmen ist hier die einzige Markierung der Ablageflaeche,
     also ein Bedienelement nach WCAG 1.4.11 und nicht blosser Schmuck: er
     braucht 3:1 gegen seinen Grund. --linie-stark schaffte nur 1.7:1, dieser
     Ton 5.0:1. */
  border:1.5px dashed var(--tinte-still); border-radius:var(--r-feld);
  background:var(--flaeche); padding:var(--s7) var(--s4); text-align:center;
  cursor:pointer; position:relative; margin-top:var(--s5);
  transition:border-color .14s ease, background .14s ease;
}
.ablage:hover,.ablage.warm{border-color:var(--akzent); background:var(--flaeche-tief)}
.ablage.hat-bild{border-style:solid; border-color:var(--tinte-still);
  padding:var(--s4); text-align:left}
.ablage input[type=file]{position:absolute; inset:0; opacity:0; cursor:pointer}
.ablage-titel{font-weight:600; font-size:1.125rem; margin-bottom:var(--s2);
  color:var(--tinte)}
.ablage-wolke{width:44px; height:44px; margin:0 auto var(--s3);
  border:1.5px solid var(--tinte-still); display:grid; place-items:center;
  border-radius:var(--r-feld)}
.ablage-wolke svg{stroke:var(--akzent)}
.vorschau{display:grid; grid-template-columns:100px 1fr; gap:var(--s4);
  align-items:start}
.vorschau>*{min-width:0}
.vorschau img{width:100%; height:auto}
@media (min-width:560px){ .vorschau{grid-template-columns:150px 1fr; gap:var(--s5)} }

.meldung{padding:var(--s4); border-left:3px solid var(--linie-stark);
  background:var(--flaeche); margin-bottom:var(--s5);
  font-size:max(.9375rem,15px); border-radius:0 var(--r-feld) var(--r-feld) 0}
.meldung p:last-child{margin-bottom:0}
.meldung-fehler{border-left-color:var(--fehl); background:var(--fehl-grund); color:var(--fehl)}
.meldung-gut{border-left-color:var(--gut); background:var(--gut-grund); color:var(--gut)}
.meldung-warnung{border-left-color:var(--warn); background:var(--warn-grund); color:var(--warn)}
.meldung-fehler strong,.meldung-gut strong,.meldung-warnung strong{color:inherit}

/* Ein klebendes Element haelt nur innerhalb seines Elternelements. Die Leiste
   sass frueher im Formular und scrollte am Seitenende weg, genau dort, wo
   jemand noch liest und sich entscheidet. Auf dem Handy liegt sie deshalb
   fest unten, und der Inhalt bekommt so viel Luft, dass nichts dauerhaft
   darunter verschwindet. KEIN display hier: #kaufen wird ueber hidden
   geschaltet. */
.kaufleiste{
  position:sticky; bottom:0; z-index:30; margin-top:var(--s6);
  background:color-mix(in srgb, var(--grund) 94%, transparent);
  backdrop-filter:blur(9px);
  border-top:2px solid var(--tinte);
  padding:var(--s4) 0 max(var(--s4), env(safe-area-inset-bottom));
}
@supports selector(:has(*)) {
  @media (max-width:899px){
    .kaufleiste{position:fixed; left:0; right:0; bottom:0; margin-top:0;
      padding-inline:1.25rem}
    main:has(.kaufleiste:not([hidden])){padding-bottom:9.5rem}
  }
}
.kaufleiste-inhalt{display:flex; flex-direction:column; gap:var(--s3)}
.kaufleiste .knopf{width:100%}
@media (min-width:560px){
  .kaufleiste-inhalt{flex-direction:row; align-items:center;
    justify-content:space-between; gap:var(--s5)}
  .kaufleiste .knopf{width:auto}
}
@media (min-width:900px){
  .kaufleiste{position:static; background:none; backdrop-filter:none}
}

/* ---------- Fortschritt --------------------------------------------------- */
.balken{height:6px; background:var(--flaeche-tief); overflow:hidden;
  margin-block:var(--s4); border-radius:1px}
.balken span{display:block; height:100%; background:var(--akzent); width:0;
  transition:width .5s ease}
.entwickelt{animation:auftauchen .5s cubic-bezier(.2,.7,.3,1) both}
@keyframes auftauchen{from{opacity:0; transform:translateY(6px)} to{opacity:1; transform:none}}
.platzhalter{display:block; background:var(--flaeche); aspect-ratio:3/4;
  position:relative; overflow:hidden;
  box-shadow:inset 0 0 0 1px rgba(29,33,25,.16)}
.platzhalter::after{content:""; position:absolute; inset:0;
  background:linear-gradient(100deg,transparent 30%,rgba(255,255,255,.55) 50%,transparent 70%);
  animation:wandern 1.7s linear infinite}
@keyframes wandern{from{transform:translateX(-100%)} to{transform:translateX(100%)}}
@media (prefers-reduced-motion:reduce){
  .entwickelt{animation:none}
  .platzhalter::after{animation:none}
  *,*::before,*::after{transition-duration:.01ms !important}
}

/* ---------- Ratgeber und Rechtstexte -------------------------------------
   Der Lesetext steht im Textschnitt mit mehr Durchschuss als die Oberflaeche.
   Eine Serife braucht das; und der Ratgeber ist die Ebene, auf der diese
   Seite ihre Glaubwuerdigkeit einloest. */
.artikel-kopf{margin-bottom:var(--s7); border-bottom:1px solid var(--linie);
  padding-bottom:var(--s5)}
.artikel-kopf .still{margin-bottom:var(--s4)}
.artikel-meta{font-size:max(.875rem,13px); color:var(--tinte-still);
  font-style:italic; display:flex; flex-wrap:wrap; gap:var(--s2) var(--s5); margin:0}
.artikel-text{font-size:1.0625rem; line-height:1.72; overflow-wrap:anywhere}
.artikel-text p{margin-bottom:var(--s5); max-width:66ch}
.artikel-text h2{font-size:1.5rem; margin:var(--s7) 0 var(--s4)}
.artikel-text h3{font-size:1.125rem; margin:var(--s6) 0 var(--s3)}
@media (min-width:720px){
  .artikel-text{font-size:1.125rem}
  .artikel-text h2{font-size:1.875rem}
}
.artikel-text ul,.artikel-text ol{max-width:66ch; margin-bottom:var(--s5)}
.artikel-text blockquote{margin:var(--s6) 0; padding-left:var(--s5);
  border-left:2px solid var(--akzent); font-style:italic; color:var(--tinte)}
.artikel-text blockquote p:last-child{margin-bottom:0}
.artikel-text figure{margin:var(--s6) 0}
.artikel-text figcaption{font-size:max(.875rem,13px); color:var(--tinte-still);
  font-style:italic; margin-top:var(--s3); line-height:1.5}
.artikel-text table{display:block; overflow-x:auto; max-width:100%;
  font-size:max(.9375rem,15px)}
/* Die Infografiken tragen im Quelltext font-family="Archivo, sans-serif", eine
   Schrift aus der ersten Fassung, die es hier nicht mehr gibt und die sonst
   als Systemgrotesk mitten in einer Serifenseite stuende. Eine CSS-Regel
   schlaegt das Praesentationsattribut. */
.artikel-text svg{max-width:100%; height:auto}
.artikel-text svg text,.artikel-text svg tspan{font-family:var(--schrift)}
.artikel-text pre{overflow-x:auto; max-width:100%}

.inhalt-verzeichnis{border-top:2px solid var(--tinte); padding:var(--s4) 0 var(--s4);
  margin-bottom:var(--s7); font-size:max(.9375rem,15px)}
.inhalt-verzeichnis strong{font-size:max(.875rem,14px); color:var(--tinte-still)}
.inhalt-verzeichnis ol{margin:var(--s2) 0 0; padding-left:1.2em}
.inhalt-verzeichnis li{margin-bottom:var(--s1)}

.artikel-liste{list-style:none; padding:0; margin:0; display:grid; gap:var(--s5);
  max-width:none}
.artikel-liste>*{min-width:0}
.artikel-liste li{margin:0; border-top:1px solid var(--linie); padding-top:var(--s4)}
.artikel-liste a{text-decoration:none; display:block}
.artikel-liste h3{margin-bottom:var(--s2)}
.artikel-liste a:hover h3{color:var(--akzent)}
.artikel-liste p{font-size:max(.9375rem,15px); color:var(--tinte-weich); margin:0}
@media (min-width:760px){ .artikel-liste{grid-template-columns:repeat(2,1fr); gap:var(--s5) var(--s6)} }

/* ---------- Fragen -------------------------------------------------------- */
.frage{border-bottom:1px solid var(--linie)}
.frage:first-of-type{border-top:1px solid var(--linie)}
.frage summary{cursor:pointer; padding:var(--s4) 0; font-weight:600;
  font-size:1.0625rem; list-style:none; display:flex; justify-content:space-between;
  gap:var(--s4); align-items:center; min-height:56px}
.frage summary::-webkit-details-marker{display:none}
.frage summary:hover{color:var(--akzent)}
.frage summary::after{content:""; width:1.15em; height:1.15em; flex:0 0 auto;
  background:var(--akzent);
  -webkit-mask:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 5v14M5 12h14' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") center/contain no-repeat;
          mask:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 5v14M5 12h14' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") center/contain no-repeat;
  transition:transform .2s ease}
.frage[open] summary::after{transform:rotate(45deg)}
.frage-text{padding:0 0 var(--s5); max-width:66ch}
.frage-text p:last-child{margin-bottom:0}

/* ---------- Krumen -------------------------------------------------------- */
.krumen{font-size:max(.875rem,13px); color:var(--tinte-still); font-style:italic;
  padding-top:var(--s3)}
.krumen a{text-decoration:none; display:inline-flex; align-items:center;
  justify-content:center; min-height:44px; min-width:44px}
.krumen a:hover{color:var(--akzent)}
.krumen span{margin-inline:.4em; color:var(--linie-stark)}

/* ---------- Fusszeile ----------------------------------------------------
   Das Kolophon. In Tinte gesetzt, damit die Seite einen Schluss hat und
   nicht ausfranst. Hier steht logo-dunkel.svg, das Negativ der Wortmarke. */
.fuss{background:var(--tinte); color:var(--grund); margin-top:var(--s9);
  padding-block:var(--s8) var(--s6)}
.fuss-raster{display:grid; gap:var(--s6)}
.fuss-raster>*{min-width:0}
@media (min-width:560px){ .fuss-raster{grid-template-columns:1fr 1fr; gap:var(--s6) var(--s5)} }
@media (min-width:900px){ .fuss-raster{grid-template-columns:1.7fr 1fr 1fr 1fr} }
.fuss h4{margin-bottom:var(--s2); color:var(--grund); font-size:max(.875rem,14px);
  font-weight:600}
.fuss .leise{color:#9AA091}  /* 6.1:1 auf Tinte */
.fuss ul{list-style:none; padding:0; margin:0; font-size:max(.9375rem,15px)}
.fuss li{margin-bottom:0}
.fuss a{text-decoration-color:rgba(214,217,207,.45)}
.fuss ul a{text-decoration:none; color:#BFC5B7;  /* 8.0:1 auf Tinte */
  display:inline-flex; align-items:center; min-height:44px}
.fuss ul a:hover{color:var(--grund); text-decoration:underline;
  text-decoration-color:var(--grund)}
.fuss-logo{height:26px; width:auto; margin-bottom:var(--s3)}
.fuss-unten{border-top:1px solid #3B4037; margin-top:var(--s7);
  padding-top:var(--s4); font-size:max(.875rem,13px); color:#9AA091;
  display:flex; flex-wrap:wrap; gap:var(--s2) var(--s5); align-items:center}
.fuss-unten a{display:inline-flex; align-items:center; min-height:44px;
  min-width:44px; justify-content:center; color:#BFC5B7}