/* ============================================================
   WL Motion AG — Design System
   Komponenten-Ebene über dem Brand-Book (../brand-book.html).
   Dachmarke: Holding-Website, LinkedIn, Geschäftspapiere.
   NICHT für Produkt-Marketing der Marken.
   ============================================================ */

/* ---------- 1 · Primitive (aus tokens.css, unverändert) ---------- */
:root{
  --wlm-ink:        #14181A;
  --wlm-ink-el:     #1B2124;
  --wlm-ink-3:      #232B2F;
  --wlm-steel:      #6C7A82;
  --wlm-mist:       #9BA6AC;
  --wlm-paper:      #EEF0F1;
  --wlm-white:      #F4F6F7;
  --wlm-momentum:      #CB9E42;
  --wlm-momentum-deep: #A9792F;
  --wlm-momentum-tint: rgba(203,158,66,.14);

  /* Marken-Farben — nur als Referenz/Punkt, nie als Fläche der Dachmarke */
  --brand-smv:       #2F6FB0;
  --brand-w2labs:    #00E86C;
  --brand-wlcaravan: #C9A227;

  --wlm-font-display: 'Archivo', system-ui, sans-serif;
  --wlm-font-body:    'Hanken Grotesk', system-ui, sans-serif;
  --wlm-font-utility: 'Archivo', system-ui, sans-serif;
  --wlm-tracking-display: -.03em;
  --wlm-tracking-utility: .14em;

  --wlm-radius-sm: 8px;
  --wlm-radius:    12px;
  --wlm-radius-lg: 16px;

  /* Spacing — 4px-Basis */
  --wlm-s1: 4px;  --wlm-s2: 8px;  --wlm-s3: 12px; --wlm-s4: 16px;
  --wlm-s5: 24px; --wlm-s6: 32px; --wlm-s7: 48px; --wlm-s8: 64px;
  --wlm-s9: 96px; --wlm-s10: 140px;

  --wlm-dur: .18s;
  --wlm-ease: cubic-bezier(.2,.6,.3,1);
}

/* ---------- 2 · Flächen (semantisch, kippen hell/dunkel) ----------
   Kontrast geprüft gegen die JEWEILS UNGÜNSTIGSTE Fläche der Gruppe,
   nicht nur gegen --sf-bg:
     dunkel  gegen ink #14181A UND ink-el #1B2124 (Cards/Notes)
     hell    gegen paper #EEF0F1 UND weiss #FFFFFF (Cards/Notes)

   AA (4.5:1) ist hier die UNTERGRENZE, nicht das Ziel. --sf-text-3 traegt
   Versalien mit weiter Laufweite in kleinen Graden — die lesen sich
   bei 4.7:1 muehsam, auch wenn der Pruefer gruen zeigt. Darum liegt der
   Ton bei ~6.2:1, direkt unter dem Fliesstext (--sf-text-2, 6.6:1).

   AAA (7:1) ist auf dieser Palette bewusst NICHT das Ziel: der einzige Ton,
   der es auf ink-el schafft, waere heller als --wlm-mist und wuerde damit
   den Fliesstext ueberstrahlen. Hierarchie kommt hier aus Schrift und Grad,
   nicht daraus, Sekundaeres dunkler zu machen. Wer kleiner als .62rem setzt,
   verliert Lesbarkeit, die kein Kontrast zurueckholt.

   --wlm-steel #6C7A82 (4.0:1 auf ink) taugt darum NICHT als Text, ebenso
   wenig #CB9E42 auf hell (2.2:1) — dafuer --sf-accent-text.             */
