/* ==========================================================================
   Sanora GmbH — Design System "Bande Dessinée"
   Ligne claire als Interface: gerahmte Panels, Gutters, Sprechblasen.
   Base: Archivo (Titel + Text) · Shantell Sans (Lettering) · Light + Dark
   Tokens: primitive -> semantic. Never use raw hex in components.
   ========================================================================== */

/* --- Reset ---------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important; animation-iteration-count: 1 !important;
    transition-duration: .01ms !important; scroll-behavior: auto !important;
  }
}
img, svg, video { display: block; max-width: 100%; height: auto; }
button, input, select, textarea { font: inherit; color: inherit; }
a { color: inherit; }

/* --- Tokens: light -------------------------------------------------------- */
:root {
  /* Albumpapier: der Grund, auf dem die Panels liegen. */
  --bg:            #EDF2F7;
  --bg-soft:       #E1EAF3;
  --bg-inverse:    #0B1220;
  --surface:       #FFFFFF;   /* Panel-Innenraum */
  --surface-2:     #F6F9FC;

  /* Tusche. Die Kontur ist das tragende Material dieser Seite. */
  --ink:           #10171F;
  --ink-w:         3px;       /* Panelkontur */
  --ink-w-sm:      2px;       /* kleine Elemente */

  --fg:            #10171F;
  --fg-muted:      #4A5A6F;   /* 7.0:1 auf --surface */
  --fg-inverse:    #EAF1F8;
  --fg-inverse-muted: #A3B4C9;

  /* Markenblau = PANTONE 2154 C aus dem Logo-Master-PDF (Lab 27.45/-4/-41).
     10.0:1 gegen Weiß → WCAG AAA. Logo bezieht die Farbe per currentColor. */
  --brand:         #00437B;
  --brand-strong:  #00325C;
  --brand-soft:    #DCE9F5;
  --brand-ring:    #1565A8;
  --brand-on-ink:  #7FC4F5;
  --brand-solid:   #00437B;   /* Panelgrund, trägt immer weißen Text */

  /* Flächenfarben direkt aus den Illustrationen. */
  --sky:           #7FC4F5;
  --sky-deep:      #2E86C8;
  --brick:         #B44A22;
  --sun:           #F7C948;
  --lawn:          #6E9E5B;

  --accent:        #C2410C;   /* Signalorange – 5.1:1 auf Weiß */
  --accent-strong: #9A3412;
  --accent-soft:   #FBE3D6;

  --border:        #10171F;
  --border-strong: #10171F;
  --rule:          #BFCEDD;   /* zarte Trennlinie, wo keine Kontur hingehört */

  --success:       #1B6B3A;
  --danger:        #B3261E;

  /* Halftone */
  --dot:           rgb(16 23 31 / .16);
  --dot-brand:     rgb(0 67 123 / .30);

  /* elevation – im Comic sparsam: Panels liegen flach auf dem Papier. */
  --shadow-1: 0 1px 2px rgb(16 23 31 / .06);
  --shadow-2: 0 6px 16px rgb(16 23 31 / .10);
  --shadow-3: 0 18px 44px rgb(16 23 31 / .16);

  /* radius – Panels fast eckig, Blasen rund. */
  --r-sm: 4px; --r-md: 6px; --r-lg: 10px; --r-xl: 16px; --r-bubble: 22px; --r-full: 999px;

  /* spacing (4/8 rhythm) */
  --s-1: 4px;  --s-2: 8px;  --s-3: 12px; --s-4: 16px; --s-5: 24px;
  --s-6: 32px; --s-7: 48px; --s-8: 64px; --s-9: 96px; --s-10: 128px;
  --gutter: 14px;             /* Comic-Zwischenraum zwischen Panels */

  /* type scale */
  --t-xs: .8125rem; --t-sm: .9375rem; --t-base: 1.0625rem; --t-lg: 1.1875rem;
  --t-xl: 1.375rem; --t-2xl: 1.75rem;
  --t-3xl: clamp(1.9rem, 1.3rem + 2.2vw, 2.6rem);
  --t-4xl: clamp(1.85rem, 1.15rem + 3.3vw, 3.2rem);
  --t-5xl: clamp(2.15rem, 1.15rem + 4.6vw, 4.25rem);

  /* motion */
  --e-out: cubic-bezier(.16,1,.3,1);
  --e-pop: cubic-bezier(.34,1.56,.64,1);
  --d-fast: 140ms; --d-base: 240ms; --d-slow: 420ms;

  /* layout */
  --wrap: 1240px;
  --wrap-narrow: 760px;
  --nav-h: 74px;

  --z-nav: 100; --z-overlay: 200; --z-modal: 300;

  color-scheme: light;
}

/* --- Tokens: dark ---------------------------------------------------------
   Nachtausgabe des Albums: das Papier wird schwarz, die Tusche weiß.
   Die Illustrationen bleiben helle Fenster in dunklen Rahmen.              */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { color-scheme: dark; }
}
:root[data-theme="dark"] { color-scheme: dark; }

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg:            #0A1018;
    --bg-soft:       #111A26;
    --bg-inverse:    #05090F;
    --surface:       #141F2D;
    --surface-2:     #1A2637;

    --ink:           #DCE7F2;
    --fg:            #E9F0F8;
    --fg-muted:      #A3B4C9;
    --fg-inverse:    #E9F0F8;
    --fg-inverse-muted: #A3B4C9;

    --brand:         #7FC4F5;
    --brand-strong:  #A9D8FB;
    --brand-soft:    #10293D;
    --brand-ring:    #7FC4F5;
    --brand-on-ink:  #7FC4F5;
    --brand-solid:   #0A4F8F;

    --sky:           #2E86C8;
    --sky-deep:      #7FC4F5;
    --brick:         #D0693C;
    --sun:           #F7C948;
    --lawn:          #86B872;

    --accent:        #FF8A4C;
    --accent-strong: #FFB185;
    --accent-soft:   #35190D;

    --border:        #DCE7F2;
    --border-strong: #DCE7F2;
    --rule:          #2C3B4F;

    --success:       #56D48A;
    --danger:        #FF8A80;

    --dot:           rgb(220 231 242 / .16);
    --dot-brand:     rgb(127 196 245 / .26);

    --shadow-1: 0 1px 2px rgb(0 0 0 / .5);
    --shadow-2: 0 6px 18px rgb(0 0 0 / .55);
    --shadow-3: 0 20px 48px rgb(0 0 0 / .62);
  }
}
:root[data-theme="dark"] {
  --bg: #0A1018; --bg-soft: #111A26; --bg-inverse: #05090F;
  --surface: #141F2D; --surface-2: #1A2637;
  --ink: #DCE7F2;
  --fg: #E9F0F8; --fg-muted: #A3B4C9; --fg-inverse: #E9F0F8; --fg-inverse-muted: #A3B4C9;
  --brand: #7FC4F5; --brand-strong: #A9D8FB; --brand-soft: #10293D;
  --brand-ring: #7FC4F5; --brand-on-ink: #7FC4F5; --brand-solid: #0A4F8F;
  --sky: #2E86C8; --sky-deep: #7FC4F5; --brick: #D0693C; --sun: #F7C948; --lawn: #86B872;
  --accent: #FF8A4C; --accent-strong: #FFB185; --accent-soft: #35190D;
  --border: #DCE7F2; --border-strong: #DCE7F2; --rule: #2C3B4F;
  --success: #56D48A; --danger: #FF8A80;
  --dot: rgb(220 231 242 / .16); --dot-brand: rgb(127 196 245 / .26);
  --shadow-1: 0 1px 2px rgb(0 0 0 / .5);
  --shadow-2: 0 6px 18px rgb(0 0 0 / .55);
  --shadow-3: 0 20px 48px rgb(0 0 0 / .62);
}

