/* ============================================================
   Vandro — Stylesheet
   Aufbau:
    1 Schriften      2 Grundlage      3 Typografie
    4 Raster         5 Kopf/Nav       6 Bottom-Sheet
    7 Schaltflaechen 8 Hero           9 Arbeiten
   10 Leistungen    11 Preise        12 Ablauf
   13 Ueber         14 Regionen      15 Fragen
   16 Kontakt       17 Fusszeile     18 Bewegung
   Farben ausschliesslich ueber var(--…) aus tokens.css.
   ============================================================ */

/* ---------- 1 Schriften ------------------------------------ */
@font-face {
  font-family: "Familjen Grotesk";
  src: url("../fonts/familjen-grotesk-400-700.woff2") format("woff2-variations");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Familjen Grotesk";
  src: url("../fonts/familjen-grotesk-400-700-italic.woff2") format("woff2-variations");
  font-weight: 400 700;
  font-style: italic;
  font-display: swap;
}

/* ---------- 2 Grundlage ------------------------------------ */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
/* Ein display-Wert aus einer eigenen Klasse schlaegt sonst das hidden-Attribut
   des Browsers. Genau so blieb das Feld fuer die bestehende Website sichtbar. */
[hidden] { display: none !important; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 24px);
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body {
  background: var(--bg);
  color: var(--body);
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: 1.6;
  font-feature-settings: "ss01", "cv01";
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

img, svg, video { display: block; max-width: 100%; }
img { height: auto; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }

a { color: inherit; text-decoration: none; }

:where(a, button, summary, input, select, textarea, [tabindex]):focus-visible {
  outline: none;
  box-shadow: var(--ring);
  border-radius: var(--r-xs);
}

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

.skip-link {
  position: absolute;
  left: var(--s-4);
  top: -64px;
  z-index: 90;
  padding: 10px 16px;
  border-radius: var(--r-md);
  background: var(--primary);
  color: var(--on-primary);
  font-size: var(--fs-small);
  transition: top var(--t-base) var(--ease);
}
.skip-link:focus-visible { top: var(--s-3); }

/* ---------- 3 Typografie ----------------------------------- */
h1, h2, h3, h4 {
  color: var(--ink);
  font-weight: 520;
  line-height: 1.1;
  letter-spacing: var(--ls-h3);
  text-wrap: balance;
}
h1, .display {
  font-size: var(--fs-display);
  font-weight: 460;
  line-height: 1.02;
  letter-spacing: var(--ls-display);
}
h2 {
  font-size: var(--fs-h2);
  font-weight: 490;
  line-height: 1.08;
  letter-spacing: var(--ls-h2);
}
h3 { font-size: var(--fs-h3); }

p { text-wrap: pretty; }
.lead {
  font-size: var(--fs-lead);
  line-height: 1.55;
  color: var(--muted);
}
.max-prose { max-width: var(--measure); }

.mono {
  display: block;
  font-size: var(--fs-micro);
  color: var(--muted);
}

.eyebrow {
  font-size: var(--fs-micro);
  font-weight: 550;
  color: var(--accent);
  margin-bottom: var(--s-3);
}

strong, b { font-weight: 600; color: var(--ink); }

/* ---------- 4 Raster --------------------------------------- */
.container {
  width: min(var(--wrap), 100% - 40px);
  margin-inline: auto;
}
@media (max-width: 480px) {
  .container { width: calc(100% - 32px); }
}

.section { padding-block: var(--section-pad); }
.section-soft { background: var(--bg-soft); }
/* Runde 13: der Preisbereich lag im selben Grau wie die anderen
   abgesetzten Baender. Jetzt derselbe helle Gruenton, der im Ablauf
   hinter den Ziffern sitzt. Damit haengt der Bereich sichtbar am
   Akzent statt neutral danebenzustehen. */
.section-mint { background: var(--bg-mint); }
.hairline-top { border-top: 1px solid var(--line); }

.sec-head { max-width: var(--wrap-narrow); margin-bottom: var(--s-7); }
.sec-head .lead { margin-top: var(--s-4); max-width: 56ch; }

.header-spacer { height: 0; }

/* ---------- 5 Kopf und Navigation -------------------------- */
.site-header {
  position: fixed;
  inset: 0 0 auto;
  z-index: 50;
  height: var(--header-h);
  display: flex;
  align-items: center;
  transition: background var(--t-base) var(--ease);
}
.site-header::after {
  content: "";
  position: absolute;
  inset: auto 0 0;
  height: 1px;
  background: var(--line);
  opacity: 0;
  transition: opacity var(--t-base) var(--ease);
}
.site-header.is-scrolled {
  background: var(--glass);
  -webkit-backdrop-filter: blur(16px) saturate(1.6);
  backdrop-filter: blur(16px) saturate(1.6);
}
.site-header.is-scrolled::after { opacity: 1; }

.nav-island {
  width: min(var(--wrap), 100% - 40px);
  margin-inline: auto;
  display: flex;
  align-items: center;
  gap: var(--s-5);
}
@media (max-width: 480px) {
  .nav-island { width: calc(100% - 32px); }
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: 1.0625rem;
  font-weight: 600;
  letter-spacing: -.022em;
  color: var(--ink);
}
.brand-mark { width: 19px; height: 19px; color: var(--accent); }
.brand-mark .gem { color: var(--ember); fill: currentColor; opacity: .9; }

.site-nav { display: none; }
.nav-tools {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: var(--s-2);
}

.lang-toggle {
  height: 32px;
  padding-inline: 9px;
  border: 0;
  border-radius: var(--r-sm);
  background: transparent;
  color: var(--muted);
  font-size: var(--fs-micro);
  font-weight: 550;
  letter-spacing: .01em;
  transition: color var(--t-fast) var(--ease), background var(--t-fast) var(--ease);
}
.lang-toggle:hover { color: var(--ink); background: var(--surface-2); }

.nav-cta { display: none; }

.nav-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--surface);
  color: var(--ink);
  box-shadow: var(--shadow-sm);
  transition: border-color var(--t-fast) var(--ease), background var(--t-fast) var(--ease);
}
.nav-toggle:hover { border-color: var(--line-strong); }
.nav-toggle svg { width: 17px; height: 17px; }

@media (min-width: 760px) {
  .nav-cta { display: inline-flex; }
}
@media (min-width: 980px) {
  .site-nav {
    display: flex;
    align-items: center;
    gap: 2px;
  }
  .site-nav a {
    padding: 7px 11px;
    border-radius: var(--r-sm);
    font-size: .9375rem;
    color: var(--muted);
    transition: color var(--t-fast) var(--ease), background var(--t-fast) var(--ease);
  }
  .site-nav a:hover { color: var(--ink); background: var(--surface-2); }
  .site-nav a[aria-current="page"] { color: var(--ink); }
  .nav-toggle { display: none; }
}

/* ---------- 6 Bottom-Sheet (mobil) ------------------------- */
.sheet-scrim {
  position: fixed;
  inset: 0;
  z-index: 60;
  background: color-mix(in srgb, var(--ink) 44%, transparent);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--t-base) var(--ease), visibility var(--t-base) var(--ease);
}
.sheet-scrim.is-open { opacity: 1; visibility: visible; }

.nav-sheet {
  position: fixed;
  inset: auto 0 0;
  z-index: 70;
  transform: translateY(110%);
  visibility: hidden;
  padding: var(--s-3) var(--s-5) calc(var(--s-6) + env(safe-area-inset-bottom));
  background: var(--surface);
  border-top: 1px solid var(--line);
  border-radius: var(--r-xl) var(--r-xl) 0 0;
  box-shadow: var(--shadow-lg);
  touch-action: none;
}
.nav-sheet.is-open { visibility: visible; }
.nav-sheet.is-dragging { transition: none; }

