/* ---------- 0 SCHRIFT ----------
   Inter als variable Schrift (400 bis 600) vom eigenen Server, lateinischer
   Zeichenvorrat in zwei Teilen. Keine Verbindung zu Google beim Seitenaufruf.
   Lizenz: SIL Open Font License, assets/fonts/LICENSE.txt. */
@font-face{font-family:'Inter';font-style:normal;font-weight:400 600;font-display:swap;src:url('../fonts/inter-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Inter';font-style:normal;font-weight:400 600;font-display:swap;src:url('../fonts/inter-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}

/* ===========================================================================
   BRAND PALACE — Website (Marketing-Seiten)

   Leitidee: der Aufbau von apple.com mit unseren Farben. Konkret heißt das:
   - Alles steht mittig: Überschrift, Vorspann, Aktionen, Gegenstand.
   - Die Seite besteht aus Tafeln (panel) und Kacheln (kachel), nicht aus
     Spalten. Kacheln haben Radius und stehen mit 12 px Fuge nebeneinander.
   - Eine einzige Schrift: Inter. Überschriften groß, halbfett, eng gesetzt.
     Keine Serife.
   - Wenige Grade, wenige Abstände, viel Ruhe zwischen den Tafeln.
   - Ein Gegenstand pro Tafel, groß und mittig.

   Farben bleiben: Schiefer, Taupe, Champagner, Elfenbein, Nebel.

   Regeln, die nicht verhandelbar sind:
   - Der Grundzustand jedes Elements ist vollständig sichtbar. Ohne
     JavaScript steht die ganze Seite.
   - Bewegung nur im Block ganz unten: hinter html.js, nur transform und
     opacity, immer mit animation-fill-mode both, komplett innerhalb von
     @media (prefers-reduced-motion: no-preference).
   - Kontrast mindestens AA. Taupe und Champagner sind Flächen, keine
     Textfarben auf hellem Grund.

   Diese Datei gilt nur für die zwölf öffentlichen Seiten. Das Backend nutzt
   weiterhin app.css und styles.css.
   =========================================================================== */

/* ---------- 1 TOKEN ---------- */
:root{
  /* Linien in Formen. Gemessen auf Elfenbein: .32 ergab 1,80:1 und fiel
     durch, .60 ergibt 3,43:1. Zwei Staerken, beide ueber 3:1. */
  --lese-recht:660px;   /* rund 80 Zeichen je Zeile in Inter 17 px */
  --z-linie:rgba(47,58,68,.60);
  --z-weg:#2F3A44;
  --slate:#2F3A44;
  --taupe:#A99B88;
  --champagne:#CBBBA3;
  --ivory:#F6F4F1;
  --mist:#D9D4CE;
  --white:#FFFFFF;

  --ink:#2F3A44;
  --ink-2:#5C6873;                     /* 5,2:1 auf Elfenbein */
  /* Auf Taupe reicht Schiefer nicht (4,27:1). Dieser Ton ist die dunklere
     Schwester derselben Farbe und erreicht 4,72:1. */
  --ink-taupe:#2A333C;
  --on-dark:#F6F4F1;
  --on-dark-2:rgba(246,244,241,.72);
  --line:rgba(47,58,68,.14);
  --line-dark:rgba(246,244,241,.18);

  /* Maße. Der Textsatz ist schmal, die Kacheln sind breit. */
  --nav-h:52px;
  --lese:800px;
  --breit:1240px;
  --gutter:clamp(20px,4vw,44px);
  --fuge:12px;
  --radius:24px;
  --radius-gross:32px;

  /* Abstandskurve */
  --takt:clamp(48px,2.5rem + 3.6vw,110px);
  --r1:8px; --r2:16px; --r3:24px; --r4:40px;
  --panel-pad:calc(var(--takt) * 1.15);

  /* Schrift. Eine Familie, wenige Grade, halbfett und eng. */
  --t-hero:clamp(40px,2rem + 4.4vw,84px);
  --t-h1:clamp(34px,1.7rem + 2.6vw,56px);
  --t-h2:clamp(28px,1.5rem + 1.7vw,44px);
  --t-h3:clamp(21px,1.15rem + .6vw,28px);
  --t-lead:clamp(19px,1.05rem + .5vw,24px);
  --t-body:17px;
  --t-klein:14px;

  --ease:cubic-bezier(.32,.08,.24,1);
  --d-hover:240ms;
}

/* ---------- 2 RESET UND BASIS ---------- */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-padding-top:calc(var(--nav-h) + 20px)}
body{
  font-family:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif;
  font-weight:400;font-size:var(--t-body);line-height:1.5;
  color:var(--ink);background:var(--ivory);
  -webkit-font-smoothing:antialiased;font-synthesis:none;
}
img,svg{display:block;max-width:100%}
[hidden]{display:none!important}
a{color:inherit;text-decoration:none}
ul{list-style:none}
table{border-collapse:collapse;width:100%}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
input,select,textarea{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--slate);outline-offset:3px;border-radius:4px}
.auf-dunkel :focus-visible{outline-color:var(--champagne)}

.skip{position:absolute;left:-9999px;top:0;z-index:200;background:var(--slate);color:var(--on-dark);
  padding:12px 20px;font-size:15px;border-radius:0 0 var(--radius) 0}
.skip:focus{left:0}

/* Überschriften: groß, halbfett, eng. Je größer der Grad, desto enger. */
h1,h2,h3{font-weight:600;letter-spacing:-.021em;line-height:1.08}
h1{font-size:var(--t-h1)}
h2{font-size:var(--t-h2)}
h3{font-size:var(--t-h3);letter-spacing:-.014em;line-height:1.2}
.hero-h1{font-size:var(--t-hero);letter-spacing:-.028em;line-height:1.04}
strong{font-weight:600}

/* ---------- 2b CHINESISCH ---------- */
/* Die chinesischen Seiten (zh/) setzen Han-Zeichen aus den Systemschriften:
   PingFang auf Apple, YaHei auf Windows, Noto auf Android. Inter bleibt für
   Ziffern und lateinische Wörter. Han-Zeichen brauchen mehr Zeilenabstand
   und vertragen keine negative Laufweite. */
html[lang="zh-Hans"] body,html[lang="zh-Hans"] .an-text,html[lang="zh-Hans"] .an-sub,html[lang="zh-Hans"] .an-weg-text{
  font-family:'Inter','PingFang SC','Hiragino Sans GB','Microsoft YaHei','Noto Sans CJK SC','Noto Sans SC',system-ui,-apple-system,sans-serif}
html[lang="zh-Hans"] body{line-height:1.7}
html[lang="zh-Hans"] h1,html[lang="zh-Hans"] h2,html[lang="zh-Hans"] h3,html[lang="zh-Hans"] .hero-h1,
html[lang="zh-Hans"] .liste-titel,html[lang="zh-Hans"] .frage,html[lang="zh-Hans"] .schluss-text,
html[lang="zh-Hans"] .zahl-gross,html[lang="zh-Hans"] .an-text{letter-spacing:0}
html[lang="zh-Hans"] h1,html[lang="zh-Hans"] h2{line-height:1.2}
html[lang="zh-Hans"] .hero-h1{line-height:1.16}
html[lang="zh-Hans"] .lead{line-height:1.55}
html[lang="zh-Hans"] .schritt h3{hyphens:none;overflow-wrap:normal}
.fuss-hinweis{margin-top:14px;font-size:13px;color:var(--ink-2)}

/* ---------- 3 TAFELN UND KACHELN ---------- */
/* Eine Tafel ist ein voller Streifen. Ihr Inhalt steht mittig und schmal. */
.panel{padding-block:var(--panel-pad);text-align:center}
.panel-eng{max-width:calc(var(--lese) + 2 * var(--gutter));margin-inline:auto;padding-inline:var(--gutter)}
.panel-breit{max-width:calc(var(--breit) + 2 * var(--gutter));margin-inline:auto;padding-inline:var(--gutter)}
.panel-hell{background:var(--ivory)}
.panel-weiss{background:var(--white)}
.panel-dunkel{background:var(--slate);color:var(--on-dark)}
.panel-taupe{background:var(--taupe);color:var(--ink-taupe)}
.panel-schmal{padding-block:calc(var(--panel-pad) * .62)}

.augenbraue{font-size:var(--t-klein);font-weight:600;color:var(--ink-2);margin-bottom:var(--r2)}
.auf-dunkel .augenbraue{color:var(--champagne)}
.lead{font-size:var(--t-lead);line-height:1.4;font-weight:400;max-width:34ch;
  margin-inline:auto;margin-top:var(--r3)}
.fliess{font-size:var(--t-body);line-height:1.55;color:var(--ink-2);max-width:60ch;
  margin-inline:auto;margin-top:var(--r3)}
.auf-dunkel .fliess{color:var(--on-dark-2)}
.fliess + .fliess{margin-top:var(--r2)}
.klein{font-size:var(--t-klein);line-height:1.5;color:var(--ink-2)}
.auf-dunkel .klein{color:var(--on-dark-2)}
.marke-wort{font-size:12px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;white-space:nowrap}

/* Kacheln: kleine Fuge, großer Radius, Inhalt oben mittig. */
.kacheln{display:grid;grid-template-columns:1fr;gap:var(--fuge);margin-top:var(--takt)}
/* Die Kachel traegt kein Bild. Die fuenf Toene Weiss, Nebel, Taupe, Champagner
   und Schiefer unterscheiden die fuenf Felder, die Stufenmarke steht oben. */
.kachel{position:relative;display:flex;flex-direction:column;align-items:center;
  text-align:center;padding:var(--r4) var(--r3);border-radius:var(--radius-gross);
  background:var(--white);overflow:hidden;min-height:300px}
.kachel-dunkel{background:var(--slate);color:var(--on-dark)}
.kachel-taupe{background:var(--taupe);color:var(--ink-taupe)}
.kachel-nebel{background:var(--mist)}
.kachel-champagner{background:var(--champagne);color:var(--ink)}
.kachel h3{margin-bottom:var(--r2);max-width:16ch}
.kachel-text{font-size:var(--t-body);line-height:1.45;color:var(--ink-2);max-width:30ch}
.kachel-dunkel .kachel-text{color:var(--on-dark-2)}
.kachel-taupe .kachel-text,.panel-taupe .klein{color:var(--ink-taupe)}
/* Auf Nebel ist der Sekundaerton mit 3,87:1 zu schwach: dort volle Farbe. */
.kachel-nebel .kachel-text,.kachel-nebel .kachel-nr,.kachel-champagner .kachel-text,.kachel-champagner .kachel-nr{color:var(--ink)}
.kachel .aktionen{margin-top:var(--r3)}
.kachel-nr{font-size:var(--t-klein);font-weight:600;color:var(--ink-2);margin-bottom:var(--r1)}
.kachel-dunkel .kachel-nr{color:var(--champagne)}

/* ---------- 4 KNÖPFE UND LINKS ---------- */
.aktionen{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;
  gap:var(--r2) var(--r3);margin-top:var(--r4)}
.btn{display:inline-block;padding:12px 22px;font-size:var(--t-body);font-weight:400;
  border-radius:980px;border:1px solid var(--slate);line-height:1.2}
.btn-voll{background:var(--slate);color:var(--on-dark);border-color:var(--slate)}
.auf-dunkel .btn{border-color:var(--champagne);color:var(--on-dark)}
.auf-dunkel .btn-voll{background:var(--champagne);color:var(--slate);border-color:var(--champagne)}
.panel-taupe .btn,.kachel-taupe .btn{border-color:var(--ink-taupe);color:var(--ink-taupe)}
.panel-taupe .btn-voll,.kachel-taupe .btn-voll{background:var(--slate);color:var(--ivory)}

/* Textlink mit Winkel, wie „Mehr erfahren ›". */
.link{display:inline-block;font-size:var(--t-body);line-height:1.2}
.link::after{content:'\203A';margin-left:.35em;display:inline-block}
.auf-dunkel .link{color:var(--champagne)}
.kachel-taupe .link,.panel-taupe .link{color:var(--ink-taupe)}

/* ---------- 5 KENNZAHLEN ---------- */
/* Eine einzige Zahl, so gross wie eine Ueberschrift. Untergrenze 44 px, damit
   5.000 m² auch bei 320 px Fensterbreite in eine Zeile passt. */
.zahl{margin-top:var(--takt)}
.zahl-nach{max-width:52ch;margin:var(--r3) auto 0}
.zahl-gross{font-size:clamp(44px,2rem + 5.2vw,132px);font-weight:600;letter-spacing:-.035em;
  line-height:1;font-variant-numeric:lining-nums tabular-nums}
.zahl-wort{margin-top:var(--r2);font-size:var(--t-lead);line-height:1.4;color:var(--ink-2);
  max-width:26ch;margin-inline:auto}
.auf-dunkel .zahl-wort{color:var(--on-dark-2)}

/* ---------- 6 SCHRITTE ---------- */
.schritte-reihe{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--r4);margin-top:var(--takt);
  counter-reset:s;text-align:left}
