/* ============================================================
   /webseite, Redesign 21.09.2026. Linie "Faden" (dna.yaml → komposition-webseite).
   Drei Ebenen: Leistungswelt (hell, nummeriert, am Faden), Proof (dunkle
   Buehne), Conversion (farbige Karten und Baender). Alle Werte aus tokens.css.
   Bewegung: nur opacity, transform und clip-path, Schleifen laufen nur im
   Sichtfeld (.im-blick), reduced motion schaltet alles ab. Ohne JS ist jede
   Stelle im Endzustand sichtbar (html.w-js fehlt dann).
   Klassen mit w- = Seitenbausteine, v- = die sechs Visuals.
   ============================================================ */

.w-seite h2 { color: inherit; }
.w-seite blockquote { border-left: 0; padding-left: 0; }
.w-gross { font-size: var(--text-l); }
.w-detail, .w-seite [id="termin"] { scroll-margin-top: 5.5rem; }

/* Signatur: gelber Unterstrich unter der Schluesselstelle, blendet nach dem Laden ein */
.w-marker { text-decoration: underline; text-decoration-color: var(--farbe-signatur); text-decoration-thickness: 0.13em; text-underline-offset: 0.14em; text-decoration-skip-ink: none; }
html.w-js .w-marker { text-decoration-color: transparent; transition: text-decoration-color 900ms ease 450ms; }
html.w-js .ist-da .w-marker, html.w-js .ist-da.w-marker { text-decoration-color: var(--farbe-signatur); }

/* Einblenden beim Scrollen (JS setzt .ist-da und nimmt .w-ein danach wieder weg) */
html.w-js .w-ein { opacity: 0; transform: translateY(22px); transition: opacity var(--dauer-ein) var(--kurve-ein), transform var(--dauer-ein) var(--kurve-ein); transition-delay: calc(var(--i, 0) * 90ms); }
html.w-js .w-ein.ist-da { opacity: 1; transform: none; }

/* Schleifen pausieren ausserhalb des Sichtfelds */
html.w-js [data-w-blick]:not(.im-blick) *, html.w-js [data-w-blick]:not(.im-blick) *::before, html.w-js [data-w-blick]:not(.im-blick) *::after { animation-play-state: paused; }

@keyframes w-puls { from { transform: scale(1); opacity: 0.85; } to { transform: scale(1.9); opacity: 0; } }
@keyframes w-ring { from { transform: scale(0.3); opacity: 1; } to { transform: scale(1); opacity: 0; } }
@keyframes w-schweben { from { transform: translateY(0); } to { transform: translateY(-8px); } }
@keyframes w-scan { from { transform: translateY(0); } to { transform: translateY(500%); } }
@keyframes w-blinken { 50% { opacity: 0; } }
@keyframes w-auf { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }

/* ---------- 1 · Hero ---------- */
.w-hero { padding-block: var(--raum-4) var(--raum-sektion); overflow: hidden; }
.w-hero__grid { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr); grid-template-areas: "text video" "beweis beweis"; gap: var(--raum-4); align-items: center; }
.w-hero__text { grid-area: text; }
.w-hero h1 { font-size: clamp(var(--text-3xl), 4.3vw, var(--text-display)); font-weight: 800; max-width: 17ch; }
.w-hero .lead { font-size: var(--text-l); color: var(--farbe-text-gedimmt); max-width: 56ch; }
.w-hero .cta-gruppe { margin-top: var(--raum-3); }

.w-hero__video { grid-area: video; position: relative; justify-self: center; width: min(100%, 24rem); }
.w-hero__flaeche { position: absolute; inset: 7% -12% -7% 14%; background: var(--farbe-flaeche-alt); border-radius: var(--radius); transform: rotate(5deg); }

.w-video { position: relative; margin: 0; overflow: hidden; border-radius: var(--radius); background: var(--farbe-buehne); }
.w-video picture { display: block; width: 100%; height: 100%; }
.w-video img, .w-video video { width: 100%; height: 100%; object-fit: cover; transition: transform 700ms var(--kurve-ein); }
.w-video--hoch { aspect-ratio: 4 / 5; box-shadow: var(--schatten-karte); transform: var(--drehung-verspielt); transition: transform 600ms var(--kurve-ein); }
.w-hero__video:hover .w-video--hoch, .w-video--hoch.spielt { transform: none; }
.w-video--quer { aspect-ratio: 4 / 3; }
.w-video--quer img, .s-hero__bild img { object-position: top; }

.w-video__start { display: none; position: absolute; inset: 0; place-items: center; background: transparent; border: 0; cursor: pointer; padding: 0; }
.w-video.hat-video .w-video__start { display: grid; }
.w-video.spielt .w-video__start, .w-video.spielt .w-video__zeile { display: none; }
.w-play { position: relative; width: 4.5rem; height: 4.5rem; border-radius: var(--radius-rund); background: var(--farbe-flaeche); display: grid; place-items: center; box-shadow: var(--schatten-schwebend); transition: transform 250ms var(--kurve-ein); }
.w-play::after { content: ""; border-left: 1.15rem solid var(--farbe-akzent); border-block: 0.72rem solid transparent; margin-left: 0.3rem; }
.w-play::before { content: ""; position: absolute; inset: 0; border-radius: var(--radius-rund); border: 2px solid var(--farbe-flaeche); animation: w-puls var(--dauer-puls) ease-out infinite; }
.w-video__start:hover .w-play { transform: scale(1.08); }
.w-video--quer .w-play { width: 3.75rem; height: 3.75rem; }
.w-video__zeile { display: none; position: absolute; left: 0; right: 0; bottom: 0; padding: var(--raum-2); color: var(--farbe-auf-buehne); font-weight: 600; font-size: var(--text-s); background: color-mix(in srgb, var(--farbe-buehne) 78%, transparent); }
.w-video.hat-video .w-video__zeile { display: block; }