.sheet-grabber {
  width: 40px;
  height: 4px;
  margin: 0 auto var(--s-4);
  border-radius: var(--r-pill);
  background: var(--line-strong);
}
.sheet-close {
  position: absolute;
  top: var(--s-4);
  right: var(--s-4);
  width: 34px;
  height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--surface-2);
  color: var(--muted);
}
.sheet-close svg { width: 15px; height: 15px; }

.sheet-nav { display: grid; gap: 2px; margin-bottom: var(--s-5); }
.sheet-nav a {
  padding: 12px 10px;
  border-radius: var(--r-md);
  font-size: 1.0625rem;
  font-weight: 500;
  letter-spacing: -.012em;
  color: var(--ink);
}
.sheet-nav a:active { background: var(--surface-2); }
.sheet-cta .btn { width: 100%; }

@media (min-width: 980px) {
  .nav-sheet, .sheet-scrim { display: none; }
}

/* ---------- 7 Schaltflaechen ------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 44px;
  padding-inline: 20px;
  border: 1px solid transparent;
  border-radius: 8px;
  font-size: .9375rem;
  font-weight: 550;
  letter-spacing: -.012em;
  white-space: nowrap;
  transition: background var(--t-fast) var(--ease),
              border-color var(--t-fast) var(--ease),
              box-shadow var(--t-fast) var(--ease),
              transform var(--t-fast) var(--ease);
}
.btn-primary {
  background: var(--primary);
  color: var(--on-primary);
  box-shadow: var(--shadow-sm);
}
.btn-primary:hover {
  background: var(--primary-hover);
  box-shadow: var(--shadow-md);
  transform: translateY(-1px);
}
.btn-ghost {
  background: var(--surface);
  color: var(--ink);
  border-color: var(--line-strong);
  box-shadow: var(--shadow-sm);
}
.btn-ghost:hover {
  background: var(--surface-2);
  transform: translateY(-1px);
}
.btn-sm {
  height: 34px;
  padding-inline: 13px;
  font-size: var(--fs-small);
  border-radius: 6px;
}
.btn:active { transform: translateY(0); }

.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--ink);
  font-weight: 500;
}
.link-arrow .arr { transition: transform var(--t-fast) var(--ease); color: var(--accent); }
.link-arrow:hover .arr { transform: translateX(3px); }

/* ---------- 8 Hero ----------------------------------------- */
.page-hero {
  position: relative;
  /* Runde 12: Kopf war zu luftig. Balken 64 auf 56px, und der Abstand
     darunter von bis zu 96 auf 56px. Die Ueberschrift steht dadurch
     frueher im Bild, ohne dass es gedraengt wirkt. */
  padding-top: calc(var(--header-h) + clamp(20px, 2.6vw, 32px));
  /* Der Kopf endete frueher am Vorschaubild. Ohne das braucht er einen
     eigenen unteren Abstand, sonst klebt die Haarlinie des naechsten
     Abschnitts an der Faktenzeile. --slim setzt seinen eigenen Wert. */
  padding-bottom: clamp(30px, 3.4vw, 44px);
  text-align: center;
  overflow: hidden;
}
.page-hero::before {
  content: "";
  position: absolute;
  inset: -160px -25% auto;
  height: 720px;
  background: var(--wash);
  pointer-events: none;
}
.hero-grid { position: relative; }

/* Kopfzeile statt Kapsel. Die Kapsel mit Ortsnadel las sich wie eine
   Standortmarke aus einer App. Hier steht dieselbe Information im
   Blattstil: kurzer Strich in der Akzentfarbe, gesperrte Versalien.
   Beim Zeigen waechst der Strich, sonst passiert nichts. */
.hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-size: var(--fs-micro);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--muted);
  text-decoration: none;
  transition: color var(--t-base) var(--ease);
}
.hero-eyebrow i {
  display: block;
  width: 26px;
  height: 1px;
  background: var(--accent);
  transition: width var(--t-base) var(--ease);
}
.hero-eyebrow:hover { color: var(--ink); }
.hero-eyebrow:hover i { width: 40px; }
@media (hover: none) {
  .hero-eyebrow:hover i { width: 26px; }
}

.page-hero h1 {
  margin: var(--s-3) auto var(--s-3);
  max-width: 19ch;
}
.hero-line { display: block; overflow: hidden; padding-bottom: .06em; }
.hero-line > span {
  display: block;
  transform: translateY(105%);
  transition: transform .85s var(--ease);
}
.hero-line.is-in > span { transform: none; }
html:not(.js) .hero-line > span { transform: none; }

.page-hero .lead { margin-inline: auto; max-width: 48ch; }

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
  margin-top: var(--s-6);
}

.hero-facts {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 4px 16px;
  margin-top: var(--s-5);
  font-size: var(--fs-micro);
  color: var(--muted);
}
.hero-facts span { display: inline-flex; align-items: center; gap: 16px; }
.hero-facts span + span::before {
  content: "·";
  color: var(--line-strong);
}

.hero-stage {
  position: relative;
  margin-top: clamp(40px, 6vw, 72px);
}
.hero-stage::before {
  content: "";
  position: absolute;
  inset: 30% -20% -1px;
  background: var(--wash-soft);
  pointer-events: none;
}
.hero-shot {
  position: relative;
  max-width: 1000px;
  margin-inline: auto;
  /* 1000px breit bei 16:9 sind 562px hoch. Genau so viel Platz, damit
     der Aufbau der Demo ganz drin ist und die Knoepfe nicht angeschnitten
     werden. Auf flachen Schirmen greift die Hoehe des Fensters. */
  max-height: min(64vh, 566px);
  /* Kein weicher Ausblender mehr. Das Bild endet als Karte mit Kante,
     Rundung und Schatten: weniger Effekt, mehr Beleg. */
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--surface);
  box-shadow: var(--shadow-shot);
}
.hero-shot img { width: 100%; }

@media (max-width: 699px) {
  .hero-facts { gap: 8px 18px; }
  .hero-facts span { gap: 0; }
  .hero-facts span + span::before { content: none; }
}
@media (min-width: 760px) {
  .hero-facts { gap: 6px 20px; }
}

/* ---------- 9 Arbeiten ------------------------------------- */
.work-head {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  justify-content: space-between;
  gap: var(--s-5);
}
.work-head .sec-head { margin-bottom: 0; }

.work-grid {
  display: grid;
  gap: var(--s-5);
  margin-top: var(--s-7);
  grid-template-columns: 1fr;
}
/* Drei gleich breite Spalten. Der alte Aufbau lief ueber ein
   6-Spalten-Raster mit span 3 und span 2; bei drei plus drei
   Karten geht keine Reihe auf, daher sahen die Kacheln versetzt
   und ineinandergeschoben aus. */
@media (min-width: 780px) {
  .work-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 560px) and (max-width: 779px) {
  .work-grid { grid-template-columns: repeat(2, 1fr); }
}

.work-card {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
  transition: box-shadow var(--t-base) var(--ease),
              border-color var(--t-base) var(--ease),
              transform var(--t-base) var(--ease);
}
.work-card:hover {
  box-shadow: var(--shadow-md);
  border-color: var(--line-strong);
  transform: translateY(-2px);
}
@media (hover: none) { .work-card:hover { transform: none; } }