/* --- Base ----------------------------------------------------------------- */
body {
  font-family: "Archivo", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: var(--t-base);
  line-height: 1.65;
  color: var(--fg);
  background: var(--bg);
  /* Das Papier hat ein Raster. Sehr leise, aber es ist da. */
  background-image: radial-gradient(var(--dot) 1.1px, transparent 1.2px);
  background-size: 22px 22px;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}

h1, h2, h3, h4 {
  font-family: "Archivo", system-ui, sans-serif;
  font-variation-settings: "wdth" 118;
  font-weight: 800;
  line-height: 1.02;
  letter-spacing: -.032em;
  text-wrap: balance;
  color: var(--fg);
}
h1 { font-size: var(--t-5xl); font-variation-settings: "wdth" 122; font-weight: 900; }

/* „Kesseltausch", „Anschreiben", „Kundendiensttechniker": deutsche Komposita
   sind laenger als die Spalte auf einem 390er-Display. Schmalere Breitenachse
   und echte Silbentrennung, statt das Wort am Panelrand abzuschneiden. */
@media (max-width: 560px) {
  h1, h2 { font-variation-settings: "wdth" 104; hyphens: auto; }
}
h1, h2, h3 { overflow-wrap: break-word; }
h2 { font-size: var(--t-4xl); font-weight: 900; }
h3 { font-size: var(--t-xl); letter-spacing: -.02em; }
h4 { font-size: var(--t-base); letter-spacing: -.01em; }
p  { text-wrap: pretty; }

