/* =========================================================
   ImageSizer, reDim GmbH
   ========================================================= */

:root{
  /* Markenfarben aus dem Logo. Sie bleiben in beiden Themes gleich und
     dienen Flaechen, Rahmen und Grafik. */
  --green:#85c03c;
  --blue:#679ed4;
  --yellow:#f9b431;
  --red:#e84032;

  /* Textvarianten der Markenfarben. Getrennt, weil eine Flaechenfarbe
     nicht automatisch als Schrift lesbar ist. Alle Werte sind gegen die
     dunkelste Flaeche des jeweiligen Themes auf 4.5:1 geprueft. */
  --green-t:#85c03c;
  --blue-t:#679ed4;
  --yellow-t:#f9b431;
  --red-t:#e94739;

  /* Flaechen */
  --bg:#0a0e14;
  --bg-2:#0e141d;
  --bg-3:#121a25;
  --line:rgba(255,255,255,.09);
  --line-2:rgba(255,255,255,.16);

  /* Aufgesetzte Flaechen und Schatten */
  --surface:rgba(255,255,255,.03);
  --surface-2:rgba(255,255,255,.06);
  --shadow:rgba(0,0,0,.7);
  --shadow-soft:rgba(0,0,0,.5);

  /* Text */
  --fg:#eef2f7;
  --fg-2:#a6b2c2;
  --fg-3:#758395;

  /* Bausteine */
  --header-bg:rgba(10,14,20,.82);
  --chip-bg:rgba(10,14,20,.85);
  --code-bg:rgba(103,158,212,.14);
  --code-fg:#9cc4ea;
  --pre-bg:#0b1119;
  --pre-fg:#b9cde2;
  --photo-bg:#10161f;
  --btn-fg:#0a0e14;
  --orb-o:.3;
  --orb-o-soft:.18;
  --checker:rgba(255,255,255,.028);

  --shell:1200px;
  --r:18px;
  --r-lg:26px;
  --ease:cubic-bezier(.22,.9,.28,1);
  --font:"Outfit",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
}

/* Helles Theme. Gilt, wenn das System es vorgibt und der Besucher nichts
   anderes gewaehlt hat, oder wenn er es ausdruecklich waehlt. */
@media (prefers-color-scheme: light){
  :root:not([data-theme="dark"]){
    --green-t:#547926;
    --blue-t:#3271b0;
    --yellow-t:#976404;
    --red-t:#d52618;

    --bg:#fbfcfd;
    --bg-2:#eef2f7;
    --bg-3:#ffffff;
    --line:rgba(16,22,31,.12);
    --line-2:rgba(16,22,31,.2);

    --surface:rgba(16,22,31,.035);
    --surface-2:rgba(16,22,31,.07);
    --shadow:rgba(22,32,48,.16);
    --shadow-soft:rgba(22,32,48,.1);

    --fg:#10161f;
    --fg-2:#4a5567;
    --fg-3:#5c6878;

    --header-bg:rgba(251,252,253,.85);
    --chip-bg:rgba(255,255,255,.9);
    --code-bg:rgba(50,113,176,.12);
    --code-fg:#2a5f95;
    --pre-bg:#0f1720;
    --pre-fg:#cfe0f0;
    --photo-bg:#e6ebf2;
    --btn-fg:#0a0e14;
    --orb-o:.1;
    --orb-o-soft:.06;
    --checker:rgba(16,22,31,.04);
  }
}

:root[data-theme="light"]{
  --green-t:#547926;
  --blue-t:#3271b0;
  --yellow-t:#976404;
  --red-t:#d52618;

  --bg:#fbfcfd;
  --bg-2:#eef2f7;
  --bg-3:#ffffff;
  --line:rgba(16,22,31,.12);
  --line-2:rgba(16,22,31,.2);

  --surface:rgba(16,22,31,.035);
  --surface-2:rgba(16,22,31,.07);
  --shadow:rgba(22,32,48,.16);
  --shadow-soft:rgba(22,32,48,.1);

  --fg:#10161f;
  --fg-2:#4a5567;
  --fg-3:#5c6878;

  --header-bg:rgba(251,252,253,.85);
  --chip-bg:rgba(255,255,255,.9);
  --code-bg:rgba(50,113,176,.12);
  --code-fg:#2a5f95;
  --pre-bg:#0f1720;
  --pre-fg:#cfe0f0;
  --photo-bg:#e6ebf2;
  --btn-fg:#0a0e14;
  --orb-o:.1;
  --orb-o-soft:.06;
  --checker:rgba(16,22,31,.04);
}

*,*::before,*::after{box-sizing:border-box}

/* Das hidden-Attribut muss jede Anzeigeart schlagen. Ohne diese Regel setzt
   eine spaetere Klasse wie .saving{display:flex} es ausser Kraft, und das
   Element steht sichtbar da, obwohl es versteckt sein soll. */
[hidden]{display:none !important}

html{scroll-behavior:smooth;scroll-padding-top:90px;-webkit-text-size-adjust:100%}

body{
  margin:0;
  font-family:var(--font);
  font-weight:300;
  color:var(--fg);
  background:var(--bg);
  line-height:1.65;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}

img{max-width:100%;height:auto;display:block}
a{color:inherit}
code{
  font-family:ui-monospace,"SFMono-Regular",Menlo,Consolas,monospace;
  font-size:.88em;
  padding:.12em .42em;
  border-radius:6px;
  background:var(--code-bg);
  color:var(--code-fg);
  font-weight:400;
}
.shell{width:min(100% - 2.5rem,var(--shell));margin-inline:auto}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* ---------- Typo ---------- */
h1,h2,h3{font-weight:200;line-height:1.1;letter-spacing:-.025em;margin:0}
h1{font-size:clamp(2.4rem,5.6vw,4.2rem)}
h2{font-size:clamp(2rem,4.4vw,3.35rem)}
h3{font-size:1.2rem;font-weight:500;letter-spacing:-.01em;line-height:1.3}
p{margin:0}

.kicker{
  display:inline-flex;align-items:center;gap:.6rem;
  font-size:.74rem;font-weight:600;letter-spacing:.2em;text-transform:uppercase;
  color:var(--fg-3);margin-bottom:1.1rem;
}
.kicker::before{content:"";width:28px;height:1px;background:linear-gradient(90deg,var(--green),transparent)}

.sec-head{max-width:760px;margin-bottom:clamp(3rem,6vw,4.5rem)}
.sec-sub{margin-top:1.4rem;color:var(--fg-2);font-size:1.08rem;max-width:62ch}

/* ---------- Scroll-Fortschritt ---------- */
.progress{position:fixed;inset:0 0 auto 0;height:2px;z-index:120;pointer-events:none}
.progress span{
  display:block;height:100%;width:0%;
  background:linear-gradient(90deg,var(--green),var(--yellow),var(--red),var(--blue));
  transition:width .1s linear;
}

/* ---------- Header ---------- */
.site-header{
  position:fixed;inset:0 0 auto 0;z-index:100;
  padding:1.1rem 0;
  transition:background .4s var(--ease),padding .4s var(--ease),border-color .4s var(--ease);
  border-bottom:1px solid transparent;
}
.site-header.stuck{
  background:var(--header-bg);
  backdrop-filter:blur(18px);
  -webkit-backdrop-filter:blur(18px);
  border-bottom-color:var(--line);
  padding:.7rem 0;
}
.header-inner{display:flex;align-items:center;justify-content:space-between;gap:2rem}

.brand{display:flex;align-items:center;gap:.85rem;text-decoration:none;flex-shrink:0}
.brand img{width:150px;filter:brightness(0) invert(1);opacity:.94;transition:opacity .3s}
.brand:hover img{opacity:1}

/* animierte Crop-Marken im Logo */
.brand-marks{position:relative;width:24px;height:24px;flex-shrink:0}
.brand-marks i{position:absolute;width:9px;height:9px;border:2px solid;border-radius:1px}
.brand-marks i:nth-child(1){top:0;left:0;border-width:2px 0 0 2px;border-color:var(--green);animation:mk 4s var(--ease) infinite}
.brand-marks i:nth-child(2){top:0;right:0;border-width:2px 2px 0 0;border-color:var(--yellow);animation:mk 4s var(--ease) infinite .15s}
.brand-marks i:nth-child(3){bottom:0;left:0;border-width:0 0 2px 2px;border-color:var(--blue);animation:mk 4s var(--ease) infinite .3s}
.brand-marks i:nth-child(4){bottom:0;right:0;border-width:0 2px 2px 0;border-color:var(--red);animation:mk 4s var(--ease) infinite .45s}
@keyframes mk{0%,70%,100%{transform:translate(0,0)}35%{transform:translate(var(--x,0),var(--y,0))}}
.brand-marks i:nth-child(1){--x:-3px;--y:-3px}
.brand-marks i:nth-child(2){--x:3px;--y:-3px}
.brand-marks i:nth-child(3){--x:-3px;--y:3px}
.brand-marks i:nth-child(4){--x:3px;--y:3px}

.nav{display:flex;align-items:center;gap:2.1rem}
.nav a{
  position:relative;text-decoration:none;font-size:.94rem;font-weight:400;
  color:var(--fg-2);transition:color .25s;
}
.nav a:not(.nav-cta)::after{
  content:"";position:absolute;left:0;bottom:-5px;height:1px;width:0;
  background:var(--green);transition:width .3s var(--ease);
}
.nav a:not(.nav-cta):hover{color:var(--fg)}
.nav a:not(.nav-cta):hover::after{width:100%}
/* Die gerade geoeffnete Seite ist auch sichtbar markiert, nicht nur fuer
   Vorleseprogramme ueber aria-current. */
.nav a[aria-current="page"]{color:var(--fg)}
.nav a[aria-current="page"]::after{width:100%}
.nav-cta{
  padding:.52rem 1.15rem;border:1px solid var(--line-2);border-radius:100px;
  color:var(--fg);transition:background .3s,border-color .3s,transform .3s;
}
.nav-cta:hover{background:var(--green);border-color:var(--green);color:var(--btn-fg);font-weight:500;transform:translateY(-2px)}

.burger{display:none;width:42px;height:42px;background:none;border:0;cursor:pointer;padding:9px;position:relative}
.burger span{display:block;height:2px;background:var(--fg);margin:4px 0;border-radius:2px;transition:transform .35s var(--ease),opacity .25s}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(6px) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}

/* =========================================================
   HERO
   ========================================================= */
.hero{position:relative;padding:clamp(7.5rem,12vw,9.5rem) 0 0;overflow:hidden}

