/* =============================================================================
   layout.css — Der Rahmen: Struktur, Raster, Kopfleiste, Vollbildmenue,
   Kontakt-FAB, Fortschrittsring und Fussbereich.

   Reihenfolge der Stylesheets: base.css (Tokens, Schriften, Keyframes, .rv, .srOnly)
   -> layout.css -> components.css -> optional pages/<seite>.css.
   Alle Farben und Abstaende kommen aus den Tokens in base.css.
   Dynamische Werte (--progress, --p, --fill) setzt assets/js/main.js zur Laufzeit.
   ============================================================================= */

/* -----------------------------------------------------------------------------
   0. Rahmenmasse
   Eigene Variablen des Rahmens; die Design-Tokens selbst stehen in base.css.
   -------------------------------------------------------------------------- */
body{
  --header-h:clamp(68px,8vw,88px);   /* Hoehe der Kopfleiste */
  --fab-size:64px;                   /* Durchmesser des Kontaktknopfes */
  --fab-inset:clamp(1rem,3vw,2rem);  /* Abstand von Kante und Boden */
  --totop-size:48px;                 /* Durchmesser des Fortschrittsrings */
  --footer-wave-h:clamp(48px,7vw,112px);  /* Hoehe der Welle ueber dem Fussbereich */
}

/* Der Hauptinhalt beginnt unter der festen Kopfleiste. Ein .hero als erstes Kind
   darf bewusst darunter durchlaufen (die Kopfleiste ist oben transparent). */
main{padding-top:var(--header-h)}
main > .hero:first-child{margin-top:calc(var(--header-h) * -1)}
main[tabindex="-1"]:focus{outline:none}

/* Wird vom Menue gesetzt: verhindert das Scrollen des Hintergrunds. */
body.is-locked{overflow:hidden}

/* -----------------------------------------------------------------------------
   1. Struktur & Raster (SPEC-01 §4.1)
   -------------------------------------------------------------------------- */
.skipLink{
  position:fixed;top:.5rem;left:.5rem;z-index:var(--z-modal);
  display:inline-flex;align-items:center;min-height:44px;
  padding:.75rem 1.4rem;border-radius:var(--r-pill);
  background:var(--clay-700);color:#fff;
  font-family:var(--font-sans);font-weight:600;font-size:var(--fs-sm);
  text-decoration:none;box-shadow:var(--sh-md);
  transform:translateY(-220%);
  transition:transform var(--t-base) var(--ease-out);
}
.skipLink:focus,.skipLink:focus-visible{transform:translateY(0)}

.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)}

.section{position:relative;padding-block:var(--section-y)}
.section > .wrap{position:relative;z-index:1}   /* Inhalt immer ueber den Deko-Blobs */
.section--sand2{background:var(--sand-2)}
.section--sand3{background:var(--sand-3)}
.section--tight{padding-block:clamp(2.5rem,5vw,4rem)}
.section--flush{padding-block:0}

.section--stone{background:var(--stone-800);color:var(--sand)}
.section--stone h1,.section--stone h2,.section--stone h3,
.section--stone h4,.section--stone h5,.section--stone h6{color:var(--sand)}
.section--stone .eyebrow{color:var(--stone-300)}
.section--stone .lead,.section--stone p{color:var(--stone-100)}
.section--stone :focus-visible{outline-color:var(--clay-300)}