.work-card .shot {
  display: block;
  overflow: hidden;
  background: var(--surface-2);
  border-bottom: 1px solid var(--line);
}
.work-card .shot img {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  object-position: top center;
  transition: transform var(--t-slow) var(--ease);
}
.work-card:hover .shot img { transform: scale(1.03); }

.work-body {
  display: flex;
  flex-direction: column;
  align-items: start;
  gap: var(--s-3);
  padding: var(--s-5);
  flex: 1;
}
.work-h {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--s-3);
  min-width: 0;
}
.work-title {
  font-size: 1.0625rem;
  font-weight: 550;
  letter-spacing: -.016em;
  color: var(--ink);
  text-decoration: none;
  transition: color var(--t-fast) var(--ease);
}
.work-card:hover .work-title { color: var(--accent); }
.work-title:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 4px;
}
.work-body p { font-size: var(--fs-small); color: var(--muted); }
/* Der Pfeil-Link sitzt unten buendig, damit gleich hohe Karten
   auch gleich aussehen, wenn die Texte verschieden lang sind. */
.work-body .link-arrow { margin-top: auto; padding-top: var(--s-2); }

.work-facts { display: grid; gap: var(--s-2); }
.work-facts li {
  position: relative;
  padding-left: 18px;
  font-size: var(--fs-small);
  color: var(--body);
}
.work-facts li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .52em;
  width: 7px;
  height: 7px;
  border-radius: 2px;
  background: var(--accent-soft);
  border: 1px solid var(--accent-line);
}

/* ---------- Demos hinter einem Schalter --------------------
   Die Demos sind erfundene Betriebe und damit Beiwerk. Sie
   stehen jetzt hinter einem Knopf, statt die echten Projekte
   im selben Raster zu verwaessern. */
.demo-toggle { margin-top: var(--s-6); }
.demo-toggle > summary {
  display: block;
  list-style: none;
  cursor: pointer;
  width: fit-content;
}
.demo-toggle > summary::-webkit-details-marker { display: none; }
.demo-toggle > summary .btn { pointer-events: none; }
.demo-toggle > summary:focus-visible .btn {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.demo-toggle .ind { margin-left: 2px; }
.demo-body { overflow: hidden; height: 0; }
html:not(.js) .demo-body { height: auto; }
.demo-toggle[open] .demo-body { height: auto; }
.demo-body > div { padding-top: var(--s-5); }
.demo-intro {
  max-width: var(--measure);
  font-size: var(--fs-small);
  color: var(--muted);
}
.work-grid--demos { margin-top: var(--s-4); }
.work-card--demo .work-body { gap: var(--s-2); }

.work-cta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3);
  margin-top: var(--s-7);
}

.badge {
  padding: 2px 9px;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-pill);
  background: var(--surface-2);
  font-size: .75rem;
  font-weight: 500;
  color: var(--muted);
}
.badge.accent {
  border-color: var(--accent-line);
  background: var(--accent-soft);
  color: var(--accent);
}

.demo-note {
  margin-top: var(--s-6);
  max-width: var(--measure);
  font-size: var(--fs-small);
  color: var(--muted);
}

/* ---------- 10 Leistungen ---------------------------------- */
.svc-cards {
  display: grid;
  gap: var(--s-4);
  grid-template-columns: 1fr;
}
.svc-card {
  padding: var(--s-5);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--surface);
  transition: border-color var(--t-base) var(--ease), box-shadow var(--t-base) var(--ease);
}
.svc-card:hover { border-color: var(--line-strong); box-shadow: var(--shadow-sm); }
.svc-card h3 { margin: var(--s-4) 0 var(--s-2); }
.svc-card p { font-size: var(--fs-small); color: var(--muted); }

.svc-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /* Runde 12: Zeichnungen und Groesse von vandro.de uebernommen. Dort
     sitzt das Symbol als gefuellte Kachel und traegt die Karte, statt
     als kleines Randzeichen mitzulaufen. Farbe bleibt beim eigenen
     Akzent, der Blauverlauf der Livesite gehoert nicht zu dieser
     Palette.                                                          */
  width: 44px;
  height: 44px;
  border: 1px solid var(--accent);
  border-radius: var(--r-md);
  background: var(--accent);
  color: var(--on-primary);
}
.svc-icon svg { width: 22px; height: 22px; }

@media (min-width: 640px) {
  .svc-cards { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1000px) {
  .svc-cards { grid-template-columns: repeat(4, 1fr); }
}

/* ---------- 11 Preise -------------------------------------- */
.price-cards {
  display: grid;
  gap: var(--s-4);
  grid-template-columns: 1fr;
  /* Runde 12: vorher "start", da bestimmte jede Kachel ihre Hoehe selbst
     und die drei Preise standen unterschiedlich hoch. "stretch" zieht sie
     auf dieselbe Hoehe, der Knopf haengt ohnehin schon an margin-top: auto
     und steht dadurch in allen drei Kacheln auf einer Linie.            */
  align-items: stretch;
}
.price-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  padding: var(--s-6) var(--s-5) var(--s-5);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
}
.price-card--featured {
  background: var(--primary);
  border-color: var(--primary);
  color: var(--on-primary);
  box-shadow: var(--shadow-lg);
}
.price-card--featured .price-tag,
.price-card--featured .price-desc,
.price-card--featured .price-list li { color: var(--on-primary); opacity: .78; }
.price-card--featured .price-num { color: var(--on-primary); }
.price-card--featured .price-list li::before { color: var(--on-primary); opacity: .6; }
.price-card--featured .btn-primary {
  background: var(--on-primary);
  color: var(--primary);
}
.price-card--featured .btn-primary:hover { background: var(--surface-2); }

.price-tag {
  font-size: var(--fs-micro);
  font-weight: 550;
  color: var(--accent);
}
.price-num {
  font-size: 1.5rem;
  font-weight: 550;
  letter-spacing: -.024em;
  line-height: 1.15;
  color: var(--ink);
}
.price-desc { font-size: var(--fs-small); color: var(--muted); }

.price-badge {
  position: absolute;
  top: var(--s-4);
  right: var(--s-4);
  padding: 2px 9px;
  border-radius: var(--r-pill);
  background: var(--accent-soft);
  color: var(--accent);
  font-size: .75rem;
  font-weight: 550;
  /* Leichter Schein, damit die Marke auf der dunklen Kachel nicht
     aufgeklebt wirkt. Bewusst knapp gehalten. */
  box-shadow: var(--glow-badge);
}

.price-list {
  list-style: none;
  padding: 0;
  margin: var(--s-2) 0 var(--s-5);
  display: grid;
  gap: var(--s-2);
  font-size: var(--fs-small);
  color: var(--body);
}
.price-list li { position: relative; padding-left: 22px; }
.price-list li::before {
  content: "✓";
  position: absolute;
  left: 0;
  color: var(--accent);
}
.price-card .btn { margin-top: auto; }

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