.hero-bg{position:absolute;inset:0;z-index:0;pointer-events:none}
.orb{position:absolute;border-radius:50%;filter:blur(90px);opacity:var(--orb-o)}
.orb-g{width:44vw;height:44vw;background:var(--green);top:-12%;left:-10%;animation:float 19s ease-in-out infinite}
.orb-b{width:38vw;height:38vw;background:var(--blue);top:8%;right:-8%;animation:float 23s ease-in-out infinite reverse}
.orb-y{width:26vw;height:26vw;background:var(--yellow);bottom:-6%;left:26%;opacity:var(--orb-o-soft);animation:float 27s ease-in-out infinite}
.orb-r{width:22vw;height:22vw;background:var(--red);top:44%;right:22%;opacity:var(--orb-o-soft);animation:float 21s ease-in-out infinite reverse}
@keyframes float{
  0%,100%{transform:translate(0,0) scale(1)}
  33%{transform:translate(4vw,-3vw) scale(1.1)}
  66%{transform:translate(-3vw,3vw) scale(.94)}
}
.grid{
  position:absolute;inset:0;
  background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px);
  background-size:64px 64px;
  mask-image:radial-gradient(ellipse 80% 60% at 50% 35%,#000,transparent 75%);
  -webkit-mask-image:radial-gradient(ellipse 80% 60% at 50% 35%,#000,transparent 75%);
  opacity:.5;
}

.hero-inner{position:relative;z-index:1;text-align:center}
h1{margin-inline:auto;max-width:17ch}

h1 em{
  display:block;font-style:normal;font-weight:600;
  background:linear-gradient(100deg,var(--green-t) 0%,var(--yellow-t) 38%,var(--red-t) 68%,var(--blue-t) 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  background-size:220% auto;animation:shift 9s linear infinite;
  /* Bei background-clip:text endet die Farbflaeche an der Elementkante.
     Mit line-height 1.1 ragt die Unterlaenge des g darunter hinaus und wird
     abgeschnitten. Die Polsterung verlaengert den Kasten, die negative
     Aussenkante haelt den Abstand zur naechsten Zeile. */
  padding-bottom:.18em;margin-bottom:-.1em;
}
@keyframes shift{to{background-position:220% center}}

.lead{
  margin:1.9rem auto 0;font-size:clamp(1.02rem,1.55vw,1.2rem);
  color:var(--fg-2);max-width:56ch;
}

.hero-cta{display:flex;flex-wrap:wrap;gap:.9rem;margin-top:2.6rem;justify-content:center}

.btn{
  display:inline-flex;align-items:center;gap:.6rem;
  padding:.92rem 1.75rem;border-radius:100px;
  font-size:.97rem;font-weight:500;text-decoration:none;
  border:1px solid transparent;cursor:pointer;
  transition:transform .3s var(--ease),box-shadow .3s var(--ease),background .3s,border-color .3s;
}
.btn svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round;transition:transform .3s var(--ease)}
.btn:hover svg{transform:translateX(4px)}
.btn-primary{background:var(--green);color:var(--btn-fg);font-weight:600}
.btn-primary:hover{transform:translateY(-3px);box-shadow:0 14px 34px -10px rgba(133,192,60,.55)}
.btn-ghost{border-color:var(--line-2);color:var(--fg);background:var(--surface)}
.btn-ghost:hover{border-color:var(--fg-2);background:var(--surface-2);transform:translateY(-3px)}

/* ---------- Pipeline ---------- */
.pipe{
  position:relative;margin:3.6rem auto 0;width:min(100%,940px);
  display:grid;grid-template-columns:repeat(5,1fr);align-items:start;
}
/* die Leitung */
.pipe::before{
  content:"";position:absolute;top:44px;left:9%;right:9%;height:2px;border-radius:2px;
  background:linear-gradient(90deg,var(--fg-3),var(--green),var(--yellow),var(--red),var(--blue));
  opacity:.28;
}
/* der wandernde Lichtpunkt */
.pipe::after{
  content:"";position:absolute;top:39px;left:9%;width:12px;height:12px;border-radius:50%;
  animation:travel 7s linear infinite;
}
@keyframes travel{
  0%{left:9%;background:var(--fg-3);box-shadow:0 0 16px 4px rgba(111,125,144,.7)}
  25%{background:var(--green);box-shadow:0 0 16px 4px rgba(133,192,60,.8)}
  50%{background:var(--yellow);box-shadow:0 0 16px 4px rgba(249,180,49,.8)}
  75%{background:var(--red);box-shadow:0 0 16px 4px rgba(232,64,50,.8)}
  100%{left:calc(91% - 12px);background:var(--blue);box-shadow:0 0 16px 4px rgba(103,158,212,.8)}
}

.stage{position:relative;display:flex;flex-direction:column;align-items:center;gap:.9rem;padding:0 .4rem}
.stage:nth-child(1){--acc:var(--fg-3)}
.stage:nth-child(2){--acc:var(--green-t)}
.stage:nth-child(3){--acc:var(--yellow-t)}
.stage:nth-child(4){--acc:var(--red-t)}
.stage:nth-child(5){--acc:var(--blue-t)}

.stage .node{
  width:88px;height:88px;border-radius:22px;display:grid;place-items:center;
  border:1px solid var(--line-2);background:var(--bg-3);position:relative;z-index:1;
  transition:transform .4s var(--ease);
  animation:lightup 7s linear infinite;
}
.stage:nth-child(1) .node{animation-delay:0s}
.stage:nth-child(2) .node{animation-delay:1.4s}
.stage:nth-child(3) .node{animation-delay:2.8s}
.stage:nth-child(4) .node{animation-delay:4.2s}
.stage:nth-child(5) .node{animation-delay:5.6s}
.stage:hover .node{transform:translateY(-5px)}
@keyframes lightup{
  0%,12%{border-color:var(--acc);box-shadow:0 0 0 4px color-mix(in srgb,var(--acc) 16%,transparent)}
  22%,100%{border-color:var(--line-2);box-shadow:none}
}

.stage .node svg{
  width:30px;height:30px;fill:none;stroke:var(--acc);
  stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;
}
.stage .mini{
  display:block;width:44px;height:30px;border-radius:6px;
  position:relative;overflow:hidden;border:1px solid var(--line-2);
}
.stage .shot{
  position:absolute;inset:0;
  background:
    radial-gradient(ellipse 60% 70% at 18% 22%,rgba(133,192,60,.62),transparent 62%),
    radial-gradient(ellipse 55% 65% at 82% 28%,rgba(249,180,49,.55),transparent 60%),
    radial-gradient(ellipse 70% 60% at 72% 84%,rgba(232,64,50,.48),transparent 62%),
    radial-gradient(ellipse 65% 70% at 24% 82%,rgba(103,158,212,.58),transparent 62%),
    var(--photo-bg);
}

.stage h2{font-size:.98rem;font-weight:500;letter-spacing:-.01em;line-height:1.3}
.stage p{font-size:.78rem;color:var(--fg-3);line-height:1.5;max-width:15ch}
.stage .chip{
  font-size:.68rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  padding:.2rem .5rem;border-radius:5px;
  background:var(--surface-2);color:var(--acc);
  border:1px solid color-mix(in srgb,var(--acc) 35%,transparent);
}

/* ---------- Eckdaten ---------- */
.stats{
  position:relative;z-index:2;list-style:none;
  margin:clamp(4rem,8vw,6.5rem) auto clamp(3rem,6vw,5rem);
  display:grid;grid-template-columns:repeat(4,1fr);
  padding:clamp(2.1rem,3.4vw,2.8rem) 0;
  border:1px solid var(--line);border-radius:var(--r-lg);
  background:
    radial-gradient(ellipse 60% 140% at 50% 0%,var(--surface-2),transparent 70%),
    linear-gradient(170deg,var(--bg-3),var(--bg-2));
  box-shadow:0 30px 70px -34px var(--shadow);
  overflow:hidden;
}
/* feine Lichtkante oben */
.stats::before{
  content:"";position:absolute;inset:0 0 auto 0;height:1px;
  background:linear-gradient(90deg,transparent,var(--green),var(--yellow),var(--red),var(--blue),transparent);
  opacity:.5;
}

.stats li{
  position:relative;display:flex;flex-direction:column;align-items:center;
  gap:.75rem;padding:.4rem clamp(.7rem,2vw,1.5rem);text-align:center;
}
.stats li:nth-child(1){--acc:var(--green-t)}
.stats li:nth-child(2){--acc:var(--yellow-t)}
.stats li:nth-child(3){--acc:var(--blue-t)}
.stats li:nth-child(4){--acc:var(--red-t)}

/* Trenner, der an den Enden ausblendet statt hart durchzulaufen */
.stats li + li::before{
  content:"";position:absolute;left:0;top:10%;bottom:10%;width:1px;
  background:linear-gradient(180deg,transparent,var(--line-2),transparent);
}

.stat-ico{
  width:36px;height:36px;border-radius:11px;display:grid;place-items:center;
  border:1px solid color-mix(in srgb,var(--acc) 32%,transparent);
  background:color-mix(in srgb,var(--acc) 9%,transparent);
  transition:transform .4s var(--ease),box-shadow .4s var(--ease);
}
.stat-ico svg{
  width:18px;height:18px;fill:none;stroke:var(--acc);
  stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;
}
.stats li:hover .stat-ico{
  transform:translateY(-3px);
  box-shadow:0 0 0 5px color-mix(in srgb,var(--acc) 12%,transparent);
}

.stats b{
  font-size:clamp(1.9rem,3.2vw,2.5rem);font-weight:200;
  letter-spacing:-.035em;line-height:1;color:var(--acc);
  font-variant-numeric:tabular-nums;
}
.stat-label{
  font-size:.92rem;line-height:1.4;color:var(--fg-2);max-width:22ch;
}

/* =========================================================
   WARUM
   ========================================================= */
.why{padding:clamp(5.5rem,11vw,9rem) 0;background:var(--bg-2)}

.why-split{
  display:grid;grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);
  gap:clamp(2.5rem,6vw,5rem);align-items:center;
}

/* ---------- Schaubild ---------- */
.waste{margin:0}
.waste-frame{
  position:relative;aspect-ratio:4/3;border-radius:var(--r);
  border:1px dashed rgba(232,64,50,.45);
  background:
    repeating-linear-gradient(135deg,
      rgba(232,64,50,.08) 0 10px, transparent 10px 20px),
    var(--bg-3);
  display:grid;place-items:center;
}
/* Beschriftung der Uploadbreite, oben quer */
.waste-w{
  position:absolute;top:.85rem;left:50%;transform:translateX(-50%);
  font-size:.74rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--red-t);white-space:nowrap;
}
.waste-w::before,.waste-w::after{
  content:"";position:absolute;top:50%;width:26px;height:1px;background:rgba(232,64,50,.5);
}
.waste-w::before{right:calc(100% + .5rem)}
.waste-w::after{left:calc(100% + .5rem)}

