@charset "UTF-8";
/* ==========================================================================
   base.css — Fundament „Atem & Bewegung"
   Physiotherapie Hör, Weiherhammer
   --------------------------------------------------------------------------
   Reihenfolge der Abschnitte:
     1. Schriften (@font-face, self-hosted)
     2. Design-Tokens (:root)
     3. Reset / Normalisierung
     4. Grundtypografie
     5. Fokus & Tastaturbedienung
     6. Hilfsklassen (Raster, Abstände, Flächen, Dekor)
     7. Keyframes
     8. Reveal-System (Einblenden beim Scrollen)
     9. Reduzierte Bewegung
    10. Druckstile
   --------------------------------------------------------------------------
   Diese Datei enthält KEINE Komponentenstile (components.css) und KEINE
   Stile für Kopf, Menü oder Fuß (layout.css). Kein !important außerhalb
   des reduced-motion-Blocks.
   ========================================================================== */


/* ==========================================================================
   1. SCHRIFTEN — self-hosted, keine Fremdquelle
   Pfade sind relativ zu dieser Datei, damit Hosting im Unterordner
   (z. B. /rc1.0/) ohne Anpassung funktioniert.
   ========================================================================== */

/* ---- Manrope: die einzige Schrift der Seite. Überschriften, Zahlen und
        Zitate nutzen dieselbe Familie in kräftigeren Schnitten — bewusst
        keine Serifenschrift. ---- */
@font-face{
  font-family:'Manrope';
  src:url('../fonts/manrope/Manrope-ExtraLight.woff2') format('woff2');
  font-weight:200;
  font-style:normal;
  font-display:swap;
}
@font-face{
  font-family:'Manrope';
  src:url('../fonts/manrope/Manrope-Light.woff2') format('woff2');
  font-weight:300;
  font-style:normal;
  font-display:swap;
}
@font-face{
  font-family:'Manrope';
  src:url('../fonts/manrope/Manrope-Regular.woff2') format('woff2');
  font-weight:400;
  font-style:normal;
  font-display:swap;
}
@font-face{
  font-family:'Manrope';
  src:url('../fonts/manrope/Manrope-Medium.woff2') format('woff2');
  font-weight:500;
  font-style:normal;
  font-display:swap;
}
@font-face{
  font-family:'Manrope';
  src:url('../fonts/manrope/Manrope-SemiBold.woff2') format('woff2');
  font-weight:600;
  font-style:normal;
  font-display:swap;
}
@font-face{
  font-family:'Manrope';
  src:url('../fonts/manrope/Manrope-Bold.woff2') format('woff2');
  font-weight:700;
  font-style:normal;
  font-display:swap;
}
@font-face{
  font-family:'Manrope';
  src:url('../fonts/manrope/Manrope-ExtraBold.woff2') format('woff2');
  font-weight:800;
  font-style:normal;
  font-display:swap;
}


/* ==========================================================================
   2. DESIGN-TOKENS — verbindlich, nicht verändern
   Dark Mode ist bewusst nicht umgesetzt: Die Seite ist eine warme
   Lichtmarke. Kontrast- und Invertier-Modi liefert der Compliance-Guardian.
   ========================================================================== */
