/* =========================================================================
   Bausteine — Broken Grid, Karten, Farbband, Kopf, Fuss
   ========================================================================= */

/* ---------- 1 · Kopfzeile ---------- */
.site-head{
  position:fixed; inset:0 0 auto; z-index:80;
  padding-block:14px;
  /* 82% waren knapp: der Kopf schwebt ueber beliebigem Inhalt, und die
     Beschriftung darunter ist klein. 92% haelt den Kontrast auch dann. */
  background:color-mix(in srgb, var(--paper) 92%, transparent);
  backdrop-filter:blur(14px) saturate(1.5);
  -webkit-backdrop-filter:blur(14px) saturate(1.5);
  border-bottom:1px solid transparent;
  transition:border-color .3s, padding .3s, background-color .3s;
}
.site-head.is-stuck{ border-bottom-color:var(--line); padding-block:9px; }
@supports not (backdrop-filter:blur(1px)){
  .site-head{ background:var(--paper); }
}

.head-in{ display:flex; align-items:center; gap:20px; }

/* min-height 44: die Wortmarke ist ein Link zur Startseite und wurde mit
   42px Hoehe gemessen — zwei Pixel unter der Tappflaeche. */
.brand{ display:flex; align-items:center; gap:11px; text-decoration:none;
        flex:none; min-height:44px; }
/* Das Logo-PNG hat einen weissen Grund. Ohne Fassung wirkt das im
   Dunkelmodus wie ein unabsichtlicher weisser Kasten — also bekommt es
   eine bewusste Kachel, die in beiden Modi gewollt aussieht. */
/* Wortmarke 1326x188: Hoehe fest, Breite folgt. Helle Kachel, damit das
   Blau im Dunkelmodus lesbar bleibt (Logo nie als background-image). */
.brand img{
  height:38px; width:auto; flex:none; max-width:min(60vw,268px);
  background:#fff; border-radius:9px; padding:4px 8px;
  transition:transform .4s cubic-bezier(.22,1,.36,1);
}
.brand:hover img{ transform:scale(1.03); }
.head-tel{ display:inline-flex; align-items:center; gap:.5em; margin-left:auto;
  min-height:44px; padding:0 10px; font-size:.9rem; font-weight:700; text-decoration:none;
  color:var(--ink-2); white-space:nowrap; }
.head-tel:hover{ color:var(--accent); }
.head-cta{ flex:none; }
.head-tel + .head-cta{ margin-left:0; }
.head-tel ~ .nav{ margin-left:0; }
@media (max-width:1180px){ .head-tel{ display:none; } .head-cta{ margin-left:auto; } }
@media (max-width:560px){ .head-cta{ display:none; } }
/* Aufklapper «Leistungen» */
.nav-grp{ position:relative; display:flex; align-items:center; }
.nav-more{ display:inline-flex; align-items:center; justify-content:center; width:44px; height:44px;
  margin-left:-8px; border:0; background:transparent; color:var(--ink-2); cursor:pointer; border-radius:999px; }
.nav-more:hover{ color:var(--ink); }
.nav-more svg{ transition:transform .3s; }
.nav-more[aria-expanded="true"] svg{ transform:rotate(180deg); }
.nav-sub{ display:none; }
.nav-grp.open .nav-sub{ display:grid; }
@media (min-width:1021px){
  .nav-sub{ position:absolute; top:calc(100% + 8px); left:0; min-width:260px; padding:10px;
    background:var(--paper); border:1px solid var(--line); border-radius:var(--r-m);
    box-shadow:var(--shadow-l); gap:2px; }
  .nav-grp:hover .nav-sub, .nav-grp:focus-within .nav-sub{ display:grid; }
  .nav-sub a{ display:flex; min-height:44px; align-items:center; }
}

.nav{ margin-left:auto; display:flex; align-items:center; gap:2px; }
.nav a{
  position:relative; padding:9px 13px; border-radius:999px;
  font-size:.9rem; font-weight:600; text-decoration:none; color:var(--ink-2);
  transition:color .25s, background-color .25s;
}
.nav a::after{
  content:""; position:absolute; left:13px; right:13px; bottom:5px; height:2px;
  border-radius:2px; background:var(--ribbon);
  transform:scaleX(0); transform-origin:left; transition:transform .32s cubic-bezier(.22,1,.36,1);
}
.nav a:hover{ color:var(--ink); }
.nav a:hover::after,.nav a[aria-current="page"]::after{ transform:scaleX(1); }

.nav-toggle{ display:none; }

