/* SUPERYOLO — Stylesheet
   Farben und Schriften stammen aus 02-design/design-system.md */

:root{
  --magenta:  #E6007E;
  --gelb:     #FFD400;
  --schwarz:  #101010;
  --papier:   #FFF9EC;

  --titel:  "Archivo", system-ui, sans-serif;
  --pinsel: "Caveat Brush", cursive;
  --text:   "Chivo", system-ui, sans-serif;

  --spalte: 66ch;
  --luft:   clamp(3.5rem, 10vh, 8rem);
  --logo-h: 56px;
  --kopf-h: 79px;
  --kante:  4px solid var(--schwarz);
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth; scroll-padding-top:4.5rem}
body{
  margin:0; background:var(--papier); color:var(--schwarz);
  font-family:var(--text); font-weight:400; font-size:17px; line-height:1.6;
  overflow-x:hidden;
}
img,video{max-width:100%; height:auto; display:block}
a{color:var(--magenta)}
.bahn{max-width:1180px; margin:0 auto; padding:0 clamp(1.1rem,4vw,2.6rem); width:100%}
.streifen>*,.werte>*,.zweispalt>*,.stimmen>*,.zutaten>*{min-width:0}

/* ---------- Typografie ---------- */
h1,h2,h3{font-family:var(--titel); font-weight:900; font-stretch:112%;
  text-transform:uppercase; letter-spacing:-.03em; line-height:.92; margin:0}
h1{font-size:clamp(2.6rem,8vw,6.5rem)}
h2{font-size:clamp(1.9rem,5vw,3.8rem)}
h3{font-size:clamp(1.1rem,2.2vw,1.5rem); letter-spacing:-.015em}
p{margin:0 0 1.1rem; max-width:var(--spalte)}
.pinsel{font-family:var(--pinsel); font-weight:400; text-transform:none;
  letter-spacing:0; font-size:1.62em; line-height:.82; display:inline-block;
  transform:rotate(-2deg);
  /* dunkler Markerblock, damit die zarte Pinselschrift neben dem fetten
     Archivo nicht untergeht — Grundfassung für helle Untergründe */
  background:var(--schwarz); color:var(--gelb);
  padding:.07em .2em .13em;
  box-decoration-break:clone; -webkit-box-decoration-break:clone}

/* Auf dunklen Flächen dreht sich der Marker um */
.dunkel .pinsel,.schluss .pinsel{background:var(--gelb); color:var(--schwarz)}

/* ---------- Kopfzeile mit Navigation ---------- */
.kopf{position:sticky; top:0; z-index:60; background:var(--gelb);
  border-bottom:var(--kante); padding:.6rem 0}
.kopf .bahn{display:flex; align-items:center; justify-content:space-between; gap:.9rem; flex-wrap:wrap}
.marke{font-family:var(--titel); font-weight:900; font-stretch:112%;
  text-transform:uppercase; font-size:1.15rem; letter-spacing:-.02em; color:var(--magenta);
  text-decoration:none; flex-shrink:0}
.kopf .marke{display:block; line-height:0; padding:.1rem 0}
.kopf .marke img{display:block; height:var(--logo-h); width:auto;
  transition:transform .18s cubic-bezier(.2,.75,.3,1)}
.kopf .marke:hover img{transform:rotate(-2.5deg) scale(1.04)}
.marke em{font-family:var(--pinsel); font-style:normal; color:var(--schwarz);
  text-transform:none; font-size:1.35em; margin-left:.12em}
nav.haupt{display:flex; gap:1.2rem; flex-wrap:wrap; margin-left:auto}
nav.haupt a{font-family:var(--titel); font-weight:700; font-stretch:112%;
  text-transform:uppercase; font-size:.76rem; letter-spacing:.07em; color:var(--schwarz);
  text-decoration:none; padding:.3rem 0; border-bottom:3px solid transparent}
nav.haupt a:hover,nav.haupt a[aria-current]{border-bottom-color:var(--magenta); color:var(--magenta)}
.kopf a.knopf{font-size:.78rem; padding:.45rem .85rem; border-width:3px}