/* ---------- 12 Ablauf -------------------------------------- */
.steps {
  display: grid;
  gap: var(--s-4);
  counter-reset: step;
}
.step {
  position: relative;
  padding: var(--s-5);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--surface);
}
.step h3 { margin: var(--s-4) 0 var(--s-2); }
.step p { font-size: var(--fs-small); color: var(--muted); }
.step::before {
  counter-increment: step;
  content: counter(step, decimal-leading-zero);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: var(--r-sm);
  background: var(--accent-soft);
  color: var(--accent);
  font-size: var(--fs-micro);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

@media (min-width: 640px) {
  .steps { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1040px) {
  .steps { grid-template-columns: repeat(4, 1fr); }
}

/* ---------- 13 Ueber --------------------------------------- */
.about-grid {
  display: grid;
  gap: var(--s-6);
  align-items: start;
}
/* Runde 14: das Portrait war auf dem Handy ueber die volle Breite und
   damit das lauteste Element des Abschnitts. Gedeckelt, links buendig. */
.about-photo {
  max-width: 220px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--surface-2);
  box-shadow: var(--shadow-md);
}
.about-photo img { width: 100%; }
.about-text { display: grid; gap: var(--s-4); max-width: var(--measure); }
.about-text .mono { margin-top: var(--s-2); }

.about-facts {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
  margin-top: var(--s-2);
}
.about-facts span {
  padding: 4px 11px;
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  background: var(--surface);
  font-size: var(--fs-micro);
  color: var(--muted);
}

@media (min-width: 860px) {
  .about-grid { grid-template-columns: minmax(0, 264px) minmax(0, 1fr); gap: var(--s-8); }
}

/* ---------- 13b Kundenportal -------------------------------
   Bewusst keine Symbol-Kacheln: vier Zeilen mit Haarlinie, wie
   ein Leistungsverzeichnis. Die Kanaele darunter als Zeile, damit
   klar wird, dass das Portal ein Weg von mehreren ist. */
.portal-list {
  display: grid;
  gap: 0;
  border-top: 1px solid var(--line);
}
.portal-list > div {
  display: grid;
  gap: 4px var(--s-6);
  padding-block: var(--s-4);
  border-bottom: 1px solid var(--line);
}
.portal-list dt {
  color: var(--ink);
  font-weight: 550;
  letter-spacing: -.012em;
}
.portal-list dd {
  margin: 0;
  color: var(--muted);
  font-size: var(--fs-small);
  max-width: 62ch;
}
@media (min-width: 780px) {
  .portal-list > div { grid-template-columns: 15rem 1fr; align-items: baseline; }
}
.portal-ways {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2) var(--s-4);
  margin-top: var(--s-5);
  font-size: var(--fs-micro);
  color: var(--muted);
}
.portal-ways span {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}
.portal-ways span::before {
  content: "";
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--accent);
  opacity: .55;
}

/* ---------- 14 Regionen ------------------------------------ */
/* Runde 5: Die Kapseln waren zu rund und der Text sass darin nicht
   mittig, weil nur Polsterung statt einer festen Zeilenhoehe gesetzt war.
   Jetzt Spalten statt Kapselteppich: gestapelte Zeilen mit Haarlinie,
   das liest sich wie ein Verzeichnis statt wie Etiketten. */
.region-grid {
  display: grid;
  /* Zwei Spalten schon auf dem Handy: 14 Regionen in einer Spalte waren
     rund 640 Pixel hoch, das las sich wie eine Endlosliste. */
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 var(--s-5);
  border-top: 1px solid var(--line);
}
.region-grid a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4);
  min-height: 46px;
  padding: 0 2px;
  border-bottom: 1px solid var(--line);
  font-size: var(--fs-small);
  line-height: 1;
  color: var(--body);
  transition: color var(--t-fast) var(--ease),
              padding-left var(--t-base) var(--ease);
}
.region-grid a::after {
  content: "";
  width: 14px;
  height: 8px;
  background: var(--accent);
  opacity: 0;
  -webkit-mask: var(--ic-pfeil) center / contain no-repeat;
          mask: var(--ic-pfeil) center / contain no-repeat;
  transition: opacity var(--t-fast) var(--ease),
              transform var(--t-base) var(--ease);
  transform: translateX(-4px);
}
.region-grid a:hover {
  color: var(--accent);
  padding-left: 6px;
}
.region-grid a:hover::after { opacity: 1; transform: none; }
@media (hover: none) {
  .region-grid a:hover { padding-left: 2px; }
}
@media (min-width: 560px) {
  .region-grid { gap: 0 var(--s-6); }
}
@media (min-width: 900px) {
  .region-grid { grid-template-columns: repeat(3, 1fr); }
}

/* ---------- 15 Fragen -------------------------------------- */
.faq {
  max-width: var(--wrap-narrow);
  border-top: 1px solid var(--line);
}
.faq details { border-bottom: 1px solid var(--line); }
.faq summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4);
  padding: var(--s-5) 0;
  list-style: none;
  cursor: pointer;
  font-size: 1.0625rem;
  font-weight: 500;
  letter-spacing: -.014em;
  color: var(--ink);
  transition: color var(--t-fast) var(--ease);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary:hover { color: var(--accent); }
.faq details[open] > summary { color: var(--ink); }

/* Plus/Minus: EIN Bauteil fuer FAQ und Projekte.
   16px-Box mit 2px-Balken, beide exakt auf der Pixelmitte, damit
   waagerecht und senkrecht identisch dick rendern. Der Zustand
   haengt an .is-open (sofort per JS gesetzt), nicht an [open],
   damit das Icon beim Zuklappen nicht auf die Feder wartet. */
.ind {
  position: relative;
  flex: none;
  width: 16px;
  height: 16px;
  color: var(--muted);
  transition: color var(--t-fast) var(--ease);
}
.ind::before, .ind::after {
  content: "";
  position: absolute;
  left: 0;
  top: 7px;
  width: 16px;
  height: 2px;
  border-radius: 1px;
  background: currentColor;
  transition: transform var(--t-turn) var(--ease-inout),
              opacity var(--t-turn) var(--ease-inout);
}
.ind::after { transform: rotate(90deg); }
/* Beide Striche drehen gemeinsam eine halbe Umdrehung; der
   senkrechte legt sich dabei auf den waagerechten. Das ist eine
   durchgehende Bewegung statt eines Zeichenwechsels. */
details.is-open .ind::before { transform: rotate(180deg); }
details.is-open .ind::after { transform: rotate(180deg); }
html:not(.js) details[open] .ind::after { transform: rotate(180deg); }
html:not(.js) details[open] .ind::before { transform: rotate(180deg); }
summary:hover .ind, .work-card:hover .ind { color: var(--accent); }

/* Zwoelf Fragen am Stueck sind eine Wand, auch eingeklappt. Sechs
   stehen offen da, der Rest kommt auf Wunsch. Ohne JavaScript sind
   alle zwoelf sichtbar, das hidden nimmt das Skript weg. */
.faq-mehr {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 14px 2px;
  border: 0;
  background: none;
  font-size: var(--fs-small);
  color: var(--accent);
  text-align: left;
}
.faq-mehr .fm-pfeil {
  width: 7px;
  height: 7px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform var(--t-fast) var(--ease);
}
.faq-mehr[aria-expanded="true"] .fm-pfeil { transform: rotate(225deg) translate(-3px, -3px); }
html:not(.js) .faq-mehr { display: none; }
.faq-mehr[hidden] { display: none; }
/* Im Textblock ist der Knopf ein Absatz unter dem Text, keine Zeile
   quer ueber die Spalte. */
.ueber-mehr { width: auto; padding-left: 0; margin-top: var(--s-3); }

.faq-body { overflow: hidden; height: 0; }
html:not(.js) .faq-body { height: auto; }
.faq details[open] .faq-body { height: auto; }
.faq-body > div {
  padding-bottom: var(--s-5);
  max-width: var(--measure);
  font-size: var(--fs-small);
  color: var(--muted);
}

/* ---------- 16 Kontakt ------------------------------------- */
.kontakt-grid { display: grid; gap: var(--s-6); align-items: start; }

.kform {
  display: grid;
  gap: var(--s-4);
  padding: var(--s-5);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
}
.kf-row { display: grid; gap: var(--s-4); }
/* align-content: sonst streckt ein Feld ohne Fehlerzeile sein Eingabefeld
   auf die volle Zeilenhoehe und steht 3px hoeher als sein Nachbar. */
