/* KERNVARO — gemeinsame Gestaltung aller Seiten */

:root{
  --papier:#fbf8f3; --tinte:#14110f; --grau:#6f6a63;
  --zinn:#fb3613; --blau:#2238ff; --gruen:#0aa36a; --gelb:#ffb300; --flieder:#7b4cff;
  --mint:#dff3e9; --butter:#fff1cf; --linie:rgba(20,17,15,.16);
}
*{box-sizing:border-box}
html,body{margin:0}
html{scroll-behavior:smooth}
body{background:var(--papier);color:var(--tinte);line-height:1.5;
  font-family:"Archivo",system-ui,-apple-system,sans-serif;
  -webkit-font-smoothing:antialiased;overflow-x:hidden}
img{max-width:100%;display:block}
a{color:inherit}
.wrap{max-width:1360px;margin:0 auto;padding:0 34px;position:relative;z-index:3}
@media(max-width:700px){.wrap{padding:0 18px}}
.mono{font-family:"Roboto Mono",ui-monospace,monospace;font-size:11px;letter-spacing:.2em;
  text-transform:uppercase}
.rot{color:var(--zinn)}
:focus-visible{outline:3px solid var(--zinn);outline-offset:3px;border-radius:4px}
.nur-vorleser{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* Kopfzeile */
header{position:sticky;top:0;z-index:60;background:rgba(251,248,243,.88);
  backdrop-filter:blur(14px);border-bottom:1px solid rgba(20,17,15,.1)}
.kopf{display:flex;align-items:center;gap:26px;min-height:72px;padding:10px 0}
.marke img{height:38px;width:auto}
nav{margin-left:auto;display:flex;gap:22px;align-items:center}
nav a{text-decoration:none;font-size:14.5px;font-weight:600;opacity:.74}
nav a:hover,nav a[aria-current="page"]{opacity:1;color:var(--zinn)}
.ncta{background:var(--tinte);color:var(--papier)!important;padding:10px 18px;
  border-radius:999px;opacity:1}
.ncta:hover{background:var(--zinn);color:#fff!important}
@media(max-width:1040px){nav a:not(.ncta){display:none}.marke img{height:32px}}

/* Knöpfe */
.knoepfe{display:flex;gap:11px;flex-wrap:wrap;margin-top:30px}
.btn{text-decoration:none;font-weight:700;font-size:15px;padding:15px 28px;border-radius:999px;
  background:var(--zinn);color:#fff;border:2px solid var(--zinn);display:inline-block}
.btn:hover{background:var(--tinte);border-color:var(--tinte)}
.btn.leer{background:transparent;color:var(--tinte);border-color:var(--tinte)}
.btn.leer:hover{background:var(--tinte);color:var(--papier)}
.btn.klein{padding:11px 20px;font-size:14px}

/* Überschriften */
.gross{font-size:clamp(30px,5.4vw,76px);line-height:1.02;font-weight:900;letter-spacing:-.045em;
  margin:20px 0 0;max-width:19ch;text-wrap:balance}
.mittel{font-size:clamp(28px,4.2vw,52px);line-height:1.03;font-weight:900;letter-spacing:-.04em;
  margin:14px 0 0;max-width:22ch;text-wrap:balance}

/* Seitenkopf der Unterseiten */
.seitenkopf{padding:64px 0 54px;border-bottom:1px solid var(--linie)}
.seitenkopf p.vor{margin:20px 0 0;font-size:18px;color:#3a3530;max-width:58ch}

/* ---------- Neuigkeiten ---------- */
.news{padding:88px 0 0}
.newsliste{margin-top:38px;border-top:1px solid var(--linie)}
.newszeile{display:grid;grid-template-columns:86px 1fr 170px;gap:24px;align-items:center;
  border-bottom:1px solid var(--linie);padding:22px 0;text-decoration:none;
  transition:background .25s,padding-left .25s}
.newszeile:hover{background:rgba(251,54,19,.06);padding-left:14px}
.newsbild{width:72px;height:72px;border-radius:50%;overflow:hidden;background:#fff;
  border:1px solid var(--linie);flex:none}
.newsbild img{width:100%;height:100%;object-fit:cover}
.newstext h3{margin:0;font-size:clamp(19px,2.2vw,25px);font-weight:800;letter-spacing:-.025em;
  line-height:1.18}
.newstext p{margin:6px 0 0;color:#4a443e;font-size:15px;max-width:62ch}
.newsmeta{text-align:right;color:var(--grau)}
.newsmeta .marke-art{display:inline-block;margin-top:7px;font-size:11px;letter-spacing:.14em;
  text-transform:uppercase;font-family:"Roboto Mono",monospace;color:#fff;background:var(--f,var(--zinn));
  border-radius:999px;padding:3px 10px}
@media(max-width:820px){
  .newszeile{grid-template-columns:62px 1fr;gap:16px}
  .newsbild{width:56px;height:56px}
  .newsmeta{grid-column:2;text-align:left;margin-top:8px}
}

/* ---------- Zahlen ---------- */
.zband{margin-top:92px;background:var(--mint);padding:62px 0}
.zgrid{display:grid;grid-template-columns:repeat(4,1fr)}
.zz{padding:0 26px;border-right:1px solid rgba(20,17,15,.17)}
.zz:first-child{padding-left:0}.zz:last-child{border-right:0}
.zz b{display:block;font-size:clamp(42px,6vw,88px);font-weight:900;letter-spacing:-.055em;
  line-height:.9;font-variant-numeric:tabular-nums}
.zz span{display:block;margin-top:12px;color:#4b5a52}
@media(max-width:820px){.zgrid{grid-template-columns:repeat(2,1fr);gap:30px 0}
  .zz:nth-child(2n){border-right:0}.zz{padding-left:0}}

/* ---------- Produktband (läuft nach links) ---------- */
/* Dunkler Abschnitt: die App-Symbole sind farbig und dunkel, sie tragen
   auf Tinte deutlich besser als auf Weiß. Querformat: Symbol links,
   Text rechts. Die Produktfarbe --f kommt nur als Schimmer, Art-Zeile
   und Rahmen beim Überfahren vor. */
.band{background:var(--tinte);color:#fff;padding:60px 0 68px;overflow:hidden}
.band .kopfzeile{display:flex;align-items:baseline;gap:16px;padding-bottom:26px}
.band .kopfzeile .mono{color:rgba(255,255,255,.52)}
.spurrahmen{overflow:hidden;padding:6px 0 14px;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
.spur{display:flex;gap:14px;width:max-content;animation:laufen 60s linear infinite}
.spurrahmen:hover .spur{animation-play-state:paused}
@keyframes laufen{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.pkachel{width:336px;flex:none;position:relative;overflow:hidden;isolation:isolate;
  display:grid;grid-template-columns:64px 1fr;column-gap:18px;align-items:center;
  padding:16px 22px 16px 16px;border-radius:20px;text-decoration:none;color:#fff;
  background:linear-gradient(135deg,rgba(255,255,255,.085),rgba(255,255,255,.03));
  border:1px solid rgba(255,255,255,.11);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.07);
  --fh:color-mix(in srgb,var(--f) 72%,#fff);
  transition:border-color .3s,transform .3s,box-shadow .3s}
.pkachel::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:radial-gradient(150px 110px at 12% 0%,
    color-mix(in srgb,var(--fh) 34%,transparent),transparent 72%);
  transition:opacity .3s}
.pkachel:hover{border-color:color-mix(in srgb,var(--fh) 55%,transparent);
  transform:translateY(-2px);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.09),
    0 22px 40px -22px color-mix(in srgb,var(--fh) 55%,transparent)}
.pkachel .sym{grid-row:1/span 3;width:64px;height:64px;border-radius:15px;overflow:hidden;
  background:#1f1b18;border:1px solid rgba(255,255,255,.16);
  box-shadow:0 10px 22px -10px rgba(0,0,0,.75)}
.pkachel .sym img{width:100%;height:100%;object-fit:cover}
.pkachel .art{grid-row:1;grid-column:2;font-family:"Roboto Mono",monospace;font-size:9.5px;
  letter-spacing:.16em;text-transform:uppercase;color:var(--f);color:var(--fh);
  display:flex;align-items:center;gap:7px;margin-bottom:5px}
.pkachel .art::before{content:"";width:5px;height:5px;border-radius:50%;background:currentColor;flex:none}
.pkachel b{grid-row:2;grid-column:2;font-size:17px;font-weight:800;letter-spacing:-.02em;
  line-height:1.15;display:block}
.pkachel .was{grid-row:3;grid-column:2;margin-top:4px;font-size:12.5px;line-height:1.4;
  color:rgba(255,255,255,.6)}
@media(max-width:520px){
  .pkachel{width:296px;grid-template-columns:56px 1fr;column-gap:14px;padding:14px 18px 14px 14px}
  .pkachel .sym{width:56px;height:56px;border-radius:13px}
}

/* ---------- Produktraster ---------- */
.praster{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:40px}
@media(max-width:980px){.praster{grid-template-columns:repeat(2,1fr)}}
@media(max-width:620px){.praster{grid-template-columns:1fr}}
.pkarte{background:#fff;border:1px solid var(--linie);border-radius:20px;padding:26px;
  text-decoration:none;display:flex;flex-direction:column;gap:14px;min-height:230px}
.pkarte:hover{border-color:var(--f);box-shadow:0 22px 44px -22px rgba(20,17,15,.4)}
.pkarte .sym{width:66px;height:66px;border-radius:16px;overflow:hidden;border:1px solid var(--linie)}
.pkarte h3{margin:0;font-size:22px;font-weight:800;letter-spacing:-.025em}
.pkarte p{margin:0;color:#4a443e;font-size:15px}
.pkarte .fuss{margin-top:auto;display:flex;align-items:center;gap:10px;
  font-family:"Roboto Mono",monospace;font-size:10.5px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--f)}

/* ---------- Produktseite ---------- */
.pkopf{display:grid;grid-template-columns:120px 1fr;gap:28px;align-items:center}
@media(max-width:700px){.pkopf{grid-template-columns:84px 1fr;gap:18px}}
.pkopf .sym{width:120px;height:120px;border-radius:28px;overflow:hidden;border:1px solid var(--linie);
  box-shadow:0 20px 44px -20px rgba(20,17,15,.45)}
@media(max-width:700px){.pkopf .sym{width:84px;height:84px;border-radius:20px}}
.merkmale{display:grid;grid-template-columns:repeat(2,1fr);gap:0;margin-top:46px;
  border-top:1px solid var(--linie)}
@media(max-width:760px){.merkmale{grid-template-columns:1fr}}
.merkmal{border-bottom:1px solid var(--linie);padding:22px 26px 24px 0}
.merkmal h3{margin:0 0 6px;font-size:18px;font-weight:800;letter-spacing:-.02em}
.merkmal p{margin:0;color:#4a443e;font-size:15px}
.steckbrief{margin-top:48px;border:1px solid var(--linie);border-radius:20px;background:#fff;
  padding:8px 26px}
.steckbrief dl{margin:0;display:grid;grid-template-columns:200px 1fr}
@media(max-width:620px){.steckbrief dl{grid-template-columns:1fr}}
.steckbrief dt{padding:14px 0;color:var(--grau);font-family:"Roboto Mono",monospace;
  font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;
  border-bottom:1px solid var(--linie)}
.steckbrief dd{margin:0;padding:14px 0;border-bottom:1px solid var(--linie)}
.steckbrief dl>:nth-last-child(-n+2){border-bottom:0}

/* ---------- Werkbank ---------- */
.spalten{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:40px}
@media(max-width:980px){.spalten{grid-template-columns:1fr}}
.spalte{background:#fff;border:1px solid var(--linie);border-radius:20px;padding:22px}
.spalte>.mono{color:var(--f);display:block;margin-bottom:16px}
.posten{border-top:1px solid var(--linie);padding:16px 0}
.posten:first-of-type{border-top:0;padding-top:4px}
.posten h3{margin:0 0 5px;font-size:17px;font-weight:800;letter-spacing:-.02em}
.posten p{margin:0;color:#4a443e;font-size:14.5px}
.posten .wann{display:inline-block;margin-top:8px;font-family:"Roboto Mono",monospace;
  font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--grau)}

/* ---------- Blog ---------- */
.beitraege{margin-top:40px;border-top:1px solid var(--linie)}
.beitrag{display:grid;grid-template-columns:1fr 200px;gap:26px;align-items:baseline;
  border-bottom:1px solid var(--linie);padding:26px 0;text-decoration:none;
  transition:background .25s,padding-left .25s}
.beitrag:hover{background:rgba(251,54,19,.06);padding-left:14px}
.beitrag h3{margin:0;font-size:clamp(20px,2.6vw,30px);font-weight:800;letter-spacing:-.03em}
.beitrag p{margin:8px 0 0;color:#4a443e;font-size:15.5px;max-width:64ch}
.beitrag .wann{text-align:right;color:var(--grau)}
@media(max-width:760px){.beitrag{grid-template-columns:1fr}.beitrag .wann{text-align:left}}
.artikel{padding:10px 0 0}
.artikel p,.artikel ul,.artikel h2,.artikel blockquote{max-width:72ch}
.artikel h2{font-size:clamp(22px,2.8vw,30px);letter-spacing:-.03em;margin:44px 0 10px;font-weight:800}
.artikel p{font-size:17.5px;line-height:1.65;margin:16px 0 0;color:#2d2924}
.artikel ul{margin:16px 0 0;padding-left:22px;color:#2d2924;font-size:17px;line-height:1.6}
.artikel li{margin:7px 0}
.artikel blockquote{margin:26px 0;padding:4px 0 4px 22px;border-left:3px solid var(--zinn);
  font-size:19px;color:#2d2924}

/* ---------- Download ---------- */
.dliste{margin-top:40px;border-top:1px solid var(--linie)}
.dzeile{display:grid;grid-template-columns:76px 1fr 290px;gap:22px;align-items:center;
  border-bottom:1px solid var(--linie);padding:22px 0}
.dzeile .sym{width:64px;height:64px;border-radius:15px;overflow:hidden;border:1px solid var(--linie)}
.dzeile h3{margin:0;font-size:21px;font-weight:800;letter-spacing:-.02em}
.dzeile p{margin:5px 0 0;color:#4a443e;font-size:14.5px;max-width:56ch}
.dzeile .knoepfe{margin:0;justify-content:flex-end}
@media(max-width:900px){.dzeile{grid-template-columns:62px 1fr}
  .dzeile .knoepfe{grid-column:2;justify-content:flex-start;margin-top:12px}}
.kasten{margin-top:48px;background:var(--tinte);color:#e8e3dc;border-radius:22px;padding:34px}
.kasten h2{margin:0 0 10px;font-size:26px;letter-spacing:-.03em;font-weight:800;color:#fff}
.kasten p{margin:0;max-width:62ch;color:#bdb6ae}
.kasten code{display:block;margin-top:18px;background:#000;color:#9dff3d;padding:16px 18px;
  border-radius:12px;font-family:"Roboto Mono",monospace;font-size:13.5px;overflow-x:auto}

/* ---------- Abschluss ---------- */
.ende{background:var(--butter);padding:96px 0;margin-top:92px}
.ende .gross{max-width:17ch}
.ende .gross em{font-style:normal;color:var(--zinn)}
.leise{margin-top:44px;display:flex;gap:24px;flex-wrap:wrap;align-items:center}
.leise a{color:#5c564e;text-decoration:none;font-size:14.5px;
  border-bottom:1px solid rgba(20,17,15,.28);padding-bottom:3px}
.leise a:hover{color:var(--tinte);border-color:var(--zinn)}

/* ---------- Fußzeile ---------- */
footer{background:var(--tinte);color:#cfc9c1;padding:56px 0 40px}
.fgrid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:36px}
@media(max-width:920px){.fgrid{grid-template-columns:1fr 1fr}}
@media(max-width:620px){.fgrid{grid-template-columns:1fr;gap:28px}}
footer img{height:34px;width:auto}
footer p{margin:16px 0 0;max-width:38ch;font-size:14.5px}
footer h4{margin:0 0 12px;font-size:12px;letter-spacing:.2em;text-transform:uppercase;
  font-family:"Roboto Mono",monospace;color:var(--zinn);font-weight:500}
footer ul{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:8px}
footer a{color:#cfc9c1;text-decoration:none;font-size:14.5px}
footer a:hover{color:#fff}
.fuss{margin-top:44px;padding-top:22px;border-top:1px solid rgba(255,255,255,.14);
  display:flex;gap:20px;flex-wrap:wrap;font-size:13px;color:#8d8880}

@media (prefers-reduced-motion: reduce){
  *{animation:none!important;transition:none!important;scroll-behavior:auto!important}
}

/* Kopf des Produktbands (dunkler Abschnitt) */
.band .bandkopf{padding-bottom:26px}
.band .bandkopf .mono{color:var(--zinn)}
.band .bandkopf h2{margin:12px 0 0;font-size:clamp(26px,3.6vw,44px);letter-spacing:-.04em;
  font-weight:900;color:#fff;max-width:20ch}
.band .bandkopf .bandvor{margin:12px 0 0;color:#a9a39b;max-width:56ch;font-size:16px}

/* ---------- Newsletter ---------- */
.nlkasten{margin-top:10px;background:#fff;border:1px solid var(--linie);border-radius:22px;
  padding:34px;max-width:720px;box-shadow:0 18px 50px -34px rgba(20,17,15,.4)}
.nlmeldung{margin:0 0 22px;padding:15px 18px;border-radius:14px;font-size:15.5px;
  border-left:4px solid var(--gruen);background:var(--mint)}
.nlmeldung.schlecht{border-left-color:var(--zinn);background:#ffe9e4}
.nlkasten:has(.nlmeldung:only-child) .nlmeldung{margin-bottom:0}
.nlform label{display:block;font-family:"Roboto Mono",ui-monospace,monospace;font-size:11px;
  letter-spacing:.2em;text-transform:uppercase;color:var(--grau);margin-bottom:9px}
.nlzeile{display:flex;gap:10px;flex-wrap:wrap}
.nlzeile input{flex:1 1 240px;min-width:0;font:inherit;font-size:16px;padding:14px 17px;
  border:2px solid var(--linie);border-radius:999px;background:var(--papier);color:var(--tinte)}
.nlzeile input:focus{border-color:var(--tinte);outline:none;background:#fff}
.nlzeile .btn{border:2px solid var(--zinn);cursor:pointer;padding:14px 30px}
.nlzeile .btn:hover{background:var(--tinte);border-color:var(--tinte)}
.nlfalle{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.nlhaken{display:flex!important;gap:12px;margin-top:22px;align-items:flex-start;
  font-family:inherit!important;font-size:14.5px!important;letter-spacing:0!important;
  text-transform:none!important;color:var(--tinte)!important;line-height:1.5;cursor:pointer}
.nlhaken input{margin:2px 0 0;width:19px;height:19px;accent-color:var(--zinn);flex:0 0 auto}
.nlhaken a{color:var(--zinn)}
.nlklein{margin:20px 0 0;font-size:13.5px;color:var(--grau);max-width:58ch}
.nlfakten{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;margin-top:40px;
  max-width:980px}
@media(max-width:760px){.nlfakten{grid-template-columns:1fr;gap:18px}.nlkasten{padding:26px 22px}}
.nlfakten>div{border-top:2px solid var(--tinte);padding-top:14px}
.nlfakten p{margin:9px 0 0;font-size:14.5px;color:#4e4943}

/* Anmeldestreifen auf der Startseite */
.nlstreifen{background:var(--mint);padding:72px 0;margin-top:92px}
.nlstreifen .wrap{display:grid;grid-template-columns:1.05fr .95fr;gap:48px;align-items:center}
@media(max-width:860px){.nlstreifen .wrap{grid-template-columns:1fr;gap:28px}
  .nlstreifen{padding:56px 0}}
.nlstreifen h2{margin:12px 0 0;font-size:clamp(26px,3.4vw,40px);letter-spacing:-.04em;
  font-weight:900;max-width:22ch}
.nlstreifen h2 em{font-style:normal;color:var(--zinn)}
.nlstreifen .nlvor{margin:14px 0 0;color:#4e4943;max-width:50ch;font-size:16px}
.nlstreifen .nlkasten{margin-top:0;max-width:none}