/* ---------- Knöpfe ---------- */
.knopf{display:inline-block; background:var(--magenta); color:#fff; text-decoration:none;
  font-family:var(--titel); font-weight:900; font-stretch:112%; text-transform:uppercase;
  letter-spacing:.04em; font-size:1rem; padding:.95rem 1.6rem;
  border:var(--kante); transition:transform .12s, background .12s, box-shadow .12s}
.knopf:hover{background:var(--schwarz); transform:translate(-2px,-2px); box-shadow:5px 5px 0 var(--schwarz)}
.knopf.hell{background:var(--gelb); color:var(--schwarz)}
.knopf.hell:hover{background:#fff; box-shadow:5px 5px 0 var(--schwarz)}

/* ---------- Held mit Video, Text links und rechts ---------- */
.held{position:relative; background:var(--magenta); border-bottom:var(--kante); overflow:hidden;
  height:clamp(520px, calc(100svh - var(--kopf-h)), 1000px)}
.held video{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block}
.held .schleier{position:absolute; inset:0; pointer-events:none;
  background:
    linear-gradient(90deg, rgba(230,0,126,.9) 0%, rgba(230,0,126,.45) 20%, rgba(230,0,126,0) 36%),
    linear-gradient(270deg, rgba(230,0,126,.85) 0%, rgba(230,0,126,.3) 16%, rgba(230,0,126,0) 32%)}
.held .inhalt{position:absolute; inset:0; display:flex; align-items:center; pointer-events:none}
/* Randbuendig statt in der Mittelspalte: Text klebt links und rechts am Bildschirmrand */
.held .inhalt .bahn{max-width:none; padding-inline:clamp(1.2rem,3vw,3.2rem);
  display:grid; grid-template-columns:minmax(0,auto) minmax(0,1fr) minmax(0,auto);
  gap:clamp(1rem,3vw,2.5rem); align-items:center}
.held .links,.held .rechts{pointer-events:auto}
.held .rechts{text-align:right}
.held h1{color:var(--gelb); font-size:clamp(2.8rem,7.5vw,7.5rem); text-shadow:0 0 34px rgba(16,16,16,.4); max-width:11ch}
.held h1 .pinsel{background:none; color:var(--papier);
  display:block; width:fit-content; font-size:1.92em; line-height:.76;
  padding:0; margin-top:.04em}
.held .satz{color:var(--papier); font-size:clamp(1rem,1.4vw,1.18rem); max-width:24ch; margin:1.2rem 0 1.6rem;
  text-shadow:0 0 18px rgba(16,16,16,.5)}
.fakt{display:block; background:var(--gelb); color:var(--schwarz); border:3px solid var(--schwarz);
  padding:.55rem .8rem; margin-bottom:.7rem; transform:rotate(1.5deg)}
.fakt:nth-child(even){transform:rotate(-2deg); background:var(--papier)}
.fakt b{display:block; font-family:var(--titel); font-weight:900; font-stretch:112%;
  font-size:1.5rem; line-height:1; letter-spacing:-.03em; color:var(--magenta)}
.fakt span{display:block; font-size:.78rem; line-height:1.25; margin-top:.2rem}
@media(max-width:980px){
  .held .inhalt{position:static; padding:2.2rem 0}
  .held .inhalt .bahn{grid-template-columns:1fr; gap:1.4rem}
  .held .rechts{text-align:left; display:flex; gap:.7rem; flex-wrap:wrap}
  .fakt{margin-bottom:0; flex:1 1 130px}
  .held .schleier{display:none}
  .held{height:auto}
  .held video{position:static; height:clamp(260px,50vh,440px)}
  .held .inhalt .bahn{padding-inline:clamp(1.1rem,4vw,2.6rem)}
  .held h1{max-width:none}
}

/* ---------- Laufband ---------- */
.laufband{background:var(--schwarz); color:var(--gelb); border-bottom:var(--kante);
  overflow:hidden; padding:.7rem 0; white-space:nowrap}
.laufband .spur{display:inline-block; animation:laufen 30s linear infinite}
.laufband b{font-family:var(--titel); font-weight:900; font-stretch:112%;
  text-transform:uppercase; font-size:1.05rem; letter-spacing:.02em; padding:0 1.1rem}
.laufband b::after{content:"✱"; color:var(--magenta); margin-left:1.1rem}
@keyframes laufen{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* ---------- Abschnitte ---------- */
section{padding:var(--luft) 0}
.dunkel{background:var(--schwarz); color:var(--papier)}
.dunkel h2{color:var(--gelb)}
.gelbflaeche{background:var(--gelb); border-block:var(--kante)}

.zweispalt{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(1.6rem,4vw,4rem); align-items:center}
.zweispalt.breit-links{grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr)}
.zweispalt.breit-rechts{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr)}
@media(max-width:860px){.zweispalt,.zweispalt.breit-links,.zweispalt.breit-rechts{grid-template-columns:1fr}}
.zweispalt img{border:var(--kante)}
.kipp-links img{transform:rotate(-1.8deg)}
.kipp-rechts img{transform:rotate(1.8deg)}
.vorspann{font-size:clamp(1.05rem,1.6vw,1.25rem); max-width:52ch; margin-top:1.2rem}