.kf-field { display: grid; gap: 6px; align-content: start; }
.kf-field label {
  font-size: var(--fs-micro);
  font-weight: 550;
  color: var(--ink);
}
.kf-field input,
.kf-field select,
.kf-field textarea {
  width: 100%;
  padding: 11px 13px;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-sm);
  background: var(--field-bg);
  font-size: var(--fs-small);
  color: var(--ink);
  transition: border-color var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease);
}
.kf-field textarea { resize: vertical; min-height: 110px; }
.kf-field select {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 34px;
  background-image: var(--select-chevron);
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 11px 8px;
  cursor: pointer;
}
.kf-field input:focus-visible,
.kf-field select:focus-visible,
.kf-field textarea:focus-visible {
  border-color: var(--accent);
  box-shadow: var(--ring);
}
.kf-field.has-error input,
.kf-field.has-error select,
.kf-field.has-error textarea { border-color: var(--danger); }

/* Paketwahl: vier Schalter statt eines weiteren Auswahlfeldes. Wer von
   einer Preiskarte kommt, findet sein Paket schon gesetzt vor; wer nur
   fragen will, laesst "Noch nicht sicher" stehen. */
.kf-paket { border: 0; padding: 0; margin: 0; display: grid; gap: 10px; }
.kf-paket legend {
  padding: 0;
  font-size: var(--fs-micro);
  font-weight: 550;
  color: var(--ink);
}
.kf-choices { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.kf-choice { position: relative; }
.kf-choice input {
  position: absolute;
  inset: 0;
  opacity: 0;
  cursor: pointer;
}
.kf-choice span {
  display: block;
  padding: 9px 15px;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-sm);
  background: var(--field-bg);
  font-size: var(--fs-small);
  color: var(--muted);
  transition: border-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease), background var(--t-fast) var(--ease);
}
.kf-choice:hover span { color: var(--ink); border-color: var(--ink); }
.kf-choice input:checked + span {
  border-color: var(--accent);
  background: var(--accent-soft);
  color: var(--ink);
}
.kf-choice input:focus-visible + span {
  border-color: var(--accent);
  box-shadow: var(--ring);
}
.kf-hint { font-size: var(--fs-micro); color: var(--muted); }
/* Kurzer Hinweis, wenn die Wahl von aussen gesetzt wurde. */
.kf-paket.is-gesetzt .kf-choice input:checked + span { animation: paket-merk 1.1s var(--ease); }
@keyframes paket-merk {
  0%, 100% { box-shadow: none; }
  30% { box-shadow: var(--ring); }
}
@media (prefers-reduced-motion: reduce) {
  .kf-paket.is-gesetzt .kf-choice input:checked + span { animation: none; }
}

.kf-error {
  font-size: var(--fs-micro);
  color: var(--danger);
  min-height: 0;
}
.kf-tel { display: flex; gap: var(--s-2); position: relative; }
/* Auf dem Handy war die 9 von +49 abgeschnitten: 112px minus je 34px
   Innenabstand liessen nur 44px fuer den Text. Feld breiter, rechter
   Abstand knapper. */
.kf-tel select { flex: none; width: 128px; padding-left: 32px; padding-right: 24px; }
/* Die Flagge liegt vor dem Auswahlfeld. Ein Auswahlfeld kann von sich
   aus keine Grafik zeigen, deshalb wird sie darueber gelegt und per
   JavaScript ausgetauscht. Klicks gehen durch. */
.kf-flag {
  position: absolute;
  left: 10px;
  top: 50%;
  transform: translateY(-50%);
  width: 20px;
  height: 14px;
  border-radius: 2px;
  overflow: hidden;
  box-shadow: 0 0 0 1px var(--line);
  pointer-events: none;
}
.kf-flag svg { display: block; width: 100%; height: 100%; }

.kf-privacy { font-size: var(--fs-micro); color: var(--muted); }
.kf-privacy a { color: var(--accent); text-decoration: underline; text-underline-offset: 2px; }
.kf-status { font-size: var(--fs-small); color: var(--accent); }
.kf-status.is-ok {
  /* Nach dem Senden bleibt nur diese Zeile stehen. Damit sie in der leer
     gewordenen Flaeche nicht verloren wirkt, bekommt sie dann dieselbe Form
     wie die Kontaktkarte daneben. */
  padding: var(--s-5);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--surface-2);
  font-size: var(--fs-body);
}
.kform .hero-actions { justify-content: start; margin-top: 0; }

.kontakt-aside {
  display: grid;
  gap: var(--s-4);
  padding: var(--s-5);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--surface-2);
}
.kontakt-aside ul { list-style: none; padding: 0; display: grid; gap: var(--s-3); }
.kontakt-aside li { display: flex; align-items: center; gap: var(--s-3); flex-wrap: wrap; }
.kontakt-aside p { font-size: var(--fs-small); color: var(--muted); }
.copy-mail {
  padding: 3px 9px;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-pill);
  background: var(--surface);
  font-size: var(--fs-micro);
  color: var(--muted);
}
.copy-mail:hover { color: var(--ink); }

@media (min-width: 620px) {
  .kf-row { grid-template-columns: repeat(2, 1fr); }
  .kform,
  .kontakt-aside { padding: var(--s-6); }
}
@media (min-width: 900px) {
  .kontakt-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 320px); gap: var(--s-6); }
}

/* ---------- 17 Fusszeile ----------------------------------- */
.site-footer {
  position: relative;
  border-top: 1px solid var(--line);
  background: var(--bg-soft);
  padding-top: var(--s-7);
  overflow: hidden;
}
.footer-grid {
  display: grid;
  gap: var(--s-5);
  grid-template-columns: 1fr;
}
.footer-brand { display: grid; gap: var(--s-3); max-width: 34ch; }
.footer-brand p { font-size: var(--fs-small); color: var(--muted); }
.footer-status {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: var(--fs-micro);
  color: var(--muted);
}
.footer-status .dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--accent);
}
.site-footer h2 {
  font-size: var(--fs-micro);
  font-weight: 600;
  letter-spacing: .02em;
  color: var(--ink);
  margin-bottom: var(--s-3);
}
.site-footer ul { list-style: none; padding: 0; display: grid; gap: 7px; }
.site-footer li a {
  font-size: var(--fs-small);
  color: var(--muted);
  transition: color var(--t-fast) var(--ease);
}
.site-footer li a:hover { color: var(--ink); }

.footer-legal {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3) var(--s-5);
  justify-content: space-between;
  margin-top: var(--s-5);
  padding: var(--s-3) 0 var(--s-4);
  border-top: 1px solid var(--line);
  font-size: var(--fs-micro);
  color: var(--muted);
}

.footer-wordmark {
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: clamp(20px, 4vw, 32px);
  color: var(--line);
  opacity: .65;
  pointer-events: none;
}
.footer-wordmark svg {
  display: block;
  width: clamp(150px, 26vw, 330px);
  height: auto;
}
.footer-wordmark text {
  fill: currentColor;
  font-family: var(--font-sans);
  font-size: 86px;
  font-weight: 600;
  letter-spacing: -.04em;
}

@media (min-width: 700px) {
  .footer-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 1000px) {
  .footer-grid { grid-template-columns: 1.6fr repeat(4, 1fr); }
}

/* ---------- 18 Bewegung ------------------------------------ */
@keyframes rise {
  from { opacity: 0; transform: translateY(34px); }
  to   { opacity: 1; transform: none; }
}

