/* ==========================================================================
   LUMA Design — Signature Site v9
   Register: warme, runde, foto-geführte Marktplatz-Sprache.
   Eine Akzentfarbe, sparsam. Zwei Rundungs-Register (8px Buttons,
   Vollpille für Chips/Suchleiste). Genau eine Schatten-Stufe.
   ========================================================================== */

/* --- Schrift: selbst gehostet, kein CDN (DSGVO) -------------------------- */
@font-face {
  font-family: 'Inter';
  src: url('fonts/inter-var.woff2') format('woff2');
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
  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;
}

/* --- Tokens ------------------------------------------------------------- */
:root {
  color-scheme: light;

  /* Farbe. Akzent aus der Airbnb-Coral-Familie neu abgeleitet:
     wärmer (Hue 33 statt 17), dunkler (L .575 statt .658) — Ziegel/Abendlicht
     statt Pink, und dunkel genug für 4.75:1 mit weißer Schrift. */
  --accent: oklch(0.575 0.175 33);
  --accent-press: oklch(0.505 0.160 33);
  --accent-soft: oklch(0.960 0.018 33);
  --accent-line: oklch(0.885 0.050 33);

  --ink: oklch(0.235 0.012 45);
  --body: oklch(0.430 0.012 45);
  --muted: oklch(0.530 0.012 45);
  /* dekorative Trennlinien */
  --hairline: oklch(0.895 0.006 45);
  /* Rand von echten Bedienelementen: muss 3:1 schaffen (WCAG 1.4.11) */
  --control-line: oklch(0.635 0.008 45);

  --canvas: oklch(0.995 0.003 60);
  --surface: oklch(0.972 0.005 50);
  --surface-strong: oklch(0.945 0.007 50);

  /* Rundung: zwei Register */
  --r-sm: 8px;
  --r-md: 14px;
  --r-lg: 20px;
  --r-full: 9999px;

  /* Abstand, 4px-Basis */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 24px;
  --s-6: 32px;
  --s-7: 48px;
  --s-8: 64px;
  --section: clamp(3.5rem, 2rem + 6vw, 5rem);
  --gutter: clamp(1rem, 0.5rem + 2.5vw, 2rem);
  --max: 1120px;

  /* Genau eine Schatten-Stufe, nur für gehoverte Karten und Sticky-Leisten */
  --lift:
    oklch(0.235 0.012 45 / 0.02) 0 0 0 1px,
    oklch(0.235 0.012 45 / 0.05) 0 2px 6px,
    oklch(0.235 0.012 45 / 0.10) 0 4px 8px;

  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
}

/* --- Reset -------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: var(--s-5);
  /* die fixe Aktionsleiste darf keinen fokussierten Treffer verdecken */
  scroll-padding-bottom: calc(80px + env(safe-area-inset-bottom));
}

body {
  margin: 0;
  background: var(--canvas);
  color: var(--body);
  font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: 1rem;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-synthesis-weight: none;
  /* clip statt hidden: erzeugt keinen Scroll-Container, sticky bleibt heil */
  overflow-x: clip;
}

img { max-width: 100%; height: auto; display: block; }
[hidden] { display: none !important; }

::selection { background: var(--accent-line); color: var(--ink); }

/* --- Typografie --------------------------------------------------------- */
h1, h2, h3, h4 {
  color: var(--ink);
  margin: 0;
  text-wrap: balance;
  letter-spacing: -0.018em;
}

h1 {
  /* display-xl: bewusst nicht schwerer als 600 — die Fotos tragen die Hierarchie */
  font-size: clamp(1.75rem, 1.35rem + 1.7vw, 2.625rem);
  font-weight: 600;
  line-height: 1.14;
  letter-spacing: -0.022em;
}

h2 {
  /* display-lg */
  font-size: clamp(1.375rem, 1.15rem + 0.95vw, 1.75rem);
  font-weight: 600;
  line-height: 1.18;
}

h3 {
  /* display-md */
  font-size: 1.3125rem;
  font-weight: 600;
  line-height: 1.28;
  letter-spacing: -0.014em;
}

h4 {
  /* display-sm */
  font-size: 1.125rem;
  font-weight: 600;
  line-height: 1.24;
  letter-spacing: -0.01em;
}

p { margin: 0 0 var(--s-4); text-wrap: pretty; }
p:last-child { margin-bottom: 0; }

