/* Werbeseite der Plattform.
   Gestaltungsidee: Bühne. Oben dunkel wie ein Saal vor der Vorstellung, mit
   Lichtkegeln und Bewegungsbändern, die an die Spur einer Tänzerin erinnern.
   Darunter hell und ruhig – dort wird gelesen. Warmes Korall kommt nur an
   einer Stelle vor: am Knopf, der zur Anmeldung führt (Von-Restorff-Effekt).
   Blau und Violett tragen Vertrauen und Kreativität.
   Keine Inline-Stile, keine fremden Quellen (CSP: nur 'self'). */

@font-face {
  font-family: 'Archivo';
  src: url('/assets/werbung/archivo.woff2') format('woff2');
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-display: swap;
}

/* Weicher Seitenwechsel nur am Rechner: Auf dem Handy hielt Safari die neue Seite dabei mitunter an. */
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  @view-transition { navigation: auto; }
}

:root {
  --nacht: #0b0d1a;
  --nacht-2: #141731;
  --papier: #faf8f4;
  --text: #16182b;
  --leise: #585c75;
  --linie: #e8e4dc;
  --blau: #4f6bff;
  --violett: #8b5cf6;
  --koralle: #ff6a4d;
  --gold: #ffb35c;
  --gruen: #1fbf75;
  --verlauf: linear-gradient(100deg, #6d84ff 0%, #a07cff 45%, #ff7a5c 100%);
  --radius: 22px;
  --schatten: 0 1px 2px rgba(22, 24, 43, .04), 0 8px 24px -8px rgba(22, 24, 43, .10);
  --weich: cubic-bezier(.22, 1, .36, 1);
  color-scheme: light;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: 'Archivo', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: 1.0625rem;
  line-height: 1.6;
  color: var(--text);
  background: var(--papier);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; }
h1, h2, h3 { font-stretch: 112%; letter-spacing: -.025em; line-height: 1.05; margin: 0; }
h2 { font-size: clamp(1.95rem, 4vw, 3.05rem); font-weight: 800; }
h3 { font-size: 1.2rem; font-weight: 750; letter-spacing: -.01em; line-height: 1.25; }
p { margin: 0; }
code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .9em; background: rgba(79, 107, 255, .08); padding: .1em .35em; border-radius: 6px; }
:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; border-radius: 6px; }