.section--clay{background:var(--clay-700);color:#fff}
.section--clay h1,.section--clay h2,.section--clay h3,
.section--clay h4,.section--clay h5,.section--clay h6{color:#fff}
.section--clay .eyebrow{color:var(--clay-200)}
.section--clay .lead,.section--clay p{color:var(--clay-100)}
.section--clay :focus-visible{outline-color:#fff}

.sectionHead{display:grid;gap:var(--s3);max-width:62ch;margin-bottom:clamp(2rem,4vw,3.25rem)}
.sectionHead > *{margin:0}
.sectionHead--center{margin-inline:auto;text-align:center;justify-items:center}

.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)}
.grid--offset > *:nth-child(even){transform:translateY(clamp(0px,3vw,48px))}

@media (max-width:1023px){
  .grid--4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .grid--sidebar{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:899px){
  .grid--3{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:679px){
  .grid--2,.grid--3,.grid--4{grid-template-columns:minmax(0,1fr)}
  .grid--offset > *:nth-child(even){transform:none}
}

.stack > * + *{margin-top:var(--s4)}
.cluster{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s3)}
.split{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--s4)}

/* Organische Sektionsuebergaenge. Die Fuellfarbe folgt color, damit jede Sektion
   ihre eigene Welle einfaerben kann: .meineSektion .waveTop{color:var(--sand-2)}. */
.waveTop,.waveBottom{
  display:block;width:100%;height:clamp(42px,6vw,98px);
  color:var(--sand);fill:currentColor;pointer-events:none;
}
.waveTop{margin-bottom:-1px}
.waveBottom{margin-top:-1px}

/* Dekorative Blobs: atmen langsam und wandern in der Form. */
.bgBlob{
  position:absolute;z-index:0;display:block;pointer-events:none;
  border-radius:var(--blob-a);
  animation:breathe 9s var(--ease-soft) infinite alternate,
            blobMorph 18s linear infinite alternate;
}
.bgBlob--a{
  width:clamp(220px,30vw,440px);aspect-ratio:1;top:-10%;right:-8%;
  background:radial-gradient(circle at 34% 30%,var(--clay-200),var(--clay-100) 58%,transparent 72%);
  opacity:.55;
}
.bgBlob--b{
  width:clamp(180px,26vw,380px);aspect-ratio:1;bottom:-12%;left:-9%;
  border-radius:var(--blob-b);
  background:radial-gradient(circle at 60% 40%,var(--stone-200),var(--stone-100) 60%,transparent 74%);
  opacity:.6;animation-delay:-4s,-7s;
}
.bgBlob--c{
  width:clamp(140px,20vw,300px);aspect-ratio:1;top:32%;left:44%;
  border-radius:var(--blob-c);
  background:radial-gradient(circle at 45% 55%,var(--sand-3),transparent 70%);
  opacity:.5;animation-delay:-2s,-11s;
}

/* Sehr feines Rauschen, damit grosse Farbflaechen nicht flach wirken. */
.noise{position:relative}
.noise::after{
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;opacity:.035;
  background-image:radial-gradient(rgba(61,23,16,.9) 1px,transparent 1px),
                   radial-gradient(rgba(61,23,16,.6) 1px,transparent 1px);
  background-size:7px 7px,11px 11px;
  background-position:0 0,3px 4px;
}

/* -----------------------------------------------------------------------------
   2. Kopfleiste & Navigation (SPEC-01 §4.5)
   -------------------------------------------------------------------------- */
.progressBar{
  position:fixed;top:0;left:0;right:0;height:3px;
  z-index:calc(var(--z-header) + 1);
  background:linear-gradient(90deg,var(--clay-500),var(--stone-500));
  transform:scaleX(var(--progress,0));transform-origin:0 50%;
  transition:transform .1s linear;pointer-events:none;
}

.siteHeader{
  position:fixed;top:0;left:0;right:0;z-index:var(--z-header);
  background:transparent;border-bottom:1px solid transparent;
  transition:background var(--t-base) var(--ease-out),
             border-color var(--t-base) var(--ease-out),
             box-shadow var(--t-base) var(--ease-out),
             transform var(--t-base) var(--ease-out);
}
.siteHeader.is-scrolled{
  background:rgba(252,248,244,.88);
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
  border-bottom-color:var(--line-soft);
  box-shadow:var(--sh-xs);
}
.siteHeader.is-hidden{transform:translateY(-100%)}
.siteHeader__inner{
  display:flex;align-items:center;justify-content:space-between;
  gap:var(--s4);min-height:var(--header-h);
}

.brand{
  display:flex;align-items:center;gap:.6rem;
  text-decoration:none;color:inherit;
  padding:.3rem .25rem;border-radius:var(--r-sm);
}

/* Vollstaendiges Logo (Signet + Schriftzug), Seitenverhaeltnis 400:112. */
.brand__logo{
  display:block;flex:0 0 auto;
  height:clamp(34px,4.2vw,46px);aspect-ratio:400/112;
  transition:transform var(--t-base) var(--ease-back);
}
.brand__logoSvg{display:block;width:100%;height:100%}

/* Nur-Signet-Fassung fuer sehr schmale Schirme — standardmaessig aus. */
.brand__mark{display:none;flex:0 0 auto;height:38px;aspect-ratio:90/161}
.brand__badge{display:block;width:100%;height:100%}

/* Ortszusatz, den das Logo selbst nicht traegt. */
.brand__ort{
  font-family:var(--font-sans);font-weight:600;font-size:var(--fs-2xs);
  letter-spacing:var(--ls-wider);text-transform:uppercase;
  color:var(--ink-mute);white-space:nowrap;
  padding-inline-start:.6rem;margin-inline-start:.1rem;
  border-inline-start:1px solid var(--line);
}

.brand:hover .brand__logo,
.brand:focus-visible .brand__logo,
.brand:hover .brand__mark,
.brand:focus-visible .brand__mark{transform:translateY(-2px) scale(1.03)}

/* Der vollstaendige Schriftzug ist 400:112 breit; bei 34px Hoehe sind das
   121px. Das passt selbst auf 320px-Schirmen neben den Menue-Knopf, also
   steht er ueberall. Nur darunter weicht er dem reinen Signet.
   Den Ortszusatz gibt es erst ab 560px — davor waere die Zeile zu voll. */
@media (max-width:329px){
  .brand__logo{display:none}
  .brand__mark{display:block}
}
@media (max-width:559px){
  .brand__ort{display:none}
}
.navDesk{display:none}
@media (min-width:1024px){
  .navDesk{display:flex;align-items:center;gap:clamp(.75rem,1.8vw,1.75rem)}
}
.navDesk__link{
  position:relative;display:inline-flex;align-items:center;
  min-height:44px;padding-inline:.3rem;
  font-family:var(--font-sans);font-weight:500;font-size:var(--fs-sm);
  color:var(--ink-soft);text-decoration:none;
  transition:color var(--t-fast) var(--ease-soft);
}
.navDesk__link::after{
  content:"";position:absolute;left:.3rem;right:.3rem;bottom:.5rem;height:1.5px;
  background:var(--clay-500);border-radius:2px;
  transform:scaleX(0);transform-origin:left center;
  transition:transform var(--t-base) var(--ease-out);
}
.navDesk__link:hover,.navDesk__link:focus-visible{color:var(--clay-800)}
.navDesk__link:hover::after,.navDesk__link:focus-visible::after{transform:scaleX(1)}
.navDesk__link:hover{animation:heartbeat 1.1s var(--ease-soft)}
.navDesk__link.is-active{color:var(--clay-800);font-weight:600}
.navDesk__link.is-active::after{transform:scaleX(1);background:var(--clay-600)}

.menuToggle{
  display:inline-flex;align-items:center;gap:.65rem;
  min-height:44px;min-width:44px;padding:.5rem .85rem;
  border:1.5px solid var(--line);border-radius:var(--r-pill);
  background:rgba(252,248,244,.55);color:var(--ink);
  font-family:var(--font-sans);font-weight:600;font-size:var(--fs-2xs);
  letter-spacing:var(--ls-wide);text-transform:uppercase;cursor:pointer;
  transition:border-color var(--t-fast),background var(--t-fast),color var(--t-fast);
}
.menuToggle:hover,.menuToggle:focus-visible{border-color:var(--clay-400);background:var(--clay-50);color:var(--clay-800)}
.menuToggle__label{display:none}
@media (min-width:560px){
  .menuToggle__label{display:inline}
}
.menuToggle__icon{position:relative;display:block;width:22px;height:14px;flex:0 0 auto}
.menuToggle__icon span{
  position:absolute;left:0;height:2px;width:100%;
  background:currentColor;border-radius:2px;
  transition:transform var(--t-base) var(--ease-out),opacity var(--t-fast) var(--ease-soft),width var(--t-base);
}
.menuToggle__icon span:nth-child(1){top:0}
.menuToggle__icon span:nth-child(2){top:6px;width:70%}
.menuToggle__icon span:nth-child(3){top:12px}
.menuToggle:hover .menuToggle__icon span:nth-child(2){width:100%}
.menuToggle[aria-expanded="true"] .menuToggle__icon span:nth-child(1){transform:translateY(6px) rotate(45deg)}
.menuToggle[aria-expanded="true"] .menuToggle__icon span:nth-child(2){opacity:0;transform:scaleX(.2)}
.menuToggle[aria-expanded="true"] .menuToggle__icon span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}

