/* =============================================================
   CLEANLAND PRO – Wäscherei Czech
   Design System & Stylesheet
   ============================================================= */

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

/* ---------- Tokens ---------- */
:root {
  /* Marke */
  --navy:        #0F2E4C;
  --navy-700:    #16405f;
  --navy-500:    #2b5b7d;
  --teal:        #1387AC;
  --teal-600:    #0F7B9C;
  --teal-dark:   #0d6f8f;
  --teal-light:  #4EB3D0;
  --ice:         #E4F1F8;
  --ice-50:      #F2F9FC;
  --ice-100:     #E9F4FA;
  --mist:        #F6FBFD;

  /* Text */
  --ink:         #0F2E4C;
  --ink-soft:    #3E5F7D;
  --ink-mute:    #6E8AA3;
  --line:        #DCEAF3;
  --line-soft:   #EAF3F9;

  /* Flächen */
  --white:       #FFFFFF;
  --surface:     #FFFFFF;
  --glass:       rgba(255,255,255,.72);

  /* Radien */
  --r-xs: 8px;
  --r-sm: 12px;
  --r-md: 18px;
  --r-lg: 26px;
  --r-xl: 34px;
  --r-pill: 999px;

  /* Schatten */
  --sh-xs: 0 1px 2px rgba(15,46,76,.05);
  --sh-sm: 0 2px 10px rgba(15,46,76,.06);
  --sh-md: 0 12px 34px -12px rgba(15,46,76,.16);
  --sh-lg: 0 30px 70px -30px rgba(15,46,76,.28);
  --sh-teal: 0 14px 32px -12px rgba(19,135,172,.55);

  /* Maße – Raster wächst mit dem Fenster mit, bleibt aber symmetrisch */
  --wrap: 1680px;
  --wrap-narrow: 920px;
  --gutter: clamp(1.15rem, 4.5vw, 4rem);
  --nav-h: 84px;

  /* Motion */
  --ease: cubic-bezier(.22,.61,.36,1);
  --ease-out: cubic-bezier(.16,1,.3,1);
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--nav-h) + 20px);
}
body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  font-size: 1rem;
  line-height: 1.65;
  color: var(--ink-soft);
  background: var(--white);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
  font-feature-settings: 'kern' 1, 'liga' 1, 'calt' 1;
}
img, picture, svg, video { display: block; max-width: 100%; }
img { height: auto; }
input, button, textarea, select { font: inherit; color: inherit; }
button { background: none; border: 0; cursor: pointer; }
a { color: var(--teal); text-decoration: none; }
ul, ol { list-style: none; padding: 0; }
:focus-visible {
  outline: 3px solid var(--teal-light);
  outline-offset: 3px;
  border-radius: 4px;
}

/* ---------- Typografie ---------- */
h1, h2, h3, h4, .display {
  font-family: 'Playfair Display', Georgia, 'Times New Roman', serif;
  color: var(--ink);
  font-weight: 600;
  line-height: 1.08;
  letter-spacing: -.015em;
  text-wrap: balance;
}
h1 { font-size: clamp(2.4rem, 5vw, 4.15rem); }
h2 { font-size: clamp(2rem, 4.2vw, 3.15rem); line-height: 1.12; }
h3 { font-size: clamp(1.25rem, 2vw, 1.6rem); line-height: 1.22; }
h4 { font-size: 1.1rem; line-height: 1.3; }
p { text-wrap: pretty; }

.eyebrow {
  display: inline-block;
  font-family: 'Inter', sans-serif;
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--teal);
  margin-bottom: 1.1rem;
}
.eyebrow--dot::before {
  content: '';
  display: inline-block;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--teal);
  margin-right: .6rem;
  vertical-align: middle;
  transform: translateY(-1px);
}
.lead {
  font-size: clamp(1.05rem, 1.6vw, 1.22rem);
  line-height: 1.62;
  color: var(--ink-soft);
}
.accent { color: var(--teal); }
.serif-accent {
  font-family: 'Playfair Display', serif;
  font-style: italic;
  color: var(--teal);
}