@media (max-width:1020px){
  /* 🔴 07.09.2026, Befund Jairo: «das mobile Menue sieht man nicht».
     Gemessen mit GEOEFFNETEM Menue — nur so ist es sichtbar: Das Panel ist
     position:fixed, aber `.site-head` traegt `backdrop-filter: blur(14px)`,
     und ein Element mit backdrop-filter wird zum Containing Block fuer
     fixierte Nachkommen. Das Menue haengte damit am 77 px hohen Kopf statt am
     Fenster: 160 px hoch, oben abgeschnitten, 5 von 19 Links sichtbar.

     Gegenmittel ist nicht ein hoeherer z-index und kein groesseres inset —
     der Bezugsrahmen selbst ist falsch. Unterhalb von 1020 px faellt die
     Weichzeichnung deshalb weg. Sichtbar aendert das fast nichts: der Kopf
     liegt ohnehin auf 92 % deckendem Papier. Auf dem Desktop bleibt sie. */
  /* 🔴 Ebenen, seit das Panel an <body> haengt (08.09.2026):
     Kopf 100 · Panel 90 · Seiteninhalt darunter.
     Vorher hatte das Panel gar keine Ebene («z-index:auto») und wurde vom
     Hero-Text ueberdeckt, der `z-index:3` traegt. Ein positioniertes Element
     mit Zahl malt immer ueber einem ohne — die Reihenfolge im Dokument hilft
     dagegen nicht. Der Kopf muss ueber dem Panel bleiben, sonst verdeckt das
     Panel den Knopf, mit dem man es wieder schliesst. */
  .site-head{ backdrop-filter:none; -webkit-backdrop-filter:none; z-index:100; }
  .nav{
    position:fixed; inset:0 0 0 auto; width:min(85vw,340px); z-index:90;
    /* justify-content:center schob die Liste bei 19 Eintraegen oben aus dem
       Bild. flex-start plus eigenes Scrollen zeigt sie vollstaendig. */
    /* 🔴 Zwei Hoehenangaben, und beide werden gebraucht. `100vh` rechnet auf
       iOS mit dem Fenster OHNE Adressleiste und faellt darum zu hoch aus;
       `100dvh` kennt die eingeblendete Leiste, wird aber von aelteren
       Fassungen ignoriert. Die zweite Zeile ueberschreibt die erste dort, wo
       sie verstanden wird. */
    height:100vh; height:100dvh; max-height:100dvh;
    flex-direction:column; align-items:stretch; justify-content:flex-start; gap:4px;
    padding:88px 26px 32px; background:var(--paper);
    overflow-y:auto; -webkit-overflow-scrolling:touch; overscroll-behavior:contain;
    box-shadow:var(--shadow-l);
    transform:translateX(101%); transition:transform .42s cubic-bezier(.22,1,.36,1);
  }
  .nav a{ padding:14px 16px; font-size:1.06rem; min-height:48px; display:flex; align-items:center; }
  .nav-grp{ flex-wrap:wrap; }
  .nav-grp > a{ flex:1; }
  .nav-sub{ width:100%; padding-left:14px; gap:0; }
  .nav-sub a{ font-size:.98rem; min-height:44px; }
  body.nav-open .nav{ transform:translateX(0); }
  .nav-toggle{
    display:flex; margin-left:auto; flex:none;
    width:48px; height:48px; align-items:center; justify-content:center;
    background:transparent; border:1px solid var(--line); border-radius:12px;
    cursor:pointer; color:var(--ink); z-index:2;
  }
  .nav-toggle span{
    display:block; width:20px; height:2px; background:currentColor; border-radius:2px;
    position:relative; transition:background-color .2s;
  }
  .nav-toggle span::before,.nav-toggle span::after{
    content:""; position:absolute; left:0; width:20px; height:2px;
    background:currentColor; border-radius:2px; transition:transform .3s;
  }
  .nav-toggle span::before{ top:-6px; } .nav-toggle span::after{ top:6px; }
  body.nav-open .nav-toggle span{ background:transparent; }
  body.nav-open .nav-toggle span::before{ transform:translateY(6px) rotate(45deg); }
  body.nav-open .nav-toggle span::after{ transform:translateY(-6px) rotate(-45deg); }
}

/* ---------- 2 · Das Farbband (Leitmotiv) ---------- */
.ribbon-line{
  position:absolute; left:0; right:0; height:2px; border-radius:2px;
  background:var(--ribbon); opacity:.5;
  transform-origin:left;
}
.ribbon-flow{ position:absolute; inset:0; pointer-events:none; z-index:0; overflow:hidden; }
.ribbon-flow svg{ position:absolute; width:160%; height:100%; left:-30%; }
.ribbon-flow path{ fill:none; stroke-linecap:round; }

/* ---------- 3 · Hero ---------- */
.hero{
  position:relative; min-height:100svh;
  display:flex; align-items:center;
  padding-block:clamp(120px,17vh,190px) clamp(60px,9vh,110px);
  overflow:hidden;
}
/* 🔴 KEIN width:100% hier. Dieses Element traegt zugleich .wrap; die
   spaeter geladene Regel wuerde den Satzspiegel ueberschreiben und den
   Inhalt aus dem Fenster schieben (gemessen: rechte Kante 1696 bei 1568). */
.hero-grid{
  display:grid; gap:clamp(28px,4vw,60px); align-items:center;
  grid-template-columns:1fr;
}
@media (min-width:1000px){
  .hero-grid{ grid-template-columns:minmax(0,1.06fr) minmax(0,.94fr); }
}
.hero h1{ margin-bottom:.34em; }
.hero .lede{ margin-bottom:2rem; }
.hero-cta{ display:flex; flex-wrap:wrap; gap:12px; }

/* Broken-Grid-Bildgruppe: zwei Hochformate, VERSETZT + ueberlappend */
.hero-art{ position:relative; display:grid; grid-template-columns:1fr 1fr; gap:clamp(12px,1.6vw,22px); }
.hero-art figure{ margin:0; position:relative; border-radius:var(--r-l); overflow:hidden;
                  box-shadow:var(--shadow-l); background:var(--paper-2); }
.hero-art img{ width:100%; height:100%; object-fit:cover; }
.hero-art .a{ aspect-ratio:3/4.35; }
.hero-art .a.quer{ aspect-ratio:4/3.6; }
.hero-art .b{ aspect-ratio:3/4.35; margin-top:clamp(34px,7vw,86px); }   /* <- der Versatz */
.hero-art figcaption{ position:absolute; inset:auto 0 0; padding:14px 16px;
  font-size:.74rem; font-weight:600; color:#fff; letter-spacing:.02em;
  background:linear-gradient(transparent,rgba(10,6,14,.78)); }

