/* ══════════════════════════════════════════════════════════════════════
   Mainsicht — „DIE WELTEN"
   Die Seite wechselt beim Scrollen ihre Haut. Vier Entwürfe für vier
   Betriebe schieben sich übereinander, dann fallen ihre vier Striche
   zu einem zusammen.
   Mechanik: alle .welt sind Geschwister mit position:sticky;top:0 —
   jede klebt oben fest, die nächste schiebt sich darüber.
   ══════════════════════════════════════════════════════════════════════ */

/* ── Schriften, lokal. Kein CDN, kein Google-Aufruf zur Laufzeit. ── */
@font-face{font-family:Archivo;src:url(assets/fonts/archivo-var.woff2) format("woff2");font-weight:100 900;font-stretch:62% 125%;font-style:normal;font-display:swap}
@font-face{font-family:Schibsted;src:url(assets/fonts/schibsted-latin.woff2) format("woff2");font-weight:400 900;font-style:normal;font-display:swap}
@font-face{font-family:Zilla;src:url(assets/fonts/zillaslab-700.woff2) format("woff2");font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:Mono;src:url(assets/fonts/spacemono-400.woff2) format("woff2");font-weight:400;font-style:normal;font-display:swap}

:root{
  --tinte:#111111;
  --papier:#faf9f7;
  --leise:#5b5b5b;

  --knall:#e8005a;      /* der Strich aus dem Logo — Marke, fuer Flaechen und Striche */
  --knall-text:#bd0049; /* abgedunkelt fuer Schrift auf hellem Grund (6,1:1) */
  --knall-hell:#ff7fae; /* aufgehellt fuer Schrift auf dunklem Grund (7,4:1) */
  --bone:#f2efe9;    /* das Bone aus dem Logo */
  --strom:#2f5bff;      /* die Phase — fuer Flaechen und Striche */
  --strom-text:#7e9bff; /* aufgehellt fuer Schrift auf Schwarz (7,0:1) */
  --gelb:#f4c400;    /* Ortstafel */
  --rot:#d4211a;     /* der Schnitt */

  --halt:170vh;      /* Höhe einer Welt: 100vh Bild + 70vh Verweildauer */
  --auftakt:100svh;  /* Höhe des Auftakts — die Scroll-Bereiche unten rechnen damit */
  --bild:clamp(13rem,31vw,31rem);  /* der feste Bildplatz, in jeder Welt gleich */
  --rand:clamp(1.1rem,4.5vw,4.5rem);
  --schiene:clamp(2.2rem,5vw,4.4rem);
  --achse:calc(var(--schiene) + var(--rand) * .4);  /* die eine linke Satzkante */
  --schwung:cubic-bezier(.16,1,.3,1);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--papier);
  color:var(--tinte);
  font-family:Schibsted,sans-serif;
  font-weight:400;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
ul{margin:0;padding:0;list-style:none}
p{margin:0}
a{color:inherit}

/* ══════════════ DIE MECHANIK ══════════════ */

.welt{
  position:sticky;
  top:0;
  height:var(--halt);
  overflow:hidden;
  background:var(--w-grund);
  color:var(--w-tinte);
}
.buehne{
  position:relative;
  height:100vh;
  height:100svh;
  padding:calc(var(--rand) * .9) calc(var(--bild) + var(--rand) * .7) calc(var(--rand) * .9 + 2.6rem) var(--achse);
  display:grid;
  grid-template-rows:1fr;
  grid-template-columns:minmax(0,1fr);
  isolation:isolate;
}

/* Der Satz ist das einzige Element im Fluss — alles andere liegt absolut
   darüber oder darunter. Jede Welt hängt ihn woanders hin. */
.satz{position:relative;z-index:3;width:100%}

/* ── die Schiene: das Einzige, was in allen Welten gleich bleibt ── */
.schiene{
  position:absolute;
  top:0;
  left:0;
  height:100%;
  width:var(--schiene);
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:space-between;
  padding:calc(var(--rand) * .9) 0;
  z-index:4;
}
.schiene__marke,.schiene__nr{
  writing-mode:vertical-rl;
  transform:rotate(180deg);
  font-family:Mono,monospace;
  font-size:clamp(.7rem,1.6vw,.78rem);
  letter-spacing:.24em;
  text-transform:uppercase;
  opacity:.62;
}

/* ── die Fahne unten: benennt, was man sieht. Kein Werbetext. ── */
.fahne{
  position:absolute;
  left:var(--achse);
  bottom:calc(var(--rand) * .8);
  font-family:Mono,monospace;
  font-size:clamp(0.7rem,1.6vw,.78rem);
  letter-spacing:.1em;
  opacity:.5;
  z-index:4;
  padding-right:var(--rand);
}

/* ── die Male: je Welt ein Strich, der ihre Handschrift ist ── */
.mal{position:absolute;pointer-events:none;z-index:2}

/* ══════════════ 01 · STROM ══════════════
   Tiefschwarz, Riesenzahl bricht links raus, Blitz schneidet durch.  */

