/* ─────────────────────────────────────────────────────────────
   Contena — Stilbasis „Schwarz auf Weiß"  (v4, 2026-09-07)

   Idee: Ein Versprechen, das man schwarz auf weiß bekommt.
   Nur Schwarz, Weiß und Grau. Keine Akzentfarbe, keine Karten,
   keine Schatten. Listen sind Tabellen mit Haarlinien (Beleg-Raster).
   Eine Schriftfamilie (Public Sans, self-hosted), eine Bewegung
   (die Adresszeile im Hero), sonst steht alles still.

   Bühnen: jede Sektion trägt .hell oder .dunkel — die Klasse setzt
   die Variablen um, die Kinder benutzen nur Variablen.
   ───────────────────────────────────────────────────────────── */

:root{
  --sans:'Public Sans',system-ui,-apple-system,'Segoe UI',Roboto,Arial,sans-serif;
  /* Fraunces: eine Serife mit optischen Groessen. Ueberschriften leicht (300–400),
     eng gesetzt — das ist der Unterschied zwischen Werkzeug und Haus. */
  --serif:'Fraunces',Georgia,'Times New Roman',serif;
  --rahmen:1280px;
  --rand:48px;
  --r:0px;                       /* keine gerundeten Ecken — Kanten, nicht Kissen */
  /* Standard-Bühne: warmes Schwarz, kein Bildschirmschwarz. Schrift gebrochen weiß. */
  --bg:#0f0e0c; --fg:#ece8e0; --fg-2:#a8a49c; --fg-3:#7a766f;
  --linie:rgba(236,232,224,.16); --linie-2:rgba(236,232,224,.08); --feld:rgba(236,232,224,.05);
  --fokus:#ece8e0;
}
.dunkel{
  /* Ein Ton fuer die ganze Seite. Frueher reines Schwarz als Kontrast zur warmen Grundbuehne —
     Christoph (19.09.): „die schwarzen Hintergruende wechseln, sollen wir uns festlegen?" Ja. */
  --bg:#0f0e0c; --fg:#ece8e0; --fg-2:#a8a49c; --fg-3:#7a766f;
  --linie:rgba(236,232,224,.16); --linie-2:rgba(236,232,224,.08); --feld:rgba(236,232,224,.05);
  --fokus:#ece8e0;
  background:var(--bg); color:var(--fg);
}
.hell{
  --bg:#0f0e0c; --fg:#ece8e0; --fg-2:#a8a49c; --fg-3:#7a766f;
  --linie:rgba(236,232,224,.16); --linie-2:rgba(236,232,224,.08); --feld:rgba(236,232,224,.05);
  --fokus:#ece8e0;
  background:var(--bg); color:var(--fg);
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{background:#0f0e0c;color:#ece8e0;font-family:var(--sans);font-size:17px;line-height:1.55;
     -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;overflow-x:hidden;
     font-variant-numeric:tabular-nums}
a{color:inherit;text-decoration:none}
img,svg{display:block;max-width:100%}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
::selection{background:#ece8e0;color:#0f0e0c}
.dunkel ::selection{background:#ece8e0;color:#0f0e0c}
:focus-visible{outline:2px solid var(--fokus);outline-offset:3px;border-radius:2px}

.rahmen{max-width:var(--rahmen);margin:0 auto;padding:0 max(var(--rand),env(safe-area-inset-right)) 0 max(var(--rand),env(safe-area-inset-left))}
.rahmen-text{max-width:760px;margin:0 auto;padding:0 max(var(--rand),env(safe-area-inset-right)) 0 max(var(--rand),env(safe-area-inset-left))}
@media(max-width:720px){:root{--rand:22px}}
@media(max-width:360px){:root{--rand:18px}}
/* Große Monitore: breiterer Rahmen, damit die Seite nicht verloren wirkt */
@media(min-width:1800px){:root{--rahmen:1480px}}
@media(min-width:2300px){:root{--rahmen:1680px;--rand:64px}}

/* ── Schrift ─────────────────────────────────────────── */
h1,h2,h3,h4{font-weight:600;letter-spacing:-.02em;text-wrap:balance}
h1,h2{font-family:var(--serif);font-weight:400;letter-spacing:-.03em;font-variation-settings:"opsz" 144}
h1.display{font-size:clamp(56px,8.8vw,128px);line-height:.94;letter-spacing:-.04em;font-weight:300}
@media(max-width:370px){h1.display{font-size:44px}h1.titel{font-size:34px}h2{font-size:30px}}
/* Handy quer (niedrige Höhe): Hero kompakter, damit der Einstieg nicht nur aus Überschrift besteht */
@media(max-height:520px) and (orientation:landscape){h1.display{font-size:clamp(40px,6vw,64px)}.hero{padding:36px 0 44px!important}.hero h1{margin-bottom:24px!important}}
h1.titel{font-size:clamp(40px,6vw,84px);line-height:.98;letter-spacing:-.035em;font-weight:300}
h2{font-size:clamp(34px,4.6vw,62px);line-height:1.02;letter-spacing:-.03em;max-width:20ch}
h3{font-size:22px;line-height:1.25;letter-spacing:-.015em}
h4{font-size:17px;line-height:1.35;letter-spacing:-.01em}
p{max-width:64ch}
.lede{font-size:clamp(18px,1.6vw,21px);line-height:1.45;color:var(--fg-2);max-width:46ch}
.klein{font-size:14.5px;line-height:1.5;color:var(--fg-2)}
.grau{color:var(--fg-2)}
strong,b{font-weight:600;color:var(--fg)}

/* ── Kleine Zeile ueber einer Ueberschrift, gesperrt gesetzt ── */
.marke-zeile{font-size:12.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--fg-3);
  font-weight:500;margin-bottom:18px}
/* Textlink mit Pfeil — statt eines zweiten Knopfes */
.pfeil{display:inline-flex;align-items:center;gap:10px;font-weight:500;font-size:16px;
  border-bottom:1px solid transparent;padding-bottom:2px;transition:border-color .2s}
.pfeil::after{content:"→";transition:transform .25s cubic-bezier(.2,.8,.2,1)}
.pfeil:hover{border-color:var(--fg)}
.pfeil:hover::after{transform:translateX(4px)}

/* ── Kopfzeile ───────────────────────────────────────── */
.kopf{position:sticky;top:0;z-index:50;background:rgba(15,14,12,.88);color:#ece8e0;
      border-bottom:1px solid rgba(236,232,224,.14);backdrop-filter:saturate(1.2) blur(8px)}
.kopf .rahmen{display:flex;align-items:center;height:62px;gap:28px}
.logo{display:flex;align-items:center;gap:10px;flex-shrink:0}
.logo .mk{width:26px;height:26px;color:currentColor;flex-shrink:0}
.logo .wm{font-weight:600;font-size:19px;letter-spacing:-.03em;color:currentColor}
/* Die Marke zeichnet sich beim Laden selbst (ein Strich: Deckel, Wand, Boden) */
.logo .mk path{stroke-dasharray:58;stroke-dashoffset:58;animation:zeichnen .8s cubic-bezier(.4,0,.2,1) .15s forwards}
.logo .wm{opacity:0;transform:translateX(-5px);animation:erscheinen .5s ease-out .55s forwards}
html.mit-intro .kopf .logo .mk path{animation-delay:1.05s}
html.mit-intro .kopf .logo .wm{animation-delay:1.4s}
@keyframes zeichnen{to{stroke-dashoffset:0}}
@keyframes nachzeichnen{from{stroke-dashoffset:58}to{stroke-dashoffset:0}}
@keyframes erscheinen{to{opacity:1;transform:none}}

/* Marken-Intro (einmal je Sitzung, per Skript eingefügt) */
.intro{position:fixed;inset:0;z-index:100;background:#0f0e0c;display:grid;place-items:center;pointer-events:none;
       animation:intro-weg .45s ease .95s forwards}
.intro svg{width:min(40vw,190px);height:auto}
.intro path{stroke-dasharray:58;stroke-dashoffset:58;animation:zeichnen .7s cubic-bezier(.4,0,.2,1) .1s forwards}
@keyframes intro-weg{to{opacity:0;visibility:hidden}}
.kopf nav{display:flex;align-items:center;gap:2px;margin-left:auto}
.kopf nav a{font-size:15px;font-weight:500;color:#a8a49c;padding:8px 12px;border-radius:var(--r)}
.kopf nav a:hover{color:#ece8e0}
.kopf nav a.anmelden{display:grid;place-items:center;width:38px;height:38px;padding:0;color:#7a766f}
.kopf nav a.anmelden svg{width:17px;height:17px}
.kopf nav a.anmelden:hover{color:#ece8e0}
.kopf nav .knopf{margin-left:10px;min-height:38px;padding:0 16px;font-size:14.5px;
                 background:#ece8e0;color:#0f0e0c;border-color:#ece8e0}
.kopf nav .knopf:hover{background:#fff;border-color:#fff}
.menue{display:none;margin-left:auto;align-items:center;gap:8px;height:38px;padding:0 4px;
       font-size:15px;font-weight:500;color:#ece8e0}
.menue svg{width:20px;height:20px}
.menue .zu{display:none}
@media(max-width:900px){
  .kopf nav{display:none;position:absolute;top:62px;left:0;right:0;
            flex-direction:column;align-items:stretch;gap:0;margin:0;
            background:#0f0e0c;border-bottom:1px solid rgba(236,232,224,.14);
            padding:8px var(--rand) 20px}
  .kopf nav a{padding:14px 0;border-bottom:1px solid rgba(236,232,224,.1);border-radius:0;font-size:17px}
  .kopf nav a.anmelden{width:auto;height:auto;padding:14px 0;display:flex;gap:10px;justify-content:flex-start}
  .kopf nav a.anmelden::after{content:"Interner Bereich"}
  .kopf nav .knopf{margin:16px 0 0;justify-content:center;min-height:48px;font-size:16px;border-bottom:0}
  .menue{display:inline-flex}
  .kopf.offen nav{display:flex}
  .kopf.offen .menue .auf{display:none}
  .kopf.offen .menue .zu{display:block}
}

/* Touch-Geräte: Ziele mindestens 44px hoch */
@media(pointer:coarse){
  .kopf nav a{padding:12px 12px}
  .kopf nav a.anmelden{width:44px;height:44px}
  .fuss .spalte a{padding:9px 0}
  .fuss .unten a{display:inline-block;padding:8px 0}
  .schluss .mail{padding-bottom:10px}
}

/* ── Knöpfe ──────────────────────────────────────────── */
.knopf{display:inline-flex;align-items:center;justify-content:center;gap:8px;
       min-height:48px;padding:0 24px;border-radius:var(--r);
       font-weight:600;font-size:16px;line-height:1;white-space:nowrap;
       background:var(--fg);color:var(--bg);border:1px solid var(--fg);
       transition:background .15s,border-color .15s,color .15s}
.knopf:hover{background:var(--fg-2);border-color:var(--fg-2)}
.knopf.leise{background:transparent;color:var(--fg);border:0;padding:0 4px;min-height:0;
             font-weight:500;gap:10px;border-bottom:1px solid transparent;border-radius:0;
             transition:border-color .2s}
.knopf.leise::after{content:"→";transition:transform .25s cubic-bezier(.2,.8,.2,1)}
.knopf.leise:hover{background:transparent;border-color:var(--fg)}
.knopf.leise:hover::after{transform:translateX(4px)}
.knopf.leise.gross{font-size:16px}
.knopf.gross{min-height:56px;padding:0 30px;font-size:17px}
.knopfreihe{display:flex;gap:12px;flex-wrap:wrap}
@media(max-width:480px){.knopfreihe{flex-direction:column;align-items:stretch}.knopfreihe .knopf{width:100%}}

/* ── Abschnitte ──────────────────────────────────────── */
.abschnitt{padding:clamp(96px,12vh,144px) 0}
.abschnitt.eng{padding:80px 0}
.abschnitt+.abschnitt{border-top:1px solid var(--linie)}
.kopfzeile{margin-bottom:56px;display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);
           gap:32px 64px;align-items:end}
.kopfzeile .lede{max-width:44ch}
/* Die gesperrte kleine Zeile nimmt die ganze erste Reihe — sonst rutscht die Ueberschrift
   in die rechte Spalte und die Zeile steht links allein. */
.kopfzeile .marke-zeile{grid-column:1/-1;margin-bottom:0}
@media(max-width:900px){
  .abschnitt{padding:80px 0}
  .abschnitt.eng{padding:64px 0}
  .kopfzeile{grid-template-columns:1fr;gap:20px;margin-bottom:40px}
}

/* ── Beleg-Raster: Zellen mit Haarlinien ─────────────── */
.raster{display:grid;gap:1px;background:var(--linie);
        border-top:1px solid var(--linie);border-bottom:1px solid var(--linie)}
.raster>*{background:var(--bg);padding:34px 30px 36px;min-width:0}
.raster>*:first-child{padding-left:0}
/* Das aeussere Feld links und rechts bleibt ohne Rand — das Raster steht offen im Satzspiegel,
   nicht als Kasten darin. Innen trennen Haarlinien. */
.raster.s2{grid-template-columns:repeat(2,minmax(0,1fr))}
.raster.s3{grid-template-columns:repeat(3,minmax(0,1fr))}
.raster.s4{grid-template-columns:repeat(4,minmax(0,1fr))}
.raster.s6{grid-template-columns:repeat(6,minmax(0,1fr))}
.raster h3{margin-bottom:12px}
.raster p{color:var(--fg-2);font-size:16px;line-height:1.55}
.raster .ikon{width:22px;height:22px;margin-bottom:34px;color:var(--fg-2)}
.raster .ikon svg{width:22px;height:22px}
.raster .nr{font-family:var(--serif);font-weight:300;font-size:44px;line-height:1;
            letter-spacing:-.03em;color:var(--fg-3);margin-bottom:26px}
@media(max-width:1080px){
  .raster.s6,.raster.s4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .raster.s3{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:600px){
  .raster.s2,.raster.s3,.raster.s4,.raster.s6{grid-template-columns:1fr}
  .raster>*{padding:26px 22px}
  .raster .ikon,.raster .nr{margin-bottom:22px}
}

/* ── Listen mit Haken / Kreuz ────────────────────────── */
.haken{list-style:none;display:flex;flex-direction:column;gap:10px}
.haken li{display:flex;gap:12px;align-items:flex-start;font-size:16px;color:var(--fg-2)}
.haken li::before{content:"";flex:0 0 18px;height:18px;margin-top:4px;
  background:currentColor;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12.5l5 5L20 6.5'/%3E%3C/svg%3E") center/contain no-repeat;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12.5l5 5L20 6.5'/%3E%3C/svg%3E") center/contain no-repeat;
  color:var(--fg)}
.haken.kreuz li::before{
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M6 6l12 12M18 6L6 18'/%3E%3C/svg%3E");
          mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M6 6l12 12M18 6L6 18'/%3E%3C/svg%3E");
  color:var(--fg-3)}

/* ── Schluss (Aufforderung) ──────────────────────────── */
.schluss{padding:128px 0}
.schluss h2{max-width:16ch;margin-bottom:22px}
.schluss .lede{margin-bottom:36px}
.schluss .kontakte{display:flex;flex-wrap:wrap;gap:16px 48px;margin-top:44px}
.schluss .mail{display:inline-block;font-size:clamp(20px,2.6vw,34px);
               font-weight:500;letter-spacing:-.03em;border-bottom:1px solid var(--linie);padding-bottom:6px}
.schluss .mail:hover{border-color:var(--fg)}
@media(max-width:900px){.schluss{padding:88px 0}}

/* ── Fuß ─────────────────────────────────────────────── */
.fuss{border-top:1px solid var(--linie);padding:64px 0 40px}
.marke-gross{gap:16px;margin-bottom:22px}
.marke-gross .mk{width:56px;height:56px}
.marke-gross .wm{font-size:40px;letter-spacing:-.04em}
.marke-gross .mk path,.marke-gross .wm{animation:none}
.marke-gross.zeichne .mk path{animation:zeichnen .9s cubic-bezier(.4,0,.2,1) forwards}
.marke-gross.zeichne .wm{animation:erscheinen .6s ease-out .5s forwards}
.fuss .oben{display:grid;grid-template-columns:minmax(0,1.6fr) repeat(4,minmax(0,1fr));gap:40px 32px;
            padding-bottom:48px;border-bottom:1px solid var(--linie)}
.fuss .lic{font-size:14.5px;color:var(--fg-2);max-width:36ch;line-height:1.6}
.fuss h4{font-size:14px;font-weight:600;color:var(--fg);margin-bottom:14px}
.fuss .spalte a{display:block;font-size:15px;color:var(--fg-2);padding:4px 0}
.fuss .spalte a:hover{color:var(--fg)}
.fuss .unten{display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px 24px;
             padding-top:24px;font-size:13.5px;color:var(--fg-3)}
.fuss .unten a{color:var(--fg-2)}
.fuss .unten a:hover{color:var(--fg)}
.fuss .unten span+span a+a{margin-left:18px}
@media(max-width:900px){.fuss .oben{grid-template-columns:repeat(2,minmax(0,1fr))}
  .fuss .oben>:first-child{grid-column:1/-1}}
@media(max-width:480px){.fuss .oben{grid-template-columns:1fr}}

/* ── Enthüllen beim Scrollen (einmalig, per IntersectionObserver .sichtbar) ── */
.enthuellen{opacity:0;transform:translateY(18px);transition:opacity .7s cubic-bezier(.2,.7,.2,1),transform .7s cubic-bezier(.2,.7,.2,1)}
.enthuellen.sichtbar{opacity:1;transform:none}
.enthuellen>[style*="--i"]{transition-delay:calc(var(--i) * 70ms)}
.staffel>*{opacity:0;transform:translateY(16px);transition:opacity .6s cubic-bezier(.2,.7,.2,1),transform .6s cubic-bezier(.2,.7,.2,1)}
.staffel.sichtbar>*{opacity:1;transform:none}
.staffel.sichtbar>*:nth-child(1){transition-delay:.0s}.staffel.sichtbar>*:nth-child(2){transition-delay:.08s}
.staffel.sichtbar>*:nth-child(3){transition-delay:.16s}.staffel.sichtbar>*:nth-child(4){transition-delay:.24s}
.staffel.sichtbar>*:nth-child(5){transition-delay:.32s}.staffel.sichtbar>*:nth-child(6){transition-delay:.4s}
/* Zeilen, die aus einer Maske hochgleiten (große Aussagen) */
.zeile{display:block;overflow:hidden;padding-bottom:.08em}
.zeile>span{display:block;transform:translateY(110%);transition:transform .9s cubic-bezier(.2,.8,.2,1)}
.sichtbar .zeile>span{transform:none}
.sichtbar .zeile:nth-child(2)>span{transition-delay:.12s}.sichtbar .zeile:nth-child(3)>span{transition-delay:.24s}
/* Große Marke, die sich beim Scrollen zeichnet */
.marke-zeichnung path{stroke-dasharray:58;stroke-dashoffset:58}
.sichtbar .marke-zeichnung path,.marke-zeichnung.sichtbar path{animation:zeichnen 1.4s cubic-bezier(.4,0,.2,1) .1s forwards}

/* ── Bewegung ────────────────────────────────────────── */
@media(prefers-reduced-motion:reduce){
  .enthuellen,.staffel>*{opacity:1;transform:none}
  .zeile>span{transform:none}
  .marke-zeichnung path{stroke-dasharray:none;stroke-dashoffset:0}
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
  /* Marke ohne Animation sofort vollständig zeigen */
  .logo .mk path,.intro path{stroke-dasharray:none;stroke-dashoffset:0}
  .logo .wm{opacity:1;transform:none}
}

/* ── Mailadresse im Schlussabschnitt: Serife, eine Linie darunter ── */
.schluss .mail{display:inline-block;margin-top:36px;font-family:var(--serif);font-size:clamp(22px,2.6vw,30px);
  letter-spacing:-.02em;border-bottom:1px solid var(--fg);padding-bottom:3px;font-weight:400}