.w-schwebe { position: absolute; left: -1.75rem; bottom: 13%; display: grid; gap: 0.1rem; padding: 0.7rem 1rem; background: var(--farbe-flaeche); border: var(--kontur); border-radius: var(--radius); box-shadow: var(--schatten-hover); color: var(--farbe-text); text-decoration: none; font-size: var(--text-s); line-height: 1.25; animation: w-schweben 3800ms ease-in-out infinite alternate; }
.w-schwebe .sterne { color: var(--farbe-signatur); letter-spacing: 0.08em; font-size: var(--text-m); }
.w-schwebe strong { font-family: var(--schrift-display); font-size: var(--text-l); }

.w-beweis { grid-area: beweis; list-style: none; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: var(--linie); }
.w-beweis li { padding: var(--raum-2) var(--raum-2) 0; display: grid; gap: 0.2rem; align-content: start; }
.w-beweis li + li { border-left: var(--linie); }
.w-beweis li:first-child { padding-left: 0; }
.w-beweis strong { font-family: var(--schrift-display); font-size: var(--text-xl); line-height: 1.1; }
.w-beweis span { font-size: var(--text-s); color: var(--farbe-text-gedimmt); }
.w-beweis .w-stern { color: var(--farbe-signatur); font-size: inherit; }

/* ---------- 2 · Ueberblick: Index-Zeilen ---------- */
.w-ueberblick__grid { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); gap: var(--raum-4); align-items: start; }
.w-ueberblick__kopf { position: sticky; top: 7rem; }
.w-ueberblick__kopf h2 { font-size: var(--text-3xl); font-weight: 800; }
.w-index { list-style: none; padding: 0; border-bottom: var(--linie); }
.w-index li { border-top: var(--linie); }
.w-index a { position: relative; display: grid; grid-template-columns: 3.5rem minmax(0, 1fr) auto; gap: var(--raum-2); align-items: center; padding: 1.15rem var(--raum-2); color: var(--farbe-text); text-decoration: none; transition: background-color 250ms ease; }
.w-index a::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--farbe-signatur); transform: scaleY(0); transform-origin: top; transition: transform 300ms var(--kurve-ein); }
.w-index a:hover, .w-index a:focus-visible { background: var(--farbe-flaeche); }
.w-index a:hover::before, .w-index a:focus-visible::before { transform: scaleY(1); }
.w-index__nr { font-family: var(--schrift-display); font-weight: 800; font-size: var(--text-2xl); color: var(--farbe-text-gedimmt); font-variant-numeric: tabular-nums; transition: color 250ms ease; }
.w-index a:hover .w-index__nr { color: var(--farbe-akzent); }
.w-index__text { display: grid; gap: 0.15rem; }
.w-index__text h3 { font-size: var(--text-xl); }
.w-index__text span { color: var(--farbe-text-gedimmt); }
.w-pfeil { position: relative; width: 1.6rem; height: 2px; background: var(--farbe-akzent); transition: transform 300ms var(--kurve-ein); }
.w-pfeil::after { content: ""; position: absolute; right: 0; top: 50%; width: 0.55rem; height: 0.55rem; border-top: 2px solid var(--farbe-akzent); border-right: 2px solid var(--farbe-akzent); transform: translateY(-50%) rotate(45deg); }
.w-index a:hover .w-pfeil { transform: translateX(6px); }

/* ---------- 3 · Proof Schilk ---------- */
.w-proof__grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: var(--raum-4); align-items: start; }
.w-proof__medien { position: sticky; top: 7.5rem; }
.w-proof .w-video { box-shadow: var(--schatten-karte); }
.w-proof .w-stimme { margin-top: var(--raum-3); }
.w-proof h2 { font-size: var(--text-3xl); }
.w-zahlen { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: var(--raum-3); }
.w-zahlen li { display: grid; gap: 0.3rem; }
.w-zahlen strong { justify-self: start; font-family: var(--schrift-display); font-size: var(--text-2xl); line-height: 1.1; border-bottom: var(--signatur-unterstrich); }
.w-zahlen span { font-size: var(--text-s); color: var(--farbe-auf-buehne-gedimmt); }
.w-stimme { margin: 0; padding: var(--raum-3); border-radius: var(--radius); background: var(--farbe-auf-buehne-flaeche); display: grid; gap: var(--raum-1); }
.w-stimme blockquote { font-size: var(--text-l); line-height: 1.4; }
.w-stimme figcaption { font-size: var(--text-s); color: var(--farbe-auf-buehne-gedimmt); }

/* ---------- Leistungswelt: Faden, Knoten, Detailsektionen ---------- */
.w-welt { position: relative; padding-block: var(--raum-4); --w-knoten: 2.75rem; --w-rand: max(var(--raum-2), calc((100% - var(--container-max)) / 2 + var(--raum-2))); }
.w-faden { position: absolute; z-index: 0; left: calc(var(--w-rand) + var(--w-knoten) / 2 - 12px); top: var(--faden-oben, 6rem); height: var(--faden-hoehe, calc(100% - 14rem)); width: 24px; background: var(--farbe-linie); -webkit-mask: var(--faden-maske) top center / 24px 160px repeat-y; mask: var(--faden-maske) top center / 24px 160px repeat-y; }
.w-faden__fuell { display: block; width: 100%; height: 100%; background: var(--farbe-akzent); clip-path: inset(0 0 calc(100% - var(--faden-stand, 100%)) 0); }
html.w-js .w-faden__fuell { --faden-stand: 0%; }
.w-welt__kopf { position: relative; z-index: 1; display: grid; grid-template-columns: var(--w-knoten) minmax(0, 1.1fr) minmax(0, 0.9fr); column-gap: var(--raum-3); align-items: end; padding-block: 0 var(--raum-3); }
.w-welt__kopf h2 { font-size: var(--text-3xl); font-weight: 800; }
.w-welt__kopf p { margin-left: var(--raum-3); max-width: 42ch; }
/* Startpunkt des Fadens: sitzt auf Hoehe der ersten H2-Zeile, der Faden beginnt hier */
.w-start { align-self: start; justify-self: center; width: 1rem; height: 1rem; margin-top: 0.55em; border-radius: var(--radius-rund); background: var(--farbe-akzent); box-shadow: 0 0 0 5px var(--farbe-flaeche); font-size: var(--text-3xl); }