/* ---------- Layout ---------- */
.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.wrap--narrow { max-width: var(--wrap-narrow); }
.section { padding-block: clamp(4.5rem, 9vw, 8rem); position: relative; }
.section--tight { padding-block: clamp(3rem, 6vw, 5rem); }
.section--ice { background: linear-gradient(180deg, var(--white) 0%, var(--ice-50) 45%, var(--white) 100%); }
.section--mist { background: var(--mist); }
.section--navy { background: var(--navy); color: rgba(255,255,255,.82); }
.section--navy h2, .section--navy h3 { color: #fff; }

.section-head { max-width: 660px; margin-bottom: clamp(2.5rem, 5vw, 3.75rem); }
.section-head--center { margin-inline: auto; text-align: center; }
.section-head p { margin-top: 1.1rem; }

.grid { display: grid; gap: clamp(1.1rem, 2.2vw, 1.75rem); }
.grid--2 { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.grid--3 { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.grid--4 { grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }

/* ---------- Buttons ---------- */
.btn {
  --btn-bg: var(--teal);
  --btn-fg: #fff;
  display: inline-flex;
  align-items: center;
  gap: .7rem;
  padding: .95rem 1.6rem;
  border-radius: var(--r-pill);
  background: var(--btn-bg);
  color: var(--btn-fg);
  font-size: .96rem;
  font-weight: 600;
  letter-spacing: -.005em;
  white-space: nowrap;
  border: 1px solid transparent;
  transition: transform .3s var(--ease), box-shadow .3s var(--ease), background-color .25s var(--ease);
  box-shadow: var(--sh-teal);
}
.btn:hover { transform: translateY(-2px); background: var(--teal-dark); box-shadow: 0 18px 40px -14px rgba(19,135,172,.65); }
.btn:active { transform: translateY(0); }
.btn svg { width: 18px; height: 18px; flex: none; transition: transform .3s var(--ease); }
.btn:hover svg.arrow { transform: translateX(4px); }

.btn--ghost {
  --btn-bg: #fff;
  --btn-fg: var(--ink);
  border-color: var(--line);
  box-shadow: var(--sh-sm);
}
.btn--ghost:hover { background: #fff; border-color: var(--teal-light); box-shadow: var(--sh-md); }
.btn--outline {
  --btn-bg: transparent;
  --btn-fg: var(--teal);
  border-color: rgba(19,135,172,.35);
  box-shadow: none;
}
.btn--outline:hover { background: rgba(19,135,172,.07); border-color: var(--teal); box-shadow: none; }
.btn--light {
  --btn-bg: rgba(255,255,255,.12);
  --btn-fg: #fff;
  border-color: rgba(255,255,255,.28);
  box-shadow: none;
  backdrop-filter: blur(6px);
}
.btn--light:hover { background: rgba(255,255,255,.2); box-shadow: none; }
/* Sekundärer Ton aus der Icon-Kreis-Familie – harmoniert mit dem Türkis-Button */
.btn--ice {
  --btn-bg: var(--ice);
  --btn-fg: var(--teal-dark);
  border-color: rgba(19,135,172,.14);
  box-shadow: 0 6px 18px -10px rgba(19,135,172,.35);
}
.btn--ice:hover {
  background: #D7EBF6;
  border-color: rgba(19,135,172,.3);
  box-shadow: 0 12px 26px -12px rgba(19,135,172,.45);
}
.btn--sm { padding: .6rem 1.15rem; font-size: .87rem; }
.btn--lg { padding: 1.1rem 2rem; font-size: 1.02rem; }
.btn--block { width: 100%; justify-content: center; }

/* Einzelner Hauptanker im Hero – trägt die Fläche allein, daher
   eine Stufe großzügiger als die Buttons in der Kopfzeile */
.btn--hero {
  padding: 1.15rem 2.3rem;
  font-size: 1.06rem;
  gap: .85rem;
  background: var(--teal);
  box-shadow:
    0 18px 38px -16px rgba(19,135,172,.68),
    inset 0 1px 0 rgba(255,255,255,.22);
}
.btn--hero svg { width: 19px; height: 19px; }
.btn--hero:hover {
  background: var(--teal-dark);
  box-shadow:
    0 24px 48px -18px rgba(19,135,172,.75),
    inset 0 1px 0 rgba(255,255,255,.22);
}

.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  font-weight: 600;
  font-size: .94rem;
  color: var(--teal);
}
.link-arrow svg { width: 16px; height: 16px; transition: transform .3s var(--ease); }
.link-arrow:hover svg { transform: translateX(4px); }

/* =============================================================
   HEADER / NAVIGATION
   ============================================================= */
.topbar {
  background: var(--navy);
  color: rgba(255,255,255,.78);
  font-size: .82rem;
  letter-spacing: .01em;
}
.topbar__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  min-height: 40px;
  padding-block: .35rem;
}
.topbar__list { display: flex; align-items: center; gap: 1.5rem; flex-wrap: wrap; }
.topbar__item { display: inline-flex; align-items: center; gap: .45rem; }
.topbar__item svg { width: 14px; height: 14px; opacity: .75; flex: none; }
.topbar a { color: rgba(255,255,255,.86); transition: color .2s; }
.topbar a:hover { color: #fff; }
.status-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: #46C08C; flex: none;
  box-shadow: 0 0 0 3px rgba(70,192,140,.22);
  animation: pulse 2.4s var(--ease) infinite;
}
.status-dot--closed { background: #E4A44C; box-shadow: 0 0 0 3px rgba(228,164,76,.2); animation: none; }
@keyframes pulse {
  0%,100% { box-shadow: 0 0 0 3px rgba(70,192,140,.22); }
  50%     { box-shadow: 0 0 0 6px rgba(70,192,140,.05); }
}

.site-header {
  position: sticky;
  top: 0;
  z-index: 90;
  padding-block: 1rem;
  transition: padding .35s var(--ease), background-color .35s var(--ease), box-shadow .35s var(--ease);
}
.site-header::before {
  content: '';
  position: absolute; inset: 0;
  background: rgba(255,255,255,.82);
  backdrop-filter: blur(18px) saturate(1.4);
  -webkit-backdrop-filter: blur(18px) saturate(1.4);
  opacity: 0;
  transition: opacity .35s var(--ease);
  border-bottom: 1px solid transparent;
}
.site-header.is-stuck { padding-block: .6rem; }
.site-header.is-stuck::before { opacity: 1; border-bottom-color: var(--line-soft); }

/* Drei gleich gewichtete Spalten: die Menü-Pille sitzt dadurch exakt in der Mitte */
.nav {
  position: relative;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: clamp(.8rem, 2vw, 1.75rem);
}
/* **Die Marke darf nicht gestaucht werden.** Die drei Spalten teilen sich den
   Rest; die Knoepfe rechts sind unnachgiebig, das Logo war es nicht — es wurde
   von 256 px auf 175 px zusammengedrueckt und der Zusatz damit unlesbar.
   `max-content` nimmt es aus dem Verteilungskampf heraus. */
/* `min-width: 0` statt `max-content`: Nur so darf das Logo in seiner Spalte
   schrumpfen, wenn der Platz nicht reicht — siehe `.site-header .brand__logo`. */
.nav > .brand { justify-self: start; min-width: 0; }
.nav > .nav__menu { justify-self: center; }
.nav > .nav__actions { justify-self: end; }

/* Logo */
.brand { display: inline-flex; align-items: center; gap: .8rem; flex: none; }
.brand__mark { width: 46px; height: 46px; flex: none; }

/* --- Das Logo ------------------------------------------------------------
   Seit 25.10.2026 traegt die Kopfzeile das Logo des Betriebs als Bild. Es
   bringt Name und Zusatz schon mit, deshalb steht keine Schrift mehr daneben.

   **Die Hoehe fuehrt, die Breite folgt.** Das Logo ist 3,76-mal so breit wie
   hoch; waere die Breite gesetzt, haette jede Fensterbreite eine andere
   Logohoehe und die Kopfzeile wuerde springen. `width: auto` plus die festen
   `width`/`height`-Angaben am Bild halten das Seitenverhaeltnis — und
   verhindern, dass die Zeile beim Laden umspringt.

   **Beim Scrollen wird es kleiner**, zusammen mit der Kopfzeile. Dieselbe
   Dauer und dieselbe Kurve wie dort, sonst laufen beide auseinander. */
.brand__logo {
  display: block;
  height: clamp(44px, 4.6vw, 62px);
  width: auto;
  transition: height .35s var(--ease), width .35s var(--ease), margin .35s var(--ease);
}

/* --- Die Marke in der Kopfzeile ----------------------------------------
   **Hier begrenzt das Layout die Groesse, keine Formel.** Der erste Versuch
   rechnete die Hoehe aus der Fensterbreite — und ging schief: Ab 1401 px
   blendet die Kopfzeile zusaetzlich den Knopf „Preisrechner" ein, der 156 px
   kostet. Bei 1440 px liefen die Knoepfe dadurch 74 px ueber den rechten Rand.
   Eine Formel muesste jede solche Schwelle kennen; die naechste Aenderung an
   der Navigation haette sie wieder gebrochen.

   Darum jetzt umgekehrt: Das Logo wird ueber die **Breite** gesteuert — das
   ist die Richtung, in der es eng wird — und `max-width: 100%` laesst es in
   seiner Spalte schrumpfen, sobald der Platz knapp wird. Damit das greift,
   muss `min-width: 0` stehen; `max-content` machte die Spalte sonst
   unverhandelbar. Ueberlaufen kann es so nicht mehr, bei keiner Breite und
   nach keiner kuenftigen Aenderung.

   **Das Logo ragt unten aus der Kopfzeile heraus und schwebt in den Hero.**
   Die Kopfzeile ist oben auf der Seite durchsichtig — man sieht also keine
   Kante, ueber die es tritt, sondern nur eine Marke, die tiefer steht als die
   Navigation daneben. Der negative Aussenabstand nimmt die Ueberlaenge aus
   der Zeilenhoehe: Die Zeile bleibt schlank, das Bild wird groesser. */
.site-header .brand__logo {
  width: clamp(200px, 25vw, 364px);
  max-width: 100%;
  height: auto;
  margin-bottom: clamp(-26px, -1.7vw, -7px);
}

/* Beim Scrollen zieht sich die Marke in die Zeile zurueck. Sonst stuende sie
   beim Lesen dauerhaft ueber dem Text. */
.site-header.is-stuck .brand__logo {
  width: clamp(150px, 13vw, 190px);
  margin-bottom: 0;
}
.brand__logo--schubfach { height: 46px; margin-bottom: 0; }
.brand__logo--fuss { height: 58px; margin-bottom: 0; }
.brand__logo--app { height: 38px; margin-bottom: 0; }   /* Die App-Ansicht ist eng — hier zählt der Preisrechner. */

/* Auf schmalen Geraeten teilt sich die Kopfzeile den Platz mit dem
   Menueknopf. 150 px lassen den Schriftzug noch lesbar und den Knopf frei. */
/* Unterhalb von 1240 px steckt die Navigation im Schubfach. Rechts steht nur
   noch der Schalter — der Platz links ist dann nicht mehr der Engpass, und das
   Logo richtet sich wieder schlicht nach der Fensterbreite. */
/* Unterhalb von 1240 px steckt die Navigation im Schubfach. Rechts steht nur
   noch der Schalter — der Platz links ist dann nicht mehr der Engpass. */
@media (max-width: 77.5rem) {
  .site-header .brand__logo { width: clamp(190px, 27vw, 330px); margin-bottom: clamp(-20px, -1.3vw, -5px); }
}
@media (max-width: 30rem) {
  /* Auf dem Telefon kein Ueberhang: Dort steht der Hero unmittelbar unter der
     Kopfzeile, und jeder Pixel Ueberlappung traefe sofort Text. */
  .site-header .brand__logo { width: 176px; margin-bottom: 0; }
  .site-header.is-stuck .brand__logo { width: 146px; }
}
.brand__text { display: flex; flex-direction: column; line-height: 1; }
.brand__name {
  font-family: 'Inter', sans-serif;
  font-size: clamp(1.15rem, 2.2vw, 1.45rem);
  font-weight: 600;
  letter-spacing: .05em;
  color: var(--navy);
  display: flex;
  align-items: flex-start;
  gap: .28rem;
}
.brand__name sup {
  font-size: .42em;
  font-weight: 700;
  letter-spacing: .1em;
  color: var(--teal);
  margin-top: .15em;
}
.brand__sub {
  font-size: .6rem;
  font-weight: 500;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--ink-mute);
  margin-top: .34rem;
}

/* Nav-Pill (Glas) */
.nav__menu {
  display: flex;
  align-items: center;
  gap: .2rem;
  padding: .45rem .6rem;
  background: var(--glass);
  border: 1px solid rgba(255,255,255,.75);
  border-radius: var(--r-pill);
  box-shadow: 0 8px 30px -14px rgba(15,46,76,.24), inset 0 1px 0 rgba(255,255,255,.9);
  backdrop-filter: blur(16px) saturate(1.5);
  -webkit-backdrop-filter: blur(16px) saturate(1.5);
}
.nav__link {
  position: relative;
  display: inline-block;
  /* .72rem/.9rem statt 1.05rem/.93rem: Die acht Punkte brauchten 733 px und
     liessen dem Logo nur 27 px Luft. Verdichtet sind es rund 615 px. Frueher
     galt das erst ab 1080 px — dort steckt die Navigation aber laengst im
     Schubfach, die Regel war also wirkungslos. */
  padding: .55rem .72rem;
  border-radius: var(--r-pill);
  font-size: .9rem;
  font-weight: 500;
  white-space: nowrap;
  color: var(--navy);
  transition: color .25s var(--ease), background-color .25s var(--ease);
}
.nav__link:hover { color: var(--teal); background: rgba(19,135,172,.07); }
.nav__link[aria-current="page"] { color: var(--teal); font-weight: 600; background: rgba(19,135,172,.09); }

.nav__actions { display: flex; align-items: center; gap: .45rem; flex: none; }
/* Kompakte Kopfzeilen-Buttons, damit zwei nebeneinander Platz haben */
.nav__actions .btn {
  padding: .62rem 1.1rem;
  font-size: .88rem;
  gap: .5rem;
}
.nav__actions .btn svg { width: 16px; height: 16px; }

/* Burger */
.burger {
  display: none;
  width: 46px; height: 46px;
  border-radius: 50%;
  background: #fff;
  border: 1px solid var(--line);
  box-shadow: var(--sh-sm);
  place-items: center;
  flex: none;
}
.burger span {
  display: block;
  width: 19px; height: 2px;
  border-radius: 2px;
  background: var(--navy);
  transition: transform .35s var(--ease), opacity .2s var(--ease);
}
.burger span + span { margin-top: 5px; }
.burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Mobile Drawer */
.drawer {
  position: fixed;
  inset: 0;
  z-index: 95;
  background: rgba(15,46,76,.4);
  backdrop-filter: blur(4px);
  opacity: 0;
  visibility: hidden;
  transition: opacity .35s var(--ease), visibility .35s;
}
.drawer.is-open { opacity: 1; visibility: visible; }
.drawer__panel {
  position: absolute;
  top: 0; right: 0;
  width: min(400px, 88vw);
  height: 100%;
  background: #fff;
  padding: 1.5rem clamp(1.3rem, 5vw, 2rem) 2rem;
  overflow-y: auto;
  transform: translateX(100%);
  transition: transform .42s var(--ease-out);
  display: flex;
  flex-direction: column;
}
.drawer.is-open .drawer__panel { transform: none; }
.drawer__top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 2rem; }
.drawer__close {
  width: 42px; height: 42px;
  border-radius: 50%;
  border: 1px solid var(--line);
  display: grid; place-items: center;
  color: var(--navy);
}
.drawer__close svg { width: 18px; height: 18px; }
.drawer__nav { display: flex; flex-direction: column; }
.drawer__nav a {
  font-family: 'Playfair Display', serif;
  font-size: 1.55rem;
  color: var(--navy);
  padding: .62rem 0;
  border-bottom: 1px solid var(--line-soft);
  transition: color .25s, padding-left .25s var(--ease);
}
.drawer__nav a:hover, .drawer__nav a[aria-current="page"] { color: var(--teal); padding-left: .5rem; }
.drawer__foot { margin-top: auto; padding-top: 2rem; display: grid; gap: .7rem; }
.drawer__contact { font-size: .9rem; color: var(--ink-mute); }
.drawer__contact strong { display: block; color: var(--navy); font-size: 1.05rem; }

/* =============================================================
   HERO – Bild und Typografie fließen ineinander
   ============================================================= */
.hero {
  position: relative;
  padding-top: clamp(1.5rem, 3vw, 2.5rem);
  padding-bottom: clamp(1.5rem, 4vw, 3rem);
  overflow: hidden;
  isolation: isolate;
}
/* Weicher Farbdunst hinter allem */
.hero::before {
  content: '';
  position: absolute;
  top: -25%; right: -8%;
  width: 78vw; height: 105vh;
  background: radial-gradient(ellipse at 60% 40%, rgba(120,203,228,.20) 0%, rgba(120,203,228,.07) 42%, transparent 68%);
  pointer-events: none;
  z-index: -2;
}
.hero::after {
  content: '';
  position: absolute;
  left: -18%; bottom: -25%;
  width: 60vw; height: 70vh;
  background: radial-gradient(ellipse at center, rgba(19,135,172,.10) 0%, transparent 62%);
  pointer-events: none;
  z-index: -2;
}

/* Text und Bild teilen sich das Raster – linker und rechter Rand bleiben gleich */
.hero__grid {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.16fr);
  align-items: center;
  gap: clamp(1rem, 3vw, 2.5rem);
  min-height: min(74vh, 680px);
}

