/* GENERATED by tools/gen-theme.js — do not edit.
 * Token block: tools/gen-tokens.js -> tokens.json (every pair contrast-gated).
 * Design language: assets-src/_design.css — edit THAT file.
 */
:root{
  /* duo + Farbrollen — abgeleitet aus dem Seed #F5A800 */
  --c1: #F5A800;
  --c1-700: #DB9600;
  --on-c1: #17120A;
  --on-c1-muted: #4A3A18;
  --c2: #103A4C;
  --c2-700: #0C2E3D;
  --c2-900: #08202B;
  --on-c2: #FFFFFF;
  --on-c2-muted: #CBDDE6;
  --accent: #F5A800;
  --on-accent: #17120A;
  --accent-hover: #DB9600;
  --accent-ink: #8A5A00;
  --accent-light: #FFC24D;
  --bg: #FFFDF9;
  --surface: #FFFFFF;
  --soft: #FBF6EC;
  --tint: #FFEFCC;
  --line: #E9DFCB;
  --line-strong: #8A7F6E;
  --ink: #17120A;
  --text: #2B2318;
  --muted: #6B5D48;
  --link: #103A4C;
  --link-hover: #0C2E3D;
  --link-on-c1: #103A4C;
  --link-on-c2: #FFC24D;
  --focus: #17120A;
  --focus-on-dark: #F5A800;
  --danger: #B3261E;
  --on-danger: #FFFFFF;
  --danger-bg: #FDECEA;
  --danger-ink: #8C1D18;
  --ok: #17663F;
  --header-bg: #FFFFFF;
  --header-rule: #F5A800;
  --topbar-bg: #08202B;
  --topbar-text: #B8CAD4;
  --topbar-link: #FFFFFF;
  --footer-bg: #08202B;
  --footer-text: #B8CAD4;
  --footer-head: #FFFFFF;
  --footer-link-hover: #FFFFFF;
  --callbar-bg: #103A4C;
  --callbar-text: #FFFFFF;
  --fab-bg: #08202B;
  --fab-ink: #F5A800;
  --fab-ring: #F5A800;
  /* Alpha-Schichten (nur über der jeweils genannten Fläche verwenden) */
  --ink-a12: rgba(23,18,10,.12);
  --ink-a24: rgba(23,18,10,.24);
  --ink-a55: rgba(23,18,10,.55);
  --white-a07: rgba(255,255,255,.07);
  --white-a10: rgba(255,255,255,.1);
  --white-a14: rgba(255,255,255,.14);
  --white-a20: rgba(255,255,255,.2);
  --white-a45: rgba(255,255,255,.45);
  --white-a60: rgba(255,255,255,.6);
  --white-a16: rgba(255,255,255,.16);
  /* Typografie */
  --font: 'Segoe UI',system-ui,-apple-system,'Helvetica Neue',Roboto,Arial,sans-serif;
  --font-heading: 'Segoe UI',system-ui,-apple-system,'Helvetica Neue',Roboto,Arial,sans-serif;
  --scale: 1.25;
  --fs-xs: .8125rem;
  --fs-sm: .9375rem;
  --fs-base: 1.125rem;
  --fs-md: 1.1875rem;
  --fs-btn: 1.0625rem;
  --fs-lead: clamp(1.1875rem,1.4vw,1.3125rem);
  --fs-h3: clamp(1.1875rem,1.7vw,1.375rem);
  --fs-h2: clamp(1.6875rem,3.4vw,2.5rem);
  --fs-h1: clamp(2.0625rem,4.5vw,3.25rem);
  --fs-phone: clamp(1.75rem,3vw,2.25rem);
  --lh-body: 1.6;
  --lh-heading: 1.14;
  --lh-tight: 1.2;
  --w-body: 400;
  --w-medium: 600;
  --w-bold: 700;
  --w-heading: 800;
  --track-eyebrow: .09em;
  --track-heading: -.01em;
  --measure: 68ch;
  /* Abstände */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 22px;
  --sp-6: 28px;
  --sp-7: 36px;
  --sp-8: 48px;
  --sp-9: 64px;
  --sp-10: 80px;
  --gap-grid: 24px;
  --block-y: clamp(56px,7vw,76px);
  --block-y-lg: clamp(72px,9vw,104px);
  --pad-x: 22px;
  /* Radien */
  --r-sm: 8px;
  --r: 14px;
  --r-lg: 22px;
  --pill: 999px;
  /* Schatten */
  --sh-sm: 0 1px 2px rgba(8,32,43,.08);
  --sh: 0 12px 30px rgba(8,32,43,.14);
  --sh-lg: 0 22px 52px rgba(8,32,43,.22);
  --sh-accent: 0 8px 20px rgba(8,32,43,.3);
  /* Bewegung */
  --ease: cubic-bezier(.22,.61,.36,1);
  --ease-emph: cubic-bezier(.16,1,.3,1);
  --dur-1: 120ms;
  --dur-2: 260ms;
  --dur-3: 600ms;
  --reveal-y: 22px;
  /* Layout */
  --c: 1180px;
  --c-narrow: 840px;
  --tap-min: 44px;
  --focus-width: 3px;
  --focus-offset: 2px;
  --header-h: 70px;
  --callbar-h: 64px;
}

/* =========================================================================
   aufsperr-hamburg — the shared design LANGUAGE.
   Prepended at build time with the contrast-gated token block from tokens.json;
   together they become assets/theme.css, which EVERY page links unedited.

   This file is composable primitives — LEGO bricks, not finished page templates.
   Per-page <style> may position and size these bricks; it may never introduce a
   new theme value. Cohesion comes from here, uniqueness from composition.

   Idiom (from style-library/farbblock-duo): the page reads as a stack of
   full-bleed colour BANDS that alternate, not as cards floating on white.
   Re-themed here to amber #F5A800 + Hafenblau #103A4C.

   Every colour pair below is one the token script gated at >= 4.5:1 (text) or
   >= 3:1 (large text / UI). Three rules from tokens.json are load-bearing:
     - --accent is a FILL. As text: --accent-ink on light, --accent-light on dark.
     - White on amber measures 2:1 — never as text, never as a label.
     - Links are permanently underlined; link-vs-text is only ~1.3:1.
   ========================================================================= */

