/* =========================================================================
   wesema.dyncoy.com – Stylesheet
   Reihenfolge: :root → Reset → Basis/Typo → Layout → Komponenten →
                Utilities → Breakpoints → reduced-motion → print

   Zwei Regeln, die man beim Weiterbauen zuerst bricht:
   1. --signal (#E8A400) ist KEINE Textfarbe auf Hell (2.2:1). Gelb ist Fläche,
      Kante oder Text auf Dunkel. Texttaugliches Gelb ist nur --signal-tief.
   2. outline-offset: 0 löscht den Fokusring auf dem Stahlknopf (1.3:1).
      Der Ring trägt nur als Doppelring aus dunklem Kern und gelbem Hof.
   ========================================================================= */

/* ============================== 1. Tokens ============================== */

:root {
  color-scheme: light;

  /* ---- Flächen ---------------------------------------------------------- */
  --grund:            #F2F4F4;  /* Seitenhintergrund, kühles Papier          */
  --flaeche:          #FFFFFF;  /* Karten, Tabellenzeilen, Eingabefelder     */
  --flaeche-2:        #E9EDED;  /* Zebra, Hover, ruhige Einschübe            */
  --flaeche-dunkel:   #1C2323;  /* Kopfzeile, Fußzeile                       */
  --flaeche-dunkel-2: #263030;  /* Primärknopf, Tabellenkopf dunkel          */

  /* ---- Text ------------------------------------------------------------- */
  --text:             #141A1A;  /* Fließtext, Überschriften    (17.6:1 auf Weiß) */
  --text-leise:       #4E5A5A;  /* Meta, Bildunterschrift       (7.2:1)      */
  --text-auf-dunkel:  #EAEFEF;  /* Text auf --flaeche-dunkel   (13.8:1)      */
  --text-leise-dunkel:#A8B4B4;  /* Meta auf --flaeche-dunkel    (7.5:1)      */
  --text-invers:      #FFFFFF;  /* Text auf Primärknopf        (13.6:1)      */

  /* ---- Ränder ----------------------------------------------------------- */
  --rand-fein:        #D7DDDD;  /* Haarlinie                  – DEKORATIV    */
  --rand:             #BCC5C5;  /* Karten-, Abschnittskante   – DEKORATIV    */
  --rand-stark:       #6E7A7A;  /* Bedienelemente: Input, Ghost-Knopf (4.4:1)*/
  --rand-dunkel:      #3A4444;  /* Trennlinie auf Dunkel      – DEKORATIV    */

  /* ---- Akzent (Maschinengelb) ------------------------------------------- */
  --signal:           #E8A400;  /* NUR Fläche/Marke – NIE Text auf Hell      */
  --signal-hover:     #D89700;
  --signal-kante:     #B87F00;  /* Rand der gelben Fläche           (3.1:1)  */
  --signal-tief:      #7A5300;  /* die einzige texttaugliche Gelbstufe (6.9:1)*/

  /* ---- Zustände --------------------------------------------------------- */
  --erfolg:           #1E6B3A;
  --erfolg-flaeche:   #E7F2EA;
  --warnung:          #8A5A00;
  --warnung-flaeche:  #FBF0D6;
  --fehler:           #A3231C;
  --fehler-flaeche:   #FBEAE8;
  --hinweis:          #4E5A5A;
  --hinweis-flaeche:  #E9EDED;

  /* ---- Links ------------------------------------------------------------ */
  --link:             #141A1A;  /* Link = Text + Unterstrich, nicht Farbe    */
  --link-hover:       #7A5300;
  --link-besucht:     #5A4B62;  /* nur Zierde, kein Bedeutungsträger         */

  /* ---- Fokus ------------------------------------------------------------ */
  --fokus-kern:       #141A1A;  /* trägt auf hellem Grund                    */
  --fokus-hof:        #E8A400;  /* trägt auf dunklem Grund                   */

  /* ---- Typografie ------------------------------------------------------- */
  --schrift: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue",
             Arial, "Noto Sans", sans-serif;
  --schrift-mono: ui-monospace, SFMono-Regular, "Cascadia Mono", "Segoe UI Mono",
             "Liberation Mono", "Courier New", monospace;

  --txt-xs:  0.8125rem;
  --txt-s:   0.875rem;
  --txt-m:   1rem;
  --txt-flies: 1.0625rem;
  --txt-l:   1.125rem;
  --txt-xl:  clamp(1.375rem, 1.15rem + 1.1vw, 1.75rem);
  --txt-2xl: clamp(1.625rem, 1.30rem + 1.6vw, 2.25rem);
  --txt-3xl: clamp(2rem,     1.50rem + 2.6vw, 3.25rem);

  --zh-eng:  1.15;
  --zh-mit:  1.4;
  --zh-weit: 1.65;
  --sperr-marke: 0.16em;
  --sperr-label: 0.08em;
  --lesebreite: 68ch;

  /* ---- Abstände (4px-Raster) -------------------------------------------- */
  --abstand-1: 0.25rem;
  --abstand-2: 0.5rem;
  --abstand-3: 0.75rem;
  --abstand-4: 1rem;
  --abstand-5: 1.5rem;
  --abstand-6: 2rem;
  --abstand-7: 3rem;
  --abstand-8: 4rem;
  --sektion-y: clamp(2.5rem, 1.5rem + 4vw, 5rem);

  /* ---- Maße ------------------------------------------------------------- */
  --huelle-max:    75rem;
  --huelle-schmal: 44rem;
  --huelle-pad:    clamp(1rem, 0.5rem + 2vw, 2rem);
  --kopf-hoehe:    4rem;
  --ziel-min:      2.75rem;

  /* ---- Radien (klein = präzise) ----------------------------------------- */
  --radius-1: 2px;
  --radius-2: 4px;
  --radius-voll: 999px;

  /* ---- Schatten --------------------------------------------------------- */
  --schatten-1: 0 1px 2px rgba(20,26,26,.08);
  --schatten-2: 0 4px 12px rgba(20,26,26,.10);
  --schatten-kopf: 0 1px 0 rgba(20,26,26,.20);

  /* ---- Bewegung --------------------------------------------------------- */
  --tempo: 120ms;
  --kurve: cubic-bezier(.2,.6,.3,1);
}

