/* Anton lokal (DSGVO): keine Google Fonts */
@font-face{font-family:"Anton";font-style:normal;font-weight:400;font-display:swap;src:url(../fonts/Anton-Regular.woff2) format("woff2")}
/* ============================================================
   schwarz. Report-Stil, gemeinsame Basis
   Machart nach den Referenzbildern (redesign/ref/ref1..ref4.png):
   schwarze Kopfleiste, Anton-Versalien, winzige Mono-Labels,
   randlose Bildspalten, Registriermarken, fehlregistrierte Marker.
   Wird von g-report2.html, h-report3.html und Unterseiten geladen.
   ============================================================ */

/* ---------- 1. Tokens ---------- */
:root{
  --paper:#E8EDEB;
  --paper-2:#DEE5E2;
  --ink:#0E0E0E;
  --ink-75:rgba(14,14,14,.75);
  --ink-60:rgba(14,14,14,.60);
  --ink-45:rgba(14,14,14,.45);
  --ink-28:rgba(14,14,14,.28);
  --orange:#B6FF1B;            /* Runde 8: Grün statt Orange */
  --acid:#B6FF1B;

  /* Haarlinien: nie schwarze Balken */
  --hair:rgba(14,14,14,.18);
  --hair-2:rgba(14,14,14,.32);
  --hair-w:1px;

  --mono:"Helvetica Neue",Helvetica,Arial,sans-serif;
  --sans:"Helvetica Neue",Helvetica,Arial,sans-serif;
  --disp:"Anton",Impact,sans-serif;

  /* Typo-Skala nach Referenz */
  --t-display:clamp(3.4rem,11.4vw,10.5rem);
  --t-h1:clamp(2.6rem,8.4vw,7.4rem);
  --t-h2:clamp(2.1rem,4.6vw,4.1rem);
  --t-h3:clamp(1.05rem,1.45vw,1.4rem);
  --t-lead:clamp(.95rem,1.1vw,1.06rem);
  --t-body:clamp(.8rem,.85vw,.9rem);
  --t-small:clamp(.72rem,.78vw,.78rem);
  --t-mono:11px;
  --t-mono-s:10px;
  --t-label:8.5px;
  --t-micro:7.5px;

  /* Raster und Rhythmus */
  --gut:clamp(16px,3.6vw,56px);
  --sec:clamp(64px,7.4vw,118px);
  --sec-s:clamp(40px,4.8vw,74px);
  --col-gap:clamp(18px,3vw,48px);
  --max:1680px;
  --hd:54px;
  --nav-h:var(--hd);

  --ease:cubic-bezier(.22,.68,.24,1);
  --glow-orange:0 0 0 1px rgba(182,255,27,.5),0 0 30px rgba(182,255,27,.32);
  --glow-acid:0 0 26px rgba(182,255,27,.5);
}

/* ---------- 2. Reset ---------- */
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:var(--sans);font-weight:400;
  font-size:var(--t-body);line-height:1.7;overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
img{display:block;max-width:100%}
a{color:inherit}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
a,button,input,summary{cursor:pointer}
:focus-visible{outline:2px solid var(--orange);outline-offset:3px}
section:focus,section:focus-visible{outline:none}
::selection{background:var(--acid);color:var(--ink)}

/* ---------- 3. Typo-Grundelemente ---------- */
.disp{
  font-family:var(--disp);font-weight:900;text-transform:uppercase;
  line-height:.84;letter-spacing:.005em;margin:0;
  font-size:var(--t-display);
}
.disp-1{font-size:var(--t-h1);line-height:.86}
.disp-2{font-size:var(--t-h2);line-height:.88}
.disp-3{font-size:clamp(1.5rem,2.6vw,2.3rem);line-height:.92;font-weight:700}

/* Alt-Klassen, damit g-report2 weiter funktioniert */
.display{font-family:var(--disp);font-weight:900;font-size:var(--t-h1);line-height:.86;letter-spacing:.005em;text-transform:uppercase;margin:0}
.h2{font-family:var(--disp);font-weight:900;font-size:var(--t-h2);line-height:.9;text-transform:uppercase;margin:0}
.h3{font-weight:600;font-size:var(--t-h3);line-height:1.25;margin:0}

.lead{font-size:var(--t-lead);line-height:1.6;max-width:36ch;margin:0}
.body{font-size:var(--t-body);line-height:1.62;max-width:46ch;margin:0}
.small{font-size:var(--t-small);line-height:1.6;margin:0}
.mono{font-family:var(--mono);font-size:var(--t-mono);letter-spacing:.14em;text-transform:uppercase;line-height:1.7}
.mono-s{font-family:var(--mono);font-size:var(--t-mono-s);letter-spacing:.16em;text-transform:uppercase;line-height:1.7}
.dim{color:var(--ink-60)}
.k{color:var(--orange)}

