/* ==========================================================================
   EU Cowork AI · content.css: Design v2
   Ein Stylesheet für alle statischen Content-Seiten (/faq, /vergleich,
   /governance, /integrationen, /self-hosting, /sicherheit, /vision ...).

   Kein Framework, keine Runtime, kein support.js. Der Text steht im
   Roh-HTML und bleibt ohne JavaScript lesbar (Anforderung AI-Crawler).

   Token-Namen identisch zu den DC-Laufzeitseiten (SiteHeader.dc.html,
   SiteFooter.dc.html, Waitlist.dc.html, Rechtstexte), damit statische und
   dynamische Seiten nicht auseinanderdriften. Die alten --euc-*-Namen
   bleiben als Alias bestehen.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Fonts: selbst gehostet, latin, statische Instanzen
   Die Google-Fonts-Familien werden nur noch variabel ausgeliefert; die
   Dateien in /fonts/ sind daraus erzeugte statische Schnitte (wght gepinnt).
   -------------------------------------------------------------------------- */


@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/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('/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('/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: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/jetbrains-mono-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: 'JetBrains Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/fonts/jetbrains-mono-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;
}

/* --------------------------------------------------------------------------
   2. Design-Tokens v2
   -------------------------------------------------------------------------- */

:root {
  /* --- Flächen --- */
  --c-bg:            #FAFAF7;   /* Grundfläche, Knochenweiss */
  --c-bg-cool:       #F5F8FA;   /* abgesetzte Sektion */
  --c-surface:       #FFFFFF;   /* Karte, Attrappe, Popover */
  --c-deep:          #0B1E33;   /* Navy: dunkle Blöcke, Primärbutton */
  --c-deep-hover:    #123456;

  /* --- Text auf hell --- */
  --c-ink:           #0B1E33;
  --c-body:          #41505E;
  --c-body-soft:     #5A6472;
  --c-muted:         #8A96A2;   /* nur Dekor: Trenner, Zähler. Nie Fliesstext. */

  /* --- Text auf dunkel --- */
  --c-on-deep:       #F7FAFC;
  --c-on-deep-body:  #C4D0DD;
  --c-on-deep-muted: #8AA0B6;
  --c-on-deep-label: #7D93AB;

  /* --- EU-Akzent: die einzige neue UI-Farbe --- */
  --c-eu-700:        #12326B;   /* Europa-Blau: Links, aktiv, Fokus, Zahlen */
  --c-eu-500:        #2E6C86;   /* Eyebrows, Icons */
  --c-eu-400:        #3F7CC9;   /* nur Verlauf */
  --c-ice-300:       #A5D8E6;
  --c-ice-100:       #EFF6F9;
  --c-ice-tint:      #EAF3F7;
  --c-gold-500:      #F4C542;   /* Interpunktion, nie Fläche */

  /* --- Linien: nur noch Trenner, Tabellen, Formularfelder --- */
  --c-line:          #E7ECF0;
  --c-line-soft:     #EEF1F4;

  /* --- Typografie --- */
  --f-display:  'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI','Helvetica Neue',Arial,sans-serif;
  --f-body:     'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
  --f-mono:     'JetBrains Mono', ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, 'Liberation Mono', monospace;

  /* --- Raster und Abstände --- */
  --s-1:4px;  --s-2:8px;   --s-3:12px; --s-4:16px; --s-5:24px;
  --s-6:32px; --s-7:44px;  --s-8:64px; --s-9:88px; --s-10:120px;

  --w-max:      1200px;
  --w-measure:  720px;
  --gutter:     clamp(20px, 5vw, 80px);
  --sec-y:       clamp(80px, 10vw, 148px);
  --sec-y-tight: clamp(56px, 7vw, 96px);
  --header-h:   68px;

  /* --- Radien: Radius wächst mit der Fläche --- */
  --r-xs:8px; --r-s:10px; --r-m:14px; --r-l:20px;
  --r-xl:24px; --r-2xl:32px; --r-full:999px;

  /* --- European Precision: Radien nach ROLLE statt nach Fläche ---
     Wortgleich zu Landing.dc.html und SiteHeader.dc.html. Über 12px geht für
     normale Bauteile nichts mehr, die volle Rundung bleibt dem Status
     vorbehalten. Die alte Skala steht, bis nichts mehr auf sie zeigt. --- */
  --r-control:4px; --r-icon:6px; --r-frame:8px; --r-card:12px; --r-status:999px;
  --c-hairline:#DDE4EA; --c-hairline-strong:#C6D0DA;
  --bd:1px solid var(--c-hairline);
  --c-surface-warm:#FAF9F6;
  --sh-flat:0 1px 2px rgba(11,30,51,.04);
  --sh-soft:0 1px 2px rgba(11,30,51,.04), 0 8px 18px -12px rgba(11,30,51,.13);

  /* --- Schatten, in Navy getönt, nie neutralschwarz --- */
  --sh-1:0 1px 2px rgba(11,30,51,.05);
  --sh-2:0 1px 2px rgba(11,30,51,.05),
         0 8px 20px -12px rgba(11,30,51,.18);
  --sh-3:0 1px 2px rgba(11,30,51,.05),
         0 8px 20px -12px rgba(11,30,51,.18),
         0 24px 48px -28px rgba(11,30,51,.22);
  --sh-4:0 2px 4px rgba(11,30,51,.06),
         0 14px 30px -14px rgba(11,30,51,.26),
         0 40px 72px -34px rgba(11,30,51,.30);

  /* Materialkante statt Rahmen */
  --edge:inset 0 1px 0 rgba(255,255,255,.34),
         inset 0 0 0 1px rgba(11,30,51,.06);
  --edge-soft:inset 0 1px 0 rgba(255,255,255,.5),
              inset 0 0 0 1px rgba(11,30,51,.05);
  --edge-deep:inset 0 1px 0 rgba(165,216,230,.14),
              inset 0 0 0 1px rgba(165,216,230,.14);

  /* Transluzente Schichten */
  --mat-bar:  rgba(250,250,247,.72);
  --mat-bar-scrolled: rgba(250,250,247,.86);
  --mat-chip: rgba(255,255,255,.72);

  /* --- Motion --- */
  --ease-out:    cubic-bezier(.23,1,.32,1);
  --ease-in-out: cubic-bezier(.77,0,.175,1);
  --d-press:140ms; --d-hover:200ms; --d-panel:320ms; --d-reveal:480ms;

  /* ------------------------------------------------------------------
     Alias auf die alten Namen. Bestehendes Markup und ältere Regeln
     laufen damit weiter, ohne dass alles in einem Rutsch umgeschrieben
     werden muss.
     ------------------------------------------------------------------ */
  --euc-bg:            var(--c-bg);
  --euc-bg-soft:       var(--c-bg-cool);
  --euc-surface:       var(--c-surface);
  --euc-dark:          var(--c-deep);
  --euc-dark-hover:    var(--c-deep-hover);
  --euc-ink:           var(--c-ink);
  --euc-body:          var(--c-body);
  --euc-body-soft:     var(--c-body-soft);
  --euc-muted:         var(--c-muted);
  --euc-on-dark:       var(--c-on-deep);
  --euc-on-dark-body:  var(--c-on-deep-body);
  --euc-on-dark-muted: var(--c-on-deep-muted);
  --euc-on-dark-label: var(--c-on-deep-label);
  --euc-gold:          var(--c-gold-500);
  --euc-ice:           var(--c-ice-300);
  --euc-ice-mid:       #D6EDF5;
  --euc-ice-soft:      var(--c-ice-100);
  --euc-ice-tint:      var(--c-ice-tint);
  --euc-chip-ink:      var(--c-eu-500);
  --euc-chip-border:   #DEEBF1;
  --euc-accent-deep:   var(--c-eu-500);
  --euc-line:          var(--c-line);
  --euc-line-cool:     var(--c-line-soft);
  --euc-line-card:     var(--c-line);
  --euc-line-strong:   var(--c-line);
  --euc-line-btn:      #D9DEE4;
  --euc-link:          var(--c-eu-700);
  --euc-link-hover:    var(--c-ink);
  --euc-font-display:  var(--f-display);
  --euc-font-body:     var(--f-body);
  --euc-font-mono:     var(--f-mono);
  --euc-measure:       var(--w-measure);
  --euc-wide:          1120px;
  --euc-gutter:        var(--gutter);
  --euc-header-h:      var(--header-h);
}