/* der tatsaechlich benoetigte Ausschnitt: 600 von 4000 sind 15 Prozent */
/* Der tatsaechlich benoetigte Ausschnitt: 600 von 4000 sind 15 Prozent.
   Er faengt in voller Groesse an und schrumpft darauf zusammen. Damit fuehrt
   das Schaubild seine Aussage vor, statt sie nur zu bebildern. */
.waste-need{
  position:relative;width:15%;aspect-ratio:4/3;
  border-radius:4px;overflow:hidden;
  border:1px solid var(--green);
  box-shadow:0 0 0 4px color-mix(in srgb,var(--green) 18%,transparent),
             0 8px 22px -8px var(--shadow);
  animation:schrumpfen 9s var(--ease) infinite;
}
@keyframes schrumpfen{
  0%,12%  {width:100%;border-radius:12px}
  46%     {width:15%; border-radius:4px}
  88%     {width:15%; border-radius:4px}
  96%,100%{width:100%;border-radius:12px}
}

/* Die Schraffur wandert langsam, damit die verschwendete Flaeche als solche
   auffaellt und nicht wie ein Hintergrundmuster wirkt. */
.waste-frame{animation:schraffurWandert 26s linear infinite}
@keyframes schraffurWandert{to{background-position:56px 0,0 0}}
.waste-need .shot{
  position:absolute;inset:0;
  background:
    radial-gradient(ellipse 60% 70% at 18% 22%,rgba(133,192,60,.75),transparent 62%),
    radial-gradient(ellipse 55% 65% at 82% 28%,rgba(249,180,49,.65),transparent 60%),
    radial-gradient(ellipse 70% 60% at 72% 84%,rgba(232,64,50,.6),transparent 62%),
    radial-gradient(ellipse 65% 70% at 24% 82%,rgba(103,158,212,.7),transparent 62%),
    var(--photo-bg);
}
.waste-need-label{
  position:absolute;top:50%;left:calc(50% + 9%);transform:translateY(-50%);
  margin-left:1.5rem;padding-left:1.5rem;
  font-size:.78rem;line-height:1.35;color:var(--green-t);font-weight:500;
  /* Erscheint erst, wenn der Ausschnitt seine Endgroesse hat. Sonst zeigt
     der Verbindungsstrich waehrend des Schrumpfens ins Leere. */
  opacity:0;animation:labelDa 9s var(--ease) infinite;
}
@keyframes labelDa{0%,44%{opacity:0}52%,88%{opacity:1}94%,100%{opacity:0}}
.waste-need-label::before{
  content:"";position:absolute;left:0;top:50%;width:1.1rem;height:1px;
  background:var(--green);
}
.waste figcaption{
  margin-top:1.4rem;font-size:.9rem;line-height:1.7;color:var(--fg-3);
}
.waste figcaption b{color:var(--fg-2);font-weight:500}

/* ---------- Symptomliste ---------- */
.symptoms{list-style:none;margin:0;padding:0}
.symptoms li{
  display:grid;grid-template-columns:auto minmax(0,1fr);gap:1.4rem;
  padding:1.5rem 0;border-top:1px solid var(--line);
}
.symptoms li:first-child{border-top:0;padding-top:0}
.symptoms li:last-child{padding-bottom:0}
.sym-n{
  font-size:.82rem;font-weight:600;letter-spacing:.1em;
  padding-top:.28rem;
}
.symptoms li:nth-child(1) .sym-n{color:var(--red-t)}
.symptoms li:nth-child(2) .sym-n{color:var(--yellow-t)}
.symptoms li:nth-child(3) .sym-n{color:var(--blue-t)}
.symptoms h3{margin-bottom:.5rem}
.symptoms p{color:var(--fg-2);font-size:.97rem;line-height:1.7}

/* Schlussfolgerung der Sektion. Bewusst mittig und ohne Kasten, damit sie
   als Wendepunkt gelesen wird und nicht als vierter Aufzaehlungspunkt. */
.verdict{
  margin-top:clamp(3.5rem,7vw,5.5rem);
  padding-top:clamp(2.5rem,5vw,3.5rem);
  border-top:1px solid var(--line);
  text-align:center;
}
/* Kein pauschales .verdict p{margin:0}: Diese Regel hat hoehere
   Spezifitaet als die Klassen darunter und wuerde deren Abstaende
   ueberschreiben. Die Abstaende stehen deshalb je Klasse. */
.verdict-a{
  margin:0 0 1.1rem;
  font-size:.86rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--fg-3);
}
.verdict-b{
  font-size:clamp(1.5rem,3.2vw,2.35rem);font-weight:200;
  line-height:1.2;letter-spacing:-.02em;color:var(--fg);
  max-width:42ch;margin:0 auto;
}
.verdict-c{
  margin:2rem 0 0;font-size:1.02rem;color:var(--fg-2);
}
.verdict-c::before{
  content:"";display:block;width:34px;height:2px;border-radius:2px;
  margin:0 auto 1.4rem;
  background:linear-gradient(90deg,var(--green),var(--blue));
}

/* =========================================================
   FUNKTIONEN
   ========================================================= */
.features{padding:clamp(5.5rem,11vw,9rem) 0;position:relative}

/* Zwei Spalten mit Zeilen statt acht Karten. Die Sektion davor arbeitet schon
   mit Schaubild und Liste, danach folgt die Demo als grosser Block: Kaesten
   dazwischen wuerden die Seite zumauern. */
.feat-list{
  position:relative;
  list-style:none;margin:0;padding:0;
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  column-gap:clamp(2rem,5vw,4rem);
}
/* Senkrechte Trennlinie in der Mitte, damit die beiden Spalten als zwei
   Listen gelesen werden und nicht als durchlaufender Textblock. */
.feat-list::before{
  content:"";position:absolute;top:.5rem;bottom:.5rem;left:50%;width:1px;
  background:linear-gradient(180deg,transparent,var(--line) 8%,var(--line) 92%,transparent);
}

.feat-list li{
  --acc:var(--fg-3); --acc-t:var(--fg-3);
  position:relative;
  display:grid;grid-template-columns:auto minmax(0,1fr);gap:1.25rem;
  padding:1.6rem 1rem 1.6rem 1.1rem;
  border-top:1px solid var(--line);border-radius:12px;
  transition:background .3s var(--ease);
}
.feat-list li:nth-child(1),.feat-list li:nth-child(2){border-top:0}
.feat-list li[data-accent="g"]{--acc:var(--green);--acc-t:var(--green-t)}
.feat-list li[data-accent="b"]{--acc:var(--blue);--acc-t:var(--blue-t)}
.feat-list li[data-accent="y"]{--acc:var(--yellow);--acc-t:var(--yellow-t)}
.feat-list li[data-accent="r"]{--acc:var(--red);--acc-t:var(--red-t)}

/* Akzentbalken, der beim Ueberfahren aus der Mitte aufklappt */
.feat-list li::after{
  content:"";position:absolute;left:0;top:14%;bottom:14%;width:2px;border-radius:2px;
  background:var(--acc);transform:scaleY(0);
  transition:transform .4s var(--ease);
}
.feat-list li:hover{background:var(--surface)}
.feat-list li:hover::after{transform:scaleY(1)}

.feat-ico{
  width:46px;height:46px;border-radius:13px;display:grid;place-items:center;
  background:color-mix(in srgb,var(--acc) 12%,transparent);
  border:1px solid color-mix(in srgb,var(--acc) 30%,transparent);
  /* Bewusst keine Drehung: Eine Rotation zwingt den Browser, das Icon als
     Bitmap zu rastern und schraeg neu abzutasten. Bei duennen SVG-Strichen
     sieht man das als Verpixelung. */
  transition:background .35s var(--ease),border-color .35s var(--ease);
}
.feat-list li:hover .feat-ico{
  background:color-mix(in srgb,var(--acc) 22%,transparent);
  border-color:color-mix(in srgb,var(--acc) 50%,transparent);
}
.feat-ico svg{
  width:22px;height:22px;fill:none;stroke:var(--acc-t);
  stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;
}

.feat-list h3{margin:.25rem 0 .5rem;font-size:1.12rem;font-weight:500}
.feat-list p{color:var(--fg-2);font-size:.95rem;line-height:1.7}

/* Die Schlagwoerter mit farbigen Trennpunkten, damit sie als Angabe erkennbar
   sind und nicht wie uebrig gebliebener Text wirken. */
.feat-tags{
  display:flex;flex-wrap:wrap;align-items:center;gap:.2rem .5rem;
  margin-top:.85rem;font-size:.78rem;color:var(--fg-3);
}
.feat-tags span{display:inline-flex;align-items:center;gap:.5rem;white-space:nowrap}
.feat-tags span + span::before{
  content:"";width:3px;height:3px;border-radius:50%;
  background:var(--acc);flex-shrink:0;
}

/* =========================================================
   LIVE-DEMO
   ========================================================= */
.demo{padding:clamp(5.5rem,11vw,9rem) 0;background:var(--bg-2)}
.demo-box{
  display:grid;grid-template-columns:1.2fr .8fr;gap:0;
  border:1px solid var(--line);border-radius:var(--r-lg);
  background:var(--bg-3);overflow:hidden;
}

/* ---------- Ablageflaeche mit Browserfenster ---------- */
.demo-stage{
  position:relative;padding:1.8rem;cursor:pointer;
  border-right:1px solid var(--line);
  display:flex;flex-direction:column;justify-content:center;gap:.9rem;
  /* Bewusst unveraenderlich: Frueher verschwand hier beim Hochladen das
     Karomuster, wodurch der ganze Hintergrund hinter dem Fenster sprang. */
  background:
    radial-gradient(ellipse 80% 70% at 50% 40%,color-mix(in srgb,var(--green) 7%,transparent),transparent 72%),
    linear-gradient(var(--line) 1px,transparent 1px) 0 0/34px 34px,
    linear-gradient(90deg,var(--line) 1px,transparent 1px) 0 0/34px 34px,
    var(--bg-2);
  transition:background-color .3s;
}
.demo-stage:focus-visible{outline:2px solid var(--green);outline-offset:-4px}
.demo-stage.over{background-color:color-mix(in srgb,var(--green) 9%,transparent)}

