/* umsgeld Editorial — globales Editorial-Design-System (Tokens + Komponenten + Shell).
   Wiederverwendbare, additive Schicht: ALLE Regeln sind auf die Root-Klasse .um-ed
   gescoped. Sie wirkt daher NUR auf Seiten, die <body class="um-ed"> setzen UND dieses
   Stylesheet laden (BaseEditorial.astro). Die 425 Bestandsseiten (Base.astro, .um--dark)
   laden dieses File nicht und bleiben unberührt. Enthält einen Legacy-Alias-Layer, der
   die im Bestand genutzten Design-Variablennamen (--navy-*, --ink-*, --line-*, --gold-*,
   --paper-*, --fs-*, ...) innerhalb .um-ed auf die Editorial-Palette mappt, damit auch
   wiederverwendete Bestandskomponenten editorial erscheinen. */
/* ==========================================================================
   Typography tokens — umsgeld · Editorial
   Serif (Georgia) trägt Headlines, Zahlen & Lead. Sans (Arial) trägt Labels,
   Kicker, Buttons & Kleintext. Mono (Courier New) nur im Kassenbon.
   Bewusst Systemschriften — identisch zu den Templates, keine Webfonts.
   ========================================================================== */
.um-ed {
  --um-font-display: Georgia, 'Times New Roman', serif;
  --um-font-serif:   Georgia, 'Times New Roman', serif;
  --um-font-text:    Arial, Helvetica, sans-serif;
  --um-font-sans:    Arial, Helvetica, sans-serif;
  --um-font-mono:    'Courier New', Courier, monospace;

  /* Skala (Template-Werte; Web skaliert mit clamp) */
  --um-text-giant:   150px;  /* „0 €", „60", „214,84" — ls -7px */
  --um-text-h1:      54px;   /* lh 56px, ls -1.8px */
  --um-text-h2:      32px;   /* lh 38px, ls -0.8px */
  --um-text-h2-sm:   26px;   /* lh 32px, ls -0.5px */
  --um-text-num:     26px;   /* Kennzahlen */
  --um-text-lead:    18px;   /* Serif, lh 28px */
  --um-text-body:    14px;   /* Sans, lh 22px */
  --um-text-small:   13px;
  --um-text-kicker:  11px;   /* Sans bold, ls 2px, uppercase */
  --um-text-label:   11px;   /* Sans bold, ls 1.4px, uppercase */
  --um-text-legal:   11px;   /* lh 1.7 */

  --um-weight-regular: 400;
  --um-weight-bold: 700;
  --um-track-display: -0.033em;
  --um-track-kicker: 2px;
  --um-track-label: 1.4px;
}
/* ==========================================================================
   Color tokens — umsgeld · Editorial (Stand 10/2026)
   Quelle: Aktions-Templates 20–22. Papier, Tinte, Signalrot.
   ========================================================================== */
.um-ed {
  /* --- Kernpalette --- */
  --um-ink:          #10151C;  /* Tinte: Headlines, Linien, dunkle Bänder, Buttons */
  --um-ink-2:        #16181C;  /* Tabellen- & Bon-Text */
  --um-signal:       #E4572E;  /* Signalrot: Kicker, Betonung, Haupt-CTA, Highlights */
  --um-paper:        #F4F1E8;  /* Papier: Masthead, Hero, Legal */
  --um-canvas:       #E6E2D7;  /* Seitenhintergrund um das Blatt */
  --um-white:        #FFFFFF;  /* Blatt / Inhaltsflächen */

  /* --- Text --- */
  --um-text:         #3A3D44;  /* Lead (Serif) */
  --um-text-mute:    #5E626A;  /* Sans-Fließtext, Labels */
  --um-text-fine:    #6E6A60;  /* Legal */
  --um-text-fine-2:  #4A463E;  /* Legal-Hervorhebung */
  --um-text-faint:   #8A8D94;  /* Fußnoten */

  /* --- Linien --- */
  --um-line:         #DAD5C8;  /* Haarlinie auf hell */
  --um-line-receipt: #D9D5CA;  /* Bon-Rahmen */
  --um-dash:         #A9A49A;  /* Bon-Trennlinien */

  /* --- Auf Tinte --- */
  --um-on-ink:       #FFFFFF;
  --um-on-ink-mute:  #A9AFBA;
  --um-on-ink-fine:  #7E8592;
  --um-bar-track:    #222A36;  /* Balken-Hintergrund */
  --um-bar-fill:     #5B6475;  /* Balken-Füllung neutral */
  --um-ink-line:     #3B4556;

  /* --- Marke --- */
  --um-logo-navy:    #003479;  /* nur im Logo */

  /* --- Legacy-Aliase I: --um-*-Palette (ältere .um-Komponenten mappen auf Editorial) --- */
  --um-navy: var(--um-ink); --um-navy-deep: var(--um-ink); --um-navy-ink: var(--um-ink);
  --um-gold: var(--um-signal); --um-gold-light: var(--um-signal); --um-gold-deep: var(--um-signal);
  --um-gold-soft: var(--um-paper); --um-gold-grad: var(--um-signal); --um-gold-chip: var(--um-paper);
  --um-cream: var(--um-paper); --um-cream-2: var(--um-paper);
  --um-line-2: var(--um-line); --um-line-cool: var(--um-line);
  --um-text-soft: var(--um-text); --um-on-dark: var(--um-on-ink); --um-on-dark-mute: var(--um-on-ink-mute);
  --um-teal-soft: var(--um-paper); --um-teal: var(--um-ink);
  --um-up: #1f9d5b; --um-down: var(--um-signal);
}
/* ==========================================================================
   Legacy-Alias-Layer II — Bestands-Design-Variablen (umsgeld v2, public/assets/styles.css)
   Diese Kurznamen (--navy-*, --ink-*, --line-*, --gold-*, --paper-*, --fs-*, --space-*,
   --radius, --maxw ...) sind im Bestand definiert und werden in geteilten Astro-
   Komponenten via var() genutzt. BaseEditorial lädt assets/styles.css NICHT, daher
   wären sie auf .um-ed-Seiten sonst undefiniert. Hier gemappt auf die Editorial-Palette —
   ausschliesslich innerhalb .um-ed, damit die 425 Bestandsseiten unberührt bleiben.
   Nur Variablen, die im Bestand real existieren (keine erfundenen).
   ========================================================================== */
.um-ed {
  /* Marke: Navy -> Tinte */
  --navy-900: var(--um-ink); --navy-800: var(--um-ink); --navy-700: var(--um-ink);
  /* Gold -> Signalrot (Akzent) bzw. Papier (Tints) */
  --gold-600: var(--um-signal); --gold-500: var(--um-signal); --gold-400: var(--um-signal);
  --gold-200: var(--um-paper); --gold-100: var(--um-paper); --gold-50: var(--um-paper);
  /* Neutral: Text & Linien */
  --ink-900: var(--um-ink); --ink-700: var(--um-text); --ink-500: var(--um-text-mute);
  --line-300: var(--um-line); --line-200: var(--um-line);
  --paper-50: var(--um-paper); --white: var(--um-white);
  --positive-700: var(--um-up);
  /* Typografie */
  --font-serif: var(--um-font-serif); --font-sans: var(--um-font-sans);
  --fs-display: clamp(44px, 6.6vw, 80px); --fs-h1: clamp(34px, 4.2vw, 54px);
  --fs-h2: clamp(26px, 2.8vw, 36px); --fs-h3: 23px;
  --fs-body: var(--um-text-body); --fs-small: var(--um-text-small); --fs-kicker: var(--um-text-kicker);
  --lh-tight: 1.1; --lh-body: 1.6;
  /* Layout */
  --maxw: var(--um-sheet); --radius: var(--um-r-md);
  --space-1: var(--um-space-1); --space-2: var(--um-space-2); --space-3: var(--um-space-3);
  --space-4: var(--um-space-4); --space-5: var(--um-space-5); --space-6: var(--um-space-6);
}
/* ==========================================================================
   Spacing, rules, layout — umsgeld · Editorial
   Keine Rundungen, keine Schatten. Struktur entsteht durch Linien.
   ========================================================================== */
.um-ed {
  --um-r-xs: 0; --um-r-sm: 0; --um-r-md: 0; --um-r-lg: 0; --um-r-xl: 0; --um-r-pill: 0;

  --um-space-1: 6px;  --um-space-2: 12px; --um-space-3: 18px;
  --um-space-4: 26px; --um-space-5: 40px; --um-space-6: 64px;
  --um-space-section: 56px;

  /* Linien */
  --um-rule-heavy: 3px solid var(--um-ink);   /* Masthead, Blockköpfe, Legal-Kopf */
  --um-rule-table: 2px solid var(--um-ink);   /* Tabellenkopf */
  --um-rule-hair:  1px solid var(--um-line);  /* Zeilen */

  --um-shadow-card: none; --um-shadow-soft: none; --um-shadow-dark: none;

  --um-sheet: 1120px;   /* Blattbreite Web (E-Mail: 600px) */
  --um-gutter: 64px;    /* E-Mail: 40px */
  --um-maxw: var(--um-sheet); --um-maxw-wide: var(--um-sheet); --um-maxw-prose: 760px;

  --um-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --um-dur: 0.18s;
}
/* ==========================================================================
   Component classes — umsgeld
   All values reference tokens. Prefix: .um-
   ========================================================================== */

