/* ==========================================================================
   EHWA Europe – Stylesheet
   Umsetzung von docs/design-guide.md. Alle Werte stammen aus den dort
   festgelegten Tokens. Keine freien Hex-Werte ausserhalb des :root-Blocks.
   Kein Framework, kein JavaScript.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Schriften – selbst gehostet unter public/assets/fonts/
   Kein Google-Fonts-CDN: die Seite darf beim Aufruf keine Verbindung zu
   Dritten aufbauen (DSGVO). Alle drei Familien stehen unter der SIL Open
   Font License 1.1, Selbsthosting ist damit zulaessig.
   Subsets: latin und latin-ext. Fuer eine spaetere koreanische Fassung
   fehlt noch eine passende Familie.
   -------------------------------------------------------------------------- */

@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/inter-400-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;
  font-display: swap;
  src: url("/assets/fonts/inter-400-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;
}

@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/assets/fonts/inter-500-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: 500;
  font-display: swap;
  src: url("/assets/fonts/inter-500-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;
}

@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/assets/fonts/inter-600-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: 600;
  font-display: swap;
  src: url("/assets/fonts/inter-600-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;
}

@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/assets/fonts/inter-700-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: 700;
  font-display: swap;
  src: url("/assets/fonts/inter-700-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;
}

@font-face {
  font-family: "Michroma";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/michroma-400-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: "Michroma";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/michroma-400-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;
}

@font-face {
  font-family: "Montserrat";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/assets/fonts/montserrat-600-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: "Montserrat";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/assets/fonts/montserrat-600-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;
}

@font-face {
  font-family: "Montserrat";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/assets/fonts/montserrat-700-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: "Montserrat";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/assets/fonts/montserrat-700-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;
}

:root {
  /* --- Farbe ------------------------------------------------------------ */
  /* Markenblau. Aufgeteilt, weil #028ee0 nur 3,53:1 erreicht und damit fuer
     Text unter WCAG AA liegt. Akzentblau bleibt die Markenfarbe fuer Flaechen,
     Rahmen, Icons und den Headerverlauf; Textblau gilt fuer alles Lesbare.   */
  --c-blue: #028ee0;          /* Akzent: Flaechen, Rahmen, Icons, Verlauf     */
  --c-blue-text: #0272b4;     /* Text: Links, Kicker, Buttons  – 5,16:1       */
  --c-blue-dark: #075a8a;     /* Hover auf Textblau            – 7,40:1       */
  --c-blue-tint: #ebf6fd;     /* Chipflaeche, deckend statt transparent       */
  --c-blue-tint-line: #bfe0f6;
  --c-green: #a0ce4e;         /* nur Signal: Regel, aktive Nav, Verlauf      */
  --c-anthracite: #172033;    /* Hero, Footer, Aussagen-Sektionen            */
  --c-anthracite-2: #1e2a41;  /* abgesetzte Flaeche auf Anthrazit            */

  --c-surface: #ffffff;
  --c-surface-alt: #f4f7fa;
  --c-line: #e2e8f0;

  --c-text: #172033;
  --c-text-muted: #55627a;
  --c-text-weak: #5f6e85;   /* AA auf Weiss (5.18) und auf #f4f7fa (4.82) */
  --c-on-dark: #ffffff;
  --c-on-dark-muted: #a8b4c8;
  --c-on-dark-line: rgba(255, 255, 255, .14);

  /* --- Typografie ------------------------------------------------------- */
  --f-brand: "Michroma", "Montserrat", "Segoe UI", system-ui, sans-serif;
  --f-head: "Montserrat", "Segoe UI", system-ui, -apple-system, sans-serif;
  --f-body: "Inter", "Segoe UI", system-ui, -apple-system, sans-serif;
  --f-mono: ui-monospace, "Cascadia Mono", "Consolas", monospace;

  /* --- Raster ----------------------------------------------------------- */
  --w-container: 1320px;
  --pad-container: 28px;
  --gap-section: 104px;        /* Startseite                                 */
  --gap-section-sub: 80px;     /* Unterseiten                                */

  /* --- Radien ----------------------------------------------------------- */
  --r-chip: 5.6px;
  --r-control: 10.4px;
  --r-tile: 13.6px;
  --r-card: 16px;
  --r-panel: 20px;

  /* --- Schatten --------------------------------------------------------- */
  --sh-card: 0 1px 2px rgba(23, 32, 51, .04), 0 8px 24px rgba(23, 32, 51, .06);
  --sh-card-hover: 0 2px 4px rgba(23, 32, 51, .06), 0 14px 34px rgba(23, 32, 51, .10);

  /* --- Bewegung --------------------------------------------------------- */
  --ease: cubic-bezier(.22, .61, .36, 1);
  --t-fast: 180ms;
  --t-mid: 260ms;
  --t-slow: 420ms;

  /* --- Bearbeitungsgold ------------------------------------------------- */
  /* Ausschliesslich fuer die markierte Schleifflaeche in der interaktiven
     Werkstueckgrafik. Bewusst kein zweiter Markenton: Blau ist auf der Seite
     bereits als Bedienfarbe belegt, die bearbeitete Flaeche braucht dagegen
     einen Ton, der wie warmes Metall wirkt und sich vom kalten Stahl im
     Renderbild abhebt.

     Die drei Verlaufstoene sind bewusst hell gehalten: die Flaeche wird
     multiplizierend ueber das Renderbild gelegt, damit Reflexe, Riefen und
     Bohrungen des Metalls sichtbar bleiben, statt zugedeckt zu werden. Beim
     Multiplizieren dunkelt jeder Ton ab – ein sattes Gold wuerde die Flaeche
     schwarz zulaufen lassen. Fuer Text und Rahmen dienen deshalb die beiden
     unteren Toene, nicht die Verlaufstoene. */
  --c-gold-auf-1: #f2cd7d;
  --c-gold-auf-2: #e8b44a;
  --c-gold-auf-3: #cf9a35;
  --c-gold: #c8912f;
  --c-gold-hell: #e8bb63;
  --c-gold-kante: #f0c877;
  --c-gold-tief: #9a6b1c;
}

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

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--f-body);
  font-size: 17px;
  line-height: 1.65;
  color: var(--c-text);
  background: var(--c-surface);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  /* Fuellmodus bewusst "backwards" und nicht "both": bei "both" behaelt der
     Koerper nach dem Einblenden dauerhaft eine (wenn auch neutrale)
     transform- und filter-Angabe. Das macht ihn zum Bezugsrahmen fuer
     position: fixed – Consent-Dialog und Katalogansicht haengen dann am
     Dokument statt am Fenster. "backwards" wirkt nur vor dem Start, das
     Einblenden sieht identisch aus. */
  animation: page-fade-in var(--t-slow) ease backwards;
}

@keyframes page-fade-in {
  from { opacity: 0; transform: translateY(10px); filter: blur(2px); }
  to   { opacity: 1; transform: none;             filter: none; }
}

/* Sanfte Seitenüberblendung beim Sprachwechsel (und generell bei Navigation)
   in Browsern mit View-Transitions-Unterstützung; degradiert andernfalls
   unauffällig zum Fade-in oben. */
@view-transition {
  navigation: auto;
}

h1, h2, h3, h4 {
  font-family: var(--f-head);
  font-weight: 700;
  line-height: 1.18;
  letter-spacing: -.01em;
  margin: 0 0 .5em;
  color: var(--c-text);
}
h1 { font-size: clamp(34px, 4.2vw, 52px); }
h2 { font-size: clamp(27px, 3.1vw, 38px); }
h3 { font-size: 21px; font-weight: 600; }
h4 { font-size: 17px; font-weight: 600; }

p { margin: 0 0 1.1em; }
p:last-child { margin-bottom: 0; }

a { color: var(--c-blue-text); text-decoration: none; }
a:hover { color: var(--c-blue-dark); text-decoration: underline; text-underline-offset: 3px; }

img { max-width: 100%; height: auto; display: block; }

:focus-visible {
  outline: 2px solid var(--c-blue);
  outline-offset: 2px;
  border-radius: 3px;
}

/* Zahlen immer tabellarisch */
.num, td.num, .stat-value, .spec-value { font-variant-numeric: tabular-nums; }

/* --------------------------------------------------------------------------
   Bausteine
   -------------------------------------------------------------------------- */

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

.skip-link {
  position: absolute; left: -9999px;
  background: var(--c-blue-text); color: #fff;
  padding: .7rem 1.1rem; z-index: 200; border-radius: var(--r-control);
}
.skip-link:focus { left: 16px; top: 16px; }

/* Kicker – uppercase, .18em, blau */
.kicker {
  display: block;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--c-blue-text);
  margin: 0 0 14px;
}
.kicker--on-dark { color: var(--c-green); }

/* 2px-Regel in Gruen – das Signalelement */
.rule {
  width: 46px; height: 2px;
  background: var(--c-green);
  border: 0; margin: 0 0 22px;
}

.lead {
  font-size: 19px;
  line-height: 1.6;
  color: var(--c-text-muted);
  max-width: 68ch;
}
.lead--on-dark { color: var(--c-on-dark-muted); }

.section { padding: var(--gap-section) 0; }
.section--sub { padding: var(--gap-section-sub) 0; }
.section--alt,
.section-alt { background: var(--c-surface-alt); }   /* Altname – uebrige Seiten */
.section--dark { background: var(--c-anthracite); color: var(--c-on-dark); }
.section--dark h1,
.section--dark h2,
.section--dark h3 { color: var(--c-on-dark); }
/* Textblau traegt auf Anthrazit nicht – Links werden weiss, Hover gruen. */
.section--dark a, .hero a:not(.btn), .panel a { color: var(--c-on-dark); }
.section--dark a:hover, .hero a:not(.btn):hover, .panel a:hover { color: var(--c-green); }

.section-head { max-width: 74ch; margin-bottom: 44px; }
.section-head p { color: var(--c-text-muted); margin-bottom: 0; }
.section--dark .section-head p { color: var(--c-on-dark-muted); }

/* --------------------------------------------------------------------------
   Buttons
   -------------------------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  padding: 12px 22px;
  border: 1px solid transparent;
  border-radius: var(--r-control);
  font-family: var(--f-body);
  font-size: 15px;
  font-weight: 600;
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
  transition: background var(--t-fast) var(--ease),
              border-color var(--t-fast) var(--ease),
              color var(--t-fast) var(--ease);
}
.btn:hover { text-decoration: none; }
.btn svg { flex: none; }

/* Grundzustand ist der Primaerbutton; Modifier ueberschreiben ihn. */
.btn, .btn--primary { background: var(--c-blue-text); color: #fff; }
.btn:hover, .btn--primary:hover { background: var(--c-blue-dark); color: #fff; }

.btn--secondary,
.btn-secondary {          /* Altname – noch auf den uebrigen Seiten in Gebrauch */
  background: transparent;
  color: var(--c-blue-text);
  border-color: var(--c-line);
}
.btn--secondary:hover,
.btn-secondary:hover { border-color: var(--c-blue); color: var(--c-blue-dark); background: #fff; }

/* auf dunklem Grund: Hover-Rahmen in Gruen */
.btn--ghost-dark {
  background: transparent;
  color: var(--c-on-dark);
  border-color: rgba(255, 255, 255, .28);
}
.btn--ghost-dark:hover { border-color: var(--c-green); color: var(--c-on-dark); }

.btn--lg { min-height: 52px; padding: 15px 28px; font-size: 16px; }

.btn-row { display: flex; flex-wrap: wrap; gap: 14px; }

/* --------------------------------------------------------------------------
   Chips
   -------------------------------------------------------------------------- */

.chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 10px;
  border-radius: var(--r-chip);
  font-size: 12px;
  font-weight: 500;
  line-height: 1.35;
  letter-spacing: .01em;
  border: 1px solid var(--c-line);
  background: var(--c-surface-alt);
  color: var(--c-text-muted);
  white-space: nowrap;
}
.chip--accent { background: var(--c-blue-tint); border-color: var(--c-blue-tint-line); color: var(--c-blue-text); }
.chip--mono { font-family: var(--f-mono); font-size: 11.5px; letter-spacing: 0; }

/* Platzhalter – markiert unbelegte Stellen, siehe design-guide.md §8 */
.chip--fixed {
  background: repeating-linear-gradient(135deg, #fff, #fff 6px, #f4f7fa 6px, #f4f7fa 12px);
  border-style: dashed;
  border-color: #c6d0dd;
  color: var(--c-text-weak);
}

.chip-row { display: flex; flex-wrap: wrap; gap: 7px; }

/* --------------------------------------------------------------------------
   Karten und Raster
   -------------------------------------------------------------------------- */

.grid {
  display: grid;
  gap: 24px;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}
.grid > * { min-width: 0; }
.grid--3 { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.grid--cards { grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); }
.grid--tiles { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 20px; }

.card {
  background: var(--c-surface);
  border: 1px solid var(--c-line);
  border-radius: var(--r-card);
  box-shadow: var(--sh-card);
  padding: 26px;
  display: flex;
  flex-direction: column;
}

.card--interactive {
  text-decoration: none;
  color: inherit;
  transition: transform var(--t-mid) var(--ease),
              box-shadow var(--t-mid) var(--ease),
              border-color var(--t-mid) var(--ease);
}
.card--interactive:hover {
  transform: translateY(-2px);
  box-shadow: var(--sh-card-hover);
  border-color: #cfdae7;
  text-decoration: none;
  color: inherit;
}

.card--flush { padding: 0; overflow: hidden; }
.card--flush .card-body { padding: 22px 24px 26px; }

.card-media { background: var(--c-surface-alt); aspect-ratio: 16 / 10; overflow: hidden; }
.card-media img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--t-slow) var(--ease); }
.card--interactive:hover .card-media img { transform: scale(1.03); }

.card-meta {
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--c-text-weak);
  margin-bottom: 10px;
}
.card h3 { margin-bottom: 10px; }
.card p { font-size: 15px; color: var(--c-text-muted); margin-bottom: 18px; }
.card .chip-row { margin-top: auto; }

