@charset "UTF-8";
/* =========================================================================
   MGG — Müller-Guttenbrunn Gruppe
   Design-System. Colorway-Architektur nach Referenz, Werte aus der MGG-CI.
   ========================================================================= */

/* ---------- Fonts (selbst gehostet, keine Drittserver-Requests) ---------- */
@font-face{font-family:"Schibsted Grotesk";src:url("fonts/schibsted-grotesk-latin-400-normal.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Schibsted Grotesk";src:url("fonts/schibsted-grotesk-latin-500-normal.woff2") format("woff2");font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:"Schibsted Grotesk";src:url("fonts/schibsted-grotesk-latin-700-normal.woff2") format("woff2");font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:"IBM Plex Mono";src:url("fonts/ibm-plex-mono-latin-400-normal.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"IBM Plex Mono";src:url("fonts/ibm-plex-mono-latin-500-normal.woff2") format("woff2");font-weight:500;font-style:normal;font-display:swap}

/* ---------- Tokens ---------- */
:root{
  /* Marke — exakt aus dem Logo gesampelt */
  --mgg-green:#00A854;
  --mgg-blue:#004884;

  /* Colorway-Flächen (Stahl-Neutrale statt der Holz-Beiges der Referenz) */
  --c-ink:#14181A;
  --c-white:#FFFFFF;
  --c-pale:#F4F5F3;
  --c-steel:#E3E5E2;
  --c-forest:#07301D;

  /* aktive Rollen — werden je Colorway umgesetzt */
  --bg:var(--c-white);
  --fg:#14181A;
  --fg-soft:#565E60;
  --rule:rgba(20,24,26,.16);
  --accent:var(--mgg-green);

  --ff:"Schibsted Grotesk",-apple-system,"Segoe UI",Arial,sans-serif;
  --ff-mono:"IBM Plex Mono",ui-monospace,"SFMono-Regular",Consolas,monospace;

  --pad:clamp(1.25rem,4.5vw,4.5rem);
  --maxw:1560px;
  --sec-y:clamp(4.5rem,9vw,8.75rem);

  --t-fast:.18s; --t-med:.42s; --t-slow:.9s;
  --ease:cubic-bezier(.22,.61,.36,1);
  --ease-out:cubic-bezier(.16,1,.3,1);

  /* z-System */
  --z-base:1; --z-sticky:100; --z-nav:200; --z-menu:300; --z-cursor:9998; --z-modal:9999;
}

/* ---------- Reset ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;background:var(--c-white);color:var(--c-ink);font-family:var(--ff);font-weight:400;
  font-size:clamp(1rem,.95rem + .25vw,1.1875rem);line-height:1.5;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
img,svg,video{max-width:100%;height:auto;display:block}
h1,h2,h3,h4,p,figure,blockquote,ul,ol,dl,dd{margin:0}
ul,ol{padding:0;list-style:none}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
table{border-collapse:collapse;width:100%}
:focus-visible{outline:2px solid var(--mgg-green);outline-offset:3px;border-radius:2px}
::selection{background:var(--mgg-green);color:#fff}

/* ---------- Colorways: der strukturelle Kern ---------- */
.cw{background:var(--bg);color:var(--fg)}
.cw-white {--bg:var(--c-white); --fg:#14181A;--fg-soft:#565E60;--rule:rgba(20,24,26,.16);--accent:var(--mgg-blue)}
.cw-pale  {--bg:var(--c-pale);  --fg:#14181A;--fg-soft:#565E60;--rule:rgba(20,24,26,.16);--accent:var(--mgg-blue)}
.cw-steel {--bg:var(--c-steel); --fg:#14181A;--fg-soft:#4E5658;--rule:rgba(20,24,26,.2); --accent:var(--mgg-blue)}
.cw-ink   {--bg:var(--c-ink);   --fg:#F3F5F4;--fg-soft:#98A2A2;--rule:rgba(255,255,255,.2);--accent:var(--mgg-green)}
.cw-forest{--bg:var(--c-forest);--fg:#F1F6F2;--fg-soft:#9DBBA8;--rule:rgba(255,255,255,.22);--accent:var(--mgg-green)}
.cw-img   {--bg:var(--c-ink);   --fg:#FFFFFF;--fg-soft:rgba(255,255,255,.78);--rule:rgba(255,255,255,.28);--accent:var(--mgg-green)}

/* ---------- Layout ---------- */
.shell{width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:var(--pad)}
.sec{padding-block:var(--sec-y)}
.sec--tight{padding-block:clamp(3rem,5.5vw,5rem)}
.sec--flush{padding-block:0}

/* ---------- Typografie: eine Familie, Weight 400, Satzschreibung ---------- */
.h-mega,.h-big,.h-mid{font-weight:400;letter-spacing:-.018em;line-height:1.04;text-wrap:balance}
.h-mega{font-size:clamp(2.75rem,7.4vw,6.25rem)}
.h-big {font-size:clamp(2.1rem,4.6vw,3.5rem);line-height:1.06}
.h-mid {font-size:clamp(1.5rem,2.3vw,2.125rem);line-height:1.14;letter-spacing:-.012em}
.h-sm  {font-size:clamp(1.125rem,1.35vw,1.375rem);font-weight:500;line-height:1.25;letter-spacing:-.006em}

.lead{font-size:clamp(1.125rem,1.5vw,1.5rem);line-height:1.42;letter-spacing:-.008em;text-wrap:pretty}
.body{color:var(--fg-soft);line-height:1.62;text-wrap:pretty}
.small{font-size:.9375rem;line-height:1.55;color:var(--fg-soft)}

/* Mono-Label — das einzige Element mit Sperrung, bewusst technisch */
.eyebrow{font-family:var(--ff-mono);font-size:.6875rem;font-weight:500;letter-spacing:.14em;
  text-transform:uppercase;color:var(--accent);display:flex;align-items:center;gap:.7em}
.eyebrow::before{content:"";width:1.75rem;height:1px;background:currentColor;flex:none;opacity:.75}
.eyebrow--plain::before{display:none}
.mono{font-family:var(--ff-mono);font-size:.8125rem;letter-spacing:.01em}

.measure{max-width:34ch}
.measure-wide{max-width:52ch}

/* ---------- Buttons ---------- */
.btn{display:inline-flex;align-items:center;gap:.7em;font-family:var(--ff-mono);font-size:.6875rem;
  font-weight:500;letter-spacing:.13em;text-transform:uppercase;padding:1.05em 1.7em;border-radius:999px;
  border:1px solid transparent;transition:background var(--t-fast) var(--ease),color var(--t-fast) var(--ease),
  border-color var(--t-fast) var(--ease),transform var(--t-fast) var(--ease);white-space:nowrap}
.btn .arw{transition:transform var(--t-med) var(--ease-out)}
.btn:hover .arw{transform:translateX(.3em)}
.btn--solid{background:var(--mgg-green);color:#04160C;border-color:var(--mgg-green)}
.btn--solid:hover{background:#00C462;border-color:#00C462}
.btn--ghost{border-color:var(--rule);color:var(--fg)}
.btn--ghost:hover{border-color:var(--fg);background:color-mix(in srgb,var(--fg) 8%,transparent)}
.btn--blue{background:var(--mgg-blue);color:#fff;border-color:var(--mgg-blue)}
.btn--blue:hover{background:#005AA6;border-color:#005AA6}

/* Textlink mit Unterstreichung, die aufzieht */
.tlink{display:inline-flex;align-items:center;gap:.5em;position:relative;font-weight:500}
.tlink::after{content:"";position:absolute;left:0;right:0;bottom:-.18em;height:1px;background:currentColor;
  transform:scaleX(0);transform-origin:left;transition:transform var(--t-med) var(--ease-out)}
.tlink:hover::after{transform:scaleX(1)}

/* ---------- Reveal ---------- */
[data-rv]{opacity:0;transform:translateY(22px);transition:opacity .75s var(--ease-out),transform .75s var(--ease-out)}
[data-rv].is-in{opacity:1;transform:none}
[data-rv-stagger]>*{opacity:0;transform:translateY(18px);transition:opacity .7s var(--ease-out),transform .7s var(--ease-out);
  transition-delay:calc(var(--i,0)*70ms)}
[data-rv-stagger].is-in>*{opacity:1;transform:none}

/* Wort-für-Wort-Reveal auf den großen Headlines */
.wrev{display:inline-block;overflow:hidden;vertical-align:top}
.wrev>span{display:inline-block;transform:translateY(105%);transition:transform .82s var(--ease-out);
  transition-delay:calc(var(--wi,0)*52ms)}
.is-in .wrev>span{transform:none}

@media (prefers-reduced-motion:reduce){
  [data-rv],[data-rv-stagger]>*{opacity:1;transform:none;transition:none}
  .wrev>span{transform:none;transition:none}
}

/* =========================================================================
   Navigation — Overlay-Menü nach Referenz
   ========================================================================= */
.nav{position:fixed;inset:0 0 auto;z-index:var(--z-nav);padding-block:clamp(.9rem,1.6vw,1.4rem);
  transition:background var(--t-med) var(--ease),box-shadow var(--t-med) var(--ease)}
.nav__in{display:flex;align-items:center;justify-content:space-between;gap:1.5rem}
.nav.is-stuck{background:rgba(255,255,255,.94);backdrop-filter:blur(14px);box-shadow:0 1px 0 rgba(20,24,26,.1)}
.nav__logo{display:block;width:clamp(112px,10vw,150px);flex:none}
.nav__logo img{width:100%}
.nav__right{display:flex;align-items:center;gap:clamp(.5rem,1.4vw,1.25rem)}
.nav__tel{font-family:var(--ff-mono);font-size:.75rem;letter-spacing:.05em;font-weight:500;
  color:var(--nav-fg,#14181A);transition:color var(--t-med) var(--ease)}
.nav:not(.is-stuck) .nav__tel--on-dark{color:#fff}
.nav__lang{display:flex;gap:.15rem;font-family:var(--ff-mono);font-size:.6875rem;letter-spacing:.1em;
  text-transform:uppercase;color:var(--nav-fg,#14181A)}
.nav:not(.is-stuck) .nav__lang--on-dark{color:rgba(255,255,255,.85)}
.nav__lang a{padding:.35em .5em;border-radius:999px;opacity:.55;transition:opacity var(--t-fast)}
.nav__lang a:hover{opacity:1}
.nav__lang a[aria-current]{opacity:1;font-weight:500;text-decoration:underline;text-underline-offset:.25em}

.burger{display:inline-flex;flex-direction:column;justify-content:center;gap:5px;width:46px;height:46px;
  align-items:center;border-radius:999px;border:1px solid var(--burger-bd,rgba(20,24,26,.2))}
.nav:not(.is-stuck) .burger--on-dark{--burger-bd:rgba(255,255,255,.4)}
.burger span{display:block;width:18px;height:1.5px;background:var(--burger-fg,#14181A);
  transition:transform var(--t-med) var(--ease),opacity var(--t-fast)}
.nav:not(.is-stuck) .burger--on-dark span{--burger-fg:#fff}
body.menu-open .burger span:first-child{transform:translateY(3.25px) rotate(45deg)}
body.menu-open .burger span:last-child{transform:translateY(-3.25px) rotate(-45deg)}

/* Overlay */
.menu{position:fixed;inset:0;z-index:var(--z-menu);background:var(--c-ink);color:#F3F5F4;
  display:grid;grid-template-rows:auto 1fr auto;overflow-y:auto;overscroll-behavior:contain;
  clip-path:inset(0 0 100% 0);transition:clip-path .78s var(--ease-out);visibility:hidden}
body.menu-open .menu{clip-path:inset(0 0 0 0);visibility:visible}
.menu__top{display:flex;align-items:center;justify-content:space-between;gap:1.5rem;
  padding-block:clamp(.9rem,1.6vw,1.4rem)}
.menu__close{display:inline-flex;align-items:center;justify-content:center;width:46px;height:46px;
  border:1px solid rgba(255,255,255,.4);border-radius:999px}
.menu__body{display:grid;grid-template-columns:1fr;gap:clamp(2rem,4vw,4rem);padding-block:clamp(1.5rem,4vw,3rem);align-content:start}
@media (min-width:900px){.menu__body{grid-template-columns:1.15fr .85fr;gap:clamp(3rem,6vw,7rem)}}
.menu__list>li{border-top:1px solid rgba(255,255,255,.14)}
.menu__list>li:last-child{border-bottom:1px solid rgba(255,255,255,.14)}
.menu__link{display:flex;align-items:baseline;gap:.7rem;padding:clamp(.7rem,1.5vw,1rem) 0;
  font-size:clamp(1.6rem,3.4vw,2.75rem);line-height:1.1;letter-spacing:-.02em;
  opacity:0;transform:translateY(14px);transition:opacity .6s var(--ease-out),transform .6s var(--ease-out),color var(--t-fast);
  transition-delay:calc(var(--mi,0)*55ms + .12s)}
body.menu-open .menu__link{opacity:1;transform:none}
.menu__link:hover{color:var(--mgg-green)}
.menu__count{font-family:var(--ff-mono);font-size:.75rem;letter-spacing:.08em;color:rgba(255,255,255,.45)}
.menu__sub{display:grid;gap:.55rem;padding:0 0 clamp(1rem,2vw,1.5rem)}
.menu__sub a{color:rgba(255,255,255,.66);font-size:.9375rem;transition:color var(--t-fast)}
.menu__sub a:hover{color:var(--mgg-green)}
.menu__aside{display:grid;gap:2rem;align-content:start;font-size:.9375rem;color:rgba(255,255,255,.7)}
.menu__aside strong{color:#fff;font-weight:500;display:block;margin-bottom:.35rem}
.menu__aside a{color:inherit}
.menu__aside a:hover{color:var(--mgg-green)}
.menu__foot{border-top:1px solid rgba(255,255,255,.14);padding-block:1.25rem;
  display:flex;flex-wrap:wrap;gap:1rem 2rem;justify-content:space-between;
  font-family:var(--ff-mono);font-size:.6875rem;letter-spacing:.09em;text-transform:uppercase;color:rgba(255,255,255,.5)}

/* =========================================================================
   Hero
   ========================================================================= */
.hero{position:relative;min-height:100svh;display:grid;grid-template-rows:1fr auto;isolation:isolate;
  padding-top:clamp(5.5rem,10vh,7.5rem);overflow:hidden}
.hero__band{position:relative;height:clamp(165px,27svh,330px);overflow:hidden;background:#0B0F10}
.hero__band img{width:100%;height:100%;object-fit:cover;object-position:50% 58%}
.hero__band::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(20,24,26,.85) 0%,rgba(20,24,26,.12) 34%,rgba(20,24,26,0) 60%)}
.hero__grid{display:grid;gap:clamp(1.25rem,2.5vw,2.25rem);align-content:end;
  padding-bottom:clamp(1.5rem,3.5vh,2.75rem)}
@media (min-width:960px){.hero__grid{grid-template-columns:minmax(0,1fr) auto;align-items:end;column-gap:clamp(2rem,4vw,4rem)}}
.hero__h1{margin-block:clamp(.7rem,1.4vw,1.2rem) 0;color:#fff;font-size:clamp(2.4rem,5.5vw,4.75rem)}
.hero__sub{max-width:46ch;color:rgba(255,255,255,.86);margin-top:clamp(.85rem,1.6vw,1.25rem);font-size:clamp(1.0625rem,1.25vw,1.3125rem)}
.hero__cta{display:flex;flex-wrap:wrap;gap:.6rem;margin-top:clamp(1.15rem,2.2vw,1.75rem)}
.hero__trigger{font-family:var(--ff-mono);font-size:.6875rem;letter-spacing:.05em;color:rgba(255,255,255,.72);
  margin-top:.9rem;display:flex;flex-wrap:wrap;gap:.4rem 1.1rem}
.hero__trigger span{display:inline-flex;align-items:center;gap:.5em}
.hero__trigger span::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--mgg-green)}

/* Scroll-Hinweis */
.hero__scroll{display:none}
@media (min-width:960px){
  .hero__scroll{display:flex;align-items:center;gap:.6rem;font-family:var(--ff-mono);font-size:.625rem;
    letter-spacing:.16em;text-transform:uppercase;color:rgba(255,255,255,.6);justify-self:end;align-self:end}
  .hero__scroll i{display:block;width:1px;height:44px;background:linear-gradient(180deg,rgba(255,255,255,.6),transparent);
    animation:scrollpulse 2.4s var(--ease) infinite}
}
@keyframes scrollpulse{0%,100%{opacity:.25;transform:scaleY(.55);transform-origin:top}50%{opacity:1;transform:scaleY(1)}}
@media (prefers-reduced-motion:reduce){.hero__scroll i{animation:none}}

/* =========================================================================
   Drei-Wege-Router
   ========================================================================= */
.router{display:grid;gap:1px;background:var(--rule);border-block:1px solid var(--rule)}
@media (min-width:800px){.router{grid-template-columns:repeat(3,1fr)}}
.router__card{background:var(--bg);padding:clamp(1.6rem,3vw,2.6rem);display:flex;flex-direction:column;gap:.9rem;
  transition:background var(--t-med) var(--ease);position:relative;min-height:clamp(11rem,17vw,15rem)}
.router__card:hover{background:color-mix(in srgb,var(--fg) 5%,var(--bg))}
.router__card .h-sm{transition:color var(--t-fast)}
.router__card:hover .h-sm{color:var(--accent)}
.router__go{margin-top:auto;display:inline-flex;align-items:center;gap:.55em;font-family:var(--ff-mono);
  font-size:.6875rem;letter-spacing:.13em;text-transform:uppercase;color:var(--accent)}
.router__card:hover .router__go .arw{transform:translateX(.35em)}
.router__go .arw{transition:transform var(--t-med) var(--ease-out)}

/* =========================================================================
   Statistik mit Count-up
   ========================================================================= */
.stats{display:grid;gap:clamp(2.5rem,5vw,4.5rem)}
@media (min-width:900px){.stats{grid-template-columns:1fr 1fr;align-items:start}}
.stats__rows{display:grid}
.stats__row{display:grid;gap:.35rem;padding-block:clamp(1.1rem,2.2vw,1.7rem);border-top:1px solid var(--rule)}
.stats__row:last-child{border-bottom:1px solid var(--rule)}
@media (min-width:560px){.stats__row{grid-template-columns:minmax(0,auto) 1fr;align-items:baseline;gap:1.5rem}}
.stats__num{font-size:clamp(2.4rem,5.2vw,4.25rem);line-height:1;letter-spacing:-.03em;font-weight:400;
  font-variant-numeric:tabular-nums;color:var(--fg)}
.stats__num em{font-style:normal;color:var(--accent)}
.stats__lbl{color:var(--fg-soft);font-size:.9375rem;line-height:1.45;max-width:30ch}

/* =========================================================================
   Signature: Der Materialstrom
   ========================================================================= */
.flow{position:relative}
.flow__head{display:grid;gap:1.1rem;max-width:56ch;margin-bottom:clamp(2rem,4vw,3.5rem)}
.flow__track{position:relative}
.flow__stage{position:relative}
.flow__viz{position:relative;border:1px solid var(--rule);border-radius:2px;
  padding:clamp(1.25rem,2.6vw,2.25rem);background:color-mix(in srgb,var(--fg) 3%,transparent)}
.flow__vizlbl{font-family:var(--ff-mono);font-size:.6875rem;letter-spacing:.04em;color:var(--fg-soft);
  margin-bottom:clamp(1.1rem,2.2vw,1.75rem);max-width:62ch;line-height:1.5}
.flow__bars{display:grid;gap:clamp(.5rem,1vw,.8rem)}
.flow__bar{display:flex;align-items:stretch;opacity:.38;
  transition:opacity .55s var(--ease-out)}
.flow__bar[data-on="1"]{opacity:1}
.flow__barno{flex:none;width:1.75rem;margin-right:.85rem;display:flex;align-items:center;font-family:var(--ff-mono);
  font-size:.6875rem;letter-spacing:.1em;color:var(--fg-soft)}
.flow__seg{background:var(--c);color:#0B0F10;flex:var(--w) 1 0;min-width:0;
  height:clamp(2.5rem,4.6vw,3.4rem);display:flex;align-items:center;padding-inline:.55rem;
  font-family:var(--ff-mono);font-size:.625rem;letter-spacing:.02em;white-space:nowrap;overflow:hidden;
  transition:flex-grow .85s var(--ease-out);border-right:1px solid var(--bg)}
.flow__seg:last-child{border-right:0}
.flow__bar .flow__seg:nth-child(2){border-radius:2px 0 0 2px}
.flow__bar .flow__seg:last-child{border-radius:0 2px 2px 0}
.flow__seg--light{color:#fff}
@media (max-width:640px){.flow__seg{font-size:0;padding-inline:0}
  .flow__bar .flow__seg:nth-child(2){font-size:.625rem;padding-inline:.5rem}}

.flow__steps{display:grid;gap:1px;background:var(--rule);margin-top:clamp(2rem,4vw,3rem)}
@media (min-width:760px){.flow__steps{grid-template-columns:repeat(4,1fr)}}
.flow__step{background:var(--bg);padding:clamp(1.25rem,2.4vw,2rem);display:flex;flex-direction:column;gap:.6rem;
  transition:background var(--t-med) var(--ease)}
.flow__step[data-on="1"]{background:color-mix(in srgb,var(--accent) 12%,var(--bg))}
.flow__idx{font-family:var(--ff-mono);font-size:.6875rem;letter-spacing:.13em;color:var(--accent)}
.flow__yield{font-family:var(--ff-mono);font-size:.8125rem;color:var(--fg-soft);
  padding-top:.7rem;border-top:1px solid var(--rule);margin-top:auto}

/* =========================================================================
   Sticky-Stapel-Zeilen (Recyclingtiefe)
   ========================================================================= */
.rows{position:relative}
.rows__row{position:sticky;top:0;min-height:100svh;display:grid;grid-template-rows:auto 1fr;background:var(--bg)}
.rows__fig{position:relative;width:100%;height:clamp(220px,44svh,460px);overflow:hidden;background:var(--c-ink)}
.rows__fig img{width:100%;height:100%;object-fit:cover;object-position:50% 52%}
.rows__inner{display:grid;gap:clamp(1.25rem,2.5vw,2.5rem);align-content:center;
  padding-block:clamp(2rem,5vh,3.5rem)}
@media (min-width:900px){.rows__inner{grid-template-columns:1fr 1fr;gap:clamp(2.5rem,6vw,6rem);align-items:start}}
.rows__txt{display:grid;gap:1rem;max-width:52ch}
.rows__no{font-family:var(--ff-mono);font-size:.6875rem;letter-spacing:.14em;color:var(--accent)}
.rows__head{display:grid;gap:.9rem;align-content:start}

/* =========================================================================
   Karten-Raster (Services / Produkte)
   ========================================================================= */
.cards{display:grid;gap:1px;background:var(--rule);border:1px solid var(--rule)}
@media (min-width:640px){.cards{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1040px){.cards--3{grid-template-columns:repeat(3,1fr)}}
.card{background:var(--bg);padding:clamp(1.4rem,2.6vw,2.2rem);display:flex;flex-direction:column;gap:.7rem;
  min-height:clamp(11rem,16vw,14rem);transition:background var(--t-med) var(--ease)}
.card:hover{background:color-mix(in srgb,var(--fg) 5%,var(--bg))}
.card__go{margin-top:auto;font-family:var(--ff-mono);font-size:.6875rem;letter-spacing:.13em;
  text-transform:uppercase;color:var(--accent);display:inline-flex;align-items:center;gap:.5em}
.card:hover .card__go .arw{transform:translateX(.35em)}
.card__go .arw{transition:transform var(--t-med) var(--ease-out)}
.card--media{padding:0;overflow:hidden}
.card--media figure{position:relative;aspect-ratio:16/9;overflow:hidden;background:var(--c-ink)}
.card--media img{width:100%;height:100%;object-fit:cover;transition:transform 1.1s var(--ease-out)}
.card--media:hover img{transform:scale(1.045)}
.card--media .card__body{padding:clamp(1.2rem,2.2vw,1.8rem);display:grid;gap:.6rem}

/* ---------- Standorte ---------- */
.locs{display:grid;gap:clamp(2rem,4vw,3.5rem)}
@media (min-width:960px){.locs{grid-template-columns:.9fr 1.1fr;align-items:start}}
.locs__list{display:grid}
.locs__item{display:grid;grid-template-columns:auto 1fr auto;gap:1rem;align-items:baseline;
  padding-block:clamp(.9rem,1.8vw,1.35rem);border-top:1px solid var(--rule)}
.locs__item:last-child{border-bottom:1px solid var(--rule)}
.locs__cc{font-family:var(--ff-mono);font-size:.75rem;letter-spacing:.1em;color:var(--accent);min-width:2.5em}
.locs__meta{font-family:var(--ff-mono);font-size:.75rem;color:var(--fg-soft);text-align:right}

/* ---------- Zertifikats-Leiste ---------- */
.certs{display:flex;flex-wrap:wrap;gap:.5rem}
.cert{display:inline-flex;align-items:center;gap:.6em;padding:.7em 1.1em;border:1px solid var(--rule);
  border-radius:999px;font-family:var(--ff-mono);font-size:.6875rem;letter-spacing:.09em;text-transform:uppercase;
  color:var(--fg-soft)}
.cert::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--accent);flex:none}

/* ---------- CTA-Zeile nach Sektionen ---------- */
.ctaline{display:flex;flex-wrap:wrap;align-items:baseline;gap:.6rem 1.4rem;
  padding-block:clamp(1.1rem,2vw,1.6rem);border-top:1px solid var(--rule);
  font-size:.9375rem;color:var(--fg-soft)}
.ctaline a{color:var(--fg);font-weight:500}

/* ---------- Abschluss-CTA ---------- */
.endcta{display:grid;gap:clamp(1.5rem,3vw,2.5rem);align-items:end}
@media (min-width:880px){.endcta{grid-template-columns:1.3fr .7fr}}

/* ---------- Call-Strip ---------- */
.callstrip{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:1rem 2rem;
  padding:clamp(1.1rem,2.2vw,1.6rem) clamp(1.3rem,2.6vw,2.2rem);border:1px solid var(--rule);border-radius:999px}
.callstrip__tel{font-family:var(--ff-mono);font-size:clamp(1rem,1.5vw,1.25rem);letter-spacing:.01em;font-weight:500}

/* =========================================================================
   Footer
   ========================================================================= */
.foot{background:var(--c-ink);color:#F3F5F4;--fg:#F3F5F4;--fg-soft:#98A2A2;--rule:rgba(255,255,255,.16);--accent:var(--mgg-green)}
.foot__top{display:grid;gap:clamp(2rem,4vw,3rem);padding-block:clamp(3.5rem,7vw,6rem)}
@media (min-width:880px){.foot__top{grid-template-columns:1.2fr 1fr 1fr}}
@media (min-width:1200px){.foot__top{grid-template-columns:1.4fr 1fr 1fr 1fr}}
.foot__logo{width:150px;margin-bottom:1.5rem}
.foot h3{font-family:var(--ff-mono);font-size:.6875rem;letter-spacing:.14em;text-transform:uppercase;
  color:rgba(255,255,255,.5);font-weight:500;margin-bottom:1rem}
.foot__links{display:grid;gap:.6rem;font-size:.9375rem}
.foot__links a{color:rgba(255,255,255,.76);transition:color var(--t-fast)}
.foot__links a:hover{color:var(--mgg-green)}
.foot__bar{border-top:1px solid rgba(255,255,255,.14);padding-block:1.5rem;display:flex;flex-wrap:wrap;
  gap:.8rem 2rem;justify-content:space-between;font-family:var(--ff-mono);font-size:.6875rem;
  letter-spacing:.08em;text-transform:uppercase;color:rgba(255,255,255,.45)}
.foot__bar a{color:inherit}
.foot__bar a:hover{color:#fff}

/* ---------- Mobile Sticky-Leiste ---------- */
.mbar{position:fixed;left:.6rem;right:.6rem;bottom:calc(.6rem + env(safe-area-inset-bottom));z-index:var(--z-sticky);
  display:grid;grid-template-columns:1fr 1fr;gap:.4rem;padding:.4rem;background:rgba(20,24,26,.93);
  backdrop-filter:blur(12px);border-radius:999px;transform:translateY(160%);transition:transform .5s var(--ease-out)}
.mbar.is-on{transform:none}
.mbar a{display:flex;align-items:center;justify-content:center;gap:.5em;padding:.95em 1em;border-radius:999px;
  font-family:var(--ff-mono);font-size:.6875rem;letter-spacing:.1em;text-transform:uppercase;min-height:44px}
.mbar a:first-child{color:#fff;border:1px solid rgba(255,255,255,.25)}
.mbar a:last-child{background:var(--mgg-green);color:#04160C}
@media (min-width:860px){.mbar{display:none}}
body:has(.mbar.is-on){padding-bottom:0}

/* ---------- Desktop-Call-Chip ---------- */
.chip{position:fixed;right:1.25rem;bottom:1.25rem;z-index:var(--z-sticky);display:none;align-items:center;gap:.6em;
  padding:.9em 1.3em;border-radius:999px;background:var(--mgg-green);color:#04160C;
  font-family:var(--ff-mono);font-size:.75rem;letter-spacing:.06em;font-weight:500;
  box-shadow:0 10px 30px rgba(0,0,0,.18);opacity:0;transform:translateY(14px);
  transition:opacity .5s var(--ease-out),transform .5s var(--ease-out)}
@media (min-width:860px){.chip{display:inline-flex}}
.chip.is-on{opacity:1;transform:none}

/* ---------- Custom Cursor ---------- */
.cur,.cur-dot{position:fixed;top:0;left:0;pointer-events:none;z-index:var(--z-cursor);border-radius:50%;
  mix-blend-mode:difference;opacity:0;transition:opacity .3s}
.cur{width:34px;height:34px;border:1px solid #fff;margin:-17px 0 0 -17px}
.cur-dot{width:5px;height:5px;background:#fff;margin:-2.5px 0 0 -2.5px}
body.cur-on .cur,body.cur-on .cur-dot{opacity:1}
@media (hover:none),(pointer:coarse){.cur,.cur-dot{display:none!important}}
@media (prefers-reduced-motion:reduce){.cur,.cur-dot{display:none!important}}

/* ---------- Skip-Link ---------- */
.skip{position:absolute;left:-9999px;top:0;z-index:var(--z-modal);background:var(--mgg-green);color:#04160C;
  padding:.9em 1.4em;font-family:var(--ff-mono);font-size:.75rem;letter-spacing:.1em;text-transform:uppercase}
.skip:focus{left:.5rem;top:.5rem}

/* ---------- Bild-Credits / KI-Kennzeichnung ---------- */
.credit{font-family:var(--ff-mono);font-size:.625rem;letter-spacing:.07em;color:var(--fg-soft);
  margin-top:.55rem;display:flex;flex-wrap:wrap;gap:.3rem .8rem}
.hero .credit{position:absolute;right:var(--pad);bottom:.7rem;color:rgba(255,255,255,.5);margin:0}

/* ---------- Utilities ---------- */
.vh{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.stack{display:grid;gap:clamp(1rem,2vw,1.6rem)}
.stack-sm{display:grid;gap:.75rem}
.split{display:grid;gap:clamp(1.75rem,4vw,3.5rem)}
@media (min-width:900px){.split{grid-template-columns:1fr 1fr;align-items:start}
  .split--intro{grid-template-columns:.85fr 1.15fr}}
.flow-cta{display:flex;flex-wrap:wrap;gap:.75rem;margin-top:clamp(1.25rem,2.5vw,2rem)}

/* ---------- Touch-Ziele: mindestens 44px, wo getippt wird ---------- */
.nav__tel{display:inline-flex;align-items:center;min-height:44px;padding-inline:.25rem}
.nav__lang a{min-height:44px;display:inline-flex;align-items:center;padding-inline:.6em}
.menu__sub a{display:inline-flex;align-items:center;min-height:40px}
.foot__links a{display:inline-flex;align-items:center;min-height:40px}
.foot__links{gap:0}
.menu__sub{gap:0}
@media (max-width:640px){
  .nav__tel{display:none}                 /* Anrufen liegt auf der Sticky-Leiste */
  .foot__bar{font-size:.625rem}
}

/* ---------- Reihen-Stapel: am Phone kein Sticky-Stapel, sondern Folge ---------- */
@media (max-width:899px){
  .rows__row{position:relative;min-height:0}
  .rows__fig{height:clamp(190px,34svh,300px)}
  .rows__inner{padding-block:clamp(2rem,6vw,3rem)}
}

/* ---------- Materialstrom am Phone: Scroll-Snap-Stufenfolge ---------- */
@media (max-width:759px){
  .flow__steps{grid-auto-flow:column;grid-auto-columns:78%;overflow-x:auto;scroll-snap-type:x mandatory;
    gap:1px;padding-bottom:.5rem;-webkit-overflow-scrolling:touch;background:var(--rule)}
  .flow__step{scroll-snap-align:start}
  .flow__viz{aspect-ratio:4/3}
}
.menu__aside a,.menu__foot a{display:inline-flex;align-items:center;min-height:36px}
.menu__aside div{line-height:1.5}
.ctaline .tlink{min-height:40px}

/* =========================================================================
   Seitenkopf für Unterseiten
   ========================================================================= */
.phead{position:relative;padding-top:clamp(6.5rem,13vh,9.5rem);padding-bottom:clamp(2.5rem,5vw,4.5rem);overflow:hidden}
.phead__in{display:grid;gap:clamp(1.75rem,4vw,3.5rem)}
@media (min-width:960px){.phead__in{grid-template-columns:1.1fr .9fr;align-items:end}}
.phead__txt{display:grid;gap:clamp(.9rem,1.8vw,1.35rem);align-content:end}
.phead__sub{max-width:52ch;color:var(--fg-soft)}
.phead__fig{position:relative;aspect-ratio:16/9;overflow:hidden;border-radius:2px;background:#0B0F10}
.phead__fig img{width:100%;height:100%;object-fit:cover;object-position:50% 55%}
.phead__fig .credit{position:absolute;right:.6rem;bottom:.45rem;margin:0;color:rgba(255,255,255,.62)}

.crumb{display:flex;flex-wrap:wrap;align-items:center;gap:.45rem;font-family:var(--ff-mono);
  font-size:.6875rem;letter-spacing:.09em;text-transform:uppercase;color:var(--fg-soft)}
.crumb a{color:inherit;text-decoration:underline;text-underline-offset:.25em;text-decoration-color:transparent;
  transition:text-decoration-color var(--t-fast)}
.crumb a:hover{text-decoration-color:currentColor}
.crumb i{font-style:normal;opacity:.45}
.crumb [aria-current]{color:var(--fg)}

/* =========================================================================
   Fließtext / Listen
   ========================================================================= */
.prose{max-width:62ch}
.ticks{display:grid;gap:.6rem;margin-top:.35rem}
.ticks li{position:relative;padding-left:1.6rem;color:var(--fg-soft);line-height:1.55}
.ticks li::before{content:"";position:absolute;left:0;top:.62em;width:.6rem;height:1px;background:var(--accent)}

/* =========================================================================
   Anteilsbalken (PV-Modul, Materialanteile)
   ========================================================================= */
.splitbars{display:grid;gap:.55rem;border-top:1px solid var(--rule)}
.splitbar{display:grid;grid-template-columns:minmax(7rem,14rem) 1fr auto;gap:clamp(.75rem,2vw,1.75rem);
  align-items:center;padding-block:clamp(.7rem,1.4vw,1rem);border-bottom:1px solid var(--rule)}
@media (max-width:560px){.splitbar{grid-template-columns:1fr auto;grid-template-areas:"k v" "t t";gap:.5rem}
  .splitbar__k{grid-area:k}.splitbar__v{grid-area:v}.splitbar__track{grid-area:t}}
.splitbar__k{font-size:.9375rem;line-height:1.3}
.splitbar__v{font-family:var(--ff-mono);font-size:.875rem;font-weight:500;font-variant-numeric:tabular-nums;
  color:var(--fg);white-space:nowrap}
.splitbar__track{height:clamp(1.1rem,2vw,1.5rem);background:color-mix(in srgb,var(--fg) 8%,transparent);border-radius:2px;overflow:hidden}
.splitbar__fill{display:block;height:100%;width:0;background:var(--c);border-radius:2px;
  transition:width 1.1s var(--ease-out);transition-delay:calc(var(--i,0)*90ms)}
.is-in .splitbar__fill{width:calc(var(--p)*1%)}
@media (prefers-reduced-motion:reduce){.splitbar__fill{transition:none;width:calc(var(--p)*1%)}}

/* =========================================================================
   Vergleichsbalken primär/sekundär
   ========================================================================= */
.cmp{display:grid;gap:clamp(1.5rem,3vw,2.5rem);border-top:1px solid var(--rule);padding-top:clamp(1.5rem,3vw,2.25rem)}
.cmp__row{display:grid;gap:.85rem}
@media (min-width:800px){.cmp__row{grid-template-columns:minmax(8rem,16rem) 1fr;gap:clamp(1.5rem,3vw,3rem);align-items:center}}
.cmp__k{font-size:clamp(1.125rem,1.4vw,1.375rem);font-weight:500;letter-spacing:-.006em}
.cmp__bars{display:grid;gap:.5rem}
.cmp__bar{position:relative;display:flex;align-items:center;height:clamp(2.1rem,3.6vw,2.75rem)}
.cmp__bar span{display:block;height:100%;width:0;border-radius:2px;transition:width 1.2s var(--ease-out)}
.is-in .cmp__bar span{width:calc(var(--p)*1%)}
@media (prefers-reduced-motion:reduce){.cmp__bar span{transition:none;width:calc(var(--p)*1%)}}
.cmp__bar--a span{background:color-mix(in srgb,var(--fg) 22%,transparent)}
.cmp__bar--b span{background:var(--accent);transition-delay:.25s}
.cmp__bar b{position:absolute;left:.75rem;font-family:var(--ff-mono);font-size:.6875rem;font-weight:500;
  letter-spacing:.08em;text-transform:uppercase;color:var(--fg);white-space:nowrap}
.cmp__bar--b b{color:#04160C}

/* =========================================================================
   Zeitleiste (horizontal, ziehbar)
   ========================================================================= */
.tl{position:relative}
.tl__track{display:grid;grid-auto-flow:column;grid-auto-columns:min(78vw,22rem);gap:1px;
  overflow-x:auto;scroll-snap-type:x mandatory;background:var(--rule);
  padding-inline:var(--pad);scroll-padding-inline:var(--pad);cursor:grab;
  scrollbar-width:thin;scrollbar-color:var(--accent) transparent}
.tl__track.is-drag{cursor:grabbing;scroll-snap-type:none}
.tl__track::-webkit-scrollbar{height:3px}
.tl__track::-webkit-scrollbar-thumb{background:var(--accent)}
.tl__item{scroll-snap-align:start;background:var(--bg);padding:clamp(1.4rem,2.6vw,2.25rem);
  display:grid;gap:.6rem;align-content:start}
.tl__year{font-family:var(--ff-mono);font-size:.75rem;letter-spacing:.12em;color:var(--accent)}
.tl__title{font-size:clamp(1.125rem,1.4vw,1.375rem);font-weight:500;line-height:1.25;letter-spacing:-.006em}
.tl__hint{padding-inline:var(--pad);padding-top:1rem;color:var(--fg-soft);
  text-transform:uppercase;letter-spacing:.12em;font-size:.625rem}

/* =========================================================================
   Spezifikationstabelle
   ========================================================================= */
.spec{display:grid;border-top:1px solid var(--rule)}
.spec__row{display:grid;gap:.25rem 1.5rem;padding-block:clamp(.8rem,1.6vw,1.1rem);border-bottom:1px solid var(--rule)}
@media (min-width:560px){.spec__row{grid-template-columns:minmax(8rem,15rem) 1fr;align-items:baseline}}
.spec dt{font-family:var(--ff-mono);font-size:.75rem;letter-spacing:.06em;color:var(--fg-soft)}
.spec dd{margin:0;line-height:1.5}
.spec dd a{text-decoration:underline;text-underline-offset:.2em}

/* =========================================================================
   Akkordeon / FAQ
   ========================================================================= */
.acc{display:grid;border-top:1px solid var(--rule)}
.acc__i{border-bottom:1px solid var(--rule)}
.acc__i summary{display:flex;align-items:center;justify-content:space-between;gap:1.5rem;
  padding-block:clamp(1rem,2vw,1.4rem);cursor:pointer;list-style:none;
  font-size:clamp(1.0625rem,1.3vw,1.25rem);font-weight:500;letter-spacing:-.006em;line-height:1.35;
  min-height:44px;transition:color var(--t-fast)}
.acc__i summary::-webkit-details-marker{display:none}
.acc__i summary:hover{color:var(--accent)}
.acc__i summary i{position:relative;flex:none;width:14px;height:14px}
.acc__i summary i::before,.acc__i summary i::after{content:"";position:absolute;background:currentColor;
  transition:transform var(--t-med) var(--ease)}
.acc__i summary i::before{left:0;top:6.5px;width:14px;height:1.4px}
.acc__i summary i::after{left:6.5px;top:0;width:1.4px;height:14px}
.acc__i[open] summary i::after{transform:scaleY(0)}
.acc__i[open] summary{color:var(--accent)}
.acc__b{padding-bottom:clamp(1rem,2vw,1.4rem);max-width:62ch}

/* =========================================================================
   Öffnungszeiten
   ========================================================================= */
.hrs{display:grid;gap:1px;background:var(--rule);border:1px solid var(--rule)}
@media (min-width:820px){.hrs{grid-template-columns:repeat(3,1fr)}}
.hrs__g{background:var(--bg);padding:clamp(1.4rem,2.6vw,2rem);display:grid;gap:.7rem;align-content:start}
.hrs__list{display:grid;margin-top:.35rem}
.hrs__row{display:grid;gap:.15rem;padding-block:.7rem;border-top:1px solid var(--rule)}
@media (min-width:400px){.hrs__row{grid-template-columns:1fr auto;gap:1rem;align-items:baseline}}
.hrs dt{font-size:.9375rem;color:var(--fg-soft)}
.hrs dd{margin:0;font-family:var(--ff-mono);font-size:.875rem;font-variant-numeric:tabular-nums}

/* =========================================================================
   Kontakt & Formular
   ========================================================================= */
.ctc{display:grid;gap:1px;background:var(--rule);border:1px solid var(--rule);margin-top:.5rem}
@media (min-width:520px){.ctc{grid-template-columns:1fr 1fr}}
.ctc__b{background:var(--bg);padding:clamp(1.1rem,2.2vw,1.6rem);display:grid;gap:.5rem;align-content:start}
.ctc__b .small{color:var(--fg-soft)}
.ctc__b a{color:var(--fg);font-weight:500}

.frm{display:grid;gap:1rem;padding:clamp(1.4rem,3vw,2.4rem);border:1px solid var(--rule);border-radius:2px;
  background:color-mix(in srgb,var(--fg) 3%,transparent);align-content:start;position:relative}
.frm__lead{color:var(--fg-soft);margin-bottom:.25rem}
.frm__f{display:grid;gap:.4rem}
.frm__row{display:grid;gap:1rem}
@media (min-width:520px){.frm__row{grid-template-columns:1fr 1fr}}
.frm label{font-family:var(--ff-mono);font-size:.6875rem;letter-spacing:.1em;text-transform:uppercase;color:var(--fg-soft)}
.frm input,.frm select,.frm textarea{
  font:inherit;font-size:1rem;
  padding:.85em 1em;border:1px solid var(--rule);border-radius:2px;background:var(--bg);color:var(--fg);
  width:100%;min-height:48px;transition:border-color var(--t-fast)}
.frm textarea{resize:vertical;min-height:8rem}
.frm input:focus-visible,.frm select:focus-visible,.frm textarea:focus-visible{border-color:var(--accent)}
.frm input[aria-invalid="true"],.frm textarea[aria-invalid="true"]{border-color:#C4453B}
.frm__err{font-family:var(--ff-mono);font-size:.6875rem;letter-spacing:.04em;color:#C4453B;text-transform:none}
.frm__hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.frm__chk{display:flex;gap:.7rem;align-items:flex-start;font-family:var(--ff);font-size:.875rem;
  letter-spacing:0;text-transform:none;color:var(--fg-soft);line-height:1.5;cursor:pointer}
.frm__chk input{width:1.15rem;height:1.15rem;min-height:0;flex:none;margin-top:.15rem;accent-color:var(--mgg-green)}
.frm__chk a{color:var(--fg);text-decoration:underline;text-underline-offset:.2em}
.frm__go{justify-self:start;margin-top:.25rem}
.frm__go[disabled]{opacity:.55;cursor:not-allowed}
.frm__msg:empty{display:none}
.frm__msg{font-family:var(--ff-mono);font-size:.75rem;letter-spacing:.04em;padding:.85em 1em;border-radius:2px;
  background:color-mix(in srgb,var(--accent) 14%,transparent);color:var(--fg)}
.frm__msg[data-err]{background:rgba(196,69,59,.14);color:#C4453B}

/* =========================================================================
   Rechtstexte
   ========================================================================= */
.legal{max-width:78ch;display:grid;gap:1.1rem}
.legal h2{margin-top:clamp(1.5rem,3vw,2.5rem)}
.legal h2:first-child{margin-top:0}
.legal .spec{margin-block:.5rem}
.legal a{text-decoration:underline;text-underline-offset:.2em}
mark.todo{background:#FFE9A8;color:#4A3B00;padding:.1em .45em;border-radius:2px;
  font-family:var(--ff-mono);font-size:.8125rem}

/* =========================================================================
   Signature — Recycling-Kreislauf
   ========================================================================= */
.cyc{display:grid;gap:clamp(2rem,4vw,4rem);align-items:center}
@media (min-width:900px){.cyc{grid-template-columns:1.05fr .95fr}}
.cyc__list{display:grid;gap:.15rem;margin-top:.5rem;border-top:1px solid var(--rule)}
.cyc__item{display:grid;grid-template-columns:2.4rem 1fr;gap:.9rem;align-items:baseline;
  padding-block:clamp(.7rem,1.4vw,1rem);border-bottom:1px solid var(--rule);
  opacity:.55;transition:opacity .45s var(--ease)}
.cyc__item.is-on{opacity:1}
.cyc__item strong{font-weight:500;color:var(--fg)}
.cyc__item span:last-child{color:var(--fg-soft);font-size:.9375rem;line-height:1.5}
.cyc__n{font-family:var(--ff-mono);font-size:.6875rem;letter-spacing:.1em;color:var(--accent)}
.cyc__viz{display:grid;place-items:center}
.cyc__viz svg{width:100%;max-width:26rem;height:auto;overflow:visible}
.cyc__ring{fill:none;stroke:var(--rule);stroke-width:1}
.cyc__seg{fill:none;stroke:var(--accent);stroke-width:3;stroke-linecap:round;
  stroke-dasharray:200;stroke-dashoffset:200;
  transition:stroke-dashoffset .8s var(--ease-out);transition-delay:calc(var(--ci,0)*.16s)}
.is-in .cyc__seg{stroke-dashoffset:0}
.cyc__node circle{fill:var(--bg);stroke:var(--accent);stroke-width:1.5;transition:fill .4s var(--ease)}
.cyc__node text{font-family:var(--ff-mono);font-size:9px;font-weight:500;fill:var(--fg);text-anchor:middle;
  transition:fill .4s var(--ease)}
.cyc__node.is-on circle{fill:var(--accent)}
.cyc__node.is-on text{fill:#04160C}
.cyc__bead{fill:var(--accent);opacity:0;transform-origin:175px 175px}
.is-in .cyc__bead{opacity:1;animation:cycorbit 16s linear infinite}
@keyframes cycorbit{to{transform:rotate(360deg)}}
.cyc__mid{font-family:var(--ff-mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  fill:var(--fg);text-anchor:middle}
.cyc__mid--sub{font-size:9px;letter-spacing:.06em;text-transform:none;fill:var(--fg-soft)}
@media (prefers-reduced-motion:reduce){
  .cyc__seg{stroke-dashoffset:0;transition:none}
  .is-in .cyc__bead{animation:none}
}

/* =========================================================================
   Signature — Karte
   ========================================================================= */
.map{position:relative}
.map__svg{width:100%;height:auto;overflow:visible}
.map__ctx path{fill:none;stroke:color-mix(in srgb,var(--fg) 18%,transparent);stroke-width:.8;
  vector-effect:non-scaling-stroke}
.map__core path{fill:color-mix(in srgb,var(--fg) 9%,transparent);
  stroke:color-mix(in srgb,var(--fg) 30%,transparent);stroke-width:1;vector-effect:non-scaling-stroke;
  transition:fill .4s var(--ease)}
.map__core path.is-on{fill:color-mix(in srgb,var(--accent) 26%,transparent)}
.map__arc{fill:none;stroke:var(--accent);stroke-width:1.6;vector-effect:non-scaling-stroke;
  stroke-dasharray:900;stroke-dashoffset:900;opacity:.85;
  transition:stroke-dashoffset 1.4s var(--ease-out),stroke-width .3s;
  transition-delay:calc(var(--ai,0)*.18s + .2s)}
.is-in .map__arc{stroke-dashoffset:0}
.map__arc.is-on{stroke-width:2.8}
.map__halo{fill:var(--accent);opacity:.16;transform-box:fill-box;transform-origin:center}
.is-in .map__pin.is-hub .map__halo{animation:mappulse 3.2s var(--ease) infinite}
@keyframes mappulse{0%,100%{opacity:.1;transform:scale(.7)}50%{opacity:.3;transform:scale(1.25)}}
.map__dot{fill:var(--accent);stroke:var(--bg);stroke-width:1.4;vector-effect:non-scaling-stroke;
  transition:r .3s var(--ease)}
.map__pin.is-on .map__dot{r:6}
.map .credit{margin-top:.9rem}
@media (prefers-reduced-motion:reduce){
  .map__arc{stroke-dashoffset:0;transition:none}
  .is-in .map__pin.is-hub .map__halo{animation:none}
}
.locs__item{transition:color .3s var(--ease)}
.locs__item.is-on{color:var(--accent)}
.locs__item.is-on .locs__cc{color:var(--fg)}
.locs__name strong{font-weight:500}
.router__kicker{color:var(--fg-soft)}
.hrs__g .h-sm{color:var(--fg)}
@media (max-width:899px){.cyc__viz{order:-1}}
@media (min-width:960px){
  .map{position:sticky;top:clamp(6rem,12vh,8rem)}
  .locs{align-items:start}
}

/* Touch-Ziele: eigenständige Links auf mindestens 32px, Fließtext-Links ausgenommen */
.crumb a,.crumb span{display:inline-flex;align-items:center;min-height:32px}
.ctc__b .tlink{min-height:32px}
.foot__bar a{display:inline-flex;align-items:center;min-height:32px}
.menu__foot a{min-height:32px}
.foot__top p.small a{display:inline-flex;align-items:center;min-height:32px}
.callstrip__tel{min-height:32px}
.menu__aside a{min-height:32px}

/* ---------- Kontrast-Korrekturen ---------- */
.nav__lang a{opacity:.72}
.credit{color:var(--fg-soft)}
.hero .credit,.phead__fig .credit{color:rgba(255,255,255,.78);text-shadow:0 1px 3px rgba(0,0,0,.55)}
.foot__bar{color:rgba(255,255,255,.62)}

/* Vergleichsbalken: Beschriftung sitzt hinter dem Balken, nie darauf */
.cmp__bar{display:flex;align-items:center;gap:.75rem;position:static}
.cmp__bar span{flex:none}
.cmp__bar b{position:static;color:var(--fg);flex:none}
.cmp__bar--b b{color:var(--fg)}
/* Bildnachweis auf dunklen Bildflächen als Overlay, damit er nie auf dem Platzhalter-Schwarz steht */
.rows__fig{display:block}
.rows__fig .credit{position:absolute;right:var(--pad);bottom:.5rem;margin:0;
  color:rgba(255,255,255,.78);text-shadow:0 1px 3px rgba(0,0,0,.55)}
.card--media figure{position:relative}
.card--media .credit{position:absolute;right:.6rem;bottom:.45rem;margin:0;
  color:rgba(255,255,255,.8);text-shadow:0 1px 3px rgba(0,0,0,.55)}

/* ---------- Überlauf-Schutz: nichts darf den Viewport sprengen ---------- */
.btn{max-width:100%}
@media (max-width:520px){
  .btn{white-space:normal;text-align:center;justify-content:center;line-height:1.35}
}
/* Lange Wörter, E-Mail-Adressen und Komposita kontrolliert umbrechen */
p,li,dd,dt,h1,h2,h3,summary,figcaption,.cite,.body,.small,.lead{overflow-wrap:break-word}
.spec dd,.ctc__b,.legal{overflow-wrap:anywhere}

/* =========================================================================
   Tablet-Bereich (768–1024) — eigene Komposition statt gestrecktem Phone
   ========================================================================= */

/* Typo-Kurve: linear statt reiner vw-Skalierung, damit die Mitte nicht einbricht */
.h-mega{font-size:clamp(2.75rem,2.6vw + 2.1rem,6.25rem)}
.h-big {font-size:clamp(2.1rem,1.9vw + 1.55rem,3.5rem)}
.h-mid {font-size:clamp(1.5rem,0.9vw + 1.25rem,2.125rem)}
.hero__h1{font-size:clamp(2.4rem,2.4vw + 1.85rem,4.75rem)}
.lead{font-size:clamp(1.125rem,0.5vw + 1rem,1.5rem)}

/* Zeilenlänge deckeln — sonst laufen Absätze am Tablet zu breit */
.rows__txt,.prose,.acc__b,.stats__lbl,.phead__sub{max-width:64ch}
.intro-lead,.split--intro .lead{max-width:56ch}

/* Drei-Wege-Router: früher dreispaltig, dazwischen zweispaltig mit breiter erster Karte */
@media (min-width:660px) and (max-width:819px){
  .router{grid-template-columns:1fr 1fr}
  .router__card:first-child{grid-column:1 / -1;min-height:0}
  .router__card:first-child .small{max-width:60ch}
}
@media (min-width:820px){.router{grid-template-columns:repeat(3,1fr)}}

/* Statistik: am Tablet zweispaltig, Zahl und Text nebeneinander */
@media (min-width:700px) and (max-width:899px){
  .stats{grid-template-columns:1fr;gap:clamp(1.75rem,3vw,2.5rem)}
  .stats__rows{grid-template-columns:1fr 1fr;gap:0 clamp(1.5rem,3vw,2.5rem)}
  .stats__row{border-top:1px solid var(--rule)}
  .stats__row:nth-last-child(-n+2){border-bottom:1px solid var(--rule)}
}

/* Sticky-Zeilen: Text am Tablet zweispaltig, Bild bleibt Vollbreitenband */
@media (min-width:700px) and (max-width:899px){
  .rows__inner{grid-template-columns:1fr 1fr;gap:clamp(1.75rem,4vw,3rem);align-items:start}
  .rows__fig{height:clamp(220px,38svh,340px)}
}

/* Karten: bei 3-Spalten-Rastern am Tablet zwei, darunter eine */
@media (min-width:620px) and (max-width:1039px){.cards--3{grid-template-columns:repeat(2,1fr)}}

/* Standorte: Karte am Tablet zuerst und über die volle Breite */
@media (max-width:959px){
  .locs{display:flex;flex-direction:column}
  .map{order:-1}
  .map__svg{max-height:52svh;width:100%}
}
@media (min-width:700px) and (max-width:959px){
  .locs__item{grid-template-columns:auto 1fr auto}
}

/* Öffnungszeiten: am Tablet zwei Spalten, drittes Feld über beide */
@media (min-width:600px) and (max-width:819px){
  .hrs{grid-template-columns:1fr 1fr}
  .hrs__g:last-child{grid-column:1 / -1}
}

/* Kontakt: Formular am Tablet unter die Kontaktblöcke, Blöcke nebeneinander */
@media (min-width:700px) and (max-width:899px){
  .ctc{grid-template-columns:repeat(2,1fr)}
}

/* Materialstrom: am Tablet vier Spalten sind zu eng — zwei mal zwei */
@media (min-width:560px) and (max-width:1023px){
  .flow__steps{grid-template-columns:1fr 1fr}
}

/* Seitenkopf: am Tablet Bild unter den Text, aber breiter inszeniert */
@media (min-width:700px) and (max-width:959px){
  .phead__fig{aspect-ratio:21/9}
}

/* Kreislauf: am Tablet Ring und Liste nebeneinander, Ring kleiner */
@media (min-width:700px) and (max-width:899px){
  .cyc{grid-template-columns:1fr 1fr;align-items:center}
  .cyc__viz{order:0}
  .cyc__viz svg{max-width:20rem}
}

/* Vergleichsbalken: am Tablet Label über den Balken statt daneben */
@media (max-width:799px){
  .cmp__row{gap:.6rem}
  .cmp__k{font-size:1.0625rem}
}

/* Zeitleiste: am Tablet zwei Karten sichtbar */
@media (min-width:700px){.tl__track{grid-auto-columns:min(46vw,24rem)}}
@media (min-width:1200px){.tl__track{grid-auto-columns:min(30vw,26rem)}}

/* Sehr schmale Geräte (320) — Innenabstände zurücknehmen */
@media (max-width:359px){
  :root{--pad:1rem}
  .btn{padding:.95em 1.2em;font-size:.625rem;letter-spacing:.1em}
  .hero__trigger{font-size:.625rem;gap:.3rem .7rem}
  .stats__num{font-size:2.1rem}
  .flow__seg{height:2.2rem}
}

/* Sehr breite Schirme — Weißraum bändigen */
@media (min-width:1700px){
  :root{--maxw:1680px}
  .hero__band{height:clamp(240px,30svh,420px)}
}

/* ---------- Hero am Phone exakt auf eine Bildschirmhöhe bringen ---------- */
@media (max-width:520px){
  .hero{padding-top:clamp(4.75rem,9vh,6rem)}
  .hero__band{height:clamp(140px,21svh,240px)}
  .hero__grid{gap:.9rem;padding-bottom:1rem}
  .hero__h1{font-size:clamp(2.1rem,8.4vw,2.9rem);line-height:1.06}
  .hero__sub{font-size:1rem;line-height:1.45;max-width:38ch}
  .hero__cta{margin-top:1rem;gap:.5rem;width:100%}
  .hero__cta .btn{flex:1 1 auto}
  .hero__trigger{margin-top:.7rem;gap:.25rem .8rem}
}
@media (max-width:380px){
  .hero__trigger span:last-child{display:none}   /* dritter Beleg passt sonst nicht mehr */
  .hero__h1{font-size:clamp(1.95rem,8.6vw,2.5rem)}
}

/* ---------- Materialstrom: klare Staffelung ohne Regelkonflikt ---------- */
.flow__steps{grid-auto-flow:row}
@media (max-width:559px){
  .flow__steps{grid-auto-flow:column;grid-auto-columns:80%;grid-template-columns:none;
    overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:.5rem;-webkit-overflow-scrolling:touch}
  .flow__step{scroll-snap-align:start}
}
@media (min-width:560px) and (max-width:1023px){
  .flow__steps{grid-template-columns:1fr 1fr;overflow:visible}
}
@media (min-width:1024px){
  .flow__steps{grid-template-columns:repeat(4,1fr);overflow:visible}
}

/* Sehr niedrige Viewports (kleines iPhone SE, Landscape-Phones): Hero komprimieren */
@media (max-height:660px) and (max-width:900px){
  .hero{min-height:auto;padding-top:4.5rem}
  .hero__band{height:clamp(110px,16svh,170px)}
  .hero__h1{font-size:clamp(1.75rem,7vw,2.25rem)}
  .hero__sub{font-size:.9375rem;max-width:34ch}
  .hero__trigger{display:none}
  .hero__grid{gap:.7rem;padding-bottom:.75rem}
}

/* =========================================================================
   Materialband — laufende Leiste der erzeugten Fraktionen
   ========================================================================= */
.mq{overflow:hidden;border-block:1px solid var(--rule);padding-block:clamp(1rem,2vw,1.5rem)}
.mq__vp{position:relative;-webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
.mq__row{display:flex;width:max-content}
.mq__row[data-marquee-ready]{will-change:transform;
  animation:mqrun var(--mq-t,140s) linear infinite}
.mq:hover .mq__row,.mq:focus-within .mq__row{animation-play-state:paused}
@keyframes mqrun{to{transform:translate3d(calc(var(--mq-w,0px) * -1),0,0)}}
.mq__set{display:flex;align-items:center;flex:none;padding-right:0}
.mq__i{font-family:var(--ff-mono);font-size:clamp(.75rem,1.1vw,.9375rem);letter-spacing:.1em;
  text-transform:uppercase;color:var(--fg);padding-inline:clamp(.8rem,1.6vw,1.4rem);white-space:nowrap}
.mq__d{color:var(--accent);opacity:.8;font-size:1rem}
@media (prefers-reduced-motion:reduce){
  .mq__vp{overflow-x:auto}
  .mq__row{animation:none!important;transform:none!important}
}

/* =========================================================================
   Große Zahl
   ========================================================================= */
.bn{position:relative;padding-block:clamp(4rem,10vw,9rem);overflow:hidden}
.bn__in{display:grid;gap:clamp(1rem,2.5vw,2rem)}
.bn__fig{display:flex;align-items:baseline;gap:clamp(.4rem,1.2vw,1rem);flex-wrap:wrap;
  margin-block:clamp(.25rem,1vw,.75rem)}
.bn__n{font-size:clamp(4rem,16.5vw,15rem);line-height:.84;letter-spacing:-.045em;font-weight:400;
  font-variant-numeric:tabular-nums;color:var(--fg);display:block}
.bn__u{font-family:var(--ff-mono);font-size:clamp(1rem,2.4vw,2rem);letter-spacing:.04em;color:var(--accent);
  align-self:flex-end;padding-bottom:clamp(.4rem,1.4vw,1.6rem)}
.bn__foot{display:grid;gap:.75rem;border-top:1px solid var(--rule);padding-top:clamp(1rem,2vw,1.5rem)}
@media (min-width:820px){.bn__foot{grid-template-columns:1.1fr .9fr;gap:clamp(2rem,4vw,4rem);align-items:start}}
.bn__lead{font-size:clamp(1.125rem,1.5vw,1.5rem);line-height:1.4;letter-spacing:-.008em;max-width:30ch}
.bn__note{font-family:var(--ff-mono);font-size:.75rem;letter-spacing:.03em;color:var(--fg-soft);
  line-height:1.6;max-width:46ch}
.bn__rule{position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--rule)}
.bn__rule span{display:block;height:100%;width:0;background:var(--accent);transition:width .1s linear}

/* =========================================================================
   Statement
   ========================================================================= */
.st__in{position:relative;display:grid;gap:clamp(1.25rem,2.5vw,2rem);justify-items:start}
@media (min-width:900px){.st__in{grid-template-columns:auto minmax(0,1fr);
  column-gap:clamp(1.5rem,3vw,3rem);align-items:start}}
.st__mark{font-size:clamp(4rem,9vw,9rem);line-height:.62;color:var(--accent);
  font-weight:400;user-select:none}
.st__q{margin:0;display:grid;gap:clamp(1rem,2vw,1.75rem);max-width:none}
/* Maß auf dem Element mit der Display-Größe setzen, nicht auf dem Blockquote —
   sonst rechnet ch gegen die Fließtextgröße und die Spalte wird viel zu schmal. */
.st__q .h-big{letter-spacing:-.022em;line-height:1.1;max-width:21ch}
@media (max-width:899px){.st__q .h-big{max-width:18ch}}
.st__src{font-family:var(--ff-mono);font-size:.6875rem;letter-spacing:.13em;text-transform:uppercase;
  color:var(--fg-soft);display:flex;align-items:center;gap:.7em}
.st__src::before{content:"";width:1.75rem;height:1px;background:var(--accent);flex:none}
@media (min-width:900px){.st__in .flow-cta{grid-column:2}}

/* =========================================================================
   Hero-Band: Parallaxe beim Scrollen
   ========================================================================= */
.hero__band img{will-change:transform}
@media (prefers-reduced-motion:reduce){.hero__band img{transform:none!important}}

/* =========================================================================
   Seitenwechsel — View Transitions, wo der Browser es kann
   ========================================================================= */
@view-transition{navigation:auto}
@media (prefers-reduced-motion:no-preference){
  ::view-transition-old(root){animation:vtOut .22s var(--ease) both}
  ::view-transition-new(root){animation:vtIn .34s var(--ease-out) both}
}
@keyframes vtOut{to{opacity:0}}
@keyframes vtIn{from{opacity:0;transform:translateY(12px)}}

/* Sprungziele nicht unter der fixierten Navigation verstecken */
:target,#main{scroll-margin-top:clamp(5rem,10vh,7rem)}
#main:focus{outline:none}
/* Links in Datenblatt-Zeilen sind eigenständige Ziele, keine Fließtext-Links */
.spec dd a{display:inline-flex;align-items:center;min-height:32px}
@media (prefers-reduced-motion:reduce){
  ::view-transition-old(root),::view-transition-new(root){animation:none;mix-blend-mode:normal}
}

/* =========================================================================
   Menü — die beiden Geschäftswege stehen oben und größer
   ========================================================================= */
.menu__nav{display:grid;gap:clamp(1.5rem,3vw,2.5rem);align-content:start}
.menu__list--primary{border-bottom:1px solid rgba(255,255,255,.22);padding-bottom:clamp(1rem,2vw,1.5rem)}
.menu__list--primary>li{border:0}
.menu__i--primary .menu__link{font-size:clamp(2rem,4.6vw,3.5rem);color:#fff;padding-block:clamp(.5rem,1.2vw,.8rem)}
.menu__i--primary .menu__link::after{content:"→";margin-left:.45em;font-size:.5em;color:var(--mgg-green);
  transform:translateX(0);display:inline-block;transition:transform var(--t-med) var(--ease-out)}
.menu__i--primary .menu__link:hover::after{transform:translateX(.35em)}
.menu__hint{font-family:var(--ff-mono);font-size:.6875rem;letter-spacing:.09em;text-transform:uppercase;
  color:var(--mgg-green);margin:-.15rem 0 .5rem}
.menu__i--primary .menu__sub{padding-bottom:clamp(.5rem,1.4vw,1rem)}
@media (max-width:640px){
  .menu__i--primary .menu__link{font-size:clamp(1.6rem,7vw,2.2rem)}
}

/* =========================================================================
   Seiten-Handschriften — je Bereich eine eigene Kopfzone und Signatur
   ========================================================================= */

/* --- Firma: ruhig, dunkel, Linienraster --- */
body.th-firma .phead{--bg:var(--c-ink);--fg:#F3F5F4;--fg-soft:#98A2A2;
  --rule:rgba(255,255,255,.18);--accent:var(--mgg-green);background:var(--c-ink)}
body.th-firma .phead::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:repeating-linear-gradient(180deg,rgba(255,255,255,.045) 0 1px,transparent 1px 68px)}
body.th-firma .phead__in{position:relative}

/* --- Recycling: Waldgrün, diagonale Signatur aus dem Logo --- */
body.th-recycling .phead{background:var(--c-forest)}
body.th-recycling .phead::after{content:"";position:absolute;right:-6%;top:-30%;width:46%;height:170%;
  background:linear-gradient(200deg,rgba(0,168,84,.22),transparent 62%);
  clip-path:polygon(28% 0,100% 0,100% 74%);pointer-events:none}

/* --- Produkte: hell und datengetrieben, blauer Akzent --- */
body.th-produkte .phead{--bg:var(--c-steel);--fg:#14181A;--fg-soft:#4E5658;
  --rule:rgba(20,24,26,.2);--accent:var(--mgg-blue);background:var(--c-steel)}
body.th-produkte .phead::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:repeating-linear-gradient(90deg,rgba(0,72,132,.07) 0 1px,transparent 1px 44px)}
body.th-produkte .phead__in{position:relative}
body.th-produkte .phead .crumb [aria-current]{color:var(--mgg-blue)}
body.th-produkte .spec dt{color:var(--mgg-blue)}

/* --- Nachhaltigkeit: Grün als Leitfarbe, weicher Verlauf --- */
body.th-umwelt .phead{background:
  radial-gradient(120% 140% at 82% 0%,rgba(0,168,84,.28),transparent 58%),var(--c-forest)}
body.th-umwelt .eyebrow{color:var(--mgg-green)}

/* --- Anlieferung: dunkel und funktional, Grün als Signalfarbe --- */
body.th-anlieferung .phead{--bg:var(--c-ink);--fg:#F3F5F4;--fg-soft:#98A2A2;
  --rule:rgba(255,255,255,.2);--accent:var(--mgg-green);background:var(--c-ink)}
body.th-anlieferung .phead::after{content:"";position:absolute;left:0;right:0;bottom:0;height:3px;
  background:repeating-linear-gradient(90deg,var(--mgg-green) 0 34px,transparent 34px 68px)}

/* --- Karriere: heller und wärmer --- */
body.th-karriere .phead{--bg:var(--c-pale);--fg:#14181A;--fg-soft:#565E60;
  --rule:rgba(20,24,26,.16);--accent:var(--mgg-blue);background:var(--c-pale)}
body.th-karriere .phead__fig{border-radius:2px}

/* --- Blog: editorial, weiß, feine Linie --- */
body.th-blog .phead{--bg:var(--c-white);--fg:#14181A;--fg-soft:#565E60;
  --rule:rgba(20,24,26,.16);--accent:var(--mgg-blue);background:var(--c-white);
  border-bottom:1px solid rgba(20,24,26,.16)}
body.th-blog .phead__txt{max-width:62ch}

/* --- Kontakt: dunkel, ruhig --- */
body.th-kontakt .phead{--bg:var(--c-ink);--fg:#F3F5F4;--fg-soft:#98A2A2;
  --rule:rgba(255,255,255,.2);--accent:var(--mgg-green);background:var(--c-ink)}

/* --- Rechtstexte: zurückgenommen --- */
body.th-legal .phead{--bg:var(--c-pale);--fg:#14181A;--fg-soft:#565E60;
  --rule:rgba(20,24,26,.16);--accent:var(--mgg-blue);background:var(--c-pale);
  padding-bottom:clamp(1.5rem,3vw,2.5rem)}
body.th-legal .phead .h-big{font-size:clamp(1.8rem,3vw,2.5rem)}

/* Kopfzonen brauchen einen Stapelkontext für ihre Signaturen */
.phead{isolation:isolate}
.phead>*{position:relative;z-index:1}

/* =========================================================================
   Rechner
   ========================================================================= */
.calc{display:grid;gap:1px;background:var(--rule);border:1px solid var(--rule);border-radius:2px;overflow:hidden}
@media (min-width:900px){.calc{grid-template-columns:.85fr 1.15fr}}

.calc__in{background:var(--bg);padding:clamp(1.4rem,2.8vw,2.25rem);display:grid;gap:1.1rem;align-content:start}
.calc__f{display:grid;gap:.4rem}
.calc__f label{font-family:var(--ff-mono);font-size:.6875rem;letter-spacing:.1em;
  text-transform:uppercase;color:var(--fg-soft)}
.calc__num{display:flex;align-items:stretch;border:1px solid var(--rule);border-radius:2px;
  background:color-mix(in srgb,var(--fg) 4%,transparent);transition:border-color var(--t-fast)}
.calc__num:focus-within{border-color:var(--accent)}
.calc__in input[type=number],.calc__in select{
  font:inherit;font-size:1.0625rem;font-variant-numeric:tabular-nums;
  padding:.8em 1em;border:0;background:none;color:var(--fg);width:100%;min-height:48px;
  -moz-appearance:textfield}
.calc__in input[type=number]::-webkit-outer-spin-button,
.calc__in input[type=number]::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.calc__in select{border:1px solid var(--rule);border-radius:2px;
  background:color-mix(in srgb,var(--fg) 4%,transparent)}
.calc__in select:focus-visible{border-color:var(--accent)}
.calc__unit{display:flex;align-items:center;padding-inline:.9em;flex:none;
  font-family:var(--ff-mono);font-size:.8125rem;color:var(--fg-soft);
  border-left:1px solid var(--rule)}

.calc__range{-webkit-appearance:none;appearance:none;width:100%;height:2px;margin-top:.55rem;
  background:var(--rule);border-radius:2px;cursor:pointer}
.calc__range::-webkit-slider-thumb{-webkit-appearance:none;width:20px;height:20px;border-radius:50%;
  background:var(--accent);border:3px solid var(--bg);box-shadow:0 0 0 1px var(--rule);cursor:grab}
.calc__range::-moz-range-thumb{width:20px;height:20px;border-radius:50%;border:3px solid var(--bg);
  background:var(--accent);box-shadow:0 0 0 1px var(--rule);cursor:grab}
.calc__range:active::-webkit-slider-thumb{cursor:grabbing}

.calc__hint{font-family:var(--ff-mono);font-size:.6875rem;letter-spacing:.03em;color:var(--fg-soft);
  line-height:1.55;margin-top:.2rem}

.calc__out{background:var(--bg);padding:clamp(1.4rem,2.8vw,2.25rem);display:grid;gap:1rem;align-content:start}
.calc__rows{display:grid}
.calc__row{display:grid;gap:.15rem 1.5rem;padding-block:clamp(.7rem,1.5vw,1rem);
  border-bottom:1px solid var(--rule)}
@media (min-width:520px){.calc__row{grid-template-columns:1fr auto;align-items:baseline}}
.calc__row:first-child{border-top:1px solid var(--rule)}
.calc__k{color:var(--fg-soft);font-size:.9375rem;line-height:1.4}
.calc__v{display:flex;align-items:baseline;gap:.4em;font-variant-numeric:tabular-nums;white-space:nowrap}
.calc__v b{font-weight:400;font-size:clamp(1.375rem,2.2vw,1.875rem);letter-spacing:-.02em;color:var(--fg)}
.calc__v i{font-style:normal;font-family:var(--ff-mono);font-size:.8125rem;color:var(--fg-soft)}
.calc__row--lead .calc__v b{font-size:clamp(2rem,4vw,3.25rem);line-height:1;color:var(--accent)}
.calc__row--lead .calc__k{font-size:1rem;color:var(--fg)}

.calc__bar{height:3px;background:var(--rule);border-radius:2px;overflow:hidden}
.calc__bar span{display:block;height:100%;width:0;background:var(--accent);
  transition:width .5s var(--ease-out)}
@media (prefers-reduced-motion:reduce){.calc__bar span{transition:none}}

.calc__note{font-family:var(--ff-mono);font-size:.6875rem;letter-spacing:.03em;
  color:var(--fg-soft);line-height:1.6}
.calc__note:empty{display:none}

.calc__basis{margin-top:clamp(1rem,2vw,1.5rem);border-top:1px solid var(--rule)}
.calc__basis summary{display:flex;align-items:center;justify-content:space-between;gap:1rem;
  padding-block:clamp(.8rem,1.6vw,1.1rem);cursor:pointer;list-style:none;min-height:44px;
  font-family:var(--ff-mono);font-size:.6875rem;letter-spacing:.12em;text-transform:uppercase;
  color:var(--fg-soft);transition:color var(--t-fast)}
.calc__basis summary::-webkit-details-marker{display:none}
.calc__basis summary:hover{color:var(--accent)}
.calc__basis summary i{position:relative;flex:none;width:12px;height:12px}
.calc__basis summary i::before,.calc__basis summary i::after{content:"";position:absolute;
  background:currentColor;transition:transform var(--t-med) var(--ease)}
.calc__basis summary i::before{left:0;top:5.5px;width:12px;height:1.2px}
.calc__basis summary i::after{left:5.5px;top:0;width:1.2px;height:12px}
.calc__basis[open] summary i::after{transform:scaleY(0)}
.calc__basisbody{padding-bottom:clamp(1rem,2vw,1.4rem);max-width:70ch;display:grid;gap:.9rem}

/* =========================================================================
   Blog — Übersicht
   ========================================================================= */
.blog{display:grid;gap:1px;background:var(--rule);border:1px solid var(--rule)}
@media (min-width:700px){.blog{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1100px){.blog{grid-template-columns:repeat(3,1fr)}}

.bpost{background:var(--bg);display:grid;grid-template-rows:auto 1fr;
  transition:background var(--t-med) var(--ease)}
.bpost:hover{background:color-mix(in srgb,var(--fg) 5%,var(--bg))}
.bpost__fig{position:relative;aspect-ratio:16/9;overflow:hidden;background:var(--c-ink)}
.bpost__fig img{width:100%;height:100%;object-fit:cover;transition:transform 1.1s var(--ease-out)}
.bpost:hover .bpost__fig img{transform:scale(1.045)}
.bpost__body{padding:clamp(1.2rem,2.4vw,1.9rem);display:flex;flex-direction:column;gap:.65rem}
.bpost__meta{display:flex;flex-wrap:wrap;align-items:center;gap:.55rem .9rem;
  font-family:var(--ff-mono);font-size:.6875rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--fg-soft)}
.bpost__cat{color:var(--accent);display:inline-flex;align-items:center;gap:.5em}
.bpost__cat::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor;flex:none}
.bpost__t{transition:color var(--t-fast)}
.bpost:hover .bpost__t{color:var(--accent)}
.bpost__x{max-width:52ch}
.bpost .card__go{margin-top:auto;padding-top:.4rem}

/* Der neueste Beitrag nimmt die volle Breite und zeigt das Bild groß */
@media (min-width:700px){
  .bpost--lead{grid-column:1 / -1;grid-template-rows:none;grid-template-columns:1.15fr .85fr;align-items:stretch}
  .bpost--lead .bpost__fig{aspect-ratio:auto;height:100%;min-height:clamp(15rem,26vw,22rem)}
  .bpost--lead .bpost__body{padding:clamp(1.6rem,3vw,2.75rem);justify-content:center;gap:.9rem}
  .bpost--lead .bpost__x{font-size:1.0625rem;line-height:1.55}
}

/* =========================================================================
   Blog — Artikelseite
   ========================================================================= */
.art{display:grid;gap:clamp(1.75rem,4vw,3.5rem);align-items:start}
@media (min-width:900px){.art{grid-template-columns:.3fr .7fr;column-gap:clamp(2.5rem,6vw,6rem)}}
.art__meta{display:grid;gap:.9rem;align-content:start}
@media (min-width:900px){.art__meta{position:sticky;top:clamp(6rem,12vh,8rem)}}
.art__meta .small{color:var(--fg-soft);max-width:26ch}
.art__body{display:grid;gap:clamp(1rem,2vw,1.5rem);max-width:64ch}
.art__lead{color:var(--fg);font-weight:400;letter-spacing:-.01em;
  padding-bottom:clamp(.75rem,1.6vw,1.15rem);border-bottom:1px solid var(--rule)}
.art__h{margin-top:clamp(.75rem,1.8vw,1.5rem)}
.art__q{margin:clamp(.75rem,1.8vw,1.5rem) 0;padding-left:clamp(1rem,2.4vw,1.75rem);
  border-left:2px solid var(--accent);display:grid;gap:.6rem}
.art__q p{font-size:clamp(1.125rem,1.6vw,1.4375rem);line-height:1.35;letter-spacing:-.012em;color:var(--fg)}
.art__q footer{font-family:var(--ff-mono);font-size:.6875rem;letter-spacing:.12em;
  text-transform:uppercase;color:var(--fg-soft)}
.art__fig{margin-block:clamp(.75rem,1.8vw,1.25rem)}
.art__fig img{width:100%;height:auto;border-radius:2px}

/* Blog-Kopfzone: Titel darf mehr Platz nehmen als anderswo */
body.th-blog .phead__txt .h-big{max-width:22ch}
body.th-blog .phead__fig{aspect-ratio:21/9}

/* =========================================================================
   Redaktionsbereich
   ========================================================================= */
.ed__lock{display:grid;place-items:center;min-height:44svh;padding-block:clamp(2rem,5vw,4rem)}
.ed__lockbox{max-width:44ch;display:grid;gap:1rem;padding:clamp(1.5rem,3vw,2.5rem);
  border:1px solid var(--rule);border-radius:2px;background:color-mix(in srgb,var(--fg) 3%,transparent)}
.ed__lockform{display:grid;gap:.5rem}
@media (min-width:480px){.ed__lockform{grid-template-columns:1fr auto;align-items:end;gap:.6rem}
  .ed__lockform label{grid-column:1 / -1}}
.ed__lockform label{font-family:var(--ff-mono);font-size:.6875rem;letter-spacing:.1em;
  text-transform:uppercase;color:var(--fg-soft)}
.ed__lockform input{font:inherit;font-size:1rem;padding:.8em 1em;min-height:48px;
  border:1px solid var(--rule);border-radius:2px;background:var(--bg);color:var(--fg);width:100%}
.ed__lockform input:focus-visible{border-color:var(--accent)}
.ed__lockmsg{font-family:var(--ff-mono);font-size:.75rem;color:#C4453B}
.ed__lockmsg:empty{display:none}
.ed__warn{font-size:.875rem;line-height:1.55;color:var(--fg-soft);
  border-left:2px solid #E0A500;padding-left:.9rem}

.ed{display:grid;gap:clamp(1.75rem,4vw,3rem)}
.ed__cols{display:grid;gap:clamp(1.5rem,3vw,2.5rem)}
@media (min-width:1000px){.ed__cols{grid-template-columns:1.05fr .95fr;align-items:start}}

.ed__form{display:grid;gap:clamp(1.25rem,2.5vw,2rem)}
.ed fieldset{border:1px solid var(--rule);border-radius:2px;padding:clamp(1.1rem,2.2vw,1.75rem);
  display:grid;gap:1rem;margin:0}
.ed legend{font-family:var(--ff-mono);font-size:.6875rem;letter-spacing:.12em;text-transform:uppercase;
  color:var(--accent);padding-inline:.5em}
.ed__row{display:grid;gap:1rem}
@media (min-width:560px){.ed__row{grid-template-columns:1.4fr .6fr}}
.ed__f{display:grid;gap:.35rem}
.ed__f label{font-family:var(--ff-mono);font-size:.6875rem;letter-spacing:.1em;
  text-transform:uppercase;color:var(--fg-soft)}
.ed input[type=text],.ed input[type=date],.ed select,.ed textarea{
  font:inherit;font-size:1rem;padding:.7em .9em;min-height:44px;
  border:1px solid var(--rule);border-radius:2px;background:var(--bg);color:var(--fg);width:100%}
.ed textarea{resize:vertical;min-height:4.5rem;line-height:1.55}
.ed input:focus-visible,.ed select:focus-visible,.ed textarea:focus-visible{border-color:var(--accent)}
.ed__hint{font-family:var(--ff-mono);font-size:.625rem;letter-spacing:.03em;color:var(--fg-soft);line-height:1.5}
.ed__sub{font-family:var(--ff-mono);font-size:.6875rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--fg-soft);margin-bottom:.5rem}

/* Textblöcke */
.ed__blocks{display:grid;gap:.75rem}
.ed__block{display:grid;gap:.45rem;padding:.85rem;border:1px solid var(--rule);border-radius:2px;
  background:color-mix(in srgb,var(--fg) 3%,transparent)}
.ed__bhead{display:flex;align-items:center;justify-content:space-between;gap:.75rem}
.ed__btag{font-family:var(--ff-mono);font-size:.625rem;letter-spacing:.12em;text-transform:uppercase;
  color:var(--accent)}
.ed__btools{display:flex;gap:.25rem}
.ed__btools button{width:32px;height:32px;border:1px solid var(--rule);border-radius:2px;
  font-size:.875rem;line-height:1;color:var(--fg-soft);transition:color var(--t-fast),border-color var(--t-fast)}
.ed__btools button:hover{color:var(--fg);border-color:var(--fg)}
.ed__bdel:hover{color:#C4453B!important;border-color:#C4453B!important}
.ed__add{display:flex;flex-wrap:wrap;gap:.4rem;margin-top:.25rem}
.ed__add button{font-family:var(--ff-mono);font-size:.625rem;letter-spacing:.1em;text-transform:uppercase;
  padding:.6em 1em;min-height:36px;border:1px solid var(--rule);border-radius:999px;color:var(--fg-soft);
  transition:color var(--t-fast),border-color var(--t-fast)}
.ed__add button:hover{color:var(--accent);border-color:var(--accent)}

.ed__actions{display:flex;flex-wrap:wrap;gap:.5rem;align-items:center}
.ed__msg{font-family:var(--ff-mono);font-size:.75rem;color:var(--accent)}
.ed__msg:empty{display:none}

/* Seitenspalte: Prüfung und Vorschau */
.ed__side{display:grid;gap:clamp(1.25rem,2.5vw,2rem);align-content:start}
@media (min-width:1000px){.ed__side{position:sticky;top:clamp(5.5rem,11vh,7.5rem)}}
.ed__check,.ed__preview{border:1px solid var(--rule);border-radius:2px;
  padding:clamp(1.1rem,2.2vw,1.6rem);display:grid;gap:.75rem}
.ed__checks{display:grid;gap:.45rem;font-size:.875rem;line-height:1.5}
.ed__checks li{position:relative;padding-left:1.5rem}
.ed__checks li::before{position:absolute;left:0;top:0;font-family:var(--ff-mono);font-size:.8125rem}
.ed__ok{color:var(--fg)}
.ed__ok::before{content:"✓";color:var(--mgg-green)}
.ed__bad{color:var(--fg-soft)}
.ed__bad::before{content:"!";color:#C4453B;font-weight:700}
.ed__soft{color:var(--fg-soft)}
.ed__soft::before{content:"·";color:#E0A500;font-weight:700}
.ed__prev{display:grid;gap:.8rem;max-height:52svh;overflow-y:auto;padding-right:.5rem}
.ed__prev .h-mid{font-size:clamp(1.25rem,1.8vw,1.6rem)}
.ed__figph{font-family:var(--ff-mono);font-size:.75rem;color:var(--fg-soft);
  padding:.9rem;border:1px dashed var(--rule);border-radius:2px;text-align:center}

/* Export */
.ed__export{display:grid;gap:.9rem;border-top:1px solid var(--rule);padding-top:clamp(1.25rem,2.5vw,2rem)}
.ed__code{margin:0;padding:clamp(1rem,2vw,1.5rem);border:1px solid var(--rule);border-radius:2px;
  background:var(--c-ink);color:#D7DEDC;overflow-x:auto;max-height:38svh}
.ed__code code{font-family:var(--ff-mono);font-size:.8125rem;line-height:1.6;white-space:pre;
  display:block;tab-size:2}

@media (max-width:520px){
  .ed__code code{font-size:.6875rem}
  .ed__add button{flex:1 1 auto;text-align:center;justify-content:center}
}
/* „Alle Beiträge" in der Artikel-Seitenspalte ist ein eigenständiges Ziel */
.art__meta .tlink{min-height:32px}