/* -----------------------------------------------------------------------------
   3. Vollbild-Menue (SPEC-01 §4.6)
   Das Menue ist die Hauptnavigation. main.js entfernt das hidden-Attribut und
   setzt im naechsten Frame .is-open; geschlossen bleibt es fuer Hilfsmittel unsichtbar.
   -------------------------------------------------------------------------- */
.mega{
  position:fixed;inset:0;z-index:var(--z-mega);overflow:hidden;
  background-color:var(--stone-900);
  background-image:radial-gradient(110% 80% at 84% 6%,var(--stone-800) 0%,var(--stone-900) 62%),
                   radial-gradient(70% 60% at 10% 100%,rgba(118,48,31,.35) 0%,transparent 70%);
  clip-path:circle(0% at calc(100% - 64px) 56px);
}
.mega[hidden]{display:none}
.mega.is-open{
  clip-path:circle(150% at calc(100% - 64px) 56px);
  animation:menuIn .62s var(--ease-out) forwards;
}
.mega :focus-visible{outline-color:var(--clay-300)}

.mega__bg{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:0}
.mega__bg .bgBlob{filter:blur(24px);opacity:.3}
.mega__bg .bgBlob--a{background:radial-gradient(circle at 40% 40%,var(--stone-600),transparent 70%)}
.mega__bg .bgBlob--b{background:radial-gradient(circle at 50% 50%,var(--clay-800),transparent 72%);opacity:.38}
.mega__bg .bgBlob--c{background:radial-gradient(circle at 50% 50%,var(--stone-700),transparent 70%);opacity:.26}

.mega__close{
  position:absolute;top:clamp(.75rem,2vw,1.5rem);right:clamp(.75rem,3vw,2rem);z-index:2;
  display:grid;place-items:center;width:48px;height:48px;padding:0;
  border:1.5px solid rgba(252,248,244,.26);border-radius:50%;
  background:transparent;color:var(--sand);cursor:pointer;
  transition:background var(--t-fast),border-color var(--t-fast),color var(--t-fast),transform var(--t-base) var(--ease-out);
}
.mega__close:hover,.mega__close:focus-visible{
  background:rgba(252,248,244,.12);border-color:var(--clay-300);color:var(--clay-300);transform:rotate(90deg);
}

.mega__inner{
  position:relative;z-index:1;
  display:grid;grid-template-columns:1.1fr .9fr .8fr;
  gap:clamp(2rem,5vw,5rem);
  align-content:center;
  align-content:safe center;   /* sehr hohe Inhalte bleiben von oben erreichbar */
  min-height:100vh;min-height:100dvh;
  max-height:100vh;max-height:100dvh;
  padding-block:clamp(6rem,12vh,9rem);
  overflow-y:auto;overscroll-behavior:contain;
  -webkit-overflow-scrolling:touch;
}
@media (max-width:1023px){
  .mega__inner{
    grid-template-columns:minmax(0,1fr);
    align-content:start;
    gap:clamp(1.75rem,6vw,2.75rem);
    padding-block:clamp(5.5rem,14vh,7rem) clamp(3rem,10vh,5rem);
  }
}