/* Winziges Label in eckigen Klammern */
.lbl{
  font-family:var(--mono);font-size:var(--t-label);letter-spacing:.2em;
  text-transform:uppercase;color:var(--ink-60);line-height:1;white-space:nowrap;
}
.lbl::before{content:"[ "}
.lbl::after{content:" ]"}
.lbl.plain::before,.lbl.plain::after{content:none}
.tag{font-family:var(--mono);font-size:var(--t-label);letter-spacing:.22em;text-transform:uppercase;color:var(--ink-45);line-height:1}

/* ---------- 4. Layout ---------- */
.wrap{max-width:var(--max);margin:0 auto;padding-left:var(--gut);padding-right:var(--gut)}
.sec{position:relative;padding-top:var(--sec);padding-bottom:var(--sec);scroll-margin-top:calc(var(--hd) + 2px)}
.sec.tight{padding-top:var(--sec-s);padding-bottom:var(--sec-s)}
.sec.flush{padding:0}
.sec + .sec{border-top:var(--hair-w) solid var(--hair)}
.sec-head{display:flex;align-items:flex-end;justify-content:space-between;gap:var(--col-gap);flex-wrap:wrap;margin-bottom:clamp(26px,3.4vw,52px)}
.cols{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--col-gap)}
.stack-lg{display:flex;flex-direction:column;gap:clamp(24px,3vw,48px)}
.sec > .tag{position:absolute;top:calc(var(--sec) * .4);left:var(--gut)}
.sec > .tag.right{left:auto;right:var(--gut)}

/* Registriermarken am linken Rand */
.regmarks{
  position:absolute;left:0;top:0;bottom:0;width:13px;pointer-events:none;z-index:2;
  background-image:linear-gradient(180deg,var(--ink-45) 0 1px,transparent 1px);
  background-size:13px 42px;background-repeat:repeat-y;opacity:.85;
}
.regmarks.wide{width:22px;background-size:22px 42px}
.regmarks.dark{background-image:linear-gradient(180deg,rgba(232,237,235,.5) 0 1px,transparent 1px)}
@media (max-width:640px){.regmarks{display:none}}

/* Fehlregistrierter Marker: farbiger Kasten mit versetztem Textduplikat */
.misreg{
  position:relative;display:inline-block;z-index:6;
  font-family:var(--mono);font-size:9px;letter-spacing:.05em;
  text-transform:uppercase;line-height:1.4;white-space:pre-line;
  padding:4px 10px 4px 22px;background:var(--orange);color:var(--ink);
}
.misreg.acidmark{background:var(--acid)}
.misreg::before{
  content:"";position:absolute;left:6px;top:50%;width:10px;height:5px;
  background:var(--ink);transform:translateY(-2px);
}
.misreg > span{
  position:absolute;left:22px;top:4px;color:var(--ink);opacity:.92;
  transform:translate(4px,-3px);white-space:pre-line;
}