/* Verweis-Zeile am Kartenfuss */
.card-link {
  display: inline-flex; align-items: center; gap: 8px;
  margin-top: 18px;
  font-size: 14px; font-weight: 600; color: var(--c-blue-text);
}
.card--interactive:hover .card-link svg { transform: translateX(5px); }
.card-link svg { transition: transform var(--t-fast) var(--ease); }

/* --------------------------------------------------------------------------
   Kennzahlen
   -------------------------------------------------------------------------- */

.stats { display: grid; gap: 1px; background: var(--c-on-dark-line); border-radius: var(--r-tile); overflow: hidden; }
.stats--4 { grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); }
.stat { background: var(--c-anthracite); padding: 22px 20px; }
.section--dark .stat { background: var(--c-anthracite); }
.stat-value {
  font-family: var(--f-head);
  font-size: 30px; font-weight: 700; line-height: 1.1;
  color: var(--c-on-dark);
  letter-spacing: -.02em;
}
.stat-label {
  display: block; margin-top: 6px;
  font-size: 11.5px; font-weight: 600; letter-spacing: .12em;
  text-transform: uppercase; color: var(--c-on-dark-muted);
}

/* Kennzahlen auf hellem Grund */
.stats--light .stat { background: var(--c-surface); }
.stats--light { background: var(--c-line); border: 1px solid var(--c-line); }
.stats--light .stat-value { color: var(--c-text); }
.stats--light .stat-label { color: var(--c-text-weak); }

/* Unbelegte Kennzahl, siehe design-guide.md §3.2 – abgesetzt statt hell,
   damit sie auf dunklem Grund lesbar bleibt. */
.stat--pending { background: var(--c-anthracite-2); }
.stat--pending .stat-value { color: var(--c-on-dark-muted); font-size: 22px; }
.stats--light .stat--pending { background: var(--c-surface-alt); }
.stats--light .stat--pending .stat-value { color: var(--c-text-weak); }

/* --------------------------------------------------------------------------
   Kacheln (Prozessgrenzen, Nutzen)
   -------------------------------------------------------------------------- */

.tile {
  background: var(--c-surface);
  border: 1px solid var(--c-line);
  border-radius: var(--r-tile);
  padding: 22px;
}
.section--alt .tile { background: var(--c-surface); }
.tile-icon { color: var(--c-blue); margin-bottom: 14px; }
.tile h3 { font-size: 17px; margin-bottom: 8px; }
.tile p { font-size: 14.5px; color: var(--c-text-muted); margin: 0; }

/* --------------------------------------------------------------------------
   Panel
   -------------------------------------------------------------------------- */

.panel {
  background: var(--c-anthracite);
  color: var(--c-on-dark);
  border-radius: var(--r-panel);
  padding: 44px;
}
.panel h2, .panel h3 { color: var(--c-on-dark); }
.panel p { color: var(--c-on-dark-muted); }

/* --------------------------------------------------------------------------
   Downloadliste
   -------------------------------------------------------------------------- */

.filter-bar { margin-bottom: 22px; }

/* Kategorie-Filter (CSS-only, ohne JavaScript) */
.filter-bar:has(#filter-katalog:checked) ~ .doc-list .doc-item:not(.cat-katalog),
.filter-bar:has(#filter-datenblatt:checked) ~ .doc-list .doc-item:not(.cat-datenblatt),
.filter-bar:has(#filter-kurzinfo:checked) ~ .doc-list .doc-item:not(.cat-kurzinfo) {
  display: none;
}

.doc-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--c-line); }
.doc-item {
  display: flex; flex-wrap: wrap; align-items: center; gap: 16px;
  padding: 18px 4px;
  border-bottom: 1px solid var(--c-line);
  transition: transform .18s var(--ease), box-shadow .18s var(--ease);
}
.doc-item:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 30px rgba(15, 35, 60, .07);
}
.doc-item:hover .doc-arrow { transform: translateY(4px); }
.doc-arrow { display: inline-block; transition: transform .22s var(--ease); }
.doc-icon { color: var(--c-text-weak); flex: none; }
.doc-thumb {
  width: 44px; height: 44px; flex: none;
  object-fit: cover; border-radius: var(--r-control);
  border: 1px solid var(--c-line);
}
/* Quer angelegte Dokumente: gleiche Zeilenhoehe, breiteres Bild statt Beschnitt. */
.doc-thumb--wide { width: 78px; }
.doc-main { flex: 1 1 260px; min-width: 0; }
.doc-title { font-size: 16px; font-weight: 600; margin: 0 0 3px; }
.doc-meta { font-size: 12px; color: var(--c-text-weak); font-variant-numeric: tabular-nums; }
.doc-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.doc-dl {
  display: inline-flex; align-items: center; gap: 7px;
  min-height: 44px; padding: 10px 14px;
  border: 1px solid var(--c-line); border-radius: var(--r-control);
  font-size: 13.5px; font-weight: 600; color: var(--c-blue-text);
  transition: border-color var(--t-fast) var(--ease), background var(--t-fast) var(--ease);
}
.doc-dl:hover { border-color: var(--c-blue); background: rgba(2, 142, 224, .05); text-decoration: none; }

/* --------------------------------------------------------------------------
   Formular
   -------------------------------------------------------------------------- */

.form-grid { display: grid; gap: 20px; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.form-grid > * { min-width: 0; }
.field-full { grid-column: 1 / -1; }

.field-label {
  display: block;
  font-size: 11.5px; font-weight: 700;
  letter-spacing: .05em; text-transform: uppercase;
  color: var(--c-text-muted);
  margin-bottom: 7px;
}
.field-label .req { color: var(--c-blue-text); }

.input, .select, .textarea {
  width: 100%;
  min-height: 46px;
  padding: 11px 14px;
  font-family: var(--f-body);
  font-size: 15px;
  color: var(--c-text);
  background: var(--c-surface);
  border: 1px solid var(--c-line);
  border-radius: var(--r-control);
  transition: border-color var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease);
}
.input:focus, .select:focus, .textarea:focus {
  outline: none;
  border-color: var(--c-blue);
  box-shadow: 0 0 0 3px rgba(2, 142, 224, .14);
}
.textarea { min-height: 118px; resize: vertical; line-height: 1.6; }
.field-hint { font-size: 12px; color: var(--c-text-weak); margin: 7px 0 0; }

.form-note {
  font-size: 13px; color: var(--c-text-muted);
  border-left: 2px solid var(--c-green);
  padding-left: 14px; margin: 0;
}