.lead {
  font-size: clamp(1rem, 0.94rem + 0.3vw, 1.125rem);
  color: var(--body);
  max-width: 34em;
}

.small { font-size: 0.875rem; line-height: 1.45; }
.muted { color: var(--muted); }

.caption {
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 1.45;
  color: var(--muted);
}

.nowrap { white-space: nowrap; }
.num { font-variant-numeric: tabular-nums; }

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

/* Sprunglink: unsichtbar, bis er den Fokus bekommt */
a.sr-only:focus {
  position: fixed;
  z-index: 70;
  top: var(--s-3);
  left: var(--s-3);
  width: auto; height: auto;
  margin: 0; padding: 12px 20px;
  overflow: visible;
  clip-path: none;
}

a { color: var(--accent-press); }
a:hover { color: var(--ink); }

.prose a,
.legal a {
  text-decoration-thickness: from-font;
  text-underline-position: from-font;
  text-underline-offset: 0.12em;
}

/* Fokus: eine Regel für alles, immer sichtbar */
:where(a, button, input, textarea, summary, [tabindex]):focus-visible {
  outline: 2px solid var(--accent-press);
  outline-offset: 3px;
}

/* Bildlinks sitzen bündig an der Kartenkante, die overflow:hidden beschneidet.
   Ring nach innen legen, sonst ist er auf drei Seiten weg. */
.card-media:focus-visible,
.showcase-media:focus-visible { outline-offset: -3px; }

.btn, .chip, .linkout, .pillbar, .faq summary, button {
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

/* --- Layout-Bausteine --------------------------------------------------- */
.wrap {
  width: 100%;
  max-width: var(--max);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.section { padding-block: var(--section); }
.section-soft { background: var(--surface); }

.section-head { max-width: 40rem; margin-bottom: var(--s-6); }
.section-head p { margin-top: var(--s-3); margin-bottom: 0; }

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: 0.01em;
  color: var(--muted);
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--r-full);
  padding: 6px 14px;
  margin: 0 0 var(--s-4);
}

.hr { border: 0; border-top: 1px solid var(--hairline); margin: 0; }

/* --- Buttons: 8px-Register ---------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);
  min-height: 48px;
  padding: 12px 20px;
  border-radius: var(--r-sm);
  border: 1px solid transparent;
  font: inherit;
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 180ms var(--ease-out), transform 140ms var(--ease-out), border-color 180ms var(--ease-out);
}

.btn:active { transform: scale(0.97); }

.btn-primary {
  background: var(--accent);
  color: oklch(1 0 0);
  border-color: var(--accent);
}
.btn-primary:hover { background: var(--accent-press); border-color: var(--accent-press); color: oklch(1 0 0); }

.btn-ghost {
  background: var(--canvas);
  color: var(--ink);
  border-color: var(--control-line);
}
.btn-ghost:hover { background: var(--surface); border-color: var(--muted); color: var(--ink); }

.btn[disabled] { opacity: 0.55; cursor: not-allowed; transform: none; }

.btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3);
  margin-bottom: var(--s-4);
}
.btn-row .btn { flex: 1 1 auto; }

@media (min-width: 560px) {
  .btn-row .btn { flex: 0 0 auto; }
}

/* --- Kopfzeile ---------------------------------------------------------- */
.header {
  background: var(--canvas);
  border-bottom: 1px solid var(--hairline);
}

.header-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4);
  min-height: 64px;
}

/* Mobil: Navigation rutscht in eine zweite, wischbare Zeile.
   Kein order-Umbau: die DOM-Reihenfolge Marke, Navigation, CTA stimmt
   überall mit der optischen überein, damit auch die Tab-Folge passt. */
.header-nav { flex: 1 0 100%; min-width: 0; }

.brand {
  display: inline-flex;
  align-items: baseline;
  gap: 7px;
  text-decoration: none;
  color: var(--ink);
  font-weight: 600;
  font-size: 1.0625rem;
  letter-spacing: 0.06em;
  padding: 12px 0;
}
.brand span { color: var(--muted); font-weight: 400; letter-spacing: 0.01em; font-size: 0.875rem; }

/* Navigation als Vollpillen-Chips: mobil horizontal scrollbar, ab md inline */
.nav {
  display: flex;
  gap: var(--s-2);
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
  /* oben etwas Luft, sonst schneidet der Scroll-Container den Fokusring ab */
  padding: var(--s-1) var(--gutter) var(--s-3);
  margin: 0 calc(-1 * var(--gutter));
  list-style: none;
}
.nav::-webkit-scrollbar { display: none; }
.nav li { flex: 0 0 auto; }