.wlm{
  --sf-bg:      var(--wlm-ink);
  --sf-bg-el:   var(--wlm-ink-el);
  --sf-bg-sunk: #101315;
  --sf-text:    var(--wlm-white);   /* 16.5:1 / 15.0:1 */
  --sf-text-2:  var(--wlm-mist);    /*  7.2:1 /  6.6:1 */
  --sf-text-3:  #96A2A8;            /*  6.8:1 /  6.2:1 */
  --sf-line:    rgba(255,255,255,.10);
  --sf-line-2:  rgba(255,255,255,.16);
  --sf-accent:      var(--wlm-momentum);
  --sf-accent-text: var(--wlm-momentum);
  --sf-accent-tint: var(--wlm-momentum-tint);
  --sf-focus:   var(--wlm-momentum);

  /* Marken-Farben als TEXT. Der echte Markenton gilt fuer den Punkt/die Flaeche
     (--brand-*), aber als Beschriftung besteht er nicht auf jeder Flaeche:
     SMV #2F6FB0 erreicht auf Anthrazit nur 3.4:1. Darum je Flaeche eine
     eigene Text-Variante — nie den Punkt danach einfaerben. */
  --sf-brand-smv-text: #5C97D6;   /* 5.8:1 / 5.3:1 */
  --sf-brand-wlc-text: var(--brand-wlcaravan);  /* 7.4:1 / 6.7:1 */
  --sf-brand-w2-text:  var(--brand-w2labs);     /* 10.9:1 / 9.9:1 */

  background: var(--sf-bg);
  color: var(--sf-text);
  font-family: var(--wlm-font-body);
  font-size: 17px;
  line-height: 1.65;
  letter-spacing: .005em;
  -webkit-font-smoothing: antialiased;
}
.wlm--light{
  --sf-bg:      var(--wlm-paper);
  --sf-bg-el:   #FFFFFF;
  --sf-bg-sunk: #E4E7E9;
  --sf-text:    var(--wlm-ink);     /* 15.6:1 / 18.4:1 */
  --sf-text-2:  #4A545A;            /*  6.8:1 /  7.8:1 */
  --sf-text-3:  #525D64;            /*  5.9:1 /  6.8:1 */
  --sf-line:    rgba(20,24,26,.12);
  --sf-line-2:  rgba(20,24,26,.22);
  --sf-accent:      var(--wlm-momentum);
  --sf-accent-text: #7A5620;        /*  5.8:1 /  6.6:1 */
  --sf-accent-tint: rgba(203,158,66,.16);
  --sf-focus:   #7A5620;

  --sf-brand-smv-text: #2A5F97;           /* 5.8:1 / 6.6:1 — #2F6FB0 nur 4.6:1 */
  --sf-brand-wlc-text: #7A6018;           /* 5.2:1 / 6.0:1 — #C9A227 nur 2.1:1 */
  --sf-brand-w2-text:  #0B6E38;           /* 5.6:1 / 6.4:1 — #00E86C nur 1.4:1 */
}

.wlm *,
.wlm *::before,
.wlm *::after{ box-sizing: border-box; }

/* ---------- 3 · Typografie ---------- */
.wlm h1,.wlm h2,.wlm h3,.wlm h4{
  font-family: var(--wlm-font-display);
  font-weight: 800;
  letter-spacing: var(--wlm-tracking-display);
  line-height: .98;
  margin: 0;
  color: var(--sf-text);
}
.wlm-display{ font-size: clamp(2.6rem,7vw,4.4rem); font-weight:900; letter-spacing:-.045em; line-height:.95; }
.wlm-h1{ font-size: clamp(2rem,4.4vw,3rem); font-weight:900; }
.wlm-h2{ font-size: clamp(1.6rem,3.2vw,2.3rem); }
.wlm-h3{ font-size: clamp(1.2rem,2.2vw,1.5rem); }
.wlm-body{ font-family:var(--wlm-font-body); font-size:1rem; color:var(--sf-text-2); margin:0; }
.wlm-lead{ font-size: clamp(1.05rem,1.7vw,1.24rem); color:var(--sf-text-2); max-width:62ch; margin:0; }
.wlm-small{ font-size:.88rem; color:var(--sf-text-2); }

/* Kursiv = Beschleunigung (Brand-Book 04) */
.wlm em,.wlm .wlm-accel{ font-style:italic; color:var(--sf-accent-text); }

.wlm-eyebrow{
  font-family: var(--wlm-font-utility);
  font-weight: 700;
  font-size: .7rem;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: var(--sf-accent-text);
  display: block;
}
.wlm-utility{ font-family:var(--wlm-font-utility); font-weight:700; letter-spacing:var(--wlm-tracking-utility); }
/* Versalien tragen in kleinen Graden schlecht. Darum 700er-Schnitt und .68rem
   Untergrenze. Archivo ist als Display-Schrift ohnehin geladen — die Utility-Rolle
   kostet damit keine zusaetzliche Familie. */
