@font-face{font-family:"Archivo";src:url("fonts/Archivo-latin.woff2") format("woff2");font-weight:100 900;font-style:normal;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Jakarta";src:url("fonts/PlusJakartaSans-latin.woff2") format("woff2");font-weight:200 800;font-style:normal;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Jakarta";src:url("fonts/PlusJakartaSans-latin-ext.woff2") format("woff2");font-weight:200 800;font-style:normal;font-display:swap;unicode-range:U+0100-02AF,U+0304,U+0308,U+0329,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Inter";src:url("fonts/Inter-latin.woff2") format("woff2");font-weight:100 900;font-style:normal;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Inter";src:url("fonts/Inter-latin-ext.woff2") format("woff2");font-weight:100 900;font-style:normal;font-display:swap;unicode-range:U+0100-02AF,U+0304,U+0308,U+0329,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}

:root{
  --coal:#0B2E58; --coal-d:#082444; --coal-dd:#05192F; --coal-card:#133E6D;
  --accent:#12569B; --accent-d:#0E4680; --accent-dd:#0A3560; --accent-lt:#5FA6E0;
  --gold:#F0C028;
  --bg:#FFFFFF; --paper:#F5F8FC; --paper2:#E8F0F8;
  --ink:#0A1F3A; --body:#46607C;
  --line:rgba(10,31,58,.14); --line2:rgba(10,31,58,.06);
  --on-dark:#E9F2FB; --on-dark-mut:rgba(233,242,251,.74);
  --maxw:1180px; --gut:clamp(16px,4.5vw,36px);
  --r:20px; --r-card:22px; --r-btn:999px;
  --disp:"Inter",ui-sans-serif,system-ui,"Segoe UI",sans-serif;
  --body-f:"Inter",ui-sans-serif,system-ui,"Segoe UI",sans-serif;
  --ease:cubic-bezier(.22,.61,.36,1);
  --shadow:0 26px 56px -34px rgba(10,31,58,.38);
  --shadow-sm:0 12px 28px -20px rgba(10,31,58,.32);
  --shadow-dark:0 26px 60px -32px rgba(5,25,47,.58);
  --head-h:74px;

  /* Aus dem Logo, neu hinzugekommen */
  --silver: #C3CCD6;
  --bronze: #8A5A24;
  --gold-d: #D3A315;
  --gold-lt: #FBE9A8;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--body);
  font-family:var(--body-f);font-size:16px;line-height:1.65;
  -webkit-font-smoothing:antialiased;padding-top:var(--util-h)}
img{max-width:100%;height:auto;display:block}
h1,h2,h3,h4,p,figure,ul,ol,blockquote,address{margin:0}
ul,ol{padding:0;list-style:none}
a{color:var(--accent-d);text-decoration-thickness:1px;text-underline-offset:2px}
button{font:inherit}
address{font-style:normal}
table{border-collapse:collapse}
/* overflow-wrap und hyphens: „Umzugsunternehmen" ist 17 Zeichen und passt
   bei 320 px in keine Überschriftenzeile — ohne Trennung ragt es über den
   Rand. Da das Dokument `lang="de"` trägt, trennt der Browser an echten
   Silbengrenzen. break-word ist der Notnagel darunter, falls kein
   Trennmuster geladen ist. */
h1,h2,h3,h4{font-family:var(--disp);color:var(--ink);line-height:1.1;
  letter-spacing:-.022em;text-wrap:balance;overflow-wrap:break-word;hyphens:auto}
@media(min-width:480px){
  /* Ab hier reicht die Zeilenbreite; Trennstriche in großen Überschriften
     wären dann nur unruhig. */
  h1,h2,h3,h4{hyphens:manual}
}
h1{font-size:clamp(1.85rem,5.2vw,3.4rem);font-weight:800;letter-spacing:-.03em}
h2{font-size:clamp(1.6rem,3.9vw,2.5rem);font-weight:800}
h3{font-size:1.12rem;font-weight:700}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:4px}
.section [id],.section,[id]{scroll-margin-top:calc(var(--head-h) + 14px)}
.skip{position:absolute;left:-9999px;top:0;z-index:120;background:var(--accent);color:#fff;
  padding:.8rem 1.2rem;border-radius:0 0 8px 0;font-weight:700}
.skip:focus{left:0}

.container{width:100%;max-width:var(--maxw);margin:0 auto;padding-inline:var(--gut)}
.container.narrow{max-width:820px}
.center{text-align:center}
.eb{display:block;font-family:var(--body-f);font-weight:700;text-transform:uppercase;
  letter-spacing:.15em;font-size:.72rem;color:var(--accent-d)}
.flour{display:block;color:var(--accent);margin-bottom:.5rem}
.flour svg{width:26px;height:17px;display:block}
.stars{display:inline-flex;gap:1px;color:var(--gold);flex:none}
.stars svg{width:14px;height:14px;display:block}

/* ── Kopfzeile ───────────────────────────────────── */
.site-head{position:fixed;inset:0 0 auto;z-index:60;background:var(--bg);border-bottom:1px solid var(--line2);
  transition:transform .35s var(--ease),box-shadow .3s}
.site-head.is-stuck{box-shadow:var(--shadow-sm)}
.site-head.is-hidden{transform:translateY(-100%)}
.topbar{display:flex;align-items:center;gap:1rem;min-height:var(--head-h)}
/* Das Logo ist freigestellt und auf den Schriftzug beschnitten (600×186,
   transparenter Grund). Vorher war es ein 1200×1200-Quadrat, das zu 94 % aus
   weißer Fläche bestand — daraus kam der overflow-Container mit negativem
   Margin, und im dunklen Fußbereich ein weißer Kasten. Jetzt reicht eine Breite. */
.brand{flex:none;line-height:0}
.brand img{width:clamp(148px,34vw,208px);height:auto;display:block}
/* Ab Tablet darf die Marke atmen — auf dem Telefon hat die Rufnummer Vorrang. */
@media(min-width:860px){.brand img{width:212px}}
.nav{display:none}
.head-cta{display:none}
.burger{margin-left:auto;display:grid;place-items:center;width:44px;height:44px;
  background:none;border:1px solid var(--line);border-radius:9px;color:var(--ink);cursor:pointer}
.burger svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round}
.head-wa{display:none}
/* Die Abstaende im Kopf sind fluid, nicht fest. Der WhatsApp-Knopf kostet
   rund 46 px; bei 1000 px Fenster waren vorher nur etwa 20 px frei. Statt
   den Knopf erst spaeter einzublenden, ruecken Navigation und CTA auf
   schmalen Desktops enger zusammen und gehen ab rund 1550 px wieder auf
   die alten Werte. Das spart genau die Breite, die der Knopf braucht. */
@media(min-width:1000px){
  .nav{display:flex;gap:clamp(.9rem,1.6vw,1.55rem);margin-left:auto}
  .nav__link{color:var(--ink);text-decoration:none;font-size:.9rem;font-weight:500;
    padding:.35rem 0;border-bottom:2px solid transparent;transition:.2s}
  .nav__link:hover,.nav__link.is-active{color:var(--accent-d);border-bottom-color:var(--accent)}
  .head-cta{display:flex;align-items:center;gap:clamp(.55rem,1vw,.85rem);
    margin-left:clamp(.9rem,1.6vw,1.6rem)}
  .head-tel{display:inline-flex;align-items:center;gap:.4rem;color:var(--ink);
    text-decoration:none;font-size:.86rem;font-weight:600;white-space:nowrap}
  .head-tel svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.7;
    stroke-linecap:round;stroke-linejoin:round;color:var(--accent)}
  .head-wa{display:grid;place-items:center;flex:none;width:38px;height:38px;
    border-radius:50%;background:#25D366;color:#0B3D24;text-decoration:none;
    box-shadow:0 1px 3px rgba(11,61,36,.28);transition:transform .2s var(--ease),
    box-shadow .2s,background .2s}
  .head-wa svg{width:21px;height:21px;fill:currentColor;stroke:none;display:block}
  .head-wa:hover{background:#1FBE5A;transform:translateY(-1px);
    box-shadow:0 4px 10px rgba(11,61,36,.3)}
  .head-wa:focus-visible{outline:2px solid var(--accent-d);outline-offset:3px}
  .burger{display:none}
}

/* ── Buttons ─────────────────────────────────────── */
.btn{position:relative;overflow:hidden;display:inline-flex;align-items:center;
  justify-content:center;gap:.5rem;min-height:46px;padding:.85rem 1.4rem;
  font-family:var(--body-f);font-weight:700;font-size:.9rem;line-height:1.2;
  border:0;border-radius:var(--r-btn);cursor:pointer;text-decoration:none;text-align:center}