/* minmax(0,1fr): ein langes Wort wie „Informationsmemorandum" zieht sonst seine
   Spalte auf und die Nachbarn werden schmal. Titel dürfen sich trennen. */
.schritt{min-width:0}
.schritt h3{overflow-wrap:anywhere}:lang(de) .schritt h3{-webkit-hyphens:auto;hyphens:auto}
.schritt p{overflow-wrap:anywhere}
.schritt{counter-increment:s;padding-top:var(--r3);border-top:1px solid var(--line)}
.auf-dunkel .schritt{border-top-color:var(--line-dark)}
.schritt::before{content:counter(s,decimal-leading-zero);display:block;font-size:var(--t-klein);
  font-weight:600;color:var(--ink-2);margin-bottom:var(--r2)}
.auf-dunkel .schritt::before{color:var(--champagne)}
.schritt h3{margin-bottom:var(--r1)}
.schritt p{font-size:var(--t-body);line-height:1.45;color:var(--ink-2)}
.auf-dunkel .schritt p{color:var(--on-dark-2)}

/* ---------- 7 LISTEN ---------- */
.liste{max-width:calc(var(--lese) + 2 * var(--gutter));margin:var(--takt) auto 0;
  padding-inline:var(--gutter);text-align:left}
.liste-zeile{display:grid;grid-template-columns:1fr;gap:var(--r1);
  padding:var(--r3) 0;border-top:1px solid var(--line)}
