/* Hallmark · shape: Tile Stack (Aufbau nach apple.com, vom Nutzer gewünscht) · genre: modern-minimal · theme: custom (by request: „wie Apple, schlicht, ein paar Animationen“)
 * paper: oklch(100% 0 0) · accent: oklch(32% 0.13 263) · display: SF Pro / Inter · body: SF Pro / Inter · hero: zentrierte helle Kachel, Bild darunter · nav: schmal, hell, durchscheinend · footer: kleine Spalten auf Hellgrau · signature: die eine dunkle Firmenblau-Kachel mit weißer Pille; Orange nur als kleiner Akzent auf Hell
 * axes: light/grotesk-sans/cool · posture: restrained · contrast: pass · fold: pass · v2.0.0 */
/* Hallmark · pre-emit critique: P3 H3 E3 S2 R3 V3 · weakest: S (Platzhalterfotos; echte Lkw-Bilder tragen die Kacheln) · Feinschliff nach Experten-Review vom 2026-10-29 */
@import url("./tokens.css");

/* Basis (vorher ../shared/base.css) */
*, *::before, *::after { box-sizing: border-box; }
html, body { overflow-x: clip; }
html { scrollbar-color: var(--color-muted) var(--color-paper); scroll-padding-top: var(--space-3xl); }
body { margin: 0; background: var(--color-paper); color: var(--color-ink); font-family: var(--font-body); font-size: var(--text-md); line-height: 1.55; -webkit-font-smoothing: antialiased; caret-color: var(--color-accent); }
::selection { background: color-mix(in oklab, var(--color-accent) 22%, transparent); color: var(--color-ink); }
:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 0.16em; }
h1, h2, h3 { margin: 0; font-family: var(--font-display); font-weight: var(--display-weight, 700); font-synthesis: none; letter-spacing: var(--tracking-display); line-height: 1.05; overflow-wrap: break-word; min-width: 0; text-wrap: balance; }
h1 { max-width: 20ch; font-size: var(--text-display); } h2 { max-width: 30ch; font-size: var(--text-section); } h3 { max-width: 40ch; font-size: var(--text-title); line-height: 1.2; }
.lead { font-size: var(--text-lead); line-height: 1.45; max-width: 52ch; }
p { margin: 0; text-wrap: pretty; }
p:not([class]) { max-width: 65ch; }
img, video { max-width: 100%; height: auto; display: block; }
svg { display: block; }
[hidden] { display: none !important; }
button, input, select, textarea { font: inherit; }
.container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); box-sizing: border-box; }
.num, .figure, td.num { font-variant-numeric: tabular-nums; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
[data-slot] { position: relative; overflow: hidden; background: linear-gradient(160deg, var(--color-paper-2, var(--color-paper)), var(--color-paper-3, var(--color-paper))); }
[data-slot] > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 1; }
[data-slot]:has(> img) > :not(img):not([data-keep]) { display: none !important; }
@media (max-width: 60rem) { :root { --gutter: 24px; --section-gap-s: 80px; --section-gap: 96px; --section-gap-l: 120px; } }
@media (max-width: 40rem) { :root { --gutter: 16px; --section-gap-s: 56px; --section-gap: 72px; --section-gap-l: 96px; --gap-columns: 16px; } }
@media (prefers-reduced-motion: reduce) { *:not(.keep-motion), *:not(.keep-motion)::before, *:not(.keep-motion)::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } }

