/* Hamburg-Linie, Stufe 1 (19.10.2026) — Schrift, Flaechen, Akzent.
   Live seit 19.10.2026; geschaltet ueber pd_design_hl() in
   _partials/components.php (return false = alter Auftritt). Ueberschreibt ausschliesslich Tokens aus
   marketing.css; alle Komponenten lesen diese Variablen bereits.
   Quelle: Claude-Design-Leinwand "Impressum Hamburg", Board "Hamburg-Linie –
   Design-Framework". Hanken Grotesk: SIL Open Font License 1.1, selbst gehostet. */
@font-face{font-family:'Hanken Grotesk';font-style:normal;font-display:swap;font-weight:200 900;src:url(/assets/fonts/hl/hanken-grotesk-latin-wght-normal.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:'Hanken Grotesk';font-style:normal;font-display:swap;font-weight:200 900;src:url(/assets/fonts/hl/hanken-grotesk-latin-ext-wght-normal.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Hanken Grotesk';font-style:italic;font-display:swap;font-weight:200 900;src:url(/assets/fonts/hl/hanken-grotesk-latin-wght-italic.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:'Hanken Grotesk';font-style:italic;font-display:swap;font-weight:200 900;src:url(/assets/fonts/hl/hanken-grotesk-latin-ext-wght-italic.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}

:root {
  --font:         'Hanken Grotesk', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-display: 'Hanken Grotesk', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  /* Flaechenwechsel kuehl statt warm (--hl-bg-alt / --hl-line-soft / --hl-line) */
  --stone-50:  #F6F7FB;
  --stone-100: #F1F5F9;
  --stone-200: #E2E8F0;
  /* Akzentblau: im Framework nur dekorativ (Badges, Hinweise, Hero-Kreis) */
  --accent:      #4562DE;
  --accent-pale: #EEF1FE;
}
h1, h2 { font-weight: 700; }
h1 { line-height: 1.04; }
h2 { line-height: 1.1; }
h3, h4 { letter-spacing: -0.01em; }
.btn { font-weight: 500; }

/* Keine Produktfarben mehr: die Entwuerfe fuehren JuristData, ClockData und NotData
   im Marken-Violett (Bildmarken tragen den gemeinsamen Navy-Blau-Verlauf). Gleiche
   Spezifitaet wie der Marken-Layer in marketing.css, spaeter geladen, gewinnt. */
body[data-brand] { --brand: #581C87; --brand-cta: #581C87; --brand-fg: #fff; }

/* Social-Profile im Footer (19.10.2026): Symbol + Name nebeneinander, Tippflaeche 40 px.
   Selektoren mit "ul" davor, weil .mk-footer ul (Grid) und .mk-footer ul a (inline-block,
   Polsterung) in marketing.css spezifischer sind als eine einzelne Klasse. */
.mk-footer ul.mk-footer-social{display:flex;flex-wrap:wrap;gap:.5rem;list-style:none;margin:var(--s-md) 0 0;padding:0}
.mk-footer ul.mk-footer-social a{display:inline-flex;align-items:center;gap:.5rem;height:40px;padding:0 .8rem;line-height:1;border-radius:var(--r-btn);color:rgba(255,255,255,.82);font-size:var(--small);text-decoration:none;border:1px solid rgba(255,255,255,.18);transition:background .15s ease,border-color .15s ease,color .15s ease}
.mk-footer ul.mk-footer-social a:hover,.mk-footer ul.mk-footer-social a:focus-visible{color:#fff;background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.45)}
.mk-footer ul.mk-footer-social svg{width:18px;height:18px;flex:none;display:block}

/* Cookie-Banner, Handy-Kurzfassung (19.10.2026, SEA-Pruefung: vorher 69 % des Viewports).
   Gleichrangige Knoepfe bleiben sichtbar; Kategorien hinter "Einstellungen". */
.consent-banner .consent-mehr{display:none}
@media (max-width:640px){
  .consent-banner{padding:.9rem 0 calc(.9rem + env(safe-area-inset-bottom,0px))}
  .consent-banner .inner{gap:.6rem}
  .consent-banner .consent-h{font-size:var(--small);margin-bottom:0}
  .consent-banner p{font-size:var(--tiny);line-height:1.5}
  .consent-banner:not([data-open]) .opts label,.consent-banner:not([data-open]) .consent-auswahl{display:none}
  .consent-banner .opts{gap:.5rem;width:100%}
  .consent-banner .btns{order:-1;width:100%}
  .consent-banner .consent-mehr{display:inline-flex;align-items:center;min-height:40px;padding:0 .2rem;background:none;border:0;color:var(--ink-soft);font:500 var(--small)/1 var(--font);text-decoration:underline;text-underline-offset:2px;cursor:pointer}
}
/* Kurztext nur am Handy und nur zugeklappt; aufgeklappt (data-open) die volle Fassung. */
.consent-banner .consent-kurz{display:none}
@media (max-width:640px){.consent-banner:not([data-open]) .consent-lang{display:none}.consent-banner:not([data-open]) .consent-kurz{display:inline}}

/* 19.10.2026 Barrierefreiheit (axe, WCAG 2.2 AA), Befunde auf 15 Live-Seiten:
   - --ink-mute #64748B lag auf den kuehlen Flaechen (#F6F7FB) bei 4,44:1 -> #5E6B80 (5,0:1)
   - Abschnittsleads in .section-dark erbten --ink-mute (3,77:1 auf Navy)
   - Links im Fliesstext nur per Farbe unterscheidbar (1,43:1 zum Umgebungstext)
   - Spaltentitel im Footer sind h2 (vorher h3 direkt nach h1 -> Sprung) */
:root { --ink-mute: #5E6B80; --ink-faint: #5E6B80; }
.section-dark .section-head p { color: rgba(255,255,255,.68); }
main p a:not([class]), main li a:not([class]), main .legal-note a:not([class]), main .mp-hinweis a:not([class]) { text-decoration: underline; text-underline-offset: 2px; }
.mk-footer h2 { color: #fff; font-size: 0.8125rem; letter-spacing: .02em; line-height: 1.4; margin-bottom: var(--s-md); font-weight: 600; font-family: var(--font); }

/* 19.10.2026: Wisch-Hinweis fuer breite Tabellen am Handy (Skript in scripts.php). */
.pd-wisch { position: relative; }
.pd-wisch-hinweis { display: flex; align-items: center; gap: .4rem; margin: 0 0 .5rem; font-size: var(--tiny); color: var(--ink-mute); }
.pd-wisch-hinweis svg { width: 14px; height: 14px; flex: none; }
.pd-wisch.is-breit::after { content: ""; position: absolute; top: 0; right: 0; bottom: 0; width: 48px; pointer-events: none;
  background: linear-gradient(to right, rgba(255,255,255,0), var(--pd-wisch-bg, #fff) 85%); transition: opacity .2s; }
.pd-wisch.is-ende::after { opacity: 0; }

/* 19.10.2026: Aktenzeichen und Daten in Tabellen (td.m) nicht umbrechen -- am Handy
   stand "EP 3 456 789" ueber drei Zeilen; die Tabellen sind dort wischbar. */
@media (max-width: 640px) { table td.m { white-space: nowrap; } }  /* nur Handy: am Desktop sprengte es die schmale Spalte auf /use-cases */