/* Die vier Leistungen (Schritt Hero 4) – übernommen aus schritt-leistungen (leistungen.css und handy.css). Desktop: Fächer; jede
   Karte hat ihr eigenes Material und ein großes, lebendes Motiv im Fenster; die gewählte Karte hebt sich, ihr Motiv tritt heraus.
   Handy bis 900 px: Rad mit einer Karte vorn, die Nachbarn lugen herein, darunter die Leiste für den Daumen.
   Farben nur Kobalt, Neongrün, Tiefsee, Weiß (Variablen nur in den beiden neuen Abschnitten). */
:is(#leistungen, #so-bauen-wir) {
  --kobalt: #2442eb; --kobalt-hell: #4d6bff; --neon: #d7f52a; --papier: #f4f4ef; --tinte: #20211f;
  --tief: #040b18; --tief-2: #071a33; --nacht: #0c1838;
  --ease: cubic-bezier(.23, 1, .32, 1); --ease-io: cubic-bezier(.77, 0, .175, 1); --feder: cubic-bezier(.34, 1.4, .64, 1);
  --rand: var(--hn-rand, clamp(20px, 4.4vw, 72px));
}
:is(#leistungen, #so-bauen-wir) picture { display: contents; }
:is(#leistungen, #so-bauen-wir) :is(h2, h3, p, ul, ol) { max-width: none; }

/* Lage der Karten (aus leistungen.js): nicht vererbt, damit eine Bewegung nur die Karte selbst neu berechnet */
@property --lk-x { syntax: '<length>'; inherits: false; initial-value: 0px; }
@property --lk-y { syntax: '<length>'; inherits: false; initial-value: 0px; }
@property --lk-dy { syntax: '<length>'; inherits: false; initial-value: 0px; }
@property --lk-z { syntax: '<length>'; inherits: false; initial-value: 0px; }
@property --lk-r { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
@property --lk-yr { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
@property --lk-ds { syntax: '<number>'; inherits: false; initial-value: 1; }
#leistungen.lf { position: relative; z-index: 3; display: block; min-height: 100svh; margin: 0; padding: clamp(48px, 7svh, 88px) var(--rand) 0; overflow: clip;
  color: var(--papier); outline: 0;
  /* Das Design-System hält 110 px Abstand für einen festen Kopf; hier liegt kein Kopf über dem Abschnitt (wie bisher) */
  scroll-margin-top: -110px; }
#leistungen.lf:focus-visible { outline: 3px solid var(--neon); outline-offset: -10px; }
.lf-kopf { position: relative; z-index: 30; max-width: 1480px; margin: 0 auto; pointer-events: none; }
/* Überschrift: die alten Regeln für #services-title (heller Kasten, Einblenden) gelten hier nicht mehr */
#leistungen #services-title { margin: 0; padding: 0; max-width: none; width: fit-content; font: 500 clamp(40px, 4.3vw, 76px)/1 'Familjen Grotesk', sans-serif;
  letter-spacing: -.045em; color: var(--papier); background: none; border-radius: 0; box-shadow: none; text-shadow: 0 2px 30px #02081a8c; opacity: 1; pointer-events: auto; }

.lf-buehne { position: relative; height: max(600px, calc(100svh - clamp(48px, 7svh, 88px) - clamp(40px, 4.3vw, 76px) - 16px)); max-width: 1480px; margin: 16px auto 0; }
.lf-leiste { display: none; }
/* Der Fächer skaliert mit dem Bildschirm (--s aus JS), Bezug ist 1440 × 900 */
.lf-faecher { position: absolute; left: 50%; bottom: calc(74px * var(--s, 1)); width: 0; height: 0; margin: 0; padding: 0; list-style: none; transform: scale(var(--s, 1)); transform-origin: 0 0; }

/* ---------- Karte im Fächer: feste Lage auf einem Bogen (--lk-x, --lk-y, --lk-r aus JS) ---------- */
.lk {
  --b: 316px; --h: 540px; --lk-x: 0px; --lk-y: 0px; --lk-r: 0deg; --lk-dy: 0px; --lk-ds: 1; --rx: 0deg; --ry: 0deg;
  position: absolute; left: 0; bottom: 0; width: var(--b); height: var(--h); margin-left: calc(var(--b) / -2);
  transform-origin: 50% 100%;
  transform: translate3d(var(--lk-x), calc(var(--lk-y) + var(--lk-dy)), 0) rotate(var(--lk-r)) scale(var(--lk-ds));
  transition: transform .48s var(--ease);
  perspective: 1300px; z-index: calc(10 + var(--i));
  -webkit-tap-highlight-color: transparent;
}
.lk--web { --b: 316px; --h: 540px; }
.lk--prog { --b: 304px; --h: 528px; }
.lk--ki { --b: 298px; --h: 552px; }
.lk--komplett { --b: 372px; --h: 584px; }
.lk.is-aktiv { z-index: 40; }
/* Nicht gewählte Karten treten zurück: dunkle Deckschicht (Deckkraft statt Filter, läuft auf der Grafikkarte) */
.lk-karte::before { content: ''; position: absolute; inset: 0; z-index: 7; border-radius: inherit; background: #030916; opacity: 0; pointer-events: none; transition: opacity .45s var(--ease); }
.lf[data-aktiv] .lk:not(.is-aktiv) .lk-karte::before { opacity: .34; }

.lk-karte {
  position: relative; height: 100%; display: flex; flex-direction: column; border-radius: 26px; overflow: hidden;
  transform: rotateX(var(--rx)) rotateY(var(--ry)); transform-style: preserve-3d; transition: transform .5s var(--ease), box-shadow .6s var(--ease);
  box-shadow: inset 0 1px 0 #ffffff59, inset 0 0 0 1px #ffffff1a, 0 40px 70px -30px #000000d9, 0 14px 26px -14px #000000b3;
  isolation: isolate;
}
/* Glanzkante, die mit der Neigung wandert (nur verschoben, nie neu gemalt) */
.lk-glanz { position: absolute; z-index: 5; top: 0; bottom: 0; left: -40%; width: 180%; pointer-events: none;
  background: linear-gradient(115deg, transparent 38%, #ffffff17 50%, transparent 62%); opacity: 0; transition: opacity .5s var(--ease), transform .5s var(--ease); }
.lk.is-aktiv .lk-glanz { opacity: 1; }
.lk.is-aktiv .lk-karte { box-shadow: inset 0 1px 0 #ffffff70, inset 0 0 0 1px #ffffff26, 0 60px 90px -34px #000000f0, 0 22px 40px -18px #000c, 0 0 0 1px #ffffff0f; }

/* Materialien */
.lk--web .lk-karte { color: #fff; background: radial-gradient(120% 70% at 0% 0%, #5b77ff 0%, transparent 52%), linear-gradient(168deg, #3152ff 0%, #2442eb 42%, #1a31c2 100%); }
.lk--prog .lk-karte { color: var(--tinte);
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='k'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .13 0 0 0 0 .13 0 0 0 0 .12 0 0 0 .06 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23k)'/%3E%3C/svg%3E"), linear-gradient(180deg, #fbfbf7 0%, var(--papier) 45%, #e9ebe4 100%);
  box-shadow: inset 0 1px 0 #fff, inset 0 0 0 1px #20211f14, 0 40px 70px -30px #000000d9, 0 14px 26px -14px #000000b3; }
.lk--ki .lk-karte { color: #fff; background: radial-gradient(90% 50% at 50% 0%, #2442eb59, transparent 70%), linear-gradient(180deg, #16234f 0%, var(--nacht) 52%, #070e24 100%); }
.lk--komplett .lk-karte { color: var(--tinte); background: radial-gradient(100% 60% at 10% 0%, #f1ff8e 0%, transparent 55%), linear-gradient(170deg, #e2ff4a 0%, var(--neon) 40%, #c1df1b 100%);
  box-shadow: inset 0 1px 0 #fbffd9, inset 0 0 0 1px #20211f14, 0 40px 70px -30px #000000d9, 0 14px 26px -14px #000000b3; }

/* ---------- Fenster (das Motiv) ---------- */
.lk-fenster { position: relative; flex: none; margin: 10px 10px 0; height: 54%; border-radius: 18px; overflow: hidden; transform: translateZ(0); }
.lk--komplett .lk-fenster { height: 55%; }
.lk-beispiel { position: absolute; right: 8px; bottom: 8px; z-index: 6; padding: 3px 7px; border-radius: 6px; font: 500 10px/1.2 'Instrument Sans', sans-serif; letter-spacing: .01em; background: #040b18b3; color: #f4f4efd9; }
.lk--prog .lk-beispiel { background: #20211f14; color: #20211fb3; }

/* ---------- Text der Karte ---------- */
.lk-text { position: relative; z-index: 2; display: flex; flex-direction: column; flex: 1; padding: 16px 20px 18px; min-height: 0; }
.lk-reiter { margin: 0 0 5px; font: 500 12.5px/1.2 'Instrument Sans', sans-serif; opacity: .78; }
.lk-titel { margin: 0 0 8px; font: 600 29px/1 'Familjen Grotesk', sans-serif; letter-spacing: -.035em; }
.lk--komplett .lk-titel { font-size: 32px; }
.lk-satz { margin: 0 0 12px; font-size: 14px; line-height: 1.42; opacity: .88; text-wrap: pretty; }
.lk-tags { display: flex; flex-wrap: wrap; gap: 5px; margin: 0; padding: 0; list-style: none; }
.lk-tags li { padding: 3px 9px 4px; border-radius: 999px; font-size: 11.5px; line-height: 1.3; box-shadow: inset 0 0 0 1px color-mix(in srgb, currentColor 34%, transparent); }
.lk-fuss { display: flex; align-items: flex-end; justify-content: space-between; gap: 10px; margin-top: auto; }
.lk-preis { margin: 0; font-size: 13px; line-height: 1; white-space: nowrap; }
.lk-preis b { font: 600 34px/1 'Familjen Grotesk', sans-serif; letter-spacing: -.04em; font-variant-numeric: tabular-nums; }
.lk-link {
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 6px 0 15px; border-radius: 999px; text-decoration: none;
  font: 500 13.5px/1 'Instrument Sans', sans-serif; white-space: nowrap; transition: transform .25s var(--ease), background-color .25s;
}
.lk-link i { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; }
.lk-link svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; transition: transform .3s var(--ease); }
.lk-link:active { transform: scale(.97); }
@media (hover: hover) { .lk-link:hover svg { transform: translateX(2px); } }
.lk--web .lk-link { background: #fff; color: var(--kobalt); } .lk--web .lk-link i { background: var(--kobalt); color: #fff; }
.lk--prog .lk-link { background: var(--tinte); color: var(--papier); } .lk--prog .lk-link i { background: var(--kobalt); color: #fff; }
.lk--ki .lk-link { background: var(--neon); color: var(--tinte); } .lk--ki .lk-link i { background: var(--tinte); color: var(--neon); }
.lk--komplett .lk-link { background: var(--tinte); color: var(--neon); } .lk--komplett .lk-link i { background: var(--neon); color: var(--tinte); }
.lk-link:focus-visible { outline-color: #fff; }
.lk--prog .lk-link:focus-visible, .lk--komplett .lk-link:focus-visible { outline-color: var(--kobalt); }

/* ---------- Ebene, die aus der Karte tritt ---------- */
.lk-raus { position: absolute; z-index: 20; pointer-events: none; transform-style: preserve-3d;
  transform: rotateX(var(--rx)) rotateY(var(--ry)) translate3d(var(--px, 0px), var(--py, 0px), 70px); transition: transform .5s var(--ease); }

/* ===== 1 · Website → Schuh ===== */
.lk-fenster--web { background: #061226; box-shadow: inset 0 0 0 1px #ffffff26; }
.web-seite { position: absolute; inset: 0; }
.web-held { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 46%; transform-origin: 50% 46%;
  transition: transform 1.1s var(--ease), filter 1.1s var(--ease); }
.web-ui { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: space-between; padding: 11px 12px 12px; color: #fff;
  background: linear-gradient(180deg, #06122659 0%, transparent 24%, transparent 46%, #040c1ce6 100%); transition: opacity .6s var(--ease), transform .8s var(--ease); }
.web-nav { display: flex; align-items: center; gap: 11px; font-size: 10.5px; color: #ffffffd9; }
.web-nav b { margin-right: auto; font: 700 13px/1 'Familjen Grotesk', sans-serif; letter-spacing: .2em; color: #fff; }
.web-tuete { display: inline-flex; align-items: center; gap: 4px; padding: 3px 7px; border-radius: 99px; box-shadow: inset 0 0 0 1px #ffffff59; }
.web-tuete i { font-style: normal; display: grid; place-items: center; width: 14px; height: 14px; border-radius: 50%; background: #fff; color: #0b1a3a; font-size: 9px; font-weight: 600; }
.web-linie { margin: 0 0 3px; font-size: 10.5px; color: #ffffffbf; }
.web-titel { margin: 0 0 9px; font: 600 25px/1 'Familjen Grotesk', sans-serif; letter-spacing: -.03em; }
.web-kauf { display: flex; align-items: center; gap: 10px; font-size: 12px; }
.web-kauf span { font-weight: 600; }
.web-kauf em { font-style: normal; padding: 6px 11px; border-radius: 99px; background: #fff; color: #0b1a3a; font-weight: 600; font-size: 11px; }

/* Produktseite hinter dem Schuh */
.web-produkt { position: absolute; inset: 0; display: flex; flex-direction: column; padding: 11px 12px 12px; color: #0b1a3a;
  background: radial-gradient(90% 60% at 60% 30%, #ffffff 0%, transparent 70%), linear-gradient(180deg, #eef3fa 0%, #d8e2f0 100%); }
.web-produkt .web-nav { color: #0b1a3ab3; }
.web-produkt .web-nav b { color: #0b1a3a; }
.web-produkt .web-tuete { box-shadow: inset 0 0 0 1px #0b1a3a33; }
.web-produkt .web-tuete i { background: var(--kobalt); color: #fff; }
.wp-buehne { position: relative; flex: 1; }
.wp-boden { position: absolute; left: 22%; right: 16%; bottom: 10%; height: 18%; border-radius: 50%; background: radial-gradient(closest-side, #0b1a3a59, #0b1a3a00); filter: blur(4px); }
.wp-titel { margin: 0 0 2px; font: 600 21px/1 'Familjen Grotesk', sans-serif; letter-spacing: -.03em; }
.wp-preis { margin: 0 0 8px; font-size: 11px; color: #0b1a3ab3; }
.wp-preis b { margin-left: 4px; color: #0b1a3a; font-weight: 600; }
.wp-groessen { display: flex; gap: 4px; margin-bottom: 8px; }
.wp-groessen span { display: grid; place-items: center; width: 27px; height: 22px; border-radius: 6px; font-size: 10px; box-shadow: inset 0 0 0 1px #0b1a3a2e; background: #ffffff8c; }
.wp-groessen .is-gewaehlt { background: var(--kobalt); color: #fff; box-shadow: none; }
.wp-knopf { align-self: stretch; display: grid; place-items: center; height: 30px; border-radius: 99px; background: #0b1a3a; color: #fff; font-size: 11px; font-weight: 600; }
.web-seite { transition: opacity .7s var(--ease), transform 1.1s var(--ease), filter .7s var(--ease); }
.lk--web.is-raus .web-seite { opacity: 0; transform: scale(1.12); filter: blur(6px); pointer-events: none; }

.lk-raus--schuh { left: -4%; top: -17%; width: 128%; aspect-ratio: 1200 / 831; }
.lk-raus--schuh canvas, .lk-raus--schuh .schuh-still { position: absolute; left: 0; top: 0; width: 100%; height: 100%; }
.schuh-still { object-fit: contain; padding: 9% 6% 13%; }
.schuh-schatten { position: absolute; left: 22%; right: 18%; bottom: 6%; height: 16%; border-radius: 50%;
  background: radial-gradient(closest-side, #000818d9, #00081800); filter: blur(6px); transform: translateZ(-60px); }
.lk-raus--schuh > * { opacity: 0; transition: opacity .5s var(--ease), transform 1s var(--ease); }
.lk-raus--schuh canvas, .lk-raus--schuh .schuh-still { transform: translate3d(-6%, 34%, -40px) scale(.62) rotate(-4deg); }
.lk--web.is-raus .web-held { transform: scale(1.25); }
.lk--web.is-raus .web-ui { opacity: 0; transform: translateY(8px); }
.lk--web.is-raus .lk-raus--schuh > * { opacity: 1; }
.lk--web.is-raus .lk-raus--schuh canvas, .lk--web.is-raus .lk-raus--schuh .schuh-still { transform: none; }
.lk--web.is-raus .schuh-schatten { opacity: .9; }
/* Ist eine andere Karte gewählt, sinkt der Schuh auf seine Produktseite zurück */
.lk--web.is-raus:not(.is-aktiv) .lk-raus--schuh { transform: translate3d(0, 21%, 0) scale(.7); opacity: .78; transition: transform .6s var(--ease), opacity .6s var(--ease); }
.lk--web.is-raus .lk-raus--schuh { transition: transform .6s var(--ease), opacity .6s var(--ease); }
.schuh-still { display: none; }
html.ohne-drehen .schuh-drehen { display: none; }
html.ohne-drehen .schuh-still { display: block; }
/* Pixel, die beim Wechsel aus der Website fliegen */
.pix { position: absolute; width: 5px; height: 5px; background: #e8f4ff; box-shadow: 0 0 8px #bcd6ff; opacity: 0; transform: translateZ(30px); }

/* ===== 2 · Programm ===== */
.lk-fenster--prog { background: #fdfdfb; box-shadow: inset 0 0 0 1px #20211f1f, 0 1px 0 #fff; color: var(--tinte); }
.prog { position: absolute; inset: 0; display: flex; flex-direction: column; padding: 10px 10px 10px; font-size: 10px; }
.prog-kopf { display: flex; align-items: center; gap: 7px; padding: 0 2px 9px; border-bottom: 1px solid #20211f14; }
.prog-marke { position: relative; display: grid; place-items: center; width: 21px; height: 21px; border-radius: 6px; background: var(--kobalt); color: #fff; font: 700 11.5px/1 'Familjen Grotesk', sans-serif; }
.prog-marke::after { content: ''; position: absolute; right: -2px; top: -2px; width: 7px; height: 7px; border-radius: 50%; background: var(--neon); box-shadow: 0 0 0 2px #fdfdfb; }
.prog-name { font: 600 13px/1 'Familjen Grotesk', sans-serif; letter-spacing: -.015em; }
.prog-tag { margin-left: auto; color: #20211f8c; font-size: 10px; }
.prog-du { display: grid; place-items: center; width: 21px; height: 21px; border-radius: 50%; background: var(--tinte); color: var(--papier); font-size: 8.5px; font-weight: 600; }
.prog-spalten { flex: 1; display: grid; grid-template-columns: repeat(3, 1fr); gap: 5px; padding-top: 9px; min-height: 0; }
.prog-spalte { position: relative; display: flex; flex-direction: column; gap: 5px; padding: 6px 5px 5px; border-radius: 10px; background: #20211f07; transition: background-color .45s var(--ease), box-shadow .45s var(--ease); }
.prog-spalte p { margin: 0 0 1px 2px; font-weight: 600; font-size: 10px; color: #20211fd9; }
.prog-platz { display: block; height: 64px; border-radius: 8px; transition: box-shadow .45s var(--ease), background-color .45s; }
.prog-spalte.is-ziel { background: #2442eb10; box-shadow: inset 0 0 0 1px #2442eb2e; }
.prog-spur { display: grid; grid-template-columns: 17px 1fr; column-gap: 5px; align-items: center; height: 100%; padding: 0 6px 0 5px; border-radius: 8px;
  box-shadow: inset 0 0 0 1px #2442eb2e; background: #2442eb08; opacity: 0; transition: opacity .5s var(--ease) .25s; }
.prog-spur b { grid-row: 1 / 3; display: grid; place-items: center; width: 17px; height: 17px; border-radius: 50%; background: #2442eb24; color: #1d36c9; font-size: 7.5px; font-weight: 700; }
.prog-spur em { align-self: end; font-style: normal; font-weight: 600; font-size: 9.5px; color: #20211fb3; }
.prog-spur small { align-self: start; font-size: 8.5px; color: #1d36c9; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.prog-spur em { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.prog-spur small::before { content: '✓ '; }
.prog-platz.is-durch .prog-spur { opacity: 1; }
.prog-spalte.is-ziel .prog-platz { box-shadow: inset 0 0 0 1.5px #2442eb59; background: #2442eb0a; }
.prog-k { display: grid; grid-template-columns: 17px 1fr; grid-template-rows: auto auto; column-gap: 5px; align-items: center; padding: 6px 6px 6px 5px; border-radius: 8px;
  background: #fff; box-shadow: 0 1px 2px #20211f17, inset 0 0 0 1px #20211f0f; }
.prog-k b { grid-row: 1 / 3; display: grid; place-items: center; width: 17px; height: 17px; border-radius: 50%; background: #2442eb1c; color: #1d36c9; font-size: 7.5px; font-weight: 700; }
.prog-k em { font-style: normal; font-weight: 600; font-size: 9.5px; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.prog-k small { font-size: 8.5px; line-height: 1.2; color: #20211f8c; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.prog-k.is-ok small { color: #3d4a00; }
.prog-k.is-ok small::before { content: ''; display: inline-block; width: 6px; height: 6px; margin-right: 3px; border-radius: 50%; background: #9bbd00; vertical-align: 0; }

.lk-raus--prog { left: 10px; top: 10px; width: calc(100% - 20px); height: 54%; transform: rotateX(var(--rx)) rotateY(var(--ry)); }
.prog-blatt:not([data-stufe="2"]) .blatt-z { display: none; }
.prog-blatt:not([data-stufe="2"]) .blatt-wer { margin-bottom: 3px; }
.prog-blatt:not([data-stufe="2"]) .blatt-fuss { margin-top: 3px; padding-top: 4px; }
.prog-blatt:not([data-stufe="2"]) { padding: 5px 6px 6px; }
.prog-blatt {
  position: absolute; left: 0; top: 0; width: var(--bw, 84px); padding: 7px 7px 7px; border-radius: 9px; background: #fff; color: var(--tinte); font-size: 9px;
  box-shadow: 0 1px 0 #fff inset, 0 0 0 1px #2442eb38, 0 14px 24px -12px #20211f8c, 0 3px 8px -3px #20211f40;
  transform: translate3d(var(--bx, 0px), var(--by, 0px), var(--bz, 0px)) rotate(var(--br, 0deg)) scale(var(--bs, 1)); transform-origin: 30% 30%;
  transition: transform .9s var(--ease), box-shadow .9s var(--ease);
}
.blatt-kopf { display: flex; align-items: center; gap: 5px; margin-bottom: 5px; }
.blatt-kopf i { width: 7px; height: 7px; border-radius: 2px; background: var(--kobalt); }
.blatt-kopf b { font: 600 10.5px/1 'Familjen Grotesk', sans-serif; }
.blatt-wer { display: flex; align-items: center; gap: 4px; margin: 0 0 6px; font-weight: 600; font-size: 9.5px; }
.blatt-wer b { display: grid; place-items: center; width: 15px; height: 15px; border-radius: 50%; background: var(--kobalt); color: #fff; font-size: 7px; }
.blatt-z { display: block; width: var(--w); height: 3.5px; margin-bottom: 4px; border-radius: 2px; background: #20211f1f; }
.blatt-fuss { display: flex; align-items: center; justify-content: space-between; gap: 4px; margin-top: 6px; padding-top: 5px; border-top: 1px dashed #20211f26; }
.blatt-fuss span { padding: 2px 5px; border-radius: 99px; background: #2442eb17; color: var(--kobalt); font-weight: 600; font-size: 8px; white-space: nowrap; }
.blatt-fuss b { font-weight: 500; font-size: 8px; color: #20211f99; white-space: nowrap; }
.prog-blatt[data-stufe='2'] .blatt-fuss span { background: var(--neon); color: var(--tinte); }
.prog-chip { position: absolute; right: -24%; top: -12%; padding: 8px 12px; border-radius: 99px; background: var(--tinte); color: var(--neon); font: 600 11.5px/1 'Instrument Sans', sans-serif;
  box-shadow: 0 16px 28px -12px #000d; opacity: 0; transform: translate3d(-10px, 8px, 40px) scale(.9); transition: opacity .4s var(--ease), transform .6s var(--ease); white-space: nowrap; }
.lk--prog[data-stufe='2'] .prog-chip { opacity: 1; transform: translate3d(0, 0, 70px) scale(1); }
.lk--prog[data-stufe='2'] .prog-blatt { box-shadow: 0 1px 0 #fff inset, 0 0 0 1px #2442eb4d, 0 40px 50px -22px #20211fb3, 0 12px 20px -10px #20211f66; }

/* ===== 3 · KI-Agent: Kai ===== */
.lk-fenster--ki { background: #050a1a; box-shadow: inset 0 0 0 1px #4d6bff40; }
.kai-bild { position: absolute; left: 0; top: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 26%; transform: scale(1.18); transform-origin: 50% 30%; }
.kai-zerfall { position: absolute; z-index: 15; pointer-events: none; transform: rotateX(var(--rx)) rotateY(var(--ry)); transition: transform .5s var(--ease); }
html:not(.kai-gl) .kai-zerfall { display: none; }
html.kai-gl .kai-mensch, html.kai-gl .kai-glas { visibility: hidden; }
.lk--ki .lk-fenster::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, transparent 55%, #050a1ab3 100%); }

.lk-raus--chat { left: 50%; top: 9%; width: 98%; display: flex; flex-direction: column; align-items: flex-end; gap: 7px; }
.kai-schild { position: absolute; z-index: 16; left: 18px; right: auto; bottom: auto; top: calc(10px + (var(--h) - 10px) * .54 - 28px); transform: rotateX(var(--rx)) rotateY(var(--ry)) translateZ(2px); transition: transform .5s var(--ease); }
.chat-b { margin: 0; max-width: 90%; padding: 8px 12px; border-radius: 16px; font-size: 12px; line-height: 1.34; box-shadow: 0 18px 34px -16px #000000d9;
  opacity: 0; transform: translate3d(-8px, 10px, 0) scale(.94); transition: opacity .45s var(--ease), transform .6s var(--ease); }
.chat-b--kunde { align-self: flex-start; margin-left: 4%; background: var(--papier); color: var(--tinte); border-bottom-left-radius: 5px; }
.chat-b--kai { background: linear-gradient(160deg, #3557ff, #2442eb 60%, #1f38cf); color: #fff; border-bottom-right-radius: 5px; }
.chat-b--kai p { margin: 0; contain: layout; }
.chat-wer { display: block; margin-bottom: 3px; font-size: 10.5px; font-weight: 600; color: #d7f52a; }
.chat-schritte { display: flex; flex-wrap: wrap; gap: 4px; margin: 8px 0 0; padding: 0; list-style: none; }
.chat-schritte li { white-space: nowrap; display: inline-flex; align-items: center; gap: 5px; padding: 3px 8px 3px 6px; border-radius: 99px; background: #040b1840; font-size: 10.5px; color: #ffffffe6;
  opacity: 0; transform: translateY(4px); transition: opacity .3s, transform .4s var(--ease); }
.chat-schritte li::before { content: ''; width: 11px; height: 11px; border-radius: 50%; background: var(--neon) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M3 6.2 5.1 8.2 9 4' fill='none' stroke='%2320211f' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 11px no-repeat; }
.chat-frei { font: inherit; border: 0; cursor: pointer; pointer-events: auto; display: flex; align-items: center; gap: 10px; padding: 6px 6px 6px 12px; border-radius: 99px; background: #050a1af2; color: #fff; font-size: 11.5px;
  box-shadow: inset 0 0 0 1px #ffffff1f, 0 16px 30px -14px #000; opacity: 0; transform: translate3d(0, 10px, 0); transition: opacity .45s var(--ease), transform .6s var(--ease); }
.chat-frei b { padding: 7px 12px; border-radius: 99px; background: var(--neon); color: var(--tinte); font-weight: 600; font-size: 11.5px; transition: transform .2s var(--ease); }
.chat-frei.is-frei b { background: #fff; }
.lk--ki [data-chat].is-da { opacity: 1; transform: none; }

/* ===== 4 · Komplettkonzept ===== */
.lk-fenster--komplett { background: radial-gradient(80% 70% at 60% 40%, #10235c 0%, #061226 70%); box-shadow: inset 0 0 0 1px #20211f33; }
.k-raum { position: absolute; inset: 0; perspective: 700px; }
.k-web, .k-prog { position: absolute; border-radius: 11px; overflow: hidden; transition: transform .9s var(--ease), box-shadow .9s var(--ease); }
.k-web { left: 7%; top: 8%; width: 60%; aspect-ratio: 16 / 10.4; box-shadow: 0 0 0 1px #ffffff2e, 0 20px 30px -16px #000;
  transform: translate3d(0, 0, 0) rotate(-3deg); }
.k-web img { width: 100%; height: 100%; object-fit: cover; }
.k-fische { position: absolute; z-index: 2; left: 0; right: 0; bottom: 0; width: 100%; height: 58%; opacity: 0; transition: opacity .6s var(--ease); }
.lk--komplett.is-raus .k-fische { opacity: 1; }
.k-web::after { content: ''; position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, #0b1d3a8c, transparent 45%, #06122699); pointer-events: none; }
.k-web-ui { position: absolute; z-index: 3; inset: 0; padding: 8px 9px; display: flex; flex-direction: column; color: #fff; }
.k-web-ui b { font: 600 10.5px/1 'Familjen Grotesk', sans-serif; letter-spacing: .02em; }
.k-web-ui p { margin: auto 0 5px; font: 600 15px/1 'Familjen Grotesk', sans-serif; letter-spacing: -.02em; }
.k-web-ui em { align-self: flex-start; font-style: normal; padding: 4px 8px; border-radius: 99px; background: #fff; color: #0b1a3a; font-size: 9px; font-weight: 600; transition: box-shadow .3s, background-color .3s; }
.k-prog { left: 18%; bottom: 7%; width: 64%; padding: 8px 9px 9px; background: #f4f4ef; color: var(--tinte); box-shadow: 0 0 0 1px #20211f1f, 0 20px 30px -14px #000;
  transform: translate3d(0, 0, 0) rotate(2deg); }
.k-prog-kopf { display: flex; justify-content: space-between; margin: 0 0 6px; font-size: 9.5px; }
.k-prog-kopf b { font: 600 11px/1 'Familjen Grotesk', sans-serif; }
.k-prog-kopf span { color: #20211f99; }
.k-raster { display: grid; grid-template-columns: repeat(7, 1fr); gap: 3px; }
.k-raster i { height: 13px; border-radius: 3px; background: #20211f0f; }
.k-raster i.b { background: #2442eb33; }
.k-raster i.n { background: var(--neon); box-shadow: 0 0 0 1px #20211f33; transition: background-color .4s, transform .5s var(--ease); }
.lk--komplett:not(.is-gebucht) .k-raster i.n { background: #20211f0f; box-shadow: none; }
.k-neu { position: absolute; left: 9px; bottom: 6px; padding: 2px 6px; border-radius: 99px; background: var(--tinte); color: var(--neon); font-size: 8.5px; font-weight: 600;
  opacity: 0; transform: translateY(3px); transition: opacity .35s var(--ease), transform .5s var(--ease); }
.lk--komplett.is-gebucht .k-neu { opacity: 1; transform: none; }
.k-prog { padding-bottom: 24px; }
.k-web-ui em.is-gedrueckt { background: var(--neon); box-shadow: 0 0 0 4px #d7f52a40; }
.k-faden { position: absolute; left: 0; top: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; z-index: 19;
  transform: rotateX(var(--rx)) rotateY(var(--ry)) translateZ(30px); transition: transform .5s var(--ease); }
.k-faden-weg { fill: none; stroke: var(--neon); stroke-width: 2.2; stroke-linecap: round; filter: drop-shadow(0 0 5px #d7f52acc); opacity: 0; stroke-dasharray: 2 7; transition: opacity .5s; }
.k-funke { fill: #fff; filter: drop-shadow(0 0 6px #d7f52a) drop-shadow(0 0 2px #fff); opacity: 0; }
.lk--komplett.is-raus .k-faden-weg { opacity: 1; stroke-dasharray: none; }
.lk--komplett.is-raus .k-funke { opacity: 1; }
.lk--komplett.is-raus .k-web { transform: translate3d(-6px, -6px, 30px) rotate(-5deg); box-shadow: 0 0 0 1px #ffffff40, 0 30px 40px -18px #000; }
.lk--komplett.is-raus .k-prog { transform: translate3d(6px, 6px, 18px) rotate(3deg); }

.lk-raus--telefon { right: -15%; top: -3%; width: 47%; }
.tel { padding: 11px 12px 13px; border-radius: 20px; color: #fff; background: linear-gradient(170deg, #1b2c63 0%, #0c1838 55%, #070e24 100%);
  box-shadow: inset 0 1px 0 #ffffff33, inset 0 0 0 1px #4d6bff4d, 0 30px 50px -22px #000000f2, 0 0 40px -10px #2442eb80;
  opacity: 0; transform: translate3d(-30px, 16px, -20px) rotate(4deg) scale(.9); transition: opacity .5s var(--ease), transform .8s var(--ease); }
.tel-kopf { display: flex; align-items: center; gap: 6px; margin: 0 0 9px; font-size: 10.5px; font-weight: 600; }
.tel-kopf i { width: 7px; height: 7px; border-radius: 50%; background: var(--neon); box-shadow: 0 0 0 3px #d7f52a33; }
.tel-welle { display: flex; align-items: center; gap: 3px; height: 30px; margin-bottom: 9px; }
.tel-welle i { flex: 1; height: calc(20% + var(--h, .3) * 80%); border-radius: 2px; background: var(--neon); opacity: .9; }
.tel-welle i:nth-child(1) { --h: .25 } .tel-welle i:nth-child(2) { --h: .5 } .tel-welle i:nth-child(3) { --h: .8 } .tel-welle i:nth-child(4) { --h: .45 }
.tel-welle i:nth-child(5) { --h: 1 } .tel-welle i:nth-child(6) { --h: .62 } .tel-welle i:nth-child(7) { --h: .35 } .tel-welle i:nth-child(8) { --h: .74 }
.tel-welle i:nth-child(9) { --h: .9 } .tel-welle i:nth-child(10) { --h: .4 } .tel-welle i:nth-child(11) { --h: .58 } .tel-welle i:nth-child(12) { --h: .3 }
.tel-welle i:nth-child(13) { --h: .5 } .tel-welle i:nth-child(14) { --h: .2 }
.tel-zeile { margin: 0 0 6px; padding: 6px 8px; border-radius: 10px; background: #ffffff14; font-size: 10.5px; line-height: 1.3; }
.tel-zeile--gast { background: #f4f4ef; color: var(--tinte); }
.lk--komplett.is-raus .tel { opacity: 1; transform: none; }

/* ---------- Tastatur und Fokus ---------- */
.lk:focus-within { z-index: 41; }

@media (prefers-reduced-motion: reduce) {
  .lk, .lk-karte, .lk-raus, .web-held, .web-ui, .prog-blatt, .chat-b, .tel, .k-web, .k-prog { transition: none !important; }
}

/* Ohne JavaScript: die vier Karten nebeneinander bzw. untereinander, lesbar und erreichbar */
.lf-ohne-js .lf-buehne { height: auto; }
.lf-ohne-js .lf-faecher { position: static; display: flex; flex-wrap: wrap; justify-content: center; gap: 28px; width: auto; height: auto; transform: none; }
.lf-ohne-js .lk { position: relative; left: auto; bottom: auto; margin: 0; transform: none; }
.lf-ohne-js .lk-raus, .lf-ohne-js .kai-zerfall, .lf-ohne-js .k-faden { display: none; }

/* ================= Handy und Hochformat bis 900 px: das Rad ================= */
@media (max-width: 900px) {
  #leistungen.lf { min-height: 0; padding: 30px 0 6px; }
  .lf-kopf { padding: 0 22px; }
  #leistungen #services-title { font-size: clamp(34px, 9.4vw, 48px); line-height: 1.04; max-width: 12ch; }

  .lf-buehne { height: auto; margin: 0; padding: 54px 0 0; }
  .lf-faecher { position: relative; left: auto; bottom: auto; width: 100%; height: 494px; transform: none; perspective: 1100px; perspective-origin: 50% 40%; touch-action: pan-y; }

  .lk { --b: min(300px, 77vw); --h: 480px; top: 0; bottom: auto; left: 50%;
    transform: translate3d(var(--lk-x), var(--lk-dy), var(--lk-z, 0px)) rotateY(var(--lk-yr, 0deg)) rotate(var(--lk-r)) scale(var(--lk-ds));
    transition: transform .55s var(--ease), opacity .4s var(--ease); perspective: 1000px; }
  .lk--web, .lk--prog, .lk--ki { --b: min(300px, 77vw); --h: 480px; }
  .lk--komplett { --b: min(312px, 80vw); --h: 496px; top: -8px; }
  .lk.is-weit { opacity: 0; pointer-events: none; }
  .lk.is-seite .lk-karte::before, .lf[data-aktiv] .lk:not(.is-aktiv) .lk-karte::before { opacity: .42; }
  .lf-faecher.zieht .lk { transition: opacity .4s var(--ease); }
  .lk-karte { border-radius: 24px; }
  .lk-fenster { height: 52%; border-radius: 16px; }
  .lk--komplett .lk-fenster { height: 53%; }
  .lk-text { padding: 14px 18px 16px; }
  .lk-titel { font-size: 27px; }
  .lk--komplett .lk-titel { font-size: 29px; }
  .lk-satz { font-size: 13px; margin-bottom: 9px; }
  .lk-tags li { font-size: 11px; }
  .lk-preis b { font-size: 31px; }
  .lk-link { font-size: 13px; padding-left: 13px; }

  /* Was aus der Karte tritt, bleibt im Bildschirm */
  .lk-raus--schuh { left: -8%; top: -13%; width: 116%; }
  .lk-raus--chat { left: 16%; top: 19%; width: 92%; gap: 5px; }
  .chat-b { font-size: 11.5px; padding: 7px 10px; border-radius: 14px; }
  .chat-schritte { margin-top: 6px; flex-wrap: nowrap; } .chat-schritte li { font-size: 10px; padding: 2px 7px 2px 5px; white-space: nowrap; }
  .chat-frei { font-size: 11px; padding: 4px 4px 4px 11px; } .chat-frei b { padding: 6px 10px; font-size: 11px; }
  .lk-raus--telefon { right: -10%; top: 2%; width: 50%; }
  .prog-chip { right: -5%; top: -7%; }
  .kai-schild { top: calc(10px + (var(--h) - 10px) * .52 - 28px); }

  /* Leiste für den Daumen: springt direkt zu einer Leistung */
  .lf-leiste { position: relative; display: grid; max-width: 430px; grid-template-columns: repeat(4, auto); justify-content: space-between; gap: 2px; width: calc(100% - 28px); margin: 10px auto 0; padding: 4px;
    border-radius: 99px; background: #050c1ccc; box-shadow: inset 0 0 0 1px #ffffff1f; }
  .lf-leiste button { position: relative; z-index: 1; display: flex; align-items: center; gap: 5px; min-height: 44px; padding: 0 8px; border: 0; border-radius: 99px; background: none; white-space: nowrap;
    color: #f4f4efb3; font: 500 12px/1 'Instrument Sans', sans-serif; cursor: pointer; transition: color .3s; -webkit-tap-highlight-color: transparent; }
  .lf-leiste button i { width: 7px; height: 7px; border-radius: 50%; background: var(--farbe); box-shadow: 0 0 0 1px #ffffff26; }
  .lf-leiste button[aria-pressed='true'] { color: #fff; }
  .lf-marke { position: absolute; z-index: 0; top: 4px; bottom: 4px; left: 0; width: 0; border-radius: 99px; background: #ffffff1c; box-shadow: inset 0 0 0 1px #ffffff26;
    transform: translateX(var(--mx, 4px)); width: var(--mb, 80px); transition: transform .5s var(--ease), width .5s var(--ease); }


  @media (prefers-reduced-motion: reduce) { .lf-marke { transition: none; } }
}