/* ---------- das Browserfenster ---------- */
.browser{
  border:1px solid var(--line-2);border-radius:14px;overflow:hidden;
  background:var(--bg-3);box-shadow:0 26px 60px -26px var(--shadow);
  transition:border-color .3s;
}
.demo-stage.over .browser{border-color:var(--green)}
.browser-kopf{
  display:flex;align-items:center;gap:.9rem;padding:.7rem .9rem;
  border-bottom:1px solid var(--line);background:var(--bg-2);
}
.ampel{display:flex;gap:.35rem;flex-shrink:0}
.ampel i{width:10px;height:10px;border-radius:50%;background:var(--line-2)}
.browser-url{
  flex:1;min-width:0;font-size:.74rem;color:var(--fg-3);
  padding:.3rem .8rem;border-radius:100px;
  background:var(--surface);border:1px solid var(--line);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.browser-neu{
  display:inline-flex;align-items:center;gap:.45rem;flex-shrink:0;
  font:inherit;font-size:.74rem;font-weight:500;cursor:pointer;
  padding:.34rem .7rem;border-radius:100px;
  border:1px solid color-mix(in srgb,var(--green) 34%,transparent);
  background:color-mix(in srgb,var(--green) 10%,transparent);
  color:var(--green-t);
  transition:background .25s,border-color .25s,transform .25s var(--ease);
}
.browser-neu:hover{
  background:color-mix(in srgb,var(--green) 20%,transparent);
  border-color:var(--green);transform:translateY(-1px);
}
.browser-neu:focus-visible{outline:2px solid var(--green);outline-offset:2px}
.browser-neu svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
/* Solange nichts geladen ist, waere der Knopf doppelt: Die ganze Flaeche
   nimmt den Klick ja schon entgegen. */
.demo-stage:not(.geladen) .browser-neu{display:none}

.browser-inhalt{padding:1.1rem;display:grid;place-items:center;min-height:300px}

.demo-preview{width:100%;display:grid;place-items:center}

/* ---------- Vorher/Nachher im Fenster ---------- */
.vgl{
  position:relative;display:none;border-radius:8px;overflow:hidden;
  cursor:ew-resize;user-select:none;touch-action:none;
  box-shadow:0 10px 30px -14px var(--shadow);
  /* Nie breiter als die echte Pixelbreite des Bildes. Sonst rechnet der
     Browser hoch und das Ergebnis sieht pixelig aus, obwohl es das nicht ist.
     Den Wert setzt das Skript bei jedem Neuberechnen. */
  width:min(100%,var(--bildbreite,100%));
  margin-inline:auto;
}
.demo-preview.has-img .vgl{display:block}
.demo-preview.has-img .demo-empty{display:none}

.vgl-seite{position:absolute;inset:0}
/* Die Nachher-Seite gibt die Groesse vor, deshalb laeuft sie im Fluss mit */
.vgl-nachher{position:relative}
.vgl-seite canvas{display:block;width:100%;height:auto}
/* Die Vorher-Seite wird per clip-path freigelegt, den Anteil setzt das Skript */
.vgl-vorher{clip-path:inset(0 var(--schnitt,50%) 0 0)}

.vgl-schild{
  position:absolute;bottom:.7rem;z-index:2;
  padding:.5rem .75rem;border-radius:11px;
  background:var(--chip-bg);border:1px solid var(--line-2);
  backdrop-filter:blur(10px);font-size:.72rem;line-height:1.35;
}
.vgl-schild b{display:block;font-size:1rem;font-weight:600;margin-bottom:.05rem}
.vgl-schild small{color:var(--fg-3);white-space:nowrap}
.vgl-schild.l{left:.7rem;border-color:color-mix(in srgb,var(--red) 48%,transparent)}
.vgl-schild.l b{color:var(--red-t)}
.vgl-schild.r{right:.7rem;text-align:right;border-color:color-mix(in srgb,var(--green) 48%,transparent)}
.vgl-schild.r b{color:var(--green-t)}

.vgl-griff{
  position:absolute;top:0;bottom:0;left:50%;width:2px;z-index:3;pointer-events:none;
  background:linear-gradient(180deg,transparent,#fff 10%,#fff 90%,transparent);
  transform:translateX(-1px);
}
.vgl-griff::after{
  content:"";position:absolute;top:50%;left:50%;width:38px;height:38px;
  transform:translate(-50%,-50%);border-radius:50%;background:#fff;
  box-shadow:0 6px 18px rgba(0,0,0,.45);
}
.vgl-griff::before{
  content:"";position:absolute;top:50%;left:50%;z-index:1;
  width:14px;height:9px;transform:translate(-50%,-50%);background:#0a0e14;
  clip-path:polygon(0 50%,38% 0,38% 100%,100% 50%,62% 0,62% 100%);
}

.vgl-hinweis{
  text-align:center;font-size:.78rem;color:var(--fg-3);margin:0;
}

/* ---------- Ruhezustand ---------- */
.demo-empty{text-align:center;color:var(--fg-3);pointer-events:none;padding:2.2rem 1rem}
.empty-ico{
  display:grid;place-items:center;width:70px;height:70px;margin:0 auto 1.3rem;
  border-radius:21px;
  background:color-mix(in srgb,var(--green) 12%,transparent);
  border:1px solid color-mix(in srgb,var(--green) 30%,transparent);
  animation:bob 3.5s ease-in-out infinite;
}
.empty-ico svg{
  width:30px;height:30px;fill:none;stroke:var(--green-t);
  stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;
}
.demo-empty b{display:block;color:var(--fg);font-weight:500;font-size:1.08rem;margin-bottom:.3rem}
.demo-empty p{font-size:.92rem;margin:0}
.empty-hint{
  display:inline-block;margin-top:1.2rem;padding:.24rem .8rem;border-radius:100px;
  font-size:.72rem;letter-spacing:.05em;
  background:var(--surface);border:1px solid var(--line);color:var(--fg-3);
}

/* ---------- Bedienfeld ---------- */
.demo-panel{padding:2rem 1.9rem;display:flex;flex-direction:column;gap:1.5rem}

.ctrl label{
  display:flex;justify-content:space-between;align-items:baseline;gap:1rem;
  font-size:.86rem;color:var(--fg-3);margin-bottom:.7rem;
}
.ctrl output{font-size:1.02rem;font-weight:500;color:var(--green-t);font-variant-numeric:tabular-nums}
.ctrl:nth-of-type(2) output{color:var(--blue-t)}

/* Die Spur wird bis zum eingestellten Wert eingefaerbt. Den Anteil setzt das
   Skript als --fuellung, weil CSS den Reglerwert nicht selbst kennt. */
input[type=range]{
  -webkit-appearance:none;appearance:none;width:100%;height:6px;border-radius:6px;
  outline:none;cursor:pointer;
  background:linear-gradient(90deg,var(--green-t) 0 var(--fuellung,50%),var(--line-2) var(--fuellung,50%) 100%);
}
.ctrl:nth-of-type(2) input[type=range]{
  background:linear-gradient(90deg,var(--blue-t) 0 var(--fuellung,50%),var(--line-2) var(--fuellung,50%) 100%);
}
input[type=range]::-webkit-slider-thumb{
  -webkit-appearance:none;appearance:none;width:20px;height:20px;border-radius:50%;
  background:var(--fg);border:4px solid var(--bg-3);cursor:pointer;
  box-shadow:0 0 0 1px var(--line-2),0 2px 6px var(--shadow-soft);
  transition:transform .2s var(--ease);
}
input[type=range]::-webkit-slider-thumb:hover{transform:scale(1.15)}
input[type=range]::-moz-range-thumb{
  width:14px;height:14px;border-radius:50%;background:var(--fg);
  border:4px solid var(--bg-3);cursor:pointer;box-shadow:0 0 0 1px var(--line-2);
}

/* ---------- Groessenvergleich als Balken ----------
   Die Balken nutzen die Textvarianten der Markenfarben, nicht die
   Flaechenfarben: Ihre Laenge traegt die Information, deshalb gilt der
   Grenzwert 3:1. Die reinen Markenfarben erreichen auf hellem Grund nur 1,6. */
.bars{display:flex;flex-direction:column;gap:1rem;padding-top:.3rem}
.bar{--acc:var(--fg-3)}
.bar[data-k="jpg"]{--acc:var(--yellow-t)}
.bar[data-k="webp"]{--acc:var(--green-t)}

.bar-kopf{display:flex;justify-content:space-between;align-items:baseline;gap:.8rem;margin-bottom:.45rem}
.bar-name{font-size:.8rem;letter-spacing:.1em;text-transform:uppercase;color:var(--fg-3)}
.bar-wert{display:flex;align-items:baseline;gap:.55rem;min-width:0}
.bar-wert small{font-size:.72rem;color:var(--fg-3);white-space:nowrap}
.bar-wert b{
  font-size:1.02rem;font-weight:500;white-space:nowrap;
  font-variant-numeric:tabular-nums;color:var(--fg-2);
}
.bar[data-k="jpg"] .bar-wert b{color:var(--yellow-t)}
.bar[data-k="webp"] .bar-wert b{color:var(--green-t)}

.bar-spur{display:block;height:9px;border-radius:6px;background:var(--surface-2);overflow:hidden}
.bar-spur i{
  display:block;height:100%;width:0;border-radius:6px;background:var(--acc);
  transition:width .7s var(--ease);
}
.bar[data-k="orig"] .bar-spur i{background:var(--fg-3)}

/* ---------- Ersparnis ---------- */
.saving{
  display:flex;align-items:baseline;gap:.7rem;flex-wrap:wrap;
  padding:1rem 1.1rem;border-radius:14px;
  border:1px solid color-mix(in srgb,var(--green) 34%,transparent);
  background:color-mix(in srgb,var(--green) 9%,transparent);
}
.saving b{font-size:1.6rem;font-weight:600;color:var(--green-t);line-height:1}
.saving span{font-size:.88rem;color:var(--fg-2);line-height:1.6;flex:1 1 12rem}

.demo-note{
  font-size:.82rem;color:var(--fg-3);line-height:1.7;
  margin-top:auto;padding-top:.6rem;border-top:1px solid var(--line);
}

/* =========================================================
   ABLAUF
   ========================================================= */
.steps{padding:clamp(5.5rem,11vw,9rem) 0}

.mocks{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1.4rem}
.mock{
  --acc:var(--fg-3); --acc-t:var(--fg-3);
  display:flex;flex-direction:column;overflow:hidden;
  border:1px solid var(--line);border-radius:var(--r);background:var(--bg-2);
  transition:border-color .4s,box-shadow .4s,transform .4s var(--ease);
}
.mock[data-accent="g"]{--acc:var(--green);--acc-t:var(--green-t)}
.mock[data-accent="y"]{--acc:var(--yellow);--acc-t:var(--yellow-t)}
.mock[data-accent="r"]{--acc:var(--red);--acc-t:var(--red-t)}
.mock:hover{
  transform:translateY(-5px);
  border-color:color-mix(in srgb,var(--acc) 40%,transparent);
  box-shadow:0 20px 44px -22px var(--shadow);
}

/* Fensterleiste wie im Joomla-Backend */
.mock-fenster{
  display:flex;align-items:center;gap:.4rem;padding:.6rem .8rem;
  background:var(--bg-3);border-bottom:1px solid var(--line);
}
.mock-fenster i{width:7px;height:7px;border-radius:50%;background:var(--line-2);flex-shrink:0}
.mock-fenster span{margin-left:.5rem;font-size:.7rem;color:var(--fg-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

.mock-buehne{padding:1.2rem;min-height:186px;display:grid;place-items:center}
.mock-text{padding:1.3rem 1.5rem 1.6rem;border-top:1px solid var(--line)}
.mock-text .schritt{
  display:block;margin-bottom:.5rem;font-size:.7rem;font-weight:700;
  letter-spacing:.14em;text-transform:uppercase;color:var(--acc-t);
}
.mock-text h3{margin-bottom:.5rem;font-size:1.1rem}
.mock-text p{color:var(--fg-2);font-size:.93rem;line-height:1.65}

/* ---------- Schritt 1: ZIP wird in den Installer gezogen ----------
   Ein Zyklus dauert 9 Sekunden und teilt sich so auf:
   0 bis 10 %   Zeiger erscheint an der Datei und greift zu
   10 bis 30 %  Datei wird in die Ablage gezogen
   24 bis 34 %  Ablage leuchtet gruen, solange die Datei darueber schwebt
   32 bis 38 %  Loslassen, die Datei sinkt in die Flaeche
   36 bis 68 %  Installationsbalken laeuft
   68 bis 88 %  Bestaetigung
   88 bis 100 % alles zurueck auf Anfang                                    */
.m-szene{position:relative;width:100%;height:150px}

.m-drop{
  position:absolute;inset:0 0 46px 0;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.7rem;
  padding:.9rem;border-radius:11px;
  border:2px dashed color-mix(in srgb,var(--green) 30%,transparent);
  background:color-mix(in srgb,var(--green) 4%,transparent);
  animation:ablageLeuchtet 9s steps(1,end) infinite;
}
@keyframes ablageLeuchtet{
  0%,23%{
    border-color:color-mix(in srgb,var(--green) 30%,transparent);
    background:color-mix(in srgb,var(--green) 4%,transparent);
  }
  24%,33%{
    border-color:var(--green);
    background:color-mix(in srgb,var(--green) 14%,transparent);
  }
  34%,100%{
    border-color:color-mix(in srgb,var(--green) 30%,transparent);
    background:color-mix(in srgb,var(--green) 4%,transparent);
  }
}

.m-drop-hinweis{
  font-size:.74rem;color:var(--fg-3);
  animation:hinweisWeg 9s steps(1,end) infinite;
}
@keyframes hinweisWeg{0%,35%{opacity:1}36%,100%{opacity:0}}

/* Der Balken liegt hinter dem Hinweis und uebernimmt nach dem Loslassen */
.m-balken{
  position:absolute;left:1.4rem;right:1.4rem;bottom:1.1rem;
  height:5px;border-radius:5px;background:var(--surface-2);overflow:hidden;
  opacity:0;animation:balkenDa 9s steps(1,end) infinite;
}
@keyframes balkenDa{0%,35%{opacity:0}36%,67%{opacity:1}68%,100%{opacity:0}}
.m-balken i{
  display:block;height:100%;width:0;border-radius:5px;background:var(--green);
  animation:balkenLaeuft 9s var(--ease) infinite;
}
@keyframes balkenLaeuft{
  0%,36%{width:0}
  67%{width:100%}
  100%{width:100%}
}

.m-fertig{
  display:inline-flex;align-items:center;gap:.4rem;
  font-size:.8rem;font-weight:600;color:var(--green-t);
  opacity:0;animation:fertigDa 9s var(--ease) infinite;
}
.m-fertig svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:2.4;
  stroke-linecap:round;stroke-linejoin:round}
@keyframes fertigDa{
  0%,67%{opacity:0;transform:scale(.8)}
  71%,86%{opacity:1;transform:none}
  90%,100%{opacity:0;transform:scale(.8)}
}

/* Die Datei wandert vom unteren Rand in die Mitte der Ablage */
.m-datei{
  position:absolute;left:50%;bottom:0;z-index:2;
  display:inline-flex;align-items:center;gap:.45rem;
  padding:.35rem .75rem;border-radius:8px;white-space:nowrap;
  background:var(--bg-3);border:1px solid var(--line);
  font-size:.75rem;color:var(--fg-3);
  animation:dateiZiehen 9s var(--ease) infinite;
}
.m-datei b{color:var(--fg);font-weight:500}
/* Jeder Schritt setzt opacity ausdruecklich. Fehlt der Wert, interpoliert der
   Browser bis zum naechsten Keyframe, der ihn nennt: Die Datei war dadurch
   waehrend des gesamten Ziehens fast durchsichtig. */
@keyframes dateiZiehen{
  0%,8%   {transform:translate(-50%,0)     scale(1);   box-shadow:none;                       opacity:1}
  11%     {transform:translate(-50%,-4px)  scale(1.05);box-shadow:0 8px 20px var(--shadow);   opacity:1}
  30%     {transform:translate(-50%,-85px) scale(1.05);box-shadow:0 8px 20px var(--shadow);   opacity:1}
  34%     {transform:translate(-50%,-85px) scale(1);   box-shadow:0 2px 6px var(--shadow-soft);opacity:1}
  37%     {transform:translate(-50%,-85px) scale(.94); box-shadow:none;                       opacity:1}
  41%     {transform:translate(-50%,-85px) scale(.86); box-shadow:none;                       opacity:0}
  88%     {transform:translate(-50%,-85px) scale(.86); box-shadow:none;                       opacity:0}
  92%     {transform:translate(-50%,0)     scale(1);   box-shadow:none;                       opacity:0}
  96%,100%{transform:translate(-50%,0)     scale(1);   box-shadow:none;                       opacity:1}
}

/* Der Zeiger nimmt denselben Weg, greift zu und laesst wieder los */
.m-zeiger1{
  position:absolute;left:50%;bottom:0;z-index:3;width:19px;height:19px;
  pointer-events:none;
  animation:zeigerZieht 9s var(--ease) infinite;
}
.m-zeiger1 svg{width:100%;height:100%;fill:var(--fg);stroke:var(--bg-3);stroke-width:1.2;
  filter:drop-shadow(0 2px 4px rgba(0,0,0,.4))}
@keyframes zeigerZieht{
  0%      {transform:translate(30px,26px)  scale(1);opacity:0}
  6%      {transform:translate(30px,8px)   scale(1);opacity:1}
  9%      {transform:translate(30px,8px)   scale(.8)}   /* zugreifen */
  11%     {transform:translate(30px,4px)   scale(.8)}
  30%     {transform:translate(30px,-77px) scale(.8)}
  34%     {transform:translate(30px,-77px) scale(1)}    /* loslassen */
  44%     {transform:translate(58px,-60px) scale(1);opacity:1}
  50%,100%{transform:translate(58px,-60px) scale(1);opacity:0}
}

/* ---------- Schritt 2: Einstellungen mit Zeiger ---------- */
.m-feld{position:relative;width:100%;display:flex;flex-direction:column;gap:9px}
.m-zeile{
  height:34px;display:flex;align-items:center;justify-content:space-between;gap:.7rem;
  padding:0 .7rem;border-radius:8px;background:var(--bg-3);border:1px solid var(--line);
  font-size:.75rem;color:var(--fg-2);
}

/* Der Schalter kippt genau dann, wenn der Zeiger ihn erreicht */
.m-schalter{
  width:34px;height:19px;border-radius:100px;flex-shrink:0;position:relative;
  background:var(--line-2);
}
.m-schalter::after{
  content:"";position:absolute;top:2px;left:2px;width:15px;height:15px;
  border-radius:50%;background:var(--fg-3);
}
.m-schalter.s1{animation:kippen 9s steps(1,end) infinite}
.m-schalter.s1::after{animation:kippenKnopf 9s steps(1,end) infinite}
.m-schalter.s2{animation:kippen 9s steps(1,end) infinite;animation-delay:4.9s}
.m-schalter.s2::after{animation:kippenKnopf 9s steps(1,end) infinite;animation-delay:4.9s}
@keyframes kippen{0%,13%{background:var(--line-2)}14%,92%{background:var(--green)}93%,100%{background:var(--line-2)}}
@keyframes kippenKnopf{0%,13%{left:2px;background:var(--fg-3)}14%,92%{left:17px;background:#fff}93%,100%{left:2px;background:var(--fg-3)}}

/* Werte erscheinen, sobald der Zeiger auf der Zeile steht */
.m-wert,.m-auswahl{font-weight:500;color:var(--fg);opacity:0}
.m-auswahl{padding:.12rem .5rem;border-radius:5px;background:var(--surface);border:1px solid var(--line)}
.w1{animation:eintragen 9s steps(1,end) infinite;animation-delay:1.6s}
.w2{animation:eintragen 9s steps(1,end) infinite;animation-delay:3.2s}
@keyframes eintragen{0%,13%{opacity:0}14%,92%{opacity:1}93%,100%{opacity:0}}

/* Der Zeiger wandert die vier Zeilen ab und klickt jeweils einmal */
.m-zeiger{
  position:absolute;left:calc(100% - 44px);top:0;width:19px;height:19px;
  pointer-events:none;z-index:2;
  animation:wandern 9s var(--ease) infinite;
}
.m-zeiger svg{width:100%;height:100%;fill:var(--fg);stroke:var(--bg-3);stroke-width:1.2;
  filter:drop-shadow(0 2px 4px rgba(0,0,0,.4))}
@keyframes wandern{
  0%    {transform:translate(26px,116px) scale(1);opacity:0}
  6%    {transform:translate(26px,116px) scale(1);opacity:1}
  12%   {transform:translate(0,9px)    scale(1)}
  14%   {transform:translate(0,9px)    scale(.82)}   /* Klick auf Schalter 1 */
  16%   {transform:translate(0,9px)    scale(1)}
  28%   {transform:translate(0,52px)   scale(1)}
  30%   {transform:translate(0,52px)   scale(.82)}   /* Wert eintragen */
  32%   {transform:translate(0,52px)   scale(1)}
  45%   {transform:translate(0,95px)   scale(1)}
  47%   {transform:translate(0,95px)   scale(.82)}   /* Format waehlen */
  49%   {transform:translate(0,95px)   scale(1)}
  62%   {transform:translate(0,138px)  scale(1)}
  64%   {transform:translate(0,138px)  scale(.82)}   /* Klick auf Schalter 2 */
  66%   {transform:translate(0,138px)  scale(1)}
  86%   {transform:translate(0,138px)  scale(1);opacity:1}
  94%   {transform:translate(26px,170px) scale(1);opacity:0}
  100%  {transform:translate(26px,116px) scale(1);opacity:0}
}

/* ---------- Schritt 3: Medien ---------- */
.m-medien{width:100%}
.m-raster{display:grid;grid-template-columns:repeat(4,1fr);gap:.4rem}
.m-raster span{
  aspect-ratio:1;border-radius:6px;
  background:
    radial-gradient(ellipse 70% 70% at 30% 30%,rgba(133,192,60,.65),transparent 65%),
    radial-gradient(ellipse 70% 70% at 75% 75%,rgba(103,158,212,.65),transparent 65%),
    var(--photo-bg);
  animation:auftauchen 7s var(--ease) infinite;
}
.m-raster span:nth-child(2){
  animation-delay:.5s;
  background:
    radial-gradient(ellipse 70% 70% at 30% 30%,rgba(249,180,49,.65),transparent 65%),
    radial-gradient(ellipse 70% 70% at 75% 75%,rgba(232,64,50,.65),transparent 65%),
    var(--photo-bg);
}
.m-raster span:nth-child(3){
  animation-delay:1s;
  background:
    radial-gradient(ellipse 70% 70% at 40% 60%,rgba(103,158,212,.65),transparent 65%),
    radial-gradient(ellipse 70% 70% at 80% 20%,rgba(133,192,60,.65),transparent 65%),
    var(--photo-bg);
}
.m-raster span.leer{
  background:var(--surface);border:1px dashed var(--line-2);animation:none;
}
@keyframes auftauchen{
  0%,6%{opacity:0;transform:scale(.88)}
  16%,88%{opacity:1;transform:none}
  96%,100%{opacity:0;transform:scale(.88)}
}
.m-marke{margin-top:.7rem;display:flex;gap:.3rem;flex-wrap:wrap}
.m-marke b{
  font-size:.64rem;font-weight:600;padding:.14rem .45rem;border-radius:4px;
  background:color-mix(in srgb,var(--green) 16%,transparent);color:var(--green-t);
  opacity:0;animation:auftauchen 7s var(--ease) infinite;
}
.m-marke b:nth-child(1){animation-delay:1.4s}
.m-marke b:nth-child(2){animation-delay:1.7s}
.m-marke b:nth-child(3){animation-delay:2s}
.m-marke b:nth-child(4){animation-delay:2.3s}

/* =========================================================
   LIGHTBOXEN
   ========================================================= */
.lb{padding:clamp(5.5rem,11vw,9rem) 0;background:var(--bg-2);overflow:hidden}
.marquee{
  display:flex;overflow:hidden;
  /* Senkrechte Polsterung: overflow:hidden beschneidet an der Innenkante,
     also bleibt der beim Ueberfahren angehobene Chip sichtbar. Ohne sie
     wird sein oberer Rand abgeschnitten. */
  padding:12px 0;margin-top:.4rem;
  mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);
}
.marquee-track{display:flex;gap:1rem;flex-shrink:0;padding-right:1rem;animation:slide 42s linear infinite}
.marquee-rev .marquee-track{animation-direction:reverse;animation-duration:52s}
.marquee:hover .marquee-track{animation-play-state:paused}
@keyframes slide{to{transform:translateX(-50%)}}
.lb-item{
  flex-shrink:0;padding:.85rem 1.6rem;border-radius:100px;white-space:nowrap;
  border:1px solid var(--line);background:var(--bg-3);
  font-size:.95rem;color:var(--fg-2);
  transition:border-color .3s,color .3s,transform .3s;
}
.lb-item:hover{color:var(--fg);transform:translateY(-3px)}
.lb-item:nth-child(4n+1):hover{border-color:var(--green)}
.lb-item:nth-child(4n+2):hover{border-color:var(--yellow)}
.lb-item:nth-child(4n+3):hover{border-color:var(--red)}
.lb-item:nth-child(4n+4):hover{border-color:var(--blue)}

/* =========================================================
   FOOTER
   ========================================================= */
.site-footer{border-top:1px solid var(--line);background:var(--bg-2);padding-top:clamp(3rem,6vw,4.5rem)}
.footer-inner{
  display:flex;flex-wrap:wrap;gap:2.5rem;
  justify-content:space-between;align-items:flex-start;
  padding-bottom:2.5rem;
}
.footer-brand img{width:160px;filter:brightness(0) invert(1);opacity:.85;margin-bottom:1.1rem}
.footer-brand p{color:var(--fg-3);font-size:.92rem;line-height:1.8}
.footer-brand a{color:var(--green-t);text-decoration:none}
.footer-brand a:hover{text-decoration:underline}

.footer-nav{display:flex;flex-wrap:wrap;gap:2rem}
.footer-nav a{
  text-decoration:none;font-size:.94rem;color:var(--fg-2);
  position:relative;transition:color .25s;
}
.footer-nav a::after{
  content:"";position:absolute;left:0;bottom:-4px;height:1px;width:0;
  background:var(--green);transition:width .3s var(--ease);
}
.footer-nav a:hover{color:var(--fg)}
.footer-nav a:hover::after{width:100%}

.footer-bottom{
  padding:1.5rem 0;border-top:1px solid var(--line);
  font-size:.84rem;color:var(--fg-3);
}
.footer-bottom a{color:var(--fg-2);text-decoration:none}
.footer-bottom a:hover{color:var(--green-t)}

/* =========================================================
   Scroll-Reveal
   ========================================================= */
.reveal{opacity:0;transform:translateY(26px);transition:opacity .8s var(--ease),transform .8s var(--ease)}
.reveal.in{opacity:1;transform:none}

/* =========================================================
   Responsive
   ========================================================= */
@media (max-width:1020px){
  .mocks{grid-template-columns:1fr}
  /* Einspaltig, dann ergibt der Spaltentrenner keinen Sinn mehr */
  .feat-list{grid-template-columns:1fr}
  .feat-list::before{display:none}
  .feat-list li:nth-child(2){border-top:1px solid var(--line)}
  .why-split{grid-template-columns:1fr;gap:3rem}
  .waste-frame{max-width:460px;margin-inline:auto}
  /* Aus der Strecke wird ein Raster, die Leitung ergibt dann keinen Sinn mehr */
  .pipe{grid-template-columns:repeat(2,1fr);gap:2.4rem 1rem;margin-top:3.5rem}
  .pipe::before,.pipe::after{display:none}
  .stats{grid-template-columns:repeat(2,1fr);row-gap:2.2rem}
  /* Bei 2x2 trennt die Linie nur noch die beiden Spalten, nicht die Zeilen */
  .stats li + li::before{display:none}
  .stats li:nth-child(even)::before{
    content:"";display:block;position:absolute;left:0;top:10%;bottom:10%;width:1px;
    background:linear-gradient(180deg,transparent,var(--line-2),transparent);
  }
  .demo-box{grid-template-columns:1fr}
  .demo-stage{border-right:0;border-bottom:1px solid var(--line)}
}

@media (max-width:820px){
  .burger{display:block}
  .nav{
    position:fixed;inset:0 0 auto 0;top:0;
    flex-direction:column;align-items:stretch;gap:0;
    padding:6rem 1.5rem 2rem;
    background:var(--header-bg);
    backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);
    border-bottom:1px solid var(--line);
    transform:translateY(-100%);opacity:0;visibility:hidden;
    transition:transform .45s var(--ease),opacity .35s,visibility .35s;
  }
  .nav.open{transform:translateY(0);opacity:1;visibility:visible}
  .nav a{padding:1.05rem 0;border-bottom:1px solid var(--line);font-size:1.05rem}
  .nav-cta{
    margin-top:1.3rem;border-radius:100px;text-align:center;
    border:1px solid var(--line-2);border-bottom:1px solid var(--line-2);
  }
  .site-header{padding:.85rem 0}
}

@media (max-width:700px){
  /* Die festen Umbrueche in den Ueberschriften sind fuer breite Spalten
     gesetzt. Auf schmalen Displays lassen sie einzelne Woerter stehen. */
  h2 br{display:none}
}

@media (max-width:560px){
  .shell{width:min(100% - 2rem,var(--shell))}

  /* Der Zeiger auf den 600er-Ausschnitt braucht Platz, den es hier nicht gibt */
  .waste-need-label{
    left:50%;top:auto;bottom:.8rem;transform:translateX(-50%);
    margin:0;padding:0;text-align:center;font-size:.72rem;
  }
  .waste-need-label::before{display:none}
  .symptoms li{grid-template-columns:1fr;gap:.5rem}
  .sym-n{padding-top:0}


  /* Untereinander gestapelt waere die Strecke ueber 1000px hoch. Quer gelegt
     passt eine Station in eine Zeile und der Hero bleibt ueberschaubar. */
  .pipe{grid-template-columns:1fr;gap:1.1rem}
  .stage{
    display:grid;grid-template-columns:auto 1fr;
    column-gap:1.1rem;row-gap:.15rem;
    align-items:center;justify-items:start;text-align:left;padding:0;
  }
  .stage .node{grid-column:1;grid-row:1/4;width:62px;height:62px;border-radius:17px}
  .stage .node svg{width:24px;height:24px}
  .stage .mini{width:34px;height:23px}
  .stage h2{grid-column:2;grid-row:1}
  .stage .chip{grid-column:2;grid-row:2}
  .stage p{grid-column:2;grid-row:3;max-width:none}
  .stats{grid-template-columns:1fr;row-gap:0;padding:.6rem 0}
  .stats li{
    display:grid;grid-template-columns:auto 1fr auto;
    align-items:center;gap:0 1rem;text-align:left;
    padding:1.05rem clamp(1.1rem,4vw,1.5rem);
  }
  .stats li:nth-child(even)::before{display:none}
  /* stattdessen waagerechte Trenner zwischen den Zeilen */
  .stats li + li{border-top:1px solid var(--line)}
  /* Zeile mitgeben, sonst schiebt die Auto-Platzierung das Label nach unten */
  .stats b{grid-column:3;grid-row:1;font-size:1.6rem}
  .stat-label{grid-column:2;grid-row:1;max-width:none;font-size:.9rem}
  .demo-panel{padding:1.7rem 1.4rem}
  .hero-cta .btn{width:100%;justify-content:center}
}

/* =========================================================
   Reduzierte Bewegung
   ========================================================= */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
    scroll-behavior:auto !important;
  }
  .reveal{opacity:1;transform:none}
}

/* =========================================================
   DOKUMENTATIONSSEITE
   ========================================================= */
.doc{padding:clamp(8rem,13vw,10.5rem) 0 clamp(4rem,8vw,6rem)}

.doc-head{max-width:760px;margin-bottom:clamp(3rem,6vw,4.5rem)}
.doc-head h1{
  margin:0 0 1.5rem;max-width:none;
  font-size:clamp(2.2rem,4.6vw,3.4rem);
}
.doc-head .lead{margin:0;max-width:60ch}

.doc-grid{
  display:grid;grid-template-columns:230px minmax(0,1fr);
  gap:clamp(2rem,5vw,4rem);align-items:start;
}

/* Inhaltsverzeichnis */
.toc{position:sticky;top:110px}
.toc-title{
  font-size:.72rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;
  color:var(--fg-3);margin-bottom:.9rem;
}
.toc nav{display:flex;flex-direction:column;border-left:1px solid var(--line)}
.toc a{
  padding:.5rem 0 .5rem 1rem;margin-left:-1px;
  border-left:1px solid transparent;
  font-size:.9rem;color:var(--fg-3);text-decoration:none;
  transition:color .25s,border-color .25s;
}
.toc a:hover{color:var(--fg);border-left-color:var(--green)}

/* Textkörper */
.doc-body{max-width:76ch;font-size:1rem}
.doc-body section{
  padding-bottom:clamp(2.5rem,5vw,3.5rem);
  margin-bottom:clamp(2.5rem,5vw,3.5rem);
  border-bottom:1px solid var(--line);
  scroll-margin-top:110px;
}
.doc-body section:last-of-type{border-bottom:0}
.doc-body h2{
  font-size:clamp(1.6rem,2.8vw,2.1rem);margin-bottom:1.2rem;
}
.doc-body h3{margin:2.2rem 0 .9rem}
.doc-body p{color:var(--fg-2);margin-bottom:1.1rem;line-height:1.75}
.doc-body p:last-child{margin-bottom:0}
.doc-body a:not(.btn){color:var(--green-t);text-decoration:none}
.doc-body a:not(.btn):hover{text-decoration:underline}
.doc-body .small{font-size:.88rem;color:var(--fg-3)}

/* Menüpfad, z.B. System > Plugins */
.path{
  display:inline-block;padding:.1rem .5rem;border-radius:6px;
  background:var(--surface-2);border:1px solid var(--line);
  font-size:.86em;color:var(--fg);white-space:nowrap;
}
.path + .path{margin-left:.3rem;position:relative}
.path + .path::before{
  content:"›";position:absolute;left:-.75rem;color:var(--fg-3);border:0;background:none;
}

/* Einstellungsliste */
.opts{margin:1.6rem 0 0}
.opts dt{
  font-weight:500;color:var(--fg);font-size:1.02rem;
  padding-top:1.2rem;margin-top:1.2rem;border-top:1px solid var(--line);
}
.opts dt:first-of-type{border-top:0;margin-top:0;padding-top:0}
.opts dd{margin:.45rem 0 0;color:var(--fg-2);line-height:1.7}
.def{
  display:inline-block;margin-top:.5rem;padding:.16rem .6rem;border-radius:100px;
  font-size:.76rem;color:var(--fg-3);
  background:var(--surface);border:1px solid var(--line);
}

/* Hinweiskästen */
.note{
  margin:1.6rem 0 0;padding:1.1rem 1.3rem;border-radius:var(--r);
  border:1px solid rgba(103,158,212,.32);
  background:rgba(103,158,212,.07);
  font-size:.94rem;color:var(--fg-2);line-height:1.7;
}
.note b{color:var(--fg);font-weight:500}
.note-warn{
  border-color:rgba(249,180,49,.35);
  background:rgba(249,180,49,.07);
}

/* Beispielblock */
.example{
  margin:1.6rem 0 0;padding:1.2rem 1.4rem;border-radius:var(--r);
  border:1px solid var(--line);background:var(--bg-2);
}
.example-label{
  display:block;font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--fg-3);margin-bottom:.6rem;
}
.example-label ~ .example-label{margin-top:1.2rem}
.example p{margin:0;color:var(--fg-2)}
.example pre{margin:0}

