/* ==========================================================================
   Praxis Barbara Spahni — Atemtherapie Bern
   Phase 1, plain Multi-File. Leitreferenz: soulspace-tnc.webflow.io
   Aus der Referenz uebernommen: Container 1172px, Sektionsabstand 120px,
   Pill-Buttons mit separatem Pfeilkreis, gestrichelte Hairlines,
   quadratische Icon-Kacheln, randabfallende Wortmarken,
   heller Akzentton fuer die Pfeilkreise.
   Feedback Barbara 2026-10-06: keine Versal-Headlines mehr (schwer lesbar),
   Schriftgroessen auf feste Stufen reduziert (Tokens --fs-* in :root).
   ========================================================================== */

/* --- Schriften, selbst gehostet (Google Fonts, latin + latin-ext) ---------- */
/* latin-ext */
@font-face {
  font-family: 'Inter Tight';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(assets/fonts/inter-tight-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Inter Tight';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(assets/fonts/inter-tight-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'Inter Tight';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(assets/fonts/inter-tight-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Inter Tight';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(assets/fonts/inter-tight-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'Inter Tight';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(assets/fonts/inter-tight-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Inter Tight';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(assets/fonts/inter-tight-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(assets/fonts/plus-jakarta-sans-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(assets/fonts/plus-jakarta-sans-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(assets/fonts/plus-jakarta-sans-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(assets/fonts/plus-jakarta-sans-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(assets/fonts/plus-jakarta-sans-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(assets/fonts/plus-jakarta-sans-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(assets/fonts/plus-jakarta-sans-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(assets/fonts/plus-jakarta-sans-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url(assets/fonts/plus-jakarta-sans-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url(assets/fonts/plus-jakarta-sans-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  /* Marke #003a94 aus der Bestandsseite, helles Blau daraus abgeleitet.
     --akzent steht an der Stelle, an der die Referenz ihr Cyan einsetzt. */
  --blau: #003a94;
  --blau-tief: #002a6b;
  --akzent: #79b4f2;
  --akzent-weich: #a7cef7;
  --blau-hell: #e8f0fc;
  --blau-zart: #f3f7fd;
  --tinte: #10192b;
  --tinte-weich: #5a6478;
  --tinte-matt: #7c8697;
  --weiss: #ffffff;
  --nebel: #f4f6fa;
  --nebel-tief: #eef2f8;
  --nebel-verlauf: linear-gradient(158deg, #fbfcfe 0%, #eff3fa 48%, #e6ecf6 100%);
  --linie: #e0e4ec;

  --font-display: "Plus Jakarta Sans", "Segoe UI", Arial, sans-serif;
  --font-body: "Inter Tight", "Segoe UI", Arial, sans-serif;

  /* Schriftstufen: eine fuer alle Sektionsueberschriften, eine fuer alle
     Kartentitel, Fliesstext erbt vom body, dazu Kleintext und Labels. */
  --fs-h2: clamp(1.75rem, 3.4vw, 2.75rem);
  --fs-h3: 1.25rem;
  --fs-klein: 14px;
  --fs-label: 13px;

  --container: 1172px;
  --abstand-sektion: clamp(72px, 9vw, 120px);
  --radius-pill: 96px;
  --radius-gross: 28px;
  --radius: 18px;
  --radius-klein: 12px;
  --strich: 1px dashed var(--linie);
}

/* --- Reset, in :where() damit die Spezifitaet 0 bleibt -------------------- */
*, *::before, *::after { box-sizing: border-box; }

:where(body, h1, h2, h3, h4, p, figure, blockquote, ul, ol, dl, dd) { margin: 0; }
:where(ul, ol) { padding: 0; list-style: none; }
:where(a) { color: inherit; text-decoration: none; }
:where(img, svg) { display: block; max-width: 100%; }
:where(button, input, select, textarea) { font: inherit; color: inherit; }

html { -webkit-text-size-adjust: 100%; }
/* Kein globales scroll-behavior:smooth — das bricht Programm-Scroll und Reveal. */

body {
  margin: 0;
  background: var(--weiss);
  color: var(--tinte);
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.65;
  overflow-wrap: break-word;
  hyphens: auto;
}

/* Headlines in normaler Schreibweise, mit etwas Luft (Feedback Barbara) */
h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1.18;
  letter-spacing: -0.01em;
  overflow-wrap: break-word;
  hyphens: auto;
  /* trennt nur lange Komposita, nicht kurze Woerter wie EINEN */
  hyphenate-limit-chars: 18 8 5;
  text-wrap: balance;
}
h2 { font-size: var(--fs-h2); }

.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: 16px;
}

.skip-link {
  position: absolute; left: 16px; top: -60px; z-index: 100;
  background: var(--blau); color: var(--weiss);
  padding: 10px 18px; border-radius: var(--radius-klein);
  transition: top .2s ease;
}
.skip-link:focus-visible { top: 16px; }

:focus-visible { outline: 3px solid var(--blau); outline-offset: 3px; border-radius: 4px; }

/* --- Knopf: eine Pille mit Pfeilkreis darin (Entscheidung Jonas 2026-09-21)
   Die Referenz stellt den Kreis neben die Pille. Hier sitzt er innerhalb,
   der Text schiebt sich beim Hover nach und der Pfeil kippt nach rechts oben. -- */
.knopf {
  display: inline-flex; align-items: center; gap: 14px;
  height: 58px; padding: 0 7px 0 28px;
  border: 0; border-radius: var(--radius-pill); cursor: pointer;
  background: var(--blau); color: var(--weiss);
  font-family: var(--font-body); font-weight: 500;
  transition: background .3s ease;
}
.knopf-text {
  position: relative; display: block; overflow: hidden;
  height: 58px; padding: 0; background: none; border-radius: 0;
}
.knopf-text > span {
  display: block; height: 58px; line-height: 58px; white-space: nowrap;
  transition: transform .45s cubic-bezier(.16,.7,.2,1);
}
.knopf-kreis {
  display: grid; place-items: center; flex: none;
  width: 44px; height: 44px; border-radius: 50%;
  background: var(--weiss); color: var(--blau);
  transition: background .3s ease, color .3s ease, transform .45s cubic-bezier(.16,.7,.2,1);
}
.knopf-kreis svg { width: 19px; height: 19px; }
.knopf:hover { background: var(--blau-tief); }
.knopf:hover .knopf-text > span { transform: translateY(-58px); }
.knopf:hover .knopf-kreis { background: var(--blau-hell); transform: rotate(-45deg); }

.knopf-weiss { background: var(--weiss); color: var(--blau); }
.knopf-weiss .knopf-kreis { background: var(--blau); color: var(--weiss); }
.knopf-weiss:hover { background: var(--blau-hell); }
.knopf-weiss:hover .knopf-kreis { background: var(--blau-tief); }

.knopf-voll { width: 100%; justify-content: space-between; }
/* Klicks immer auf dem Link selbst, nie auf den inneren Spans: Barbaras Tag-Manager-Container
   zaehlt die Terminbuchung ueber "Klick auf alle Elemente" + Adresse des angeklickten Elements.
   Ein Klick auf den Text-Span haette keine Adresse und die Conversion fiele aus (getestet 2026-10-13). */
.knopf *, .knopf-leise > span { pointer-events: none; }

/* --- Icon-Kachel: quadratisch mit Radius, nicht rund --------------------- */
.kachel {
  display: grid; place-items: center; flex: none;
  width: 52px; height: 52px; border-radius: 14px;
  background: var(--blau); border: 1px solid var(--blau);
  color: var(--weiss); box-shadow: 0 6px 18px rgba(0,58,148,.18);
}
.kachel svg { width: 22px; height: 22px; }
.kachel.klein { width: 42px; height: 42px; border-radius: 11px; }
.kachel.klein svg { width: 18px; height: 18px; }

/* --- Bildrahmen ---------------------------------------------------------- */
.bildrahmen { overflow: hidden; border-radius: var(--radius-gross); }
.bildrahmen img { width: 100%; height: 100%; object-fit: cover; transition: transform .55s cubic-bezier(.16,.7,.2,1); }
.bildrahmen:hover img { transform: scale(1.04); }

/* --- Kopf ---------------------------------------------------------------- */
.kopf {
  position: sticky; top: 0; z-index: 50;
  background: rgba(255,255,255,.9);
  backdrop-filter: saturate(150%) blur(10px);
  border-bottom: 1px solid var(--linie);
}
.kopf-innen { display: flex; align-items: center; gap: 20px; min-height: 78px; }
.kopf-marke { display: flex; align-items: center; gap: 10px; margin-right: auto; }
.kopf-marke img { width: 42px; height: 42px; }
.kopf-marke-text { display: flex; flex-direction: column; line-height: 1.2; }
.kopf-marke-text strong { font-family: var(--font-display); font-size: 16px; letter-spacing: -0.02em; }
.kopf-marke-text span { font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--tinte-weich); }

/* Nav als Pill-Gruppe mit aktivem Pill, wie in der Referenz */
.kopf-nav { display: flex; align-items: center; gap: 4px; padding: 5px; border-radius: var(--radius-pill); background: var(--blau-zart); }
.kopf-nav a {
  padding: 9px 16px; border-radius: var(--radius-pill);
  font-size: 15px; color: var(--tinte-weich);
  transition: background .25s ease, color .25s ease;
}
.kopf-nav a:hover { color: var(--blau); background: var(--blau-hell); }
.kopf-nav a.ist-aktiv { background: var(--blau); color: var(--weiss); font-weight: 500; }

.kopf-aktion { display: flex; align-items: center; gap: 12px; }
.kopf-aktion .knopf { height: 50px; padding: 0 5px 0 22px; gap: 12px; border: 1px solid var(--linie); font-size: 15px; }
.kopf-aktion .knopf-text, .kopf-aktion .knopf-text > span { height: 48px; line-height: 48px; }
.kopf-aktion .knopf:hover .knopf-text > span { transform: translateY(-48px); }
.kopf-aktion .knopf-kreis { width: 38px; height: 38px; }
.kopf-aktion .knopf-kreis svg { width: 17px; height: 17px; }
.kopf-schalter {
  display: none; width: 46px; height: 46px; border-radius: 14px;
  border: 1px solid var(--linie); background: var(--weiss);
  padding: 0; place-items: center; gap: 5px;
}
.kopf-schalter span { display: block; width: 18px; height: 2px; background: var(--blau); transition: transform .3s ease, opacity .2s ease; }
.kopf-schalter[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.kopf-schalter[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.kopf-schalter[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* --- Hero ---------------------------------------------------------------- */
.hero { position: relative; isolation: isolate; min-height: min(88vh, 820px); display: flex; flex-direction: column; justify-content: flex-start; overflow: hidden; }
.hero-bild {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: 68% 40%; z-index: -2;
}
.hero-schleier {
  position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(105deg, rgba(6,17,38,.78) 0%, rgba(6,17,38,.52) 42%, rgba(6,17,38,.18) 70%, rgba(6,17,38,.34) 100%);
}
.hero-innen { padding-block: clamp(56px, 8vw, 104px) 0; }
.hero-oben { max-width: 760px; color: var(--weiss); }
.hero-marke {
  font-family: var(--font-body); font-weight: 600; font-size: 14px;
  letter-spacing: .22em; text-transform: uppercase; margin-bottom: 20px;
  color: var(--weiss);
}
.hero-aussage {
  font-family: var(--font-display); font-weight: 700;
  hyphens: manual; text-wrap: balance;
  font-size: clamp(2rem, 4.6vw, 3.6rem); line-height: 1.12; letter-spacing: -0.015em;
  margin-bottom: 32px;
}
/* randabfallende Wortmarke wie in der Referenz */
.hero-wortmarke {
  /* Feedback Barbara: hier vollstaendig sichtbar, im Fuss bewusst angeschnitten, zum Vergleich */
  margin: auto 0 0; padding: 0 clamp(8px, 1.4vw, 20px) clamp(18px, 2.4vw, 34px); text-align: center;
  font-family: var(--font-display); font-weight: 800; text-transform: uppercase;
  font-size: clamp(2.8rem, 11.2vw, 11rem); line-height: .88; letter-spacing: -0.045em;
  color: var(--weiss); white-space: nowrap;
}
.hero-wortmarke span { color: rgba(255,255,255,.38); }

/* --- Trust --------------------------------------------------------------- */
.trust { padding-block: 44px; border-bottom: var(--strich); }
.trust-innen { display: grid; grid-template-columns: auto 1fr; gap: 44px; align-items: center; }
.trust-siegel { display: flex; align-items: center; padding-right: 44px; border-right: var(--strich); }
.trust-siegel img { width: 116px; height: auto; }
.trust-siegel p { font-size: var(--fs-klein); line-height: 1.45; color: var(--tinte-weich); }
.trust-liste { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; }
.trust-liste li { display: flex; align-items: center; gap: 16px; color: var(--tinte-weich); }

/* --- Abschnittsköpfe ----------------------------------------------------- */
.eyebrow {
  font-size: var(--fs-label); font-weight: 500; letter-spacing: .16em; text-transform: uppercase;
  color: var(--blau); margin-bottom: 14px;
}
.split-kopf { max-width: 860px; margin-bottom: 56px; }
.split-kopf h2 { margin-bottom: 20px; }
.split-kopf .knopf { margin-top: 8px; }
.aussage-gross { color: var(--tinte); }

.mitte-kopf { max-width: 760px; margin: 0 auto 56px; text-align: center; }
.angebot .mitte-kopf { max-width: 980px; }
.mitte-kopf h2 { margin-bottom: 20px; }
.lead { color: var(--tinte-weich); margin-bottom: 16px; }
.lead:last-child { margin-bottom: 0; }

/* --- Vorteile ------------------------------------------------------------ */
.vorteile { padding-block: var(--abstand-sektion); background: var(--nebel-verlauf); }
.vorteile-innen {
  display: grid; grid-template-columns: 0.9fr 1.1fr;
  column-gap: 56px; row-gap: 36px; align-items: start;
}
.vorteile-kopf .eyebrow { margin-bottom: 14px; }
.vorteile-kopf h2 { margin: 0; }
.vorteile-lead { align-self: center; margin: 0; }
.vorteile-medien { display: flex; flex-direction: column; align-items: flex-start; gap: 28px; }
.vorteile-bild { width: 100%; }
.vorteile-bild img { aspect-ratio: 5 / 4; }
.merkmal-gitter { display: grid; gap: 0; }
.merkmal { padding: 26px 0; border-bottom: var(--strich); }
.merkmal:first-child { padding-top: 0; }
.merkmal:last-child { border-bottom: 0; padding-bottom: 0; }
.merkmal h3 { font-size: var(--fs-h3); margin: 18px 0 8px; }
.merkmal p { color: var(--tinte-weich); }

.anlaesse .anlass,
.angebot .angebot-karte,
.ablauf .schritt,
.stimmen .stimme { transition: transform .5s cubic-bezier(.16,.7,.2,1), box-shadow .5s cubic-bezier(.16,.7,.2,1), border-color .4s ease; }

/* --- Anlässe: Kachel, Text, Pfeil in einer Zeile ------------------------- */
.anlaesse { padding-block: var(--abstand-sektion); background: var(--weiss); }
.anlass-liste { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.anlass {
  display: block; padding: 30px;
  background: var(--weiss); border: 1px solid var(--linie); border-radius: var(--radius-gross);
  transition: transform .5s cubic-bezier(.16,.7,.2,1), box-shadow .5s cubic-bezier(.16,.7,.2,1), border-color .4s ease;
}
.anlass:hover { transform: translateY(-4px); box-shadow: 0 20px 44px rgba(16,25,43,.09); border-color: var(--akzent); }
.anlass .kachel { transition: background .4s cubic-bezier(.16,.7,.2,1), border-color .4s cubic-bezier(.16,.7,.2,1); }
.anlass:hover .kachel { background: var(--blau-tief); border-color: var(--blau-tief); }
.anlass-text h3 { font-size: var(--fs-h3); margin: 20px 0 8px; }
.anlass-text p { color: var(--tinte-weich); }

/* --- Angebot ------------------------------------------------------------- */
.angebot { padding-block: var(--abstand-sektion); background: var(--nebel-verlauf); }
.angebot-gitter { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.angebot-karte {
  background: var(--weiss); border: 1px solid var(--linie); border-radius: var(--radius-gross);
  padding: 32px; display: flex; flex-direction: column;
  transition: transform .5s cubic-bezier(.16,.7,.2,1), box-shadow .5s cubic-bezier(.16,.7,.2,1);
}
/* Die drei kleinen Karten teilen sich die Zeilen des Rasters, damit Pills und
   Bild in allen drei Karten auf derselben Hoehe beginnen. */
@supports (grid-template-rows: subgrid) {
  .angebot-gitter { grid-template-rows: auto; }
  .angebot-karte:not(.angebot-karte-gross) {
    display: grid; grid-row: span 5; grid-template-rows: subgrid; row-gap: 0;
  }
  .angebot-karte:not(.angebot-karte-gross) h3 { margin: 20px 0 12px; align-self: start; }
  .angebot-karte:not(.angebot-karte-gross) p { margin-bottom: 0; align-self: start; }
  .angebot-karte:not(.angebot-karte-gross) .pills { align-self: start; }
  .angebot-karte:not(.angebot-karte-gross) .angebot-bild-klein { align-self: end; }
}
.angebot-karte:hover { transform: translateY(-4px); box-shadow: 0 22px 48px rgba(16,25,43,.1); }
.angebot-karte h3 { font-size: var(--fs-h3); margin: 20px 0 12px; }
.angebot-karte p { color: var(--tinte-weich); margin-bottom: 12px; }
.angebot-karte-gross { grid-column: span 3; display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: stretch; padding: 40px; }
.angebot-karte-gross .angebot-inhalt { display: flex; flex-direction: column; }
.angebot-bild { align-self: stretch; }
.angebot-bild img { height: 100%; min-height: 320px; }
.pills { display: flex; flex-wrap: wrap; align-content: start; gap: 8px; margin-top: 20px; }
.pills span {
  padding: 7px 14px; border-radius: var(--radius-pill);
  background: var(--blau-zart); border: 1px solid var(--linie);
  font-size: var(--fs-klein); color: var(--tinte-weich); white-space: nowrap;
}
.angebot-karte-gross .pills { margin-bottom: 4px; }
.angebot-bild-klein { margin-top: 24px; }
.angebot-bild-klein img { aspect-ratio: 5 / 4; }

/* --- Ablauf -------------------------------------------------------------- */
.ablauf { padding-block: var(--abstand-sektion) calc(var(--abstand-sektion) + 9vw); position: relative; overflow: hidden; }
.ablauf::before {
  content: "Atemtherapie";
  position: absolute; left: 0; right: 0; bottom: clamp(16px, 2.4vw, 34px); z-index: 0;
  text-align: center;
  font-family: var(--font-display); font-weight: 800; text-transform: uppercase;
  font-size: 14.2vw; line-height: .8; letter-spacing: -0.05em;
  color: rgba(0, 58, 148, .055); white-space: nowrap;
  pointer-events: none; user-select: none;
}
.ablauf-innen { position: relative; z-index: 1; }
.ablauf-innen { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: 48px; align-items: start; }
.ablauf-text { display: flex; flex-direction: column; align-items: flex-start; }
.ablauf-text h2 { margin-bottom: 18px; }
.ablauf-bild { margin-top: 36px; margin-bottom: 32px; width: 100%; }
.ablauf-bild img { aspect-ratio: 5 / 4; }
.ablauf-karten { display: grid; gap: 20px; }
.schritt {
  background: var(--weiss); border: 1px solid var(--linie); border-radius: var(--radius-gross);
  padding: 34px; transition: transform .5s cubic-bezier(.16,.7,.2,1), box-shadow .5s cubic-bezier(.16,.7,.2,1);
}
.schritt:hover { transform: translateY(-4px); box-shadow: 0 20px 44px rgba(16,25,43,.09); }
.schritt-num {
  display: inline-grid; place-items: center; min-width: 58px; height: 34px;
  border-radius: var(--radius-pill); background: var(--blau); color: var(--weiss);
  font-family: var(--font-display); font-weight: 700; font-size: 14px;
  letter-spacing: .06em; margin-bottom: 22px;
}
.schritt h3 { font-size: var(--fs-h3); margin-bottom: 12px; }
.schritt p { color: var(--tinte-weich); margin-bottom: 8px; }
.schritt p:last-child { margin-bottom: 0; }

/* --- Kundenstimmen ------------------------------------------------------- */
.stimmen { padding-block: var(--abstand-sektion); background: var(--nebel-verlauf); }
.stimmen-reihe { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.stimme {
  background: var(--weiss); border: 1px solid var(--linie); border-radius: var(--radius-gross);
  padding: 32px; display: flex; flex-direction: column; gap: 18px;
}
.sterne { display: flex; gap: 3px; color: var(--blau); }
.sterne svg { width: 18px; height: 18px; }
.stimme-titel { font-size: var(--fs-h3); }
.stimme blockquote p { color: var(--tinte-weich); }
.stimme-mehr { margin-top: 10px; }
.stimme-mehr summary {
  cursor: pointer; list-style: none; font-size: var(--fs-klein); font-weight: 500;
  color: var(--blau); display: inline-flex; align-items: center; gap: 6px;
  min-height: 44px; padding-right: 8px;
}
.stimme-mehr summary::-webkit-details-marker { display: none; }
.stimme-mehr summary::after { content: ""; width: 7px; height: 7px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg) translateY(-2px); transition: transform .4s cubic-bezier(.16,.7,.2,1); }
.stimme-mehr[open] summary::after { transform: rotate(-135deg) translateY(-2px); }
.stimme-mehr[open] summary { margin-bottom: 10px; }
.stimme figcaption { display: flex; align-items: center; gap: 14px; margin-top: auto; padding-top: 22px; border-top: var(--strich); }
.stimme-avatar {
  display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%;
  background: var(--blau-hell); color: var(--blau);
}
.stimme-avatar svg { width: 17px; height: 17px; }
.stimme-wer { display: flex; flex-direction: column; line-height: 1.3; }
.stimme-name { font-weight: 600; }
.stimme-rolle { font-size: var(--fs-klein); color: var(--tinte-weich); }
.stimmen-aktion { display: flex; justify-content: center; margin-top: 40px; }

/* --- Über mich ----------------------------------------------------------- */
.ueber { padding-block: var(--abstand-sektion); }
.ueber-bento {
  display: grid; grid-template-columns: 1.25fr 1fr 1fr; gap: 20px;
  grid-template-areas:
    "text text foto"
    "quer zahl1 zahl2";
}
.ueber-text { grid-area: text; }
.ueber-bild-hoch { grid-area: foto; }
.ueber-bild-hoch img { width: 100%; height: 100%; object-fit: cover; object-position: center 22%; }
.ueber-bild-quer { grid-area: quer; }
.ueber-bild-quer img { width: 100%; height: 100%; object-fit: cover; min-height: 240px; }
.zahl-jahre { grid-area: zahl1; }
.zahl-afs { grid-area: zahl2; }
.ueber-text h2 { margin-bottom: 22px; }
.ueber-text p { color: var(--tinte-weich); margin-bottom: 18px; }
.ueber-text p:last-child { margin-bottom: 0; }
.zahl { background: var(--blau-hell); border-radius: var(--radius); padding: 28px; }
/* Kachel-Zahl und Kachel-Titel sind Absaetze, keine Ueberschriften (Heading-Disziplin, 08-seo-check.md).
   Schrift deshalb explizit setzen, ein p erbt die Display-Schrift nicht. */
.zahl .zahl-wert { font-family: var(--font-display); font-weight: 700; font-size: 2.4rem; line-height: 1.18; color: var(--blau); margin-bottom: 8px; letter-spacing: -0.03em; }
.zahl .zahl-titel { font-family: var(--font-display); font-weight: 700; font-size: 1rem; line-height: 1.18; color: var(--tinte); margin-bottom: 8px; }
.zahl-logo { width: 104px; height: auto; margin-bottom: 14px; }
.zahl p { color: var(--tinte-weich); margin: 0; }

/* --- Google-Badge im Kopf der Kundenstimmen ------------------------------
   Sichtbar: Kopf links, Badge rechts. Mit hidden am Badge: Kopf wieder zentriert. */
.stimmen-kopf { margin-bottom: 56px; }
.stimmen-kopf .mitte-kopf { margin-bottom: 0; }
.stimmen-kopf:has(.google-badge:not([hidden])) {
  display: grid; grid-template-columns: 1fr auto; gap: 48px; align-items: end;
}
.stimmen-kopf:has(.google-badge:not([hidden])) .mitte-kopf { text-align: left; margin: 0; max-width: 700px; }
.google-badge {
  width: 300px; padding: 22px 24px;
  background: var(--weiss); border: 1px solid var(--linie); border-radius: var(--radius-gross);
  box-shadow: 0 14px 34px rgba(16,25,43,.06);
}
.google-badge[hidden] { display: none; }
.google-badge { display: block; color: inherit; transition: transform .45s cubic-bezier(.16,.7,.2,1), box-shadow .45s cubic-bezier(.16,.7,.2,1), border-color .3s ease; }
.google-badge:hover { transform: translateY(-3px); border-color: var(--akzent); box-shadow: 0 20px 44px rgba(16,25,43,.1); }
.google-badge-oben { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.google-badge-logo { display: grid; place-items: center; flex: none; width: 44px; height: 44px; border-radius: 12px; background: var(--blau-zart); }
.google-badge-titel { font-family: var(--font-display); font-weight: 700; }
.google-badge-wert { display: flex; align-items: center; gap: 10px; }
.google-badge-wert strong { font-family: var(--font-display); font-size: 2rem; line-height: 1; color: var(--tinte); }
.google-badge-wert .sterne { color: #f4b400; }
.google-badge-anzahl { font-size: var(--fs-klein); color: var(--tinte-weich); margin: 6px 0 0; }

/* --- Textlink mit Pfeil --------------------------------------------------- */
.artikel-link {
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px;
  font-weight: 500; color: var(--blau); text-decoration: underline; text-underline-offset: 3px;
}
.artikel-link span { display: grid; place-items: center; transition: transform .45s cubic-bezier(.16,.7,.2,1); }
.artikel-link:hover span { transform: rotate(-45deg); }

/* --- Listen mit Haken (Presse, Atemzeit) ---------------------------------- */
.haken-liste { display: grid; gap: 10px; margin-bottom: 24px; }
.haken-liste li { display: flex; align-items: flex-start; gap: 12px; color: var(--tinte-weich); line-height: 1.5; }
.haken-liste li > span { display: grid; place-items: center; flex: none; width: 22px; height: 22px; margin-top: 2px; border-radius: 50%; background: var(--blau-hell); color: var(--blau); }
.haken-liste svg { width: 13px; height: 13px; }

/* --- Bekannt aus (ruhig, auf Weiss) --------------------------------------- */
.presse { padding-block: var(--abstand-sektion); border-top: var(--strich); }
.presse-reihe { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.presse-karte {
  display: flex; flex-direction: column; padding: 20px;
  background: var(--weiss); border: 1px solid var(--linie); border-radius: var(--radius-gross);
  transition: transform .5s cubic-bezier(.16,.7,.2,1), box-shadow .5s cubic-bezier(.16,.7,.2,1);
}
.presse-karte:hover { transform: translateY(-4px); box-shadow: 0 20px 44px rgba(16,25,43,.09); }
.presse-bild { display: block; border: 1px solid var(--linie); border-radius: var(--radius); }
.presse-bild img { aspect-ratio: 16 / 10; object-position: top center; }
.presse-text { display: flex; flex-direction: column; flex: 1; padding: 24px 12px 8px; }
.presse-logo { width: auto; height: 24px; align-self: flex-start; margin-bottom: 12px; }
.artikel-quelle { font-size: var(--fs-klein); color: var(--tinte-weich); margin-bottom: 14px; }
.presse-text h3 { font-size: var(--fs-h3); margin-bottom: 16px; }
.knopf-leise {
  display: inline-flex; align-items: center; gap: 10px; align-self: flex-start; margin-top: auto;
  min-height: 46px; padding: 0 20px; border: 1px solid var(--linie); border-radius: var(--radius-pill);
  font-weight: 500; color: var(--blau); background: var(--weiss);
  transition: border-color .3s ease, background .3s ease;
}
.knopf-leise span { display: grid; place-items: center; transition: transform .45s cubic-bezier(.16,.7,.2,1); }
.knopf-leise:hover { border-color: var(--blau); background: var(--blau-zart); }
.knopf-leise:hover span { transform: rotate(-45deg); }
/* gefuellte Variante in derselben Groesse, fuer die wichtigere von zwei Aktionen */
.knopf-leise-voll { background: var(--blau); border-color: var(--blau); color: var(--weiss); }
.knopf-leise-voll:hover { background: var(--blau-tief); border-color: var(--blau-tief); }

/* --- Slider ab 4 Eintraegen (Entscheidung Jonas 2026-10-09) ---------------
   Schaltet sich per script.js nur ein, wenn eine Reihe mit data-slider-ab genug Karten hat.
   Waagrechtes Scrollen mit Einrasten, Pfeilknoepfe darunter, keine Bibliothek. */
.presse-reihe.ist-slider, .atemzeit-reihe.ist-slider {
  grid-template-columns: none; grid-auto-flow: column; overflow-x: auto;
  scroll-snap-type: x mandatory; scroll-behavior: smooth; scrollbar-width: none;
  padding: 8px 2px 12px; margin: -8px -2px 0;
}
.ist-slider::-webkit-scrollbar { display: none; }
.ist-slider > * { scroll-snap-align: start; }
.presse-reihe.ist-slider { grid-auto-columns: calc((100% - 24px) / 2); }
.atemzeit-reihe.ist-slider { grid-auto-columns: calc((100% - 48px) / 3); }
.slider-nav { display: flex; justify-content: flex-end; gap: 10px; margin-top: 20px; }
.slider-nav button {
  display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%;
  border: 1px solid var(--linie); background: var(--weiss); color: var(--blau); cursor: pointer;
  transition: background .3s ease, border-color .3s ease, opacity .3s ease;
}
.slider-nav button:hover { background: var(--blau-zart); border-color: var(--blau); }
.slider-nav button:disabled { opacity: .35; cursor: default; }
.slider-nav button svg { width: 19px; height: 19px; }
.slider-nav .slider-zurueck svg { transform: rotate(180deg); }

/* --- Atemzeit (abgesetzt, blau ueber die volle Breite) -------------------- */
/* Feedback Barbara 2026-10-09: helles Markenblau statt kraeftig, wirkte am PC zu wuchtig */
.atemzeit { padding-block: var(--abstand-sektion); background: var(--blau-hell); }
.atemzeit-reihe { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; align-items: stretch; }
.atemzeit-karte {
  display: flex; flex-direction: column; padding: 20px; color: var(--tinte);
  background: var(--weiss); border-radius: var(--radius-gross);
  transition: transform .5s cubic-bezier(.16,.7,.2,1), box-shadow .5s cubic-bezier(.16,.7,.2,1);
}
.atemzeit-karte:hover { transform: translateY(-4px); box-shadow: 0 22px 48px rgba(16,25,43,.1); }
.atemzeit-cover { width: 100%; height: auto; aspect-ratio: 3 / 4; object-fit: cover; border-radius: var(--radius); background: var(--blau-zart); border: 1px solid var(--linie); }
.atemzeit-text { display: flex; flex-direction: column; flex: 1; padding: 22px 8px 6px; }
.atemzeit-tag {
  align-self: flex-start; margin-bottom: 12px; padding: 5px 12px; border-radius: var(--radius-pill);
  background: var(--blau-hell); color: var(--blau); font-size: var(--fs-klein); font-weight: 500;
}
.atemzeit-text h3 { font-size: var(--fs-h3); margin-bottom: 16px; }
.atemzeit-text > p { color: var(--tinte-weich); margin-bottom: 16px; }
.atemzeit-unterzeile { font-weight: 600; color: var(--tinte) !important; }
.atemzeit-liste { margin: 0 0 12px; padding-left: 20px; list-style: disc; color: var(--tinte-weich); }
.atemzeit-liste li { margin-bottom: 4px; }
.atemzeit-aktionen { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: auto; padding-top: 8px; }
.atemzeit-aktionen .knopf-leise { margin-top: 0; cursor: pointer; font: inherit; font-weight: 500; }
.atemzeit-knopf { align-self: flex-start; }

/* Popup mit dem ganzen Text (natives <dialog>: Esc, Fokus und Bedienbarkeit kommen vom Browser) */
.atemzeit-dialog {
  width: min(760px, calc(100% - 32px)); max-height: min(88vh, 900px); padding: clamp(24px, 4vw, 44px);
  border: 0; border-radius: var(--radius-gross); background: var(--weiss); color: var(--tinte);
  box-shadow: 0 30px 80px rgba(16,25,43,.25); overflow-y: auto; overscroll-behavior: contain;
}
.atemzeit-dialog::backdrop { background: rgba(16,25,43,.55); backdrop-filter: blur(2px); }
html:has(.atemzeit-dialog[open]) { overflow: hidden; }
.atemzeit-dialog-zu {
  position: sticky; top: 0; float: right; margin: -8px -8px 0 12px; z-index: 1;
  display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%;
  border: 1px solid var(--linie); background: var(--weiss); cursor: pointer;
}
.atemzeit-dialog-zu span, .atemzeit-dialog-zu span::after {
  display: block; width: 16px; height: 2px; background: var(--blau); transform: rotate(45deg);
}
.atemzeit-dialog-zu span::after { content: ""; transform: rotate(90deg); }
.atemzeit-dialog-zu:hover { background: var(--blau-zart); }
.atemzeit-dialog-kopf { display: grid; grid-template-columns: 96px 1fr; gap: 20px; align-items: center; margin-bottom: 24px; padding-bottom: 24px; border-bottom: var(--strich); }
.atemzeit-dialog-cover { width: 96px; height: auto; border-radius: 8px; border: 1px solid var(--linie); }
.atemzeit-dialog-kopf h3 { font-size: var(--fs-h3); }
.atemzeit-dialog-text { margin-bottom: 28px; }
.atemzeit-dialog-text p { color: var(--tinte-weich); margin-bottom: 14px; }
.atemzeit-dialog-text h4 { font-size: 1rem; margin: 22px 0 8px; }
.atemzeit-dialog-text a { color: var(--blau); text-decoration: underline; text-underline-offset: 3px; }

/* --- FAQ ----------------------------------------------------------------- */
.fragen { padding-block: var(--abstand-sektion); background: var(--nebel-verlauf); }
.fragen-liste { border-top: var(--strich); }
.frage { border-bottom: var(--strich); }
.frage summary {
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  padding: 26px 12px; cursor: pointer; font-family: var(--font-display); font-weight: 700;
  font-size: var(--fs-h3); list-style: none;
}
.frage summary::-webkit-details-marker { display: none; }
.frage-kreis {
  display: grid; place-items: center; flex: none;
  width: 40px; height: 40px; border-radius: 50%;
  background: var(--weiss); border: 1px solid var(--linie); color: var(--blau);
  transition: transform .4s cubic-bezier(.16,.7,.2,1), background .35s ease, border-color .35s ease;
}
.frage-kreis svg { width: 18px; height: 18px; }
.frage[open] .frage-kreis { transform: rotate(45deg); background: var(--akzent); border-color: var(--akzent); }
.frage-antwort { padding: 0 12px 26px; color: var(--tinte-weich); max-width: 860px; }
.fragen-schluss { margin-top: 30px; color: var(--tinte-weich); }
.fragen-schluss a { color: var(--blau); text-decoration: underline; text-underline-offset: 3px; display: inline-block; min-height: 44px; line-height: 44px; }

/* --- Standorte ----------------------------------------------------------- */
.standorte { padding-block: var(--abstand-sektion); }
.standort-gitter { display: grid; grid-template-columns: 1fr 1fr; gap: 44px; align-items: start; }
.standort-text p { color: var(--tinte-weich); margin-bottom: 16px; }
.standort-karte-gross {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 0;
  margin-top: 44px; background: var(--weiss);
  border: 1px solid var(--linie); border-radius: var(--radius-gross); overflow: hidden;
}
.standort-feld { padding: 28px 26px; }

.standort-label { font-size: var(--fs-label); letter-spacing: .14em; text-transform: uppercase; color: var(--blau); margin-bottom: 10px; }
.standort-wert { font-family: var(--font-display); font-weight: 700; font-size: .98rem; line-height: 1.45; color: var(--tinte); }
.standort-wert a { word-break: break-word; }
.standort-wert a:hover { color: var(--blau); text-decoration: underline; text-underline-offset: 3px; }
.standort-text { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; margin-bottom: 32px; }
.standort-text p { color: var(--tinte-weich); margin: 0; }
.karten-paar { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.bento-karte {
  display: flex; flex-direction: column; min-height: 320px;
  overflow: hidden; border: 1px solid var(--linie); border-radius: var(--radius-gross);
  background: var(--weiss);
}
/* Karte erst nach Einwilligung (Klaro "karte"). Rahmen per flex/min-height, nie mit aspect-ratio
   kombinieren (Pitfall CLAUDE.md: erzwingt Mindestbreite auf 375px). */
.karte-rahmen { position: relative; flex: 1; min-height: 240px; background: var(--blau-zart); }
.karte-rahmen iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block; filter: saturate(.92); }
.karte-consent {
  position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 12px; padding: 20px; text-align: center; background: var(--blau-zart);
}
.karte-consent p { max-width: 36ch; margin: 0; font-size: var(--fs-klein); color: var(--tinte-weich); }
.karte-consent .knopf-leise { margin-top: 0; cursor: pointer; font: inherit; font-weight: 500; }
.karte-consent a { font-size: var(--fs-klein); color: var(--blau); text-decoration: underline; text-underline-offset: 3px; }
.karte-consent.versteckt { display: none; }
.bento-fuss {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  padding: 16px 20px; border-top: 1px solid var(--linie);
}
.bento-fuss span { display: flex; flex-direction: column; font-size: var(--fs-klein); color: var(--tinte-weich); line-height: 1.45; }
.bento-fuss strong { font-family: var(--font-display); font-size: var(--fs-klein); color: var(--tinte); }
.bento-fuss a { flex: none; display: inline-flex; align-items: center; min-height: 44px; padding-inline: 4px; font-size: var(--fs-klein); font-weight: 500; color: var(--blau); text-decoration: underline; text-underline-offset: 3px; }

/* --- Kontakt ------------------------------------------------------------- */
.kontakt { padding-block: var(--abstand-sektion); background: var(--nebel-verlauf); }
.kontakt-innen { display: grid; grid-template-columns: 0.85fr 1.15fr; gap: 48px; align-items: start; }
.kontakt-bild img { aspect-ratio: 5 / 4; }
.kontakt-person-text { margin-top: 26px; }
.kontakt-person-text h3 { font-size: var(--fs-h3); margin-bottom: 10px; }
.kontakt-person-text p { color: var(--tinte-weich); }
.kontakt-punkte { display: grid; gap: 12px; }
.kontakt-punkte li { display: flex; align-items: flex-start; gap: 12px; color: var(--tinte-weich); line-height: 1.5; }
.kontakt-punkte li > span { display: grid; place-items: center; flex: none; width: 22px; height: 22px; margin-top: 2px; border-radius: 50%; background: var(--blau-hell); color: var(--blau); }
.kontakt-punkte svg { width: 13px; height: 13px; }
.kontakt-afs { width: 116px; height: auto; margin-top: 22px; }
.kontakt-formular { background: var(--weiss); border: 1px solid var(--linie); border-radius: var(--radius-gross); padding: clamp(26px, 3vw, 44px); }
.kontakt-formular h2 { margin-bottom: 10px; }
.kontakt-formular .lead { margin-bottom: 30px; hyphens: manual; }
.feld-paar { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.feld { display: flex; flex-direction: column; gap: 7px; margin-bottom: 18px; }
.feld label { font-size: var(--fs-klein); font-weight: 500; }
.feld input, .feld select, .feld textarea {
  border: 1px solid var(--linie); border-radius: var(--radius-klein);
  padding: 13px 15px; background: var(--weiss); font-size: 16px;
  transition: border-color .2s ease;
}
.feld input:focus, .feld select:focus, .feld textarea:focus { border-color: var(--blau); }
.feld textarea { resize: vertical; min-height: 120px; }
.feld-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.feld-check { flex-direction: row; align-items: flex-start; gap: 12px; margin-bottom: 26px; }
.feld-check input { width: 24px; height: 24px; flex: none; margin-top: 0; }
.feld-check label { font-size: var(--fs-klein); font-weight: 400; color: var(--tinte-weich); line-height: 1.5; }
.feld-check a { color: var(--blau); text-decoration: underline; text-underline-offset: 3px; }
.formular-hinweis { margin-top: 14px; color: var(--blau); min-height: 1.5em; }
.kontakt-direkt { margin-bottom: 30px; }
.kontakt-oder {
  display: flex; align-items: center; gap: 16px;
  margin-top: 26px; font-size: var(--fs-klein); color: var(--tinte-weich);
}
.kontakt-oder::before, .kontakt-oder::after { content: ""; height: 1px; flex: 1; background: var(--linie); }

/* --- Fuss ---------------------------------------------------------------- */
.fuss { background: var(--blau); color: var(--weiss); padding-top: clamp(56px, 7vw, 92px); overflow: hidden; }
.fuss-oben { display: flex; justify-content: center; flex-wrap: wrap; gap: 0; padding-bottom: 52px; border-bottom: 1px dashed rgba(255,255,255,.28); }
/* Feedback Jonas: Telefon und Mail gleich gross, treffen sich in der Mitte */
.fuss-kontakt { text-align: right; padding-right: clamp(20px, 3vw, 44px); border-right: 1px dashed rgba(255,255,255,.28); }
.fuss-mail { padding-left: clamp(20px, 3vw, 44px); }
.fuss-label { font-size: var(--fs-label); letter-spacing: .16em; text-transform: uppercase; color: var(--akzent); margin-bottom: 14px; }
.fuss-tel { font-family: var(--font-display); font-weight: 700; font-size: clamp(1.4rem, 2.7vw, 2.25rem); letter-spacing: -0.02em; }
.fuss-mail a { font-family: var(--font-display); font-weight: 700; font-size: clamp(1.4rem, 2.7vw, 2.25rem); letter-spacing: -0.02em; word-break: break-word; }
.fuss-mail a:hover, .fuss-tel:hover { text-decoration: underline; text-underline-offset: 6px; }
.fuss-mitte { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; padding-block: 52px; }
.fuss-spalte { display: flex; flex-direction: column; gap: 10px; }
.fuss-titel { font-size: var(--fs-label); letter-spacing: .16em; text-transform: uppercase; color: var(--akzent); margin-bottom: 6px; }
.fuss-spalte p, .fuss-spalte a, .fuss-spalte span { color: rgba(255,255,255,.8); }
.fuss-spalte a:hover { color: var(--weiss); }
.fuss-copy { padding-bottom: 36px; color: rgba(255,255,255,.75); font-size: var(--fs-klein); }
/* Tippziele im Fuss: Telefonnummer und Mailadresse sind die wichtigsten Links
   der Seite auf dem Handy und muessen mindestens 48px hoch sein. */
.fuss-tel, .fuss-mail a { display: inline-flex; align-items: center; min-height: 48px; }
.fuss-copy a { display: inline-block; min-height: 44px; line-height: 44px; text-decoration: underline; text-underline-offset: 3px; }
.fuss-wortmarke {
  /* Feedback Barbara 2026-10-09: ueberall vollstaendig, nicht mehr angeschnitten */
  margin: 0; padding: 0 clamp(8px, 1.4vw, 20px) clamp(18px, 2.4vw, 34px);
  font-family: var(--font-display); font-weight: 800; text-transform: uppercase;
  font-size: clamp(2rem, 9.4vw, 9rem); line-height: .88; letter-spacing: -0.045em;
  color: var(--weiss); white-space: nowrap; text-align: center;
}
.fuss-wortmarke span { color: rgba(255,255,255,.3); }

/* --- Reveal on Scroll: ohne JS bleibt alles sichtbar ---------------------- */
.js-reveal :where(.reveal) { opacity: 0; transform: translateY(42px); }
.js-reveal :where(.reveal.is-in) {
  opacity: 1; transform: none;
  transition: opacity 1.05s cubic-bezier(.16,.7,.2,1), transform 1.05s cubic-bezier(.16,.7,.2,1);
  transition-delay: var(--reveal-delay, 0ms);
}
.js-reveal :where(.kopf.reveal) { transform: translateY(-16px); }
.js-reveal :where(.kopf.reveal.is-in) { transition-duration: .6s; }

@media (prefers-reduced-motion: reduce) {
  .js-reveal :where(.reveal) { opacity: 1; transform: none; }
  * { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* --- Rechtstexte (Impressum, Datenschutz) -------------------------------- */
.rechtstext { padding-block: clamp(48px, 6vw, 80px); }
.rechtstext .container { max-width: 820px; }
.rechtstext h1 { font-size: clamp(1.9rem, 4vw, 2.75rem); margin-bottom: 32px; }
.rechtstext h2 { font-size: clamp(1.1rem, 2vw, 1.4rem); margin: 40px 0 14px; }
.rechtstext p { color: var(--tinte-weich); margin-bottom: 14px; }
.rechtstext p + p:not(:has(a)) { margin-top: -8px; }
.rechtstext a { color: var(--blau); text-decoration: underline; text-underline-offset: 3px; word-break: break-word; }
.rechtstext-liste { margin: 0 0 18px; padding-left: 22px; list-style: disc; color: var(--tinte-weich); }
.rechtstext-liste li { margin-bottom: 6px; }
/* Rechtstexte kommen seit 2026-10-15 aus dem CMS-Editor: auch Unterueberschriften und nummerierte Listen */
.rechtstext h3 { font-size: clamp(1rem, 1.6vw, 1.15rem); margin: 28px 0 10px; }
ol.rechtstext-liste { list-style: decimal; }

/* --- Responsive ---------------------------------------------------------- */
@media (max-width: 1100px) {
  .kopf-nav { gap: 2px; padding: 4px; }
  .kopf-nav a { padding: 8px 12px; font-size: 14px; }
}

@media (max-width: 1024px) {
  .split-kopf { margin-bottom: 40px; }
  .vorteile-innen, .ablauf-innen, .kontakt-innen { grid-template-columns: 1fr; gap: 32px; }
  .vorteile-lead { align-self: start; }
  .standort-karte-gross { grid-template-columns: 1fr 1fr; }
  .ueber-bild { position: static; }
  .angebot-gitter { grid-template-columns: 1fr 1fr; }
  .angebot-karte-gross { grid-column: span 2; }
  .stimmen-reihe { grid-template-columns: 1fr 1fr; }
  .anlass-liste { grid-template-columns: 1fr 1fr; }
  .atemzeit-reihe { grid-template-columns: 1fr 1fr; }
  .atemzeit-reihe.ist-slider { grid-auto-columns: calc((100% - 24px) / 2); }
  .stimmen-kopf:has(.google-badge:not([hidden])) { grid-template-columns: 1fr; gap: 28px; align-items: start; }
  .ueber-bento { grid-template-columns: 1fr 1fr; grid-template-areas: "text text" "foto quer" "zahl1 zahl2"; }
  .ueber-bild-hoch img, .ueber-bild-quer img { aspect-ratio: 4 / 5; min-height: 0; }
  .trust-liste { grid-template-columns: 1fr; gap: 18px; }
  .trust-innen { grid-template-columns: 1fr; gap: 28px; }
  .trust-siegel { flex-direction: row; align-items: center; max-width: none; padding-right: 0; padding-bottom: 24px; border-right: 0; border-bottom: var(--strich); }
  .trust-siegel p { max-width: 320px; }
}

@media (max-width: 900px) {
  .kopf-nav {
    display: none;
    position: absolute; top: 100%; left: 0; right: 0;
    flex-direction: column; align-items: stretch; gap: 0;
    background: var(--weiss); border-bottom: 1px solid var(--linie);
    border-radius: 0; padding: 8px 16px 20px;
    box-shadow: 0 18px 40px rgba(16,25,43,.1);
  }
  .kopf-nav.mobil-offen { display: flex; }
  .kopf-nav a { padding: 14px 8px; border-bottom: var(--strich); border-radius: var(--radius-klein); font-size: 16px; color: var(--tinte); }
  .kopf-nav a:last-child { border-bottom: 0; }
  .kopf-nav a.ist-aktiv { background: var(--blau); color: var(--weiss); }
  .kopf-innen { position: relative; }
  .kopf-schalter { display: grid; }
  .kopf-aktion .knopf { display: none; }
}

@media (max-width: 720px) {
  body { font-size: 16px; }
  /* Tippziele: mindestens 44px hoch, auch bei reinen Textlinks */
  .fuss-spalte a, .kontakt-punkte a, .feld-check a { display: inline-block; min-height: 44px; line-height: 44px; }
  .fuss-spalte { gap: 2px; }
  .hero { min-height: 0; }
  .hero-innen { padding-block: 44px 28px; }
  .hero-oben { padding-top: 16px; }
  .hero-wortmarke { margin-top: 40px; }
  .angebot-gitter, .stimmen-reihe, .ueber-zahlen, .feld-paar, .anlass-liste, .standort-karte-gross { grid-template-columns: 1fr; }
  .standort-text, .karten-paar { grid-template-columns: 1fr; }
  .presse-reihe, .atemzeit-reihe { grid-template-columns: 1fr; }
  .presse-reihe.ist-slider, .atemzeit-reihe.ist-slider { grid-template-columns: none; grid-auto-columns: 86%; gap: 16px; }
  .google-badge { width: 100%; }
  .atemzeit-dialog { width: calc(100% - 20px); max-height: 92vh; padding: 22px; }
  .atemzeit-dialog-kopf { grid-template-columns: 72px 1fr; gap: 14px; }
  .atemzeit-dialog-cover { width: 72px; }
  .atemzeit-cover { max-width: 240px; }
  .ueber-bento { grid-template-columns: 1fr; grid-template-areas: "text" "foto" "quer" "zahl1" "zahl2"; }
  .ueber-bild-hoch img, .ueber-bild-quer img { aspect-ratio: 4 / 5; }
  .bento-karte { min-height: 300px; }
  .angebot-karte-gross { grid-column: span 1; grid-template-columns: 1fr; gap: 24px; padding: 26px; }
  .angebot-bild img { min-height: 0; aspect-ratio: 16 / 10; }
  .vorteile-bild img, .ueber-bild img, .kontakt-bild img { aspect-ratio: 3 / 4; }
  .fuss-oben, .fuss-mitte { grid-template-columns: 1fr; }
  .fuss-oben { flex-direction: column; align-items: center; gap: 28px; text-align: center; }
  .fuss-kontakt { text-align: center; padding-right: 0; border-right: 0; }
  .fuss-mail { padding-left: 0; }
  .anlass { padding: 24px; }
  .kachel { width: 44px; height: 44px; border-radius: 12px; }
  .kachel svg { width: 20px; height: 20px; }
  .angebot-karte, .schritt, .stimme { padding: 26px; }
  .frage summary { padding: 20px 4px; }
  :root { --fs-h3: 1.125rem; }
  .frage-antwort { padding: 0 4px 20px; }
}

/* --- Cookiebox (Klaro, selbst gehostet) in der Markenfarbe --------------------
   klaro.js injiziert sein Stylesheet zur Laufzeit ans Ende des head; die Akzentfarbe
   greift deshalb zuverlaessig nur ueber die Variable --green1 (gemessen bei Hans Mannsberger).
   #003a94 auf Weiss liegt weit ueber 4,5:1 (WCAG AA). */
.klaro, #klaro { --green1: #003a94; --font-family: "Inter Tight", "Segoe UI", Arial, sans-serif; }
.klaro .cm-btn.cm-btn-success,
.klaro .cm-btn.cm-btn-accept-all,
.klaro .cm-btn.cm-btn-accept { background-color: #003a94 !important; color: #fff !important; }
.klaro .cm-btn.cm-btn-success:hover,
.klaro .cm-btn.cm-btn-accept:hover { background-color: #002a6b !important; }
.klaro .cm-btn.cm-btn-danger,
.klaro .cn-decline { background-color: #4a5468 !important; color: #fff !important; }
.klaro .cookie-modal a, .klaro .cookie-notice a, .klaro a.cm-link, .klaro .cm-link { color: #003a94; }
.klaro .cm-powered-by { display: none !important; }
@media (min-width: 1025px) { .klaro .cookie-notice:not(.cookie-modal-notice) { max-width: 860px !important; left: 50% !important; right: auto !important; transform: translateX(-50%); } }
/* Hinweis unten grösser und mit Titel (Entscheidung Jonas 2026-10-15): mehr Luft, lesbarere Schrift,
   beide Knoepfe gleich gross, damit Ablehnen genauso einfach bleibt wie Zustimmen. */
.klaro .cookie-notice:not(.cookie-modal-notice) { border-radius: 16px !important; box-shadow: 0 12px 40px rgba(10, 30, 70, .22) !important; }
@media (min-width: 1025px) { .klaro .cookie-notice:not(.cookie-modal-notice) { bottom: 24px !important; } }
.klaro .cookie-notice:not(.cookie-modal-notice) .cn-body { padding: 24px 28px 22px !important; }
.klaro .cookie-notice:not(.cookie-modal-notice) #id-cookie-title { font-size: 19px !important; font-weight: 700; color: #0f1f3d; margin: 0 0 8px !important; }
.klaro .cookie-notice:not(.cookie-modal-notice) .cn-body p { font-size: 15.5px !important; line-height: 1.55 !important; margin: 0 0 16px !important; }
.klaro .cookie-notice:not(.cookie-modal-notice) .cn-ok { gap: 12px !important; flex-wrap: wrap !important; align-items: center !important; }
.klaro .cookie-notice:not(.cookie-modal-notice) .cn-ok .cm-btn { font-size: 15px !important; padding: 11px 20px !important; border-radius: 96px !important; min-width: 150px; margin: 0 !important; }
.klaro .cookie-notice:not(.cookie-modal-notice) .cn-buttons { display: flex !important; gap: 12px !important; }
@media (max-width: 640px) {
  .klaro .cookie-notice:not(.cookie-modal-notice) { border-radius: 16px 16px 0 0 !important; }
  .klaro .cookie-notice:not(.cookie-modal-notice) .cn-body { padding: 20px 18px 18px !important; }
  .klaro .cookie-notice:not(.cookie-modal-notice) .cn-body p { font-size: 15px !important; }
  .klaro .cookie-notice:not(.cookie-modal-notice) .cn-buttons { width: 100% !important; order: 1; }
  .klaro .cookie-notice:not(.cookie-modal-notice) .cn-buttons .cm-btn { flex: 1 1 0 !important; min-width: 0 !important; padding: 12px 10px !important; }
  .klaro .cookie-notice:not(.cookie-modal-notice) .cn-learn-more { order: 2; width: 100% !important; text-align: center; margin: 2px 0 0 !important; }
}

/* Schloss unten links: jederzeitiger Widerruf (Agentur-Standard) */
#klaro-widerruf {
  position: fixed; left: 16px; bottom: 16px; z-index: 120;
  width: 44px; height: 44px; display: grid; place-items: center;
  background: var(--blau); color: #fff; border: 0; border-radius: 50%;
  cursor: pointer; opacity: .85; transition: opacity .2s, transform .2s;
  box-shadow: 0 6px 18px rgba(0,58,148,.25);
}
#klaro-widerruf:hover { opacity: 1; transform: translateY(-2px); }