.welt--strom{--w-grund:#08080a;--w-tinte:#f2f2f0;--w-strich:var(--strom)}
.satz--strom{align-self:end}
.riese--strom{
  font-family:Archivo,sans-serif;
  font-variation-settings:"wght" 900,"wdth" 125;
  font-size:clamp(4.6rem,24vw,21rem);
  line-height:.74;
  letter-spacing:-.045em;
  margin-left:calc(-1 * var(--achse) - .02em);
  margin-bottom:.02em;
}
.riese--strom .einheit{
  font-variation-settings:"wght" 500,"wdth" 88;
  font-size:.24em;
  vertical-align:.86em;
  margin-left:.12em;
  letter-spacing:0;
  color:var(--strom-text);
}
.liste--strom{
  display:flex;
  flex-wrap:wrap;
  gap:.1em 1.6em;
  font-family:Archivo,sans-serif;
  font-variation-settings:"wght" 500,"wdth" 96;
  font-size:clamp(.82rem,2.1vw,1.12rem);
  letter-spacing:.02em;
  margin-top:.9em;
}
.liste--strom li::before{content:"";display:inline-block;width:.44em;height:.44em;background:var(--strom);margin-right:.5em;vertical-align:.06em}
.ruf--strom{
  position:absolute;
  top:0;
  right:0;
  max-width:11ch;
  text-align:right;
  font-family:Archivo,sans-serif;
  font-variation-settings:"wght" 700,"wdth" 78;
  font-size:clamp(1.1rem,3.4vw,2.1rem);
  line-height:1.02;
  letter-spacing:-.01em;
}
.satz--strom .dach{
  margin-bottom:1.1em;
  font-family:Mono,monospace;
  font-size:clamp(.7rem,1.7vw,.8rem);
  letter-spacing:.3em;
  text-transform:uppercase;
  color:var(--strom-text);
}
.mal--blitz{
  inset:0 auto 0 29%;
  width:min(38vw,360px);
  height:100%;
  color:var(--strom);
  opacity:.95;
}

/* ══════════════ 02 · HAUT ══════════════
   Fast leer. Eine Haarlinie kreuzt. Alles sehr weit gesperrt.  */

.welt--haut{--w-grund:#fbfaf9;--w-tinte:#0e0e0e;--w-strich:#0e0e0e}
.satz--haut{align-self:center;text-align:center;display:flex;flex-direction:column;align-items:center}
.riese--haut{
  font-family:Schibsted,sans-serif;
  font-weight:400;
  font-size:clamp(4.2rem,19vw,17rem);
  line-height:.9;
  letter-spacing:.06em;
  margin-right:-.06em;
}
.liste--haut{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:.4em 2.4em;
  margin-top:clamp(2rem,7vh,4.4rem);
  font-family:Schibsted,sans-serif;
  font-weight:400;
  font-size:clamp(0.7rem,1.7vw,.84rem);
  letter-spacing:.42em;
  text-transform:uppercase;
}
.satz--haut .dach{
  font-family:Mono,monospace;
  font-size:clamp(0.7rem,1.6vw,.76rem);
  letter-spacing:.34em;
  text-transform:uppercase;
  color:var(--leise);
  margin-bottom:clamp(1.6rem,6vh,3.4rem);
}
.ruf--haut{
  margin-top:clamp(1.4rem,4vh,2.4rem);
  font-size:clamp(.78rem,1.9vw,.92rem);
  letter-spacing:.16em;
  color:var(--leise);
}
.mal--haar{
  inset:0;
  width:100%;
  height:100%;
  color:#0e0e0e;
  opacity:.85;
}

/* ══════════════ 03 · BAHN ══════════════
   Ortstafel-Gelb. Schmalschrift wie auf Schildern. Fahrbahn rechts.  */

.welt--bahn{--w-grund:#f4c400;--w-tinte:#111111;--w-strich:#fbfaf9}
.satz--bahn{align-self:center}
.riese--bahn{
  font-family:Archivo,sans-serif;
  font-variation-settings:"wght" 800,"wdth" 66;
  font-size:clamp(2.6rem,8vw,6rem);
  line-height:.86;
  letter-spacing:.01em;
  text-transform:uppercase;
  display:flex;
  align-items:baseline;
  gap:.14em;
  flex-wrap:wrap;
}
.riese--bahn .klasse{
  font-variation-settings:"wght" 900,"wdth" 125;
  font-size:clamp(7rem,26vw,21rem);
  line-height:.72;
  letter-spacing:-.05em;
}
.liste--bahn{
  display:flex;
  flex-wrap:wrap;
  gap:.3em .55em;
  margin-top:1.1em;
  font-family:Archivo,sans-serif;
  font-variation-settings:"wght" 700,"wdth" 70;
  font-size:clamp(.8rem,2.2vw,1.15rem);
  letter-spacing:.06em;
}
.liste--bahn li{padding-bottom:.16em;border-bottom:3px solid var(--tinte)}
.satz--bahn .dach{
  font-family:Mono,monospace;
  font-size:clamp(.7rem,1.7vw,.8rem);
  letter-spacing:.3em;
  text-transform:uppercase;
  margin-bottom:1.1em;
}
.ruf--bahn{
  margin-top:1.6em;
  font-family:Archivo,sans-serif;
  font-variation-settings:"wght" 500,"wdth" 80;
  font-size:clamp(.86rem,2.2vw,1.08rem);
}
.mal--bahn{
  top:0;
  bottom:0;
  right:calc(var(--bild) + clamp(1rem,4vw,4.5rem));
  width:clamp(26px,3.6vw,46px);
  height:100%;
  color:#fbfaf9;
}

/* ══════════════ 04 · KLINGE ══════════════
   Kühles Papier, Slab, ein roter Schnitt quer durchs Bild.  */

.welt--klinge{--w-grund:#e6e4df;--w-tinte:#141414;--w-strich:var(--rot)}
.satz--klinge{align-self:center}
.riese--klinge{
  font-family:Zilla,serif;
  font-weight:700;
  font-size:clamp(5.4rem,24vw,20rem);
  line-height:.82;
  letter-spacing:-.025em;
  margin-left:-.04em;
}
.liste--klinge{
  position:absolute;
  right:0;
  top:.4em;
  text-align:right;
  font-family:Zilla,serif;
  font-weight:700;
  font-size:clamp(.94rem,2.6vw,1.35rem);
  line-height:1.5;
}
.liste--klinge li + li{margin-top:.05em}
.satz--klinge .dach{
  font-family:Mono,monospace;
  font-size:clamp(.7rem,1.7vw,.8rem);
  letter-spacing:.3em;
  text-transform:uppercase;
  color:#a81208;
  margin-bottom:.9em;
}
.ruf--klinge{
  margin-top:.7em;
  font-family:Zilla,serif;
  font-weight:700;
  font-size:clamp(1rem,2.8vw,1.5rem);
  max-width:16ch;
  line-height:1.18;
}
.mal--schnitt{
  inset:0;
  width:100%;
  height:100%;
  color:var(--rot);
}

/* ══════════════ DER ZUSAMMENFALL ══════════════
   Die vier Handschriften laufen zu einer Linie zusammen.  */

.fall{
  position:relative;
  z-index:1;
  background:var(--papier);
  padding:clamp(4rem,16vh,9rem) var(--rand) clamp(3rem,10vh,6rem) var(--achse);
  overflow-x:clip;
}
.fall__feld{
  position:relative;
  height:clamp(16rem,42vh,25rem);
  max-width:1240px;
  margin:0;
}
.strich{
  position:absolute;
  display:block;
  top:50%;
  height:4px;
  width:25%;
  transform-origin:50% 50%;
}
.strich--a{left:0;background:var(--strom);height:9px}
.strich--b{left:25%;background:var(--tinte);height:1.4px}
.strich--c{left:50%;height:9px;background:repeating-linear-gradient(90deg,var(--tinte) 0 26px,transparent 26px 46px)}
.strich--d{left:75%;background:var(--rot);height:5px}

/* ══════════════ SCHLUSS ══════════════ */

.schluss{
  position:relative;
  z-index:1;
  background:var(--papier);
  padding:0 var(--rand) clamp(3rem,9vh,6rem) var(--achse);
}
.frage{
  font-family:Schibsted,sans-serif;
  font-weight:900;
  font-size:clamp(3.1rem,15.6vw,13.6rem);
  line-height:.82;
  letter-spacing:-.05em;
  max-width:1240px;
  margin:0 0 clamp(1.6rem,5vh,3rem);
}
.marke{
  max-width:1240px;
  margin:0 0 clamp(3.4rem,12vh,8rem);
  font-family:Mono,monospace;
  font-size:clamp(.7rem,1.7vw,.82rem);
  letter-spacing:.14em;
  color:var(--leise);
}

.preise{
  max-width:1240px;
  margin:0;
  display:grid;
  gap:clamp(2.2rem,7vh,4.2rem);
}
.posten{
  display:grid;
  grid-template-columns:1fr auto;
  align-items:baseline;
  column-gap:clamp(1rem,4vw,3rem);
  border-top:1px solid rgba(17,17,17,.16);
  padding-top:.7em;
}
.posten--mitte{padding-left:clamp(0px,6vw,7rem)}
.posten__was{
  font-family:Schibsted,sans-serif;
  font-weight:500;
  font-size:clamp(1.1rem,3.6vw,2.3rem);
  letter-spacing:-.015em;
}
.posten__zahl{
  font-family:Schibsted,sans-serif;
  font-weight:900;
  font-size:clamp(2.6rem,10vw,7.5rem);
  line-height:.86;
  letter-spacing:-.045em;
  white-space:nowrap;
}
.posten__zahl .waehrung{font-size:.3em;font-weight:500;vertical-align:.9em;margin-left:.14em;letter-spacing:0}
.posten__zahl .ab{font-size:max(.72rem,.24em);font-weight:500;vertical-align:.9em;margin-right:.22em;letter-spacing:.06em;color:var(--leise)}
.posten__dazu{
  grid-column:1 / -1;
  font-family:Mono,monospace;
  font-size:clamp(.7rem,1.6vw,.78rem);
  letter-spacing:.12em;
  color:var(--leise);
  margin-top:.5em;
}

.klein{
  max-width:1240px;
  margin:clamp(2rem,6vh,3.4rem) 0 0;
  /* 52vw Rechts-Padding ist eine Geste fuer breite Schirme. Bei 390 px
     frass sie 203 von 330 px und quetschte den UStG-Satz in fuenf
     Kurzzeilen — schmal faellt sie deshalb weg (Regel unten). */
  padding-right:clamp(0px,52vw,44rem);
  font-size:clamp(.72rem,1.8vw,.82rem);
  color:var(--leise);
}

.draht{
  max-width:1240px;
  margin:clamp(4rem,14vh,9rem) 0 0;
}
.draht__nr{
  display:flex;
  align-items:center;
  gap:clamp(.6rem,2vw,1.4rem);
  text-decoration:none;
  font-family:Schibsted,sans-serif;
  font-weight:900;
  font-size:clamp(2rem,9vw,6.4rem);
  line-height:1;
  letter-spacing:-.04em;
}
.pfeil{
  width:clamp(1.5rem,3.8vw,2.7rem);
  aspect-ratio:64/24;
  flex:none;
  overflow:visible;
}
.pfeil--gross{width:clamp(1.6rem,6vw,4.6rem)}
.draht__mail{
  display:inline-block;
  margin-top:clamp(.9rem,3vh,1.8rem);
  font-size:clamp(.94rem,2.6vw,1.4rem);
  text-decoration:none;
  border-bottom:1px solid rgba(17,17,17,.3);
  padding-bottom:.08em;
}

.fuss{
  max-width:1240px;
  margin:clamp(4rem,12vh,7rem) 0 0;
  padding-top:1.3em;
  border-top:1px solid rgba(17,17,17,.16);
  display:flex;
  flex-wrap:wrap;
  gap:.5em 2.4em;
  font-family:Mono,monospace;
  font-size:clamp(.7rem,1.6vw,.78rem);
  letter-spacing:.1em;
  color:var(--leise);
}
.fuss a{text-decoration:none;border-bottom:1px solid rgba(17,17,17,.25)}
.fahne--fall{
  position:static;
  max-width:1240px;
  margin:clamp(2rem,6vh,3.4rem) 0 0;
  padding:0;
}

/* ══════════════ BEWEGUNG ══════════════
   Grundzustand ist das fertige Standbild. Bewegung ist die Zugabe.  */

@media (prefers-reduced-motion: no-preference){

  /* Eintritts-Stagger beim Laden — nur Welt 01 */
  @keyframes auftritt{from{opacity:0;transform:translateY(26px)}to{opacity:1;transform:none}}
  @keyframes blitz-ein{from{opacity:0;transform:translateY(-4%) scaleY(.94)}to{opacity:.95;transform:none}}

  .welt--strom .dach{animation:auftritt .8s var(--schwung) .05s both}
  .welt--strom .riese--strom{animation:auftritt .95s var(--schwung) .16s both}
  .welt--strom .liste--strom{animation:auftritt .9s var(--schwung) .3s both}
  .welt--strom .ruf--strom{animation:auftritt .9s var(--schwung) .42s both}
  .welt--strom .mal--blitz{animation:blitz-ein 1.1s var(--schwung) .1s both}
  .welt--strom .schiene,.welt--strom .fahne{animation:auftritt 1s var(--schwung) .55s both}

  /* Scroll-getrieben: jede Welt zeichnet ihr Mal, während sie kommt.
     Bereiche in vh, weil jede Welt genau --halt im Dokument belegt. */
  @supports (animation-timeline: scroll(root)){

    @keyframes zeichnen{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}
    @keyframes fahren{from{stroke-dashoffset:0}to{stroke-dashoffset:-540}}
    @keyframes steigen{from{opacity:0;transform:translateY(3.5rem)}46%{opacity:1}to{opacity:1;transform:none}}

    /* Der Blitz reiht sich hier ein: Welt 01 hatte bisher nur eine
       zeitgetriebene Einblendung beim Laden — die sieht niemand, weil
       die Welt beim Laden unter dem Auftakt liegt. Jetzt ZEICHNET er
       sich beim Scrollen, von oben nach unten: der Pfad beginnt bei
       y=-20 und endet bei y=920, dashoffset laeuft 1 → 0. Strom, der
       fliesst. Gleicher Bereich wie Haarlinie und Schnitt, damit die
       Welten denselben Takt haben.
       Grundzustand ist der FERTIGE Blitz (dashoffset:0) — wer ohne
       Scroll-Zeitachse oder mit reduzierter Bewegung kommt, sieht ihn
       ganz und nicht eine leere Flaeche. */
    .mal--haar path,.mal--schnitt path,.mal--blitz path{
      stroke-dasharray:1;
      stroke-dashoffset:0;
      animation:zeichnen linear both;
      animation-timeline:scroll(root);
      animation-range:calc(var(--auftakt) + var(--n) * var(--halt) - 62vh) calc(var(--auftakt) + var(--n) * var(--halt) + 16vh);
    }
    .mal--bahn path{
      animation:fahren linear both;
      animation-timeline:scroll(root);
      animation-range:calc(var(--auftakt) + var(--n) * var(--halt) - 90vh) calc(var(--auftakt) + var(--n) * var(--halt) + 70vh);
    }
    .welt--haut .satz,.welt--bahn .satz,.welt--klinge .satz{
      animation:steigen linear both;
      animation-timeline:scroll(root);
      animation-range:calc(var(--auftakt) + var(--n) * var(--halt) - 58vh) calc(var(--auftakt) + var(--n) * var(--halt) - 8vh);
    }

    /* Der Zusammenfall */
    /* Jeder Strich kommt aus dem Winkel seiner Welt:
       der Blitz steil, die Haarlinie flach, die Fahrbahn senkrecht,
       der Schnitt leicht geneigt. */
    @keyframes fall-a{from{transform:translate(-34%,-7.6rem) rotate(-71deg) scaleX(.72)}to{transform:none}}
    @keyframes fall-b{from{transform:translate(16%,-3.2rem) rotate(7deg) scaleX(1.34)}to{transform:none}}
    @keyframes fall-c{from{transform:translate(-4%,5.2rem) rotate(90deg) scaleX(.86)}to{transform:none}}
    @keyframes fall-d{from{transform:translate(26%,8.6rem) rotate(-5deg) scaleX(1.24)}to{transform:none}}

    .fall__feld{view-timeline-name:--fall;view-timeline-axis:block}
    @keyframes verloeschen{from{opacity:1}to{opacity:0}}
    .strich{
      animation:linear both,linear both;
      animation-timeline:--fall,--fall;
      animation-range:entry 4% cover 48%, cover 48% cover 62%;
    }
    .strich--a{animation-name:fall-a,verloeschen}
    .strich--b{animation-name:fall-b,verloeschen}
    .strich--c{animation-name:fall-c,verloeschen}
    .strich--d{animation-name:fall-d,verloeschen}

    @keyframes frage-ein{from{opacity:0;transform:translateY(2.4rem)}to{opacity:1;transform:none}}
    .frage{animation:frage-ein linear both;animation-timeline:view();animation-range:entry 6% cover 32%}
  }
}

/* ══════════════ SCHMAL ══════════════ */

@media (max-width:760px){
  :root{--halt:150vh}
  .ruf--strom{position:static;max-width:none;text-align:left;margin-top:1.1em}
  .satz--strom .dach{position:static;margin-bottom:.8em}
  .satz--strom{align-self:center}
  .liste--klinge{position:static;text-align:left;margin-top:1.4em;columns:2;column-gap:1.6rem}
  .posten--mitte{padding-left:0}
  .posten{grid-template-columns:1fr}
  .posten__zahl{margin-top:.06em}
  .fall__feld{height:clamp(7rem,24vh,11rem)}
  .riese--bahn{gap:.05em .3em}
  .riese--bahn .klasse{line-height:.78}
}
@media (max-width:460px){
  .schiene__marke{display:none}
  .mal--blitz{left:46%;opacity:.55}
}

/* Sehr flache Fenster: die Welten dürfen atmen, ohne zu klemmen */
@media (max-height:560px){
  .riese--strom{font-size:clamp(4rem,17vh,9rem)}
  .riese--haut{font-size:clamp(3rem,15vh,7rem)}
  .riese--bahn .klasse{font-size:clamp(4rem,17vh,9rem)}
  .riese--klinge{font-size:clamp(3.4rem,15vh,8rem)}
}

/* ══════════════════════════════════════════════════════════════════════
   DER BILDPLATZ
   In jeder Welt exakt gleich gross und gleich positioniert. Was sich
   aendert, ist nur die Behandlung — das ist der Beweis der Seite.
   ══════════════════════════════════════════════════════════════════════ */

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

.bild,.auftakt__bild{
  position:absolute;
  top:0;
  right:0;
  bottom:0;
  width:var(--bild);
  overflow:hidden;
  margin:0;
  z-index:1;
}
.bild img,.auftakt__bild img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}
.bild::after{content:"";position:absolute;inset:0;pointer-events:none}

/* Mainsichts eigene Behandlung: hartes Schwarz-Weiss, sonst nichts */
.auftakt__bild img{filter:grayscale(1) contrast(1.22);object-position:62% 50%}

/* 01 — die Phase legt sich als Licht darueber */
.bild--strom img{filter:grayscale(1) contrast(1.28) brightness(.96);object-position:56% 50%}
.bild--strom::after{background:var(--strom);mix-blend-mode:screen;opacity:.3}

/* 02 — ueberbelichtet, fast weggeblendet */
.bild--haut img{filter:grayscale(1) contrast(1) brightness(1.24)}
.bild--haut::after{background:#fbfaf9;opacity:.2}

/* 03 — auf zwei Toene gehaertet, wie ein Schild */
.bild--bahn img{filter:grayscale(1) contrast(1.82) brightness(.98);object-position:42% 50%}
.bild--bahn::after{background:var(--gelb);mix-blend-mode:multiply;opacity:.92}

/* 04 — der Schnitt faerbt mit */
.bild--klinge img{filter:grayscale(1) contrast(1.34) brightness(.86);object-position:50% 66%}
.bild--klinge::after{background:var(--rot);mix-blend-mode:color;opacity:.58}

/* ══════════════════════════════════════════════════════════════════════
   AUFTAKT
   Der Bildplatz wird hier eingefuehrt, damit die Welten ihn danach
   nur noch anders behandeln muessen.
   ══════════════════════════════════════════════════════════════════════ */

.auftakt{
  position:relative;
  min-height:100svh;
  background:var(--papier);
  color:var(--tinte);
  padding:calc(var(--rand) * 1.1) calc(var(--bild) + var(--rand) * .7) calc(var(--rand) * 1.1) calc(var(--schiene) + var(--rand) * .4);
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  gap:clamp(2rem,6vh,4rem);
  overflow:hidden;
}
.auftakt__satz{
  font-family:Schibsted,sans-serif;
  font-weight:900;
  font-size:clamp(1.95rem,5.6vw,4.9rem);
  line-height:.98;
  letter-spacing:-.038em;
  margin:0;
  text-wrap:balance;
}

/* ── die Aufforderung: grosser Text mit einem Pfeil, kein Knopf ── */
.tat__zeile{
  display:inline-flex;
  align-items:center;
  gap:clamp(.55rem,1.6vw,1.1rem);
  text-decoration:none;
  font-family:Schibsted,sans-serif;
  font-weight:900;
  font-size:clamp(1.15rem,3.1vw,2.15rem);
  letter-spacing:-.025em;
  line-height:1.05;
}
.tat__zeile span{
  border-bottom:2px solid currentColor;
  padding-bottom:.06em;
}
.tat__zeile:hover .pfeil,
.tat__zeile:focus-visible .pfeil{transform:translateX(.22em)}
.tat__zeile:focus-visible{outline:2px solid currentColor;outline-offset:.4em}
.pfeil{transition:transform .32s var(--schwung)}
.tat__klein{
  margin-top:.95em;
  font-family:Mono,monospace;
  font-size:clamp(0.7rem,1.6vw,.78rem);
  letter-spacing:.12em;
  color:var(--leise);
}

/* ── der Hinweis, dass es weitergeht ── */
.weiter{height:clamp(2.4rem,7vh,4.4rem);position:relative}
.weiter__strich{
  position:absolute;
  top:0;
  left:0;
  width:1px;
  height:100%;
  background:linear-gradient(to bottom,rgba(17,17,17,.42),rgba(17,17,17,0));
}

.tat--schluss{
  max-width:1240px;
  margin:0 0 clamp(3rem,10vh,6rem);
}

/* ══════════════ SCHMAL ══════════════ */

@media (max-width:860px){
  :root{--bild:26svh}
  .bild,.auftakt__bild{
    inset:0 0 auto 0;
    width:auto;
    height:var(--bild);
  }
  .buehne{
    padding-right:var(--rand);
    padding-top:calc(var(--bild) + var(--rand) * .9);
  }
  .auftakt{
    padding-right:var(--rand);
    padding-top:calc(var(--bild) + var(--rand) * 1.1);
  }
  .mal--bahn{right:clamp(.8rem,6vw,3rem)}
  .mal--blitz{left:38%}
  .schiene{padding-top:calc(var(--bild) + var(--rand) * .9)}
}

/* ══════════════════════════════════════════════════════════════════════
   DER FILM
   Am Bildplatz des Auftakts. Zehn Entwürfe in sechs Sekunden — die
   Behauptung und ihr Beweis stehen an derselben Stelle.
   ══════════════════════════════════════════════════════════════════════ */

.film{
  width:100%;
  display:block;
  background:var(--tinte);
}
/* Der Auftaktfilm liegt jetzt IM Aufhellen ueber seinem eigenen
   Standbild — dieselbe Technik wie beim Fenster-, Leisten- und
   Kinofilm. Grund: der Film ist auf Schwarz gerendert, und solange er
   nicht laeuft (Autoplay noch nicht gestartet, Stromsparmodus) zeigte
   das Video seinen ersten Bild — reines Schwarz. Auf schmalen Schirmen
   war das der erste Bildschirminhalt ueberhaupt: ein leerer schwarzer
   Kasten.
   Drei Zustaende: das Standbild traegt immer, der Film legt sich darueber,
   sobald er wirklich laeuft (Klasse .film--laeuft, gesetzt vom Skript am
   Seitenende). Faellt das Skript aus oder blockiert der Browser Autoplay,
   bleibt die Schmiede stehen. Kein Blendmodus — die Entwuerfe sollen in
   ihren echten Farben laufen, nicht durch das Foto scheinen. */
.auftakt__bild{isolation:isolate}
.auftakt__bild .film{
  position:relative;
  z-index:1;            /* MUSS gesetzt sein: das Standbild steht spaeter im
                           HTML und liegt sonst ueber dem Film — der laeuft
                           dann unsichtbar darunter. */
  height:100%;
  object-fit:cover;
  background:transparent;
  opacity:0;
}
/* Der Film liegt satt und ungemischt oben — die Entwürfe sollen in ihren
   echten Farben laufen, nicht durch ein Foto scheinen. Sichtbar wird er
   erst, wenn er wirklich läuft (siehe Skript unten auf der Seite).
   Bis dahin — und wenn Autoplay blockiert ist — steht das Standbild. */
.auftakt__bild .film--laeuft{opacity:1}
@media (prefers-reduced-motion: no-preference){
  .auftakt__bild .film{transition:opacity .5s var(--schwung)}
}
.auftakt__bild .standbild{
  display:block;
  position:absolute;
  z-index:0;            /* liegt hinter dem Film und traegt, bis er laeuft */
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  filter:grayscale(1) contrast(1.22);
}
.leiste__film .standbild{display:none}

@media (prefers-reduced-motion: reduce){
  .film{display:none}
  .leiste__film .standbild{display:block;width:100%;height:auto}
  /* Das Auftakt-Standbild NICHT auf width/height:auto stellen: es ist
     absolut in einer Spalte voller Hoehe — mit height:auto kollabierte es
     unter reduced-motion von 900 auf 298 px und die Spalte stand leer
     (gemessen 02.08.). Die Basisregel traegt schon alles Noetige. */
  .auftakt__bild .standbild{display:block}
}

/* ══════════════════════════════════════════════════════════════════════
   DAS ZEICHEN
   Rahmen und Buchstabe sind die eine Ebene, der Pinselstrich die andere.
   Beide liegen als Maske vor — dadurch nimmt der Strich in jeder Welt
   ihre Farbe an, ohne dass eine zweite Bilddatei nötig wäre.
   ══════════════════════════════════════════════════════════════════════ */

.zeichen{
  position:relative;
  display:block;
  flex:none;
  width:var(--zeichen-w,1.9rem);
  aspect-ratio:462/379;
  writing-mode:horizontal-tb;
}
.zeichen__rahmen,.zeichen__strich{
  position:absolute;
  inset:0;
  -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
  -webkit-mask-size:contain;mask-size:contain;
  -webkit-mask-position:center;mask-position:center;
}
.zeichen__rahmen{
  background:currentColor;
  opacity:.72;
  -webkit-mask-image:url(assets/logo/logo-rahmen.png);
  mask-image:url(assets/logo/logo-rahmen.png);
}
.zeichen__strich{
  background:var(--w-strich,var(--knall));
  -webkit-mask-image:url(assets/logo/logo-strich.png);
  mask-image:url(assets/logo/logo-strich.png);
}

/* ══════════════════════════════════════════════════════════════════════
   KI-SICHTBARKEIT
   ══════════════════════════════════════════════════════════════════════ */

.leiste{
  position:relative;
  z-index:1;
  background:#0d0d11;
  color:var(--bone);
  padding:clamp(3.4rem,12vh,7rem) var(--rand) clamp(3.4rem,12vh,7rem) var(--achse);
}
.leiste__kopf{
  max-width:1240px;
  margin:0 0 clamp(2rem,6vh,3.4rem);
}
.leiste__titel{
  margin:0;
  font-family:Schibsted,sans-serif;
  font-weight:900;
  font-size:clamp(2rem,7.2vw,5.4rem);
  letter-spacing:-.045em;
  line-height:.92;
}
.leiste__satz{
  max-width:42ch;
  margin-top:.8em;
  font-size:clamp(1rem,2.3vw,1.35rem);
  line-height:1.34;
  color:#c9c6c0;
}
.leiste__quelle{
  margin-top:1.2em;
  font-family:Mono,monospace;
  font-size:clamp(0.7rem,1.6vw,.76rem);
  letter-spacing:.14em;
  color:#7c7c85;
}
.leiste__film{max-width:1240px;margin:0 auto}
.leiste__film .film{aspect-ratio:1600/440;object-fit:cover;background:#0d0d11}
.fahne--leiste{
  position:static;
  margin-top:1.1em;
  padding:0;
  color:var(--bone);
}

/* ══════════════════════════════════════════════════════════════════════
   DER BEWEIS — gemessene Zahlen statt Behauptungen
   ══════════════════════════════════════════════════════════════════════ */

.beweis{
  position:relative;
  z-index:1;
  background:var(--papier);
  padding:clamp(4rem,15vh,9rem) var(--rand) clamp(4rem,15vh,9rem) var(--achse);
}
.beweis > *{max-width:1240px;margin-inline:0}
.beweis__dach{
  font-family:Mono,monospace;
  font-size:clamp(.7rem,1.6vw,.78rem);
  letter-spacing:.3em;
  text-transform:uppercase;
  color:var(--leise);
}
.beweis__zahl{
  display:flex;
  align-items:baseline;
  gap:.06em;
  margin-top:.4em;
  font-family:Schibsted,sans-serif;
  font-weight:900;
  font-size:clamp(3rem,15vw,12.5rem);
  line-height:.84;
  letter-spacing:-.055em;
  font-variant-numeric:tabular-nums;
}
.beweis__zahl i{font-style:normal;font-size:.42em;color:var(--knall);letter-spacing:0}
.beweis__was{
  margin-top:1.1em;
  max-width:52ch;
  font-size:clamp(.86rem,2.1vw,1.1rem);
  color:var(--leise);
}
.beweis__paar{
  display:flex;
  flex-wrap:wrap;
  gap:1.1em 3.4em;
  margin-top:clamp(2.4rem,7vh,4rem);
  padding-top:1.2em;
  border-top:1px solid rgba(17,17,17,.16);
}
.beweis__klein{
  font-size:clamp(.84rem,2vw,1.02rem);
  color:var(--leise);
}
.beweis__klein b{color:var(--tinte);font-weight:900}
.beweis__anspruch{
  margin-top:clamp(2.6rem,8vh,4.4rem);
  max-width:26ch;
  font-family:Schibsted,sans-serif;
  font-weight:900;
  font-size:clamp(1.5rem,4.6vw,3.3rem);
  line-height:1.02;
  letter-spacing:-.035em;
  text-wrap:balance;
}

/* ══════════════════════════════════════════════════════════════════════
   DER ZUSAMMENFALL endet im Zeichen
   Grundzustand ohne Bewegung: das Zeichen steht da, die vier Striche nicht.
   ══════════════════════════════════════════════════════════════════════ */

.strich{opacity:0}
.zeichen--gross{
  position:absolute;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%);
  width:min(42vw,340px);
  color:var(--tinte);
  --w-strich:var(--knall);
}
.zeichen--gross .zeichen__rahmen{opacity:.88;
}

@media (prefers-reduced-motion: no-preference){
  @supports (animation-timeline: view()){
    .strich{opacity:1}

    @keyframes zeichen-strich{
      from{clip-path:inset(0 100% 0 0)}
      to{clip-path:inset(0 0 0 0)}
    }
    @keyframes zeichen-rahmen{
      from{opacity:0;transform:scale(.955)}
      to{opacity:.88;transform:none}
    }
    .zeichen--gross .zeichen__strich{
      animation:zeichen-strich linear both;
      animation-timeline:--fall;
      animation-range:cover 46% cover 74%;
    }
    .zeichen--gross .zeichen__rahmen{
      animation:zeichen-rahmen linear both;
      animation-timeline:--fall;
      animation-range:cover 66% cover 88%;
    }

    /* Der Beweis baut sich beim Hochkommen auf */
    @keyframes beweis-ein{from{opacity:0;transform:translateY(2.2rem)}44%{opacity:1}to{opacity:1;transform:none}}
    .beweis__zahl,.beweis__anspruch,.leiste__titel{
      animation:beweis-ein linear both;
      animation-timeline:view();
      animation-range:entry 14% cover 26%;
    }
  }
}

/* ══════════════ SCHMAL ══════════════ */

@media (max-width:860px){
  .zeichen--gross{width:min(62vw,260px)}
  .schiene{padding-top:calc(var(--bild) + var(--rand) * .9)}
}


/* ══════════════════════════════════════════════════════════════════════
   DER KOPF — das Zeichen oben, sonst nichts. Nicht klebend: ein
   mitlaufender Balken verdeckt Inhalt, das steht so in Sadans eigenem
   Prüfbericht.
   ══════════════════════════════════════════════════════════════════════ */

.kopf{
  display:flex;
  flex-wrap:wrap;
  align-items:baseline;
  gap:.5em 1.6em;
}
.kopf__marke{
  display:inline-flex;
  align-items:center;
  gap:.55em;
  /* Auf der Startseite ist die Marke ein <span>, auf allen Unterseiten ein
     <a href="/"> — und dort zog der Browser seinen Standardstrich unter
     „Mainsicht". Die Wortmarke ist keine Textstelle im Fliesstext, sie
     braucht keinen Unterstrich. */
  text-decoration:none;
  color:inherit;
}
.kopf__marke .zeichen{--zeichen-w:clamp(1.7rem,3.4vw,2.5rem)}
.kopf__marke b{
  font-family:Schibsted,sans-serif;
  font-weight:900;
  font-size:clamp(1.15rem,2.8vw,1.75rem);
  letter-spacing:-.035em;
  line-height:1;
}
.kopf__ort{
  font-family:Mono,monospace;
  font-size:clamp(.7rem,1.6vw,.78rem);
  letter-spacing:.14em;
  color:var(--kopf-leise, var(--leise));
}


/* ══════════════════════════════════════════════════════════════════════
   DAS FENSTER — räumlich, als Film. Kein Kartenstapel.
   ══════════════════════════════════════════════════════════════════════ */

.fenster{
  position:relative;
  z-index:1;
  background:#0d0d11;
  padding:clamp(2.6rem,9vh,5.4rem) var(--rand) clamp(2rem,6vh,3.6rem) var(--achse);
}
.fenster__film{
  max-width:1400px;
  margin:0;
}
.fenster__film .film{aspect-ratio:1400/800;object-fit:cover;background:#0d0d11}
.fenster__film .standbild{display:none}
.fahne--fenster{
  position:static;
  margin-top:1.1em;
  padding:0;
  max-width:56ch;
  color:var(--bone);
}

@media (prefers-reduced-motion: reduce){
  .fenster__film .standbild{display:block;width:100%;height:auto}
}

@media (max-width:860px){
  .kopf__ort{width:100%}
}

/* ══════════════════════════════════════════════════════════════════════
   RECHTSTEXTE — impressum.html und datenschutz.html
   Zwei Seiten ohne Bild, ohne Bewegung, ohne Kasten. Papier, Tinte,
   eine Spalte. Überschriften Schibsted wie überall, Labels Mono wie
   überall, der Knall nur als Marke — nicht als Dekoration.
   Getrennt wird mit Haarlinien, nicht mit Rahmen.
   ══════════════════════════════════════════════════════════════════════ */

.recht{
  background:var(--papier);
  color:var(--tinte);
  padding:calc(var(--rand) * 1.1) var(--rand) clamp(3rem,9vh,5.5rem);
}

/* Eine Spalte, mittig. 36rem sind in der Lesegrösse unten rund
   68 Zeichen — länger wird keine Zeile, auch nicht auf grossen Schirmen.
   Die zweite Grenze in ch hält das auch dann, wenn jemand die
   Schriftgrösse im Browser hochdreht. */
.recht > *{max-width:36rem;margin-inline:0}
/* … aber NICHT den Anker. Genau die Falle aus DESIGN-PRINZIPIEN § 7
   („Container-Regeln treffen auch den Kopf"): die 36rem kappten den Anker
   auf 576 px — seine offene Leiste braucht 644. Gemessen am 02.08.: der
   letzte Link „Schnell-Check" endete bei x=1382, die Leiste bei x=1331,
   „CHECK" war weggeschnitten. */
.recht > .anker{max-width:none}
/* … ausser dem Kopf. Der braucht die volle Breite, sonst reicht der
   Platz nicht fuer Marke und Navigation nebeneinander und die Nav
   bricht unter das Logo — auf allen anderen Seiten steht sie rechts. */
.recht > .kopf{max-width:none}
.recht p,.recht li,.recht dd{max-width:68ch}

/* ── Kopf: dasselbe Zeichen wie auf der Startseite, nur als Rückweg ── */
.recht__kopf{margin-bottom:clamp(3.2rem,11vh,6rem)}
.recht .recht__zurueck{
  text-decoration:none;
  border-bottom:0;
  padding-bottom:0;
}
.recht__zurueck b{border-bottom:2px solid transparent;padding-bottom:.04em}
.recht__zurueck:hover b,
.recht__zurueck:focus-visible b{border-bottom-color:currentColor}
.recht__zurueck:focus-visible{outline:2px solid currentColor;outline-offset:.35em}

/* ── Hierarchie ── */
.recht__titel{
  margin:0;
  font-family:Schibsted,sans-serif;
  font-weight:900;
  font-size:clamp(2.3rem,8vw,4.4rem);
  line-height:.9;
  letter-spacing:-.045em;
  text-wrap:balance;
  /* Kein hyphens:auto — der Browser trennt „Datenschut-zerklärung“.
     Die Trennstelle steht als &shy; im Titel selbst. */
}
.recht .recht__vorsatz{
  margin-top:clamp(1.2rem,4vh,2rem);
  font-size:clamp(1.04rem,2.9vw,1.34rem);
  line-height:1.34;
  letter-spacing:-.012em;
  text-wrap:balance;
}
.recht h2{
  margin:clamp(2.6rem,9vh,4.4rem) 0 0;
  padding-top:.9em;
  border-top:1px solid rgba(17,17,17,.16);
  font-family:Schibsted,sans-serif;
  font-weight:900;
  font-size:clamp(1.1rem,3vw,1.48rem);
  line-height:1.16;
  letter-spacing:-.028em;
}
.recht h3{
  margin:clamp(1.5rem,5vh,2.2rem) 0 0;
  font-family:Schibsted,sans-serif;
  font-weight:700;
  font-size:clamp(.98rem,2.3vw,1.1rem);
  line-height:1.24;
  letter-spacing:-.01em;
}
.recht p{
  margin-top:.85em;
  font-size:clamp(.94rem,2.2vw,1.05rem);
  line-height:1.6;
}
.recht h2 + p,.recht h3 + p{margin-top:.7em}
.recht .recht__leise{color:var(--leise)}

/* ── Verweise: Haarlinie statt Unterstreichung, wie im Fuss ── */
.recht a{
  text-decoration:none;
  border-bottom:1px solid rgba(17,17,17,.3);
  padding-bottom:.04em;
}
.recht a:hover{border-bottom-color:var(--knall)}
.recht a:focus-visible{outline:2px solid currentColor;outline-offset:.25em}

/* ── Aufzählung: der Strich aus dem Zeichen als Marke ── */
.recht__liste{margin-top:.9em}
.recht__liste li{
  position:relative;
  padding-left:1.4em;
  margin-top:.44em;
  font-size:clamp(.94rem,2.2vw,1.05rem);
  line-height:1.6;
}
.recht__liste li::before{
  content:"";
  position:absolute;
  left:0;
  top:.76em;
  width:.72em;
  height:2px;
  background:var(--knall);
}

/* ── Angabenblock: Label links in Mono, Wert rechts im Lesegrad ── */
.recht__daten{
  margin:1.1em 0 0;
  display:grid;
  grid-template-columns:9rem minmax(0,1fr);
  gap:.6em clamp(1rem,3vw,1.8rem);
  align-items:baseline;
}
.recht__daten dt{
  font-family:Mono,monospace;
  font-size:clamp(0.7rem,1.6vw,.76rem);
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--leise);
}
.recht__daten dd{
  margin:0;
  font-size:clamp(.94rem,2.2vw,1.05rem);
  line-height:1.5;
}

/* ── der Stand, ruhig, in Mono ── */
.recht .recht__stand{
  margin-top:clamp(3rem,10vh,5rem);
  font-family:Mono,monospace;
  font-size:clamp(.7rem,1.6vw,.78rem);
  letter-spacing:.14em;
  line-height:1.7;
  color:var(--leise);
}

@media (max-width:560px){
  .recht__daten{grid-template-columns:minmax(0,1fr);gap:.2em}
  .recht__daten dt{margin-top:.9em}
}

.fuss__wo a{border-bottom:1px solid rgba(17,17,17,.25)}

/* ══════════════════════════════════════════════════════════════════════
   DIE ARBEIT — ein einziges Bild, randlos, hart schwarz-weiß.
   Es steht kurz vor der Frage und dem Preis: erst der Betrieb, dann die Zahl.
   ══════════════════════════════════════════════════════════════════════ */

.arbeit{
  position:relative;
  z-index:1;
  background:var(--tinte);
  color:var(--bone);
  overflow:hidden;
}
.arbeit__bild{
  margin:0;
  height:clamp(20rem,62vh,34rem);
}
.arbeit__bild img{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:62% 50%;
  display:block;
  filter:grayscale(1) contrast(1.28) brightness(.82);
}
/* Leseschleier, kein Deko-Verlauf: die Zeile muss auf jedem Bild sitzen */
.arbeit::after{
  content:"";
  position:absolute;
  left:0;right:0;bottom:0;
  height:60%;
  background:linear-gradient(to top, rgba(17,17,17,.82), rgba(17,17,17,0));
  pointer-events:none;
}
.arbeit__satz{
  z-index:2;
  position:absolute;
  left:var(--achse);
  right:var(--rand);
  bottom:clamp(1.6rem,5vh,3rem);
}
.arbeit__dach{
  font-family:Mono,monospace;
  font-size:clamp(0.7rem,1.6vw,.78rem);
  letter-spacing:.3em;
  text-transform:uppercase;
  color:var(--bone);
  margin-bottom:.7em;
}
.arbeit__zeile{
  max-width:22ch;
  font-family:Schibsted,sans-serif;
  font-weight:900;
  font-size:clamp(1.4rem,4.4vw,3.2rem);
  line-height:1.02;
  letter-spacing:-.035em;
  text-wrap:balance;
}

/* ══════════════════════════════════════════════════════════════════════
   FRAGEN
   Offen statt eingeklappt: Frage links, Antwort rechts, eine Haarlinie
   dazwischen. Kein Akkordeon — sichtbarer Text wird von Google und von
   KI-Systemen zuverlässiger gelesen als eingeklappter.
   ══════════════════════════════════════════════════════════════════════ */

.fragen{
  position:relative;
  z-index:1;
  background:var(--papier);
  padding:clamp(3.4rem,12vh,7rem) var(--rand) clamp(3rem,10vh,6rem) var(--achse);
}
.fragen > *{max-width:1240px;margin-inline:0}
.fragen__dach{
  font-family:Mono,monospace;
  font-size:clamp(.7rem,1.6vw,.78rem);
  letter-spacing:.3em;
  text-transform:uppercase;
  color:var(--leise);
}
.fragen__titel{
  margin:.4em 0 clamp(2rem,7vh,3.6rem);
  font-family:Schibsted,sans-serif;
  font-weight:900;
  font-size:clamp(1.7rem,6vw,4.4rem);
  line-height:.98;
  letter-spacing:-.042em;
  text-wrap:balance;
}
.fragen__stueck{
  display:grid;
  grid-template-columns:minmax(0,1fr);
  gap:.7em clamp(1.4rem,4vw,3.4rem);
  padding:clamp(1.3rem,3.4vh,2rem) 0;
  border-top:1px solid rgba(17,17,17,.16);
}
.fragen__stueck h3{
  margin:0;
  font-family:Schibsted,sans-serif;
  font-weight:900;
  font-size:clamp(1.02rem,2.6vw,1.55rem);
  line-height:1.12;
  letter-spacing:-.025em;
  text-wrap:balance;
}
.fragen__stueck p{
  margin:0;
  max-width:62ch;
  font-size:clamp(.9rem,2vw,1.05rem);
  line-height:1.5;
  color:var(--leise);
  text-wrap:pretty;
}
@media (min-width:880px){
  .fragen__stueck{grid-template-columns:minmax(0,.86fr) minmax(0,1.14fr)}
}

/* ══════════════════════════════════════════════════════════════════════
   KINO — ein Film auf einer Unterseite, randlos im dunklen Feld.
   Der Film läuft auf reinem Schwarz und rechnet seinen Grund per screen
   weg, deshalb hat er auf jedem Untergrund keine sichtbare Kante.
   ══════════════════════════════════════════════════════════════════════ */

.kino{
  position:relative;
  z-index:1;
  margin:clamp(3rem,10vh,6rem) calc(var(--rand) * -1) 0;
  background:#0d0d11;
  padding:clamp(1.6rem,5vh,3rem) var(--rand) clamp(1.4rem,4vh,2.4rem);
}
.kino__rahmen{max-width:1240px;margin:0 auto}
/* KEIN mix-blend-mode mehr. Frueher lagen die Filme auf reinem Schwarz und
   `screen` machte das Schwarz durchsichtig — auf dem Film sah das richtig
   aus, aber das WebP-Standbild wird NICHT gemischt und stand bei
   `prefers-reduced-motion` als echtes Schwarz im Abschnitt. Die
   Kompositionen tragen den Seitenton #0d0d11 jetzt selbst. */
.kino .film{
  width:100%;
  display:block;
  object-fit:cover;
  background:#0d0d11;
}
.kino .standbild{display:none}
.kino__fahne{
  margin-top:1.1em;
  font-family:Mono,monospace;
  font-size:clamp(0.7rem,1.6vw,.78rem);
  letter-spacing:.1em;
  color:var(--bone);
  opacity:.55;
}
@media (prefers-reduced-motion: reduce){
  .kino .film{display:none}
  .kino .standbild{display:block;width:100%;height:auto}
}

/* Hochformatige Filme brauchen ihr eigenes Maß, sonst werden sie
   auf Bannerbreite gezogen und man sieht nur noch einen Ausschnitt. */
.kino--hoch .kino__rahmen{max-width:min(400px,58vw)}
.kino--hoch .kino__fahne{text-align:center}

/* ══════════════════════════════════════════════════════════════════════
   DIE PERSON
   Bei einem Einzelunternehmen ist der Mensch der stärkste
   Vertrauensbaustein. Deshalb steht er vor dem Preis — und deshalb
   bleibt die Bildfläche sichtbar leer, solange kein echtes Porträt
   da ist. Ein Fremdgesicht wäre hier schlimmer als eine Lücke.
   ══════════════════════════════════════════════════════════════════════ */

.person{
  position:relative;
  z-index:1;
  background:var(--papier);
  /* Volle Breite fuer den Grund, mittige Spalte fuer den Inhalt —
     sonst schaut die angeheftete Welt darunter an den Raendern durch. */
  padding-block:clamp(3.4rem,12vh,7rem);
  padding-inline:var(--achse) var(--rand);
  display:grid;
  gap:clamp(2rem,6vw,4.4rem);
  align-items:center;
}
.person__bild{margin:0}
.person__leer{
  aspect-ratio:880/1100;
  background:#eceae5;
  display:grid;
  place-items:center;
}
.person__leer span{
  font-family:Mono,monospace;
  font-size:clamp(0.7rem,1.6vw,.75rem);
  letter-spacing:.24em;
  text-transform:uppercase;
  color:var(--leise);
}
.person__titel{
  margin:.3em 0 0;
  font-family:Schibsted,sans-serif;
  font-weight:900;
  font-size:clamp(1.9rem,6.4vw,4.4rem);
  line-height:.94;
  letter-spacing:-.045em;
  text-wrap:balance;
}
.person__text{
  margin-top:1.1em;
  max-width:44ch;
  font-size:clamp(.94rem,2.1vw,1.14rem);
  line-height:1.42;
  color:var(--leise);
  text-wrap:pretty;
}
.person__satzchen{
  margin-top:1em;
  max-width:30ch;
  font-family:Schibsted,sans-serif;
  font-weight:900;
  font-size:clamp(1.05rem,2.8vw,1.6rem);
  line-height:1.14;
  letter-spacing:-.026em;
}
.person__merk{
  margin-top:clamp(1.6rem,5vh,2.4rem);
  display:flex;
  flex-direction:column;
  gap:.5em;
  font-family:Mono,monospace;
  font-size:clamp(0.7rem,1.6vw,.76rem);
  letter-spacing:.12em;
  color:var(--leise);
}
.person__merk li{padding-left:1.5em;position:relative}
.person__merk li::before{
  content:"";
  position:absolute;
  left:0;top:.52em;
  width:.85em;height:2px;
  background:var(--knall);
}
@media (min-width:820px){
  .person{grid-template-columns:minmax(0,.62fr) minmax(0,1fr)}
}

/* ══════════════════════════════════════════════════════════════════════
   NAVIGATION IM KOPF
   Statt einer dunklen Leiste quer durch die Komposition: still oben
   rechts, in derselben Mono wie die Fahnen. Der Logostrich markiert,
   wo man gerade ist — dieselbe Farbe, dieselbe Geste wie im Zeichen.
   ══════════════════════════════════════════════════════════════════════ */

.kopf{
  width:100%;
  justify-content:space-between;
  column-gap:clamp(1rem,3vw,2.6rem);
}
.kopf__nav{
  display:flex;
  flex-wrap:wrap;
  align-items:baseline;
  gap:.5em clamp(.9rem,2.4vw,1.9rem);
  margin-left:auto;
}
.kopf__nav a{
  position:relative;
  text-decoration:none;
  font-family:Mono,monospace;
  font-size:clamp(0.7rem,1.6vw,.78rem);
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--kopf-leise, var(--leise));
  padding:.5em 0;
}
.kopf__nav a::after{
  content:"";
  position:absolute;
  left:0;right:0;bottom:0;
  height:2px;
  background:var(--knall);
  transform:scaleX(0);
  transform-origin:left;
  transition:transform .28s var(--schwung);
}
.kopf__nav a:hover,
.kopf__nav a:focus-visible{color:var(--kopf-tinte, var(--tinte))}
.kopf__nav a:hover::after,
.kopf__nav a:focus-visible::after,
.kopf__nav a[aria-current="page"]::after{transform:scaleX(1)}
.kopf__nav a[aria-current="page"]{color:var(--kopf-tinte, var(--tinte))}
.kopf__nav--tat{color:var(--kopf-tinte, var(--tinte))!important;font-weight:700}
.kopf__ort{order:3;width:100%}

@media (max-width:700px){
  .kopf__nav{width:100%;margin-left:0}
  .kopf__nav a{font-size:.72rem;letter-spacing:.08em}
}

/* ── Der Beweis: erst der Satz, dann die Zahl, dann was sie heißt ── */
.beweis__titel{
  margin:.5em 0 0;
  max-width:18ch;
  font-family:Schibsted,sans-serif;
  font-weight:900;
  font-size:clamp(1.8rem,6vw,4.2rem);
  line-height:.96;
  letter-spacing:-.042em;
  text-wrap:balance;
}
.beweis .beweis__was{
  margin-top:1.1em;
  max-width:52ch;
  font-size:clamp(.92rem,2.1vw,1.1rem);
  line-height:1.42;
  color:var(--leise);
  text-wrap:pretty;
}
.werte--beweis{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(min(220px,100%),1fr));
  gap:clamp(1.6rem,4vw,3rem);
  margin-top:clamp(2.4rem,8vh,4rem);
  align-items:start;
}
.werte--beweis li{transform:none!important}
/* Zahl, Wort und Erklaerung stehen untereinander. Ohne das bleiben b,
   span und i auf ihrem Inline-Standard, laufen als EIN Textstrom in
   eine 381 px schmale Spalte und brechen mitten im Satz um
   („100SEOWie gut Google die Seite lesen kann"). */
.werte--beweis b,
.werte--beweis span,
.werte--beweis i{display:block}
.werte--beweis b{
  font-family:Schibsted,sans-serif;
  font-weight:900;
  font-size:clamp(3rem,9vw,6.4rem);
  line-height:.84;
  letter-spacing:-.05em;
  font-variant-numeric:tabular-nums;
}
.werte--beweis span{
  margin-top:.4em;
  font-family:Schibsted,sans-serif;
  font-weight:900;
  font-size:clamp(.95rem,2.2vw,1.2rem);
  letter-spacing:-.02em;
  text-transform:none;
  color:var(--tinte);
}
.werte--beweis i{
  margin-top:.5em;
  font-style:normal;
  font-size:clamp(.82rem,1.9vw,.95rem);
  line-height:1.36;
  color:var(--leise);
  text-wrap:pretty;
}
.beweis__quelle{
  margin-top:clamp(1.4rem,4vh,2.2rem);
  font-family:Mono,monospace;
  font-size:clamp(0.7rem,1.6vw,.75rem);
  letter-spacing:.1em;
  color:var(--leise);
}
.beweis__quelle a,.beweis__klein a{border-bottom:2px solid var(--knall);text-decoration:none}
.beweis__klein{max-width:44ch;line-height:1.4}

/* ── Das Fenster bekommt einen Grund, bevor es läuft ── */
.dach--hell{color:#8b8892}
.fenster__wort{max-width:1400px;margin:0 0 clamp(2rem,6vh,3.4rem)}
.fenster__titel{
  margin:0;
  max-width:20ch;
  font-family:Schibsted,sans-serif;
  font-weight:900;
  font-size:clamp(1.7rem,5.6vw,4rem);
  line-height:.98;
  letter-spacing:-.042em;
  color:var(--bone);
  text-wrap:balance;
}
.fenster__text{
  margin-top:1.1em;
  max-width:56ch;
  font-size:clamp(.92rem,2.1vw,1.1rem);
  line-height:1.44;
  color:#c9c6c0;
  text-wrap:pretty;
}

/* ══════════════════════════════════════════════════════════════════════
   DER CHECK — die Kontaktaufnahme sieht aus wie das Produkt
   Ohne JavaScript steht die Liste vollständig da und der Mailto
   funktioniert. Das Skript fügt nur die Reihenfolge hinzu.
   ══════════════════════════════════════════════════════════════════════ */

.check{
  max-width:1240px;
  margin:0 0 clamp(3.4rem,11vh,6rem);
  padding-top:clamp(1.6rem,5vh,2.6rem);
  border-top:1px solid rgba(17,17,17,.16);
}
.check__dach{
  font-family:Mono,monospace;
  font-size:clamp(0.7rem,1.6vw,.78rem);
  letter-spacing:.3em;
  text-transform:uppercase;
  color:var(--knall-text);
}

.check__zeile{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:.5em clamp(.7rem,2vw,1.3rem);
  margin-top:clamp(1rem,3vh,1.6rem);
}
.check__pfeil{
  font-family:Schibsted,sans-serif;
  font-weight:900;
  font-size:clamp(1.4rem,4vw,2.6rem);
  line-height:1;
  color:var(--knall);
}
.check__label{
  position:absolute;
  width:1px;height:1px;
  overflow:hidden;
  clip-path:inset(50%);
}
/* Kein umrandetes Feld: eine Schreiblinie, wie im Rest der Seite */
.check__feld{
  flex:1 1 14ch;
  min-width:0;
  background:none;
  border:0;
  border-bottom:2px solid rgba(17,17,17,.28);
  padding:.1em 0 .12em;
  font-family:Schibsted,sans-serif;
  font-weight:900;
  font-size:clamp(1.4rem,5vw,3.4rem);
  letter-spacing:-.04em;
  color:var(--tinte);
  border-radius:0;
}
.check__feld::placeholder{color:rgba(17,17,17,.24)}
.check__feld:focus{outline:none;border-bottom-color:var(--knall)}
.check__knopf{
  background:none;
  border:0;
  padding:.4em 0 .5em;
  font-family:Schibsted,sans-serif;
  font-weight:900;
  font-size:clamp(1rem,2.6vw,1.5rem);
  letter-spacing:-.02em;
  color:var(--tinte);
  border-bottom:2px solid var(--knall);
  cursor:pointer;
}
.check__knopf:disabled{color:var(--leise);cursor:default}
.check__knopf:focus-visible{outline:2px solid var(--knall);outline-offset:.3em}

.check__liste{
  margin:clamp(1.6rem,5vh,2.6rem) 0 0;
  padding:0;
  list-style:none;
}
.check__liste li{
  display:grid;
  grid-template-columns:2.6rem minmax(0,1fr) auto;
  align-items:baseline;
  gap:.6em clamp(.8rem,2.4vw,1.6rem);
  padding:.62em 0;
  border-top:1px solid rgba(17,17,17,.12);
  font-variant-numeric:tabular-nums;
}
.check__liste b{
  font-family:Mono,monospace;
  font-size:clamp(0.7rem,1.6vw,.78rem);
  letter-spacing:.14em;
  color:var(--leise);
}
.check__liste span{
  font-family:Schibsted,sans-serif;
  font-weight:500;
  font-size:clamp(.94rem,2.2vw,1.24rem);
  letter-spacing:-.015em;
}
.check__liste i{
  font-style:normal;
  font-family:Mono,monospace;
  font-size:clamp(0.7rem,1.6vw,.78rem);
  letter-spacing:.1em;
  color:var(--leise);
}
/* Erst wenn das Skript läuft, wird eingeklappt — sonst steht alles da.
   .62 statt .24: bei .24 lag der Kontrast bei rund 1,4:1, die Liste war
   nicht mehr lesbar und der ganze Abschnitt sah aus wie ein gesperrtes
   Formular. Dabei ist genau diese Liste das Verkaufsargument — man soll
   lesen können, was geprüft wird. Der Sprung zum geprüften Zustand
   bleibt deutlich: .62 gegen 1 plus die Unterstreichung unten. */
.check__liste--bereit li{opacity:.62}
.check__liste--bereit li.an{opacity:1}
@media (prefers-reduced-motion: no-preference){
  .check__liste--bereit li{transition:opacity .34s var(--schwung)}
  .check__liste--bereit li.an{position:relative}
  .check__liste--bereit li.an::after{
    content:"";
    position:absolute;
    left:0;bottom:0;height:2px;width:100%;
    background:var(--knall);
    transform-origin:left;
    animation:check-strich .5s var(--schwung) both;
  }
  @keyframes check-strich{from{transform:scaleX(0)}to{transform:scaleX(1)}}
  .check__liste--stups{animation:check-stups .38s}
  @keyframes check-stups{
    0%,100%{transform:none}
    25%{transform:translateX(-4px)}
    75%{transform:translateX(4px)}
  }
}

/* ── Erst der Klick, dann der Rest ──
   Zugeklappt wird ausschliesslich per Skript (Klasse --zu). Steht sie
   im Markup, sieht ohne JavaScript niemand das Formular. */
.check__ende{
  margin-top:clamp(1.6rem,5vh,2.6rem);
  max-height:200rem;
  transition:max-height .6s var(--schwung), opacity .45s var(--schwung) .08s;
}
.check__ende--zu{
  max-height:0;
  margin-top:0;
  opacity:0;
  visibility:hidden;      /* nimmt die Felder auch aus der Tabreihenfolge */
  overflow:hidden;
}
@media (prefers-reduced-motion: reduce){
  .check__ende{transition:none}
}

/* Der Weg fuer alle ohne eigene Website. Nur mit JavaScript sichtbar und
   nur, solange zugeklappt ist — ohne Skript steht das Formular ja offen. */
.check__ohne{display:none}
.check__ohne--an{display:block;margin-top:.9em}
.check__ohne-knopf{
  display:inline-flex;
  align-items:center;
  min-height:44px;                /* Tippziel */
  background:none;
  border:0;
  padding:0;
  font-family:Mono,monospace;
  font-size:clamp(0.7rem,1.6vw,.78rem);
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--leise);
  border-bottom:2px solid transparent;
  cursor:pointer;
}
.check__ohne-knopf:hover,
.check__ohne-knopf:focus-visible{color:var(--tinte);border-bottom-color:var(--knall)}
.check__fertig{
  font-family:Schibsted,sans-serif;
  font-weight:900;
  font-size:clamp(1.1rem,3vw,1.8rem);
  letter-spacing:-.028em;
  margin-bottom:.7em;
}
.check__ehrlich{
  margin-top:clamp(1.4rem,4vh,2.2rem);
  max-width:58ch;
  font-size:clamp(.84rem,1.9vw,.96rem);
  line-height:1.46;
  color:var(--leise);
  text-wrap:pretty;
}

/* ══════════════════════════════════════════════════════════════════════
   DAS FORMULAR
   Aus dem Schnell-Check wird eine echte Anfrage: Anliegen, Name, E-Mail.
   Keine Kästen, keine Chips, keine gefüllten Knöpfe — die Anliegen sind
   vier Textzeilen, und die gewählte bekommt den Strich in --knall.
   Dieselbe Geste wie die Navigation im Kopf und der Prüfen-Knopf.
   ══════════════════════════════════════════════════════════════════════ */

.anliegen{
  margin:clamp(1.4rem,4vh,2.2rem) 0 0;
  padding:0;
  border:0;              /* fieldset bringt von sich aus einen Rahmen mit */
  display:flex;
  flex-wrap:wrap;
  align-items:baseline;
  gap:.2em clamp(1rem,3vw,2.2rem);
}
.anliegen__frage{
  padding:0;
  width:100%;
  margin-bottom:.5em;
  font-family:Mono,monospace;
  font-size:clamp(0.7rem,1.6vw,.78rem);
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--leise);
}
.anliegen__zeile{position:relative;display:inline-flex}

/* Der Punkt verschwindet, bleibt aber bedienbar: nicht display:none —
   das nähme ihn aus der Tastaturbedienung und aus dem Vorleseprogramm. */
.anliegen input{
  position:absolute;
  width:1px;height:1px;
  opacity:0;
  margin:0;
}
.anliegen label{
  display:flex;
  align-items:center;
  padding:.5em 0;
  min-height:44px;            /* Tippziel */
  font-family:Schibsted,sans-serif;
  font-weight:500;
  font-size:clamp(.94rem,2.2vw,1.24rem);
  letter-spacing:-.015em;
  color:var(--leise);
  border-bottom:2px solid transparent;
  cursor:pointer;
  transition:color .2s var(--schwung),border-color .2s var(--schwung);
}
.anliegen input:checked + label{
  color:var(--tinte);
  border-bottom-color:var(--knall);
}
.anliegen input:focus-visible + label{
  outline:2px solid var(--knall);
  outline-offset:.3em;
}

/* Name und E-Mail: dieselbe Zeile wie die Website-Eingabe, nur leiser.
   Die große Schrift gehört der einen Frage oben, nicht jedem Feld. */
.check__zeile--eng{margin-top:clamp(.9rem,2.6vh,1.4rem)}
/* .check__label ist sonst nur für Vorleseprogramme da — beim Website-Feld
   trägt der Platzhalter die Bedeutung. Bei zwei gleich aussehenden Zeilen
   untereinander geht das nicht: dann stünden dort zwei nackte Striche und
   niemand wüsste, welcher welcher ist. */
.check__label--sicht{
  position:static;
  width:auto;height:auto;
  overflow:visible;
  clip-path:none;
  flex:0 0 auto;
  /* 14ch, damit „IHRE E-MAIL *" hineinpasst und beide Felder an
     derselben Kante beginnen — sonst hätte der Block zwei Kanten. */
  min-width:14ch;
  font-family:Mono,monospace;
  font-size:clamp(0.7rem,1.6vw,.78rem);
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--leise);
}
.check__feld--eng{
  flex:1 1 12ch;
  font-size:clamp(1rem,2.6vw,1.5rem);
}
.pflicht{
  text-decoration:none;
  color:var(--knall-text,var(--knall));
  font-weight:700;
}