/* --------------------------------------------------------------------------
   3. Reset + Basis
   -------------------------------------------------------------------------- */

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

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--c-bg);
  color: var(--c-body);
  font-family: var(--f-body);
  font-size: 18px;
  line-height: 1.62;
  letter-spacing: 0;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;           /* Netz: kein horizontaler Overflow */
}

::selection { background: var(--c-ice-300); color: var(--c-deep); }

img, svg, video, table { max-width: 100%; }
img { height: auto; }

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

/* Sprungziel-Abstand unter dem klebenden Header */
[id] { scroll-margin-top: calc(var(--header-h) + var(--s-5)); }

.euc-skip {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 400;
  background: var(--c-deep);
  color: var(--c-on-deep);
  font-family: var(--f-body);
  font-size: 14px;
  padding: 12px 18px;
  border-radius: 0 0 var(--r-s) 0;
  text-decoration: none;
}
.euc-skip:focus { left: 0; }

/* --------------------------------------------------------------------------
   4. Header: statische Fassung von SiteHeader.dc.html
   Transluzentes Chrome, Scroll-Edge statt harter Hairline.
   -------------------------------------------------------------------------- */

.euc-header {
  position: sticky;
  top: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  gap: var(--s-5);
  min-height: var(--header-h);
  padding: 10px var(--gutter);
  background: var(--mat-bar);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border-bottom: 0;
}

/* Scroll-Edge: 24px weicher Verlauf unter der Leiste statt 1px-Linie.
   Ohne JavaScript blendet ihn die Scroll-Timeline ein; wo die fehlt,
   steht er dauerhaft, aber sehr leise. */
.euc-header::after {
  content: '';
  position: absolute;
  left: 0; right: 0; top: 100%;
  height: 24px;
  pointer-events: none;
  background: linear-gradient(to bottom, rgba(11,30,51,.055), rgba(11,30,51,0));
}
@supports (animation-timeline: scroll()) {
  @keyframes euc-scroll-edge { from { opacity: 0 } to { opacity: 1 } }
  .euc-header::after {
    opacity: 0;
    animation: euc-scroll-edge linear both;
    animation-timeline: scroll(root block);
    animation-range: 8px 56px;
  }
  /* Die Landing verdichtet das Leistenmaterial beim Scrollen von .72 auf .86
     (SiteHeader `.is-scrolled`). Ohne dasselbe hier verhielte sich dieselbe
     Leiste auf zwei Seitentypen unterschiedlich. Ohne Scroll-Timeline bleibt
     es beim Ruhewert — genau wie bisher. */
  @keyframes euc-bar-density { from { background-color: var(--mat-bar) } to { background-color: var(--mat-bar-scrolled) } }
  .euc-header {
    animation: euc-bar-density linear both;
    animation-timeline: scroll(root block);
    animation-range: 8px 56px;
  }
}

.euc-brand {
  display: flex;
  align-items: center;
  gap: 11px;
  text-decoration: none;
  flex: 0 0 auto;
  min-height: 44px;
}
.euc-brand svg { display: block; }
.euc-brand span {
  font-family: var(--f-display);
  font-weight: 600;
  font-size: 19px;
  letter-spacing:-.010em;
  color: var(--c-ink);
}
/* Wortmarke: „EU Cowork" in Tinte, „AI" in Europa-Blau.
   Doppelt qualifiziert, sonst schlägt `.euc-brand span` (0-1-1) die Regel. */
.euc-brand .euc-brand-ai { color: var(--c-eu-700); font-style: normal; }

.euc-nav {
  display: flex;
  align-items: center;
  gap: 30px;
  margin-left: auto;
  margin-right: var(--s-2);
}
.euc-nav a {
  position: relative;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-family: var(--f-body);
  font-size: 14.5px;
  font-weight: 500;
  letter-spacing: 0;
  text-decoration: none;
  color: var(--c-body-soft);
  transition: color .15s ease;
  white-space: nowrap;
}
.euc-nav a[aria-current="page"] { color: var(--c-eu-700); }

.euc-header-cta { display: flex; align-items: center; gap: 14px; flex: 0 0 auto; }

/* Sprachwahl auf den statischen Seiten: ein schlichtes <select>, von
   /assets/i18n.js verdrahtet (data-euc-lang). Gleiche Pillenform wie die
   Sprachwahl der React-Leiste. */
.euc-lang {
  height: 36px; padding: 0 10px;
  border: 1px solid var(--c-hairline-strong); border-radius: 999px;
  background: transparent; color: var(--c-ink);
  font: inherit; font-size: 13px; font-weight: 600; letter-spacing: .04em;
  cursor: pointer; appearance: auto;
}
.euc-lang:hover { border-color: #9FB0C0; }
.euc-mob-panel .euc-lang { width: 100%; height: 44px; border-radius: 10px; }

/* ======================================================================
   GEMEINSAME BEDIENELEMENTE (Design-System „European Precision")

   Wortgleich zu Landing.dc.html und SiteHeader.dc.html. Die statischen
   Seiten laden keine dieser beiden Dateien, deshalb steht der Satz hier ein
   drittes Mal. Die alten Namen .euc-btn-primary und .euc-btn-secondary
   bleiben als Aliasse stehen: sie sind im Markup aller sieben Seiten, und
   ein Umbenennen wäre eine Änderung an sieben Dateien ohne Gewinn.
   ====================================================================== */
.euc-btn,
.euc-btn-primary,
.euc-btn-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 18px;
  box-sizing: border-box;
  font-family: var(--f-body);
  font-size: 14.5px;
  font-weight: 500;
  letter-spacing: -.004em;
  line-height: 1;
  white-space: nowrap;
  text-decoration: none;
  cursor: pointer;
  border: 1px solid transparent;
  border-radius: var(--r-control);
  background: none;
  transition: background 180ms var(--ease-out),
              border-color 180ms var(--ease-out),
              color 180ms var(--ease-out);
}
.euc-btn:focus-visible,
.euc-btn-primary:focus-visible,
.euc-btn-secondary:focus-visible { border-radius: var(--r-control); }
/* Druck ist ein Versatz, keine Skalierung: ein Knopf, der beim Klicken
   schrumpft, verschiebt seine Nachbarn optisch mit. */
.euc-btn:active,
.euc-btn-primary:active,
.euc-btn-secondary:active { transform: translateY(1px); }