/* ---- Base wrappers ---- */
.um { font-family: var(--um-font-text); color: var(--um-text); background: var(--um-cream); -webkit-font-smoothing: antialiased; }
.um *, .um *::before, .um *::after { box-sizing: border-box; }
.um--dark { background: var(--um-navy-deep); color: var(--um-on-dark); }
.um-container { max-width: var(--um-maxw); margin: 0 auto; padding-left: var(--um-gutter); padding-right: var(--um-gutter); }
.um-section { padding-top: var(--um-space-section); padding-bottom: var(--um-space-section); }

/* ---- Typography ---- */
.um-h1 { font-family: var(--um-font-display); font-weight: var(--um-weight-semibold); font-size: var(--um-text-h1); line-height: 1.04; letter-spacing: var(--um-track-tight); color: var(--um-navy); text-wrap: balance; margin: 0; }
.um-h2 { font-family: var(--um-font-display); font-weight: var(--um-weight-semibold); font-size: var(--um-text-h2); line-height: 1.1; letter-spacing: -0.01em; color: var(--um-navy); margin: 0; }
.um-h3 { font-family: var(--um-font-display); font-weight: var(--um-weight-semibold); font-size: var(--um-text-h3); line-height: 1.2; color: var(--um-navy); margin: 0; }
.um-lead { font-size: var(--um-text-lead); line-height: 1.6; color: var(--um-text-soft); }
.um-body { font-size: var(--um-text-body); line-height: 1.6; color: var(--um-text-mute); }
.um-eyebrow { font-size: var(--um-text-eyebrow); font-weight: var(--um-weight-semibold); letter-spacing: var(--um-track-eyebrow); text-transform: uppercase; color: var(--um-gold-deep); }
.um-em { font-style: italic; color: var(--um-gold-deep); }
.um-num { font-family: var(--um-font-mono); font-weight: var(--um-weight-semibold); letter-spacing: -0.01em; }
.um-stat { font-family: var(--um-font-display); font-weight: var(--um-weight-semibold); font-size: 30px; color: var(--um-navy); }
.um-stat__label { font-size: var(--um-text-small); color: var(--um-text-mute); margin-top: 2px; }

