/* Lokale Schriften — keine Verbindung zu Google beim Seitenaufruf.
   Erzeugt aus den latin-Bloecken von fonts.googleapis.com. */
@font-face{font-family:'Manrope';font-style:normal;font-weight:400 800;font-display:swap;src:url('../assets/fonts/manrope-400-800.woff2') format('woff2');}
@font-face{font-family:'Poppins';font-style:normal;font-weight:400;font-display:swap;src:url('../assets/fonts/poppins-400.woff2') format('woff2');}
@font-face{font-family:'Poppins';font-style:normal;font-weight:500;font-display:swap;src:url('../assets/fonts/poppins-500.woff2') format('woff2');}
@font-face{font-family:'Poppins';font-style:normal;font-weight:600;font-display:swap;src:url('../assets/fonts/poppins-600.woff2') format('woff2');}
@font-face{font-family:'Poppins';font-style:normal;font-weight:700;font-display:swap;src:url('../assets/fonts/poppins-700.woff2') format('woff2');}

/* Das hidden-Attribut muss staerker sein als jede Klassenregel.
   Ohne diese Zeile bliebe ein Knopf mit display:inline-flex sichtbar,
   obwohl er hidden traegt — genau die Ersatz-Knoepfe des Assistenten. */
[hidden] { display: none !important; }

/* ════════════════════════════════════════════════════════════════
   Multi Clean Service GmbH — Design-System
   Basis: alt.multi-clean.ch (MKurti-Look) · Dot-Grid · Manrope/Poppins
   Akzent #C26B3C · fixierter 60px-Header/Footer · Chat-Sidebar
   ════════════════════════════════════════════════════════════════ */

*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

:root {
  /* ── Style Guide: Terracotta & Espresso (warm, Dunkel↔Hell harmonisch) ── */
  --black: #2A2420;        /* warmes Schwarz (Text/Strong) */
  --white: #ffffff;        /* Karten */
  --bg: #FBF7F1;           /* warmes Papier (Seitenhintergrund) */
  --soft: #F1E9DD;         /* Sand (helle Sektionen, Tiles) */
  --gray-light: #F1E9DD;   /* Sand (Alias fuer bestehende Nutzungen) */
  --gray-mid: #E7DCCB;     /* warmer Rahmen */
  --gray-dark: #6E6358;    /* warmer Fliesstext */
  --ink: #2A2420;          /* warmes Schwarz */
  --slate: #8C8175;        /* warmes Taupe (Eyebrows/Muted) */
  --accent: #C26B3C;       /* Terracotta */
  --accent-2: #E0A35A;     /* Amber */
  --accent-dark: #A4552C;  /* Terracotta dunkel (Hover) */
  --dark-1: #221D19;       /* Espresso */
  --dark-2: #34291F;       /* Espresso warm */
  --font-heading: 'Manrope', sans-serif;
  --font-body: 'Poppins', sans-serif;
  --pad: 60px;
  --header-h: 60px;
  --footer-h: 60px;
  --rail: 60px;
  --sidebar-w: 380px;
  --max-content: 1200px;
  --dot: #E2D6C4;
}

html { scroll-behavior: smooth; }
body {
  font-family: var(--font-body);
  color: var(--ink);
  background: var(--bg);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { color: inherit; }

/* ── HEADER ── */
.header {
  position: fixed; top: 0; left: 0; right: 0;
  height: var(--header-h);
  background: var(--white);
  border-bottom: 1px solid var(--gray-mid);
  /* 3-Spalten-Raster statt space-between: die Navigation bleibt optisch mittig,
     egal wie breit Logo (mit Wortmarke) und Aktionen werden. */
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
  column-gap: 24px;
  padding: 0 20px;
  z-index: 100;
}
/* Spalten fest zuweisen. Ohne das rutschen die Aktionen in die Navi-Spalte, sobald die
   Navi ausgeblendet ist (display:none nimmt das Element ganz aus dem Raster) — das Logo
   landet dann in einer 70px-Spalte und schiebt sich unter die Buttons. */
.header__logo    { grid-column: 1; }
.header__nav     { grid-column: 2; }
.header__actions { grid-column: 3; }
.header__burger  { grid-column: 3; }
.header__logo { display: flex; align-items: center; justify-self: start; min-width: 0; }
.header__logo a { display: flex; align-items: center; gap: 10px; text-decoration: none; }
/* Breite und Hoehe stehen jetzt auch am Bild selbst (150x34, aus dem
   viewBox 512x116 gerechnet). Damit kennt der Browser den Platzbedarf
   schon vor dem Laden des SVG und die Kopfzeile springt nicht. */
.header__logo img { height: 34px; width: auto; display: block; flex: 0 0 auto; }
.header__wordmark {
  font-family: var(--font-heading); font-weight: 800; font-size: 16px;
  letter-spacing: -0.015em; line-height: 1;
  color: var(--ink); text-transform: lowercase; white-space: nowrap;
  transition: color 0.2s;
}
.header__logo a:hover .header__wordmark { color: var(--accent); }
.header__nav { display: flex; gap: 26px; align-items: center; justify-self: center; }
.header__nav a {
  color: var(--ink); text-decoration: none;
  font-family: var(--font-heading); font-size: 13px; font-weight: 500;
  transition: color 0.2s, opacity 0.2s; position: relative;
}
.header__nav a:hover { color: var(--accent); }
.header__nav a.is-active { color: var(--accent); font-weight: 700; }
.header__nav a.is-active::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: -20px;
  height: 2px; background: var(--accent); border-radius: 2px;
}
.header__cta {
  background: var(--ink); color: var(--white);
  padding: 8px 22px; border-radius: 7px;
  font-family: var(--font-heading); font-size: 13px; font-weight: 600;
  text-decoration: none; transition: background 0.2s;
}
.header__cta:hover { background: var(--accent-dark); }
.header__burger { display: none; cursor: pointer; flex-direction: column; gap: 5px; background: none; border: none; }
.header__burger span { display: block; width: 24px; height: 2px; background: var(--black); transition: 0.3s; }

/* Enger Desktop (961–1200px): Der Header braucht in voller Groesse ~1150px, die Navigation
   verschwindet aber erst bei 960px. Ohne Verdichtung wuerden die Aktionen aus dem Fenster
   gedrueckt. Zuerst gibt der Zierrat nach (Such-Beschriftung, Abstaende) — die Wortmarke bleibt. */
@media (max-width: 1200px) {
  .header { column-gap: 16px; padding: 0 16px; }
  .header__nav { gap: 18px; }
  .header__nav a { font-size: 12.5px; }
  .header__search-label { display: none; }
  .header__search { padding: 8px; }
  .header__cta { padding: 8px 18px; }
  .header__wordmark { font-size: 15px; }
}
@media (max-width: 1040px) {
  .header { column-gap: 12px; padding: 0 12px; }
  .header__nav { gap: 13px; }
  .header__nav a { font-size: 12px; }
  .header__cta { padding: 8px 14px; }
  .header__wordmark { font-size: 14.5px; }
}
/* Ohne Navigation reichen zwei Spalten — spart eine Rasterluecke fuer die Wortmarke. */
@media (max-width: 960px) {
  .header { grid-template-columns: 1fr auto; }
  .header__actions, .header__burger { grid-column: 2; }
}
/* Auf dem Handy heisst der Knopf nur "Offerte" — sonst reicht der Platz fuer die
   Wortmarke nicht (die Suche liegt zusaetzlich im "Mehr"-Menu der Tab-Leiste). */
@media (max-width: 640px) {
  .header__cta-more { display: none; }
  .header__cta { padding: 8px 13px; }
}

/* ── LAYOUT (60px-Rahmen: Rails + einklappbarer Chat) ── */
.page { padding-top: var(--header-h); padding-bottom: var(--footer-h); }
.content-wrap {
  display: flex;
  min-height: calc(100vh - var(--header-h) - var(--footer-h));
}
.content-main { flex: 1; min-width: 0; }