/* ---------- 5. Kopfleiste ---------- */
.rhead{
  position:sticky;top:0;z-index:60;height:var(--hd);background:var(--ink);color:#F4F6F5;
  display:flex;align-items:center;gap:clamp(14px,2.4vw,40px);padding:0 clamp(14px,2.4vw,40px);
}
.rhead-mark{display:flex;align-items:center;flex:0 0 auto;padding:6px 0;text-decoration:none}
.rhead-mark img{height:21px;width:auto;filter:invert(1)}
.rhead-meta{display:flex;gap:clamp(14px,2.2vw,38px);flex:0 0 auto}
.rhead-meta span{
  display:block;font-family:var(--sans);font-size:8.5px;line-height:1.45;
  letter-spacing:.02em;color:rgba(244,246,245,.86);white-space:nowrap;
}
.rhead-nav{display:flex;gap:clamp(10px,1.5vw,22px);margin-left:auto;align-items:center}
.rhead-nav a{
  font-family:var(--mono);font-size:9px;letter-spacing:.17em;text-transform:uppercase;
  text-decoration:none;color:rgba(244,246,245,.55);padding:5px 0;position:relative;
  transition:color .3s var(--ease);
  white-space:nowrap;
}
.rhead-nav a::after{
  content:"";position:absolute;left:0;right:0;bottom:1px;height:1px;background:currentColor;
  transform:scaleX(0);transform-origin:left;transition:transform .35s var(--ease);
}
.rhead-nav a:hover,.rhead-nav a:focus-visible{color:#F4F6F5}
.rhead-nav a:hover::after,.rhead-nav a:focus-visible::after{transform:scaleX(1)}
.rhead-nav a.cta-link{color:#F4F6F5;display:inline-flex;align-items:center;gap:7px}
.rhead-nav a.cta-link::before{content:"";width:5px;height:5px;background:var(--orange);transition:box-shadow .35s var(--ease)}
.rhead-nav a.cta-link:hover::before{box-shadow:0 0 11px 2px rgba(182,255,27,.9)}
.rhead-chap{
  font-family:var(--mono);font-size:clamp(10px,.92vw,13px);letter-spacing:.14em;text-transform:uppercase;
  color:#F4F6F5;white-space:nowrap;margin-left:clamp(14px,3vw,56px);
}
.rhead-nr{
  font-family:var(--mono);font-size:clamp(14px,1.35vw,19px);font-weight:700;letter-spacing:.02em;
  color:#F4F6F5;margin-left:clamp(12px,2.4vw,40px);flex:0 0 auto;font-variant-numeric:tabular-nums;
}

/* ---------- 6. Bilder ---------- */
.fig{position:relative;margin:0;background:var(--paper-2);overflow:hidden}
.fig img{width:100%;height:100%;object-fit:cover;display:block;filter:grayscale(1) contrast(1.05)}
.fig.color img,.fig.pop img{filter:none}
.fig.pop{box-shadow:0 0 0 1px rgba(14,14,14,.10),0 16px 54px -28px rgba(14,14,14,.45)}
.fig figcaption{
  position:absolute;left:0;bottom:-1.9em;font-family:var(--mono);
  font-size:var(--t-label);letter-spacing:.2em;text-transform:uppercase;color:var(--ink-45);
}
/* Bildunterschrift IM Bild, unten links, dreizeilig mit Quadrat */
.fig figcaption.cap{
  position:absolute;left:10px;bottom:9px;right:10px;bottom:9px;
  font-family:var(--mono);font-size:var(--t-micro);letter-spacing:.055em;line-height:1.55;
  text-transform:uppercase;color:rgba(255,255,255,.93);text-shadow:0 1px 3px rgba(0,0,0,.55);
  padding-left:11px;z-index:4;
}
.fig figcaption.cap::before{
  content:"";position:absolute;left:0;top:4px;width:5px;height:5px;background:rgba(255,255,255,.95);
}
.fig figcaption.cap.on-light{color:var(--ink);text-shadow:none}
.fig figcaption.cap.on-light::before{background:var(--ink)}

/* Pixel-Auflösung: Canvas über dem Bild */
.fig canvas.px{
  position:absolute;inset:0;width:100%;height:100%;
  image-rendering:pixelated;opacity:0;pointer-events:none;z-index:2;
}
/* Dither-Verlauf als Bildübergang (Daten-URL aus JS) */
.fig.dither-b::after,.fig.dither-t::before{
  content:"";position:absolute;left:0;right:0;height:24%;pointer-events:none;z-index:3;
  background-image:var(--dither);background-repeat:repeat-x;background-size:auto 100%;
}
.fig.dither-b::after{bottom:0}
.fig.dither-t::before{top:0;transform:scaleY(-1)}
.halftone{
  position:absolute;inset:0;pointer-events:none;z-index:2;opacity:.16;mix-blend-mode:multiply;
  background-image:radial-gradient(circle at center,var(--ink) 0 34%,transparent 36%);
  background-size:4px 4px;
}
.glow-acc{box-shadow:var(--glow-orange)}

/* Randlose Bildspalten bis an den Seitenrand */
.imgrow{display:grid;gap:0;width:100%}
.imgrow .fig{aspect-ratio:auto;height:100%}
.bleed-l{margin-left:calc(var(--gut) * -1)}
.bleed-r{margin-right:calc(var(--gut) * -1)}

/* ---------- 7. Linien ---------- */
.rule{height:var(--hair-w);background:var(--hair);border:0;margin:0}
.rule-soft{height:1px;background:linear-gradient(90deg,var(--hair-2),transparent);border:0;margin:0}
.rule-px{
  height:2px;border:0;margin:0;background-repeat:repeat-x;
  background-image:linear-gradient(90deg,var(--ink-45) 0 2px,transparent 2px 6px);
  background-size:6px 2px;opacity:.7;
}
.dot{display:inline-block;width:3px;height:3px;background:var(--ink);vertical-align:middle}
.dot.acc{background:var(--orange);box-shadow:var(--glow-orange)}

/* ---------- 8. Inhaltsverzeichnis ---------- */
.toc-group + .toc-group{margin-top:clamp(28px,3.6vw,52px)}
.toc{margin:clamp(14px,1.8vw,24px) 0 0;padding:0;list-style:none;max-width:460px}
.toc li{border-bottom:var(--hair-w) solid var(--hair-2)}
.toc a,.toc span.row{
  display:grid;grid-template-columns:44px minmax(0,1fr);align-items:baseline;gap:16px;
  padding:9px 2px 8px;text-decoration:none;transition:color .3s var(--ease),padding-left .3s var(--ease);
}
.toc a:hover,.toc a:focus-visible{color:var(--orange);padding-left:8px}
.toc .n{font-family:var(--mono);font-size:var(--t-mono-s);letter-spacing:.1em;color:var(--ink-60)}
.toc .t{font-size:var(--t-small);letter-spacing:.08em;text-transform:uppercase;font-weight:500}

/* ---------- 9. Buttons ---------- */
.cta{
  display:inline-flex;align-items:center;gap:10px;
  font-family:var(--mono);font-size:var(--t-mono-s);letter-spacing:.16em;text-transform:uppercase;
  text-decoration:none;color:var(--ink);padding:11px 18px;
  border:var(--hair-w) solid var(--hair-2);background:transparent;white-space:nowrap;
  transition:border-color .35s var(--ease),box-shadow .35s var(--ease),color .35s var(--ease);
}
.cta::before{content:"";width:5px;height:5px;background:var(--orange);transition:box-shadow .35s var(--ease)}
.cta:hover,.cta:focus-visible{border-color:var(--orange);box-shadow:var(--glow-orange)}
.cta:hover::before{box-shadow:0 0 12px 2px rgba(182,255,27,.85)}
.link-q{
  font-family:var(--mono);font-size:var(--t-mono-s);letter-spacing:.16em;text-transform:uppercase;
  text-decoration:none;border-bottom:1px solid var(--hair-2);padding-bottom:3px;
  transition:border-color .3s var(--ease)
}
.link-q:hover{border-color:var(--orange)}

/* ---------- 10. Erscheinen ---------- */
.reveal{opacity:0;transform:translateY(12px)}
.reveal.in{opacity:1;transform:none;transition:opacity .8s var(--ease),transform .8s var(--ease)}

/* ---------- 11. Footer ---------- */
.foot{
  border-top:var(--hair-w) solid var(--hair);
  display:flex;flex-wrap:wrap;gap:12px 28px;justify-content:space-between;align-items:center;
  padding:20px var(--gut) 28px;
  font-family:var(--mono);font-size:var(--t-mono-s);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-60);
}
.foot nav{display:flex;gap:clamp(12px,2vw,24px);flex-wrap:wrap}
.foot a{text-decoration:none;border-bottom:1px solid transparent}
.foot a:hover{border-bottom-color:var(--ink);color:var(--ink)}

/* ---------- 12. Filmkorn ---------- */
.grain{
  position:fixed;inset:0;pointer-events:none;z-index:70;opacity:.14;mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.86' numOctaves='3' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/></filter><rect width='160' height='160' filter='url(%23n)' opacity='.4'/></svg>");
}

/* ---------- 13. Responsive Basis ---------- */
@media (max-width:1040px){
  .rhead-nav a:nth-last-child(2){display:none}
}
@media (max-width:860px){
  .cols{grid-template-columns:1fr}
  .sec > .tag{position:static;display:block;margin-bottom:12px}
  .sec > .tag.right{display:none}
  .rhead-meta span:nth-child(2){display:none}
}
@media (max-width:720px){
  .rhead-meta{display:none}
  .rhead-chap{display:none}
}
@media (max-width:560px){
  :root{--hd:50px}
  .rhead{gap:10px;padding:0 12px}
  .rhead-mark img{height:18px}
  .rhead-nav{gap:11px}
  .rhead-nav a{font-size:8.5px;letter-spacing:.08em}
  .rhead-nav a:nth-child(3),.rhead-nav a:nth-child(4){display:none}
  .rhead-nr{font-size:13px;margin-left:12px}
}
@media (max-width:390px){
  .rhead-nav a:nth-child(2){display:none}
}

/* ---------- 14. Bewegung reduziert ---------- */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .reveal{opacity:1;transform:none}
}

