/* ==========================================================================
   Leistungsseite Websites (Thread A) · Präfix .ws-
   Nur Tokens aus base.css. Kundenfarben nur auf Kundenbühnen (GMA #1b4471, Zach #2f3a1c, als --c im Markup).
   Dramaturgie: Vom ersten Eindruck zur Anfrage. Struktur: service-pages/work/websites/struktur.md
   ========================================================================== */

/* ---------------- Gemeinsam: echter Screenshot ohne Browser-Rahmen ---------------- */
.ws-shot { position: relative; overflow: hidden; border-radius: var(--r-lg); background: var(--surface-2); box-shadow: var(--shadow-3); }
.ws-shot::after { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .07); pointer-events: none; }
.ws-shot > img, .ws-shot > video { width: 100%; height: auto; display: block; }
.ws-shot--phone { border-radius: var(--r-xl); }
.ws-shot--video { aspect-ratio: 16 / 9; }
.ws-shot--video > video { height: 100%; object-fit: cover; }

/* ---------------- 1 · Hero ----------------
   Text links, rechts die Kundenbühne: Screenshot vollständig, darunter Logo und Einordnung (keine Überlagerung). */
.ws-hero { padding-top: clamp(7.5rem, 5.5rem + 6vw, 10.5rem); padding-bottom: var(--sec-y); }
.ws-hero__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: clamp(2.5rem, 1rem + 4vw, 5rem); align-items: center; }
.ws-hero__txt { display: grid; gap: 1.5rem; justify-items: start; }
.ws-hero__h { font-size: clamp(2.3rem, 1.5rem + 2.5vw, 3.9rem); line-height: 1.04; }
.ws-hero__lead { max-width: 32em; }
.ws-hero__acts { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.75rem; margin-top: .5rem; }
.ws-hero__trust { margin-top: .5rem; }
.ws-hero__stage { --p: clamp(1rem, .5rem + 1.8vw, 2.25rem); position: relative; display: grid; gap: var(--p); margin: 0; padding: var(--p); border-radius: var(--r-xl); background: var(--c); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .06), var(--shadow-2); }
.ws-hero__cap { display: flex; align-items: center; gap: 1rem; font-size: var(--fs-small); color: rgba(255, 255, 255, .8); }
.ws-hero__cap span { padding-left: 1rem; border-left: 1px solid rgba(255, 255, 255, .24); }
.ws-hero__logo { height: 28px; width: auto; }
@media (max-width: 1023px) {
  .ws-hero__grid { grid-template-columns: 1fr; }
  .ws-hero__h { max-width: 15em; font-size: clamp(2.3rem, 1.4rem + 3.4vw, 3.9rem); }
}
@media (max-width: 599px) {
  .ws-hero__acts { flex-direction: column; align-items: stretch; gap: 1rem; }
  .ws-hero__acts .btn { justify-content: space-between; }
  .ws-hero__acts .tlink { align-self: flex-start; }
  .ws-hero__logo { height: 22px; }
  .ws-hero__cap { gap: .75rem; font-size: .8125rem; }
  .ws-hero__cap span { padding-left: .75rem; }
}

/* ---------------- 1b · Hero Option B: Projektbühne (Vorschlag, src/websites/hero-b.html) ----------------
   Drei echte Websites übereinander (Desktop + Smartphone), ruhige Überblendung; die Bühnenfarbe folgt dem Projekt (--c per JS).
   Keine Glows, kein Verlauf, kein Browser-Rahmen. Aktiver Reiter: etwas hellere Fläche + roter Strich. */