.euc-btn.is-primary,
.euc-btn-primary { color: #F7FAFC; background: var(--c-deep); border-color: var(--c-deep); font-weight: 600; }
.euc-btn.is-secondary,
.euc-btn-secondary { color: var(--c-ink); background: #FFFFFF; border-color: var(--c-hairline-strong); }
.euc-btn.is-ghost { color: var(--c-ink); background: transparent; border-color: transparent;
  border-radius: var(--r-icon); min-height: 36px; padding: 0 12px; font-size: 13.5px; }

/* Höhen nach Ort: Navigation 44, Hero 52, kompakte Aktionen 38. */
.euc-btn.is-nav { min-height: 44px; }
.euc-btn.is-hero { min-height: 52px; padding: 0 22px; font-size: 15px; }
.euc-btn.is-compact { min-height: 38px; padding: 0 14px; font-size: 13.5px; }

@media (hover: hover) and (pointer: fine) {
  .euc-btn.is-primary:hover, .euc-btn-primary:hover { background: #15304C; border-color: #15304C; }
  .euc-btn.is-secondary:hover, .euc-btn-secondary:hover { border-color: #9FB0C0; }
  .euc-btn.is-ghost:hover { background: rgba(11,30,51,.05); }
}

/* Quadratischer Symbolschalter, 42px. Er braucht immer ein aria-label. */
.euc-ibtn {
  width: 42px; height: 42px; flex: 0 0 auto; padding: 0; box-sizing: border-box;
  display: inline-flex; align-items: center; justify-content: center; cursor: pointer;
  color: var(--c-ink); background: #FFFFFF;
  border: 1px solid var(--c-hairline-strong); border-radius: var(--r-icon);
  transition: background 180ms var(--ease-out), border-color 180ms var(--ease-out);
}
.euc-ibtn:focus-visible { border-radius: var(--r-icon); }
.euc-ibtn[disabled] { opacity: .34; cursor: default; pointer-events: none; }
@media (hover: hover) and (pointer: fine) { .euc-ibtn:hover { border-color: #9FB0C0; } }

/* Textlink mit Pfeil: kein Behälter, keine Fläche. */
.euc-link {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--f-body); font-size: 14.5px; font-weight: 500;
  color: var(--c-eu-700); text-decoration: none;
}
.euc-link svg { flex: 0 0 auto; transition: transform 180ms var(--ease-out); }
@media (hover: hover) and (pointer: fine) {
  .euc-link:hover { text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
  .euc-link:hover svg { transform: translateX(3px); }
}
@media (prefers-reduced-motion: reduce) {
  .euc-btn, .euc-btn-primary, .euc-btn-secondary, .euc-ibtn, .euc-link svg { transition-duration: 1ms; }
  .euc-btn:active, .euc-btn-primary:active, .euc-btn-secondary:active, .euc-ibtn:active { transform: none; }
  .euc-link:hover svg { transform: none; }
}


/* Der Sekundärknopf ist ohnehin deckend weiss; die frühere Ausnahme für die
   transluzente Leiste braucht es nicht mehr. */

/* Mobiles Menü: reines CSS über <details>, kein JavaScript */
.euc-mob { display: none; margin-left: auto; position: relative; }
.euc-mob > summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: var(--r-s);
  background: none;
  transition: background-color 120ms ease;
}
/* Dieselbe Geste und dieselbe Zahl wie der Burger im SiteHeader: auf Touch
   sonst null Rückmeldung. Nur Tönung, keine Bewegung. */
.euc-mob > summary:active { background-color: rgba(11,30,51,.06); }
@media (hover: hover) and (pointer: fine) {
  .euc-mob > summary:hover { background-color: rgba(11,30,51,.05); }
}
.euc-mob > summary::-webkit-details-marker { display: none; }
.euc-mob > summary::marker { content: ''; }
.euc-mob > summary span { display: block; width: 22px; height: 1.5px; background: var(--c-ink); }

.euc-mob-panel {
  position: absolute;
  right: 0;
  top: calc(100% + 10px);
  min-width: 244px;
  background: var(--c-bg);
  border: 0;
  border-radius: var(--r-card);
  box-shadow: var(--sh-soft);
  padding: var(--s-2);
  display: flex;
  flex-direction: column;
}
.euc-mob-panel a {
  display: flex;
  align-items: center;
  min-height: 44px;
  font-family: var(--f-body);
  font-size: 15.5px;
  font-weight: 500;
  line-height: 1.3;
  text-decoration: none;
  color: var(--c-ink);
  padding: 11px 12px;
  border-radius: var(--r-xs);
}
/* Muss .euc-mob-panel a schlagen (gleiche Spezifität, deshalb doppelt
   qualifiziert): sonst steht dunkler Text auf dunklem Button. */
.euc-mob-panel a.euc-btn-primary {
  justify-content: center;
  margin-top: 6px;
  padding: 14px;
  font-size: 15px;
  font-weight: 600;
  color: var(--c-on-deep);
  background: var(--c-deep);
}
/* Zweiter Knopf im Blatt, gleiche Reihenfolge wie im SiteHeader: erst die
   Warteliste, darunter der Selbstbetrieb. Deckend, nicht transluzent: das
   Panel liegt bereits über der Milchglasleiste. */
.euc-mob-panel a.euc-btn-secondary {
  justify-content: center;
  margin-top: 8px;
  padding: 14px;
  font-size: 15px;
  font-weight: 500;
  color: var(--c-ink);
  background: var(--c-surface);
}

/* Das Panel wächst aus seinem Auslöser statt aus dem Nichts. Auf diesen
   JS-freien Seiten ist ::details-content der einzige Weg, beide Richtungen zu
   animieren — <details> nimmt den Teilbaum sonst schlagartig aus dem Rendering;
   content-visibility mit allow-discrete hält ihn für die Dauer der Blende.
   Ohne ::details-content (heute Firefox) greift der Block nicht: kein Bruch,
   nur kein Gewinn. */
@supports selector(::details-content) {
  .euc-mob::details-content {
    opacity: 0;
    transform: translateY(-6px) scale(.97);
    transform-origin: 100% 0;              /* der Burger sitzt oben rechts */
    transition: opacity   180ms var(--ease-out),
                transform 180ms var(--ease-out),
                content-visibility 180ms allow-discrete;
  }
  .euc-mob[open]::details-content { opacity: 1; transform: none; }
}

/* --------------------------------------------------------------------------
   5. Seitengerüst
   -------------------------------------------------------------------------- */

.euc-main { display: block; }

/* Textspalte: der TEXT misst 720px, die Rinne liegt aussen davor.
   Deshalb calc() statt max-width:720px: sonst frisst das Padding die
   Spalte auf und es bleiben nur ~590px Lesebreite. */
.euc-wrap {
  width: 100%;
  max-width: calc(var(--w-measure) + 2 * var(--gutter));
  margin: 0 auto;
  padding-left: var(--gutter);
  padding-right: var(--gutter);
}

/* Für breite Elemente (grosse Tabellen), falls nötig */
.euc-wrap-wide {
  width: 100%;
  max-width: calc(var(--euc-wide) + 2 * var(--gutter));
  margin: 0 auto;
  padding-left: var(--gutter);
  padding-right: var(--gutter);
}

/* Nur vertikal setzen. Die Kurzform `padding:` würde die seitliche Rinne
   von .euc-wrap überschreiben, wenn beide Klassen am selben Element hängen
   (<section class="euc-wrap euc-hero">). */
.euc-hero {
  padding-top: clamp(36px, 4.5vw, 52px);
  padding-bottom: clamp(28px, 3.5vw, 44px);
}
.euc-section { padding-top: clamp(40px, 5vw, 64px); }

/* --------------------------------------------------------------------------
   6. Breadcrumb
   -------------------------------------------------------------------------- */

.euc-breadcrumb {
  font-family: var(--f-body);
  font-size: 13px;
  line-height: 1.4;
  letter-spacing: .01em;
  color: var(--c-body-soft);
  padding-top: clamp(22px, 3vw, 32px);
}
.euc-breadcrumb ol {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-2);
}
.euc-breadcrumb li { display: flex; align-items: center; gap: var(--s-2); }
.euc-breadcrumb li + li::before { content: '/'; color: var(--c-muted); }
.euc-breadcrumb a { color: var(--c-eu-700); text-decoration: none; }
.euc-breadcrumb [aria-current="page"] { color: var(--c-body-soft); }

/* --------------------------------------------------------------------------
   7. Typografie
   Tracking ist grössenabhängig: gross negativ, Fliesstext null, klein positiv.
   Leading läuft invers dazu.
   -------------------------------------------------------------------------- */

.euc-eyebrow {
  font-family: var(--f-mono);
  font-size: 11.5px;
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--c-eu-500);
  margin: 0 0 var(--s-5);
}

h1, h2, h3, h4 {
  font-family: var(--f-display);
  color: var(--c-ink);
  text-wrap: balance;
  overflow-wrap: break-word;
}

/* display-xl */
h1 {
  font-weight: 400;
  font-size: clamp(40px, 5.4vw, 56px);
  line-height: 1.04;
  letter-spacing: -0.035em;
  margin: 0 0 var(--s-5);
}

/* display-l */
h2 {
  font-weight: 400;
  font-size: clamp(30px, 3.8vw, 40px);
  line-height: 1.10;
  letter-spacing: -0.030em;
  margin: clamp(52px, 6vw, 76px) 0 var(--s-4);
}

/* display-m: die bisher fehlende Zwischenstufe zwischen H2 und Kartentitel */
h3 {
  font-weight: 500;
  font-size: clamp(24px, 2.6vw, 28px);
  line-height: 1.16;
  letter-spacing: -0.024em;
  margin: clamp(34px, 4vw, 44px) 0 var(--s-3);
}

/* title-s */
h4 {
  font-weight: 500;
  font-size: 18px;
  line-height: 1.32;
  letter-spacing: -0.014em;
  margin: var(--s-6) 0 10px;
}

/* Erste Überschrift nach einem Kasten nicht doppelt abstanden */
h2:first-child, h3:first-child, h4:first-child { margin-top: 0; }

p {
  margin: 0 0 var(--s-5);
  color: var(--c-body);
  text-wrap: pretty;
}

/* lead: Vorspann unter der H1 */
.euc-lead {
  font-size: clamp(17px, 1.4vw, 19.5px);
  line-height: 1.58;
  letter-spacing: -0.005em;
  color: var(--c-body);
  max-width: 48ch;
  margin: 0 0 var(--s-2);
}

strong, b { font-weight: 600; color: var(--c-ink); }

a {
  color: var(--c-eu-700);
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
  transition: color .15s ease;
}

/* Dezenter Textlink im Stil der Site */
.euc-textlink {
  font-family: var(--f-body);
  font-weight: 500;
  color: var(--c-eu-700);
  text-decoration: none;
  border-bottom: 1px solid rgba(18,50,107,.28);
  padding-bottom: 1px;
  transition: color .18s ease, border-color .18s ease;
}

ul, ol { margin: 0 0 var(--s-5); padding-left: var(--s-5); }
li { margin: 0 0 9px; color: var(--c-body); }
li::marker { color: var(--c-eu-500); }
li > ul, li > ol { margin-top: 9px; }

hr {
  border: 0;
  height: 1px;
  background: var(--c-line-soft);
  margin: clamp(44px, 5vw, 60px) 0;
}

blockquote {
  margin: var(--s-6) 0;
  padding: 4px 0 4px 20px;
  border-left: 2px solid var(--c-ice-300);
  color: var(--c-body-soft);
  font-size: 17px;
  line-height: 1.6;
}

/* body-s */
small, .euc-small {
  font-size: 14.5px;
  line-height: 1.52;
  letter-spacing: .002em;
  color: var(--c-body-soft);
}

/* Gold ist Interpunktion, nie Fläche: Marker-Unterstreichung */
.euc-marker {
  background-image: linear-gradient(rgba(244, 197, 66, .38), rgba(244, 197, 66, .38));
  background-repeat: no-repeat;
  background-position: 0 60%;
  background-size: 100% 88%;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}

/* Zahlen in Tabellen und Statistiken */
.euc-num, .table-wrap td .euc-num {
  font-family: var(--f-mono);
  font-variant-numeric: tabular-nums;
}

/* --------------------------------------------------------------------------
   8. "Kurz gesagt": der Kasten, der am häufigsten als Antwort zitiert wird
   -------------------------------------------------------------------------- */

.kurz-gesagt {
  background: var(--c-ice-100);
  border: 0;
  border-radius: var(--r-card);
  border: var(--bd);
  box-shadow: var(--sh-flat);
  padding: clamp(22px, 3vw, 30px);
  margin: 0 0 clamp(32px, 4vw, 44px);
}
.kurz-gesagt > .kurz-gesagt-titel,
.kurz-gesagt > h2,
.kurz-gesagt > h3 {
  font-family: var(--f-mono);
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--c-eu-500);
  margin: 0 0 var(--s-4);
  line-height: 1.2;
}
.kurz-gesagt ul { margin: 0; padding-left: 20px; }
.kurz-gesagt li {
  color: #16293D;
  font-size: 17px;
  line-height: 1.6;
  margin-bottom: 11px;
}
.kurz-gesagt li:last-child { margin-bottom: 0; }
.kurz-gesagt li::marker { color: var(--c-eu-700); }
.kurz-gesagt p:last-child { margin-bottom: 0; }

/* --------------------------------------------------------------------------
   9. Inhaltsverzeichnis
   -------------------------------------------------------------------------- */

.toc {
  border: 0;
  background: var(--c-surface);
  border-radius: var(--r-card);
  border: var(--bd);
  box-shadow: var(--sh-flat);
  padding: clamp(18px, 2.5vw, 26px);
  margin: 0 0 clamp(32px, 4vw, 44px);
}
.toc > .toc-titel {
  font-family: var(--f-mono);
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--c-body-soft);
  margin: 0 0 var(--s-3);
  line-height: 1.2;
}
.toc ol, .toc ul {
  list-style: none;
  margin: 0;
  padding: 0;
  counter-reset: toc;
}
.toc li {
  margin: 0;
  border-top: 1px solid var(--c-line-soft);
}
.toc li:first-child { border-top: 0; }
.toc a {
  display: flex;
  align-items: center;
  min-height: 44px;
  padding: 9px 0;
  font-size: 16px;
  line-height: 1.45;
  color: var(--c-ink);
  text-decoration: none;
  transition: color .15s ease;
}
.toc a::before {
  counter-increment: toc;
  content: counter(toc, decimal-leading-zero);
  font-family: var(--f-mono);
  font-size: 11.5px;
  font-variant-numeric: tabular-nums;
  color: var(--c-muted);
  margin-right: var(--s-3);
}

/* --------------------------------------------------------------------------
   10. Tabellen: scrollen im eigenen Container, nie die Seite
   -------------------------------------------------------------------------- */

/* Scroll-Edge statt harter Kante: Schatten an `scroll`, weisse Deckel an
   `local`. Der Schatten steht nur auf der Seite, auf der es weitergeht; ohne
   Überlauf ist nichts sichtbar. */
.table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border: 0;
  border-radius: var(--r-card);
  background:
    linear-gradient(90deg, var(--c-surface) 40%, rgba(255,255,255,0)) 0 0 / 26px 100% no-repeat local,
    linear-gradient(270deg, var(--c-surface) 40%, rgba(255,255,255,0)) 100% 0 / 26px 100% no-repeat local,
    radial-gradient(farthest-side at 0 50%, rgba(11,30,51,.13), rgba(11,30,51,0)) 0 0 / 16px 100% no-repeat scroll,
    radial-gradient(farthest-side at 100% 50%, rgba(11,30,51,.13), rgba(11,30,51,0)) 100% 0 / 16px 100% no-repeat scroll,
    var(--c-surface);
  box-shadow: var(--sh-2), var(--edge);
  margin: 0 0 var(--s-6);
}

