/* M&H AI Solutions — gemeinsames Stylesheet.
   Aus index.html herausgeloest, damit Startseite UND Unterseiten
   dieselben Regeln benutzen. Vorher lag alles inline; jede neue Seite
   waere eine Kopie gewesen, die beim ersten Aendern auseinanderlaeuft.
   ⚠ Inhalt unveraendert uebernommen. */
:root{
  --papier:#fffdf9; --creme:#f7f4ee; --karte:#ffffff;
  --ink:#16161a; --ink2:#4a4a52; --mut:#67676f;
  --gold:#a8894e; --gold-d:#8a6f3c; --gold-dd:#7a6134; --linie:#e2dccd;
  --gruen:#1e4a45; --gruen-h:#2f6a62; --sand:#f2ece0; --blush:#faf3ea;
  --disp:"Iowan Old Style",Georgia,"Times New Roman",serif;
  /* Emil: die eingebauten CSS-Kurven sind zu schwach. Eigene Kurven, ein Satz fuer alles. */
  --aus:cubic-bezier(.23,1,.32,1);        /* Eintritt, fuehlt sich sofort an */
  --beides:cubic-bezier(.77,0,.175,1);    /* Bewegung auf dem Schirm */
  --body:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --rad:3px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{background:var(--papier);color:var(--ink);font-family:var(--body);
  font-size:17px;line-height:1.68;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{max-width:100%;height:auto;display:block}   /* height:auto: sonst stauchen die width/height-Attribute das Bild */
a{color:inherit}
.wrap{width:min(1120px,90vw);margin:0 auto}
.narrow{width:min(760px,90vw);margin:0 auto}
/* ⚠ text-wrap:balance ist hier keine Kosmetik. Gemessen bei 390 px: 14 von 39
   Ueberschriften trugen in der letzten Zeile nur noch EIN Wort — „Fordern Sie Ihre
   Vorschau / an.“, „So sieht das aus, wenn es fertig / ist.“, und das CTA-Band
   „Ihre Website steht in einer / Woche.“ auf FUENF Seiten. Ein einzelnes Wort als
   Restzeile liest sich wie ein Versehen. balance verteilt die Zeilen gleichmaessig
   und ist genau fuer kurze Bloecke wie Ueberschriften gedacht; Browser ohne
   Unterstuetzung brechen wie bisher um. Gegenprobe: tools/company/zeilen.py.
   ⚠ Bewusst NICHT auf Fliesstext — dort gibt balance ab wenigen Zeilen ohnehin auf,
   und die Rechenkosten stiegen mit der Textlaenge. */
h1,h2,h3{font-family:var(--disp);font-weight:400;line-height:1.13;letter-spacing:-.015em;
  text-wrap:balance}
h1 em,h2 em{font-style:italic;color:var(--gold)}

header{position:sticky;top:0;z-index:80;background:rgba(255,253,249,.94);
  backdrop-filter:blur(10px);border-bottom:1px solid var(--linie)}
.hd{display:flex;align-items:center;justify-content:space-between;gap:1.2rem;padding:1rem 0}
.logo{font-family:var(--disp);font-size:1.32rem;text-decoration:none;letter-spacing:.01em;flex:none}
.logo b{font-weight:600}
nav{display:flex;align-items:center;gap:1.8rem}
nav a{display:inline-flex;align-items:center;min-height:44px}
nav a{text-decoration:none;font-size:.78rem;letter-spacing:.15em;text-transform:uppercase;
  font-weight:600;color:var(--ink2);padding-bottom:2px;border-bottom:1px solid transparent;
  transition:color .15s ease,border-color .15s ease}
nav a:hover{color:var(--ink);border-bottom-color:var(--gold)}
.btn{display:inline-block;text-decoration:none;cursor:pointer;border:0;font-family:inherit;
  padding:.92em 1.9em;font-size:.78rem;letter-spacing:.16em;text-transform:uppercase;
  font-weight:600;white-space:nowrap;border-radius:var(--rad);
  transition:background .18s ease,color .18s ease,box-shadow .18s ease,transform .16s var(--aus)}
.btn:active{transform:scale(.97)}          /* Emil: Knopf muss auf den Druck antworten */
/* Haupt-Knopf im Markengruen. Vorher fast schwarz (--ink) - und weil der
   Umriss-Knopf beim Ueberfahren GENAU dieses Schwarz annahm, sah der Haupt-Knopf
   dauerhaft aus wie mit der Maus drauf. Gruen ist ausserdem die Farbe aus Logo,
   Band und Senden-Knopf. Kontrast weiss auf gruen: 9,89:1. */
.btn-p{background:var(--gruen);color:var(--papier)}
.btn-p:hover{background:var(--gruen-h)}
.btn-g{background:var(--gold);color:#fff}
.btn-g:hover{background:var(--gold-d)}
.btn-o{background:transparent;color:var(--ink);box-shadow:inset 0 0 0 1px var(--ink)}
/* Der Neben-Knopf darf beim Ueberfahren NICHT wie der Haupt-Knopf aussehen,
   sonst loest sich die Rangfolge auf. Nur heller Grund und Gold-Rand. */
.btn-o:hover{background:var(--creme);color:var(--ink);
  box-shadow:inset 0 0 0 1px var(--gold-d)}
.tel-kopf{font-size:.82rem;font-weight:600;color:var(--ink2);text-decoration:none;
  white-space:nowrap;transition:color .18s ease}
.tel-kopf:hover{color:var(--ink)}
.burger{display:none;background:none;border:0;color:var(--ink);font-size:1.35rem;cursor:pointer;padding:.2rem .4rem}
/* ⚠ BRUCHPUNKT 1179px, NICHT 999px. Gemessen: die Zeile braucht mit vier
   Punkten plus Telefon plus Knopf 838px, und der Platz neben dem Logo ist bei
   1180px Fenster 856px, bei 1160px nur noch 838px. Darunter gehoert die
   Navigation ins Schubfach. Mit fuenf Punkten waeren es 928px gewesen: das
   passt bei KEINER Breite, weil die Bahn bei 1120px gedeckelt ist. */
/* Der Anruf-Knopf im Hero: NUR dort, wo die Nummer im Kopf hinter dem Burger
   steckt. Ab 1180 px steht sie in der Kopfzeile, dann waere er doppelt.
   ⚠️ Hier ist `display` ausnahmsweise genau der Zweck der Regel — anders als bei
   der 44-px-Korrektur, die auf dieser Seite einmal den Burger sichtbar gemacht
   und das Leerzeichen im Firmennamen verschluckt hat. */
.btn-tel{display:none}

@media(max-width:1179px){
  .btn-tel{display:inline-block}
  nav{position:fixed;inset:65px 0 auto 0;background:var(--papier);border-bottom:1px solid var(--linie);
    flex-direction:column;align-items:stretch;gap:0;padding:.4rem 5vw 1.3rem;display:none}
  nav.open{display:flex}
  nav a{padding:.95rem 0;border-bottom:1px solid var(--linie);font-size:.86rem}
  nav .btn{margin-top:1rem;text-align:center}
  .burger{display:inline-flex}
}

.sec{padding:clamp(3.6rem,8vw,6.6rem) 0}
.ey{font-size:.7rem;letter-spacing:.26em;text-transform:uppercase;color:var(--gold-d);
  font-weight:700;margin-bottom:1.1rem}
.h2{font-size:clamp(1.95rem,4.2vw,3rem);margin-bottom:1.1rem}
.lead{color:var(--ink2);max-width:62ch;font-size:clamp(1.02rem,1.4vw,1.12rem)}
.head{max-width:64ch;margin-bottom:clamp(2.2rem,4vw,3.4rem)}
.center{text-align:center;margin-left:auto;margin-right:auto}
.rule{width:46px;height:1px;background:var(--gold);margin:1.5rem 0}
.center .rule{margin-left:auto;margin-right:auto}

.hero{padding:clamp(3.4rem,8vw,6.4rem) 0 clamp(3rem,6vw,5rem);border-bottom:1px solid var(--linie)}
.hero h1{font-size:clamp(2.5rem,6.2vw,4.6rem);max-width:15ch}
.hero .lead{margin:1.5rem 0 2.2rem}
.cta{display:flex;gap:.8rem;flex-wrap:wrap;align-items:center}
.angebot{margin-top:2.6rem;display:inline-flex;align-items:baseline;gap:.7rem;flex-wrap:wrap;
  border:1px solid var(--linie);background:var(--creme);padding:.85rem 1.3rem;border-radius:var(--rad);
  text-decoration:none;transition:border-color .18s ease}
.angebot:hover{border-color:var(--gold)}
.angebot b{font-family:var(--disp);font-size:1.22rem;font-weight:400}
.angebot s{color:var(--mut);font-size:.92rem}
.angebot span{font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--gold-d);font-weight:700}
.trust{display:flex;gap:2.4rem;flex-wrap:wrap;margin-top:2.8rem;padding-top:2rem;border-top:1px solid var(--linie)}
.trust div b{display:block;font-family:var(--disp);font-size:1.5rem}
.trust div span{font-size:.82rem;color:var(--mut)}

.g2{display:grid;grid-template-columns:1fr 1fr;gap:clamp(1.4rem,3vw,2.4rem)}
.g3{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(1.4rem,3vw,2.2rem)}
.g4{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(1.2rem,2.4vw,1.9rem)}
@media(max-width:900px){.g2,.g3{grid-template-columns:1fr}.g4{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.g4{grid-template-columns:1fr}}
.karte{background:var(--karte);border:1px solid var(--linie);border-radius:var(--rad);
  padding:2.1rem 2.2rem}
.karte h3{font-size:1.42rem;margin-bottom:.6rem}
.karte p{color:var(--ink2);font-size:.98rem}
.karte .preis{margin-top:1.5rem;padding-top:1.3rem;border-top:1px solid var(--linie)}
.karte .preis .p{font-family:var(--disp);font-size:2.1rem;line-height:1}
.karte .preis .alt{color:var(--mut);font-size:.92rem;margin-left:.5rem}
.karte .preis .mon{display:block;color:var(--gold-d);font-weight:600;font-size:.92rem;margin-top:.55rem}
.liste{list-style:none;margin:1.3rem 0 0}
.liste li{display:flex;gap:.75rem;padding:.5rem 0;font-size:.97rem;color:var(--ink2)}
.liste .k{color:var(--gold-d);flex:none;font-weight:700}

/* Handlungsknopf je Produktkarte. Ohne ihn sah man das Angebot, hatte Interesse
   und musste sich den Weg zum Formular selbst suchen. Die Karte ist eine Spalte,
   der Knopf haengt unten - dadurch stehen beide Knoepfe auf gleicher Hoehe,
   auch wenn die Karten unterschiedlich viel Text tragen. */
.g2 .karte{display:flex;flex-direction:column}
.karte .cta{display:block;width:100%;text-align:center;white-space:normal;
  margin-top:auto;padding-top:1.05em;padding-bottom:1.05em}
/* Der Mindestabstand haengt am Text DAVOR, nicht am Knopf. Als Regel am Knopf
   (.karte .hinweis + .cta) hatte sie hoehere Spezifitaet als .karte .cta und
   ueberschrieb damit margin-top:auto - die Knoepfe standen dann nicht mehr unten
   und damit nicht auf gleicher Hoehe. */
.g2 .karte .hinweis{margin-bottom:1.4rem}

/* ---- Ablauf: die goldene Linie liegt im HINTERGRUND und folgt streng dem
   Scrollen. Runter zeichnet sie, hoch nimmt sie sich wieder zurueck (siehe
   Skript am Seitenende). Die blasse Grundlinie zeigt vorher schon, wohin es
   geht - das macht die Bewegung lesbar statt bloss huebsch. ---- */
.weg{position:relative;margin-top:clamp(1.8rem,3.5vw,2.8rem)}
.w-hintergrund{position:absolute;inset:0;pointer-events:none;z-index:0}
.w-svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.w-hintergrund path{fill:none;stroke-linecap:round;stroke-linejoin:round;
  vector-effect:non-scaling-stroke}  /* Strichstaerke bleibt trotz Streckung gleich */
.w-grund{stroke:var(--linie);stroke-width:3}
.w-gold{stroke:var(--gold-d);stroke-width:5}
.w-maske{position:absolute;inset:0;clip-path:inset(0 0 100% 0)}
.w-schmal{display:none}

.weg-schritte{list-style:none;display:grid;grid-template-rows:repeat(4,1fr);
  gap:0;margin:0;padding:0;position:relative;z-index:1}
.weg-schritte .schritt{position:relative;align-self:center;
  padding:clamp(.9rem,2vw,1.5rem) 0}
/* Die Textbloecke weichen abwechselnd aus, damit die Linie sichtbar zwischen
   ihnen hindurchlaeuft statt hinter Absaetzen zu verschwinden. */
.weg-schritte .inh{max-width:30rem}
.weg-schritte .schritt:nth-child(odd)  .inh{margin-left:34%}
.weg-schritte .schritt:nth-child(even) .inh{margin-right:34%}
.weg-schritte .tag{display:block;font-size:.7rem;letter-spacing:.16em;
  text-transform:uppercase;font-weight:700;color:var(--gold-dd)}
.weg-schritte h3{font-family:var(--disp);font-weight:400;
  font-size:clamp(1.15rem,2.1vw,1.42rem);margin:.4rem 0 .45rem}
.weg-schritte p{color:var(--ink2);font-size:.96rem;line-height:1.62}

/* Der Punkt sitzt exakt auf dem Wegpunkt der Linie (22 % bzw. 78 %) und fuellt
   sich, sobald die Linie ihn erreicht. Text bleibt immer voll lesbar. */
.weg-schritte .punkt{position:absolute;top:50%;left:22%;transform:translate(-50%,-50%);
  width:32px;height:32px;border-radius:50%;display:flex;align-items:center;
  justify-content:center;font-weight:700;font-size:.84rem;
  background:var(--papier);color:var(--gold-dd);box-shadow:inset 0 0 0 2px var(--gold-d);
  transition:background .4s var(--aus),color .4s var(--aus),box-shadow .4s var(--aus)}
.weg-schritte .schritt:nth-child(even) .punkt{left:78%}
.weg-schritte .schritt.an .punkt{background:var(--gold-d);color:#fffdf9;
  box-shadow:inset 0 0 0 2px var(--gold-d),0 0 0 6px rgba(138,111,60,.16)}

@media(max-width:760px){
  /* Auf dem Handy hat ein Zweispalter keinen Platz: die Linie bekommt eine
     eigene 48px-Rinne am linken Rand, der Text laeuft daneben durch. */
  .w-breit{display:none}
  .w-schmal{display:block}
  .w-hintergrund{right:auto;width:48px}
  .weg-schritte .schritt:nth-child(odd)  .inh,
  .weg-schritte .schritt:nth-child(even) .inh{margin:0 0 0 4rem;max-width:none}
  .weg-schritte .punkt{width:27px;height:27px;font-size:.78rem;left:16px}
  .weg-schritte .schritt:nth-child(even) .punkt{left:34px}
}


/* ---- Fortsetzung der Linie: der Ablauf laeuft ohne Bruch in die fertigen
   Arbeiten weiter. Der zweite Block faengt genau dort an, wo der erste aufhoert
   (78 % bzw. 34px), und spiegelt die Seiten - deshalb die vertauschte
   Links-Rechts-Regel unten. Begruendung fuer die Motion: eine Linie, die
   weiterlaeuft, sagt "das hier ist dasselbe Vorhaben, nur weiter hinten".
   Vorher standen dieselben drei Bildschirmfotos ein zweites Mal auf der Seite. */
.wegkette{margin-top:clamp(1.8rem,3.5vw,2.8rem)}
.weg2{margin-top:0;scroll-margin-top:86px}
.weg2 .weg-schritte .schritt:nth-child(odd)  .punkt{left:78%}
.weg2 .weg-schritte .schritt:nth-child(even) .punkt{left:22%}
.weg2 .weg-schritte .schritt:nth-child(odd)  .inh{margin-left:0;margin-right:34%}
.weg2 .weg-schritte .schritt:nth-child(even) .inh{margin-left:34%;margin-right:0}
/* Die Stationen tragen KEINE Ziffer: auf derselben Linie wie die Schritte 1 bis 4
   haette eine neue 1,2,3 wie "Schritt 5,6,7" gewirkt. Eine Marke sagt nur "hier". */
.punkt.marke{width:20px;height:20px}
.weg2 .schritt.kopf .inh{max-width:34rem}
.weg2 .schritt.kopf .h2{margin-bottom:.7rem}
.weg2 .schritt.kopf .lead{font-size:1rem}

/* Eine Station ist anklickbar: der ganze Textblock ist der Link. */
.stat{display:block;text-decoration:none;color:inherit;border-radius:var(--rad);
  margin:calc(-1 * clamp(.5rem,1.2vw,.9rem));padding:clamp(.5rem,1.2vw,.9rem);
  transition:background .2s ease,transform .18s var(--aus)}
.stat .dom{display:inline-block;margin-top:.6rem;font-size:.82rem;color:var(--mut)}
.stat .dom i{display:inline-block;font-style:normal;transition:transform .22s var(--aus)}
@media(hover:hover) and (pointer:fine){
  .stat:hover{background:rgba(255,253,249,.72)}
  .stat:hover .dom{color:var(--gold-dd)}
  .stat:hover .dom i{transform:translateX(5px)}
}
.stat:active{transform:scale(.995)}

@media(max-width:760px){
  .weg2 .weg-schritte .schritt:nth-child(odd)  .inh,
  .weg2 .weg-schritte .schritt:nth-child(even) .inh{margin:0 0 0 4rem;max-width:none}
  .weg2 .weg-schritte .schritt:nth-child(odd)  .punkt{left:34px}
  .weg2 .weg-schritte .schritt:nth-child(even) .punkt{left:16px}
}

.bsp-block{margin-top:clamp(2.2rem,4.5vw,3.4rem);padding-top:clamp(1.6rem,3vw,2.2rem);
  border-top:1px solid var(--linie)}
.bsp-h{font-family:var(--disp);font-weight:400;font-size:clamp(1.2rem,2.2vw,1.5rem)}
.bsp-t{color:var(--ink2);font-size:.97rem;margin-top:.3rem}
.bsp{display:flex;flex-wrap:wrap;gap:.6rem;margin-top:1.1rem}
.bsp a{text-decoration:none;font-size:.88rem;background:var(--papier);
  border:1px solid var(--linie);border-radius:999px;padding:.55rem 1rem;color:var(--ink2);
  transition:border-color .2s ease,color .2s ease,transform .16s var(--aus)}
@media(hover:hover) and (pointer:fine){
  .bsp a:hover{border-color:var(--gold);color:var(--ink)}
}
.bsp a:active{transform:scale(.97)}

.faq{border-top:1px solid var(--linie)}
.faq details{border-bottom:1px solid var(--linie)}
.faq summary{cursor:pointer;list-style:none;padding:1.35rem 0;font-family:var(--disp);
  font-size:1.18rem;display:flex;justify-content:space-between;gap:1.5rem;align-items:baseline}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";color:var(--gold);font-size:1.3rem;flex:none;font-family:var(--body)}
.faq details[open] summary::after{content:"\2212"}
.faq p{color:var(--ink2);padding:0 0 1.5rem;font-size:.98rem;max-width:70ch}

.person h3{font-size:1.22rem;margin-bottom:.2rem}
.person .rolle{font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--gold-d);font-weight:700;margin-bottom:.8rem}
.person p{color:var(--ink2);font-size:.95rem}

.form{display:grid;gap:1rem}
label{display:block;font-size:.74rem;letter-spacing:.12em;text-transform:uppercase;
  font-weight:700;color:var(--mut);margin-bottom:.45rem}
input,textarea{width:100%;background:var(--karte);border:1px solid var(--linie);color:var(--ink);
  border-radius:var(--rad);padding:.85rem 1rem;font:inherit;font-size:.98rem}
input:focus,textarea:focus{border-color:var(--gold)}
input:focus-visible,textarea:focus-visible{outline:2px solid var(--gold-d);outline-offset:1px}
textarea{min-height:130px;resize:vertical}
.hinweis{color:var(--mut);font-size:.86rem}
.kbox{background:var(--creme);border:1px solid var(--linie);border-radius:var(--rad);padding:2rem 2.1rem}
.krow{display:flex;gap:.9rem;align-items:flex-start;margin-bottom:1rem;font-size:.98rem}
.krow .ic{color:var(--gold-d);flex:none;font-weight:700;width:1.2rem}
.krow a{text-decoration:none;border-bottom:1px solid var(--linie)}
/* Beschriftete Paar-Zeile (Etikett statt Symbol). Die feste Spalte haelt die linke
   Kante gerade — aber nur, solange rechts daneben noch Platz fuer Text ist.
   ⚠ Gemessen bei 390 px: die Etikettenspalte nahm 131 px, dem Text blieben 135 px,
   und er brach auf drei Woerter je Zeile um, waehrend links fast nichts stand.
   Betrifft „Was wir von Ihnen brauchen“ (/websites/) und „Was uns aufhaelt“
   (/ablauf/). Unter 560 px steht das Etikett deshalb UEBER dem Text. */
.krow .kl{flex:none;width:8.2rem;color:var(--gold-dd);font-weight:600}
@media(max-width:560px){
  .krow--paar{display:block}
  .krow--paar .kl{width:auto;display:block;margin-bottom:.15rem}
}

.band{background:var(--ink);color:var(--papier);text-align:center}
.band h2{font-size:clamp(1.9rem,4.4vw,2.9rem);margin-bottom:1rem}
.band h2 em{color:#d9bd85}
.band p{color:rgba(255,253,249,.72);margin-bottom:2rem;max-width:46ch;margin-left:auto;margin-right:auto}
.band .btn-w{background:var(--papier);color:var(--ink)}
footer{background:var(--creme);border-top:1px solid var(--linie);padding:3.4rem 0 2.4rem;font-size:.93rem}
.fgrid{display:grid;grid-template-columns:1.5fr 1fr 1fr;gap:2.4rem;margin-bottom:2.6rem}
@media(max-width:820px){.fgrid{grid-template-columns:1fr;gap:1.8rem}}
footer h4{font-size:.7rem;letter-spacing:.2em;text-transform:uppercase;color:var(--mut);
  font-weight:700;margin-bottom:1rem}
footer ul{list-style:none}
footer li{margin-bottom:.45rem;color:var(--ink2)}
footer a{text-decoration:none}
footer a:hover{border-bottom:1px solid var(--gold)}
.fbot{border-top:1px solid var(--linie);padding-top:1.6rem;display:flex;justify-content:space-between;
  gap:1rem;flex-wrap:wrap;font-size:.85rem;color:var(--mut)}

.reveal{opacity:0;transform:translateY(16px);
  transition:opacity .8s cubic-bezier(.2,.7,.2,1),transform .8s cubic-bezier(.2,.7,.2,1)}
.reveal.in{opacity:1;transform:none}
/* Ohne JS bliebe die halbe Seite unsichtbar - und wer Animationen abbestellt hat, bekommt keine. */
@media(prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none;transition:none}}
:focus-visible{outline:2px solid var(--gruen,#1f3d2b);outline-offset:2px}

/* --- Farbakzente --- */
.ey{position:relative;padding-left:1.5rem}
.ey::before{content:"";position:absolute;left:0;top:.42em;width:14px;height:2px;background:var(--gold)}
.center .ey{padding-left:0}
.center .ey::before{display:none}

.angebot{background:linear-gradient(100deg,rgba(168,137,78,.14),rgba(168,137,78,.05));
  border-color:rgba(168,137,78,.42)}
.angebot b{color:var(--gruen)}

.trust div{position:relative;padding-left:1.1rem}
.trust div::before{content:"";position:absolute;left:0;top:.62em;width:7px;height:7px;
  border-radius:50%;background:var(--gruen)}
.trust div:nth-child(2)::before{background:var(--gold)}
.trust div:nth-child(3)::before{background:var(--gruen-h)}

.schritt .n{display:inline-grid;place-items:center;width:2.6rem;height:2.6rem;font-size:1.05rem;
  border-radius:50%;background:var(--gruen);color:var(--papier);margin-bottom:1rem}
.g4 .schritt:nth-child(2) .n{background:var(--gold)}
.g4 .schritt:nth-child(4) .n{background:var(--gruen-h)}

.karte{position:relative;overflow:hidden}
.karte::before{content:"";position:absolute;inset:0 0 auto 0;height:3px;background:var(--gruen)}
.g2 .karte:nth-child(2)::before{background:var(--gold)}


.liste .k{color:var(--gruen)}
.g2 .karte:nth-child(2) .liste .k{color:var(--gold-d)}

.faq summary::after{color:var(--gruen)}
.faq details[open] summary{color:var(--gruen)}

.person{padding-left:1.2rem;border-left:2px solid var(--gold)}
.g3 .person:nth-child(2){border-left-color:var(--gruen)}
.g3 .person:nth-child(3){border-left-color:var(--gruen-h)}

.btn-g{background:var(--gruen)}
.btn-g:hover{background:var(--gruen-h)}
.band{background:var(--gruen)}
.band h2 em{color:#e8c98d}
.band p{color:rgba(255,253,249,.78)}
.krow .ic{color:var(--gruen)}
.kbox{background:var(--blush);border-color:rgba(168,137,78,.3)}
h1 em,h2 em{color:var(--gruen)}
.hero h1 em{color:var(--gold)}
.rule{background:linear-gradient(90deg,var(--gold),var(--gruen))}

/* --- Tiefe & Bildwelt --- */
.hero{position:relative;overflow:hidden}
.hero::before{content:"";position:absolute;right:-14%;top:-28%;width:70%;aspect-ratio:1;
  border-radius:50%;pointer-events:none;
  background:radial-gradient(circle,rgba(30,74,69,.13),rgba(168,137,78,.10) 45%,transparent 68%)}
/* minmax(0,...) ist Pflicht: ein blankes "fr" hat als Minimum die INHALTSBREITE.
   Das Karussell-Band ist als max-content ueber 2000px breit und sprengte damit
   die Spalte, bis die Ueberschrift links auf vier Zeilen gequetscht war. */
.hero .wrap{position:relative;z-index:2;display:grid;
  grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);
  gap:clamp(2rem,5vw,4.5rem);align-items:center}
.hero .wrap>*{min-width:0}
.hero h1{max-width:none}
@media(max-width:980px){.hero .wrap{grid-template-columns:1fr}}

/* Eintritt des Stapels: drei Ebenen, leicht versetzt. Eine Bewegung, kein Dauerloop. */
 /* ---- Hero-Karussell: die drei ECHTEN Kundenseiten laufen durch. ----
   Frueher wechselte alle 5 Sekunden ein Bild - das sah praktisch niemand.
   Jetzt faehrt das Band dauerhaft, jede Karte ist jederzeit anklickbar und
   fuehrt auf die echte Kundenseite. Beim Ueberfahren haelt es an, damit man
   ein bewegtes Ziel bequem treffen kann. */
.showcase{position:relative;--kw:clamp(230px,26vw,400px);--kg:18px;
  /* Container-Anfrage: die Kartenbreite richtet sich nach dem BAND, nicht nach
     dem Bildschirm. Vorher war eine Karte je nach Breite bis zu 400px breit,
     das Band aber nur 498px - dann sah man 1,19 Karten, und die eine wirkte
     angeschnitten statt durchlaufend. */
  container-type:inline-size}
.sc-band{overflow:hidden}
/* KEINE Randmaske: ein weicher Verlauf laesst die Karten zum Rand hin durchsichtig
   werden, also weiss ausbleichen, und schneidet sie sichtbar vor der Kante ab.
   Sauberer ist die harte Kante von overflow:hidden. */
.sc-track{display:flex;width:max-content;
  animation:scFahrt var(--dauer,9s) linear infinite}
/* Die Strecke ist die Breite EINES Satzes, in Pixeln, vom Skript gemessen.
   Vorher stand hier -50%. Eine Prozentangabe haengt an der impliziten
   max-content-Breite des Bandes, und genau daran ist es auf dem iPhone
   auseinandergefallen: das Band lief sekundenlang komplett leer.
   Der Rueckfall 50% gilt nur, falls das Skript nicht laeuft.
   will-change ist bewusst RAUS: es presst das ganze Band in eine einzige
   Ebene, und die war auf einem 3x-Handy ueber 5600 Pixel breit. */
@keyframes scFahrt{from{transform:translate3d(0,0,0)}
  to{transform:translate3d(calc(-1 * var(--satz,50%)),0,0)}}
.showcase:hover .sc-track,
.showcase:focus-within .sc-track,
.showcase:active .sc-track{animation-play-state:paused}

.sc-karte{flex:0 0 var(--kw);margin-right:var(--kg);display:block;text-decoration:none;
  border-radius:8px;overflow:hidden;border:1px solid var(--linie);background:var(--karte);
  box-shadow:0 18px 44px rgba(22,22,26,.14);
  transition:transform .25s var(--aus),box-shadow .25s var(--aus),border-color .2s ease}
@media(hover:hover) and (pointer:fine){
  .sc-karte:hover{transform:translateY(-4px);border-color:var(--gold);
    box-shadow:0 26px 60px rgba(22,22,26,.22)}
}
.sc-karte:active{transform:scale(.985)}
/* Zweite Angabe: wo Container-Anfragen gehen, gilt sie und macht immer knapp
   ZWEI Karten sichtbar. Aeltere Browser kennen die Einheit cqw nicht und
   verwerfen die Zeile - dort bleibt der Rueckfall oben stehen. */
.sc-karte{flex-basis:clamp(210px,55cqw,400px)}
.sc-karte img{display:block;width:100%;height:auto;aspect-ratio:900/562;object-fit:cover}
.sc-tafel{display:flex;align-items:baseline;justify-content:space-between;gap:.6rem;
  padding:.7rem .9rem .8rem;font-family:var(--disp);font-size:.98rem;color:var(--ink)}
.sc-tafel i{font-style:normal;font-family:var(--body);font-size:.72rem;letter-spacing:.14em;
  text-transform:uppercase;font-weight:700;color:var(--gold-dd);flex:none}
.sc-hinweis{margin-top:.9rem;font-size:.84rem;color:var(--mut)}

@media(prefers-reduced-motion:reduce){
  /* Kein Selbstlauf: der Besucher schiebt selbst, die Karten rasten ein. */
  .sc-track{animation:none}
  .sc-band{overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch}
  .sc-karte{scroll-snap-align:start}
  .sc-kopie{display:none}
  /* Weg steht fertig da, statt sich beim Scrollen aufzubauen */
  .w-maske{clip-path:inset(0 0 0 0);animation:none;transition:none}
  .weg-schritte .punkt{transition:none}
}

/* Auf dem Handy laeuft das Band randlos ueber die ganze Breite. Das frueher
   ausgeblendete Einzelbild wirkte gequetscht - ein waagerechter Streifen hat
   dieses Platzproblem nicht und zeigt gleich mehrere Seiten an. */
@media(max-width:980px){
  .showcase{--kw:min(74vw,300px);--kg:14px;margin-top:2.4rem}
  .sc-karte{flex-basis:var(--kw)}   /* schlaegt die cqw-Angabe von oben */
  /* randlos: aus dem 90vw-Rahmen ausbrechen, ohne die Seite scrollbar zu machen */
  .sc-band{width:100vw;margin-inline:calc(50% - 50vw);
    /* Auf dem Handy KEIN Dauerlauf: der native Wischstreifen. Gruende:
       (a) ein durchlaufendes Band ist auf 5600 Geraetepixeln Breite eine
           einzige riesige Ebene, die iOS stellenweise leer laesst - im
           Bildschirmvideo vom 25.07. belegt;
       (b) eine fahrende Karte auf dem Handy zu treffen ist Gluecksache.
       Ein sanfter Selbstlauf schiebt alle paar Sekunden eine Karte weiter,
       jede Beruehrung haelt ihn an. */
    overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none;
    /* mandatory, NICHT proximity: bei proximity darf man frei stehenbleiben, also
       auch halb im Nichts hinter der letzten Karte. Damit das mit mandatory
       aufgeht, rastet die LETZTE Karte am Ende statt am Anfang ein - ihr
       Anfangs-Einrastpunkt laege sonst hinter dem groessten Scrollwert. */
    scroll-snap-type:x mandatory;
    scroll-padding-left:5vw;scroll-padding-right:5vw;
    overscroll-behavior-x:contain}
  .sc-band::-webkit-scrollbar{display:none}
  .sc-track{padding:0 5vw 0 5vw;animation:none}
  .sc-karte{scroll-snap-align:start}
  /* Kein toter Raum am Ende: die dritte Karte traegt keinen rechten Abstand mehr,
     dann schliesst der Streifen mit denselben 5vw ab, mit denen er anfaengt.
     ⚠️ NICHT :last-child - das trifft die versteckte sechste Kopie, nicht die
     letzte SICHTBARE Karte (display:none zaehlt fuer :last-child mit). */
  .sc-karte:nth-child(3){scroll-snap-align:end;margin-right:0}
  .sc-kopie{display:none}          /* ohne Dauerlauf braucht es keine Kopien */
  .sc-hinweis{margin-top:.8rem}
}

/* Belegt-Leiste: die drei ECHTEN ausgelieferten Seiten statt erfundener Kennzahlen.
   Ein Klick darauf ist der Beleg; eine Zahl waere nur eine Behauptung. */
.belegt{background:var(--gruen);color:var(--papier);padding:clamp(2rem,4vw,2.8rem) 0}
.belegt .wrap{display:grid;grid-template-columns:minmax(0,auto) minmax(0,1fr);
  gap:1.6rem clamp(2rem,5vw,4rem);align-items:center}
@media(max-width:820px){.belegt .wrap{grid-template-columns:minmax(0,1fr)}}
.bl-h{font-family:var(--disp);font-size:clamp(1.35rem,2.6vw,1.85rem);line-height:1.28}
.bl-h b{color:#e8c98d;font-weight:400}
.bl-r{list-style:none;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,190px),1fr));
  gap:.5rem 1.6rem;margin:0;padding:0}
.bl-r li{position:relative;padding-left:1.15rem;font-size:.93rem;
  color:rgba(255,253,249,.86)}
.bl-r li::before{content:"";position:absolute;left:0;top:.62em;width:7px;height:7px;
  border-radius:50%;background:#e8c98d}

/* --- Beruehrflaechen: alles, was kein Link im Fliesstext ist, bekommt 44px.
   Gemessen waren der Burger 32x32 (die Hauptbedienung am Handy), zehn
   Fusszeilen-Links mit 17px Hoehe und die Beispiel-Kacheln mit 43px. --- */
/* ⚠ Diese Regel darf das display NICHT setzen. Sie stand vorher auf
   display:inline-flex und hat damit das display:none aus Zeile 62
   ueberstimmt: der Burger war LIVE auch am Schreibtisch sichtbar.
   Die Groesse ja, das Ein- und Ausblenden macht weiter der Media-Query. */
.burger{min-width:44px;min-height:44px;align-items:center;
  justify-content:center;padding:0}
/* ⚠ Ebenso: inline-flex macht aus den Textstuecken des Logos Flex-Elemente,
   und der Zwischenraum zwischen </b> und <b> faellt weg. Live stand dort
   "M&HAI Solutions" statt "M&H AI Solutions" - der eigene Firmenname.
   inline-block gibt die 44px, laesst aber normalen Textfluss. */
.logo{display:inline-block;min-height:44px;line-height:44px}
footer ul a,footer .fbot a,.krow a,.bsp a{
  display:inline-flex;align-items:center;min-height:44px}
footer ul li{margin:0}
.bsp a{padding-block:.72rem}
.form button[type="submit"]{min-height:44px}
#f .btn{min-height:44px}

/* mehr Plastizität */
.karte{box-shadow:0 2px 10px rgba(22,22,26,.05),0 18px 40px rgba(22,22,26,.05)}
.kbox{box-shadow:0 16px 40px rgba(22,22,26,.05)}
.angebot{box-shadow:0 10px 26px rgba(168,137,78,.14)}
.trust{gap:2rem}

/* --- Nachgezogen beim Bau der Unterseiten (26.07.2026) --- */

/* ⚠ .ey stand auf --gold-d. Auf Papier sind das 4,68:1, auf der Creme-Flaeche
   aber nur 4,33 und auf Sand 4,04. Die Beischrift steht auf allen dreien.
   --gold-dd haelt ueberall: 5,76 / 5,33 / 4,98. */
.ey{color:var(--gold-dd)}

/* ⚠ Im gruenen Band war .btn-o dunkle Schrift auf dunklem Gruen: 1,82:1.
   Auf dieser Flaeche gehoert die helle Fassung hin, 9,75:1. */
.band .btn-o{background:transparent;color:var(--papier);
  box-shadow:inset 0 0 0 1px rgba(255,253,249,.45)}
@media(hover:hover) and (pointer:fine){
  .band .btn-o:hover{background:rgba(255,253,249,.1);color:var(--papier);
    box-shadow:inset 0 0 0 1px var(--papier)}
}

/* Weiterlinks im Fliesstext einer Sektion: 44px Beruehrflaeche wie ueberall. */
.weiter{display:inline-flex;align-items:center;min-height:44px;
  color:var(--gold-dd);font-weight:600;text-decoration:none}
@media(hover:hover) and (pointer:fine){.weiter:hover{text-decoration:underline}}

/* Beischrift neben einer Ueberschrift ("Bodrum Kebab-Haus  IMBISS IN LESUM").
   ⚠ Auf dem Handy MUSS sie auf eine eigene Zeile: bricht die Ueberschrift um,
   landet die Beischrift sonst neben dem letzten Wort und liest sich, als
   gehoere sie dorthin. Gemessen auf 375px. */
.bei{font-size:.7rem;letter-spacing:.2em;text-transform:uppercase;font-weight:600;
  color:var(--gold-dd);margin-left:.7rem;white-space:nowrap}
@media(max-width:640px){
  .bei{display:block;margin-left:0;margin-top:.4rem;white-space:normal}
}

/* --- Rechtstexte (Impressum, Datenschutz, 404) ---
   Uebernommen aus dem frueheren Inline-CSS dieser Seiten, aber auf die Token
   der Hauptseite gestellt. Vorher hatten sie ein eigenes Stylesheet UND eine
   eigene Kopfzeile mit anderem Logo: zwei Marken auf einer Website. */
.recht{padding-block:clamp(2.6rem,5vw,4rem) clamp(3.4rem,7vw,6rem)}
.recht h1{font-size:clamp(1.95rem,4.2vw,3rem);margin-bottom:1rem}
.recht .lead{margin-bottom:clamp(2rem,4vw,3rem)}
.recht section{margin-bottom:2.4rem}
.recht h2{font-size:1.2rem;margin:0 0 .8rem;display:flex;align-items:baseline;gap:.7rem}
.recht h2::before{content:"";display:inline-block;width:3px;height:.85em;
  background:var(--gold);flex:none;transform:translateY(.06em)}
.recht h3{font-family:var(--disp);font-size:1.02rem;font-weight:400;
  color:var(--ink);margin:1.4rem 0 .5rem}
.recht p,.recht ul{color:var(--ink2);margin-bottom:.75rem}
.recht ul{padding-left:1.4rem}
.recht ul li{margin-bottom:.35rem}
.recht p strong,.recht .field-label{color:var(--ink);font-weight:600}
/* ⚠ :not(.btn) ist Pflicht. Ohne das gewinnt diese Regel gegen .btn-p und
   faerbt die Knopfschrift gold: auf der Fehlerseite gemessen 1,69:1. */
.recht a:not(.btn){color:var(--gold-dd);text-decoration:none;
  border-bottom:1px solid rgba(168,137,78,.35)}
@media(hover:hover) and (pointer:fine){
  .recht a:not(.btn):hover{color:var(--ink);border-bottom-color:var(--ink)}
}
/* In den Angaben-Bloecken steht der Link allein in seiner Zelle, ist also
   kein Link im Fliesstext: 44px Beruehrflaeche. Gemessen waren es 21px. */
.recht .field-value a{display:inline-flex;align-items:center;min-height:44px}
.recht code{font-family:ui-monospace,SFMono-Regular,Consolas,monospace;font-size:.9em;
  background:var(--creme);border:1px solid var(--linie);border-radius:4px;padding:.1em .4em}
.recht .info-block{background:var(--karte);border:1px solid var(--linie);
  border-radius:var(--rad);padding:1.4rem 1.6rem;margin-bottom:1.4rem}
.recht .info-block .row{display:grid;grid-template-columns:minmax(0,10rem) minmax(0,1fr);
  gap:.3rem 1.4rem;padding:.4rem 0}
.recht .info-block .row .field-label{color:var(--mut);font-size:.92rem}
.recht .info-block .row .field-value{color:var(--ink)}
@media(max-width:600px){
  .recht .info-block .row{grid-template-columns:1fr;gap:.1rem}
}

/* ══════════════════════════════════════════════════════════════════════════
   FEINSCHLIFF (01.08.)
   Alles hier haengt an `html[data-fein]`, gesetzt von feinschliff.js. Ohne
   Skript und bei reduzierter Bewegung greift KEINE dieser Regeln — die Seite
   sieht dann aus wie zuvor. Das ist Absicht: ein Effekt, dessen Ruhezustand
   "unsichtbar" ist, macht im Fehlerfall die Seite leer, und genau das ist hier
   schon zweimal passiert.
   Der Auftritt haengt an `[data-auf]`, das ein EIGENER Beobachter setzt — nicht
   an `.reveal`. Begruendung steht in feinschliff.js: auf den erzeugten Seiten
   gibt es `.reveal` an den Koepfen gar nicht.
   ══════════════════════════════════════════════════════════════════════════ */

/* --- Der Abschnittskopf tritt gestaffelt ein -----------------------------
   Vorher hob und blendete sich der ganze Block als ein Stueck. Jetzt kommen
   Beischrift, Ueberschrift, Linie und Vorspann nacheinander — das ist der
   Unterschied zwischen "wird sichtbar" und "wird gesetzt". */
html[data-fein] .head.reveal { opacity: 1; transform: none; }
html[data-fein] .head > .ey,
html[data-fein] .head > .lead,
html[data-fein] .head > p:not(.ey):not(.lead) {
  opacity: 0; transform: translateY(12px);
  transition: opacity .7s var(--aus), transform .7s var(--aus);
}
html[data-fein] .head[data-auf] > .ey   { opacity: 1; transform: none; }
html[data-fein] .head[data-auf] > .lead { opacity: 1; transform: none; transition-delay: .22s; }
html[data-fein] .head[data-auf] > p:not(.ey):not(.lead) { opacity: 1; transform: none; transition-delay: .22s; }

/* --- Die Ueberschrift steigt hinter einer Maske auf ----------------------
   ⚠️ `overflow: clip` statt `hidden`: `hidden` erzeugt einen Scrollrahmen, und
      ein Ankersprung koennte darin haengen bleiben.
   ⚠️ Innenabstand plus negativer Aussenabstand als SLACK. Ohne den beschneidet
      die Maske Unterlaengen (g, j, ü) und den Ueberhang der Gold-Kursiven nach
      rechts — die <em> sind die Handschrift der Seite, die darf nichts anknabbern.
      Die Rechnung geht auf, weil der Aussenabstand denselben Betrag zurueckholt:
      das Layout bleibt auf den Pixel gleich. */
html[data-fein] .head h1, html[data-fein] .head h2, html[data-fein] .hero h1,
html[data-fein] .band .wrap > h2 {
  overflow: clip;
  padding: .12em .24em .18em; margin: -.12em -.24em -.18em;
}
html[data-fein] .zl {
  display: block;
  transform: translateY(112%);
  transition: transform 1s var(--aus);
}
html[data-fein] [data-auf] .zl { transform: none; }

/* --- Das gruene Band am Fuss jeder Seite --------------------------------
   Es traegt schon `.reveal`, hob sich also als ganzer Block. Mit der Maske auf der
   Ueberschrift waeren das zwei Bewegungen ueber derselben Flaeche. Der Block steht
   deshalb still, seine Kinder treten versetzt ein — dieselbe Regel wie beim Kopf. */
html[data-fein] .band .wrap.reveal { opacity: 1; transform: none; }
html[data-fein] .band .wrap > p,
html[data-fein] .band .wrap > .btn {
  opacity: 0; transform: translateY(12px);
  transition: opacity .7s var(--aus), transform .7s var(--aus);
}
html[data-fein] .band .wrap[data-auf] > p   { opacity: 1; transform: none; transition-delay: .18s; }
html[data-fein] .band .wrap[data-auf] > .btn { opacity: 1; transform: none; transition-delay: .28s; }

/* --- Die Trennlinie zeichnet sich ----------------------------------------
   `.rule` stand bisher fertig da. Sie zu zeichnen ist die Bewegung, die der
   Zeitstrahl im Ablauf schon macht — also die Handschrift dieser Seite und kein
   geliehener Effekt. */
html[data-fein] .head > .rule {
  transform: scaleX(0); transform-origin: 0 50%;
  transition: transform .85s var(--aus) .14s;
}
html[data-fein] .head[data-auf] > .rule { transform: scaleX(1); }

/* --- Bildschirmfotos legen sich frei, mit wandernder Goldkante -----------
   Die Arbeiten sind das staerkste Verkaufsargument der Seite; bisher kamen sie
   mit dem Block eingeblendet wie jeder Absatz. Jetzt legen sie sich von unten
   frei, und auf der Kante laeuft eine Goldlinie mit.
   ⚠️ Ruhezustand ist VOLL SICHTBAR (`clip-path` wird erst mit `data-fein`
      gesetzt), und die Kante ist ein `::after` auf dem RAHMEN — ein <img> kann
      keine Pseudo-Elemente tragen. */
.schuss { border: 1px solid var(--linie); border-radius: var(--rad);
  overflow: hidden; background: var(--creme); position: relative; }
.schuss img { width: 100%; height: auto; display: block; }
html[data-fein] .schuss img {
  clip-path: inset(100% 0 0 0);
  transition: clip-path 1.05s var(--aus);
}
html[data-fein] .schuss[data-auf] img { clip-path: inset(0 0 0 0); }
html[data-fein] .schuss[data-auf]::after {
  content: ""; position: absolute; left: 0; right: 0; height: 1px;
  pointer-events: none; z-index: 1;
  background: linear-gradient(90deg, transparent, var(--gold) 18%,
              var(--gold-d) 50%, var(--gold) 82%, transparent);
  animation: goldkante 1.05s var(--aus) both;
}
/* Die Kante ist am Anfang und am Ende WEG. Eine Linie, die oben liegen bleibt,
   liest sich als Fehler und nicht als Effekt. */
@keyframes goldkante {
  0%   { top: 100%; opacity: 0; }
  14%  { opacity: 1; }
  86%  { opacity: 1; }
  100% { top: 0;    opacity: 0; }
}

/* --- Karten und Kacheln unter dem Zeiger ---------------------------------
   ⚠️ Alles in `(hover: hover) and (pointer: fine)`. Am Handy aendert sich damit
      keine einzige Regel.
   ⚠️ KEIN `display` in diesen Regeln. Eine 44-px-Korrektur mit `display` hat auf
      genau dieser Seite schon einmal den Burger sichtbar gemacht und das
      Leerzeichen im eigenen Firmennamen verschluckt ("M&HAI Solutions").
   ⚠️ `.karte::before` ist belegt (der farbige Balken oben), deshalb `::after`. */
@media (hover: hover) and (pointer: fine) {
  html[data-fein] .karte {
    transition: transform .38s var(--aus), box-shadow .38s var(--aus),
                border-color .38s var(--aus);
  }
  html[data-fein] .karte:hover {
    transform: translateY(-5px); border-color: var(--gold);
    box-shadow: 0 3px 12px rgba(22,22,26,.06), 0 24px 50px rgba(22,22,26,.09);
  }
  html[data-fein] .stat, html[data-fein] .bsp a, html[data-fein] .person {
    transition: transform .32s var(--aus), border-color .32s var(--aus);
  }
  html[data-fein] .stat:hover, html[data-fein] .bsp a:hover { transform: translateY(-3px); }
  html[data-fein] .stat:hover .dom i { transform: translateX(5px); }
  html[data-fein] .schuss { transition: border-color .38s var(--aus); }
  html[data-fein] a:hover > .schuss { border-color: var(--gold); }
}

/* ⚠️ Doppelter Boden: das Skript schaltet bei reduzierter Bewegung schon gar
   nicht ein. Sollte `data-fein` trotzdem gesetzt sein (Einstellung wechselt
   waehrend der Sitzung), steht hier alles sofort an seinem Platz. */
@media (prefers-reduced-motion: reduce) {
  html[data-fein] .zl,
  html[data-fein] .head > .ey,
  html[data-fein] .head > .lead,
  html[data-fein] .head > .rule,
  html[data-fein] .head > p,
  html[data-fein] .band .wrap > p,
  html[data-fein] .band .wrap > .btn { transform: none; opacity: 1; transition: none; }
  html[data-fein] .schuss img { clip-path: none; transition: none; }
  html[data-fein] .schuss[data-auf]::after { animation: none; opacity: 0; }
}