.wlm-meta{
  font-family: var(--wlm-font-utility);
  font-weight: 700;
  font-size: .68rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--sf-text-3);
}

/* ---------- 4 · Section-Head ---------- */
.wlm-sec-head{ display:flex; align-items:baseline; gap:var(--wlm-s4); flex-wrap:wrap; margin-bottom:var(--wlm-s6); }
.wlm-sec-no{ font-family:var(--wlm-font-utility); font-weight:700; font-size:.72rem; letter-spacing:.14em; color:var(--sf-text-3); }

/* ---------- 5 · Trajektorie (Signature) ---------- */
.wlm-mark{ display:block; }
.wlm-mark path{ fill:none; stroke-linecap:round; stroke-linejoin:round; }
.wlm-rule{
  height:2px; border:0; margin:0;
  background: linear-gradient(90deg, var(--sf-accent), transparent);
}
.wlm-rule--full{ background: linear-gradient(90deg, var(--sf-accent) 0 12%, var(--sf-line) 12% 100%); }

/* ---------- 6 · Buttons ---------- */
.wlm-btn{
  display:inline-flex; align-items:center; justify-content:center; gap:var(--wlm-s2);
  font-family: var(--wlm-font-display);
  font-weight: 700;
  font-size: .95rem;
  letter-spacing: -.01em;
  line-height: 1;
  padding: 12px 20px;
  border-radius: var(--wlm-radius-sm);
  border: 1px solid transparent;
  background: none;
  color: var(--sf-text);
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  transition: background var(--wlm-dur) var(--wlm-ease),
              border-color var(--wlm-dur) var(--wlm-ease),
              color var(--wlm-dur) var(--wlm-ease),
              transform var(--wlm-dur) var(--wlm-ease);
}
.wlm-btn:focus-visible{ outline:2px solid var(--sf-focus); outline-offset:2px; }
.wlm-btn:active{ transform: translateY(1px); }

/* Primär — die einzige Messing-Fläche. Auf hell wie dunkel identisch (7.2:1). */
.wlm-btn--primary{ background: var(--wlm-momentum); color: var(--wlm-ink); }
.wlm-btn--primary:hover{ background: var(--wlm-momentum-deep); }

.wlm-btn--secondary{ border-color: var(--sf-line-2); color: var(--sf-text); }
.wlm-btn--secondary:hover{ border-color: var(--sf-accent); color: var(--sf-accent-text); }

.wlm-btn--ghost{ color: var(--sf-text-2); padding-inline: var(--wlm-s3); }
.wlm-btn--ghost:hover{ color: var(--sf-text); background: var(--sf-accent-tint); }

.wlm-btn--sm{ font-size:.84rem; padding:8px 14px; }
.wlm-btn--lg{ font-size:1.05rem; padding:15px 26px; }

.wlm-btn[disabled],.wlm-btn--disabled{ opacity:.4; pointer-events:none; }

/* Trajektorien-Chevron als Button-Marker */
.wlm-btn .wlm-chev{ font-size:.8em; letter-spacing:-.1em; transition: transform var(--wlm-dur) var(--wlm-ease); }
.wlm-btn:hover .wlm-chev{ transform: translateX(3px); }

/* ---------- 7 · Links ---------- */
.wlm-link{
  color: var(--sf-text); text-decoration:none;
  border-bottom:1px solid var(--sf-accent);
  padding-bottom:1px;
  transition: color var(--wlm-dur) var(--wlm-ease);
}
.wlm-link:hover{ color: var(--sf-accent-text); }
.wlm-link:focus-visible{ outline:2px solid var(--sf-focus); outline-offset:3px; border-radius:2px; }

.wlm-link--standalone{
  display:inline-flex; align-items:center; gap:var(--wlm-s2);
  font-family:var(--wlm-font-display); font-weight:700;
  color: var(--sf-accent-text); border-bottom:0;
}
.wlm-link--standalone .wlm-chev{ transition: transform var(--wlm-dur) var(--wlm-ease); }
.wlm-link--standalone:hover .wlm-chev{ transform: translateX(3px); }

.wlm-link--nav{
  font-family: var(--wlm-font-utility);
  font-size:.7rem; letter-spacing:.2em; text-transform:uppercase;
  color: var(--sf-text-3); text-decoration:none; border-bottom:0;
  transition: color var(--wlm-dur) var(--wlm-ease);
}
.wlm-link--nav:hover,.wlm-link--nav[aria-current]{ color: var(--sf-text); }
.wlm-link--nav[aria-current]{ color: var(--sf-accent-text); }