/* Die Spamfalle darf nicht display:none sein — genau daran erkennen
   viele Maschinen sie. Also aus dem Bild schieben statt entfernen. */
.fangtopf{
  position:absolute;
  left:-9999px;
  width:1px;height:1px;
  overflow:hidden;
}
/* Auch das Feld selbst klein halten: sonst misst es 153×21 px und wird
   als zu kleines Tippziel gemeldet — es ist gar keins. Maschinen füllen
   nach dem name-Attribut, die Größe stört sie nicht. */
.fangtopf input{width:1px;height:1px;padding:0;border:0}

.check__senden{
  margin-top:clamp(1.4rem,4vh,2.2rem);
  background:none;
  border:0;
  border-bottom:2px solid var(--knall);
  border-radius:0;
  padding:.4em 0 .5em;
  min-height:44px;
  font-family:Schibsted,sans-serif;
  font-weight:900;
  font-size:clamp(1.1rem,3vw,1.8rem);
  letter-spacing:-.028em;
  color:var(--tinte);
  cursor:pointer;
}
.check__senden:disabled{color:var(--leise);cursor:default}
.check__senden:focus-visible{outline:2px solid var(--knall);outline-offset:.3em}

.check__hinweis{
  margin-top:1em;
  max-width:58ch;
  font-size:clamp(.8rem,1.8vw,.9rem);
  line-height:1.46;
  color:var(--leise);
  text-wrap:pretty;
}
.check__recht{margin-top:.2em}
.check__recht a{
  display:inline-flex;
  align-items:center;
  min-height:44px;               /* Tippziel */
  font-size:clamp(.8rem,1.8vw,.9rem);
  color:var(--tinte);
  text-underline-offset:.2em;
}

