/* LangRadar
 *
 * Farbregel (nicht dekorativ):
 *   --masz  (#E8B830) = Maß / Größe
 *           Messlatte, Zahlen, Maßband, Größen-Kicker, Maßangaben in Listen
 *   --gruen (#1E7A46) = Verfügbarkeit
 *           „lieferbar“ / „zu kaufen“, Status-Punkt, später Lager-Badges
 * Gelb oder Grün an einer Stelle ohne diese Bedeutung: nicht verwenden.
 * Auf gelber Hero-Fläche ist die Fläche selbst das Material „Maßband“;
 * Verfügbarkeits-Text dort in --gruen-tief (Kontrast auf Gelb).
 */

@font-face{
  font-family:"Anybody";
  font-style:normal;
  font-display:swap;
  font-weight:100 900;
  font-stretch:50% 150%;
  src:url("fonts/anybody-latin.woff2") format("woff2-variations");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:"Anybody";
  font-style:normal;
  font-display:swap;
  font-weight:100 900;
  font-stretch:50% 150%;
  src:url("fonts/anybody-latin-ext.woff2") format("woff2-variations");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face{
  font-family:"Public Sans";
  font-style:normal;
  font-display:swap;
  font-weight:100 900;
  src:url("fonts/public-sans-latin.woff2") format("woff2-variations");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:"Public Sans";
  font-style:normal;
  font-display:swap;
  font-weight:100 900;
  src:url("fonts/public-sans-latin-ext.woff2") format("woff2-variations");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face{
  font-family:"Martian Mono";
  font-style:normal;
  font-display:swap;
  font-weight:100 800;
  font-stretch:75% 112.5%;
  src:url("fonts/martian-mono-latin.woff2") format("woff2-variations");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:"Martian Mono";
  font-style:normal;
  font-display:swap;
  font-weight:100 800;
  font-stretch:75% 112.5%;
  src:url("fonts/martian-mono-latin-ext.woff2") format("woff2-variations");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

:root{
  --papier:#E7EBE4;
  --papier-2:#F2F4F0;
  --tinte:#1A1D22;
  --masz:#E8B830;
  --gruen:#1E7A46;
  --gruen-tief:#14532D;
  --nebel:#67707A;
  --linie:#C9CFC4;
  --rail:80px;
  --display:"Anybody",system-ui,sans-serif;
  --sans:"Public Sans",system-ui,sans-serif;
  --mono:"Martian Mono",ui-monospace,monospace;
  --t-hero:clamp(2.75rem,11vw,6.5rem);
  --t-h2:clamp(1.6rem,5vw,2.6rem);
  --t-lead:clamp(1.05rem,2.6vw,1.35rem);
  --t-body:1rem;
  --t-label:0.78rem;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

body{
  margin:0;
  position:relative;
  background:var(--papier);
  color:var(--tinte);
  font-family:var(--sans);
  font-size:var(--t-body);
  font-weight:400;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
}

/* ── Messlatte: eine Skala 210 cm (oben) bis 150 cm (unten) ── */
.messlatte{
  position:absolute;
  top:0;bottom:0;left:0;
  width:var(--rail);
  z-index:10;
  pointer-events:none;
}
.messlatte-skala{
  position:absolute;
  inset:0;
  border-right:3px solid var(--masz);
  background:
    repeating-linear-gradient(
      to bottom,
      var(--masz) 0, var(--masz) 1px,
      transparent 1px, transparent calc(100% / 60)
    ),
    repeating-linear-gradient(
      to bottom,
      var(--masz) 0, var(--masz) 2px,
      transparent 2px, transparent calc(100% / 6)
    );
  background-position:right top;
  background-size:12px 100%, 28px 100%;
  background-repeat:repeat-y;
}
.messlatte-skala > .cm{
  position:absolute;
  right:32px;
  top:calc((210 - var(--cm)) / 60 * 100%);
  transform:translateY(-50%) rotate(180deg);
  writing-mode:vertical-rl;
  font-family:var(--mono);
  font-stretch:75%;
  font-weight:600;
  font-size:.7rem;
  letter-spacing:.06em;
  color:var(--masz);
  background:var(--papier);
  padding:8px 0;
}
.messlatte-dock{
  position:absolute;
  right:0;
  transform:translate(0,-50%);
  font-family:var(--mono);
  font-stretch:115%;
  font-weight:700;
  font-size:.72rem;
  color:var(--tinte);
  background:var(--masz);
  padding:.2rem .35rem .2rem .5rem;
  white-space:nowrap;
}
.messlatte-hier{
  position:sticky;
  top:42vh;
  height:0;
  margin-left:auto;
  width:0;
}
.messlatte-hier::before{
  content:"";
  position:absolute;
  right:0;
  top:0;
  width:var(--rail);
  height:3px;
  background:var(--tinte);
}
.messlatte-cm{
  position:absolute;
  right:8px;
  top:.4rem;
  font-family:var(--mono);
  font-stretch:115%;
  font-weight:700;
  font-size:.72rem;
  color:var(--tinte);
  background:var(--masz);
  padding:.15rem .35rem;
}
.messlatte-cm:empty{display:none}

.fortschritt{
  display:none;
  position:fixed;
  top:0;left:0;right:0;
  height:4px;
  background:var(--linie);
  z-index:20;
}
.fortschritt i{
  display:block;
  height:100%;
  width:100%;
  background:var(--masz);
  transform:scaleX(0);
  transform-origin:left center;
}

main,header.kopf,footer.fuss{margin-left:var(--rail)}

/* ── Kopf ───────────────────────────────────────────────────── */
header.kopf{
  display:grid;
  grid-template-columns:1fr auto;
  grid-template-areas:"marke status" "claim status";
  align-items:baseline;
  column-gap:1rem;
  padding:1.1rem clamp(1.2rem,4vw,3.5rem) 1rem;
  border-bottom:1px solid var(--linie);
  background:var(--papier);
}
.wortmarke{
  grid-area:marke;
  font-family:var(--display);
  font-stretch:85%;
  font-weight:800;
  font-size:1.2rem;
  letter-spacing:-.02em;
  color:var(--tinte);
  text-decoration:none;
  display:inline-flex;
  align-items:center;
  gap:.4rem;
}
.wortmarke .tick{
  width:16px;height:8px;
  background-color:var(--masz);
  background-image:
    linear-gradient(var(--tinte),var(--tinte)),
    linear-gradient(var(--tinte),var(--tinte)),
    linear-gradient(var(--tinte),var(--tinte));
  background-size:1px 4px, 1px 6px, 1px 8px;
  background-position:4px bottom, 9px bottom, 14px bottom;
  background-repeat:no-repeat;
  flex:none;
}
.kopf-claim{
  grid-area:claim;
  margin:0;
  font-family:var(--mono);
  font-stretch:75%;
  font-size:var(--t-label);
  letter-spacing:.04em;
  color:var(--nebel);
}
.kopf-status{
  grid-area:status;
  font-family:var(--mono);
  font-stretch:75%;
  font-size:var(--t-label);
  letter-spacing:.04em;
  color:var(--nebel);
  display:inline-flex;
  align-items:center;
  gap:.45rem;
}
.kopf-status i{
  display:block;
  width:12px;height:3px;
  background:var(--masz);
  flex:none;
}

/* ── Inhalt ─────────────────────────────────────────────────── */
.bahn{max-width:46rem;padding:0 clamp(1.2rem,4vw,3.5rem)}

.hero{
  background:var(--masz);
  color:var(--tinte);
  padding:clamp(2.4rem,8vh,5.2rem) 0 clamp(2rem,6vh,3.2rem);
}
.hero h1{
  margin:0;
  font-family:var(--display);
  font-stretch:75%;
  font-weight:800;
  font-size:var(--t-hero);
  letter-spacing:-.02em;
  line-height:.98;
  text-transform:none;
}
.hero h1 .zahl{
  font-stretch:115%;
}
.hero h1 small{
  display:block;
  font-family:var(--sans);
  font-stretch:normal;
  font-size:var(--t-lead);
  font-weight:400;
  letter-spacing:0;
  line-height:1.45;
  color:var(--tinte);
  margin-top:1.15rem;
  max-width:38rem;
}
.hero h1 small .ok{
  color:var(--gruen-tief);
  font-weight:600;
}

.status{
  display:inline-flex;align-items:center;gap:.55rem;
  margin-top:1.6rem;
  font-family:var(--mono);
  font-stretch:75%;
  font-size:var(--t-label);
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--tinte);
  border:1.5px solid var(--tinte);
  padding:.5rem .9rem;
}
.punkt{width:.55rem;height:.55rem;border-radius:50%;background:var(--gruen);flex:none}

.massband{
  height:26px;
  background:
    repeating-linear-gradient(to right,
      var(--tinte) 0,var(--tinte) 2px,transparent 2px,transparent 10px),
    repeating-linear-gradient(to right,
      var(--tinte) 0,var(--tinte) 2px,transparent 2px,transparent 50px),
    var(--masz);
  background-size:10px 9px,50px 17px,100% 100%;
  background-position:left bottom,left bottom,center;
  background-repeat:repeat-x,repeat-x,no-repeat;
  border-top:2px solid var(--tinte);
  border-bottom:2px solid var(--tinte);
}

section{padding:clamp(2.4rem,6vh,4rem) 0 0}
section:last-of-type{padding-bottom:clamp(3rem,8vh,5rem)}

.marke{
  display:flex;
  align-items:center;
  gap:.65rem;
  font-family:var(--mono);
  font-stretch:75%;
  font-size:var(--t-label);
  letter-spacing:0;
  text-transform:none;
  color:var(--masz);
  margin:0 0 .55rem;
}
.marke::after{
  content:"";
  width:1.6rem;
  height:3px;
  background:var(--masz);
  flex:none;
}
.marke .zahl{
  font-stretch:115%;
  font-weight:700;
  font-size:1.05rem;
}

h2{
  font-family:var(--display);
  font-stretch:80%;
  font-size:var(--t-h2);
  font-weight:700;
  letter-spacing:-.02em;
  line-height:1.15;
  margin:0 0 1rem;
}
p{margin:0 0 1.05rem;max-width:38rem}
p:last-child{margin-bottom:0}
.leise{color:var(--nebel)}
a{color:inherit;text-decoration-color:var(--tinte);text-decoration-thickness:2px;text-underline-offset:3px}
a:hover{text-decoration-thickness:3px}
a:focus-visible,.wortmarke:focus-visible,.mail:focus-visible{
  outline:3px solid var(--tinte);
  outline-offset:3px;
  text-decoration:none;
}

.masse{list-style:none;margin:1.4rem 0 0;padding:0;max-width:38rem}
.masse li{
  display:grid;grid-template-columns:7.5rem 1fr;gap:1rem;align-items:baseline;
  padding:.85rem 0;border-top:1px solid var(--linie);
}
.masse li:last-child{border-bottom:1px solid var(--linie)}
.masse .wert{
  font-family:var(--mono);
  font-stretch:115%;
  font-weight:700;
  font-size:1rem;
  letter-spacing:.01em;
  white-space:nowrap;
  color:var(--masz);
}
.masse .was b{font-weight:600}

/* Einziger brutalistischer Block */
.versprechen{
  background:var(--tinte);
  color:var(--papier);
  padding:1.8rem 1.7rem 1.6rem;
  max-width:38rem;
  margin-top:1.1rem;
  border-radius:0;
  box-shadow:10px 10px 0 var(--masz);
}
.versprechen-laut{
  font-family:var(--display);
  font-stretch:115%;
  font-weight:800;
  font-size:clamp(2rem,6vw,3.2rem);
  line-height:.9;
  letter-spacing:-.02em;
  color:var(--masz);
  margin:0 0 1rem;
}
.versprechen p{margin-bottom:.7rem}
.versprechen p:last-child{margin-bottom:0}
@media (min-width:768px){
  .versprechen{
    transform:rotate(-1deg);
    margin-right:-1.5rem;
  }
}
@media (prefers-reduced-motion:reduce){
  .versprechen{transform:none}
  .fortschritt i{transition:none}
}

.mail{
  display:inline-block;margin-top:.4rem;
  font-family:var(--mono);
  font-stretch:75%;
  font-size:1.05rem;
  font-weight:700;
  letter-spacing:.01em;
}

footer.fuss{
  border-top:2px solid var(--tinte);
  padding:1.4rem clamp(1.2rem,4vw,3.5rem) 2.2rem;
  font-size:.9rem;color:var(--nebel);
}
footer.fuss nav{display:flex;flex-wrap:wrap;gap:1.4rem;margin-bottom:.7rem}
footer.fuss a{color:var(--tinte)}
footer.fuss .claim{
  font-family:var(--display);
  font-stretch:85%;
  font-weight:700;
  font-size:1rem;
  letter-spacing:0;
  color:var(--tinte);
  margin:0 0 .25rem;
  text-transform:none;
}
footer.fuss .claim-sub{
  font-family:var(--mono);
  font-stretch:75%;
  font-size:var(--t-label);
  letter-spacing:.04em;
  margin:0;
}

.recht h1{
  font-family:var(--display);
  font-stretch:80%;
  font-size:clamp(1.9rem,5vw,2.8rem);
  font-weight:800;
  letter-spacing:-.02em;
  margin:clamp(2.2rem,6vh,3.5rem) 0 1.6rem;
}
.recht h2{font-size:1.2rem;margin-top:2.2rem}
.recht h3{font-size:1.02rem;margin:1.6rem 0 .5rem}
.recht address{font-style:normal}
.recht .platzhalter{
  background:var(--papier-2);
  outline:2px solid var(--tinte);
  padding:0 .3em;
  font-family:var(--mono);
  font-stretch:75%;
  font-size:.92em;
}
.recht section:last-of-type{padding-bottom:clamp(3rem,8vh,5rem)}

@media (max-width:640px){
  :root{--rail:0px}
  .messlatte{display:none}
  .fortschritt{display:block}
  .masse li{grid-template-columns:1fr;gap:.15rem}
  header.kopf{
    grid-template-columns:1fr;
    grid-template-areas:"marke" "claim" "status";
    gap:.15rem;
  }
  .versprechen{box-shadow:8px 8px 0 var(--masz)}
}