/* =====================================================================
   RM HOSPITALITY — Co-Hosting Landingpage (dunkel)
   ---------------------------------------------------------------------
   Eigenes, in sich geschlossenes System, bewusst NICHT styles.css.
   Alles unter .ch gescoped. Palette = RM-Post-Carousel (factory/base.css):
   fast-schwarzer Grund, Creme-Text, Dunkelrot als einzige Markenfarbe.
   Erhebung kommt aus Flaechenton + Linie, nicht aus Schatten.
   Wenig Bewegung: nur ein ruhiges Reveal, reduced-motion respektiert.
   ===================================================================== */

.ch {
  /* Flaechen */
  --bg: #0a0b0d;            /* Markengrund, wie Carousel */
  --surface: #16191f;
  --surface-sunk: #121419;  /* eingesenkte Baender */
  --surface-hover: #1a1e25;

  /* Text, alle Kontraste auf --bg geprueft */
  --text: #f4f1ea;          /* 17.4:1 */
  --text-muted: #9aa0ab;    /* 7.6:1  */
  --text-faint: #838892;    /* 5.3:1 auf --surface-sunk */

  /* Linien */
  --border: rgba(255, 255, 255, 0.07);
  --border-strong: rgba(255, 255, 255, 0.12);
  /* Bedienelemente (Eingaben, Ghost-Button) brauchen 3:1 gegen die Flaeche,
     dekorative Kanten duerfen subtiler bleiben. */
  --border-control: rgba(255, 255, 255, 0.40);

  /* Marke: identisch zur RM-Palette */
  --accent: #a8324a;        /* Flaeche, Text darauf weiss (6.5:1) */
  --accent-hover: #7d1d2d;
  --accent-text: #c76b7d;   /* Akzent als Text auf dunkel (4.9:1) */
  --accent-soft: rgba(168, 50, 74, 0.16);
  --accent-ring: rgba(168, 50, 74, 0.45);

  /* Warme Schatten statt Glow */
  --sh-sm: 0 1px 2px rgba(0, 0, 0, 0.30), 0 1px 3px rgba(0, 0, 0, 0.24);
  --sh-md: 0 2px 4px rgba(0, 0, 0, 0.24), 0 6px 14px -4px rgba(0, 0, 0, 0.30),
           0 14px 30px -10px rgba(0, 0, 0, 0.36);
  --sh-lg: 0 4px 8px rgba(0, 0, 0, 0.24), 0 14px 28px -8px rgba(0, 0, 0, 0.34),
           0 34px 64px -22px rgba(0, 0, 0, 0.44);

  --r-sm: 10px;
  --r: 16px;
  --r-lg: 22px;
  --r-pill: 999px;

  --maxw: 1180px;
  --nav-h: 68px;
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);

  --font-display: "Plus Jakarta Sans", "Inter", system-ui, -apple-system, sans-serif;
  --font-body: "Inter", system-ui, -apple-system, sans-serif;

  /* ---------- Typo-Skala: 7 Stufen, feste Integer, kein clamp ----------
     clamp() erzeugte 17.28 / 15.5 / 14.5 / 13.5 / 12.5 / 11.5px. Die Skala
     stuft jetzt an 3 Breakpoints, dafuer gibt es an KEINER Breite einen
     Halb-Pixel. Verhaeltnis zwischen Nachbarstufen immer >= 1.15. */
  --fs-display: 56px;   /* nur h1 */
  --fs-h2:      38px;   /* nur h2 */
  --fs-num:     30px;   /* grosse Kennzahl: .ch-stat b, .ch-plan .rate */
  --fs-xl:      22px;   /* .ch-rate b, .ch-quote-big */
  --fs-lg:      18px;   /* h3, FAQ-Frage, Lead */
  --fs-md:      15px;   /* Fliesstext, Buttons, Nav, Bildtexte, Fuss */
  --fs-sm:      13px;   /* Meta, Labels, Eyebrow, Badges, Fussnoten */
  --fs-control: 16px;   /* NUR Eingabefelder (iOS-Zoom), keine Textstufe */

  /* Zeilenhoehen: 5 Werte, 1:1 an die Stufen gebunden */
  --lh-num:  1;
  --lh-h1:   1.05;
  --lh-h2:   1.1;
  --lh-head: 1.4;
  --lh-body: 1.6;

  /* Laufweiten: optisch nach Groesse, nicht nach Bauteil */
  --ls-display: -0.035em;
  --ls-h2:      -0.028em;
  --ls-num:     -0.02em;
  --ls-lg:      -0.012em;
  --ls-md:      -0.006em;
  --ls-sm:       0em;
  --ls-caps:     0.1em;   /* Eyebrow, Schritt-Nummer, Paket-Badge */

  /* ---------- Abstands-Raster: 4px-Basis, geschlossene Menge ----------
     Vorher 8/10/14/18 (10, 14, 18 auf keinem Raster) plus 5,6,9,13,19,22,
     26,30,34,38,40. Ab jetzt: ein Wert ausserhalb dieser Liste ist ein Fehler. */
  --sp-1:  4px;
  --sp-2:  8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-6: 24px;
  --sp-8: 32px;
  --sp-10:40px;
  --sp-12:48px;
  --sp-16:64px;

  /* Achtung: der Wert wirkt DOPPELT, weil benachbarte Sektionen beide polstern.
     72px ergeben 144px zwischen zwei Sektionen. Vorher waren es 96 = 192px,
     das war der Grund fuer "einige sind zu weit entfernt". */
  --sp-section: 72px;
  --sp-hero:    64px;
  --sp-hero-unten: 40px;
  --sp-head:  var(--sp-10);

  /* Satzbreite: EIN Wert in rem. ch haengt an der Schriftgroesse des
     Elements, deshalb bedeuteten 58ch/62ch/70ch/72ch vier verschiedene Kanten. */
  --measure: 31rem;

  color-scheme: light;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  letter-spacing: normal;
}

