/* ============================================================
   OLO GmbH – Design System
   Farben strikt aus dem Logo abgeleitet.
   ============================================================ */
:root{
  /* Marke */
  --brown:      #3E2B1B;
  --brown-2:    #5A4130;
  --brown-ink:  #2C1E13;
  --blue:       #7191A8;
  --blue-2:     #A8BECD;
  --blue-pale:  #EEF2F5;
  --blue-ink:   #2E4152;
  --lime:       #A9CC3E;

  /* Flächen & Text */
  --bg:      #FAFAF8;
  --paper:   #FFFFFF;
  --text:    #37332E;
  --muted:   #6F6A62;
  --line:    rgba(62,43,27,.13);
  --line-2:  rgba(62,43,27,.07);
  --on-dark: #EDE7E0;
  --on-dark-muted: rgba(237,231,224,.62);

  /* Typo */
  --display: 'Archivo', 'Segoe UI', system-ui, -apple-system, sans-serif;
  --body:    'Inter Tight', 'Segoe UI', system-ui, -apple-system, sans-serif;
  --mono:    'IBM Plex Mono', ui-monospace, Consolas, monospace;

  /* Raster */
  --gutter: clamp(20px, 5vw, 72px);
  --maxw: 1280px;
  --sect: clamp(72px, 9vw, 132px);
  --r: 3px;
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; background:var(--bg); color:var(--text);
  font-family:var(--body); font-size:17px; line-height:1.62;
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
img{max-width:100%;display:block}
a{color:inherit}
:focus-visible{outline:2.5px solid var(--lime); outline-offset:3px; border-radius:2px}

/* --- Typografie ------------------------------------------------ */
h1,h2,h3,h4{font-family:var(--display); font-weight:700; letter-spacing:-.022em; line-height:1.04; margin:0; color:var(--brown)}
h1{font-size:clamp(2.9rem,6.4vw,5.4rem)}
h2{font-size:clamp(2rem,3.9vw,3.3rem)}
h3{font-size:clamp(1.25rem,1.7vw,1.55rem); line-height:1.18; letter-spacing:-.012em; overflow-wrap:break-word; hyphens:auto}
h4{font-size:1.02rem; font-weight:600; letter-spacing:-.005em}
p{margin:0 0 1.05em}
.lead{font-size:clamp(1.12rem,1.5vw,1.3rem); line-height:1.55; color:var(--brown-2)}
.dim{color:var(--muted)}

/* Eyebrow im Datenblatt-Duktus: Mono, gesperrt, mit grünem Tick */
.eyebrow{
  font-family:var(--mono); font-size:.735rem; font-weight:500;
  letter-spacing:.19em; text-transform:uppercase; color:var(--blue);
  display:flex; align-items:center; gap:11px; margin:0 0 22px;
}
.eyebrow::before{content:""; width:14px; height:3px; background:var(--lime); flex:none}

/* SIGNATURE: Schwellenlineal – Linie mit Schwellen-Ticks, grüner Abschluss.
   Direkt aus dem Gleis-Motiv des Logos abgeleitet. */
.sleeper-rule{
  height:9px; width:100%; position:relative;
  background:
    linear-gradient(var(--blue),var(--blue)) left center/100% 1px no-repeat,
    repeating-linear-gradient(90deg, var(--blue) 0 2px, transparent 2px 15px);
  opacity:.85;
}
.sleeper-rule::after{
  content:""; position:absolute; right:0; top:-4px;
  width:3px; height:17px; background:var(--lime);
}
.on-dark .sleeper-rule{
  background:
    linear-gradient(var(--blue),var(--blue)) left center/100% 1px no-repeat,
    repeating-linear-gradient(90deg, var(--blue) 0 2px, transparent 2px 15px);
}

/* --- Layout ---------------------------------------------------- */
.wrap{max-width:var(--maxw); margin-inline:auto; padding-inline:var(--gutter)}
.section{padding-block:var(--sect)}
.section--tight{padding-block:clamp(52px,6vw,84px)}
.on-dark{background:var(--brown-ink); color:var(--on-dark); position:relative}
.on-dark::before{content:""; position:absolute; inset:0; pointer-events:none;
  background-image:linear-gradient(rgba(237,231,224,.045) 1px, transparent 1px),
                   linear-gradient(90deg, rgba(237,231,224,.045) 1px, transparent 1px);
  background-size:46px 46px;}
.on-dark > .wrap{position:relative}
.on-dark h1,.on-dark h2,.on-dark h3,.on-dark h4{color:#fff}
.on-dark .lead{color:var(--on-dark)}
.on-dark .dim{color:var(--on-dark-muted)}
.on-blue{background:var(--blue-pale); position:relative}
.on-blue::before{content:""; position:absolute; inset:0; pointer-events:none;
  background-image:linear-gradient(rgba(113,145,168,.10) 1px, transparent 1px),
                   linear-gradient(90deg, rgba(113,145,168,.10) 1px, transparent 1px);
  background-size:46px 46px;}
.on-blue > .wrap{position:relative}

.split{display:grid; grid-template-columns:1fr 1fr; gap:clamp(38px,6vw,96px); align-items:center}
.split--55{grid-template-columns:1.15fr .85fr}
.split--45{grid-template-columns:.85fr 1.15fr}
@media(max-width:900px){.split,.split--55,.split--45{grid-template-columns:1fr; gap:44px}}

/* --- Buttons --------------------------------------------------- */
.btn{
  display:inline-flex; align-items:center; gap:10px;
  font-family:var(--display); font-weight:600; font-size:.94rem; letter-spacing:-.005em;
  padding:14px 26px; border-radius:var(--r); border:1.5px solid transparent;
  text-decoration:none; cursor:pointer; transition:.22s ease; white-space:nowrap;
}
.btn svg{transition:transform .22s ease}
.btn:hover svg{transform:translateX(4px)}
.btn--lime{background:var(--lime); color:var(--brown-ink)}
.btn--lime:hover{background:#bcdc55; box-shadow:0 10px 28px rgba(169,204,62,.38); transform:translateY(-2px)}
.btn--brown{background:var(--brown); color:#fff}
.btn--brown:hover{background:var(--brown-2); box-shadow:0 10px 28px rgba(62,43,27,.28); transform:translateY(-2px)}
.btn--ghost{border-color:var(--brown); color:var(--brown)}
.btn--ghost:hover{background:var(--brown); color:#fff}
.on-dark .btn--ghost{border-color:rgba(237,231,224,.42); color:var(--on-dark)}
.on-dark .btn--ghost:hover{background:var(--on-dark); color:var(--brown-ink)}

.txtlink{
  font-family:var(--display); font-weight:600; font-size:.95rem;
  color:var(--brown); text-decoration:none; display:inline-flex; align-items:center; gap:9px;
  padding-bottom:3px; border-bottom:2px solid var(--lime); transition:.2s;
}
.txtlink:hover{gap:14px}
.on-dark .txtlink{color:#fff}

/* --- Header ---------------------------------------------------- */
header{
  position:sticky; top:0; z-index:80; background:rgba(250,250,248,.92);
  backdrop-filter:blur(14px); border-bottom:1px solid var(--line-2); transition:.25s;
}
header.scrolled{border-bottom-color:var(--line); box-shadow:0 1px 22px rgba(62,43,27,.07)}
.nav{display:flex; align-items:center; justify-content:space-between; gap:28px; height:82px; transition:height .25s; position:relative}
.nav > nav{margin-left:auto}
.nav-cta{margin-left:18px}
header.scrolled .nav{height:66px}
.brand{display:flex; align-items:center; text-decoration:none; flex:none}
.brand-logo{height:44px; width:auto; display:block; transition:height .25s}
header.scrolled .brand-logo{height:36px}
.brand-mark{width:34px; height:34px; flex:none}
.brand-txt{font-family:var(--display); font-weight:700; font-size:1.16rem; letter-spacing:-.02em; color:var(--brown); line-height:1}
.brand-sub{font-family:var(--mono); font-size:.575rem; letter-spacing:.16em; text-transform:uppercase; color:var(--blue); margin-top:3px}

.menu{display:flex; align-items:center; gap:4px; list-style:none; margin:0; padding:0}
.menu > li{position:relative}
.menu{gap:26px}
.menu > li > a{
  display:block; padding:10px 2px; text-decoration:none; font-size:.93rem; font-weight:600;
  font-family:var(--display); letter-spacing:.01em; color:var(--brown-2);
  position:relative; transition:color .2s;
}
.menu > li > a::after{
  content:""; position:absolute; left:0; bottom:4px; height:2.5px; width:100%;
  background:var(--lime); transform:scaleX(0); transform-origin:right;
  transition:transform .32s cubic-bezier(.2,.7,.2,1);
}
.menu > li > a:hover,.menu > li > a.active{color:var(--brown)}
.menu > li > a:hover::after,.menu > li > a.active::after{transform:scaleX(1); transform-origin:left}
.sub a{display:block; padding:11px 14px; text-decoration:none; font-size:.9rem; color:var(--brown-2); border-radius:var(--r); transition:.18s}
.has-sub > a::after{content:"+"; font-family:var(--mono); font-size:.72rem; margin-left:7px; color:var(--blue)}
.sub{
  position:absolute; top:calc(100% + 6px); right:0; left:auto; background:var(--paper);
  border:1px solid var(--line); border-radius:var(--r); padding:7px; list-style:none; margin:0;
  box-shadow:0 16px 44px rgba(62,43,27,.13);
  opacity:0; visibility:hidden; transform:translateY(-7px); transition:.2s;
}
.sub.mega{display:grid; grid-template-columns:1fr 1.15fr; padding:0; width:600px; overflow:hidden}
.mega-col{padding:14px 8px 16px}
.mega-col--b{border-left:1px solid var(--line); background:linear-gradient(180deg, rgba(113,145,168,.06), rgba(113,145,168,.02))}
.mega-h{font-family:var(--mono); font-size:.62rem; letter-spacing:.16em; text-transform:uppercase;
  color:var(--blue); padding:6px 16px 10px; display:flex; align-items:center; gap:8px}
.mega-h::before{content:""; width:12px; height:2.5px; background:var(--lime); flex:none}
.sub.mega a{display:flex; align-items:center; gap:10px; padding:10px 16px; font-size:.92rem;
  white-space:nowrap; border-left:2px solid transparent}
.sub.mega .mega-col--b a{font-size:.88rem; padding:8px 16px}
.pdot{width:7px; height:7px; border-radius:50%; flex:none}
.pdot--on{background:var(--lime)}
.pdot--off{border:1.6px solid var(--blue-2); background:transparent}
.mega-note{font-family:var(--mono); font-size:.6rem; letter-spacing:.08em; color:var(--muted);
  padding:12px 16px 4px; display:flex; align-items:center; gap:14px}
.mega-note i{font-style:normal; display:inline-flex; align-items:center; gap:6px}
.mega-set{display:none}
.mega-set.on{display:block}
.mega-col a.cur{border-left-color:var(--lime); background:var(--blue-pale); color:var(--brown)}
.has-sub:hover .sub,.has-sub:focus-within .sub{opacity:1; visibility:visible; transform:none}
.sub.mega a:hover{border-left-color:var(--lime); background:var(--blue-pale)}
.sub a{padding:11px 14px; font-size:.9rem; border-left:2px solid transparent}
.sub .sub2 a{padding:8px 14px 8px 30px; font-size:.83rem; color:var(--muted)}
.sub .sub2 a:hover{color:var(--brown)}
.soon{font-family:var(--mono); font-size:.56rem; letter-spacing:.1em; text-transform:uppercase;
  color:var(--blue); border:1px solid var(--blue-2); padding:2px 6px; border-radius:2px; margin-left:8px; vertical-align:1px}
.sub a:hover{border-left-color:var(--lime); background:var(--blue-pale)}
.nav-cta{display:flex; align-items:center; gap:14px}
.burger{display:none; background:none; border:0; padding:9px; cursor:pointer}
.burger span{display:block; width:23px; height:2px; background:var(--brown); margin:5px 0; transition:.25s}
.burger.open span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.burger.open span:nth-child(2){opacity:0}
.burger.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

@media(max-width:1024px){
  .menu,.nav-cta .btn{display:none}
  .burger{display:block}
  .mobile-menu{
    position:fixed; inset:82px 0 0; background:var(--brown-ink); z-index:70;
    padding:34px var(--gutter); overflow-y:auto;
    transform:translateY(-100%); transition:transform .34s cubic-bezier(.4,0,.2,1);
  }
  .mobile-menu.open{transform:none}
  .mobile-menu a{
    display:block; padding:15px 0; color:var(--on-dark); text-decoration:none;
    font-family:var(--display); font-size:1.5rem; font-weight:600;
    border-bottom:1px solid rgba(237,231,224,.14);
  }
  .mobile-menu .m-sub a{font-size:1.02rem; font-weight:400; padding-left:20px; color:var(--on-dark-muted); border-bottom-color:rgba(237,231,224,.07)}
  .mobile-menu .btn{margin-top:30px; width:100%; justify-content:center}
}

/* --- Hero ------------------------------------------------------ */
.hero{position:relative; overflow:hidden; padding-block:clamp(56px,7vw,96px) 0}
.hero::before{content:""; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(640px 460px at 76% 58%, rgba(113,145,168,.16), transparent 70%),
             radial-gradient(400px 300px at 12% 12%, rgba(169,204,62,.07), transparent 70%);}
.hero::after{content:""; position:absolute; inset:0; pointer-events:none;
  background-image:linear-gradient(rgba(62,43,27,.045) 1px, transparent 1px),
                   linear-gradient(90deg, rgba(62,43,27,.045) 1px, transparent 1px);
  background-size:46px 46px;
  -webkit-mask-image:radial-gradient(720px 560px at 74% 55%, #000, transparent 72%);
          mask-image:radial-gradient(720px 560px at 74% 55%, #000, transparent 72%);}
.hero .wrap{position:relative; z-index:1}
.track-svg{will-change:transform}
.track-fade{-webkit-mask-image:linear-gradient(to bottom, transparent 3%, #000 34%);
                    mask-image:linear-gradient(to bottom, transparent 3%, #000 34%)}
.hero-grid{display:grid; grid-template-columns:1.06fr .94fr; gap:clamp(30px,4vw,64px); align-items:center; min-height:min(74vh,660px)}
@media(max-width:920px){.hero-grid{grid-template-columns:1fr; min-height:0}}
.hero h1{margin-bottom:26px}
.hero h1 em{font-style:normal; color:var(--blue); display:block}
.hero-track{position:relative; align-self:stretch; display:flex; align-items:flex-end; justify-content:center; min-height:340px}
.hero-track svg{width:100%; max-width:520px; height:auto}
@media(max-width:920px){.hero-track{min-height:0; order:0; justify-content:center}
  .hero-track svg{max-width:320px}}

/* Kennwert-Leiste im Datenblatt-Stil */
.specbar{border-top:1px solid var(--line); border-bottom:1px solid var(--line); background:var(--paper)}
.specbar-in{display:grid; grid-template-columns:repeat(3,1fr)}
.spec{padding:26px 30px; border-left:1px solid var(--line-2); position:relative}
.spec .spec-v,.spec .spec-l{opacity:0; transform:translateY(12px); transition:opacity .6s ease, transform .6s cubic-bezier(.2,.7,.3,1)}
.spec.in .spec-v,.spec.in .spec-l{opacity:1; transform:none}
.spec:first-child{border-left:0; padding-left:0}
.spec-v{font-family:var(--display); font-size:clamp(1.5rem,2.4vw,2.05rem); font-weight:700; color:var(--brown); line-height:1; letter-spacing:-.03em}
.spec-l{font-family:var(--mono); font-size:.7rem; letter-spacing:.13em; text-transform:uppercase; color:var(--muted); margin-top:9px}
@media(max-width:760px){
  .specbar-in{grid-template-columns:1fr}
  .spec{border-left:0; border-top:1px solid var(--line-2); padding:20px 0}
  .spec:first-child{border-top:0}
}

/* --- Karten / Listen ------------------------------------------- */
.grid{display:grid; gap:clamp(16px,2vw,24px)}
.g2{grid-template-columns:repeat(2,1fr)}
.g3{grid-template-columns:repeat(3,1fr)}
.g4{grid-template-columns:repeat(4,1fr)}
@media(max-width:980px){.g3,.g4{grid-template-columns:repeat(2,1fr)}}
@media(max-width:660px){.g2,.g3,.g4{grid-template-columns:1fr}}

.card{background:var(--paper); border:1px solid var(--line); border-radius:var(--r); padding:clamp(24px,2.6vw,34px); transition:transform .35s cubic-bezier(.2,.7,.3,1), border-color .35s, box-shadow .35s; position:relative; overflow:hidden}
.card::before{content:""; position:absolute; left:0; top:0; height:3px; width:0; background:var(--lime); transition:width .5s cubic-bezier(.2,.7,.2,1)}
.card:hover{border-color:var(--blue); transform:translateY(-5px); box-shadow:0 16px 40px rgba(62,43,27,.09)}
.card:hover::before{width:100%}
.card .idx{font-family:var(--mono); font-size:.7rem; letter-spacing:.16em; color:var(--blue); display:block; margin-bottom:13px}
.on-dark .card{background:rgba(255,255,255,.045); border-color:rgba(237,231,224,.15)}
.on-dark .card:hover{border-color:var(--blue); background:rgba(255,255,255,.075)}
.card h4{margin-bottom:10px}
.card p{margin:0; font-size:.95rem; color:var(--muted)}
.on-dark .card p{color:var(--on-dark-muted)}
.card-ico{width:34px; height:34px; margin-bottom:20px; stroke:var(--blue); fill:none; stroke-width:1.5}

/* Problemliste – Schwellen-Rhythmus statt Bullets */
.slats{list-style:none; margin:0; padding:0; border-top:1px solid rgba(237,231,224,.18)}
.slats li{
  display:grid; grid-template-columns:auto 1fr; gap:22px; align-items:baseline;
  padding:22px 0; border-bottom:1px solid rgba(237,231,224,.18);
}
.slats .k{font-family:var(--mono); font-size:.74rem; letter-spacing:.12em; color:var(--blue); padding-top:4px}
.slats .t{font-family:var(--display); font-size:clamp(1.06rem,1.6vw,1.32rem); font-weight:500; color:#fff; letter-spacing:-.01em; line-height:1.32}
body:not(.dark) .slats{border-color:var(--line)}

/* Leistungs-Zeilen */
.stands{list-style:none; margin:0; padding:0}
.stands li{
  display:flex; gap:20px; align-items:flex-start; padding:19px 0; border-bottom:1px solid var(--line);
  font-family:var(--display); font-size:clamp(1.02rem,1.45vw,1.22rem); font-weight:500; color:var(--brown); letter-spacing:-.01em;
}
.stands li::before{content:""; width:11px; height:11px; background:var(--lime); flex:none; margin-top:9px}
.on-dark .stands li{color:#fff; border-color:rgba(237,231,224,.18)}

/* Produktkarten mit Bildfläche */
.pcard{display:block; text-decoration:none; background:var(--paper); border:1px solid var(--line); border-radius:var(--r); overflow:hidden; transition:.28s}
.pcard:hover{border-color:var(--blue); box-shadow:0 18px 44px rgba(62,43,27,.1)}
.pcard-img{aspect-ratio:4/3; background:var(--blue-pale); position:relative; overflow:hidden; display:flex; align-items:center; justify-content:center}
.pcard-img svg{width:78%; height:auto; opacity:.9; transition:transform .5s cubic-bezier(.2,.7,.3,1)}
.pcard:hover .pcard-img svg{transform:scale(1.05)}
.ph{position:absolute; top:11px; left:11px; font-family:var(--mono); font-size:.6rem; letter-spacing:.11em; text-transform:uppercase; color:var(--blue); background:rgba(255,255,255,.85); padding:4px 8px}
.pcard-body{padding:26px 26px 30px}
.pcard-body h3{margin-bottom:9px}
.pcard-body p{font-size:.94rem; color:var(--muted); margin-bottom:16px}
.pcard .go{font-family:var(--display); font-weight:600; font-size:.9rem; color:var(--brown); display:inline-flex; align-items:center; gap:8px; position:relative; padding-bottom:4px}
.pcard .go::after{content:""; position:absolute; left:0; bottom:0; height:2px; width:0; background:var(--lime); transition:width .3s}
.pcard:hover .go::after{width:100%}
.pcard:hover .go svg{transform:translateX(4px)}
.pcard .go svg{transition:transform .3s}

/* Faktenblöcke: ruhige Flächen, feiner grüner Tick */
.facts{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.facts li{display:grid;grid-template-columns:170px 1fr;gap:18px;align-items:start;
  background:rgba(113,145,168,.11); border:1px solid rgba(113,145,168,.28); border-radius:var(--r);
  padding:16px 19px; font-size:1rem; line-height:1.55;
  transition:background .25s, transform .25s, border-color .25s}
.facts li:hover{background:rgba(113,145,168,.18); border-color:var(--blue); transform:translateX(3px)}
.facts dt,.facts .lbl{font-family:var(--mono);font-size:.73rem;letter-spacing:.13em;text-transform:uppercase;
  color:var(--blue);padding-top:4px;font-weight:600;display:flex;align-items:center;gap:8px}
.facts dt::before,.facts .lbl::before{content:"";width:10px;height:2px;background:var(--lime);flex:none}
.on-dark .facts li{background:rgba(255,255,255,.06); border-color:rgba(237,231,224,.22)}
.on-dark .facts li:hover{background:rgba(255,255,255,.1); border-color:var(--blue)}
.on-dark .facts .lbl{color:var(--blue-2)}
@media(max-width:620px){.facts li{grid-template-columns:1fr;gap:8px}}

/* CTA-Band */
.cta-band{background:var(--brown); color:#fff; padding-block:clamp(58px,7vw,88px)}
.cta-band h2{color:#fff; margin-bottom:14px}
.cta-in{display:flex; align-items:center; justify-content:space-between; gap:34px; flex-wrap:wrap}

/* Footer */
footer{background:var(--brown-ink); color:var(--on-dark-muted); padding-top:clamp(56px,6vw,80px); font-size:.92rem}
.f-grid{display:grid; grid-template-columns:1.5fr 1fr 1fr 1.2fr; gap:44px; padding-bottom:48px}
@media(max-width:900px){.f-grid{grid-template-columns:1fr 1fr; gap:34px}}
@media(max-width:560px){.f-grid{grid-template-columns:1fr}}
footer h5{font-family:var(--mono); font-size:.7rem; letter-spacing:.16em; text-transform:uppercase; color:var(--blue); margin:0 0 18px; font-weight:500}
footer ul{list-style:none; margin:0; padding:0}
footer li{margin-bottom:11px}
footer a{text-decoration:none; transition:.18s}
footer a:hover{color:var(--lime)}
.f-brand .brand-txt{color:#fff}
.f-bottom{border-top:1px solid rgba(237,231,224,.13); padding:22px 0 26px; display:flex; justify-content:space-between; gap:20px; flex-wrap:wrap; font-size:.84rem}
.f-bottom nav{display:flex; gap:22px}

/* Seitenkopf für Unterseiten */
.phead{background:var(--bg); padding-block:clamp(58px,7vw,92px) clamp(48px,6vw,74px); position:relative; overflow:hidden;
  border-bottom:1px solid var(--line)}
.phead::before{content:""; position:absolute; inset:0; pointer-events:none;
  background-image:linear-gradient(rgba(62,43,27,.045) 1px, transparent 1px),
                   linear-gradient(90deg, rgba(62,43,27,.045) 1px, transparent 1px);
  background-size:46px 46px;
  -webkit-mask-image:radial-gradient(720px 480px at 30% 40%, #000, transparent 75%);
          mask-image:radial-gradient(720px 480px at 30% 40%, #000, transparent 75%)}
.phead .wrap{position:relative}
.phead h1{color:var(--brown); font-size:clamp(2.3rem,4.6vw,3.9rem); max-width:18ch}
.phead .lead{color:var(--brown-2); max-width:56ch; margin-top:20px}
.phead-deco{position:absolute; right:-40px; bottom:-70px; width:340px; opacity:.13; pointer-events:none}

/* Mobile-Feinschliff */
@media(max-width:560px){
  h1{font-size:clamp(2.05rem,10.5vw,2.7rem); overflow-wrap:break-word; hyphens:auto}
  h2{font-size:clamp(1.55rem,7.6vw,2rem); overflow-wrap:break-word; hyphens:auto}
  .eyebrow{font-size:.64rem; letter-spacing:.13em; flex-wrap:wrap; line-height:1.6}
  .lead{font-size:1.05rem}
  .hero{padding-block:34px 0}
  .hero-grid{gap:26px}
  .hero-track{order:0; min-height:0; margin-top:6px}
  .hero-track svg{max-width:270px}
  .specbar-in .spec{padding:16px 0}
  .spec-v{font-size:1.3rem}
  .ticker span{font-size:.68rem}
  .phead h1{font-size:clamp(1.9rem,9.5vw,2.4rem)}
  .probgrid{gap:18px}
  .facts li{padding:13px 14px; font-size:.95rem}
  .imgph{aspect-ratio:4/3}
  .flow3 .fsvg svg{max-width:210px}
}


/* ---------- Produktkarten (Karteikarten) ---------- */
.pgrid{display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(16px,2vw,24px); margin-top:clamp(34px,4vw,50px)}
@media(max-width:1000px){.pgrid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:640px){.pgrid{grid-template-columns:1fr}}

.pk{position:relative; display:block; text-decoration:none; border-radius:var(--r); overflow:hidden;
  background:var(--paper); border:1px solid var(--line); isolation:isolate;
  transition:transform .4s cubic-bezier(.2,.7,.3,1), box-shadow .4s, border-color .4s}
.pk:hover{transform:translateY(-6px); border-color:var(--blue); box-shadow:0 22px 50px rgba(62,43,27,.16)}
.pk-img{position:relative; aspect-ratio:4/3; overflow:hidden; background:var(--blue-pale)}
.pk-img .cimg{position:absolute; inset:0; width:100%; height:100%; display:block;
  transition:transform .7s cubic-bezier(.2,.7,.3,1)}
.pk:hover .pk-img .cimg{transform:scale(1.07)}
.pk-img::after{content:""; position:absolute; inset:0; background:linear-gradient(to top,
  rgba(44,30,19,.55) 0%, rgba(44,30,19,.12) 45%, transparent 70%); transition:opacity .4s}
.pk:hover .pk-img::after{opacity:.8}
.pk-tag{position:absolute; top:12px; left:12px; z-index:2; font-family:var(--mono); font-size:.6rem;
  letter-spacing:.12em; text-transform:uppercase; padding:5px 9px; border-radius:2px;
  background:rgba(255,255,255,.92); color:var(--blue); display:flex; align-items:center; gap:7px}
.pk-tag .d{width:7px; height:7px; border-radius:50%}
.pk-tag .d.on{background:var(--lime)}
.pk-tag .d.off{border:1.6px solid var(--blue-2)}
.pk-ph{position:absolute; bottom:12px; right:12px; z-index:2; font-family:var(--mono); font-size:.56rem;
  letter-spacing:.1em; text-transform:uppercase; color:rgba(255,255,255,.75)}
.pk-body{padding:22px 22px 24px; position:relative}
.pk-body::before{content:""; position:absolute; left:0; top:0; height:3px; width:0; background:var(--lime);
  transition:width .5s cubic-bezier(.2,.7,.2,1)}
.pk:hover .pk-body::before{width:100%}
.pk-body h3{font-size:clamp(1.06rem,1.4vw,1.22rem); margin-bottom:8px; line-height:1.22}
.pk-body p{font-size:.9rem; color:var(--muted); margin:0 0 16px; line-height:1.5}
.pk-go{font-family:var(--display); font-weight:600; font-size:.86rem; color:var(--brown);
  display:inline-flex; align-items:center; gap:8px}
.pk-go svg{transition:transform .3s}
.pk:hover .pk-go svg{transform:translateX(5px)}
.pk.rv{transform:translateY(24px)}
.pk.rv.in{transform:none}
.pk.rv.in:hover{transform:translateY(-6px)}

/* Zurück-Link auf Detailseiten */
.backlink{font-family:var(--mono); font-size:.72rem; letter-spacing:.12em; text-transform:uppercase;
  color:var(--blue); text-decoration:none; display:inline-flex; align-items:center; gap:9px; margin-bottom:26px}
.backlink:hover{color:var(--brown)}
.backlink svg{transition:transform .25s}
.backlink:hover svg{transform:translateX(-4px)}

/* Statusleiste auf Detailseiten */
.statusbar{display:inline-flex; align-items:center; gap:10px; font-family:var(--mono); font-size:.7rem;
  letter-spacing:.13em; text-transform:uppercase; padding:8px 14px; border-radius:2px;
  background:rgba(113,145,168,.13); color:var(--blue); margin-bottom:22px}
.statusbar .d{width:8px; height:8px; border-radius:50%}
.statusbar .d.on{background:var(--lime)}
.statusbar .d.off{border:1.8px solid var(--blue-2)}

/* Detail-Hero mit Motiv */
.dhero{border:1px solid var(--line); border-radius:var(--r); overflow:hidden; background:var(--blue-pale);
  position:relative; aspect-ratio:16/10}
.dhero .cimg{position:absolute; inset:0; width:100%; height:100%; display:block}
.dhero .pk-ph{color:var(--blue); background:rgba(255,255,255,.85); padding:4px 8px; border-radius:2px}


/* Produkte in Vorbereitung: sichtbar, aber nicht anklickbar */
.pk--soon{cursor:default}
.pk--soon:hover{transform:none; border-color:var(--line); box-shadow:none}
.pk--soon:hover .pk-img .cimg{transform:none}
.pk--soon .pk-body::before{display:none}
.pk--soon .pk-img{filter:saturate(.72)}
.pk--soon .pk-body h3{color:var(--brown-2)}
.mega-soon{display:flex; align-items:center; gap:10px; padding:8px 16px; font-size:.88rem;
  color:var(--muted); cursor:default; border-left:2px solid transparent}
.m-soon{display:block; padding:12px 0 12px 54px; font-size:.92rem; color:var(--on-dark-muted);
  border-bottom:1px solid rgba(237,231,224,.07)}

/* Motion */
.rv{opacity:0; transform:translateY(22px); transition:opacity .7s cubic-bezier(.2,.7,.3,1), transform .7s cubic-bezier(.2,.7,.3,1)}
.rv.in{opacity:1; transform:none}
.hrev{opacity:0; transform:translateY(34px); filter:blur(6px); transition:opacity .85s cubic-bezier(.2,.7,.2,1), transform .85s cubic-bezier(.2,.7,.2,1), filter .85s cubic-bezier(.2,.7,.2,1)}
.hrev.in{opacity:1; transform:none; filter:none}
.rule-rv .sleeper-rule{transform:scaleX(0); transform-origin:left; transition:transform 1.1s cubic-bezier(.2,.7,.2,1) .15s}
.rule-rv.in .sleeper-rule{transform:scaleX(1)}
@media(prefers-reduced-motion:reduce){
  *{animation:none!important; transition-duration:.01ms!important}
  .rv{opacity:1; transform:none}
  html{scroll-behavior:auto}
}

/* Problem-Raster (Einordnung) */
.probgrid{display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(14px,2vw,22px); margin-top:clamp(34px,4vw,52px)}
@media(max-width:980px){.probgrid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:600px){.probgrid{grid-template-columns:1fr}}
.prob{border-top:2px solid rgba(113,145,168,.5); padding-top:20px; transition:.3s}
.prob:hover{border-top-color:var(--lime); transform:translateY(-4px)}
.prob .k{font-family:var(--mono); font-size:.72rem; letter-spacing:.16em; color:var(--lime); display:block; margin-bottom:12px}
.prob .t{font-family:var(--display); font-weight:500; font-size:clamp(1rem,1.4vw,1.16rem); line-height:1.4; color:#fff; letter-spacing:-.01em}

/* Wirkungs-Kette (Lebenszyklus) */
.chain{display:grid; grid-template-columns:1fr auto 1fr auto 1fr auto 1.1fr; align-items:stretch; gap:0; margin-top:clamp(34px,4vw,50px)}
@media(max-width:980px){.chain{grid-template-columns:1fr; }}
.chain .cstep{background:var(--paper); border:1px solid var(--line); border-radius:var(--r); padding:22px 22px 24px;
  transition:.3s; position:relative; overflow:hidden}
.chain .cstep::before{content:""; position:absolute; left:0; top:0; height:3px; width:0; background:var(--lime);
  transition:width .5s cubic-bezier(.2,.7,.2,1)}
.chain .cstep:hover{border-color:var(--blue); transform:translateY(-4px)}
.chain .cstep:hover::before{width:100%}
.chain .cstep.final{background:var(--brown); border-color:var(--brown)}
.chain .cstep.final .ct{color:#fff}
.chain .cstep.final .cl{color:rgba(237,231,224,.6)}
.chain .cl{font-family:var(--mono); font-size:.68rem; letter-spacing:.14em; text-transform:uppercase; color:var(--blue); display:block; margin-bottom:10px}
.chain .ct{font-family:var(--display); font-weight:600; font-size:1.04rem; letter-spacing:-.01em; color:var(--brown); line-height:1.3}
.chain .carr{display:flex; align-items:center; padding:0 10px; color:var(--lime); font-family:var(--mono); font-size:1.2rem; font-weight:700;
  animation:carrPulse 3.2s ease-in-out infinite}
.chain .carr:nth-of-type(2){animation-delay:.4s}
.chain .carr:nth-of-type(4){animation-delay:.8s}
.chain .carr:nth-of-type(6){animation-delay:1.2s}
@keyframes carrPulse{0%,100%{opacity:.4}50%{opacity:.95}}
.chain .cstep.final{box-shadow:0 10px 30px rgba(62,43,27,.18)}
.chain .cstep.final .cl::before{content:""; display:inline-block; width:8px; height:8px; border-radius:50%; background:var(--lime); margin-right:8px;
  animation:dotBreath 3.2s ease-in-out infinite}
@keyframes dotBreath{0%,100%{opacity:.5}50%{opacity:1}}
.chain .cstep.rv{transform:translateY(18px)}
.chain .cstep.rv.in{transform:none}
@media(max-width:980px){.chain .carr{justify-content:center; padding:4px 0; transform:rotate(90deg)}}
@media(prefers-reduced-motion:reduce){.chain .carr,.chain .cstep.final .cl::before{animation:none}}

/* Smart-Steel-Fluss: drei Karten mit Pfeilen */
.flow3{display:grid; grid-template-columns:1fr auto 1fr auto 1fr; align-items:stretch; gap:0; margin-top:clamp(36px,5vw,56px)}
@media(max-width:980px){.flow3{grid-template-columns:1fr}}
.flow3 .fstep{display:flex; flex-direction:column}
.flow3 .fsvg{flex:1; display:flex; align-items:center; justify-content:center; padding:10px 6px 16px}
.flow3 .fsvg svg{width:100%; max-width:250px; height:auto}
.flow3 .fl{font-family:var(--mono); font-size:.78rem; letter-spacing:.12em; text-transform:uppercase; color:var(--blue); font-weight:600}
.flow3 .fs{font-size:.9rem; color:var(--muted); margin-top:6px}
.flow3 .carr{display:flex; align-items:center; padding:0 12px; color:var(--lime); font-family:var(--mono); font-size:1.2rem; font-weight:700;
  animation:carrPulse 3.2s ease-in-out infinite}
.flow3 .carr:nth-of-type(4){animation-delay:.5s}
@media(max-width:980px){.flow3 .carr{justify-content:center; padding:6px 0; transform:rotate(90deg)}}

/* Schema im Bildplatzhalter */
.imgph.schem{aspect-ratio:auto; padding:clamp(20px,3vw,34px)}
.imgph.schem svg{position:relative; width:100%; height:auto}

/* Bildplatzhalter */
.imgph{border:1.5px dashed var(--blue); border-radius:var(--r); background:var(--blue-pale);
  aspect-ratio:16/10; display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:10px; text-align:center; padding:24px; position:relative; overflow:hidden}
.imgph::before{content:""; position:absolute; inset:0;
  background-image:linear-gradient(rgba(113,145,168,.12) 1px, transparent 1px),
                   linear-gradient(90deg, rgba(113,145,168,.12) 1px, transparent 1px);
  background-size:32px 32px}
.imgph .tag{font-family:var(--mono); font-size:.64rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--blue); background:rgba(255,255,255,.9); padding:4px 9px; position:relative}
.imgph .cap{font-family:var(--mono); font-size:.72rem; color:var(--muted); max-width:34ch; position:relative; line-height:1.5}
.on-dark .imgph{background:rgba(255,255,255,.04); border-color:rgba(113,145,168,.55)}
.on-dark .imgph .tag{background:rgba(44,30,19,.85)}
.on-dark .imgph .cap{color:var(--on-dark-muted)}

/* Laufband */
.ticker{background:var(--brown); overflow:hidden; padding:15px 0; position:relative}
.ticker-in{display:flex; gap:0; width:max-content; animation:tick 30s linear infinite}
.ticker span{font-family:var(--mono); font-size:.76rem; letter-spacing:.24em; text-transform:uppercase; color:rgba(237,231,224,.85); padding:0 26px; white-space:nowrap}
.ticker b{color:var(--lime); font-weight:500; padding:0 4px}
@keyframes tick{to{transform:translateX(-50%)}}
@media(prefers-reduced-motion:reduce){.ticker-in{animation:none}}

/* Mobile-Menü: auf Desktop komplett aus dem Layout */
.mobile-menu{display:none}
@media(max-width:1024px){
  .mobile-menu{display:block}
}

/* Routing */
.page{display:none}
.page.active{display:block}
.note{font-family:var(--mono); font-size:.76rem; letter-spacing:.06em; color:var(--blue); background:var(--blue-pale); border-left:2px solid var(--lime); padding:11px 15px; display:inline-block}

/* Sprunglink für Tastatur und Screenreader */
.skiplink{position:absolute;left:-9999px;top:0;z-index:200;background:var(--brown);color:#fff;padding:12px 20px;font-family:var(--display);font-weight:600;border-radius:0 0 var(--r) 0}
.skiplink:focus{left:0}