/* ===========================================================================
   GLANZMACHER – Gestaltungsebene "Weiss"
   Liegt ueber buero.css und schreibt nur das um, was anders aussehen soll.
   Grundgedanke: weisser Hintergrund, freistehende Karten, viel Luft,
   dunkles Marineblau fuer Text, das GLANZMACHER-Blau nur als Akzent.
   =========================================================================== */

:root{
  --ink:#141A33;          /* Flaechentext  */
  --head:#0F1428;         /* Ueberschriften */
  --muted:#5A6475;        /* Nebentext */
  --line:#E7EBF1;         /* Raender, sehr hell */
  --soft:#F7F9FC;         /* zarte Flaeche zum Absetzen */
  --blue:#2F7FC4;
  --blue-d:#246195;
  --blue-soft:#EDF5FC;
  --r:20px;
  --r-lg:28px;
  --karte:0 1px 2px rgba(20,26,51,.04), 0 12px 32px -18px rgba(20,26,51,.18);
  --karte-hover:0 1px 2px rgba(20,26,51,.05), 0 22px 48px -20px rgba(20,26,51,.28);
}

/* --- Grundflaeche: alles weiss, Farbverlaeufe raus -------------------- */
body{background:#fff;color:var(--ink)}
section{background:#fff}
.secblue,.flow,.usp,.bez,.formsec,.faq,.reflogos,.final,.limit-grid{
  background:#fff !important;
}
/* Nur jede zweite Flaeche leicht abgesetzt, statt grosser Farbbloecke */
/* (frühere Zeile entfernt: .flow und .formsec werden jetzt unten gesteuert) */

section{padding:76px 0}
@media(max-width:820px){section{padding:52px 0}}
/* Breiterer Satzspiegel als bisher (vorher 1140). Gibt der Seite mehr Ruhe
   und laesst die Karten groesser wirken. */
/* buero.css setzt .wrap{width:min(1160px,92%)} - also eine BREITE, keine
   Maximalbreite. Deshalb muss hier ebenfalls "width" gesetzt werden,
   sonst bleibt alles bei 1160 stehen. Der Hero bekommt in buero.css
   zusaetzlich width:100%, darum die eigene Zeile. */
.wrap{width:min(1280px,92%)}
/* buero.css gibt .buhero .wrap ein padding von 56px oben und unten.
   Der Hero ist hier ein eigener Block mit eigener Hoehe, der Abstand
   wuerde sich sonst mit dem der Sektion addieren. */
.buhero .wrap{width:min(1280px,92%);padding:14px 0 14px}
/* Erste Sektion nach dem Hero rueckt naeher heran */
.usp{padding-top:14px}

/* --- Typografie ------------------------------------------------------ */
h1,h2,h3{color:var(--head);letter-spacing:-.015em}
h2{font-size:clamp(1.65rem,3.2vw,2.3rem);line-height:1.18}
.lead{color:var(--muted)}
.eyebrow{color:var(--blue);font-size:.78rem;letter-spacing:.12em}

/* --- Karten: das praegende Element ----------------------------------- */
.usp-c,.svc,.cmp,.limit,.tl-step,.faq-item,.trust-c{
  background:#fff;
  border:1px solid var(--line);
  border-radius:var(--r);
  box-shadow:var(--karte);
  transition:box-shadow .22s ease, transform .22s ease, border-color .22s ease;
}
.usp-c:hover,.svc:hover,.limit:hover{
  box-shadow:var(--karte-hover);
  transform:translateY(-3px);
  border-color:#D9E4F0;
}
.usp-c{padding:26px 24px}
.svc{padding:28px 26px}
.limit{padding:26px 24px}

/* Vergleichskaesten behalten ihre Bedeutung, werden aber ruhiger */
.cmp{padding:30px 30px;box-shadow:var(--karte)}
.cmp.no{background:#fff;border-color:var(--line)}
.cmp.yes{background:var(--blue-soft);border-color:#CFE3F5;box-shadow:var(--karte-hover)}
.cmp.no .mk{background:#FBECEA;color:#C0564C}
.cmp.yes .mk{background:var(--blue);color:#fff}

/* Symbolflaechen */
.usp-ic,.svc .ic{background:var(--blue-soft);border-radius:14px}
.usp-ic svg,.svc .ic svg{color:var(--blue)}

/* --- Hero: dunkle Flaeche als abgerundeter Block, Portrait rechts -----
   Der Hero ist bewusst dunkel. Das Weiss beginnt erst darunter, dadurch
   bekommt die Seite oben Halt und wirkt unten leicht.                  */
.buhero{background:#fff !important;padding:14px 0 0;position:relative}
.buhero::before{content:none}
.buhero-bg,.buhero-scrim{display:none}
/* buero.css setzt .buhero .wrap auf flex; hier sollen die Bloecke untereinander */
.buhero .wrap{display:block}

.neu-hero-inner{
  position:relative;overflow:hidden;
  min-height:640px;
  border-radius:var(--r-lg);
  background:
    radial-gradient(80% 110% at 78% 30%,rgba(47,127,196,.42) 0%,rgba(47,127,196,0) 62%),
    linear-gradient(118deg,#111736 0%,#17204A 48%,#1D2B5E 100%);
  padding:0 56px 0 0;
}
@media(max-width:900px){.neu-hero-inner{padding:40px 22px 0;border-radius:22px}}

/* Portrait links, Text rechts */
.neu-hero-grid{
  display:grid;grid-template-columns:.82fr 1.18fr;gap:30px;
  align-items:end;min-height:640px;
}
.neu-hero-text{order:2;align-self:center;padding:40px 0}
.neu-hero-bild{order:1}
.neu-pill{
  display:inline-flex;align-items:center;gap:8px;
  background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.2);
  color:#D8E6F6;border-radius:999px;padding:7px 15px;
  font-size:.78rem;font-weight:600;letter-spacing:.09em;text-transform:uppercase;
}
.neu-pill svg{width:14px;height:14px}
.neu-hero h1{
  color:#fff;font-size:clamp(2.1rem,4.3vw,3.2rem);line-height:1.08;
  margin:20px 0 16px;letter-spacing:-.022em;
}
.neu-hero h1 .kw{
  color:#7FC0F0;font-family:'Instrument Serif',Georgia,serif;
  font-style:italic;font-weight:400;
}
.neu-hero .lead{color:#C3CEE2;font-size:1.05rem;line-height:1.62;max-width:36rem}
.neu-hero-btns{display:flex;gap:12px;flex-wrap:wrap;margin:26px 0 0}
.neu-hero .btn-outline{
  background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.28);color:#fff;
}
.neu-hero .btn-outline:hover{background:rgba(255,255,255,.14);border-color:#fff;color:#fff}
.neu-hero-foot{margin-top:20px;color:#93A2BD;font-size:.86rem;line-height:1.6}

/* Portrait sitzt auf der Unterkante auf und fuellt die Hoehe des Blocks.
   Links buendig, damit die Flaeche gefuellt wirkt statt zu schweben. */
.neu-hero-bild{
  position:relative;display:flex;justify-content:center;align-items:flex-end;
  height:100%;padding-left:46px;
}
.neu-hero-bild::before{
  content:"";position:absolute;z-index:0;
  left:52%;top:10%;transform:translateX(-50%);
  width:88%;height:80%;border-radius:50%;
  background:radial-gradient(55% 55% at 50% 45%,rgba(127,192,240,.20) 0%,rgba(127,192,240,0) 72%);
}
.neu-hero-bild img{
  position:relative;z-index:1;display:block;
  width:auto;max-width:100%;height:100%;max-height:596px;
  filter:drop-shadow(0 24px 42px rgba(0,0,0,.5));
}
@media(max-width:900px){
  .neu-hero-grid{grid-template-columns:1fr;gap:10px;min-height:0}
  .neu-hero-text{order:1;padding:28px 0 16px}
  .neu-hero-bild{order:2;justify-content:center}
  .neu-hero-bild img{height:auto;max-width:300px}
  .neu-hero-inner{min-height:0}
}
/* Freistehende weisse Karte, die in den dunklen Block hineinragt */
.neu-badge{
  position:absolute;left:14px;bottom:16px;z-index:2;
  background:#fff;border-radius:18px;
  box-shadow:0 24px 54px -22px rgba(0,0,0,.55);
  padding:16px 18px;display:flex;align-items:flex-start;gap:13px;max-width:290px;
}
.neu-badge .pt{width:40px;height:40px;border-radius:50%;background:var(--blue-soft);
  display:grid;place-items:center;flex:none}
.neu-badge .pt svg{width:20px;height:20px;color:var(--blue)}
.neu-badge{flex-direction:column;align-items:stretch;gap:6px;max-width:282px;padding:12px 14px}
.neu-badge .pt{display:none}
.neu-badge .sterne{display:flex;gap:3px}
.neu-badge .sterne svg{width:13px;height:13px;fill:#F5A623}
.neu-badge blockquote{margin:0;color:var(--head);font-size:.8rem;line-height:1.45}
.neu-badge figcaption{display:flex;align-items:center;gap:9px;
  padding-top:7px;border-top:1px solid var(--line)}
.neu-badge figcaption img{height:17px;width:auto;display:block;flex:none}
.neu-badge figcaption b{color:var(--head);font-size:.86rem}
.neu-badge figcaption span{color:var(--muted);font-size:.72rem}
@media(max-width:900px){
  .neu-badge{position:static;margin:0 auto 20px;max-width:100%}
}

/* --- Leistungsraster mit Verweis -------------------------------------- */
.svc-grid{gap:22px}
.svc h3{font-size:1.1rem;margin:14px 0 7px}
.svc p{color:var(--muted);font-size:.96rem;line-height:1.55}
.svc .mehr{
  display:inline-flex;align-items:center;gap:6px;margin-top:14px;
  color:var(--blue);font-weight:600;font-size:.92rem;text-decoration:none;
}
.svc .mehr svg{width:15px;height:15px;transition:transform .18s ease}
.svc .mehr:hover svg{transform:translateX(3px)}

/* --- Zeitstrahl ------------------------------------------------------- */
.tl-step{padding:26px 22px;background:#fff}
.tl-node{background:var(--blue);color:#fff;box-shadow:0 8px 18px -8px rgba(47,127,196,.7)}

/* --- Fragen ----------------------------------------------------------- */
.faq-item{margin-bottom:12px;padding:0 4px}
.faq-item summary{padding:19px 20px;color:var(--head)}
.faq-a{padding:0 20px 19px;color:var(--muted)}

/* --- Schaltflaechen --------------------------------------------------- */
.btn{border-radius:12px;font-weight:650}
.btn-primary{background:var(--blue);border-color:var(--blue);
  box-shadow:0 12px 26px -14px rgba(47,127,196,.85)}
.btn-primary:hover{background:var(--blue-d);border-color:var(--blue-d)}
.btn-outline{background:#fff;border:1px solid var(--line);color:var(--head)}
.btn-outline:hover{border-color:var(--blue);color:var(--blue)}

/* --- Kopfzeile -------------------------------------------------------- */
header,.nav{background:rgba(255,255,255,.88);backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line)}

/* --- Fussbereich ------------------------------------------------------ */
footer{background:var(--soft);border-top:1px solid var(--line);color:var(--ink)}
footer h3{color:var(--head)}
footer a{color:var(--muted)}
footer a:hover{color:var(--blue)}

/* --- Logoleiste ------------------------------------------------------- */
.reflogos{background:#fff !important}

/* --- Leistungsraster: eine Reihe, Ueberschrift ist der Hauptlink -------- */
#leistungen .svc-grid{grid-template-columns:repeat(4,1fr)}
@media(max-width:1100px){#leistungen .svc-grid{grid-template-columns:1fr 1fr}}
@media(max-width:620px){#leistungen .svc-grid{grid-template-columns:1fr}}
#leistungen .svc{display:flex;flex-direction:column}
#leistungen .svc p{flex:1 1 auto}
.svc h3 a{color:inherit;text-decoration:none}
.svc:hover h3 a{color:var(--blue)}

/* --- Kopfzeile: Ueberlauf zwischen 920 und 1200 px -------------------------
   Der Burger kommt erst bei 920 px. Dazwischen stehen Logo, Navigation,
   E-Mail und Telefon nebeneinander und sprengen die Zeile, die Seite laesst
   sich dann seitlich schieben. In diesem Bereich entfaellt die E-Mail,
   die Telefonnummer bleibt. (Fehler besteht auch in der alten Fassung.)

   Die Grenze lag bis zum 22.10.2026 bei 1200 px. Dort kam die E-Mail
   zurueck, bevor der Innenbereich breit genug war: die Praxisseite lief
   bei 1220 px um 8 px ueber. 1240 px deckt diese Luecke. */
@media(max-width:1240px){
  .nav-contact a[href^="mailto"],
  .nav-contact .sep{display:none}
}
/* Zwischen 920 (Burger) und 1050 px wird es trotzdem knapp: engere
   Abstaende in der Leiste, damit Logo, Navigation und Nummer hineinpassen. */
@media(max-width:1050px){
  .nav{gap:12px}
  .nav-links{gap:16px}
  header .brand img{max-width:188px}
}

/* --- Ansprechpartner-Abschnitt mit zwei Personen -------------------------
   buero.css legt zwei Spalten an (Foto | Text). Mit einem zweiten Foto
   rechts werden daraus drei, der Text steht in der Mitte. */
#kontakt .tel-contact{grid-template-columns:1.3fr .8fr;gap:34px;align-items:end}
#kontakt .tel-contact-text{align-self:center;padding:34px 0}
/* buero.css setzt align-self:start. Die Personen sollen aber auf der
   Unterkante aufsitzen: die Fotos enden auf Huefthoehe, und nur wenn der
   Schnitt mit der Abschnittskante zusammenfaellt, wirkt er gewollt. */
#kontakt .tel-contact-photo{align-self:end;margin-bottom:-1px}
#kontakt .tel-contact-photo img{height:340px;width:auto;max-width:100%;margin-inline:auto}
@media(max-width:980px){
  #kontakt .tel-contact{grid-template-columns:1fr 1fr;gap:20px}
  #kontakt .tel-contact-text{grid-column:1 / -1;order:-1;text-align:center;padding-bottom:6px}
  #kontakt .tel-contact-text .sh2-cta{justify-content:center}
  #kontakt .tel-contact-photo img{max-width:230px}
}
@media(max-width:560px){
  #kontakt .tel-contact-photo.zweite{display:none}
  #kontakt .tel-contact{grid-template-columns:1fr}
}

/* --- Vertrauenskacheln: vier in einer Reihe ---------------------------- */
.usp-grid{grid-template-columns:repeat(4,1fr);gap:22px}
@media(max-width:1100px){.usp-grid{grid-template-columns:1fr 1fr}}
@media(max-width:620px){.usp-grid{grid-template-columns:1fr}}

/* --- Aufruf-Band ueber dem Footer -------------------------------------
   Dunkler Block wie der Hero, damit die Seite oben und unten denselben
   Rahmen bekommt. Ersetzt den frueheren Aufruf im Footer. */
.schlussband{padding:16px 0 34px;background:#fff !important}
.schlussband-inner{
  border-radius:var(--r-lg);
  background:
    radial-gradient(70% 120% at 85% 25%,rgba(47,127,196,.38) 0%,rgba(47,127,196,0) 62%),
    linear-gradient(118deg,#111736 0%,#17204A 52%,#1D2B5E 100%);
  padding:44px 48px;
  display:flex;align-items:center;justify-content:space-between;gap:36px;flex-wrap:wrap;
}
.schlussband-text{min-width:0;flex:1 1 420px}
.schlussband h2{color:#fff;margin:0 0 8px;font-size:clamp(1.5rem,2.4vw,1.95rem)}
.schlussband p{color:#C3CEE2;margin:0;font-size:1rem;line-height:1.55;max-width:46rem}
.schlussband-actions{display:flex;flex-direction:column;align-items:flex-start;gap:10px;flex:0 0 auto}
.schlussband-call{color:#93A2BD;font-size:.88rem}
.schlussband-call a{color:#fff;font-weight:600}
@media(max-width:820px){
  .schlussband-inner{padding:30px 22px;gap:22px}
  .schlussband-actions{width:100%}
  .schlussband-actions .btn{width:100%;text-align:center}
}

/* === Bewertungsseite =================================================== */
.bew-kopf{padding:52px 0 10px}
.bew-kopf h1{font-size:clamp(1.9rem,3.6vw,2.6rem);line-height:1.14;margin:4px 0 0}
.bew-kopf .crumb{margin-bottom:26px}

.bew-liste{padding-top:34px}
.bew-grid{
  columns:3;column-gap:22px;
}
@media(max-width:1100px){.bew-grid{columns:2}}
@media(max-width:700px){.bew-grid{columns:1}}

.bew{
  break-inside:avoid;margin:0 0 22px;
  background:#fff;border:1px solid var(--line);border-radius:var(--r);
  box-shadow:var(--karte);padding:22px 22px 20px;
  transition:box-shadow .22s ease, transform .22s ease;
}
.bew:hover{box-shadow:var(--karte-hover);transform:translateY(-2px)}
.bew .sterne{display:flex;gap:3px;margin-bottom:11px}
.bew .sterne svg{width:15px;height:15px;fill:#F5A623}
.bew blockquote{margin:0;color:var(--ink);font-size:.95rem;line-height:1.58}
.bew figcaption{
  margin-top:14px;padding-top:11px;border-top:1px solid var(--line);
  display:flex;flex-direction:column;gap:2px;
}
.bew figcaption b{color:var(--head);font-size:.9rem}
.bew figcaption span{color:var(--muted);font-size:.79rem}

.bew-hinweis{
  margin:6px 0 0;color:var(--muted);font-size:.84rem;line-height:1.5;
  max-width:60ch;
}
.bew-muster{padding-top:58px}

/* Das Vierer-Raster gilt nur fuer die Vertrauenskacheln. Andere Stellen
   nutzen .usp-grid mit drei Kacheln und saehen sonst linksbuendig aus. */
.bew-muster .usp-grid{grid-template-columns:repeat(3,1fr)}
@media(max-width:980px){.bew-muster .usp-grid{grid-template-columns:1fr}}

/* Eigener Klassenname, damit es nicht mit dem .ctaband aus buero.css und
   startseite.css kollidiert - dort ist es eine grosse Flaeche mit
   min-height:380px. Gelernt auf die harte Tour. */

/* Bewertungsseite: Kopf und Liste bilden eine Einheit, deshalb kein
   Flaechenwechsel dazwischen und kein doppelter Abstand. */
.bew-kopf{padding:48px 0 0;background:#fff !important}
.bew-liste{padding-top:30px}
.bew-grid{column-gap:22px}
.bew{margin-bottom:22px}

/* --- Hero der Unterseiten: flacher, ohne Portrait ---------------------- */
.neu-hero-inner.flach{
  min-height:0;padding:54px 56px 58px;
}
.neu-hero-inner.flach .neu-hero-text{order:0;align-self:auto;padding:0;max-width:58rem}
.neu-hero-inner.flach h1{font-size:clamp(1.95rem,3.9vw,2.85rem);margin:18px 0 14px}
.neu-hero-inner.flach .lead{max-width:44rem}
.sub-crumb{margin:0 0 14px;color:var(--muted);font-size:.86rem}
.sub-crumb a{color:var(--blue)}
@media(max-width:820px){
  .neu-hero-inner.flach{padding:34px 22px 36px}
}

/* Optionales Foto im Schlussband, sitzt auf der Unterkante auf */
.schlussband-inner{position:relative;overflow:hidden}
/* Das Bild sitzt auf der Unterkante auf und bleibt vollstaendig im Band.
   Vorher war es 8 px hoeher als der Block und wurde oben abgeschnitten.

   Luft ueber dem Kopf: 18 px. Der Weg dahin: 20 war zu wenig (der
   Kopf wirkte angeschnitten), 58 zu viel (die Person stand verloren
   im Band), 28 noch eine Spur zu tief. Das Bild selbst hat oben fast
   keinen Rand - der Kopf sitzt dort schon an der Kante -, die Luft
   hier ist also die einzige. Je kleiner der Wert, desto groesser das
   Bild: es haengt als height:calc(100% - X) daran. */
.schlussband-inner{min-height:246px}
.schlussband-foto{
  position:absolute;right:40px;bottom:0;height:calc(100% - 18px);width:auto;
  object-fit:contain;object-position:bottom right;pointer-events:none;
  filter:drop-shadow(0 16px 26px rgba(0,0,0,.42));
}
.schlussband-inner:has(.schlussband-foto) .schlussband-text{max-width:min(60%,38rem)}
.schlussband-inner:has(.schlussband-foto) .schlussband-actions{margin-right:200px}
@media(max-width:900px){
  .schlussband-foto{display:none}
  .schlussband-inner:has(.schlussband-foto) .schlussband-text,
  .schlussband-inner:has(.schlussband-foto) .schlussband-actions{max-width:none;margin-right:0}
}


/* === Flächenaufteilung =================================================
   Weiss ist die Grundflaeche. Blau bekommen nur drei Abschnitte, die eine
   Pause setzen sollen: Logoleiste, Formular und Haeufige Fragen. Den
   Rhythmus tragen der dunkle Hero oben und das Schlussband unten.
   Vorher wechselten die Flaechen bei jedem Abschnitt - das ergab auf
   langen Seiten ein unruhiges Streifenmuster.                           */
body section                {background:#fff !important}
body section.reflogos,
body section.formsec,
body section.faq,
body section.reviews,
body section.gallery        {background:var(--soft) !important}
/* Der Footer ist blau. Waere das Schlussband es auch, liefe von den
   Haeufigen Fragen bis zum Seitenende eine einzige blaue Flaeche. */
body section.schlussband    {background:#fff !important}

/* === Ueberschriften mittig, wie auf der Startseite =====================
   Auf den uebernommenen Seiten standen sie linksbuendig ueber die ganze
   Breite. Betroffen sind nur Ueberschriften, die direkt im .wrap stehen -
   Abschnitte mit Bild daneben (#kontakt, .gewerbe) bleiben unberuehrt.   */
section:not(.buhero):not(.schlussband):not(#kontakt):not(.gewerbe) > .wrap > h2,
section:not(.buhero):not(.schlussband):not(#kontakt):not(.gewerbe) > .wrap > .eyebrow,
section:not(.buhero):not(.schlussband):not(#kontakt):not(.gewerbe) > .wrap > p.lead{
  text-align:center;
}
section:not(.buhero):not(.schlussband):not(#kontakt):not(.gewerbe) > .wrap > p.lead{
  max-width:46rem;margin-left:auto;margin-right:auto;
}

/* Folgt das Schlussband auf eine blaue Flaeche, wird es weiss - sonst
   staenden zwei gleiche Flaechen nebeneinander. */

/* --- Zeitstrahl: Spaltenzahl richtet sich nach der Zahl der Schritte ---- */
.timeline.schritte-4{grid-template-columns:repeat(4,1fr)}
.timeline.schritte-5{grid-template-columns:repeat(5,1fr)}
.timeline.schritte-6{grid-template-columns:repeat(3,1fr);row-gap:38px}
@media(max-width:1100px){
  .timeline.schritte-4,.timeline.schritte-5,.timeline.schritte-6{grid-template-columns:1fr 1fr;row-gap:32px}
}
@media(max-width:640px){
  .timeline.schritte-4,.timeline.schritte-5,.timeline.schritte-6{grid-template-columns:1fr;row-gap:26px}
}

/* === Zahlenband ========================================================
   Dunkel wie der Hero, damit die Seite einen zweiten festen Punkt bekommt.
   Vier Zahlen nebeneinander, auf dem Handy zwei. */
.zahlen{padding:0 !important;background:#fff !important}
.zahlen-grid{
  display:grid;grid-template-columns:repeat(3,1fr);
  border-radius:var(--r-lg);
  background:
    radial-gradient(70% 130% at 20% 20%,rgba(47,127,196,.34) 0%,rgba(47,127,196,0) 60%),
    linear-gradient(118deg,#111736 0%,#17204A 52%,#1D2B5E 100%);
  padding:40px 32px;
}
.zahl{text-align:center;padding:4px 10px;position:relative}
.zahl + .zahl::before{
  content:"";position:absolute;left:0;top:14%;height:72%;width:1px;
  background:rgba(255,255,255,.14);
}
.zahl b{
  display:block;font-family:'Plus Jakarta Sans',sans-serif;font-weight:800;
  font-size:clamp(1.8rem,3.2vw,2.5rem);color:#7FC0F0;line-height:1.05;
  letter-spacing:-.02em;margin-bottom:8px;
}
.zahl span{display:block;color:#B9C6DC;font-size:.88rem;line-height:1.4}
@media(max-width:760px){
  .zahlen-grid{grid-template-columns:1fr;row-gap:24px;padding:30px 18px}
  .zahl + .zahl::before{left:14%;right:14%;top:-12px;width:auto;height:1px}
}

/* === Gleiche Abstände an allen Farbwechseln ============================
   Die uebernommenen Seiten bringen eigene Innenabstaende mit (0, 34, 40,
   46, 50, 64, 66, 82 px) und ueberstimmen die einfache section-Regel.
   Hier wird jeder Inhaltsabschnitt auf dieselben 64 px gesetzt, damit
   jeder Uebergang gleich aussieht: 64 unten + 64 oben = 128.
   Hero, Zahlenband und Schlussband tragen eigene Bloecke und sind
   davon ausgenommen.                                                    */
body section:not(.buhero):not(.usp):not(.zahlen):not(.schlussband):not(.gewerbe){
  padding-top:64px    !important;
  padding-bottom:64px !important;
}
/* Hero und Vertrauenskacheln behalten die 28 px, die Sie dort wollten */
.buhero{padding:14px 0 0 !important}
.buhero .wrap{padding:14px 0 14px}
/* Standard wie jeder Abschnitt. Nur wenn die Kacheln direkt unter dem Hero
   stehen, ruecken sie eng heran - auf anderen Seiten stehen sie mitten in
   der Seite, dort gelten die normalen Abstaende. */
body section.usp{padding:64px 0 !important}
body section.buhero + section.usp{padding-top:14px !important}
/* Zahlenband und Schlussband fluchten mit den uebrigen Abstaenden */
body section.zahlen     {padding:64px 0 !important}
body section.schlussband{padding:64px 0 34px !important}

@media(max-width:820px){
  body section:not(.buhero):not(.usp):not(.zahlen):not(.schlussband):not(.gewerbe),
  body section.zahlen{padding-top:44px !important;padding-bottom:44px !important}
  body section.usp{padding:44px 0 !important}
  body section.buhero + section.usp{padding-top:10px !important}
  body section.schlussband{padding:44px 0 28px !important}
}

/* === Korrekturen aus Ihren vier Bildschirmfotos ========================= */

/* 1) Ansprechpartner: Das Foto ist auf Huefthoehe geschnitten. Nur wenn der
      Schnitt mit der Abschnittskante zusammenfaellt, wirkt er gewollt.
      Durch die einheitlichen 64 px Innenabstand hing die Person vorher
      mitten im Weiss. */
body section#kontakt{padding-bottom:0 !important}
#kontakt .tel-contact-photo{align-self:end;margin-bottom:-1px}

/* 2) Bewertungen: Das Grund-CSS setzt dort eine 1-px-Linie am unteren Rand.
      Die Flaechen trennen jetzt ueber die Farbe, die Linie ist doppelt. */
body section.reviews{border-bottom:0 !important}

/* 3) Die beiden dunklen Bloecke bekommen gleich viel Luft: 64 px oben wie
      unten. Vorher hatte das Schlussband unten nur 34. */
body section.schlussband{padding:64px 0 !important}
@media(max-width:820px){
  body section.schlussband{padding:44px 0 !important}
}

/* Vertrauenskacheln und Zahlenband sind ein Block, kein Abschnittswechsel.
   Deshalb derselbe enge Abstand wie zwischen Hero und Kacheln (28 px),
   nicht die 128 px, die zwischen zwei Themen stehen. */
/* Der enge Abstand gilt NUR, wenn das Zahlenband direkt folgt. Sonst
   schliesst sich ein normaler Abschnitt an, und dort gelten die 64 px
   wie ueberall. */
body section.usp:has(+ section.zahlen){padding-bottom:28px !important}
body section.zahlen{padding-top:0 !important}
@media(max-width:820px){
  body section.usp:has(+ section.zahlen){padding-bottom:22px !important}
}

/* Hero, Kacheln und Zahlenband bilden oben einen weissen Block. Innerhalb
   dieses Blocks ist der Abstand ueberall 28 px - auch unter dem Zahlenband,
   bis die blaue Flaeche das naechste Thema beginnt. */
body section.zahlen{padding-bottom:28px !important}
@media(max-width:820px){
  body section.zahlen{padding-bottom:22px !important}
}

/* === Drei Korrekturen ==================================================

   1) Logoleiste: Die weichen Auslaeufer links und rechts sind in buero.css
      fest auf Weiss gesetzt. Der Abschnitt ist jetzt blau, dadurch lagen
      zwei weisse Kaesten ueber den aeusseren Logos.                       */
.logolauf::before{background:linear-gradient(90deg,var(--soft) 0%,var(--soft) 50%,rgba(247,249,252,0) 100%) !important}
.logolauf::after {background:linear-gradient(270deg,var(--soft) 0%,var(--soft) 50%,rgba(247,249,252,0) 100%) !important}
/* Die Leiste nutzt noch die alte Breite von 1160 */
.logolauf{width:min(1280px,92%) !important}

/* 2) Zeitstrahl: Die Verbindungslinie ist eine einzelne waagerechte Linie
      am oberen Rand des Rasters. Bei vier Schritten in einer Reihe passte
      das; bei sechs Schritten in zwei Reihen verbindet sie nur die obere.
      Eine halb gezogene Linie ist schlechter als keine - die Nummern
      zeigen die Reihenfolge ohnehin.                                      */
.timeline::before{display:none !important}

/* 3) Vergleichskaesten: Sie stehen in der schmalen Lesespalte, waehrend
      alle anderen Kacheln die volle Breite nutzen. Der Text bleibt schmal,
      die Kaesten brechen aus.                                             */
section .wrap.prose-narrow > .cmp-grid{
  width:min(1280px,92vw);
  max-width:none;
  /* Kein transform: das nutzt bereits die Einblend-Animation (.reveal),
     beides zusammen schiebt das Raster aus der Seite. */
  margin-left:calc(50% - min(640px, 46vw));
}

/* === Korrekturen 06.10. ==============================================

   1) Abschnittsklasse "limit-grid" war doppelt belegt. In buero.css ist
      .limit-grid ein zweispaltiges GITTER (fuer den Kasten-Block auf der
      Fensterputzer-Seite). Auf vier Seiten stand dieselbe Klasse am
      <section>. Dadurch wurde der Abschnitt selbst zum Gitter und sein
      .wrap landete in der linken Spalte: 654 statt 1280 px bei 1440 px
      Fensterbreite. Die Abschnitte heissen jetzt .grenzen, der Klassen-
      name ist in keiner Basis-Datei belegt.                              */
.grenzen{background:#fff}

/* 2) "Vier Posten" auf der Preisseite: .svc-grid ist dreispaltig, der
      Abschnitt hat aber vier Kacheln - also 3 oben und 1 allein darunter.
      Hier stehen alle vier nebeneinander.                                */
#posten .svc-grid{grid-template-columns:repeat(4,1fr)}
@media(max-width:1100px){#posten .svc-grid{grid-template-columns:1fr 1fr}}
@media(max-width:620px) {#posten .svc-grid{grid-template-columns:1fr}}

/* 3) Haeufige Fragen: .faq-list hat in buero.css margin:0 auto, also gar
      keinen Abstand nach oben - die Ueberschrift klebte an der ersten
      Frage. 38 px ist derselbe Wert wie bei den Vierer-Kacheln.          */
.faq .faq-list{margin-top:38px}

/* 4) Innenabstand Ueberschrift -> Kacheln: ein einziger Wert.
      Vorher stand er teils in buero.css (34/40/44/58), teils als
      style="margin-top:..." in den Seiten selbst. Die Inline-Werte sind
      raus, hier steht der Wert einmal fuer alle Seiten.
      :not(.wrap) schliesst die Vertrauenskacheln aus - dort ist das
      Gitter selbst der .wrap und sitzt dicht unter dem Hero.           */
.svc-grid:not(.wrap),
.cols3:not(.wrap),
.usp-grid:not(.wrap),
.cmp-grid:not(.wrap),
.timeline:not(.wrap),
.limit-grid:not(.wrap),
.glass-grid:not(.wrap),
.flow-grid:not(.wrap),
.review-grid:not(.wrap){margin-top:38px}

/* 5) Blau am Rand der Kacheln statt Grau. Beim Ueberfahren mit der Maus
      wird der Rand kraeftiger, zusammen mit dem vorhandenen Anheben.   */
:root{
  --kante:#D5E5F5;
  --kante-hover:#8FBEE4;
}
.usp-c,.svc,.limit,.tl-step,.faq-item,.trust-c,.bew,.cmp.no{
  border-color:var(--kante);
}
.usp-c:hover,.svc:hover,.limit:hover{
  border-color:var(--kante-hover);
}

/* 6) Schlussband: Schrift rueckt 24 px nach rechts, das Foto 50 px nach
      links. Der Knopfblock weicht entsprechend weiter aus, damit er das
      Foto nicht beruehrt.                                              */
.schlussband-inner{padding-left:72px}
.schlussband-foto{right:90px}
.schlussband-inner:has(.schlussband-foto) .schlussband-actions{margin-right:250px}
@media(max-width:900px){
  .schlussband-inner{padding-left:22px}
  .schlussband-inner:has(.schlussband-foto) .schlussband-actions{margin-right:0}
}

/* 7) Auf fuenf Seiten steht die FAQ-Ueberschrift in einem .faq-head mit
      eigenem Abstand von 42 px nach unten. Der faellt weg, damit auch dort
      die 38 px aus Punkt 4 gelten.                                      */
.faq .faq-head{margin-bottom:0}

/* 8) Hero-Gruppe bekommt dieselben Abstaende wie der Rest der Seite.
      Die engen Werte (Hero -> Kacheln 14 px, Kacheln -> Zahlenband 28 px,
      Zahlenband -> Logos 92 px) stammen von mir, nicht aus einer Vorgabe:
      Ich hatte Hero, Vertrauenskacheln und Zahlenband als einen
      zusammenhaengenden Block behandelt. Auf dem Rest der Seite liegen
      zwischen zwei Bloecken 128 px (64 unten + 64 oben). Das gilt jetzt
      ueberall, auch hier oben.                                           */
.buhero .wrap{padding-bottom:64px}
body section.usp,
body section.zahlen{padding:64px 0 !important}
body section.buhero + section.usp{padding-top:64px !important}
body section.usp:has(+ section.zahlen){padding-bottom:64px !important}
@media(max-width:820px){
  .buhero .wrap{padding-bottom:44px}
  body section.usp,
  body section.zahlen{padding:44px 0 !important}
  body section.buhero + section.usp{padding-top:44px !important}
  body section.usp:has(+ section.zahlen){padding-bottom:44px !important}
}

/* 9) Satz unter dem Zeitstrahl. .flow-foot ist in buero.css ein Flex-
      Container fuer Knoepfe (margin-top:24px). Als Fliesstext braucht er
      denselben Abstand wie alle Gitter (38) und eine Lesebreite, sonst
      laeuft der Satz ueber 1280 px.                                      */
.flow-foot{margin-top:38px}
#wie .flow-foot{
  display:block;
  max-width:44rem;
  margin-inline:auto;
  text-align:center;
  color:var(--muted);
  font-size:1rem;
  line-height:1.6;
}

/* 10) Schlusssatz unter einem Kachelgitter. Eigene Klasse, weil
       .flow-foot in buero.css ein Flex-Container fuer Knoepfe ist.      */
.abschnitt-fuss{
  margin:38px auto 0;
  max-width:44rem;
  text-align:center;
  color:var(--muted);
  font-size:1rem;
  line-height:1.6;
}

/* 11) Korrektur zu Punkt 8. Hero, Vertrauenskacheln und Zahlenband sind
       drei flache Streifen. Mit 128 px dazwischen - dem Abstand zwischen
       zwei eigenstaendigen Themen - entstehen zwei leere Flaechen, die
       hoeher sind als die Kacheln selbst. Innerhalb dieser Kopfgruppe
       gilt deshalb die Haelfte: 64 px. Zum naechsten Thema nach dem
       Zahlenband bleiben es 128.                                         */
.buhero .wrap{padding-bottom:32px}
body section.buhero + section.usp{padding-top:32px !important}
body section.usp:has(+ section.zahlen){padding-bottom:32px !important}
body section.zahlen{padding-top:32px !important}
@media(max-width:820px){
  .buhero .wrap{padding-bottom:22px}
  body section.buhero + section.usp{padding-top:22px !important}
  body section.usp:has(+ section.zahlen){padding-bottom:22px !important}
  body section.zahlen{padding-top:22px !important}
}

/* 12) Ein Abstand fuer die ganze Seite.
       Massgeblich ist der Abstand, den Martin markiert hat: vom
       Zahlenband bis zur hellblauen Kante darunter. Das sind 64 px
       zwischen zwei Bloecken, also 32 px unter dem einen und 32 ueber
       dem naechsten. Die 128 aus Punkt 8 und die Sonderwerte aus
       Punkt 11 sind damit erledigt - es gibt nur noch diesen einen Wert.
       Dieselben Selektoren wie oben, sonst gewinnt die aeltere Regel
       ueber ihre hoehere Spezifitaet.                                    */
body section:not(.buhero):not(.usp):not(.zahlen):not(.schlussband):not(.gewerbe){padding:32px 0 !important}
body section.usp,
body section.zahlen{padding:32px 0 !important}
body section.buhero + section.usp{padding-top:32px !important}
body section.usp:has(+ section.zahlen){padding-bottom:32px !important}
body section.schlussband{padding:32px 0 !important}
.buhero .wrap{padding-bottom:32px}
/* Patrik sitzt auf der Unterkante: dort bleibt es bei 0. Genauso steht
   im Gewerbe-Abschnitt das Foto auf der Kante zum naechsten Block -
   .gewerbe ist deshalb oben ausgenommen und behaelt sein 34/0 aus
   der Grundgestaltung. Mit Abstand unten wuerde das Foto schweben. */
body section#kontakt{padding-bottom:0 !important}
@media(max-width:820px){
  body section:not(.buhero):not(.usp):not(.zahlen):not(.schlussband):not(.gewerbe){padding:24px 0 !important}
  body section.usp,
  body section.zahlen{padding:24px 0 !important}
  body section.buhero + section.usp{padding-top:24px !important}
  body section.usp:has(+ section.zahlen){padding-bottom:24px !important}
  body section.schlussband{padding:24px 0 !important}
  .buhero .wrap{padding-bottom:24px}
}

/* === Bilder ============================================================
   Bis hierhin bestand die Seite nach dem Hero nur aus Textkacheln. Die
   beiden Bauteile unten bringen die Arbeitsfotos hinein.               */

/* Bildband: vier Aufnahmen nebeneinander, quadratisch.
   Unter 900 px zwei nebeneinander - bei vier Bildern ergibt das ein
   volles 2x2-Feld statt einer angebrochenen zweiten Reihe. */
.bb-grid{
  display:grid;grid-template-columns:repeat(4,1fr);gap:22px;margin-top:38px;
}
@media(max-width:900px){.bb-grid{grid-template-columns:1fr 1fr}}
@media(max-width:620px){.bb-grid{grid-template-columns:1fr}}
.bb{margin:0}
.bb img{
  width:100%;height:auto;display:block;
  border-radius:var(--r);
  border:1px solid var(--kante);
  box-shadow:var(--karte);
  object-fit:cover;aspect-ratio:1/1;
}
.bb figcaption{
  margin-top:12px;color:var(--muted);font-size:.92rem;line-height:1.5;
  text-align:center;
}

/* Ein Bild neben einem Text. */
.bt-grid{
  display:grid;grid-template-columns:.9fr 1.1fr;gap:48px;align-items:center;
}
.bt-grid.bt-links .bt-bild{order:-1}
.bt-grid:not(.bt-links) .bt-bild{order:2}
@media(max-width:860px){
  .bt-grid{grid-template-columns:1fr;gap:28px}
  .bt-grid .bt-bild{order:-1}
}
.bt-bild img{
  width:100%;height:auto;display:block;
  border-radius:var(--r);
  border:1px solid var(--kante);
  box-shadow:var(--karte);
  object-fit:cover;aspect-ratio:1/1;
}
.bt-text h2{margin:6px 0 0}
.bt-text > p{color:var(--muted);margin-top:14px;line-height:1.65}
.bt-punkte{list-style:none;padding:0;margin:20px 0 0;display:grid;gap:11px}
.bt-punkte li{
  display:flex;gap:11px;align-items:flex-start;
  color:var(--ink);font-size:.98rem;line-height:1.5;
}
.bt-punkte svg{width:19px;height:19px;color:var(--blue);flex:none;margin-top:3px}
/* Bild und Text stehen nebeneinander - die Ueberschrift bleibt links,
   anders als in den Abschnitten mit mittiger Ueberschrift.            */
section.bildtext > .wrap > h2{text-align:left}

/* Das Bild soll auf beiden Seiten gleich breit sein. Vorher richteten
   sich die Spaltenbreiten nach der Position, nicht nach dem Inhalt:
   rechts war das Bild 1.1fr breit, links nur .9fr.                    */
.bt-grid{grid-template-columns:1.1fr .9fr}
.bt-grid.bt-links{grid-template-columns:.9fr 1.1fr}
@media(max-width:860px){
  .bt-grid,.bt-grid.bt-links{grid-template-columns:1fr}
}

/* === Symbole kraeftiger ================================================
   Die Symbolflaechen waren so hell (#EDF5FC auf Weiss) und die Striche so
   duenn, dass die Zeichen auf dem Bildschirm kaum zu erkennen waren. Die
   Strichstaerke steht als Attribut im HTML und wird hier ueberschrieben,
   damit sie an einer Stelle liegt.                                      */
.usp-ic,.svc .ic{background:#DCEBF9}
.usp-ic svg,.svc .ic svg{stroke-width:2}
/* Tritt ein Symbol auf einer getoenten Flaeche auf, braucht es mehr
   Abstand zum Hintergrund als auf Weiss. */
section.reflogos .usp-ic,section.faq .usp-ic{background:#fff}

/* Die Regeln fuer #kontakt weiter oben (Zeilen um 250) gelten einem
   Abschnitt, den es nicht mehr gibt - er sagte dasselbe wie das
   Schlussband und zeigte dasselbe Foto. Sie bleiben stehen, falls der
   Abschnitt zurueckkommt, wirken aber nirgends mehr.                    */

/* === Handy: Hero ======================================================
   Auf 375 px lief der Hero-Text 160 px ueber den Rand hinaus und wurde
   von .neu-hero-inner (overflow:hidden) abgeschnitten - die Ueberschrift
   war auf dem Handy halb weg. Zwei Ursachen:
   a) "Bueroreinigung in Berlin" stand mit white-space:nowrap direkt im
      HTML und passt in einer Zeile nicht auf ein Handy. Das Attribut ist
      jetzt die Klasse .h1-zeile und gilt nur ab 900 px.
   b) grid-template-columns:1fr erlaubt einer Spalte, durch ihren Inhalt
      breiter zu werden als das Gitter. minmax(0,1fr) verhindert das.   */
.h1-zeile{white-space:nowrap}
@media(max-width:900px){
  .h1-zeile{white-space:normal}
  .neu-hero-grid{grid-template-columns:minmax(0,1fr)}
  .neu-hero-text,.neu-hero-bild{min-width:0}
}

/* Die Bewertungskarte im Hero haengt am Portrait und ist absolut
   positioniert. Auf dem Handy ragte sie 61 px ueber den Rand und wurde
   abgeschnitten. Dort laeuft sie jetzt im Textfluss unter dem Foto mit.

   Die 22 px unten sind dieselben, die links und rechts neben der Karte
   stehen. Ohne sie schloss die weisse Karte buendig mit der Unterkante
   des blauen Blocks ab - der Block hoerte scheinbar mitten in der Karte
   auf. Jetzt bleibt unten derselbe blaue Rand sichtbar wie an den
   Seiten, und die Karte liegt erkennbar im Block.

   Oben dagegen kein Abstand: das Portrait ist freigestellt und auf
   Hueffthoehe geschnitten. Jeder Spalt zwischen Bildkante und Karte
   laesst die Person schweben. Sie muss auf der Karte aufsitzen, dann
   wirkt der Schnitt gewollt.                                          */
@media(max-width:900px){
  .neu-badge{position:static;max-width:100%;margin:0 auto 22px}
}

/* .neu-hero-bild ist ein Flex-Container. Nimmt die Bewertungskarte auf
   dem Handy ihren Platz im Fluss ein, stellt sie sich neben das Portrait
   statt darunter. Deshalb dort untereinander, zentriert, mit Innenrand. */
@media(max-width:900px){
  .neu-hero-bild{flex-direction:column;align-items:center;padding-left:0;height:auto}
  .neu-badge{width:100%;max-width:320px}
}

/* .promise-row steht in den Basis-Dateien als dreispaltiges Gitter ohne
   Umbruch. Auf 375 px erzwangen die drei Spalten eine Seitenbreite von
   557 px - die Seite liess sich seitlich schieben. */
@media(max-width:820px){
  .promise-row{grid-template-columns:1fr}
  .promise{padding:26px 0}
  .promise+.promise{border-left:0;border-top:1px solid rgba(59,142,208,.22)}
}

/* =========================================================================
   LEISTUNGSVERZEICHNIS
   Soll wie ein Blatt Papier wirken, nicht wie eine Webkarte. Deshalb
   kantig (2 px Radius) statt rund wie die uebrigen Kacheln - das ist
   Absicht und kein Ausrutscher. Aufbau uebernommen aus dem fertigen
   Verzeichnis, Farben auf GLANZMACHER umgestellt.
   ========================================================================= */
.lvz-raster{
  margin-top:38px;
  display:grid;grid-template-columns:minmax(0,1fr) minmax(260px,300px);
  gap:clamp(20px,2.4vw,34px);align-items:start;
}

/* --- Das Blatt --- */
.lvz-blatt{
  position:relative;background:#fff;
  border:1px solid var(--line);border-radius:2px;
  padding:clamp(22px,2.4vw,36px);
  box-shadow:0 24px 56px -36px rgba(20,26,51,.55);
}
/* Kopfband wie bei einem gedruckten Formular */
.lvz-blatt::before{
  content:"";position:absolute;inset:0 0 auto 0;height:6px;
  background:var(--head);border-radius:2px 2px 0 0;
}
/* buero.css laesst JEDES <header> oben kleben. Der Kopf des
   Leistungsverzeichnisses ist auch ein <header> und klebte dadurch
   unter dem Seitenkopf, auf dem Handy direkt darueber. Er gehoert
   aber ins Blatt und bleibt dort stehen.                          */
.lvz-kopf{
  position:static;
  display:flex;align-items:center;justify-content:space-between;
  gap:20px;flex-wrap:wrap;
  padding-bottom:12px;border-bottom:1px solid var(--head);
}
.lvz-logo{display:block;height:auto;max-width:138px}
.lvz-kopf h3{
  margin:0;font-size:.82rem;font-weight:650;color:var(--head);
  letter-spacing:.11em;text-transform:uppercase;
}
.lvz-kopf h3 span{font-weight:500;color:var(--muted);margin-left:8px}

.lvz-objekt{
  margin:0;padding:12px 0;border-bottom:1px solid var(--line);
  font-size:.92rem;color:var(--muted);
}
.lvz-objekt strong{color:var(--head);font-weight:620}
.lvz-o-lbl{
  font-size:.68rem;font-weight:650;letter-spacing:.1em;
  text-transform:uppercase;color:var(--muted);margin-right:10px;
}
.lvz-o-tr{color:var(--muted);margin:0 4px}

/* --- Die Matrix --- */
.lvz-tab{margin-top:18px}
.lvz-zeile{
  display:grid;
  /* 130 px fuer die Bemerkung: "ohne Polsterbezuege" braucht 127.
     Bei 112 wurden "soweit freigeraeumt" und "sofern freigeraeumt"
     abgeschnitten - unbemerkt, weil beide erst am Ende kippen.   */
  grid-template-columns:minmax(0,1fr) repeat(5,25px) 58px 130px;
  align-items:center;border-bottom:1px solid #F0F3F8;
}
.lvz-th{
  border-bottom:1.5px solid var(--head);
  font-size:.66rem;font-weight:650;letter-spacing:.06em;
  text-transform:uppercase;color:var(--muted);
}
.lvz-th .lvz-t{padding:10px 0;text-align:center;line-height:1.15}
.lvz-th .lvz-bedarf{font-size:.6rem}
/* Jede Position auf einer Zeile, keine Umbrueche. */
.lvz-l{
  display:flex;gap:6px;padding:9px 12px 9px 0;
  font-size:.84rem;line-height:1.35;color:var(--ink);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.lvz-th .lvz-l{padding-block:12px;color:var(--muted)}
/* Die Reinigungstage sind als Spalte durchgehend hinterlegt */
.lvz-t{
  text-align:center;font-size:.95rem;align-self:stretch;
  display:flex;align-items:center;justify-content:center;
}
.lvz-aktiv{background:var(--blue-soft)}
.lvz-th .lvz-aktiv{color:var(--head)}
.lvz-t i{width:9px;height:9px;border-radius:50%;background:var(--blue);display:block}
.lvz-b{padding-left:12px;font-size:.76rem;color:var(--muted);white-space:nowrap}

/* Raumgruppe als Balken, nummeriert */
.lvz-gruppe{
  display:flex;align-items:center;gap:12px;
  margin:26px 0 0;padding:9px 14px;
  background:var(--head);color:#fff;border-radius:2px;
  font-size:.72rem;font-weight:650;letter-spacing:.12em;text-transform:uppercase;
}
.lvz-g-nr{
  display:inline-flex;align-items:center;justify-content:center;
  width:19px;height:19px;border-radius:50%;flex:none;
  background:#fff;color:var(--head);font-size:.68rem;letter-spacing:0;
}
.lvz-nr{
  flex:none;min-width:24px;
  font-size:.72rem;font-variant-numeric:tabular-nums;color:var(--muted);
}

.lvz-fuss{margin-top:28px;padding-top:20px;border-top:1px solid var(--line)}
.lvz-fuss p{margin:0;font-size:.82rem;line-height:1.6;color:var(--muted);max-width:80ch}
.lvz-fuss strong{color:var(--head);font-weight:620}

/* Einklappen ohne JavaScript */
.lvz-schalter{position:absolute;opacity:0;width:0;height:0;pointer-events:none}
.lvz-huelle{position:relative;max-height:470px;overflow:hidden}
.lvz-huelle::after{
  content:"";position:absolute;inset:auto 0 0 0;height:120px;
  background:linear-gradient(180deg,rgba(255,255,255,0),#fff 88%);
  pointer-events:none;
}
.lvz-schalter:checked ~ .lvz-huelle{max-height:none}
.lvz-schalter:checked ~ .lvz-huelle::after{display:none}
.lvz-mehr{
  display:inline-flex;align-items:center;margin-top:18px;
  padding:9px 18px;border:1px solid var(--kante);border-radius:999px;
  font-size:.86rem;font-weight:600;color:var(--head);cursor:pointer;
  transition:border-color .2s ease,background .2s ease;
}
.lvz-mehr:hover{border-color:var(--blue);background:var(--blue-soft)}
.lvz-schalter:focus-visible ~ .lvz-mehr{outline:2px solid var(--blue);outline-offset:3px}
.lvz-mehr-zu{display:none}
.lvz-schalter:checked ~ .lvz-mehr .lvz-mehr-auf{display:none}
.lvz-schalter:checked ~ .lvz-mehr .lvz-mehr-zu{display:inline}

/* --- Die Spalte daneben: hier stehen Preis und Uhrzeit --- */
.lvz-seite{position:sticky;top:92px;display:grid;gap:16px}
.lvz-preis{
  background:linear-gradient(118deg,#111736 0%,#17204A 52%,#1D2B5E 100%);
  color:#fff;border-radius:var(--r);padding:22px 22px 24px;
}
.lvz-preis-lbl{display:block;font-size:.74rem;font-weight:600;color:rgba(255,255,255,.55)}
.lvz-preis-zahl{margin:8px 0 6px;font-size:1.5rem;font-weight:800;line-height:1.2}
.lvz-preis-zahl em{font-style:normal;font-weight:500;font-size:.92rem;color:rgba(255,255,255,.6);margin:0 4px}
.lvz-preis-sub{margin:0;font-size:.8rem;line-height:1.5;color:rgba(255,255,255,.55)}
.lvz-daten{
  margin:0;border:1px solid var(--kante);border-radius:var(--r);
  padding:4px 18px;background:#fff;
}
.lvz-daten > div{padding:13px 0;border-bottom:1px solid var(--line)}
.lvz-daten > div:last-child{border-bottom:0}
.lvz-daten dt{margin:0;font-size:.68rem;font-weight:650;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.lvz-daten dd{margin:3px 0 0;font-size:.92rem;font-weight:600;color:var(--head)}
.lvz-seite .btn{width:100%;justify-content:center;text-align:center}
.lvz-seite-fuss{margin:0;font-size:.8rem;line-height:1.55;color:var(--muted)}

@media(max-width:1040px){
  .lvz-raster{grid-template-columns:1fr}
  .lvz-seite{position:static;grid-template-columns:1fr 1fr;align-items:start}
  .lvz-seite .btn,.lvz-seite-fuss{grid-column:1 / -1}
}
/* Am Telefon faellt die Matrix auf das Wesentliche zusammen: Leistung und
   ein Punkt dort, wo etwas gesetzt ist. */
@media(max-width:760px){
  .lvz-seite{grid-template-columns:1fr}

  /* Am Telefon bleibt die Matrix eine Matrix - mit Kopfzeile, damit
     ein Punkt auch hier seinen Tag hat. Platz dafuer entsteht, indem
     die nicht vereinbarten Tage wegfallen: Mo, Mi und Fr sind bei
     einem Di/Do-Vertrag ohnehin leer und tragen nichts bei.
     Flexbox statt Grid, weil die Zahl der Spalten vom Vertrag
     abhaengt und sich so von selbst ergibt.                      */
  .lvz-blatt{padding-left:14px;padding-right:14px}
  .lvz-zeile{display:flex;flex-wrap:wrap;align-items:stretch}
  .lvz-zeile .lvz-t:not(.lvz-aktiv):not(.lvz-bedarf){display:none}
  .lvz-l{flex:1 1 0;min-width:0;align-self:center;padding-right:10px;white-space:normal}
  .lvz-t{flex:0 0 38px}
  .lvz-bedarf{flex:0 0 52px}
  .lvz-th .lvz-t{padding:9px 0;font-size:.62rem}
  .lvz-th .lvz-bedarf{font-size:.54rem}
  .lvz-b{flex:1 0 100%;padding:0 0 9px;font-size:.76rem;white-space:normal}
  /* In der Kopfzeile braucht die Bemerkungsspalte keine Ueberschrift:
     sie steht hier unter der jeweiligen Position, nicht daneben. */
  .lvz-th .lvz-b{display:none}

  /* Das Verzeichnis ist lang. Laeuft die Kopfzeile nicht mit, weiss
     man bei Position 1.12 nicht mehr, ob der Punkt rechts Donnerstag
     oder "nach Bedarf" heisst. Sie bleibt deshalb unter dem
     Seitenkopf stehen - der ist 79 px hoch und liegt mit z-index 50
     darueber.                                                     */
  .lvz-th{
    position:sticky;top:79px;z-index:20;
    background:#fff;
  }
  /* overflow:hidden an der Huelle wuerde das Mitlaufen verhindern.
     clip schneidet genauso ab, bricht sticky aber nicht. Zugeklappt
     ist die Huelle ohnehin nur 470 px hoch, da gibt es nichts zu
     scrollen - nur abzuschneiden.                                */
  .lvz-huelle{overflow:clip}
}

/* =========================================================================
   FARBGETRENNTES MIKROFASERSYSTEM
   Die vier Tuchfarben sind die einzigen Farben auf der Seite, die nicht
   aus der Hausfarbe kommen - das ist hier der Inhalt.
   ========================================================================= */
:root{
  --sys-rot:#C3362B;
  --sys-gelb:#F5C400;
  --sys-blau:#2D6FB5;
  --sys-gruen:#3A7D4E;
}
.fs-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:22px;margin-top:38px}
@media(max-width:860px){.fs-grid{grid-template-columns:1fr 1fr}}
@media(max-width:520px){.fs-grid{grid-template-columns:1fr}}
.fs{
  background:#fff;border:1px solid var(--kante);border-radius:var(--r);
  padding:22px 20px 24px;box-shadow:var(--karte);
  transition:box-shadow .22s ease,transform .22s ease,border-color .22s ease;
}
.fs:hover{box-shadow:var(--karte-hover);transform:translateY(-3px)}
.fs-tuch{display:block;width:46px;height:34px;border-radius:5px;margin-bottom:16px}
.fs-rot   .fs-tuch{background:var(--sys-rot)}
.fs-gelb  .fs-tuch{background:var(--sys-gelb)}
.fs-blau  .fs-tuch{background:var(--sys-blau)}
.fs-gruen .fs-tuch{background:var(--sys-gruen)}
.fs-rot  {border-top:3px solid var(--sys-rot)}
.fs-gelb {border-top:3px solid var(--sys-gelb)}
.fs-blau {border-top:3px solid var(--sys-blau)}
.fs-gruen{border-top:3px solid var(--sys-gruen)}
.fs h3{margin:0 0 6px;font-size:1.08rem;color:var(--head)}
.fs p{margin:0;font-size:.93rem;color:var(--muted);line-height:1.5}

/* Auf dem Desktop steht jede Position auf einer Zeile, abgeschnitten
   wird mit Ellipse. Auf 375 px bliebe von "Textile & nichttextile
   Bodenbelaege saugen" nur "Textile & nichttextile Bodenbelae" uebrig.
   Ein halber Satz hilft niemandem, dort wird umgebrochen.          */
@media(max-width:760px){
  .lvz-l{white-space:normal;overflow:visible;text-overflow:clip;align-items:flex-start}
}

/* =========================================================================
   ZIELGRUPPENBAND
   Flach und dunkel, damit es zwischen den weissen Flaechen als Zaesur
   wirkt. Links die Abgrenzung, rechts die Liste.
   ========================================================================= */
.zg-band{
  background:
    radial-gradient(70% 120% at 85% 25%,rgba(47,127,196,.34) 0%,rgba(47,127,196,0) 62%),
    linear-gradient(118deg,#111736 0%,#17204A 52%,#1D2B5E 100%);
  border-radius:var(--r-lg);
  padding:clamp(28px,3vw,44px) clamp(24px,3vw,48px);
  display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);
  gap:clamp(20px,3vw,48px);align-items:start;
}
.zg-band .eyebrow{color:#8FBEE4}
.zg-band h2{color:#fff;margin:6px 0 0;text-align:left}
.zg-liste{margin:0;display:flex;flex-wrap:wrap;gap:6px 10px;align-items:baseline}
.zg-liste span{color:#fff;font-weight:600;font-size:1.02rem;line-height:1.45}
.zg-liste i{color:rgba(255,255,255,.35);font-style:normal}
.zg-sub{margin:18px 0 0;color:#C3CEE2;font-size:.95rem;line-height:1.6}
@media(max-width:860px){
  .zg-band{grid-template-columns:1fr;padding:26px 22px}
}

/* =========================================================================
   ANFRAGE-POPUP
   Im Popup steckt jetzt das zweistufige Formular, das vorher als langer
   Abschnitt auf der Seite stand. Mit 520 px war die Karte dafuer zu
   schmal: Die drei Spalten wurden so eng, dass "100-150 m²" umbrach.
   ========================================================================= */
.amodal-card{width:min(780px,94%)}
.amodal-card .qf-cols{gap:22px 26px}
.amodal-card .qf-chip{padding:9px 14px;font-size:.92rem}
.amodal-card .qf-progress{margin-bottom:18px}
.amodal-card .amodal-hint{margin-top:14px}
/* Lange Formulare brauchen auf kleinen Schirmen eine Bildlaufleiste,
   sonst steht der Absenden-Knopf unter der Bildschirmkante. */
.amodal-card{max-height:92vh;overflow-y:auto;overscroll-behavior:contain}
@media(max-width:820px){
  .amodal-card{width:min(560px,94%)}
}

/* =========================================================================
   ANFRAGEFORMULAR, EINSTUFIG
   Vorher: erst drei Kacheln waehlen, dann "Weiter", dann erst ein
   Eingabefeld. Wer nur schnell seine Adresse hinterlassen wollte, sah
   nicht einmal ein Feld. Jetzt steht alles Noetige sofort da, die
   Objektangaben sind zugeklappt und freiwillig.
   ========================================================================= */
.qf-felder{display:grid;grid-template-columns:1.2fr 1fr 1fr;gap:12px}
@media(max-width:620px){.qf-felder{grid-template-columns:1fr}}
/* buero.css gibt jedem Feld margin-top:12px - im Gitter erzeugt das
   eine schiefe erste Zeile. */
.qf-felder input{margin-top:0}
.qf-kurz textarea{margin-top:12px}
.qf-los{width:100%;justify-content:center;text-align:center;margin-top:14px}

.qf-mehr{margin-top:18px;border-top:1px solid var(--line);padding-top:14px}
.qf-mehr > summary{
  cursor:pointer;list-style:none;
  font-size:.9rem;font-weight:600;color:var(--blue);
  display:flex;align-items:center;gap:8px;
}
.qf-mehr > summary::-webkit-details-marker{display:none}
.qf-mehr > summary::before{
  content:"+";display:inline-flex;align-items:center;justify-content:center;
  width:19px;height:19px;border-radius:50%;flex:none;
  background:var(--blue-soft);color:var(--blue);font-weight:700;line-height:1;
}
.qf-mehr[open] > summary::before{content:"–"}
.qf-mehr .qf-cols{margin-top:16px;gap:18px 22px}
.qf-mehr .qf-label{margin:0 0 8px;font-size:.88rem}
.qf-mehr .qf-chip{padding:8px 13px;font-size:.89rem}
.qf-kurz .qf-reassure{margin-top:16px}

/* =========================================================================
   PREISRECHNER
   Aufbau aus der fertigen Vorlage uebernommen, Farben auf GLANZMACHER
   umgestellt: Eingaben links auf Weiss, Ergebnis rechts auf dem dunklen
   Marineblau, das auch Hero und Schlussband tragen.
   Die Klasse heisst .pr-, nicht .rc- : .rc ist in buero.css schon eine
   Karte mit eigenem Hover.
   ========================================================================= */
.pr-box{
  margin-top:38px;
  display:grid;grid-template-columns:minmax(0,1.08fr) minmax(320px,.92fr);
  border:1px solid var(--kante);border-radius:var(--r);overflow:hidden;
  box-shadow:var(--karte);
}
.pr-form{padding:clamp(24px,3vw,36px);display:grid;gap:28px;align-content:start;background:#fff}
.pr-feld{border:0;padding:0;margin:0;display:grid;gap:12px}
.pr-feld legend{padding:0;font-size:.88rem;font-weight:650;color:var(--head)}

/* --- Flaeche: Regler und Zahlenfeld, immer synchron --- */
.pr-flaeche{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:18px;align-items:center}
.pr-zahl{
  display:inline-flex;align-items:baseline;gap:5px;
  border:1.5px solid var(--kante);border-radius:12px;
  padding:9px 13px;background:#fff;
}
.pr-zahl:focus-within{border-color:var(--blue)}
.pr-zahl input{
  width:3.6ch;border:0;padding:0;background:none;margin:0;
  font:700 1.18rem/1 inherit;color:var(--head);
  font-variant-numeric:tabular-nums;text-align:right;
}
.pr-zahl input:focus{outline:none}
.pr-zahl input::-webkit-outer-spin-button,
.pr-zahl input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.pr-zahl input[type=number]{-moz-appearance:textfield}
.pr-zahl span{font-size:.9rem;color:var(--muted)}

.pr-regler{
  --spur:26%;
  -webkit-appearance:none;appearance:none;width:100%;height:28px;
  background:none;cursor:pointer;margin:0;
}
.pr-regler::-webkit-slider-runnable-track{
  height:4px;border-radius:2px;
  background:linear-gradient(90deg,var(--blue) var(--spur),#DCE6F2 var(--spur));
}
.pr-regler::-moz-range-track{height:4px;border-radius:2px;background:#DCE6F2}
.pr-regler::-moz-range-progress{height:4px;border-radius:2px;background:var(--blue)}
.pr-regler::-webkit-slider-thumb{
  -webkit-appearance:none;appearance:none;margin-top:-10px;
  width:24px;height:24px;border-radius:50%;
  background:var(--blue);border:3px solid #fff;
  box-shadow:0 1px 8px rgba(20,26,51,.3);
}
.pr-regler::-moz-range-thumb{
  width:24px;height:24px;border-radius:50%;border:3px solid #fff;
  background:var(--blue);box-shadow:0 1px 8px rgba(20,26,51,.3);
}
.pr-regler:focus-visible{outline:2px solid var(--blue);outline-offset:4px;border-radius:4px}
.pr-skala{
  margin:0;display:flex;justify-content:space-between;
  font-size:.8rem;color:var(--muted);font-variant-numeric:tabular-nums;
}

.pr-chips{display:flex;flex-wrap:wrap;gap:8px}
.pr-in{position:absolute;opacity:0;width:0;height:0;pointer-events:none}
.pr-chip{
  display:inline-block;cursor:pointer;
  font-size:.94rem;color:var(--muted);background:#fff;
  border:1.5px solid var(--kante);border-radius:100px;padding:9px 17px;
  transition:border-color .2s ease,background .2s ease,color .2s ease;
}
.pr-chip:hover{border-color:var(--kante-hover)}
.pr-in:checked + .pr-chip{background:var(--blue);border-color:var(--blue);color:#fff;font-weight:600}
.pr-in:focus-visible + .pr-chip{outline:2px solid var(--blue);outline-offset:3px}
.pr-hinweis{margin:2px 0 0;font-size:.85rem;line-height:1.5;color:var(--muted);max-width:48ch}

/* --- Ergebnis auf dunklem Grund --- */
.pr-aus{
  display:block;color:#fff;padding:clamp(26px,3vw,36px);
  background:
    radial-gradient(70% 120% at 85% 20%,rgba(47,127,196,.34) 0%,rgba(47,127,196,0) 62%),
    linear-gradient(118deg,#111736 0%,#17204A 52%,#1D2B5E 100%);
}
.pr-aus-lbl{display:block;font-size:.8rem;font-weight:600;color:rgba(255,255,255,.55);margin-bottom:10px}
.pr-netto{
  margin:0;font-size:clamp(1.55rem,2.7vw,2.1rem);font-weight:800;
  letter-spacing:-.032em;line-height:1.1;font-variant-numeric:tabular-nums;
}
.pr-netto-text{font-size:clamp(1.2rem,2vw,1.5rem)}
/* Das Wort "netto" tritt hinter die Zahl zurueck - wie das
   "netto im Monat" in der Einstiegskarte darueber. */
.pr-netto-wort{font-size:.46em;font-weight:600;letter-spacing:0;opacity:.72}
.pr-brutto{margin:6px 0 0;font-size:.92rem;color:rgba(255,255,255,.6);font-variant-numeric:tabular-nums}
.pr-takt{
  margin:12px 0 0;padding-top:12px;
  border-top:1px solid rgba(255,255,255,.14);
  font-size:.86rem;color:rgba(255,255,255,.72);font-variant-numeric:tabular-nums;
}
.pr-zwi{
  margin:24px 0 12px;padding-top:20px;
  border-top:1px solid rgba(255,255,255,.16);
  font-size:.8rem;font-weight:600;color:rgba(255,255,255,.55);
}
.pr-liste{list-style:none;margin:0;padding:0;display:grid;gap:9px}
.pr-liste li{position:relative;padding-left:24px;font-size:.92rem;color:rgba(255,255,255,.78)}
.pr-liste li::before{
  content:"";position:absolute;left:0;top:.5em;
  width:9px;height:5px;border-left:1.8px solid #8FBEE4;border-bottom:1.8px solid #8FBEE4;
  transform:rotate(-45deg);
}
.pr-extra{margin:18px 0 22px;font-size:.86rem;line-height:1.55;color:rgba(255,255,255,.62)}
.pr-extra strong{color:rgba(255,255,255,.9);font-weight:600}
.pr-knopf{width:100%;justify-content:center;text-align:center;background:#fff;border-color:#fff;color:var(--head)}
.pr-knopf:hover{background:#E8F1FA;border-color:#E8F1FA;color:var(--head)}
.pr-fuss{margin:16px 0 0;font-size:.82rem;color:rgba(255,255,255,.5);line-height:1.5}

/* --- Preiskarte ueber dem Rechner: der Einstiegspreis auf einen Blick.
       Stand in der Vorlage im Hero; der GLANZMACHER-Hero bleibt, wie er
       ist, deshalb steht sie hier. --- */
.pr-karte{
  margin-top:34px;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(18px,3vw,40px);align-items:center;
  background:#fff;border:1px solid var(--kante);border-radius:var(--r);
  padding:clamp(20px,2.4vw,30px) clamp(22px,2.6vw,34px);
  box-shadow:var(--karte);
}
.pr-karte-lbl{display:block;font-size:.76rem;font-weight:650;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.pr-karte-preis{
  margin:8px 0 2px;font-size:clamp(1.6rem,3vw,2.2rem);font-weight:800;
  color:var(--head);letter-spacing:-.03em;line-height:1.1;
}
.pr-karte-preis em{font-style:normal;font-weight:600;font-size:.86rem;color:var(--muted);margin-left:8px;letter-spacing:0}
.pr-karte-sub{margin:0;font-size:.88rem;color:var(--muted)}
.pr-karte-liste{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.pr-karte-liste li{display:flex;gap:10px;align-items:flex-start;font-size:.95rem;color:var(--ink);line-height:1.45}
.pr-karte-liste svg{width:18px;height:18px;color:var(--blue);flex:none;margin-top:2px}

@media(max-width:900px){
  .pr-box{grid-template-columns:1fr}
  .pr-karte{grid-template-columns:1fr;gap:20px}
}
@media(max-width:420px){
  .pr-flaeche{grid-template-columns:1fr;gap:12px}
  .pr-zahl{justify-self:start}
}

/* Bildtext ohne Bild: einspaltig, mittig, in Lesebreite. Kommt vor, wenn
   kein Foto vorliegt, das zum Thema der Seite passt. */
.bt-ohne .bt-grid,
.bt-ohne .bt-grid.bt-links{grid-template-columns:minmax(0,1fr);justify-items:center}
.bt-ohne .bt-text{max-width:46rem;text-align:center}
.bt-ohne .bt-text h2{text-align:center}
.bt-ohne .bt-punkte{
  display:flex;flex-wrap:wrap;justify-content:center;gap:10px 26px;margin-top:24px;
}
.bt-ohne .bt-punkte li{font-size:.96rem}

/* === Google-Bewertung: der Weg vom Lesen zum Schreiben ================
   Steht nur auf der Bewertungsseite. Wer dort sechs Bewertungen liest
   und selbst Kunde ist, soll nicht suchen muessen.                    */
.bew-google{
  margin-top:38px;text-align:center;
  background:
    radial-gradient(70% 120% at 50% 10%,rgba(47,127,196,.3) 0%,rgba(47,127,196,0) 60%),
    linear-gradient(118deg,#111736 0%,#17204A 52%,#1D2B5E 100%);
  border-radius:var(--r);padding:30px 24px 26px;
}
.bew-google-txt{margin:0 0 16px;color:#fff;font-size:1.08rem;font-weight:600}
.bew-google .btn-weiss{
  display:inline-flex;align-items:center;gap:9px;
  background:#fff;color:var(--head);border:1px solid #fff;
  border-radius:999px;padding:13px 26px;font-weight:700;font-size:.98rem;
  transition:background .2s ease,transform .2s ease;
}
.bew-google .btn-weiss:hover{background:#E8F1FA;transform:translateY(-2px)}
.bew-google .btn-weiss svg{width:18px;height:18px;fill:#F5A623;stroke:#F5A623}
.bew-google-sub{margin:14px 0 0;color:#93A2BD;font-size:.86rem;line-height:1.5}

/* === Was vorher als style="..." im Markup stand =======================
   .prose-narrow ist der schmale Lesekopf ueber einem Kachelgitter. Er
   war auf jeder Seite einzeln per style-Attribut zentriert - 32 Mal
   dasselbe. Jetzt steht es einmal hier.
   Zentriert werden nur die drei Teile des Kopfes. Nicht der Kasten
   selbst: sonst erbt auch ein Kachelgitter darunter die Mitte.      */
.prose-narrow > .eyebrow,
.prose-narrow > h2,
.prose-narrow > h3{text-align:center}
.prose-narrow > .lead{text-align:center;max-width:640px;margin-left:auto;margin-right:auto}
/* Der Abstand zwischen Ueberschrift und Lead im schmalen Kopf. */
.prose-narrow > .lead{margin-top:12px}


/* === Bezirksliste =====================================================
   .near-list ist in buero.css und standort.css eine Reihe blauer
   Pillen, aber nur fuer <a>. Die Bezirke sind keine Links, weil es
   keine Bezirksseiten gibt. Ohne diese Regel standen sie als nackter
   Fliesstext ohne Trennung da.                                      */
.near-list span{
  background:var(--blue-soft);
  border:1px solid #cfe2f2;
  color:var(--blue);
  font-weight:600;
  font-size:.92rem;
  padding:10px 18px;
  border-radius:999px;
}


/* === Die blaue Handlungskachel ========================================
   .svc-cta ist in startseite.css blau mit weisser Schrift. Weiter oben
   bekommt .svc hier aber einen weissen Grund - gleiche Staerke, spaetere
   Datei, also gewinnt Weiss. Die weisse Schrift blieb und stand damit
   unsichtbar auf weissem Grund. Hier steht das Blau wieder, zusammen
   mit allem, was dazugehoert.                                        */
.svc-cta{
  background:linear-gradient(150deg,#3B8ED0,#2F78B4);
  border-color:transparent;
  color:#fff;
}
.svc-cta h3{color:#fff}
.svc-cta p{color:rgba(255,255,255,.92)}
.svc-cta .ic{background:rgba(255,255,255,.16)}
.svc-cta .ic svg{color:#fff}
.svc-cta .more,
.svc-cta .mehr{color:#fff}
.svc-cta:hover{border-color:transparent;box-shadow:0 18px 32px -14px rgba(47,120,180,.75)}


/* === Telefonknopf im Kopf: Reihenfolge ================================
   buero.css gibt dem Menuezeichen unter 920 px order:2 und
   margin-left:auto. Der Telefonknopf muss davor stehen, und beide
   sollen zusammen rechts sitzen statt auseinandergeschoben zu werden.
   Das Aussehen des Knopfes selbst steht in bausteine.css.          */
@media(max-width:920px){
  /* Die beiden Knoepfe stehen jetzt gemeinsam in .kopf-aktionen.
     buero.css gibt dem Menuezeichen noch order:2 und margin-left:auto
     - das gilt jetzt fuer den Kasten, nicht mehr fuer den Knopf. */
  header .wrap.nav > .kopf-aktionen{order:2;margin-left:auto}
  header .wrap.nav > .burger{order:unset;margin-left:0}
}


/* === Das aufgeklappte Menue am Telefon ================================
   buero.css klappt Navigation und Kontakt als schlichte Liste auf. Das
   funktioniert, sieht aber nach Behelf aus: nackte Zeilen, darunter ein
   grauer Kasten mit den Kontaktdaten. Hier bekommt es Ordnung -
   Trennlinien zwischen den Punkten, groessere Tippflaechen, und die
   Kontaktzeilen als Teil derselben Liste statt als Fremdkoerper.

   Die Selektoren tragen .wrap.nav, weil buero.css nach bausteine.css
   geladen wird und sonst gewinnen wuerde.                            */
@media(max-width:920px){

  header .wrap.nav .nav-links.is-offen,
  header .wrap.nav .nav-contact.is-offen{
    gap:0;
    margin-top:14px;
    padding-top:0;
    border-top:1px solid var(--line,#e5e9ee);
  }

  /* Jeder Punkt eine Zeile mit eigener Trennlinie darunter */
  header .wrap.nav .nav-links.is-offen a,
  header .wrap.nav .nav-contact.is-offen a{
    display:flex;align-items:center;gap:12px;
    width:100%;
    padding:15px 2px;
    font-size:1.04rem;font-weight:600;
    letter-spacing:0;text-transform:none;
    color:var(--head,#222a31);
    border-bottom:1px solid var(--line,#e5e9ee);
    -webkit-tap-highlight-color:transparent;
  }
  header .wrap.nav .nav-contact.is-offen a:last-child{border-bottom:0}

  /* Der Kontaktbereich hatte einen eigenen Rahmen - der faellt weg,
     damit Navigation und Kontakt eine Liste bilden. */
  header .wrap.nav .nav-contact.is-offen{
    border:0;margin-top:0;padding:0;border-radius:0;background:none;
  }
  header .wrap.nav .nav-contact.is-offen a{color:var(--blue,#3B8ED0)}
  header .wrap.nav .nav-contact.is-offen .ci{width:19px;height:19px;flex:none}

  /* Beim Antippen faerbt sich die Zeile kurz ein, damit der Griff
     sitzt - auf dem Telefon gibt es keinen Mauszeiger. */
  header .wrap.nav .nav-links.is-offen a:active,
  header .wrap.nav .nav-contact.is-offen a:active{
    background:var(--blue-soft,#EDF5FC);
  }

  /* Der Anfrage-Knopf schliesst das Menue ab. Er sieht aus wie die
     Knoepfe im Inhalt, damit klar ist: hier passiert etwas. */
  header .wrap.nav .nav-contact.is-offen .menue-cta{
    display:flex;justify-content:center;
    margin:14px 0 4px;
    padding:15px 20px;
    border:0;border-radius:14px;
    background:var(--blue,#3B8ED0);
    color:#fff;
    font-size:.98rem;font-weight:700;
    letter-spacing:.04em;text-transform:uppercase;
    box-shadow:0 10px 22px -12px rgba(47,120,180,.9);
  }
  header .wrap.nav .nav-contact.is-offen .menue-cta:active{
    background:var(--blue-d,#2f78b4);transform:scale(.985);
  }
}

/* Der Anfrage-Knopf gehoert nur ins aufgeklappte Menue. buero.css gibt
   jedem .nav-contact a ein display:flex - die Regel hier muss also
   mindestens so stark sein, sonst taucht der Knopf auf dem Desktop auf. */
header .nav-contact .menue-cta{display:none}


/* === Der Fuss ==========================================================
   Vier Spalten auf dem Desktop, eine am Telefon. Die Grundgestaltung
   setzt ueberall dieselben 20 px Zeilenabstand - das reicht zwischen
   zwei Links, aber nicht zwischen zwei Gruppen. Und unten bleiben
   20 px, was auf dem Telefon zu knapp wirkt.

   Hier bekommen die Abstaende Struktur: viel Luft zwischen den
   Gruppen, wenig innerhalb.                                          */

footer{padding-bottom:34px}

/* Zwischen den Spaltenueberschriften und ihren Links wenig Luft,
   zwischen den Gruppen viel. */
.foot-grid{row-gap:34px}

.foot-bottom{
  margin-top:44px;
  padding-top:22px;
  gap:14px 22px;
  line-height:1.65;
}

@media(max-width:820px){
  .foot-grid{row-gap:32px}
}

@media(max-width:520px){
  footer{padding-top:38px;padding-bottom:40px}
  /* Am Telefon steht jede Gruppe allein untereinander. Ohne mehr
     Abstand laufen sie zu einer langen Liste zusammen. */
  .foot-grid{row-gap:38px}
  .foot-bottom{
    margin-top:36px;
    flex-direction:column;
    align-items:flex-start;
    gap:12px;
  }
  /* Zwei Zeilen brechen sonst an haesslicher Stelle: "AGB" landet
     allein unter den anderen Rechtslinks, und der Stiftungsname
     wird mittendrin getrennt. Ein Link als eigener Block laesst
     sich nicht zerreissen. */
  .foot-bottom span{display:block;max-width:100%}
  .foot-bottom a{display:inline-block}
}


/* Auf sehr schmalen Geraeten (iPhone SE, 320 px) blieben zwischen Logo
   und den beiden Knoepfen nur 4 px. Das Logo wird dort kleiner, damit
   der Kopf Luft behaelt. 200 px Logo + 100 px Knoepfe + Raender passen
   erst ab etwa 380 px nebeneinander.                                 */
@media(max-width:400px){
  header .wrap.nav .brand img{max-width:165px}
}