/* Sprungmarken duerfen nicht unter der klebenden Kopfzeile landen.
   Muss am scrollenden Element stehen (html), nicht am body. */
html:has(body.ch) { scroll-padding-top: 84px; }

/* Tippflaechen: WCAG 2.2 verlangt 24px Mindestziel. Fusszeilen-Links und
   Wortmarke sind keine Inline-Links im Satz, brauchen also echte Hoehe. */
.ch-footer a,
.ch-brand,
.ch-nav a { display: inline-flex; align-items: center; min-height: 24px; }
.ch-footer nav a,
.ch-nav a { padding-block: var(--sp-1); }

/* ---------- Reset im Scope ----------
   Alle Element-Selektoren stehen in :where(), weil :where() KEINE Spezifitaet
   beitraegt. Sonst ist ".ch p" (0,1,1) staerker als jede Bauteil-Klasse wie
   ".ch-figcap" (0,1,0) und ueberschreibt deren margin und line-height. Genau
   das hatte vier Fehler verursacht: Bildunterschrift nicht zentriert, grosses
   Zitat mit falscher Zeilenhoehe, Absender ohne Abstand, Bildlink grau statt
   Akzent. Und ".ch a" hatte die weisse Schrift der Buttons ueberschrieben.
   Mit :where() gewinnt jede spaeter notierte Klassenregel von selbst. */
.ch *,
.ch *::before,
.ch *::after { box-sizing: border-box; }
.ch :where(img, video) { display: block; max-width: 100%; }
/* figure traegt im Browser-Standard "margin: 1em 40px". Dadurch waren die
   beiden Beleg-Figuren 40px eingeruckt und 80px schmaler als jeder andere
   Block der Seite (122/1036 statt 82/1116). Das war die eigentliche Ursache
   fuer "nicht mittig", nicht die Bildunterschrift. */
.ch :where(figure, blockquote, fieldset, dl) { margin: 0; }
.ch :where(a) { color: inherit; text-decoration: none; }
.ch :where(p) { margin: 0; line-height: var(--lh-body); }
.ch :where(h1, h2, h3, h4) { margin: 0; font-family: var(--font-display); color: var(--text); }
.ch :where(ul) { margin: 0; padding: 0; list-style: none; }

.ch-wrap {
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: clamp(16px, 4vw, 32px);
}

