/* Manrope — self-hosted (DSGVO: kein Google-Fonts-Hotlink) */
@font-face{font-family:"Manrope";font-style:normal;font-weight:400;font-display:swap;src:url("assets/fonts/manrope-latin-ext-400.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}
@font-face{font-family:"Manrope";font-style:normal;font-weight:400;font-display:swap;src:url("assets/fonts/manrope-latin-400.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}
@font-face{font-family:"Manrope";font-style:normal;font-weight:500;font-display:swap;src:url("assets/fonts/manrope-latin-ext-500.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}
@font-face{font-family:"Manrope";font-style:normal;font-weight:500;font-display:swap;src:url("assets/fonts/manrope-latin-500.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}
@font-face{font-family:"Manrope";font-style:normal;font-weight:600;font-display:swap;src:url("assets/fonts/manrope-latin-ext-600.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}
@font-face{font-family:"Manrope";font-style:normal;font-weight:600;font-display:swap;src:url("assets/fonts/manrope-latin-600.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}
@font-face{font-family:"Manrope";font-style:normal;font-weight:700;font-display:swap;src:url("assets/fonts/manrope-latin-ext-700.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}
@font-face{font-family:"Manrope";font-style:normal;font-weight:700;font-display:swap;src:url("assets/fonts/manrope-latin-700.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}
@font-face{font-family:"Manrope";font-style:normal;font-weight:800;font-display:swap;src:url("assets/fonts/manrope-latin-ext-800.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}
@font-face{font-family:"Manrope";font-style:normal;font-weight:800;font-display:swap;src:url("assets/fonts/manrope-latin-800.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}
/* =====================================================================
   grubenhund — SHARED SHELL overrides (loaded AFTER each page's inline
   <style>, so these rules win by cascade order).

   Covers the three shell pieces that must look + behave identically on
   every page:
     1) HEADER  — sticky, opaque "sandy wavy heap" band. Nav is ALWAYS
        dark ink on sand (no scroll-driven colour adaptation). Logo =
        transparent dog mark + CSS wordmark, no white box.
     2) FOOTER  — clean brand block + at most 2 link columns + socials
        row + ONE slim bottom bar. Zero duplication.
     3) SHEET   — a CLOSED bottom sheet is fully off-screen AND inert
        (translateY + visibility:hidden + pointer-events:none) so it can
        never peek at the bottom of the page.

   The flipped earth backdrop + all existing guardrails are untouched.
===================================================================== */

/* ---------------------------------------------------------------------
   TYPOGRAPHY — MANROPE ONLY (single typeface, whole site).
   Manrope is the CI body / UI / nav / button / caption font (loaded per-page
   in each <head>) AND now the display face for headings. No second face: any
   prior display @import is removed and --font-display now resolves to Manrope.
   Headlines get CHARACTER from weight + tight tracking
   (h1 / large display h2 → Manrope 800, letter-spacing −.02em, line-height ~1.0)
   rather than from a separate display font. Single typeface, whole site.
   (Pages still reference var(--font-display); it now maps to Manrope, so every
   heading renders in Manrope regardless of any leftover per-page <link>.)
--------------------------------------------------------------------- */
:root{
  /* display face = Manrope (single typeface site-wide) */
  --font-display:'Manrope',system-ui,-apple-system,sans-serif;

  /* DESIGN-SYSTEM RADIUS SCALE — tight, named steps. Replaces the prior
     near-duplicate 12/13/14, 20, 24/26/28 one-offs across this file. */
  --r-sm:12px;
  --r-md:18px;
  --r-lg:24px;
  --r-xl:32px; --r-button:25px;
  --r-pill:999px;
}

/* ---- shared sand + grain tokens (warm sand for the header heap) ----
   Light, clean, warm sand matched to the earth's TOP surface-sand stratum
   and the brand creme/sand tokens. NOT dark, NOT ochre/yellow.

   EARTH-LAYER LOOK: header, both menus and the big content text boxes are now
   SOLID, GRAINED sand/creme — NO glass / NO transparency. The grain is the SAME
   feTurbulence recipe as the earth backdrop (fractalNoise, baseFrequency 0.9,
   numOctaves 2, seed 7), encoded ONCE here as a reusable data-URI overlay and
   blended (multiply) at low opacity so every surface reads as genuine earth
   material instead of a flat fill. One shared layer, no per-frame work. */
:root{
  --sand-heap:#FAF7F2;                 /* SOLID warm sand for header + both menus */
  --content-sand:#FAF7F2;              /* SOLID warm creme for content text boxes */
  /* DESIGN-SYSTEM TIDY: shell-local elevation tokens (mirror the per-page
     --shadow-sm/md/lg recipe so this file is self-contained). One-off shadows
     below now reference these instead of bespoke rgba blurs — no visual change,
     the values match what was already painted. */
  --shadow-sm:0 10px 30px rgba(28,28,30,.08);
  --shadow-md:0 18px 48px rgba(28,28,30,.12);
  --shadow-lg:0 26px 72px rgba(28,28,30,.16);
  /* ONE shared grain tile — same soilGrain turbulence as the earth backdrop.
     Rendered to a transparent tile; painted via multiply on the solid surfaces. */
  --grain-tile:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' seed='7' stitchTiles='stitch' result='n'/%3E%3CfeColorMatrix in='n' type='matrix' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .9 0'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23g)'/%3E%3C/svg%3E");
  /* low-alpha grain (alpha .12) for surfaces painted as a DIRECT background layer
     with background-blend-mode (mask-clipped pseudos like the dune) where a
     separate opacity overlay isn't available — matches the ~.10–.12 overlay weight. */
  --grain-tile-soft:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' seed='7' stitchTiles='stitch' result='n'/%3E%3CfeColorMatrix in='n' type='matrix' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .12 0'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23g)'/%3E%3C/svg%3E");
}
/* ---------------------------------------------------------------------
   DISPLAY-HEADING TREATMENT + mid-scale fix (loaded after page <style>,
   wins by cascade). MANROPE on the BIG display headings, given character via
   heavy weight + tight tracking (no separate display font):
     • h1                — every page's largest headline
     • .hero h1/h2       — home hero display
     • .page-hero h1/h2  — subpage hero display
     • large section h2  — the base h2 is clamp(1.7rem..2.9rem) = always large
   Body, nav, buttons, captions, eyebrows + small headings (h3 etc.) stay
   Manrope at lighter weight. Manrope 800 + −.02em + line-height ~1.0 reads
   confident + crafted at display size without a second face.
--------------------------------------------------------------------- */
h1,
h2,
.hero h1,.hero h2,
.page-hero h1,.page-hero h2,
.page-hero-inner h1,.page-hero-inner h2{
  font-family:var(--font-display);       /* = Manrope */
  font-weight:700;                       /* heavy = display character */
  font-optical-sizing:auto;
  letter-spacing:-.02em;                 /* tight display tracking */
  line-height:1.0;                        /* compact display leading */
}
/* mid-scale hole fix: H3 was 1.14rem (~18px) — too close to body. Lift it to
   ~22–24px so it reads as a clear step between the big H2 (~46px) and body.
   MANROPE 700, kept at the mid scale (a structural sub-head, not display). */
h3{
  font-family:'Manrope',system-ui,-apple-system,sans-serif;
  font-size:clamp(1.32rem,1.9vw,1.5rem);  /* ~21–24px */
  font-weight:700;
  letter-spacing:-.01em;
  line-height:1.2;
}

/* =====================================================================
   TEXT-LEGIBILITY SYSTEM — SIZE- & CONTEXT-AWARE (owner's latest rules +
   research decision matrix). REPLACES the prior broad 8-direction text-shadow
   outline (which was applied everywhere — hero, sublines, page-heros — and
   looked wrong on small text + over the photo). Four cases:

     CASE A  LARGE heading over a PHOTO  (home hero, post-hero w/ lead image)
             → NO outline. Premium 2-layer soft text-shadow on the heading +
               a LOCALIZED directional scrim under the copy corner only (the
               photo subject stays visible). White headline, CI-red accent.

     CASE B  LARGE heading over BARE variable earth (home section H2s,
             subpage page-hero H1s) → CRISP OUTLINE via -webkit-text-stroke +
             paint-order:stroke fill (preserves glyph counters, no box, no halo).
               • white text → dark stroke rgba(40,40,40,.92)
               • dark-ink text → white stroke rgba(250,247,242,.95)
             + a tiny fallback text-shadow 0 1px 3px rgba(0,0,0,.3).
             Accent word = CI-red #C6464A with the white stroke.

     CASE C  SMALL text over BARE earth (the sublines under those B headings)
             → NO outline (looks bad on small text). Instead a LOCALIZED,
               feathered gradient SCRIM behind the block (never a rectangle),
               via a masked ::before. Only where the subline is WHITE over
               dark/variable earth; dark-ink sublines over light earth read
               without a scrim.

     CASE E  text inside cards/boxes → NO outline/scrim/shadow. Token colour
             only (handled where each card paints itself; we strip leaks below).

   The ACCENT word is real CI-RED #C6464A.
===================================================================== */

/* ---- shared reusable utilities -------------------------------------- */
/* CASE B legibility — floating text now reads via a DEZENT soft shadow (no
   outline/stroke). Owner update: premium look, never a hard contour or box. */
.hl-outline-dark{                          /* WHITE text over dark/variable earth */
  -webkit-text-stroke:0 !important;
  text-shadow:0 1px 2px rgba(0,0,0,.55),0 2px 12px rgba(0,0,0,.45) !important;
}
.hl-outline-light{                         /* DARK-ink (or CI-red) text over light earth */
  -webkit-text-stroke:0 !important;
  text-shadow:0 1px 2px rgba(255,255,255,.66),0 2px 10px rgba(255,252,247,.5) !important;
}
/* the real CI-red accent word (set the colour; the stroke comes from the
   surrounding .hl-outline-* on the heading, or is set explicitly per case). */
.hl-accent{ color:#C6464A !important; }

/* BRAND WORDMARK — GENERAL RULE: the "hund" in EVERY "grubenhund" is ALWAYS the
   real CI-red #C6464A, site-wide. shell-ui.js auto-wraps every "grubenhund" in a
   .gh-hund span (no per-text edits), and this single rule colours them all. */
.gh-hund{ color:#C6464A !important; }

/* =====================================================================
   .scrim-text — LEGACY HOOK. Pages keep the class in markup; it now only
   provides a stacking context. The radial scrim BLOCK is killed (CASE B/C
   replace its job). For CASE-C sublines the localized feathered scrim is added
   on the <p> itself (see below), NOT here.
===================================================================== */
.scrim-text{
  position:relative;
  isolation:isolate;
}
/* radial scrim pool KILLED — no darkening box behind section-intro text. */
.scrim-text::before{ content:none !important;display:none !important; }

/* PAGE-HERO INTRO AS SCRIM-TEXT — subpage .page-hero-inner.scrim-text sits over
   BARE top-of-earth (no photo, no box). CASE B for the H1 + crumbs, CASE C for
   the .lede subline. We drop the feathered creme "clearing" + its padding, kill
   any page-painted scrim ::before, and colour the text WHITE (the bright
   top-of-earth is medium-dark soil at the page-hero scroll position). */
.page-hero-inner.scrim-text{
  padding-top:0 !important;
  padding-bottom:0 !important;
  background:transparent !important;
  border:none !important;box-shadow:none !important;
  -webkit-backdrop-filter:none !important;backdrop-filter:none !important;
  overflow:visible !important;          /* let the CASE-C subline scrim feather past edges */
}
/* ONE cohesive, premium darkening behind the WHOLE hero text block (eyebrow /
   crumbs + headline + subline) so all three read equally. It is a large, heavily-
   blurred pool with a LONG, multi-stop falloff → the fade is so gradual it reads
   as the light naturally changing, never a visible shadow edge. */
.page-hero-inner.scrim-text::before{
  content:"" !important; display:block !important;
  position:absolute !important;
  inset:-2.4em -9em -6em -5em !important;
  z-index:-1 !important; pointer-events:none !important;
  /* Faint ambient lift ONLY — legibility is carried by the crisp per-glyph
     text-shadows below, so this pool stays low-peak (.38) and, crucially, its
     opacity falls CONTINUOUSLY from the very centre (no held plateau) across a
     13-stop ramp. There is no solid core and no defined edge — combined with a
     heavy 46px blur the darkening reads as the ambient light easing, never a
     shadow with a locatable boundary. */
  background:radial-gradient(118% 128% at 30% 46%,
    rgba(0,0,0,.38) 0%,
    rgba(0,0,0,.355) 10%,
    rgba(0,0,0,.32) 20%,
    rgba(0,0,0,.28) 30%,
    rgba(0,0,0,.235) 40%,
    rgba(0,0,0,.19) 50%,
    rgba(0,0,0,.148) 60%,
    rgba(0,0,0,.108) 69%,
    rgba(0,0,0,.072) 78%,
    rgba(0,0,0,.042) 86%,
    rgba(0,0,0,.02) 92%,
    rgba(0,0,0,.007) 97%,
    transparent 100%) !important;
  filter:blur(46px) !important;
  -webkit-mask-image:none !important; mask-image:none !important;
}
.page-hero-inner.scrim-text > *{ position:relative;z-index:1; }
/* WHITE H1 + crumbs. Legibility is carried HERE — a tight, near-opaque 1px dark
   layer crisps every glyph edge, plus one soft halo. This does the readability
   work so the ambient pool above can stay faint + edgeless. */
.page-hero-inner.scrim-text h1,
.page-hero-inner.scrim-text .crumbs,
.page-hero-inner.scrim-text .crumbs a,
.page-hero-inner.scrim-text .crumbs span[aria-current]{
  color:#FFFFFF !important;
}
.page-hero-inner.scrim-text h1{
  -webkit-text-stroke:0 !important;
  text-shadow:0 1px 2px rgba(0,0,0,.6),0 2px 14px rgba(0,0,0,.4) !important;
}
/* crumbs / eyebrow is SMALL → it needs the tightest, darkest glyph shadow. */
.page-hero-inner.scrim-text .crumbs,
.page-hero-inner.scrim-text .crumbs a,
.page-hero-inner.scrim-text .crumbs span[aria-current]{
  -webkit-text-stroke:0 !important;
  text-shadow:0 1px 1px rgba(0,0,0,.82),0 1px 6px rgba(0,0,0,.52) !important;
}
.page-hero-inner.scrim-text .crumbs a:hover{ color:#FFFFFF !important; }
/* the accent word (.em / .gh-hund) = REAL CI-red #C6464A; the dark glyph shadow
   keeps it crisp (LARGE display text, so 3:1 suffices). */
/* The accent word is CI-red — a heavy dark shadow muddies it into a dirty,
   darker-than-brand red. Keep ONE tight low-opacity edge for separation over the
   earth; the ambient pool behind the block carries the rest. Red stays clean. */
.page-hero-inner.scrim-text h1 .em,
.page-hero-inner.scrim-text h1 .gh-hund{
  color:#C6464A !important;
  -webkit-text-stroke:0 !important;
  text-shadow:0 1px 2px rgba(0,0,0,.3) !important;
}
/* the subpage .lede subline: WHITE, crisp per-glyph shadow (no box, no separate
   scrim — the single ambient pool above covers it too). */
.page-hero-inner.scrim-text .lede{
  color:#FFFFFF !important;
  -webkit-text-stroke:0 !important;
  text-shadow:0 1px 1px rgba(0,0,0,.66),0 2px 10px rgba(0,0,0,.4) !important;
}
/* the single container pool above covers the subline too — no separate scrim */
.page-hero-inner.scrim-text .lede::before{ content:none !important; display:none !important; }

/* CASE A — full-bleed text-on-photo hero (kept as a hook; the home hero paints
   its own localized scrim + premium shadow in the page <style>, overridden by
   the home-hero block at the end of this file). NO broad outline here. */
.hero-scrim{ position:relative; }
.hero-scrim,.hero-scrim h1,.hero-scrim h2,.hero-scrim p{ color:#fff; }

/* The grain is applied per-surface via ::after below (no markup change needed):
   one shared --grain-tile, multiply-blended, opacity tuned per surface
   (header/menus ~0.10, content boxes ~0.12). Each surface gets position
   context + its content lifted to z-index:1 so the grain sits UNDER the
   text/links. mix-blend-mode:multiply darkens the solid sand into material. */

/* =====================================================================
   1) HEADER — sandy wavy heap (sticky + opaque)

   LAYOUT (rebuilt):
     • DESKTOP (>900px): logo LEFT · nav links (centre-ish) · actions RIGHT —
       ALL on ONE compact row (~64–72px). A flex row, no grid, no dead centre.
     • MOBILE (≤900px): empty spacer LEFT · absolutely-centred logo · hamburger
       RIGHT (thumb-reachable). NO "Schreib mir" CTA in the header (the bottom
       contact FAB covers contact on mobile).

   The dune/wave bottom edge is painted by a ::after PSEUDO-ELEMENT (an SVG
   background sitting just below the band) instead of a CSS mask, so the
   topbar keeps overflow:visible and the "Mehr" dropdown is never clipped.
===================================================================== */
.topbar{
  position:sticky;             /* sticky band */
  top:0;left:0;right:0;
  z-index:120;
  /* 3-COLUMN GRID — nav (left) · logo (centre) · actions (right). The logo is
     CENTRED on every breakpoint because the centre column is `auto` and the two
     `1fr` side columns balance around it. */
  display:grid !important;
  grid-template-columns:1fr auto 1fr;
  align-items:center;gap:12px;
  /* compact band; small bottom gap leaves room for the dune that bulges below.
     padding-bottom carries the wave bleed (see SEAM ROOT FIX below).
     FIX 2 — padding-TOP is raised so the gap ABOVE the (bigger) logo equals the
     gap BELOW it measured to the wave's DEEPEST point (~99.5% of the band
     height), accounting for the 16px padding-bottom wave bleed. See the
     padding-top override + .brand img height in the EARTH-LAYER PASS below. */
  padding:9px max(14px,2.4vw) 11px;
  /* SEAM ROOT FIX: the WHOLE header is ONE shape painted in ONE go — an inline
     SVG rectangle whose BOTTOM edge IS the dune wave, filled with the sand
     colour, painted on a ::before that is mask-clipped to that SAME wave shape
     so the sand AND its grain both stop exactly at the wave silhouette (no stray
     grain in the corners beside the dip, no separate ::after dune, no two-layer
     boundary = no seam). The topbar itself carries NO background (overflow stays
     visible so the "Mehr" dropdown, a child, is never clipped). The wave path:
     flat to 84% of the painted height, then a convex bulge to ~99.5%. */
  --topbar-wave-svg:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpath d='M0 0 H100 V84 C75 99.5 25 99.5 0 84 Z' fill='%23000'/%3E%3C/svg%3E");
  background:transparent !important;  /* fill + grain live on the masked ::before */
  color:var(--ink) !important; /* nav text ALWAYS dark ink on sand */
  /* the wave bleed lives in padding-bottom so the SVG's curved bottom edge hangs
     below the nav row, and the next section's content starts under it. */
  padding-bottom:20px !important;            /* compact: wave bleed + small gap */
  /* COMPACT band — a bigger logo must NOT make the header taller (owner). With a
     ~107px band (19 top + 68 logo + 20 bottom) the wave's deepest point
     (~99.5% = ~106.5px) sits ~20px below the logo, matching the ~19px gap above
     it (logo optically centred between the band top and the wave's deepest point).
     The wave depth scales with band height. (Mobile re-sets this below in the
     EARTH-LAYER PASS media query.) */
  padding-top:19px !important;
  /* SEAM FIX: NO border / NO outline / NO box-shadow on the band — any of those
     paints a hairline exactly where the wave meets content. */
  box-shadow:none !important;
  border:none !important;outline:none !important;
  overflow:visible !important; /* never clip the Mehr dropdown */
  -webkit-mask:none !important;mask:none !important;
  /* NO glass: header is a solid grained earth-layer, identical at every scroll */
  -webkit-backdrop-filter:none !important;backdrop-filter:none !important;
  /* SEAM-SAFE ELEVATION: a drop-shadow FILTER follows the rendered silhouette
     (the wave-shaped SVG), so the soft shadow hugs the wave's curve instead of
     painting a straight line. */
  filter:drop-shadow(0 6px 14px rgba(28,28,30,.10));
  transition:filter .28s ease;
}
/* SEAM ROOT FIX: ONE shape, ONE paint. The ::before is the entire header
   silhouette — solid sand + soil grain (multiply) — and is MASK-CLIPPED to the
   wave SVG so both the fill and the grain end exactly on the wave curve. No flat
   fill, no stray grain in the corners, no second dune layer → no seam at any
   width or zoom. It sits at z-index 0 (behind nav content), inset to the full
   padded box so the wave's curved bottom reaches into the padding-bottom bleed.*/
.topbar::before{
  content:"" !important;display:block !important;
  position:absolute;inset:0;pointer-events:none;z-index:0;
  background-image:linear-gradient(var(--sand-heap),var(--sand-heap));
  background-repeat:repeat,no-repeat;
  background-size:120px 120px,100% 100%;
  background-blend-mode:multiply,normal;
  -webkit-mask-image:var(--topbar-wave-svg);mask-image:var(--topbar-wave-svg);
  -webkit-mask-size:100% 100%;mask-size:100% 100%;
  -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
}
/* the old ::after dune is GONE — neutralise any leftover from a page's CSS. */
.topbar::after{ content:none !important;display:none !important; }
/* keep nav content above the masked wave shape — AND pin all three groups to ONE
   row (explicit grid-column on a source-first centre logo otherwise wraps the
   side columns into row 2 → logo-above-nav). grid-row:1 forces a single row so
   nav · logo · actions sit on the SAME level (align-items:center). */
.topbar > *{ position:relative;z-index:1;grid-row:1;align-self:center; }
/* ON SCROLL: NO glass. The header stays the EXACT same solid grained sand at
   scroll-0 and when scrolled/deep — so the rounded dune never changes look on
   scroll (fixes the wave-on-scroll mismatch). Only the soft shadow may deepen
   a touch for separation; background + grain + dune are identical. */
.topbar.scrolled,
.topbar.deep{
  /* keep the EXACT same one-shape wave background at every scroll — only the
     silhouette-following drop-shadow deepens. Do NOT set a flat `background`
     here (that would erase the wave shape and reintroduce a straight edge). */
  background-color:transparent !important;
  color:var(--ink) !important;
  -webkit-backdrop-filter:none !important;
          backdrop-filter:none !important;
  box-shadow:none !important;
  filter:drop-shadow(0 8px 18px rgba(28,28,30,.14));
}
.topbar.deep .nav-links a,
.topbar.deep .nav-more-btn,
.topbar.deep .nav-login,
.topbar.deep .menu-toggle,
.topbar.deep .brand,
.topbar.deep .brand b{ color:var(--ink) !important; }

/* nav hover/affordances on sand (consistent, ink-on-sand).
   Hover-Farben NUR auf Zeigegeräten → kein „Sticky-Hover" nach Tap auf Touch. */
@media (hover:hover){
  .topbar .nav-links a:hover,
  .topbar .nav-more-btn:hover{ background:rgba(28,28,30,.07) !important; }
  .topbar .nav-login:hover{ background:rgba(28,28,30,.09) !important; }
}
.topbar .nav-login{
  border:1px solid rgba(28,28,30,.18) !important;
  background:rgba(28,28,30,.04) !important;
  color:var(--ink) !important;
}
.topbar .menu-toggle{
  background:rgba(28,28,30,.07) !important;
  border:1px solid rgba(28,28,30,.14) !important;
  color:var(--ink) !important;
  min-height:44px !important;   /* ≥44px tap target */
}
/* ≥44px Tap-Targets auch für die restlichen Header-Controls (WCAG 2.5.5) */
.topbar .nav-login,.topbar .nav-more-btn,.nav-cta{ min-height:44px !important; align-items:center; }
/* active nav link: ink text (AA on sand) + teal underline as the selection cue —
   avoids the borderline #C6464A-on-sand contrast and follows the brand rule
   (teal = selection/structure, red reserved for the primary action). */
.topbar .nav-links a[aria-current="page"]{
  color:var(--ink) !important;
  text-decoration:underline !important;
  text-decoration-color:var(--teal) !important;
  text-decoration-thickness:2px !important;
  text-underline-offset:5px !important;
}

/* =====================================================================
   PRIMARY CTA — brand-red fill, white text (~6:1 AA on #C6464A).
   The primary "Schreib mir" CTA shipped as `.btn-red.btn-wa`, where the
   green `.btn-wa` was overriding the red `.btn-red` → the conversion CTA
   read as a generic WhatsApp button. We force the SHARED primary button
   (.nav-cta + .btn-red, incl. the .btn-red.btn-wa combo) back to brand red
   with white text + white glyph. The small WhatsApp glyph stays (inline SVG
   in the markup; it inherits currentColor = white here). GREEN survives ONLY
   on the FAB's WhatsApp option (.cp-wa) and any standalone .btn-wa/.bar-wa
   that is NOT the primary red CTA.
===================================================================== */
.nav-cta,
.btn-red,
.btn-red.btn-wa{
  background:#C6464A !important;          /* brand-red fill, ~6:1 AA with white text */
  color:#fff !important;                 /* white label + glyph (currentColor) */
  box-shadow:var(--shadow-md) !important;
  border:none !important;                    /* borderless — ONE brand button geometry */
  border-radius:var(--r-pill) !important;    /* 999px full pill (matches hero + portal) */
}
@media (hover:hover){
  .btn-red.btn-wa:hover,
  .nav-cta:hover{
    box-shadow:var(--shadow-lg) !important;
  }
}
/* the WhatsApp glyph inside the red CTA = white, sized like a small icon */
.nav-cta svg,.btn-red svg,.btn-red.btn-wa svg{ fill:currentColor !important; }

/* ---------------------------------------------------------------------
   LOGO — ONE full logo image (dog-in-hole + "grubenhund", hund already red,
   transparent). Dark on light sand = good contrast, NO white box.
   DESKTOP: pinned LEFT (flex order:0), nav links flex-grow to take the middle,
   actions sit at the far right.
--------------------------------------------------------------------- */
/* LOGO — CENTRE column of the 3-col grid (centred on every breakpoint). */
.brand{
  grid-column:2 !important;justify-self:center !important;
  display:inline-flex;align-items:center;justify-content:center;
  gap:0;min-width:0;line-height:0;
  position:static;left:auto;top:auto;transform:none;   /* reset any page/old absolute centring */
}
.brand img{
  display:block;
  width:auto !important;height:68px !important;   /* bigger desktop logo (owner) — band stays COMPACT via reduced padding (owner: bigger logo must NOT make the header taller) */
  border-radius:0 !important;border:none !important;
  background:none !important;object-fit:contain;
}
/* DESKTOP nav links → LEFT column, hug the left edge. */
.topbar .nav-links{
  grid-column:1 !important;justify-self:start !important;
  flex:0 1 auto;justify-content:flex-start;margin-left:0;
}
/* DESKTOP actions → RIGHT column, hug the right edge. "Mein Bereich" only. */
.topbar .nav-right{
  grid-column:3 !important;justify-self:end !important;
  flex:0 0 auto;margin-left:0;
}
/* REMOVE the "Schreib mir" CTA from the header on ALL breakpoints (desktop +
   mobile). Contact lives in the bottom FAB (every viewport now). */
.topbar .nav-cta{ display:none !important; }

/* MOBILE (≤900px): empty spacer LEFT · centred logo · hamburger RIGHT.
   SAME 3-col grid (1fr auto 1fr) as desktop → logo stays optically centred. The
   hamburger lives in .nav-right; we place .nav-right in the RIGHT column
   (justify-self:end); the LEFT column (col 1) stays empty so the 1fr · auto · 1fr
   tracks balance the centred logo on their own. CTA is hidden in the header. */
@media(max-width:900px){
  .topbar{
    display:grid !important;
    grid-template-columns:1fr auto 1fr;
    align-items:center;
    padding-left:max(12px,3vw) !important;padding-right:max(12px,3vw) !important;
  }
  /* logo stays in the centre column, centred (no absolute positioning).
     NOTE: the authoritative mobile logo HEIGHT lives in the EARTH-LAYER PASS media
     query below (62px) — not duplicated here, to avoid a dead/contradictory rule. */
  .brand{
    grid-column:2 !important;justify-self:center !important;
    position:static !important;left:auto !important;top:auto !important;transform:none !important;
  }
  /* actions (hamburger) → RIGHT column, hug the right edge */
  .topbar .nav-right{
    grid-column:3 !important;justify-self:end !important;
    margin-left:0;display:flex;align-items:center;gap:8px;
  }
  /* LEFT column (col 1) is left empty — the explicit 1fr · auto · 1fr track
     sizing balances the centred logo on its own, no spacer element needed. */
}

/* MOBILE MENU panel — SAME SOLID grained sand as the header (one earth layer).
   NO glass / NO backdrop-filter. Grain via ::before, links lifted above it. */
.mobile-panel{
  background:var(--sand-heap) !important;
  -webkit-backdrop-filter:none !important;
          backdrop-filter:none !important;
  color:var(--ink) !important;
  position:relative;
}
.mobile-panel::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background-image:var(--grain-tile);background-size:140px 140px;
  mix-blend-mode:multiply;opacity:.05;z-index:0;border-radius:inherit;
}
.mobile-panel a,.mobile-panel .sub-cap{ position:relative;z-index:1; }
.mobile-panel a{ color:var(--ink) !important; }
.mobile-panel a:hover,.mobile-panel a:active{ background:rgba(28,28,30,.06) !important; }

/* =====================================================================
   2) "Mehr" DROPDOWN — OVERLAYS, never grows the header.
   The trigger wrapper is position:relative; the panel is FORCED out of normal
   flow (position:absolute, anchored under the trigger) so opening it cannot add
   to .topbar's flex height — header height is identical open vs closed. The
   topbar has overflow:visible so the panel shows in full; z-index sits well
   above the band + dune so all items render on top. =====*/
.topbar .nav-more{ position:relative;z-index:140; }
.topbar .nav-more-menu{
  position:absolute !important;            /* out of flow → never grows header */
  top:calc(100% + 6px) !important;         /* anchored just under the trigger */
  right:0 !important;left:auto !important;bottom:auto !important;
  z-index:200 !important;                  /* above band + dune */
  /* TASK 8 — "Mehr" dropdown = fade + rise. The page toggles the menu via
     display:none ↔ display:flex. We KEEP that toggle (closed = display:none, so
     the closed panel is correctly inert + not tabbable) and run the fade+rise as
     a CSS @keyframes ANIMATION the moment the panel is shown (display:flex on
     open). A keyframe animation has no transition "from-state registration"
     pitfall, so it fires reliably. transform-origin top-right anchors the rise. */
  transform-origin:top right;
}
.topbar .nav-more[data-open="true"] .nav-more-menu{
  animation:navMoreRise .22s cubic-bezier(.2,.7,.2,1) both;
}
@keyframes navMoreRise{
  from{ opacity:0;transform:translateY(-6px); }
  to{ opacity:1;transform:translateY(0); }
}
@media (prefers-reduced-motion: reduce){
  .topbar .nav-more[data-open="true"] .nav-more-menu{ animation:none !important; }
}

/* =====================================================================
   3) MOBILE MENU — COMPACT dropdown anchored under the header on the RIGHT
   (hamburger is right). Sized to content (NOT full-screen). Sandy-glass look,
   rounded, soft shadow. The backdrop is a transparent full-screen catcher for
   outside-click; the panel itself is content-height in the top-right corner.
   Only applies ≤900px (desktop uses .nav-links + .nav-more).
===================================================================== */
@media(max-width:900px){
  /* backdrop = click-catcher; dezent erd-dunkel abgedunkelt, damit das Menü klar
     über der Seite steht (wie bei den Sheets, nur leichter). */
  .mobile-sheet{ background:transparent !important;-webkit-backdrop-filter:none !important;backdrop-filter:none !important;
    transition:background-color .3s ease !important; }
  .mobile-sheet[data-open="true"]{ background:rgba(22,14,5,.34) !important; }
  @media (prefers-reduced-motion: reduce){ .mobile-sheet{ transition:none !important; } }
  /* Header vom Menü-Dim AUSNEHMEN: die Topbar über den .mobile-sheet-Backdrop
     (z:200) heben — aber unter das Produkt-Sheet (scrim z:210 / sheet z:220).
     So bleibt der Header klar, während alles darunter abgedunkelt wird. Das Panel
     (z:200-Kontext) ankert bei top:58px, also genau unter dem Header — kein
     Overlap. Der Backdrop unter dem Header fängt weiterhin Außen-Klicks (Schließen). */
  .topbar{ z-index:205 !important; }
  /* the panel: anchored top-right under the band, content-height, rounded */
  .mobile-panel{
    position:absolute !important;
    top:max(58px,calc(env(safe-area-inset-top,0px) + 58px)) !important;
    right:max(12px,3vw) !important;left:auto !important;bottom:auto !important;
    width:auto !important;min-width:226px !important;max-width:min(82vw,300px) !important;
    height:auto !important;max-height:calc(100dvh - 96px) !important;
    padding:8px !important;border-radius:var(--r-lg) !important;
    border:1px solid rgba(28,28,30,.1) !important;
    box-shadow:var(--shadow-lg) !important;
    gap:1px !important;overflow-y:auto !important;overscroll-behavior:contain !important;
    /* TASK 8 — mobile menu = slide-in + fade ~.3s ease. Slides in from the right
       edge (translateX) and fades; the panel is anchored top-right. */
    transform:translateX(12px) translateY(-6px) !important;opacity:0;
    transform-origin:top right;
    transition:transform .3s ease, opacity .3s ease !important;
  }
  .mobile-sheet[data-open="true"] .mobile-panel{
    transform:translateX(0) translateY(0) !important;opacity:1;
  }
  /* clean vertical list — ≥44px tap targets */
  .mobile-panel a{
    font-size:.98rem !important;font-weight:700 !important;
    padding:11px 14px !important;border-radius:var(--r-md) !important;
    min-height:44px !important;display:flex !important;align-items:center !important;
  }
  /* tiny section caption above the "Mehr" items */
  .mobile-panel .sub-cap{ padding:10px 14px 3px !important;font-size:.62rem !important; }
  /* hide any leftover "Schreib mir" red button if a page still ships one */
  .mobile-panel .btn-red{ display:none !important; }
  @media (prefers-reduced-motion: reduce){
    .mobile-panel{ transition:none !important;transform:none !important; }
    .mobile-sheet[data-open="true"] .mobile-panel{ transform:none !important; }
  }
}

/* the sticky sand band already reserves header space in normal flow, so
   the ~120px top offset pages baked in for the OLD fixed bar is no longer
   needed — drop it to a small breathing gap (subpages use .page-hero;
   hundeleben uses .hero). */
.page-hero{ padding-top:28px !important; }
@media(max-width:560px){ .page-hero{ padding-top:20px !important; } }

/* =====================================================================
   FADE-CARD recipe — ported from the app's Tagebuch DiaryMomentCard /
   DiaryMomentVisual. Image full-bleed on top, a SHORT bottom feather that
   dissolves ONLY the last ~10% of the photo into the white card surface
   (no hard image edge), then eyebrow / title / meta on white below.
   Shared bottom-fade gradient — verbatim from the brief:
   crisp to ~88%, then a quick ramp to solid white by ~98%. =============*/
:root{
  --fade-card-bottom:linear-gradient(180deg,
    rgba(255,255,255,0) 0%,
    rgba(255,255,255,0) 88%,
    rgba(255,255,255,.5) 93%,
    rgba(255,255,255,.85) 96%,
    #FFFFFF 98%,
    #FFFFFF 100%);
}
/* a generic media wrapper that carries the bottom feather. Put the <img>
   inside an element with .gh-fade-media; the ::after paints the feather. */
.gh-fade-media{position:relative;overflow:hidden}
.gh-fade-media > img{display:block;width:100%;height:100%;object-fit:cover}
.gh-fade-media::after{
  content:"";position:absolute;inset:0;z-index:2;pointer-events:none;
  background:var(--fade-card-bottom);
}
/* the card shell (app recipe): white surface, soft 1px ink border, --r-xl radius */
.gh-fade-card{
  background:#FFFFFF;border:1px solid rgba(28,28,30,.1);border-radius:var(--r-xl);overflow:hidden;
}
/* text block on the white card — eyebrow (category, coloured), title, meta */
.gh-fade-body{display:flex;flex-direction:column;gap:9px;padding:14px}
.gh-fade-body .gh-eyebrow{font-weight:700;font-size:.81rem;letter-spacing:.08em;text-transform:uppercase;line-height:1.1}
.gh-fade-body .gh-title{font-weight:600;font-size:1rem;line-height:1.22;color:var(--ink);
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.gh-fade-body .gh-meta{font-weight:500;font-size:.86rem;line-height:1.4;color:var(--muted)}

/* =====================================================================
   DEPTH METER — bolder, modern scroll-progress + depth display (brand USP).
   Owner wants it MORE prominent, not subtler. Loaded after the page <style>,
   so these win by cascade over the inline faint-HUD rules.

   Redesign (markup unchanged — fill + chips already exist; the "you are here"
   marker is injected by shell.js as `.depth-now-marker` inside .depth-track):
     • thicker rail (3px → 8px) with a clearer light groove
     • confident animated fill (warm-sand → deep-soil), soft inner highlight
     • a visible "you are here" knob that tracks scroll down the rail
     • larger, legible depth number (−12 m … 0 m) + phase chip, dark ink on a
       light chip (AA-safe), tabular numerals
     • tasteful motion only; reduced-motion collapses transitions
===================================================================== */
.depth{
  right:max(12px,2.2vw);
  gap:11px !important;
  z-index:90;
}
/* depth READING chip — bigger + bolder, dark ink on light (AA) */
.depth-read{
  font-variant-numeric:tabular-nums;
  font-weight:700 !important;
  font-size:1.04rem !important;            /* up from .92rem */
  letter-spacing:-.01em !important;
  padding:7px 13px !important;
  border-radius:var(--r-pill) !important;
  background:rgba(255,255,255,.94) !important;
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  border:1px solid rgba(28,28,30,.2) !important;
  color:var(--ink) !important;             /* dark ink on light chip = AA */
  box-shadow:var(--shadow-sm) !important;
}
/* the RAIL — noticeably thicker + a clearer groove */
.depth-track{
  width:8px !important;                    /* up from 3px */
  height:min(46vh,320px) !important;
  border-radius:var(--r-pill) !important;
  background:rgba(255,255,255,.62) !important;
  box-shadow:0 0 0 1px rgba(28,28,30,.16), inset 0 1px 2px rgba(28,28,30,.12) !important;
  overflow:visible !important;             /* let the "you are here" knob sit proud */
}
/* the FILL — confident warm-soil gradient digging DOWN from the top */
.depth-fill{
  border-radius:var(--r-pill) !important;
  /* honest mini-stratigraphy: the SAME 6 sediment bands, ending in the gold Schatz —
     deeper = warmer/goldener, NEVER black (mirrors the new earth). */
  background:linear-gradient(180deg,
    #EFE3CB 0%, #EAD9BA 17%, #E4C9A0 34%, #DDB488 52%,
    #CFA074 70%, #B07A4E 86%, #E0B25B 100%) !important;
  box-shadow:inset 0 1px 1px rgba(255,255,255,.4) !important;
  will-change:transform;
}
@media (prefers-reduced-motion: no-preference){
  /* the JS sets scaleY each frame; a tiny ease smooths sub-pixel jumps */
  .depth-fill{ transition:transform .12s linear; }
}
/* "YOU ARE HERE" marker — injected by shell.js, rides the bottom of the fill.
   A confident ringed knob; its top is set in px by JS (= fill height). */
.depth-now-marker{
  position:absolute;left:50%;top:0;
  width:11px;height:11px;border-radius:50%;
  transform:translate(-50%,-50%);
  background:#fff;
  border:2.5px solid var(--red);
  box-shadow:0 1px 5px rgba(28,28,30,.28),0 0 0 3px rgba(255,255,255,.6);
  pointer-events:none;z-index:2;
}
@media (prefers-reduced-motion: no-preference){
  .depth-now-marker{ transition:top .12s linear; }
}
/* phase chip — a touch larger + still AA dark-ink-on-light */
.depth-now{
  font-size:.66rem !important;             /* up from .60rem */
  font-weight:700 !important;
  letter-spacing:.1em !important;
  padding:6px 11px !important;
  border-radius:var(--r-pill) !important;
  color:var(--ink) !important;             /* AA on the light chip */
  background:rgba(255,255,255,.94) !important;
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  border:1px solid rgba(28,28,30,.2) !important;
  box-shadow:var(--shadow-sm) !important;
  max-width:130px !important;
}
@media (prefers-reduced-motion: reduce){
  .depth-fill,.depth-now-marker{ transition:none !important; }
}

/* =====================================================================
   2) FOOTER — clean: brand block + 2 link columns + socials + slim bar
===================================================================== */
footer.foot .foot-grid{
  display:flex;flex-wrap:wrap;gap:28px 48px;
  justify-content:space-between;align-items:flex-start;
}
/* brand block: logo + ONE-LINE wordmark + role line */
footer.foot .foot-brand{display:flex;align-items:flex-start;gap:12px;max-width:340px}
footer.foot .foot-brand img{
  width:auto !important;height:42px !important;
  border:none !important;border-radius:0 !important;background:none !important;
  object-fit:contain;flex:0 0 auto;
}
footer.foot .foot-brand b{
  display:block;white-space:nowrap;          /* wordmark NEVER stacks */
  font-weight:700;color:#fff;font-size:1.1rem;line-height:1.1;
}
/* WORDMARK FIX — "gruben"+"hund" must read as ONE inline word, same size +
   weight, with "hund" in CI-red. The page's `.foot-brand span{display:block}`
   rule was catching the nested `.gh-hund`, stacking it on its own line + muting
   it. Force the "hund" part inline + red here (shell wins by cascade). */
footer.foot .foot-brand b .gh-hund,
footer.foot .foot-brand b span{
  display:inline !important;white-space:nowrap !important;
  margin:0 !important;
  font-size:inherit !important;font-weight:inherit !important;line-height:inherit !important;
  color:#C6464A !important;                   /* "hund" in real CI-red */
}
footer.foot .foot-brand .foot-role{
  display:block;margin-top:5px;font-size:.84rem;
  color:rgba(255,255,255,.62);font-weight:500;line-height:1.45;
}
footer.foot .foot-cols{display:flex;flex-wrap:wrap;gap:24px 48px}
/* TASK 7 — DROP the duplicate "Mehr" footer column entirely (it duplicated the
   header nav). The footer keeps exactly: brand block · ONE "Seiten" column ·
   the socials row · ONE slim bottom bar. The "Mehr" column is hidden by its
   aria-label (markup is shared across pages; shell.css wins by cascade). */
footer.foot .foot-col[aria-label="Mehr"]{ display:none !important; }
/* the socials block is a labelled column in markup; keep it as a clean socials
   row (its cap stays, it reads as "Folgen" — no nav duplication). */

/* slim bottom bar — © + address + phone + legal + login, each ONCE */
footer.foot .foot-legal{
  margin-top:26px;padding-top:18px;
  border-top:1px solid rgba(255,255,255,.12);
  display:flex;flex-wrap:wrap;align-items:center;gap:6px 14px;
  font-size:.78rem;color:rgba(255,255,255,.6);font-weight:500;line-height:1.6;
}
footer.foot .foot-legal a{color:rgba(255,255,255,.75);text-decoration:none}
footer.foot .foot-legal a:hover{color:#fff;text-decoration:underline;text-underline-offset:3px}
footer.foot .foot-legal .sep{opacity:.4}

/* =====================================================================
   3) SHEET — closed = fully off-screen + inert (no peek anywhere)
===================================================================== */
.sheet{
  visibility:hidden;          /* inert + invisible while closed */
  pointer-events:none;
  transform:translateY(110%); /* clears any bottom offset / safe-area */
  /* shell.css loads last → this transition wins over each page's inline one.
     visibility is DELAYED on close (0s linear .32s) so the downward slide-out
     stays VISIBLE instead of the sheet vanishing instantly — the JS unlocks the
     background on the matching transform transitionend, i.e. once the sheet has
     truly left the screen (mirrors the .sheet-scrim fade-out trick above). */
  transition:transform .32s cubic-bezier(.2,.7,.2,1), visibility 0s linear .32s;
}
.sheet[data-open="true"]{
  visibility:visible;
  pointer-events:auto;
  transform:translateY(0);
  transition:transform .32s cubic-bezier(.2,.7,.2,1), visibility 0s; /* open: show at once */
}
/* reduced motion: no slide (matches the JS, which unlocks the background at once). */
@media (prefers-reduced-motion: reduce){
  .sheet, .sheet[data-open="true"]{ transition:none !important; }
}
/* keep scrolling inside the open sheet from chaining to the page behind it (the JS
   scroll-lock allows touch/wheel inside the sheet, so the sheet body must contain it). */
.sheet-body{ overscroll-behavior: contain; }
/* desktop = centered floating dialog; below 900 = full-width bottom sheet (no page
   peeking beside it on phones/tablets). MUST match each page's inline sheet geometry
   breakpoint (also 900) or the transform + geometry desync and the sheet shifts. */
@media(min-width:900px){
  .sheet{ transform:translate(-50%,110%); }
  .sheet[data-open="true"]{ transform:translate(-50%,0); }
}
/* BACKDROP FADE — the page sets the scrim to `display:none` → `display:block`,
   which makes the opacity transition unreliable (display can't tween). Override
   to keep it ALWAYS displayed but inert+transparent while closed, so opacity +
   the soft blur fade IN on open and OUT on close (paired with the sheet's
   slide-up). visibility is delayed on close so the fade-out is visible. */
.sheet-scrim{
  display:block !important;
  pointer-events:none;
  opacity:0;
  visibility:hidden;
  transition:opacity .26s ease, visibility 0s linear .26s !important;
}
.sheet-scrim[data-open="true"]{
  pointer-events:auto;
  opacity:1;
  visibility:visible;
  transition:opacity .26s ease, visibility 0s !important;
}
@media (prefers-reduced-motion: reduce){
  .sheet-scrim,.sheet-scrim[data-open="true"]{ transition:none !important; }
}

/* =====================================================================
   4) CONTACT FAB — premium minimalist speech-bubble button (ALL viewports)

   ONE small circular FAB, fixed bottom-right, respecting the safe-area inset.
   Tap → an elegant drop-UP popover above the FAB with three circular contact
   options (WhatsApp / Phone / Mail). Shown on every viewport now (the header no
   longer carries a contact CTA). It floats over content; fixed + high z-index,
   never causes horizontal overflow (wrap is content-sized + capped to 100vw−24px).
===================================================================== */
.contact-fab-wrap{
  position:fixed;z-index:170;
  right:max(16px,2vw);
  bottom:calc(20px + env(safe-area-inset-bottom,0px));
  display:flex;                 /* shown on ALL viewports (FAB floats everywhere) */
  flex-direction:column;align-items:flex-end;gap:12px;
  /* the wrap is only as big as its children so it never spans the viewport */
  width:auto;max-width:calc(100vw - 24px);
  pointer-events:none;          /* children re-enable pointer events */
}
.contact-fab-wrap > *{ pointer-events:auto; }

/* the FAB itself — circular, brand red, white speech-bubble glyph */
.contact-fab{
  order:2;                      /* FAB sits BELOW the popover (popover drops UP) */
  width:56px;height:56px;flex:0 0 auto;
  border:none;cursor:pointer;border-radius:50%;
  background:var(--red);color:#fff;
  display:inline-flex;align-items:center;justify-content:center;
  box-shadow:0 10px 26px rgba(198,70,74,.36),0 2px 6px rgba(28,28,30,.18);
  transition:transform .2s cubic-bezier(.2,.7,.2,1), box-shadow .2s ease;
}
.contact-fab:hover{ transform:translateY(-2px);box-shadow:0 14px 32px rgba(198,70,74,.46),0 2px 6px rgba(28,28,30,.18); }
.contact-fab:active{ transform:translateY(0) scale(.96);transition:transform .08s ease; }
/* the two glyphs (chat + close) crossfade; the close X is hidden by default */
.contact-fab .fab-ic{ position:absolute;display:inline-flex;transition:opacity .18s ease, transform .22s ease; }
.contact-fab .fab-ic-chat{ opacity:1;transform:rotate(0) scale(1); }
.contact-fab .fab-ic-close{ opacity:0;transform:rotate(-90deg) scale(.6); }
.contact-fab[aria-expanded="true"] .fab-ic-chat{ opacity:0;transform:rotate(90deg) scale(.6); }
.contact-fab[aria-expanded="true"] .fab-ic-close{ opacity:1;transform:rotate(0) scale(1); }

/* the drop-UP popover — three circular contact options */
.contact-pop{
  order:1;                      /* visually above the FAB */
  display:flex;flex-direction:column;align-items:flex-end;gap:14px;
  margin:0;padding:0;list-style:none;
  opacity:0;visibility:hidden;pointer-events:none;
  transform:translateY(10px) scale(.96);transform-origin:bottom right;
  transition:opacity .2s ease, transform .22s cubic-bezier(.2,.7,.2,1), visibility .2s;
}
.contact-pop[data-open="true"]{
  opacity:1;visibility:visible;pointer-events:auto;
  transform:translateY(0) scale(1);
}
.contact-pop li{ display:flex;align-items:center;gap:10px;flex-direction:row-reverse; }
/* each action = clean circular icon button ≥44px + optional pill label */
.contact-pop a{
  width:48px;height:48px;flex:0 0 auto;border-radius:50%;
  display:inline-flex;align-items:center;justify-content:center;
  background:#fff;color:var(--ink);
  box-shadow:0 8px 20px rgba(28,28,30,.18),0 1px 3px rgba(28,28,30,.12);
  transition:transform .18s ease, box-shadow .18s ease;
}
.contact-pop a:hover{ transform:translateY(-2px);box-shadow:0 12px 26px rgba(28,28,30,.26); }
.contact-pop a:active{ transform:translateY(0) scale(.95);transition:transform .08s ease; }
.contact-pop a.cp-wa{ background:#25D366;color:#fff; }
.contact-pop a.cp-phone{ background:var(--teal);color:#fff; }
.contact-pop a.cp-mail{ background:var(--ink);color:#fff; }
.contact-pop .cp-label{
  font-family:inherit;font-weight:700;font-size:.82rem;color:var(--ink);
  background:rgba(255,255,255,.95);border:1px solid rgba(28,28,30,.08);
  padding:7px 12px;border-radius:999px;white-space:nowrap;
  box-shadow:0 6px 16px rgba(28,28,30,.14);
}
/* staggered entrance — top option (WhatsApp) appears last for a gentle cascade */
.contact-pop[data-open="true"] li{ animation:cpIn .26s cubic-bezier(.2,.7,.2,1) both; }
.contact-pop[data-open="true"] li:nth-child(1){ animation-delay:.10s; }
.contact-pop[data-open="true"] li:nth-child(2){ animation-delay:.05s; }
.contact-pop[data-open="true"] li:nth-child(3){ animation-delay:0s; }
@keyframes cpIn{ from{ opacity:0;transform:translateY(8px) scale(.92); } to{ opacity:1;transform:none; } }

@media (prefers-reduced-motion: reduce){
  .contact-fab,.contact-fab .fab-ic,.contact-pop{ transition:none !important; }
  .contact-pop[data-open="true"] li{ animation:none !important; }
}

@media (prefers-reduced-motion: reduce){
  .topbar{transition:none}
}

/* =====================================================================
   EARTH-LAYER PASS — solid grained sand/creme surfaces (NO glass)
   + desktop "Mehr" dropdown + mobile logo.
   (loaded after each page's inline <style>, so these win by cascade.)

   The big TEXT boxes used to be frosted glass over the moving earth. They are
   now SOLID warm creme (#FAF7F2) WITH the shared earth grain — so each reads as
   a genuine sand "layer" in the cross-section, not a flat white slab or a thin
   translucent film over the parallax. De-blocking now comes from the grain
   texture + warm earth-near tone + soft edges, NOT transparency.
===================================================================== */

/* TASK A — SOFT "CLEARINGS" in the soil for the big TEXT surfaces (NOT floating
   cards). Targets the home hero copy card, every subpage page-hero card, and
   every .surface-card (lede/intro cards, the kontakt form card, the "Was wir
   üben" card all live on .surface-card / .page-hero-inner / .hero-inner).
   NOT touched: image fade-cards (.gh-fade-card/.tile/.blog-tease), circle
   service photos (.svc-ava), round review avatars, the dark schatz card.

   SOLID-CARD RECIPE (owner: solid cards must be CLEAN solid — no edge mask):
     • NO box-shadow + NO border — nothing that draws a hard floating rectangle.
     • The solid creme + grain fill lives on a ::before layer (inset:0), painted
       CLEAN to the rounded corners — NO edge feather / NO mask. A solid card is
       a solid card; the rounded corners + warm grain are enough.
     • The TEXT (z-index:1) sits over the fully-solid fill everywhere → AA holds.
   The radial .scrim-text scrim BEHIND floating-over-earth text is a SEPARATE
   thing (it is not a box) and is untouched. */
.hero-inner,
.page-hero-inner,
.surface-card{
  background:transparent !important;            /* fill lives on ::before (solid) */
  -webkit-backdrop-filter:none !important;
          backdrop-filter:none !important;
  border:none !important;                       /* no hard rectangle edge */
  border-radius:var(--r-xl) !important;         /* generous, soft corners */
  box-shadow:none !important;                   /* not a floating card */
  position:relative;
  isolation:isolate;                            /* contain the grain blend */
  overflow:hidden;                              /* clip the grain to the radius */
  padding-top:clamp(34px,4.5vw,52px) !important;
  padding-bottom:clamp(34px,4.5vw,52px) !important;
}
/* THE FILL LAYER — solid creme + soil grain, CLEAN to the rounded corners.
   NO mask / NO edge feather (Task 6: solid cards are clean solid). Sits UNDER
   the text (z-index:0); the parent's border-radius + overflow:hidden round it. */
.hero-inner::before,
.page-hero-inner::before,
.surface-card::before{
  content:"";position:absolute;inset:0;pointer-events:none;z-index:0;
  border-radius:inherit;
  /* grain (multiply-light) over the solid warm creme — ONE painted layer */
  background-image:var(--grain-tile-soft),linear-gradient(var(--content-sand),var(--content-sand));
  background-size:140px 140px,100% 100%;
  background-blend-mode:multiply,normal;
  /* NO mask-image — the fill is solid right up to the rounded corners. */
  -webkit-mask-image:none !important;mask-image:none !important;
}
/* lift the card's real content above the feathered fill layer */
.hero-inner > *,
.page-hero-inner > *,
.surface-card > *{ position:relative;z-index:1; }

/* TASK B — desktop "Mehr" dropdown = SAME SOLID grained sand as the header
   (pages set it to var(--creme)/glass). No backdrop-filter; grain via ::before. */
.topbar .nav-more-menu{
  background:var(--sand-heap) !important;
  -webkit-backdrop-filter:none !important;
          backdrop-filter:none !important;
  border:1px solid rgba(28,28,30,.1) !important;
  box-shadow:var(--shadow-md) !important;
  position:relative;overflow:hidden;
}
.topbar .nav-more-menu::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background-image:var(--grain-tile);background-size:140px 140px;
  mix-blend-mode:multiply;opacity:.05;z-index:0;border-radius:inherit;
}
.topbar .nav-more-menu a{ position:relative;z-index:1; }

/* TASK C — mobile (≤900px): larger centred logo. The logo is now a normal grid
   item (centre column), centred by the grid — NOT absolutely positioned — so the
   one-shape wave background (padding-bottom bleed) is preserved. Just grow the
   logo; keep the 27px padding-bottom (wave bleed) from the base .topbar rule. */
@media(max-width:900px){
  /* COMPACT band on mobile too — bigger logo, NOT a taller header (owner).
     Band = 18 top + 62 logo + 19 bottom = 99px; wave deepest ~99.5% = ~98.5px;
     gap below = 98.5 − (18+62) = ~18.5px → matches the ~18px top gap (centred). */
  .topbar{ padding-top:18px !important;padding-bottom:19px !important; }
  .brand img{ height:62px !important; }            /* larger than the original 58 on mobile */
}

/* =====================================================================
   TASK 8 — SUBTLE INTERACTION MOTION (transform/opacity only, hover-capable
   pointers only, prefers-reduced-motion gated). Applies a consistent gentle
   hover-lift + :active press to buttons & links, and a gentle hover-lift to
   cards / bento tiles. Loaded after page <style> so it wins by cascade, but it
   only ADDS a base transition + lift — it never changes colours or layout.
===================================================================== */
@media (hover:hover) and (pointer:fine) and (prefers-reduced-motion: no-preference){
  /* buttons + links: ensure a transition baseline, then a small lift on hover */
  .btn-red,.btn-ghost,.nav-login,.bar-btn,.btn-wa,
  .nav-links a,.nav-more-btn,.foot-col a,.foot-legal a{
    transition:transform .18s cubic-bezier(.2,.7,.2,1), box-shadow .18s ease, background-color .16s ease;
  }
  .btn-red:hover,.btn-ghost:hover,.nav-login:hover,.bar-btn:hover,.btn-wa:hover{
    transform:translateY(-2px);
  }
  .nav-links a:hover,.nav-more-btn:hover,.foot-col a:hover,.foot-legal a:hover{
    transform:translateY(-1px);
  }
  /* press feedback — quick settle back down */
  .btn-red:active,.btn-ghost:active,.nav-login:active,.bar-btn:active,
  .btn-wa:active,.nav-links a:active,.nav-more-btn:active{
    transform:translateY(0) scale(.98);transition:transform .08s ease;
  }
  /* cards / bento tiles: gentle hover-lift (transform only) */
  .tile,.gh-fade-card,.blog-tease,.svc-card,.review-card,.card{
    transition:transform .2s cubic-bezier(.2,.7,.2,1), box-shadow .2s ease;
  }
  .tile:hover,.gh-fade-card:hover,.blog-tease:hover,.svc-card:hover,
  .review-card:hover,.card:hover{
    transform:translateY(-3px);
  }
}

/* =====================================================================
   ACCESSIBILITY PASS — contrast fixes (loaded after page <style>, win by cascade).

   1) FORM FIELDS — the page CSS gives inputs a faint rgba(28,28,30,.16) edge
      and a #767676 placeholder; both wash out on the warm creme form card. Bump
      the border to rgba(28,28,30,.38) (visible ≥3:1 edge) and the placeholder to
      #6e6e73 (≥4.5:1 on white/creme). Border width / radius / layout unchanged.
   2) MARKERS ON LIGHT CARDS — the creme-on-translucent `.on-dark .marker` style
      (#f7e6c0 on rgba(12,7,3,.5)) is sometimes inherited onto a marker placed
      inside a LIGHT `.surface-card`, where it falls to ~3.22:1 and fails AA.
      Re-skin any `.marker` sitting in a light `.surface-card` to ink-on-light.
===================================================================== */
/* 1) form-control TEXT + edges + placeholder — NEVER light-on-light.
   Field TEXT = --ink (#1C1C1E) on the white/creme fill; visible edge; AA
   placeholder. The text colour is forced here so no .on-dark / inherited
   light colour can ever leak white text onto a light field. */
.cf-field input,.cf-field textarea,.cf-field select,
.surface-card input,.surface-card textarea,.surface-card select,
input,textarea,select{
  color:var(--ink) !important;                   /* dark field text on light fill */
}
.cf-field input,.cf-field textarea,.cf-field select,
.surface-card input,.surface-card textarea,.surface-card select{
  border-color:rgba(28,28,30,.5) !important;   /* ≥3:1 visible edges over white */
}
.cf-field input::placeholder,.cf-field textarea::placeholder,
.surface-card input::placeholder,.surface-card textarea::placeholder,
input::placeholder,textarea::placeholder{
  color:#6e6e73 !important;                      /* ≥4.5:1 placeholder */
  opacity:1;                                     /* Firefox dims by default */
}
/* labels = ink (in case an .on-dark context wraps a light form card) */
.cf-field label,.surface-card label{ color:var(--ink) !important; }
/* 1b) SECTION HEADINGS inside light form / surface cards → DARK ink.
   The form-section heading rendered WHITE on the light creme card (an inherited
   .on-dark / section colour leaked onto it) = light-on-light fail. Force every
   heading + lede/paragraph inside a LIGHT surface card to --ink. White text is
   only ever legitimate on the dark scrim / dark cards (.schatz, .on-dark slabs),
   which are NOT .surface-card / .info-card / .cf-* and so are untouched here. */
.surface-card h1,.surface-card h2,.surface-card h3,.surface-card h4,
.info-card h1,.info-card h2,.info-card h3,.info-card h4,
.contact-form h1,.contact-form h2,.contact-form h3,.contact-form h4,
.cf-field legend,.contact-grid .surface-card h2{
  color:var(--ink) !important;
}
/* 2) markers inside a light surface-card → AA ink-on-light */
.surface-card .marker{
  color:var(--ink) !important;
  background:rgba(28,28,30,.06) !important;
  border-color:rgba(28,28,30,.22) !important;
}

/* =====================================================================
   CASE A — HOME HERO (large heading over the Titelbild PHOTO).
   Loaded after the home page <style>, so these win by cascade. The PRIOR pass
   (a) put a strong FULL-PHOTO vertical scrim on .hero-photo.hero-scrim::after
   (darkened Patrick + the dogs) and (b) applied the broad 8-direction outline
   to the hero eyebrow/headline/subline. Both are now REPLACED:
     • NO outline on hero text.
     • Headline = premium soft 2-layer text-shadow (no stroke).
     • A LOCALIZED directional scrim covers ONLY the copy corner — the photo
       subject (Patrick + dogs) stays visible. Reaches ~.6 under the text.
   Hero headline + subline = WHITE; accent 'Hund' = real CI-red #C6464A (LARGE
   display text → 3:1 suffices, the ~.6 scrim under it lifts it ≥3:1).
===================================================================== */
/* KILL the full-photo vertical scrim — the localized corner scrim replaces it. */
.hero-photo.hero-scrim::after{
  background:none !important;
}
/* LOCALIZED scrim under the copy corner only. The copy is anchored top-LEFT on
   desktop, so a 105deg gradient from the top-left corner darkens just that zone
   and fades to transparent before the photo subject (right/centre). Painted on
   .hero-copy::before so it tracks the copy box; bleeds past its padded edges. */
.hero-photo .hero-copy::before{
  content:"" !important;display:block !important;
  position:absolute !important;
  inset:-1.4em -3em -1.6em -1.6em !important;       /* hug the copy, bleed onto the photo */
  z-index:-1 !important;pointer-events:none !important;
  /* HORIZONTAL scrim + VERTICAL feather-mask = a soft pool with NO hard edge on any
     side. The gradient darkens the LEFT copy column and reaches transparent BEFORE
     the box's right edge (so the photo subject — Patrick + dogs, right/centre —
     stays clear AND there is no hard right edge). The 180deg mask feathers the TOP
     and BOTTOM box edges into the photo. The left edge is clipped by the photo's
     rounded border. (The prior radial was over-sized 135%/165%, so it never reached
     transparent inside the box → residual alpha stepped to 0 at the box edges =
     hard right/bottom cuts. This replaces that.) Strong plateau under the text so
     the 2nd-line CI-red 'Hund' over bright grass still hits ≥3:1. */
  background:linear-gradient(95deg,
    rgba(9,6,3,.84) 0%,
    rgba(9,6,3,.66) 34%,
    rgba(9,6,3,.36) 60%,
    rgba(9,6,3,.12) 80%,
    transparent 92%) !important;
  -webkit-mask-image:linear-gradient(180deg,transparent 0%,#000 16%,#000 84%,transparent 100%) !important;
          mask-image:linear-gradient(180deg,transparent 0%,#000 16%,#000 84%,transparent 100%) !important;
}
/* hero copy stays above its own scrim */
.hero-photo .hero-copy{ position:relative;z-index:2;isolation:isolate; }
/* hero text — WHITE, NO outline, premium soft shadow. SCOPED to .hero-photo
   (the text-on-PHOTO hero) so the BOX heros that also use .hero (e.g. hundeleben
   .hero-inner = CASE E, dark ink) are NOT affected. */
.hero-photo .hero-eyebrow{
  -webkit-text-stroke:0 !important;
  text-shadow:0 1px 3px rgba(0,0,0,.5) !important;
}
.hero-photo h1{
  color:#fff !important;
  -webkit-text-stroke:0 !important;
  text-shadow:0 1px 2px rgba(0,0,0,.45),0 2px 12px rgba(0,0,0,.35) !important;
}
.hero-photo h1 .gh-hund{
  color:#C6464A !important;               /* real CI-red — LARGE display → 3:1 ok */
  -webkit-text-stroke:0 !important;
  text-shadow:0 1px 2px rgba(0,0,0,.45),0 2px 12px rgba(0,0,0,.35) !important;
}
.hero-photo .lede{
  color:#fff !important;
  -webkit-text-stroke:0 !important;
  text-shadow:0 1px 3px rgba(0,0,0,.5) !important;
}
/* MOBILE — the photo is TALLER (set in the page CSS) so the upper ~half shows the
   subject (Patrick + the dogs) FREE, and the copy sits in a CLEAN STRAIGHT BOTTOM
   BAND (owner's chosen layout: "Text in cleanem Band UNTEN aufs Foto"). The band is
   a plain VERTICAL gradient — solid behind the whole text (eyebrow→button; CI-red
   'Hund' measured ≥3.7:1, all white text ≥14:1) and feathering only at its TOP edge
   into the photo. No diagonal, no mask: the bottom/sides meet the clipped rounded
   photo edge, the top feathers via the gradient → no hard edge. The photo crop
   (object-position, page CSS) keeps the faces above the band. */
@media(max-width:560px){
  .hero-photo .hero-copy::before{
    inset:-1.2em -1.4em -1.4em -1.4em !important;
    background:linear-gradient(0deg,
      rgba(7,5,2,.93) 0%,
      rgba(7,5,2,.91) 58%,
      rgba(7,5,2,.84) 78%,
      rgba(7,5,2,.62) 90%,
      rgba(7,5,2,.24) 97%,
      transparent 100%) !important;
    -webkit-mask-image:none !important;
            mask-image:none !important;
  }
}

/* =====================================================================
   OWNER UPDATE — hero copy floats over the photo with a SOFT, dezent darkening
   behind it (NOT a hard box/gradient): a low-opacity, heavily-feathered radial
   pool that reads as a soft shadow, plus a premium text-shadow on the glyphs.
   Enough to lift white text + the CI-red 'Hund' over bright photo spots without
   any visible panel/edge.
===================================================================== */
.hero-photo .hero-copy::before{
  content:"" !important; display:block !important;
  position:absolute !important;
  inset:-3em -8em -3.5em -3em !important;    /* generous box so the fade completes far INSIDE it — no clip edge */
  z-index:-1 !important; pointer-events:none !important;
  background:radial-gradient(62% 70% at 30% 52%,
    rgba(0,0,0,.54) 0%,
    rgba(0,0,0,.33) 34%,
    rgba(0,0,0,.14) 56%,
    rgba(0,0,0,.03) 70%,
    transparent 80%) !important;    /* +50% opacity vs before; still fully transparent well inside the box */
  filter:blur(12px) !important;     /* smears any residual edge → the darkening stays edge-less */
  -webkit-mask-image:none !important; mask-image:none !important;
}
.hero-photo .hero-eyebrow{ text-shadow:0 1px 2px rgba(0,0,0,.55),0 2px 10px rgba(0,0,0,.4) !important; }
.hero-photo h1,
.hero-photo h1 .gh-hund{ text-shadow:0 1px 2px rgba(0,0,0,.5),0 2px 12px rgba(0,0,0,.42) !important; }
.hero-photo .lede{ text-shadow:0 1px 3px rgba(0,0,0,.55),0 2px 12px rgba(0,0,0,.4) !important; }

/* =====================================================================
   CASE B + CASE C — HOME SECTION INTROS over BARE variable earth.
   #stimmen (.rev-head) / #tipps (.lead-head) → WHITE over dark soil.
   #leistungen (.lead-head) → DARK ink over light/mid sand.
   #methode heading/sub → WHITE on the dark method-card (CASE E-ish; keep crisp).
   H2 = CASE B crisp text-stroke; subline <p> = CASE C feathered scrim (white
   only) or bare dark ink (light earth, no scrim).
===================================================================== */
/* CASE B — ALL floating section H2s: WHITE + crisp dark text-stroke. Works over
   light sand OR dark soil because the dark stroke IS the contrast edge (the parallax
   puts these intros over the light sandy stratum, and white+dark-stroke reads there
   AND over the dark transit band). Owner accepted the stroke for bare headings. */
#stimmen .rev-head.scrim-text h2,
#leistungen .lead-head.scrim-text h2,
#tipps .lead-head.scrim-text h2{
  color:#FFFFFF !important;
  -webkit-text-stroke:0 !important;
  text-shadow:0 1px 2px rgba(0,0,0,.55),0 2px 12px rgba(0,0,0,.45) !important;
}
/* SMALL floating intro text (sublines + the rating num/source): WHITE + a SOFT DARK
   shadow that hugs the glyphs — a soft contrast EDGE, NOT a hard stroke, NOT a scrim
   box/blob, NOT a light halo (owner disliked both the dark blob behind the rating
   and the light halo on the subline). The dark shadow gives legibility on light sand
   AND dark soil with no ::before pool. */
#stimmen .rev-head.scrim-text .rev-stars-line .num,
#stimmen .rev-head.scrim-text .rev-stars-line .src,
#leistungen .lead-head.scrim-text p,
#tipps .lead-head.scrim-text p{
  color:#FFFFFF !important;
  -webkit-text-stroke:0 !important;
  text-shadow:none !important;          /* light earth now → the dark glow was the "weird shadow" */
  display:inline-block;
}
/* gold stars are defined by the 1px #333 outline now → no drop-shadow blob */
#stimmen .rev-head.scrim-text .rev-stars-line .glyphs svg{
  filter:none;
}
/* KILL every leftover scrim ::before pool/blob on these intros (the "alte
   Schlagschatten" the owner flagged). */
#tipps .lead-head.scrim-text p::before,
#stimmen .rev-head.scrim-text .rev-stars-line::before,
#leistungen .lead-head.scrim-text p::before{ content:none !important;display:none !important; }
/* #methode heading + sub are WHITE on the dark method-card (a real box) → CASE E:
   token colour only, NO outline/scrim/shadow. */
#methode .method-card h2,
#methode .method-card .sub{
  -webkit-text-stroke:0 !important;
  text-shadow:none !important;
}

/* ===================================================================
   CI Stufe 3 — Homepage on-dark Content-Bänder sind jetzt helle Creme-Flächen.
   Ihre Sektions-Header lagen direkt auf dunkler Erde (weiß + scrim-text-Stroke);
   da shell.css ZULETZT lädt, gewinnt dieses !important über die Inline-Regeln.
   IDs #leistungen/#tipps existieren nur auf der Startseite → Subpages unberührt.
=================================================================== */
#leistungen .lead-head.scrim-text h2, #tipps .lead-head.scrim-text h2{
  color:var(--ink) !important;
  -webkit-text-stroke:0 !important;
  text-shadow:none !important;
}
#leistungen .lead-head.scrim-text, #leistungen .lead-head.scrim-text p,
#tipps .lead-head.scrim-text, #tipps .lead-head.scrim-text p{
  color:#5c5c60 !important;
}

/* #stimmen rev-head sat on the (formerly dark) earth → now LIGHT earth backdrop → force ink.
   (Same fix as #leistungen/#tipps; shell.css loads last so this wins the .scrim-text cascade.) */
#stimmen .rev-head.scrim-text, #stimmen .rev-head.scrim-text h2{
  color:var(--ink) !important; -webkit-text-stroke:0 !important; text-shadow:none !important;
}
#stimmen .rev-head.scrim-text .num{ color:var(--ink) !important; }
#stimmen .rev-head.scrim-text .src{ color:#5c5c60 !important; }
#stimmen .rev-head .marker{
  color:var(--ink) !important; background:rgba(28,28,30,.06) !important; border-color:rgba(28,28,30,.16) !important;
}
#stimmen .rev-head.scrim-text .rev-stars-line .num{ color:var(--ink) !important; }
#stimmen .rev-head.scrim-text .rev-stars-line .src{ color:#5c5c60 !important; }

/* Depth meter: show ONLY the metre reading, NOT the layer/phase label (Patrick). */
.depth-now{ display:none !important; }

/* ===================================================================
   Dark INK section-intros that sit over the LIGHT content background keep NO
   stroke/shadow (a shadow there only paints a muddy halo). The subpage
   .page-hero-inner.scrim-text is DELIBERATELY excluded now — its WHITE text sits
   over the DARK top-of-earth and relies on the crisp per-glyph shadow defined
   near the top of this file for legibility. Re-adding it here would kill that.
=================================================================== */
.lead-head.scrim-text, .lead-head.scrim-text h2, .lead-head.scrim-text p,
.rev-head.scrim-text, .rev-head.scrim-text h2{
  -webkit-text-stroke:0 !important;
  text-shadow:none !important;
}

/* FIX (Patrick): gold review stars on the light website background get a 1px #333333
   outline so they stay defined (gold-on-cream alone is too low-contrast). */
.rev-stars-line .glyphs svg path, .rev-teaser .rt-stars svg path,
.rt-stars svg path, .sheet-by .stars svg path{
  stroke:#333333 !important; stroke-width:1.3 !important;
}
.rev-stars-line .glyphs svg, .rev-teaser .rt-stars svg, .rt-stars svg, .sheet-by .stars svg{
  overflow:visible;
}

/* ===================================================================
   BOOKING (Subdomain-Modell): the header "Termin buchen" CTA (.nav-cta) is shown again
   on desktop (it was hidden in the clean v6 header); on mobile it lives in the menu.
=================================================================== */
.topbar .nav-cta{ display:inline-flex !important; }
@media(max-width:899px){ .topbar .nav-cta{ display:none !important; } }

/* mobile-menu "Termin anfragen" = prominent red button. Borderless 999px pill —
   the single brand button geometry (matches .btn-red site-wide + the portal). */
.mobile-panel a.mob-book{
  background:#C6464A !important; color:#fff !important;
  border:none !important; border-radius:var(--r-pill) !important;
  font-weight:800 !important; justify-content:center; text-align:center;
  margin:8px 0 2px !important; box-shadow:var(--shadow-sm);
}
.mobile-panel a.mob-book:hover{ background:#C6464A !important; }

/* ===================================================================
   TIEFENMESSER = bedienbarer Scrollbalken. Die Schiene (.depth-track)
   ist jetzt anklickbar/ziehbar (JS: makeDepthScrollbar) → scrollt die Seite.
   Zahl/Fill/Knob synchronisieren weiter über den normalen Scroll-Handler.
=================================================================== */
/* .depth selbst ist pointer-events:none (war reine Anzeige) → die Schiene MUSS
   pointer-events wieder einschalten, sonst fallen Klicks durch zur Sektion dahinter. */
.depth-track{ cursor:grab !important; touch-action:none; pointer-events:auto !important; }
.depth-fill, .depth-track::before{ pointer-events:auto !important; }
/* unsichtbare, großzügige Greif-/Klick-Spalte (deckt die ganze Tiefenmesser-Breite ab) */
.depth-track::before{ content:''; position:absolute; top:-14px; bottom:-14px; left:-24px; right:-24px; }
.depth-track.depth-grabbing{ cursor:grabbing !important; }
.depth-track:focus-visible{ outline:2px solid var(--teal); outline-offset:2px; border-radius:var(--r-pill); }
@media (prefers-reduced-motion: no-preference){
  .depth-track{ transition:width .12s ease, box-shadow .12s ease; }
  /* leichte Greif-Affordanz beim Hover über den Tiefenmesser */
  .depth:hover .depth-track{ width:11px !important; box-shadow:0 0 0 1px rgba(28,28,30,.24), inset 0 1px 2px rgba(28,28,30,.14) !important; }
}

/* =====================================================================
   CONTACT SWITCH — shared segmented control (Termin buchen ↔ Nachricht
   schicken) + inline-booking / message panels. Used on the homepage inside
   the dark schatz card (.contact-switch--dark) and on kontakt.html inside a
   light surface-card (base light styling). Behaviour lives in shell.js
   (kontakt) and index.html's inline copy (homepage). Tokens: --teal/--red/
   --creme/--ink are defined per page :root.
===================================================================== */
.contact-switch{ margin-top:clamp(4px,2vw,12px); }
.contact-switch .ctoggle{position:relative;display:grid;grid-template-columns:1fr 1fr;max-width:380px;
  margin:0 auto clamp(18px,3vw,26px);background:rgba(28,28,30,.05);
  border:1px solid rgba(30,111,120,.4);border-radius:999px;padding:4px}
.contact-switch .ctoggle-ind{position:absolute;z-index:0;top:4px;bottom:4px;left:4px;width:calc(50% - 4px);
  background:var(--teal);border-radius:999px;box-shadow:0 4px 14px rgba(30,111,120,.3);
  transition:transform .26s cubic-bezier(.2,.7,.2,1)}
.contact-switch .ctoggle[data-active="msg"] .ctoggle-ind{transform:translateX(100%)}
.contact-switch .ctoggle-seg{position:relative;z-index:1;-webkit-appearance:none;appearance:none;border:0;
  background:transparent;color:var(--teal);font-family:inherit;font-weight:700;font-size:.92rem;
  padding:10px 8px;border-radius:999px;cursor:pointer;transition:color .2s ease;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.contact-switch .ctoggle-seg[aria-selected="true"]{color:#fff}
.contact-switch .ctoggle-seg:focus-visible{outline:2px solid var(--teal);outline-offset:2px}
.contact-switch .cpanel{text-align:left;max-width:560px;margin-inline:auto}
.contact-switch .cpanel[hidden]{display:none}
.contact-switch .cpanel-anim{animation:cpanelIn .28s ease}
@keyframes cpanelIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.contact-switch .book-host{position:relative;min-height:264px}
.contact-switch .book-frame{width:100%;border:0;display:block;min-height:264px;background:transparent;
  opacity:0;transition:opacity .35s ease}
.contact-switch .book-frame.is-ready{opacity:1}
.contact-switch .book-skel{position:absolute;inset:0;display:flex;flex-direction:column;gap:12px;padding:2px}
.contact-switch .book-skel[hidden]{display:none}
.contact-switch .book-skel-eyebrow{width:150px;height:12px;border-radius:6px;background:rgba(30,111,120,.18);margin-bottom:2px}
.contact-switch .book-skel-chip{height:48px;border-radius:12px;
  background:linear-gradient(90deg,rgba(28,28,30,.05),rgba(28,28,30,.1),rgba(28,28,30,.05));
  background-size:200% 100%;animation:bookShimmer 1.5s ease-in-out infinite}
@keyframes bookShimmer{0%{background-position:200% 0}100%{background-position:-200% 0}}
.contact-switch .book-all{display:inline-flex;align-items:center;gap:6px;margin-top:14px;
  color:var(--teal);font-weight:700;font-size:.9rem;text-decoration:underline;text-underline-offset:3px}
.contact-switch .book-all:hover{color:#17565d}
.contact-switch .book-all[hidden]{display:none}
.contact-switch .book-fallback{position:absolute;inset:0;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:14px;text-align:center;padding:18px}
.contact-switch .book-fallback[hidden]{display:none}
.contact-switch .book-fallback p{font-size:.94rem;line-height:1.5;color:var(--muted);font-weight:500;max-width:30ch;margin:0}
.contact-switch .book-fallback .btn-red{white-space:nowrap}
.contact-switch .cpanel-direct{margin-top:16px;font-size:.9rem;color:var(--muted);font-weight:500;text-align:center}
/* the WhatsApp fallback is a LINK → own line, centred, tap-target = just the text */
.contact-switch .cpanel-direct a{color:var(--teal);font-weight:700;text-decoration:underline;text-underline-offset:3px;
  display:block;width:-moz-fit-content;width:fit-content;margin:4px auto 0}
.contact-switch .cf-opt{font-weight:500;color:#6f665c;font-size:.86em}
/* Full-width submit — a clean, premium mobile CTA that never wraps oddly. */
.contact-switch .cf-submit{width:100%;white-space:nowrap}
/* Dark variant — homepage schatz card (light text on the toggle, creme panel). */
.contact-switch--dark .ctoggle{background:rgba(255,253,249,.07);border-color:rgba(30,111,120,.6)}
.contact-switch--dark .ctoggle-seg{color:rgba(246,236,218,.82)}
.contact-switch--dark .ctoggle-seg[aria-selected="true"]{color:#fff}
.contact-switch--dark .ctoggle-seg:focus-visible{outline-color:#fff}
.contact-switch--dark .cpanel{background:var(--creme);border-radius:var(--r-lg,18px);
  padding:clamp(16px,3vw,22px);color:var(--ink)}
@media(prefers-reduced-motion:reduce){
  .contact-switch .ctoggle-ind,.contact-switch .book-frame,.contact-switch .cpanel-anim{transition:none;animation:none}
  .contact-switch .book-skel-chip{animation:none}
}

/* =====================================================================
   COOKIE CONSENT (prototype) — a lightweight, privacy-first banner. It stores
   the choice in localStorage and re-opens via the footer "Cookie-Einstellungen"
   button. NOTE: this is a UI prototype; the WordPress production site should use
   a real CMP plugin (CookieYes / Complianz) that also BLOCKS scripts pre-consent
   and logs consent. Behaviour lives in shell.js + index.html's inline copy.
===================================================================== */
.cookie-settings{ background:none; border:none; padding:0; margin:0; font:inherit; color:inherit;
  cursor:pointer; text-decoration:underline; text-underline-offset:2px; }
.cookie-settings:hover{ color:var(--red); }
.gh-cookie{ position:fixed; left:16px; right:16px; bottom:16px; z-index:200; max-width:520px; margin-inline:auto;
  background:var(--creme,#FAF7F2); color:var(--ink,#1C1C1E); border:1px solid rgba(28,28,30,.12);
  border-radius:16px; box-shadow:0 18px 50px rgba(28,28,30,.22); padding:18px 18px 16px;
  transform:translateY(150%); opacity:0; visibility:hidden;
  transition:transform .4s cubic-bezier(.2,.7,.2,1), opacity .3s ease, visibility 0s linear .4s; }
.gh-cookie[data-open="true"]{ transform:none; opacity:1; visibility:visible; transition-delay:0s; }
/* Mobil kompakter — verdeckt weniger vom Hero beim Erstbesuch */
@media (max-width:560px){
  .gh-cookie{ left:9px !important; right:9px !important; bottom:9px !important; padding:13px 14px 12px !important; border-radius:14px !important; }
  .gh-cookie__title{ font-size:.9rem !important; margin:0 0 3px !important; }
  .gh-cookie__text{ font-size:.79rem !important; line-height:1.42 !important; margin:0 0 10px !important; }
  .gh-cookie__actions{ gap:8px !important; }
  .gh-cookie__btn{ font-size:.85rem !important; padding:9px 12px !important; min-width:108px !important; }
  .gh-cookie__more{ margin-top:8px !important; }
}
.gh-cookie__title{ font-weight:700; font-size:1rem; margin:0 0 5px; }
.gh-cookie__text{ font-size:.88rem; line-height:1.55; color:var(--muted,#636366); margin:0 0 14px; }
.gh-cookie__text a{ color:var(--teal); font-weight:600; text-decoration:underline; text-underline-offset:2px; }
.gh-cookie__actions{ display:flex; gap:10px; flex-wrap:wrap; }
.gh-cookie__btn{ flex:1 1 auto; min-width:130px; font-family:inherit; font-weight:700; font-size:.92rem;
  padding:11px 16px; border-radius:var(--r-pill,999px); cursor:pointer; border:none; }
/* CI: Rot = Aktion — auch hier. Beide Buttons gleich groß & gleichrangig platziert. */
.gh-cookie__btn--all{ background:var(--red); color:#fff; border:1px solid #1C1C1E; }
.gh-cookie__btn--ess{ background:#fff; color:var(--ink); border:1px solid rgba(28,28,30,.55); }
.gh-cookie__btn--ess:hover{ background:var(--sand,#E9E2D8); }
.gh-cookie__btn:focus-visible{ outline:2px solid var(--teal); outline-offset:2px; }
/* Einstellungs-Ebene: Kategorien mit Switches (flach, CI) */
.gh-cookie__more{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin-top:10px; }
.gh-cookie__settings-link{ background:none; border:none; padding:6px 2px; font-family:inherit; font-weight:700; font-size:.82rem; color:var(--teal); cursor:pointer; text-decoration:underline; text-underline-offset:3px; }
.gh-cookie__save{ font-family:inherit; font-weight:700; font-size:.85rem; padding:9px 16px; border-radius:var(--r-pill,999px); border:1px solid #1C1C1E; background:var(--ink); color:var(--creme); cursor:pointer; }
.gh-cookie__panel{ margin:12px 0 2px; border-top:1px solid rgba(28,28,30,.12); padding-top:12px; display:flex; flex-direction:column; gap:12px; }
/* display:flex oben schlaegt sonst das UA-[hidden] -> Panel waere IMMER sichtbar.
   Vertrag: Toggles erscheinen erst nach "Einstellungen anpassen" (resetPanel). */
.gh-cookie__panel[hidden]{ display:none; }
.gh-cookie__row{ display:flex; align-items:center; justify-content:space-between; gap:14px; }
.gh-cookie__cat b{ display:block; font-size:.9rem; color:var(--ink); }
.gh-cookie__cat small{ display:block; font-size:.78rem; color:#5c5c60; font-weight:500; line-height:1.4; }
.gh-cookie__switch{ flex:0 0 auto; width:44px; height:26px; border-radius:25px; border:1px solid rgba(28,28,30,.4); background:rgba(28,28,30,.12); cursor:pointer; position:relative; transition:background .15s ease; padding:0; }
.gh-cookie__switch i{ position:absolute; top:2px; left:2px; width:20px; height:20px; border-radius:50%; background:#fff; border:1px solid rgba(28,28,30,.25); transition:transform .15s ease; }
.gh-cookie__switch[aria-checked="true"]{ background:var(--teal); border-color:var(--teal); }
.gh-cookie__switch[aria-checked="true"] i{ transform:translateX(18px); }
.gh-cookie__switch.is-locked{ background:var(--teal); border-color:var(--teal); opacity:.55; cursor:default; }
.gh-cookie__switch.is-locked i{ transform:translateX(18px); }
.gh-cookie__switch:focus-visible{ outline:2px solid var(--teal); outline-offset:2px; }
@media (prefers-reduced-motion:reduce){ .gh-cookie__switch, .gh-cookie__switch i{ transition:none; } }
@media(prefers-reduced-motion:reduce){ .gh-cookie{ transition:opacity .2s ease; transform:none; } }

/* =====================================================================
   EMBEDDED CONTACT FORM — full layout, scoped to .contact-switch so the form
   styles IDENTICALLY on every page (the subpages carry no inline .cf-* rules;
   only index/kontakt did). Higher specificity than the global .cf-field colour
   overrides above, so it governs consistently.
===================================================================== */
.contact-switch .contact-form{display:grid;gap:14px;text-align:left}
.contact-switch .cf-row{display:grid;gap:14px;grid-template-columns:1fr}
@media(min-width:560px){.contact-switch .cf-row.two{grid-template-columns:1fr 1fr}}
.contact-switch .cf-field{display:flex;flex-direction:column;gap:6px}
.contact-switch .cf-field label{font-weight:700;font-size:.84rem;color:var(--ink)}
.contact-switch .cf-field label .req{color:var(--red)}
.contact-switch .cf-field input,.contact-switch .cf-field textarea{
  font-family:inherit;font-size:1rem;color:var(--ink);background:#fff;
  border:1.5px solid rgba(28,28,30,.5);border-radius:var(--r-md);padding:13px 15px;width:100%;min-height:48px;
  transition:border-color .16s ease, box-shadow .16s ease}
.contact-switch .cf-field textarea{min-height:104px;resize:vertical;line-height:1.5}
.contact-switch .cf-field input:focus,.contact-switch .cf-field textarea:focus{
  border-color:var(--teal);box-shadow:0 0 0 3px rgba(30,111,120,.16);outline:none}
.contact-switch .cf-field input:user-invalid,.contact-switch .cf-field textarea:user-invalid{
  border-color:var(--red);box-shadow:0 0 0 3px rgba(198,70,74,.14)}
.contact-switch .cf-error{font-size:.78rem;font-weight:600;color:var(--red);display:none}
.contact-switch .cf-field input:user-invalid ~ .cf-error,.contact-switch .cf-field textarea:user-invalid ~ .cf-error{display:block}
.contact-switch .cf-note{font-size:.8rem;color:var(--muted);font-weight:500;line-height:1.5}
.contact-switch .cf-status{font-weight:700;font-size:.92rem;border-radius:var(--r-md);padding:13px 16px;display:none;
  background:rgba(30,111,120,.1);color:var(--teal);border:1px solid rgba(30,111,120,.24)}
.contact-switch .cf-status[data-show="true"]{display:block}
/* on-page embed anchor clears the sticky header when jumped to via #kontakt */
#kontakt{scroll-margin-top:84px}

/* =====================================================================
   FOOTER — award-level: warm brand/nav/social on top, then a QUIET utility
   bottom-bar (subtle divider) for copyright + the legally-required links.
   The 6 legal links are de-emphasised (smaller, muted) so they never dominate.
===================================================================== */
.foot-contact{display:block;margin-top:7px;font-size:.84rem;color:rgba(255,255,255,.62);font-weight:500;line-height:1.5}
.foot-contact a{color:rgba(255,255,255,.72)}
.foot-contact a:hover{color:#fff;text-decoration:underline;text-underline-offset:3px}
.foot-bar{margin-top:clamp(26px,4vw,40px);padding-top:20px;border-top:1px solid rgba(255,255,255,.12);
  display:flex;flex-wrap:wrap;gap:14px 24px;align-items:center;justify-content:space-between}
.foot-copy{font-size:.8rem;color:rgba(255,255,255,.5);font-weight:500}
.foot-legal-links{display:flex;flex-wrap:wrap;gap:8px 18px;align-items:center}
.foot-legal-links a,.foot-legal-links .cookie-settings{font-size:.78rem;color:rgba(255,255,255,.46);
  font-weight:500;text-decoration:none;background:none;border:0;padding:0;margin:0;cursor:pointer;font-family:inherit;
  transition:color .15s ease}
.foot-legal-links a:hover,.foot-legal-links .cookie-settings:hover{color:rgba(255,255,255,.9);text-decoration:underline;text-underline-offset:3px}
.foot-legal-links a:focus-visible,.foot-legal-links .cookie-settings:focus-visible{outline:2px solid var(--teal);outline-offset:3px;border-radius:3px}
@media(max-width:620px){ .foot-bar{flex-direction:column;align-items:flex-start;gap:14px} }

/* Kein horizontaler Scroll (WCAG 1.4.10): absolut positionierte Deko (z. B. der
   page-hero-Ambient-Pool mit inset -9em) darf den Viewport nie verbreitern.
   clip statt hidden: erzeugt keinen Scroll-Container. */
html, body{ overflow-x:clip; }

/* Touch-Targets: Footer-Rechtslinks + Cookie-Settings auf >=24px Höhe (WCAG 2.5.8) */
footer a, .footer a, nav.foot-legal-links a, .foot-bar a,
.cookie-settings, button[data-cookie-settings]{
  display:inline-block !important; padding-top:4px !important; padding-bottom:4px !important;
}

/* Footer-Social-Icons exakt mittig: die Inline-Regel hat justify-content OHNE
   display:flex (Icon hing an der Baseline oben links); zusätzlich neutralisieren
   wir hier das Touch-Target-Padding von "footer a" (44px-Kachel genügt). */
.foot-socials a{
  display:flex !important; align-items:center !important; justify-content:center !important;
  padding:0 !important; line-height:0;
}

/* Kopie-Checkbox im Kontaktformular */
.contact-form .cf-copy{display:flex;align-items:flex-start;gap:10px;margin:2px 0 6px;cursor:pointer;font-size:.9rem;color:#5c5c60;font-weight:500;line-height:1.45}
.contact-form .cf-copy input{width:18px;height:18px;margin-top:1px;accent-color:var(--teal);flex:0 0 auto;cursor:pointer}

/* ===== Sheet-Indikator „+" — EINE site-weite Definition (Karten, Tiles, Teaser) ===== */
.tplus{position:absolute;top:12px;right:12px;z-index:2;width:30px;height:30px;border-radius:50%;
  background:rgba(255,255,255,.92);color:var(--ink);display:flex;align-items:center;justify-content:center;
  border:1px solid rgba(28,28,30,.12)}
.tile.solid.sand .tplus{background:rgba(255,255,255,.92);color:var(--ink)}

/* =====================================================================
   ERDREISE v2 — Anker-Erde, Licht-Senken, Funde, Grenz-Puls, Schatz-Finale
   (zentral: JS-Gegenstücke leben in shell.js + der index-Inline-Kopie)
===================================================================== */


/* ---- freie Kopf-Typo: der index-Look traegt INK auf hellen Sediment-
   Baendern (Anti-Matsch-Doktrin) — keine weisse Schrift, keine Senken,
   keine Schatten. Eyebrows behalten ihr Standard-Teal. */
.band-head-free h2, .zx-intro h2, .lead-head h2{color:var(--ink);-webkit-text-stroke:0;text-shadow:none}
.band-head-free p, .zx-intro p, .lead-head p{color:#4a443c;text-shadow:none}
.band-head-free .eyebrow-s, .zx-intro .eyebrow-s{color:var(--teal);text-shadow:none}
.band-head-free{isolation:auto}
.band-head-free::before{content:none !important; display:none !important}

/* ---- FUNDE: eigene Parallax-Ebene zwischen near und Korn */
.earth-finds{position:absolute;left:0;right:0;top:max(0px,120px - 14vw);z-index:3;pointer-events:none;will-change:transform}
.efind{position:absolute;transform:translateX(-50%);display:block;opacity:.94}
.efind svg{display:block;width:100%;height:auto}
@media(max-width:560px){.efind{transform:translateX(-50%) scale(.82)}}

/* ---- Grenz-Puls am Tiefenmesser: ein kurzer Gold-Ring beim Schichtwechsel */
.depth-read{transition:box-shadow .34s ease}
.depth-read.depth-puls{box-shadow:0 2px 10px rgba(28,28,30,.18), 0 0 0 6px rgba(224,178,91,.42)}
@media (prefers-reduced-motion: reduce){
  .depth-read{transition:none}
  .depth-read.depth-puls{box-shadow:0 2px 10px rgba(28,28,30,.18)}
}

/* ---- SCHATZ-FINALE: die Kontakt-Box ist der Schatz. Beim Erreichen
   öffnet sich der Glow einmal; feine Gold-Stäube steigen — ruhig, warm.
   Fallbacks: reduced motion / kein IntersectionObserver = statisch warm. */
.schatz-inner{transition:border-color 1.1s ease, box-shadow 1.4s ease}
.schatz-inner.schatz-an{
  border-color:rgba(224,178,91,.5);
  box-shadow:0 30px 70px rgba(28,28,30,.5), 0 0 90px rgba(224,178,91,.16);
}
.schatz-inner .schatz-glow{transition:opacity 1.6s ease, transform 1.6s ease;opacity:.55;transform:translateX(-50%) scale(.92)}
.schatz-inner.schatz-an .schatz-glow{opacity:1;transform:translateX(-50%) scale(1.06)}
.schatz-funken{position:absolute;inset:0;z-index:1;pointer-events:none;overflow:hidden;border-radius:inherit;opacity:0;transition:opacity 1.8s ease}
.schatz-inner.schatz-an .schatz-funken{opacity:1}
.schatz-funken b{
  position:absolute;bottom:-4px;border-radius:50%;
  background:radial-gradient(circle, rgba(255,233,176,.95), rgba(255,233,176,0) 72%);
  animation:ghFunkeln linear infinite;
  will-change:transform,opacity;
}
@keyframes ghFunkeln{
  0%{transform:translate3d(0,0,0);opacity:0}
  14%{opacity:.55}
  82%{opacity:.4}
  100%{transform:translate3d(9px,-120px,0);opacity:0}
}
@media (prefers-reduced-motion: reduce){
  .schatz-inner{transition:none}
  .schatz-funken{display:none}
}

/* ---- Korn statisch gebacken: dieselbe Optik als 140px-Kachel (einmal
   gerastert) statt live gerechnetem Vollflächen-feTurbulence — der
   Recherche-Punkt für iOS-/Low-End-Budget. Das SVG im Markup ruht. */
.earth-grain{background-image:var(--grain-tile);background-size:140px 140px;background-repeat:repeat;opacity:.14}
.earth-grain svg{display:none}

/* ---- EINE Erde fuer alle Seiten: die index-Atmosphaere ist die Referenz.
   Helle Haze statt Dunkel-Vignette; Lichtkegel verengt sich mit der Tiefe;
   Gold-Corona waechst im letzten Drittel. --f setzt shell.js (= Anker-Erde). */
.earth-vignette{
  background:
    radial-gradient(150% 80% at 50% 108%, rgba(228,234,240,.5) 0%, rgba(228,234,240,0) 55%),
    linear-gradient(0deg, rgba(244,240,230,.4) 0%, rgba(244,240,230,0) 26%) !important;
}
.earth-cone{position:absolute;inset:0;z-index:5;pointer-events:none;
  background:radial-gradient(ellipse calc(124% - 60% * var(--f,0)) 66% at 50% -10%,
    rgba(255,247,228,.55) 0%, rgba(255,247,228,.18) 36%, rgba(255,247,228,0) 64%)}
.earth-dust{opacity:calc((var(--f,0) - 0.4) * 0.9)}
.earth-dust b{background:radial-gradient(circle,rgba(243,213,140,.8),rgba(243,213,140,0) 70%)}
@media (prefers-reduced-motion:reduce){.earth-cone{transition:none}}

/* ---- Subpage-PAGE-HERO auf index-Doktrin: der Hero liegt auf Tageslicht/
   Sage (immer hell) -> INK-Typo wie die Startseite, der alte Weiss+Ambient-
   Pool-Auftritt (CASE B/C) entfaellt komplett. Spezifitaet + Position am
   Dateiende schlagen die frueheren !important-Regeln gleicher Staerke. */
.page-hero-inner.scrim-text::before{content:none !important;display:none !important}
.page-hero-inner.scrim-text h1,
.page-hero-inner.scrim-text .lede,
.page-hero-inner.scrim-text .crumbs,
.page-hero-inner.scrim-text .crumbs a,
.page-hero-inner.scrim-text .crumbs span[aria-current]{
  color:var(--ink) !important;
  -webkit-text-stroke:0 !important;
  text-shadow:none !important;
}
.page-hero-inner.scrim-text .lede{color:#3a3a3d !important}
.page-hero-inner.scrim-text .crumbs a{color:var(--teal) !important}
.page-hero-inner.scrim-text h1 .em,
.page-hero-inner.scrim-text h1 .gh-hund{
  color:#C6464A !important;
  text-shadow:none !important;
}
/* Gras klebt jetzt am Header (Layer-Shift in shell.js) -> kompakter Hero;
   crumbs duerfen das Gras kuessen (ink auf Sage traegt), Akzentrot faellt
   auf den Sandgrund darunter. */
.page-hero{padding-top:118px !important}

/* =====================================================================
   MOBILE-FIXES (06.07. Handy-Test): Tiefenmesser, Overscroll, Schatz-Halo,
   Über-Foto-Zentrierung. shell.css laedt zuletzt → gewinnt gegen Seiten-Inline.
===================================================================== */

/* (3) Tiefenmesser NUR Desktop — mobil weg (native Touch-Scroll genügt). */
@media(max-width:768px){ .depth{ display:none !important; } }

/* (5)+(6) Pull-to-refresh MUSS mobil funktionieren → KEIN overscroll-behavior:none
   mehr (das blockierte das Herunterziehen). Stattdessen färbt ein dokumenthoher
   Verlauf auf <html> das Overscroll-Rubber-Band: OBEN sand (= Header-Farbe) → beim
   schnellen Hochscrollen blitzt kein dunkler Streifen mehr über dem Header auf;
   UNTEN footer-dunkel (#160d05). Der fixe .earth-Hintergrund reicht nicht in die
   Rubber-Band-Zone hinein — dort zählt allein der <html>-Hintergrund.
   Der End-Color im Shorthand ist zugleich die background-color-Absicherung (sand),
   falls ein Browser im Overscroll die Farbe statt der Verlaufskante zeigt. */
html{ background:linear-gradient(var(--sand-heap) 0, var(--sand-heap) 88%, #160d05 100%) var(--sand-heap); }

/* (8) SCHATZ = leuchtender Schatz: der alte Top-Sliver-Glow (schnitt mobil ab)
   ist raus; der Glow kommt jetzt als GLEICHMÄSSIGER warmer Halo aus dem
   Box-Schatten — rundum, nie abgeschnitten. Grundzustand dezent, beim
   Erreichen (schatz-an) voll. */
.schatz-inner .schatz-glow{ display:none !important; }
.schatz-inner{
  box-shadow:0 30px 70px rgba(28,28,30,.5), 0 0 70px rgba(224,178,91,.12) !important;
}
.schatz-inner.schatz-an{
  border-color:rgba(224,178,91,.5) !important;
  box-shadow:0 30px 70px rgba(28,28,30,.5), 0 0 130px 10px rgba(224,178,91,.30) !important;
}

/* (7) Über-Foto (Patrick & Balou im Boot, 3:4-Hochformat): mobil NICHT mehr
   quadratisch (schnitt Balous Körper unten ab) → 4:5 + Bildfokus tiefer, sodass
   beide zentriert sitzen. */
.about-photo img{ object-position:center 44% !important; }
@media(max-width:600px){ .about-photo{ aspect-ratio:4/5 !important; } }

/* =====================================================================
   MOBILE-FIX RUNDE 2 (06.07.): Zentrierung, Sheet-Lock/Swipe
===================================================================== */
/* Der Tiefenmesser ist mobil ausgeblendet → das rechte Padding, das früher
   Platz für seine Schiene liess, verschob alle Inhalte nach links. Weg damit,
   damit Hero/Bänder/Schatz wieder MITTIG sitzen. */
@media(max-width:768px){
  .band .wrap, .page-hero .wrap, .hero .wrap, .schatz .wrap{ padding-right:0 !important; }
}

/* Sheet-Swipe: waehrend des Ziehens folgt das Sheet dem Finger (kein Transition),
   beim Loslassen schnappt/schliesst es. */
.sheet.sheet-dragging{ transition:none !important; }

/* ============ Audit-Fixes 07.07. ============ */
/* Gold-Sterne: Gold bleibt, aber dunklerer Rand → Form erreicht ~3:1 (WCAG 1.4.11) */
.rt-stars, .rev-stars-line .glyphs, .sheet-by .stars, .stars, .rev-stars{
  text-shadow: 0 0 1px rgba(96,64,12,.9), 0 0 .5px rgba(96,64,12,.9);
}

/* Blog-Teaser: klarer Klick-CTA (Lesezeit links, Ghost-Pfeil rechts) — reused die
   Sheet-„+"-Sprache mit Navigations-Glyph in Teal (CI-Rot bleibt der Primäraktion). */
.bt-meta{ display:flex; align-items:center; justify-content:space-between; gap:12px; margin-top:12px; }
.bt-meta .bt-read,.bt-meta .card-read{ margin:0 !important; }
.bt-go{
  flex:none; width:34px; height:34px; display:inline-grid; place-items:center; border-radius:50%;
  border:1.5px solid color-mix(in srgb, var(--teal) 48%, transparent); color:var(--teal); background:transparent;
  transition:transform .18s ease, background-color .18s ease, border-color .18s ease, color .18s ease;
}
.bt-go svg{ display:block; transition:transform .18s ease; }
/* on-dark-Kontext (Blog-Teaser auf dunklem Grund): heller Teal-Ton */
.on-dark .blog-tease .bt-go, .band.on-dark .bt-go{ border-color:rgba(120,200,196,.6); color:#a9ddd8; }
@media (hover:hover){
  .blog-tease:hover .bt-go,.card:hover .bt-go,.blog-tease:focus-visible .bt-go,.card:focus-visible .bt-go{ background:var(--teal); border-color:var(--teal); color:var(--creme); }
  .blog-tease:hover .bt-go svg,.card:hover .bt-go svg,.blog-tease:focus-visible .bt-go svg,.card:focus-visible .bt-go svg{ transform:translateX(3px); }
  .on-dark .blog-tease:hover .bt-go{ background:#a9ddd8; border-color:#a9ddd8; color:#123; }
}
/* visually-hidden (Screenreader-only) — für saubere Heading-Hierarchie */
.vh{ position:absolute !important; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }

/* ============================================================================
   AWARD-LEVEL-POLITUR 07.07. (additiv, alles hinter prefers-reduced-motion)
   ============================================================================ */

/* A11y: Sticky-Header verdeckt keine Anker-/Fokus-Ziele mehr (WCAG 2.4.11) */
html{ scroll-padding-top:90px; }

/* Nahtlose Seitenwechsel: Cross-Document View Transitions — Header + Erd-Backdrop
   morphen statt zu flashen, der Tiefenmesser springt optisch nicht mehr hart.
   NUR bei erlaubter Bewegung; Fallback = heutiger harter Cut (kein Risiko). */
@media (prefers-reduced-motion: no-preference){
  @view-transition{ navigation:auto; }
  .topbar{ view-transition-name:gh-topbar; }
  .earth{ view-transition-name:gh-earth; }
}

/* Reveal: DEZENT (Startwerte aus der Seiten-.rise-Regel: opacity .9 / translateY 12px,
   einmalig, kurz). Mobil/Touch + reduced-motion sind KOMPLETT aus — das JS gibt .rise
   dort sofort .in (kein „ausgegrauter" Zustand, kein Scroll-Jank). */
@media (prefers-reduced-motion: reduce){
  .rise, .rise.in{ opacity:1 !important; transform:none !important; }
}

/* Type-Skala als Token-System (Werte = bestehende Größen; Basis für konsistente
   Adoption, Vollumbau der 67 Einzel-clamps ist Folgeschritt). */
:root{
  --step-6:clamp(2.2rem,7vw,4.4rem);   /* h1 */
  --step-5:clamp(1.7rem,4.2vw,2.9rem); /* h2 */
  --step-4:clamp(1.4rem,2.8vw,1.9rem); /* Sektions-H2 klein */
  --step-3:1.14rem;                    /* h3 */
  --space-1:.5rem; --space-2:1rem; --space-3:1.6rem; --space-4:2.4rem; --space-5:3.6rem;
}
.h-sub{ font-size:var(--step-4); }

/* Häufige Fragen (Blog-Artikel) — dezentes Accordion, Sand/Teal */
.post-faq{max-width:720px;margin:2.6rem auto 0}
.post-faq h2{margin-bottom:.8rem}
.post-faq .faq-q{border-bottom:1px solid rgba(28,28,30,.12);padding:.2rem 0}
.post-faq .faq-q>summary{list-style:none;cursor:pointer;padding:.85rem 2rem .85rem 0;position:relative;
  font-weight:700;font-size:1.02rem;color:var(--ink);transition:color .15s ease}
.post-faq .faq-q>summary::-webkit-details-marker{display:none}
.post-faq .faq-q>summary::after{content:"";position:absolute;right:.4rem;top:50%;width:9px;height:9px;
  border-right:2px solid var(--teal);border-bottom:2px solid var(--teal);
  transform:translateY(-70%) rotate(45deg);transition:transform .2s ease}
.post-faq .faq-q[open]>summary::after{transform:translateY(-30%) rotate(-135deg)}
@media (hover:hover){ .post-faq .faq-q>summary:hover{color:var(--teal)} }
.post-faq .faq-a{padding:0 0 1rem}
.post-faq .faq-a p{margin:0;color:var(--ink-soft,#4a453d)}
@media (prefers-reduced-motion:reduce){ .post-faq .faq-q>summary::after{transition:none} }

/* Dezenter Ausbildungs-Hinweis (Footer) + Kontakt-Erwartungshinweis */
.foot-qualif{margin:0 0 .5rem;font-size:.72rem;line-height:1.45;color:rgba(255,255,255,.6);text-align:center}
.on-dark .foot-qualif{color:rgba(255,255,255,.82)}
.contact-note{margin:0 0 1.1rem;padding:.7rem .9rem;font-size:.86rem;line-height:1.5;
  color:var(--ink-soft,#4a453d);background:color-mix(in srgb, var(--teal) 7%, transparent);
  border-left:3px solid color-mix(in srgb, var(--teal) 55%, transparent);border-radius:8px}


/* Programmatisch fokussierte Dialog-Container (tabindex=-1) zeigen KEINEN Fokus-Ring
   — der teal :focus-visible-Ring bleibt für echte Tastatur-Navigation erhalten. */
[tabindex="-1"]:focus{ outline:none !important; }