.chip {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 16px;
  border: 1px solid var(--control-line);
  border-radius: var(--r-full);
  background: var(--canvas);
  color: var(--ink);
  font-size: 0.875rem;
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color 180ms var(--ease-out), border-color 180ms var(--ease-out);
}
.chip:hover { background: var(--surface); border-color: var(--muted); color: var(--ink); }

.header-cta { display: none; }

@media (min-width: 900px) {
  html { scroll-padding-top: 100px; }
  .header {
    position: sticky;
    top: 0;
    z-index: 40;
  }
  .header-bar { min-height: 76px; flex-wrap: nowrap; }
  .header-nav { flex: 1 1 auto; }
  .nav {
    overflow: visible;
    padding: 0;
    margin: 0;
    justify-content: center;
  }
  .header-cta { display: inline-flex; }
}

/* --- Hero --------------------------------------------------------------- */
.hero { padding-block: var(--section); }

.hero-copy { max-width: 38rem; }
.hero h1 { margin-bottom: var(--s-4); }
.hero .lead { margin-bottom: var(--s-6); }

.hero-note {
  color: var(--muted);
  font-size: 0.875rem;
  margin: 0;
}

/* Foto-Karte: das Bild trägt den Hero, nicht die Schrift */
.showcase {
  position: relative;
  margin-top: var(--s-7);
  border-radius: var(--r-lg);
  border: 1px solid var(--hairline);
  background: var(--surface);
  overflow: hidden;
}

.showcase-media { position: relative; display: block; }
.showcase-media img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; object-position: top center; }

.badge {
  position: absolute;
  top: var(--s-3);
  left: var(--s-3);
  z-index: 2;
  background: var(--canvas);
  color: var(--ink);
  border-radius: var(--r-full);
  padding: 7px 14px;
  font-size: 0.8125rem;
  font-weight: 600;
  box-shadow: var(--lift);
}

.showcase-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-2) var(--s-4);
  padding: var(--s-4);
  background: var(--canvas);
  border-top: 1px solid var(--hairline);
}
.showcase-foot .t { display: block; font-weight: 600; color: var(--ink); font-size: 1rem; }
.showcase-foot .m { display: block; font-size: 0.875rem; color: var(--muted); margin-top: 2px; }

.linkout {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 44px;
  padding: 0 14px;
  border-radius: var(--r-full);
  border: 1px solid var(--control-line);
  background: var(--canvas);
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--ink);
  text-decoration: none;
  overflow-wrap: anywhere;
  transition: background-color 180ms var(--ease-out), border-color 180ms var(--ease-out);
}
.linkout:hover { background: var(--surface); border-color: var(--ink); color: var(--ink); }
.linkout svg { flex: none; }

@media (min-width: 900px) {
  .hero-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
    gap: var(--s-8);
    align-items: center;
  }
  .showcase { margin-top: 0; }
  .showcase-media img { aspect-ratio: 4 / 3; }
}

/* --- Bewertung: der eine laute Typo-Moment ------------------------------ */
.rating {
  display: grid;
  gap: var(--s-4);
  align-items: start;
}

.rating-figure { display: flex; align-items: center; gap: var(--s-4); }

.rating-num {
  font-size: clamp(3rem, 2rem + 4vw, 4rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}

/* 24px = WCAG-Großtext, damit 4.37:1 auf --surface reicht (3:1 gefordert) */
.stars { color: var(--accent); font-size: 1.5rem; letter-spacing: 0.1em; line-height: 1.1; }
.rating-src { font-size: 0.875rem; color: var(--muted); margin: 2px 0 0; }
.rating p { max-width: 34em; }

@media (min-width: 760px) {
  .rating { grid-template-columns: auto minmax(0, 1fr); gap: var(--s-7); align-items: center; }
}

/* --- Karten-Gitter: enge Rinnen unter großzügigen Bändern ---------------- */
.cards {
  display: grid;
  gap: var(--s-4);
  grid-template-columns: 1fr;
}

@media (min-width: 760px) {
  .cards-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 900px) {
  .cards-2 { gap: var(--s-5); }
}

.card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--canvas);
  border: 1px solid var(--hairline);
  border-radius: var(--r-md);
  overflow: hidden;
  transition: transform 220ms var(--ease-out), box-shadow 220ms var(--ease-out);
}