/* ---------- Typo-Skala ---------- */
.ch-eyebrow {
  font-size: var(--fs-sm);
  font-weight: 700;
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
  color: var(--accent-text);
  margin: 0;
}
.ch h1 {
  font-size: var(--fs-display);
  line-height: var(--lh-h1);
  letter-spacing: var(--ls-display);
  font-weight: 700;   /* 800 wirkte bei 56px als schwarzer Block; Airbnb und Linear setzen 700 */
  text-wrap: balance;
}
.ch h2 {
  font-size: var(--fs-h2);
  line-height: var(--lh-h2);
  letter-spacing: var(--ls-h2);
  font-weight: 800;
  text-wrap: balance;
}
.ch h3 {
  font-size: var(--fs-lg);
  line-height: var(--lh-head);
  letter-spacing: var(--ls-lg);
  font-weight: 700;
}
.ch-lead {
  font-size: var(--fs-lg);
  line-height: var(--lh-body);
  color: var(--text-muted);
  max-width: var(--measure);
}

/* ---------- Sektionsrhythmus ---------- */
.ch-section { padding-block: var(--sp-section); }
.ch-section--sunk {
  background: var(--surface-sunk);
  /* KEINE Linie: der Tonwertsprung #0a0b0d -> #121419 traegt die Kante allein.
     Mit Linie bekam auch jede Grenze ZWISCHEN zwei getoenten Sektionen einen
     Strich, wodurch der Wechsel wie ein Metronom wirkte statt zu gliedern.
     Die Seite hat jetzt vier Kapitel mit drei Wechseln statt neun. */
}
/* ---------- Sektionskopf: zweispaltig ----------
   Vorher lag der ganze Kopf auf --measure (496px = 42% der Spalte). Folge:
   8 von 9 H2 brachen mehrzeilig um, rechts blieb zehnmal leere Flaeche, und
   die Seite wirkte dadurch sowohl "zu weit entfernt" als auch "nicht ueber
   den ganzen Bildschirm". Jetzt steht die Ueberschrift links, der Lead
   rechts daneben: der Kopf fuellt die Spalte, die H2 bekommt mehr Breite und
   bricht seltener, die Seite wird kuerzer. Koepfe ohne Lead nutzen nur die
   linke Spalte. Unter 1000px wieder einspaltig. */
.ch-head {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  column-gap: var(--sp-16);
  align-items: start;
}
.ch-head > .ch-eyebrow { grid-column: 1; grid-row: 1; }
.ch-head > h2 { grid-column: 1; grid-row: 2; }
.ch-head > .ch-lead {
  grid-column: 2;
  grid-row: 2;
  margin-top: 6px;   /* setzt den Lead optisch auf die erste Schriftlinie der H2 */
  max-width: 34rem;
}

/* ---------- Der Abstands-Kern ----------
   Statt an jeder Stelle einen eigenen Wert zu setzen, beschreiben drei
   Geschwister-Regeln die immer gleichen Beziehungen. Das war die Ursache
   fuer "zu nah beieinander": Eyebrow, Ueberschrift und Lead standen mit
   10 und 14px zusammen, jetzt mit 8 und 24px. */
.ch-eyebrow + h1,
.ch-eyebrow + h2 { margin-top: var(--sp-2); }
.ch h1 + .ch-lead,
.ch h2 + .ch-lead,
.ch h2 + .ch-quote-big { margin-top: var(--sp-6); }
.ch-head + * { margin-top: var(--sp-head); }
.ch-stats + .ch-figure { margin-top: var(--sp-head); }
/* Person-Sektion: ersetzt die entfernten Inline-Abstaende. */
.ch-person-grid .ch-quote-big + .ch-lead { margin-top: var(--sp-6); }
.ch-person-grid .ch-lead + .ch-lead { margin-top: var(--sp-4); }

/* ---------- Buttons ---------- */
.ch-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  height: 52px;
  padding-inline: 26px;
  border-radius: var(--r-pill);
  font-family: var(--font-body);
  font-size: var(--fs-md);
  font-weight: 600;
  letter-spacing: var(--ls-md);
  cursor: pointer;
  border: 1px solid transparent;
  transition: background 0.2s var(--ease), border-color 0.2s var(--ease),
              transform 0.2s var(--ease), box-shadow 0.2s var(--ease);
}
.ch-btn--primary {
  background: var(--accent);
  color: #fff;
  box-shadow: var(--sh-sm);
}
.ch-btn--primary:hover { background: var(--accent-hover); transform: translateY(-1px); box-shadow: var(--sh-md); }
.ch-btn--ghost {
  background: var(--surface);
  color: var(--text);
  border-color: var(--border-control);
}
.ch-btn--ghost:hover { background: var(--surface-hover); transform: translateY(-1px); }
.ch-btn--sm { height: 44px; padding-inline: 20px; }
.ch a:focus-visible,
.ch button:focus-visible,
.ch summary:focus-visible,
.ch input:focus-visible,
.ch select:focus-visible,
.ch textarea:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  /* KEIN border-radius hier: das machte die Pill-Buttons bei Tastaturfokus
     eckig. Der Ring folgt der Form des Elements von selbst. */
}

