/* =====================================================================
   gewerk.css - Stildatei der neuen Gewerkseiten (seit bodenbelaege.html, 09.10.2026)
   ---------------------------------------------------------------------
   Laedt NACH stil.css. Bewusst eine eigene Datei: stil.css bleibt
   unangetastet (eine Aenderung dort erzwingt auf allen Seiten eine
   neue Versionskennung), landing.css und pv/pv.css werden NICHT
   geladen - was von dort gebraucht wird (.huepf, .bleib, .mv, .anim,
   .btn-sonne), steht hier als Kopie mit eigenem Praefix gk-.

   Regeln fuer alle Effekte in dieser Datei:
   - Startzustaende nur unter .js (ohne JavaScript steht der Endzustand)
   - prefers-reduced-motion schaltet alles ab (Block am Ende)
   - nur transform, opacity und CSS-Variablen werden animiert
   - Raster- und Flex-Kinder haben min-width:0

   Farben und Schriften kommen aus den Variablen von stil.css; nur die
   Goldtoene fuer Versprechen-Kasten und Maßband sind hier definiert.
   ===================================================================== */
:root{
  --sonne:#E8A33D;
  --sonne-dk:#C9821B;
  --gk-band:#F5ECD2;          /* Maßband-Papier */
  --gk-band-rand:#D9C99A;
  --gk-klebe:112px;           /* Abstand unter der klebenden Kopfzeile fuer sticky-Elemente */
}

/* ---- Brotkrumen ---- */
.gk-krumen{list-style:none;margin:0 0 22px;padding:0;display:flex;flex-wrap:wrap;gap:4px 8px;
  font-size:.78rem;color:var(--muted)}
.gk-krumen li{display:inline-flex;align-items:center;gap:8px;min-width:0}
.gk-krumen li+li::before{content:"\203A";color:var(--line);font-size:1rem;line-height:1}
.gk-krumen a{color:var(--muted);text-decoration:none}
.gk-krumen a:hover{color:var(--olive);text-decoration:underline;text-underline-offset:3px}
.gk-krumen [aria-current]{color:var(--text);font-weight:500}

/* ---- Hero ----
   Nutzt .hero, .hero-grid und .hero-fig aus stil.css (Startseite). Die H1
   ist eine Problem-Ueberschrift und laenger als auf der Startseite,
   deshalb ein etwas kleinerer Schriftboden; unter 430px nochmals kleiner,
   damit sie bei 375px in drei Zeilen passt (gemessen). */