/* Auswahl-Chips im Formular (CSS-only, ohne JavaScript) */
.chip-choice { display: flex; flex-wrap: wrap; gap: 8px; }
.chip-choice input { position: absolute; opacity: 0; pointer-events: none; }
.chip-choice label {
  display: inline-flex; align-items: center;
  min-height: 36px; padding: 7px 13px;
  border: 1px solid var(--c-line); border-radius: var(--r-chip);
  background: var(--c-surface);
  font-size: 13.5px; color: var(--c-text-muted); cursor: pointer;
  transition: border-color var(--t-fast) var(--ease), background var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.chip-choice label:hover { border-color: #cfdae7; }
.chip-choice input:checked + label {
  border-color: var(--c-blue);
  background: var(--c-blue-tint);
  color: var(--c-blue-text);
  font-weight: 600;
}
.chip-choice input:focus-visible + label { outline: 2px solid var(--c-blue); outline-offset: 2px; }

/* Textbaustein-Buttons, z. B. "Ziel der Anfrage" (CSS-only nutzbar, JS legt nur Text ein) */
.suggest-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 10px; }
.suggest-chip {
  display: inline-flex; align-items: center;
  min-height: 36px; padding: 7px 13px;
  border: 1px solid var(--c-line); border-radius: var(--r-chip);
  background: var(--c-surface);
  font-family: var(--f-body); font-size: 13.5px; color: var(--c-text-muted); cursor: pointer;
  transition: border-color var(--t-fast) var(--ease), background var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.suggest-chip:hover { border-color: #cfdae7; }
.suggest-chip:focus-visible { outline: 2px solid var(--c-blue); outline-offset: 2px; }

/* --------------------------------------------------------------------------
   Koernungsrechner (/koernungsrechner/)
   -------------------------------------------------------------------------- */

/* Zweispalter: Eingabe links, Ergebnis rechts und beim Scrollen mitlaufend.
   Unter 900px stapelt es, das Ergebnis rutscht dann unter das Formular. */
.kr-layout {
  display: grid;
  gap: 40px;
  grid-template-columns: minmax(0, 1fr) minmax(0, 340px);
  align-items: start;
}

.kr-form { display: flex; flex-direction: column; gap: 30px; min-width: 0; }
.kr-field { min-width: 0; border: 0; padding: 0; margin: 0; }
.kr-field > legend { padding: 0; }
.kr-row { display: grid; gap: 24px; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
.kr-submit { align-self: start; }

/* --- Ergebnisspalte ------------------------------------------------------ */

.kr-output {
  position: sticky; top: 96px;
  padding: 22px;
  border: 1px solid var(--c-line); border-radius: var(--r-card);
  background: var(--c-surface-alt);
}
.kr-output-title {
  font-family: var(--f-head); font-size: 12px; font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase;
  color: var(--c-text-muted); margin: 0 0 14px;
}
.kr-platzhalter { font-size: 14px; color: var(--c-text-weak); margin: 0; line-height: 1.6; }

.kr-fehler {
  padding: 13px 15px; margin: 0;
  border: 1px solid var(--c-line); border-radius: var(--r-control);
  background: var(--c-surface); color: var(--c-text-muted); font-size: 14px;
}

.kr-result {
  padding: 20px;
  background: var(--c-surface); border: 1px solid var(--c-line); border-radius: var(--r-card);
  box-shadow: var(--sh-card);
}

.confidence-badge {
  display: inline-flex; align-items: center;
  padding: 5px 12px; border-radius: var(--r-chip);
  font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  margin-bottom: 16px;
}
.confidence-badge--ehwa-verified { background: rgba(160, 206, 78, .18); color: #4c6b1f; }
.confidence-badge--manufacturer-validated { background: var(--c-blue-tint); color: var(--c-blue-text); }
/* Schaetzung bewusst optisch abgesetzt: gestrichelt, damit der Unterschied
   zu belegten Werten auf einen Blick erkennbar bleibt. */
.confidence-badge--ehwa-estimate {
  background: var(--c-surface-alt); color: var(--c-text-muted);
  border: 1px dashed var(--c-text-weak);
}
.confidence-badge--screening-only { background: var(--c-surface-alt); color: var(--c-text-weak); border: 1px dashed var(--c-line); }
.confidence-badge--review { background: var(--c-surface-alt); color: var(--c-text-muted); border: 1px dashed var(--c-line); }

.kr-result-grid { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); margin-bottom: 16px; }
.kr-stat-label {
  display: block; font-size: 10.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
  color: var(--c-text-muted); margin-bottom: 4px;
}
.kr-stat-value { font-family: var(--f-head); font-size: 18px; font-weight: 600; color: var(--c-text); }
.kr-stat-value--lg { font-size: 26px; color: var(--c-blue-text); }

.kr-expected { font-size: 14.5px; color: var(--c-text); margin: 0 0 10px; line-height: 1.6; }
.kr-note { font-size: 12.5px; color: var(--c-text-muted); margin: 0 0 8px; line-height: 1.55; }
.kr-disclaimer {
  font-size: 12px; color: var(--c-text-muted); margin: 14px 0 0;
  padding-top: 14px; border-top: 1px solid var(--c-line); line-height: 1.55;
}
.kr-cta { margin-top: 16px; width: 100%; justify-content: center; }
.kr-noscript { margin-top: 16px; }

/* --- Datengrundlage ------------------------------------------------------ */

.kr-details {
  border: 1px solid var(--c-line); border-radius: var(--r-card);
  background: var(--c-surface);
}
.kr-details > summary {
  padding: 18px 22px; cursor: pointer;
  font-family: var(--f-head); font-size: 16px; font-weight: 600; color: var(--c-blue-text);
  list-style: none;
}
.kr-details > summary::-webkit-details-marker { display: none; }
.kr-details > summary::before { content: "+"; display: inline-block; width: 1.2em; font-weight: 700; }
.kr-details[open] > summary::before { content: "\2013"; }
.kr-details > summary:focus-visible { outline: 2px solid var(--c-blue); outline-offset: -2px; }
.kr-details-body { padding: 0 22px 24px; }
.kr-tables { display: grid; gap: 28px; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); }
.kr-table-head { margin-top: 28px; }
.kr-limits { font-size: 14.5px; color: var(--c-text-muted); line-height: 1.7; margin-bottom: 16px; max-width: 78ch; }

@media (max-width: 900px) {
  .kr-layout { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .kr-output { position: static; }
}

/* --------------------------------------------------------------------------
   Header
   -------------------------------------------------------------------------- */

.site-header {
  position: sticky; top: 0; z-index: 100;
  background: var(--c-surface);
  border-bottom: 1px solid var(--c-line);
}
/* 3px-Verlauf, rechtes Ende gruen – zugleich Scroll-Fortschritt.
   Die Spur liegt darunter, der Balken wird von scroll-progress.js skaliert.
   Ohne JavaScript bleibt er bei scaleX(1) und sieht aus wie zuvor. */
.header-progress {
  height: 3px;
  background: rgba(2, 142, 224, .14);
  overflow: hidden;
}
.header-progress span {
  display: block; height: 100%; width: 100%;
  transform-origin: 0 50%;
  background: linear-gradient(90deg, var(--c-anthracite) 0%, var(--c-blue) 62%, var(--c-green) 100%);
}

/* Die Kopfzeile ist eine Navigationsleiste, kein Textlayout: sie darf
   breiter laufen als der 1320px-Inhaltscontainer. Mit acht Hauptpunkten,
   Wortmarke, Sprachwahl und Anfrage-Knopf passt sie sonst bei keiner
   Fensterbreite nebeneinander - das war schon vor dem Koernungsrechner so
   und erzeugte einen waagerechten Scrollbalken. */
.site-header .container { max-width: 1720px; }

.header-inner {
  display: flex; align-items: center; gap: 24px;
  min-height: 130px;
}

.brand { display: flex; flex-direction: row; align-items: center; gap: 12px; text-decoration: none; flex: none; }
.brand:hover { text-decoration: none; }
.brand-divider {
  display: block; width: 1px; height: 38px; flex: none;
  background: var(--c-line);
}
.brand-text { display: flex; flex-direction: column; gap: 4px; }
.brand-name {
  font-family: var(--f-body);
  font-size: 16px; font-weight: 600; letter-spacing: 0;
  color: var(--c-anthracite); line-height: 1;
}
/* Logo-Wortmarke: eingefaerbte Maske aus der einfarbigen Vorlage
   (public/images/EHWA_logo_transparent-1.webp), damit sie auf dem
   hellen Header-Hintergrund sichtbar ist, ohne eine zweite Bilddatei
   zu benoetigen. */
.brand-logo {
  display: block; width: 120px; height: 40px; flex: none;
  background-color: var(--c-blue);
  -webkit-mask-image: url('/images/EHWA_logo_transparent-1-trimmed.webp');
  mask-image: url('/images/EHWA_logo_transparent-1-trimmed.webp');
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-position: left center; mask-position: left center;
  -webkit-mask-size: contain; mask-size: contain;
}
.brand-sub {
  font-size: 10px; font-weight: 500; letter-spacing: .12em;
  text-transform: uppercase; color: var(--c-text-weak); line-height: 1;
  opacity: .75;
}

.site-nav { margin-left: auto; }
.site-nav > ul { list-style: none; display: flex; align-items: center; gap: 2px; margin: 0; padding: 0; }
.site-nav a {
  display: flex; align-items: center;
  min-height: 44px; padding: 10px 8px;
  font-size: 14px; font-weight: 500; color: var(--c-text);
  border-radius: var(--r-control);
  transition: color var(--t-fast) var(--ease), background var(--t-fast) var(--ease);
}
.site-nav a:hover { color: var(--c-blue-text); background: var(--c-surface-alt); text-decoration: none; }
.site-nav a[aria-current="page"] { color: var(--c-blue-text); font-weight: 600; }

/* aktive Navigation: gruene 2px-Marke */
.site-nav > ul > li > a[aria-current="page"] { position: relative; }
.site-nav > ul > li > a[aria-current="page"]::after {
  content: ""; position: absolute; left: 8px; right: 8px; bottom: 4px;
  height: 2px; background: var(--c-green);
}

.has-children { position: relative; }
.submenu {
  list-style: none; margin: 0; padding: 6px;
  position: absolute; left: 0; top: 100%; min-width: 268px;
  background: #fff; border: 1px solid var(--c-line);
  border-radius: var(--r-card); box-shadow: var(--sh-card-hover);
  display: none; flex-direction: column;
}
.has-children:hover > .submenu,
.has-children:focus-within > .submenu { display: flex; }
.submenu a { font-size: 14px; border-radius: var(--r-chip); }

.header-actions { display: flex; align-items: center; gap: 14px; flex: none; }

.lang-switch { display: flex; align-items: center; gap: 2px; }
.lang-switch a {
  min-width: 34px; min-height: 34px;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 600; letter-spacing: .06em;
  color: var(--c-text-weak); border-radius: var(--r-chip);
}
.lang-switch a:hover { color: var(--c-blue-text); background: var(--c-surface-alt); text-decoration: none; }
.lang-switch a[aria-current="true"] { color: var(--c-anthracite); background: var(--c-surface-alt); }
.lang-switch [aria-disabled="true"] { opacity: .45; pointer-events: none; }

/* Mobile Navigation – CSS-only ueber Checkbox */
.nav-toggle { position: absolute; opacity: 0; pointer-events: none; }
.nav-toggle-label {
  display: none; align-items: center; justify-content: center;
  width: 44px; height: 44px; margin-left: auto;
  border: 1px solid var(--c-line); border-radius: var(--r-control);
  cursor: pointer;
}
.nav-toggle-label span { display: block; width: 20px; height: 2px; background: var(--c-anthracite); position: relative; }
.nav-toggle-label span::before,
.nav-toggle-label span::after {
  content: ""; position: absolute; left: 0; width: 20px; height: 2px; background: var(--c-anthracite);
}
.nav-toggle-label span::before { top: -6px; }
.nav-toggle-label span::after { top: 6px; }

/* --------------------------------------------------------------------------
   Hero
   -------------------------------------------------------------------------- */

.hero {
  position: relative;
  background: var(--c-anthracite);
  color: var(--c-on-dark);
  padding: 96px 0 0;
  overflow: hidden;
}
.hero h1 { color: var(--c-on-dark); max-width: 17ch; margin-bottom: 22px; }
.hero .lead { color: var(--c-on-dark-muted); max-width: 56ch; margin-bottom: 32px; }

.hero-inner {
  display: grid;
  gap: 48px;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
  align-items: center;
}
.hero-body { padding-bottom: 72px; }

.hero-figure { position: relative; display: flex; justify-content: center; align-items: center; min-height: 320px; }
.hero-disc {
  width: min(88%, 400px);
  aspect-ratio: 1;
  border-radius: 50%;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .12);
}
.hero-disc img { width: 100%; height: 100%; object-fit: cover; }

/* Die Drehung der Scheibe steuert behaviors/hero.js: scrollgebunden plus
   langsame Eigendrehung, in allen Browsern gleich. Die fruehere Loesung ueber
   animation-timeline: scroll(root) wirkte nur in Chromium und wuerde sich mit
   der JS-Variante auf demselben Element ins Gehege kommen. */

/* Konzentrische Deko-Ringe hinter der Scheibe. Gestrichelt, weil eine
   durchgezogene Linie beim Drehen stillzustehen scheint. */
.hero-ring {
  position: absolute;
  top: 50%; left: 50%;
  border-radius: 50%;
  pointer-events: none;
  animation: hero-ring 46s linear infinite;
}
.hero-ring--outer {
  width: 640px; height: 640px;
  margin: -320px 0 0 -320px;
  border: 1px dashed rgba(160, 206, 78, .14);
  animation-duration: 72s;
  animation-direction: reverse;
}
.hero-ring--inner {
  width: 520px; height: 520px;
  margin: -260px 0 0 -260px;
  border: 1px dashed rgba(255, 255, 255, .14);
}
@keyframes hero-ring {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

.hero-stats { border-top: 1px solid var(--c-on-dark-line); }
.hero-stats .stats { border-radius: 0; }

/* --------------------------------------------------------------------------
   Ansprechpartner
   -------------------------------------------------------------------------- */

.person {
  background: var(--c-anthracite-2);
  border: 1px solid var(--c-on-dark-line);
  border-radius: var(--r-card);
  padding: 22px;
  transition: border-color var(--t-mid) var(--ease);
}
.person:hover { border-color: var(--c-green); }
.person { display: flex; flex-direction: column; }

.person-photo {
  width: 76px; height: 76px; border-radius: 50%;
  object-fit: cover;
  border: 1px solid rgba(255, 255, 255, .16);
  margin-bottom: 16px;
  background: rgba(255, 255, 255, .06);
}
/* Kein Portrait vorhanden – gestrichelt statt erfundenem Bild */
.person-photo--leer {
  display: flex; align-items: center; justify-content: center;
  border-style: dashed; border-color: rgba(255, 255, 255, .22);
  color: var(--c-on-dark-muted);
}

.person-name { font-family: var(--f-head); font-size: 17px; font-weight: 600; color: var(--c-on-dark); margin: 0 0 3px; }
.person-role { font-size: 12.5px; color: var(--c-on-dark-muted); margin: 0 0 14px; }

.person-focus {
  list-style: none; margin: 0 0 16px; padding: 0 0 16px;
  border-bottom: 1px solid var(--c-on-dark-line);
  font-size: 13px; color: var(--c-on-dark-muted);
}
.person-focus li { position: relative; padding-left: 14px; margin-bottom: 4px; }
.person-focus li::before {
  content: ""; position: absolute; left: 0; top: .62em;
  width: 5px; height: 2px; background: var(--c-green);
}

.person-contact { list-style: none; margin: auto 0 0; padding: 0; font-size: 13.5px; }
.person-contact li { margin-bottom: 5px; }
.person-contact a { color: var(--c-on-dark); word-break: break-word; }
.person-contact a:hover { color: var(--c-green); }

/* --------------------------------------------------------------------------
   Prozessnachweis
   -------------------------------------------------------------------------- */

.proof {
  display: grid; gap: 48px;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  align-items: start;
}
.proof > * { min-width: 0; }

.proof-source {
  font-size: 12.5px; color: var(--c-text-weak);
  border-top: 1px solid var(--c-line);
  padding-top: 14px; margin-top: 22px;
}

/* --------------------------------------------------------------------------
   Anwendungsseite (design-guide.md §3.2)
   -------------------------------------------------------------------------- */

.app-head { background: var(--c-anthracite); color: var(--c-on-dark); padding: 40px 0 56px; }
.app-head h1 { color: var(--c-on-dark); margin-bottom: 18px; }
.app-head .breadcrumb { color: var(--c-on-dark-muted); }
.app-head .breadcrumb a { color: var(--c-on-dark-muted); }
.app-head .breadcrumb a:hover { color: var(--c-green); }
.app-head .breadcrumb li::after { color: var(--c-on-dark-muted); }
.app-head .lead { margin-bottom: 24px; }

.app-head-grid {
  display: grid; gap: 44px;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, .65fr);
  align-items: center;
}
.app-head-figure img {
  width: 100%; border-radius: var(--r-card);
  border: 1px solid rgba(255, 255, 255, .12);
}

.chip--on-dark {
  background: rgba(255, 255, 255, .07);
  border-color: rgba(255, 255, 255, .18);
  color: var(--c-on-dark);
}

.app-body {
  display: grid; gap: 56px;
  grid-template-columns: minmax(0, 1fr) minmax(0, 330px);
  align-items: start;
}
.app-block { margin-bottom: 56px; }
.app-block:last-child { margin-bottom: 0; }
.app-block h2 { font-size: clamp(24px, 2.4vw, 30px); }

/* Tabellen */
.table-wrap { overflow-x: auto; }
.data-table {
  width: 100%; border-collapse: collapse;
  border: 1px solid var(--c-line); border-radius: var(--r-tile);
  overflow: hidden; font-size: 15px;
}
.data-table th, .data-table td { padding: 13px 16px; text-align: left; vertical-align: top; }
.data-table tr + tr th, .data-table tr + tr td { border-top: 1px solid var(--c-line); }
.data-table th[scope="row"] {
  width: 38%; font-weight: 600; color: var(--c-text-muted);
  background: var(--c-surface-alt);
  font-size: 13px; letter-spacing: .01em;
}
.data-table td { font-variant-numeric: tabular-nums; }

.visually-hidden {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

/* Honeypot-Feld im Anfrageformular: fuer Menschen und Screenreader
   unsichtbar, aber im DOM vorhanden – Bots fuellen es haeufig aus. */
.field-honeypot { position: absolute; left: -9999px; top: -9999px; }

/* Prozessbeispiel */
.case {
  border: 1px solid var(--c-line); border-radius: var(--r-card);
  padding: 26px; background: var(--c-surface);
}
.case-head {
  display: flex; flex-wrap: wrap; gap: 24px;
  justify-content: space-between; align-items: flex-start;
  margin-bottom: 24px;
}
.case-spec {
  display: inline-block; font-family: var(--f-mono); font-size: 13px;
  color: var(--c-blue-text); background: var(--c-blue-tint);
  border: 1px solid var(--c-blue-tint-line); border-radius: var(--r-chip);
  padding: 4px 10px; margin-bottom: 12px;
}
.case-app { font-size: 16px; font-weight: 600; margin: 0 0 4px; max-width: 46ch; }
.case-goal { font-size: 14px; color: var(--c-text-muted); margin: 0; max-width: 46ch; }
.case-figure {
  flex: none; text-align: right;
  border-left: 2px solid var(--c-green); padding-left: 18px;
}
.case-value {
  font-family: var(--f-head); font-size: 34px; font-weight: 700;
  line-height: 1.05; letter-spacing: -.02em; font-variant-numeric: tabular-nums;
}
.case-label {
  display: block; margin-top: 4px;
  font-size: 11.5px; font-weight: 600; letter-spacing: .12em;
  text-transform: uppercase; color: var(--c-text-weak);
}
.case-note { font-size: 11.5px; color: var(--c-text-weak); margin: 8px 0 0; max-width: 24ch; }
.case-result-title { font-size: 17px; margin: 26px 0 12px; }

.check-list { list-style: none; margin: 0; padding: 0; font-size: 15px; }
.check-list li { position: relative; padding-left: 24px; margin-bottom: 8px; color: var(--c-text-muted); }
.check-list li::before {
  content: ""; position: absolute; left: 0; top: .55em;
  width: 10px; height: 2px; background: var(--c-green);
}

/* Sidebar */
.app-side { position: sticky; top: 104px; display: grid; gap: 20px; }
.side-card {
  border: 1px solid var(--c-line); border-radius: var(--r-card);
  padding: 22px; background: var(--c-surface);
}
.side-title {
  display: block; font-size: 11.5px; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--c-text-weak); margin-bottom: 16px;
}
.side-photo {
  width: 76px; height: 76px; border-radius: 50%; object-fit: cover;
  border: 1px solid var(--c-line); margin-bottom: 14px;
}
.side-name { font-family: var(--f-head); font-size: 18px; font-weight: 600; margin: 0 0 2px; }
.side-role { font-size: 13px; color: var(--c-text-muted); margin: 0 0 18px; }
.btn-row--stack { flex-direction: column; align-items: stretch; }
.btn-row--stack .btn { justify-content: center; }

.side-list { list-style: none; margin: 0; padding: 0; }
.side-list li + li { border-top: 1px solid var(--c-line); }
.side-list a {
  display: flex; flex-direction: column; gap: 2px;
  padding: 11px 0; font-size: 14.5px; font-weight: 500; color: var(--c-text);
}
.side-list a:hover { color: var(--c-blue-text); text-decoration: none; }
.side-list-meta { font-size: 11.5px; color: var(--c-text-weak); }

/* Personenkarte auf hellem Grund (Kontaktseite) */
.person-card { display: flex; flex-direction: column; }
.person-card .side-title { margin-top: 4px; margin-bottom: 10px; }
.person-card .contact-lines { margin-top: auto; padding-top: 16px; border-top: 1px solid var(--c-line); font-size: 14px; line-height: 1.9; }
.side-photo--leer {
  display: flex; align-items: center; justify-content: center;
  border-style: dashed; color: var(--c-text-weak); background: var(--c-surface-alt);
}
.check-list--sm { font-size: 13.5px; margin-bottom: 18px; }
.check-list--sm li { margin-bottom: 5px; }

/* Bild-Platzhalter: Original im Legacy-Backup nur als Thumbnail bzw.
   gar nicht mehr vorhanden. Gleiche Bildsprache wie .side-photo--leer /
   .person-photo--leer, aber fuer Inhaltsbilder statt Portraits. */
.media-placeholder {
  display: flex; flex-direction: column; align-items: center;
  justify-content: center; gap: 10px; text-align: center; padding: 24px;
  border: 1px dashed var(--c-line); border-radius: var(--r-card);
  background: var(--c-surface-alt); color: var(--c-text-weak);
  aspect-ratio: 16 / 10;
}
.media-placeholder svg { opacity: .6; }
.media-placeholder-text { font-size: 12.5px; line-height: 1.5; max-width: 32ch; }
.media-placeholder-text code { font-size: 11.5px; }

.post-figure {
  width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover;
  border-radius: var(--r-card); margin-bottom: 28px;
}

/* Werkzeugtyp-Icons (FEPA-Grundformen) */
.type-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
  gap: 14px;
}
.type-tile {
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  padding: 12px 8px; border: 1px solid var(--c-line); border-radius: var(--r-card);
  background: var(--c-surface);
}
.type-tile img { width: 64px; height: 64px; object-fit: contain; }

/* Kleine Bildkacheln, z.B. Kornsorten- oder Diamanttypen */
.thumb-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
  gap: 14px; margin: 20px 0;
}
.thumb-tile { text-align: center; }
.thumb-tile img {
  width: 100%; aspect-ratio: 1; object-fit: cover;
  border-radius: var(--r-card); margin-bottom: 8px;
}
.thumb-tile span { font-size: 12.5px; color: var(--c-text-muted); }

.side-card--accent { background: var(--c-surface-alt); }
.side-card--accent p { font-size: 14px; color: var(--c-text-muted); margin-bottom: 16px; }
.side-card--accent .btn { width: 100%; justify-content: center; }

.card-title { font-size: 21px; font-weight: 600; margin-bottom: 10px; }

@media (max-width: 1080px) {
  .app-head-grid { grid-template-columns: 1fr; gap: 28px; }
  .app-head-figure { max-width: 380px; }
  .app-body { grid-template-columns: 1fr; gap: 44px; }
  .app-side { position: static; }
}

/* --------------------------------------------------------------------------
   Seitenkopf (Unterseiten)
   -------------------------------------------------------------------------- */

.page-header { background: var(--c-surface-alt); border-bottom: 1px solid var(--c-line); padding: 56px 0; }
.page-header h1 { margin-bottom: 14px; }
.breadcrumb { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 18px; padding: 0; font-size: 12.5px; color: var(--c-text-weak); }
.breadcrumb li::after { content: "·"; margin-left: 8px; color: var(--c-text-weak); }
.breadcrumb li:last-child::after { content: ""; }

.prose { max-width: 72ch; }
.timeline-list { list-style: none; margin: 0; padding: 0; }
.timeline-list li { padding: 14px 0; border-bottom: 1px solid var(--c-line); }
.timeline-list li:first-child { padding-top: 0; }
.timeline-list li:last-child { border-bottom: none; }

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */

.site-footer { background: var(--c-anthracite); color: var(--c-on-dark-muted); padding: 64px 0 28px; }
.footer-logo { display: block; height: 40px; width: auto; margin-bottom: 32px; }
.site-footer a { color: var(--c-on-dark); }
.site-footer a:hover { color: var(--c-green); text-decoration: none; }
.footer-grid { display: grid; gap: 36px; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }
.footer-grid > * { min-width: 0; }
.footer-title {
  font-family: var(--f-body);
  font-size: 11.5px; font-weight: 700; letter-spacing: .14em;
  text-transform: uppercase; color: var(--c-on-dark); margin: 0 0 16px;
}
.site-footer address { font-style: normal; line-height: 1.8; }
.site-footer .plain { list-style: none; margin: 0; padding: 0; line-height: 1.9; }
.footer-legal {
  border-top: 1px solid var(--c-on-dark-line);
  margin-top: 48px; padding-top: 20px;
  font-size: 12.5px; color: var(--c-on-dark-muted);
  display: flex; flex-wrap: wrap; gap: 8px 20px;
}
.footer-legal p { margin: 0; }
.footer-consent {
  appearance: none; border: 0; padding: 0; background: transparent;
  color: var(--c-on-dark); cursor: pointer; font: inherit; text-decoration: underline;
  text-underline-offset: 3px;
}
.footer-consent:hover { color: var(--c-green); }

/* Consent dialog: Matomo is never loaded before an explicit choice.
   Bewusst Flexbox statt Grid: bei einem einzelnen, nicht gestreckten
   Grid-Item (place-items ungleich stretch) loesen manche Browser eine
   Prozentbreite auf dem Kind gegen eine falsche Referenzbreite auf – das
   Panel wurde dadurch breiter als der verfuegbare Platz und erzeugte auf
   schmalen Bildschirmen einen waagerechten Scrollbalken. Flexbox berechnet
   die Breite hier zuverlaessig gegen den Innenraum des Dialogs. */
.consent-dialog {
  position: fixed; inset: 0; z-index: 1000;
  display: flex; align-items: flex-end; justify-content: center;
  padding: 24px; background: rgba(23, 32, 51, .5);
}
.consent-dialog__panel {
  width: 100%; max-width: 620px; padding: 28px; border-radius: var(--r-card);
  background: var(--c-surface); box-shadow: 0 18px 50px rgba(0, 0, 0, .24);
}
.consent-dialog__panel h2 { font-size: 24px; }
.consent-dialog__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 20px; }
.consent-dialog__actions .btn { width: auto; }