/* Der Farbklecks hinter der Bildgruppe */
/* 🔴 KEINE negativen inset-Werte. Sie vergroessern die Inhaltsbreite des
   Elternteils — gemessen 347>310 bei 360px, also 37px, die `clip` lautlos
   abgeschnitten haette. Der weiche Rand kommt allein aus dem Weichzeichner. */
.hero-blob{
  position:absolute; z-index:-1; border-radius:50%;
  filter:blur(70px); opacity:.34; pointer-events:none;
  background:var(--ribbon);
  inset:6% 8% 24% 6%;
}
@media (prefers-reduced-motion: reduce){ .hero-blob{ filter:blur(80px); opacity:.22; } }

.scroll-hint{
  position:absolute; left:50%; bottom:26px; transform:translateX(-50%);
  display:flex; flex-direction:column; align-items:center; gap:8px;
  font-size:.68rem; font-weight:700; letter-spacing:.18em; text-transform:uppercase;
  color:var(--ink-3);
}
.scroll-hint i{ display:block; width:1px; height:38px; background:var(--line); position:relative; overflow:hidden; }
.scroll-hint i::after{
  content:""; position:absolute; inset:0; background:var(--ribbon);
  animation:drip 2.1s cubic-bezier(.7,0,.3,1) infinite;
}
@keyframes drip{ 0%{transform:translateY(-100%)} 55%,100%{transform:translateY(100%)} }
@media (prefers-reduced-motion: reduce){ .scroll-hint i::after{ animation:none; } }
@media (max-height:720px),(max-width:760px){ .scroll-hint{ display:none; } }

/* ---------- 4 · Themen-Laufband ---------- */
.marquee{
  position:relative; overflow:hidden; padding-block:22px;
  border-block:1px solid var(--line);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent);
}
.marquee-track{ display:flex; gap:0; width:max-content; will-change:transform; }
.marquee-track > span{
  display:inline-flex; align-items:center; gap:26px;
  padding-inline:26px; font-size:clamp(1.1rem,2.3vw,1.8rem);
  font-weight:800; letter-spacing:-.02em; white-space:nowrap; color:var(--ink);
}
.marquee-track b{ font-weight:800; }
.marquee-track em{ font-style:normal; color:var(--accent); }
.marquee-dot{ width:9px; height:9px; border-radius:50%; background:var(--ribbon); flex:none; }

/* ---------- 5 · Broken-Grid-Karten ---------- */
.cards{
  display:grid; gap:clamp(18px,2.4vw,30px);
  grid-template-columns:repeat(auto-fit,minmax(min(100%,270px),1fr));
}
/* Der Versatz — NUR ab Tablet, sonst zerfaellt die Lesereihenfolge.
   🔴 Ueber margin-block-start, NICHT ueber transform. Die Reveal-Regel
   `.rv.in{transform:none}` hat dieselbe Spezifitaet wie `.cards > :nth-child(2)`
   und steht spaeter in dieser Datei — sie gewann und machte das Broken Grid
   flach (gemessen: alle sechs Karten auf y=70 bzw. y=356). Zwei Zustaendige
   fuer dieselbe Eigenschaft; margin gehoert dem Layout, transform der Bewegung. */
@media (min-width:900px){
  .cards{ grid-template-columns:repeat(3,minmax(0,1fr)); align-items:start; }
  .cards > :nth-child(2){ margin-block-start:clamp(26px,3.4vw,52px); }
  .cards > :nth-child(3){ margin-block-start:clamp(10px,1.4vw,22px); }
  .cards > :nth-child(5){ margin-block-start:clamp(26px,3.4vw,52px); }
  .cards > :nth-child(6){ margin-block-start:clamp(10px,1.4vw,22px); }
}

.card{
  position:relative; display:flex; flex-direction:column;
  padding:clamp(22px,2.6vw,32px);
  background:var(--paper); border:1px solid var(--line);
  border-radius:var(--r-l); text-decoration:none; overflow:hidden;
  transition:transform .42s cubic-bezier(.22,1,.36,1), box-shadow .42s, border-color .42s;
  will-change:transform;
}
.card::before{  /* Farbkante oben, faehrt bei Hover aus */
  content:""; position:absolute; inset:0 0 auto; height:4px;
  background:var(--ribbon); transform:scaleX(0); transform-origin:left;
  transition:transform .5s cubic-bezier(.22,1,.36,1);
}
.card:hover{ transform:translateY(-6px); box-shadow:var(--shadow-l); border-color:transparent; }
.card:hover::before{ transform:scaleX(1); }
.card-num{
  font-size:.72rem; font-weight:800; letter-spacing:.14em; color:var(--ink-3);
  margin-bottom:auto; padding-bottom:34px;
}
.card h3{ margin-bottom:.4em; }
.card p{ font-size:.94rem; margin-bottom:1.3em; }
/* min-height 44px: `.card-go` ist eine eigenstaendige Handlungsaufforderung, kein
   Link im Fliesstext — die Abnahme am 05.09.2026 mass sie bei 360 px mit 24 px Hoehe. */
.card-go{ display:inline-flex; align-items:center; gap:.5em; margin-top:auto;
          min-height:44px; font-weight:700; font-size:.9rem; color:var(--accent); }
.card-go .arw{ transition:transform .3s cubic-bezier(.22,1,.36,1); }
.card:hover .card-go .arw{ transform:translateX(5px); }

@media (prefers-reduced-motion: reduce){
  .card,.card::before,.card-go .arw{ transition:none; }
  .card:hover{ transform:none; }
}