/* ------------------------------------------------------------------ reset */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
	margin: 0;
	background: var(--bg);
	color: var(--text);
	font: var(--w-body) var(--fs-base)/var(--lh-body) var(--font);
	-webkit-font-smoothing: antialiased;
	overflow-x: hidden;
}

img, svg, video { max-width: 100%; height: auto; display: block; }
h1, h2, h3, h4 { margin: 0 0 var(--sp-4); font-family: var(--font-heading); line-height: var(--lh-heading); letter-spacing: var(--track-heading); font-weight: var(--w-heading); color: var(--ink); text-wrap: balance; }
h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); font-weight: var(--w-bold); }
p, li { max-width: var(--measure); }
p { margin: 0 0 var(--sp-4); }
ul, ol { margin: 0 0 var(--sp-4); padding-left: var(--sp-5); }

/* Colour alone cannot carry a link here (see the header comment) — so it never has to. */
a { color: var(--link); text-decoration: underline; text-underline-offset: .18em; text-decoration-thickness: .08em; }
a:hover { color: var(--link-hover); text-decoration-thickness: .14em; }

:where(a, button, [tabindex]):focus-visible {
	outline: 3px solid var(--focus);
	outline-offset: 2px;
	border-radius: 3px;
}

/* Skip link — visible the moment it is focused, never before. */
.ah-skip {
	position: absolute; left: var(--sp-4); top: -100px; z-index: 200;
	background: var(--surface); color: var(--ink);
	padding: var(--sp-3) var(--sp-5); border-radius: var(--r);
	font-weight: var(--w-bold); text-decoration: none;
	box-shadow: var(--sh);
	transition: top .18s var(--ease);
}
.ah-skip:focus { top: var(--sp-4); }

/* ------------------------------------------------------------------ bands */
/* The signature. Every section is a full-bleed band; the page snakes down through
   them. Rhythm for this site: bar -> dark -> base -> tint -> base (dense-efficient). */

.ah-band { padding-block: var(--block-y); position: relative; }
.ah-band > .ah-in { width: min(100% - 2 * var(--sp-5), var(--w-container, 1180px)); margin-inline: auto; }

.ah-band--base { background: var(--bg); color: var(--text); }
.ah-band--surface { background: var(--surface); color: var(--text); }
.ah-band--soft { background: var(--soft); color: var(--text); }
.ah-band--tint { background: var(--tint); color: var(--ink); }

.ah-band--c1 { background: var(--c1); color: var(--on-c1); }
.ah-band--c1 :where(h1, h2, h3) { color: var(--on-c1); }
.ah-band--c1 :where(p, li) { color: var(--on-c1); }
.ah-band--c1 .ah-muted { color: var(--on-c1-muted); }
.ah-band--c1 a:not(.ah-btn) { color: var(--link-on-c1); }

.ah-band--c2 { background: var(--c2); color: var(--on-c2); }
.ah-band--c2 :where(h1, h2, h3) { color: var(--on-c2); }
.ah-band--c2 :where(p, li) { color: var(--on-c2); }
.ah-band--c2 .ah-muted { color: var(--on-c2-muted); }
.ah-band--c2 a:not(.ah-btn) { color: var(--link-on-c2); }
.ah-band--c2 :where(a, button):focus-visible { outline-color: var(--focus-on-dark); }

.ah-band--c2-900 { background: var(--c2-900); color: var(--on-c2); }
.ah-band--c2-900 :where(h1, h2, h3) { color: var(--on-c2); }
.ah-band--c2-900 a:not(.ah-btn) { color: var(--link-on-c2); }
.ah-band--c2-900 :where(a, button):focus-visible { outline-color: var(--focus-on-dark); }

.ah-band--tight { padding-block: calc(var(--block-y) * .62); }
.ah-band--flush-top { padding-top: 0; }

/* ------------------------------------------------------------- typography */

.ah-eyebrow {
	display: block; margin-bottom: var(--sp-3);
	font-size: var(--fs-sm); font-weight: var(--w-bold);
	letter-spacing: var(--track-eyebrow); text-transform: uppercase;
	color: var(--accent-ink);
}
.ah-band--c1 .ah-eyebrow { color: var(--on-c1-muted); }
.ah-band--c2 .ah-eyebrow, .ah-band--c2-900 .ah-eyebrow { color: var(--accent-light); }

.ah-lead { font-size: var(--fs-lead); color: var(--muted); }
.ah-band--c1 .ah-lead { color: var(--on-c1-muted); }
.ah-band--c2 .ah-lead, .ah-band--c2-900 .ah-lead { color: var(--on-c2-muted); }

/* German legal headings are single compounds with no break opportunity in them —
   "Verbraucherstreitbeilegung" is 25 characters. At 360px it ran 382px wide and gave
   the whole PAGE a horizontal scrollbar, which no desktop check would ever show.
   hyphens:auto breaks it at the right places for lang="de". */
.ah-prose :is(h1, h2, h3, h4), .ah-head :is(h1, h2, h3) {
	hyphens: auto; overflow-wrap: break-word;
}

/* A heading rule — farbblock-duo's title underline, kept as a primitive. */
.ah-h-rule::after {
	content: ""; display: block; width: 62px; height: 5px; margin-top: var(--sp-4);
	background: var(--c1); border-radius: 999px;
}
.ah-band--c1 .ah-h-rule::after { background: var(--on-c1); }
.ah-band--c2 .ah-h-rule::after, .ah-band--c2-900 .ah-h-rule::after { background: var(--c1); }