/* ============================================================
   15. Runde 8: Neon-Grün #B6FF1B ist Hauptfarbe, Orange entfällt.
   Additive Erweiterung, ab index.html. Kontrastregel:
   kein grüner Text auf hellem Grund. Grün entweder als Fläche
   mit schwarzer Schrift oder als Text auf Schwarz.
   ============================================================ */
:root{
  --acc:#B6FF1B;
  --acc-dim:rgba(182,255,27,.22);
  --orange:#B6FF1B;               /* Altbestand zeigt jetzt auf Grün */
  --glow-orange:0 0 0 1px rgba(182,255,27,.5),0 0 30px rgba(182,255,27,.32);
  --glow-acid:0 0 26px rgba(182,255,27,.55);

  --t-mega:clamp(3.1rem,11.4vw,11.5rem);
  --t-giant:clamp(2.5rem,8.4vw,8.2rem);
  --blk:clamp(74px,11vw,190px);
}

/* Fokus: dunkler Kern für den Kontrast, grüner Hof für die Marke */
:focus-visible{outline:2px solid var(--ink);outline-offset:3px;box-shadow:0 0 0 5px rgba(182,255,27,.85)}
.rhead :focus-visible,.onink :focus-visible{outline-color:var(--acc);box-shadow:0 0 0 4px rgba(182,255,27,.3)}