/* ---------- 6 · Split-Sektion (Broken Grid) ---------- */
.split{
  display:grid; gap:clamp(30px,4.5vw,72px); align-items:center;
  grid-template-columns:1fr;
}
@media (min-width:960px){
  .split{ grid-template-columns:minmax(0,1fr) minmax(0,1fr); }
  .split--flip > :first-child{ order:2; }
}
.split-art{ position:relative; }
.split-art .stack{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(12px,1.6vw,20px); }
.split-art figure{ margin:0; border-radius:var(--r-l); overflow:hidden;
                   box-shadow:var(--shadow-m); background:var(--paper-2); }
.split-art .tall{ aspect-ratio:3/4.3; }
.split-art .off{ margin-top:clamp(30px,6vw,74px); }   /* Versatz */
.split-art img{ width:100%; height:100%; object-fit:cover; }

.checks{ list-style:none; margin:0 0 1.8rem; padding:0; display:grid; gap:.75rem; }
/* 🔴 flex-wrap ist Pflicht: Stehen mehrere Verweise in einer Zeile, wird
   jeder zu einem eigenen Flex-Element. Ohne Umbruch ist die kleinste
   Breite des Kastens die Summe aller Verweise — gemessen am 08.09.2026
   auf /fensterreinigung/ 316 statt 305 Pixel bei 360 px Fensterbreite. */
.checks li{ display:flex; flex-wrap:wrap; gap:.75rem; align-items:flex-start;
  color:var(--ink-2); font-size:.98rem; min-width:0; }
.checks li > *{ min-width:0; }
.checks svg{ flex:none; margin-top:.28em; }

/* ---------- 7 · Video ---------- */
.video-card{
  position:relative; border-radius:var(--r-l); overflow:hidden;
  box-shadow:var(--shadow-l); background:var(--paper-2); aspect-ratio:16/9;
}
.video-card img{ width:100%; height:100%; object-fit:cover; }
.video-card iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; }
.video-play{
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  background:rgba(12,7,16,.3); border:0; cursor:pointer; color:#fff;
  transition:background-color .3s;
}
.video-play:hover{ background:rgba(12,7,16,.14); }
.video-play i{
  display:grid; place-items:center; width:74px; height:74px; border-radius:50%;
  background:var(--ribbon); box-shadow:0 10px 30px rgba(0,0,0,.35);
  transition:transform .35s cubic-bezier(.22,1,.36,1);
}
.video-play:hover i{ transform:scale(1.09); }
/* Steht ueber einem Bild — ein Verlauf ist dort nicht messbar (die Pruefung
   sah Weiss auf Creme, 1,16:1). Darum eine eigene, deckende Flaeche. */
.video-note{
  position:absolute; inset:auto auto 12px 12px; margin:0;
  padding:7px 13px; border-radius:999px;
  font-size:.76rem; color:#fff; background:rgba(12,7,16,.88);
  pointer-events:none; max-width:calc(100% - 24px);
}

/* ---------- 8 · Termine ---------- */
.events{ display:grid; gap:14px; }
.event{
  display:grid; gap:6px 26px; align-items:center; text-decoration:none;
  grid-template-columns:1fr; padding:clamp(20px,2.4vw,28px);
  border:1px solid var(--line); border-radius:var(--r-m); background:var(--paper);
  transition:border-color .3s, transform .35s cubic-bezier(.22,1,.36,1), box-shadow .35s;
}
@media (min-width:820px){
  .event{ grid-template-columns:120px minmax(0,1fr) auto auto; }
}
.event:hover{ border-color:transparent; box-shadow:var(--shadow-m); transform:translateX(5px); }
.event .tag{
  display:inline-flex; align-items:center; justify-content:center; padding:.34em 1em;
  border-radius:999px; font-size:.72rem; font-weight:800; letter-spacing:.09em;
  text-transform:uppercase; color:#fff; background:var(--accent); justify-self:start;
}
/* 🔴 Feste, dunkle Grundfarben statt Themenvariablen: weisser Text auf dem
   aufgehellten Akzent trug im Dunkelmodus nur 3,62:1, auf --teal 3,08:1.
   Diese Werte sind in BEIDEN Modi gleich und damit in beiden geprueft. */