/* --------------------------------------------------------------------------
   Mobil
   -------------------------------------------------------------------------- */

@media (max-width: 1080px) {
  .hero-inner { grid-template-columns: 1fr; gap: 32px; }
  .hero { padding-top: 64px; }
  .hero-body { padding-bottom: 0; }
  .hero-figure { min-height: 0; order: -1; }
  /* 520/640px sind fuer diese Breite zu gross – die Scheibe steht hier
     ohnehin allein. */
  .hero-ring { display: none; }
  .hero-disc { width: min(62%, 260px); }
  .hero-stats { margin-top: 56px; }
}

/* Navigation: acht Hauptpunkte, Wortmarke, Sprachwahl und Anfrage-Knopf
   brauchen nebeneinander rund 1500px. Darunter Burger-Menue, sonst laeuft
   die Kopfzeile waagerecht ueber - das tat sie mit sieben Punkten bereits. */
/* Erst Platz sparen, dann erst umschalten: der Namenszusatz und die noch
   nicht aktive koreanische Fassung sind das Erste, worauf verzichtet
   werden kann. */
@media (max-width: 1720px) {
  .brand-sub { display: none; }
  .lang-switch a[hreflang="ko"] { display: none; }
}

@media (max-width: 1560px) {
  .header-inner { flex-wrap: wrap; }
  .nav-toggle-label { display: flex; }
  .site-nav { display: none; width: 100%; margin-left: 0; order: 3; }
  .nav-toggle:checked ~ .site-nav { display: block; }
  .site-nav > ul { flex-direction: column; align-items: stretch; gap: 0; padding-bottom: 10px; }
  .site-nav a { padding: 12px 10px; }
  .site-nav > ul > li > a[aria-current="page"]::after { display: none; }
  .submenu {
    display: flex; position: static; min-width: 0;
    border: 0; box-shadow: none; padding: 0 0 6px 14px;
  }
  .header-actions { order: 2; margin-left: auto; }
  .site-nav a { min-height: 44px; }
}

@media (max-width: 900px) {
  :root { --gap-section: 72px; --gap-section-sub: 56px; --pad-container: 20px; }

  .header-inner { flex-wrap: wrap; gap: 12px; padding-block: 12px; min-height: 0; }
  .brand-logo { width: 90px; height: 30px; }
  .brand-divider { height: 28px; }
  .brand-name { font-size: 14px; }
  .brand-sub { font-size: 8px; letter-spacing: .08em; white-space: nowrap; }
  .site-nav { display: none; width: 100%; margin-left: 0; order: 3; }
  .nav-toggle:checked ~ .site-nav { display: block; }
  .site-nav > ul { flex-direction: column; align-items: stretch; gap: 0; padding-bottom: 10px; }
  .site-nav a { padding: 12px 10px; }
  .site-nav > ul > li > a[aria-current="page"]::after { display: none; }
  .submenu {
    display: flex; position: static; min-width: 0;
    border: 0; box-shadow: none; padding: 0 0 6px 14px;
  }
  .header-actions { order: 2; margin-left: auto; }

  .panel { padding: 30px 24px; }
  .card { padding: 22px; }

  /* Klickflaechen mindestens 44px (design-guide.md §7) */
  .breadcrumb { gap: 4px 12px; }
  .breadcrumb a { display: inline-flex; align-items: center; min-height: 44px; }
  .breadcrumb li::after { margin-left: 12px; }
  .brand { min-height: 44px; justify-content: center; }
  .lang-switch a { min-width: 44px; min-height: 44px; }
  .site-footer .plain a,
  .site-footer address a { display: inline-flex; align-items: center; min-height: 44px; }
  .chip-choice label { min-height: 44px; }
}

