/* ==========================================================================
   Firmenhafen – Design System
   Farb-, Typo- und Formsprache übernommen von helpcare.de
   ========================================================================== */

:root{
  --c-primary:        #F58060;
  --c-primary-dark:   #E06B4B;
  --c-primary-soft:   #F9C5AF;
  --c-primary-tint:   #FFF9F6;
  --c-primary-tint-2: #FCE2D7;

  --c-ink:            #313131;
  --c-ink-soft:       #5a4b4a;
  --c-muted:          #5a4b4a;   /* = --c-ink-soft, helpcare.de hat keinen dritten Textton */
  --c-line:           #e8e3e1;

  --c-placeholder:    #7b7270;

  --c-white:          #ffffff;
  --c-ground:         #ffffff;
  --c-success:        #13612e;

  --ff-base: "Quicksand", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  /* Textstufen. Jede Schriftgroesse der Seite greift auf eine davon zu –
     keine Einzelwerte in den Bausteinen. Ausnahme: Hero und Trustbar, deren
     Pixelwerte von helpcare.de uebernommen sind (README), sowie Wortmarke
     und Siegel als Grafik. */
  --fs-2xs:     .75rem;     /* 12 px  Versal-Labels: Eyebrow, Tarif-Labels, Footer-Ueberschriften */
  --fs-xs:      .8125rem;   /* 13 px  Kleingedrucktes: MwSt.-Hinweis, Einwilligung, Notizen */
  --fs-sm:      .875rem;    /* 14 px  Sekundaertext, Knoepfe, Navigation, Meta-Zeilen */
  --fs-body-sm: .9375rem;   /* 15 px  Kompakter Fliesstext: Karten, Schritte, FAQ, Footer */
  --fs-body:    1.0625rem;  /* 17 px  Fliesstext */
  --fs-feature: clamp(1.5rem, 1.1rem + 1.1vw, 2.1rem); /* Ueberschrift neben Bild (Leistungen, Raeume) */
  --fs-md:    clamp(1.05rem, 0.97rem + 0.3vw, 1.2rem);
  --fs-xl:    clamp(2.1rem, 1.6rem + 1.6vw, 2.9rem);
  --fs-hero:  clamp(2.4rem, 1.1rem + 4vw, 4rem);

  --header-h: 78px;
  /* Breite der Textspalte in der Hero und daraus abgeleitet die Bildbreite.
     Das Bild endet immer so weit rechts, dass zwischen Text und Bildkante
     mindestens 3 rem bleiben – sonst laeuft der Rueckruf-Knopf ins Foto. */
  --hero-spalte: min(40rem, calc(41vw - 5rem));
  /* Die Ueberschrift darf breiter laufen als der uebrige Inhalt der Hero.
     Auf ihrer Hoehe ist die Bildkurve weiter rechts, das schafft Platz. */
  --hero-titel:  min(36rem, calc(var(--hero-spalte) + 1.5rem));
  /* Linke Kante der Hero = linke Kante von .wrap. Damit stehen Wortmarke,
     Ueberschrift, Formular, Siegel, Trustbar und alle Abschnitte auf einer
     Linie. Prozent loesen sich gegen die Hero auf, deshalb stimmt es auch
     mit Scrollbalken. */
  --hero-rand:   calc(max(0px, (100% - var(--w-content)) / 2) + var(--pad-edge));
  --hero-bild:   min(960px, calc(100% - var(--hero-rand) - var(--hero-spalte) - 2.5rem));
  --w-content: 1280px;
  --pad-edge:  clamp(1.25rem, 4vw, 2.5rem);

  /* Abstandsraster. Alles Vertikale greift auf diese acht Werte zu –
     keine Einzelwerte mehr in den Bausteinen. Schrittweite 1.5x. */
  --sp-1: .375rem;
  --sp-2: .75rem;
  --sp-3: 1.125rem;
  --sp-4: 1.75rem;
  --sp-5: 2.5rem;
  --sp-6: 3.5rem;
  --sp-7: 5rem;
  --sp-8: 7rem;
  --sp-section: clamp(var(--sp-5), min(4.6vw, 6.3vh), var(--sp-6));

  --r-sm: 8px;
  --r-md: 16px;
  --r-lg: 24px;
  --r-xl: 32px;
  --r-pill: 999px;

  --sh-sm: 0 2px 10px rgba(49,49,49,.06);
  --sh-md: 0 10px 30px rgba(49,49,49,.08);
  --sh-lg: 0 22px 60px rgba(49,49,49,.12);
  --sh-primary: 0 6px 16px rgba(0,0,0,.18);
}

/* ---------- Reset / Base ---------- */
*,*::before,*::after{box-sizing:border-box}
/* hidden muss immer gewinnen. Sonst hebt jede Komponente mit eigenem display
   (z. B. .hero__form{display:flex}) das Attribut auf – so blieb das
   Rueckruf-Formular nach dem Absenden sichtbar. */
[hidden]{display:none !important}
/* Sprungziele landen sonst unter der klebenden Kopfzeile. Der Versatz
   steht NUR hier: scroll-padding am Scrollbereich und scroll-margin am
   Ziel addieren sich, zwei mal 7.5rem ergaben 240 px Luecke statt 96.
   Kopfzeile 79 px plus etwas Luft. */
html{-webkit-text-size-adjust:100%; scroll-padding-top:6rem; scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto} }

/* Lenis übernimmt das Scrollen. Native scroll-behavior:smooth MUSS dabei aus
   sein – sonst scrollen Browser und Lenis gleichzeitig und das Ergebnis
   ruckelt. Ohne diese Regeln fühlt sich die Seite kaputt an. */