.ch-ctarow { display: flex; flex-wrap: wrap; gap: var(--sp-3); align-items: center; }
.ch-assure {
  font-size: var(--fs-sm);
  color: var(--text-faint);
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2) var(--sp-4);
}
.ch-assure span { white-space: nowrap; }

/* ---------- Kopfzeile ---------- */
.ch-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(10, 11, 13, 0.82);
  -webkit-backdrop-filter: saturate(1.7) blur(16px);
  backdrop-filter: saturate(1.7) blur(16px);
  border-bottom: 1px solid var(--border);
}
.ch-header .ch-wrap {
  height: var(--nav-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-6);
}
.ch-brand {
  display: inline-flex;
  align-items: baseline;
  gap: var(--sp-2);
  font-family: var(--font-display);
  font-weight: 800;
  font-size: var(--fs-md);
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.ch-brand b { color: var(--accent-text); font-weight: 800; }
.ch-brand span { font-weight: 600; letter-spacing: 0.06em; color: var(--text-muted); text-transform: none; font-size: var(--fs-sm); }
.ch-nav { display: flex; align-items: center; gap: var(--sp-8); font-size: var(--fs-md); color: var(--text-muted); }
.ch-nav a:hover { color: var(--text); }

/* ---------- Hero ---------- */
.ch-hero { padding-top: var(--sp-hero); padding-bottom: var(--sp-hero-unten); }
.ch-hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: clamp(var(--sp-8), 5vw, var(--sp-16));
  align-items: center;
}
.ch-hero .ch-ctarow { margin-top: var(--sp-8); }
.ch-hero .ch-assure { margin-top: var(--sp-4); }

/* Bildstapel im Hero: Objektfoto gross, Portrait als Karte davor */
.ch-hero-media { position: relative; }
.ch-hero-media img.ch-shot {
  width: 100%;
  height: auto;            /* sonst gewinnt das HTML-height-Attribut gegen aspect-ratio */
  /* Das Original ist 2000x1333, also exakt 3:2. Mit 4/5 wurden 47 % des Bildes
     weggeschnitten und aus dem Wohnraum eine Tisch-Nahaufnahme. 3/2 zeigt den
     Raum und macht die Textspalte wieder hoehenbestimmend im Hero. */
  aspect-ratio: 3 / 2;
  object-fit: cover;
  border-radius: var(--r-lg);
  box-shadow: var(--sh-lg);
}
.ch-hero-badge {
  position: absolute;
  left: -14px;
  bottom: 26px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r);
  box-shadow: var(--sh-md);
  padding: var(--sp-3) var(--sp-4);
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  max-width: 82%;
}
.ch-hero-badge img {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  object-fit: cover;
  object-position: 50% 22%;
  flex: none;
}
.ch-hero-badge .t { font-size: var(--fs-md); font-weight: 700; letter-spacing: var(--ls-md); }
.ch-hero-badge .s { font-size: var(--fs-sm); color: var(--text-muted); margin-top: var(--sp-1); }

/* ---------- Beleg-Kennzahlen ---------- */
.ch-stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--sp-6);
}
.ch-stat {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r);
  padding: var(--sp-6);
  box-shadow: var(--sh-sm);
}
.ch-stat b {
  display: block;
  font-family: var(--font-display);
  font-size: var(--fs-num);
  font-weight: 800;
  letter-spacing: var(--ls-num);
  font-variant-numeric: tabular-nums;
  line-height: var(--lh-num);
  color: var(--text);
}
.ch-stat span { display: block; margin-top: var(--sp-3); font-size: var(--fs-md); color: var(--text-muted); line-height: var(--lh-body); }

/* ---------- Beleg-Bild (Airbnb-Profil) ---------- */
.ch-figure {
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--surface);
  box-shadow: var(--sh-lg);
}
.ch-figure img, .ch-figure video { width: 100%; height: auto; }
/* Beleg-Bild schmaler als die Video-Figur, damit es nicht dominanter wirkt */
.ch-pricenote.ch-pricenote--quelle { margin-top: 0; }