.btn>span{position:relative;z-index:1}
.btn--pri{background:var(--accent);color:#fff;box-shadow:0 14px 26px -16px rgba(18,86,155,.75)}
.btn--pri::before{content:"";position:absolute;inset:0;background:var(--accent-dd);
  transform:translateY(101%);transition:transform .4s var(--ease)}
.btn--pri:hover::before,.btn--pri:focus-visible::before{transform:translateY(0)}
.btn--gh{background:transparent;color:var(--ink);border:1.5px solid var(--line);transition:.25s}
.btn--gh:hover{border-color:var(--accent);color:var(--accent-d)}
.btn--ghd{background:transparent;color:#fff;border:1.5px solid rgba(255,255,255,.45);transition:.25s}
.btn--ghd:hover{border-color:#fff;background:rgba(255,255,255,.1)}
.btn--wide{width:100%}
.btn--sm{min-height:40px;padding:.6rem 1.05rem;font-size:.82rem}
.btn--lg{min-height:56px;padding:1rem 1.7rem;font-size:.96rem}
.linkish{background:none;border:0;padding:0;color:inherit;cursor:pointer;
  text-decoration:underline;text-underline-offset:2px;font-size:inherit}

/* ── Menü-Schublade ──────────────────────────────── */
.drawer{position:fixed;inset:0;z-index:90;background:var(--coal-dd);color:var(--on-dark);
  overflow-y:auto;-webkit-overflow-scrolling:touch;display:flex;flex-direction:column}
.drawer[hidden]{display:none}
.drawer__head{display:flex;align-items:center;justify-content:space-between;
  padding:1.1rem var(--gut);border-bottom:1px solid rgba(255,255,255,.12)}
.drawer__brand{font-family:var(--disp);font-weight:800;color:#fff}
.drawer__close{width:44px;height:44px;display:grid;place-items:center;background:none;
  border:1px solid rgba(255,255,255,.25);border-radius:9px;color:#fff;cursor:pointer}
.drawer__close svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round}
.drawer__cta{display:grid;gap:.6rem;padding:1.1rem var(--gut)}
.drawer__cta .btn--gh{color:#fff;border-color:rgba(255,255,255,.4)}
.drawer__nav{padding:0 var(--gut) 1.4rem}
.drawer__lbl{font-size:.68rem;font-weight:700;text-transform:uppercase;letter-spacing:.16em;
  color:var(--accent-lt);margin:1.5rem 0 .5rem}
.drawer__nav a{display:flex;align-items:center;justify-content:space-between;gap:1rem;
  padding:.78rem 0;color:#fff;text-decoration:none;font-size:1.02rem;font-weight:500;
  border-bottom:1px solid rgba(255,255,255,.09)}
.drawer__nav a svg{width:17px;height:17px;flex:none;fill:none;stroke:currentColor;
  stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;opacity:.45}
.drawer__all{color:var(--accent-lt)!important}
.drawer__foot{margin-top:auto;padding:1.2rem var(--gut) 2rem;
  border-top:1px solid rgba(255,255,255,.12);font-size:.84rem;color:var(--on-dark-mut)}
.drawer__foot a{color:var(--on-dark-mut)}

/* ── Mobile Aktionsleiste ────────────────────────── */
.mbar{position:fixed;left:0;right:0;bottom:0;z-index:65;display:grid;
  grid-template-columns:1fr 1.35fr;gap:.5rem;padding:.5rem calc(var(--gut)/1.6)
  calc(.5rem + env(safe-area-inset-bottom,0px));
  background:rgba(245,248,252,.95);
  border-top:1px solid var(--line);transform:translateY(120%);transition:transform .32s var(--ease)}
html.scrolled .mbar{transform:translateY(0)}
.mbar.is-hidden{transform:translateY(120%)}
.mbar a{display:flex;align-items:center;justify-content:center;gap:.45rem;min-height:46px;
  border-radius:var(--r-btn);text-decoration:none;font-weight:700;font-size:.85rem}
.mbar svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.7;
  stroke-linecap:round;stroke-linejoin:round}
/* Mit WhatsApp sind es drei Wege. Der mittlere darf schmal bleiben — sein
   Symbol trägt die Erkennung, der Text ist nur Beschriftung. */
.mbar--drei{grid-template-columns:1fr 1fr 1.2fr;gap:.4rem}
.mbar__w{background:#25D366;color:#0B3D24}
.mbar__w svg{fill:currentColor;stroke:none;width:18px;height:18px}
@media(max-width:359px){
  /* Auf sehr schmalen Geräten bleibt für drei Beschriftungen kein Platz.
     Das WhatsApp-Symbol ist bekannt genug, um allein zu stehen. */
  .mbar--drei{grid-template-columns:1fr auto 1.1fr}
  .mbar__w span{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
  .mbar__w{padding-inline:.9rem}
}
.mbar__a{border:1.5px solid var(--line);color:var(--ink)}
.mbar__b{background:var(--accent);color:#fff}
@media(min-width:1000px){.mbar{display:none}}

/* ── Sektionen ───────────────────────────────────── */
.section{padding:clamp(48px,7vw,86px) 0}
.section--tight{padding:clamp(26px,4vw,42px) 0}
.section--top{padding-top:clamp(6.5rem,10vw,8.5rem)}
.section--paper{background:var(--paper)}
.section--paper2{background:var(--paper2)}
.section--dark{background:var(--coal);color:var(--on-dark)}
.section--dark h2,.section--dark h3,.section--dark h4{color:#fff}
.section--dark .eb{color:var(--accent-lt)}
.section--dark p{color:var(--on-dark-mut)}
.section__more{margin-top:clamp(24px,3.5vw,38px);text-align:center}

.sechd{max-width:56ch;margin-bottom:clamp(26px,3.8vw,42px)}
.sechd--center{margin-inline:auto;text-align:center}
.sechd--center .flour svg{margin-inline:auto}
.sechd h2{margin-top:.42rem}
.sechd__sub{margin-top:.85rem;font-size:.98rem}

.prose p{margin-bottom:1.05rem;font-size:1rem}
.prose p:last-child{margin-bottom:0}
.note{margin-top:1.2rem;font-size:.9rem;color:var(--body)}
.note--center{text-align:center}
.warnbox{display:grid;gap:.3rem;padding:1.1rem 1.25rem;margin-bottom:1.6rem;
  border:1px solid var(--line);border-left:3px solid var(--gold);border-radius:0 10px 10px 0;
  background:#fff;font-size:.92rem}
.warnbox b{color:var(--ink)}

/* ── Hero ────────────────────────────────────────── */
/* overflow-x:clip, weil die Bildbühne rechts absichtlich über den Container
   hinausläuft. clip statt hidden: hidden würde einen Scroll-Container
   erzeugen und das scroll-margin-top der Sprungmarken aushebeln. */
.hero{background:var(--paper);padding:clamp(28px,5vw,58px) 0 clamp(64px,8vw,94px);
  overflow-x:clip}
.hero__in{display:grid;gap:clamp(28px,4.5vw,54px)}
@media(min-width:960px){.hero__in{grid-template-columns:1.02fr .98fr;align-items:center}}

/* Google-Abzeichen: Zeichen, fünf Sterne, ein Wort. Die Bewertungszahl steht
   weiter unten im Abschnitt Kundenerfahrungen — hier zählt die Herkunft. */
.grate{display:inline-flex;align-items:center;gap:.5rem;padding:.44rem .55rem .44rem .6rem;
  background:#fff;border:1px solid var(--line);border-radius:999px;
  text-decoration:none;color:var(--body);box-shadow:var(--shadow-sm);
  transition:border-color .2s var(--ease),box-shadow .2s var(--ease),transform .2s var(--ease)}
.grate:hover{border-color:rgba(10,31,58,.26);transform:translateY(-1px);
  box-shadow:0 14px 30px -20px rgba(10,31,58,.42)}
.grate__g{display:block;flex:none}
.grate__st{display:inline-flex;gap:1.5px;color:#FBBC04}
.grate__st svg{width:15px;height:15px;display:block}
.grate__lbl{font-size:.74rem;font-weight:600;letter-spacing:.02em;color:var(--body);
  padding-right:.25rem}

.hero .eb{margin:1.2rem 0 .7rem}
/* Kein `hyphens:auto` hier: Die Zeile erbt es von der h1, in der sie steckt,
   und trennte dann „kosten-los" — ein Trennstrich in einem Achtbuchstaben-
   Wort sieht nach Fehler aus, nicht nach Typografie. Die Regel greift dort,
   wo sie gebraucht wird: in der Überschrift selbst. */
.hero__soft{display:block;font-family:var(--body-f);font-weight:400;color:var(--body);
  font-size:.4em;line-height:1.35;letter-spacing:0;margin-top:.75rem;max-width:26ch;
  hyphens:manual}
.hero__sub{margin-top:1.1rem;max-width:48ch;font-size:1rem}
.hero__sub--2{margin-top:.7rem}
@media(max-width:759px){
  /* Auf dem Telefon zählt Ruhe mehr als Fülle: kürzere Zeilen, mehr Luft
     zwischen den Blöcken, und der zweite Absatz tritt eine Stufe zurück. */
  .hero__sub{font-size:.95rem;line-height:1.6;max-width:38ch}
  .hero__sub--2{font-size:.9rem;opacity:.86}
  .hero--vid .hero__bul{gap:.7rem 1.2rem;margin-top:1.5rem}
  .hero--vid .hero__soft{font-size:.46em;margin-top:.6rem}
}
.hero__bul{display:flex;flex-wrap:wrap;gap:.55rem 1.5rem;margin-top:1.3rem;font-size:.88rem}
.hero__bul li{display:flex;align-items:center;gap:.45rem}
.hero__bul svg{width:16px;height:16px;flex:none;fill:none;stroke:var(--accent);
  stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.hero__cta{display:flex;flex-wrap:wrap;gap:.7rem;margin-top:1.7rem}
.hero__cta.center{justify-content:center}

/* Telefonweg als Zeile statt als zweite Schaltfläche. */
.hero__tel{display:flex;flex-wrap:wrap;align-items:baseline;gap:.35rem .7rem;
  margin-top:1.6rem;padding-top:1.3rem;border-top:1px solid var(--line2);font-size:.9rem}
.hero__tel a{display:inline-flex;align-items:center;gap:.4rem;color:var(--ink);
  text-decoration:none;border-bottom:1.5px solid rgba(18,86,155,.35);padding-bottom:1px;
  transition:border-color .2s var(--ease)}
.hero__tel a:hover{border-bottom-color:var(--accent)}
.hero__tel a b{font-family:var(--disp);font-weight:800;font-size:1.06rem;letter-spacing:-.01em}
.hero__tel svg{width:15px;height:15px;flex:none;color:var(--accent)}
.hero__tel span{font-size:.8rem;color:var(--body)}

/* Bildbühne: zwei echte Fotos statt einer erfundenen Szene. Oben die Arbeit,
   unten der Ort. Die Tonfläche dahinter läuft nach rechts aus dem Container
   und wird vom overflow-x:clip der Section gekappt. */
.hero__art{position:relative;padding-bottom:clamp(30px,4vw,44px)}
/* Sockel: schaut nur unten und rechts unter dem Bildpaar hervor und gibt der
   Collage einen Boden. Der Überstand nach rechts endet am clip der Section. */
.hero__art::before{content:"";position:absolute;z-index:0;
  top:auto;height:58%;left:clamp(30px,7vw,72px);right:-50vw;bottom:0;
  background:var(--paper2);border-radius:var(--r-card) 0 0 var(--r-card)}
.hero__main{position:relative;z-index:1}
.hero__main img{width:100%;aspect-ratio:16/11;object-fit:cover;object-position:56% 44%;
  border-radius:var(--r-card);box-shadow:var(--shadow)}
.hero__sub2{position:relative;z-index:2;width:min(60%,286px);
  margin:-13% 0 0 clamp(-16px,-2.4vw,-8px)}
.hero__sub2 img{width:100%;aspect-ratio:16/9;object-fit:cover;object-position:50% 58%;
  border-radius:12px;border:5px solid #fff;box-shadow:var(--shadow-sm)}
.hero__sub2 figcaption{margin:.5rem 0 0 5px;font-size:.72rem;letter-spacing:.03em;
  color:var(--body)}
@media(min-width:960px){
  .hero__main img{aspect-ratio:4/3}
  .hero__sub2{width:min(56%,252px);margin-top:-16%}
}

/* ── Hero mit Video ──────────────────────────────────────────────
   Eine eigene Ausprägung des Hero, kein zweiter Hero. Die Textspalte
   darunter ist dieselbe wie in der Bildfassung; nur die Bühne wechselt
   vom Bildpaar zum laufenden Hintergrund.

   Das Poster liegt als background-image auf der Bühne, nicht nur am
   <video>: So steht das Bild auch dann, wenn das Video gar nicht
   geladen wird — und das ist der Normalfall auf Telefon und bei
   abbestellter Bewegung. */
.hero--vid{position:relative;background:var(--coal);color:var(--on-dark);
  padding:0;overflow:hidden;isolation:isolate}
.hero__stage{position:absolute;inset:0;z-index:-2;
  background:var(--coal) center/cover no-repeat}
.hero__stage video{width:100%;height:100%;object-fit:cover;object-position:72% 50%;
  opacity:0;transition:opacity .9s var(--ease)}
.hero__stage video.is-live{opacity:1}
/* Der Schleier hält die Schrift lesbar, während das Bild durch Tag,
   Nacht und Schnee läuft. Nach links dicht, nach rechts offen — dort
   fährt der Wagen. Auf Kohle gemessen, nicht geschätzt. */
.hero__veil{position:absolute;inset:0;z-index:-1;
  background:linear-gradient(96deg,rgba(5,25,47,.93) 0%,rgba(5,25,47,.86) 30%,
    rgba(5,25,47,.62) 54%,rgba(5,25,47,.28) 74%,rgba(5,25,47,.12) 100%)}
@media(max-width:759px){
  /* Auf dem Telefon steht das Video NICHT formatfüllend, sondern in voller
     Breite als Streifen: `contain` statt `cover`.
     Der Grund ist Geometrie. Ein 16:9-Film in einem hochkant stehenden Hero
     wird von `cover` auf etwa ein Drittel seiner Breite beschnitten — vom
     Wagen im rechten Bilddrittel bleibt dann bestenfalls ein Rad übrig, und
     man sieht eine anonyme Hauswand. Als Streifen bleibt das ganze Bild
     erhalten: der Wagen fährt sichtbar durch, die Zonen wechseln erkennbar.
     Der Streifen sitzt im unteren Drittel, wo der Text am dünnsten steht. */
  /* Die Bühne bekommt eine FESTE Höhe statt der vollen Herohöhe. Warum das
     nötig ist: Mit Text und Formular ist der Hero auf dem Telefon rund
     1390 px hoch. Ein `contain`-Video in einer so hohen Box wird auf die
     Breite skaliert — 390 × 219 px — und sitzt dann irgendwo in dieser
     Höhe; bei 76 % lag es fast 1000 px unter der Oberkante und damit weit
     außerhalb des ersten Bildschirms. Sichtbar war: nichts.
     In einer 320 px hohen Box füllt derselbe Streifen die Breite und steht
     dort, wo man ihn beim Laden sieht. */
  .hero__stage{bottom:auto;height:min(42vh,320px);
    background-size:contain;background-position:center;
    background-color:var(--coal)}
  .hero__stage video{object-fit:contain;object-position:center}
  /* Über dem Streifen bleibt der Schleier dünn, darunter wird er dicht:
     Dort steht der Text auf ruhigem Grund. */
  .hero__veil{background:linear-gradient(180deg,rgba(5,25,47,.2) 0%,
    rgba(5,25,47,.34) 20%,rgba(5,25,47,.66) 32%,
    rgba(5,25,47,.9) 46%,rgba(5,25,47,.94) 100%)}
  /* Der Text beginnt knapp im Streifen und läuft darunter weiter. */
  .hero--vid .hero__in{padding-top:calc(min(42vh,320px) - 76px)}
  /* Damit der Verlauf dünn bleiben darf, trägt die Schrift ihren eigenen
     Schattensaum — zwei Ebenen: ein enger für die Kante, ein weiter für
     den Grund darunter. */
  .hero--vid h1,.hero--vid .hero__sub,.hero--vid .hero__bul,
  .hero--vid .hero__tel,.hero--vid .eb{
    text-shadow:0 1px 14px rgba(5,25,47,.55)}
  .hero--vid .hero__bul svg{filter:drop-shadow(0 1px 6px rgba(5,25,47,.5))}
}
/* Unten so viel Luft, dass die überlappende Angebotsleiste die Telefonzeile
   nicht schluckt — sie ragt bis zu 78 px in den Hero hinein.
   `padding-block`, NICHT die Kurzform `padding`: Die hätte den seitlichen
   Abstand auf 0 gesetzt und damit den der `.container`-Klasse überschrieben.
   Auf dem Desktop fiel das nicht auf, weil der Container ohnehin zentriert
   steht — auf dem Telefon klebte die Überschrift am Bildschirmrand. */
.hero--vid .hero__in{grid-template-columns:1fr;align-items:center;
  min-height:min(86vh,800px);
  padding-block:clamp(90px,12vw,130px) clamp(96px,11vw,130px)}
@media(min-width:960px){
  .hero--vid .hero__in{grid-template-columns:minmax(0,660px)}
}
/* min-width:0 — der Grid-Fallstrick: Rasterkinder haben `min-width:auto`
   und schrumpfen deshalb NICHT unter die Breite ihres längsten Wortes.
   „Umzugsunternehmen" braucht bei 320 px mehr Platz als die Spalte hat,
   also wuchs die Spalte über den Bildschirm hinaus statt das Wort zu
   trennen. Gemessen: 15 px Überhang rechts. */
.hero--vid .hero__copy{max-width:660px;min-width:0}
.hero--vid .hero__form{min-width:0}
.hero--vid h1{color:#fff}
.hero--vid .hero__soft{color:rgba(233,242,251,.86)}
.hero--vid .hero__sub{color:var(--on-dark-mut)}
.hero--vid .eb{color:var(--accent-lt)}
.hero--vid .hero__bul{color:rgba(233,242,251,.92)}
.hero--vid .hero__tel{border-top-color:rgba(233,242,251,.2);color:var(--on-dark-mut)}
.hero--vid .hero__tel a{color:#fff;border-bottom-color:rgba(18,86,155,.7)}
.hero--vid .hero__tel span{color:var(--on-dark-mut)}
.hero--vid .grate{box-shadow:0 14px 34px -18px rgba(0,0,0,.6)}
/* ── Hero mit Formular ───────────────────────────────────────────
   Das Formular steht als Karte IM Hero, nicht darunter: Es ist der
   einzige Handlungsweg im ersten Bildschirm, und dort gehört es hin.
   Im Markup kommt der Text zuerst (h1 an den Dokumentanfang), die CSS
   schiebt das Formular nach links — aber erst ab 1040 px, wo zwei
   Spalten nebeneinander wirklich Platz haben. */
.hero--form .qbar{background:none;padding:0;margin:0}
.hero--form .qbar .container{padding:0;max-width:none}
.hero--form .qbar__in{box-shadow:0 40px 80px -40px rgba(10,7,6,.75),
  0 2px 0 0 var(--accent) inset}
.hero__form{width:100%}
@media(min-width:1040px){
  /* Text links, Formular rechts — in Dokumentreihenfolge, ohne `order`.
     (Ein früherer Versuch drehte die Spalten per `order` um; das
     verschiebt beim Grid auch die Spaltenzuweisung, worauf der Text die
     schmale Spalte bekam und die Überschrift mitten im Wort brach.) */
  .hero--form .hero__in{grid-template-columns:minmax(0,1fr) minmax(370px,410px);
    gap:clamp(32px,4vw,64px);align-items:center}
  .hero--form .hero__copy{max-width:620px}
  .hero--form .qbar__row{grid-template-columns:1fr 1fr;gap:.6rem}
}
@media(max-width:1039px){
  /* Gestapelt: erst der Text, dann das Formular — in genau der
     Reihenfolge, in der man liest. */
  .hero--form .hero__form{margin-top:clamp(26px,4vw,38px)}
  .hero--form .qbar__row{grid-template-columns:1fr}
}
@media(min-width:640px) and (max-width:1039px){
  .hero--form .qbar__row{grid-template-columns:1fr 1fr}
}

/* ── Angebotsleiste ──────────────────────────────────────────────
   Der einzige Handlungsweg im ersten Bildschirm — und lange der
   unauffälligste: weiße Karte auf hellem Grund, Felder ohne Rahmen.
   Drei Hebel dagegen: sie liegt jetzt auf der Kante zwischen dunklem
   Hero und hellem Grund statt darunter, sie sagt in einer Zeile, was
   sie ist, und ihre Felder sehen aus wie Felder. */
.qbar{background:var(--paper);padding-bottom:clamp(18px,3vw,26px);position:relative;z-index:3}
.qbar__in{display:grid;gap:.9rem;padding:1.05rem 1.1rem 1.15rem;background:#fff;
  border:1px solid var(--line);border-radius:var(--r-card);
  box-shadow:0 30px 60px -30px rgba(10,31,58,.5),0 2px 0 0 var(--accent) inset}
.qbar__hd{display:flex;align-items:center;gap:.7rem}
.qbar__ico{flex:none;display:grid;place-items:center;width:40px;height:40px;border-radius:12px;
  background:rgba(18,86,155,.1);color:var(--accent-d)}
.qbar__ico svg{width:22px;height:22px;fill:currentColor}
.qbar__t{display:grid;gap:.05rem;line-height:1.35}
.qbar__t b{font-family:var(--disp);font-size:1.02rem;color:var(--ink);letter-spacing:-.01em}
.qbar__t span{font-size:.85rem;color:var(--body)}
.qbar__row{display:grid;gap:.6rem}
.qbar__in>.btn{margin-top:.2rem}
.consent--sm{font-size:.78rem;line-height:1.45;color:var(--body)}
.consent--sm b{color:var(--accent)}
@media(min-width:900px){
  /* Überlappung: Die Karte schneidet in den Hero hinein. Auf der dunklen
     Kante steht sie frei — das ist der Kontrast, der ihr vorher fehlte.
     Gilt nur für die Bildfassung; im Video-Hero sitzt die Karte drin. */
  .hero:not(.hero--form) + .qbar{margin-top:calc(-1 * clamp(52px,6vw,78px));background:none}
  .qbar__row{grid-template-columns:1fr 1fr;align-items:end;gap:.5rem}
}
/* grid-template-rows + align-self:end halten die Eingabezeilen zweier
   nebeneinander stehender Felder auf einer Linie, auch wenn ein Label
   umbricht und das andere nicht. Ohne das rutscht das Feld mit dem
   längeren Label nach unten und die Karte steht schief. */
.qf{display:grid;grid-template-rows:auto 1fr;gap:.28rem;padding:.55rem .8rem;background:var(--paper);
  border:1px solid var(--line2);border-radius:10px;
  transition:border-color .2s var(--ease),box-shadow .2s var(--ease),background .2s}
.qf:focus-within{background:#fff;border-color:var(--accent);
  box-shadow:0 0 0 3px rgba(18,86,155,.14)}
.qf__k{font-size:.66rem;font-weight:700;text-transform:uppercase;letter-spacing:.13em;color:var(--body)}
/* „optional“ steht kleiner und ohne Versalien neben dem Feldnamen — das
   Gegenstück zum roten Stern, damit man beides auf einen Blick trennt. */
.qf__k i{font-style:normal;font-weight:600;text-transform:none;letter-spacing:0;
  font-size:.72rem;color:#8FA3B8}
.qf input,.qf textarea{width:100%;align-self:end;border:0;background:none;font:400 16px/1.4 var(--body-f);color:var(--ink);padding:.15rem 0}
.qf input:focus,.qf textarea:focus{outline:0}
.qf input::placeholder,.qf textarea::placeholder{color:#8FA3B8}
.qf textarea{line-height:1.45;resize:vertical;min-height:62px}
/* E-Mail und Anliegen laufen über beide Spalten — nebeneinander wäre das
   Textfeld so schmal, dass der Beispielsatz darin nicht lesbar bleibt. */
.qf--full{grid-column:1/-1}
.qbar .lead-msg{grid-column:1/-1}
@media(max-width:899px){.qbar__row .btn{width:100%;margin-top:.15rem}}

/* ── Formulare ───────────────────────────────────── */
.a2lead-form{display:grid;gap:.85rem}
.fld-row{display:grid;gap:.85rem}
@media(min-width:560px){.fld-row{grid-template-columns:1fr 1fr}}
.fld{display:grid;gap:.32rem}
.fld>span{font-size:.83rem;font-weight:600;color:var(--ink)}
.fld>span b{color:var(--accent)}
.fld>span i{font-style:normal;font-weight:500;font-size:.78rem;color:#8FA3B8}
.fld input,.fld textarea{width:100%;font:400 16px/1.45 var(--body-f);color:var(--ink);
  background:#fff;border:1px solid var(--line);border-radius:10px;padding:.8rem .9rem;
  transition:border-color .2s,box-shadow .2s}
.fld input:focus,.fld textarea:focus{outline:0;border-color:var(--accent);
  box-shadow:0 0 0 3px rgba(18,86,155,.16)}
.fld textarea{resize:vertical;min-height:104px}
.fld input::placeholder,.fld textarea::placeholder{color:#8FA3B8}
.consent{display:flex;gap:.6rem;font-size:.83rem;line-height:1.5}
.consent input{width:18px;height:18px;flex:none;margin-top:2px;accent-color:var(--accent)}
.consent b{color:var(--accent)}
.fld-note{font-size:.78rem;color:var(--body)}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.lead-msg{font-size:.88rem;font-weight:600;min-height:0}
.lead-msg.is-ok{color:#1F7A44}
.lead-msg.is-err{color:var(--accent-dd)}
.formcard{background:#fff;border:1px solid var(--line);border-radius:var(--r-card);
  padding:clamp(20px,3.4vw,34px);box-shadow:var(--shadow)}
/* Anfrageseite: Text und Formular nebeneinander.
   Mobil untereinander — der Text erklärt, warum das Formular so kurz ist,
   und muss deshalb zuerst kommen. Kein `order`: die Spaltenreihenfolge
   steht schon im Dokument, und `order` verschiebt bei Grid auch die
   Spaltenzuweisung. */
.afq-lead{background:var(--paper);padding:clamp(26px,6vw,52px) 0 clamp(46px,7vw,80px)}
.afq-grid{display:grid;gap:clamp(26px,4vw,46px);align-items:start}
.afq-copy{min-width:0}
.afq-col{min-width:0}
@media(min-width:960px){
  .afq-grid{grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);
    gap:clamp(38px,5vw,72px)}
  /* Klebt beim Scrollen mit, solange rechts noch Formular übrig ist. */
  .afq-copy{position:sticky;top:calc(var(--head-h) + 26px)}
}
.afq-pt{list-style:none;display:grid;gap:.9rem;margin:clamp(20px,3vw,30px) 0 0;padding:0}
.afq-pt li{display:grid;grid-template-columns:auto minmax(0,1fr);gap:.7rem;align-items:start}
.afq-pt__ico{display:grid;place-items:center;width:26px;height:26px;flex:none;
  border-radius:8px;background:rgba(18,86,155,.11);color:var(--accent)}
.afq-pt__ico svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:2.4;
  stroke-linecap:round;stroke-linejoin:round}
.afq-pt__k{font-size:.92rem;color:var(--body);line-height:1.5}
.afq-pt__k b{display:block;color:var(--ink);font-weight:600;margin-bottom:.1rem}

/* ── Vertrauensleiste ────────────────────────────── */
.trust{display:grid;gap:1.1rem}
@media(min-width:640px){.trust{grid-template-columns:1fr 1fr}}
@media(min-width:1000px){.trust{grid-template-columns:repeat(4,1fr)}}
.trust li{display:grid;gap:.25rem}
.trust b{font-family:var(--disp);font-size:1rem;color:var(--ink)}
.trust span:last-child{font-size:.86rem}
/* Vollflächig statt blass getönt: die Leiste war der einzige Farbakzent auf
   halben Seiten und ging als hellrosa Kästchen unter. Der versetzte Schatten
   ohne Weichzeichnung gibt den Aufkleber-Charakter, ohne albern zu werden. */
.trust__ico{width:46px;height:46px;display:grid;place-items:center;border-radius:14px;
  background:var(--accent);color:#fff;margin-bottom:.55rem;
  box-shadow:3px 3px 0 rgba(10,53,96,.28);transition:transform .3s var(--ease)}
.trust__ico svg{width:23px;height:23px;fill:none;stroke:currentColor;stroke-width:2.1;
  stroke-linecap:round;stroke-linejoin:round}
.trust li:hover .trust__ico{transform:translateY(-3px) rotate(-4deg)}
/* Auf dunklem Grund trägt die Akzentfläche nicht — dort heller Rahmen. */
.section--dark .trust__ico{box-shadow:3px 3px 0 rgba(0,0,0,.35)}

/* ── Split ───────────────────────────────────────── */
.split{display:grid;gap:clamp(26px,4.5vw,54px);align-items:center}
@media(min-width:920px){.split{grid-template-columns:1fr 1fr}
  .split--rev .split__body{order:-1}}
.split__media{position:relative;padding:16px 18px 0 0}
.split__media img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:var(--r)}
.split__body h2{margin-top:.4rem}
.split__body>p{margin-top:1rem}
.split__cta{margin-top:1.6rem}
.badge{position:absolute;right:-2px;top:-6px;width:clamp(96px,13vw,128px);aspect-ratio:1;
  border-radius:50%;background:var(--gold);color:#0B2E58;display:grid;place-items:center;
  text-align:center;box-shadow:var(--shadow-sm);line-height:1.15}
.badge b{display:block;font-family:var(--disp);font-weight:800;font-size:clamp(1.5rem,3vw,2rem)}
.badge small{display:block;font-weight:700;text-transform:uppercase;letter-spacing:.05em;font-size:.56rem}

/* ── Listen ──────────────────────────────────────── */
.checks,.crosses{display:grid;gap:.8rem;margin-top:1.3rem}
.checks li,.crosses li{display:flex;gap:.75rem;font-size:.95rem}
.checks b,.crosses b{color:var(--ink)}
.checks svg,.crosses svg{width:20px;height:20px;flex:none;margin-top:2px;fill:none;
  stroke-width:2.3;stroke-linecap:round;stroke-linejoin:round}
.checks svg{stroke:var(--accent)}
.crosses svg{stroke:#8296AC}
.section--dark .checks b{color:#fff}
.rellist{display:grid;gap:.6rem}
.rellist a{display:block;padding:.9rem 1.1rem;background:#fff;border:1px solid var(--line);
  border-radius:12px;color:var(--ink);text-decoration:none;font-weight:600;transition:.25s}
.rellist a:hover{border-color:var(--accent);color:var(--accent-d)}

/* ── Schritte ────────────────────────────────────── */
.steps{display:grid;gap:1.6rem;counter-reset:none}
@media(min-width:700px){.steps{grid-template-columns:repeat(4,1fr);gap:1.2rem}
  .steps--2{grid-template-columns:repeat(3,1fr)}}
.step{position:relative}
.step__n{display:grid;place-items:center;width:44px;height:44px;border-radius:50%;
  background:var(--accent);color:#fff;font-family:var(--disp);font-weight:800;
  font-size:1.05rem;margin-bottom:.9rem}
.step h3{margin-bottom:.4rem}
.step p{font-size:.9rem}
.mini-steps{display:grid;gap:.9rem;margin:1.4rem 0}
.mini-steps .step__n{width:32px;height:32px;font-size:.85rem;margin-bottom:.4rem}
.mini-steps h3{font-size:.95rem}
.mini-steps p{font-size:.85rem}

/* ── Bewertungen ─────────────────────────────────── */
.tsts{display:grid;gap:1rem;align-items:start}
@media(min-width:900px){.tsts{grid-template-columns:repeat(3,1fr)}}
.tst{background:#fff;border:1px solid var(--line);border-radius:var(--r-card);
  padding:clamp(20px,2.6vw,28px)}
.tst--hi{background:var(--coal);color:var(--on-dark);border-color:transparent;
  box-shadow:var(--shadow-dark)}
@media(min-width:900px){.tst--hi{transform:translateY(-14px)}}
.tst blockquote{margin-top:.85rem;font-size:.92rem;line-height:1.68}
.tst--hi blockquote{color:var(--on-dark-mut)}
.tst__who{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;
  gap:.5rem;margin-top:1.1rem;padding-top:.9rem;border-top:1px solid var(--line)}
.tst--hi .tst__who{border-top-color:rgba(255,255,255,.16)}
.tst__who b{font-family:var(--disp);font-size:.95rem;color:var(--ink)}
.tst--hi .tst__who b{color:#fff}
.tst__who span{font-size:.75rem;opacity:.75}
.tsts--all{grid-template-columns:1fr}
@media(min-width:700px){.tsts--all{grid-template-columns:1fr 1fr}}
@media(min-width:1000px){.tsts--all{grid-template-columns:repeat(3,1fr)}}

/* ── Galerie ─────────────────────────────────────── */
.gal{display:grid;gap:.75rem;grid-template-columns:1fr}
@media(min-width:560px){.gal{grid-template-columns:1fr 1fr}}
@media(min-width:900px){.gal{grid-template-columns:repeat(3,1fr)}}
.gal img{width:100%;aspect-ratio:1/1;object-fit:cover;border-radius:12px}

/* ── Chips ───────────────────────────────────────── */
.chips{display:flex;flex-wrap:wrap;gap:.5rem;justify-content:center}
.chip{display:inline-block;padding:.6rem 1rem;border-radius:999px;font-size:.85rem;
  font-weight:600;text-decoration:none;background:var(--coal-card);color:var(--on-dark);
  border:1px solid rgba(255,255,255,.1);transition:.25s}
.chip:hover{background:var(--accent);color:#fff;border-color:transparent}
.chips--sm{justify-content:flex-start;margin-top:1.2rem}
.chip--static{background:var(--paper2);color:var(--ink);border-color:var(--line);
  font-size:.8rem;padding:.45rem .8rem;cursor:default}
.chip--static:hover{background:var(--paper2);color:var(--ink);border-color:var(--line)}

/* ── FAQ ─────────────────────────────────────────── */
.faqs{display:grid;gap:.7rem;max-width:74ch;margin-inline:auto}
.faq{background:#fff;border:1px solid var(--line);border-radius:12px;
  padding:clamp(16px,2.2vw,22px)}
.faq__q{font-size:1rem;font-weight:700}
.faq__a{margin-top:.5rem;font-size:.93rem}

/* ── Kontakt ─────────────────────────────────────── */
.infos{display:grid;gap:.9rem;margin-bottom:clamp(24px,3.4vw,36px)}
@media(min-width:760px){.infos{grid-template-columns:repeat(3,1fr)}}
.infos li{display:grid;gap:.2rem;background:#fff;border:1px solid var(--line);
  border-radius:var(--r-card);padding:1.3rem}
.infos b{font-family:var(--disp);font-size:.95rem;color:var(--ink)}
.infos span:last-child{font-size:.9rem}
.info__ico{width:40px;height:40px;display:grid;place-items:center;border-radius:10px;
  background:rgba(18,86,155,.11);color:var(--accent);margin-bottom:.5rem}
.info__ico svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.7;
  stroke-linecap:round;stroke-linejoin:round}
.mapwrap{border-radius:var(--r);overflow:hidden;border:1px solid var(--line);line-height:0}
.mapwrap iframe{width:100%;height:clamp(280px,42vw,420px);border:0}

/* ── CTA-Band ────────────────────────────────────── */
.ctaband{background:var(--coal-dd);color:var(--on-dark);padding:clamp(40px,6vw,72px) 0}
.ctaband__in{display:grid;gap:1.6rem;align-items:center}
@media(min-width:900px){.ctaband__in{grid-template-columns:1.4fr auto}}
.ctaband h2{color:#fff;margin-top:.4rem}
.ctaband p{margin-top:.8rem;color:var(--on-dark-mut);max-width:52ch}
.ctaband .flour{color:var(--accent-lt)}
.ctaband__btns{display:flex;flex-wrap:wrap;gap:.7rem}

/* ── Seitenkopf ──────────────────────────────────── */
.phero{background:var(--paper2);padding:clamp(28px,5vw,52px) 0 clamp(32px,5vw,56px)}
.phero h1{margin-top:.5rem}
.phero__sub{margin-top:1rem;max-width:58ch;font-size:1rem}
.phero__cta{display:flex;flex-wrap:wrap;gap:.7rem;margin-top:1.6rem}
.phero__note{margin-top:.9rem;font-size:.88rem}
/* Das Hintergrundbild liegt als <img> im Markup, nicht als CSS-Variable:
   url() in einer Custom Property wird relativ zum Stylesheet aufgelöst,
   nicht zum Dokument — relative Pfade aus Unterseiten laufen damit ins Leere. */
.phero--img{position:relative;isolation:isolate;background:var(--coal-dd);color:var(--on-dark);
  padding:clamp(44px,7vw,86px) 0;overflow:hidden}
.phero__bg{position:absolute;inset:0;z-index:-2;width:100%;height:100%;
  object-fit:cover;object-position:center 42%}
.phero--img::after{content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(100deg,rgba(5,25,47,.90) 4%,rgba(5,25,47,.66) 48%,rgba(5,25,47,.30) 100%),
             linear-gradient(180deg,rgba(5,25,47,.45),rgba(5,25,47,.15) 40%,rgba(5,25,47,.55))}
.phero--img h1{color:#fff;text-shadow:0 2px 22px rgba(0,0,0,.35)}
.phero--img .eb{color:var(--accent-lt)}
.phero--img .phero__sub{color:var(--on-dark-mut)}
.phero--img .crumb,.phero--img .crumb a{color:rgba(233,242,251,.7)}
.crumb{display:flex;flex-wrap:wrap;gap:.4rem;font-size:.8rem;color:var(--body);margin-bottom:1.1rem}
.crumb a{color:inherit;text-decoration:none}
.crumb a:hover{color:var(--accent-d);text-decoration:underline}
.crumb__sep{opacity:.4}

/* ── Preisbox ────────────────────────────────────── */
.pricebox{background:var(--coal);color:var(--on-dark);border-radius:var(--r-card);
  padding:clamp(22px,3vw,32px);box-shadow:var(--shadow-dark)}
.pricebox__k{font-size:.68rem;font-weight:700;text-transform:uppercase;
  letter-spacing:.15em;color:var(--accent-lt)}
.pricebox__v{font-family:var(--disp);font-weight:800;font-size:1.5rem;color:#fff;margin-top:.3rem}
.pricebox__t{margin-top:.7rem;font-size:.88rem;color:var(--on-dark-mut)}
.pricebox h3{color:#fff}
.pricebox p:last-child{margin-top:.4rem}

/* ── Ratgeber-Themenbild ─────────────────────────── */
.phero__grid{display:grid;gap:clamp(18px,3vw,40px);align-items:center}
@media(min-width:840px){.phero__grid{grid-template-columns:minmax(0,1fr) 260px}}
.illu{justify-self:center;width:min(240px,72vw)}
.illu svg{width:100%;height:auto;display:block;overflow:visible}

/* ── Route Köln → Zielstadt ──────────────────────── */
/* Die Grafik ist Dekoration, die Legende darunter trägt die Information.
   Darum sitzt die Entfernung als Text im DOM und nicht als <text> im SVG. */
.route{margin:0 0 clamp(20px,3vw,30px);padding:clamp(14px,2.4vw,22px) clamp(12px,2.4vw,26px)
  clamp(12px,2vw,18px);background:#fff;border:1px solid var(--line);border-radius:var(--r-card)}
/* Pin – Fahrbahn – Pin. Die Fahrbahn dehnt sich, die Pins bleiben gleich
   groß und sitzen dadurch immer über ihrer Beschriftung. */
.route__art{display:flex;align-items:flex-end;gap:.4rem}
.route__pin{flex:none;line-height:0}
.route__pin svg{width:22px;height:41px;display:block}
.route__road{position:relative;flex:1 1 auto;height:34px;border-radius:17px;
  background:color-mix(in srgb,var(--coal) 10%,transparent)}
/* Mittelmarkierung als Verlauf statt SVG-Strich — so wandert sie über
   background-position und braucht keine Layout-Neuberechnung. */
.route__road::before{content:"";position:absolute;left:14px;right:14px;top:50%;
  height:3.5px;transform:translateY(-50%);border-radius:2px;
  background:repeating-linear-gradient(90deg,var(--gold) 0 16px,transparent 16px 30px)}
.route__van{position:absolute;left:50%;bottom:-1px;width:78px;line-height:0;
  transform:translateX(-50%)}
.route__van svg{width:100%;height:auto;display:block}
.route__legend{display:grid;gap:.5rem;margin-top:.7rem;text-align:center}
@media(min-width:620px){.route__legend{grid-template-columns:1fr auto 1fr;align-items:end}}
.route__stop,.route__mid{display:grid;gap:.1rem;line-height:1.25}
.route__stop b,.route__mid b{font-family:var(--disp);font-size:1rem;color:var(--ink)}
.route__mid b{color:var(--accent-dd)}
.route__stop small,.route__mid small{font-size:.78rem;color:var(--body)}
@media(min-width:620px){
  .route__stop{text-align:left}
  .route__stop--to{text-align:right}
  .route__mid{padding:0 1.2rem;text-align:center}
}
/* Hier lief eine Dauerschleife auf der Fahrbahnmarkierung. Rausgenommen:
   eine Endlos-Animation neben Fließtext zieht den Blick permanent weg und
   macht die Grafik unruhig, statt sie zu beleben. Die Grafik steht jetzt. */

/* ── Fakten / Städte ─────────────────────────────── */
/* auto-fit statt fester Spaltenzahl: die Liste trägt mal zwei, mal vier
   Einträge — eine feste 4er-Regel ließe sonst zwei Lücken stehen. */
.facts{display:grid;gap:.9rem;grid-template-columns:repeat(auto-fit,minmax(230px,1fr))}
.facts li{display:grid;gap:.15rem;padding:1rem 1.1rem;background:#fff;
  border:1px solid var(--line);border-radius:12px}
.facts b{font-family:var(--disp);font-size:1.02rem;color:var(--ink)}
.facts span{font-size:.8rem}
.citygrid{display:grid;gap:.75rem}
@media(min-width:560px){.citygrid{grid-template-columns:1fr 1fr}}
@media(min-width:900px){.citygrid{grid-template-columns:repeat(3,1fr)}}
.citycard{display:grid;gap:.2rem;padding:1.2rem 1.3rem;background:#fff;
  border:1px solid var(--line);border-radius:var(--r-card);text-decoration:none;
  transition:transform .3s var(--ease),border-color .3s,box-shadow .3s}
.citycard:hover{transform:translateY(-3px);border-color:var(--accent);box-shadow:var(--shadow-sm)}
.citycard b{font-family:var(--disp);font-size:1.08rem;color:var(--ink)}
.citycard__ico{width:34px;height:34px;display:grid;place-items:center;border-radius:9px;
  background:rgba(18,86,155,.11);color:var(--accent);margin-bottom:.5rem}
.citycard__ico svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8;
  stroke-linecap:round;stroke-linejoin:round}
.citycard__m{font-size:.82rem;color:var(--body)}
.citycard__lnk{display:inline-flex;align-items:center;gap:.3rem;margin-top:.6rem;
  font-size:.8rem;font-weight:700;color:var(--accent-d)}
.citycard__lnk svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:2;
  stroke-linecap:round;stroke-linejoin:round}

/* ── Inhaltsverzeichnis im Ratgeber ──────────────── */
.toc{margin-top:1.6rem;padding:1.1rem 1.3rem;background:#fff;border:1px solid var(--line);
  border-radius:var(--r-card);max-width:60ch}
.toc__k{font-size:.68rem;font-weight:700;text-transform:uppercase;letter-spacing:.15em;
  color:var(--accent-d);margin-bottom:.6rem}
.toc ul{display:grid;gap:.4rem}
.toc a{font-size:.9rem;color:var(--ink);text-decoration:none;display:inline-flex;gap:.5rem}
.toc a::before{content:"→";color:var(--accent);flex:none}
.toc a:hover{color:var(--accent-d);text-decoration:underline}
.quellen{display:grid;gap:.45rem;margin-top:.6rem}
.quellen li{font-size:.86rem;padding-left:1.1rem;position:relative}
.quellen li::before{content:"·";position:absolute;left:.3rem;color:var(--accent)}

/* ── Standortblock auf Unterseiten ───────────────── */
.local{display:grid;gap:1.1rem;align-items:center;padding:1.3rem 1.5rem;
  background:#fff;border:1px solid var(--line);border-radius:var(--r-card)}
@media(min-width:820px){.local{grid-template-columns:1.4fr auto}}
.local__nap{margin-top:.5rem;font-size:.9rem;line-height:1.7}
.local__nap b{color:var(--ink);font-family:var(--disp)}
.local__links{display:flex;flex-wrap:wrap;gap:.5rem .95rem;font-size:.86rem;font-weight:600}

/* ── Werte ───────────────────────────────────────── */
.werte{display:grid;gap:1.1rem}
@media(min-width:820px){.werte{grid-template-columns:repeat(3,1fr)}}
.werte li{background:#fff;border:1px solid var(--line);border-radius:var(--r-card);padding:1.5rem}
.werte b{display:block;font-family:var(--disp);font-size:1.08rem;color:var(--ink);margin-bottom:.45rem}
.werte p{font-size:.9rem}
.wert__ico{width:40px;height:40px;display:grid;place-items:center;border-radius:10px;
  background:rgba(18,86,155,.11);color:var(--accent);margin-bottom:.8rem}
.wert__ico svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2.2;
  stroke-linecap:round;stroke-linejoin:round}

/* ── Bewertungs-Dialog ───────────────────────────── */
.rgate{background:#fff;border:1px solid var(--line);border-radius:var(--r-card);
  padding:clamp(24px,4vw,40px);box-shadow:var(--shadow);text-align:center}
.rgate__q{font-family:var(--disp);font-weight:700;font-size:1.15rem;color:var(--ink);margin-bottom:1.1rem}
.rgate__stars{display:flex;justify-content:center;gap:.35rem}
.rstar{width:48px;height:48px;display:grid;place-items:center;background:none;
  border:0;cursor:pointer;color:#CBD8E6;transition:color .18s,transform .18s}
.rstar svg{width:32px;height:32px;fill:currentColor}
.rstar:hover,.rstar.is-on{color:var(--gold);transform:scale(1.08)}
.rgate__alt{margin-top:1.4rem;font-size:.85rem}
.rgate form{text-align:left;display:grid;gap:.85rem}
.rgate form .rgate__q{text-align:center}
/* `display:grid` in der Zeile darüber schlägt die Browserregel für
   [hidden] — eine Klasse ist spezifischer als der UA-Stil. Ohne diese
   Zeile stand das Rückmeldeformular offen auf der Seite, bevor überhaupt
   jemand einen Stern angeklickt hatte. */
.rgate__step[hidden]{display:none}

/* ── Angebotsbeleg ───────────────────────────────────────────────
   Die Leseführung einer Preistabelle, ohne Preise zu behaupten: Jede
   Zeile trägt statt eines Betrags ihren Zustand. Die Punktreihe zieht
   das Auge von der Leistung zur Angabe — genau wie auf einem Beleg. */
.beleg{display:grid;gap:clamp(20px,3vw,32px);align-items:start}
@media(min-width:940px){.beleg{grid-template-columns:minmax(0,1fr) 320px}}
.beleg__list{display:grid;background:#fff;border:1px solid var(--line);
  border-radius:var(--r-card);padding:.4rem clamp(14px,2.2vw,22px);overflow:hidden}
/* minmax(0,1fr) statt 1fr: ein Rasterkind hat von sich aus min-width:auto
   und schrumpft deshalb nie unter sein längstes Wort. Neben der Plakette,
   die nicht umbrechen darf, sprengte "Volumenermittlung" bei 320 px die
   Zeile über den Bildschirmrand. */
.beleg__row{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:baseline;
  gap:.2rem .6rem;padding:.85rem 0;border-bottom:1px solid var(--line2)}
.beleg__row:last-child{border-bottom:0}
.beleg__k{font-size:.94rem;color:var(--body);hyphens:auto;overflow-wrap:break-word}
.beleg__k b{display:block;color:var(--ink);font-weight:600}
.beleg__d{display:block;font-size:.85rem;margin-top:.1rem}
/* Die Punktreihe steht nur auf breiten Schirmen: darunter fehlt ihr der
   Platz, und eine gestauchte Punktreihe sieht aus wie ein Fehler. */
.beleg__dots{display:none}
@media(min-width:640px){
  .beleg__row{grid-template-columns:auto 1fr auto}
  .beleg__dots{display:block;height:1px;margin-bottom:.3rem;
    background-image:radial-gradient(circle,var(--line) 1px,transparent 1px);
    background-size:6px 2px;background-repeat:repeat-x;opacity:.8}
}
.beleg__v{flex:none;font-size:.76rem;font-weight:700;letter-spacing:.03em;
  padding:.28rem .6rem;border-radius:999px;white-space:nowrap}
.beleg__v--in{background:rgba(46,125,50,.11);color:#2E7D32}
/* Die mittlere Stufe muss sich von beiden anderen unterscheiden: nicht
   grün, sonst liest sie sich wie „enthalten", und nicht grau, sonst wie
   „geht nicht". Bernstein steht dazwischen — machbar, aber nicht umsonst. */
.beleg__v--auf{background:rgba(138,90,36,.13);color:#8A5A24}
.beleg__v--out{background:rgba(10,31,58,.06);color:var(--body)}
.beleg__box{background:var(--coal);color:var(--on-dark);border-radius:var(--r-card);
  padding:clamp(20px,3vw,26px);position:sticky;top:calc(var(--head-h) + 16px)}
.beleg__bk{font-size:.7rem;font-weight:700;text-transform:uppercase;
  letter-spacing:.13em;color:var(--accent-lt)}
.beleg__bv{font-family:var(--disp);font-weight:800;font-size:1.28rem;color:#fff;
  margin-top:.3rem;line-height:1.15;letter-spacing:-.02em}
.beleg__bt{font-size:.88rem;color:var(--on-dark-mut);margin:.7rem 0 1.1rem}
.beleg__box .btn{width:100%}
.beleg__bn{font-size:.8rem;color:var(--on-dark-mut);margin-top:1rem;
  padding-top:.9rem;border-top:1px solid rgba(233,242,251,.18)}

/* ── Ortskarten auf den Stadtseiten ──────────────────────────────
   Derselbe Text wie vorher, nur nicht mehr als Block am Stück. Die
   Marken sind kurz gehalten: alles, was auf allen 20 Seiten gleich
   steht, zahlt auf die Textüberschneidung ein. */
.lkarten{display:grid;gap:clamp(14px,2vw,20px)}
@media(min-width:760px){.lkarten{grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}}
.lkarte{background:#fff;border:1px solid var(--line);border-radius:var(--r-card);
  padding:clamp(20px,2.6vw,26px)}
.lkarte__ico{display:grid;place-items:center;width:38px;height:38px;border-radius:11px;
  background:rgba(18,86,155,.1);color:var(--accent-d);margin-bottom:.9rem}
.lkarte__ico svg{width:20px;height:20px;fill:currentColor}
.lkarte__k{font-size:.98rem;margin-bottom:.45rem}
.lkarte p{font-size:.93rem}

/* ── Direktantworten über einem Ratgeber ─────────────────────────
   Wer mit einer konkreten Frage kommt, soll die Antwort vor dem
   Artikel finden, nicht dahinter. Die drei Fragen stehen deshalb hier
   und NICHT mehr im FAQ-Block unten — einmal auf der Seite genügt. */
.antw__k{font-size:1.15rem;margin-bottom:clamp(14px,2vw,20px)}
.antworten{display:grid;gap:clamp(12px,1.8vw,18px)}
@media(min-width:720px){.antworten{grid-template-columns:repeat(3,1fr)}}
.antw{background:#fff;border:1px solid var(--line);border-radius:var(--r-card);
  padding:clamp(18px,2.4vw,24px);border-top:3px solid var(--accent)}
.antw__f{font-size:.95rem;margin-bottom:.5rem;color:var(--ink)}
.antw__a{font-size:.9rem}

/* ── Gegenüberstellung ───────────────────────────────────────────
   Zwei Zustände nebeneinander, die Naht in Akzentfarbe ist das
   Bauteil: der einzige Ort im Entwurf, an dem der Akzent als Fläche
   auftritt statt als Linie oder Schrift. Entwurf: 07_SECTION_KONZEPTE §8. */
.gegen{background:var(--paper2)}
.gegen__kopf{max-width:var(--maxw);margin-inline:auto;
  padding:clamp(40px,6vw,72px) var(--gut) clamp(22px,3vw,32px)}
.gegen__kopf h2{margin-top:.4rem}
.gegen__paar{display:grid}
.gegen__in{padding:clamp(26px,5vw,44px) var(--gut)}
.gegen__sp--a{background:var(--paper2)}
.gegen__sp--b{background:var(--coal);color:var(--on-dark);
  border-top:4px solid var(--accent)}
.gegen__sp h3{font-size:1.15rem;margin-bottom:.2rem}
.gegen__sp--b h3{color:#fff}
.gegen__sp--b .checks b,.gegen__sp--b .checks span{color:var(--on-dark)}
.gegen__sp--a .crosses svg{stroke:#8296AC}
.gegen__cta{margin-top:1.6rem}
.gegen__cta .btn{width:100%}
@media(min-width:560px){.gegen__cta .btn{width:auto}}
@media(min-width:900px){
  .gegen__paar{grid-template-columns:1fr 1fr}
  /* Die Flächen laufen bis zum Bildschirmrand, der Inhalt bleibt trotzdem
     an den Containerkanten: jede Spalte bekommt eine halbe Containerbreite
     und schiebt sie an die Naht. */
  .gegen__in{max-width:calc(var(--maxw) / 2);padding-block:clamp(44px,5vw,72px)}
  .gegen__sp--a .gegen__in{margin-left:auto;padding-right:clamp(28px,3.4vw,48px)}
  .gegen__sp--b .gegen__in{margin-right:auto;padding-left:clamp(28px,3.4vw,48px)}
  .gegen__sp--b{border-top:0;border-left:4px solid var(--accent)}
}

/* ── Tabelle ─────────────────────────────────────── */
.tablewrap{overflow-x:auto;border:1px solid var(--line);border-radius:12px;background:#fff}
.dtable{width:100%;min-width:640px;font-size:.86rem}
.dtable th,.dtable td{text-align:left;padding:.8rem .9rem;border-bottom:1px solid var(--line2)}
.dtable th{font-size:.7rem;font-weight:700;text-transform:uppercase;letter-spacing:.12em;color:var(--body)}
.dtable td:first-child{color:var(--ink);font-weight:500}

/* ── Fußzeile ────────────────────────────────────── */
.site-foot{background:var(--coal-dd);color:var(--on-dark-mut);padding:clamp(44px,6vw,72px) 0 0}
.foot__grid{display:grid;gap:2rem}
@media(min-width:760px){.foot__grid{grid-template-columns:1.4fr 1fr 1fr}}
@media(min-width:1040px){.foot__grid{grid-template-columns:1.5fr 1fr 1fr 1.1fr}}
/* ── Marke auf dunklem Grund ───────────────────────────────────────
   Das Logo traegt "EURO" in Marineblau; auf der marineblauen Fusszeile
   waere der halbe Markenname unsichtbar. Deshalb hier Emblem plus
   gesetzte Wortmarke: dieselbe Marke, andere Fassung. */
.marke{display:flex;align-items:center;gap:.7rem;margin-bottom:1.1rem}
.marke__emblem{width:52px;height:auto;display:block;flex:none}
.marke__txt{display:flex;flex-direction:column;line-height:1}
.marke__txt b{font-family:var(--disp);font-weight:800;font-size:1.22rem;
  letter-spacing:.055em;color:var(--on-dark)}
.marke__txt i{font-style:italic;font-weight:600;font-size:.9rem;
  letter-spacing:.16em;color:var(--gold);margin-top:.18rem}
@media(min-width:600px){.marke__emblem{width:60px}.marke__txt b{font-size:1.4rem}}
.foot__logo{margin-bottom:1.1rem}
.foot__brand p{font-size:.9rem;max-width:34ch}
.foot__brand address{margin-top:1.1rem;font-size:.9rem;line-height:1.75}
.foot__hours{margin-top:.9rem;font-size:.85rem}
.foot__lbl{font-family:var(--disp);font-weight:700;color:#fff;font-size:.95rem;margin-bottom:.8rem}
.foot__lbl--2{margin-top:1.6rem}
.foot__col ul{display:grid;gap:.5rem}
.site-foot a{color:var(--on-dark-mut);text-decoration:none;font-size:.89rem}
.site-foot a:hover{color:#fff;text-decoration:underline}
.site-foot .linkish{color:var(--on-dark-mut);font-size:.89rem;text-decoration:none}
.site-foot .linkish:hover{color:#fff;text-decoration:underline}
.foot__base{display:flex;flex-wrap:wrap;justify-content:space-between;gap:.6rem;
  margin-top:clamp(30px,4vw,48px);padding-top:1.3rem;padding-bottom:calc(1.3rem + 68px);
  border-top:1px solid rgba(255,255,255,.12);font-size:.82rem}
@media(min-width:1000px){.foot__base{padding-bottom:1.3rem}}

/* ── Cookie-Hinweis ──────────────────────────────── */
/* Schmale Karte unten links statt Sperrbalken. Kein Overlay, kein
   backdrop-filter, keine Interaktionspflicht: die Seite bleibt daneben
   vollständig bedienbar, und das Kreuz schließt den Hinweis.
   `max-width` statt fester Breite, damit die Karte auf 320 px nicht
   breiter wird als der Bildschirm. */
.cookie{position:fixed;left:var(--gut);bottom:var(--gut);z-index:100;
  width:min(360px,calc(100vw - var(--gut) * 2));
  background:var(--coal-dd);color:var(--on-dark);border-radius:var(--r-card);
  border:1px solid rgba(255,255,255,.14);
  box-shadow:0 24px 60px -24px rgba(10,7,6,.7);
  margin-bottom:env(safe-area-inset-bottom,0px)}
.cookie[hidden]{display:none}
.cookie__in{position:relative;padding:1rem 1.1rem 1.1rem}
.cookie__h{font-family:var(--disp);font-weight:700;font-size:.98rem;color:#fff;
  margin-bottom:.3rem;padding-right:1.6rem}
.cookie__t{font-size:.84rem;line-height:1.5;color:var(--on-dark-mut)}
.cookie__b{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem .9rem;margin-top:.85rem}
.cookie__more{font-size:.82rem;color:var(--on-dark-mut)}
.cookie__x{position:absolute;top:.55rem;right:.55rem;display:grid;place-items:center;
  width:30px;height:30px;padding:0;border:0;border-radius:8px;cursor:pointer;
  background:transparent;color:var(--on-dark-mut)}
.cookie__x:hover{background:rgba(255,255,255,.1);color:#fff}
.cookie__x svg{width:16px;height:16px}
/* Über dem Rand des Fensters sitzt auf schmalen Schirmen die feste
   Aktionsleiste — die Karte muss darüber ausweichen, sonst verdeckt sie
   den Anruf-Knopf. */
@media(max-width:999px){
  .cookie{bottom:calc(var(--bar-h,64px) + var(--gut))}
}

/* ── Bewegung ────────────────────────────────────── */
/* Der sichtbare Zustand braucht dieselbe Spezifität wie der versteckte,
   sonst gewinnt opacity:0 dauerhaft und die halbe Seite bleibt leer. */
html.js:not(.preview) .reveal{opacity:0;transform:translateY(24px);
  transition:opacity .7s var(--ease),transform .7s var(--ease)}
html.js:not(.preview) .reveal.is-visible{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{transition-duration:.01ms!important;animation-duration:.01ms!important}
  html.js .reveal{opacity:1!important;transform:none!important}
  .card:hover,.card--hi:hover,.citycard:hover,.head-wa:hover{transform:none}
}

/* ══════════════════════════════════════════════════════════════════
   VOLLBREITE BAUSTEINE
   Entwurf: _docs/07_SECTION_KONZEPTE.md
   Zwei Regeln halten sie zusammen: randlose Bänder tragen keinen
   Radius (ein randloses Element mit Ecken wirkt wie ein vergessener
   Container), und Tönungen laufen über color-mix auf den Tokens,
   nie über neue Farbliterale.
   ══════════════════════════════════════════════════════════════════ */

/* ── Schriftband ─────────────────────────────────── */
/* Vollbreites Band mit den Regeln, die bei jedem Auftrag gelten.
   Der Entwurf sah ein endlos laufendes Band vor — bewusst NICHT
   übernommen: Dauerbewegung neben Fließtext war hier schon einmal
   der Grund, warum eine Animation wieder rausflog. Das Band steht
   und ist auf schmalen Geräten mit dem Finger schiebbar. */
.band{background:var(--coal);color:var(--on-dark);overflow-x:auto;
  padding-block:clamp(14px,3vw,22px);
  border-block:1px solid color-mix(in srgb,var(--on-dark) 14%,transparent);
  overscroll-behavior-x:contain;scrollbar-width:thin}
.band__row{display:flex;align-items:center;width:max-content;
  gap:clamp(1.1rem,4vw,2.2rem);padding-inline:var(--gut)}
.band__i{font-family:var(--disp);font-weight:800;letter-spacing:-.02em;
  font-size:clamp(1rem,4.2vw,1.32rem);white-space:nowrap;color:var(--on-dark)}
.band__s{flex:none;line-height:0;color:var(--accent-lt)}
.band__s svg{width:clamp(16px,3.2vw,21px);height:auto;display:block}
/* Passt der Inhalt, wird er zentriert; passt er nicht, bleibt er schiebbar.
   margin-inline:auto leistet beides. Kein overflow-x:visible ab einer
   Breakpoint-Breite — das würde die Seite selbst überlaufen lassen, sobald
   jemand einen Satz verlängert. */
.band__row{margin-inline:auto}

/* ── Bildwand ────────────────────────────────────── */
/* Randlos ohne 100vw: ein Blockelement in <main> ist bereits so breit
   wie das Dokument. 100vw zählt die Scrollleiste mit und erzeugt auf
   Windows einen horizontalen Überlauf. */
.wand{background:var(--coal);padding-block:clamp(30px,5vw,52px)}
.wand__h{color:var(--bg);text-align:center;max-width:24ch;
  margin:0 auto clamp(18px,3vw,28px);padding-inline:var(--gut)}
.wand__sub{color:var(--on-dark-mut);text-align:center;max-width:52ch;
  margin:-.6rem auto clamp(18px,3vw,28px);padding-inline:var(--gut);font-size:.92rem}
.wand__grid{display:grid;grid-template-columns:1fr 1fr;gap:2px}
.wand__z{position:relative;margin:0;background:var(--coal-d);overflow:hidden}
.wand__z--gross{grid-column:1/-1}
.wand__z img{width:100%;height:100%;aspect-ratio:4/3;object-fit:cover;border-radius:0;
  display:block}
.wand__z--gross img{aspect-ratio:16/9}
/* Fahne statt Verlauf über dem ganzen Bild: der Verlauf frisst das
   Motiv, die Fahne kostet nur ihre eigene Fläche. */
.wand__z figcaption{position:absolute;left:0;bottom:0;
  padding:.42rem .7rem;font-size:.7rem;font-weight:700;letter-spacing:.06em;
  text-transform:uppercase;color:var(--on-dark);
  background:color-mix(in srgb,var(--coal-dd) 82%,transparent)}
@media(min-width:560px){
  .wand__z img{aspect-ratio:1/1}
  .wand__z--gross img{aspect-ratio:2/1}
}
@media(min-width:900px){
  /* Hart drei Spalten: bei sechs Bildern ergäbe auto-fit sonst 4+2. */
  .wand__grid{grid-template-columns:repeat(3,1fr)}
  .wand__z--gross{grid-column:auto}
  .wand__z img,.wand__z--gross img{aspect-ratio:4/3}
  .wand__z figcaption{font-size:.74rem;padding:.5rem .85rem}
}
@media(min-width:1180px){
  .wand__z img,.wand__z--gross img{aspect-ratio:3/2}
}

/* ── Entfernungsleiter ───────────────────────────── */
/* Bewusst keine Landkarte: 20 Pins sind auf 360 px unlesbar und
   suggerieren eine Flächendeckung, die niemand geprüft hat. Der
   Balken sagt genau das, was die Daten hergeben — wie weit weg. */
.leiter{display:grid;gap:2px;margin-top:clamp(20px,3vw,30px)}
.leiter__row{display:grid;gap:.3rem;padding:.85rem var(--gut) .95rem;
  text-decoration:none;color:var(--on-dark);
  border-bottom:1px solid color-mix(in srgb,var(--on-dark) 12%,transparent);
  margin-inline:calc(var(--gut) * -1);
  transition:background .25s var(--ease)}
.leiter__ort{font-family:var(--disp);font-weight:800;font-size:1.06rem;
  letter-spacing:-.02em;color:var(--bg)}
.leiter__km{font-size:.82rem;color:var(--on-dark-mut);font-variant-numeric:tabular-nums}
.leiter__bahn{display:block;height:6px;order:3;margin-top:.35rem;
  background:color-mix(in srgb,var(--on-dark) 14%,transparent)}
.leiter__weg{display:block;height:100%;width:var(--w,50%);background:var(--accent);
  position:relative}
.leiter__weg::after{content:"";position:absolute;right:0;top:50%;
  width:7px;height:14px;transform:translateY(-50%);background:var(--gold)}
.leiter__row:hover,.leiter__row:focus-visible{
  background:color-mix(in srgb,var(--on-dark) 7%,transparent)}
.leiter__row:hover .leiter__ort{color:var(--accent-lt)}
.leiter__row:focus-visible{outline:2px solid var(--on-dark);outline-offset:-2px}
@media(min-width:900px){
  .leiter__row{grid-template-columns:12rem minmax(0,1fr) 11rem;
    align-items:center;gap:1.6rem;padding-block:.95rem}
  .leiter__bahn{order:0;margin-top:0}
  .leiter__km{text-align:right}
}
@media(prefers-reduced-motion:reduce){.leiter__row{transition:none}}
/* Helle Variante, wenn davor oder danach schon eine dunkle Fläche steht. */
.leiter--hell .leiter__row{color:var(--body);border-bottom-color:var(--line)}
.leiter--hell .leiter__ort{color:var(--ink)}
.leiter--hell .leiter__km{color:var(--body)}
.leiter--hell .leiter__bahn{background:color-mix(in srgb,var(--ink) 10%,transparent)}
.leiter--hell .leiter__row:hover{background:color-mix(in srgb,var(--ink) 4%,transparent)}
.leiter--hell .leiter__row:hover .leiter__ort{color:var(--accent-d)}
.leiter--hell .leiter__row:focus-visible{outline-color:var(--accent)}

/* ── Wortlaut ────────────────────────────────────── */
/* Es gibt fünf Bewertungen. Drei blasse Karten lassen fünf nach wenig
   aussehen; eine große sieht aus wie ein Zitat, das jemand ernst meint. */
.wortlaut{background:var(--coal-d);color:var(--on-dark);
  padding-block:clamp(44px,7vw,84px)}
.wortlaut__in{position:relative}
.wortlaut__mark{display:block;font-family:var(--disp);font-weight:800;
  font-size:clamp(3.4rem,13vw,5rem);line-height:.62;color:var(--accent);
  margin-bottom:.15em}
.wortlaut__mark::before{content:"\201E"}
.wortlaut__q{margin:0}
.wortlaut__q p{font-family:var(--disp);font-weight:600;letter-spacing:-.022em;
  font-size:clamp(1.24rem,5.4vw,2.05rem);line-height:1.34;color:var(--bg);
  text-wrap:pretty;max-width:28ch}
.wortlaut__who{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem .8rem;
  margin-top:clamp(20px,3.4vw,30px);padding-top:1rem;
  border-top:1px solid color-mix(in srgb,var(--on-dark) 18%,transparent)}
.wortlaut__who b{font-family:var(--disp);font-size:.98rem;color:var(--bg)}
.wortlaut__who span:last-child{font-size:.8rem;color:var(--on-dark-mut)}
.wortlaut__alle{margin-top:1.1rem;font-size:.88rem}
.wortlaut__alle a{color:var(--accent-lt)}
.wortlaut .stars svg{width:15px;height:15px}
@media(min-width:900px){
  .wortlaut__mark{position:absolute;left:-.62em;top:-.12em;margin:0;
    font-size:clamp(5rem,7vw,7.5rem)}
  .wortlaut__q p{max-width:24ch}
}

/* ── Lesestrecke mit Randnotiz ───────────────────── */
/* Der vorhandene Text ist inhaltlich gut, sah aber aus wie Blindtext
   zwischen Kacheln. Gesetzt als Lesestrecke wird aus derselben
   Substanz ein Text, dem man ansieht, dass ihn jemand geschrieben hat. */
.lese{max-width:64ch;margin-inline:auto}
.lese>p{margin-bottom:1.05rem;font-size:1rem;line-height:1.72;text-wrap:pretty}
.lese__lead{font-size:1.1rem;line-height:1.6;color:var(--ink)}
.lese>h3{margin:2.1rem 0 .6rem;padding-top:1.1rem;font-size:1.08rem;
  border-top:2px solid var(--ink)}
.lese>p:last-child{margin-bottom:0}
.lese b{color:var(--ink)}
.rand{margin:1.5rem 0;padding:.15rem 0 .15rem 1rem;font-size:.9rem;line-height:1.6;
  border-left:3px solid var(--accent);color:var(--body)}
.rand b{display:block;font-family:var(--disp);font-size:.72rem;font-weight:700;
  letter-spacing:.14em;text-transform:uppercase;color:var(--accent-d);margin-bottom:.2rem}
@media(min-width:900px){
  .lese>p{font-size:1.02rem}
  .lese__lead{font-size:1.18rem}
}
@media(min-width:1180px){
  /* Erst hier ist Platz für einen echten Rand. Float statt Grid, damit
     die DOM-Reihenfolge (und damit der Screenreader) unangetastet bleibt. */
  .rand{float:left;width:12rem;margin:.35rem 2rem 1rem -14rem;text-align:right;
    padding:0 1rem 0 0;border-left:0;border-right:3px solid var(--accent)}
  .lese>h3{clear:left}
}

/* ── Ratgeber-Kapitel ────────────────────────────── */
/* Vorher: vier bis sechs gleich aussehende Textblöcke untereinander.
   Jetzt trägt jeder Abschnitt eine Marke aus Nummer und Symbol, und die
   Seite wechselt von Abschnitt zu Abschnitt. Die Nummer ist keine Deko:
   die Abschnitte sind eine Reihenfolge (erst Zuständigkeit, dann Frist,
   dann Kosten), und bei der Checkliste sogar eine Zeitachse. */
.kap__in{display:grid;gap:clamp(18px,3vw,30px)}
.kap__marke{display:flex;align-items:center;gap:.8rem}
.kap__nr{font-family:var(--disp);font-weight:800;font-size:clamp(2.4rem,11vw,3.6rem);
  line-height:.85;letter-spacing:-.04em;color:var(--accent);
  font-variant-numeric:tabular-nums}
.kap__ico{display:grid;place-items:center;width:46px;height:46px;flex:none;
  border-radius:14px;background:color-mix(in srgb,var(--accent) 13%,transparent);
  color:var(--accent-d)}
.kap__ico svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:2;
  stroke-linecap:round;stroke-linejoin:round}
.kap__txt .eb{display:block;margin-bottom:.35rem}
.kap__txt h2{margin-bottom:.9rem}
.kap__bild{margin:0}
.kap__bild img{width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;
  border-radius:var(--r-card)}
/* Die Lesestrecke sitzt hier in einer schon begrenzten Spalte — die zweite
   Breitenbegrenzung würde den Text unnötig schmal machen. */
.kap .lese{max-width:none;margin-inline:0}

@media(min-width:900px){
  /* Marke in eine schmale Spalte, Text daneben. Bei ungeraden Abschnitten
     wandert die Marke nach rechts: dieselbe Struktur, gespiegelt. */
  .kap__in{grid-template-columns:7.5rem minmax(0,1fr);
    column-gap:clamp(28px,4vw,56px);align-items:start}
  .kap__marke{flex-direction:column;align-items:flex-start;gap:.6rem;
    position:sticky;top:calc(var(--head-h) + 18px)}
  .kap--re .kap__in{grid-template-columns:minmax(0,1fr) 7.5rem}
  .kap--re .kap__marke{grid-column:2;grid-row:1;align-items:flex-end}
  .kap--re .kap__txt{grid-column:1;grid-row:1}
  /* Mit Bild: drei Spalten, das Bild nimmt die Außenseite ein. */
  .kap__in:has(.kap__bild){grid-template-columns:7.5rem minmax(0,1fr) 15rem}
  .kap--re .kap__in:has(.kap__bild){grid-template-columns:15rem minmax(0,1fr) 7.5rem}
  /* Alle drei Spalten müssen hier neu zugewiesen werden. Die beiden Regeln
     weiter oben gelten dem ZWEIspaltigen Fall, wo Spalte 1 der Text ist und
     Spalte 2 die Marke. Kommt ein Bild dazu, ist Spalte 1 das Bild — und die
     alten Zuweisungen schoben Text und Bild beide auf Spalte 1, Zeile 1.
     Sie lagen dann übereinander und der Text war unlesbar. */
  .kap--re .kap__in:has(.kap__bild) .kap__bild{grid-column:1;grid-row:1}
  .kap--re .kap__in:has(.kap__bild) .kap__txt{grid-column:2;grid-row:1}
  .kap--re .kap__in:has(.kap__bild) .kap__marke{grid-column:3;grid-row:1}
}
@media(min-width:1180px){
  .kap__in:has(.kap__bild){grid-template-columns:7.5rem minmax(0,1fr) 19rem}
  .kap--re .kap__in:has(.kap__bild){grid-template-columns:19rem minmax(0,1fr) 7.5rem}
}
/* :has() kennt nicht jeder Browser. Ohne Unterstützung bleibt es beim
   zweispaltigen Grid und das Bild rutscht unter den Text — kein Schaden,
   nur weniger elegant. */
@supports not (selector(:has(*))){
  .kap__bild{max-width:22rem}
}

/* ── Entfernungsringe ────────────────────────────── */
/* Zwanzig gleiche Zeilen am Stück sind eine Wand. Die Gruppen geben der
   Sortierung eine Aussage — und die Spanne steht dran, damit niemand raten
   muss, wonach gruppiert wurde. */
.ring{margin-top:clamp(28px,4vw,44px)}
.ring:first-child{margin-top:clamp(18px,2.5vw,26px)}
.ring__kopf{display:flex;flex-wrap:wrap;align-items:baseline;gap:.5rem .9rem;
  padding-bottom:.55rem;border-bottom:2px solid var(--ink)}
.ring__kopf h3{font-size:clamp(1.1rem,3.4vw,1.35rem);font-weight:800}
.ring__spanne{font-size:.78rem;font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;color:var(--accent-d);
  font-variant-numeric:tabular-nums;margin-left:auto}
.ring__t{margin:.7rem 0 0;font-size:.92rem;max-width:64ch}
.ring .leiter{margin-top:.9rem}

/* ── Preisfaktoren-Raster ────────────────────────── */
/* War eine Häkchenliste — sechs gleichrangig wirkende Zusagen. Als
   nummeriertes Raster tragen die Zahlen eine Aussage (der erste Faktor ist
   laut Text "der mit Abstand größte Posten"), und die Symbole machen die
   Faktoren auf einen Blick unterscheidbar. */
.fakten-raster{display:grid;gap:1px;margin-top:clamp(20px,3vw,30px);
  background:var(--line);border:1px solid var(--line);border-radius:var(--r-card);
  overflow:hidden}
@media(min-width:640px){.fakten-raster{grid-template-columns:1fr 1fr}}
@media(min-width:1000px){.fakten-raster{grid-template-columns:repeat(3,1fr)}}
.fakt{background:var(--bg);padding:clamp(18px,2.6vw,26px)}
.fakt__k{display:flex;align-items:center;gap:.6rem;margin-bottom:.7rem}
.fakt__k b{font-family:var(--disp);font-weight:800;font-size:1.6rem;line-height:1;
  color:var(--accent);font-variant-numeric:tabular-nums}
.fakt__ico{display:grid;place-items:center;width:34px;height:34px;border-radius:10px;
  background:color-mix(in srgb,var(--accent) 12%,transparent);color:var(--accent-d)}
.fakt__ico svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:2;
  stroke-linecap:round;stroke-linejoin:round}
.fakt h3{margin-bottom:.35rem;font-size:1.04rem}
.fakt p{font-size:.9rem}

/* ── Chat-Assistent ─────────────────────────────────────────────
   Markup kommt aus site.js (Modul chatbot); hier nur die Form. Der Knopf
   sitzt rechts unten, die Cookie-Karte links unten — solange die Karte
   offen ist, bleibt der Knopf weg, auf 390 px laegen sie uebereinander.
   Unter 1000 px weicht alles ueber die Aktionsleiste aus, dieselbe
   Rechnung wie bei .cookie. z-index 90: ueber Leiste (65), unter Cookie
   (100) und Lightbox. */
.cb-toggle{position:fixed;right:var(--gut);bottom:var(--gut);z-index:90;
  width:56px;height:56px;border-radius:999px;border:0;cursor:pointer;
  background:var(--accent);color:#fff;display:grid;place-items:center;
  box-shadow:0 18px 40px -18px rgba(10,53,96,.8);
  margin-bottom:env(safe-area-inset-bottom,0px);
  transition:transform .2s var(--ease),background .2s var(--ease)}
.cb-toggle:hover{background:var(--accent-d);transform:translateY(-2px)}
.cb-toggle:focus-visible{outline:2px solid var(--accent-d);outline-offset:3px}
.cb-toggle svg{width:26px;height:26px;fill:none;stroke:currentColor;stroke-width:1.9;
  stroke-linecap:round;stroke-linejoin:round;display:block}
.cb-toggle__close,.cb-toggle.is-open .cb-toggle__open{display:none}
.cb-toggle.is-open .cb-toggle__close{display:block}
body:has(.cookie:not([hidden])) .cb-toggle{display:none}
.cb-panel{position:fixed;right:var(--gut);bottom:calc(var(--gut) + 56px + 12px);z-index:90;
  width:min(380px,calc(100vw - var(--gut) * 2));max-height:min(620px,calc(100vh - 110px));
  display:flex;flex-direction:column;background:#fff;color:var(--ink);
  border:1px solid var(--line);border-radius:var(--r-card);overflow:hidden;
  box-shadow:0 30px 70px -30px rgba(10,7,6,.55);
  margin-bottom:env(safe-area-inset-bottom,0px)}
.cb-panel[hidden]{display:none}
.cb-head{display:flex;align-items:center;gap:.7rem;padding:.85rem 1rem;
  background:var(--coal-dd);color:var(--on-dark)}
.cb-head__ico{width:38px;height:38px;flex:none;display:grid;place-items:center;border-radius:999px;
  background:rgba(18,86,155,.18);color:var(--accent-lt)}
.cb-head__ico svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.8;
  stroke-linecap:round;stroke-linejoin:round}
.cb-head__txt{flex:1;min-width:0;display:grid;gap:.1rem}
.cb-head__name{font-family:var(--disp);font-weight:700;font-size:.95rem;color:#fff}
.cb-head__st{font-size:.74rem;color:var(--on-dark-mut);display:flex;align-items:center;gap:.4rem}
.cb-head__st i{width:7px;height:7px;border-radius:999px;background:#4ade80;flex:none}
.cb-head__x{width:36px;height:36px;flex:none;border:0;border-radius:8px;cursor:pointer;
  background:transparent;color:var(--on-dark-mut);display:grid;place-items:center}
.cb-head__x:hover{background:rgba(255,255,255,.1);color:#fff}
.cb-head__x svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}
.cb-log{flex:1;min-height:180px;overflow-y:auto;padding:.9rem;display:flex;flex-direction:column;
  gap:.5rem;background:var(--paper);overscroll-behavior:contain}
.cb-msg{max-width:86%;padding:.6rem .85rem;border-radius:14px;font-size:.9rem;line-height:1.5;
  overflow-wrap:anywhere;margin:0}
.cb-msg--bot{align-self:flex-start;background:#fff;border:1px solid var(--line);
  border-bottom-left-radius:4px}
.cb-msg--user{align-self:flex-end;background:var(--accent);color:#fff;border-bottom-right-radius:4px}
.cb-msg--typing{display:flex;gap:4px;padding:.7rem .9rem}
.cb-msg--typing i{width:7px;height:7px;border-radius:999px;background:var(--body);
  animation:cb-bounce 1.2s infinite ease-in-out both}
.cb-msg--typing i:nth-child(2){animation-delay:.15s}
.cb-msg--typing i:nth-child(3){animation-delay:.3s}
@keyframes cb-bounce{0%,80%,100%{transform:scale(.5);opacity:.5}40%{transform:scale(1);opacity:1}}
.cb-lead{padding:.85rem .9rem;border-top:1px solid var(--line);background:var(--paper2);display:grid;gap:.5rem}
.cb-lead[hidden]{display:none}
.cb-lead__h{font-family:var(--disp);font-weight:700;font-size:.88rem;margin:0 0 .1rem}
.cb-lead__f{display:grid;gap:.2rem;font-size:.76rem;color:var(--body)}
.cb-lead__f input{min-height:42px;padding:.45rem .7rem;border:1px solid var(--line);border-radius:var(--r-btn);
  font:inherit;font-size:.9rem;background:#fff;color:var(--ink)}
.cb-lead__f input:focus{outline:2px solid var(--accent);outline-offset:1px;border-color:transparent}
.cb-lead__err{margin:0;font-size:.8rem;color:var(--accent-d)}
.cb-lead__err[hidden]{display:none}
.cb-lead__b{display:flex;align-items:center;gap:.6rem;margin-top:.15rem}
.cb-lead__b .btn{min-height:42px;padding-block:.5rem;font-size:.86rem}
.cb-lead__skip{border:0;background:transparent;color:var(--body);cursor:pointer;font:inherit;
  font-size:.84rem;min-height:42px;padding:0 .4rem;text-decoration:underline}
.cb-in{display:flex;gap:.5rem;padding:.65rem;border-top:1px solid var(--line);background:#fff}
.cb-in input{flex:1;min-width:0;min-height:44px;padding:.5rem .8rem;border:1px solid var(--line);
  border-radius:var(--r-btn);font:inherit;font-size:.92rem;color:var(--ink)}
.cb-in input:focus{outline:2px solid var(--accent);outline-offset:1px;border-color:transparent}
.cb-in__send{width:44px;height:44px;flex:none;border:0;border-radius:var(--r-btn);cursor:pointer;
  background:var(--accent);color:#fff;display:grid;place-items:center}
.cb-in__send:disabled{opacity:.45;cursor:default}
.cb-in__send svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.9;
  stroke-linecap:round;stroke-linejoin:round}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
@media(max-width:999px){
  .cb-toggle{bottom:calc(62px + env(safe-area-inset-bottom,0px) + var(--gut))}
  .cb-panel{right:0;left:0;bottom:0;width:100%;max-height:calc(100vh - 56px);
    border-radius:var(--r-card) var(--r-card) 0 0;margin-bottom:0;
    padding-bottom:env(safe-area-inset-bottom,0px)}
}
@media(prefers-reduced-motion:reduce){.cb-msg--typing i{animation:none;opacity:.8}}

/* ── Eigene Bausteine ─────────────────────────────────────────────────
   Gezeichnet statt fotografiert. Alle drei sind mobil zuerst gebaut:
   Die Grundform ist die schmale, und erst ab einer Breite, bei der es
   wirklich passt, wird umgestellt. */

/* Sternenbogen aus dem Logo, als Trenner */
.sbogen{display:flex;justify-content:center;color:var(--gold);margin:0 0 .85rem}
.sbogen svg{width:104px;height:auto;display:block}
@media(min-width:700px){.sbogen svg{width:132px}}

/* Hofschnitt: Vorderhaus, Höfe, Quergebäude */
.hofschnitt{margin:0;display:grid;gap:.95rem}
.hofschnitt svg{width:100%;height:auto;display:block;
  border-radius:var(--r-card);
  background:linear-gradient(170deg,var(--coal-d),var(--coal) 62%,var(--coal-card));
  box-shadow:var(--shadow-dark)}
/* Schriftgrößen stehen in viewBox-Einheiten: Der Kasten ist 480 breit,
   auf einem 390-px-Telefon bleiben davon rund 12 px echte Höhe. */
.hofschnitt .hs__t{font-family:var(--disp);font-size:15px;font-weight:600;
  fill:var(--on-dark-mut)}
.hofschnitt .hs__t--hell{fill:var(--on-dark);opacity:.85}
.hofschnitt .hs__t--dunkel{fill:var(--coal-dd);font-weight:800;font-size:14px}
.hofschnitt .hs__t--weg{fill:var(--accent-lt);font-weight:700;font-size:14px;
  letter-spacing:.04em}
.hofschnitt figcaption{color:var(--body);font-size:.93rem;line-height:1.62;
  max-width:64ch}

/* Zeitleiste für Fristen */
.zl__kopf{margin:0 0 1.15rem;max-width:60ch}
.zl__kopf h2{margin:0 0 .3rem}
.zl__kopf p{margin:0;color:var(--body)}
.zl__l{list-style:none;margin:0;padding:0;display:grid;gap:.85rem;counter-reset:zl}
.zl__s{position:relative;padding:1.05rem 1.15rem;background:var(--bg);
  border:1px solid var(--line);border-radius:var(--r-card);
  box-shadow:var(--shadow-sm)}
.zl__m{display:inline-block;background:var(--accent);color:#fff;
  border-radius:999px;padding:.24rem .68rem;margin-bottom:.55rem;
  font-family:var(--disp);font-weight:800;font-size:.74rem;letter-spacing:.045em;
  line-height:1.35}
.zl__s h3{margin:0 0 .28rem;font-size:1.02rem;line-height:1.3}
.zl__s p{margin:0;color:var(--body);font-size:.94rem;line-height:1.55}
@media(min-width:860px){
  .zl__l{grid-template-columns:repeat(4,1fr);gap:1.1rem}
  /* Verbindungslinie zwischen den Schritten — nur dort, wo sie nebeneinander
     stehen. Untereinander trägt die Reihenfolge sich selbst. */
  .zl__s:not(:last-child)::after{content:"";position:absolute;top:2.05rem;
    right:-1.1rem;width:1.1rem;height:2px;background:var(--line)}
}
/* Im CTA-Band steht der Bogen links, nicht mittig — er leitet in die
   Überschrift hinein statt sie zu überdachen. */
.ctaband .sbogen{justify-content:flex-start;margin-bottom:.7rem}
.ctaband .sbogen svg{width:96px}
/* Höfe werden im Bild beschriftet, nicht in der Fußzeile darunter —
   sonst stoßen "Hof" und "Seitenflügel" aneinander. */
.hofschnitt .hs__t--hof{font-size:12.5px;fill:var(--on-dark);opacity:.55;
  letter-spacing:.06em}
.hofschnitt .hs__t--klein{font-size:13px}
/* Herkunftsangabe ohne Link — bei eigenem Material */
.dtable__q{color:var(--body);font-size:.86rem;line-height:1.45;display:block;max-width:46ch}

/* ── Bildton ──────────────────────────────────────────────────────────
   Alle Fotos auf dieser Seite sind eingekaufte Platzhalter aus
   verschiedenen Quellen, mit verschiedenem Licht und verschiedener
   Farbstimmung. Nebeneinander sieht das aus wie eine Sammlung, nicht wie
   eine Marke — und das warme Abendlicht des Leitmotivs beißt sich mit
   Marineblau, Chrom und Sternengold aus dem Logo.

   Ein gemeinsamer Ton bindet sie zusammen: leicht entsättigt, minimal
   angehoben im Kontrast. Kein Duoton — der würde die Bilder zu Grafik
   machen und ihnen genau das nehmen, wofür sie da sind. Logo und Emblem
   sind ausgenommen; die tragen ihre eigenen Farben. */
img:not(.brand__mark):not(.marke__emblem):not(.foot__logo){
  filter:saturate(.84) contrast(1.05)}

/* Das Leitmotiv bekommt zusätzlich einen Schleier in Markenfarbe — so
   sitzt der Hero im Blau, ohne dass das Foto tot wirkt. */
.hero__main{position:relative}
.hero__main::after{content:"";position:absolute;inset:0;border-radius:inherit;
  background:linear-gradient(155deg,rgba(11,46,88,.30),rgba(11,46,88,.06) 58%,
    rgba(240,192,40,.10));pointer-events:none}

/* ── Korn ─────────────────────────────────────────────────────────────
   Ein feines Rauschen auf den dunklen Flächen. Glasmorphismus stand hier
   vorher — der ist 2026 das, was der Schlagschatten 2012 war. Korn macht
   das Gegenteil: Es nimmt der Fläche das Makellose. */
.site-foot,.ctaband,.section--dark,.phero--img{position:relative}
.site-foot::before,.ctaband::before,.section--dark::before,.phero--img::before{
  content:"";position:absolute;inset:0;pointer-events:none;opacity:.055;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
  mix-blend-mode:overlay}
/* Der Inhalt muss über dem Korn liegen, sonst schluckt es Klicks und Text. */
.site-foot>*,.ctaband>*,.section--dark>*,.phero--img>*{position:relative;z-index:1}

/* ── Überschriften umbrechen lassen, statt sie zu trennen ─────────────
   „Umzugsunternehmen" ist siebzehn Zeichen lang. Ohne Hilfe trennt der
   Browser mitten im Wort; mit balance verteilt er die Zeilen so, dass
   die Trennung meist gar nicht nötig wird. */
h1,h2,.hero__soft{text-wrap:balance}
p,li{text-wrap:pretty}

/* ── Einblenden ohne JavaScript ───────────────────────────────────────
   Der Aufblend-Effekt lief bisher über einen IntersectionObserver in
   site.js. Seit 2026 kann die CSS das selbst — auf dem Compositor, ohne
   ein einziges Byte JavaScript. Wo der Browser es nicht kennt, passiert
   schlicht nichts und der Inhalt steht sofort da. */
@supports (animation-timeline: view()){
  @media (prefers-reduced-motion: no-preference){
    .section > .container{
      animation:auftauchen linear both;
      animation-timeline:view();
      animation-range:entry 0% entry 42%}
    @keyframes auftauchen{
      from{opacity:0;transform:translateY(14px)}
      to{opacity:1;transform:none}}
  }
}

/* Standbild-Bühne: das Foto füllt die Fläche, der Schleier liegt darüber.
   object-fit statt background-image, damit srcset greift. */
.hero__stage--foto{background:var(--coal);overflow:hidden}
.hero__stagebild{position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;display:block}
/* Im Hero darf das Bild ruhiger sein als in einer Bildstrecke — der Text
   liegt darauf. */
.hero--vid .hero__stagebild{filter:saturate(.7) contrast(1.06)}

/* ── Schleier auf schmalen Schirmen ───────────────────────────────────
   Der vorhandene Verlauf war für die Video-Bühne gebaut: oben ein dünner
   Streifen, darunter hart dicht. Hinter einem vollflächigen Standbild
   ergibt das eine sichtbare Kante quer durchs Bild. Hier stattdessen ein
   durchgehender Verlauf — dicht genug für weiße Schrift, durchlässig
   genug, dass das Motiv Textur bleibt. */
@media (max-width:859px){
  .hero--vid .hero__veil{
    background:linear-gradient(180deg,
      rgba(5,25,47,.72) 0%,
      rgba(5,25,47,.84) 32%,
      rgba(5,25,47,.93) 62%,
      rgba(5,25,47,.97) 100%)}
  /* Auf dem Telefon steht der Text auf dem Bild, nicht daneben — dann
     darf das Bild ruhiger sein. */
  .hero--vid .hero__stagebild{filter:saturate(.55) contrast(1.08)}
}

/* Die Haken im dunklen Hero waren kaum zu sehen: Akzentblau auf
   Marineblau. Auf dunklem Grund trägt das Gold. */
.hero--vid .hero__bul svg{stroke:var(--gold)}

/* text-wrap:balance darf mitten im Wort trennen, wenn das die Zeilen
   gleichmäßiger macht — bei „Umzugsunternehmen" tut es das und sieht
   falsch aus. hyphens:manual verbietet die automatische Trennung; die
   Überschrift bricht dann an der Wortgrenze. Gemessen: bei 29,6 px ist
   das Wort 320 px breit, die Spalte auf einem 390er Telefon 355 px. */
h1{hyphens:manual}

/* Ortsbild neben den Einsatzgebieten. Auf dem Telefon unter dem Text,
   ab Tablet daneben — und bewusst nicht auf dieselbe Kartenform gebracht
   wie alles andere: ein Foto ist keine Karte. */
.ortsbild{margin:1.4rem 0 0;display:grid;gap:.7rem}
.ortsbild img{width:100%;height:auto;display:block;border-radius:var(--r-card);
  box-shadow:var(--shadow)}
.ortsbild figcaption{color:var(--body);font-size:.88rem;line-height:1.5;max-width:44ch}
@media(min-width:900px){.ortsbild{margin-top:0;align-self:center}}



/* ══════════════════════════════════════════════════════════════════════
   Referenzlayout (Session 7, 11.09.2026)
   Vorlage: eine Umzugsfirmen-Website mit schmaler Kontaktleiste, Pillen-
   Navigation über dem Hero-Bild, gerahmten Flächen mit großem Radius,
   einem Akzentwort je Überschrift, Bildkarten, Bildmosaik, Bewertungen
   im Mauerwerk, Pin-Liste, FAQ-Akkordeon und grauem Kontaktkasten.
   Farben bleiben Euroliner: Marineblau, Akzentblau, Gold aus dem Logo.
   ══════════════════════════════════════════════════════════════════════ */
:root{--util-h:38px;--nav-h:76px;--box-r:clamp(18px,2.6vw,28px);--box-m:clamp(8px,1.4vw,18px)}
h1,h2,h3,h4{letter-spacing:-.03em}
h1{font-weight:700}
h2{font-weight:700;font-size:clamp(1.7rem,3.6vw,2.6rem)}
.hl{font-style:normal;color:var(--accent)}
.section--dark .hl,.hero .hl,.phero .hl,.ctaband .hl,.faq[open] .hl{color:var(--gold)}
/* Augenbraue in Normalschrift — keine Kapitälchen mehr */
.eb{text-transform:none;letter-spacing:0;font-size:.92rem;font-weight:500;color:var(--body)}
.section--dark .eb,.phero .eb{color:var(--on-dark-mut)}
.sechd .flour,.split__body .flour{display:none}
.sechd h2{margin-top:.45rem}
.sechd__sub{max-width:52ch}
.sechd--center .sechd__sub{margin-inline:auto}

/* ── Knöpfe: Pillen mit Pfeil ─────────────────────────────────────── */
.btn{border-radius:999px;gap:.5rem;font-weight:600}
.btn svg{position:relative;z-index:1;width:16px;height:16px;fill:none;stroke:currentColor;
  stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;transition:transform .25s var(--ease)}
.btn:hover svg{transform:translate(2px,-2px)}
.btn--pri{background:var(--gold);color:var(--ink);box-shadow:0 14px 26px -16px rgba(211,163,21,.9)}
.btn--pri::before{background:var(--gold-d)}
.btn--gh{background:#fff;color:var(--ink);border:1px solid var(--line)}
.btn--gh:hover{border-color:var(--accent);color:var(--accent-d)}
.btn--ghd{background:rgba(255,255,255,.1);color:#fff;border:1px solid rgba(255,255,255,.38)}
.btn--ghd:hover{background:rgba(255,255,255,.18);border-color:#fff}

/* ── Kopf: Kontaktleiste + durchsichtige Navigation über dem Bild ──── */
.site-head{background:transparent;border-bottom:0;
  transition:transform .35s var(--ease),background .3s,box-shadow .3s}
.site-head.is-stuck{background:var(--coal-dd);box-shadow:0 12px 30px -20px rgba(0,0,0,.6);
  transform:translateY(calc(-1 * var(--util-h)))}
.site-head.is-stuck.is-hidden{transform:translateY(-100%)}
/* Hell statt dunkel: Ein dunkler Streifen über der weißen Fuge über dem dunklen
   Hero-Kasten las sich als drei Kanten. Jetzt gehört die Leiste zum hellen
   Seitenrahmen, in dem der Kasten schwebt; beim Scrollen fährt sie mit dem
   Kopf um ihre eigene Höhe nach oben weg. */
.utilbar{background:var(--bg);color:var(--body);font-size:.78rem}
.utilbar__in{display:flex;justify-content:space-between;align-items:center;gap:1rem;min-height:var(--util-h)}
.utilbar__ort,.utilbar__k a{display:inline-flex;align-items:center;gap:.4rem;color:inherit;
  text-decoration:none;white-space:nowrap}
.utilbar__k{display:flex;gap:1.4rem}
.utilbar__k a:hover{color:var(--ink)}
.utilbar svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:1.8;
  stroke-linecap:round;stroke-linejoin:round;color:var(--gold)}
@media(max-width:759px){.utilbar__ort{display:none}.utilbar__in{justify-content:center}}
@media(max-width:479px){.utilbar__k a:first-child{display:none}}
.topbar{min-height:var(--nav-h);gap:1rem}
.brand .marke{margin:0;gap:.55rem}
.brand .marke__emblem{width:42px}
.brand .marke__txt b{font-size:1.08rem}
.brand .marke__txt i{font-size:.76rem}
.burger{color:#fff;border-color:rgba(255,255,255,.35)}
@media(min-width:1000px){
  .nav{display:flex;margin-inline:auto}
  .nav__pill{display:flex;align-items:center;gap:.15rem;padding:.3rem;border-radius:999px;
    background:rgba(5,25,47,.6);border:1px solid rgba(255,255,255,.16)}
  .nav__pill li{position:relative}
  .nav__pill .nav__link{display:inline-flex;align-items:center;gap:.3rem;padding:.5rem .95rem;
    border:0;border-radius:999px;color:#fff;font-size:.88rem;font-weight:500;
    text-decoration:none;transition:background .2s,color .2s}
  .nav__pill .nav__link svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2;
    stroke-linecap:round;stroke-linejoin:round;opacity:.8}
  .nav__pill .nav__link:hover,.nav__item:hover>.nav__link,.nav__item:focus-within>.nav__link{
    background:#fff;color:var(--ink)}
  .nav__sub{position:absolute;top:calc(100% + 10px);left:0;min-width:260px;display:grid;
    padding:.5rem;background:#fff;border-radius:16px;box-shadow:var(--shadow);
    opacity:0;visibility:hidden;transform:translateY(6px);transition:.2s var(--ease)}
  .nav__sub::before{content:"";position:absolute;top:-12px;left:0;right:0;height:12px}
  .nav__item:hover .nav__sub,.nav__item:focus-within .nav__sub{opacity:1;visibility:visible;transform:none}
  .nav__sub a{display:block;padding:.55rem .8rem;border-radius:10px;color:var(--ink);
    font-size:.88rem;text-decoration:none}
  .nav__sub a:hover{background:var(--paper2);color:var(--accent-d)}
  .nav__sub .nav__alle{display:inline-flex;align-items:center;gap:.35rem;margin-top:.3rem;
    border-top:1px solid var(--line2);border-radius:0;padding-top:.7rem;color:var(--accent-d);font-weight:600}
  .nav__alle svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2;
    stroke-linecap:round;stroke-linejoin:round}
  .head-cta{margin-left:0}
  .head-cta .btn{min-height:44px;padding:.65rem 1.15rem;font-size:.86rem}
}

/* ── Hero: gerahmt, Bild hinter Text, Bewertungskarten unten ────────── */
.hero--box{position:relative;isolation:isolate;overflow:hidden;background:var(--coal);
  color:var(--on-dark);margin:0 var(--box-m);border-radius:var(--box-r);
  padding:calc(var(--nav-h) + clamp(48px,8vw,110px)) 0 clamp(26px,4vw,44px);
  min-height:min(92svh,880px);display:flex;flex-direction:column;justify-content:flex-end}
.hero__bg{position:absolute;inset:0;z-index:-2}
.hero__bild{width:100%;height:100%;object-fit:cover;object-position:62% 45%}
@media(prefers-reduced-motion:no-preference){
  .hero__bg{animation:heroFahrt 40s ease-in-out infinite alternate;transform-origin:60% 50%}
  @keyframes heroFahrt{from{transform:scale(1)}to{transform:scale(1.06)}}
}
.hero__shade{position:absolute;inset:0;z-index:-1;
  background:linear-gradient(92deg,rgba(5,25,47,.9) 0%,rgba(5,25,47,.74) 34%,
    rgba(5,25,47,.3) 62%,rgba(5,25,47,.06) 100%),
  linear-gradient(180deg,rgba(5,25,47,.22) 0%,rgba(5,25,47,0) 30%,rgba(5,25,47,.6) 100%)}
.hero__body{display:grid;gap:clamp(28px,5vw,64px)}
.hero__copy{max-width:40rem}
.hero--box h1{color:#fff;font-size:clamp(2.1rem,4.6vw,3.5rem);line-height:1.04;font-weight:700;
  text-shadow:0 2px 24px rgba(5,25,47,.45)}
.hero__soft{display:block;margin-top:.4em;font-size:.5em;font-weight:500;line-height:1.2;
  color:var(--on-dark);letter-spacing:-.01em}
.hero--box .hero__sub{margin-top:1.2rem;font-size:1.02rem;color:var(--on-dark-mut);max-width:34rem}
.hero__cta{display:flex;flex-wrap:wrap;align-items:center;gap:1rem 1.3rem;margin-top:1.6rem}
.hero__tel{display:inline-flex;align-items:center;gap:.6rem;color:#fff;text-decoration:none;font-size:1.02rem;
  margin:0;padding:0;border:0}
.hero__telico{display:grid;place-items:center;width:44px;height:44px;border-radius:50%;
  background:#fff;color:var(--accent)}
.hero__telico svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.9;
  stroke-linecap:round;stroke-linejoin:round}
.hero__rk{display:grid;gap:.9rem}
@media(min-width:900px){.hero__rk{grid-template-columns:auto 1fr;align-items:center;gap:1.6rem}}
.hero__rkl{font-family:var(--disp);font-weight:700;color:#fff;font-size:1.02rem;max-width:14rem;
  line-height:1.25;margin:0}
.hero__rkarten{display:flex;flex-wrap:wrap;gap:.7rem}
.rk{display:inline-flex;align-items:center;gap:.7rem;padding:.7rem .95rem;background:#fff;
  color:var(--ink);border-radius:14px;text-decoration:none;min-width:210px}
.rk .grate__g{width:26px;height:26px;flex:none}
.rk__ico{display:grid;place-items:center;width:30px;height:30px;border-radius:50%;
  background:var(--paper2);color:var(--accent);flex:none}
.rk__ico svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2;
  stroke-linecap:round;stroke-linejoin:round}
.rk__t{display:grid;line-height:1.2}
.rk__t b{font-size:1rem;color:var(--ink)}
.rk__t span{font-size:.76rem;color:var(--body)}
@media(max-width:600px){
  .hero--box{min-height:min(100svh,760px)}
  .hero__bild{object-position:58% 50%}
  .hero__rkarten{display:grid;grid-template-columns:1fr}
  /* Als Rasterkinder bleiben die Karten sonst inhaltsbreit und stehen
     unterschiedlich weit nach rechts — drei Stufen statt einer Kante. */
  .rk{min-width:0;width:100%}
}

/* ── Seitenköpfe der Unterseiten: gerahmt wie der Hero ──────────────── */
.phero,.phero--img{margin:0 var(--box-m);border-radius:var(--box-r);overflow:hidden;
  background:var(--coal);color:var(--on-dark);position:relative;isolation:isolate;
  padding:calc(var(--nav-h) + clamp(28px,5vw,64px)) 0 clamp(36px,5vw,64px)}
.phero h1{color:#fff}
.phero .phero__sub{color:var(--on-dark-mut)}
.phero .crumb,.phero .crumb a{color:rgba(233,242,251,.7)}
.phero--img{min-height:min(58svh,540px);display:flex;align-items:flex-end}
/* Die Korn-Regel `.phero--img>*` setzt alle Kinder auf position:relative –
   das Hintergrundbild muss davon ausgenommen bleiben, sonst wird es zum
   Flex-Kind neben dem Text (so sahen die Bezirksseiten aus). */
.phero--img>.phero__bg{position:absolute;z-index:-2}
.phero--img .container{width:100%}

/* ── Bilder tragen den großen Radius ────────────────────────────────── */
.split__media img,.ortsbild img,.gal img,.rg__bild img{border-radius:var(--r)}

/* ── Über uns: drei Spalten, Drehstempel ────────────────────────────── */
.about__in{display:grid;gap:clamp(20px,3vw,32px)}
@media(min-width:960px){.about__in{grid-template-columns:1.05fr .85fr 1.05fr;align-items:start}}
.about__a h2{margin:.5rem 0 1.4rem}
.about__bild{margin:0}
.about__bild img{width:100%;border-radius:var(--r);object-fit:cover}
.about__bild--a img{aspect-ratio:4/3}
.about__bild--b img{aspect-ratio:3/4}
.about__bild figcaption{font-size:.8rem;color:var(--body);margin-top:.5rem}
@media(min-width:960px){.about__bild--b{margin-top:2.6rem}.about__c{padding-top:.4rem}}
.about__c p{margin-top:1.1rem}
.about__c .checks{margin-top:1rem}
.about__cta{margin-top:1.4rem}
.stempel{position:relative;width:122px;height:122px}
.stempel svg{width:100%;height:100%;animation:dreh 26s linear infinite}
@media(prefers-reduced-motion:reduce){.stempel svg{animation:none}}
@keyframes dreh{to{transform:rotate(360deg)}}
.stempel__t{font-family:var(--disp);font-weight:700;font-size:9px;letter-spacing:.12em;fill:var(--coal)}
.stempel::after{content:"";position:absolute;inset:27px;border-radius:50%;border:1.5px solid var(--coal)}
.stempel__m{position:absolute;inset:0;display:grid;place-items:center;color:var(--gold)}
.stempel__m svg{width:30px;height:30px;fill:currentColor}

/* ── Bildkarten ─────────────────────────────────────────────────────── */
.bks{display:grid;gap:clamp(14px,2vw,22px)}
@media(min-width:600px){.bks{grid-template-columns:1fr 1fr}}
@media(min-width:1000px){.bks{grid-template-columns:repeat(4,1fr)}}
.bk__a{display:flex;flex-direction:column;height:100%;background:#fff;border:1px solid var(--line2);
  border-radius:var(--r-card);padding:.7rem .7rem 1.2rem;color:inherit;text-decoration:none;
  transition:transform .3s var(--ease),box-shadow .3s}
.bk__a:hover{transform:translateY(-4px);box-shadow:var(--shadow)}
.bk__media{position:relative;display:block;border-radius:calc(var(--r-card) - 6px);overflow:hidden;
  aspect-ratio:4/3;background:var(--paper2)}
.bk__img{width:100%;height:100%;object-fit:cover;display:block}
.bk__img--leer{display:grid;place-items:center;background:var(--coal);color:var(--gold)}
.bk__img--leer svg{width:44px;height:44px;fill:none;stroke:currentColor;stroke-width:1.5;
  stroke-linecap:round;stroke-linejoin:round}
.bk__tag{position:absolute;left:.7rem;top:.7rem;padding:.3rem .65rem;border-radius:999px;
  background:rgba(255,255,255,.92);color:var(--ink);font-size:.66rem;font-weight:700;
  letter-spacing:.06em;text-transform:uppercase}
.bk__h{font-size:1.06rem;margin:.9rem .45rem 0}
.bk__p{font-size:.9rem;margin:.4rem .45rem 0;flex:1}
.bk__mehr{display:inline-flex;align-items:center;gap:.35rem;margin:.9rem .45rem 0;
  font-size:.85rem;font-weight:700;color:var(--accent-d)}
.bk__mehr svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:2.2;
  stroke-linecap:round;stroke-linejoin:round;transition:transform .25s}
.bk__a:hover .bk__mehr svg,.tk__a:hover .bk__mehr svg{transform:translate(2px,-2px)}
.gk{font-size:.95rem;color:var(--accent-d);margin:2.4rem 0 1rem}
.sechd+.gk{margin-top:0}
/* Textkarten (Ratgeber) */
.tks{display:grid;gap:clamp(14px,2vw,22px)}
@media(min-width:640px){.tks{grid-template-columns:1fr 1fr}}
@media(min-width:1000px){.tks{grid-template-columns:repeat(3,1fr)}}
.tk__a{display:flex;flex-direction:column;height:100%;background:#fff;border:1px solid var(--line2);
  border-radius:var(--r-card);padding:1.3rem 1.3rem 1.2rem;color:inherit;text-decoration:none;
  transition:transform .3s var(--ease),box-shadow .3s}
.tk__a:hover{transform:translateY(-4px);box-shadow:var(--shadow)}
.tk__tag{display:inline-block;align-self:flex-start;padding:.3rem .65rem;border-radius:999px;
  background:var(--paper2);color:var(--accent-d);font-size:.66rem;font-weight:700;
  letter-spacing:.06em;text-transform:uppercase}
.tk__h{font-size:1.06rem;margin-top:.9rem}
.tk__p{font-size:.9rem;margin-top:.45rem;flex:1}
.tk__a .bk__mehr{margin-inline:0}

/* ── Bildmosaik ─────────────────────────────────────────────────────── */
.bento__grid{display:grid;gap:clamp(8px,1.2vw,14px);grid-template-columns:repeat(2,1fr)}
.bento__z{margin:0;border-radius:var(--r);overflow:hidden;background:var(--paper2)}
.bento__z img{width:100%;height:100%;object-fit:cover;aspect-ratio:4/3;border-radius:0;display:block}
@media(min-width:760px){
  .bento__grid{grid-template-columns:repeat(12,1fr)}
  .bento__z--1,.bento__z--2,.bento__z--3{grid-column:span 4}
  .bento__z--4{grid-column:span 6;grid-row:span 2}
  .bento__z--4 img{aspect-ratio:auto;height:100%}
  .bento__z--5,.bento__z--6,.bento__z--7,.bento__z--8{grid-column:span 3}
  .bento__z img{aspect-ratio:16/11}
  /* Die vier kleinen Kacheln tragen die Hochformate. Quadratisch
     beschnitten bleibt davon ein Bild übrig, im Breitformat nur ein
     Ausschnitt ohne Gegenstand. */
  .bento__z--5 img,.bento__z--6 img,.bento__z--7 img,.bento__z--8 img{aspect-ratio:1/1}
}

/* ── Vergleich: zwei gerahmte Flächen ───────────────────────────────── */
.gegen{background:transparent;padding-bottom:clamp(44px,6vw,80px)}
.gegen__kopf{padding-bottom:clamp(18px,2.6vw,28px)}
.gegen__paar{max-width:var(--maxw);margin:0 auto;padding-inline:var(--gut);gap:clamp(14px,2vw,24px)}
.gegen__sp{border-radius:var(--r-card);overflow:hidden}
.gegen__sp--a{background:var(--paper2)}
.gegen__sp--b{background:var(--coal);border:0}
@media(min-width:900px){
  .gegen__in{max-width:none;margin:0!important;padding:clamp(28px,4vw,48px)!important}
  .gegen__sp--b{border-left:0}
}

/* ── Prozess: runde Symbole, Bogenpfeile ────────────────────────────── */
.prozess__l{display:grid;gap:2rem}
@media(min-width:760px){.prozess__l{grid-template-columns:repeat(4,1fr);gap:1.4rem}}
.prozess__s{position:relative}
.prozess__ico{display:grid;place-items:center;width:64px;height:64px;border-radius:50%;
  background:#fff;border:1px solid var(--line);color:var(--accent);margin-bottom:1.1rem}
.prozess__s:first-child .prozess__ico{background:var(--accent);color:#fff;border-color:transparent}
.prozess__ico svg{width:26px;height:26px;fill:none;stroke:currentColor;stroke-width:1.7;
  stroke-linecap:round;stroke-linejoin:round}
.prozess__pfeil{display:none}
@media(min-width:760px){
  .prozess__pfeil{display:block;position:absolute;left:78px;right:8px;top:10px;height:44px;
    color:var(--ink);opacity:.75}
  .prozess__pfeil svg{width:100%;height:100%}
  .prozess__s:nth-child(even) .prozess__pfeil{transform:scaleY(-1)}
}
.prozess__s h3{font-size:1.05rem}
.prozess__s p{font-size:.92rem;margin-top:.4rem}
.section--dark .prozess__ico{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.2);color:#fff}
.section--dark .prozess__pfeil{color:#fff}

/* ── Bewertungen im Mauerwerk ───────────────────────────────────────── */
.revs{columns:1;column-gap:1.2rem}
@media(min-width:640px){.revs{columns:2}}
@media(min-width:1000px){.revs{columns:3}}
.rev{break-inside:avoid;margin-bottom:1.2rem;background:#fff;border:1px solid var(--line2);
  border-radius:var(--r-card);padding:1.3rem 1.3rem 1.2rem}
.rev__kopf{display:flex;justify-content:space-between;align-items:center}
.rev__kopf .grate__g{width:22px;height:22px}
.rev__q{margin-top:.9rem;font-size:.93rem;line-height:1.6;color:var(--ink)}
.rev__wer{display:flex;align-items:center;gap:.7rem;margin-top:1.1rem}
.rev__av{display:grid;place-items:center;width:40px;height:40px;border-radius:50%;color:#fff;
  font-weight:700;font-family:var(--disp)}
.rev__av--1{background:var(--accent)}
.rev__av--2{background:var(--coal)}
.rev__av--3{background:var(--bronze)}
.rev__av--4{background:#1F7A44}
.rev__name{display:grid;line-height:1.25}
.rev__name b{color:var(--ink);font-size:.95rem}
.rev__name span{font-size:.78rem;color:var(--body)}
.section--bg{background:var(--bg)}

/* ── Einsatzgebiete als Pin-Liste ───────────────────────────────────── */
.pins{display:flex;flex-wrap:wrap;justify-content:center;gap:.6rem .9rem;max-width:980px;margin:0 auto}
.pin{display:inline-flex;align-items:center;gap:.4rem;padding:.5rem .95rem .5rem .8rem;
  border-radius:999px;color:var(--ink);font-weight:600;font-size:.9rem;text-decoration:none;
  border:1px solid transparent;transition:.2s}
.pin svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:2;
  stroke-linecap:round;stroke-linejoin:round;color:var(--accent)}
.pin:hover{background:#fff;border-color:var(--line)}
.pin--haupt{background:var(--coal);color:#fff}
.pin--haupt svg{color:var(--gold)}
.pin--haupt:hover{background:var(--accent);border-color:transparent;color:#fff}

/* ── FAQ-Akkordeon ──────────────────────────────────────────────────── */
.faq__in{display:grid;gap:clamp(22px,3vw,40px)}
@media(min-width:900px){
  .faq__in{grid-template-columns:.9fr 1.3fr;align-items:start}
  .faq__kopf{position:sticky;top:calc(var(--head-h) + 20px)}
}
.faq__kopf .sechd{margin-bottom:0;max-width:none}
.faqs{display:grid;gap:.7rem;max-width:none;margin:0}
.faq{background:#fff;border:1px solid var(--line2);border-radius:16px;padding:0;overflow:hidden;
  transition:background .25s}
.faq__q{list-style:none;display:flex;justify-content:space-between;align-items:center;gap:1rem;
  padding:1rem 1.1rem;font-family:var(--disp);font-weight:700;font-size:.98rem;color:var(--ink);
  cursor:pointer}
.faq__q::-webkit-details-marker{display:none}
.faq__pf{display:grid;place-items:center;width:28px;height:28px;border-radius:50%;
  background:var(--paper2);color:var(--ink);flex:none;transition:transform .25s}
.faq__pf svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2.2;
  stroke-linecap:round;stroke-linejoin:round}
.faq[open]{background:var(--coal);border-color:transparent}
.faq[open] .faq__q{color:#fff}
.faq[open] .faq__pf{background:rgba(255,255,255,.14);color:#fff;transform:rotate(180deg)}
.faq__a{margin:0;padding:0 1.1rem 1.1rem;font-size:.93rem;line-height:1.6}
.faq[open] .faq__a{color:var(--on-dark)}

/* ── Kontakt: grauer Kasten, Adressblock, Karte ─────────────────────── */
.kontakt__in{display:grid;gap:clamp(22px,3vw,40px)}
@media(min-width:960px){.kontakt__in{grid-template-columns:1.05fr .95fr;align-items:start}}
.kontakt__box{background:var(--paper2);border-radius:var(--box-r);padding:clamp(20px,3vw,36px)}
.kontakt__h{font-size:1.35rem;margin-bottom:1.1rem}
.kontakt__box .fld input,.kontakt__box .fld textarea,.kontakt__box .fld select{
  background:#fff;border-color:transparent;border-radius:14px}
.kontakt__box .btn--wide{width:auto}
.kontakt__txt .sechd{margin-bottom:1.2rem;max-width:none}
.kontakt__adr{font-size:1.25rem;margin-top:1.6rem}
.kontakt__l{display:grid;gap:.5rem;margin-top:.8rem;font-size:.95rem}
.kontakt__l b{color:var(--ink);margin-right:.3rem}
.kontakt__karte{margin-top:clamp(22px,3vw,40px)}
.kontakt__karte .mapwrap{border-radius:var(--r);overflow:hidden;border:0}
/* Formularfelder allgemein: weich und rund */
.fld input,.fld textarea,.fld select{border-radius:14px}

/* ── CTA-Box ────────────────────────────────────────────────────────── */
.ctaband{background:transparent;padding:0 0 clamp(40px,6vw,72px)}
.ctaband::before{display:none}
.ctaband__box{position:relative;overflow:hidden;color:var(--on-dark);border-radius:var(--box-r);
  padding:clamp(34px,5vw,64px) clamp(22px,4vw,56px);
  background:radial-gradient(70% 90% at 85% 15%,rgba(18,86,155,.6),transparent 60%),var(--coal-dd)}
.ctaband__in{padding:0}

/* ── Kleinere Bausteine im Referenzstil ─────────────────────────────── */
.trust li{background:#fff;border:1px solid var(--line2);border-radius:var(--r-card);padding:1.2rem 1.2rem 1.3rem}
.trust__ico{width:46px;height:46px;border-radius:50%;background:var(--paper2);color:var(--accent);
  display:grid;place-items:center;box-shadow:none;margin-bottom:.8rem}
.trust li:hover .trust__ico{transform:none}
.wert__ico,.lkarte__ico,.info__ico,.citycard__ico,.fakt__ico,.qbar__ico{border-radius:50%}
.fakten-raster{border-radius:var(--r-card)}
.step__n{width:52px;height:52px}
.site-foot{margin:0 var(--box-m);border-radius:var(--box-r) var(--box-r) 0 0}
/* Ortsteile: gleiche Pille, kein Link, kein Zeigeeffekt */
.pin--ort{cursor:default;color:var(--body)}
.pin--ort:hover{background:none;border-color:transparent}
/* Schublade: der zweite Knopf steht auf Marineblau — durchsichtig, weiße Schrift */
.drawer .btn--gh{background:transparent;color:#fff;border-color:rgba(255,255,255,.4)}
/* Textlinks in dunklen Seitenköpfen müssen hell sein */
.phero p a:not(.btn),.phero .phero__note a{color:var(--accent-lt)}


/* ══════════════════════════════════════════════════════════════════════
   Session 8: Ortsseiten, Fernumzug, Ratgeber-Grafiken, breites Menü
   ══════════════════════════════════════════════════════════════════════ */

/* Einsatzgebiete-Menü in drei Spalten, unter dem Menüpunkt zentriert, damit
   es auf 1000 px nicht rechts aus dem Fenster läuft. */
@media(min-width:1000px){
  .nav__sub--breit{left:50%;transform:translate(-50%,6px);min-width:680px;
    grid-template-columns:1fr 1fr 1.1fr;gap:.1rem .6rem;padding:.9rem}
  .nav__item:hover .nav__sub--breit,.nav__item:focus-within .nav__sub--breit{transform:translate(-50%,0)}
  .nav__sub--breit .nav__alle{grid-column:1/-1}
  .nav__col{display:grid;align-content:start}
  .nav__lbl{display:block;padding:.45rem .8rem .25rem;font-size:.64rem;font-weight:700;
    letter-spacing:.1em;text-transform:uppercase;color:var(--body)}
  .nav__col .nav__col{margin-top:.2rem}
}

/* Pins in Gruppen */
.pingr{margin-top:1.3rem}
.pingr:first-of-type{margin-top:0}
.pingr__k{text-align:center;font-size:.7rem;font-weight:700;letter-spacing:.12em;
  text-transform:uppercase;color:var(--body);margin-bottom:.6rem}
.pin--rand{background:#fff;border-color:var(--line)}
.pin--rand:hover{background:var(--coal);color:#fff;border-color:transparent}
.pin--rand:hover svg{color:var(--gold)}
.pins--start{justify-content:flex-start;max-width:none;margin:.8rem 0 0}

/* Gebäudetypen / Wissenskarten */
.wk{display:grid;gap:clamp(14px,2vw,22px)}
@media(min-width:760px){.wk{grid-template-columns:repeat(3,1fr)}
  .wk--4{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1100px){.wk--4{grid-template-columns:repeat(4,1fr)}}
.wk__i{background:#fff;border:1px solid var(--line2);border-radius:var(--r-card);
  padding:1.4rem 1.4rem 1.3rem}
.wk__ico{display:grid;place-items:center;width:46px;height:46px;border-radius:50%;
  background:var(--paper2);color:var(--accent);margin-bottom:1rem}
.wk__ico svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.8;
  stroke-linecap:round;stroke-linejoin:round}
.wk__i h3{font-size:1.05rem}
.wk__i p{font-size:.92rem;margin-top:.45rem}
.wk__mehr{margin-top:.7rem;font-size:.88rem;font-weight:700}
.wk__mehr a{color:var(--accent-d)}

/* Anfahrt: Route und Fakten links, Text und Tipp rechts */
.anf__in{display:grid;gap:clamp(22px,4vw,48px);align-items:start}
@media(min-width:960px){.anf__in{grid-template-columns:1.05fr .95fr}}
.anf__q{font-size:.8rem;margin-top:.9rem}
.anf .route{margin-bottom:1rem}
.section--dark .anf__b p{color:var(--on-dark-mut)}
/* Die Routengrafik ist für helle Flächen entworfen. Auf der dunklen Fläche
   der Fernumzugsseite standen Ortsnamen und Fahrzeit in Tintenblau auf
   Marineblau — lesbar nur, wenn man weiß, was dort steht. */
.section--dark .route{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.16);
  padding:clamp(16px,2.4vw,24px) clamp(14px,2.4vw,26px) clamp(14px,2vw,20px)}
.section--dark .route__stop b,.section--dark .route__mid b{color:#fff}
.section--dark .route__mid b{color:var(--gold)}
.section--dark .route__stop small,.section--dark .route__mid small{color:var(--on-dark-mut)}
.section--dark .route__road{background:rgba(255,255,255,.12)}

/* Telefonweg im Hero als zweite Schaltfläche statt als loser Text:
   gleiche Höhe wie der Goldknopf, eigene Kontur, Symbol im weißen Kreis. */
.hero__tel{padding:.45rem 1.25rem .45rem .45rem;border-radius:999px;
  background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.34);
  font-weight:700;letter-spacing:-.01em;
  transition:background .2s var(--ease),border-color .2s var(--ease)}
.hero__tel:hover{background:rgba(255,255,255,.2);border-color:#fff}
.hero__telico{width:38px;height:38px}
.hero__telico svg{width:18px;height:18px}
@media(max-width:600px){.hero__cta .btn--pri,.hero__tel{width:100%;justify-content:center}}
.tippbox{margin-top:1.4rem;padding:1.2rem 1.3rem;border-radius:var(--r-card);
  background:var(--coal);color:var(--on-dark)}
.tippbox__k{display:inline-block;padding:.25rem .6rem;border-radius:999px;background:var(--gold);
  color:var(--ink);font-size:.64rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase}
.tippbox h3{color:#fff;margin-top:.7rem;font-size:1.02rem}
.tippbox p{margin-top:.4rem;font-size:.92rem;color:var(--on-dark-mut)}

/* Fernziele */
.ziele{display:grid;gap:.9rem}
@media(min-width:760px){.ziele{grid-template-columns:1fr 1fr}}
.ziel{background:#fff;border:1px solid var(--line2);border-radius:var(--r-card);padding:1.2rem 1.3rem}
.ziel__kopf{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:.3rem .8rem}
.ziel__kopf h3{font-size:1.05rem}
.ziel__km{font-size:.8rem;font-weight:700;color:var(--accent-d);white-space:nowrap}
.ziel p{font-size:.92rem;margin-top:.5rem}

/* Kennzahlen im Ratgeber */
.kz{display:grid;gap:.8rem;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));margin-top:.8rem}
.kz li{display:grid;gap:.15rem;padding:1.1rem 1.2rem;background:#fff;border:1px solid var(--line2);
  border-radius:var(--r-card)}
.kz b{font-family:var(--disp);font-size:1.5rem;color:var(--accent-d);letter-spacing:-.02em;line-height:1.1}
.kz span{font-size:.92rem;color:var(--ink);font-weight:600}
.kz small{font-size:.76rem;color:var(--body)}

/* Balken */
.balken{display:grid;gap:.8rem;margin-top:1.4rem}
.balken li{display:grid;grid-template-columns:minmax(0,11rem) 1fr auto;align-items:center;gap:.8rem;font-size:.9rem}
.balken__l{color:var(--ink);font-weight:600}
.balken__b{height:12px;border-radius:999px;background:var(--paper2);overflow:hidden}
.balken__b span{display:block;height:100%;width:var(--w);border-radius:999px;
  background:linear-gradient(90deg,var(--accent),var(--accent-lt))}
.balken__v{font-weight:700;color:var(--accent-d);white-space:nowrap;font-variant-numeric:tabular-nums}
@media(max-width:600px){.balken li{grid-template-columns:1fr auto}.balken__b{grid-column:1/-1}}

/* Checkliste */
.checkgrid{display:grid;gap:.8rem}
@media(min-width:640px){.checkgrid{grid-template-columns:1fr 1fr}}
.checkgrid li{display:grid;grid-template-columns:auto 1fr;gap:.15rem .8rem;padding:1rem 1.1rem;
  background:#fff;border:1px solid var(--line2);border-radius:var(--r-card)}
.checkgrid svg{width:20px;height:20px;grid-row:span 2;fill:none;stroke:var(--accent);stroke-width:2.2;
  stroke-linecap:round;stroke-linejoin:round;margin-top:.15rem}
.checkgrid b{color:var(--ink)}
.checkgrid span{font-size:.9rem}

/* Ratgeber-Kopf mit Bild: Inhaltsverzeichnis daneben */
.phero--rat .phero__grid{align-items:end}
@media(min-width:840px){.phero--rat .phero__grid{grid-template-columns:minmax(0,1fr) 300px}}
.phero--rat .toc{margin-top:0}
.phero h1{font-size:clamp(1.9rem,4.2vw,3.1rem)}


/* ── Seiten ohne dunklen Kopf ────────────────────────────────────────
   Anfrage, Bewertung und die 404 beginnen mit einer hellen Fläche. Die
   durchsichtige Kopfzeile stand dort weiß auf Weiß und wurde erst beim
   Scrollen sichtbar; das Formular der Anfrageseite lief obendrein unter
   den Kopf. Beides löst eine feste Kopfzeile plus Platz darunter. */
body.seite--hell .site-head{background:var(--coal-dd);
  box-shadow:0 12px 30px -22px rgba(5,25,47,.55)}
body.seite--hell #main>section:first-child{
  padding-top:calc(var(--nav-h) + clamp(22px,3.4vw,40px))}


/* ── Teamfoto auf der Über-uns-Seite ─────────────────────────────────── */
.teamfoto{margin:clamp(24px,3.5vw,40px) auto 0;max-width:760px}
.teamfoto img{width:100%;height:auto;border-radius:var(--r);display:block}
.teamfoto figcaption{margin-top:.7rem;font-size:.88rem;color:var(--on-dark-mut);text-align:center}


/* ── WhatsApp in der Kopfzeile: zurückhaltend ────────────────────────
   Das Vollgrün des Dienstes stand als dritter Farbton neben Marineblau
   und Gold und zog den Blick vom Goldknopf weg. Im Ruhezustand ist der
   Knopf jetzt eine durchsichtige Scheibe mit heller Kontur; die Farbe
   kommt erst beim Überfahren, wo sie der Wiedererkennung dient. */
.head-wa{background:rgba(255,255,255,.12);color:#fff;
  border:1px solid rgba(255,255,255,.34);box-shadow:none}
.head-wa:hover{background:#25D366;color:#0B3D24;border-color:transparent}
.site-head.is-stuck .head-wa{background:rgba(255,255,255,.1)}


/* Agenturhinweis in der Fußzeile — dritte Zeile, gleiche Zurückhaltung
   wie die beiden daneben. */
.foot__by a{color:inherit;text-decoration:underline;text-underline-offset:3px;
  text-decoration-color:color-mix(in srgb,currentColor 45%,transparent)}
.foot__by a:hover{color:var(--gold);text-decoration-color:currentColor}


/* ── Standortnetz: mehrere Standorte, Umzüge deutschlandweit ─────────
   Drei Auftritte, je nach Umgebung. In der Kopfleiste die stillste Form
   (dieselbe Schriftgröße wie Anschrift und Kontaktweg, kein Rahmen); im
   Hero eine helle Pille auf dem Bild, damit sie den Goldknopf nicht
   überstrahlt; im Standortblock eine einfache Zeile unter der Anschrift.

   Die Kopfleiste hat drei Felder auf einer Zeile: Anschrift, Netz,
   Kontakt. Unter 1100 px wird es eng, dann fällt das Netz zuerst weg —
   die Anschrift weist die Firma aus, das Netz ergänzt nur. */
.utilbar__netz{display:inline-flex;align-items:center;gap:.4rem;
  color:inherit;white-space:nowrap}
@media(max-width:1099px){.utilbar__netz{display:none}}

.hero__netz{display:inline-flex;align-items:center;gap:.5rem;
  margin:1.15rem 0 0;padding:.42rem .9rem .42rem .72rem;border-radius:999px;
  background:rgba(255,255,255,.13);border:1px solid rgba(255,255,255,.3);
  color:#fff;font-size:.84rem;font-weight:600;line-height:1.35}
.hero__netz svg{width:15px;height:15px;flex:none;fill:none;stroke:currentColor;
  stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.hero__netz .netz__b::before,.local__netz .netz__b::before{content:' · '}
/* Auf schmalen Geraeten traegt der erste Teil allein: die ganze Zeile
   braeche um und stuende als zweizeilige Pille im Bild. */
@media(max-width:600px){
  .hero__netz{font-size:.8rem}
  .hero__netz .netz__b{display:none}
}

.local__netz{display:flex;align-items:center;gap:.45rem;margin:.65rem 0 0;
  font-size:.86rem;color:var(--body)}
.local__netz svg{width:15px;height:15px;flex:none;fill:none;stroke:currentColor;
  stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;color:var(--accent)}