/* ============================== 2. Reset =============================== */

*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }

img, picture, svg, video { display: block; max-width: 100%; }
input, button, textarea, select { font: inherit; color: inherit; }
ul, ol { padding: 0; }

/* Fokus: Doppelring. Kern trägt auf Hell (17.6:1), Hof auf Dunkel (6.3–7.4:1).
   outline-offset NIE auf 0 setzen – sonst klebt der Ring am Rand und
   verschwindet auf dem Stahlknopf. */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 3px solid var(--fokus-kern);
  outline-offset: 2px;
  box-shadow: 0 0 0 7px var(--fokus-hof);
}
:where(a, button, input, select, textarea, summary):focus:not(:focus-visible) { outline: none; }

/* ========================== 3. Basis & Typo ============================ */

html { font-family: var(--schrift); font-size: 100%; -webkit-text-size-adjust: 100%; }
body {
  font-size: var(--txt-flies);
  line-height: var(--zh-weit);
  color: var(--text);
  background: var(--grund);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
  font-weight: 700; line-height: var(--zh-eng);
  text-wrap: balance; margin: 0 0 var(--abstand-4);
}
h1 { font-size: var(--txt-3xl); letter-spacing: -0.01em; }
h2 { font-size: var(--txt-2xl); letter-spacing: -0.005em; }
h3 { font-size: var(--txt-xl);  font-weight: 600; line-height: 1.2; }
h4 { font-size: var(--txt-l);   font-weight: 600; line-height: 1.3; }

p, li { text-wrap: pretty; }

a { color: var(--link); text-underline-offset: .18em; text-decoration-thickness: from-font; }
a:hover { color: var(--link-hover); text-decoration-thickness: 2px; }

::selection { background: var(--signal); color: var(--text); }
hr { border: 0; border-top: 1px solid var(--rand-fein); margin-block: var(--abstand-6); }

.lead { font-size: var(--txt-l); line-height: var(--zh-mit); color: var(--text); max-width: 60ch; }
.eyebrow {
  font-size: var(--txt-xs); font-weight: 600; text-transform: uppercase;
  letter-spacing: var(--sperr-label); color: var(--text-leise);
  display: block; margin-bottom: var(--abstand-3);
}
.abschnitt--dunkel .eyebrow { color: var(--text-leise-dunkel); }