/* Inter liegt auf dem eigenen Server (keine Verbindung zu Google); Apple-Geräte nutzen ihre Systemschrift SF Pro */
@font-face { font-family: "Inter"; font-style: normal; font-weight: 100 900; font-display: swap; src: url("./vendor/inter/inter-latin-var.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: "Archivo"; font-style: normal; font-weight: 100 900; font-display: swap; src: url("./vendor/archivo/archivo-latin-var.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; }

body { font-size: var(--text-md); line-height: 1.47; letter-spacing: -0.01em; color: var(--color-ink); }
h1, h2, h3 { font-weight: var(--display-weight); letter-spacing: var(--tracking-display); line-height: 1.07; color: inherit; }
figure { margin: 0; }
a { color: var(--color-accent); text-decoration: none; }
a:hover { text-decoration: underline; text-decoration-color: var(--color-mark); text-decoration-thickness: 2px; text-underline-offset: 0.2em; }
.nowrap { white-space: nowrap; }
::selection { background: var(--color-mark-soft); color: var(--color-ink); }
.tile--dark ::selection { background: var(--color-dark-ink); color: var(--color-dark); }

/* Sprunglink für Tastatur und Screenreader */
.skip { position: absolute; left: var(--space-md); top: var(--space-xs); z-index: var(--z-toast); padding: var(--space-xs) var(--space-md); border-radius: var(--radius-pill); background: var(--color-accent); color: var(--color-accent-ink); translate: 0 -200%; transition: translate var(--dur-short) var(--ease-out); }
.skip:focus-visible { translate: 0 0; outline: 2px solid var(--color-focus); outline-offset: 3px; text-decoration: none; }
main:focus { outline: none; }

/* Pillen-Knöpfe wie bei Apple: gefüllt und umrandet */
.pill {
  display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 var(--space-lg);
  border-radius: var(--radius-pill); border: 1px solid transparent; font: 400 var(--text-md)/1 var(--font-body); letter-spacing: -0.01em;
  text-decoration: none; cursor: pointer; white-space: nowrap;
  transition: background-color var(--dur-short) var(--ease-out), color var(--dur-short) var(--ease-out), border-color var(--dur-short) var(--ease-out), translate var(--dur-micro) var(--ease-out);
}
.pill:hover { text-decoration: none; }
.pill:active { translate: 0 1px; }
.pill:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 3px; }
.pill:disabled { opacity: 0.45; cursor: not-allowed; }
.pill--fill { background: var(--color-accent); color: var(--color-accent-ink); }
.pill--fill:hover { background: var(--color-accent-hover); }
.pill--line { border-color: var(--color-accent); color: var(--color-accent); background: transparent; }
.pill--line:hover { background: var(--color-accent); color: var(--color-accent-ink); }
.pills { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-md); margin-top: var(--space-lg); }
/* Auf der dunklen Firmenblau-Kachel: Weiß gefüllt und Weiß umrandet, nie Orange */
.tile--dark .pill--fill { background: var(--color-dark-ink); color: var(--color-dark); }
.tile--dark .pill--fill:hover { background: var(--color-paper-3); }
.tile--dark .pill--line { border-color: var(--color-dark-ink); color: var(--color-dark-ink); }
.tile--dark .pill--line:hover { background: var(--color-dark-ink); color: var(--color-dark); }
.tile--dark .pill:focus-visible { outline-color: var(--color-dark-ink); }