/* Der Weg ueber animation-timeline: view() ist raus. Er lief nur in
   Chromium, war ueber den Bereich schwer zu treffen und im Ergebnis
   nicht sichtbar. Die Bewegung kommt jetzt ueberall aus app.js. */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  .hero-line > span { transform: none; }
}


/* ---------- 19 Runde 5: Bewegung, Hover, Mobil-Laenge -------
   1. Reveal lief bisher nur ueber animation-timeline: view(),
      also praktisch nur in Chromium. Fallback per Klasse, damit
      Firefox und Safari dieselbe Bewegung sehen.
   2. Auf schmalen Schirmen wird die Seite kuerzer: engere
      Abstaende, Regionen und Projekte klappen ein.
   ---------------------------------------------------------- */

@media (prefers-reduced-motion: no-preference) {
  html.js .reveal {
    opacity: 0;
    transform: translateY(34px);
    transition: opacity .72s var(--ease), transform .72s var(--ease);
  }
  html.js .reveal.is-visible { opacity: 1; transform: none; }
  html.js .reveal-d1 { transition-delay: .09s; }
  html.js .reveal-d2 { transition-delay: .18s; }
  html.js .reveal-d3 { transition-delay: .27s; }
}

/* --- Hover-Zustaende, die vorher gefehlt haben ------------- */
.svc-card { transition: border-color var(--t-base) var(--ease),
                        box-shadow var(--t-base) var(--ease),
                        transform var(--t-base) var(--ease); }
.svc-card:hover { transform: translateY(-2px); }
.price-card { transition: border-color var(--t-base) var(--ease),
                          box-shadow var(--t-base) var(--ease),
                          transform var(--t-base) var(--ease); }
.price-card:hover { border-color: var(--line-strong); box-shadow: var(--shadow-md); transform: translateY(-2px); }
.step-card { transition: border-color var(--t-base) var(--ease), box-shadow var(--t-base) var(--ease); }
.step-card:hover { border-color: var(--line-strong); box-shadow: var(--shadow-sm); }
.site-footer li a { transition: color var(--t-fast) var(--ease); }
@media (hover: none) {
  .svc-card:hover, .price-card:hover { transform: none; }
}

/* --- Fusszeile: Instagram und LinkedIn --------------------- */
.footer-social {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
  margin-top: var(--s-4);
}
.footer-social a {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 30px;
  padding-inline: 10px;
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  background: var(--surface);
  font-size: var(--fs-micro);
  color: var(--muted);
  text-decoration: none;
  transition: color var(--t-fast) var(--ease),
              border-color var(--t-fast) var(--ease),
              background-color var(--t-fast) var(--ease);
}
.footer-social svg { width: 14px; height: 14px; }
.footer-social a:hover {
  color: var(--ink);
  border-color: var(--line-strong);
  background: var(--surface-2);
}

/* --- Mobil: dieselbe Seite, deutlich weniger Weg ----------- */
@media (max-width: 719px) {
  :root { --section-pad: 56px; }
  .sec-head { margin-bottom: var(--s-6); }
  .work-grid { gap: var(--s-4); }
  .work-body { padding: var(--s-4); }
  .work-title { font-size: 1rem; }
  .page-hero h1 { margin-block: var(--s-4) var(--s-3); }
  .hero-actions { margin-top: var(--s-5); }
  .faq summary { padding-block: var(--s-4); }
  .work-cta { margin-top: var(--s-5); }
  .demo-note { margin-top: var(--s-5); }
}

/* ---------- 20 Mobil: gleiche Aussage, halber Weg ----------
   Der Entwurf war auf 375px rund 13.400px hoch. Gekuerzt wird
   nicht am Text, sondern an dem was auf dem Handy ohnehin nur
   Scrollstrecke war: Demo-Bilder, einspaltige Fusszeile,
   Karten-Innenabstaende.
   ---------------------------------------------------------- */
@media (max-width: 719px) {
  /* Demos sind Beiwerk: auf dem Handy als kompakte Zeilen,
     das Bild kommt erst beim Aufklappen der Demo selbst. */

  /* Fusszeile zweispaltig statt gestapelt. */
  .footer-grid { grid-template-columns: 1fr 1fr; gap: var(--s-6) var(--s-5); }
  .footer-brand { grid-column: 1 / -1; }
  .footer-grid > div > h2 { margin-bottom: var(--s-2); }
  .footer-grid ul { gap: 2px; }

  /* Schalter fuer alles, was nur auf dem grossen Schirm Sinn ergibt.
     Auf dem Handy zaehlt Strecke: die Regionen stehen ohnehin als
     eigener Abschnitt auf der Seite, die Fusszeile muss sie nicht
     ein zweites Mal auflisten. */
  .nur-desktop { display: none; }
  .footer-wordmark { display: none; }
  .site-footer { padding-top: var(--s-6); }

  /* Acht Leistungskarten untereinander waren allein zwei Bildschirme
     Scrollstrecke. Auf dem Handy steht das Symbol neben der Zeile
     statt darueber, der Text bleibt vollstaendig. */
  .svc-card {
    display: grid;
    grid-template-columns: 34px 1fr;
    gap: 2px var(--s-4);
    padding: var(--s-4);
  }
  .svc-icon { width: 34px; height: 34px; grid-row: 1 / span 2; align-self: center; }
  .svc-icon svg { width: 18px; height: 18px; }
  .svc-card h3 { margin: 0; align-self: end; }
  .svc-card p { grid-column: 2; }

  /* Karten atmen weniger, Zeilen bleiben gleich lesbar. */
  .price-card, .step-card { padding: var(--s-5); }
  .svc-cards, .price-cards, .step-cards, .about-grid, .kontakt-grid { gap: var(--s-4); }
}

/* ---------- 21 Regionsseiten -------------------------------
   Eigene Klassen statt Hero-Recycling: die Ortsseite zeigt ein
   ganzes Foto mit Bildunterschrift, der Startseiten-Hero dagegen
   einen oben abgeschnittenen Screenshot.
   ---------------------------------------------------------- */
.page-hero--slim {
  padding-top: calc(var(--header-h) + clamp(20px, 2.7vw, 36px));
  padding-bottom: clamp(38px, 5vw, 68px);
}
.page-hero--slim h1 { max-width: 18ch; }

.orte-shot {
  position: relative;
  max-width: 1000px;
  margin-inline: auto;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--surface);
  box-shadow: var(--shadow-shot);
}
.orte-shot img {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}
.orte-shot figcaption {
  padding: var(--s-3) var(--s-4);
  border-top: 1px solid var(--line);
  font-size: var(--fs-micro);
  color: var(--muted);
}

.prose { max-width: 62ch; }
.prose p + p { margin-top: var(--s-4); }
.orte-facts { max-width: 62ch; }

/* ---------- 22 Regionsseiten: Branchenblock ----------------
   Runde 6. Die Regionsseiten waren zu kurz und untereinander
   zu aehnlich. Der Branchenblock ist eine Definitionsliste,
   weil Name und Anforderung genau das Verhaeltnis haben; ein
   Aufzaehlungspunkt wuerde beides gleich gewichten. */
.branchen {
  display: grid;
  gap: var(--s-5);
  margin-top: var(--s-7);
  max-width: 72ch;
}
@media (min-width: 720px) {
  .branchen { grid-template-columns: 1fr 1fr; gap: var(--s-6) var(--s-7); }
}
.branchen > div {
  display: grid;
  gap: var(--s-2);
  padding-top: var(--s-3);
  border-top: 1px solid var(--line);
}
.branchen dt {
  font-size: 1.0625rem;
  font-weight: 550;
  letter-spacing: -.016em;
  color: var(--ink);
}
.branchen dd {
  font-size: var(--fs-small);
  color: var(--muted);
  max-width: 46ch;
}