pre{
  margin:1.4rem 0;padding:1.1rem 1.3rem;overflow-x:auto;
  border-radius:var(--r);border:1px solid var(--line);background:var(--pre-bg);
}
pre code{
  background:none;padding:0;color:var(--pre-fg);font-size:.88rem;
  line-height:1.7;white-space:pre;
}

/* Tabellen */
.table-wrap{margin:1.5rem 0;overflow-x:auto;border-radius:var(--r);border:1px solid var(--line)}
.tbl{width:100%;border-collapse:collapse;font-size:.92rem;min-width:520px}
.tbl th,.tbl td{padding:.85rem 1.1rem;text-align:left;vertical-align:top}
.tbl thead th{
  background:var(--bg-3);color:var(--fg);font-weight:500;
  font-size:.78rem;letter-spacing:.1em;text-transform:uppercase;
}
.tbl tbody tr + tr td{border-top:1px solid var(--line)}
.tbl td{color:var(--fg-2);line-height:1.6}
.tbl td:first-child{white-space:nowrap}

/* Prüfliste */
.checks{margin:1.4rem 0 1.4rem;padding:0;list-style:none}
.checks li{
  position:relative;padding:0 0 0 1.7rem;margin-bottom:1rem;
  color:var(--fg-2);line-height:1.7;
}
.checks li::before{
  content:"";position:absolute;left:0;top:.62em;
  width:7px;height:7px;border-radius:50%;background:var(--green);
}
.checks b{color:var(--fg);font-weight:500}