/* ---------- Zahlen ---------- */
.werte{display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
  gap:0; border:var(--kante); margin-top:2.5rem; background:var(--schwarz)}
.wert{background:var(--papier); padding:1.5rem 1.3rem; transition:background .15s}
.wert:hover{background:var(--gelb)}
.wert b{display:block; font-family:var(--titel); font-weight:900; font-stretch:112%;
  font-size:clamp(2.2rem,4vw,3.2rem); line-height:.9; color:var(--magenta); letter-spacing:-.03em}
.wert span{display:block; margin-top:.4rem; font-size:.92rem; line-height:1.35}

/* ---------- Ehrlich-Liste ---------- */
.ehrlich{list-style:none; padding:0; margin:2rem 0 0; max-width:var(--spalte)}
.ehrlich li{padding:1.1rem 0 1.1rem 3.2rem; border-top:2px solid currentColor; position:relative}
.ehrlich li:last-child{border-bottom:2px solid currentColor}
.ehrlich li::before{content:attr(data-nr); position:absolute; left:0; top:.85rem;
  font-family:var(--titel); font-weight:900; font-stretch:112%; font-size:1.7rem;
  line-height:1; color:var(--gelb)}
.ehrlich b{font-family:var(--titel); font-weight:900; font-stretch:112%;
  text-transform:uppercase; font-size:1.05rem; letter-spacing:-.01em; display:block; margin-bottom:.25rem}

/* ---------- Bildstreifen ---------- */
.streifen{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:0;
  border-block:var(--kante); overflow:hidden}