/* ---------- 23 Runde 7: Fusszeile, Vorschaubilder, Symbole --
   Rueckmeldungen: Fusszeilenspalten unterschiedlich hoch,
   Vorschaubilder abgeschnitten, Anlaesse ohne Symbole, zu
   wenig Reaktion beim Zeigen. */

/* Die Spalten waren gestreckt: .footer-brand ist ein Raster,
   und ohne align-content verteilt es die Restzeilenhoehe auf
   seine Zeilen. Dadurch rutschte das Logo nach unten. */
.footer-grid { align-items: start; }
.footer-brand { align-content: start; }

/* Die Aufnahmen sind 1200 x 675, also 16:9. Die Kachel schnitt
   sie auf 16:10 zu und nahm damit unten ein Zehntel weg. */
.work-card .shot img { aspect-ratio: 16 / 9; }

/* Aufzaehlungen hatten Systempunkte UND eigene Marken. */
.work-facts { list-style: none; padding: 0; }

/* Bindestrich in grossen Ueberschriften. Bei -.032em Laufweite
   klebt er an beiden Woertern; hier etwas Luft zurueckgeben. */
.display.hy-relief { letter-spacing: -.012em; }

/* --- Symbole fuer die Anlaesse ---------------------------
   Als Maske statt als Bild, damit die Farbe aus dem Token
   kommt und nicht im Datei-Inhalt steckt. */
.orte-facts li { padding-left: 30px; }
.orte-facts li::before {
  left: 0;
  top: .12em;
  width: 17px;
  height: 17px;
  border: 0;
  border-radius: 0;
  background: var(--accent);
  opacity: .85;
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-position: center;
          mask-position: center;
  -webkit-mask-size: 17px 17px;
          mask-size: 17px 17px;
  transition: transform .6s var(--ease-spring),
              opacity var(--t-base) var(--ease);
}
.orte-facts li:hover::before { transform: rotate(-6deg) scale(1.12); opacity: 1; }
.orte-facts li { transition: color var(--t-fast) var(--ease); }
.orte-facts li:hover { color: var(--ink); }

.ic-preis::before  { -webkit-mask-image: var(--ic-preis);  mask-image: var(--ic-preis); }
.ic-suche::before  { -webkit-mask-image: var(--ic-suche);  mask-image: var(--ic-suche); }
.ic-anruf::before  { -webkit-mask-image: var(--ic-anruf);  mask-image: var(--ic-anruf); }
.ic-mail::before   { -webkit-mask-image: var(--ic-mail);   mask-image: var(--ic-mail); }
.ic-bild::before   { -webkit-mask-image: var(--ic-bild);   mask-image: var(--ic-bild); }
.ic-system::before { -webkit-mask-image: var(--ic-system); mask-image: var(--ic-system); }
.ic-zeit::before   { -webkit-mask-image: var(--ic-zeit);   mask-image: var(--ic-zeit); }
.ic-leute::before  { -webkit-mask-image: var(--ic-leute);  mask-image: var(--ic-leute); }
.ic-ort::before    { -webkit-mask-image: var(--ic-ort);    mask-image: var(--ic-ort); }
.ic-hinweis::before{ -webkit-mask-image: var(--ic-hinweis);mask-image: var(--ic-hinweis); }

/* --- Branchenblock reagiert auf den Zeiger --------------- */
.branchen > div {
  transition: border-color var(--t-base) var(--ease);
}
.branchen > div:hover { border-top-color: var(--accent-line); }
.branchen dt { transition: color var(--t-base) var(--ease); }
.branchen > div:hover dt { color: var(--accent); }

/* --- Regionskacheln heben sich beim Zeigen leicht --------- */

/* ---------- 24 Seite Arbeiten ------------------------------ */
.case { display: grid; gap: var(--s-6); }
.case + .case { margin-top: var(--s-8); padding-top: var(--s-8); border-top: 1px solid var(--line); }
@media (min-width: 900px) {
  .case { grid-template-columns: 1.05fr .95fr; gap: var(--s-7); align-items: center; }
  .case:nth-child(even) .case-shot { order: -1; }
}
.case-shot {
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--surface-2);
  box-shadow: var(--shadow-sm);
  transition: box-shadow var(--t-base) var(--ease),
              border-color var(--t-base) var(--ease);
}
.case-shot:hover { box-shadow: var(--shadow-md); border-color: var(--line-strong); }
.case-shot img {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  transition: transform var(--t-slow) var(--ease);
}
.case-shot:hover img { transform: scale(1.02); }
.case-body { display: grid; gap: var(--s-3); align-content: start; }
.case-body h2 { font-size: clamp(1.35rem, 2.4vw, 1.7rem); letter-spacing: -.022em; }
.case-body p { color: var(--muted); max-width: 52ch; }
.case-meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
  margin-top: var(--s-1);
}
.case-meta span {
  padding: 3px 10px;
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  background: var(--surface);
  font-size: var(--fs-micro);
  color: var(--muted);
}

/* ---------- 25 Zeigen darf man merken ---------------------- */
/* Rueckmeldung Runde 7: zu wenig spuerbare Reaktion. Alles hier
   ist Bewegung im Bereich weniger Pixel, damit es antwortet statt
   zu wackeln. Auf Geraeten ohne Zeiger faellt es weg.            */
.svc-icon {
  transition: transform .6s var(--ease-spring),
              background var(--t-base) var(--ease),
              border-color var(--t-base) var(--ease);
}
.svc-card:hover .svc-icon {
  transform: rotate(-6deg) scale(1.07);
}
.svc-card h3 { transition: color var(--t-base) var(--ease); }
.svc-card:hover h3 { color: var(--accent); }

.step::before { transition: transform .6s var(--ease-spring); }
.step:hover::before { transform: scale(1.07); }

.case-meta span {
  transition: border-color var(--t-base) var(--ease),
              color var(--t-base) var(--ease);
}
.case-meta span:hover { border-color: var(--accent-line); color: var(--accent); }

@media (hover: none) {
  .svc-card:hover .svc-icon, .step:hover::before,
  .orte-facts li:hover::before { transform: none; }
}


/* ---------- 26 Ablauf als Route ----------------------------
   Uebernommen von vandro.de: eine Linie waechst mit dem Scroll,
   die Rauten leuchten auf, sobald sie erreicht sind. Eigene
   Klasse, weil die Demo-Seiten ihren Vierer-Raster-Ablauf
   behalten sollen. Ohne JS und bei reduzierter Bewegung steht
   die Route fertig da.
   ---------------------------------------------------------- */
.steps--route {
  position: relative;
  padding-left: var(--route-pad, clamp(34px, 5vw, 58px));
  gap: var(--s-5);
}
.steps--route::before {
  content: "";
  position: absolute;
  left: 7px;
  top: 14px;
  bottom: 14px;
  border-left: 2px dashed var(--line);
}
.steps-progress {
  position: absolute;
  left: 6px;
  top: 14px;
  bottom: 14px;
  width: 3px;
  border-radius: 2px;
  background: var(--accent);
  transform: scaleY(0);
  transform-origin: top;
  will-change: transform;
}
.steps--route .step::after {
  content: "";
  position: absolute;
  left: calc(7.5px - var(--route-pad, clamp(34px, 5vw, 58px)));
  top: 26px;
  width: 12px;
  height: 12px;
  background: var(--surface);
  border: 2px solid var(--line);
  transform: translateX(-50%) rotate(45deg);
  transition: background-color var(--t-base) var(--ease),
              border-color var(--t-base) var(--ease),
              transform .6s var(--ease-spring);
}
.steps--route .step.is-passed::after {
  background: var(--accent);
  border-color: var(--accent);
  transform: translateX(-50%) rotate(45deg) scale(1.3);
}