.w-detail { position: relative; padding-block: var(--raum-4); }
.w-detail__grid { display: grid; grid-template-columns: var(--w-knoten) minmax(0, 1.1fr) minmax(0, 0.9fr); column-gap: var(--raum-3); align-items: start; }
.w-knoten { position: sticky; top: calc(50vh - var(--w-knoten) / 2); z-index: 1; width: var(--w-knoten); height: var(--w-knoten); display: grid; place-items: center; border-radius: var(--radius-rund); background: var(--farbe-akzent); border: 2px solid var(--farbe-akzent); color: var(--farbe-auf-akzent); font-family: var(--schrift-display); font-weight: 800; font-size: var(--text-s); font-variant-numeric: tabular-nums; transition: background-color 400ms ease, color 400ms ease, border-color 400ms ease; }
html.w-js .w-knoten:not(.erreicht) { background: var(--farbe-flaeche); border-color: var(--farbe-linie); color: var(--farbe-text-gedimmt); }
.w-knoten.aktiv::after { content: ""; position: absolute; inset: -2px; border-radius: var(--radius-rund); border: 2px solid var(--farbe-akzent); animation: w-puls var(--dauer-puls) ease-out infinite; }

.w-label { font-family: var(--schrift-display); font-weight: 700; color: var(--farbe-akzent); display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.6rem; min-height: var(--w-knoten); align-content: center; }
.w-label span { color: var(--farbe-text-gedimmt); font-variant-numeric: tabular-nums; }
.w-label span::after { content: "·"; margin-left: 0.6rem; }
.w-detail__text h2 { font-size: var(--text-2xl); font-weight: 800; max-width: 24ch; }
.w-detail__text p { max-width: 58ch; }
.w-punkte { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.7rem var(--raum-3); margin-top: var(--raum-3); font-weight: 600; }
.w-punkte li { display: grid; grid-template-columns: 1.1rem minmax(0, 1fr); gap: 0.6rem; align-items: baseline; }
.w-punkte li::before { content: ""; height: 4px; background: var(--farbe-signatur); border-radius: var(--radius-pille); transform: translateY(-0.25em); }

.w-visual { position: sticky; top: 7.5rem; align-self: start; margin-left: var(--raum-3); padding: var(--raum-3); min-height: 23rem; display: grid; align-content: center; gap: var(--raum-2); background: var(--farbe-flaeche-alt); border-radius: var(--radius); overflow: hidden; }
.v-titel { display: grid; font-size: var(--text-s); font-weight: 600; color: var(--farbe-text-gedimmt); }
.v-titel span { grid-area: 1 / 1; transition: opacity 600ms ease 900ms; }
.v-titel span:first-child:not(:last-child) { opacity: 0; }
.v-balken { display: block; height: 0.5rem; border-radius: var(--radius-pille); background: var(--farbe-linie); }
.v-balken--titel { height: 0.7rem; width: 80%; background: var(--farbe-buehne); }
.v-balken--kurz { width: 55%; }
.v-knopf { display: inline-block; padding: 0.5em 1em; border-radius: var(--radius-klein); background: var(--farbe-akzent); color: var(--farbe-auf-akzent); font-family: var(--schrift-display); font-weight: 700; font-size: var(--text-s); }
.v-knopf--leer { background: transparent; color: var(--farbe-text); border: var(--kontur); }
.v-knopf--klein { padding: 0; width: 60%; height: 0.9rem; }

/* 01 Struktur: der Seitenplan baut sich Zeile fuer Zeile auf */
.v-plan { align-content: start; }
.v-plan__liste { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.55rem; counter-reset: plan; }
.v-plan__liste li { counter-increment: plan; position: relative; display: grid; grid-template-columns: 3.4rem minmax(0, 1fr); gap: var(--raum-2); align-items: center; padding: 0.6rem 0.8rem 0.6rem 2.4rem; background: var(--farbe-flaeche); border: var(--kontur); border-radius: var(--radius-klein); transition: opacity 500ms ease, transform 500ms var(--kurve-ein); }
.v-plan__liste li::before { content: counter(plan); position: absolute; left: 0.8rem; top: 50%; transform: translateY(-50%); font-family: var(--schrift-display); font-weight: 800; font-size: var(--text-s); color: var(--farbe-akzent); font-variant-numeric: tabular-nums; }
.v-plan__liste li:nth-child(1) { transition-delay: 250ms; } .v-plan__liste li:nth-child(2) { transition-delay: 500ms; } .v-plan__liste li:nth-child(3) { transition-delay: 750ms; } .v-plan__liste li:nth-child(4) { transition-delay: 1000ms; } .v-plan__liste li:nth-child(5) { transition-delay: 1250ms; }
html.w-js .v-plan:not(.ist-da) .v-plan__liste li { opacity: 0; transform: translateX(-14px); }
.v-plan__block { display: grid; gap: 0.25rem; align-content: center; height: 2.4rem; padding: 0.35rem; border-radius: var(--radius-mini); background: var(--farbe-flaeche-alt); }
.v-plan__block::before, .v-plan__block::after { content: ""; display: block; height: 0.3rem; border-radius: var(--radius-pille); background: var(--farbe-linie); }
.v-plan__block--hero::before { background: var(--farbe-buehne); width: 80%; height: 0.45rem; }
.v-plan__block--hero::after { width: 45%; background: var(--farbe-akzent); }
.v-plan__block--raster { grid-template-columns: repeat(3, 1fr); grid-auto-flow: column; }
.v-plan__block--raster::before, .v-plan__block--raster::after { height: 100%; }
.v-plan__block--raster::after { grid-column: 2 / 4; }
.v-plan__block--zeilen::before { width: 90%; } .v-plan__block--zeilen::after { width: 65%; }
.v-plan__block--stimmen::before { width: 55%; background: var(--farbe-signatur); height: 0.35rem; } .v-plan__block--stimmen::after { width: 85%; }
.v-plan__block--knopf { justify-items: center; }
.v-plan__block--knopf::before { width: 60%; height: 0.9rem; background: var(--farbe-akzent); border-radius: var(--radius-mini); } .v-plan__block--knopf::after { display: none; }
.v-plan__text { display: grid; line-height: 1.25; }
.v-plan__text strong { font-family: var(--schrift-display); font-size: var(--text-m); }
.v-plan__text em { font-style: normal; font-size: var(--text-s); color: var(--farbe-text-gedimmt); }