.ws-hb { --p: clamp(1rem, .5rem + 1.8vw, 2.25rem); position: relative; display: grid; gap: 1rem; margin: 0; }
.ws-hb__stage { display: grid; padding: var(--p) var(--p) calc(var(--p) * .85); border-radius: var(--r-xl); background: var(--c); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .06), var(--shadow-2); transition: background 900ms var(--ease); }
.ws-hb__slide { grid-area: 1 / 1; display: grid; grid-template-columns: minmax(0, 1fr) 21%; grid-template-rows: auto auto; column-gap: 0; row-gap: var(--p); opacity: 0; visibility: hidden; transition: opacity 700ms var(--ease), visibility 0s 700ms; }
.ws-hb__slide.is-on { opacity: 1; visibility: visible; transition: opacity 700ms var(--ease), visibility 0s; }
.ws-hb__desk { grid-column: 1 / -1; grid-row: 1; width: 88%; aspect-ratio: 16 / 10; }
.ws-hb__desk > img { height: 100%; object-fit: cover; object-position: 50% 0; }
.ws-hb__phone { grid-column: 2; grid-row: 1; align-self: end; justify-self: end; width: 100%; aspect-ratio: 390 / 760; margin-bottom: -8%; border-radius: var(--r-lg); box-shadow: 0 0 0 4px var(--c), var(--shadow-3); transform: translateY(14px); transition: transform 900ms var(--ease), box-shadow 900ms var(--ease); }
.ws-hb__phone > img { height: 100%; object-fit: cover; object-position: 50% 0; }
.ws-hb__slide.is-on .ws-hb__phone { transform: none; }
.ws-hb__cap { grid-column: 1 / -1; grid-row: 2; display: flex; align-items: center; gap: 1rem; min-width: 0; font-size: var(--fs-small); color: rgba(255, 255, 255, .8); }
.ws-hb__cap span { padding-left: 1rem; border-left: 1px solid rgba(255, 255, 255, .24); }
.ws-hb__logo { height: 28px; width: auto; }
.ws-hb__go { display: inline-flex; align-items: center; gap: .4rem; margin-left: auto; font-weight: 600; color: #fff; white-space: nowrap; }
.ws-hb__go svg { width: .85rem; height: .85rem; transition: transform var(--t-mid) var(--ease); }
.ws-hb__go:hover svg { transform: translateX(3px); }
.ws-hb__nav { display: flex; align-items: center; gap: .75rem; }
.ws-hb__tabs { flex: 1; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .5rem; }
.ws-hb__tab { position: relative; display: grid; gap: .55rem; padding: .7rem .85rem .8rem; border-radius: var(--r-md); background: transparent; color: var(--text-3); font: inherit; font-size: var(--fs-meta); font-weight: 600; text-align: left; cursor: pointer; transition: background var(--t-mid), color var(--t-mid); }
.ws-hb__tab i { position: relative; display: block; height: 2px; border-radius: 2px; background: var(--line-3); overflow: hidden; }
.ws-hb__tab i::after { content: ""; position: absolute; inset: 0; background: var(--red); transform: scaleX(0); transform-origin: 0 50%; }
.ws-hb__tab.is-on { background: var(--surface-2); color: var(--text); }
.ws-hb__tab.is-on i::after { transform: scaleX(1); }
.ws-hb.is-run .ws-hb__tab.is-on i::after { animation: ws-hb-run var(--hb-t, 6000ms) linear forwards; }
.ws-hb.is-paused .ws-hb__tab.is-on i::after { animation-play-state: paused; }
@keyframes ws-hb-run { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.ws-hb__tab:hover { color: var(--text); }
.ws-hb__tab:focus-visible { outline: 2px solid var(--text); outline-offset: 2px; }
@media (max-width: 599px) {
  .ws-hb__logo { height: 22px; }
  .ws-hb__cap { gap: .75rem; font-size: .8125rem; }
  .ws-hb__cap span { display: none; }
  .ws-hb__slide { grid-template-columns: minmax(0, 1fr) 25%; }
  .ws-hb__tab { padding-inline: .6rem; font-size: .75rem; }
}
@media (prefers-reduced-motion: reduce) {
  .ws-hb__stage, .ws-hb__slide, .ws-hb__phone { transition: none; }
}

/* ---------------- 2 · Anzeichen ---------------- */
.ws-signs__list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: clamp(2rem, 1rem + 4vw, 6rem); }
.ws-signs__list > li { display: grid; grid-template-columns: 2.75rem minmax(0, 1fr); column-gap: .5rem; row-gap: .5rem; padding-block: 1.6rem 1.75rem; border-top: 1px solid var(--line-2); }
.ws-signs__n { grid-row: 1 / span 2; font-size: var(--fs-meta); color: var(--text-3); padding-top: .35rem; }
.ws-signs__q { font-size: var(--fs-h3); font-weight: 600; line-height: 1.22; letter-spacing: -.02em; color: var(--text); text-wrap: balance; }
.ws-signs__a { color: var(--text-2); max-width: 34em; text-wrap: pretty; }
.ws-signs__more { display: flex; flex-wrap: wrap; align-items: baseline; gap: .5rem 1rem; margin-top: 2.25rem; padding-top: 1.75rem; border-top: 1px solid var(--line-2); color: var(--text-2); }
@media (max-width: 899px) { .ws-signs__list { grid-template-columns: 1fr; } }
@media (max-width: 599px) {
  .ws-signs__list > li { grid-template-columns: 2.1rem minmax(0, 1fr); padding-block: 1.25rem 1.35rem; }
  .ws-signs__q { font-size: 1.2rem; }
}

/* ---------------- 3 · Prinzip (Sticky-Bühne + vier Schritte) ---------------- */
.ws-how__grid { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: clamp(2.5rem, 1rem + 4vw, 6rem); align-items: start; }
.ws-how__stage { position: relative; height: 100%; }
.ws-how__pin { position: sticky; top: calc(50vh - min(19rem, 30vw)); display: grid; gap: 1rem; }
.ws-how__frame { position: relative; aspect-ratio: 1440 / 1000; }
.ws-how__scr { position: absolute; inset: 0; margin: 0; display: flex; flex-direction: column; justify-content: center; opacity: 0; transform: translateY(12px); transition: opacity var(--t-slow) var(--ease), transform var(--t-slow) var(--ease); pointer-events: none; }
.ws-how__scr.is-on { opacity: 1; transform: none; }
.ws-how__scr--phone { align-items: center; }
.ws-how__scr--phone .ws-shot { height: 100%; aspect-ratio: 390 / 845; }
.ws-how__scr--phone .ws-shot > img { height: 100%; width: auto; }
/* Markierung: dunkle Kachel mit Nummer, aktiv mit kurzem roten Strich links (wie .sel), keine Glows */
.ws-mark { position: absolute; left: var(--x); top: var(--y); z-index: 2; display: grid; place-items: center; min-width: 2.25rem; height: 2.25rem; padding-inline: .5rem; border-radius: var(--r-sm); background: var(--scrim); box-shadow: inset 0 0 0 1px var(--line-3), var(--shadow-2); color: var(--text); font-style: normal; font-size: .8125rem; font-weight: 650; font-variant-numeric: tabular-nums; transform: translate(-50%, -50%) scale(.9); opacity: 0; transition: opacity var(--t-mid) var(--ease), transform var(--t-mid) var(--ease), background var(--t-mid); }
.ws-mark::before { content: ""; position: absolute; left: 0; top: 50%; width: 3px; height: 1rem; border-radius: 0 3px 3px 0; background: var(--red); transform: translateY(-50%) scaleY(0); transition: transform var(--t-mid) var(--ease); }
.ws-mark.is-on { opacity: 1; transform: translate(-50%, -50%); background: var(--surface-3); }
.ws-mark.is-on::before { transform: translateY(-50%) scaleY(1); }
.ws-mark.is-near { opacity: .75; }
.ws-how__src { justify-self: start; font-size: var(--fs-meta); color: var(--text-2); min-height: 1.2em; }
.ws-how__ref { display: none; justify-self: start; margin-top: 1.5rem; }

.ws-how__steps { display: grid; }
.ws-step { display: grid; gap: .9rem; padding-block: clamp(2.5rem, 1rem + 8vh, 6rem); border-top: 1px solid var(--line-2); transition: opacity var(--t-mid) var(--ease); }
.ws-step:first-child { border-top: 0; padding-top: 0; }
.ws-step > p:not([class]) { color: var(--text-2); max-width: 32em; text-wrap: pretty; }
/* Schrittnummer (Marcel 24.10: Wechsel 1 → 2 → 3 deutlicher): große Ziffer mit kurzem Strich davor, aktiv rot */
.ws-step__n { display: flex; align-items: center; gap: .9rem; font-size: var(--fs-eyebrow); font-weight: 600; color: var(--text-2); transition: color var(--t-mid); }
.ws-step__n::before { content: ""; flex: none; width: 1.75rem; height: 2px; border-radius: 2px; background: var(--line-3); transition: background var(--t-mid), width var(--t-mid) var(--ease); }
.ws-step__n b { font-size: clamp(1.9rem, 1.4rem + 1.2vw, 2.6rem); font-weight: 600; line-height: 1; letter-spacing: -.03em; color: var(--text-3); transition: color var(--t-mid); }
.ws-step.is-active .ws-step__n { color: var(--text); }
.ws-step.is-active .ws-step__n::before { width: 2.75rem; background: var(--red); }
.ws-step.is-active .ws-step__n b { color: var(--text); }
/* Schrittleiste über der Bühne: Zähler, vier Abschnitte (bis zum aktiven rot), Name des Schritts */
.ws-how__prog { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 1rem; font-size: var(--fs-meta); color: var(--text-3); }
.ws-how__count b { font-weight: 650; color: var(--text); }
.ws-how__bar { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .4rem; }
.ws-how__bar i { height: 2px; border-radius: 2px; background: var(--line-3); transition: background var(--t-mid) var(--ease); }
.ws-how__bar i.is-on { background: var(--red); }
.ws-how__name { font-weight: 600; color: var(--text-2); }
.ws-step__src { font-size: var(--fs-meta); color: var(--text-3); display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .75rem; }
.ws-step__vis { margin: .5rem 0 0; }
.ws-step__vis--phone .ws-shot { width: min(62%, 15rem); }
.ws-step__vis--nav .ws-shot { border-radius: var(--r-md); }

/* Desktop mit JS: Bühne links trägt die Screens, Schritte zeigen nur Text; inaktive Schritte gedämpft */
@media (min-width: 1024px) {
  .js .ws-step__vis, .js .ws-step .ws-step__src { display: none; }
  .js .ws-step:not(.is-active) { opacity: .7; }
}
@media (max-width: 1023px) {
  .ws-how__stage { display: none; }
  .ws-how__ref { display: inline-flex; }
  .ws-how__grid { grid-template-columns: 1fr; }
  .ws-step { padding-block: 2.25rem; }
  .ws-step:first-child { padding-top: 0; }
  .ws-step__vis--dup, .ws-step__vis--dup + .ws-step__src { display: none; }
}
html:not(.js) .ws-how__stage { display: none; }
html:not(.js) .ws-how__ref { display: inline-flex; }
html:not(.js) .ws-how__grid { grid-template-columns: minmax(0, 1fr); max-width: 52rem; }

/* ---------------- 4 · Leistungsumfang (fünf Kacheln) ---------------- */
.ws-scope__grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: clamp(.75rem, .4rem + .9vw, 1.25rem); }
.ws-scope__tile { display: grid; grid-template-rows: auto auto auto 1fr; align-content: start; gap: .8rem; padding: clamp(1.25rem, .9rem + .9vw, 1.75rem); }
.ws-scope__top { display: flex; align-items: center; justify-content: space-between; margin-bottom: .9rem; }
.ws-scope__i { width: 2.5rem; height: 2.5rem; padding: .55rem; border-radius: var(--r-md); background: var(--surface-3); box-shadow: var(--ring); color: var(--text); }
.ws-scope__top b { font-size: var(--fs-meta); font-weight: 600; color: var(--text-3); }
.ws-scope__t { font-size: var(--fs-h3); font-weight: 600; line-height: 1.15; letter-spacing: -.022em; }
.ws-scope__why { color: var(--text-2); text-wrap: pretty; }
.ws-scope__tags { display: flex; flex-wrap: wrap; align-content: flex-start; gap: .4rem; margin-top: .6rem; padding-top: 1rem; border-top: 1px solid var(--line); }
.ws-scope__tags li { padding: .3rem .6rem; border-radius: var(--r-sm); background: var(--surface-3); box-shadow: var(--ring); font-size: .8125rem; font-weight: 560; line-height: 1.3; color: var(--text); }
@media (max-width: 1179px) { .ws-scope__grid { grid-template-columns: repeat(6, minmax(0, 1fr)); } .ws-scope__tile { grid-column: span 2; } .ws-scope__tile:nth-child(n+4) { grid-column: span 3; } }
@media (max-width: 767px) { .ws-scope__grid { grid-template-columns: 1fr; } .ws-scope__tile, .ws-scope__tile:nth-child(n+4) { grid-column: auto; } }