/* Die Route bleibt einspaltig, auch wo .steps sonst umbricht. */
@media (min-width: 640px) {
  .steps--route { grid-template-columns: 1fr; }
}
@media (min-width: 1040px) {
  .steps--route { grid-template-columns: 1fr; }
}

/* Ohne JS und ohne Bewegungswunsch: fertig gezeichnet. */
html:not(.js) .steps-progress { transform: scaleY(1); }
@media (prefers-reduced-motion: reduce) {
  .steps-progress { transform: scaleY(1); }
}

/* Verweis auf die eigene Unterseite: ein Satz mit kleinem Winkel,
   kein Knopf. Steht am Fuss eines gekuerzten Abschnitts. */
.mehr-zeile { margin-top: var(--s-5); font-size: var(--fs-small); }
.mehr-link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--accent);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  padding-bottom: 2px;
  transition: border-color var(--t-fast) var(--ease);
}
.mehr-link:hover { border-bottom-color: color-mix(in oklab, var(--accent) 45%, transparent); }
.mehr-link .ml-pfeil {
  flex: 0 0 auto;
  width: 7px;
  height: 7px;
  border-right: 1.5px solid currentColor;
  border-top: 1.5px solid currentColor;
  transform: rotate(45deg);
  transition: transform var(--t-fast) var(--ease);
}
.mehr-link:hover .ml-pfeil { transform: rotate(45deg) translate(2px, -2px); }
/* ---------- 31 Rechtstexte (Impressum, Datenschutz) --------
   Lange Fliesstexte brauchen etwas anderes als die Werbe-
   abschnitte: eine schmale Spalte, ruhige Abstaende und eine
   Inhaltsliste, die beim Lesen stehen bleibt. Die Ueberschriften
   sind kleiner als sonst, damit die zwoelf Abschnitte nicht wie
   zwoelf Kapitel wirken. */
.recht-layout { display: grid; gap: var(--s-7); }
@media (min-width: 900px) {
  .recht-layout {
    grid-template-columns: 190px minmax(0, 1fr);
    gap: var(--s-9);
    align-items: start;
  }
  .recht-toc { position: sticky; top: calc(var(--header-h) + var(--s-6)); }
}
.recht-toc-titel {
  font-size: var(--fs-micro);
  font-weight: 550;
  color: var(--accent);
  margin-bottom: var(--s-3);
}
.recht-toc ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.recht-toc a {
  display: block;
  font-size: var(--fs-small);
  line-height: 1.35;
  color: var(--muted);
  transition: color var(--t-fast) var(--ease);
}
.recht-toc a:hover { color: var(--ink); }

.recht { max-width: 68ch; color: var(--body); }
.recht h2 {
  font-size: var(--fs-h3);
  font-weight: 550;
  line-height: 1.25;
  margin-top: var(--s-8);
  padding-top: var(--s-5);
  border-top: 1px solid var(--line);
  scroll-margin-top: calc(var(--header-h) + var(--s-6));
}
.recht > h2:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.recht p { margin-top: var(--s-4); line-height: 1.65; }
.recht a {
  color: var(--accent);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  text-decoration-color: color-mix(in oklab, var(--accent) 35%, transparent);
  transition: text-decoration-color var(--t-fast) var(--ease);
}
.recht a:hover { text-decoration-color: var(--accent); }
/* Die Bildnachweise sind eine Quellenliste, kein Argument.
   Deshalb ein feiner Strich statt eines Punktes. */
.recht ul { list-style: none; margin-top: var(--s-5); padding: 0; display: grid; gap: var(--s-3); }
.recht li {
  position: relative;
  padding-left: var(--s-5);
  font-size: var(--fs-small);
  line-height: 1.6;
}
.recht li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .68em;
  width: 8px;
  height: 1px;
  background: var(--accent-line);
}
.recht .mono { margin-top: var(--s-7); }
.recht-weiter { margin-top: var(--s-6); }
.recht-weiter .link-arrow { font-size: var(--fs-small); text-decoration: none; }


/* ---------- 32 Ratgeber ------------------------------------
   Die Artikel nutzen die Prosa aus Abschnitt 31 weiter, damit es
   nur einen Satz Regeln fuer langen Fliesstext gibt. Neu sind hier
   die Zeile unter der H1, das Verzeichnis der Artikel und der
   Abschluss-Kasten. Das Verzeichnis ist bewusst eine Liste mit
   Haarlinien und keine Kartenwand, so wie die Regionen auch.
   ---------------------------------------------------------- */
.artikel-meta {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--s-2) var(--s-5);
  margin-top: var(--s-5);
  font-size: var(--fs-micro);
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--muted);
}
.artikel-meta span + span::before {
  content: "";
  display: inline-block;
  width: 12px;
  height: 1px;
  margin-right: var(--s-3);
  vertical-align: middle;
  background: var(--accent-line);
}

.artikel > p:first-child { font-size: var(--fs-lead); line-height: 1.6; color: var(--ink); }
.artikel li b { font-weight: 550; color: var(--ink); }

.artikel-cta {
  max-width: 68ch;
  margin-top: var(--s-9);
  padding-top: var(--s-6);
  border-top: 1px solid var(--line);
}
.artikel-cta h2 {
  font-size: var(--fs-h3);
  font-weight: 550;
  line-height: 1.25;
}
.artikel-cta p {
  max-width: 54ch;
  margin-top: var(--s-3);
  color: var(--body);
  line-height: 1.6;
}
.artikel-cta .btn { margin-top: var(--s-5); }

.rg-liste {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--line);
}
.rg-liste li { border-bottom: 1px solid var(--line); }
.rg-liste a {
  display: block;
  padding: var(--s-6) 2px;
  transition: padding-left var(--t-base) var(--ease);
}
.rg-kat {
  display: block;
  font-size: var(--fs-micro);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--accent);
}
.rg-liste h2 {
  margin-top: var(--s-3);
  max-width: 26ch;
  font-size: var(--fs-h3);
  font-weight: 550;
  line-height: 1.2;
  color: var(--ink);
  transition: color var(--t-fast) var(--ease);
}
.rg-liste p {
  margin-top: var(--s-3);
  max-width: 58ch;
  font-size: var(--fs-small);
  line-height: 1.55;
  color: var(--body);
}
.rg-mehr {
  display: inline-block;
  margin-top: var(--s-4);
  font-size: var(--fs-small);
  color: var(--accent);
}
.rg-mehr::after {
  content: "";
  display: inline-block;
  width: 14px;
  height: 8px;
  margin-left: var(--s-3);
  vertical-align: middle;
  background: var(--accent);
  -webkit-mask: var(--ic-pfeil) center / contain no-repeat;
          mask: var(--ic-pfeil) center / contain no-repeat;
  transform: translateX(-4px);
  transition: transform var(--t-base) var(--ease);
}
.rg-liste a:hover { padding-left: 6px; }
.rg-liste a:hover h2 { color: var(--accent); }
.rg-liste a:hover .rg-mehr::after { transform: none; }
@media (hover: none) {
  .rg-liste a:hover { padding-left: 2px; }
}
@media (min-width: 900px) {
  .rg-liste a { padding: var(--s-7) 2px; }
}