/* Navigation: schmal, hell, durchscheinend */
.site-nav { position: sticky; top: 0; z-index: var(--z-sticky-nav); border-bottom: 1px solid var(--color-nav-line); background: var(--color-nav); backdrop-filter: saturate(180%) blur(20px); -webkit-backdrop-filter: saturate(180%) blur(20px); color: var(--color-nav-ink); }
.site-nav__inner { display: flex; align-items: center; justify-content: space-between; gap: var(--space-lg); height: var(--nav-height); max-width: 1024px; margin-inline: auto; padding-inline: var(--gutter); }
.wordmark { display: inline-flex; align-items: center; gap: var(--space-xs); min-height: 44px; font: 600 var(--text-sm)/1 var(--font-display); color: var(--color-nav-hover); text-decoration: none; }
.wordmark img { display: block; width: auto; height: 30px; }
@media (max-width: 52rem) { .wordmark img { height: 26px; } }
.wordmark:hover { text-decoration: none; }
.nav__links { display: flex; gap: var(--space-xl); list-style: none; margin: 0; padding: 0; font-size: var(--text-xs); }
.nav__links a { display: inline-block; padding-block: var(--space-sm); color: var(--color-nav-ink); text-decoration: none; transition: color var(--dur-short) var(--ease-out); }
.nav__links a:hover { color: var(--color-nav-hover); text-decoration: none; }
.nav__links a[aria-current="page"] { color: var(--color-nav-hover); font-weight: 600; text-decoration: underline; text-decoration-color: var(--color-mark); text-decoration-thickness: 2px; text-underline-offset: 0.5em; }
.nav__tel { font-size: var(--text-xs); color: var(--color-nav-ink); font-variant-numeric: tabular-nums; }
.nav__tel:hover { color: var(--color-nav-hover); text-decoration: none; }
.site-nav a:focus-visible, .site-nav button:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; border-radius: 6px; }
.nav__mobile { display: none; align-items: center; gap: var(--space-xs); margin-right: calc(-1 * var(--space-sm)); }
.nav__call, .nav__toggle { display: inline-flex; align-items: center; min-height: 44px; padding-inline: var(--space-sm); font: 400 var(--text-sm)/1 var(--font-body); }
.nav__call { color: var(--color-accent); font-weight: 600; }
.nav__call:hover { text-decoration: none; color: var(--color-accent-hover); }
.nav__toggle { background: none; border: 0; color: var(--color-nav-hover); cursor: pointer; }
.menu { display: none; }
.menu__list { list-style: none; margin: 0; padding: var(--space-md) var(--gutter) var(--space-xl); max-width: 1024px; margin-inline: auto; }
.menu__list a { display: block; padding-block: var(--space-sm); font: 600 var(--text-2xl)/1.2 var(--font-display); letter-spacing: var(--tracking-display); color: var(--color-nav-hover); }
.menu__list a:hover { color: var(--color-accent); text-decoration: none; }
.menu__list a[aria-current="page"] { color: var(--color-accent); }
@media (max-width: 52rem) {
  .nav__links, .nav__tel { display: none; }
  .nav__mobile { display: flex; }
  .menu { display: block; background: var(--color-nav); }
  .js .menu { position: absolute; inset: 100% 0 auto; min-height: calc(100svh - var(--nav-height)); background: var(--color-nav-solid); }
  .js .menu:not(.is-open) { display: none; }
}

/* Kacheln */
.tiles { display: grid; gap: var(--gap-columns); padding: var(--gap-columns); max-width: 1680px; margin-inline: auto; }
.tile { position: relative; overflow: hidden; background: var(--color-paper-2); color: var(--color-ink); text-align: center; padding-top: var(--space-2xl); display: grid; justify-items: center; align-content: start; }
.tile--white { background: var(--color-paper); }
.tile--dark { background: var(--color-dark); color: var(--color-dark-ink); }
.tile__text { padding-inline: var(--gutter); display: grid; justify-items: center; }
.tile h1 { font-size: var(--text-hero); max-width: 18ch; }
.tile h2, .tile h3 { font-size: var(--text-tile); max-width: 18ch; }
.tile--wide h2 { font-size: var(--text-hero); }
.tile-grid .tile h3 { font-size: clamp(1.75rem, 2.2vw + 0.5rem, 2.5rem); }
.tile__sub { margin-top: var(--space-2xs); font-size: var(--text-lead); line-height: 1.2; letter-spacing: -0.015em; max-width: 30ch; text-wrap: balance; }
.tile__note { margin-top: var(--space-xs); font-size: var(--text-md); color: var(--color-muted); max-width: 40ch; text-wrap: balance; }
.tile--dark .tile__note { color: var(--color-dark-muted); }
.tile__media { width: 100%; margin-top: var(--space-xl); overflow: hidden; }
.tile__media img { width: 100%; height: 100%; object-fit: cover; }
.tile--hero { min-height: min(760px, calc(100svh - var(--nav-height) - 2 * var(--gap-columns))); padding-top: var(--space-xl); grid-template-rows: auto 1fr; }
.tile--hero .tile__media { aspect-ratio: auto; height: 100%; min-height: 300px; max-width: 1180px; border-radius: var(--radius-card) var(--radius-card) 0 0; }
.tile--wide .tile__media { aspect-ratio: 21 / 9; max-width: 1180px; border-radius: var(--radius-card) var(--radius-card) 0 0; }
.tile-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--gap-columns); }
.tile-grid .tile { grid-template-rows: auto 1fr; }
.tile-grid .tile__media { aspect-ratio: 16 / 10; align-self: end; }
@media (max-width: 52rem) {
  .tile-grid { grid-template-columns: minmax(0, 1fr); }
  .tile--wide .tile__media { aspect-ratio: 4 / 3; }
  .tile { padding-top: var(--space-xl); }
}
@media (max-width: 40rem) {
  :root { --gap-columns: 12px; }
  .tiles { padding: 0 0 var(--gap-columns); }
  .tile--hero .tile__media, .tile--wide .tile__media { border-radius: 0; }
}