/* Einleitung ueber den Kategoriewerten */

.ch-figcap {
  margin: var(--sp-4) auto 0;
  max-width: var(--measure);
  font-size: var(--fs-md);
  color: var(--text-muted);
  text-align: center;
}
.ch-figlink {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  font-weight: 600;
  color: var(--accent-text);
}
.ch-figlink:hover { text-decoration: underline; }

/* ---------- Leistungen ---------- */
.ch-cards {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--sp-6);
}
.ch-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r);
  padding: var(--sp-6);
  box-shadow: var(--sh-sm);
  transition: border-color 0.2s var(--ease), transform 0.2s var(--ease), box-shadow 0.2s var(--ease);
}
.ch-card:hover { border-color: var(--border-strong); }
.ch-card p { margin-top: var(--sp-3); font-size: var(--fs-md); color: var(--text-muted); }
.ch-card .ch-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--accent-soft);
  color: var(--accent-text);
  font-size: var(--fs-sm);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  margin-bottom: var(--sp-4);
}

/* Dreispaltige Variante fuer Alltag und Hoheit */
.ch-cards--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }

/* Schlichte Zeilen ohne Kartenrahmen, fuer die Hoheits-Liste */
.ch-lines { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-8); }
.ch-line { border-top: 1px solid var(--border-strong); padding-top: var(--sp-4); }
.ch-line p { margin-top: var(--sp-3); font-size: var(--fs-md); color: var(--text-muted); }

/* Kategoriewerte unter dem Inserat-Video */

/* ---------- Ablauf ---------- */
.ch-steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--sp-6); }
.ch-step { position: relative; padding-top: var(--sp-6); border-top: 2px solid var(--border-strong); }
.ch-step:first-child { border-top-color: var(--accent); }
.ch-step .k {
  font-size: var(--fs-sm);
  font-weight: 700;
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
  color: var(--accent-text);
}
.ch-step h3 { margin-top: var(--sp-3); }
.ch-step p { margin-top: var(--sp-3); font-size: var(--fs-md); color: var(--text-muted); }

/* ---------- Galerie ---------- */
.ch-gallery { display: grid; grid-template-columns: repeat(6, 1fr); gap: var(--sp-4); }
.ch-gallery figure { border-radius: var(--r); overflow: hidden; box-shadow: var(--sh-md); background: var(--surface-sunk); }
.ch-gallery img { width: 100%; height: 100%; object-fit: cover; }
.ch-gallery .g-wide { grid-column: span 4; aspect-ratio: 16 / 10; }
.ch-gallery .g-tall { grid-column: span 2; aspect-ratio: 4 / 5; }
.ch-gallery .g-full { grid-column: span 6; aspect-ratio: 21 / 9; }

/* ---------- Person ---------- */
.ch-person-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  gap: clamp(var(--sp-8), 5vw, var(--sp-16));
  align-items: center;
}
.ch-person-grid img {
  width: 100%;
  height: auto;            /* siehe Hinweis beim Hero-Bild */
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: var(--r-lg);
  box-shadow: var(--sh-lg);
}
.ch-quote-big {
  font-family: var(--font-display);
  font-size: var(--fs-xl);
  line-height: var(--lh-head);
  letter-spacing: var(--ls-num);
  font-weight: 600;
  color: var(--text);
}
.ch-sign { margin-top: var(--sp-8); font-size: var(--fs-md); color: var(--text-muted); }
.ch-sign b { color: var(--text); font-weight: 700; }