/* ---- Buttons ---- */
.um-btn { display: inline-flex; align-items: center; gap: 9px; font-family: var(--um-font-text); font-size: var(--um-text-body); font-weight: var(--um-weight-semibold); padding: 15px 26px; border-radius: var(--um-r-sm); border: none; text-decoration: none; cursor: pointer; white-space: nowrap; transition: transform var(--um-dur) var(--um-ease), opacity var(--um-dur) var(--um-ease); }
.um-btn:hover { transform: translateY(-1px); }
.um-btn:active { transform: translateY(0); }
.um-btn--primary { background: var(--um-navy); color: #fff; }
.um-btn--gold { background: var(--um-gold-grad); color: #23170a; font-weight: var(--um-weight-bold); }
.um-btn--ghost { background: transparent; color: var(--um-navy); border: 1.5px solid #D9CFB8; }
.um-btn--pill { border-radius: var(--um-r-pill); }
.um-btn--sm { padding: 10px 20px; font-size: 14px; }

/* ---- Badge / Tag ---- */
.um-badge { display: inline-flex; align-items: center; gap: 9px; padding: 7px 14px; border: 1px solid var(--um-line); border-radius: var(--um-r-pill); background: var(--um-cream-2); font-size: var(--um-text-eyebrow); font-weight: var(--um-weight-semibold); letter-spacing: 0.06em; text-transform: uppercase; color: var(--um-gold-deep); white-space: nowrap; }
.um-badge__dot { width: 6px; height: 6px; border-radius: 50%; background: var(--um-gold); }
.um-tag { display: inline-block; font-size: 11px; font-weight: var(--um-weight-bold); letter-spacing: 0.08em; text-transform: uppercase; padding: 4px 9px; border-radius: var(--um-r-xs); background: var(--um-teal-soft); color: var(--um-teal); }

/* ---- Card ---- */
.um-card { background: var(--um-white); border: 1px solid var(--um-line); border-radius: var(--um-r-lg); padding: var(--um-space-4); transition: transform var(--um-dur) var(--um-ease); }
.um-card--shadow { box-shadow: var(--um-shadow-card); }
.um-card--hover:hover { transform: translateY(-3px); }
.um-card__icon { width: 46px; height: 46px; border-radius: var(--um-r-md); display: flex; align-items: center; justify-content: center; background: var(--um-teal-soft); color: var(--um-teal); }

/* ---- Trust strip ---- */
.um-trust { border-top: 1px solid var(--um-line-2); border-bottom: 1px solid var(--um-line-2); background: var(--um-cream-2); }
.um-trust__grid { max-width: var(--um-maxw); margin: 0 auto; padding: 26px var(--um-gutter); display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }

/* ---- Calculator panel ---- */
.um-calc { background: var(--um-white); border: 1px solid var(--um-line); border-radius: var(--um-r-lg); box-shadow: var(--um-shadow-card); padding: 28px; }
.um-calc__result { padding: 20px 22px; border-radius: var(--um-r-md); color: #fff; background: linear-gradient(135deg, var(--um-navy), #143a82); }
.um-calc__value { font-family: var(--um-font-display); font-size: 42px; font-weight: var(--um-weight-semibold); line-height: 1.05; letter-spacing: -0.01em; }
.um-range { width: 100%; accent-color: var(--um-gold); }

/* ---- FAQ (accordion) ---- */
.um-faq__item { background: var(--um-white); border: 1px solid var(--um-line); border-radius: var(--um-r-md); padding: 20px 24px; cursor: pointer; }
.um-faq__q { font-size: 16.5px; font-weight: var(--um-weight-semibold); color: var(--um-navy); }
.um-faq__sign { font-size: 22px; color: var(--um-gold); line-height: 1; }
.um-faq__a { font-size: var(--um-text-body); line-height: 1.6; color: var(--um-text-mute); margin: 12px 0 0; max-width: 62ch; }

/* ---- Market ticker (dark) ---- */
.um-ticker { background: var(--um-navy); color: rgba(255, 255, 255, 0.9); font-family: var(--um-font-mono); font-size: 12.5px; letter-spacing: 0.02em; }
.um-ticker__row { max-width: var(--um-maxw-wide); margin: 0 auto; padding: 9px 32px; display: flex; gap: 28px; flex-wrap: wrap; align-items: center; }
.um-ticker strong { color: var(--um-gold-light); }
.um-ticker .um-up { color: #7ee0b0; }
.um-ticker .um-down { color: #f0a6a6; }

/* ---- Footer ---- */
.um-footer { background: var(--um-navy); color: rgba(255, 255, 255, 0.72); }
.um-footer__title { font-size: var(--um-text-small); font-weight: var(--um-weight-semibold); letter-spacing: 0.05em; text-transform: uppercase; color: var(--um-gold-light); margin-bottom: 14px; }

/* ---- Layout utilities ---- */
.um-grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.um-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; }
.um-row { display: flex; align-items: center; }
.um-stack { display: flex; flex-direction: column; }

@media (max-width: 880px) {
  .um-grid-4 { grid-template-columns: 1fr 1fr; }
  .um-grid-2 { grid-template-columns: 1fr; gap: 28px; }
  .um-h1 { font-size: 44px; }
}
/* ==========================================================================
   umsgeld · Editorial-Komponenten (Aktionsseiten)
   Grundlage: Templates 20–22. Verwendung: <body class="um-ed">
   ========================================================================== */

/* ---- Blatt & Bänder ---- */
.um-ed { margin: 0; background: var(--um-canvas); color: var(--um-ink); font-family: var(--um-font-serif); -webkit-font-smoothing: antialiased; padding: 20px 16px 120px; }
.um-ed *, .um-ed *::before, .um-ed *::after { box-sizing: border-box; }
.um-ed a { color: var(--um-signal); text-decoration: none; }
.um-ed a:hover { text-decoration: underline; text-underline-offset: 3px; }
.um-ed p { margin: 0; }
.um-ed img { display: block; max-width: 100%; }
.um-ed [id] { scroll-margin-top: 24px; }
html:has(.um-ed) { scroll-behavior: smooth; }
.um-sheet { max-width: var(--um-sheet); margin: 0 auto; background: var(--um-white); }
.um-band { padding: var(--um-space-section) var(--um-gutter); }
.um-band--paper { background: var(--um-paper); }
.um-band--ink { background: var(--um-ink); color: var(--um-on-ink); }
.um-band--tight { padding-top: 0; }
.um-band--ruled { border-top: var(--um-rule-heavy); }

/* ---- Masthead ---- */
.um-mast { background: var(--um-paper); padding: 22px var(--um-gutter) 18px; display: flex; align-items: center; gap: 32px; }
.um-mast__logo { width: 76px; height: auto; }
.um-mast__nav { display: flex; gap: 26px; font-family: var(--um-font-sans); font-size: 11px; font-weight: 700; letter-spacing: 1.6px; text-transform: uppercase; }
.um-ed .um-mast__nav a { color: var(--um-ink); }
.um-mast__meta { margin-left: auto; text-align: right; font-family: var(--um-font-sans); font-size: 10.5px; font-weight: 700; letter-spacing: 1.6px; color: var(--um-text-mute); line-height: 15px; text-transform: uppercase; }
.um-mast__meta span { display: block; font-weight: 400; letter-spacing: 1px; }
.um-rule { margin: 0 var(--um-gutter); height: 7px; border-top: 3px solid var(--um-ink); border-bottom: 1px solid var(--um-ink); }
.um-rule-wrap { background: var(--um-paper); padding-bottom: 26px; }

/* ---- Typo ---- */
.um-kicker { font-family: var(--um-font-sans); font-size: var(--um-text-kicker); font-weight: 700; letter-spacing: var(--um-track-kicker); text-transform: uppercase; color: var(--um-signal); line-height: 16px; margin: 0 0 10px; }
.um-kicker--mute { color: var(--um-text-mute); }
.um-band--ink .um-kicker--mute { color: var(--um-on-ink-mute); }
.um-title { font-family: var(--um-font-serif); font-weight: 400; font-size: clamp(44px, 6.6vw, 80px); line-height: 1.03; letter-spacing: var(--um-track-display); color: var(--um-ink); margin: 0 0 18px; text-wrap: balance; }
.um-title em, .um-h2 em { font-style: italic; color: var(--um-signal); }
.um-lead { font-family: var(--um-font-serif); font-size: clamp(18px, 1.6vw, 21px); line-height: 1.55; color: var(--um-text); max-width: 46ch; text-wrap: pretty; }
.um-h2 { font-family: var(--um-font-serif); font-weight: 400; font-size: clamp(26px, 2.8vw, 36px); line-height: 1.18; letter-spacing: -0.025em; color: var(--um-ink); margin: 0 0 24px; text-wrap: balance; }
.um-h2--sm { font-size: clamp(22px, 2.2vw, 28px); }
.um-band--ink .um-h2, .um-band--ink .um-title { color: var(--um-on-ink); }
.um-sans { font-family: var(--um-font-sans); font-size: var(--um-text-body); line-height: 22px; color: var(--um-text-mute); }
.um-band--ink .um-sans { color: var(--um-on-ink-mute); }
.um-foot { font-family: var(--um-font-sans); font-size: 11px; line-height: 17px; color: var(--um-text-faint); margin-top: 14px !important; }
.um-band--ink .um-foot { color: var(--um-on-ink-fine); }
.um-label { font-family: var(--um-font-sans); font-size: var(--um-text-label); font-weight: 700; letter-spacing: var(--um-track-label); text-transform: uppercase; color: var(--um-on-ink-mute); line-height: 16px; }
.um-num { font-family: var(--um-font-serif); font-size: var(--um-text-num); letter-spacing: -0.6px; line-height: 1.2; }

/* ---- Hero ---- */
.um-hero { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 56px; align-items: end; padding: 0 var(--um-gutter) 44px; background: var(--um-paper); }
.um-hero__aside { border-top: var(--um-rule-heavy); padding-top: 18px; }
.um-hero__aside .um-sans { margin-bottom: 18px; }

/* ---- Buttons & Links ---- */
.um-btn { display: inline-flex; align-items: center; gap: 12px; font-family: var(--um-font-sans); font-size: 15px; font-weight: 700; line-height: 19px; padding: 15px 26px; border: 0; border-radius: 0; background: var(--um-ink); color: #fff !important; cursor: pointer; text-decoration: none !important; transition: background var(--um-dur) var(--um-ease); white-space: nowrap; }
.um-btn::after { content: "→"; transition: transform var(--um-dur) var(--um-ease); }
.um-btn:hover { background: var(--um-signal); }
.um-btn:hover::after { transform: translateX(4px); }
.um-btn--signal { background: var(--um-signal); }
.um-btn--signal:hover { background: #c94420; }
.um-band--ink .um-btn:not(.um-btn--signal) { background: #fff; color: var(--um-ink) !important; }
.um-btn--block { display: flex; justify-content: center; width: 100%; }
.um-btn:focus-visible, .um-toggle:focus-visible { outline: 2px solid var(--um-signal); outline-offset: 3px; }
.um-go { font-family: var(--um-font-sans); font-size: 14px; font-weight: 700; color: var(--um-signal); }
.um-go::after { content: " →"; }
.um-meta { font-family: var(--um-font-sans); font-size: 12px; color: var(--um-text-mute); margin-top: 14px !important; }

/* ---- Kartenband (dunkel, echte Kartenbilder) ---- */
.um-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px; text-align: center; }
.um-cards img { width: 100%; max-width: 260px; height: auto; margin: 0 auto 18px; transition: transform .5s var(--um-ease); }
.um-cards > div:hover img { transform: translateY(-6px) rotate(-1.5deg); }
.um-cards .um-num { color: #fff; font-size: 30px; margin-top: 2px; }
.um-cards .um-sans { font-size: 13px; margin-top: 2px; }
.um-cards .is-signal { color: var(--um-signal); }

/* ---- Riesenziffer ---- */
.um-giant { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 28px; align-items: center; }
.um-giant__n { font-family: var(--um-font-serif); font-weight: 400; font-size: clamp(110px, 15vw, 190px); line-height: .95; letter-spacing: -0.05em; color: var(--um-ink); white-space: nowrap; }
.um-giant__n small { font-size: .32em; letter-spacing: -0.02em; }
.um-band--ink .um-giant__n { color: #fff; }
.um-giant .um-h2 { margin-bottom: 8px; }

/* ---- Die eine Frage / Zwei Spalten ---- */
.um-toggles { display: flex; gap: 0; margin: 0 0 28px; border: 2px solid var(--um-ink); width: max-content; max-width: 100%; }
.um-toggle { font-family: var(--um-font-sans); font-size: 13px; font-weight: 700; letter-spacing: 1.4px; text-transform: uppercase; padding: 13px 22px; background: #fff; color: var(--um-ink); border: 0; cursor: pointer; }
.um-toggle + .um-toggle { border-left: 2px solid var(--um-ink); }
.um-toggle[aria-pressed="true"] { background: var(--um-ink); color: #fff; }
.um-split { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px; align-items: start; }
.um-side { transition: opacity .3s var(--um-ease), transform .3s var(--um-ease); }
[data-answer="ja"] [data-side="nein"], [data-answer="nein"] [data-side="ja"] { opacity: .32; transform: scale(.985); }
.um-colhead { font-family: var(--um-font-sans); font-size: 13px; font-weight: 700; letter-spacing: 1.4px; text-transform: uppercase; padding: 12px 16px; background: var(--um-paper); color: var(--um-ink); border-top: var(--um-rule-heavy); }
.um-colhead--ink { background: var(--um-ink); color: #fff; border-top-color: var(--um-signal); }
.um-item { padding: 18px 0; border-bottom: var(--um-rule-hair); }
.um-item__name { font-family: var(--um-font-serif); font-size: 21px; line-height: 1.2; color: var(--um-ink); margin-bottom: 4px !important; }
.um-item .um-sans { font-size: 13px; line-height: 20px; margin-bottom: 12px; }
.um-inkcard { background: var(--um-ink); color: #fff; padding: 4px 16px 24px; }
.um-inkcard img { width: 170px; margin: 16px 0; }
.um-inkcard .um-item__name { color: #fff; }
.um-inkcard .um-sans { color: var(--um-on-ink-mute); font-size: 13px; line-height: 20px; margin-bottom: 18px; }
.um-inkcard strong { color: #fff; }

/* ---- Maßstabsgetreue Balken ---- */
.um-scale { display: flex; flex-direction: column; gap: 26px; }
.um-scale__row { display: grid; grid-template-columns: 100px minmax(0, 1fr); gap: 18px; align-items: center; }
.um-scale__row img { width: 100px; }
.um-scale__head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 7px; }
.um-scale__head .um-num { font-size: 22px; color: #fff; white-space: nowrap; }
.um-scale__track { height: 16px; background: var(--um-bar-track); }
.um-scale__fill { height: 100%; width: 0; background: var(--um-bar-fill); transition: width 1.4s var(--um-ease); }
.um-scale__fill--signal { background: var(--um-signal); }
.is-in .um-scale__fill { width: var(--w); }
.um-scale .um-sans { font-size: 12px; margin-top: 6px; }

/* ---- Tages-Kästchen ---- */
.um-days-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 48px; }
.um-days-grid img { width: 120px; margin-bottom: 16px; }
.um-days-grid .um-num { font-size: 44px; color: #fff; letter-spacing: -1px; }
.um-days { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 18px; max-width: 352px; }
.um-days i { width: 18px; height: 18px; background: var(--um-bar-track); transition: background .2s linear; transition-delay: calc(var(--i) * 18ms); }
.is-in .um-days i { background: var(--um-signal); }

/* ---- Tabelle ---- */
.um-table { width: 100%; border-collapse: collapse; font-family: var(--um-font-sans); }
.um-table th { text-align: left; font-size: 11px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: var(--um-ink); padding: 0 8px 10px; border-bottom: var(--um-rule-table); }
.um-table th.is-hl { color: var(--um-signal); }
.um-table td { font-size: 14px; color: var(--um-ink-2); padding: 13px 8px; border-bottom: var(--um-rule-hair); }
.um-table td:first-child, .um-table th:first-child { padding-left: 0; }
.um-table td:first-child { font-size: 12.5px; color: var(--um-text-mute); width: 22%; }
.um-table td.is-hl { font-weight: 700; }
.um-table-wrap { overflow-x: auto; }

/* ---- Kassenbon ---- */
.um-receipt-stage { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 56px; align-items: center; }
.um-receipt { width: 100%; max-width: 380px; margin: 0 auto; background: #fff; border: 1px solid var(--um-line-receipt); border-bottom: 0; padding: 24px 24px 20px; font-family: var(--um-font-mono); font-size: 13.5px; color: var(--um-ink-2); line-height: 18px; position: relative; transform: rotate(-1.2deg); }
.um-receipt::after { content: ""; position: absolute; left: -1px; right: -1px; bottom: -10px; height: 10px; background: linear-gradient(-45deg, transparent 6px, #fff 0) 0 0 / 12px 10px repeat-x, linear-gradient(45deg, transparent 6px, #fff 0) 0 0 / 12px 10px repeat-x; }
.um-receipt__title { text-align: center; font-weight: 700; letter-spacing: 2px; margin-bottom: 4px; }
.um-receipt__cut { color: var(--um-dash); white-space: nowrap; overflow: hidden; letter-spacing: 1px; }
.um-receipt__row { display: flex; justify-content: space-between; gap: 12px; padding: 5px 0; }
.um-receipt__row span:last-child { white-space: nowrap; }
.um-receipt__total { display: flex; justify-content: space-between; padding: 8px 0 4px; font-weight: 700; font-size: 17px; }
.um-receipt__fine { text-align: center; font-size: 10.5px; letter-spacing: 1px; color: var(--um-text-mute); margin-top: 10px; line-height: 15px; text-transform: uppercase; }

/* ---- Vergleich „bekommst / zahlst" ---- */
.um-ledger { display: grid; grid-template-columns: 1fr 1fr; border-top: var(--um-rule-heavy); margin-top: 22px; }
.um-ledger > div { padding: 16px 0 0; }
.um-ledger > div + div { border-left: var(--um-rule-hair); padding-left: 22px; }
.um-ledger .um-num { font-size: 34px; color: var(--um-ink); }

/* ---- Schritte / Zahlen ---- */
.um-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; border-top: var(--um-rule-heavy); }
.um-steps > div { padding: 18px 22px 0 0; }
.um-steps > div + div { padding-left: 22px; border-left: var(--um-rule-hair); }
.um-band--ink .um-steps { border-top-color: #fff; }
.um-band--ink .um-steps > div + div { border-left-color: var(--um-ink-line); }
.um-steps__t { font-family: var(--um-font-serif); font-size: 23px; line-height: 1.2; margin: 4px 0 4px !important; }
.um-figs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: var(--um-rule-heavy); }
.um-figs > div { padding: 18px 18px 0 0; }
.um-figs > div + div { padding-left: 18px; border-left: var(--um-rule-hair); }
.um-figs .um-num { font-size: clamp(28px, 3vw, 40px); letter-spacing: -1px; }
.um-band--ink .um-figs { border-top-color: #fff; }
.um-band--ink .um-figs > div + div { border-left-color: var(--um-ink-line); }

/* ---- Wege (Angebotsspalten) ---- */
.um-ways { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr)); gap: 28px; }
.um-way { border-top: var(--um-rule-heavy); padding-top: 16px; display: flex; flex-direction: column; gap: 8px; transition: border-color .3s var(--um-ease); }
.um-way.is-rec { border-top-color: var(--um-signal); }
.um-way .um-kicker { margin: 0; }
.um-way__name { font-family: var(--um-font-serif); font-size: 26px; line-height: 1.15; letter-spacing: -0.4px; }
.um-way__facts { font-family: var(--um-font-sans); font-size: 12.5px; color: var(--um-ink); padding: 10px 0; border-top: var(--um-rule-hair); border-bottom: var(--um-rule-hair); margin: 6px 0 8px !important; }
.um-way .um-btn { align-self: flex-start; }
.um-way > .um-btn { margin-top: auto; }
.um-way > .um-ai { margin-top: auto; }
.um-way img { width: 150px; margin-bottom: 6px; }

/* ---- Zeithorizont ---- */
.um-horizon { display: flex; flex-direction: column; gap: 20px; }
.um-horizon__row { display: grid; grid-template-columns: 180px minmax(0, 1fr) 150px; gap: 18px; align-items: center; }
.um-horizon__row .um-num { font-size: 18px; color: #fff; text-align: right; }

/* ---- Entscheidungsbaum ---- */
.um-tree { border-top: var(--um-rule-heavy); }
.um-tree__q { display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: 18px; padding: 24px 0; border-bottom: var(--um-rule-hair); }
.um-tree__n { font-family: var(--um-font-serif); font-size: 44px; line-height: 1; color: var(--um-signal); }
.um-tree__text { font-family: var(--um-font-serif); font-size: clamp(21px, 2.2vw, 27px); line-height: 1.25; letter-spacing: -0.3px; margin-bottom: 16px !important; }
.um-tree__btns { display: flex; gap: 0; border: 2px solid var(--um-ink); width: max-content; }
.um-tree__answer { margin-top: 18px; background: var(--um-ink); color: #fff; padding: 20px 22px; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 18px; align-items: center; }
.um-tree__answer .um-item__name { color: #fff; }
.um-tree__answer .um-sans { color: var(--um-on-ink-mute); font-size: 13px; line-height: 20px; }
.um-tree__no { font-family: var(--um-font-sans); font-size: 11px; font-weight: 700; letter-spacing: 2px; color: var(--um-text-mute); padding: 10px 0 0 74px; }
/* JS-Modus: Schritte nacheinander aufdecken */
.js .um-tree__q:not(.is-open), .js .um-tree__answer:not(.is-open), .js .um-tree__no { display: none; }
.js .um-tree__q.is-done .um-tree__btns { opacity: .45; }

/* ---- CTA-Band ---- */
.um-cta { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 28px; align-items: end; border-top: var(--um-rule-hair); padding-top: 32px; }
.um-consent { font-family: var(--um-font-sans); font-size: 11.5px; line-height: 17px; color: var(--um-text-mute); max-width: 72ch; margin-top: 16px !important; }

/* ---- Legal ---- */
.um-legal { background: var(--um-paper); border-top: var(--um-rule-heavy); padding: 32px var(--um-gutter) 36px; font-family: var(--um-font-sans); font-size: 11.5px; line-height: 1.7; color: var(--um-text-fine); }
.um-legal strong { color: var(--um-text-fine-2); }
.um-legal hr { border: 0; border-top: 1px solid var(--um-line); margin: 18px 0 16px; }
.um-legal__links { display: flex; gap: 20px; flex-wrap: wrap; }
.um-ed .um-legal a { color: var(--um-text-fine-2); text-decoration: underline; text-underline-offset: 2px; }

/* ---- Sticky ---- */
.um-sticky { position: fixed; left: 50%; bottom: 16px; z-index: 50; transform: translate(-50%, 140%); width: min(720px, calc(100% - 24px)); background: var(--um-ink); color: #fff; display: flex; align-items: center; gap: 18px; padding: 10px 10px 10px 20px; border-top: 3px solid var(--um-signal); transition: transform .45s var(--um-ease); }
.um-sticky.is-shown { transform: translate(-50%, 0); }
.um-sticky__t { flex: 1; min-width: 0; }
.um-sticky__t .um-label { color: var(--um-signal); }
.um-sticky__name { font-family: var(--um-font-serif); font-size: 18px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ---- Reveal ---- */
.js [data-reveal] { opacity: 0; transform: translateY(18px); transition: opacity .7s var(--um-ease), transform .7s var(--um-ease); }
.js [data-reveal].is-in { opacity: 1; transform: none; }

/* ---- Responsive ---- */
@media (max-width: 860px) {
  .um-ed { padding: 0 0 110px; }
  .um-ed { --um-gutter: 22px; --um-space-section: 40px; }
  .um-mast__nav { display: none; }
  .um-hero, .um-split, .um-days-grid, .um-receipt-stage, .um-cta { grid-template-columns: 1fr; gap: 28px; }
  .um-cards { grid-template-columns: 1fr; gap: 30px; }
  .um-giant { grid-template-columns: 1fr; gap: 6px; }
  .um-steps, .um-figs { grid-template-columns: 1fr 1fr; }
  .um-steps > div, .um-figs > div { padding: 16px 0 16px 0 !important; border-left: 0 !important; border-bottom: var(--um-rule-hair); }
  .um-horizon__row { grid-template-columns: 1fr; gap: 6px; }
  .um-horizon__row .um-num { text-align: left; }
  .um-tree__q { grid-template-columns: 1fr; }
  .um-tree__no { padding-left: 0; }
  .um-tree__answer { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .um-scale__fill, .um-days i, .js [data-reveal], .um-sticky, .um-cards img { transition: none !important; }
  html:has(.um-ed) { scroll-behavior: auto; }
}

/* ---- Inline-Antrags-iframe (Click-to-load, §5 Abs.2 / §5(3)) · Editorial ----
   Gleiche Logik wie AntragIframe.astro der dunklen Originale, aber Editorial:
   Tinte/Signalrot, Georgia/Arial, Radius 0, keine Schatten. Das <iframe> wird
   erst beim Klick inline an Ort und Stelle (nicht als Overlay) geladen. */
.um-ai { border-top: var(--um-rule-hair); padding-top: 14px; margin-top: 4px; }
.um-ai__consent { margin-top: 0 !important; margin-bottom: 14px; }
.um-ai__btn { margin: 0; }
.um-ai__micro { text-align: left; }
.um-ai__mount { margin-top: 16px; background: var(--um-white); border: 1px solid var(--um-line); }
.um-ai__mount[hidden] { display: none; }
.um-ai__mount iframe { width: 100%; min-height: 760px; border: 0; display: block; }
.um-ai__fallback { display: inline-block; margin-top: 12px; font-family: var(--um-font-sans); font-size: 12px; font-weight: 700; color: var(--um-signal); }
.um-ai__fallback[hidden] { display: none; }
/* Auf Tinte-Bändern (z. B. BARMAKID-Inkcard) Kontrast anpassen. */
.um-band--ink .um-ai, .um-inkcard .um-ai { border-top-color: var(--um-ink-line); }
.um-band--ink .um-ai__consent, .um-inkcard .um-ai__consent,
.um-band--ink .um-ai__micro, .um-inkcard .um-ai__micro { color: var(--um-on-ink-mute); }
.um-inkcard .um-ai__mount, .um-band--ink .um-ai__mount { background: var(--um-white); border-color: var(--um-ink-line); }

/* ---- Footer-Navigation (Inhalt wie Original-Footer, Editorial-Optik) ---- */
.um-foot-nav { background: var(--um-paper); border-top: var(--um-rule-heavy); font-family: var(--um-font-sans); }
.um-foot-nav__grid { padding: 40px var(--um-gutter) 24px; display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr 1fr; gap: 32px; }
.um-foot-nav__brand img { width: 64px; height: auto; margin-bottom: 14px; }
.um-foot-nav__brand p { font-family: var(--um-font-serif); font-size: 14px; line-height: 1.6; color: var(--um-text); max-width: 34ch; }
.um-foot-nav h4 { font-size: 11px; font-weight: 700; letter-spacing: var(--um-track-label); text-transform: uppercase; color: var(--um-signal); margin: 0 0 14px; }
.um-foot-nav ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.um-ed .um-foot-nav ul a { color: var(--um-ink); text-decoration: none; font-size: 13.5px; }
.um-ed .um-foot-nav ul a:hover { color: var(--um-signal); text-decoration: underline; text-underline-offset: 3px; }
.um-foot-nav__bottom { padding: 18px var(--um-gutter) 32px; border-top: 1px solid var(--um-line); font-size: 12px; color: var(--um-text-faint); }
@media (max-width: 860px) {
  .um-foot-nav__grid { grid-template-columns: 1fr 1fr; gap: 26px; }
}
@media (max-width: 520px) {
  .um-foot-nav__grid { grid-template-columns: 1fr; }
}

/* Anzeige-Kennzeichnung an jedem Angebot (Trennungsgebot / UWG) */
.um-ed .um-ai__flag{font:700 10.5px/1.4 Arial,Helvetica,sans-serif;letter-spacing:1.5px;text-transform:uppercase;color:var(--um-text-mute);margin:0 0 8px}

/* ==========================================================================
   Editorial-Shell — Masthead mit voller Navigation + Marktdaten-Ticker
   (HeaderEditorial.astro). Dieselben Nav-Ziele/Dropdowns wie Header.astro,
   Ticker-Werte aus kennzahlen.ts — rein editorial gestylt (Papier/Tinte,
   Georgia/Arial, Radius 0, Linien statt Schatten). Alles .um-ed-gescoped.
   ========================================================================== */

/* ---- Marktdaten-Ticker (Papierstreifen über dem Masthead) ---- */
.um-tickerbar { background: var(--um-paper); border-bottom: 1px solid var(--um-ink); font-family: var(--um-font-mono); font-size: 12.5px; letter-spacing: 0.02em; color: var(--um-ink-2); }
.um-tickerbar__row { display: flex; gap: clamp(14px, 2.4vw, 26px); flex-wrap: wrap; align-items: center; padding: 8px var(--um-gutter); }
.um-tickerbar__live { display: inline-flex; align-items: center; gap: 7px; font-family: var(--um-font-sans); font-size: 10.5px; font-weight: 700; letter-spacing: 1.4px; text-transform: uppercase; color: var(--um-ink); }
.um-tickerbar__dot { width: 7px; height: 7px; background: var(--um-signal); display: inline-block; }
.um-tickerbar strong { color: var(--um-ink); font-weight: 700; }
.um-tickerbar .up { color: var(--um-up); }
.um-tickerbar .down { color: var(--um-signal); }
.um-tickerbar .signal { color: var(--um-signal); }
.um-tickerbar__inflation { margin-left: auto; }

/* ---- Masthead-Navigation (Dropdowns) ---- */
.um-mast__nav { align-items: center; }
.um-mast__group { position: relative; display: inline-flex; align-items: center; }
.um-mast__top { display: inline-flex; align-items: center; gap: 5px; cursor: default; }
.um-ed .um-mast__nav a, .um-ed .um-mast__top { color: var(--um-ink); text-decoration: none; white-space: nowrap; }
.um-ed .um-mast__nav > a:hover, .um-ed .um-mast__top:hover { color: var(--um-signal); text-decoration: none; }
.um-mast__caret { font-size: 8px; opacity: 0.6; transition: transform var(--um-dur) var(--um-ease); }
.um-mast__group:hover .um-mast__caret, .um-mast__group:focus-within .um-mast__caret { transform: rotate(180deg); }
/* Hover-Brücke Label -> Panel */
.um-mast__group::after { content: ''; position: absolute; left: 0; right: -16px; top: 100%; height: 12px; }
.um-mast__panel { position: absolute; top: calc(100% + 11px); left: -10px; min-width: 248px; background: var(--um-white); border: 1px solid var(--um-ink); padding: 6px; display: grid; gap: 0; opacity: 0; visibility: hidden; transform: translateY(-6px); transition: opacity var(--um-dur) var(--um-ease), transform var(--um-dur) var(--um-ease), visibility var(--um-dur) var(--um-ease); z-index: 60; }
.um-mast__group:hover .um-mast__panel, .um-mast__group:focus-within .um-mast__panel { opacity: 1; visibility: visible; transform: translateY(0); }
.um-ed .um-mast__panel a { font-family: var(--um-font-sans); font-size: 12.5px; font-weight: 400; letter-spacing: 0.2px; text-transform: none; color: var(--um-ink); padding: 9px 11px; }
.um-ed .um-mast__panel a:hover { background: var(--um-paper); color: var(--um-signal); text-decoration: none; }

/* ---- Masthead-CTA + Mobile ---- */
.um-mast__cta { margin-left: auto; }
.um-mast__cta .um-btn { padding: 11px 20px; font-size: 13px; }
.um-mast__menu { display: none; margin-left: auto; position: relative; }
.um-mast__menu > summary { list-style: none; cursor: pointer; width: 42px; height: 42px; border: 1px solid var(--um-ink); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px; }
.um-mast__menu > summary::-webkit-details-marker { display: none; }
.um-mast__menu > summary span { width: 18px; height: 2px; background: var(--um-ink); }
.um-mast__drawer { position: absolute; right: 0; top: 50px; width: 250px; background: var(--um-white); border: 1px solid var(--um-ink); padding: 8px; display: flex; flex-direction: column; gap: 2px; max-height: 72vh; overflow-y: auto; z-index: 60; box-shadow: none; }
.um-ed .um-mast__drawer a { font-family: var(--um-font-sans); color: var(--um-ink); text-decoration: none; font-size: 13.5px; padding: 9px 11px; }
.um-ed .um-mast__drawer a:hover { background: var(--um-paper); color: var(--um-signal); text-decoration: none; }
.um-mast__drawer-top { font-weight: 700 !important; letter-spacing: 1.2px; text-transform: uppercase; font-size: 11px !important; margin-top: 6px; }
.um-mast__sub { padding-left: 22px !important; font-size: 12.5px !important; color: var(--um-text-mute) !important; }
.um-mast__drawer .um-btn { margin-top: 10px; justify-content: center; }

@media (max-width: 980px) {
  .um-mast__nav, .um-mast__cta { display: none; }
  .um-mast__menu { display: block; }
}
@media (max-width: 680px) {
  .um-tickerbar__inflation { margin-left: 0; }
  .um-tickerbar__hide { display: none; }
}

/* ==========================================================================
   Welle B — Rechts-/Statikseiten (Impressum, Datenschutz, AGB, Kennzahlen,
   Ueber-uns, Redaktion). Additive, .um-ed-gescoped Editorial-Komponenten.
   Nur Optik; keine neuen Inhalte. Papier/Tinte/Signalrot, Georgia/Arial,
   Radius 0, keine Schatten, Struktur ueber Linien.
   ========================================================================== */

/* ---- Breadcrumb ---- */
.um-crumb { font-family: var(--um-font-sans); font-size: 11px; font-weight: 700; letter-spacing: 1.4px; text-transform: uppercase; color: var(--um-text-mute); display: flex; gap: 10px; align-items: center; margin: 0 0 18px; }
.um-ed .um-crumb a { color: var(--um-text-mute); text-decoration: none; }
.um-ed .um-crumb a:hover { color: var(--um-signal); text-decoration: none; }
.um-crumb__sep { color: var(--um-line); }
.um-crumb__cur { color: var(--um-signal); }

/* ---- Lesbarer Rechts-/Fliesstext (Impressum, Datenschutz, AGB) ---- */
.um-prose { max-width: var(--um-maxw-prose); font-family: var(--um-font-serif); color: var(--um-text); font-size: 17px; line-height: 1.7; }
.um-prose p { margin: 14px 0 0; }
.um-prose h2 { font-family: var(--um-font-serif); font-weight: 400; font-size: clamp(22px, 2.2vw, 28px); line-height: 1.22; letter-spacing: -0.02em; color: var(--um-ink); margin: 36px 0 0; padding-top: 20px; border-top: var(--um-rule-hair); }
.um-prose > h2:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.um-prose h3 { font-family: var(--um-font-sans); font-weight: 700; font-size: 13px; letter-spacing: 0.6px; text-transform: uppercase; color: var(--um-ink); margin: 24px 0 0; }
.um-prose ul { margin: 12px 0 0; padding-left: 22px; }
.um-prose li { margin: 7px 0; line-height: 1.6; }
.um-prose strong { color: var(--um-text-fine-2); }
.um-ed .um-prose a { color: var(--um-signal); text-decoration: underline; text-underline-offset: 2px; }

/* ---- Daten-Tabelle (Kennzahlen): Label lesbar, Werte mono ---- */
.um-table--data td:first-child { font-size: 14px; color: var(--um-ink); width: auto; }
.um-table--data .um-tv { font-family: var(--um-font-mono); font-weight: 700; color: var(--um-ink); white-space: nowrap; }
.um-table--data .um-tq { color: var(--um-text-mute); font-size: 13px; }
.um-ed .um-table--data .um-tq a { color: var(--um-text-fine-2); text-decoration: underline; text-underline-offset: 2px; }
.um-table--data .um-ts { color: var(--um-text-mute); font-size: 12.5px; white-space: nowrap; }
@media (max-width: 560px) {
  .um-table--data .um-tq, .um-table--data th:last-child { display: none; }
}

/* ---- Stand- / Pruef-Metazeilen (Kennzahlen) ---- */
.um-stand { font-family: var(--um-font-sans); font-size: 13px; color: var(--um-text); border-left: 3px solid var(--um-signal); padding: 6px 0 6px 14px; margin-top: 20px; }
.um-stand strong { color: var(--um-ink); }
.um-pruef { display: flex; flex-wrap: wrap; gap: 8px 26px; margin-top: 14px; font-family: var(--um-font-sans); font-size: 12px; color: var(--um-text-mute); }
.um-pruef strong { color: var(--um-ink); font-weight: 700; }

/* ---- Methodik-Block (Kennzahlen) ---- */
.um-method { border-top: var(--um-rule-heavy); padding-top: 20px; }
.um-method__label { font-family: var(--um-font-sans); font-size: 11px; font-weight: 700; letter-spacing: 1.4px; text-transform: uppercase; color: var(--um-signal); margin: 0 0 10px; }
.um-method p { font-family: var(--um-font-sans); font-size: 14px; line-height: 1.7; color: var(--um-text); max-width: 76ch; }

/* ---- Notiz / Callout (Herausgeber, KI-Transparenz) ---- */
.um-note { border-left: 3px solid var(--um-signal); background: var(--um-paper); padding: 18px 22px; font-family: var(--um-font-sans); font-size: 13.5px; line-height: 1.6; color: var(--um-text); }
.um-note p { margin: 0; }
.um-note strong { color: var(--um-ink); }
.um-ed .um-note a { color: var(--um-signal); text-decoration: underline; text-underline-offset: 2px; }
.um-note + .um-note { margin-top: 16px; }

/* ---- Autoren-Karten (Redaktion) — Monogramm-Avatare, keine Personenfotos ---- */
.um-au-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 28px 44px; border-top: var(--um-rule-heavy); padding-top: 24px; margin-top: 4px; }
.um-au { display: flex; gap: 20px; align-items: flex-start; }
.um-au--lead { border-top: var(--um-rule-heavy); padding-top: 20px; margin-top: 4px; }
.um-ed a.um-au { text-decoration: none; color: inherit; }
.um-avatar { width: 64px; height: 64px; flex-shrink: 0; background: var(--um-ink); color: var(--um-paper); font-family: var(--um-font-sans); font-weight: 700; font-size: 21px; letter-spacing: 1px; display: inline-flex; align-items: center; justify-content: center; }
.um-avatar--xl { width: 78px; height: 78px; font-size: 26px; }
img.um-avatar { object-fit: cover; }
.um-au__role { font-family: var(--um-font-sans); font-size: 11px; font-weight: 700; letter-spacing: 1.4px; text-transform: uppercase; color: var(--um-signal); }
.um-au__name { font-family: var(--um-font-serif); font-size: 22px; line-height: 1.2; color: var(--um-ink); margin: 3px 0 8px; }
.um-au--lead .um-au__name { font-size: 26px; }
.um-au p { font-family: var(--um-font-sans); font-size: 13.5px; line-height: 1.55; color: var(--um-text-mute); margin: 0 0 8px; }
.um-ed a.um-au:hover .um-au__name { color: var(--um-signal); }
.um-au__link { font-family: var(--um-font-sans); font-size: 13px; font-weight: 700; color: var(--um-signal); }
.um-au__link::after { content: " →"; }

@media (max-width: 640px) {
  .um-au-grid { grid-template-columns: 1fr; gap: 24px; }
}

/* ==========================================================================
   Welle C — Themen-Hubs (9 Hub-Seiten: banking, geldanlage, kredit,
   steuern-vorsorge, immobilien, vermoegen, unternehmen, sachwerte, investoren).
   Additive, .um-ed-gescopte Editorial-Schicht fuer die im (vormals dunklen)
   Hub-Markup genutzten Klassen (.hub-*, .kicker, .lead, .btn*, .grid*, .card,
   .answerbox, .cluster), fuer die geteilte ArticleCards-Komponente (.rg-card*)
   sowie fuer die seitenspezifischen Bausteine (.rs-feature, .un-tag,
   .sw-, .tl). Nur Optik: Papier/Tinte/Signalrot, Georgia/Arial, Radius 0,
   keine Schatten, Struktur ueber Linien. Wirkt ausschliesslich auf .um-ed —
   die dunklen Bestandsnutzer derselben Klassen (check, faktencheck, research,
   fuer-*, Rechner, Ratgeber) bleiben unberuehrt.
   ========================================================================== */

/* ---- Hero ---- */
.um-ed .hub-hero { max-width: var(--um-sheet); margin: 0 auto; padding: 48px var(--um-gutter) 28px; text-align: left; }
.um-ed .hub--wide .hub-hero { max-width: var(--um-sheet); text-align: left; }
.um-ed .hub-h1 { font-family: var(--um-font-serif); font-weight: 400; font-size: clamp(34px, 5vw, 54px); line-height: 1.05; letter-spacing: var(--um-track-display); color: var(--um-ink); margin: 14px 0 0; text-wrap: balance; }
.um-ed .hub-h1 .g { color: var(--um-signal); font-style: italic; }
.um-ed .hub-hero .lead { margin: 18px 0 0; max-width: 68ch; }
.um-ed .hub--wide .hub-hero .lead { margin-left: 0; margin-right: 0; max-width: 68ch; }
.um-ed .hub-actions { display: flex; gap: 12px; justify-content: flex-start; margin-top: 26px; flex-wrap: wrap; }
.um-ed .hub--wide .hub-actions { justify-content: flex-start; }

/* ---- Sektionen ---- */
.um-ed .hub-sec { max-width: var(--um-sheet); margin: 0 auto; padding: 36px var(--um-gutter); border-top: var(--um-rule-hair); }
.um-ed .hub-muted { font-family: var(--um-font-sans); color: var(--um-text-mute); font-size: 14px; line-height: 1.55; margin: 0; }

/* ---- Typo (bare Headlines im Hub) ---- */
.um-ed .hub h2 { font-family: var(--um-font-serif); font-weight: 400; font-size: clamp(26px, 2.8vw, 34px); line-height: 1.18; letter-spacing: -0.02em; color: var(--um-ink); margin: 0 0 6px; text-wrap: balance; }
.um-ed .hub .kicker { font-family: var(--um-font-sans); font-size: var(--um-text-kicker); font-weight: 700; letter-spacing: var(--um-track-kicker); text-transform: uppercase; color: var(--um-signal); line-height: 16px; margin: 0 0 10px; display: inline-flex; align-items: center; gap: 10px; }
.um-ed .hub .kicker::before { content: ""; width: 26px; height: 2px; background: var(--um-signal); display: inline-block; }
.um-ed .hub-hero .kicker { justify-content: flex-start; }
.um-ed .hub--wide .hub-hero .kicker { justify-content: flex-start; }
.um-ed .hub .lead { font-family: var(--um-font-serif); font-size: clamp(18px, 1.6vw, 21px); line-height: 1.55; color: var(--um-text); max-width: 62ch; }

/* ---- Buttons ---- */
.um-ed .hub .btn { display: inline-flex; align-items: center; gap: 10px; font-family: var(--um-font-sans); font-size: 15px; font-weight: 700; line-height: 19px; padding: 14px 24px; border: 1px solid transparent; border-radius: 0; text-decoration: none !important; cursor: pointer; white-space: nowrap; transition: background var(--um-dur) var(--um-ease), color var(--um-dur) var(--um-ease), border-color var(--um-dur) var(--um-ease); }
.um-ed .hub .btn--primary { background: var(--um-ink); color: #fff; border-color: var(--um-ink); }
.um-ed .hub .btn--primary:hover { background: var(--um-signal); border-color: var(--um-signal); }
.um-ed .hub .btn--ghost { background: transparent; color: var(--um-ink); border-color: var(--um-ink); }
.um-ed .hub .btn--ghost:hover { background: var(--um-ink); color: #fff; }

/* ---- Rechner-Cluster ---- */
.um-ed .cluster { display: grid; grid-template-columns: repeat(2, 1fr); border: 1px solid var(--um-line); overflow: hidden; margin: var(--um-space-3) 0; }
.um-ed .cluster a { padding: 14px 18px; border-bottom: 1px solid var(--um-line); border-right: 1px solid var(--um-line); display: flex; justify-content: space-between; gap: 1rem; align-items: center; color: var(--um-ink); font-family: var(--um-font-sans); font-weight: 700; font-size: 14px; }
.um-ed .cluster a:hover { background: var(--um-paper); color: var(--um-signal); text-decoration: none; }
.um-ed .cluster a span { color: var(--um-signal); }
@media (max-width: 860px) { .um-ed .cluster { grid-template-columns: 1fr; } }

/* ---- Answerbox ---- */
.um-ed .answerbox { background: var(--um-paper); border: 1px solid var(--um-line); border-left: 3px solid var(--um-signal); padding: var(--um-space-4); margin: var(--um-space-3) 0 var(--um-space-4); }
.um-ed .answerbox h2 { font-family: var(--um-font-sans); font-size: 0.8rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--um-signal); margin: 0 0 0.6rem; }
.um-ed .answerbox p { margin: 0 0 0.5rem; font-family: var(--um-font-serif); font-size: 1.08rem; color: var(--um-ink); }
.um-ed .answerbox p:last-child { margin: 0; }

/* ---- Karten-Grid (Prinzipien, Journey, Werkzeuge) ---- */
.um-ed .hub .grid { display: grid; gap: 0; }
.um-ed .hub .grid--2 { grid-template-columns: repeat(2, 1fr); }
.um-ed .hub .grid--3 { grid-template-columns: repeat(3, 1fr); }
.um-ed .hub .grid--2, .um-ed .hub .grid--3 { border: 1px solid var(--um-ink); background: var(--um-ink); gap: 1px; }
.um-ed .hub .card { background: var(--um-white); padding: var(--um-space-4); display: flex; flex-direction: column; }
.um-ed .hub a.card { text-decoration: none; transition: background var(--um-dur) var(--um-ease); }
.um-ed .hub a.card:hover { background: var(--um-paper); }
.um-ed .hub .card h3 { font-family: var(--um-font-serif); font-weight: 400; font-size: 1.2rem; line-height: 1.25; color: var(--um-ink); margin: 0; }
.um-ed .hub .card p, .um-ed .hub .card .hub-muted { font-family: var(--um-font-sans); font-size: 13px; line-height: 1.55; color: var(--um-text-mute); margin: 0; }
@media (max-width: 760px) { .um-ed .hub .grid--2, .um-ed .hub .grid--3 { grid-template-columns: 1fr; } }

/* ---- ArticleCards (geteilte Komponente) — Farb-Overrides fuer helles Blatt.
   Hoehere Spezifitaet (.um-ed .ac-grid .x) schlaegt die scoped Komponenten-
   Regeln; wirkt nur auf .um-ed. --acc wird je Karte inline gesetzt. ---- */
.um-ed .ac-grid .rg-card { border-top-color: var(--um-ink); }
.um-ed .ac-grid .rg-card__num { color: var(--um-ink); font-family: var(--um-font-serif); }
.um-ed .ac-grid .rg-card__title { color: var(--um-ink); font-family: var(--um-font-serif); }
.um-ed .ac-grid .rg-card:hover .rg-card__title { color: var(--um-signal); }
.um-ed .ac-grid .rg-card__desc { color: var(--um-text-mute); }
.um-ed .ac-grid .rg-card__more { color: var(--um-signal); }

/* ---- Flaggschiff-Feature (unternehmen) ---- */
.um-ed .rs-feature { display: grid; grid-template-columns: 1fr auto; gap: 24px; align-items: center; margin-top: var(--um-space-4); padding: clamp(20px, 3vw, 32px); border: 1px solid var(--um-line); border-left: 3px solid var(--um-signal); background: var(--um-paper); text-decoration: none; transition: background var(--um-dur) var(--um-ease); }
.um-ed .rs-feature:hover { background: var(--um-white); }
.um-ed .rs-feature__t { margin: 0.3rem 0 0.6rem; font-family: var(--um-font-serif); font-weight: 400; font-size: clamp(22px, 3vw, 30px); color: var(--um-ink); }
.um-ed .rs-feature__p { margin: 0 0 1rem; font-family: var(--um-font-sans); color: var(--um-text-mute); line-height: 1.65; max-width: 60ch; }
.um-ed .rs-feature__link { font-family: var(--um-font-sans); color: var(--um-signal); font-weight: 700; }
.um-ed .rs-feature__stat { text-align: center; border-left: 1px solid var(--um-line); padding-left: 24px; min-width: 180px; }
.um-ed .rs-feature__num { font-family: var(--um-font-serif); font-weight: 400; font-size: clamp(34px, 5vw, 50px); color: var(--um-signal); line-height: 1; letter-spacing: -0.02em; }
.um-ed .rs-feature__lab { margin-top: 10px; font-family: var(--um-font-sans); font-size: 13px; color: var(--um-text-mute); line-height: 1.5; }
.um-ed .un-tag { font-family: var(--um-font-sans); font-size: 11px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: #fff; background: var(--um-signal); border-radius: 0; padding: 2px 7px; vertical-align: middle; margin-left: 4px; }
@media (max-width: 640px) { .um-ed .rs-feature { grid-template-columns: 1fr; } .um-ed .rs-feature__stat { border-left: 0; border-top: 1px solid var(--um-line); padding-left: 0; padding-top: 20px; text-align: left; } }

/* ---- Sachwerte: Feature, Risiko-Tiers, Chips, Investoren-Karten ---- */
.um-ed .sw-feature { display: block; margin-top: var(--um-space-4); padding: clamp(20px, 3vw, 30px); border: 1px solid var(--um-line); border-left: 3px solid var(--um-signal); background: var(--um-paper); text-decoration: none; transition: background var(--um-dur) var(--um-ease); }
.um-ed .sw-feature:hover { background: var(--um-white); }
.um-ed .sw-feature__t { margin: 0.3rem 0 0.6rem; font-family: var(--um-font-serif); font-weight: 400; font-size: clamp(20px, 3vw, 27px); color: var(--um-ink); }
.um-ed .sw-feature__p { margin: 0 0 1rem; font-family: var(--um-font-sans); color: var(--um-text-mute); line-height: 1.65; max-width: 62ch; }
.um-ed .sw-feature__link { font-family: var(--um-font-sans); color: var(--um-signal); font-weight: 700; }
.um-ed .sw-tiers { display: flex; flex-direction: column; gap: 14px; margin-top: var(--um-space-4); }
.um-ed .sw-tier { border: 1px solid var(--um-line); border-left: 4px solid var(--tc); padding: 18px 20px; background: var(--um-white); }
.um-ed .sw-tier__head { display: flex; align-items: center; gap: 10px; }
.um-ed .sw-tier__head h3 { margin: 0; font-family: var(--um-font-serif); font-weight: 400; font-size: 17px; color: var(--um-ink); }
.um-ed .sw-tier__dot { width: 12px; height: 12px; border-radius: 50%; background: var(--tc); flex-shrink: 0; }
.um-ed .sw-tier .hub-muted { margin: 0.5rem 0 0.9rem; }
.um-ed .sw-tier__items { display: flex; flex-wrap: wrap; gap: 8px; }
.um-ed .sw-item { display: inline-flex; align-items: center; gap: 6px; padding: 7px 14px; border: 1px solid var(--um-line); background: var(--um-paper); color: var(--um-ink); text-decoration: none; font-family: var(--um-font-sans); font-size: 13.5px; transition: border-color var(--um-dur) var(--um-ease), color var(--um-dur) var(--um-ease); }
.um-ed .sw-item:hover { border-color: var(--um-signal); color: var(--um-signal); }
.um-ed .sw-item span { color: var(--um-signal); }
.um-ed .sw-inv__top { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.um-ed .sw-inv__asset { font-family: var(--um-font-sans); font-size: 11.5px; color: var(--um-signal); background: var(--um-paper); border: 1px solid var(--um-line); padding: 3px 10px; white-space: nowrap; }

/* ---- Investoren: Zeitstrahl ---- */
.um-ed .tl { margin-top: var(--um-space-4); display: flex; flex-direction: column; gap: 0; border-left: 2px solid var(--um-line); padding-left: 22px; }
.um-ed .tl__row { position: relative; padding: 12px 0; }
.um-ed .tl__row::before { content: ''; position: absolute; left: -29px; top: 18px; width: 12px; height: 12px; border-radius: 50%; background: var(--um-signal); box-shadow: 0 0 0 4px var(--um-white); }
.um-ed .tl__year { font-family: var(--um-font-sans); font-size: 14px; font-weight: 700; color: var(--um-signal); }
.um-ed .tl__t { font-family: var(--um-font-serif); font-size: 17px; font-weight: 400; color: var(--um-ink); margin: 2px 0 4px; }

/* ==========================================================================
   Welle D — Zielgruppen- und Sonderseiten (fuer-frauen, fuer-berufseinsteiger,
   fuer-selbststaendige, check, faktencheck, geldentscheidungen, glossar).
   Additive, .um-ed-gescopte Editorial-Schicht fuer die wenigen Klassen, die die
   Welle-C-Hub-Schicht noch nicht abdeckt. Nur Optik. Wirkt ausschliesslich auf
   .um-ed; dunkle Bestandsnutzer bleiben unberuehrt.
   ========================================================================== */

/* ---- Kennzahl in Karten + Fussnote (Zielgruppen-Seiten) ---- */
.um-ed .hub .hub-stat { font-family: var(--um-font-serif); font-weight: 400; font-size: clamp(30px, 4vw, 40px); line-height: 1; letter-spacing: -0.02em; color: var(--um-signal); }
.um-ed .hub .hub-note { font-family: var(--um-font-sans); font-size: 12px; line-height: 1.55; color: var(--um-text-faint); margin-top: 1rem; }
.um-ed .hub .hub-h2 { font-family: var(--um-font-serif); font-weight: 400; font-size: clamp(22px, 3vw, 30px); line-height: 1.18; letter-spacing: -0.02em; color: var(--um-ink); margin: 6px 0 20px; }

/* ---- Schritt-Karten (.principle) in Karten-Grids ---- */
.um-ed .hub .principle { background: var(--um-white); padding: var(--um-space-4); display: flex; flex-direction: column; }
.um-ed .hub .principle__no { font-family: var(--um-font-serif); font-weight: 400; font-size: 28px; line-height: 1; color: var(--um-signal); margin-bottom: 10px; }
.um-ed .hub .principle h3 { font-family: var(--um-font-serif); font-weight: 400; font-size: 1.2rem; line-height: 1.25; color: var(--um-ink); margin: 0 0 0.3rem; }
.um-ed .hub .principle p { font-family: var(--um-font-sans); font-size: 13px; line-height: 1.55; color: var(--um-text-mute); margin: 0; }

/* ---- Check-Karten (check) ---- */
.um-ed .hub .ck-card { background: var(--um-white); padding: var(--um-space-4); display: flex; flex-direction: column; text-decoration: none; transition: background var(--um-dur) var(--um-ease); }
.um-ed .hub a.ck-card:hover { background: var(--um-paper); }
.um-ed .hub .ck-card__top { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
.um-ed .hub .ck-badge { font-family: var(--um-font-sans); font-size: 11px; font-weight: 700; letter-spacing: 0.04em; color: var(--um-signal); background: var(--um-paper); border: 1px solid var(--um-line); padding: 3px 9px; white-space: nowrap; }
.um-ed .hub .ck-card__t { font-family: var(--um-font-serif); font-weight: 400; font-size: 22px; line-height: 1.2; color: var(--um-ink); margin: 0.2rem 0 0.5rem; }
.um-ed .hub .ck-card:hover .ck-card__t { color: var(--um-signal); }
.um-ed .hub .ck-card__link { margin-top: auto; padding-top: 14px; font-family: var(--um-font-sans); font-weight: 700; font-size: 14px; color: var(--um-signal); }

/* ==========================================================================
   Glossar (.gl-*) — eigene Editorial-Schicht (Hero, Suche, A–Z, Karten-Grid).
   ========================================================================== */
.um-ed .gl-hero { max-width: 960px; margin: 0 auto; padding: 44px var(--um-gutter) 8px; }
.um-ed .gl-crumb { font-family: var(--um-font-sans); font-size: 12.5px; color: var(--um-text-mute); display: flex; align-items: center; gap: 8px; margin-bottom: 18px; }
.um-ed .gl-crumb a { color: var(--um-text-mute); text-decoration: none; }
.um-ed .gl-crumb a:hover { color: var(--um-signal); text-decoration: none; }
.um-ed .gl-crumb span { color: var(--um-line); }
.um-ed .gl-crumb__cur { color: var(--um-signal) !important; font-weight: 700; }
.um-ed .gl-h1 { font-family: var(--um-font-serif); font-weight: 400; font-size: clamp(32px, 5vw, 48px); line-height: 1.06; letter-spacing: var(--um-track-display); color: var(--um-ink); margin: 12px 0 0; text-wrap: balance; }
.um-ed .gl-h1 .g { color: var(--um-signal); font-style: italic; }
.um-ed .gl-hero .lead { margin: 16px 0 0; max-width: 64ch; }
.um-ed .gl-search { position: relative; margin-top: 24px; }
.um-ed .gl-search input { width: 100%; padding: 15px 18px; border-radius: 0; background: var(--um-white); border: 1px solid var(--um-ink); color: var(--um-ink); font-size: 16px; font-family: var(--um-font-sans); }
.um-ed .gl-search input:focus { outline: 2px solid var(--um-signal); outline-offset: 2px; }
.um-ed .gl-search input::placeholder { color: var(--um-text-faint); }
.um-ed .gl-search__count { position: absolute; right: 16px; top: 50%; transform: translateY(-50%); font-family: var(--um-font-mono); font-size: 12.5px; color: var(--um-text-mute); pointer-events: none; }
.um-ed .gl-az { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 20px; }
.um-ed .gl-az__l { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 0; font-family: var(--um-font-mono); font-size: 13px; font-weight: 700; text-decoration: none; color: var(--um-ink); background: var(--um-paper); border: 1px solid var(--um-line); transition: background var(--um-dur) var(--um-ease), color var(--um-dur) var(--um-ease); }
.um-ed .gl-az__l:hover { background: var(--um-ink); color: #fff; text-decoration: none; }
.um-ed .gl-az__l.is-empty { color: var(--um-text-faint); background: transparent; border-color: var(--um-line); }
.um-ed .gl-sec { max-width: 960px; margin: 0 auto; padding: 24px var(--um-gutter) 70px; }
.um-ed .gl-group { margin-bottom: 8px; }
.um-ed .gl-letter { font-family: var(--um-font-serif); font-weight: 400; font-size: 26px; color: var(--um-ink); margin: 28px 0 14px; padding-bottom: 8px; border-bottom: 2px solid var(--um-ink); scroll-margin-top: 80px; }
.um-ed .gl-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--um-ink); border: 1px solid var(--um-ink); }
.um-ed .gl-card { background: var(--um-white); padding: 18px 20px; scroll-margin-top: 90px; }
.um-ed .gl-card__head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 8px; }
.um-ed .gl-term { font-family: var(--um-font-serif); font-weight: 400; font-size: 18px; color: var(--um-ink); margin: 0; }
.um-ed .gl-term a { color: inherit; text-decoration: none; }
.um-ed .gl-term a:hover { color: var(--um-signal); text-decoration: none; }
.um-ed .gl-tag { flex-shrink: 0; font-family: var(--um-font-sans); font-size: 10.5px; letter-spacing: 0.04em; text-transform: uppercase; color: var(--um-text-mute); background: var(--um-paper); border: 1px solid var(--um-line); border-radius: 0; padding: 3px 9px; }
.um-ed .gl-def { font-family: var(--um-font-sans); font-size: 13.5px; line-height: 1.6; color: var(--um-text-mute); margin: 0; }
.um-ed .gl-more { display: inline-block; margin-top: 10px; font-family: var(--um-font-sans); font-size: 12.5px; font-weight: 700; color: var(--um-signal); text-decoration: none; }
.um-ed .gl-more:hover { text-decoration: underline; }
.um-ed .gl-empty { text-align: center; font-family: var(--um-font-sans); color: var(--um-text-mute); padding: 40px 0; font-size: 15px; }
@media (max-width: 680px) { .um-ed .gl-grid { grid-template-columns: 1fr; } }

/* ==========================================================================
   Welle E — Ratgeber: geteilte Bild-Komponente (Figure/.fig) und Inline-Bilder.
   Das Ratgeber-Template nutzt BaseEditorial OHNE styles.css, daher .fig hier
   editorial neu definieren. Prosa/Callout/CiteThis/Produkt-CTA sind jeweils
   in Template bzw. Komponente editorial gestylt.
   ========================================================================== */
.um-ed .fig { position: relative; overflow: hidden; background: var(--um-paper); border: 1px solid var(--um-line); border-radius: 0; margin: 1.9rem 0; }
.um-ed .fig img { display: block; width: 100%; height: 100%; object-fit: cover; }
.um-ed .fig--accent { border-bottom: 3px solid var(--um-signal); }
.um-ed .art img { max-width: 100%; height: auto; }

/* ==========================================================================
   Design-Audit P0/P1-Fixes.
   - .container: generischer Wrapper (vormals in styles.css) — auf Editorial-
     Seiten (rechner/ratgeber/produkte-Index) neu definiert, sonst klebt der
     Inhalt am Blattrand (D02/D09).
   - .qz-cta__btn: Check-Test-CTA; globale .um-ed a-Regel hatte Text=Signal auf
     Signal-Hintergrund erzeugt (unsichtbar, D03). Hoehere Spezifitaet + Kontrast.
   ========================================================================== */
.um-ed .container { max-width: var(--um-sheet); margin: 0 auto; padding: 0 var(--um-gutter); }
.um-ed .container--narrow { max-width: var(--um-maxw-prose); }
.um-ed a.qz-cta__btn { background: var(--um-ink); color: #fff; border: 1px solid var(--um-ink); }
.um-ed a.qz-cta__btn:hover { background: var(--um-signal); border-color: var(--um-signal); color: #fff; text-decoration: none; }
.um-ed a.qz-cta__btn--ghost { background: var(--um-canvas); color: var(--um-ink); border: 1px solid var(--um-line); }
.um-ed a.qz-cta__btn--ghost:hover { background: var(--um-paper); color: var(--um-ink); border-color: var(--um-ink); }