/* ---------------------------------------------------------------- buttons */
/* --fs-btn is 17px/700 — NOT WCAG large text, so every label is gated at 4.5:1. */

.ah-btn {
	display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-3);
	padding: var(--sp-4) var(--sp-6); min-height: 48px;
	border: 2px solid transparent; border-radius: var(--r);
	font: var(--w-bold) var(--fs-btn)/1.1 var(--font);
	text-decoration: none; cursor: pointer;
	transition: transform .16s var(--ease), background-color .16s var(--ease), box-shadow .16s var(--ease);
}
.ah-btn:hover { transform: translateY(-2px); text-decoration: none; }
.ah-btn:active { transform: translateY(0); }

.ah-btn--call { background: var(--accent); color: var(--on-accent); box-shadow: var(--sh-sm); }
.ah-btn--call:hover { background: var(--accent-hover); color: var(--on-accent); }
.ah-btn--deep { background: var(--c2); color: var(--on-c2); }
.ah-btn--deep:hover { background: var(--c2-700); color: var(--on-c2); }
.ah-btn--ghost { border-color: currentColor; color: inherit; background: transparent; }
.ah-btn--wide { width: 100%; }
.ah-btn--lg { font-size: var(--fs-phone); padding: var(--sp-5) var(--sp-8); }
.ah-btn__num { font-variant-numeric: tabular-nums; white-space: nowrap; }
/* A nowrap label on a narrow viewport forces the whole layout wider than the screen. */
.ah-btn__lbl { white-space: nowrap; }
@media (max-width: 380px) { .ah-btn--lg { font-size: var(--fs-h3); padding: var(--sp-4) var(--sp-5); } }

/* ----------------------------------------------------------------- header */

.ah-head {
	position: sticky; top: 0; z-index: 100;
	background: var(--header-bg);
	border-bottom: 3px solid var(--header-rule);
}
.ah-head__in {
	width: min(100% - 2 * var(--sp-5), var(--w-container, 1180px)); margin-inline: auto;
	display: flex; align-items: center; gap: var(--sp-5);
	min-height: 72px;
}
/* A flex item's default min-width is auto, so the brand refuses to shrink below its text and
   pushes the burger off-screen: measured 383px of layout in a 360px viewport. The brand is the
   only item here that MAY shrink — the call button and the burger may not, since they are the
   conversion path and the navigation. */