.doc-foot{
  margin-top:clamp(2.5rem,5vw,3.5rem);padding-top:1.6rem;
  border-top:1px solid var(--line);
  font-size:.88rem;color:var(--fg-3);
}
.doc-foot a{margin-left:.6rem}

@media (max-width:900px){
  .doc-grid{grid-template-columns:1fr}
  .toc{
    position:static;padding-bottom:1.6rem;
    border-bottom:1px solid var(--line);margin-bottom:.5rem;
  }
  .toc nav{
    flex-direction:row;flex-wrap:wrap;gap:.45rem;border-left:0;
  }
  .toc a{
    padding:.4rem .9rem;border:1px solid var(--line);border-radius:100px;
    margin-left:0;font-size:.84rem;
  }
  .toc a:hover{border-color:var(--green);border-left-color:var(--green)}
}

/* =========================================================
   THEME-SCHALTER
   ========================================================= */
.theme-toggle{
  display:grid;place-items:center;flex-shrink:0;
  width:40px;height:40px;padding:0;margin-left:.4rem;
  border:1px solid var(--line-2);border-radius:50%;
  background:var(--surface);color:var(--fg-2);cursor:pointer;
  transition:color .25s,border-color .25s,background .25s,transform .25s var(--ease);
}
.theme-toggle:hover{color:var(--fg);border-color:var(--fg-3);transform:translateY(-2px)}
.theme-toggle:focus-visible{outline:2px solid var(--green);outline-offset:3px}
.theme-toggle svg{
  grid-area:1/1;width:19px;height:19px;fill:none;stroke:currentColor;
  stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;
  transition:opacity .25s,transform .35s var(--ease);
}