.mega__col{display:grid;align-content:start;gap:var(--s4)}
.mega__col--main{gap:.15rem}

.mega__heading{
  display:flex;align-items:center;gap:.6rem;margin:0 0 var(--s2);
  font-family:var(--font-sans);font-weight:600;font-size:var(--fs-2xs);
  letter-spacing:var(--ls-wider);text-transform:uppercase;color:var(--stone-300);
}
.mega__heading::before{content:"";flex:0 0 auto;width:22px;height:1.5px;background:currentColor}

.mega__link{
  position:relative;display:inline-flex;align-items:center;width:-moz-fit-content;width:fit-content;
  min-height:44px;padding:.25rem 0 .25rem 1.4rem;
  font-family:var(--font-display);font-weight:600;
  font-size:clamp(1.75rem,4vw,3rem);line-height:1.14;letter-spacing:var(--ls-tight);
  color:var(--sand);text-decoration:none;
  transition:color var(--t-base) var(--ease-out),transform var(--t-base) var(--ease-out);
}
.mega__link::before{
  content:"";position:absolute;left:0;top:50%;width:9px;height:9px;margin-top:-4.5px;
  border-radius:50%;background:var(--clay-400);opacity:0;transform:translateX(-10px);
  transition:opacity var(--t-base) var(--ease-out),transform var(--t-base) var(--ease-back);
}
.mega__link:hover,.mega__link:focus-visible{color:var(--clay-300);transform:translateX(12px)}
.mega__link:hover::before,.mega__link:focus-visible::before{opacity:1;transform:translateX(0)}
.mega__link.is-active{color:var(--clay-300)}
.mega__link.is-active::before{opacity:1;transform:translateX(0)}

.mega__sub{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:minmax(0,1fr);gap:.1rem}
@media (min-width:480px){
  .mega__sub{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:var(--s4)}
}
.mega__sub a{
  display:flex;align-items:center;min-height:44px;padding:.3rem 0;
  font-family:var(--font-sans);font-weight:500;font-size:var(--fs-sm);line-height:1.35;
  color:var(--stone-200);text-decoration:none;
  transition:color var(--t-fast) var(--ease-soft),transform var(--t-base) var(--ease-out);
}
.mega__sub a:hover,.mega__sub a:focus-visible{color:var(--sand);transform:translateX(6px)}

.mega__contact{
  display:grid;gap:var(--s3);
  font-family:var(--font-sans);font-size:var(--fs-sm);line-height:var(--lh-normal);
  color:var(--stone-200);
}
.mega__contact p{display:flex;align-items:flex-start;gap:.6rem;margin:0}
.mega__contact p svg{flex:0 0 auto;margin-top:.15rem;color:var(--stone-400)}
.mega__contact a{
  color:var(--sand);text-decoration:none;
  transition:color var(--t-fast) var(--ease-soft),transform var(--t-base) var(--ease-out);
}
.mega__contact p > a{display:inline-flex;align-items:center;min-height:44px}
.mega__contact a:hover,.mega__contact a:focus-visible{color:var(--clay-300)}
.mega__contact .mega__link{
  font-size:clamp(1.55rem,3.2vw,2.3rem);padding-left:0;min-height:auto;
}
.mega__contact .mega__link::before{content:none}
.mega__contact .mega__link:hover,.mega__contact .mega__link:focus-visible{transform:none}
.mega__contact .btn{min-height:44px}

.mega__foot{
  grid-column:1 / -1;display:flex;flex-wrap:wrap;align-items:center;gap:.5rem 1.5rem;
  margin-top:clamp(1.5rem,4vw,2.5rem);padding-top:var(--s5);
  border-top:1px solid rgba(252,248,244,.14);
  font-size:var(--fs-xs);color:var(--stone-400);
}
.mega__foot a{
  display:inline-flex;align-items:center;min-height:44px;
  color:var(--stone-400);text-decoration:none;
  transition:color var(--t-fast) var(--ease-soft);
}
.mega__foot a:hover,.mega__foot a:focus-visible{color:var(--sand)}

/* Gestaffeltes Einlaufen der Spalteninhalte (60 ms Schritt). */
.mega.is-open .mega__col > *,
.mega.is-open .mega__foot{animation:staggerIn .6s var(--ease-out) both}
.mega.is-open .mega__col > *:nth-child(1){animation-delay:.10s}
.mega.is-open .mega__col > *:nth-child(2){animation-delay:.16s}
.mega.is-open .mega__col > *:nth-child(3){animation-delay:.22s}
.mega.is-open .mega__col > *:nth-child(4){animation-delay:.28s}
.mega.is-open .mega__col > *:nth-child(5){animation-delay:.34s}
.mega.is-open .mega__col > *:nth-child(6){animation-delay:.40s}
.mega.is-open .mega__col > *:nth-child(7){animation-delay:.46s}
.mega.is-open .mega__col > *:nth-child(8){animation-delay:.52s}
.mega.is-open .mega__col > *:nth-child(9){animation-delay:.58s}
.mega.is-open .mega__col > *:nth-child(n+10){animation-delay:.64s}
.mega.is-open .mega__foot{animation-delay:.7s}
.mega.is-open .mega__sub li{animation:fadeIn .5s var(--ease-out) both}
.mega.is-open .mega__sub li:nth-child(1){animation-delay:.26s}
.mega.is-open .mega__sub li:nth-child(2){animation-delay:.30s}
.mega.is-open .mega__sub li:nth-child(3){animation-delay:.34s}
.mega.is-open .mega__sub li:nth-child(4){animation-delay:.38s}
.mega.is-open .mega__sub li:nth-child(5){animation-delay:.42s}
.mega.is-open .mega__sub li:nth-child(6){animation-delay:.46s}
.mega.is-open .mega__sub li:nth-child(7){animation-delay:.50s}
.mega.is-open .mega__sub li:nth-child(8){animation-delay:.54s}
.mega.is-open .mega__sub li:nth-child(9){animation-delay:.58s}
.mega.is-open .mega__sub li:nth-child(n+10){animation-delay:.62s}