/* 02 Design: Stil-Tafel plus Handy */
.v-design { align-content: start; }
.v-design__tafel { width: calc(100% - 4.5rem); display: grid; gap: var(--raum-2); padding: var(--raum-3); background: var(--farbe-flaeche); border: var(--kontur); border-radius: var(--radius); }
.v-design__schrift { display: grid; gap: 0.15rem; }
.v-design__schrift strong { font-family: var(--schrift-display); font-weight: 800; font-size: var(--text-display); line-height: 1; color: var(--farbe-buehne); }
.v-design__schrift span { font-family: var(--schrift-display); font-weight: 700; font-size: var(--text-l); }
.v-design__schrift .v-design__fliess { font-family: var(--schrift-text); font-weight: 400; font-size: var(--text-s); color: var(--farbe-text-gedimmt); }
.v-design__farben { display: flex; gap: 0.5rem; }
.v-design__farben i { width: 2.2rem; height: 2.2rem; border-radius: var(--radius-rund); transition: transform 600ms var(--kurve-ein); }
.v-design__farben .f1 { background: var(--farbe-akzent); transition-delay: 300ms; }
.v-design__farben .f2 { background: var(--farbe-buehne); transition-delay: 420ms; }
.v-design__farben .f3 { background: var(--farbe-signatur); transition-delay: 540ms; }
.v-design__farben .f4 { background: var(--farbe-flaeche-alt); border: var(--kontur); transition-delay: 660ms; }
html.w-js .v-design:not(.ist-da) .v-design__farben i { transform: scale(0); }
.v-design__zeile { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.v-design__handy { position: absolute; right: var(--raum-2); bottom: calc(var(--raum-3) * -1); width: 7.6rem; aspect-ratio: 9 / 17; display: grid; align-content: start; gap: 0.45rem; padding: 0.9rem 0.6rem; background: var(--farbe-flaeche); border: 3px solid var(--farbe-buehne); border-radius: var(--radius); box-shadow: var(--schatten-hover); transition: transform 1000ms var(--kurve-ein) 500ms; }
html.w-js .v-design:not(.ist-da) .v-design__handy { transform: translateY(4rem); }
.v-design__bild { height: 3.4rem; border-radius: var(--radius-klein); background: var(--farbe-akzent-hauch); }

/* 03 Technik: Code-Karte plus Messbalken */
.v-code { border-radius: var(--radius); overflow: hidden; background: var(--farbe-buehne); color: var(--farbe-auf-buehne-gedimmt); font-family: var(--schrift-code); font-size: 0.8rem; line-height: 1.7; }
.v-code__leiste { display: flex; align-items: center; gap: 0.35rem; padding: 0.6rem 0.85rem; border-bottom: 1px solid var(--farbe-auf-buehne-flaeche); }
.v-code__leiste span { width: 0.55rem; height: 0.55rem; border-radius: var(--radius-rund); background: var(--farbe-auf-buehne-flaeche); }
.v-code__leiste em { margin-left: 0.5rem; font-style: normal; }
.v-code pre { margin: 0; padding: var(--raum-2); white-space: pre-wrap; overflow-wrap: anywhere; font-family: var(--schrift-code); }
.v-code code { font-family: var(--schrift-code); }
.v-code b { color: var(--farbe-auf-buehne); font-weight: 600; }
.v-code i { color: var(--farbe-signatur); font-style: normal; }
.v-code .z { transition: opacity 450ms ease; }
.v-code .z:nth-child(1) { transition-delay: 300ms; } .v-code .z:nth-child(2) { transition-delay: 550ms; } .v-code .z:nth-child(3) { transition-delay: 800ms; } .v-code .z:nth-child(4) { transition-delay: 1050ms; } .v-code .z:nth-child(5) { transition-delay: 1300ms; }
html.w-js .v-technik:not(.ist-da) .v-code .z { opacity: 0; }
.v-messung { list-style: none; padding: 0; display: grid; gap: 0.65rem; }
.v-messung li { display: grid; grid-template-columns: 4.6rem minmax(0, 1fr) 4rem; gap: 0.8rem; align-items: center; font-size: var(--text-s); font-weight: 600; }
.v-messung i { position: relative; height: 0.5rem; border-radius: var(--radius-pille); background: var(--farbe-linie); overflow: hidden; }
.v-messung i::after { content: ""; position: absolute; inset: 0; background: var(--farbe-akzent); border-radius: var(--radius-pille); transform-origin: left; transition: transform 1200ms var(--kurve-ein) 900ms; }
.v-messung li:nth-child(2) i::after { transition-delay: 1050ms; } .v-messung li:nth-child(3) i::after { transition-delay: 1200ms; }
html.w-js .v-technik:not(.ist-da) .v-messung i::after { transform: scaleX(0); }
.v-messung em { font-style: normal; color: var(--farbe-akzent); font-weight: 700; }

/* 04 SEO: Suche tippt sich, Treffer erscheint, Bausteine leuchten auf */
.v-seo__suche { display: flex; align-items: center; gap: 0.7rem; padding: 0.7rem 1.1rem; background: var(--farbe-flaeche); border: var(--kontur); border-radius: var(--radius-pille); }
.v-lupe { position: relative; flex: none; width: 0.85rem; height: 0.85rem; border: 2px solid var(--farbe-text-gedimmt); border-radius: var(--radius-rund); }
.v-lupe::after { content: ""; position: absolute; right: -0.4rem; bottom: -0.3rem; width: 0.45rem; height: 2px; background: var(--farbe-text-gedimmt); transform: rotate(45deg); }
.v-seo__eingabe { display: inline-block; max-width: 34ch; overflow: hidden; white-space: nowrap; font-size: var(--text-s); font-weight: 600; border-right: 2px solid var(--farbe-akzent); padding-right: 2px; transition: max-width 1100ms steps(30, end) 250ms; animation: w-blinken 1000ms steps(1) infinite; }
html.w-js .v-seo:not(.ist-da) .v-seo__eingabe { max-width: 0; }
.v-seo__treffer { display: grid; gap: 0.45rem; padding: var(--raum-2); background: var(--farbe-flaeche); border: var(--kontur); border-radius: var(--radius); transition: opacity 600ms ease 1250ms, transform 600ms var(--kurve-ein) 1250ms; }
.v-seo__treffer--blass { opacity: 0.55; transition-delay: 1400ms; }
html.w-js .v-seo:not(.ist-da) .v-seo__treffer { opacity: 0; transform: translateY(12px); }
.v-seo__url { font-size: var(--text-s); color: var(--farbe-text-gedimmt); }
.v-seo__treffer strong { font-family: var(--schrift-display); color: var(--farbe-akzent); line-height: 1.25; }
.v-marken { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 0.4rem; }
.v-marken li { padding: 0.3em 0.8em; border-radius: var(--radius-pille); border: 1px solid var(--farbe-akzent); background: var(--farbe-akzent); color: var(--farbe-auf-akzent); font-size: var(--text-s); font-weight: 600; transition: background-color 400ms ease, color 400ms ease, border-color 400ms ease; }
.v-marken li:nth-child(1) { transition-delay: 1600ms; } .v-marken li:nth-child(2) { transition-delay: 1750ms; } .v-marken li:nth-child(3) { transition-delay: 1900ms; } .v-marken li:nth-child(4) { transition-delay: 2050ms; } .v-marken li:nth-child(5) { transition-delay: 2200ms; }
html.w-js .v-seo:not(.ist-da) .v-marken li { background: var(--farbe-flaeche); color: var(--farbe-text-gedimmt); border-color: var(--farbe-linie); }

/* 05 KI: Datenkarte, Scan-Zeile laeuft durch */
.v-ki__rahmen { position: relative; overflow: hidden; background: var(--farbe-flaeche); border: var(--kontur); border-radius: var(--radius); }
.v-ki__scan { position: absolute; left: 0; right: 0; top: 0; height: calc(100% / 6); background: var(--farbe-akzent-hauch); border-bottom: 2px solid var(--farbe-akzent); animation: w-scan 5200ms ease-in-out infinite alternate; }
.v-ki__daten { position: relative; display: grid; grid-auto-rows: 1fr; }
.v-ki__daten div { display: grid; grid-template-columns: 5.4rem minmax(0, 1fr) auto; gap: 0.8rem; align-items: center; padding: 0.7rem 1rem; }
.v-ki__daten div + div { border-top: var(--linie); }
.v-ki__daten dt { font-family: var(--schrift-code); font-size: 0.8rem; color: var(--farbe-text-gedimmt); }
.v-ki__daten dd { font-size: var(--text-s); font-weight: 600; }
.v-ki__daten div::after { content: "✓"; color: var(--farbe-akzent); font-weight: 800; transition: opacity 400ms ease, transform 400ms var(--kurve-ein); }
.v-ki__daten div:nth-child(1)::after { transition-delay: 500ms; } .v-ki__daten div:nth-child(2)::after { transition-delay: 800ms; } .v-ki__daten div:nth-child(3)::after { transition-delay: 1100ms; } .v-ki__daten div:nth-child(4)::after { transition-delay: 1400ms; } .v-ki__daten div:nth-child(5)::after { transition-delay: 1700ms; } .v-ki__daten div:nth-child(6)::after { transition-delay: 2000ms; }
html.w-js .v-ki:not(.ist-da) .v-ki__daten div::after { opacity: 0; transform: scale(0.4); }

/* 06 Reise: drei Herkuenfte, eine Website, eine Anfrage */
.v-reise__svg { width: 100%; height: auto; overflow: visible; }
.v-reise__weg { fill: none; stroke: var(--farbe-akzent); stroke-width: 2; stroke-dasharray: 3 7; stroke-linecap: round; opacity: 0.45; }
.v-reise__punkt { fill: var(--farbe-akzent); }
.v-reise__quelle rect { fill: var(--farbe-flaeche); stroke: var(--farbe-linie); }
.v-reise__svg text { font-family: var(--schrift-display); font-weight: 700; font-size: 13px; text-anchor: middle; fill: var(--farbe-text); }
.v-reise__seite rect { fill: var(--farbe-flaeche); stroke: var(--farbe-buehne); stroke-width: 2; }
.v-reise__seite line { stroke: var(--farbe-linie); stroke-width: 5; stroke-linecap: round; }
.v-reise__seite .v-reise__knopf { fill: var(--farbe-akzent); stroke: none; }
.v-reise__ziel circle { fill: var(--farbe-akzent); }
.v-reise__ziel text { fill: var(--farbe-auf-akzent); }
.v-reise__ziel .v-reise__ring { fill: none; stroke: var(--farbe-akzent); stroke-width: 2; transform-box: fill-box; transform-origin: center; animation: w-puls var(--dauer-puls) ease-out infinite; }

/* ---------- CTA-Karten in der Leistungswelt (liegen ueber dem Faden) ---------- */
.w-cta { position: relative; z-index: 2; padding-block: var(--raum-3); }
.w-cta__karte { position: relative; overflow: hidden; border-radius: var(--radius); padding: clamp(2.25rem, 5vw, 4.5rem); }
.w-cta__karte > * { position: relative; }
.w-cta--akzent .w-cta__karte { background: var(--farbe-akzent); color: var(--farbe-auf-akzent); text-align: center; display: grid; gap: var(--raum-2); justify-items: center; }
.w-cta--akzent h2 { font-size: var(--text-3xl); font-weight: 800; max-width: 20ch; }
.w-cta--akzent p { max-width: 54ch; }
.w-cta--akzent .knopf { background: var(--farbe-auf-akzent); color: var(--farbe-akzent); margin-top: var(--raum-1); }
.w-ringe { position: absolute !important; right: -7rem; top: -7rem; width: 22rem; height: 22rem; pointer-events: none; }
.w-ringe i { position: absolute; inset: 0; border-radius: var(--radius-rund); border: 1.5px solid var(--farbe-ring); animation: w-ring 6000ms ease-out infinite; }
.w-ringe i:nth-child(2) { animation-delay: 2000ms; }
.w-ringe i:nth-child(3) { animation-delay: 4000ms; }

.w-cta--buehne .w-cta__karte { background: var(--farbe-buehne); color: var(--farbe-auf-buehne); }
.w-cta__karte--split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--raum-4); align-items: center; }
.w-cta--buehne h2 { font-size: var(--text-3xl); font-weight: 800; }
.w-cta--buehne .knopf { background: var(--farbe-auf-buehne); color: var(--farbe-buehne); }
.w-abhaken { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: var(--raum-3); }
.w-abhaken li { padding: 0.35em 0.9em; border-radius: var(--radius-pille); background: var(--farbe-auf-buehne-flaeche); font-size: var(--text-s); font-weight: 600; text-decoration: line-through; text-decoration-color: var(--farbe-signatur); text-decoration-thickness: 1px; color: var(--farbe-auf-buehne-gedimmt); transition: color 500ms ease, text-decoration-color 500ms ease; }
.w-abhaken li:nth-child(1) { transition-delay: 700ms; } .w-abhaken li:nth-child(2) { transition-delay: 1050ms; } .w-abhaken li:nth-child(3) { transition-delay: 1400ms; } .w-abhaken li:nth-child(4) { transition-delay: 1750ms; } .w-abhaken li:nth-child(5) { transition-delay: 2100ms; }
html.w-js .w-cta__karte:not(.ist-da) .w-abhaken li { text-decoration-color: transparent; color: var(--farbe-auf-buehne); }