.gk-hero{padding:58px 0 78px}
.gk-hero h1{font-size:clamp(2.1rem,4.6vw,3.7rem);margin-bottom:24px;max-width:15ch}
.gk-hero .lead{font-size:1.08rem;color:#4A4A46;max-width:54ch}
.gk-hero .lead strong{color:var(--text);font-weight:600}
.gk-hero-fein{margin:18px 0 0;font-size:.86rem;color:var(--muted)}
.gk-hero-fein a{color:var(--olive);font-weight:600;text-decoration:none}
.gk-hero-fein a:hover{text-decoration:underline;text-underline-offset:3px}
@media(max-width:430px){
  .gk-hero h1{font-size:clamp(1.55rem,7vw,2.05rem);max-width:none}
}

/* =====================================================================
   Standardauftritte
   ===================================================================== */
/* .gk-auf - der ruhige Standardauftritt (Kopie von .anim aus pv/pv.css):
   schiebt sich 24px von unten herein, Geschwister leicht versetzt.
   Ausloeser: gewerk.js setzt .da (IntersectionObserver + Scroll-Messung
   + Sicherheitsnetz nach 1,5 s). Fuer alle Gewerke. Abschalten: Klasse
   weglassen. */
.js .gk-auf{opacity:0;transform:translateY(24px);
  transition:opacity .75s cubic-bezier(.22,1,.36,1),transform .85s cubic-bezier(.22,1,.36,1)}
.js .gk-auf.da{opacity:1;transform:none}
.js .gk-auf:nth-child(2){transition-delay:.08s}
.js .gk-auf:nth-child(3){transition-delay:.16s}
.js .gk-auf:nth-child(4){transition-delay:.24s}
.js .gk-auf:nth-child(5){transition-delay:.32s}
.js .gk-auf:nth-child(6){transition-delay:.4s}
/* .huepf - Hopser mit Ueberschwung fuer die grossen Ueberschriften
   (Kopie aus ablauf.css/landing.css, hier ohne Konflikt, weil landing.css
   nicht geladen wird). */
.js .huepf{opacity:0;transform:translateY(46px)}
.js .huepf.da{opacity:1;transform:none;
  transition:opacity .55s ease,transform .9s cubic-bezier(.34,1.56,.64,1)}

/* =====================================================================
   2. Schmerz: Sorgen als klebender Stapel + Effekt "Sorgen werden erledigt"
   ---------------------------------------------------------------------
   Links klebt der Fliesstext, rechts stapeln sich die Sorgen-Karten:
   Jede Karte klebt so tief, dass von der vorigen die Kopfzeile sichtbar
   bleibt (gewerk.js misst die Kopfzeilen und setzt die top-Werte).
   Zuletzt dockt die dunkle Karte "Alle drei haben dieselbe Ursache" an -
   in dem Moment zieht ein Strich durch jede Sorgen-Ueberschrift und ein
   Haken springt auf (.gk-stapel.erledigt). Ohne JavaScript: Karten
   normal untereinander, kein Strich. Fuer alle Gewerke geeignet.
   Abschalten: .gk-stapel ohne data-erledigt lassen (Skript tut dann nichts). */
.gk-sorgen-sec{overflow-x:clip}
@supports not (overflow-x:clip){.gk-sorgen-sec{overflow-x:hidden}}
.gk-sorgen{display:grid;grid-template-columns:minmax(0,.86fr) minmax(0,1.14fr);gap:40px 64px;align-items:start}
.gk-sorgen-text{position:sticky;top:100px;min-width:0}
/* Die klebende Spalte muss in den Bildschirm passen (gemessen bei 1280x800:
   752px waren zu viel) - deshalb eine kleinere H2, engere Abstaende, und auf
   flachen Bildschirmen faellt das Bild weg. */
.gk-sorgen-text h2{margin-bottom:0;font-size:clamp(1.7rem,3vw,2.5rem)}
.gk-sorgen-text .rule{margin:18px 0 22px}
.gk-sorgen-text p{color:#43433F;max-width:52ch;margin-bottom:.9em}
.gk-sorgen-text p strong{color:var(--text)}
.gk-sorgen-bild{margin:22px 0 0;position:relative;max-width:420px}
.gk-sorgen-bild img{width:100%;height:170px;object-fit:cover;object-position:center 60%;border-radius:var(--r)}
.gk-sorgen-bild figcaption{margin-top:9px;font-size:.76rem;color:var(--muted);line-height:1.5}
.gk-stapel{position:relative;display:grid;gap:18px;padding-bottom:150px}
.gk-sorge{position:sticky;top:var(--gk-klebe);min-width:0;background:#fff;border:1px solid var(--line);
  border-radius:var(--r);box-shadow:0 20px 50px rgba(16,14,24,.09);overflow:hidden}
.gk-sorge:nth-child(2){top:calc(var(--gk-klebe) + 74px)}
.gk-sorge:nth-child(3){top:calc(var(--gk-klebe) + 148px)}
.gk-sorge-kopf{display:flex;align-items:center;gap:16px;min-height:74px;padding:18px 28px;
  border-bottom:1px solid var(--line);background:#fff}
.gk-sorge-nr{flex:0 0 auto;font-family:'Montserrat',sans-serif;font-weight:800;font-size:.78rem;
  letter-spacing:.14em;color:var(--olive)}
.gk-sorge-kopf h3{position:relative;margin:0;font-size:1.02rem;line-height:1.3;min-width:0;
  transition:color .5s ease}
/* Strich je Textzeile (box-decoration-break), damit auch zweizeilige Ueberschriften auf dem
   Handy sauber durchgestrichen werden - ein ::after laege dort zwischen den Zeilen. */
.gk-strich{background:linear-gradient(var(--olive),var(--olive)) no-repeat 0 58%/0 3px;
  -webkit-box-decoration-break:clone;box-decoration-break:clone;
  transition:background-size .6s cubic-bezier(.65,0,.35,1)}
.gk-sorge-haken{flex:0 0 auto;margin-left:auto;width:30px;height:30px;border-radius:50%;
  background:var(--olive);display:grid;place-items:center;transform:scale(0);
  transition:transform .55s cubic-bezier(.34,1.56,.64,1)}
.gk-sorge-haken svg{width:16px;height:16px;fill:#fff}
.gk-sorge-body{padding:22px 28px 26px}
.gk-sorge-zitat{margin:0 0 12px;font-size:1.08rem;line-height:1.55;color:var(--text);
  font-weight:300;font-style:italic}
.gk-sorge-body p{margin:0;color:var(--muted);font-size:.93rem;line-height:1.6}
.gk-sorge-zitat:last-child{margin-bottom:0}
.gk-stapel.erledigt .gk-sorge-kopf h3{color:var(--muted)}
.gk-stapel.erledigt .gk-strich{background-size:100% 3px}
.gk-stapel.erledigt .gk-sorge-haken{transform:scale(1)}
.gk-stapel.erledigt .gk-sorge:nth-child(2) .gk-strich,.gk-stapel.erledigt .gk-sorge:nth-child(2) h3{transition-delay:.22s}
.gk-stapel.erledigt .gk-sorge:nth-child(2) .gk-sorge-haken{transition-delay:.42s}
.gk-stapel.erledigt .gk-sorge:nth-child(3) .gk-strich,.gk-stapel.erledigt .gk-sorge:nth-child(3) h3{transition-delay:.44s}
.gk-stapel.erledigt .gk-sorge:nth-child(3) .gk-sorge-haken{transition-delay:.64s}
.gk-stapel.erledigt .gk-sorge:nth-child(1) .gk-sorge-haken{transition-delay:.2s}
/* Die dunkle Karte am Ende des Stapels: der Uebergang zur Loesung */
.gk-pivot{position:sticky;top:calc(var(--gk-klebe) + 222px);position:-webkit-sticky;
  background:var(--ink);color:#fff;border-radius:var(--r);padding:36px 38px;min-width:0;
  box-shadow:0 26px 60px rgba(16,14,24,.24);overflow:hidden;isolation:isolate}
.gk-pivot::after{content:"";position:absolute;z-index:-1;right:-90px;top:-100px;width:280px;height:280px;
  border-radius:50%;background:radial-gradient(circle,rgba(116,117,70,.45),rgba(116,117,70,0) 68%)}
.gk-pivot .eyebrow{color:var(--olive-lt);margin-bottom:12px}
.gk-pivot h3{color:#fff;font-size:clamp(1.25rem,2.2vw,1.65rem);margin:0 0 14px}
.gk-pivot p{color:rgba(255,255,255,.76);font-size:.97rem;line-height:1.65;margin:0 0 22px;max-width:56ch}
.gk-pivot .btn-ghost{color:#fff;border-color:rgba(255,255,255,.45)}
.gk-pivot .btn-ghost:hover{background:#fff;color:var(--ink);border-color:#fff}
@media(min-width:901px) and (max-height:760px){
  .gk-sorgen-bild{display:none}
}
@media(max-width:900px){
  .gk-sorgen{grid-template-columns:1fr;gap:34px}
  .gk-sorgen-text{position:static}
  .gk-sorgen-bild{max-width:none}
  .gk-sorgen-bild img{height:200px}
  .gk-stapel{padding-bottom:110px}
  .gk-sorge-kopf{padding:16px 20px;min-height:66px}
  .gk-sorge-body{padding:18px 20px 22px}
  .gk-sorge-zitat{font-size:1rem}
  .gk-pivot{padding:28px 24px}
}

/* =====================================================================
   3. Loesung: Schichtaufbau (.gk-schicht) - der zweite Wow-Moment
   ---------------------------------------------------------------------
   Querschnitt eines Bodens als SVG (Estrich, Spachtelung, Trittschall,
   Belag, Sockelleiste). Beim Scrollen fahren die Schichten wie eine
   Explosionszeichnung auseinander, die Beschriftungen blenden ein, dann
   setzt sich alles wieder zum fertigen Boden zusammen. Steuerung ueber
   die Variable --p (0 = zusammen, 1 = auseinander), gesetzt von gewerk.js.
   Ab 900px klebt die Grafik waehrend 200vh Scrollweg (.gk-schicht-raum),
   darunter laeuft sie beim Vorbeiziehen auf und zu. Ohne JavaScript:
   halb geoeffnet mit Beschriftung (Erklaergrafik). Wiederverwendbar fuer
   Wandaufbau (Trockenbau), Abdichtung (Bad), Estrich, Fussbodenheizung:
   nur die <g class="gk-lage">-Gruppen im SVG tauschen. Abschalten: die
   Klasse .gk-schicht-raum weglassen, dann steht die Grafik still. */
.gk-schicht-raum{position:relative;overflow-x:clip}
@supports not (overflow-x:clip){.gk-schicht-raum{overflow-x:hidden}}
.gk-schicht-klebt{position:relative}
.gk-schicht{--p:0;display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:36px 56px;align-items:center}
.gk-schicht-bild{position:relative;min-width:0}
.gk-schicht-bild svg{display:block;width:100%;height:auto;overflow:visible}
.gk-lage{transform:translateY(calc(var(--p) * var(--i) * -38px));transition:transform .18s linear;will-change:transform}
.gk-lage-text{opacity:var(--p);transition:opacity .25s ease}
.gk-lage-text text{font-family:'Poppins',sans-serif;font-size:13px;fill:#3A3A36}
.gk-lage-text text.gk-lage-titel{font-family:'Montserrat',sans-serif;font-weight:800;font-size:12.5px;
  letter-spacing:.08em;text-transform:uppercase;fill:var(--ink)}
.gk-lage-text line{stroke:var(--olive);stroke-width:1.5;stroke-dasharray:3 4}
.gk-lage-text circle{fill:var(--olive)}
.gk-schicht-fertig{position:absolute;left:0;right:0;bottom:-6px;text-align:center;margin:0;
  font-family:'Montserrat',sans-serif;font-weight:800;font-size:.72rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--olive);opacity:0;transform:translateY(8px);
  transition:opacity .5s ease,transform .6s cubic-bezier(.22,1,.36,1)}
.gk-schicht.ende .gk-schicht-fertig{opacity:1;transform:none}
.gk-schicht-text{min-width:0}
.gk-schicht-text h3{font-size:clamp(1.3rem,2.3vw,1.8rem);margin:0 0 18px}
.gk-schicht-text p{color:#43433F;margin:0 0 16px;max-width:50ch}
.gk-schicht-text p strong{color:var(--text)}
.gk-schicht-liste{list-style:none;margin:22px 0 0;padding:0;display:grid;gap:10px}
.gk-schicht-liste li{position:relative;padding-left:26px;font-size:.92rem;color:#3A3A36;line-height:1.5}
.gk-schicht-liste li::before{content:"";position:absolute;left:0;top:.42em;width:14px;height:14px;border-radius:50%;
  background:var(--olive);
  -webkit-mask:url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M9 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z"/></svg>') center/contain no-repeat;
  mask:url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M9 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z"/></svg>') center/contain no-repeat}
.gk-eben{display:flex;flex-wrap:wrap;align-items:center;gap:12px 16px;margin:26px 0 0;padding:16px 20px;
  background:var(--olive-wash);border-radius:14px;font-size:.92rem;color:var(--olive-dk);font-weight:500}
.gk-eben span{min-width:0}
html:not(.js) .gk-schicht{--p:.55}
html:not(.js) .gk-lage-text{opacity:1}
@media(min-width:900px){
  .gk-schicht-raum{height:200vh}
  .gk-schicht-klebt{position:sticky;top:var(--nav);height:calc(100vh - var(--nav));display:flex;align-items:center}
  .gk-schicht-klebt>.wrap{width:100%}
}
@media(max-width:899px){
  .gk-schicht{grid-template-columns:1fr;gap:28px}
  .gk-schicht-bild{max-width:520px}
  .gk-lage{transform:translateY(calc(var(--p) * var(--i) * -30px))}
  .gk-lage-text text{font-size:14px}
  .gk-lage-text text.gk-lage-titel{font-size:13px}
}

/* ---- .gk-libelle - Wasserwaage, Mikro-Effekt ----
   Kleine Libelle neben einer Aussage zu Ebenheit oder Praezision. Sobald
   sie sichtbar wird (gewerk.js setzt .ein), pendelt die Blase ein und
   bleibt mittig stehen. Fuer Boden, Estrich, Fliesen, Trockenbau, Fenster.
   Abschalten: Element weglassen. Ohne JavaScript steht die Blase mittig. */
.gk-libelle{flex:0 0 auto;display:inline-block;vertical-align:middle;position:relative;width:96px;height:22px;
  border-radius:11px;border:1px solid rgba(91,92,54,.45);
  background:linear-gradient(180deg,#E3EBD0 0%,#CBD7AC 100%);
  box-shadow:inset 0 2px 3px rgba(255,255,255,.7),inset 0 -2px 3px rgba(60,70,30,.18)}
.gk-libelle::before,.gk-libelle::after{content:"";position:absolute;top:2px;bottom:2px;width:1.5px;background:rgba(60,70,30,.55)}
.gk-libelle::before{left:calc(50% - 15px)}
.gk-libelle::after{left:calc(50% + 13px)}
.gk-libelle i{position:absolute;top:3px;left:50%;width:26px;height:14px;margin-left:-13px;border-radius:7px;
  background:radial-gradient(ellipse at 35% 35%,rgba(255,255,255,.95),rgba(255,255,255,.55) 45%,rgba(255,255,255,.2) 100%);
  box-shadow:0 1px 2px rgba(60,70,30,.25);transform:translateX(0)}
.js .gk-libelle:not(.ein) i{transform:translateX(-30px)}
.js .gk-libelle.ein i{animation:gkPendel 2.4s cubic-bezier(.3,.6,.3,1) both}
@keyframes gkPendel{
  0%{transform:translateX(-30px)}
  38%{transform:translateX(11px)}
  62%{transform:translateX(-5px)}
  82%{transform:translateX(2px)}
  100%{transform:translateX(0)}
}

/* ---- Bloecke innerhalb der Loesung ---- */
.gk-block{margin-top:96px}
.gk-block-kopf{max-width:62ch;margin-bottom:38px}
.gk-block-kopf.center{margin-left:auto;margin-right:auto;text-align:center}
.gk-block-kopf h3{font-size:clamp(1.35rem,2.4vw,1.9rem);margin:0 0 14px}
.gk-block-kopf p{color:var(--muted);margin:0}

/* =====================================================================
   HAEPPCHEN-BAUSTEINE (Nachauftrag 09.10.2026)
   Grundregel: wichtige Inhalte nie als Raster aus vier oder mehr gleich-
   artigen Boxen. Stattdessen eine Abfolge - ein Haeppchen nach dem anderen,
   gross, mit Bild oder Grafik und hoechstens einem kurzen Satz plus fettem
   Kernwort. Drei Bausteine: .gk-zettel, .gk-story, .gk-tipp (dazu die
   Ablauf-Buehne weiter unten).
   ===================================================================== */

/* ---- .gk-zettel - Komplettservice als Auftragszettel ----
   Zweck: eine "alles inklusive"-Liste als Handwerker-Auftragszettel, der
   beim Hinscrollen Zeile fuer Zeile ausdruckt und abhakt; unten faellt der
   Stempel. Fuer: jede Leistungsliste (Boden, Bad, Heizung, Elektro ...).
   Bedienung: keine - Ausloeser ist gewerk.js (.druckt, drei Wege). Je Zeile
   hoechstens fuenf Woerter. Ohne JS und bei "Bewegung reduzieren" steht der
   fertige Zettel. Abschalten: Block weglassen oder .druckt im HTML setzen. */
.gk-zettel-block{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:40px 64px;align-items:center}
.gk-zettel-text h3{font-size:clamp(1.5rem,2.8vw,2.3rem);margin:0 0 14px}
.gk-zettel-text p{color:#43433F;max-width:44ch;margin:0}
.gk-zettel-text p strong{color:var(--text)}
.gk-zettel{position:relative;max-width:520px;margin:0 auto;background:#FFFDF7;color:var(--text);overflow:hidden;
  padding:34px 34px 30px;border-radius:3px 3px 12px 12px;transform:rotate(-1.2deg);
  box-shadow:0 24px 54px rgba(16,14,24,.16),0 2px 6px rgba(16,14,24,.08)}
/* Perforation: Punkte in der Seitenfarbe am oberen Rand */
.gk-zettel::before{content:"";position:absolute;left:0;right:0;top:-1px;height:16px;
  background:radial-gradient(circle at 10px 6px,#fff 4.5px,transparent 5px) 0 0/20px 16px repeat-x}
.gk-zettel-kopf{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:6px 16px;
  padding:0 0 14px;border-bottom:2px solid var(--ink);margin-bottom:6px}
.gk-zettel-kopf b{font-family:'Montserrat',sans-serif;font-weight:800;text-transform:uppercase;letter-spacing:.06em;font-size:1rem}
.gk-zettel-kopf span{font-size:.78rem;color:var(--muted)}
.gk-zettel-zeilen{list-style:none;margin:0;padding:0}
.gk-zettel-zeilen li{display:flex;align-items:center;gap:14px;min-height:46px;padding:6px 0;
  border-bottom:1px dashed rgba(116,117,70,.35)}
.gk-zettel-box{flex:0 0 auto;width:22px;height:22px;border:2px solid var(--olive);border-radius:5px;display:grid;place-items:center;background:#fff}
.gk-zettel-box svg{width:17px;height:17px;fill:none;stroke:var(--olive-dk);stroke-width:3.2;stroke-linecap:round;stroke-linejoin:round;
  stroke-dasharray:24;stroke-dashoffset:0}
.gk-zettel-wort{font-family:'Montserrat',sans-serif;font-weight:700;font-size:1rem;letter-spacing:-.01em;line-height:1.3;min-width:0}
.gk-zettel-fuss{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px 18px;margin-top:22px}
.gk-zettel-datum{font-size:.78rem;color:var(--muted)}
.gk-stempel{display:inline-block;font-family:'Montserrat',sans-serif;font-weight:800;text-transform:uppercase;letter-spacing:.14em;
  font-size:.92rem;color:var(--olive-dk);border:3px solid var(--olive-dk);border-radius:8px;padding:9px 14px;
  transform:rotate(-8deg);box-shadow:inset 0 0 0 2px #FFFDF7,inset 0 0 0 3px rgba(91,92,54,.45)}
.js .gk-zettel:not(.druckt) .gk-zettel-wort{clip-path:inset(0 100% 0 0)}
.js .gk-zettel:not(.druckt) .gk-zettel-box svg{stroke-dashoffset:24}
.js .gk-zettel:not(.druckt) .gk-stempel{opacity:0;transform:rotate(-8deg) scale(1.9)}
.js .gk-zettel.druckt .gk-zettel-wort{clip-path:inset(0 0 0 0);transition:clip-path .55s steps(14,end);transition-delay:calc(.2s + var(--i) * .42s)}
.js .gk-zettel.druckt .gk-zettel-box svg{stroke-dashoffset:0;transition:stroke-dashoffset .35s ease;transition-delay:calc(.7s + var(--i) * .42s)}
.js .gk-zettel.druckt .gk-stempel{opacity:1;transform:rotate(-8deg) scale(1);
  transition:transform .42s cubic-bezier(.2,1.5,.4,1) 3.15s,opacity .2s ease 3.15s}
@media(max-width:900px){
  .gk-zettel-block{grid-template-columns:1fr;gap:30px}
  .gk-zettel{padding:28px 22px 26px;transform:rotate(-.8deg)}
  .gk-zettel-wort{font-size:.94rem}
}

/* ---- .gk-story - Story-Karten (eine Karte zur Zeit) ----
   Zweck: Gruppen oder Varianten (Belaege, Fliesenarten, Heizsysteme,
   Fenstertypen) als Abfolge wie eine Instagram-Story: Fortschrittsbalken,
   grosses Bild oder Skizze, Name, "Passt, wenn" / "Lieber nicht, wenn".
   Bedienung: Wischen (scroll-snap), Tippen auf rechte/linke Haelfte der
   aktiven Karte, Pfeil-Knoepfe, Pfeiltasten (Spur hat tabindex), Status per
   aria-live. Kein Auto-Weiterlaufen; ein einmaliger Schubser (gewerk.js).
   Desktop: grosse Karte mittig, Nachbarn angeschnitten. Die Spur ist der
   EINZIGE scrollende Behaelter - die Seite selbst wird nie breiter.
   Ohne JS: alle Karten untereinander. Abschalten: Block weglassen. */
.gk-story{--kb:520px;position:relative;margin:0 auto;max-width:1100px}
.gk-story-balken{display:flex;gap:6px;max-width:var(--kb);margin:0 auto 18px}
.gk-story-balken i{flex:1;height:4px;border-radius:2px;background:var(--line);position:relative;overflow:hidden}
.gk-story-balken i::after{content:"";position:absolute;inset:0;background:var(--olive);transform:scaleX(0);
  transform-origin:left center;transition:transform .5s cubic-bezier(.22,1,.36,1)}
.gk-story-balken i.voll::after{transform:scaleX(1)}
.gk-story-buehne{position:relative}
.gk-story-spur{display:flex;gap:22px;overflow-x:auto;overflow-y:hidden;overscroll-behavior-x:contain;
  scroll-snap-type:x mandatory;padding:12px calc(50% - var(--kb) / 2) 26px;
  scrollbar-width:none;-webkit-overflow-scrolling:touch}
.gk-story-spur::-webkit-scrollbar{display:none}
.gk-story-spur:focus-visible{outline:3px solid var(--olive);outline-offset:2px;border-radius:24px}
.gk-story-karte{flex:0 0 var(--kb);width:var(--kb);min-width:0;scroll-snap-align:center;scroll-snap-stop:always;
  background:#fff;border:1px solid var(--line);border-radius:22px;overflow:hidden;cursor:pointer;
  box-shadow:0 18px 44px rgba(16,14,24,.08);transform:scale(.94);opacity:.55;
  transition:transform .5s cubic-bezier(.22,1,.36,1),opacity .4s ease,box-shadow .4s ease;
  -webkit-user-select:none;user-select:none}
.gk-story-karte.aktiv{transform:scale(1);opacity:1;box-shadow:0 26px 60px rgba(16,14,24,.14);cursor:default}
.gk-story-bild{position:relative;height:300px;background:var(--paper)}
.gk-story-bild img,.gk-story-bild svg{width:100%;height:100%;object-fit:cover;display:block}
.gk-skizze-marke{position:absolute;right:14px;top:14px;background:rgba(16,14,24,.72);color:#fff;border-radius:999px;
  padding:6px 11px;font-family:'Montserrat',sans-serif;font-weight:700;font-size:.6rem;letter-spacing:.1em;text-transform:uppercase;line-height:1}
.gk-story-body{padding:24px 28px 28px}
.gk-story-kat{display:inline-block;font-family:'Montserrat',sans-serif;font-weight:800;font-size:.62rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--olive);margin-bottom:10px}
.gk-story-kat.leise{color:var(--muted)}
.gk-story-body h4{font-size:clamp(1.3rem,2.2vw,1.7rem);text-transform:none;letter-spacing:-.025em;margin:0 0 14px}
.gk-story-ja,.gk-story-nein{position:relative;margin:0 0 10px;padding-left:30px;font-size:.98rem;line-height:1.5;color:#3A3A36;
  -webkit-hyphens:auto;hyphens:auto}
.gk-story-nein{margin-bottom:0}
.gk-story-ja b{color:var(--olive-dk)}
.gk-story-nein b{color:#9A5B33}
.gk-story-ja::before,.gk-story-nein::before{content:"";position:absolute;left:0;top:.15em;width:20px;height:20px;border-radius:50%;
  -webkit-mask:url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M9 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z"/></svg>') center/14px no-repeat;
  mask:url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M9 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z"/></svg>') center/14px no-repeat;
  background:var(--olive)}
.gk-story-nein::before{background:#9A5B33;
  -webkit-mask:url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M18.3 5.7 12 12l6.3 6.3-1.4 1.4L10.6 13.4 4.3 19.7 2.9 18.3 9.2 12 2.9 5.7l1.4-1.4 6.3 6.3 6.3-6.3z"/></svg>') center/12px no-repeat;
  mask:url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M18.3 5.7 12 12l6.3 6.3-1.4 1.4L10.6 13.4 4.3 19.7 2.9 18.3 9.2 12 2.9 5.7l1.4-1.4 6.3 6.3 6.3-6.3z"/></svg>') center/12px no-repeat}
.gk-story-ja::before{background:var(--olive-wash)}
.gk-story-ja::after,.gk-story-nein::after{content:"";position:absolute;left:0;top:.15em;width:20px;height:20px;border-radius:50%;
  background:var(--olive);z-index:-1}
.gk-story-nein::after{background:#F3E7DD}
.gk-story-ja::before{background:#fff}
.gk-story-nein::before{background:#9A5B33}
.gk-story-nein a{color:var(--olive);font-weight:600}
.gk-story-pfeil{position:absolute;top:50%;z-index:3;width:48px;height:48px;margin-top:-24px;border-radius:50%;
  border:1px solid var(--line);background:#fff;cursor:pointer;display:grid;place-items:center;padding:0;
  box-shadow:0 10px 26px rgba(16,14,24,.14);transition:transform .25s,background .25s,opacity .25s}
.gk-story-pfeil svg{width:22px;height:22px;fill:var(--ink);transition:fill .25s}
.gk-story-pfeil.zurueck{left:calc(50% - var(--kb) / 2 - 26px)}
.gk-story-pfeil.weiter{right:calc(50% - var(--kb) / 2 - 26px)}
.gk-story-pfeil:hover{background:var(--olive);transform:scale(1.06)}
.gk-story-pfeil:hover svg{fill:#fff}
.gk-story-pfeil:disabled{opacity:.3;cursor:default;transform:none;background:#fff}
.gk-story-pfeil:disabled svg{fill:var(--ink)}
.gk-story-pfeil:focus-visible{outline:3px solid var(--olive);outline-offset:3px}
.gk-story-stand{margin:4px 0 0;text-align:center;font-family:'Montserrat',sans-serif;font-weight:700;font-size:.7rem;
  letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
html:not(.js) .gk-story-spur{display:grid;grid-template-columns:1fr;gap:20px;overflow:visible;padding:0;scroll-snap-type:none}
html:not(.js) .gk-story-karte{width:auto;flex:none;transform:none;opacity:1;cursor:default}
html:not(.js) .gk-story-pfeil,html:not(.js) .gk-story-balken,html:not(.js) .gk-story-stand{display:none}
@media(max-width:1100px){.gk-story{--kb:460px}}
@media(max-width:640px){
  .gk-story{--kb:min(84vw,360px)}
  .gk-story-bild{height:220px}
  .gk-story-body{padding:20px 20px 24px}
  .gk-story-body h4{font-size:1.25rem}
  .gk-story-ja,.gk-story-nein{font-size:.92rem}
  /* Pfeile unter den Karten statt am Rand - am Rand laegen sie auf den Nachbarkarten */
  .gk-story-buehne{display:grid;grid-template-columns:1fr 1fr;column-gap:14px}
  .gk-story-spur{grid-column:1/-1;grid-row:1;padding-bottom:18px}
  .gk-story-pfeil{position:static;margin:0;width:44px;height:44px}
  .gk-story-pfeil.zurueck{grid-row:2;grid-column:1;justify-self:end}
  .gk-story-pfeil.weiter{grid-row:2;grid-column:2;justify-self:start}
  .gk-story-stand{margin-top:12px}
}

/* ---- .gk-tipp - Antippen statt lesen ----
   Zweck: eine Entscheidungsfrage ("Welcher Boden passt zu mir?") als drei
   bis vier Chips; ein Tipp zeigt die Antwort als Chat-Blase mit Tipp-
   Indikator. Fuer: jede "was passt zu mir"-Frage (Heizung, Fenster, Bad).
   Bedienung: Chips sind Buttons mit aria-pressed, Blase hat aria-live;
   Einzelauswahl. Ohne JS: alle Antworten untereinander mit Stichwort.
   Abschalten: Block weglassen. */
.gk-tipp-block .gk-block-kopf{margin-bottom:24px}
.gk-tipp{max-width:720px}
/* Desktop: Kopf links, Chips + Blase rechts - sonst bleibt die rechte Haelfte leer. */
@media (min-width:900px){
  .gk-tipp-block{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:0 56px;align-items:start}
  .gk-tipp-block .gk-block-kopf{margin-bottom:0;padding-top:6px}
  .gk-tipp-block .gk-tipp{max-width:none;min-width:0}
}
.gk-tipp-chips{display:flex;flex-wrap:wrap;gap:10px;margin:0 0 18px}
.gk-chip{-webkit-appearance:none;appearance:none;border:1px solid var(--line);background:#fff;color:var(--text);
  border-radius:999px;padding:12px 18px;font-family:'Poppins',sans-serif;font-size:.92rem;font-weight:500;cursor:pointer;
  transition:background .2s,border-color .2s,color .2s,transform .2s}
.gk-chip:hover{border-color:var(--olive);transform:translateY(-1px)}
.gk-chip[aria-pressed="true"]{background:var(--olive);border-color:var(--olive);color:#fff}
.gk-chip:focus-visible{outline:3px solid var(--olive);outline-offset:3px}
.gk-tipp-blase{position:relative;background:var(--olive-wash);border-radius:4px 22px 22px 22px;padding:20px 24px;
  min-height:86px;max-width:620px;display:flex;align-items:center}
.gk-tipp-blase::before{content:"";position:absolute;left:-9px;top:0;border:9px solid transparent;
  border-top-color:var(--olive-wash);border-right-color:var(--olive-wash)}
.gk-tipp-punkte{display:none;gap:7px;align-items:center;height:24px}
.gk-tipp-punkte i{width:9px;height:9px;border-radius:50%;background:var(--olive);opacity:.35;animation:gkTippen 1s ease-in-out infinite}
.gk-tipp-punkte i:nth-child(2){animation-delay:.15s}
.gk-tipp-punkte i:nth-child(3){animation-delay:.3s}
@keyframes gkTippen{0%,100%{opacity:.35;transform:translateY(0)}50%{opacity:1;transform:translateY(-4px)}}
.gk-tipp-blase.tippt .gk-tipp-punkte{display:flex}
.gk-tipp-blase.tippt .gk-tipp-antworten{display:none}
.gk-tipp-antworten{min-width:0}
.gk-tipp-antwort{margin:0;font-size:1.02rem;line-height:1.6;color:#3A3A36}
.gk-tipp-antwort b{color:var(--text);font-weight:700}
.js .gk-tipp-antwort{display:none}
.js .gk-tipp-antwort.an{display:block;animation:gkBlaseAuf .35s cubic-bezier(.22,1,.36,1) both}
@keyframes gkBlaseAuf{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
html:not(.js) .gk-tipp-chips{display:none}
html:not(.js) .gk-tipp-blase{display:block}
html:not(.js) .gk-tipp-antwort{display:block;padding:10px 0;border-top:1px solid rgba(116,117,70,.2)}
html:not(.js) .gk-tipp-antwort[data-fuer="start"]{display:none}
html:not(.js) .gk-tipp-antwort::before{content:attr(data-label) ": ";font-weight:700;color:var(--olive-dk)}
.gk-tipp-fein{margin:16px 0 0;font-size:.86rem;color:var(--muted);max-width:60ch;line-height:1.6}
.gk-tipp-fein strong{color:var(--text)}

/* ---- .gk-glanz - Lichtkante (Desktop, Mauszeiger) ----
   Karten bekommen einen weichen, warmen Lichtfleck, der dem Mauszeiger
   folgt (gewerk.js setzt --mx/--my in Prozent). Nur bei echter Maus
   (hover + pointer:fine), auf dem Handy passiert nichts. Fuer alle
   Kartenraster aller Gewerke. Abschalten: Klasse weglassen. */
.gk-glanz{position:relative;overflow:hidden}
.gk-glanz::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;opacity:0;
  background:radial-gradient(240px circle at var(--mx,50%) var(--my,50%),rgba(232,163,61,.22),rgba(232,163,61,0) 65%);
  transition:opacity .35s ease}
.gk-glanz>*{position:relative;z-index:1}
@media(hover:hover) and (pointer:fine){
  .gk-glanz:hover::before{opacity:1}
}

/* ---- Ausstellung + .gk-faecher (Musterfaecher) ----
   Fuenf Muster liegen gestapelt und faechern sich beim Hinscrollen auf wie
   ein Musterfaecher im Fachhandel (gewerk.js setzt .auf); Hover hebt ein
   Muster an. Winkel je Karte ueber --r am Element. Fuer Boden-Dekore,
   Fliesen, Wandfarben, Tuerdekore. Ohne JavaScript: aufgefaechert.
   Abschalten: .gk-faecher weglassen oder Karten normal rastern. */
.gk-ausstellung-sec{overflow-x:clip}
@supports not (overflow-x:clip){.gk-ausstellung-sec{overflow-x:hidden}}
.gk-ausstellung{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:40px 64px;align-items:center}
.gk-faecher{position:relative;height:330px;max-width:460px;margin:0 auto;min-width:0}
.gk-muster{position:absolute;left:50%;bottom:28px;width:160px;height:214px;margin-left:-80px;
  border-radius:12px;overflow:hidden;background:var(--paper);
  box-shadow:0 14px 34px rgba(16,14,24,.18),0 0 0 1px rgba(16,14,24,.06);
  transform-origin:50% 118%;transform:rotate(var(--r));
  transition:transform .9s cubic-bezier(.22,1,.36,1),box-shadow .35s ease;
  transition-delay:calc(var(--i) * .07s)}
.gk-muster img{width:100%;height:100%;object-fit:cover;display:block}
.gk-muster span{position:absolute;left:0;right:0;top:0;padding:10px 12px 26px;
  font-family:'Montserrat',sans-serif;font-weight:700;font-size:.62rem;letter-spacing:.08em;
  text-transform:uppercase;color:#fff;background:linear-gradient(to bottom,rgba(16,14,24,.74),transparent)}
.js .gk-faecher:not(.auf) .gk-muster{transform:rotate(0deg) translateY(calc(var(--i) * 3px))}
@media(hover:hover) and (pointer:fine){
  .gk-faecher.auf .gk-muster:hover{transform:rotate(var(--r)) translateY(-18px);z-index:9;
    box-shadow:0 26px 50px rgba(16,14,24,.26),0 0 0 1px rgba(16,14,24,.08);transition-delay:0s}
}
.gk-faecher-fuss{margin:0;text-align:center;font-size:.76rem;color:var(--muted);line-height:1.5}
.gk-ausstellung-text h3{font-size:clamp(1.35rem,2.4vw,1.9rem);margin:0 0 16px}
.gk-ausstellung-text p{color:#43433F;max-width:50ch;margin:0 0 14px}
.gk-ausstellung-text p strong{color:var(--text)}
.gk-ausstellung-text .gk-fein{font-size:.88rem;color:var(--muted)}
.gk-ausstellung-text .btn{margin-top:10px}
.gk-buero{display:flex;gap:16px;align-items:center;margin:28px 0 0;padding:14px;border:1px solid var(--line);
  border-radius:16px;background:#fff;max-width:440px;min-width:0}
.gk-buero img{flex:0 0 auto;width:118px;height:88px;object-fit:cover;object-position:center 40%;border-radius:10px}
.gk-buero span{min-width:0;font-size:.86rem;line-height:1.5;color:var(--muted)}
.gk-buero b{display:block;color:var(--text);font-weight:600}
@media(max-width:900px){
  .gk-ausstellung{grid-template-columns:1fr;gap:30px}
  .gk-faecher{height:290px}
  .gk-muster{width:132px;height:178px;margin-left:-66px}
}

/* =====================================================================
   4. Ablauf: Maßband + Buehne (.gk-massband in .gk-ablauf-raum)
   ---------------------------------------------------------------------
   Das Maßband mit Zentimeter-Strichen rollt beim Scrollen aus (--p von
   gewerk.js), das Gehaeuse laeuft an der Spitze mit, die Marken werden
   nacheinander "on". NEU (Nachauftrag): immer nur der AKTIVE Schritt steht
   gross auf der Buehne (Titel + ein Satz + Ort-Chip .gk-wo, ohne Zeitangabe), die anderen sind
   kurze Beschriftungen am Band. Ab 801px klebt die Buehne ueber 240vh und
   der Schritt wechselt mit dem Scrollen (.aktiv); ein Klick auf eine Marke
   springt dorthin. Unter 801px, ohne JS und bei "Bewegung reduzieren":
   senkrechtes Band, alle Schritte untereinander, je Schritt ein Satz.
   Fuer jedes Gewerk mit Ablauf. Abschalten: .gk-ablauf-raum weglassen. */
.gk-ablauf-sec{padding:0}
.gk-ablauf-raum{position:relative}
.gk-ablauf-klebt{position:relative;padding:64px 0}
.gk-ablauf-kopf{margin-bottom:40px}
.gk-massband{--p:0;--spur:0px;position:relative;margin-top:14px}
.gk-band{position:absolute;left:0;right:0;top:0;height:30px;pointer-events:none}
.gk-band-spur{position:absolute;inset:0;border-radius:4px;border:1px solid var(--gk-band-rand);
  background-color:var(--gk-band);
  background-image:
    repeating-linear-gradient(90deg,rgba(16,14,24,.78) 0 2px,transparent 2px 50px),
    repeating-linear-gradient(90deg,rgba(16,14,24,.5) 0 1px,transparent 1px 10px);
  background-size:100% 62%,100% 36%;background-position:left bottom,left bottom;background-repeat:repeat-x;
  transform:scaleX(var(--p));transform-origin:left center;will-change:transform;
  transition:transform .14s linear}
.gk-band-gehaeuse{position:absolute;left:-6px;top:-9px;width:52px;height:48px;border-radius:12px;
  background:linear-gradient(160deg,#2A2838,var(--ink));box-shadow:0 10px 24px rgba(16,14,24,.28);
  transform:translateX(calc(var(--p) * var(--spur)));will-change:transform;
  transition:transform .14s linear}
.gk-band-gehaeuse::before{content:"";position:absolute;left:12px;top:12px;width:28px;height:24px;border-radius:7px;
  background:var(--sonne);opacity:.9}
.gk-band-gehaeuse::after{content:"";position:absolute;left:19px;top:19px;width:14px;height:10px;border-radius:4px;
  background:rgba(16,14,24,.55)}
/* Buehne (ab 801px): Marken in Reihe 1, Kurzbeschriftung in Reihe 2, alle
   Karten uebereinander in Reihe 3 - nur die aktive ist sichtbar. */
.gk-schritte-liste{list-style:none;margin:0;padding:66px 0 0;display:grid;
  grid-template-columns:repeat(5,minmax(0,1fr));grid-template-rows:auto auto auto;column-gap:16px}
.gk-schritt{display:contents}
.gk-schritt:nth-child(1)>*{grid-column:1}
.gk-schritt:nth-child(2)>*{grid-column:2}
.gk-schritt:nth-child(3)>*{grid-column:3}
.gk-schritt:nth-child(4)>*{grid-column:4}
.gk-schritt:nth-child(5)>*{grid-column:5}
.gk-marke{grid-row:1;position:relative;justify-self:center;-webkit-appearance:none;appearance:none;padding:0;
  display:grid;place-items:center;width:42px;height:42px;border-radius:50%;background:#fff;border:3px solid var(--line);
  font-family:'Montserrat',sans-serif;font-weight:800;font-size:.76rem;color:var(--muted);line-height:1;cursor:pointer;
  transition:border-color .4s ease,color .4s ease,box-shadow .4s ease,background .4s ease,transform .4s cubic-bezier(.22,1,.36,1)}
.gk-marke::before{content:"";position:absolute;left:50%;bottom:100%;width:2px;height:36px;margin-left:-1px;
  background:var(--line);transition:background .4s ease}
.gk-marke:focus-visible{outline:3px solid var(--olive);outline-offset:3px}
.gk-schritt.on .gk-marke{border-color:var(--olive);color:#fff;background:var(--olive);box-shadow:0 0 0 6px rgba(116,117,70,.14)}
.gk-schritt.on .gk-marke::before{background:var(--olive)}
.gk-schritt.aktiv .gk-marke{transform:scale(1.14)}
.gk-kurz{grid-row:2;text-align:center;margin-top:12px;font-family:'Montserrat',sans-serif;font-weight:800;font-size:.66rem;
  letter-spacing:.12em;text-transform:uppercase;color:var(--muted);transition:color .3s ease}
.gk-schritt.aktiv .gk-kurz{color:var(--olive-dk)}
.gk-schritt>.gk-schritt-karte{grid-row:3;grid-column:1/-1;justify-self:center;width:min(100%,680px);margin-top:34px;
  display:flex;gap:22px;align-items:flex-start;min-width:0;background:#fff;border:1px solid var(--line);border-radius:var(--r);
  padding:28px 32px;box-shadow:0 18px 44px rgba(16,14,24,.09);
  opacity:0;transform:translateY(16px) scale(.98);pointer-events:none;
  transition:opacity .45s ease,transform .6s cubic-bezier(.22,1,.36,1)}
.gk-schritt.aktiv>.gk-schritt-karte{opacity:1;transform:none;pointer-events:auto;z-index:2}
.gk-schritt-nr{flex:0 0 auto;font-family:'Montserrat',sans-serif;font-weight:800;font-size:clamp(2rem,3.4vw,2.8rem);
  letter-spacing:-.04em;line-height:1;color:var(--olive)}
.gk-schritt-inhalt{min-width:0}
.gk-schritt-inhalt h3{font-size:clamp(1.15rem,1.9vw,1.5rem);margin:0 0 8px;overflow-wrap:break-word}
.gk-schritt-inhalt p{margin:0 0 14px;font-size:1rem;line-height:1.55;color:#3A3A36}
.gk-schritt-inhalt p strong{color:var(--text)}
.gk-wo{display:inline-flex;align-items:center;gap:.45em;max-width:100%;
  background:var(--olive-wash);color:var(--olive-dk);border-radius:999px;padding:6px 12px;
  font-family:'Montserrat',sans-serif;font-weight:800;text-transform:uppercase;font-size:.6rem;letter-spacing:.08em;line-height:1.3}
.gk-wo svg{flex:0 0 auto;width:11px;height:11px;fill:currentColor}
@media(min-width:801px){
  .gk-ablauf-raum{height:240vh}
  .gk-ablauf-klebt{position:sticky;top:var(--nav);height:calc(100vh - var(--nav));display:flex;align-items:center;padding:0}
  .gk-ablauf-klebt>.wrap{width:100%}
}
/* Senkrechte Fassung: Handy, "Bewegung reduzieren" - und darunter noch einmal fuer "ohne JS" */
@media(max-width:800px),(prefers-reduced-motion:reduce){
  .gk-ablauf-raum{height:auto}
  .gk-ablauf-klebt{position:static;height:auto;display:block;padding:64px 0}
  .gk-massband{padding-left:60px}
  .gk-band{left:10px;right:auto;top:0;bottom:0;width:30px;height:auto}
  .gk-band-spur{background-image:
      repeating-linear-gradient(180deg,rgba(16,14,24,.78) 0 2px,transparent 2px 50px),
      repeating-linear-gradient(180deg,rgba(16,14,24,.5) 0 1px,transparent 1px 10px);
    background-size:62% 100%,36% 100%;background-position:right top,right top;background-repeat:repeat-y;
    transform:scaleY(var(--p));transform-origin:center top}
  .gk-band-gehaeuse{left:-9px;top:-6px;transform:translateY(calc(var(--p) * var(--spur)))}
  .gk-schritte-liste{display:grid;grid-template-columns:1fr;gap:18px;padding-top:0}
  .gk-schritt{display:block;position:relative}
  .gk-schritt>*{grid-column:auto}
  .gk-marke{position:absolute;left:-60px;top:18px;justify-self:auto;transform:none}
  .gk-schritt.aktiv .gk-marke{transform:none}
  .gk-marke::before{left:100%;top:50%;bottom:auto;width:14px;height:2px;margin:-1px 0 0}
  .gk-kurz{display:none}
  .gk-schritt>.gk-schritt-karte{opacity:1;transform:none;pointer-events:auto;margin:0;width:auto;padding:20px 20px;
    gap:14px;box-shadow:none;justify-self:stretch}
  .gk-schritt-nr{font-size:1.6rem}
  .gk-schritt-inhalt p{font-size:.94rem}
}
html:not(.js) .gk-ablauf-raum{height:auto}
html:not(.js) .gk-ablauf-klebt{position:static;height:auto;display:block;padding:64px 0}
html:not(.js) .gk-massband{--p:1;padding-left:60px}
html:not(.js) .gk-band{left:10px;right:auto;top:0;bottom:0;width:30px;height:auto}
html:not(.js) .gk-band-spur{transform:none}
html:not(.js) .gk-band-gehaeuse{display:none}
html:not(.js) .gk-schritte-liste{display:grid;grid-template-columns:1fr;gap:18px;padding-top:0}
html:not(.js) .gk-schritt{display:block;position:relative}
html:not(.js) .gk-marke{position:absolute;left:-60px;top:18px;border-color:var(--olive);color:#fff;background:var(--olive)}
html:not(.js) .gk-marke::before{left:100%;top:50%;bottom:auto;width:14px;height:2px;margin:-1px 0 0}
html:not(.js) .gk-kurz{display:none}
html:not(.js) .gk-schritt>.gk-schritt-karte{opacity:1;transform:none;pointer-events:auto;margin:0;width:auto;padding:20px;gap:14px;box-shadow:none}

/* =====================================================================
   5. Marvin-Abschnitt (Kopie von .mv aus landing.css, Praefix gk-)
   Ohne Kasten, frei auf der Seite (Robins Vorgabe vom 18.09.2026).
   ===================================================================== */
.gk-mv{display:grid;grid-template-columns:minmax(0,370px) minmax(0,1fr);gap:26px 52px;align-items:start;
  max-width:1060px;margin:0 auto}
.gk-mv-person{display:flex;flex-wrap:wrap;align-items:center;gap:24px;row-gap:14px;min-width:0;padding-top:4px}
.gk-mv-person img{flex:0 0 auto;width:164px;height:164px;border-radius:50%;object-fit:cover;object-position:center;display:block}
.gk-mv-name{font-family:'Montserrat',sans-serif;font-weight:800;font-size:1.05rem;color:var(--text);margin:0!important;line-height:1.3}
.gk-mv-rolle{font-size:.86rem;color:var(--muted);margin:5px 0 0!important}
.gk-mv-txt{min-width:0}
.gk-mv-txt p{margin:0 0 12px;font-size:1rem;line-height:1.7;color:#3A3A36}
.gk-mv-txt p:last-child{margin-bottom:0}
.gk-mv-txt .gk-mv-zitat{font-family:'Montserrat',sans-serif;font-weight:800;
  font-size:clamp(1.4rem,2.7vw,2.1rem);line-height:1.16;letter-spacing:-.02em;text-transform:uppercase;
  color:var(--olive-dk);margin:0 0 22px;overflow-wrap:break-word}
.gk-mv-txt .gk-mv-cta{margin:28px 0 0}
.gk-mv-txt .gk-mv-hint{margin:12px 0 0;font-size:.82rem;line-height:1.55;color:var(--muted)}
/* Pressehinweis: Wortlaut "Veroeffentlicht bei", nie "Bekannt aus" (Paragraf 5 UWG),
   kein Logo. Steht beim ERSTEN Erscheinen des Portraets - hier. */
.gk-presse{flex:1 1 100%;display:flex;align-items:center;gap:7px;font-size:.8rem;line-height:1.45;
  color:var(--muted);text-decoration:none}
.gk-presse b{color:var(--text);font-weight:700}
.gk-presse svg{flex:0 0 auto}
.gk-presse-ico{width:1.15em;height:1.15em;color:var(--sonne-dk)}
.gk-presse-raus{width:.85em;height:.85em;color:var(--olive);transition:transform .2s ease}
.gk-presse:hover span{text-decoration:underline;text-underline-offset:3px}
.gk-presse:hover .gk-presse-raus{transform:translate(2px,-2px)}
.js .gk-mv img{opacity:0;transform:scale(.86)}
.js .gk-mv.da img{opacity:1;transform:scale(1);transition:transform .7s cubic-bezier(.34,1.56,.64,1) .12s,opacity .5s ease .12s}
@media(max-width:900px){.gk-mv{grid-template-columns:1fr;gap:22px}}
@media(max-width:480px){.gk-mv-person{gap:16px}.gk-mv-person img{width:108px;height:108px}}

/* =====================================================================
   6. Versprechen-Kasten "Uns gibt es auch in 20 Jahren noch"
   Exakte Kopie der .bleib-Regeln aus landing.css (01.10.2026), Praefix
   gk-bleib. Sieben Schritte in ~3 s - nicht vereinfachen (Robins Favorit).
   Alle Startzustaende haengen an .js .gk-bleib:not(.los); den Ausloeser
   setzt gewerk.js (IntersectionObserver + Scroll-Messung + setTimeout).
   ===================================================================== */
.gk-bleib-sec{padding-top:24px;overflow-x:clip}
@supports not (overflow-x:clip){.gk-bleib-sec{overflow-x:hidden}}
.gk-bleib{position:relative;overflow:hidden;isolation:isolate;display:grid;
  grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:48px;align-items:center;
  background:var(--ink);color:#fff;border-radius:28px;padding:58px 56px;
  box-shadow:0 30px 70px rgba(16,14,24,.22)}
.gk-bleib::before{content:"";position:absolute;z-index:-1;right:-180px;top:-200px;width:560px;height:560px;
  border-radius:50%;background:radial-gradient(circle,rgba(232,163,61,.30),rgba(232,163,61,0) 65%)}
.gk-bleib::after{content:"";position:absolute;z-index:-1;left:-160px;bottom:-240px;width:480px;height:480px;
  border-radius:50%;background:radial-gradient(circle,rgba(116,117,70,.35),rgba(116,117,70,0) 65%)}
.gk-bleib-links,.gk-bleib-rechts{position:relative;min-width:0}
.gk-bleib-zeichen{display:block;width:62px;height:auto;fill:var(--sonne);margin-bottom:22px}
.gk-bleib-eyebrow{font-family:'Montserrat',sans-serif;font-weight:800;font-size:.72rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--sonne)!important;margin:0 0 14px!important}
.gk-bleib-zitat{margin:0}
.gk-bleib-zitat > p{font-family:'Montserrat',sans-serif;font-weight:800;letter-spacing:-.03em;
  font-size:clamp(2rem,4.4vw,3.35rem);line-height:1.12;color:#fff!important;margin:0 0 30px!important}
.gk-bleib-zitat .w{display:inline-block}
.gk-bleib-20{position:relative;white-space:nowrap;color:var(--sonne);margin-right:.12em}
.gk-bleib-zahl{display:inline-block;min-width:2ch;text-align:right;font-variant-numeric:tabular-nums}
.gk-bleib-kreis{position:absolute;left:-6%;top:-12%;width:112%;height:124%;overflow:visible;pointer-events:none}
.gk-bleib-kreis ellipse{fill:none;stroke:var(--sonne);stroke-width:2.4;stroke-linecap:round;
  stroke-dasharray:100;stroke-dashoffset:0;vector-effect:non-scaling-stroke}
.gk-bleib-wer{display:flex;align-items:center;gap:14px}
.gk-bleib-wer img{width:56px;height:56px;border-radius:50%;object-fit:cover;
  box-shadow:0 0 0 3px var(--ink),0 0 0 5px var(--sonne)}
.gk-bleib-wer b{display:block;font-family:'Montserrat',sans-serif;font-weight:800;font-size:.95rem;color:#fff}
.gk-bleib-wer i{display:block;font-style:normal;font-size:.84rem;color:rgba(255,255,255,.62)}
.gk-bleib-warum{font-size:1.02rem;line-height:1.65;color:rgba(255,255,255,.78)!important;margin:0 0 26px!important}
.gk-bleib-warum strong{color:#fff}
.gk-bleib-punkte{list-style:none;margin:0 0 30px;padding:0;display:grid;gap:18px}
.gk-bleib-punkte li{display:flex;gap:16px;align-items:flex-start;min-width:0}
.gk-bleib-ico{flex:0 0 auto;display:grid;place-items:center;width:46px;height:46px;border-radius:14px;
  background:rgba(232,163,61,.14);border:1px solid rgba(232,163,61,.35)}
.gk-bleib-ico svg{width:22px;height:22px;fill:var(--sonne)}
.gk-bleib-punkte li > span:last-child{font-size:.93rem;line-height:1.55;color:rgba(255,255,255,.72);hyphens:auto;min-width:0}
.gk-bleib-punkte b{display:block;font-family:'Montserrat',sans-serif;font-weight:800;font-size:.98rem;color:#fff;margin-bottom:3px}
.gk-bleib-glanz{position:absolute;inset:0;z-index:2;pointer-events:none;
  background:linear-gradient(105deg,rgba(255,255,255,0) 38%,rgba(255,255,255,.14) 50%,rgba(255,255,255,0) 62%);
  transform:translateX(-120%)}
/* Goldener Knopf (Kopie .btn-sonne/.puls aus pv/pv.css) */
.gk-btn-sonne{background:var(--sonne);color:var(--ink);font-size:.95rem;padding:22px 42px;
  box-shadow:0 14px 34px rgba(240,180,41,.42)}
.gk-btn-sonne:hover{background:var(--sonne-dk);color:var(--ink);box-shadow:0 18px 42px rgba(240,180,41,.5)}
.gk-puls{position:relative;isolation:isolate;animation:gkKnopfAtmen 3.4s ease-in-out infinite}
.gk-puls::after{content:"";position:absolute;inset:0;border-radius:8px;z-index:-1;
  box-shadow:0 0 0 0 rgba(240,180,41,.55);animation:gkKnopfRing 3.4s ease-out infinite}
@keyframes gkKnopfAtmen{0%,100%{transform:scale(1)}50%{transform:scale(1.028)}}
@keyframes gkKnopfRing{0%{box-shadow:0 0 0 0 rgba(240,180,41,.5)}70%{box-shadow:0 0 0 22px rgba(240,180,41,0)}100%{box-shadow:0 0 0 0 rgba(240,180,41,0)}}
/* -- Startzustaende (nur mit JavaScript, solange .los fehlt) -- */
.js .gk-bleib:not(.los){opacity:0;transform:perspective(1400px) rotateX(16deg) translateY(70px) scale(.94);filter:blur(6px)}
.js .gk-bleib:not(.los) .gk-bleib-zeichen{opacity:0;transform:scale(.2) rotate(-35deg)}
.js .gk-bleib:not(.los) .gk-bleib-eyebrow{opacity:0;letter-spacing:.5em}
.js .gk-bleib:not(.los) .w{opacity:0;transform:translateY(.7em) rotate(5deg);filter:blur(5px)}
.js .gk-bleib:not(.los) .gk-bleib-kreis ellipse{stroke-dashoffset:100}
.js .gk-bleib:not(.los) .gk-bleib-wer{opacity:0;transform:translateX(-30px)}
.js .gk-bleib:not(.los) .gk-bleib-warum{opacity:0;transform:translateY(24px)}
.js .gk-bleib:not(.los) .gk-bleib-punkte li{opacity:0;transform:translateX(50px) rotate(2deg)}
.js .gk-bleib:not(.los) .gk-bleib-ico{transform:scale(0) rotate(-180deg)}
.js .gk-bleib:not(.los) .gk-bleib-knopf{opacity:0;transform:scale(.6)}
/* -- Ablauf, sobald .los gesetzt ist -- */
.js .gk-bleib{transition:opacity .9s ease,transform 1.15s cubic-bezier(.16,1,.3,1),filter .9s ease}
.js .gk-bleib .gk-bleib-zeichen{transition:opacity .5s ease .35s,transform .9s cubic-bezier(.34,1.7,.5,1) .35s}
.js .gk-bleib .gk-bleib-eyebrow{transition:opacity .6s ease .45s,letter-spacing .9s cubic-bezier(.16,1,.3,1) .45s}
.js .gk-bleib .w{transition:opacity .5s ease,transform .7s cubic-bezier(.34,1.5,.5,1),filter .5s ease;
  transition-delay:calc(.6s + var(--i)*.09s)}
.js .gk-bleib .gk-bleib-kreis ellipse{transition:stroke-dashoffset 1s cubic-bezier(.65,0,.35,1) 2.15s}
.js .gk-bleib .gk-bleib-wer{transition:opacity .6s ease 1.5s,transform .8s cubic-bezier(.16,1,.3,1) 1.5s}
.js .gk-bleib .gk-bleib-warum{transition:opacity .7s ease 1.1s,transform .8s cubic-bezier(.16,1,.3,1) 1.1s}
.js .gk-bleib .gk-bleib-punkte li{transition:opacity .5s ease,transform .8s cubic-bezier(.34,1.45,.5,1);
  transition-delay:calc(1.35s + var(--i)*.16s)}
.js .gk-bleib .gk-bleib-ico{transition:transform .8s cubic-bezier(.34,1.7,.5,1);transition-delay:calc(1.5s + var(--i)*.16s)}
.js .gk-bleib .gk-bleib-knopf{transition:opacity .4s ease 2.3s,transform .7s cubic-bezier(.34,1.7,.5,1) 2.3s}
.js .gk-bleib.los .gk-bleib-glanz{animation:gkBleibGlanz 1.4s cubic-bezier(.45,0,.2,1) 1.7s 1 both}
.js .gk-bleib.los::before{animation:gkBleibSchein 9s ease-in-out 2.5s infinite alternate}
@keyframes gkBleibGlanz{from{transform:translateX(-120%)}to{transform:translateX(120%)}}
@keyframes gkBleibSchein{from{transform:translate(0,0) scale(1)}to{transform:translate(-60px,40px) scale(1.15)}}
@media(max-width:900px){
  .gk-bleib{grid-template-columns:1fr;gap:34px;padding:44px 28px;border-radius:22px}
  .gk-bleib-zeichen{width:48px;margin-bottom:16px}
}
@media(max-width:480px){.gk-bleib{padding:38px 22px}}

/* =====================================================================
   7. FAQ - nutzt .faq/.q/.a aus stil.css; hier nur die Tastaturspur
   ===================================================================== */
.faq .q button:focus-visible{outline:3px solid var(--olive);outline-offset:-3px;border-radius:6px}

/* =====================================================================
   8. Handlungsaufruf mit Formular (Kopie der .ber-*-Regeln, Praefix gk-)
   ===================================================================== */
.gk-ber-grid{display:grid;grid-template-columns:1fr 1fr;gap:46px;align-items:start;margin-top:8px}
.gk-ber-txt{min-width:0}
.gk-ber-txt h2{color:#fff}
.gk-ber-txt p{color:rgba(255,255,255,.78)}
.gk-ber-txt p strong{color:#fff}
.gk-schritte{list-style:none;margin:26px 0 0;padding:0;display:grid;gap:12px}
.gk-schritte li{display:flex;gap:14px;align-items:flex-start;font-size:.95rem;line-height:1.55;color:rgba(255,255,255,.78);min-width:0}
.gk-schritte b{flex:0 0 auto;display:grid;place-items:center;width:30px;height:30px;border-radius:50%;
  background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.25);
  font-family:'Montserrat',sans-serif;font-weight:800;font-size:.78rem;color:#fff}
.gk-ber-tel{display:inline-flex;align-items:center;gap:.5em;margin-top:10px;color:#fff;
  font-family:'Montserrat',sans-serif;font-weight:800;font-size:clamp(1.5rem,2.6vw,2rem);letter-spacing:-.02em;
  text-decoration:none;border-bottom:3px solid var(--olive-lt);padding-bottom:4px}
.gk-ber-tel svg{width:24px;height:24px;fill:var(--olive-lt);flex:0 0 auto}
.gk-ber-tel:hover{color:var(--olive-lt)}
.gk-ber-tel-hin{font-size:.95rem;color:rgba(255,255,255,.75)!important;margin:30px 0 0!important}
.gk-ber-ort{display:flex;gap:16px;align-items:flex-start;margin-top:30px;padding-top:26px;
  border-top:1px solid rgba(255,255,255,.14);min-width:0}
.gk-ber-ort svg{flex:0 0 auto;width:22px;height:22px;fill:var(--olive-lt);margin-top:2px}
.gk-ber-ort p{margin:0;font-size:.95rem;line-height:1.6;min-width:0}
.gk-ber-ort b{color:#fff;font-weight:600}
.gk-ber-ort a{color:#fff;text-decoration:none;border-bottom:1px solid rgba(255,255,255,.4)}
.gk-ber-ort a:hover{border-color:#fff}
.gk-ber-form{background:#fff;border-radius:18px;padding:32px 30px;min-width:0;color:var(--text)}
.gk-ber-form h3{font-size:1.15rem;margin:0 0 18px;color:var(--ink)}
.gk-ber-form .f-row{grid-template-columns:1fr 1fr}
.gk-ber-form .btn{width:100%}
.gk-ber-form .opt-hint{font-weight:400;letter-spacing:0;text-transform:none;color:var(--muted)}
.gk-ber-fehler{display:none;margin:0 0 18px;padding:13px 16px;border-radius:10px;background:#FDECEA;
  border:1px solid #E5B4AC;color:#7A2E22;font-size:.88rem;line-height:1.55}
.gk-ber-fehler.auf{display:block}
.gk-wahl{display:flex;gap:8px}
.gk-wahl label{flex:1;position:relative;display:flex;margin:0;text-transform:none;letter-spacing:0;font-family:'Poppins',sans-serif;font-weight:400;font-size:.9rem;color:var(--text)}
.gk-wahl input{position:absolute;opacity:0;width:0;height:0}
.gk-wahl span{flex:1;display:flex;align-items:center;justify-content:center;text-align:center;
  background:#fff;border:1px solid var(--line);border-radius:9px;padding:12px 6px;cursor:pointer;line-height:1.3;
  transition:background .18s,color .18s,border-color .18s}
.gk-wahl input:checked+span{background:var(--olive);border-color:var(--olive);color:#fff;font-weight:600}
.gk-wahl input:focus-visible+span{outline:2px solid var(--olive);outline-offset:2px}
.gk-ber-form .consent a{color:var(--olive)}
@media(max-width:900px){.gk-ber-grid{grid-template-columns:1fr;gap:34px}}
@media(max-width:680px){.gk-ber-form .f-row{grid-template-columns:1fr}.gk-ber-form{padding:26px 20px}}

/* =====================================================================
   9. Nachbargewerke
   ===================================================================== */
.gk-nachbarn{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(220px,100%),1fr));gap:16px}
.gk-nachbar{display:flex;flex-direction:column;min-width:0;text-decoration:none;color:inherit;background:#fff;
  border:1px solid var(--line);border-radius:var(--r);padding:26px 24px 22px;
  transition:transform .4s cubic-bezier(.22,1,.36,1),box-shadow .4s,border-color .4s}
.gk-nachbar:hover{transform:translateY(-4px);border-color:rgba(116,117,70,.45);box-shadow:0 22px 50px rgba(16,14,24,.1)}
.gk-nachbar h3{font-size:1.02rem;margin:0 0 8px}
.gk-nachbar p{margin:0 0 18px;font-size:.88rem;line-height:1.55;color:var(--muted);flex:1 1 auto}
.gk-nachbar-pfeil{display:inline-flex;align-items:center;gap:.5em;font-family:'Montserrat',sans-serif;font-weight:800;
  text-transform:uppercase;font-size:.68rem;letter-spacing:.1em;color:var(--olive)}
.gk-nachbar-pfeil svg{width:13px;height:13px;fill:currentColor;transition:transform .3s}
.gk-nachbar:hover .gk-nachbar-pfeil svg{transform:translateX(3px)}
.gk-nachbar-breit{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:18px 26px;
  margin-top:18px;background:var(--olive);color:#fff;border-radius:var(--r);padding:30px 34px;text-decoration:none;
  transition:transform .25s ease,box-shadow .25s ease}
.gk-nachbar-breit:hover{transform:translateY(-3px);box-shadow:0 22px 50px rgba(116,117,70,.32)}
.gk-nachbar-breit>div{min-width:0;max-width:62ch}
.gk-nachbar-breit h3{color:#fff;font-size:clamp(1.1rem,2vw,1.45rem);margin:0 0 6px}
.gk-nachbar-breit p{margin:0;color:rgba(255,255,255,.85);font-size:.95rem}
.gk-nachbar-breit .btn{flex:0 0 auto;background:#fff;color:var(--olive-dk)}
.gk-nachbar-breit .btn:hover{background:var(--olive-wash)}

/* ---- Platzhalter-Bloecke (Werkzeug, Vorher-Nachher) - nur sichtbar, wenn
   das hidden-Attribut im HTML entfernt wird ---- */
.gk-platzhalter{border:2px dashed var(--line);border-radius:var(--r);padding:34px;text-align:center;
  color:var(--muted);font-size:.9rem;background:repeating-linear-gradient(45deg,#fff 0 12px,var(--paper) 12px 24px)}
.gk-platzhalter b{display:block;font-family:'Montserrat',sans-serif;font-weight:800;color:var(--text);margin-bottom:6px}

/* ---- Schrumpfschutz: Raster- und Flex-Kinder duerfen auf dem Handy nicht
   ueberlaufen (min-width:auto ist die Voreinstellung) ---- */
.gk-sorgen>*,.gk-schicht>*,.gk-ausstellung>*,.gk-ber-grid>*,.gk-nachbarn>*,.gk-zettel-block>*,
.gk-story-buehne>*,.gk-bleib>*,.gk-mv>*{min-width:0}
.gk-sorge-body p,.gk-sorge-zitat,.gk-pivot p,.gk-schicht-text p,.gk-story-body p,.gk-nachbar p,.gk-ber-ort p,
.gk-ausstellung-text p,.gk-tipp-antwort,.gk-zettel-wort{-webkit-hyphens:auto;hyphens:auto;overflow-wrap:break-word}

/* ---- Bewegung reduzieren: alles aus, Endzustaende sofort ---- */
@media(prefers-reduced-motion:reduce){
  .js .gk-auf,.js .huepf{opacity:1;transform:none;transition:none}
  .gk-sorge-kopf h3,.gk-strich,.gk-sorge-haken{transition:none}
  .gk-sorge{position:static}
  .gk-pivot{position:static}
  .gk-sorgen-text{position:static}
  .gk-schicht{--p:.55!important}
  .gk-lage,.gk-lage-text,.gk-schicht-fertig{transition:none}
  .gk-lage-text{opacity:1}
  .gk-schicht-raum{height:auto!important}
  .gk-schicht-klebt{position:static!important;height:auto!important;display:block!important}
  .js .gk-libelle:not(.ein) i,.js .gk-libelle.ein i{animation:none;transform:none}
  .js .gk-faecher:not(.auf) .gk-muster{transform:rotate(var(--r))}
  .gk-muster{transition:none}
  .gk-massband{--p:1!important}
  .gk-band-spur,.gk-band-gehaeuse,.gk-marke,.gk-marke::before,.gk-kurz,.gk-schritt-karte{transition:none}
  .gk-schritt .gk-marke{border-color:var(--olive);color:#fff;background:var(--olive)}
  .gk-band-gehaeuse{display:none}
  .js .gk-zettel:not(.druckt) .gk-zettel-wort{clip-path:none}
  .js .gk-zettel:not(.druckt) .gk-zettel-box svg{stroke-dashoffset:0}
  .js .gk-zettel:not(.druckt) .gk-stempel{opacity:1;transform:rotate(-8deg)}
  .gk-zettel-wort,.gk-zettel-box svg,.gk-stempel{transition:none!important}
  .gk-story-karte,.gk-story-balken i::after,.gk-story-pfeil{transition:none}
  .gk-tipp-punkte i{animation:none;opacity:.8}
  .js .gk-tipp-antwort.an{animation:none}
  .gk-chip,.gk-chip:hover{transform:none;transition:none}
  .gk-glanz::before{display:none}
  .js .gk-mv img{opacity:1;transform:none;transition:none}
  .js .gk-bleib,.js .gk-bleib *{transition:none!important;animation:none!important}
  .js .gk-bleib:not(.los),.js .gk-bleib:not(.los) *{opacity:1!important;transform:none!important;filter:none!important}
  .gk-puls{animation:none}.gk-puls::after{animation:none}
  .gk-nachbar,.gk-nachbar:hover,.gk-nachbar-breit,.gk-nachbar-breit:hover{transform:none;transition:none}
}