@media(max-width:700px){.streifen{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .streifen img:last-child{display:none}}
.streifen img{width:100%; height:100%; object-fit:cover; border-right:var(--kante);
  transition:transform .35s}
.streifen img:last-child{border-right:0}
.streifen img:hover{transform:scale(1.05)}

/* ---------- Kundenstimmen ---------- */
.stimmen{display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  gap:1.4rem; margin-top:2.5rem}
.stimme{background:var(--papier); border:var(--kante); padding:1.4rem 1.5rem;
  transition:transform .18s}
.stimme:nth-child(3n+1){transform:rotate(-1.2deg)}
.stimme:nth-child(3n+2){transform:rotate(.8deg)}
.stimme:nth-child(3n){transform:rotate(1.6deg)}
.stimme:hover{transform:rotate(0) translateY(-5px)}
.stimme blockquote{margin:0 0 1.1rem; font-size:1.06rem; line-height:1.45}
/* Kein Deko-Anfuehrungszeichen: die echten Zeichen stehen im Text. */
.stimme cite{margin-top:.2rem}
.stimme cite{font-style:normal; font-family:var(--titel); font-weight:900; font-stretch:112%;
  text-transform:uppercase; font-size:.82rem; letter-spacing:.02em; display:block}
.stimme small{display:block; font-size:.8rem; color:#6B6155; margin-top:.15rem}
.satire{background:var(--schwarz); color:var(--gelb); border:var(--kante); padding:.9rem 1.2rem;
  margin-top:2.2rem; font-size:.9rem; max-width:64ch; transform:rotate(-.5deg)}

/* ---------- Zutaten ---------- */
.zutaten{display:grid; grid-template-columns:repeat(auto-fit,minmax(210px,1fr));
  gap:1.3rem; margin-top:2.5rem}
.zutat{border:var(--kante); background:var(--papier); overflow:hidden}
.zutat img{width:100%; aspect-ratio:1/1; object-fit:cover; border-bottom:var(--kante);
  transition:transform .35s}
.zutat:hover img{transform:scale(1.06)}
.zutat .txt{padding:1rem 1.1rem}
.zutat b{display:block; font-family:var(--titel); font-weight:900; font-stretch:112%;
  text-transform:uppercase; font-size:1rem; letter-spacing:-.01em; margin-bottom:.3rem}
.zutat span{font-size:.92rem; line-height:1.4; display:block}

/* ---------- Kombiniertes Schlussband ---------- */
.schluss{position:relative; border-block:var(--kante); background:var(--magenta); overflow:hidden;
  min-height:clamp(420px,62vh,660px); display:flex; align-items:center}
.schluss img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:72% center}
.schluss .schleier{position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(90deg, rgba(230,0,126,.96) 0%, rgba(230,0,126,.82) 32%, rgba(230,0,126,0) 62%)}
.schluss .inhalt{position:relative; width:100%; padding-block:var(--luft)}
.schluss .kasten{max-width:34rem}
.schluss h2{color:var(--gelb)}
.schluss p{color:var(--papier); max-width:38ch; margin-top:1.1rem}
@media(max-width:860px){
  .schluss{min-height:0; display:block}
  .schluss img{position:static; height:clamp(200px,32vh,320px)}
  .schluss .schleier{display:none}
  .schluss .inhalt{padding-block:2.5rem}
}

/* ---------- Fuß ---------- */
footer{background:var(--schwarz); color:var(--papier); padding:3rem 0 2.5rem; font-size:.92rem}
footer a{color:var(--gelb)}
footer .zeilen{display:flex; gap:1.6rem; flex-wrap:wrap; margin-top:.9rem}
.demo{background:var(--gelb); color:var(--schwarz); border-top:var(--kante);
  padding:.9rem 0; font-size:.88rem; text-align:center; font-weight:700}

/* ---------- Unterseiten und Rechtstexte ---------- */
.rechtstext{padding:var(--luft) 0}
.rechtstext h1{font-size:clamp(2rem,5vw,3.4rem); margin-bottom:1.6rem}
.rechtstext h2{font-size:clamp(1.2rem,2.2vw,1.6rem); margin:2.2rem 0 .6rem}
.luecke{background:var(--gelb); border:3px solid var(--schwarz); padding:.12em .4em;
  font-family:var(--titel); font-weight:700; font-size:.85em; text-transform:uppercase;
  letter-spacing:.03em; display:inline-block}
.seitenkopf{background:var(--magenta); color:var(--papier); border-bottom:var(--kante);
  padding:clamp(2.6rem,6vh,4.6rem) 0}
.seitenkopf h1{color:var(--gelb); font-size:clamp(2.4rem,6vw,4.6rem)}
.seitenkopf h1 .pinsel{background:var(--papier); color:var(--magenta)}
.seitenkopf p{color:var(--papier); margin-top:1.1rem; max-width:52ch;
  font-size:clamp(1.05rem,1.6vw,1.25rem)}

/* ---------- Nährwerttabelle ---------- */
.naehrwerte{width:100%; border-collapse:collapse; max-width:38rem; margin-top:1.6rem;
  border:var(--kante); background:var(--papier)}
.naehrwerte th{font-family:var(--titel); font-weight:900; font-stretch:112%; text-transform:uppercase;
  font-size:.76rem; letter-spacing:.08em; text-align:left; padding:.7rem .9rem;
  background:var(--schwarz); color:var(--gelb)}
.naehrwerte td{padding:.65rem .9rem; border-top:2px solid var(--schwarz); font-size:.95rem}
.naehrwerte td:last-child{text-align:right; font-family:var(--titel); font-weight:700; font-stretch:112%}

/* ---------- Bewegung ---------- */
.js .auf{opacity:0; transform:translateY(1.8rem);
  transition:opacity .7s cubic-bezier(.2,.75,.3,1), transform .7s cubic-bezier(.2,.75,.3,1)}
.js .auf.da{opacity:1; transform:none}
@media (prefers-reduced-motion: reduce){
  *{animation:none !important; transition:none !important}
  .js .auf{opacity:1; transform:none}
}

/* ================= Wachheitsmesser ================= */
.messer{background:var(--magenta); color:var(--papier); border-block:var(--kante)}
.messer h2{color:var(--gelb)}
.messer .kasten{max-width:44rem; margin-top:2rem; background:var(--papier); color:var(--schwarz);
  padding:1.8rem 1.9rem; position:relative}
.messer label{display:block; font-family:var(--titel); font-weight:900; font-stretch:112%;
  text-transform:uppercase; font-size:.85rem; letter-spacing:.06em; margin-bottom:1rem}
.messer input[type=range]{width:100%; accent-color:var(--magenta); height:2rem; cursor:grab}
.messer input[type=range]:active{cursor:grabbing}
.skala{display:flex; justify-content:space-between; font-size:.76rem; margin-top:-.4rem;
  font-family:var(--titel); font-weight:700; font-stretch:112%; text-transform:uppercase; letter-spacing:.05em}
.ergebnis{margin-top:1.6rem; border-top:3px solid var(--schwarz); padding-top:1.2rem}
.ergebnis .dosen{font-family:var(--titel); font-weight:900; font-stretch:112%;
  font-size:clamp(1.8rem,4vw,2.8rem); line-height:1; color:var(--magenta); letter-spacing:-.03em;
  text-transform:uppercase; display:block}
.ergebnis .spruch{display:block; margin-top:.5rem; font-size:1.05rem; max-width:44ch}

/* ================= Zahlen zählen hoch ================= */
.wert b{font-variant-numeric:tabular-nums}

/* ================= Karten folgen dem Zeiger ================= */
.stimme{will-change:transform}




/* ================= Laufende Linien im Hintergrund ================= */
.gelbflaeche,.messer,.dunkel{position:relative; overflow:hidden}
.gelbflaeche>*,.messer>*,.dunkel>*{position:relative; z-index:1}
.gelbflaeche::before,.messer::before,.dunkel::before{
  content:""; position:absolute; inset:-40%; pointer-events:none; z-index:0;
  background:repeating-linear-gradient(90deg,
    rgba(16,16,16,.11) 0 4px, transparent 4px 52px);
  transform:rotate(-13deg);
  animation:linienlauf 7s linear infinite}
.messer::before{background:repeating-linear-gradient(90deg,
    rgba(255,212,0,.16) 0 4px, transparent 4px 52px)}
.dunkel::before{background:repeating-linear-gradient(90deg,
    rgba(255,212,0,.09) 0 3px, transparent 3px 60px);
  animation-duration:11s; animation-direction:reverse}
@keyframes linienlauf{
  from{transform:rotate(-13deg) translateX(0)}
  to{transform:rotate(-13deg) translateX(-52px)}}

@media (prefers-reduced-motion: reduce){
  .gelbflaeche::before,.messer::before,.dunkel::before{animation:none}
}

/* --- Bildband unter dem Seitenkopf (Unterseiten) --- */
.band{border-bottom:var(--kante); overflow:hidden; background:var(--magenta)}
.band img{display:block; width:100%; height:clamp(200px,26vw,340px); object-fit:cover; object-position:center 32%}

/* --- Bildmarke auf kleinen Schirmen --- */
@media (max-width: 640px){
  :root{--logo-h:42px; --kopf-h:65px}
}