/* ---------- 8 · Cards ---------- */
.wlm-card{
  border:1px solid var(--sf-line);
  border-radius: var(--wlm-radius);
  padding: var(--wlm-s5);
  background: transparent;
}
.wlm-card--elevated{ background: var(--sf-bg-el); }
.wlm-card--accent{
  border-color: var(--sf-line-2);
  background: linear-gradient(180deg, var(--sf-accent-tint), transparent 60%);
}
/* Führungskante — die Trajektorie als Kante */
.wlm-card--edge{ position:relative; overflow:hidden; }
.wlm-card--edge::before{
  content:""; position:absolute; left:0; top:0; bottom:0; width:3px;
  background: linear-gradient(180deg, var(--sf-accent), transparent);
}
.wlm-card__title{ font-family:var(--wlm-font-display); font-weight:800; font-size:1.1rem; letter-spacing:-.02em; margin:0 0 var(--wlm-s3); }
.wlm-card__body{ color:var(--sf-text-2); font-size:.94rem; margin:0; }

/* ---------- 9 · Badges / Pills ---------- */
.wlm-pill{
  display:inline-flex; align-items:center; gap:var(--wlm-s2);
  font-family:var(--wlm-font-utility); font-weight:700; font-size:.66rem; letter-spacing:.13em;
  text-transform:uppercase;
  border:1px solid currentColor; border-radius:999px;
  padding:5px 12px;
  color: var(--sf-accent-text);
}
.wlm-pill--muted{ color: var(--sf-text-3); }
.wlm-pill--solid{ background:var(--wlm-momentum); border-color:var(--wlm-momentum); color:var(--wlm-ink); }

.wlm-badge{
  display:inline-flex; align-items:center; gap:6px;
  font-family:var(--wlm-font-utility); font-weight:700; font-size:.66rem; letter-spacing:.12em;
  text-transform:uppercase; color:var(--sf-text-2);
}
.wlm-badge__dot{ width:8px; height:8px; border-radius:2px; flex:none; background:currentColor; }

/* ---------- 10 · Marken-Zeile ---------- */
.wlm-brands{ display:grid; gap:var(--wlm-s3); }
.wlm-brand-row{
  display:flex; align-items:center; gap:var(--wlm-s4);
  padding: 14px 16px;
  border-radius: 10px;
  background: var(--sf-bg-el);
  border:1px solid var(--sf-line);
}
.wlm-brand-row__dot{ width:11px; height:11px; border-radius:3px; flex:none; }
.wlm-brand-row__name{ font-family:var(--wlm-font-display); font-weight:700; font-size:1.02rem; }
.wlm-brand-row__desc{
  margin-left:auto; text-align:right;
  font-family:var(--wlm-font-utility); font-weight:700; font-size:.66rem; letter-spacing:.12em;
  text-transform:uppercase; color:var(--sf-text-3);
}

/* ---------- 11 · Header / Nav ----------
   Der Header ist ein CONTAINER, kein Media-Query-Fall: er reagiert auf seine
   eigene Breite, nicht auf die des Fensters. Dadurch stimmt die Vorschau —
   ein 380px-Header in einer 1000px-Seite zeigt wirklich die mobile Form.
   Preis: das __inner-Div ist Pflicht (ein Element kann sich nicht selbst
   abfragen). Ohne __inner greifen die @container-Regeln nicht.            */
.wlm-header{
  container-type: inline-size;
  border-bottom:1px solid var(--sf-line);
  background: var(--sf-bg);
  position: relative;
}
.wlm-header__inner{
  display:flex; align-items:center; justify-content:space-between; gap:var(--wlm-s5);
  padding: 18px 28px;
}
.wlm-header__brand{ display:flex; align-items:center; gap:var(--wlm-s3); }
.wlm-header__brand .wlm-mark{ width:36px; flex:none; }
.wlm-header__name{ font-family:var(--wlm-font-display); font-weight:800; font-size:1.05rem; letter-spacing:-.02em; }
.wlm-nav{ display:flex; align-items:center; gap:var(--wlm-s5); flex-wrap:wrap; }