/* Die eine Schatten-Stufe, nur beim Hover — sonst sind 95 % der Flächen flach */
@media (hover: hover) {
  .card-hover:hover { transform: translateY(-2px); box-shadow: var(--lift); }
}

.card-media { position: relative; }
.card-media img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; object-position: top center; }

.card-body { padding: var(--s-4); display: flex; flex-direction: column; gap: var(--s-2); flex: 1 1 auto; }
.card-body > * { margin: 0; }
.card-meta { font-size: 0.875rem; color: var(--muted); }
.card-note { font-size: 0.9375rem; color: var(--body); }
.card-foot { margin-top: auto; padding-top: var(--s-2); }

/* Erste Karte trägt das Kundenprojekt: ab Tablet Bild links, Text rechts */
.card-feature { margin-bottom: var(--s-4); }

@media (min-width: 760px) {
  .card-feature {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  }
  .card-feature .card-media { height: 100%; }
  .card-feature .card-media img { height: 100%; aspect-ratio: auto; object-position: top left; }
  .card-feature .card-body { padding: var(--s-5); gap: var(--s-3); }
}

@media (min-width: 900px) {
  .card-feature { margin-bottom: var(--s-5); }
}

/* Zitat: kein Seitenstreifen, sondern eine echte Fläche */
.quote {
  margin: 0;
  padding: var(--s-4);
  background: var(--accent-soft);
  border-radius: var(--r-sm);
  color: var(--ink);
  font-size: 0.9375rem;
  line-height: 1.5;
}
.quote cite {
  display: block;
  margin-top: var(--s-3);
  font-style: normal;
  font-size: 0.8125rem;
  color: var(--body);
}

/* --- Preise ------------------------------------------------------------- */
.price-card { padding: var(--s-5); gap: var(--s-4); }
.price-card > * { margin: 0; }
/* muss nach der Zeile darüber stehen, sonst gewinnt margin:0 und die
   beiden Karten-Buttons stehen nicht mehr auf gleicher Höhe */
.price-card .card-foot { margin-top: auto; }

.price-top { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--s-2) var(--s-4); }

.price {
  font-size: clamp(1.625rem, 1.35rem + 1.2vw, 2rem);
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.price-unit { font-size: 0.875rem; font-weight: 400; color: var(--muted); }

.tag {
  display: inline-block;
  align-self: flex-start;
  background: var(--accent-soft);
  color: var(--accent-press);
  border-radius: var(--r-full);
  padding: 6px 12px;
  font-size: 0.8125rem;
  font-weight: 500;
  line-height: 1.35;
}

.ticks { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-3); }
.ticks li {
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr);
  gap: var(--s-3);
  font-size: 0.9375rem;
  line-height: 1.45;
}
.ticks svg { margin-top: 3px; color: var(--accent); flex: none; }

.fineprint { font-size: 0.8125rem; color: var(--muted); line-height: 1.5; }

.assurances {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2) var(--s-5);
  margin-top: var(--s-5);
  padding: 0;
  list-style: none;
  font-size: 0.875rem;
  color: var(--muted);
}
.assurances li { display: flex; align-items: center; gap: var(--s-2); }
.assurances svg { color: var(--accent); flex: none; }

/* --- Buchungs-Pille: segmentiert, mit Orb am Ende ----------------------- */
.pillbar {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  width: 100%;
  margin-top: var(--s-6);
  padding: 6px 6px 6px 20px;
  background: var(--canvas);
  border: 1px solid var(--control-line);
  border-radius: var(--r-full);
  box-shadow: var(--lift);
  text-decoration: none;
  color: var(--ink);
  transition: border-color 200ms var(--ease-out), transform 160ms var(--ease-out);
}
.pillbar:hover { border-color: var(--muted); color: var(--ink); }
.pillbar:active { transform: scale(0.99); }

.pillbar-seg {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 48px;
  padding-right: var(--s-4);
}
.pillbar-seg + .pillbar-seg { border-left: 1px solid var(--hairline); padding-left: var(--s-4); }
.pillbar-seg b { font-size: 0.875rem; font-weight: 600; line-height: 1.3; }
.pillbar-seg span { font-size: 0.8125rem; color: var(--muted); line-height: 1.3; }

.pillbar-hide { display: none; }

.orb {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 48px;
  height: 48px;
  margin-left: auto;
  border-radius: var(--r-full);
  background: var(--accent);
  color: oklch(1 0 0);
  transition: background-color 180ms var(--ease-out);
}
.pillbar:hover .orb { background: var(--accent-press); }