/* Rails links/rechts */
.rail {
  width: var(--rail); flex-shrink: 0;
  position: sticky; top: var(--header-h);
  height: calc(100vh - var(--header-h) - var(--footer-h));
  display: flex; flex-direction: column; align-items: center;
  background: var(--white); z-index: 5;
}
.rail-left { border-right: 1px solid var(--gray-mid); justify-content: center; gap: 22px; padding: 24px 0; }
.rail-right { border-left: 1px solid var(--gray-mid); justify-content: flex-start; gap: 12px; padding: 18px 0; }
.rail__num { font-family: var(--font-heading); font-weight: 700; font-size: 11px; letter-spacing: 1px; color: var(--accent); }
.rail__title {
  writing-mode: vertical-rl; transform: rotate(180deg);
  font-family: var(--font-heading); font-weight: 800; font-size: 11px;
  letter-spacing: 3px; text-transform: uppercase; color: var(--slate); white-space: nowrap;
}
.rail__btn {
  width: 38px; height: 38px; border-radius: 11px; border: 1px solid var(--gray-mid);
  background: var(--white); color: var(--ink); cursor: pointer;
  display: flex; align-items: center; justify-content: center; transition: all .2s; text-decoration: none;
}
.rail__btn:hover { border-color: var(--accent); color: var(--accent); transform: translateY(-2px); }
.rail__btn svg { width: 18px; height: 18px; }
.rail__btn.is-on { background: var(--accent); color: #fff; border-color: var(--accent); }
.rail__spacer { margin-top: auto; }

/* Chat-Sidebar (einklappbar) — ein durchgehendes Panel, kein Box-in-Box */
.content-sidebar {
  width: var(--sidebar-w);
  flex-shrink: 0;
  position: sticky; top: var(--header-h);
  height: calc(100vh - var(--header-h) - var(--footer-h));
  display: flex; flex-direction: column;
  background: var(--bg);
  border-left: 1px solid var(--gray-mid);
  overflow: hidden;
  transition: width .32s ease, opacity .25s ease;
}
.content-wrap.chat-collapsed .content-sidebar {
  width: 0; opacity: 0; border-left-color: transparent;
}
.content-sidebar .chat-widget {
  flex: 1; display: flex; flex-direction: column; min-height: 0;
}

/* Vollbild-Modus: Chat fuellt den ganzen Inhaltsbereich, zentrierte Lesespalte */
.content-wrap.chat-fullscreen .content-main { display: none; }
.content-wrap.chat-fullscreen .content-sidebar {
  width: auto; flex: 1 1 auto; opacity: 1;
  padding: clamp(18px, 3vw, 36px);
  background-color: var(--soft);
  background-image: radial-gradient(circle, var(--dot) 1.2px, transparent 1.2px);
  background-size: 20px 20px;
}
.content-wrap.chat-fullscreen .mc-chat {
  max-width: 940px; width: 100%; margin: 0 auto;
  background: var(--bg); overflow: hidden;
  border: 1px solid var(--gray-mid); border-radius: 20px;
  box-shadow: 0 28px 70px rgba(34,29,25,0.16);
}
.content-wrap.chat-fullscreen .mc-chat__fs .ico-expand { display: none; }
.content-wrap.chat-fullscreen .mc-chat__fs .ico-compress { display: block; }
/* Vollbild buendig zum Footer — kein leerer Streifen unten */
.page:has(#frame.chat-fullscreen) { padding-bottom: var(--footer-h); }
.boxed {
  max-width: var(--max-content);
  margin: 0 auto;
  padding-left: var(--pad);
  padding-right: var(--pad);
}

/* ── HERO ── */
.hero {
  position: relative;
  min-height: 80vh;
  display: flex; align-items: center;
  overflow: hidden;
}
.hero__bg { position: absolute; inset: 0; z-index: 0; }
.hero__bg img { width: 100%; height: 100%; object-fit: cover; }
.hero__bg--gradient {
  background: linear-gradient(135deg, #1E1A16 0%, #2C241D 45%, #34291F 100%);
}
.hero__bg::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(0,0,0,0.82) 0%, rgba(0,0,0,0.6) 45%, rgba(0,0,0,0.2) 100%);
}
.hero__content {
  position: relative; z-index: 1; width: 100%;
  max-width: var(--max-content); margin: 0 auto;
  padding: 46px var(--pad);
}
.hero__content-inner { max-width: 600px; }
.hero__eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-heading); font-size: 12px; font-weight: 600;
  color: var(--white); background: rgba(255,255,255,0.12);
  border: 1px solid rgba(255,255,255,0.22);
  padding: 5px 14px; border-radius: 50px; margin-bottom: 14px;
  letter-spacing: .3px;
}
.hero__eyebrow .stars { color: #fbbf24; letter-spacing: 1px; }
.hero__h1 {
  font-family: var(--font-heading);
  font-size: clamp(1.5rem, 2.6vw, 2.25rem);
  font-weight: 800; color: var(--white);
  line-height: 1.15; margin-bottom: 12px;
}
.hero__h1 .accent { color: #E0A35A; }
.hero__subtitle {
  font-size: 14px; color: rgba(255,255,255,0.86);
  margin-bottom: 20px; max-width: 540px; line-height: 1.55;
}
.hero__cta-row { display: flex; gap: 12px; flex-wrap: wrap; }
.hero__cta {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  background: var(--accent); color: var(--white);
  padding: 9px 34px; border-radius: 8px; min-height: 44px;
  font-family: var(--font-heading); font-size: 14px; font-weight: 700;
  white-space: nowrap; line-height: 1;
  border: 2px solid var(--accent);
  text-decoration: none; transition: background 0.2s, transform 0.2s, border-color 0.2s;
}
.hero__cta svg { width: 16px; height: 16px; }
.hero__cta:hover { background: var(--accent-dark); border-color: var(--accent-dark); transform: translateY(-2px); }
.hero__cta--ghost {
  background: transparent; border: 2px solid rgba(255,255,255,0.45);
}
.hero__cta--ghost:hover { background: rgba(255,255,255,0.12); border-color: #fff; }

/* Detail-Hero: Hintergrundfoto + freigestellte Person rechts */
.hero--detail .hero__bg::after { background: linear-gradient(90deg, rgba(34,29,25,0.92) 0%, rgba(34,29,25,0.7) 42%, rgba(34,29,25,0.25) 70%, rgba(34,29,25,0.1) 100%); }
.hero__person {
  position: absolute; right: 3%; bottom: 0; z-index: 1;
  height: 90%; width: auto; max-width: 48%;
  object-fit: contain; object-position: bottom center;
  filter: drop-shadow(0 24px 34px rgba(0,0,0,0.55));
  pointer-events: none;
}
.hero--detail .hero__content { z-index: 2; }

/* Überblick-Split: Foto links (freistehend + Motion) · Accordion rechts */
.svc-split { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: start; margin-top: 48px; }
.svc-media { position: relative; aspect-ratio: 4/5; border-radius: 22px; background: linear-gradient(160deg, var(--dark-1), var(--dark-2)); }
.svc-media > img, .svc-media__img {
  position: absolute; inset: 0; z-index: 2; width: 100%; height: 100%; object-fit: cover;
  border-radius: 22px; box-shadow: 0 36px 80px rgba(34,29,25,0.20);
}
/* Galerie: pro Toggle ein Bild, weiches Einblenden */
.svc-media__img { opacity: 0; transition: opacity .45s ease; }
.svc-media__img.active { opacity: 1; }
/* Motion-Grafik hinter dem Foto (freistehend, ragt heraus) */
.svc-media::before, .svc-media::after { content: ''; position: absolute; z-index: 1; border-radius: 50%; }
.svc-media::before { width: 160px; height: 160px; top: -34px; left: -34px; background: radial-gradient(circle, rgba(194,107,60,0.22), transparent 70%); animation: blob 16s ease-in-out infinite; }
.svc-media::after { width: 120px; height: 120px; bottom: -28px; right: -22px; background: radial-gradient(circle, rgba(194,107,60,0.16), transparent 70%); animation: blob 20s ease-in-out infinite reverse; }
.svc-media__dot { position: absolute; right: -30px; top: 30%; z-index: 1; width: 110px; height: 130px; background-image: radial-gradient(circle, var(--accent) 1.6px, transparent 1.6px); background-size: 16px 16px; opacity: .35; }

/* Echtes Foto unter dem Ueberblick-Split. Die Galerie daneben bleibt
   gezeichnet — hier steht die Aufnahme, aus der die Zeichnung entstanden
   ist. Hochformate bekommen eine schmalere, mittige Spalte, damit der
   Deckel-Zuschnitt nicht den Kopf abschneidet. */
.svc-foto { margin-top: 56px; }
.svc-foto img {
  width: 100%; height: clamp(260px, 34vw, 440px); object-fit: cover; object-position: center;
  border-radius: 22px; box-shadow: 0 30px 70px rgba(34,29,25,0.18);
}
.svc-foto--hoch { max-width: 520px; margin-left: auto; margin-right: auto; }
.svc-foto--hoch img { height: auto; max-height: 560px; object-fit: contain; background: var(--soft); }
/* Freigestellte Schluesselbilder bringen keinen eigenen Grund mit. In der
   Fotokarte sassen sie auf einem hellblauen Rechteck mit Schlagschatten —
   ein eingeklebter Block statt einer Figur. Ohne Karte stehen sie auf dem
   Papier wie die uebrigen Schluesselbilder der Website. */
.svc-foto--frei { max-width: 400px; margin-left: auto; margin-right: auto; }
.svc-foto--frei img { background: none; border-radius: 0; box-shadow: none; max-height: 440px; }
.svc-foto__text { margin-top: 14px; font-size: 13.5px; line-height: 1.6; color: var(--gray-dark); text-align: center; }

/* Accordion im Punkte-Modus (ohne Icon, mehr Luft) */
.accordion--points .accordion__item { border-radius: 14px; }
.accordion--points .accordion__trigger { padding: 20px 22px; font-size: 16px; }
.accordion--points .accordion__body-inner { padding: 0 22px 22px 22px; font-size: 14.5px; }
.accordion--points .accordion__body-inner p { margin-bottom: 10px; }
.accordion--points .accordion__body-inner ol { margin: 4px 0 0; padding-left: 20px; line-height: 1.75; }
.accordion--points .accordion__body-inner ol li { margin-bottom: 7px; }
.accordion--points .accordion__body-inner .check-list { margin-top: 10px; gap: 10px; }

/* Hero Service-Cards (Startseite) */
.hero__cards {
  position: relative; z-index: 1;
  max-width: var(--max-content); margin: -54px auto 0;
  padding: 0 var(--pad);
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px;
}
.hero-card {
  background: var(--white); border: 1px solid var(--gray-mid);
  border-radius: 16px; padding: 18px 20px;
  text-decoration: none; color: var(--black);
  box-shadow: 0 12px 40px rgba(0,0,0,0.10);
  transition: transform .25s, box-shadow .25s, border-color .25s;
  display: flex; flex-direction: column; gap: 5px;
}
.hero-card:hover { transform: translateY(-6px); border-color: var(--accent); box-shadow: 0 18px 50px rgba(194,107,60,0.18); }
.hero-card__icon {
  width: 38px; height: 38px; border-radius: 11px;
  background: #F1E9DD; color: var(--ink);
  display: flex; align-items: center; justify-content: center; margin-bottom: 2px;
}
.hero-card__icon svg { width: 20px; height: 20px; }
.hero-card__title { font-family: var(--font-heading); font-weight: 700; font-size: 15px; }
.hero-card__claim { font-size: 10.5px; color: var(--slate); font-weight: 700; font-family: var(--font-heading); letter-spacing: 1.5px; text-transform: uppercase; }
.hero-card__text { font-size: 13px; color: var(--gray-dark); line-height: 1.45; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 2.6em; }
.hero-card__more { margin-top: 4px; font-size: 12.5px; font-weight: 600; color: var(--accent); font-family: var(--font-heading); }

/* ── SECTION SHELL ── */
.section { padding: 100px 0; }
.section--soft { background-color: var(--soft); }
.section--plain { background: transparent; }
.section__eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-heading); font-size: 11px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 2px; color: var(--slate);
  margin-bottom: 12px;
}
.section__eyebrow::before { content: ''; width: 18px; height: 2px; background: var(--accent); border-radius: 2px; }
.section__title {
  font-family: var(--font-heading);
  font-size: clamp(1.4rem, 2.1vw, 1.9rem);
  font-weight: 800; line-height: 1.25; margin-bottom: 16px;
}
.section__lead { font-size: 15px; color: var(--gray-dark); max-width: 680px; line-height: 1.75; }

/* Split (Text + Visual) */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; }
.split--reverse .split__visual { order: -1; }
.split__text p { color: var(--gray-dark); margin-bottom: 16px; font-size: 15.5px; line-height: 1.8; }
.split__text p:last-child { margin-bottom: 0; }
.split__visual {
  border-radius: 18px; overflow: hidden; aspect-ratio: 4/3;
  background: linear-gradient(135deg, #2A2018 0%, #34291F 100%);
  position: relative; box-shadow: 0 24px 60px rgba(34,29,25,0.16);
  display: flex; align-items: center; justify-content: center; isolation: isolate;
}
.split__visual > img { width: 100%; height: 100%; object-fit: cover; }
.split__visual-mark { opacity: .85; }
.split__visual-mark svg { width: 88px; height: 88px; color: rgba(255,255,255,0.92); }

/* Gelayertes Visual: Hintergrundfoto + freigestelltes PNG davor + Motion */
.layered { background: linear-gradient(135deg, #221D19 0%, #34291F 100%); }
.layered__bg { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; object-fit: cover; opacity: .55; }
.layered::after { /* sanfte Vignette + Markenton */
  content: ''; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(180deg, rgba(34,29,25,0.15) 0%, rgba(34,29,25,0.55) 100%);
}
.layered__fg {
  position: relative; z-index: 3;
  max-width: 86%; max-height: 92%; width: auto; height: auto; object-fit: contain;
  align-self: flex-end; margin: 0 auto -2%;
  filter: drop-shadow(0 24px 28px rgba(0,0,0,0.45));
  animation: fgFloat 6s ease-in-out infinite;
}
@keyframes fgFloat { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
/* Motion-Grafik: schwebende Vektor-Punkte/Kreise */
.layered__motion { position: absolute; inset: 0; z-index: 2; overflow: hidden; }
.layered__motion span { position: absolute; border-radius: 50%; }
.layered__motion span:nth-child(1) { width: 120px; height: 120px; top: -30px; right: -20px; background: radial-gradient(circle, rgba(124,198,247,0.35), transparent 70%); animation: blob 14s ease-in-out infinite; }
.layered__motion span:nth-child(2) { width: 80px; height: 80px; bottom: 10%; left: -16px; background: radial-gradient(circle, rgba(255,255,255,0.22), transparent 70%); animation: blob 18s ease-in-out infinite reverse; }
.layered__dots { position: absolute; inset: 0; z-index: 2; background-image: radial-gradient(circle, rgba(255,255,255,0.18) 1.2px, transparent 1.2px); background-size: 16px 16px; opacity: .5; -webkit-mask-image: linear-gradient(135deg, #000, transparent 65%); mask-image: linear-gradient(135deg, #000, transparent 65%); }
@keyframes blob { 0%,100% { transform: translate(0,0) scale(1); } 50% { transform: translate(-12px,14px) scale(1.12); } }

/* ── SERVICE GRID (4 Bloecke) ── */
.svc-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 22px; }
.svc-card {
  background: var(--white); border: 1px solid var(--gray-mid);
  border-radius: 14px; padding: 28px;
  transition: border-color .25s, transform .25s, box-shadow .25s;
  text-decoration: none; color: var(--black);
  display: flex; flex-direction: column; gap: 10px;
}
.svc-card:hover { border-color: var(--accent); transform: translateY(-4px); box-shadow: 0 14px 36px rgba(194,107,60,0.12); }
.svc-card__icon {
  width: 52px; height: 52px; border-radius: 13px;
  background: rgba(194,107,60,0.12); color: var(--accent);
  display: flex; align-items: center; justify-content: center;
}
.svc-card__icon svg { width: 26px; height: 26px; }
.svc-card__title { font-family: var(--font-heading); font-weight: 700; font-size: 19px; }
.svc-card__text { font-size: 14.5px; color: var(--gray-dark); line-height: 1.7; }
.svc-card__more { margin-top: auto; font-size: 13.5px; font-weight: 600; color: var(--accent); font-family: var(--font-heading); }

/* ── ACCORDION ── */
.accordion__item {
  border-radius: 12px; border: 1px solid var(--gray-mid);
  margin-bottom: 12px; background: var(--white);
  transition: all 0.3s ease; overflow: hidden;
}
.accordion__item:hover { border-color: #ccc; }
.accordion__item.open { border-color: var(--accent); box-shadow: 0 4px 20px rgba(194,107,60,0.10); }
.accordion__trigger {
  width: 100%; background: none; border: none; cursor: pointer;
  display: flex; align-items: center; gap: 16px; padding: 20px 24px;
  font-family: var(--font-heading); font-size: 16px; font-weight: 600;
  color: var(--black); text-align: left; transition: color 0.2s;
}
.accordion__trigger:hover { color: var(--accent); }
.accordion__icon {
  width: 40px; height: 40px; border-radius: 10px; background: var(--gray-light);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0; color: var(--accent); transition: all 0.3s;
}
.accordion__icon svg { width: 20px; height: 20px; }
.accordion__item.open .accordion__icon { background: var(--accent); color: var(--white); }
.accordion__trigger-text { flex: 1; }
.accordion__toggle {
  width: 28px; height: 28px; border-radius: 50%; background: var(--gray-light);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0; font-size: 18px; font-weight: 300; transition: all 0.3s;
}
.accordion__item.open .accordion__toggle { background: var(--accent); color: var(--white); transform: rotate(45deg); }
.accordion__body { max-height: 0; overflow: hidden; transition: max-height 0.4s ease; }
.accordion__body-inner { padding: 0 24px 20px 80px; font-size: 15px; color: var(--gray-dark); line-height: 1.7; }

/* FAQ Accordions (simpler) */
.faq .accordion__item { border-radius: 0; border: none; border-bottom: 1px solid var(--gray-mid); margin-bottom: 0; background: transparent; box-shadow: none; }
.faq .accordion__item.open { border-color: var(--gray-mid); box-shadow: none; }
.faq .accordion__trigger { padding: 20px 0; gap: 0; }
.faq .accordion__icon { display: none; }
.faq .accordion__body-inner { padding: 0 0 20px 0; }

/* ── USP / FEATURES ── */
.features { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; }
.feature { text-align: left; }
.feature__icon {
  width: 50px; height: 50px; border-radius: 14px;
  background: var(--soft); color: var(--accent);
  display: flex; align-items: center; justify-content: center; margin-bottom: 14px; flex-shrink: 0;
}
.feature__icon svg { width: 26px; height: 26px; }
.feature__title { font-family: var(--font-heading); font-weight: 700; font-size: 16px; margin-bottom: 6px; }
.feature__text { font-size: 14px; color: var(--gray-dark); line-height: 1.65; }
/* USP-Variante: 2×2, Icon links vom Text, gerahmte Karten gleicher Höhe */
.features--cards { grid-template-columns: repeat(2, 1fr); gap: 18px; }
.features--cards .feature { display: flex; align-items: flex-start; gap: 16px; background: var(--white); border: 1px solid var(--gray-mid); border-radius: 14px; padding: 22px 24px; height: 100%; }
.features--cards .feature__icon { margin-bottom: 0; }
.features--cards .feature__body { flex: 1; }

/* ── Schwebende Stat-Karten + Motion-Backdrop (Seit 2008) ── */
.statband { position: relative; overflow: hidden; }
.statband__bg { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.statband__bg span { position: absolute; border-radius: 50%; }
.statband__bg span:nth-child(1) { width: 320px; height: 320px; top: -90px; left: -60px; background: radial-gradient(circle, rgba(194,107,60,0.16), transparent 70%); animation: blob 18s ease-in-out infinite; }
.statband__bg span:nth-child(2) { width: 240px; height: 240px; bottom: -80px; right: 6%; background: radial-gradient(circle, rgba(224,163,90,0.18), transparent 70%); animation: blob 24s ease-in-out infinite reverse; }
.statband__bg span:nth-child(3) { width: 160px; height: 160px; top: 30%; right: 38%; background: radial-gradient(circle, rgba(194,107,60,0.10), transparent 70%); animation: blob 30s ease-in-out infinite; }
.statband__bg::after { content: ''; position: absolute; inset: 0; background-image: radial-gradient(circle, var(--dot) 1px, transparent 1px); background-size: 26px 26px; -webkit-mask-image: radial-gradient(ellipse at center, #000, transparent 75%); mask-image: radial-gradient(ellipse at center, #000, transparent 75%); opacity: .4; }
.statfloat { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; margin-top: 44px; }
.statfloat__card {
  background: rgba(255,255,255,0.85); backdrop-filter: blur(4px);
  border: 1px solid var(--gray-mid); border-radius: 18px; padding: 30px 22px; text-align: center;
  box-shadow: 0 18px 44px rgba(34,29,25,0.08);
  animation: floatY 6s ease-in-out infinite;
}
.statfloat__card::before { content: ''; display: block; width: 26px; height: 3px; border-radius: 3px; background: var(--accent); margin: 0 auto 16px; }
.statfloat__card:nth-child(1) { animation-delay: 0s; }
.statfloat__card:nth-child(2) { animation-delay: .9s; transform: translateY(-6px); }
.statfloat__card:nth-child(3) { animation-delay: 1.8s; }
.statfloat__card:nth-child(4) { animation-delay: 2.7s; transform: translateY(-6px); }
.statfloat__num { font-family: var(--font-heading); font-weight: 800; font-size: 2.5rem; line-height: 1; color: var(--ink); }
.statfloat__label { font-family: var(--font-heading); font-weight: 600; font-size: 13px; color: var(--slate); margin-top: 12px; letter-spacing: .3px; }
@keyframes floatY { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-12px); } }
@media (max-width: 760px) { .statfloat { grid-template-columns: repeat(2, 1fr); gap: 14px; } .statfloat__num { font-size: 2.1rem; } }

/* ── STATS ── */
.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; }
.stat { text-align: center; padding: 24px; background: var(--white); border: 1px solid var(--gray-mid); border-radius: 14px; }
.stat__num { font-family: var(--font-heading); font-weight: 800; font-size: 2.2rem; color: var(--accent); line-height: 1; }
.stat__label { font-size: 13.5px; color: var(--gray-dark); margin-top: 8px; }

/* ── TEAM ── */
.team { display: grid; grid-template-columns: repeat(2, 1fr); gap: 22px; }
.team-card {
  background: var(--white); border: 1px solid var(--gray-mid); border-radius: 14px;
  padding: 24px; display: flex; align-items: center; gap: 18px;
}
.team-card__avatar {
  width: 64px; height: 64px; border-radius: 50%; flex-shrink: 0;
  background: linear-gradient(135deg, #C26B3C 0%, #1b6fd6 100%);
  color: var(--white); display: flex; align-items: center; justify-content: center;
  font-family: var(--font-heading); font-weight: 800; font-size: 22px;
}
.team-card__name { font-family: var(--font-heading); font-weight: 700; font-size: 17px; }
.team-card__role { font-size: 14px; color: var(--gray-dark); }

/* ── CTA SECTION (dunkel, dezente blaue Akzente) ── */
.cta-section {
  position: relative; min-height: 52vh;
  display: flex; align-items: center; padding: 76px 0;
  background: linear-gradient(135deg, #221D19 0%, #34291F 100%);
  color: var(--white); overflow: hidden;
}
.cta-section::before {
  content: ''; position: absolute; inset: 0; z-index: 0;
  background: radial-gradient(circle at 78% 30%, rgba(194,107,60,0.22), transparent 55%);
}
.cta-section__inner {
  position: relative; z-index: 2;
  display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center;
  /* width: 100% ist noetig, weil .cta-section flex ist: ohne das schrumpft
     dieses Element auf seine INHALTSBREITE, und max-width plus auto-Rand
     greifen ins Leere. Auf der Teppichseite — dem kuerzesten CTA-Text der
     Website — sass die Linie darum bei 55 statt 20 px. */
  width: 100%; max-width: var(--max-content); margin: 0 auto;
  padding-left: var(--pad); padding-right: var(--pad);
}
.cta-section__badge {
  display: inline-block; padding: 8px 20px;
  background: rgba(255,255,255,0.2); backdrop-filter: blur(10px);
  border-radius: 50px; font-size: 14px; font-weight: 600; margin-bottom: 20px;
}
.cta-section__title { font-family: var(--font-heading); font-size: clamp(1.6rem, 2.6vw, 2.2rem); font-weight: 800; margin-bottom: 16px; line-height: 1.2; position: relative; z-index: 2; }
.cta-section__badge, .cta-content { position: relative; z-index: 2; }
.cta-section__desc { font-size: 15px; line-height: 1.65; opacity: 0.9; margin-bottom: 26px; }
.cta-section__buttons { display: flex; gap: 12px; flex-wrap: wrap; }
.cta-section__btn-primary {
  display: inline-flex; align-items: center; gap: 8px; padding: 11px 28px;
  background: var(--white); color: var(--ink); border-radius: 10px; border: none; cursor: pointer;
  font-family: var(--font-heading); font-size: 14px; font-weight: 700;
  text-decoration: none; box-shadow: 0 8px 24px rgba(0,0,0,0.22); transition: all 0.25s;
}
.cta-section__btn-primary:hover { transform: translateY(-2px); box-shadow: 0 12px 32px rgba(0,0,0,0.3); }
.cta-section__btn-primary svg { width: 18px; height: 18px; transition: transform 0.3s; }
.cta-section__btn-primary:hover svg { transform: translateX(4px); }
.cta-section__btn-secondary {
  display: inline-flex; align-items: center; padding: 11px 26px;
  background: transparent; color: var(--white); border: 1.5px solid rgba(255,255,255,0.55);
  border-radius: 10px; font-family: var(--font-heading); font-size: 14px; font-weight: 600;
  text-decoration: none; transition: all 0.25s;
}
.cta-section__btn-secondary:hover { background: rgba(255,255,255,0.12); border-color: #fff; transform: translateY(-2px); }
/* Desktop: die drei Karten schweben versetzt (Original-Look) */
.cta-section__visual { position: relative; height: 360px; z-index: 2; }
.cta-section__card {
  position: absolute; background: var(--white); padding: 16px 22px; border-radius: 14px;
  box-shadow: 0 18px 50px rgba(0,0,0,0.35); display: flex; align-items: center; gap: 12px;
  animation: ctaFloat 3s ease-in-out infinite;
}
.cta-section__card-icon {
  width: 42px; height: 42px; border-radius: 11px;
  background: linear-gradient(135deg, #34291F 0%, #221D19 100%);
  display: flex; align-items: center; justify-content: center;
  color: var(--white); font-size: 18px; flex-shrink: 0;
}
.cta-section__card-text { font-weight: 600; color: #333; font-size: 15px; }
/* Hover ueber Schatten statt transform — transform gehoert der Float-Animation */
.cta-section__card--link { text-decoration: none; color: inherit; cursor: pointer; transition: box-shadow .18s ease; }
.cta-section__card--link:hover { box-shadow: 0 26px 64px rgba(0,0,0,0.45); }
.cta-section__card:nth-child(1) { top: 0; left: 0; animation-delay: 0s; }
.cta-section__card:nth-child(2) { top: 130px; right: 0; animation-delay: 0.6s; }
.cta-section__card:nth-child(3) { top: 260px; left: 28px; animation-delay: 1.2s; }
@keyframes ctaFloat { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-9px); } }
.cta-section__shapes { position: absolute; inset: 0; overflow: hidden; z-index: 1; }
.cta-section__shape { position: absolute; border-radius: 50%; background: rgba(255,255,255,0.08); animation: ctaRotate 20s linear infinite; }
.cta-section__shape:nth-child(1) { width: 300px; height: 300px; top: -100px; left: -100px; animation-duration: 25s; }
.cta-section__shape:nth-child(2) { width: 200px; height: 200px; bottom: -50px; right: 10%; animation-duration: 20s; animation-direction: reverse; }
.cta-section__shape:nth-child(3) { width: 150px; height: 150px; top: 50%; right: -75px; animation-duration: 30s; }
@keyframes ctaRotate { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }

/* ── CTA-STREIFEN (zwischen den Sektionen auf Single-Service-Seiten) ── */
.cta-band-wrap { padding: 40px 0; background: transparent; }
.cta-band {
  position: relative; overflow: hidden;
  display: flex; align-items: center; justify-content: space-between; gap: 32px;
  padding: 32px 40px; border-radius: 22px;
  background: linear-gradient(135deg, var(--accent) 0%, var(--accent-dark) 100%);
  color: #fff;
  box-shadow: 0 18px 44px rgba(194,107,60,0.24);
}
.cta-band__deco {
  position: absolute; right: -50px; top: -60px; width: 200px; height: 200px;
  border-radius: 50%; background: rgba(255,255,255,0.09); pointer-events: none;
}
.cta-band__text { position: relative; z-index: 1; min-width: 0; }
.cta-band__eyebrow {
  display: inline-block; font-family: var(--font-heading); font-weight: 700;
  font-size: 11px; letter-spacing: 2px; text-transform: uppercase;
  color: #fff; opacity: .85; margin-bottom: 8px;
}
.cta-band__title { font-family: var(--font-heading); font-weight: 800; font-size: 1.42rem; line-height: 1.2; margin: 0 0 7px; }
.cta-band__sub { font-size: 14.5px; line-height: 1.6; opacity: .95; max-width: 560px; }
.cta-band__actions { position: relative; z-index: 1; display: flex; gap: 12px; flex-shrink: 0; flex-wrap: wrap; }
.cta-band__btn {
  display: inline-flex; align-items: center; gap: 8px; white-space: nowrap;
  padding: 12px 22px; border-radius: 11px; cursor: pointer; text-decoration: none;
  font-family: var(--font-heading); font-weight: 700; font-size: 14px;
  border: 1.5px solid transparent; transition: all .2s;
}
.cta-band__btn svg { width: 18px; height: 18px; flex-shrink: 0; }
.cta-band__btn--solid { background: #fff; color: var(--accent-dark); }
.cta-band__btn--solid:hover { transform: translateY(-2px); box-shadow: 0 12px 26px rgba(0,0,0,0.18); }
.cta-band__btn--ghost { background: rgba(255,255,255,0.12); color: #fff; border-color: rgba(255,255,255,0.55); }
.cta-band__btn--ghost:hover { background: rgba(255,255,255,0.22); border-color: #fff; }
@media (max-width: 900px) {
  .cta-band { flex-direction: column; align-items: flex-start; gap: 22px; padding: 28px 18px; }
  .cta-band__actions { width: 100%; }
  .cta-band__btn { flex: 1; justify-content: center; }
}
@media (max-width: 767px) {
  .cta-band-wrap { padding: 28px 0; }
  .cta-band__title { font-size: 1.22rem; }
  .cta-band__actions { flex-direction: column; }
  .cta-band__btn { width: 100%; }
}
@media (prefers-reduced-motion: reduce) { .cta-band__btn--solid:hover { transform: none; } }

/* ── SIDEBAR CHAT ── */
.chat-widget { flex: 1; display: flex; flex-direction: column; min-height: 0; }

/* ── FOOTER (alles in EINER Reihe) ── */
.footer {
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 100;
  height: var(--footer-h);
  background: var(--white); border-top: 1px solid var(--gray-mid);
  display: flex; align-items: center; gap: 22px;
  padding: 0 20px;
}
.footer__brand { display: flex; align-items: center; flex-shrink: 0; }
.footer__brand img { height: 30px; width: auto; display: block; }
.footer__links { display: flex; gap: 20px; align-items: center; }
.footer__links a { color: var(--gray-dark); text-decoration: none; font-size: 13px; transition: color 0.2s; white-space: nowrap; }
.footer__links a:hover { color: var(--black); }
.footer__address { color: #999; font-size: 13px; white-space: nowrap; }
.footer__credit { color: #999; font-size: 13px; white-space: nowrap; }
.footer__credit a { color: #999; text-decoration: none; transition: color 0.2s; }
.footer__credit a:hover { color: var(--black); }
.footer__reviews {
  margin-left: auto; display: flex; align-items: center; gap: 18px;
  font-family: var(--font-heading); font-size: 12px; font-weight: 600; color: #000; letter-spacing: 0.5px;
}
.footer__reviews-badge { display: flex; align-items: center; gap: 8px; text-decoration: none; color: #000; white-space: nowrap; }
.footer__reviews-stars { display: flex; gap: 2px; color: #fbbf24; font-size: 14px; }
.footer__reviews-google { height: 16px; opacity: 0.85; }
.footer__reviews-trust { display: flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 500; color: #333; white-space: nowrap; }
/* Adresse und Umsetzungs-Hinweis passen in die 60px-Leiste nur auf breiten
   Schirmen. Beide stehen jetzt vollständig in der grossen Fusszeile — der
   Verweis auf /mkurti war unter 1180 px vorher komplett unsichtbar. */
@media (max-width: 1180px) { .footer__address, .footer__credit { display: none; } }

/* ── Vernetzung «Das könnte Sie auch interessieren» ──────────────
   Sitzt auf jeder Seite zwischen dem Handlungsaufruf und der grossen
   Fusszeile. Grund: Die 360 Ortsseiten waren von der Hauptseite aus
   nicht erreichbar — 0 eingehende Verweise. Ohne Weg dorthin bekommt
   ein Landingpage-Block weder Crawl-Aufmerksamkeit noch Autoritaet. */
.netz { background: var(--soft); border-top: 1px solid var(--gray-mid); }
.netz .boxed { padding-top: 40px; padding-bottom: 40px; }
.netz__titel {
  font-family: var(--font-heading); font-size: 15px; font-weight: 800;
  letter-spacing: .01em; margin: 0 0 20px; color: var(--ink);
}
.netz__spalten {
  display: grid; gap: 26px 40px;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
}
.netz__kopf {
  display: block; font-family: var(--font-heading);
  font-size: 10.5px; font-weight: 800; letter-spacing: 1.6px;
  text-transform: uppercase; color: var(--slate); margin-bottom: 10px;
}
.netz__liste { list-style: none; margin: 0; padding: 0; }
.netz__liste li { margin: 0; }
.netz__liste a {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  padding: 6px 0; min-height: 34px;
  font-size: 13.5px; line-height: 1.4;
  color: var(--gray-dark); text-decoration: none;
  transition: color .16s ease, padding-left .16s ease;
}
.netz__liste a > span { flex: 1; min-width: 0; }
.netz__liste a > svg { width: 14px; height: 14px; flex: 0 0 auto; color: var(--gray-mid); }
.netz__liste a:hover { color: var(--ink); padding-left: 3px; }
.netz__liste a:hover > svg { color: var(--accent); }
.netz__liste a:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* Auf dem Telefon werden aus den Zeilen Knoepfe ueber die volle Breite:
   48 px hoch, mit Unterlinie getrennt, Winkel rechts. Eine 27 px hohe
   Textzeile trifft der Daumen nicht zuverlaessig — die Hausregel sind
   44 x 44 px. Aufbau wie die Zeilen der grossen Fusszeile, nur ohne
   Symbol und ueber die ganze Breite. */
@media (max-width: 900px) {
  .netz .boxed { padding-top: 26px; padding-bottom: 26px; }
  .netz__spalten { grid-template-columns: 1fr; gap: 22px; }
  .netz__titel { font-size: 14px; margin-bottom: 14px; }
  .netz__kopf { margin-bottom: 4px; }
  .netz__liste a {
    min-height: 48px; padding: 8px 0;
    font-size: 13.5px;
    border-bottom: 1px solid var(--gray-mid);
  }
  .netz__liste li:last-child a { border-bottom: 0; }
  .netz__liste a:active { color: var(--accent); }
  .netz__liste a > svg { width: 15px; height: 15px; }
}

/* ── Grosse Fusszeile am Seitenende ──────────────────────────── */
.sfuss { background: var(--soft); border-top: 1px solid var(--gray-mid); }
.sfuss__raster {
  display: grid; gap: 34px 40px;
  grid-template-columns: 1.5fr 1fr 1fr auto;
  padding-top: 54px; padding-bottom: 34px;
}
.sfuss__marke img { height: 34px; width: auto; }
.sfuss__marke p { margin: 14px 0 16px; font-size: 13.5px; line-height: 1.65; color: var(--gray-dark); max-width: 34ch; }
.sfuss__tel {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-heading); font-weight: 800; font-size: 17px;
  color: var(--ink); text-decoration: none; font-variant-numeric: tabular-nums;
}
.sfuss__tel svg { width: 16px; height: 16px; color: var(--accent); }
.sfuss__tel:hover { color: var(--accent); }
.sfuss__spalte { display: flex; flex-direction: column; }
.sfuss__titel {
  font-family: var(--font-heading); font-size: 10.5px; font-weight: 800;
  letter-spacing: 1.6px; text-transform: uppercase; color: var(--slate);
  margin-bottom: 3px;
}
/* Jede Zeile mit Symbol und Unterlinie — knopfartig zu treffen, aber
   weiterhin eine Liste unter ihrer Rubrik. 44 px hoch, damit der Daumen
   sie sicher trifft. */
.sfuss__zeile {
  display: flex; align-items: center; gap: 11px;
  min-height: 44px; padding: 4px 0;
  border-bottom: 1px solid var(--gray-mid);
  color: var(--gray-dark); text-decoration: none;
  font-size: 13.5px;
  transition: color .18s ease, padding-left .18s ease;
}
.sfuss__spalte .sfuss__zeile:last-child { border-bottom: 0; }
.sfuss__zic {
  width: 28px; height: 28px; flex: 0 0 auto;
  display: grid; place-items: center;
  border-radius: 8px;
  background: var(--white); border: 1px solid var(--gray-mid);
  color: var(--accent);
}
.sfuss__zic svg { width: 15px; height: 15px; }
.sfuss__zwort { flex: 1; min-width: 0; }
.sfuss__zeile > svg { width: 14px; height: 14px; flex: 0 0 auto; color: var(--gray-mid); }
.sfuss__zeile:hover { color: var(--ink); padding-left: 3px; }
.sfuss__zeile:hover .sfuss__zic { border-color: var(--accent); }
.sfuss__zeile:hover > svg { color: var(--accent); }

/* Die Bewertung als eigene Karte — «Ausgezeichnet» bleibt, bekommt aber
   eine Fläche statt einer Textzeile im Gedränge. */
/* Marke, Note und Sterne auf EINER Zeile — untereinander war die Karte
   dreizeilig und nahm mehr Platz als der Inhalt hergibt. */
.sfuss__google {
  display: flex; flex-direction: column; gap: 5px; align-items: flex-start;
  background: var(--white); border: 1px solid var(--gray-mid); border-radius: 14px;
  padding: 13px 16px; text-decoration: none; color: var(--ink);
  min-width: 210px; align-self: start;
}
.sfuss__google:hover { border-color: var(--accent); }
.sfuss__google-kopf { display: flex; align-items: center; gap: 10px; }
.sfuss__google-kopf svg { height: 15px; width: auto; }
.sfuss__google-wert {
  font-family: var(--font-heading); font-size: 19px; font-weight: 800; line-height: 1;
}
.sfuss__google-sterne { color: #E8A33D; font-size: 12.5px; letter-spacing: 1.5px; }
.sfuss__google-text { font-size: 11.5px; color: var(--gray-dark); }
.sfuss__google-text strong { color: var(--ink); font-weight: 700; }

.sfuss__unten {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 20px;
  padding-top: 16px; padding-bottom: 26px;
  border-top: 1px solid var(--gray-mid);
  font-size: 12px; color: var(--slate);
}
.sfuss__mk a { color: var(--gray-dark); text-decoration: none; font-weight: 600; }
.sfuss__mk a:hover { color: var(--accent); }

@media (max-width: 900px) {
  /* Die beiden verbliebenen Rubriken teilen sich die volle Breite. */
  .sfuss__raster { grid-template-columns: 1fr 1fr; gap: 26px 24px; padding-top: 38px; }
  .sfuss__marke, .sfuss__google { grid-column: 1 / -1; }
  .sfuss__google { align-self: start; }
}
/* Auf den Landingpages folgt die Fusszeile deren Linie (20 px), auf den
   übrigen Seiten der normalen Seitenluft — sonst springt die Kante genau
   dort, wo die Seite aufhört. */
@media (max-width: 900px) {
  .content-main:has(.lp-seite) .sfuss .boxed { padding-left: 20px; padding-right: 20px; }
}
@media (max-width: 620px) {
  .sfuss__raster { padding-top: 32px; padding-bottom: 26px; gap: 22px 18px; }
  .sfuss__marke p { font-size: 13px; margin: 12px 0 14px; }
  .sfuss__spalte a { font-size: 13px; }
  /* Die Reiterleiste steht fest am unteren Rand — der Fuss muss ihre Hoehe
     freihalten, sonst liegt die Schlusszeile mit dem MKurti-Verweis darunter. */
  .sfuss__unten { flex-direction: column; gap: 6px;
    padding-bottom: calc(62px + env(safe-area-inset-bottom) + 18px); }
}

/* ── MOBILE CHAT ── */
.chat-mobile { display: none; }
.chat-mobile__overlay {
  position: fixed; bottom: calc(var(--footer-h) + 80px); right: 16px;
  width: 340px; height: 480px; background: var(--bg);
  border-radius: 16px; box-shadow: 0 8px 40px rgba(0,0,0,0.25);
  display: flex; flex-direction: column; overflow: hidden;
  transform: scale(0) translateY(20px); transform-origin: bottom right;
  opacity: 0; transition: all 0.3s ease; z-index: 91;
}
.chat-mobile__overlay.open { transform: scale(1) translateY(0); opacity: 1; }
.chat-mobile__header {
  display: flex; justify-content: space-between; align-items: center;
  padding: 14px 16px; background: var(--accent); color: var(--white);
  font-family: var(--font-heading); font-size: 15px;
}
.chat-mobile__header button { background: none; border: none; color: var(--white); font-size: 24px; cursor: pointer; line-height: 1; }
.chat-mobile__body { flex: 1; padding: 12px; min-height: 0; overflow: hidden; display: flex; flex-direction: column; }
.chat-mobile__body .chat-widget { flex: 1; display: flex; flex-direction: column; min-height: 0; }
/* Im Mobile-Overlay hat das Overlay bereits eigenen Header (mit Schliessen) → Panel-Header weg */
.chat-mobile__overlay .mc-chat__header { display: none; }

/* ── NAV MOBILE ── */
.nav-mobile {
  position: fixed; inset: 0; background: var(--black); z-index: 200;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 30px;
  transform: translateX(100%); transition: transform 0.3s ease;
}
.nav-mobile.open { transform: translateX(0); }
.nav-mobile a { color: var(--white); text-decoration: none; font-family: var(--font-heading); font-size: 23px; font-weight: 600; }
.nav-mobile a.header__cta { background: var(--accent); padding: 12px 28px; border-radius: 8px; }
.nav-mobile__close { position: absolute; top: 16px; right: 20px; background: none; border: none; cursor: pointer; color: var(--white); font-size: 32px; }

/* ── HEADER MEGA-MENU (Disclosure-Hybrid: Link + Caret-Button) ── */
.header__nav .has-sub { position: relative; display: inline-flex; align-items: center; gap: 1px; }
.header__nav .has-sub > a { display: inline-flex; align-items: center; }
.mega-toggle {
  display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; padding: 0; border: none; background: none;
  color: var(--ink); cursor: pointer; border-radius: 7px; transition: color .2s, background .2s;
}
.mega-toggle svg { width: 14px; height: 14px; transition: transform .25s; opacity: .75; }
.mega-toggle:hover { color: var(--accent); background: var(--soft); }
.mega-toggle[aria-expanded="true"] svg { transform: rotate(180deg); opacity: 1; }
.mega-toggle:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* Unsichtbare Bruecke gegen Hover-Flicker (WCAG 1.4.13 hoverable) */
.header__nav .has-sub::before { content: ''; position: absolute; top: 100%; left: -12px; right: -12px; height: 18px; }

.mega {
  position: absolute; top: calc(100% + 14px); left: 50%;
  transform: translateX(-50%) translateY(8px);
  width: min(640px, 92vw);
  background: var(--white); border: 1px solid var(--gray-mid); border-radius: 18px;
  box-shadow: 0 28px 70px rgba(34,29,25,0.18), 0 4px 14px rgba(34,29,25,0.06);
  padding: 14px; z-index: 130;
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity .2s ease, transform .22s ease;
}
/* Sichtbarkeit: Hover ODER Tastatur-Fokus ODER aria-expanded (Klick) — Pfeil-Klick nicht mehr noetig */
.mega-toggle[aria-expanded="true"] ~ .mega,
.header__nav .has-sub:hover .mega,
.header__nav .has-sub:focus-within .mega {
  opacity: 1; visibility: visible; pointer-events: auto; transform: translateX(-50%) translateY(0);
}
/* Pfeil dreht bei Hover/Fokus als reine Anzeige */
.header__nav .has-sub:hover .mega-toggle svg,
.header__nav .has-sub:focus-within .mega-toggle svg { transform: rotate(180deg); opacity: 1; }
.mega__grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 4px; }
.mega__card { display: flex; align-items: flex-start; gap: 13px; padding: 11px 12px; border-radius: 12px; text-decoration: none; color: var(--ink); transition: background .15s; min-height: 44px; }
.mega__card:hover { background: var(--soft); }
.mega__card:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.mega__icon { width: 40px; height: 40px; flex-shrink: 0; border-radius: 11px; background: #F1E9DD; display: flex; align-items: center; justify-content: center; color: var(--accent); }
.mega__icon .icon-img { width: 24px; height: 24px; }
.mega__icon svg { width: 19px; height: 19px; }
.mega__txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.mega__t { font-family: var(--font-heading); font-weight: 700; font-size: 14px; color: var(--black); line-height: 1.25; }
.mega__d { font-size: 12px; color: var(--slate); line-height: 1.4; }
.mega__foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 8px; padding: 12px 8px 2px; border-top: 1px solid var(--gray-mid); }
.mega__all { font-family: var(--font-heading); font-weight: 700; font-size: 13px; color: var(--ink); text-decoration: none; display: inline-flex; align-items: center; gap: 6px; }
.mega__all svg { width: 15px; height: 15px; }
.mega__all:hover { color: var(--accent); }
.mega__cta { font-family: var(--font-heading); font-weight: 700; font-size: 13px; color: #fff; background: var(--accent); padding: 9px 16px; border-radius: 9px; text-decoration: none; display: inline-flex; align-items: center; gap: 6px; transition: background .2s, transform .2s; white-space: nowrap; }
.mega__cta svg { width: 15px; height: 15px; }
.mega__cta:hover { background: var(--accent-dark); transform: translateY(-1px); }
/* Rechtsbuendig fuer das letzte Dropdown (Spezialreinigung) gegen Rand-Ueberlauf */
.header__nav .has-sub:nth-last-of-type(1) .mega { left: auto; right: -12px; transform: translateY(8px); }
.header__nav .has-sub:nth-last-of-type(1) .mega-toggle[aria-expanded="true"] ~ .mega,
.header__nav .has-sub:nth-last-of-type(1):hover .mega,
.header__nav .has-sub:nth-last-of-type(1):focus-within .mega { transform: translateY(0); }
@media (prefers-reduced-motion: reduce) {
  .mega, .mega-toggle[aria-expanded="true"] ~ .mega { transition: opacity .12s; transform: translateX(-50%); }
  .header__nav .has-sub:nth-last-of-type(1) .mega, .header__nav .has-sub:nth-last-of-type(1) .mega-toggle[aria-expanded="true"] ~ .mega { transform: none; }
  .mega-toggle svg { transition: none; }
}

/* ── HEADER: Suche + CTA ── */
.header__actions { display: flex; align-items: center; gap: 12px; justify-self: end; }
.header__search {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--white); border: 1px solid var(--gray-mid); color: var(--slate);
  padding: 8px 12px; border-radius: 9px; cursor: pointer;
  font-family: var(--font-heading); font-size: 13px; font-weight: 600;
  transition: border-color .2s, color .2s, background .2s;
}
.header__search svg { width: 16px; height: 16px; }
.header__search:hover { border-color: var(--accent); color: var(--accent); }
.header__search-label { line-height: 1; }
.header__search-kbd {
  font-family: var(--font-heading); font-size: 10.5px; font-weight: 700; color: var(--slate);
  background: var(--soft); border: 1px solid var(--gray-mid); border-radius: 5px; padding: 2px 6px; line-height: 1.4;
}
.header__search:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ── SUCH-OVERLAY (Command-Palette, natives <dialog>) ── */
.visually-hidden { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.search-modal {
  width: min(640px, 94vw); max-width: 640px; margin: 9vh auto auto; padding: 0;
  border: 1px solid var(--gray-mid); border-radius: 18px; background: var(--white);
  box-shadow: 0 40px 90px rgba(34,29,25,0.28); color: var(--ink); overflow: hidden;
}
.search-modal::backdrop { background: rgba(34,29,25,0.45); backdrop-filter: blur(3px); }
.search-modal[open] { animation: searchIn .18s ease; }
@keyframes searchIn { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }
.search-modal__head { display: flex; align-items: center; gap: 12px; padding: 15px 18px; border-bottom: 1px solid var(--gray-mid); }
.search-modal__icon { color: var(--slate); display: flex; }
.search-modal__icon svg { width: 20px; height: 20px; }
.search-modal__input { flex: 1; border: none; outline: none; font-size: 17px; font-family: inherit; color: var(--ink); background: none; min-width: 0; }
.search-modal__close { width: 34px; height: 34px; border-radius: 9px; border: 1px solid var(--gray-mid); background: var(--white); color: var(--slate); cursor: pointer; display: flex; align-items: center; justify-content: center; flex-shrink: 0; transition: border-color .2s, color .2s; }
.search-modal__close svg { width: 16px; height: 16px; }
.search-modal__close:hover { border-color: var(--accent); color: var(--accent); }
.search-modal__results { list-style: none; margin: 0; padding: 6px; max-height: 56vh; overflow-y: auto; }
.search-result { display: flex; align-items: center; gap: 14px; padding: 10px 12px; border-radius: 12px; text-decoration: none; color: var(--ink); }
.search-result[aria-selected="true"] { background: var(--soft); box-shadow: inset 3px 0 0 var(--accent); }
.search-result__thumb { width: 56px; height: 56px; flex-shrink: 0; border-radius: 10px; overflow: hidden; background: var(--soft); display: flex; align-items: center; justify-content: center; }
.search-result__thumb img { width: 100%; height: 100%; object-fit: cover; }
.search-result__thumb--fallback { color: var(--accent); }
.search-result__thumb--fallback svg { width: 24px; height: 24px; }
.search-result__txt { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.search-result__cat { font-family: var(--font-heading); font-size: 10.5px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: var(--accent); }
.search-result__title { font-family: var(--font-heading); font-weight: 700; font-size: 15px; color: var(--black); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.search-result__desc { font-size: 12.5px; color: var(--slate); line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.search-result mark { background: rgba(194,107,60,0.22); color: inherit; border-radius: 3px; padding: 0 1px; }
.search-modal__state { padding: 22px 20px; color: var(--slate); font-size: 14px; line-height: 1.5; }
.search-modal__foot { display: flex; gap: 16px; padding: 11px 18px; border-top: 1px solid var(--gray-mid); font-size: 11.5px; color: var(--slate); }
.search-modal__foot kbd { font-family: var(--font-heading); font-size: 11px; background: var(--soft); border: 1px solid var(--gray-mid); border-radius: 4px; padding: 1px 5px; margin-right: 2px; }
@media (prefers-reduced-motion: reduce) { .search-modal[open] { animation: none; } }
@media (max-width: 600px) {
  .header__search-label, .header__search-kbd { display: none; }
  .header__search { padding: 8px; }
  .search-modal__foot { display: none; }
}

/* Mobile-Nav: Gruppen + Sub-Links */
.nav-mobile { overflow-y: auto; padding: 80px 24px 40px; justify-content: flex-start; gap: 6px; }
.nav-mobile .nm-group { font-family: var(--font-heading); font-weight: 800; font-size: 20px; color: #fff; margin-top: 18px; }
.nav-mobile .nm-sub { color: rgba(255,255,255,0.7); font-size: 15px; font-weight: 500; }

/* ── BREADCRUMB ── */
.breadcrumb { font-size: 13px; color: var(--gray-dark); padding: 18px 0 0; }
.breadcrumb a { color: var(--gray-dark); text-decoration: none; }
.breadcrumb a:hover { color: var(--accent); }
.breadcrumb span { color: var(--gray-mid); margin: 0 6px; }

/* ── LEISTUNGSUMFANG CHECKLIST ── */
.check-list { list-style: none; display: grid; gap: 12px; margin-top: 8px; }
.check-list li { display: flex; align-items: flex-start; gap: 12px; font-size: 15px; color: var(--text, #2d3338); }
.check-list li svg { width: 22px; height: 22px; flex-shrink: 0; color: var(--accent); margin-top: 1px; }

/* ── REFERENZEN: Endlos-Laufband ──
   Die Logo-Liste steht zweimal im Track (die zweite Haelfte ist aria-hidden).
   translateX(-50%) verschiebt exakt um eine Liste → der Sprung ist unsichtbar.
   Jede Karte belegt 220 + 18 = 238px; 16 Karten = 3808px = 50% des Tracks. */
.ref-marquee {
  margin-top: 36px;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
}
.ref-marquee__track {
  display: flex; width: max-content;
  animation: ref-marquee 62s linear infinite;
}
.ref-marquee__track > .ref-logo { flex: 0 0 auto; width: 220px; margin-right: 18px; }
@keyframes ref-marquee { to { transform: translateX(-50%); } }
/* Anhalten: beim Drueberfahren (Logo lesbar) und ausserhalb des Bildschirms (spart Strom) */
.ref-marquee:hover .ref-marquee__track,
.ref-marquee:focus-within .ref-marquee__track,
.ref-marquee.is-idle .ref-marquee__track { animation-play-state: paused; }
@media (max-width: 640px) {
  .ref-marquee__track > .ref-logo { width: 168px; margin-right: 14px; }
}
@media (prefers-reduced-motion: reduce) {
  /* Kein Selbstlauf → von Hand ziehbar */
  .ref-marquee__track { animation: none; }
  .ref-marquee { overflow-x: auto; -webkit-mask-image: none; mask-image: none; }
}
.ref-logo {
  min-width: 0;
  background: linear-gradient(160deg, var(--dark-1), var(--dark-2)); border: 1px solid rgba(255,255,255,0.08); border-radius: 12px;
  aspect-ratio: 16/10; display: flex; align-items: center; justify-content: center; padding: 20px 28px;
  transition: transform .2s, box-shadow .2s;
}
.ref-logo:hover { transform: translateY(-3px); box-shadow: 0 14px 30px rgba(34,29,25,0.20); }
/* Logos einheitlich weiss auf dunklem Braun → gross und sicher sichtbar */
.ref-logo img { max-width: 88%; max-height: 116px; width: auto; height: auto; object-fit: contain; filter: brightness(0) invert(1); opacity: .85; transition: opacity .2s; }
.ref-logo:hover img { opacity: 1; }

/* ── SIMPLE PROSE PAGE ── */
.prose { max-width: 760px; }
.prose h2 { font-family: var(--font-heading); font-size: 1.4rem; font-weight: 800; margin: 32px 0 12px; }
.prose h3 { font-family: var(--font-heading); font-size: 1.1rem; font-weight: 700; margin: 24px 0 8px; }
.prose p { color: var(--gray-dark); margin-bottom: 14px; line-height: 1.8; }
.prose ul { margin: 0 0 16px 20px; color: var(--gray-dark); line-height: 1.8; }
.prose a { color: var(--accent); }
.prose--wide { max-width: 900px; }

/* Tabellen in Rechtstexten (Auftragsverarbeiter, Löschfristen).
   Auf schmalen Bildschirmen scrollt der Wrapper seitwärts — die Seite selbst nie. */
.prose-table { overflow-x: auto; margin: 0 0 22px; -webkit-overflow-scrolling: touch; }
.prose-table table { border-collapse: collapse; width: 100%; min-width: 540px; font-size: .93rem; }
.prose-table caption { text-align: left; font-weight: 600; color: var(--gray-dark); padding-bottom: 8px; font-size: .9rem; }
.prose-table th,
.prose-table td { text-align: left; vertical-align: top; padding: 11px 14px; border-bottom: 1px solid var(--gray-mid); line-height: 1.6; }
.prose-table th { font-weight: 700; color: var(--black); background: var(--soft); white-space: nowrap; }
.prose-table td { color: var(--gray-dark); }
.prose-table tr:last-child td { border-bottom: 0; }

/* Service-Icon aus echtem SVG (Hero-Cards / Accordion) */
.icon-img { width: 26px; height: 26px; object-fit: contain; }
.accordion__icon .icon-img { filter: none; }

/* ════════════ DETAIL-HERO (Leistung): Bild + Marco im Swirl + Lead-Karte + CTAs ════════════ */
.svc-hero { min-height: calc(100vh - 170px); display: flex; align-items: center; position: relative; overflow: hidden; }
.svc-hero .hero__bg::after { background: linear-gradient(95deg, rgba(34,29,25,0.94) 0%, rgba(34,29,25,0.78) 46%, rgba(34,29,25,0.45) 100%); }
.svc-hero__inner { position: relative; z-index: 2; width: 100%; max-width: var(--max-content); margin: 0 auto; padding: 70px var(--pad); }
.svc-hero__head { max-width: 640px; }
.svc-hero .hero__h1 { margin-bottom: 10px; }
.svc-hero__sub { font-family: var(--font-heading); font-weight: 700; font-size: 14px; letter-spacing: 2px; text-transform: uppercase; color: var(--accent-2); margin-bottom: 28px; }
.svc-hero__card {
  position: relative; max-width: 560px; margin-top: 86px;
  background: rgba(34,29,25,0.72); backdrop-filter: blur(10px);
  border: 1px solid rgba(255,255,255,0.12); border-radius: 20px;
  padding: 116px 32px 28px;
}
.svc-hero__person { position: absolute; top: -74px; left: 28px; width: 172px; height: 172px; }
.svc-hero__person img { position: absolute; inset: 16px; width: 140px; height: 140px; border-radius: 50%; object-fit: cover; object-position: top center; border: 2px solid rgba(255,255,255,0.22); background: #2A2018; }
.swirl, .swirl::after { content: ''; position: absolute; border-radius: 50%; }
.swirl { inset: 0; border: 2.5px dashed var(--accent); animation: swirlSpin 16s linear infinite; }
.swirl::after { inset: -8px; border: 2px dashed var(--accent-2); opacity: .6; animation: swirlSpin 26s linear infinite reverse; }
@keyframes swirlSpin { to { transform: rotate(360deg); } }
.svc-hero__trust { position: absolute; top: 34px; left: 220px; right: 24px; font-family: var(--font-heading); font-weight: 600; font-size: 12.5px; color: rgba(255,255,255,0.82); }
.svc-hero__trust .stars { color: #fbbf24; letter-spacing: 1px; }
.svc-hero__lead { color: rgba(255,255,255,0.9); font-size: 15px; line-height: 1.7; }
.svc-hero__cta { display: flex; gap: 12px; margin-top: 22px; flex-wrap: wrap; }

/* Toggle-Unterüberschrift im Accordion */
.pt-sub { font-family: var(--font-heading); font-weight: 800; font-size: 17px; color: var(--ink); margin-bottom: 10px; }

/* ── FAQ (eigene Sektion, SEO) ── */
.faq-list { max-width: none; margin-top: 28px; }
/* zweispaltige Trenner-Optik bei breitem FAQ */
.faq-list .accordion__body-inner { max-width: 900px; }

/* ── Mobile Sticky-CTA (Detail/Service) ── */
.mobile-cta { display: none; }
@media (max-width: 767px) {
  .has-mobile-cta ~ .chat-mobile { display: none !important; }
  .mobile-cta {
    display: flex; align-items: center; gap: 10px;
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 120;
    height: 64px; padding: 0 12px;
    background: rgba(34,29,25,0.96); backdrop-filter: blur(8px);
    border-top: 1px solid rgba(255,255,255,0.12);
  }
  .mobile-cta__phone {
    width: 48px; height: 48px; flex-shrink: 0; border-radius: 50%;
    background: var(--white); color: var(--ink);
    display: flex; align-items: center; justify-content: center;
  }
  .mobile-cta__phone svg { width: 22px; height: 22px; }
  .mobile-cta__btn {
    flex: 1; height: 48px; border-radius: 50px;
    background: var(--accent); color: #fff; text-decoration: none;
    display: flex; align-items: center; justify-content: center; gap: 8px;
    font-family: var(--font-heading); font-weight: 700; font-size: 15px;
  }
  .has-mobile-cta .page { padding-bottom: 78px; }
  /* Hero mobil: Person zentriert über der Karte */
  .svc-hero__inner { padding: 40px var(--pad) 30px; }
  .svc-hero__head { text-align: center; margin: 0 auto; }
  .svc-hero__card { margin: 96px auto 0; padding: 104px 18px 24px; text-align: center; }
  .svc-hero__person { left: 50%; transform: translateX(-50%); top: -82px; }
  .svc-hero__trust { position: static; margin-bottom: 12px; }
  .svc-hero__cta { justify-content: center; }
}

/* ════════════ ANFRAGE: Buchungs-App (App-Shell im 60px-Rahmen) ════════════ */
/* App-Shell: Das Formular fuellt EXAKT den Raum zwischen Sticky-Header und Sticky-Footer.
   Der Formular-Header sitzt buendig unter dem Seiten-Header, die Button-Leiste buendig
   ueber dem Seiten-Footer — und NUR die .content dazwischen scrollt (kein Seiten-Scroll,
   kein leerer Streifen, kein zweiter Footer darunter). */
.page--app { padding-top: var(--header-h); padding-bottom: var(--footer-h); }
.page--app .content-main { display: flex; flex-direction: column; width: 100%; min-width: 0; padding: 0; }
.page--app .aform { max-width: none; width: 100%; margin: 0; padding: 0; flex: 1 1 auto; display: flex; min-width: 0; }
.page--app .aform .card {
  width: 100%; grid-template-columns: 320px 1fr;
  border: 0; border-radius: 0; box-shadow: none;
}
/* App-Shell NUR ab Desktop (>960px — dort ist der Footer sticky): das Formular fuellt
   exakt den Rahmen zwischen Sticky-Header und Sticky-Footer, nur .content scrollt,
   die Button-Leiste bleibt buendig ueber dem Footer. Darunter (<=960px) greift das
   normale Scroll-Layout im 960px-Media-Query weiter unten. */
@media (min-width: 961px) {
  .page--app .content-wrap { height: calc(100vh - var(--header-h) - var(--footer-h)); min-height: 0; overflow: hidden; }
  .page--app .content-main { min-height: 0; overflow: hidden; }
  .page--app .aform { min-height: 0; }
  .page--app .aform .card { flex: 1 1 auto; min-height: 0; overflow: hidden; }
}
/* Fragment-Schutz: die Seiten-.rail (vertikale Leisten) darf NICHT in die Formular-Rail bluten.
   Das Fragment setzt width/position/height/align-items nicht selbst -> es erbte sonst die Seiten-Werte
   (schmale Breite, sticky, 100vh, zentriert) und wurde links abgeschnitten. Auf Mobile sogar display:none. */
.aform .rail {
  width: auto; flex-shrink: 1; flex-basis: auto;
  position: static; top: auto; height: auto;
  align-items: stretch; z-index: auto;
  display: flex;
}
.page--app #chat-toggle { display: none; }

.booking { flex: 1; display: flex; min-width: 0; min-height: 0; background: var(--white); }

/* Linke Seite: Foto + Schritte + warme Ansprache */
.booking__aside {
  width: 38%; flex-shrink: 0; position: relative; overflow: hidden;
  display: flex; flex-direction: column; justify-content: space-between;
  padding: 48px 40px; color: #fff;
  background: linear-gradient(165deg, #221D19 0%, #34291F 58%, #2A2018 100%);
}
.booking__aside::before {
  content: ''; position: absolute; inset: 0; z-index: 0;
  background:
    radial-gradient(circle at 88% 10%, rgba(194,107,60,0.30), transparent 42%),
    radial-gradient(circle at 6% 96%, rgba(194,107,60,0.14), transparent 40%);
}
.booking__aside::after {
  content: ''; position: absolute; right: -60px; bottom: -60px; z-index: 0;
  width: 240px; height: 240px; border-radius: 50%;
  background: radial-gradient(circle, rgba(255,255,255,0.05), transparent 70%);
  animation: blob 22s ease-in-out infinite;
}
.booking__aside > * { position: relative; z-index: 2; }
.booking__brand { display: flex; align-items: center; gap: 10px; font-family: var(--font-heading); font-weight: 800; letter-spacing: .5px; font-size: 14px; margin-bottom: 4px; }
.booking__brand img { height: 26px; width: auto; }
.booking__aside-head h2 { font-family: var(--font-heading); font-weight: 800; font-size: 1.5rem; line-height: 1.2; margin-bottom: 10px; }
.booking__aside-head p { font-size: 14px; opacity: .9; line-height: 1.6; }
.booking__steps { display: flex; flex-direction: column; gap: 4px; margin: 26px 0; }
.booking__step { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 10px; font-family: var(--font-heading); font-size: 13.5px; font-weight: 600; color: rgba(255,255,255,0.65); transition: all .25s; }
.booking__step.is-active { background: rgba(255,255,255,0.12); color: #fff; }
.booking__step.is-done { color: rgba(255,255,255,0.92); }
.booking__step-num { width: 26px; height: 26px; border-radius: 50%; border: 1.5px solid rgba(255,255,255,0.4); display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; flex-shrink: 0; }
.booking__step.is-active .booking__step-num { background: var(--accent); border-color: var(--accent); }
.booking__step.is-done .booking__step-num { background: rgba(255,255,255,0.25); border-color: transparent; }
.booking__aside-foot { font-size: 12.5px; opacity: .85; display: flex; align-items: center; gap: 8px; }
.booking__aside-foot .stars { color: #fbbf24; letter-spacing: 1px; }

/* Rechte Seite: Formular + Navigation */
.booking__main { flex: 1; display: flex; flex-direction: column; min-width: 0; min-height: 0; }
.booking__body { flex: 1; overflow-y: auto; padding: 46px 48px; }
.booking__foot { border-top: 1px solid var(--gray-mid); padding: 18px 48px; display: flex; align-items: center; justify-content: space-between; gap: 12px; background: var(--white); }
.wizard-step { display: none; max-width: 660px; }
.wizard-step.is-active { display: block; animation: stepIn .35s ease; }
@keyframes stepIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.wizard-step__eyebrow { font-family: var(--font-heading); font-size: 11px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; color: var(--slate); margin-bottom: 8px; }
.wizard-step__title { font-family: var(--font-heading); font-weight: 800; font-size: 1.45rem; margin-bottom: 8px; }
.wizard-step__lead { color: var(--gray-dark); font-size: 14.5px; margin-bottom: 28px; line-height: 1.6; }

/* Service-Auswahl mit Icons */
.opt-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 14px; }
.opt-card { display: flex; flex-direction: column; gap: 14px; align-items: center; justify-content: center; text-align: center; padding: 26px 16px; border: 1.5px solid var(--gray-mid); border-radius: 16px; cursor: pointer; transition: all .2s; background: var(--white); color: var(--ink); }
.opt-card:hover { border-color: var(--accent); transform: translateY(-3px); box-shadow: 0 12px 28px rgba(34,29,25,0.09); }
.opt-card.is-sel { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(194,107,60,0.16); }
.opt-card__icon { display: flex; align-items: center; justify-content: center; color: var(--ink); transition: transform .2s; height: 52px; }
.opt-card__icon svg { width: 50px; height: 50px; }
.opt-card__icon img { width: 50px; height: 50px; object-fit: contain; }
.opt-card:hover .opt-card__icon, .opt-card.is-sel .opt-card__icon { transform: scale(1.06); }
.opt-card__label { font-family: var(--font-heading); font-weight: 700; font-size: 14px; line-height: 1.25; }

/* Formularfelder */
.field { margin-bottom: 18px; }
.field > label { display: block; font-family: var(--font-heading); font-weight: 600; font-size: 13px; margin-bottom: 7px; }
.field input, .field select, .field textarea { width: 100%; padding: 12px 14px; border: 1.5px solid var(--gray-mid); border-radius: 10px; font-family: inherit; font-size: 14px; color: var(--ink); outline: none; transition: border-color .2s; background: var(--white); }
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--accent); }
.field textarea { min-height: 96px; resize: vertical; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.choice-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
.field-check { display: flex; align-items: flex-start; gap: 10px; font-size: 13.5px; color: var(--slate); line-height: 1.45; cursor: pointer; margin-top: 4px; }
.field-check input { width: 18px; height: 18px; margin-top: 1px; flex-shrink: 0; accent-color: var(--accent); cursor: pointer; }
.field-check a { color: var(--accent); font-weight: 600; }
.groesse-frei { margin-top: 10px; }
.note-box { background: var(--soft); border-left: 3px solid var(--accent); border-radius: 8px; padding: 12px 14px; font-size: 13.5px; color: var(--ink); line-height: 1.5; margin-bottom: 18px; }
.note-box a { color: var(--accent); font-weight: 600; }
.termin-hint { font-size: 12.5px; color: var(--slate); line-height: 1.5; margin-top: 14px; }

/* ════════ Mobile Bottom-Tab-Bar (App-Style) + Slide-up-Sheets ════════ */
.mtab, .msheet, .msheet__bg { display: none; }
@media (max-width: 960px) {
  .header__burger { display: none !important; }
  .nav-mobile { display: none !important; }
  .mobile-cta { display: none !important; }
  /* Footer auf Mobile NICHT sticky -> normaler Fluss am Seitenende, schoen gegliedert.
     Die fixe Tab-Bar deckt unten ~62px ab -> Footer-Inhalt per padding-bottom freihalten. */
  .page { padding-bottom: 0; }
  .footer {
    position: static; height: auto; left: auto; right: auto; bottom: auto; z-index: auto;
    flex-direction: column; align-items: center; text-align: center; gap: 16px;
    padding: 30px 20px calc(62px + env(safe-area-inset-bottom) + 22px);
  }
  .footer__brand img { height: 34px; }
  .footer__links { flex-wrap: wrap; justify-content: center; gap: 8px 18px; }
  .footer__links a { font-size: 14px; padding: 3px 0; }
  .footer__address { display: block; color: #999; font-size: 12.5px; }
  .footer__reviews { margin-left: 0; flex-direction: column; gap: 10px; }
  /* Anfrage (App-Seite): App-Shell AUCH auf dem Handy — fixer Header oben,
     schlanker fixer Footer unten, Aktionsleiste sticky darüber, nur .content scrollt. */
  /* Die Website-Kopfzeile entfaellt hier. Auf 375 px blieben fuer die
     eigentlichen Felder nur 277 px — den Rest frassen Kopfzeile (54),
     Titelblock der Rail (rund 90) und Fusszeile (50). Wer ein Formular
     ausfuellt, navigiert nicht; er braucht einen Weg zurueck, und der
     steht jetzt als Pfeil im schlanken App-Kopf. */
  body:has(.page--app) .header { display: none; }
  .page--app { padding-top: 0; padding-bottom: var(--footer-h); }
  /* svh als Rueckfall, dvh gewinnt wo es unterstuetzt wird. */
  .page--app .content-wrap { height: calc(100svh - var(--footer-h)); height: calc(100dvh - var(--footer-h)); min-height: 0; overflow: hidden; }
  .page--app .content-main { padding: 0; min-height: 0; overflow: hidden; }
  .page--app .aform { min-height: 0; flex-direction: column; }
  /* flex: 1 fehlte — ohne das ist die Karte nur so hoch wie ihr Inhalt
     und der gewonnene Platz bleibt als heller Grund darunter stehen. */
  .page--app .aform .card { grid-template-columns: 1fr; flex: 1 1 auto; min-height: 0; overflow: hidden; }

  /* Die Seitenspalte faellt auf dem Telefon ganz weg. Ihr Titelblock
     steht im App-Kopf, die Telefonnummer war hier schon vorher
     ausgeblendet — und weil die Karte ein Raster ist, dessen Reihen den
     freien Platz unter sich aufteilen, wuchs sie weit ueber ihren
     Inhalt hinaus: unter den Wortmarken stand ein leeres Band. Den
     Schritt tragen der orange Balken und «SCHRITT x VON 5». */
  .page--app .aform .rail { display: none; }

  /* Der Kalender im Fluss: schmalerer Innenrand und engere Fugen, damit
     die Tagesfelder von 40 auf rund 43 px kommen. Ein Datumsraster darf
     dichter sein als ein einzelner Knopf — die Felder liegen ohne
     Zwischenraum aneinander. */
  .page--app .aform .cal { padding: 11px 9px 13px; }
  .page--app .aform .cal-grid { gap: 3px; }

  /* Fragetitel eine Stufe kleiner — 22 px sind auf 375 px zu laut. */
  .page--app .aform .b-h { font-size: 18px; }
  .page--app .aform .b-lead { font-size: 13px; margin-bottom: 14px; }

  /* Auswahlfelder als Raster statt als ausgefranster Pillen-Umbruch:
     gleich breite Felder, 48 px hoch, drei Spalten bei kurzen und zwei
     bei langen Etiketten. Mehrfachauswahl steht in voller Breite
     untereinander — ein Ankreuzfeld liest sich als Liste, nicht als
     Pillenwolke. */
  .page--app .aform .chips { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
  .page--app .aform .chips[data-spalten="2"] { grid-template-columns: repeat(2, 1fr); }
  .page--app .aform .chips .c {
    display: flex; align-items: center; justify-content: center;
    min-height: 48px; padding: 6px 8px; border-radius: 12px;
    font-size: 13px; line-height: 1.2; text-align: center;
  }
  .page--app .aform .chips .c.sel { box-shadow: 0 0 0 3px var(--t16); }
  .page--app .aform .chips.multi,
  .page--app .aform .chips.multi[data-spalten="2"] { grid-template-columns: 1fr; gap: 6px; }
  .page--app .aform .chips.multi .c {
    justify-content: flex-start; text-align: left; padding: 6px 12px 6px 36px;
  }
  .page--app .aform .chips.multi .c::before { left: 13px; }

  /* Bedienung: volle Breite, 48 px hoch. 42 und 36 px trifft der Daumen
     nicht zuverlaessig — die Hausregel sind 44. */
  .page--app .aform .foot-nav {
    display: grid; grid-template-columns: auto 1fr; gap: 10px;
    /* Seitlich 0: der Rumpf setzt die 20-px-Linie bereits. */
    align-items: center; padding: 10px 0 calc(10px + env(safe-area-inset-bottom));
  }
  .page--app .aform .btn-back { min-height: 48px; min-width: 48px; padding: 0 14px; }
  .page--app .aform .btn-next { min-height: 48px; width: 100%; justify-content: center; font-size: 15px; }
  .page--app .aform .prog-txt { display: none; }   /* steht schon im Kopf */

  /* 41 px waren die Felder — unter der Hausregel von 44. Ankreuz- und
     Auswahlfelder bleiben aussen vor, die haben ihr eigenes Mass. */
  .page--app .aform .content input:not([type="checkbox"]):not([type="radio"]),
  .page--app .aform .content select,
  .page--app .aform .content textarea { min-height: 44px; }

  /* Kleinste Schriften anheben — 9.5 px liest niemand auf dem Telefon. */
  .page--app .aform .lbl { font-size: 12px; }
  .page--app .aform .b-eye { font-size: 11.5px; }

  /* Dieselbe 20-px-Linie wie auf allen anderen Seiten. */
  .page--app .aform .body { padding-left: 20px; padding-right: 20px; }
  /* Der volle Site-Footer wäre auf dem Handy ~281px hoch — auf der Anfrage-Seite
     stattdessen eine schlanke fixe Leiste (Logo + Impressum/Datenschutz/Cookies). */
  .page--app ~ .footer {
    position: fixed; bottom: 0; left: 0; right: 0; z-index: 100;
    height: var(--footer-h); flex-direction: row; flex-wrap: nowrap;
    align-items: center; justify-content: center; gap: 14px;
    padding: 0 14px; text-align: left; overflow: hidden;
  }
  .page--app ~ .footer .footer__reviews,
  .page--app ~ .footer .footer__address,
  .page--app ~ .footer .footer__links a[href="ueber-uns"],
  .page--app ~ .footer .footer__links a[href="jobs"],
  .page--app ~ .footer .footer__links a[href="kontakt"] { display: none; }
  .page--app ~ .footer .footer__brand { flex-shrink: 0; }
  .page--app ~ .footer .footer__brand img { height: 18px; }
  .page--app ~ .footer .footer__links { flex-wrap: nowrap; justify-content: center; gap: 14px; margin: 0; }
  .page--app ~ .footer .footer__links a { font-size: 11.5px; padding: 0; }

  /* Unter 768 px steht unten nichts mehr: die Fusszeile ist dort
     ausgeblendet und die Reiterleiste kommt auf der Formularseite gar
     nicht ins Dokument. Der reservierte Streifen blieb als leeres
     helles Band stehen — 50 px, die dem Formular fehlten. */
  @media (max-width: 767px) {
    .page--app { padding-bottom: 0; }
    .page--app .content-wrap { height: 100svh; height: 100dvh; }
  }

  /* Auf Schritt 1 ist der Zurueck-Knopf abgeschaltet und unsichtbar.
     Seine Spalte blieb trotzdem stehen und schnitt den Weiter-Knopf
     auf 197 statt 335 px zu. */
  .page--app .aform .foot-nav:has(.btn-back[disabled]) { grid-template-columns: 1fr; }
  .page--app .aform .btn-back[disabled] { display: none; }

  /* Milchige, hinterlegte Leiste — der Inhalt zieht sichtbar darunter durch,
     statt hinter einem deckenden Balken zu verschwinden. */
  .mtab { display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 1470;
    background: rgba(255,255,255,.9);
    -webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px);
    border-top: 1px solid var(--gray-mid, #e3e3e3);
    padding-bottom: env(safe-area-inset-bottom); box-shadow: 0 -4px 18px rgba(0,0,0,.08); }
  /* Bei offenem Blatt deckend: durch die milchige Fassung schiene sonst der
     scrollende Blattinhalt hindurch, und das liest sich wie ein Fehler. */
  body.msheet-lock .mtab { background: var(--white, #fff);
    -webkit-backdrop-filter: none; backdrop-filter: none; }
  .mtab__item { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 2px; padding: 7px 2px 6px; min-width: 0; background: none; border: 0; cursor: pointer;
    text-decoration: none; color: var(--slate, #8c8175); font-family: inherit; font-size: 10px; font-weight: 600;
    -webkit-tap-highlight-color: transparent; }
  /* Der aktive Reiter bekommt eine getoente Pille, nicht nur eine andere
     Schriftfarbe — Farbe allein ist auf kleinen Symbolen schwer zu sehen. */
  .mtab__ic { width: 46px; height: 28px; border-radius: 14px; flex: 0 0 auto;
    display: flex; align-items: center; justify-content: center;
    transition: background .18s ease, color .18s ease; }
  .mtab__item svg { width: 21px; height: 21px; }
  .mtab__item span:not(.mtab__ic) { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
  .mtab__item.is-active, .mtab__item.is-open { color: var(--accent, #c26b3c); }
  .mtab__item.is-active .mtab__ic, .mtab__item.is-open .mtab__ic { background: rgba(194,107,60,.13); }
  .mtab__item { position: relative; }
  .mtab__item.is-active::before { content: ''; position: absolute; top: 0; left: 50%;
    transform: translateX(-50%); width: 26px; height: 2px; border-radius: 0 0 2px 2px;
    background: var(--accent, #c26b3c); }

  .msheet__bg { display: block; position: fixed; inset: 0; z-index: 1450; background: rgba(0,0,0,.42);
    opacity: 0; pointer-events: none; transition: opacity .25s ease; }
  .msheet__bg.is-on { opacity: 1; pointer-events: auto; }

  .msheet { display: flex; flex-direction: column; position: fixed; left: 0; right: 0; bottom: 0; z-index: 1460;
    background: var(--white, #fff); border-radius: 20px 20px 0 0; max-height: 82vh; overflow-y: auto;
    padding: 8px 16px calc(var(--mtab-h, 58px) + 18px + env(safe-area-inset-bottom));
    transform: translateY(110%); transition: transform .3s cubic-bezier(.22,.61,.36,1);
    box-shadow: 0 -12px 34px rgba(0,0,0,.2); }
  .msheet.is-open { transform: translateY(0); }
  .msheet__grip { display: block; width: 44px; height: 4px; border-radius: 4px; background: var(--gray-mid, #ddd); margin: 6px auto 12px; }
  /* Kleiner Versal-Titel statt einer Ueberschriftenzeile: das Blatt ist
     Navigation, keine Seite — eine H-Ebene waere hier falsch. */
  .msheet__kopf { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
  .msheet__title { font-family: var(--font-heading, sans-serif); font-size: 10px; font-weight: 800;
    letter-spacing: .16em; text-transform: uppercase; color: var(--slate, #8c8175); }
  /* 44 x 44: kleiner trifft der Daumen nicht zuverlaessig. */
  .msheet__zu { width: 44px; height: 44px; margin-right: -10px; border: 0; background: none;
    display: flex; align-items: center; justify-content: center; cursor: pointer;
    color: var(--slate, #8c8175); -webkit-tap-highlight-color: transparent; }
  .msheet__zu svg { width: 18px; height: 18px; }

  /* Zweierraster: was paarweise nebeneinander passt, steht nebeneinander.
     Jede Kachel ist mindestens 44 px hoch, damit der Daumen trifft. */
  .msheet__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .msheet__tile { display: block; width: 100%; min-width: 0; text-align: left; min-height: 44px;
    padding: 12px 11px 11px; border: 1px solid var(--gray-mid, #e7dccb); border-radius: 16px;
    background: var(--bg, #fbf7f1); color: var(--ink, #2a2420); text-decoration: none;
    font-family: inherit; cursor: pointer; -webkit-tap-highlight-color: transparent;
    transition: border-color .18s ease, background .18s ease; }
  .msheet__tile:active { border-color: var(--accent, #c26b3c); background: rgba(194,107,60,.07); }
  .msheet__tile b { display: block; font-family: var(--font-heading, sans-serif); font-size: 12px;
    font-weight: 800; line-height: 1.3; margin-top: 8px;
    hyphens: auto; -webkit-hyphens: auto; }
  /* Hoechstens zwei Zeilen, danach Auslassungspunkte: der Rest steht auf
     der Seite selbst, das Blatt ist Navigation und kein Fliesstext. */
  .msheet__tile small { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
    overflow: hidden; text-overflow: ellipsis;
    font-size: 10.5px; line-height: 1.4; color: var(--slate, #8c8175);
    margin-top: 3px; hyphens: auto; -webkit-hyphens: auto; }
  .msheet__ic { width: 34px; height: 34px; border-radius: 11px; flex: 0 0 auto;
    display: flex; align-items: center; justify-content: center;
    background: var(--white, #fff); border: 1px solid var(--gray-mid, #e7dccb); color: var(--accent, #c26b3c); }
  .msheet__ic img, .msheet__ic svg { width: 18px; height: 18px; object-fit: contain; }

  .msheet__all { display: flex; align-items: center; justify-content: center; gap: 8px;
    min-height: 46px; margin-top: 10px; padding: 0 12px;
    border: 1px solid var(--gray-mid, #e7dccb); border-radius: 13px;
    color: var(--ink, #2a2420); text-decoration: none;
    font-family: var(--font-heading, sans-serif); font-size: 13.5px; font-weight: 700; }
  .msheet__all svg { width: 15px; height: 15px; flex: 0 0 auto; }

  .msheet__cta { display: flex; align-items: center; justify-content: center; gap: 9px; margin-top: 10px; flex: 0 0 auto;
    min-height: 52px; padding: 0 16px; border-radius: 16px; background: var(--accent, #c26b3c); color: #fff;
    text-decoration: none; font-family: var(--font-heading, sans-serif); font-weight: 700; font-size: 15px;
    box-shadow: 0 8px 18px rgba(194,107,60,.28); }
  .msheet__cta svg { width: 18px; height: 18px; flex: 0 0 auto; }

  /* Direkt erreichbar — Telefon und E-Mail als Reihenpaar, nicht gestapelt. */
  .msheet__direkt { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-top: 8px; }
  .msheet__direkt a { display: flex; align-items: center; justify-content: center; gap: 8px;
    min-height: 48px; padding: 0 10px; border: 1px solid var(--gray-mid, #e7dccb); border-radius: 13px;
    background: var(--white, #fff); color: var(--ink, #2a2420); text-decoration: none;
    font-size: 13px; font-weight: 600; overflow: hidden; }
  .msheet__direkt a span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .msheet__direkt svg { width: 16px; height: 16px; flex: 0 0 auto; color: var(--accent, #c26b3c); }

  /* Waehrend des Ziehens keine Transition — sonst haengt das Blatt dem Finger nach. */
  .msheet.wird-gezogen { transition: none; }

  /* Rechtliches als durchgezogene Zeile ueber die volle Breite. */
  .msheet__legal { display: flex; margin-top: 14px; border-top: 1px solid var(--gray-mid, #e7dccb); padding-top: 4px; }
  .msheet__legal a { flex: 1 1 auto; min-height: 44px; display: flex; align-items: center; justify-content: center;
    gap: 7px; font-size: 12px; color: var(--slate, #8c8175); text-decoration: none; }
  .msheet__legal svg { width: 15px; height: 15px; flex: 0 0 auto; }
  body.msheet-lock { overflow: hidden; }
}
.choice { padding: 14px 16px; border: 1.5px solid var(--gray-mid); border-radius: 12px; cursor: pointer; font-size: 14px; font-weight: 500; transition: all .2s; }
.choice:hover { border-color: var(--accent); }
.choice.is-sel { border-color: var(--accent); background: rgba(194,107,60,0.06); font-weight: 600; }

/* Navigation */
.wizard-btn { display: inline-flex; align-items: center; gap: 8px; padding: 11px 26px; border-radius: 9px; font-family: var(--font-heading); font-weight: 700; font-size: 14px; cursor: pointer; border: none; transition: all .2s; }
.wizard-btn--next { background: var(--accent); color: #fff; }
.wizard-btn--next:hover { background: var(--accent-dark); }
.wizard-btn--next svg { width: 18px; height: 18px; }
.wizard-btn--back { background: transparent; color: var(--slate); border: 1.5px solid var(--gray-mid); }
.wizard-btn--back:hover { border-color: var(--slate); color: var(--ink); }
.wizard-btn:disabled { opacity: .4; cursor: not-allowed; }
.wizard-progress { font-size: 12.5px; color: var(--slate); font-family: var(--font-heading); font-weight: 600; }

/* Zusammenfassung */
.summary { display: flex; flex-direction: column; }
.summary__row { display: flex; justify-content: space-between; gap: 16px; padding: 13px 0; border-bottom: 1px solid var(--gray-mid); font-size: 14px; }
.summary__row dt { color: var(--slate); }
.summary__row dd { font-weight: 600; text-align: right; }

/* Erfolg */
.booking__success { display: none; flex-direction: column; align-items: center; justify-content: center; text-align: center; height: 100%; padding: 40px; }
.booking__success.is-on { display: flex; }
.booking__success-icon { width: 72px; height: 72px; border-radius: 50%; background: rgba(34,197,94,0.12); color: #22c55e; display: flex; align-items: center; justify-content: center; margin-bottom: 20px; }
.booking__success-icon svg { width: 36px; height: 36px; }
.booking__success h2 { font-family: var(--font-heading); font-weight: 800; font-size: 1.6rem; margin-bottom: 10px; }
.booking__success p { color: var(--gray-dark); max-width: 460px; margin-bottom: 6px; line-height: 1.6; }

@media (max-width: 900px) {
  /* Wizard stapelt: schlanke Schritt-Leiste oben ("zweiter Header"), Foot bleibt unten gepinnt */
  .booking { flex-direction: column; }
  .booking__aside { display: block; width: auto; flex: 0 0 auto; padding: 9px 12px; }
  .booking__aside::before, .booking__aside::after { display: none; }
  .booking__brand, .booking__aside-head, .booking__aside-foot { display: none; }
  .booking__steps { flex-direction: row; gap: 4px; margin: 0; }
  .booking__step { flex: 1; min-width: 0; flex-direction: column; gap: 4px; padding: 2px 1px; font-size: 9px; line-height: 1.15; text-align: center; }
  .booking__step > span:last-child { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
  .booking__step-num { width: 22px; height: 22px; font-size: 11px; }
  .booking__body { padding: 24px 18px 22px; }
  .booking__foot { padding: 12px 16px; box-shadow: 0 -3px 12px rgba(0,0,0,.07); }
  .field-row { grid-template-columns: 1fr; }
}

/* ════════════ RESPONSIVE ════════════ */
@media (min-width: 1920px) { :root { --pad: 60px; --max-content: 1400px; } }
@media (min-width: 1280px) and (max-width: 1919px) { :root { --pad: 60px; --max-content: 1200px; } }
@media (min-width: 1280px) { .chat-mobile { display: none !important; } }
/* Das Mega-Menu (Top-Level-Links + Caret-Buttons) braucht Platz → unter 960px Burger statt Desktop-Nav */
@media (max-width: 960px) {
  .header__nav { display: none; }
  .header__burger { display: flex; }
}

/* Grosse Monitore (Surface Studio, 27"): Hero hoeher + groessere, lesbare Typo */
@media (min-width: 1920px) {
  .hero { min-height: 80vh; }
  .hero__content { padding: 72px var(--pad); }
  .hero__eyebrow { margin-bottom: 18px; }
  .hero__h1 { font-size: clamp(2.6rem, 3vw, 3.2rem); margin-bottom: 16px; }
  .hero__subtitle { font-size: 16.5px; max-width: 620px; margin-bottom: 26px; line-height: 1.6; }
  .hero__cards { margin-top: -64px; }
  .hero-card { padding: 22px 24px; }
  .hero-card__title { font-size: 16px; }
  .hero-card__text { font-size: 13.5px; }
}

/* Ultrawide / 34" (3440px+): Hero-Section noch hoeher, mehr Content-Breite */
@media (min-width: 2560px) {
  :root { --max-content: 1680px; }
  .hero { min-height: 80vh; }
  .hero__content { padding: 100px var(--pad); }
  .hero__h1 { font-size: clamp(3rem, 2.6vw, 4rem); margin-bottom: 20px; }
  .hero__subtitle { font-size: 19px; max-width: 720px; margin-bottom: 32px; }
  .hero__cards { margin-top: -72px; }
  .hero-card { padding: 26px 28px; }
  .hero-card__title { font-size: 17px; }
  .hero-card__text { font-size: 14px; }
}

@media (max-width: 1279px) {
  :root { --pad: 40px; --sidebar-w: 0px; }
  .content-sidebar { display: none; }
  .rail { display: none; }
  .split { grid-template-columns: 1fr; gap: 32px; }
  .features { grid-template-columns: repeat(2, 1fr); }
  .stats { grid-template-columns: repeat(2, 1fr); }
  .chat-mobile {
    display: block; position: fixed;
    bottom: calc(var(--footer-h) + 36px + 16px); right: 16px; z-index: 90;
  }
  .chat-mobile__btn {
    width: 60px; height: 60px; border-radius: 50%; background: var(--white);
    border: none; cursor: pointer; display: flex; align-items: center; justify-content: center;
    box-shadow: 0 4px 20px rgba(0,0,0,0.2); overflow: hidden; padding: 0;
  }
  .chat-mobile__btn svg { width: 60px; height: 60px; }
}

@media (max-width: 900px) {
  .hero__cards { grid-template-columns: 1fr; margin-top: -40px; }
  .svc-grid { grid-template-columns: 1fr; }
  .team { grid-template-columns: 1fr; }
  .svc-split { grid-template-columns: 1fr; gap: 36px; }
  .svc-media img { aspect-ratio: 16/10; }
  /* Echtes Hero-Foto: Auf dem Telefon wird das Panorama stark beschnitten.
     Ohne Nachfuehrung zeigt der Hero die Bildmitte — bei diesen Aufnahmen
     die Hausfassade, waehrend die Mitarbeitenden rechts stehen.
     Der Abdunkler laeuft dafuer von links-nach-rechts auf oben-nach-unten um:
     Der Text steht auf dem Telefon ueber die ganze Breite, und die rechte
     Flanke der Querblende ist mit 0.2 Deckung zu hell fuer weisse Schrift. */
  .hero__bg--foto img { object-position: 72% center; }
  .hero__bg--foto::after { background: linear-gradient(180deg, rgba(0,0,0,0.58) 0%, rgba(0,0,0,0.74) 50%, rgba(0,0,0,0.82) 100%); }
  .svc-foto { margin-top: 36px; }
  .svc-foto img { height: clamp(200px, 46vw, 300px); border-radius: 16px; }
  .svc-foto--hoch img { height: auto; max-height: 420px; }
  .hero__person { opacity: .35; max-width: 40%; }
  .cta-section__inner { grid-template-columns: 1fr; }
  /* NUR Mobile: die drei Karten sauber untereinander, gleich breit, buendig — schweben weiterhin */
  .cta-section__visual { position: relative; height: auto; display: flex; flex-direction: column; gap: 14px; }
  .cta-section__card:nth-child(1),
  .cta-section__card:nth-child(2),
  .cta-section__card:nth-child(3) { position: relative; top: auto; left: auto; right: auto; width: 100%; }
}

@media (max-width: 767px) {
  /* 20 px seitlich — dieselbe Linie wie auf den Landingpages. Vorher
     37.5 px (clamp 10vw): die Seite hatte zwei verschiedene Linien, und auf
     dem Telefon gingen 35 px Inhaltsbreite verloren. */
  :root { --pad: 20px; --header-h: 54px; --footer-h: 50px; }
  .header__nav { display: none; }
  .header__burger { display: flex; }
  .header__cta { padding: 8px 16px; font-size: 13px; }
  .hero { min-height: 80vh; }
  .hero__content { padding: 40px var(--pad) 60px; }
  .hero__h1 { font-size: 1.85rem; }
  .hero__cta-row { flex-direction: column; }
  .hero__cta { width: 100%; justify-content: center; }
  .section { padding: 56px 0; }
  .features { grid-template-columns: 1fr; }
  .stats { grid-template-columns: repeat(2, 1fr); }
  .hero__person { display: none; }
  .accordion__trigger { padding: 16px; gap: 12px; font-size: 15px; }
  /* Gleiche Innenpolsterung in allen Karten — vorher 21 / 23 / 29 px. */
  .hero-card, .svc-card, .statfloat__card { padding: 18px; }
  .accordion__icon { width: 36px; height: 36px; }
  .accordion__body-inner { padding: 0 16px 16px 64px; font-size: 14px; }
  .cta-section { min-height: auto; padding: 48px 0; }
  .cta-section__title { font-size: 1.5rem; }
  .cta-section__visual { height: auto; }
  .cta-section__buttons { flex-direction: column; }
  .cta-section__btn-primary, .cta-section__btn-secondary { width: 100%; justify-content: center; }
  .chat-mobile__overlay { bottom: calc(var(--footer-h) + 36px + 70px); right: 10px; left: 10px; width: auto; height: 60vh; max-height: 440px; }
  /* Die klebende Leiste entfällt auf dem Telefon: unten steht bereits die
     Reiterleiste, und alles, was hier stand, trägt jetzt die grosse
     Fusszeile darüber. */
  .footer { display: none; }
  .footer__reviews-trust { display: none; }
  .footer__brand img { height: 30px; }
  .footer__links { gap: 8px 14px; }
  .footer__links a { font-size: 13px; }
  .footer__reviews { gap: 10px; font-size: 11px; }
  .footer__reviews-stars { font-size: 13px; }
  .footer__reviews-google { height: 12px; }
  .chat-mobile { bottom: calc(var(--footer-h) + 36px + 12px); }
}

/* ── A11y ── */
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) {
  * { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; transition-duration: 0.05ms !important; }
}

/* ── COOKIE-EINSTELLUNGEN (MKurti-Standard) ── */
.ck-overlay {
  position: fixed; inset: 0; z-index: 2000;
  background: rgba(34,29,25,.55); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px);
  opacity: 0; pointer-events: none; transition: opacity .3s;
}
.ck-overlay.is-open { opacity: 1; pointer-events: auto; }
.ck-modal {
  position: fixed; z-index: 2001; left: 50%; top: 50%;
  transform: translate(-50%, -46%); opacity: 0; pointer-events: none;
  width: min(560px, calc(100vw - 32px)); max-height: min(86vh, 720px); overflow-y: auto;
  background: var(--white); color: var(--gray-dark);
  border: 1px solid var(--gray-mid); border-radius: 16px;
  padding: 28px 28px 22px; box-shadow: 0 30px 80px rgba(34,29,25,.28);
  transition: opacity .3s, transform .3s;
}
.ck-modal.is-open { opacity: 1; pointer-events: auto; transform: translate(-50%, -50%); }
.ck-modal h3 { font-family: var(--font-heading); font-size: 20px; font-weight: 800; color: var(--ink); margin-bottom: 10px; letter-spacing: -.01em; }
.ck-text { font-size: 13.5px; line-height: 1.6; margin-bottom: 18px; }
.ck-text a { color: var(--accent); text-decoration: underline; text-underline-offset: 2px; }
.ck-cats { display: flex; flex-direction: column; gap: 2px; margin-bottom: 20px; }
.ck-cat { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; padding: 13px 0; border-bottom: 1px solid var(--gray-mid); }
.ck-cat:last-child { border-bottom: 0; }
.ck-cat-info strong { display: block; font-family: var(--font-heading); font-size: 14px; font-weight: 700; color: var(--ink); margin-bottom: 3px; }
.ck-cat-info span { font-size: 12.5px; line-height: 1.5; color: var(--gray-dark); }
.ck-toggle { position: relative; flex: 0 0 auto; width: 44px; height: 25px; cursor: pointer; margin-top: 2px; }
.ck-toggle input { position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.ck-slider { position: absolute; inset: 0; border-radius: 99px; background: var(--gray-mid); transition: background .2s; pointer-events: none; }
.ck-slider::after { content: ''; position: absolute; top: 3px; left: 3px; width: 19px; height: 19px; border-radius: 50%; background: var(--white); box-shadow: 0 1px 3px rgba(34,29,25,.3); transition: transform .2s; }
.ck-toggle input:checked ~ .ck-slider { background: var(--accent); }
.ck-toggle input:checked ~ .ck-slider::after { transform: translateX(19px); }
.ck-toggle input:disabled ~ .ck-slider { background: var(--accent); opacity: .45; }
.ck-toggle input:focus-visible ~ .ck-slider { outline: 2px solid var(--accent); outline-offset: 3px; }
.ck-actions { display: flex; flex-wrap: wrap; gap: 9px; }
.ck-btn {
  flex: 1 1 auto; min-width: 130px; cursor: pointer;
  font-family: var(--font-heading); font-size: 13px; font-weight: 600;
  padding: 11px 16px; border-radius: 8px;
  background: var(--white); color: var(--ink); border: 1px solid var(--gray-mid);
  transition: border-color .2s, background .2s, color .2s;
}
.ck-btn:hover { border-color: var(--ink); }
.ck-btn--accent { background: var(--ink); color: var(--white); border-color: var(--ink); }
.ck-btn--accent:hover { background: var(--accent-dark); border-color: var(--accent-dark); }
.ck-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
/* Mobil: Bottom-Sheet über der Tab-Leiste */
@media (max-width: 640px) {
  .ck-modal {
    top: auto; bottom: 0; left: 0; transform: translateY(100%);
    width: 100%; max-height: 88vh; border-radius: 16px 16px 0 0; padding: 22px 18px 18px;
  }
  .ck-modal.is-open { transform: translateY(0); }
  /* Mobile: der Consent-Backdrop darf die Seite NICHT blockieren — sonst lässt
     sich das Formular (und jede Seite) auf dem Handy nicht scrollen, solange die
     Cookie-Wahl offen ist. Das Bottom-Sheet-Modal bleibt über sein eigenes
     pointer-events:auto voll bedienbar (Buttons/Toggles). */
  .ck-overlay.is-open { pointer-events: none; }
  .ck-btn { flex: 1 1 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .ck-modal, .ck-overlay, .ck-slider, .ck-slider::after { transition: none; }
}

/* ── HERO-VIDEO ──
   Das Standbild liegt immer da; das Video legt sich darüber, sobald es spielt.
   So gibt es keinen schwarzen Kasten, falls das Video nie geladen wird. */
.hero__bg--video { position: absolute; inset: 0; overflow: hidden; }
.hero__bg--video picture,
.hero__bg--video img,
.hero__bg--video video {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover;
}
.hero__bg--video video {
  opacity: 0; transition: opacity .8s ease;
  pointer-events: none;   /* Klicks gehen an den Text darunter, nicht ans Video */
}
.hero__bg--video video.is-sichtbar { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  .hero__bg--video video { display: none; }
}


/* ── Bewerbungsformular (Jobseite) ─────────────────────────────────────
   Heller Grund, nicht die dunkle Flaeche des Offerten-Assistenten: die
   Jobseite ist eine gewoehnliche Inhaltsseite. Felder 44 px nach der
   Hausregel, Zweier- und Dreierreihen wo die Feldbreite es hergibt. */
.bwf { max-width: 680px; display: flex; flex-direction: column; gap: 16px; }
.bwf__hp { position: absolute !important; left: -9999px; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.bwf__reihe { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 14px; }
.bwf__reihe .bwf__feld--schmal { max-width: 160px; }
.bwf__feld { display: flex; flex-direction: column; gap: 7px; min-width: 0; }
.bwf__feld > span { font-size: 13px; font-weight: 600; color: var(--ink); }
.bwf__feld > span i { color: var(--accent); font-style: normal; }
.bwf__feld > span em { font-style: normal; font-weight: 500; color: var(--slate); font-size: 12px; }
.bwf input, .bwf select, .bwf textarea {
  min-height: 44px; padding: 11px 13px; font: inherit; font-size: 14.5px; color: var(--ink);
  background: var(--white); border: 1.5px solid var(--gray-mid); border-radius: 10px; width: 100%;
  transition: border-color .13s, box-shadow .13s;
}
.bwf textarea { min-height: 130px; resize: vertical; line-height: 1.55; }
.bwf input::placeholder, .bwf textarea::placeholder { color: var(--slate); }
.bwf input:focus, .bwf select:focus, .bwf textarea:focus {
  outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(194,107,60,.16);
}
.bwf__dsg { display: flex; align-items: flex-start; gap: 11px; font-size: 13.5px; line-height: 1.5; color: var(--gray-dark); }
.bwf__dsg input { width: 20px; height: 20px; min-height: 0; flex: 0 0 auto; margin-top: 2px; accent-color: var(--accent); }
.bwf__dsg i { color: var(--accent); font-style: normal; }
.bwf__fuss { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 18px; }
.bwf__fuss .btn { min-height: 48px; }
.bwf__hinweis { margin: 0; flex: 1 1 220px; font-size: 12.5px; line-height: 1.5; color: var(--slate); }
.bwf__meldung { margin: 0; font-size: 13.5px; line-height: 1.5; }
.bwf__meldung:empty { display: none; }
.bwf__meldung.gut { color: #2f6f4f; font-weight: 600; }
.bwf__meldung.fehler { color: #a8322f; font-weight: 600; }

@media (max-width: 620px) {
  .bwf__reihe { grid-template-columns: 1fr; gap: 14px; }
  .bwf__reihe .bwf__feld--schmal { max-width: none; }
  .bwf__fuss .btn { width: 100%; justify-content: center; }
}


/* ── Film im Split-Abschnitt ───────────────────────────────────────────
   Standbild mit Abspielknopf; der Klick tauscht es gegen das
   Filmelement. Der Knopf liegt mittig ueber dem Bild und ist gross genug
   fuer den Daumen — 44 px sind das Minimum, hier sind es 64. */
.vidfig { position: relative; margin: 0; border-radius: 22px; overflow: hidden;
  box-shadow: 0 30px 70px rgba(34,29,25,0.18); background: #221D19; }
.vidfig img, .vidfig video { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; }
.vidfig video { background: #000; }

/* Der Film im Popup: abgedunkelter Grund, kein Rahmen, keine Rundung.
   z-index ueber der klebenden Kopf- und Fusszeile. */
.filmbox {
  position: fixed; inset: 0; z-index: 2147483300;
  display: flex; align-items: center; justify-content: center;
  padding: 24px;
  background: rgba(12, 9, 7, .88);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  animation: filmbox-auf .18s ease;
}
@keyframes filmbox-auf { from { opacity: 0 } to { opacity: 1 } }
.filmbox video {
  width: 100%; max-width: min(1280px, 100%); max-height: calc(100vh - 48px);
  border: 0; border-radius: 0; box-shadow: none; background: #000;
  display: block; aspect-ratio: 16 / 9; object-fit: contain;
}
.filmbox__zu {
  position: absolute; top: 14px; right: 16px;
  width: 44px; height: 44px; border: 0; border-radius: 50%;
  background: rgba(255,255,255,.12); color: #fff;
  font-size: 26px; line-height: 1; cursor: pointer;
  display: grid; place-items: center; transition: background .15s;
}
.filmbox__zu:hover { background: rgba(255,255,255,.24); }
.filmbox__zu:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
/* Die Seite darunter steht still, solange der Film laeuft. */
body.film-offen { overflow: hidden; }

@media (prefers-reduced-motion: reduce) { .filmbox { animation: none; } }
@media (max-width: 620px) {
  .filmbox { padding: 0; }
  .filmbox video { max-height: 100vh; }
  .filmbox__zu { top: 10px; right: 10px; }
}

.vidfig__play {
  position: absolute; inset: 0; width: 100%; height: 100%;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px;
  border: 0; cursor: pointer; font: inherit; color: #fff;
  background: linear-gradient(180deg, rgba(34,29,25,.18), rgba(34,29,25,.46));
  transition: background .18s;
}
.vidfig__play:hover { background: linear-gradient(180deg, rgba(34,29,25,.10), rgba(34,29,25,.38)); }
.vidfig__play:focus-visible { outline: 3px solid var(--accent); outline-offset: -3px; }
.vidfig__play svg {
  width: 64px; height: 64px; flex: 0 0 auto; fill: #fff;
  background: rgba(194,107,60,.92); border-radius: 50%; padding: 16px 14px 16px 18px;
  box-shadow: 0 10px 30px rgba(0,0,0,.35);
  transition: transform .18s, background .18s;
}
.vidfig__play:hover svg { transform: scale(1.06); background: var(--accent); }
.vidfig__play span {
  font-size: 13.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  text-shadow: 0 2px 12px rgba(0,0,0,.5);
}

@media (prefers-reduced-motion: reduce) {
  .vidfig__play svg, .vidfig__play { transition: none; }
  .vidfig__play:hover svg { transform: none; }
}

@media (max-width: 620px) {
  .vidfig { border-radius: 16px; }
  .vidfig__play svg { width: 54px; height: 54px; padding: 13px 12px 13px 15px; }
  .vidfig__play span { font-size: 12px; }
}