:root {
  --ink: #102733;
  --ink-soft: #405762;
  --blue: #16537a;
  --blue-deep: #0d3f60;
  --cream: #f5efe3;
  --surface: #f4f7f8;
  --line: rgba(16, 39, 51, .12);
  --ease: cubic-bezier(.16, 1, .3, 1);
  --shell: 1240px;
  --focus: #16537a;
  --alert: #9a2d1c;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; overflow-x: clip; }
body { margin: 0; color: var(--ink); background: #fff; font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", Arial, sans-serif; -webkit-font-smoothing: antialiased; }
img { max-width: 100%; }
a { color: var(--blue); text-decoration: none; text-underline-offset: .18em; }
a:hover { color: var(--blue-deep); }
/* WCAG 2.4.7 / 2.4.11: Deckender Fokus erreicht mindestens 3:1 zur hellen Umgebung. */
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
.site-shell { width: 100%; max-width: var(--shell); margin-inline: auto; }
/* Container mit eigenem Seitenabstand bekommen diesen zusätzlich, damit alle Inhaltskanten auf breiten Bildschirmen fluchten. */
.header-shell, .footer-shell, .booking-layout, .legal-layout { max-width: calc(var(--shell) + 48px); }
.skip-link { position: fixed; top: 10px; left: 10px; z-index: 1000; transform: translateY(-160%); padding: 12px 18px; border-radius: 999px; background: var(--ink); color: #fff; font-weight: 650; }
.skip-link:focus { transform: translateY(0); }
site-header, site-footer { display: block; }

.site-header { position: sticky; top: 0; z-index: 50; border-bottom: 1px solid rgba(16,39,51,.08); background: rgba(255,255,255,.88); -webkit-backdrop-filter: saturate(160%) blur(18px); backdrop-filter: saturate(160%) blur(18px); }
.header-shell { position: relative; min-height: 88px; padding: 8px 24px; display: flex; align-items: center; gap: 28px; }
.brand-lockup { display: flex; align-items: center; gap: 16px; flex-shrink: 0; }
.brand-lockup img { display: block; }
.brand-lockup .brand-logo-alliance { width: auto; height: 44px; }
.brand-lockup .brand-logo-biz { width: auto; height: 56px; }
.brand-lockup .brand-logo-auris { width: auto; height: 30px; }
.brand-name { color: var(--blue-deep); font-size: 1.12rem; font-weight: 750; line-height: 1.05; letter-spacing: -.015em; white-space: nowrap; }
.brand-divider { align-self: stretch; width: 1px; margin-block: 6px; background: rgba(16,39,51,.18); }
.brand-join { width: auto; height: auto; flex: 0 0 auto; display: inline-block; border: 0; border-radius: 0; background: transparent; color: #8d8071; font-size: 22px; font-weight: 500; line-height: 1; box-shadow: none; }
.brand-lockup:hover { color: inherit; text-decoration: none; }
.brand-lockup:hover img, .brand-lockup:hover .brand-join { filter: none; opacity: 1; transform: none; }
.primary-nav { margin-left: auto; display: flex; align-items: center; gap: 28px; }
.primary-nav a { min-height: 44px; display: inline-flex; align-items: center; color: var(--ink); font-size: .94rem; font-weight: 560; }
.primary-nav a:hover { color: var(--blue); }
.primary-nav .nav-cta { padding: 0 19px; border-radius: 999px; background: #eaf1f4; color: var(--blue); font-weight: 650; transition: background 180ms var(--ease), transform 180ms var(--ease); }
.primary-nav .nav-cta:hover { background: #dfeaf0; transform: translateY(-1px); }
.lang-switch { display: flex; align-items: center; gap: 12px; }
.lang-label { color: var(--ink-soft); font-size: .82rem; font-weight: 600; }
.lang-options { display: inline-flex; align-items: center; gap: 2px; }
.lang-options .lang-option { min-height: 32px; padding: 0 8px; display: inline-flex; align-items: center; border-radius: 6px; color: var(--ink-soft); font-size: .84rem; font-weight: 600; letter-spacing: .02em; }
.lang-options a.lang-option:hover { color: var(--blue); }
.lang-options .lang-option[aria-current] { color: var(--ink); text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 5px; }
.lang-switch-header .lang-label { display: none; }
.primary-nav .lang-switch-header { margin-left: -12px; }
.primary-nav .lang-switch-header .lang-option { min-height: 44px; }
.menu-toggle { display: none; width: 44px; min-width: 44px; height: 44px; min-height: 44px; flex: 0 0 44px; margin-left: auto; padding: 0; border: 0; border-radius: 50%; background: #eef3f5; color: var(--ink); cursor: pointer; }
.menu-toggle span { position: absolute; left: 12px; width: 20px; height: 1.5px; background: currentColor; transition: transform 260ms var(--ease); }
.menu-toggle span:first-child { transform: translateY(-4px); }
.menu-toggle span:last-child { transform: translateY(4px); }

.site-footer { border-top: 1px solid var(--line); background: #f8fafa; }
.footer-shell { padding: 64px 24px 26px; }
.footer-top { display: flex; flex-direction: column; align-items: flex-start; gap: 22px; margin-bottom: 46px; }
.footer-brand { display: flex; align-items: center; gap: 18px; flex: 0 0 auto; }
.footer-brand img { display: block; }
.footer-brand .brand-logo-biz { width: auto; height: 68px; }
.footer-brand .brand-logo-auris { width: auto; height: 36px; }
.footer-brand .brand-logo-alliance { width: auto; height: 53px; }
.footer-intro { margin: 0; color: var(--ink-soft); line-height: 1.6; }
.footer-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 48px; padding-bottom: 42px; border-bottom: 1px solid var(--line); }
.footer-grid h2 { margin: 0 0 13px; color: var(--blue); font-size: .78rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.footer-grid p { margin: 0; color: var(--ink-soft); font-size: .96rem; line-height: 1.7; }
.footer-grid nav { display: flex; flex-direction: column; align-items: flex-start; gap: 9px; }
.footer-grid nav h2 { margin-bottom: 4px; }
.footer-contact { margin-top: 8px !important; display: flex; flex-direction: column; align-items: flex-start; }
.footer-contact a, .footer-grid nav a { display: inline-flex; align-items: center; min-height: 32px; }
.footer-grid nav { gap: 0; }
.footer-meta { padding-top: 22px; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 28px; color: var(--ink-soft); font-size: .9rem; }
.footer-meta > a { color: var(--ink-soft); }
.footer-meta > a:hover { color: var(--blue); }
.privacy-settings-button { min-height: 32px; padding: 0; border: 0; background: transparent; color: var(--ink-soft); font: inherit; cursor: pointer; }
.privacy-settings-button:hover { color: var(--blue); }

.analytics-consent { position: fixed; z-index: 100; inset: auto 20px 20px; max-width: 720px; max-height: calc(100dvh - 40px); overflow-y: auto; margin-inline: auto; padding: clamp(24px, 4vw, 34px); border-radius: 16px; background: var(--ink); color: #fff; box-shadow: 0 18px 54px rgba(16,39,51,.28); }
.analytics-consent :is(a, button):focus-visible { outline-color: #fff; }
.analytics-consent[hidden] { display: none; }
.analytics-consent h2 { margin: 0 0 10px; color: #fff; font-size: clamp(1.35rem, 2.5vw, 1.75rem); line-height: 1.2; letter-spacing: -.015em; }
.analytics-consent p { max-width: 66ch; margin: 0; color: #e6edef; font-size: .96rem; line-height: 1.6; }
.analytics-consent a { color: #fff; text-decoration: underline; }
.analytics-consent-actions { margin-top: 22px; display: flex; flex-wrap: wrap; gap: 12px; }
.analytics-consent .button { min-height: 48px; border: 1px solid #fff; background: #fff; color: var(--ink); box-shadow: none; }
.analytics-consent .button:hover { background: #edf3f5; color: var(--ink); box-shadow: none; }
.analytics-consent .button-secondary { background: transparent; color: #fff; }
.analytics-consent .button-secondary:hover { background: rgba(255,255,255,.1); color: #fff; }

.lang-switch-footer { margin-left: auto; gap: 8px; color: var(--ink-soft); }
.lang-icon { width: 16px; height: 16px; flex: 0 0 auto; }
.lang-switch-footer .lang-options { gap: 0; }
.lang-switch-footer .lang-option { min-height: 32px; padding: 0 10px; border-radius: 0; font-size: .9rem; font-weight: 500; letter-spacing: 0; }
.lang-switch-footer .lang-option + .lang-option { border-left: 1px solid rgba(16,39,51,.18); }
.lang-switch-footer .lang-option:first-child { padding-left: 0; }
.lang-switch-footer .lang-option:last-child { padding-right: 0; }
.lang-switch-footer .lang-option[aria-current] { color: var(--ink); text-decoration: none; }

.page-hero { padding: clamp(68px, 9vw, 116px) 24px; background: var(--surface); border-bottom: 1px solid var(--line); }
.page-hero-inner { display: grid; grid-template-columns: minmax(0, .82fr) minmax(420px, 1.18fr); align-items: center; gap: clamp(48px, 8vw, 112px); }
.eyebrow { margin: 0 0 18px; color: var(--blue); font-size: .82rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.back-link { min-height: 44px; margin-bottom: 28px; display: inline-flex; align-items: center; font-weight: 650; }
.page-hero h1 { max-width: 11ch; margin: 0 0 22px; font-size: clamp(3.2rem, 6vw, 6rem); line-height: 1.03; letter-spacing: -.03em; }
.page-hero-copy > p:last-child { max-width: 38ch; margin: 0; color: var(--ink-soft); font-size: clamp(1.14rem, 1.8vw, 1.36rem); line-height: 1.52; }
.page-hero figure { margin: 0; overflow: hidden; aspect-ratio: 4 / 3; border-radius: 22px; background: #e9eeee; }
.page-hero img { width: 100%; height: 100%; display: block; object-fit: cover; }
.page-body { max-width: 1040px; margin: 0 auto; padding: clamp(76px, 10vw, 132px) 24px; }
.page-lede { max-width: 760px; margin-bottom: clamp(70px, 9vw, 110px); }
.page-lede h2, .content-section h2 { margin: 0 0 22px; font-size: clamp(2.15rem, 4vw, 3.65rem); line-height: 1.08; letter-spacing: -.025em; }
.page-lede p, .content-section p { margin: 0; color: var(--ink-soft); font-size: 1.08rem; line-height: 1.72; }
.content-section { padding: clamp(54px, 7vw, 82px) 0; display: grid; grid-template-columns: minmax(210px, .62fr) minmax(0, 1.38fr); gap: clamp(40px, 8vw, 104px); border-top: 1px solid var(--line); }
.content-section h2 { font-size: clamp(1.8rem, 3vw, 2.65rem); }
.option-list { display: grid; }
.option { padding: 24px 0; display: grid; grid-template-columns: minmax(145px, .44fr) minmax(0, 1fr); gap: 28px; border-top: 1px solid var(--line); }
.option:first-child { padding-top: 0; border-top: 0; }
.option h3 { margin: 0; font-size: 1.12rem; line-height: 1.35; }
.option p { font-size: 1rem; line-height: 1.62; }
.note { margin-top: 46px; padding: 30px 32px; border-radius: 14px; background: #f5f8ec; color: var(--ink-soft); line-height: 1.65; }
.page-cta { margin-top: 70px; padding: clamp(36px, 6vw, 62px); display: flex; align-items: center; justify-content: space-between; gap: 32px; border-radius: 20px; background: var(--blue-deep); color: #fff; }
.page-cta h2 { max-width: 14ch; margin: 0; font-size: clamp(2rem, 3.7vw, 3.2rem); line-height: 1.08; }
.button { min-height: 50px; padding: 0 24px; display: inline-flex; align-items: center; justify-content: center; border: 0; border-radius: 999px; background: var(--blue); color: #fff; font: inherit; font-weight: 650; cursor: pointer; transition: transform 180ms var(--ease), background 180ms var(--ease), box-shadow 180ms var(--ease); }
.button:hover { color: #fff; background: var(--blue-deep); transform: translateY(-2px); box-shadow: 0 12px 30px rgba(16,39,51,.18); }
.button:disabled { cursor: progress; transform: none; }
.button-secondary { border: 1px solid rgba(22,83,122,.35); background: transparent; color: var(--blue); }
.button-secondary:hover { background: var(--surface); color: var(--blue-deep); box-shadow: none; }
.page-cta .button { background: #fff; color: var(--blue-deep); }
.page-cta .button:hover { color: var(--blue-deep); background: #f4f7f8; box-shadow: none; }

.contact-hero { padding: clamp(72px, 9vw, 118px) 24px 56px; background: var(--surface); }
.contact-hero-layout { display: grid; grid-template-columns: minmax(460px, .92fr) minmax(0, 1.08fr); gap: clamp(48px, 6vw, 80px); align-items: center; }
.contact-hero-copy { min-width: 0; }
.contact-hero h1 { max-width: 10ch; margin: 0 0 22px; font-size: clamp(3.2rem, 5.2vw, 5.5rem); line-height: 1.03; letter-spacing: -.03em; text-wrap: balance; }
.contact-hero p { max-width: 47ch; margin: 0; color: var(--ink-soft); font-size: clamp(1.15rem, 2vw, 1.4rem); line-height: 1.55; }
.contact-hero .eyebrow { margin: 0 0 18px; color: var(--blue); font-size: .82rem; line-height: 1.4; }
.contact-hero-image { margin: 0; overflow: hidden; aspect-ratio: 4 / 3; border-radius: 16px; background: #e7ecec; }
.contact-hero-image img { width: 100%; height: 100%; display: block; object-fit: cover; }
.booking-layout { padding: clamp(48px, 7vw, 88px) 24px clamp(64px, 9vw, 112px); }
.booking { position: relative; overflow: hidden; border: 1px solid var(--line); border-radius: 20px; background: #fff; transition: border-color 300ms var(--ease), background 300ms var(--ease); }
/* Während Calendly lädt, steht der Rahmen schon in seiner Endhöhe, ist aber noch
   unsichtbar. Darüber liegt der eigene Ladehinweis. So gibt es einen Ladepunkt
   statt zweier und keinen Sprung, wenn das Widget erscheint. */
.booking[data-state="pending"] .booking-frame { opacity: 0; pointer-events: none; }
.booking[data-state="pending"] .booking-pending { position: absolute; inset: 0; z-index: 1; max-width: none; margin: 0; background: #fff; }
/* Sobald Calendly steht, verschwindet der Rahmen: Das Widget bringt seine eigene Karte mit. */
.booking[data-state="ready"] { overflow: visible; border-color: transparent; background: transparent; }
.booking-panel { max-width: 640px; margin-inline: auto; padding: clamp(36px, 5vw, 60px) clamp(24px, 4vw, 40px); text-align: center; animation: booking-enter 460ms var(--ease) both; }
.booking-panel h2 { margin: 0 0 12px; font-size: clamp(1.7rem, 3vw, 2.3rem); letter-spacing: -.02em; }
.booking-panel p { max-width: 52ch; margin: 0 auto 28px; color: var(--ink-soft); line-height: 1.65; }
.booking-actions { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 12px; }
.booking-pending { min-height: 288px; display: grid; place-content: center; justify-items: center; gap: 20px; }
.booking-panel[hidden], .booking-frame[hidden] { display: none; }
.booking-pending p { margin: 0; }
.booking-spinner { width: 34px; height: 34px; border: 2px solid rgba(22,83,122,.2); border-top-color: var(--blue); border-radius: 50%; animation: booking-spin 760ms linear infinite; }
.booking-frame { height: 700px; opacity: 1; transition: opacity 360ms var(--ease); }
.booking-frame iframe { display: block; }
@keyframes booking-enter { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes booking-spin { to { transform: rotate(360deg); } }
.contact-secondary { padding: clamp(64px, 8vw, 104px) 24px clamp(84px, 10vw, 132px); background: var(--surface); }
.contact-secondary h2 { margin: 0 0 36px; font-size: clamp(1.8rem, 3vw, 2.6rem); letter-spacing: -.02em; }
.contact-secondary-grid { display: grid; grid-template-columns: minmax(240px, .7fr) minmax(0, 1.3fr); gap: clamp(40px, 7vw, 96px); align-items: start; }
.contact-form { scroll-margin-top: 112px; }
.contact-form h3 { margin: 0 0 12px; color: var(--ink); font-size: clamp(1.35rem, 2vw, 1.7rem); line-height: 1.25; letter-spacing: -.015em; }
.contact-form > p { margin: 0 0 28px; color: var(--ink-soft); line-height: 1.65; }
.form-honeypot { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; }
.form-grid[hidden], .contact-success[hidden] { display: none; }
.field { display: grid; gap: 9px; }
.field-wide { grid-column: 1 / -1; }
.field label, .field legend { color: var(--ink); font-size: .94rem; font-weight: 650; }
.field input, .field select, .field textarea { width: 100%; min-height: 52px; padding: 13px 14px; border: 1px solid rgba(16,39,51,.2); border-radius: 10px; background: #fff; color: var(--ink); font: inherit; transition: border-color 160ms var(--ease), box-shadow 160ms var(--ease); }
.field textarea { min-height: 132px; resize: vertical; }
/* Eigener Pfeil statt der Systemdarstellung, damit Auswahl und Eingabefelder
   in jedem Browser dieselbe Form haben. */
.field select { appearance: none; -webkit-appearance: none; padding-right: 44px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5l5-5' fill='none' stroke='%2316537a' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 16px center; background-size: 12px 8px; }
.field input:hover, .field select:hover, .field textarea:hover { border-color: rgba(16,39,51,.38); }
/* Ein Ring statt zweier: die Feldkante selbst wird zur Markierung, der weiche
   Schein daneben hebt sie ab. Der unsichtbare Umriss bleibt für den
   Kontrastmodus stehen, der Schatten dort nicht darstellbar wäre. */
.field input:focus-visible, .field select:focus-visible, .field textarea:focus-visible { outline: 2px solid transparent; outline-offset: 2px; border-color: var(--blue); box-shadow: 0 0 0 3px rgba(22,83,122,.22); }
/* Falsche Eingabe: rote Kante am Feld, Begründung direkt darunter. Die Farbe
   allein trägt die Aussage nie, der Text steht immer dabei (WCAG 1.4.1). */
.field-error { margin: 0; color: var(--alert); font-size: .88rem; line-height: 1.45; }
.field-error[hidden] { display: none; }
.form-grid > .field-error { grid-column: 1 / -1; margin-top: -12px; }
.field-optional { color: var(--ink-soft); font-size: .82rem; font-weight: 500; }
.field-hint { margin: 7px 0 0; color: var(--ink-soft); font-size: .84rem; line-height: 1.5; }
.field :is(input, select, textarea)[aria-invalid="true"] { border-color: var(--alert); }
.field :is(input, select, textarea)[aria-invalid="true"]:focus-visible { border-color: var(--alert); box-shadow: 0 0 0 3px rgba(154,45,28,.22); }
.consent input[aria-invalid="true"] { outline: 2px solid var(--alert); outline-offset: 3px; }
.consent { grid-column: 1 / -1; display: grid; grid-template-columns: 20px 1fr; gap: 11px; align-items: start; color: var(--ink-soft); font-size: .9rem; line-height: 1.55; }
.consent input { width: 18px; height: 18px; margin: 2px 0 0; accent-color: var(--blue); }
.form-actions { grid-column: 1 / -1; display: flex; align-items: center; flex-wrap: wrap; gap: 18px; }
.form-status { margin: 0; color: var(--ink-soft); font-size: .92rem; line-height: 1.45; }
.form-status:empty { display: none; }
/* Der Sendehinweis steht sichtbar auf dem Knopf. Hier bleibt er nur für Screenreader. */
.form-status.is-assistive { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
/* Fehlschlag: die Anfrage ist nicht raus. Das Formular bleibt mit allen Eingaben
   stehen, daneben stehen Telefon und E-Mail als direkter Weg. */
.form-error { grid-column: 1 / -1; padding: 20px 22px; border-radius: 12px; background: #fbf0ec; color: #6d2b1c; animation: booking-enter 420ms var(--ease) both; }
.form-error[hidden] { display: none; }
.form-error p { margin: 0; font-size: .95rem; line-height: 1.6; }
.form-error .form-error-title { margin-bottom: 4px; font-weight: 700; }
.form-error .form-error-links { margin-top: 10px; display: flex; flex-wrap: wrap; align-items: center; gap: 2px 24px; }
.form-error-links a { min-height: 44px; display: inline-flex; align-items: center; color: #6d2b1c; font-weight: 700; text-decoration: underline; text-underline-offset: .2em; }
.form-error-links a:hover { color: #52200f; }
.contact-success { max-width: 620px; padding: clamp(28px, 5vw, 44px); border-radius: 14px; background: #e6f0ee; }
.contact-success-icon { width: 48px; height: 48px; margin-bottom: 24px; overflow: visible; fill: none; stroke: var(--blue-deep); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.contact-success h3 { max-width: 20ch; margin-bottom: 12px; font-size: clamp(1.55rem, 3vw, 2.15rem); text-wrap: balance; }
.contact-success p { max-width: 45ch; margin: 0 0 28px; color: var(--ink-soft); line-height: 1.65; }
.contact-success-reset { min-height: 44px; padding: 0; border: 0; border-bottom: 1px solid currentColor; background: transparent; color: var(--blue-deep); font: inherit; font-weight: 700; cursor: pointer; }
.contact-success-reset:hover { color: var(--blue); }
.contact-direct { margin: 0; }
.contact-direct div { padding: 16px 0; border-top: 1px solid var(--line); }
.contact-direct div:last-child { border-bottom: 1px solid var(--line); }
.contact-direct dt { margin-bottom: 7px; font-weight: 700; }
.contact-direct dd { margin: 0; color: var(--ink-soft); line-height: 1.6; }
.required-note { grid-column: 1 / -1; margin: 0; color: var(--ink-soft); font-size: .88rem; line-height: 1.5; }
.required-mark { color: var(--blue-deep); font-weight: 750; }

html[lang="de"] :is(.not-found, .skip-link) [lang="en"], html[lang="en"] :is(.not-found, .skip-link) [lang="de"] { display: none; }
.not-found { min-height: calc(100vh - 89px); min-height: calc(100svh - 89px); padding: clamp(48px, 8vh, 88px) 24px; display: grid; align-items: center; overflow: hidden; background: var(--surface); }
.not-found-shell { display: grid; grid-template-columns: minmax(0, .9fr) minmax(340px, 1.1fr); align-items: center; gap: clamp(40px, 8vw, 112px); }
.not-found-copy { position: relative; z-index: 1; animation: page-enter 720ms var(--ease) both; }
.not-found h1 { max-width: 11ch; margin: 0 0 20px; font-size: clamp(3.2rem, 6vw, 6rem); line-height: .98; letter-spacing: -.04em; text-wrap: balance; }
.not-found-copy > p { max-width: 46ch; margin: 0 0 36px; color: var(--ink-soft); font-size: clamp(1.08rem, 1.6vw, 1.25rem); line-height: 1.55; }
.not-found-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 28px; }
.not-found-link { min-height: 44px; display: inline-flex; align-items: center; font-weight: 650; }
.not-found-code { justify-self: end; margin: 0; color: #dfe9ec; font-size: clamp(12rem, 24vw, 23rem); font-weight: 800; line-height: .72; letter-spacing: -.09em; user-select: none; animation: page-enter 820ms 80ms var(--ease) both; }
.legal-layout { padding: clamp(56px, 7vw, 96px) 24px clamp(84px, 10vw, 132px); }
.legal-body { max-width: 780px; color: var(--ink-soft); font-size: 1rem; line-height: 1.75; }
.legal-body h2 { margin: 0 0 22px; color: var(--ink); font-size: clamp(1.8rem, 3vw, 2.4rem); line-height: 1.1; letter-spacing: -.02em; }
.legal-body h2:not(:first-child) { margin-top: 64px; padding-top: 48px; border-top: 1px solid var(--line); }
.legal-body h3 { margin: 40px 0 14px; color: var(--ink); font-size: 1.35rem; line-height: 1.3; }
.legal-body h4 { margin: 26px 0 8px; color: var(--ink); font-size: 1.08rem; line-height: 1.4; }
.legal-body p, .legal-body ul { margin: 0 0 14px; }
.legal-body ul { padding-left: 20px; }
.legal-body li + li { margin-top: 6px; }
.legal-label { margin: 24px 0 6px !important; color: var(--blue); font-size: .8rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.legal-question { color: var(--ink); font-weight: 650; }
.legal-note { margin: 0 0 48px !important; padding: 18px 22px; border-radius: 12px; background: var(--surface); font-size: .94rem; }
.legal-note + h2 { margin-top: 0 !important; padding-top: 0 !important; border-top: 0 !important; }

@keyframes page-enter { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: translateY(0); } }
.page-hero-copy, .contact-hero-copy { animation: page-enter 720ms var(--ease) both; }
.page-hero figure, .contact-hero-image { animation: page-enter 820ms 100ms var(--ease) both; }
.page-motion-ready .page-reveal { opacity: 0; transform: translateY(34px); transition: opacity 680ms var(--ease), transform 740ms var(--ease); }
.page-motion-ready .page-reveal.is-visible { opacity: 1; transform: translateY(0); }

@media (max-width: 1100px) {
  .header-shell { gap: 20px; }
  .primary-nav { gap: 20px; }
  .brand-lockup { gap: 12px; }
  .brand-lockup .brand-logo-alliance { height: 40px; }
  .brand-lockup .brand-logo-biz { height: 48px; }
  .brand-lockup .brand-logo-auris { height: 26px; }
  .brand-name { font-size: 1rem; }
}

@media (max-width: 900px) {
  .menu-toggle { position: relative; display: inline-grid; place-items: center; }
  .primary-nav { position: absolute; top: 100%; left: 0; right: 0; margin: 0; padding: 4px 24px 12px; display: grid; gap: 0; border-bottom: 1px solid var(--line); background: #fff; box-shadow: 0 18px 40px rgba(16,39,51,.08); opacity: 0; visibility: hidden; transform: translateY(-6px); transition: opacity 200ms var(--ease), transform 240ms var(--ease), visibility 200ms; }
  .primary-nav > a { min-height: 54px; padding: 0; border-bottom: 1px solid var(--line); font-size: 1.02rem; font-weight: 600; }
  .primary-nav > a:hover { color: var(--blue); }
  .primary-nav .nav-cta { justify-content: space-between; padding: 0; border-radius: 0; background: none; color: var(--blue); }
  .primary-nav .nav-cta::after { content: "→"; font-weight: 500; }
  .primary-nav .nav-cta:hover { background: none; color: var(--blue-deep); transform: none; }
  .primary-nav .lang-switch-header { margin: 0; padding-top: 8px; justify-content: space-between; }
  .lang-switch-header .lang-label { display: inline; }
  .primary-nav .lang-switch-header .lang-option { min-height: 44px; }
  .lang-options { margin-right: -8px; }
  .site-header[data-menu-open="true"] .primary-nav { opacity: 1; visibility: visible; transform: translateY(0) scale(1); }
  .site-header[data-menu-open="true"] .menu-toggle span:first-child { transform: rotate(45deg); }
  .site-header[data-menu-open="true"] .menu-toggle span:last-child { transform: rotate(-45deg); }
  .page-hero-inner, .contact-hero-layout, .contact-secondary-grid { grid-template-columns: 1fr; }
  .not-found-shell { grid-template-columns: minmax(0, 1fr) minmax(250px, .7fr); gap: 24px; }
  .footer-top { gap: 18px; margin-bottom: 32px; }
  .page-hero-copy { max-width: 700px; }
}

@media (max-width: 1080px) {
  .contact-hero-layout { grid-template-columns: 1fr; gap: 48px; }
  .contact-hero-copy { max-width: 720px; }
  .contact-hero-image { width: 100%; max-width: 820px; }
}

@media (max-width: 640px) {
  .header-shell { min-height: 76px; padding-inline: 16px; }
  .brand-lockup { gap: 10px; }
  .brand-lockup .brand-logo-alliance { height: 32px; }
  .brand-lockup .brand-logo-biz { height: 40px; }
  .brand-lockup .brand-logo-auris { height: 21px; }
  .brand-name { font-size: .9rem; }
  .brand-join { width: auto; height: auto; font-size: 16px; }
  .primary-nav { padding-inline: 16px; }
  .footer-shell { padding: 48px 20px 28px; }
  /* Unter etwa 340px passt die Logozeile nicht mehr nebeneinander und ragte
     bisher aus dem Viewport. Umbruch statt Ueberlauf. */
  .footer-brand { gap: 12px; flex-wrap: wrap; }
  .footer-brand .brand-logo-biz { height: 48px; }
  .footer-brand .brand-logo-auris { height: 26px; }
  .footer-brand .brand-logo-alliance { height: 40px; }
  .footer-intro { font-size: .96rem; }
  .footer-grid { grid-template-columns: 1fr; gap: 0; padding-bottom: 0; border-bottom: 0; }
  .footer-grid > * { padding: 24px 0; border-top: 1px solid var(--line); }
  .footer-contact { margin-top: 10px !important; }
  .footer-contact a, .footer-grid nav a { min-height: 44px; }
  .footer-grid nav { gap: 0; }
  .footer-grid nav h2 { margin-bottom: 6px; }
  .footer-meta { padding-top: 20px; flex-direction: column; align-items: flex-start; gap: 6px; border-top: 1px solid var(--line); }
  .footer-meta > a { min-height: 44px; display: inline-flex; align-items: center; }
  .privacy-settings-button { min-height: 44px; }
  .lang-switch-footer { margin: 8px 0 0; }
  .lang-switch-footer .lang-option { min-height: 44px; }
  .page-hero { padding: 44px 20px 48px; }
  .page-hero-inner { gap: 38px; }
  .page-hero h1 { font-size: clamp(2.8rem, 14vw, 4.2rem); }
  .page-hero figure { border-radius: 16px; }
  .page-body { padding: 70px 20px 88px; }
  .content-section { grid-template-columns: 1fr; gap: 24px; }
  .option { grid-template-columns: 1fr; gap: 8px; }
  .note { padding: 25px 23px; }
  .page-cta { align-items: flex-start; flex-direction: column; padding: 32px 27px; border-radius: 16px; }
  .contact-hero { padding: 54px 20px 48px; }
  .contact-hero-layout { gap: 38px; }
  .contact-hero h1 { max-width: 11ch; font-size: clamp(2.75rem, 12vw, 4rem); }
  .booking-layout { padding: 32px 16px 56px; }
  .booking { border-radius: 16px; }
  .booking-panel { padding: 28px 22px; }
  .booking-frame { height: 1040px; }
  .contact-secondary { padding: 56px 20px 80px; }
  .form-grid { grid-template-columns: 1fr; }
  .field-wide, .consent, .form-actions { grid-column: auto; }
  .form-actions { align-items: flex-start; flex-direction: column; }
  .button { width: 100%; }
  .analytics-consent { inset: auto 12px 12px; padding: 22px 20px; }
  .analytics-consent-actions { display: grid; }
  .not-found { position: relative; min-height: calc(100vh - 77px); min-height: calc(100svh - 77px); padding: 44px 20px calc(44px + env(safe-area-inset-bottom)); align-items: center; }
  .not-found-shell { position: relative; grid-template-columns: 1fr; gap: 0; }
  .not-found-copy { padding-bottom: clamp(76px, 18vh, 132px); }
  .not-found h1 { max-width: 10ch; margin-bottom: 18px; font-size: clamp(3rem, 14vw, 4.6rem); }
  .not-found-copy > p { max-width: 33ch; margin-bottom: 30px; font-size: 1.05rem; }
  .not-found-actions { align-items: stretch; flex-direction: column; gap: 8px; }
  .not-found-link { min-height: 48px; justify-content: center; }
  .not-found-code { position: absolute; right: -12px; bottom: -4px; z-index: 0; font-size: clamp(8.5rem, 43vw, 12rem); line-height: .72; }
}

@media (max-width: 360px) {
  /* WCAG 2.5.8: Branding darf das 44px-Menüziel bei engem Reflow nicht verdrängen. */
  .header-shell { padding-inline: 12px; gap: 8px; }
  .brand-lockup { gap: 6px; }
  .brand-lockup .brand-logo-biz { height: 34px; }
  .brand-lockup .brand-logo-auris { height: 18px; }
  .brand-name { font-size: .78rem; }
  .brand-divider { margin-block: 4px; }
  .brand-join { font-size: 14px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  /* WCAG 2.3.3: Raumbewegung entfällt, kurze Zustandswechsel bleiben erkennbar. */
  *, *::before, *::after { animation: none !important; transition-duration: 80ms !important; transition-delay: 0ms !important; }
  .page-motion-ready .page-reveal { opacity: 1; transform: none; }
}

@media (prefers-reduced-transparency: reduce) {
  .site-header, .primary-nav { -webkit-backdrop-filter: none; backdrop-filter: none; background: #fff; }
}