.sprung { position: absolute; left: 1rem; top: -4rem; z-index: 100; background: #fff; color: var(--nacht); padding: .6rem 1rem; border-radius: 10px; }
.sprung:focus { top: 1rem; }

.rahmen { width: min(1180px, 100% - 2.5rem); margin-inline: auto; }
.rahmen--schmal { width: min(780px, 100% - 2.5rem); }
.leise { color: var(--leise); font-weight: 650; }
.verlauf { background: var(--verlauf); -webkit-background-clip: text; background-clip: text; color: transparent; }
.ueber {
  display: inline-flex; align-items: center; gap: .6rem;
  font-size: .8rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  color: var(--violett); margin-bottom: 1rem;
}
.ueber::before { content: ''; width: 1.6rem; height: 2px; background: var(--verlauf); border-radius: 2px; }

/* ---------------- Knöpfe ---------------- */

.knopf {
  --x: 0px; --y: 0px;
  position: relative; isolation: isolate; overflow: hidden;
  display: inline-flex; align-items: center; gap: .6rem;
  padding: .95rem 1.6rem; border-radius: 999px;
  font: inherit; font-weight: 700; font-size: 1.02rem; text-decoration: none; white-space: nowrap;
  cursor: pointer; border: 0;
  transform: translate(var(--x), var(--y));
  transition: transform .35s var(--weich), box-shadow .35s var(--weich), background-color .25s;
}
.knopf svg { width: 1.2rem; height: 1.2rem; transition: transform .35s var(--weich); }
@media (hover: hover) { .knopf:hover svg { transform: translateX(4px); } }
.knopf--haupt {
  color: var(--nacht);
  background: linear-gradient(135deg, #ff7f5f 0%, #ff6a4d 45%, #ff8b4d 100%);
  box-shadow: 0 10px 30px -8px rgba(255, 106, 77, .6), inset 0 1px 0 rgba(255, 255, 255, .35);
}
.knopf--haupt::after {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(110deg, transparent 30%, rgba(255, 255, 255, .55) 50%, transparent 70%);
  transform: translateX(-120%);
}
.knopf--haupt:hover { box-shadow: 0 16px 40px -10px rgba(255, 106, 77, .75), inset 0 1px 0 rgba(255, 255, 255, .35); }
@media (hover: hover) { .knopf--haupt:hover::after { transition: transform .8s var(--weich); transform: translateX(120%); } }
.knopf--leise { color: #fff; background: rgba(255, 255, 255, .06); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .22); }
.knopf--leise:hover { background: rgba(255, 255, 255, .12); }
.knopf--glas { color: #fff; background: rgba(255, 255, 255, .1); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .2); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.knopf--glas:hover { background: rgba(255, 255, 255, .2); }
.knopf--klein { padding: .55rem 1.1rem; font-size: .92rem; }

/* ---------------- Kopf ---------------- */

.kopf {
  position: fixed; inset: 0 0 auto; z-index: 50;
  display: flex; align-items: center; gap: 2rem;
  padding: 1rem max(1.25rem, calc((100% - 1180px) / 2));
  color: #fff;
  transition: background-color .4s, padding .4s var(--weich), box-shadow .4s;
}
.kopf.ist-gerollt {
  background: rgba(11, 13, 26, .72);
  backdrop-filter: saturate(160%) blur(16px);
  -webkit-backdrop-filter: saturate(160%) blur(16px);
  padding-block: .6rem;
  box-shadow: 0 1px 0 rgba(255, 255, 255, .08);
}
.kopf__marke { display: inline-flex; align-items: center; gap: .6rem; font-weight: 800; font-stretch: 110%; font-size: 1.15rem; letter-spacing: -.02em; text-decoration: none; view-transition-name: marke; }
.zeichen { width: 2rem; height: 2rem; }
.kopf__nav { display: flex; gap: 1.75rem; margin-left: auto; font-size: .95rem; }
.kopf__nav a { text-decoration: none; opacity: .78; position: relative; padding-block: .3rem; transition: opacity .2s; }
.kopf__nav a::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--verlauf); transform: scaleX(0); transform-origin: left; transition: transform .35s var(--weich); border-radius: 2px; }
.kopf__nav a:hover { opacity: 1; }
@media (hover: hover) { .kopf__nav a:hover::after { transform: scaleX(1); } }

/* ---------------- Bühne ---------------- */

.buehne {
  position: relative; isolation: isolate; overflow: hidden;
  min-height: 100vh; min-height: 100svh;
  display: flex; flex-direction: column; justify-content: center;
  padding: 7.5rem 0 5rem;
  color: #fff;
  background: radial-gradient(120% 90% at 50% 0%, #171a3a 0%, var(--nacht) 60%);
}
.buehne::after { /* weicher Übergang ins Laufband */
  content: ''; position: absolute; inset: auto 0 0; height: 140px; z-index: -1;
  background: linear-gradient(to bottom, transparent, var(--nacht));
}
.buehne__licht, .buehne__licht::before, .buehne__licht::after {
  position: absolute; z-index: -2; border-radius: 50%; filter: blur(80px); opacity: .55;
}
.buehne__licht { width: 46vw; height: 46vw; left: 48%; top: -18%; background: radial-gradient(circle, rgba(79, 107, 255, .75), transparent 65%); animation: treiben 18s ease-in-out infinite alternate; }
.buehne__licht::before { content: ''; width: 34vw; height: 34vw; left: 55%; top: 60%; background: radial-gradient(circle, rgba(255, 106, 77, .55), transparent 65%); animation: treiben 22s ease-in-out -6s infinite alternate-reverse; }
.buehne__licht::after { content: ''; width: 30vw; height: 30vw; left: -60%; top: 70%; background: radial-gradient(circle, rgba(139, 92, 246, .6), transparent 65%); animation: treiben 26s ease-in-out -3s infinite alternate; }
@keyframes treiben { to { transform: translate(-8vw, 6vh) scale(1.12); } }

.baender { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -1; opacity: .9;
  /* Links, wo gelesen wird, treten die Bänder zurück. */
  -webkit-mask-image: linear-gradient(90deg, rgba(0,0,0,.18) 0%, rgba(0,0,0,.25) 38%, #000 62%); mask-image: linear-gradient(90deg, rgba(0,0,0,.18) 0%, rgba(0,0,0,.25) 38%, #000 62%); }
.band { fill: none; stroke-linecap: round; stroke-dasharray: 1 1; stroke-dashoffset: 1; animation: zeichnen 2.6s var(--weich) .3s forwards; }
.band--1 { stroke: url(#b1); stroke-width: 2.4; opacity: .75; }
.band--2 { stroke: url(#b2); stroke-width: 1.6; opacity: .6; animation-delay: .6s; animation-duration: 2.8s; }
.band--3 { stroke: url(#b1); stroke-width: 1; opacity: .4; animation-delay: .9s; animation-duration: 3s; }
/* Ein Lichtpunkt wandert die Bänder entlang – wie eine Bewegung, die weiterläuft. */
.funke { fill: none; stroke: #fff; stroke-linecap: round; stroke-dasharray: .07 .93; stroke-dashoffset: 0; opacity: 0; filter: drop-shadow(0 0 6px rgba(255, 255, 255, .9)); animation: funkeln 7s linear 2.4s infinite, an .8s ease 2.4s forwards; }
.funke--1 { stroke-width: 2.4; }
.funke--2 { stroke-width: 1.6; animation-duration: 9s, .8s; animation-delay: 3s, 3s; }
.funke--3 { stroke-width: 1; animation-duration: 11s, .8s; animation-delay: 3.4s, 3.4s; }
@keyframes zeichnen { to { stroke-dashoffset: 0; } }
@keyframes funkeln { to { stroke-dashoffset: -1; } }
@keyframes an { to { opacity: .85; } }

.buehne__inhalt {
  width: min(1180px, 100% - 2.5rem); margin-inline: auto;
  display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr); gap: clamp(2rem, 5vw, 4.5rem); align-items: center;
}
.kicker {
  display: inline-flex; align-items: center; gap: .6rem;
  padding: .4rem .95rem .4rem .7rem; border-radius: 999px;
  font-size: .86rem; font-weight: 600; color: rgba(255, 255, 255, .86);
  background: rgba(255, 255, 255, .06); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14);
  margin-bottom: 1.6rem;
}
/* Besuch über einen Empfehlungslink */
.empfohlen {
  display: flex; align-items: center; gap: .6rem; width: fit-content; max-width: 100%;
  padding: .55rem 1rem .55rem .75rem; margin: 0 0 1rem; border-radius: 14px;
  font-size: .92rem; line-height: 1.4; color: #fff;
  background: linear-gradient(135deg, rgba(109, 132, 255, .28), rgba(255, 106, 77, .24));
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .22);
}
.empfohlen[hidden] { display: none; }
.empfohlen svg { width: 1.2rem; height: 1.2rem; flex: none; color: var(--koralle); }
.empfohlen b { font-weight: 750; }
.kicker__punkt { width: .5rem; height: .5rem; border-radius: 50%; background: var(--gruen); box-shadow: 0 0 0 0 rgba(31, 191, 117, .7); animation: puls 2.4s infinite; }
@keyframes puls { 70% { box-shadow: 0 0 0 10px rgba(31, 191, 117, 0); } 100% { box-shadow: 0 0 0 0 rgba(31, 191, 117, 0); } }

.buehne h1 { font-size: clamp(2.5rem, 5.5vw, 5.1rem); font-weight: 850; line-height: .96; letter-spacing: -.035em; font-stretch: 118%; }
.buehne h1 .zeile { display: block; white-space: nowrap; }
.wechsel { display: inline-block; position: relative; vertical-align: bottom; transition: width .5s var(--weich); white-space: nowrap; }
.wechsel__wort { display: inline-block; background: var(--verlauf); -webkit-background-clip: text; background-clip: text; color: transparent; padding-bottom: .08em; }
.wechsel__wort.ist-weg { animation: wortRaus .45s var(--weich) forwards; }
.wechsel__wort.ist-neu { animation: wortRein .6s var(--weich) both; }
@keyframes wortRaus { to { opacity: 0; transform: translateY(-.45em); filter: blur(6px); } }
@keyframes wortRein { from { opacity: 0; transform: translateY(.5em); filter: blur(6px); } }

.buehne__unter { margin-top: 1.6rem; max-width: 34rem; font-size: clamp(1.06rem, 1.5vw, 1.22rem); line-height: 1.6; color: rgba(255, 255, 255, .74); }
.buehne__unter strong { color: #fff; }
.buehne__knoepfe { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: 2.2rem; }
.vertrauen { list-style: none; padding: 0; margin: 2.4rem 0 0; display: flex; flex-wrap: wrap; gap: .5rem 1.4rem; font-size: .9rem; color: rgba(255, 255, 255, .7); }
.vertrauen li { display: inline-flex; align-items: center; gap: .45rem; }
.vertrauen svg { width: 1.1rem; height: 1.1rem; color: #9fb0ff; }

/* Auftritt der Bühne: gestaffelt von unten */
.aufzug { animation: aufzug 1s var(--weich) both; }
.buehne__text > .aufzug:nth-child(2) { animation-delay: .12s; }
.buehne__text > .aufzug:nth-child(3) { animation-delay: .24s; }
.buehne__text > .aufzug:nth-child(4) { animation-delay: .36s; }
.buehne__text > .aufzug:nth-child(5) { animation-delay: .48s; }
@keyframes aufzug { from { opacity: 0; transform: translateY(28px); filter: blur(8px); } }

/* Produktbild aus Glasfenstern */
.buehne__bild { --px: 0; --py: 0; position: relative; height: 32rem; perspective: 1200px; animation: aufzug 1.2s var(--weich) .35s both; }
.fenster {
  position: absolute; border-radius: 20px;
  background: linear-gradient(160deg, rgba(255, 255, 255, .11), rgba(255, 255, 255, .04));
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14), 0 30px 60px -20px rgba(0, 0, 0, .6);
  backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
  color: #fff;
}
.fenster--plan {
  width: min(24rem, 90%); right: 2%; top: 0; padding: 1rem 1.1rem 1.1rem;
  transform: translate3d(calc(var(--px) * -14px), calc(var(--py) * -14px), 0) rotateY(-6deg) rotateX(3deg);
  animation: schweben 7s ease-in-out infinite;
}
.fenster__kopf { display: flex; align-items: center; gap: .35rem; margin-bottom: .9rem; font-size: .82rem; color: rgba(255, 255, 255, .7); }
.fenster__kopf span { width: .55rem; height: .55rem; border-radius: 50%; background: rgba(255, 255, 255, .22); }
.fenster__kopf b { margin-left: .5rem; font-weight: 650; }
.plan { list-style: none; margin: 0; padding: 0; display: grid; gap: .55rem; }
.plan li { display: grid; grid-template-columns: 3rem minmax(0, 1fr) auto; align-items: center; gap: .75rem; padding: .6rem .7rem; border-radius: 12px; background: rgba(255, 255, 255, .05); font-size: .9rem; }
.plan time { font-variant-numeric: tabular-nums; color: rgba(255, 255, 255, .6); font-size: .82rem; }
.plan b { display: block; font-weight: 650; margin-bottom: .3rem; }
.plan em { font-style: normal; font-size: .78rem; color: rgba(255, 255, 255, .65); font-variant-numeric: tabular-nums; }
.plan em.voll { color: var(--nacht); background: var(--koralle); padding: .1rem .5rem; border-radius: 999px; font-weight: 700; }
.fuell { display: block; height: 5px; border-radius: 5px; background: rgba(255, 255, 255, .1); overflow: hidden; }
.fuell__balken { display: block; height: 100%; border-radius: inherit; background: var(--verlauf); transform-origin: left; animation: fuellen 1.6s var(--weich) both; }
.plan li:nth-child(2) .fuell__balken { animation-delay: 1.05s; }
.plan li:nth-child(3) .fuell__balken { animation-delay: 1.2s; }
.plan li:nth-child(4) .fuell__balken { animation-delay: 1.35s; }
.plan li:nth-child(1) .fuell__balken { animation-delay: .9s; }
.fuell--58 { width: 58%; } .fuell--75 { width: 75%; } .fuell--86 { width: 86%; } .fuell--100 { width: 100%; }
@keyframes fuellen { from { transform: scaleX(0); } }

.fenster--zahl {
  left: -4%; top: 60%; width: 13rem; padding: 1rem 1.15rem;
  transform: translate3d(calc(var(--px) * 22px), calc(var(--py) * 22px), 0);
  animation: schweben 8s ease-in-out -2s infinite;
}
.fenster--zahl small { display: block; font-size: .78rem; color: rgba(255, 255, 255, .6); }
.fenster--zahl strong { display: block; font-size: 1.5rem; font-weight: 800; font-stretch: 112%; letter-spacing: -.02em; }
.kurve { width: 100%; height: 3rem; margin: .3rem 0 .2rem; }
.kurve path { stroke-dasharray: 1; stroke-dashoffset: 1; animation: zeichnen 2s var(--weich) 1.4s forwards; }
.haken { font-size: .8rem; color: #7ee2ae; font-weight: 600; }
@keyframes schweben { 50% { translate: 0 -10px; } }

.meldungen { position: absolute; right: -3%; bottom: -2%; width: 17rem; height: 5rem; transform: translate3d(calc(var(--px) * 30px), calc(var(--py) * 30px), 0); }
.toast {
  position: absolute; inset: 0 0 auto; display: flex; gap: .75rem; align-items: center;
  padding: .8rem .95rem; border-radius: 16px;
  background: rgba(255, 255, 255, .96); color: var(--text);
  box-shadow: 0 24px 50px -18px rgba(0, 0, 0, .6);
  opacity: 0; transform: translateY(16px) scale(.96);
  transition: opacity .5s var(--weich), transform .6s var(--weich);
}
.toast.ist-da { opacity: 1; transform: none; }
.toast.ist-weg { opacity: 0; transform: translateY(-14px) scale(.97); }
.toast p { font-size: .85rem; line-height: 1.35; color: var(--leise); }
.toast b { display: block; color: var(--text); font-size: .92rem; }
.toast__zeichen { flex: none; display: grid; place-items: center; width: 2.3rem; height: 2.3rem; border-radius: 12px; font-style: normal; font-weight: 800; color: #fff; }
.toast--gruen { background: var(--gruen); } .toast--blau { background: var(--blau); } .toast--violett { background: var(--violett); } .toast--koralle { background: var(--koralle); color: var(--nacht); }
/* Ohne JavaScript steht die erste Meldung einfach da. */
.toast:first-child { opacity: 1; transform: none; }
.meldungen.laeuft .toast:first-child:not(.ist-da) { opacity: 0; transform: translateY(-14px) scale(.97); }

.buehne__weiter { position: absolute; left: 50%; bottom: 1.6rem; width: 1.6rem; height: 2.6rem; margin-left: -.8rem; border-radius: 1rem; box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .35); }
.buehne__weiter span { position: absolute; left: 50%; top: .5rem; width: 4px; height: 8px; margin-left: -2px; border-radius: 2px; background: #fff; animation: rollen 1.8s ease-in-out infinite; }
@keyframes rollen { 60% { transform: translateY(12px); opacity: 0; } 61% { transform: none; opacity: 0; } }

/* ---------------- Laufband ---------------- */

.laufband { background: var(--nacht); color: rgba(255, 255, 255, .8); padding: 1.3rem 0 1.6rem; 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); }
.laufband__spur { display: flex; width: max-content; animation: laufen 50s linear infinite; }
@media (hover: hover) { .laufband:hover .laufband__spur { animation-play-state: paused; } }
.laufband span { font-size: clamp(1.1rem, 2vw, 1.5rem); font-weight: 700; font-stretch: 115%; letter-spacing: -.01em; padding-inline: 1.3rem; display: inline-flex; align-items: center; gap: 2.6rem; white-space: nowrap; }
.laufband span::after { content: '✦'; font-size: .7em; background: var(--verlauf); -webkit-background-clip: text; background-clip: text; color: transparent; }
@keyframes laufen { to { transform: translateX(-50%); } }

/* ---------------- Abschnitte ---------------- */

.abschnitt { padding: clamp(5rem, 11vw, 9rem) 0; position: relative; }
.abschnitt h2 { max-width: 24ch; text-wrap: balance; }

/* Vorher / nachher */
.vorher { background: var(--papier); }
.gegenueber { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: clamp(1rem, 3vw, 2.5rem); align-items: center; margin-top: 3.5rem; }
.liste { list-style: none; margin: 0; padding: clamp(1.4rem, 3vw, 2rem); border-radius: var(--radius); display: grid; gap: 1rem; }
.liste--vorher { background: #f1eee8; color: #7a7a86; }
.liste--vorher li { display: flex; gap: .8rem; align-items: baseline; }
.liste--vorher li::before { content: '×'; font-weight: 800; color: #c0786a; }
/* Durchstreichen blendet nacheinander ein – funktioniert auch über mehrere Zeilen. */
.liste--vorher li span {
  text-decoration: line-through 2px transparent;
  transition: text-decoration-color .7s var(--weich);
}
.liste--vorher.ist-sichtbar li span { text-decoration-color: #c0786a; }
.liste--vorher.ist-sichtbar li:nth-child(2) span { transition-delay: .2s; }
.liste--vorher.ist-sichtbar li:nth-child(3) span { transition-delay: .4s; }
.liste--vorher.ist-sichtbar li:nth-child(4) span { transition-delay: .6s; }
.liste--vorher.ist-sichtbar li:nth-child(5) span { transition-delay: .8s; }
.liste--nachher { background: #fff; box-shadow: var(--schatten), inset 0 0 0 1px var(--linie); font-weight: 600; }
.liste--nachher li { display: flex; gap: .8rem; align-items: baseline; }
.liste--nachher li::before {
  content: '✓'; flex: none; display: grid; place-items: center; width: 1.45rem; height: 1.45rem; border-radius: 50%;
  font-size: .8rem; font-weight: 900; color: #fff; background: var(--gruen); transform: translateY(.2rem);
}
.pfeil svg { width: 5rem; height: 1.5rem; }
.pfeil path { stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 1s var(--weich) .7s; }
.pfeil.ist-sichtbar path { stroke-dashoffset: 0; }

/* Funktionen */
.bento { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.1rem; margin-top: 3.5rem; }
.kachel {
  --mx: 50%; --my: 50%;
  position: relative; overflow: hidden; isolation: isolate;
  background: #fff; border-radius: var(--radius); padding: 1.6rem;
  box-shadow: var(--schatten), inset 0 0 0 1px var(--linie);
  transition: transform .5s var(--weich), box-shadow .5s var(--weich);
}
.kachel::before { /* Lichtkegel folgt dem Zeiger */
  content: ''; position: absolute; inset: 0; z-index: -1; opacity: 0; transition: opacity .4s;
  background: radial-gradient(420px circle at var(--mx) var(--my), rgba(139, 92, 246, .12), transparent 60%);
}
@media (hover: hover) { .kachel:hover { transform: translateY(-4px); box-shadow: 0 2px 4px rgba(22, 24, 43, .04), 0 24px 48px -16px rgba(40, 30, 90, .22), inset 0 0 0 1px #ddd6f5; } }
.kachel:hover::before { opacity: 1; }
.kachel h3 { margin: 1.1rem 0 .55rem; }
.kachel p { color: var(--leise); font-size: .98rem; }
.kachel__zeichen { display: grid; place-items: center; width: 2.9rem; height: 2.9rem; border-radius: 14px; color: #fff; background: var(--verlauf); box-shadow: 0 8px 18px -8px rgba(139, 92, 246, .8); }
.kachel__zeichen svg { width: 1.45rem; height: 1.45rem; }
.kachel--gross { grid-column: span 2; grid-row: span 2; display: flex; flex-direction: column; justify-content: space-between; gap: 2rem; background: linear-gradient(170deg, #fff 30%, #f4f1ff); }
.kachel--gross h3 { font-size: 1.6rem; }
.kachel--breit { grid-column: span 2; }

.woche { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); grid-auto-rows: 2.3rem; gap: .45rem; }
.woche__tag { font-size: .75rem; font-weight: 700; color: var(--leise); text-transform: uppercase; letter-spacing: .08em; text-align: center; align-self: end; }
.kurs { display: grid; place-items: center; border-radius: 10px; font-style: normal; font-size: .76rem; font-weight: 700; color: #fff; opacity: 0; transform: scale(.7); transition: opacity .5s var(--weich), transform .6s var(--weich); }
.ist-sichtbar .kurs { opacity: 1; transform: none; }
.k1 { grid-column: 1; grid-row: 2 / span 2; background: #6d84ff; transition-delay: .1s; }
.k2 { grid-column: 2; grid-row: 3; background: #a07cff; transition-delay: .2s; }
.k3 { grid-column: 3; grid-row: 2; background: #ff7a5c; color: var(--nacht); transition-delay: .3s; }
.k4 { grid-column: 4; grid-row: 3 / span 2; background: #16182b; transition-delay: .4s; }
.k5 { grid-column: 5; grid-row: 2; background: #1fbf75; color: var(--nacht); transition-delay: .5s; }
.k6 { grid-column: 2; grid-row: 4 / span 2; background: #ffb35c; color: var(--nacht); transition-delay: .6s; }
.k7 { grid-column: 3; grid-row: 4; background: #8b5cf6; transition-delay: .7s; }
.k8 { grid-column: 5; grid-row: 4; background: #4f6bff; transition-delay: .8s; }

.adresse { margin-top: 1.3rem; display: flex; align-items: center; gap: .5rem; padding: .7rem 1rem; border-radius: 12px; background: #f4f2ee; font-size: .92rem; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; color: var(--text); max-width: 24rem; }
.adresse__schloss { font-size: .8rem; filter: grayscale(1); }
.adresse__zeiger { width: 2px; height: 1.1em; background: var(--violett); animation: blinken 1s steps(1) infinite; }
@keyframes blinken { 50% { opacity: 0; } }

/* Ablauf */
.ablauf { background: #fff; }
.ablauf__raster { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(2rem, 6vw, 6rem); align-items: start; }
.ablauf__kopf { position: sticky; top: 7rem; }
.ablauf__kopf > p:last-child { margin-top: 1.4rem; color: var(--leise); font-size: 1.1rem; max-width: 30rem; }
.zeitleiste { --fortschritt: 0; list-style: none; margin: .6rem 0 0; padding: 0 0 0 3.8rem; position: relative; display: grid; gap: 2.6rem; max-width: 46rem; }
.zeitleiste::before, .zeitleiste::after { content: ''; position: absolute; left: 1.35rem; top: .5rem; bottom: .5rem; width: 3px; border-radius: 3px; }
.zeitleiste::before { background: var(--linie); }
.zeitleiste::after { background: linear-gradient(var(--blau), var(--violett), var(--koralle)); transform-origin: top; transform: scaleY(var(--fortschritt)); }
.schritt { position: relative; }
.schritt__nr {
  position: absolute; left: -3.8rem; top: -.2rem; z-index: 1;
  display: grid; place-items: center; width: 2.9rem; height: 2.9rem; border-radius: 50%;
  font-weight: 800; background: #fff; color: var(--leise); box-shadow: inset 0 0 0 2px var(--linie);
  transition: background .5s, color .5s, box-shadow .5s, transform .5s var(--weich);
}
.schritt.ist-erreicht .schritt__nr { background: var(--nacht); color: #fff; box-shadow: 0 0 0 6px rgba(139, 92, 246, .15); transform: scale(1.05); }
.schritt h3 { font-size: 1.3rem; margin-bottom: .35rem; }
.schritt p { color: var(--leise); }

/* Sicherheit */
.dunkel { background: var(--nacht); color: #fff; overflow: hidden; }
.dunkel .ueber { color: #b3a4ff; }
.sicherheit { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: clamp(2rem, 6vw, 5rem); align-items: center; }
.sicherheit__text > p { color: rgba(255, 255, 255, .72); margin-top: 1.4rem; max-width: 36rem; font-size: 1.1rem; }
.schutz { list-style: none; padding: 0; margin: 2.2rem 0 0; display: grid; gap: 1.05rem; }
.schutz li { position: relative; padding-left: 2.1rem; color: rgba(255, 255, 255, .7); }
.schutz li::before { content: ''; position: absolute; left: 0; top: .35rem; width: 1.15rem; height: 1.15rem; border-radius: 6px; background: var(--verlauf); box-shadow: 0 0 18px rgba(139, 92, 246, .55); }
.schutz b { color: #fff; }

.tresor { position: relative; aspect-ratio: 1; width: min(100%, 26rem); margin-inline: auto; display: grid; place-items: center; }
.tresor__ringe, .tresor__ringe i { position: absolute; inset: 0; border-radius: 50%; }
.tresor__ringe i { border: 1px solid rgba(160, 124, 255, .35); animation: ring 6s ease-out infinite; }
.tresor__ringe i:nth-child(2) { animation-delay: -2s; }
.tresor__ringe i:nth-child(3) { animation-delay: -4s; }
@keyframes ring { from { transform: scale(.35); opacity: 1; } to { transform: scale(1.05); opacity: 0; } }
.tresor__raster { position: relative; display: grid; grid-template-columns: repeat(4, 3.2rem); gap: .6rem; transform: rotate(-8deg) skewX(4deg); }
.tresor__raster span { aspect-ratio: 1; border-radius: 12px; background: rgba(255, 255, 255, .05); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12); position: relative; }
.tresor__raster span::after { content: ''; position: absolute; inset: 30%; border-radius: 4px; background: var(--verlauf); opacity: 0; transform: scale(.4); }
.tresor.ist-sichtbar .tresor__raster span::after { animation: raum 4.8s var(--weich) infinite; }
.tresor__raster span:nth-child(3n)::after { animation-delay: .6s !important; }
.tresor__raster span:nth-child(3n+1)::after { animation-delay: 1.3s !important; }
.tresor__raster span:nth-child(4n)::after { animation-delay: 2s !important; }
.tresor__raster span:nth-child(5n)::after { animation-delay: 2.7s !important; }
@keyframes raum { 0%, 100% { opacity: .15; transform: scale(.45); } 20%, 60% { opacity: 1; transform: none; } }
.tresor__schild { position: absolute; width: 6.5rem; height: 6.5rem; display: grid; place-items: center; border-radius: 28px; background: rgba(11, 13, 26, .75); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .15), 0 20px 60px -10px rgba(139, 92, 246, .6); }
.tresor__schild svg { width: 3.6rem; height: 3.6rem; }

/* Fragen */
.fragen { margin-top: 2.6rem; display: grid; gap: .8rem; }
.fragen details { background: #fff; border-radius: 18px; box-shadow: var(--schatten), inset 0 0 0 1px var(--linie); transition: box-shadow .3s; }
.fragen details[open] { box-shadow: 0 2px 4px rgba(22, 24, 43, .04), 0 18px 40px -18px rgba(40, 30, 90, .25), inset 0 0 0 1px #ddd6f5; }
.fragen summary { cursor: pointer; list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: 1.2rem 1.4rem; font-weight: 700; font-size: 1.08rem; }
.fragen summary::-webkit-details-marker { display: none; }
.fragen summary::after { content: '+'; flex: none; display: grid; place-items: center; width: 1.9rem; height: 1.9rem; border-radius: 50%; background: #f1eefc; color: var(--violett); font-size: 1.25rem; font-weight: 600; transition: transform .4s var(--weich), background .3s; }
.fragen details[open] summary::after { transform: rotate(135deg); background: var(--violett); color: #fff; }
.fragen details p { padding: 0 1.4rem 1.3rem; color: var(--leise); }
@supports (interpolate-size: allow-keywords) {
  .fragen { interpolate-size: allow-keywords; }
  .fragen details::details-content { height: 0; overflow: clip; transition: height .45s var(--weich), content-visibility .45s allow-discrete; }
  .fragen details[open]::details-content { height: auto; }
}

/* Schluss */
.schluss { padding-top: 0; }
.schluss__karte {
  position: relative; overflow: hidden; isolation: isolate; text-align: center;
  padding: clamp(3rem, 8vw, 6rem) 1.5rem; border-radius: 32px; color: #fff;
  background: radial-gradient(80% 120% at 50% 0%, #22265a 0%, var(--nacht) 70%);
  box-shadow: 0 40px 80px -30px rgba(22, 24, 43, .5);
}
.schluss__karte h2 { margin-inline: auto; max-width: 18ch; }
.schluss__karte p { color: rgba(255, 255, 255, .72); margin: 1.2rem auto 0; max-width: 32rem; font-size: 1.1rem; }
.schluss__karte .buehne__knoepfe { justify-content: center; }
.schluss__band { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -1; opacity: .55; -webkit-mask-image: radial-gradient(60% 55% at 50% 45%, rgba(0,0,0,.15), #000 80%); mask-image: radial-gradient(60% 55% at 50% 45%, rgba(0,0,0,.15), #000 80%); }
.schluss__band .band, .schluss__band .funke { animation-play-state: paused; }
.schluss__karte.ist-sichtbar .band, .schluss__karte.ist-sichtbar .funke { animation-play-state: running; }

/* Fuß */
.fuss { padding: 2.5rem 0 3rem; color: var(--leise); font-size: .92rem; }
.fuss__innen { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 2rem; justify-content: space-between; border-top: 1px solid var(--linie); padding-top: 2rem; }
.fuss__marke { display: inline-flex; align-items: center; gap: .5rem; font-weight: 800; font-stretch: 110%; color: var(--text); }
.fuss__marke .zeichen { width: 1.5rem; height: 1.5rem; }
.fuss nav { display: flex; flex-wrap: wrap; gap: 1.4rem; }
.fuss a { text-decoration: none; }
.fuss a:hover { color: var(--text); text-decoration: underline; }
@media (pointer: coarse) { .fuss nav { gap: .2rem 1rem; } .fuss nav a { display: inline-block; padding: .6rem .2rem; } .fuss small a { display: inline-block; padding-block: .5rem; } }
.fuss small a { color: inherit; }

/* ---------------- Einblenden beim Scrollen ----------------
   Nur wenn Skripte laufen und Bewegung erwünscht ist – sonst steht alles
   sofort da. */
@media screen and (prefers-reduced-motion: no-preference) {
  .js .zeigen { opacity: 0; transform: translateY(30px); transition: opacity .9s var(--weich), transform .9s var(--weich); }
  .js .zeigen.ist-sichtbar { opacity: 1; transform: none; }
  .js .bento .zeigen:nth-child(2), .js .schutz .zeigen:nth-child(2), .js .fragen .zeigen:nth-child(2) { transition-delay: .08s; }
  .js .bento .zeigen:nth-child(3), .js .schutz .zeigen:nth-child(3), .js .fragen .zeigen:nth-child(3) { transition-delay: .16s; }
  .js .bento .zeigen:nth-child(4), .js .schutz .zeigen:nth-child(4), .js .fragen .zeigen:nth-child(4) { transition-delay: .24s; }
  .js .bento .zeigen:nth-child(5), .js .schutz .zeigen:nth-child(5), .js .fragen .zeigen:nth-child(5) { transition-delay: .32s; }
  .js .bento .zeigen:nth-child(n+6) { transition-delay: .12s; }
  .js .liste--nachher.ist-sichtbar li { animation: aufzug .7s var(--weich) both; }
  .js .liste--nachher.ist-sichtbar li:nth-child(1) { animation-delay: .8s; }
  .js .liste--nachher.ist-sichtbar li:nth-child(2) { animation-delay: .95s; }
  .js .liste--nachher.ist-sichtbar li:nth-child(3) { animation-delay: 1.1s; }
  .js .liste--nachher.ist-sichtbar li:nth-child(4) { animation-delay: 1.25s; }
  .js .liste--nachher.ist-sichtbar li:nth-child(5) { animation-delay: 1.4s; }
  .js .kachel.ist-sichtbar.ist-fertig { transition-delay: 0s; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
  .band, .kurve path, .pfeil path { stroke-dasharray: none; stroke-dashoffset: 0; }
  .funke { display: none; }
  .kurs { opacity: 1; transform: none; }
  .liste--vorher li span { text-decoration-color: #c0786a; }
  .laufband__spur { animation: none; }
}

/* ---------------- Menü für schmale Bildschirme (ohne Skript bedienbar) ---------------- */
.kopf__menue { display: none; position: relative; }
.kopf__menue summary { list-style: none; display: grid; place-items: center; width: 2.75rem; height: 2.75rem; border-radius: 50%; cursor: pointer;
  background: rgba(255, 255, 255, .1); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .2); }
.kopf__menue summary::-webkit-details-marker { display: none; }
.kopf__menue summary svg { width: 1.3rem; height: 1.3rem; transition: transform .3s var(--weich); }
.kopf__menue[open] summary svg { transform: rotate(90deg); }
.kopf__menue nav { position: absolute; right: 0; top: calc(100% + .6rem); min-width: 13rem; padding: .5rem; border-radius: 18px; display: grid;
  background: #11132b; box-shadow: 0 20px 50px -12px rgba(0, 0, 0, .6), inset 0 0 0 1px rgba(255, 255, 255, .12);
  animation: menueAuf .28s var(--weich); }
.kopf__menue nav a { color: #fff; text-decoration: none; padding: .8rem 1rem; border-radius: 12px; font-weight: 600; }
.kopf__menue nav a:hover, .kopf__menue nav a:focus-visible { background: rgba(255, 255, 255, .08); }
.kopf__menue .kopf__menue-anmelden { display: none; margin-top: .3rem; border-top: 1px solid rgba(255, 255, 255, .1); border-radius: 0 0 12px 12px; }
@keyframes menueAuf { from { opacity: 0; transform: translateY(-6px) scale(.98); } }

/* ---------------- Schmale Bildschirme ---------------- */

@media (max-width: 980px) {
  .kopf__nav { display: none; }
  .kopf__menue { display: block; }
  .kopf > .knopf { margin-left: auto; }
  .kopf { gap: 1rem; justify-content: space-between; }
  .buehne { padding-top: 6.5rem; }
  .buehne__inhalt { grid-template-columns: minmax(0, 1fr); }
  .buehne__bild { height: 27rem; max-width: 30rem; width: 100%; margin-inline: auto; }
  .bento { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sicherheit { grid-template-columns: minmax(0, 1fr); }
  .tresor { width: min(100%, 20rem); }
  .gegenueber { grid-template-columns: minmax(0, 1fr); }
  .ablauf__raster { grid-template-columns: minmax(0, 1fr); }
  .ablauf__kopf { position: static; }
  .baender { -webkit-mask-image: linear-gradient(180deg, rgba(0,0,0,.2) 0%, rgba(0,0,0,.25) 55%, #000 75%); mask-image: linear-gradient(180deg, rgba(0,0,0,.2) 0%, rgba(0,0,0,.25) 55%, #000 75%); }
  .pfeil { justify-self: center; }
  .pfeil svg { transform: rotate(90deg); }
}
@media (max-width: 620px) {
  body { font-size: 1rem; }
  .bento { grid-template-columns: minmax(0, 1fr); }
  .kachel--gross, .kachel--breit { grid-column: auto; grid-row: auto; }
  .buehne__bild { height: 22rem; }
  .fenster--plan { right: 0; width: 100%; }
  .fenster--zahl { display: none; }
  .meldungen { width: 16.5rem; right: auto; left: -2%; bottom: 0; }
  .buehne__weiter { display: none; }
  .zeitleiste { padding-left: 3.2rem; }
  .schritt__nr { left: -3.2rem; width: 2.5rem; height: 2.5rem; }
  .zeitleiste::before, .zeitleiste::after { left: 1.1rem; }
  .buehne__knoepfe .knopf { flex: 1 1 100%; justify-content: center; }
  .fuss__innen { flex-direction: column; align-items: flex-start; }
  /* Überschrift passt auch auf 320 px (iPhone SE) vollständig */
  .buehne h1 { font-size: clamp(2rem, 10.2vw, 2.5rem); }
  .kicker { max-width: 100%; border-radius: 16px; }
}
@media (max-width: 440px) {
  .kopf > .knopf { display: none; }
  .kopf__menue { margin-left: auto; }
  .kopf__menue .kopf__menue-anmelden { display: block; }
  .kopf__marke { white-space: nowrap; min-width: 0; }
}
@media (max-width: 380px) {
  .kopf { padding-inline: 1rem; gap: .6rem; }
  .kopf__marke { font-size: .98rem; gap: .4rem; }
  .kopf__marke .zeichen { width: 1.6rem; height: 1.6rem; }
}
@media (prefers-reduced-motion: reduce) {
  .zeitleiste::after { transform: none; }
  .schritt__nr { background: var(--nacht); color: #fff; }
  .toast:first-child { opacity: 1; transform: none; }
}
/* Ohne Skript (oder bevor es lädt): alles steht fertig da */
html:not(.js) .liste--vorher li span { text-decoration-color: #c0786a; }
html:not(.js) .kurs { opacity: 1; transform: none; }
html:not(.js) .pfeil path { stroke-dashoffset: 0; }
html:not(.js) .zeitleiste::after { transform: none; }
html:not(.js) .schluss__band .band, html:not(.js) .schluss__band .funke { animation-play-state: running; }
@media print {
  .zeigen, .kurs { opacity: 1 !important; transform: none !important; }
  .kopf { position: absolute; }
}

/* ---------------- Probeabo-Hinweis ---------------- */
.cta-hinweis { margin-top: .9rem; font-size: .88rem; color: rgba(255, 255, 255, .62); }
.buehne__text > .aufzug:nth-child(6) { animation-delay: .56s; }
.knopf--rand { color: var(--text); background: #fff; box-shadow: inset 0 0 0 1.5px var(--text); }
.knopf--rand:hover { background: var(--text); color: #fff; }

/* ---------------- Preise ---------------- */
.preise { background: linear-gradient(180deg, var(--papier), #f1eefa 55%, var(--papier)); }
.intervall { display: inline-flex; gap: .25rem; padding: .3rem; margin: 2.2rem 0 0; border-radius: 999px; background: #fff; box-shadow: var(--schatten), inset 0 0 0 1px var(--linie); position: relative; }
.intervall__wahl { position: absolute; opacity: 0; pointer-events: none; width: 1px; height: 1px; margin: 0; }
.intervall label { padding: .6rem 1.2rem; border-radius: 999px; font-weight: 650; font-size: .95rem; cursor: pointer; color: var(--leise); transition: background .3s var(--weich), color .3s; }
.intervall label em { font-style: normal; font-size: .75rem; font-weight: 700; margin-left: .35rem; padding: .15rem .5rem; border-radius: 999px; background: #e3f7ec; color: #11794a; }
.intervall label { white-space: nowrap; display: inline-flex; align-items: center; justify-content: center; }
@media (max-width: 420px) { .intervall label { padding: .6rem .9rem; } .intervall label em { margin-left: .25rem; padding: .15rem .4rem; } }
/* Sehr schmal (iPhone SE, 320 px): Hinweis unter „Jährlich“ statt daneben */
@media (max-width: 374px) {
  .intervall { display: flex; max-width: 100%; }
  .intervall label { flex-direction: column; gap: .15rem; border-radius: 18px; padding: .5rem .85rem; line-height: 1.2; }
  .intervall label em { margin: 0; }
}
#int-monat:checked ~ .intervall label[for=int-monat], #int-jahr:checked ~ .intervall label[for=int-jahr] { background: var(--nacht); color: #fff; }
#int-jahr:checked ~ .intervall label[for=int-jahr] em { background: rgba(255, 255, 255, .16); color: #9ff0c4; }
#int-monat:focus-visible ~ .intervall label[for=int-monat], #int-jahr:focus-visible ~ .intervall label[for=int-jahr] { outline: 3px solid var(--gold); outline-offset: 2px; }

.tarife { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.2rem; margin-top: 2rem; align-items: stretch; }
.tarif { position: relative; display: flex; flex-direction: column; background: #fff; border-radius: 26px; padding: 2rem 1.7rem 1.8rem; box-shadow: var(--schatten), inset 0 0 0 1px var(--linie); transition: transform .5s var(--weich), box-shadow .5s var(--weich); }
@media (hover: hover) { .tarif:hover { transform: translateY(-4px); box-shadow: 0 30px 60px -30px rgba(40, 30, 90, .35), inset 0 0 0 1px #ddd6f5; } }
.tarif--hervor { background: var(--nacht); color: #fff; box-shadow: 0 40px 80px -30px rgba(40, 30, 90, .55); transform: translateY(-10px); }
@media (hover: hover) { .tarif--hervor:hover { transform: translateY(-14px); } }
.tarif--hervor::before { content: ''; position: absolute; inset: 0; border-radius: inherit; padding: 1.5px; background: var(--verlauf); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none; }
.tarif__band { position: absolute; top: -.85rem; left: 50%; transform: translateX(-50%); margin: 0; padding: .3rem .9rem; border-radius: 999px; background: var(--verlauf); color: var(--nacht); font-size: .75rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; white-space: nowrap; }
.tarif h3 { font-size: 1.5rem; }
.tarif__kurz { color: var(--leise); font-size: .95rem; margin-top: .4rem; min-height: 2.9em; }
.tarif--hervor .tarif__kurz, .tarif--hervor .tarif__zusatz { color: rgba(255, 255, 255, .66); }
.tarif__preis { display: flex; align-items: baseline; gap: .4rem; margin: 1.3rem 0 .2rem; }
.tarif__preis .preis { font-size: clamp(2.4rem, 4vw, 3.1rem); font-weight: 850; font-stretch: 115%; letter-spacing: -.04em; line-height: 1; }
.tarif__preis small { color: var(--leise); font-size: .95rem; }
.tarif--hervor .tarif__preis small { color: rgba(255, 255, 255, .6); }
.tarif__zusatz { font-size: .85rem; color: var(--leise); min-height: 2.6em; }
.tarif .knopf { justify-content: center; margin: 1.3rem 0 1.4rem; }
.tarif__liste { list-style: none; margin: 0; padding: 1.2rem 0 0; border-top: 1px solid var(--linie); display: grid; gap: .55rem; font-size: .94rem; }
.tarif--hervor .tarif__liste { border-color: rgba(255, 255, 255, .12); }
.tarif__liste li { position: relative; padding-left: 1.6rem; }
.tarif__liste li::before { content: '✓'; position: absolute; left: 0; top: .05rem; font-weight: 900; color: var(--gruen); }
.tarif__liste li.grenze::before { content: '◆'; font-size: .7rem; top: .3rem; color: var(--violett); }
.tarif__liste li.plus { padding-left: 0; font-weight: 700; margin-top: .4rem; }
.tarif__liste li.plus::before { content: none; }
/* Umschalter monatlich/jährlich ohne JavaScript */
.preis--jahr { display: none; }
#int-jahr:checked ~ * .preis--jahr { display: inline; }
#int-jahr:checked ~ * .preis--monat { display: none; }
#int-jahr:checked ~ * .tarif__preis .preis--jahr { display: block; }
.tarif__preis .preis { animation: preisWechsel .45s var(--weich); }
@keyframes preisWechsel { from { opacity: 0; transform: translateY(8px); } }

.versprechen { list-style: none; padding: 0; margin: 3rem 0 0; display: flex; flex-wrap: wrap; justify-content: center; gap: .6rem 1.8rem; color: var(--leise); }
.versprechen li { display: inline-flex; gap: .35rem; align-items: center; }
.versprechen li::before { content: ''; width: .45rem; height: .45rem; border-radius: 50%; background: var(--verlauf); }
.versprechen b { color: var(--text); }

.vergleich__rahmen { margin-top: 2.4rem; background: #fff; border-radius: 20px; box-shadow: var(--schatten), inset 0 0 0 1px var(--linie); }
.vergleich__rahmen summary { cursor: pointer; padding: 1.2rem 1.4rem; font-weight: 700; list-style: none; display: flex; justify-content: space-between; }
.vergleich__rahmen summary::-webkit-details-marker { display: none; }
.vergleich__rahmen summary::after { content: '+'; color: var(--violett); font-size: 1.3rem; transition: transform .3s var(--weich); }
.vergleich__rahmen[open] summary::after { transform: rotate(45deg); }
.vergleich { width: 100%; border-collapse: collapse; font-size: .93rem; }
.vergleich th, .vergleich td { padding: .75rem 1rem; border-top: 1px solid var(--linie); text-align: center; }
.vergleich thead th { font-stretch: 110%; }
.vergleich th[scope=row] { text-align: left; font-weight: 600; }
.vergleich th small { display: block; font-weight: 400; color: var(--leise); font-size: .8rem; }
.vergleich td.ja { color: var(--gruen); font-weight: 900; }
.vergleich td.nein { color: #c7c4d4; }
@media (max-width: 980px) {
  .tarife { grid-template-columns: minmax(0, 1fr); max-width: 30rem; margin-inline: auto; }
  .tarif--hervor { transform: none; order: -1; }
  .vergleich__rahmen { overflow-x: auto; }
}
@media (prefers-reduced-motion: reduce) { .tarif--hervor { transform: none; } }
/* Lange Wörter (Streitbeilegungsverfahren …) dürfen schmale Bildschirme nicht sprengen */
h1, h2, h3, h4, dt, dd, th, td, label, legend { overflow-wrap: break-word; }
@media (max-width: 30rem) { h1, h2, h3, h4, legend { -webkit-hyphens: auto; hyphens: auto; } }

@media (prefers-reduced-motion: reduce) { .wechsel { transition: none; } }

/* ---------------- Handy und Tablet: nichts wartet auf eine Einblendung ----------------
   Safari auf dem iPhone spielt Einblendungen mit Weichzeichner (filter: blur) oft nicht ab –
   die Elemente bleiben auf dem ersten Bild stehen, also unsichtbar, bis gewischt oder
   getippt wird. So blieb die Bühne bis auf die Kennzeile lange leer. Dazu kosten große
   Weichzeichner, Glas (backdrop-filter) und die leuchtenden Funken auf dem Handy viel
   Rechenzeit, gerade beim ersten Bild.
   Deshalb auf Touch-Geräten: Überschrift, Text und Knöpfe stehen sofort da und gleiten nur
   leicht nach oben – ohne Ausblenden und ohne Unschärfe. Das Wort in der Überschrift wechselt
   weiter, nur ohne Unschärfe. Lichter ohne Weichzeichner, Glas als fester Grund, keine Funken. */
@keyframes aufzugLeicht { from { transform: translateY(14px); } }
@keyframes wortReinLeicht { from { opacity: 0; transform: translateY(.45em); } }
@keyframes wortRausLeicht { to { opacity: 0; transform: translateY(-.4em); } }
@media (hover: none), (pointer: coarse) {
  .aufzug, .buehne__bild { animation-name: aufzugLeicht; animation-duration: .7s; }
  .js .liste--nachher.ist-sichtbar li { animation-name: aufzugLeicht; }
  .wechsel__wort.ist-weg { animation-name: wortRausLeicht; }
  .wechsel__wort.ist-neu { animation-name: wortReinLeicht; }
  .buehne__licht, .buehne__licht::before, .buehne__licht::after { filter: none; opacity: .42; }
  .funke { display: none; }
  .band { animation: none; stroke-dashoffset: 0; }   /* Bänder stehen gleich da, statt Bild für Bild gezeichnet zu werden */
  .fenster, .knopf--glas, .tresor__schild { -webkit-backdrop-filter: none; backdrop-filter: none; }
  .fenster { background: linear-gradient(160deg, rgba(43, 47, 88, .94), rgba(26, 29, 60, .94)); }
  .knopf--glas { background: rgba(255, 255, 255, .14); }
  .tresor__schild { background: rgba(11, 13, 26, .9); }
}

/* =====================================================================
   2026.12.164 – Zielgruppen, Kundenstimme, Einblick, Umzug, Vergleich,
   Gebührenrechner, Empfehlen, Über uns, Vorschau der Platzhalter.
   ===================================================================== */

.unsichtbar { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.rahmen--mittel { width: min(980px, 100% - 2.5rem); }
.abschnitt__einleitung { margin-top: 1.2rem; max-width: 40rem; color: var(--leise); font-size: 1.1rem; }
[id] { scroll-margin-top: 5.5rem; }

/* Kennzeile als Teil der Überschrift (für Suchmaschinen), aussehen wie bisher */
.buehne h1 .kicker { display: flex; width: fit-content; max-width: 100%; font-size: .86rem; font-weight: 600; line-height: 1.4; letter-spacing: 0; font-stretch: 100%; white-space: normal; }
/* Varianten der Bühne: längere Zeilen dürfen umbrechen */
.buehne__titel--b .zeile, .buehne__titel--c .zeile { white-space: normal; }
.buehne__titel--b, .buehne__titel--c { font-size: clamp(2.4rem, 5vw, 4.6rem) !important; }
.cta-hinweis a { color: inherit; text-decoration: underline; text-decoration-color: rgba(255, 255, 255, .35); text-underline-offset: .2em; }
.cta-hinweis a:hover { text-decoration-color: #fff; }

/* Bewegung anhalten (WCAG 2.2.2) */
.laufband { position: relative; }
.bewegung { font: inherit; cursor: pointer; border: 0; }
.laufband .bewegung {
  position: absolute; right: max(.6rem, calc((100% - 1180px) / 2)); top: 50%; translate: 0 -50%; z-index: 2;
  width: 2.2rem; height: 2.2rem; border-radius: 50%; color: #fff; background: rgba(255, 255, 255, .1); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .22);
}
.laufband .bewegung::before, .laufband .bewegung::after { content: ''; position: absolute; top: 32%; width: 3px; height: 36%; border-radius: 2px; background: currentColor; }
.laufband .bewegung::before { left: calc(50% - 5px); }
.laufband .bewegung::after { left: calc(50% + 2px); }
.ruhe .laufband .bewegung::before { left: 40%; width: 0; height: 0; border-radius: 0; background: none; border-style: solid; border-width: .45rem 0 .45rem .7rem; border-color: transparent transparent transparent currentColor; top: calc(50% - .45rem); }
.ruhe .laufband .bewegung::after { content: none; }
.laufband .bewegung:hover { background: rgba(255, 255, 255, .2); }
.bewegung--fuss { background: none; color: inherit; padding: .4rem 0; text-decoration: underline; text-underline-offset: .2em; font-size: .88rem; }
html:not(.js) .bewegung { display: none; }
@media (prefers-reduced-motion: reduce) { .bewegung { display: none; } }
/* Nur Endlos-Bewegungen anhalten – Einblendungen beim Scrollen laufen weiter, sonst blieben Inhalte unsichtbar. */
.ruhe .buehne__licht, .ruhe .buehne__licht::before, .ruhe .buehne__licht::after, .ruhe .funke, .ruhe .kicker__punkt, .ruhe .fenster,
.ruhe .buehne__weiter span, .ruhe .laufband__spur, .ruhe .adresse__zeiger, .ruhe .tresor__ringe i, .ruhe .tresor__raster span::after { animation-play-state: paused !important; }

/* Für deine Studioart */
.fuerwen { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem 1.4rem; margin-top: 2.6rem; font-weight: 650; }
.fuerwen > span { color: var(--leise); font-weight: 600; }
.fuerwen a { display: inline-flex; align-items: center; gap: .35rem; text-decoration: none; color: var(--text); padding: .45rem .2rem; border-bottom: 2px solid transparent; }
.fuerwen a svg { width: 1rem; height: 1rem; transition: transform .3s var(--weich); }
.fuerwen a:hover { border-bottom-color: var(--violett); }
@media (hover: hover) { .fuerwen a:hover svg { transform: translateX(3px); } }

/* Kundenstimme */
.referenz { background: #fff; }
.referenz__raster { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(2rem, 6vw, 5rem); align-items: center; }
.referenz__raster--ohne { grid-template-columns: minmax(0, 1fr); }
.referenz__raster--ohne .referenz__text { max-width: 52rem; }
.referenz__foto { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 28px; box-shadow: 0 30px 60px -30px rgba(40, 30, 90, .45); }
.referenz__foto--leer, .ueber-uns__foto--leer { display: grid; place-items: center; text-align: center; padding: 1rem; background: repeating-linear-gradient(135deg, #f4f2ee 0 14px, #ece8e0 14px 28px); }
.referenz__stimme { margin: 2rem 0 0; }
.referenz__stimme blockquote { margin: 0; font-size: clamp(1.25rem, 2.2vw, 1.6rem); line-height: 1.45; font-weight: 600; letter-spacing: -.01em; text-wrap: pretty; }
.referenz__stimme figcaption { margin-top: 1.2rem; font-weight: 700; }
.referenz__stimme figcaption span { display: block; font-weight: 500; color: var(--leise); font-size: .95rem; }
.referenz__seit { margin-top: 1.2rem; color: var(--leise); font-size: .95rem; }
.referenz__fakten { list-style: none; padding: 0; margin: 1.6rem 0 0; display: grid; gap: .6rem; }
.referenz__fakten li { position: relative; padding-left: 1.7rem; }
.referenz__fakten li::before { content: '✓'; position: absolute; left: 0; font-weight: 900; color: var(--gruen); }

/* Einblick: Bildschirmfotos und Video */
.einblick { background: linear-gradient(180deg, var(--papier), #f1eefa); }
.einblick__reihe { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.4rem; margin-top: 3rem; }
.einblick__bild { margin: 0; background: #fff; border-radius: 22px; padding: .7rem .7rem 1.1rem; box-shadow: var(--schatten), inset 0 0 0 1px var(--linie); }
.einblick__bild img { width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; object-position: top left; border-radius: 14px; box-shadow: inset 0 0 0 1px var(--linie); background: #f4f2ee; }
.einblick__bild figcaption { padding: .9rem .5rem 0; color: var(--leise); font-size: .95rem; }
.einblick__bild figcaption b { display: block; color: var(--text); font-size: 1.05rem; margin-bottom: .15rem; }
.einblick__leer { display: grid; place-items: center; aspect-ratio: 16 / 10; border-radius: 14px; background: repeating-linear-gradient(135deg, #f4f2ee 0 14px, #ece8e0 14px 28px); }
.einblick__video { margin-top: 3rem; border-radius: 24px; overflow: hidden; background: var(--nacht); box-shadow: 0 40px 80px -30px rgba(40, 30, 90, .45); }
.einblick__video video { display: block; width: 100%; height: auto; }
.einblick__video--leer { display: grid; place-items: center; aspect-ratio: 16 / 9; color: #fff; }

/* Umzug leicht gemacht */
.umzug { background: #fff; }
.umzug, .excel, .ueber-uns, .einblick, .referenz { padding-block: clamp(4rem, 9vw, 7rem); }
.umzug__liste { list-style: none; counter-reset: umzug; padding: 0; margin: 2.8rem 0 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.1rem; }
.umzug__liste li { counter-increment: umzug; position: relative; padding: 1.6rem 1.5rem 1.5rem; border-radius: var(--radius); background: var(--papier); box-shadow: inset 0 0 0 1px var(--linie); }
.umzug__liste li::before { content: counter(umzug, decimal-leading-zero); display: block; margin-bottom: .8rem; font-weight: 800; font-stretch: 115%; font-size: .9rem; letter-spacing: .08em; background: var(--verlauf); -webkit-background-clip: text; background-clip: text; color: transparent; }
.umzug__liste h3 { margin-bottom: .45rem; }
.umzug__liste p { color: var(--leise); font-size: .98rem; }
.umzug__liste--2, .umzug__liste--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.umzug__knopf { margin-top: 2.2rem; }

/* Ehrlicher Vergleich mit Excel & Co. */
.excel__rahmen { margin-top: 2.6rem; max-width: 64rem; overflow-x: auto; background: #fff; border-radius: 22px; box-shadow: var(--schatten), inset 0 0 0 1px var(--linie); }
.excel__tabelle { width: 100%; border-collapse: collapse; font-size: .97rem; }
.excel__tabelle th, .excel__tabelle td { padding: .95rem 1.2rem; text-align: left; vertical-align: top; border-top: 1px solid var(--linie); }
.excel__tabelle thead th { border-top: 0; font-stretch: 110%; font-size: .9rem; color: var(--leise); }
.excel__tabelle thead th:last-child { color: var(--violett); }
.excel__tabelle tbody th { font-weight: 700; width: 24%; }
.excel__tabelle td { color: var(--leise); }
.excel__tabelle td:last-child { color: var(--text); font-weight: 600; }
.excel__ehrlich { margin-top: 1.6rem; max-width: 46rem; color: var(--leise); }
.excel__ehrlich b { color: var(--text); }

/* Gründungsangebot (optional) */
.gruender { position: relative; margin: 2.4rem auto 0; max-width: 46rem; padding: 1.6rem 1.8rem; border-radius: 22px; text-align: left;
  background: linear-gradient(135deg, rgba(109, 132, 255, .12), rgba(255, 106, 77, .12)); box-shadow: inset 0 0 0 1.5px rgba(139, 92, 246, .35); }
.gruender__marke { font-size: .78rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--violett); margin-bottom: .4rem; }
.gruender h3 { font-size: 1.35rem; margin-bottom: .5rem; }
.gruender__bedingung { margin-top: .6rem; font-size: .9rem; color: var(--leise); }
.gruender--aus { opacity: .7; }
.gruender__aus { position: absolute; top: -.8rem; right: 1rem; padding: .2rem .7rem; border-radius: 999px; font-size: .78rem; font-weight: 700; background: var(--text); color: #fff; }

/* Gebührenrechner: links die zwei Zahlen, rechts dunkel das Ergebnis mit dem einen nächsten Schritt.
   Die Summe ist das Größte, darunter sofort „je Mitglied“ (kleine Einheit) und was bleibt; die Posten
   stehen vollständig, aber leiser darunter. */
.rechner { margin: 3rem auto 0; max-width: 64rem; padding: clamp(1.4rem, 3vw, 2.4rem); border-radius: 28px; background: #fff; box-shadow: 0 30px 60px -36px rgba(40, 30, 90, .4), inset 0 0 0 1px var(--linie); }
.rechner__kopf h3 { font-size: clamp(1.4rem, 2.4vw, 1.8rem); }
.rechner__kopf p { color: var(--leise); margin-top: .35rem; }
.rechner__raster { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: clamp(1.4rem, 3vw, 2.4rem); margin-top: 1.6rem; align-items: stretch; }
.rechner__eingaben { display: grid; gap: 1.3rem; align-content: start; }
.rechner__groessen { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .5rem; }
.rechner__groesse { font: inherit; cursor: pointer; border: 0; text-align: left; padding: .7rem .85rem; border-radius: 14px; background: var(--papier); color: var(--text);
  box-shadow: inset 0 0 0 1.5px var(--linie); transition: box-shadow .2s, background .2s; }
.rechner__groesse b { display: block; font-size: .95rem; }
.rechner__groesse span { font-size: .8rem; color: var(--leise); }
.rechner__groesse i { font-style: normal; }
.rechner__groesse:hover { box-shadow: inset 0 0 0 1.5px var(--violett); }
.rechner__groesse[aria-pressed="true"] { background: #f1eefa; box-shadow: inset 0 0 0 2px var(--violett); }
.rechner__feld { display: grid; gap: .5rem; }
.rechner__feld > span:first-child { font-size: .9rem; font-weight: 700; }
.rechner__paar { display: grid; grid-template-columns: minmax(0, 1fr) 6.5rem; gap: .9rem; align-items: center; }
.rechner__paar input[type=range] { width: 100%; accent-color: var(--violett); height: 1.6rem; cursor: pointer; }
.rechner__paar input[type=number] { font: inherit; font-size: 1.1rem; font-weight: 750; color: var(--text); width: 100%; min-height: 2.9rem; padding: .5rem .7rem;
  border: 0; border-radius: 12px; background: var(--papier); box-shadow: inset 0 0 0 1.5px var(--linie); font-variant-numeric: tabular-nums; }
.rechner__euro { position: relative; }
.rechner__euro input { padding-right: 1.7rem !important; }
.rechner__euro i { position: absolute; right: .75rem; top: 50%; translate: 0 -50%; font-style: normal; font-weight: 700; color: var(--leise); }
.rechner input:focus-visible, .rechner select:focus-visible, .rechner__groesse:focus-visible { outline: 3px solid var(--violett); outline-offset: 2px; }
.rechner__tarif { padding: .9rem 1rem; border-radius: 14px; background: var(--papier); }
.rechner__tarif p { margin: 0; }
.rechner__tarif p span { color: var(--leise); }
.rechner__tarif small { display: block; color: var(--leise); font-size: .85rem; margin-top: .1rem; }
.rechner__tarif small.ist-warnung { color: #b4472f; font-weight: 650; }
.rechner__wahl { display: flex; align-items: center; justify-content: space-between; gap: .6rem; margin-top: .6rem; font-size: .85rem; color: var(--leise); }
.rechner__wahl select { font: inherit; font-size: .9rem; padding: .35rem .5rem; border-radius: 10px; border: 0; background: #fff; box-shadow: inset 0 0 0 1px var(--linie); color: var(--text); }
.rechner__haken { display: flex; align-items: flex-start; gap: .6rem; cursor: pointer; font-weight: 650; }
.rechner__haken input { width: 1.25rem; height: 1.25rem; margin-top: .15rem; accent-color: var(--violett); flex: none; }
.rechner__haken em { font-style: normal; font-size: .75rem; font-weight: 750; padding: .1rem .45rem; border-radius: 999px; background: #e6f8ee; color: #137a49; margin-left: .2rem; }
.rechner__haken small { display: block; font-weight: 500; color: var(--leise); }
html:not(.js) .rechner__eingaben { display: none; }
html:not(.js) .rechner__raster { grid-template-columns: minmax(0, 1fr); }
.rechner__beispiel { margin: 0 0 .8rem; font-size: .9rem; color: rgba(255, 255, 255, .6); }
.js .rechner__beispiel { display: none; }

.rechner__ergebnis { position: relative; overflow: hidden; isolation: isolate; border-radius: 22px; padding: clamp(1.3rem, 2.6vw, 1.9rem); color: #fff;
  background: radial-gradient(120% 90% at 100% 0%, #22265a 0%, var(--nacht) 65%); box-shadow: 0 30px 60px -30px rgba(22, 24, 43, .6); }
.rechner__ergebnis::before { content: ''; position: absolute; inset: 0; z-index: -1; border-radius: inherit; padding: 1.5px; background: var(--verlauf);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; opacity: .7; }
.rechner__summe p { margin: 0; font-size: .85rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #b3a4ff; }
.rechner__summe strong { display: block; margin-top: .2rem; font-size: clamp(2.4rem, 5vw, 3.4rem); font-weight: 850; font-stretch: 115%; letter-spacing: -.035em; line-height: 1; font-variant-numeric: tabular-nums; }
.rechner__summe small { display: block; margin-top: .35rem; color: rgba(255, 255, 255, .6); font-size: .85rem; }
.rechner__kennzahlen { list-style: none; padding: 0; margin: 1.1rem 0 0; display: flex; flex-wrap: wrap; gap: .5rem; }
.rechner__kennzahlen li { padding: .45rem .8rem; border-radius: 999px; background: rgba(255, 255, 255, .08); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14); font-size: .92rem; color: rgba(255, 255, 255, .8); }
.rechner__kennzahlen b { color: #fff; font-variant-numeric: tabular-nums; }
.rechner__bleibt { margin: 1rem 0 0; color: rgba(255, 255, 255, .78); }
.rechner__bleibt b { color: #7ee2ae; font-variant-numeric: tabular-nums; }
.rechner__posten { margin: 1.2rem 0 0; display: grid; font-size: .92rem; }
.rechner__posten div { display: flex; justify-content: space-between; gap: 1rem; padding: .55rem 0; border-top: 1px solid rgba(255, 255, 255, .1); }
.rechner__posten dt { color: rgba(255, 255, 255, .68); }
.rechner__posten dt small { display: block; font-size: .8rem; color: rgba(255, 255, 255, .45); }
.rechner__posten dd { margin: 0; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.rechner__los { margin-top: 1.4rem; }
.rechner__los .knopf { width: 100%; justify-content: center; }
.rechner__los p { margin: .7rem 0 0; text-align: center; font-size: .85rem; color: rgba(255, 255, 255, .6); }
.rechner__los p a { color: #fff; text-underline-offset: .2em; }
.rechner__klein { margin-top: 1.2rem; font-size: .82rem; color: var(--leise); }
@media (max-width: 860px) {
  .rechner__raster { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 420px) {
  .rechner__paar { grid-template-columns: minmax(0, 1fr) 5.6rem; gap: .6rem; }
  .rechner__groesse { padding: .6rem .6rem; }
  .rechner__groesse i { display: none; }
  .rechner__wahl { flex-wrap: wrap; }
}

/* Studio empfiehlt Studio */
.empfehlen { background: var(--nacht); color: #fff; padding-block: clamp(4rem, 8vw, 6.5rem); }
.empfehlen .ueber { color: #b3a4ff; }
.empfehlen__raster { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(2rem, 6vw, 5rem); align-items: center; }
.empfehlen__frei { margin-top: 1.2rem; color: rgba(255, 255, 255, .72); max-width: 30rem; }
.empfehlen__schritte { list-style: none; counter-reset: e; padding: 0; margin: 0; display: grid; gap: .9rem; }
.empfehlen__schritte li { counter-increment: e; position: relative; padding: 1.1rem 1.2rem 1.1rem 3.6rem; border-radius: 18px; background: rgba(255, 255, 255, .05); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12); color: rgba(255, 255, 255, .75); }
.empfehlen__schritte li::before { content: counter(e); position: absolute; left: 1.1rem; top: 1.05rem; display: grid; place-items: center; width: 1.8rem; height: 1.8rem; border-radius: 50%; background: var(--verlauf); color: var(--nacht); font-weight: 800; font-size: .9rem; }
.empfehlen__schritte b { display: block; color: #fff; margin-bottom: .1rem; }

/* Wer dahintersteckt */
.ueber-uns__raster { display: grid; grid-template-columns: minmax(0, .7fr) minmax(0, 1.3fr); gap: clamp(2rem, 6vw, 5rem); align-items: center; }
.ueber-uns__raster--ohne { grid-template-columns: minmax(0, 1fr); }
.ueber-uns__foto { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 28px; }
.ueber-uns__text { margin-top: 1.4rem; font-size: 1.1rem; max-width: 38rem; }
.ueber-uns__fakten { margin: 1.8rem 0 1.8rem; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem 2rem; }
.ueber-uns__fakten dt { font-size: .78rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--violett); }
.ueber-uns__fakten dd { margin: .25rem 0 0; font-weight: 600; }
.ueber-uns__fakten a { text-decoration-color: var(--linie); text-underline-offset: .2em; }

/* So geht es los (Schlusskarte) */
.los { list-style: none; counter-reset: los; padding: 0; margin: 2.2rem auto 0; max-width: 52rem; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .9rem; text-align: left; }
.los li { counter-increment: los; padding: 1rem 1.1rem; border-radius: 16px; background: rgba(255, 255, 255, .06); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14); color: rgba(255, 255, 255, .72); font-size: .95rem; }
.los li b { display: block; color: #fff; margin-bottom: .15rem; }
.los li b::before { content: counter(los) '. '; color: #b3a4ff; }

/* Zielgruppenseiten */
.buehne--ziel { min-height: auto; padding: clamp(8rem, 14vw, 10rem) 0 clamp(5rem, 9vw, 7rem); }
.buehne__inhalt--ziel { grid-template-columns: minmax(0, 1fr); }
.buehne__inhalt--ziel-bild { grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); }
.buehne__foto { margin: 0; animation-delay: .3s; }
.buehne__foto img { width: 100%; height: auto; border-radius: 18px; box-shadow: 0 40px 80px -30px rgba(0, 0, 0, .7), 0 0 0 1px rgba(255, 255, 255, .14);
  transform: perspective(1400px) rotateY(-6deg) rotateX(2deg); transform-origin: left center; }
.buehne__foto figcaption { margin-top: .9rem; font-size: .82rem; color: rgba(255, 255, 255, .55); text-align: center; }
@media (max-width: 620px) { .buehne__titel--ziel { font-size: clamp(1.75rem, 8vw, 2.3rem) !important; } }
@media (max-width: 980px) { .buehne__inhalt--ziel-bild { grid-template-columns: minmax(0, 1fr); } .buehne__foto { max-width: 34rem; } .buehne__foto img { transform: none; } }
@media (prefers-reduced-motion: reduce) { .buehne__foto img { transform: none; } }
.buehne__inhalt--ziel .buehne__text { max-width: 50rem; }
.buehne__titel--ziel { font-size: clamp(2.1rem, 3.5vw, 3.3rem) !important; line-height: 1.02 !important; text-wrap: balance; }
.bento--ziel { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.bento--ziel .kachel h3 { margin-top: 0; }
.tagesablauf { list-style: none; padding: 0; margin: .6rem 0 0; display: grid; gap: 1rem; }
.tagesablauf li { display: grid; grid-template-columns: 7.5rem minmax(0, 1fr); gap: 1.2rem; align-items: baseline; padding: 1.1rem 1.3rem; border-radius: 18px; background: var(--papier); box-shadow: inset 0 0 0 1px var(--linie); }
.tagesablauf__zeit { font-weight: 800; font-variant-numeric: tabular-nums; font-stretch: 112%; background: var(--verlauf); -webkit-background-clip: text; background-clip: text; color: transparent; }
.tagesablauf p { color: var(--text); }
.preise--kurz .versprechen { margin-top: 2rem; justify-content: flex-start; }
.preiszeile__mehr { margin-top: 1.6rem; font-weight: 650; }
.preiszeile__mehr a { color: var(--violett); text-underline-offset: .2em; }
.fuerwen--hell { margin-top: 2.4rem; }
.fuss__wer { font-weight: 600; }

/* Vorschau der Platzhalter (nur in der Verwaltung) */
mark.platzhalter { background: #fff1a8; color: #4a3b00; padding: .05em .3em; border-radius: 4px; box-shadow: inset 0 0 0 1px #e8c400; font-weight: 700; -webkit-text-fill-color: #4a3b00; }
.vorschau-leiste { position: sticky; top: 0; z-index: 60; margin: 0; padding: .6rem 1rem; text-align: center; font-size: .9rem; font-weight: 650; background: #fff1a8; color: #4a3b00; }
.vorschau-leiste + .kopf { top: 2.6rem; }

@media (max-width: 980px) {
  .referenz__raster, .ueber-uns__raster, .empfehlen__raster { grid-template-columns: minmax(0, 1fr); }
  .referenz__foto, .ueber-uns__foto { max-width: 22rem; }
  .einblick__reihe { grid-template-columns: minmax(0, 1fr); max-width: 40rem; }
  .umzug__liste, .umzug__liste--2, .umzug__liste--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bento--ziel { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 620px) {
  .umzug__liste, .umzug__liste--2, .umzug__liste--4 { grid-template-columns: minmax(0, 1fr); }
  .ueber-uns__fakten { grid-template-columns: minmax(0, 1fr); }
  .los { grid-template-columns: minmax(0, 1fr); }
  .bento--ziel { grid-template-columns: minmax(0, 1fr); }
  .tagesablauf li { grid-template-columns: minmax(0, 1fr); gap: .3rem; }
  .excel__tabelle thead { display: none; }
  .excel__tabelle, .excel__tabelle tbody, .excel__tabelle tr, .excel__tabelle th, .excel__tabelle td { display: block; width: auto !important; }
  .excel__tabelle tr { padding: .9rem 1.1rem; border-top: 1px solid var(--linie); }
  .excel__tabelle tr:first-child { border-top: 0; }
  .excel__tabelle th, .excel__tabelle td { padding: 0; border: 0; }
  .excel__tabelle td { margin-top: .35rem; padding-left: 1.4rem; position: relative; }
  .excel__tabelle td::before { position: absolute; left: 0; font-weight: 800; }
  .excel__tabelle td:nth-of-type(1)::before { content: '×'; color: #c0786a; }
  .excel__tabelle td:nth-of-type(2)::before { content: '✓'; color: var(--gruen); }
  .laufband .bewegung { right: .5rem; }
}
@media print { .bewegung, .vorschau-leiste { display: none; } }
.referenz__hinweis { margin-top: 1.2rem; font-size: .9rem; color: var(--leise); }

/* Zeitersparnis im Rechner (seit 2026.12.166): Annahmen sichtbar und änderbar */
.rechner__zeitchip { margin: .9rem 0 0; font-size: .92rem; color: rgba(255, 255, 255, .7); }
.rechner__zeitchip a { color: #fff; text-decoration: none; padding: .45rem .8rem; border-radius: 999px; background: rgba(126, 226, 174, .14); box-shadow: inset 0 0 0 1px rgba(126, 226, 174, .4); display: inline-block; }
.rechner__zeitchip a:hover { background: rgba(126, 226, 174, .22); }
.rechner__zeitchip b { color: #7ee2ae; }
.rechner__zeitchip small { display: block; margin-top: .3rem; font-size: .78rem; color: rgba(255, 255, 255, .5); }
html:not(.js) .zeit, html:not(.js) .rechner__zeitchip { display: none; }
.zeit { margin-top: clamp(1.6rem, 3vw, 2.4rem); padding-top: clamp(1.4rem, 3vw, 2rem); border-top: 1px solid var(--linie); }
.zeit__kopf { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 1.2rem 2rem; align-items: end; }
.zeit__kopf h3 { font-size: clamp(1.25rem, 2vw, 1.5rem); }
.zeit__kopf p { color: var(--leise); margin-top: .35rem; max-width: 40rem; }
.zeit__ergebnis { text-align: right; padding: .9rem 1.2rem; border-radius: 18px; background: #e9f8f0; box-shadow: inset 0 0 0 1.5px #b9ead0; min-width: 15rem; }
.zeit__ergebnis p { margin: 0; font-size: .78rem; font-weight: 750; letter-spacing: .08em; text-transform: uppercase; color: #137a49; }
.zeit__ergebnis strong { display: block; font-size: clamp(1.6rem, 3vw, 2.1rem); font-weight: 850; font-stretch: 112%; letter-spacing: -.02em; line-height: 1.1; color: var(--text); }
.zeit__ergebnis small { display: block; font-size: .85rem; color: var(--leise); }
.zeit__rahmen { margin-top: 1.2rem; overflow-x: auto; }
.zeit__tabelle { width: 100%; border-collapse: collapse; font-size: .93rem; }
.zeit__tabelle th, .zeit__tabelle td { padding: .7rem .6rem; text-align: left; vertical-align: middle; border-top: 1px solid var(--linie); }
.zeit__tabelle thead th { border-top: 0; font-size: .8rem; color: var(--leise); font-weight: 700; }
.zeit__tabelle tbody th { font-weight: 700; }
.zeit__tabelle tbody th small { display: block; font-weight: 500; color: var(--leise); font-size: .82rem; max-width: 26rem; }
.zeit__tabelle input { font: inherit; font-weight: 700; width: 4.2rem; padding: .35rem .45rem; border: 0; border-radius: 9px; background: var(--papier); box-shadow: inset 0 0 0 1.5px var(--linie); color: var(--text); font-variant-numeric: tabular-nums; }
.zeit__tabelle input:focus-visible { outline: 3px solid var(--violett); outline-offset: 1px; }
.zeit__menge, .zeit__mit, .zeit__min span, .zeit__mit span { color: var(--leise); font-size: .85rem; }
.zeit__menge { white-space: nowrap; }
.zeit__min { display: inline-flex; align-items: center; gap: .35rem; white-space: nowrap; }
.zeit__mit { white-space: nowrap; }
.zeit__gespart { font-weight: 800; color: #137a49; white-space: nowrap; text-align: right !important; font-variant-numeric: tabular-nums; }
.zeit__wert { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem 1.2rem; margin-top: 1.1rem; }
.zeit__wert label { display: inline-flex; align-items: center; gap: .6rem; font-weight: 650; }
.zeit__wert input { font: inherit; font-weight: 700; width: 7.5rem; padding: .45rem 1.7rem .45rem .6rem; border: 0; border-radius: 10px; background: var(--papier); box-shadow: inset 0 0 0 1.5px var(--linie); }
.zeit__wert p { margin: 0; color: var(--text); }
.zeit__hinweis { margin-top: .9rem; font-size: .82rem; color: var(--leise); }
@media (max-width: 760px) {
  .zeit__kopf { grid-template-columns: minmax(0, 1fr); }
  .zeit__ergebnis { text-align: left; }
  .zeit__tabelle thead { display: none; }
  .zeit__tabelle, .zeit__tabelle tbody, .zeit__tabelle tr, .zeit__tabelle th, .zeit__tabelle td { display: block; }
  .zeit__tabelle tr { padding: .8rem 0; border-top: 1px solid var(--linie); display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "titel titel" "menge menge" "heute gespart" "mit gespart"; gap: .4rem .8rem; }
  .zeit__tabelle th, .zeit__tabelle td { border: 0; padding: 0; }
  .zeit__tabelle tbody th { grid-area: titel; }
  .zeit__menge { grid-area: menge; white-space: normal; }
  .zeit__heute { grid-area: heute; }
  .zeit__min { white-space: normal; }
  .zeit__mit { grid-area: mit; white-space: normal; }
  .zeit__gespart { grid-area: gespart; align-self: center; font-size: 1.05rem; }
  .zeit__mit::before { content: 'mit Plattform: '; }
}

/* ---------- App (seit 2026.12.167) ----------
   Store-Knopf dunkel wie bei App-Stores üblich (Wiedererkennung), ohne Apple-Logo und ohne nachgebautes
   Abzeichen. Korall bleibt allein der Anmeldung. Die Abbildung ist gezeichnet und als solche beschriftet. */
.appzeile { display: inline-flex; align-items: center; gap: .55rem; margin-top: .9rem; padding: .45rem .95rem .45rem .7rem; border-radius: 999px; font-size: .88rem; color: rgba(255, 255, 255, .75);
  background: rgba(255, 255, 255, .06); box-shadow: inset 0 0 0 1px rgba(159, 176, 255, .28); }
.appzeile svg { flex: none; width: 1.05rem; height: 1.05rem; color: #9fb0ff; }
.appzeile a { color: #fff; font-weight: 650; text-decoration: underline; text-decoration-color: rgba(159, 176, 255, .6); text-underline-offset: .22em; }
.appzeile a:hover { text-decoration-color: #fff; }
.appabschnitt { background: linear-gradient(180deg, #f1eefa 0%, var(--papier) 70%); overflow: hidden; }
.appabschnitt__raster { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: clamp(2.5rem, 6vw, 5rem); align-items: center; }
.appabschnitt__spalten { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.4rem 2rem; margin-top: 2.2rem; }
.appabschnitt__spalten h3 { font-size: 1.02rem; margin-bottom: .6rem; }
.appabschnitt__liste { list-style: none; margin: 0; padding: 0; display: grid; gap: .55rem; color: var(--leise); font-size: .98rem; line-height: 1.45; }
.appabschnitt__liste li { position: relative; padding-left: 1.7rem; }
.appabschnitt__liste li::before { content: '✓'; position: absolute; left: 0; top: .1rem; width: 1.15rem; height: 1.15rem; border-radius: 50%; display: grid; place-items: center;
  font-size: .7rem; font-weight: 800; color: #fff; background: linear-gradient(135deg, var(--blau), var(--violett)); }
.appabschnitt__aktion { display: flex; flex-wrap: wrap; align-items: center; gap: 1.2rem 1.8rem; margin-top: 2.4rem; }
.appknopf { display: inline-flex; align-items: center; gap: .75rem; padding: .7rem 1.35rem .7rem 1rem; border-radius: 14px; background: var(--nacht); color: #fff; text-decoration: none;
  box-shadow: 0 14px 30px -14px rgba(11, 13, 26, .7), inset 0 0 0 1px rgba(255, 255, 255, .08); transition: transform .35s var(--weich), box-shadow .35s var(--weich); }
.appknopf svg { width: 1.75rem; height: 1.75rem; color: #b9c4ff; }
.appknopf span { display: grid; font-weight: 750; font-size: 1.08rem; line-height: 1.2; }
.appknopf small { font-weight: 550; font-size: .74rem; color: rgba(255, 255, 255, .7); }
@media (hover: hover) { .appknopf:hover { transform: translateY(-2px); box-shadow: 0 20px 40px -16px rgba(11, 13, 26, .8), inset 0 0 0 1px rgba(255, 255, 255, .14); } }
.appknopf:focus-visible, .appzeile a:focus-visible { outline: 3px solid var(--violett); outline-offset: 3px; }
.appabschnitt__qr { display: flex; align-items: center; gap: .9rem; }
.appabschnitt__qr svg { width: 5.4rem; height: 5.4rem; padding: .35rem; border-radius: 12px; background: #fff; box-shadow: var(--schatten), inset 0 0 0 1px var(--linie); }
.appabschnitt__qr p { max-width: 11rem; font-size: .84rem; line-height: 1.4; color: var(--leise); }
@media (hover: none), (pointer: coarse), (max-width: 760px) { .appabschnitt__qr { display: none; } }
.appabschnitt__hinweis { margin-top: 1.5rem; max-width: 40rem; font-size: .86rem; color: var(--leise); }
.appabschnitt__bild { margin: 0; display: grid; justify-items: center; }
.appabschnitt__bild figcaption { margin-top: 1.1rem; font-size: .8rem; color: var(--leise); }
.handy { position: relative; width: min(290px, 78vw); aspect-ratio: 9 / 18.5; padding: 11px; border-radius: 46px; background: linear-gradient(160deg, #23263f, var(--nacht));
  box-shadow: 0 50px 90px -40px rgba(40, 30, 90, .55), 0 0 0 1px rgba(11, 13, 26, .9), inset 0 0 0 2px rgba(255, 255, 255, .06); transform: rotate(-2.5deg); }
.handy::before { content: ''; position: absolute; z-index: 2; top: 22px; left: 50%; width: 31%; height: 22px; border-radius: 999px; background: var(--nacht); transform: translateX(-50%); }
.handy__bildschirm { height: 100%; border-radius: 36px; overflow: hidden; padding: 3.4rem .95rem 1rem; display: flex; flex-direction: column; gap: .65rem;
  background: linear-gradient(180deg, #f3f0ff 0%, #fff 55%); font-size: .82rem; line-height: 1.35; }
.handy__gruss { font-size: 1.65em; font-weight: 800; font-stretch: 110%; letter-spacing: -.02em; }
.handy__gruss small { font-size: .52em; }
.handy__gruss small, .handy__karte small { display: block; font-weight: 600; letter-spacing: .02em; color: var(--leise); }
.handy__karte { background: #fff; border-radius: 16px; padding: .7rem .85rem; box-shadow: inset 0 0 0 1px var(--linie), 0 6px 14px -10px rgba(40, 30, 90, .35); }
.handy__karte b { display: block; font-size: 1.16em; }
.handy__karte small { font-size: .85em; }
.handy__karte span { display: block; color: var(--leise); }
.handy__karte--naechster { color: #fff; background: linear-gradient(135deg, var(--blau), var(--violett)); box-shadow: 0 14px 26px -14px rgba(79, 107, 255, .8); }
.handy__karte--naechster small, .handy__karte--naechster span { color: rgba(255, 255, 255, .78); }
.handy__knopf { display: inline-block; margin-top: .55rem; padding: .32rem .85rem; border-radius: 999px; background: #fff; color: #4a36c9; font-style: normal; font-weight: 750; font-size: .95em; }
.handy__ok { color: #137a49; }
.handy__karte ul { list-style: none; margin: .3rem 0 0; padding: 0; display: grid; gap: .2rem; }
.handy__karte li { display: flex; gap: .55rem; }
.handy__karte time { width: 1.5rem; font-weight: 750; color: var(--violett); }
.handy__mitteilung { position: absolute; z-index: 3; left: -14%; bottom: 17%; width: 74%; padding: .65rem .85rem; border-radius: 16px; font-size: .95em; line-height: 1.35;
  background: rgba(255, 255, 255, .94); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); box-shadow: 0 24px 40px -18px rgba(40, 30, 90, .5), inset 0 0 0 1px var(--linie);
  transform: rotate(2.5deg); }
.handy__mitteilung b { display: block; font-size: 1.06em; }
.handy__leiste { margin-top: auto; display: flex; justify-content: space-around; padding: .55rem .3rem .1rem; border-top: 1px solid var(--linie); font-size: .85em; font-weight: 650; color: var(--leise); }
.handy__leiste i { font-style: normal; }
.handy__leiste .ist { color: var(--violett); }
.fuss__marken { flex-basis: 100%; font-size: .78rem; opacity: .85; }
@media (max-width: 980px) {
  .appabschnitt__raster { grid-template-columns: minmax(0, 1fr); }
  .handy { width: min(260px, 72vw); }
}
@media (max-width: 620px) {
  .appabschnitt__spalten { grid-template-columns: minmax(0, 1fr); }
  .handy__mitteilung { left: -6%; }
  .handy__bildschirm { font-size: .72rem; padding-top: 3rem; }
}
@media (prefers-reduced-motion: reduce) { .appknopf { transition: none; } }

/* Wechsel von anderer Software (seit 2026.12.171) */
.vergleich--links th, .vergleich--links td { text-align: left; }
.buehne--wechsel .buehne__unter { max-width: 48rem; }