:root{
  color-scheme:light;

  /* ---- Ziegelrot: die Farbe der Praxis, direkt aus dem Logo (#9F2911).
          Stufe 700 IST die Markenfarbe, alles andere ist daraus abgeleitet. ---- */
  --clay-950:#360F07; --clay-900:#56170B; --clay-800:#77200E; --clay-700:#9F2911;
  --clay-600:#C03316; --clay-500:#DC3E1E; --clay-400:#E0664D; --clay-300:#E49686;
  --clay-200:#EFC2B9; --clay-100:#F8E2DD; --clay-50:#FCF2F0;

  /* ---- Warmes Grau: der ruhige Gegenpol. Bewusst KEIN Grün — die
          bestehende Praxisgestaltung kennt nur Ziegelrot, Weiß und Grau.
          Die dunklen Stufen tragen den Fußbereich. ---- */
  --stone-900:#1E1C1A; --stone-800:#2F2B28; --stone-700:#423C38; --stone-600:#58514B;
  --stone-500:#736A64; --stone-400:#948B84; --stone-300:#B3ACA8; --stone-200:#D0CBC8;
  --stone-100:#E5E3E1; --stone-50:#F3F2F1;

  /* ---- Neutrale, an die Grautöne der Bestandsseite angelehnt
          (#333 / #444 / #777 / #ddd), nur eine Spur erwärmt ---- */
  --ink:#33302E; --ink-soft:#4E4946; --ink-mute:#7B746F; --ink-faint:#A8A29F;
  --sand:#FCFAF9; --sand-2:#FBF8F6; --sand-3:#F5F0ED; --line:#DBD8D6;
  --line-soft:#EEEDEC; --paper:#FFFFFF;

  /* ---- Akzent & Signal ---- */
  --honey:#C08A3E; --ok:#3E7A58; --ok-bg:#E8F2EC;
  --warn:#A9761C; --warn-bg:#FBF0DC; --err:#A8382A; --err-bg:#FBEAE7;

  /* ---- Semantisch. --brand ist die Logofarbe selbst. ---- */
  --bg:var(--sand); --fg:var(--ink); --brand:var(--clay-700);
  --brand-ink:var(--clay-700);          /* Ziegelrot auf Weiß: 7,8:1, klar über AA */
  --brand-soft:var(--clay-100);
  --focus:var(--clay-700);

  /* ---- Logo ---- */
  --logoBadge:var(--clay-700); --logoLine:var(--paper);
  --logoWord:var(--clay-700);  --logoText:#3F3F3F;

  /* ---- Typografie ---- */
  --font-display:'Manrope','Segoe UI',system-ui,-apple-system,sans-serif;
  --font-sans:'Manrope','Segoe UI',system-ui,-apple-system,sans-serif;
  --fs-2xs:.75rem; --fs-xs:.8125rem; --fs-sm:.9375rem; --fs-base:1.0625rem;
  --fs-md:1.1875rem; --fs-lg:1.375rem;
  --fs-h4:clamp(1.15rem,.9rem + .7vw,1.4rem);
  --fs-h3:clamp(1.4rem,1.05rem + 1.1vw,1.85rem);
  --fs-h2:clamp(1.7rem,1.2rem + 1.6vw,2.5rem);
  --fs-h1:clamp(2rem,1.3rem + 2.2vw,3.1rem);
  --fs-hero:clamp(2.1rem,1.3rem + 2.4vw,3.35rem);
  --lh-tight:1.1; --lh-snug:1.28; --lh-normal:1.65; --lh-loose:1.8;
  --ls-tight:-.022em; --ls-wide:.08em; --ls-wider:.16em;

  /* ---- Raster & Abstand ---- */
  --wrap:1240px; --wrap-narrow:780px; --wrap-wide:1440px;
  --gutter:clamp(1.25rem,5vw,3rem);
  --s1:.25rem; --s2:.5rem; --s3:.75rem; --s4:1rem; --s5:1.5rem; --s6:2rem;
  --s7:3rem; --s8:4rem; --s9:6rem; --s10:8rem;
  --section-y:clamp(4rem,9vw,8rem);

  /* ---- Radien & Formen ---- */
  --r-xs:8px; --r-sm:14px; --r-md:22px; --r-lg:32px; --r-xl:44px; --r-2xl:64px; --r-pill:999px;
  --blob-a:58% 42% 47% 53%/46% 39% 61% 54%;
  --blob-b:44% 56% 62% 38%/54% 47% 53% 46%;
  --blob-c:63% 37% 38% 62%/41% 58% 42% 59%;

  /* ---- Schatten: warm getönt, nie neutralgrau ---- */
  --sh-xs:0 1px 2px rgba(54,15,7,.05);
  --sh-sm:0 2px 8px rgba(54,15,7,.06),0 1px 2px rgba(54,15,7,.04);
  --sh-md:0 8px 24px rgba(54,15,7,.08),0 2px 6px rgba(54,15,7,.05);
  --sh-lg:0 20px 48px rgba(54,15,7,.10),0 6px 14px rgba(54,15,7,.06);
  --sh-xl:0 36px 80px rgba(54,15,7,.14),0 12px 26px rgba(54,15,7,.07);
  --sh-glow:0 12px 36px rgba(177,76,51,.28);

  /* ---- Bewegung ---- */
  --ease-out:cubic-bezier(.22,.8,.24,1);
  --ease-soft:cubic-bezier(.4,0,.2,1);
  --ease-back:cubic-bezier(.34,1.42,.5,1);
  --t-fast:.18s; --t-base:.32s; --t-slow:.6s; --t-slower:1s;

  --z-base:1; --z-sticky:100; --z-fab:600; --z-header:800; --z-mega:900; --z-modal:1000;
}


/* ==========================================================================
   3. RESET / NORMALISIERUNG — modern und knapp
   ========================================================================== */
*,
*::before,
*::after{
  box-sizing:border-box;
}

html{
  -webkit-text-size-adjust:100%;
  text-size-adjust:100%;
  scroll-behavior:smooth;
  /* Kopfleiste ist fixiert — Sprungziele dürfen nicht darunter verschwinden. */
  scroll-padding-top:calc(clamp(68px,8vw,88px) + var(--s5));
  -moz-tab-size:2;
  tab-size:2;
}