.fliess { max-width: var(--lesebreite); }
.fliess > * + * { margin-top: var(--abstand-4); }
.fliess h2 { margin-top: var(--abstand-7); }
.fliess h3 { margin-top: var(--abstand-6); }
.fliess ul, .fliess ol { padding-left: var(--abstand-5); }
.fliess li + li { margin-top: var(--abstand-2); }

/* ============================== 4. Layout ============================== */

.huelle { width: 100%; max-width: var(--huelle-max); margin-inline: auto;
          padding-inline: var(--huelle-pad); }
.huelle--schmal { max-width: var(--huelle-schmal); }

.abschnitt { padding-block: var(--sektion-y); }
.abschnitt--flaeche { background: var(--flaeche); border-block: 1px solid var(--rand-fein); }
.abschnitt--dunkel  { background: var(--flaeche-dunkel); color: var(--text-auf-dunkel); }
.abschnitt--dunkel a { color: var(--text-auf-dunkel); }
.abschnitt--dunkel a:hover { color: var(--signal); }
.abschnitt__kopf { max-width: 60ch; margin-bottom: var(--abstand-6); }
.abschnitt__text { color: var(--text-leise); max-width: 60ch; margin-bottom: var(--abstand-5); }
.abschnitt--dunkel .abschnitt__text { color: var(--text-leise-dunkel); }

/* Schnittfuge: das einzige Ornament der Seite. Immer 3px, immer gelb. */
.abschnitt__titel::after {
  content: ""; display: block; width: 2.5rem; height: 3px;
  background: var(--signal); margin-top: var(--abstand-3);
}

.raster { display: grid; gap: var(--abstand-5); }
.raster--2, .raster--3 { grid-template-columns: 1fr; }

.stapel > * + * { margin-top: var(--abstand-4); }
.stapel--eng  > * + * { margin-top: var(--abstand-2); }
.stapel--weit > * + * { margin-top: var(--abstand-6); }

#inhalt { scroll-margin-top: calc(var(--kopf-hoehe) + var(--abstand-4)); }
[id] { scroll-margin-top: calc(var(--kopf-hoehe) + var(--abstand-4)); }

/* =========================== 5. Komponenten ============================ */

/* ---- Wortmarke -------------------------------------------------------- */
.marke { display: inline-grid; gap: var(--abstand-1); text-decoration: none;
         color: var(--text-auf-dunkel); padding: var(--abstand-2) 0; }
.marke__wort {
  position: relative;
  font-size: clamp(1.375rem, 1.1rem + 1.4vw, 1.875rem);
  font-weight: 700; letter-spacing: var(--sperr-marke);
  line-height: 1; text-transform: uppercase;
  padding-bottom: .34em;
}
.marke__wort::after {
  content: ""; position: absolute; right: var(--sperr-marke); bottom: 0;
  width: 2.1em; height: 3px; background: var(--signal);
  transition: width var(--tempo) var(--kurve);
}
.marke:hover .marke__wort::after { width: 3.4em; }
.marke__zusatz {
  font-size: var(--txt-xs); font-weight: 400; letter-spacing: .02em;
  color: var(--text-leise-dunkel); line-height: 1.3;
}
.marke--hell { color: var(--text); }
.marke--hell .marke__zusatz { color: var(--text-leise); }

/* ---- Kopfzeile und Navigation (ohne JS, kein Burger) ------------------ */
.kopf { position: sticky; top: 0; z-index: 50;
        background: var(--flaeche-dunkel); color: var(--text-auf-dunkel);
        box-shadow: var(--schatten-kopf); }
.kopf__innen { display: flex; flex-wrap: wrap; align-items: center;
               gap: var(--abstand-3) var(--abstand-5);
               min-height: var(--kopf-hoehe); padding-block: var(--abstand-2); }

.nav { order: 3; width: 100%; border-top: 1px solid var(--rand-dunkel);
       margin-top: var(--abstand-2); }
.nav__liste { display: flex; flex-wrap: wrap; gap: 0 var(--abstand-2);
              list-style: none; margin: 0; padding: 0; }