/* Burger — auf breiten Headern nicht vorhanden */
.wlm-burger{
  display:none;
  width:40px; height:40px; flex:none;
  align-items:center; justify-content:center;
  background:none; border:1px solid var(--sf-line-2); border-radius:var(--wlm-radius-sm);
  cursor:pointer; padding:0;
}
.wlm-burger:focus-visible{ outline:2px solid var(--sf-focus); outline-offset:2px; }
.wlm-burger__box{ display:block; width:18px; height:12px; position:relative; }
.wlm-burger__box i{
  position:absolute; left:0; right:0; height:2px; border-radius:1px;
  background: var(--sf-text);
  transition: transform var(--wlm-dur) var(--wlm-ease), opacity var(--wlm-dur) var(--wlm-ease);
}
.wlm-burger__box i:nth-child(1){ top:0; }
.wlm-burger__box i:nth-child(2){ top:5px; }
.wlm-burger__box i:nth-child(3){ top:10px; }
/* offen = die drei Striche werden zum Kreuz */
.wlm-burger[aria-expanded="true"] .wlm-burger__box i:nth-child(1){ transform:translateY(5px) rotate(45deg); }
.wlm-burger[aria-expanded="true"] .wlm-burger__box i:nth-child(2){ opacity:0; }
.wlm-burger[aria-expanded="true"] .wlm-burger__box i:nth-child(3){ transform:translateY(-5px) rotate(-45deg); }

@container (max-width: 640px){
  .wlm-header__inner{ padding:14px 18px; }
  .wlm-burger{ display:flex; }
  .wlm-nav{
    position:absolute; top:100%; left:0; right:0; z-index:20;
    flex-direction:column; align-items:stretch; gap:0;
    padding: var(--wlm-s2) var(--wlm-s4) var(--wlm-s4);
    background: var(--sf-bg);
    border-bottom:1px solid var(--sf-line);
    /* geschlossen: aus dem Fluss UND aus dem Fokus */
    display:none;
  }
  .wlm-nav[data-open="true"]{ display:flex; }
  .wlm-nav .wlm-link--nav{
    padding: 14px 4px;
    border-bottom:1px solid var(--sf-line);
    font-size:.76rem;
  }
  .wlm-nav .wlm-btn{ margin-top: var(--wlm-s4); justify-content:center; }
}

/* ---------- 12 · Footer ---------- */
.wlm-footer{
  padding: var(--wlm-s7) var(--wlm-s6);
  border-top:1px solid var(--sf-line);
  font-family:var(--wlm-font-body);
  font-size:.8rem; letter-spacing:.02em; line-height:1.9;
  color: var(--sf-text-3);
}
.wlm-footer__row{ display:flex; justify-content:space-between; gap:var(--wlm-s5); flex-wrap:wrap; }
.wlm-footer b{ color:var(--sf-text-2); font-weight:400; }