body,
h1,h2,h3,h4,h5,h6,
p,
figure,
blockquote,
dl,dd,
pre{
  margin:0;
}

ul,ol{
  margin:0;
}

/* Listen, die reine Struktur sind, tragen role="list" und keine Punkte. */
ul[role='list'],
ol[role='list']{
  list-style:none;
  padding:0;
}

img,
svg,
video,
canvas,
picture,
iframe{
  display:block;
  max-width:100%;
}

img,
video{
  height:auto;
}

img{
  /* Bilder tragen width/height im Markup (CLS) — hier nur die weiche Skalierung.
     Kursiv: Fehlt die Datei, ist der alt-Text als Ersatz erkennbar. */
  font-style:italic;
  vertical-align:middle;
}

svg{
  fill:currentColor;
}

input,
button,
textarea,
select,
optgroup{
  font:inherit;
  color:inherit;
  letter-spacing:inherit;
  margin:0;
}

button{
  background:none;
  border:0;
  padding:0;
  cursor:pointer;
  text-align:inherit;
  -webkit-appearance:none;
  appearance:none;
}

textarea{
  resize:vertical;
}

table{
  border-collapse:collapse;
  border-spacing:0;
  width:100%;
}

th{
  text-align:left;
  font-weight:600;
}

fieldset{
  border:0;
  padding:0;
  margin:0;
  min-width:0;
}

legend{
  padding:0;
}

hr{
  border:0;
}

/* Sprungziele nicht unter der fixierten Kopfleiste parken. */
:target{
  scroll-margin-top:calc(clamp(68px,8vw,88px) + var(--s5));
}

section[id],
h1[id],h2[id],h3[id],h4[id]{
  scroll-margin-top:calc(clamp(68px,8vw,88px) + var(--s5));
}

[hidden]{
  display:none;
}

/* Hintergrundscroll sperren, solange Mega-Menü oder Panel offen ist. */
body.is-locked{
  overflow:hidden;
}


/* ==========================================================================
   4. GRUNDTYPOGRAFIE
   Deutsche Fachwörter werden lang — darum durchgängig Silbentrennung
   im Fließtext (html lang="de" liefert das Trennmuster).
   ========================================================================== */
body{
  min-height:100dvh;
  margin:0;
  font-family:var(--font-sans);
  font-size:var(--fs-base);
  font-weight:400;
  line-height:var(--lh-normal);
  color:var(--fg);
  background-color:var(--bg);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
  /* Blobs ragen bewusst über den Rand hinaus — sie dürfen nicht scrollen.
     clip statt hidden, weil hidden position:sticky in Kindern zerstört. */
  overflow-x:hidden;
}

@supports (overflow-x:clip){
  body{
    overflow-x:clip;
  }
}

/* ---- Überschriften: kräftiger Schnitt, ausgewogener Umbruch ---- */
h1,h2,h3{
  font-family:var(--font-display);
  font-weight:600;
  letter-spacing:var(--ls-tight);
  color:var(--ink);
  text-wrap:balance;
  font-variant-numeric:lining-nums;
}

h1{
  font-size:var(--fs-h1);
  line-height:var(--lh-tight);
}

h2{
  font-size:var(--fs-h2);
  line-height:var(--lh-tight);
}

h3{
  font-size:var(--fs-h3);
  line-height:var(--lh-snug);
}

h4,h5,h6{
  font-family:var(--font-sans);
  color:var(--ink);
  text-wrap:balance;
  letter-spacing:0;
}

h4{
  font-size:var(--fs-h4);
  font-weight:600;
  line-height:var(--lh-snug);
}

h5{
  font-size:var(--fs-md);
  font-weight:600;
  line-height:var(--lh-snug);
}

h6{
  font-size:var(--fs-sm);
  font-weight:600;
  line-height:var(--lh-snug);
  letter-spacing:var(--ls-wide);
  text-transform:uppercase;
  color:var(--ink-soft);
}

/* ---- Absätze ---- */
p{
  max-width:66ch;              /* Fließtext bleibt lesbar schmal */
  text-wrap:pretty;
  hyphens:auto;
  -webkit-hyphens:auto;
  overflow-wrap:break-word;
}

p + p{
  margin-top:var(--s4);
}

/* Sehr lange Komposita auch in Überschriften trennen, sobald es eng wird. */
@media (max-width:560px){
  h1,h2,h3,h4{
    hyphens:auto;
    -webkit-hyphens:auto;
    overflow-wrap:break-word;
  }
}

/* ---- Links ---- */
a{
  color:var(--brand-ink);
  text-decoration:underline;
  text-decoration-thickness:1px;
  text-decoration-color:var(--clay-300);
  text-underline-offset:.18em;
  transition:color var(--t-fast) var(--ease-soft),
             text-decoration-color var(--t-fast) var(--ease-soft);
}