/* Display-Grade für die grossen Blöcke */
.disp-mega{font-family:var(--disp);font-weight:900;text-transform:uppercase;line-height:.8;letter-spacing:.004em;margin:0;font-size:var(--t-mega)}
.disp-giant{font-family:var(--disp);font-weight:900;text-transform:uppercase;line-height:.82;letter-spacing:.004em;margin:0;font-size:var(--t-giant)}

/* Grün als Auszeichnung: Fläche mit schwarzer Schrift */
.hl{background:var(--acc);color:var(--ink);padding:0 .1em .02em;-webkit-box-decoration-break:clone;box-decoration-break:clone}
.chip{
  display:inline-block;align-self:flex-start;width:-moz-fit-content;width:fit-content;
  background:var(--acc);color:var(--ink);
  font-family:var(--mono);font-size:var(--t-label);letter-spacing:.2em;
  text-transform:uppercase;line-height:1;padding:6px 9px 5px;
}
.chip.ink{background:var(--ink);color:var(--acc)}

/* Pixelgrafik als eigenständiges Designelement */
.px-art{display:block;fill:currentColor;shape-rendering:crispEdges}
.px-art.acc{color:var(--acc)}
.px-bar{
  height:10px;background-repeat:repeat-x;background-size:20px 10px;
  background-image:linear-gradient(90deg,var(--acc) 0 10px,transparent 10px 20px);
}
.px-bar.ink{background-image:linear-gradient(90deg,var(--ink) 0 10px,transparent 10px 20px)}
.px-check{
  background-image:conic-gradient(from 90deg,var(--ink) 0 25%,transparent 0 50%,var(--ink) 0 75%,transparent 0);
  background-size:9px 9px;
}
.px-check.acc{background-image:conic-gradient(from 90deg,var(--acc) 0 25%,transparent 0 50%,var(--acc) 0 75%,transparent 0)}

/* Gefüllter CTA in Grün mit schwarzer Schrift */
.cta.solid{background:var(--acc);border-color:var(--acc);color:var(--ink);font-weight:700}
.cta.solid::before{background:var(--ink)}
.cta.solid:hover,.cta.solid:focus-visible{box-shadow:0 0 0 3px rgba(14,14,14,.9),var(--glow-acid)}

/* Link mit Pixelpfeil */
.link-px{
  display:inline-flex;align-items:center;gap:12px;text-decoration:none;
  font-family:var(--mono);font-size:var(--t-mono);letter-spacing:.18em;text-transform:uppercase;
}
.link-px .px-art{width:18px;height:10px;transition:transform .35s var(--ease)}
.link-px:hover .px-art,.link-px:focus-visible .px-art{transform:translateX(6px)}
.link-px u{text-decoration:none;box-shadow:inset 0 -.5em 0 var(--acc);padding:0 .12em;transition:box-shadow .35s var(--ease)}
.link-px:hover u{box-shadow:inset 0 -1.05em 0 var(--acc)}

/* ============================================================
   16. Runde 11: schlanke Kopfleiste und farbige Bilder bei Hover
   Rein additiv, ueberschreibt nur frueher definierte Regeln.
   ============================================================ */

/* Kopfleiste: nur Logo, vier Links und der CTA */
.rhead-meta,.rhead-chap,.rhead-nr{display:none !important}

