/* Startseite vom 21.09.2026. Ergaenzt basis.css und rendra.css, gilt nur
   unter body.start. Jeder Abschnitt hat feste Farben und kippt nicht mit dem
   Farbschema, weil das Vorbild hell und dunkel bewusst abwechselt.

   Akzent Violett, GOAT am 21.09.2026: "was modernes, aber bitte nicht dieses
   haessliche orange". Zwei Werte, weil keiner auf beiden Gruenden traegt:
   #5b4cf0 auf Hell 5,62 zu 1, #9b8cff auf Dunkel 7,01 zu 1. */
.start {
  --v: #5b4cf0;
  --v-hell: #9b8cff;
  --nacht: #0b0d14;
  --karte-dunkel: #131520;
  --licht: #eceef3;
  --weiss: #fbfbfd;
  --tinte: #0e1116;
  --grau: #515c70;
  --grau-hell: #a4abbb;
  --hell: #ECEAE6;
  --linie-dunkel: rgb(255 255 255 / 12%);
}
.start .punkt { color: var(--v); }
.start .s-nacht .punkt, .start .schluss-karte .punkt, .start .funnel .punkt,
.start .vorteile-karte .punkt, .start .s-fuss .punkt { color: var(--v-hell); }

/* Kopf: Knopf in der Pille fuehrt jetzt zum Funnel */
.start .pille .tat { background: var(--hell); color: var(--tinte); font-weight: 600; }

/* --- Gemeinsame Bausteine ------------------------------------------------ */
.start .s-braue {
  display: block; text-align: center; text-transform: uppercase;
  font-size: 13px; font-weight: 600; letter-spacing: .22em; margin: 0 auto 22px;
  max-width: none; /* basis.css deckelt Absaetze auf 448 px, dann stand sie links */
  color: var(--grau);
}
.start .s-nacht .s-braue { color: var(--grau-hell); }
.start .s-braue.s-farbe { color: var(--v); }
.start .s-braue.s-farbe-hell { color: var(--v-hell); }

.start .s-knopf {
  display: inline-flex; align-items: center; gap: 10px; min-height: 52px;
  padding: 14px 28px; border-radius: 999px; font-weight: 600; font-size: 15px;
  text-decoration: none; background: var(--tinte); color: var(--hell);
  border: 1px solid rgb(255 255 255 / 10%);
  box-shadow: 0 18px 40px -18px rgb(0 0 0 / 55%);
  transition: transform .2s ease, box-shadow .2s ease, background .2s ease;
}
.start .s-knopf:hover { transform: translateY(-2px); box-shadow: 0 22px 44px -18px rgb(0 0 0 / 65%); }
.start .s-knopf.hell { background: var(--hell); color: var(--tinte); border-color: transparent; }
.start .s-knopf.rand { background: transparent; color: var(--hell); border-color: rgb(255 255 255 / 28%); box-shadow: none; }
.start .s-knopf.rand:hover { border-color: var(--v-hell); }
.start .s-knopf .sym { width: 18px; height: 18px; }