a:hover{
  color:var(--clay-700);
  text-decoration-color:var(--clay-600);
}

/* Links, die nur Hüllen um Bilder oder Karten sind, tragen keine Linie. */
a:has(> img),
a:has(> svg:only-child),
a:has(> picture){
  text-decoration:none;
}

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

em,i{
  font-style:italic;
}

/* Das Akzentwort in jeder Seitenüberschrift — die Signatur der Seite.
   Aufrecht gesetzt: Manrope hat keinen echten Kursivschnitt, die Farbe trägt. */
em.accent{
  font-style:normal;
  font-weight:inherit;
  color:var(--clay-700);
}

small{
  font-size:var(--fs-xs);
  line-height:var(--lh-snug);
  color:var(--ink-mute);
}

mark{
  background:var(--brand-soft);
  color:var(--clay-900);
  padding:.05em .25em;
  border-radius:var(--r-xs);
}

abbr[title]{
  text-decoration:underline dotted;
  text-underline-offset:.2em;
  cursor:help;
}

sub,sup{
  font-size:.72em;
  line-height:0;
  position:relative;
  vertical-align:baseline;
}

sup{top:-.5em;}
sub{bottom:-.25em;}

/* ---- Listen ---- */
ul,ol{
  padding-inline-start:1.35em;
  max-width:66ch;
}

li{
  hyphens:auto;
  -webkit-hyphens:auto;
  text-wrap:pretty;
}

li + li{
  margin-top:var(--s2);
}

li::marker{
  color:var(--clay-400);
}

ol > li::marker{
  color:var(--clay-700);
  font-variant-numeric:lining-nums;
}

dl{
  max-width:66ch;
}

dt{
  font-weight:600;
  color:var(--ink);
}

dd + dt{
  margin-top:var(--s4);
}

/* ---- Zitat ---- */
blockquote{
  font-family:var(--font-display);
  font-weight:500;
  font-size:var(--fs-lg);
  line-height:var(--lh-snug);
  color:var(--ink);
  border-inline-start:3px solid var(--clay-300);
  padding-inline-start:var(--s5);
  max-width:60ch;
}

blockquote cite{
  display:block;
  margin-top:var(--s3);
  font-family:var(--font-sans);
  font-style:normal;
  font-size:var(--fs-sm);
  color:var(--ink-mute);
}

/* ---- Code (selten, aber sauber) ---- */
code,kbd,samp,pre{
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,'Liberation Mono',monospace;
  font-size:.92em;
}

code{
  background:var(--sand-2);
  border:1px solid var(--line-soft);
  border-radius:var(--r-xs);
  padding:.1em .38em;
  color:var(--clay-900);
}

pre{
  background:var(--sand-2);
  border:1px solid var(--line-soft);
  border-radius:var(--r-sm);
  padding:var(--s4);
  overflow-x:auto;
}

pre code{
  background:none;
  border:0;
  padding:0;
}

/* ---- Augenbrauen/Kicker ---- */
.eyebrow{
  display:flex;
  align-items:center;
  gap:var(--s3);
  font-family:var(--font-sans);
  font-size:var(--fs-2xs);
  font-weight:600;
  letter-spacing:var(--ls-wider);
  line-height:1.4;
  text-transform:uppercase;
  color:var(--clay-700);
  margin:0;
  max-width:none;
}

.eyebrow::before{
  content:'';
  flex:0 0 auto;
  width:22px;
  height:1.5px;
  border-radius:var(--r-pill);
  background:var(--clay-500);
}

/* ---- Lead-Absatz ---- */
.lead{
  font-size:var(--fs-md);
  line-height:var(--lh-loose);
  color:var(--ink-soft);
  max-width:60ch;
  font-weight:400;
  text-wrap:pretty;
}


/* ==========================================================================
   5. FOKUS — sichtbar für Tastatur, unsichtbar für Maus
   ========================================================================== */
:focus{
  outline:none;
}

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

/* Programmatisch fokussierte Bereiche (z. B. Meldungen) nicht umranden. */
[tabindex='-1']:focus:not(:focus-visible){
  outline:none;
}

::selection{
  background:var(--clay-200);
  color:var(--clay-950);
}


/* ==========================================================================
   6. HILFSKLASSEN
   ========================================================================== */

/* ---- 6.1 Nur für Screenreader ---- */
.srOnly{
  position:absolute;
  width:1px;
  height:1px;
  padding:0;
  margin:-1px;
  overflow:hidden;
  clip:rect(0 0 0 0);
  clip-path:inset(50%);
  white-space:nowrap;
  border:0;
}

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

.wrap--narrow{
  max-width:var(--wrap-narrow);
}