/* ---------- 12 · Referenzen ---------- */
.w-referenzen__kopf { max-width: 46rem; display: grid; gap: var(--raum-2); }
.w-referenzen__kopf h2 { font-size: var(--text-3xl); font-weight: 800; }
.w-referenzen__kopf p { color: var(--farbe-auf-buehne-gedimmt); }
.w-projekte { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--raum-3); }
.w-projekt { display: grid; gap: var(--raum-3); align-content: start; padding: var(--raum-2) var(--raum-2) var(--raum-3); border-radius: var(--radius); background: var(--farbe-auf-buehne-flaeche); }
.w-projekt > .stapel { padding-inline: var(--raum-2); }
.w-projekt--gross { grid-column: 1 / -1; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); align-items: center; padding-bottom: var(--raum-2); }
.w-projekt h3 { font-size: var(--text-xl); }
.w-projekt:hover .w-video img { transform: scale(1.035); }
.w-projekt .w-stimme { padding: 0; background: transparent; margin-top: var(--raum-3); }
.w-projekt .w-stimme blockquote { font-size: var(--text-m); }
.w-referenzen__fuss { text-align: center; }

/* ---------- 13 · Ueber Paul ---------- */
.w-paul__grid { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: var(--raum-4); align-items: center; }
.w-paul h2 { font-size: var(--text-3xl); font-weight: 800; max-width: 18ch; }
.w-paul p { max-width: 60ch; }
.w-paul__person { display: flex; align-items: center; gap: var(--raum-2); margin-top: var(--raum-3); }
.w-paul__person img { width: 4.5rem; height: 4.5rem; object-fit: cover; object-position: top; border-radius: var(--radius-rund); }
.w-paul__person > span { display: grid; }
.w-paul__person strong { font-family: var(--schrift-display); font-size: var(--text-l); }
.w-stationen { list-style: none; padding: 0 0 0 var(--raum-3); border-left: 2px solid var(--farbe-linie); display: grid; gap: var(--raum-3); }
.w-stationen li { position: relative; display: grid; gap: 0.2rem; }
.w-stationen li::before { content: ""; position: absolute; left: calc(var(--raum-3) * -1 - 8px); top: 0.45em; width: 14px; height: 14px; border-radius: var(--radius-rund); background: var(--farbe-flaeche); border: 3px solid var(--farbe-akzent); }
.w-stationen li:last-child::before { background: var(--farbe-akzent); }
.w-stationen strong { font-family: var(--schrift-display); font-size: var(--text-xl); line-height: 1.1; }
.w-stationen span { color: var(--farbe-text-gedimmt); }