/* -----------------------------------------------------------------------------
   4. Kontakt-FAB (SPEC-01 §4.7)
   Sitzt unten rechts; der Compliance-Guardian sitzt unten links.
   -------------------------------------------------------------------------- */

/* Ruhiger Doppelschlag alle 6 Sekunden. base.css kennt nur heartbeat (1,1 s ohne
   Pause) — der FAB braucht die lange Ruhephase, darum ein eigener Takt. */
@keyframes fabPuls{
  0%,86%,100%{transform:scale(1)}
  88%{transform:scale(1.06)}
  90.5%{transform:scale(1)}
  93%{transform:scale(1.03)}
  95.5%{transform:scale(1)}
}

.fab{
  position:fixed;right:var(--fab-inset);bottom:var(--fab-inset);
  z-index:var(--z-fab);pointer-events:none;
}
.fab__btn{
  position:relative;display:grid;place-items:center;pointer-events:auto;
  width:var(--fab-size);height:var(--fab-size);padding:0;
  border:none;border-radius:50%;
  background:var(--clay-600);color:#fff;box-shadow:var(--sh-glow);cursor:pointer;
  animation:fabPuls 6s var(--ease-soft) 3s infinite;
  transition:background var(--t-base) var(--ease-soft),
             box-shadow var(--t-base) var(--ease-soft),
             transform var(--t-base) var(--ease-back);
}
.fab__btn:hover{background:var(--clay-700);box-shadow:var(--sh-xl)}
.fab__btn > svg{grid-area:1 / 1;transition:opacity var(--t-base) var(--ease-soft),transform var(--t-base) var(--ease-back)}
.fab__btn > svg:nth-of-type(2){opacity:0;transform:scale(.5)}
.fab__btn.is-open{background:var(--clay-800);transform:rotate(135deg);animation:none}
.fab__btn.is-open > svg:nth-of-type(1){opacity:0;transform:scale(.5)}
.fab__btn.is-open > svg:nth-of-type(2){opacity:1;transform:rotate(-135deg)}

/* Ausstrahlender Ring — verschwindet nach der ersten Beruehrung (main.js: .is-touched). */
.fab__btn::before{
  content:"";position:absolute;inset:0;border-radius:50%;
  border:2px solid var(--clay-400);pointer-events:none;
  animation:pulseRing 2.4s var(--ease-out) infinite;
}
.fab__btn.is-touched::before{display:none}

/* Signalpunkt fuer "jetzt erreichbar". Bleibt ungenutzt, solange keine
   Oeffnungszeiten hinterlegt sind (SPEC-00: openingHours = null). */
.fab__badge{
  position:absolute;top:5px;right:5px;width:12px;height:12px;border-radius:50%;
  background:var(--honey);border:2px solid var(--clay-600);
}