/* Die Rückmeldung nach dem Abschicken. role="status" im HTML sorgt
   dafür, dass Vorleseprogramme sie ansagen, ohne den Fokus zu klauen. */
.check__antwort{
  margin-top:1.1em;
  max-width:58ch;
  padding-left:.9em;
  border-left:2px solid var(--knall);
  font-family:Schibsted,sans-serif;
  font-weight:500;
  font-size:clamp(.95rem,2.2vw,1.15rem);
  line-height:1.44;
  color:var(--tinte);
  text-wrap:pretty;
}

/* ══════════════════════════════════════════════════════════════════════
   DIE SEITE VON senden.php
   Nur für Besucher ohne JavaScript. Bewusst karg: eine Zeile, ein Satz,
   ein Weg zurück.
   ══════════════════════════════════════════════════════════════════════ */
.danke{
  min-height:100svh;
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:.6em;
  background:var(--papier);
  color:var(--tinte);
  padding:clamp(2rem,8vh,5rem) var(--rand) clamp(2rem,8vh,5rem) var(--achse);
}
.danke__dach{
  font-family:Mono,monospace;
  font-size:clamp(0.7rem,1.6vw,.78rem);
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--leise);
}
.danke__satz{
  margin:0;
  max-width:16ch;
  font-family:Schibsted,sans-serif;
  font-weight:900;
  font-size:clamp(2.2rem,9vw,5.4rem);
  line-height:.94;
  letter-spacing:-.045em;
}
.danke__text{max-width:54ch;font-size:clamp(.95rem,2.2vw,1.2rem);line-height:1.44;text-wrap:pretty}
.danke__liste{max-width:54ch;margin:0;padding-left:1.1em;color:var(--leise);line-height:1.5}
.danke__zurueck a{color:var(--tinte);text-underline-offset:.2em}