.wrap--wide{
  max-width:var(--wrap-wide);
}

/* ---- 6.3 Sektionen ---- */
.section{
  position:relative;
  padding-block:var(--section-y);
}

.section--tight{
  padding-block:calc(var(--section-y) * .55);
}

.section--flush{
  padding-block:0;
}

.section--sand2{
  background-color:var(--sand-2);
}

.section--sand3{
  background-color:var(--sand-3);
}

/* Farbflächen kehren die Textrollen um — ohne !important,
   indem die semantischen Tokens lokal neu belegt werden. */
.section--stone{
  background-color:var(--stone-800);
  color:var(--sand);
  --fg:var(--sand);
  --ink:var(--sand);
  --ink-soft:var(--stone-200);
  --ink-mute:var(--stone-300);
  --ink-faint:var(--stone-400);
  --line:rgba(252,248,244,.20);
  --line-soft:rgba(252,248,244,.12);
  --brand-ink:var(--clay-200);
  --focus:var(--sand);
}

.section--clay{
  background-color:var(--clay-700);
  color:#fff;
  --fg:#fff;
  --ink:#fff;
  --ink-soft:var(--clay-100);
  --ink-mute:var(--clay-200);
  --ink-faint:var(--clay-300);
  --line:rgba(255,255,255,.24);
  --line-soft:rgba(255,255,255,.14);
  --brand-ink:#fff;
  --focus:#fff;
}

.section--stone .eyebrow{
  color:var(--stone-300);
}

.section--stone .eyebrow::before{
  background:var(--stone-400);
}

.section--stone em.accent{
  color:var(--clay-300);
}

.section--clay .eyebrow{
  color:var(--clay-100);
}

.section--clay .eyebrow::before{
  background:var(--clay-200);
}

.section--clay em.accent{
  color:#fff;
}

.section--stone a,
.section--clay a{
  text-decoration-color:currentColor;
}

.section--stone a:hover,
.section--clay a:hover{
  color:inherit;
}

/* Inhalt liegt immer über den dekorativen Blobs. */
.section > .wrap{
  position:relative;
  z-index:var(--z-base);
}

/* ---- 6.4 Sektionskopf ---- */
.sectionHead{
  max-width:62ch;
  display:flex;
  flex-direction:column;
  gap:var(--s4);
  margin-bottom:clamp(2rem,4vw,3.5rem);
}

.sectionHead > h2,
.sectionHead > h1,
.sectionHead > h3{
  margin:0;
}

.sectionHead--center{
  margin-inline:auto;
  text-align:center;
  align-items:center;
}

.sectionHead--center .eyebrow{
  justify-content:center;
}

.sectionHead--center .lead{
  margin-inline:auto;
}

/* ---- 6.5 Raster ---- */
.grid{
  display:grid;
  gap:clamp(1.25rem,3vw,2.25rem);
}

.grid--2{
  grid-template-columns:repeat(2,minmax(0,1fr));
}

.grid--3{
  grid-template-columns:repeat(3,minmax(0,1fr));
}

.grid--4{
  grid-template-columns:repeat(4,minmax(0,1fr));
}

.grid--sidebar{
  grid-template-columns:minmax(0,1fr) minmax(300px,380px);
}

/* Versetztes Raster: jedes zweite Kind rutscht nach unten. */
@media (min-width:680px){
  .grid--offset > *:nth-child(even){
    transform:translateY(clamp(0px,3vw,48px));
  }
}

@media (max-width:1023.98px){
  .grid--4{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }

  .grid--sidebar{
    grid-template-columns:minmax(0,1fr);
  }
}