/* ---------- 14 · Ablauf ---------- */
.w-ablauf__kopf, .w-preis__kopf { max-width: 46rem; display: grid; gap: var(--raum-2); }
.w-ablauf__kopf h2, .w-preis__kopf h2, .w-faq__kopf h2 { font-size: var(--text-3xl); font-weight: 800; }
.w-schritte { position: relative; list-style: none; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--raum-3); }
.w-schritte::before { content: ""; position: absolute; left: 0; right: 0; top: 0.55rem; height: 2px; background: var(--farbe-linie); }
/* Ablauf laeuft von selbst: Strich fuellt sich, dann der naechste Punkt (je Schritt 1 s, --n = Position) */
.w-schritte li { --n: 0; --takt: 1s; position: relative; padding-top: var(--raum-3); display: grid; gap: 0.4rem; align-content: start; transition: opacity 250ms ease; }
.w-schritte li:nth-child(2) { --n: 1; } .w-schritte li:nth-child(3) { --n: 2; } .w-schritte li:nth-child(4) { --n: 3; } .w-schritte li:nth-child(5) { --n: 4; }
.w-schritte li::before { content: ""; position: absolute; z-index: 1; left: 0; top: 0; width: 1.2rem; height: 1.2rem; border-radius: var(--radius-klein); background: var(--farbe-akzent); border: 3px solid var(--farbe-akzent); transition: background-color 300ms ease calc(var(--n) * var(--takt)), border-color 300ms ease calc(var(--n) * var(--takt)), transform 250ms var(--kurve-ein); }
.w-schritte li::after { content: ""; position: absolute; left: 1.2rem; top: 0.55rem; width: calc(100% - 1.2rem + var(--raum-3)); height: 2px; background: var(--farbe-akzent); transform-origin: left; transition: transform 700ms var(--kurve-ein) calc(var(--n) * var(--takt) + 250ms); }
.w-schritte li:last-child::after { width: calc(100% - 1.2rem); }
html.w-js .w-schritte:not(.ist-da) li::before { background: var(--farbe-flaeche-alt); border-color: var(--farbe-linie); }
html.w-js .w-schritte:not(.ist-da) li::after { transform: scaleX(0); }
/* Hover: der Schritt tritt vor, die anderen treten zurueck */
.w-schritte:hover li:not(:hover) { opacity: 0.45; }
.w-schritte li:hover::before { transform: scale(1.3); transition-delay: 0s; }
.w-schritte li:hover h3 { color: var(--farbe-akzent); }
.w-schritte__marke { font-family: var(--schrift-display); font-weight: 700; font-size: var(--text-s); color: var(--farbe-akzent); }
.w-schritte h3 { font-size: var(--text-l); }
.w-schritte p { font-size: var(--text-s); }
.w-ablauf__fuss { font-family: var(--schrift-display); font-weight: 600; font-size: var(--text-l); max-width: 46rem; }

