/* ============================================================
   ZL RÄUMUNGEN — Design-System
   Auswahl vom 20.08.2026:
   PAL-08 Hell mit Navy · TYP-06 Archivo + IBM Plex Sans
   NAV-05 · HERO-01 · LEI-02 · ABL-02 · TRU-03 · PRE-06
   FAQ-03 · CTA-01 · FUS-04 · SLZ-02
   Randlos, kantig (kein border-radius), ein Akzent.
   ============================================================ */

:root{
  /* Flächen */
  --navy:#0D1B3E;
  --navy-2:#16274F;
  --navy-3:#1E3260;
  --pg:#F1F3F7;
  --card:#FFFFFF;
  --sunk:#E4E8F0;

  /* Linien */
  --line:rgba(30,33,36,.14);
  --line-2:rgba(30,33,36,.26);
  --line-d:rgba(255,255,255,.16);
  --line-d2:rgba(255,255,255,.28);

  /* Schrift */
  --hd:#0D1B3E;
  --tx:#3C4763;
  --tx-2:#4A5470;
  --tx-mut:#59637E;
  --on-dark:rgba(255,255,255,.78);
  --on-dark-hd:#FFFFFF;
  --on-dark-mut:rgba(255,255,255,.58);

  /* Akzent — nur Aktion, Aktiv, Fehler */
  --acc:#CC0000;
  /* Gleicher Wert unter anderem Namen. Das Formular (.aform) definiert ein
     eigenes --acc und koennte sich sonst nur selbst referenzieren — eine
     ringfoermige Variable, die CSS als ungueltig verwirft. */
  --acc-marke:var(--acc);
  --acc-2:#A80000;
  --acc-ink:#FFFFFF;
  --acc-soft:rgba(204,0,0,.08);
  /* Hinweise dürfen nicht rot sein: Rot bedeutet hier Fehler */
  --info:#0F6B8C;
  --ok:#1E7A4C;

  --wrap:1240px;
  --hd-h:76px;                   /* Höhe der klebenden Kopfzeile */
  --slz:60px;                    /* Höhe der fixen Schlusszeile */
  --sp:clamp(18px,3.4vw,40px);
  --sec:clamp(52px,7vw,104px);   /* vertikaler Sektionsabstand */

  --fd:"Archivo",system-ui,-apple-system,"Segoe UI",sans-serif;
  --fb:"IBM Plex Sans",system-ui,-apple-system,"Segoe UI",sans-serif;

  color-scheme:light;
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

body{
  margin:0; background:var(--pg); color:var(--tx);
  font-family:var(--fb); font-size:16.5px; line-height:1.7;
  -webkit-font-smoothing:antialiased;
  padding-bottom:var(--slz);      /* Platz für die fixe Schlusszeile */
  /* clip statt hidden: hidden macht den Body zum Scroll-Container und
     bricht position:sticky im Kopf — auf Mobilgeräten regelmässig sichtbar. */
  overflow-x:clip;
}
@supports not (overflow:clip){
  body{overflow-x:hidden}
}
h1,h2,h3,h4{font-family:var(--fd); color:var(--hd); margin:0; line-height:1.06; text-wrap:balance; letter-spacing:-.02em}
h1{font-size:clamp(25px,3.4vw,39px); font-weight:800; text-transform:uppercase}
h2{font-size:clamp(21px,2.5vw,29px); font-weight:800; text-transform:uppercase}
h3{font-size:clamp(17px,1.6vw,20px); font-weight:700}
h4{font-size:15.5px; font-weight:700}
p{margin:0}
p + p{margin-top:1em}
a{color:inherit; text-decoration:none}
img{max-width:100%; height:auto; display:block}
:focus-visible{outline:3px solid var(--acc); outline-offset:2px}
::selection{background:var(--acc); color:var(--acc-ink)}

.wrap{max-width:var(--wrap); margin-inline:auto; padding-inline:var(--sp)}
.sec{padding-block:var(--sec)}
.sec-sunk{background:var(--sunk)}
.sec-dark{background:var(--navy); color:var(--on-dark)}
.sec-dark h1,.sec-dark h2,.sec-dark h3,.sec-dark h4{color:var(--on-dark-hd)}
.lead{font-size:clamp(16.5px,1.35vw,18.5px); color:var(--tx); max-width:62ch}
.sec-dark .lead{color:var(--on-dark)}
.muted{color:var(--tx-mut)}
.prose{max-width:68ch}
.prose h2{font-size:clamp(18.5px,1.9vw,23px); margin-top:1.7em; margin-bottom:.45em; letter-spacing:-.01em}
.prose h2:first-child{margin-top:0}
.prose h3{margin-top:1.6em; margin-bottom:.5em}
.prose h3:first-child{margin-top:0}

/* Kicker */
.kick{
  display:inline-flex; align-items:center; gap:10px;
  font-family:var(--fd); font-size:12px; font-weight:700;
  letter-spacing:.2em; text-transform:uppercase; color:var(--acc);
  margin-bottom:16px;
}
.kick::before{content:""; width:26px; height:2px; background:var(--acc); flex:none}
.sec-dark .kick,.hero .kick,.form-sec .kick{color:var(--acc-hell)}
.sec-dark .kick::before,.hero .kick::before,.form-sec .kick::before{background:var(--acc-hell)}

/* Knöpfe */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  font-family:var(--fd); font-weight:700; font-size:15px;
  letter-spacing:.09em; text-transform:uppercase;
  padding:15px 26px; border:1px solid transparent; cursor:pointer;
  transition:background .16s ease, color .16s ease, border-color .16s ease;
}
.btn-a{background:var(--acc); color:var(--acc-ink); border-color:var(--acc)}
.btn-a:hover{background:var(--navy); border-color:var(--navy)}
.btn-b{background:transparent; color:var(--hd); border-color:var(--line-2)}
.btn-b:hover{background:var(--hd); color:#fff; border-color:var(--hd)}
.sec-dark .btn-b{color:#fff; border-color:var(--line-d2)}
.sec-dark .btn-b:hover{background:#fff; color:var(--navy)}
.btn svg{width:18px; height:18px; flex:none}

/* ============================================================
   NAV-05 — Kopfzeile mit grosser Telefonnummer, klebend
   ============================================================ */
.hd{
  position:sticky; top:0; z-index:80; background:var(--navy);
  border-bottom:1px solid var(--line-d);
  /* Bezugspunkt für das Mega-Menü */
  position:-webkit-sticky; position:sticky;
}
.hd{isolation:isolate}
/* Kopf über die volle Fensterbreite — kein zentrierter Container,
   nur ein Innenabstand zum Rand. Gibt der Navigation genug Platz,
   damit «Über uns» nicht mehr umbricht. */
.hd-in{
  padding-inline:var(--sp);
  display:flex; align-items:center; gap:24px; min-height:76px;
}
.logo{display:flex; align-items:center; gap:11px; flex:none}
.logo i{
  width:40px; height:40px; background:var(--acc); color:var(--acc-ink); flex:none;
  display:grid; place-items:center; font-style:normal;
  font-family:var(--fd); font-weight:800; font-size:14px; letter-spacing:.06em;
}
.logo b{font-family:var(--fd); font-weight:800; font-size:20px; color:#fff; letter-spacing:.01em; line-height:1}
.logo span{display:block; font-size:10px; letter-spacing:.16em; text-transform:uppercase; color:var(--on-dark-mut); margin-top:3px; font-weight:500}
.nav{display:flex; gap:22px; margin-left:auto}
/* Der Leistungen-Link liegt eine Ebene tiefer in .has-sub. Ohne den zweiten
   Selektor fällt genau dieser Punkt aus der Reihe — falsche Schrift,
   keine Versalien, andere Grösse. */
.nav > a, .nav > .has-sub > a, .nav-btn{
  font-family:var(--fd); font-size:13.5px; font-weight:600; letter-spacing:.1em;
  text-transform:uppercase; color:var(--on-dark); padding:6px 0;
  border:0; background:none; cursor:pointer; border-bottom:2px solid transparent;
  transition:color .16s ease, border-color .16s ease; display:inline-flex; align-items:center; gap:6px;
  white-space:nowrap;
}
/* Der kleine Pfeil zeigt an, dass sich hier ein Untermenü öffnet.
   Er dreht sich mit, sobald das Menü aufgeht — dieselbe Bewegung,
   die man von Auswahlfeldern kennt. */
.nav-pf{
  width:13px; height:13px; flex:none; opacity:.65;
  transition:transform .18s ease, opacity .16s ease;
}
.has-sub:hover > a .nav-pf,
.has-sub:focus-within > a .nav-pf{transform:rotate(180deg); opacity:1}
@media (prefers-reduced-motion:reduce){.nav-pf{transition:none}}
.nav > a:hover, .nav > .has-sub > a:hover, .nav-btn:hover{color:#fff}
.nav > a[aria-current="page"],
.nav > .has-sub > a[aria-current="page"]{color:#fff; border-bottom-color:var(--acc)}
.hd-tel{
  display:flex; align-items:center; gap:11px; flex:none; margin-left:8px;
  color:#fff; font-family:var(--fd);
}
.hd-tel svg{width:26px; height:26px; color:var(--acc); flex:none}
.hd-tel small{display:block; font-size:10px; letter-spacing:.15em; text-transform:uppercase; color:var(--on-dark-mut); font-weight:600}
.hd-tel b{font-size:23px; font-weight:800; letter-spacing:.01em; line-height:1.1; white-space:nowrap}
.hd-cta{flex:none}
.burger{display:none; margin-left:auto; background:none; border:1px solid var(--line-d2); color:#fff; width:44px; height:44px; cursor:pointer; padding:0}
.burger svg{width:22px; height:22px; margin:auto}

/* ---------- Ausklappmenü (Mobil) ----------
   Liegt im klebenden Kopf und scrollt bei Bedarf selbst,
   damit der Kopf oben und die Schlusszeile unten sichtbar bleiben. */
.nav-drop{
  display:none; background:var(--navy-2); border-bottom:3px solid var(--acc);
  max-height:calc(100dvh - var(--hd-h) - var(--slz)); overflow-y:auto; overscroll-behavior:contain;
}
.nav-drop.on{display:block}
.nav-drop-in{padding:14px var(--sp) 22px}
.nav-drop .grp{
  font-family:var(--fd); font-size:10.5px; font-weight:700; letter-spacing:.2em;
  text-transform:uppercase; color:#FF5348; margin:16px 0 8px;
}
.nav-drop .grp:first-child{margin-top:4px}
.nav-drop ul{margin:0; padding:0; list-style:none}
.nav-drop li + li{border-top:1px solid var(--line-d)}
/* :not(.btn) — sonst erbt der rote Offerten-Knopf im Ausklappmenü
   die Textfarbe für dunklen Grund und wird unlesbar. */
.nav-drop a:not(.btn){
  display:flex; align-items:center; gap:12px; padding:13px 0;
  font-family:var(--fd); font-size:15px; font-weight:600; color:var(--on-dark);
}
.nav-drop a svg{width:20px; height:20px; color:var(--acc); flex:none}
.nav-drop a:not(.btn):hover,.nav-drop a:not(.btn):focus-visible{color:#fff}
.nav-drop .drop-cta{display:grid; gap:9px; margin-top:20px}
.nav-drop .drop-cta .btn{width:100%}

/* ---------- Mega-Menü (Desktop) ---------- */
.has-sub{position:static}
.mega{
  position:absolute; left:0; right:0; top:100%;
  background:var(--navy-2); border-top:1px solid var(--line-d);
  border-bottom:3px solid var(--acc);
  box-shadow:0 24px 60px rgba(12,14,15,.45);
  opacity:0; visibility:hidden; transform:translateY(-8px);
  transition:opacity .18s ease, transform .18s ease, visibility .18s;
  z-index:70;
}
.has-sub:hover .mega,
.has-sub:focus-within .mega,
.mega:hover{opacity:1; visibility:visible; transform:translateY(0)}
/* Zieht mit dem Kopf auf volle Breite, damit die Spalten unter der
   Navigation stehen und der Kontaktblock unter dem Offerten-Knopf. */
.mega-in{
  padding:26px var(--sp) 30px;
  display:grid; grid-template-columns:repeat(4,1fr) .95fr; gap:6px 22px; align-items:start;
}
.mega-t{
  grid-column:1/-1; display:flex; align-items:center; gap:12px; margin-bottom:6px;
  font-family:var(--fd); font-size:11px; font-weight:700; letter-spacing:.2em;
  text-transform:uppercase; color:#FF5348;
}
.mega-t::after{content:""; flex:1; height:1px; background:var(--line-d)}
.mega a.mega-i{
  display:flex; gap:13px; padding:13px 14px; align-items:flex-start;
  border:1px solid transparent; transition:background .15s ease, border-color .15s ease;
}
.mega a.mega-i:hover{background:rgba(255,255,255,.06); border-color:var(--line-d2)}
.mega-i svg{width:24px; height:24px; color:var(--acc); flex:none; margin-top:2px}
.mega-i b{
  display:block; font-family:var(--fd); font-size:15px; font-weight:700;
  color:#fff; letter-spacing:0; text-transform:none; line-height:1.25; margin-bottom:3px;
}
.mega-i span{display:block; font-size:12.5px; color:var(--on-dark-mut); line-height:1.45}
.mega-cta{
  grid-column:5; grid-row:2/span 2; align-self:stretch;
  background:var(--navy-3); border:1px solid var(--line-d); padding:20px;
  display:flex; flex-direction:column; justify-content:center;
}
.mega-cta b{display:block; font-family:var(--fd); font-size:17px; color:#fff; margin-bottom:7px; text-transform:none; letter-spacing:0}
.mega-cta p{font-size:13px; color:var(--on-dark-mut); line-height:1.5; margin-bottom:16px}
.mega-cta .btn{width:100%; padding:12px 16px; font-size:13px}
.mega-cta .tel{
  display:flex; align-items:center; gap:9px; margin-top:11px; color:#fff;
  font-family:var(--fd); font-weight:700; font-size:16px;
}
.mega-cta .tel svg{width:17px; height:17px; color:var(--acc); flex:none}

/* ============================================================
   HERO-01 — Text links, Bild rechts
   ============================================================ */
.hero{background:var(--navy); color:var(--on-dark); position:relative; overflow:hidden}
.hero-in{
  max-width:var(--wrap); margin-inline:auto; padding-inline:var(--sp);
  display:grid; grid-template-columns:1.06fr .94fr; gap:clamp(28px,4vw,60px); align-items:center;
  /* Füllt genau den sichtbaren Bereich zwischen klebender Kopfzeile und
     fixer Schlusszeile. vh zuerst als Rückfall, dvh darüber: auf Mobilgeräten
     ändert sich die sichtbare Höhe, wenn die Browserleiste ein- und ausfährt. */
  min-height:calc(100vh - var(--hd-h) - var(--slz));
  min-height:calc(100dvh - var(--hd-h) - var(--slz));
}
.hero-tx{padding-block:clamp(44px,5vw,72px); position:relative; z-index:2}
.hero h1{color:#fff}
.hero h1 em{font-style:normal; color:#FF5348}
.hero .lead{color:var(--on-dark); margin-top:20px}
.hero-acts{display:flex; gap:12px; flex-wrap:wrap; margin-top:32px}
.hero-facts{
  display:flex; gap:26px; flex-wrap:wrap; margin-top:34px;
  padding-top:26px; padding-bottom:30px;
  border-top:1px solid var(--line-d);
}
.hero-facts div{display:flex; align-items:center; gap:9px; font-size:14px; color:var(--on-dark)}
.hero-facts svg{width:19px; height:19px; color:var(--acc-hell); flex:none}
/* ---------- Bewegtbild im Seitenkopf ----------
   Ein Video, das von selbst startet und länger als fünf Sekunden läuft,
   braucht nach WCAG 2.2.2 einen Weg, es anzuhalten. Der Knopf sitzt
   deshalb sichtbar im Bild. Bei «prefers-reduced-motion» läuft nichts:
   dann zeigt die Seite das Standbild. */
.hero-vid-h{position:relative; width:100%; height:100%}
.hero-vid{display:block; width:100%; height:100%; object-fit:cover; object-position:center}
.hero-vid-still{display:none}
/* Overlay über dem Bewegtbild: nach unten hin dichter. Es nimmt dem
   rohen Handyvideo die Flachheit, setzt es in denselben Anthrazit wie
   den Fussbereich und gibt dem Anhalteknopf unten rechts einen ruhigen
   Grund. Über dem Overlay steht kein Text — die Schrift bleibt links
   auf hellem Grund, hier geht es allein um die Bildwirkung. */
.hero-vid-ab{
  position:absolute; inset:0; z-index:1; pointer-events:none;
  background:
    linear-gradient(186deg, rgba(18,20,22,.42) 0%, rgba(18,20,22,.06) 38%, rgba(18,20,22,.62) 100%),
    linear-gradient(90deg, rgba(18,20,22,.30) 0%, rgba(18,20,22,0) 30%),
    rgba(18,20,22,.14);
}
.hero-vid-halt{
  transition:opacity .18s ease, background .16s ease, border-color .16s ease;
  position:absolute; right:14px; bottom:14px; z-index:2;
  width:44px; height:44px; padding:0; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  background:rgba(20,22,24,.62); border:1px solid rgba(255,255,255,.34);
  color:#fff;
  -webkit-backdrop-filter:blur(3px); backdrop-filter:blur(3px);
}
.hero-vid-halt:hover{background:rgba(20,22,24,.82); border-color:#fff}
/* Wo es einen Mauszeiger gibt, bleibt der Knopf im Ruhezustand unsichtbar:
   das Bewegtbild soll als Grundfläche wirken, nicht als Abspielgerät. Er
   erscheint beim Überfahren und bei Tastaturfokus.

   Auf Geräten ohne Mauszeiger bleibt er sichtbar — dort gäbe es sonst
   überhaupt keinen Weg, das Video anzuhalten. Genau das verlangt
   WCAG 2.2.2 für alles, was von selbst startet und länger als fünf
   Sekunden läuft. Ein nur bei Hover erscheinender Knopf wäre auf dem
   Telefon schlicht nicht vorhanden. */
@media (hover:hover) and (pointer:fine){
  .hero-vid-halt{opacity:0; pointer-events:none}
  .hero-vid-h:hover .hero-vid-halt,
  .hero-vid-halt:focus-visible{opacity:1; pointer-events:auto}
}
/* Auf dem Telefon steht die klebende Schlusszeile über dem unteren Rand des
   Bildfensters. Ohne diesen Abstand liegt sie genau auf dem Anhalteknopf —
   sichtbar bleibt er, klickbar nicht mehr. Der Testlauf prüft mit
   elementFromPoint, was am Knopf wirklich obenauf liegt. */
@media (hover:none){
  .hero-vid-halt{bottom:calc(14px + var(--slz))}
}
.hero-vid-halt svg{width:17px; height:17px; fill:currentColor}
.hero-vid-halt .vid-play{display:none}
.hero-vid-halt[aria-label="Video abspielen"] svg{display:none}
.hero-vid-halt[aria-label="Video abspielen"] .vid-play{display:block}
@media (prefers-reduced-motion:reduce){
  .hero-vid,.hero-vid-halt{display:none}
  .hero-vid-still{display:block; width:100%; height:100%}
}

.hero-media{position:relative; align-self:stretch; min-height:280px}
.hero-media .ph{position:absolute; inset:0}


/* ---------- Fotos ---------- */
.bild{display:block; overflow:hidden; background:var(--sunk)}
.bild img{width:100%; height:100%; object-fit:cover; display:block}
/* Im Startbereich und in der grossen Kachel füllt das Bild die Fläche */
.hero-media .bild{position:absolute; inset:0}
.tile--big .bild{position:absolute; inset:0}
.tile--big .bild img{transition:transform .5s ease}
.tile--big:hover .bild img{transform:scale(1.04)}
@media (prefers-reduced-motion:reduce){.tile--big:hover .bild img{transform:none}}
/* Platzhalterbild — nur noch wo kein Foto vorliegt */
.ph{
  background:linear-gradient(135deg,var(--navy-3),var(--navy-2));
  position:relative; overflow:hidden; display:grid; place-items:center;
}
.ph::after{
  content:""; position:absolute; inset:0;
  background-image:repeating-linear-gradient(45deg,transparent 0 13px,rgba(255,255,255,.032) 13px 26px);
}
.ph svg{width:44px; height:44px; color:rgba(255,255,255,.3); position:relative}
.ph--light{background:linear-gradient(135deg,var(--sunk),#DEDEDE)}
.ph--light svg{color:rgba(30,33,36,.24)}
.ph-note{
  position:absolute; bottom:12px; left:12px; z-index:2;
  font-family:var(--fd); font-size:10px; font-weight:600; letter-spacing:.14em; text-transform:uppercase;
  background:rgba(0,0,0,.42); color:rgba(255,255,255,.8); padding:4px 9px;
}
.ph--light .ph-note{background:rgba(30,33,36,.1); color:rgba(30,33,36,.55)}

/* Schwebende Elemente — dezent, nur Dekoration */
.float{position:absolute; color:var(--acc); opacity:.4; pointer-events:none; z-index:1}
.float svg{width:100%; height:100%; display:block}
.hero .float{animation:bob 9s ease-in-out infinite}
.hero .float:nth-of-type(1){width:66px; height:66px; left:-22px; top:22%; animation-delay:-1.2s}
.hero .float:nth-of-type(2){width:46px; height:46px; right:44%; top:9%; animation-delay:-4.1s; opacity:.26}
.hero .float:nth-of-type(3){width:54px; height:54px; left:38%; bottom:8%; animation-delay:-6.4s; opacity:.2}
.hero--start .float--r{color:#fff; opacity:.13; z-index:1}
.hero--start .float--r:nth-of-type(4){width:78px; height:78px; right:8%; top:14%; animation-delay:-2.3s}
.hero--start .float--r:nth-of-type(5){width:58px; height:58px; left:53%; top:62%; animation-delay:-5.7s; opacity:.1}
.hero--start .float--r:nth-of-type(6){width:66px; height:66px; right:6%; bottom:12%; animation-delay:-7.9s; opacity:.11}
.hero--start .float--r:nth-of-type(7){width:50px; height:50px; left:56%; top:24%; animation-delay:-3.4s; opacity:.09}
@keyframes bob{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-20px) rotate(5deg)}}
@keyframes bob2{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-26px) rotate(-6deg)}}
.hero--start .float--r:nth-of-type(5),
.hero--start .float--r:nth-of-type(7){animation-name:bob2; animation-duration:11s}
@media (prefers-reduced-motion:reduce){.hero .float{animation:none}}

/* Einblenden beim Scrollen */
.rise{opacity:0; transform:translateY(22px); transition:opacity .55s ease, transform .55s ease}
.rise.in{opacity:1; transform:none}
@media (prefers-reduced-motion:reduce){.rise{opacity:1; transform:none; transition:none}}

/* ============================================================
   LEI-02 — Leistungen als Bento
   ============================================================ */
/* Zwölf Spalten, damit beide Teilungen aufgehen: Das Bild nimmt die
     halbe Breite und zwei Reihen Höhe, rechts daneben stehen vier
     Kacheln als Zweierblock, darunter die restlichen drei nebeneinander.
     Mit sechs Spalten liesse sich die Dreierreihe nicht teilen, mit
     vieren wäre das Bild so breit wie seine Nachbarn. */
.bento{display:grid; grid-template-columns:repeat(12,1fr); gap:16px; margin-top:38px}
.bento > .tile:nth-child(2),
.bento > .tile:nth-child(3),
.bento > .tile:nth-child(4),
.bento > .tile:nth-child(5){grid-column:span 3}    /* zwei mal zwei neben dem Bild */
.bento > .tile:nth-child(6),
.bento > .tile:nth-child(7),
.bento > .tile:nth-child(8),
.bento > .tile:nth-child(9){grid-column:span 3}    /* untere Reihe: vier */
.tile{
  background:var(--card); border:1px solid var(--line); padding:28px;
  display:flex; flex-direction:column; position:relative;
  transition:border-color .18s ease, transform .18s ease, box-shadow .18s ease;
}
.tile:hover{border-color:var(--acc); transform:translateY(-3px); box-shadow:0 14px 34px rgba(30,33,36,.09)}
.tile .ic{width:38px; height:38px; color:var(--acc); margin-bottom:18px; flex:none}
.tile h3{margin-bottom:8px}
.tile p{font-size:15px; color:var(--tx-mut); line-height:1.55}
.tile .go{
  margin-top:auto; padding-top:18px; display:inline-flex; align-items:center; gap:8px;
  font-family:var(--fd); font-size:12.5px; font-weight:700; letter-spacing:.11em;
  text-transform:uppercase; color:var(--acc);
}
.tile .go svg{width:16px; height:16px; transition:transform .18s ease}
.tile:hover .go svg{transform:translateX(5px)}
.tile--big{
  grid-column:span 6; grid-row:span 2; padding:0; overflow:hidden;
  min-height:340px; justify-content:flex-end; color:#fff;
}
.tile--big .ph{position:absolute; inset:0}
.tile--big .tile-in{position:relative; z-index:2; padding:32px; background:linear-gradient(0deg,rgba(12,14,15,.94) 30%,rgba(12,14,15,0))}
.tile--big h3{color:#fff; font-size:clamp(24px,2.6vw,32px); text-transform:uppercase}
.tile--big p{color:rgba(255,255,255,.76); font-size:16px}
.tile--big .ic{color:#FF5348}
.tile--big:hover{transform:none; border-color:var(--acc)}

/* ============================================================
   ABL-02 — Ablauf als senkrechte Zeitachse
   ============================================================ */
.tl{margin-top:40px; border-left:2px solid var(--line-2); padding-left:34px; margin-left:7px; max-width:820px}
.sec-dark .tl{border-left-color:var(--line-d2)}
.tl-step{position:relative; padding-block:20px}
.tl-step::before{
  content:""; position:absolute; left:-42px; top:26px;
  width:15px; height:15px; background:var(--acc); outline:5px solid var(--pg);
}
.sec-sunk .tl-step::before{outline-color:var(--sunk)}
.sec-dark .tl-step::before{outline-color:var(--navy)}
.tl-step .n{
  font-family:var(--fd); font-size:12px; font-weight:800;
  letter-spacing:.18em; text-transform:uppercase; color:var(--acc);
}
.tl-step h3{margin:8px 0 7px}
.tl-step p{font-size:15.5px; color:var(--tx-mut); max-width:60ch}
.sec-dark .tl-step p{color:var(--on-dark)}

/* ============================================================
   TRU — Vertrauen (Merkmale; Kundenstimmen sobald echte vorliegen)
   ============================================================ */
.usp{display:grid; grid-template-columns:repeat(4,1fr); gap:16px; margin-top:38px}
.usp-c{background:var(--card); border:1px solid var(--line); padding:26px}
.usp-c .ic{width:32px; height:32px; color:var(--acc); margin-bottom:15px}
.usp-c h4{margin-bottom:6px}
.usp-c p{font-size:14.5px; color:var(--tx-mut); line-height:1.5}

.stimmen{display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-top:38px}
.stimme{background:var(--card); border:1px solid var(--line); padding:26px}
.stimme .stars{color:var(--acc); letter-spacing:.16em; font-size:15px; margin-bottom:12px}
.stimme q{display:block; font-size:16px; color:var(--tx); line-height:1.6; font-style:italic}
.stimme .wer{margin-top:14px; font-size:13.5px; color:var(--tx-mut); font-weight:600}

/* ============================================================
   PRE-06 / FAQ — Aufklapplisten
   ============================================================ */
.akk{margin-top:34px; border-top:1px solid var(--line)}
.akk-i{border-bottom:1px solid var(--line)}
.akk-q{
  width:100%; display:flex; align-items:center; gap:18px; text-align:left;
  background:none; border:0; padding:20px 0; cursor:pointer; color:var(--hd);
  font-family:var(--fd); font-size:clamp(17px,1.7vw,20px); font-weight:700; line-height:1.3;
}
.akk-q:hover{color:var(--acc)}
.akk-q .pl{
  margin-left:auto; flex:none; width:26px; height:26px; position:relative;
  border:1px solid var(--line-2); transition:background .18s ease, border-color .18s ease;
}
.akk-q .pl::before,.akk-q .pl::after{
  content:""; position:absolute; inset:0; margin:auto; background:var(--acc);
  transition:transform .2s ease, background .18s ease;
}
.akk-q .pl::before{width:12px; height:2px}
.akk-q .pl::after{width:2px; height:12px}
.akk-i.on .akk-q .pl{background:var(--acc); border-color:var(--acc)}
.akk-i.on .akk-q .pl::before,.akk-i.on .akk-q .pl::after{background:#fff}
.akk-i.on .akk-q .pl::after{transform:rotate(90deg)}
/* Aufklappen über grid-template-rows 0fr → 1fr: bewegt sich weich,
   ohne dass eine Pixelhöhe gemessen werden müsste. visibility nimmt den
   geschlossenen Text zusätzlich aus der Vorlesereihenfolge. */
.akk-a{
  display:grid; grid-template-rows:0fr; visibility:hidden;
  transition:grid-template-rows .34s cubic-bezier(.32,.72,0,1), visibility .34s;
}
.akk-i.on .akk-a{grid-template-rows:1fr; visibility:visible}
.akk-a-in{overflow:hidden}
.akk-a p{font-size:16px; color:var(--tx-mut); max-width:70ch; padding:0 44px 22px 0}
.akk-q .pl::before,.akk-q .pl::after{transition:transform .3s cubic-bezier(.32,.72,0,1)}
@media (prefers-reduced-motion:reduce){
  .akk-a{transition:none}
  .akk-q .pl::before,.akk-q .pl::after{transition:none}
}

/* FAQ-03 — Reiter nach Thema */
.tabs{display:flex; gap:0; margin-top:30px; border-bottom:1px solid var(--line); flex-wrap:wrap}
.tab{
  background:none; border:0; border-bottom:2px solid transparent; margin-bottom:-1px;
  padding:13px 22px; cursor:pointer; color:var(--tx-mut);
  font-family:var(--fd); font-size:14px; font-weight:700; letter-spacing:.1em; text-transform:uppercase;
  transition:color .16s ease, border-color .16s ease;
}
.tab:hover{color:var(--hd)}
.tab[aria-selected="true"]{color:var(--hd); border-bottom-color:var(--acc)}
.tab-p[hidden]{display:none}
.tab-p .akk{margin-top:6px; border-top:0}

/* ============================================================
   CTA-01 — rotes Band
   ============================================================ */
.band{background:var(--acc); color:var(--acc-ink)}
.band-in{
  max-width:var(--wrap); margin-inline:auto; padding:clamp(38px,5vw,60px) var(--sp);
  display:flex; align-items:center; gap:clamp(20px,3vw,44px); flex-wrap:wrap;
}
.band h2{color:#fff; flex:1; min-width:min(100%,320px)}
.band p{color:rgba(255,255,255,.9); margin-top:10px; max-width:52ch}
.band .btn-a{background:#fff; color:var(--acc-2); border-color:#fff}
.band .btn-a:hover{background:var(--navy); color:#fff; border-color:var(--navy)}
.band .btn-b{color:#fff; border-color:rgba(255,255,255,.5)}
.band .btn-b:hover{background:#fff; color:var(--acc-2); border-color:#fff}
.band-acts{display:flex; gap:12px; flex-wrap:wrap}

/* ============================================================
   FUS-04 — Fussbereich mit Abschluss-Aufruf
   ============================================================ */
.ft{background:var(--navy); color:var(--on-dark)}
.ft-cta{background:var(--acc); color:var(--acc-ink)}
.ft-cta-in{
  max-width:var(--wrap); margin-inline:auto; padding:clamp(30px,4vw,46px) var(--sp);
  display:flex; align-items:center; gap:26px; flex-wrap:wrap;
}
.ft-cta h2{color:#fff; flex:1; min-width:min(100%,280px); font-size:clamp(22px,2.6vw,30px); text-transform:uppercase}
.ft-cta .btn-b{color:#fff; border-color:rgba(255,255,255,.5)}
.ft-cta .btn-b:hover{background:#fff; color:var(--acc-2)}
/* Wertband über dem Hauptteil der Fusszeile — vier Werte mit Symbol,
   durch senkrechte Linien getrennt, wie auf dem Werbebanner des Betriebs. */
.ft-werte{border-bottom:1px solid var(--line-d); background:rgba(0,0,0,.14)}
.ft-werte-in{
  max-width:var(--wrap); margin-inline:auto; padding:26px var(--sp);
  display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:0;
}
.ft-werte-in > div{
  display:flex; flex-direction:column; align-items:center; text-align:center;
  gap:9px; padding:0 18px;
}
.ft-werte-in > div + div{border-left:1px solid var(--line-d)}
.ft-werte svg{width:30px; height:30px; color:var(--acc-hell); stroke-width:1.5}
.ft-werte b{
  font-family:var(--fd); font-size:13px; font-weight:800;
  letter-spacing:.13em; text-transform:uppercase; color:#fff;
}
.ft-werte span{font-size:12.5px; line-height:1.45; color:var(--on-dark-mut)}

.ft-haupt{
  max-width:var(--wrap); margin-inline:auto; padding:clamp(38px,5vw,64px) var(--sp);
  display:grid; grid-template-columns:1.45fr .85fr .85fr 1.05fr; gap:clamp(24px,3vw,44px);
}
.ft-claim{font-size:14.5px; line-height:1.65; color:var(--on-dark); margin:16px 0 22px; max-width:42ch}
.ft-kontakt{margin:0; padding:0; list-style:none; display:grid; gap:11px}
.ft-kontakt li{display:flex; align-items:flex-start; gap:11px; font-size:14.5px; padding:0}
.ft-kontakt svg{width:17px; height:17px; color:var(--acc-hell); flex:none; margin-top:3px}
.ft-kontakt a{color:#fff; font-weight:600}
.ft-kontakt a:hover{color:var(--acc-hell)}
.ft-tel{font-family:var(--fd); font-size:19px !important; letter-spacing:.01em}
.ft-marken{display:flex; flex-wrap:wrap; gap:8px; margin-top:24px}
.ft-marken span{
  display:inline-flex; align-items:center; gap:6px;
  border:1px solid var(--line-d); padding:6px 11px;
  font-family:var(--fd); font-size:11.5px; font-weight:600;
  letter-spacing:.07em; text-transform:uppercase; color:var(--on-dark);
}
.ft-marken svg{width:13px; height:13px; color:var(--acc-hell); flex:none}
.ft-sp h4,.ft-sp h2{margin-bottom:15px}
.ft-mehr{margin-top:14px; font-size:13.5px}
.ft-mehr a{display:inline-flex; align-items:center; gap:7px; color:var(--acc-hell); font-weight:600}
.ft-mehr svg{width:15px; height:15px; flex:none; transition:transform .18s ease}
.ft-mehr a:hover svg{transform:translateX(4px)}

/* Häufig gesucht — Einstiegspunkte, die zugleich intern verlinken */
.ft-hilfe{border-top:1px solid var(--line-d); background:rgba(0,0,0,.16)}
.ft-hilfe-in{max-width:var(--wrap); margin-inline:auto; padding:22px var(--sp)}
.ft-hilfe h4,.ft-hilfe h2{margin-bottom:13px}
.ft-tags{display:flex; flex-wrap:wrap; gap:8px}
.ft-tags a{
  border:1px solid var(--line-d); padding:7px 13px; font-size:13px;
  color:var(--on-dark); transition:background .16s ease, border-color .16s ease, color .16s ease;
}
.ft-tags a:hover{background:var(--acc); border-color:var(--acc); color:var(--acc-ink)}
.ft h4,.ft-sp h2,.ft-hilfe h2{color:#fff; font-family:var(--fd); font-size:13px; letter-spacing:.16em; text-transform:uppercase; margin-bottom:16px}
.ft ul{margin:0; padding:0; list-style:none; font-size:14.5px}
.ft li{padding:5px 0}
.ft a:hover{color:#fff}
.ft .logo{margin-bottom:16px}
.ft-adr{font-size:14.5px; line-height:1.75}
.ft-adr a{color:#fff; font-weight:600}
.ft-base{
  border-top:1px solid var(--line-d);
  max-width:var(--wrap); margin-inline:auto; padding:18px var(--sp);
  display:flex; gap:20px; flex-wrap:wrap; font-size:13px; color:var(--on-dark-mut);
}
.ft-base .sep{margin-left:auto}
.ft-base a:hover{color:#fff}

/* Soziale Kanäle rechts in der Schlusszeile des Fussbereichs. Sie stehen
   hinter dem Umsetzungshinweis, den `margin-left:auto` bereits nach rechts
   schiebt — dadurch sitzen beide am rechten Rand, ohne eigenen Kniff.

   Gefasst als `.ft-base .ft-social a` (0,2,1) und nicht als `.ft-social a`
   (0,1,1): die allgemeine Tippziel-Regel `.ft-base a` ist gleich spezifisch
   und setzt `display:flex` samt Mindesthöhe. Bei gleicher Spezifität gewinnt
   die spätere Regel — und in der 900px-Abfrage steht sie später. Die beiden
   Symbole würden dort zu vollbreiten Zeilen auseinandergezogen. */
.ft-social{display:flex; gap:8px; align-items:center}
.ft-base .ft-social a{
  width:36px; height:36px; min-height:36px; padding:0; flex:none;
  display:inline-flex; align-items:center; justify-content:center;
  border:1px solid var(--line-d2); color:var(--on-dark-mut);
  transition:color .18s ease, border-color .18s ease, background .18s ease;
}
.ft-base .ft-social a:hover{color:var(--acc-ink); background:var(--acc); border-color:var(--acc)}
.ft-social svg{width:18px; height:18px}

/* ============================================================
   SLZ-02 — fixe Schlusszeile mit drei Aktionen
   ============================================================ */
.slz{
  position:fixed; left:0; right:0; bottom:0; z-index:90; height:var(--slz);
  background:var(--card); border-top:1px solid var(--line);
  box-shadow:0 -2px 14px rgba(30,33,36,.07);
  display:flex; align-items:stretch;
}
.slz a{
  flex:1; display:flex; align-items:center; justify-content:center; gap:10px;
  color:var(--hd); border-right:1px solid var(--line);
  font-family:var(--fd); font-size:13.5px; font-weight:700; letter-spacing:.1em; text-transform:uppercase;
  transition:background .16s ease, color .16s ease;
}
.slz svg{color:var(--acc)}
.slz a:last-child{border-right:0; background:var(--acc); color:var(--acc-ink)}
.slz a:last-child svg{color:var(--acc-ink)}
.slz a:hover{background:var(--sunk)}
.slz a:last-child:hover{background:var(--acc-2)}
.slz svg{width:19px; height:19px; flex:none}
.slz .lbl-lang{display:inline}
.slz .lbl-kurz{display:none}

/* ============================================================
   Formular — dunkler Block auf heller Seite
   ============================================================ */
.form-sec{background:var(--navy); padding-block:var(--sec)}
.form-sec h2{color:#fff}
.form-sec .lead{color:var(--on-dark)}
.form-hold{margin-top:34px}

/* ============================================================
   Bausteine
   ============================================================ */
.brot{
  font-size:13px; color:var(--tx-mut); padding-block:16px;
  display:flex; gap:9px; flex-wrap:wrap; align-items:center;
}
.brot a:hover{color:var(--acc)}
.brot span[aria-current]{color:var(--hd); font-weight:600}
.brot .sl{opacity:.45}

.split{display:grid; grid-template-columns:1.15fr .85fr; gap:clamp(28px,4vw,56px); align-items:start}
/* Die Zusammenfassung neben dem Fliesstext bleibt beim Scrollen stehen,
   solange ihr Abschnitt sichtbar ist — der Text daneben ist immer deutlich
   länger. Zwei Bedingungen: nur zweispaltig (einspaltig steht die Karte
   unter dem Text, Kleben wäre dort sinnlos) und nur bei genug Fensterhöhe,
   sonst würde die Karte oben festhängen und unten abgeschnitten.
   align-items:start am Container ist die Voraussetzung — ein gestrecktes
   Rasterfeld füllt die ganze Zeile und kann nicht kleben. */
@media (min-width:901px) and (min-height:680px){
  .split > aside{
    position:sticky;
    top:calc(var(--hd-h) + 20px);
  }
}
.liste{margin:28px 0 0; padding:0; list-style:none}
.liste li{position:relative; padding:9px 0 9px 32px; font-size:16px; border-bottom:1px solid var(--line)}
.liste li::before{
  content:""; position:absolute; left:0; top:19px; width:14px; height:2px; background:var(--acc);
}
.karte{background:var(--card); border:1px solid var(--line); padding:28px}
.karte--acc{border-left:3px solid var(--acc)}
.karte h3{margin-bottom:10px}
.karte p{font-size:15.5px; color:var(--tx-mut)}
.preis-box{background:var(--sunk); border-left:3px solid var(--acc); padding:24px 26px; margin-top:30px}
.preis-box p{font-size:16px}

.rel{display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-top:30px}
.rel a{
  background:var(--card); border:1px solid var(--line); padding:22px;
  display:flex; align-items:center; gap:14px;
  transition:border-color .18s ease, transform .18s ease;
}
.rel a:hover{border-color:var(--acc); transform:translateY(-2px)}
.rel svg{width:26px; height:26px; color:var(--acc); flex:none}
.rel b{font-family:var(--fd); font-size:17px; color:var(--hd); display:block}
.rel span{font-size:13px; color:var(--tx-mut)}

.gebiet{display:flex; flex-wrap:wrap; gap:10px; margin-top:26px}
.gebiet span{
  border:1px solid var(--line-2); padding:8px 16px; font-size:14px; color:var(--tx);
  font-family:var(--fd); font-weight:600; letter-spacing:.05em;
}
.sec-dark .gebiet span{border-color:var(--line-d2); color:var(--on-dark)}
/* Der eigene Kanton wird hervorgehoben — er ist der Bezugspunkt für
   «meist schon am nächsten Werktag». */
.gebiet span.gebiet--kern{
  border-color:var(--acc); color:var(--acc); font-weight:600;
  background:var(--acc-soft);
}

/* ============================================================
   Einzugsgebiet — schematische Karte mit pulsierenden Punkten
   ============================================================ */
.geo{display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(28px,4vw,54px); align-items:center; margin-top:38px}
.karte-ch{position:relative; width:100%}
.karte-ch svg{width:100%; height:auto; display:block; overflow:visible}
/* Kantonsflächen der echten Landkarte */
.kt{stroke:var(--card); stroke-width:1.6; stroke-linejoin:round; transition:fill .2s ease}
.kt--rest{fill:color-mix(in srgb, var(--acc) 10%, transparent)}
.kt--de{fill:color-mix(in srgb, var(--acc) 26%, transparent)}
.kt--kern{fill:color-mix(in srgb, var(--acc) 52%, transparent)}

.pin-g{cursor:default}
.pin-p{fill:var(--acc); opacity:.28; transform-box:fill-box; transform-origin:center}
.pin-g .pin-p{animation:pulsieren 3.4s ease-out infinite}
.pin-k{fill:var(--acc)}
.pin-g--kern .pin-k{r:8}
.pin-g--kern .pin-p{fill:var(--acc); opacity:.34}
.pin-l{
  font-family:var(--fd); font-size:19px; font-weight:700; fill:var(--hd);
  paint-order:stroke; stroke:var(--pg); stroke-width:7px; stroke-linejoin:round;
}
.sec-sunk .pin-l{stroke:var(--sunk)}
.pin-g--kern .pin-l{font-size:25px; fill:var(--hd)}
@keyframes pulsieren{
  0%{transform:scale(.55); opacity:.55}
  70%{transform:scale(2.3); opacity:0}
  100%{transform:scale(2.3); opacity:0}
}
@media (prefers-reduced-motion:reduce){
  .pin-g .pin-p{animation:none; opacity:.2}
}
.karte-note{
  margin-top:12px; font-size:12.5px; color:var(--tx-mut); text-align:center;
  font-family:var(--fd); letter-spacing:.06em; text-transform:uppercase;
}
/* Auf schmalen Bildschirmen wären 19 Beschriftungen zu klein zum Lesen.
   Dort bleiben nur die pulsierenden Punkte — die Ortsnamen stehen
   vollständig in der Kantonsliste direkt darunter. */
@media (max-width:760px){
  .pin-l{display:none}
  .pin-k{r:7}
  .pin-g--kern .pin-k{r:10}
  .pin-p{r:9}
}

/* Kantonsliste */
.kt-liste{display:grid; grid-template-columns:repeat(auto-fill,minmax(210px,1fr)); gap:1px; background:var(--line); border:1px solid var(--line); margin-top:26px}
.kt-c{background:var(--card); padding:15px 17px}
.kt-c b{
  display:flex; align-items:baseline; gap:8px; font-family:var(--fd);
  font-size:15px; color:var(--hd); margin-bottom:5px;
}
.kt-c b i{font-style:normal; font-size:11px; color:var(--acc); letter-spacing:.1em; font-weight:700}
.kt-c span{font-size:13px; color:var(--tx-mut); line-height:1.5; display:block}
.kt-c--kern{background:var(--navy); border-left:3px solid var(--acc)}
.kt-c--kern b{color:#fff}
.kt-c--kern span{color:var(--on-dark-mut)}

/* Fussbereich: Einzugsgebiet mehrspaltig */
.ft-geo{columns:2; column-gap:20px}
.ft-geo li{break-inside:avoid}

.kontakt-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-top:34px}
.kontakt-c{background:var(--card); border:1px solid var(--line); padding:26px}
.kontakt-c .ic{width:28px; height:28px; color:var(--acc); margin-bottom:14px}
.kontakt-c b{display:block; font-family:var(--fd); font-size:19px; color:var(--hd); margin-bottom:5px}
.kontakt-c a{color:var(--acc); font-weight:600}
.kontakt-c a:hover{text-decoration:underline}

/* Rechtstexte */
.legal h2{font-size:clamp(20px,2.2vw,26px); margin:2em 0 .6em}
.legal h2:first-of-type{margin-top:1em}
.legal p,.legal li{font-size:16px; color:var(--tx)}
.legal ul{padding-left:22px}
.legal li{margin:.4em 0}
.legal table{width:100%; border-collapse:collapse; margin-top:1em; font-size:15px}
.legal th,.legal td{border:1px solid var(--line); padding:10px 12px; text-align:left; vertical-align:top}
.legal th{background:var(--sunk); font-family:var(--fd); font-size:12px; letter-spacing:.1em; text-transform:uppercase}
.hinweis{border-left:3px solid var(--info); background:rgba(15,107,140,.07); padding:14px 18px; margin-top:20px; font-size:15px}

/* ============================================================
   Schmale Bildschirme
   ============================================================ */
@media (max-width:1180px){
  .mega-in{grid-template-columns:repeat(3,1fr) .95fr}
  .mega-cta{grid-column:4}
}
/* Eigene Schwellen für den Kopf: Er läuft über die volle Breite und
   hält die Menüpunkte einzeilig, dadurch braucht die volle Leiste
   rund 1260px. Darunter wird sie erst kompakter, dann übernimmt der
   Menüknopf — sonst schöbe der Offerten-Knopf die Seite quer. */
@media (max-width:1400px){
  .hd-tel b{font-size:19px}
  .nav{gap:16px}
  .nav > a, .nav > .has-sub > a, .nav-btn{font-size:12.5px}
}
@media (max-width:1260px){
  .nav,.hd-cta{display:none}
  .burger{display:flex}
  .hd-tel{margin-left:auto}
  .hd-tel small{display:none}
}
@media (max-width:1080px){
  .ft-haupt{grid-template-columns:1fr 1fr}
  .usp{grid-template-columns:1fr 1fr}
  .geo{grid-template-columns:1fr}
  .karte-ch{max-width:560px; margin-inline:auto}
}
@media (max-width:900px){
  .ft-geo{columns:1}
  .hero-in{grid-template-columns:1fr; min-height:0}
  .hero-media{min-height:230px; margin-bottom:clamp(30px,5vw,44px)}
  .hero-tx{padding-block:clamp(34px,5vw,52px) 0}
  /* Zwischenbreite: durchgehend Paare, das Bild behält die halbe Breite
     als erste Kachel. Kompakter als ein Bild über die volle Breite. */
  .bento{grid-template-columns:repeat(4,1fr)}
  .bento > .tile:nth-child(n){grid-column:span 2}
  .tile--big{grid-row:span 1; min-height:250px}
  .split,.rel,.stimmen,.kontakt-grid{grid-template-columns:1fr}
  .slz .lbl-lang{display:none}
  .slz .lbl-kurz{display:inline}
}
/* Sehr schmale Geräte: der Kopf wird kompakt, damit Logo,
   Telefon und Menüknopf nebeneinander Platz haben.
   Die volle Nummer steht weiterhin in der Schlusszeile unten. */
@media (max-width:620px){
  :root{--hd-h:64px}                     /* Kopf wird hier kompakter */
  .hd-in{gap:12px; min-height:64px; padding-inline:16px}
  .logo i{width:34px; height:34px; font-size:12px}
  .logo b{font-size:17px}
  /* Der Zusatz «Räumen · Reinigen · Entsorgen» bleibt: er nennt die
     Leistungen und ist damit mehr als eine Ortsangabe. */
  .logo span span{font-size:8.5px; letter-spacing:.1em}
  .hd-tel{gap:0; margin-left:auto}
  .hd-tel span{display:none}             /* Text weg, Hörer bleibt */
  .hd-tel svg{width:24px; height:24px}
  .burger{width:40px; height:40px}
  .nav-drop{max-height:calc(100dvh - var(--hd-h) - var(--slz))}
}
@media (max-width:600px){
  body{font-size:16px}
  .kt-liste{grid-template-columns:1fr}
  .karte-note{font-size:11px}
  .bento,.usp{grid-template-columns:1fr}
  .bento > .tile:nth-child(n),
  .tile--big{grid-column:span 1}
  .ft-haupt{grid-template-columns:1fr}
  .hero-facts{gap:14px}
  .hero-facts div{font-size:13px}
  .tl{padding-left:24px; margin-left:6px}
  .tl-step::before{left:-32px; width:13px; height:13px}
  .akk-q{font-size:17px; gap:12px}
  .akk-a{padding-right:0}
  .tab{padding:11px 15px; font-size:13px}
  .slz a{font-size:11px; letter-spacing:.05em; gap:7px}
  .slz svg{width:17px; height:17px}
}

@media print{
  .hd,.slz,.band,.ft-cta,.form-sec,.burger{display:none !important}
  body{padding-bottom:0; background:#fff}
  .ph{background:#eee}
}

/* ============================================================
   Arbeitsweise — nummerierte Schritte mit Zuständigkeiten
   ============================================================ */
/* ---------- Ablauf als Kachelraster ----------
   Acht Schritte mit vollem Text ergaben einen Abschnitt von rund 2500px.
   Als Viererraster mit je einem Satz bleibt die Aussage, der Abschnitt
   schrumpft auf ein Fünftel. Die Nummern halten die Reihenfolge zusammen,
   die nebeneinanderliegende Kacheln sonst verlieren. */
.ablauf-raster{
  display:grid; grid-template-columns:repeat(4,1fr); gap:12px;
  list-style:none; margin:34px 0 0; padding:0; counter-reset:none;
}
.ablauf-k{background:var(--card); border:1px solid var(--line); padding:18px 18px 20px}
.ablauf-n{
  display:block; font-family:var(--fd); font-size:21px; font-weight:800;
  color:var(--acc); line-height:1; letter-spacing:.02em;
}
.ablauf-k b{
  display:block; font-family:var(--fd); font-size:15px; font-weight:700;
  color:var(--hd); margin-top:10px; line-height:1.28;
}
.ablauf-d{display:block; font-size:11.5px; color:var(--tx-mut); margin-top:3px}
.ablauf-k p{margin-top:10px; font-size:13.5px; color:var(--tx-mut); line-height:1.55}
@media (max-width:1000px){.ablauf-raster{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.ablauf-raster{grid-template-columns:1fr}}
/* ============================================================
   Geschäftskunden
   ============================================================ */
.b2b-g{display:grid; grid-template-columns:repeat(2,1fr); gap:16px; margin-top:34px}
.b2b-gc{background:var(--card); border:1px solid var(--line); border-left:3px solid var(--acc); padding:24px 26px}
.b2b-gc .ic{width:28px; height:28px; color:var(--acc); margin-bottom:14px}
.b2b-gc h3{margin-bottom:8px}
.b2b-gc p{font-size:15px; color:var(--tx-mut); line-height:1.6}
.b2b-v{display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--line); border:1px solid var(--line); margin-top:16px}
.b2b-vc{background:var(--card); padding:20px 22px}
.b2b-vc .ic{width:22px; height:22px; color:var(--acc); margin-bottom:11px}
.b2b-vc b{display:block; font-family:var(--fd); font-size:15px; color:var(--hd); margin-bottom:5px}
.b2b-vc span{display:block; font-size:13.5px; color:var(--tx-mut); line-height:1.55}

@media (max-width:900px){
  .schritt-teil{grid-template-columns:1fr; gap:12px}
  .b2b-g{grid-template-columns:1fr}
  .b2b-v{grid-template-columns:1fr 1fr}
}
@media (max-width:600px){
  .schritt{padding:20px}
  .schritt-nr{font-size:22px}
  .b2b-v{grid-template-columns:1fr}
  .b2b-gc{padding:20px}
}

/* ============================================================
   Leistungskarten auf den Leistungsseiten
   Von jeder Leistung zu jeder anderen — keine Sackgasse.
   ============================================================ */
.lei-karten{
  display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin-top:32px;
}
.lei-k{
  background:var(--card); border:1px solid var(--line); padding:22px 20px 18px;
  display:flex; flex-direction:column; position:relative;
  transition:border-color .18s ease, transform .18s ease, box-shadow .18s ease;
}
a.lei-k:hover{border-color:var(--acc); transform:translateY(-3px); box-shadow:0 12px 30px rgba(28,31,34,.10)}
.lei-k .ic{width:28px; height:28px; color:var(--acc); margin-bottom:14px; flex:none}
.lei-k b{display:block; font-family:var(--fd); font-size:16px; color:var(--hd); margin-bottom:5px; line-height:1.25}
.lei-k > span{display:block; font-size:13.5px; color:var(--tx-mut); line-height:1.5}
.lei-go{
  margin-top:auto; padding-top:14px; display:inline-flex !important; align-items:center; gap:7px;
  font-family:var(--fd); font-size:11.5px; font-weight:700; letter-spacing:.1em;
  text-transform:uppercase; color:var(--acc);
}
.lei-go svg{width:14px; height:14px; transition:transform .18s ease}
a.lei-k:hover .lei-go svg{transform:translateX(4px)}
.lei-k > .lei-tipp,
.lei-k > .lei-hier{
  position:absolute; top:0; right:0; width:auto;
  font-family:var(--fd); font-size:9.5px; font-weight:700; letter-spacing:.1em;
  text-transform:uppercase; padding:4px 9px; line-height:1.4;
}
.lei-k > .lei-tipp{background:var(--acc); color:var(--acc-ink)}
.lei-k > .lei-hier{background:var(--hd); color:var(--card)}
.lei-k--tipp{border-color:color-mix(in srgb, var(--acc) 40%, var(--line))}
.lei-k--hier{background:var(--sunk); border-style:dashed}
.lei-k--hier b{color:var(--tx-mut)}

@media (max-width:1080px){ .lei-karten{grid-template-columns:repeat(3,1fr)} }
@media (max-width:820px){ .lei-karten{grid-template-columns:repeat(2,1fr)} }
@media (max-width:520px){ .lei-karten{grid-template-columns:1fr} }

/* ============================================================
   /mkurti — Umsetzungsseite
   Trägt die Verweise auf die passenden Unterseiten von mkurti.ch.
   Bewusst ruhig gehalten: Sie ist Beleg, nicht Werbefläche.
   ============================================================ */
.mk-fakten{
  display:grid; grid-template-columns:repeat(4,1fr); gap:1px;
  background:var(--line); border:1px solid var(--line);
  margin-top:clamp(28px,4vw,42px);
}
.mk-fakten > div{background:var(--card); padding:16px 18px}
.mk-fakten b{
  display:block; font-family:var(--fd); font-size:10px; font-weight:700;
  letter-spacing:.16em; text-transform:uppercase; color:var(--tx-mut); margin-bottom:6px;
}
.mk-fakten span{display:block; font-size:14.5px; color:var(--hd); font-weight:600; line-height:1.4}

.mk-label{
  display:flex; align-items:center; gap:14px; margin:clamp(34px,4.5vw,52px) 0 18px;
}
.mk-label span{
  font-family:var(--fd); font-size:11px; font-weight:700; letter-spacing:.2em;
  text-transform:uppercase; color:var(--acc); flex:none;
}
.mk-label i{flex:1; height:1px; background:var(--line)}

.mk-karten{display:grid; grid-template-columns:repeat(3,1fr); gap:14px}
.mk-k{
  display:flex; flex-direction:column; gap:9px; padding:20px 20px 18px;
  background:var(--card); border:1px solid var(--line);
  transition:border-color .16s ease, box-shadow .16s ease, transform .16s ease;
}
.mk-k:hover{border-color:var(--acc); transform:translateY(-2px)}
.mk-k > svg{width:24px; height:24px; color:var(--acc); flex:none}
.mk-k > b{font-family:var(--fd); font-size:16px; font-weight:700; color:var(--hd); line-height:1.25}
.mk-k > span{font-size:14px; color:var(--tx-mut); line-height:1.55}
.mk-k > .mk-go{
  margin-top:auto; padding-top:10px; display:inline-flex; align-items:center; gap:7px;
  font-family:var(--fd); font-size:12px; font-weight:700; letter-spacing:.09em;
  text-transform:uppercase; color:var(--acc);
}
.mk-k > .mk-go svg{width:15px; height:15px; transition:transform .16s ease}
.mk-k:hover > .mk-go svg{transform:translateX(3px)}

.mk-cta{
  margin-top:clamp(38px,5vw,60px); padding:clamp(24px,3.4vw,34px);
  background:var(--sunk); border-left:3px solid var(--acc);
}
.mk-cta b{display:block; font-family:var(--fd); font-size:18px; color:var(--hd); margin-bottom:8px}
.mk-cta p{color:var(--tx-mut); max-width:60ch}
.mk-btns{display:flex; flex-wrap:wrap; gap:11px; margin-top:20px}

@media (max-width:1000px){
  .mk-karten{grid-template-columns:repeat(2,1fr)}
  .mk-fakten{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:620px){
  .mk-karten,.mk-fakten{grid-template-columns:1fr}
}

/* ============================================================
   Anfrageseite — reine Formularseite
   Muster: Ajeti v2-design/reinigungs-offerte.html

   Auf dieser Seite gibt es keinen Fussbereich. Kopfzeile oben und
   Schlusszeile unten bleiben, dazwischen füllt das Formular den
   sichtbaren Bereich exakt aus. Die Seite selbst scrollt nicht —
   gescrollt wird nur im Formularinhalt, damit Schrittleiste und
   Weiter-Knopf in jedem Schritt sichtbar bleiben.
   ============================================================ */
body.ist-formular{
  /* Der Platz für die fixe Schlusszeile steckt bereits in der
     Höhenrechnung unten; das übliche Polster würde die Seite
     um genau diesen Betrag zu hoch machen. */
  padding-bottom:0;
  overflow:hidden;
}
/* Auf der Anfrageseite gibt es keine Schlusszeile — sonst bliebe unten
   ein leerer Streifen, und die Höhenrechnung stimmte nicht. */
body.ist-formular{--slz:0px}
.form-seite{
  height:calc(100vh - var(--hd-h) - var(--slz));
  height:calc(100dvh - var(--hd-h) - var(--slz));
  overflow:hidden;
}
.form-seite .aform{height:100%; max-width:none; margin:0}
.form-seite .aform .card{height:100%; min-height:0; border:0}

/* Auf sehr flachen Fenstern wird der Formularkasten sonst unbedienbar.
   Dann darf die Seite ausnahmsweise doch scrollen. */
@media (max-height:520px){
  body.ist-formular{overflow:auto; padding-bottom:var(--slz)}
  .form-seite{height:auto; min-height:420px}
}

/* Auch auf dem Desktop soll nur der Formularinhalt scrollen, damit
   Schrittleiste und Zurück/Weiter in jedem Schritt stehen bleiben.
   In der Vorlage (Ajeti) gilt das nur bis 720px, weil dort .card auf
   Flex umgestellt wurde — das zerstörte das zweispaltige Raster. Hier
   bleibt .card ein Raster; nur .body wird zur Spalte. */
@media (min-width:721px){
  .form-seite .aform--page .body{
    display:flex; flex-direction:column; overflow:hidden; min-height:0;
  }
  .form-seite .aform--page .prog{flex:none}
  .form-seite .aform--page .scrollraum{
    flex:1; min-height:0; overflow-y:auto;
    overscroll-behavior:contain; width:100%;
  }
  .form-seite .aform--page .foot-nav{
    flex:none; margin-top:0; padding-top:14px; background:var(--card);
  }
}

/* ============================================================
   Ansprechperson — Karte mit rundem Porträt
   Das Runde ist die einzige bewusste Ausnahme vom kantigen Aufbau:
   Bei einem Gesicht liest es sich als Person, nicht als Bildkachel.
   ============================================================ */
.person{display:flex; gap:16px; align-items:center; margin-top:16px}
.person .person-bild{
  flex:none; width:84px; height:84px; border-radius:50%;
  overflow:hidden; background:var(--sunk);
  box-shadow:0 0 0 3px var(--card), 0 0 0 4px var(--line);
}
.person .person-bild img{width:100%; height:100%; object-fit:cover; display:block}
.person-tx{min-width:0}
.person-rolle{
  display:block; font-family:var(--fd); font-size:10px; font-weight:700;
  letter-spacing:.16em; text-transform:uppercase; color:var(--acc); margin-bottom:4px;
}
.person-tx b{
  display:block; font-family:var(--fd); font-size:17px; font-weight:700;
  color:var(--hd); line-height:1.2;
}
.person-fn{display:block; font-size:13px; color:var(--tx-mut); line-height:1.45; margin-top:3px}
.person-tel{
  display:inline-flex; align-items:center; gap:7px; margin-top:9px;
  font-family:var(--fd); font-size:15px; font-weight:700; color:var(--hd);
  transition:color .16s ease;
}
.person-tel svg{width:16px; height:16px; color:var(--acc); flex:none}
.person-tel:hover{color:var(--acc)}

/* Grössere Fassung auf der Kontaktseite */
.person:not(.person--k){flex-direction:column; text-align:center; gap:14px; padding:26px}
.person:not(.person--k) .person-bild{width:112px; height:112px}
.person:not(.person--k) .person-tel{margin-top:12px}



/* Band-Fassung: für Seiten ohne Randspalte. Porträt links, Aussage
   rechts, über die Inhaltsbreite — kein Kasten in der Ecke, sondern
   eine eigene Zeile im Lesefluss. */
.person--band{
  flex-direction:row; align-items:center; gap:clamp(20px,3vw,32px);
  padding:clamp(22px,3vw,30px); border-left:3px solid var(--acc);
}
.person--band .person-bild{width:108px; height:108px}
.person--band .person-tx{flex:1}
.person--band .person-fn{max-width:62ch; font-size:14.5px}
@media (max-width:620px){
  .person--band{flex-direction:column; text-align:center}
  .person--band .person-tx{width:100%}
}

/* Preisauskunft: Anruf und Formular direkt dort, wo die Frage steht */
.preis-akt{display:flex; flex-wrap:wrap; gap:11px; margin-top:20px}
.preis-akt .btn{flex:1 1 auto; min-width:200px}


/* ============================================================
   Startseite: eigener Auftritt

   Die Unterseiten arbeiten mit dem zentrierten Zweispalter — Text
   links, Objektfoto rechts, beides im 1240px-Raster. Die Startseite
   teilt stattdessen die volle Breite hälftig: links die Ansprache auf
   hellem Grund, rechts die Auswahl auf dunkler Fläche. Die Trennkante
   läuft dadurch genau durch die Mitte und gibt den Kacheln einen
   Grund, auf dem sie stehen, statt frei im Weiss zu schweben.
   ============================================================ */
.hero--start{background:none}
.hero--start .hero-in{
  max-width:none; padding-inline:0;
  grid-template-columns:1fr 1fr;     /* hälftig, wie gewünscht */
  gap:0;
  position:relative;
}
/* Die beiden Hälften als Flächen hinter dem Inhalt. Als Verlauf über
   die ganze Breite statt als zwei Kästen — so bleibt die Kante scharf,
   ohne dass ein Rundungsfehler eine Haarlinie sichtbar macht. */
.hero--start .hero-in::before{
  content:""; position:absolute; inset:0; z-index:0;
  background:linear-gradient(90deg,
    var(--pg) 0%, color-mix(in srgb, var(--sunk) 55%, var(--pg)) 49.98%,
    transparent 50%);
}
/* Foto in der rechten Hälfte, dunkel überzogen, damit die Kacheln
   lesbar bleiben und das Bild trotzdem durchscheint. */
.hero--start .hero-in::after{
  content:""; position:absolute; inset:0 0 0 50%; z-index:0;
  background:
    linear-gradient(200deg,
      color-mix(in srgb, var(--hero-flaeche) 80%, transparent) 0%,
      color-mix(in srgb, var(--hero-flaeche2) 93%, transparent) 100%),
    var(--hero-bild) center/cover no-repeat;
}
:root{--hero-bild:image-set(url("/bilder/hero.webp") type("image/webp"), url("/bilder/hero.jpg") type("image/jpeg"))}
:root{
  --hero-flaeche:color-mix(in srgb, var(--navy) 92%, #000);
  --hero-flaeche2:color-mix(in srgb, var(--navy) 58%, #000);
}
[data-modus="dunkel"]{--hero-flaeche:#101A33; --hero-flaeche2:#080D1A}

.hero--start .hero-tx{
  position:relative; z-index:2;
  /* Mittig in der eigenen Hälfte: am Raster ausgerichtet blieb rechts
     eine ungleiche Lücke, weil die Hälfte breiter ist als der Text. */
  width:min(100%, 560px); margin-inline:auto;
  padding-inline:var(--sp);
}
.hero--start .hero-lei{position:relative; z-index:2}

/* Grössere Stimme als auf den Unterseiten */
.hero--start h1{font-size:clamp(28px,3.9vw,47px); line-height:1.03}
/* «und der ganzen Deutschschweiz» hängt an der Überschrift, soll sie
   aber nicht erschlagen — eine Spur kleiner und in normaler Stärke. */
.hero--start .h1-zusatz{font-size:.66em; font-weight:600; letter-spacing:0}
.hero--start .lead{font-size:clamp(16.5px,1.4vw,19px); max-width:42ch; margin-top:22px}
.hero--start .hero-acts{margin-top:32px}
.hero--start .hero-acts .btn{padding:16px 28px; font-size:15px}
.hero--start .hero-facts{margin-top:34px; padding-top:24px; padding-bottom:30px; gap:24px}
.hero--start .hero-facts div{font-size:14px}

@media (max-width:900px){
  /* Einspaltig trägt die Zweiteilung nicht — dann untereinander,
     die dunkle Fläche wandert unter die Kacheln.

     Reihenfolge auf dem Telefon: Titel, Kacheln, Text. Wer eine Räumung
     sucht, weiss meist schon welche und soll mit einem Griff dort sein,
     statt erst an einem Absatz vorbeizuscrollen. Dafür wird die
     Textspalte mit display:contents aufgelöst — ihre Kinder werden
     damit selbst zu Elementen des Kopfes und lassen sich mit «order»
     um den Kachelblock herum anordnen. Die Polsterung der aufgelösten
     Spalte muss dabei an die Kinder wandern, sonst fällt sie weg. */
  .hero--start .hero-in{display:flex; flex-direction:column; gap:0}
  .hero--start .hero-in::before,
  .hero--start .hero-in::after{display:none}
  .hero--start .float--r{display:none}
  .hero--start{background:linear-gradient(170deg,#FFFFFF 0%,var(--pg) 46%,var(--sunk) 100%)}

  .hero--start .hero-tx{display:contents}
  .hero--start .kick,
  .hero--start h1,
  .hero--start .lead,
  .hero--start .hero-acts,
  .hero--start .hero-facts{width:100%; padding-inline:var(--sp)}
  .hero--start .kick{order:1; margin-top:clamp(30px,6vw,46px)}
  .hero--start h1{order:2}
  .hero--start .hero-lei{order:3}
  .hero--start .lead{order:4; margin-top:0}
  .hero--start .hero-acts{order:5}
  .hero--start .hero-facts{order:6}

  .hero--start .hero-lei{
    width:100%;
    background:
      linear-gradient(200deg,
        color-mix(in srgb, var(--hero-flaeche) 80%, transparent) 0%,
        color-mix(in srgb, var(--hero-flaeche2) 93%, transparent) 100%),
      var(--hero-bild) center/cover no-repeat;
    padding:clamp(24px,4.5vw,34px) var(--sp);
    margin-block:clamp(22px,4vw,30px) clamp(22px,4vw,30px);
  }
  /* Am Rechner füllt das Raster die halbe Kopfhöhe — deshalb strecken
     sich die Zeilen. Auf dem Telefon gibt es diese Restfläche nicht:
     dort blähen sich dieselben Karten sonst auf gut 250 Pixel Höhe auf.
     Die Zeilen richten sich hier nach ihrem Inhalt. */
  .hero--start .hero-lei{justify-content:flex-start}
  .hero--start .hero-lei-g{flex:none; max-height:none}
}

/* ---------- Leistungen im Startseiten-Hero ----------
   Ersetzt dort das Bild. Wer eine Räumung sucht, weiss meist schon,
   welche — und kommt hier mit einem Klick hin, statt erst zu scrollen.
   Das ist zugleich der deutliche Unterschied zu den Unterseiten, die
   ihr Objektfoto behalten. */
.hero-lei{
  align-self:stretch;
  padding:clamp(28px,4vw,52px) clamp(28px,3.5vw,56px);
  display:flex; flex-direction:column; justify-content:center;
  /* Schmaler als die Hälfte: So bleibt links und rechts vom Block etwas
     vom Bild sichtbar und der Hintergrund bekommt Raum. */
  width:min(100%, 480px); margin-inline:auto;
}
.hero-lei-t{
  display:block; font-family:var(--fd); font-size:11px; font-weight:700;
  letter-spacing:.2em; text-transform:uppercase; color:var(--acc-hell); margin-bottom:14px;
}
.hero-lei-g{
  display:grid; grid-template-columns:1fr 1fr; gap:12px;
  flex:1; max-height:520px;
}
/* Erhöhte Karten auf dem Fotogrund: helle Fläche, weiche Rundung,
   Symbol im getönten Feld über der Beschriftung. Der dunkle
   Hintergrund bleibt unverändert — die Karten liegen darauf, statt
   ihn einzufärben. Das Weiss trägt hier zugleich den Kontrast: dunkler
   Text auf Weiss steht bei 15:1, unabhängig davon, welcher Ausschnitt
   des Fotos gerade darunter liegt. */
.hero-k{
  display:flex; flex-direction:column; align-items:flex-start; gap:11px;
  padding:clamp(13px,1.5vw,17px) clamp(12px,1.3vw,15px);
  background:#fff; color:var(--hd); border:0; border-radius:12px;
  box-shadow:0 1px 2px rgba(10,12,14,.16), 0 8px 20px rgba(10,12,14,.22);
  font-family:var(--fd); font-size:13.5px; font-weight:700; line-height:1.24;
  transition:transform .16s ease, box-shadow .16s ease;
}
.hero-k-sym{
  width:38px; height:38px; border-radius:10px; flex:none;
  display:grid; place-items:center;
  background:var(--acc-soft, rgba(204,0,0,.09)); color:var(--acc);
  transition:background .16s ease, color .16s ease;
}
.hero-k svg{width:21px; height:21px; flex:none}
.hero-k b{font-weight:700}
.hero-k:hover{
  transform:translateY(-3px);
  box-shadow:0 2px 4px rgba(10,12,14,.2), 0 14px 30px rgba(10,12,14,.3);
}
.hero-k:hover .hero-k-sym{background:var(--acc); color:#fff}
.hero-k:focus-visible{outline-offset:3px}
@media (prefers-reduced-motion:reduce){
  .hero-k,.hero-k:hover{transition:none; transform:none}
}

@media (max-width:900px){
  .hero-lei{padding-inline:var(--sp); align-self:start}
}
@media (max-width:420px){
  .hero-lei-g{grid-template-columns:1fr}
  .hero-k{padding:13px 12px}
}

/* ---------- Geschäftskunden: der Anruf zuoberst ----------
   Im B2B ist die Erreichbarkeit das eigentliche Versprechen. Deshalb
   steht die Nummer hier gross und früh, nicht erst im Fussbereich. */
.b2b-tel{
  display:flex; align-items:center; gap:clamp(16px,2.5vw,28px); flex-wrap:wrap;
  margin-top:clamp(26px,3.5vw,36px); padding:clamp(18px,2.4vw,26px) clamp(20px,2.6vw,30px);
  background:var(--card); border:1px solid var(--line); border-left:3px solid var(--acc);
}
.b2b-tel-nr{
  display:inline-flex; align-items:center; gap:12px; flex:none;
  font-family:var(--fd); font-size:clamp(23px,2.6vw,31px); font-weight:800;
  color:var(--hd); letter-spacing:.01em; line-height:1;
  /* Polsterung, damit die Trefferfläche auch mit dem Daumen sicher zu
     erwischen ist — die reine Texthöhe läge bei 24px. */
  padding:11px 14px; margin:-11px -14px;
  transition:color .16s ease, background .16s ease;
}
.b2b-tel-nr:hover{background:var(--acc-soft)}
.b2b-tel-nr svg{width:clamp(24px,2.4vw,30px); height:clamp(24px,2.4vw,30px); color:var(--acc); flex:none}
.b2b-tel-nr:hover{color:var(--acc)}
.b2b-tel-tx{font-size:14.5px; color:var(--tx); line-height:1.5}
.b2b-tel-tx small{font-size:13px; color:var(--tx-mut)}

/* Sechs Gruppen statt vier: drei Spalten, damit die Karten nicht zu breit werden */
.b2b-g{grid-template-columns:repeat(3,1fr)}
@media (max-width:1000px){.b2b-g{grid-template-columns:repeat(2,1fr)}}
@media (max-width:660px){.b2b-g{grid-template-columns:1fr}}

/* ============================================================
   Geschäftskunden — Seitenkopf «Handschlag»
   Die ausgestreckte Hand sagt Zusammenarbeit, bevor ein Wort gelesen
   ist. Das Studioporträt ist vor Weiss freigestellt: kein Schatten,
   kein Abstand nach unten, damit die Person auf der Grundlinie des
   Abschnitts steht und der weisse Grund nahtlos in die Seite übergeht.
   ============================================================ */
.b2b-hero{background:#fff; border-bottom:1px solid var(--line); overflow:hidden}
.b2b-hero-in{
  display:grid; grid-template-columns:1fr minmax(0,38%);
  gap:clamp(20px,3vw,44px); align-items:end;
  padding-top:clamp(26px,4vw,52px); padding-bottom:0;
}
.b2b-hero-tx{padding-bottom:clamp(30px,4.5vw,58px)}
.b2b-hero h1{font-size:clamp(28px,3.6vw,44px)}
.b2b-hero .lead{max-width:46ch}
.b2b-hero-acts{display:flex; gap:11px; flex-wrap:wrap; margin-top:28px}
.b2b-hero-acts .btn svg{width:18px; height:18px}
.b2b-hero-zeit{display:block; margin-top:14px; font-size:13.5px; color:var(--tx-mut)}

/* Das Bild sitzt bündig auf der Unterkante — kein Rahmen, kein Schatten */
.b2b-hero-bild{align-self:end; justify-self:end; max-width:380px; width:100%}
.b2b-hero-bild .bild{background:transparent; margin:0}
.b2b-hero-bild img{
  width:100%; height:auto; display:block;
  box-shadow:none; border-radius:0;
}

@media (max-width:860px){
  .b2b-hero-in{grid-template-columns:1fr; gap:0}
  .b2b-hero-tx{padding-bottom:clamp(22px,4vw,34px)}
  .b2b-hero-bild{max-width:300px; justify-self:center}
}

/* Preisfragen und Ansprechperson nebeneinander: Wer nach dem Preis
   fragt, will wissen, wen er fragt. Hälftig geteilt, damit die
   Aufklappliste nicht über die ganze Breite läuft. */
.preis-split{display:grid; grid-template-columns:1fr 1fr; gap:clamp(28px,4vw,56px); align-items:start}
.preis-split > aside{position:sticky; top:calc(var(--hd-h) + 20px)}
@media (max-width:900px){
  .preis-split{grid-template-columns:1fr; gap:clamp(24px,4vw,36px)}
  .preis-split > aside{position:static}
}

/* Einleitung über den Leistungskacheln: nutzt die Containerbreite.
   Vertretbar, weil der Text bewusst auf zwei Zeilen gekürzt ist —
   bei einem längeren Absatz wäre die Zeile zu lang zum Lesen. */
.intro-lead{max-width:none; margin-top:16px}

/* Auch mit der Maus: WCAG verlangt für Zeigegeräte mindestens 24px
   Zielhöhe. Die Fussbereich-Links lagen bei 19px. */
.ft-sp a,.ft-geo a,.ft-kontakt a,.ft-base a,.ft-base button,.ft-mehr a,
.brot a,.kontakt-c a{
  display:inline-flex; align-items:center; min-height:28px;
}
/* Links im Fliesstext der Rechtsseiten: Polsterung statt Mindesthöhe,
   damit der Zeilenfall unverändert bleibt.

   Knöpfe sind ausgenommen. Die Preisbox steht innerhalb von .prose,
   und `.prose a` (0,1,1) schlägt `.btn` (0,1,0) — der Knopf verlor
   dadurch sein display:inline-flex. Folge: gap wirkte nicht mehr, die
   Beschriftung klebte am Symbol, und das Symbol fiel auf die Grundlinie
   statt mittig zu stehen (4px Versatz). Sichtbar nur am gerenderten
   Pixel, im Quelltext sieht der Knopf unverändert richtig aus. */
.legal a:not(.btn),.prose a:not(.btn){display:inline-block; padding-block:4px; margin-block:-4px}

/* ============================================================
   Bedienung auf Tablet und Telefon
   Ziel ist ein App-Gefühl: Alles, was man antippt, ist gross genug,
   um es im Gehen mit dem Daumen zu treffen — 46px statt der nackten
   Texthöhe. Dazu ruhigere Abstände und ein Menü, das sich wie ein
   App-Menü öffnet.
   ============================================================ */
@media (max-width:900px){

  /* ---------- Tippziele ---------- */
  /* Fussbereich: 26 Links mit 17px Texthöhe — der grösste Mangel.
     min-height statt Polsterung, damit die Zeilenabstände gleich bleiben. */
  .ft-sp a,
  .ft-geo a,
  .ft-kontakt a,
  .ft-tags a,
  .ft-base a,
  .ft-base button{
    display:flex; align-items:center; min-height:46px;
  }
  /* Die Schlagwortleiste bleibt eine Reihe von Chips — dort wirkt
     min-height über die Polsterung, damit sie nicht auseinanderfallen. */
  .ft-tags a{display:inline-flex; padding-block:12px}
  .ft-base{gap:2px 18px}
  .ft-base .sep a{min-height:46px; display:inline-flex; align-items:center}
  /* Auf Berührungsgeräten dasselbe Mass wie jedes andere Tippziel. */
  .ft-base .ft-social a{width:46px; height:46px; min-height:46px}
  /* Auf dem Tablet bricht die Zeile um und die Symbole landen sonst links
     unter dem Rest. `margin-left:auto` hält sie am rechten Rand — auch dann,
     wenn sie als einziges Element auf der umgebrochenen Zeile stehen.
     Am Rechner wäre die Zeile ein zweites `auto` neben dem des
     Umsetzungshinweises; der freie Platz würde zwischen beiden aufgeteilt
     und der Hinweis wanderte zur Mitte. Deshalb nur hier. */
  .ft-social{margin-left:auto}

  /* Links mitten im Fliesstext: Die Trefferfläche wächst über die
     Polsterung, der negative Aussenabstand hält den Zeilenfall gleich. */
  .legal a:not(.btn),.prose a:not(.btn){
    display:inline-block; padding-block:12px; margin-block:-12px;
  }

  /* Brotkrume und Kontaktkarten */
  .brot a{min-height:44px; display:inline-flex; align-items:center}
  .kontakt-c a{min-height:46px; display:inline-flex; align-items:center}
  /* ---------- Fussbereich: aus vier Listen werden Zweispalter ----------
     Einspaltig waren es 3049 Pixel — fast ein Drittel der Seite. Die
     Linklisten stehen jetzt zu zweit nebeneinander, die Kantonsliste
     zu dritt. Die Tippziele bleiben bei 44px. */
  /* Wertband: zwei mal zwei statt vier nebeneinander */
  .ft-werte-in{grid-template-columns:repeat(2,minmax(0,1fr)); padding-block:18px; gap:18px 0}
  .ft-werte-in > div{padding:0 10px}
  .ft-werte-in > div + div{border-left:0}
  .ft-werte-in > div:nth-child(even){border-left:1px solid var(--line-d)}
  .ft-werte svg{width:25px; height:25px}
  .ft-werte b{font-size:11.5px; letter-spacing:.11em}
  .ft-werte span{font-size:11.5px}

  .ft-haupt{padding-block:28px; gap:26px}
  .ft h4,.ft-sp h2,.ft-hilfe h2{font-size:11px; letter-spacing:.14em; margin-bottom:8px}
  .ft ul{font-size:13.5px}
  .ft li{padding:0}

  .ft-sp ul:not(.ft-geo){
    display:grid; grid-template-columns:repeat(2,minmax(0,1fr));
    column-gap:14px;
  }
  .ft-sp a{min-height:44px; overflow-wrap:break-word}
  .ft-sp h4[style]{margin-top:20px !important}

  /* Kantone sind reiner Text, keine Tippziele. Als Spaltenliste
     brauchten 19 Namen zehn Zeilen — fliessend sind es vier. */
  .ft-geo{display:block; columns:auto; font-size:12.5px; line-height:1.7}
  .ft-geo li{display:inline; padding:0}
  .ft-geo li + li::before{content:" · "; color:var(--on-dark-mut)}

  .ft-claim{font-size:13.5px; line-height:1.55; margin:12px 0 16px}
  .ft-kontakt{gap:6px}
  .ft-kontakt li{font-size:13.5px}
  .ft-tel{font-size:17px !important}
  .ft-marken{gap:6px; margin-top:16px}
  .ft-marken span{font-size:10.5px; padding:5px 9px}

  .ft-hilfe-in{padding-block:18px}
  .ft-tags{gap:6px}
  .ft-tags a{font-size:12px; padding:10px 11px}

  /* Die Schlusszeile des Fussbereichs ebenfalls zweispaltig. */
  .ft-base{
    display:grid; grid-template-columns:repeat(2,minmax(0,1fr));
    gap:0 16px; padding-block:12px; font-size:12.5px;
  }
  .ft-base .sep{margin-left:0; grid-column:span 2}
  /* Zwei Symbole nebeneinander füllen keine halbe Zeile sinnvoll; sie
     bekommen eine eigene über beide Spalten. */
  .ft-social{grid-column:span 2; margin-top:8px}

  /* Der rote Aufruf oben im Fussbereich: Titel über die ganze Breite,
     die beiden Knöpfe darunter nebeneinander. */
  .ft-cta-in{
    display:grid; grid-template-columns:repeat(2,minmax(0,1fr));
    align-items:stretch;
    gap:9px; padding-block:26px;
  }
  .ft-cta-in h2{grid-column:span 2; min-width:0; margin-bottom:6px}
  .ft-cta-in > .btn{
    min-width:0; width:auto; flex:none; min-height:48px;
    padding:12px 11px; font-size:12px; letter-spacing:.04em; gap:7px;
  }
  .ft-cta-in > .btn:last-child:nth-child(even){grid-column:span 2}
  .ft-base > span:first-child{grid-column:span 2}
  .ft-tel{min-height:46px; align-items:center}

  /* Kopfzeile: Nummer und Menüknopf */
  .hd-tel{min-height:46px; min-width:46px; justify-content:center}
  .burger{width:46px; height:46px}
  .logo{min-height:46px}

  /* Reiter im FAQ und Ansprechperson */
  .tab{min-height:46px; display:inline-flex; align-items:center}
  .person-tel{min-height:46px; align-items:center}

  /* Aufklapplisten: die ganze Zeile ist das Ziel */
  .akk-q{min-height:52px}

  /* Abstand zwischen benachbarten Zielen, damit man nicht danebentippt */
  .hero-acts,.preis-akt,.b2b-hero-acts,.mk-btns{gap:12px}

  /* ---------- Knöpfe nebeneinander statt übereinander ----------
     Zwei gestapelte Knöpfe kosten rund 120 Pixel Höhe, nebeneinander
     nur 56. Deshalb wird jede Knopfgruppe zum Zweispalter; die Schrift
     wird dafür etwas kleiner, damit die Beschriftung einzeilig bleibt.
     Steht ein Knopf allein oder ist die Anzahl ungerade, nimmt der
     letzte die volle Breite — sonst hinge ein halber Knopf im Raum. */
  .hero-acts,.band-acts,.b2b-hero-acts,.preis-akt,.mk-btns{
    display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:9px;
  }
  .hero-acts > .btn,.band-acts > .btn,.b2b-hero-acts > .btn,
  .preis-akt > .btn,.mk-btns > .btn,
  .hero--start .hero-acts > .btn{
    min-width:0; width:auto; flex:none;
    min-height:48px; padding:12px 11px;
    font-size:12px; letter-spacing:.04em; gap:7px;
  }
  .hero-acts > .btn:last-child:nth-child(odd),
  .band-acts > .btn:last-child:nth-child(odd),
  .b2b-hero-acts > .btn:last-child:nth-child(odd),
  .preis-akt > .btn:last-child:nth-child(odd),
  .mk-btns > .btn:last-child:nth-child(odd){grid-column:span 2}
  .hero-acts > .btn svg,.band-acts > .btn svg,.b2b-hero-acts > .btn svg,
  .preis-akt > .btn svg,.mk-btns > .btn svg{width:16px; height:16px}

  /* Im Menü gilt dasselbe — dort zählt die Höhe doppelt, weil das
     Menü zwischen Kopfzeile und Schlusszeile passen muss. */
  .nav-drop .drop-cta{grid-template-columns:repeat(2,minmax(0,1fr))}
  .nav-drop .drop-cta .btn{
    padding:12px 10px; font-size:12.5px; letter-spacing:.05em; gap:7px;
  }
  .nav-drop .drop-cta .btn:last-child:nth-child(odd){grid-column:span 2}

  /* Der Preiskasten polstert mit 26px — in einer halben Telefonbreite
     fehlen dadurch die letzten Millimeter für «Offerte anfragen». */
  .preis-box{padding:18px 15px}
  .preis-box p{font-size:15px}
  /* Im Kasten bleiben nach der Polsterung 132px pro Spalte — «Offerte
     anfragen» braucht bei 12px genau vier Pixel mehr und bräche sonst um. */
  .preis-box .preis-akt > .btn{font-size:11.5px; padding-inline:9px}

  /* ---------- Ruhigere Abstände ---------- */
  /* Auf kleinen Schirmen zählt jeder Bildschirm: etwas engere Sektionen,
     dafür mehr Luft zwischen den Elementen darin. */
  :root{--sec:clamp(38px,9vw,60px)}
  .wrap{padding-inline:max(var(--sp),18px)}
  h2{line-height:1.12}
  .lead{font-size:16.5px; line-height:1.62}
  /* Versal-Labels: 10px sind auf dem Telefon zu wenig, auch gesperrt */
  .logo span,.person-rolle,.kick,.ft-sp h4,.ft-sp h2,.mk-label span{font-size:11px}
  .person-fn,.hero-facts div,.ablauf-d{font-size:13px}

  /* ---------- Menü wie in einer App ---------- */
  .nav-drop{border-bottom:0; box-shadow:0 18px 40px rgba(30,33,36,.16)}
  .nav-drop li + li{border-top:1px solid var(--line)}
  .nav-drop a{min-height:54px; padding:0; font-size:16px}
  .nav-drop a svg{width:22px; height:22px}
  .nav-drop .grp{
    font-size:10.5px; letter-spacing:.18em; padding-top:18px; padding-bottom:8px;
  }
  .nav-drop .drop-cta{gap:11px; margin-top:24px; padding-bottom:6px}
  .nav-drop .drop-cta .btn{min-height:52px}
}

/* Die Kantonsliste fliesst auf dem Telefon als Zeile — siehe oben. */

/* Teamfoto im Fliesstext auf «Über uns» */
.team{margin:2em 0 0; padding:0}
.team .bild{width:100%}
.team figcaption{
  margin-top:12px; font-size:13.5px; line-height:1.5; color:var(--tx-mut);
  border-left:2px solid var(--acc); padding-left:13px;
}

/* ============================================================
   Telefon: kürzer scrollen
   Einspaltige Listen machen die Seite unnötig lang — auf der
   Startseite waren es fast 16'000 Pixel. Alles, was paarweise
   nebeneinander passt, steht jetzt in Zweierreihen; Titel und
   Schriften sind etwas zurückgenommen, damit es ruhiger wirkt
   statt gedrängt.
   ============================================================ */
@media (max-width:620px){

  /* ---------- Zweierreihen statt Listen ---------- */
  .hero-lei-g{grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px}
  .hero-k{
    flex-direction:column; align-items:flex-start; gap:7px;
    padding:12px 11px; font-size:13px; line-height:1.2;
  }
  .hero-k svg{width:19px; height:19px}
  .hero-k .hero-k-pf{display:none}      /* der Pfeil braucht hier keinen Platz */

  .bento{grid-template-columns:repeat(2,minmax(0,1fr)); gap:9px}
  .bento > .tile{grid-column:span 1}
  /* volle Breite: die grosse Kachel und die vierte.
     .tile.tile--big statt .tile--big — sonst schlägt die
     nth-child-Regel des Desktop-Rasters mit höherer Spezifität durch. */
  .bento > .tile.tile--big,
  .bento > .tile:nth-child(1),
  .bento > .tile:nth-child(4),
  .bento > .tile:last-child:nth-child(odd){grid-column:span 2}
  .tile--big{min-height:210px}
  .bento > .tile:nth-child(4){min-height:0}
  .tile{padding:15px 14px}
  .tile .ic{width:26px; height:26px; margin-bottom:10px}
  .tile h3{font-size:14.5px}
  .tile p{font-size:12.5px; line-height:1.45}
  .tile .go{font-size:11px; padding-top:12px}
  .tile--big h3{font-size:19px}
  .tile--big p{font-size:13.5px}

  .ablauf-raster{grid-template-columns:repeat(2,minmax(0,1fr)); gap:9px}
  .ablauf-k{padding:13px 12px}
  .ablauf-n{font-size:17px}
  .ablauf-k b{font-size:13px; margin-top:7px}
  .ablauf-k p{font-size:12.5px; margin-top:7px; line-height:1.45}

  .usp{grid-template-columns:repeat(2,minmax(0,1fr)); gap:9px}
  .usp-c{padding:15px 14px}
  .usp-c b{font-size:14px}
  .usp-c span{font-size:12.5px}

  .b2b-g{grid-template-columns:repeat(2,minmax(0,1fr)); gap:9px}
  .b2b-gc{padding:15px 14px}
  .b2b-gc h3{font-size:14.5px}
  .b2b-gc p{font-size:12.5px; line-height:1.45}
  .b2b-v{grid-template-columns:repeat(2,minmax(0,1fr))}
  .b2b-vc{padding:14px 13px}

  .lei-karten{grid-template-columns:repeat(2,minmax(0,1fr)); gap:9px}
  .lei-k{padding:14px 12px}
  .lei-k > b{font-size:13.5px}
  .lei-k > span{font-size:12px; line-height:1.4}
  .lei-go{font-size:10.5px}

  .mk-karten,.mk-fakten{grid-template-columns:repeat(2,minmax(0,1fr)); gap:9px}
  .kt-liste{grid-template-columns:repeat(2,minmax(0,1fr))}

  /* ---------- Ruhigere Titel ---------- */
  /* Grosse Versalien wirken auf dem Telefon laut und fressen Höhe. */
  h1{font-size:24px; letter-spacing:-.015em}
  h2{font-size:19px}
  h3{font-size:15.5px}
  .hero--start h1{font-size:26px}
  .prose h2{font-size:17px; margin-top:1.4em}
  .lead{font-size:15.5px; line-height:1.58}
  .intro-lead{font-size:15px}
  .kick{margin-bottom:10px}

  /* ---------- Engere Abstände ---------- */
  :root{--sec:clamp(30px,7vw,44px)}
  .bento,.ablauf-raster,.lei-karten{margin-top:22px}
  .akk{margin-top:22px}
  .akk-q{font-size:15px; padding:12px 0}
  .akk-a p{font-size:14.5px; padding-right:34px}
}

/* Ganz schmale Geräte: Der Zweispalter bleibt, aber die grosse Kachel
   und die Ansprechperson brauchen die volle Breite. */
@media (max-width:360px){
  .hero-k{font-size:12.5px}
  .tile--big{grid-column:span 2}
}

/* In schmalen Spalten müssen lange Wörter umbrechen dürfen —
   «Haushaltsauflösung» passt sonst in keine halbe Telefonbreite. */
@media (max-width:620px){
  .hero-k b,.tile h3,.ablauf-k b,.b2b-gc h3,.lei-k > b,.mk-k b,.usp-c b{
    overflow-wrap:break-word; hyphens:auto;
  }
  /* Die grosse Kachel hat die volle Breite — dort darf nichts trennen */
  .tile--big h3{overflow-wrap:normal; hyphens:none}
  .b2b-gc p,.mk-k > span,.lei-k > span,.tile p,.ablauf-k p{overflow-wrap:break-word}
}

/* ============================================================
   Seitenkopf der Leistungsseiten auf dem Telefon
   ------------------------------------------------------------
   Von Besim am 02.09.2026 vorgegeben: zuerst das Foto mit dem
   Titel darin, darunter der Text und die beiden Knoepfe, zum
   Schluss die Merkmale in einer weissen Box — damit der
   naechste Abschnitt sauber abgesetzt ist.

   Umgesetzt mit display:contents auf .hero-tx: die Textspalte
   loest sich auf, ihre Kinder werden Kinder von .hero-in und
   lassen sich dort frei anordnen. Foto und Titel liegen in
   derselben Rasterzelle, deshalb der Titel IM Foto.

   Am Rechner aendert sich nichts.
   ============================================================ */
@media (max-width:900px){
  .hero-in{
    display:grid; grid-template-columns:minmax(0,1fr); gap:0; min-height:0;
  }
  .hero-tx{display:contents}

  /* Das Foto steht INNERHALB der Sektion, nicht randlos: es liegt damit
     auf derselben senkrechten Linie wie Text und Knoepfe darunter. Der
     seitliche Abstand kommt aus dem padding-inline von .hero-in, oben
     kommt Luft zur Kopfzeile dazu. */
  .hero-media{
    grid-row:1; grid-column:1;
    margin:clamp(22px,5vw,30px) 0 0;
    min-height:clamp(280px,56vw,360px);
    border-radius:18px; overflow:hidden;
  }
  /* Verdichtung nach unten, damit der Titel auf jedem Foto lesbar bleibt.
     Die Werte sind gemessen, nicht geschaetzt: mit .44 bei 48% stand der
     Titel praktisch unsichtbar auf einem hellen Hausfoto.
     pointer-events:none — eine Deckflaeche ueber bedienbaren Elementen
     schluckt sonst jede Beruehrung, und sichtbar bleibt trotzdem alles. */
  .hero-media::after{
    content:""; position:absolute; inset:0; pointer-events:none; z-index:1;
    background:linear-gradient(180deg,
      rgba(13,27,62,.14) 0%, rgba(13,27,62,.32) 30%,
      rgba(13,27,62,.84) 52%, rgba(13,27,62,.93) 100%);
  }
  /* Auf /firmenraeumung laeuft dort ein Video. Text ueber Bewegtbild wurde
     am 24.08.2026 ausdruecklich verworfen: der Grund wechselt 30-mal in der
     Sekunde, ein Mittelwert hilft nicht. Dort bleibt der Titel darueber. */
  .hero-media--film::after{display:none}
  .hero-media--film{grid-row:2}

  .hero-titel{
    grid-row:1; grid-column:1; position:relative; z-index:2;
    align-self:end;
    padding:0 clamp(14px,4vw,20px) clamp(16px,4vw,22px);
  }

  /* Der Titel liegt auf dem Foto und muss hell sein. Ohne diese Regel
     bleibt er anthrazit — gemessen kam rgb(30,33,36) aus getComputedStyle,
     also dunkel auf hellem Haus.

     hell.css setzt [data-modus="hell"] .hero h1 (0,2,1) UND wird nach
     style.css geladen: ein gleich starker Selektor verliert deshalb, egal
     wie weit unten er steht. Darum (0,3,1). */
  [data-modus="hell"] .hero .hero-titel h1,
  .hero .hero-titel h1{color:#fff; text-shadow:0 1px 3px rgba(13,27,62,.5)}
  [data-modus="hell"] .hero .hero-titel .kick,
  .hero .hero-titel .kick{color:#fff}
  [data-modus="hell"] .hero .hero-titel .kick::before,
  .hero .hero-titel .kick::before{background:var(--acc-hell,#FF5348)}

  /* Videoseite: der Titel steht ueber dem Bildfenster, nicht darin —
     dort ist die Farbe des hellen Aufbaus richtig. */
  .hero:has(.hero-media--film) .hero-titel{
    align-self:start; padding:clamp(26px,5vw,38px) 0 0;
  }
  [data-modus="hell"] .hero:has(.hero-media--film) .hero-titel h1{
    color:var(--hd); text-shadow:none;
  }
  [data-modus="hell"] .hero:has(.hero-media--film) .hero-titel .kick{color:var(--acc)}

  .hero .lead{grid-row:3; margin-top:clamp(20px,4.5vw,28px)}
  .hero-acts{grid-row:4; margin-top:clamp(18px,3.5vw,24px)}

  /* Die Merkmale als weisse Box. Sie schliesst den Seitenkopf ab und
     trennt ihn vom folgenden Abschnitt — vorher lief beides ineinander.
     Trennlinie unter jedem Eintrag ausser dem letzten.
     Einspaltig, weil «Besichtigung vor Ort kostenlos» bei halber Breite
     (rund 160px) nicht auf eine Zeile passt; die Paar-Regel gilt fuer
     das, was paarweise auch wirklich Platz hat. */
  .hero-facts{
    grid-row:5;
    display:grid; grid-template-columns:minmax(0,1fr); gap:0;
    margin:clamp(22px,4.5vw,30px) 0 clamp(30px,5vw,44px);
    padding:2px 16px; border:1px solid var(--line); border-radius:16px;
    background:var(--card);
    box-shadow:0 6px 20px rgba(13,27,62,.06);
  }
  .hero-facts div{
    min-height:50px; padding:12px 0; font-size:14.5px;
    border-top:0; border-bottom:1px solid var(--line);
  }
  .hero-facts div:last-child{border-bottom:0}
  [data-modus="hell"] .hero-facts{border-color:var(--line)}
  [data-modus="hell"] .hero-facts div{color:var(--tx); border-bottom-color:var(--line)}
  [data-modus="hell"] .hero-facts div:last-child{border-bottom:0}
}

/* ============================================================
   Schlusszeile des Fussbereichs auf dem Telefon
   ------------------------------------------------------------
   Vorher ein Zweierraster: © über zwei Spalten, dann Impressum
   neben Datenschutz, AGB neben Cookie-Einstellungen, Umsetzung
   wieder über zwei — mit 46px hohen Zeilen ergab das breite
   Löcher und eine ausgefranste rechte Kante. Jetzt eine ruhige
   Folge: Rechtliches als umbrechende Reihe, darunter Umsetzung
   und die beiden Kanäle, zuunterst das Copyright.
   ============================================================ */
@media (max-width:620px){
  .ft-base{
    display:flex; flex-direction:column; align-items:flex-start;
    gap:2px; padding-block:16px;
  }
  .ft-base > span:first-child{order:4; color:var(--on-dark-mut); margin-top:8px}
  .ft-base a[href="/impressum"]{order:1}
  .ft-base a[href="/datenschutz"]{order:1}
  .ft-base a[href="/agb"]{order:1}
  .ft-base button[data-cookie-settings]{order:1}
  .ft-base .sep{order:2; margin:0}
  .ft-social{order:3; margin:6px 0 0}

  /* Die vier Rechtsverweise packen sich in eine umbrechende Reihe.
     `order:1` allein genügt nicht — in einer Spalte steht jedes für
     sich. Deshalb wird die Spalte hier zur Reihe mit Umbruch. */
  .ft-base{flex-direction:row; flex-wrap:wrap; align-items:center; gap:2px 18px}
  .ft-base > span:first-child{flex:0 0 100%}
  .ft-base .sep{flex:0 0 100%}
  .ft-social{flex:0 0 100%; justify-content:flex-start}
}