@media (max-width:879.98px){
  .grid--3{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
}

@media (max-width:679.98px){
  .grid--2,
  .grid--3,
  .grid--4{
    grid-template-columns:minmax(0,1fr);
  }
}

/* ---- 6.6 Fluss-Hilfen ---- */
.stack{
  display:block;
}

.stack > * + *{
  margin-top:var(--s4);
}

.cluster{
  display:flex;
  flex-wrap:wrap;
  gap:var(--s3);
  align-items:center;
}

.split{
  display:flex;
  flex-wrap:wrap;
  justify-content:space-between;
  align-items:center;
  gap:var(--s4);
}

.textCenter{
  text-align:center;
}

.textCenter .eyebrow{
  justify-content:center;
}

.textCenter p,
.textCenter .lead{
  margin-inline:auto;
}

.mtAuto{
  margin-top:auto;
}

/* ---- 6.7 Organische Trennlinie ---- */
.hr{
  display:block;
  width:100%;
  height:1px;
  border:0;
  background-image:linear-gradient(90deg,transparent,var(--line) 18%,var(--line) 82%,transparent);
  margin-block:clamp(2rem,5vw,4rem);
}

/* ---- 6.8 Feines Rauschen (Papierhaptik) ---- */
.noise{
  position:relative;
  isolation:isolate;
}

.noise::after{
  content:'';
  position:absolute;
  inset:0;
  z-index:-1;
  pointer-events:none;
  opacity:.035;
  background-image:
    radial-gradient(var(--ink) .5px,transparent .5px),
    radial-gradient(var(--ink) .5px,transparent .5px);
  background-size:7px 7px,11px 11px;
  background-position:0 0,3px 5px;
}

/* ---- 6.9 Dekorative Blobs ---- */
.bgBlob{
  position:absolute;
  z-index:0;
  pointer-events:none;
  border-radius:var(--blob-a);
  filter:blur(28px);
  opacity:.34;
  will-change:transform,border-radius;
  animation:
    breathe 9s var(--ease-soft) infinite alternate,
    blobMorph 18s linear infinite alternate;
}

.bgBlob--a{
  width:clamp(220px,32vw,460px);
  aspect-ratio:1;
  top:-8%;
  right:-9%;
  background-image:radial-gradient(circle at 34% 34%,var(--clay-100),var(--clay-50) 58%,rgba(252,242,240,0) 78%);
  opacity:.20;
}

.bgBlob--b{
  width:clamp(180px,26vw,380px);
  aspect-ratio:1;
  bottom:-12%;
  left:-10%;
  opacity:.22;
  background-image:radial-gradient(circle at 60% 40%,var(--stone-100),var(--stone-50) 60%,rgba(243,242,241,0) 80%);
  animation-delay:-3.5s,-7s;
}

.bgBlob--c{
  width:clamp(140px,20vw,300px);
  aspect-ratio:1;
  top:38%;
  left:52%;
  opacity:.16;
  background-image:radial-gradient(circle at 45% 55%,var(--clay-50),var(--sand-3) 62%,rgba(245,240,237,0) 82%);
  animation-delay:-6s,-12s;
}


/* ==========================================================================
   7. KEYFRAMES — Namen sind verbindlich (SPEC-01 §3)
   Grundgedanke „Atem": lange Zyklen, weiche Kurven, nie hektisch.
   ========================================================================== */

/* Blobs und Deko atmen: kaum sichtbar, aber spürbar. */
@keyframes breathe{
  from{transform:scale(1) rotate(-1.2deg);}
  to{transform:scale(1.045) rotate(1.2deg);}
}

/* Der Rand wandert zwischen den drei Blob-Formen. */
@keyframes blobMorph{
  0%{border-radius:var(--blob-a);}
  50%{border-radius:var(--blob-b);}
  100%{border-radius:var(--blob-c);}
}

/* Doppelschlag wie ein Puls — für Links und den Kontaktknopf. */
@keyframes heartbeat{
  0%{transform:scale(1);}
  18%{transform:scale(1.05);}
  36%{transform:scale(1);}
  54%{transform:scale(1.025);}
  72%{transform:scale(1);}
  100%{transform:scale(1);}
}

/* Schwebende Karten über dem Hero-Blob. */
@keyframes floatSoft{
  from{transform:translateY(0);}
  to{transform:translateY(-10px);}
}

/* SVG-Pfad zeichnet sich selbst (Stepper-Linie, Signet). */
@keyframes drawLine{
  from{stroke-dashoffset:var(--dash,1000);}
  to{stroke-dashoffset:0;}
}

/* Wanderreflex auf Lade-/Skeletonflächen. */
@keyframes shimmer{
  from{background-position:-150% 0;}
  to{background-position:250% 0;}
}

/* Standard-Einblendung von unten. */
@keyframes fadeUp{
  from{opacity:0;transform:translateY(26px);}
  to{opacity:1;transform:none;}
}

@keyframes fadeIn{
  from{opacity:0;}
  to{opacity:1;}
}

@keyframes scaleIn{
  from{opacity:0;transform:scale(.94);}
  to{opacity:1;transform:none;}
}

@keyframes slideInLeft{
  from{opacity:0;transform:translateX(-32px);}
  to{opacity:1;transform:none;}
}

@keyframes slideInRight{
  from{opacity:0;transform:translateX(32px);}
  to{opacity:1;transform:none;}
}

/* Expandierender Ring hinter dem Telefon-/Kontakt-Icon. */
@keyframes pulseRing{
  0%{transform:scale(.82);opacity:.55;}
  70%{transform:scale(1.65);opacity:0;}
  100%{transform:scale(1.65);opacity:0;}
}

/* Hintergrundwelle driftet seitwärts (Kachelbreite = 50 %). */
@keyframes waveDrift{
  from{transform:translate3d(0,0,0);}
  to{transform:translate3d(-50%,0,0);}
}

/* Mega-Menü öffnet als Kreis aus dem Burger-Knopf heraus. */
@keyframes menuIn{
  from{clip-path:circle(0% at calc(100% - 64px) 56px);}
  to{clip-path:circle(150% at calc(100% - 64px) 56px);}
}

/* Wie fadeUp, aber der Aufrufer verzögert über --d (Index). */
@keyframes staggerIn{
  from{opacity:0;transform:translateY(20px);}
  to{opacity:1;transform:none;}
}

/* Reine Opazitätsstütze für hochzählende Zahlen. */
@keyframes countUp{
  from{opacity:.35;}
  to{opacity:1;}
}


/* ==========================================================================
   8. REVEAL-SYSTEM — Einblenden beim Scrollen
   main.js setzt .is-in, sobald das Element sichtbar wird (einmalig).
   Ohne JavaScript bleibt der Inhalt sichtbar: siehe .no-js-Rückfall unten.
   ========================================================================== */
/* Einblenden beim Scrollen.
   Der versteckte Ausgangszustand haengt an .js am <html> — gesetzt von
   assets/js/jsFlag.js, bevor der Koerper gezeichnet wird. Ohne JavaScript
   greift keine dieser Regeln und der gesamte Inhalt steht sofort da.
   Das ist kein Schoenheitsdetail: ohne diesen Rueckfall waere die Seite
   fuer Besucher ohne JavaScript und fuer Suchmaschinen, die keines
   ausfuehren, unterhalb des Heros leer. */
.rv{
  transition:
    opacity .8s var(--ease-out),
    transform .8s var(--ease-out);
}

.js .rv{
  opacity:0;
  transform:translateY(26px);
  will-change:opacity,transform;
}

.js .rv--left{
  transform:translateX(-32px);
}

.js .rv--right{
  transform:translateX(32px);
}

.js .rv--scale{
  transform:scale(.94);
}

.rv.is-in,
.js .rv.is-in{
  opacity:1;
  transform:none;
  will-change:auto;      /* nach dem Einblenden keine Optimierungslast halten */
}

/* Ohne JavaScript darf nichts unsichtbar bleiben — zwei Sicherungen:
   die Klasse am <html> und die Medienabfrage für abgeschaltetes Skripting. */
html.no-js .rv{
  opacity:1;
  transform:none;
}

@media (scripting:none){
  .rv{
    opacity:1;
    transform:none;
  }
}

/* ---- 8.1 Staffelung über data-d (1–12) ---- */
[data-d='1']{transition-delay:calc(var(--dd,.08s) * 1);animation-delay:calc(var(--dd,.08s) * 1);}
[data-d='2']{transition-delay:calc(var(--dd,.08s) * 2);animation-delay:calc(var(--dd,.08s) * 2);}
[data-d='3']{transition-delay:calc(var(--dd,.08s) * 3);animation-delay:calc(var(--dd,.08s) * 3);}
[data-d='4']{transition-delay:calc(var(--dd,.08s) * 4);animation-delay:calc(var(--dd,.08s) * 4);}
[data-d='5']{transition-delay:calc(var(--dd,.08s) * 5);animation-delay:calc(var(--dd,.08s) * 5);}
[data-d='6']{transition-delay:calc(var(--dd,.08s) * 6);animation-delay:calc(var(--dd,.08s) * 6);}
[data-d='7']{transition-delay:calc(var(--dd,.08s) * 7);animation-delay:calc(var(--dd,.08s) * 7);}
[data-d='8']{transition-delay:calc(var(--dd,.08s) * 8);animation-delay:calc(var(--dd,.08s) * 8);}
[data-d='9']{transition-delay:calc(var(--dd,.08s) * 9);animation-delay:calc(var(--dd,.08s) * 9);}
[data-d='10']{transition-delay:calc(var(--dd,.08s) * 10);animation-delay:calc(var(--dd,.08s) * 10);}
[data-d='11']{transition-delay:calc(var(--dd,.08s) * 11);animation-delay:calc(var(--dd,.08s) * 11);}
[data-d='12']{transition-delay:calc(var(--dd,.08s) * 12);animation-delay:calc(var(--dd,.08s) * 12);}

/* ---- 8.2 Automatische Staffelung in Gruppen ----
   Das erste Kind erscheint sofort, jedes weitere einen Schritt später.
   Kinder mit eigenem data-d bleiben ausgenommen (siehe 8.1). */
.rvGroup > .rv:not([data-d]):nth-child(1){transition-delay:0s;}
.rvGroup > .rv:not([data-d]):nth-child(2){transition-delay:calc(var(--dd,.08s) * 1);}
.rvGroup > .rv:not([data-d]):nth-child(3){transition-delay:calc(var(--dd,.08s) * 2);}
.rvGroup > .rv:not([data-d]):nth-child(4){transition-delay:calc(var(--dd,.08s) * 3);}
.rvGroup > .rv:not([data-d]):nth-child(5){transition-delay:calc(var(--dd,.08s) * 4);}
.rvGroup > .rv:not([data-d]):nth-child(6){transition-delay:calc(var(--dd,.08s) * 5);}
.rvGroup > .rv:not([data-d]):nth-child(7){transition-delay:calc(var(--dd,.08s) * 6);}
.rvGroup > .rv:not([data-d]):nth-child(8){transition-delay:calc(var(--dd,.08s) * 7);}
.rvGroup > .rv:not([data-d]):nth-child(9){transition-delay:calc(var(--dd,.08s) * 8);}
.rvGroup > .rv:not([data-d]):nth-child(10){transition-delay:calc(var(--dd,.08s) * 9);}
.rvGroup > .rv:not([data-d]):nth-child(11){transition-delay:calc(var(--dd,.08s) * 10);}
.rvGroup > .rv:not([data-d]):nth-child(12){transition-delay:calc(var(--dd,.08s) * 11);}

/* Ein explizites data-d am Kind schlägt die Gruppenautomatik: die Regeln
   oben greifen nur bei Kindern ohne data-d. */


/* ==========================================================================
   9. REDUZIERTE BEWEGUNG — Pflicht.
   Der einzige Ort in diesem Projekt, an dem !important erlaubt ist.
   ========================================================================== */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms!important;animation-iteration-count:1!important;
    transition-duration:.01ms!important;scroll-behavior:auto!important;
  }
  .rv{opacity:1!important;transform:none!important;}
}