/* ---------- 15 · Preis ---------- */
.w-spannen { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); border: var(--kontur); border-radius: var(--radius); overflow: hidden; }
.w-spannen > div { padding: var(--raum-3); display: grid; gap: 0.3rem; align-content: center; }
.w-spannen > div + div { border-left: var(--linie); background: var(--farbe-flaeche-alt); }
.w-spannen__zahl { font-family: var(--schrift-display); font-size: var(--text-xl); font-weight: 600; line-height: 1.15; }
.w-spannen__zahl strong { font-size: var(--text-3xl); font-weight: 800; color: var(--farbe-buehne); border-bottom: var(--signatur-unterstrich); white-space: nowrap; }
.w-wege { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--raum-3); }
.w-weg { display: grid; gap: var(--raum-2); align-content: start; padding: var(--raum-3); border: var(--kontur); border-radius: var(--radius); background: var(--farbe-flaeche); transition: box-shadow 300ms ease, transform 300ms var(--kurve-ein); }
.w-weg:hover { transform: translateY(-4px); box-shadow: var(--schatten-hover); }
.w-weg--haupt { background: var(--farbe-akzent-hauch); border: 2px solid var(--farbe-akzent); }
.w-weg h3 { font-size: var(--text-xl); }
.w-weg p:last-child { margin-top: auto; }
.w-gehoert { max-width: 52rem; padding-left: var(--raum-3); border-left: var(--akzentkante); display: grid; gap: var(--raum-1); }

/* ---------- 16 · FAQ ---------- */
.w-faq__grid { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); gap: var(--raum-4); align-items: start; }
.w-faq__kopf { position: sticky; top: 7rem; }
.w-faq .faq-liste details[open] > p { animation: w-auf 350ms var(--kurve-ein); }
.w-faq__blog { margin-top: var(--raum-3); padding-top: var(--raum-2); border-top: var(--linie); }

/* ---------- 17 · Abschluss ---------- */
.w-abschluss__grid { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); gap: var(--raum-4); align-items: start; }
.w-abschluss h2 { font-size: var(--text-3xl); font-weight: 800; }
.w-abschluss .meta { color: var(--farbe-auf-akzent-gedimmt); }
.w-abschluss__live { display: flex; align-items: center; gap: 0.7rem; font-weight: 600; }
.w-punkt-live { position: relative; flex: none; width: 0.7rem; height: 0.7rem; border-radius: var(--radius-rund); background: var(--farbe-signatur); }
.w-punkt-live::after { content: ""; position: absolute; inset: 0; border-radius: var(--radius-rund); border: 2px solid var(--farbe-signatur); animation: w-puls var(--dauer-puls) ease-out infinite; }