/* Abschnitte auf Weiß */
.section { padding-block: var(--section-gap-s); }
.section--gray { background: var(--color-paper-2); }
.section--tight { padding-top: 0; }
.wrap { max-width: 980px; margin-inline: auto; padding-inline: var(--gutter); }
.wrap--wide { max-width: 1180px; }
.section__head { text-align: center; display: grid; justify-items: center; margin-bottom: var(--space-2xl); }
.section__head h2 { font-size: var(--text-section); max-width: 20ch; }
.section__head p { margin-top: var(--space-sm); font-size: var(--text-lead); line-height: 1.25; color: var(--color-muted); max-width: 36ch; text-wrap: balance; }
/* Orange-Akzent: kurzer Strich unter Abschnittsüberschriften */
.section__head h2::after { content: ""; display: block; width: 40px; height: 4px; margin: var(--space-lg) auto 0; border-radius: 2px; background: var(--color-mark); }

/* Ablauf: Karten */
.steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-md); }
.steps li { background: var(--color-paper-2); border-radius: var(--radius-card); padding: var(--space-xl) var(--space-lg); display: grid; gap: var(--space-sm); align-content: start; }
.steps__num { font: 600 var(--text-3xl)/1 var(--font-display); letter-spacing: var(--tracking-display); color: var(--color-mark-text); font-variant-numeric: tabular-nums; }
.steps h3 { font-size: var(--text-xl); }
.steps p { color: var(--color-ink-2); }
.steps--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 64rem) { .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); } .steps--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 40rem) { .steps, .steps--3 { grid-template-columns: minmax(0, 1fr); } }

/* Statement: das blaue Band zwischen Hero und Leistungen, Wort für Wort wird der Satz hell */
.tile--statement { padding: var(--section-gap-s) var(--gutter); align-content: center; }
.tile--statement p { max-width: 26ch; margin-inline: auto; text-align: center; font: 600 clamp(1.75rem, 3vw + 0.5rem, 3.25rem)/1.15 var(--font-display); letter-spacing: var(--tracking-display); color: var(--color-dark-ink); text-wrap: balance; }
.tile--statement .word { display: inline-block; }
@media (max-width: 40rem) { .tile--statement { padding-block: var(--section-gap-s); } }
.tiles--band { padding-top: 0; }

/* Geschichte: vier Stationen, Bild-Platzhalter bis die Archivfotos da sind */
.history li { padding-top: var(--space-lg); }
.history__photo { margin: 0 0 var(--space-xs); aspect-ratio: 4 / 3; border-radius: var(--radius-field); overflow: hidden; background: var(--color-paper); display: grid; place-items: center; }
.history__photo img { width: 100%; height: 100%; object-fit: cover; }
.history__photo figcaption { padding: var(--space-md); font-size: var(--text-sm); color: var(--color-muted); text-align: center; }
.history__photo:has(img) figcaption { display: none; }