.start .sym { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* Breitere Bahn als auf den Unterseiten. Der Saum aus basis.css ruckt bei
   1400 px um 212 px ein, dann bleiben der Vorteilskarte keine 500 px. Beim
   Vorbild reicht die Karte bis rund 1280 px. */
.start main .bahn, .start .s-fuss .bahn { max-width: 1280px; padding-inline: clamp(20px, 5vw, 72px); }

/* --- Farbgruende --------------------------------------------------------- */
.start .s-nacht {
  background: radial-gradient(120% 80% at 50% 100%, #161b36 0%, var(--nacht) 70%);
  color: var(--hell);
}
.start .s-nacht h2, .start .s-nacht h3, .start .s-nacht p { color: var(--hell); }
.start .s-licht { background: var(--licht); color: var(--tinte); }
.start .s-weiss { background: var(--weiss); color: var(--tinte); }
.start .s-licht h2, .start .s-weiss h2 { color: var(--tinte); }
.start .s-weiss h2 + p, .start .s-licht p { color: var(--grau); }

/* --- 1. Laufband --------------------------------------------------------- */
.start main > section.s-nacht:first-of-type { padding-block: 0; }
.start .buehne + .s-nacht { padding-top: 56px; }
.laufband {
  overflow: hidden; padding: 18px 0 40px;
  mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
}
.laufband-spur {
  display: flex; width: max-content; margin: 0; padding: 0; list-style: none;
  animation: laufen 38s linear infinite;
}
.laufband:hover .laufband-spur, .laufband:focus-within .laufband-spur { animation-play-state: paused; }
@keyframes laufen { to { transform: translateX(-50%); } }
.laufband li {
  position: relative; display: grid; place-items: center;
  width: 124px; height: 72px; flex: 0 0 auto;
  transition: opacity .25s ease;
}
.laufband:hover li { opacity: .35; }
.laufband:hover li:hover { opacity: 1; }
.logo {
  display: block; width: 34px; height: 34px; background: var(--c);
  -webkit-mask: var(--m) center / contain no-repeat; mask: var(--m) center / contain no-repeat;
  transition: transform .25s ease;
}
.laufband li:hover .logo, .laufband li:hover .logo-wort { transform: scale(1.15); }
.logo-wort { font-weight: 800; font-size: 19px; letter-spacing: -.02em; color: var(--hell); transition: transform .25s ease; }
.logo-name {
  position: absolute; bottom: -14px; left: 50%; transform: translate(-50%, 4px);
  font-size: 12px; white-space: nowrap; color: var(--grau-hell);
  opacity: 0; transition: opacity .2s ease, transform .2s ease; pointer-events: none;
}
.laufband li:hover .logo-name { opacity: 1; transform: translate(-50%, 0); }
@media (prefers-reduced-motion: reduce) {
  .laufband-spur { animation: none; flex-wrap: wrap; justify-content: center; width: auto; }
  .laufband-spur li[aria-hidden] { display: none; }
}

/* --- 2. Hauptaussage ----------------------------------------------------- */
.s-aussage { text-align: center; padding-block: 72px 130px; }
.start .s-riesig {
  font-size: clamp(2.6rem, 6.4vw, 5.4rem); font-weight: 800; line-height: 1.02;
  letter-spacing: -.045em; max-width: 14ch; margin: 0 auto 26px;
}
.s-aussage p { max-width: 46ch; margin-inline: auto; color: var(--grau-hell) !important; font-size: 18px; }
.s-aussage p:last-child { margin-top: 34px; }

/* --- 3. Vorteile mit Zeitbalken ------------------------------------------ */
.start .s-links { text-align: left; margin: 0 0 64px; max-width: 12ch; font-size: clamp(2.2rem, 4.6vw, 3.8rem); }
.vorteile { display: grid; gap: 32px; align-items: center; }
@media (min-width: 900px) { .vorteile { grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr); gap: 56px; } }
.vorteile-liste { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.vorteile-liste button {
  all: unset; box-sizing: border-box; cursor: pointer; width: 100%;
  display: grid; grid-template-columns: 44px 1fr; align-items: center; row-gap: 12px;
  padding: 20px 22px; border-radius: 16px; color: var(--grau);
  transition: background .35s ease, color .35s ease, box-shadow .35s ease;
}
.vorteile-liste button:focus-visible { outline: 2px solid var(--v); outline-offset: 3px; }
.vorteile-liste .nr { font-family: ui-monospace, "Cascadia Mono", monospace; font-size: 13px; }
.vorteile-liste .titel { font-weight: 600; font-size: 19px; letter-spacing: -.01em; }
.vorteile-liste .balken { grid-column: 2; height: 2px; background: rgb(14 17 22 / 10%); border-radius: 2px; overflow: hidden; display: none; }
.vorteile-liste .balken i { display: block; height: 100%; width: 100%; background: var(--v-hell); transform-origin: left; transform: scaleX(0); }
.vorteile-liste [aria-selected="true"] {
  background: var(--tinte); color: var(--hell);
  box-shadow: 0 24px 50px -28px rgb(11 13 20 / 60%);
}
.vorteile-liste [aria-selected="true"] .nr { color: var(--v-hell); }
.vorteile-liste [aria-selected="true"] .balken { display: block; background: rgb(255 255 255 / 12%); }
.vorteile-liste [aria-selected="true"] .balken i { animation: balken var(--dauer, 6s) linear forwards; }
.vorteile[data-pause] .balken i { animation-play-state: paused !important; }
@keyframes balken { to { transform: scaleX(1); } }

.vorteile-karte {
  position: relative; overflow: hidden; min-height: 360px;
  background: #111218; color: var(--hell); border-radius: 24px;
  padding: clamp(32px, 5vw, 60px); display: grid; align-items: center;
  box-shadow: 0 40px 80px -40px rgb(11 13 20 / 55%);
}
/* Kein transform auf .folie: sonst wird sie waehrend der Animation zum Bezugsrahmen
   der Riesenzahl, und die Zahl springt von der Mitte in die Ecke. Bewegt wird nur der Text. */
.folie { grid-area: 1 / 1; opacity: 0; transition: opacity .5s ease; pointer-events: none; }
.folie.ist-aktiv { opacity: 1; pointer-events: auto; }
.folie h3, .folie p { transform: translateY(14px); transition: transform .5s ease; }
.folie.ist-aktiv h3, .folie.ist-aktiv p { transform: none; }
.folie h3 { position: relative; z-index: 1; font-size: clamp(2rem, 3.6vw, 3rem); font-weight: 700; letter-spacing: -.035em; margin: 0 0 14px; color: var(--hell); }
.folie h3 em { font-style: normal; color: var(--v-hell); }
.folie p { position: relative; z-index: 1; max-width: 30ch; color: var(--grau-hell) !important; font-size: 17px; margin: 0; }
.riesenzahl {
  position: absolute; right: -6px; bottom: -48px; z-index: 0;
  font-size: clamp(9rem, 18vw, 15rem); font-weight: 800; line-height: 1; letter-spacing: -.06em;
  color: transparent; -webkit-text-stroke: 2px rgb(155 140 255 / 30%);
}
.stempel { position: absolute; top: 20px; right: 20px; width: 104px; height: 104px; z-index: 2; display: grid; place-items: center; }
.stempel > svg { position: absolute; inset: 0; width: 100%; height: 100%; animation: drehen 18s linear infinite; }
.stempel text { font-size: 9.2px; letter-spacing: 1.6px; fill: var(--v-hell); font-weight: 600; }
.stempel-mitte {
  width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center; color: var(--hell);
  background: radial-gradient(circle at 35% 30%, #3a3f5c, #171a27); border: 1px solid rgb(255 255 255 / 16%);
  transition: transform .25s ease;
}
.stempel:hover .stempel-mitte { transform: scale(1.1); }
.stempel-mitte .sym { width: 20px; height: 20px; }
@keyframes drehen { to { transform: rotate(360deg); } }
@media (max-width: 600px) { .stempel { width: 84px; height: 84px; top: 14px; right: 14px; } .folie h3 { padding-right: 70px; } }

/* --- Arbeiten ------------------------------------------------------------ */
.arbeiten-band {
  display: grid; grid-auto-flow: column; grid-auto-columns: min(78vw, 520px); gap: 24px;
  overflow-x: auto; scroll-snap-type: x mandatory; padding: 40px 4px 24px; margin-top: 20px;
  scrollbar-width: thin;
}
.projekt { margin: 0; scroll-snap-align: start; }
.projekt picture, .projekt img { display: block; width: 100%; height: auto; border-radius: 18px; }
.projekt img { box-shadow: 0 30px 60px -36px rgb(11 13 20 / 45%); transition: transform .4s ease; }
.projekt:hover img { transform: translateY(-4px); }
.projekt figcaption { display: flex; justify-content: space-between; align-items: baseline; padding: 16px 4px 0; }
.projekt figcaption b { font-weight: 600; }
.projekt figcaption span { font-size: 14px; color: var(--grau); }

/* --- 4. Demo auf zwei Geraeten ------------------------------------------ */
.s-demo { overflow: hidden; }
.geraete-schalter {
  display: flex; width: max-content; margin: 40px auto 56px; padding: 6px; gap: 4px;
  background: var(--tinte); border-radius: 999px; box-shadow: 0 18px 40px -20px rgb(11 13 20 / 55%);
}
.geraete-schalter button {
  all: unset; cursor: pointer; padding: 12px 26px; border-radius: 999px; font-weight: 600; font-size: 15px;
  color: var(--grau-hell); transition: background .3s ease, color .3s ease;
}
.geraete-schalter button[aria-pressed="true"] { background: #23262f; color: var(--hell); }
.geraete-schalter button:focus-visible { outline: 2px solid var(--v-hell); }

.geraete { position: relative; max-width: 900px; margin-inline: auto; padding-bottom: 40px; }
.rechner {
  width: 86%; border-radius: 16px 16px 12px 12px; overflow: hidden; background: #1d1f24;
  box-shadow: 0 50px 90px -50px rgb(11 13 20 / 60%);
  transition: transform .7s cubic-bezier(.2,.8,.2,1), opacity .7s ease, filter .7s ease;
}
.rechner-leiste { height: 44px; display: grid; place-items: center; }
.rechner-leiste span {
  font-family: ui-monospace, monospace; font-size: 12px; color: #9aa1b2;
  background: #111318; padding: 6px 90px; border-radius: 999px;
}
.bildschirm { position: relative; overflow: hidden; background: #eef3fb; }
.rechner .bildschirm { aspect-ratio: 16 / 10; }
.bildschirm iframe {
  position: absolute; top: 0; left: 0; border: 0; pointer-events: none;
  transform-origin: 0 0; transform: scale(var(--s, .5));
}
.rechner iframe { width: 1280px; height: 800px; }
.handy {
  /* Keine Mindestbreite mehr: sie liess das Handy am Telefon ueber die Buehne ragen (27.09.2026). */
  position: absolute; right: 2%; bottom: 0; width: 25%; z-index: 2;
  padding: clamp(5px, 1.1vw, 10px); border-radius: clamp(18px, 3.8vw, 34px); background: #0e1116;
  box-shadow: 0 40px 70px -30px rgb(11 13 20 / 65%);
  transition: transform .7s cubic-bezier(.2,.8,.2,1), right .7s cubic-bezier(.2,.8,.2,1);
  transform-origin: 50% 100%;
}
.handy .bildschirm { aspect-ratio: 9 / 19.5; border-radius: clamp(14px, 3vw, 26px); }
.handy iframe { width: 390px; height: 845px; }
.handy-kerbe { position: absolute; top: clamp(9px, 1.9vw, 18px); left: 50%; transform: translateX(-50%); width: 30%; height: clamp(7px, 1.5vw, 18px); border-radius: 999px; background: #0e1116; z-index: 3; }
/* Handy nach vorne: es waechst und rueckt in die Mitte, der Rechner tritt zurueck */
.geraete[data-ansicht="handy"] .rechner { transform: scale(.9) translateX(-4%); opacity: .35; filter: blur(2px); }
/* Handy-Ansicht: nur waagerecht in die Mitte (right 37.5 % = Mitte bei 25 % Breite),
   die Vergroesserung --hs rechnet start.js aus, damit es buendig in die Buehne passt. */
.geraete[data-ansicht="handy"] .handy { right: 37.5%; transform: scale(var(--hs, 1.1)); }
.geraete-schalter { position: relative; z-index: 5; }
@media (max-width: 700px) {
  .rechner-leiste span { padding: 5px 30px; }
}
@media (prefers-reduced-motion: reduce) { .rechner, .handy { transition: none; } }

/* --- 5. Funnel ----------------------------------------------------------- */
.s-anfrage { padding-top: 40px !important; }
.drei-punkte {
  list-style: none; margin: 0 auto 48px; padding: 0; max-width: 760px;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; text-align: center;
  color: var(--grau); font-size: 15px;
}
.drei-punkte li { display: grid; justify-items: center; gap: 14px; }
.rund { width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; background: #23262f; color: var(--v-hell); }
.rund .sym { width: 20px; height: 20px; }

.funnel {
  position: relative; max-width: 720px; margin-inline: auto; overflow: hidden;
  background: #111218; color: var(--hell); border-radius: 26px;
  padding: clamp(40px, 6vw, 64px) clamp(22px, 5vw, 56px);
  box-shadow: 0 50px 90px -50px rgb(11 13 20 / 65%);
  min-height: 400px;
}
.funnel-fortschritt { position: absolute; top: 0; left: 0; right: 0; height: 3px; background: rgb(255 255 255 / 8%); }
.funnel-fortschritt i { display: block; height: 100%; width: 25%; background: var(--v-hell); transition: width .5s ease; }
.schritt { display: none; }
.schritt.ist-aktiv { display: block; animation: hinein .45s cubic-bezier(.2,.8,.2,1); }
@keyframes hinein { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
.schritt::before { content: ""; display: block; width: 48px; height: 3px; border-radius: 3px; background: rgb(255 255 255 / 16%); margin: 0 auto 26px; }
.schritt-ziel::before { display: none; }
.schritt h3 { text-align: center; font-size: clamp(1.6rem, 3vw, 2.1rem); font-weight: 700; letter-spacing: -.03em; margin: 0 0 32px; color: var(--hell); }
.wahl { display: grid; gap: 12px; }
@media (min-width: 620px) { .wahl { grid-template-columns: 1fr 1fr; } }
.wahl button {
  all: unset; box-sizing: border-box; cursor: pointer;
  display: flex; justify-content: space-between; align-items: center; gap: 12px;
  min-height: 64px; padding: 18px 20px; border-radius: 14px;
  border: 1px solid var(--linie-dunkel); font-weight: 600; font-size: 16px; color: var(--hell);
  transition: border-color .2s ease, background .2s ease, transform .2s ease;
}
.wahl button .sym { width: 18px; height: 18px; flex: 0 0 18px; color: var(--grau-hell); transition: transform .2s ease, color .2s ease; }
.wahl button:hover, .wahl button:focus-visible { border-color: var(--v-hell); background: rgb(155 140 255 / 8%); }
.wahl button:hover .sym, .wahl button:focus-visible .sym { transform: translateX(4px); color: var(--v-hell); }
.wahl button:focus-visible { outline: 2px solid var(--v-hell); outline-offset: 2px; }
.zurueck { all: unset; cursor: pointer; display: block; margin: 22px auto 0; font-size: 14px; color: var(--grau-hell); text-decoration: underline; text-underline-offset: 3px; }

/* Auswertung: Ladebalken und drei Haekchen, die nacheinander aufgehen */
.schritt-auswertung { text-align: center; padding-top: 12px; }
.schritt-auswertung::before { display: none; }
.lader { width: min(280px, 80%); height: 4px; margin: 0 auto 30px; border-radius: 4px; background: rgb(255 255 255 / 10%); overflow: hidden; }
.lader i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--v), var(--v-hell)); border-radius: 4px; }
.schritt-auswertung.ist-aktiv .lader i { animation: laden 2.4s cubic-bezier(.4,.1,.3,1) forwards; }
@keyframes laden { to { width: 100%; } }
.pruefliste { list-style: none; margin: 0 auto; padding: 0; display: grid; gap: 14px; width: max-content; text-align: left; }
.pruefliste li { display: flex; align-items: center; gap: 12px; color: var(--grau-hell); opacity: .35; transition: opacity .35s ease, color .35s ease; }
.pruefliste li .sym { width: 20px; height: 20px; padding: 3px; border-radius: 50%; border: 1.5px solid rgb(255 255 255 / 25%); color: transparent; transition: all .35s ease; }
.pruefliste li.fertig { opacity: 1; color: var(--hell); }
.pruefliste li.fertig .sym { color: var(--nacht); background: var(--v-hell); border-color: var(--v-hell); }

/* Gutschein wie ein Ticket: links der Wert, rechts das Siegel, dazwischen die Perforation */
.gutschein {
  display: flex; align-items: stretch; max-width: 460px; margin: 6px auto 30px; text-align: left;
  border-radius: 18px; overflow: hidden; background: linear-gradient(135deg, #2b2463, #1a1640);
  border: 1px solid rgb(155 140 255 / 40%); animation: auftauchen .6s cubic-bezier(.2,.8,.2,1);
}
.gutschein-links { flex: 1; padding: 22px 24px; display: grid; gap: 4px; }
.gutschein-klein { font-size: 13px; color: var(--grau-hell); }
.gutschein-links .gutschein-klein:first-child { text-transform: uppercase; letter-spacing: .16em; font-size: 11.5px; font-weight: 600; color: var(--v-hell); }
.gutschein-wert { font-size: 40px; font-weight: 800; letter-spacing: -.03em; line-height: 1.1; color: var(--hell); }
.gutschein-rechts { position: relative; display: grid; place-items: center; padding: 0 26px; border-left: 2px dashed rgb(155 140 255 / 35%); }
.gutschein-rechts::before, .gutschein-rechts::after { content: ""; position: absolute; left: -11px; width: 20px; height: 20px; border-radius: 50%; background: #111218; }
.gutschein-rechts::before { top: -10px; } .gutschein-rechts::after { bottom: -10px; }
.gutschein .siegel { margin: 0; width: 60px; height: 60px; }
@keyframes auftauchen { from { opacity: 0; transform: translateY(18px) scale(.96); } to { opacity: 1; transform: none; } }

.schritt-ziel { text-align: center; }
.schritt-ziel:focus { outline: none; }
.schritt-ziel > p { color: var(--grau-hell); max-width: 44ch; margin-inline: auto; }
.siegel { width: 76px; height: 76px; margin: 0 auto 18px; }
.siegel svg { width: 100%; height: 100%; fill: none; stroke: var(--v-hell); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.siegel circle { stroke-dasharray: 151; stroke-dashoffset: 151; animation: zeichnen .7s ease forwards; }
.siegel path { stroke-dasharray: 36; stroke-dashoffset: 36; animation: zeichnen .4s .6s ease forwards; }
.schritt-ziel.ist-aktiv .siegel { animation: pochen .5s 1s ease; }
@keyframes zeichnen { to { stroke-dashoffset: 0; } }
@keyframes pochen { 50% { transform: scale(1.12); } }
/* Gutschein einloesen: drei Schritte und ein klarer Knopf (27.09.2026) */
.einloesen { list-style: none; margin: 16px auto 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 24px; }
.einloesen li { display: inline-flex; align-items: center; gap: 10px; color: var(--hell); font-weight: 600; font-size: 15px; }
.einloesen span { display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--v); color: #fff; font-size: 13px; }
.einloesen-knopf { margin-top: 28px; }
.einloesen-knopf .sym { transition: transform .2s; }
.einloesen-knopf:hover .sym { transform: translateX(4px); }
.termin { scroll-margin-top: 96px; }
.kalender { margin-top: 28px; border-radius: 16px; overflow: hidden; }
.kalender iframe { width: 100%; height: 700px; border: 0; background: #fff; }
.kalender-ersatz { margin-top: 28px; padding: 24px; border-radius: 16px; border: 1px dashed rgb(255 255 255 / 20%); }
.kalender-ersatz p { color: var(--grau-hell); margin: 0; max-width: none; }
.kalender-ersatz b { color: var(--hell); }
.ersatz-knoepfe { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 18px !important; }
.funnel[data-kalender] .kalender-ersatz { display: none; }

/* --- 6. Pakete ------------------------------------------------------------ */
.pakete { display: grid; gap: 20px; max-width: 820px; margin: 56px auto 0; }
@media (min-width: 720px) { .pakete { grid-template-columns: 1fr 1fr; } }
.paket {
  border-radius: 20px; padding: 32px 28px; background: var(--karte-dunkel);
  border: 1px solid var(--linie-dunkel); display: flex; flex-direction: column;
}
.paket-demo { border-style: dashed; border-color: rgb(255 255 255 / 22%); background: rgb(255 255 255 / 3%); }
.paket-simple { box-shadow: 0 40px 80px -40px rgb(91 76 240 / 45%); border-color: rgb(155 140 255 / 35%); }
.paket h3 { margin: 18px 0 6px; font-size: 24px; font-weight: 700; color: var(--hell); }
.paket-satz { color: var(--grau-hell) !important; margin: 0; min-height: 3em; }
.paket-preis { font-size: 30px; font-weight: 800; letter-spacing: -.03em; margin: 18px 0 20px; }
.paket .s-knopf { justify-content: center; }
.paket-braue { text-transform: uppercase; letter-spacing: .16em; font-size: 12px; font-weight: 600; color: var(--grau-hell) !important; margin: 28px 0 12px; padding-top: 22px; border-top: 1px solid var(--linie-dunkel); }
.paket ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.paket li { display: flex; gap: 10px; align-items: flex-start; color: var(--grau-hell); font-size: 15px; }
.paket li .sym { width: 18px; height: 18px; flex: 0 0 18px; margin-top: 2px; color: var(--v-hell); }
.paket-zeichen { display: grid; grid-template-columns: 1fr 1fr; gap: 3px; width: 40px; height: 40px; }
.paket-zeichen i { border: 1.5px solid var(--hell); border-radius: 3px; }
.paket-zeichen i:nth-child(2) { border-radius: 50% 3px 3px 3px; }
.paket-zeichen.voll i:nth-child(1), .paket-zeichen.voll i:nth-child(4) { background: var(--hell); }

/* --- 7. Fragen ------------------------------------------------------------ */
.start .s-fragen { padding-top: 40px; }
.fragen { max-width: 780px; margin: 48px auto 0; display: grid; gap: 12px; }
/* basis.css gibt details eine Spaltenbreite von 448 px, einen Strich unten
   und ein eigenes Plus. Hier hat jede Frage ihren eigenen Kasten. */
.fragen details { max-width: none; padding: 0; border-bottom: 0; }
.fragen summary::after { content: none; }
.fragen details { border-radius: 16px; background: #101119; border: 1px solid var(--linie-dunkel); transition: border-color .2s ease; }
.fragen details[open] { border-color: rgb(155 140 255 / 40%); }
.fragen summary {
  list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 16px;
  padding: 20px 22px; font-weight: 600; font-size: 16px; color: var(--hell);
}
.fragen summary::-webkit-details-marker { display: none; }
.fragen summary:focus-visible { outline: 2px solid var(--v-hell); border-radius: 16px; }
.plus { width: 28px; height: 28px; flex: 0 0 28px; border-radius: 50%; display: grid; place-items: center; background: #23262f; color: var(--v-hell); transition: transform .3s ease; }
.plus .sym { width: 16px; height: 16px; }
.fragen details[open] .plus { transform: rotate(45deg); }
.fragen details p { margin: 0; padding: 0 22px 22px; color: var(--grau-hell) !important; max-width: 62ch; }

/* --- 8. Abschluss mit Wellen --------------------------------------------- */
.start .s-schluss { background: #0e1016; padding: 24px clamp(10px, 3vw, 40px) 0 !important; }
.schluss-karte {
  position: relative; overflow: hidden; border-radius: 30px 30px 0 0;
  background: #1f2027; padding: clamp(72px, 10vw, 120px) 20px 0; text-align: center;
}
.schluss-text { position: relative; z-index: 2; max-width: 760px; margin-inline: auto; }
.schluss-text h2 { color: var(--hell); font-size: clamp(2.2rem, 5vw, 3.9rem); max-width: 16ch; }
.unterstrichen { color: var(--v-hell); position: relative; white-space: nowrap; }
.unterstrichen::after {
  content: ""; position: absolute; left: 4%; right: 4%; bottom: -.12em; height: .14em;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 10' preserveAspectRatio='none'%3E%3Cpath d='M2 7 Q 100 1 198 6' fill='none' stroke='%239b8cff' stroke-width='2.5' stroke-linecap='round'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
}
.schluss-text > p { color: var(--grau-hell); max-width: 42ch; margin-inline: auto; }
.schluss-text h2 + p { margin-top: 30px; }
.schluss-text .s-knopf { margin-top: 18px; }
.leise-link { color: var(--grau-hell); font-size: 14px; text-decoration: none; }
.leise-link:hover { color: var(--hell); }
.stern { position: absolute; fill: var(--v-hell); z-index: 2; animation: funkeln 3.2s ease-in-out infinite; }
.stern.gross { width: 26px; height: 26px; top: 64px; right: 12%; }
.stern.klein { width: 13px; height: 13px; top: 130px; left: 16%; animation-delay: 1.4s; }
@keyframes funkeln { 50% { opacity: .35; transform: scale(.8); } }
.wellen { display: block; width: calc(100% + 40px); margin-inline: -20px; height: clamp(140px, 18vw, 250px); margin-top: 60px; }
.welle { animation: wogen linear infinite; }
.w1 { animation-duration: 26s; }
.w2 { animation-duration: 19s; animation-direction: reverse; }
.w3 { animation-duration: 14s; }
@keyframes wogen { to { transform: translateX(-1440px); } }
@media (prefers-reduced-motion: reduce) { .welle, .stern, .stempel > svg { animation: none; } }

/* --- 9. Fuss ------------------------------------------------------------- */
.start .s-fuss { background: #0e1016; color: var(--grau-hell); padding: 72px 0 110px; }
.fuss-spalten { display: grid; gap: 40px; grid-template-columns: repeat(2, 1fr); }
@media (min-width: 900px) { .fuss-spalten { grid-template-columns: 1.6fr 1fr 1fr 1fr; } }
.fuss-marke { grid-column: 1 / -1; }
@media (min-width: 900px) { .fuss-marke { grid-column: auto; } }
.s-fuss p { margin: 0 0 14px; color: var(--grau-hell); font-size: 15px; }
.fuss-wort { font-weight: 700; letter-spacing: .14em; color: var(--hell) !important; font-size: 17px !important; }
.fuss-ort { text-transform: uppercase; letter-spacing: .16em; font-size: 12px !important; }
.fuss-kopf { text-transform: uppercase; letter-spacing: .16em; font-size: 12px !important; font-weight: 600; }
.s-fuss a { color: var(--hell); text-decoration: none; }
.s-fuss a:hover { color: var(--v-hell); }
.s-fuss ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; font-size: 15px; }
.fuss-tat { display: inline-flex; align-items: center; gap: 8px; color: var(--v-hell) !important; font-weight: 600; }
.fuss-tat .sym { width: 16px; height: 16px; }
.fuss-unten { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; margin-top: 56px; padding-top: 24px; border-top: 1px solid var(--linie-dunkel); }
.fuss-unten p { margin: 0; font-size: 14px; }
.fuss-unten a + a { margin-left: 22px; }

/* --- Randfueller nach Nordpixel (27.09.2026) -------------------------------
   Nordpixel fuellt leere Raender mit vier Mitteln: Farbschimmer in den Ecken,
   weiche Wellen hinter Karten, Baender von Rand zu Rand, kleine Zierzeichen.
   Alles reine Hintergruende oder Pseudo-Elemente, keine Bilder, kein Skript. */
.start #vorteile, .start #pakete, .start #fragen, .start #demo, .start #anfrage, .start #arbeiten { position: relative; isolation: isolate; }

/* 1. Farbschimmer */
.start #vorteile {
  background:
    radial-gradient(520px 420px at 100% 0%, rgb(155 140 255 / 22%), transparent 70%),
    radial-gradient(420px 360px at 0% 100%, rgb(91 76 240 / 10%), transparent 70%),
    var(--licht);
}
.start #pakete {
  background:
    radial-gradient(480px 520px at 0% 30%, rgb(91 76 240 / 22%), transparent 70%),
    radial-gradient(480px 520px at 100% 80%, rgb(155 140 255 / 16%), transparent 70%),
    radial-gradient(120% 80% at 50% 100%, #161b36 0%, var(--nacht) 70%);
}
.start #fragen {
  background:
    radial-gradient(460px 420px at 100% 10%, rgb(155 140 255 / 16%), transparent 70%),
    radial-gradient(460px 420px at 0% 90%, rgb(91 76 240 / 18%), transparent 70%),
    radial-gradient(120% 80% at 50% 100%, #161b36 0%, var(--nacht) 70%);
}

/* 2. Weiche Wellen ueber die ganze Breite, hinter Geraeten und Fragebogen */
.start #demo::before, .start #anfrage::before {
  content: ""; position: absolute; left: 0; right: 0; z-index: -1; pointer-events: none;
  height: 340px; background-repeat: no-repeat; background-size: 100% 100%;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 340' preserveAspectRatio='none'%3E%3Cpath d='M0 150C240 70 420 70 720 150s480 90 720 10V340H0Z' fill='%23eceef3'/%3E%3Cpath d='M0 230c260-60 470-50 760 10s450 50 680-10V340H0Z' fill='%23e4e2fb'/%3E%3C/svg%3E");
}
.start #demo::before { bottom: 0; }
.start #anfrage::before { top: 0; transform: scaleY(-1); opacity: .8; }

/* 3. Duenne Linie von der Vorteilskarte bis zum rechten Rand */
.start #vorteile::after {
  content: ""; position: absolute; right: 0; top: 18%; width: 38%; height: 64%; z-index: -1; pointer-events: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 300' preserveAspectRatio='none'%3E%3Cpath d='M0 250C120 250 150 60 260 80S360 190 400 150' fill='none' stroke='%235b4cf0' stroke-opacity='.35' stroke-width='1.5' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E") no-repeat center / 100% 100%;
}
@media (max-width: 899px) { .start #vorteile::after { display: none; } }

/* 4. Zierzeichen in den Ecken */
.start #vorteile::before, .start #pakete::before, .start #fragen::before, .start #arbeiten::before {
  content: "\2726"; position: absolute; z-index: 0; pointer-events: none; font-size: 22px; line-height: 1; color: var(--v-hell); opacity: .8;
}
.start #vorteile::before { left: 6%; top: 64px; }
.start #arbeiten::before { right: 7%; top: 72px; color: var(--v); font-size: 18px; }
.start #pakete::before { right: 9%; top: 96px; }
.start #fragen::before { left: 8%; bottom: 96px; font-size: 16px; }

/* 5. Wortband von Rand zu Rand, gefuellt und als Umriss, zwei Reihen gegenlaeufig */
.wortband { overflow: hidden; background: var(--weiss); padding: 32px 0 8px; }
.wortband-reihe { display: flex; width: max-content; gap: 40px; padding-block: 6px; animation: wortband 60s linear infinite; }
.wortband-reihe:nth-child(2) { animation-direction: reverse; }
.wortband span { font-weight: 800; font-size: clamp(36px, 5.2vw, 76px); line-height: 1; letter-spacing: -.02em; text-transform: uppercase; white-space: nowrap; color: var(--tinte); }
.wortband span:nth-child(even) { color: transparent; -webkit-text-stroke: 1.5px rgb(14 17 22 / 35%); }
.wortband span.v { color: var(--v); }
@keyframes wortband { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .wortband-reihe { animation: none; } }