.table-wrap > table {
  width: 100%;
  min-width: 520px;                 /* erzwingt Scroll statt Quetschung */
  border-collapse: collapse;
  font-size: 15.5px;
  line-height: 1.55;
}

.table-wrap caption {
  caption-side: bottom;
  text-align: left;
  padding: 12px 18px 14px;
  font-size: 13px;
  line-height: 1.45;
  letter-spacing: .006em;
  color: var(--c-body-soft);
}

.table-wrap th, .table-wrap td {
  text-align: left;
  vertical-align: top;
  padding: 14px 18px;
  border-bottom: 1px solid var(--c-line-soft);
}

.table-wrap thead th {
  font-family: var(--f-mono);
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--c-eu-500);
  background: var(--c-bg-cool);
  border-bottom: 1px solid var(--c-line);
  white-space: nowrap;
}

.table-wrap tbody th {
  font-family: var(--f-body);
  font-weight: 600;
  color: var(--c-ink);
}
.table-wrap td { color: var(--c-body); }
.table-wrap tbody tr:last-child th,
.table-wrap tbody tr:last-child td { border-bottom: 0; }

/* --------------------------------------------------------------------------
   11. FAQ: Frage als Titel, Antwort immer offen sichtbar (kein Accordion)
   -------------------------------------------------------------------------- */

.faq { margin: 0 0 var(--s-2); }

.faq-item {
  border-top: 1px solid var(--c-line-soft);
  padding: clamp(24px, 3vw, 30px) 0;
}
.faq-item:last-child { border-bottom: 1px solid var(--c-line-soft); }

/* title */
.faq-item > h3,
.faq-item > h2 {
  font-family: var(--f-display);
  font-weight: 500;
  font-size: 22px;
  line-height:1.24;
  letter-spacing:-.012em;
  color: var(--c-ink);
  margin: 0 0 var(--s-3);
}
.faq-item p:last-child,
.faq-item ul:last-child,
.faq-item ol:last-child { margin-bottom: 0; }

/* --------------------------------------------------------------------------
   12. Karten und Chips: Materialkante statt Umrisslinie
   -------------------------------------------------------------------------- */