/* Unternehmen: großes Hof-Foto, darunter drei Fakten */
.facts-photo { border-radius: var(--radius-card); overflow: hidden; aspect-ratio: 21 / 9; }
.facts-photo img { width: 100%; height: 100%; object-fit: cover; }
.cert { margin-top: var(--space-md); background: var(--color-paper); border-radius: var(--radius-card); padding: var(--space-xl) var(--space-lg); display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--space-xl); align-items: center; }
.cert__badge { width: 120px; height: auto; border-radius: var(--radius-field); }
.cert__text { display: grid; gap: var(--space-sm); max-width: 60ch; }
.cert__text h3 { font: 600 var(--text-xl)/1.2 var(--font-display); letter-spacing: -0.015em; }
.cert__text p { color: var(--color-ink-2); text-wrap: pretty; }
.cert__text .cert__meta { font-size: var(--text-sm); color: var(--color-muted); }
@media (max-width: 40rem) { .cert { grid-template-columns: minmax(0, 1fr); gap: var(--space-md); } .cert__badge { width: 96px; } }
.facts-grid { margin: var(--space-md) 0 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-md); }
.fact { background: var(--color-paper); border-radius: var(--radius-card); padding: var(--space-xl) var(--space-lg); display: grid; gap: var(--space-xs); align-content: start; }
.fact dt { font-size: var(--text-sm); color: var(--color-muted); }
.fact dd { margin: 0; font: 600 var(--text-xl)/1.25 var(--font-display); letter-spacing: -0.015em; color: var(--color-ink); text-wrap: balance; }
.fact dd small { display: block; margin-top: var(--space-xs); font: 400 var(--text-sm)/1.4 var(--font-body); letter-spacing: 0; color: var(--color-muted); }
@media (max-width: 52rem) { .facts-grid { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 40rem) { .facts-photo { aspect-ratio: 4 / 3; } }

/* Häufige Fragen */
.faq { border-top: var(--rule-hair) solid var(--color-rule); }
.faq__item { border-bottom: var(--rule-hair) solid var(--color-rule); }
.faq__item summary { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-md); align-items: center; padding-block: var(--space-lg); cursor: pointer; list-style: none; font: 600 var(--text-lg)/1.3 var(--font-display); letter-spacing: -0.015em; color: var(--color-ink); transition: color var(--dur-short) var(--ease-out); }
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary::after { content: "+"; font-weight: 300; font-size: var(--text-2xl); line-height: 1; color: var(--color-accent); transition: rotate var(--dur-short) var(--ease-out); }
.faq__item summary:hover { color: var(--color-accent); }
.faq__item[open] summary::after { rotate: 45deg; color: var(--color-mark-text); }
.faq__item summary:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 4px; border-radius: 6px; }
.faq__item p { padding-bottom: var(--space-lg); max-width: 62ch; color: var(--color-ink-2); }