/* Alle vier Navigationspunkte bleiben sichtbar, auch schmal */
@media (max-width:1040px){
  .rhead-nav a:nth-last-child(2){display:inline}
}
@media (max-width:560px){
  .rhead-nav a:nth-child(2),.rhead-nav a:nth-child(3),.rhead-nav a:nth-child(4){display:inline}
  .rhead-nav{gap:9px}
  .rhead-nav a{font-size:8px;letter-spacing:.05em}
}
@media (max-width:400px){
  .rhead{gap:8px;padding:0 10px}
  .rhead-mark img{height:16px}
  .rhead-nav{gap:7px}
  .rhead-nav a{font-size:7.5px;letter-spacing:.02em}
  .rhead-nav a.cta-link{padding:5px 6px}
}

/* Bild geht bei Hover und Tastaturfokus weich auf volle Farbe */
.fig img{transition:filter .5s cubic-bezier(.22,.68,.24,1)}
a:hover > .fig img,
a:focus-visible > .fig img,
a:hover .fig img,
a:focus-visible .fig img,
.fig:hover img{filter:none}

/* Runde 16: fettere Display-Schrift (Anton hat nur einen Schnitt, kein Kunstfett) */
html{font-synthesis-weight:none;font-synthesis:none}

/* Runde 16: kleine Texte überall lesbar */
:root{
  --t-lead:clamp(1.05rem,1.25vw,1.2rem);
  --t-body:clamp(1rem,1.08vw,1.1rem);
  --t-small:clamp(.92rem,.98vw,1rem);
  --t-mono:12.5px;
  --t-mono-s:11.5px;
  --t-label:10.5px;
  --t-micro:9px;
}
@media (min-width:900px){ .rhead-nav a{font-size:11px;letter-spacing:.15em} }

/* Runde 17: Anton braucht mehr Zeilenabstand als Big Shoulders */
h1,h2,h3,blockquote,.disp,[class*="disp"],.display,.h2,
.ptitle,.rtitle,.disc-t,.work-t,.gear-t,.gear-n,.crew-name,.acid-q,.mail,.srv-t,.person-name,.mega-t,.plead,.contact-h,.hero-h{line-height:.98!important}

/* Runde 17: Handy-Menue (Button und Panel kommen aus js/site.js) */
.rmenu{display:none}
.rpanel{display:none}
@media (max-width:900px){
  .rhead-nav a:not(.cta-link){display:none}
  .rmenu{
    display:inline-flex;align-items:center;gap:7px;appearance:none;background:none;border:0;cursor:pointer;padding:5px 0;
    font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:#F4F6F5;
  }
  .rmenu i{display:block;width:12px;height:2px;background:currentColor;box-shadow:0 -4px 0 currentColor,0 4px 0 currentColor}
  .rpanel{
    position:fixed;left:0;right:0;top:var(--hd);z-index:95;background:var(--ink);padding:10px var(--gut) 26px;
    flex-direction:column;border-bottom:3px solid var(--acc);
  }
  .rpanel.on{display:flex}
  .rpanel a{
    font-family:var(--disp);text-transform:uppercase;font-size:2.4rem;line-height:1.08;color:#F4F6F5;text-decoration:none;padding:4px 0;
  }
  .rpanel a[aria-current="page"],.rpanel a:hover,.rpanel a:focus-visible{color:var(--acc)}
}

/* Runde 18: Tablet und Handy lesbar */
@media (max-width:900px){
  .rhead-nav{gap:14px}
  .rhead-nav a.cta-link{font-size:10.5px;letter-spacing:.08em;padding:7px 10px}
  .rmenu{font-size:11px}
}

/* ---- Runde 19: Logo leuchtet grün (Hinweis: führt zur Startseite) ---- */
.rhead-mark{position:relative}
.rhead-mark::after{
  content:"";position:absolute;left:0;right:0;top:6px;bottom:6px;pointer-events:none;
  background:var(--acc);
  -webkit-mask:url(../assets/logo-schwarz.png) left center/contain no-repeat;
          mask:url(../assets/logo-schwarz.png) left center/contain no-repeat;
  opacity:0;filter:drop-shadow(0 0 6px rgba(182,255,27,.75));
  transition:opacity .45s var(--ease);
  animation:markHint 2.4s var(--ease) .9s 1 both;
}
.rhead-mark:hover::after,.rhead-mark:focus-visible::after{opacity:1;animation:none}
@keyframes markHint{0%{opacity:0}35%{opacity:.9}100%{opacity:0}}
@media (prefers-reduced-motion:reduce){.rhead-mark::after{animation:none}}