.event .tag{ background:#8E0C43; }
.event .tag.t-work{ background:#39217F; }
.event .tag.t-ret{ background:#15656F; }
.event h3{ font-size:1.12rem; margin:0; }
.event .meta{ font-size:.88rem; color:var(--ink-3); display:flex; gap:.5em; align-items:center; }
.event .go{ font-weight:700; font-size:.88rem; color:var(--accent); white-space:nowrap; }
@media (prefers-reduced-motion: reduce){ .event:hover{ transform:none; } }

/* ---------- 9 · Fragebogen ---------- */
.quiz{
  background:var(--paper-2); border-radius:var(--r-xl);
  padding:clamp(24px,3.4vw,46px); border:1px solid var(--line);
}
.quiz-head{ display:flex; justify-content:space-between; align-items:baseline; gap:16px;
            margin-bottom:1.3rem; flex-wrap:wrap; }
.quiz-step{ font-size:.78rem; font-weight:800; letter-spacing:.12em;
            text-transform:uppercase; color:var(--ink-3); }
.quiz-bar{ height:5px; border-radius:3px; background:var(--line); overflow:hidden; margin-bottom:1.8rem; }
.quiz-bar i{ display:block; height:100%; width:16.6%; background:var(--ribbon);
             transition:width .5s cubic-bezier(.22,1,.36,1); }
.quiz fieldset{ border:0; margin:0; padding:0; }
.quiz legend{ font-size:1.16rem; font-weight:700; margin-bottom:1.1rem; color:var(--ink); }
.opts{ display:grid; gap:10px; }
.opt{
  display:flex; align-items:center; gap:.8em; min-height:48px;
  padding:.75em 1.1em; border:1px solid var(--line); border-radius:var(--r-m);
  background:var(--paper); cursor:pointer; font-size:.96rem;
  transition:border-color .25s, background-color .25s;
}
.opt:hover{ border-color:var(--accent); }
.opt input{ accent-color:var(--accent); width:18px; height:18px; flex:none; }
.opt:has(input:checked){ border-color:var(--accent); background:color-mix(in srgb,var(--accent) 7%,var(--paper)); }
.quiz-nav{ display:flex; gap:10px; margin-top:1.6rem; flex-wrap:wrap; }
.quiz input[type=text],.quiz textarea{
  width:100%; min-height:48px; padding:.75em 1.1em; font:inherit;
  border:1px solid var(--line); border-radius:var(--r-m);
  background:var(--paper); color:var(--ink);
}

/* ---------- 10 · Fusszeile ---------- */
.site-foot{ background:var(--paper-2); padding-block:clamp(56px,7vw,88px) 26px; margin-top:clamp(60px,8vw,110px); }
.foot-grid{ display:grid; gap:clamp(28px,4vw,52px);
            grid-template-columns:repeat(auto-fit,minmax(min(100%,230px),1fr)); }
.foot-grid h4{ font-size:.78rem; letter-spacing:.14em; text-transform:uppercase;
               color:var(--ink-3); margin-bottom:1.1rem; }
.foot-grid a{ text-decoration:none; color:var(--ink-2); }
.foot-grid a:hover{ color:var(--accent); }
.foot-links{ list-style:none; margin:0; padding:0; display:grid; font-size:.94rem; }
/* 🔴 44px Tappflaeche fuer JEDEN Fusszeilenlink. Gemessen bei 360px:
   18 Ziele unter 44px — Instagram/Facebook (73x26), E-Mail (228x19),
   Telefon (113x19) und die Navigationsliste. Das ist keine Optik-,
   sondern eine Bedienbarkeitsfrage. */
.foot-links li{ display:flex; align-items:center; min-height:26px; }
.foot-zeiten{ margin-top:.6rem; font-size:.9rem; color:var(--ink-3); }
.foot-links a{ display:inline-flex; align-items:center; min-height:44px; min-width:44px; padding-block:4px; }
.foot-sozial{ display:flex; gap:6px; margin-top:.6rem; flex-wrap:wrap; }
.foot-sozial a{ display:inline-flex; align-items:center; min-height:44px; padding:0 12px 0 0; }
.foot-bottom a{ display:inline-flex; align-items:center; min-height:44px; }
.foot-bottom{ margin-top:clamp(34px,5vw,60px); padding-top:10px; border-top:1px solid var(--line);
              display:flex; flex-wrap:wrap; gap:4px 26px; justify-content:space-between;
              align-items:center; font-size:.84rem; color:var(--ink-3); }
.foot-bottom a{ text-decoration:none; color:var(--ink-3); }
.foot-bottom a:hover{ color:var(--accent); }

/* ---------- 11 · Schwebende Schaltflaechen ---------- */
/* 🔴 Diese stehen ausserhalb von <main>, damit position:fixed traegt —
   `overflow:clip` auf main erzeugt sonst einen Containing Block. */
.floats{ position:fixed; right:16px; bottom:16px; z-index:70; display:grid; gap:10px; }
.float{
  width:52px; height:52px; border-radius:50%; display:grid; place-items:center;
  border:0; cursor:pointer; color:#fff; text-decoration:none;
  box-shadow:var(--shadow-m); transition:transform .3s cubic-bezier(.22,1,.36,1);
}
.float:hover{ transform:scale(1.08); }
.float--wa{ background:#25D366; }
.float--tel{ background:var(--blue-deep); }
.float--top{ background:var(--ink); opacity:0; pointer-events:none; transition:opacity .3s, transform .3s; }
.float--top.on{ opacity:1; pointer-events:auto; }
@media (prefers-reduced-motion: reduce){ .float{ transition:none; } .float:hover{ transform:none; } }

/* ---------- 12 · Reveal ---------- */
.rv{ opacity:0; transform:translateY(26px); }
.rv.in{ opacity:1; transform:none; transition:opacity .8s cubic-bezier(.22,1,.36,1),
                                             transform .8s cubic-bezier(.22,1,.36,1); }
@media (prefers-reduced-motion: reduce){
  .rv{ opacity:1 !important; transform:none !important; }
}
/* Kein JS? Dann ist trotzdem alles sichtbar. */
.no-js .rv{ opacity:1; transform:none; }

.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}
.skip{
  position:absolute; left:8px; top:-60px; z-index:200; padding:12px 20px;
  background:var(--accent); color:#fff; border-radius:0 0 10px 10px;
  text-decoration:none; font-weight:700; transition:top .2s;
}
.skip:focus{ top:0; }

/* ============================================================
   VORSTELLUNGSVIDEO — Klick zum Starten (Short, 9:16)
   ============================================================
   Vor dem Klick steht hier ein lokales Bild und ein Knopf. Erst der Klick
   ersetzt den Knopf durch ein youtube-nocookie-iframe. Das Seitenverhaeltnis
   sitzt am AEUSSEREN Rahmen, damit beim Austausch nichts springt und kein
   Layout-Shift entsteht.
   🔴 min-width:0 ist Pflicht: als Grid-Kind in .split waere das Element sonst
   nie schmaler als sein Inhalt und wuerde bei 360 px die Spalte aufblasen. */
.video-hoch{
  position:relative; min-width:0; width:100%; max-width:340px; margin-inline:auto;
  aspect-ratio:9/16; border-radius:var(--r-l); overflow:hidden;
  box-shadow:var(--shadow-l); background:var(--paper-2);
}
.video-hoch iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; }

.video-start{
  position:absolute; inset:0; display:block; width:100%; height:100%;
  padding:0; border:0; margin:0; cursor:pointer; background:#0E0812;
  font:inherit; color:#FFFFFF; text-align:left;
}
.video-start img{ width:100%; height:100%; object-fit:cover; display:block;
  transition:transform .5s cubic-bezier(.2,.7,.3,1), filter .3s ease; }
.video-start::after{                      /* Lesbarkeit fuer den Text unten */
  content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(180deg,rgba(14,8,18,0) 42%,rgba(14,8,18,.86) 100%);
}
.video-start:hover img,
.video-start:focus-visible img{ transform:scale(1.045); }

.video-knopf{
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  display:grid; place-items:center; width:74px; height:74px; border-radius:50%;
  background:var(--accent); color:#FFFFFF; box-shadow:0 8px 30px rgba(0,0,0,.4);
  transition:transform .3s cubic-bezier(.2,.7,.3,1), background .3s ease;
}
.video-knopf svg{ margin-left:4px; }      /* optischer Ausgleich des Dreiecks */
.video-start:hover .video-knopf,
.video-start:focus-visible .video-knopf{ transform:translate(-50%,-50%) scale(1.09); }

.video-text{ position:absolute; left:0; right:0; bottom:0; z-index:1;
  padding:16px 18px 18px; display:grid; gap:.15em; }
.video-text b{ font-family:"Work Sans",sans-serif; font-size:1.02rem; font-weight:800;
  color:#FFFFFF; }
.video-text span{ font-size:.84rem; color:#E9E4EE; }

.video-start:focus-visible{ outline:3px solid var(--lime); outline-offset:-3px; }

@media (prefers-reduced-motion:reduce){
  .video-start img,.video-knopf{ transition:none; }
  .video-start:hover img,.video-start:focus-visible img{ transform:none; }
}

/* ============================================================
   FESTE AKTIONSLEISTE — nur Handy
   ============================================================
   Ab 700 px verschwindet sie; dort steht der Offerte-Knopf wieder im Kopf.
   🔴 Der Abstand unten am body ist Pflicht, sonst deckt die Leiste die letzten
   Zeilen der Fusszeile zu — und das faellt auf dem Desktop nie auf.
   env(safe-area-inset-bottom) haelt sie ueber dem iPhone-Balken. */
.aktionsleiste{ display:none; }

@media (max-width:699px){
  .aktionsleiste{
    position:fixed; left:0; right:0; bottom:0; z-index:80;
    display:grid; grid-template-columns:repeat(3,minmax(0,1fr));
    background:var(--paper); border-top:1px solid var(--line);
    box-shadow:0 -6px 26px rgba(14,8,18,.14);
    padding-bottom:env(safe-area-inset-bottom,0px);
  }
  .al-knopf{
    display:grid; place-items:center; gap:2px; min-width:0;
    padding:9px 4px 10px; min-height:56px;      /* > 44 px Tappflaeche */
    text-decoration:none; color:var(--ink-2); font-size:.74rem; font-weight:700;
    border-left:1px solid var(--line);
  }
  .al-knopf:first-child{ border-left:0; }
  .al-knopf span{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:100%; }
  .al-knopf--wa{ color:#128C4A; }
  .al-knopf--cta{ background:var(--accent); color:#FFFFFF; }
  .al-knopf:active{ background:var(--paper-2); }
  .al-knopf--cta:active{ background:var(--blue-deep); }
  .al-knopf:focus-visible{ outline:3px solid var(--lime); outline-offset:-3px; }

  body{ padding-bottom:calc(60px + env(safe-area-inset-bottom,0px)); }

  /* Die runden Knoepfe waeren jetzt doppelt gemoppelt und wuerden die Leiste
     ueberlappen — auf dem Handy bleibt nur «nach oben», und der rueckt hoch. */
  .float--wa,.float--tel{ display:none; }
  .floats{ bottom:calc(70px + env(safe-area-inset-bottom,0px)); }
}

/* ============================================================
   LEISTUNGSKARTEN MIT BILD
   ============================================================
   Die Karten trugen bisher nur Text. Ein Bild beantwortet in einer
   Zehntelsekunde, worum es geht — das schafft keine Zeile.
   🔴 aspect-ratio am WRAPPER, nicht am Bild: sonst springt das Layout,
   waehrend die Bilder laden, und jeder Messwert darunter wandert mit. */
.card--bild{ padding-top:0; overflow:hidden; }
.card-bild{
  display:block; margin:0 0 clamp(16px,2vw,22px);
  aspect-ratio:4/3; overflow:hidden; border-radius:var(--r-m);
  background:var(--paper-2);
}
.card-bild img{
  width:100%; height:100%; object-fit:cover; display:block;
  transition:transform .6s cubic-bezier(.2,.7,.3,1);
}
.card--bild:hover .card-bild img,
.card--bild:focus-visible .card-bild img{ transform:scale(1.06); }
@media (prefers-reduced-motion:reduce){
  .card-bild img{ transition:none; }
  .card--bild:hover .card-bild img{ transform:none; }
}

/* Vorher/Nachher auf der Startseite: zwei grosse Bilder statt vier kleiner.
   Die Beschriftung sitzt IM Bild, damit das Paar auch beim Scrollen
   eindeutig bleibt. */
#vorher-nachher .vn{ grid-template-columns:repeat(2,minmax(0,1fr)); }
@media (min-width:900px){
  #vorher-nachher .vn{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  #vorher-nachher .vn > :nth-child(2){ margin-block-start:clamp(24px,3.4vw,54px); }
}
#vorher-nachher .vn figure{ aspect-ratio:3/4; }

/* Karten- und Merkmalsueberschriften koennen h2 ODER h3 sein: auf Seiten ohne
   eigene Abschnittsueberschrift sind sie die oberste Gliederungsebene und
   stehen als h2 da. Gleiche Gestaltung, anderer Rang — der Rang gehoert der
   Struktur, nicht dem Aussehen. */
.card h2, .merkmal h2, .preis h2, .schritt h2, .weg h2{
  font-size:1.06rem; margin-bottom:.45em; line-height:1.3;
}
.card h2{ font-size:1.18rem; }
.foot-h{ font-size:.95rem; margin-bottom:.7em; }

/* ============================================================
   HERO — WISCHEN WIE AUF EINER BESCHLAGENEN SCHEIBE
   ============================================================
   Der Zeiger wischt eine milchige Schicht frei. Fuer eine Reinigungsfirma ist
   das nicht Dekoration, sondern das Versprechen in Bewegung: beschlagen, dann
   klar. Die Bilder dahinter wirken zuerst angelaufen und werden unter dem
   Finger scharf.

   🔴 DIE SCHICHT LIEGT HINTER BILDERN UND TEXT, NIE DARUEBER.
   Stapelung im Hero: Farbband 0 · Wischschicht 1 · Bilder 2 · Text 3.
   Ueber dem Text saenke dessen Kontrast mit jeder Mausbewegung, und ein
   Kontrastwert, der sich bewegt, ist nicht pruefbar. Ueber den Bildern —
   so lag sie bis zum 06.09.2026 — standen die Teamfotos hinter Milchglas,
   bis jemand mit der Maus darueberfuhr.

   🔴 OHNE JAVASCRIPT IST SIE UNSICHTBAR.
   `display:none` als Grundzustand, erst `.hero-wisch--an` zeigt sie. Sonst
   laege bei abgeschaltetem JavaScript eine milchige Flaeche ueber den Bildern,
   die niemand wegwischen kann — die Seite saehe kaputt aus statt schlicht.

   Auf Fingergeraeten laeuft sie mit, aber ohne Weichzeichnung (siehe unten).
   Aus bleibt sie bei `prefers-reduced-motion`. */
.hero-wisch{
  display:none;
  position:absolute; inset:0; z-index:1; pointer-events:none;
  --mx:50%; --my:50%; --r:0px;          /* --r bleibt 0, bis die Maus da war */
}
.hero-wisch--an{ display:block; }

.hw-flaeche{
  position:absolute; inset:0;
  /* 🔴 BEWUSST SCHWACH. Der Schleier liegt beim Laden ueber dem ganzen Hero und
     verschwindet erst, wenn die Maus ihn wegwischt. Wer nie mit der Maus dorthin
     faehrt — und auf dem Handy kann das niemand —, sieht ihn dauerhaft. Die zwei
     Teambilder sind das staerkste Argument der Startseite; sie duerfen nicht hinter
     Milchglas warten. Darum: erkennbar bleibt alles, der Wischer ist die Zugabe,
     nicht das Tor.
     Werteverlauf: erst blur(7px)/.62 — zu viel, die Bilder standen hinter
     Milchglas. Dann blur(3.5px)/.34 — Jairo fand es zu schwach. Jetzt
     blur(5.5px)/.48, also dazwischen: sichtbar beschlagen, aber die
     Gesichter auf den Teambildern bleiben erkennbar. */
  /* 🔴 EIGENE STRUKTUR, nicht nur Weichzeichnung.
     Gemessen am 06.09.2026: unter dem Schleier liegt im oberen Hero nur
     `hero-copy`, `h1` und `li` — alles ohne eigenen Hintergrund, also blankes
     Papier. Eine reine Weichzeichnung hat dort NICHTS zu weichzeichnen, und das
     Wegwischen blieb unsichtbar. Auf dem Handy, wo die Fotos erst weiter unten
     kommen, war der Effekt damit praktisch wirkungslos.
     Die Beschlagsflecken unten sind darum echte Farbe: sie sind auch ueber
     glattem Papier sichtbar und verschwinden unter dem Finger. */
  /* 🔴 KUEHL-GRAU, NICHT WEISS. Erster Versuch nahm weisse Flecken — auf dem
     Papier #FAFAFA verschob das den Grund von rgb(250,250,250) auf
     rgb(253,254,255). Gemessen: praktisch unsichtbar. Echter Beschlag streut
     Licht und wirkt kuehl und leicht grau, nicht heller als die Scheibe. */
  background:
    radial-gradient(38% 26% at 22% 18%, rgba(176,196,222,.50), transparent 70%),
    radial-gradient(30% 22% at 74% 34%, rgba(184,202,226,.44), transparent 72%),
    radial-gradient(44% 30% at 48% 72%, rgba(170,192,220,.40), transparent 74%),
    radial-gradient(26% 20% at 88% 82%, rgba(186,204,228,.34), transparent 70%),
    linear-gradient(160deg, rgba(196,214,238,.46), rgba(182,203,232,.38));
  backdrop-filter:blur(5.5px) saturate(.78) brightness(1.03);
  -webkit-backdrop-filter:blur(5.5px) saturate(.78) brightness(1.03);

  /* Das Loch unter dem Zeiger. Weicher Rand, sonst wirkt es wie eine
     ausgeschnittene Scheibe statt wie ein Wischer. */
  -webkit-mask-image:radial-gradient(circle var(--r) at var(--mx) var(--my),
                     transparent 0%, transparent 55%, #000 100%);
          mask-image:radial-gradient(circle var(--r) at var(--mx) var(--my),
                     transparent 0%, transparent 55%, #000 100%);
  transition:opacity .45s ease;
}

/* Im Dunkelmodus ist Milchglas nicht weiss, sondern kuehler Dunst — sonst
   leuchtet die Flaeche wie ein Scheinwerfer. */
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .hw-flaeche{
    /* 🔴 IM DUNKELN VIEL ZURUECKHALTENDER.
       Erster Versuch nahm dieselbe Staerke wie im Hellmodus — der Schleier hob den
       Grund von rgb(28,38,52) auf rgb(99,125,158), und die HELLE Schrift darueber
       fiel auf 2,7:1 statt 4,5. Sieben Texte gerissen, gemessen am 06.09.2026.
       Auf hellem Grund verdunkelt Beschlag und schadet der dunklen Schrift kaum;
       auf dunklem Grund hellt er auf und frisst die helle Schrift. Die Richtung
       kehrt sich um — die Staerke muss es auch. */
    background:
      radial-gradient(38% 26% at 22% 18%, rgba(126,156,196,0.091), transparent 70%),
      radial-gradient(30% 22% at 74% 34%, rgba(126,156,196,0.077), transparent 72%),
      radial-gradient(44% 30% at 48% 72%, rgba(112,140,178,0.07), transparent 74%),
      radial-gradient(26% 20% at 88% 82%, rgba(126,156,196,0.063), transparent 70%),
      linear-gradient(160deg, rgba(52,70,98,0.14), rgba(38,53,74,0.105));
    backdrop-filter:blur(5.5px) saturate(.85) brightness(.985);
    -webkit-backdrop-filter:blur(5.5px) saturate(.85) brightness(.985);
  }
}

/* 🔴 Stapelung, korrigiert am 06.09.2026 (Befund Jairo):
   Farbband 0 · SCHLEIER 1 · Bilder 2 · Text 3.
   Vorher lag der Schleier auf 2 und damit UEBER den Fotos — sie standen hinter
   Milchglas, bis jemand mit der Maus darueberfuhr. Die zwei Teambilder sind das
   staerkste Argument der Startseite; sie duerfen nie beschlagen sein.
   Jetzt wischt der Zeiger nur den HINTERGRUND frei: Farbband, Farbschleier und
   Papier. Die Fotos und der Text bleiben unberuehrt und immer scharf. */
.hero-art{ position:relative; z-index:2; }
.hero-copy{ position:relative; z-index:3; }

/* 🔴 Auf dem Handy laeuft der Effekt jetzt mit — der Finger wischt beim Scrollen
   ueber den Hero, und genau das sieht gut aus. Vorher war er dort abgeschaltet.
   ⚠️ ABER OHNE backdrop-filter: eine bildschirmfuellende Weichzeichnung, die bei
   jedem Scrollbild neu gerechnet wird, ruckelt auf aelteren Geraeten. Der Schleier
   traegt dort dieselbe Wirkung ueber Deckkraft allein, und die kostet nichts. */
@media (pointer:coarse){
  .hw-flaeche{
    backdrop-filter:none!important;
    -webkit-backdrop-filter:none!important;
    background:
      radial-gradient(38% 26% at 22% 18%, rgba(176,196,222,.56), transparent 70%),
      radial-gradient(30% 22% at 74% 34%, rgba(184,202,226,.50), transparent 72%),
      radial-gradient(44% 30% at 48% 72%, rgba(170,192,220,.46), transparent 74%),
      radial-gradient(26% 20% at 88% 82%, rgba(186,204,228,.40), transparent 70%),
      linear-gradient(160deg, rgba(196,214,238,.52), rgba(182,203,232,.44));
  }
}
@media (pointer:coarse) and (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .hw-flaeche{
    background:
      radial-gradient(38% 26% at 22% 18%, rgba(126,156,196,0.105), transparent 70%),
      radial-gradient(30% 22% at 74% 34%, rgba(126,156,196,0.091), transparent 72%),
      radial-gradient(44% 30% at 48% 72%, rgba(112,140,178,0.084), transparent 74%),
      radial-gradient(26% 20% at 88% 82%, rgba(126,156,196,0.07), transparent 70%),
      linear-gradient(160deg, rgba(52,70,98,0.168), rgba(38,53,74,0.126));
  }
}

/* Bleibt aus, wo Bewegung stoert. Das ist keine Zierde, sondern eine Zusage. */
@media (prefers-reduced-motion:reduce){ .hero-wisch{ display:none!important; } }

/* 🔴 Die Vorzeile im Hero traegt --ink-3, den weichsten Textton. Auf dem
   beschlagenen Grund (rgb(180,199,224)) fiel sie damit auf 3,45:1 — Vorgabe 4,5.
   Gemessen am 06.09.2026, nachdem der Beschlag sichtbar gemacht wurde.
   Zwei Wege standen offen: den Beschlag wieder abschwaechen, bis er unsichtbar
   ist, oder diesen einen Text kraeftiger setzen. Der zweite Weg kostet nichts
   und ist ohnehin die bessere Lesbarkeit. Betrifft NUR den Hero — die weiche
   Vorzeile auf den Unterseiten bleibt, dort liegt kein Schleier darunter. */
.hero .eyebrow{ color:var(--ink-2); }

/* Breite Tabellen scrollen in ihrem eigenen Behaelter, statt die Seite zu
   verschieben. Gemessen am 08.09.2026: die zwei Tabellen der
   Datenschutzerklaerung ragten bei 360 px auf 532 px hinaus. Eine Tabelle mit
   zwei Spalten Fliesstext laesst sich nicht sinnvoll schmaler setzen — sie
   bekommt darum einen Rahmen, in dem sie seitlich beweglich ist. */
.tab-scroll{ overflow-x:auto; -webkit-overflow-scrolling:touch; margin-block:1rem; }
.tab-scroll table{ min-width:32rem; }