/* Kontakt und Anfrage */
.contact { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: var(--space-md); align-items: start; }
.contact__card, .form-card { background: var(--color-paper); border-radius: var(--radius-card); padding: var(--space-xl); }
.contact__card { display: grid; gap: var(--space-lg); }
.contact__call { display: grid; gap: var(--space-md); justify-items: start; }
.contact__phone { font: 600 var(--text-2xl)/1.1 var(--font-display); letter-spacing: var(--tracking-display); color: var(--color-accent); font-variant-numeric: tabular-nums; }
.contact__callbtn { display: none; }
.contact__card dl { margin: 0; display: grid; gap: var(--space-md); }
.contact__card dt { font-size: var(--text-sm); color: var(--color-muted); }
.contact__card dd { margin: var(--space-3xs) 0 0; }
.form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-md); }
.field-row { display: grid; gap: var(--space-xs); min-width: 0; align-content: start; }
.field-row--wide { grid-column: 1 / -1; }
.field-row label { font-size: var(--text-sm); color: var(--color-ink-2); }
.field-row input, .field-row select, .field-row textarea, .wizard input:not([type="radio"]), .wizard select {
  width: 100%; min-height: 52px; padding: var(--space-sm) var(--space-md); border-radius: var(--radius-field);
  border: 1px solid var(--color-field-line); background: var(--color-paper); color: var(--color-ink); font: 400 var(--text-md)/1.3 var(--font-body);
  transition: border-color var(--dur-short) var(--ease-out);
}
.field-row textarea { min-height: 110px; resize: vertical; }
.field-row input:hover, .field-row select:hover, .field-row textarea:hover, .wizard input:not([type="radio"]):hover, .wizard select:hover { border-color: var(--color-ink-2); }
.field-row input:focus-visible, .field-row select:focus-visible, .field-row textarea:focus-visible, .wizard input:not([type="radio"]):focus-visible, .wizard select:focus-visible { outline: none; border-color: var(--color-focus); box-shadow: 0 0 0 4px color-mix(in oklab, var(--color-focus) 25%, transparent); }
[aria-invalid="true"] { border-color: var(--color-error) !important; }
.field-error { font-size: var(--text-sm); color: var(--color-error); }
.form__foot { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-lg); margin-top: var(--space-xs); }
.form__status { font-size: var(--text-sm); color: var(--color-ink); max-width: 52ch; }
.form__status.is-error { color: var(--color-error); }
.privacy-note { grid-column: 1 / -1; font-size: var(--text-xs); color: var(--color-muted); }
@media (max-width: 52rem) { .contact { grid-template-columns: minmax(0, 1fr); } .contact__callbtn { display: inline-flex; } }
@media (max-width: 40rem) { .form { grid-template-columns: minmax(0, 1fr); } .contact__card, .form-card { padding: var(--space-lg); } .form__foot .pill, .contact__callbtn { width: 100%; } }

/* Karriere: Stellen als Kacheln, Knöpfe am Kachelboden */
.job-tile { display: flex; flex-direction: column; align-items: center; }
.job-tile .tile__text { flex: 1; display: flex; flex-direction: column; align-items: center; padding-bottom: var(--space-2xl); }
.job-tile .pills { margin-top: auto; padding-top: var(--space-lg); }
.job-facts { list-style: none; margin: var(--space-lg) 0 0; padding: 0; display: grid; gap: var(--space-2xs); color: var(--color-ink-2); text-wrap: balance; }
.tile--dark .job-facts { color: var(--color-dark-muted); }
.apply-call { margin-top: var(--space-sm); color: var(--color-muted); }

/* Karriere: „Was dich erwartet.“ als vier hellblaue Karten mit großem Wert */
.expect { padding-bottom: var(--section-gap-s); }
.draft-note { max-width: 62ch; margin: calc(-1 * var(--space-lg)) auto var(--space-xl); text-align: center; font-size: var(--text-sm); color: var(--color-muted); }
.expect__grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-md); }
.expect__card { background: var(--color-accent-soft); border-radius: var(--radius-card); padding: var(--space-xl) var(--space-lg); display: grid; gap: var(--space-sm); align-content: start; }
.expect__label { font-size: var(--text-sm); font-weight: 600; color: var(--color-ink-2); }
.expect__value { font: 600 var(--text-3xl)/1.05 var(--font-display); letter-spacing: var(--tracking-display); color: var(--color-accent); overflow-wrap: anywhere; }
.expect__card p { color: var(--color-ink-2); text-wrap: pretty; }
@media (max-width: 64rem) { .expect__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 40rem) { .expect__grid { grid-template-columns: minmax(0, 1fr); } }