.ah-head__in > * { min-width: 0; }
.ah-head__cta, .ah-burger { flex: 0 0 auto; }
.ah-brand { display: inline-flex; align-items: center; min-height: 44px; gap: var(--sp-3); text-decoration: none; color: var(--ink); font-weight: var(--w-heading); font-size: 1.0625rem; min-width: 0; overflow: hidden; }
.ah-brand__mk { width: 28px; height: 28px; border-radius: 7px; flex: 0 0 auto; }
.ah-brand__tx { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ah-brand:hover { text-decoration: none; }
@media (max-width: 420px) { .ah-brand__tx { font-size: .9375rem; } }

.ah-nav { margin-left: auto; }
.ah-nav__list { display: flex; gap: var(--sp-5); list-style: none; margin: 0; padding: 0; }
.ah-nav__list a { color: var(--text); text-decoration: none; font-weight: var(--w-medium); font-size: var(--fs-sm);
	display: inline-flex; align-items: center; min-height: 44px; border-bottom: 2px solid transparent; }
.ah-nav__list a:hover { color: var(--c2); border-bottom-color: var(--c1); }

.ah-head__cta { display: flex; align-items: center; gap: var(--sp-3); margin-left: var(--sp-4); }
.ah-head__cta .ah-btn { padding: var(--sp-3) var(--sp-5); min-height: 44px; flex-direction: column; gap: 0; }
.ah-head__cta .ah-btn__lbl { font-size: var(--fs-xs); font-weight: var(--w-medium); }

.ah-burger { display: none; width: 48px; height: 48px; border: 2px solid var(--line-strong); border-radius: var(--r); background: var(--surface); cursor: pointer; }
.ah-burger span, .ah-burger span::before, .ah-burger span::after { display: block; height: 2px; width: 22px; background: var(--ink); margin-inline: auto; position: relative; }
.ah-burger span::before { content: ""; position: absolute; top: -7px; }
.ah-burger span::after { content: ""; position: absolute; top: 7px; }

.ah-drawer { display: none; padding: var(--sp-5); border-top: 1px solid var(--line); background: var(--surface); }
.ah-drawer[hidden] { display: none; }
.ah-drawer__list { list-style: none; margin: 0 0 var(--sp-5); padding: 0; display: grid; gap: var(--sp-2); }
.ah-drawer__list a { display: flex; align-items: center; min-height: 48px; padding: var(--sp-4); border-radius: var(--r); background: var(--soft); color: var(--ink); text-decoration: none; font-weight: var(--w-medium); }

/* The nav outgrows the bar well before a phone width, so the burger tier starts high.
   The call button NEVER collapses into the drawer — it is the only conversion path. */
@media (max-width: 1080px) {
	.ah-nav { display: none; }
	.ah-burger { display: grid; place-items: center; }
	.ah-drawer:not([hidden]) { display: block; }
	.ah-head__in { justify-content: space-between; }
	.ah-head__cta { margin-left: 0; }
}
@media (max-width: 560px) {
	.ah-head__cta .ah-btn__num { display: none; }
	.ah-head__cta .ah-btn__lbl { font-size: var(--fs-btn); font-weight: var(--w-bold); }
}

/* --------------------------------------------------- sticky call bar + fab */
/* Positioned by CSS, never by JS: it must survive theme.js failing to load. */

.ah-callbar { display: none; }
@media (max-width: 860px) {
	.ah-callbar {
		display: block; position: fixed; inset: auto 0 0 0; z-index: 120;
		background: var(--callbar-bg); color: var(--callbar-text);
		padding: var(--sp-3) var(--sp-4);
		padding-bottom: calc(var(--sp-3) + env(safe-area-inset-bottom, 0px));
		box-shadow: 0 -6px 22px rgba(8, 32, 43, .28);
	}
	.ah-callbar__link { display: flex; flex-direction: column; align-items: center; gap: 2px; color: var(--callbar-text); text-decoration: none; min-height: 44px; justify-content: center; }
	.ah-callbar__lbl { font-size: var(--fs-xs); color: var(--on-c2-muted); }
	.ah-callbar__num { font-size: var(--fs-h3); font-weight: var(--w-heading); font-variant-numeric: tabular-nums; }
	.ah-callbar :focus-visible { outline-color: var(--focus-on-dark); }
	/* Reserve the bar's height so it never covers the end of the page. */
	.ah-has-callbar body, .ah-has-callbar .ah-foot { padding-bottom: 84px; }
}

.ah-totop {
	position: fixed; right: var(--sp-5); bottom: var(--sp-5); z-index: 110;
	width: 48px; height: 48px; border-radius: 999px;
	background: var(--fab-bg); color: var(--fab-ink); border: 2px solid var(--fab-ring);
	font-size: 1.25rem; line-height: 1; cursor: pointer;
	opacity: 0; visibility: hidden; transform: translateY(8px);
	transition: opacity .2s var(--ease), transform .2s var(--ease), visibility .2s;
}
.ah-totop.is-visible { opacity: 1; visibility: visible; transform: none; }
/* This button is position:fixed and floats over EVERY band, so no single ring colour works:
   an amber ring over the amber band measured 1.00:1 — the indicator vanished entirely.
   A dual ring solves it structurally: a light inner ring and a dark outer ring. The two
   contrast with each other at ~18:1, so whatever the button floats over, one of them is
   always visible against it. Do not collapse this back to a single outline-color. */
.ah-totop:focus-visible {
	outline: 3px solid var(--on-c2);
	outline-offset: 2px;
	box-shadow: 0 0 0 6px var(--ink);
}
@media (max-width: 860px) { .ah-totop { bottom: calc(var(--sp-5) + 76px); } }

/* ----------------------------------------------------------------- footer */

.ah-foot { background: var(--footer-bg); color: var(--footer-text); padding-block: var(--block-y) var(--sp-7); }
.ah-foot > * { width: min(100% - 2 * var(--sp-5), var(--w-container, 1180px)); margin-inline: auto; }
.ah-foot__cta { text-align: center; padding-bottom: var(--sp-8); border-bottom: 1px solid var(--white-a16); }
.ah-foot__lead { font-size: var(--fs-lead); color: var(--on-c2-muted); margin-inline: auto; }
.ah-foot__cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: var(--sp-7) var(--gap-grid); padding-block: var(--sp-8); }
.ah-foot__h { font-size: var(--fs-sm); text-transform: uppercase; letter-spacing: var(--track-eyebrow); color: var(--footer-head); margin-bottom: var(--sp-4); }
.ah-foot__col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-2); }
.ah-foot__col a { color: var(--footer-text); text-decoration: none; font-size: var(--fs-sm);
	display: flex; align-items: center; min-height: 44px; }
.ah-foot__col a:hover { color: var(--footer-link-hover); text-decoration: underline; }
.ah-foot :focus-visible { outline-color: var(--focus-on-dark); }
.ah-foot__bar { border-top: 1px solid var(--white-a16); padding-top: var(--sp-6); display: grid; gap: var(--sp-3); }
.ah-foot__note, .ah-foot__credits { font-size: var(--fs-xs); color: var(--footer-text); max-width: none; }
.ah-foot__credits { list-style: none; margin: 0; padding: 0; }

/* ==========================================================================
   BAND-INK CONTAINMENT — read this before adding any primitive.

   The band rules above set ink for a WHOLE band (`.ah-band--c2 :where(h1,h2,h3)`
   etc.). A primitive that paints its own LIGHT surface inside a dark band would
   otherwise inherit the dark band's white ink onto its own white fill — measured
   1.00:1 on `.ah-card h3`, i.e. invisible text. `:where()` contributes no
   specificity, so `.ah-band--c2 :where(h1,h2,h3)` is only (0,1,0) and any
   class+element selector below reliably wins.

   RULE: every light-surfaced primitive re-declares its own ink here. If you add
   one, add it to this block too.
   ========================================================================== */