/* ---------------- 5 · Nach dem Launch (drei Vorteile) ---------------- */
.ws-plat__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1rem, .6rem + 1.2vw, 1.75rem); }
.ws-plat__card { display: grid; align-content: start; gap: .85rem; padding: clamp(1.5rem, 1rem + 1.4vw, 2.25rem); }
.ws-plat__i { width: 2.75rem; height: 2.75rem; padding: .6rem; margin-bottom: .75rem; border-radius: var(--r-md); background: var(--surface-3); box-shadow: var(--ring); color: var(--text); }
.ws-plat__t { font-size: var(--fs-h3); font-weight: 600; line-height: 1.18; letter-spacing: -.022em; }
.ws-plat__card p { color: var(--text-2); text-wrap: pretty; }
@media (max-width: 899px) { .ws-plat__grid { grid-template-columns: 1fr; } }

/* ---------------- 6 · Beispiele ---------------- */
.ws-case { --on: #fff; position: relative; border-radius: var(--r-xl); background: var(--c); color: var(--on); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .06), var(--shadow-2); overflow: hidden; }
.ws-case--lg { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.7fr); gap: clamp(1.75rem, 1rem + 2.6vw, 4rem); align-items: center; padding: clamp(1.5rem, .8rem + 2.4vw, 3.5rem); }
.ws-case__txt { display: grid; gap: 1.25rem; justify-items: start; }
.ws-case__logo { width: auto; height: var(--lh, 30px); }
.ws-case__t { font-size: clamp(1.35rem, 1.1rem + .9vw, 1.95rem); font-weight: 600; line-height: 1.18; letter-spacing: -.022em; text-wrap: balance; color: var(--on); }
.ws-case__feat { display: flex; flex-wrap: wrap; gap: .5rem; }
.ws-case__feat li { display: inline-flex; align-items: center; gap: .45rem; padding: .4rem .7rem; border-radius: var(--r-sm); background: rgba(255, 255, 255, .12); font-size: .9375rem; font-weight: 560; color: var(--on); }
.ws-case__feat svg { width: 16px; height: 16px; }
.ws-case__acts { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 1rem; margin-top: .25rem; }
.ws-case .btn--line { color: var(--on); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .34); }
.ws-case .btn--line .btn__k { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .22); }
.ws-case .btn--line:hover { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .6); }
.ws-case .btn--line:hover .btn__k { color: var(--on); }
.ws-case__media { position: relative; margin: 0; }
.ws-case__ctl { position: absolute; right: .9rem; bottom: .9rem; z-index: 2; }

