/* Weblion · Seite „Webdesign“ (12.11.2026). Die Seite ist ihr eigenes Schaufenster: jeder Effekt läuft echt im Browser.
   Ohne JavaScript und bei „weniger Bewegung“ bleibt alles lesbar und ruhig: Browser im fertigen Zustand, Schritte als Liste,
   Effekt-Galerie zum Wischen. Farben nur aus den Tokens von stil.css (Löwengold & Waldgrün), Schrift vom eigenen Server. */

/* ---------- Grundgerüst ---------- */
.wd-fortschritt { position: fixed; left: 0; right: 0; top: 0; height: 3px; z-index: 40; transform-origin: 0 50%; transform: scaleX(var(--p, 0));
  background: linear-gradient(90deg, var(--tuerkis), var(--orange)); pointer-events: none; }
.wd main { overflow-x: clip; }
html.wd-js [data-auftritt] { opacity: 0; translate: 0 44px; transition: opacity .8s ease, translate .9s cubic-bezier(.2, .8, .2, 1); transition-delay: calc(var(--i, 0) * 90ms); }
html.wd-js [data-auftritt].da { opacity: 1; translate: 0 0; }

/* ---------- Kopfbereich ---------- */
.wd-held { position: relative; overflow: hidden; isolation: isolate; color: var(--held-text);
  background: radial-gradient(1100px 700px at 85% 10%, #1F6B4A 0, transparent 60%), radial-gradient(900px 600px at 0% 100%, #5a4a1c 0, transparent 60%), var(--held); }
.wd-leinwand { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; opacity: 0; transition: opacity 1.4s ease; }
.wd-leinwand.an { opacity: 1; }
.wd-raster-linien { position: absolute; inset: -10% 0; z-index: 1; pointer-events: none;
  background-image: linear-gradient(rgba(247, 241, 227, .06) 1px, transparent 1px), linear-gradient(90deg, rgba(247, 241, 227, .06) 1px, transparent 1px);
  background-size: 56px 56px; -webkit-mask-image: radial-gradient(ellipse 70% 60% at 70% 40%, #000 20%, transparent 75%); mask-image: radial-gradient(ellipse 70% 60% at 70% 40%, #000 20%, transparent 75%); }
.wd-korn { position: absolute; inset: 0; z-index: 1; pointer-events: none; opacity: .09; mix-blend-mode: overlay;
  background-image: 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='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23k)'/%3E%3C/svg%3E"); }
.wd-einstieg { position: relative; z-index: 2; min-height: calc(100svh - 68px); padding-block: 56px 88px; display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, 1fr); gap: 48px; align-items: center; }
.wd-einstieg .kennung { color: var(--orange); }
.wd-einstieg h1 { font-size: clamp(40px, 5.3vw, 76px); line-height: 1.02; letter-spacing: -.03em; margin: 16px 0 22px; }
.wd-einstieg h1 .wort { display: inline-block; animation: wort .9s cubic-bezier(.2, .8, .2, 1) both; animation-delay: calc(var(--i) * 95ms + 150ms); }
.wd-einstieg h1 em { font-style: normal; background: linear-gradient(100deg, #F7D58A 0%, #E8B04B 30%, #FFF3D1 50%, #E8B04B 70%, #C98F28 100%); background-size: 220% 100%;
  -webkit-background-clip: text; background-clip: text; color: transparent; animation: wort .9s cubic-bezier(.2, .8, .2, 1) both, glanz 5s linear 1.4s infinite; animation-delay: calc(var(--i) * 95ms + 150ms), 1.6s; }
@keyframes glanz { from { background-position: 100% 0; } to { background-position: -120% 0; } }
.wd-einstieg .lead { font-size: clamp(18px, 1.8vw, 21px); color: var(--held-leise); margin: 0 0 30px; max-width: 32em; }
.wd-held .knopf.rand { background: transparent; color: var(--held-text); border-color: rgba(247, 241, 227, .5); }
.wd-held .knopf.rand:hover { border-color: var(--held-text); }
.knopf { transition: translate .3s cubic-bezier(.2, .8, .2, 1), transform .15s ease, background .15s ease; }
.aktionen .knopf svg { width: 20px; height: 20px; vertical-align: -4px; }

/* Bühne: Browser kippt mit der Maus, Abzeichen schweben in verschiedenen Tiefen */
.wd-buehne { position: relative; height: min(560px, 62vh); min-height: 420px; perspective: 1400px; }
.wd-kippen { position: absolute; inset: 36px 2% 36px 6%; transform-style: preserve-3d; transform: rotateX(var(--rx, 7deg)) rotateY(var(--ry, -13deg)); }
.wd-kippen::after { content: ""; position: absolute; inset: 8% 6% -10%; z-index: -1; border-radius: 40px; background: #000; opacity: .45; filter: blur(46px); transform: translateZ(-80px); }
.wd-chip { position: absolute; z-index: 3; display: inline-flex; align-items: center; gap: 8px; padding: 10px 15px; border-radius: 999px; font-weight: 700; font-size: 14px; white-space: nowrap;
  color: var(--held-text); background: rgba(14, 59, 46, .55); border: 1px solid rgba(247, 241, 227, .22); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 18px 36px -18px rgba(0, 0, 0, .7); translate: var(--mx, 0) var(--my, 0); animation: schweben 6s ease-in-out infinite; animation-delay: calc(var(--d, 0) * -1.5s); }
.wd-chip svg { width: 17px; height: 17px; color: var(--orange); }
.wd-chip.c0 { left: -2%; top: 4%; --d: 0; } .wd-chip.c1 { right: -2%; top: 20%; --d: 1; } .wd-chip.c2 { left: 0; bottom: 12%; --d: 2; } .wd-chip.c3 { right: 6%; bottom: 0; --d: 3; }
@keyframes schweben { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-12px); } }
.wd-runter { position: absolute; z-index: 2; left: 50%; bottom: 22px; translate: -50% 0; width: 26px; height: 42px; border: 2px solid rgba(247, 241, 227, .45); border-radius: 14px; }
.wd-runter span { position: absolute; left: 50%; top: 8px; width: 4px; height: 8px; margin-left: -2px; border-radius: 2px; background: var(--orange); animation: rollen 1.8s ease-in-out infinite; }
@keyframes rollen { 0% { opacity: 0; transform: translateY(0); } 30% { opacity: 1; } 100% { opacity: 0; transform: translateY(14px); } }

/* ---------- Der kleine Browser (Kopfbereich und Ablauf) ---------- */
.wd-browser { position: relative; width: 100%; height: 100%; display: flex; flex-direction: column; overflow: hidden; border-radius: 16px; color: var(--tinte);
  background: var(--flaeche); border: 1px solid rgba(255, 255, 255, .25); box-shadow: 0 40px 90px -40px rgba(0, 0, 0, .75); }
.wd-leiste { flex: none; height: 40px; display: flex; align-items: center; gap: 12px; padding: 0 12px; background: color-mix(in srgb, var(--linie) 55%, var(--flaeche)); border-bottom: 1px solid var(--linie); }
.wd-punkte { display: flex; gap: 6px; } .wd-punkte i { width: 10px; height: 10px; border-radius: 50%; background: #F26B5B; } .wd-punkte i:nth-child(2) { background: #F2C14E; } .wd-punkte i:nth-child(3) { background: #5BC27A; }
.wd-url { flex: 1; min-width: 0; height: 25px; display: flex; align-items: center; gap: 6px; padding: 0 11px; border-radius: 999px; background: var(--seite); font: 600 12.5px/1 var(--text); color: var(--leise); overflow: hidden; white-space: nowrap; }
.wd-schloss { display: inline-grid; color: var(--leise); transition: color .4s; } .wd-schloss svg { width: 13px; height: 13px; }
.wd-browser.sicher .wd-schloss { color: var(--tuerkis); }
.wd-cursor { width: 1.5px; height: 14px; background: var(--tinte); opacity: 0; }
.wd-browser.tippt .wd-cursor { opacity: 1; animation: blinken .8s steps(1) infinite; }
@keyframes blinken { 50% { opacity: 0; } }
.wd-online { flex: none; font: 800 11px/1 var(--text); letter-spacing: .06em; text-transform: uppercase; padding: 5px 9px 5px 18px; border-radius: 999px; background: var(--tuerkis); color: #fff; position: relative;
  opacity: 0; transform: scale(.6); transition: opacity .3s, transform .5s cubic-bezier(.2, 1.6, .4, 1); }
.wd-online::before { content: ""; position: absolute; left: 7px; top: 50%; width: 6px; height: 6px; margin-top: -3px; border-radius: 50%; background: #fff; animation: pulsieren 1.6s ease-out infinite; }
@keyframes pulsieren { 0% { box-shadow: 0 0 0 0 rgba(255, 255, 255, .8); } 100% { box-shadow: 0 0 0 7px rgba(255, 255, 255, 0); } }
.wd-browser.sicher .wd-online { opacity: 1; transform: none; }
.wd-inhalt { position: relative; flex: 1; min-height: 0; padding: 16px 18px; display: grid; grid-template-rows: auto 1fr auto; gap: 14px; }

/* Skizze: alles gestrichelt. Design: Flächen füllen sich nacheinander (--d) */
.wd-m-nav { display: flex; align-items: center; gap: 10px; }
.wd-m-logo { width: 26px; height: 26px; border-radius: 8px; --d: 0; }
.wd-m-nav i { width: 44px; height: 9px; border-radius: 5px; --d: 1; } .wd-m-nav i:first-of-type { margin-left: auto; }
.wd-m-burger { display: none; width: 22px; height: 14px; margin-left: auto; border-block: 2.5px solid var(--tinte); position: relative; }
.wd-m-burger::after { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 2.5px; margin-top: -1.25px; background: var(--tinte); }
.wd-m-held { display: grid; grid-template-columns: 1.1fr .9fr; gap: 16px; align-items: center; min-height: 0; }
.wd-m-text { display: grid; gap: 9px; justify-items: start; }
.wd-m-titel { font: 800 clamp(17px, 1.9vw, 27px)/1.1 var(--display); letter-spacing: -.02em; border-radius: 6px; --d: 2; }
.wd-m-text i { display: block; width: 92%; height: 9px; border-radius: 5px; --d: 3; } .wd-m-text i.kurz { width: 62%; --d: 4; }
.wd-m-knopf { font: 800 12px/1 var(--text); padding: 9px 14px; border-radius: 999px; margin-top: 6px; white-space: nowrap; --d: 5; }
.wd-m-bild { position: relative; aspect-ratio: 4 / 3; border-radius: 12px; overflow: hidden; --d: 3; }
.wd-landschaft { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; transition: opacity .6s .5s; }
.wd-sonne { fill: #E8B04B; } .wd-huegel-1 { fill: #2E8B63; } .wd-huegel-2 { fill: #1F6B4A; }
.wd-m-karten { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; } .wd-m-karten i { height: 54px; border-radius: 10px; --d: 6; }
.wd-m-karten i:nth-child(2) { --d: 7; } .wd-m-karten i:nth-child(3) { --d: 8; }
:is(.wd-m-logo, .wd-m-nav i, .wd-m-titel, .wd-m-text i, .wd-m-knopf, .wd-m-bild, .wd-m-karten i) {
  border: 1.5px dashed color-mix(in srgb, var(--leise) 50%, transparent); background-color: transparent; color: transparent;
  transition: background-color .5s ease, border-color .5s ease, color .5s ease, box-shadow .5s ease; transition-delay: calc(var(--d) * 70ms); }
.wd-m-bild { background-image: linear-gradient(to top right, transparent calc(50% - 1px), color-mix(in srgb, var(--leise) 40%, transparent) 50%, transparent calc(50% + 1px)), linear-gradient(to top left, transparent calc(50% - 1px), color-mix(in srgb, var(--leise) 40%, transparent) 50%, transparent calc(50% + 1px)); }
.wd-browser.p-design :is(.wd-m-logo, .wd-m-nav i, .wd-m-titel, .wd-m-text i, .wd-m-knopf, .wd-m-bild, .wd-m-karten i) { border-color: transparent; }
.wd-browser.p-design .wd-m-logo { background-color: var(--orange); }
.wd-browser.p-design .wd-m-nav i { background-color: var(--linie); }
.wd-browser.p-design .wd-m-titel { color: var(--tinte); }
.wd-browser.p-design .wd-m-text i { background-color: color-mix(in srgb, var(--tinte) 16%, transparent); }
.wd-browser.p-design .wd-m-knopf { background-color: var(--orange); color: var(--auf-orange); box-shadow: 0 8px 18px -8px color-mix(in srgb, var(--orange) 90%, transparent); }
.wd-browser.p-design .wd-m-bild { background-color: #FBF0D9; background-image: none; }
.wd-browser.p-design .wd-landschaft { opacity: 1; }
.wd-browser.p-design .wd-m-karten i:nth-child(1) { background-color: var(--blau-hell); } .wd-browser.p-design .wd-m-karten i:nth-child(2) { background-color: var(--orange-hell); } .wd-browser.p-design .wd-m-karten i:nth-child(3) { background-color: var(--tuerkis-hell); }
.wd-code { position: absolute; inset: 10px; margin: 0; padding: 16px 18px; border-radius: 12px; background: #0B1F18; color: #CDE7D8; font: 500 13px/1.65 ui-monospace, "Cascadia Code", Consolas, monospace;
  white-space: pre-wrap; overflow: hidden; opacity: 0; transform: translateY(14px) scale(.98); transition: opacity .35s, transform .45s cubic-bezier(.2, .8, .2, 1); pointer-events: none; z-index: 2; }
.wd-browser.p-code .wd-code { opacity: 1; transform: none; }
.wd-code .t { color: #F0BE5E; } .wd-code .a { color: #8FD3AE; } .wd-code .s { color: #F4A58A; }
.wd-code .tippen::after { content: ""; display: inline-block; width: 7px; height: 14px; margin-left: 1px; vertical-align: -2px; background: #F0BE5E; animation: blinken .8s steps(1) infinite; }
.wd-phase { position: absolute; right: 12px; bottom: 12px; z-index: 3; font: 800 11px/1 var(--text); letter-spacing: .1em; text-transform: uppercase; padding: 6px 10px; border-radius: 999px; background: var(--held); color: var(--held-text); opacity: 0; transition: opacity .3s; }
.wd-phase:not(:empty) { opacity: .92; }

/* Handy-Ansicht des Browsers (Ablauf, Schritt 3) */
.wd-browser.p-handy .wd-punkte, .wd-browser.p-handy .wd-m-nav i { display: none; }
.wd-browser.p-handy .wd-m-burger { display: block; }
.wd-browser.p-handy .wd-m-held { grid-template-columns: minmax(0, 1fr); }
.wd-browser.p-handy .wd-m-bild { order: -1; aspect-ratio: 16 / 9; }
.wd-browser.p-handy .wd-m-karten { grid-template-columns: minmax(0, 1fr); } .wd-browser.p-handy .wd-m-karten i { height: 26px; }
.wd-browser.p-handy .wd-m-karten i:nth-child(n+3) { display: none; }

/* ---------- Laufband mit Scroll-Schwung ---------- */
.wd-band { background: var(--held); color: var(--held-text); padding-block: 26px 30px; overflow: hidden; border-top: 1px solid rgba(247, 241, 227, .08); }
.wd-band-reihe { display: flex; white-space: nowrap; }
.wd-band-reihe + .wd-band-reihe { margin-top: 4px; }
.wd-band-spur { display: flex; align-items: center; gap: 30px; padding-right: 30px; width: max-content; will-change: transform; animation: laufen 46s linear infinite; }
.wd-band-reihe.rueck .wd-band-spur { animation-direction: reverse; }
html.wd-js:not(.wd-ruhig) .wd-band-spur { animation: none; }
.wd-band span { font: 800 clamp(40px, 7.2vw, 100px)/1.08 var(--display); letter-spacing: -.035em; }
.wd-band span.hohl { color: transparent; -webkit-text-stroke: 1.5px rgba(247, 241, 227, .55); }
.wd-band b { color: var(--orange); font-size: clamp(20px, 2.4vw, 32px); }

/* ---------- Satz, der sich beim Scrollen Wort für Wort aufdeckt ---------- */
.wd-satz-block { padding-block: clamp(90px, 14vw, 170px); background: var(--seite); }
.wd-satz { margin: 0; max-width: 21em; font: 800 clamp(28px, 4.5vw, 60px)/1.14 var(--display); letter-spacing: -.025em; }
html.wd-js:not(.wd-ruhig) .wd-wort { opacity: .14; transition: opacity .35s ease, color .35s ease; }
html.wd-js .wd-wort.an { opacity: 1; }
.wd-wort.gold { color: var(--orange-tief); }

/* ---------- Leistungen: Karten mit 3D-Neigung, Lichtkegel und Mini-Animation ---------- */
.wd-leist { background: var(--bg); }
.wd-karten { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; perspective: 1200px; }
.wd-karte { position: relative; overflow: hidden; padding: 22px 22px 26px; border-radius: 24px; background: var(--flaeche); border: 1px solid var(--linie);
  transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transition: transform .45s cubic-bezier(.2, .8, .2, 1), box-shadow .3s ease, opacity .8s ease, translate .9s cubic-bezier(.2, .8, .2, 1); }
.wd-karte:hover { box-shadow: 0 34px 60px -34px rgba(14, 59, 46, .5); }
.wd-karte .licht { position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity .35s;
  background: radial-gradient(340px circle at var(--mx, 50%) var(--my, 0%), color-mix(in srgb, var(--orange) 20%, transparent), transparent 62%); }
.wd-karte::before { content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1.5px; pointer-events: none; opacity: 0; transition: opacity .35s;
  background: radial-gradient(260px circle at var(--mx, 50%) var(--my, 0%), var(--orange), transparent 70%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0); }
.wd-karte:hover .licht, .wd-karte:hover::before { opacity: 1; }
.wd-karte h3 { font-size: 21px; letter-spacing: -.01em; }
.wd-karte p { margin: 8px 0 0; color: var(--leise); font-size: 16px; }
.wd-karte-bild { position: relative; height: 136px; margin-bottom: 20px; border-radius: 16px; background: var(--seite); display: grid; place-items: center; overflow: hidden; }
.wd-bruecke { grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; gap: 28px; padding: 30px 32px; background: var(--held); color: var(--held-text); border-color: transparent; }
.wd-bruecke p { color: var(--held-leise); max-width: 46em; }
.wd-bruecke .knopf.rand { width: auto; flex: none; display: inline-flex; align-items: center; gap: 8px; padding: 14px 22px; background: transparent; color: var(--held-text); border-color: rgba(247, 241, 227, .5); }
.wd-bruecke .knopf svg { width: 18px; height: 18px; transition: transform .25s; } .wd-bruecke .knopf:hover svg { transform: translateX(4px); }

/* Mini-Animationen: laufen nur, wenn die Karte sichtbar wurde (.da) oder ohne JavaScript */
.kb { position: relative; }
.wd-karte:not(.da) .kb *, .wd-ruhig .kb * { animation-play-state: paused !important; }
html:not(.wd-js) .wd-karte .kb * { animation-play-state: running !important; }
.kb-bauen { width: 176px; height: 100px; }
.kb-bauen i { position: absolute; border-radius: 6px; animation: bauen 4.8s cubic-bezier(.6, 0, .2, 1) infinite; }
.kb-bauen .b1 { left: 0; top: 0; width: 100%; height: 14px; background: var(--held); --x: -60px; --y: -30px; --r: -20deg; }
.kb-bauen .b2 { left: 0; top: 24px; width: 58%; height: 13px; background: var(--tinte); --x: -40px; --y: 50px; --r: 25deg; animation-delay: .08s; }
.kb-bauen .b3 { right: 0; top: 24px; width: 34%; height: 46px; background: linear-gradient(160deg, #F0BE5E, #2E8B63); --x: 70px; --y: -40px; --r: 30deg; animation-delay: .16s; }
.kb-bauen .b4 { left: 0; top: 46px; width: 50%; height: 8px; background: var(--linie); --x: 30px; --y: 60px; --r: -35deg; animation-delay: .24s; }
.kb-bauen .b5 { left: 0; top: 66px; width: 30%; height: 14px; border-radius: 999px; background: var(--orange); --x: -70px; --y: 20px; --r: 40deg; animation-delay: .32s; }
@keyframes bauen { 0%, 10% { transform: translate(var(--x), var(--y)) rotate(var(--r)); opacity: 0; } 40%, 86% { transform: none; opacity: 1; } 100% { transform: translate(var(--x), var(--y)) rotate(var(--r)); opacity: 0; } }
.kb-hosting { display: flex; align-items: center; gap: 18px; }
.server { display: grid; gap: 6px; padding: 8px; border-radius: 10px; background: var(--held); }
.einschub { display: flex; align-items: center; gap: 6px; width: 78px; height: 20px; padding: 0 7px; border-radius: 5px; background: rgba(247, 241, 227, .1); }
.einschub i { flex: 1; height: 3px; border-radius: 2px; background: rgba(247, 241, 227, .2); }
.led { width: 6px; height: 6px; border-radius: 50%; background: #6FD3A0; animation: led 1.4s steps(1) infinite; animation-delay: calc(var(--i) * -.37s); }
.led:nth-child(2) { background: #F0BE5E; }
@keyframes led { 0%, 60% { opacity: 1; } 61%, 100% { opacity: .25; } }
.puls { width: 110px; height: 40px; } .puls path { fill: none; stroke: var(--tuerkis); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 1; animation: zeichnen 2.4s ease-in-out infinite; }
@keyframes zeichnen { 0% { stroke-dashoffset: 1; } 55%, 80% { stroke-dashoffset: 0; } 100% { stroke-dashoffset: -1; } }
.kb-domain { display: grid; justify-items: center; gap: 10px; }
.eingabe { padding: 9px 12px; min-width: 200px; border-radius: 10px; background: var(--flaeche); border: 1.5px solid var(--linie); font: 600 13px/1 ui-monospace, Consolas, monospace; color: var(--tinte); }
.tipp { display: inline-block; vertical-align: bottom; overflow: hidden; white-space: nowrap; width: 0; border-right: 2px solid var(--tinte); animation: tippen 4.4s steps(var(--n)) infinite; }
@keyframes tippen { 0%, 6% { width: 0; } 48%, 100% { width: calc(var(--n) * 1ch + 1px); } }
.frei { display: inline-flex; align-items: center; gap: 5px; font-weight: 800; font-size: 13px; color: var(--tuerkis); padding: 5px 11px; border-radius: 999px; background: var(--tuerkis-hell); animation: frei 4.4s infinite; }
.frei svg { width: 14px; height: 14px; stroke-width: 3; }
@keyframes frei { 0%, 50% { opacity: 0; transform: scale(.6); } 58%, 92% { opacity: 1; transform: none; } 100% { opacity: 0; } }
.kb-code { display: flex; align-items: center; gap: 16px; }
.klammer { font: 800 44px/1 ui-monospace, Consolas, monospace; color: var(--orange-tief); animation: wippen 3s ease-in-out infinite; }
@keyframes wippen { 50% { transform: rotate(-6deg) scale(1.06); } }
.zeilen { display: grid; gap: 7px; width: 96px; } .zeilen i { height: 7px; border-radius: 4px; background: var(--blau); width: 0; margin-left: calc(var(--e, 0) * 12px); animation: zeile 3.2s ease-in-out infinite; }
.zeilen i:nth-child(2) { animation-delay: .2s; background: var(--tuerkis); } .zeilen i:nth-child(3) { animation-delay: .4s; background: var(--orange); } .zeilen i:nth-child(4) { animation-delay: .6s; }
@keyframes zeile { 0%, 8% { width: 0; } 45%, 85% { width: var(--w); } 100% { width: 0; } }
.kb-pflege { display: grid; place-items: center; width: 100px; height: 100px; }
.kb-pflege svg { position: absolute; width: 74px; height: 74px; }
.schild { fill: var(--tuerkis-hell); stroke: var(--tuerkis); stroke-width: 3; stroke-linejoin: round; }
.schild-haken { fill: none; stroke: var(--tuerkis); stroke-width: 4.5; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 1; animation: zeichnen 3s ease-in-out infinite; }
.kb-pflege .kreis { width: 104px; height: 104px; animation: drehen 6s linear infinite; }
.kreis path { fill: none; stroke: var(--orange); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
@keyframes drehen { to { transform: rotate(360deg); } }
.kb-suche { width: 170px; height: 96px; }
.treffer { display: grid; gap: 9px; padding-top: 6px; } .treffer i { display: block; height: 20px; border-radius: 7px; background: var(--linie); }
.treffer i.wir { position: relative; background: var(--orange); animation: aufsteigen 4.5s cubic-bezier(.6, 0, .2, 1) infinite; }
.treffer i.wir b { position: absolute; left: 8px; top: 6px; width: 50%; height: 8px; border-radius: 4px; background: rgba(16, 41, 31, .35); }
@keyframes aufsteigen { 0%, 15% { transform: translateY(29px); } 50%, 88% { transform: translateY(-29px); } 100% { transform: translateY(29px); } }
.treffer i:first-child { animation: platz 4.5s cubic-bezier(.6, 0, .2, 1) infinite; }
@keyframes platz { 0%, 15% { transform: none; } 50%, 88% { transform: translateY(29px); } 100% { transform: none; } }
.treffer i:last-child { animation: platz2 4.5s cubic-bezier(.6, 0, .2, 1) infinite; }
@keyframes platz2 { 0%, 15% { transform: translateY(-29px); } 50%, 88% { transform: none; } 100% { transform: translateY(-29px); } }
.lupe { position: absolute; right: -4px; bottom: -6px; width: 46px; height: 46px; fill: none; stroke: var(--tinte); stroke-width: 2.4; stroke-linecap: round; animation: suchen 4.5s ease-in-out infinite; }
@keyframes suchen { 0%, 100% { transform: translate(0, 0); } 30% { transform: translate(-90px, -30px); } 60% { transform: translate(-40px, -50px); } }

/* ---------- Ablauf als Scroll-Geschichte (Bühne bleibt stehen, Browser verwandelt sich) ---------- */
.wd-geschichte { position: relative; background: var(--seite); }
html.wd-js:not(.wd-ruhig) .wd-geschichte { height: calc(var(--schritte) * 80vh + 100vh); }
.wd-geschichte-buehne { padding-block: 72px; }
html.wd-js:not(.wd-ruhig) .wd-geschichte-buehne { position: sticky; top: 68px; height: calc(100vh - 68px); padding-block: 0; display: flex; align-items: center; overflow: hidden; }
.wd-geschichte-raster { width: 100%; display: grid; grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr); gap: 60px; align-items: center; }
.wd-geschichte .ueber-titel { margin-bottom: 26px; }
.wd-schritte { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.wd-schritte li { padding: 10px 0; border-bottom: 1px solid var(--linie); }
html.wd-js:not(.wd-ruhig) .wd-schritte li { opacity: .45; transition: opacity .4s; }
html.wd-js:not(.wd-ruhig) .wd-schritte li.an { opacity: 1; }
.wd-schritt-knopf { display: flex; align-items: center; gap: 14px; width: 100%; padding: 0; border: 0; background: none; color: inherit; cursor: pointer; text-align: left; font: 800 20px/1.2 var(--display); }
.wd-schritt-knopf .nr { flex: none; width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; font-size: 15px; border: 2px solid var(--linie); transition: background .35s, border-color .35s, color .35s, transform .35s cubic-bezier(.2, 1.5, .4, 1); }
.wd-schritte li.an .nr, html:not(.wd-js) .wd-schritte .nr, .wd-ruhig .wd-schritte .nr { background: var(--orange); border-color: var(--orange); color: var(--auf-orange); }
.wd-schritte li.an .nr { transform: scale(1.08); }
.wd-schritte p { margin: 8px 0 4px 52px; color: var(--leise); }
html.wd-js:not(.wd-ruhig) .wd-schritte p { max-height: 0; overflow: hidden; opacity: 0; margin-block: 0; transition: max-height .5s ease, opacity .4s ease, margin .4s ease; }
html.wd-js:not(.wd-ruhig) .wd-schritte li.an p { max-height: 9em; opacity: 1; margin-block: 8px 4px; }
.wd-leiste-fortschritt { height: 4px; margin-top: 22px; border-radius: 2px; background: var(--linie); overflow: hidden; }
.wd-leiste-fortschritt span { display: block; height: 100%; width: 100%; transform-origin: 0 50%; transform: scaleX(var(--p, 0)); background: linear-gradient(90deg, var(--tuerkis), var(--orange)); }
html:not(.wd-js) .wd-leiste-fortschritt, .wd-ruhig .wd-leiste-fortschritt { display: none; }
.wd-geschichte-bild { height: min(540px, 64vh); display: grid; place-items: center; }
.wd-geschichte-bild .wd-browser { transition: width .9s cubic-bezier(.6, 0, .2, 1), border-radius .9s, box-shadow .5s; box-shadow: 0 40px 80px -40px rgba(14, 59, 46, .55); border-color: var(--linie); }
.wd-geschichte-bild .wd-browser.p-handy { width: min(300px, 70%); border-radius: 34px; border: 7px solid var(--tinte); }

/* ---------- Effekt-Galerie: läuft beim Scrollen quer (breite Bildschirme), sonst zum Wischen ---------- */
.wd-quer { position: relative; background: var(--held); color: var(--held-text); }
.wd-quer-buehne { padding-block: 88px; }
.wd-quer .ueber-titel { margin-bottom: 30px; }
.wd-quer .ueber-titel p { color: var(--held-leise); }
.wd-quer .kennung { color: var(--orange); }
.wd-wisch { font-weight: 700; font-size: 14px; color: var(--orange); }
.wd-quer-spur { display: flex; gap: 22px; padding: 4px max(20px, calc((100vw - 1160px) / 2 + 20px)) 18px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: thin; scrollbar-color: rgba(247, 241, 227, .3) transparent; }
html.wd-quer-an .wd-quer-buehne { position: sticky; top: 68px; height: calc(100vh - 68px); padding-block: 0; display: flex; flex-direction: column; justify-content: center; overflow: hidden; }
html.wd-quer-an .wd-quer-buehne > .breite { width: 100%; }   /* sonst schrumpft der Titelblock im Flex und rückt in die Mitte */
html.wd-quer-an .wd-quer-spur { width: max-content; overflow: visible; will-change: transform; }
html.wd-quer-an .wd-wisch { display: none; }
.wd-tafel { flex: 0 0 min(400px, 82vw); scroll-snap-align: center; display: flex; flex-direction: column; overflow: hidden; border-radius: 24px; background: rgba(247, 241, 227, .06); border: 1px solid rgba(247, 241, 227, .14); }
.wd-tafel-text { padding: 20px 22px 24px; }
.wd-tafel-nr { font: 800 13px/1 var(--text); letter-spacing: .14em; color: var(--orange); }
.wd-tafel h3 { font-size: 22px; margin-top: 8px; }
.wd-tafel p { margin: 8px 0 0; color: var(--held-leise); font-size: 15.5px; }
.fx { position: relative; height: 250px; display: grid; place-items: center; overflow: hidden; background: #0A2A20; }
@media (max-height: 760px) { html.wd-quer-an .fx { height: 190px; } html.wd-quer-an .wd-quer .ueber-titel h2 { font-size: 34px; } }
/* Parallax */
.fx-parallax svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.fx-parallax g[data-tiefe] { transition: transform .12s linear; }
.px-himmel { fill: #FBF0D9; } .px-sonne { fill: #E8B04B; } .px-berg-3 { fill: #A9CDB6; } .px-berg-2 { fill: #2E8B63; } .px-berg-1 { fill: #1F6B4A; } .px-baum { fill: #0E3B2E; }
/* Schrift als Fenster */
.maske-wort { font: 800 clamp(96px, 11vw, 150px)/1 var(--display); letter-spacing: -.05em; color: transparent; -webkit-background-clip: text; background-clip: text;
  background-image: radial-gradient(circle at var(--mx, 30%) var(--my, 40%), #FFF6DD 0, #E8B04B 16%, transparent 34%), linear-gradient(120deg, #2E8B63, #E8B04B, #1F6B4A, #F0BE5E, #2E8B63);
  background-size: 100% 100%, 300% 300%; animation: fliessen 9s ease-in-out infinite alternate; }
@keyframes fliessen { from { background-position: 0 0, 0% 50%; } to { background-position: 0 0, 100% 50%; } }
/* Magnet */
.fx-magnet::before, .fx-magnet::after { content: ""; position: absolute; left: 50%; top: 50%; width: 180px; height: 180px; margin: -90px; border-radius: 50%; border: 1px dashed rgba(240, 190, 94, .35); animation: ring 3.2s ease-out infinite; }
.fx-magnet::after { animation-delay: -1.6s; }
@keyframes ring { from { transform: scale(.6); opacity: 1; } to { transform: scale(1.5); opacity: 0; } }
.magnet-knopf { position: relative; z-index: 1; padding: 20px 34px; border: 0; border-radius: 999px; background: var(--orange); color: var(--auf-orange); font: 800 18px/1 var(--text); cursor: pointer;
  box-shadow: 0 20px 40px -18px rgba(232, 176, 75, .9); transition: translate .35s cubic-bezier(.2, .8, .2, 1), transform .2s; }
.magnet-knopf span { display: inline-block; transition: translate .35s cubic-bezier(.2, .8, .2, 1); }
.magnet-knopf:active { transform: scale(.95); }
/* Fließende Formen */
.fx-morph svg { width: 210px; height: 210px; overflow: visible; filter: drop-shadow(0 20px 40px rgba(0, 0, 0, .4)); }
/* Hell und dunkel */
.fx-thema { background: #DCE9E0; }
.mini-seite { position: absolute; inset: 20px 26px 74px; border-radius: 14px; padding: 14px; display: grid; gap: 9px; align-content: start; background: #FFFDF7; box-shadow: 0 18px 40px -22px rgba(14, 59, 46, .6); }
.mini-kopf { display: flex; gap: 7px; align-items: center; } .mini-kopf b { width: 16px; height: 16px; border-radius: 5px; background: #E8B04B; } .mini-kopf i { width: 30px; height: 6px; border-radius: 3px; background: #E4DAC4; } .mini-kopf i:first-of-type { margin-left: auto; }
.mini-titel { height: 14px; width: 70%; border-radius: 4px; background: #13352A; } .mini-zeile { height: 6px; width: 88%; border-radius: 3px; background: #CBD8CF; } .mini-zeile.kurz { width: 55%; }
.mini-karten { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 4px; } .mini-karten i { height: 34px; border-radius: 8px; background: #E4F0E7; } .mini-karten i + i { background: #FBF0D9; }
.mini-seite.dunkel { background: #0D271D; clip-path: circle(0 at var(--cx, 85%) var(--cy, 110%)); transition: clip-path .9s cubic-bezier(.6, 0, .2, 1); }
.mini-seite.dunkel .mini-titel { background: #F3EDE0; } .mini-seite.dunkel .mini-zeile { background: #31584A; } .mini-seite.dunkel .mini-kopf i { background: #25463A; }
.mini-seite.dunkel .mini-karten i { background: #183D2E; } .mini-seite.dunkel .mini-karten i + i { background: #3A2F17; }
.fx-thema.an .mini-seite.dunkel { clip-path: circle(150% at var(--cx, 85%) var(--cy, 110%)); }
.fx-thema.an { background: #12382B; transition: background .9s; }
.thema-knopf { position: absolute; bottom: 18px; left: 50%; translate: -50% 0; display: inline-flex; align-items: center; gap: 10px; padding: 9px 16px 9px 10px; border: 0; border-radius: 999px; background: #FFFDF7; color: #13352A; font: 800 14px/1 var(--text); cursor: pointer; box-shadow: 0 10px 24px -12px rgba(0, 0, 0, .5); }
.schalter { position: relative; width: 42px; height: 24px; border-radius: 999px; background: #E4DAC4; transition: background .3s; }
.schalter b { position: absolute; left: 3px; top: 3px; width: 18px; height: 18px; border-radius: 50%; background: #fff; box-shadow: 0 2px 5px rgba(0, 0, 0, .3); transition: transform .35s cubic-bezier(.2, 1.4, .4, 1); }
.thema-knopf[aria-pressed="true"] .schalter { background: #2E8B63; } .thema-knopf[aria-pressed="true"] .schalter b { transform: translateX(18px); }
/* Kleine Belohnungen */
.mikro-knopf { position: relative; display: inline-flex; align-items: center; gap: 0; padding: 18px 32px; border: 0; border-radius: 999px; background: #FFFDF7; color: #13352A; font: 800 17px/1 var(--text); cursor: pointer;
  transition: background .4s, color .4s, gap .4s, transform .2s; }
.mikro-knopf:active { transform: scale(.95); }
.mikro-haken { display: inline-grid; width: 0; overflow: hidden; transition: width .4s cubic-bezier(.2, 1.4, .4, 1); }
.mikro-haken svg { width: 22px; height: 22px; stroke-width: 3; }
.mikro-haken path { stroke-dasharray: 22; stroke-dashoffset: 22; transition: stroke-dashoffset .45s .2s ease; }
.mikro-knopf.fertig { background: #2E8B63; color: #fff; gap: 10px; }
.mikro-knopf.fertig .mikro-haken { width: 22px; } .mikro-knopf.fertig .mikro-haken path { stroke-dashoffset: 0; }
.funke { position: absolute; left: 50%; top: 50%; width: 8px; height: 8px; margin: -4px; border-radius: 2px; pointer-events: none; }

/* ---------- Beispiele (Platzhalter, bis Kunden zustimmen) ---------- */
.wd-beispiele { background: var(--bg); }
.wd-beispiele-raster { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: 48px; align-items: center; }
.wd-faecher { position: relative; height: 380px; }
.wd-beispiel { position: absolute; left: 50%; top: 50%; width: min(290px, 64%); margin: 0; overflow: hidden; border-radius: 16px; background: var(--flaeche); border: 1px solid var(--linie);
  box-shadow: 0 30px 60px -34px rgba(14, 59, 46, .55); transform: translate(-50%, -50%); transition: transform 1s cubic-bezier(.2, .8, .2, 1), translate .35s ease; transition-delay: calc(var(--i) * 80ms), 0s; }
.wd-faecher.da .wd-beispiel:nth-child(1), html:not(.wd-js) .wd-beispiel:nth-child(1) { transform: translate(-108%, -46%) rotate(-9deg); }
.wd-faecher.da .wd-beispiel:nth-child(2), html:not(.wd-js) .wd-beispiel:nth-child(2) { transform: translate(-50%, -56%); z-index: 2; }
.wd-faecher.da .wd-beispiel:nth-child(3), html:not(.wd-js) .wd-beispiel:nth-child(3) { transform: translate(8%, -46%) rotate(9deg); }
.wd-beispiel:hover { translate: 0 -16px; z-index: 3; }
.bs-leiste { display: flex; gap: 5px; padding: 9px 11px; border-bottom: 1px solid var(--linie); } .bs-leiste i { width: 8px; height: 8px; border-radius: 50%; background: var(--linie); }
.bs-seite { padding: 12px; display: grid; gap: 8px; filter: blur(1.2px) saturate(.85); }
.bs-held { height: 92px; border-radius: 10px; background: linear-gradient(135deg, #2E8B63, #A9CDB6); }
.bs-1 .bs-held { background: linear-gradient(135deg, #13352A, #E8B04B); } .bs-2 .bs-held { background: linear-gradient(135deg, #F09A6A, #FBF0D9); }
.bs-zeile { height: 8px; width: 80%; border-radius: 4px; background: var(--linie); } .bs-zeile.kurz { width: 50%; }
.bs-raster { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; } .bs-raster i { height: 40px; border-radius: 7px; background: var(--seite); border: 1px solid var(--linie); }
.wd-beispiel figcaption { display: flex; justify-content: space-between; align-items: center; padding: 10px 14px 12px; font-weight: 800; font-size: 15px; }
.bs-stempel { position: absolute; left: 50%; top: 44%; translate: -50% -50%; rotate: -12deg; padding: 6px 14px; border: 2.5px solid var(--orange-tief); border-radius: 8px; color: var(--orange-tief);
  background: color-mix(in srgb, var(--flaeche) 82%, transparent); font-size: 14px; letter-spacing: .14em; text-transform: uppercase; }

/* ---------- Kontakt ---------- */
.wd-kontakt .aktionen .knopf { display: inline-flex; align-items: center; gap: 8px; }

/* ---------- Mauszeiger mit Ring (nur mit Maus und ohne „weniger Bewegung“) ---------- */
.wd-zeiger { display: none; }
html.wd-zeiger-an .wd-zeiger { display: block; position: fixed; left: 0; top: 0; z-index: 60; pointer-events: none; }
.wd-zeiger span { position: fixed; left: 0; top: 0; border-radius: 50%; pointer-events: none; }
.wd-zeiger .punkt { width: 6px; height: 6px; margin: -3px; background: var(--orange); }
.wd-zeiger .ring { width: 36px; height: 36px; margin: -18px; border: 1.5px solid color-mix(in srgb, var(--orange) 70%, transparent); transition: width .25s, height .25s, margin .25s, background .25s, opacity .25s; }
.wd-zeiger.gross .ring { width: 66px; height: 66px; margin: -33px; background: color-mix(in srgb, var(--orange) 14%, transparent); }
.wd-zeiger.weg span { opacity: 0; }

/* ---------- Schmale Bildschirme ---------- */
@media (max-width: 980px) {
  .wd-einstieg { grid-template-columns: minmax(0, 1fr); gap: 36px; padding-block: 40px 90px; }
  .wd-buehne { height: 400px; min-height: 0; }
  .wd-karten { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .wd-beispiele-raster { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 900px) {
  .wd-geschichte-raster { grid-template-columns: minmax(0, 1fr); gap: 22px; }
  html.wd-js:not(.wd-ruhig) .wd-geschichte .ueber-titel { margin-bottom: 12px; }
  html.wd-js:not(.wd-ruhig) .wd-geschichte .ueber-titel h2 { font-size: 24px; }
  html.wd-js:not(.wd-ruhig) .wd-geschichte .kennung { display: none; }
  .wd-schritt-knopf { font-size: 17px; } .wd-schritt-knopf .nr { width: 32px; height: 32px; font-size: 14px; }
  .wd-schritte li { padding: 7px 0; } .wd-schritte p { margin-left: 46px; font-size: 15px; }
  .wd-geschichte-bild { height: 36vh; min-height: 230px; }
  html.wd-js:not(.wd-ruhig) .wd-geschichte-buehne { align-items: flex-start; padding-top: 22px; }
}
@media (max-width: 640px) {
  .wd-karten { grid-template-columns: minmax(0, 1fr); }
  .wd-bruecke { flex-direction: column; align-items: flex-start; padding: 26px 22px; }
  .wd-buehne { height: 330px; }
  .wd-kippen { inset: 30px 0 26px; }
  .wd-chip { font-size: 12.5px; padding: 8px 12px; } .wd-chip.c2 { display: none; }
  .wd-m-karten i { height: 36px; } .wd-inhalt { padding: 12px; gap: 10px; }
  .wd-faecher { height: 300px; } .wd-beispiel { width: 58%; }
  .wd-runter { display: none; }
}

/* ---------- Weniger Bewegung: alles steht still, nichts fehlt ---------- */
@media (prefers-reduced-motion: reduce) {
  .wd-einstieg h1 .wort, .wd-einstieg h1 em, .wd-chip, .wd-runter span, .wd-band-spur, .kb *, .maske-wort, .fx-magnet::before, .fx-magnet::after, .wd-online::before { animation: none !important; }
  .wd-kippen { transform: rotateX(4deg) rotateY(-8deg); }
  html.wd-js [data-auftritt] { opacity: 1; translate: none; }
  .tipp { width: auto; border-right: 0; } .frei, .kb-bauen i { opacity: 1; transform: none; } .zeilen i { width: var(--w); } .puls path, .schild-haken { stroke-dashoffset: 0; }
}