/* ══════════════════════════════════════════════════════════════════════════
   SCHLIFF — Designsystem schwerdtfeger.biz
   Geschwister zu GEZEITEN (liekedelers.de): gleiches Skelett, eigene Sprache.

   Der Schwertfeger war nicht der Schmied. Er war der, der die Klinge
   geschliffen, poliert und gefasst hat — der letzte Handgriff, der aus
   Stahl eine Waffe macht. Deshalb heißt das System SCHLIFF.

   Was von GEZEITEN bleibt: die Linie in der Mitte, das Mono-Log rechts,
   Archivo/Newsreader/JetBrains, der Lichtschalter, das Rauschen.
   Was anders ist: die Linie trägt hier den Fortschritt (der Schliff wandert),
   unten steht die Werkbank statt der Wasserlinie, die Palette ist kühler im
   Tag und wärmer in der Nacht, das Signal ist Messing statt Orange.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── Schriften ────────────────────────────────────────────────────────────
   Archivo, Newsreader und JetBrains Mono liegen auf dem eigenen Server.
   Vorher kamen sie von fonts.gstatic.com — damit ging die IP-Adresse jedes
   Besuchers an Google, bevor er irgendetwas entscheiden konnte. Das LG
   Muenchen I hat genau dafuer 2022 Schadensersatz zugesprochen (3 O 17493/20),
   weil es mit dem lokalen Hosten eine zumutbare Alternative gibt.

   Es sind dieselben Schriftdateien und dieselben Achsenbereiche wie zuvor,
   nur der Lieferweg ist ein anderer. Am Schriftbild aendert sich nichts.
   Lizenz: SIL Open Font License 1.1, siehe fonts/OFL-*.txt
   ------------------------------------------------------------------------ */