/* ==========================================================================
   10. DRUCKSTILE — die Seite soll als Merkzettel taugen
   (Adresse, Telefon, Leistungen, Preise).
   ========================================================================== */
@media print{
  :root{
    --bg:#fff;
    --fg:#000;
    --ink:#000;
    --ink-soft:#333;
    --ink-mute:#555;
    --paper:#fff;
    --line:#bbb;
    --line-soft:#ddd;
  }

  html{
    scroll-padding-top:0;
    font-size:11pt;
  }

  body{
    background:#fff;
    color:#000;
    overflow-x:visible;
  }

  /* Bedienelemente und Dekor gehören nicht aufs Papier. */
  .siteHeader,
  .progressBar,
  .menuToggle,
  .mega,
  .navDesk,
  .skipLink,
  .fab,
  .fabPanel,
  .toTop,
  .dots,
  .heroScroll,
  .waveTop,
  .waveBottom,
  .bgBlob,
  .siteFooter__social,
  [class*='cg_v'],
  [id*='cg_v']{
    display:none;
  }

  .noise::after{
    display:none;
  }

  /* Farbflächen zurücknehmen — Tinte sparen, Lesbarkeit erhalten. */
  .section,
  .section--sand2,
  .section--sand3,
  .section--stone,
  .section--clay,
  .ctaBand,
  .quoteBand{
    background:#fff;
    color:#000;
    padding-block:0.6cm;
    --ink:#000;
    --ink-soft:#333;
    --ink-mute:#555;
    --brand-ink:#000;
  }

  .card,
  .note,
  .priceCard{
    box-shadow:none;
    border:1px solid #bbb;
  }

  /* Reveal-Zustände aufheben, sonst druckt die Seite leer. */
  .rv{
    opacity:1;
    transform:none;
    transition:none;
  }

  a{
    color:#000;
    text-decoration:underline;
  }

  /* Zieladresse hinter externe Links setzen — auf Papier sonst wertlos. */
  a[href^='http']::after{
    content:' (' attr(href) ')';
    font-size:9pt;
    color:#444;
    word-break:break-all;
  }

  a[href^='mailto:']::after{
    content:' (' attr(href) ')';
    font-size:9pt;
    color:#444;
  }

  /* Anker, Telefonlinks und Bildlinks bleiben ohne Zusatz. */
  a[href^='#']::after,
  a[href^='tel:']::after,
  a:has(> img)::after{
    content:'';
  }

  img{
    max-width:100%;
    page-break-inside:avoid;
    break-inside:avoid;
  }

  h1,h2,h3,h4{
    page-break-after:avoid;
    break-after:avoid-page;
    color:#000;
  }

  p,
  li,
  blockquote,
  .card,
  .faq__item,
  .timeline__item{
    page-break-inside:avoid;
    break-inside:avoid;
  }

  ul,ol,
  table{
    page-break-before:auto;
  }

  thead{
    display:table-header-group;
  }

  tr{
    page-break-inside:avoid;
    break-inside:avoid;
  }

  .section + .section{
    page-break-before:auto;
  }

  @page{
    margin:1.6cm 1.4cm;
  }
}