/* Das Bildband auch auf dunklem Grund */
.arbeit--geo{margin-block:clamp(3rem,10vh,6rem)}
.arbeit--geo .arbeit__bild img{filter:grayscale(1) contrast(1.2) brightness(.86);object-position:50% 44%}

/* Das Porträt: volle Spaltenbreite und dieselbe harte Schwarz-Weiß-
   Behandlung wie alle anderen Aufnahmen auf dieser Seite. */
.person__bild img{
  width:100%;
  height:auto;
  display:block;
  aspect-ratio:880/1100;
  object-fit:cover;
  filter:grayscale(1) contrast(1.18);
}

/* ══════════════════════════════════════════════════════════════════════
   TIPPZIELE
   WCAG 2.5.8 verlangt mindestens 24×24 px. Die Zeilen waren 15 bis
   22 px hoch — auf dem Handy trifft man das nicht zuverlässig.
   ══════════════════════════════════════════════════════════════════════ */

.kopf__marke,
.kopf__nav a,
.tat__zeile,
.draht__mail,
.fuss a,
.fuss__wo a,
.lade__tat a,
.lage__tat a,
.beweis__quelle a,
.beweis__klein a,
.recht a,
.recht__zurueck{
  min-height:24px;
  display:inline-flex;
  align-items:center;
}