.ah-band--c2 .ah-card, .ah-band--c2-900 .ah-card,
.ah-band--c2 .ah-pair__side, .ah-band--c2-900 .ah-pair__side,
.ah-band--c2 .ah-notice, .ah-band--c2-900 .ah-notice,
.ah-band--c1 .ah-card, .ah-band--c1 .ah-pair__side, .ah-band--c1 .ah-notice {
	color: var(--text);
}
.ah-band--c1 .ah-card :where(h1, h2, h3), .ah-band--c2 .ah-card :where(h1, h2, h3), .ah-band--c2-900 .ah-card :where(h1, h2, h3),
.ah-band--c1 .ah-pair__side :where(h1, h2, h3), .ah-band--c2 .ah-pair__side :where(h1, h2, h3), .ah-band--c2-900 .ah-pair__side :where(h1, h2, h3) {
	color: var(--ink);
}
.ah-band--c1 .ah-card :where(p, li), .ah-band--c2 .ah-card :where(p, li), .ah-band--c2-900 .ah-card :where(p, li),
.ah-band--c1 .ah-pair__side :where(p, li), .ah-band--c2 .ah-pair__side :where(p, li), .ah-band--c2-900 .ah-pair__side :where(p, li) {
	color: var(--muted);
}
.ah-band--c1 .ah-notice :where(h1, h2, h3, p, li), .ah-band--c2 .ah-notice :where(h1, h2, h3, p, li), .ah-band--c2-900 .ah-notice :where(h1, h2, h3, p, li) {
	color: var(--danger-ink);
}
/* Links inside a light primitive follow the light-surface link colour, not the band's. */
.ah-band--c1 .ah-card a:not(.ah-btn), .ah-band--c2 .ah-card a:not(.ah-btn), .ah-band--c2-900 .ah-card a:not(.ah-btn),
.ah-band--c1 .ah-pair__side a:not(.ah-btn), .ah-band--c2 .ah-pair__side a:not(.ah-btn), .ah-band--c2-900 .ah-pair__side a:not(.ah-btn) {
	color: var(--link);
}
/* A focus ring inside a light primitive must be the light-surface ring. `.ah-phone` is
   deliberately absent: on a c2 band it repaints itself dark (--white-a07 + --on-c2 text),
   so it keeps the dark-surface ring. */
.ah-band--c2 :where(.ah-card, .ah-pair__side, .ah-notice) :where(a, button):focus-visible,
.ah-band--c2-900 :where(.ah-card, .ah-pair__side, .ah-notice) :where(a, button):focus-visible {
	outline-color: var(--focus);
}

/* ==========================================================================
   SECTION PRIMITIVES — composable bricks. A section is built FROM these;
   none of them is a finished section on its own.
   ========================================================================== */

/* Split — farbblock-duo's zig-zag. .ah-split--rev flips the sides. */
.ah-split { display: grid; gap: var(--sp-8); align-items: center; }
@media (min-width: 860px) {
	.ah-split { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--sp-9); }
	.ah-split--rev > :first-child { order: 2; }
	.ah-split--wide-text { grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); }
}
.ah-split__media img { border-radius: var(--r-lg); box-shadow: var(--sh); width: 100%; }

/* Card grid — services, guides, anything enumerable. NEVER a bare bullet list. */
.ah-cards { display: grid; gap: var(--gap-grid); grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); list-style: none; margin: 0; padding: 0; }
.ah-card {
	background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg);
	padding: var(--sp-6); display: flex; flex-direction: column; gap: var(--sp-3);
	box-shadow: var(--sh-sm); transition: transform .18s var(--ease), box-shadow .18s var(--ease), border-color .18s var(--ease);
	max-width: none;
}
.ah-card:hover { transform: translateY(-4px); box-shadow: var(--sh); border-color: var(--c1); }
.ah-card h3 { margin: 0; }
.ah-card h3::after { content: ""; display: block; width: 42px; height: 4px; margin-top: var(--sp-3); background: var(--c1); border-radius: 999px; }
.ah-card p { margin: 0; color: var(--muted); max-width: none; }
.ah-card__link { margin-top: auto; font-weight: var(--w-bold); display: inline-flex; align-items: center; min-height: 44px; }
.ah-band--c2 .ah-card, .ah-band--c2-900 .ah-card { background: var(--surface); }

/* Process steps — numbered, ordered, never a bullet list. */
.ah-steps { display: grid; gap: var(--gap-grid); grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); list-style: none; margin: 0; padding: 0; counter-reset: ah-step; }
.ah-step { position: relative; padding-top: var(--sp-7); max-width: none; }
.ah-step::before {
	counter-increment: ah-step; content: counter(ah-step);
	position: absolute; top: 0; left: 0;
	width: 42px; height: 42px; display: grid; place-items: center;
	border-radius: 999px; background: var(--c1); color: var(--on-c1);
	font-weight: var(--w-heading); font-size: 1.0625rem;
}
.ah-band--c2 .ah-step::before, .ah-band--c2-900 .ah-step::before { background: var(--c1); color: var(--on-c1); }
.ah-step h3 { font-size: var(--fs-md); margin-bottom: var(--sp-2); }
.ah-step p { margin: 0; max-width: none; }

/* Icon list — symptoms, factors, checklists. The router shape. */
.ah-iconlist { display: grid; gap: var(--sp-4); list-style: none; margin: 0; padding: 0; }
@media (min-width: 760px) { .ah-iconlist--2 { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--sp-4) var(--sp-7); } }
.ah-iconlist li { display: grid; grid-template-columns: 26px minmax(0, 1fr); gap: var(--sp-4); align-items: start; max-width: none; }
.ah-iconlist li a { display: inline-flex; align-items: center; min-height: 44px; }
.ah-iconlist li::before {
	content: ""; width: 22px; height: 22px; margin-top: 3px; border-radius: 6px;
	background: var(--c1); box-shadow: inset 0 0 0 2px var(--on-c1);
}
.ah-band--c2 .ah-iconlist li::before, .ah-band--c2-900 .ah-iconlist li::before { background: var(--c1); box-shadow: inset 0 0 0 2px var(--c2); }

/* Chips — Einsatzgebiete. */
.ah-chips { display: flex; flex-wrap: wrap; gap: var(--sp-3); list-style: none; margin: 0; padding: 0; }
/* A chip is a link with no underline, so WCAG 1.4.1 needs its container to be identifiable
   by something other than colour. Measured, the original --line border reached only 1.30:1
   against the band and the fill 1.02:1 — nothing was actually distinguishable. The border is
   therefore a real 2px boundary in a colour gated >= 3:1 against every band the chip sits on. */