.nav__liste a {
  display: flex; align-items: center; min-height: var(--ziel-min);
  padding: var(--abstand-2) var(--abstand-3);
  color: var(--text-auf-dunkel); text-decoration: none;
  font-weight: 600; font-size: var(--txt-m);
  border-bottom: 3px solid transparent;
  transition: color var(--tempo) var(--kurve), border-color var(--tempo) var(--kurve),
              background-color var(--tempo) var(--kurve);
}
.nav__liste a:hover { color: #FFFFFF; background: var(--flaeche-dunkel-2);
                      border-bottom-color: var(--rand-dunkel); }
.nav__liste a:active { background: #141A1A; }
.nav__liste a[aria-current="page"] { color: #FFFFFF; border-bottom-color: var(--signal); }

.kopf__kontakt { margin-left: auto; display: inline-flex; align-items: center;
                 gap: var(--abstand-2); min-height: var(--ziel-min);
                 padding: var(--abstand-2) var(--abstand-3);
                 color: var(--text-auf-dunkel); text-decoration: none; font-weight: 600;
                 font-size: var(--txt-s);
                 border: 1px solid var(--rand-dunkel); border-radius: var(--radius-1); }
.kopf__kontakt:hover { background: var(--flaeche-dunkel-2); color: #FFFFFF;
                       border-color: var(--signal); }

/* ---- Knöpfe ----------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: var(--abstand-2);
  min-height: var(--ziel-min); padding: var(--abstand-3) var(--abstand-5);
  font: 600 var(--txt-m)/1.2 var(--schrift);
  border: 1px solid transparent; border-radius: var(--radius-1);
  text-decoration: none; cursor: pointer; text-align: center;
  transition: background-color var(--tempo) var(--kurve),
              border-color var(--tempo) var(--kurve), color var(--tempo) var(--kurve);
}
.btn--gross { min-height: 3.25rem; padding-inline: var(--abstand-6); font-size: var(--txt-l); }
.btn--voll  { width: 100%; }

/* Der wichtigste Knopf ist nicht der bunteste, sondern der dunkelste. */
.btn--haupt { background: var(--flaeche-dunkel-2); color: var(--text-invers);
              border-color: var(--flaeche-dunkel-2); }
.btn--haupt:hover  { background: #141A1A; border-color: #141A1A; color: var(--text-invers); }
.btn--haupt:active { background: #0D1111; }

/* Genau EINE gelbe Aktion pro Seite. Ohne --signal-kante verliert sie ihre Form. */
.btn--signal { background: var(--signal); color: var(--text); border-color: var(--signal-kante); }
.btn--signal:hover  { background: var(--signal-hover); color: var(--text); }
.btn--signal:active { background: var(--signal-kante); }

.btn--leise { background: transparent; color: var(--text); border-color: var(--rand-stark); }
.btn--leise:hover  { background: var(--flaeche-2); border-color: var(--text-leise); color: var(--text); }
.btn--leise:active { background: var(--rand-fein); }

.abschnitt--dunkel .btn--leise { color: var(--text-auf-dunkel); border-color: var(--rand-dunkel); }
.abschnitt--dunkel .btn--leise:hover { background: var(--flaeche-dunkel-2); color: #FFFFFF;
                                       border-color: var(--signal); }

.btn--gefahr { background: var(--fehler); color: var(--text-invers); border-color: var(--fehler); }
.btn--gefahr:hover { background: #8A1D17; color: var(--text-invers); }

.btn[disabled], .btn[aria-disabled="true"] {
  background: var(--rand-fein); color: var(--text-leise); border-color: var(--rand);
  cursor: not-allowed;
}
.btn[aria-disabled="true"] { pointer-events: none; }

.knopfgruppe { display: flex; flex-wrap: wrap; gap: var(--abstand-3); }

/* ---- Karte ------------------------------------------------------------ */
.karte { background: var(--flaeche); border: 1px solid var(--rand);
         border-radius: var(--radius-2); padding: var(--abstand-5);
         display: flex; flex-direction: column; gap: var(--abstand-3); height: 100%; }
.karte__titel { font-size: var(--txt-xl); margin: 0; }
.karte__text  { margin: 0; color: var(--text-leise); }
.karte__fuss  { margin: auto 0 0; padding-top: var(--abstand-2); }

.karte--link { position: relative;
               transition: border-color var(--tempo) var(--kurve),
                           box-shadow var(--tempo) var(--kurve); }
.karte--link .karte__titel a { color: var(--text); text-decoration: none; }
.karte--link .karte__titel a::after { content: ""; position: absolute; inset: 0; }
.karte--link:hover { border-color: var(--rand-stark); box-shadow: var(--schatten-1); }
.karte--link:hover .karte__titel a { text-decoration: underline; text-underline-offset: .18em; }
.karte--link:active { background: var(--flaeche-2); }
.karte--link:has(a:focus-visible) { border-color: var(--fokus-kern); }

/* ---- Download-Zeile --------------------------------------------------- */
.downloads { list-style: none; margin: 0; padding: 0; max-width: 60rem;
             border: 1px solid var(--rand); border-radius: var(--radius-2);
             background: var(--flaeche); }
.downloads > li + li { border-top: 1px solid var(--rand-fein); }

/* Die Hover-Kante liegt INNEN (inset box-shadow) statt als border – sonst
   bräuchte die Liste overflow:hidden, und das würde den Fokusring abschneiden. */
.download {
  display: grid; grid-template-columns: auto 1fr; gap: var(--abstand-2) var(--abstand-4);
  align-items: start;
  padding: var(--abstand-4); min-height: 4rem;
  color: var(--text); text-decoration: none;
  box-shadow: inset 3px 0 0 transparent;
  transition: background-color var(--tempo) var(--kurve), box-shadow var(--tempo) var(--kurve);
}
.downloads > li:first-child .download { border-radius: var(--radius-2) var(--radius-2) 0 0; }
.downloads > li:last-child  .download { border-radius: 0 0 var(--radius-2) var(--radius-2); }
.download__typ {
  grid-row: span 2; align-self: start;
  display: inline-flex; align-items: center; justify-content: center;
  width: 2.75rem; height: 2.75rem;
  background: var(--flaeche-2); border: 1px solid var(--rand-stark);
  border-radius: var(--radius-1);
  font: 700 var(--txt-xs)/1 var(--schrift-mono); letter-spacing: .04em; color: var(--text);
}
.download__titel { display: block; font-weight: 600; font-size: var(--txt-l);
                   text-decoration: underline; text-decoration-color: var(--rand-stark);
                   text-underline-offset: .18em; }
.download__bschr { display: block; color: var(--text-leise); font-size: var(--txt-s);
                   margin-top: var(--abstand-1); max-width: 56ch; line-height: var(--zh-mit); }
.download__meta  { grid-column: 2; display: flex; flex-wrap: wrap; gap: var(--abstand-2);
                   align-items: baseline; color: var(--text-leise); font-size: var(--txt-s); }

.download:hover { background: var(--flaeche-2); box-shadow: inset 3px 0 0 var(--signal);
                  color: var(--text); }
.download:hover .download__titel { text-decoration-color: currentColor; }
.download:active { background: var(--rand-fein); }
.download:focus-visible { box-shadow: inset 3px 0 0 var(--signal); }
.download:visited .download__titel { color: var(--link-besucht); }

.download--haupt { background: var(--flaeche-2); box-shadow: inset 3px 0 0 var(--signal-kante); }
.download--haupt .download__titel { font-size: var(--txt-xl); }

/* ---- Produktbereichs-Kachel ------------------------------------------- */
.kacheln { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--abstand-5); }
.kachel__ziel { display: grid; gap: var(--abstand-4); height: 100%;
                grid-template-rows: auto 1fr;
                background: var(--flaeche); border: 1px solid var(--rand);
                border-radius: var(--radius-2); overflow: hidden;
                color: var(--text); text-decoration: none;
                transition: border-color var(--tempo) var(--kurve),
                            box-shadow var(--tempo) var(--kurve); }
.kachel__text  { padding: 0 var(--abstand-5) var(--abstand-5); display: grid;
                 gap: var(--abstand-2); align-content: start; }
.kachel__titel { font-size: var(--txt-xl); font-weight: 700; line-height: 1.2; }
.kachel__bschr { color: var(--text-leise); font-size: var(--txt-s); line-height: 1.5; }
.kachel__ziel:hover  { border-color: var(--rand-stark); box-shadow: var(--schatten-1); }
.kachel__ziel:hover .kachel__titel { text-decoration: underline; text-underline-offset: .18em; }
.kachel__ziel:active { background: var(--flaeche-2); }
.kachel__ziel:focus-visible { border-color: var(--fokus-kern); }

/* ---- Tabelle ---------------------------------------------------------- */
.tab-huelle { overflow-x: auto; -webkit-overflow-scrolling: touch;
              border: 1px solid var(--rand); border-radius: var(--radius-2);
              background: var(--flaeche); }
.tab { width: 100%; border-collapse: collapse; font-size: var(--txt-s); }
.tab caption { text-align: left; font-weight: 600; font-size: var(--txt-m);
               padding: var(--abstand-4); border-bottom: 1px solid var(--rand-fein); }
.tab th, .tab td { padding: var(--abstand-3) var(--abstand-4); text-align: left;
                   border-bottom: 1px solid var(--rand-fein); white-space: nowrap; }
.tab thead th { background: var(--flaeche-2); font-size: var(--txt-xs); font-weight: 600;
                text-transform: uppercase; letter-spacing: var(--sperr-label);
                box-shadow: inset 0 -1px 0 var(--rand); }
.tab tbody tr:nth-child(even) { background: var(--grund); }
.tab tbody tr:hover { background: var(--flaeche-2); }
.tab .zahl { text-align: right; font-family: var(--schrift-mono);
             font-variant-numeric: tabular-nums; }
.tab tbody th[scope="row"] { font-weight: 600; white-space: normal; min-width: 8rem; }

/* ---- Formularfelder --------------------------------------------------- */
.feld { display: grid; gap: var(--abstand-2); margin-bottom: var(--abstand-5); }
.feld__label { font-weight: 600; font-size: var(--txt-m); }
.feld__pflicht { color: var(--fehler); }
.feld__eingabe, .feld__auswahl, .feld__text {
  width: 100%; min-height: var(--ziel-min);
  padding: var(--abstand-3); font: 400 var(--txt-m)/1.4 var(--schrift);
  color: var(--text); background: var(--flaeche);
  border: 1px solid var(--rand-stark);   /* NICHT --rand: das wären 1.8:1 */
  border-radius: var(--radius-1);
}
.feld__text { min-height: 9rem; resize: vertical; line-height: var(--zh-mit); }
.feld__eingabe:hover { border-color: var(--text-leise); }
.feld__eingabe:disabled { background: var(--flaeche-2); color: var(--text-leise);
                          border-color: var(--rand); cursor: not-allowed; }
.feld__eingabe::placeholder { color: var(--text-leise); opacity: 1; }
.feld__hilfe { font-size: var(--txt-s); color: var(--text-leise); margin: 0; }
.feld--fehler .feld__eingabe { border-width: 2px; border-color: var(--fehler);
                               background: var(--fehler-flaeche); }
.feld__fehler { display: flex; gap: var(--abstand-2); align-items: baseline;
                margin: 0; font-size: var(--txt-s); color: var(--fehler); }
fieldset { border: 1px solid var(--rand); border-radius: var(--radius-2);
           padding: var(--abstand-5); margin: 0 0 var(--abstand-6); }
legend { font-weight: 700; font-size: var(--txt-l); padding-inline: var(--abstand-2); }
.honig { position: absolute; left: -9999px; }

/* ---- Meldungsbox ------------------------------------------------------ */
.meldung { display: grid; grid-template-columns: auto 1fr; gap: var(--abstand-3);
           padding: var(--abstand-4); border-radius: var(--radius-2);
           border: 1px solid; border-left-width: 4px; margin-bottom: var(--abstand-5); }
.meldung__titel { font-weight: 700; margin: 0 0 var(--abstand-1); }
.meldung__inhalt > p { margin: 0; }
.meldung__inhalt > p + p { margin-top: var(--abstand-2); }
.meldung__symbol { font-size: 1.125rem; line-height: 1.4; }
.meldung--hinweis { background: var(--hinweis-flaeche); border-color: var(--hinweis); color: var(--text); }
.meldung--erfolg  { background: var(--erfolg-flaeche);  border-color: var(--erfolg);  color: var(--text); }
.meldung--warnung { background: var(--warnung-flaeche); border-color: var(--warnung); color: var(--text); }
.meldung--fehler  { background: var(--fehler-flaeche);  border-color: var(--fehler);  color: var(--text); }
.meldung--hinweis .meldung__symbol { color: var(--hinweis); }
.meldung--erfolg  .meldung__symbol { color: var(--erfolg); }
.meldung--warnung .meldung__symbol { color: var(--warnung); }
.meldung--fehler  .meldung__symbol { color: var(--fehler); }

/* ---- Faktenleiste ----------------------------------------------------- */
.fakten { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--abstand-5); }
.fakt { border-top: 3px solid var(--signal); padding-top: var(--abstand-3); }
.fakt__wert { display: block; font-size: var(--txt-2xl); font-weight: 700; line-height: 1; }
.fakt__text { display: block; margin-top: var(--abstand-2); color: var(--text-leise);
              font-size: var(--txt-s); max-width: 30ch; }
.abschnitt--dunkel .fakt__text { color: var(--text-leise-dunkel); }

/* ---- Status-Chip (für den späteren Kundenkatalog) --------------------- */
.chip { display: inline-flex; align-items: center; gap: var(--abstand-1);
        padding: .15rem var(--abstand-3); border-radius: var(--radius-voll);
        font-size: var(--txt-xs); font-weight: 600; border: 1px solid; }
.chip--lager { background: var(--erfolg-flaeche);  border-color: var(--erfolg);  color: #14351F; }
.chip--rest  { background: var(--warnung-flaeche); border-color: var(--warnung); color: #4A3100; }
.chip--aus   { background: var(--flaeche-2);       border-color: var(--rand-stark); color: var(--text); }

/* ---- Bilder ----------------------------------------------------------- */
.bild { display: block; position: relative; overflow: hidden;
        background: var(--flaeche-2); border-radius: var(--radius-2); }
.bild--43 { aspect-ratio: 4 / 3; }
.bild--32 { aspect-ratio: 3 / 2; }
.bild--169{ aspect-ratio: 16 / 9; }
.bild img, .bild picture { width: 100%; height: 100%; }
.bild img { object-fit: cover; object-position: center; display: block;
            filter: saturate(.94) contrast(1.04); }
.bild::after { content: ""; position: absolute; inset: 0; pointer-events: none;
               box-shadow: inset 0 0 0 1px rgba(20,26,26,.14); border-radius: inherit; }
.bild--leer { display: grid; place-items: center; background: var(--flaeche-dunkel-2);
              color: var(--text-leise-dunkel); font: 600 var(--txt-s)/1 var(--schrift);
              letter-spacing: var(--sperr-label); text-transform: uppercase; }
.bildunterschrift { font-size: var(--txt-s); color: var(--text-leise);
                    margin-top: var(--abstand-2); }

/* ---- Hero ------------------------------------------------------------- */
/* Kein Text auf Foto: Werkstattlicht ist unkontrolliert, der Kontrast wäre
   nicht rechenbar. Text steht auf voller Fläche neben dem Bild. */
.hero { padding-block: var(--sektion-y); }
.hero__raster { display: grid; gap: var(--abstand-6); align-items: center; }
.hero__text { max-width: 34rem; }
.hero h1 { margin-bottom: var(--abstand-5); }
.hero .knopfgruppe { margin-top: var(--abstand-6); }

/* ---- Meldungen (Aktuelles) -------------------------------------------- */
.meldungsliste { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--abstand-6); }
.notiz { background: var(--flaeche); border: 1px solid var(--rand);
         border-radius: var(--radius-2); padding: var(--abstand-5); }
.notiz__datum { display: block; font-family: var(--schrift-mono); font-size: var(--txt-s);
                color: var(--text-leise); margin-bottom: var(--abstand-2); }
.notiz__titel { font-size: var(--txt-xl); margin-bottom: var(--abstand-3); }

/* ---- Fußzeile --------------------------------------------------------- */
.fuss { background: var(--flaeche-dunkel); color: var(--text-auf-dunkel);
        padding-top: var(--sektion-y); margin-top: var(--sektion-y);
        border-top: 3px solid var(--signal); }
.fuss__innen { display: grid; gap: var(--abstand-6); }
.fuss__titel { font-size: var(--txt-m); text-transform: uppercase;
               letter-spacing: var(--sperr-label); color: var(--text-leise-dunkel);
               margin: 0 0 var(--abstand-3); }
.fuss__adresse { font-style: normal; line-height: var(--zh-mit);
                 color: var(--text-leise-dunkel); margin-top: var(--abstand-4); }
.fuss__liste { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--abstand-2); }
.fuss__liste a { display: inline-flex; align-items: center; min-height: var(--ziel-min);
                 color: var(--text-auf-dunkel); text-underline-offset: .2em; }
.fuss__liste a:hover { color: var(--signal); }
.fuss__schluss { border-top: 1px solid var(--rand-dunkel); margin-top: var(--abstand-7);
                 padding-block: var(--abstand-4); color: var(--text-leise-dunkel);
                 font-size: var(--txt-s); }

/* ============================= 6. Utilities ============================ */

.nur-sr {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}
.sprung { position: absolute; left: var(--abstand-4); top: -100%;
          z-index: 100; background: var(--signal); color: var(--text);
          padding: var(--abstand-3) var(--abstand-4); font-weight: 600;
          text-decoration: none;
          border: 2px solid var(--signal-kante); border-radius: var(--radius-1); }
.sprung:focus { top: var(--abstand-3); }

.zahl, .download__groesse, .fakt__wert, .artikel__nr {
  font-family: var(--schrift-mono);
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}
.text-leise { color: var(--text-leise); }
.abstand-oben { margin-top: var(--abstand-6); }
.zitat { font-size: var(--txt-l); font-style: italic; line-height: var(--zh-mit);
         border-left: 3px solid var(--signal); padding-left: var(--abstand-5);
         max-width: 55ch; }

/* ============================ 7. Breakpoints =========================== */
/* Custom Properties funktionieren nicht in @media – Werte stehen literal.
   sm 30em/480px · md 48em/768px · lg 64em/1024px */

@media (min-width: 30em) {
  .raster--2 { grid-template-columns: repeat(2, 1fr); }
  .fakten    { grid-template-columns: repeat(3, 1fr); }
  .download  { grid-template-columns: auto 1fr auto; align-items: center; }
  .download__meta { grid-column: 3; justify-content: flex-end; text-align: right; }
}

@media (min-width: 48em) {
  .raster--3 { grid-template-columns: repeat(2, 1fr); }
  .nav { order: 0; width: auto; border-top: 0; margin-top: 0; margin-left: var(--abstand-6); }
  .kopf__innen { flex-wrap: nowrap; }
  .fuss__innen { grid-template-columns: 1.4fr 1fr 1fr; }
  .hero__raster { grid-template-columns: 1.1fr 1fr; }
}

@media (min-width: 64em) {
  :root { --kopf-hoehe: 5rem; }
  .raster--3 { grid-template-columns: repeat(3, 1fr); }
}

/* ========================= 8. Weniger Bewegung ========================= */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important; animation-iteration-count: 1 !important;
    transition-duration: .01ms !important; scroll-behavior: auto !important;
  }
}

/* ============================== 9. Druck =============================== */
/* Einkäufer drucken Maßtabellen und legen sie an die Maschine. */

@media print {
  .kopf, .nav, .sprung, .btn, .fuss__liste { display: none !important; }
  body { background: #FFF; color: #000; font-size: 11pt; }
  .huelle { max-width: none; padding: 0; }
  .marke { color: #000; }
  .marke__wort::after { background: #000; }
  .marke__zusatz { color: #000; }
  .karte, .kachel__ziel, .downloads, .tab-huelle, .notiz { border-color: #000; box-shadow: none; }
  .abschnitt { padding-block: 0; }
  .abschnitt--dunkel { background: none; color: #000; }
  h1, h2, h3 { break-after: avoid; }
  tr, li, .karte { break-inside: avoid; }
  a[href^="http"]::after,
  a[href$=".pdf"]::after { content: " (" attr(href) ")"; font-size: 9pt; word-break: break-all; }
  .fuss { background: none; color: #000; border-top: 2px solid #000; margin-top: 2rem; }
  .fuss__adresse, .fuss__schluss, .fuss__titel { color: #000; }
}