/* Gezeigt wird das Symbol des Zustands, in den der Klick fuehrt.
   Dunkel: Sonne. Hell: Mond. Beide Wege, System und bewusste Wahl. */
.ico-moon{opacity:0;transform:rotate(-40deg) scale(.7)}
.ico-sun{opacity:1;transform:none}

@media (prefers-color-scheme: light){
  :root:not([data-theme="dark"]) .ico-sun{opacity:0;transform:rotate(40deg) scale(.7)}
  :root:not([data-theme="dark"]) .ico-moon{opacity:1;transform:none}
}
:root[data-theme="light"] .ico-sun{opacity:0;transform:rotate(40deg) scale(.7)}
:root[data-theme="light"] .ico-moon{opacity:1;transform:none}
:root[data-theme="dark"] .ico-sun{opacity:1;transform:none}
:root[data-theme="dark"] .ico-moon{opacity:0;transform:rotate(-40deg) scale(.7)}

/* Im hellen Theme braucht das Logo seine Originalfarben, nicht die Invertierung */
@media (prefers-color-scheme: light){
  :root:not([data-theme="dark"]) .brand img,
  :root:not([data-theme="dark"]) .footer-brand img{filter:none}
}
:root[data-theme="light"] .brand img,
:root[data-theme="light"] .footer-brand img{filter:none}

@media (max-width:820px){
  .theme-toggle{margin-left:auto;margin-right:.3rem}
}

/* =========================================================
   KONTAKT
   ========================================================= */
.cta{padding:clamp(5rem,10vw,8rem) 0}

.kg{
  display:grid;grid-template-columns:1.05fr .95fr;
  border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;
}
.kg > div{padding:clamp(2rem,4.5vw,3.2rem)}
.kg-frage{
  background:
    radial-gradient(ellipse 70% 130% at 6% 0%,color-mix(in srgb,var(--green) 12%,transparent),transparent 62%),
    var(--bg-2);
  display:flex;flex-direction:column;justify-content:center;gap:1rem;
}
.kg-frage h2{font-size:clamp(1.5rem,2.8vw,2.2rem)}
.kg-frage p{color:var(--fg-2)}
.kg-absender{
  background:var(--bg-3);border-left:1px solid var(--line);
  display:flex;flex-direction:column;justify-content:center;gap:1.4rem;
}
/* Im hellen Theme braucht das Logo seine Originalfarben */
.kg-logo{width:132px;filter:brightness(0) invert(1);opacity:.9}
:root[data-theme="light"] .kg-logo{filter:none}
@media (prefers-color-scheme: light){:root:not([data-theme="dark"]) .kg-logo{filter:none}}