/* Browser-Oberflächen gehören auch zum Entwurf. */
::selection { background: var(--sun); color: #10171F; }
:root[data-theme="dark"] ::selection { background: var(--brand); color: #05090F; }
* { scrollbar-color: var(--fg-muted) transparent; scrollbar-width: thin; }
::-webkit-scrollbar { width: 12px; height: 12px; }
::-webkit-scrollbar-thumb { background: var(--fg-muted); border: 3px solid var(--bg); border-radius: 99px; }
::-webkit-scrollbar-track { background: transparent; }
:focus-visible {
  outline: var(--ink-w) solid var(--accent);
  outline-offset: 2px;
  border-radius: 2px;
}
a { text-underline-offset: .18em; text-decoration-thickness: .08em; }

.skip-link {
  position: absolute; left: var(--s-4); top: -100px; z-index: var(--z-modal);
  background: var(--ink); color: var(--surface); padding: var(--s-3) var(--s-5);
  border-radius: var(--r-sm); font-weight: 700;
  transition: top var(--d-fast) var(--e-out);
}
.skip-link:focus { top: var(--s-4); }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* --- Layout --------------------------------------------------------------- */
.wrap { width: min(100% - 2 * var(--s-5), var(--wrap)); margin-inline: auto; }
.section { padding-block: var(--s-8); }
.section--soft { background: var(--bg-soft); }
.section--ink { background: #10171F; color: #EAF1F8; }
.section--ink h2, .section--ink h3 { color: #EAF1F8; }

.head { max-width: 62ch; margin-bottom: var(--s-7); }
.lead { font-size: var(--t-lg); color: var(--fg-muted); margin-top: var(--s-4); max-width: 60ch; }
.muted { color: var(--fg-muted); }

/* ==========================================================================
   COMIC-PRIMITIVE
   ========================================================================== */

/* Panel — der Grundbaustein. Ein Rahmen aus Tusche, innen Papier. */
.panel {
  background: var(--surface);
  border: var(--ink-w) solid var(--ink);
  border-radius: var(--r-sm);
  padding: var(--s-6);
  position: relative;
}

/* Sprechblase. Ersetzt die Eyebrow: sie spricht, statt zu etikettieren. */
.bubble {
  position: relative;
  display: inline-block;
  background: var(--surface);
  border: var(--ink-w) solid var(--ink);
  border-radius: var(--r-bubble);
  padding: var(--s-3) var(--s-5);
  font-family: "Shantell Sans", "Archivo", cursive;
  font-weight: 600;
  font-size: var(--t-sm);
  line-height: 1.4;
  color: var(--fg);
  max-width: 46ch;
}
/* Zipfel: zwei Dreiecke, das äußere trägt die Kontur. */
.bubble::before,
.bubble::after {
  content: ""; position: absolute; width: 0; height: 0; border-style: solid;
}
.bubble::before {
  left: 30px; bottom: calc(-1 * var(--ink-w) - 18px);
  border-width: 20px 15px 0 0;
  border-color: var(--ink) transparent transparent transparent;
}
.bubble::after {
  left: 34px; bottom: calc(-1 * var(--ink-w) - 11px);
  border-width: 14px 10px 0 0;
  border-color: var(--surface) transparent transparent transparent;
}
.bubble--right::before { left: auto; right: 30px; border-width: 20px 0 0 15px; }
.bubble--right::after  { left: auto; right: 34px; border-width: 14px 0 0 10px; }
.bubble--flat::before, .bubble--flat::after { display: none; }
.bubble--brand { background: var(--brand); color: #fff; }
.bubble--brand::after { border-top-color: var(--brand); }
.bubble--sun { background: var(--sun); color: #10171F; }
.bubble--sun::after { border-top-color: var(--sun); }

/* Sound-Word: das laute Lettering im Comic. Sparsam einsetzen. */
.sound {
  font-family: "Shantell Sans", cursive;
  font-weight: 700;
  font-size: var(--t-2xl);
  letter-spacing: -.02em;
  color: var(--accent);
  transform: rotate(-4deg);
  display: inline-block;
}

/* Halftone-Fläche */
.halftone {
  background-image: radial-gradient(var(--dot-brand) 2.2px, transparent 2.4px);
  background-size: 9px 9px;
}

/* Eyebrow bleibt als Klasse bestehen (Fremdseiten), rendert aber als Blase. */
.eyebrow {
  display: inline-block;
  font-family: "Shantell Sans", cursive;
  font-weight: 600;
  font-size: var(--t-sm);
  letter-spacing: 0;
  text-transform: none;
  color: #10171F;
  background: var(--sun);
  border: var(--ink-w-sm) solid var(--ink);
  border-radius: var(--r-full);
  padding: 3px var(--s-4);
  margin-bottom: var(--s-4);
}

/* --- Buttons -------------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s-2);
  min-height: 52px; padding: 0 var(--s-6);
  font-weight: 800; font-size: var(--t-sm); letter-spacing: -.01em;
  border: var(--ink-w) solid var(--ink);
  border-radius: var(--r-full);
  background: var(--surface); color: var(--fg);
  text-decoration: none; cursor: pointer;
  transition: transform var(--d-fast) var(--e-out), background var(--d-fast) var(--e-out), color var(--d-fast) var(--e-out);
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }
.btn--primary { background: var(--accent); color: #fff; border-color: var(--ink); }
.btn--primary:hover { background: var(--accent-strong); }
:root[data-theme="dark"] .btn--primary { color: #240D02; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .btn--primary { color: #240D02; }
}
.btn--brand { background: var(--brand); color: #fff; }
.btn--brand:hover { background: var(--brand-strong); }
:root[data-theme="dark"] .btn--brand { color: #05171F; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .btn--brand { color: #05171F; }
}
.btn--ghost { background: transparent; }
.btn--ghost:hover { background: var(--surface); }
.btn--sm { min-height: 44px; padding: 0 var(--s-5); font-size: var(--t-xs); }
.btn-row { display: flex; flex-wrap: wrap; gap: var(--s-3); margin-top: var(--s-6); }

/* --- Navigation ----------------------------------------------------------- */
.nav {
  position: sticky; top: 0; z-index: var(--z-nav);
  background: var(--surface);
  border-bottom: var(--ink-w) solid var(--ink);
}
.nav[data-scrolled="true"] { box-shadow: var(--shadow-2); }
.nav__inner {
  width: min(100% - 2 * var(--s-5), var(--wrap)); margin-inline: auto;
  min-height: var(--nav-h);
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-5);
}
.logo {
  display: flex; flex-direction: column; gap: 2px;
  text-decoration: none; color: var(--brand); flex: none;
}
.logo__wordmark { height: 26px; width: auto; flex: none; }
.logo__sub {
  font-family: "Shantell Sans", cursive;
  font-size: 11px; font-weight: 600; letter-spacing: .02em; color: var(--fg-muted);
}
.footer .logo { color: var(--brand-on-ink); }
.footer .logo__sub { color: var(--fg-inverse-muted); }

.nav__links { display: none; align-items: center; gap: var(--s-1); list-style: none; padding: 0; }
.nav__link {
  display: inline-flex; align-items: center; min-height: 42px; padding: 0 var(--s-4);
  font-size: var(--t-sm); font-weight: 600; color: var(--fg-muted);
  text-decoration: none; border-radius: var(--r-full);
  border: var(--ink-w-sm) solid transparent;
  transition: color var(--d-fast) var(--e-out), border-color var(--d-fast) var(--e-out);
}
.nav__link:hover { color: var(--fg); border-color: var(--ink); }
.nav__link[aria-current="page"] { color: #10171F; border-color: var(--ink); background: var(--sun); }
.nav__actions { display: flex; align-items: center; gap: var(--s-2); }
.nav__cta { display: none; }

.icon-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; flex: none;
  border: var(--ink-w-sm) solid var(--ink); border-radius: var(--r-full);
  background: var(--surface); color: var(--fg); cursor: pointer;
  transition: background var(--d-fast) var(--e-out), transform var(--d-fast) var(--e-out);
}
.icon-btn:hover { background: var(--sun); color: #10171F; transform: translateY(-2px); }
.icon-btn__moon { display: none; }
:root[data-theme="dark"] .icon-btn__sun { display: none; }
:root[data-theme="dark"] .icon-btn__moon { display: block; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .icon-btn__sun { display: none; }
  :root:not([data-theme="light"]) .icon-btn__moon { display: block; }
}
.nav__burger { display: inline-flex; }

.drawer {
  position: fixed; inset: var(--nav-h) 0 auto 0; z-index: var(--z-overlay);
  background: var(--surface);
  border-bottom: var(--ink-w) solid var(--ink);
  padding: var(--s-4) var(--s-5) var(--s-6);
  display: grid; gap: var(--s-1);
  transform: translateY(-12px); opacity: 0; visibility: hidden;
  transition: transform var(--d-base) var(--e-out), opacity var(--d-base) var(--e-out), visibility var(--d-base);
  max-height: calc(100dvh - var(--nav-h)); overflow-y: auto;
}
.drawer[data-open="true"] { transform: translateY(0); opacity: 1; visibility: visible; }
.drawer a {
  display: flex; align-items: center; min-height: 52px; padding: 0 var(--s-3);
  font-weight: 700; text-decoration: none;
  border-bottom: var(--ink-w-sm) solid var(--rule);
}
.drawer a:hover { color: var(--accent); }
.drawer .btn { margin-top: var(--s-4); border-bottom: var(--ink-w) solid var(--ink); }

/* ==========================================================================
   HERO — das Eröffnungspanel
   ========================================================================== */
.hero { padding-block: var(--s-5) var(--s-7); }
.hero__inner {
  border: var(--ink-w) solid var(--ink);
  border-radius: var(--r-md);
  background: var(--surface);
  overflow: hidden;
  display: grid;
  position: relative;
}
.hero__text { padding: var(--s-7) var(--s-6) var(--s-6); display: grid; gap: var(--s-6); }
.hero__bubble { margin-bottom: var(--s-5); }
.hero h1 { margin-top: 0; }
/* Der Schlüsselbegriff bekommt eine Marker-Auszeichnung, kein Farbverlauf. */
.hero h1 mark {
  background: var(--sun);
  color: #10171F;
  padding: 0 .12em;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}
.hero__lead { margin-top: var(--s-5); font-size: var(--t-lg); color: var(--fg-muted); max-width: 46ch; }
.hero .btn-row { margin-top: var(--s-6); }
.hero__trust {
  margin-top: var(--s-6); padding: 0; list-style: none;
  display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-4);
}
.hero__trust li {
  display: inline-flex; align-items: center; gap: var(--s-2);
  font-size: var(--t-xs); font-weight: 700; color: var(--fg);
  border: var(--ink-w-sm) solid var(--ink); border-radius: var(--r-full);
  padding: var(--s-1) var(--s-3);
}
.hero__trust svg { color: var(--accent); flex: none; }

/* Bildhälfte: randlos bis an die Panelkontur, innen von ihr getrennt. */
.hero__art {
  position: relative; margin: 0;
  border-top: var(--ink-w) solid var(--ink);
  background: var(--sky);
  height: 260px;
  overflow: hidden;
}
.hero__art img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 44%; }
.hero__art figcaption {
  position: absolute; left: var(--s-4); bottom: var(--s-4);
  background: var(--surface); color: var(--fg);
  border: var(--ink-w-sm) solid var(--ink); border-radius: var(--r-full);
  font-family: "Shantell Sans", cursive; font-weight: 600; font-size: var(--t-xs);
  padding: 2px var(--s-3);
}
.hero__aside { align-self: end; }

/* Kontaktkarte im Hero (rechte Spalte auf großen Schirmen) */
.hero__card {
  border-top: var(--ink-w) solid var(--ink);
  background: var(--brand-solid);
  color: #fff;
  padding: var(--s-6);
}
/* Auf eingefärbten Panels muss der Ghost-Button hell werden. */
.hero__card .btn--ghost, .section--ink .btn--ghost, .frame--splash .btn--ghost {
  color: #fff; border-color: #fff; background: transparent;
}
.hero__card .btn--ghost:hover, .section--ink .btn--ghost:hover, .frame--splash .btn--ghost:hover {
  background: #fff; color: var(--brand-solid);
}
.hero__card .btn--primary { border-color: #fff; }
.hero__card h2 { font-size: var(--t-xl); color: #fff; }
.hero__card p { color: #CFE4F6; font-size: var(--t-sm); margin-top: var(--s-2); }
.hero__stats { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--s-3); margin-top: var(--s-5); }
.hero__stat {
  background: rgb(255 255 255 / .1);
  border: var(--ink-w-sm) solid rgb(255 255 255 / .35);
  border-radius: var(--r-sm); padding: var(--s-3);
}
.hero__stat dt { font-size: var(--t-xs); color: #CFE4F6; font-weight: 600; }
.hero__stat dd { margin: 2px 0 0; font-weight: 800; color: #fff; }
.hero__eyebrow { color: var(--fg); }

/* ==========================================================================
   GUTTER-STREIFEN (ehem. Trustbar) — vier Fakten zwischen zwei Tuschelinien
   ========================================================================== */
.trustbar {
  border-block: var(--ink-w) solid var(--ink);
  background: var(--surface);
}
.trustbar__inner {
  display: grid; grid-template-columns: 1fr; gap: 0;
}
.trustbar__item {
  display: flex; gap: var(--s-3); align-items: flex-start;
  padding: var(--s-4) var(--s-2);
  border-bottom: var(--ink-w-sm) solid var(--rule);
}
.trustbar__item:last-child { border-bottom: 0; }
.trustbar__item svg { color: var(--accent); flex: none; margin-top: 3px; }
.trustbar__item strong { display: block; font-size: var(--t-sm); font-weight: 800; }
.trustbar__item span { display: block; font-size: var(--t-xs); color: var(--fg-muted); line-height: 1.5; }

/* ==========================================================================
   PANEL-RASTER — die Leistungen als Comicseite, nicht als Kartenreihe
   ========================================================================== */
.board {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--gutter);
}
.frame {
  position: relative;
  display: flex; flex-direction: column;
  background: var(--surface);
  border: var(--ink-w) solid var(--ink);
  border-radius: var(--r-sm);
  padding: var(--s-5);
  transition: transform var(--d-base) var(--e-out);
}
.frame:hover { transform: translate(-2px, -3px); }
.frame__icon {
  width: 46px; height: 46px; flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  border: var(--ink-w-sm) solid var(--ink); border-radius: var(--r-full);
  background: var(--sun); color: #10171F;
  margin-bottom: var(--s-4);
}
.frame h3 { margin-bottom: var(--s-2); }
.frame p { font-size: var(--t-sm); color: var(--fg-muted); }
.frame__link {
  margin-top: auto; padding-top: var(--s-4);
  display: inline-flex; align-items: center; gap: var(--s-2);
  font-weight: 800; font-size: var(--t-sm); color: var(--fg); text-decoration: none;
  align-self: flex-start;
  border-bottom: var(--ink-w-sm) solid var(--accent);
}
.frame__link svg { transition: transform var(--d-fast) var(--e-out); }
.frame__link:hover svg { transform: translateX(4px); }

/* Splash-Panel: das große Feld oben links, Navy mit Raster. */
.frame--splash {
  background: var(--brand-solid);
  color: #fff;
  background-image: radial-gradient(rgb(255 255 255 / .10) 1.8px, transparent 2px);
  background-size: 13px 13px;
}
.frame--splash h3 { color: #fff; font-size: var(--t-3xl); }
.frame--splash p { color: #D3E6F7; font-size: var(--t-base); }
.frame--splash .frame__icon { background: var(--sun); }
.frame--splash .frame__link { color: #fff; border-bottom-color: var(--sun); }
.frame--sun { background: var(--sun); color: #10171F; }
.frame--sun h3, .frame--sun p, .frame--sun .frame__link { color: #10171F; }
.frame--sun p { color: #33301F; }
.frame--sun .frame__icon { background: var(--surface); }

/* Legacy-Kartenklassen der Unterseiten erben das Panel. */
.card {
  background: var(--surface);
  border: var(--ink-w) solid var(--ink);
  border-radius: var(--r-sm);
  padding: var(--s-5);
  display: flex; flex-direction: column;
  transition: transform var(--d-base) var(--e-out);
}
.card:hover { transform: translate(-2px, -3px); }
.card__icon {
  width: 46px; height: 46px;
  display: inline-flex; align-items: center; justify-content: center;
  border: var(--ink-w-sm) solid var(--ink); border-radius: var(--r-full);
  background: var(--sun); color: #10171F; margin-bottom: var(--s-4);
}
.card--warm .card__icon { background: var(--accent); color: #fff; }
.card__kicker {
  font-family: "Shantell Sans", cursive; font-size: var(--t-xs);
  font-weight: 600; text-transform: none; letter-spacing: 0; color: var(--fg-muted);
}
.card h3 { margin-top: var(--s-1); }
.card p { margin-top: var(--s-3); font-size: var(--t-sm); color: var(--fg-muted); }
.card__link {
  margin-top: auto; padding-top: var(--s-4); align-self: flex-start;
  display: inline-flex; align-items: center; gap: var(--s-2);
  font-weight: 800; font-size: var(--t-sm); text-decoration: none;
  border-bottom: var(--ink-w-sm) solid var(--accent);
}
.card__link svg { transition: transform var(--d-fast) var(--e-out); }
.card__link:hover svg { transform: translateX(4px); }
.grid { display: grid; gap: var(--gutter); }
.grid--3, .grid--2 { grid-template-columns: 1fr; }

/* ==========================================================================
   STRIP — der Ablauf als dreiteiliger Comicstrip
   ========================================================================== */
.steps { display: grid; gap: var(--gutter); counter-reset: step; }
.step {
  counter-increment: step;
  position: relative;
  background: var(--surface);
  border: var(--ink-w) solid var(--ink);
  border-radius: var(--r-sm);
  padding: var(--s-6) var(--s-5) var(--s-5);
}
.step::before {
  content: counter(step);
  position: absolute; top: calc(-1 * var(--ink-w)); left: calc(-1 * var(--ink-w));
  width: 46px; height: 46px;
  display: grid; place-items: center;
  font-family: "Archivo", sans-serif; font-weight: 900; font-size: var(--t-lg);
  font-variation-settings: "wdth" 110;
  background: var(--ink); color: var(--surface);
  border-radius: var(--r-sm) 0 var(--r-sm) 0;
}
.step h3 { margin-top: var(--s-4); }
.step p { margin-top: var(--s-2); font-size: var(--t-sm); color: var(--fg-muted); }
/* Verbindung zwischen den Panels: die Leserichtung des Strips. */
.step::after {
  content: ""; position: absolute; top: 50%; right: calc(-1 * var(--gutter) - 2px);
  width: var(--gutter); height: var(--ink-w-sm); background: var(--ink);
  display: none;
}

/* ==========================================================================
   SPLIT, CHECKLIST, PARTNER
   ========================================================================== */
.split { display: grid; gap: var(--s-7); align-items: start; }
.checklist { list-style: none; padding: 0; margin-top: var(--s-6); display: grid; gap: var(--s-4); }
.checklist li { display: flex; gap: var(--s-3); align-items: flex-start; font-size: var(--t-sm); }
.checklist svg { color: var(--accent); flex: none; margin-top: 3px; }
.checklist strong { display: block; color: var(--fg); font-weight: 800; }
.checklist span { color: var(--fg-muted); }
.section--ink .checklist strong { color: #EAF1F8; }
.section--ink .checklist span { color: #A3B4C9; }

.partners { display: flex; flex-wrap: wrap; gap: var(--s-3); }
.partner {
  display: inline-flex; flex-direction: column; gap: 0;
  border: var(--ink-w-sm) solid var(--ink); border-radius: var(--r-sm);
  padding: var(--s-3) var(--s-5);
  font-weight: 800; font-size: var(--t-sm); background: var(--surface);
}
.partner span { color: var(--fg-muted); font-weight: 500; font-size: var(--t-xs); }

/* ==========================================================================
   TEASER — Splash-Panel mit Bildhintergrund
   ========================================================================== */
.teaser {
  position: relative; overflow: hidden;
  border: var(--ink-w) solid var(--ink); border-radius: var(--r-md);
  background: var(--brand-solid);
  isolation: isolate;
}
.teaser__art { position: absolute; inset: 0; z-index: 0; margin: 0; }
.teaser__art img { width: 100%; height: 100%; object-fit: cover; object-position: 62% 56%; }
.teaser::before {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(96deg, rgb(10 16 24 / .96) 0%, rgb(10 16 24 / .90) 40%, rgb(10 16 24 / .55) 62%, rgb(10 16 24 / .08) 88%);
}
.teaser__inner { position: relative; z-index: 2; padding: var(--s-7) var(--s-6); max-width: 620px; }
.teaser h2 { color: #fff; }
.teaser p { color: #D6E2EE; margin-top: var(--s-4); }
.teaser .eyebrow { background: var(--sun); color: #10171F; }
.teaser .btn--ghost { color: #fff; border-color: #fff; }
.teaser .btn--ghost:hover { background: #fff; color: var(--ink); }

/* ==========================================================================
   EINBLICKE — Bildpanels
   ========================================================================== */
.shots { display: grid; gap: var(--gutter); grid-template-columns: 1fr; }
.shot { margin: 0; }
.shot img {
  width: 100%; aspect-ratio: 16 / 9; object-fit: cover;
  border: var(--ink-w) solid var(--ink); border-radius: var(--r-sm);
  background: var(--sky);
  transition: transform var(--d-base) var(--e-out);
}
.shot:hover img { transform: translate(-2px, -3px); }
.shot figcaption {
  margin-top: calc(-1 * var(--s-4));
  margin-left: var(--s-4);
  position: relative; z-index: 1;
  display: inline-flex; align-items: center; gap: var(--s-2);
  background: var(--surface); color: var(--fg);
  border: var(--ink-w-sm) solid var(--ink); border-radius: var(--r-full);
  padding: var(--s-1) var(--s-4);
  font-family: "Shantell Sans", cursive; font-weight: 600; font-size: var(--t-xs);
}
.shot figcaption svg { color: var(--accent); flex: none; }

.band { margin: 0 0 var(--s-7); }
.band img {
  width: 100%; aspect-ratio: 21 / 9; object-fit: cover;
  border: var(--ink-w) solid var(--ink); border-radius: var(--r-md);
  background: var(--sky);
}
.band figcaption {
  margin-top: var(--s-3);
  font-family: "Shantell Sans", cursive; font-size: var(--t-sm); color: var(--fg-muted);
}

/* ==========================================================================
   FORMULAR
   ========================================================================== */
.form { display: grid; gap: var(--s-5); }
.field { display: grid; gap: var(--s-2); }
.field label { font-size: var(--t-sm); font-weight: 800; }
.field .req { color: var(--accent); }
.field .hint {
  font-family: "Shantell Sans", cursive;
  font-size: var(--t-xs); color: var(--fg-muted);
}
.field input, .field textarea, .field select {
  width: 100%; min-height: 52px; padding: 0 var(--s-4);
  background: var(--surface); color: var(--fg);
  border: var(--ink-w-sm) solid var(--ink); border-radius: var(--r-sm);
  caret-color: var(--accent);
  transition: border-color var(--d-fast) var(--e-out), box-shadow var(--d-fast) var(--e-out);
}
.field input::placeholder, .field textarea::placeholder { color: var(--fg-muted); }
.field textarea { min-height: 138px; padding-top: var(--s-3); resize: vertical; line-height: 1.6; }
.field select { appearance: none; padding-right: var(--s-8); cursor: pointer;
  background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position: calc(100% - 22px) 23px, calc(100% - 15px) 23px;
  background-size: 7px 7px, 7px 7px; background-repeat: no-repeat;
}
.field input:hover, .field textarea:hover, .field select:hover { box-shadow: inset 0 0 0 1px var(--ink); }
.field input:focus, .field textarea:focus, .field select:focus {
  outline: var(--ink-w) solid var(--accent); outline-offset: 1px; border-color: var(--ink);
}
.field .error {
  font-family: "Shantell Sans", cursive;
  font-size: var(--t-xs); color: var(--danger); font-weight: 700; display: none;
}
.field[data-invalid="true"] input,
.field[data-invalid="true"] textarea,
.field[data-invalid="true"] select { border-color: var(--danger); box-shadow: inset 0 0 0 1px var(--danger); }
.field[data-invalid="true"] .error { display: flex; align-items: center; gap: var(--s-1); }
.field--row { display: grid; gap: var(--s-5); }

.consent { display: flex; gap: var(--s-3); align-items: flex-start; flex-wrap: wrap; }
.consent input {
  width: 26px; height: 26px; min-height: 0; flex: none; margin-top: 2px;
  appearance: none; cursor: pointer;
  background: var(--surface);
  border: var(--ink-w-sm) solid var(--ink); border-radius: var(--r-sm);
  display: grid; place-content: center;
}
.consent input::before {
  content: ""; width: 13px; height: 13px;
  clip-path: polygon(14% 44%, 0 60%, 40% 100%, 100% 18%, 84% 4%, 38% 68%);
  background: #10171F; transform: scale(0);
  transition: transform var(--d-fast) var(--e-out);
}
.consent input:checked { background: var(--sun); }
.consent input:checked::before { transform: scale(1); }
.consent label { font-size: var(--t-xs); color: var(--fg-muted); font-weight: 500; line-height: 1.6; flex: 1; }
.consent a { color: var(--fg); font-weight: 700; }
.consent .error {
  flex-basis: 100%; font-family: "Shantell Sans", cursive;
  font-size: var(--t-xs); color: var(--danger); font-weight: 700; display: none;
}
.consent[data-invalid="true"] .error { display: block; }
.consent[data-invalid="true"] input { outline: var(--ink-w-sm) solid var(--danger); outline-offset: 2px; }

.form__status {
  display: none; gap: var(--s-3); align-items: flex-start;
  padding: var(--s-4); border-radius: var(--r-sm);
  border: var(--ink-w-sm) solid currentColor;
  font-size: var(--t-sm); font-weight: 600;
}
.form__status[data-state="ok"]  { display: flex; background: var(--surface); color: var(--success); }
.form__status[data-state="err"] { display: flex; background: var(--surface); color: var(--danger); }

/* --- Kontakt -------------------------------------------------------------- */
.contact { display: grid; gap: var(--s-7); }
.contact__list { list-style: none; padding: 0; display: grid; gap: var(--s-5); margin-top: var(--s-6); }
.contact__item { display: flex; gap: var(--s-4); align-items: flex-start; }
.contact__item svg { color: var(--accent); flex: none; margin-top: 3px; }
.contact__item dt {
  font-family: "Shantell Sans", cursive;
  font-size: var(--t-xs); font-weight: 600; text-transform: none; letter-spacing: 0; color: var(--fg-muted);
}
.contact__item dd { margin: 0; font-size: var(--t-lg); font-weight: 800; }
.contact__item dd a { text-decoration: none; }
.contact__item dd a:hover { color: var(--accent); text-decoration: underline; }
.contact__item dd span { display: block; font-weight: 500; font-size: var(--t-sm); color: var(--fg-muted); }

/* ==========================================================================
   FOOTER
   ========================================================================== */
.footer {
  background: #10171F; color: #EAF1F8;
  border-top: var(--ink-w) solid var(--ink);
  padding-block: var(--s-8) var(--s-6);
}
:root[data-theme="dark"] .footer { background: var(--bg-inverse); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .footer { background: var(--bg-inverse); }
}
.footer__grid { display: grid; gap: var(--s-7); }
.footer h2 {
  font-family: "Shantell Sans", cursive;
  font-size: var(--t-sm); font-weight: 700; letter-spacing: 0; text-transform: none;
  color: var(--brand-on-ink); margin-bottom: var(--s-3);
}
.footer ul { list-style: none; padding: 0; display: grid; gap: 0; }
.footer a {
  color: #C3D2E2; text-decoration: none; font-size: var(--t-sm);
  display: inline-flex; min-height: 36px; align-items: center;
}
.footer a:hover { color: #fff; text-decoration: underline; }
.footer p { color: #9EB0C4; font-size: var(--t-sm); }
.footer .logo { color: var(--brand-on-ink); }
.footer__bottom {
  margin-top: var(--s-7); padding-top: var(--s-5);
  border-top: var(--ink-w-sm) solid rgb(255 255 255 / .18);
  display: grid; gap: var(--s-2);
}
.footer__bottom p { font-size: var(--t-xs); color: #8496AB; }

/* ==========================================================================
   PROSE (Impressum, Datenschutz)
   ========================================================================== */
.prose { max-width: var(--wrap-narrow); }
.prose h2 { margin-top: var(--s-8); font-size: var(--t-2xl); }
.prose h2:first-child { margin-top: 0; }
.prose h3 { margin-top: var(--s-6); font-size: var(--t-lg); }
.prose p, .prose li { margin-top: var(--s-3); color: var(--fg-muted); font-size: var(--t-sm); }
.prose strong { color: var(--fg); font-weight: 800; }
.prose ul { padding-left: var(--s-5); }
.prose a { color: var(--fg); font-weight: 700; }

/* ==========================================================================
   LEXIKON
   ========================================================================== */
.lex-tools { display: grid; gap: var(--s-5); margin-bottom: var(--s-7); }
.lex-search { position: relative; max-width: 520px; }
.lex-search svg { position: absolute; left: var(--s-4); top: 50%; transform: translateY(-50%); color: var(--fg-muted); pointer-events: none; }
.lex-search input {
  width: 100%; min-height: 54px; padding: 0 var(--s-5) 0 var(--s-8);
  background: var(--surface); color: var(--fg);
  border: var(--ink-w) solid var(--ink); border-radius: var(--r-full);
  caret-color: var(--accent);
}
.lex-search input:focus { outline: var(--ink-w) solid var(--accent); outline-offset: 2px; }
.chips { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.chip {
  display: inline-flex; align-items: center; min-height: 40px; padding: 0 var(--s-4);
  font-size: var(--t-xs); font-weight: 700; color: var(--fg-muted);
  background: var(--surface); border: var(--ink-w-sm) solid var(--ink);
  border-radius: var(--r-full); cursor: pointer;
  transition: background var(--d-fast) var(--e-out), color var(--d-fast) var(--e-out);
}
.chip:hover { color: var(--fg); background: var(--bg-soft); }
.chip[aria-pressed="true"] { background: var(--sun); color: #10171F; }
.chip--letter { min-width: 44px; padding-inline: var(--s-2); justify-content: center; }
.lex-count {
  font-family: "Shantell Sans", cursive;
  font-size: var(--t-sm); color: var(--fg-muted); font-variant-numeric: tabular-nums;
}
.lex-list { display: grid; gap: var(--s-3); }
.lex-item {
  background: var(--surface);
  border: var(--ink-w-sm) solid var(--ink); border-radius: var(--r-sm);
}
.lex-item:hover { border-width: var(--ink-w); margin: calc(-1 * (var(--ink-w) - var(--ink-w-sm))); }
.lex-item[hidden] { display: none; }
.lex-item summary {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-4);
  padding: var(--s-4) var(--s-5); cursor: pointer; font-weight: 800; list-style: none;
  min-height: 56px;
}
.lex-item summary::-webkit-details-marker { display: none; }
.lex-item summary::after {
  content: ""; width: 9px; height: 9px; flex: none;
  border-right: var(--ink-w-sm) solid var(--fg-muted); border-bottom: var(--ink-w-sm) solid var(--fg-muted);
  transform: rotate(45deg) translateY(-2px);
  transition: transform var(--d-fast) var(--e-out);
}
.lex-item[open] summary::after { transform: rotate(-135deg) translateY(-2px); }
.lex-tag {
  font-family: "Shantell Sans", cursive;
  font-size: var(--t-xs); font-weight: 600; color: var(--fg-muted); margin-left: auto;
}
.lex-item p { padding: 0 var(--s-5) var(--s-5); color: var(--fg-muted); font-size: var(--t-sm); max-width: 80ch; }
.lex-empty { display: none; padding: var(--s-8) 0; text-align: center; color: var(--fg-muted); }
.lex-empty[data-show="true"] { display: block; }

/* ==========================================================================
   MOTION — ein einziger inszenierter Moment: das Panel klappt auf.
   ========================================================================== */
.js .reveal { opacity: 0; transform: translateY(14px) scale(.985); }
.js .reveal[data-visible="true"] {
  opacity: 1; transform: none;
  transition: opacity var(--d-slow) var(--e-out), transform var(--d-slow) var(--e-out);
}
@keyframes bubble-pop {
  0%   { opacity: 0; transform: translateY(8px) scale(.9) rotate(-2deg); }
  100% { opacity: 1; transform: none; }
}
.js .hero__bubble { animation: bubble-pop var(--d-slow) var(--e-pop) both; animation-delay: 180ms; }

/* ==========================================================================
   BREAKPOINTS
   ========================================================================== */
@media (min-width: 560px) {
  .field--row { grid-template-columns: 1fr 1fr; }
  .trustbar__inner { grid-template-columns: 1fr 1fr; }
  .trustbar__item { border-bottom: var(--ink-w-sm) solid var(--rule); }
  .trustbar__item:nth-child(odd) { border-right: var(--ink-w-sm) solid var(--rule); padding-right: var(--s-4); }
  .trustbar__item:nth-child(n+3) { border-bottom: 0; }
  .shots { grid-template-columns: 1fr 1fr; }
  .grid--2, .grid--3 { grid-template-columns: 1fr 1fr; }
}

@media (min-width: 860px) {
  .section { padding-block: var(--s-9); }
  .hero { padding-block: var(--s-6) var(--s-8); }
  .hero__text {
    grid-template-columns: 1.32fr .68fr;
    gap: var(--s-8);
    align-items: end;
    padding: var(--s-7) var(--s-7) var(--s-6);
  }
  .hero__art { height: 390px; }
  .hero__card { border-top: 0; border-left: var(--ink-w) solid var(--ink); }

  .trustbar__inner { grid-template-columns: repeat(4, 1fr); }
  .trustbar__item { border-bottom: 0; border-right: var(--ink-w-sm) solid var(--rule); padding-inline: var(--s-4); }
  .trustbar__item:first-child { padding-left: 0; }
  .trustbar__item:last-child { border-right: 0; padding-right: 0; }

  .steps { grid-template-columns: repeat(3, 1fr); }
  .step::after { display: block; }
  .step:last-child::after { display: none; }

  .split { grid-template-columns: 1.1fr .9fr; gap: var(--s-8); }
  .contact { grid-template-columns: .95fr 1.05fr; gap: var(--s-8); }
  .shots { grid-template-columns: repeat(3, 1fr); }
  .footer__grid { grid-template-columns: 1.4fr 1fr 1fr 1fr; }
  .footer__bottom { grid-template-columns: 1fr auto; align-items: center; }

  .teaser__inner { padding: var(--s-9) var(--s-8); }

  /* Das Panel-Raster der Leistungen: ungleiche Felder, saubere Kanten. */
  .board { grid-template-columns: repeat(6, 1fr); grid-auto-rows: minmax(0, auto); }
  .board > :nth-child(1) { grid-column: span 3; grid-row: span 2; }
  .board > :nth-child(2) { grid-column: span 3; }
  .board > :nth-child(3) { grid-column: span 3; }
  .board > :nth-child(4) { grid-column: span 2; }
  .board > :nth-child(5) { grid-column: span 2; }
  .board > :nth-child(6) { grid-column: span 2; }

  .grid--3 { grid-template-columns: repeat(3, 1fr); }
}

@media (min-width: 1024px) {
  .nav__links { display: flex; }
  .nav__cta { display: inline-flex; }
  .nav__burger { display: none; }
  .drawer { display: none; }
}

@media (min-width: 1180px) {
  .hero__art { height: 440px; }
}

/* Print: die Comicseite wird zur Schwarzweiß-Kopie. */
@media print {
  body { background: #fff; }
  .nav, .drawer, .btn, .teaser, .hero__art { display: none !important; }
  .panel, .frame, .card, .step { break-inside: avoid; }
}

/* Zwischenüberschrift innerhalb einer Sektion: klein, aber semantisch h3. */
.subhead {
  font-size: var(--t-base);
  letter-spacing: -.01em;
  margin-bottom: var(--s-3);
}

/* ==========================================================================
   KAMPAGNENSEITE (/jobs) — eigenständige Landingpage für Anzeigen-Traffic.
   Kein Menü, eine Aktion. Alles andere erbt vom Design-System.
   ========================================================================== */

/* Kopfzeile ohne Navigation: nur Absender und Erreichbarkeit. */
.lp-head {
  border-bottom: var(--ink-w) solid var(--ink);
  background: var(--surface);
}
.lp-head__inner {
  width: min(100% - 2 * var(--s-5), var(--wrap)); margin-inline: auto;
  min-height: 66px; display: flex; align-items: center; justify-content: space-between; gap: var(--s-4);
}
.lp-head__where {
  display: none;
  font-family: "Shantell Sans", cursive; font-size: var(--t-sm); color: var(--fg-muted);
}

/* Dauerhafte Aktionsleiste. Auf dem Handy der wichtigste Teil der Seite. */
.lp-bar {
  position: fixed; inset: auto 0 0 0; z-index: var(--z-nav);
  display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-2);
  padding: var(--s-3) var(--s-4) calc(var(--s-3) + env(safe-area-inset-bottom));
  background: var(--surface);
  border-top: var(--ink-w) solid var(--ink);
}
.lp-bar .btn { min-height: 50px; padding-inline: var(--s-3); font-size: var(--t-xs); }
body.has-lp-bar { padding-bottom: 92px; }

/* Der Dialog: Frage in der Blase des Bewerbers, Antwort in der des Betriebs. */
.talk { display: grid; gap: var(--s-5); max-width: 780px; }
.talk__row { display: grid; gap: var(--s-3); }
.talk__row--a { justify-items: end; }
.talk .bubble { max-width: min(100%, 40ch); }
.talk__row--q .bubble { background: var(--surface); }
.talk__row--a .bubble {
  background: var(--sun); color: #10171F;
  font-weight: 700;
}
.talk__row--a .bubble::after { border-top-color: var(--sun); }

/* Stellenliste: eine Zeile pro Stelle, die ganze Zeile führt zur Bewerbung. */
.jobs { display: grid; gap: var(--gutter); }
.job {
  display: grid; gap: var(--s-2);
  background: var(--surface);
  border: var(--ink-w) solid var(--ink); border-radius: var(--r-sm);
  padding: var(--s-5);
  text-decoration: none; color: var(--fg);
  transition: transform var(--d-base) var(--e-out), background var(--d-fast) var(--e-out);
}
.job:hover { transform: translate(-2px, -3px); background: var(--surface-2); }
.job__tag {
  font-family: "Shantell Sans", cursive; font-size: var(--t-xs);
  font-weight: 600; color: var(--fg-muted);
}
.job h3 { font-size: var(--t-xl); }
.job p { font-size: var(--t-sm); color: var(--fg-muted); }
.job__go {
  display: inline-flex; align-items: center; gap: var(--s-2);
  font-weight: 800; font-size: var(--t-sm); margin-top: var(--s-2);
  border-bottom: var(--ink-w-sm) solid var(--accent); align-self: start;
}
.job:hover .job__go svg { transform: translateX(4px); }
.job__go svg { transition: transform var(--d-fast) var(--e-out); }

/* Gehaltsband und ähnliche Zahlen: sichtbar als offener Platz, nicht erfunden. */
/* Sitzt auf dem gelben Panel und traegt deshalb feste Farben: die
   Theme-Tokens wuerden hier im Dark Mode gegen Gelb laufen. */
.todo {
  display: inline-block;
  font-family: "Shantell Sans", cursive; font-size: var(--t-xs); font-weight: 700;
  background: repeating-linear-gradient(45deg, rgb(122 45 18 / .16) 0 8px, transparent 8px 16px);
  border: var(--ink-w-sm) dashed #9A3412;
  color: #7C2D12;
  border-radius: var(--r-sm); padding: 2px var(--s-3);
}

/* Kurzformular: drei Felder, mehr braucht der erste Kontakt nicht. */
.quick { display: grid; gap: var(--s-4); }
.quick__alt {
  display: grid; gap: var(--s-3); margin-top: var(--s-5);
  padding-top: var(--s-5); border-top: var(--ink-w-sm) solid var(--rule);
}
.quick__alt a { display: inline-flex; align-items: center; gap: var(--s-3); font-weight: 700; text-decoration: none; }
.quick__alt a:hover { color: var(--accent); }
.quick__alt svg { color: var(--accent); flex: none; }
.quick__alt span { display: block; font-weight: 500; font-size: var(--t-xs); color: var(--fg-muted); }

/* Schlanker Fuß: nur was rechtlich hingehört. */
.lp-foot {
  background: #10171F; color: #EAF1F8;
  padding-block: var(--s-7) var(--s-6);
  margin-top: var(--s-8);
}
.lp-foot__inner {
  width: min(100% - 2 * var(--s-5), var(--wrap)); margin-inline: auto;
  display: grid; gap: var(--s-4);
}
.lp-foot a { color: #C3D2E2; font-size: var(--t-sm); text-decoration: none; }
.lp-foot a:hover { color: #fff; text-decoration: underline; }
.lp-foot p { color: #9EB0C4; font-size: var(--t-xs); }
.lp-foot__links { display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-5); }

@media (min-width: 560px) {
  .talk__row { grid-template-columns: 1fr; }
}
@media (min-width: 860px) {
  .lp-head__where { display: block; }
  .lp-bar { display: none; }
  body.has-lp-bar { padding-bottom: 0; }
  .jobs { grid-template-columns: repeat(3, 1fr); }
  .lp-foot__inner { grid-template-columns: 1fr auto; align-items: center; }
}