/* ---- Runde 19: Schalter Sprache und Hell/Dunkel ---- */
.rtools{display:flex;align-items:center;gap:10px;flex:0 0 auto}
.rtools button{appearance:none;background:none;border:0;padding:5px 0;cursor:pointer;color:rgba(244,246,245,.55);font-family:var(--mono);font-size:inherit}
.rt-lang{display:inline-flex;gap:6px;font-size:11px;letter-spacing:.12em}
.rt-lang span{transition:color .3s var(--ease)}
.rt-lang span.on{color:#F4F6F5;font-weight:700}
.rt-lang:hover span:not(.on),.rt-lang:focus-visible span:not(.on){color:var(--acc)}
.rt-theme i{display:block;width:13px;height:13px;border:2px solid currentColor;background:linear-gradient(90deg,currentColor 50%,transparent 50%);transition:transform .45s var(--ease)}
.rt-theme[aria-pressed="true"] i{transform:rotate(180deg)}
.rt-theme:hover,.rt-theme:focus-visible{color:var(--acc)}
.rtools.in-panel{margin-top:18px;gap:22px}
.rtools.in-panel .rt-lang{font-size:14px}
.rtools.in-panel .rt-theme i{width:18px;height:18px}
@media (max-width:900px){ .rhead-nav > .rtools{display:none} }

/* ---- Runde 19: Dunkel-Modus ---- */
html[data-theme="dark"]{
  color-scheme:dark;
  --paper:#0F1110;
  --paper-2:#171A19;
  --ink:#E8EDEB;
  --ink-75:rgba(232,237,235,.78);
  --ink-60:rgba(232,237,235,.62);
  --ink-45:rgba(232,237,235,.46);
  --ink-28:rgba(232,237,235,.28);
  --hair:rgba(232,237,235,.16);
  --hair-2:rgba(232,237,235,.3);
}
html[data-theme="dark"] body{background:var(--paper);color:var(--ink)}
html[data-theme="dark"] .rhead,html[data-theme="dark"] .rpanel{background:#070808;box-shadow:0 1px 0 rgba(232,237,235,.08)}
html[data-theme="dark"] .rhead-mark img{filter:invert(1)}
/* Grüne und bewusst schwarze Flächen behalten ihre hellen Tokens */
html[data-theme="dark"] :is(.chip.ink,.port2,.ow,.vid,.psoon,.cta.inv,.ask,.ksheet,.formstat.on,.hero-h,.reel-slot,.phero,.ptitle-on-img,.hl,.chip,.cta.solid,.cta:not(.ghost),.acid2,.ow-btn,.rhead-nav a.cta-link,.fb[aria-pressed="true"],.fb[aria-current="page"],.filters button[aria-pressed="true"],.work-soon,.work-yr,.pfacts dt,.vid-btn span,.pcol-h,.lb-btn,.srv-p:not(.none),.rental,.gear-row[aria-pressed="true"] .gear-box,.ask-f button,.item-p,.order,.ktab,.nums dt,.squote,.cfacts dt,.chips label.on,.sendbtn,.dsg .stand,.mailhint.on,.k,.misreg){
  --ink:#0E0E0E;--ink-75:rgba(14,14,14,.75);--ink-60:rgba(14,14,14,.6);--ink-45:rgba(14,14,14,.45);--ink-28:rgba(14,14,14,.28);
  --hair:rgba(14,14,14,.18);--hair-2:rgba(14,14,14,.32);--paper:#E8EDEB;
}
@media (prefers-reduced-motion:reduce){ .rt-theme i{transition:none} }

/* ---- Runde 20: Pixel-Schalter ---- */
.rt-px i{display:block;width:13px;height:13px;
  background:
    linear-gradient(currentColor,currentColor) 0 0/5px 5px no-repeat,
    linear-gradient(currentColor,currentColor) 8px 4px/5px 5px no-repeat,
    linear-gradient(currentColor,currentColor) 3px 8px/5px 5px no-repeat}
.rt-px[aria-pressed="true"]{color:var(--acc)}
.rt-px:hover,.rt-px:focus-visible{color:#F4F6F5}
.rtools.in-panel .rt-px i{transform:scale(1.35)}

/* ---- Runde 23: Fließtext in Helvetica Neue (Markenschrift), Headlines bleiben Anton ---- */
body,input,textarea,select,button{font-family:var(--sans)}

/* ---- Runde 23: aktiver Reiter fett ---- */
.rhead-nav a[aria-current="page"]{color:#F4F6F5}.rhead-nav a[aria-current="page"]::after{transform:scaleX(1)}
.rpanel a[aria-current="page"]{font-weight:400}
/* Nur Helvetica Neue neben Anton: Ziffern in Labels gleich breit */
.kcount,.gear-p,.sel,.pxn,time{font-variant-numeric:tabular-nums}

.en-only{display:none}
html[lang="en"] .en-only{display:block}
/* ---- Runde 24: Text mit Abstand zum Rand, Bilder dürfen randlos ---- */
:root{--gut:clamp(20px,6vw,112px);--max:1480px}
.regmarks{display:none!important}
.rhead{padding-left:max(var(--gut),calc((100vw - var(--max)) / 2 + var(--gut)));padding-right:max(var(--gut),calc((100vw - var(--max)) / 2 + var(--gut)))}
@media (max-width:900px){.rhead{padding-left:var(--gut);padding-right:var(--gut)}}

/* ============================================================
   Runde 25: Clean-Pass — weniger Deko, ein System
   ============================================================ */
/* Deko raus: Pixel-Schachbrett am Seitenende, Klammer-Labels */
.pxcheck{display:none!important}
.lbl::before,.lbl::after{content:none!important}
.lbl{letter-spacing:.14em}

/* Seitenköpfe überall gleich: Titel, Lead, Abstand */
.phead h1.ptitle,h1.rtitle{font-size:min(10vw,150px)!important;line-height:.92!important;white-space:normal}
.crewtop .phead h1.ptitle{font-size:min(12vw,190px)!important}
.phead p.lead,p.rlead{
  font-family:var(--sans)!important;text-transform:none!important;font-weight:500!important;
  font-size:clamp(1.05rem,1.3vw,1.3rem)!important;line-height:1.45!important;max-width:44ch!important;
  margin-top:clamp(14px,1.6vw,24px)!important;letter-spacing:0!important;
}
main .phead:not(.crew-head),main .rtop{padding-top:clamp(40px,5vw,84px)!important}

/* Ein Bild-Look für alle Projekt- und Fotobilder */
main img:not([src$=".svg"]):not([src*="logo"]){filter:saturate(.92) contrast(1.04)}
/* Standbild mit eingebrannten Kinobalken (LYNT) randlos beschneiden */
img[src*="coVXA6ZVFwU"]{object-fit:cover;transform:scale(1.17)}
/* Pixel-Auflösen auf Bildern aus: das Pixelfeld bleibt die eine Pixel-Signatur */
canvas.px{display:none!important}

/* ---- Barrierefreiheit ---- */
.skip-link{position:absolute;left:-9999px;top:0;z-index:300;background:var(--acc);color:#0E0E0E;padding:12px 18px;font-family:var(--sans);font-weight:700;text-decoration:none}
.skip-link:focus{left:var(--gut);top:10px}
main:focus{outline:none}
.vh{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* Sehr kleine Handys (320 px, z. B. iPhone SE 1): Anfrage-Button passt in die Leiste */
@media (max-width:340px){
  .rhead{gap:6px}
  .rhead-nav a.cta-link{font-size:9.5px;letter-spacing:.04em;padding:6px 8px;gap:5px}
}

/* Fokus und Sprungziele nicht unter dem mitlaufenden Header verstecken (WCAG 2.4.11) */
html{scroll-padding-top:calc(var(--hd) + 12px)}

/* Rein schwarze Logos (z. B. Dynamo) im dunklen Modus weiß zeigen, sonst verschwinden sie auf dunklem Grund */
html[data-theme="dark"] img[src$="-logo-black.png"]{filter:invert(1)!important}

/* „Bewegung reduzieren“: globales Sicherheitsnetz, Animationen und Übergänge laufen sofort ab (Endereignisse feuern weiter) */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;animation-delay:0s!important;transition-duration:.01ms!important;transition-delay:0s!important;scroll-behavior:auto!important}
}

/* Klickfläche Hell/Dunkel- und Pixel-Schalter auf 24×24 px (WCAG 2.5.8), Optik nahezu unverändert */
.rtools .rt-theme,.rtools .rt-px{min-width:24px;min-height:24px;display:inline-flex;align-items:center;justify-content:center;margin:0 -4px}
/* Seitenwechsel: Header bleibt stehen, Inhalt blendet ueber (Chrome/Edge/Safari 18+) */
@view-transition{navigation:auto}
.rhead{view-transition-name:rhead}
::view-transition-old(root),::view-transition-new(root){animation-duration:.22s;animation-timing-function:cubic-bezier(.2,0,0,1)}
@media (prefers-reduced-motion:reduce){::view-transition-group(*),::view-transition-old(*),::view-transition-new(*){animation:none !important}}