.ah-chip {
	/* Chip-shaped controls are tapped, not read — give them a real 44px target
	   (WCAG 2.5.8). Inline prose links are exempt and stay inline. */
	display: inline-flex; align-items: center; min-height: 44px;
	padding: var(--sp-3) var(--sp-5); border-radius: 999px;
	background: var(--surface); border: 2px solid var(--c2); color: var(--ink);
	text-decoration: none; font-size: var(--fs-sm); font-weight: var(--w-medium);
	transition: background-color .16s var(--ease), border-color .16s var(--ease);
}
.ah-chip:hover { background: var(--tint); border-color: var(--c2-900); color: var(--ink); text-decoration: none; }
/* On a dark band the fill must stay light so the same 2px boundary keeps working. */
.ah-band--c2 .ah-chip, .ah-band--c2-900 .ah-chip { background: var(--surface); border-color: var(--c1); color: var(--ink); }
.ah-band--c2 .ah-chip:hover, .ah-band--c2-900 .ah-chip:hover { background: var(--tint); border-color: var(--c1); color: var(--ink); }
.ah-band--c1 .ah-chip { background: var(--surface); border-color: var(--c2); color: var(--ink); }

/* Trust strip — only confirmable facts ever go in here. */
.ah-trust { display: grid; gap: var(--sp-5); grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); list-style: none; margin: 0; padding: 0; }
.ah-trust li { display: grid; gap: var(--sp-2); max-width: none; font-weight: var(--w-medium); }
.ah-trust strong { font-size: var(--fs-md); font-weight: var(--w-heading); }

/* Contrast-pair — THIS SITE'S SIGNATURE SECTION. Two states set side by side,
   because the distinction between them changes the whole job. */
.ah-pair { display: grid; gap: var(--gap-grid); }
@media (min-width: 800px) { .ah-pair { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.ah-pair__side {
	border-radius: var(--r-lg); padding: var(--sp-7);
	border: 2px solid var(--line); background: var(--surface);
	display: grid; gap: var(--sp-3); align-content: start;
}
.ah-pair__side--a { border-color: var(--c1); background: var(--tint); }
.ah-pair__side--b { border-color: var(--c2); background: var(--surface); }
.ah-pair__tag { font-size: var(--fs-sm); font-weight: var(--w-bold); letter-spacing: var(--track-eyebrow); text-transform: uppercase; color: var(--accent-ink); }
.ah-pair__side--b .ah-pair__tag { color: var(--c2); }
.ah-pair__side h3 { margin: 0; }
.ah-pair__side p { margin: 0; max-width: none; }

/* Notice — a hazard band. Always this component, never a paragraph. */
.ah-notice {
	display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--sp-4);
	padding: var(--sp-6); border-radius: var(--r-lg);
	background: var(--danger-bg); border: 1px solid var(--danger);
	border-left: 6px solid var(--danger);
	color: var(--danger-ink);
}
.ah-notice__icon { width: 26px; height: 26px; border-radius: 999px; background: var(--danger); color: var(--on-danger); display: grid; place-items: center; font-weight: var(--w-heading); }
.ah-notice :where(h2, h3) { color: var(--danger-ink); margin-bottom: var(--sp-2); font-size: var(--fs-md); }
.ah-notice p { margin: 0; color: var(--danger-ink); max-width: none; }
.ah-notice--calm { background: var(--soft); border-color: var(--line-strong); border-left-color: var(--c1); color: var(--text); }
.ah-notice--calm :where(h2, h3), .ah-notice--calm p { color: var(--text); }
.ah-notice--calm .ah-notice__icon { background: var(--c1); color: var(--on-c1); }

/* Phone block — where a form would be on a lesser site. */
.ah-phone {
	display: grid; gap: var(--sp-5); justify-items: center; text-align: center;
	padding: var(--sp-8); border-radius: var(--r-lg);
	background: var(--surface); border: 2px solid var(--c1); box-shadow: var(--sh);
}
.ah-phone__num { font-size: var(--fs-phone); font-weight: var(--w-heading); color: var(--ink); text-decoration: none; font-variant-numeric: tabular-nums; }
.ah-phone__num:hover { color: var(--ink); }
.ah-phone p { margin: 0; color: var(--muted); }
.ah-band--c2 .ah-phone, .ah-band--c2-900 .ah-phone { background: var(--white-a07); border-color: var(--c1); }
.ah-band--c2 .ah-phone__num, .ah-band--c2-900 .ah-phone__num { color: var(--on-c2); }
.ah-band--c2 .ah-phone p, .ah-band--c2-900 .ah-phone p { color: var(--on-c2-muted); }

/* USP panel — the banded anti-Abzocke block. */
.ah-usp { display: grid; gap: var(--sp-5); padding: var(--sp-8); border-radius: var(--r-lg); background: var(--c2); color: var(--on-c2); }
.ah-usp :where(h2, h3) { color: var(--on-c2); }
.ah-usp p, .ah-usp li { color: var(--on-c2-muted); max-width: none; }
.ah-usp a:not(.ah-btn) { color: var(--link-on-c2); }
/* The panel paints its own --c2 fill and can sit on a LIGHT band — which is the whole point
   of it. The dark-surface focus ring is bound to `.ah-band--c2*`, so without this a focused
   link in here got the light-surface ring on a dark fill: measured 1.54:1. */
.ah-usp :where(a, button):focus-visible { outline-color: var(--focus-on-dark); }

/* FAQ accordion. Answers ship EXPANDED; theme.js collapses them. */
.ah-faq { display: grid; gap: var(--sp-3); }
.ah-faq__item { border: 1px solid var(--line); border-radius: var(--r); background: var(--surface); overflow: hidden; }
.ah-faq__item[data-open="true"] { border-color: var(--c1); }
.ah-faq__btn {
	width: 100%; text-align: left; display: flex; gap: var(--sp-4); align-items: center; justify-content: space-between;
	padding: var(--sp-5) var(--sp-6); background: none; border: 0; cursor: pointer;
	font: var(--w-bold) var(--fs-md)/1.35 var(--font); color: var(--ink);
}
.ah-faq__btn::after { content: ""; flex: 0 0 auto; width: 12px; height: 12px; border-right: 3px solid var(--accent-ink); border-bottom: 3px solid var(--accent-ink); transform: rotate(45deg) translateY(-3px); transition: transform .2s var(--ease); }
.ah-faq__item[data-open="true"] .ah-faq__btn::after { transform: rotate(225deg) translateY(-3px); }
.ah-faq__panel { padding: 0 var(--sp-6) var(--sp-6); }
.ah-faq__panel p:last-child { margin-bottom: 0; }

/* CTA band — the closing call. */
.ah-cta { display: grid; gap: var(--sp-5); justify-items: center; text-align: center; }
.ah-cta h2 { max-width: 22ch; }
.ah-cta p { margin: 0; }

/* Feature split — a single subject with its media, the zig-zag workhorse. */
.ah-feature { display: grid; gap: var(--sp-7); align-items: center; }
@media (min-width: 860px) {
	.ah-feature { grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: var(--sp-9); }
	.ah-feature--rev > :first-child { order: 2; }
}
.ah-feature__body > :last-child { margin-bottom: 0; }
.ah-feature figure { margin: 0; }
.ah-feature figcaption { margin-top: var(--sp-3); font-size: var(--fs-sm); color: var(--muted); }
.ah-band--c2 .ah-feature figcaption, .ah-band--c2-900 .ah-feature figcaption { color: var(--on-c2-muted); }

/* Prose lead — an intro block. Constrained measure, never full-width text. */
.ah-prose { max-width: var(--measure); }
.ah-prose > :last-child { margin-bottom: 0; }
.ah-prose--center { margin-inline: auto; text-align: center; }

/* Stat rail — qualitative facts only. There is never a figure about price or time here. */
.ah-rail { display: grid; gap: var(--gap-grid); grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); list-style: none; margin: 0; padding: 0; }
.ah-rail li { display: grid; gap: var(--sp-2); padding: var(--sp-5) var(--sp-6); border-left: 4px solid var(--c1); background: var(--surface); border-radius: 0 var(--r) var(--r) 0; max-width: none; }
.ah-rail strong { font-size: var(--fs-md); font-weight: var(--w-heading); color: var(--ink); }
.ah-rail span { font-size: var(--fs-sm); color: var(--muted); }
.ah-band--c2 .ah-rail li, .ah-band--c2-900 .ah-rail li { background: var(--white-a07); }
.ah-band--c2 .ah-rail strong, .ah-band--c2-900 .ah-rail strong { color: var(--on-c2); }
.ah-band--c2 .ah-rail span, .ah-band--c2-900 .ah-rail span { color: var(--on-c2-muted); }