/* ---------- Lotse 01 bis 06 (nur grosse Bildschirme) ---------- */
.w-lotse { position: fixed; right: 1.1rem; top: 50%; z-index: 5; display: grid; gap: 0.35rem; transform: translateY(-50%); opacity: 0; pointer-events: none; transition: opacity 350ms ease; }
.w-lotse[hidden] { display: none; }
.w-lotse.sichtbar { opacity: 1; pointer-events: auto; }
.w-lotse a { display: flex; flex-direction: row-reverse; align-items: center; gap: 0.5rem; text-decoration: none; font-family: var(--schrift-display); font-weight: 700; font-size: 0.75rem; color: var(--farbe-text-gedimmt); }
.w-lotse span { width: 1.9rem; height: 1.9rem; display: grid; place-items: center; border-radius: var(--radius-rund); background: var(--farbe-flaeche); border: var(--kontur); transition: background-color 300ms ease, color 300ms ease, border-color 300ms ease; }
.w-lotse em { font-style: normal; padding: 0.25em 0.7em; border-radius: var(--radius-klein); background: var(--farbe-flaeche); border: var(--kontur); color: var(--farbe-text); opacity: 0; transform: translateX(6px); transition: opacity 250ms ease, transform 250ms var(--kurve-ein); }
.w-lotse a:hover em, .w-lotse a:focus-visible em { opacity: 1; transform: none; }
.w-lotse a.aktiv span { background: var(--farbe-akzent); border-color: var(--farbe-akzent); color: var(--farbe-auf-akzent); }
@media (max-width: 1339px) { .w-lotse { display: none; } }


/* ---------- Tablet und Mobil: gleicher Inhalt, gestapelt ---------- */
@media (max-width: 960px) {
  .w-hero__grid { grid-template-columns: minmax(0, 1fr); grid-template-areas: "text" "beweis" "video"; gap: var(--raum-3); }
  .w-hero__video { width: min(78%, 21rem); margin-block: var(--raum-2) var(--raum-3); }
  .w-beweis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .w-beweis li { padding: var(--raum-2) var(--raum-2) var(--raum-2) 0; }
  .w-beweis li + li { border-left: 0; }
  .w-beweis li:nth-child(even) { padding-left: var(--raum-2); border-left: var(--linie); }
  .w-beweis li:nth-child(n+3) { border-top: var(--linie); }
  .w-ueberblick__grid, .w-proof__grid, .w-paul__grid, .w-faq__grid, .w-abschluss__grid, .w-cta__karte--split { grid-template-columns: minmax(0, 1fr); gap: var(--raum-3); }
  .w-ueberblick__kopf, .w-faq__kopf, .w-proof__medien { position: static; }
  .w-welt__kopf { grid-template-columns: var(--w-knoten) minmax(0, 1fr); column-gap: var(--raum-2); row-gap: var(--raum-2); padding-block: 0 var(--raum-2); }
  .w-welt__kopf p { grid-column: 2; margin-left: 0; }
  .w-welt { --w-knoten: 2.25rem; padding-block: var(--raum-3); }
  .w-detail { padding-block: var(--raum-3); }
  .w-detail__grid { grid-template-columns: var(--w-knoten) minmax(0, 1fr); column-gap: var(--raum-2); }
  .w-knoten { grid-row: 1 / span 2; font-size: 0.75rem; }
  .w-visual { position: relative; top: auto; grid-column: 2; margin: var(--raum-3) 0 0; min-height: 0; padding: var(--raum-2); }
  .w-projekte, .w-wege { grid-template-columns: minmax(0, 1fr); }
  .w-projekt--gross { grid-template-columns: minmax(0, 1fr); padding-bottom: var(--raum-3); }
  .w-schritte { grid-template-columns: minmax(0, 1fr); gap: var(--raum-3); }
  .w-schritte::before { left: 0.55rem; right: auto; top: 0; bottom: 0; width: 2px; height: auto; }
  .w-schritte li::after, .w-schritte li:last-child::after { left: 0.55rem; top: 1.2rem; width: 2px; height: calc(100% - 1.2rem + var(--raum-3)); transform-origin: top; }
  .w-schritte li:last-child::after { height: calc(100% - 1.2rem); }
  html.w-js .w-schritte:not(.ist-da) li::after { transform: scaleY(0); }
  .w-schritte li { padding: 0 0 0 var(--raum-3); }
  .w-schritte p { font-size: var(--text-m); }
}
@media (max-width: 600px) {
  .w-index a { grid-template-columns: 2.4rem minmax(0, 1fr); padding-inline: var(--raum-1); }
  .w-index .w-pfeil { display: none; }
  .w-index__nr { font-size: var(--text-xl); align-self: start; }
  .w-punkte { grid-template-columns: minmax(0, 1fr); }
  .w-spannen { grid-template-columns: minmax(0, 1fr); }
  .w-spannen > div + div { border-left: 0; border-top: var(--linie); }
  .w-spannen__zahl strong { font-size: var(--text-2xl); }
  .w-schwebe { left: -0.75rem; }
  .w-cta__karte { padding: var(--raum-3) var(--raum-2); }
  .v-design__tafel { width: calc(100% - 3.5rem); padding: var(--raum-2); }
  .v-design__handy { width: 6.2rem; right: var(--raum-1); }
  .v-ki__daten div { grid-template-columns: 4.4rem minmax(0, 1fr) auto; padding-inline: 0.75rem; }
}

@media (prefers-reduced-motion: reduce) {
  .w-seite *, .w-seite *::before, .w-seite *::after, .w-lotse, .w-lotse * { animation: none !important; transition: none !important; }
  .w-video--hoch { transform: none; }
}