html.lenis, html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto !important}
.lenis.lenis-smooth [data-lenis-prevent]{overscroll-behavior:contain}
.lenis.lenis-stopped{overflow:hidden}
body{
  margin:0;
  font-family:var(--ff-base);
  font-weight:500;
  font-size:var(--fs-body);
  line-height:1.7;
  color:var(--c-ink);
  background:var(--c-ground);
  /* Bewusst KEIN -webkit-font-smoothing:antialiased. Das duennt Text auf
     macOS sichtbar aus; helpcare.de laesst die Glaettung auf auto, dadurch
     wirkt dieselbe Schrift in derselben Staerke dort kraeftiger. */
}
img,svg{max-width:100%; display:block}
a{color:inherit; text-decoration:none}
button{font:inherit; cursor:pointer}
h1,h2,h3,h4{font-weight:700; line-height:1.15; margin:0 0 .6em; color:var(--c-ink); text-wrap:balance}
h1{font-size:var(--fs-hero); letter-spacing:.5px}
h2{font-size:var(--fs-xl); color:var(--c-ink-soft)}
h3{font-size:1.35rem}
p{margin:0 0 1.1em}
p:last-child{margin-bottom:0}
.hl{color:var(--c-primary)}
::selection{background:var(--c-primary); color:#fff}
:focus-visible{outline:3px solid var(--c-primary); outline-offset:3px; border-radius:4px}

.skip{
  position:absolute; left:-9999px; top:0; z-index:200;
  background:var(--c-primary); color:#fff; padding:.7rem 1.2rem; border-radius:0 0 var(--r-sm) 0; font-weight:700;
}
.skip:focus{left:0}

/* ---------- Layout ---------- */
.wrap{width:100%; max-width:var(--w-content); margin-inline:auto; padding-inline:var(--pad-edge)}
.section{padding-block:var(--sp-section); position:relative}
.section--tint{background:linear-gradient(180deg,var(--c-primary-tint) 0%, #fff 100%)}

.section-head{text-align:center; max-width:720px; margin:0 auto clamp(1.6rem,min(2.8vw,4.4vh),2.4rem)}
.section-head p{color:var(--c-muted); font-size:var(--fs-md); margin-top:var(--sp-2);
  max-width:52ch; margin-inline:auto; text-wrap:balance}
.eyebrow{
  display:inline-flex; align-items:center; gap:.6rem;
  text-transform:uppercase; letter-spacing:2.5px;
  font-size:var(--fs-2xs); font-weight:700; color:var(--c-primary); margin-bottom:var(--sp-2);
}
.eyebrow::before,.eyebrow::after{content:""; width:22px; height:2px; background:var(--c-primary-soft); border-radius:2px}
.offer__copy .eyebrow::before,.offer__copy .eyebrow::after,
.rooms__copy .eyebrow::before,.rooms__copy .eyebrow::after{display:none}

/* Animiertes Kreis-Muster (circles.svg von helpcare.de) */
.has-circles{position:relative; isolation:isolate}
.has-circles::before{
  content:""; position:absolute; inset:0; z-index:-1;
  background:url("../img/circles.svg?v=2") center/cover no-repeat;
  pointer-events:none;
}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.55rem;
  padding:.95rem 1.9rem; border:2px solid transparent; border-radius:var(--r-pill);
  font-weight:700; font-size:var(--fs-sm); letter-spacing:1.2px; text-transform:uppercase;
  transition:transform .18s ease, box-shadow .18s ease, background-color .18s ease, color .18s ease, border-color .18s ease;
  white-space:nowrap;
}
.btn:hover{transform:translateY(-2px)}
.btn:active{transform:translateY(0)}
.btn--lg{padding:.92rem 1.8rem; font-size:1rem}
.btn--sm{padding:.65rem 1.35rem; font-size:var(--fs-xs)}
.btn--block{width:100%}
.btn--primary{background:var(--c-primary); color:#fff; box-shadow:var(--sh-primary)}
.btn--primary:hover{background:var(--c-primary-dark); box-shadow:0 8px 20px rgba(0,0,0,.22)}
.btn--ghost{background:var(--c-white); color:var(--c-ink-soft); border-color:var(--c-line); box-shadow:var(--sh-sm)}
.btn--ghost:hover{border-color:var(--c-primary); color:var(--c-primary)}
.btn--light{background:transparent; color:#fff; border-color:rgba(255,255,255,.6)}
.btn--light:hover{background:rgba(255,255,255,.14); border-color:#fff}
.btn--onCta{background:#fff; color:var(--c-primary); box-shadow:0 12px 28px rgba(49,49,49,.18)}
.btn--onCta:hover{background:#fff; color:var(--c-primary-dark)}

/* ---------- Header ---------- */
.header{
  position:sticky; top:0; z-index:60; background:rgba(255,255,255,.94);
  backdrop-filter:saturate(1.6) blur(10px);
  border-bottom:1px solid rgba(232,227,225,.8);
}
.header__inner{display:flex; align-items:center; gap:2rem; min-height:78px}
/* Wortmarke: Zeichen + Name + Zusatz. Bewusst als Markup statt als Bilddatei –
   so nutzt der Schriftzug die ohnehin geladene Quicksand, bleibt bei jeder
   Groesse scharf und laesst sich ueber currentColor umfaerben. */
.brand{display:flex; align-items:center; gap:.7rem; margin-right:auto; color:var(--c-primary)}
.brand__mark{width:40px; height:40px; flex:none}
.brand__text{display:flex; flex-direction:column; gap:.16rem; line-height:1}
.brand__name{font-size:1.62rem; font-weight:700; letter-spacing:-.02em; color:var(--c-primary)}
.brand__claim{font-size:.66rem; font-weight:600; letter-spacing:.14em; text-transform:uppercase;
  color:var(--c-muted); white-space:nowrap}

.nav{display:flex; align-items:center; gap:0; flex:none}
.nav a{font-size:var(--fs-sm); font-weight:700; letter-spacing:1.2px; text-transform:uppercase;
  color:var(--c-ink); position:relative; padding:.35rem 8px; white-space:nowrap; transition:color .18s;}
.nav a::after{
  content:""; position:absolute; left:0; right:100%; bottom:0; height:2px;
  background:var(--c-primary); transition:right .22s ease;
}
.nav a:hover{color:var(--c-primary)}
.nav a:hover::after{right:0}

/* Sprachumschalter. Flagge plus Kuerzel, weil eine Flagge allein ein Land
   bezeichnet und keine Sprache. */
.lang{display:inline-flex; align-items:center; gap:.4rem; text-decoration:none; flex:none;
  padding:.3rem .55rem; border:1px solid var(--c-line); border-radius:var(--r-pill);
  color:var(--c-ink-soft); transition:border-color .18s, color .18s}
.lang:hover{border-color:var(--c-primary); color:var(--c-primary)}
.lang__flag{width:20px; height:10px; flex:none; display:block}
.lang__code{font-size:12px; font-weight:700; letter-spacing:1px}

.header__cta{display:flex; align-items:center; gap:.7rem; margin-left:auto; flex:none}
.header__phone{display:flex; flex-direction:column; line-height:1.45; text-align:left; flex:none; white-space:nowrap}
.header__phone small{font-size:var(--fs-body-sm); font-weight:600; color:#000; text-transform:none; letter-spacing:normal}
.header__phone a{font-size:var(--fs-body-sm); font-weight:400; color:#000; text-decoration:underline; text-underline-offset:3px}
.header__phone-icon{color:var(--c-primary); flex:none; width:22px; height:22px; stroke-width:2.18}
/* Das Hoerer-Symbol ist der Anrufknopf. Ein Rand drumherum macht die Tippflaeche gross genug (44 px). */
.header__phone-link{display:flex; align-items:center; justify-content:center; padding:.6rem; margin:-.6rem; border-radius:50%; color:inherit}

.burger{display:none; width:44px; height:44px; border:0; background:transparent; border-radius:var(--r-sm); align-items:center; justify-content:center}
.burger span{display:block; width:22px; height:2px; background:var(--c-ink); position:relative; transition:.2s}
.burger span::before,.burger span::after{content:""; position:absolute; left:0; width:22px; height:2px; background:var(--c-ink); transition:.2s}
.burger span::before{top:-7px} .burger span::after{top:7px}
.burger[aria-expanded="true"] span{background:transparent}
.burger[aria-expanded="true"] span::before{top:0; transform:rotate(45deg)}
.burger[aria-expanded="true"] span::after{top:0; transform:rotate(-45deg)}

/* ---------- Hero ---------- */
.hero{
  position:relative; overflow:hidden; background:#fff;
  min-height:720px; display:flex; align-items:center;
}
/* Bildfläche: von 36 % bis zum rechten Rand, volle Hero-Höhe – wie helpcare.de */
.hero__media{
  position:absolute; top:0; right:0; bottom:0; width:var(--hero-bild); z-index:0;
  background:var(--c-primary);
  /* Nur die linke Kante wird geschnitten – oben, rechts und unten bleibt die
     Flaeche voll. Eine Ellipse wuerde alle vier Seiten runden; helpcare.de
     ist bis zum rechten Rand deckend. Stuetzstellen aus der Alphamaske von
     Hero_image.webp, siehe npm run kurve. */
  clip-path:polygon(92.58% 0.0%, 51.59% 0.5%, 48.77% 1.0%, 46.74% 1.5%, 44.71% 2.0%, 41.74% 3.0%, 38.98% 4.0%, 36.59% 5.0%, 34.50% 6.0%, 30.96% 8.0%, 27.89% 10.0%, 24.09% 13.0%, 20.80% 16.0%, 17.26% 20.0%, 13.62% 25.0%, 10.70% 30.0%, 8.30% 35.0%, 6.33% 40.0%, 4.71% 45.0%, 3.36% 50.0%, 2.31% 55.0%, 1.48% 60.0%, 0.86% 65.0%, 0.44% 70.0%, 0.18% 75.0%, 0.07% 80.0%, 0.13% 85.0%, 0.39% 90.0%, 0.75% 95.0%, 1.32% 100.0%, 100% 100%, 100% 0%);
}
.hero__media-img{position:absolute; inset:0; clip-path:polygon(93.12% 0.0%, 52.14% 0.5%, 49.32% 1.0%, 47.29% 1.5%, 45.26% 2.0%, 42.29% 3.0%, 39.53% 4.0%, 37.14% 5.0%, 35.05% 6.0%, 31.51% 8.0%, 28.44% 10.0%, 24.64% 13.0%, 21.35% 16.0%, 17.81% 20.0%, 14.17% 25.0%, 11.25% 30.0%, 8.85% 35.0%, 6.88% 40.0%, 5.26% 45.0%, 3.91% 50.0%, 2.86% 55.0%, 2.03% 60.0%, 1.41% 65.0%, 0.99% 70.0%, 0.73% 75.0%, 0.62% 80.0%, 0.68% 85.0%, 0.94% 90.0%, 1.30% 95.0%, 1.88% 100.0%, 100% 100%, 100% 0%)}
.hero__media-img img{width:100%; height:100%; object-fit:cover}
.hero__media-img::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(100deg, rgba(255,255,255,.28) 0%, rgba(255,255,255,0) 30%, rgba(49,49,49,.08) 68%, rgba(49,49,49,.26) 100%);
}

/* Preiskreis: 170 px, sitzt auf der Bildkante */
.hero__badge{
  /* Zwei Bedingungen zugleich: immer rechts neben der Textspalte UND nie
     links neben dem Bild. max() nimmt die jeweils strengere.
     Erster Term  = Spaltenrand + Spaltenbreite + Abstand.
     Zweiter Term = linke Bildkante + 150 px, wie bei helpcare.de. */
  /* Mittig auf der Bildkante: Die Kurve liegt auf Hoehe des Kreises rund
     14,7 % der Bildbreite hinter der linken Bildkante. Davon die halbe
     Kreisbreite abziehen, dann sitzt der Mittelpunkt auf der Linie.
     max() haelt ihn zusaetzlich rechts von der Textspalte. */
  position:absolute; z-index:3; right:auto; top:12.5%;
  left:max(
    calc(var(--hero-rand) + var(--hero-spalte) + 2rem),
    calc(100% - var(--hero-bild) * 0.853 - 85px)
  );
  width:170px; height:170px; border-radius:50%;
  background:var(--c-primary); color:#fff;
  display:grid; place-content:center; text-align:center; padding:1rem;
  font-weight:700; font-size:21px; line-height:1.45;
  box-shadow:var(--sh-primary);
}
.hero__badge b{display:inline; font-size:1em}
.hero__badge span{display:block}

.hero__inner{
  position:relative; z-index:2; width:100%; max-width:none;
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(var(--sp-4),4vw,var(--sp-6)); align-items:start;
  padding-inline:var(--hero-rand);
  padding-block:clamp(2.2rem, 8.75vw, 126px) 0;
}
/* Die Textspalte endet immer vor dem Preiskreis (35,4 % der Fensterbreite),
   egal wie die Schrift bricht. Sonst schneidet der Kreis in die Überschrift. */
.hero__copy{max-width:var(--hero-spalte)}
.hero h1{
  text-transform:uppercase; color:var(--c-ink); margin-bottom:0;
  width:var(--hero-titel); max-width:none;
  font-size:min(clamp(2.4rem, 1rem + 3.9vw, 65px), calc(var(--hero-titel) / 10.5));
  line-height:1.108; letter-spacing:normal;
}
.hero__sub{
  font-size:clamp(1.4rem, .9rem + 1.6vw, 32px); font-weight:700; color:var(--c-primary);
  line-height:1.5; margin:0 0 31px;
}
.hero__lead{color:var(--c-ink-soft); font-size:var(--fs-md); max-width:33ch; margin-bottom:var(--sp-4)}

/* Hero-Knopf: ein Handlungsaufruf statt Telefonfeld */
.hero__cta{display:flex; flex-direction:column; align-items:flex-start; gap:.7rem; margin:0}
.hero__cta-knopf{
  min-height:58px; padding:0 2.1rem; border-radius:var(--r-sm);
  font-size:1.1rem; font-weight:700; letter-spacing:normal; text-transform:none;
  box-shadow:0 10px 26px rgba(245,128,96,.35);
}
.hero__cta-note{margin:0; font-size:var(--fs-sm); line-height:1.5; color:var(--c-muted)}

/* Siegelreihe */
/* Die drei Vertrauenszeichen stehen und fallen damit, dass sie als Reihe
   gelesen werden. Eine gemeinsame Hoehe haelt sie zusammen; jedes Zeichen
   bringt seinen eigenen Rahmen mit, deshalb kommt keiner von aussen dazu. */
/* Mitlaufend statt gestuft: bei fester Groesse brach die Reihe zwischen
   1281 und 1430 px um, weil die Textspalte dort schmaler ist als die drei
   Zeichen. Die Formel folgt der Spaltenbreite, die Grenzen sind gemessen. */
.hero__siegel{--zeichen:clamp(82px, 10.5vw - 23px, 136px);
  display:flex; align-items:center; gap:1.1rem; margin-top:var(--sp-4); flex-wrap:wrap}
.hero__siegel > img{height:var(--zeichen); width:auto}
/* Das Google-Zeichen ist breit statt rund. Auf voller Kreishoehe wuerde es
   die Reihe erschlagen, deshalb sitzt es niedriger - gleiche Flaeche statt
   gleicher Hoehe, und die Flaeche ist, was das Auge vergleicht. */
.hero__siegel > img.zeichen--google{height:calc(var(--zeichen) * .56)}

.hero__trust{display:flex; align-items:center; gap:var(--sp-4); margin-top:var(--sp-4); flex-wrap:wrap}
.seal{
  width:84px; height:84px; border-radius:50%; flex:none;
  background:var(--c-primary-tint); border:3px solid var(--c-primary); color:var(--c-primary);
  display:grid; place-content:center; justify-items:center; gap:2px;
  box-shadow:var(--sh-sm);
}
.seal svg{width:30px; height:30px}
.seal span{font-size:.62rem; font-weight:700; letter-spacing:1.3px}
.hero__facts{list-style:none; margin:0; padding:0; display:grid; gap:.45rem}
.hero__facts li{position:relative; padding-left:1.65rem; font-weight:700; font-size:var(--fs-body-sm); color:var(--c-ink)}
.hero__facts li::before{
  content:""; position:absolute; left:0; top:.35em; width:18px; height:18px; border-radius:50%;
  background:var(--c-primary) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center/11px no-repeat;
}
.hero__rating{display:flex; align-items:center; gap:.5rem}
.hero__rating-g{width:26px; height:26px}
.hero__rating strong{font-size:1.35rem}
.hero__rating-stars{color:#f5a524; letter-spacing:2px}

/* ---------- Tarif-Finder ---------- */
/* z-index 4: ueber .hero__inner (2) und dem Preiskreis (3). Mit 2 lag der
   spaeter im HTML stehende, volle Breite einnehmende .hero__inner obendrauf –
   der ganze Finder war auf dem Desktop nicht klickbar. */
.finder{
  position:absolute; z-index:4; right:var(--hero-rand); bottom:0;
  width:425px; max-width:calc(100% - 2*var(--hero-rand));
  background:#fff; border-radius:var(--r-lg) var(--r-lg) 0 0;
  padding:1.6rem 1.7rem; border:0; box-shadow:0 0 10px rgba(0,0,0,.16);
}
.finder__title{font-size:1.22rem; font-weight:700; color:var(--c-ink-soft); text-align:center; margin:0 0 1.2rem; line-height:1.35}
.finder__progress{display:flex; align-items:center; gap:.7rem; margin-bottom:1.4rem}
.finder__track{flex:1; height:7px; border-radius:var(--r-pill); background:#f0e6e1; overflow:hidden}
.finder__track span{display:block; height:100%; background:var(--c-primary); border-radius:var(--r-pill); transition:width .4s cubic-bezier(.4,0,.2,1)}
.finder__pct{font-size:var(--fs-2xs); font-weight:700; color:var(--c-muted); flex:none; letter-spacing:.3px}
.finder__q{font-size:var(--fs-body-sm); font-weight:700; color:var(--c-ink); margin:0 0 .85rem}
.finder__opts{display:grid; gap:.5rem; margin-bottom:.9rem}
.finder__opts--3{grid-template-columns:repeat(3,1fr)}
.finder__opts--2{grid-template-columns:1fr}
.finder__opts button{
  border:2px solid var(--c-line); background:#fff; border-radius:var(--r-pill);
  padding:.65rem .5rem; font-size:var(--fs-sm); font-weight:600; color:var(--c-ink-soft);
  transition:border-color .18s, color .18s, background-color .18s, transform .18s;
}
.finder__opts button:hover{border-color:var(--c-primary); color:var(--c-primary); background:var(--c-primary-tint); transform:translateY(-1px)}
.finder__back{
  border:0; background:transparent; color:var(--c-muted); font-size:var(--fs-xs); font-weight:600;
  padding:.4rem 0; display:block; margin:.6rem auto 0; text-decoration:underline; text-underline-offset:3px;
}
.finder__back:hover{color:var(--c-primary)}
.finder__step[hidden]{display:none}
.finder__rec{
  display:flex; align-items:center; gap:.9rem; background:var(--c-primary-tint);
  border:1.5px solid var(--c-primary-soft); border-radius:var(--r-md);
  padding:.95rem 1.1rem; margin-bottom:1rem;
}
.finder__rec-check{
  width:34px; height:34px; border-radius:50%; background:var(--c-primary); color:#fff;
  display:grid; place-items:center; flex:none;
}
.finder__rec-check svg{width:18px; height:18px}
.finder__rec strong{display:block; font-size:1.1rem; color:var(--c-ink); line-height:1.2}
.finder__rec small{color:var(--c-primary); font-weight:700; font-size:var(--fs-sm)}

/* ---------- Trustbar ---------- */
.trustbar{border-top:1px solid var(--c-line); background:#fff}
.trustbar__grid{display:grid; grid-template-columns:repeat(3,1fr); gap:var(--sp-3) var(--sp-5);
  padding-block:var(--sp-4); border-top:0}
.trustbar__item{display:flex; align-items:center; gap:var(--sp-3); justify-content:flex-start; text-align:left}
.trustbar__item svg{width:44px; height:44px; color:var(--c-primary); flex:none; stroke-width:1.5}

/* ---------- Leistungen + Adresse (kombiniert) ---------- */
.offer{display:grid; grid-template-columns:1fr 1fr; gap:clamp(var(--sp-5),6vw,var(--sp-7)); align-items:center}
.offer__media{position:relative}
/* Direktes Kind, sonst trifft die Regel die Kachelbilder von Leaflet.
   Deren position:absolute wurde dadurch ueberschrieben und die Karte
   zerfiel in versetzte Quadrate. */
.offer__media > img{width:100%; aspect-ratio:1/1; max-height:min(560px, 52vh); object-fit:cover; object-position:center; border-radius:var(--r-lg); box-shadow:var(--sh-lg); position:relative; z-index:1}
.offer__arc{
  position:absolute; z-index:0; left:-2.2rem; top:-2.2rem; width:52%; aspect-ratio:1;
  border-radius:50%; background:var(--c-primary-soft); opacity:.55;
}
.offer__copy h3{font-size:var(--fs-feature); color:var(--c-ink-soft); margin-bottom:.5em}
.offer__copy > p{color:var(--c-muted)}

.addresscard{
  position:absolute; z-index:2; right:-1.6rem; bottom:-1.6rem; width:min(288px,76%);
  background:#fff; border-radius:var(--r-md); border:1px solid var(--c-line);
  border-left:5px solid var(--c-primary);
  box-shadow:0 24px 55px rgba(49,49,49,.22);
  padding:1.25rem 1.35rem;
}
.addresscard__label{
  font-size:var(--fs-2xs); text-transform:uppercase; letter-spacing:2px;
  color:var(--c-primary); font-weight:700;
}
/* "ohne c/o" ist der Punkt der Zeile und brach allein in die zweite um.
   Die Worte bleiben zusammen, der Umbruch faellt davor. */
.addresscard__label span{white-space:nowrap}
.addresscard__lines{font-size:var(--fs-body); font-weight:700; line-height:1.6; color:var(--c-ink); margin:.6rem 0 .8rem}
.addresscard__lines em{font-style:normal; color:var(--c-primary)}
.addresscard__note{
  display:flex; align-items:center; gap:.4rem;
  font-size:var(--fs-xs); color:var(--c-muted); font-weight:600; margin:0;
  padding-top:.7rem; border-top:1px dashed var(--c-line);
}
.addresscard__note svg{color:var(--c-primary); flex:none}

/* ---------- Häkchenlisten ---------- */
.checklist{list-style:none; margin:var(--sp-3) 0; padding:0; display:grid; gap:.55rem}
.checklist li{position:relative; padding-left:2.35rem; font-weight:600; color:var(--c-ink)}
.checklist li b{font-weight:700}
.checklist li::before{
  content:""; position:absolute; left:0; top:2px; width:26px; height:26px; border-radius:50%;
  background:var(--c-primary) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center/15px no-repeat;
}

/* ---------- Preise ---------- */
.toggle-wrap{display:flex; justify-content:center; margin-bottom:var(--sp-3)}
.toggle{display:inline-flex; align-items:center; gap:.3rem; background:#fff; border:1px solid var(--c-line); padding:.35rem; border-radius:var(--r-pill); box-shadow:var(--sh-sm)}
.toggle button{
  border:0; background:transparent; border-radius:var(--r-pill); padding:.62rem 1.5rem;
  font-weight:700; font-size:var(--fs-sm); color:var(--c-ink-soft); transition:.18s; white-space:nowrap;
}
.toggle button.is-active{background:var(--c-primary); color:#fff; box-shadow:var(--sh-primary)}
.toggle__save{
  font-size:var(--fs-2xs); font-weight:700; color:var(--c-success); background:#e4f3e9;
  padding:.15rem .5rem; border-radius:var(--r-pill); margin-left:.4rem;
}

.plans{display:grid; grid-template-columns:repeat(3,minmax(0,1fr));
  grid-template-rows:repeat(8, auto); column-gap:var(--sp-3); row-gap:0;
  max-width:1180px; margin-inline:auto; align-items:stretch}
/* Sobald die Karten umbrechen, braucht es Abstand zwischen den Reihen.
   Am Desktop liegen alle drei in denselben acht Zeilen, dort waere ein
   row-gap ein Abstand mitten in der Karte – deshalb nur ab hier. Jede
   .plan setzt intern weiter row-gap:0, die Subgrid-Ausrichtung bleibt. */
@media (max-width:1020px){
  .plans{grid-template-columns:repeat(2,minmax(0,1fr)); max-width:760px; row-gap:var(--sp-3)}
}
.plan{
  position:relative; background:#fff; border:2px solid var(--c-line); border-radius:var(--r-xl);
  padding:clamp(1.25rem, min(1.75rem, 3.2vh), 1.75rem); box-shadow:var(--sh-sm); height:100%;
  transition:transform .22s, box-shadow .22s, border-color .22s;
  /* Die acht Zeilen der Elternflaeche uebernehmen statt eigene zu bilden.
     Dadurch stehen Kopf, Preis, Kasten, Trennlinie, Liste und Knopf ueber
     alle drei Karten auf gleicher Hoehe. */
  grid-row:span 8; display:grid; grid-template-rows:subgrid; row-gap:0;
}
.plan:hover{transform:translateY(-4px); box-shadow:var(--sh-md)}
.plan--featured{border-color:var(--c-primary); box-shadow:var(--sh-md)}
.plan.is-rec{border-color:var(--c-primary); box-shadow:0 0 0 4px rgba(245,128,96,.18), var(--sh-md)}
.plan__flag,.plan__rec{
  position:absolute; top:-15px; left:50%; transform:translateX(-50%);
  font-size:var(--fs-2xs); font-weight:700; letter-spacing:1.6px; text-transform:uppercase;
  padding:.42rem 1.15rem; border-radius:var(--r-pill); white-space:nowrap;
}
.plan__flag{background:var(--c-primary); color:#fff; box-shadow:var(--sh-primary)}
.plan__rec{display:none; background:var(--c-ink); color:#fff; box-shadow:0 10px 24px rgba(49,49,49,.28)}
.plan.is-rec .plan__rec{display:block}
.plan.is-ausgebucht .plan__amount,.plan.is-ausgebucht .plan__name{opacity:.55}
.plan.is-ausgebucht .plan__note{font-weight:700; color:var(--c-ink)}
.plan.is-rec .plan__flag{display:none}

.plan__head{min-height:88px}
.plan__for{display:block; font-size:var(--fs-2xs); text-transform:uppercase; letter-spacing:1.8px; color:var(--c-muted); font-weight:700}
.plan__name{font-size:1.75rem; margin:.35rem 0 .25rem; color:var(--c-ink)}
.plan__tagline{color:var(--c-muted); font-size:var(--fs-body-sm); line-height:1.5; margin:0}
.plan__price{display:flex; align-items:baseline; gap:.4rem; flex-wrap:wrap; margin-top:.9rem}
.plan__amount{font-size:3rem; font-weight:700; color:var(--c-primary); line-height:1; font-variant-numeric:tabular-nums}
.plan__per{font-size:1rem; font-weight:700; color:var(--c-ink-soft)}
.plan__vat{font-size:var(--fs-xs); color:var(--c-muted); margin:.5rem 0 0}
.plan__hr{border:0; border-top:1px solid var(--c-line); margin:var(--sp-3) 0}
.plan__inc{font-size:var(--fs-2xs); text-transform:uppercase; letter-spacing:1.6px; font-weight:700; color:var(--c-ink); margin-bottom:1rem}
.plan .checklist{margin:0 0 1.8rem; gap:.75rem}
.plan .checklist li{font-size:var(--fs-body-sm); font-weight:500; color:var(--c-ink-soft); padding-left:2rem}
.plan .checklist li::before{width:22px; height:22px; top:3px; background-size:13px}
.plan .checklist__dyn{font-weight:700; color:var(--c-ink)}
.plan__cta{margin-top:auto}
.plan__note{text-align:center; font-size:var(--fs-xs); color:var(--c-muted); margin:.7rem 0 0}
.plans__note{text-align:center; color:var(--c-muted); font-size:var(--fs-sm); margin-top:var(--sp-4)}
.plans__note a{color:var(--c-primary); text-decoration:underline; text-underline-offset:3px; font-weight:600}

/* Post-Option in der Tarifkarte */
.postpick{margin-top:var(--sp-3); height:100%; background:var(--c-primary-tint); border:1.5px solid var(--c-primary-soft); border-radius:var(--r-md); padding:1rem 1.05rem}
.postpick__label{font-size:var(--fs-2xs); text-transform:uppercase; letter-spacing:1.6px; font-weight:700; color:var(--c-ink); margin:0 0 .65rem}
.postpick__label span{color:var(--c-primary)}
.postpick__hint{font-size:var(--fs-xs); color:var(--c-muted); line-height:1.45; margin:.5rem 0 0; min-height:2.3em}

.segmented{display:grid; grid-template-columns:1fr 1fr; gap:.25rem; background:#fff; border:1px solid var(--c-primary-soft); padding:.28rem; border-radius:var(--r-pill)}
.segmented button,.segmented span{
  display:flex; align-items:center; justify-content:center; gap:.38rem;
  border:0; background:transparent; border-radius:var(--r-pill);
  padding:.6rem .4rem; font:inherit; font-weight:700; font-size:var(--fs-sm); color:var(--c-ink-soft);
  transition:background-color .2s, color .2s, box-shadow .2s;
}
.segmented svg{width:17px; height:17px; flex:none}
.segmented button:hover{color:var(--c-ink)}
.segmented .is-active{background:var(--c-primary); color:#fff; box-shadow:0 4px 12px rgba(0,0,0,.16)}

/* ---------- Ablauf ---------- */
.steps{display:grid; grid-template-columns:repeat(3,1fr); gap:var(--sp-4)}
.step{position:relative; background:#fff; border-radius:var(--r-lg); overflow:hidden; box-shadow:var(--sh-sm); border:1px solid var(--c-line); transition:transform .22s, box-shadow .22s}
.step:hover{transform:translateY(-4px); box-shadow:var(--sh-md)}
.step__ghost{
  position:absolute; right:.7rem; bottom:-.32em; z-index:0;
  font-size:5.5rem; font-weight:700; line-height:1; color:var(--c-primary);
  opacity:.07; pointer-events:none;
}
.step__img{position:relative; aspect-ratio:16/10; max-height:min(240px, 27vh); background:var(--c-primary-tint)}
.step__img img{width:100%; height:100%; object-fit:cover; object-position:50% var(--bildlage, 50%)}
/* Die Schrittbilder sind quadratisch. Im 16:10-Rahmen zeigt cover davon
   62,5 Prozent der Hoehe. Die Werte schieben das Band auf das Motiv:
   1 Tarifauswahl -> Karten oben, Gesicht und Scan-Bildschirm unten
   2 Identitaet   -> Ausweis, Siegel, Gesicht und Handy vollstaendig
   3 Scan/Post    -> mittig, das Motiv ist diagonal geteilt und zeigt so
                     den Scan-Bildschirm und den Briefkasten zugleich */
.steps .step:nth-of-type(1) .step__img{--bildlage:35%}
.steps .step:nth-of-type(2) .step__img{--bildlage:45%}
.step__num{
  position:absolute; left:1.1rem; bottom:-22px; width:46px; height:46px; border-radius:50%;
  background:var(--c-primary); color:#fff; display:grid; place-items:center;
  font-weight:700; font-size:1.15rem; box-shadow:var(--sh-primary);
  border:3px solid #fff;
}
.step__body{position:relative; z-index:1; padding:1.6rem 1.4rem 1.4rem}
.step__body h3{font-size:1.15rem; margin-bottom:.45rem}
.step__body p{color:var(--c-muted); font-size:var(--fs-body-sm)}
.steps__cta{text-align:center; margin-top:clamp(2.2rem,min(4vw,5.4vh),3rem)}

/* ---------- Vorteile ---------- */
.cards{display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:var(--sp-4)}
.card{
  position:relative; overflow:hidden;
  background:#fff; border-radius:var(--r-lg); padding:2rem 1.7rem; border:1px solid var(--c-line);
  box-shadow:var(--sh-sm); transition:transform .22s, box-shadow .22s;
}
.card::before{
  content:""; position:absolute; left:0; right:0; top:0; height:4px;
  background:var(--c-primary); transform:scaleX(0); transform-origin:left; transition:transform .3s ease;
}
.card:hover{transform:translateY(-5px); box-shadow:var(--sh-md)}
.card:hover::before{transform:scaleX(1)}
.card__icon{
  width:58px; height:58px; border-radius:50%; background:var(--c-primary-tint);
  display:grid; place-items:center; margin-bottom:1.2rem; transition:background-color .22s;
}
.card:hover .card__icon{background:var(--c-primary-tint-2)}
.card__icon svg{width:28px; height:28px; color:var(--c-primary)}
.card h3{font-size:1.15rem; color:var(--c-ink); margin-bottom:.5rem; min-height:2.3em}
.card p{color:var(--c-muted); font-size:var(--fs-body-sm); line-height:1.65}

/* Räume-Band */
.rooms{
  display:grid; grid-template-columns:.85fr 1.15fr; margin-top:clamp(2rem,4vw,3rem);
  background:#fff; border:1px solid var(--c-line); border-radius:var(--r-xl);
  overflow:hidden; box-shadow:var(--sh-sm);
}
.rooms__media img{width:100%; height:100%; object-fit:cover; min-height:250px}
.rooms__copy{padding:clamp(1.7rem,3vw,2.8rem); align-self:center}
.rooms__copy h3{font-size:var(--fs-feature); color:var(--c-ink-soft); margin-bottom:.4em}
.rooms__copy p{color:var(--c-muted); font-size:var(--fs-body); margin-bottom:1.4rem}

/* ---------- FAQ ---------- */
/* Zweispaltig: dreizehn Fragen untereinander ergeben 930 px und sprengen
   jedes Fenster. Nebeneinander passt der Abschnitt in eine Bildschirmhoehe.
   align-content:start, damit eine aufgeklappte Spalte die andere nicht
   auseinanderzieht. */
/* Eine Spalte. Zwei nebeneinander sahen nur aus wie zwei Spalten, solange
   alle Fragen gleich lang sind -- sobald eine umbricht, verschieben sich
   die beiden Seiten gegeneinander und die Reihe franst aus. */
.faq{max-width:780px; margin-inline:auto; display:grid; gap:.55rem;
     grid-template-columns:minmax(0,1fr); align-content:start}
.faq details{background:#fff; border:1px solid var(--c-line); border-radius:var(--r-md); box-shadow:var(--sh-sm); overflow:hidden; transition:border-color .2s, box-shadow .2s}
.faq details[open]{border-color:var(--c-primary-soft); box-shadow:var(--sh-md)}
.faq summary{
  list-style:none; cursor:pointer; padding:.7rem 3rem .7rem 1.2rem; position:relative;
  font-weight:700; font-size:1rem; color:var(--c-ink); transition:color .18s;
}
.faq summary:hover{color:var(--c-primary)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{
  content:""; position:absolute; right:1.4rem; top:50%; width:11px; height:11px; margin-top:-8px;
  border-right:2.5px solid var(--c-primary); border-bottom:2.5px solid var(--c-primary);
  transform:rotate(45deg); transition:transform .22s;
}
.faq details[open] summary::after{transform:rotate(-135deg); margin-top:-3px}
.faq__body{padding:0 1.5rem 1.1rem; color:var(--c-muted); font-size:var(--fs-body-sm)}
.faq__body b{color:var(--c-ink)}
.faq__body em{font-style:normal; color:var(--c-primary); font-weight:700}

/* ---------- CTA-Band ---------- */
/* Heller Abschluss statt orangem Verlauf: der Abschnitt steht direkt über
   dem dunklen Footer, zwei kräftige Flächen hintereinander erdrücken sich. */
.cta{background:var(--c-white); color:var(--c-ink); overflow:hidden}
.cta h2{color:var(--c-ink)}
/* Die Karte sitzt jetzt in der eigenen Section #standort, der Schlussblock
   ist dadurch einspaltig und mittig. */
.cta__inner{text-align:center; max-width:56ch; margin-inline:auto}
.cta__actions{justify-content:center}
.cta h2 + p{margin-inline:auto}

/* ---------- Standort und Leistungen, kombiniert ---------- */
/* Aufbau wie bei den Leistungen, nur traegt die Karte die Flaeche statt
   eines Fotos. Radius und Schatten kommen deshalb vom Bild. */
.offer--karte .offer__media .map{
  position:relative; z-index:1;
  border-radius:var(--r-lg); box-shadow:var(--sh-lg);
}
/* Deckel bei 408 statt 430: ab rund 1600 px Fensterbreite schob die Karte
   den Abschnitt sonst auf 920 px und damit ueber eine Bildschirmhoehe. */
.offer--karte .map__canvas{height:clamp(320px, 27vw, 408px)}
.offer--karte .offer__copy .checklist{margin-block:0 var(--sp-4)}
.addresscard__route{margin-top:var(--sp-2)}
/* Nur der Einleitungstext direkt unter der Ueberschrift. Ein breites ".cta p"
   ueberstimmte .cta__meta und die Kartenadresse (hoehere Spezifitaet) und
   setzte beide auf Einleitungsgroesse. */
.cta h2 + p{color:var(--c-muted); font-size:var(--fs-body); max-width:52ch} /* wie die Texte neben Bildern (.offer, .rooms) */
.cta__meta{font-size:var(--fs-sm); color:var(--c-muted); margin-top:var(--sp-3)}
.cta__actions{display:flex; gap:var(--sp-2); flex-wrap:wrap; margin-top:var(--sp-4)}
.cta__media img{width:100%; border-radius:var(--r-lg); box-shadow:0 26px 60px rgba(49,49,49,.28)}

/* ---------- Footer ---------- */
.footer{background:var(--c-ink); color:rgba(255,255,255,.72); padding-block:clamp(3rem,5vw,4.5rem) 0}
/* Vier Spalten, nicht fuenf: die Leistungen-Spalte ist entfallen, die
   leere Spur liess den Newsletter in der Mitte haengen. */
.footer__grid{display:grid; grid-template-columns:1.4fr 1fr .8fr 1.5fr; gap:var(--sp-5) var(--sp-5)}
.footer .brand__name{color:#fff}
.footer .brand__claim{color:rgba(255,255,255,.5)}
.footer h3{color:#fff; font-size:var(--fs-2xs); text-transform:uppercase; letter-spacing:1.6px; margin-bottom:1.2rem}
.footer ul{list-style:none; padding:0; margin:0; display:grid; gap:.65rem}
.footer a{font-size:var(--fs-body-sm); transition:color .18s}
.footer a:hover{color:var(--c-primary-soft)}
.footer__about{font-size:var(--fs-body-sm); line-height:1.7; margin-top:1.2rem; max-width:36ch}
.footer__contact li{display:flex; gap:.75rem; align-items:flex-start; font-size:var(--fs-body-sm); line-height:1.5}
.footer__contact svg{width:19px; height:19px; color:var(--c-primary); flex:none; margin-top:3px}
.footer__contact small{font-size:var(--fs-xs); color:rgba(255,255,255,.5)}
.footer__bar{
  margin-top:3rem; border-top:1px solid rgba(255,255,255,.12); padding-block:1.4rem;
  display:flex; justify-content:space-between; gap:1rem; flex-wrap:wrap; font-size:var(--fs-sm);
}

/* ---------- Newsletter im Footer: Ueberschrift, Feld und Knopf wie im Rest der Seite ---------- */
.footer__nl p{font-size:var(--fs-body-sm); line-height:1.65; margin:0 0 1.1rem}
/* Feld und Knopf als ein zusammenhaengender Block: aussen rund (--r-md wie
   die Karten), an der Nahtstelle gerade. Knopf sonst wie jedes .btn--primary. */
.nl-form{display:grid}
.nl-form input{
  font:inherit; font-size:var(--fs-body-sm); font-weight:500; color:var(--c-ink); background:#fff;
  border:2px solid transparent; border-radius:var(--r-md) var(--r-md) 0 0; padding:.8rem 1rem;
  transition:border-color .18s, box-shadow .18s;
}
.nl-form input:focus{outline:none; border-color:var(--c-primary); box-shadow:0 0 0 4px rgba(245,128,96,.25)}
.nl-form .btn{border-radius:0 0 var(--r-md) var(--r-md); box-shadow:none}
.nl-form .btn:hover{transform:none; box-shadow:none}
.footer .footer__nl-hinweis{font-size:var(--fs-xs); line-height:1.55; color:rgba(255,255,255,.5); margin:.8rem 0 0}
.footer__nl-hinweis a{font-size:inherit; text-decoration:underline}
.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}

/* ---------- Entwurfs-Hinweis ---------- */
.draftnote{background:#2b2b2b; color:#f0eae7; font-size:var(--fs-xs); text-align:center; padding:.6rem var(--pad-edge); line-height:1.5}
.draftnote b{color:var(--c-primary-soft)}

/* ---------- Reveal ---------- */
.reveal{opacity:0; transform:translateY(22px)}
.reveal.is-in{opacity:1; transform:none; transition:opacity .6s ease, transform .6s ease}

/* ==========================================================================
   Responsive
   ========================================================================== */

@media (max-width:1180px){
  .footer__grid{grid-template-columns:1fr 1fr}
  .footer__nl{grid-column:1 / -1; max-width:34rem}
  .cta__inner{grid-template-columns:1fr}
  .cta__media{max-width:520px}
}

/* Zwischengröße: Bild und Kurve kommen aus der Grundregel, hier nur Schriftgrade */
@media (min-width:1061px) and (max-width:1320px){
  /* Kopfzeile wird eng: Zusatz weg, Wortmarke und Navigation eine Stufe kleiner */
  .brand__claim{display:none}
  .brand__name{font-size:1.4rem}
  .brand__mark{width:34px; height:34px}
  /* Seit der Standort eigener Menuepunkt ist, traegt die Zeile sieben
     Eintraege. Bei 1061 px lief sie sonst 2 px ueber. */
  .nav a{padding-inline:6px; letter-spacing:.9px; font-size:13px}
  .header__inner{gap:.7rem}
  .header__phone small{display:none}

  .hero{min-height:calc(80vh - var(--header-h))}
  .hero h1{font-size:min(clamp(2.4rem, 0.4rem + 3.6vw, 3.6rem), calc(var(--hero-titel) / 10.5))}
  .hero__sub{font-size:clamp(1.4rem, .6rem + 1.5vw, 2.1rem)}
  .hero__lead{max-width:30ch}
  .finder{width:min(360px,100%); padding:1.5rem 1.4rem}
  .finder__title{font-size:1.1rem}
}

@media (max-width:1060px){
  /* Navigation als Burger */
  .nav{
    position:fixed; inset:78px 0 auto 0; background:#fff; flex-direction:column; align-items:stretch;
    gap:0; padding:1rem var(--pad-edge) 1.6rem; box-shadow:var(--sh-md); display:none;
    border-bottom:1px solid var(--c-line);
  }
  .nav.is-open{display:flex}
  .nav a{padding:.9rem 0; border-bottom:1px solid var(--c-line)}
  .burger{display:flex}
  .header__phone{display:none}

  /* Hero stapelt: Text zuerst, Bildband darunter mit gewölbter Oberkante */
  .hero{display:flex; flex-direction:column; min-height:0}
  .hero__inner{order:1; grid-template-columns:1fr; padding-block:2.6rem 2.2rem; gap:2rem}
  .hero__copy{max-width:none}
  .hero__media{
    order:2; position:relative; top:auto; right:auto; bottom:auto;
    width:100%; height:clamp(250px,52vw,380px);
    clip-path:none; border-radius:100% 100% 0 0 / 13% 13% 0 0;
  }
  .hero__media-img{clip-path:none; overflow:hidden; border-radius:100% 100% 0 0 / 17% 17% 0 0}
  .hero__media-img::after{background:linear-gradient(180deg, rgba(49,49,49,.10) 0%, rgba(49,49,49,0) 45%)}
  /* Finder loest sich aus der absoluten Lage und reiht sich unter das Bild */
  .finder{position:static; order:3; width:100%; max-width:none;
    border-radius:var(--r-lg); margin-top:-1px; box-shadow:0 -6px 20px rgba(0,0,0,.10)}
  /* Preiskreis sitzt unten rechts auf dem Bildband. Frueher bottom:1.1rem
     der ganzen Hero – dort steht aber der Finder, und der Kreis verdeckte
     dessen Knoepfe. Jetzt im Fluss direkt nach dem Bild (gleiche order,
     spaeter im HTML) und per negativem Rand hochgezogen: 120 - 138 + 18 = 0,
     der Finder rueckt also nicht nach unten. */
  .hero__badge{position:relative; order:2; align-self:flex-end; left:auto; right:auto; top:auto;
    margin:-138px 1.1rem 18px 0; width:120px; height:120px; font-size:15px}
  .hero__siegel{justify-content:flex-start}

  .offer{grid-template-columns:1fr; gap:clamp(3.5rem,8vw,4.5rem)}
  .addresscard{right:auto; left:1.2rem; bottom:-1.8rem; width:min(300px,86%)}
  .rooms{grid-template-columns:1fr}
  .rooms__media img{min-height:220px}
  .steps{grid-template-columns:1fr}
  .trustbar__grid{grid-template-columns:1fr; gap:.9rem}
  .trustbar__item{justify-content:flex-start; font-size:.98rem}
  .trustbar__item svg{width:38px; height:38px}
}

/* Tablet: Text + Finder nebeneinander, Bildband darunter */
@media (min-width:701px) and (max-width:1060px){
  .hero__inner{grid-template-columns:1.05fr .95fr; align-items:center; padding-block:3rem 2.6rem}
  .hero__copy{max-width:560px}
  .hero h1{font-size:clamp(2.4rem,1rem + 3.2vw,3.4rem)}
  .hero__sub{font-size:clamp(1.35rem,.7rem + 1.4vw,1.9rem)}
  .finder{justify-self:end; width:min(390px,100%)}
  .offer{grid-template-columns:1fr 1fr; gap:clamp(2rem,5vw,3.5rem)}
  .addresscard{right:-1.5rem; left:auto; bottom:-1.6rem; width:min(270px,90%)}
  .rooms{grid-template-columns:.85fr 1.15fr}
  .steps{grid-template-columns:repeat(3,1fr)}
  .trustbar__grid{grid-template-columns:repeat(3,1fr)}
  .trustbar__item{justify-content:center; font-size:.92rem}
  .trustbar__item svg{width:34px; height:34px}
  .cards{grid-template-columns:repeat(2,1fr)}
  .footer__grid{grid-template-columns:1fr 1fr}
  .footer__nl{grid-column:1 / -1; max-width:34rem}
}

@media (max-width:680px){
  .hero__trust{gap:1rem; margin-top:2rem}
  .seal{width:66px; height:66px; border-width:2.5px}
  .seal svg{width:24px; height:24px}
  .seal span{font-size:.56rem}
  .hero__facts li{font-size:var(--fs-sm); padding-left:1.5rem}
  /* minmax(0,1fr), nicht 1fr: ein blosses 1fr nimmt als Minimum die
     Min-Content-Breite und waechst damit ueber den Container hinaus. Auf
     320 px schob das die Karten 14 px nach rechts und die ganze Seite
     liess sich seitlich scrollen. */
  .plans{grid-template-columns:minmax(0,1fr)}
  .plan__head{min-height:0}
  .footer__grid{grid-template-columns:1fr}
  .toggle{width:100%; justify-content:center}
  .hero__actions .btn{flex:1 1 100%}
  /* Nebeneinander statt untereinander, wie bei HelpCare: gestapelt war die
     Karte 365 px hoch, dort sind es 272 px. */
  .finder__opts--3{grid-template-columns:repeat(3,1fr)}
  .cards{grid-template-columns:1fr}
}

@media (prefers-reduced-motion:reduce){
  *{animation-duration:.001ms !important; transition-duration:.001ms !important}
  html{scroll-behavior:auto}
  .reveal{opacity:1; transform:none}
}

/* ==========================================================================
   Bausteine, die nach dem ersten Entwurf dazugekommen sind
   ========================================================================== */

/* Aliase: Karte, Siegel und Rechtsseiten sind in der neueren Benennung
   geschrieben. Statt sie umzubenennen, zeigen die neuen Namen hier auf die
   alten Werte – eine Quelle der Wahrheit bleibt oben im :root. */
:root{
  --accent:       var(--c-primary);
  --accent-dark:  var(--c-primary-dark);
  --accent-tint:  var(--c-primary-tint);
  --ink:          var(--c-ink);
  --ink-body:     var(--c-ink-soft);
  --muted:        var(--c-muted);
  --white:        var(--c-white);
  --r:            var(--r-md);
  --sh-card:      var(--sh-md);
  --sh-nav:       var(--sh-sm);
  --sh-float:     var(--sh-lg);
  --ff:           var(--ff-base);
  --w:            var(--w-content);
  --pad:          var(--pad-edge);
}

/* ---------- Wortmarke ---------- */
/* Im Footer auf Dunkel */
.footer .brand{color:#fff}
.footer .brand__name{color:#fff}
.footer .brand__claim{color:rgba(255,255,255,.62)}

/* ---------- Hero: Bildspalte und Preisanker ---------- */
.hero__visual{position:relative}
.hero__price{margin:0 0 var(--sp-4)}
.hero__price-zeile{display:flex; align-items:baseline; gap:.45rem; margin:0}
.hero__price-pre{font-size:1.05rem; color:var(--c-muted); font-weight:600}
.hero__price-num{font-size:clamp(2.6rem,1.6rem + 2.6vw,3.6rem); font-weight:700;
  line-height:1; letter-spacing:-.01em; color:var(--c-primary)}
.hero__price-per{font-size:1.1rem; font-weight:700; color:var(--c-ink)}
.hero__price-fuss{margin:var(--sp-1) 0 0; font-size:var(--fs-sm); color:var(--c-muted)}

/* ---------- Trustbar: zweizeilig mit Icon im Kreis ---------- */
.trustbar__ico{width:51px; height:51px; flex:none; display:grid; place-items:center; color:var(--c-primary)}
.trustbar__ico svg{width:51px; height:51px; stroke-width:1.4}
.trustbar__txt{display:block; padding-top:.15rem}
.trustbar__txt b{display:block; font-weight:700; font-size:20px; line-height:1.3; color:var(--c-ink)}
.trustbar__txt small{display:block; margin-top:.15rem; font-size:var(--fs-sm);
  line-height:1.5; color:var(--c-muted); font-weight:500}

/* ---------- Raum-Kontingent in der Business-Karte ---------- */
.planbox{background:var(--c-primary-tint); border:1px solid var(--c-primary-soft);
  border-radius:var(--r-md); padding:var(--sp-3); margin-top:var(--sp-3); height:100%}
.planbox__label{margin:0 0 var(--sp-2); font-size:var(--fs-2xs); font-weight:700;
  letter-spacing:.09em; text-transform:uppercase; color:var(--c-ink-soft)}
.planbox__figure{display:flex; align-items:center; gap:.7rem;
  background:var(--c-white); border-radius:var(--r-sm); padding:.7rem .9rem}
.planbox__num{font-size:1.8rem; font-weight:700; line-height:1; color:var(--c-primary)}
.planbox__unit{font-size:var(--fs-xs); line-height:1.25; color:var(--c-ink-soft); font-weight:600}
.planbox__icon{width:22px; height:22px; margin-left:auto; color:var(--c-primary-soft)}
.planbox__hint{margin:.5rem 0 0; font-size:var(--fs-sm); line-height:1.45; color:var(--c-muted)}

/* ---------- Footer: Markenspalte, Credit, Knopf auf Dunkel ---------- */
.footer__brand{max-width:32ch}
.footer__credit a{color:rgba(255,255,255,.72); text-decoration:underline;
  text-underline-offset:3px; font-size:inherit}
.footer__credit a:hover{color:var(--c-primary-soft)}
.btn--onDark{background:var(--c-white); color:var(--c-ink); border-color:var(--c-white)}
.btn--onDark:hover{background:var(--c-primary-tint); color:var(--c-ink)}


/* ---------- Karte im Kontaktbereich ---------- */
.map{position:relative; border-radius:var(--r-lg); overflow:hidden;
  box-shadow:var(--sh-md); background:var(--c-primary-tint)}
.map__canvas{position:relative; width:100%; height:clamp(260px,32vw,360px); z-index:1}
.map__karte{position:absolute; left:var(--sp-3); right:var(--sp-3); bottom:var(--sp-3); z-index:400;
  display:flex; align-items:center; justify-content:space-between; gap:var(--sp-3); flex-wrap:wrap;
  background:rgba(42,36,34,.92); backdrop-filter:blur(8px);
  border-radius:var(--r-md); padding:var(--sp-3) var(--sp-4); color:#fff}
.map__adresse{margin:0; font-weight:700; line-height:1.4; color:#fff}
.map__pin{background:none; border:0}
.map__canvas.map--ohne-kacheln{background:var(--c-primary-tint)}
.map__canvas.map--ohne-kacheln .leaflet-tile-pane{display:none}
.map__canvas.map--ohne-kacheln::after{content:""; position:absolute; inset:0; z-index:390;
  pointer-events:none;
  background:
    repeating-linear-gradient(90deg, transparent 0 63px, rgba(49,49,49,.05) 63px 64px),
    repeating-linear-gradient(0deg,  transparent 0 63px, rgba(49,49,49,.05) 63px 64px)}

/* ---------- Rechtsseiten ---------- */
.legal{padding-block:var(--sp-5) var(--sp-7)}
.legal__head{max-width:46rem; margin-bottom:var(--sp-5)}
.legal__head h1{font-size:var(--fs-xl); letter-spacing:0; line-height:1.15;
  margin:var(--sp-2) 0 var(--sp-2); color:var(--c-ink)}
.legal__stand{font-size:var(--fs-sm); color:var(--c-muted)}

.legal__toc{background:var(--c-white); border:1px solid var(--c-line);
  border-radius:var(--r-md); padding:var(--sp-4); margin-bottom:var(--sp-5); box-shadow:var(--sh-sm)}
.legal__toc h2{font-size:var(--fs-2xs); font-weight:700; letter-spacing:.09em;
  text-transform:uppercase; color:var(--c-muted); margin:0 0 var(--sp-3)}
.legal__toc ol{margin:0; padding:0; list-style:none; columns:2; column-gap:var(--sp-5)}
.legal__toc li{margin:0 0 .45rem; font-size:var(--fs-body-sm); break-inside:avoid}
.legal__toc a{color:var(--c-ink-soft)}
.legal__toc a:hover{color:var(--c-primary); text-decoration:underline; text-underline-offset:3px}
@media (max-width:640px){ .legal__toc ol{columns:1} }

.legal__body{max-width:46rem}
.legal__body h2{font-size:1.3rem; line-height:1.3; color:var(--c-ink);
  margin:var(--sp-6) 0 var(--sp-3)}
.legal__body h2:first-child{margin-top:0}
.legal__body h3{font-size:1.05rem; margin:var(--sp-4) 0 var(--sp-2)}
.legal__body p, .legal__body li{font-size:1rem; line-height:1.75; color:var(--c-ink-soft)}
.legal__body p{margin:0 0 var(--sp-3)}
.legal__body ul{margin:0 0 var(--sp-3); padding-left:1.15rem}
.legal__body li{margin-bottom:.35rem}
.legal__body a{color:var(--c-primary); text-decoration:underline; text-underline-offset:3px}
.legal__body dl{margin:0 0 var(--sp-4); display:grid; grid-template-columns:auto 1fr; gap:.45rem var(--sp-4)}
.legal__body dt{font-weight:700; color:var(--c-ink)}
.legal__body dd{margin:0; color:var(--c-ink-soft)}
@media (max-width:640px){
  .legal__body dl{grid-template-columns:1fr; gap:.1rem 0}
  .legal__body dd{margin-bottom:.7rem}
}

/* Noch zu klärende Angaben – vor dem Livegang müssen alle weg sein. */
.tbd{background:var(--c-primary-tint); color:var(--c-primary-dark); border-radius:4px;
  padding:.08em .38em; font-weight:600; font-size:.95em;
  box-shadow:inset 0 0 0 1px var(--c-primary-soft)}
.legal__hinweis{background:var(--c-primary-tint); border:1px solid var(--c-primary-soft);
  border-radius:var(--r-md); padding:var(--sp-4); margin:0 0 var(--sp-5)}
.legal__hinweis p{margin:0; font-size:var(--fs-body-sm); line-height:1.6; color:var(--c-primary-dark)}

/* ---------- Gestaffeltes Einblenden ---------- */
.reveal-stagger > *{transition-delay:calc(var(--d, 0) * 70ms)}

/* Flache Desktop-Fenster (Notebooks): Der Hero-Inhalt ist dort höher als die
   angepeilten 80 %, deshalb eine Stufe kleiner. Sonst rutscht die Trustbar
   unter die Falz und der erste Eindruck verliert die drei Vorteile. */
@media (min-width:1001px) and (max-height:820px){
  .hero__inner{padding-block:var(--sp-3)}
  .hero h1{font-size:clamp(2.1rem, 1rem + 2.7vw, 3.2rem)}
  .hero__sub{font-size:clamp(1.25rem, .9rem + 1.1vw, 1.8rem); margin-bottom:var(--sp-2)}
  .hero__lead{font-size:1rem; margin-bottom:var(--sp-3)}
  .hero__actions .btn--lg{padding:.9rem 1.8rem}
  .hero__trust{margin-top:var(--sp-3)}
  .trustbar__grid{padding-block:var(--sp-3)}
}

/* Leaflet bringt eigene 2px-Radien mit – an unsere Skala angleichen */
.leaflet-control-zoom{border-radius:var(--r-sm); overflow:hidden; border:0; box-shadow:var(--sh-sm)}
.leaflet-control-zoom a{border-radius:0; border-color:var(--c-line)}

/* Zuschreibung sitzt oben rechts statt unten: unten verdeckt sie das
   Adressbanner und wird von der abgerundeten Ecke angeschnitten. */
.leaflet-control-attribution{
  background:rgba(255,255,255,.88); border-radius:var(--r-sm);
  padding:.2rem .5rem; margin:.7rem .7rem 0 0 !important;
  font-family:var(--ff-base); font-size:10.5px; line-height:1.4; color:var(--c-muted);
  box-shadow:var(--sh-sm);
}
.leaflet-control-attribution a{color:var(--c-ink-soft); text-decoration:none}
.leaflet-control-attribution a:hover{color:var(--c-primary); text-decoration:underline}
.leaflet-control-attribution svg{display:none}

/* ---------- Hero auf dem Telefon: Aufbau wie helpcare.de ----------
   Dort steht das Foto ganz oben und fuellt die Breite, die Ueberschrift
   liegt weiss darauf und rechtsbuendig, darunter eine Linie und die
   Unterzeile in Versalien. Der Preiskreis sitzt unten links auf der
   Bildkante. Formular, Siegel und Tariffinder kommen erst darunter.

   Die Kante unten ist eine Ellipse, keine nachgezeichnete Welle: die
   Schwungkurve von HelpCare liegt uns nicht als Datei vor. */
@media (max-width:700px){
  :root{ --hero-bildhoehe: clamp(360px, 96vw, 440px); --hero-kreis:124px; }

  /* align-items:stretch muss sein: die Grundregel setzt center, und in der
     Spaltenrichtung schrumpft damit jedes Kind ohne eigene Breite auf
     seinen Inhalt. Die Tarifkarte wurde dadurch je Schritt unterschiedlich
     breit, auf Schritt 3 nur 275 statt 358 px. */
  .hero{position:relative; overflow:visible; min-height:0;
        display:flex; flex-direction:column; align-items:stretch; background:#fff}

  .hero__media{
    order:1; position:relative; inset:auto; width:100%;
    height:var(--hero-bildhoehe);
    clip-path:none; border-radius:0 0 100% 100% / 0 0 12% 12%; overflow:hidden;
  }
  .hero__media-img{clip-path:none; border-radius:inherit}
  /* Nach unten abdunkeln, sonst steht die weisse Schrift auf hellem Foto. */
  .hero__media-img::after{
    background:linear-gradient(180deg,
      rgba(49,49,49,0) 16%, rgba(49,49,49,.30) 42%,
      rgba(49,49,49,.52) 70%, rgba(49,49,49,.52) 100%);
  }

  /* Statisch, damit der Titel sich an .hero ausrichtet und nicht hier. */
  .hero__inner{order:3; position:static; padding-block:1.5rem 2rem; gap:0}

  .hero__titel{
    position:absolute; top:0; left:0; right:0; height:var(--hero-bildhoehe);
    z-index:3; pointer-events:none;
    display:flex; flex-direction:column; justify-content:flex-end; align-items:flex-end;
    /* Der Abstand nach unten haelt die Zeilen ueber dem Preiskreis frei.
       Bei HelpCare stehen Kreis und Ueberschrift nebeneinander; hier ist die
       Ueberschrift fast so breit wie das Fenster, also muss sie darueber. */
    padding:0 1.25rem calc(var(--hero-kreis) + 1rem); text-align:right;
  }
  .hero__titel h1{
    width:auto; max-width:100%; margin:0; color:#fff;
    /* "GESCHAEFTSADRESSE" ist rund das Zehnfache der Schriftgroesse breit
       und muss auf eine Zeile. Der vw-Wert ist so gewaehlt, dass die Zeile
       auch bei 320 px noch in die Spalte passt; die Untergrenze liegt
       bewusst darunter, sonst wuerde gerade sie den Umbruch erzwingen. */
    font-size:clamp(1.6rem, 8.4vw, 2.6rem); line-height:1.06;
    text-shadow:0 1px 12px rgba(0,0,0,.3);
  }
  .hero__titel .hero__sub{
    margin:.8rem 0 0; padding-top:.8rem; max-width:100%;
    border-top:2px solid rgba(255,255,255,.9);
    color:#fff; text-transform:uppercase; letter-spacing:.15em; font-weight:700;
    font-size:clamp(.85rem, 3.7vw, 1.05rem); line-height:1.25;
    text-shadow:0 1px 10px rgba(0,0,0,.28);
  }

  /* Kreis unten links, halb ueber der Bildkante. Der negative Rand ist genau
     die Kreishoehe: dadurch sitzt er bündig auf der Unterkante des Fotos und
     schiebt nichts nach unten. */
  .hero__badge{
    position:relative; order:2; z-index:4; left:auto; right:auto; top:auto;
    align-self:flex-start; margin:calc(-1 * var(--hero-kreis)) 0 0 1.25rem;
    width:var(--hero-kreis); height:var(--hero-kreis);
    /* Groesser gesetzt und mit wenig Innenabstand, damit die Schrift den
       Kreis ausfuellt statt darin zu schwimmen. */
    font-size:20px; line-height:1.3; padding:.3rem;
  }

  .finder{order:4}
}

/* ---------- Kopfzeile auf dem Telefon ----------
   Marke, Sprachwahl, Telefonzeichen und Burger passten unter 430 px nicht
   nebeneinander: bei 320 lief die Zeile 106 px ueber den Rand hinaus.
   Flexbox meldet das nicht von selbst, es faellt nur am abgeschnittenen
   Symbol auf. Deshalb hier kleinere Marke und engere Abstaende. */
@media (max-width:700px){
  .header__inner{gap:.75rem; padding-inline:.9rem}
  .brand{gap:.5rem}
  .brand__mark{width:32px; height:32px}
  .brand__name{font-size:1.24rem}
  .brand__claim{font-size:.56rem; letter-spacing:.1em}
  .header__cta{gap:.45rem}
  .lang{padding:.3rem .5rem; gap:.3rem}
}

/* Die Kopfzeile traegt auf dem Telefon vier Dinge: Marke, Telefonblock,
   Burger und frueher die Sprachwahl. Das passt nicht ueberall, also faellt
   nach Breite gestaffelt weg, was am wenigsten kostet. Gemessen mit
   kopftest.html von 320 bis 2200 px. */
@media (max-width:430px){
  /* Zusatz raus: er steht ohnehin gross in der Hero. */
  .brand__claim{display:none}
  .brand__name{font-size:1.18rem}
}
@media (max-width:360px){
  /* Schmalerer Rand, damit die Ueberschrift die Zeile behaelt. */
  .hero__titel{padding-left:1rem; padding-right:1rem}
  /* Nur noch die Flagge, das Kuerzel daneben waere zu viel. */
  .lang__code{display:none}
  .lang{padding:.3rem .4rem}
  .burger{width:38px; height:38px}
  /* Ein Drittel der Karte misst hier rund 79 px. Bei 13 px Schrift bricht
     ein Wort wie "Firmenumzug" nicht um und macht die Reihe zweizeilig. */
  .finder__opts button{font-size:var(--fs-2xs); white-space:nowrap; padding:.75rem .15rem}
}

/* Sprachwahl im Burger-Menue. Am Desktop steht sie in der Kopfzeile. */
/* ---------- Telefon: Aufbau wie helpcare.de ----------
   Dort folgt auf das Hero-Foto unmittelbar die Formularkarte, darunter die
   Siegel. Ein zweites Formular in der Hero gibt es nicht, deshalb faellt
   das Rueckruf-Feld hier weg. Im Kopf steht der Telefonblock mit Text,
   die Sprachwahl rueckt ins Burger-Menue. */
@media (max-width:700px){
  /* Telefonzeichen und Sprachtaste bleiben in der Leiste; der ausgeschriebene
     Telefonblock passt daneben nicht und steht ohnehin im Fuss. */
  .header__phone{display:none}
  .header__phone-icon{width:24px; height:24px}

  /* Auf dem Handy uebernimmt die Tarifkarte den Erstkontakt, der Knopf entfaellt. */
  .hero__cta{display:none}

  /* Karte direkt unter dem Bild, freistehend mit Rand an beiden Seiten. */
  .finder{
    order:3; position:static; width:auto; max-width:none;
    margin:1.1rem 1rem 0; padding:1.6rem 1.15rem;
    border-radius:var(--r-lg); box-shadow:0 6px 24px rgba(0,0,0,.12);
  }
  .finder__title{font-size:1.16rem; margin-bottom:1.15rem}
  .finder__progress{margin-bottom:1.5rem}
  .finder__q{margin-bottom:1rem}
  /* Drei Felder nebeneinander: enger gesetzt, damit die laengste
     Beschriftung ("Firmenumzug") ohne Umbruch in ein Drittel passt. */
  .finder__opts{gap:.4rem; margin-bottom:0}
  .finder__opts button{padding:.75rem .25rem; font-size:var(--fs-xs); line-height:1.25}

  /* Fortschritt wie bei HelpCare: Angabe rechts ueber dem Balken, der
     Balken darunter ueber die volle Kartenbreite. Nebeneinander frisst die
     Angabe auf dem Telefon ein Drittel des Balkens. */
  .finder__progress{flex-wrap:wrap; gap:.4rem}
  .finder__pct{order:-1; width:100%; text-align:right}
  .finder__track{flex:1 1 100%}
  .finder__q{text-align:center}

  /* Darunter nur noch die Siegel, mittig wie bei HelpCare. */
  .hero__inner{order:4; padding-block:2.2rem var(--sp-4)}
  .hero__siegel{justify-content:center; gap:1.4rem; margin-top:0}
}

/* ---------- Standort & Leistungen auf dem Telefon ---------- */
@media (max-width:700px){
  /* Zwei Punkte, die auf dem kleinen Schirm nur die Liste laenger machen,
     und der lange Teil der Zurueck-Beschriftung auf den Rechtsseiten: der
     Knopf hat dort die Wortmarke zusammengequetscht, bis sie abschnitt. */
  .nur-breit{display:none}

  /* Das Adresskaestchen lag ueber der Karte und verdeckte sie fast ganz,
     den Marker eingeschlossen. Auf dem Telefon steht es deshalb unter der
     Karte statt darauf. */
  .addresscard{
    position:static; right:auto; left:auto; bottom:auto;
    width:auto; margin-top:1rem;
    box-shadow:0 6px 20px rgba(49,49,49,.14);
  }
  .offer--karte .map__canvas{height:clamp(300px, 76vw, 360px)}
}

/* Zusatz unter dem Firmennamen auf den Rechtsseiten: Firmenhafen ist eine
   Marke, nicht die juristische Person. */
.legal__marke{font-size:var(--fs-sm); color:var(--c-muted)}

/* Sprungziel der Tarifkarten: ohne Abstand verschwindet die Kopfzeile der
   Karte unter der klebenden Kopfleiste. */
/* Nur so viel, dass die Pille "Deine Empfehlung" ueber der Kartenkante
   nicht unter der Kopfzeile verschwindet. */
.plan{scroll-margin-top:1.6rem}

/* ---------- Siegel in der Hero ----------
   Rundes Bild mit farbigem Band darunter, wie ein aufgeklebter Stempel.
   Es sagt in einem Blick, was der Fliesstext erst erklaeren muesste: der
   Fernsehturm steht im Fenster, zentraler wird es nicht.

   Steht in der Siegelreihe neben Datenschutz- und Google-Zeichen und ist
   dort ein gewoehnliches Flex-Kind - nicht absolut gesetzt, sonst muesste
   die Reihe seinen Platz freihalten. */
.siegel{
  flex:none; margin:0; width:var(--zeichen); height:var(--zeichen);
  border-radius:50%; overflow:hidden;
  border:4px solid var(--c-white); background:var(--c-primary);
  box-shadow:var(--sh-primary);
  display:grid; grid-template-rows:1fr auto;
  transform:rotate(-7deg);
}
/* Bild ueber beide Zeilen, das Band legt sich unten darueber. */
.siegel img{grid-area:1 / 1 / 3 / 2; width:100%; height:100%; object-fit:cover; display:block}
.siegel figcaption{
  grid-area:2 / 1 / 3 / 2; align-self:end;
  background:var(--c-primary); color:var(--c-white); text-align:center;
  /* Der grosse Abstand nach unten ist kein Zierrat: Er haelt die
     Adresszeile dort, wo die Kreissehne noch breit genug fuer sie ist.
     Weiter unten schneidet der Kreis sie ab. */
  /* Das Band schliesst buendig mit dem unteren Kreisrand ab: Der Kreis
     schneidet es mit seiner Rundung ab, so bleibt unter der Schrift kein
     Foto-Streifen stehen. Der Abstand nach unten ist trotzdem noetig, weil
     die Kreissehne dort schmal wird und die Schrift nicht am Rand kleben
     darf; er ist jetzt Teil des Bandes statt ein Spalt darunter. */
  margin-bottom:0;
  padding:calc(var(--zeichen)*.018) calc(var(--zeichen)*.05) calc(var(--zeichen)*.085);
  line-height:1.05;
}
.siegel figcaption b{display:block; font-size:calc(var(--zeichen) * .0875); font-weight:700; letter-spacing:-.01em}
.siegel figcaption span{display:block; margin-top:.12em; font-size:calc(var(--zeichen) * .0575); opacity:.9; white-space:nowrap}

/* Unterhalb von rund 1280 px wird die Textspalte zu schmal fuer alle drei
   Zeichen nebeneinander - das Siegel rutschte allein in eine zweite Zeile.
   Lieber die ganze Reihe eine Spur kleiner als ein einzelnes Siegel
   darunter. Gemessen, nicht gerechnet: bei 1181 px brach sie noch um. */
/* Unter rund 1350 px wird der Kreis so klein, dass die Adresszeile nur noch
   ein Grauschleier waere. Dann lieber weglassen. */
@media (max-width:1350px){
  .hero__siegel{gap:.8rem}
  .siegel{border-width:3px}
  .siegel figcaption{padding-bottom:calc(var(--zeichen)*.07)}
  .siegel figcaption span{display:none}
}

/* ---------- Einwilligung ----------
   Leiste unten, nicht bildschirmfuellend: Die Seite ist ohne Zustimmung
   vollstaendig benutzbar, nur die Karte fehlt. Eine Sperre waere hier
   unangemessen und als Druckmittel ohnehin heikel. */
.einwilligung{
  position:fixed; z-index:60; left:50%; bottom:1rem; transform:translateX(-50%);
  width:min(760px, calc(100vw - 2rem));
  /* Platz fuer den mitlaufenden Knopf rechts daneben. */
  margin-right:0;
  display:flex; align-items:center; gap:1.2rem; flex-wrap:wrap;
  padding:1rem 1.25rem; border-radius:var(--r-md);
  background:var(--c-white); border:1px solid var(--c-line);
  box-shadow:0 10px 40px rgba(49,49,49,.18);
}
.einwilligung__text{flex:1 1 20rem; font-size:var(--fs-sm); line-height:1.6; color:var(--c-ink-soft)}
.einwilligung__text b{color:var(--c-ink)}
.einwilligung__text a{color:var(--c-primary); text-decoration:underline; text-underline-offset:2px}
/* Gleiche Groesse fuer beide: Ablehnen darf nicht schwerer fallen als
   Zustimmen, sonst ist die Einwilligung nicht freiwillig. */
.einwilligung__knoepfe{display:grid; grid-auto-flow:column; grid-auto-columns:1fr; gap:.6rem; flex:none}
.einwilligung__knoepfe .btn{min-width:10.5rem; justify-content:center; text-align:center}

@media (max-width:620px){
  .einwilligung{gap:.9rem; padding:.9rem 1rem}
  .einwilligung__knoepfe{width:100%}
  .einwilligung__knoepfe .btn{min-width:0}
}

/* Platzhalter, solange die Karte nicht geladen werden darf. */
.kartenplatz{
  position:absolute; inset:0; z-index:5;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:.8rem; padding:1.5rem; text-align:center;
  background:var(--c-primary-tint); border-radius:inherit;
}
.kartenplatz__text{margin:0; max-width:34ch; font-size:var(--fs-sm); color:var(--c-ink-soft); line-height:1.6}
.kartenplatz__fuss{margin:0; font-size:var(--fs-2xs)}
.kartenplatz__fuss a{color:var(--c-muted); text-decoration:underline; text-underline-offset:2px}

/* Knopf im Fuss, der wie ein Link aussieht: Das Zuruecknehmen der
   Einwilligung muss genauso leicht erreichbar sein wie das Erteilen
   (Art. 7 Abs. 3 DSGVO). */
.fuss-knopf{
  font:inherit; color:inherit; background:none; border:0; padding:0;
  cursor:pointer; text-align:left;
}
.fuss-knopf:hover{color:var(--c-primary); text-decoration:underline; text-underline-offset:3px}

/* ---------- Beratung: Knopf und Dialog ---------- */
.header__beratung{white-space:nowrap}

/* Mitlaufender Knopf: am Desktop unten rechts als Pille, auf dem Telefon
   weiter unten ueber die ganze Breite. Er bleibt beim Scrollen stehen,
   damit der Weg zur Beratung nie mehr als einen Klick weit ist. */
.beratung-knopf{
  position:fixed; z-index:50; right:1.6rem; bottom:1.6rem;
  display:inline-flex; align-items:center; gap:.5rem;
  padding:.85rem 1.5rem; border:0; border-radius:var(--r-pill);
  background:var(--c-primary); color:var(--c-white);
  font:inherit; font-weight:700; font-size:.95rem; cursor:pointer;
  box-shadow:0 10px 28px rgba(0,0,0,.24);
  transition:transform .18s, box-shadow .18s, background-color .18s;
}
.beratung-knopf:hover{
  background:var(--c-primary-dark); transform:translateY(-2px);
  box-shadow:0 14px 34px rgba(0,0,0,.28);
}
.beratung-knopf:active{transform:translateY(0)}
@media (prefers-reduced-motion:reduce){ .beratung-knopf{transition:none} }
/* Der Einwilligungsbanner sitzt ebenfalls unten und deckte die Pille zu.
   Solange er offen ist, bleibt der Knopf weg. Die Marke setzt
   einwilligung.js, sie verschwindet mit dem Banner. */
html[data-banner] .beratung-knopf{display:none}

.beratung{
  width:min(440px, calc(100vw - 2rem)); padding:1.8rem 1.8rem 1.6rem;
  border:0; border-radius:var(--r-lg); background:var(--c-white); color:var(--c-ink);
  box-shadow:0 24px 70px rgba(49,49,49,.3);
}
.beratung::backdrop{background:rgba(49,49,49,.45)}
.beratung h2{margin:0 0 .4rem; font-size:1.45rem; line-height:1.2}
.beratung__text{margin:0 0 1.2rem; color:var(--c-muted); font-size:var(--fs-sm); line-height:1.6}
.beratung__schliessen{position:absolute; top:.6rem; right:.7rem; margin:0}
.beratung__schliessen button{
  width:34px; height:34px; border:0; border-radius:50%; cursor:pointer;
  background:transparent; color:var(--c-muted); font-size:1.5rem; line-height:1;
}
.beratung__schliessen button:hover{background:var(--c-primary-tint); color:var(--c-primary)}
.beratung__form{display:grid; gap:.35rem}
.beratung__form label{font-size:var(--fs-sm); font-weight:700; margin-top:.5rem}
.beratung__opt{font-weight:500; color:var(--c-placeholder)}
.beratung__form input, .beratung__form textarea{
  font:inherit; font-size:16px; width:100%; padding:.7rem .9rem; color:var(--c-ink);
  background:var(--c-white); border:2px solid var(--c-line); border-radius:var(--r-sm);
}
.beratung__form textarea{resize:vertical; line-height:1.5}
.beratung__form input:focus-visible, .beratung__form textarea:focus-visible{
  outline:0; border-color:var(--c-primary); box-shadow:0 0 0 3px var(--c-primary-tint);
}
.beratung__form .btn{margin-top:1rem}
/* Wahl des Kontaktwegs: zwei gleich breite Knoepfe, der aktive in Markenfarbe */
.beratung__weg{display:grid; grid-template-columns:1fr 1fr; gap:.3rem; padding:.3rem; margin:0 0 1rem;
  background:var(--c-primary-tint); border-radius:var(--r-pill)}
.beratung__weg button{border:0; background:transparent; font:inherit; font-weight:700; font-size:var(--fs-sm);
  padding:.6rem .8rem; border-radius:var(--r-pill); cursor:pointer; color:var(--c-ink-soft); transition:background-color .18s,color .18s}
.beratung__weg button.is-active{background:var(--c-primary); color:var(--c-white)}
.beratung__weg button:focus-visible{outline:2px solid var(--c-primary-dark); outline-offset:2px}
.beratung__feld{display:grid; gap:.35rem}
.beratung__feld[hidden]{display:none}
.beratung__status{margin:.6rem 0 0; min-height:1.3em; font-size:var(--fs-sm); font-weight:700}
.beratung__status.is-ok{color:#1b7f4d}
.beratung__status.is-error{color:#c0392b}
.beratung__fuss{margin:.7rem 0 0; font-size:12px; line-height:1.5; color:var(--c-muted)}
.beratung__fuss a{color:var(--c-primary); text-decoration:underline; text-underline-offset:2px}

@media (max-width:700px){
  /* Im Kopf ist kein Platz mehr; der mitlaufende Knopf nimmt die ganze Breite. */
  .header__beratung{display:none}
  .beratung-knopf{
    display:flex; justify-content:center; left:1rem; right:1rem; bottom:1rem;
    padding:.95rem 1.2rem; font-size:1rem;
  }
  /* Platz, damit der Knopf den Fuss nicht verdeckt. */
  .footer{padding-bottom:5rem}
  /* Einwilligungsleiste weicht nach oben aus. */
  .einwilligung{bottom:5.2rem}
}

/* Raeume stehen jetzt in einem eigenen Abschnitt, auf demselben Grund wie
   die Vorteile davor - deshalb oben kein zusaetzlicher Abstand. */
.section--raeume{background:var(--c-primary-tint); padding-top:0}

/* Preisabschnitt kompakter: drei Karten mit Merkmalsliste laufen sonst weit
   ueber eine Bildschirmhoehe. Hier nur Abstaende, keine Inhalte. */
#preise .section-head{margin-bottom:var(--sp-3)}
.postpick{padding:.9rem 1rem}
.postpick__hint{margin-top:.5rem}
.plan{padding:24px}
.plan__cta{padding-top:.2rem}