@media (min-width: 640px) {
  .pillbar { display: inline-flex; width: auto; }
  .pillbar-hide { display: flex; }
  .orb { margin-left: var(--s-4); }
}

/* --- Ablauf ------------------------------------------------------------- */
.steps { list-style: none; margin: 0; padding: 0; counter-reset: step; }
.steps li {
  counter-increment: step;
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr);
  gap: var(--s-2) var(--s-4);
  padding: var(--s-5) 0;
  border-top: 1px solid var(--hairline);
}
.steps li:last-child { border-bottom: 1px solid var(--hairline); }
.steps li::before {
  content: counter(step);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px; height: 40px;
  border-radius: var(--r-full);
  background: var(--accent-soft);
  color: var(--accent-press);
  font-size: 0.9375rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.steps .when-cell { grid-column: 2; }
.steps .step-body { grid-column: 2; }
.steps h3 { font-size: 1.0625rem; margin-bottom: var(--s-1); }
.steps p { margin: 0; font-size: 0.9375rem; }
.steps .when { display: block; font-size: 0.8125rem; font-weight: 500; color: var(--muted); margin-bottom: 2px; }

@media (min-width: 760px) {
  .steps li { grid-template-columns: 40px 10rem minmax(0, 1fr); gap: var(--s-4); align-items: start; }
  .steps .when { margin: 8px 0 0; }
  .steps .step-body { grid-column: 3; }
  .steps .when-cell { grid-column: 2; }
}

/* --- Über mich ---------------------------------------------------------- */
.about { display: grid; gap: var(--s-5); }
.about-photo {
  width: 96px; height: 96px;
  border-radius: var(--r-full);
  object-fit: cover;
  border: 1px solid var(--hairline);
}
.about p { max-width: 38em; }

@media (min-width: 760px) {
  .about { grid-template-columns: 128px minmax(0, 1fr); gap: var(--s-7); align-items: start; }
  .about-photo { width: 128px; height: 128px; }
}

/* --- FAQ ---------------------------------------------------------------- */
.faq { max-width: 46rem; }
.faq details { border-top: 1px solid var(--hairline); }
.faq details:last-of-type { border-bottom: 1px solid var(--hairline); }

.faq summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4);
  min-height: 60px;
  padding: var(--s-4) 0;
  cursor: pointer;
  list-style: none;
  color: var(--ink);
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.4;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: '';
  flex: none;
  width: 12px; height: 12px;
  border-right: 2px solid var(--muted);
  border-bottom: 2px solid var(--muted);
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform 200ms var(--ease-out);
}
.faq details[open] summary::after { transform: rotate(-135deg) translate(-2px, -2px); }
.faq .answer { padding: 0 0 var(--s-5); max-width: 40em; font-size: 0.9375rem; }

/* --- Kontakt ------------------------------------------------------------ */
.contact-grid { display: grid; gap: var(--s-5); }

@media (min-width: 900px) {
  .contact-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--s-6); align-items: start; }
}

.panel {
  background: var(--canvas);
  border: 1px solid var(--hairline);
  border-radius: var(--r-md);
  padding: var(--s-5);
}

.field { display: block; margin-bottom: var(--s-4); }
.field > span { display: block; font-size: 0.875rem; font-weight: 500; color: var(--ink); margin-bottom: 6px; }

input, textarea {
  width: 100%;
  font: inherit;
  font-size: 1rem; /* 16px: kein iOS-Zoom beim Fokus */
  color: var(--ink);
  background: var(--canvas);
  border: 1px solid var(--control-line);
  border-radius: var(--r-sm);
  padding: 12px 14px;
  min-height: 48px;
  transition: border-color 180ms var(--ease-out);
}
input:hover, textarea:hover { border-color: var(--muted); }
input:focus, textarea:focus { border-color: var(--accent-press); }
textarea { min-height: 120px; resize: vertical; }
::placeholder { color: var(--muted); opacity: 1; }

.hp { position: absolute; left: -9999px; }

.form-status { margin: var(--s-3) 0 0; font-size: 0.875rem; color: var(--body); min-height: 1.45em; }

.cal-consent { text-align: left; }
.cal-consent p { font-size: 0.875rem; color: var(--muted); }
#cal-inline { min-height: 480px; }