.ws-cases__pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(1rem, .6rem + 1.4vw, 2rem); margin-top: clamp(1rem, .6rem + 1.4vw, 2rem); }
.ws-case--sm { display: grid; grid-template-rows: auto 1fr; }
.ws-case--sm .ws-case__media { padding: clamp(1.25rem, .8rem + 1.6vw, 2.25rem) clamp(1.25rem, .8rem + 1.6vw, 2.25rem) 0; }
.ws-case--sm .ws-shot { aspect-ratio: 16 / 10; }
.ws-case--sm .ws-shot > img { height: 100%; object-fit: cover; object-position: 50% 0; }
.ws-case--sm .ws-case__txt { padding: clamp(1.25rem, .8rem + 1.6vw, 2.25rem); align-content: start; }
.ws-case--sm .ws-case__t { font-size: clamp(1.2rem, 1.05rem + .5vw, 1.5rem); }
/* Projekt ohne Kundenfarbe: neutrale Karte */
.ws-case--plain { --on: var(--text); background: var(--surface-2); box-shadow: var(--ring), var(--shadow-1); }
.ws-case__name { font-size: 1.15rem; font-weight: 650; letter-spacing: -.01em; color: var(--text); line-height: 22px; }
.ws-case__feat--plain li { background: var(--surface-3); box-shadow: var(--ring); }
@media (max-width: 1023px) {
  .ws-case--lg { grid-template-columns: 1fr; }
  .ws-case--lg .ws-case__media { order: -1; }
}
@media (max-width: 767px) { .ws-cases__pair { grid-template-columns: 1fr; } }