.euc-card {
  position: relative;
  border: 0;
  background: var(--c-surface);
  border-radius: var(--r-card);
  border: var(--bd);
  box-shadow: var(--sh-soft);
  padding: 22px;
  margin: 0 0 var(--s-4);
  transition: transform var(--d-hover) var(--ease-out),
              box-shadow var(--d-hover) var(--ease-out);
}
.euc-card > :last-child { margin-bottom: 0; }
.euc-card h3, .euc-card h4 { margin-top: 0; }

/* title-s + body-s im Kartenkontext */
.euc-card h3 {
  font-size: 17px;
  line-height: 1.32;
  letter-spacing: -0.014em;
  font-weight: 500;
}
.euc-card p, .euc-card li {
  font-size: 14.5px;
  line-height: 1.52;
  letter-spacing: .002em;
}

.euc-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--s-5);
  margin: 0 0 var(--s-6);
}
.euc-cards .euc-card { margin: 0; }

.chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-family: var(--f-mono);
  font-size: 11.5px;
  line-height: 1;
  letter-spacing: .02em;
  color: var(--c-eu-500);
  background: var(--c-ice-100);
  border: 0;
  border-radius: var(--r-full);
  box-shadow: var(--sh-1), var(--edge-soft);
  padding: 7px 12px;
  /* Lange Chips brechen um, statt bei 320px aus der Seite zu laufen. */
  max-width: 100%;
  white-space: normal;
  line-height: 1.3;
  text-align: left;
}
.chip-neutral { color: var(--c-body-soft); background: #F1F3F5; }
.chip-gold    { color: #6B4E02; background: rgba(244, 197, 66, .18); }

.chips { display: flex; flex-wrap: wrap; gap: var(--s-2); margin: 0 0 var(--s-5); }

/* --------------------------------------------------------------------------
   13. Code
   -------------------------------------------------------------------------- */

code, kbd, samp {
  font-family: var(--f-mono);
  font-size: .875em;
}

:not(pre) > code {
  background: var(--c-ice-100);
  border: 0;
  box-shadow: var(--edge-soft);
  border-radius: 6px;
  padding: 2px 6px;
  color: #1F4257;
  white-space: nowrap;
}

pre {
  margin: 0 0 var(--s-6);
  padding: 20px 22px;
  background: var(--c-deep);
  border-radius: var(--r-frame);
  box-shadow: none;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
pre code {
  font-family: var(--f-mono);
  font-size: 13.5px;
  line-height: 1.65;
  color: #D7E3EE;
  background: none;
  border: 0;
  box-shadow: none;
  padding: 0;
  white-space: pre;
}

/* --------------------------------------------------------------------------
   14. CTA-Box: tiefer Block in der Farbwelt des `europa`-Presets
   Content-Seiten laden kein JavaScript, also kein Canvas: derselbe
   Farbverlauf als statisches Standbild aus gestapelten Radial-Verläufen.
   -------------------------------------------------------------------------- */

.cta-box {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  color: var(--c-on-deep);
  border-radius: var(--r-card);
  padding: clamp(32px, 4.5vw, 52px);
  margin: clamp(48px, 6vw, 72px) 0 0;
  background-color: var(--c-deep);
  background-image:
    radial-gradient(74% 108% at 82% 8%,  rgba(63,124,201,.48) 0%, rgba(63,124,201,0) 62%),
    radial-gradient(62% 92%  at 14% 96%, rgba(46,108,134,.58) 0%, rgba(46,108,134,0) 66%),
    radial-gradient(122% 128% at 96% 88%, rgba(18,50,107,.86) 0%, rgba(18,50,107,0) 58%),
    radial-gradient(46% 64% at 58% 30%,  rgba(165,216,230,.16) 0%, rgba(165,216,230,0) 70%),
    linear-gradient(148deg, #0B1E33 0%, #12326B 58%, #0B1E33 100%);
  box-shadow: var(--sh-3);
}
/* Korn gegen Banding: dasselbe feTurbulence-Muster wie auf der Landing */
.cta-box::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: .05;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.cta-box > * { position: relative; z-index: 1; }

.cta-box h2, .cta-box h3 {
  font-family: var(--f-display);
  font-weight: 400;
  font-size: clamp(28px, 3.6vw, 40px);
  line-height:1.08;
  letter-spacing:-.016em;
  color: var(--c-on-deep);
  margin: 0 0 var(--s-4);
}
.cta-box p {
  color: var(--c-on-deep-body);
  font-size: 16.5px;
  line-height: 1.6;
  margin: 0 0 var(--s-5);
  max-width: 46ch;
}
.cta-box p:last-child { margin-bottom: 0; }

.cta-actions { display: flex; flex-wrap: wrap; gap: var(--s-3); align-items: center; }

.cta-box .euc-btn-primary {
  color: var(--c-deep);
  background: var(--c-on-deep);
  font-size: 15px;
  padding: 14px 22px;
  border-radius: var(--r-s);
  box-shadow: var(--sh-2), inset 0 1px 0 rgba(255,255,255,.6);
}

.cta-box .euc-btn-secondary {
  color: var(--c-on-deep);
  background: rgba(165, 216, 230, .10);
  font-size: 15px;
  padding: 14px 22px;
  border-radius: var(--r-s);
  box-shadow: var(--edge-deep);
}

/* Weiterführende Links unter der CTA-Box */
.euc-weiter {
  margin: clamp(32px, 4vw, 44px) 0 0;
  padding-top: var(--s-5);
  border-top: 1px solid var(--c-line-soft);
}
.euc-weiter .euc-weiter-titel {
  font-family: var(--f-mono);
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--c-body-soft);
  margin: 0 0 var(--s-3);
  line-height: 1.2;
}
.euc-weiter ul { list-style: none; margin: 0; padding: 0; }
.euc-weiter li { margin: 0 0 10px; }
.euc-weiter a {
  font-weight: 500;
  color: var(--c-ink);
  text-decoration: none;
  border-bottom: 1px solid var(--c-line);
  transition: color .18s ease, border-color .18s ease;
}

/* --------------------------------------------------------------------------
   15. "Zuletzt geprüft": Fusszeile der Seite
   -------------------------------------------------------------------------- */

.geprueft {
  margin: clamp(36px, 4vw, 48px) 0 clamp(56px, 7vw, 80px);
  padding-top: var(--s-5);
  border-top: 1px solid var(--c-line-soft);
  font-family: var(--f-body);
  font-size: 13px;
  line-height: 1.4;
  letter-spacing: .01em;
  color: var(--c-body-soft);
}

/* --------------------------------------------------------------------------
   16. Footer: statische Fassung von SiteFooter.dc.html
   -------------------------------------------------------------------------- */

@keyframes euc-pulse {
  0%   { transform: scale(1);   opacity: 1; }
  70%  { transform: scale(2.6); opacity: 0; }
  100% { transform: scale(2.6); opacity: 0; }
}

.euc-footer {
  background: var(--c-deep);
  color: var(--c-on-deep);
  padding: clamp(64px, 8vw, 104px) var(--gutter) var(--s-6);
}
.euc-footer-inner { max-width: var(--w-max); margin: 0 auto; }

.euc-footer-top {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-8) 56px;
  justify-content: space-between;
}

.euc-footer-brandcol { flex: 1 1 300px; max-width: 360px; }
.euc-footer-brand { display: flex; align-items: center; gap: 11px; }
.euc-footer-brand span {
  font-family: var(--f-display);
  font-weight: 600;
  font-size: 19px;
  letter-spacing:-.010em;
  color: var(--c-on-deep);
}
/* Auf Navy trägt Europa-Blau keinen Kontrast: dort steht „AI" in Eisblau. */
.euc-footer-brand .euc-brand-ai { color: var(--c-ice-300); }

.euc-footer-tagline {
  font-family: var(--f-display);
  font-weight: 400;
  font-size: 17px;
  line-height:1.40;
  letter-spacing:-.007em;
  color: var(--c-on-deep-body);
  margin: 18px 0 0;
  max-width: 280px;
}

.euc-badges { display: flex; flex-direction: column; gap: 15px; margin-top: var(--s-6); }
.euc-badge { display: flex; align-items: center; gap: 13px; }
.euc-badge-ico {
  flex: 0 0 auto;
  width: 40px; height: 40px;
  border-radius: 50%;
  background: rgba(165, 216, 230, .10);
  border: 0;
  box-shadow: var(--edge-deep);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.euc-badge img { flex: 0 0 auto; width: 40px; height: 40px; border-radius: 50%; display: block; }
.euc-badge-t {
  font-family: var(--f-body);
  font-size: 14px;
  font-weight: 600;
  color: var(--c-on-deep);
  line-height: 1.2;
}
.euc-badge-s {
  font-family: var(--f-body);
  font-size: 12.5px;
  line-height: 1.4;
  letter-spacing: .006em;
  color: var(--c-on-deep-muted);
  margin-top: 3px;
}
.euc-footer-more {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  font-family: var(--f-body);
  font-size: 13.5px;
  font-weight: 500;
  text-decoration: none;
  color: var(--c-ice-300);
  transition: color .15s ease;
}

.euc-status {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin-top: var(--s-5);
  padding: 8px 13px;
  border: 0;
  box-shadow: var(--edge-deep);
  border-radius: var(--r-full);
}
.euc-status-dot { position: relative; display: inline-flex; width: 8px; height: 8px; }
.euc-status-dot i {
  position: absolute; inset: 0;
  border-radius: 50%;
  background: #7DE0B0;
  opacity: .55;
  animation: euc-pulse 2.4s ease-out infinite;
}
.euc-status-dot b {
  position: relative;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: #7DE0B0;
}
.euc-status span {
  font-family: var(--f-mono);
  font-size: 12px;
  letter-spacing: .04em;
  color: var(--c-on-deep-body);
}
.euc-status .euc-status-sep { color: var(--c-on-deep-label); }
.euc-status .euc-status-loc { color: var(--c-on-deep-muted); font-variant-numeric: tabular-nums; }

.euc-footer-cols { display: flex; flex-wrap: wrap; gap: var(--s-7) 56px; }
.euc-footer-col { min-width: 150px; }
.euc-footer-col h2, .euc-footer-col .euc-footer-coltitle {
  font-family: var(--f-mono);
  font-size: 11.5px;
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--c-on-deep-label);
  margin: 0;
}
.euc-footer-col nav { display: flex; flex-direction: column; gap: 2px; margin-top: 12px; }
.euc-footer-col nav a,
.euc-footer-col nav button {
  display: flex;
  align-items: center;
  min-height: 44px;
  font-family: var(--f-body);
  font-size: 14.5px;
  line-height: 1.35;
  text-align: left;
  text-decoration: none;
  color: var(--c-on-deep-body);
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  transition: color .15s ease;
}
.euc-footer-col nav button.is-current { color: var(--c-on-deep); }

.euc-footer-rule { height: 1px; background: rgba(165, 216, 230, .16); margin: var(--s-7) 0 var(--s-5); }

.euc-footer-bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-4);
}
.euc-footer-bottom .euc-rights {
  font-family: var(--f-body);
  font-size: 13px;
  line-height: 1.45;
  letter-spacing: .006em;
  color: var(--c-on-deep-muted);
}