.hr-note {
  margin: var(--s-5) 0 var(--s-3);
  padding-top: var(--s-5);
  border-top: 1px solid var(--hairline);
  font-size: 0.875rem;
  color: var(--muted);
}

.contact-list { list-style: none; margin: var(--s-2) 0 0; padding: 0; display: grid; font-size: 0.9375rem; }
.contact-list a { display: inline-flex; align-items: center; min-height: 44px; justify-self: start; }

/* --- Fußzeile ----------------------------------------------------------- */
.footer {
  background: var(--surface);
  border-top: 1px solid var(--hairline);
  padding-block: var(--s-7);
  font-size: 0.875rem;
  color: var(--muted);
}
.footer-grid { display: grid; gap: var(--s-5); }
.footer a { color: var(--body); text-decoration: none; }
.footer a:hover { color: var(--accent-press); text-decoration: underline; }
.footer ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-5); }
.footer li a, .footer button.linkish {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}
button.linkish {
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  color: var(--body);
  cursor: pointer;
  text-decoration: none;
}
button.linkish:hover { color: var(--accent-press); text-decoration: underline; }

@media (min-width: 760px) {
  .footer-grid { grid-template-columns: minmax(0, 1fr) auto; align-items: end; }
}

/* --- Mobile Sticky-CTA -------------------------------------------------- */
.dock {
  position: fixed;
  inset: auto 0 0 0;
  z-index: 50;
  display: flex;
  gap: var(--s-2);
  padding: var(--s-2) var(--gutter) max(var(--s-2), env(safe-area-inset-bottom));
  background: var(--canvas);
  border-top: 1px solid var(--hairline);
  box-shadow: var(--lift);
}
.dock .btn { flex: 1 1 auto; }
.dock .icon-btn {
  flex: none;
  width: 48px;
  padding: 0;
}
body:has(.dock) { padding-bottom: calc(72px + env(safe-area-inset-bottom)); }

@media (min-width: 900px) {
  .dock { display: none; }
  body:has(.dock) { padding-bottom: 0; }
  html { scroll-padding-bottom: 0; }
}

/* --- Cookie-Banner ------------------------------------------------------ */
.cookies {
  position: fixed;
  z-index: 60;
  left: var(--gutter);
  right: var(--gutter);
  bottom: var(--s-3);
  max-width: 30rem;
  background: var(--canvas);
  border: 1px solid var(--hairline);
  border-radius: var(--r-md);
  padding: var(--s-4);
  box-shadow: var(--lift);
}
.cookies p { font-size: 0.875rem; line-height: 1.45; }
.cookies .btn { min-height: 44px; padding: 10px 16px; font-size: 0.875rem; }

/* Auf Seiten mit Aktionsleiste über diese setzen, auf Rechtsseiten nicht */
body:has(.dock) .cookies { bottom: calc(80px + env(safe-area-inset-bottom)); }

@media (min-width: 900px) {
  .cookies,
  body:has(.dock) .cookies { bottom: var(--s-5); left: var(--s-5); right: auto; }
}

/* --- Rechtstexte -------------------------------------------------------- */
.legal { max-width: 44rem; margin-inline: auto; padding: var(--section) var(--gutter); }
.legal h1 { margin-bottom: var(--s-5); }
.legal h2 { font-size: 1.25rem; margin: var(--s-6) 0 var(--s-3); }
.legal p { max-width: 38em; }

/* --- Bewegung: scroll-getriebenes Einblenden, ohne JS --------------------
   Achtung: .reveal darf nie im letzten Viewport des Dokuments landen. Dort
   wird "cover 22%" nie erreicht und fill-mode both hält opacity auf 0. */
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .reveal {
      /* forwards statt both: läuft die Timeline nie an (sehr hohes Fenster,
         kurzes Dokument, Druckansicht), bleibt der sichtbare Grundzustand
         stehen statt opacity 0. Der Sprung auf den Startwert passiert
         außerhalb des Viewports und ist nicht zu sehen. */
      animation: reveal-in linear forwards;
      animation-timeline: view();
      animation-range: entry 5% cover 22%;
    }
  }
}

@keyframes reveal-in {
  from { opacity: 0; transform: translateY(16px); }
  to { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* --- Druck --------------------------------------------------------------- */
@media print {
  .reveal { animation: none !important; opacity: 1 !important; transform: none !important; }
  .dock, .cookies, .header-nav, .btn, .pillbar { display: none !important; }
  body { padding-bottom: 0; }
  .section, .hero { padding-block: var(--s-5); }
}