.fabPanel{
  position:absolute;right:0;bottom:calc(var(--fab-size) + .85rem);
  width:min(340px,calc(100vw - 2rem));
  max-height:calc(100vh - var(--fab-size) - 5rem);
  max-height:calc(100dvh - var(--fab-size) - 5rem);
  overflow:hidden auto;overscroll-behavior:contain;
  background:var(--paper);border-radius:var(--r-lg);box-shadow:var(--sh-xl);
  transform-origin:bottom right;transform:scale(.9) translateY(12px);
  opacity:0;visibility:hidden;pointer-events:none;
  transition:opacity var(--t-base) var(--ease-out),
             transform var(--t-base) var(--ease-back),
             visibility 0s linear var(--t-base);
}
.fabPanel.is-open{
  opacity:1;visibility:visible;pointer-events:auto;transform:none;
  transition-delay:0s;
}
.fabPanel__head{
  display:flex;align-items:center;justify-content:space-between;gap:var(--s3);
  padding:.85rem .85rem .85rem 1.25rem;background:var(--clay-700);color:#fff;
}
.fabPanel__head h2{
  margin:0;font-family:var(--font-display);font-weight:600;
  font-size:var(--fs-md);line-height:1.2;color:#fff;
}
.fabPanel__close{
  display:grid;place-items:center;width:44px;height:44px;padding:0;flex:0 0 auto;
  border:none;border-radius:50%;background:rgba(255,255,255,.14);color:#fff;cursor:pointer;
  transition:background var(--t-fast),transform var(--t-base) var(--ease-out);
}
.fabPanel__close:hover,.fabPanel__close:focus-visible{background:rgba(255,255,255,.28);transform:rotate(90deg)}
.fabPanel__head :focus-visible{outline-color:#fff}

.fabPanel__links{list-style:none;margin:0;padding:.5rem}
.fabItem{
  display:grid;grid-template-columns:44px minmax(0,1fr);column-gap:.85rem;
  align-items:center;min-height:56px;padding:.45rem;
  border-radius:var(--r-sm);text-decoration:none;color:var(--ink);
  transition:background var(--t-fast) var(--ease-soft);
}
.fabItem:hover,.fabItem:focus-visible{background:var(--clay-50)}
.fabItem strong{
  grid-column:2;align-self:end;
  font-family:var(--font-sans);font-weight:600;font-size:var(--fs-sm);line-height:1.25;
  transition:color var(--t-fast) var(--ease-soft);
}
.fabItem small{grid-column:2;align-self:start;font-size:var(--fs-xs);line-height:1.35;color:var(--ink-soft)}
.fabItem:hover strong,.fabItem:focus-visible strong{color:var(--clay-800)}
.fabItem__icon{
  grid-row:1 / 3;grid-column:1;display:grid;place-items:center;
  width:44px;height:44px;border-radius:50%;
  background:var(--clay-50);color:var(--clay-700);
  transition:transform var(--t-base) var(--ease-back),background var(--t-fast);
}
.fabItem:hover .fabItem__icon,.fabItem:focus-visible .fabItem__icon{transform:scale(1.08)}
.fabItem__icon--phone{background:var(--clay-100);color:var(--clay-800)}
.fabItem__icon--whatsapp{background:var(--stone-100);color:var(--stone-700)}
.fabItem__icon--mail{background:var(--sand-3);color:var(--clay-800)}
.fabItem__icon--form{background:var(--clay-100);color:var(--clay-800)}
.fabItem__icon--pin{background:var(--stone-100);color:var(--stone-700)}
.fabItem__icon--hours{background:var(--sand-2);color:var(--ink-soft)}

.fabPanel__note{
  margin:0;padding:.85rem 1.25rem 1.1rem;
  border-top:1px solid var(--line-soft);background:var(--sand);
  font-size:var(--fs-xs);line-height:1.5;color:var(--ink-soft);
}

/* Eintraege laufen beim Oeffnen gestaffelt ein (50 ms Schritt). */
.fabPanel.is-open .fabItem{animation:staggerIn .5s var(--ease-out) both}
.fabPanel.is-open li:nth-child(1) .fabItem{animation-delay:.06s}
.fabPanel.is-open li:nth-child(2) .fabItem{animation-delay:.11s}
.fabPanel.is-open li:nth-child(3) .fabItem{animation-delay:.16s}
.fabPanel.is-open li:nth-child(4) .fabItem{animation-delay:.21s}
.fabPanel.is-open li:nth-child(5) .fabItem{animation-delay:.26s}

/* -----------------------------------------------------------------------------
   5. Zurueck nach oben mit Fortschrittsring (SPEC-01 §4.8)
   main.js setzt --p (0 bis 1) am .toTop__ringFill; der Ring fuellt sich im Uhrzeigersinn.
   -------------------------------------------------------------------------- */
.toTop{
  position:fixed;right:var(--fab-inset);
  bottom:calc(var(--fab-inset) + var(--fab-size) + 1.25rem);
  z-index:var(--z-fab);
  display:grid;place-items:center;
  width:var(--totop-size);height:var(--totop-size);padding:0;
  border:none;border-radius:50%;background:var(--paper);box-shadow:var(--sh-md);
  color:var(--clay-700);cursor:pointer;
  opacity:0;pointer-events:none;transform:translateY(10px) scale(.9);
  transition:opacity var(--t-base) var(--ease-out),
             transform var(--t-base) var(--ease-back),
             box-shadow var(--t-base) var(--ease-out);
}
.toTop.is-visible{opacity:1;pointer-events:auto;transform:none}
.toTop:hover{box-shadow:var(--sh-lg)}
.toTop__ring{position:absolute;inset:0;width:var(--totop-size);height:var(--totop-size);pointer-events:none}
.toTop__ring circle{fill:none;stroke:var(--line-soft);stroke-width:2.5}
.toTop__ring .toTop__ringFill{
  stroke:var(--clay-600);stroke-linecap:round;
  stroke-dasharray:131.95;
  stroke-dashoffset:calc(131.95 - 131.95 * var(--p,0));
  transform:rotate(-90deg);transform-origin:center;
  transition:stroke-dashoffset .12s linear,stroke var(--t-base) var(--ease-soft);
}
.toTop__icon{display:grid;place-items:center;transition:transform var(--t-base) var(--ease-out)}
.toTop:hover .toTop__icon,.toTop:focus-visible .toTop__icon{transform:translateY(-2px)}
.toTop.is-complete .toTop__ring .toTop__ringFill{stroke:var(--honey)}
.toTop.is-complete{animation:scaleIn .5s var(--ease-back)}

/* Bei geoeffnetem Menue treten FAB und Ring zurueck. */
body.is-locked .fab,body.is-locked .toTop{opacity:0;visibility:hidden;pointer-events:none}

/* -----------------------------------------------------------------------------
   6. Fussbereich
   Die Welle liegt UEBER dem letzten Abschnitt der Seite: der Fussbereich rueckt um
   ihre Hoehe nach oben, oberhalb der Kurve scheint also der Abschnitt davor durch
   und nicht der helle Seitengrund. Damit dessen Inhalt dabei nicht enger steht,
   bekommt der letzte Abschnitt unten eine Zugabe — gut die halbe Wellenhoehe, denn
   im Mittel reicht die Kurve nur so weit hinauf.
   Zwei Wellen uebereinander — die hintere warm getoent und halb durchscheinend —
   machen aus der Kante einen weichen Verlauf, egal welche Sektion davor endet.
   -------------------------------------------------------------------------- */
main > :last-child::after{content:"";display:block;height:calc(var(--footer-wave-h) * .55)}
.siteFooter{position:relative;margin-top:calc(var(--footer-wave-h) * -1)}
.siteFooter__wave{color:var(--stone-900);height:var(--footer-wave-h);margin-bottom:-1px}
.siteFooter__waveBack{fill:var(--clay-950);opacity:.36}

/* Die oberste Ebene blendet den Koerper an seiner Oberkante auf den reinen Ton der
   Welle — sonst bliebe dort, wo beide aneinanderstossen, eine gerade Linie stehen. */
.siteFooter__body{
  background-color:var(--stone-900);
  background-image:linear-gradient(180deg,var(--stone-900) 0%,rgba(30,28,26,0) clamp(6rem,14vw,11rem)),
                   radial-gradient(85% 70% at 12% 0%,rgba(118,48,31,.32) 0%,transparent 62%),
                   radial-gradient(60% 55% at 92% 100%,rgba(118,48,31,.3) 0%,transparent 70%);
  color:var(--stone-200);
  padding-block:clamp(2.5rem,6vw,4.5rem) clamp(1.5rem,3vw,2.25rem);
}
.siteFooter__body :focus-visible{outline-color:var(--clay-300)}

.siteFooter__brand{
  display:grid;grid-template-columns:auto minmax(0,1fr);
  column-gap:1rem;row-gap:.15rem;align-items:center;
  padding-bottom:clamp(1.75rem,4vw,2.5rem);margin-bottom:clamp(1.75rem,4vw,2.75rem);
  border-bottom:1px solid rgba(252,248,244,.14);
}
/* Im dunklen Fussbereich traegt der graue Teil des Logos zu wenig Kontrast —
   --logoText wird deshalb auf die helle Textfarbe gehoben. */
.siteFooter__logo{
  display:block;width:clamp(190px,22vw,248px);aspect-ratio:400/112;
  /* Auf dunklem Grund traegt das Ziegelrot des Schriftzugs zu wenig
     Kontrast. Signet und Figur bleiben, Schriftzug und Textzeilen
     werden aufgehellt. */
  --logoWord:var(--clay-300);
  --logoText:var(--stone-200);
}
.siteFooter__logoSvg{display:block;width:100%;height:100%}
.siteFooter__name{
  grid-column:2;align-self:end;margin:0;
  font-family:var(--font-display);font-weight:600;font-size:var(--fs-lg);
  line-height:1.15;letter-spacing:var(--ls-tight);color:var(--sand);
}
.siteFooter__claim{
  grid-column:2;align-self:start;margin:0;
  font-family:var(--font-display);font-weight:500;font-size:var(--fs-base);
  line-height:1.3;color:var(--clay-200);
  hyphens:manual;-webkit-hyphens:manual;   /* der Claim bricht nur an Wortgrenzen */
}

.siteFooter__grid{
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  gap:clamp(1.75rem,4vw,2.75rem);
}
@media (max-width:1023px){
  .siteFooter__grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:559px){
  .siteFooter__grid{grid-template-columns:minmax(0,1fr)}
}

.siteFooter__col{display:grid;align-content:start;gap:.55rem}
.siteFooter__colTitle{
  margin:0 0 .35rem;
  font-family:var(--font-sans);font-weight:600;font-size:var(--fs-2xs);
  letter-spacing:var(--ls-wider);text-transform:uppercase;color:var(--stone-300);
}
.siteFooter__list{list-style:none;margin:0;padding:0;display:grid;gap:0}
.siteFooter__link{
  display:inline-flex;align-items:center;gap:.55rem;min-height:44px;
  font-family:var(--font-sans);font-size:var(--fs-sm);line-height:1.35;
  color:var(--stone-200);text-decoration:none;
  transition:color var(--t-fast) var(--ease-soft),transform var(--t-base) var(--ease-out);
}
.siteFooter__link svg{flex:0 0 auto;color:var(--stone-400)}
.siteFooter__link:hover,.siteFooter__link:focus-visible{color:var(--sand);transform:translateX(4px)}
.siteFooter__link--plain{color:var(--stone-300);cursor:default}
.siteFooter__link--plain:hover{color:var(--stone-300);transform:none}

.siteFooter__address{
  font-style:normal;font-size:var(--fs-sm);line-height:var(--lh-normal);
  color:var(--stone-200);margin:0 0 .35rem;
}
.siteFooter__note{
  display:flex;align-items:flex-start;gap:.55rem;margin:0;
  font-size:var(--fs-sm);line-height:1.5;color:var(--stone-300);
}
.siteFooter__note svg{flex:0 0 auto;margin-top:.2rem;color:var(--stone-400)}

.siteFooter__social{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:.25rem}
.siteFooter__socialLink{
  display:inline-flex;align-items:center;gap:.4rem;min-height:44px;padding:.45rem 1rem;
  border:1px solid rgba(252,248,244,.22);border-radius:var(--r-pill);
  font-family:var(--font-sans);font-weight:600;font-size:var(--fs-xs);
  color:var(--stone-200);text-decoration:none;
  transition:border-color var(--t-fast),background var(--t-fast),color var(--t-fast);
}
.siteFooter__socialLink:hover,.siteFooter__socialLink:focus-visible{
  border-color:var(--clay-300);background:rgba(252,248,244,.08);color:var(--sand);
}

.siteFooter__bottom{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;
  gap:.5rem 1.5rem;
  margin-top:clamp(2rem,5vw,3rem);padding-top:1.25rem;
  border-top:1px solid rgba(252,248,244,.14);
  font-size:var(--fs-xs);line-height:1.5;color:var(--stone-300);
}
.siteFooter__bottom p{margin:0}
.siteFooter__hint a{
  color:var(--stone-200);text-decoration:none;
  border-bottom:1px solid rgba(252,248,244,.3);
  transition:color var(--t-fast),border-color var(--t-fast);
}
.siteFooter__hint a:hover,.siteFooter__hint a:focus-visible{color:var(--sand);border-bottom-color:var(--clay-300)}

/* -----------------------------------------------------------------------------
   7. Druck
   Bedienelemente verschwinden, der Fussbereich wird lesbar auf Papier.
   -------------------------------------------------------------------------- */
@media print{
  .skipLink,.progressBar,.siteHeader,.mega,.fab,.toTop,.siteFooter__wave,.bgBlob{display:none}
  main > :last-child::after{display:none}
  .siteFooter{margin-top:0}
  main{padding-top:0}
  main > .hero:first-child{margin-top:0}
  .noise::after{display:none}
  .siteFooter__body{background:none;color:#000;padding-block:1rem}
  .siteFooter__body a,.siteFooter__link,.siteFooter__note,.siteFooter__address,
  .siteFooter__name,.siteFooter__claim,.siteFooter__colTitle,.siteFooter__bottom{color:#000}
  .siteFooter__brand,.siteFooter__bottom{border-color:#999}
  .siteFooter__socialLink{border-color:#999}
  .section{padding-block:1.5rem}
}

/* -----------------------------------------------------------------------------
   8. Feinheiten, Rueckfallebenen und Geraeteanpassungen
   -------------------------------------------------------------------------- */

/* Wellen in gefaerbten Sektionen nehmen deren Grundton an. */
.section--sand2 .waveTop,.section--sand2 .waveBottom{color:var(--sand-2)}
.section--sand3 .waveTop,.section--sand3 .waveBottom{color:var(--sand-3)}
.section--stone .waveTop,.section--stone .waveBottom{color:var(--stone-800)}
.section--clay .waveTop,.section--clay .waveBottom{color:var(--clay-700)}

/* Enge Geraete: Kopfleiste und Bedienelemente ruecken zusammen. */
@media (max-width:479px){
  body{--fab-size:58px;--fab-inset:.85rem;--totop-size:44px}
  .siteHeader__inner{gap:var(--s3)}
  .brand__mark{height:34px}
  .menuToggle{padding:.5rem .7rem}
}

/* Flaches Querformat: das Menue darf nicht mittig eingeklemmt werden. */
@media (max-height:560px){
  .mega__inner{align-content:start;padding-block:clamp(4.5rem,12vh,6rem) 3rem}
  .mega__link{font-size:clamp(1.4rem,3.4vw,2rem);min-height:40px}
}

/* Geraete ohne echten Zeiger: keine haengenden Hover-Verschiebungen. */
@media (hover:none){
  .mega__link:hover,.mega__sub a:hover,.siteFooter__link:hover,.mega__contact a:hover{transform:none}
  .navDesk__link:hover{animation:none}
  .fab__btn:hover{box-shadow:var(--sh-glow)}
}

/* Rueckfall fuer Browser ohne clip-path: das Menue blendet weich ein. */
@supports not (clip-path:circle(50% at 50% 50%)){
  .mega{opacity:0;transition:opacity var(--t-base) var(--ease-out)}
  .mega.is-open{opacity:1}
}

/* Windows-Kontrastmodus: Flaechen verschwinden, Umrisse muessen tragen. */
@media (forced-colors:active){
  .siteHeader.is-scrolled{background:Canvas;border-bottom-color:CanvasText}
  .mega{background:Canvas}
  .mega__link,.mega__sub a,.mega__contact a,.mega__foot a,
  .siteFooter__link,.siteFooter__socialLink{color:LinkText}
  .fab__btn,.toTop,.mega__close,.fabPanel__close,.menuToggle{border:1px solid ButtonText}
  .toTop__ring circle{stroke:CanvasText}
  .progressBar{background:Highlight}
  .bgBlob,.noise::after,.fab__btn::before{display:none}
}

/* Reduzierte Bewegung: base.css kuerzt alle Dauern. Hier zusaetzlich die
   Zustaende absichern, die sonst nur ueber eine Animation entstehen wuerden. */
@media (prefers-reduced-motion:reduce){
  .mega.is-open{clip-path:circle(150% at 50% 50%)}
  .fab__btn::before{display:none}
  .bgBlob{animation:none}
}