/* ---------- Preis ---------- */
.ch-plans { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-6); }
.ch-plan {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  --plan-pad: clamp(var(--sp-6), 2.6vw, var(--sp-8));
  padding: var(--plan-pad);
  box-shadow: var(--sh-sm);
  display: flex;
  flex-direction: column;
  position: relative;
}
.ch-plan--feature { border-color: var(--accent); box-shadow: var(--sh-md); }
.ch-plan .tag {
  align-self: flex-start;
  font-size: var(--fs-sm);
  font-weight: 700;
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
  color: var(--accent-text);
  background: var(--accent-soft);
  padding: 6px 10px 6px 12px;
  border-radius: var(--r-pill);
  margin-bottom: var(--sp-3);
}
.ch-plan .rate {
  font-family: var(--font-display);
  font-size: var(--fs-num);
  font-weight: 800;
  letter-spacing: var(--ls-num);
  line-height: var(--lh-num);
  font-variant-numeric: tabular-nums;
}
.ch-plan .rate em { font-style: normal; font-size: var(--fs-lg); font-weight: 700; color: var(--text-muted); letter-spacing: var(--ls-lg); }
.ch-plan .of { margin-top: var(--sp-3); font-size: var(--fs-sm); color: var(--text-faint); }
.ch-plan h3 { margin-top: var(--sp-6); }
.ch-plan ul { margin-top: var(--sp-4); display: grid; gap: var(--sp-3); }
.ch-plan li { position: relative; padding-left: 22px; font-size: var(--fs-md); color: var(--text-muted); line-height: var(--lh-body); }
.ch-plan li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 7px;
  width: 11px;
  height: 6px;
  border-left: 2px solid var(--accent);
  border-bottom: 2px solid var(--accent);
  transform: rotate(-45deg);
}
/* Handlungspunkt je Tarifkarte. Vorher gab es zwischen Hero und Schlussband
   keinen einzigen Knopf, obwohl der Preisblock der Moment der Entscheidung ist.
   flex:1 an der Liste schiebt die Knoepfe auf eine gemeinsame Linie. */
/* Ein Handlungspunkt in der Mitte der Seite: zwischen Hero (6 %) und
   Preisblock (77 %) gab es 71 Prozentpunkte Scrollweg ohne Klickmoeglichkeit. */
.ch-steplink { margin-top: var(--sp-10); font-size: var(--fs-md); color: var(--text-muted); }
.ch-steplink a { color: var(--accent-text); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }

.ch-plan ul { flex: 1; }
.ch-plan-cta { margin-top: var(--sp-6); width: 100%; }

.ch-pricenote {
  margin-top: 0;
  font-size: var(--fs-sm);
  color: var(--text-faint);
}

/* Die zwei Fussnoten stehen nebeneinander: so fuellen sie die Spaltenbreite,
   ohne dass die Zeilen bei 13px unlesbar lang werden. */
.ch-notes {
  margin-top: var(--sp-12);
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sp-6) var(--sp-16);
  align-items: start;
}

.ch-quote figcaption b { color: var(--text); font-weight: 700; }

/* ---------- FAQ ---------- */
/* Volle Spaltenbreite: die 860px liessen rechts ein leeres Drittel stehen.
   Die Antworttexte bleiben ueber --measure lesbar kurz. */
.ch-faq { display: grid; gap: 0; }
.ch-faq details { border-bottom: 1px solid var(--border); }
.ch-faq summary {
  cursor: pointer;
  list-style: none;
  padding-block: var(--sp-4);     /* macht die ganze Zeile zur Tippflaeche (>= 44px) */
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--sp-6);
  font-family: var(--font-display);
  font-size: var(--fs-lg);
  font-weight: 700;
  letter-spacing: var(--ls-lg);
  color: var(--text);
}
.ch-faq summary::-webkit-details-marker { display: none; }
.ch-faq summary::after {
  content: "";
  flex: none;
  width: 10px;
  height: 10px;
  margin-top: var(--sp-2);
  border-right: 2px solid var(--text-muted);
  border-bottom: 2px solid var(--text-muted);
  transform: translateY(-3px) rotate(45deg);
  transition: transform 0.22s var(--ease);
}
.ch-faq details[open] summary::after { transform: translateY(3px) rotate(-135deg); }
.ch-faq details p { margin: 0 0 var(--sp-6); font-size: var(--fs-md); color: var(--text-muted); max-width: var(--measure); }

/* ---------- Schluss-CTA ---------- */
.ch-cta-band {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-lg);
  padding: clamp(var(--sp-8), 4.4vw, var(--sp-16));
  text-align: center;
}
.ch-cta-band .ch-lead { margin-inline: auto; }
.ch-cta-band .ch-ctarow { justify-content: center; margin-top: var(--sp-8); }
.ch-cta-band .ch-assure { justify-content: center; margin-top: var(--sp-4); }