/* --------------------------------------------------------------------------
   17. Hover: ausschliesslich für echte Zeigegeräte.
   Keine Information hängt an Hover.
   -------------------------------------------------------------------------- */

@media (hover: hover) and (pointer: fine) {
  a:hover { color: var(--c-ink); }
  .euc-nav a:hover { color: var(--c-ink); }
  .euc-breadcrumb a:hover { color: var(--c-ink); text-decoration: underline; }
  /* Kein Anheben und kein wachsender Schatten: ein Knopf, der beim
     Ueberfahren springt, verschiebt optisch seine Nachbarn — und der Sprung
     wiederholt sich bei jeder Mausbewegung ueber eine Knopfreihe. Der
     Zustandswechsel liegt deshalb allein in der Farbe, wie auf der
     Startseite. Der Druckzustand (:active) bleibt ein Versatz nach unten. */
  .euc-btn-primary:hover { background: var(--c-deep-hover); color: var(--c-on-deep); }
  .euc-btn-secondary:hover { border-color: #9FB0C0; background: #FBFCFD; }
  .euc-mob-panel a:hover { background: var(--c-ice-100); }
  .euc-mob-panel a.euc-btn-primary:hover { background: var(--c-deep-hover); color: var(--c-on-deep); }
  /* Im Blatt hebt der Sekundärknopf nicht ab (er sitzt in einer Liste), er
     tönt nur nach. Doppelt qualifiziert, sonst schlägt die Ruhezustandsregel. */
  .euc-mob-panel a.euc-btn-secondary:hover { background: var(--c-ice-100); transform: none; }
  .toc a:hover { color: var(--c-eu-700); }
  .table-wrap tbody tr:hover { background: #FBFCFD; }
  .euc-textlink:hover { color: var(--c-eu-500); border-color: var(--c-ice-300); }
  .euc-card:hover { box-shadow: var(--sh-2), var(--edge); }
  .euc-weiter a:hover { color: var(--c-eu-700); border-color: var(--c-ice-300); }
  .euc-footer-col nav a:hover,
  .euc-footer-col nav button:hover { color: var(--c-ice-300); }
  .euc-footer-more:hover { color: #C9E9F2; }
  .cta-box .euc-btn-primary:hover { background: #FFFFFF; color: var(--c-deep); }
  .cta-box .euc-btn-secondary:hover { background: rgba(165, 216, 230, .18); }
}

/* Druckfeedback gilt auch auf Touch */
.euc-card:active { transform: scale(.985); }

/* --------------------------------------------------------------------------
   18. Responsive
   -------------------------------------------------------------------------- */

/* Zwischen 940px und 1160px reicht die Breite nicht für Wortmarke + fünf
   Navigationspunkte + zwei Schaltflächen. Gleiche Entlastung wie im
   SiteHeader: zweite Schaltfläche weg, Abstände enger. */
@media (max-width: 1160px) {
  .euc-nav { gap: 22px; }
  .euc-header-cta .euc-btn-secondary { display: none; }
}

/* Header-Umschaltpunkt exakt wie SiteHeader (window.innerWidth < 940) */
@media (max-width: 939px) {
  .euc-nav, .euc-header-cta { display: none; }
  .euc-mob { display: block; }
}

@media (max-width: 600px) {
  body { font-size: 17px; }
  :root { --header-h: 64px; }
  h1 { font-size: 40px; line-height: 1.04; }
  h2 { font-size: 30px; line-height: 1.12; }
  h3 { font-size: 24px; }
  .faq-item > h3, .faq-item > h2 { font-size: 21px; }
  .euc-lead { font-size: 17px; }
  .kurz-gesagt li { font-size: 16.5px; }
  .euc-footer-top { gap: var(--s-7); }
  .euc-footer-cols { gap: var(--s-6) var(--s-7); }
  .euc-footer-col { min-width: 132px; }
  /* Radius ist eine Eigenschaft des Bauteils, nicht der Bildschirmbreite. */
  .table-wrap > table { font-size: 14.5px; }
  .table-wrap th, .table-wrap td { padding: 12px 14px; }
}

@media (max-width: 380px) {
  .euc-footer-col { min-width: 100%; }
}

/* --------------------------------------------------------------------------
   19. Fallbacks: Transparenz, Bewegung, Druck
   -------------------------------------------------------------------------- */

/* Ohne backdrop-filter (oder wenn Transparenz reduziert werden soll) wird
   die Leiste deckend. Nie zwei transluzente Flächen übereinander. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .euc-header { background: var(--c-bg); }
  .euc-btn-secondary { background: var(--c-surface); }
}

@media (prefers-reduced-transparency: reduce) {
  .euc-header {
    background: var(--c-bg);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    /* Sonst überschriebe die Scroll-Timeline-Animation die deckende Fläche. */
    animation: none;
  }
  .euc-btn-secondary { background: var(--c-surface); }
}

@media print {
  .euc-header, .euc-mob, .cta-box, .euc-footer, .euc-skip { display: none !important; }
  body { font-size: 11pt; background: #fff; }
  .euc-wrap { max-width: none; padding: 0; }
  a { color: #000; text-decoration: underline; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  html { scroll-behavior: auto; }
  /* Der Pauschalhammer oben friert die Scroll-Edge ein: sichtbar lassen. */
  .euc-header::after { opacity: 1; animation: none; }
  .euc-card:hover, .euc-btn-primary:hover, .euc-btn-secondary:hover { transform: none; }
  /* Bewegung raus, Blende bleibt. !important ist nötig, weil der Pauschalfilter
     oben selbst !important trägt; die höhere Spezifität gewinnt. */
  @supports selector(::details-content) {
    .euc-mob::details-content {
      transform: none !important;
      transition: opacity 140ms linear, content-visibility 140ms allow-discrete !important;
    }
    .euc-mob[open]::details-content { transform: none !important; }
  }
}

/* --------------------------------------------------------------------------
   20. Illustrationen: Inline-SVG-Figuren der Blog-Artikel

   Regeln für Autoren:
   - Das SVG trägt keinen übersetzbaren Text. Beschriftungen stehen in der
     HTML-Legende (.euc-fig-legend), das SVG nur nummerierte Marker; <text>
     ist ausschliesslich für sprachneutrale Ziffern erlaubt (.fig-num).
   - Farben kommen über die Klassen unten aus den Tokens, nie als Literal.
   - Jede Animation muss im Endzustand die vollständige, korrekte Figur
     zeigen: der Pauschalfilter oben (Abschnitt 19) klemmt Bewegung ab, und
     die Scroll-Aufbauten laufen nur mit animation-timeline-Unterstützung.
   -------------------------------------------------------------------------- */

.euc-fig {
  margin: var(--s-5) 0 var(--s-6);
  padding: clamp(16px, 3vw, 28px);
  background: var(--c-surface);
  border: var(--bd);
  border-radius: var(--r-card);
  box-shadow: var(--sh-flat);
}

.euc-fig svg {
  display: block;
  width: 100%;
  height: auto;
  color: var(--c-ink);
}

/* Farbrollen: stroke="currentColor" am Wurzel-SVG, die Klasse setzt die Rolle.
   .fig-panel steht zuerst, damit eine kombinierte Farbklasse (fig-panel fig-eu)
   die Kontur des Panels gewinnt. */
.fig-panel  { fill: var(--c-surface); color: var(--c-hairline-strong); }
.fig-soft   { color: var(--c-hairline-strong); }
.fig-line   { color: var(--c-hairline); }
.fig-eu     { color: var(--c-eu-700); }
.fig-eu-mid { color: var(--c-eu-500); }
.fig-ice    { color: var(--c-ice-300); }
.fig-fill-ice  { fill: var(--c-ice-100); }
.fig-fill-tint { fill: var(--c-ice-tint); }
.fig-dot-gold  { fill: var(--c-gold-500); stroke: none; }   /* Interpunktion, nie Fläche */
.fig-numbg  { fill: var(--c-ice-100); color: var(--c-hairline); }
.fig-num {
  fill: var(--c-eu-500);
  stroke: none;
  font-family: var(--f-mono);
  font-size: 12px;
  font-weight: 500;
}

/* Ein durchlaufender Impuls pro Figur: wandernde Strichlung auf dem Weg.
   Ohne Bewegung (Abschnitt 19) steht die Strichlung still, die Figur bleibt
   vollständig. */
.fig-flow { stroke-dasharray: 5 11; }
@media (prefers-reduced-motion: no-preference) {
  @keyframes euc-fig-flow { to { stroke-dashoffset: -64; } }
  .fig-flow { animation: euc-fig-flow 2.6s linear infinite; }
}

/* Scroll-Aufbau als Progressive Enhancement: nur mit Unterstützung und nur
   ohne Bewegungs-Vorbehalt. Grundzustand ist die fertige Figur. */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    @keyframes euc-fig-in {
      from { opacity: 0; transform: translateY(10px); }
    }
    .fig-reveal {
      animation: euc-fig-in linear both;
      animation-timeline: view();
      animation-range: entry 15% entry 55%;
    }
  }
}

.euc-fig-legend {
  list-style: none;
  counter-reset: fig;
  margin: var(--s-4) 0 0;
  padding: 0;
  display: grid;
  gap: var(--s-2) var(--s-5);
}
@media (min-width: 720px) {
  .euc-fig-legend { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
  /* Vier Eintraege: zwei Spalten zu zwei Zeilen, sonst steht Punkt 4 allein
     auf der zweiten Zeile. */
  .euc-fig-legend:has(li:nth-child(4)) { grid-template-columns: repeat(2, 1fr); }
}
.euc-fig-legend li {
  counter-increment: fig;
  position: relative;
  padding-left: 30px;
  font-size: 14.5px;
  line-height: 1.5;
  color: var(--c-body);
}
.euc-fig-legend li::before {
  content: counter(fig);
  position: absolute;
  left: 0;
  top: 1px;
  width: 20px;
  height: 20px;
  display: grid;
  place-items: center;
  font-family: var(--f-mono);
  font-size: 11.5px;
  line-height: 1;
  color: var(--c-eu-500);
  background: var(--c-ice-100);
  border-radius: var(--r-full);
  box-shadow: var(--edge-soft);
}

.euc-fig figcaption {
  margin-top: var(--s-4);
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--c-body-soft);
}

/* Lange Komposita (Artikel-Fliesstext) brechen um, statt bei 320px zu schieben. */
.euc-main p, .euc-main li { overflow-wrap: break-word; }

/* Kartenkopf im Blog-Index: Branchen-Chip und Datum in einer Zeile. */
.euc-card-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--s-3);
  margin: 0 0 var(--s-3);
}
.euc-card-meta time {
  font-family: var(--f-body);
  font-size: 13px;
  color: var(--c-body-soft);
}