@font-face{font-family:'Archivo';font-style:normal;font-weight:100 900;font-display:swap;src:url(../fonts/archivo-latin.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:'Archivo';font-style:normal;font-weight:100 900;font-display:swap;src:url(../fonts/archivo-latin-ext.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:'Newsreader';font-style:normal;font-weight:200 800;font-display:swap;src:url(../fonts/newsreader-latin.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:'Newsreader';font-style:normal;font-weight:200 800;font-display:swap;src:url(../fonts/newsreader-latin-ext.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:'Newsreader';font-style:italic;font-weight:200 800;font-display:swap;src:url(../fonts/newsreader-latin-italic.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:'Newsreader';font-style:italic;font-weight:200 800;font-display:swap;src:url(../fonts/newsreader-latin-ext-italic.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:'JetBrains Mono';font-style:normal;font-weight:100 800;font-display:swap;src:url(../fonts/jetbrainsmono-latin.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:'JetBrains Mono';font-style:normal;font-weight:100 800;font-display:swap;src:url(../fonts/jetbrainsmono-latin-ext.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}



*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}

:root{
  --signal:#C8A440;          /* Messing — der Beschlag am Griff */
  --signal-tief:#9C7B20;
  --stahl:#2C3339;
  --mono:'JetBrains Mono',ui-monospace,'SFMono-Regular',monospace;
  --grot:'Newsreader',Georgia,'Times New Roman',serif;
  --vf-text:'opsz' 16;
  --display:'Archivo',system-ui,-apple-system,sans-serif;
  --vf-plakat:'wdth' 62;
  --vf-mittel:'wdth' 82;
  --serif:'Newsreader',Georgia,'Times New Roman',serif;
  --vf-gross:'opsz' 60;
  --max:1560px;
  --e:cubic-bezier(.16,1,.3,1);
  --gut:clamp(1.3rem,4vw,4rem);
  /* Markenakzente — nur als Signatur, nie als Fläche */
  --a-spirits:#B4551E;
  --a-publishing:#3E6B57;
  --a-consulting:#3A5B7A;
  --a-design:#8A4A6B;
}

/* ── TAG — Werkstattlicht, Papier, Graphit ───────────────────────────────
   Ohne Attributselektor: das ist die Grundpalette. Steht in data-licht
   etwas Unbekanntes oder gar nichts, steht die Seite trotzdem.
   ─────────────────────────────────────────────────────────────────────── */
html,
html[data-licht="tag"]{
  --grund:#E7E5DF; --grund2:#DBD8D0; --karte:#F2F1EC;
  --tinte:#15150F; --mild:#3C3C34; --leise:#5A5A50;
  --linie:rgba(21,21,15,.26); --linie-zart:rgba(21,21,15,.13);
  --signal-schrift:#8A5A0C;   /* Messing, das auf Papier lesbar bleibt */
  --bild:1; --dunst:.32;
  --logo-hell:none; --logo-dunkel:block;
}
/* ── ABEND — die Werkbanklampe ─────────────────────────────────────────── */
html[data-licht="abend"]{
  --grund:#211E17; --grund2:#181510; --karte:#2A261D;
  --tinte:#F4F0E6; --mild:#D2CBBA; --leise:#A69D8A;
  --linie:rgba(244,240,230,.28); --linie-zart:rgba(244,240,230,.14);
  --signal-schrift:#E4B863;
  --bild:.9; --dunst:.56;
  --logo-hell:block; --logo-dunkel:none;
}
/* ── NACHT — Werkzeug weggeräumt ───────────────────────────────────────── */
html[data-licht="nacht"]{
  --grund:#0B0A07; --grund2:#060503; --karte:#131108;
  --tinte:#E0DCD0; --mild:#B3AD9D; --leise:#847E6E;
  --linie:rgba(224,220,208,.22); --linie-zart:rgba(224,220,208,.11);
  --signal-schrift:#DCAC50;
  --bild:.66; --dunst:.66;
  --logo-hell:block; --logo-dunkel:none;
}

html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  background:var(--grund);color:var(--tinte);
  font-family:var(--grot);font-variation-settings:var(--vf-text);
  font-weight:400;font-size:18.5px;line-height:1.58;letter-spacing:0;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
  transition:background .9s var(--e),color .9s var(--e);
}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
::selection{background:var(--signal);color:#15150F}
/* Der Fokusrahmen lief auf --signal. Im Tagmodus ergibt das Messing auf
   hellem Papier nur 1,9:1 — WCAG 1.4.11 verlangt fuer solche Umrisse 3:1.
   --signal-schrift ist genau dafuer da: dieselbe Farbe, aber so abgedunkelt,
   dass sie auf hellem Grund traegt. In Abend und Nacht ist sie hell und
   traegt dort ebenso. */
:focus-visible{outline:2px solid var(--signal-schrift);outline-offset:3px}
section[id],div[id]{scroll-margin-top:5rem}
main[id]{scroll-margin-top:5rem}

/* Sprunglink - liegt ausserhalb des Bildes und kommt erst hervor, wenn
   jemand mit der Tastatur ankommt. Ohne ihn muesste man sich bei jedem
   Seitenwechsel erneut durch Kopfzeile und Lichtschalter tabben
   (WCAG 2.4.1, Stufe A). */
.sprung{position:absolute;left:-9999px;top:0;z-index:100;
  font-family:var(--mono);font-size:.78rem;letter-spacing:.12em;text-transform:uppercase;
  background:var(--signal);color:#15150F;padding:.85rem 1.4rem;border:0}
.sprung:focus{left:var(--gut);top:.7rem;outline:2px solid var(--tinte);outline-offset:2px}

/* Feines Rauschen — nimmt den Flächen das Digitale */
body::after{
  content:'';position:fixed;inset:0;z-index:9998;pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='4'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size:180px;opacity:.04;mix-blend-mode:overlay;
}

/* ── DIE SCHNEIDE ────────────────────────────────────────────────────────
   Die Mittellinie. Anders als bei GEZEITEN steht sie nicht nur da: ein
   kurzer Messingglanz wandert mit dem Scrollen daran herunter. Das ist
   der Schliff, der über die Klinge geht.
   ─────────────────────────────────────────────────────────────────────── */
.schneide{position:fixed;left:50%;top:0;bottom:0;width:1px;background:var(--linie-zart);
  z-index:2;pointer-events:none;transition:background .9s var(--e)}
.schneide .glanz{position:absolute;left:-1px;width:3px;height:14vh;
  background:linear-gradient(to bottom,transparent,var(--signal),transparent);
  opacity:.55;transition:top .35s linear}
@media(max-width:900px){.schneide{display:none}}

/* ── KOPF ──────────────────────────────────────────────────────────────── */
header.kopf{
  position:fixed;top:0;left:0;right:0;z-index:60;
  display:flex;align-items:center;justify-content:space-between;gap:1rem;
  padding:.85rem var(--gut);
  backdrop-filter:blur(16px);
  background:color-mix(in srgb,var(--grund) 80%,transparent);
  border-bottom:1px solid var(--linie-zart);
}
.marke{display:flex;align-items:center;gap:.75rem;
  font-family:var(--display);font-variation-settings:'wdth' 68;
  font-weight:800;font-size:.95rem;letter-spacing:.14em;text-transform:uppercase;white-space:nowrap}
.marke .wort{display:inline-block}
.marke .wort i{color:var(--signal-schrift);font-style:normal;letter-spacing:0}
/* Das Ross aus dem Wappen — die eigentliche Marke, keine Ersatzraute.
   Es steht frei über der Wortmarke im Original und ist damit das einzige
   Element, das sich sauber herauslösen und klein setzen lässt. */
.marke .ross{height:30px;width:auto;flex:none;object-fit:contain;
  transition:transform .5s var(--e)}
.marke:hover .ross{transform:translateY(-2px) scale(1.06)}
.kopf nav{display:flex;gap:1.25rem;align-items:center}
.kopf nav a{font-family:var(--mono);font-size:.74rem;font-weight:400;letter-spacing:.13em;
  text-transform:uppercase;color:var(--mild);padding-bottom:2px;
  border-bottom:1px solid transparent;transition:.3s var(--e)}
.kopf nav a:hover,.kopf nav a[aria-current]{color:var(--tinte);border-color:var(--signal)}
.lichtschalter{display:flex;border:1px solid var(--linie);padding:.2rem}
.lichtschalter button{font-family:var(--mono);font-size:.66rem;letter-spacing:.1em;
  text-transform:uppercase;padding:.26rem .55rem;color:var(--leise);transition:.25s}
.lichtschalter button:hover{color:var(--tinte)}
.lichtschalter button[aria-pressed="true"]{background:var(--signal);color:#15150F}
@media(max-width:1120px){.kopf nav a.verstecken{display:none}}

/* ── WERKBANK ──────────────────────────────────────────────────────────── */
.werkbank{
  position:fixed;left:0;right:0;bottom:0;z-index:59;height:30px;
  display:flex;align-items:center;gap:.85rem;padding:0 var(--gut);
  font-family:var(--mono);font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--mild);background:color-mix(in srgb,var(--grund) 88%,transparent);
  backdrop-filter:blur(16px);border-top:1px solid var(--linie-zart);
  overflow:hidden;white-space:nowrap;
}
.werkbank b{color:var(--tinte);font-weight:500}
.werkbank .marker{width:6px;height:6px;background:var(--signal);flex:none;
  transform:rotate(45deg)}
@media(max-width:760px){.werkbank .opt{display:none}}

/* ── RASTER ────────────────────────────────────────────────────────────── */
.bahn{max-width:var(--max);margin:0 auto;padding:0 var(--gut);position:relative;z-index:1}
.zwei{display:grid;grid-template-columns:1fr 1fr;column-gap:calc(var(--gut)*2);align-items:start}
@media(max-width:900px){.zwei{grid-template-columns:1fr;row-gap:2.4rem}}
section{position:relative;padding:clamp(4.5rem,11vh,9rem) 0}

.nummer{position:absolute;top:clamp(2rem,6vh,5rem);left:-.02em;
  font-family:var(--display);font-variation-settings:var(--vf-plakat);font-weight:900;
  font-size:clamp(7rem,17vw,16rem);line-height:.72;color:var(--tinte);
  opacity:.07;pointer-events:none;user-select:none;z-index:0}

.zeile{display:flex;align-items:center;gap:1rem;font-family:var(--mono);font-size:.78rem;
  font-weight:500;letter-spacing:.18em;text-transform:uppercase;color:var(--signal-schrift);
  margin-bottom:1.5rem}
.zeile::after{content:'';flex:1;height:1px;background:var(--linie)}

h1,h2{font-family:var(--display);font-variation-settings:'wdth' 66;font-weight:800;
  line-height:.92;letter-spacing:-.005em;text-transform:uppercase}
h2{font-size:clamp(2.5rem,6vw,5.2rem);margin-bottom:1.5rem}
h3{font-family:var(--display);font-variation-settings:'wdth' 82;font-weight:650;
  font-size:1.05rem;letter-spacing:.04em;text-transform:uppercase;margin-bottom:.5rem}
p{max-width:47ch;color:var(--mild);margin-bottom:1.15rem}
p strong,p b{color:var(--tinte);font-weight:600}
a.tlink{color:var(--tinte);border-bottom:1px solid var(--signal);transition:.25s}
a.tlink:hover{color:var(--signal-schrift)}
.gross{font-variation-settings:'opsz' 36;font-size:clamp(1.3rem,2vw,1.7rem);
  line-height:1.32;letter-spacing:-.005em;font-weight:500;color:var(--tinte);max-width:38ch}
em,.kursiv{font-family:var(--serif);font-style:italic;font-weight:400;
  font-variation-settings:var(--vf-gross)}

/* ── LOG ───────────────────────────────────────────────────────────────── */
.log{font-family:var(--mono);font-size:.82rem;font-weight:400;letter-spacing:.02em;
  line-height:1.6}
.log dl{display:grid;grid-template-columns:auto 1fr;gap:.45rem 1.4rem}
.log dt{color:var(--leise);text-transform:uppercase;letter-spacing:.13em;font-size:.72rem;
  padding-top:.2rem;white-space:nowrap}
.log dd{color:var(--tinte);border-bottom:1px solid var(--linie-zart);padding-bottom:.45rem}
.log-klein{font-family:var(--mono);font-size:.72rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--leise)}

/* ── LOGOS IM LICHTWECHSEL ─────────────────────────────────────────────── */
.logo-hell{display:var(--logo-hell)}
.logo-dunkel{display:var(--logo-dunkel)}

/* ── BILD ──────────────────────────────────────────────────────────────── */
figure{position:relative;overflow:hidden}
figure img{width:100%;height:100%;object-fit:cover;
  opacity:var(--bild);transition:opacity .9s var(--e),transform 1.4s var(--e)}
figure:hover img{transform:scale(1.03)}
figcaption{font-family:var(--mono);font-size:.72rem;letter-spacing:.13em;
  text-transform:uppercase;color:var(--leise);margin-top:.6rem}

/* ── KNÖPFE ────────────────────────────────────────────────────────────── */
.knopf{display:inline-flex;align-items:center;gap:.7rem;font-family:var(--mono);
  font-size:.78rem;letter-spacing:.15em;text-transform:uppercase;padding:.85rem 1.5rem;
  border:1px solid var(--tinte);color:var(--tinte);position:relative;overflow:hidden;
  isolation:isolate;transition:color .4s var(--e),border-color .4s;cursor:pointer}
.knopf::before{content:'';position:absolute;inset:0;background:var(--signal);
  transform:scaleY(0);transform-origin:bottom;transition:transform .45s var(--e);z-index:-1}
.knopf:hover{color:#15150F;border-color:var(--signal)}
.knopf:hover::before{transform:scaleY(1)}
.knopf.voll{background:var(--signal);border-color:var(--signal);color:#15150F;font-weight:500}
.knopf.voll::before{background:#15150F}
.knopf.voll:hover{color:var(--signal);border-color:#15150F}

/* ── FORMULARE ─────────────────────────────────────────────────────────── */
.feld{margin-bottom:1.1rem}
.feld label{display:block;font-family:var(--mono);font-size:.72rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--leise);margin-bottom:.4rem}
.feld input,.feld textarea,.feld select{
  width:100%;padding:.85rem 1rem;background:var(--karte);border:1px solid var(--linie);
  color:var(--tinte);font-family:var(--grot);font-size:1rem;transition:border-color .25s}
.feld textarea{min-height:110px;resize:vertical}
.feld input:focus,.feld textarea:focus,.feld select:focus{outline:none;border-color:var(--signal)}
.feld input::placeholder,.feld textarea::placeholder{color:var(--leise)}
.feld .pflicht{color:var(--signal-schrift)}
.formhinweis{font-family:var(--mono);font-size:.74rem;line-height:1.75;color:var(--leise);
  margin-top:.9rem}
.formhinweis a{color:var(--tinte);border-bottom:1px solid var(--signal)}
.formmeldung{font-family:var(--mono);font-size:.78rem;padding:.8rem 1rem;margin-top:1rem;
  border-left:2px solid var(--signal);background:var(--karte);color:var(--tinte)}
.check{display:flex;gap:.6rem;align-items:flex-start;font-family:var(--mono);
  font-size:.74rem;line-height:1.6;color:var(--mild);margin-bottom:1.1rem}
.check input{margin-top:.25rem;accent-color:var(--signal);width:16px;height:16px;flex:none}
.wahl{display:flex;flex-wrap:wrap;gap:.6rem}
.wahl label{display:flex;align-items:center;gap:.55rem;cursor:pointer;
  border:1px solid var(--linie);padding:.6rem .9rem;flex:1 1 auto;
  font-family:var(--mono);font-size:.76rem;letter-spacing:.06em;transition:.25s var(--e)}
.wahl label:hover{border-color:var(--signal)}
.wahl input{accent-color:var(--signal);width:15px;height:15px;flex:none}
.wahl label:has(input:checked){border-color:var(--signal);
  background:color-mix(in srgb,var(--signal) 12%,transparent)}
fieldset.block{border:0;border-top:1px solid var(--linie-zart);padding:1.4rem 0 0;margin:1.6rem 0 0}
fieldset.block legend{font-family:var(--mono);font-size:.74rem;letter-spacing:.18em;
  text-transform:uppercase;color:var(--signal-schrift);padding:0 .7rem 0 0}

/* ── REVEAL ────────────────────────────────────────────────────────────────
   WICHTIG: Das Verstecken passiert nur, wenn Javascript nachweislich läuft
   (Klasse „animiert" auf <html>). Ohne diese Klasse ist alles sichtbar.

   Grund: Ein reines .auf{opacity:0} ist ein Single Point of Failure. Läuft das
   Skript aus irgendeinem Grund nicht — blockierte Datei, Vorschau-Fenster ohne
   Javascript, Browsereinstellung —, wäre die halbe Seite unsichtbar und
   niemand wüsste warum. Inhalt geht vor Animation.
   ─────────────────────────────────────────────────────────────────────────── */
html.animiert .auf{opacity:0;transform:translateY(20px);
  transition:opacity 1s var(--e),transform 1s var(--e)}
html.animiert .auf.da{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){
  *{animation:none!important;transition-duration:.01ms!important}
  html.animiert .auf{opacity:1;transform:none}
  html{scroll-behavior:auto}
  .schneide .glanz{display:none}
}

/* ── CHIP ──────────────────────────────────────────────────────────────── */
.chip{display:inline-flex;align-items:center;gap:.55rem;font-family:var(--mono);
  font-size:.74rem;letter-spacing:.13em;text-transform:uppercase;border:1px solid var(--linie);
  padding:.42rem .85rem;color:var(--tinte)}
.punkt{width:7px;height:7px;background:var(--signal);flex:none;transform:rotate(45deg)}

/* ── SEITENKOPF ────────────────────────────────────────────────────────── */
.seitenkopf{padding-top:calc(clamp(4.5rem,11vh,9rem) + 3rem)}
.seitenkopf h1{font-size:clamp(2.8rem,9vw,7.5rem);margin-bottom:1.2rem}
.seitenkopf .untertitel{font-family:var(--serif);font-style:italic;
  font-variation-settings:var(--vf-gross);
  font-size:clamp(1.15rem,2.2vw,1.7rem);color:var(--tinte);max-width:26ch}

/* ── MARKENFELDER (Startseite) ─────────────────────────────────────────────
   Vier Wappenfelder statt vier Logokästchen.

   Warum kein Logo: Alle vier Marken tragen dieselbe Komposition — Ross,
   Schriftzug „SCHWERDTFEGER", Schrägstrich, Unterwort. Vier fast identische
   Bilder nebeneinander sagen auch groß nichts; unterscheidbar ist allein das
   letzte Wort. Also wird die Sperrschrift typografisch nachgebaut und das
   Unterscheidende plakatgroß gesetzt. Das echte Logo steht dort, wo es
   hingehört: oben auf der jeweiligen Markenseite.

   Der Schrägstrich aus dem Logo läuft bei 46 Grad — genau gemessen —
   durch jede Karte. Vier parallele Schnitte über das Raster.
   ─────────────────────────────────────────────────────────────────────────── */
.felder{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--linie-zart);
  border:1px solid var(--linie-zart);margin-top:3rem}
@media(max-width:900px){.felder{grid-template-columns:1fr}}

.feldkarte{background:var(--grund);padding:2.2rem 2rem 2rem;position:relative;
  display:flex;flex-direction:column;min-height:370px;overflow:hidden;isolation:isolate;
  transition:background .5s var(--e)}
.feldkarte:hover{background:var(--grund2)}

/* Das Ross im Rücken, angeschnitten — wie im Hero, nur kleiner */
.feldkarte .wappen{position:absolute;right:-8%;bottom:-14%;width:62%;height:auto;
  opacity:.06;pointer-events:none;user-select:none;z-index:-2;
  transition:opacity .6s var(--e),transform .8s var(--e)}
.feldkarte:hover .wappen{opacity:.11;transform:translate(-3%,-3%)}

/* Der Schrägstrich — 46 Grad, wie im Original */
.feldkarte::after{content:'';position:absolute;inset:-20%;z-index:-1;pointer-events:none;
  background:linear-gradient(136deg,
    transparent calc(50% - .5px),
    var(--akzent,var(--signal)) calc(50% - .5px),
    var(--akzent,var(--signal)) calc(50% + .5px),
    transparent calc(50% + .5px));
  opacity:.45;transition:opacity .5s var(--e),transform .8s var(--e)}
.feldkarte:hover::after{opacity:1;transform:translateX(2%)}

.feldkarte .zaehler{font-family:var(--mono);font-size:.72rem;letter-spacing:.18em;
  color:var(--leise)}

/* Die Wortmarke, typografisch nachgebaut statt als Bild */
.feldkarte .sperre{font-family:var(--mono);font-size:.66rem;font-weight:400;
  letter-spacing:.42em;text-transform:uppercase;color:var(--leise);
  display:block;margin-bottom:.35rem;padding-top:2.4rem}
.feldkarte h3{font-family:var(--display);font-variation-settings:'wdth' 62;
  font-weight:900;font-size:clamp(2.3rem,4.6vw,3.9rem);line-height:.86;
  letter-spacing:-.01em;text-transform:uppercase;margin-bottom:1rem;
  color:var(--tinte);transition:color .4s var(--e)}
.feldkarte:hover h3{color:var(--akzent,var(--signal))}
/* Feiner Strich unter dem Namen, in der Farbe des Feldes */
.feldkarte h3::after{content:'';display:block;width:2.6rem;height:2px;margin-top:.9rem;
  background:var(--akzent,var(--signal));transition:width .55s var(--e)}
.feldkarte:hover h3::after{width:6rem}

.feldkarte p{font-size:.98rem;margin-bottom:1.6rem;max-width:38ch}
.feldkarte .weiter{margin-top:auto;font-family:var(--mono);font-size:.74rem;
  letter-spacing:.15em;text-transform:uppercase;color:var(--signal-schrift);
  display:inline-flex;align-items:center;gap:.6rem;transition:gap .4s var(--e)}
.feldkarte:hover .weiter{gap:1.1rem}

@media(prefers-reduced-motion:reduce){
  .feldkarte .wappen,.feldkarte::after,.feldkarte h3::after{transition:none}
}

/* ── LAUFBAND ──────────────────────────────────────────────────────────── */
.laufband{overflow:hidden;border-top:1px solid var(--linie-zart);
  border-bottom:1px solid var(--linie-zart);padding:1.1rem 0}
.laufband div{display:inline-flex;gap:2.6rem;white-space:nowrap;
  animation:laufen 46s linear infinite;font-family:var(--display);
  font-variation-settings:'wdth' 70;font-weight:750;font-size:1.15rem;
  letter-spacing:.14em;text-transform:uppercase;color:var(--leise)}
.laufband span.stern{color:var(--signal-schrift)}
@keyframes laufen{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* ── REGAL (Bücher) ────────────────────────────────────────────────────── */
.regal{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));
  gap:2.4rem 1.8rem;margin-top:3rem}
.buch{display:flex;flex-direction:column}
.buch .cover{border:1px solid var(--linie-zart);background:var(--karte);
  aspect-ratio:2/3;overflow:hidden;margin-bottom:1rem;
  box-shadow:0 12px 28px -20px rgba(0,0,0,.6)}
.buch .cover img{width:100%;height:100%;object-fit:cover;
  transition:transform 1.2s var(--e)}
.buch:hover .cover img{transform:scale(1.04)}
.buch h3{font-size:1rem;font-variation-settings:'wdth' 78;margin-bottom:.35rem}
.buch .meta{font-family:var(--mono);font-size:.7rem;letter-spacing:.12em;
  text-transform:uppercase;color:var(--leise);margin-bottom:.6rem}
.buch p{font-size:.9rem;max-width:none;margin-bottom:.8rem}
.buch .stand{font-family:var(--mono);font-size:.68rem;letter-spacing:.12em;
  text-transform:uppercase;color:var(--signal-schrift);margin-top:auto}

/* ── BUCHREIHE (ein Titel je Zeile, mit Klappentext) ───────────────────── */
.buchreihe{margin-top:3rem;border-top:1px solid var(--linie-zart)}
.buchzeile{padding:3rem 0;border-bottom:1px solid var(--linie-zart);
  display:grid;grid-template-columns:minmax(150px,230px) 1fr;
  column-gap:calc(var(--gut)*1.5);align-items:start}
@media(max-width:800px){.buchzeile{grid-template-columns:1fr;row-gap:1.8rem}
  .buchzeile .cover{max-width:230px}}
.buchzeile .cover{border:1px solid var(--linie-zart);background:var(--karte);
  overflow:hidden;box-shadow:0 20px 44px -28px rgba(0,0,0,.65);
  position:sticky;top:6rem}
@media(max-width:800px){.buchzeile .cover{position:static}}
.buchzeile .cover img{width:100%;height:auto;display:block;
  transition:transform 1.2s var(--e)}
.buchzeile:hover .cover img{transform:scale(1.03)}
.buchzeile h3{font-size:clamp(1.5rem,3vw,2.2rem);font-variation-settings:'wdth' 68;
  font-weight:800;margin-bottom:.7rem;line-height:1}
.buchzeile .gattung{font-family:var(--mono);font-size:.72rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--signal-schrift);margin-bottom:1.2rem}
.buchzeile .anriss{font-family:var(--serif);font-style:italic;
  font-variation-settings:var(--vf-gross);font-size:clamp(1.15rem,1.9vw,1.5rem);
  line-height:1.3;color:var(--tinte);margin-bottom:1.3rem;max-width:30ch}
.buchzeile p{font-size:.97rem;max-width:56ch}
.buchdaten{display:flex;flex-wrap:wrap;gap:.45rem;margin:1.6rem 0 1.4rem}
.buchdaten span{font-family:var(--mono);font-size:.7rem;letter-spacing:.11em;
  text-transform:uppercase;border:1px solid var(--linie-zart);padding:.34rem .75rem;
  color:var(--mild)}
.buchdaten span.preis{border-color:var(--signal);color:var(--tinte);font-weight:500}

/* ── FLASCHENREIHE (Spirits) ───────────────────────────────────────────────
   Ohne Produktfotos gesetzt: Name, Zahlen, Preis. Die Angaben stammen 1:1
   aus dem Shop — nichts davon ist erfunden. Sobald Flaschenbilder vorliegen,
   bekommt jede Karte oben ein Bildfeld; das Raster ist darauf vorbereitet.
   ─────────────────────────────────────────────────────────────────────────── */
.reihe{margin-top:2.4rem}
.reihe-kopf{display:flex;align-items:baseline;gap:1.2rem;flex-wrap:wrap;
  padding-bottom:1rem;border-bottom:1px solid var(--linie);margin-bottom:0}
.reihe-kopf h3{font-family:var(--display);font-variation-settings:'wdth' 64;
  font-weight:900;font-size:clamp(1.7rem,3.4vw,2.6rem);line-height:.9;
  text-transform:uppercase;margin:0}
.reihe-kopf .was{font-family:var(--mono);font-size:.72rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--signal-schrift)}
.reihe > p{margin:1.1rem 0 0;max-width:56ch}

.buddels{display:grid;grid-template-columns:repeat(auto-fill,minmax(255px,1fr));
  gap:1px;background:var(--linie-zart);border:1px solid var(--linie-zart);
  margin-top:1.8rem}
.buddel{background:var(--grund);padding:1.7rem 1.5rem 1.5rem;display:flex;
  flex-direction:column;transition:background .4s var(--e)}
.buddel:hover{background:var(--grund2)}
.buddel h4{font-family:var(--display);font-variation-settings:'wdth' 78;
  font-weight:750;font-size:1.06rem;line-height:1.15;letter-spacing:.02em;
  text-transform:uppercase;margin:0 0 .9rem;color:var(--tinte)}
.buddel .zahlen{display:flex;flex-wrap:wrap;gap:.35rem;margin-bottom:1.1rem}
.buddel .zahlen span{font-family:var(--mono);font-size:.68rem;letter-spacing:.1em;
  text-transform:uppercase;border:1px solid var(--linie-zart);padding:.28rem .6rem;
  color:var(--mild)}
.buddel .taler{font-family:var(--display);font-variation-settings:'wdth' 68;
  font-weight:850;font-size:1.9rem;line-height:1;color:var(--signal-schrift);
  margin-top:auto;margin-bottom:.9rem}
.buddel .taler small{font-family:var(--mono);font-size:.62rem;font-weight:400;
  letter-spacing:.12em;color:var(--leise);display:block;margin-top:.4rem;
  text-transform:uppercase}
.buddel .holen{font-family:var(--mono);font-size:.7rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--mild);display:inline-flex;align-items:center;
  gap:.5rem;transition:gap .35s var(--e),color .3s}
.buddel:hover .holen{gap:.9rem;color:var(--tinte)}

/* ── ARBEITEN (Portfolio) ──────────────────────────────────────────────── */
.arbeiten{margin-top:3rem;border-top:1px solid var(--linie-zart)}
.arbeit{padding:2.6rem 0;border-bottom:1px solid var(--linie-zart);
  display:grid;grid-template-columns:1fr 1fr;column-gap:calc(var(--gut)*2);align-items:center}
@media(max-width:900px){.arbeit{grid-template-columns:1fr;row-gap:1.8rem}}
.arbeit .buehne{background:var(--karte);border:1px solid var(--linie-zart);
  padding:2.6rem 2rem;display:grid;place-items:center;min-height:190px}
.arbeit .buehne img{max-height:120px;width:auto;object-fit:contain}
.arbeit h3{font-size:1.45rem;font-variation-settings:'wdth' 70;font-weight:800;
  margin-bottom:.5rem}
.arbeit .fach{font-family:var(--mono);font-size:.72rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--leise);margin-bottom:1.1rem}
.arbeit .claim{font-family:var(--serif);font-style:italic;
  font-variation-settings:var(--vf-gross);font-size:1.35rem;line-height:1.25;
  color:var(--tinte);margin-bottom:1rem;max-width:22ch}
.arbeit p{font-size:.96rem}
.farbband{display:flex;margin:1.2rem 0 .8rem;border:1px solid var(--linie-zart)}
.farbband i{flex:1;height:26px}
.farbnamen{display:flex;flex-wrap:wrap;gap:.4rem .9rem;font-family:var(--mono);
  font-size:.66rem;letter-spacing:.09em;text-transform:uppercase;color:var(--leise)}
.marken-chips{display:flex;flex-wrap:wrap;gap:.45rem;margin-top:1.1rem}
.marken-chips span{font-family:var(--mono);font-size:.68rem;letter-spacing:.12em;
  text-transform:uppercase;border:1px solid var(--linie-zart);padding:.3rem .7rem;
  color:var(--mild)}

/* ── LEISTUNGSLISTE ────────────────────────────────────────────────────── */
.leistungen{list-style:none;margin-top:2.4rem;border-top:1px solid var(--linie-zart)}
.leistungen li{border-bottom:1px solid var(--linie-zart);padding:1.3rem 0;
  display:grid;grid-template-columns:auto 1fr;gap:1.6rem;align-items:baseline}
.leistungen .nr{font-family:var(--mono);font-size:.72rem;letter-spacing:.14em;
  color:var(--signal-schrift)}
.leistungen h3{margin-bottom:.35rem}
.leistungen p{margin:0;font-size:.96rem}

/* ── ZITAT ─────────────────────────────────────────────────────────────── */
.zitat{padding-block:clamp(4.5rem,13vh,10rem)}
.zitat q{font-family:var(--serif);font-style:italic;font-variation-settings:var(--vf-plakat);
  quotes:none;font-size:clamp(2rem,5.2vw,4.4rem);line-height:1.08;display:block;max-width:17ch}
.zitat .quelle{font-family:var(--mono);font-size:.74rem;letter-spacing:.18em;
  text-transform:uppercase;color:var(--leise);margin-top:2rem;display:block}

/* ── PROSA (Impressum, Datenschutz, AGB) ───────────────────────────────── */
.prosa{max-width:70ch}
.prosa h2{font-size:clamp(1.2rem,2vw,1.6rem);font-variation-settings:var(--vf-mittel);
  font-weight:700;line-height:1.2;margin:2.8rem 0 .9rem;padding-top:1.4rem;
  border-top:1px solid var(--linie-zart)}
.prosa h2:first-child{margin-top:0;border-top:0;padding-top:0}
.prosa h3{font-size:.95rem;margin:1.8rem 0 .5rem;color:var(--signal-schrift)}
.prosa p{max-width:none;font-size:1rem;line-height:1.75}
.prosa ul,.prosa ol{margin:0 0 1.2rem 1.2rem;color:var(--mild)}
.prosa li{margin-bottom:.4rem}
.prosa a{color:var(--tinte);border-bottom:1px solid var(--signal)}
.prosa strong{color:var(--tinte)}
.prosa .kasten{border-left:2px solid var(--signal);background:var(--karte);
  padding:1.2rem 1.4rem;margin:1.6rem 0}
.prosa .kasten p:last-child{margin-bottom:0}
/* Nummerierung als Text gesetzt, damit § und Nr. nicht durchzählen */
.prosa .nr{display:grid;grid-template-columns:2.6rem 1fr;gap:0 .4rem;margin-bottom:.9rem}
.prosa .nr>span:first-child{font-family:var(--mono);font-size:.82rem;color:var(--leise);
  padding-top:.16rem}
.prosa .nr p{margin:0}

/* Inhaltsverzeichnis */
.inhalt{border:1px solid var(--linie-zart);background:var(--karte);padding:1.6rem 1.8rem;
  margin-bottom:3rem}
.inhalt ol{list-style:none;margin:0;columns:2;column-gap:2rem}
@media(max-width:700px){.inhalt ol{columns:1}}
.inhalt li{font-family:var(--mono);font-size:.78rem;line-height:2;
  break-inside:avoid;margin:0}
.inhalt a{border-bottom:0;color:var(--mild)}
.inhalt a:hover{color:var(--signal-schrift)}

/* ── FUSS ──────────────────────────────────────────────────────────────── */
footer.fuss{border-top:1px solid var(--linie-zart);padding:4rem 0 5.5rem;margin-top:3rem}
.fussraster{display:grid;grid-template-columns:repeat(4,1fr);gap:2rem}
@media(max-width:900px){.fussraster{grid-template-columns:1fr 1fr}}
/* Die Spaltenüberschriften im Fuß sind h2, nicht h4: sie folgen im Dokument
   auf die h2 der Abschnitte, ein Sprung auf h4 hätte die Gliederung zerrissen.
   Die globale h1,h2-Regel muss deshalb hier vollständig zurückgenommen werden —
   font-variation-settings und line-height inklusive, sonst stünde im Fuß
   plötzlich eine Plakatschrift. */
.fuss h2{font-family:var(--mono);font-variation-settings:normal;
  font-size:.72rem;line-height:1.4;letter-spacing:.2em;text-transform:uppercase;
  color:var(--leise);font-weight:400;margin-bottom:.9rem}
.fuss li{list-style:none;font-family:var(--mono);font-size:.8rem;color:var(--mild);
  line-height:2;letter-spacing:.01em}
.fuss li a:hover{color:var(--signal-schrift)}
/* Die Bereichs-Signets im Seitenkopf.
   Es sind Strichzeichnungen: Wappen mit feiner Schraffur, darüber die Wortmarke.
   Unter etwa 200 Pixel Breite wird daraus ein grauer Fleck — „SPIRITS" ist dann
   nicht mehr zu lesen. Gesteuert wird über die Breite, nicht über die Höhe:
   die Datei hat rundum rund sieben Prozent Freiraum, über die Höhe gerechnet
   wirkt die Marke deshalb deutlich kleiner, als sie ist. */
.seitenkopf .signet{width:clamp(215px,26vw,340px);height:auto;
  object-fit:contain;object-position:left;
  margin:0 0 clamp(1.5rem,3.2vh,2.4rem)}

.signetfuss{display:flex;align-items:center;gap:1.6rem;margin-top:3.5rem;
  padding-top:2rem;border-top:1px solid var(--linie-zart);flex-wrap:wrap}
/* Gleicher Grund wie oben — 46 Pixel Höhe ergaben 71 Pixel Breite, das war
   im Fuß genauso unleserlich wie im Kopf. */
.signetfuss img{width:clamp(132px,16vw,176px);height:auto;flex:none}
.signetfuss p{margin:0;max-width:38ch;font-family:var(--mono);font-size:.76rem;
  line-height:1.8;color:var(--leise);letter-spacing:.04em}
.schluss{font-family:var(--display);font-variation-settings:var(--vf-plakat);font-weight:900;
  font-size:clamp(2.2rem,10vw,9rem);line-height:.8;text-transform:uppercase;opacity:.1;
  margin-top:4rem;user-select:none}

/* ══════════════════════════════════════════════════════════════════════════
   MOBIL — hier zählt jedes Pixel

   Der Befund: In einer Zeile bräuchten Marke, vier Navigationslinks und der
   Lichtschalter zusammen rund 950 Pixel. Auf einem Telefon stehen etwa 350
   zur Verfügung. Eine ausklappbare Menütaste wäre die übliche Antwort — sie
   braucht aber Javascript, und dann hinge die Navigation wieder an einer
   Datei, die auch ausbleiben kann.

   Deshalb die einfachere Lösung: Unterhalb von 860 Pixeln ist die Kopfzeile
   nicht mehr fest angeheftet, sondern scrollt mit. Sie darf dann zweizeilig
   werden und hat Platz. Der Inhalt bekommt den ganzen Schirm, die Werkbank
   unten bleibt als feste Orientierung. Kein Javascript, kein Ausfallrisiko.
   ══════════════════════════════════════════════════════════════════════════ */

/* Lange Adressen, Wortungetüme und Punktreihen dürfen die Seite nicht
   aufreißen — auf dem Telefon ist waagerechtes Scrollen ein Fehler. */
/* Lange Adressen und Wortungetüme dürfen die Seite nicht aufreißen.
   ABER: Überschriften bleiben ausdrücklich außen vor. Ein erzwungener Umbruch
   mitten im Wort macht aus „VORTÄUSCHT" ein „VORTÄUSCH / T." — das sah aus wie
   ein Satzfehler. Überschriften trennen deshalb mit Bindestrich (hyphens),
   das ist im Deutschen die richtige Antwort auf ein zu langes Wort. */
p,li,dd,dt,figcaption,a,.log,.prosa{overflow-wrap:break-word}
  /* Kurze Woerter gar nicht trennen und nie naeher als vier Zeichen an
     einem Wortende — das verhindert Silbenreste wie „Kuur-\nhuus" und
     schuetzt nebenbei die Markennamen im Fliesstext. */
  p,li,dd,dt,figcaption,.prosa{hyphenate-limit-chars:10 4 4}
h1,h2,h3,h4{overflow-wrap:normal;hyphens:none;-webkit-hyphens:none}

/* Fußleiste über dem iOS-Balken halten */
.werkbank{height:calc(30px + env(safe-area-inset-bottom,0px));
  padding-bottom:env(safe-area-inset-bottom,0px)}
footer.fuss{padding-bottom:calc(5.5rem + env(safe-area-inset-bottom,0px))}

@media(max-width:860px){
  header.kopf{position:static;flex-wrap:wrap;row-gap:.7rem;
    padding:1rem var(--gut) .85rem;backdrop-filter:none;background:var(--grund)}
  .marke{flex:1 1 100%;font-size:.88rem;letter-spacing:.1em;white-space:normal}
  .marke .ross{height:28px}
  .kopf nav{flex:1 1 100%;flex-wrap:wrap;gap:.1rem 1.5rem;align-items:center}
  /* Tap-Ziele: mindestens 44 Pixel hoch, sonst trifft man mit dem Daumen daneben */
  .kopf nav a{min-height:44px;display:inline-flex;align-items:center;
    font-size:.78rem;padding-bottom:0}
  .kopf nav a:hover,.kopf nav a[aria-current]{border-color:transparent;
    color:var(--signal-schrift)}
  .lichtschalter{margin-left:auto}
  .lichtschalter button{min-height:38px;padding:.35rem .75rem;font-size:.7rem}

  /* Ein bildschirmfüllender Kopf ist auf dem Telefon verschenkter Platz */
  .hero{min-height:auto;padding-top:1.5rem;padding-bottom:3.2rem}
  .seitenkopf{padding-top:2.2rem}
  section{padding:3.4rem 0}
  section[id],div[id]{scroll-margin-top:1rem}
  .nummer{font-size:5.5rem;top:1rem;opacity:.05}
}

@media(max-width:640px){
  /* Zweispaltige Logbücher werden einspaltig — sonst wird die rechte Spalte
     zur Silbenwurst aus zwei Wörtern je Zeile */
  .log dl{grid-template-columns:1fr;gap:0}
  .log dt{padding-top:1rem;font-size:.71rem}
  .log dd{padding-bottom:.55rem;margin-top:.2rem}

  .buddels{grid-template-columns:1fr}
  .feldkarte{min-height:0;padding:1.9rem 1.5rem 1.6rem}
  .feldkarte .sperre{padding-top:1.5rem}
  .feldkarte .wappen{width:74%;opacity:.05}
  .arbeit .buehne{padding:1.8rem 1.2rem;min-height:150px}
  .arbeit .buehne img{max-height:88px}
  .buchzeile{padding:2.2rem 0}
  .buchzeile .cover{max-width:190px}
  .reihe-kopf{gap:.4rem}
  .prosa .nr{grid-template-columns:2.1rem 1fr;gap:0 .3rem}
  .zitat q{max-width:none}
  .schluss{font-size:2.3rem;line-height:1;margin-top:2.6rem}
  .signetfuss{gap:1rem;margin-top:2.4rem}
  .werkbank{font-size:.66rem;gap:.55rem;letter-spacing:.08em}
  .stationen li,.leistungen li{gap:.2rem .9rem}
  .knopf{padding:.9rem 1.3rem;font-size:.74rem}
}

/* Vier Markennamen in einer Zeile: Ab hier wird die Navigation enger
   gesetzt, damit „Spirits Publishing Consulting Design“ auf ein übliches
   Telefon passt (rund 348 nutzbare Pixel) statt auf zwei Zeilen zu rutschen.
   Der Lichtschalter rückt dann von allein in die Zeile darunter. */
@media(max-width:620px){
  .kopf nav{gap:.15rem 1rem}
  .kopf nav a{font-size:.72rem;letter-spacing:.06em}
}

@media(max-width:480px){
  .fussraster{grid-template-columns:1fr;gap:1.6rem}
  .teil{font-size:1.6rem}
  .buchdaten span,.buddel .zahlen span{font-size:.64rem;padding:.26rem .5rem}
  .marke{font-size:.8rem;letter-spacing:.08em}
  .kopf nav{gap:.15rem .85rem}
  .kopf nav a{font-size:.7rem;letter-spacing:.05em}
}

/* ── MUSTERBRIEF ───────────────────────────────────────────────────────────
   Früher standen hier Punktreihen aus 50 Zeichen. Auf einem Telefon ist so
   eine Reihe ein einziges unteilbares Wort und reißt die Seite auf.
   Jetzt: Beschriftung plus eine gezeichnete Linie. Bricht sauber um,
   lässt sich ausdrucken und von Hand ausfüllen.
   ─────────────────────────────────────────────────────────────────────────── */
.musterbrief{font-family:var(--mono);font-size:.84rem;line-height:1.85}
.musterbrief p{font-family:var(--mono);font-size:.84rem;line-height:1.85;
  max-width:none;color:var(--tinte)}
.musterbrief .anschrift{color:var(--mild);margin-bottom:1.4rem}
.linien{list-style:none;margin:1.4rem 0 1.2rem;padding:0}
.linien li{margin-bottom:1.25rem}
.linien span{display:block;font-size:.7rem;letter-spacing:.12em;
  text-transform:uppercase;color:var(--leise);margin-bottom:.35rem}
.linien i{display:block;height:1.5rem;border-bottom:1px solid var(--linie);
  font-style:normal}
.musterbrief .klein{font-size:.72rem;color:var(--leise);margin:0}

/* Höhenangaben in vh sind auf dem Telefon eine Falle: 13vh sind auf einem
   hohen Schirm über 110 Pixel — oben und unten. Zwischen zwei Abschnitten
   entsteht so ein Loch von über 200 Pixeln, durch das man erst mal
   hindurchscrollt. Auf dem Telefon deshalb feste, knappe Werte. */
@media(max-width:860px){
  .zitat,.zitatbuehne{padding-block:clamp(2.2rem,7vh,4rem)}
}

/* ══ MOBILE ÜBERSCHRIFTEN UND NAVIGATION — Korrektur ══════════════════════

   Zwei Fehler aus dem ersten Mobil-Umbau:

   1) Die Überschriften tragen fest gesetzte Zeilenbreiten (max-width in ch).
      Auf dem Rechner ist das die Gestaltung — kurze, harte Zeilen neben einer
      zweiten Spalte. Einspaltig auf dem Telefon steht die Spalte aber allein,
      der Platz wäre da, und die Breitenbremse erzwingt trotzdem eine Trennung:
      „EINE PER-SON", „BÜCHER, DIE ETWAS SA-GEN". Also weg damit — die
      Überschrift darf die volle Spalte nutzen. Das !important ist nötig, weil
      die Breiten als style-Attribut direkt im HTML stehen.

   2) Die Nebenlinks der Navigation waren ab 1120 bzw. 1040 Pixeln ausgeblendet
      — sinnvoll, solange alles in eine Zeile musste. Seit die Kopfzeile
      zweizeilig umbricht, ist der Platz da. Auf liekedelers blieb sonst nur
      „Member's Room" stehen, Shop und Termine fehlten ganz.
   ══════════════════════════════════════════════════════════════════════════ */
@media(max-width:860px){
  h1,h2,h3{max-width:none!important}
  /* Silbentrennung NUR hier. Am Rechner ist genug Platz — dort hat sie die
     Wortmarke zerlegt („DE-LER'S“). Marken werden nie getrennt. */
  h1,h2,h3{hyphens:auto;-webkit-hyphens:auto}
  .wortmarke,.marke,.schluss,.laufband{hyphens:none;-webkit-hyphens:none}
  /* Einspaltig ist der Platz knapper: bei 390 px Schirm bleiben rund 348 px
     nutzbare Breite. 64vw = 250 px lässt Luft und bleibt lesbar. */
  .seitenkopf .signet{width:min(64vw,262px)}
  .signetfuss img{width:min(46vw,150px)}
  .seitenkopf h1{font-size:clamp(2.3rem,7.4vw,3.4rem)}
  h2{font-size:clamp(2rem,6.4vw,3rem)}
  .kopf nav a.verstecken{display:inline-flex}
}