/* Die Telefonzeile braucht dieselben 24 px, aber NICHT inline-flex:
   sie steht als eigener Block ueber der Mailadresse. Mit inline-flex
   floss sie mit der Mail in dieselbe Zeile, und die Mail rutschte
   99 px in die Ziffern hinein. */
.draht__nr{
  min-height:24px;
  display:flex;
  align-items:center;
}
.tat__zeile,.lade__tat a,.lage__tat a{min-height:44px}
.fuss a,.fuss__wo a{padding-block:.35em}

/* Der Kopf auf hellem Grund — dunkle Seiten setzen die beiden
   Variablen selbst um (siehe ki-sichtbarkeit.css). */
:root{--kopf-leise:#5b5b5b;--kopf-tinte:#111111}

/* ══════════════════════════════════════════════════════════════════════
   DER ANKER — das Zeichen, das bleibt
   Über 14 000 px Scrollstrecke kam man bisher nirgendwo hin: der Kopf
   scrollt weg, und danach gibt es keinen Weg mehr. Das Zeichen bleibt
   stehen, dreht sich mit dem Scrollen und klappt bei Kontakt die Wege auf.

   WARUM DER ANKER EINEN EIGENEN GRUND HAT — bitte nicht wegnehmen.
   Ein festes Element kann nicht erben, was gerade unter ihm liegt; es
   steht außerhalb der Abschnitte im Stapel. Der erste Versuch war eine
   einzelne Tinte für alle Gründe. Gerechnet ging das auf: das Fenster
   zwischen 0,112 und 0,162 Luminanz schafft 3:1 gegen jede Flächenfarbe
   der Seite, --knall wäre mit 0,179 knapp zu hell (2,78:1 auf dem Gelb
   der Fahrschul-Welt), #cc004f mit 80 % Helligkeit dagegen sicher.

   Gemessen fiel es durch. Hinter dem Anker liegen nicht nur Flächen,
   sondern FOTOS — und auf schmaler Breite rutscht der Bildplatz genau
   unter ihn. Nachgemessen im Browser: 1,10:1 auf #606060, 1,20:1 auf
   #737373, 1,98:1 auf #989898. Ein Foto deckt den ganzen Luminanzbereich
   ab; gegen Fotos gibt es keine sichere Einzelfarbe. Punkt.

   Also bringt der Anker seinen Grund selbst mit — dieselbe Begründung
   wie bei der Leiste. Beide teilen sich EIN Feld: geschlossen ein
   Papierkreis, offen streckt er sich zur Leiste. Kein Schatten, keine
   Kontur: diese Seite kennt keinen einzigen box-shadow, und der Anker
   erfindet keine neue Sprache. Auf Papier verschwindet das Feld im
   Grund und nur das Zeichen steht da — genau richtig.
   KEIN mix-blend-mode: der hat uns am 30.07. schon einen komplett
   schwarzen Film beschert (siehe DESIGN-PRINZIPIEN, Teil B).
   ══════════════════════════════════════════════════════════════════════ */

:root{
  --anker-tinte:#cc004f;       /* --knall auf 80 % Helligkeit: 5,42:1 auf dem Feld */
  --anker-feld:#faf9f7;        /* der eigene Grund — macht den Kontrast   */
  --anker-feld-tinte:#111111;  /* unabhängig davon, was darunter liegt    */
  --anker-feld-leise:#5b5b5b;  /* 6,45:1 auf dem Feld                     */
}

/* Ohne Scroll-Zeitachse gibt es den Anker nicht: Er müsste sonst von
   Anfang an sichtbar sein und stünde im Auftakt genau auf dem Logo des
   Kopfes. Dann lieber gar nicht — die Navigation im Kopf bleibt ja. */
.anker{display:none}

/* OBEN RECHTS, nicht links an der Satzkante — der Plan sah links vor,
   die Aufnahme widersprach: jede Welt trägt auf ihrer .schiene links
   selbst das Mainsicht-Zeichen. Der Anker stand dann als zweites,
   andersfarbiges Zeichen daneben und las sich als Fehler. Rechts setzt
   er die Kopf-Navigation genau dort fort, wo sie weggescrollt ist. */
.anker{
  position:fixed;
  top:var(--rand);
  right:var(--rand);
  z-index:50;
  flex-direction:row-reverse;   /* Zeichen außen, Leiste klappt nach innen */
  align-items:center;
  /* Geschlossen ist die Leiste 0 breit — der Kasten ist dann exakt der
     44-px-Kreis und fängt keine Klicks außerhalb davon ab. */
  background:var(--anker-feld);
  border-radius:22px;
}

/* Der Schalter ist für Zeigegeräte ohne Hover da — auf dem Handy gibt es
   kein Darüberfahren. Sichtbar ist er nie, fokussierbar immer. */
.anker__schalter{
  position:absolute;
  width:1px;height:1px;
  margin:0;
  opacity:0;
}
.anker__griff{
  display:flex;
  align-items:center;
  justify-content:center;
  min-width:44px;min-height:44px;   /* Tippziel */
  cursor:pointer;
}
/* Kleiner als im Kopf, und das mit Absicht: das Zeichen DREHT sich. Bei
   45 Grad ist seine Hüllbox (b+h)/√2 breit — bei 2,4 rem wären das 49 px
   und es ragte aus dem 44-px-Kreis heraus, in der Aufnahme sichtbar auf
   dem Wort daneben. 1,9 rem ergibt 39 px und bleibt drin. */
.anker__griff .zeichen{--zeichen-w:clamp(1.55rem,3vw,1.9rem)}
/* Flach in einer Farbe: Bei 2 rem trägt die Form, nicht die Zweitönigkeit.
   Der Rahmen steht hier auf voller Deckkraft — mit .72 wie im Kopf fiele
   er auf Schwarz auf 2,62:1. */
.anker .zeichen__rahmen{background:var(--anker-tinte);opacity:1}
.anker .zeichen__strich{background:var(--anker-tinte)}

.anker__wort{
  position:absolute;
  width:1px;height:1px;
  overflow:hidden;
  clip-path:inset(50%);
  white-space:nowrap;
}
.anker__schalter:focus-visible + .anker__griff{
  outline:2px solid var(--anker-tinte);
  outline-offset:3px;
}

/* Die Leiste ist kein zweites Element mit eigenem Grund, sondern
   dasselbe Feld, das sich streckt. Deshalb max-width statt Deckkraft
   allein — sonst läge geschlossen ein unsichtbarer Balken über dem
   Text darunter und finge jeden Klick ab. */
.anker__leiste{
  display:flex;
  align-items:center;
  gap:clamp(.7rem,2vw,1.4rem);
  margin:0;
  padding:0;
  list-style:none;
  color:var(--anker-feld-tinte);
  max-width:0;
  /* max-height muss mit: eine nur breitenlose Leiste behielte ihre Höhe
     und zöge das Feld zu einem hohen, leeren Streifen auseinander —
     schmal steht die Liste ja untereinander. */
  max-height:0;
  overflow:hidden;
  opacity:0;
  visibility:hidden;
  transition:max-width .42s var(--schwung),
             max-height .42s var(--schwung),
             padding .42s var(--schwung),
             opacity .24s var(--schwung),
             visibility .42s;
}
/* :focus-within ist Pflicht, nicht Kür — sonst ist die Leiste mit der
   Tastatur nicht erreichbar. Der Schalter deckt Tippgeräte ab. */
.anker:hover .anker__leiste,
.anker:focus-within .anker__leiste,
.anker__schalter:checked ~ .anker__leiste{
  max-width:62rem;
  max-height:32rem;
  padding:0 .1rem 0 clamp(.9rem,2vw,1.3rem);
  opacity:1;
  visibility:visible;
}
.anker__leiste a{
  display:flex;
  align-items:center;
  min-height:44px;
  text-decoration:none;
  font-family:Mono,monospace;
  font-size:clamp(.68rem,1.5vw,.74rem);
  letter-spacing:.14em;
  text-transform:uppercase;
  white-space:nowrap;
  color:var(--anker-feld-leise);
}
.anker__leiste a:hover,
.anker__leiste a:focus-visible{color:var(--anker-feld-tinte)}
.anker__leiste a[aria-current="page"]{color:var(--anker-feld-tinte)}
.anker__tat{color:var(--anker-tinte)!important;font-weight:700}

/* Schmal: vier Mono-Wörter nebeneinander brauchen über 400 px — bei
   390 px Gerätebreite geht das nicht auf. Also untereinander. */
@media (max-width:700px){
  /* Schmal steht die Liste untereinander — dann muss das Zeichen oben
     bleiben, sonst schwebt es mittig neben der dritten Zeile. */
  .anker{align-items:flex-start}
  .anker__leiste{flex-direction:column;align-items:flex-end;gap:0}
  .anker:hover .anker__leiste,
  .anker:focus-within .anker__leiste,
  .anker__schalter:checked ~ .anker__leiste{
    padding:.2rem .1rem .3rem clamp(.9rem,3vw,1.1rem);
  }
}

@supports (animation-timeline: scroll(root)){
  .anker{display:flex}

  /* Erst nach dem Auftakt: davor trägt der Kopf Logo und Navigation
     selbst, und beide stünden übereinander. */
  @keyframes anker-ein{
    0%{opacity:0;visibility:hidden}
    100%{opacity:1;visibility:visible}
  }
  .anker{
    animation:anker-ein linear both;
    animation-timeline:scroll(root);
    animation-range:calc(var(--auftakt) * .55) calc(var(--auftakt) * .95);
  }
}

@media (prefers-reduced-motion: no-preference){
  @supports (animation-timeline: scroll(root)){
    /* Scroll-getrieben, nicht zeitgetrieben: eine volle Umdrehung über
       das ganze Dokument. Wer nicht scrollt, sieht keine Bewegung. */
    /* SECHS Umdrehungen ueber das Dokument, nicht eine. Bei einer einzigen
       war die Bewegung auf 14 000 px Scrollstrecke praktisch unsichtbar —
       das Zeichen stand einfach da. Sechs ergibt auf der Startseite rund
       eine Umdrehung je zweieinhalb Bildschirmhoehen: deutlich zu sehen,
       ohne zu flirren. */
    @keyframes anker-dreh{to{transform:rotate(2160deg)}}
    .anker__griff .zeichen{
      animation:anker-dreh linear both;
      animation-timeline:scroll(root);
    }
  }
}


/* ── Schmal: Lesbarkeit und Tippziele ──
   Audit 02.08.: der UStG-Hinweis brach bei 390 px in 5 Kurzzeilen
   (52vw-Padding), und Kopf-Nav (29 px) wie Fusslinks (26 px) lagen unter
   der 44-px-Empfehlung fuer Touch. Padding statt Schriftgroesse: die
   Anmutung bleibt, das Ziel waechst. */
@media (max-width:700px){
  .klein{padding-right:0}
}
@media (max-width:860px){
  /* 13px absolut, nicht .5em: die Nav laeuft in ~11.5px Mono, .5em waren
     also 6px — gemessen blieben 29px Zielhoehe. 13px oben+unten heben die
     17px-Zeile auf 43-45px. */
  .kopf__nav a{display:inline-block;padding-block:13px}
  .fuss a{display:inline-block;padding-block:13px}
}

/* ── Der Auftakt-Handgriff der Unterseiten ──
   Verstaendnis-Test 02.08. („eiliger Handwerksmeister"): auf keiner
   Unterseite war im ersten Viewport beantwortbar, was der Einstieg kostet —
   das staerkste Angebot (0 EUR) lag ueberall unter dem Fold, und der kleine
   Nav-Punkt liest sich als Menuepunkt, nicht als Handlung. Deshalb steht
   der Schnell-Check jetzt als Zeile im Auftakt jeder Unterseite — dieselbe
   Anlage wie auf der Startseite: grosser Text, Pfeil, keine Box (§ 3). */
.auftakt__tat{
  margin:clamp(1.4rem,4vh,2.2rem) 0 0;
  display:flex;
  flex-wrap:wrap;
  align-items:baseline;
  gap:.4em .9em;
}
.auftakt__tat a{
  display:inline-flex;
  align-items:center;
  gap:.6em;
  min-height:44px;
  text-decoration:none;
  font-family:Schibsted,sans-serif;
  font-weight:900;
  font-size:clamp(1rem,2.4vw,1.35rem);
  letter-spacing:-.02em;
  color:var(--knall-text);
}
.auftakt__tat a span{border-bottom:2px solid currentColor;padding-bottom:.06em}
.auftakt__tat a:hover .pfeil{transform:translateX(.22em)}
.auftakt__tat i{
  font-style:normal;
  font-family:Mono,monospace;
  font-size:clamp(0.7rem,1.4vw,.7rem);
  letter-spacing:.14em;
  color:var(--leise);
}


/* ── Das mitwachsende Feld im Schnell-Check ──
   Sadan, 02.08.: „jenachdem was man auswählt … kann ein feld optional
   kommen, was man will". Sichtbar bei „Neue Website" und „Nur eine Frage" —
   bei den zwei Pruef-Anliegen traegt das Website-Feld oben schon alles.
   Mechanik OHNE JavaScript: :has() auf dem Fieldset. Die Regel ist bewusst
   als VERSTECKEN der zwei Pruef-Faelle gebaut, nicht als Zeigen der zwei
   anderen: ein Browser ohne :has() zeigt das Feld dann IMMER — ein
   optionales Feld zu viel ist harmlos, ein fehlender Weg waere es nicht. */
.check__mehr{
  display:flex;
  align-items:flex-start;
  gap:inherit;
  margin:1.1em 0 0;
}
.anliegen:has(#anliegen-1:checked) ~ .check__mehr,
.anliegen:has(#anliegen-2:checked) ~ .check__mehr{display:none}
.check__feld--mehr{
  width:100%;
  max-width:44ch;
  resize:vertical;
  min-height:3.4em;
  font:inherit;
  line-height:1.4;
}
.check__optional{
  display:block;
  font-style:normal;
  font-family:Mono,monospace;
  font-size:.62rem;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--leise);
  margin-top:.35em;
}