/* ---------- Kontaktformular ---------- */
.ch-form { display: grid; gap: var(--sp-4); margin-top: var(--sp-8); text-align: left; max-width: 560px; margin-inline: auto; }
.ch-form label { font-size: var(--fs-sm); font-weight: 600; color: var(--text); display: block; margin-bottom: var(--sp-2); }
.ch-form input[type="text"],
.ch-form input[type="email"],
.ch-form select,
.ch-form textarea {
  width: 100%;
  font-family: var(--font-body);
  /* Genau 16px, keinen Pixel weniger: iOS-Safari zoomt beim Fokus in Felder
     mit kleinerer Schrift hinein und verschiebt dabei das ganze Layout. */
  font-size: var(--fs-control);
  color: var(--text);
  background: var(--bg);
  border: 1px solid var(--border-control);
  border-radius: var(--r-sm);
  padding: var(--sp-3) var(--sp-4);
  transition: border-color 0.18s var(--ease), box-shadow 0.18s var(--ease);
}
.ch-form textarea { min-height: 104px; resize: vertical; }
.ch-form input[type="text"]:focus,
.ch-form input[type="email"]:focus,
.ch-form select:focus,
.ch-form textarea:focus {
  /* Eigener Ring statt des globalen: die Kante allein erreicht 3:1 nicht.
     1px Vollton auf der Kante plus 4px weicher Ring aussen. */
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 1px var(--accent), 0 0 0 4px var(--accent-ring);
}
.ch-form .ch-check { display: flex; gap: var(--sp-3); align-items: flex-start; font-size: var(--fs-sm); font-weight: 400; margin-bottom: 0; color: var(--text-muted); line-height: var(--lh-body); }
.ch-form .ch-check input { margin-top: var(--sp-1); accent-color: var(--accent); flex: none; }
.ch-form .ch-check a { color: var(--accent-text); text-decoration: underline; }
.ch-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* Sprunglink: unsichtbar, bis er den Fokus bekommt */
.ch-skip {
  position: absolute;
  left: 12px;
  top: -100px;
  z-index: 100;
  background: var(--surface);
  border: 1px solid var(--border-strong);
  box-shadow: var(--sh-md);
  transition: top 0.18s var(--ease);
}
.ch-skip:focus,
.ch-skip:focus-visible { top: 12px; }

/* ---------- Fusszeile ---------- */
.ch-footer {
  background: var(--surface-sunk);
  border-top: 1px solid var(--border);
  padding-block: var(--sp-12);
  font-size: var(--fs-md);
  color: var(--text-muted);
}
.ch-footer .ch-wrap { display: flex; flex-wrap: wrap; gap: var(--sp-4) var(--sp-8); align-items: center; justify-content: space-between; }
.ch-footer nav { display: flex; flex-wrap: wrap; gap: var(--sp-4) var(--sp-6); }
.ch-footer a:hover { color: var(--text); text-decoration: underline; }

/* ---------- Reveal, sehr zurueckhaltend ---------- */
/* Verstecken nur, wenn co-hosting.js laeuft (setzt .ch-js am html-Element).
   Ohne JavaScript, bei blockiertem Skript oder reduzierter Bewegung bleibt
   alles sofort sichtbar. */
@media (prefers-reduced-motion: no-preference) {
  .ch-js .ch-reveal { opacity: 0; transform: translateY(var(--sp-4)); }
  .ch-js .ch-reveal.is-in {
    opacity: 1;
    transform: none;
    transition: opacity 0.55s var(--ease) var(--d, 0ms), transform 0.55s var(--ease) var(--d, 0ms);
  }
}

/* Beleg-Bilder auf kleinen Schirmen pruefbar machen.
   Auf 320px waere der Text im Screenshot 3px hoch, also unlesbar. Statt ihn
   zu verkleinern, darf die Figur seitlich geschoben werden: das Bild ragt
   sichtbar ueber die Kante und erklaert die Schiebbarkeit von selbst.
   overflow-x bleibt in der Figur, die Seite selbst laeuft nicht ueber. */
@media (max-width: 700px) {
  .ch-figure--pruefbar {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
  }
  .ch-figure--pruefbar img { min-width: 560px; }
  .ch-figure--pruefbar.ch-figure--breit img { min-width: 900px; }
}

/* ---------- Responsive ---------- */
/* Die Typo-Skala stuft an den Breakpoints, statt per clamp zu gleiten.
   So gibt es an keiner Breite Halb-Pixel und keine Hierarchie-Inversion. */