@media (max-width: 560px) {
  .btn { width: 100%; justify-content: center; }
  .btn-row { flex-direction: column; align-items: stretch; }
  .doc-actions { width: 100%; }
  .doc-dl { flex: 1 1 auto; justify-content: center; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  .hero-disc { animation: none !important; }
  .hero-ring { animation: none !important; }
  [data-reveal] {
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
  }
}

@media print {
  .site-header, .site-footer, .btn, .nav-toggle-label { display: none; }
  body { font-size: 11pt; color: #000; }
}

/* --------------------------------------------------------------------------
   Downloadliste – Sprachgruppe aus Ansehen und Herunterladen
   Je Sprache eine geteilte Schaltflaeche: links das Ansehen im Katalogviewer,
   rechts der Download. Beides sind echte Links auf die PDF – ohne JavaScript
   fuehren beide schlicht zur Datei.
   -------------------------------------------------------------------------- */

.doc-file {
  display: inline-flex; align-items: stretch;
  border: 1px solid var(--c-line); border-radius: var(--r-control);
  overflow: hidden; background: var(--c-surface);
  transition: border-color var(--t-fast) var(--ease);
}
.doc-file:hover { border-color: var(--c-blue); }
.doc-file:focus-within { border-color: var(--c-blue); }

.doc-lang {
  display: inline-flex; align-items: center;
  padding: 0 12px;
  font-size: 12px; font-weight: 600; letter-spacing: .02em;
  color: var(--c-text-weak); background: var(--c-surface-alt);
  border-right: 1px solid var(--c-line);
}

.doc-file .doc-view,
.doc-file .doc-dl {
  display: inline-flex; align-items: center; gap: 7px;
  min-height: 44px; padding: 10px 13px;
  border: 0; border-radius: 0;
  font-size: 13.5px; font-weight: 600; color: var(--c-blue-text);
  transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.doc-file .doc-view:hover,
.doc-file .doc-dl:hover { background: var(--c-blue-tint); color: var(--c-blue-dark); text-decoration: none; }
.doc-file .doc-dl { border-left: 1px solid var(--c-line); font-variant-numeric: tabular-nums; }

/* Einzelner PDF-Verweis im Fliesstext: der Textlink bleibt ein Textlink,
   daneben steht ein zurueckhaltendes "Ansehen" fuer den Katalog-Viewer. */
.doc-inline { display: inline-flex; align-items: baseline; flex-wrap: wrap; gap: 10px; }
.doc-inline-view {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 9px;
  border: 1px solid var(--c-line); border-radius: var(--r-chip);
  font-size: 13px; font-weight: 600; color: var(--c-blue-text);
  white-space: nowrap;
  transition: border-color var(--t-fast) var(--ease), background var(--t-fast) var(--ease);
}
.doc-inline-view:hover { border-color: var(--c-blue); background: var(--c-blue-tint); text-decoration: none; }
.doc-inline-view svg { flex: none; }

/* --------------------------------------------------------------------------
   Katalog-Viewer
   Vollflaechige Ansicht ueber der Seite. Der Aufbau kommt aus
   assets/js/behaviors/katalog-viewer.js; hier steht nur das Aussehen.
   Unter dem Consent-Dialog (z-index 1000), damit die Einwilligung immer
   erreichbar bleibt.
   -------------------------------------------------------------------------- */

body.kv-offen { overflow: hidden; }

.kv {
  position: fixed; inset: 0; z-index: 900;
  display: flex; flex-direction: column;
  background: rgba(18, 25, 40, .97);
  color: var(--c-on-dark);
  opacity: 0;
  transition: opacity var(--t-mid) var(--ease);
}
.kv--sichtbar { opacity: 1; }

/* --- Kopfleiste --- */

.kv-leiste {
  flex: none;
  display: flex; align-items: center; gap: 16px;
  padding: 10px 16px;
  border-bottom: 1px solid var(--c-on-dark-line);
  background: rgba(23, 32, 51, .72);
}
.kv-titel {
  flex: 1 1 auto; min-width: 0; margin: 0;
  font-family: var(--f-head); font-size: 15px; font-weight: 600;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.kv-zaehler {
  flex: none; display: inline-flex; align-items: center; gap: 4px;
  font-size: 13.5px; color: var(--c-on-dark-muted);
  font-variant-numeric: tabular-nums;
}
.kv-feld {
  width: auto; min-width: 52px; max-width: 92px;
  padding: 7px 8px; text-align: center;
  border: 1px solid var(--c-on-dark-line); border-radius: var(--r-chip);
  background: rgba(255, 255, 255, .06); color: var(--c-on-dark);
  font: inherit; font-size: 13.5px; font-variant-numeric: tabular-nums;
}
.kv-feld:focus-visible { outline: 2px solid var(--c-blue); outline-offset: 1px; }

.kv-werkzeuge { flex: none; display: flex; align-items: center; gap: 4px; }

.kv-knopf {
  display: inline-flex; align-items: center; justify-content: center;
  width: 42px; height: 42px; padding: 0;
  border: 0; border-radius: var(--r-control);
  background: transparent; color: var(--c-on-dark);
  cursor: pointer;
  transition: background var(--t-fast) var(--ease), opacity var(--t-fast) var(--ease);
}
.kv-knopf:hover { background: rgba(255, 255, 255, .12); color: var(--c-on-dark); text-decoration: none; }
.kv-knopf:focus-visible { outline: 2px solid var(--c-blue); outline-offset: 2px; }
.kv-knopf[disabled] { opacity: .3; cursor: default; }
.kv-knopf[disabled]:hover { background: transparent; }
.kv-knopf--zu { margin-left: 4px; }

/* --- Buehne und Buch --- */

.kv-buehne {
  flex: 1 1 auto; min-height: 0;
  display: flex; align-items: center; justify-content: center;
  padding: 16px;
}
.kv-buehne--gezoomt { overflow: auto; align-items: flex-start; justify-content: flex-start; }
.kv-buehne--gezoomt .kv-buch { margin: auto; }

.kv-buch {
  position: relative;
  display: flex; align-items: flex-start;
  perspective: 2400px;
  filter: drop-shadow(0 24px 48px rgba(0, 0, 0, .45));
}
.kv-basis { display: flex; align-items: flex-start; }

.kv-seite {
  position: relative;
  width: var(--kv-b); height: var(--kv-h);
  background: #fff; overflow: hidden;
}
.kv-seite canvas { display: block; width: 100%; height: 100%; }
.kv-seite--leer { background: rgba(255, 255, 255, .05); }

/* Der Bund: eine leichte Abdunklung zur Mitte hin, wie bei einem
   aufgeschlagenen Heft. Nur in der Doppelseitenansicht. */
.kv-basis:not(.kv-basis--einzel) .kv-seite:first-child::after,
.kv-basis:not(.kv-basis--einzel) .kv-seite:last-child::after {
  content: ""; position: absolute; top: 0; bottom: 0; width: 34px;
  pointer-events: none;
}
.kv-basis:not(.kv-basis--einzel) .kv-seite:first-child::after {
  right: 0; background: linear-gradient(to right, rgba(23, 32, 51, 0), rgba(23, 32, 51, .16));
}
.kv-basis:not(.kv-basis--einzel) .kv-seite:last-child::after {
  left: 0; background: linear-gradient(to left, rgba(23, 32, 51, 0), rgba(23, 32, 51, .16));
}

.kv-seitenzahl {
  position: absolute; bottom: 6px; right: 8px;
  padding: 1px 6px; border-radius: var(--r-chip);
  background: rgba(23, 32, 51, .6); color: #fff;
  font-size: 11px; font-variant-numeric: tabular-nums;
  pointer-events: none;
}

/* --- Das drehende Blatt --- */

.kv-blatt {
  position: absolute; top: 0;
  width: var(--kv-b); height: var(--kv-h);
  transform-style: preserve-3d;
  will-change: transform;
  pointer-events: none;
}
.kv-flaeche {
  position: absolute; inset: 0;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}
.kv-flaeche--hinten { transform: rotateY(180deg); }
.kv-schatten {
  position: absolute; inset: 0;
  background: linear-gradient(to right, rgba(0, 0, 0, .55), rgba(0, 0, 0, 0) 55%);
  opacity: 0; pointer-events: none;
}

/* --- Blaetterknoepfe --- */

.kv-blaettern {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 52px; height: 52px;
  background: rgba(23, 32, 51, .75);
  border: 1px solid var(--c-on-dark-line);
}
.kv-blaettern:hover { background: rgba(2, 142, 224, .85); }
.kv-blaettern--links { left: 14px; }
.kv-blaettern--rechts { right: 14px; }

/* --- Laden und Fehler --- */

.kv-zustand {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 16px; padding: 24px; text-align: center;
}
.kv-zustand-text { margin: 0; color: var(--c-on-dark-muted); font-size: 14.5px; }
.kv-spinner {
  width: 34px; height: 34px; border-radius: 50%;
  border: 2px solid var(--c-on-dark-line); border-top-color: var(--c-blue);
  animation: kv-dreht 900ms linear infinite;
}
@keyframes kv-dreht { to { transform: rotate(360deg); } }

.kv-fortschritt {
  width: 200px; height: 3px; border-radius: 2px;
  background: rgba(255, 255, 255, .14); overflow: hidden;
}
.kv-fortschritt i {
  display: block; width: 0; height: 100%;
  background: var(--c-blue);
  transition: width var(--t-fast) linear;
}

.kv-zustand-knoepfe { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }
.kv-zustand-knoepfe .btn { width: auto; background: transparent; color: var(--c-on-dark); border-color: var(--c-on-dark-line); }
.kv-zustand-knoepfe .btn:hover { background: rgba(255, 255, 255, .12); color: var(--c-on-dark); border-color: var(--c-blue); }

@media (max-width: 860px) {
  .kv-leiste { gap: 10px; padding: 8px 10px; }
  .kv-titel { font-size: 13.5px; }
  .kv-knopf { width: 40px; height: 40px; }
  .kv-buehne { padding: 8px; }
  .kv-blaettern { width: 46px; height: 46px; }
  .kv-blaettern--links { left: 6px; }
  .kv-blaettern--rechts { right: 6px; }
}

@media (max-width: 560px) {
  .doc-file { width: 100%; }
  .doc-file .doc-view, .doc-file .doc-dl { flex: 1 1 auto; justify-content: center; }

  /* In einer schmalen Leiste weicht zuerst der Titel: welcher Katalog offen
     ist, weiss man beim Aufschlagen. Zoom bleibt – Kleingedrucktes liest man
     eher auf dem Telefon als am Schreibtisch. Vollbild geht, ein Browser auf
     dem Telefon ist ohnehin fast Vollbild. Angesprochen ueber eigene Klassen
     und nicht ueber die Reihenfolge: nth-child griffe still daneben, sobald
     jemand die Leiste umsortiert. */
  .kv-titel { display: none; }
  .kv-knopf--vollbild { display: none; }
  .kv-knopf { width: 38px; height: 38px; }
  .kv-werkzeuge { gap: 2px; }
}

@media (prefers-reduced-motion: reduce) {
  .kv-spinner { animation: none; }
}

@media print {
  .kv { display: none; }
}

/* ==========================================================================
   Interaktive Werkstueckgrafik – Auswahl der zu schleifenden Flaeche
   Markup: src/_includes/werkstueck-flaechen.njk
   Daten:  src/_data/werkstueckFlaechen.json

   Die Umschaltung laeuft ohne JavaScript ueber Radiofelder. Gekoppelt wird
   nach POSITION (nth-of-type), nicht nach Flaechennamen – so gilt derselbe
   Regelsatz fuer jedes weitere Werkstueck, ohne dass hier etwas nachgezogen
   werden muss. Sechs Plaetze sind vorgesehen; mehr Flaechen brauchen nur je
   eine weitere Zeile in den Kopplungsregeln.

   Der Zustand wird ueber die geerbte Eigenschaft --an (0 = ruhend, 1 = aktiv)
   in die Grafik gereicht. Deckkraft laesst sich damit rechnen, Farbe nicht –
   fuer Farbwechsel stehen daneben eigene Regeln.
   ========================================================================== */

.wsf { padding-block: var(--gap-section-sub); }

.wsf-kopf { max-width: 52ch; margin-bottom: 40px; }
.wsf-kopf h2 { margin: 0 0 12px; }
.wsf-lead { margin: 0; color: var(--c-text-muted); font-size: 1.0625rem; }

/* Nur im lokalen Dev-Server gerendert (siehe imServermodus) - bewusst als
   dezenter Werkzeug-Hinweis, nicht als weiterer Call-to-Action gestaltet. */
.wsf-editor-link {
  display: inline-flex; align-items: center; gap: 6px; margin-top: 14px;
  font-size: .8125rem; color: var(--c-text-muted); text-decoration: none;
  border: 1px dashed var(--c-line); border-radius: 999px; padding: 5px 12px;
}
.wsf-editor-link::before { content: "✎"; }
.wsf-editor-link:hover { color: var(--c-text); border-color: var(--c-text-muted); }

/* Grafik und Merkmalleiste bilden zusammen die linke Spalte, die Karte steht
   daneben. Beide stecken in .wsf-links und nicht in eigenen Rasterzeilen:
   die Karte ist hoeher als sie zusammen, und der Ueberschuss einer ueber
   zwei Zeilen gespannten Karte landet zwischen den Zeilen – die Leiste rutschte
   dadurch 97 Pixel von der Grafik weg. In einem gemeinsamen Behaelter kann
   das nicht passieren. */
.wsf-tool {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 400px;
  grid-template-areas: "links karten" "leiste leiste";
  gap: 32px 40px;
  align-items: start;
}

.wsf-links { grid-area: links; }

/* Die Radiofelder steuern nur, sie zeigen nichts. Sie bleiben bedienbar und
   fokussierbar – ausgeblendet wird ueber Groesse, nicht ueber display:none. */
.wsf-radio {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden; clip-path: inset(50%);
  white-space: nowrap;
}

/* --- Buehne ------------------------------------------------------------- */

/* Oben gerundet, unten gerade – darunter schliesst die Merkmalleiste an und
   traegt die untere Rundung. Beide zusammen lesen als ein Bauteil. */
.wsf-buehne {
  position: relative;
  border-radius: var(--r-panel) var(--r-panel) 0 0;
  background: var(--c-surface-alt);
  overflow: hidden;
  /* Die markierte Flaeche mischt sich multiplizierend mit dem Renderbild.
     Ohne diese Zeile reicht die Mischung bis zum Seitenhintergrund durch und
     faerbt mit, was gar nicht gemeint ist. isolate begrenzt sie auf die
     Buehne – dort liegt genau das Bild, mit dem sie sich mischen soll. */
  isolation: isolate;
}

.wsf-bild { display: block; width: 100%; height: auto; }

/* Die Markierungsebene liegt deckungsgleich ueber dem Bild: gleiche viewBox,
   gleiches Seitenverhaeltnis, gleiches Streckverhalten. Sie ist durchlaessig
   fuer Zeigereingaben – ohne JavaScript waere ein Klick auf eine Flaeche
   wirkungslos. Das Verhalten schaltet die einzelnen Flaechen frei, sobald es
   sie auch bedienen kann (behaviors/werkstueck-flaechen.js). */
.wsf-ebene {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

/* Zwei Regler statt einem: --an steht auf 1, sobald die Flaeche gewaehlt ist,
   --zeig steigt, solange der Zeiger auf ihr oder auf einem ihrer Schalter
   liegt. Gezeichnet wird der groessere von beiden. Ueber zwei getrennte Werte
   statt einer Regel koennen sich Auswahl und Vorschau nicht gegenseitig
   ueberstimmen – auf welche Regel der Browser sonst hoert, haengt sonst an
   der Reihenfolge im Stylesheet, und das ist eine Falle fuer spaeter. */
.wsf-marke { --an: 0; --zeig: 0; --stark: max(var(--an), var(--zeig)); }

/* Zeigen auf die Flaeche selbst. Die Ebene ist fuer Zeigereingaben gesperrt,
   das Verhalten schaltet allein die Flaechen frei – ohne JavaScript greift
   diese Regel deshalb nicht, und es bleibt bei den Schaltern darunter. */
.wsf-marke:hover { --zeig: .62; }

.wsf-flaeche,
.wsf-spur,
.wsf-kante,
.wsf-schein {
  opacity: var(--stark);
  transition: opacity var(--t-mid) var(--ease);
}

/* Schein nach aussen. Die Staerke kommt als Zahl aus den Daten und wird hier
   mit der Sichtbarkeit der Flaeche verrechnet: eine ruhende Flaeche leuchtet
   nicht, eine gewaehlte mit voller Leuchtkraft. Liegt nichts an, bleibt es
   beim Mittelwert. */
.wsf-schein { opacity: calc(var(--stark) * var(--wsf-leuchten, .55)); }

/* Multiplizieren statt Ueberdecken: das Gold faerbt das Metall ein, die
   Reflexe, Riefen und Bohrungen des Renderbilds bleiben stehen. Eine
   halbdeckende Flaeche wuerde stattdessen milchig darueberliegen. */
.wsf-flaeche { mix-blend-mode: multiply; }

/* Die Riefen des jeweiligen Verfahrens liegen als helle Linien obenauf und
   mischen bewusst nicht mit – multipliziert waeren sie wirkungslos. Sehr
   zurueckhaltend, denn die echte Bearbeitungsspur des Renders scheint jetzt
   ohnehin durch. */
.wsf-spur { opacity: calc(var(--stark) * .32); }

.wsf-fuehrung {
  stroke: var(--c-anthracite);
  stroke-width: 1.5;
  opacity: calc(.22 + var(--stark) * .58);
  transition: opacity var(--t-mid) var(--ease), stroke var(--t-mid) var(--ease);
}

.wsf-punkt-ring {
  fill: var(--c-surface);
  stroke: var(--c-anthracite);
  stroke-width: 1.5;
  opacity: calc(.55 + var(--stark) * .45);
  transition: opacity var(--t-mid) var(--ease);
}

.wsf-punkt {
  fill: var(--c-anthracite);
  transition: fill var(--t-mid) var(--ease);
}

.wsf-radio:nth-of-type(1):checked ~ .wsf-links .wsf-buehne .wsf-marke:nth-of-type(1),
.wsf-radio:nth-of-type(2):checked ~ .wsf-links .wsf-buehne .wsf-marke:nth-of-type(2),
.wsf-radio:nth-of-type(3):checked ~ .wsf-links .wsf-buehne .wsf-marke:nth-of-type(3),
.wsf-radio:nth-of-type(4):checked ~ .wsf-links .wsf-buehne .wsf-marke:nth-of-type(4),
.wsf-radio:nth-of-type(5):checked ~ .wsf-links .wsf-buehne .wsf-marke:nth-of-type(5),
.wsf-radio:nth-of-type(6):checked ~ .wsf-links .wsf-buehne .wsf-marke:nth-of-type(6) { --an: 1; }

/* Vorschau beim Zeigen auf Beschriftung oder Leistenschalter. Die Zuordnung
   laeuft ueber :has() – Schalter und Beschriftung stehen im Baum neben der
   Grafik, nicht davor, und lassen sich mit dem Geschwisterzeichen allein
   nicht erreichen. Faellt :has() aus, entfaellt nur die Vorschau: die Flaeche
   ist weiterhin anklickbar und wird beim Zeigen auf sie selbst markiert. */
.wsf-tool:has(.wsf-callout:nth-of-type(1):hover) .wsf-marke:nth-of-type(1),
.wsf-tool:has(.wsf-callout:nth-of-type(2):hover) .wsf-marke:nth-of-type(2),
.wsf-tool:has(.wsf-callout:nth-of-type(3):hover) .wsf-marke:nth-of-type(3),
.wsf-tool:has(.wsf-callout:nth-of-type(4):hover) .wsf-marke:nth-of-type(4),
.wsf-tool:has(.wsf-callout:nth-of-type(5):hover) .wsf-marke:nth-of-type(5),
.wsf-tool:has(.wsf-callout:nth-of-type(6):hover) .wsf-marke:nth-of-type(6),
.wsf-tool:has(.wsf-schalter:nth-of-type(1):hover) .wsf-marke:nth-of-type(1),
.wsf-tool:has(.wsf-schalter:nth-of-type(2):hover) .wsf-marke:nth-of-type(2),
.wsf-tool:has(.wsf-schalter:nth-of-type(3):hover) .wsf-marke:nth-of-type(3),
.wsf-tool:has(.wsf-schalter:nth-of-type(4):hover) .wsf-marke:nth-of-type(4),
.wsf-tool:has(.wsf-schalter:nth-of-type(5):hover) .wsf-marke:nth-of-type(5),
.wsf-tool:has(.wsf-schalter:nth-of-type(6):hover) .wsf-marke:nth-of-type(6) { --zeig: .62; }

.wsf-radio:nth-of-type(1):checked ~ .wsf-links .wsf-buehne .wsf-marke:nth-of-type(1) .wsf-punkt,
.wsf-radio:nth-of-type(2):checked ~ .wsf-links .wsf-buehne .wsf-marke:nth-of-type(2) .wsf-punkt,
.wsf-radio:nth-of-type(3):checked ~ .wsf-links .wsf-buehne .wsf-marke:nth-of-type(3) .wsf-punkt,
.wsf-radio:nth-of-type(4):checked ~ .wsf-links .wsf-buehne .wsf-marke:nth-of-type(4) .wsf-punkt,
.wsf-radio:nth-of-type(5):checked ~ .wsf-links .wsf-buehne .wsf-marke:nth-of-type(5) .wsf-punkt,
.wsf-radio:nth-of-type(6):checked ~ .wsf-links .wsf-buehne .wsf-marke:nth-of-type(6) .wsf-punkt { fill: var(--c-gold); }

.wsf-radio:nth-of-type(1):checked ~ .wsf-links .wsf-buehne .wsf-marke:nth-of-type(1) .wsf-fuehrung,
.wsf-radio:nth-of-type(2):checked ~ .wsf-links .wsf-buehne .wsf-marke:nth-of-type(2) .wsf-fuehrung,
.wsf-radio:nth-of-type(3):checked ~ .wsf-links .wsf-buehne .wsf-marke:nth-of-type(3) .wsf-fuehrung,
.wsf-radio:nth-of-type(4):checked ~ .wsf-links .wsf-buehne .wsf-marke:nth-of-type(4) .wsf-fuehrung,
.wsf-radio:nth-of-type(5):checked ~ .wsf-links .wsf-buehne .wsf-marke:nth-of-type(5) .wsf-fuehrung,
.wsf-radio:nth-of-type(6):checked ~ .wsf-links .wsf-buehne .wsf-marke:nth-of-type(6) .wsf-fuehrung { stroke: var(--c-gold); }

/* --- Beschriftungen in der Grafik --------------------------------------- */

.wsf-callout {
  position: absolute;
  left: var(--wsf-x);
  top: var(--wsf-y);
  transform: translate(-50%, -50%);
  padding: 7px 13px;
  border: 1px solid var(--c-line);
  border-radius: var(--r-chip);
  background: var(--c-surface);
  box-shadow: var(--sh-card);
  color: var(--c-text);
  font-size: .8125rem;
  font-weight: 500;
  line-height: 1.2;
  cursor: pointer;
  transition: border-color var(--t-fast) var(--ease),
              box-shadow var(--t-fast) var(--ease);
}

/* Zeichnung und Name in einer Zeile. Der Name bleibt einzeilig – er ist die
   Marke am Punkt und soll nicht umbrechen. Die Kurzinfo darunter darf
   umbrechen, sonst sprengt sie die Grafik nach rechts. */
.wsf-callout-kopf { display: flex; align-items: center; gap: 8px; }
.wsf-callout-name { white-space: nowrap; }

/* Deutlich kleiner als in der früheren Leiste: hier steht sie neben einem
   Wort, nicht über einer Kachel. Zu groß gesetzt würde die Beschriftung zum
   Bildchen mit Text daneben – und genau das soll sie nicht sein. */
.wsf-callout .wsf-zeichnung {
  width: 32px;
  height: 21px;
  margin: 0;
  flex: none;
}
.wsf-callout .wsf-z-korper { stroke-width: 2; }
.wsf-callout .wsf-z-marke { stroke-width: 3.6; }
.wsf-callout .wsf-z-achse { display: none; }

/* Kurzinfo: erscheint erst mit der Auswahl. Vorher belegt sie keinen Platz –
   waere sie nur durchsichtig, wuerden die ruhenden Beschriftungen einander
   ueberlappen. */
.wsf-kurz { display: none; }

/* Im Editor abgeschaltete Beschriftung. Das Element bleibt im Baum stehen –
   Stylesheet und Verhalten zaehlen Flaechen und Schalter durch, ein Loch in
   der Reihe wuerde alles Folgende um eins verschieben. Weg ist nur, was man
   sieht: Schildchen und Fuehrungslinie. Die Flaeche selbst bleibt waehlbar. */
.wsf-callout--aus { display: none; }
.wsf-marke--ohne-callout .wsf-fuehrung,
.wsf-marke--ohne-callout .wsf-punkt-ring,
.wsf-marke--ohne-callout .wsf-punkt { display: none; }

.wsf-callout:hover { border-color: var(--c-gold-hell); }

.wsf-radio:nth-of-type(1):checked ~ .wsf-links .wsf-buehne .wsf-callout:nth-of-type(1),
.wsf-radio:nth-of-type(2):checked ~ .wsf-links .wsf-buehne .wsf-callout:nth-of-type(2),
.wsf-radio:nth-of-type(3):checked ~ .wsf-links .wsf-buehne .wsf-callout:nth-of-type(3),
.wsf-radio:nth-of-type(4):checked ~ .wsf-links .wsf-buehne .wsf-callout:nth-of-type(4),
.wsf-radio:nth-of-type(5):checked ~ .wsf-links .wsf-buehne .wsf-callout:nth-of-type(5),
.wsf-radio:nth-of-type(6):checked ~ .wsf-links .wsf-buehne .wsf-callout:nth-of-type(6) {
  border-color: var(--c-gold);
  box-shadow: var(--sh-card-hover);
  font-weight: 600;
  /* Die aufgeklappte Beschriftung braucht mehr Platz als die ruhenden und
     soll dabei ueber ihnen liegen, nicht unter ihnen. */
  z-index: 2;
  max-width: 230px;
}

.wsf-radio:nth-of-type(1):checked ~ .wsf-links .wsf-buehne .wsf-callout:nth-of-type(1) .wsf-kurz,
.wsf-radio:nth-of-type(2):checked ~ .wsf-links .wsf-buehne .wsf-callout:nth-of-type(2) .wsf-kurz,
.wsf-radio:nth-of-type(3):checked ~ .wsf-links .wsf-buehne .wsf-callout:nth-of-type(3) .wsf-kurz,
.wsf-radio:nth-of-type(4):checked ~ .wsf-links .wsf-buehne .wsf-callout:nth-of-type(4) .wsf-kurz,
.wsf-radio:nth-of-type(5):checked ~ .wsf-links .wsf-buehne .wsf-callout:nth-of-type(5) .wsf-kurz,
.wsf-radio:nth-of-type(6):checked ~ .wsf-links .wsf-buehne .wsf-callout:nth-of-type(6) .wsf-kurz {
  display: block;
  margin-top: 5px;
  padding-top: 5px;
  border-top: 1px solid var(--c-line);
  color: var(--c-text-muted);
  font-size: .75rem;
  font-weight: 400;
  line-height: 1.35;
  white-space: normal;
}

/* --- Karte -------------------------------------------------------------- */

.wsf-karten { grid-area: karten; }

.wsf-karte {
  display: none;
  padding: 28px;
  border: 1px solid var(--c-line);
  border-top: 3px solid var(--c-gold);
  border-radius: var(--r-card);
  background: var(--c-surface);
  box-shadow: var(--sh-card);
}

.wsf-radio:nth-of-type(1):checked ~ .wsf-karten .wsf-karte:nth-of-type(1),
.wsf-radio:nth-of-type(2):checked ~ .wsf-karten .wsf-karte:nth-of-type(2),
.wsf-radio:nth-of-type(3):checked ~ .wsf-karten .wsf-karte:nth-of-type(3),
.wsf-radio:nth-of-type(4):checked ~ .wsf-karten .wsf-karte:nth-of-type(4),
.wsf-radio:nth-of-type(5):checked ~ .wsf-karten .wsf-karte:nth-of-type(5),
.wsf-radio:nth-of-type(6):checked ~ .wsf-karten .wsf-karte:nth-of-type(6) { display: block; }

.wsf-karte-kopf { margin-bottom: 18px; }
.wsf-karte-kopf h3 { margin: 0 0 6px; font-size: 1.375rem; line-height: 1.25; }
.wsf-lage { margin: 0; color: var(--c-text-weak); font-size: .875rem; }

/* Werkzeug im Einsatz. Festes Seitenverhaeltnis, damit der Kartenwechsel die
   Hoehe nicht springen laesst – die Bilder der einzelnen Flaechen sind nicht
   gleich gross. object-fit schneidet dafuer zu, statt zu verzerren. */
.wsf-karte-bild {
  margin: 0 0 20px;
  border-radius: var(--r-tile);
  overflow: hidden;
  background: var(--c-surface-alt);
}
.wsf-karte-bild img {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 7;
  object-fit: cover;
}

.wsf-text {
  margin: 0 0 22px;
  padding-bottom: 22px;
  border-bottom: 1px solid var(--c-line);
  font-size: .9375rem;
  line-height: 1.6;
  color: var(--c-text-muted);
}

.wsf-loesung-label {
  display: block;
  margin-bottom: 6px;
  color: var(--c-text-weak);
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.wsf-verfahren {
  margin: 0 0 16px;
  font-family: var(--f-head);
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--c-gold-tief);
  line-height: 1.3;
}

.wsf-eckdaten { margin: 0 0 22px; }
.wsf-eckdaten > div {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 7px 0;
  border-bottom: 1px solid var(--c-line);
  font-size: .875rem;
}
.wsf-eckdaten dt { color: var(--c-text-weak); }
.wsf-eckdaten dd { margin: 0; text-align: right; font-weight: 500; }
.wsf-mono { font-family: var(--f-mono); font-size: .8125rem; }

.wsf-cta { width: 100%; justify-content: center; }

.wsf-details { margin-top: 18px; }
.wsf-details summary {
  cursor: pointer;
  padding: 10px 0;
  color: var(--c-blue-text);
  font-size: .875rem;
  font-weight: 500;
}
.wsf-details summary:hover { color: var(--c-blue-dark); }
/* Zeile mit Wert rechts – wie im Lösungsblock darüber. Zweispaltig gesetzt
   war ausgemessen keinen Deut kürzer (229 gegen 222 Pixel), brach aber die
   Lesart der Karte: zwei Aufstellungen untereinander, jede anders gebaut. */
.wsf-tabelle { margin: 6px 0 0; }
.wsf-tabelle > div {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 7px 0;
  border-bottom: 1px solid var(--c-line);
  font-size: .8125rem;
}
.wsf-tabelle dt { color: var(--c-text-weak); }
.wsf-tabelle dd { margin: 0; text-align: right; }

/* --- Merkmalleiste unter der Grafik ------------------------------------- */

/* Sitzt unmittelbar an der Grafik und fuehrt deren Flaeche nach unten fort:
   gleicher Grund, gleiche Breite, nur die untere Rundung kommt dazu. Ein
   Trennstrich statt eines Abstands haelt beides zusammen und macht trotzdem
   sichtbar, wo das Bild endet. */
.wsf-spezleiste {
  padding: 14px;
  border-top: 1px solid var(--c-line);
  border-radius: 0 0 var(--r-panel) var(--r-panel);
  background: var(--c-surface-alt);
}

/* Eine Liste je Flaeche, sichtbar ist die gewaehlte – dieselbe Mechanik wie
   bei den Karten. */
.wsf-spez { display: none; margin: 0; }

.wsf-radio:nth-of-type(1):checked ~ .wsf-links .wsf-spezleiste .wsf-spez:nth-of-type(1),
.wsf-radio:nth-of-type(2):checked ~ .wsf-links .wsf-spezleiste .wsf-spez:nth-of-type(2),
.wsf-radio:nth-of-type(3):checked ~ .wsf-links .wsf-spezleiste .wsf-spez:nth-of-type(3),
.wsf-radio:nth-of-type(4):checked ~ .wsf-links .wsf-spezleiste .wsf-spez:nth-of-type(4),
.wsf-radio:nth-of-type(5):checked ~ .wsf-links .wsf-spezleiste .wsf-spez:nth-of-type(5),
.wsf-radio:nth-of-type(6):checked ~ .wsf-links .wsf-spezleiste .wsf-spez:nth-of-type(6) {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(175px, 1fr));
  gap: 10px;
}

/* Weiss auf der abgesetzten Flaeche der Leiste – andersherum verschwaenden
   die Kacheln in ihrem Grund. */
.wsf-kachel {
  padding: 10px 12px;
  border: 1px solid var(--c-line);
  border-radius: var(--r-tile);
  background: var(--c-surface);
}

/* Sinnbild neben der Bezeichnung, nicht in einer eigenen Spalte: als Spalte
   nahm es mit Abstand und Innenrand 55 der 201 Pixel Kachelbreite weg, und
   der Wert darunter musste sich mit 144 begnuegen. So steht ihm die ganze
   Kachel zur Verfuegung und lange Angaben brauchen eine Zeile weniger. */
.wsf-kachel dt {
  display: flex;
  align-items: center;
  gap: 7px;
  color: var(--c-text-weak);
  font-size: .6875rem;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  line-height: 1.3;
  margin-bottom: 4px;
}

/* Ohne diese Untergrenze waechst der Textteil bis zur breitesten
   unteilbaren Stelle und schiebt die Bezeichnung ueber den Kachelrand. */
.wsf-kachel dt span { min-width: 0; overflow-wrap: break-word; }

/* Deutsche Komposita sind laenger als die 144 Pixel Textspalte einer Kachel.
   Ohne Regel bricht "CNC-Aussenrundschleifmaschine" mitten im Wort um. Mit
   Silbentrennung faellt der Umbruch dorthin, wo er hingehoert – die Sprache
   dafuer steht am html-Element und wechselt mit der Sprachfassung.
   break-word bleibt als Auffanglinie fuer Woerter ohne Trennstelle. */
.wsf-kachel dd {
  margin: 0;
  font-size: .8125rem;
  font-weight: 500;
  line-height: 1.35;
  hyphens: auto;
  overflow-wrap: break-word;
}

/* Das Icon traegt keine eigene Aussage, es hilft nur beim Wiederfinden der
   Kachel. Deshalb zurueckhaltend im Ton – kraeftiger gesetzt wuerde es mit
   dem Wert darunter um Aufmerksamkeit streiten. Es steht in Goldton, damit
   die Kacheln als eine Gruppe lesen und sich vom Fliesstext absetzen. */
.wsf-icon {
  flex: none;
  width: 17px;
  height: 17px;
  color: var(--c-gold-tief);
  opacity: .85;
}

/* --- Leiste ------------------------------------------------------------- */

/* Nur noch Ersatzbedienung für schmale Breiten. Auf breiten Bildschirmen
   tragen die Beschriftungen im Bild selbst die Zeichnung und führen dorthin –
   die Leiste zeigte dasselbe ein zweites Mal. Unter 700px sind die
   Beschriftungen ausgeblendet, weil sie einander auf dem kleinen Bild
   überlappen; dort ist die Leiste die einzige Bedienung und bleibt stehen. */
.wsf-leiste { grid-area: leiste; display: none; }

.wsf-leiste-label {
  display: block;
  margin-bottom: 12px;
  color: var(--c-text-weak);
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.wsf-schalter-reihe {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 10px;
}

.wsf-schalter {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 13px 15px;
  border: 1px solid var(--c-line);
  border-radius: var(--r-tile);
  background: var(--c-surface);
  cursor: pointer;
  transition: border-color var(--t-fast) var(--ease),
              background var(--t-fast) var(--ease);
}

.wsf-schalter:hover { border-color: var(--c-gold-hell); }
.wsf-schalter-name { font-size: .875rem; font-weight: 500; }
.wsf-schalter-verfahren { color: var(--c-text-weak); font-size: .75rem; line-height: 1.35; }

/* --- Schematische Zeichnung im Schalter ---------------------------------- */

/* Alle Symbole zeigen dieselbe gestufte Welle, nur die bearbeitete Stelle
   wechselt. Damit die Reihe als Reihe liest, sitzt die Zeichnung in jedem
   Schalter gleich gross und gleich hoch – nicht zentriert, sondern links
   buendig wie der Text darunter. */
.wsf-zeichnung {
  width: 54px;
  height: 36px;
  margin-bottom: 8px;
  overflow: visible;
}

.wsf-z-korper {
  fill: none;
  stroke: var(--c-text-weak);
  stroke-width: 1.4;
  stroke-linejoin: round;
  opacity: .75;
  transition: opacity var(--t-fast) var(--ease);
}

/* Strichpunktlinie wie in der Technischen Zeichnung: lang, kurz, lang. */
.wsf-z-achse {
  stroke: var(--c-text-weak);
  stroke-width: .8;
  stroke-dasharray: 7 2 1.5 2;
  opacity: .4;
}

/* Die bearbeitete Stelle. Sie ist der einzige farbige Strich im Symbol –
   daran erkennt man auf einen Blick, worum es in diesem Schalter geht. */
.wsf-z-marke {
  fill: none;
  stroke: var(--c-gold);
  stroke-width: 2.6;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: stroke var(--t-fast) var(--ease);
}

.wsf-schalter:hover .wsf-z-korper { opacity: 1; }

.wsf-radio:nth-of-type(1):checked ~ .wsf-leiste .wsf-schalter:nth-of-type(1),
.wsf-radio:nth-of-type(2):checked ~ .wsf-leiste .wsf-schalter:nth-of-type(2),
.wsf-radio:nth-of-type(3):checked ~ .wsf-leiste .wsf-schalter:nth-of-type(3),
.wsf-radio:nth-of-type(4):checked ~ .wsf-leiste .wsf-schalter:nth-of-type(4),
.wsf-radio:nth-of-type(5):checked ~ .wsf-leiste .wsf-schalter:nth-of-type(5),
.wsf-radio:nth-of-type(6):checked ~ .wsf-leiste .wsf-schalter:nth-of-type(6) {
  border-color: var(--c-gold);
  background: var(--c-surface-alt);
}

/* Tastaturbedienung sichtbar machen: der Fokus liegt auf dem unsichtbaren
   Radiofeld, gezeigt wird er am zugehoerigen Schalter und an der Beschriftung
   im Bild. Ohne das waere die Auswahl per Tastatur blind bedienbar. */
.wsf-radio:nth-of-type(1):focus-visible ~ .wsf-leiste .wsf-schalter:nth-of-type(1),
.wsf-radio:nth-of-type(2):focus-visible ~ .wsf-leiste .wsf-schalter:nth-of-type(2),
.wsf-radio:nth-of-type(3):focus-visible ~ .wsf-leiste .wsf-schalter:nth-of-type(3),
.wsf-radio:nth-of-type(4):focus-visible ~ .wsf-leiste .wsf-schalter:nth-of-type(4),
.wsf-radio:nth-of-type(5):focus-visible ~ .wsf-leiste .wsf-schalter:nth-of-type(5),
.wsf-radio:nth-of-type(6):focus-visible ~ .wsf-leiste .wsf-schalter:nth-of-type(6),
.wsf-radio:nth-of-type(1):focus-visible ~ .wsf-links .wsf-buehne .wsf-callout:nth-of-type(1),
.wsf-radio:nth-of-type(2):focus-visible ~ .wsf-links .wsf-buehne .wsf-callout:nth-of-type(2),
.wsf-radio:nth-of-type(3):focus-visible ~ .wsf-links .wsf-buehne .wsf-callout:nth-of-type(3),
.wsf-radio:nth-of-type(4):focus-visible ~ .wsf-links .wsf-buehne .wsf-callout:nth-of-type(4),
.wsf-radio:nth-of-type(5):focus-visible ~ .wsf-links .wsf-buehne .wsf-callout:nth-of-type(5),
.wsf-radio:nth-of-type(6):focus-visible ~ .wsf-links .wsf-buehne .wsf-callout:nth-of-type(6) {
  outline: 2px solid var(--c-blue-text);
  outline-offset: 2px;
}

/* --- Schmale Breiten ---------------------------------------------------- */

@media (max-width: 1100px) {
  .wsf-tool {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "links" "karten" "leiste";
    gap: 24px;
  }
}

@media (max-width: 700px) {
  /* Beschriftungen im Bild werden hier unleserlich und ueberlappen einander.
     Die Punkte bleiben als Ortsangabe stehen, gefuehrt wird ueber die Leiste –
     die deshalb genau hier wieder auftaucht. */
  .wsf-callout { display: none; }
  .wsf-fuehrung { display: none; }
  .wsf-leiste { display: block; }
  .wsf-karte { padding: 22px; }
  .wsf-schalter-reihe { grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); }
}


/* ==========================================================================
   Bewegte Schemazeichnung des Schleifvorgangs
   Markup: src/_includes/wsf-animation.njk
   Steht in der Karte der interaktiven Werkstueckgrafik anstelle des Fotos.

   Der Grundzustand hier ist der Augenblick des Eingriffs: Scheibe an der
   Flaeche, Kontakt leuchtet, keine Funken. Das ist bewusst so gewaehlt,
   denn genau dieser Zustand bleibt stehen, wenn keine Bewegung laufen darf
   (prefers-reduced-motion schaltet weiter oben jede Animation ab). Ein
   Standbild, das fuer sich lesbar ist - und nicht eine Scheibe, die ratlos
   ueber dem Werkstueck schwebt.

   Alle Zeiten haengen an --wsfa-takt. Wer das Tempo aendert, aendert eine
   Zahl; die Anteile im Ablauf verschieben sich nicht gegeneinander.
   ========================================================================== */

.wsf-karte-bild--animation {
  /* Derselbe Grund wie unter dem Foto, damit die Karte gleich aussieht,
     egal was in der Kachel steckt. */
  background: var(--c-surface-alt);
  /* Bezug fuer den Schalter in der Ecke. */
  position: relative;
}

/* --- Schalter fuer die Bewegung ------------------------------------------

   Markup: die Checkbox steht als erstes Kind von .container, das Label in
   der Ecke jeder Zeichnung. Warum getrennt, steht dort im Kommentar.

   Angehakt wird jede Animation abgeschaltet statt angehalten. Das ist der
   Unterschied zu animation-play-state: pausiert bliebe die Scheibe da
   stehen, wo sie gerade ist - unter Umstaenden zurueckgezogen, mitten in
   der Luft. Abgeschaltet greift dagegen der Grundzustand des Stylesheets,
   und der ist bewusst der Augenblick des Eingriffs. Ein Standbild, das
   fuer sich lesbar ist. */

.wsf-bewegung {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden; clip-path: inset(50%);
  white-space: nowrap;
}

.wsf-bewegung-schalter {
  position: absolute;
  right: 8px;
  bottom: 8px;
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  cursor: pointer;
  /* Deckend, nicht durchscheinend: darunter liegt mal heller Grund, mal
     die dunkle Scheibe. Ein halbtransparenter Knopf waere ueber dem
     Belag kaum noch zu sehen. */
  background: var(--c-surface);
  border: 1px solid var(--c-line);
  box-shadow: 0 1px 3px rgba(23, 32, 51, .12);
  color: var(--c-text-muted);
  /* Zurueckhaltend, solange niemand hinsieht - die Zeichnung ist der
     Inhalt, der Knopf nur Beiwerk. Beim Zeigen tritt er hervor. */
  opacity: .55;
  transition: opacity var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}

.wsf-karte-bild--animation:hover .wsf-bewegung-schalter,
.wsf-bewegung-schalter:hover { opacity: 1; }
.wsf-bewegung-schalter:hover { color: var(--c-gold-tief); }

.wsf-bewegung-schalter svg {
  width: 14px;
  height: 14px;
  fill: currentColor;
}

/* Angehalten bleibt der Knopf voll sichtbar: er ist dann kein Beiwerk
   mehr, sondern der Weg zurueck. */
.wsf-bewegung:checked ~ .wsf-tool .wsf-bewegung-schalter { opacity: 1; }

/* Sinnbild je nach Zustand. Im Lauf das Pausenzeichen, angehalten der
   Pfeil - gezeigt wird immer, was der Klick bewirkt. */
.wsf-bewegung-start { display: none; }
.wsf-bewegung:checked ~ .wsf-tool .wsf-bewegung-pause { display: none; }
.wsf-bewegung:checked ~ .wsf-tool .wsf-bewegung-start { display: block; }

/* Tastaturbedienung sichtbar machen: der Fokus liegt auf dem unsichtbaren
   Ankreuzfeld, gezeigt wird er am Knopf. */
.wsf-bewegung:focus-visible ~ .wsf-tool .wsf-bewegung-schalter {
  opacity: 1;
  outline: 2px solid var(--c-blue-text);
  outline-offset: 2px;
}

/* --- Umschalter Zeichnung / Scheibenform ---------------------------------

   Beide Zustaende liegen im Markup, umgeschaltet wird die Sichtbarkeit.
   Kein Nachladen, kein JavaScript - und das Formbild ist per loading=lazy
   ohnehin erst dann geholt, wenn es gebraucht wird. */

.wsf-form {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden; clip-path: inset(50%);
  white-space: nowrap;
}

/* Ruhezustand: Zeichnung sichtbar, Formbild nicht. Das Formbild wird
   trotzdem im Fluss gehalten und nur ausgeblendet - so behaelt die Kachel
   ihre Hoehe und die Karte springt beim Umschalten nicht. */
.wsf-formbild {
  position: absolute;
  inset: 0;
  margin: auto;
  display: block;
  width: auto;
  height: 78%;
  max-width: 60%;
  object-fit: contain;
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--t-mid) var(--ease);
}

.wsf-form:checked ~ .wsf-tool .wsfa { visibility: hidden; }
.wsf-form:checked ~ .wsf-tool .wsf-formbild { opacity: 1; visibility: visible; }

/* Der Knopf sitzt links neben dem Bewegungsknopf, gleiche Groesse und
   gleiche Zurueckhaltung - zwei gleichrangige Bedienelemente. */
.wsf-form-schalter {
  position: absolute;
  right: 40px;
  bottom: 8px;
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  cursor: pointer;
  background: var(--c-surface);
  border: 1px solid var(--c-line);
  box-shadow: 0 1px 3px rgba(23, 32, 51, .12);
  color: var(--c-text-muted);
  opacity: .55;
  transition: opacity var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}

.wsf-karte-bild--animation:hover .wsf-form-schalter,
.wsf-form-schalter:hover { opacity: 1; }
.wsf-form-schalter:hover { color: var(--c-gold-tief); }

.wsf-form-schalter svg { width: 15px; height: 15px; }

.wsf-form:checked ~ .wsf-tool .wsf-form-schalter { opacity: 1; }

.wsf-form-aus { display: none; }
.wsf-form:checked ~ .wsf-tool .wsf-form-an { display: none; }
.wsf-form:checked ~ .wsf-tool .wsf-form-aus { display: block; }

.wsf-form:focus-visible ~ .wsf-tool .wsf-form-schalter {
  opacity: 1;
  outline: 2px solid var(--c-blue-text);
  outline-offset: 2px;
}

/* Bei gezeigter Form bewegt sich nichts - der Bewegungsknopf haette dort
   nichts anzuhalten. */
.wsf-form:checked ~ .wsf-tool .wsf-bewegung-schalter { display: none; }

/* Genormte Grundform in den Eckdaten der Karte. */
.wsf-formlink {
  color: var(--c-blue-text);
  text-decoration-color: var(--c-blue-tint-line);
  text-underline-offset: 2px;
}
.wsf-formlink:hover { color: var(--c-blue-dark); }
.wsf-formhinweis { color: var(--c-text-muted); }

/* Die Abschaltung selbst. Dieselbe Liste wie unter prefers-reduced-motion
   weiter unten - was dort das Betriebssystem verlangt, verlangt hier der
   Besucher. */
.wsf-bewegung:checked ~ .wsf-tool .wsfa-zustellung,
.wsf-bewegung:checked ~ .wsf-tool .wsfa-zustellung--laengs,
.wsf-bewegung:checked ~ .wsf-tool .wsfa-zustellung--plan,
.wsf-bewegung:checked ~ .wsf-tool .wsfa-hub,
.wsf-bewegung:checked ~ .wsf-tool .wsfa-dreh,
.wsf-bewegung:checked ~ .wsf-tool .wsfa-oel,
.wsf-bewegung:checked ~ .wsf-tool .wsfa-glut,
.wsf-bewegung:checked ~ .wsf-tool .wsfa-funken,
.wsf-bewegung:checked ~ .wsf-tool .wsfa-funke { animation: none; }

.wsf-bewegung:checked ~ .wsf-tool .wsfa-funken { opacity: 1; }
.wsf-bewegung:checked ~ .wsf-tool .wsfa-funke { opacity: 0; }

.wsfa {
  display: block;
  width: 100%;
  height: auto;
  /* 320 x 140 = 16:7 - dieselbe Proportion wie beim Foto. Die Angabe steht
     trotzdem hier, damit die Kachel schon vor dem Zeichnen ihre Hoehe hat
     und die Karte beim Laden nicht springt. */
  aspect-ratio: 16 / 7;

  --wsfa-takt: 4.4s;
  /* Hub der Zustellung. Klein halten: eine Schleifscheibe faehrt nicht
     spektakulaer an, sie stellt zu. Zu viel Weg wirkt wie eine Presse. */
  --wsfa-hub: 15px;
}

/* --- Zustellung ----------------------------------------------------------

   Anfahren, schleifen, ausfeuern, zurueckziehen. Das Verweilen im Eingriff
   nimmt den groessten Teil des Takts ein - dort passiert die Arbeit, und
   dort soll das Auge auch bleiben duerfen. */

.wsfa-zustellung {
  animation: wsfa-zustellung var(--wsfa-takt) var(--ease) infinite;
}

@keyframes wsfa-zustellung {
  0%        { transform: translateY(calc(var(--wsfa-hub) * -1)); }
  18%, 70%  { transform: translateY(0); }
  84%, 100% { transform: translateY(calc(var(--wsfa-hub) * -1)); }
}

/* Laengsvorschub - Wellenzapfen. Der Sitz ist laenger als die Scheibe
   breit, sie wandert deshalb nach dem Anstellen axial darueber hinweg und
   wieder zurueck. Zustellung und Vorschub stecken in einer einzigen
   Keyframe-Folge: es ist eine zusammenhaengende Bewegung, kein Nebeneinander
   von zweien. Grundzustand bleibt die Mitte des Wegs, im Eingriff. */
.wsfa-zustellung--laengs {
  animation: wsfa-laengs var(--wsfa-takt) var(--ease) infinite;
  --wsfa-weg: 52px;
}

@keyframes wsfa-laengs {
  0%        { transform: translate(calc(var(--wsfa-weg) * -1), calc(var(--wsfa-hub) * -1)); }
  12%       { transform: translate(calc(var(--wsfa-weg) * -1), 0); }
  46%       { transform: translate(var(--wsfa-weg), 0); }
  80%       { transform: translate(calc(var(--wsfa-weg) * -1), 0); }
  88%, 100% { transform: translate(calc(var(--wsfa-weg) * -1), calc(var(--wsfa-hub) * -1)); }
}

/* Axiale Zustellung - Flanschflaeche. Die Scheibe faehrt laengs der Achse
   an die Stirnflaeche heran, nicht radial von oben. Der Weg ist kurz: eine
   Planflaeche hat kein Aufmass, das eine grosse Geste rechtfertigte. */
.wsfa-zustellung--plan {
  animation: wsfa-plan var(--wsfa-takt) var(--ease) infinite;
}

@keyframes wsfa-plan {
  0%        { transform: translateX(12px); }
  18%, 70%  { transform: translateX(0); }
  84%, 100% { transform: translateX(12px); }
}

/* --- Hub des Kurbelzapfens ----------------------------------------------

   Der Hubzapfen kreist um die Hauptachse, und die Scheibe folgt ihm - an
   der Maschine die Interpolation von Werkstueckspindel und Schleifspindel.
   Beide tragen darum dieselbe Klasse und dieselbe Dauer wie die Drehung
   des Werkstuecks: eine Umdrehung, ein Hub.

   Die Bahn ist eine Ellipse, kein Kreis. Sie liegt in der Ebene quer zur
   Achse, und die steht in dieser Ansicht fast auf der Kante - waagerecht
   bleibt darum nur der Faktor k. Zwoelf Stuetzstellen alle 30 Grad; bei
   diesem Radius ist der Unterschied zur echten Ellipse nicht zu sehen.

   Grundzustand ist der untere Umkehrpunkt. Nicht aus Geschmack: oben waere
   die Scheibe fast aus dem Bild geschoben, und ohne Bewegung bliebe genau
   dieses Bild stehen. */

.wsfa-hub {
  transform: translate(0, 16px);
  animation: wsfa-hub 3.1s linear infinite;
}

@keyframes wsfa-hub {
  0%      { transform: translate(0,       16px); }
  8.333%  { transform: translate(-3.04px, 13.86px); }
  16.667% { transform: translate(-5.27px,  8px); }
  25%     { transform: translate(-6.08px,  0); }
  33.333% { transform: translate(-5.27px, -8px); }
  41.667% { transform: translate(-3.04px, -13.86px); }
  50%     { transform: translate(0,      -16px); }
  58.333% { transform: translate(3.04px, -13.86px); }
  66.667% { transform: translate(5.27px,  -8px); }
  75%     { transform: translate(6.08px,   0); }
  83.333% { transform: translate(5.27px,   8px); }
  91.667% { transform: translate(3.04px,  13.86px); }
  100%    { transform: translate(0,       16px); }
}

/* --- Drehung -------------------------------------------------------------

   Laeuft durch, unabhaengig vom Takt der Zustellung: die Spindel bleibt an,
   auch wenn die Scheibe gerade frei steht.

   Gedreht wird um die Mitte des eigenen Huellrechtecks. Die drehenden
   Gruppen sind deshalb symmetrisch um ihren Nullpunkt gezeichnet, denn
   dieser Nullpunkt ist die Drehachse.

   Gegenlaeufig: am Beruehrpunkt laufen die Oberflaechen von Scheibe und
   Werkstueck gegeneinander, wie beim Aussenrundschleifen ueblich. Im Bild
   heisst das entgegengesetzter Drehsinn der beiden Stirnseiten. */

.wsfa-dreh {
  transform-box: fill-box;
  transform-origin: center;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}

.wsfa-dreh--scheibe {
  animation-name: wsfa-dreh-links;
  animation-duration: 1.05s;
}

/* Das Werkstueck laeuft um ein Vielfaches langsamer als die Scheibe - so
   ist es an der Maschine, und nur so liest sich, welches Teil das Werkzeug
   ist. */
.wsfa-dreh--werkstueck {
  animation-name: wsfa-dreh-rechts;
  animation-duration: 3.1s;
}

@keyframes wsfa-dreh-rechts { to { transform: rotate(360deg); } }
@keyframes wsfa-dreh-links  { to { transform: rotate(-360deg); } }

/* Die Oelbohrung wandert ueber die sichtbare Seite des Zapfens nach unten
   und verschwindet an der Silhouette - dieselbe Umdrehung wie die Marke am
   Wellenende, nur anders sichtbar gemacht. Am Rand wird ausgeblendet: dort
   liefe die Bohrung um die Rundung herum und waere ohnehin weg. */
.wsfa-oel {
  opacity: .75;
  animation: wsfa-oel 3.1s linear infinite;
}

@keyframes wsfa-oel {
  0%        { transform: translateY(-21px); opacity: 0; }
  18%, 82%  { opacity: .75; }
  100%      { transform: translateY(21px);  opacity: 0; }
}

/* --- Eingriff ------------------------------------------------------------ */

/* Das Leuchten folgt der Zustellung: es kommt, wenn die Scheibe ansteht,
   und geht, bevor sie abhebt. Etwas frueher aus als die Bewegung endet -
   das Ausfeuern am Ende des Hubs laeuft ohne Abtrag. */
.wsfa-glut {
  animation: wsfa-glut var(--wsfa-takt) var(--ease) infinite;
}

.wsfa-glut--kern { opacity: .9; }

@keyframes wsfa-glut {
  0%, 12%   { opacity: 0; }
  22%, 62%  { opacity: 1; }
  74%, 100% { opacity: 0; }
}

/* Die Funkengruppe wird als Ganzes zum Eingriff freigegeben, die einzelnen
   Funken fliegen darin in ihrem eigenen, schnelleren Takt. Zwei Ebenen,
   damit der Flug nicht an die Laenge des Gesamttakts gebunden ist. */
.wsfa-funken {
  animation: wsfa-glut var(--wsfa-takt) var(--ease) infinite;
}

.wsfa-funke {
  opacity: 0;
  fill: none;
  stroke: #ffdf9e;
  stroke-width: 1.3;
  stroke-linecap: round;
  transform-box: fill-box;
  transform-origin: center;
  animation: wsfa-funke 560ms linear infinite;
  animation-delay: var(--wsfa-vz, 0ms);
}

@keyframes wsfa-funke {
  0%   { opacity: 0; transform: translate(0, 0) scale(1); }
  12%  { opacity: .95; }
  100% { opacity: 0; transform: translate(var(--wsfa-fx), var(--wsfa-fy)) scale(.4); }
}

/* --- Ohne Bewegung -------------------------------------------------------

   Die Regel weiter oben im Stylesheet stutzt jede Animation auf einen
   Durchlauf von .001ms. Uebrig bleibt dadurch der Grundzustand, und der
   sitzt hier richtig: Scheibe im Eingriff, Kontakt leuchtet, Funken aus.
   Ausgeschrieben wird es trotzdem - eine Absicht, die man nur an einer
   Nebenwirkung ablesen kann, ist keine. */

@media (prefers-reduced-motion: reduce) {
  /* Hier bewegt sich nichts mehr, was der Besucher noch anhalten koennte.
     Ein Knopf ohne Wirkung ist schlimmer als keiner. */
  .wsf-bewegung-schalter { display: none; }

  .wsfa-zustellung,
  .wsfa-zustellung--laengs,
  .wsfa-zustellung--plan,
  .wsfa-hub,
  .wsfa-dreh,
  .wsfa-oel,
  .wsfa-glut,
  .wsfa-funken,
  .wsfa-funke { animation: none; }
  .wsfa-funken { opacity: 1; }
  .wsfa-funke { opacity: 0; }
}