.kg-wege{display:flex;flex-direction:column;gap:.6rem}
.kg-wege a{
  display:flex;align-items:center;gap:.9rem;padding:.85rem 1rem;border-radius:12px;
  border:1px solid var(--line);background:var(--bg-2);text-decoration:none;
  transition:transform .3s var(--ease),border-color .3s;
}
.kg-wege a[data-accent="g"]{--acc:var(--green);--acc-t:var(--green-t)}
.kg-wege a[data-accent="b"]{--acc:var(--blue);--acc-t:var(--blue-t)}
.kg-wege a[data-accent="y"]{--acc:var(--yellow);--acc-t:var(--yellow-t)}
.kg-wege a:hover{transform:translateY(-2px);border-color:color-mix(in srgb,var(--acc) 48%,transparent)}
.kg-ico{
  display:grid;place-items:center;width:38px;height:38px;border-radius:11px;flex-shrink:0;
  background:color-mix(in srgb,var(--acc) 13%,transparent);
}
.kg-ico svg{width:18px;height:18px;fill:none;stroke:var(--acc-t);stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.kg-txt{min-width:0}
.kg-txt small{display:block;font-size:.7rem;color:var(--fg-3);letter-spacing:.08em;text-transform:uppercase}
.kg-txt b{font-size:.98rem;font-weight:500}

@media (max-width:1020px){
  .kg{grid-template-columns:1fr}
  .kg-absender{border-left:0;border-top:1px solid var(--line)}
}

/* =========================================================
   JOOMLA-BEZUG
   ========================================================= */
/* Das Symbol stammt aus der offiziellen Joomla-Installation und ist
   freigestellt, damit es in beiden Themes sitzt. Der Schriftzug kommt aus
   der Seitenschrift, das Original war weiss und waere hell unsichtbar. */
/* Steht ueber der Ueberschrift und bleibt bewusst klein und ohne Rahmen.
   Als Pille unter den Knoepfen war es fast so hoch wie ein Knopf und las sich
   als dritter Button. Es ist eine Angabe, kein Handlungsaufruf. */
.fuer-joomla{
  display:inline-flex;align-items:center;gap:.5rem;
  margin:0 auto 1.4rem;
  font-size:.8rem;color:var(--fg-3);line-height:1.3;letter-spacing:.01em;
}
.fuer-joomla img{width:22px;height:22px;flex-shrink:0}
.fuer-joomla b{color:var(--fg-2);font-weight:500}

.footer-joomla{
  display:inline-flex;align-items:center;gap:.5rem;margin-top:1rem;
  font-size:.8rem;color:var(--fg-3);
}
/* Wichtig: .footer-brand img faerbt das ImageSizer-Logo weiss ein. Ohne diese
   Ausnahme erwischt das auch das bunte Joomla-Symbol und macht es zum
   grauen Klumpen. */
.footer-joomla img{width:20px;height:20px;filter:none;opacity:1}

@media (max-width:560px){
  .fuer-joomla{flex-wrap:wrap;justify-content:center;text-align:center;gap:.5rem}
}

/* =========================================================
   DOKUMENTATION, Feinschliff
   ========================================================= */
.doc{padding:0 0 clamp(4rem,8vw,6rem)}

/* Kopfbereich mit demselben Lichtspiel wie der Hero */
.doc-kopf{position:relative;overflow:hidden;padding:clamp(8rem,13vw,10.5rem) 0 clamp(3rem,6vw,4.5rem);
  border-bottom:1px solid var(--line)}
.doc-kopf-bg{position:absolute;inset:0;z-index:0;pointer-events:none}
.doc-kopf .shell{position:relative;z-index:1}
.doc-kopf .orb-g{width:38vw;height:38vw;top:-18%;left:-8%}
.doc-kopf .orb-b{width:32vw;height:32vw;top:0;right:-6%}

.doc-fakten{
  display:inline-flex;align-items:center;gap:.8rem;margin-top:2rem;
  padding:.6rem 1.15rem .6rem .8rem;border-radius:100px;
  border:1px solid var(--line);background:var(--surface);
  font-size:.86rem;color:var(--fg-3);
}
.doc-fakten img{width:30px;height:30px;flex-shrink:0}
.doc-fakten b{color:var(--fg);font-weight:500}

.doc-grid{padding-top:clamp(2.5rem,5vw,3.5rem)}

/* Laufende Nummer je Abschnitt */
.doc-nr{
  display:block;margin-bottom:.5rem;
  font-size:.74rem;font-weight:700;letter-spacing:.18em;color:var(--green-t);
}

/* Inhaltsverzeichnis: der gerade gelesene Abschnitt wird markiert */
.toc a.aktiv{color:var(--fg);border-left-color:var(--green);font-weight:500}

/* Codeblöcke mit Kopierknopf */
.code-block{position:relative}
.code-kopieren{
  position:absolute;top:.6rem;right:.6rem;z-index:2;
  display:inline-flex;align-items:center;gap:.35rem;
  font:inherit;font-size:.72rem;font-weight:500;cursor:pointer;
  padding:.3rem .65rem;border-radius:100px;
  border:1px solid var(--line-2);background:var(--chip-bg);color:var(--fg-2);
  opacity:0;transition:opacity .25s,color .25s,border-color .25s;
}
.code-block:hover .code-kopieren,
.code-kopieren:focus-visible{opacity:1}
.code-kopieren:hover{color:var(--fg);border-color:var(--green)}
.code-kopieren.fertig{color:var(--green-t);border-color:var(--green);opacity:1}
.code-kopieren svg{width:13px;height:13px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}

@media (max-width:900px){
  .doc-kopf{padding-top:clamp(7rem,12vw,9rem)}
  .toc a.aktiv{border-color:var(--green)}
}

/* =========================================================
   FEHLERSEITE
   ========================================================= */
.fehler{position:relative;overflow:hidden;padding:clamp(8rem,14vw,11rem) 0 clamp(5rem,9vw,7rem)}
.fehler-bg{position:absolute;inset:0;z-index:0;pointer-events:none}
.fehler-bg .orb-g{width:40vw;height:40vw;top:-12%;left:-8%}
.fehler-bg .orb-r{width:34vw;height:34vw;top:20%;right:-6%;opacity:var(--orb-o-soft)}
.fehler-inner{position:relative;z-index:1;text-align:center}
.fehler .kicker{margin-top:2.6rem}
.fehler h1{max-width:none}
.fehler .lead{margin-top:1.4rem}
.fehler .hero-cta{margin-top:2.4rem}

.fehler-fenster{width:min(100%,440px);margin:0 auto;cursor:default}
.fehler-fenster .browser-inhalt{padding:1.6rem;min-height:0}

/* Die Bühne: Das Bild schrumpft weg, darunter kommt der Fehlercode zum
   Vorschein. Ein Zyklus dauert 8 Sekunden.
   0 bis 12 %   Bild in voller Groesse
   12 bis 42 %  es schrumpft auf nichts zusammen
   38 bis 50 %  404 taucht auf
   50 bis 80 %  Suchstrahl laeuft einmal durch
   88 bis 100 % zurueck auf Anfang                                        */
.f-rahmen{
  position:relative;width:100%;aspect-ratio:16/10;
  display:grid;place-items:center;border-radius:8px;
  background:var(--surface);border:1px dashed var(--line-2);
}
.f-bild{
  width:100%;height:100%;border-radius:6px;
  background:
    radial-gradient(ellipse 60% 70% at 18% 22%,rgba(133,192,60,.65),transparent 62%),
    radial-gradient(ellipse 55% 65% at 82% 28%,rgba(249,180,49,.55),transparent 60%),
    radial-gradient(ellipse 70% 60% at 72% 84%,rgba(232,64,50,.5),transparent 62%),
    radial-gradient(ellipse 65% 70% at 24% 82%,rgba(103,158,212,.6),transparent 62%),
    var(--photo-bg);
  animation:wegschrumpfen 8s var(--ease) infinite;
}
@keyframes wegschrumpfen{
  0%,12%  {transform:scale(1);   opacity:1;border-radius:6px}
  38%     {transform:scale(.06); opacity:1;border-radius:50%}
  44%     {transform:scale(.02); opacity:0;border-radius:50%}
  86%     {transform:scale(.02); opacity:0;border-radius:50%}
  94%     {transform:scale(.06); opacity:0;border-radius:50%}
  100%    {transform:scale(1);   opacity:1;border-radius:6px}
}

.f-code{
  position:absolute;font-size:clamp(3rem,7vw,4.4rem);font-weight:200;
  letter-spacing:-.04em;line-height:1;color:var(--fg-3);
  font-variant-numeric:tabular-nums;
  opacity:0;animation:codeDa 8s var(--ease) infinite;
}
@keyframes codeDa{
  0%,38%  {opacity:0;transform:scale(.85)}
  50%,84% {opacity:1;transform:none}
  90%,100%{opacity:0;transform:scale(.85)}
}

/* Suchstrahl: sucht das Bild und findet nichts */
.f-scan{
  position:absolute;left:1px;right:1px;height:2px;top:0;border-radius:2px;
  background:linear-gradient(90deg,transparent,var(--red),transparent);
  box-shadow:0 0 16px color-mix(in srgb,var(--red) 70%,transparent);
  opacity:0;animation:suchen 8s var(--ease) infinite;
}
@keyframes suchen{
  0%,50%  {top:2%;opacity:0}
  56%     {top:2%;opacity:1}
  76%     {top:96%;opacity:1}
  82%,100%{top:96%;opacity:0}
}

/* Die Crop-Marken aus dem Logo rahmen die Fehlstelle ein */
.f-rahmen .ecke{
  position:absolute;width:22px;height:22px;border:3px solid;border-radius:2px;
  animation:eckenSuchen 8s var(--ease) infinite;
}
.f-rahmen .ecke.tl{top:-10px;left:-10px;border-width:3px 0 0 3px;border-color:var(--green)}
.f-rahmen .ecke.tr{top:-10px;right:-10px;border-width:3px 3px 0 0;border-color:var(--yellow);animation-delay:.15s}
.f-rahmen .ecke.bl{bottom:-10px;left:-10px;border-width:0 0 3px 3px;border-color:var(--blue);animation-delay:.3s}
.f-rahmen .ecke.br{bottom:-10px;right:-10px;border-width:0 3px 3px 0;border-color:var(--red);animation-delay:.45s}
@keyframes eckenSuchen{
  0%,38%  {transform:translate(0,0)}
  52%,80% {transform:translate(var(--ex,0),var(--ey,0))}
  92%,100%{transform:translate(0,0)}
}
.f-rahmen .ecke.tl{--ex:7px;--ey:7px}
.f-rahmen .ecke.tr{--ex:-7px;--ey:7px}
.f-rahmen .ecke.bl{--ex:7px;--ey:-7px}
.f-rahmen .ecke.br{--ex:-7px;--ey:-7px}

@media (max-width:560px){
  .fehler-fenster{width:100%}
  .fehler .hero-cta .btn{width:100%;justify-content:center}
}