@media (max-width: 1000px) {
  .ch-head { grid-template-columns: 1fr; }
  .ch-head > .ch-lead { grid-column: 1; grid-row: 3; margin-top: var(--sp-6); max-width: var(--measure); }
  .ch { --fs-display: 44px; --fs-h2: 32px; --fs-num: 26px;
        --sp-section: 56px; --sp-hero: 48px; --sp-hero-unten: 32px; --sp-head: var(--sp-8); }
}
@media (max-width: 560px) {
  .ch { --fs-display: 34px; --fs-h2: 26px; --fs-num: 21px; --fs-xl: 21px;
        --sp-section: 44px; --sp-hero: 32px; --sp-hero-unten: 24px; --sp-head: var(--sp-6); }
}
@media (max-width: 360px) { .ch { --fs-display: 30px; } }

@media (max-width: 1000px) {
  .ch-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ch-cards,
  .ch-cards--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ch-lines { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ch-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ch-plans { grid-template-columns: 1fr; }
}
@media (max-width: 860px) {
  .ch-nav { display: none; }
  .ch-hero-grid { grid-template-columns: 1fr; }
  /* KEIN order:-1 mehr: mit dem Bild vor dem Text lag der Erstgespraech-Knopf
     auf einem 390x780-Telefon weit unter der Falz. Jetzt kommt zuerst die
     Aussage samt Knopf, das angeschnittene Bild signalisiert "es geht weiter". */
  .ch-hero-media img.ch-shot { aspect-ratio: 3 / 2; }
  .ch-hero-badge { left: 12px; right: 12px; bottom: -18px; max-width: none; }
  .ch-person-grid { grid-template-columns: 1fr; }
  .ch-person-grid img { aspect-ratio: 3 / 2; max-height: 460px; }
  .ch-gallery { grid-template-columns: repeat(2, 1fr); }
  .ch-gallery .g-wide,
  .ch-gallery .g-tall,
  .ch-gallery .g-half,
  .ch-gallery .g-full { grid-column: span 2; aspect-ratio: 3 / 2; }
}
@media (max-width: 560px) {
  /* minmax(0,1fr) statt 1fr: sonst kann die Spur nicht unter ihre
     Mindestbreite schrumpfen und die Seite laeuft bei 320px seitlich ueber. */
  .ch-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ch-cards,
  .ch-cards--3 { grid-template-columns: 1fr; }
  .ch-lines { grid-template-columns: 1fr; }
  .ch-notes { grid-template-columns: 1fr; }
  .ch-steps { grid-template-columns: 1fr; }
  .ch-gallery { grid-template-columns: 1fr; }
  .ch-gallery .g-wide,
  .ch-gallery .g-tall,
  .ch-gallery .g-half,
  .ch-gallery .g-full { grid-column: span 1; }
  /* Nur die Buttons im Fliesstext auf volle Breite. Der Kopfzeilen-Button
     bleibt kompakt, sonst sprengt er die Zeile. */
  .ch-ctarow .ch-btn,
  .ch-form .ch-btn { width: 100%; }
  /* Kopfzeile schlanker: Zusatz weg, engere Laufweite, kompakterer Button */
  .ch-brand span { display: none; }
  .ch-brand { font-size: var(--fs-sm); letter-spacing: var(--ls-caps); }
  .ch-header .ch-btn--sm { padding-inline: var(--sp-4); }
  .ch-hero-badge { position: static; margin-top: var(--sp-4); max-width: none; }
}

/* Auf Desktop schwebt das Empfehlungs-Abzeichen in der Kartenecke, damit die
   drei Preise auf einer Linie stehen. Vorher sass es im Fluss und schob den
   ganzen Inhalt der Empfehlungs-Karte um 38px nach unten. */
@media (min-width: 1001px) {
  /* Das Zusatz-Polster bekommen ALLE drei Karten, sonst sitzt die
     Empfehlungs-Karte 40px tiefer als ihre Nachbarn und die Preise fluchten
     nicht mehr. Das Abzeichen schwebt nur in der Karte, die eines hat. */
  .ch-plan { padding-top: calc(var(--plan-pad) + var(--sp-10)); }
  .ch-plan .tag {
    position: absolute;
    top: var(--plan-pad);
    left: var(--plan-pad);
    margin-bottom: 0;
  }
}