/* Kurzbewerbung in einer weißen Karte */
.wizard-card { background: var(--color-paper); border-radius: var(--radius-panel); padding: var(--space-2xl); max-width: 860px; margin-inline: auto; }
.wizard-card .privacy-note { margin-top: var(--space-lg); }
.wizard__top { display: none; }
.wizard.is-stepped .wizard__top { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: var(--space-lg); margin-bottom: var(--space-xl); }
.wizard__count { font-size: var(--text-sm); color: var(--color-muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.wizard__count span { display: inline-block; }
.wizard__bar { height: 4px; border-radius: var(--radius-pill); background: var(--color-paper-3); overflow: hidden; }
.wizard__bar span { display: block; height: 100%; border-radius: inherit; background: var(--color-accent); transform-origin: left; transform: scaleX(0.25); }
.wizard__step { border: 0; margin: 0 0 var(--space-2xl); padding: 0; min-width: 0; }
.wizard.is-stepped .wizard__step { margin-bottom: 0; }
.wizard legend { float: left; width: 100%; padding: 0; margin-bottom: var(--space-lg); font: 600 var(--text-3xl)/1.1 var(--font-display); letter-spacing: var(--tracking-display); color: var(--color-ink); }
.wizard legend + * { clear: both; }
.choices { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 11rem), 1fr)); gap: var(--space-sm); }
.choice { position: relative; display: grid; align-content: start; gap: var(--space-2xs); min-height: 96px; padding: var(--space-lg); border-radius: var(--radius-choice); border: 1px solid var(--color-field-line); background: var(--color-paper); cursor: pointer; transition: border-color var(--dur-short) var(--ease-out), background-color var(--dur-short) var(--ease-out); }
.choice input { position: absolute; inset: 0; margin: 0; opacity: 0; cursor: pointer; }
.choice span { font: 600 var(--text-lg)/1.2 var(--font-display); letter-spacing: -0.015em; color: var(--color-ink); }
.choice small { font-size: var(--text-sm); color: var(--color-muted); }
.choice:hover { border-color: var(--color-ink-2); }
.choice:has(input:checked) { border-color: var(--color-accent); background: var(--color-accent-soft); box-shadow: inset 0 0 0 1px var(--color-accent); }
.choice:has(input:focus-visible) { outline: 2px solid var(--color-focus); outline-offset: 3px; }
.wizard .field { display: grid; gap: var(--space-xs); max-width: 32rem; }
.wizard__fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-md); }
.wizard label { font-size: var(--text-sm); color: var(--color-ink-2); }
.wizard__error { margin-top: var(--space-md); font-size: var(--text-sm); color: var(--color-error); }
.wizard__nav { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: var(--space-md); margin-top: var(--space-xl); }
.wizard__nav .btn { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 var(--space-lg); border-radius: var(--radius-pill); border: 1px solid var(--color-accent); background: transparent; color: var(--color-accent); font: 400 var(--text-md)/1 var(--font-body); cursor: pointer; transition: background-color var(--dur-short) var(--ease-out), color var(--dur-short) var(--ease-out); }
.wizard__nav .btn:hover { background: var(--color-accent); color: var(--color-accent-ink); }
.wizard__nav .btn--primary { background: var(--color-accent); color: var(--color-accent-ink); margin-left: auto; min-width: 10rem; }
.wizard__nav .btn--primary:hover { background: var(--color-accent-hover); }
.wizard__nav .btn:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 3px; }
.wizard__done { display: grid; gap: var(--space-md); text-align: center; justify-items: center; }
.wizard__done:focus { outline: none; }
.wizard__done h3 { font-size: var(--text-hero); }
.wizard__done p { color: var(--color-ink-2); max-width: 46ch; }
@media (max-width: 40rem) { .wizard-card { padding: var(--space-lg); border-radius: var(--radius-card); } .wizard legend { font-size: var(--text-2xl); } .wizard__fields { grid-template-columns: minmax(0, 1fr); } .choice { min-height: 0; padding: var(--space-md); } .wizard__nav .btn { flex: 1 1 0; min-width: 0; } }