/* Glossar list — a definition list, styled as a readable reference. */
.ah-gloss { display: grid; gap: var(--sp-5); margin: 0; }
.ah-gloss__row { display: grid; gap: var(--sp-2); padding-bottom: var(--sp-5); border-bottom: 1px solid var(--line); }
.ah-gloss__row:last-child { border-bottom: 0; padding-bottom: 0; }
.ah-gloss dt { font-size: var(--fs-md); font-weight: var(--w-heading); color: var(--ink); }
.ah-gloss dd { margin: 0; color: var(--muted); max-width: var(--measure); }

/* Hero — the band the H1 lives in. Variants are layout-only; the tokens never change. */
.ah-hero { display: grid; gap: var(--sp-6); }
.ah-hero__bar { display: inline-flex; align-items: center; gap: var(--sp-3); padding: var(--sp-3) var(--sp-5); border-radius: 999px; background: var(--c2); color: var(--on-c2); font-size: var(--fs-sm); font-weight: var(--w-bold); width: fit-content; }
.ah-band--c2 .ah-hero__bar, .ah-band--c2-900 .ah-hero__bar { background: var(--c1); color: var(--on-c1); }
.ah-hero h1 { margin: 0; }
.ah-hero__actions { display: flex; flex-wrap: wrap; gap: var(--sp-4); align-items: center; }
.ah-hero__note { font-size: var(--fs-sm); color: var(--muted); margin: 0; }
.ah-band--c1 .ah-hero__note { color: var(--on-c1-muted); }
.ah-band--c2 .ah-hero__note, .ah-band--c2-900 .ah-hero__note { color: var(--on-c2-muted); }
@media (min-width: 900px) {
	.ah-hero--split { grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: var(--sp-9); align-items: center; }
	.ah-hero--wide { max-width: 46ch; }
}

/* Breadcrumb band — its own strip above the hero, never inside a coloured band. */
.ah-crumbs-band { background: var(--surface); border-bottom: 1px solid var(--line); }
.ah-crumbs-band > .ah-in { width: min(100% - 2 * var(--sp-5), var(--w-container, 1180px)); margin-inline: auto; }
.ah-crumbs ol { display: flex; flex-wrap: wrap; gap: var(--sp-2); list-style: none; margin: 0; padding: var(--sp-3) 0; }
.ah-crumbs li { max-width: none; display: flex; align-items: center; gap: var(--sp-2); }
.ah-crumbs li + li::before { content: "›"; color: var(--muted); }
.ah-crumbs [aria-current="page"] { color: var(--ink); font-weight: var(--w-medium); }

/* Contextual links — the "what next" for a reader who did not phone. */
.ah-related__h { font-size: var(--fs-h3); margin-bottom: var(--sp-4); }
.ah-related ul { display: grid; gap: var(--sp-3); grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); list-style: none; margin: 0; padding: 0; }
.ah-related li { max-width: none; }
.ah-related a { display: flex; align-items: center; min-height: 44px; }
.ah-related a { font-weight: var(--w-medium); }