.liste-zeile:last-child{border-bottom:1px solid var(--line)}
.auf-dunkel .liste-zeile{border-top-color:var(--line-dark)}
.auf-dunkel .liste-zeile:last-child{border-bottom-color:var(--line-dark)}
.liste-titel{font-size:var(--t-h3);font-weight:600;letter-spacing:-.014em;line-height:1.25}
.liste-text{font-size:var(--t-body);line-height:1.5;color:var(--ink-2)}
.auf-dunkel .liste-text{color:var(--on-dark-2)}
.fragen{counter-reset:f;max-width:calc(var(--lese) + 2 * var(--gutter));margin:var(--takt) auto 0;
  padding-inline:var(--gutter);text-align:left}
.frage{font-size:var(--t-h3);font-weight:600;letter-spacing:-.014em;line-height:1.3;
  padding:var(--r3) 0;border-top:1px solid var(--line);display:flex;gap:var(--r3)}
.frage::before{content:counter(f,upper-roman);counter-increment:f;flex:none;
  font-size:var(--t-klein);font-weight:600;color:var(--ink-2);padding-top:.45em;min-width:2.4em}
.fragen .frage:last-child{border-bottom:1px solid var(--line)}

/* ---------- 8 TAFEL (Kanäle, Modelle) ---------- */
.rollbar{margin-top:var(--takt);overflow-x:auto;-webkit-overflow-scrolling:touch;
  max-width:calc(var(--breit) + 2 * var(--gutter));margin-inline:auto;padding-inline:var(--gutter)}
@media (min-width:700px){.rollbar .tafel{min-width:600px}}
/* Unter 700 px stapelt die Tafel wie die Gegenueberstellung: jede Zeile ein
   Block, jede Zelle mit ihrem Spaltenkopf davor (data-l). Nichts bleibt
   verborgen, nichts muss seitlich geschoben werden. */