/* --------------------------------------------------------------------------
   21. Blog breit: Artikel-Hero als Band, Index-Karten mit Bild

   Der Blog nutzt wie die Preisliste die breite Spur (.euc-wrap-wide).
   Artikelseiten tragen .blog-article am <main>, der Index .blog-index
   (derzeit ohne eigene Regeln, nur als Geltungsbereich reserviert).
   Die Szenen-SVGs folgen den Farbrollen aus Abschnitt 20.
   Haltepunkte dieses Abschnitts: 760px zweispaltiges Kartenraster,
   980px zweispaltiges Hero-Band und quer liegende Feature-Karte,
   1060px Ausbruch von Figuren und Tabellen aus der Textspalte.
   -------------------------------------------------------------------------- */

/* Artikel: Textspalte etwas breiter als die Standard-Messe. */
.blog-article { --w-measure: 780px; }

/* --- Hero-Band: Artikelseiten und Blog-Index --- */
.blog-hero {
  background: linear-gradient(180deg, var(--c-ice-tint) 0%, var(--c-bg) 100%);
  padding-bottom: clamp(28px, 4vw, 48px);
}

/* align-items center: die Szene steht auf der Hoehe des Titelblocks. Bei
   kurzen Titeln sass sie sonst unten und liess oben eine leere Ecke. */
.blog-hero-grid {
  display: grid;
  gap: clamp(28px, 4vw, 56px);
  align-items: center;
  padding-top: clamp(24px, 3vw, 40px);
}
@media (min-width: 980px) {
  .blog-hero-grid { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
}

/* Kleiner als display-xl: der Titel steht in einer Spalte, nicht allein.
   Der 36px-Boden unterschreitet bewusst die 40px-Mobilstufe aus Abschnitt 19,
   weil Artikeltitel mit bis zu 105 Zeichen laenger sind als Seitentitel. */
.blog-hero h1 {
  font-size: clamp(36px, 4.6vw, 46px);
  margin-bottom: var(--s-4);
}

.blog-hero-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--s-3);
  margin: var(--s-5) 0 0;
}
/* Datum und Lesezeit bilden ein Paar; der groessere Abstand nach dem Chip
   trennt die Gruppen, ohne einen Trennpunkt zu brauchen. */
.blog-hero-meta .chip { margin-right: var(--s-3); }
.blog-hero-meta > time,
.blog-hero-meta > span:not(.chip) {
  font-family: var(--f-body);
  font-size: 13px;
  color: var(--c-body-soft);
}

/* Das Szenen-Bild sitzt als weisses Panel neben dem Titel; Polsterung wie
   .euc-fig, der weichere Schatten hebt es vom Verlaufsgrund ab. */
.blog-hero-art {
  background: var(--c-surface);
  border: var(--bd);
  border-radius: var(--r-card);
  box-shadow: var(--sh-soft);
  padding: clamp(16px, 3vw, 28px);
}
.blog-hero-art svg {
  display: block;
  width: 100%;
  height: auto;
  color: var(--c-ink);
}