/* ------------------------------------------------------------------ media */

.ah-fig { margin: 0; }
.ah-fig img, .ah-feature__img, .ah-hero__img {
	width: 100%; border-radius: var(--r-lg); box-shadow: var(--sh);
	/* The intrinsic ratio differs between the 16:9 heroes and the 11:8 library shots; cover
	   keeps a band's two columns the same height without distorting either. */
	object-fit: cover;
}
.ah-fig figcaption { margin-top: var(--sp-3); font-size: var(--fs-sm); color: var(--muted); }
.ah-band--c1 .ah-fig figcaption { color: var(--on-c1-muted); }
.ah-band--c2 .ah-fig figcaption, .ah-band--c2-900 .ah-fig figcaption { color: var(--on-c2-muted); }

/* Hero with media — farbblock-duo's hero is copy on one side, a photo on the other. */
.ah-hero__copy > :last-child { margin-bottom: 0; }
.ah-hero__media img { aspect-ratio: 16 / 10; }
@media (min-width: 900px) {
	.ah-hero--split { grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: var(--sp-9); align-items: center; }
}

/* Gallery — the reference's photo band. Three approved photos, each with its own caption;
   the caption is what a screen reader and a skim-reader both get, so it is never decorative. */
.ah-gallery { display: grid; gap: var(--gap-grid); grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); list-style: none; margin: 0; padding: 0; }
.ah-gallery__item { display: grid; gap: var(--sp-3); max-width: none; }
.ah-gallery__item img { aspect-ratio: 4 / 3; transition: transform .3s var(--ease); }
.ah-gallery__item:hover img { transform: scale(1.02); }
.ah-gallery__cap { font-size: var(--fs-sm); color: var(--muted); }
.ah-band--c1 .ah-gallery__cap { color: var(--on-c1-muted); }
.ah-band--c2 .ah-gallery__cap, .ah-band--c2-900 .ah-gallery__cap { color: var(--on-c2-muted); }

.ah-phone__note { font-size: var(--fs-sm); color: var(--muted); margin: 0; }
.ah-band--c2 .ah-phone__note, .ah-band--c2-900 .ah-phone__note { color: var(--on-c2-muted); }

/* Provisional copy marker — Phase 3 ships structure; the German is signed off separately.
   Deliberately visible: unmarked placeholder text is how a draft sentence reaches production. */
.ah-draft { border-left: 3px dashed var(--line-strong); padding-left: var(--sp-4); }
.ah-draft::before { content: "Entwurfstext"; display: block; font-size: var(--fs-xs); letter-spacing: var(--track-eyebrow); text-transform: uppercase; color: var(--muted); margin-bottom: var(--sp-2); }

/* Breadcrumbs. --muted is only gated against the light surfaces; on a coloured band the
   non-link trail text measured 3.19:1 (amber) and 1.90:1 (Hafenblau). In this full-bleed-band
   idiom a hero-top breadcrumb lands inside a coloured band routinely, so each band restates it. */
.ah-crumbs { font-size: var(--fs-sm); color: var(--muted); padding-block: var(--sp-4) 0; }
.ah-crumbs a { color: var(--link); }
.ah-crumbs a:hover { color: var(--link-hover); }
.ah-band--c1 .ah-crumbs { color: var(--on-c1-muted); }
.ah-band--c1 .ah-crumbs a { color: var(--link-on-c1); }
.ah-band--c2 .ah-crumbs, .ah-band--c2-900 .ah-crumbs { color: var(--on-c2-muted); }
.ah-band--c2 .ah-crumbs a, .ah-band--c2-900 .ah-crumbs a { color: var(--link-on-c2); }
.ah-band--tint .ah-crumbs { color: var(--accent-ink); }

/* Media placeholder — used where no honest photo exists. Never a fake photo. */
.ah-imgph {
	min-width: 0; overflow-wrap: break-word;
	display: grid; place-items: center; gap: var(--sp-2); text-align: center;
	aspect-ratio: 16 / 10; border-radius: var(--r-lg);
	background: repeating-linear-gradient(45deg, var(--soft) 0 12px, var(--tint) 12px 24px);
	border: 1px dashed var(--line-strong); color: var(--muted); font-size: var(--fs-sm); padding: var(--sp-5);
}

/* ------------------------------------------------------------- animations */
/* Opt-in: elements are visible by default and only start hidden once theme.js
   has confirmed both JS and a motion-welcoming preference. */

.ah-anim [data-ah-reveal] { opacity: 0; transform: translateY(14px); transition: opacity .5s var(--ease), transform .5s var(--ease); }
.ah-anim [data-ah-reveal].is-in { opacity: 1; transform: none; }
.ah-anim [data-ah-reveal][data-delay="1"] { transition-delay: .07s; }
.ah-anim [data-ah-reveal][data-delay="2"] { transition-delay: .14s; }
.ah-anim [data-ah-reveal][data-delay="3"] { transition-delay: .21s; }

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
	[data-ah-reveal] { opacity: 1 !important; transform: none !important; }
}

/* ------------------------------------------------------------------ print */

@media print {
	.ah-head, .ah-callbar, .ah-totop, .ah-drawer { display: none !important; }
	body { background: #fff; color: #000; }
	a[href^="tel:"]::after { content: " (" attr(href) ")"; }
}

/* Icon-list items carry an action plus the reason it matters; the reason is secondary. */
.ah-iconlist__sub { display: block; margin-top: var(--sp-1); font-size: var(--fs-sm); color: var(--muted); font-weight: var(--w-body); }
.ah-band--c1 .ah-iconlist__sub { color: var(--on-c1-muted); }
.ah-band--c2 .ah-iconlist__sub, .ah-band--c2-900 .ah-iconlist__sub { color: var(--on-c2-muted); }
.ah-iconlist li a { min-height: 0; }