/* Gemeinsame Grundlage fuer Impressum und Datenschutz.
   Die Startseite traegt ihr CSS inline, weil sie eine eigene Buehne hat. */
@font-face{font-family:'Barlow';font-style:normal;font-weight:400;font-display:swap;src:url(fonts/b0.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,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:'Barlow';font-style:normal;font-weight:400;font-display:swap;src:url(fonts/b1.woff2) format('woff2');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:'Barlow Condensed';font-style:normal;font-weight:500;font-display:swap;src:url(fonts/b4.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,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:'Barlow Condensed';font-style:normal;font-weight:500;font-display:swap;src:url(fonts/b5.woff2) format('woff2');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:'Barlow Condensed';font-style:normal;font-weight:600;font-display:swap;src:url(fonts/b6.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,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:'Barlow Condensed';font-style:normal;font-weight:600;font-display:swap;src:url(fonts/b7.woff2) format('woff2');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;}

:root{--orange:#FF5A1F;--schwarz:#0B0B0C;--kreide:#F2EFEA;--kreide-leise:#A9A5A0;--kante:#22211F;
  --breite:min(760px,92vw);--gr:'Barlow Condensed',ui-sans-serif,system-ui,sans-serif;--tx:'Barlow',ui-sans-serif,system-ui,sans-serif}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{background:var(--schwarz);color:var(--kreide);font-family:var(--tx);font-size:1.03rem;line-height:1.66}
a{color:inherit}
address{font-style:normal}
svg{display:block}
:focus-visible{outline:2px solid var(--orange);outline-offset:3px}
h1,h2,.gr{font-family:var(--gr);font-weight:600;text-transform:uppercase;line-height:.98;text-wrap:balance}
h1{font-size:clamp(2.4rem,7vw,4rem);margin-bottom:2.2rem}
h2{font-size:clamp(1.2rem,2.4vw,1.55rem);margin:2.6rem 0 .7rem;color:var(--orange)}
p,li{max-width:68ch}
p+p{margin-top:.7rem}
ul{margin:.5rem 0 0 1.1rem}
li{margin-bottom:.3rem}
.leise{color:var(--kreide-leise)}
.fehlt{color:var(--orange);border-bottom:1px dashed var(--orange)}

header{position:sticky;top:0;z-index:60;background:rgba(11,11,12,.9);backdrop-filter:blur(14px);border-bottom:1px solid var(--kante)}
.kopf{width:min(1180px,92vw);margin:0 auto;display:flex;align-items:center;justify-content:space-between;gap:1.5rem;padding:.85rem 0}
.wortmarke{display:flex;align-items:center;gap:.6rem;text-decoration:none}
.wortmarke svg{width:26px;height:20px;color:var(--kreide)}
.wortmarke b{font-family:var(--gr);font-weight:600;font-size:1.42rem;letter-spacing:.13em;text-transform:uppercase}
nav{display:flex;align-items:center;gap:1.9rem}
nav a{font-family:var(--gr);font-weight:500;font-size:1.02rem;letter-spacing:.09em;text-transform:uppercase;text-decoration:none;color:var(--kreide-leise);transition:color .18s}
nav a:hover{color:var(--kreide)}
/* Vorher wurden am Handy ALLE Textlinks ausgeblendet - vom Impressum kam man
   dort weder zur Karte noch zum Blog zurueck, uebrig blieb ein einzelner
   Knopf. Jetzt ruecken sie enger zusammen und duerfen umbrechen. */
@media(max-width:820px){
  nav{gap:.2rem 1rem}
  /* Gemessen waren die Menue- und Fusszeilen 23 px hoch. Ein Daumen trifft
     sicher ab 44 px - die Polsterung macht daraus ein echtes Tippziel, ohne
     dass die Schrift groesser wird. */
  nav a{font-size:.86rem;letter-spacing:.07em;padding-block:.7rem}
  header .knopf{font-size:.88rem;padding:.62rem .9rem}
  .fuss{gap:.2rem 1.4rem}
  .fuss nav a{padding-block:.7rem}
}
/* ── Am Handy bleibt der Kopf EINE Zeile ───────────────────────────────────
   Gemessen am 03.08. auf der liven Seite bei 390 px: der Kopf war 118 px hoch,
   also 14 % des Bildschirms. Die vier Textlinks passten nicht neben die Marke,
   die Leiste brach um, und der Kontaktknopf stand als oranger Klotz allein in
   der zweiten Reihe. So sieht keine Seite aus, die man jemandem zeigt.
   Leistung und Ablauf weichen - sie stehen im Fuss und im Text. Karte, Blog
   und Kontakt reichen. Gleiches Verfahren wie auf der Startseite (.ab900). */
@media(max-width:620px){
  header nav a.eng{display:none}
  .kopf{gap:.6rem;padding:.35rem 0}
  .wortmarke{gap:.45rem}
  .wortmarke svg{width:21px;height:16px}
  .wortmarke b{font-size:1.12rem;letter-spacing:.1em}
  nav{gap:.75rem}
  nav a{font-size:.78rem;letter-spacing:.06em;padding-block:.75rem}
  header .knopf{font-size:.76rem;padding:.5rem .85rem;letter-spacing:.07em;min-height:2.75rem}
  /* Die Ueberschriften standen bei 38 px auf drei Zeilen. */
  h1{font-size:clamp(1.85rem,8.4vw,2.4rem);margin-bottom:1.5rem}
  h2{font-size:1.12rem;margin:2rem 0 .6rem}

  /* Gemessen am 03.08. gegen stripe.com, linear.app und apple.com bei 390 px:
     die liegen bei einer Zeilenhoehe von 1,20 bis 1,50 - HELIO stand auf 1,66.
     Deshalb WIRKTE der Text riesig, obwohl die Schrift mit 18 px normal ist:
     die Zeilen standen zu weit auseinander und ein Absatz brauchte den halben
     Bildschirm. Die Schriftgroesse bleibt, nur die Luft dazwischen geht raus.
     41 Zeichen je Zeile waren auch am oberen Rand (34 bis 39 sind ueblich). */
  body{line-height:1.5}
  main{padding-top:clamp(1.8rem,5vh,3rem)}
  p,li{font-size:.97rem}
  p+p{margin-top:.85rem}
  .vorspann{font-size:1.05rem;line-height:1.45;margin-bottom:1.7rem;padding-left:.9rem}
  li{margin-bottom:.45rem}
}
.knopf{display:inline-flex;align-items:center;font-family:var(--gr);font-weight:600;font-size:1.05rem;letter-spacing:.09em;text-transform:uppercase;text-decoration:none;background:var(--orange);color:var(--schwarz);padding:.72rem 1.35rem}

/* ── Das Seitenband rechts ────────────────────────────────────────────────
   Gleiche Form und gleiche Ziele wie auf der Startseite. Geschrieben wird es
   von assets/bau.py in jede Seite - hier steht nur, wie es aussieht. */
.seitenband{position:fixed;right:0;top:50%;transform:translateY(-50%);z-index:70;
  display:grid;justify-items:center;gap:.75rem;padding:1rem .5rem;pointer-events:none}
.seitenband>*{pointer-events:auto}
.seitenband .stab{width:1px;height:2rem;pointer-events:none;
  background:linear-gradient(180deg,transparent,rgba(242,239,234,.34),transparent)}
.seitenband .sonne{width:20px;height:16px;color:var(--kreide);opacity:.8}
.seitenband a{display:grid;place-items:center;width:2.2rem;height:2.2rem;color:var(--kreide-leise);
  border:1px solid transparent;border-radius:2px;
  transition:color .2s ease,border-color .2s ease,background-color .2s ease}
.seitenband a svg{width:18px;height:18px;stroke-width:2}
.seitenband a:hover{color:#160800;background:var(--orange);border-color:var(--orange)}
@media(max-width:900px){.seitenband{display:none}}

main{width:var(--breite);margin:0 auto;padding:clamp(3rem,9vh,5.5rem) 0 4rem}
/* Der Textblock steht mittig und ist schmal genug, der bleibt frei. Nur Kopf
   und Fuss laufen bis 92vw - die brauchen bei mittleren Fenstern den Platz
   fuers Band. */
@media(min-width:901px) and (max-width:1120px){
  .kopf,.fuss{padding-right:3rem}
}
footer{border-top:1px solid var(--kante);padding:2.4rem 0 3rem;margin-top:3rem}
.fuss{width:min(1180px,92vw);margin:0 auto;display:flex;flex-wrap:wrap;gap:1.2rem 2rem;align-items:center;justify-content:space-between}
.fuss small{color:var(--kreide-leise);font-size:.9rem}

/* ── Blog ─────────────────────────────────────────────────────────────────
   Dieselbe Grundlage wie die Rechtsseiten, nur mit Artikel-Bausteinen.
   Kein zweites Stilsystem: eine Seite, die anders aussieht als die andere,
   liest sich wie zwei Firmen. */
.brot{font-family:var(--gr);font-weight:500;font-size:.88rem;letter-spacing:.1em;
  text-transform:uppercase;color:var(--kreide-leise);margin-bottom:1.4rem}
.brot a{text-decoration:none}
.brot a:hover{color:var(--kreide)}
.brot span{margin:0 .45rem;color:#4A4844}

.stempel{font-family:var(--gr);font-weight:500;font-size:.9rem;letter-spacing:.1em;
  text-transform:uppercase;color:var(--kreide-leise);margin-bottom:1.6rem}
.stempel b{color:var(--orange);font-weight:600}

/* Der Vorspann traegt den Artikel. Wer nur ihn liest, soll die Antwort haben. */
.vorspann{font-size:clamp(1.1rem,1.8vw,1.28rem);line-height:1.55;color:var(--kreide);
  border-left:2px solid var(--orange);padding-left:1.1rem;margin-bottom:2.2rem}

article h2{margin-top:2.9rem}
article h3{font-family:var(--gr);font-weight:600;font-size:1.06rem;letter-spacing:.06em;
  text-transform:uppercase;margin:1.8rem 0 .45rem}
article strong{color:var(--kreide)}
article a:not(.knopf){color:var(--orange);text-underline-offset:3px}

/* Zahlenblock: die Kennzahl gross, die Erklaerung klein darunter. */
.zahlen{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
  gap:1px;background:var(--kante);border:1px solid var(--kante);margin:2rem 0}
.zahlen div{background:var(--schwarz);padding:1.15rem 1.1rem;min-width:0}
.zahlen b{display:block;font-family:var(--gr);font-weight:600;font-size:2.5rem;
  line-height:1;color:var(--orange)}
.zahlen small{display:block;margin-top:.4rem;color:var(--kreide-leise);font-size:.88rem;line-height:1.35}

/* Tabellen muessen am Handy scrollen duerfen, sonst schieben sie die Seite auf. */
/* Die Tabelle scrollt am Handy - ohne Hinweis sieht das aus, als waere sie
   abgeschnitten. Zwei Deckel am Rand plus zwei Schatten dahinter: die Deckel
   scrollen mit dem Inhalt (`local`), die Schatten stehen fest (`scroll`).
   Dadurch erscheint der Schatten nur an der Seite, an der noch etwas kommt. */
.rolle{overflow-x:auto;margin:1.6rem 0;-webkit-overflow-scrolling:touch;
  background:
    linear-gradient(90deg,var(--schwarz) 40%,rgba(11,11,12,0)) left/26px 100% no-repeat,
    linear-gradient(90deg,rgba(11,11,12,0),var(--schwarz) 60%) right/26px 100% no-repeat,
    radial-gradient(farthest-side at 0 50%,rgba(242,239,234,.20),rgba(242,239,234,0)) left/13px 100% no-repeat,
    radial-gradient(farthest-side at 100% 50%,rgba(242,239,234,.20),rgba(242,239,234,0)) right/13px 100% no-repeat;
  background-attachment:local,local,scroll,scroll}
table{border-collapse:collapse;width:100%;min-width:420px;font-size:.96rem}
th,td{text-align:left;padding:.55rem .8rem;border-bottom:1px solid var(--kante)}
th{font-family:var(--gr);font-weight:600;font-size:.86rem;letter-spacing:.09em;
  text-transform:uppercase;color:var(--kreide-leise)}
td.z{text-align:right;font-variant-numeric:tabular-nums}
tbody tr:hover td{background:rgba(242,239,234,.03)}

.hinweis{border:1px solid var(--kante);border-left:2px solid var(--orange);
  padding:1.1rem 1.2rem;margin:2rem 0;font-size:.98rem;color:var(--kreide-leise)}
.hinweis strong{color:var(--kreide)}

/* Der Abschluss jedes Artikels: ein Weg weiter, nicht drei. */
.schluss-block{border-top:1px solid var(--kante);margin-top:3.2rem;padding-top:2rem}
.schluss-block p{margin-bottom:1.2rem}

/* Artikelliste */
.liste{list-style:none;margin:0;padding:0}
.liste li{margin:0;border-bottom:1px solid var(--kante)}
.liste a{display:grid;gap:.35rem;padding:1.6rem 0;text-decoration:none}
.liste a:hover h2{color:var(--kreide)}
.liste h2{margin:0;font-size:clamp(1.35rem,3vw,1.9rem);color:var(--orange);
  transition:color .18s;text-transform:none;line-height:1.1}
.liste p{color:var(--kreide-leise);max-width:60ch}
.liste .stempel{margin:0}

.weiter{display:flex;flex-wrap:wrap;gap:.9rem;margin-top:1.4rem}
.still{display:inline-flex;align-items:center;font-family:var(--gr);font-weight:600;
  font-size:1.02rem;letter-spacing:.09em;text-transform:uppercase;text-decoration:none;
  border:1px solid var(--kante);color:var(--kreide);padding:.7rem 1.3rem;transition:border-color .18s}
.still:hover{border-color:var(--kreide-leise)}