/* Rechtstexte */
.legal { max-width: 760px; margin-inline: auto; padding: var(--space-3xl) var(--gutter) var(--section-gap-s); }
.legal h1 { font-size: var(--text-hero); }
.legal__note { margin-top: var(--space-lg); padding: var(--space-md) var(--space-lg); background: var(--color-paper-2); border-radius: var(--radius-field); color: var(--color-ink-2); }
.prose { margin-top: var(--space-2xl); }
.prose h2 { font-size: var(--text-xl); margin: var(--space-2xl) 0 var(--space-sm); }
.prose h2:first-child { margin-top: 0; }
.prose h3 { font-size: var(--text-lg); margin: var(--space-lg) 0 var(--space-xs); }
.prose p, .prose ul { margin: 0 0 var(--space-md); color: var(--color-ink-2); }
.todo { background: var(--color-mark); color: var(--color-mark-ink); padding: 0 var(--space-2xs); border-radius: 4px; }

/* Footer: klein und grau wie bei Apple, mit Kante zum Kontaktbereich */
.footer { background: var(--color-paper-2); border-top: 1px solid var(--color-rule); color: var(--color-muted); font-size: var(--text-xs); line-height: 1.5; padding-block: var(--space-xl) var(--space-lg); }
.footer__inner { max-width: 1024px; margin-inline: auto; padding-inline: var(--gutter); }
.footer__cols { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-lg); padding-bottom: var(--space-lg); border-bottom: var(--rule-hair) solid var(--color-rule); }
.footer__cols strong { display: block; margin-bottom: var(--space-xs); font-weight: 600; color: var(--color-ink); }
.footer__cols ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-2xs); }
.footer a { color: var(--color-ink-2); }
.footer__legal { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-md); padding-top: var(--space-md); }
.footer__legal ul { display: flex; gap: var(--space-md); list-style: none; margin: 0; padding: 0; }
.footer__credits { margin-top: var(--space-md); max-width: none; }
@media (max-width: 40rem) {
  .footer { font-size: var(--text-sm); }
  .footer__cols { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .footer__cols ul { gap: 0; }
  .footer__cols a, .footer__legal a { display: inline-block; padding-block: var(--space-xs); }
  .footer__credits { font-size: var(--text-xs); }
}

/* Vertrauensleiste unter dem Hero: die vier Gründe, warum man uns anruft */
.trust { list-style: none; margin: 0; padding: var(--space-lg) var(--space-md); display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-md); background: var(--color-paper); }
.trust li, .trust a { display: grid; gap: var(--space-2xs); justify-items: center; text-align: center; color: inherit; text-decoration: none; }
.trust strong { font: 600 var(--text-xl)/1.2 var(--font-display); letter-spacing: -0.015em; color: var(--color-ink); }
.trust span { font-size: var(--text-sm); color: var(--color-muted); }
.trust a:hover strong { color: var(--color-accent); }
@media (max-width: 52rem) { .trust { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* Leistungen ohne Foto: kurze Fakten statt Platzhalterbild */
.tile__list { list-style: none; margin: var(--space-md) 0 0; padding: 0; display: grid; gap: var(--space-xs); color: var(--color-ink-2); }
.tile__media:not(:has(img)) { display: none; }
.tile-grid .tile:not(:has(.tile__media img)) { padding-bottom: var(--space-2xl); }



/* Falle für Spam-Programme: für Menschen unsichtbar */
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* Handy: kompakter, damit die Seite nicht endlos lang wird */
@media (max-width: 40rem) {
  .tile-grid .tile { padding-top: var(--space-xl); }
  .tile-grid .tile:not(:has(.tile__media img)) { padding-bottom: var(--space-xl); }
  .tile__list { margin-top: var(--space-sm); gap: var(--space-2xs); font-size: var(--text-sm); }
  /* Ablauf: Nummer links neben Titel und Text statt darüber */
  .steps:not(.history) li { grid-template-columns: auto minmax(0, 1fr); column-gap: var(--space-md); row-gap: var(--space-2xs); padding: var(--space-lg); }
  .steps:not(.history) .steps__num { grid-row: span 2; font-size: var(--text-2xl); }
  /* Zeitleiste: seitlich wischen statt vier Karten untereinander */
  .history { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 82%; overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain; padding-bottom: var(--space-sm); scrollbar-width: thin; }
  .history li { scroll-snap-align: start; }
}