/* Figuren und Tabellen duerfen auf grossen Schirmen aus der Textspalte
   ausbrechen. 100% ist die Spaltenbreite; der negative Rand zentriert das
   breitere Element auf der Seitenmitte. */
@media (min-width: 1060px) {
  .blog-article .euc-fig,
  .blog-article .table-wrap {
    --w-blog-wide: min(980px, 100vw - 2 * var(--gutter));
    width: var(--w-blog-wide);
    margin-left: calc((100% - var(--w-blog-wide)) / 2);
  }
}

/* --- Blog-Index: Karten mit Bildflaeche --- */
.blog-cards {
  display: grid;
  gap: var(--s-5);
  margin: 0 0 var(--s-6);
}
@media (min-width: 760px) {
  .blog-cards { grid-template-columns: 1fr 1fr; }
}

/* Eine Sektion mit nur einem Artikel bekommt keine zweite Spalte: sonst stuende
   die Karte im Tablet-Band halbbreit und rechts daneben nichts. Ab 980px macht
   .blog-card-featured daraus wieder eine Querkarte. */
.blog-cards:has(> .blog-card:only-child) { grid-template-columns: 1fr; }

.blog-card {
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.blog-card-body {
  padding: 22px;
}
.blog-card-body > :last-child { margin-bottom: 0; }

/* Ein Link pro Karte: der Titel-Link spannt sich per Pseudoelement ueber
   die ganze Flaeche (.euc-card ist position: relative). Die Bildflaeche
   selbst ist reine Dekoration. */
.blog-card-body h3 a::after {
  content: "";
  position: absolute;
  inset: 0;
}

/* Der Kartentitel liest sich als Ueberschrift, nicht als Textlink: wie die
   Kacheltitel der Startseite in Tinte und ohne Unterstreichung. Dass die
   Karte klickbar ist, zeigt die Karte selbst (Schatten und Kante beim
   Ueberfahren); eine Linie unter jedem Titel machte den Index unruhig. */
.blog-card-body h3 { text-wrap: balance; }
.blog-card-body h3 a {
  color: var(--c-ink);
  text-decoration: none;
  border-bottom: 0;
  padding-bottom: 0;
  transition: color .18s ease;
}
@media (hover: hover) and (pointer: fine) {
  .blog-card:hover .blog-card-body h3 a { color: var(--c-eu-700); }
}

.blog-card-media {
  background: linear-gradient(180deg, var(--c-ice-tint) 0%, var(--c-ice-100) 100%);
  border-bottom: var(--bd);
  padding: clamp(16px, 2.5vw, 24px) clamp(20px, 3.5vw, 30px);
}
.blog-card-media svg {
  display: block;
  width: 100%;
  height: auto;
  color: var(--c-ink);
}

/* Auf schmalen Schirmen skalieren die 640er-Szenen unter 1 CSS-px Strich;
   etwas mehr Strichstaerke haelt die feinen Motive sichtbar. */
@media (max-width: 600px) {
  .blog-card-media svg,
  .blog-hero-art svg { stroke-width: 2.4; }
}

/* Der neueste Artikel liegt als grosse Karte quer ueber beide Spalten.
   Sonderbehandlung erst ab 980px; im Tablet-Band ist er eine normale Karte. */
@media (min-width: 980px) {
  .blog-card-featured { grid-column: 1 / -1; flex-direction: row; align-items: stretch; }
  .blog-card-featured .blog-card-media {
    flex: 0 0 44%;
    border-bottom: 0;
    border-right: var(--bd);
    display: grid;
    align-content: center;
  }
  .blog-card-featured .blog-card-body {
    padding: clamp(24px, 3vw, 44px);
    align-self: center;
  }
  .blog-card-featured .blog-card-body h3 { font-size: 20px; line-height: 1.25; letter-spacing: -0.02em; }
  .blog-card-featured .blog-card-body p { font-size: 15.5px; line-height: 1.55; }
}

/* Druck: die breite Spur verhaelt sich wie die schmale, das Band verliert
   seinen Verlauf. */
@media print {
  .euc-wrap-wide { max-width: none; padding: 0; }
  .blog-hero { background: none; }
}

/* --------------------------------------------------------------------------
   22. Blog-Artikel: Leseleiste am linken Rand

   Ab 1360px sitzt links der Textspalte eine fixe Abschnittsliste. Sie liegt
   links der 980px-Ausbruchbreite (Abschnitt 21) und blendet sich erst ein,
   wenn das Hero-Band aus dem Bild ist; das Skript im Artikel setzt dazu
   .is-visible und markiert den aktiven Abschnitt mit .is-active.
   -------------------------------------------------------------------------- */

.blog-rail { display: none; }

@media (min-width: 1360px) {
  .blog-rail {
    display: block;
    position: fixed;
    top: 50%;
    transform: translateY(-50%);
    left: max(24px, calc(50vw - 640px));
    width: 140px;
    z-index: 2;
    opacity: 0;
    pointer-events: none;
    transition: opacity .3s var(--ease-out);
  }
  .blog-rail.is-visible { opacity: 1; pointer-events: auto; }

  .blog-rail ol {
    list-style: none;
    margin: 0;
    padding: 0;
    border-left: 1px solid var(--c-line);
    display: grid;
    gap: var(--s-3);
  }
  .blog-rail li { position: relative; padding-left: 16px; }
  .blog-rail a {
    font-family: var(--f-body);
    font-size: 12.5px;
    line-height: 1.4;
    color: var(--c-body-soft);
    text-decoration: none;
    display: inline-block;
  }
  .blog-rail a::before {
    content: "";
    position: absolute;
    left: -4px;
    top: 4px;
    width: 8px;
    height: 8px;
    border-radius: var(--r-full);
    background: var(--c-bg);
    border: 1.7px solid var(--c-hairline-strong);
    box-sizing: border-box;
    transition: background var(--d-hover) var(--ease-out),
                border-color var(--d-hover) var(--ease-out);
  }
  .blog-rail a:hover { color: var(--c-ink); }
  .blog-rail a.is-active { color: var(--c-eu-700); }
  .blog-rail a.is-active::before {
    background: var(--c-eu-700);
    border-color: var(--c-eu-700);
  }
}

/* --------------------------------------------------------------------------
   23. Blog-Index: Branchen-Sektionen, Farbflaechen

   Der Index gliedert die Artikel nach Branche (je eine Sektion mit CH- und
   Europa-Karte). Die Medien-Farbflaechen sind Tints der
   bestehenden Markenfarben (Gold, EU-Blau-Stufen, Eis), damit die Karten
   nicht monoton wirken, ohne eine neue Farbfamilie einzufuehren.
   -------------------------------------------------------------------------- */


.blog-branche h2 {
  font-size: clamp(24px, 2.6vw, 30px);
  margin-top: 0;
}

/* Zwischen Einleitung und erster Branche genuegt eine knappe Zaesur: das
   Farbband des Kopfbands trennt die beiden Bereiche schon sichtbar. */
.blog-index .blog-hero { padding-bottom: clamp(14px, 1.8vw, 22px); }
.blog-index .blog-hero .euc-hero { padding-bottom: clamp(16px, 2vw, 24px); }
.blog-index .blog-branche:first-of-type { padding-top: clamp(28px, 3.2vw, 38px); }


/* Medien-Farbflaechen je Branche: Tint aus einer Markenfarbe in Eis. */
.blog-card-media.media-handwerk   { background: linear-gradient(165deg, rgba(244, 197, 66, .16) 0%, var(--c-ice-100) 100%); }
.blog-card-media.media-produktion { background: linear-gradient(165deg, rgba(63, 124, 201, .12) 0%, var(--c-ice-100) 100%); }
.blog-card-media.media-kanzlei    { background: linear-gradient(165deg, rgba(18, 50, 107, .08) 0%, var(--c-ice-100) 100%); }
.blog-card-media.media-immobilien { background: linear-gradient(165deg, rgba(165, 216, 230, .28) 0%, var(--c-ice-100) 100%); }
.blog-card-media.media-praxis     { background: linear-gradient(165deg, rgba(46, 108, 134, .12) 0%, var(--c-ice-100) 100%); }
.blog-card-media.media-modelle    { background: linear-gradient(165deg, rgba(18, 50, 107, .14) 0%, var(--c-ice-100) 100%); }