/* Fallstudie Spitch als eigene Seite (26.10.2026). Schwarz wie eine Keynote, Spitch-Farben
   nur als Licht: Watermelon #fd4b55 und das Gold des Jubiläumslogos.
   Grundzustand ohne JavaScript oder mit «weniger Bewegung»: alles steht ruhig untereinander.
   Bühnen, Querband und Wortlicht schaltet spitch-fall.js über .sp-an ein. */

.sp {
  --sp-text: #f5f5f7;
  --sp-grau: #86868b;
  --sp-dunkel: #1d1d1f;
  --sp-linie: rgba(255, 255, 255, .12);
  --sp-gold: linear-gradient(100deg, #a15a07 0%, #e3b758 22%, #ffde7a 38%, #ffeec2 50%, #ffde7a 62%, #cea346 100%);
  --sp-pad: var(--container-pad, 2.5rem);
  background: #000;
  color: var(--sp-text);
  font-family: var(--font-body);
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
}
.sp *, .sp *::before, .sp *::after { box-sizing: border-box; }
.sp ::selection { background: var(--sp-rot); color: #fff; }
.sp-wrap { max-width: var(--container-max, 84rem); margin: 0 auto; padding: 0 var(--sp-pad); }
.sp a { color: inherit; }
.sp a:focus-visible, .sp button:focus-visible, .sp [tabindex]:focus-visible { outline: none; box-shadow: inset 0 0 0 2px var(--sp-rot); border-radius: 8px; }
.sp h1, .sp h2, .sp h3 { font-family: var(--font-display); color: var(--sp-text); margin: 0; letter-spacing: -.035em; }
.sp h2 { font-size: clamp(2.3rem, 6.2vw, 5.6rem); line-height: 1.02; font-weight: 700; max-width: 16ch; }
.sp h2 em, .sp h1 em, .sp-akt__gross em { font-style: normal; color: var(--sp-grau); }
.sp p { margin: 0; }
.sp-nur-leser { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.sp-kapitel { display: inline-block; margin-bottom: 1.4rem; font: 600 .78rem/1 var(--font-display); letter-spacing: .14em; text-transform: uppercase; color: var(--sp-rot); }
.sp-quelle { margin-top: 1.6rem !important; max-width: 62rem; font-size: .82rem; line-height: 1.5; color: #6e6e73; }

/* Knöpfe */
.sp-knopf { display: inline-flex; align-items: center; gap: .55rem; min-height: 48px; padding: .85rem 1.5rem; border-radius: 999px;
  font: 600 1rem/1 var(--font-display); text-decoration: none; transition: transform .25s ease, background .25s ease, color .25s ease; }
.sp-knopf svg { width: 16px; height: 16px; }
.sp-knopf--rot { background: #e0303b; color: #fff !important; } /* Watermelon eine Stufe tiefer: Weiss darauf 4,5:1 (27.10.2026) */
.sp-knopf--rot:hover { background: #d42a35; transform: translateY(-1px); }
.sp-knopf--rand { color: var(--sp-text); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .28); }
.sp-knopf--rand:hover { box-shadow: inset 0 0 0 1px #fff; }

/* 1 Hero ---------------------------------------------------------------- */
.sp-held { position: relative; min-height: 100svh; display: flex; flex-direction: column; justify-content: center; padding: 7rem 0 9rem; overflow: hidden; isolation: isolate; }
.sp-held::before { content: ""; position: absolute; inset: -20% -10% auto; height: 80%; z-index: -2;
  background: radial-gradient(60% 55% at 50% 40%, rgba(25, 23, 65, .95), rgba(0, 0, 0, 0) 70%); }
.sp-welle { position: absolute; left: 0; right: 0; bottom: 0; width: 100%; height: 46%; z-index: -1; opacity: .9; }
.sp-held__drei { position: absolute; left: 50%; width: 0; height: 0; border-left: 22px solid transparent; border-right: 22px solid transparent; z-index: -1; opacity: .9; }
.sp-held__drei--oben { top: 4.5rem; transform: translateX(-50%); border-top: 38px solid var(--sp-text); }
.sp-held__drei--unten { bottom: 2.5rem; transform: translateX(-50%); border-bottom: 38px solid var(--sp-text); }
.sp-held__innen { position: relative; width: 100%; text-align: center; }
.sp-pfad { display: flex; justify-content: center; gap: .5rem; font-size: .85rem; color: var(--sp-grau); margin-bottom: 2.2rem; }
.sp-pfad a { text-decoration: none; }
.sp-pfad a:hover { color: var(--sp-text); }
.sp-gruss { position: relative; display: grid; place-items: center; margin: 0 auto 1.6rem !important; height: clamp(4.6rem, 15vw, 13rem); }
.sp-gruss__wort { grid-area: 1 / 1; font: 700 clamp(4rem, 14.5vw, 12.5rem)/1 var(--font-display); letter-spacing: -.055em;
  background: linear-gradient(180deg, #fff 30%, #6e6e73 120%); -webkit-background-clip: text; background-clip: text; color: transparent;
  opacity: 0; transform: translateY(.18em) scale(.98); filter: blur(10px); transition: opacity .9s ease, transform 1.1s cubic-bezier(.2, .7, .1, 1), filter .9s ease; }
.sp-gruss__wort.is-an { opacity: 1; transform: none; filter: none; }
.sp-held__titel { font-size: clamp(1.55rem, 3.4vw, 3rem); line-height: 1.12; font-weight: 600; max-width: 30ch; margin: 0 auto !important; }
.sp-held__titel em { display: block; }
.sp-held__lead { max-width: 44rem; margin: 1.6rem auto 0 !important; font-size: clamp(1.02rem, 1.4vw, 1.2rem); line-height: 1.55; color: var(--sp-grau); }
.sp-held__logo { display: inline-block; height: 1em; width: auto; vertical-align: -.12em; filter: brightness(0) invert(1); margin-right: .1rem; }
.sp-held__aktionen { display: flex; flex-wrap: wrap; justify-content: center; gap: .8rem; margin-top: 2.2rem; }
.sp-zahlen { list-style: none; margin: 4.2rem auto 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.5rem; max-width: 64rem; text-align: left; }
.sp-zahlen li { min-width: 0; padding-top: 1.1rem; border-top: 1px solid var(--sp-linie); }
.sp-zahlen b { display: block; font: 700 clamp(2.4rem, 4.6vw, 3.8rem)/1 var(--font-display); letter-spacing: -.04em; }
.sp-zahlen span { display: block; margin-top: .5rem; font-size: .92rem; line-height: 1.4; color: var(--sp-grau); }
.sp-weiter { position: absolute; left: 50%; bottom: 1.4rem; transform: translateX(-50%); display: inline-flex; flex-direction: column; align-items: center; gap: .3rem;
  font-size: .78rem; color: var(--sp-grau); text-decoration: none; letter-spacing: .08em; text-transform: uppercase; }
.sp-weiter svg { width: 18px; height: 18px; animation: sp-schweben 2.4s ease-in-out infinite; }
@keyframes sp-schweben { 50% { transform: translateY(5px); } }

/* 2 Wie es anfing: Wort für Wort ---------------------------------------- */
.sp-anfang { padding: clamp(7rem, 16vw, 14rem) 0; }
.sp-datum { font: 600 .9rem/1 var(--font-display); color: var(--sp-rot); letter-spacing: .06em; margin-bottom: 1.8rem !important; }
.sp-woerter { font: 600 clamp(1.8rem, 4.6vw, 4.1rem)/1.12 var(--font-display); letter-spacing: -.03em; max-width: 24ch; }
.sp-an .sp-woerter .sp-w { color: #3a3a3c; transition: color .25s linear; }
.sp-an .sp-woerter .sp-w.is-hell { color: var(--sp-text); }

/* 3 Keynote: das Jubiläumslogo ------------------------------------------ */
.sp-keynote { position: relative; padding: 6rem 0; }
.sp-keynote__klebt { display: grid; gap: 5rem; justify-items: center; text-align: center; padding: 0 var(--sp-pad); }
.sp-akt { width: 100%; max-width: 72rem; }
.sp-akt__datum { font: 600 clamp(1rem, 1.6vw, 1.35rem)/1 var(--font-display); color: var(--sp-grau); margin-bottom: 1.2rem !important; }
.sp-akt__gross { font: 700 clamp(2.8rem, 9vw, 8.5rem)/.98 var(--font-display); letter-spacing: -.05em; color: var(--sp-text); max-width: none; }
.sp-akt--2 .sp-akt__gross em { background: var(--sp-gold); -webkit-background-clip: text; background-clip: text; color: transparent; }
.sp-entwuerfe { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(.6rem, 1.4vw, 1.2rem); margin: 3rem auto 0; max-width: 60rem; }
.sp-entwuerfe span { aspect-ratio: 533 / 301; border-radius: clamp(10px, 1.4vw, 18px); background: #fff url(/referenzen/spitch/marke-entwuerfe-1600.webp) no-repeat;
  background-size: 303% 206%; background-position: var(--x) var(--y); box-shadow: 0 30px 60px -30px rgba(0, 0, 0, .8); }
.sp-logo10__buehne { position: relative; width: min(100%, 64rem); margin: 0 auto; }
.sp-logo10 { display: block; width: 100%; height: auto; overflow: visible; }
.sp-logo10__licht { display: none; }
.sp-akt__zitat { margin: 0; }
.sp-akt__zitat p { font: 600 clamp(2rem, 5vw, 4.4rem)/1.05 var(--font-display); letter-spacing: -.04em; }
.sp-akt__zitat cite { display: block; margin-top: 1.1rem; font-style: normal; color: var(--sp-grau); font-size: 1rem; }
.sp-akt__fakt { max-width: 40rem; margin: 2rem auto 0 !important; font-size: 1.12rem; line-height: 1.55; color: var(--sp-grau); }

/* Bühne an: klebt, Akte liegen übereinander, Werte kommen aus spitch-fall.js */
.sp-an .sp-keynote { height: 460vh; padding: 0; }
.sp-an .sp-keynote__klebt { position: sticky; top: 0; height: 100vh; height: 100svh; display: block; padding: 0; overflow: hidden; }
.sp-an .sp-akt { position: absolute; left: 50%; top: 50%; width: min(92vw, 72rem); transform: translate(-50%, -50%); pointer-events: none; }
.sp-an .sp-akt--1 { opacity: var(--a1, 0); transform: translate(-50%, calc(-50% + (1 - var(--a1, 0)) * 3rem)) scale(calc(.96 + var(--a1, 0) * .04)); }
.sp-an .sp-akt--2 { opacity: var(--a2, 0); }
.sp-an .sp-akt--2 .sp-akt__gross { transform: translateY(calc((1 - var(--a2, 0)) * 2rem)); }
.sp-an .sp-entwuerfe span { transform: translate(calc(var(--zx, 0) * var(--e, 0) * 1%), calc(var(--zy, 0) * var(--e, 0) * 1%)) scale(calc(1 - var(--e, 0) * .55)); opacity: calc(1 - var(--e, 0)); }
.sp-an .sp-entwuerfe span:nth-child(1) { --zx: 100; --zy: 60; } .sp-an .sp-entwuerfe span:nth-child(2) { --zx: 0; --zy: 60; } .sp-an .sp-entwuerfe span:nth-child(3) { --zx: -100; --zy: 60; }
.sp-an .sp-entwuerfe span:nth-child(4) { --zx: 100; --zy: -60; } .sp-an .sp-entwuerfe span:nth-child(5) { --zx: 0; --zy: -60; } .sp-an .sp-entwuerfe span:nth-child(6) { --zx: -100; --zy: -60; }
.sp-an .sp-akt--3 { opacity: var(--a3, 0); }
.sp-an .sp-l-drei-oben { opacity: var(--l1, 0); transform: translateY(calc((1 - var(--l1, 0)) * -160px)); }
.sp-an .sp-l-drei-unten { opacity: var(--l1, 0); transform: translateY(calc((1 - var(--l1, 0)) * 160px)); }
.sp-an .sp-l-wort { opacity: var(--l2, 0); }
.sp-an .sp-l-eins { opacity: var(--l3, 0); transform: translateY(calc((1 - var(--l3, 0)) * 90px)); }
.sp-an .sp-l-null { clip-path: inset(0 0 0 calc((1 - var(--l4, 0)) * 100%)); }
.sp-an .sp-l-years { opacity: var(--l5, 0); transform: translateY(calc((1 - var(--l5, 0)) * 30px)); }
.sp-an .sp-logo10 { filter: drop-shadow(0 0 calc(var(--l6, 0) * 60px) rgba(255, 210, 110, calc(var(--l6, 0) * .35))); }
.sp-an .sp-logo10__licht { display: block; position: absolute; inset: -10% -5%; pointer-events: none; mix-blend-mode: overlay;
  background: linear-gradient(105deg, transparent 40%, rgba(255, 255, 255, .95) 50%, transparent 60%) no-repeat;
  background-size: 60% 100%; background-position: calc(-60% + var(--l6, 0) * 220%) 0; opacity: calc(var(--l6, 0) * (1 - var(--l6, 0)) * 4); }
.sp-an .sp-akt--4 { opacity: var(--a4, 0); top: auto; bottom: 7vh; transform: translate(-50%, calc((1 - var(--a4, 0)) * 2rem)); }
.sp-an .sp-akt--4 .sp-akt__zitat p { font-size: clamp(1.6rem, 3.6vw, 3rem); }
.sp-an .sp-akt--3 .sp-logo10__buehne { transform: translateY(calc(var(--a4, 0) * -14vh)) scale(calc(1 - var(--a4, 0) * .22)); }

/* 4 Brand Guideline: das Querband --------------------------------------- */
.sp-marke { padding: clamp(6rem, 12vw, 11rem) 0 clamp(5rem, 10vw, 9rem); }
.sp-marke__kopf p { max-width: 42rem; margin-top: 1.6rem !important; font-size: clamp(1.05rem, 1.5vw, 1.3rem); line-height: 1.55; color: var(--sp-grau); }
.sp-quer { margin-top: 3.5rem; }
.sp-quer__band { list-style: none; margin: 0; padding: 0 var(--sp-pad) 1.2rem; display: flex; gap: clamp(1rem, 2vw, 1.75rem); overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: thin; scrollbar-color: #3a3a3c transparent; }
.sp-tafel { flex: 0 0 auto; scroll-snap-align: center; margin: 0; }
.sp-tafel img { display: block; height: auto; border-radius: clamp(12px, 1.4vw, 20px); background: var(--sp-dunkel); box-shadow: 0 40px 80px -40px rgba(0, 0, 0, .9), 0 0 0 1px var(--sp-linie); }
.sp-tafel--breit img { width: min(86vw, 62vw + 10rem, 60rem); }
.sp-tafel--hoch img { width: min(80vw, 34rem); }
.sp-tafel span { display: block; margin-top: .9rem; font-size: .92rem; color: var(--sp-grau); }
.sp-an .sp-quer.is-quer { position: relative; }
.sp-an .sp-quer.is-quer .sp-quer__klebt { position: sticky; top: 0; height: 100vh; height: 100svh; display: flex; align-items: center; overflow: hidden; }
.sp-an .sp-quer.is-quer .sp-quer__band { overflow: visible; scroll-snap-type: none; transform: translateX(calc(var(--q, 0) * -1px)); will-change: transform; padding-bottom: 0; }
.sp-marke__fuss { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 3rem; margin-top: 4rem; align-items: start; }
.sp-farben { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: .6rem; }
.sp-farben li { min-width: 0; }
.sp-farben li::before { content: ""; display: block; aspect-ratio: 1 / 1.25; border-radius: 14px; background: var(--f); box-shadow: inset 0 0 0 1px var(--sp-linie); margin-bottom: .7rem; }
.sp-farben b { display: block; font: 600 .9rem/1.2 var(--font-display); }
.sp-farben code { font: .78rem/1.4 var(--font-mono); color: var(--sp-grau); }
.sp-marke__liste h3 { font-size: 1.3rem; margin-bottom: .8rem; }
.sp-marke__liste p { color: var(--sp-grau); line-height: 1.6; }

/* 5 Sieben Märkte ------------------------------------------------------- */
.sp-maerkte { padding: clamp(6rem, 12vw, 11rem) 0; border-top: 1px solid var(--sp-linie); }
.sp-laender { list-style: none; margin: 3rem 0 0; padding: 0; counter-reset: land; }
.sp-laender li { counter-increment: land; display: flex; align-items: baseline; gap: 1.2rem; padding: .2rem 0; border-bottom: 1px solid var(--sp-linie); }
.sp-laender li::before { content: counter(land, decimal-leading-zero); font: 600 .85rem/1 var(--font-display); color: var(--sp-rot); min-width: 2ch; }
.sp-laender span { font: 700 clamp(2.4rem, 8.4vw, 7.5rem)/1.04 var(--font-display); letter-spacing: -.05em; color: var(--sp-text); }
.sp-an .sp-laender.sp-io span { color: #2c2c2e; display: inline-block; transform: translateX(-1.2rem); transition: color 1s ease, transform 1.2s cubic-bezier(.2, .7, .1, 1); }
.sp-an .sp-laender.sp-io li.is-da span { color: var(--sp-text); transform: none; }
.sp-maerkte__raster { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 3rem; margin-top: 3.5rem; align-items: start; }
.sp-maerkte__raster > p { font-size: clamp(1.05rem, 1.5vw, 1.3rem); line-height: 1.55; color: var(--sp-grau); }
.sp-begriffe { margin: 0; display: grid; gap: .1rem; }
.sp-begriffe div { display: flex; justify-content: space-between; gap: 1rem; padding: .85rem 0; border-bottom: 1px solid var(--sp-linie); }
.sp-begriffe dt { font: 500 1.05rem/1.3 var(--font-mono); color: var(--sp-text); }
.sp-begriffe dd { margin: 0; font: 700 1.25rem/1.3 var(--font-display); color: var(--sp-rot); font-variant-numeric: tabular-nums; }

/* 6 Website -------------------------------------------------------------- */
.sp-web { padding: clamp(6rem, 12vw, 11rem) 0 0; border-top: 1px solid var(--sp-linie); }
.sp-sechzehn { display: flex; align-items: center; gap: clamp(1rem, 3vw, 2.5rem); margin-bottom: clamp(4rem, 9vw, 8rem); }
.sp-sechzehn b { font: 800 clamp(7rem, 26vw, 22rem)/.8 var(--font-display); letter-spacing: -.07em; background: linear-gradient(180deg, #fff, #48484a);
  -webkit-background-clip: text; background-clip: text; color: transparent; font-variant-numeric: tabular-nums; }
.sp-sechzehn p { max-width: 20ch; font: 600 clamp(1.3rem, 2.6vw, 2.2rem)/1.15 var(--font-display); letter-spacing: -.02em; }
.sp-web__lead { max-width: 46rem; margin-top: 1.6rem !important; font-size: clamp(1.05rem, 1.5vw, 1.3rem); line-height: 1.55; color: var(--sp-grau); }
.sp-laufband { margin: 3.5rem 0; display: grid; gap: .8rem; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); }
.sp-laufband__zeile { display: flex; gap: .8rem; width: max-content; }
.sp-laufband__zeile span { flex: 0 0 auto; padding: .7rem 1.2rem; border-radius: 999px; background: var(--sp-dunkel); font: 600 clamp(.95rem, 1.4vw, 1.15rem)/1 var(--font-display); color: var(--sp-text); white-space: nowrap; }
.sp-laufband__zeile--rueck span { background: transparent; box-shadow: inset 0 0 0 1px var(--sp-linie); color: var(--sp-grau); }
.sp-an .sp-laufband__zeile { animation: sp-lauf 48s linear infinite; }
.sp-an .sp-laufband__zeile--rueck { animation-direction: reverse; animation-duration: 40s; }
@keyframes sp-lauf { to { transform: translateX(-50%); } }
.sp-bild { margin: 0; }
.sp-bild img { display: block; width: 100%; height: auto; border-radius: clamp(14px, 1.6vw, 22px); }
.sp-bild--hell img { background: #fff; padding: clamp(.6rem, 1.5vw, 1.4rem); }
.sp-bild figcaption, .sp-ganz figcaption { margin-top: .9rem; font-size: .92rem; color: var(--sp-grau); }
.sp-geraete { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 15rem); gap: clamp(1rem, 3vw, 2.5rem); align-items: center; margin-top: clamp(4rem, 8vw, 7rem); }
.sp-browser, .sp-telefon { position: relative; margin: 0; min-width: 0; }
.sp-browser { border-radius: 16px; overflow: hidden; background: var(--sp-dunkel); box-shadow: 0 60px 120px -50px rgba(253, 75, 85, .35), 0 0 0 1px var(--sp-linie); }
.sp-browser__leiste { display: flex; align-items: center; gap: .4rem; padding: .7rem .9rem; background: #111; }
.sp-browser__leiste i { width: 11px; height: 11px; border-radius: 50%; background: #3a3a3c; }
.sp-browser__leiste span { margin-left: auto; margin-right: auto; padding: .25rem 1rem; border-radius: 6px; background: #1d1d1f; font-size: .78rem; color: var(--sp-grau); }
.sp-browser video { display: block; width: 100%; height: auto; aspect-ratio: 960 / 600; background: #000; }
.sp-telefon { padding: .55rem; border-radius: 2.6rem; background: #1d1d1f; box-shadow: 0 0 0 1px #3a3a3c, 0 50px 100px -40px rgba(0, 0, 0, .9); }
.sp-telefon video { display: block; width: 100%; height: auto; aspect-ratio: 390 / 844; border-radius: 2.1rem; background: #000; }
.sp-film__knopf { position: absolute; right: .9rem; bottom: .9rem; width: 44px; height: 44px; border: 0; border-radius: 50%; background: rgba(0, 0, 0, .6); color: #fff; cursor: pointer; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.sp-film__knopf::before { content: ""; position: absolute; inset: 0; margin: auto; width: 12px; height: 14px; border-left: 4px solid #fff; border-right: 4px solid #fff; }
.sp-film__knopf.is-pause::before { width: 0; height: 0; border-left: 13px solid #fff; border-right: 0; border-top: 8px solid transparent; border-bottom: 8px solid transparent; margin-left: 17px; }
.sp-ganz { margin: clamp(5rem, 10vw, 9rem) 0 0; }
.sp-ganz img { display: block; width: 100%; height: auto; max-height: 100vh; object-fit: cover; }
.sp-ganz figcaption { padding-top: .2rem; }

/* 7 Filme ---------------------------------------------------------------- */
.sp-filme { padding: clamp(6rem, 12vw, 11rem) 0; }
.sp-filme__raster { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 3rem; align-items: start; }
.sp-filme__liste { list-style: none; margin: 0; padding: 0; }
.sp-filme__liste li { display: grid; grid-template-columns: 9rem minmax(0, 1fr); gap: 1rem; padding: 1.2rem 0; border-bottom: 1px solid var(--sp-linie); }
.sp-filme__liste b { font: 600 1rem/1.4 var(--font-display); color: var(--sp-rot); }
.sp-filme__liste span { font-size: 1.1rem; line-height: 1.5; color: var(--sp-text); }

/* 8 Zeitleiste ----------------------------------------------------------- */
.sp-zeit { padding: clamp(6rem, 12vw, 11rem) 0; border-top: 1px solid var(--sp-linie); }
.sp-zeit__liste { position: relative; list-style: none; margin: 3.5rem 0 0; padding: 0 0 0 2.2rem; }
.sp-zeit__liste::before, .sp-zeit__liste::after { content: ""; position: absolute; left: 5px; top: .4rem; bottom: .4rem; width: 2px; background: #2c2c2e; }
.sp-zeit__liste::after { background: var(--sp-rot); transform-origin: top; transform: scaleY(var(--z, 1)); }
.sp-zeit__liste li { position: relative; display: grid; grid-template-columns: 11rem minmax(0, 1fr); gap: 1rem; padding: 0 0 2rem; }
.sp-zeit__liste li::before { content: ""; position: absolute; left: calc(-2.2rem + 1px); top: .35rem; width: 10px; height: 10px; border-radius: 50%; background: #000; box-shadow: inset 0 0 0 2px var(--sp-rot); }
.sp-zeit__liste time { font: 600 1rem/1.4 var(--font-display); color: var(--sp-text); }
.sp-zeit__liste p { font-size: 1.1rem; line-height: 1.5; color: var(--sp-grau); }
.sp-an .sp-zeit__liste::after { transform: scaleY(var(--z, 0)); }

/* 9 Stimme ---------------------------------------------------------------- */
.sp-stimme { padding: clamp(6rem, 12vw, 11rem) 0; background: radial-gradient(60% 70% at 25% 50%, rgba(25, 23, 65, .9), transparent 70%); }
.sp-stimme__raster { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(2rem, 5vw, 5rem); align-items: center; }
.sp-stimme__bild { display: block; width: 100%; height: auto; border-radius: 50%; aspect-ratio: 1; object-fit: cover; filter: grayscale(.15) contrast(1.05); box-shadow: 0 0 0 1px var(--sp-linie), 0 50px 120px -40px rgba(253, 75, 85, .45); }
.sp-stimme__zitat { margin: 0; }
.sp-stimme__zitat blockquote { margin: 0; }
.sp-stimme .sp-woerter { max-width: 20ch; }
.sp-stimme figcaption { margin-top: 2rem; }
.sp-stimme figcaption b { display: block; font: 600 1.15rem/1.3 var(--font-display); }
.sp-stimme figcaption span { display: block; color: var(--sp-grau); }
.sp-stimme figcaption small { display: block; margin-top: .4rem; color: #6e6e73; font-size: .82rem; }
.sp-stimme__google { display: inline-flex; gap: .5rem; align-items: center; margin-top: 1.6rem; padding: .6rem 1rem; border-radius: 999px; box-shadow: inset 0 0 0 1px var(--sp-linie); font-size: .9rem; color: var(--sp-text) !important; text-decoration: none; }
.sp-stimme__google span { color: #ffca2b; letter-spacing: .1em; }
.sp-stimme__google:hover { box-shadow: inset 0 0 0 1px #fff; }

/* 10 Schluss --------------------------------------------------------------- */
.sp-schluss { padding: clamp(6rem, 12vw, 11rem) 0 clamp(4rem, 8vw, 6rem); text-align: center; border-top: 1px solid var(--sp-linie); }
.sp-schluss h2 { margin: 0 auto; }
.sp-schluss > .sp-wrap > p { max-width: 36rem; margin: 1.6rem auto 0 !important; font-size: 1.15rem; line-height: 1.55; color: var(--sp-grau); }
.sp-mehr { display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem 1.4rem; margin-top: 4rem; font-size: .95rem; }
.sp-mehr span { color: var(--sp-grau); width: 100%; margin-bottom: .2rem; }
.sp-mehr a { text-decoration: none; border-bottom: 1px solid #48484a; padding-bottom: 2px; }
.sp-mehr a:hover { border-color: #fff; }
.sp-schluss .sp-quelle { margin-left: auto; margin-right: auto; }

/* Auftritt beim Hereinscrollen */
.sp-an .sp-auf { opacity: 0; transform: translateY(2.2rem); transition: opacity 1s ease, transform 1.2s cubic-bezier(.2, .7, .1, 1); }
.sp-an .sp-auf.is-da { opacity: 1; transform: none; }

/* Tablet und Telefon */
@media (max-width: 900px) {
  .sp { --sp-pad: 1.25rem; }
  .sp-zahlen { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.6rem 1rem; margin-top: 3rem; }
  .sp-marke__fuss, .sp-maerkte__raster, .sp-filme__raster, .sp-stimme__raster { grid-template-columns: minmax(0, 1fr); gap: 2.2rem; }
  .sp-farben { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: .4rem; }
  .sp-farben b { font-size: .78rem; } .sp-farben code { font-size: .66rem; }
  .sp-geraete { grid-template-columns: minmax(0, 1fr) minmax(0, 8.5rem); }
  .sp-stimme__bild { max-width: 15rem; }
  .sp-zeit__liste li, .sp-filme__liste li { grid-template-columns: minmax(0, 1fr); gap: .2rem; }
  .sp-held { padding: 6rem 0 7rem; }
  .sp-held__drei--oben { top: 3.2rem; } .sp-held__drei { border-left-width: 15px; border-right-width: 15px; }
  .sp-held__drei--oben { border-top-width: 26px; } .sp-held__drei--unten { border-bottom-width: 26px; }
  .sp-an .sp-keynote { height: 400vh; }
  .sp-an .sp-akt--4 { bottom: 5vh; }
  .sp-an .sp-akt--4 .sp-akt__fakt { font-size: 1rem; }
}
@media (max-width: 480px) {
  .sp-geraete { grid-template-columns: minmax(0, 1fr); }
  .sp-telefon { width: 62%; margin: 0 auto; }
  .sp-entwuerfe { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sp-an .sp-entwuerfe span:nth-child(n) { --zx: 0; --zy: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .sp *, .sp *::before, .sp *::after { animation: none !important; transition: none !important; }
}

/* Kopfzeile auf dieser Seite dunkel, wie die Seite selbst (nur hier geladen) */
header[data-dartera-header] { background: rgba(0, 0, 0, .72); -webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px); box-shadow: 0 1px 0 rgba(255, 255, 255, .08); }
header[data-dartera-header] > div:first-child { display: none !important; }
header[data-dartera-header] .dt-navitem > a, header[data-dartera-header] .dt-navitem > button, header[data-dartera-header] nav a { color: rgba(255, 255, 255, .86) !important; }
header[data-dartera-header] .dt-navitem svg { color: rgba(255, 255, 255, .6); }

/* 3a Der Test: fünf Richtungen im Kopf der Website (26.01.2024) ----------------- */
.sp-test { padding: clamp(6rem, 12vw, 11rem) 0 clamp(3rem, 6vw, 5rem); }
.sp-test__lead { max-width: 44rem; margin-top: 1.6rem !important; font-size: clamp(1.05rem, 1.5vw, 1.3rem); line-height: 1.55; color: var(--sp-grau); }
.sp-test__buehne { margin-top: 3.5rem; }
.sp-test__liste { list-style: none; margin: 0 auto; padding: 0 var(--sp-pad); display: grid; gap: 1.6rem; max-width: 72rem; }
.sp-test__bild { position: relative; margin: 0; }
.sp-test__bild img { display: block; width: 100%; height: auto; border-radius: clamp(12px, 1.4vw, 20px); background: #fff; box-shadow: 0 50px 100px -50px rgba(0, 0, 0, .9), 0 0 0 1px var(--sp-linie); }
.sp-test__nr { position: absolute; left: clamp(.8rem, 2vw, 1.6rem); top: clamp(.6rem, 1.6vw, 1.2rem); padding: .35rem .7rem; border-radius: 999px; background: #000; color: #fff; font: 700 .9rem/1 var(--font-display); }
.sp-test__unter { display: none; }
.sp-an .sp-test__buehne { height: 340vh; }
.sp-an .sp-test__klebt { position: sticky; top: 0; height: 100vh; height: 100svh; display: flex; flex-direction: column; justify-content: center; gap: 1.6rem; }
.sp-an .sp-test__liste { display: block; position: relative; width: min(100%, 72rem); aspect-ratio: 16 / 9; }
.sp-an .sp-test__bild { position: absolute; inset: 0 var(--sp-pad); opacity: 0; transform: scale(.97); transition: opacity .55s ease, transform .8s cubic-bezier(.2, .7, .1, 1); }
.sp-an .sp-test__bild.is-an { opacity: 1; transform: none; }
.sp-an .sp-test__nr { display: none; }
.sp-an .sp-test__unter { display: block; text-align: center; font: 600 clamp(1.4rem, 3vw, 2.4rem)/1.1 var(--font-display); letter-spacing: -.03em; color: var(--sp-grau); }
.sp-an .sp-test__unter b { color: var(--sp-text); font-variant-numeric: tabular-nums; }
@media (max-width: 900px) { .sp-an .sp-test__buehne { height: 300vh; } }

/* Hero, zweite Fassung: Dreiecke rahmen den Gruss wie im Logo von Spitch, die Welle liegt dahinter */
.sp-held__drei { display: none; }
.sp-pfad { position: absolute; top: 1.6rem; left: var(--sp-pad); margin: 0; justify-content: flex-start; }
.sp-held__innen { position: static; }
.sp-gruss { margin-bottom: 2.2rem !important; padding: clamp(2.4rem, 4.5vw, 3.6rem) 0; height: auto; }
.sp-gruss::before, .sp-gruss::after { content: ""; position: absolute; left: 50%; transform: translateX(-50%); width: 0; height: 0;
  border-left: clamp(11px, 1.5vw, 20px) solid transparent; border-right: clamp(11px, 1.5vw, 20px) solid transparent; }
.sp-gruss::before { top: 0; border-top: clamp(19px, 2.6vw, 34px) solid var(--sp-text); }
.sp-gruss::after { bottom: 0; border-bottom: clamp(19px, 2.6vw, 34px) solid var(--sp-text); }
.sp-gruss__wort { min-height: 1em; }
.sp-welle { top: 8%; bottom: auto; height: 48%; opacity: .55; }
@media (max-width: 900px) { .sp-pfad { top: 1rem; } .sp-welle { top: 10%; height: 34%; } }

/* Hero, dritte Fassung: die Welle liegt im Gruss, hinter dem Wort; der Lichtstreifen weicht einem Glühen (Safari kennt die Mischung nicht) */
.sp-gruss { isolation: isolate; }
.sp-gruss .sp-welle { position: absolute; top: 18%; bottom: 18%; left: 50%; right: auto; width: 100vw; height: auto; transform: translateX(-50%); z-index: -1; opacity: .5; }
.sp-held__lead { text-wrap: pretty; }
.sp-an .sp-logo10__licht { display: none; }
.sp-an .sp-logo10 { filter: brightness(calc(1 + var(--l6, 0) * (1 - var(--l6, 0)) * 1.4)) drop-shadow(0 0 calc(var(--l6, 0) * 60px) rgba(255, 210, 110, calc(var(--l6, 0) * .35))); }
.sp-knopf { text-decoration: none !important; }
header[data-dartera-header] a[href*="start=1"] { background: var(--sp-rot, #fd4b55) !important; color: #fff !important; box-shadow: none !important; }
header[data-dartera-header] a.dt-nav-secondary { background: rgba(255, 255, 255, .1) !important; color: #fff !important; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .2) !important; }
/* Safari nimmt bei einer Leinwand top und bottom nicht als Höhe: feste Höhe */
.sp-gruss .sp-welle { top: 20%; bottom: auto; height: 60%; }
header[data-dartera-header] { background: rgba(8, 8, 10, .84); }

/* Verlaufsschrift wird nur innerhalb ihrer Box gemalt (background-clip: text). Bei enger Laufweite
   ragt der letzte Buchstabe hinaus und war abgeschnitten (die 6 der 16, gemeldet 26.10.2026).
   Polster innen, aussen wieder abgezogen: die Lage bleibt, die Glyphen haben Platz. */
.sp-sechzehn b, .sp-gruss__wort, .sp-akt--2 .sp-akt__gross em, .sp-zahlen b {
  padding: .06em .14em .1em; margin: -.06em -.14em -.1em; -webkit-box-decoration-break: clone; box-decoration-break: clone;
}
.sp-sechzehn b { padding-right: .2em; margin-right: -.1em; }

/* Kopfzeile wie bei Apple: oben durchsichtig auf dem schwarzen Hero, erst nach dem Scrollen dunkles Glas.
   Grau war die weisse Tönung (80 %) der Unschärfe-Ebene der Kopfzeile, die auf Schwarz zu Grau wird. */
header[data-dartera-header] div[style*="nav-h) + 14px"] { display: none !important; }
header[data-dartera-header] { background: transparent; -webkit-backdrop-filter: none; backdrop-filter: none; box-shadow: none; transition: background .35s ease, box-shadow .35s ease; }
html.sp-kopf-zu header[data-dartera-header] { background: rgba(0, 0, 0, .78); -webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px); box-shadow: 0 1px 0 rgba(255, 255, 255, .08); }
/* Die Kopfzeile liegt über dem Seitengrund, nicht über dem Hero: auf dieser Seite ist der Grund schwarz */
html, body { background: #000 !important; }
/* Hero zieht unter die Kopfzeile: der blaue Schein läuft hinter der Leiste weiter, keine Kante */
.sp-held { margin-top: calc(-1 * var(--nav-h, 74px)); padding-top: calc(7rem + var(--nav-h, 74px)); }
.sp-pfad { top: calc(1.6rem + var(--nav-h, 74px)); }
@media (max-width: 900px) { .sp-held { padding-top: calc(6rem + var(--nav-h, 64px)); } .sp-pfad { top: calc(1rem + var(--nav-h, 64px)); } }

/* Befunde der Gegenprobe (Grok, gemessen 320 bis 1440, 26.10.2026) */
.sp-gruss__wort { font-size: clamp(2.9rem, 14.5vw, 12.5rem); }
.sp-laender span { font-size: clamp(1.9rem, 8.4vw, 7.5rem); }
@media (max-width: 900px) {
  .sp-farben { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem .6rem; }
  .sp-farben b { font-size: .85rem; } .sp-farben code { font-size: .74rem; }
}
/* Klebende Bühnen beginnen unter der Kopfzeile, nicht dahinter */
.sp-an .sp-keynote__klebt, .sp-an .sp-quer.is-quer .sp-quer__klebt, .sp-an .sp-test__klebt {
  top: var(--nav-h, 74px); height: calc(100vh - var(--nav-h, 74px)); height: calc(100svh - var(--nav-h, 74px));
}
/* Logo richtet sich auch nach der Höhe; Abstände in svh wie die Bühne */
.sp-logo10__buehne { width: min(100%, 64rem, calc((100svh - var(--nav-h, 74px)) * 1.15)); }
.sp-an .sp-akt--4 { bottom: 5svh; }
.sp-an .sp-akt--3 .sp-logo10__buehne { transform: translateY(calc(var(--a4, 0) * -17svh)) scale(calc(1 - var(--a4, 0) * .3)); }
@media (max-width: 900px) { .sp-an .sp-akt--4 { bottom: 4svh; } }
/* Überblick ganz zeigen, nicht beschneiden */
.sp-ganz img { max-height: none; object-fit: contain; }
/* Kontrast mindestens 4,5:1 auf Schwarz */
.sp-quelle, .sp-stimme figcaption small { color: #8e8e93; }
/* Fokus auf dem roten Knopf: weisser Innenring */
.sp .sp-knopf--rot:focus-visible { box-shadow: inset 0 0 0 3px #fff; }

/* 7 Filme, zweite Fassung: echte Filme, Klick lädt YouTube (wie auf /akquire/) */
.sp-filme { border-top: 1px solid var(--sp-linie); }
.sp-filme__lead { max-width: 44rem; margin-top: 1.6rem !important; font-size: clamp(1.05rem, 1.5vw, 1.3rem); line-height: 1.55; color: var(--sp-grau); }
.sp-film { margin: 0; min-width: 0; }
.sp-film--gross { margin-top: 3.5rem; }
.sp-film__buehne { position: relative; aspect-ratio: 16 / 9; border-radius: clamp(14px, 1.6vw, 24px); overflow: hidden; background: #191741;
  box-shadow: 0 60px 140px -60px rgba(253, 75, 85, .45), 0 0 0 1px var(--sp-linie); }
.sp-film__buehne img, .sp-film__buehne iframe { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border: 0; display: block; }
.sp-film__buehne img { transition: transform 1.2s cubic-bezier(.2, .7, .1, 1), filter .6s ease; }
.sp-film__start { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: .9rem; border: 0; cursor: pointer; color: #fff;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0) 40%, rgba(0, 0, 0, .55)); }
.sp-film__play { position: relative; width: clamp(64px, 7vw, 96px); height: clamp(64px, 7vw, 96px); border-radius: 50%; background: rgba(255, 255, 255, .16);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .35); transition: transform .35s ease, background .35s ease; }
.sp-film__play::after { content: ""; position: absolute; left: 54%; top: 50%; transform: translate(-50%, -50%); border-left: 22px solid #fff; border-top: 14px solid transparent; border-bottom: 14px solid transparent; }
.sp-film__dauer { position: absolute; right: 1rem; bottom: .9rem; padding: .3rem .6rem; border-radius: 6px; background: rgba(0, 0, 0, .55); font: 600 .85rem/1 var(--font-display); }
.sp-film__start:hover .sp-film__play, .sp-film__start:focus-visible .sp-film__play { transform: scale(1.08); background: var(--sp-rot); box-shadow: none; }
.sp-film__start:hover ~ img, .sp-film__buehne:hover img { transform: scale(1.03); }
.sp .sp-film__start:focus-visible { box-shadow: inset 0 0 0 3px #fff; border-radius: inherit; }
.sp-film figcaption { display: flex; flex-wrap: wrap; gap: .3rem 1rem; align-items: baseline; margin-top: 1rem; }
.sp-film figcaption b { font: 600 1.15rem/1.3 var(--font-display); }
.sp-film figcaption span { color: var(--sp-grau); font-size: .95rem; line-height: 1.45; }
.sp-film--gross figcaption b { font-size: 1.4rem; }
.sp-filme__zwei { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(1.2rem, 3vw, 2.5rem); margin-top: clamp(2.5rem, 5vw, 4rem); }
.sp-filme__zwei .sp-film__play { width: clamp(54px, 5vw, 72px); height: clamp(54px, 5vw, 72px); }
.sp-filme__zwei .sp-film__play::after { border-left-width: 17px; border-top-width: 11px; border-bottom-width: 11px; }
.sp-filme .sp-filme__liste { margin-top: 3rem; }
.sp-film.is-laeuft .sp-film__start, .sp-film.is-laeuft img { display: none; }
@media (max-width: 700px) { .sp-filme__zwei { grid-template-columns: minmax(0, 1fr); } }

/* Gliederung (Daniel, 26.10.2026: "more clear what was website, what was seo") ---------------- */
.sp-ueber { padding: clamp(4rem, 9vw, 8rem) 0 clamp(5rem, 10vw, 9rem); }
.sp-ueber__liste { list-style: none; margin: 3rem 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; }
.sp-ueber__liste a { position: relative; display: flex; flex-direction: column; gap: .8rem; height: 100%; padding: 1.6rem 1.5rem 1.4rem; border-radius: 22px; background: #111113;
  box-shadow: inset 0 0 0 1px var(--sp-linie); text-decoration: none; transition: background .3s ease, transform .3s ease, box-shadow .3s ease; }
.sp-ueber__liste a:hover { background: #18181b; transform: translateY(-3px); box-shadow: inset 0 0 0 1px rgba(253, 75, 85, .55); }
.sp-ueber__nr { font: 600 .85rem/1 var(--font-display); color: var(--sp-rot); }
.sp-ueber__liste b { font: 700 clamp(1.7rem, 2.6vw, 2.3rem)/1 var(--font-display); letter-spacing: -.03em; }
.sp-ueber__liste span:not(.sp-ueber__nr) { color: var(--sp-grau); line-height: 1.5; font-size: .98rem; flex: 1; }
.sp-ueber__liste i { font-style: normal; font: 600 .85rem/1 var(--font-display); color: var(--sp-text); opacity: .7; }

.sp-titelkarte { padding: clamp(7rem, 16vw, 13rem) 0 clamp(1rem, 3vw, 2rem); border-top: 1px solid var(--sp-linie); scroll-margin-top: calc(var(--nav-h, 74px) + 3.5rem); }
.sp-titelkarte__nr { display: block; font: 600 1rem/1 var(--font-display); color: var(--sp-rot); margin-bottom: 1rem; }
.sp-titelkarte__wort { font: 800 clamp(4.5rem, 17vw, 15rem)/.86 var(--font-display) !important; letter-spacing: -.065em; color: var(--sp-text);
  background: linear-gradient(180deg, #fff 35%, #48484a 120%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  padding: .04em .12em .1em 0; margin-right: -.12em !important; }
.sp-titelkarte__zeile { margin-top: 1.6rem !important; max-width: 30ch; font: 600 clamp(1.3rem, 2.4vw, 2rem)/1.2 var(--font-display); letter-spacing: -.02em; color: var(--sp-grau); }
.sp-titelkarte__link { display: inline-flex; align-items: center; gap: .45rem; margin: 1.8rem 1.6rem 0 0; color: var(--sp-text) !important; text-decoration: none; font-weight: 600; border-bottom: 1px solid rgba(255, 255, 255, .3); padding-bottom: 3px; }
.sp-titelkarte__link svg { width: 15px; height: 15px; }
.sp-titelkarte__link:hover { border-color: var(--sp-rot); color: #fff !important; }
.sp-titelkarte + section { border-top: 0; padding-top: clamp(3rem, 6vw, 5rem); }
.sp-zeit { scroll-margin-top: calc(var(--nav-h, 74px) + 3.5rem); }

/* Kapitelleiste: schwebt unter der Kopfzeile, sobald der Hero vorbei ist */
.sp-leiste { position: fixed; left: 50%; top: calc(var(--nav-h, 74px) + .7rem); z-index: 40; display: flex; gap: .2rem; padding: .3rem; border-radius: 999px;
  background: rgba(22, 22, 24, .78); -webkit-backdrop-filter: saturate(180%) blur(18px); backdrop-filter: saturate(180%) blur(18px); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .1), 0 10px 30px rgba(0, 0, 0, .4);
  transform: translate(-50%, -140%); opacity: 0; pointer-events: none; transition: transform .45s cubic-bezier(.2, .7, .1, 1), opacity .3s ease; max-width: calc(100vw - 1.5rem); overflow-x: auto; scrollbar-width: none; }
.sp-leiste::-webkit-scrollbar { display: none; }
.sp-leiste.is-an { transform: translate(-50%, 0); opacity: 1; pointer-events: auto; }
.sp-leiste a { flex: 0 0 auto; display: inline-flex; align-items: center; min-height: 44px; padding: .55rem 1rem; border-radius: 999px; font: 600 .88rem/1 var(--font-display); color: var(--sp-grau) !important; text-decoration: none; transition: color .25s ease, background .25s ease; }
.sp-leiste a:hover { color: #fff !important; }
.sp-leiste a.is-hier { background: #fff; color: #000 !important; }
@media (max-width: 900px) {
  .sp-ueber__liste { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sp-leiste { top: calc(var(--nav-h, 64px) + .5rem); }
  .sp-leiste a { padding: .5rem .8rem; font-size: .82rem; }
}
@media (max-width: 520px) { .sp-ueber__liste { grid-template-columns: minmax(0, 1fr); } }

/* Weitere Fallstudien als Logokarten */
.sp-faelle { margin-top: clamp(4rem, 8vw, 6rem); text-align: left; }
.sp-faelle h3 { font-size: 1.1rem; color: var(--sp-grau); font-weight: 600; letter-spacing: 0; margin-bottom: 1.2rem; text-align: center; }
.sp-faelle ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; }
.sp-faelle li a { display: flex; flex-direction: column; gap: .9rem; height: 100%; padding: 1.4rem; border-radius: 20px; background: #111113; box-shadow: inset 0 0 0 1px var(--sp-linie); text-decoration: none; transition: transform .3s ease, box-shadow .3s ease; }
.sp-faelle li a:hover { transform: translateY(-3px); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .35); }
.sp-fall__logo { display: flex; align-items: center; height: 44px; padding: 0 .8rem; border-radius: 10px; background: #fff; align-self: flex-start; }
.sp-fall__logo img { display: block; height: 22px; width: auto; max-width: 9rem; }
.sp-fall__text { color: var(--sp-text); line-height: 1.45; flex: 1; }
.sp-fall__mehr { display: inline-flex; align-items: center; gap: .4rem; font: 600 .9rem/1 var(--font-display); color: var(--sp-grau); }
.sp-fall__mehr svg, .sp-faelle__alle svg { width: 14px; height: 14px; }
.sp-faelle li a:hover .sp-fall__mehr { color: var(--sp-rot); }
.sp-faelle__alle { display: inline-flex; align-items: center; gap: .4rem; margin-top: 1.6rem; font-weight: 600; text-decoration: none; border-bottom: 1px solid rgba(255, 255, 255, .3); padding-bottom: 3px; }
@media (max-width: 1100px) { .sp-faelle ul { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 900px) { .sp-faelle ul { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 480px) { .sp-faelle ul { grid-template-columns: minmax(0, 1fr); } }

/* Keynote: wenn das Zitat kommt, tritt das Logo zurück, kein Überdecken mehr */
.sp-an .sp-akt--3 { opacity: calc(var(--a3, 0) * (1 - var(--a4, 0) * .75)); }
.sp-an .sp-akt--3 .sp-logo10__buehne { transform: translateY(calc(var(--a4, 0) * -24svh)) scale(calc(1 - var(--a4, 0) * .5)); }
.sp-an .sp-akt--4 { top: auto; bottom: 8svh; }
/* Kapitelleiste auf dem Telefon: weiche Kanten zeigen, dass sie seitlich weitergeht (27.10.2026) */
@media (max-width: 700px) {
  .sp-leiste { -webkit-mask-image: linear-gradient(90deg, transparent, #000 1rem, #000 calc(100% - 1.6rem), transparent); mask-image: linear-gradient(90deg, transparent, #000 1rem, #000 calc(100% - 1.6rem), transparent); }
}
/* Logo-Test auf dem Telefon: nur die linke Hälfte, damit Kopf und Logo gross genug zu lesen sind (27.10.2026) */
@media (max-width: 700px) {
  .sp-an .sp-test__liste { aspect-ratio: 1 / 1; }
  .sp-an .sp-test__bild img { height: 100%; object-fit: cover; object-position: 0 50%; }
}

/* Je Kapitel eine Zeile, was es Firmen wie dieser bringt (28.10.2026, Daniel) */
.sp-titelkarte__nutzen { margin-top: 1.5rem !important; max-width: 42rem; font-size: clamp(1.02rem, 1.35vw, 1.2rem); line-height: 1.55; color: rgba(255, 255, 255, .88); text-wrap: pretty; }
.sp-titelkarte__nutzen b { display: inline-block; margin-right: .65rem; padding: .38rem .62rem .34rem; border-radius: 999px; background: var(--sp-rot); color: #fff; font: 700 .7rem/1 var(--font-display); letter-spacing: .1em; text-transform: uppercase; vertical-align: .18em; }