/* ---------- 13 · Formulare ---------- */
.wlm-field{ display:flex; flex-direction:column; gap:var(--wlm-s2); }
.wlm-label{
  font-family:var(--wlm-font-utility); font-weight:700; font-size:.68rem; letter-spacing:.14em;
  text-transform:uppercase; color:var(--sf-text-3);
}
.wlm-label__req{ color:var(--sf-accent-text); }
.wlm-input,.wlm-textarea,.wlm-select{
  font-family: var(--wlm-font-body);
  font-size: .98rem;
  color: var(--sf-text);
  background: var(--sf-bg-sunk);
  border:1px solid var(--sf-line-2);
  border-radius: var(--wlm-radius-sm);
  padding: 11px 14px;
  width:100%;
  transition: border-color var(--wlm-dur) var(--wlm-ease), background var(--wlm-dur) var(--wlm-ease);
}
.wlm-input::placeholder,.wlm-textarea::placeholder{ color:var(--sf-text-3); }
.wlm-input:hover,.wlm-textarea:hover,.wlm-select:hover{ border-color:var(--sf-text-3); }
.wlm-input:focus,.wlm-textarea:focus,.wlm-select:focus{
  outline:2px solid var(--sf-focus); outline-offset:1px;
  border-color: var(--sf-accent);
}
.wlm-textarea{ min-height:104px; resize:vertical; line-height:1.55; }
.wlm-select{
  appearance:none;
  /* Chevron in Trajektorien-Richtung — als CSS-Unicode, nicht als Literal */
  background-image: linear-gradient(45deg,transparent 50%,currentColor 50%),
                    linear-gradient(135deg,currentColor 50%,transparent 50%);
  background-position: calc(100% - 19px) calc(50% + 2px), calc(100% - 14px) calc(50% + 2px);
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  padding-right: 40px;
}
.wlm-help{ font-size:.8rem; color:var(--sf-text-3); }
.wlm-error{ font-size:.8rem; color:var(--sf-danger-text,#E8836A); display:flex; align-items:center; gap:6px; }
.wlm-field--invalid .wlm-input,
.wlm-field--invalid .wlm-textarea,
.wlm-field--invalid .wlm-select{ border-color: var(--sf-danger-line,#C4553A); }
.wlm-input[disabled],.wlm-textarea[disabled],.wlm-select[disabled]{ opacity:.45; cursor:not-allowed; }

/* Checkbox / Radio / Switch */
.wlm-choice{ display:flex; align-items:flex-start; gap:var(--wlm-s3); cursor:pointer; font-size:.94rem; color:var(--sf-text-2); }
.wlm-choice input{
  appearance:none; margin:0; flex:none;
  width:18px; height:18px; margin-top:3px;
  border:1px solid var(--sf-line-2);
  background: var(--sf-bg-sunk);
  border-radius:4px;
  cursor:pointer;
  display:grid; place-content:center;
  transition: background var(--wlm-dur) var(--wlm-ease), border-color var(--wlm-dur) var(--wlm-ease);
}
.wlm-choice input[type="radio"]{ border-radius:50%; }
.wlm-choice input:hover{ border-color: var(--sf-text-3); }
.wlm-choice input:focus-visible{ outline:2px solid var(--sf-focus); outline-offset:2px; }
.wlm-choice input:checked{ background: var(--wlm-momentum); border-color: var(--wlm-momentum); }
.wlm-choice input[type="checkbox"]:checked::after{
  content:""; width:10px; height:6px;
  border-left:2px solid var(--wlm-ink); border-bottom:2px solid var(--wlm-ink);
  transform: rotate(-45deg) translate(1px,-1px);
}
.wlm-choice input[type="radio"]:checked::after{
  content:""; width:7px; height:7px; border-radius:50%; background:var(--wlm-ink);
}
.wlm-choice input[disabled]{ opacity:.4; cursor:not-allowed; }

.wlm-switch{ display:inline-flex; align-items:center; gap:var(--wlm-s3); cursor:pointer; }
.wlm-switch input{
  appearance:none; margin:0;
  width:40px; height:22px; border-radius:999px;
  background: var(--sf-bg-sunk);
  border:1px solid var(--sf-line-2);
  position:relative; cursor:pointer;
  transition: background var(--wlm-dur) var(--wlm-ease), border-color var(--wlm-dur) var(--wlm-ease);
}
.wlm-switch input::after{
  content:""; position:absolute; top:2px; left:2px;
  width:16px; height:16px; border-radius:50%;
  background: var(--sf-text-3);
  transition: transform var(--wlm-dur) var(--wlm-ease), background var(--wlm-dur) var(--wlm-ease);
}
.wlm-switch input:checked{ background: var(--wlm-momentum); border-color:var(--wlm-momentum); }
.wlm-switch input:checked::after{ transform: translateX(18px); background: var(--wlm-ink); }
.wlm-switch input:focus-visible{ outline:2px solid var(--sf-focus); outline-offset:2px; }

/* ---------- 14 · Tabelle ---------- */
.wlm-table{ width:100%; border-collapse:collapse; font-size:.92rem; }
.wlm-table th{
  text-align:left;
  font-family:var(--wlm-font-utility); font-weight:700;
  font-size:.66rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--sf-text-3);
  padding:10px 12px;
  border-bottom:1px solid var(--sf-line-2);
  white-space:nowrap;
}
.wlm-table td{
  padding:13px 12px;
  border-bottom:1px solid var(--sf-line);
  color:var(--sf-text-2);
  vertical-align:baseline;
}
.wlm-table td:first-child{ color:var(--sf-text); font-weight:500; }
.wlm-table tbody tr{ transition: background var(--wlm-dur) var(--wlm-ease); }
.wlm-table tbody tr:hover{ background: var(--sf-bg-el); }
/* tabular-nums ist hier PFLICHT: Archivo setzt Ziffern sonst proportional und die
   Tausenderstellen stehen nicht mehr untereinander. Space Mono brauchte das nie —
   beim Wechsel weg von der Monospace waere es lautlos kaputtgegangen. */
.wlm-table .wlm-num{ font-family:var(--wlm-font-utility); text-align:right;
  letter-spacing:.02em; font-variant-numeric:tabular-nums; }
.wlm-table-wrap{ overflow-x:auto; border:1px solid var(--sf-line); border-radius:var(--wlm-radius); }
.wlm-table-wrap .wlm-table td:first-child,
.wlm-table-wrap .wlm-table th:first-child{ padding-left:18px; }
.wlm-table-wrap .wlm-table tr:last-child td{ border-bottom:0; }

/* ---------- 15 · Hinweise / Alerts ----------
   Status nutzt eigene Töne — Messing bleibt der Marke vorbehalten und
   wird NICHT als "Warnung" umgedeutet. Nur der Info-Ton ist neutral.   */
.wlm{
  --sf-ok-text:#5FD39B;   --sf-ok-line:rgba(95,211,155,.34);
  --sf-warn-text:#E3B341; --sf-warn-line:rgba(227,179,65,.34);
  --sf-danger-text:#E8836A; --sf-danger-line:rgba(232,131,106,.4);
}
.wlm--light{
  --sf-ok-text:#1A6B46;   --sf-ok-line:rgba(26,107,70,.3);      /* 5.7:1 / 6.5:1 */
  --sf-warn-text:#7A5620; --sf-warn-line:rgba(122,86,32,.3);    /* 5.8:1 / 6.6:1 */
  --sf-danger-text:#A33A22; --sf-danger-line:rgba(163,58,34,.32); /* 5.8:1 / 6.6:1 */
}
.wlm-note{
  display:flex; gap:var(--wlm-s3);
  padding: 14px 16px;
  border:1px solid var(--sf-line-2);
  border-left:3px solid var(--sf-text-3);
  border-radius: var(--wlm-radius-sm);
  background: var(--sf-bg-el);
  font-size:.92rem; color:var(--sf-text-2);
}
.wlm-note__title{ font-family:var(--wlm-font-display); font-weight:700; font-size:.92rem; color:var(--sf-text); display:block; margin-bottom:3px; letter-spacing:-.01em; }
.wlm-note--info{ border-left-color: var(--sf-text-3); }
.wlm-note--ok{ border-left-color: var(--sf-ok-text); }
.wlm-note--ok .wlm-note__title{ color: var(--sf-ok-text); }
.wlm-note--warn{ border-left-color: var(--sf-warn-text); }
.wlm-note--warn .wlm-note__title{ color: var(--sf-warn-text); }
.wlm-note--danger{ border-left-color: var(--sf-danger-text); }
.wlm-note--danger .wlm-note__title{ color: var(--sf-danger-text); }

/* ---------- 16 · Hero ----------
   Der einzige Ort, an dem Messing gross auftreten darf — und auch da nur als
   Verlauf gegen Null, nie als Flaeche. Der SMV-blaue Schimmer unten links ist
   Absicht: die Marken sind da, aber im Hintergrund.                        */
.wlm-hero{
  padding: clamp(48px,8vw,110px) clamp(20px,5vw,88px);
  background:
    radial-gradient(120% 90% at 82% 8%, rgba(203,158,66,.16), transparent 55%),
    radial-gradient(90% 70% at 12% 100%, rgba(47,111,176,.10), transparent 60%),
    var(--sf-bg);
  overflow: hidden;
}
.wlm--light .wlm-hero{
  background:
    radial-gradient(120% 90% at 82% 8%, rgba(203,158,66,.20), transparent 55%),
    radial-gradient(90% 70% at 12% 100%, rgba(47,111,176,.08), transparent 60%),
    var(--sf-bg);
}
.wlm-hero__inner{ max-width:1120px; margin:0 auto; }
.wlm-hero__mark{ width:clamp(72px,10vw,120px); margin: var(--wlm-s4) 0 var(--wlm-s5); }
.wlm-hero h1{ font-size: clamp(2.4rem,8vw,6rem); font-weight:900; letter-spacing:-.045em; line-height:.98; }
.wlm-hero__sub{
  margin-top: var(--wlm-s5); max-width:56ch;
  font-size: clamp(1.02rem,1.7vw,1.34rem); color: var(--sf-text-2);
}
.wlm-hero__line{
  margin-top: var(--wlm-s7); height:2px; width:min(560px,80%);
  background: linear-gradient(90deg, var(--sf-accent), transparent);
  position:relative;
}
.wlm-hero__line::after{
  content:"\25B8\25B8";           /* Chevron als CSS-Unicode, nie als Literal/Emoji */
  position:absolute; right:-4px; top:-11px;
  color: var(--sf-accent-text); font-size:14px;
}
.wlm-hero__meta{
  margin-top: var(--wlm-s5);
  display:flex; gap:var(--wlm-s5); flex-wrap:wrap;
  font-family:var(--wlm-font-utility); font-weight:700; font-size:.68rem; letter-spacing:.14em;
  text-transform:uppercase; color: var(--sf-text-3);
}
.wlm-hero__meta b{ color: var(--sf-text-2); font-weight:700; }

/* Kompakt — Unterseiten. Kein Signet, kein Meta, halbe Hoehe. */
.wlm-hero--compact{ padding: clamp(36px,5vw,64px) clamp(20px,5vw,88px); }
.wlm-hero--compact h1{ font-size: clamp(1.9rem,4.4vw,3rem); }
.wlm-hero--compact .wlm-hero__sub{ margin-top: var(--wlm-s4); font-size:1.05rem; }

/* Einlauf-Animation — der Lead-Strich zeichnet sich, der Titel steigt auf.
   Bewusst nur hier, nicht auf Unterseiten.                                  */
.wlm-hero--animate .wlm-eyebrow{ opacity:0; animation: wlm-rise .7s .1s forwards; }
.wlm-hero--animate .wlm-hero__mark .t2{ opacity:0; animation: wlm-fade .6s .25s forwards; }
.wlm-hero--animate .wlm-hero__mark .t1{ opacity:0; animation: wlm-fade .6s .38s forwards; }
.wlm-hero--animate .wlm-hero__mark .lead{ stroke-dasharray:170; stroke-dashoffset:170; animation: wlm-draw .7s .55s forwards; }
.wlm-hero--animate h1 span{ display:block; overflow:hidden; }
.wlm-hero--animate h1 span i{ display:block; font-style:normal; transform:translateY(102%); animation: wlm-rise .85s forwards; }
.wlm-hero--animate h1 span:nth-child(2) i{ animation-delay:.14s; }
.wlm-hero--animate .wlm-hero__sub{ opacity:0; animation: wlm-rise .8s .5s forwards; }
.wlm-hero--animate .wlm-hero__line{ width:0; animation: wlm-grow 1.1s .7s forwards; }
.wlm-hero--animate .wlm-hero__meta{ opacity:0; animation: wlm-rise .8s .8s forwards; }

@keyframes wlm-rise{ to{ opacity:1; transform:translateY(0) } }
@keyframes wlm-fade{ to{ opacity:1 } }
@keyframes wlm-draw{ to{ stroke-dashoffset:0 } }
@keyframes wlm-grow{ to{ width:min(560px,80%) } }

/* ---------- 17 · Reduced motion ----------
   Animation abschalten reicht NICHT: die Startzustaende (opacity:0,
   translateY, stroke-dashoffset) wuerden bleiben und der Hero waere leer.
   Darum jeder animierte Zustand hier explizit zurueck auf sichtbar.        */
@media (prefers-reduced-motion: reduce){
  .wlm *{ transition:none !important; animation:none !important; }
  .wlm-hero--animate .wlm-eyebrow,
  .wlm-hero--animate .wlm-hero__sub,
  .wlm-hero--animate .wlm-hero__meta{ opacity:1; transform:none; }
  .wlm-hero--animate h1 span i{ transform:none; }
  .wlm-hero--animate .wlm-hero__mark .t1,
  .wlm-hero--animate .wlm-hero__mark .t2{ opacity:1; }
  .wlm-hero--animate .wlm-hero__mark .lead{ stroke-dashoffset:0; }
  .wlm-hero--animate .wlm-hero__line{ width:min(560px,80%); }
}