/* Leitzitat: zwischen zwei Haarlinien, großes rotes Anführungszeichen (wie Homepage) */
.ws-quote { position: relative; display: grid; grid-template-columns: 3.5rem minmax(0, 1fr); column-gap: clamp(1rem, .5rem + 2vw, 2.5rem); margin: clamp(3rem, 2rem + 3vw, 5rem) 0 0; padding-block: clamp(2rem, 1.5rem + 2vw, 3.25rem); border-block: 1px solid var(--line-2); }
.ws-quote__mark { width: 2.75rem; height: auto; color: var(--red); margin-top: .35rem; }
.ws-quote blockquote { margin: 0; }
.ws-quote blockquote p { font-size: clamp(1.3rem, 1rem + 1.2vw, 2.1rem); font-weight: 600; line-height: 1.3; letter-spacing: -.022em; color: var(--text); text-wrap: pretty; max-width: 40em; }
.ws-quote__cut { color: var(--text-3); font-weight: 500; }
.ws-quote figcaption { grid-column: 2; display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 1.25rem; margin-top: 1.75rem; }
.ws-quote__av { display: grid; place-items: center; width: 2.75rem; height: 2.75rem; border-radius: var(--r-pill); background: var(--surface-3); box-shadow: var(--ring-2); font-size: .8125rem; font-weight: 650; color: var(--text); }
.ws-quote__who { display: grid; line-height: 1.35; }
.ws-quote__who b { font-weight: 650; }
.ws-quote__who small { font-size: var(--fs-meta); color: var(--text-2); }
.ws-quote__stars { width: 5.5rem; height: auto; color: var(--red); }
.ws-quote__full { margin-left: auto; }
@media (max-width: 639px) {
  .ws-quote { grid-template-columns: 1fr; }
  .ws-quote__mark { width: 2.1rem; margin-bottom: 1rem; }
  .ws-quote figcaption { grid-column: 1; }
  .ws-quote__full { margin-left: 0; }
}