/* --- Bild: fließt aus dem Text heraus, endet bündig am Rasterrand --- */
.hero__media {
  position: relative;
  grid-column: 2;
  /* greift nach links unter den Text und nach oben/unten über die Zeile hinaus */
  margin-left: clamp(-14rem, -13vw, -5rem);
  margin-block: clamp(-4rem, -5vw, -1.5rem);
  aspect-ratio: 788 / 555;
  pointer-events: none;
  z-index: 0;
}
.hero__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 60% center;
  /* Nach allen Seiten sanft in den Seitenhintergrund auflösen */
  -webkit-mask-image:
    linear-gradient(to right,  transparent 0%, rgba(0,0,0,.14) 12%, rgba(0,0,0,.7) 30%, #000 48%, #000 93%, rgba(0,0,0,.35) 99%, transparent 100%),
    linear-gradient(to bottom, #000 0%, #000 56%, rgba(0,0,0,.7) 80%, transparent 100%),
    linear-gradient(to top,    #000 0%, #000 80%, rgba(0,0,0,.5) 93%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-image:
    linear-gradient(to right,  transparent 0%, rgba(0,0,0,.14) 12%, rgba(0,0,0,.7) 30%, #000 48%, #000 93%, rgba(0,0,0,.35) 99%, transparent 100%),
    linear-gradient(to bottom, #000 0%, #000 56%, rgba(0,0,0,.7) 80%, transparent 100%),
    linear-gradient(to top,    #000 0%, #000 80%, rgba(0,0,0,.5) 93%, transparent 100%);
  mask-composite: intersect;
}
/* Zusätzlicher heller Schleier – nimmt dem Foto die Kante */
.hero__glow {
  position: absolute;
  inset: -8% -6% -12% -12%;
  pointer-events: none;
  background:
    radial-gradient(58% 70% at 6% 45%, rgba(255,255,255,.92) 0%, rgba(255,255,255,.42) 38%, transparent 66%),
    linear-gradient(to bottom, transparent 55%, rgba(255,255,255,.5) 88%, #fff 100%);
}

/* --- Text --- */
.hero__copy {
  position: relative;
  z-index: 2;
  grid-column: 1;
  padding-block: clamp(1.5rem, 4vw, 3rem);
}
.hero__copy h1 { margin-bottom: 1.5rem; }
.hero__copy h1 .line-2 { display: block; color: var(--teal); white-space: nowrap; }
.hero__copy .lead {
  max-width: 30rem;
  margin-bottom: 2.2rem;
  /* leichte Aufhellung hinter dem Text, falls das Bild näher rückt */
  text-shadow: 0 1px 14px rgba(255,255,255,.85);
}
.hero__copy h1 { text-shadow: 0 2px 26px rgba(255,255,255,.7); }
/* Zwei Buttons: „Leistungen entdecken“ führt, die Flecken-Soforthilfe
   steht als ruhigerer zweiter Weg daneben. `stretch` gibt beiden
   dieselbe Höhe, obwohl der zweite schmaler gepolstert ist. */
.hero__cta { display: flex; flex-wrap: wrap; align-items: stretch; gap: .8rem; }
/* Gleiche Höhe wie der Hero-Button, aber schmaler gepolstert – damit die
   beiden auch dann zusammenpassen, wenn sie umbrechen. */
.hero__cta .btn--ice { padding-block: 1.19rem; }
@media (max-width: 560px) {
  .hero__cta .btn { flex: 1 1 100%; justify-content: center; }
}

/* Wellen-Abschluss unter dem Hero – geht in die nächste Sektion über */
.hero__wave {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: -1px;
  width: 100vw;
  z-index: 1;
  pointer-events: none;
  color: #fff;
}

/* Service-Leiste unter dem Hero */
.service-bar {
  position: relative;
  z-index: 4;
  margin-top: clamp(1.5rem, 3vw, 2.5rem);
  background: #fff;
  border: 1px solid var(--line-soft);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-md);
  padding: clamp(1.2rem, 2.4vw, 1.9rem);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: clamp(1rem, 2vw, 1.5rem);
}
.service-bar__item {
  display: flex;
  gap: .95rem;
  align-items: flex-start;
  padding-right: 1rem;
  border-right: 1px solid var(--line-soft);
  transition: transform .35s var(--ease);
}
.service-bar__item:last-child { border-right: 0; }
.service-bar__item:hover { transform: translateY(-3px); }
.service-bar__item:hover .icon-circle { background: var(--teal); color: #fff; }
.service-bar__text h4 { font-family: 'Inter', sans-serif; font-weight: 600; font-size: .98rem; color: var(--navy); margin-bottom: .25rem; }
.service-bar__text p { font-size: .84rem; line-height: 1.5; color: var(--ink-mute); }

.icon-circle {
  width: 52px; height: 52px;
  flex: none;
  border-radius: 50%;
  background: var(--ice);
  color: var(--teal);
  display: grid; place-items: center;
  transition: background-color .35s var(--ease), color .35s var(--ease), transform .35s var(--ease);
}
.icon-circle svg { width: 25px; height: 25px; }
.icon-circle--sm { width: 42px; height: 42px; }
.icon-circle--sm svg { width: 20px; height: 20px; }
.icon-circle--lg { width: 62px; height: 62px; }
.icon-circle--lg svg { width: 30px; height: 30px; }

/* Stats-Leiste */
.stat-bar {
  margin-top: clamp(1rem, 2vw, 1.5rem);
  background: linear-gradient(180deg, var(--ice-50) 0%, var(--ice-100) 100%);
  border: 1px solid rgba(220,234,243,.7);
  border-radius: var(--r-lg);
  padding: clamp(1.3rem, 2.6vw, 2rem);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: clamp(1rem, 2vw, 1.5rem);
}
.stat {
  display: flex;
  gap: .95rem;
  align-items: flex-start;
  padding-right: 1rem;
  border-right: 1px solid rgba(19,135,172,.14);
}
.stat:last-child { border-right: 0; }
.stat__value {
  font-family: 'Playfair Display', serif;
  font-size: clamp(1.5rem, 2.6vw, 1.95rem);
  font-weight: 600;
  color: var(--teal);
  line-height: 1.05;
  margin-bottom: .35rem;
  display: block;
  text-wrap: balance;
}
/* Längere Wortmarken ruhiger setzen */
.stat__value--text { font-size: clamp(1.25rem, 2vw, 1.55rem); }
.stat__label { font-size: .84rem; line-height: 1.45; color: var(--ink-soft); }
.stat .icon-circle { background: rgba(255,255,255,.85); }

/* =============================================================
   PAGE HERO (Unterseiten)
   ============================================================= */
.page-hero {
  position: relative;
  padding-top: clamp(3rem, 6vw, 5rem);
  padding-bottom: clamp(2.5rem, 5vw, 4rem);
  background: linear-gradient(170deg, var(--mist) 0%, #fff 78%);
  overflow: hidden;
}
.page-hero::before {
  content: '';
  position: absolute;
  top: -40%; right: -5%;
  width: 55vw; height: 100vh;
  background: radial-gradient(ellipse at center, rgba(78,179,208,.14) 0%, transparent 62%);
  pointer-events: none;
}
.page-hero__inner { position: relative; max-width: 880px; }
.page-hero h1 { margin-bottom: 1.25rem; font-size: clamp(2.2rem, 4.2vw, 3.5rem); }
.page-hero .lead { max-width: 44rem; }

.breadcrumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .5rem;
  font-size: .82rem;
  color: var(--ink-mute);
  margin-bottom: 1.5rem;
}
.breadcrumb a { color: var(--ink-mute); transition: color .2s; }
.breadcrumb a:hover { color: var(--teal); }
.breadcrumb svg { width: 12px; height: 12px; opacity: .5; }
.breadcrumb [aria-current] { color: var(--teal); font-weight: 500; }

/* =============================================================
   CARDS
   ============================================================= */
.card {
  position: relative;
  background: #fff;
  border: 1px solid var(--line-soft);
  border-radius: var(--r-lg);
  padding: clamp(1.5rem, 2.6vw, 2rem);
  box-shadow: var(--sh-sm);
  transition: transform .4s var(--ease), box-shadow .4s var(--ease), border-color .4s var(--ease);
  overflow: hidden;
  height: 100%;
}
.card::before {
  content: '';
  position: absolute;
  inset: auto auto -60% -20%;
  width: 240px; height: 240px;
  background: radial-gradient(circle, rgba(78,179,208,.13) 0%, transparent 70%);
  opacity: 0;
  transition: opacity .5s var(--ease);
  pointer-events: none;
}
.card:hover { transform: translateY(-5px); box-shadow: var(--sh-md); border-color: rgba(78,179,208,.35); }
.card:hover::before { opacity: 1; }
.card:hover .icon-circle { background: var(--teal); color: #fff; transform: scale(1.05); }
.card h3 { margin: 1.15rem 0 .6rem; font-size: 1.24rem; }
.card p { font-size: .93rem; line-height: 1.6; }
.card__foot { margin-top: 1.25rem; }

.card__list { margin-top: 1rem; display: grid; gap: .45rem; }
.card__list li {
  position: relative;
  padding-left: 1.5rem;
  font-size: .89rem;
  color: var(--ink-soft);
}
.card__list li::before {
  content: '';
  position: absolute;
  left: 0; top: .55em;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--teal-light);
}

.card--feature { display: flex; flex-direction: column; }
.card--flat { box-shadow: none; background: var(--mist); border-color: transparent; }
.card--glass {
  background: rgba(255,255,255,.7);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-color: rgba(255,255,255,.8);
}

.tag {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  padding: .28rem .7rem;
  border-radius: var(--r-pill);
  background: var(--ice);
  color: var(--teal-dark);
  font-size: .74rem;
  font-weight: 600;
  letter-spacing: .02em;
}
.tag--soft { background: rgba(19,135,172,.08); }
.tag--gold { background: #FDF3E0; color: #B4802C; }

/* Split (Text + Bild) */
.split {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  align-items: center;
  gap: clamp(2rem, 5vw, 4.5rem);
}
.split--reverse .split__media { order: -1; }
.split__media {
  position: relative;
  border-radius: var(--r-xl);
  overflow: hidden;
  box-shadow: var(--sh-lg);
  aspect-ratio: 5 / 4;
}
.split__media img { width: 100%; height: 100%; object-fit: cover; }
.split__body h2 { margin-bottom: 1.2rem; }
.split__body p + p { margin-top: 1rem; }
.split__body .btn { margin-top: 1.8rem; }

.float-card {
  position: absolute;
  z-index: 3;
  background: rgba(255,255,255,.92);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(255,255,255,.95);
  border-radius: var(--r-md);
  padding: 1rem 1.25rem;
  box-shadow: var(--sh-md);
  max-width: 250px;
}
.float-card--br { right: clamp(.8rem, 2vw, 1.5rem); bottom: clamp(.8rem, 2vw, 1.5rem); }
.float-card__value {
  font-family: 'Playfair Display', serif;
  font-size: 1.7rem;
  color: var(--teal);
  line-height: 1;
  display: block;
  margin-bottom: .3rem;
}
.float-card p { font-size: .82rem; line-height: 1.45; color: var(--ink-soft); }

/* =============================================================
   PROZESS (4 Schritte)
   ============================================================= */
.process { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: clamp(1.2rem, 2.5vw, 2rem); position: relative; }
.process::before {
  content: '';
  position: absolute;
  top: 34px; left: 8%; right: 8%;
  height: 2px;
  background: repeating-linear-gradient(90deg, var(--line) 0 8px, transparent 8px 16px);
  z-index: 0;
}
.step { position: relative; z-index: 1; text-align: center; }
.step__num {
  width: 68px; height: 68px;
  margin: 0 auto 1.3rem;
  border-radius: 50%;
  background: #fff;
  border: 2px solid var(--ice);
  color: var(--teal);
  display: grid; place-items: center;
  font-family: 'Playfair Display', serif;
  font-size: 1.5rem;
  font-weight: 600;
  box-shadow: 0 6px 20px -10px rgba(15,46,76,.25);
  transition: all .4s var(--ease);
}
.step:hover .step__num { background: var(--teal); color: #fff; border-color: var(--teal); transform: translateY(-4px) scale(1.04); }
.step h3 { font-size: 1.12rem; margin-bottom: .55rem; }
.step p { font-size: .88rem; line-height: 1.58; color: var(--ink-mute); max-width: 26ch; margin-inline: auto; }

/* =============================================================
   TESTIMONIALS
   ============================================================= */
.quote-card {
  background: #fff;
  border: 1px solid var(--line-soft);
  border-radius: var(--r-lg);
  padding: clamp(1.6rem, 2.8vw, 2.2rem);
  box-shadow: var(--sh-sm);
  display: flex;
  flex-direction: column;
  height: 100%;
  transition: transform .4s var(--ease), box-shadow .4s var(--ease);
}
.quote-card:hover { transform: translateY(-5px); box-shadow: var(--sh-md); }
.quote-card__stars { display: flex; gap: .18rem; color: #F2B544; margin-bottom: 1.1rem; }
.quote-card__stars svg { width: 17px; height: 17px; }
.quote-card blockquote {
  font-family: 'Playfair Display', serif;
  font-size: 1.06rem;
  line-height: 1.58;
  color: var(--navy);
  font-style: italic;
  margin-bottom: 1.6rem;
  flex: 1;
}
.quote-card__author { display: flex; align-items: center; gap: .85rem; padding-top: 1.2rem; border-top: 1px solid var(--line-soft); }
.quote-card__avatar { width: 46px; height: 46px; border-radius: 50%; object-fit: cover; flex: none; }
.quote-card__meta strong { display: block; font-size: .94rem; color: var(--navy); font-weight: 600; }
.quote-card__meta span { font-size: .8rem; color: var(--ink-mute); }

/* =============================================================
   ACCORDION (FAQ)
   ============================================================= */
.accordion { display: grid; gap: .8rem; }
.acc {
  background: #fff;
  border: 1px solid var(--line-soft);
  border-radius: var(--r-md);
  overflow: hidden;
  transition: border-color .3s var(--ease), box-shadow .3s var(--ease);
}
.acc:hover { border-color: rgba(78,179,208,.4); }
.acc.is-open { border-color: rgba(19,135,172,.45); box-shadow: var(--sh-sm); }
.acc__btn {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.2rem;
  padding: 1.15rem clamp(1.1rem, 2.4vw, 1.6rem);
  text-align: left;
  font-family: 'Inter', sans-serif;
  font-size: 1.02rem;
  font-weight: 600;
  color: var(--navy);
  transition: color .25s;
}
.acc__btn:hover { color: var(--teal); }
.acc__icon {
  width: 32px; height: 32px;
  flex: none;
  border-radius: 50%;
  background: var(--ice);
  color: var(--teal);
  display: grid; place-items: center;
  transition: transform .4s var(--ease), background-color .3s, color .3s;
}
.acc__icon svg { width: 15px; height: 15px; }
.acc.is-open .acc__icon { transform: rotate(45deg); background: var(--teal); color: #fff; }
.acc__panel { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .42s var(--ease-out); }
.acc.is-open .acc__panel { grid-template-rows: 1fr; }
.acc__inner { overflow: hidden; }
.acc__inner > div { padding: 0 clamp(1.1rem, 2.4vw, 1.6rem) 1.35rem; font-size: .95rem; line-height: 1.68; }
.acc__inner p + p { margin-top: .8rem; }

/* =============================================================
   PREISRECHNER
   ============================================================= */
.price-tools {
  position: sticky;
  top: calc(var(--nav-h) + 8px);
  z-index: 20;
  background: rgba(255,255,255,.9);
  backdrop-filter: blur(16px) saturate(1.4);
  -webkit-backdrop-filter: blur(16px) saturate(1.4);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-lg);
  padding: 1rem;
  box-shadow: var(--sh-sm);
  margin-bottom: 2rem;
}
.price-tools__row { display: flex; flex-wrap: wrap; gap: .7rem; align-items: center; }
.search-field { position: relative; flex: 1 1 260px; }
.search-field svg {
  position: absolute; left: 1rem; top: 50%;
  transform: translateY(-50%);
  width: 18px; height: 18px;
  color: var(--ink-mute);
  pointer-events: none;
}
.search-field input {
  width: 100%;
  padding: .8rem 2.6rem .8rem 2.9rem;
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  background: #fff;
  font-size: .95rem;
  transition: border-color .25s, box-shadow .25s;
}
.search-field input:focus { outline: none; border-color: var(--teal); box-shadow: 0 0 0 4px rgba(19,135,172,.12); }
.search-field__clear {
  position: absolute; right: .55rem; top: 50%;
  transform: translateY(-50%);
  width: 28px; height: 28px;
  border-radius: 50%;
  display: none; place-items: center;
  color: var(--ink-mute);
  background: var(--ice-50);
}
.search-field__clear.is-visible { display: grid; }
.search-field__clear svg { position: static; transform: none; width: 13px; height: 13px; }

.chips { display: flex; flex-wrap: wrap; gap: .45rem; }
.chip {
  padding: .5rem 1rem;
  border-radius: var(--r-pill);
  border: 1px solid var(--line);
  background: #fff;
  font-size: .85rem;
  font-weight: 500;
  color: var(--ink-soft);
  transition: all .25s var(--ease);
  white-space: nowrap;
}
.chip:hover { border-color: var(--teal-light); color: var(--teal); }
.chip.is-active { background: var(--teal); border-color: var(--teal); color: #fff; box-shadow: 0 6px 16px -8px rgba(19,135,172,.6); }

.price-group { margin-bottom: 2.5rem; }
.price-group__head {
  display: flex;
  align-items: center;
  gap: .9rem;
  margin-bottom: 1.1rem;
  padding-bottom: .9rem;
  border-bottom: 2px solid var(--ice);
}
.price-group__head h3 { font-size: 1.35rem; }
.price-group__head .tag { margin-left: auto; }

.price-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: .3rem 2rem; }
.price-row {
  display: flex;
  align-items: center;
  gap: .7rem;
  padding: .72rem .35rem .72rem .5rem;
  border-bottom: 1px solid var(--line-soft);
  transition: background-color .25s, padding-left .25s var(--ease);
  border-radius: var(--r-xs);
}
.price-row:hover { background: var(--mist); padding-left: .8rem; }
.price-row__name { flex: 1; font-size: .94rem; color: var(--ink); line-height: 1.35; }
.price-row__name small { display: block; font-size: .76rem; color: var(--ink-mute); font-weight: 400; }
.price-row__ab {
  font-size: .72rem;
  font-weight: 600;
  color: var(--teal-dark);
  background: var(--ice);
  padding: .1rem .45rem;
  border-radius: var(--r-pill);
  line-height: 1.5;
}
.price-row__price {
  font-family: 'Playfair Display', serif;
  font-size: 1.06rem;
  font-weight: 600;
  color: var(--teal);
  white-space: nowrap;
  min-width: 4.6rem;
  text-align: right;
}
.price-row__add {
  width: 30px; height: 30px;
  flex: none;
  border-radius: 50%;
  border: 1px solid var(--line);
  display: grid; place-items: center;
  color: var(--teal);
  transition: all .25s var(--ease);
}
.price-row__add svg { width: 14px; height: 14px; }
.price-row__add:hover { background: var(--teal); border-color: var(--teal); color: #fff; transform: scale(1.1); }
.price-row.is-added .price-row__add { background: #46C08C; border-color: #46C08C; color: #fff; }

.empty-state { text-align: center; padding: 3.5rem 1rem; color: var(--ink-mute); }
.empty-state svg { width: 46px; height: 46px; margin: 0 auto 1rem; color: var(--line); }

/* Warenkorb / Kostenschätzer */
.estimator {
  position: fixed;
  right: clamp(1rem, 3vw, 2rem);
  bottom: clamp(1rem, 3vw, 2rem);
  z-index: 80;
  width: min(390px, calc(100vw - 2rem));
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-lg);
  overflow: hidden;
  transform: translateY(calc(100% + 3rem));
  opacity: 0;
  visibility: hidden;
  transition: transform .5s var(--ease-out), opacity .35s var(--ease), visibility .5s;
}
.estimator.is-visible { transform: none; opacity: 1; visibility: visible; }
.estimator__head {
  display: flex;
  align-items: center;
  gap: .7rem;
  padding: 1rem 1.2rem;
  background: var(--navy);
  color: #fff;
  cursor: pointer;
}
.estimator__head h4 { color: #fff; font-family: 'Inter', sans-serif; font-size: .98rem; font-weight: 600; }
.estimator__count {
  min-width: 24px; height: 24px;
  padding-inline: .4rem;
  border-radius: var(--r-pill);
  background: var(--teal);
  color: #fff;
  font-size: .78rem;
  font-weight: 700;
  display: grid; place-items: center;
}
.estimator__toggle { margin-left: auto; color: rgba(255,255,255,.8); display: grid; place-items: center; transition: transform .35s var(--ease); }
.estimator__toggle svg { width: 18px; height: 18px; }
.estimator.is-collapsed .estimator__toggle { transform: rotate(180deg); }
.estimator__body { max-height: min(46vh, 380px); overflow-y: auto; padding: .5rem 1.2rem; transition: max-height .4s var(--ease), padding .4s var(--ease); }
.estimator.is-collapsed .estimator__body,
.estimator.is-collapsed .estimator__foot { max-height: 0; padding-block: 0; overflow: hidden; opacity: 0; }
.estimator__item { display: flex; align-items: center; gap: .6rem; padding: .65rem 0; border-bottom: 1px solid var(--line-soft); }
.estimator__item:last-child { border-bottom: 0; }
.estimator__item-name { flex: 1; font-size: .87rem; color: var(--ink); line-height: 1.3; }
.estimator__qty { display: flex; align-items: center; gap: .3rem; }
.estimator__qty button {
  width: 24px; height: 24px;
  border-radius: 50%;
  border: 1px solid var(--line);
  display: grid; place-items: center;
  color: var(--teal);
  font-size: .95rem;
  line-height: 1;
  transition: all .2s;
}
.estimator__qty button:hover { background: var(--ice); }
.estimator__qty span { min-width: 1.5rem; text-align: center; font-size: .87rem; font-weight: 600; color: var(--navy); }
.estimator__price { min-width: 3.9rem; text-align: right; font-size: .9rem; font-weight: 600; color: var(--teal); }
.estimator__foot { padding: 1rem 1.2rem 1.2rem; border-top: 1px solid var(--line); background: var(--mist); transition: max-height .4s var(--ease), padding .4s var(--ease), opacity .3s; }
.estimator__total { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: .35rem; }
.estimator__total span { font-size: .9rem; color: var(--ink-soft); }
.estimator__total strong { font-family: 'Playfair Display', serif; font-size: 1.65rem; color: var(--navy); }
.estimator__note { font-size: .74rem; color: var(--ink-mute); line-height: 1.45; margin-bottom: .9rem; }
.estimator__actions { display: grid; grid-template-columns: 1fr auto; gap: .5rem; }

.estimator-fab {
  position: fixed;
  right: clamp(1rem, 3vw, 2rem);
  bottom: clamp(1rem, 3vw, 2rem);
  z-index: 79;
  display: none;
  align-items: center;
  gap: .6rem;
  padding: .85rem 1.3rem;
  border-radius: var(--r-pill);
  background: var(--navy);
  color: #fff;
  font-size: .9rem;
  font-weight: 600;
  box-shadow: var(--sh-lg);
}

/* =============================================================
   STANDORT-KARTEN
   ============================================================= */
.location-card {
  background: #fff;
  border: 1px solid var(--line-soft);
  border-radius: var(--r-lg);
  overflow: hidden;
  box-shadow: var(--sh-sm);
  display: flex;
  flex-direction: column;
  height: 100%;
  transition: transform .4s var(--ease), box-shadow .4s var(--ease);
}
.location-card:hover { transform: translateY(-4px); box-shadow: var(--sh-md); }
.location-card__head {
  padding: clamp(1.4rem, 2.5vw, 1.9rem);
  background: linear-gradient(135deg, var(--navy) 0%, var(--navy-700) 100%);
  color: rgba(255,255,255,.8);
  position: relative;
  overflow: hidden;
}
.location-card__head::after {
  content: '';
  position: absolute;
  right: -40px; top: -40px;
  width: 160px; height: 160px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(78,179,208,.28) 0%, transparent 70%);
}
.location-card__head h3 { color: #fff; margin-bottom: .35rem; position: relative; }
.location-card__head p { font-size: .89rem; position: relative; }
.location-card__body { padding: clamp(1.4rem, 2.5vw, 1.9rem); display: flex; flex-direction: column; flex: 1; gap: 1.3rem; }

.info-row { display: flex; gap: .8rem; align-items: flex-start; font-size: .92rem; }
.info-row svg { width: 18px; height: 18px; color: var(--teal); flex: none; margin-top: .2rem; }
.info-row strong { color: var(--navy); font-weight: 600; }
.info-row a { color: var(--ink-soft); transition: color .2s; }
.info-row a:hover { color: var(--teal); }

.hours { display: grid; gap: .1rem; }
.hours__row {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: .45rem .6rem;
  font-size: .89rem;
  border-radius: var(--r-xs);
  transition: background-color .25s;
}
.hours__row.is-today { background: var(--ice); font-weight: 600; color: var(--navy); }
.hours__row.is-today .hours__day::after { content: ' · heute'; font-weight: 500; color: var(--teal); font-size: .82em; }
.hours__day { color: var(--ink-soft); }
.hours__time { color: var(--navy); font-variant-numeric: tabular-nums; text-align: right; }
.hours__row.is-closed .hours__time { color: var(--ink-mute); }

.map-embed {
  position: relative;
  aspect-ratio: 16 / 10;
  border-radius: var(--r-md);
  overflow: hidden;
  background: var(--ice-50);
  border: 1px solid var(--line-soft);
}
.map-embed iframe { width: 100%; height: 100%; border: 0; display: block; }
.map-consent {
  position: absolute;
  inset: 0;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: .8rem;
  text-align: center;
  padding: 1.5rem;
  background:
    linear-gradient(rgba(244,250,253,.94), rgba(244,250,253,.94)),
    repeating-linear-gradient(45deg, var(--ice-100) 0 12px, var(--mist) 12px 24px);
}
.map-consent p { font-size: .86rem; color: var(--ink-mute); max-width: 34ch; }
.map-consent svg { width: 34px; height: 34px; color: var(--teal); }

/* =============================================================
   FORMULARE
   ============================================================= */
.form-grid { display: grid; gap: 1.1rem; }
.form-grid--2 { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.field { display: grid; gap: .45rem; }
.field label { font-size: .86rem; font-weight: 600; color: var(--navy); }
.field label .req { color: #D46A6A; }
.field input, .field select, .field textarea {
  width: 100%;
  padding: .82rem 1rem;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: #fff;
  font-size: .95rem;
  color: var(--ink);
  transition: border-color .25s, box-shadow .25s;
}
.field textarea { min-height: 140px; resize: vertical; line-height: 1.6; }
.field select { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%236E8AA3' stroke-width='2.5' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 1rem center; padding-right: 2.6rem; }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--teal); box-shadow: 0 0 0 4px rgba(19,135,172,.12); }
.field__hint { font-size: .78rem; color: var(--ink-mute); }
.field--error input, .field--error select, .field--error textarea { border-color: #D46A6A; }
.field__error { font-size: .78rem; color: #C25555; display: none; }
.field--error .field__error { display: block; }

.checkbox { display: flex; gap: .7rem; align-items: flex-start; font-size: .85rem; line-height: 1.55; color: var(--ink-soft); cursor: pointer; }
.checkbox input {
  width: 19px; height: 19px;
  flex: none;
  margin-top: .12rem;
  accent-color: var(--teal);
  cursor: pointer;
}
.hp-field { position: absolute; left: -9999px; opacity: 0; pointer-events: none; }

.form-note {
  display: flex;
  gap: .7rem;
  padding: .9rem 1.1rem;
  border-radius: var(--r-sm);
  background: var(--ice-50);
  font-size: .84rem;
  line-height: 1.55;
  color: var(--ink-soft);
}
.form-note svg { width: 18px; height: 18px; color: var(--teal); flex: none; margin-top: .15rem; }

.form-status {
  display: none;
  gap: .7rem;
  padding: 1rem 1.2rem;
  border-radius: var(--r-sm);
  font-size: .9rem;
  line-height: 1.55;
  margin-top: 1rem;
}
.form-status.is-visible { display: flex; }
.form-status--ok { background: #E9F7F0; color: #1F7A54; border: 1px solid #C4E8D6; }
.form-status--err { background: #FDEDED; color: #A83A3A; border: 1px solid #F2CFCF; }
.form-status svg { width: 19px; height: 19px; flex: none; margin-top: .1rem; }

/* =============================================================
   CTA / BANNER
   ============================================================= */
.cta-band {
  position: relative;
  border-radius: var(--r-xl);
  overflow: hidden;
  background: linear-gradient(120deg, var(--navy) 0%, #14496b 55%, var(--teal-dark) 130%);
  color: rgba(255,255,255,.82);
  padding: clamp(2.5rem, 5vw, 4rem);
  isolation: isolate;
}
.cta-band::before {
  content: '';
  position: absolute;
  right: -8%; top: -50%;
  width: 55%; height: 200%;
  background: radial-gradient(ellipse at center, rgba(78,179,208,.35) 0%, transparent 60%);
  z-index: -1;
}
.cta-band__wave { position: absolute; left: 0; right: 0; bottom: 0; z-index: -1; opacity: .16; color: #fff; }
.cta-band h2 { color: #fff; margin-bottom: 1rem; }
.cta-band__inner { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: clamp(1.5rem, 4vw, 3rem); align-items: center; }
.cta-band__actions { display: flex; flex-wrap: wrap; gap: .8rem; justify-content: flex-start; }
.cta-band .btn { box-shadow: none; }
.cta-band .btn:not(.btn--light) { background: #fff; color: var(--navy); }
.cta-band .btn:not(.btn--light):hover { background: var(--ice); }

.usp-strip {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1.5rem;
  padding: clamp(1.5rem, 3vw, 2.2rem) 0;
  border-block: 1px solid var(--line-soft);
}
.usp { display: flex; align-items: center; gap: .8rem; font-size: .9rem; color: var(--ink-soft); }
.usp svg { width: 22px; height: 22px; color: var(--teal); flex: none; }
.usp strong { color: var(--navy); font-weight: 600; }

/* =============================================================
   FOOTER
   ============================================================= */
.site-footer { background: var(--navy); color: rgba(255,255,255,.68); padding-top: clamp(3.5rem, 6vw, 5rem); position: relative; overflow: hidden; }
.site-footer::before {
  content: '';
  position: absolute;
  left: -10%; top: -30%;
  width: 60%; height: 140%;
  background: radial-gradient(ellipse at center, rgba(78,179,208,.16) 0%, transparent 62%);
  pointer-events: none;
}
.footer__grid {
  position: relative;
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr 1.3fr;
  gap: clamp(1.8rem, 4vw, 3.5rem);
  padding-bottom: clamp(2.5rem, 5vw, 3.5rem);
}
.footer__brand .brand__name { color: #fff; }
.footer__brand .brand__sub { color: rgba(255,255,255,.5); }

/* --- Das Logo im Fuß: eine Lichttafel ------------------------------------
   Das Logo ist blau-grau und stand im Fuß auf Dunkelblau. „CLEANLAND" trug
   dort noch, der Zusatz „TEXTILREINIGUNG & WÄSCHEREI" ist grau und ging
   unter — gemessen die schwächste Stelle der Seite.

   **Der erste Versuch war ein weiches Lichtfeld, das zu den Rändern hin
   durchsichtig wurde.** Angesehen taugte es nicht: Das Logo stand links auf
   Weiß und rechts auf halbdurchsichtigem Blau, die Kante blieb trotzdem
   sichtbar, und der Schein saß einseitig. Ein Fleck, keine Gestaltung.

   Jetzt eine ausdrückliche Tafel — aber eine, auf der Licht liegt:
     · der Grund läuft von oben links hell nach unten rechts kühl, wie eine
       beleuchtete Fläche, und bleibt überall deckend;
     · oben eine Lichtkante, unten eine Schattenkante — die Platte steht
       dadurch leicht erhaben, statt aufgeklebt zu wirken;
     · darüber ein diagonaler Glanz wie auf einer Seifenblase, dasselbe
       Motiv, das im Zeichen selbst steckt;
     · dahinter ein türkiser Schein, der nach allen Seiten gleich abstrahlt
       und die Tafel mit dem Dunkelblau verbindet. */
.footer__brand .brand {
  position: relative;
  isolation: isolate;
  padding: 1.05rem 1.5rem 1.1rem;
  border-radius: 20px;
  background:
    linear-gradient(154deg,
      #ffffff 0%,
      #fbfdfe 26%,
      #f0f8fc 54%,
      #e2f0f8 80%,
      #d6e9f4 100%);
  /* **Der Schein ringsum ist ein `box-shadow`, kein Pseudo-Element.**
     Als `::before` mit `inset: -22%` sah er gleich gut aus, spannte aber den
     Rollbereich der Marke um 48 px auf — `pruefe-breiten.js` meldete sie als
     Ueberlauf. Ein Schatten vergroessert nichts und folgt der Form der Tafel,
     das Licht liegt dadurch sogar richtiger. */
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 1),
    inset 0 -1px 0 rgba(15, 46, 76, .10),
    inset 0 0 0 1px rgba(255, 255, 255, .55),
    0 18px 40px -20px rgba(2, 14, 26, .82),
    0 3px 10px -4px rgba(2, 14, 26, .45),
    0 0 40px 2px rgba(124, 200, 233, .26),
    0 0 86px 22px rgba(86, 172, 213, .13);
}
/* Der Glanz darauf. mix-blend-mode nur als Zugabe: ohne Unterstützung
   bleibt eine normale, etwas schwächere Aufhellung stehen. */
.footer__brand .brand::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  border-radius: inherit;
  background: linear-gradient(118deg,
              rgba(255, 255, 255, .92) 0%,
              rgba(255, 255, 255, .34) 26%,
              rgba(255, 255, 255, 0) 47%);
  pointer-events: none;
}
@supports (mix-blend-mode: overlay) {
  .footer__brand .brand::after { mix-blend-mode: overlay; }
}
.footer__brand .brand > picture { position: relative; z-index: 2; }
@media (max-width: 36rem) {
  .footer__brand .brand { padding: .85rem 1.15rem .9rem; border-radius: 16px; }
}
.footer__tagline { margin-top: 1.2rem; font-size: .92rem; line-height: 1.65; max-width: 32ch; }
.footer__motto {
  font-family: 'Playfair Display', serif;
  font-style: italic;
  font-size: 1.12rem;
  color: var(--teal-light);
  margin-top: 1rem;
}
.footer h4 {
  color: #fff;
  font-family: 'Inter', sans-serif;
  font-size: .8rem;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  margin-bottom: 1.15rem;
}
.footer__list { display: grid; gap: .6rem; font-size: .91rem; }
.footer__list a { color: rgba(255,255,255,.68); transition: color .25s, padding-left .25s var(--ease); display: inline-block; }
.footer__list a:hover { color: #fff; padding-left: .3rem; }
.footer__contact { display: grid; gap: .9rem; font-size: .91rem; }
.footer__contact .info-row svg { color: var(--teal-light); }
.footer__contact .info-row a, .footer__contact .info-row { color: rgba(255,255,255,.72); }
.footer__contact .info-row strong { color: #fff; }
.footer__contact .info-row a:hover { color: #fff; }

.socials { display: flex; gap: .55rem; margin-top: 1.5rem; }
.socials a {
  width: 40px; height: 40px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,.16);
  display: grid; place-items: center;
  color: rgba(255,255,255,.78);
  transition: all .3s var(--ease);
}
.socials a svg { width: 17px; height: 17px; }
.socials a:hover { background: var(--teal); border-color: var(--teal); color: #fff; transform: translateY(-3px); }

.footer__bottom {
  position: relative;
  border-top: 1px solid rgba(255,255,255,.1);
  padding-block: 1.5rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  font-size: .83rem;
  color: rgba(255,255,255,.5);
}
.footer__bottom nav { display: flex; flex-wrap: wrap; gap: 1.3rem; }
.footer__bottom a { color: rgba(255,255,255,.6); transition: color .2s; }
.footer__bottom a:hover { color: #fff; }

/* Mobile Action-Bar */
.action-bar {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 70;
  display: none;
  background: rgba(255,255,255,.94);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-top: 1px solid var(--line);
  padding: .5rem .6rem calc(.5rem + env(safe-area-inset-bottom));
  box-shadow: 0 -6px 24px -12px rgba(15,46,76,.2);
}
.action-bar__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: .35rem; }
.action-bar a {
  display: grid;
  justify-items: center;
  gap: .18rem;
  padding: .5rem .3rem;
  border-radius: var(--r-sm);
  font-size: .7rem;
  font-weight: 600;
  color: var(--navy);
  transition: background-color .25s;
}
.action-bar a:hover { background: var(--ice-50); }
.action-bar svg { width: 20px; height: 20px; color: var(--teal); }
.action-bar a.is-primary { background: var(--teal); color: #fff; }
.action-bar a.is-primary svg { color: #fff; }

/* =============================================================
   MODAL
   ============================================================= */
.modal {
  position: fixed;
  inset: 0;
  z-index: 120;
  display: grid;
  place-items: center;
  padding: 1.2rem;
  background: rgba(15,46,76,.5);
  backdrop-filter: blur(6px);
  opacity: 0;
  visibility: hidden;
  transition: opacity .35s var(--ease), visibility .35s;
}
.modal.is-open { opacity: 1; visibility: visible; }
.modal__panel {
  width: min(680px, 100%);
  max-height: 88vh;
  overflow-y: auto;
  background: #fff;
  border-radius: var(--r-lg);
  box-shadow: var(--sh-lg);
  padding: clamp(1.6rem, 4vw, 2.6rem);
  transform: translateY(18px) scale(.98);
  transition: transform .42s var(--ease-out);
}
.modal.is-open .modal__panel { transform: none; }
.modal__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 1.5rem; margin-bottom: 1.6rem; }
.modal__head p { font-size: .93rem; margin-top: .5rem; }
.modal__close {
  width: 40px; height: 40px;
  flex: none;
  border-radius: 50%;
  border: 1px solid var(--line);
  display: grid; place-items: center;
  color: var(--navy);
  transition: all .25s;
}
.modal__close:hover { background: var(--ice-50); border-color: var(--teal-light); }
.modal__close svg { width: 17px; height: 17px; }

/* Cookie-Banner */
.consent {
  position: fixed;
  left: clamp(1rem, 3vw, 1.75rem);
  bottom: clamp(1rem, 3vw, 1.75rem);
  z-index: 130;
  width: min(430px, calc(100vw - 2rem));
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-lg);
  padding: 1.5rem;
  transform: translateY(calc(100% + 3rem));
  opacity: 0;
  visibility: hidden;
  transition: transform .55s var(--ease-out), opacity .4s, visibility .55s;
}
.consent.is-visible { transform: none; opacity: 1; visibility: visible; }
.consent h4 { font-family: 'Playfair Display', serif; font-size: 1.2rem; margin-bottom: .55rem; }
.consent p { font-size: .84rem; line-height: 1.6; margin-bottom: 1.1rem; }
.consent__actions { display: grid; gap: .5rem; grid-template-columns: 1fr 1fr; }
.consent__actions .btn { justify-content: center; padding-inline: 1rem; }
.consent__links { margin-top: .9rem; font-size: .76rem; color: var(--ink-mute); display: flex; gap: 1rem; }

/* =============================================================
   PROSE (Impressum / Datenschutz)
   ============================================================= */
.prose { max-width: 72ch; font-size: .96rem; line-height: 1.78; }
.prose h2 { font-size: clamp(1.4rem, 2.4vw, 1.85rem); margin: 2.8rem 0 1rem; }
.prose h3 { font-size: 1.15rem; margin: 2rem 0 .7rem; font-family: 'Inter', sans-serif; font-weight: 600; }
.prose h2:first-child, .prose h3:first-child { margin-top: 0; }
.prose p + p { margin-top: 1rem; }
.prose ul { margin: 1rem 0; display: grid; gap: .5rem; }
.prose ul li { position: relative; padding-left: 1.5rem; }
.prose ul li::before { content: ''; position: absolute; left: 0; top: .68em; width: 6px; height: 6px; border-radius: 50%; background: var(--teal-light); }
.prose a { text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(19,135,172,.4); }
.prose a:hover { text-decoration-color: var(--teal); }
.prose strong { color: var(--navy); font-weight: 600; }
.prose__box {
  background: var(--mist);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-md);
  padding: 1.4rem 1.6rem;
  margin: 1.6rem 0;
}
.prose__box p + p { margin-top: .4rem; }

.toc {
  position: sticky;
  top: calc(var(--nav-h) + 24px);
  background: var(--mist);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-md);
  padding: 1.4rem;
}
.toc h4 { font-family: 'Inter', sans-serif; font-size: .76rem; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-mute); margin-bottom: .9rem; }
.toc ul { display: grid; gap: .4rem; }
.toc a { font-size: .87rem; color: var(--ink-soft); transition: color .2s, padding-left .2s; display: inline-block; }
.toc a:hover { color: var(--teal); padding-left: .25rem; }

.layout-aside { display: grid; grid-template-columns: 260px minmax(0,1fr); gap: clamp(2rem, 5vw, 4rem); align-items: start; }

/* Wellen-Divider */
.wave-divider { display: block; width: 100%; height: auto; color: var(--mist); }
.wave-divider--white { color: #fff; }
.wave-divider--ice { color: var(--ice-50); }

/* =============================================================
   ANIMATIONEN
   ============================================================= */
[data-reveal] {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity .8s var(--ease-out), transform .8s var(--ease-out);
  transition-delay: var(--d, 0ms);
}
[data-reveal].is-in { opacity: 1; transform: none; }

/* -------------------------------------------------------------
   AUFSTEIGENDE SEIFENBLASEN
   Erscheinen beim Scrollen, steigen sanft nach oben und zerplatzen
   ------------------------------------------------------------- */
.bubbles {
  position: fixed;
  inset: 0;
  /* über dem Seiteninhalt, aber unter Navigation, Aktionsleiste und Dialogen */
  z-index: 3;
  overflow: hidden;
  pointer-events: none;
  contain: strict;
}
.bubble {
  position: absolute;
  bottom: -14vh;
  border-radius: 50%;
  will-change: transform, opacity;
  animation: bubble-rise var(--dur, 13s) cubic-bezier(.36,.05,.5,1) forwards;
  /* Seifenblase: innen fast klar, damit der Text darunter lesbar bleibt.
     Die Sichtbarkeit kommt aus dem Rand, den Glanzlichtern und einem
     zarten Schillern – nicht aus einer deckenden Füllung. */
  background:
    /* Hauptglanz oben links */
    radial-gradient(circle at 30% 26%, rgba(255,255,255,.97) 0%, rgba(255,255,255,.42) 13%, transparent 31%),
    /* Schillern wie bei echter Seifenhaut: warm unten links, kühl oben rechts */
    radial-gradient(circle at 33% 71%, rgba(255,168,214,.22) 0%, transparent 45%),
    radial-gradient(circle at 74% 33%, rgba(142,240,206,.20) 0%, transparent 43%),
    /* Der Rand ist das eigentliche Erkennungsmerkmal */
    radial-gradient(circle at 50% 50%,
      transparent 0%,
      transparent 56%,
      rgba(19,135,172,.18) 68%,
      rgba(19,135,172,.60) 84%,
      rgba(126,216,240,.72) 93%,
      rgba(19,135,172,.32) 100%);
  box-shadow:
    /* Haarfeine Außenkante – gibt der Blase auch auf Weiß eine klare
       Silhouette, ohne Fläche zu decken */
    0 0 0 1px rgba(19,135,172,.30),
    inset 0 -3px 11px rgba(19,135,172,.38),
    inset 2px 3px 9px rgba(255,255,255,.92),
    0 4px 20px rgba(19,135,172,.22);
  border: 1px solid rgba(255,255,255,.72);
}
/* Hauptglanzpunkt */
.bubble::after {
  content: '';
  position: absolute;
  top: 16%; left: 21%;
  width: 26%; height: 21%;
  border-radius: 50%;
  background: rgba(255,255,255,.96);
  filter: blur(.5px);
}
/* Kleiner Gegenglanz unten rechts – lässt die Blase räumlich wirken */
.bubble::before {
  content: '';
  position: absolute;
  bottom: 15%; right: 19%;
  width: 13%; height: 11%;
  border-radius: 50%;
  background: rgba(255,255,255,.66);
  filter: blur(.6px);
}
@keyframes bubble-rise {
  0% {
    transform: translate3d(0, 0, 0) scale(.55);
    opacity: 0;
  }
  8% {
    opacity: var(--peak, .55);
    transform: translate3d(calc(var(--dx, 0px) * .1), -10vh, 0) scale(.85);
  }
  50% {
    transform: translate3d(calc(var(--dx, 0px) * .6), -58vh, 0) scale(1);
  }
  80% {
    opacity: calc(var(--peak, .55) * .75);
  }
  100% {
    transform: translate3d(var(--dx, 0px), -125vh, 0) scale(1.06);
    opacity: 0;
  }
}
@media (prefers-reduced-motion: reduce) {
  .bubbles { display: none; }
}

.float-anim { animation: float 7s ease-in-out infinite; }
@keyframes float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-11px); }
}

/* =============================================================
   RESPONSIVE
   ============================================================= */
/* Zweiter Kopfzeilen-Button weicht als Erstes, wenn es eng wird */
@media (max-width: 1560px) {
  .nav__actions .btn--wide-only { display: none; }
}
/* Seit dem siebten Menüpunkt („Ratgeber“) wird die Pille unter 1240 px zu eng
   und die Beschriftungen brechen um. Ab hier übernimmt das Burger-Menü,
   der Termin-Button bleibt bis 980 px sichtbar. */
@media (max-width: 1240px) {
  .nav { grid-template-columns: 1fr auto; }
  .nav__menu { display: none; }
  .burger { display: grid; }
}
/* Menüpunkte rücken zusammen, damit beide Buttons Luft behalten */
@media (max-width: 1560px) {
  }

@media (max-width: 1080px) {
  .footer__grid { grid-template-columns: 1fr 1fr; }
  .layout-aside { grid-template-columns: 1fr; }
  .toc { position: static; }
  .nav__link { padding-inline: .7rem; font-size: .89rem; }
}

@media (max-width: 980px) {
  :root { --nav-h: 76px; }
  .nav { grid-template-columns: 1fr auto; }
  .nav__menu { display: none; }
  .burger { display: grid; }
  .nav__actions .btn--desktop { display: none; }
  .hero__grid { grid-template-columns: minmax(0, 1fr); }
  .hero__copy, .hero__media { grid-column: 1; }
  .hero__media { margin-left: 0; }
  /* Bild rutscht hinter den Text und blendet nach oben und unten aus */
  .hero { padding-bottom: 0; }
  .hero__grid { min-height: 0; }
  .hero__media {
    position: relative;
    top: auto; left: auto; right: auto;
    transform: none;
    width: calc(100% + 2 * clamp(1.15rem, 4vw, 2.5rem));
    margin-left: calc(-1 * clamp(1.15rem, 4vw, 2.5rem));
    margin-top: clamp(.5rem, 3vw, 1.5rem);
    margin-bottom: clamp(-3rem, -6vw, -1.5rem);
    aspect-ratio: 16 / 11;
  }
  .hero__media img {
    object-position: 68% center;
    -webkit-mask-image: linear-gradient(to bottom, transparent 0%, rgba(0,0,0,.6) 12%, #000 30%, #000 62%, rgba(0,0,0,.6) 86%, transparent 100%);
    mask-image: linear-gradient(to bottom, transparent 0%, rgba(0,0,0,.6) 12%, #000 30%, #000 62%, rgba(0,0,0,.6) 86%, transparent 100%);
    -webkit-mask-composite: source-over;
    mask-composite: add;
  }
  .hero__glow {
    inset: -8% -6%;
    background:
      radial-gradient(70% 55% at 50% 8%,  rgba(255,255,255,.85) 0%, transparent 60%),
      radial-gradient(80% 45% at 50% 96%, rgba(255,255,255,.9) 0%, transparent 62%);
  }
  .hero__copy { max-width: none; }
  .hero__copy h1, .hero__copy .lead { text-shadow: none; }
  .hero__wave { display: none; }
  .service-bar__item, .stat { border-right: 0; padding-right: 0; }
  .split--reverse .split__media { order: 0; }
  .process::before { display: none; }
  .price-list { grid-template-columns: 1fr; }
}

@media (max-width: 760px) {
  .topbar__inner { justify-content: center; }
  .topbar__list--secondary { display: none; }
  .action-bar { display: block; }
  body { padding-bottom: 68px; }
  .estimator { bottom: calc(68px + .75rem); right: .75rem; left: .75rem; width: auto; }
  .estimator-fab { bottom: calc(68px + .75rem); }
  .consent { bottom: calc(68px + .75rem); left: .75rem; right: .75rem; width: auto; }
  .footer__grid { grid-template-columns: 1fr; }
  .footer__bottom { justify-content: center; text-align: center; }
  .quote-card blockquote { font-size: 1rem; }
  .cta-band__actions { justify-content: stretch; }
  .cta-band__actions .btn { flex: 1 1 100%; justify-content: center; }
}

@media (max-width: 460px) {
  .brand__mark { width: 40px; height: 40px; }
  .brand__sub { letter-spacing: .22em; font-size: .55rem; }
  .consent__actions { grid-template-columns: 1fr; }
  .price-row__name { font-size: .89rem; }
  .hours__row { flex-direction: column; gap: .05rem; }
  .hours__time { text-align: left; }
  .estimator__actions { grid-template-columns: 1fr; }
}

/* Sehr schmale Geräte: Headline darf umbrechen */
@media (max-width: 400px) {
  .hero__copy h1 .line-2 { white-space: normal; }
  h1 { font-size: clamp(2.05rem, 9.5vw, 2.4rem); }
  .topbar { font-size: .76rem; }
  .btn { padding: .85rem 1.3rem; font-size: .9rem; }
  .btn--lg { padding: .95rem 1.5rem; font-size: .95rem; }
  /* schrumpft mit, damit beide Hero-Buttons gleich hoch bleiben */
  .hero__cta .btn--ice { padding-block: .85rem; }
}

/* ---------- Reduced Motion ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
  [data-reveal] { opacity: 1; transform: none; }
}

/* ---------- Print ---------- */
@media print {
  .site-header, .topbar, .action-bar, .estimator, .estimator-fab,
  .consent, .cta-band, .price-tools, .drawer { display: none !important; }
  body { padding-bottom: 0; color: #000; }
  .section { padding-block: 1.5rem; }
  a { color: #000; }
  .price-list { grid-template-columns: 1fr 1fr; }
}

/* ---------- Utilities ---------- */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}
.skip-link {
  position: absolute;
  left: 50%;
  top: -60px;
  transform: translateX(-50%);
  z-index: 200;
  padding: .7rem 1.4rem;
  background: var(--navy);
  color: #fff;
  border-radius: 0 0 var(--r-sm) var(--r-sm);
  font-size: .88rem;
  font-weight: 600;
  transition: top .3s var(--ease);
}
.skip-link:focus { top: 0; }
.mt-0 { margin-top: 0; }
.mt-1 { margin-top: .5rem; }
.mt-2 { margin-top: 1rem; }
.mt-3 { margin-top: 1.75rem; }
.mt-4 { margin-top: 2.5rem; }
.mb-2 { margin-bottom: 1rem; }
.mb-3 { margin-bottom: 1.75rem; }
.text-center { text-align: center; }
.hide { display: none !important; }

/* =============================================================
   RATGEBER (flecken.html, pflegesymbole.html)
   ============================================================= */
:root {
  --ja:      #17795E;
  --ja-bg:   #EFF8F4;
  --ja-line: #CFE8DE;
  --nein:      #A8402C;
  --nein-bg:   #FBF2EF;
  --nein-line: #F0DAD3;
}

/* ---------- Reiter-Umschalter unter dem Seitenkopf ---------- */
.ratgeber-tabs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .5rem 1.1rem;
  padding: 1.1rem 0 .2rem;
  border-bottom: 1px solid var(--line-soft);
}
.ratgeber-tabs__label {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ink-mute);
}
.ratgeber-tabs__label svg { width: 15px; height: 15px; color: var(--teal); }
.ratgeber-tabs .chips { padding-bottom: .9rem; }
.ratgeber-tabs .chip { display: inline-flex; align-items: center; }

/* ---------- Vier Grundregeln ---------- */
.fleck-regeln {
  background: linear-gradient(140deg, var(--navy) 0%, var(--teal-dark) 190%);
  color: rgba(255,255,255,.8);
  border-radius: var(--r-lg);
  padding: clamp(1.4rem, 3vw, 2.2rem);
}
.fleck-regeln h2 {
  color: #fff;
  font-size: clamp(1.25rem, 2.4vw, 1.6rem);
  margin-bottom: 1.2rem;
}
.fleck-regeln__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1.1rem 1.8rem;
}
.fleck-regeln__grid > div { display: flex; gap: .75rem; align-items: flex-start; }
.fleck-regeln__grid span {
  flex: none;
  width: 27px; height: 27px;
  border-radius: 50%;
  display: grid; place-items: center;
  background: rgba(255,255,255,.14);
  color: #fff;
  font-size: .82rem;
  font-weight: 700;
}
.fleck-regeln__grid p { font-size: .87rem; line-height: 1.55; }
.fleck-regeln__grid strong { color: #fff; font-weight: 600; }

/* ---------- Fleck-Karte ---------- */
.fleck__btn { gap: .9rem; }
.fleck__badge {
  flex: none;
  width: 40px; height: 40px;
  border-radius: 50%;
  background: var(--ice);
  color: var(--teal);
  display: grid; place-items: center;
  transition: background-color .3s, color .3s;
}
.fleck__badge svg { width: 19px; height: 19px; }
.fleck.is-open .fleck__badge { background: var(--teal); color: #fff; }
.fleck__title { flex: 1; min-width: 0; }
.fleck__title strong { display: block; font-weight: 600; }
.fleck__title small {
  display: block;
  margin-top: .12rem;
  font-size: .82rem;
  font-weight: 400;
  line-height: 1.4;
  color: var(--ink-mute);
}

.fleck__split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .8rem;
  margin-bottom: .9rem;
}
.fleck__col { border-radius: var(--r-sm); padding: .95rem 1.05rem; }
.fleck__col h4 {
  display: flex;
  align-items: center;
  gap: .4rem;
  font-family: 'Inter', sans-serif;
  font-size: .84rem;
  font-weight: 700;
  letter-spacing: .02em;
  margin-bottom: .55rem;
}
.fleck__col h4 svg { width: 16px; height: 16px; flex: none; }
.fleck__col ul { list-style: none; display: grid; gap: .45rem; }
.fleck__col li { position: relative; padding-left: .95rem; font-size: .87rem; line-height: 1.55; }
.fleck__col li::before {
  content: "";
  position: absolute;
  left: 0; top: .62em;
  width: 5px; height: 5px;
  border-radius: 50%;
  background: currentColor;
  opacity: .5;
}
.fleck__col--ja   { background: var(--ja-bg);   border: 1px solid var(--ja-line);   color: var(--ink-soft); }
.fleck__col--ja h4   { color: var(--ja); }
.fleck__col--nein { background: var(--nein-bg); border: 1px solid var(--nein-line); color: var(--ink-soft); }
.fleck__col--nein h4 { color: var(--nein); }

.fleck__note {
  display: flex;
  align-items: flex-start;
  gap: .55rem;
  font-size: .85rem;
  line-height: 1.55;
  color: var(--ink-mute);
  margin-bottom: .5rem;
}
.fleck__note svg { width: 17px; height: 17px; flex: none; margin-top: .16rem; color: var(--teal); }
.fleck__note--warn { color: var(--nein); }
.fleck__note--warn svg { color: var(--nein); }

.fleck__cta { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: 1rem; }

@media (max-width: 700px) {
  .fleck__split { grid-template-columns: 1fr; }
  .fleck__btn { gap: .7rem; padding-inline: 1rem; }
  .fleck__badge { width: 36px; height: 36px; }
  .fleck__cta .btn { flex: 1 1 100%; justify-content: center; }
}

/* ---------- Pflegesymbole ---------- */
.sym-hinweis {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
  padding: 1.1rem 1.3rem;
  border-radius: var(--r-md);
  background: var(--ice-50);
  border: 1px solid var(--line-soft);
}
.sym-hinweis .icon-circle { background: #fff; }
.sym-hinweis h3 {
  font-family: 'Inter', sans-serif;
  font-size: 1rem;
  font-weight: 600;
  color: var(--navy);
  margin-bottom: .25rem;
}
.sym-hinweis p { font-size: .88rem; }

.sym-gruppe { margin-top: clamp(2rem, 4vw, 3rem); }
.sym-gruppe__head { margin-bottom: 1.1rem; }
.sym-gruppe__head h2 { font-size: clamp(1.3rem, 2.6vw, 1.75rem); }
.sym-gruppe__head p { font-size: .88rem; color: var(--ink-mute); margin-top: .2rem; }

.sym-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(272px, 1fr));
  gap: .7rem;
}
.sym {
  display: flex;
  align-items: flex-start;
  gap: .9rem;
  width: 100%;
  padding: .95rem 1rem;
  text-align: left;
  background: #fff;
  border: 1px solid var(--line-soft);
  border-radius: var(--r-md);
  transition: border-color .25s var(--ease), box-shadow .25s var(--ease), background-color .25s;
}
.sym:hover { border-color: rgba(78,179,208,.5); box-shadow: var(--sh-sm); }
.sym.is-picked { border-color: var(--teal); background: var(--ice-50); box-shadow: var(--sh-sm); }
.sym__box {
  flex: none;
  width: 46px; height: 52px;
  display: grid; place-items: center;
  color: var(--navy);
}
.sym__svg { width: 40px; height: 45px; }
.sym.is-picked .sym__box { color: var(--teal); }
.sym__text { flex: 1; min-width: 0; }
.sym__text strong {
  display: block;
  font-family: 'Inter', sans-serif;
  font-size: .93rem;
  font-weight: 600;
  color: var(--navy);
  line-height: 1.3;
}
.sym__text small {
  display: block;
  margin-top: .25rem;
  font-size: .8rem;
  line-height: 1.5;
  color: var(--ink-mute);
}
.sym__pick {
  flex: none;
  width: 26px; height: 26px;
  border-radius: 50%;
  background: var(--ice);
  color: var(--teal);
  display: grid; place-items: center;
  transition: transform .35s var(--ease), background-color .25s, color .25s;
}
.sym__pick svg { width: 13px; height: 13px; }
.sym.is-picked .sym__pick { background: var(--teal); color: #fff; transform: rotate(45deg); }

/* ---------- Auswahlkasten „Ihr Etikett“ ---------- */
.etikett {
  position: fixed;
  right: clamp(1rem, 3vw, 2rem);
  bottom: clamp(1rem, 3vw, 2rem);
  z-index: 80;
  width: min(390px, calc(100vw - 2rem));
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-lg);
  overflow: hidden;
  transform: translateY(calc(100% + 3rem));
  opacity: 0;
  visibility: hidden;
  transition: transform .5s var(--ease-out), opacity .35s var(--ease), visibility .5s;
}
.etikett.is-visible { transform: none; opacity: 1; visibility: visible; }
.etikett__head {
  display: flex;
  align-items: center;
  gap: .6rem;
  padding: .9rem 1.2rem;
  background: var(--navy);
  color: #fff;
  cursor: pointer;
}
.etikett__head > svg { width: 19px; height: 19px; flex: none; }
.etikett__head h4 { color: #fff; font-family: 'Inter', sans-serif; font-size: .98rem; font-weight: 600; }
.etikett__count {
  min-width: 22px;
  padding: 0 .4rem;
  border-radius: var(--r-pill);
  background: var(--teal);
  color: #fff;
  font-size: .78rem;
  font-weight: 700;
  text-align: center;
}
.etikett__toggle { margin-left: auto; color: rgba(255,255,255,.8); display: grid; place-items: center; transition: transform .35s var(--ease); }
.etikett__toggle svg { width: 18px; height: 18px; }
.etikett.is-collapsed .etikett__toggle { transform: rotate(180deg); }
.etikett__body { max-height: min(32vh, 260px); overflow-y: auto; padding: .7rem 1.2rem; }
.etikett.is-collapsed .etikett__body,
.etikett.is-collapsed .etikett__foot { max-height: 0; padding-block: 0; overflow: hidden; opacity: 0; }
.etikett__body,
.etikett__foot { transition: max-height .4s var(--ease), padding .4s var(--ease), opacity .3s; }
.etikett__item {
  display: flex;
  align-items: center;
  gap: .6rem;
  padding: .4rem 0;
  border-bottom: 1px solid var(--line-soft);
}
.etikett__item:last-child { border-bottom: 0; }
.etikett__item .sym__svg { width: 26px; height: 29px; flex: none; color: var(--navy); }
.etikett__item span { flex: 1; font-size: .85rem; color: var(--ink); line-height: 1.3; }
.etikett__item button { font-size: 1.15rem; line-height: 1; color: var(--ink-mute); padding: 0 .2rem; }
.etikett__item button:hover { color: var(--nein); }
.etikett__foot { padding: 1rem 1.2rem 1.2rem; border-top: 1px solid var(--line); background: var(--mist); }
.etikett__kopf { font-size: .9rem; line-height: 1.55; color: var(--navy); font-weight: 500; }
.etikett__urteil ul { list-style: none; margin-top: .55rem; display: grid; gap: .3rem; }
.etikett__urteil li { position: relative; padding-left: .9rem; font-size: .82rem; line-height: 1.5; color: var(--ink-mute); }
.etikett__urteil li::before {
  content: "";
  position: absolute;
  left: 0; top: .58em;
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--teal);
}
.etikett__actions { display: grid; grid-template-columns: 1fr auto; gap: .5rem; margin-top: .9rem; }
.etikett__actions .btn--ghost { padding-inline: .85rem; }

@media (max-width: 760px) {
  .etikett { bottom: calc(68px + .75rem); right: .75rem; left: .75rem; width: auto; }
}
@media (max-width: 520px) {
  .etikett__actions { grid-template-columns: 1fr; }
}
@media print {
  .etikett { display: none !important; }
}

/* =============================================================
   APP-ANSICHT (app.html – installierte PWA)
   Reduzierte Oberfläche: Preisrechner, Termin, Anruf.
   Alle Regeln hängen an body.app und wirken nur dort.
   ============================================================= */
body.app {
  background: var(--mist);
  padding-bottom: calc(74px + env(safe-area-inset-bottom));
}
body.app .bubbles { opacity: .5; }

/* ---------- Kopf ---------- */
.app-head {
  position: sticky;
  top: 0;
  z-index: 60;
  background: linear-gradient(135deg, var(--navy) 0%, var(--teal-dark) 165%);
  color: #fff;
  padding: calc(.85rem + env(safe-area-inset-top)) 1.1rem .8rem;
  box-shadow: 0 10px 30px -18px rgba(15,46,76,.7);
}
.app-head__row { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.app-head .brand__name { color: #fff; font-size: 1.15rem; }
.app-head .brand__sub  { color: rgba(255,255,255,.62); }
.app-head__link {
  display: grid;
  place-items: center;
  width: 40px; height: 40px;
  flex: none;
  border-radius: var(--r-pill);
  background: rgba(255,255,255,.12);
  color: #fff;
  transition: background-color .25s;
}
.app-head__link:hover { background: rgba(255,255,255,.22); }
.app-head__link svg { width: 20px; height: 20px; }
.app-status {
  display: flex;
  align-items: center;
  gap: .45rem;
  margin-top: .7rem;
  font-size: .8rem;
  color: rgba(255,255,255,.78);
}
.app-status strong { color: #fff; font-weight: 600; }

/* ---------- Ansichten ---------- */
.app-view[hidden] { display: none; }
.app-pad { padding: 1.2rem 1.1rem 1.5rem; max-width: 720px; margin-inline: auto; }
.app-intro { margin-bottom: 1.2rem; }
.app-intro h1 {
  font-size: clamp(1.5rem, 6vw, 1.95rem);
  line-height: 1.15;
  color: var(--navy);
  margin-bottom: .4rem;
}
.app-intro p { font-size: .88rem; }
.app-card { padding: 1.2rem; margin-bottom: 1.1rem; }
.app-card__title {
  font-family: 'Inter', sans-serif;
  font-size: 1rem;
  font-weight: 600;
  color: var(--navy);
  margin-bottom: .9rem;
}
.app-actions { display: grid; gap: .6rem; }
.app-place {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .8rem;
  margin-bottom: .8rem;
}
.app-place strong { display: block; font-size: .93rem; color: var(--navy); }
.app-place span { font-size: .82rem; color: var(--ink-mute); }
.app-hint {
  margin-top: 1.2rem;
  padding: .9rem 1.1rem;
  border-radius: var(--r-md);
  background: var(--ice-50);
  border: 1px solid var(--line-soft);
  font-size: .84rem;
  text-align: center;
}
.app-legal { margin-top: 1.4rem; text-align: center; font-size: .8rem; color: var(--ink-mute); }
.app-legal a { color: var(--ink-mute); text-decoration: underline; }

/* Preisliste in der App: eine Spalte, kompaktere Werkzeugleiste */
body.app .price-list { grid-template-columns: 1fr; }
body.app .price-tools { margin-bottom: 1.2rem; }
body.app .chips { width: 100%; }

/* ---------- Kostenschätzer über der App-Leiste ---------- */
body.app .estimator {
  left: .6rem;
  right: .6rem;
  bottom: calc(74px + env(safe-area-inset-bottom) + .6rem);
  width: auto;
  max-width: 720px;
  margin-inline: auto;
}
body.app.is-view-termin .estimator { display: none; }

/* ---------- App-Leiste unten ---------- */
.appbar {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 90;
  background: rgba(255,255,255,.95);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-top: 1px solid var(--line);
  padding: .5rem .6rem calc(.5rem + env(safe-area-inset-bottom));
  box-shadow: 0 -6px 24px -12px rgba(15,46,76,.2);
}
.appbar__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: .35rem;
  max-width: 720px;
  margin-inline: auto;
}
.appbar__item {
  display: grid;
  justify-items: center;
  gap: .18rem;
  padding: .5rem .3rem;
  border-radius: var(--r-sm);
  font-size: .7rem;
  font-weight: 600;
  color: var(--navy);
  text-align: center;
  transition: background-color .25s, color .25s;
}
.appbar__item svg { width: 21px; height: 21px; color: var(--teal); }
.appbar__item:hover { background: var(--ice-50); }
.appbar__item.is-active { background: var(--teal); color: #fff; }
.appbar__item.is-active svg { color: #fff; }

@media print {
  .app-head, .appbar { display: none !important; }
  body.app { padding-bottom: 0; }
}

/* =============================================================
   HINWEIS AUF EINE NEUE FASSUNG (Service Worker)
   ============================================================= */
.sw-hinweis {
  position: fixed;
  left: 50%;
  bottom: 1rem;
  z-index: 130;
  display: flex;
  align-items: center;
  gap: .9rem;
  max-width: calc(100vw - 1.5rem);
  padding: .7rem .8rem .7rem 1.1rem;
  border-radius: var(--r-pill);
  background: var(--navy);
  color: #fff;
  font-size: .87rem;
  box-shadow: var(--sh-lg);
  transform: translate(-50%, calc(100% + 2rem));
  opacity: 0;
  transition: transform .45s var(--ease-out), opacity .3s var(--ease);
}
.sw-hinweis.is-visible { transform: translate(-50%, 0); opacity: 1; }
.sw-hinweis button {
  flex: none;
  padding: .4rem 1rem;
  border-radius: var(--r-pill);
  background: var(--teal);
  color: #fff;
  font-size: .84rem;
  font-weight: 600;
  transition: background-color .25s;
}
.sw-hinweis button:hover { background: var(--teal-light); }

body.app .sw-hinweis { bottom: calc(74px + env(safe-area-inset-bottom) + .6rem); }

@media (max-width: 760px) {
  .sw-hinweis { bottom: calc(68px + .75rem); }
}
@media print {
  .sw-hinweis { display: none !important; }
}

/* ============================================================
   Flecken-Helfer — das Fenster unter „Ratgeber"
   ============================================================
   Ein Klecks statt eines Rechtecks: Die Form kommt vom Gegenstand,
   nicht aus dem Baukasten. Ohne JavaScript, auf Zeigen **und** auf
   Tastaturfokus — wer mit Tab navigiert, bekommt sonst ein Menü,
   das es für ihn nicht gibt.                                    */

.nav__punkt { position: relative; display: inline-block; }

.ratgeber-fleck {
  position: absolute;
  top: calc(100% + .45rem);
  left: 50%;
  width: 22rem;
  translate: -50% 0;
  z-index: 60;
  opacity: 0;
  visibility: hidden;
  scale: .94;
  transform-origin: top center;
  transition: opacity .22s var(--ease), scale .28s var(--ease-out),
              visibility 0s linear .3s;
}

/* Der unsichtbare Streifen zwischen Link und Fenster. Ohne ihn reißt
   die Mausbewegung ab, sobald sie die Lücke quert, und das Fenster
   klappt unter dem Zeiger weg. */
.ratgeber-fleck::before {
  content: "";
  position: absolute;
  inset: -.6rem 0 auto;
  height: 1rem;
}

.nav__punkt--ratgeber:hover .ratgeber-fleck,
.nav__punkt--ratgeber:focus-within .ratgeber-fleck {
  opacity: 1;
  visibility: visible;
  scale: 1;
  transition-delay: 0s;
}

/* Der Fleck selbst liegt hinter dem Text und trägt ihn. */
.ratgeber-fleck__form {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  filter: drop-shadow(0 18px 34px rgba(15, 46, 76, .22));
}
.ratgeber-fleck__klecks { fill: var(--navy); }
/* **Rot, weil es ein Fleck ist.** Die Unterzeile fragt nach Rotwein, Fett
   und Blut — ein türkiser Spritzer daneben wäre Wasser. Der Ton ist ein
   Weinrot, das auf dem dunklen Blau leuchtet, ohne grell zu werden.
   Die Tropfen sind Zierde: Sie tragen keine Aussage, die verloren ginge,
   wenn jemand Farben nicht unterscheidet. */
.ratgeber-fleck__tropfen { fill: #E2544B; opacity: 0; }

/* Die Tropfen kommen versetzt — daraus wird aus einer Form eine
   Bewegung. Sie sind Zierde: Wer Bewegung abbestellt hat, sieht sie
   einfach von Anfang an. */
.nav__punkt--ratgeber:hover .ratgeber-fleck__tropfen,
.nav__punkt--ratgeber:focus-within .ratgeber-fleck__tropfen {
  opacity: 1;
  transition: opacity .3s var(--ease) .12s, translate .45s var(--ease-out) .12s;
}
/* Jeder Spritzer kommt aus einer eigenen Richtung und zu seiner eigenen
   Zeit — gleichzeitig wäre es ein Blinken, nicht ein Spritzen. */
.ratgeber-fleck__tropfen--a { translate: 0 -7px; transition-delay: .10s !important; }
.ratgeber-fleck__tropfen--b { translate: 0 -5px; transition-delay: .16s !important; }
.ratgeber-fleck__tropfen--c { translate: 3px -3px; transition-delay: .13s !important; }
.ratgeber-fleck__tropfen--d { translate: -2px -6px; transition-delay: .20s !important; }
.ratgeber-fleck__tropfen--e { translate: -3px 4px; transition-delay: .24s !important; }
.ratgeber-fleck__tropfen--f { translate: 4px 2px; transition-delay: .18s !important; }
.nav__punkt--ratgeber:hover .ratgeber-fleck__tropfen,
.nav__punkt--ratgeber:focus-within .ratgeber-fleck__tropfen { translate: 0 0; }

.ratgeber-fleck__inhalt {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: .3rem;
  /* Grosszuegig, weil die Raender eines Kleckses krumm sind: Was in einem
     Rechteck knapp passt, liegt hier schon halb ausserhalb der Farbe.
     Oben und links am meisten — dort hat die Form ihre Einbuchtungen, und
     dort stiess die Ueberschrift an den Rand. */
  padding: 2.45rem 1.8rem 2.2rem 3.9rem;
  color: #fff;
}

.ratgeber-fleck__titel {
  /* Dieselbe Schrift wie jede Überschrift des Auftritts — der Fleck ist
     ein Sonderfall in der Form, nicht in der Typografie. */
  font-family: 'Playfair Display', Georgia, 'Times New Roman', serif;
  font-size: 1.32rem;
  line-height: 1.15;
  font-weight: 700;
  letter-spacing: -.01em;
}
.ratgeber-fleck__titel::after {
  content: "";
  display: block;
  width: 2.2rem;
  height: 3px;
  margin-top: .5rem;
  border-radius: 999px;
  background: var(--teal-light);
}

.ratgeber-fleck__unter {
  margin-bottom: .55rem;
  font-size: .85rem;
  line-height: 1.45;
  color: #BFD9E8;
}

.ratgeber-fleck__ziel {
  display: flex;
  align-items: center;
  gap: .5rem;
  padding: .42rem 0;
  font-size: .92rem;
  font-weight: 500;
  color: #fff;
  border-bottom: 1px solid rgba(255, 255, 255, .14);
  transition: color .2s var(--ease), padding-left .2s var(--ease);
}
.ratgeber-fleck__ziel:last-child { border-bottom: 0; }
.ratgeber-fleck__ziel::before {
  content: "";
  width: .42rem;
  height: .42rem;
  border-radius: 999px;
  background: var(--teal-light);
  flex: none;
  transition: scale .2s var(--ease);
}
.ratgeber-fleck__ziel:hover,
.ratgeber-fleck__ziel:focus-visible {
  color: var(--teal-light);
  padding-left: .3rem;
}
.ratgeber-fleck__ziel:hover::before,
.ratgeber-fleck__ziel:focus-visible::before { scale: 1.5; }

/* Auf dem Handy gibt es kein Zeigen — dort führt „Ratgeber" direkt zur
   Seite, und das Schubladenmenü listet beide Ratgeber ohnehin einzeln.
   Ein Fenster, das auf die erste Berührung aufgeht und den Link
   schluckt, wäre dort ein Hindernis, kein Gewinn. */
@media (hover: none), (max-width: 860px) {
  .ratgeber-fleck { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .ratgeber-fleck,
  .ratgeber-fleck__tropfen { transition-duration: .01ms; }
  .ratgeber-fleck { scale: 1; }
  .ratgeber-fleck__tropfen { translate: 0 0 !important;
    transition-delay: 0s !important; }
}