@media (max-width:699.98px){
  .rollbar{overflow:visible}
  .tafel,.tafel tbody,.tafel tr{display:block;width:100%}
  .tafel thead{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
  .tafel tr{padding:var(--r2) 0;border-top:1px solid var(--line)}
  .tafel tr:last-child{border-bottom:1px solid var(--line)}
  .tafel th[scope='row']{display:block;padding:6px 0 4px;border:0;font-size:var(--t-body)}
  .tafel td{display:grid;grid-template-columns:7.5rem 1fr;gap:var(--r2);padding:6px 0;border:0}
  .tafel td::before{content:attr(data-l);font-size:var(--t-klein);font-weight:600;color:var(--ink-2)}
  .tafel td[data-l='']::before{content:none}
  .tafel td[data-l='']{grid-template-columns:1fr}
  .tafel caption{display:block;padding-top:var(--r2)}
}
.tafel{font-size:var(--t-body);text-align:left}
.tafel th{text-align:left;font-size:var(--t-klein);font-weight:600;color:var(--ink-2);
  padding:0 var(--r3) var(--r2) 0;border-bottom:1px solid var(--line)}
.tafel td,.tafel th[scope='row']{padding:var(--r3) var(--r3) var(--r3) 0;
  border-bottom:1px solid var(--line);vertical-align:top;line-height:1.5}
.tafel th[scope='row'],.tafel td:first-child{font-weight:600;color:var(--ink)}
.tafel caption{caption-side:bottom;text-align:left;font-size:var(--t-klein);color:var(--ink-2);
  padding-top:var(--r2)}

/* ---------- 9 GEGENÜBERSTELLUNG ---------- */
.gegen{display:grid;grid-template-columns:1fr;gap:0;margin:var(--takt) auto 0;text-align:left;
  max-width:calc(var(--lese) + 2 * var(--gutter));padding-inline:var(--gutter)}
.gegen-kopf{display:none}
.gegen-zeile{line-height:1.5}
.gegen-zeile::before{content:attr(data-l);display:block;font-size:var(--t-klein);font-weight:600;
  color:var(--ink-2);margin-bottom:var(--r1)}
.g-a{padding:var(--r3) 0 var(--r2);border-top:1px solid var(--line);color:var(--ink-2)}
.g-b{padding:0 0 var(--r3)}

/* ---------- 10 ZEICHNUNG UND FORMEN ----------
   Sechs Grenzsaetze, damit aus drei Formen nicht wieder eine Bauzeichnungs-
   Identitaet wird, die bereits abgelehnt worden ist:
   1. Formen erscheinen nur in .grundriss und .tafelbild, also genau dort, wo
      vorher ein Gegenstand stand, und hoechstens einmal je Seite.
   2. Nie hinter Text, nie als Rahmen, nie in Leiste, Kachel oder Fuss, nie
      als Seitenhintergrund.
   3. Der Radius bleibt 32. Die abgelehnte Identitaet hatte Radius 0.
   4. Nur Inter. Kein Schriftfeld, keine Zeichnungsnummer, keine Massbaender,
      keine Schraffuren, keine zweite Schrift.
   5. Hoechstens zwei Strichstaerken: --z-linie und --z-weg.
   6. Unter jeder Form steht genau ein Satz, der den Sachverhalt nennt, und
      dieser Satz muss die Form ueberfluessig machen koennen.
   Vor dem Ausliefern: bei 320, 375, 900 und 1440 Pixeln ansehen, ohne
   JavaScript pruefen, einmal drucken, und der Tauschtest: die drei Formen
   untereinander tauschen. Wird dabei etwas falsch, tragen sie. */
.grundriss{margin-top:var(--takt)}
.grundriss svg,.grundriss svg *{vector-effect:non-scaling-stroke}
.grundriss svg{width:100%;height:auto;fill:none;stroke-width:1;stroke:var(--z-linie);
  max-width:900px;margin-inline:auto}
.grundriss .rahmen{stroke-width:1.5}
.grundriss figcaption{margin-top:var(--r3);font-size:var(--t-klein);color:var(--ink-2)}
.auf-dunkel{--z-linie:rgba(246,244,241,.55);--z-weg:var(--ivory)}
.panel-taupe{--z-linie:var(--ink-taupe);--z-weg:var(--ink-taupe)}

/* Zwei Formen aus Schrift, keine SVG: die Woerter bleiben Woerter und sind
   auf dem Telefon lesbar. */
.tafelbild{margin-top:var(--takt);max-width:900px;margin-inline:auto}
.bild-schluessel{margin-top:var(--r3);font-size:var(--t-klein);line-height:1.5;
  color:var(--ink-2);max-width:64ch;margin-inline:auto}
.rg-zeile{display:flex;gap:6px;margin-bottom:6px}
.rg-zeile > *{flex:1;border:1px solid var(--z-linie);border-radius:10px;padding:16px 10px;
  font-size:var(--t-klein);text-align:center}
.rg-voll{border-width:2px}
.rg-ab{background:var(--mist)}
.rg-rest{background:var(--champagne)}
.kette{display:flex;justify-content:center;flex-wrap:wrap;list-style:none;margin:0;padding:0}
.kette li{position:relative;margin:0 20px 12px;padding:14px 18px;border:1px solid var(--z-linie);
  border-radius:12px;font-size:var(--t-klein)}
.kette li:last-child{background:var(--champagne)}
.kette li + li::before{content:"";position:absolute;left:-41px;top:50%;width:40px;
  border-top:2px solid var(--z-weg)}
@media (max-width:699px){
  .rg-zeile{flex-direction:column}
  .kette{flex-direction:column;align-items:center}
  .kette li + li::before{left:50%;top:-26px;width:0;height:24px;border-left:2px solid var(--z-weg);border-top:0}
}

/* Der Platz fuer einen echten Beleg: ein echtes Foto oder ein freigegebener
   Screenshot, ohne Bewegung, ohne Zuschnitt, ohne Tonung. Noch unbenutzt. */
.beleg{margin-top:var(--takt);max-width:1000px;margin-inline:auto}
.beleg img{width:100%;height:auto;border-radius:var(--radius);display:block}
.beleg figcaption{margin-top:var(--r3);font-size:var(--t-klein);color:var(--ink-2)}

/* ---------- 11 STUFENLEISTE (Feldseiten) ---------- */
.stufenleiste{display:flex;flex-wrap:wrap;justify-content:center;gap:var(--r1) var(--r2);
  margin-top:var(--r4)}
.stufenleiste a{font-size:var(--t-klein);font-weight:500;padding:7px 14px;border-radius:980px;
  background:rgba(47,58,68,.06);color:var(--ink-2)}
.stufenleiste a[aria-current='page']{background:var(--slate);color:var(--on-dark)}

/* ---------- 12 SEITENKOPF ---------- */
.kopf{text-align:center;padding-block:var(--takt) 0}
/* Folgt dem Kopf direkt eine Tafel (Kontakt, Ueber uns), bekommt sie denselben
   Abstand wie eine Buehne; sonst klebt der Vorspann an der Tafelkante. */
.kopf + .panel{margin-top:var(--takt)}
.krumen{font-size:var(--t-klein);color:var(--ink-2);margin-bottom:var(--r3)}
.krumen a{color:var(--ink-2)}
.hero{text-align:center}
/* Eine Listenzeile darf ein Verweis sein. Sie bekommt dann das Winkelzeichen
   der Textlinks und hebt sich beim Ueberfahren leicht ab. */
a.liste-zeile-link{color:inherit;text-decoration:none}
a.liste-zeile-link .liste-titel::after{content:" \203A";color:var(--ink-2)}
a.liste-zeile-link:hover .liste-titel{text-decoration:underline;text-underline-offset:4px}

/* ---------- 10b DIE ANLAGE ----------
   Die Bühne einer Seite zeigt das System, das dort läuft. Gezeichnet, nicht
   fotografiert; beschriftet mit echten Namen; in Bewegung, weil es sich
   wirklich bewegt. Material statt Fläche: Verlauf, Lichtkante, Schatten-
   platte, ohne Filter. Jede Bühne gibt es breit und hochkant, damit die
   Schrift auf dem Telefon nicht auf fünf Pixel schrumpft. Bei reduzierter
   Bewegung stehen die Marken still. Höchstens eine Bühne je Seite. */
.anlage{border-radius:var(--radius-gross);overflow:hidden;background:#2A343D;
  box-shadow:0 34px 90px -36px rgba(47,58,68,.55),0 2px 0 rgba(255,255,255,.35) inset}
.an-svg{width:100%;height:auto;display:block}
.an-mobil{display:none}
@media (max-width:699.98px){.an-breit{display:none}.an-mobil{display:block}}
.an-text{fill:var(--ivory);font:600 18px/1 Inter,system-ui,sans-serif;text-anchor:middle;letter-spacing:-.012em}
.an-sub{fill:rgba(246,244,241,.64);font:500 13.5px/1 Inter,system-ui,sans-serif;text-anchor:middle;letter-spacing:.005em}
.an-links{text-anchor:start}
.an-klein{font-size:15px;font-weight:500}
.an-warm{fill:var(--champagne)}
.an-wege path{fill:none;stroke:rgba(246,244,241,.15);stroke-width:1.5;stroke-linecap:round}
.an-weg-text{fill:rgba(246,244,241,.5);font:500 13px/1 Inter,system-ui,sans-serif;text-anchor:middle;letter-spacing:.01em}
.an-stufe{font-size:14px;letter-spacing:.06em;text-transform:uppercase;fill:rgba(203,187,163,.85)}
.an-link{cursor:pointer;outline:none}
.an-link:hover rect,.an-link:focus-visible rect{stroke:rgba(203,187,163,.85)}
.an-link:hover .an-text,.an-link:focus-visible .an-text{fill:#FFFFFF}
.an-marke{offset-distance:0%}
/* Die Buehne als HTML-Raum, fuer Inhalte, die Text bleiben muessen: derselbe
   Verlauf, dasselbe warme Licht von oben wie im SVG. */
.anlage-html{position:relative;padding:clamp(22px,3.4vw,48px);
  background:linear-gradient(180deg,#3B4753,#222B33)}
.anlage-html::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(75% 60% at 50% 0%,rgba(203,187,163,.22),rgba(203,187,163,.05) 55%,rgba(203,187,163,0))}
.personen{position:relative;display:grid;grid-template-columns:1fr;gap:var(--fuge)}
@media (min-width:760px){.personen{grid-template-columns:repeat(3,1fr)}}
.person{border-radius:20px;padding:28px 24px 26px;text-align:left;
  background:linear-gradient(180deg,#4C5865,#3A4552);border:1px solid rgba(246,244,241,.13);
  box-shadow:0 7px 0 rgba(0,0,0,.32),inset 0 1px 0 rgba(246,244,241,.24)}
.person-zeichen{width:58px;height:58px;border-radius:50%;display:grid;place-items:center;
  font-size:17px;font-weight:600;letter-spacing:.02em;color:var(--champagne);
  border:1px solid rgba(203,187,163,.62);
  background:radial-gradient(circle at 50% 28%,rgba(203,187,163,.26),rgba(203,187,163,0) 72%)}
.person-name{margin-top:18px;font-size:var(--t-h3);font-weight:600;letter-spacing:-.014em;color:var(--ivory)}
.person-rolle{margin-top:4px;font-size:var(--t-klein);color:var(--champagne)}
.person-text{margin-top:12px;font-size:var(--t-body);line-height:1.5;color:rgba(246,244,241,.74)}
/* Die drei Karten auf hellem Grund (Ueber uns, nach den drei Saetzen): der
   Wechsel vom dunklen Abschnitt davor auf Hell gibt der Seite Rhythmus.
   Rolle und Text in voller Zweitfarbe, Taupe nur als Ring: auf Weiss
   erreicht Taupe als Schrift keinen Kontrast. */
.personen-hell{margin-top:var(--takt)}
/* Beschaffung: eine Personenkarte neben der Liste der Schritte. */
.sourcing{display:grid;gap:var(--fuge)}
.sourcing .liste{margin-top:0}
@media (min-width:760px){.sourcing{grid-template-columns:minmax(0,1fr) minmax(0,1.6fr);align-items:start}}
.personen-hell .person{background:var(--ivory);border:1px solid var(--line);box-shadow:none}
.personen-hell .person-zeichen{color:var(--ink);border-color:var(--taupe);
  background:radial-gradient(circle at 50% 28%,rgba(203,187,163,.45),rgba(203,187,163,0) 72%)}
.personen-hell .person-name{color:var(--ink)}
.personen-hell .person-rolle,.personen-hell .person-text{color:var(--ink-2)}
/* Platz fuer ein echtes Foto anstelle des Rings, gleicher Ausschnitt fuer alle drei. */
.person-foto{width:120px;height:120px;border-radius:50%;object-fit:cover;display:block;border:1px solid var(--line);background:var(--mist)}
/* Listen auf dunklem Grund */
.auf-dunkel .liste-titel{color:var(--on-dark)}
.auf-dunkel .liste-text{color:var(--on-dark-2)}
.auf-dunkel .liste-zeile{border-color:rgba(246,244,241,.14)}
.an-schluessel{margin:var(--r3) auto 0;max-width:64ch;font-size:var(--t-klein);line-height:1.5;color:var(--ink-2)}
.auf-dunkel .an-schluessel{color:var(--on-dark-2)}
@media (prefers-reduced-motion:reduce){.an-marke{display:none}}

/* Die Buehne folgt dem Kopf mit dem Takt der Seite, auf allen Seiten gleich. */
.buehne-abstand{margin-top:var(--takt)}:not(header)>.buehne-abstand{padding-bottom:var(--r4)}
.nav-marke img,.fuss-marke img{border-radius:7px}

/* ---------- 12b ABSCHLUSSZEILE UND BELEGREGISTER ---------- */
/* Sieben Seiten endeten mit derselben Tafel. Jetzt endet nur die Startseite
   mit einer Tafel, alle anderen mit einer Zeile. */
.schluss{border-top:1px solid var(--line);padding-block:var(--r4)}
.schluss-text{font-size:var(--t-h3);font-weight:600;letter-spacing:-.014em;
  max-width:30ch;margin-inline:auto}
.schluss .aktionen{margin-top:var(--r3)}

/* Das Belegregister ist die einzige linksbuendige Form der Website. Genau
   deshalb faellt sie auf. */
.register{max-width:var(--breit);margin:var(--r4) auto 0;text-align:left}
.register > div{padding:16px 0;border-top:1px solid var(--line)}
.register > div:last-child{border-bottom:1px solid var(--line)}
.register dt{font-size:var(--t-klein);color:var(--ink-2)}
.register dd{margin:2px 0 0;font-size:var(--t-body);line-height:1.45}
.register-quelle{color:var(--ink-2);font-size:var(--t-klein)}
@media (min-width:760px){
  .register > div{display:grid;grid-template-columns:15rem 1fr 18rem;
    gap:var(--r3);align-items:baseline}
  .register dd{margin:0}
  .register-quelle{text-align:right}
}

/* ---------- 13 NAVIGATION ---------- */
.nav{position:sticky;top:0;z-index:100;background:rgba(246,244,241,.82);
  backdrop-filter:saturate(180%) blur(20px);-webkit-backdrop-filter:saturate(180%) blur(20px);
  border-bottom:1px solid var(--line)}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .nav{background:var(--ivory)}
}
.nav-innen{max-width:calc(var(--breit) + 2 * var(--gutter));margin-inline:auto;
  padding-inline:var(--gutter);min-height:var(--nav-h);display:flex;align-items:center;gap:var(--r3)}
.nav-marke{display:flex;align-items:center;gap:10px;flex:none}
.nav-marke img{width:26px;height:26px;border-radius:5px}
.nav-menu{display:flex;align-items:center;gap:clamp(16px,2.2vw,30px);margin-inline:auto}
.nav-menu a{font-size:13px;color:var(--ink-2)}
.nav-menu a[aria-current='page'],.nav-menu a.ist-bereich{color:var(--ink);font-weight:500}
.nav-rechts{display:flex;align-items:center;gap:var(--r3);flex:none}
.nav-login,.nav-sprache{font-size:13px;color:var(--ink-2)}
.nav-cta{font-size:13px;font-weight:500;padding:6px 14px;border-radius:980px;
  background:var(--slate);color:var(--on-dark)}
.burger{display:none;flex-direction:column;gap:4px;padding:10px;margin-left:auto}
.burger span{display:block;width:18px;height:1.5px;background:var(--ink);border-radius:2px}
.burger[aria-expanded='true'] span:nth-child(1){transform:translateY(5.5px) rotate(45deg)}
.burger[aria-expanded='true'] span:nth-child(2){opacity:0}
.burger[aria-expanded='true'] span:nth-child(3){transform:translateY(-5.5px) rotate(-45deg)}
.nav-felder{display:none}

/* ---------- 14 FUSSZEILE ---------- */
.fuss{background:var(--ivory);border-top:1px solid var(--line);font-size:var(--t-klein);
  color:var(--ink-2)}
.fuss-innen{max-width:calc(var(--breit) + 2 * var(--gutter));margin-inline:auto;
  padding:var(--takt) var(--gutter) var(--r4)}
.fuss-grid{display:grid;grid-template-columns:1fr;gap:var(--r4)}
.fuss h2{font-size:var(--t-klein);font-weight:600;letter-spacing:0;color:var(--ink);
  margin-bottom:var(--r2)}
.fuss ul li{margin-bottom:10px}
.fuss a{color:var(--ink-2)}
.fuss-marke{display:flex;align-items:center;gap:10px;margin-bottom:var(--r3);color:var(--ink)}
.fuss-recht{display:flex;flex-wrap:wrap;gap:10px var(--r3);align-items:center;
  margin-top:var(--takt);padding-top:var(--r3);border-top:1px solid var(--line)}

/* ---------- 15 FORMULAR ---------- */
.form{max-width:600px;margin-inline:auto;text-align:left}
.form-feld{margin-bottom:var(--r3)}
.form-feld label{display:block;font-size:var(--t-klein);font-weight:500;margin-bottom:var(--r1)}
.form-feld input,.form-feld select,.form-feld textarea{
  width:100%;background:var(--white);border:1px solid var(--line);border-radius:14px;
  padding:14px 16px;font-size:var(--t-body);line-height:1.4;
  box-shadow:inset 0 1px 2px rgba(47,58,68,.06)}
.form-feld input:focus-visible,.form-feld select:focus-visible,.form-feld textarea:focus-visible{
  outline:none;border-color:var(--slate);box-shadow:0 0 0 4px rgba(47,58,68,.12)}
.form-feld textarea{min-height:140px;resize:vertical}
.form-feld ::placeholder{color:var(--ink-2);opacity:1}
.form-feld [aria-invalid='true']{border-color:var(--slate);border-width:2px}
.form-feld select{appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none' stroke='%235C6873'%3E%3Cpath d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 15px center}
.form-zeile{display:grid;grid-template-columns:1fr;gap:0 var(--r3)}
#cf-status{margin-top:var(--r2);padding:12px 15px;border-radius:12px;background:var(--mist);
  font-size:var(--t-body)}
#cf-status:empty{margin:0;padding:0;height:0;overflow:hidden;background:none}
#cf-status.is-error{background:rgba(47,58,68,.1)}
#cf-ma-hint{margin-top:var(--r3);font-size:var(--t-klein);line-height:1.5;color:var(--ink-2)}
#cf-send{width:100%;margin-top:var(--r2)}
#cf-send[disabled]{opacity:.5;cursor:default}
.form-danke,.form-fehler{display:none;margin-bottom:var(--r3);padding:14px 16px;
  border-radius:12px;background:var(--mist);font-size:var(--t-body)}
.form-danke:target,.form-fehler:target{display:block}
.kontakt-grid{max-width:calc(var(--breit) + 2 * var(--gutter));margin-inline:auto;padding-inline:var(--gutter)}
.kontakt-raum{margin-top:var(--takt)}
/* Der Raum auf der Kontaktseite: dasselbe Material wie die Buehnen, darin
   die Schritte, die Ansprechpartner und die Adresse. Keine Bewegung. */
.kontakt-raum{text-align:left;color:var(--on-dark);align-self:start}
.kontakt-raum > *{position:relative}
.kontakt-raum .augenbraue{color:var(--champagne)}
.kontakt-raum .schritte li{color:var(--on-dark)}
.kontakt-raum .schritte li::before{color:var(--champagne)}
.kontakt-raum #cf-ma-hint{color:var(--on-dark-2);padding-top:var(--r3);
  border-top:1px solid rgba(246,244,241,.14)}
.kontakt-personen{display:flex;align-items:center;gap:10px;margin-top:var(--r4)}
.kontakt-personen .person-zeichen{width:44px;height:44px;font-size:14px;flex:none}
.kontakt-personen .person-zeichen + .person-zeichen{margin-left:-14px}
.kontakt-namen{margin-left:8px;font-size:var(--t-klein);line-height:1.45;color:var(--on-dark-2)}
.kontakt-namen strong{display:block;color:var(--on-dark);font-weight:600}
.kontakt-adresse{margin-top:var(--r4);font-size:var(--t-klein);line-height:1.55;color:var(--on-dark-2)}
.kontakt-mail{margin-top:var(--r2);color:var(--champagne)}
/* Die Zaehlung kommt aus ::before, nicht aus der Liste selbst: sonst steht sie doppelt. */
.schritte{counter-reset:s;margin:var(--r3) 0 0;padding:0;list-style:none;text-align:left}
.schritte li{counter-increment:s;position:relative;padding:0 0 var(--r3) 34px;line-height:1.5}
.schritte li::before{content:counter(s);position:absolute;left:0;top:0;font-size:var(--t-klein);
  font-weight:600;color:var(--ink-2)}

.kopf h1:last-child{margin-bottom:var(--r3)}

/* ---------- 16 RECHTSTEXTE ----------
   Gepruefte Texte, wortgleich. Hochwertig heisst hier: Lesbarkeit. Ein
   ruhiger Satzspiegel, klare Gliederung, und bei langen Texten ein
   Verzeichnis, das am Rand mitlaeuft. Das Impressum ist kurz und steht als
   Tabelle aus Begriff und Angabe. */
.recht{text-align:left}
.legal{max-width:var(--lese-recht);margin-inline:auto;text-align:left}
.legal h2{font-size:var(--t-h3);font-weight:600;letter-spacing:-.014em;line-height:1.25;
  margin:var(--takt) 0 var(--r2)}
.legal h2:first-child,.legal .hinweis + h2,.legal .klein + h2{margin-top:0}
.legal p{font-size:var(--t-body);line-height:1.65;color:var(--ink);margin-bottom:var(--r2)}
.legal a{color:var(--ink);text-decoration:underline;text-underline-offset:3px}
.legal ol{padding-left:1.7em;margin-bottom:var(--r3)}
.legal ol li{font-size:var(--t-body);line-height:1.65;color:var(--ink);margin-bottom:var(--r2);padding-left:.3em}
.legal ol li::marker{color:var(--ink-2);font-weight:500}
.legal .hinweis{border-radius:14px;background:var(--mist);border:1px solid var(--line);
  padding:var(--r3);margin-bottom:var(--r4);font-size:var(--t-klein);line-height:1.55;color:var(--ink)}
.legal .klein{color:var(--ink-2)}

/* Das Impressum: Begriff links, Angabe rechts. Die Linie liegt auf der Zeile,
   nicht auf zwei Zellen, sonst bekommt sie eine Stufe. */
.legal-tabelle{max-width:var(--lese)}
.legal-tabelle > .klein{margin:0 0 var(--r3)}
.legal-tabelle .zeile{padding:var(--r3) 0;border-top:1px solid var(--line)}
.legal-tabelle .zeile:last-child{border-bottom:1px solid var(--line)}
.legal-tabelle h2{margin:0 0 var(--r1);font-size:var(--t-klein);font-weight:600;letter-spacing:.01em;color:var(--ink-2)}
.legal-tabelle p{margin:0;line-height:1.6}
@media (min-width:700px){
  .legal-tabelle .zeile{display:grid;grid-template-columns:14rem 1fr;column-gap:var(--r4);align-items:start}
  .legal-tabelle h2{margin:0;padding-top:4px}
}

/* Lange Texte: das Verzeichnis als ruhige Liste, oben; ab 1240 px am Rand,
   mitlaufend, in der Hoehe begrenzt, und die Lesespalte bleibt genau unter
   der Ueberschrift. */
.recht-inhalt{max-width:var(--lese-recht);margin:0 auto var(--r4)}
.recht-inhalt-titel{font-size:var(--t-klein);font-weight:600;color:var(--ink-2);margin-bottom:var(--r1)}
.recht-inhalt ol{list-style:none;margin:0;padding:0}
.recht-inhalt li + li{margin-top:2px}
.recht-inhalt a{display:block;padding:7px 12px;margin-left:-12px;border-radius:10px;
  font-size:var(--t-klein);line-height:1.35;color:var(--ink-2);text-decoration:none}
.recht-inhalt a:hover{background:var(--mist);color:var(--ink)}
@media (min-width:1280px){
  .recht-lang{display:grid;grid-template-columns:minmax(17rem,1fr) minmax(0,var(--lese-recht)) minmax(17rem,1fr);
    column-gap:var(--r4)}
  .recht-inhalt{grid-column:1;justify-self:end;width:17rem;margin:0;
    position:sticky;top:72px;align-self:start;
    max-height:calc(100vh - 72px - var(--r3));overflow-y:auto;overscroll-behavior:contain}
  .recht-lang .legal{grid-column:2;margin:0}
}

/* ---------- 17 GRÖSSERE BILDSCHIRME ---------- */
@media (min-width:700px){
  .form-zeile{grid-template-columns:1fr 1fr}
  .gegen{grid-template-columns:1fr 1fr;column-gap:var(--r4)}
  .gegen-kopf{display:block;font-size:var(--t-klein);font-weight:600;color:var(--ink);
    padding-bottom:var(--r2);border-bottom:1px solid var(--line)}
  .gegen-zeile::before{display:none}
  .g-a,.g-b{padding:var(--r3) 0;border-top:0;border-bottom:1px solid var(--line);color:var(--ink)}
  .g-a{color:var(--ink-2)}
  .schritte-reihe{grid-template-columns:repeat(2,minmax(0,1fr))}
  .liste-zeile{grid-template-columns:5fr 7fr;column-gap:var(--r4);align-items:start}
  #cf-send{width:auto;min-width:220px}
}

@media (min-width:900px){
  /* Die Leiste steht in einer Zeile: Marke, Menü mittig, Aktion rechts. */
  .nav-panel{display:flex;align-items:center;flex:1;gap:var(--r3)}
  .kacheln{grid-template-columns:1fr 1fr}
  .kachel-breit{grid-column:1 / -1;min-height:520px}
  .kachel-quer{grid-column:1 / -1}
  .schritte-reihe{grid-template-columns:repeat(var(--sp,4),minmax(0,1fr))}
  .fuss-grid{grid-template-columns:5fr 3fr 4fr;column-gap:var(--r4)}
  .kontakt-grid{display:grid;grid-template-columns:7fr 5fr;column-gap:var(--takt);
  .kontakt-raum{margin-top:0}
    align-items:start;text-align:left;max-width:calc(var(--breit) + 2 * var(--gutter));
    margin-inline:auto;padding-inline:var(--gutter)}
  .kontakt-grid .form{margin-inline:0}

  /* Die fünf Felder klappen unter „Leistungen" auf. Reines CSS: es geht mit
     Maus, mit der Tastatur (focus-within) und ohne JavaScript. */
  .nav-hat-felder{position:relative}
  .nav-felder{display:block;position:absolute;top:100%;left:-16px;z-index:120;min-width:250px;
    margin-top:8px;padding:10px 16px 12px;background:var(--white);border-radius:14px;
    border:1px solid var(--line);visibility:hidden;opacity:0}
  /* Unsichtbare Brücke über die Fuge zwischen „Leistungen" und der Liste. Ohne
     sie gehört die Fuge zu keinem der beiden: die Maus verlässt beim
     Hinüberfahren das Menü, und die Liste klappt zu, bevor man wählen kann. */
  .nav-felder::before{content:"";position:absolute;left:0;right:0;bottom:100%;height:8px}
  .nav-hat-felder:hover .nav-felder,.nav-hat-felder:focus-within .nav-felder{visibility:visible;opacity:1}
  .nav-felder a{display:block;padding:8px 0;font-size:13px;color:var(--ink-2)}
}

/* Burger unter 900 px */
@media (max-width:899.98px){
  .nav-innen{flex-wrap:wrap}
  .nav-menu,.nav-rechts{display:none}
  .burger{display:flex}
  .nav-panel{flex-basis:100%;display:none;padding-bottom:var(--r3)}
  .nav-panel.offen{display:block}
  .nav-panel.offen .nav-menu,.nav-panel.offen .nav-rechts,
  html:not(.menu-js) .nav-menu,html:not(.menu-js) .nav-rechts{display:flex;
    flex-direction:column;align-items:flex-start;gap:0;margin:0}
  .nav-panel.offen .nav-menu a,.nav-panel.offen .nav-rechts a,
  html:not(.menu-js) .nav-menu a,html:not(.menu-js) .nav-rechts a{display:block;padding:13px 0;
    font-size:var(--t-body);width:100%;border-top:1px solid var(--line);color:var(--ink)}
  .nav-panel.offen .nav-felder,html:not(.menu-js) .nav-felder{display:flex;flex-direction:column}
  .nav-panel.offen .nav-felder a,html:not(.menu-js) .nav-felder a{padding-left:var(--r2);
    font-size:var(--t-klein);color:var(--ink-2)}
  .nav-panel.offen .nav-rechts a.nav-cta,html:not(.menu-js) .nav-rechts a.nav-cta{display:inline-block;width:auto;border:0;
    margin-top:var(--r2);padding:9px 18px;color:var(--on-dark)}
  html:not(.menu-js) .nav-panel{display:block}
  html:not(.menu-js) .burger{display:none}
  html:not(.menu-js) .nav{position:static}

}

/* ===========================================================================
   18 BEWEGUNG
   Auf dieser Website bewegt sich nichts, was keinen Grund hat. Die Marken
   auf den Wegen der Anlage bewegen sich, weil der Betrieb sich bewegt:
   Produktdaten gehen hinaus, Bestellungen kommen zurueck. Dazu
   Zustandswechsel beim Ueberfahren und die Statuszeile im Kontaktformular.
   Nichts davon hat einen versteckten Anfangszustand.
   Der gesamte Block liegt in no-preference.
   =========================================================================== */
@media (prefers-reduced-motion:no-preference){
  html{scroll-behavior:smooth}

  @keyframes bpAuf{from{transform:translateY(24px);opacity:0}to{transform:none;opacity:1}}

  /* Die Anlage: Marken laufen die Wege entlang. Ein Grund, keine Zier. */
  .an-marke{animation:anLauf var(--dauer,7s) linear infinite;animation-delay:var(--start,0s)}
  @keyframes anLauf{0%{offset-distance:0%;opacity:0}6%{opacity:1}94%{opacity:1}100%{offset-distance:100%;opacity:0}}

  /* Hover: nichts hebt ab, es verdunkelt und unterstreicht. */
  .btn,.link,.nav-menu a,.nav-cta,.fuss a,.stufenleiste a,.kachel{
    transition:opacity var(--d-hover) var(--ease),color var(--d-hover) var(--ease),
    background-color var(--d-hover) var(--ease),transform var(--d-hover) var(--ease)}
  .btn:hover,.nav-cta:hover{opacity:.82}
  .nav-menu a:hover,.fuss a:hover{color:var(--ink)}
  .link:hover{text-decoration:underline;text-underline-offset:4px}
  .link::after{transition:transform var(--d-hover) var(--ease)}
  .link:hover::after{transform:translateX(3px)}
  a.kachel:hover{transform:scale(1.006)}
  .btn:active,.nav-cta:active{transform:scale(.98)}
  .burger span{transition:transform .24s var(--ease),opacity .18s var(--ease)}
  html.js #cf-status:not(:empty){animation:bpAuf .3s var(--ease) both}
}

/* ---------- 19 DRUCK ---------- */
@media print{
  .nav,.burger,.skip,.aktionen,.nav-felder{display:none}
  .panel-dunkel,.panel-taupe,.kachel-dunkel,.kachel-taupe,.kachel,body{background:none;color:#000}
  .auf-dunkel .fliess,.auf-dunkel .klein,.auf-dunkel .zahl-wort,.fuss a{color:#000}
  .kachel{border:1px solid #999;min-height:0;break-inside:avoid}
  .panel{padding-block:20px}
  .legal a[href^='http']::after{content:' (' attr(href) ')';font-size:12px}
  .recht-inhalt{display:none}
}
@media (max-width:480px){.stufenleiste{gap:6px 6px}.stufenleiste a{font-size:12px;padding:5px 10px}}
h1,h2{text-wrap:balance}