/* AUTOMATISCH aus hell.css gedreht (werkzeug/farben_drehen.py), nicht von Hand ändern */
/* Helle Fassung (Malik 2026-10-23, nach Feedback von Max: „zu viel Blau, zu unübersichtlich“).
   Vorbilder: Guardbase, Qarin, Optivio, Kaviyan. Blueprint und 0/1 bleiben, Blau wird Akzent.
   Wird NACH style.css / flicker.css / credits.css geladen. Die alten Namen bleiben, ihre Rollen auch:
   --blau = Fläche, --blau-tief = getönte Fläche, --weiss = Schrift und Linie. Dazu kommt --akzent (das Qlykr-Blau). */

:root {
  --blau: #2630e0;
  --blau-tief: #1f28cc;
  --weiss: #f8f9ff;
  --weiss-70: rgb(248 249 255 / .64);
  --weiss-linie: rgb(248 249 255 / .14);
  --akzent: #f8f9ff;
  --akzent-tief: #e9ebff;
  --akzent-hell: #1f28cc;
  --fehler: #ffd6db;
  --raster: rgb(248 249 255 / .07);
  --rand: min(72rem, calc(100vw - 2rem));
}

html { background: var(--blau); }
body { background: var(--blau); }
::selection { background: var(--akzent); color: #2630e0; }
:focus-visible { outline-color: var(--akzent); }

/* Logo: blaue Fassung auf hellem Grund */
.marke-bild { height: 2.5rem; margin: 0; }

/* Kopf: eine Zeile, feine Linie darunter, rechts ein Knopf */
.kopf { position: sticky; top: 0; z-index: 4; height: 4.25rem; padding: 0 clamp(1rem, 4vw, 2rem); background: rgb(38 48 224 / .88); -webkit-backdrop-filter: saturate(160%) blur(10px); backdrop-filter: saturate(160%) blur(10px); border-bottom: 1px solid var(--weiss-linie); }
.navi { align-items: center; gap: 1.6rem; }
.navi a { color: var(--weiss-70); font-weight: 500; }
.navi a:hover { color: var(--weiss); }
.kopf-knopf { margin-left: 1.6rem; }
.navi .neu, .neu { background: var(--akzent); color: #2630e0; }

/* Knöpfe: Hauptknopf blau gefüllt, Nebenknopf mit Linie */
.knopf { border-color: var(--weiss-linie); color: var(--weiss); }
.knopf:hover, .knopf[aria-pressed="true"] { background: var(--akzent-hell); color: var(--weiss); border-color: var(--akzent); }
.knopf.voll, .schluss .knopf, .kopf-knopf { background: var(--akzent); color: #2630e0; border-color: var(--akzent); }
.knopf.voll:hover, .schluss .knopf:hover, .kopf-knopf:hover { background: var(--akzent-tief); color: #2630e0; border-color: var(--akzent-tief); }
.knopf.leise { border-color: transparent; }
.knopf.leise:hover { background: transparent; text-decoration-color: var(--weiss); }

/* Eingabefeld: weiß, feine Linie, blauer Pfeil */
.kasten { background: #2630e0; border: 1px solid rgb(248 249 255 / .2); border-radius: 8px; box-shadow: 0 1px 0 rgb(16 18 46 / .04), 0 18px 40px -24px rgb(38 48 224 / .45); }
.kasten:focus-within { border-color: var(--akzent); box-shadow: 0 0 0 3px rgb(38 48 224 / .14), 0 18px 40px -24px rgb(38 48 224 / .45); }
.kasten input::placeholder { color: rgb(248 249 255 / .42); }
.kasten button[type="submit"] { background: var(--akzent); color: #2630e0; border-radius: 6px; }
.kasten button[type="submit"]:hover { background: var(--akzent-tief); }
.kasten .neben:hover { background: var(--akzent-hell); }
.kasten::after { background: var(--akzent); }
.streifen img { border-color: var(--weiss-linie); }
.streifen button { background: var(--akzent); color: #2630e0; }

/* Fehlertexte: rot statt hellrosa */
.k-feld input[aria-invalid="true"] { border-color: var(--fehler); }
.k-b2b-hinweis, .skript-zahl.voll { color: var(--fehler); }
.hinweis { color: var(--fehler); }
.hinweis:empty { min-height: 0; }

/* Verlauf, Kästen, Chips, Kasse */
.frage { background: var(--akzent); color: #2630e0; }
.lauf { background: #2630e0; border: 1px solid var(--weiss-linie); border-radius: 8px; box-shadow: 0 1px 0 rgb(16 18 46 / .03), 0 24px 48px -32px rgb(16 18 46 / .25); }
.lauf-kopf { border-bottom: 1px solid var(--weiss-linie); }
.chip input:checked + span { background: var(--akzent); color: #2630e0; border-color: var(--akzent); }
.chip:hover span { border-color: var(--akzent); }
.zustimmung input { border-color: rgb(248 249 255 / .35); }
.zustimmung input:checked { background-color: var(--akzent); border-color: var(--akzent); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 8.5l3 3 6-7' fill='none' stroke='%23ffffff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.gleis li.durch, .gleis li.dran { border-top-color: var(--akzent); }
.schiene li::before { background: var(--akzent); }
.schiene.live li.dran::before { background: repeating-linear-gradient(90deg, var(--akzent) 0 8px, transparent 8px 14px) 0 0 / 28px 3px; }
.n-leiste span { background: var(--akzent); }
.bw-stern.an { color: var(--akzent); border-color: var(--akzent); }
.kasse { background: #2630e0; border: 1px solid var(--weiss-linie); border-radius: 10px; box-shadow: 0 40px 80px -30px rgb(16 18 46 / .45); }
.kasse::backdrop { background: rgb(248 249 255 / .38); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); }
.k-feld input { background: #2630e0; }
.k-feld input:focus { border-color: var(--akzent); }
.k-credits { border-color: var(--akzent); background: var(--akzent-hell); }
.zustimmung-leiste { background: #2630e0; border: 1px solid var(--weiss-linie); box-shadow: 0 24px 50px -24px rgb(16 18 46 / .4); }
.ton { background: rgb(38 48 224 / .9); border-color: var(--weiss-linie); }
.film, .b-rahmen, .rahmen video { background: var(--blau-tief); }
.rechtliches a, .rechtliches button { background: transparent; }

/* ---------- Startseite ---------- */

/* Held (2026-10-23 v2, Malik: „mehr Blau, 01 muss bleiben, Feld in die Mitte“): blauer Bereich mit dem 0/1-Regen von vorher,
   Menü und Feld darin, alles in der Mitte. Unten löst sich das Blau in helle Pixel auf (regen.js, kante). Innen gelten wieder die blauen Farben. */
.held, .blau { --blau: #f8f9ff; --blau-tief: #e9ebff; --weiss: #2630e0; --weiss-70: rgb(38 48 224 / .78); --weiss-linie: rgb(38 48 224 / .42); }
.held {
  position: relative; isolation: isolate; overflow: hidden; display: flex; flex-direction: column; background: var(--blau); color: var(--weiss); padding-bottom: clamp(7rem, 16vh, 11rem); }
#regen { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -1; }
:is(.held, .blau) .kopf { position: relative; top: auto; height: auto; padding: 1.1rem clamp(1rem, 4vw, 2rem); background: transparent; border-bottom: 0; -webkit-backdrop-filter: none; backdrop-filter: none; }
:is(.held, .blau) .marke-bild { height: 6rem; margin: -1.6rem 0 -1.6rem -1.5rem; }
:is(.held, .blau) .navi .neu, :is(.held, .blau) .neu { background: var(--weiss); color: var(--akzent); }
:is(.held, .blau) .kopf .kopf-knopf, :is(.held, .blau) .knopf.voll { background: var(--weiss); color: var(--akzent); border-color: var(--weiss); }
:is(.held, .blau) .kopf .kopf-knopf:hover, :is(.held, .blau) .knopf.voll:hover { background: #2630e0; color: var(--akzent-tief); }
:is(.held, .blau) .knopf { color: var(--weiss); border-color: var(--weiss); }
:is(.held, .blau) .knopf:hover, :is(.held, .blau) .knopf[aria-pressed="true"] { background: var(--weiss); color: var(--akzent); border-color: var(--weiss); }
:is(.held, .blau) .kasten { background: var(--blau); border: 1.5px solid var(--weiss); box-shadow: 0 18px 44px -18px rgb(10 14 90 / .7); }
:is(.held, .blau) .kasten:focus-within { border-color: var(--weiss); box-shadow: 0 0 0 1.5px var(--weiss), 0 18px 44px -18px rgb(10 14 90 / .7); }
:is(.held, .blau) .kasten input::placeholder { color: var(--weiss-70); }
:is(.held, .blau) .kasten button[type="submit"] { background: var(--weiss); color: var(--akzent); }
:is(.held, .blau) .kasten button[type="submit"]:hover { background: #2630e0; }
:is(.held, .blau) .kasten .neben:hover { background: rgb(38 48 224 / .14); }
:is(.held, .blau) .kasten::after { background: var(--weiss); }
:is(.held, .blau) input, :is(.held, .blau) textarea { caret-color: var(--weiss) !important; }
:is(.held, .blau) .hinweis { color: var(--weiss); }
:is(.held, .blau) .frage { background: var(--weiss); color: var(--akzent); }
:is(.held, .blau) .lauf { background: var(--blau); border: 1.5px solid var(--weiss); box-shadow: none; }
:is(.held, .blau) .lauf-kopf { border-bottom: 1.5px solid var(--weiss-linie); }
:is(.held, .blau) .chip input:checked + span { background: var(--weiss); color: var(--akzent); border-color: var(--weiss); }
:is(.held, .blau) .chip:hover span { border-color: var(--weiss); }
:is(.held, .blau) .zustimmung input { border-color: var(--weiss); }
:is(.held, .blau) .zustimmung input:checked { background-color: var(--weiss); border-color: var(--weiss); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 8.5l3 3 6-7' fill='none' stroke='%232630e0' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
:is(.held, .blau) .gleis li.durch, :is(.held, .blau) .gleis li.dran { border-top-color: var(--weiss); }
:is(.held, .blau) .schiene li::before { background: var(--weiss); }
:is(.held, .blau) .n-leiste span { background: var(--weiss); }
:is(.held, .blau) .bw-stern.an { color: var(--weiss); border-color: var(--weiss); }
:is(.held, .blau) .k-credits { background: transparent; border-color: var(--weiss); }
:is(.held, .blau) .k-b2b-hinweis, :is(.held, .blau) .skript-zahl.voll { color: #1f28cc; }
:is(.held, .blau) .neu-pille { margin: 0 auto 1.4rem; background: var(--blau); border: 1.5px solid var(--weiss-linie); color: var(--weiss); }
:is(.held, .blau) .neu-pille:hover { border-color: var(--weiss); }
:is(.held, .blau) .knopf.leise { border-color: transparent; }
.leer h1 .zeile + .zeile { color: var(--weiss); }

/* Abschnitte darunter: feine Rahmenlinien links und rechts wie auf einem Bauplan */
.mehr { max-width: none; padding: 0; gap: 0; }
.mehr::before { display: none; }
.mehr > section { position: relative; width: var(--rand); margin: 0 auto; padding: clamp(4rem, 9vw, 7rem) clamp(1rem, 3vw, 2.5rem); border-left: 1px solid var(--weiss-linie); border-right: 1px solid var(--weiss-linie); }
.mehr > section + section { border-top: 1px solid var(--weiss-linie); }
.mehr h2 { font-size: clamp(2rem, 4.4vw, 3.25rem); letter-spacing: -.035em; max-width: 18ch; }
.mehr h2 em { font-style: normal; color: var(--akzent); }
.abschnitt-satz { margin-top: .9rem; max-width: 46ch; font-size: 1.0625rem; color: var(--weiss-70); }

/* Beispiele */
.probe { gap: 2.5rem; }
.probe-text p:not(.klein) { color: var(--weiss-70); }
.rahmen video { border: 1px solid var(--weiss-linie); border-radius: 8px; box-shadow: 0 24px 48px -32px rgb(16 18 46 / .35); }
.rahmen figcaption span:first-child { color: var(--weiss); font-weight: 600; }

/* So geht's: Überschrift links, drei Reihen rechts mit Nummer */
.so { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr); gap: 2rem clamp(2rem, 6vw, 5rem); align-items: start; }
.so h2 { position: sticky; top: 6.5rem; }
.so .drei { margin-top: 0; counter-reset: schritt; }
.so .drei > li { grid-template-columns: 3.5rem minmax(0, 1fr); gap: .25rem 1.25rem; padding: 1.75rem 0; border-top: 1px dashed var(--weiss-linie); counter-increment: schritt; }
.so .drei > li:first-child { border-top: 0; padding-top: 0; }
.so .drei > li::before { content: "0" counter(schritt); grid-row: 1 / span 2; padding-top: .35rem; font: 500 1rem/1 var(--zahl); color: var(--akzent); }
.so .wer { grid-column: 2; padding-top: 0; order: -1; }
.so .drei > li > div { grid-column: 2; }
.so .drei h3 { font-size: clamp(1.375rem, 2.4vw, 1.75rem); }
.so .drei p { color: var(--weiss-70); }
.so .schiene { grid-template-columns: 1fr; gap: .9rem; }
.so .schiene li { grid-template-columns: 9.5rem 1fr; gap: 1rem; padding-top: .7rem; border-top-width: 2px; }
.so .schiene li::before { top: -2px; height: 2px; }

/* Preise: zwei Karten, links pro Video, rechts Credits im Blau. Darunter die Extras in einer Zeile. */
.preise-raster { margin-top: 2.5rem; display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.preis-karte { display: flex; flex-direction: column; gap: 1.1rem; padding: clamp(1.25rem, 3vw, 2rem); background: #2630e0; border: 1px solid var(--weiss-linie); border-radius: 10px; }
.preis-karte[hidden] { display: none; }
.preis-kopf { display: flex; align-items: center; justify-content: space-between; gap: 1rem; font-weight: 600; }
.preis-zahl { display: flex; align-items: baseline; gap: .6rem; }
.preis-zahl strong { font-size: clamp(3rem, 6.5vw, 4.5rem); line-height: .95; letter-spacing: -.05em; font-variant-numeric: tabular-nums; }
.preis-zahl span { color: var(--weiss-70); }
.preis-karte .drin { margin: 0; grid-template-columns: 1fr; gap: .5rem; }
.preis-karte .drin li::before { background: var(--akzent); }
.preis-karte .knopf { margin-top: auto; height: 2.75rem; justify-content: center; }
.preis-karte.credits { color: #2630e0; background: var(--akzent); border-color: var(--akzent); position: relative; overflow: hidden; isolation: isolate; }
.preis-karte.credits::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: .5;
  background-image: linear-gradient(rgb(38 48 224 / .09) 1px, transparent 1px), linear-gradient(90deg, rgb(38 48 224 / .09) 1px, transparent 1px); background-size: 32px 32px; }
.preis-karte.credits .neu { background: #2630e0; color: var(--akzent); }
.preis-karte.credits .preis-zahl span, .preis-karte.credits .klein { color: rgb(38 48 224 / .78); }
.preis-karte.credits .drin li::before { background: #2630e0; }
.preis-karte.credits .knopf { background: #2630e0; color: var(--akzent); border-color: #2630e0; }
.preis-karte.credits .knopf:hover { background: var(--akzent-hell); }
.preis-karte .klein { margin: 0; }
.extras { margin-top: 1rem; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); border: 1px solid var(--weiss-linie); border-radius: 10px; background: #2630e0; }
.extras p { display: grid; gap: .3rem; padding: 1rem 1.1rem; }
.extras p + p { border-left: 1px solid var(--weiss-linie); }
.extras strong { font-size: 1.5rem; line-height: 1; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.extras span { font-size: .875rem; color: var(--weiss-70); }

/* Fragen */
.fragen-liste details, .fragen-liste details:last-child { border-color: var(--weiss-linie); }
.fragen-liste details p a { color: var(--akzent); }

/* Schluss: ein blauer Block mit Raster, wie eine Bauplan-Kachel */
.mehr > section.schluss { border-left: 0; border-right: 0; padding-left: 0; padding-right: 0; }
.schluss-block { position: relative; isolation: isolate; overflow: hidden; display: grid; justify-items: start; gap: 1rem; padding: clamp(2.5rem, 7vw, 4.5rem); color: #2630e0; background: var(--akzent); border-radius: 12px; text-align: left; }
.schluss-block::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-image: linear-gradient(rgb(38 48 224 / .08) 1px, transparent 1px), linear-gradient(90deg, rgb(38 48 224 / .08) 1px, transparent 1px); background-size: 40px 40px;
  -webkit-mask-image: linear-gradient(90deg, transparent 20%, #000000); mask-image: linear-gradient(90deg, transparent 20%, #000000); }
.schluss-block h2 { color: #2630e0; max-width: 16ch; }
.schluss-block p { color: rgb(38 48 224 / .8); max-width: 40ch; }
.schluss .schluss-block .knopf { background: #2630e0; color: var(--akzent); border-color: #2630e0; }
.schluss .schluss-block .knopf:hover { background: var(--akzent-hell); color: var(--akzent); }
.schluss { justify-items: stretch; text-align: left; }

.fuss-seite { max-width: var(--rand); padding: 2rem 0; }
.rechtliches { justify-content: flex-start; padding-bottom: 2.5rem; }
.rechtliches a { color: var(--weiss-70); }

@media (max-width: 56rem) {
  .so { grid-template-columns: 1fr; }
  .so h2 { position: static; }
  .preise-raster { grid-template-columns: 1fr; }
  .extras { grid-template-columns: 1fr 1fr; }
  .extras p + p { border-left: 0; }
  .extras p:nth-child(even) { border-left: 1px solid var(--weiss-linie); }
  .extras p:nth-child(n + 3) { border-top: 1px solid var(--weiss-linie); }
}
@media (max-width: 40rem) {
  .kopf-knopf { display: none; }
  .mehr > section { width: 100%; border-left: 0; border-right: 0; padding-left: 1rem; padding-right: 1rem; }
  .so .schiene li { grid-template-columns: 1fr; gap: .2rem; }
  .extras { grid-template-columns: 1fr; }
  .extras p:nth-child(even) { border-left: 0; }
  .extras p + p { border-top: 1px solid var(--weiss-linie); }
}

/* ---------- Credits-Seite ---------- */
.cr::before { display: none; }
.plan { background: #2630e0; border: 1px solid var(--weiss-linie); border-radius: 10px; }
.plan.stark { border: 1.5px solid var(--akzent); }
.plan.gewaehlt { outline-color: var(--akzent); }
.plan-marke { background: var(--akzent); color: #2630e0; }
.plan .drin li::before { background: var(--akzent); }
.cr-tabelle { background: #2630e0; border: 1px solid var(--weiss-linie); border-radius: 10px; }
.cr-held h1 { letter-spacing: -.045em; }
.saldo strong { color: var(--akzent); }
.team-dazu input { background: #2630e0; }
.team-dazu input:focus { border-color: var(--akzent); }
.credits-seite .held::before { -webkit-mask-image: linear-gradient(180deg, #000000, transparent); mask-image: linear-gradient(180deg, #000000, transparent); }

/* ---------- Rechtsseiten, Passwortseite ---------- */
.text a, .zustimmung a { color: var(--akzent); }
.credits-seite #regen { display: none; }
.credits-seite .cr { position: relative; z-index: 1; }
#feld { scroll-margin-top: 10rem; }
/* Admin */
.tabelle td { border-top-color: var(--weiss-linie); }
.klickbar tbody tr:hover td { background: var(--akzent-hell); }
.ablage:hover, .ablage.drueber { background: var(--akzent-hell); }
.kachel-budget.leer strong { color: var(--fehler); }
.kopf .kopf-knopf { color: #2630e0; height: 2.5rem; padding: 0 1rem; }
.fragen h2 { top: 6.5rem; }
.drin li > span { min-width: 0; }
.preis-karte .drin, .preise .preis-karte .drin { padding: 0; }

/* Kontrast und Browser-Flächen (impeccable-Prüfung) */
.kasten input::placeholder, .k-feld input::placeholder, .skript textarea::placeholder, .feedback textarea::placeholder, .n-zeile input::placeholder, .team-dazu input::placeholder { color: rgb(248 249 255 / .52); }
input, textarea { caret-color: var(--akzent) !important; }
html { scrollbar-color: rgb(248 249 255 / .25) transparent; }

.held .zustimmung a, .held .klein a, .held .satz a { color: var(--weiss); }

/* ---------- v3 (Malik 2026-10-23): mehr Blau, weniger Weiß, Übergänge, Schrift wie Flocta ---------- */
/* Überschriften und große Zahlen: Chakra Petch (SIL OFL 1.1, fonts/ChakraPetch-OFL.txt), kantig mit abgeschrägten Ecken.
   Bewusst nicht dieselbe Schrift wie Flocta (Malik: „ähnlich, eckiger, nicht 1:1“). Text bleibt Geist. */
@font-face { font-family: "Chakra Petch"; src: url("/fonts/ChakraPetch-600-latin.woff2") format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Chakra Petch"; src: url("/fonts/ChakraPetch-700-latin.woff2") format("woff2"); font-weight: 700; font-display: swap; }
:root { --anzeige: "Chakra Petch", "Geist", system-ui, sans-serif; }
h1, h2, h3, .leer h1, .cr-held h1, .preis-zahl strong, .extras strong, .plan-preis strong, .saldo strong, .k-zeile strong, .wk-summe strong, .zusage strong, .stufe strong { font-family: var(--anzeige); letter-spacing: -.015em; }
.leer h1 { letter-spacing: -.025em; font-weight: 700; }
.mehr h2 { letter-spacing: -.02em; font-weight: 700; }

/* Blaue Abschnitte: Fläche über die ganze Breite, Rahmenlinien in Weiß */
.mehr > section.blau, .fuss-seite.blau { color: var(--weiss); background: var(--blau); box-shadow: 0 0 0 100vmax var(--blau); clip-path: inset(0 -100vmax); }
.mehr > section.blau { border-color: var(--weiss-linie); }
.blau .mehr h2 em, .mehr .blau h2 em, .blau h2 em { color: var(--weiss); font-style: normal; text-decoration: underline; text-decoration-thickness: .08em; text-underline-offset: .12em; }
.blau .wer, .blau .so .drei > li::before, .so.blau .drei > li::before { color: var(--weiss); }
.so.blau .drei > li { border-top-color: var(--weiss-linie); }
.so.blau .drei p, .so.blau .schiene span, .blau .fragen-liste details p { color: var(--weiss-70); }
.fragen.blau .fragen-liste details p a { color: var(--weiss); }
.mehr > section.blau + section.blau { border-top-color: var(--weiss-linie); }
.fuss-seite.blau { max-width: none; width: 100%; padding: 1.5rem clamp(1rem, 4vw, 2rem) 2rem; }
.fuss-seite.blau a, .fuss-seite.blau .fuss-marke { color: var(--weiss); }
/* Schluss im Blau: weißer Kasten mit blauer Schrift statt blauem Block */
.blau .schluss-block { background: var(--weiss); color: #f8f9ff; }
.blau .schluss-block::after { background-image: linear-gradient(rgb(248 249 255 / .07) 1px, transparent 1px), linear-gradient(90deg, rgb(248 249 255 / .07) 1px, transparent 1px); }
.blau .schluss-block h2 { color: #f8f9ff; }
.blau .schluss-block p { color: rgb(248 249 255 / .8); }
.schluss.blau .schluss-block .knopf { background: #f8f9ff; color: #2630e0; border-color: #f8f9ff; }
.schluss.blau .schluss-block .knopf:hover { background: #e9ebff; color: #2630e0; }

/* Übergangsstreifen zwischen hell und blau (uebergang.js malt die Pixel) */
.kante { position: relative; height: clamp(7rem, 14vw, 11rem); margin: 0; line-height: 0; }
.kante canvas { display: block; width: 100%; height: 100%; }
.mehr > .kante + section { border-top: 0; }

/* Weniger Leerraum */
.mehr > section { padding-top: clamp(2.75rem, 6vw, 4.5rem); padding-bottom: clamp(2.75rem, 6vw, 4.5rem); }
.held { padding-bottom: clamp(5rem, 12vh, 8rem); }
.probe { gap: 1.75rem; }
.preise-raster { margin-top: 1.75rem; }
.so .drei > li { padding: 1.35rem 0; }
.schluss-block { padding: clamp(2rem, 5vw, 3.5rem); }
.warte .buehne { min-height: min(calc(100dvh - 12rem), 44rem); }
html.lenis { scroll-behavior: auto !important; }

/* Aufzählungszeichen: das Qlykr-Zeichen ohne Schrift statt Haken (Malik 2026-10-23) */
.drin li { grid-template-columns: 1.05rem 1fr; }
.drin li::before { width: 1.05rem; height: .9rem; margin-top: .3rem; -webkit-mask: url("/icons/qlykr-zeichen.svg") center / contain no-repeat; mask: url("/icons/qlykr-zeichen.svg") center / contain no-repeat; }

/* Credits-Seite: was ein Credit kauft, als Bilder; wie man mit Credits zahlt, in drei Schritten */
.cr-kauft, .cr-ablauf { margin-top: 1.5rem; padding: clamp(1.25rem, 3vw, 2rem); background: #2630e0; border: 1px solid var(--weiss-linie); }
.cr-kauft h3, .cr-ablauf h3 { margin-bottom: 1.25rem; }
.kauft-reihe { display: grid; grid-template-columns: 0.9fr 1.1fr 2.3fr; gap: 1rem; align-items: end; }
.kauft { margin: 0; display: grid; gap: .8rem; }
.kauft-bild { overflow: hidden; background: var(--blau-tief); border: 1px solid var(--weiss-linie); }
.kauft-bild img { display: block; width: 100%; height: 100%; object-fit: cover; }
.kauft-bild.hoch { aspect-ratio: 9 / 16; } .kauft-bild.vier { aspect-ratio: 4 / 5; } .kauft-bild.quer { aspect-ratio: 16 / 9; }
.kauft figcaption { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: .15rem .7rem; }
.kauft figcaption strong { font-family: var(--anzeige); font-size: 1.5rem; line-height: 1; }
.kauft figcaption > span:last-child { grid-column: 1 / -1; font-size: .9375rem; color: var(--weiss-70); }
.punkte { display: inline-flex; gap: 4px; }
.punkte i { width: 14px; height: 14px; background: var(--akzent); }
.punkte.leer i { background: transparent; border: 1.5px solid var(--akzent); }
.kauft-extra { margin-top: 1.1rem; padding-top: 1rem; border-top: 1px solid var(--weiss-linie); color: var(--weiss-70); }
.cr-schritte { list-style: none; margin: 0 0 1.25rem; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; counter-reset: cs; }
.cr-schritte li { display: flex; flex-direction: column; gap: .5rem; padding: 1.1rem; border: 1px solid var(--weiss-linie); counter-increment: cs; }
.cr-schritte li::before { content: "0" counter(cs); font: 500 .875rem/1 var(--zahl); color: var(--akzent); }
.cr-schritte strong { font-family: var(--anzeige); font-size: 1.25rem; line-height: 1.15; }
.cr-schritte p { color: var(--weiss-70); font-size: .9375rem; }
.mini { margin-top: auto; padding: .9rem; color: #2630e0; background: var(--akzent); }
.mini-saldo { display: flex; align-items: baseline; gap: .6rem; }
.mini-saldo b { font: 700 2.75rem/1 var(--anzeige); }
.mini-saldo span { color: rgb(38 48 224 / .8); }
.mini-feld { display: flex; align-items: center; justify-content: space-between; gap: .6rem; border: 1.5px solid #2630e0; outline: .55rem solid var(--akzent); outline-offset: 0; margin: .55rem; }
.mini-feld span { color: rgb(38 48 224 / .78); font-size: 1.0625rem; }
.mini-feld .ic { width: 2.25rem; height: 2.25rem; padding: .55rem; background: #2630e0; color: var(--akzent); -webkit-mask: none; mask: none; position: relative; }
.mini-feld .ic::after { content: ""; position: absolute; inset: .55rem; background: var(--akzent); -webkit-mask: url("/icons/arrow-up.svg") center / contain no-repeat; mask: url("/icons/arrow-up.svg") center / contain no-repeat; }
.mini-kasse { display: grid; gap: .45rem; border: 1.5px solid #2630e0; }
.mini-kasse p { margin: 0; display: flex; align-items: center; gap: .5rem; font-weight: 700; color: #2630e0; }
.mini-kasse .neu { background: #2630e0; color: var(--akzent); }
.mini-kasse small { color: rgb(38 48 224 / .8); }
.mini-knopf { display: block; padding: .6rem; text-align: center; font-weight: 700; color: var(--akzent); background: #2630e0; }
@media (max-width: 52rem) {
  .kauft-reihe { grid-template-columns: 1fr 1fr; }
  .kauft.breit { grid-column: 1 / -1; }
  .cr-schritte { grid-template-columns: 1fr; }
}
.kauft-bild video { display: block; width: 100%; height: 100%; object-fit: cover; }
.kauft .fuer { grid-column: 1 / -1; font: 500 .75rem/1.3 var(--zahl); color: var(--weiss-70); }
.kauft-extra small { display: block; margin-top: .5rem; font-size: .8125rem; color: var(--weiss-70); }
.kauft figcaption > span:not(.punkte) { grid-column: 1 / -1; font-size: .9375rem; color: var(--weiss-70); }
.kauft figcaption strong { justify-self: start; white-space: nowrap; }

/* ---------- Held v4 (Max: „sieht aus wie eine Waitlist“): Bau-Leiste + Live-Demo ---------- */
.start .buehne { max-width: 62rem; }
.start .leer { margin-bottom: 1.5rem; }
.start .eingabe { max-width: 46rem; margin: 0 auto; }
.held-art { display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem; margin: 0 0 .75rem; padding: 0; border: 0; }
.held-art .chip span { padding: .5rem .85rem; font-weight: 600; background: rgb(233 235 255 / .55); }
.held-art .chip span small { font: 500 .75rem/1 var(--zahl); opacity: .8; margin-left: .3rem; }
body:not(.start) .held-art, body:not(.start) .held-fakten, body:not(.start) .demo { display: none; }
.held #los { width: auto; padding: 0 1.1rem 0 1.25rem; gap: .55rem; display: inline-flex; align-items: center; font: 700 1.0625rem/1 "Geist", sans-serif; }
.los-text { white-space: nowrap; }
body:not(.start) .los-text { display: none; }
body:not(.start) .held #los { width: 3.75rem; padding: 0; justify-content: center; }
.held-fakten { list-style: none; display: flex; flex-wrap: wrap; justify-content: center; gap: .4rem 1.4rem; margin: .9rem 0 0; padding: 0; font-size: .9375rem; color: var(--weiss); }
.held-fakten li { display: inline-flex; align-items: center; gap: .5rem; }
.held-fakten li::before { content: ""; width: .95rem; height: .8rem; background: currentColor; -webkit-mask: url("/icons/qlykr-zeichen.svg") center / contain no-repeat; mask: url("/icons/qlykr-zeichen.svg") center / contain no-repeat; }
.start .plaetze { margin-top: .5rem; font-size: .8125rem; }

/* Demo-Fenster: Kopf mit getippter Domain, links die fünf Schritte, rechts das Video */
.demo { margin: 2.5rem auto 0; width: 100%; max-width: 62rem; background: var(--blau-tief); border: 1.5px solid var(--weiss); box-shadow: 0 40px 80px -40px rgb(5 8 60 / .8); }
.demo-kopf { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .7rem .9rem; border-bottom: 1.5px solid var(--weiss-linie); font: 500 .875rem/1 var(--zahl); }
.demo-url { display: inline-flex; align-items: center; gap: .55rem; padding: .45rem .7rem; min-width: 14rem; background: var(--blau); border: 1px solid var(--weiss-linie); }
.demo-punkt { width: .55rem; height: .55rem; background: var(--weiss); }
.demo.fertig .demo-punkt { background: #7dffb1; }
.demo-cursor { width: 1px; height: 1em; background: var(--weiss); animation: blinken 1s steps(1) infinite; }
.demo.fertig .demo-cursor { display: none; }
@keyframes blinken { 50% { opacity: 0; } }
.demo-art { color: var(--weiss-70); }
.demo-rumpf { display: grid; grid-template-columns: 15rem 1fr; min-height: 0; }
.demo-schritte { list-style: none; margin: 0; padding: 1rem .9rem; display: grid; align-content: start; gap: .25rem; border-right: 1.5px solid var(--weiss-linie); counter-reset: ds; }
.demo-schritte li { display: grid; grid-template-columns: 1.6rem 1fr; align-items: center; padding: .55rem .2rem; font-size: .9375rem; color: rgb(38 48 224 / .5); counter-increment: ds; transition: color .25s; }
.demo-schritte li::before { content: "0" counter(ds); font: 500 .75rem/1 var(--zahl); }
.demo-schritte li.dran { color: var(--weiss); }
.demo-schritte li.dran::after { content: ""; grid-column: 2; height: 2px; margin-top: .35rem; background: repeating-linear-gradient(90deg, var(--weiss) 0 6px, transparent 6px 10px); background-size: 20px 2px; animation: strich .6s linear infinite; }
.demo-schritte li.fertig { color: var(--weiss); }
.demo-schritte li.fertig::before { content: "✓"; font-family: "Geist", sans-serif; }
.demo-film { position: relative; aspect-ratio: 16 / 9; overflow: hidden; background: #0b0f5c;
  background-image: linear-gradient(rgb(38 48 224 / .06) 1px, transparent 1px), linear-gradient(90deg, rgb(38 48 224 / .06) 1px, transparent 1px); background-size: 24px 24px; }
.demo-film video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; opacity: 0; transform: scale(.97); transition: opacity .5s var(--raus), transform .7s var(--raus); }
.demo-film.an video { opacity: 1; transform: none; }
.demo-fertig { position: absolute; left: .8rem; top: .8rem; padding: .35rem .55rem; font: 600 .75rem/1 var(--zahl); color: var(--akzent); background: var(--weiss); opacity: 0; transition: opacity .3s .2s; }
.demo-film.an .demo-fertig { opacity: 1; }
.demo-fuss { display: flex; justify-content: space-between; gap: 1rem; padding: .6rem .9rem; border-top: 1.5px solid var(--weiss-linie); font: 500 .75rem/1.3 var(--zahl); color: var(--weiss-70); }
@media (max-width: 44rem) {
  .demo-rumpf { grid-template-columns: 1fr; }
  .demo-schritte { grid-template-columns: repeat(5, 1fr); border-right: 0; border-bottom: 1.5px solid var(--weiss-linie); padding: .6rem; }
  .demo-schritte li { grid-template-columns: 1fr; font-size: .6875rem; text-align: center; gap: .2rem; }
  .demo-schritte li.dran::after { grid-column: 1; }
  .demo-url { min-width: 0; }
  .demo-fuss { flex-direction: column; gap: .2rem; }
  .held #los { padding: 0 .9rem; }
  .los-text { display: none; }
}
@media (prefers-reduced-motion: reduce) { .demo-cursor, .demo-schritte li.dran::after { animation: none; } }
/* Ton-Knöpfe in Demo und Credits-Beispielen; „Free“ sauber neben dem Kästchen */
.kauft-bild, .demo-film { position: relative; }
.demo-film .ton, .kauft-bild .ton { z-index: 2; }
.kauft figcaption { align-items: center; }
.kauft figcaption strong { line-height: 1; padding-top: .05em; }
.punkte.leer i { box-sizing: border-box; }
.demo .ton, .kauft-bild .ton { background: rgb(248 249 255 / .62); color: #2630e0; border: 1.5px solid rgb(38 48 224 / .55); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
.demo .ton:hover, .kauft-bild .ton:hover { border-color: #2630e0; }
.demo .ton[aria-pressed="true"], .kauft-bild .ton[aria-pressed="true"] { background: #2630e0; color: #f8f9ff; border-color: #2630e0; }
/* Startseite: echte Spec-Videos, drei Hochformate und ein Querformat in gleicher Höhe */
.ads-reihe.spec-reihe { grid-template-columns: 9fr 9fr 9fr 32fr; align-items: start; min-width: 48rem; }
.spec-hinweis { margin-top: -1rem; color: var(--weiss-70); }
.kauft figcaption .punkte { align-self: center; }
@media (min-width: 56rem) {
  .probe .ads-scroll { margin: 0 calc(50% - 50vw); padding: 0 clamp(1rem, 3vw, 2.5rem); overflow: visible; }
  .ads-reihe.spec-reihe { min-width: 0; max-width: 92rem; margin: 0 auto; gap: 1.25rem; }
}
/* Marken-Sets auf der Startseite */
.sets { display: grid; gap: 1rem; }
.set-reiter { display: flex; flex-wrap: wrap; gap: .5rem; }
.set-reiter button { padding: .55rem .9rem; font: 600 .9375rem/1 "Geist", sans-serif; color: var(--weiss); background: #2630e0; border: 1px solid var(--weiss-linie); cursor: pointer; }
.set-reiter button:hover { border-color: var(--akzent); }
.set-reiter button[aria-selected="true"] { color: #2630e0; background: var(--akzent); border-color: var(--akzent); }
.set-reihe { display: grid; grid-template-columns: 32fr 9fr 9fr; gap: 1rem; align-items: start; }
.set-film { position: relative; margin: 0; }
.set-film video { display: block; width: 100%; height: auto; object-fit: cover; background: var(--blau-tief); border: 1px solid var(--weiss-linie); box-shadow: 0 24px 48px -32px rgb(16 18 46 / .35); }
.set-film.quer video { aspect-ratio: 16 / 9; } .set-film.hoch video { aspect-ratio: 9 / 16; }
.set-film figcaption { margin-top: .5rem; display: flex; justify-content: space-between; gap: .5rem; font: 500 .75rem/1.2 var(--zahl); color: var(--weiss-70); }
.set-film figcaption span:first-child { color: var(--weiss); font-weight: 600; }
.set-film .ton { z-index: 2; background: rgb(248 249 255 / .62); color: #2630e0; border: 1.5px solid rgb(38 48 224 / .55); }
.set-film .ton[aria-pressed="true"] { background: #2630e0; color: #f8f9ff; border-color: #2630e0; }
/* Sets bleiben in der Spalte (bündig mit Überschrift und Rahmenlinien) */
.set-reiter { gap: .4rem; }
.set-reiter button { padding: .5rem .8rem; font-size: .875rem; }
.set-reihe[data-anzahl="1"] { grid-template-columns: 32fr 9fr; }
.set-reihe[data-anzahl="0"] { grid-template-columns: 1fr; }
.set-reihe[data-anzahl="0"] .set-film.quer { max-width: 52rem; }
.set-film[hidden] { display: none; }
@media (max-width: 56rem) {
  .set-reihe, .set-reihe[data-anzahl="1"] { grid-template-columns: 1fr 1fr; } .set-film.quer { grid-column: 1 / -1; }
  .set-reiter { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin: 0 -1rem; padding: 0 1rem; } .set-reiter button { flex: none; } }
/* Marken-Leiste: eine Zeile mit Vorschaubildern, seitlich scrollbar, Pfeile an den Enden */
.ic-pfeil-l { --bild: url("/icons/caret-left.svg"); } .ic-pfeil-r { --bild: url("/icons/caret-right.svg"); }
.set-leiste { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: .5rem; }
.set-reiter { display: flex; flex-wrap: nowrap; gap: .6rem; overflow-x: auto; scroll-snap-type: x proximity; scrollbar-width: none; padding: 2px; margin: 0;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000000 1.5rem, #000000 calc(100% - 1.5rem), transparent); mask-image: linear-gradient(90deg, transparent, #000000 1.5rem, #000000 calc(100% - 1.5rem), transparent); }
.set-reiter::-webkit-scrollbar { display: none; }
.set-reiter .set-tab { flex: none; display: grid; gap: .3rem; width: 8.5rem; padding: 0 0 .45rem; text-align: left; color: var(--weiss); background: #2630e0; border: 1px solid var(--weiss-linie); scroll-snap-align: start; cursor: pointer; transition: border-color .15s, transform .15s var(--raus); }
.set-reiter .set-tab:hover { border-color: var(--akzent); transform: translateY(-1px); }
.set-reiter .set-tab img { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; background: var(--blau-tief); }
.set-reiter .set-tab strong { padding: 0 .5rem; font: 600 .875rem/1.15 "Geist", sans-serif; }
.set-reiter .set-tab small { padding: 0 .5rem; font: 500 .6875rem/1.2 var(--zahl); color: var(--weiss-70); }
.set-reiter .set-tab[aria-selected="true"] { color: var(--weiss); background: #2630e0; border: 1px solid var(--akzent); box-shadow: inset 0 0 0 1px var(--akzent); }
.set-reiter .set-tab[aria-selected="true"] strong { color: var(--akzent); }
.set-pfeil { display: grid; place-items: center; width: 2.5rem; height: 2.5rem; padding: 0; color: var(--weiss); background: #2630e0; border: 1px solid var(--weiss-linie); cursor: pointer; }
.set-pfeil:hover:not(:disabled) { border-color: var(--akzent); color: var(--akzent); }
.set-pfeil:disabled { opacity: .3; cursor: default; }
.set-pfeil .ic { width: 1rem; height: 1rem; }
@media (max-width: 56rem) { .set-pfeil { display: none; } .set-leiste { grid-template-columns: minmax(0, 1fr); margin: 0 -1rem; } .set-reiter { padding: 2px 1rem; } .set-reiter .set-tab { width: 7.5rem; } }
.set-reiter { -webkit-mask-image: none; mask-image: none; }
.set-reiter.rechts { -webkit-mask-image: linear-gradient(90deg, #000000 calc(100% - 2rem), transparent); mask-image: linear-gradient(90deg, #000000 calc(100% - 2rem), transparent); }
.set-reiter.links { -webkit-mask-image: linear-gradient(90deg, transparent, #000000 2rem); mask-image: linear-gradient(90deg, transparent, #000000 2rem); }
.set-reiter.links.rechts { -webkit-mask-image: linear-gradient(90deg, transparent, #000000 2rem, #000000 calc(100% - 2rem), transparent); mask-image: linear-gradient(90deg, transparent, #000000 2rem, #000000 calc(100% - 2rem), transparent); }

/* ---------- Credits-Seite v2 (Malik 2026-10-23: „muss überarbeitet werden“): wie die Startseite aufgebaut ---------- */
.credits-seite .held #regen { display: block; }
.credits-seite .held .leer h1 { font-size: clamp(2.75rem, 7vw, 5.25rem); }
.cr-knoepfe { display: flex; justify-content: center; gap: .6rem; margin-top: 1.75rem; }
.cr-knoepfe .knopf { height: 3rem; padding: 0 1.4rem; font-size: 1rem; }
.credits-seite .warte .buehne, .credits-seite .buehne { min-height: 0; padding-top: clamp(2.5rem, 8vh, 5rem); }
.cr-plaene .plan-reihe { margin-top: 1.75rem; }
/* Was ein Credit kauft, auf Blau */
.blau .punkte i { background: var(--weiss); }
.blau .punkte.leer i { background: transparent; border-color: var(--weiss); }
.blau .kauft-bild { border-color: var(--weiss-linie); }
.blau .kauft-extra { border-top-color: var(--weiss-linie); color: var(--weiss-70); }
.cr-kauft .kauft-reihe { margin-top: 1.75rem; }
/* So zahlt man: Reihen wie „How it works“, rechts der Baustein in Weiß */
.cr-so .drei > li { grid-template-columns: 3.5rem minmax(0, 1fr) 15rem; align-items: start; }
.cr-so .drei > li .wer { grid-column: 2; grid-row: 1; }
.cr-so .drei > li > div:not(.mini) { grid-column: 2; grid-row: 2; }
.cr-so .drei > li .mini { grid-column: 3; grid-row: 1 / span 2; margin-top: .2rem; }
.blau .mini { background: #2630e0; color: #f8f9ff; }
.blau .mini-saldo b { color: #f8f9ff; } .blau .mini-saldo span { color: rgb(248 249 255 / .75); }
.blau .mini-feld { border-color: #f8f9ff; outline-color: #2630e0; } .blau .mini-feld span { color: rgb(248 249 255 / .7); }
.blau .mini-feld .ic { background: #f8f9ff; } .blau .mini-feld .ic::after { background: #2630e0; }
.blau .mini-kasse { border-color: #f8f9ff; } .blau .mini-kasse p { color: #f8f9ff; } .blau .mini-kasse .neu { background: #f8f9ff; color: #2630e0; }
.blau .mini-kasse small { color: rgb(248 249 255 / .75); } .blau .mini-knopf { background: #f8f9ff; color: #2630e0; }
.cr-b2b { margin-top: 1.5rem; color: var(--weiss-70); }
.cr-konto { max-width: none; }
.cr-konto > * { max-width: 52rem; }
@media (max-width: 56rem) {
  .cr-so .drei > li { grid-template-columns: 3.5rem minmax(0, 1fr); }
  .cr-so .drei > li .mini { grid-column: 2; grid-row: 3; margin-top: .8rem; max-width: 18rem; }
}
.cr-so .drei .mini-kasse p { color: #f8f9ff; font-size: .9375rem; margin: 0; max-width: none; } .cr-so .drei .mini-kasse small { color: rgb(248 249 255 / .75); }
.cr-so .cr-b2b { grid-column: 1 / -1; margin-top: .5rem; padding-top: 1.25rem; border-top: 1px solid var(--weiss-linie); max-width: none; }
/* Qlykr in Claude (MCP) im Konto */
.cr-mcp { margin-top: 1rem; border-color: var(--akzent); }
.mcp-adresse { display: flex; gap: .5rem; align-items: stretch; }
.mcp-adresse code { flex: 1; min-width: 0; padding: .7rem .8rem; font: 500 .9375rem/1.2 var(--zahl); color: var(--weiss); background: var(--blau-tief); border: 1px solid var(--weiss-linie); overflow-wrap: anywhere; }
.mcp-knoepfe { display: flex; flex-wrap: wrap; gap: .5rem; }
.mcp-schritte { margin: 0; padding-left: 1.2rem; display: grid; gap: .35rem; font-size: .9375rem; color: var(--weiss); }
.mcp-schritte b { font-weight: 700; }
#mcp-hinweis { color: var(--akzent); font-weight: 600; }
#mcp-hinweis:empty { display: none; }
/* Virus an den Rändern heller Abschnitte (virus.js) */
.mehr > section:not(.blau) { position: relative; }
.virus { position: absolute; top: 0; pointer-events: none; z-index: 0; }
.mehr { overflow-x: clip; }
/* weniger Weiß im Konto */
.cr-konto { padding-bottom: clamp(2rem, 4vw, 3rem) !important; }
.cr-so h2 { position: static; }
.mehr > section.blau .virus { z-index: 0; }

/* Einladen gegen Credits (credits.html #einladen) */
.cr-einladen { display: grid; gap: 1rem; justify-items: start; }
.cr-einladen > * { max-width: 52rem; width: 100%; }
.cr-einladen .cr-knoepfe, .cr-einladen > .klein { width: auto; }
.cr-einladen-kasten { border-color: var(--akzent); }
.cr-einladen-kasten .lauf-rumpf { display: grid; gap: .75rem; }
.cr-einladen .hinweis:empty { display: none; }
@media (max-width: 640px) { .cr-einladen .mcp-adresse { flex-direction: column; } }
.cr-einladen [hidden] { display: none !important; }

/* ---------- Rund (Malik 2026-10-24: „zu eckig, etwas mehr Rundung, aber nicht zu viel“, „wie Base44, Lovable, ElevenLabs, mit unserer CI“) ----------
   Gemessen am 2026-10-24: Lovable Eingabe 28 px, Karten 16 px, Knöpfe 8 px; ElevenLabs Pillen und Karten 16 px; Base44 8 px.
   Wir nehmen die Mitte: feste Stufen statt freier Werte. Pillen nur für Auswahl-Chips und kleine Marken. */
:root { --r-xs: 3px; --r-s: 6px; --r-m: 8px; --r-l: 10px; --r-xl: 12px; /* 2026-10-24 v2, Malik: „weniger rund“ (vorher 6/10/14/18/22) */ --radius: var(--r-s); --weich: cubic-bezier(.22, 1, .36, 1); }

/* Knöpfe */
.knopf, .kopf .kopf-knopf, .set-pfeil, .ton, .k-feld input, .n-zeile input, .team-dazu input, .skript textarea, .feedback textarea, .demo-url, .rechtliches a, .rechtliches button { border-radius: var(--r-s); }
.knopf, .kopf .kopf-knopf, .set-reiter button, .set-pfeil, .chip span, .ton { transition: background-color .2s var(--weich), color .2s var(--weich), border-color .2s var(--weich), box-shadow .25s var(--weich), transform .2s var(--weich); }
.knopf:hover, .kopf .kopf-knopf:hover { transform: translateY(-1px); }
.knopf:active, .kopf .kopf-knopf:active, .set-reiter button:active, .set-pfeil:active, .chip:active span, .kasten button[type="submit"]:active { transform: scale(.97); }
.knopf.voll, .kopf .kopf-knopf, .schluss .knopf { box-shadow: 0 1px 0 rgb(255 255 255 / .18) inset, 0 6px 16px -8px rgb(38 48 224 / .7); }

/* Kleine Marken und Auswahl: Leiste mit Reitern (wie bei ElevenLabs, aber kaum rund) */
.neu, .navi .neu, .plan-marke { border-radius: var(--r-xs); }
.neu-pille, .chip span, .demo-fertig { border-radius: var(--r-s); }
.zustimmung input { border-radius: 4px; }

/* Eingabe im Held: weiße Karte mit weichem Schatten auf dem Blau (Lovable, Base44) */
.held .kasten { padding: .55rem .55rem .55rem .9rem; background: #2630e0; border: 1px solid rgb(38 48 224 / .9); border-radius: var(--r-xl); box-shadow: 0 0 0 6px rgb(248 249 255 / .1), 0 30px 60px -24px rgb(5 8 60 / .75); transition: box-shadow .3s var(--weich), transform .3s var(--weich); }
.held .kasten:focus-within { border-color: #2630e0; box-shadow: 0 0 0 6px rgb(248 249 255 / .22), 0 34px 70px -24px rgb(5 8 60 / .8); }
.held .kasten input[type="text"], .held .kasten input[type="email"], .held .kasten input[type="password"] { color: #f8f9ff; caret-color: var(--akzent) !important; }
.held .kasten input::placeholder { color: rgb(248 249 255 / .42); }
.held .kasten button[type="submit"] { width: auto; min-width: 3.4rem; height: 3.4rem; padding: 0 1.1rem; gap: .5rem; display: inline-flex; align-items: center; background: var(--akzent); color: #2630e0; border-radius: var(--r-m); font-weight: 600; box-shadow: 0 8px 18px -8px rgb(38 48 224 / .9); }
.held .kasten button[type="submit"]:hover { background: var(--akzent-tief); transform: translateY(-1px); }
.held .kasten .neben { color: #f8f9ff; border-radius: var(--r-m); }
.held .kasten .neben:hover { background: var(--akzent-hell); }
.held .kasten::after { background: var(--akzent); }
.kasten { border-radius: var(--r-l); }
.kasten button[type="submit"] { border-radius: var(--r-m); }
.kasten .neben { border-radius: var(--r-m); }

/* Karten und Flächen */
.lauf, .frage, .karte, .preis-karte, .extras, .plan, .cr-tabelle, .preis-raster, .gespraech, .wk-pos, .gruppe-pos, .wk-leer, .k-credits, .entwurf, .antwort, .stufen { border-radius: var(--r-l); }
.extras, .cr-tabelle, .preis-raster { overflow: hidden; }
.kasse { border-radius: var(--r-xl); }
.zustimmung-leiste { border-radius: var(--r-l); }
.schluss-block { border-radius: var(--r-xl); }
.preis-karte, .plan { transition: transform .35s var(--weich), box-shadow .35s var(--weich), border-color .25s var(--weich); }
.preis-karte:hover, .plan:hover { transform: translateY(-3px); box-shadow: 0 24px 48px -30px rgb(16 18 46 / .45); }

/* Videos und Bilder */
.rahmen video, .set-film video, .beispiele figure, .b-rahmen, .bahn img, .ereignisse img { border-radius: var(--r-m); }
.set-film video { transition: transform .45s var(--weich), box-shadow .45s var(--weich); }
.set-film:hover video { transform: translateY(-2px); box-shadow: 0 30px 56px -30px rgb(16 18 46 / .5); }
.set-reiter button { border-radius: var(--r-m); overflow: hidden; }
.set-reiter button img { border-radius: var(--r-s) var(--r-s) 0 0; }

/* Demo im Held: Fenster wie ein App-Fenster, Ecken rund, Inhalt beschnitten */
.demo { border-radius: var(--r-xl); overflow: hidden; border-width: 1px; border-color: rgb(38 48 224 / .55); box-shadow: 0 0 0 6px rgb(248 249 255 / .06), 0 50px 90px -40px rgb(5 8 60 / .85); }
.demo-punkt { border-radius: 50%; }
.demo-film .ton, .demo-fertig { border-radius: var(--r-s); }
.demo-fertig { padding: .4rem .7rem; }

@media (prefers-reduced-motion: reduce) {
  .knopf:hover, .kopf .kopf-knopf:hover, .preis-karte:hover, .plan:hover, .set-film:hover video, .held .kasten button[type="submit"]:hover { transform: none; }
}
@media (max-width: 480px) {
}

/* Ecken (Malik 2026-10-24 spät): nicht rund, sondern abgeschrägt, eine kurze schräge Kante statt Rundung.
   corner-shape: bevel zeichnet auch die Rahmenlinie schräg (Chrome 139+). Browser ohne bevel: ganz eckig wie früher. */
@supports (corner-shape: bevel) {
  *, *::before, *::after { corner-shape: bevel; }
  .demo-punkt, .n-leiste span { corner-shape: round; }
}
@supports not (corner-shape: bevel) {
  *:not(.demo-punkt):not(.n-leiste span), *::before, *::after { border-radius: 0 !important; }
}

/* Ticket-Knöpfe (Malik 2026-10-25): eingebuchtete Ecken wie bei einer Eintrittskarte, in unseren Farben.
   corner-shape: scoop zieht auch die Rahmenlinie mit (Chrome 139+). Andere Browser: Ecken per Maske ausgestanzt. */
.knopf, .kopf .kopf-knopf, .kasten button[type="submit"], .held .kasten button[type="submit"], .chip span { --ticket: 8px; }
@supports (corner-shape: scoop) {
  .knopf, .kopf .kopf-knopf, .kasten button[type="submit"], .held .kasten button[type="submit"], .chip span { corner-shape: scoop; border-radius: var(--ticket) !important; }
}
@supports not (corner-shape: scoop) {
  .knopf, .kopf .kopf-knopf, .kasten button[type="submit"], .held .kasten button[type="submit"], .chip span {
    -webkit-mask: radial-gradient(circle at 0 0, #0000 var(--ticket), #000000 calc(var(--ticket) + .5px)) top left / 51% 51% no-repeat,
      radial-gradient(circle at 100% 0, #0000 var(--ticket), #000000 calc(var(--ticket) + .5px)) top right / 51% 51% no-repeat,
      radial-gradient(circle at 0 100%, #0000 var(--ticket), #000000 calc(var(--ticket) + .5px)) bottom left / 51% 51% no-repeat,
      radial-gradient(circle at 100% 100%, #0000 var(--ticket), #000000 calc(var(--ticket) + .5px)) bottom right / 51% 51% no-repeat;
    mask: radial-gradient(circle at 0 0, #0000 var(--ticket), #000000 calc(var(--ticket) + .5px)) top left / 51% 51% no-repeat,
      radial-gradient(circle at 100% 0, #0000 var(--ticket), #000000 calc(var(--ticket) + .5px)) top right / 51% 51% no-repeat,
      radial-gradient(circle at 0 100%, #0000 var(--ticket), #000000 calc(var(--ticket) + .5px)) bottom left / 51% 51% no-repeat,
      radial-gradient(circle at 100% 100%, #0000 var(--ticket), #000000 calc(var(--ticket) + .5px)) bottom right / 51% 51% no-repeat;
  }
}
.held .kasten button[type="submit"] { box-shadow: none; }

/* Etwas mehr Blau (Malik 2026-10-25): „How it works“ auf zartem Blau über die ganze Breite. */
.mehr > section.so { background: #1f28cc; box-shadow: 0 0 0 100vmax #1f28cc; clip-path: inset(0 -100vmax); }
.so .drei > li { border-top-color: rgb(248 249 255 / .22); }
.so .schiene li { border-top-color: rgb(248 249 255 / .18); }