/* ---------------- 7 · Zusammenarbeit (Zeitleiste) ---------------- */
.ws-flow__list { --gap: clamp(1rem, .5rem + 1.4vw, 2rem); display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--gap); }
.ws-flow__step { position: relative; display: grid; align-content: start; gap: .75rem; padding-top: 1.75rem; }
.ws-flow__step::before { content: ""; position: absolute; left: 0; right: calc(-1 * var(--gap)); top: 0; height: 1px; background: var(--line-2); }
.ws-flow__step:last-child::before { right: 0; }
.ws-flow__step::after { content: ""; position: absolute; left: 0; top: -4px; width: 9px; height: 9px; border-radius: var(--r-pill); background: var(--bg); box-shadow: inset 0 0 0 1.5px var(--line-3); }
.ws-flow__step:first-child::after { background: var(--red); box-shadow: none; }
.ws-flow__n { font-size: var(--fs-meta); color: var(--text-3); }
.ws-flow__t { font-size: 1.2rem; font-weight: 600; line-height: 1.25; letter-spacing: -.015em; }
.ws-flow__step > p:not([class]) { color: var(--text-2); font-size: .97rem; text-wrap: pretty; }
.ws-flow__go { justify-self: start; margin-top: .25rem; font-size: .95rem; }
@media (max-width: 1179px) and (min-width: 768px) {
  .ws-flow__list { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 2.5rem; }
  .ws-flow__step::before { right: 0; }
}
@media (max-width: 767px) {
  .ws-flow__list { grid-template-columns: 1fr; gap: 0; }
  .ws-flow__step { padding: 0 0 2rem 2rem; }
  .ws-flow__step::before { left: 4px; right: auto; top: .5rem; bottom: 0; width: 1px; height: auto; }
  .ws-flow__step:last-child::before { display: none; }
  .ws-flow__step::after { top: .35rem; }
}

/* ---------------- 8 · Kombinieren ---------------- */
.ws-combo__list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1rem, .6rem + 1.2vw, 1.75rem); }
.ws-combo__list > li { display: grid; }
.ws-combo__card { display: grid; grid-template-rows: auto auto 1fr auto; gap: .75rem; padding: clamp(1.5rem, 1rem + 1.4vw, 2.25rem); transition: background var(--t-mid) var(--ease), box-shadow var(--t-mid) var(--ease), transform var(--t-mid) var(--ease); }
.ws-combo__k { font-size: var(--fs-small); font-weight: 600; color: var(--text-3); }
.ws-combo__t { font-size: var(--fs-h3); font-weight: 600; line-height: 1.18; letter-spacing: -.022em; text-wrap: balance; }
.ws-combo__d { color: var(--text-2); text-wrap: pretty; }
.ws-combo__go { display: inline-flex; align-items: center; gap: .45rem; margin-top: .75rem; font-weight: 600; color: var(--text); }
.ws-combo__go svg { width: .9rem; height: .9rem; transition: transform var(--t-mid) var(--ease), color var(--t-mid); }
@media (hover: hover) and (pointer: fine) {
  .ws-combo__card:hover { background: var(--surface-3); box-shadow: var(--ring-2), var(--shadow-2); transform: translateY(-2px); }
  .ws-combo__card:hover .ws-combo__go svg { transform: translateX(3px); color: var(--red-text); }
}
.ws-combo__card:focus-visible { outline: 2px solid var(--text); outline-offset: 3px; border-radius: var(--r-lg); }
@media (max-width: 899px) { .ws-combo__list { grid-template-columns: 1fr; } }

