/* FHZ Flachdach-Handel & Zubehör GmbH — Schichtbänder im Bauteilschnitt
   Alles lokal, keine externen Ressourcen. */

/* ---------- Schriften ---------- */
@font-face{font-family:"Oswald";src:url("schriften/oswald-400.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Oswald";src:url("schriften/oswald-700.woff2") format("woff2");font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:"Lato";src:url("schriften/lato-400.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Lato";src:url("schriften/lato-700.woff2") format("woff2");font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:"Roboto Mono";src:url("schriften/roboto-mono-400.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Roboto Mono";src:url("schriften/roboto-mono-700.woff2") format("woff2");font-weight:700;font-style:normal;font-display:swap}

/* ---------- Farben und Maße ---------- */
:root{
  --kies:#E4E2DC;
  --kies-hell:#EFEDE8;
  --kies-tief:#D5D2CA;
  --bitumen:#15171A;
  --bitumen-2:#22262B;
  --gruen:#6AAF23;
  --gruen-text:#3D6B12;
  --zink:#565B60;
  --linie:#15171A;
  --kante:3px;
  --breit:1180px;
  --schmal:820px;
  --raum:clamp(48px,7vw,96px);
  --rand:clamp(16px,5vw,48px);
}

/* ---------- Grundlagen ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{animation:none!important;transition:none!important}}
body{
  margin:0;background:var(--kies);color:var(--bitumen);
  font-family:"Lato",system-ui,-apple-system,"Segoe UI",Arial,sans-serif;
  font-size:clamp(16px,1rem + .15vw,18px);line-height:1.65;
}
img{max-width:100%;height:auto;display:block}
a{color:var(--gruen-text);text-underline-offset:.18em}
a:hover{color:var(--bitumen)}
:focus-visible{outline:3px solid var(--gruen);outline-offset:2px}
h1,h2,h3,h4{font-family:"Oswald",Impact,system-ui,sans-serif;font-weight:700;line-height:1.08;margin:0 0 .5em;text-transform:uppercase;letter-spacing:.02em}
h1{font-size:clamp(2.1rem,6.2vw,4.1rem);letter-spacing:.01em}
h2{font-size:clamp(1.6rem,3.6vw,2.6rem)}
h3{font-size:clamp(1.15rem,2vw,1.4rem);letter-spacing:.06em}
h4{font-size:1rem;letter-spacing:.08em}
p{margin:0 0 1em}
ul{margin:0 0 1em;padding-left:1.15em}
li{margin:.2em 0}
strong{font-weight:700}
.mono{font-family:"Roboto Mono",ui-monospace,SFMono-Regular,Menlo,monospace}
.visuell-versteckt{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.sprungmarke{position:absolute;left:-9999px;top:0;z-index:200;background:var(--bitumen);color:#fff;padding:14px 20px;font-family:"Oswald",sans-serif;text-transform:uppercase}
.sprungmarke:focus{left:0}

/* ---------- Kopfbereich ---------- */
.kopf{
  position:sticky;top:0;z-index:100;background:var(--bitumen);color:var(--kies-hell);
  border-bottom:var(--kante) solid var(--gruen);
}
.kopf-innen{max-width:var(--breit);margin:0 auto;padding:10px var(--rand);display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.marke{display:flex;align-items:center;gap:12px;text-decoration:none;color:inherit;min-height:44px}
.marke img{width:78px;height:35px;object-fit:contain}
.marke span{font-family:"Oswald",sans-serif;font-weight:700;font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;line-height:1.25;max-width:15ch}
.hauptnav{margin-left:auto}
.hauptnav ul{display:flex;flex-wrap:wrap;gap:2px;list-style:none;margin:0;padding:0}
.hauptnav a{
  display:flex;align-items:center;min-height:44px;padding:6px 12px;color:var(--kies-hell);
  text-decoration:none;font-family:"Oswald",sans-serif;font-size:.86rem;letter-spacing:.09em;text-transform:uppercase;
  border-bottom:var(--kante) solid transparent;
}
.hauptnav a:hover{color:#fff;border-bottom-color:var(--gruen)}
.hauptnav a[aria-current="page"]{color:var(--gruen);border-bottom-color:var(--gruen)}
.kopf-ruf{
  display:flex;align-items:center;min-height:44px;padding:6px 14px;background:var(--gruen);color:#0E1004;
  font-family:"Roboto Mono",monospace;font-weight:700;font-size:.86rem;text-decoration:none;letter-spacing:.02em;
}
.kopf-ruf:hover{background:#7CC72B;color:#0E1004}

/* Menüknopf — nur auf schmalen Bildschirmen und nur mit JavaScript sichtbar.
   Ohne JavaScript bleibt die Navigation als offene Schicht stehen. */
.nav-knopf{display:none}
.nav-balken{position:relative;display:block;width:20px;height:var(--kante);background:currentColor}
.nav-balken::before,.nav-balken::after{content:"";position:absolute;left:0;width:20px;height:var(--kante);background:currentColor}
.nav-balken::before{top:-7px}
.nav-balken::after{top:7px}

@media (max-width:960px){
  .kopf-innen{gap:10px}
  .marke{order:1;margin-right:auto}
  .kopf-ruf{order:2}
  .nav-knopf{order:3;margin-left:auto}
  .hauptnav{order:4;margin-left:0;flex-basis:100%;width:100%}

  /* Navigation als aufgeschlagener Schichtschnitt */
  .hauptnav{border-top:var(--kante) solid var(--gruen);margin-top:4px}
  .hauptnav ul{display:block;gap:0}
  .hauptnav li+li{border-top:1px solid rgba(228,226,220,.22)}
  .hauptnav a{
    min-height:50px;padding:8px 14px;font-size:.95rem;
    border-bottom:0;border-left:var(--kante) solid transparent;
  }
  .hauptnav a:hover{background:var(--bitumen-2);border-bottom-color:transparent;border-left-color:var(--gruen)}
  .hauptnav a[aria-current="page"]{border-bottom-color:transparent;border-left-color:var(--gruen)}

  .js-nav .nav-knopf{
    display:flex;align-items:center;gap:10px;min-height:44px;min-width:44px;padding:6px 12px;
    background:transparent;color:var(--kies-hell);border:var(--kante) solid var(--kies-hell);
    font-family:"Oswald",sans-serif;font-weight:700;font-size:.86rem;letter-spacing:.09em;
    text-transform:uppercase;cursor:pointer;
  }
  .js-nav .nav-knopf[aria-expanded="true"]{background:var(--gruen);border-color:var(--gruen);color:#0E1004}
  .js-nav .hauptnav{display:none}
  .js-nav .hauptnav.offen{display:block}
}

/* ---------- Schichten ---------- */
.schicht{position:relative;border-top:var(--kante) solid var(--linie);padding:calc(var(--raum) + 18px) 0 var(--raum)}
.schicht:first-of-type{border-top:0}
.innen{max-width:var(--breit);margin:0 auto;padding:0 var(--rand);position:relative}
.innen-schmal{max-width:var(--schmal)}

/* Verweisfahne an der Schichtkante */
.fahne{
  position:absolute;top:0;left:var(--rand);display:flex;align-items:stretch;
  font-family:"Roboto Mono",monospace;font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;
}
.fahne b{background:var(--gruen);color:#0E1004;padding:5px 9px;font-weight:700}
.fahne span{background:var(--bitumen);color:var(--kies-hell);padding:5px 12px;font-weight:400}

/* Materialschraffuren (rein CSS) */
.m-kies{
  background-color:var(--kies);
  background-image:
    radial-gradient(circle at 12% 30%,rgba(21,23,26,.16) 1.6px,transparent 1.7px),
    radial-gradient(circle at 63% 12%,rgba(21,23,26,.12) 2.2px,transparent 2.3px),
    radial-gradient(circle at 84% 71%,rgba(21,23,26,.14) 1.4px,transparent 1.5px),
    radial-gradient(circle at 33% 82%,rgba(21,23,26,.10) 2.6px,transparent 2.7px);
  background-size:37px 41px,53px 47px,29px 33px,61px 59px;
}
.m-bitumen{
  background-color:var(--bitumen);color:var(--kies-hell);
  background-image:repeating-linear-gradient(45deg,rgba(255,255,255,.055) 0 2px,transparent 2px 9px);
}
.m-bitumen h2,.m-bitumen h3,.m-bitumen h4{color:#fff}
.m-bitumen a{color:var(--gruen)}
.m-bitumen a:hover{color:#fff}
.m-vlies{
  background-color:var(--kies-hell);
  background-image:
    repeating-linear-gradient(45deg,rgba(21,23,26,.055) 0 1px,transparent 1px 8px),
    repeating-linear-gradient(-45deg,rgba(21,23,26,.055) 0 1px,transparent 1px 8px);
}
.m-eps{
  background-color:#F4F2ED;
  background-image:radial-gradient(circle,rgba(21,23,26,.13) 1.3px,transparent 1.4px);
  background-size:14px 14px;
}
.m-wolle{
  background-color:var(--kies-tief);
  background-image:repeating-linear-gradient(9deg,rgba(21,23,26,.10) 0 1px,transparent 1px 7px);
}
.m-beton{
  background-color:var(--bitumen-2);color:var(--kies-hell);
  background-image:
    repeating-linear-gradient(90deg,rgba(255,255,255,.05) 0 1px,transparent 1px 24px),
    repeating-linear-gradient(0deg,rgba(255,255,255,.05) 0 1px,transparent 1px 24px);
}
.m-beton h2,.m-beton h3{color:#fff}
.m-beton a{color:var(--gruen)}

/* ---------- Kopfschicht / Einstieg ---------- */
.einstieg{padding-top:calc(var(--raum) + 26px)}
.einstieg .zeile{font-family:"Roboto Mono",monospace;font-size:.76rem;letter-spacing:.2em;text-transform:uppercase;color:var(--zink);margin:0 0 18px}
.einstieg h1{max-width:16ch}
.einstieg .unter{font-size:clamp(1.05rem,2vw,1.3rem);max-width:46ch;color:var(--bitumen)}

/* Aktionen */
.aktionen{display:flex;flex-wrap:wrap;gap:12px;margin-top:26px}
.knopf{
  display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:12px 22px;
  background:var(--bitumen);color:#fff;text-decoration:none;
  font-family:"Oswald",sans-serif;font-size:.92rem;letter-spacing:.1em;text-transform:uppercase;
  border:var(--kante) solid var(--bitumen);
}
.knopf:hover{background:var(--gruen);border-color:var(--gruen);color:#0E1004}
.knopf-hell{background:transparent;color:var(--bitumen)}
.knopf-hell:hover{background:var(--bitumen);border-color:var(--bitumen);color:#fff}
.m-bitumen .knopf{background:var(--gruen);border-color:var(--gruen);color:#0E1004}
.m-bitumen .knopf:hover{background:#fff;border-color:#fff;color:var(--bitumen)}
.m-bitumen .knopf-hell{background:transparent;color:#fff;border-color:#fff}
.m-bitumen .knopf-hell:hover{background:#fff;color:var(--bitumen)}

/* ---------- Gezeichneter Dachaufbau (Navigationsschnitt) ---------- */
.aufbau{margin:44px 0 0;border:var(--kante) solid var(--bitumen);background:#fff}
.aufbau-titel{
  font-family:"Roboto Mono",monospace;font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;
  background:var(--bitumen);color:var(--kies-hell);padding:7px 12px;margin:0;
}
.aufbau ol{list-style:none;margin:0;padding:0;counter-reset:s}
.aufbau li{counter-increment:s;border-bottom:1px solid rgba(21,23,26,.35)}
.aufbau li:last-child{border-bottom:0}
.aufbau a{
  display:grid;grid-template-columns:52px 1fr auto;align-items:center;gap:12px;
  min-height:52px;padding:8px 12px;text-decoration:none;color:var(--bitumen);
}
.aufbau a::before{
  content:counter(s,decimal-leading-zero);font-family:"Roboto Mono",monospace;font-weight:700;font-size:.8rem;
  color:#fff;background:var(--bitumen);text-align:center;padding:6px 0;
}
.aufbau .name{font-family:"Oswald",sans-serif;text-transform:uppercase;letter-spacing:.07em;font-size:.98rem}
.aufbau .was{font-family:"Roboto Mono",monospace;font-size:.72rem;color:var(--zink);letter-spacing:.05em;text-align:right}
.aufbau a:hover{background:var(--gruen);color:#0E1004}
.aufbau a:hover::before{background:#0E1004}
.aufbau a:hover .was{color:#0E1004}
.aufbau li:nth-child(1) a{box-shadow:inset 5px 0 0 #9AA0A6}
.aufbau li:nth-child(2) a{box-shadow:inset 5px 0 0 #15171A}
.aufbau li:nth-child(3) a{box-shadow:inset 5px 0 0 #B9BDC2}
.aufbau li:nth-child(4) a{box-shadow:inset 5px 0 0 #E9862B}
.aufbau li:nth-child(5) a{box-shadow:inset 5px 0 0 #6AAF23}
.aufbau li:nth-child(6) a{box-shadow:inset 5px 0 0 #7A604A}

/* ---------- Zweispalter ---------- */
.paar{display:grid;gap:clamp(24px,4vw,56px);align-items:start}
@media(min-width:820px){.paar{grid-template-columns:1fr 1fr}.paar-schmal{grid-template-columns:minmax(0,1.35fr) minmax(0,1fr)}}

/* ---------- Kennzahlen ---------- */
.zahlen{display:grid;gap:var(--kante);background:var(--bitumen);border:var(--kante) solid var(--bitumen);margin:0;grid-template-columns:1fr}
@media(min-width:600px){.zahlen{grid-template-columns:1fr 1fr}}
@media(min-width:960px){.zahlen{grid-template-columns:repeat(4,1fr)}}
.zahlen>div{background:var(--kies-hell);padding:22px 18px}
.zahlen dt{font-family:"Roboto Mono",monospace;font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:var(--zink);margin:0 0 6px}
.zahlen dd{margin:0;font-family:"Oswald",sans-serif;font-weight:700;font-size:clamp(1.7rem,4vw,2.4rem);line-height:1}
.zahlen .einheit{font-size:.9rem;letter-spacing:.1em;display:block;margin-top:6px;font-family:"Roboto Mono",monospace;font-weight:400;color:var(--zink);text-transform:none}

/* ---------- Merkmale / Warum ---------- */
.merkmale{display:grid;gap:var(--kante);background:rgba(21,23,26,.35);border-top:1px solid rgba(21,23,26,.35);border-bottom:1px solid rgba(21,23,26,.35);grid-template-columns:1fr;margin:34px 0 0}
@media(min-width:700px){.merkmale{grid-template-columns:1fr 1fr}}
@media(min-width:1000px){.merkmale{grid-template-columns:repeat(3,1fr)}}
.merkmale>div{background:var(--kies-hell);padding:24px 22px}
.merkmale h3{margin-bottom:.35em;border-left:var(--kante) solid var(--gruen);padding-left:12px}
.merkmale p{margin:0;color:var(--zink)}

/* ---------- Leistungen (Schichtzeilen) ---------- */
.leistungen{list-style:none;margin:34px 0 0;padding:0;border-top:1px solid rgba(21,23,26,.35)}
.leistungen>li{border-bottom:1px solid rgba(21,23,26,.35)}
.leistungen a{display:grid;gap:6px 22px;padding:22px 0;text-decoration:none;color:inherit;align-items:start}
@media(min-width:760px){.leistungen a{grid-template-columns:56px minmax(0,15rem) minmax(0,1fr) auto}}
.leistungen .nr{font-family:"Roboto Mono",monospace;font-weight:700;font-size:.82rem;color:var(--gruen-text)}
.leistungen h3{margin:0;letter-spacing:.06em}
.leistungen p{margin:0;color:var(--zink)}
.leistungen .pfeil{font-family:"Roboto Mono",monospace;font-size:.78rem;letter-spacing:.12em;text-transform:uppercase;color:var(--gruen-text);white-space:nowrap}
.leistungen a:hover h3{color:var(--gruen-text)}
.leistungen a:hover .pfeil{color:var(--bitumen)}

/* ---------- Bildband ---------- */
.band{margin:0;position:relative}
.band img{width:100%;object-fit:cover;aspect-ratio:3/1;border-top:var(--kante) solid var(--bitumen);border-bottom:var(--kante) solid var(--bitumen)}
.band figcaption,.bildzeile{
  font-family:"Roboto Mono",monospace;font-size:.72rem;letter-spacing:.09em;color:var(--zink);
  padding:8px 0 0;border-top:1px solid rgba(21,23,26,.4);margin-top:10px;
}
.m-bitumen .band figcaption,.m-bitumen .bildzeile{color:#B7BCC0;border-top-color:rgba(255,255,255,.3)}

/* ---------- Galerie ---------- */
.galerie{list-style:none;margin:34px 0 0;padding:0;display:grid;gap:var(--kante);grid-template-columns:repeat(auto-fill,minmax(230px,1fr));background:rgba(21,23,26,.35);border:var(--kante) solid var(--bitumen)}
.galerie li{background:var(--kies-hell)}
.galerie figure{margin:0}
.galerie img{width:100%;aspect-ratio:4/3;object-fit:cover}
.galerie figcaption{font-family:"Roboto Mono",monospace;font-size:.71rem;line-height:1.5;letter-spacing:.04em;color:var(--zink);padding:10px 12px 14px;border-top:1px solid rgba(21,23,26,.35)}
.galerie .lfd{color:var(--gruen-text);font-weight:700;margin-right:.6em}

/* ---------- Lagerliste ---------- */
.gruppe{border-top:var(--kante) solid var(--bitumen);margin-top:38px;padding-top:16px}
.gruppe:first-of-type{margin-top:26px}
.gruppe-kopf{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap;margin-bottom:12px}
.gruppe-kopf .nr{font-family:"Roboto Mono",monospace;font-weight:700;font-size:.8rem;color:var(--gruen-text)}
.gruppe-kopf h3{margin:0}
.posten{list-style:none;margin:0;padding:0}
.posten li{display:grid;gap:2px 18px;padding:11px 0;border-bottom:1px solid rgba(21,23,26,.3)}
@media(min-width:720px){.posten li{grid-template-columns:minmax(0,1fr) auto;align-items:baseline}}
.posten .art{margin:0}
.posten .menge{font-family:"Roboto Mono",monospace;font-size:.82rem;color:var(--gruen-text);white-space:nowrap;font-weight:700}
.posten .zusatz{font-family:"Roboto Mono",monospace;font-size:.78rem;color:var(--zink)}

/* ---------- Herstellerraster ---------- */
.marken{list-style:none;margin:32px 0 0;padding:0;display:grid;gap:var(--kante);grid-template-columns:repeat(auto-fill,minmax(160px,1fr));background:rgba(21,23,26,.35);border:var(--kante) solid var(--bitumen)}
.marken li{background:#fff;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;padding:26px 18px;min-height:150px}
.marken img{max-height:52px;width:auto;max-width:100%;object-fit:contain}
.marken span{font-family:"Roboto Mono",monospace;font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;color:var(--zink);text-align:center}

/* ---------- Kontaktdaten ---------- */
.daten{display:grid;gap:var(--kante);grid-template-columns:1fr;background:rgba(21,23,26,.35);border:var(--kante) solid var(--bitumen);margin:30px 0 0}
@media(min-width:700px){.daten{grid-template-columns:1fr 1fr}}
.daten>div{background:var(--kies-hell);padding:22px}
.daten h3{margin-bottom:.4em;font-size:1rem;letter-spacing:.1em}
.daten p{margin:0 0 .3em}
.daten .mono{font-size:.92rem}
.daten a{font-weight:700}

/* Verladestatus */
.status{display:inline-flex;align-items:center;gap:9px;font-family:"Roboto Mono",monospace;font-size:.78rem;letter-spacing:.08em;text-transform:uppercase;margin-top:10px}
.status .punkt{width:11px;height:11px;background:var(--zink);flex:none}
.status[data-offen="ja"] .punkt{background:var(--gruen)}

/* ---------- Formular ---------- */
.formular{margin-top:30px;max-width:44rem}
.feld{margin-bottom:20px}
.feld label{display:block;font-family:"Oswald",sans-serif;text-transform:uppercase;letter-spacing:.09em;font-size:.85rem;margin-bottom:6px}
.feld input,.feld textarea{
  width:100%;padding:13px 14px;min-height:48px;background:#fff;color:var(--bitumen);
  border:2px solid var(--bitumen);border-radius:0;font-family:inherit;font-size:1rem;
}
.feld textarea{min-height:150px;resize:vertical}
.feld input:focus,.feld textarea:focus{outline:3px solid var(--gruen);outline-offset:1px}
.feld .hinweis{font-family:"Roboto Mono",monospace;font-size:.74rem;color:var(--zink);margin:6px 0 0}
.zustimmung{display:flex;gap:12px;align-items:flex-start;margin-bottom:22px}
.zustimmung input{width:24px;height:24px;min-height:24px;flex:none;margin-top:3px;accent-color:var(--gruen)}
.zustimmung label{font-size:.94rem;line-height:1.55}
.dsgvo-kasten{border-left:var(--kante) solid var(--gruen);padding:14px 0 14px 18px;margin:24px 0;font-size:.94rem;color:var(--zink)}

/* ---------- Karte (Zwei-Klick) ---------- */
.karte{border:var(--kante) solid var(--bitumen);margin-top:30px;background:var(--kies-hell)}
.karte-kopf{background:var(--bitumen);color:var(--kies-hell);padding:9px 14px;font-family:"Roboto Mono",monospace;font-size:.72rem;letter-spacing:.14em;text-transform:uppercase}
.karte-inhalt{padding:22px}
.lageplan{display:block;width:100%;height:auto;background:#fff;border:1px solid rgba(21,23,26,.35)}

/* ---------- Rechtstexte ---------- */
.rechtstext h2{margin-top:1.9em;font-size:clamp(1.25rem,2.4vw,1.7rem)}
.rechtstext h3{margin-top:1.6em}
.rechtstext dl{margin:0 0 1.4em}
.rechtstext dt{font-family:"Roboto Mono",monospace;font-size:.76rem;letter-spacing:.1em;text-transform:uppercase;color:var(--zink);margin-top:.9em}
.rechtstext dd{margin:.15em 0 0}

/* ---------- Fußbereich ---------- */
.fuss{background:var(--bitumen);color:var(--kies-hell);border-top:var(--kante) solid var(--gruen);padding:var(--raum) 0 34px}
.fuss h2{color:#fff}
.fuss-raster{display:grid;gap:32px;grid-template-columns:1fr}
@media(min-width:760px){.fuss-raster{grid-template-columns:1.4fr 1fr 1fr}}
.fuss h3{font-size:.9rem;letter-spacing:.13em;color:#fff;margin-bottom:.9em}
.fuss p{color:#C3C7CB;margin:0 0 .5em}
.fuss ul{list-style:none;margin:0;padding:0}
.fuss li{margin:0 0 2px}
.fuss a{color:var(--kies-hell);text-decoration:none;display:inline-flex;align-items:center;min-height:34px}
.fuss a:hover{color:var(--gruen);text-decoration:underline}
.fuss .mono{font-size:.86rem;color:#C3C7CB}
.fuss-schluss{margin-top:36px;padding-top:18px;border-top:1px solid rgba(255,255,255,.22);display:flex;flex-wrap:wrap;gap:8px 24px;align-items:center;font-family:"Roboto Mono",monospace;font-size:.74rem;color:#A6ABB0;letter-spacing:.05em}
.fuss-schluss a{font-size:.74rem;color:#C3C7CB}

/* ---------- Brotkrumen ---------- */
.krumen{font-family:"Roboto Mono",monospace;font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;color:var(--zink);margin:0 0 14px}
.krumen ol{list-style:none;display:flex;flex-wrap:wrap;gap:8px;margin:0;padding:0}
.krumen li::after{content:"›";margin-left:8px;color:var(--zink)}
.krumen li:last-child::after{content:""}
.krumen a{color:var(--zink)}
.krumen a:hover{color:var(--bitumen)}

@media print{.kopf,.hauptnav,.aktionen{display:none}body{background:#fff}}