/* focustrend.de/werkstatt — Hauptseite. Schriften liegen im eigenen Ordner (keine fremden Server). */
@font-face{font-family:"Plus Jakarta Sans";font-style:normal;font-weight:200 800;font-display:swap;src:url(assets/schrift/plus-jakarta-sans-normal-latin.woff2) format("woff2")}
@font-face{font-family:"DM Sans";font-style:normal;font-weight:100 1000;font-display:swap;src:url(assets/schrift/dm-sans-normal-latin.woff2) format("woff2")}

:root{
  --grund:#1c1c25; --grund2:#21212b; --flaeche:#272733; --flaeche2:#30303e; --rand:#3b3b4c;
  --text:#f1f2f7; --grau:#adb3c2; --leise:#858b9c;
  --violett:#7c6bff; --blau:#35b4f2; --gruen:#3ad98a;
  --kfz:#ff6a1a; --kfz2:#ffb020; --fahrrad:#2fd08a; --fahrrad2:#b6f23c; --motorrad:#ff2d55; --motorrad2:#ff7a1a;
  --verlauf:linear-gradient(100deg,#9a8bff 0%,#35b4f2 52%,#3ad98a 100%);
  --knopf:linear-gradient(100deg,#6a57f2 0%,#2f9cf0 100%);
  --kopf-h:68px;
  --titel:"Plus Jakarta Sans",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --schrift:"DM Sans",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:calc(var(--kopf-h) + 18px);-webkit-text-size-adjust:100%}
body{margin:0;background:var(--grund);color:var(--text);font:400 17px/1.6 var(--schrift);overflow-x:hidden;overflow-x:clip;-webkit-font-smoothing:antialiased}
h1,h2,h3{font-family:var(--titel);margin:0;letter-spacing:-.02em;line-height:1.12}
p{margin:0}
a{color:inherit}
img,svg{display:block;max-width:100%}
button,input,select,textarea{font:inherit;color:inherit}
.innen{width:min(1180px,100% - 40px);margin-inline:auto}
.sprung{position:absolute;left:-9999px;top:8px;z-index:200;background:#fff;color:#111;padding:10px 16px;border-radius:10px}
.sprung:focus{left:12px}
.leise{color:var(--leise);font-weight:400}
.sym{width:20px;height:20px;flex:none}
.verlauf{background:var(--verlauf);-webkit-background-clip:text;background-clip:text;color:transparent}

/* Räder drehen */
.dreh{transform-box:fill-box;transform-origin:center;animation:dreh 1.5s linear infinite}
@keyframes dreh{to{transform:rotate(360deg)}}

/* Einblenden beim Scrollen */
.js .auf{opacity:0;translate:0 28px;transition:opacity .7s cubic-bezier(.2,.7,.2,1),translate .7s cubic-bezier(.2,.7,.2,1)}
.js .auf.da{opacity:1;translate:none}

/* Knöpfe */
.knopf{display:inline-flex;align-items:center;justify-content:center;gap:10px;padding:15px 24px;border:0;border-radius:15px;background:var(--knopf);color:#fff;font:700 1rem/1.2 var(--titel);text-decoration:none;cursor:pointer;box-shadow:0 10px 30px -10px rgba(92,108,255,.75);transition:transform .2s,box-shadow .2s,filter .2s}
.knopf:hover{transform:translateY(-2px);box-shadow:0 16px 34px -10px rgba(92,108,255,.9);filter:brightness(1.07)}
.knopf:active{transform:translateY(0)}
.knopf:focus-visible,.reiter-kn:focus-visible,a:focus-visible{outline:3px solid #fff;outline-offset:3px}
.knopf-hell{background:transparent;box-shadow:inset 0 0 0 1.5px #5a5a70;color:var(--text)}
.knopf-hell:hover{box-shadow:inset 0 0 0 1.5px #fff;filter:none}
.knopf-klein{padding:11px 16px;border-radius:13px;font-size:.92rem}
.knopf-voll{width:100%}
.knopf-zoom{background:linear-gradient(100deg,#14a66a 0%,#2f9cf0 100%);box-shadow:0 10px 30px -10px rgba(47,208,138,.7)}
.knopf-zoom:hover{box-shadow:0 16px 34px -10px rgba(47,208,138,.85)}
.knopf[disabled]{opacity:.6;cursor:progress;transform:none}
.knopf .sym{transition:transform .25s}
.knopf:hover .sym:last-child{transform:translateX(4px)}

/* Kopfzeile – deckend, damit nichts durchschimmert */
.kopf{position:fixed;inset:0 0 auto 0;z-index:100;height:var(--kopf-h);background:var(--grund);border-bottom:1px solid transparent;transition:border-color .25s,box-shadow .25s}
.kopf.unten{border-color:var(--rand);box-shadow:0 10px 30px -18px #000}
.kopf-innen{height:100%;display:flex;align-items:center;gap:28px}
.kopf-logo img{height:34px;width:auto}
.kopf-nav{display:flex;gap:24px;margin-left:auto}
.kopf-nav a{color:var(--grau);text-decoration:none;font-weight:500;font-size:.98rem;padding:6px 0;position:relative;transition:color .2s}
.kopf-nav a::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;border-radius:2px;background:var(--verlauf);transform:scaleX(0);transform-origin:left;transition:transform .25s}
.kopf-nav a:hover{color:#fff}
.kopf-nav a:hover::after{transform:scaleX(1)}

/* Kopfbereich */
.held{position:relative;padding:calc(var(--kopf-h) + 54px) 0 64px;overflow:hidden}
.held-licht{position:absolute;inset:0;pointer-events:none}
.held-licht i{position:absolute;border-radius:50%;animation:licht 16s ease-in-out infinite alternate}
.held-licht i:nth-child(1){width:720px;height:720px;left:-260px;top:-240px;background:radial-gradient(closest-side,rgba(108,87,242,.38),transparent)}
.held-licht i:nth-child(2){width:640px;height:640px;right:-200px;top:40px;background:radial-gradient(closest-side,rgba(53,180,242,.26),transparent);animation-duration:20s}
.held-licht i:nth-child(3){width:560px;height:560px;left:38%;bottom:-320px;background:radial-gradient(closest-side,rgba(58,217,138,.2),transparent);animation-duration:24s}
@keyframes licht{to{transform:translate(60px,40px) scale(1.12)}}
.held-raster{position:relative;display:grid;grid-template-columns:1.08fr .92fr;gap:48px;align-items:center}
.marke{display:inline-flex;align-items:center;gap:10px;padding:7px 14px 7px 12px;border-radius:99px;background:var(--flaeche);border:1px solid var(--rand);font:600 .84rem/1.2 var(--titel);letter-spacing:.04em;text-transform:uppercase;color:#d7dbe7}
.marke-punkt{width:9px;height:9px;border-radius:50%;background:var(--gruen);box-shadow:0 0 0 0 rgba(58,217,138,.7);animation:puls 2s infinite}
@keyframes puls{70%{box-shadow:0 0 0 9px rgba(58,217,138,0)}100%{box-shadow:0 0 0 0 rgba(58,217,138,0)}}
h1{font-size:clamp(2.15rem,4.5vw,3.65rem);font-weight:800;margin-top:20px}
.held-wechsel{margin-top:14px;font:700 clamp(1.2rem,2.3vw,1.65rem)/1.4 var(--titel);color:var(--grau)}
.wechsel{display:inline-grid;vertical-align:bottom;height:1.4em;overflow:hidden}
.wechsel span{grid-area:1/1;opacity:0;animation:wechsel 9s infinite}
.wechsel span:nth-child(2){animation-delay:3s}
.wechsel span:nth-child(3){animation-delay:6s}
.w-kfz{color:var(--kfz)}.w-fahrrad{color:var(--fahrrad)}.w-motorrad{color:var(--motorrad)}
@keyframes wechsel{0%{opacity:0;transform:translateY(80%)}5%,30%{opacity:1;transform:none}35%,100%{opacity:0;transform:translateY(-80%)}}
.held-satz{margin-top:16px;max-width:36em;color:var(--grau);font-size:1.1rem}
.held-satz strong{color:#fff;font-weight:700}
.haken-liste{list-style:none;margin:22px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:10px}
.haken-liste li{display:inline-flex;align-items:center;gap:8px;padding:8px 14px 8px 10px;border-radius:99px;background:var(--flaeche);border:1px solid var(--rand);font-weight:500;font-size:.95rem}
.haken-liste .sym{width:18px;height:18px;color:var(--gruen);stroke-width:3}
.haken-spalte{flex-direction:column;align-items:flex-start}
.haken-liste li.haken-neu{padding:0;border-color:transparent;background:var(--knopf)}
.haken-neu a{display:inline-flex;align-items:center;gap:8px;padding:8px 14px 8px 10px;color:#fff;text-decoration:none;font-weight:600}
.haken-liste .haken-neu .sym{color:#fff;stroke-width:2}
.held-knoepfe{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px}

/* Drei kleine Webseiten als Fächer */
.held-bild{min-width:0}
.faecher{position:relative;aspect-ratio:1/.96;max-width:560px;margin-inline:auto}
.karte{position:absolute;width:50%;border-radius:16px;overflow:hidden;box-shadow:0 30px 60px -20px rgba(0,0,0,.75),0 0 0 1px rgba(255,255,255,.09);animation:schweb 7s ease-in-out infinite}
.karte-leiste{height:24px;display:flex;align-items:center;gap:5px;padding:0 10px;background:rgba(0,0,0,.28)}
.karte-leiste i{width:7px;height:7px;border-radius:50%;background:rgba(255,255,255,.35)}
.karte-leiste b{margin-left:8px;font:500 9.5px/1 var(--schrift);opacity:.7;letter-spacing:.02em}
.karte-buehne{position:relative;aspect-ratio:16/9.6;padding:9% 8%}
.karte-z1,.karte-z2{display:block;height:11px;border-radius:6px;background:currentColor;width:58%}
.karte-z2{height:7px;width:38%;margin-top:9px;opacity:.45}
.karte .fz{position:absolute;right:6%;bottom:12%;width:50%}
.karte-kn{position:absolute;left:8%;bottom:13%;padding:6px 11px;border-radius:8px;font:700 10px/1 var(--titel);color:#fff}
.karte-kfz{left:0;top:0;rotate:-6deg;background:linear-gradient(140deg,#151d2e,#0e1420);color:#f4f6fb;z-index:1}
.karte-kfz .fz{color:var(--kfz)}.karte-kfz .karte-kn{background:var(--kfz)}
.karte-fahrrad{left:50%;top:27%;rotate:5deg;background:linear-gradient(140deg,#f6f3ea,#e3f3d5);color:#0f5132;z-index:2;animation-delay:-2.3s}
.karte-fahrrad .karte-leiste{background:rgba(15,81,50,.1)}.karte-fahrrad .karte-leiste i{background:rgba(15,81,50,.35)}
.karte-fahrrad .fz{color:#12a56b}.karte-fahrrad .karte-kn{background:#0f5132}
.karte-motorrad{left:5%;top:62%;rotate:-3deg;background:linear-gradient(140deg,#1b0b12,#0a0a0d);color:#f2f2f4;z-index:3;animation-delay:-4.6s}
.karte-motorrad .fz{color:var(--motorrad)}.karte-motorrad .karte-kn{background:linear-gradient(90deg,#e5173f,#ff7a1a)}
@keyframes schweb{50%{translate:0 -12px}}
.schwebe{position:absolute;z-index:5;display:flex;align-items:center;gap:10px;padding:10px 14px 10px 10px;border-radius:15px;background:#fff;color:#16161f;box-shadow:0 18px 40px -14px rgba(0,0,0,.7);font-size:.84rem;line-height:1.25;animation:schweb 6s ease-in-out infinite}
.schwebe b{display:block;font-family:var(--titel);font-weight:700}
.schwebe small{color:#5d6272;font-size:.76rem}
.schwebe-rund{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;color:#fff;flex:none}
.schwebe-termin{right:-2%;top:5%;animation-delay:-1.4s}
.schwebe-termin .schwebe-rund{background:var(--gruen)}
.schwebe-domain{right:0;bottom:11%;animation-delay:-3.8s}
.schwebe-domain .schwebe-rund{background:var(--violett)}

/* Überschriften der Bereiche */
.kopfzeile{max-width:760px;margin:0 auto 40px;text-align:center}
.kopfzeile h2{font-size:clamp(1.8rem,3.5vw,2.75rem);font-weight:800;margin-top:14px}
.kopfzeile h2:first-child{margin-top:0}
.kopfzeile p:not(.marke){margin-top:14px;color:var(--grau);font-size:1.08rem}

/* Formulare */
.anfrage{position:relative;padding:44px 0 96px}
.anfrage-raster{display:grid;grid-template-columns:1fr 1fr;gap:24px;align-items:start}
.formular{position:relative;overflow:hidden;background:var(--flaeche);border:1px solid var(--rand);border-radius:26px;padding:30px 28px 28px;display:flex;flex-direction:column;gap:16px;scroll-margin-top:calc(var(--kopf-h) + 18px)}
.formular::before{content:"";position:absolute;inset:0 0 auto 0;height:5px;background:linear-gradient(90deg,#6a57f2,#35b4f2)}
.formular-zoom::before{background:linear-gradient(90deg,#14a66a,#35b4f2)}
.formular.ziel{animation:ziel 1.4s ease-out}
@keyframes ziel{0%{box-shadow:0 0 0 0 rgba(124,107,255,.7)}100%{box-shadow:0 0 0 22px rgba(124,107,255,0)}}
.formular-kopf{display:flex;gap:14px;align-items:flex-start;margin-bottom:2px}
.formular-ico{width:50px;height:50px;border-radius:15px;display:grid;place-items:center;flex:none;background:linear-gradient(135deg,#6a57f2,#35b4f2);color:#fff}
.formular-zoom .formular-ico{background:linear-gradient(135deg,#14a66a,#35b4f2)}
.formular-ico .sym{width:24px;height:24px}
.formular-kopf h3{font-size:1.4rem;font-weight:800}
.formular-kopf p{color:var(--grau);font-size:.96rem;margin-top:4px;line-height:1.45}
.feld-reihe{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.feld{display:flex;flex-direction:column;gap:6px;min-width:0}
.feld label,.wahl legend{font-weight:600;font-size:.9rem;color:#d9dce7}
.feld label i{font-style:normal;color:var(--kfz)}
.feld input,.feld select,.feld textarea{width:100%;min-width:0;padding:13px 14px;border-radius:13px;border:1.5px solid var(--rand);background:var(--grund);color:var(--text);font-size:16px;line-height:1.3;color-scheme:dark;transition:border-color .2s,box-shadow .2s;-webkit-appearance:none;appearance:none}
.feld input[type=date]{min-height:49px}
.feld select{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23adb3c2' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 12px center;background-size:18px;padding-right:38px}
.feld textarea{resize:vertical;min-height:62px}
.feld ::placeholder{color:#6d7384}
.feld input:focus,.feld select:focus,.feld textarea:focus{outline:0;border-color:var(--violett);box-shadow:0 0 0 4px rgba(124,107,255,.22)}
.formular-zoom .feld input:focus,.formular-zoom .feld select:focus,.formular-zoom .feld textarea:focus{border-color:var(--fahrrad);box-shadow:0 0 0 4px rgba(47,208,138,.2)}
.feld .falsch,.zusage.falsch input{border-color:#ff6b6b!important;box-shadow:0 0 0 4px rgba(255,107,107,.18)!important}
.wahl{border:0;margin:0;padding:0;min-width:0}
.wahl legend{padding:0;margin-bottom:6px}
.wahl-reihe{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.wahl-kn{position:relative;cursor:pointer}
.wahl-kn input{position:absolute;opacity:0;inset:0;width:100%;height:100%;margin:0;cursor:pointer}
.wahl-kn span{display:block;text-align:center;padding:11px 4px;border-radius:13px;border:1.5px solid var(--rand);background:var(--grund);font-weight:600;font-size:.93rem;transition:border-color .2s,background .2s,color .2s,transform .2s}
.wahl-kn:hover span{border-color:#6a6a82}
.wahl-kn input:focus-visible+span{outline:3px solid #fff;outline-offset:2px}
.wahl-kn input:checked+span{transform:translateY(-2px);color:#fff}
.wahl-kfz input:checked+span{border-color:var(--kfz);background:rgba(255,106,26,.2)}
.wahl-fahrrad input:checked+span{border-color:var(--fahrrad);background:rgba(47,208,138,.2)}
.wahl-motorrad input:checked+span{border-color:var(--motorrad);background:rgba(255,45,85,.2)}
.wahl-andere input:checked+span{border-color:var(--violett);background:rgba(124,107,255,.22)}
.design-hinweis{display:flex;align-items:center;gap:8px;padding:9px 10px 9px 14px;border-radius:12px;background:rgba(124,107,255,.16);border:1px solid rgba(124,107,255,.5);font-size:.92rem}
.design-hinweis[hidden]{display:none}
.design-hinweis b{font-weight:700}
.design-weg{margin-left:auto;width:30px;height:30px;border-radius:9px;border:0;background:rgba(255,255,255,.12);color:#fff;font-size:1.2rem;line-height:1;cursor:pointer}
.zusatz{display:flex;gap:11px;align-items:center;padding:11px 13px;border-radius:13px;border:1.5px dashed #5a5a70;font-size:.92rem;line-height:1.4;cursor:pointer;transition:border-color .2s,background .2s}
.zusatz input{width:22px;height:22px;flex:none;margin:0;accent-color:var(--violett)}
.zusatz:hover{border-color:#8a8aa6}
.zusatz:has(input:checked){border-style:solid;border-color:var(--violett);background:rgba(124,107,255,.16)}
.zusage{display:flex;gap:11px;align-items:flex-start;font-size:.87rem;line-height:1.45;color:var(--grau);cursor:pointer}
.zusage input{width:22px;height:22px;flex:none;margin:1px 0 0;border-radius:6px;accent-color:var(--violett)}
.zusage a{color:#fff}
.meldung{min-height:1.5em;font-size:.92rem;font-weight:500;color:#ff8f8f;margin:-4px 0}
.klein-hinweis{font-size:.86rem;color:var(--leise);text-align:center;margin-top:-4px}
.danke{position:absolute;inset:0;z-index:5;background:var(--flaeche);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;padding:30px;text-align:center;animation:danke .45s ease-out}
.danke[hidden]{display:none}
.danke h3{font-size:1.6rem;font-weight:800}
.danke p{color:var(--grau);max-width:22em}
.danke-rund{width:84px;height:84px;border-radius:50%;display:grid;place-items:center;background:linear-gradient(135deg,#14a66a,#3ad98a);color:#fff;animation:plopp .6s cubic-bezier(.3,1.6,.5,1) .1s backwards;box-shadow:0 0 0 12px rgba(58,217,138,.16)}
.danke-rund .sym{width:42px;height:42px;stroke-width:3;stroke-dasharray:24;stroke-dashoffset:24;animation:zeichnen .5s ease-out .45s forwards}
@keyframes danke{from{opacity:0}}
@keyframes plopp{from{transform:scale(.3);opacity:0}}
@keyframes zeichnen{to{stroke-dashoffset:0}}
.direkt{margin-top:30px;display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:10px 14px;color:var(--grau)}
.direkt a{display:inline-flex;align-items:center;gap:8px;padding:9px 15px;border-radius:99px;background:var(--flaeche);border:1px solid var(--rand);color:#fff;text-decoration:none;font-weight:600;transition:border-color .2s}
.direkt a:hover{border-color:#fff}
.direkt .sym{width:18px;height:18px;color:var(--blau)}

/* Beispiel-Designs */
.beispiele{position:relative;padding:96px 0;background:var(--grund2)}
.reiter{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.reiter-kn{display:flex;align-items:center;gap:16px;padding:15px 20px;border-radius:20px;border:1.5px solid var(--rand);background:var(--flaeche);color:var(--text);text-align:left;cursor:pointer;transition:border-color .25s,background .25s,transform .25s}
.reiter-kn:hover{transform:translateY(-2px);border-color:#6a6a82}
.reiter-ico{width:74px;flex:none;color:var(--leise);transition:color .25s}
.reiter-kn .dreh{animation-play-state:paused}
.reiter-kn:hover .dreh,.reiter-kn[aria-selected=true] .dreh{animation-play-state:running}
.reiter-text b{display:block;font:800 1.08rem/1.25 var(--titel)}
.reiter-text small{color:var(--grau);font-size:.88rem}
.reiter-kfz[aria-selected=true]{border-color:var(--kfz);background:linear-gradient(120deg,rgba(255,106,26,.24),rgba(255,176,32,.06))}
.reiter-kfz[aria-selected=true] .reiter-ico,.reiter-kfz:hover .reiter-ico{color:var(--kfz)}
.reiter-fahrrad[aria-selected=true]{border-color:var(--fahrrad);background:linear-gradient(120deg,rgba(47,208,138,.24),rgba(182,242,60,.06))}
.reiter-fahrrad[aria-selected=true] .reiter-ico,.reiter-fahrrad:hover .reiter-ico{color:var(--fahrrad)}
.reiter-motorrad[aria-selected=true]{border-color:var(--motorrad);background:linear-gradient(120deg,rgba(255,45,85,.26),rgba(255,122,26,.06))}
.reiter-motorrad[aria-selected=true] .reiter-ico,.reiter-motorrad:hover .reiter-ico{color:var(--motorrad)}

.buehne{position:relative;margin-top:34px;padding-right:9%;--schein:var(--kfz)}
.buehne[data-design=fahrrad]{--schein:var(--fahrrad)}
.buehne[data-design=motorrad]{--schein:var(--motorrad)}
.buehne-schein{position:absolute;inset:-6% -4% -10%;background:radial-gradient(60% 55% at 50% 50%,var(--schein),transparent 70%);opacity:.3;transition:background .5s;pointer-events:none}
.rahmen{position:relative;background:#0c0c12;box-shadow:0 40px 90px -30px #000}
.rahmen-pc{border-radius:16px;border:1px solid #4a4a5e;overflow:hidden}
.rahmen-leiste{height:40px;display:flex;align-items:center;gap:7px;padding:0 14px;background:#191922;border-bottom:1px solid #2c2c3a}
.rahmen-leiste i{width:11px;height:11px;border-radius:50%;background:#ff5f57}
.rahmen-leiste i:nth-child(2){background:#febc2e}
.rahmen-leiste i:nth-child(3){background:#28c840}
.rahmen-adr{margin:0 auto;padding:5px 22px;border-radius:8px;background:#0c0c12;color:var(--grau);font-size:.8rem;transform:translateX(-22px)}
.rahmen-sicht{position:relative;overflow:hidden;background:#0c0c12}
.rahmen-pc .rahmen-sicht{aspect-ratio:1280/760}
.rahmen-sicht iframe{position:absolute;left:0;top:0;border:0;transform-origin:0 0;transform:scale(var(--mass,.5));pointer-events:none;opacity:0;transition:opacity .45s}
.rahmen-sicht iframe.geladen{opacity:1}
.rahmen-handy{position:absolute;right:0;bottom:-34px;width:21%;border:7px solid #0c0c12;border-radius:30px;box-shadow:0 30px 70px -20px #000,0 0 0 1.5px #4a4a5e;overflow:hidden;z-index:2}
.rahmen-handy .rahmen-sicht{aspect-ratio:390/800;border-radius:22px}

.texte{display:grid;margin-top:74px}
.text{grid-area:1/1;display:grid;grid-template-columns:1.1fr .9fr;gap:40px;align-items:start;visibility:hidden;opacity:0;translate:0 14px;transition:opacity .4s,translate .4s,visibility 0s .4s}
.text.aktiv{visibility:visible;opacity:1;translate:none;transition:opacity .45s .1s,translate .45s .1s}
.text h3{font-size:1.75rem;font-weight:800}
.text h3 span{display:block;font-size:1rem;font-weight:600;letter-spacing:0;color:var(--grau);margin-top:6px}
.text p{margin-top:14px;color:var(--grau);font-size:1.06rem}
.farben{display:flex;gap:8px;margin-top:18px}
.farben i{width:36px;height:36px;border-radius:11px;box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.22)}
.text ul{list-style:none;margin:0;padding:0;display:grid;gap:11px}
.text li{display:flex;gap:11px;align-items:flex-start;font-weight:500}
.text li .sym{margin-top:3px;stroke-width:3}
.text-kfz li .sym{color:var(--kfz)}.text-fahrrad li .sym{color:var(--fahrrad)}.text-motorrad li .sym{color:var(--motorrad)}
.text-knoepfe{display:flex;flex-wrap:wrap;gap:12px;margin-top:24px}
.text-kfz .knopf-design{background:linear-gradient(100deg,#ff6a1a,#ff9d1a);box-shadow:0 10px 30px -10px rgba(255,106,26,.8)}
.text-fahrrad .knopf-design{background:linear-gradient(100deg,#12a56b,#2fd08a);box-shadow:0 10px 30px -10px rgba(47,208,138,.8)}
.text-motorrad .knopf-design{background:linear-gradient(100deg,#e5173f,#ff7a1a);box-shadow:0 10px 30px -10px rgba(255,45,85,.8)}

/* KI-Anruferkennung: Telefonat → KI erkennt → Termin im Kalender (Schritte setzt das Skript als Klassen st-1 … st-9) */
.ki{padding:96px 0 30px}
.ki-schau{display:grid;grid-template-columns:1.12fr 48px .8fr 48px 1.2fr;padding:30px;border-radius:30px;background:linear-gradient(130deg,#262052 0%,#1b2848 55%,#163d3c 100%);border:1px solid #45457a}
.ki-karte{position:relative;min-width:0;display:flex;flex-direction:column;padding:20px;border-radius:22px;background:#14141c;border:1px solid #3d3d55;box-shadow:0 30px 60px -34px #000}
.ki-titel{display:flex;align-items:center;gap:11px;margin-bottom:14px;font:700 .98rem/1.25 var(--titel)}
.ki-titel small{display:block;font:400 .78rem/1.3 var(--schrift);color:var(--grau)}
.ki-rund{width:40px;height:40px;border-radius:13px;display:grid;place-items:center;flex:none;color:#fff}
.ki-rund-tel{background:linear-gradient(135deg,#14a66a,#3ad98a);animation:klingel 2.4s ease-in-out infinite}
@keyframes klingel{0%,60%,100%{transform:none}66%{transform:rotate(-12deg)}72%{transform:rotate(11deg)}78%{transform:rotate(-8deg)}84%{transform:rotate(6deg)}}
.ki-rund-kal{background:linear-gradient(135deg,#2f6df0,#35b4f2)}
.ki-uhr{margin-left:auto;font:700 .9rem/1 var(--titel);font-variant-numeric:tabular-nums;color:var(--gruen);padding:6px 9px;border-radius:9px;background:rgba(58,217,138,.12)}
.ki-welle{display:flex;align-items:center;gap:3px;height:34px;margin-bottom:12px}
.ki-welle i{flex:1;height:100%;border-radius:3px;background:linear-gradient(#7c6bff,#35b4f2);transform:scaleY(.18);animation:welle 1.1s ease-in-out infinite}
.ki-welle i:nth-child(2n){animation-delay:-.35s;animation-duration:.9s}
.ki-welle i:nth-child(3n){animation-delay:-.6s;animation-duration:1.3s}
.ki-welle i:nth-child(5n){animation-delay:-.2s;animation-duration:.75s}
.ki-welle i:nth-child(7n){animation-delay:-.8s}
@keyframes welle{50%{transform:scaleY(1)}}
.ki-blase{max-width:92%;padding:10px 13px;border-radius:15px;font-size:.92rem;line-height:1.45;margin-bottom:9px;opacity:0;transform:translateY(12px) scale(.96);transition:opacity .45s,transform .45s cubic-bezier(.3,1.4,.5,1)}
.ki-blase small{display:block;font:700 .68rem/1.3 var(--titel);letter-spacing:.08em;text-transform:uppercase;opacity:.65;margin-bottom:2px}
.ki-kunde{align-self:flex-start;background:#24243a;border-bottom-left-radius:5px}
.ki-sie{align-self:flex-end;background:linear-gradient(120deg,#5a48e0,#2f86e6);border-bottom-right-radius:5px}
.ki-blase mark{background:transparent;color:inherit;padding:1px 4px;margin:0 -2px;border-radius:6px;transition:background .35s,color .35s}
.ki-hoert{margin-top:auto;display:flex;align-items:center;gap:8px;padding-top:6px;font:600 .82rem/1 var(--titel);color:var(--grau)}
.ki-hoert i{width:9px;height:9px;border-radius:50%;background:#ff4d6d;animation:blinken 1.2s infinite}
.ki-hoert .sym{width:16px;height:16px}
@keyframes blinken{50%{opacity:.25}}
.st-1 .b1,.st-4 .b2,.st-5 .b3{opacity:1;transform:none}
.st-2 .m1,.st-3 .m2,.st-6 .m3,.st-7 .m4{color:#fff}
.st-2 .m1{background:#6a57f2}.st-3 .m2{background:#e85a10}.st-6 .m3{background:#12955f}.st-7 .m4{background:#2a78d4}
.ki-fluss{display:flex;align-items:center;justify-content:center;gap:6px}
.ki-fluss i{width:7px;height:7px;border-radius:50%;background:#7a7aa6;opacity:.3;animation:fluss 1.2s infinite;transition:background .4s}
.ki-fluss i:nth-child(2){animation-delay:.2s}
.ki-fluss i:nth-child(3){animation-delay:.4s}
@keyframes fluss{30%{opacity:1;transform:scale(1.4)}60%{opacity:.3;transform:none}}
.st-1 .f1 i{background:#9a8bff}
.st-8 .f2 i{background:var(--gruen)}
.ki-kern{align-items:center;text-align:center;background:linear-gradient(180deg,#1c1936,#14141c)}
.ki-kugel{position:relative;width:74px;height:74px;border-radius:50%;display:grid;place-items:center;flex:none;margin:8px 0 14px;background:linear-gradient(135deg,#6a57f2,#35b4f2);color:#fff;animation:kugel 2.4s infinite}
.ki-kugel .sym{width:34px;height:34px}
@keyframes kugel{0%{box-shadow:0 0 0 0 rgba(124,107,255,.6)}70%,100%{box-shadow:0 0 0 18px rgba(124,107,255,0)}}
.ki-ring{position:absolute;inset:-9px;border-radius:50%;border:2px dashed rgba(154,139,255,.55);animation:dreh 9s linear infinite}
.ki-kern-titel{font:800 1.1rem/1.2 var(--titel);margin-bottom:14px}
.ki-liste{list-style:none;margin:0;padding:0;width:100%;display:grid;gap:8px;text-align:left}
.ki-liste li{display:grid;gap:3px;padding:9px 12px;border-radius:12px;background:#1d1d2a;border:1px solid #2f2f42;border-left:4px solid #3a3a50;transition:border-color .35s,background .35s}
.ki-liste span{font:700 .66rem/1.2 var(--titel);letter-spacing:.09em;text-transform:uppercase;color:var(--leise)}
.ki-liste b{justify-self:start;font:700 .95rem/1.3 var(--titel);color:transparent;background:#2c2c3e;border-radius:6px;transition:color .35s,background .35s}
.st-2 .k1 b,.st-3 .k2 b,.st-6 .k3 b,.st-7 .k4 b{color:#fff;background:transparent}
.st-2 .k1{border-left-color:#7c6bff;background:#221f3a}
.st-3 .k2{border-left-color:#ff6a1a;background:#2c2018}
.st-6 .k3{border-left-color:#3ad98a;background:#17281f}
.st-7 .k4{border-left-color:#35b4f2;background:#17232f}
.ki-status{margin-top:auto;padding-top:14px;display:grid;font:700 .86rem/1.2 var(--titel)}
.ki-status span{grid-area:1/1;display:inline-flex;align-items:center;justify-content:center;gap:7px;transition:opacity .35s,transform .35s}
.ki-status-a{color:var(--grau)}
.ki-status-b{color:var(--gruen);opacity:0;transform:scale(.8)}
.ki-status .sym{width:18px;height:18px;stroke-width:3}
.st-8 .ki-status-a{opacity:0}
.st-8 .ki-status-b{opacity:1;transform:none}
.ki-kal{background:#0b132b;border-color:#26345e}
.ki-woche{display:grid;grid-template-columns:22px repeat(5,minmax(0,1fr));grid-template-rows:24px repeat(5,46px);gap:4px}
.kw-kopf{font:700 .78rem/24px var(--titel);text-align:center;color:#8f9ac0}
.kw-heute{color:#fff}
.kw-zeit{font:600 .68rem/1 var(--schrift);color:#6b77a0;padding-top:3px;font-variant-numeric:tabular-nums}
.kw-feld{border-radius:8px;background:#111c3d}
.kw-termin{z-index:1;border-radius:8px;padding:6px 6px 0;font-size:.66rem;line-height:1.25;color:#e6ecff;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.kw-termin b{display:block;font:700 .7rem/1.3 var(--titel);overflow:hidden;text-overflow:ellipsis}
.t-blau{background:#2450c8}.t-lila{background:#5a3fd0}.t-tuerkis{background:#12808c}
.kw-neu{background:linear-gradient(135deg,#14a66a,#3ad98a);color:#04240f;opacity:0;transform:scale(.3);transition:opacity .4s,transform .5s cubic-bezier(.3,1.7,.5,1)}
.st-9 .kw-neu{opacity:1;transform:none;animation:kwneu 1.5s ease-out .4s 2}
@keyframes kwneu{0%{box-shadow:0 0 0 0 rgba(58,217,138,.85)}100%{box-shadow:0 0 0 16px rgba(58,217,138,0)}}
.ki-meldung{margin-top:auto;padding-top:14px;display:flex;align-items:center;justify-content:center;gap:8px;font:700 .9rem/1.2 var(--titel);color:var(--gruen);opacity:0;transform:translateY(8px);transition:opacity .4s .2s,transform .4s .2s}
.ki-meldung .sym{stroke-width:3}
.st-9 .ki-meldung{opacity:1;transform:none}
.kacheln.ki-punkte{grid-template-columns:repeat(4,1fr);gap:16px;margin-top:20px}
.kachel-klein{padding:22px 20px}
.kachel-klein .kachel-ico{width:46px;height:46px;border-radius:14px;margin-bottom:14px}
.kachel-klein .kachel-ico .sym{width:22px;height:22px}
.kachel-klein h3{font-size:1.1rem}
.kachel-klein p{font-size:.96rem}
.ki-knoepfe{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;margin-top:32px}
@media (max-width:1020px){
  .ki-schau{grid-template-columns:1fr;padding:14px;border-radius:24px}
  .ki-fluss{flex-direction:column;height:46px}
  .kacheln.ki-punkte{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:560px){
  .ki{padding-top:72px}
  .ki-karte{padding:16px}
  .ki-woche{grid-template-columns:18px repeat(5,minmax(0,1fr))}
  .kw-termin{padding:6px 4px 0;font-size:.6rem}
  .kw-termin b{font-size:.62rem}
  .kacheln.ki-punkte{grid-template-columns:1fr}
  .ki-knoepfe .knopf{width:100%}
}

/* Leistungen */
.leistungen{padding:96px 0}
.termin-band{display:grid;grid-template-columns:1.05fr .95fr;gap:40px;align-items:center;padding:38px;border-radius:30px;background:linear-gradient(130deg,#2b2750 0%,#22324e 55%,#1f3d3a 100%);border:1px solid #45457a;margin-bottom:22px}
.termin-text h3{font-size:1.75rem;font-weight:800}
.termin-text p{margin-top:12px;color:#c9cee0;font-size:1.05rem}
.termin-text .haken-liste li{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.14)}
.termin-schau{position:relative;height:292px;border-radius:22px;background:#14141c;border:1px solid #3d3d55;overflow:hidden;box-shadow:0 30px 60px -30px #000}
.ts-leiste{position:absolute;inset:16px 0 auto 0;display:flex;justify-content:center;gap:8px}
.ts-leiste i{width:34px;height:5px;border-radius:5px;background:#34344a;animation:tspunkt 12s infinite}
.ts-leiste i:nth-child(2){animation-delay:4s}
.ts-leiste i:nth-child(3){animation-delay:8s}
@keyframes tspunkt{0%,2%{background:#34344a}4%,31%{background:var(--blau)}34%,100%{background:#34344a}}
.ts-stufe{position:absolute;inset:44px 22px 22px;display:flex;flex-wrap:wrap;align-content:center;gap:10px;opacity:0;animation:ts 12s infinite}
.ts-2{animation-delay:4s}
.ts-3{animation-delay:8s;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:8px}
@keyframes ts{0%{opacity:0;transform:translateX(26px)}3%,30%{opacity:1;transform:none}33.3%,100%{opacity:0;transform:translateX(-26px)}}
.ts-stufe b{flex:0 0 100%;font:700 1.08rem/1.3 var(--titel);margin-bottom:4px}
.ts-kn,.ts-zeit,.ts-tag{padding:11px 16px;border-radius:12px;border:1.5px solid #3d3d55;background:#1d1d29;font-weight:600;font-size:.93rem;line-height:1.25}
.ts-tag{text-align:center;padding:9px 0;flex:1 1 0}
.ts-zeit{flex:1 1 0;text-align:center}
.ts-1 .ts-wahl{animation:tswahl 12s infinite backwards}
.ts-2 .ts-wahl{animation:tswahl 12s 4s infinite backwards}
.ts-2 .ts-zeit.ts-wahl{animation-delay:4.9s}
@keyframes tswahl{0%,9%{background:#1d1d29;border-color:#3d3d55;transform:none}13%,34%{background:linear-gradient(100deg,#6a57f2,#2f9cf0);border-color:transparent;transform:scale(1.05)}35%,100%{background:#1d1d29;border-color:#3d3d55;transform:none}}
.ts-rund{width:76px;height:76px;border-radius:50%;display:grid;place-items:center;background:linear-gradient(135deg,#14a66a,#3ad98a);box-shadow:0 0 0 11px rgba(58,217,138,.15);animation:tspop 12s 8s infinite backwards}
.ts-rund .sym{width:38px;height:38px;stroke-width:3}
@keyframes tspop{0%,2%{transform:scale(.3)}7%{transform:scale(1.12)}10%,100%{transform:scale(1)}}
.ts-3 b{flex:none;font-size:1.3rem;margin:8px 0 0}
.ts-3 small{color:var(--grau);font-size:.95rem}

.kacheln{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.kachel{position:relative;padding:28px 26px;border-radius:24px;background:var(--flaeche);border:1px solid var(--rand)}
.kachel,.js .kachel.auf{transition:opacity .7s cubic-bezier(.2,.7,.2,1),translate .7s cubic-bezier(.2,.7,.2,1),transform .3s,border-color .3s,box-shadow .3s}
.kachel:hover{transform:translateY(-6px);border-color:#6a6a82;box-shadow:0 26px 50px -30px #000}
.kachel-ico{width:54px;height:54px;border-radius:17px;display:grid;place-items:center;color:#fff;margin-bottom:18px}
.kachel-ico .sym{width:26px;height:26px}
.kachel:hover .kachel-ico{animation:wackel .6s ease}
@keyframes wackel{30%{transform:rotate(-10deg) scale(1.08)}60%{transform:rotate(8deg) scale(1.08)}}
.k-violett{background:linear-gradient(135deg,#6a57f2,#9a8bff)}
.k-blau{background:linear-gradient(135deg,#1f86e0,#35b4f2)}
.k-gruen{background:linear-gradient(135deg,#14a66a,#3ad98a)}
.k-orange{background:linear-gradient(135deg,#ff6a1a,#ffb020)}
.k-rot{background:linear-gradient(135deg,#e5173f,#ff5a7a)}
.kachel h3{font-size:1.22rem;font-weight:800}
.kachel p{margin-top:9px;color:var(--grau)}

/* Ablauf */
.ablauf{padding:96px 0;background:var(--grund2)}
.schritte{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:22px}
.schritte li{position:relative}
.schritt-nr{position:relative;z-index:1;width:54px;height:54px;border-radius:50%;display:grid;place-items:center;background:var(--knopf);font:800 1.25rem/1 var(--titel);box-shadow:0 0 0 7px var(--grund2),0 12px 26px -10px rgba(92,108,255,.8)}
.schritte li:not(:last-child)::after{content:"";position:absolute;left:64px;right:-18px;top:26px;height:3px;border-radius:3px;background:repeating-linear-gradient(90deg,#55557a 0 10px,transparent 10px 20px);background-size:20px 3px;animation:strich 1s linear infinite}
@keyframes strich{to{background-position:20px 0}}
.schritte h3{font-size:1.25rem;font-weight:800;margin-top:20px}
.schritte p{margin-top:8px;color:var(--grau)}

/* Abschluss */
.schluss{padding:96px 0 84px}
.schluss-kasten{position:relative;overflow:hidden;container-type:inline-size;border-radius:34px;padding:64px 28px 96px;text-align:center;background:linear-gradient(120deg,#4c3ac9 0%,#2a7fd0 58%,#1fa775 100%)}
.schluss-kasten h2{position:relative;font-size:clamp(1.7rem,3.4vw,2.6rem);font-weight:800;max-width:17em;margin-inline:auto}
.schluss-kasten p{position:relative;margin-top:14px;font-size:1.1rem;color:#e8ecff}
.schluss-kasten .held-knoepfe{position:relative;justify-content:center}
.schluss-kasten .knopf{background:#fff;color:#1c1c25;box-shadow:0 14px 30px -14px rgba(0,0,0,.6)}
.schluss-kasten .knopf-hell{background:transparent;color:#fff;box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.75)}
.schluss-raeder{position:absolute;inset:auto 0 14px 0;height:56px;color:rgba(255,255,255,.5)}
.schluss-raeder .fz{position:absolute;left:-120px;bottom:0;width:108px;animation:fahrt 18s linear infinite}
.schluss-raeder .fz:nth-child(2){width:92px;animation-delay:-6s}
.schluss-raeder .fz:nth-child(3){width:104px;animation-delay:-12s}
@keyframes fahrt{to{translate:calc(100cqw + 240px) 0}}

/* Fußzeile */
.fuss{border-top:1px solid var(--rand);padding:30px 0 40px;color:var(--grau);font-size:.93rem}
.fuss-innen{display:flex;flex-wrap:wrap;align-items:center;gap:14px 28px}
.fuss .kopf-logo img{height:28px}
.fuss nav{display:flex;gap:20px;margin-left:auto}
.fuss nav a{color:var(--grau);text-decoration:none}
.fuss nav a:hover{color:#fff}

/* Schmaler */
@media (max-width:1160px){
  .kopf-nav{display:none}
  .kopf-innen .knopf{margin-left:auto}
}
@media (max-width:1020px){
  .held{padding-bottom:44px}
  .held-raster{grid-template-columns:1fr;gap:40px}
  .faecher{max-width:460px}
  .kacheln{grid-template-columns:repeat(2,1fr)}
  .schritte{grid-template-columns:repeat(2,1fr);gap:34px 22px}
  .schritte li:nth-child(2)::after{display:none}
  .text{grid-template-columns:1fr;gap:26px}
}
@media (max-width:820px){
  .anfrage-raster{grid-template-columns:1fr}
  .termin-band{grid-template-columns:1fr;padding:28px 22px;gap:26px}
  .beispiele,.leistungen,.ablauf{padding:72px 0}
  .buehne{padding-right:0}
  .rahmen-pc{display:none}
  .rahmen-handy{position:relative;right:auto;bottom:auto;width:min(74%,300px);margin-inline:auto;border-width:9px;border-radius:38px}
  .rahmen-handy .rahmen-sicht{border-radius:28px}
  .buehne-schein{inset:6% 0}
  .texte{margin-top:34px}
  .reiter{gap:8px}
  .reiter-kn{flex-direction:column;gap:8px;padding:14px 6px 12px;text-align:center;border-radius:18px}
  .reiter-ico{width:58px}
  .reiter-text b{font-size:.92rem}
  .reiter-text small{display:none}
}
@media (max-width:560px){
  body{font-size:16.5px}
  .innen{width:calc(100% - 32px)}
  :root{--kopf-h:62px}
  .kopf-logo img{height:28px}
  .held{padding-top:calc(var(--kopf-h) + 30px)}
  .held-knoepfe .knopf{width:100%}
  .schwebe{font-size:.76rem;padding:8px 11px 8px 8px}
  .schwebe-rund{width:28px;height:28px}
  .schwebe-termin{right:-1%}
  .karte .fz{width:40%;right:5%}
  .karte-kn{font-size:9px;padding:5px 8px}
  .formular{padding:26px 18px 22px;border-radius:22px}
  .feld-reihe{grid-template-columns:1fr}
  .wahl-reihe{grid-template-columns:repeat(2,1fr)}
  .kacheln,.schritte{grid-template-columns:1fr}
  .schritte{gap:26px}
  .schritte li{display:grid;grid-template-columns:54px 1fr;column-gap:16px}
  .schritte li::after{display:none!important}
  .schritte .schritt-nr{grid-row:span 2}
  .schritte h3{margin-top:4px}
  .schritte p{grid-column:2}
  .text-knoepfe .knopf{width:100%}
  .termin-schau{height:300px}
  .ts-kn{flex:1 1 40%;text-align:center}
  .schluss-kasten{padding:48px 20px 92px;border-radius:26px}
  .fuss nav{margin-left:0}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
  .js .auf{opacity:1;translate:none}
  .wechsel span:first-child,.ts-1{opacity:1}
  .ts-leiste i:first-child{background:var(--blau)}
  .schluss-raeder{display:none}
  .danke-rund .sym{stroke-dashoffset:0}
}