/* ---------------- 9 · Fragen ---------------- */
.ws-faq__grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(2rem, 1rem + 4vw, 6rem); align-items: start; }
.ws-faq__head { position: sticky; top: 7rem; margin-bottom: 0; }
.ws-faq__list { border-bottom: 1px solid var(--line-2); }
.ws-faq__item { border-top: 1px solid var(--line-2); }
.ws-faq__item summary { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; padding-block: 1.4rem; cursor: pointer; list-style: none; font-size: 1.15rem; font-weight: 600; line-height: 1.35; letter-spacing: -.012em; color: var(--text); }
.ws-faq__item summary::-webkit-details-marker { display: none; }
.ws-faq__item summary i { position: relative; flex: none; width: 2.25rem; height: 2.25rem; border-radius: var(--r-sm); background: var(--surface-2); box-shadow: var(--ring); transition: background var(--t-fast); }
.ws-faq__item summary i::before, .ws-faq__item summary i::after { content: ""; position: absolute; left: 50%; top: 50%; width: .8rem; height: 1.5px; background: currentColor; transform: translate(-50%, -50%); transition: transform var(--t-mid) var(--ease); }
.ws-faq__item summary i::after { transform: translate(-50%, -50%) rotate(90deg); }
.ws-faq__item[open] summary i::after { transform: translate(-50%, -50%) rotate(0deg); }
.ws-faq__item summary:hover i { background: var(--surface-3); }
.ws-faq__item summary:focus-visible { outline: 2px solid var(--text); outline-offset: 4px; border-radius: 4px; }
.ws-faq__a { display: grid; gap: .9rem; padding: 0 3.75rem 1.6rem 0; color: var(--text-2); }
.ws-faq__a p { max-width: 38em; text-wrap: pretty; }
@media (max-width: 899px) {
  .ws-faq__grid { grid-template-columns: 1fr; gap: 0; }
  .ws-faq__head { position: static; margin-bottom: var(--head-gap); }
  .ws-faq__a { padding-right: 0; }
  .ws-faq__item summary { font-size: 1.05rem; }
}

/* ---------------- 10 · Einstieg ---------------- */
.ws-start__grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); gap: clamp(2rem, 1rem + 4vw, 6rem); align-items: center; }
.ws-start__txt { display: grid; gap: 1.25rem; justify-items: start; }
.ws-start__acts { margin-top: .75rem; }
.ws-start__who { display: grid; grid-template-columns: 5.5rem minmax(0, 1fr); gap: 1.25rem; align-items: center; margin: 0; padding: 1.25rem; }
.ws-start__who img { width: 5.5rem; height: 5.5rem; border-radius: var(--r-md); object-fit: cover; }
.ws-start__who figcaption { display: grid; gap: .2rem; justify-items: start; }
.ws-start__who b { font-size: 1.1rem; font-weight: 650; }
.ws-start__who span { color: var(--text-2); font-size: .95rem; }
.ws-start__who .tlink { margin-top: .4rem; font-size: .95rem; }
@media (max-width: 899px) { .ws-start__grid { grid-template-columns: 1fr; } }
@media (max-width: 599px) { .ws-start__acts { width: 100%; } .ws-start__acts .btn { width: 100%; justify-content: space-between; } }
@media (max-width: 359px) { .ws-start__who { grid-template-columns: 4rem minmax(0, 1fr); } .ws-start__who img { width: 4rem; height: 4rem; } }

/* ---------------- Reduced Motion ---------------- */
@media (prefers-reduced-motion: reduce) {
  .ws-how__scr, .ws-mark, .ws-mark::before, .ws-step, .ws-step__n, .ws-step__n::before, .ws-step__n b, .ws-how__bar i, .ws-combo__card, .ws-faq__item summary i::after { transition: none; }
}
/* Foto der Bewerterin (Marcel 30.10) */
.ws-quote__av--bild { overflow: hidden; padding: 0; }
.ws-quote__av--bild img { display: block; width: 100%; height: 100%; object-fit: cover; }