/* =========================================================================
   Julian Fenster, Dannenberg (Elbe)

   RICHTUNG (28.08.2026, nach der HVAC-Referenz von Timo):
   hell, farbig, freundlich. Karten, die ueber die Sektionskante ragen.
   Eine Welle als Trenner. Grosse fette Schrift.

   DER VERLAUF TRAEGT DIE AUSSAGE. Bei der Referenz war es kalt nach warm,
   das ist bei Heizung und Klima die Kernleistung. Fuer Fenster gilt genau
   dasselbe, nur woertlicher: ein Fenster IST die Grenze zwischen kalt
   draussen und warm drinnen. Deshalb laeuft der Verlauf im Hero von einem
   kuehlen Blau links in sein Signalrot rechts, und das Fenster steht auf
   der Kante dazwischen. Blau ist hier keine zweite Markenfarbe, sondern
   die Temperatur draussen. Rot bleibt die Marke und die Entscheidung.

   Fox Medien. Vorstand unter backups/2026-08-28_vor-verlauf/
   ========================================================================= */

@font-face{font-family:'Aleo';src:url('assets/fonts/aleo-700.woff2') format('woff2');font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:'Aleo';src:url('assets/fonts/aleo-600.woff2') format('woff2');font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:'Barlow';src:url('assets/fonts/barlow-400.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Barlow';src:url('assets/fonts/barlow-600.woff2') format('woff2');font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:'Barlow';src:url('assets/fonts/barlow-700.woff2') format('woff2');font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:'Aleo-fallback';src:local('Georgia'),local('Times New Roman');size-adjust:97%;ascent-override:92%;descent-override:24%;line-gap-override:0%}
@font-face{font-family:'Barlow-fallback';src:local('Arial'),local('Helvetica');size-adjust:96%;ascent-override:92%;descent-override:22%;line-gap-override:0%}

:root{
  --rot:#ee202a; --rot-dunkel:#c4141c; --rot-hell:#ff8f8a;
  /* Der kalte Pol ist jetzt Schwarz statt Blau. Die Seite ist schwarz-rot,
     der Verlauf laeuft von der dunklen Kaelte draussen in die warme Marke. */
  --kalt:#15181d; --kalt-hell:#3a4149; --kalt-blass:#eeeff1;
  --tinte:#101216; --tinte2:#1b1e24;
  --grau:#5d626b; --grau-hell:#8d929b;
  --linie:#e6e5e2;
  --papier:#ffffff; --nebel:#f5f5f4; --sand:#faf8f5;

  --serif:'Aleo','Aleo-fallback',Georgia,'Times New Roman',serif;
  --sans:'Barlow','Barlow-fallback',"Segoe UI",Roboto,-apple-system,Helvetica,Arial,sans-serif;

  --breite:1240px; --schmal:780px; --rand:clamp(20px,4vw,52px);
  --rund:14px;
  --kante:clamp(38px,5.4vw,86px);   /* Hoehe der Schraege, Logo-Schwung */
  --strich:clamp(9px,1.2vw,17px);   /* dickes Ende des roten Keils, links */
  --schatten:0 24px 60px -30px rgba(20,32,50,.4);
  --schatten-tief:0 30px 70px -28px rgba(20,32,50,.5);

  --primary:var(--rot); --primary-dark:var(--rot-dunkel);
  --text:var(--tinte); --text-muted:var(--grau);
  --bg:var(--papier); --bg-alt:var(--nebel); --border:var(--linie);
  --radius:10px; --max-width:var(--breite);
  --font-heading:var(--sans); --font-body:var(--sans);
}

*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none!important}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;scroll-padding-top:96px}
body{margin:0;background:var(--papier);color:var(--tinte);font-family:var(--sans);
     font-size:17px;line-height:1.62;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{max-width:100%;height:auto;display:block}
a{color:var(--rot)}
/* Die grossen Ueberschriften laufen in Aleo, derselben Serifenschrift wie auf
   der Uebergangsseite. Das ist die Wiedererkennung der Marke. Die kleinen
   Ueberschriften bleiben in der Grotesk, sonst wird die Seite teigig.
   Aleo ist eine Slab, die vertraegt weniger negative Laufweite als Barlow. */
h1,h2{font-family:var(--serif);font-weight:700;line-height:1.06;margin:0 0 .5em;
       letter-spacing:-.012em;text-wrap:balance}
h3,h4{font-family:var(--sans);font-weight:700;line-height:1.08;margin:0 0 .5em;
       letter-spacing:-.026em;text-wrap:balance}
p{margin:0 0 1.05em}
p:last-child{margin-bottom:0}

.wrap{max-width:var(--breite);margin:0 auto;padding:0 var(--rand)}
.wrap--schmal{max-width:var(--schmal)}
.band{padding:clamp(64px,8vw,120px) 0}
.band--nebel{background:var(--nebel)}
.band--sand{background:var(--sand)}

.eyebrow{font-size:12.5px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;
         color:var(--rot);margin:0 0 14px}
.mitte{text-align:center}
.mitte .lead{max-width:60ch;margin-left:auto;margin-right:auto;color:var(--grau)}
.sprung{position:absolute;left:-9999px;top:0;background:var(--tinte);color:#fff;padding:12px 18px;z-index:200}
.sprung:focus{left:8px;top:8px}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;
     font-weight:700;font-size:15.5px;padding:15px 28px;border:2px solid transparent;
     border-radius:8px;text-decoration:none;cursor:pointer;
     box-shadow:0 10px 24px -12px rgba(238,32,42,.7);
     transition:background .18s ease,transform .18s ease,box-shadow .18s ease,border-color .18s ease}
.btn--rot{background:var(--rot);color:#fff}
.btn--rot:hover{background:var(--rot-dunkel);transform:translateY(-2px);box-shadow:0 16px 30px -12px rgba(238,32,42,.75)}
.btn--leer{background:transparent;color:var(--tinte);border-color:var(--linie);box-shadow:none}
.btn--leer:hover{border-color:var(--tinte)}
.btn--weiss{background:#fff;color:var(--kalt);box-shadow:var(--schatten)}
.btn--gross{font-size:16.5px;padding:18px 34px}
.btn:disabled{opacity:.55;cursor:default;transform:none}

/* ---------- Kopf, schwebende Leiste wie in der Referenz ---------- */
.kopf{position:fixed;top:0;left:0;right:0;z-index:90;padding:14px 0 0}
.kopf__innen{max-width:var(--breite);margin:0 auto;padding:0 var(--rand)}
.kopf__leiste{background:#fff;border-radius:16px;box-shadow:0 12px 34px -18px rgba(20,32,50,.45);
  padding:11px 13px 11px 24px;display:flex;align-items:center;gap:22px}
.kopf__marke img{height:46px;width:auto}
.kopf__nav{display:flex;gap:26px;margin-left:auto}
.kopf__nav a{color:var(--tinte);text-decoration:none;font-size:15.5px;font-weight:600}
.kopf__nav a:hover{color:var(--rot)}
.kopf__aktion{display:flex;align-items:center;gap:14px}
.kopf__tel{color:var(--tinte);text-decoration:none;font-weight:700;font-size:16px;white-space:nowrap}
/* Instagram in der Leiste, auf Kundenwunsch. Steht neben dem roten Knopf und
   nicht in der Navigation, sonst waere es unter 1040 Pixeln weg, also auf jedem
   Handy. Flaeche 38 Pixel gross fuer den Daumen, das Zeichen selbst 21. */
.kopf__insta{flex:0 0 auto;display:grid;place-items:center;width:38px;height:38px;
  border-radius:11px;color:var(--tinte);text-decoration:none;
  transition:color .16s ease,background .16s ease}
.kopf__insta svg{display:block;width:21px;height:21px}
.kopf__insta:hover,.kopf__insta:focus-visible{color:var(--rot);background:rgba(238,32,42,.09)}
.kopf .btn{padding:12px 22px;font-size:14.5px}
@media (max-width:1040px){ .kopf__aktion{margin-left:auto} }
/* Das Fenster aus dem Logo steht allein und in Rot vor den vier Leistungen.
   Nachgezeichnet als SVG statt aus dem Logo geschnitten: im Logo laeuft der
   Schwung als Sims durch die Unterkante des Fensters, ein Ausschnitt haette
   also entweder den Schwung mitgebracht oder das Fenster ohne Boden gelassen.
   Als Pfad ist es ausserdem bei jeder Groesse scharf und faerbbar. */
/* Zeichen und Leistungen liegen zusammen in einem Link zurueck an den Anfang.
   Der Absatz bleibt im Link erhalten, sonst verrutschten die nth-child-Regeln,
   die bei schmalen Fenstern die hinteren Woerter ausblenden. */
.kopf__heim{flex:0 0 auto;display:flex;align-items:center;gap:14px;
  text-decoration:none;color:inherit;border-radius:10px;
  transition:transform .16s ease,opacity .16s ease}
.kopf__heim:hover{transform:translateY(-1px);opacity:.82}
.kopf__zeichen{flex:0 0 auto;display:grid;place-items:center;color:var(--rot)}
.kopf__zeichen svg{display:block;width:26px;height:32px}
@media (max-width:420px){ .kopf__zeichen svg{width:22px;height:27px} }

/* In der Leiste stehen jetzt die vier Leistungen. Das Logo sitzt im Hero. */
.kopf__leistungen{display:flex;align-items:center;gap:10px;margin:0;
  flex-wrap:nowrap;flex:0 0 auto}
.kopf__leistungen span{font-family:var(--serif);font-size:18px;font-weight:700;
  letter-spacing:0;color:var(--tinte);white-space:nowrap}
.kopf__leistungen span+span::before{content:"";display:inline-block;width:4px;height:4px;border-radius:50%;
  background:var(--rot);vertical-align:middle;margin-right:11px}


/* Die Leiste darf nie umbrechen. Was bei welcher Breite weicht, ist nach
   Wichtigkeit gestaffelt: zuerst der Bewertungstext, dann Menuepunkte, dann
   die Telefonnummer, zuletzt Leistungswoerter. Der rote Knopf bleibt immer. */
.kopf__leiste{flex-wrap:nowrap}
@media (max-width:1420px){ .kopf__nav a:nth-child(3){display:none} }
@media (max-width:1300px){ .kopf__nav a:nth-child(2){display:none} }
@media (max-width:1040px){ .kopf__nav{display:none} }
@media (max-width:820px){ .kopf__leistungen span:nth-child(n+4){display:none} }
@media (max-width:680px){ .kopf__leistungen span:nth-child(n+3){display:none} }
@media (max-width:520px){ .kopf__leistungen span:nth-child(n+2){display:none} }
/* Unter 460 Pixeln wird es eng, dort schrumpft das Symbol. Unter 360 Pixeln
   passt es rechnerisch nicht mehr neben den roten Knopf, dann weicht es. Im
   Fuss steht der Verweis ohnehin weiterhin. */
@media (max-width:460px){
  .kopf__aktion{gap:8px}
  .kopf__insta{width:32px;height:32px;border-radius:9px}
  .kopf__insta svg{width:19px;height:19px}
}
@media (max-width:359px){ .kopf__insta{display:none} }

/* =========================================================================
   HERO: der Verlauf von kalt nach warm, das Fenster auf der Kante
   ========================================================================= */
.hero{--h1:clamp(34px,6.4vw,80px);--luft:26px;
  position:relative;padding:clamp(130px,15vw,180px) 0 clamp(150px,17vw,230px);
      background:#0b0d10;
      color:#fff;overflow:hidden;isolation:isolate}
/* EIN Bild, vollflaechig. Der Verlauf liegt als Schleier darueber, damit die
   Heide sichtbar bleibt und die Lesart kalt nach warm trotzdem traegt. */
.hero__bild{position:absolute;inset:0;z-index:-2;overflow:hidden}
.hero__bild picture{display:block;width:100%;height:100%}
/* Der Dauerzoom ist am 29.08. raus. An seiner Stelle folgt der Hintergrund
   der Maus, ein paar Pixel weit und gegenlaeufig, wie der Blick durch ein
   Fenster. Die 6 Prozent Uebergroesse sind kein Effekt, sondern der Vorrat,
   aus dem die Verschiebung genommen wird: ohne ihn kaeme an einer Kante der
   nackte Untergrund zum Vorschein. Die Werte setzt site.js, hier stehen nur
   die Rueckfallwerte fuer den Fall, dass kein Zeiger da ist. */
.hero__bild img{width:100%;height:100%;object-fit:cover;object-position:60% 50%;
  transform:scale(1.06) translate3d(var(--tf-x,0px),var(--tf-y,0px),0)}
/* Die Person bleibt bewusst stehen. Nur der Hintergrund folgt dem Zeiger:
   Thomas steht vor dem Fenster, nicht im Bild, und ein mitwandernder Mensch
   liest sich als Fehler, nicht als Tiefe. Timo, 29.08.2026. */
.hero::after{content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(104deg,
    rgba(0,0,0,.94) 0%, rgba(13,15,18,.88) 22%, rgba(28,20,22,.72) 44%,
    rgba(96,24,30,.6) 66%, rgba(200,28,36,.56) 86%, rgba(238,32,42,.54) 100%)}

/* Vier Felder, zwei Zeilen. Zeile eins traegt links die Ortsangabe mit der
   Ueberschrift und rechts das Logo, Zeile zwei links die Knoepfe und rechts das
   Siegel. Durch align-items:start beginnen Logo und Siegel exakt auf der Hoehe
   ihrer Nachbarn, ohne dass irgendwo ein Abstand nachgerechnet werden muss. */
.hero__innen{position:relative;z-index:2;max-width:var(--breite);margin:0 auto;padding:0 var(--rand);
  display:grid;grid-template-columns:minmax(0,1fr) auto;
  grid-template-areas:"oben marke" "unten siegel";
  column-gap:clamp(24px,4vw,64px);row-gap:0;align-items:start;
  container-type:inline-size}
.hero__oben{grid-area:oben}
.hero__unten{grid-area:unten}
/* Das Logo sitzt auf Hoehe der zweiten Ueberschriftzeile, nicht mehr auf Hoehe
   der Ortsangabe. Der Versatz ist die Ortsangabe mit ihrem Abstand, rund 60 px,
   plus eine halbe Zeile der Ueberschrift. Er haengt an derselben Variablen wie
   die Schriftgroesse und bleibt dadurch auf jeder Fensterbreite auf Hoehe. */
/* align-self:end statt eines gerechneten Abstands von oben. Logo und Vorspann
   liegen in derselben Rasterzeile, deren Unterkante die Unterkante des
   Vorspanns ist. Das Logo endet damit automatisch auf der Zeile "geliefert bis
   auf Ihre Baustelle", und zwar auf jeder Breite und bei jeder Zeilenzahl. Ein
   fester Wert haette bei anderem Umbruch danebengelegen. */
.hero__marke{grid-area:marke;display:flex;justify-content:center;align-self:end}
.hero__marke img{width:clamp(180px,20vw,330px);height:auto;
  filter:drop-shadow(0 10px 34px rgba(0,0,0,.55))}

/* Bewertungs-Siegel. Sitzt im Raster auf Hoehe der Knoepfe, deshalb kein
   margin und kein Abstand von Hand. */
/* Das Siegel endet auf der vierten Hakenzeile, es steht also ueber ihr und
   nicht auf ihr. Rechnung: von der Oberkante der Knopfreihe bis zu dieser
   Zeile sind es 178 px (Knopfreihe 66, Abstand zur Beweisleiste 24, drei
   Zeilen zu je 29), abzueglich der Siegelhoehe von 98 px bleiben 80 px
   Versatz, dazu die Luft, die jetzt oben an der Knopfreihe haengt. Alle Werte
   stehen in Pixeln fest und wandern nicht mit der Breite.
   Unter 900 px liegt das Siegel ueber dem Text, dort faellt der Versatz weg. */
.siegel{grid-area:siegel;justify-self:center;align-self:start;
  margin-top:calc(var(--luft) + 80px);
  display:flex;flex-direction:column;align-items:center;gap:5px;text-decoration:none;
  background:rgba(255,255,255,.94);border-radius:10px;padding:13px 20px 14px;
  box-shadow:0 16px 40px -18px rgba(0,0,0,.7);min-width:200px;
  transition:transform .18s ease,box-shadow .18s ease}
.siegel:hover{transform:translateY(-2px);box-shadow:0 22px 46px -18px rgba(0,0,0,.75)}
/* Das Google-G steht als Herkunftsangabe neben den Sternen, nicht als Schmuck.
   Es sagt, wer die Bewertungen erhoben hat. Der senkrechte Strich trennt die
   Quelle von der Wertung. */
.siegel__kopf{display:flex;align-items:center;gap:9px}
.siegel__g{flex:none;display:block;width:19px;height:19px;
  padding-right:9px;border-right:1px solid var(--linie)}
.siegel__g svg{width:19px;height:19px;display:block}
.siegel__sterne{display:flex;gap:2px}
.siegel__sterne svg{width:19px;height:19px;color:#f5a623;display:block}
.siegel__zahl{font-size:15px;color:var(--tinte);line-height:1.2}
.siegel__zahl b{font-size:22px;letter-spacing:-.02em}
.siegel__quelle{font-size:12.5px;color:var(--grau);text-align:center;line-height:1.3}
@media (max-width:900px){
  .hero__innen{grid-template-columns:minmax(0,1fr);
    grid-template-areas:"marke" "siegel" "oben" "unten"}
  .hero__marke{margin-bottom:20px;align-self:auto}
  .hero__marke img{width:clamp(150px,42vw,230px)}
  .siegel{margin-top:0;margin-bottom:30px}
}
/* Sobald der Hero einspaltig wird, faellt das Bewertungs-Siegel heraus. Es
   schiebt sonst Ortsschild, Headline, Vorspann und beide Knoepfe nach unten,
   und auf 490 px Breite war vor dem ersten Knopf nichts als Vorgeplaenkel zu
   sehen. Das Siegel steht weiterhin in der Bewertungs-Sektion, dort mit sechs
   Stimmen statt nur einer Zahl. */
@media (max-width:900px){
  .hero__innen{grid-template-areas:"marke" "oben" "unten"}
  .siegel{display:none}
}
/* Nur auf dem Handy nimmt das Logo die volle Spaltenbreite. Auf dem Tablet
   bleibt es klein und mittig, dort ist genug Platz. */
@media (max-width:680px){
  .hero__marke img{width:100%;max-width:none}
}
.hero__ort{display:table;font-size:12.5px;line-height:1.3;font-family:var(--sans);font-weight:700;letter-spacing:.18em;
  text-transform:uppercase;background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.28);
  padding:8px 16px;border-radius:6px;margin-bottom:26px;backdrop-filter:blur(6px)}
.hero h1{font-size:var(--h1);max-width:13em;margin-bottom:.42em;
  text-shadow:0 6px 34px rgba(0,20,45,.35)}
.hero h1 em{font-style:normal;color:#fff;position:relative}
.hero h1 em::after{content:'';position:absolute;left:0;right:8%;bottom:.08em;height:6px;
  background:var(--rot);border-radius:3px;box-shadow:0 4px 18px rgba(238,32,42,.6)}
.hero__sub{font-size:clamp(16px,1.35vw,19.5px);color:rgba(255,255,255,.9);
  text-shadow:0 2px 16px rgba(0,20,45,.4)}
/* Die Luft sitzt an der unteren Rasterzelle, nicht am Vorspann. Als
   margin-bottom des Absatzes lag sie innerhalb der oberen Zelle und hat deren
   Unterkante mitgeschoben, und daran haengt das Logo. Es stand dadurch genau
   um diesen Betrag zu tief. Derselbe Wert wie zwischen Knopfreihe und
   Beweisleiste, aus einer Quelle, damit die Luecken nicht auseinanderlaufen. */
.hero__unten{margin-top:var(--luft)}
/* Beide Knoepfe gleich breit, und die Reihe zusammen genau so breit wie eine
   der beiden Karten darunter. Die Karte misst (Inhaltsbreite - 26 px) / 2.
   Container-Einheiten treffen das exakt, weil cqi die Inhaltsbreite von
   .hero__innen meint und nicht das Fenster. Mit vw waere die Scrollleiste
   drin und die Kante saesse ein paar Pixel daneben. */
/* Nur oberhalb von 680 px. Darunter steht die Karte allein in ihrer Reihe und
   ist volle Breite, dann waere eine halbe Breite hier schlicht falsch. Genau
   das ist am 28.08. passiert: auf dem Handy blieben vom Vorspann 162 px uebrig
   und jede Zeile brach nach drei Woertern um. */
@media (min-width:901px){ .hero__sub,.hero__knoepfe,.hero__usp{max-width:600px} }
@supports (width:1cqi){
  @media (min-width:901px){ .hero__sub,.hero__knoepfe,.hero__usp{max-width:calc(50cqi - 13px)} }
}
.hero__knoepfe{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.hero__knoepfe .btn{width:100%;padding-inline:14px}
@media (max-width:560px){ .hero__knoepfe{grid-template-columns:minmax(0,1fr)} }

/* Die drei Punkte, die diesen Betrieb von den Vergleichsangeboten trennen */
/* Untereinander, nicht nebeneinander. Bei drei Punkten in der Breite einer
   Karte bricht die Reihe unweigerlich zweizeilig um und sieht dann aus wie ein
   Versehen. Gestapelt liest sich jeder Punkt fuer sich. */
.hero__usp{list-style:none;margin:var(--luft) 0 0;padding:0;display:flex;flex-direction:column;
  gap:9px;font-size:15px;line-height:1.35;color:rgba(255,255,255,.92)}
.hero__usp li{display:flex;align-items:flex-start;gap:8px;font-weight:600;
  text-shadow:0 2px 14px rgba(0,20,45,.5)}
.hero__usp li::before{content:'';flex:none;width:16px;height:16px;margin-top:2px;border-radius:50%;
  background:var(--rot) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12.6 9.4 18 20 6.6'/%3E%3C/svg%3E") center/11px no-repeat}



/* Der Trenner ist eine Schraege, kein Bogen und keine Welle. Sie nimmt den
   Schwung unter dem Wort JULIAN im Logo auf: er steigt nach rechts, gemessen
   rund 5 Grad. Umgesetzt als Beschnitt der Sektion selbst, dadurch braucht es
   kein SVG und die Kante bleibt bei jeder Breite exakt gerade. */
.hero{clip-path:polygon(0 0, 100% 0, 100% calc(100% - var(--kante)), 0 100%)}
/* Der rote Strich liegt exakt auf derselben Kante. Frueher war er per rotate
   gesetzt und lief bei jeder Fensterbreite in einem anderen Winkel als der
   Beschnitt. Jetzt derselbe Polygonzug, nur 5 px tiefer, dadurch bleibt genau
   ein 5 px breiter Streifen an der Kante stehen. */
/* Der Inhaber steht rechts im freien Teil des Hero-Bildes, ausserhalb der
   Inhaltsspalte. Er sitzt auf der Schraege auf, nicht auf der Kastenunterkante,
   sonst schnitte ihm der Beschnitt die Fuesse ab. Unter 1300 px ist rechts kein
   Platz mehr, dort faellt er weg, statt sich in den Text zu schieben. */
.hero__person{position:absolute;z-index:1;pointer-events:none;
  bottom:0;
  /* Ueber die Hoehe bemessen, nicht ueber die Breite. Bei 330 px Breite war er
     fast tausend Pixel hoch und der Kopf lief oben aus dem Hero heraus. */
  right:max(0px, calc((100vw - var(--breite)) / 2));
  /* Der Schatten steckt im Bild. Als CSS-filter musste ihn der Browser bei
     jedem Frame ueber die Alphamaske eines knapp 1900 px hohen Bildes neu
     rechnen, zusammen mit dem klebenden Himmel und der Hero-Animation hat das
     den Compositor blockiert: die Seite stand. Gebacken kostet er nichts. */
  height:clamp(540px,76vh,900px)}
.hero__person picture{display:block;height:100%}
.hero__person img{width:auto;height:100%;display:block}
/* Er steht jetzt hinter Logo und Siegel, deshalb darf er frueher erscheinen.
   Unter 1000 px kippt der Hero in eine Spalte, dort laege er hinter dem Text. */
@media (max-width:1000px){ .hero__person{display:none} }

/* Kein gleichmaessiges Band mehr, sondern ein Keil wie der Schwung im Logo:
   links dick, nach rechts oben spitz auslaufend. Umgesetzt als Dreieck, dessen
   Grundlinie senkrecht am linken Rand steht und dessen Spitze genau auf dem
   rechten Ende der Beschnittkante sitzt. Dadurch liegt der Keil vollstaendig
   oberhalb der Kante und wird vom Beschnitt der Sektion nicht angeschnitten. */
.schraege{position:absolute;inset:0;background:var(--rot);z-index:4;pointer-events:none;
  clip-path:polygon(0 calc(100% - var(--strich)), 100% calc(100% - var(--kante)), 0 100%)}

/* =========================================================================
   DREI KARTEN, die ueber die Hero-Kante ragen
   ========================================================================= */
/* z-index in der Regel mit dem hoeheren Gewicht nachziehen, sonst setzt
   .wetter > section die Reihe auf 2 und sie faellt hinter den Hero. */
.wetter > .karten{z-index:3}
.karten{position:relative;z-index:3;margin-top:clamp(-110px,-11vw,-70px)}
.karten__raster{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:26px}
@media (max-width:680px){ .karten__raster{grid-template-columns:minmax(0,1fr)} }
/* Linksbuendig, seit das Icon neben der Ueberschrift steht. Zentriert waere die
   Zeile bei zweizeiligen Ueberschriften unruhig, weil das Icon dann mitwandert. */
.kartchen{position:relative;overflow:hidden;background:#fff;border-radius:var(--rund);
  padding:32px 30px 30px;box-shadow:var(--schatten-tief);text-align:left;
  display:flex;flex-direction:column}
/* Der Streifen oben trennt die beiden Wege schon auf einen Blick:
   schwarz ist der Privatkunde, rot das Geschaeft mit dem Handwerk. */
.kartchen::before{content:'';position:absolute;inset:0 0 auto;height:5px;background:var(--kalt)}
.kartchen--warm::before{background:var(--rot)}
/* align-self ist Pflicht: in einer Flex-Spalte wird jedes Kind sonst auf die
   volle Breite gezogen und aus dem Schild wird ein Balken ueber die Karte. */
.kartchen__fuer{align-self:flex-start;font-size:12px;font-weight:700;letter-spacing:.15em;
  text-transform:uppercase;margin:0 0 20px;padding:6px 14px;border-radius:999px;line-height:1.2;
  background:var(--kalt-blass);color:var(--kalt)}
.kartchen--warm .kartchen__fuer{background:#fdeaeb;color:var(--rot-dunkel)}
.kartchen__kopf{display:flex;align-items:center;gap:16px;margin-bottom:14px}
.kartchen__icon{flex:none;width:54px;height:54px;border-radius:12px;
  display:grid;place-items:center;background:var(--kalt-blass);color:var(--kalt)}
.kartchen--warm .kartchen__icon{background:#fdeaeb;color:var(--rot)}
.kartchen__icon svg{width:27px;height:27px;stroke-width:1.6}
.kartchen h3{font-size:21px;margin:0}
/* :not() ist Pflicht. Das Zielgruppen-Schild ist ebenfalls ein <p> in der
   Karte, und .kartchen p (0,1,1) schlaegt .kartchen__fuer (0,1,0). Ohne den
   Ausschluss erbt das Schild 16 px statt 12, Grau statt Schwarz und den
   Fliesstext-Abstand. Genau daran ist es vorher zweizeilig umgebrochen. */
.kartchen p:not(.kartchen__fuer){color:var(--grau);font-size:16px;margin-bottom:24px}
/* Der Knopf geht ueber die ganze Karte. Bei zwei gleich breiten Karten
   entstehen dadurch zwei gleich grosse Klickflaechen, und auf dem Handy
   trifft der Daumen sie ohne Zielen. */
.kartchen__knopf{width:100%;margin-top:auto}
@media (max-width:400px){ .kartchen__kopf{gap:13px} .kartchen h3{font-size:19.5px} }

/* =========================================================================
   PROBLEM
   ========================================================================= */
.punkte{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  gap:clamp(24px,3vw,40px);margin-top:clamp(36px,4vw,56px)}
@media (max-width:1040px){ .punkte{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:560px){ .punkte{grid-template-columns:minmax(0,1fr)} }
.punkt{border-top:3px solid var(--linie);padding-top:22px}
.punkt:nth-child(odd){border-top-color:var(--kalt-hell)}
.punkt:nth-child(even){border-top-color:var(--rot)}
/* Ziffern sind raus. Ein Zeichen sagt beim Ueberfliegen mehr als eine Nummer,
   und die Reihenfolge traegt hier ohnehin keine Bedeutung. Es steht vor der
   Ueberschrift, nicht darueber, deshalb faellt es kleiner aus: die Spalten sind
   nur rund 230 px breit und die Ueberschrift braucht den Rest. */
/* Alle vier Ueberschriften laufen zweizeilig, deshalb steht das Zeichen mittig
   dazu und nicht an der ersten Zeile. */
.punkt__kopf{display:flex;align-items:center;gap:12px;margin-bottom:9px}
.punkt__zeichen{flex:none;color:var(--rot-hell)}
.punkt__zeichen svg{width:40px;height:40px;display:block}
.punkt__kopf h3{margin:0}
.punkt h3{font-size:19px;margin-bottom:9px}
.punkt p{color:var(--grau);font-size:16px;margin:0}/* =========================================================================
   WETTER, der gemeinsame Himmel hinter Problem, Frage und Loesung

   Eine klebende Ebene, zwei Bilder derselben Wolkenformation uebereinander.
   Beim Scrollen steigt --wetter von 0 auf 1 und blendet das Gewitter in den
   aufgerissenen Himmel. Die beiden Schleier laufen NICHT linear mit: der
   dunkle haelt bis etwa 0,6 durch, erst danach uebernimmt der helle. Sonst
   entstuende in der Mitte ein mausgrauer Brei, auf dem weder die weisse noch
   die dunkle Schrift lesbar waere. Die Werte setzt site.js.
   ========================================================================= */
/* Kein isolation:isolate. Der Himmel muss mit z-index:-1 hinter den Hero
   reichen, damit er unter dessen roter Schraege sichtbar wird. Ein eigener
   Stapelkontext wuerde ihn im Kasten einsperren und es bliebe das weisse Band. */
.wetter{position:relative;--wetter:0}
.wetter__himmel{position:absolute;inset:0;z-index:-1;pointer-events:none}
/* lvh, nicht svh. Faehrt auf dem Handy die Adressleiste ein, waere ein
   Himmel in svh-Hoehe kuerzer als die sichtbare Flaeche und es bliebe unten
   ein Streifen frei. lvh ist im Zweifel zu hoch, und das faellt bei einem
   Hintergrund nicht auf. */
.wetter__rahmen{position:sticky;top:0;height:100vh;height:100lvh;overflow:hidden;background:#0b0d10}
.wetter__bild{position:absolute;inset:0;display:block}
.wetter__bild img{width:100%;height:100%;object-fit:cover;display:block;
  transform:scale(1.08) translate3d(0,calc(var(--wetter) * -1.6%),0)}
.wetter__bild--klar{opacity:var(--wetter)}
/* Kein Balken ueber einer Sektion, sondern eine Ebene ueber dem ganzen Bild.
   Dadurch gibt es keine Ober- und Unterkante, die als Streifen auffiele.
   Die Deckkraft haengt an --wetter: solange das Gewitter steht, ist es dunkel
   genug fuer weisse Schrift, mit dem Aufklaren loest sich der Schleier auf. */
.wetter__dunkel{position:absolute;inset:0;background:#0b0d10;
  opacity:calc(.55 * (1 - var(--wetter)))}
/* Kein globaler Schleier mehr. Der lief mit dem Scrollen mit und war genau
   dann halbdunkel, wenn die helle Loesungs-Sektion schon ins Bild ragte, waehrend
   die dunkle Frage noch oben stand. Auf einem hohen Fenster sind beide
   gleichzeitig zu sehen, ein einziger Wert kann es also nie beiden recht
   machen. Jetzt traegt jede Sektion ihren eigenen Schleier: das Problem einen
   dunklen, die Loesung und die Leistungen einen hellen. Damit stimmt der
   Kontrast an jeder Scrollposition, und der Himmel dahinter darf frei wechseln. */
.wetter > section{position:relative}
.loesung::before,.leistungen::before{content:'';position:absolute;
  inset:0;z-index:-1;pointer-events:none}
/* Die Oberkante des hellen Grundes ist eine echte Wolkensilhouette, kein
   Verlauf. Ein Verlauf ist an dieser Stelle ein grauer Balken quer ueber die
   Seite und sieht nach nichts aus. Die Maske ist ein Alphakanal aus einem
   erzeugten Wolkenbild: weisse Haufenwolken vor Schwarz, Helligkeit zu
   Deckkraft gerechnet. Dadurch schiebt sich der helle Grund als Wolkenbank in
   das Gewitter, statt hineinzublenden.
   Zwei Maskenebenen, die sich addieren: oben die Wolke auf Bandhoehe, darunter
   ein Rechteck ab derselben Hoehe. Ergebnis: im Band die Wolkenkante, darunter
   volle Deckung, ohne sichtbare Naht.
   Der Verlauf bleibt als Rueckfall stehen, falls ein Browser keine Masken kann. */
/* Die Wolkenbank bekommt ihre eigene Hoehe als Polster, sonst startet die
   Ueberschrift mitten in den Wolkenkoepfen. */
.loesung{--wolke:clamp(150px,20vw,300px);padding-top:calc(var(--wolke) + clamp(24px,3vw,56px))}
.loesung::before{background:linear-gradient(180deg,rgba(250,250,249,0) 0%,rgba(250,250,249,.9) 18%,
                                            rgba(250,250,249,.9) 100%)}
@supports (mask-image:linear-gradient(#000,#000)) or (-webkit-mask-image:linear-gradient(#000,#000)){
  .loesung::before{
    background:rgba(250,250,249,.9);
    -webkit-mask-image:url('assets/img/wolkenkante.png'),
      linear-gradient(to bottom,transparent 0,transparent var(--wolke),#000 var(--wolke));
    mask-image:url('assets/img/wolkenkante.png'),
      linear-gradient(to bottom,transparent 0,transparent var(--wolke),#000 var(--wolke));
    -webkit-mask-size:100% var(--wolke),100% 100%;
    mask-size:100% var(--wolke),100% 100%;
    -webkit-mask-position:top left,top left;
    mask-position:top left,top left;
    -webkit-mask-repeat:no-repeat,no-repeat;
    mask-repeat:no-repeat,no-repeat;
  }
  @media (max-width:700px){
    .loesung::before{-webkit-mask-image:url('assets/img/wolkenkante-s.png'),
        linear-gradient(to bottom,transparent 0,transparent var(--wolke),#000 var(--wolke));
      mask-image:url('assets/img/wolkenkante-s.png'),
        linear-gradient(to bottom,transparent 0,transparent var(--wolke),#000 var(--wolke))}
  }
}
.leistungen::before{background:rgba(250,250,249,.9)}
/* Nur noch unten. Oben soll der Sturm hart unter der roten Schraege ansetzen,
   ein Verlauf haette dort wieder ein helles Band erzeugt. Unten dagegen bleibt
   der Verlauf noetig, sonst steht eine sichtbare Kante zwischen dem hellen
   Schleier und der weissen Sektion darunter. */
.wetter::after{content:'';position:absolute;left:0;right:0;bottom:0;
  z-index:1;pointer-events:none;height:clamp(70px,8vw,140px);
  background:linear-gradient(180deg,rgba(255,255,255,0),var(--papier))}
@media (prefers-reduced-motion:reduce){
  .wetter__bild img{transform:scale(1.08)}
}

/* Problem liegt auf dem Gewitter, also helle Schrift. Der Schlagschatten ist
   Pflicht und kein Schmuck: seit die Frage-Sektion raus ist, fehlt der Puffer
   zwischen Problem und Angebot, und die vier Punkte stehen noch im Bild,
   waehrend der Himmel schon aufreisst. Der Schatten haelt die Schrift auch
   ueber einer hellen Wolke, ohne dass dafuer ein Balken noetig waere. */
.problem{padding-top:clamp(96px,12vw,180px);padding-bottom:clamp(120px,15vw,230px)}
.problem .eyebrow,.problem h2,.problem .lead,.problem .punkt h3,.problem .punkt p,
.problem__bild figcaption{text-shadow:0 2px 16px rgba(0,0,0,.9),0 1px 3px rgba(0,0,0,.7)}
/* Das Bild zeigt den Moment, um den es in dieser Sektion geht: drei Blaetter,
   die sich nicht vergleichen lassen. Es steht zwischen dem Einstieg und den
   vier Punkten und traegt die Aussage, bevor sie aufgezaehlt wird. */
.problem__bild{margin:clamp(34px,4.5vw,60px) auto clamp(38px,5vw,66px);max-width:var(--breite);padding:0}
/* Auf dem Handy klebte das Bild an beiden Kanten, waehrend der Text darueber
   den Seitenrand einhaelt. Der Rand kommt hier als Aussenabstand, nicht als
   Innenabstand: die abgerundeten Ecken haengen an diesem Kasten, mit
   Innenabstand saessen sie neben dem Bild statt an ihm. */
@media (max-width:700px){ .problem__bild{margin-inline:var(--rand)} }
.problem__bild{position:relative;border-radius:var(--rund);overflow:hidden;
  box-shadow:0 30px 70px -30px rgba(0,0,0,.9)}
.problem__bild img{width:100%;height:auto;display:block}
.problem__bild figcaption{position:absolute;left:0;right:0;bottom:0;margin:0;
  padding:52px 22px 16px;color:#fff;font-size:14.5px;
  background:linear-gradient(180deg,rgba(0,0,0,0),rgba(0,0,0,.36) 45%,rgba(0,0,0,.74))}
/* Problem liegt jetzt auf dem Gewitter, also helle Schrift */
.problem .eyebrow{color:var(--rot-hell)}
.problem h2{color:#fff}
.problem .lead{color:rgba(255,255,255,.86)}
.problem .punkt{border-top-color:rgba(255,255,255,.28)}
.problem .punkt:nth-child(even){border-top-color:var(--rot)}

.problem .punkt h3{color:#fff}
.problem .punkt p{color:rgba(255,255,255,.78)}/* Loesung liegt auf dem hellen Himmel, dunkle Schrift bleibt */
.loesung{background:none}

/* Das Dienstleistungsangebot: Bild links, die vier Punkte rechts */
/* Ohne align-items:start, damit die Bildspalte auf die Hoehe der Textspalte
   gezogen wird. Das Bild fuellt sie per object-fit, es wird also beschnitten
   und nicht verzerrt. */
.angebot{display:grid;grid-template-columns:minmax(0,.82fr) minmax(0,1fr);
  gap:clamp(28px,4vw,56px);margin-top:clamp(36px,4.5vw,60px)}
@media (max-width:900px){ .angebot{grid-template-columns:minmax(0,1fr)} }
.angebot__bild{margin:0;position:relative;border-radius:var(--rund);overflow:hidden;
  box-shadow:var(--schatten-tief);min-height:clamp(260px,32vw,420px)}
.angebot__bild picture{display:block;height:100%}
.angebot__bild img{width:100%;height:100%;object-fit:cover;object-position:50% 42%;display:block}
/* Die Unterschrift liegt im Bild, nicht darunter. Der Verlauf haelt sie lesbar,
   ohne dass das Foto einen Balken bekommt. */
.angebot__bild figcaption{position:absolute;left:0;right:0;bottom:0;margin:0;
  padding:46px 22px 16px;color:#fff;font-size:14px;
  background:linear-gradient(180deg,rgba(0,0,0,0),rgba(0,0,0,.34) 45%,rgba(0,0,0,.72))}
.angebot__liste{list-style:none;counter-reset:schritt;margin:0;padding:0;
  display:flex;flex-direction:column;gap:clamp(22px,2.6vw,30px)}
.angebot__liste li{counter-increment:schritt;position:relative;
  padding-left:clamp(66px,6.2vw,84px)}
/* Die Ziffer wiederholt die Nummer aus der Problem-Sektion. Vier Sorgen,
   vier Antworten, in derselben Reihenfolge. */
/* Die Ziffer laeuft in derselben Groesse wie die Ueberschrift daneben, damit
   die Zeile eine gemeinsame Oberkante bekommt. */
.angebot__liste li::before{content:counter(schritt,decimal-leading-zero);
  position:absolute;left:0;top:0;font-size:clamp(19px,1.9vw,22px);font-weight:700;
  line-height:1.15;letter-spacing:.02em;color:var(--rot);
  width:clamp(50px,5.2vw,64px);padding-bottom:10px;border-bottom:2px solid var(--rot)}
.angebot__liste h3{font-size:clamp(19px,1.9vw,22px);margin:0 0 7px}
.angebot__liste p{color:var(--grau);font-size:16.5px;margin:0}

/* Weiss auf Rot, ueber die volle Breite und anklickbar. Die Zeile traegt
   Erfahrung, Betriebsgroesse und die Herstellernamen, also das Vertrauenssignal
   der Sektion. Als graue Fusszeile ging sie unter, als Knopf fuehrt sie direkt
   zu der FAQ-Antwort, in der die Herkunft erklaert wird. */
.herkunft{display:flex;align-items:center;gap:clamp(14px,2vw,26px);text-decoration:none;
  margin-top:clamp(38px,4.6vw,60px);padding:clamp(16px,2vw,22px) clamp(18px,2.4vw,30px);
  background:var(--rot);color:#fff;border-radius:var(--rund);
  box-shadow:0 18px 40px -22px rgba(238,32,42,.9);
  transition:transform .18s ease,box-shadow .18s ease,background .18s ease}
.herkunft:hover{background:var(--rot-dunkel);transform:translateY(-2px);
  box-shadow:0 24px 48px -22px rgba(238,32,42,.95)}
/* Kein weisser Rand um die Fahne. Die untere Haelfte ist rot wie die Leiste,
   deshalb traegt sie eine duenne dunkle Kontur statt einer weissen Platte, und
   das Rot ist das der polnischen Flagge, nicht unser Hausrot. */
.herkunft__fahne{flex:none;display:grid;place-items:center}
.herkunft__fahne svg{display:block;width:34px;height:22px;border-radius:2px;
  filter:drop-shadow(0 1px 3px rgba(0,0,0,.35))}
.herkunft__text{flex:1;min-width:0;display:flex;flex-direction:column;gap:4px}
.herkunft__text b{font-size:clamp(16px,1.6vw,19px);line-height:1.25;letter-spacing:-.005em}
.herkunft__text span{font-size:14.5px;line-height:1.4;color:rgba(255,255,255,.86)}
.herkunft__pfeil{flex:none;display:grid;place-items:center;width:38px;height:38px;
  border-radius:50%;background:rgba(255,255,255,.16);
  transition:transform .18s ease,background .18s ease}
.herkunft__pfeil svg{width:19px;height:19px}
.herkunft:hover .herkunft__pfeil{background:rgba(255,255,255,.28);transform:translateX(3px)}
@media (max-width:560px){
  .herkunft{flex-wrap:wrap;gap:14px}
  .herkunft__text{flex:1 1 100%;order:3}
  .herkunft__pfeil{margin-left:auto}
}

/* =========================================================================
   LEISTUNGEN: vier Bildkarten mit farbigem Titelbalken, wie in der Referenz
   ========================================================================= */
.leistungen__raster{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,230px),1fr));
  gap:22px;margin-top:clamp(34px,4vw,54px)}
.leist{position:relative;border-radius:var(--rund);overflow:hidden;box-shadow:var(--schatten);
  background:var(--tinte);isolation:isolate}
.leist img{width:100%;height:clamp(230px,26vw,310px);object-fit:cover;transition:transform .5s ease}
.leist:hover img{transform:scale(1.05)}
.leist__balken{position:absolute;left:0;right:0;bottom:0;padding:18px 20px 20px;
  background:linear-gradient(180deg,rgba(16,18,22,0),rgba(16,18,22,.94) 42%)}
.leist:nth-child(2) .leist__balken{background:linear-gradient(180deg,rgba(238,32,42,0),rgba(196,20,28,.94) 42%)}
.leist:nth-child(4) .leist__balken{background:linear-gradient(180deg,rgba(238,32,42,0),rgba(196,20,28,.94) 42%)}
.leist__balken h3{color:#fff;font-size:19px;margin:0 0 4px}
/* Mindesthoehe von drei Zeilen. Der Balken haengt an der Unterkante, deshalb
   rutschte die Ueberschrift bei kuerzerem Text nach unten und Rollladen stand
   tiefer als die drei anderen. Mit dem Sockel liegen alle vier auf einer Hoehe. */
.leist__balken p{color:rgba(255,255,255,.86);font-size:14.5px;margin:0;line-height:1.45;
  min-height:4.35em}

.reparatur{margin-top:clamp(48px,6vw,80px);padding-top:36px;border-top:1px solid var(--linie)}
.reparatur__titel{font-size:20px;margin-bottom:22px}
.reparatur__liste{list-style:none;margin:0;padding:0;display:grid;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,180px),1fr));gap:20px}
.reparatur__liste img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:10px}
.reparatur__liste h4{font-size:17px;margin:13px 0 4px}
.reparatur__liste p{margin:0;font-size:14.5px;color:var(--grau);line-height:1.5}

/* =========================================================================
   VERTRAUEN: drei Bekenntnisse mit Linien-Grafik
   ========================================================================= */
/* Die erste Spalte ist genau so breit wie eine Kachel des Bildstreifens
   darunter: drei Kacheln mit 20 px Abstand, also (100% - 40px) / 3. Dadurch
   endet das Portraet auf derselben Kante wie das Bild der alten Fenster, und
   zwar rechnerisch und nicht per Augenmass. */
.team__oben{display:grid;grid-template-columns:calc((100% - 40px) / 3) minmax(0,1fr);
  gap:clamp(28px,4vw,64px)}
/* Ohne align-items zieht das Raster die Bildspalte auf die Hoehe der Textspalte.
   Die Breite bleibt eine Kachel des Streifens, das Bild fuellt die Hoehe per
   object-fit und wird dabei beschnitten, nicht verzerrt. */
.team__portrait{position:relative;border-radius:var(--rund);overflow:hidden;box-shadow:var(--schatten-tief);
  min-height:clamp(300px,34vw,480px)}
.team__portrait picture{display:block;height:100%}
.team__portrait img{width:100%;height:100%;object-fit:cover;object-position:50% 30%;display:block}
/* Fruher: "p.eyebrow+p". Seit dem 01.09.2026 steht dazwischen eine echte h2,
   deshalb haengt die Optik an einer eigenen Klasse. */
.team__wort h2{font-size:clamp(19px,1.9vw,23px);letter-spacing:-.01em;margin:0 0 .5em}
.team__wort p.team__gross:not(.eyebrow){font-size:clamp(22px,2.5vw,34px);line-height:1.24;font-weight:700;
  letter-spacing:-.02em;margin-bottom:.7em}
.team__wort p:not(.eyebrow){color:var(--grau);font-size:17px;max-width:46ch}
/* Der Anruf sitzt im Bild, nicht darunter. Frei unter der Bilderreihe stand er
   ohne Bezug im Weissen, hier ist der Mensch daneben, den man anruft. Der
   Verlauf traegt die Schrift, ohne das Foto zuzudecken. */
.team__ruf{position:absolute;left:0;right:0;bottom:0;z-index:2;
  display:flex;align-items:center;gap:13px;
  padding:34px clamp(14px,1.6vw,20px) clamp(13px,1.5vw,17px);
  color:#fff;text-decoration:none;
  background:linear-gradient(180deg,rgba(0,0,0,0),rgba(0,0,0,.5) 42%,rgba(0,0,0,.84));
  transition:background .2s ease}
.team__ruf:hover{background:linear-gradient(180deg,rgba(0,0,0,0),rgba(120,10,14,.55) 42%,rgba(150,12,16,.9))}
.team__ruf svg{width:22px;height:22px;flex:none}
.team__ruf__text{display:flex;flex-direction:column;line-height:1.2;min-width:0}
.team__ruf__text b{font-size:14px;font-weight:700;letter-spacing:.01em}
.team__ruf__text span{font-size:clamp(17px,1.5vw,20px);font-weight:700;letter-spacing:-.02em}
.team__streifen{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr));
  gap:20px;margin-top:clamp(36px,4vw,60px)}
.team__streifen figure{margin:0}
.team__streifen img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:10px}
figcaption{font-size:13px;color:var(--grau-hell);padding-top:9px}
@media (max-width:840px){ .team__oben{grid-template-columns:minmax(0,1fr)} }

/* =========================================================================
   ZAHLEN
   ========================================================================= */

/* Die frueheren "Drei Sachen, die nicht verhandelbar sind" sind aufgeloest.
   Zwei der drei Punkte standen wortgleich im Angebot und in der Ueberschrift
   dieses Abschnitts, nur die Fakten aus dem dritten waren eigenstaendig. Sie
   stehen jetzt hier als Zeile unter der Unterschrift des Inhabers. */
.team__fakten{list-style:none;margin:clamp(26px,3vw,38px) 0 0;padding:clamp(22px,2.6vw,28px) 0 0;
  border-top:1px solid var(--linie);display:grid;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,170px),1fr));gap:22px}
.team__fakten b{display:block;font-size:17px;color:var(--tinte);letter-spacing:-.01em}
.team__fakten span{display:block;margin-top:5px;color:var(--grau);font-size:14.5px;line-height:1.4}

/* Werdegang und Mannschaft im Team-Abschnitt.
   ACHTUNG, teuer gelernt am 01.09.2026: dieser Block hiess zuerst "herkunft".
   Diesen Namen traegt seit dem 28.08. schon die rote Polen-Leiste weiter oben
   (Zeile 566ff). Beide Regelbloecke haben sich gegenseitig zerlegt: der neue
   Block stand auf rotem Grund mit roten Jahreszahlen darauf, der Knopf bekam
   Rasterspalten und eine Trennlinie. Neue Klassennamen deshalb immer erst
   gegen die Datei greppen.
   Bewusst kein viertes Dreierraster untereinander, sondern Text gegen Zahlen:
   links die Geschichte, rechts die drei Jahre, die sie belegen.
   minmax(0,1fr) statt 1fr, sonst sprengen lange Woerter die Spalte. */
.werdegang{margin-top:clamp(30px,3.4vw,44px);padding-top:clamp(26px,3vw,34px);
  border-top:1px solid var(--linie);display:grid;
  grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);
  gap:clamp(26px,4vw,64px);align-items:start}
.werdegang h3{font-size:clamp(18px,1.8vw,21px);margin:0 0 14px;letter-spacing:-.01em}
.werdegang__text p{color:var(--grau);font-size:16.5px;line-height:1.62;margin:0 0 .85em;max-width:52ch}
/* p mit im Selektor, sonst schlaegt die Regel darueber die blosse Klasse. */
.werdegang__text p.werdegang__nutzen{color:var(--tinte);font-weight:600}
.werdegang__text p.werdegang__signatur{margin:1.4em 0 0;color:var(--grau-hell);font-size:15.5px}
.leute{list-style:none;margin:0;padding:0}
/* baseline waere hier falsch: das Zeichen ist eine Flaeche ohne Schriftlinie
   und saesse dann schief zur Jahreszahl daneben. */
.leute li{display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:11px 0;border-bottom:1px solid var(--linie)}
.leute li:first-child{border-top:1px solid var(--linie)}
.leute__wer{display:flex;align-items:center;gap:12px;min-width:0}
/* Gleiche Sprache wie die Icons in den Kacheln oben: helle Flaeche, rotes
   Zeichen. Nur kleiner, hier steht es in einer Zeile und nicht ueber einer
   Ueberschrift. */
.leute__zeichen{flex:none;display:grid;place-items:center;width:31px;height:31px;
  border-radius:50%;background:#fdeaeb;color:var(--rot)}
.leute__zeichen svg{display:block;width:17px;height:17px}
.leute__name{font-size:17px;font-weight:700;color:var(--tinte);letter-spacing:-.01em}
.leute__jahr{font-family:var(--serif);font-size:clamp(19px,1.9vw,23px);color:var(--rot);
  letter-spacing:-.02em;white-space:nowrap}
.werdegang__leute p.leute__fuss{margin:14px 0 0;color:var(--grau);font-size:14.5px;line-height:1.5}
@media (max-width:840px){ .werdegang{grid-template-columns:minmax(0,1fr)} }

/* =========================================================================
   STIMMEN, sechs echte Google-Bewertungen als Bahn
   Kein Karussell mit Zeitschaltung: das reisst dem Leser den Text weg, bevor
   er zu Ende gelesen hat. Die Bahn schiebt man selbst, mit Pfeilen, Punkten,
   Wischen oder Tastatur. Umgesetzt mit scroll-snap statt mit einer Bibliothek.
   ========================================================================= */
.stimmen{margin-top:clamp(38px,4.6vw,64px)}
/* Die angeschnittene vierte Karte am rechten Rand ist Absicht, sie zeigt dass
   es weitergeht. Sie wird aber ausgeblendet statt hart abgeschnitten, sonst
   sieht der Schnitt nach Versehen aus. Links kein Verlauf, dort steht der
   Anfang. */
.stimmen__bahn{display:flex;gap:22px;overflow-x:auto;scroll-snap-type:x mandatory;
  /* Der waagerechte Ueberlauf beschneidet alles, was ueber den Innenrand
     hinausragt, und das trifft zuerst den Schlagschatten der Karten. Erst
     standen dort 34 px unten und 4 px seitlich. Rechnerisch reichte das
     (der Schatten laeuft 24 px unter die Karte), sichtbar war die Kante
     trotzdem. Jetzt liegt der Rand so weit weg, dass die Frage sich nicht
     mehr stellt: seitlich der volle Seitenrand, gegengerechnet mit einem
     negativen Aussenabstand, damit die Karten weiter mit dem uebrigen Inhalt
     fluchten. Der Schatten hat unten 28 px Luft, bis der Kasten endet.
     overflow-y explizit, damit daneben keine senkrechte Leiste auftaucht. */
  margin-inline:calc(var(--rand) * -1);
  padding:16px var(--rand) 52px;scroll-padding-inline-start:var(--rand);overflow-y:hidden;
  scrollbar-width:none;-ms-overflow-style:none;
  -webkit-mask-image:linear-gradient(90deg,#000 0,#000 88%,rgba(0,0,0,.15) 100%);
  mask-image:linear-gradient(90deg,#000 0,#000 88%,rgba(0,0,0,.15) 100%)}
.stimmen[data-ende] .stimmen__bahn{-webkit-mask-image:none;mask-image:none}
.stimmen__bahn::-webkit-scrollbar{display:none}
.stimmen__bahn:focus-visible{outline:2px solid var(--rot);outline-offset:6px;border-radius:var(--rund)}
.stimme{flex:0 0 clamp(268px,31%,384px);scroll-snap-align:start;
  background:#fff;border-radius:var(--rund);padding:clamp(22px,2.4vw,30px);
  /* Zwei Lagen statt einer. Alle Karten enden in derselben Zeile, deshalb
     endet auch ein einlagiger Schatten ueberall gleichzeitig und liest sich
     als gezogener Strich. Die zweite, weit gestreute Lage laeuft darueber
     hinaus aus und nimmt der Kante die Schaerfe. */
  box-shadow:0 16px 34px -22px rgba(20,32,50,.34),
             0 30px 58px -40px rgba(20,32,50,.30);
  display:flex;flex-direction:column;gap:15px}
.stimme__sterne{display:flex;gap:2px}
.stimme__sterne svg{width:17px;height:17px;color:#f5a623;display:block}
.stimme blockquote{margin:0;font-size:16.5px;line-height:1.55;color:var(--tinte2)}
.stimme__fuss{display:flex;align-items:center;gap:11px;margin-top:auto;padding-top:8px;
  border-top:1px solid var(--linie)}
.stimme__g{flex:none;display:block}
.stimme__g svg{width:18px;height:18px;display:block}
.stimme__fuss b{display:block;font-size:15px;color:var(--tinte);letter-spacing:-.005em}
.stimme__fuss span span{display:block;color:var(--grau);font-size:13.5px;margin-top:2px}

.stimmen__steuer{display:flex;align-items:center;justify-content:center;gap:18px;margin-top:4px}
.stimmen__pfeil{width:44px;height:44px;border-radius:50%;border:1px solid var(--linie);
  background:#fff;color:var(--tinte);display:grid;place-items:center;cursor:pointer;
  transition:border-color .18s ease,color .18s ease,transform .18s ease}
.stimmen__pfeil svg{width:19px;height:19px}
.stimmen__pfeil:hover:not([disabled]){border-color:var(--rot);color:var(--rot);transform:translateY(-2px)}
.stimmen__pfeil[disabled]{opacity:.3;cursor:default}
/* Die Punkte sind 9 px gross, als Tippziel auf dem Handy waere das zu wenig.
   Deshalb sitzt der sichtbare Punkt in einem 40 px hohen, durchsichtigen Feld:
   getroffen wird die Flaeche, gesehen wird der Punkt. Der negative Aussenabstand
   nimmt die zusaetzliche Hoehe aus dem Layout wieder heraus, damit die Reihe
   nicht auseinanderfaellt. */
.stimmen__punkte{display:flex;gap:0;margin:-12px 0}
.stimmen__punkte button{width:25px;height:40px;padding:0;border:0;background:none;
  display:flex;align-items:center;justify-content:center;cursor:pointer}
.stimmen__punkte button::before{content:'';display:block;width:9px;height:9px;
  border-radius:99px;background:var(--linie);
  transition:background .18s ease,width .18s ease}
.stimmen__punkte button[aria-current="true"]::before{background:var(--rot);width:24px}
.stimmen__punkte button:focus-visible{outline:2px solid var(--rot);outline-offset:-6px;border-radius:8px}
.stimmen__quelle{text-align:center;margin:16px 0 0;font-size:14.5px}
.stimmen__quelle a{color:var(--grau);text-decoration:underline;text-underline-offset:3px}
.stimmen__quelle a:hover{color:var(--rot)}
@media (max-width:560px){ .stimme{flex-basis:82%} }

.zahlen{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,200px),1fr));
  gap:24px;margin-top:clamp(30px,4vw,48px)}
.zahl{background:#fff;border-radius:var(--rund);padding:32px 26px;text-align:center;box-shadow:var(--schatten)}
.zahl b{display:block;font-size:clamp(44px,5.4vw,68px);line-height:1;font-weight:700;
  letter-spacing:-.035em;font-variant-numeric:tabular-nums;
  background:linear-gradient(100deg,var(--kalt) 10%,var(--rot) 90%);
  -webkit-background-clip:text;background-clip:text;color:transparent}
.zahl span{display:block;margin-top:12px;color:var(--grau);font-size:15.5px}
.beweis__hinweis{margin-top:30px;padding:16px 20px;border:1px dashed var(--grau-hell);border-radius:10px;
  color:var(--grau);font-size:15px;background:#fff;text-align:center}

/* =========================================================================
   LIEFERUNG: dunkles Band mit Luftlinien
   ========================================================================= */
/* Der Fuhrpark liegt als Grund darunter, darueber ein Schleier, der nach
   rechts dunkler wird. Rechts steht der Text, links das Bild vom
   Liefergeschaeft, also braucht die rechte Seite mehr Deckung. Die beiden
   Transporter bleiben links erkennbar und tragen die Zielgruppe mit. */
/* Dieselbe Schraege wie unter dem Hero, damit der Uebergang zum hellen Teil
   das Motiv der Seite wiederholt statt einer geraden Kante. */
.lieferung{position:relative;isolation:isolate;overflow:hidden;background:#0b0d10;
  color:#fff;padding:clamp(64px,8vw,120px) 0 calc(clamp(64px,8vw,120px) + var(--kante));
  clip-path:polygon(0 0, 100% 0, 100% calc(100% - var(--kante)), 0 100%)}
.lieferung__grund{position:absolute;inset:0;z-index:-2}
.lieferung__grund img{width:100%;height:100%;object-fit:cover;object-position:50% 62%}
.lieferung::before{content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:linear-gradient(100deg, rgba(11,13,16,.60) 0%, rgba(12,15,19,.84) 46%,
                                     rgba(12,15,19,.93) 100%)}
.lieferung__raster{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.08fr);
  gap:clamp(28px,4vw,60px);align-items:start}
.lieferung__links{display:flex;flex-direction:column;gap:clamp(18px,2.2vw,26px)}
/* Die Geschichte steht unter dem Bild und belegt, wofuer der zweite Weg da ist.
   Bewusst als Ausnahme erzaehlt, damit niemand das Liefergebiet daneben fuer
   verhandelbar haelt. */
.lieferung__story{background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.16);
  border-radius:var(--rund);padding:clamp(20px,2.4vw,26px)}
.lieferung__story h3{color:#fff;font-size:clamp(17px,1.7vw,20px);margin:0 0 9px;line-height:1.25}
.lieferung__story p{color:rgba(255,255,255,.8);font-size:15.5px;margin:0;line-height:1.5}
/* Zwei gleich hohe Kacheln ueber der Geschichte. minmax(0,1fr) statt 1fr,
   sonst sprengt das Bild die Spalte auf schmalen Geraeten. */
.story__bilder{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:8px;
  margin:0 0 clamp(15px,1.8vw,19px)}
.story__bilder img{width:100%;aspect-ratio:3/4;object-fit:cover;display:block;
  border-radius:calc(var(--rund) * .6)}
@media (max-width:900px){ .lieferung__raster{grid-template-columns:minmax(0,1fr)} }
.lieferung .eyebrow{color:#ffd9d6}
.lieferung h2{color:#fff;font-size:clamp(28px,4vw,52px)}
.lieferung p:not(.eyebrow){color:rgba(255,255,255,.86)}
/* Das Bild traegt die Mengenangabe als Schild in der Ecke, dadurch bleibt die
   Zahl erhalten, ohne eine eigene Spalte zu brauchen. */
.lieferung__bild{position:relative;margin:0;border-radius:var(--rund);overflow:hidden;
  box-shadow:0 30px 70px -34px rgba(0,0,0,.95)}
.lieferung__bild img{width:100%;height:clamp(260px,32vw,430px);object-fit:cover;display:block}
/* Oben statt unten: dort liegt nur Himmel, unten stehen die Paletten. */
.lieferung__zahl{position:absolute;left:clamp(14px,2vw,24px);top:clamp(14px,2vw,24px);
  background:rgba(11,13,16,.82);backdrop-filter:blur(6px);
  border:1px solid rgba(255,255,255,.22);border-radius:var(--rund);
  padding:16px 22px 18px;max-width:min(100%,270px)}
.lieferung__zahl strong{display:block;font-size:clamp(40px,4.6vw,62px);line-height:.9;
  color:#fff;letter-spacing:-.03em;font-family:var(--serif)}
.lieferung__zahl span{display:block;margin-top:9px;color:rgba(255,255,255,.82);font-size:14.5px;
  line-height:1.35}
.lieferung__gebiet{border-top:1px solid rgba(255,255,255,.2);padding-top:18px;margin-top:22px;font-size:16px}
.lieferung__gebiet strong{color:#fff}
/* Ueber die volle Breite der Textspalte, damit der Abschluss der Sektion so
   breit ist wie ihr Inhalt und nicht als kleiner Knopf danebensteht. */
.lieferung__knopf{margin-top:26px;width:100%;text-align:center}
@media (max-width:840px){ .lieferung__raster{grid-template-columns:minmax(0,1fr)} }

/* =========================================================================
   FRAGEN
   ========================================================================= */
.akkordeon{margin-top:32px}
/* Fragen links, Bild rechts. Ohne align-items zieht das Raster die Bildspalte
   auf die Hoehe der Fragenspalte, das Bild fuellt sie per object-fit. Das
   fruehere position:sticky ist raus, es vertraegt sich nicht mit dem Dehnen
   auf Zeilenhoehe. */
.fragen__raster{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);
  gap:clamp(30px,4vw,64px)}
@media (max-width:900px){ .fragen__raster{grid-template-columns:minmax(0,1fr)} }
.fragen__bild{margin:0;position:relative;border-radius:var(--rund);overflow:hidden;
  box-shadow:var(--schatten-tief);min-height:clamp(280px,36vw,460px)}
.fragen__bild picture{display:block;height:100%}
.fragen__bild img{width:100%;height:100%;object-fit:cover;object-position:50% 45%;display:block}
/* Unterschrift im Bild, wie bei den anderen beiden Bildern der Seite */
.fragen__bild figcaption{position:absolute;left:0;right:0;bottom:0;margin:0;
  padding:52px 22px 16px;color:#fff;font-size:14.5px;
  background:linear-gradient(180deg,rgba(0,0,0,0),rgba(0,0,0,.36) 45%,rgba(0,0,0,.74))}

.akkordeon details{background:#fff;border:1px solid var(--linie);border-radius:12px;
  margin-bottom:12px;overflow:hidden}
.akkordeon details[open]{border-color:var(--kalt-hell);box-shadow:var(--schatten)}
.akkordeon summary{cursor:pointer;list-style:none;padding:20px 54px 20px 24px;position:relative;
  font-weight:700;font-size:17.5px;line-height:1.35}
.akkordeon summary::-webkit-details-marker{display:none}
.akkordeon summary::after,.akkordeon summary::before{content:"";position:absolute;right:24px;top:50%;
  width:14px;height:2px;background:var(--rot);border-radius:2px}
.akkordeon summary::before{transform:rotate(90deg);transition:opacity .2s ease}
.akkordeon details[open] summary::before{opacity:0}
.akkordeon summary:focus-visible{outline:2px solid var(--rot);outline-offset:-3px}
.antwort-text{padding:0 24px 22px;color:var(--grau);font-size:16.5px}

/* =========================================================================
   KONTAKT
   ========================================================================= */
/* Das Aufmass-Werkzeug liegt als Grund darunter, darueber ein heller Schleier.
   Die Sektion traegt das Formular und die dunkle Kontaktkarte, beide brauchen
   ruhigen Untergrund, deshalb bleibt vom Bild nur eine Andeutung stehen. */
.kontakt{position:relative;padding:clamp(64px,8vw,120px) 0;
  background:var(--nebel);overflow:hidden;isolation:isolate}
.kontakt__grund{position:absolute;inset:0;z-index:-2}
.kontakt__grund img{width:100%;height:100%;object-fit:cover;object-position:50% 55%}
.kontakt::before{content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:linear-gradient(160deg, rgba(245,245,244,.93), rgba(230,228,224,.9))}
/* Ohne align-items sind beide Kaesten so hoch wie der hoehere von beiden. */
.kontakt__innen{position:relative;display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);
  gap:clamp(26px,3vw,48px);}
.karte{background:#fff;border-radius:var(--rund);padding:clamp(26px,3.4vw,44px);box-shadow:var(--schatten-tief)}
.karte h2{font-size:clamp(24px,2.6vw,34px)}
.karte__lead{color:var(--grau);font-size:16.5px;margin-bottom:26px}
/* Der eigene Transporter liegt im Hintergrund des Kontaktkastens, dieselbe
   Bauweise wie im Liefergeschaeft: Bild auf z-index -2, Abdunklung auf -1,
   isolation haelt beide im Kasten. Die Abdunklung ist bewusst hoch, auf dem
   weissen Fahrzeug waere heller Text sonst nicht lesbar. Das Bild bleibt als
   Andeutung erkennbar, es traegt keine Information. */
.kontakt__daten{position:relative;isolation:isolate;overflow:hidden;background:#0b0d10;color:#fff;
  border-radius:var(--rund);padding:clamp(26px,3vw,38px);box-shadow:var(--schatten-tief)}
.daten__grund{position:absolute;inset:0;z-index:-2}
.daten__grund img{width:100%;height:100%;object-fit:cover;object-position:52% 42%}
.kontakt__daten::before{content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:linear-gradient(150deg, rgba(24,27,33,.88) 0%, rgba(8,10,13,.94) 62%, rgba(0,0,0,.96) 100%)}
.kontakt__daten h2{color:#fff;font-size:clamp(21px,2vw,27px)}
.kontakt__daten h3{font-size:13px;text-transform:uppercase;letter-spacing:.16em;
  margin:26px 0 8px;color:rgba(255,255,255,.68);font-weight:700}
.kontakt__daten p{color:rgba(255,255,255,.86);font-size:16px}
.kontakt__daten a{color:#fff}
/* Die Nummer ist der zweite Weg neben dem Formular und sieht als reiner Text
   nicht danach aus. Als Knopf ueber die volle Kastenbreite ist sie ein
   Angebot und keine Angabe. Groesser als ein gewoehnlicher Knopf, die Nummer
   soll auch aus zwei Metern lesbar sein. */
.kontakt__tel{margin-bottom:18px}
.kontakt__tel .btn{width:100%;font-size:clamp(21px,2.2vw,27px);letter-spacing:-.02em;
  padding:16px 22px;gap:13px}
.kontakt__tel .btn svg{width:24px;height:24px;flex:none}
.zeiten{border-collapse:collapse;font-size:15.5px;color:rgba(255,255,255,.86)}
.zeiten th{text-align:left;font-weight:400;padding:3px 18px 3px 0;white-space:nowrap}
.zeiten td{padding:3px 0}
.kontakt__daten p.kontakt__hinweis{margin-top:12px;font-size:14.5px;color:rgba(255,255,255,.72);
    border-left:2px solid var(--rot);padding-left:12px}
.kontakt__daten p.zeiten__fuss{margin-top:10px;font-size:14.5px;color:rgba(255,255,255,.62)}
.karte-platzhalter{margin-top:26px;border:1px solid rgba(255,255,255,.24);border-radius:10px;padding:18px}
.karte-platzhalter p{font-size:14px;margin-bottom:14px}
.karte-platzhalter .btn--leer{color:#fff;border-color:rgba(255,255,255,.45)}
.karte-platzhalter iframe{width:100%;height:270px;border:0;display:block;border-radius:8px}
@media (max-width:900px){ .kontakt__innen{grid-template-columns:minmax(0,1fr)} }

/* ---------- Formular ---------- */
form[data-form-name]{display:block}
.fortschritt{margin-bottom:26px}
.fortschritt__wo{margin:0 0 10px;font-size:13px;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;color:var(--grau)}
.fortschritt__spur{height:4px;background:var(--linie);border-radius:2px;overflow:hidden}
.fortschritt__balken{display:block;height:100%;width:0;border-radius:2px;
  background:linear-gradient(90deg,var(--kalt),var(--rot));transition:width .3s ease}
.schritt{border:0;margin:0;padding:0;min-width:0}
.schritt legend{font-weight:700;font-size:clamp(19px,1.8vw,24px);padding:0;margin-bottom:18px;letter-spacing:-.02em}
.wahl{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,150px),1fr));gap:10px}
.wahl label{position:relative;display:block;cursor:pointer}
.wahl input{position:absolute;opacity:0;width:0;height:0}
/* Ausgenommen sind die Bildkacheln. `.wahl span` hat die Spezifitaet (0,1,1)
   und schlaegt damit jede Klassenregel der Kachel: die Kachel bekam dadurch
   16 px Innenabstand, einen zweiten Rahmen und 15,5 px Schriftgroesse auf der
   Beschriftung, obwohl an `.bildwahl__flaeche` und `.bildwahl__text` etwas
   anderes steht. Sichtbar war das als weisser Rand rund um jedes Bild.
   Behoben wird es an der Fliesstext-Regel, nicht mit mehr Gewicht am Opfer. */
.wahl label:not(.bildwahl) span{display:block;padding:14px 16px;border:1.5px solid var(--linie);border-radius:10px;
  font-size:15.5px;font-weight:600;transition:border-color .15s ease,background .15s ease}
.wahl label:not(.bildwahl):hover span{border-color:var(--kalt-hell)}
.wahl label:not(.bildwahl) input:checked+span{border-color:var(--rot);background:#fdeaeb}
.wahl label:not(.bildwahl) input:focus-visible+span{outline:2px solid var(--rot);outline-offset:2px}

/* Bild-Kacheln im ersten Schritt. Quadratisch, weil sie nebeneinander eine
   ruhige Reihe ergeben sollen, und weil das Gesicht von Thomas in derselben
   Form steht wie die Produkte: die allgemeine Anfrage ist gleichwertig und
   keine Notloesung am Rand. Es sind Mehrfach-Kaestchen, deshalb schaltet der
   Klick nicht mehr selbst weiter, sondern der Weiter-Knopf darunter. */
/* Flex statt Raster. Ein Raster laesst eine unvollstaendige letzte Reihe
   linksbuendig stehen und das sieht nach Rest aus, Flex zentriert sie. */
.wahl--bild{display:flex;flex-wrap:wrap;justify-content:center;gap:12px}
/* Drei pro Reihe: sechs Kacheln ergeben so zwei volle Reihen. Bei vier pro
   Reihe stuenden in der zweiten nur zwei und die Flaeche wirkt angebrochen. */
.bildwahl{flex:0 1 calc((100% - 24px) / 3)}
@media (max-width:700px){ .bildwahl{flex-basis:calc((100% - 24px) / 3)} }
@media (max-width:460px){ .bildwahl{flex-basis:calc((100% - 12px) / 2)} }
.bildwahl{position:relative;display:block;cursor:pointer}
.bildwahl input{position:absolute;opacity:0;width:0;height:0}
.bildwahl__flaeche{position:relative;display:block;border:2px solid var(--linie);border-radius:12px;
  overflow:hidden;background:#fff;transition:border-color .18s ease,transform .18s ease,box-shadow .18s ease}
.bildwahl picture{display:block}
.bildwahl img{width:100%;aspect-ratio:1/1;object-fit:cover;display:block;
  transition:transform .35s ease}
/* Die Beschriftung liegt im Bild, auf einem Verlauf. Dadurch bleibt die Kachel
   quadratisch und die Reihe ruhig, statt dass jede Kachel je nach Wortlaenge
   unterschiedlich hoch wird. */
.bildwahl__text{position:absolute;left:0;right:0;bottom:0;display:block;
  padding:26px 6px 9px;text-align:center;font-size:13.5px;hyphens:auto;
  font-weight:700;color:#fff;line-height:1.25;
  text-shadow:0 1px 6px rgba(0,0,0,.6);
  background:linear-gradient(180deg,rgba(0,0,0,0),rgba(0,0,0,.42) 40%,rgba(0,0,0,.82))}
.bildwahl:hover .bildwahl__flaeche{border-color:var(--kalt-hell);transform:translateY(-2px);
  box-shadow:var(--schatten)}
.bildwahl:hover img{transform:scale(1.05)}
.bildwahl input:checked+.bildwahl__flaeche{border-color:var(--rot);box-shadow:0 12px 28px -14px rgba(238,32,42,.7)}
.bildwahl input:checked+.bildwahl__flaeche .bildwahl__text{background:var(--rot);text-shadow:none}
.bildwahl input:focus-visible+.bildwahl__flaeche{outline:2px solid var(--rot);outline-offset:3px}
.felder{display:grid;gap:14px;margin-bottom:14px}
.felder--zwei{grid-template-columns:repeat(auto-fit,minmax(min(100%,180px),1fr))}
form[data-form-name] label{display:flex;flex-direction:column;gap:5px;font-size:14px;color:var(--grau);margin-bottom:15px}
form[data-form-name] .wahl label{margin-bottom:0}
/* Mehrfachauswahl braucht ein Zeichen, das man auch dann noch sieht, wenn
   drei Kacheln gleichzeitig aktiv sind. Der rote Rahmen allein reicht dafuer
   nicht, das Haekchen macht die Zahl der Treffer auf einen Blick lesbar. */
.bildwahl__flaeche::after{content:'';position:absolute;top:10px;right:10px;z-index:2;
  width:26px;height:26px;border-radius:50%;border:2px solid rgba(255,255,255,.8);
  background:rgba(15,20,28,.3);transition:background .18s ease,border-color .18s ease}
.bildwahl input:checked+.bildwahl__flaeche::after{border-color:#fff;
  background:var(--rot) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center/15px 15px no-repeat}
@media (prefers-reduced-motion:reduce){ .bildwahl__flaeche::after{transition:none} }

/* Kurzer Hinweis unter der Schrittueberschrift. Beantwortet die Frage, die
   sich sonst jeder selbst stellen muss: darf ich hier mehreres ankreuzen? */
.schritt__hilfe{margin:-8px 0 20px;font-size:15px;color:var(--grau);max-width:60ch}

/* Mehrere Fragen in einem Schritt. Frueher war jede Frage ein eigener Schritt,
   das ergab sieben Seiten fuer sechs Klicks. Zusammengefasst bleibt der Weg
   kurz, die Trennlinie haelt die Fragen trotzdem auseinander. */
.frage+.frage{margin-top:26px;padding-top:24px;border-top:1px solid var(--linie)}
.frage__titel{margin:0 0 12px;font-weight:700;font-size:16.5px;color:var(--tinte)}


form[data-form-name] input[type=text],
form[data-form-name] input[type=tel],
form[data-form-name] input[type=email],
form[data-form-name] textarea{
  padding:14px 15px;border:1.5px solid var(--linie);border-radius:10px;font-size:16px;
  background:var(--nebel);color:var(--tinte);font-family:var(--sans);width:100%}
form[data-form-name] input:focus,form[data-form-name] textarea:focus{
  outline:none;border-color:var(--rot);background:#fff;box-shadow:0 0 0 3px rgba(238,32,42,.14)}
form[data-form-name] textarea{resize:vertical;min-height:100px}
.opt{color:var(--grau-hell);font-weight:400}
.checkbox{flex-direction:row!important;align-items:flex-start;gap:11px;font-size:14px;line-height:1.5}
.checkbox input{width:auto;margin-top:3px;accent-color:var(--rot)}
.honeypot{position:absolute;left:-10000px;opacity:0;pointer-events:none;height:0;overflow:hidden}
.hinweis{margin-top:15px;padding:13px 15px;background:#fdeaeb;border-left:3px solid var(--rot);
  border-radius:0 8px 8px 0;font-size:15.5px;color:var(--tinte)}
.steuerung{display:flex;gap:12px;margin-top:26px;flex-wrap:wrap}
.form-status{margin-top:16px;padding:0;font-size:15.5px}
.form-status.success{padding:13px 16px;background:#e8f7ec;color:#146c43;border:1px solid #b7e3c2;border-radius:10px}
.form-status.error{padding:13px 16px;background:#fde7e7;color:#b3261e;border:1px solid #f5b9b9;border-radius:10px}
.feld-fehler{border-color:var(--rot)!important}

/* ---------- Fuss ---------- */
/* Ein angedeuteter roter Schein unten links, damit der Footer nicht als
   schwarzer Block endet, sondern die Hausfarbe noch einmal aufnimmt. Bewusst
   sehr schwach: er soll auffallen, ohne dass man ihn benennen kann. */
/* Der Fuss haengt nicht gerade an der Sektion darueber, sondern traegt dieselbe
   Schraege wie Hero und Liefergeschaeft.
   Zwei Fassungen davor waren falsch. Erst wurde die Oberkante beschnitten, ohne
   den Fuss hochzuziehen: dort schien der Body durch, also Weiss, ein Blitzer.
   Dann wurde das Dreieck in --nebel nachgemalt, aber die Sektion darueber hat
   ein Foto mit hellem Ueberzug, ihre echte Farbe ist kein flaches --nebel, und
   der Streifen blieb sichtbar.
   Jetzt schiebt sich der Fuss um die Kantenhoehe nach oben unter die Sektion.
   Was der Beschnitt wegnimmt, gibt den Blick auf die Sektion selbst frei, egal
   welche Farbe oder welches Bild dort liegt. Es gibt nichts mehr nachzumalen.
   Die geschluckte Hoehe kommt im Innenabstand wieder dazu, der Ueberlapp frisst
   nur Innenabstand der Sektion darueber, keinen Inhalt. */
.fuss{position:relative;overflow:hidden;z-index:2;
  margin-top:calc(var(--kante) * -1);
  clip-path:polygon(0 var(--kante), 100% 0, 100% 100%, 0 100%);
  background:
    radial-gradient(90% 130% at 8% 118%, rgba(238,32,42,.30) 0%, rgba(238,32,42,.10) 38%, rgba(238,32,42,0) 68%),
    linear-gradient(150deg,#15181d,#000);color:rgba(255,255,255,.72);
  padding:calc(56px + var(--kante)) 0 40px;font-size:15.5px}
.fuss__schraege{position:absolute;inset:0;background:var(--rot);z-index:2;pointer-events:none;
  clip-path:polygon(0 var(--kante), 100% 0, 0 calc(var(--kante) + var(--strich)))}
/* Der Inhalt liegt ueber beiden Lagen. Ohne das malt der positionierte
   Streifen ueber die nicht positionierte Fusszeile. */
.fuss>.wrap,.fuss>.container{position:relative;z-index:3}
.fuss__innen{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr));gap:32px;align-items:start}
@media (min-width:900px){ .fuss__innen{grid-template-columns:minmax(0,1.25fr) repeat(3,minmax(0,1fr))} }
/* Das Logo so breit wie der Text darunter, nicht ueber eine feste Hoehe.
   Der Absatz begrenzt sich auf 34ch, also bekommt das Logo dieselbe Grenze
   und fuellt sie aus. */
/* Logo und Zeile darunter fuellen dieselbe Spalte, dadurch sind sie gleich
   breit. Die Spalte ist ab 900 px etwas breiter als die drei Navigationsspalten,
   sonst braucht die Zeile mit den vier Leistungen zwei Zeilen: sie misst 283 px,
   eine Viertelspalte von 1136 px waere 260. */
.fuss__marke{--marke:100%}
.fuss__marke img{width:100%;max-width:var(--marke);height:auto;margin-bottom:20px}
.fuss__marke p{max-width:var(--marke);margin:0}
.fuss__text{margin:34px 0 0;padding-top:26px;border-top:1px solid rgba(255,255,255,.16);
  font-size:14.5px;line-height:1.65;color:rgba(255,255,255,.6)}
.fuss h4{color:#fff;font-size:14px;text-transform:uppercase;letter-spacing:.14em;margin-bottom:14px}
.fuss__nav{display:flex;flex-direction:column;gap:9px}
.fuss__nav a.fuss__insta{display:inline-flex;align-items:center;gap:8px}
.fuss__insta svg{width:17px;height:17px;flex:none}
.fuss a{color:#fff;text-decoration:none}
.fuss a:hover{text-decoration:underline}
.fuss__recht{color:rgba(255,255,255,.55);font-size:14px}
.fuss__fox a{display:inline-flex;align-items:center;gap:7px;font-weight:700}
.fuss__fox img{height:15px;width:auto}
.fuss__unten{margin-top:26px;padding-top:22px;border-top:1px solid rgba(255,255,255,.2);
  display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;font-size:14px}
.fox-datenschutz-link{background:none;border:0;padding:0;font-size:14px;text-decoration:underline;
  color:rgba(255,255,255,.76);cursor:pointer;font-family:var(--sans)}
.fox-datenschutz-link:hover{color:#fff}

/* ---------- Engine ---------- */
#fox-consent-banner{position:fixed;bottom:0;left:0;right:0;background:var(--tinte);color:#fff;z-index:9999;
  box-shadow:0 -4px 20px rgba(0,0,0,.25)}
#fox-consent-banner .fox-consent-inner{max-width:var(--breite);margin:0 auto;padding:18px var(--rand);
  display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:16px}
#fox-consent-banner .fox-consent-text{flex:1;font-size:14px;line-height:1.5;min-width:280px}
#fox-consent-banner .fox-consent-text a{color:#fff;text-decoration:underline}
#fox-consent-banner .fox-consent-actions{display:flex;gap:8px;flex-wrap:wrap}
#fox-consent-banner button{padding:11px 19px;border-radius:8px;border:1px solid rgba(255,255,255,.85);
  background:transparent;color:#fff;cursor:pointer;font-size:14px;font-weight:600;min-width:150px;font-family:var(--sans)}
#fox-consent-banner button:hover,#fox-consent-banner button:focus-visible{background:rgba(255,255,255,.16)}
#fox-consent-status{position:fixed;left:50%;bottom:24px;transform:translateX(-50%);z-index:10000;
  max-width:min(92vw,520px);background:var(--tinte);color:#fff;border:1px solid rgba(255,255,255,.35);
  border-radius:10px;padding:12px 18px;font-size:14px;box-shadow:0 6px 24px rgba(0,0,0,.35)}
.legal-hinweis{margin:28px 0;padding:18px 20px;border:2px solid currentColor;border-radius:10px;background:rgba(0,0,0,.03)}
.legal-hinweis p{margin:0 0 10px}
.legal-hinweis p:last-child{margin-bottom:0}

/* ---------- Rechtstexte ---------- */
.rechtstext{max-width:var(--schmal);margin:0 auto;padding:clamp(48px,7vw,88px) var(--rand)}
/* Die Rechtstext-Seiten tragen seit dem 29.08. denselben festen Kopf wie
   die Startseite. Der ist rund 84 px hoch und liegt ueber dem Inhalt,
   deshalb braucht die Ueberschrift diesen Betrag zusaetzlich. */
.rechtstext--mit-kopf{padding-top:calc(clamp(48px,7vw,88px) + 84px);
  /* Der Fuss schiebt sich um die Kantenhoehe unter den Inhalt. Ohne diesen
     Zuschlag stand der letzte Absatz 2 px ueber der Schraege. */
  padding-bottom:calc(clamp(48px,7vw,88px) + var(--kante))}
.rechtstext h1{font-size:clamp(30px,4vw,44px);margin-bottom:.6em}
.rechtstext h2{font-size:clamp(20px,2vw,26px);margin-top:2em}
.rechtstext h3{font-size:18px;margin-top:1.6em}
.rechtstext p,.rechtstext li{color:var(--grau);font-size:16.5px}
.rechtstext li{margin-bottom:.4em}

/* ---------- Bewegung ---------- */
/* Blenden nach Art des Elements. Eine einzige Bewegung fuer alles wirkt
   mechanisch: eine Karte darf steigen und dabei leicht wachsen, ein Bild soll
   sich setzen statt zu rutschen, ein Listenpunkt kommt von der Seite wie eine
   Zeile, die geschrieben wird, und eine grosse Zahl waechst heran.
   Gemeinsam bleiben Deckkraft und Kurve, sonst zerfaellt die Seite in
   Einzelteile. site.js verteilt die Klassen. */
.aufblenden{opacity:0;
  transition:opacity .6s cubic-bezier(.22,.61,.36,1),transform .6s cubic-bezier(.22,.61,.36,1)}
.aufblenden.sichtbar{opacity:1;transform:none}

.auf--hoch{transform:translateY(18px)}
/* Karten steigen weiter und kommen aus der Tiefe. */
.auf--karte{transform:translateY(26px) scale(.972)}
/* Bilder setzen sich, statt zu rutschen. Von leicht zu gross auf genau
   passend, das liest sich wie Scharfstellen. */
.auf--bild{transform:scale(1.045)}
/* Listenpunkte kommen von links, in Leserichtung. */
.auf--links{transform:translateX(-22px)}
/* Grosse Zahlen wachsen heran, sie sind die Aussage und keine Zeile. */
.auf--zahl{transform:scale(.84)}
/* Ueberschriften steigen knapper, damit die Zeile nicht springt. */
.auf--zeile{transform:translateY(10px)}

/* Der Hero blendet beim Laden ein, nicht beim Scrollen. Kuerzer als der Rest,
   weil die Ueberschrift hier das groesste Element im Bild ist und der Browser
   den Ladezeitpunkt daran misst: jede Zehntelsekunde Blende zaehlt dort mit. */
.hero .aufblenden{transition-duration:.42s}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms!important;transition-duration:.001ms!important}
  .aufblenden,.auf--hoch,.auf--karte,.auf--bild,.auf--links,.auf--zahl,.auf--zeile{opacity:1;transform:none}
}

/* =========================================================================
   CONVERSION-BAUSTEINE (29.08.2026)
   Sechs von zehn Sektionen hatten keinen Handlungsvorschlag. Wer nach den
   Bewertungen ueberzeugt war, musste erst weiterscrollen, um etwas tun zu
   koennen.
   ========================================================================= */

/* Abschluss-CTA unter einer Sektion. Bewusst mittig und mit einer Zeile
   darunter, die den Einwand gegen den Klick vorwegnimmt. */
.sektion-cta{margin-top:clamp(34px,4.4vw,58px);display:flex;flex-direction:column;
  align-items:center;gap:12px;text-align:center}
.sektion-cta__notiz{margin:0;max-width:56ch;font-size:14.5px;color:var(--grau)}
/* Knopf und Zeile darunter genau so breit wie zwei Kacheln der Reihe darueber.
   Die Reihe ist ein Raster aus vier Spalten mit 20 px Abstand, zwei Spalten
   plus Abstand sind damit (100% - 3 mal 20) / 4 mal 2 + 20, gekuerzt
   (100% - 60px) / 2 + 20px. Aus derselben Rechnung wie das Raster selbst,
   damit die Kante mitwandert und nicht bei einer Breite zufaellig passt.
   Gemessen bei 1136 px Inhaltsbreite: 558 px, genau zwei Kacheln. */
.sektion-cta .btn,.sektion-cta__notiz{width:calc((100% - 60px) / 2 + 20px);max-width:100%}
.sektion-cta .btn svg{width:20px;height:20px;flex:none}
/* Unter 560 px steht die Reihe einspaltig, dort waere eine halbe Breite falsch. */
@media (max-width:560px){ .sektion-cta .btn,.sektion-cta__notiz{width:100%} }

/* Sanfter CTA am Ende jeder FAQ-Antwort, Pflicht laut Playbook Kap. 27.
   Kein Knopf: die Antwort soll eine Antwort bleiben und nicht wie Werbung
   aussehen. Der Verweis ist auf die konkrete Frage gemuenzt. */
.antwort-cta{margin:16px 0 0}
.antwort-cta a{display:inline-flex;align-items:center;gap:7px;
  font-weight:700;font-size:15px;color:var(--rot-dunkel);text-decoration:none;
  border-bottom:2px solid rgba(238,32,42,.28);padding-bottom:2px;
  transition:border-color .15s ease,color .15s ease}
.antwort-cta a::after{content:'\2192';font-weight:400}
.antwort-cta a:hover{color:var(--rot);border-bottom-color:var(--rot)}

/* Feste Leiste auf dem Handy. Auf dem Desktop gibt es sie nicht, dort steht
   die Nummer dauerhaft im Kopf. Der Koerper bekommt unten Platz, damit die
   Leiste nichts verdeckt, was am Seitenende steht. */
.handygriff{display:none}
@media (max-width:700px){
  body{padding-bottom:82px}
  .handygriff{position:fixed;left:0;right:0;bottom:0;z-index:60;
    display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.25fr);gap:8px;
    padding:10px 12px calc(10px + env(safe-area-inset-bottom,0px));
    background:rgba(11,14,18,.94);border-top:1px solid rgba(255,255,255,.14);
    backdrop-filter:blur(8px);
    transform:translateY(0);transition:transform .25s ease}
  /* Sobald das Formular im Bild ist, faehrt die Leiste weg. Sonst deckt sie
     genau den Senden-Knopf zu, auf den sie hinfuehrt. */
  .handygriff[data-aus]{transform:translateY(115%)}
}
@media (max-width:700px) and (prefers-reduced-motion:reduce){
  .handygriff{transition:none}
}
.handygriff__knopf{display:inline-flex;align-items:center;justify-content:center;gap:8px;
  min-height:50px;padding:0 14px;border-radius:10px;text-decoration:none;
  font-family:var(--sans);font-weight:700;font-size:15.5px;line-height:1}
.handygriff__knopf svg{width:18px;height:18px;flex:none}
.handygriff__knopf--tel{background:#fff;color:var(--tinte)}
.handygriff__knopf--anfrage{background:var(--rot);color:#fff}

/* Dankebereich. Tritt an die Stelle des Formulars, sobald die Engine Erfolg
   meldet. Er beantwortet die einzige Frage, die in diesem Moment zaehlt:
   was passiert jetzt. */
.danke{text-align:left}
/* Nur in der Vorschau. Steht ueber dem Dankebereich, damit niemand glaubt,
   seine Anfrage sei unterwegs. */
.danke__vorschau{margin:0 0 22px;padding:13px 16px;border-radius:10px;
  background:#fdeaeb;border:1px solid rgba(238,32,42,.3);
  color:var(--rot-dunkel);font-size:15px;line-height:1.5}
.danke h2{font-size:clamp(24px,2.6vw,34px);margin-bottom:14px}
.danke__lead{color:var(--grau);font-size:16.5px;margin-bottom:26px}
.danke__schritte{counter-reset:d;list-style:none;margin:0 0 26px;padding:0;
  display:grid;gap:14px}
.danke__schritte li{position:relative;padding-left:46px;font-size:16px;color:var(--grau);
  line-height:1.55}
.danke__schritte li b{color:var(--tinte)}
.danke__schritte li::before{counter-increment:d;content:counter(d);
  position:absolute;left:0;top:-2px;width:31px;height:31px;border-radius:50%;
  background:#fdeaeb;color:var(--rot-dunkel);font-weight:700;font-size:15px;
  display:flex;align-items:center;justify-content:center}
.danke__eilig{margin:0;padding-top:22px;border-top:1px solid var(--linie);
  font-size:16px;color:var(--grau)}
.danke__eilig a{color:var(--rot-dunkel);font-weight:700;font-size:20px;
  text-decoration:none;letter-spacing:-.02em}
.danke__eilig span{font-size:14.5px}