/* ═══════════════════════════════════════════════════════════════
   pixify-ai.ch – Design-System
   Brand: Pixify Violett (#7C3AED) · Schrift: Outfit · Kanten: scharf
   ═══════════════════════════════════════════════════════════════ */

:root {
  --violet:      #7c3aed;
  --violet-d:    #6d28d9;
  --violet-deep: #5b21b6;
  --violet-pale: #ede9fe;
  --violet-soft: #f5f3ff;
  --tinte:   #0e0e1a;
  --text2:   #444458;
  --muted:   #8080a0;
  --bg:      #fbfbfd;
  --weiss:   #ffffff;
  --linie:   #e6e6f0;
  --linie-s: #b0b0c8;
  --gruen:   #166534;  --gruen-pale: #f0fdf4;
  --rot:     #c0392b;  --rot-pale:   #fdf0ef;
  --amber:   #b45309;  --amber-pale: #fef7ed;
  --schatten:   0 2px 8px rgba(14,14,26,.05), 0 12px 32px rgba(124,58,237,.07);
  --schatten-h: 0 4px 14px rgba(14,14,26,.08), 0 22px 48px rgba(124,58,237,.16);
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: 'Outfit', system-ui, sans-serif;
  background: var(--bg);
  color: var(--tinte);
  font-size: 16px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { color: var(--violet); text-decoration: none; }
a:hover { color: var(--violet-d); }
/* Vollflächig violette Buttons: Text bleibt bei Hover/Fokus immer weiss */
a.btn-p:hover, a.btn-p:focus-visible,
a.pb-cta:hover, a.pb-cta:focus-visible,
a.gd-btn:hover, a.gd-btn:focus-visible,
.preis-band a:hover { color: #fff; }
::selection { background: var(--violet); color: #fff; }

.wrap { max-width: 1120px; margin: 0 auto; padding: 0 24px; }

/* ─── Scroll-Reveal (JS setzt .sichtbar) ───────────────────────── */
html.js-an .reveal {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity .7s cubic-bezier(.2,.7,.3,1), transform .7s cubic-bezier(.2,.7,.3,1);
  transition-delay: var(--d, 0s);
}
.reveal.sichtbar { opacity: 1 !important; transform: none !important; }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1 !important; transform: none !important; transition: none; }
  html { scroll-behavior: auto; }
  * { animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
}

/* ─── Header ───────────────────────────────────────────────────── */
header.top {
  position: sticky; top: 0; z-index: 100;
  background: rgba(255,255,255,.86);
  backdrop-filter: blur(14px);
  border-bottom: 2px solid var(--tinte);
}
.top-innen {
  max-width: 1120px; margin: 0 auto; padding: 14px 24px;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
}
.logo-link { display: flex; align-items: center; gap: 10px; }
.logo-img { height: 30px; width: auto; }

/* ── Lebendes Logo in der Navigation ─────────────────────────────
   «pixify» als echte Outfit-Wortmarke, der Marken-Punkt exakt wie im
   WebP vermessen (Grösse .145em, Abstand .093em, Höhe .125em).
   Er atmet über den Glow; beim Überfahren zerspringt er zackig in
   vier Pixel und findet sich langsam federnd wieder. */
.logo-wort { position: relative; display: inline-block; font-weight: 800; font-size: 30px;
  letter-spacing: -.03em; color: var(--tinte); line-height: 1; }
.logo-wort .lp { position: absolute; left: calc(100% + .093em); top: .125em;
  width: .145em; height: .145em; }
.logo-wort .lp s { position: absolute; inset: 0; background: var(--violet); border-radius: .014em;
  animation: logoAtmen 3.2s ease-in-out infinite;
  transition: transform .95s cubic-bezier(.25,1.35,.45,1); }  /* Rückweg: langsam federnd */
@keyframes logoAtmen { 50% { box-shadow: 0 0 10px rgba(124,58,237,.7); } }
.logo-link:hover .lp s { transition: transform .3s cubic-bezier(.2,1.2,.4,1); }  /* Hinweg: zackig */
.logo-link:hover .lp .l1 { transform: translate(-.09em,-.09em) scale(.42); }
.logo-link:hover .lp .l2 { transform: translate(.09em,-.09em)  scale(.42); }
.logo-link:hover .lp .l3 { transform: translate(-.09em,.09em)  scale(.42); }
.logo-link:hover .lp .l4 { transform: translate(.09em,.09em)   scale(.42); }
@media (prefers-reduced-motion: reduce) { .logo-wort .lp s { animation: none; transition: none; } }
.logo-badge {
  font-size: 10px; font-weight: 800; letter-spacing: 1.6px; text-transform: uppercase;
  color: var(--violet); border: 1.5px solid var(--violet); padding: 3px 9px;
}
nav.top-nav { display: flex; align-items: center; gap: 26px; }
nav.top-nav a:not(.btn) { color: var(--text2); font-weight: 600; font-size: 15px; }
nav.top-nav a:not(.btn):hover { color: var(--tinte); }
nav.top-nav a.nav-aktiv { color: var(--violet); }

/* ── Mega-Menü «Funktionen» ──────────────────────────────────────
   Desktop: Hover/Fokus öffnet ein breites Panel (¾ Bildschirm),
   am sticky-Header verankert und im Viewport zentriert – vier
   Einträge als Karten nebeneinander, rechts die dunkle
   Feature-Karte mit Glow. Am Handy: Einträge fest ausgeklappt. */
.mm-halter { position: static; display: inline-flex; }
.mm-trigger { display: inline-flex; align-items: center; gap: 6px; }
.mm-pfeil { transition: transform .2s ease; margin-top: 1px; }
.mm-offen .mm-pfeil { transform: rotate(180deg); }
.mm-panel { position: absolute; left: 50%; top: calc(100% + 10px);
  transform: translateX(-50%) translateY(-8px);
  display: grid; grid-template-columns: repeat(3, 1fr) 300px; gap: 10px;
  width: min(76vw, 1240px); padding: 14px;
  background: var(--weiss); border: 1.5px solid var(--linie); border-radius: 18px;
  box-shadow: var(--schatten-h); opacity: 0; pointer-events: none; transition: all .22s ease; z-index: 70; }
.mm-panel::before { content: ''; position: absolute; left: 0; right: 0; top: -12px; height: 12px; }
.mm-offen .mm-panel { opacity: 1; pointer-events: auto; transform: translateX(-50%) translateY(0); }
.mm-links { display: contents; }
.mm-item { display: flex; flex-direction: column; align-items: flex-start; gap: 12px;
  padding: 18px 16px; border-radius: 14px; border: 1.5px solid transparent;
  transition: background .15s ease, border-color .15s ease, transform .15s ease; }
.mm-item:hover { background: var(--violet-pale); border-color: #ddd0ff; transform: translateY(-2px); }
.mm-icon { flex: 0 0 auto; width: 44px; height: 44px; display: grid; place-items: center; border-radius: 12px;
  background: var(--violet-pale); color: var(--violet); }
.mm-item:hover .mm-icon { background: var(--violet); color: #fff; }
.mm-item b { display: block; color: var(--tinte); font-size: 15px; margin-bottom: 3px; }
.mm-item small { display: block; color: var(--muted); font-size: 12.5px; line-height: 1.5; font-weight: 500; }
.mm-feature { position: relative; overflow: hidden; display: flex; flex-direction: column; justify-content: flex-end;
  gap: 4px; padding: 18px 16px; border-radius: 14px; color: #cfc6f2;
  background: linear-gradient(160deg, #12101f, #221646); }
.mm-f-glow { position: absolute; width: 220px; height: 220px; border-radius: 50%; right: -70px; top: -70px;
  background: radial-gradient(circle, rgba(124,58,237,.4), transparent 65%); pointer-events: none; }
.mm-f-eyebrow { font-size: 10px; letter-spacing: 2.2px; text-transform: uppercase; font-weight: 800; color: #a78bfa; }
.mm-f-zahl { font-size: 44px; font-weight: 800; letter-spacing: -.04em; line-height: 1; color: #fff; }
.mm-f-text { font-size: 12.5px; line-height: 1.5; font-weight: 500; }
.mm-f-cta { font-size: 13px; font-weight: 700; color: #fff; margin-top: 6px; }
.mm-feature:hover .mm-f-cta { text-decoration: underline; }
@media (max-width: 1150px) and (min-width: 901px) {
  .mm-panel { grid-template-columns: 1fr 1fr; width: calc(100vw - 48px); }
  .mm-item { flex-direction: row; align-items: flex-start; padding: 14px; }
  .mm-icon { width: 38px; height: 38px; }
  .mm-feature { grid-column: 1 / -1; flex-direction: row; align-items: center; gap: 18px; padding: 16px 20px; }
  .mm-f-zahl { font-size: 36px; }
  .mm-f-cta { margin: 0 0 0 auto; white-space: nowrap; }
}

/* ─── Buttons ──────────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  font-family: 'Outfit', sans-serif; font-weight: 700; font-size: 16px;
  padding: 15px 30px; border: none; cursor: pointer;
  letter-spacing: .2px; line-height: 1; white-space: nowrap;
  transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
}
.btn-p { background: var(--violet); color: #fff; box-shadow: 0 6px 20px rgba(124,58,237,.35); }
.btn-p:hover { background: var(--violet-d); color:#fff; transform: translateY(-2px); box-shadow: 0 10px 28px rgba(124,58,237,.45); }
.btn-p:active { transform: translateY(0); }
.btn-hell { background: #fff; color: var(--tinte); border: 2px solid var(--tinte); }
.btn-hell:hover { background: var(--tinte); color: #fff; transform: translateY(-2px); }
.btn-geist { background: transparent; color: #fff; border: 2px solid rgba(255,255,255,.45); }
.btn-geist:hover { border-color: #fff; color:#fff; transform: translateY(-2px); }
.btn:disabled { background: #c4b5fd; cursor: not-allowed; transform: none; box-shadow: none; }
.btn-pfeil::after { content: '→'; transition: transform .18s ease; }
.btn-pfeil:hover::after { transform: translateX(4px); }

/* ─── Hero ─────────────────────────────────────────────────────── */
.hero {
  position: relative; overflow: hidden;
  background:
    radial-gradient(1100px 520px at 85% -10%, rgba(124,58,237,.45), transparent 60%),
    radial-gradient(800px 500px at -10% 110%, rgba(91,33,182,.5), transparent 55%),
    linear-gradient(160deg, #17102b 0%, #0e0a1f 55%, #150e2e 100%);
  color: #fff;
  padding: 96px 0 110px;
}
.hero::before { /* feines Pixel-Raster */
  content: ''; position: absolute; inset: 0;
  background-image: radial-gradient(rgba(255,255,255,.10) 1px, transparent 1px);
  background-size: 26px 26px; opacity: .5; pointer-events: none;
}
.hero-grid {
  position: relative; display: grid; grid-template-columns: 1.05fr .95fr;
  gap: 56px; align-items: center;
}
.hero-eyebrow {
  display: inline-flex; align-items: center; gap: 9px;
  font-size: 12px; font-weight: 800; letter-spacing: 2.4px; text-transform: uppercase;
  color: #d9ccff; border: 1.5px solid rgba(217,204,255,.4); padding: 7px 14px; margin-bottom: 24px;
}
.hero-eyebrow .punkt { width: 7px; height: 7px; background: #34d399; border-radius: 50%;
  animation: pulsieren 1.8s ease-in-out infinite; }
@keyframes pulsieren { 0%,100%{opacity:1; transform:scale(1)} 50%{opacity:.4; transform:scale(.7)} }
.hero h1 {
  font-size: clamp(38px, 5.4vw, 60px); font-weight: 800;
  line-height: 1.06; letter-spacing: -1.6px; margin-bottom: 22px;
}
.hero h1 .verlauf {
  background: linear-gradient(92deg, #c4b5fd 0%, #a78bfa 45%, #8b5cf6 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.hero-text { font-size: 19px; color: #cfc8e6; max-width: 520px; margin-bottom: 34px; font-weight: 300; }
.hero-text strong { color: #fff; font-weight: 600; }
.hero-cta { display: flex; gap: 14px; flex-wrap: wrap; align-items: center; }
.hero-gratis {
  display: inline-flex; align-items: center; gap: 8px; margin-top: 18px;
  font-size: 14px; font-weight: 600; color: #a7f3d0;
}
.hero-gratis .durch { color: #8f86ad; text-decoration: line-through; font-weight: 400; }
.hero-punkte { display: flex; gap: 22px; margin-top: 34px; flex-wrap: wrap; }
.hero-punkt { display: flex; align-items: center; gap: 8px; font-size: 14px; color: #b7abdd; }
.hero-punkt::before { content: '✓'; color: #34d399; font-weight: 800; }

/* Browser-Mockup (baut sich per JS selbst) */
.browser {
  background: #fff; color: var(--tinte);
  border: 2px solid #0a0714;
  box-shadow: 0 30px 80px rgba(0,0,0,.55), 0 0 0 1px rgba(167,139,250,.25), 0 0 90px rgba(124,58,237,.35);
  transform: rotate(1.2deg);
  transition: transform .5s ease;
}
.browser:hover { transform: rotate(0deg) scale(1.01); }
.browser-leiste {
  display: flex; align-items: center; gap: 8px;
  background: #17102b; padding: 11px 14px; border-bottom: 2px solid #0a0714;
}
.b-knopf { width: 11px; height: 11px; border-radius: 50%; }
.browser-url {
  flex: 1; background: #241a44; color: #c4b5fd; font-size: 12px; font-weight: 600;
  padding: 5px 12px; margin-left: 8px; letter-spacing: .4px;
}
.browser-inhalt { padding: 22px; min-height: 320px; }
.bauteil { opacity: 0; transform: translateY(14px); transition: all .55s cubic-bezier(.2,.7,.3,1); }
.bauteil.da { opacity: 1; transform: none; }
.sk-hero { height: 88px; background: linear-gradient(120deg, var(--violet), var(--violet-deep));
  margin-bottom: 14px; position: relative; overflow: hidden; }
.sk-hero::after { content:''; position:absolute; inset:0;
  background: linear-gradient(100deg, transparent 30%, rgba(255,255,255,.25) 50%, transparent 70%);
  transform: translateX(-100%); animation: glanz 2.6s ease-in-out infinite 1s; }
@keyframes glanz { to { transform: translateX(100%);} }
.sk-zeile { height: 11px; background: #e8e4f4; margin-bottom: 9px; }
.sk-zeile.kurz { width: 62%; }
.sk-karten { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 16px; }
.sk-karte { height: 62px; background: var(--violet-soft); border: 1.5px solid var(--violet-pale); }
.sk-cta { height: 38px; width: 150px; background: var(--violet); margin-top: 16px; }
.baustatus {
  display: flex; align-items: center; gap: 9px; padding: 11px 14px;
  border-top: 2px solid #0a0714; background: #f6f4fc;
  font-size: 12px; color: var(--text2); font-weight: 600;
}
.baustatus .spinner { width: 13px; height: 13px; border: 2px solid var(--violet-pale);
  border-top-color: var(--violet); border-radius: 50%; animation: drehen .7s linear infinite; }
@keyframes drehen { to { transform: rotate(360deg);} }

/* ─── Marken-Streifen ──────────────────────────────────────────── */
.streifen { background: var(--tinte); color: #fff; padding: 15px 0; overflow: hidden; }
.streifen-lauf { display: flex; white-space: nowrap;
  font-size: 13px; font-weight: 700; letter-spacing: 2.6px; text-transform: uppercase;
  animation: lauf-rechts 34s linear infinite; width: max-content; will-change: transform; }
.streifen-satz { display: flex; gap: 54px; padding-right: 54px; }
.streifen:hover .streifen-lauf { animation-play-state: paused; }
/* Nahtlos: Breite = 2 identische Sätze, Verschiebung = exakt 50 % */
@keyframes lauf-rechts { from { transform: translateX(-50%); } to { transform: translateX(0); } }
@keyframes laufen { to { transform: translateX(-50%); } }
.streifen span { opacity: .85; }
.streifen b { color: #a78bfa; }

/* ─── Sektionen ────────────────────────────────────────────────── */
section.block { padding: 96px 0; }
.block-kopf { max-width: 660px; margin-bottom: 58px; }
.block-kopf.mittig { margin-left: auto; margin-right: auto; text-align: center; }
.eyebrow {
  font-size: 12px; font-weight: 800; letter-spacing: 2.6px; text-transform: uppercase;
  color: var(--violet); margin-bottom: 14px; display: flex; align-items: center; gap: 12px;
}
.block-kopf.mittig .eyebrow { justify-content: center; }
.eyebrow::before { content: ''; width: 26px; height: 2.5px; background: var(--violet); }
.block-kopf h2 { font-size: clamp(30px, 4vw, 42px); font-weight: 800; line-height: 1.12; letter-spacing: -1px; }
.block-kopf p { margin-top: 16px; font-size: 17px; color: var(--text2); font-weight: 300; }

/* Schritte */
.schritte { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.schritt {
  background: var(--weiss); border: 2px solid var(--tinte); padding: 34px 28px;
  position: relative; transition: transform .25s ease, box-shadow .25s ease;
}
.schritt:hover { transform: translateY(-6px); box-shadow: var(--schatten-h); }
.schritt-nr {
  position: absolute; top: -19px; left: 24px;
  background: var(--violet); color: #fff; font-weight: 800; font-size: 16px;
  width: 38px; height: 38px; display: grid; place-items: center;
  box-shadow: 0 6px 16px rgba(124,58,237,.4);
}
.schritt h3 { font-size: 20px; font-weight: 700; margin: 12px 0 10px; }
.schritt p { color: var(--text2); font-size: 15px; }
.schritt .dauer { display: inline-block; margin-top: 16px; font-size: 12px; font-weight: 700;
  letter-spacing: 1px; text-transform: uppercase; color: var(--violet);
  background: var(--violet-soft); border: 1.5px solid var(--violet-pale); padding: 4px 11px; }

/* Merkmale */
.merkmale { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px; background: var(--linie);
  border: 2px solid var(--tinte); }
.merkmal { background: var(--weiss); padding: 30px 26px; transition: background .25s ease; }
.merkmal:hover { background: var(--violet-soft); }
.merkmal-icon { font-size: 26px; margin-bottom: 12px; }
.merkmal h3 { font-size: 17px; font-weight: 700; margin-bottom: 7px; }
.merkmal p { font-size: 14px; color: var(--text2); }

/* ─── Preis ────────────────────────────────────────────────────── */
.preis-block { background:
  radial-gradient(900px 400px at 110% 0%, rgba(124,58,237,.14), transparent 55%),
  var(--violet-soft); border-top: 2px solid var(--tinte); border-bottom: 2px solid var(--tinte); }
.preis-karte {
  max-width: 620px; margin: 0 auto; background: var(--weiss);
  border: 2px solid var(--tinte); box-shadow: var(--schatten-h); position: relative;
}
.preis-band { background: var(--violet); color: #fff; text-align: center;
  font-size: 12px; font-weight: 800; letter-spacing: 2.4px; text-transform: uppercase; padding: 10px; }
.preis-innen { padding: 42px 44px; }
.preis-zahl { display: flex; align-items: baseline; gap: 12px; justify-content: center; margin-bottom: 4px; }
.preis-chf { font-size: 22px; font-weight: 700; color: var(--text2); }
.preis-wert { font-size: 74px; font-weight: 800; letter-spacing: -3px; line-height: 1; }
.preis-pro { font-size: 17px; color: var(--muted); font-weight: 500; }
.preis-unter { text-align: center; color: var(--text2); font-size: 15px; margin-bottom: 8px; }
.gratis-zeile {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  background: var(--gruen-pale); border: 1.5px solid var(--gruen); color: var(--gruen);
  font-weight: 700; font-size: 15px; padding: 11px 16px; margin: 18px 0 24px;
}
.gratis-zeile .durch { color: var(--muted); text-decoration: line-through; font-weight: 500; }
.preis-liste { list-style: none; margin: 0 0 30px; }
.preis-liste li { display: flex; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--linie);
  font-size: 15px; align-items: flex-start; }
.preis-liste li:last-child { border-bottom: none; }
.preis-liste .hak { color: var(--violet); font-weight: 800; flex-shrink: 0; }
.preis-hinweis { text-align: center; font-size: 12.5px; color: var(--muted); margin-top: 16px; line-height: 1.7; }

/* ─── FAQ ──────────────────────────────────────────────────────── */
.faq { max-width: 760px; margin: 0 auto; }
.faq details { border: 2px solid var(--tinte); background: var(--weiss); margin-bottom: 12px;
  transition: box-shadow .2s ease; }
.faq details[open] { box-shadow: var(--schatten); }
.faq summary { cursor: pointer; padding: 19px 22px; font-weight: 700; font-size: 16.5px;
  list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 14px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: '+'; font-size: 24px; font-weight: 400; color: var(--violet);
  transition: transform .25s ease; line-height: 1; }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq .antwort { padding: 0 22px 20px; color: var(--text2); font-size: 15px; }

/* ─── Abschluss-CTA ────────────────────────────────────────────── */
.schluss {
  /* Heller Gegenpol zum dunklen Kino-Footer: Die Sektion bleibt licht,
     ein feiner Violett-Hauch von unten leitet zur Licht-Kante des
     Footers über – so verschmelzen die beiden Abschlüsse nicht. */
  background:
    radial-gradient(720px 320px at 50% 118%, rgba(124,58,237,.10), transparent 62%),
    var(--bg);
  color: var(--tinte); text-align: center; padding: 100px 24px 92px;
}
.schluss h2 { font-size: clamp(30px, 4.4vw, 46px); font-weight: 800; letter-spacing: -1.2px; margin-bottom: 16px; }
.schluss h2 .verlauf { background: linear-gradient(92deg, #8b5cf6 0%, #7c3aed 45%, #5b21b6 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  display: inline-block; line-height: 1.42; margin: -.2em 0; }
.schluss p { color: var(--text2); font-size: 18px; margin-bottom: 34px; font-weight: 400; }

/* ─── Footer ───────────────────────────────────────────────────── */
/* ── Fussbereich v2: Kino-Bühne zum Abschluss ─────────────────────
   Dunkler Verlauf wie sb-dunkel, Violett-Lichtkante als Übergang,
   ruhig atmender Glow, Abschluss-CTA, Eyebrow-Spaltentitel. */
footer.fuss { position: relative; overflow: hidden; color: #9a93b8; font-size: 14px;
  padding: 0 0 26px; background: linear-gradient(165deg, #0c0a16 0%, #191038 55%, #120e22 100%); }
.fz-kante { height: 1.5px; background: linear-gradient(90deg, transparent, #7c3aed 30%, #a78bfa 50%, #7c3aed 70%, transparent); opacity: .8; }
.fz-glow { position: absolute; width: 640px; height: 640px; border-radius: 50%; left: 50%; top: -320px;
  transform: translateX(-50%); background: radial-gradient(circle, rgba(124,58,237,.22), transparent 65%);
  pointer-events: none; animation: fzAtmen 9s ease-in-out infinite alternate; }
@keyframes fzAtmen { from { opacity: .6; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .fz-glow { animation: none; } }
.fz-innen { position: relative; }
/* Google-Abzeichen im Footer: mit Luft zur Licht-Kante und zum Grid,
   statt auf der Naht zu kleben. */
.fuss .gtrust-halter { margin: 36px 0 8px; }
.fz-grid { display: grid; grid-template-columns: 1.35fr 1fr 1fr 1fr; gap: 34px;
  padding-top: 26px; margin-bottom: 34px; }
.fz-slogan { color: #d9d2f2; font-weight: 700; margin: 12px 0 10px; }
.fz-adresse { line-height: 1.75; margin-bottom: 16px; }
.fz-uid { opacity: .65; font-size: 13px; }
.fz-titel { font-size: 10.5px; letter-spacing: 2.4px; text-transform: uppercase; font-weight: 800;
  color: #a78bfa; margin-bottom: 12px; }
.fz-spalte p { margin-bottom: 8px; }
.fz-unten { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; font-size: 13px;
  padding-top: 22px; border-top: 1px solid rgba(167,139,250,.14); color: #7f77a3; }
.fz-heimat { font-style: normal; color: #9a93b8; }
.fuss-logo { height: 26px; filter: brightness(0) invert(1); opacity: .95; }
.fuss a { color: #c9c2e4; }
.fuss a:hover { color: #fff; }
@media (max-width: 900px) { .fz-grid { grid-template-columns: 1fr 1fr; gap: 26px; } }
@media (max-width: 560px) { .fz-grid { grid-template-columns: 1fr 1fr; gap: 24px 20px; }
  .fz-marke { grid-column: 1 / -1; }
}

/* ── Mobile-Härtung (Audit): lange CTAs dürfen umbrechen, lange
   Tokens (URLs, E-Mails, Domains) brechen statt zu überlaufen. */
@media (max-width: 480px) {
  .btn { max-width: 100%; white-space: normal; }
  .wrap, .kh-inhalt { overflow-wrap: break-word; }
}

/* ═══ WIZARD (bestellen.php) ═══════════════════════════════════ */
.wizard-seite { min-height: 100vh; display: flex; flex-direction: column; background: var(--bg); }
.wizard-main { flex: 1; max-width: 880px; width: 100%; margin: 0 auto; padding: 40px 24px 90px; }

.fortschritt { display: flex; gap: 6px; margin-bottom: 40px; }
.f-schritt { flex: 1; text-align: center; position: relative; }
.f-balken { height: 5px; background: var(--linie); transition: background .4s ease; }
.f-schritt.aktiv .f-balken, .f-schritt.fertig .f-balken { background: var(--violet); }
.f-label { font-size: 10.5px; font-weight: 700; letter-spacing: .6px; text-transform: uppercase;
  color: var(--muted); margin-top: 7px; display: block; }
.f-schritt.aktiv .f-label { color: var(--violet); }
.f-schritt.fertig .f-label { color: var(--tinte); }

.schritt-panel { display: none; animation: einblenden .45s cubic-bezier(.2,.7,.3,1); }
.schritt-panel.aktiv { display: block; }
@keyframes einblenden { from { opacity: 0; transform: translateY(16px);} to { opacity: 1; transform: none;} }

.schritt-panel h2 { font-size: clamp(26px, 3.4vw, 34px); font-weight: 800; letter-spacing: -.8px; margin-bottom: 8px; }
.schritt-panel .untertitel { color: var(--text2); margin-bottom: 32px; font-size: 16px; font-weight: 300; }

.feld { margin-bottom: 20px; }
.feld label { display: block; font-size: 12px; font-weight: 700; letter-spacing: 1px;
  text-transform: uppercase; color: var(--text2); margin-bottom: 7px; }
.feld input[type=text], .feld input[type=email], .feld input[type=tel], .feld input[type=url], .ex-feld input,
.feld select, .feld textarea {
  width: 100%; border: 2px solid var(--linie); background: var(--weiss);
  font-family: 'Outfit', sans-serif; font-size: 16px; padding: 13px 15px;
  outline: none; transition: border-color .18s ease, box-shadow .18s ease; border-radius: 0;
  color: var(--tinte);
}
.feld input:focus, .feld select:focus, .feld textarea:focus {
  border-color: var(--violet); box-shadow: 0 0 0 3px var(--violet-pale);
}
.feld textarea { resize: vertical; min-height: 108px; line-height: 1.6; }
.feld .hinweis { font-size: 12.5px; color: var(--muted); margin-top: 6px; }
.feld-reihe { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.feld-reihe-3 { display: grid; grid-template-columns: 2fr 100px 1.4fr; gap: 16px; }

/* Öffnungszeiten-Tabelle */
.oz-box { border: 2px solid var(--linie); background: var(--weiss); }
.oz-zeile { display: grid; grid-template-columns: 52px 1fr 26px 1fr; gap: 10px;
  align-items: center; padding: 9px 14px; border-bottom: 1px solid var(--linie); }
.oz-zeile:last-of-type { border-bottom: none; }
.oz-zeile.zu { background: #fafafc; }
.oz-zeile.zu select { color: var(--muted); }
.oz-tag { font-weight: 700; font-size: 14px; }
.oz-zeile select { width: 100%; border: 1.5px solid var(--linie); background: #fff;
  font-family: 'Outfit', sans-serif; font-size: 14px; padding: 8px 10px; border-radius: 0; outline: none; }
.oz-zeile select:focus { border-color: var(--violet); }
.oz-bis-txt { text-align: center; color: var(--muted); font-size: 13px; }
.oz-fuss { display: flex; justify-content: space-between; align-items: center; gap: 12px;
  padding: 10px 14px; background: var(--violet-soft); border-top: 2px solid var(--linie); flex-wrap: wrap; }
.oz-uebernehmen { background: none; border: 1.5px solid var(--violet); color: var(--violet);
  font-family: 'Outfit', sans-serif; font-size: 12.5px; font-weight: 700; padding: 7px 12px;
  cursor: pointer; transition: all .15s ease; }
.oz-uebernehmen:hover { background: var(--violet); color: #fff; }
.oz-info { font-size: 12px; color: var(--muted); }

/* Domain-Check */
.domain-eingabe { display: flex; border: 2px solid var(--linie); background: var(--weiss);
  transition: border-color .18s ease, box-shadow .18s ease; }
.domain-eingabe:focus-within { border-color: var(--violet); box-shadow: 0 0 0 3px var(--violet-pale); }
.domain-eingabe input { flex: 1; border: none; outline: none; font-family: 'Outfit', sans-serif;
  font-size: 19px; font-weight: 600; padding: 16px 18px; letter-spacing: .3px; min-width: 0; }
.domain-tld { display: flex; align-items: center; padding: 0 20px; background: var(--tinte);
  color: #fff; font-weight: 800; font-size: 19px; }
.domain-status { margin-top: 14px; padding: 15px 17px; font-size: 15px; font-weight: 600;
  display: none; border: 2px solid; animation: einblenden .3s ease; }
.domain-status.frei { display: block; background: var(--gruen-pale); color: var(--gruen); border-color: var(--gruen); }
.domain-status.belegt { display: block; background: var(--rot-pale); color: var(--rot); border-color: var(--rot); }
.domain-status.pruefe { display: block; background: var(--violet-soft); color: var(--violet-d); border-color: var(--violet); }

/* Branchen-Vorlagen */
.vorlagen-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.vorlage-karte { border: 2px solid var(--linie); background: var(--weiss); cursor: pointer;
  transition: transform .22s ease, border-color .22s ease, box-shadow .22s ease; position: relative; }
.vorlage-karte:hover { transform: translateY(-5px); border-color: var(--linie-s); box-shadow: var(--schatten); }
/* Der Reveal-Fix (.reveal.sichtbar { transform:none !important }) frisst den
   Hover-Lift auf allen Karten. Diese Regel holt ihn zurück: Spezifität 0-4-0
   schlägt das !important der 0-2-0-Regel. Nur bei erwünschter Bewegung. */
@media (prefers-reduced-motion: no-preference) {
  .vorlage-karte.reveal.sichtbar:hover { transform: translateY(-5px) !important; }
}
.vorlage-karte.gewaehlt { border-color: var(--violet); box-shadow: 0 0 0 3px var(--violet-pale), var(--schatten-h); }
.vorlage-karte.gewaehlt::after { content: '✓'; position: absolute; top: 10px; right: 10px;
  background: var(--violet); color: #fff; width: 27px; height: 27px; display: grid;
  place-items: center; font-weight: 800; font-size: 14px; box-shadow: 0 4px 10px rgba(124,58,237,.45); }
.v-mockup { height: 132px; padding: 13px; overflow: hidden; position: relative; }
.v-balken { height: 7px; margin-bottom: 6px; opacity: .92; }
.v-hero { height: 34px; margin-bottom: 9px; }
.v-spalten { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 6px; }
.v-spalte { height: 26px; opacity: .55; }
.v-knopf { height: 13px; width: 46%; margin-top: 9px; }
.v-info { padding: 13px 15px; border-top: 2px solid var(--linie); }
.v-name { font-weight: 800; font-size: 15.5px; }
.v-stil { font-size: 12.5px; color: var(--muted); margin-top: 1px; }

/* Upload */
.upload-zone { border: 2px dashed var(--linie-s); background: var(--weiss); padding: 38px 22px;
  text-align: center; cursor: pointer; transition: all .18s ease; }
.upload-zone:hover, .upload-zone.drag { border-color: var(--violet); background: var(--violet-soft); }
.upload-zone .u-icon { font-size: 30px; margin-bottom: 10px; }
.upload-zone p { color: var(--text2); font-size: 15px; }
.upload-zone .u-klein { font-size: 12.5px; color: var(--muted); margin-top: 5px; }
.upload-liste { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 14px; }
.upload-kachel { position: relative; width: 88px; height: 88px; border: 2px solid var(--linie);
  overflow: hidden; background: #fff; }
.upload-kachel img { width: 100%; height: 100%; object-fit: cover; }
.upload-entfernen { position: absolute; top: 3px; right: 3px; background: var(--tinte); color: #fff;
  border: none; width: 21px; height: 21px; font-size: 12px; cursor: pointer; line-height: 1; }

/* WHOIS / Umschalter */
.umschalter { display: flex; border: 2px solid var(--tinte); width: max-content; margin-bottom: 26px; }
.umschalter button { font-family: 'Outfit', sans-serif; font-size: 14.5px; font-weight: 700;
  padding: 11px 22px; background: var(--weiss); border: none; cursor: pointer; color: var(--text2);
  transition: all .15s ease; }
.umschalter button.aktiv { background: var(--violet); color: #fff; }
.info-kasten { background: var(--violet-soft); border-left: 3px solid var(--violet);
  padding: 13px 16px; font-size: 13.5px; color: var(--violet-deep); margin-bottom: 24px; line-height: 1.6; }

/* Übersicht */
.zusammenfassung { border: 2px solid var(--tinte); background: var(--weiss); }
.z-zeile { display: flex; justify-content: space-between; gap: 18px; padding: 13px 18px;
  border-bottom: 1px solid var(--linie); font-size: 14.5px; }
.z-zeile:last-child { border-bottom: none; }
.z-key { color: var(--muted); font-weight: 600; flex-shrink: 0; }
.z-wert { text-align: right; font-weight: 600; word-break: break-word; }
.agb-box { margin: 24px 0; display: flex; gap: 12px; align-items: flex-start;
  background: var(--weiss); border: 2px solid var(--linie); padding: 16px 18px; }
.agb-box input { margin-top: 4px; width: 17px; height: 17px; accent-color: var(--violet); flex-shrink: 0; }
.agb-box label { font-size: 13.5px; color: var(--text2); line-height: 1.65; }

.wizard-nav { display: flex; justify-content: space-between; gap: 14px; margin-top: 38px; }
.fehlerbox { display: none; background: var(--rot-pale); border: 2px solid var(--rot); color: var(--rot);
  padding: 13px 16px; font-size: 14px; font-weight: 600; margin-bottom: 18px; }
.fehlerbox.zeigen { display: block; animation: einblenden .3s ease; }

/* Preisleiste unten im Wizard */
.preis-leiste { position: sticky; bottom: 0; z-index: 60; background: rgba(255,255,255,.95);
  transition: transform .28s ease, opacity .28s ease; }
/* iOS klebt sticky/fixed-Leisten bei offener Tastatur OBEN auf die Tastatur –
   mitten ins Formular. Solange getippt wird, gleitet die Leiste darum weg. */
html.tastatur-offen .preis-leiste { transform: translateY(120%); opacity: 0; pointer-events: none; }
.preis-leiste { 
  backdrop-filter: blur(10px); border-top: 2px solid var(--tinte); padding: 13px 24px;
  display: flex; justify-content: center; gap: 10px; align-items: baseline;
  font-size: 14px; color: var(--text2); flex-wrap: wrap; }
.preis-leiste b { color: var(--tinte); font-size: 17px; }
.preis-leiste .gratis { color: var(--gruen); font-weight: 700; }
.preis-leiste .durch { text-decoration: line-through; color: var(--muted); }

/* Danke / Kündigen gemeinsame Karten */
.solo-karte { max-width: 640px; margin: 60px auto; background: var(--weiss);
  border: 2px solid var(--tinte); box-shadow: var(--schatten-h); padding: 44px 42px; }
.solo-karte h1 { font-size: 30px; font-weight: 800; letter-spacing: -.6px; margin-bottom: 10px; }
.solo-karte .gross-icon { font-size: 44px; margin-bottom: 16px; }
.zeitachse { margin: 26px 0; }
.za-punkt { display: flex; gap: 14px; padding: 11px 0; align-items: flex-start; }
.za-dot { width: 11px; height: 11px; background: var(--violet); margin-top: 6px; flex-shrink: 0; }
.za-dot.grau { background: var(--linie-s); }
.za-punkt p { font-size: 14.5px; color: var(--text2); }
.za-punkt b { color: var(--tinte); }

/* ─── Responsiv ────────────────────────────────────────────────── */
@media (max-width: 900px) {
  .hero { padding: 64px 0 76px; }
  .hero-grid { grid-template-columns: 1fr; gap: 44px; }
  .browser { transform: none; }
  .schritte, .merkmale, .vorlagen-grid { grid-template-columns: 1fr; }
  .merkmale { grid-template-columns: 1fr 1fr; }
  section.block { padding: 64px 0; }
  .px-burger { display: inline-flex; }
  nav.top-nav { position: fixed; left: 16px; right: 16px; top: 74px; z-index: 60;
    background: var(--weiss); border: 1.5px solid var(--linie); border-radius: 18px;
    box-shadow: var(--schatten-h);
    flex-direction: column; align-items: stretch; gap: 0; padding: 10px 20px 20px;
    transform: translateY(-14px); opacity: 0; pointer-events: none; visibility: hidden;
    transition: transform .22s ease, opacity .22s ease, visibility .22s ease; }
  body.nav-offen nav.top-nav { transform: translateY(0); opacity: 1; pointer-events: auto; visibility: visible; }
  nav.top-nav a:not(.btn) { display: block; padding: 13px 2px; font-size: 16px; }
  nav.top-nav a:not(.btn) + a:not(.btn) { border-top: 1px solid var(--linie); }
  nav.top-nav .btn { margin-top: 14px; text-align: center; }
  /* Mega-Menü am Handy: Halter wird normaler Block, Trigger führt zur
     Übersicht, die Untereinträge stehen fest ausgeklappt darunter. */
  .mm-halter { display: block; }
  .mm-pfeil { display: none; }
  .mm-trigger { display: block; padding: 13px 2px; font-size: 16px; }
  /* Klickbar erst, wenn das Burger-Menü offen ist: pointer-events:auto am
     Kind überschreibt das none der zugeklappten Nav – das Panel lag sonst
     als unsichtbare Klickfalle über der Startseite (Tap → /terminbuchung). */
  .mm-panel { position: static; transform: none; opacity: 1; pointer-events: none;
    display: none; width: auto; padding: 0; border: 0; box-shadow: none;
    background: transparent; }
  body.nav-offen nav.top-nav.mm-ebene2 .mm-panel { display: block; pointer-events: auto; }
  /* Sicherheitsnetz: Desktop-Zustände dürfen mobil nie schieben oder zeigen */
  .mm-offen .mm-panel { transform: none; }
  nav.top-nav .mm-feature { display: none !important; }
  /* Ebene 2: nur Unterseiten + Zurück – Hauptpunkte und Trigger verschwinden */
  nav.top-nav.mm-ebene2 > *:not(.mm-halter) { display: none !important; }
  nav.top-nav.mm-ebene2 .mm-trigger { display: none; }
  .mm-feature { display: none; }
  .mm-trigger { position: relative; }
  .mm-trigger::after { content: '›'; position: absolute; right: 4px; top: 50%;
    transform: translateY(-54%); font-size: 22px; font-weight: 600; color: var(--muted); }
  nav.top-nav.mm-ebene2 .mm-zurueck { display: block; width: 100%; text-align: left; background: none;
    border: 0; border-bottom: 1px solid var(--linie); cursor: pointer;
    font: 700 16px 'Outfit', sans-serif; color: var(--violet); padding: 13px 2px; }
  .mm-links { display: block; }
  .mm-item { padding: 9px 2px; gap: 10px; border-top: 1px solid var(--linie); border-radius: 0; }
  .mm-item:hover { background: transparent; }
  .mm-icon { flex: 0 0 30px; height: 30px; border-radius: 8px; }
  .mm-icon svg { width: 15px; height: 15px; }
  .mm-item b { font-size: 15px; }
  .mm-item small { display: none; }
  .mm-feature { display: none; }
  .mm-halter + a:not(.btn) { border-top: 1px solid var(--linie); }
  .feld-reihe, .feld-reihe-3 { grid-template-columns: 1fr; }
  .preis-innen { padding: 32px 24px; }
  .preis-wert { font-size: 58px; }
}
@media (max-width: 560px) {
  .merkmale { grid-template-columns: 1fr; }
  .oz-zeile { grid-template-columns: 44px 1fr 18px 1fr; gap: 6px; padding: 8px 10px; }
  .f-label { display: none; }
  .wizard-nav { flex-direction: column-reverse; }
  .wizard-nav .btn { width: 100%; }
}

/* Feld-Fehler (z. B. Kündigungsformular) */
.feld.ungueltig input { border-color: var(--rot); box-shadow: 0 0 0 3px var(--rot-pale); }
.feld .feld-fehler { display: none; font-size: 12.5px; color: var(--rot); margin-top: 6px; font-weight: 600; }
.feld.ungueltig .feld-fehler { display: block; }
.btn-rot { background: var(--rot); color: #fff; }
.btn-rot:hover { background: #a83224; color: #fff; transform: translateY(-2px); }

/* ─── Kunden-Panel ─────────────────────────────────────────────── */
.k-abschnitt { background: var(--weiss); border: 2px solid var(--tinte);
  padding: 26px 26px 24px; margin-bottom: 22px; }
.k-abschnitt h3 { font-size: 17px; font-weight: 800; letter-spacing: -.2px;
  margin-bottom: 18px; display: flex; align-items: center; gap: 10px; }
.k-zaehler { font-size: 12px; font-weight: 700; color: var(--muted); }
.leistung-zeile { display: grid; grid-template-columns: 1fr 1.5fr 38px; gap: 10px;
  margin-bottom: 10px; align-items: center; }
.leistung-zeile input { border: 2px solid var(--linie); background: var(--weiss);
  font-family: 'Outfit', sans-serif; font-size: 14.5px; padding: 10px 12px;
  outline: none; border-radius: 0; width: 100%; }
.leistung-zeile input:focus { border-color: var(--violet); }
.l-weg { border: 2px solid var(--linie); background: var(--weiss); color: var(--muted);
  font-size: 14px; cursor: pointer; height: 100%; transition: all .15s ease; }
.l-weg:hover { border-color: var(--rot); color: var(--rot); }
@media (max-width: 560px) { .leistung-zeile { grid-template-columns: 1fr 38px; }
  .leistung-zeile .l-text { grid-column: 1 / -1; } }

/* ─── «Wer dahinter steckt» ────────────────────────────────────── */
.person-grid { display: grid; grid-template-columns: 380px 1fr; gap: 56px; align-items: center; }
.person-foto { position: relative; }
.person-foto::before { content: ''; position: absolute; inset: 18px -18px -18px 18px;
  background: var(--violet); z-index: 0; }
.person-foto img { position: relative; z-index: 1; width: 100%; aspect-ratio: 4/5;
  object-fit: cover; border: 2px solid var(--tinte); background: var(--violet-soft); }
.person-name { display: inline-block; margin-top: 18px; background: var(--tinte); color: #fff;
  font-weight: 700; font-size: 14px; padding: 9px 16px; position: relative; z-index: 1; }
.person-name b { color: #a78bfa; font-weight: 800; }
.person-text p { color: var(--text2); font-size: 16.5px; margin-bottom: 16px; }
.person-text p:first-of-type { font-size: 18px; color: var(--tinte); }
.person-punkte { list-style: none; margin: 22px 0 26px; }
.person-punkte li { display: flex; gap: 11px; padding: 8px 0; font-size: 15px; align-items: flex-start; }
.person-punkte li::before { content: '✓'; color: var(--violet); font-weight: 800; flex-shrink: 0; }
@media (max-width: 900px) {
  .person-grid { grid-template-columns: 1fr; gap: 40px; }
  .person-foto { max-width: 340px; }
}

/* ═══════════════════════════════════════════════════════════════
   WOW-UPGRADE – Sektionen, Kacheln, Animationen, Foto-Bühne
   (überschreibt gezielt frühere Regeln)
   ═══════════════════════════════════════════════════════════════ */

/* Reveal-Varianten (Richtung/Zoom) */
html.js-an .reveal.reveal-links  { transform: translateX(-36px); }
html.js-an .reveal.reveal-rechts { transform: translateX(36px); }
html.js-an .reveal.reveal-zoom   { transform: scale(.93) translateY(14px); }
.reveal.sichtbar { transform: none; }

/* Eyebrow-Linie wächst beim Einblenden */
.reveal .eyebrow::before, .eyebrow.reveal::before {
  transform: scaleX(0); transform-origin: left;
  transition: transform .7s cubic-bezier(.2,.7,.3,1) .25s;
}
.reveal.sichtbar .eyebrow::before, .eyebrow.reveal.sichtbar::before { transform: scaleX(1); }

/* Schwebende Pixel-Deko (Markenelement «Von Pixel zu Produkt») */
section.block, .schluss { position: relative; }
section.block .wrap, .schluss > * { position: relative; z-index: 1; }
.pixel-deko { position: absolute; background: var(--violet); opacity: .13;
  pointer-events: none; z-index: 0; animation: schweben 7s ease-in-out infinite; }
@keyframes schweben { 0%,100% { transform: translateY(0) rotate(0deg); }
  50% { transform: translateY(-16px) rotate(10deg); } }

/* Button-Glanz */
.btn-p { position: relative; overflow: hidden; }
.btn-p::before { content: ''; position: absolute; inset: 0;
  background: linear-gradient(100deg, transparent 30%, rgba(255,255,255,.4) 50%, transparent 70%);
  transform: translateX(-130%); transition: transform .55s ease; }
.btn-p:hover::before { transform: translateX(130%); }

/* ─── Zahlen-Leiste (Count-up) ─────────────────────────────────── */
.zahlen { background: var(--weiss); border-bottom: 2px solid var(--tinte); }
.zahlen-grid { display: grid; grid-template-columns: repeat(4, 1fr); padding: 38px 24px; }
.zahl { text-align: center; padding: 6px 18px; border-right: 2px solid var(--linie); }
.zahl:last-child { border-right: none; }
.zahl b { display: block; font-size: clamp(34px, 4vw, 48px); font-weight: 800;
  letter-spacing: -1.5px; line-height: 1.05; font-variant-numeric: tabular-nums;
  background: linear-gradient(120deg, var(--violet) 20%, var(--violet-deep));
  -webkit-background-clip: text; background-clip: text; color: transparent; }
.zahl span { display: block; font-size: 13.5px; color: var(--muted); font-weight: 600; margin-top: 6px; }
@media (max-width: 900px) {
  .zahlen-grid { grid-template-columns: 1fr 1fr; row-gap: 26px; }
  .zahl:nth-child(2) { border-right: none; }
}
@media (max-width: 560px) { .zahl { border-right: none; padding: 6px 8px; } }

/* ─── Schritte: Verbindungslinie + Ecken-Akzent ────────────────── */
.schritte { position: relative; }
.schritte::before { content: ''; position: absolute; top: 0; left: 9%; right: 9%; height: 2px;
  background: repeating-linear-gradient(90deg, var(--violet) 0 12px, transparent 12px 24px);
  opacity: .45; }
.schritt::after { content: ''; position: absolute; top: 0; right: 0;
  border-style: solid; border-width: 0 26px 26px 0;
  border-color: transparent var(--violet-pale) transparent transparent;
  transition: border-width .28s ease, border-color .28s ease; }
.schritt:hover::after { border-width: 0 44px 44px 0;
  border-color: transparent var(--violet) transparent transparent; }
.schritt:hover .schritt-nr { animation: pochen .9s ease-in-out infinite; }
@keyframes pochen { 0%,100% { box-shadow: 0 6px 16px rgba(124,58,237,.4); }
  50% { box-shadow: 0 6px 16px rgba(124,58,237,.4), 0 0 0 9px rgba(124,58,237,.14); } }
@media (max-width: 900px) { .schritte::before { content: none; } }

/* ─── Merkmale: Kacheln mit Violet-Fill-Hover ──────────────────── */
.merkmale { gap: 18px; background: none; border: none; }
.merkmal { position: relative; border: 2px solid var(--tinte); overflow: hidden;
  transition: transform .3s ease, box-shadow .3s ease; }
.merkmal::before { content: ''; position: absolute; inset: 0; z-index: 0;
  background: linear-gradient(135deg, var(--violet) 0%, var(--violet-deep) 100%);
  transform: translateY(101%); transition: transform .38s cubic-bezier(.2,.7,.3,1); }
.merkmal:hover { transform: translateY(-6px); box-shadow: var(--schatten-h); background: #fff; }
.merkmal:hover::before { transform: translateY(0); }
.merkmal > * { position: relative; z-index: 1; }
.merkmal h3, .merkmal p { transition: color .3s ease; }
.merkmal:hover h3 { color: #fff; }
.merkmal:hover p { color: rgba(255,255,255,.9); }
.merkmal-icon { width: 54px; height: 54px; display: grid; place-items: center;
  background: var(--violet-soft); border: 2px solid var(--violet-pale); font-size: 25px;
  margin-bottom: 14px; transition: transform .35s cubic-bezier(.2,.7,.3,1), background .3s ease; }
.merkmal:hover .merkmal-icon { background: #fff; transform: rotate(-8deg) scale(1.12); }

/* ─── Preis-Karte: scharfer Akzent statt Weichzeichner ─────────── */
.preis-karte { transition: transform .3s ease, box-shadow .3s ease; }
.preis-karte:hover { transform: translateY(-5px);
  box-shadow: 0 6px 18px rgba(14,14,26,.1), 0 30px 60px rgba(124,58,237,.22); }
.preis-band { position: relative; overflow: hidden; }
.preis-band::after { content: ''; position: absolute; inset: 0;
  background: linear-gradient(100deg, transparent 35%, rgba(255,255,255,.35) 50%, transparent 65%);
  transform: translateX(-130%); animation: bandGlanz 5.5s ease-in-out infinite; }
@keyframes bandGlanz { 0%, 62% { transform: translateX(-130%); } 82%, 100% { transform: translateX(130%); } }
.geschenk { display: inline-block; }
.sichtbar .geschenk { animation: huepfen 2.4s ease-in-out .5s 2; }
@keyframes huepfen { 0%, 100% { transform: translateY(0) rotate(0); }
  10% { transform: translateY(-6px) rotate(-9deg); }
  20% { transform: translateY(0) rotate(7deg); }
  30% { transform: translateY(-2px) rotate(0); } }
.preis-liste li { transition: transform .2s ease; }
.preis-liste li:hover { transform: translateX(6px); }

/* ─── FAQ: lebendiger ──────────────────────────────────────────── */
.faq details { position: relative; transition: box-shadow .25s ease, transform .25s ease, border-color .25s ease; }
.faq details:hover { border-color: var(--violet); transform: translateX(5px); }
.faq details[open] { border-color: var(--violet); box-shadow: var(--schatten-h); }
.faq details[open]::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0;
  width: 4px; background: var(--violet); }
.faq .antwort { animation: einblenden .35s ease; }

/* ─── Foto-Bühne «Wer dahinter steckt» ─────────────────────────── */
.person-foto::before { content: none; }                 /* alter Versatz-Block weg */
.person-foto img { border: none; aspect-ratio: auto; background: transparent; }
.person-foto { position: relative; }
.person-buehne { position: relative; border: 2px solid var(--tinte);
  background:
    radial-gradient(rgba(124,58,237,.16) 1.5px, transparent 1.5px) 0 0 / 22px 22px,
    linear-gradient(180deg, var(--violet-pale) 0%, #ffffff 78%);
  box-shadow: var(--schatten-h);
  padding: 30px 30px 0; overflow: hidden;
  display: flex; justify-content: center; align-items: flex-end; }
.person-buehne img { width: 100%; display: block; aspect-ratio: 4/5; object-fit: cover;
  object-position: top center; position: relative; z-index: 1;
  filter: drop-shadow(0 18px 28px rgba(14,14,26,.22));
  -webkit-mask-image: linear-gradient(180deg, #000 88%, transparent 100%);
          mask-image: linear-gradient(180deg, #000 88%, transparent 100%); }
.person-buehne .person-name { position: absolute; left: 16px; bottom: 16px; margin: 0;
  z-index: 2; box-shadow: 0 10px 24px rgba(14,14,26,.3); }
.schwebe-chip { position: absolute; z-index: 3; background: #fff; border: 2px solid var(--tinte);
  font-weight: 700; font-size: 13px; padding: 9px 14px; white-space: nowrap;
  box-shadow: var(--schatten-h); animation: schwebenChip 5s ease-in-out infinite; }
.schwebe-chip.chip-a { top: 22px; right: -22px; }
.schwebe-chip.chip-b { bottom: 64px; left: -24px; animation-delay: 1.4s; animation-duration: 6s;
  background: var(--violet); color: #fff; border-color: var(--violet-deep); }
@keyframes schwebenChip { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-11px); } }
@media (max-width: 900px) {
  .schwebe-chip.chip-a { right: 6px; }
  .schwebe-chip.chip-b { left: 6px; }
  .person-buehne { padding: 22px 22px 0; }
}

/* ─── Schluss-CTA: Verlaufs-Wort ───────────────────────────────── */
.schluss .verlauf { background: linear-gradient(92deg, #c4b5fd 0%, #a78bfa 45%, #8b5cf6 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent; }

/* ─── Reduzierte Bewegung: alles Neue ebenfalls still ──────────── */
@media (prefers-reduced-motion: reduce) {
  .reveal, .reveal.reveal-links, .reveal.reveal-rechts, .reveal.reveal-zoom { transform: none !important; opacity: 1 !important; transition: none; }
  .pixel-deko, .schwebe-chip, .geschenk, .preis-band::after,
  .schritt:hover .schritt-nr { animation: none; }
  .reveal .eyebrow::before, .eyebrow.reveal::before { transform: scaleX(1); transition: none; }
  .faq details::details-content { transition: none; }
}

/* ─── Pixel-Art-Grafiken (handgebaut – «Von Pixel zu Produkt») ──── */
.merkmal-icon { color: var(--violet); }
.merkmal-icon svg { width: 28px; height: 28px; display: block; }
.pix-ak { fill: var(--tinte); }
.merkmal:hover .pix-ak { fill: var(--violet-deep); }
.schritt-illu { color: var(--violet); margin: 10px 0 2px; }
.schritt-illu svg { width: 58px; height: 58px; display: block; }
.pix-hell { fill: var(--violet-pale); }
.schluss-illu { display: flex; justify-content: center; margin-bottom: 20px;
  color: #a78bfa; animation: schweben 6s ease-in-out infinite; }
.schluss-illu svg { width: 78px; height: 78px; }
.schluss-illu .pix-ak { fill: #4c3a86; }
.schluss-illu .pix-hell { fill: #2a1e52; }

/* ─── Mittelbereich: dunkle Ablauf-Sektion + harte Versatz-Schatten ── */
.block-dunkel { background: linear-gradient(160deg, #171028 0%, #0e0a1f 55%, #151030 100%);
  border-top: 2px solid var(--tinte); border-bottom: 2px solid var(--tinte); }
.block-dunkel .block-kopf h2 { color: #fff; }
.block-dunkel .block-kopf p { color: #b7abdd; }
.block-dunkel .eyebrow { color: #a78bfa; }
.block-dunkel h2, .block-dunkel h3 { color: #fff; }
.block-dunkel p, .block-dunkel .lead, .block-dunkel li { color: #c9bfe8; }
.block-dunkel .eyebrow::before { background: #a78bfa; }
.block-dunkel .pixel-deko { background: #a78bfa; opacity: .3; }
.block-dunkel .schritte::before {
  background: repeating-linear-gradient(90deg, #a78bfa 0 12px, transparent 12px 24px); opacity: .55; }

.schritt { border-color: #0a0714; box-shadow: 9px 9px 0 var(--violet);
  transition: transform .25s ease, box-shadow .25s ease; }
.schritt:hover { transform: translate(-4px, -4px); box-shadow: 15px 15px 0 var(--violet); }
.schritt h3 { font-size: 21px; }
.schritt-illu svg { width: 66px; height: 66px; }

.merkmal { box-shadow: 6px 6px 0 var(--violet-pale); }
.merkmal:hover { transform: translate(-4px, -4px); box-shadow: 11px 11px 0 var(--violet-deep); background: #fff; }
.merkmal-icon { width: 64px; height: 64px; }
.merkmal-icon svg { width: 34px; height: 34px; }
.merkmal h3 { font-size: 18px; }

/* ─── FAQ: sanft auf- und zugleiten (moderne Browser) ──────────── */
:root { interpolate-size: allow-keywords; }
.faq details::details-content {
  block-size: 0; overflow: clip; opacity: 0;
  transition: block-size .34s cubic-bezier(.2,.7,.3,1), opacity .26s ease,
              content-visibility .34s allow-discrete;
}
.faq details[open]::details-content { block-size: auto; opacity: 1; }
.faq .antwort { animation: none; }

/* ─── Rechtsseiten (Impressum / Datenschutz) ───────────────────── */
.recht { max-width: 760px; margin: 56px auto 80px; }
.recht h1 { font-size: clamp(30px, 4vw, 40px); font-weight: 800; letter-spacing: -1px; margin-bottom: 8px; }
.recht .stand { color: var(--muted); font-size: 13.5px; margin-bottom: 36px; }
.recht h2 { font-size: 19px; font-weight: 800; margin: 34px 0 10px; padding-left: 14px;
  border-left: 3px solid var(--violet); }
.recht p, .recht li { color: var(--text2); font-size: 15.5px; }
.recht ul { margin: 10px 0 10px 20px; }
.recht li { margin-bottom: 6px; }
.recht .kasten { background: var(--weiss); border: 2px solid var(--tinte);
  box-shadow: 6px 6px 0 var(--violet-pale); padding: 20px 22px; margin: 18px 0; }
.recht .kasten p { margin: 0; line-height: 1.8; }

/* ─── Vorlagen-Galerie ─────────────────────────────────────────── */
a.vorlage-karte { display: block; color: inherit; }
a.vorlage-karte:hover { color: inherit; }
.chips { display: flex; flex-wrap: wrap; gap: 9px; }
.chip-link { border: 2px solid var(--tinte); background: var(--weiss); color: var(--tinte);
  font-weight: 700; font-size: 13.5px; padding: 8px 15px; transition: all .15s ease; }
/* Platz für die Scrollleiste immer freihalten.
   Sonst wird die Seite beim Wechsel zwischen langen und kurzen Inhalten
   kurz breiter und wieder schmaler – das ruckelt und sieht aus, als
   verschiebe sich der Inhalt. */

/* Vorlagen: Umschalten ohne Neuladen */
#vBlock{transition:opacity .18s ease;min-height:320px}
#vBlock.ist-am-laden{opacity:.35;pointer-events:none}

/* Vorlagen-Filter: aktive Branche + Anzahl */
.chip-link { cursor: pointer; font: inherit; display: inline-flex; align-items: center; gap: 7px; }
.chip-link small { font-size: 11px; font-weight: 700; opacity: .5;
  background: currentColor; color: transparent; border-radius: 99px; padding: 1px 6px;
  -webkit-text-fill-color: initial; }
.chip-link small { background: rgba(0,0,0,.07); color: inherit; opacity: .65; }
.chip-link.ist-aktiv { background: var(--violet); border-color: var(--violet); color: #fff;
  box-shadow: 0 6px 18px rgba(124,58,237,.32); }
.chip-link.ist-aktiv small { background: rgba(255,255,255,.22); color: #fff; opacity: .9; }
.branche-sub { display: block; font-size: 13.5px; font-weight: 500; opacity: .6;
  margin-top: 6px; letter-spacing: 0; }
.chip-link:hover { background: var(--violet); border-color: var(--violet); color: #fff;
  transform: translateY(-2px); }
.branche-block { padding: 44px 0 52px; scroll-margin-top: 76px; }
.branche-alt { background: var(--violet-soft); border-top: 2px solid var(--linie);
  border-bottom: 2px solid var(--linie); }
.branche-titel { display: flex; align-items: center; gap: 14px;
  font-size: clamp(21px, 2.6vw, 26px); font-weight: 800; letter-spacing: -.5px; margin-bottom: 24px; }
.branche-nr { font-size: 13px; font-weight: 800; color: var(--violet);
  border: 2px solid var(--violet); padding: 4px 9px; letter-spacing: 1px;
  white-space: nowrap; display: inline-block; }

/* Logo-Lockup: Slogan statt Produkt-Badge */
.logo-slogan { border-left: 2px solid var(--linie-s); padding-left: 11px; margin-left: 2px;
  font-size: 12.5px; font-weight: 600; letter-spacing: .4px; color: #5a5278;
  white-space: nowrap; }
@media (max-width: 520px) { .logo-slogan { display: none; } }

/* ─── Live-Miniaturen (echte Website als Vorschau) ─────────────── */
.v-live { position: relative; aspect-ratio: 1280/840; overflow: hidden;
  background: repeating-linear-gradient(45deg, #f4f2fb 0 10px, #faf9fe 10px 20px);
  border-bottom: 2px solid var(--linie); }
/* Das iframe hat die Masse eines echten Browserfensters.
   Frueher war es 4400px hoch, damit beim Ueberfahren durch die ganze
   Seite gefahren werden konnte. Dadurch war 100svh IM iframe aber 4400px
   statt 840 - jeder fensterhohe Hero wurde auf ein Fuenftel angeschnitten,
   und elf Vorlagen zeigten einen Ausschnitt aus der Bildmitte statt ihres
   Heros. Jetzt: stehendes Bild, ueberall gleich, korrekt gerendert. */
.v-live iframe { position: absolute; top: 0; left: 0; width: 1280px; height: 840px;
  border: 0; transform-origin: 0 0;
  transform: scale(var(--s, .25));
  pointer-events: none; background: #fff; }
.v-auge { position: absolute; top: 10px; right: 10px; z-index: 3;
  background: var(--tinte); color: #fff; font-size: 12px; font-weight: 700;
  padding: 6px 11px; opacity: 0; transition: opacity .2s ease, background .2s ease; }
.vorlage-karte:hover .v-auge { opacity: 1; }
.v-auge:hover { background: var(--violet); color: #fff; }

/* ─── Vorlagen-Slider (Startseite) ─────────────────────────────── */
.slider-aussen { position: relative; }
.slider { display: flex; gap: 20px; overflow-x: auto; scroll-snap-type: x mandatory;
  padding: 8px 4px 26px; scrollbar-width: thin; scrollbar-color: var(--violet) var(--violet-pale); }
.slider .vorlage-karte { flex: 0 0 min(430px, 78vw); scroll-snap-align: start; }
.slider-knopf { position: absolute; top: 34%; width: 48px; height: 48px; z-index: 5;
  border: 2px solid var(--tinte); background: #fff; color: var(--tinte);
  font-size: 20px; font-weight: 700; cursor: pointer;
  box-shadow: 5px 5px 0 var(--violet-pale); transition: all .18s ease; }
.slider-knopf:hover { background: var(--violet); border-color: var(--violet); color: #fff;
  box-shadow: 5px 5px 0 var(--violet-deep); }
.sk-l { left: -12px; } .sk-r { right: -12px; }
@media (max-width: 760px) { .slider-knopf { display: none; } }

/* ─── KI-Generator im Wizard ───────────────────────────────────── */
.ki-box { border: 2px solid var(--violet); background: var(--violet-soft);
  padding: 16px 18px; margin-bottom: 22px; display: flex; flex-wrap: wrap;
  gap: 12px 18px; align-items: center; justify-content: space-between; }
.ki-box b { display: block; font-size: 15px; color: var(--tinte); }
.ki-box span { font-size: 13px; color: var(--text2); }
.ki-box > div:first-child { flex: 1 1 280px; }
.ki-knoepfe { display: flex; gap: 12px; align-items: center; }
.ki-undo { background: none; border: none; color: var(--violet-d); font-family: 'Outfit', sans-serif;
  font-size: 13px; font-weight: 700; text-decoration: underline; cursor: pointer; }
.ki-status { flex-basis: 100%; font-size: 13px; font-weight: 600; color: var(--violet-deep); margin: 0; }
.ki-status.gruen { color: var(--gruen); }
.ki-status.rot { color: var(--rot); }

/* ─── Panel: FAQ-Editor ────────────────────────────────────────── */
.faq-zeile { display: grid; grid-template-columns: 1fr 38px; gap: 8px 10px;
  margin-bottom: 16px; align-items: start; }
.faq-zeile textarea { grid-column: 1 / -1; min-height: 64px; }

/* ─── Mobile-Burger (Plattform-Header) ─────────────────────────── */
.px-burger { display: none;   /* Grundzustand – sichtbar wird er in der Media-Query
                                 GANZ UNTEN. Sie muss nach dieser Regel stehen: Bei
                                 gleicher Spezifität gewinnt die spätere, sonst wäre
                                 der Knopf auf jedem Gerät weg. */ background: var(--weiss);
  border: 1.5px solid var(--linie); border-radius: 12px;
  color: var(--tinte); font-size: 19px; line-height: 1; padding: 9px 13px;
  cursor: pointer; box-shadow: var(--schatten); transition: all .2s ease; }
.px-burger:hover { background: var(--violet); color: #fff; border-color: var(--violet);
  box-shadow: var(--schatten-h); }

/* Der Menü-Knopf am Handy.
   Die Regel «@media (max-width:900px) { .px-burger { display:inline-flex } }»
   steht weiter oben (Zeile ~470) – also VOR dieser Grundregel. Bei gleicher
   Spezifität gewinnt die spätere: Der Knopf war auf JEDEM Gerät versteckt,
   das Menü am Handy nicht erreichbar. Darum hier nochmals, an der richtigen
   Stelle. */
@media (max-width: 900px) {
  .px-burger { display: inline-flex; }
}

/* ─── Panel: Bild-Auswahl in Leistungszeilen ───────────────────── */
.leistung-zeile .l-bild { grid-column: 1 / -1; font-size: 13.5px; color: var(--muted); }
input[type="color"] { border: 2px solid var(--tinte); background: #fff; }

/* ═══ Plattform: Unterseiten & Animationen ═══════════════════════ */
.seiten-hero { padding: 92px 0 44px; }
.seiten-hero h1 { font-size: clamp(34px, 5vw, 56px); line-height: 1.06; margin: 14px 0 18px; }
.seiten-hero .lead { max-width: 62ch; }
.ueberzeile { display: inline-block; color: var(--violet); font-weight: 800;
  font-size: 13px; letter-spacing: 2.6px; text-transform: uppercase; }

/* Animierter Verlaufstext */
.gx { background: linear-gradient(90deg, var(--violet), #c084fc, #f0abfc, var(--violet));
  background-size: 260% 100%; -webkit-background-clip: text; background-clip: text;
  color: transparent; animation: gxlauf 7s linear infinite; }
@keyframes gxlauf { to { background-position: 260% 0; } }

/* Lauftext-Band */
.marquee { overflow: hidden; border-top: 2px solid var(--tinte);
  border-bottom: 2px solid var(--tinte); background: var(--violet); color: #fff;
  padding: 13px 0; user-select: none; }
.marquee-innen { display: flex; width: max-content;
  animation: mqlauf 26s linear infinite; will-change: transform; }
.marquee:hover .marquee-innen { animation-play-state: paused; }
.marquee span { display: flex; gap: 46px; padding-right: 46px; font-weight: 800;
  font-size: 15.5px; letter-spacing: .6px; white-space: nowrap; }
.marquee i { font-style: normal; opacity: .65; }
@keyframes mqlauf { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) {
  .marquee-innen, .streifen-lauf { animation: none; } .gx { animation: none; } }

/* Funktionen-Raster */
.f-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(255px, 1fr)); gap: 16px; }
.f-karte { background: #fff; border: 2px solid var(--tinte); border-radius: 18px;
  padding: 24px 22px; box-shadow: 5px 5px 0 var(--flieder);
  transition: transform .18s, box-shadow .18s; }
.f-karte:hover { transform: translate(-3px, -3px); box-shadow: 9px 9px 0 var(--violet); }
.f-icon { font-size: 27px; display: block; margin-bottom: 10px; }
.f-karte h3 { font-size: 17.5px; margin-bottom: 7px; }
.f-karte p { font-size: 14.5px; color: var(--muted); }

/* Drei Schritte gross */
.schritte-reihe { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 18px; max-width: 900px; margin: 34px auto 34px; text-align: left; }
.schritt-gross { background: rgba(255,255,255,.06); border: 1.5px solid rgba(255,255,255,.16);
  border-radius: 18px; padding: 26px 24px; }
.schritt-gross b { display: grid; place-items: center; width: 42px; height: 42px;
  border-radius: 12px; background: var(--violet); color: #fff; font-size: 19px; margin-bottom: 12px; }
.schritt-gross h3 { color: #fff; margin-bottom: 6px; }
.schritt-gross p { color: rgba(255,255,255,.75); font-size: 14.5px; }

/* Preise */
.pk-mitte { display: grid; justify-items: center; }
.pk-karte { max-width: 560px; width: 100%; background: #fff;
  border: 2.5px solid var(--tinte); border-radius: 22px; padding: 34px 32px;
  box-shadow: 8px 8px 0 var(--flieder); position: relative; }
.pk-badge { position: absolute; top: -14px; left: 28px; background: var(--violet);
  color: #fff; font-weight: 800; font-size: 12.5px; letter-spacing: 1.4px;
  text-transform: uppercase; padding: 6px 14px; border-radius: 999px; }
.pk-zahl { font-size: clamp(40px, 6vw, 54px); font-weight: 800; margin: 8px 0 14px; }
.pk-zahl span { font-size: 17px; font-weight: 600; color: var(--muted); }
.pk-liste { list-style: none; padding: 0; margin: 0 0 22px; }
.pk-liste li { padding: 8px 0 8px 30px; position: relative;
  border-bottom: 1.5px dashed var(--linie); font-size: 15px; }
.pk-liste li::before { content: '✓'; position: absolute; left: 2px;
  color: var(--violet); font-weight: 800; }
.pk-klein { margin-top: 12px; font-size: 13px; color: var(--muted); }
.vergleich { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 16px; margin-top: 26px; }
.vergleich > div { border: 1.5px solid var(--linie); border-radius: 18px;
  padding: 22px 20px; background: var(--weiss); box-shadow: var(--schatten);
  transition: transform .25s, box-shadow .25s, border-color .25s; }
.vergleich > div:hover { transform: translateY(-4px); border-color: var(--linie-s);
  box-shadow: 0 18px 44px rgba(14,14,26,.09); }
.vergleich > div.hebt { border-color: var(--violet);
  box-shadow: 0 4px 14px rgba(14,14,26,.08), 0 22px 48px rgba(124,58,237,.28); }
.vergleich b { display: block; margin-bottom: 8px; }
.vergleich p { font-size: 14.5px; color: var(--muted); }

/* Über uns */
.story p { margin-bottom: 16px; font-size: 16.5px; }
.werte { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 14px; margin: 30px 0; }
.werte > div { border: 2px solid var(--tinte); border-radius: 16px; padding: 18px 17px;
  background: #fff; box-shadow: 4px 4px 0 var(--flieder); }
.werte b { display: block; margin-bottom: 6px; }
.werte p { font-size: 14px; color: var(--muted); }
.kontakt-karte { border: 1.5px solid transparent; border-radius: 18px;
  background: linear-gradient(135deg, var(--violet), #5b21b6); color: #fff; padding: 28px 28px;
  box-shadow: 0 4px 14px rgba(14,14,26,.08), 0 22px 48px rgba(124,58,237,.32); }
.kontakt-karte h3 { color: #fff; margin-bottom: 10px; }
.kontakt-karte a { color: #fff; text-decoration: underline; }
.kontakt-karte p { margin-bottom: 8px; }

/* Hero-Verlauf sanft animieren (nutzt gxlauf) */
.verlauf { background-size: 240% 100%; animation: gxlauf 8s linear infinite; }
@media (prefers-reduced-motion: reduce) { .verlauf { animation: none; } }

/* ─── Wizard: Extras-Schritt (Premium) ─────────────────────────── */
.ex-gruppe { background: #fff; border: 1.5px solid #eceaf6; border-radius: 20px;
  padding: 26px 26px 24px; margin-bottom: 22px;
  box-shadow: 0 1px 2px rgba(14,14,26,.04), 0 12px 32px -18px rgba(14,14,26,.14); }
.ex-kopf { display: flex; align-items: baseline; justify-content: space-between;
  gap: 14px; margin-bottom: 20px; flex-wrap: wrap; }
.ex-titel { font-weight: 800; font-size: 16.5px; letter-spacing: -.2px; }
.ex-hint { font-size: 12.5px; color: var(--muted); }
.ex-label { display: block; font-size: 11px; font-weight: 800; letter-spacing: 1.6px;
  text-transform: uppercase; color: var(--muted); margin: 0 0 10px; }
.ex-label + .ex-farben, .ex-label + .ex-schriften { margin-bottom: 22px; }
.ex-gruppe > *:last-child { margin-bottom: 0; }

.ex-farben { display: flex; gap: 12px; flex-wrap: wrap; }
.ex-farbe { display: inline-flex; align-items: center; gap: 9px; padding: 7px;
  border: 1.5px solid transparent; border-radius: 999px; background: transparent;
  cursor: pointer; transition: transform .14s ease, border-color .14s ease; }
.ex-farbe em { font-style: normal; font-weight: 700; font-size: 13px; padding-right: 8px; }
.ex-chip { width: 34px; height: 34px; border-radius: 50%; display: block; position: relative;
  box-shadow: inset 0 0 0 1.5px rgba(14,14,26,.12), 0 2px 6px rgba(14,14,26,.12); }
.ex-auto { background: conic-gradient(#7c3aed, #0ea5e9, #059669, #d97706, #dc2626, #7c3aed); }
.ex-farbe-frei { position: relative; }
.ex-chip.ex-frei { background: #fff;
  box-shadow: inset 0 0 0 2.5px transparent, inset 0 0 0 34px #fff,
    inset 0 0 0 1.5px rgba(14,14,26,.12), 0 2px 6px rgba(14,14,26,.12);
  background: conic-gradient(#7c3aed, #0ea5e9, #059669, #d97706, #dc2626, #7c3aed);
  -webkit-mask: radial-gradient(circle, transparent 42%, #000 46%);
  mask: radial-gradient(circle, transparent 42%, #000 46%); }
.ex-farbe-frei input[type=color] { position: absolute; left: 0; bottom: 0;
  width: 1px; height: 1px; opacity: 0; border: 0; padding: 0; pointer-events: none; }
.ex-farbe:hover { transform: translateY(-2px); }
.ex-farbe.aktiv { border-color: var(--violet); background: #f7f4ff; }
.ex-farbe.aktiv .ex-chip::after { content: '✓'; position: absolute; inset: 0;
  display: grid; place-items: center; color: #fff; font-weight: 900; font-size: 15px;
  text-shadow: 0 1px 3px rgba(0,0,0,.45); }

.ex-schriften { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.ex-schriften button { display: flex; flex-direction: column; align-items: flex-start;
  gap: 2px; padding: 16px 16px 13px; border: 1.5px solid #eceaf6; border-radius: 16px;
  background: #fbfaff; cursor: pointer; text-align: left;
  transition: border-color .14s ease, transform .14s ease, box-shadow .14s ease; }
.ex-schriften button:hover { transform: translateY(-2px);
  box-shadow: 0 10px 24px -14px rgba(14,14,26,.25); }
.ex-schriften button.aktiv { border-color: var(--violet); background: #fff;
  box-shadow: 0 0 0 3px rgba(124,58,237,.14); }
.ex-aa { font-size: 30px; line-height: 1; margin-bottom: 8px; }
.ex-schriften b { font-size: 13.5px; font-weight: 800; }
.ex-schriften i { font-style: normal; font-size: 11.5px; color: var(--muted); }

.ex-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 16px; margin-bottom: 14px; }
.ex-feld { display: flex; flex-direction: column; }
.ex-feld input { width: 100%; }
.ex-prefix { display: flex; align-items: stretch; border: 1.5px solid #e3e0f0;
  border-radius: 13px; overflow: hidden; background: #fff;
  transition: border-color .14s ease, box-shadow .14s ease; }
.ex-prefix:focus-within { border-color: var(--violet); box-shadow: 0 0 0 3px rgba(124,58,237,.13); }
.ex-prefix span { display: flex; align-items: center; padding: 0 4px 0 14px;
  font-size: 13.5px; font-weight: 600; color: var(--muted); background: #faf9fe;
  border-right: 1.5px solid #f0eef8; white-space: nowrap; }
.ex-prefix input { border: 0; outline: 0; padding: 13px 14px 13px 10px; font: inherit;
  font-size: 14.5px; width: 100%; min-width: 0; background: transparent; }

@media (max-width: 680px) {
  .ex-grid, .ex-schriften { grid-template-columns: 1fr; }
  .ex-gruppe { padding: 20px 16px; border-radius: 16px; }
}

/* ─── Kundenportal (Premium) ───────────────────────────────────── */
body.kp { background: #f6f5fb; }
body.kp .wizard-main { max-width: 860px; }

/* Topbar-Elemente */
.kp-aktionen { display: flex; align-items: center; gap: 14px; }
.kp-domain { display: inline-flex; align-items: center; gap: 8px; padding: 7px 14px 7px 11px;
  border: 1.5px solid #e7e4f3; border-radius: 999px; background: #fff;
  font-size: 13px; font-weight: 700; letter-spacing: -.1px;
  box-shadow: 0 1px 2px rgba(14,14,26,.05); }
.kp-domain i { width: 8px; height: 8px; border-radius: 50%; background: #cbc7dd; }
.kp-domain.ist-live i { background: #10b981; box-shadow: 0 0 0 4px rgba(16,185,129,.15); }
.kp-domain em { font-style: normal; font-weight: 600; font-size: 11.5px; color: var(--muted);
  border-left: 1.5px solid #eeecf7; padding-left: 8px; }
.kp-btn { display: inline-flex; align-items: center; gap: 8px; border-radius: 12px;
  font-weight: 700; font-size: 13.5px; padding: 10px 16px; cursor: pointer;
  border: 1.5px solid transparent; text-decoration: none;
  transition: transform .13s ease, box-shadow .13s ease, background .13s ease; }
.kp-btn:hover { transform: translateY(-1px); }
.kp-btn-soft { background: #f1eefb; color: var(--violet); }
.kp-btn-soft:hover { background: #e9e4fa; }
.kp-btn-primaer { background: var(--violet); color: #fff; font-size: 15px; padding: 13px 26px;
  box-shadow: 0 10px 24px -10px rgba(124,58,237,.55); }
.kp-btn-primaer:hover { box-shadow: 0 14px 30px -10px rgba(124,58,237,.6); }
.kp-btn-primaer:disabled { opacity: .55; transform: none; box-shadow: none; cursor: default; }
.kp-abmelden { font-size: 13px; color: var(--muted); text-decoration: none; }
.kp-abmelden:hover { color: var(--tinte); }

/* Fünf Bereichs-Tabs – immer vollständig sichtbar */
/* Hülle für die Bereichs-Leiste: trägt die Pfeile und den Verlauf am Rand.
   Ohne sichtbares Zeichen merkt niemand, dass es rechts weitergeht – dann
   sind die hinteren Bereiche praktisch unerreichbar. */
.kp-tabs-huelle { position: sticky; top: 0; z-index: 40; margin-bottom: 20px;
  background: linear-gradient(#f6f5fb 82%, rgba(246,245,251,0));
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.kp-tabs-huelle::before, .kp-tabs-huelle::after {
  content: ''; position: absolute; top: 0; bottom: 0; width: 42px; pointer-events: none;
  z-index: 2; opacity: 0; transition: opacity .18s; }
.kp-tabs-huelle::before { left: 0; background: linear-gradient(90deg, #f6f5fb 30%, rgba(246,245,251,0)); }
.kp-tabs-huelle::after  { right: 0; background: linear-gradient(270deg, #f6f5fb 30%, rgba(246,245,251,0)); }
.kp-tabs-huelle.mehr-links::before  { opacity: 1; }
.kp-tabs-huelle.mehr-rechts::after  { opacity: 1; }
.kp-tabs-pfeil { position: absolute; top: 50%; transform: translateY(-50%); z-index: 3;
  width: 32px; height: 32px; border: 1.5px solid var(--linie); border-radius: 50%;
  background: #fff; color: var(--tinte); font-size: 17px; line-height: 1; cursor: pointer;
  display: grid; place-items: center; box-shadow: 0 3px 10px rgba(20,12,50,.12);
  transition: transform .15s, border-color .15s; padding: 0 0 2px; }
.kp-tabs-pfeil:hover { border-color: var(--violet); color: var(--violet);
  transform: translateY(-50%) scale(1.08); }
.kp-tp-l { left: 2px; }
.kp-tp-r { right: 2px; }
@media (hover: none) { .kp-tabs-pfeil { display: none; } }   /* am Handy wird gewischt */

.kp-tabs { display: flex; flex-wrap: nowrap; gap: 8px;
  padding: 12px 0 14px;
  /* Eine Reihe statt Umbruch: Die Leiste klebt oben – bei vier Reihen wären
     das auf dem Handy 246px, ein Drittel des Bildschirms. Passt nicht alles,
     wird gewischt. */
  overflow-x: auto; overflow-y: hidden;
  /* Dünne Leiste statt gar keiner: ein weiteres Zeichen, dass es weitergeht. */
  scrollbar-width: thin; scrollbar-color: rgba(124,58,237,.35) transparent;
  scroll-snap-type: x proximity;
  /* Rand ausgleichen, damit der erste/letzte Knopf nicht klebt */
  padding-left: 2px; padding-right: 2px;
  -webkit-overflow-scrolling: touch; }
.kp-tabs::-webkit-scrollbar { height: 4px; }
.kp-tabs::-webkit-scrollbar-track { background: transparent; }
.kp-tabs::-webkit-scrollbar-thumb { background: rgba(124,58,237,.3); border-radius: 4px; }
.kp-tabs::-webkit-scrollbar-thumb:hover { background: rgba(124,58,237,.5); }
.kp-tabs button { scroll-snap-align: start; }
.kp-tabs button { flex: 0 0 auto; min-width: 0; white-space: nowrap; padding: 12px 16px; border-radius: 14px;
  border: 1.5px solid #e7e4f3; background: #fff; color: var(--tinte);
  font: inherit; font-size: 14px; font-weight: 700; cursor: pointer;
  transition: background .13s ease, color .13s ease, border-color .13s ease, box-shadow .13s ease; }
.kp-tabs button:hover { border-color: #d6cff0; }
.kp-tabs button.aktiv { background: var(--tinte); border-color: var(--tinte); color: #fff;
  box-shadow: 0 8px 20px -10px rgba(14,14,26,.4); }
@media (max-width: 560px) { .kp-tabs button { min-width: calc(50% - 4px); } }

/* Abschnitte als Karten */
body.kp .k-abschnitt { background: #fff; border: 1.5px solid #eceaf6; border-radius: 20px;
  padding: 26px 26px 24px; margin-bottom: 20px; scroll-margin-top: 76px;
  box-shadow: 0 1px 2px rgba(14,14,26,.04), 0 14px 34px -22px rgba(14,14,26,.16); }
body.kp .k-abschnitt h3 { font-size: 16.5px; font-weight: 800; letter-spacing: -.2px;
  margin: 0 0 18px; display: flex; align-items: center; gap: 10px; }
body.kp .k-zaehler { font-size: 11px; font-weight: 700; color: var(--muted);
  background: #f3f1fa; border-radius: 999px; padding: 4px 10px; letter-spacing: .3px; }
body.kp .feld label { font-size: 11px; font-weight: 800; letter-spacing: 1.4px;
  text-transform: uppercase; color: var(--muted); }
body.kp .feld input, body.kp .feld select, body.kp .feld textarea {
  border: 1.5px solid #e3e0f0; border-radius: 13px; background: #fff;
  transition: border-color .14s ease, box-shadow .14s ease; }
body.kp .feld input:focus, body.kp .feld select:focus, body.kp .feld textarea:focus {
  border-color: var(--violet); box-shadow: 0 0 0 3px rgba(124,58,237,.13); outline: 0; }
body.kp input[type="color"] { border-radius: 12px; height: 44px; width: 64px; padding: 4px; }
body.kp .btn { border-radius: 12px; }

/* Schwebende Speicherleiste */
.kp-leiste { position: sticky; bottom: 0; z-index: 50;
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  max-width: 860px; margin: 32px auto 0; padding: 13px 16px 13px 22px;
  background: rgba(255,255,255,.86);
  -webkit-backdrop-filter: blur(16px) saturate(1.5); backdrop-filter: blur(16px) saturate(1.5);
  border: 1.5px solid #e9e6f4; border-radius: 18px 18px 0 0; border-bottom: 0;
  box-shadow: 0 -14px 38px -20px rgba(14,14,26,.3); }
.kp-leiste-links { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.kp-version { font-size: 11px; color: var(--muted); opacity: .6;
  letter-spacing: .01em; font-variant-numeric: tabular-nums; white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis; }
.kp-leiste .kp-btn-primaer { flex: 0 0 auto; }
.kp-leiste #speicherStatus { font-size: 14px; color: var(--muted); font-weight: 700;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

@media (max-width: 640px) {
  body.kp .k-abschnitt { padding: 20px 16px; border-radius: 16px; }
  .kp-domain em { display: none; }
  .kp-leiste { border-radius: 0; margin-top: 18px; padding: 11px 13px; gap: 12px; }
  .kp-version { display: none; }
  .kp-leiste #speicherStatus { font-size: 13px; }
  .kp-leiste .kp-btn-primaer { padding: 11px 16px; font-size: 14px; }
}

/* ─── Visuelle Bildwahl im Kundenportal ────────────────────────── */
body.kp .bild-wahl { flex: 1; }
body.kp .bild-wahl + .bw-thumb,
.bw-thumb { flex: 0 0 auto; width: 52px; height: 52px; margin-left: 10px;
  border: 1.5px solid #e3e0f0; border-radius: 12px; background: #f6f5fb;
  padding: 0; overflow: hidden; cursor: pointer; position: relative;
  display: inline-grid; place-items: center;
  transition: border-color .13s ease, box-shadow .13s ease; }
.bw-thumb:hover { border-color: var(--violet); box-shadow: 0 0 0 3px rgba(124,58,237,.12); }
.bw-thumb img { width: 100%; height: 100%; object-fit: cover; display: none; }
.bw-thumb.hat-bild img { display: block; }
.bw-thumb span { font-size: 10px; font-weight: 700; color: var(--muted); }
.bw-thumb.hat-bild span { display: none; }
body.kp .feld:has(> .bild-wahl) { display: flex; align-items: center; flex-wrap: wrap; }
body.kp .feld:has(> .bild-wahl) > label { width: 100%; }

.bw-overlay { display: none; }
.bw-overlay.offen { position: fixed; inset: 0; z-index: 90; background: rgba(14,14,26,.45);
  -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
  display: grid; place-items: center; padding: 20px; }
.bw-dialog { width: min(560px, 100%); max-height: 82vh; overflow: auto;
  background: #fff; border-radius: 22px; padding: 20px 20px 16px;
  box-shadow: 0 30px 80px -20px rgba(14,14,26,.5); }
.bw-dialog-kopf { display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 16px; }
.bw-dialog-kopf b { font-size: 17px; letter-spacing: -.2px; }
.bw-zu { border: 0; background: #f3f1fa; width: 34px; height: 34px; border-radius: 10px;
  font-size: 15px; cursor: pointer; }
.bw-raster { display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr));
  gap: 10px; }
.bw-kachel { border: 2px solid #eceaf6; border-radius: 14px; overflow: hidden;
  padding: 0; background: #fff; cursor: pointer; aspect-ratio: 1;
  display: grid; place-items: center;
  transition: border-color .13s ease, transform .13s ease; }
.bw-kachel:hover { transform: translateY(-2px); border-color: #d6cff0; }
.bw-kachel img { width: 100%; height: 100%; object-fit: cover; }
.bw-kachel.gewaehlt { border-color: var(--violet); box-shadow: 0 0 0 3px rgba(124,58,237,.18); }
.bw-kachel.bw-leer span { font-size: 12px; font-weight: 700; color: var(--muted); }
.bw-hinweis { margin: 14px 2px 0; font-size: 12px; color: var(--muted); }

/* ── Bildzuweisung (Wizard Schritt 4) ────────────────────────────────── */
.bz-wahl{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px}
.bz-kachel{width:72px;height:56px;border:2px solid var(--linie);border-radius:6px;overflow:hidden;cursor:pointer;padding:0;background:var(--karte);display:flex;align-items:center;justify-content:center;transition:border-color .2s,transform .15s;flex-shrink:0}
.bz-kachel img{width:100%;height:100%;object-fit:cover;display:block}
.bz-kachel.gewaehlt{border-color:var(--violet);box-shadow:0 0 0 2px var(--violet)}
.bz-kachel:hover{border-color:var(--violet);transform:scale(1.04)}
.bz-auto{font-size:11px;font-weight:700;color:var(--muted);letter-spacing:.5px}
.bz-auto.gewaehlt{color:var(--violet);border-color:var(--violet)}

/* ── Live-Vorschau (Wizard) ──────────────────────────────────────────── */
.vorschau-fab{position:fixed;right:22px;bottom:86px;z-index:90;display:flex;align-items:center;gap:9px;
  background:var(--tinte);color:#fff;border:none;border-radius:999px;padding:13px 20px;
  font-family:'Outfit',sans-serif;font-size:14.5px;font-weight:700;cursor:pointer;
  box-shadow:0 10px 34px rgba(14,14,26,.4);opacity:0;transform:translateY(14px) scale(.94);
  pointer-events:none;transition:opacity .3s ease,transform .3s cubic-bezier(.16,1,.3,1),background .2s}
.vorschau-fab.sichtbar{opacity:1;transform:translateY(0) scale(1);pointer-events:auto}
.vorschau-fab:hover{background:var(--violet);color:#fff}
.vf-icon{font-size:17px;line-height:1}
.vorschau-overlay{position:fixed;inset:0;z-index:300;background:rgba(10,10,18,.78);
  backdrop-filter:blur(8px);display:flex;align-items:center;justify-content:center;padding:clamp(8px,3vw,36px)}
.vorschau-dialog{width:100%;max-width:1240px;height:100%;max-height:92vh;background:#fff;
  border-radius:14px;overflow:hidden;display:flex;flex-direction:column;
  box-shadow:0 30px 90px rgba(0,0,0,.5);animation:vdAuf .35s cubic-bezier(.16,1,.3,1)}
@keyframes vdAuf{from{opacity:0;transform:translateY(22px) scale(.97)}to{opacity:1;transform:translateY(0) scale(1)}}
.vorschau-kopf{display:flex;justify-content:space-between;align-items:center;gap:16px;
  padding:14px 20px;border-bottom:1.5px solid var(--linie);background:#fafafa;flex-shrink:0}
.vorschau-kopf b{font-size:15.5px;display:block}
.vk-hinweis{font-size:12.5px;color:var(--muted);display:block;margin-top:2px}
.vorschau-zu{background:none;border:1.5px solid var(--linie);border-radius:8px;width:36px;height:36px;
  font-size:15px;cursor:pointer;color:var(--text2);transition:border-color .2s,color .2s;flex-shrink:0}
.vorschau-zu:hover{border-color:var(--tinte);color:var(--tinte)}
.vorschau-frame{flex:1;width:100%;border:none;opacity:0;transition:opacity .4s ease;background:#fff}
.vorschau-lader{position:absolute;inset:64px 0 0;display:flex;flex-direction:column;align-items:center;
  justify-content:center;gap:16px;background:#fff;z-index:2}
.vorschau-lader p{font-size:14.5px;color:var(--text2);font-weight:500}
.vl-spinner{width:38px;height:38px;border:3.5px solid var(--linie);border-top-color:var(--violet);
  border-radius:50%;animation:vlDreh .8s linear infinite}
@keyframes vlDreh{to{transform:rotate(360deg)}}
@media(max-width:640px){
.vorschau-fab{right:14px;bottom:76px;padding:12px 16px}
.vf-text{display:none}
.vorschau-dialog{max-height:100vh;border-radius:0}}

/* ── Aufbau-Animation (Danke-Seite) ──────────────────────────────────── */
.bau-buehne{position:fixed;inset:0;z-index:400;background:linear-gradient(165deg,#0e0e1a 0%,#16162a 100%);
  display:flex;align-items:center;justify-content:center;transition:opacity .6s ease,transform .6s ease}
.bau-buehne.zu{opacity:0;transform:scale(1.02);pointer-events:none}
.bau-phase1{display:flex;flex-direction:column;align-items:center;gap:34px;padding:24px;
  width:100%;max-width:460px;transition:opacity .4s ease,transform .4s ease}
.bau-phase1.weg{opacity:0;transform:translateY(-18px)}
.bau-logo{height:40px;filter:brightness(0) invert(1)}
.bau-schritte{display:flex;flex-direction:column;gap:15px;width:100%}
.bau-schritt{display:flex;align-items:center;gap:13px;padding:14px 18px;border-radius:12px;
  background:rgba(255,255,255,.04);border:1.5px solid rgba(255,255,255,.07);
  font-family:'Outfit',sans-serif;color:rgba(255,255,255,.4);font-size:15px;font-weight:500;
  transition:background .3s,border-color .3s,color .3s,transform .3s}
.bau-schritt.laeuft{background:rgba(124,58,237,.12);border-color:rgba(124,58,237,.45);
  color:#fff;transform:scale(1.02)}
.bau-schritt.fertig{color:rgba(255,255,255,.75)}
.bs-icon{font-size:19px;line-height:1;flex-shrink:0}
.bs-text{flex:1}
.bs-status{width:22px;height:22px;flex-shrink:0;position:relative}
.bau-schritt.laeuft .bs-status::after{content:'';position:absolute;inset:2px;border:2.5px solid rgba(255,255,255,.18);
  border-top-color:#7c3aed;border-radius:50%;animation:vlDreh .7s linear infinite}
.bau-schritt.fertig .bs-status::after{content:'✓';position:absolute;inset:0;display:grid;place-items:center;
  color:#34d399;font-weight:800;font-size:16px;animation:bsHaken .3s cubic-bezier(.16,1,.3,1)}
@keyframes bsHaken{from{transform:scale(.4);opacity:0}to{transform:scale(1);opacity:1}}
.bau-balken{width:100%;height:5px;border-radius:3px;background:rgba(255,255,255,.08);overflow:hidden}
.bau-balken-fuell{height:100%;width:0;border-radius:3px;background:linear-gradient(90deg,#7c3aed,#a78bfa);
  box-shadow:0 0 14px rgba(124,58,237,.6)}
/* Phase 2: Website-Reveal */
.bau-phase2{display:flex;flex-direction:column;align-items:center;gap:20px;width:100%;
  max-width:1100px;padding:24px;opacity:0;transform:translateY(20px);
  transition:opacity .55s cubic-bezier(.16,1,.3,1),transform .55s cubic-bezier(.16,1,.3,1)}
.bau-phase2.da{opacity:1;transform:translateY(0)}
.bau-frame-halter{width:100%;border-radius:14px;overflow:hidden;
  box-shadow:0 34px 90px rgba(0,0,0,.55),0 0 0 1px rgba(255,255,255,.08)}
.bau-browser-leiste{display:flex;align-items:center;gap:7px;padding:11px 16px;background:#1c1c2e}
.bb-punkt{width:11px;height:11px;border-radius:50%;background:rgba(255,255,255,.14)}
.bb-punkt:nth-child(1){background:#ff5f57}.bb-punkt:nth-child(2){background:#febc2e}.bb-punkt:nth-child(3){background:#28c840}
.bb-url{margin-left:12px;flex:1;text-align:center;background:rgba(255,255,255,.07);border-radius:7px;
  padding:6px 14px;font-family:'Outfit',sans-serif;font-size:12.5px;color:rgba(255,255,255,.65);
  max-width:340px;margin-right:auto;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bau-frame-wrap{position:relative;height:min(62vh,640px);background:#fff}
#bauFrame{width:100%;height:100%;border:none;display:block}
.bau-vorhang{position:absolute;inset:0;background:linear-gradient(165deg,#12121f,#1b1b30);
  transform:translateY(0);transition:transform 2.3s cubic-bezier(.65,0,.35,1)}
.bau-vorhang.auf{transform:translateY(101%)}
.bau-scanner{position:absolute;left:0;right:0;top:0;height:3px;z-index:2;
  background:linear-gradient(90deg,transparent,#a78bfa 30%,#7c3aed 50%,#a78bfa 70%,transparent);
  box-shadow:0 0 24px 6px rgba(124,58,237,.55);opacity:0}
.bau-scanner.laeuft{opacity:1;animation:scanFahrt 2.3s cubic-bezier(.65,0,.35,1) forwards}
@keyframes scanFahrt{from{top:0}to{top:calc(100% - 3px)}}
.bau-untertitel{font-family:'Outfit',sans-serif;font-size:clamp(16px,2.4vw,21px);font-weight:600;
  color:#fff;text-align:center;margin:0}
.bau-weiter{opacity:0;transform:translateY(10px);transition:opacity .4s,transform .4s;
  padding:14px 34px !important;font-size:15.5px !important}
.bau-weiter.da{opacity:1;transform:translateY(0)}
@media(max-width:640px){
.bau-frame-wrap{height:56vh}
.bb-url{max-width:180px}}
@media(prefers-reduced-motion:reduce){
.bau-buehne{display:none}}

/* ═══════════════════════════════════════════════════════════════════
   KINO-HERO – Apple-Keynote-Stil (dunkel, Wort-Stagger, Grain, Glow)
   ═══════════════════════════════════════════════════════════════════ */
.kino-hero{position:relative;min-height:calc(100svh - 62px);display:flex;align-items:center;
  justify-content:center;text-align:center;overflow:hidden;
  background:radial-gradient(ellipse 90% 70% at 50% -10%,#2a1b52 0%,#12101f 45%,#0a0a14 100%)}
.kh-grain{position:absolute;inset:-50%;width:200%;height:200%;opacity:.05;pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 512 512' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.72' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size:256px 256px;animation:khGrain .85s steps(1) infinite}
@keyframes khGrain{0%,100%{transform:translate(0,0)}20%{transform:translate(3%,-2%)}40%{transform:translate(-2%,3%)}60%{transform:translate(2%,2%)}80%{transform:translate(-3%,-1%)}}
.kh-orb{position:absolute;border-radius:50%;filter:blur(70px);pointer-events:none;opacity:.5}
.kh-orb-1{width:520px;height:520px;background:radial-gradient(circle,#7c3aed55,transparent 70%);
  top:-140px;left:-120px;animation:khOrb 9s ease-in-out infinite alternate}
.kh-orb-2{width:460px;height:460px;background:radial-gradient(circle,#a78bfa33,transparent 70%);
  bottom:-160px;right:-100px;animation:khOrb 11s ease-in-out infinite alternate-reverse}
@keyframes khOrb{from{transform:translate(0,0) scale(1)}to{transform:translate(40px,26px) scale(1.12)}}
.kh-inhalt{position:relative;z-index:5;padding:80px 24px 110px;max-width:1240px}
.kh-kick{display:inline-flex;align-items:center;gap:10px;font-size:12px;font-weight:700;
  letter-spacing:3.2px;text-transform:uppercase;color:#a78bfa;margin-bottom:30px;
  opacity:0;translate:0 12px;transition:opacity .6s,translate .6s}
.kh-kick.an{opacity:1;translate:0 0}
.kh-kick::before,.kh-kick::after{content:'';display:block;width:28px;height:1.5px;background:#7c3aed}
.kino-hero h1{font-size:clamp(46px,9.2vw,124px);line-height:1.04;letter-spacing:-.035em;
  font-weight:800;color:#fff;margin:0 0 30px}
.kh-wort{display:inline-block;overflow:hidden;margin-right:.08em;vertical-align:bottom}
.kh-wort i{display:inline-block;font-style:normal;line-height:1.42;
  padding:0 .12em 0 .02em;   /* Clipbox wächst wirklich – Glyph-Raum für neg. Letter-Spacing */
  transform:translateY(110%);opacity:0;
  transition:transform .75s cubic-bezier(.16,1,.3,1),opacity .75s}
.kh-wort i.an{transform:translateY(0);opacity:1}
.kh-wort.akz i{background:linear-gradient(120deg,#a78bfa,#7c3aed 55%,#c4b5fd);
  -webkit-background-clip:text;background-clip:text;color:transparent}
.kh-ctas{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;
  opacity:0;translate:0 16px;transition:opacity .7s ease,translate .7s cubic-bezier(.16,1,.3,1)}
.kh-ctas.an{opacity:1;translate:0 0}
.kh-sub{font-size:clamp(16.5px,2.1vw,21px);color:#b8b8d4;max-width:56ch;margin:0 auto 42px;
  line-height:1.7;opacity:0;translate:0 16px;transition:opacity .8s,translate .8s}
.kh-sub.an{opacity:1;translate:0 0}
.kh-sub strong{color:#fff;font-weight:600}
.kh-cta{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;
  opacity:0;translate:0 16px;transition:opacity .8s,translate .8s}
.kh-cta.an{opacity:1;translate:0 0}
.kh-k1{display:inline-flex;align-items:center;gap:9px;background:var(--violet);color:#fff;
  font-weight:800;font-size:16px;padding:17px 34px;border-radius:12px;
  box-shadow:0 10px 40px #7c3aed55;transition:transform .2s,box-shadow .2s,background .2s}
.kh-k1:hover{background:var(--violet-d);color:#fff;transform:translateY(-3px);box-shadow:0 16px 54px #7c3aed77}
.kh-k2{display:inline-flex;align-items:center;gap:8px;border:1.5px solid #ffffff3a;color:#fff;
  font-weight:700;font-size:15.5px;padding:15px 30px;border-radius:12px;
  transition:border-color .2s,transform .2s,background .2s}
.kh-k2:hover{border-color:#fff;background:#ffffff10;transform:translateY(-3px)}
.kh-gratis{margin-top:26px;font-size:14px;color:#8b8bb0;opacity:0;transition:opacity .8s}
.kh-gratis.an{opacity:1}
.kh-gratis b{color:#4ade80;font-weight:700}
.kh-scroll{position:absolute;bottom:28px;left:50%;translate:-50% 0;z-index:5;display:flex;
  flex-direction:column;align-items:center;gap:8px;opacity:0;transition:opacity .8s 1.6s; pointer-events:none; }
.kh-scroll.an{opacity:1}
.kh-scroll span{font-size:10px;letter-spacing:2.5px;text-transform:uppercase;color:#8b8bb0}
.kh-maus{width:22px;height:34px;border:1.5px solid #ffffff2e;border-radius:11px;position:relative}
.kh-maus::after{content:'';position:absolute;top:5px;left:50%;translate:-50% 0;width:3px;height:6px;
  background:#a78bfa;border-radius:2px;animation:khMaus 2s ease-in-out infinite}
@keyframes khMaus{0%,100%{translate:-50% 0;opacity:1}78%{translate:-50% 12px;opacity:0}}

/* ═══════════════════════════════════════════════════════════════════
   KINO-DEMO – «So entsteht Ihre Website» (5 Akte, Auto-Loop)
   ═══════════════════════════════════════════════════════════════════ */
.kino{background:linear-gradient(180deg,#0a0a14 0%,#12101f 60%,#0e0e1a 100%);
  padding:100px 0 110px;position:relative;overflow:hidden}
.kino .block-kopf h2{color:#fff}
.kino .block-kopf p{color:#a5a5c8}
.kino .eyebrow{color:#a78bfa}
.kino-buehne{position:relative;max-width:960px;margin:22px auto 0;padding:0 20px}
.kino-glow{position:absolute;inset:6% -4%;background:radial-gradient(ellipse 60% 55% at 50% 45%,#7c3aed30,transparent 70%);
  filter:blur(30px);pointer-events:none}
.kino-browser{position:relative;border-radius:16px;overflow:hidden;background:#101020;
  box-shadow:0 40px 110px rgba(0,0,0,.65),0 0 0 1px #ffffff12}
.kino-leiste{display:flex;align-items:center;gap:7px;padding:12px 16px;background:#181830;
  border-bottom:1px solid #ffffff0e}
.kl-punkt{width:11px;height:11px;border-radius:50%}
.kl-punkt:nth-child(1){background:#ff5f57}.kl-punkt:nth-child(2){background:#febc2e}.kl-punkt:nth-child(3){background:#28c840}
.kino-url{margin-left:10px;flex:1;max-width:300px;text-align:center;background:#ffffff0d;border-radius:7px;
  padding:6px 14px;font-size:12.5px;color:#b8b8d4;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.kino-tabs{display:flex;gap:2px;margin-left:auto;opacity:0;transition:opacity .5s}
.kino-tabs.da{opacity:1}
.kino-tab{font-size:11px;font-weight:600;letter-spacing:.4px;color:#8b8bb0;padding:6px 11px;
  border-radius:7px;transition:background .3s,color .3s;white-space:nowrap}
.kino-tab.aktiv{background:#7c3aed;color:#fff}
.kino-flaeche{position:relative;height:min(56vw,470px);min-height:340px;background:#0d0d1a}
.akt{position:absolute;inset:0;opacity:0;pointer-events:none;transition:opacity .55s ease;padding:26px clamp(18px,4vw,44px)}
.akt.da{opacity:1;pointer-events:auto}
/* — Akt 1: Formular tippt sich — */
.akt-formular{display:flex;flex-direction:column;justify-content:center;max-width:520px;margin:0 auto}
.kf-titel{font-size:15px;font-weight:700;color:#fff;margin-bottom:20px;display:flex;align-items:center;gap:9px}
.kf-titel::before{content:'1';display:grid;place-items:center;width:24px;height:24px;border-radius:50%;
  background:#7c3aed;color:#fff;font-size:12px;font-weight:800}
.kf-feld{margin-bottom:14px}
.kf-label{font-size:11px;letter-spacing:1.4px;text-transform:uppercase;color:#8b8bb0;margin-bottom:6px;font-weight:700}
.kf-wert{background:#ffffff0a;border:1.5px solid #ffffff14;border-radius:9px;padding:11px 14px;
  font-size:14.5px;color:#fff;min-height:42px;display:flex;align-items:center;transition:border-color .3s}
.kf-feld.tippt .kf-wert{border-color:#7c3aed}
.kf-cursor{display:inline-block;width:2px;height:17px;background:#a78bfa;margin-left:2px;
  animation:kfBlink 1s steps(1) infinite;vertical-align:middle}
@keyframes kfBlink{50%{opacity:0}}
/* — Akt 2/3: Website baut sich — */
.akt-site{--demo-ak:#7c3aed;display:flex;flex-direction:column;gap:12px;overflow:hidden}
.as-hero{position:relative;height:38%;min-height:120px;border-radius:11px;overflow:hidden;
  background:linear-gradient(135deg,#1c1636,#2a1b52);
  opacity:0;transform:translateY(18px) scale(.985);transition:opacity .6s,transform .6s cubic-bezier(.16,1,.3,1)}
.akt-site.s1 .as-hero{opacity:1;transform:none}
.as-hero::before{content:'';position:absolute;inset:0;
  background:radial-gradient(ellipse at 30% 20%,var(--demo-ak)44,transparent 62%);
  transition:background .5s}
.as-hero-txt{position:absolute;left:22px;bottom:18px}
.as-h-zeile{height:14px;border-radius:5px;background:#ffffffd8;width:190px;margin-bottom:8px;
  transform-origin:left;transform:scaleX(0);transition:transform .5s cubic-bezier(.16,1,.3,1) .18s}
.as-h-zeile.z2{width:120px;background:var(--demo-ak);transition-delay:.32s}
.akt-site.s1 .as-h-zeile{transform:scaleX(1)}
.as-karten{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;flex:1}
.as-karte{border-radius:11px;background:#ffffff08;border:1px solid #ffffff10;padding:14px;
  opacity:0;transform:translateY(16px);transition:opacity .5s,transform .5s cubic-bezier(.16,1,.3,1)}
.akt-site.s2 .as-karte{opacity:1;transform:none}
.akt-site.s2 .as-karte:nth-child(2){transition-delay:.1s}
.akt-site.s2 .as-karte:nth-child(3){transition-delay:.2s}
.as-k-icon{width:26px;height:26px;border-radius:7px;background:var(--demo-ak);margin-bottom:10px;
  transition:background .5s;opacity:.9}
.as-k-zeile{height:8px;border-radius:4px;background:#ffffff2e;margin-bottom:6px}
.as-k-zeile.kurz{width:60%}
.as-cta{height:44px;border-radius:11px;background:var(--demo-ak);display:flex;align-items:center;
  justify-content:center;gap:8px;transition:background .5s;
  opacity:0;transform:translateY(14px);transition:opacity .5s,transform .5s cubic-bezier(.16,1,.3,1),background .5s}
.akt-site.s3 .as-cta{opacity:1;transform:none}
.as-cta i{display:block;height:9px;width:110px;border-radius:4px;background:#ffffffec}
/* — Akt 4: Seiten-Wireframes — */
.akt-seiten{display:grid;place-items:stretch}
.ws{position:absolute;inset:26px clamp(18px,4vw,44px);opacity:0;transform:translateX(26px);
  transition:opacity .45s ease,transform .45s cubic-bezier(.16,1,.3,1);display:flex;flex-direction:column;gap:11px}
.ws.da{opacity:1;transform:none}
.ws-kopf{height:13px;width:34%;border-radius:5px;background:#ffffffd8}
.ws-sub{height:8px;width:52%;border-radius:4px;background:#ffffff30}
.ws-reihe{display:grid;gap:11px;flex:1}
.ws-box{border-radius:10px;background:#ffffff08;border:1px solid #ffffff10;position:relative;overflow:hidden}
.ws-box.ak::after{content:'';position:absolute;left:12px;bottom:10px;height:8px;width:44%;border-radius:4px;background:#7c3aed}
.ws-box.foto{background:linear-gradient(135deg,#221a44,#161230)}
.ws-r2{grid-template-columns:1fr 1fr}
.ws-r3{grid-template-columns:repeat(3,1fr)}
.ws-r21{grid-template-columns:1.6fr 1fr}
.ws-zeilen{display:flex;flex-direction:column;gap:8px;justify-content:center;padding:0 4px}
.ws-zeile{height:8px;border-radius:4px;background:#ffffff2c}
.ws-zeile.kurz{width:64%}
.ws-map{background:repeating-linear-gradient(45deg,#191934 0 12px,#1e1e40 12px 24px)}
/* — Akt 5: Panel-Split — */
.akt-panel{display:grid;grid-template-columns:230px 1fr;gap:18px;align-items:stretch}
.pp{border-radius:12px;background:#15152c;border:1px solid #ffffff12;padding:16px;position:relative}
.pp-titel{font-size:12px;font-weight:800;color:#fff;letter-spacing:.6px;margin-bottom:14px;display:flex;align-items:center;gap:7px}
.pp-titel::before{content:'';width:8px;height:8px;border-radius:2.5px;background:#7c3aed}
.pp-label{font-size:10px;letter-spacing:1.4px;text-transform:uppercase;color:#8b8bb0;font-weight:700;margin:12px 0 7px}
.pp-swatches{display:flex;gap:8px}
.pp-sw{width:30px;height:30px;border-radius:9px;cursor:default;border:2px solid transparent;
  transition:transform .25s,border-color .25s;position:relative}
.pp-sw.aktiv{border-color:#fff;transform:scale(1.12)}
.pp-feld{background:#ffffff0a;border:1.5px solid #ffffff14;border-radius:8px;padding:9px 11px;
  font-size:12.5px;color:#e8e8f8;min-height:36px}
.pp-knopf{margin-top:14px;background:#7c3aed;border-radius:9px;color:#fff;font-size:12.5px;
  font-weight:800;text-align:center;padding:10px;transition:transform .2s,background .2s}
.pp-knopf.klick{transform:scale(.96);background:#6d28d9}
.pp-cursor{position:absolute;width:18px;height:18px;pointer-events:none;z-index:5;
  transition:top .6s cubic-bezier(.5,0,.3,1),left .6s cubic-bezier(.5,0,.3,1);
  filter:drop-shadow(0 2px 5px rgba(0,0,0,.5))}
.pp-cursor svg{display:block}
.pmini{--demo-ak:#7c3aed;border-radius:12px;background:#0f0f20;border:1px solid #ffffff10;
  padding:16px;display:flex;flex-direction:column;gap:10px;overflow:hidden}
.pm-hero{height:40%;min-height:88px;border-radius:9px;position:relative;overflow:hidden;
  background:linear-gradient(135deg,#1c1636,#241a48)}
.pm-hero::before{content:'';position:absolute;inset:0;
  background:radial-gradient(ellipse at 28% 22%,var(--demo-ak)4d,transparent 62%);transition:background .45s}
.pm-h-zeile{position:absolute;left:14px;bottom:26px;height:10px;width:120px;border-radius:4px;background:#fffffff0}
.pm-h-zeile2{position:absolute;left:14px;bottom:12px;height:8px;width:78px;border-radius:4px;
  background:var(--demo-ak);transition:background .45s}
.pm-karten{display:grid;grid-template-columns:repeat(3,1fr);gap:9px;flex:1}
.pm-karte{border-radius:8px;background:#ffffff08;border:1px solid #ffffff0e;padding:9px}
.pm-k-icon{width:16px;height:16px;border-radius:5px;background:var(--demo-ak);transition:background .45s;margin-bottom:7px}
.pm-k-zeile{height:6px;border-radius:3px;background:#ffffff28;margin-bottom:4px}
.pm-cta{height:30px;border-radius:8px;background:var(--demo-ak);transition:background .45s}
/* — Rahmen unten: Untertitel + Punkte — */
.kino-status{display:flex;align-items:center;gap:9px;padding:11px 18px;background:#181830;
  border-top:1px solid #ffffff0e;font-size:12.5px;color:#b8b8d4}
.kino-status .spinner{width:13px;height:13px;border:2px solid #ffffff22;border-top-color:#a78bfa;
  border-radius:50%;animation:vlDreh .8s linear infinite;flex-shrink:0}
.kino-untertitel{display:flex;align-items:baseline;justify-content:center;gap:13px;margin-top:26px;
  font-size:clamp(15px,2vw,18px);color:#d5d5ec;font-weight:600;min-height:28px;text-align:center}
.kino-akt-nr{font-size:11px;letter-spacing:2.4px;text-transform:uppercase;color:#a78bfa;font-weight:800;white-space:nowrap}
.kino-dots{display:flex;gap:9px;justify-content:center;margin-top:16px}
.kino-dot{width:8px;height:8px;border-radius:5px;background:#ffffff22;transition:all .35s}
.kino-dot.aktiv{width:26px;background:#7c3aed}

/* ── Helle Kino-Variante (Unterseiten): heller Raum, dunkler «Fernseher» ── */
.kino.kino-hell{background:var(--bg)}
.kino.kino-hell .block-kopf h2{color:var(--tinte)}
.kino.kino-hell .block-kopf p{color:var(--text2)}
.kino.kino-hell .eyebrow{color:var(--violet)}
.kino.kino-hell .kino-glow{opacity:.55}
.kino.kino-hell .kino-untertitel [data-rolle="akttext"],
.kino.kino-hell .kino-untertitel span:last-child{color:var(--text2)}
.kino.kino-hell .kino-dot{background:rgba(14,14,26,.16)}
.kino.kino-hell .kino-dot.aktiv{background:#7c3aed}

/* ── Kino-Film «Kundenpanel» v2 (kp2-*): Panel links, Website rechts ── */
.kp2-flaeche{display:grid;grid-template-columns:46% 1fr;gap:14px;padding:18px;
  background:#0d0d1c;min-height:340px;position:relative}
.kp2-panel{position:relative;background:#15152a;border:1px solid #ffffff14;border-radius:12px;
  padding:14px;transition:opacity .5s,transform .5s}
.kp2-panel.weg{opacity:.12;transform:translateX(-14px) scale(.97)}
.kp2-tabs{display:flex;gap:6px;margin-bottom:14px;flex-wrap:wrap}
.kp2-tab{font-size:11.5px;font-weight:700;color:#a9a9cc;padding:6px 11px;border-radius:99px;
  background:#ffffff0d;transition:all .25s}
.kp2-tab.da{background:var(--kp2ak,#7c3aed);color:#fff}
.kp2-teil{display:none}
.kp2-teil.da{display:block;animation:kp2Auf .4s ease}
@keyframes kp2Auf{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.kp2-label{font-size:10px;letter-spacing:1.8px;text-transform:uppercase;font-weight:800;
  color:#8b84b0;margin:10px 0 6px}
.kp2-feld{background:#0e0e1e;border:1.5px solid var(--kp2ak,#7c3aed);border-radius:9px;
  padding:10px 12px;color:#fff;font-weight:700;font-size:14.5px;min-height:40px}
.kp2-blink{display:inline-block;width:2px;height:15px;background:#fff;margin-left:2px;
  vertical-align:-2px;animation:kp2Blink .8s steps(1) infinite}
@keyframes kp2Blink{50%{opacity:0}}
.kp2-zeile{height:9px;border-radius:5px;background:#ffffff14;margin-bottom:7px}
.kp2-zeile.kurz{width:62%}
.kp2-knopf{display:inline-block;margin-top:14px;background:var(--kp2ak,#7c3aed);color:#fff;
  font-weight:800;font-size:13px;padding:9px 18px;border-radius:9px;transition:background .3s}
.kp2-knopf em{font-style:normal;color:#b7f5d8}
.kp2-swatches{display:flex;gap:9px}
.kp2-sw{width:30px;height:30px;border-radius:9px;border:2px solid transparent;transition:all .2s}
.kp2-sw.da{border-color:#fff;transform:scale(1.12);box-shadow:0 0 0 3px #ffffff2a}
.kp2-kontrast{margin-top:14px;font-size:12.5px;font-weight:700;color:#6ee7b7}
.kp2-cursor{position:absolute;z-index:5;transition:left .8s cubic-bezier(.2,.7,.2,1),top .8s cubic-bezier(.2,.7,.2,1);
  left:30px;top:30px;filter:drop-shadow(0 2px 5px rgba(0,0,0,.5))}
.puls{animation:kp2Puls .42s ease}
@keyframes kp2Puls{35%{transform:scale(.92)}}
.kp2-web{position:relative;background:#fff;border-radius:12px;overflow:hidden;
  transition:transform .6s cubic-bezier(.2,.7,.2,1);box-shadow:0 14px 40px rgba(0,0,0,.4)}
.kp2-web.gross{transform:scale(1.045)}
.kp2-w-nav{display:flex;align-items:center;gap:8px;padding:10px 14px;border-bottom:1px solid #eee}
.kp2-w-nav i{width:34px;height:9px;border-radius:5px;background:var(--kp2ak,#7c3aed);transition:background .5s}
.kp2-w-nav b{width:22px;height:6px;border-radius:4px;background:#e4e4ee}
.kp2-w-hero{padding:20px 16px 14px}
.kp2-w-slogan{font-weight:800;font-size:clamp(15px,1.7vw,20px);letter-spacing:-.3px;color:#14122a;
  min-height:1.3em}
.kp2-w-sub{height:8px;width:70%;border-radius:5px;background:#ececf4;margin:9px 0 12px}
.kp2-w-cta{width:96px;height:26px;border-radius:8px;background:var(--kp2ak,#7c3aed);transition:background .5s}
.kp2-w-karten{display:grid;grid-template-columns:1fr 1fr 1fr;gap:9px;padding:0 16px 18px}
.kp2-w-karte{border:1px solid #ececf4;border-radius:9px;padding:10px 9px}
.kp2-w-karte i{display:block;width:20px;height:20px;border-radius:6px;background:var(--kp2ak,#7c3aed);
  opacity:.85;transition:background .5s;margin-bottom:8px}
.kp2-w-karte b{display:block;height:7px;border-radius:4px;background:#e7e7f0}
.kp2-badge{position:absolute;left:50%;bottom:14px;transform:translateX(-50%);white-space:nowrap;
  background:#0e9f6e;color:#fff;font-weight:800;font-size:12.5px;padding:8px 16px;border-radius:99px;
  box-shadow:0 8px 24px rgba(14,159,110,.45);animation:kp2Auf .5s ease}
@media(max-width:760px){
  .kp2-flaeche{grid-template-columns:1fr;min-height:0}
  .kp2-web{order:-1}
  .kp2-w-karten{grid-template-columns:1fr 1fr}
  .kp2-w-karte:nth-child(3){display:none}
}
@media(max-width:760px){
.akt-panel{grid-template-columns:1fr}
.pp{display:none}
.akt-panel .pmini{grid-column:1}
.kino-tabs{display:none}
.kino-flaeche{height:64vw}}
@media(prefers-reduced-motion:reduce){
.kh-grain{animation:none}.kh-orb-1,.kh-orb-2{animation:none}
.kh-kick,.kh-sub,.kh-cta,.kh-gratis,.kh-scroll{opacity:1;translate:0 0;transition:none}
.kh-wort i{transform:none;opacity:1;transition:none}
.kh-maus::after{animation:none}}

/* ═══════════════════════════════════════════════════════════════════
   FEATURE-BENTO – «Serienmässig. Alles drin.»
   ═══════════════════════════════════════════════════════════════════ */
.serie{position:relative}
.serie-bento{display:grid;grid-template-columns:repeat(12,1fr);gap:14px;margin-top:8px}
.sb{position:relative;border-radius:18px;border:1.5px solid var(--linie);background:var(--weiss);
  padding:26px 26px 24px;overflow:hidden;transition:transform .25s,box-shadow .25s,border-color .25s}
.sb:hover{transform:translateY(-4px);border-color:var(--linie-s);box-shadow:0 18px 44px rgba(14,14,26,.09)}
.sb-6{grid-column:span 6}.sb-4{grid-column:span 4}.sb-3{grid-column:span 3}.sb-12{grid-column:span 12}
.sb-dunkel{background:linear-gradient(150deg,#12101f,#221646);border-color:#2a2150;color:#c9c9e6}
.sb-dunkel:hover{border-color:#4c3a8a}
.sb.sb-dunkel h3{color:#fff}
.sb-violett{background:linear-gradient(135deg,var(--violet),#5b21b6);border-color:transparent;color:#e9e2ff}
.sb.sb-violett h3{color:#fff}
.sb-eyebrow{font-size:10.5px;letter-spacing:2.4px;text-transform:uppercase;font-weight:800;
  color:var(--violet);margin-bottom:12px}
.sb.sb-dunkel .sb-eyebrow{color:#a78bfa}
.sb.sb-violett .sb-eyebrow{color:#ddd0ff}
.sb h3{font-size:clamp(17px,2vw,21px);font-weight:800;letter-spacing:-.4px;color:var(--tinte);margin:0 0 8px}
.sb p{font-size:14.5px;line-height:1.6;color:var(--text2);margin:0}
.sb.sb-dunkel p{color:#a9a9cc}
.sb.sb-violett p{color:#e4dbff}
.sb-riese{font-size:clamp(58px,7vw,96px);font-weight:800;letter-spacing:-.05em;line-height:.95;
  background:linear-gradient(120deg,#a78bfa,#7c3aed);-webkit-background-clip:text;background-clip:text;
  color:transparent;margin-bottom:6px}
.sb-liste{list-style:none;margin:12px 0 0;padding:0;display:grid;gap:9px}
.sb-liste li{position:relative;padding-left:23px;font-size:14px;color:var(--text2)}
.sb.sb-dunkel .sb-liste li{color:#b8b8d8}
.sb.sb-dunkel .sb-liste b{color:#fff}
.sb-liste li::before{content:'✓';color:var(--violet);font-weight:800;position:absolute;left:0;top:0}
.sb.sb-dunkel .sb-liste li::before{color:#a78bfa}
.sb-mini{display:flex;flex-direction:column;gap:6px;padding:22px 22px 20px}
.sb-mini h3{font-size:16px}
.sb-mini p{font-size:13.5px}
.sb-tag{position:absolute;top:18px;right:18px;font-size:10px;font-weight:800;letter-spacing:1.4px;
  text-transform:uppercase;color:#fff;background:var(--violet);border-radius:99px;padding:5px 11px}
.serie-hinweis{text-align:center;margin-top:22px;font-size:14px;color:var(--muted)}
@media(max-width:960px){.sb-6,.sb-4{grid-column:span 6}.sb-3{grid-column:span 6}}
@media(max-width:620px){.sb-6,.sb-4,.sb-3{grid-column:span 12}}

/* ═══════════════════════════════════════════════════════════════════
   AUFBAU-ANIMATION v2 – cinematischer (Grain, Glow, Prozent, Sweep)
   ═══════════════════════════════════════════════════════════════════ */
.bau-buehne::before{content:'';position:absolute;inset:-50%;width:200%;height:200%;opacity:.045;
  pointer-events:none;z-index:0;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 512 512' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.72' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size:256px 256px;animation:khGrain .85s steps(1) infinite}
.bau-orb{position:absolute;border-radius:50%;filter:blur(75px);pointer-events:none;z-index:0}
.bau-orb-1{width:560px;height:560px;background:radial-gradient(circle,#7c3aed4d,transparent 70%);
  top:-160px;left:-140px;animation:khOrb 9s ease-in-out infinite alternate}
.bau-orb-2{width:480px;height:480px;background:radial-gradient(circle,#a78bfa2e,transparent 70%);
  bottom:-170px;right:-120px;animation:khOrb 11s ease-in-out infinite alternate-reverse}
.bau-phase1,.bau-phase2{position:relative;z-index:2}
.bau-prozent{font-family:'Outfit',sans-serif;font-size:clamp(64px,10vw,110px);font-weight:800;
  letter-spacing:-.05em;line-height:1.12;text-align:center;padding:0 .14em .07em;
  background:linear-gradient(120deg,#a78bfa,#7c3aed 60%,#c4b5fd);
  -webkit-background-clip:text;background-clip:text;color:transparent}
.bau-prozent small{font-size:.42em;font-weight:700;letter-spacing:normal;margin-left:.04em}
.bau-schritt{font-size:15.5px}
.bau-schritt.laeuft{background:rgba(124,58,237,.16);border-color:rgba(124,58,237,.55);
  box-shadow:0 0 34px rgba(124,58,237,.28);color:#fff;transform:scale(1.03)}
.bau-titel-oben{font-family:'Outfit',sans-serif;color:#fff;font-size:clamp(18px,2.6vw,24px);
  font-weight:800;letter-spacing:-.4px;text-align:center;margin:0}
.bau-titel-oben small{display:block;font-size:12px;font-weight:700;letter-spacing:2.4px;
  text-transform:uppercase;color:#8b8bb0;margin-bottom:8px}
.bau-frame-halter{transform:scale(.94);opacity:0;transition:transform .8s cubic-bezier(.16,1,.3,1),opacity .8s}
.bau-phase2.da .bau-frame-halter{transform:scale(1);opacity:1}
.bau-glanz{position:absolute;inset:0;pointer-events:none;z-index:3;overflow:hidden;opacity:0}
.bau-glanz.laeuft{opacity:1}
.bau-glanz::before{content:'';position:absolute;top:-30%;bottom:-30%;width:34%;left:-40%;
  background:linear-gradient(105deg,transparent,#ffffff2b 45%,#ffffff44 50%,#ffffff2b 55%,transparent);
  transform:skewX(-14deg)}
.bau-glanz.laeuft::before{animation:bauSweep 1.5s cubic-bezier(.5,0,.3,1) .15s forwards}
@keyframes bauSweep{to{left:120%}}
.bau-domain-titel{font-family:'Outfit',sans-serif;text-align:center;margin:0 0 4px}
.bau-domain-titel b{display:block;font-size:clamp(20px,3.2vw,30px);font-weight:800;
  letter-spacing:-.5px;color:#fff}
.bau-domain-titel span{font-size:12.5px;letter-spacing:2px;text-transform:uppercase;color:#8b8bb0;font-weight:700}
@media(prefers-reduced-motion:reduce){
.bau-buehne::before{animation:none}.bau-orb-1,.bau-orb-2{animation:none}}
/* WICHTIG: hidden-Attribut gewinnt IMMER gegen display-Klassen (Bug-Fix Vorschau-Overlay) */
[hidden]{display:none!important}

/* ═══ KINO-KOPF (Unterseiten – kompakte Variante des Kino-Heros) ═══ */
.kino-hero.kompakt{min-height:clamp(380px,54svh,560px)}
.kino-hero.kompakt h1{font-size:clamp(38px,6.6vw,86px)}
.kino-hero.kompakt .kh-inhalt{padding:70px 24px 80px}
.kino-hero.kompakt .kh-orb-1{width:420px;height:420px;top:-130px}
.kino-hero.kompakt .kh-orb-2{width:380px;height:380px;bottom:-140px}
.kino-hero.kompakt .kh-sub a{color:#c4b5fd;font-weight:600;text-decoration:underline;text-underline-offset:3px}
.kino-hero.kompakt .kh-sub a:hover{color:#fff}

/* ═══ KINO-SCHLUSS (Startseite, zweiter grosser Moment) ═══ */
.kino-schluss{position:relative;overflow:hidden;text-align:center;padding:120px 24px 130px;
  background:radial-gradient(ellipse 90% 75% at 50% 115%,#2a1b52 0%,#12101f 48%,#0a0a14 100%)}
.kino-schluss .kh-grain{opacity:.045}
.kino-schluss h2{position:relative;z-index:5;font-size:clamp(38px,6.4vw,84px);line-height:1;
  letter-spacing:-.035em;font-weight:800;color:#fff;margin:0 0 22px}
.kino-schluss .kh-ctas{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;
  opacity:0;translate:0 16px;transition:opacity .7s ease,translate .7s cubic-bezier(.16,1,.3,1)}
.kh-ctas.an{opacity:1;translate:0 0}
.kh-sub{margin-bottom:38px}
.kino-schluss .kh-cta{position:relative;z-index:5}
.kino-schluss .kh-gratis{position:relative;z-index:5}

/* ═══ KINO-SCHRITTE (Ablauf: riesige Verlaufs-Nummern + Glow-Linie) ═══ */
.kino-schritte{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;position:relative;margin-top:14px}
.kino-schritte::before{content:'';position:absolute;top:52px;left:12%;right:12%;height:1.5px;
  background:linear-gradient(90deg,transparent,#7c3aed66 20%,#7c3aed66 80%,transparent);z-index:0}
.ks-karte{position:relative;z-index:1;border-radius:18px;border:1.5px solid #ffffff14;
  background:linear-gradient(165deg,#ffffff08,#ffffff03);padding:30px 26px 26px;
  transition:transform .25s,border-color .25s,box-shadow .25s}
.ks-karte:hover{transform:translateY(-5px);border-color:#7c3aed66;box-shadow:0 20px 50px rgba(124,58,237,.18)}
.ks-nr{font-size:clamp(52px,6vw,78px);font-weight:800;letter-spacing:-.05em;line-height:1;
  background:linear-gradient(150deg,#c4b5fd,#7c3aed 70%);-webkit-background-clip:text;
  background-clip:text;color:transparent;display:block;margin-bottom:14px}
.ks-karte h3{color:#fff;font-size:19px;font-weight:800;letter-spacing:-.3px;margin:0 0 9px}
.ks-karte p{color:#a9a9cc;font-size:14.5px;line-height:1.65;margin:0 0 14px}
.ks-dauer{display:inline-flex;align-items:center;gap:7px;font-size:11.5px;font-weight:800;
  letter-spacing:1.6px;text-transform:uppercase;color:#a78bfa}
.ks-dauer::before{content:'';width:6px;height:6px;border-radius:50%;background:#7c3aed;
  box-shadow:0 0 10px #7c3aed}
@media(max-width:820px){.kino-schritte{grid-template-columns:1fr}.kino-schritte::before{display:none}}

/* ═══ PREIS-BÜHNE (dunkel, Grain, riesige Verlaufs-Zahl) ═══ */
.preis-buehne{position:relative;overflow:hidden;border-radius:26px;max-width:880px;margin:8px auto 0;
  background:radial-gradient(ellipse 100% 90% at 50% -20%,#2a1b52 0%,#141126 55%,#0d0c18 100%);
  border:1.5px solid #2a2150;box-shadow:0 34px 90px rgba(14,10,40,.45)}
.preis-buehne::before{content:'';position:absolute;inset:-50%;width:200%;height:200%;opacity:.04;
  pointer-events:none;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 512 512' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.72' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size:256px 256px}
.pb-orb{position:absolute;width:420px;height:420px;border-radius:50%;pointer-events:none;
  background:radial-gradient(circle,#7c3aed40,transparent 70%);filter:blur(60px);
  top:-150px;right:-120px;animation:khOrb 10s ease-in-out infinite alternate}
.pb-band{position:relative;text-align:center;font-size:11.5px;font-weight:800;letter-spacing:2.2px;
  text-transform:uppercase;color:#c4b5fd;padding:15px 20px 0}
.pb-innen{position:relative;padding:16px clamp(24px,5vw,54px) 40px;text-align:center}
.pb-zahl{display:flex;align-items:baseline;justify-content:center;gap:10px;margin:4px 0 2px}
.pb-chf{font-size:clamp(19px,2.4vw,26px);font-weight:700;color:#b8b8d4}
.pb-wert{font-size:clamp(84px,13vw,148px);font-weight:800;letter-spacing:-.055em;line-height:1;
  background:linear-gradient(130deg,#c4b5fd,#8b5cf6 45%,#a78bfa);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 8px 40px rgba(124,58,237,.35))}
.pb-pro{font-size:clamp(16px,2vw,21px);font-weight:600;color:#8b8bb0}
/* ── Zwei-Stufen-Karten (S / M) ─────────────────────────────── */
.pb-stufen{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:10px}
.pb-stufe{min-width:0;border:2px solid rgba(255,255,255,.1);border-radius:16px;
  padding:16px 12px;display:flex;flex-direction:column;align-items:center;text-align:center}
.pb-stufe-aktiv{border-color:rgba(124,58,237,.55);background:rgba(124,58,237,.08)}
.pb-stufe-name{font-size:14px;letter-spacing:1.5px;font-weight:800;color:#c4b5fd}
.pb-stufe small{color:#a7a7c8;font-size:12.5px;line-height:1.4;margin-top:2px}
/* Kartenzahl: kleiner als die grosse Einzel-Hero-Zahl, passt in die halbe Spalte */
.pb-zahl-s{gap:5px;margin:6px 0 4px;flex-wrap:nowrap;max-width:100%}
.pb-zahl-s .pb-chf{font-size:clamp(13px,3.2vw,17px)}
.pb-zahl-s .pb-wert{font-size:clamp(40px,10vw,58px);letter-spacing:-.04em}
.pb-zahl-s .pb-pro{font-size:clamp(11px,2.6vw,14px)}
@media (max-width:430px){
  .pb-stufen{grid-template-columns:1fr;gap:11px}
  .pb-zahl-s .pb-wert{font-size:clamp(52px,15vw,64px)}
}
.pb-unter{color:#b8b8d4;font-size:15px;margin:0 0 16px}
.pb-gratis{display:inline-flex;align-items:center;gap:9px;background:#4ade8016;border:1.5px solid #4ade8040;
  color:#86efac;border-radius:99px;padding:9px 20px;font-size:14px;font-weight:700;margin-bottom:26px}
.pb-gratis .durch{color:#6f8f7d;text-decoration:line-through;font-weight:500}
.pb-liste{list-style:none;margin:0 auto 28px;padding:0;max-width:620px;display:grid;
  grid-template-columns:1fr 1fr;gap:11px 26px;text-align:left}
.pb-liste li{display:flex;gap:10px;align-items:baseline;font-size:14.5px;color:#c9c9e6;line-height:1.55}
.pb-liste li::before{content:'✓';color:#a78bfa;font-weight:800;flex-shrink:0}
.pb-cta{position:relative;display:inline-flex;align-items:center;gap:9px;background:var(--violet);
  color:#fff;font-weight:800;font-size:16.5px;padding:18px 40px;border-radius:13px;
  box-shadow:0 12px 44px #7c3aed55;transition:transform .2s,box-shadow .2s,background .2s}
.pb-cta:hover{background:var(--violet-d);color:#fff;transform:translateY(-3px);box-shadow:0 18px 58px #7c3aed77}
.pb-hinweis{margin:20px auto 0;max-width:560px;font-size:12.5px;color:#8080a0;line-height:1.6}
.pb-hinweis a{color:#a78bfa}
@media(max-width:620px){.pb-liste{grid-template-columns:1fr}}

/* ═══ ÜBER-UNS-KINO (Foto mit Glow-Ring + Zitat-Inszenierung) ═══ */
.person-buehne{position:relative}
.person-buehne::before{content:'';position:absolute;inset:-3px;border-radius:inherit;z-index:-1;
  background:linear-gradient(140deg,#a78bfa,#7c3aed 50%,transparent 80%);opacity:.55;filter:blur(14px)}
.zitat-kino{position:relative;font-size:clamp(21px,2.8vw,30px);font-weight:800;letter-spacing:-.5px;
  line-height:1.3;color:var(--tinte);padding-left:22px;margin:0 0 18px}
.zitat-kino::before{content:'';position:absolute;left:0;top:.2em;bottom:.2em;width:3.5px;border-radius:3px;
  background:linear-gradient(180deg,#a78bfa,#7c3aed)}
.zitat-kino em{font-style:normal;background:linear-gradient(120deg,#8b5cf6,#6d28d9);
  -webkit-background-clip:text;background-clip:text;color:transparent}

/* «Neu»-Badge auf Cinema/Impact-Karten im Vorlagen-Slider */
.v-neu{position:absolute;top:12px;left:12px;z-index:3;font-size:10px;font-weight:800;
  letter-spacing:1.6px;text-transform:uppercase;color:#fff;border-radius:99px;padding:5px 12px;
  background:linear-gradient(120deg,#8b5cf6,#6d28d9);box-shadow:0 4px 16px rgba(124,58,237,.45)}
/* ═══ FAQ-KINO – Karten-Design im Bento-Stil (ersetzt Alt-Optik komplett) ═══ */
.faq.faq-kino{max-width:860px;counter-reset:faqNr}
.faq.faq-kino details{counter-increment:faqNr;position:relative;
  border:1.5px solid var(--linie);border-radius:18px;background:var(--weiss);
  margin-bottom:14px;overflow:hidden;
  transition:border-color .25s ease,box-shadow .25s ease,transform .25s ease}
.faq.faq-kino details:hover{border-color:var(--linie-s);transform:translateY(-2px);
  box-shadow:0 12px 34px rgba(14,14,26,.07)}
.faq.faq-kino details[open]{border-color:#c4b5fd;transform:none;
  box-shadow:0 16px 48px rgba(124,58,237,.13)}
.faq.faq-kino details::before{content:none}
.faq.faq-kino summary{display:flex;align-items:center;gap:16px;cursor:pointer;
  list-style:none;padding:21px 22px;font-weight:800;font-size:clamp(16px,1.9vw,18px);
  letter-spacing:-.25px;color:var(--tinte)}
.faq.faq-kino summary::-webkit-details-marker{display:none}
.faq.faq-kino summary::before{content:counter(faqNr,decimal-leading-zero);
  flex-shrink:0;font-size:12.5px;font-weight:800;letter-spacing:.8px;line-height:1;
  background:linear-gradient(140deg,#8b5cf6,#6d28d9);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  transform:translateY(1px)}
.faq.faq-kino summary .frage,.faq.faq-kino summary b{flex:1;font-weight:inherit}
.faq.faq-kino summary::after{content:'+';flex-shrink:0;display:grid;place-items:center;
  width:30px;height:30px;border-radius:50%;border:1.5px solid var(--linie);
  font-size:19px;font-weight:400;line-height:1;color:var(--violet);
  transition:transform .3s cubic-bezier(.4,0,.2,1),background .25s,color .25s,border-color .25s}
.faq.faq-kino details:hover summary::after{border-color:var(--violet)}
.faq.faq-kino details[open] summary::after{transform:rotate(45deg);
  background:var(--violet);border-color:var(--violet);color:#fff}
.faq.faq-kino .antwort{padding:0 22px 22px 63px;color:var(--text2);
  font-size:15px;line-height:1.7;max-width:72ch}
.faq.faq-kino .antwort a{color:var(--violet);font-weight:600}
@media(max-width:560px){
.faq.faq-kino summary{padding:17px 16px;gap:12px}
.faq.faq-kino summary::before{display:none}
.faq.faq-kino .antwort{padding:0 16px 18px 16px}}

/* ═══ SHOP-PANEL ═══ */
.sp-status{position:sticky;top:70px;z-index:50;background:var(--gruen-pale);border:1.5px solid var(--gruen);
  color:var(--gruen);border-radius:12px;padding:12px 18px;font-weight:700;font-size:14px;margin-bottom:18px}
.sp-status.ist-fehler{background:var(--rot-pale);border-color:var(--rot);color:var(--rot)}
.sp-tabs{display:flex;gap:6px;border-bottom:2px solid var(--linie);margin-bottom:24px;flex-wrap:wrap}
.sp-tab{background:none;border:none;cursor:pointer;font:inherit;font-weight:700;font-size:14.5px;
  color:var(--text2);padding:11px 16px;border-radius:11px 11px 0 0;position:relative;
  display:inline-flex;align-items:center;gap:7px}
.sp-tab:hover{color:var(--tinte);background:var(--violet-soft)}
.sp-tab.aktiv{color:var(--violet)}
.sp-tab.aktiv::after{content:'';position:absolute;left:10px;right:10px;bottom:-2px;height:2.5px;
  background:var(--violet);border-radius:2px}
.sp-badge{background:var(--linie);color:var(--text2);border-radius:99px;font-size:11px;
  font-weight:800;padding:2px 8px;min-width:22px;text-align:center}
.sp-badge-neu{background:var(--violet);color:#fff}
.sp-kopfzeile{display:flex;justify-content:space-between;align-items:center;gap:14px;margin-bottom:16px;flex-wrap:wrap}
.sp-karte{border:1.5px solid var(--linie);border-radius:16px;background:var(--weiss);
  padding:22px 22px 20px;margin-bottom:18px}
.sp-karte h3{font-size:17px;font-weight:800;letter-spacing:-.3px;margin:0 0 10px}
.sp-hilfe{font-size:13.5px;color:var(--text2);margin:0 0 12px;line-height:1.6}
.sp-anleitung{margin:0 0 18px;padding-left:20px;font-size:13.5px;color:var(--text2);display:grid;gap:6px}
.sp-feld{margin-bottom:14px}
.sp-feld label{display:block;font-size:12px;font-weight:800;letter-spacing:.8px;text-transform:uppercase;
  color:var(--text2);margin-bottom:6px}
.sp-feld label small{text-transform:none;letter-spacing:0;font-weight:600;color:var(--muted)}
.sp-feld input,.sp-feld textarea,.sp-feld select{width:100%;border:1.5px solid var(--linie-s);
  border-radius:10px;padding:11px 13px;font:inherit;font-size:14.5px;background:var(--weiss)}
.sp-feld input:focus,.sp-feld textarea:focus,.sp-feld select:focus{outline:none;border-color:var(--violet)}
.sp-zeile{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.sp-zeile2{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.sp-schalter{display:flex;align-items:center;gap:10px;font-size:14.5px;cursor:pointer;margin-top:4px}
.sp-schalter input{width:19px;height:19px;accent-color:var(--violet)}
.sp-testresultat{font-size:13.5px;font-weight:700}
.sp-testresultat.ist-ok{color:var(--gruen)}
.sp-testresultat.ist-fehler{color:var(--rot)}
/* Vorher/Nachher-Paare im Kundenportal */
.vgl-karte{border:1.5px solid var(--linie);border-radius:12px;padding:14px 16px;margin-bottom:10px;
  background:var(--feld)}
.vgl-kopf{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px}
.vgl-kopf b{font-size:14px}
.vgl-weg{border:0;background:transparent;color:var(--sk);font-size:15px;cursor:pointer;
  width:28px;height:28px;border-radius:50%;display:grid;place-items:center;transition:all .15s}
.vgl-weg:hover{background:rgba(155,44,44,.1);color:#9b2c2c}

/* Buchungs-Einstellungen (Leistungen, Arbeitszeiten, Sperren).
   Die Felder dort standen ohne Klasse im HTML – deshalb griff die
   Panel-Regel «.feld label» nicht und die Beschriftung klebte am
   Eingabefeld («Name[Test 1]»). Hier holen wir das nach. */
.bu-p-l label,
.bu-p-sperre label,
.bu-p-anz label{display:block;font-size:11px;font-weight:800;letter-spacing:1.2px;
  text-transform:uppercase;color:var(--muted);margin-bottom:6px}
.bu-p-l label small,
.bu-p-anz label small{font-weight:600;letter-spacing:.2px;text-transform:none;
  color:var(--sk);font-size:11px}
/* Eingabefelder wie überall im Portal */
.bu-p-l input[type=text],
.bu-p-l select,
.bu-p-sperre input,
.bu-p-anz input{width:100%;padding:11px 13px;border:1.5px solid var(--linie);
  border-radius:10px;font:inherit;font-size:14.5px;background:#fff;color:var(--tinte);
  transition:border-color .15s,box-shadow .15s}
.bu-p-l input[type=text]:focus,
.bu-p-l select:focus,
.bu-p-sperre input:focus,
.bu-p-anz input:focus{outline:none;border-color:var(--violet);
  box-shadow:0 0 0 3px rgba(124,58,237,.1)}
/* Die Karte einer Leistung */
.bu-p-l{border:1.5px solid #eceaf6;border-radius:16px;padding:20px;margin-bottom:14px;
  background:#fff}
.bu-p-l>div{margin-bottom:16px}
.bu-p-l>div:last-child{margin-bottom:0}
.bu-p-l .feld-reihe{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:16px}
.bu-p-l .feld-reihe>div{margin-bottom:0}
/* Fusszeile: buchbar-Haken links, Löschen rechts */
.bu-p-l-fuss{display:flex;justify-content:space-between;align-items:center;
  gap:12px;padding-top:16px;margin-top:4px;border-top:1.5px solid #f3f1fa}
@media(max-width:560px){
  .bu-p-l{padding:16px}
  .bu-p-l .feld-reihe{grid-template-columns:1fr;gap:14px}
}

/* Signatur-Designs im Bestellprozess: Abzeichen mit Aufpreis.
   Die Karte selbst bleibt wie die anderen – nur ein Hinweis oben rechts,
   damit niemand aus Versehen 39.– mehr bezahlt. */
.vorlage-karte.ist-signatur{position:relative}
.v-plus{position:absolute;bottom:10px;right:10px;z-index:3;
  background:var(--violet,#7c3aed);color:#fff;font-size:11px;font-weight:800;
  letter-spacing:.4px;padding:5px 10px;border-radius:999px;
  box-shadow:0 3px 10px rgba(20,12,50,.28)}
.vorlage-karte.ist-signatur.gewaehlt .v-plus{background:var(--violet)}

/* Signatur-Block mit echten Vorschauen: Text oben, Kacheln darunter.
   Die zweispaltige Fassung (Text links, Liste rechts) hatte keine Bilder –
   «Kinetik: Riesentypografie» kann sich niemand vorstellen. */
.sig-hinweis.sig-breit{display:block}
.sig-kacheln{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));
  gap:16px;margin-top:26px}
.sig-kacheln .vorlage-karte{position:relative}
/* Aufpreis-Abzeichen – damit niemand denkt, das sei im Preis drin */
.vk-plus{position:absolute;top:9px;right:9px;z-index:4;background:var(--tinte);
  color:#fff;font-size:11px;font-weight:800;letter-spacing:.3px;padding:4px 9px;
  border-radius:999px;box-shadow:0 3px 10px rgba(20,12,50,.3)}
@media(max-width:640px){
  .sig-kacheln{grid-template-columns:1fr;gap:14px}
}

/* ── Signatur-Designs (Hinweis auf der Vorlagen-Seite) ───────
   Zwei Spalten: links die Erklärung, rechts die Aufzählung.
   Bestehende Variablen, kein neues Design. */
.sig-hinweis{display:grid;grid-template-columns:1.15fr .85fr;gap:34px;
  align-items:start;padding:34px;border:1.5px solid var(--linie);border-radius:20px;
  background:var(--weiss)}
.sig-links h2{margin:6px 0 14px;font-size:28px;font-weight:800;letter-spacing:-.6px;
  line-height:1.2}
.sig-links p{margin:0 0 12px;font-size:15px;line-height:1.7;color:var(--sk)}
.sig-cta{padding:12px 15px;border-radius:11px;background:rgba(124,58,237,.06);
  font-size:14.5px}
.sig-liste{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:1px;
  border:1.5px solid var(--linie);border-radius:14px;overflow:hidden}
.sig-liste li{padding:13px 16px;background:var(--weiss);display:flex;flex-direction:column;
  gap:2px;border-bottom:1px solid var(--linie)}
.sig-liste li:last-child{border-bottom:0;background:var(--feld)}
.sig-liste b{font-size:14.5px;font-weight:700}
.sig-liste span{font-size:12.5px;color:var(--muted);line-height:1.45}
@media(max-width:820px){
  .sig-hinweis{grid-template-columns:1fr;gap:24px;padding:26px 22px}
  .sig-links h2{font-size:24px}
}

/* ── Zusatzmodule auf der Preisseite ─────────────────────────
   Bewusst im Stil der bestehenden Karten: heller Grund, weiche
   Rundung, zarte Linie. Kein neues Design – nur ein neuer Block. */
.module-raster{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
  gap:18px;margin-top:34px}
.modul-karte{background:var(--weiss);border:1.5px solid var(--linie);border-radius:18px;
  padding:26px 24px;display:flex;flex-direction:column;
  transition:border-color .18s,transform .18s,box-shadow .18s}
.modul-karte:hover{border-color:var(--violet);transform:translateY(-3px);
  box-shadow:0 14px 34px -18px rgba(20,12,50,.28)}
.mk-kopf{display:flex;align-items:center;gap:11px;margin-bottom:14px}
.mk-zeichen{font-size:26px;line-height:1}
.mk-kopf h3{margin:0;font-size:19px;font-weight:800;letter-spacing:-.3px}
.mk-preis{margin:0 0 14px;font-size:26px;font-weight:800;color:var(--violet);
  letter-spacing:-.6px;line-height:1.1}
.mk-preis small{font-size:13px;font-weight:600;color:var(--muted);letter-spacing:0}
.mk-text{margin:0 0 16px;font-size:14.5px;line-height:1.65;color:var(--sk)}
.mk-liste{margin:0;padding:0;list-style:none;font-size:14px;line-height:1.55;
  display:flex;flex-direction:column;gap:8px}
.mk-liste li{padding-left:22px;position:relative;color:var(--sk)}
.mk-liste li::before{content:'✓';position:absolute;left:0;top:0;color:var(--violet);
  font-weight:800}
.mk-mehr{margin:16px 0 0;padding-top:14px;border-top:1px solid var(--linie);font-size:14px}
.mk-mehr a{color:var(--violet);font-weight:700;text-decoration:none}
.mk-mehr a:hover{text-decoration:underline}
.mk-fuss{margin-top:26px;font-size:14px;color:var(--muted);line-height:1.6;
  padding:14px 18px;border-radius:12px;background:rgba(124,58,237,.05)}
@media(max-width:640px){
  .module-raster{grid-template-columns:1fr;gap:14px}
  .modul-karte{padding:22px 20px}
}

/* Vorher/Nachher: Bildauswahl mit Vorschau */
.vgl-wahl{display:flex;align-items:center;gap:10px}
.vgl-bild{width:74px;height:56px;object-fit:cover;border-radius:8px;flex:0 0 auto;
  border:1.5px solid var(--linie);background:var(--feld)}
.vgl-wahl select{flex:1;min-width:0}

/* Panel-Kopfzeile am Handy.
   Die Regel «nav.top-nav { flex-direction: column }» gilt für das
   Hauptmenü der Website – dort ist ein Stapel richtig, weil er sich
   ausklappt. Im Kundenportal ist dieselbe Klasse aber eine feste
   Kopfzeile: Dort stapeln sich die Knöpfe über den Inhalt (Kopf 60px
   hoch, Knöpfe bis y=216). Darum hier zurückstellen. */
@media (max-width: 900px) {
  /* Eine Reihe statt Stapel. Die Vorgabe «nav.top-nav{flex-direction:column}»
     gilt fürs Hauptmenü der Website – dort klappt es auf. Hier ist es eine
     feste Kopfzeile: Gestapelte Knöpfe ragen über den Kopf und legen sich
     über den Inhalt. */
  /* Die Panel-Kopfzeile ist KEIN ausklappbares Menü: Die Vorgabe macht
     daraus ein «position:fixed; top:74px»-Panel, das unter dem Kopf hängt
     und sich über den Inhalt legt. Hier bleibt es eine normale Reihe. */
  body.kp nav.top-nav.kp-aktionen{position:static;top:auto;left:auto;right:auto;
    width:auto;height:auto;transform:none;visibility:visible;opacity:1;
    background:none;box-shadow:none;border:0;padding:0;
    flex-direction:row;flex-wrap:nowrap;
    gap:6px;align-items:center;justify-content:flex-end;min-width:0}
  /* Kompakt: sonst wird eine einzelne Reihe höher als der Kopf */
  body.kp nav.top-nav.kp-aktionen .kp-btn,
  body.kp nav.top-nav.kp-aktionen .kp-abmelden{padding:6px 10px;font-size:12px;
    line-height:1.3;white-space:nowrap;margin:0}
  body.kp .kp-domain{min-width:0;overflow:hidden;text-overflow:ellipsis;
    white-space:nowrap;flex:0 1 auto}
  /* Der Kopf darf mitwachsen, falls doch etwas mehr Platz nötig ist */
  body.kp header{height:auto;min-height:60px}
  body.kp .top-innen{min-height:60px;padding-top:8px;padding-bottom:8px}
}
@media (max-width: 560px) {
  /* Feedback ist verzichtbar – die Vorschau nicht. */
  body.kp nav.top-nav.kp-aktionen a[href="feedback.php"]{display:none}
  /* Die Domain steht ohnehin im Panel – am Handy Platz für die Knöpfe */
  body.kp .kp-domain{display:none}
}

/* Gesperrte Bestell-Knöpfe, solange der Shop nicht freigegeben ist.
   Sichtbar lassen (der Preis soll stehen), aber nicht klickbar. */
.pb-cta.ist-aus{opacity:.45;cursor:not-allowed;pointer-events:none;
  position:relative;filter:grayscale(.6)}
.pb-cta.ist-aus::after{content:'bald';position:absolute;top:-9px;right:-9px;
  background:var(--tinte);color:#fff;font-size:10px;font-weight:800;
  letter-spacing:.5px;padding:3px 8px;border-radius:999px}

/* Kontrast-Warnung bei den Design-Farben */
.kp-kontrast{margin:10px 0 0;padding:9px 13px;border-radius:9px;font-size:13px;
  line-height:1.5;font-weight:600}
.kp-kontrast.gut{background:rgba(74,222,128,.1);color:#166534}
.kp-kontrast.ok{background:rgba(124,58,237,.07);color:var(--sk)}
.kp-kontrast.warn{background:#fff8e6;color:#8a6100}
.kp-kontrast.weh{background:rgba(155,44,44,.08);color:#9b2c2c}

/* Hinweis auf den Google-Profil-Service – erscheint nur, wenn die
   Kundschaft noch keine Sterne hat. Dort ist er hilfreich statt Werbung. */
.kp-gbp-tipp{background:#f6f5fb;border:1.5px solid #e6e2f5;border-radius:14px;
  padding:16px 18px;margin:14px 0 4px}
.kp-gbp-tipp b{display:block;font-size:14.5px;margin-bottom:6px;color:var(--tinte)}
.kp-gbp-tipp p{margin:0 0 9px;font-size:13.5px;line-height:1.6;color:var(--sk)}

/* Wartungs-Hinweis im Kundenportal */
.kp-wartung{background:#fff8e6;border:1.5px solid #f0c674;border-radius:14px;
  padding:14px 18px;margin-bottom:18px}
.kp-wartung b{display:block;font-size:15px;margin-bottom:4px;color:#8a6100}
.kp-wartung p{margin:0;font-size:13.5px;line-height:1.6;color:#6b5220}

/* Meine Seiten (Kundenportal) */
.ss-karte{border:1.5px solid var(--linie);border-radius:14px;margin-bottom:12px;background:var(--karte);overflow:hidden}
.ss-karte summary{cursor:pointer;padding:14px 16px;display:flex;justify-content:space-between;
  align-items:center;gap:12px;flex-wrap:wrap;list-style:none}
.ss-karte summary::-webkit-details-marker{display:none}
.ss-karte summary::before{content:'▸';color:var(--sk);font-size:12px;transition:transform .15s}
.ss-karte[open] summary::before{transform:rotate(90deg)}
.ss-karte summary b{flex:1;font-size:15px}
.ss-karte summary small{color:var(--sk);font-size:12px;font-variant-numeric:tabular-nums}
.ss-karte-in{padding:4px 16px 16px;border-top:1px solid var(--linie)}
.ss-werkzeuge{display:flex;gap:5px;flex-wrap:wrap;margin-bottom:7px}
.ss-wz{border:1px solid var(--linie);background:var(--feld);border-radius:7px;padding:5px 10px;
  font:inherit;font-size:12px;font-weight:700;cursor:pointer;color:var(--sk)}
.ss-wz:hover{border-color:var(--v);color:var(--v)}
.ss-karte-in textarea{width:100%;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:13px;line-height:1.6;padding:12px;border:1px solid var(--linie);border-radius:10px;
  background:var(--bg);color:var(--tx);resize:vertical}
.ss-karte-fuss{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-top:14px}
.ss-ansehen{font-size:13px;color:var(--sk);text-decoration:none}
.ss-ansehen:hover{color:var(--v);text-decoration:underline}
.ss-status{font-size:13px;font-weight:600}
.ss-status.ist-gut{color:#14804a}
.ss-status.ist-weh{color:#9b2c2c}

/* Bewertungs-Stand (nur Anzeige – kommt von Google) */
.bw-stand{display:flex;align-items:center;gap:16px;padding:14px 16px;border-radius:12px;
  background:var(--feld);border:1.5px solid var(--linie);margin-bottom:4px}
.bw-stand.ist-da{border-color:rgba(124,58,237,.3);background:rgba(124,58,237,.05)}
.bw-zahl{display:flex;align-items:baseline;gap:3px;flex:0 0 auto}
.bw-zahl b{font-size:30px;font-weight:800;letter-spacing:-.02em;color:var(--tx);
  font-variant-numeric:tabular-nums}
.bw-zahl span{font-size:19px;color:#f5a623}
.bw-info{min-width:0}
.bw-info b{display:block;font-size:14.5px;margin-bottom:1px}
.bw-info small{display:block;font-size:12.5px;color:var(--sk)}
.bw-leer b{color:var(--sk);font-weight:600}

/* Google-Sterne im Kundenportal */
.bw-google{border:1.5px solid var(--linie);border-radius:14px;padding:18px;margin-bottom:22px;
  background:linear-gradient(180deg,rgba(124,58,237,.04),transparent 60%)}
.bw-google-kopf{display:flex;justify-content:space-between;align-items:center;gap:12px;
  flex-wrap:wrap;margin-bottom:6px}
.bw-google-kopf b{font-size:15px}
.bw-holen{padding:8px 14px;font-size:13px;white-space:nowrap}
.bw-meldung{margin:10px 0 0;padding:9px 12px;border-radius:9px;font-size:13.5px;line-height:1.5}
.bw-meldung.ist-gut{background:rgba(20,128,74,.1);color:#14804a}
.bw-meldung.ist-weh{background:rgba(155,44,44,.09);color:#9b2c2c}
.bw-untertitel{font-size:15px;font-weight:800;margin:0 0 4px}

/* Galerie: Kachel mit Lösch-Knopf */
.gal-huelle{position:relative;display:block}
.gal-weg{position:absolute;top:6px;right:6px;z-index:2;width:26px;height:26px;border:0;
  border-radius:50%;background:rgba(20,16,28,.72);color:#fff;font-size:13px;line-height:1;
  cursor:pointer;display:grid;place-items:center;opacity:0;transition:opacity .15s,background .15s;
  -webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}
.gal-huelle:hover .gal-weg,.gal-weg:focus{opacity:1}
.gal-weg:hover{background:#9b2c2c}
.gal-weg:disabled{opacity:1;background:#9b2c2c;cursor:default}
@media(hover:none){.gal-weg{opacity:1}}

/* Kalender-Abo im Termine-Tab */
.bu-kal{display:flex;gap:9px;align-items:center;flex-wrap:wrap;margin-bottom:10px}
.bu-kal input{flex:1;min-width:220px;font-family:ui-monospace,SFMono-Regular,monospace;
  font-size:12px;padding:10px 12px;border:1px solid var(--linie);border-radius:9px;
  background:var(--feld);color:var(--sk)}
.bu-kal .kp-btn{white-space:nowrap}
.bu-kal-hilfe{border:1px solid var(--linie);border-radius:10px;padding:10px 14px}
.bu-kal-hilfe summary{cursor:pointer;font-weight:600;font-size:13.5px}
.bu-kal-in{margin-top:10px}
.bu-kal-in p{font-size:13.5px;line-height:1.6;margin:0 0 10px}
.bu-kal-in small{color:var(--sk)}

/* Terminverwaltung im Kundenportal */
.bu-p-leer{padding:18px;text-align:center;border:1.5px dashed var(--linie);border-radius:12px;
  color:var(--sk);font-size:13.5px;margin-bottom:10px}
/* Termin-Kacheln in der Handschrift des Panels: kräftiger Rahmen,
   klare Hierarchie. Vorher waren sie dünn und hell – sie sahen aus,
   als gehörten sie zu einem anderen Programm. */
/* Termin-Kacheln in der Handschrift des Kundenportals: helle Flächen,
   weiche Rundungen, zarte Rahmen (body.kp .k-abschnitt als Vorbild).
   Nicht der kräftige Stil des Bestell-Wizards – das ist ein anderes
   Programm mit anderer Aufgabe. */
.bu-p-t{display:flex;gap:0;align-items:stretch;
  border:1.5px solid #eceaf6;border-radius:16px;
  padding:0;margin-bottom:12px;background:#fff;overflow:hidden;
  transition:border-color .15s,box-shadow .15s}
.bu-p-t:hover{border-color:#d9d4f0;box-shadow:0 4px 16px rgba(20,12,50,.06)}
/* Offene Anfragen fallen auf – ruhig, ohne Alarmfarbe */
.bu-p-t.ist-offen{border-color:rgba(124,58,237,.35);background:rgba(124,58,237,.02)}
.bu-p-t.ist-offen .bu-p-zeit{background:rgba(124,58,237,.1);color:var(--violet)}
/* Datums-Block links – wie ein Kalenderblatt, aber in Panel-Tönen */
.bu-p-zeit{flex:0 0 78px;display:flex;flex-direction:column;align-items:center;
  justify-content:center;gap:1px;padding:14px 6px;background:#f6f5fb;
  color:var(--tinte);text-align:center;line-height:1.25;
  border-right:1.5px solid #eceaf6}
.bu-p-zeit b{font-size:15.5px;font-weight:800;letter-spacing:-.3px}
.bu-p-zeit span{font-size:12px;font-weight:600;color:var(--muted)}
.bu-p-zeit b{display:block;font-size:15px;font-weight:800}
.bu-p-zeit span{display:block;font-size:11px;font-weight:700;color:var(--sk);text-transform:uppercase}
.bu-p-zeit i{display:block;font-style:normal;font-size:13px;font-weight:700;color:var(--v);margin-top:3px}
/* Der Textteil: Name gross, Kontakt darunter, Notiz als eigenes Feld */
.bu-p-info{flex:1;min-width:160px;padding:14px 16px;display:flex;flex-direction:column;
  justify-content:center;gap:2px}
.bu-p-info>b{display:block;font-size:15px;font-weight:700}
.bu-p-info>span{display:block;font-size:13px;color:var(--sk)}
.bu-p-info small{display:block;font-size:12.5px;color:var(--sk)}
.bu-p-info small a{color:var(--sk);text-decoration:none;border-bottom:1px solid var(--linie)}
.bu-p-info small a:hover{color:var(--v);border-color:var(--v)}
/* Die Notiz der Kundschaft: abgesetzt, damit man sie nicht überliest */
.bu-p-notiz{margin-top:7px;padding:8px 11px;border-radius:9px;background:#f6f5fb;
  font-style:normal;font-size:12.5px;line-height:1.5;color:var(--sk);
  border-left:3px solid #e0dbf5}
.bu-p-tasten{display:flex;gap:8px;flex-wrap:wrap;align-items:center;padding:14px 16px 14px 0}
.bu-p-tasten .kp-btn{padding:7px 13px;font-size:12.5px}
.bu-p-weg{color:#9b2c2c;border-color:rgba(155,44,44,.3)}
.bu-p-weg:hover{background:rgba(155,44,44,.06);border-color:#9b2c2c}
@media(max-width:560px){
  .bu-p-t{flex-wrap:wrap}
  .bu-p-zeit{flex:0 0 100%;flex-direction:row;justify-content:flex-start;gap:8px;padding:9px 14px}
  .bu-p-info{padding:12px 14px 0}
  .bu-p-tasten{padding:10px 14px 14px;width:100%}
}
.bu-p-l{border:1.5px solid var(--linie);border-radius:14px;padding:16px;margin-bottom:10px;background:var(--karte)}
.bu-p-l-fuss{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-top:12px;
  padding-top:12px;border-top:1px solid var(--linie)}
.bu-p-anz{margin-top:10px}
/* Arbeitszeiten: eine Zeile je Tag, klar getrennt */
.bu-p-tag{display:flex;align-items:center;gap:14px;padding:12px 14px;
  border:1.5px solid #eceaf6;border-radius:12px;margin-bottom:8px;background:#fff;
  flex-wrap:wrap}
.bu-p-tag>b{flex:0 0 96px;font-size:14px;font-weight:700}
.bu-p-tag input[type=time]{padding:9px 11px;border:1.5px solid var(--linie);
  border-radius:9px;font:inherit;font-size:14px;background:#fff;color:var(--tinte)}
.bu-p-tag input[type=time]:focus{outline:none;border-color:var(--violet);
  box-shadow:0 0 0 3px rgba(124,58,237,.1)}
/* Geschlossene Tage: ruhig, nicht durchgestrichen */
.bu-p-tag em{color:var(--muted);font-style:normal;font-size:13.5px}
@media(max-width:560px){
  .bu-p-tag{align-items:flex-start}
  .bu-p-tag>b{flex:0 0 100%;margin-bottom:4px}
}
.bu-p-tag>b{flex:0 0 92px;font-size:14px}
.bu-p-bloecke{flex:1;display:flex;gap:8px;flex-wrap:wrap;align-items:center;min-width:200px}
.bu-p-block{display:inline-flex;align-items:center;gap:5px}
.bu-p-block input{width:auto;padding:6px 8px;font-size:13.5px}
.bu-p-block i{font-style:normal;color:var(--sk)}
.bu-p-zu{font-size:13px;color:var(--sk);font-style:italic}
.bu-p-x{border:0;background:none;color:#9b2c2c;cursor:pointer;font-size:13px;padding:2px 5px;border-radius:5px}
.bu-p-x:hover{background:rgba(155,44,44,.1)}
.bu-p-plus{padding:5px 10px;font-size:12px}
.bu-p-sperre{display:flex;gap:8px;align-items:center;margin-bottom:8px;flex-wrap:wrap}
.bu-p-sperre input[type=date]{width:auto;padding:7px 9px;font-size:13.5px}
.bu-p-sperre input[type=text]{flex:1;min-width:140px;padding:7px 9px;font-size:13.5px}
.bu-p-sperre i{font-style:normal;color:var(--sk);font-size:13px}
@media(max-width:620px){.bu-p-tag>b{flex:0 0 100%}}

/* Was ist neu (Kundenportal) */
.kp-neu{border:1.5px solid rgba(124,58,237,.32);border-radius:16px;padding:20px 22px;margin-bottom:26px;
  background:linear-gradient(180deg,rgba(124,58,237,.06),transparent 70%);transition:opacity .25s}
.kp-neu-kopf{display:flex;justify-content:space-between;align-items:center;gap:14px;margin-bottom:12px}
.kp-neu-kopf b{font-size:15.5px}
.kp-neu-zu{border:1px solid var(--linie);background:var(--karte);color:var(--sk);border-radius:100px;
  padding:5px 13px;font:inherit;font-size:12.5px;font-weight:600;cursor:pointer}
.kp-neu-zu:hover{border-color:var(--v);color:var(--v)}
.kp-neu-block+.kp-neu-block{margin-top:16px;padding-top:14px;border-top:1px solid var(--linie-s,var(--linie))}
.kp-neu-block h4{margin:0 0 7px;font-size:14.5px;font-weight:700}
.kp-neu-block h4 small{display:block;font-size:11.5px;font-weight:600;color:var(--sk);margin-top:2px}
.kp-neu ul,.kp-neu-details ul{margin:0;padding-left:18px}
.kp-neu li,.kp-neu-details li{font-size:14px;line-height:1.6;margin-bottom:5px}
.kp-neu-details{border:1px solid var(--linie);border-radius:10px;padding:10px 14px;margin-bottom:8px}
.kp-neu-details summary{cursor:pointer;font-weight:600;font-size:14.5px}
.kp-neu-details summary small{display:block;font-size:11.5px;font-weight:600;color:var(--sk);margin-top:2px}
.kp-neu-details ul{margin-top:9px}

/* Produkt-Import */
.sp-imp-kopf{font-size:14px;line-height:1.55;margin-bottom:12px}
.sp-imp-warn{margin:6px 0 0;padding:8px 11px;border-radius:8px;background:rgba(154,107,0,.1);
  color:#9a6b00;font-size:12.5px;line-height:1.5}
.sp-imp-liste{border:1.5px solid var(--linie);border-radius:12px;overflow:hidden;margin-bottom:12px;
  max-height:250px;overflow-y:auto}
.sp-imp-zeile{display:flex;justify-content:space-between;gap:14px;padding:9px 13px;font-size:13.5px;flex-wrap:wrap}
.sp-imp-zeile+.sp-imp-zeile{border-top:1px solid var(--linie)}
.sp-imp-zeile span{color:var(--sk);font-size:12.5px}
.sp-imp-check{display:flex;align-items:flex-start;gap:9px;cursor:pointer;font-size:13.5px;font-weight:600}
.sp-imp-check input{width:auto;margin:2px 0 0}
.sp-imp-check small{display:block;font-weight:400;color:var(--sk);font-size:12px;margin-top:2px}
.rb-balken{height:10px;border-radius:100px;background:var(--feld);overflow:hidden;margin-top:14px}
.rb-balken i{display:block;height:100%;width:0;border-radius:100px;background:var(--v);transition:width .4s ease}
.rb-zeile{padding:2px 0;font-size:12.5px}
.rb-zeile.ist-fehler{color:#9b2c2c;font-weight:600}

/* Verwandte Produkte (Cross-/Upsell) */
.sp-verw{display:flex;flex-wrap:wrap;gap:7px}
.sp-verw-chip{border:1.5px solid var(--linie);border-radius:100px;padding:7px 13px;background:var(--karte);
  color:var(--tx);font:inherit;font-size:13px;font-weight:600;cursor:pointer;transition:all .18s}
.sp-verw-chip:hover{border-color:var(--v)}
.sp-verw-chip.ist-an{background:var(--v);border-color:var(--v);color:#fff}

/* Dateien digitaler Produkte */
.sp-datei{display:flex;align-items:center;gap:10px;padding:9px 11px;margin-bottom:7px;
  border:1.5px solid var(--linie);border-radius:10px;background:var(--karte)}
.sp-datei-name{flex:1;min-width:0;font-size:13.5px;font-weight:600;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}
.sp-datei-gr{flex:0 0 auto;font-size:12px;color:var(--sk);font-variant-numeric:tabular-nums}
.sp-datei-weg{flex:0 0 auto;border:0;background:none;color:#9b2c2c;font-size:15px;
  line-height:1;padding:3px 5px;cursor:pointer;border-radius:6px}
.sp-datei-weg:hover{background:rgba(155,44,44,.1)}

/* Rückerstattung im Bestelldetail */
.bd-erst{display:grid;grid-template-columns:1fr 1.4fr;gap:9px;margin-bottom:10px}
.bd-erst input{padding:9px 11px;border:1.5px solid var(--linie);border-radius:9px;background:var(--feld);
  color:var(--tx);font:inherit;font-size:13.5px}
.bd-erst input:focus{outline:2px solid var(--v);outline-offset:-1px;border-color:transparent}
.bd-erst-btn{color:#9b2c2c;border-color:rgba(155,44,44,.35)}
.bd-erst-btn:hover{background:rgba(155,44,44,.07)}
@media(max-width:560px){.bd-erst{grid-template-columns:1fr}}
.sp-b-status.ist-erstattet,.sp-b-status.ist-teilerstattet{background:#fdeaea;color:#9b2c2c}

/* Rabattcodes im Shop-Panel */
.sp-gut{display:flex;justify-content:space-between;align-items:center;gap:14px;flex-wrap:wrap;
  border:1.5px solid var(--linie);border-radius:12px;padding:12px 14px;margin-bottom:9px;background:var(--feld)}
.sp-gut.ist-inaktiv{opacity:.55}
.sp-gut-code{font-family:var(--mono,monospace);font-size:15px;font-weight:800;letter-spacing:.06em}
.sp-gut-art{display:inline-block;margin-left:10px;font-size:13px;font-weight:700;color:var(--v)}
.sp-gut-info{display:block;margin-top:3px;font-size:12px;color:var(--sk)}
.sp-gut-tasten{display:flex;gap:7px;flex-wrap:wrap}
.sp-gut-tasten .kp-btn{padding:6px 11px;font-size:12.5px}
.sp-gut-weg{color:#9b2c2c}
.sp-zwei{display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media(max-width:620px){.sp-zwei{grid-template-columns:1fr}}
.sp-leer{text-align:center;border:1.5px dashed var(--linie-s);border-radius:16px;
  padding:44px 20px;color:var(--text2)}
.sp-produkte,.sp-bestellungen{display:grid;gap:10px}
.sp-produkt,.sp-bestellung{display:grid;grid-template-columns:auto 1fr auto;gap:14px;align-items:center;
  text-align:left;border:1.5px solid var(--linie);border-radius:14px;background:var(--weiss);
  padding:12px 16px 12px 12px;cursor:pointer;font:inherit;transition:border-color .2s,transform .2s,box-shadow .2s}
.sp-produkt:hover,.sp-bestellung:hover{border-color:var(--violet);transform:translateY(-2px);
  box-shadow:0 10px 26px rgba(14,14,26,.07)}
.sp-produkt.ist-inaktiv{opacity:.55}
.sp-p-bild{width:56px;height:56px;border-radius:11px;overflow:hidden;background:var(--violet-soft);
  display:grid;place-items:center;font-size:22px}
.sp-p-bild img{width:100%;height:100%;object-fit:cover}
.sp-p-info b{display:block;font-size:15px;color:var(--tinte);letter-spacing:-.2px}
.sp-p-info small{color:var(--text2);font-size:13px}
.sp-p-lager{display:inline-block;margin-left:8px;font-size:11px;font-weight:800;color:var(--gruen);
  background:var(--gruen-pale);border-radius:99px;padding:2px 9px}
.sp-p-lager.ist-null{color:var(--rot);background:var(--rot-pale)}
.sp-b-status{font-size:11px;font-weight:800;letter-spacing:.8px;text-transform:uppercase;
  border-radius:99px;padding:5px 11px;white-space:nowrap}
.sp-b-status.ist-bezahlt{background:var(--violet-pale);color:var(--violet-deep)}
.sp-b-status.ist-versendet{background:var(--amber-pale);color:var(--amber)}
.sp-b-status.ist-abgeschlossen{background:var(--gruen-pale);color:var(--gruen)}
.sp-b-status.ist-storniert{background:var(--rot-pale);color:var(--rot)}
.sp-b-info b{display:block;font-size:14.5px;color:var(--tinte)}
.sp-b-info small{color:var(--text2);font-size:12.5px}
.sp-b-total{font-weight:800;color:var(--tinte)}
.sp-fussleiste{position:sticky;bottom:0;background:color-mix(in srgb,var(--bg) 92%,transparent);
  backdrop-filter:blur(10px);border-top:1.5px solid var(--linie);margin-top:26px;
  padding:14px 0;display:flex;align-items:center;gap:16px}
.sp-gross{font-size:16px;padding:14px 30px}
.sp-fuss-links{display:flex;flex-direction:column;gap:2px;min-width:0}
.sp-fusstext{font-size:12.5px;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sp-fuss-links .kp-version{font-size:11px;color:var(--muted);opacity:.6;
  font-variant-numeric:tabular-nums;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
@media(max-width:760px){.sp-fuss-links .kp-version{display:none}}
.kp-btn-rot{background:var(--rot-pale);color:var(--rot);border:1.5px solid var(--rot)}
/* Dialoge */
.sp-overlay{position:fixed;inset:0;z-index:400;background:rgba(10,10,18,.55);backdrop-filter:blur(4px);
  display:grid;place-items:center;padding:18px}
.sp-dialog{width:min(620px,100%);max-height:92svh;background:var(--weiss);border-radius:18px;
  display:flex;flex-direction:column;box-shadow:0 40px 100px rgba(0,0,0,.35)}
.sp-dialog-kopf{display:flex;justify-content:space-between;align-items:center;
  padding:18px 22px;border-bottom:1.5px solid var(--linie)}
.sp-dialog-kopf b{font-size:17px;letter-spacing:-.3px}
.sp-zu{background:none;border:1.5px solid var(--linie);border-radius:10px;width:34px;height:34px;
  cursor:pointer;font-size:14px;color:var(--tinte)}
.sp-dialog-inhalt{padding:20px 22px;overflow-y:auto}
.sp-dialog-fuss{display:flex;gap:10px;align-items:center;padding:16px 22px;border-top:1.5px solid var(--linie)}
.pe-bilder{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:10px}
.pe-bild{position:relative;width:76px;height:76px;border-radius:12px;overflow:hidden;
  border:1.5px solid var(--linie)}
.pe-bild img{width:100%;height:100%;object-fit:cover}
.pe-bild em{position:absolute;left:0;right:0;bottom:0;background:rgba(14,14,26,.75);color:#fff;
  font-size:9px;font-weight:700;font-style:normal;text-align:center;padding:2px 0;letter-spacing:.4px}
.pe-bild-weg{position:absolute;top:4px;right:4px;width:20px;height:20px;border-radius:50%;
  border:none;background:rgba(14,14,26,.75);color:#fff;font-size:10px;cursor:pointer;display:grid;place-items:center}
.bd-abschnitt{font-size:12px;font-weight:800;letter-spacing:1.4px;text-transform:uppercase;
  color:var(--text2);margin:18px 0 8px}
.bd-zeile{display:flex;justify-content:space-between;gap:14px;font-size:14px;padding:5px 0;
  border-bottom:1px solid var(--linie)}
.bd-total{font-weight:800;color:var(--tinte);font-size:15.5px;border-bottom:none}
.bd-adresse,.bd-kontakt{font-size:14px;line-height:1.6;margin:0 0 6px}
@media(max-width:640px){.sp-zeile2{grid-template-columns:1fr}}

/* ═══ Sprachwahl im Bestellwizard ═══ */
.sprach-chips{display:flex;gap:9px;flex-wrap:wrap}
.sprach-chip{border:1.5px solid var(--linie-s);background:var(--weiss);border-radius:11px;
  padding:11px 17px;font:inherit;font-size:14.5px;font-weight:700;cursor:pointer;
  transition:border-color .2s,background .2s,transform .15s}
.sprach-chip:hover{border-color:var(--violet);transform:translateY(-2px)}
.sprach-chip.aktiv:hover{color:#fff}
.sprach-chip.aktiv{border-color:var(--violet);background:var(--violet-soft);color:var(--violet-deep)}

/* ─── Abschluss-CTA-Band (wiederverwendbar, teile/cta-band.php) ── */
.cta-band{background:linear-gradient(135deg,#1b1030,#3b1d7a 55%,#7c3aed);color:#fff;
  text-align:center;padding:74px 24px;position:relative;overflow:hidden}
.cta-band::before{content:'';position:absolute;inset:auto -80px -120px auto;width:340px;height:340px;
  border-radius:50%;background:radial-gradient(circle,#a78bfa55,transparent 70%)}
.cta-band h2{font-size:clamp(26px,4.4vw,44px);letter-spacing:-.8px;margin:0 0 12px;position:relative}
.cta-band p{color:#cfc6ee;max-width:52ch;margin:0 auto 30px;line-height:1.7;position:relative}
.cta-band .cb-btns{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;position:relative}
.cta-band .cb-p{display:inline-flex;align-items:center;gap:9px;background:#fff;color:var(--violet-d);
  font-weight:800;padding:15px 28px;border-radius:13px;box-shadow:0 12px 40px #00000045}
.cta-band .cb-p:hover{color:var(--violet-d);transform:translateY(-3px);box-shadow:0 18px 54px #00000055}
.cta-band .cb-g{display:inline-flex;align-items:center;gap:8px;border:1.5px solid #ffffff42;color:#fff;
  font-weight:700;padding:15px 26px;border-radius:13px}
.cta-band .cb-g:hover{border-color:#fff;background:#ffffff12;color:#fff;transform:translateY(-3px)}

/* ─── Video-Bühne «Wer dahinter steckt» ─────────────────────────── */
.person-video{position:relative;aspect-ratio:1;border-radius:28px;overflow:hidden;
  border:1px solid #ffffff1c;box-shadow:0 30px 80px rgba(124,58,237,.28),0 6px 24px rgba(0,0,0,.35);
  background:#120d24;cursor:pointer}
.person-video video{width:100%;height:100%;object-fit:cover;display:block}
.person-video .person-name{position:absolute;left:14px;bottom:14px;z-index:2}
.pv-ton{position:absolute;right:14px;bottom:14px;z-index:2;width:46px;height:46px;border-radius:50%;
  border:1px solid #ffffff38;background:rgba(18,13,36,.55);backdrop-filter:blur(8px);
  color:#fff;font-size:19px;cursor:pointer;display:grid;place-items:center;
  transition:transform .2s,background .2s}
.pv-ton:hover{transform:scale(1.08);background:rgba(124,58,237,.55)}
.signatur-block{display:flex;align-items:center;gap:18px;max-width:640px;margin:26px auto 0;
  padding:18px 22px;border:1px solid var(--linie,#e6e2f4);border-radius:18px;background:#fff}
.signatur-block img{width:82px;height:82px;border-radius:50%;object-fit:cover;
  border:3px solid #7c3aed22;flex-shrink:0}
.sig-zeile{font-weight:800;letter-spacing:-.02em;margin:0 0 6px;font-size:17.5px}
.sig-meta{margin:0;font-size:13.5px;color:#6b6580;line-height:1.6}

/* ─── Ankündigungsband (intern steuerbar) ───────────────────────── */
/* Hinweis-Popup (Backend → Texte → Ankündigung) */
/* [hidden] muss gewinnen – display:grid würde es sonst überschreiben. */
.pxa-pop[hidden]{display:none}
.pxa-pop{position:fixed;inset:0;z-index:2000;display:grid;place-items:center;padding:22px;
  background:rgba(16,12,28,.5);-webkit-backdrop-filter:blur(10px) saturate(120%);
  backdrop-filter:blur(10px) saturate(120%);opacity:0;transition:opacity .22s ease}
.pxa-pop.ist-da{opacity:1}
.pxa-pop-box{position:relative;background:var(--weiss,#fff);border-radius:22px;
  padding:40px 38px 30px;max-width:440px;width:100%;text-align:center;
  box-shadow:0 24px 70px rgba(20,12,50,.3);transform:translateY(12px) scale(.98);
  transition:transform .28s cubic-bezier(.2,.8,.2,1)}
.pxa-pop.ist-da .pxa-pop-box{transform:none}
.pxa-pop-zu{position:absolute;top:12px;right:12px;width:34px;height:34px;border:0;border-radius:50%;
  background:transparent;color:var(--tinte,#1a1523);opacity:.4;font-size:15px;cursor:pointer;
  display:grid;place-items:center;transition:opacity .15s,background .15s}
.pxa-pop-zu:hover{opacity:1;background:rgba(0,0,0,.06)}
.pxa-pop-zeichen{font-size:26px;color:var(--violet,#7c3aed);margin-bottom:12px;line-height:1}
.pxa-pop-text{font-size:17px;line-height:1.55;font-weight:600;color:var(--tinte,#1a1523);
  margin:0 0 22px;letter-spacing:-.01em}
.pxa-pop-knopf{display:inline-flex;align-items:center;gap:6px;background:var(--violet,#7c3aed);
  color:#fff;text-decoration:none;font-weight:700;font-size:15px;padding:13px 26px;border-radius:12px;
  transition:filter .15s,transform .15s}
.pxa-pop-knopf:hover{filter:brightness(1.08);transform:translateY(-1px);text-decoration:none}
.pxa-pop-spaeter{display:block;margin:14px auto 0;border:0;background:none;
  color:var(--grau,#6b6478);font:inherit;font-size:13px;cursor:pointer;text-decoration:underline;
  text-underline-offset:3px;opacity:.7}
.pxa-pop-spaeter:hover{opacity:1}
@media(max-width:520px){.pxa-pop-box{padding:34px 24px 26px;border-radius:18px}
  .pxa-pop-text{font-size:16px}}
@media(prefers-reduced-motion:reduce){
  .pxa-pop,.pxa-pop-box{transition:none}.pxa-pop-box{transform:none}}

.fuss-social{display:flex;gap:12px;margin:0 0 14px}
.fuss-social a{display:grid;place-items:center;width:36px;height:36px;border-radius:10px;
  border:1px solid #2a2440;color:#c9c2e4;transition:all .2s}
.fuss-social a:hover{color:#fff;border-color:#7c3aed;background:#7c3aed22;transform:translateY(-2px)}

/* ─── Admin-Badge im Wartungsmodus ─── */
.pxa-wartung-badge{position:fixed;left:50%;bottom:18px;translate:-50% 0;z-index:9999;
  background:#1d1730;color:#ffd98a;border:1px solid #7c3aed66;border-radius:99px;
  padding:10px 18px;font-size:13px;font-weight:700;box-shadow:0 10px 30px rgba(0,0,0,.4);
  backdrop-filter:blur(8px)}

/* ─── Google-Trust-Badge (Footer) ─── */
.gtrust-halter{width:100%;display:flex;justify-content:center;margin:0 0 34px}
/* Breit statt hoch: Das Abzeichen liegt meist über dem Fuss oder neben
   Text – dort wirkt ein Querformat ruhiger als ein Klotz. Die Angaben
   stehen nebeneinander, getrennt durch eine feine Linie. */
.gtrust{display:inline-flex;flex-direction:row;align-items:center;gap:14px;
  padding:11px 20px;border-radius:14px;background:#fff;
  border:1px solid rgba(0,0,0,.09);box-shadow:0 2px 12px rgba(0,0,0,.18);
  text-decoration:none;transition:transform .15s,box-shadow .15s}
.gtrust:hover{transform:translateY(-2px);box-shadow:0 6px 20px rgba(0,0,0,.24)}
.gtrust .gt-wort{display:flex;align-items:baseline;gap:5px;white-space:nowrap}
.gtrust .gt-wort i{font-style:normal;font-size:12.5px;font-weight:600;color:#5f6368;
  letter-spacing:0}
.gtrust .gt-rechts{display:flex;align-items:center;gap:10px;
  padding-left:14px;border-left:1px solid rgba(0,0,0,.1)}
@media(max-width:480px){
  .gtrust{flex-direction:column;align-items:flex-start;gap:8px;padding:11px 16px;max-width:100%}
  .gtrust .gt-rechts{gap:8px;padding-left:0;border-left:0}
  .gtrust .gt-zahl{font-size:11.5px}
}
.gtrust .gt-wort{font:700 21px/1 Arial,Helvetica,sans-serif;letter-spacing:-.5px}

.gtrust .gt-sterne{position:relative;display:inline-block;line-height:0}
.gtrust .gt-leer{color:#dadce0;display:inline-flex;gap:1px}
.gtrust .gt-voll{color:#fbbc05;display:inline-flex;gap:1px;position:absolute;left:0;top:0;
  overflow:hidden;white-space:nowrap}
.gtrust .gt-zahl{font-size:12.5px;font-weight:600;color:#5f6368}
.gtrust:hover{transform:translateY(-2px);box-shadow:0 10px 26px rgba(0,0,0,.3)}

/* ═══ Kino-Filme «Terminbuchung» & «Kundenpanel» (funktionen.php) ═══
   Nutzen die Kino-Basis (Bühne, Browser, Akte). Hier nur die
   film-eigenen Bausteine: tb-* = Termin, kp-* = Panel. */

/* Gemeinsamer Klick-Cursor (klassenbasiert, mehrfach nutzbar) */
.kino-cursor{position:absolute;z-index:6;transition:left .6s cubic-bezier(.5,0,.3,1),top .6s cubic-bezier(.5,0,.3,1);
  filter:drop-shadow(0 2px 5px rgba(0,0,0,.5));pointer-events:none}

/* — Termin · Akt 1: Kalender — */
.tb-akt-kalender{display:flex;flex-direction:column;justify-content:center;max-width:640px;margin:0 auto}
.tb-t1::before,.tb-t2::before,.tb-t4::before,.kp-t1::before,.kp-t2::before,.kp-t3::before{
  content:'';display:grid;place-items:center;width:24px;height:24px;border-radius:50%;
  background:#7c3aed;color:#fff;font-size:12px;font-weight:800}
.tb-t1::before{content:'1'}.tb-t2::before{content:'2'}.tb-t4::before{content:'4'}
.kp-t1::before{content:'1'}.kp-t2::before{content:'2'}.kp-t3::before{content:'3'}
.tb-kal{display:grid;grid-template-columns:repeat(5,1fr);gap:9px}
.tb-tag{display:flex;flex-direction:column;gap:7px}
.tb-tag-kopf{display:flex;flex-direction:column;align-items:center;gap:1px;color:#8a8ab0;
  font-size:11px;margin-bottom:3px}
.tb-tag-kopf b{color:#fff;font-size:13px}
.tb-slot{display:block;text-align:center;padding:8px 4px;border-radius:9px;font-size:12.5px;
  font-weight:700;color:#d8d8f0;background:#1a1a33;border:1px solid #ffffff14;
  opacity:0;transform:translateY(8px) scale(.94);transition:all .34s ease}
.tb-slot.pop{opacity:1;transform:none}
.tb-slot.gewaehlt{background:#7c3aed;border-color:#a78bfa;color:#fff;
  box-shadow:0 0 0 3px rgba(124,58,237,.3),0 6px 18px rgba(124,58,237,.45)}
.tb-slot.tb-leer{background:transparent;border-style:dashed;color:#55557a;opacity:1;transform:none}

/* — Termin · Akt 2: Formular + Knopf — */
.tb-knopf{margin-top:8px;text-align:center;background:#7c3aed;color:#fff;font-weight:800;
  font-size:14.5px;padding:12px 18px;border-radius:11px;transition:transform .18s ease,box-shadow .18s ease;
  box-shadow:0 8px 22px rgba(124,58,237,.4)}
.tb-knopf.klick{transform:scale(.96);box-shadow:0 3px 10px rgba(124,58,237,.5)}

/* — Termin · Akt 3: Haken + Mail — */
.tb-akt-ok{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px}
.tb-ok svg{width:86px;height:86px}
.tb-ok circle{fill:none;stroke:#22c55e;stroke-width:3;stroke-dasharray:151;stroke-dashoffset:151;
  transition:stroke-dashoffset .7s ease}
.tb-ok path{fill:none;stroke:#22c55e;stroke-width:4.5;stroke-linecap:round;stroke-linejoin:round;
  stroke-dasharray:42;stroke-dashoffset:42;transition:stroke-dashoffset .5s ease .55s}
.tb-ok.an circle,.tb-ok.an path{stroke-dashoffset:0}
.tb-ok-titel{font-size:clamp(19px,3vw,26px);font-weight:800;color:#fff;letter-spacing:-.4px}
.tb-mail{background:#15152c;border:1px solid #ffffff14;color:#c9c9e6;font-size:13.5px;
  padding:11px 18px;border-radius:99px;opacity:0;transform:translateY(12px);transition:all .5s ease}
.tb-mail b{color:#fff}
.tb-mail.an{opacity:1;transform:none}

/* — Termin · Akt 4: Panel-Liste — */
.tb-akt-panel{display:flex;flex-direction:column;justify-content:center;max-width:560px;margin:0 auto}
.tb-liste{display:flex;flex-direction:column;gap:8px}
.tb-zeile{display:flex;align-items:center;gap:12px;background:#15152c;border:1px solid #ffffff10;
  border-radius:11px;padding:11px 15px;font-size:13px;color:#c9c9e6}
.tb-z-zeit{font-weight:800;color:#fff;white-space:nowrap}
.tb-z-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tb-z-badge{margin-left:auto;background:#22c55e;color:#052e12;font-size:10.5px;font-weight:800;
  letter-spacing:.6px;text-transform:uppercase;padding:3px 9px;border-radius:99px}
.tb-neuzeile{opacity:0;transform:translateY(-14px);border-color:#22c55e55;transition:all .55s ease;
  box-shadow:0 0 0 0 rgba(34,197,94,0)}
.tb-neuzeile.an{opacity:1;transform:none;box-shadow:0 0 0 3px rgba(34,197,94,.16),0 8px 22px rgba(34,197,94,.14)}

/* — Panel · Akt 1: Kacheln — */
.kp-akt-start{display:flex;flex-direction:column;justify-content:center;max-width:560px;margin:0 auto}
.kp-kacheln{display:grid;grid-template-columns:repeat(2,1fr);gap:11px}
.kp-kachel{display:flex;align-items:center;gap:11px;background:#15152c;border:1px solid #ffffff12;
  border-radius:12px;padding:17px 17px;font-size:14.5px;font-weight:700;color:#e8e8f8;
  transition:border-color .3s ease,box-shadow .3s ease}
.kp-k-icon{display:grid;place-items:center;width:32px;height:32px;border-radius:9px;
  background:#7c3aed22;color:#a78bfa;font-size:15px}
.kp-kachel.aktivk{border-color:#a78bfa;box-shadow:0 0 0 3px rgba(124,58,237,.25),0 8px 24px rgba(124,58,237,.3)}

/* — Panel · Akt 2: Öffnungszeiten — */
.kp-akt-oz{display:flex;flex-direction:column;justify-content:center;max-width:520px;margin:0 auto}
.kp-oz{display:flex;flex-direction:column;gap:8px}
.kp-oz-zeile{display:flex;align-items:center;gap:13px;background:#15152c;border:1px solid #ffffff10;
  border-radius:11px;padding:11px 15px;font-size:13.5px}
.kp-oz-tag{font-weight:800;color:#fff;flex:0 0 76px}
.kp-oz-zeit{color:#d8d8f0;font-variant-numeric:tabular-nums;min-height:1.3em;flex:1}
.kp-oz-zeit.leer{color:#55557a}
.kp-oz-zeit .kf-cursor{display:inline-block;width:2px;height:1.05em;background:#a78bfa;
  vertical-align:-2px;animation:kfblink .8s steps(1) infinite}
.kp-schalter{position:relative;flex:0 0 40px;height:22px;border-radius:99px;background:#2a2a4a;
  transition:background .3s ease}
.kp-schalter i{position:absolute;top:3px;left:3px;width:16px;height:16px;border-radius:50%;
  background:#8a8ab0;transition:all .3s ease}
.kp-schalter.an{background:#22c55e}
.kp-schalter.an i{left:21px;background:#fff}
.kp-speich{margin-top:14px;align-self:flex-start;background:#7c3aed;color:#fff;font-weight:800;
  font-size:13.5px;padding:10px 22px;border-radius:10px;transition:transform .18s ease;
  box-shadow:0 8px 22px rgba(124,58,237,.4)}
.kp-speich.klick{transform:scale(.95)}
.kp-haken{margin-top:10px;color:#22c55e;font-weight:800;font-size:13px;opacity:0;
  transform:translateY(6px);transition:all .4s ease}
.kp-haken.an{opacity:1;transform:none}

/* — Panel · Akt 3: Fotos — */
.kp-akt-foto{display:flex;flex-direction:column;justify-content:center;max-width:560px;margin:0 auto}
.kp-fotos{display:grid;grid-template-columns:repeat(3,1fr);gap:11px}
.kp-foto{position:relative;aspect-ratio:4/3;border-radius:12px;overflow:hidden;
  background:linear-gradient(145deg,#23233f,#191930);border:1px solid #ffffff12}
.kp-foto.f2{background:linear-gradient(145deg,#2a2145,#1b1733)}
.kp-foto.f3{background:linear-gradient(145deg,#1f2a3f,#161d2e)}
.kp-foto::after{content:'';position:absolute;inset:0;
  background:linear-gradient(135deg,#7c3aed,#b45309 65%,#f59e0b);opacity:0;transition:opacity .8s ease}
.kp-foto.neu::after{opacity:1}
.kp-lade{position:absolute;left:10%;right:10%;bottom:12%;height:6px;border-radius:99px;
  background:#ffffff1e;overflow:hidden;z-index:2}
.kp-lade i{display:block;height:100%;width:0;border-radius:99px;background:#a78bfa;
  transition:width 1.5s ease}
.kp-lade.voll i{width:100%}

/* — Panel · Akt 4: Live-Website-Mini — */
.kp-akt-live{display:flex;align-items:center;justify-content:center}
.kp-live{width:min(560px,100%);background:#f4f2fb;border-radius:13px;padding:17px;
  box-shadow:0 18px 50px rgba(0,0,0,.45)}
.kp-l-hero{background:linear-gradient(135deg,#7c3aed,#5b21b6);border-radius:9px;
  padding:19px 17px;margin-bottom:12px}
.kp-l-zeile{height:11px;width:62%;border-radius:99px;background:#ffffffd8}
.kp-l-zeile.z2{width:40%;height:8px;margin-top:8px;background:#ffffff80}
.kp-l-reihe{display:grid;grid-template-columns:1fr 1.35fr;gap:12px}
.kp-l-foto{position:relative;border-radius:9px;overflow:hidden;
  background:linear-gradient(145deg,#d8d3ea,#c4bedd);min-height:96px}
.kp-l-foto::after{content:'';position:absolute;inset:0;
  background:linear-gradient(135deg,#7c3aed,#b45309 65%,#f59e0b);opacity:0;transition:opacity .8s ease}
.kp-l-foto.neu::after{opacity:1}
.kp-l-oz{background:#fff;border:1px solid #e6e2f2;border-radius:9px;padding:12px 14px}
.kp-l-oz-titel{font-size:11px;font-weight:800;letter-spacing:1.4px;text-transform:uppercase;
  color:#7c3aed;margin-bottom:8px}
.kp-l-oz-zeile{display:flex;align-items:center;gap:8px;font-size:12.5px;color:#4a4a66;
  padding:4px 0;border-bottom:1px solid #f0edf8}
.kp-l-oz-zeile b{margin-left:auto;color:#0e0e1a;font-variant-numeric:tabular-nums}
.kp-l-oz-zeile.leer{color:#9a97b5;border-bottom:0}
.kp-l-oz-zeile .tb-z-badge{margin-left:8px}
.kp-l-neu{opacity:0;transform:translateX(-8px);transition:all .55s ease;border-radius:7px}
.kp-l-neu.an{opacity:1;transform:none;background:#f0fdf4;box-shadow:inset 0 0 0 1px #22c55e44;
  padding-left:7px;padding-right:7px}

/* — Beide Filme: Handy — */
@media (max-width:720px){
  .tb-kal{grid-template-columns:repeat(5,1fr);gap:5px}
  .tb-slot{font-size:10.5px;padding:6px 2px}
  .tb-tag-kopf span{display:none}
  .tb-z-name{display:none}
  .kp-l-reihe{grid-template-columns:1fr}
}

/* ── Kunden-Panel Feinschliff: Bildwahl, FAQ, Datumsfelder ─────────
   1) Bild-Dropdowns verschwinden – der visuelle Wähler (Thumbnail +
      «wählen»/«ändern») ist die einzige Bedienung. Das Select bleibt
      unsichtbar im DOM als Daten-Wahrheit für panel.js.
   2) FAQ-Felder erhalten den Panel-Feldstil (vorher nackte
      Browser-Optik mit Monospace-Schrift).
   3) Datumsfelder (Hinweis-Banner) im Feldstil. */
body.kp select.bild-wahl { position: absolute; width: 1px; height: 1px;
  opacity: 0; pointer-events: none; margin: 0; padding: 0; border: 0; }
body.kp .bw-thumb { width: 72px; height: 72px; margin-left: 0; }
body.kp .bw-thumb span { font-size: 10.5px; font-weight: 800; letter-spacing: .4px;
  text-transform: uppercase; color: var(--violet); }
body.kp .bw-thumb.hat-bild span { position: absolute; left: 0; right: 0; bottom: 0;
  background: rgba(255,255,255,.93); padding: 3px 0; text-align: center; }
body.kp .leistung-zeile { grid-template-columns: 72px 1fr 1.5fr 38px; align-items: start; }
/* «So arbeiten wir»: kein Bild-Slot – Titel, Text, kompakter Lösch-Knopf */
body.kp .leistung-zeile.schritt-zeile { grid-template-columns: 1fr 1.5fr 38px; }
body.kp .leistung-zeile.schritt-zeile .sz-titel { grid-column: 1; }
body.kp .leistung-zeile.schritt-zeile .sz-text  { grid-column: 2; }
body.kp .leistung-zeile.schritt-zeile .sz-weg   { grid-column: 3; border-radius: 12px; width: 38px; }
@media (max-width: 560px) {
  body.kp .leistung-zeile.schritt-zeile { grid-template-columns: 1fr 38px; }
  body.kp .leistung-zeile.schritt-zeile .sz-titel { grid-column: 1; }
  body.kp .leistung-zeile.schritt-zeile .sz-weg   { grid-column: 2; }
  body.kp .leistung-zeile.schritt-zeile .sz-text  { grid-column: 1 / -1; }
}
body.kp .leistung-zeile .bw-thumb { grid-column: 1; grid-row: 1; }
body.kp .leistung-zeile .l-titel { grid-column: 2; }
body.kp .leistung-zeile .l-text  { grid-column: 3; }
body.kp .leistung-zeile .l-weg   { grid-column: 4; }
body.kp .feld > .bw-thumb, body.kp .k-abschnitt .st-bild-wahl + .bw-thumb { margin: 0 0 8px; }

body.kp .faq-zeile { display: grid; grid-template-columns: 1fr 38px; gap: 8px 10px; margin-bottom: 18px; }
body.kp .faq-zeile .f-frage, body.kp .faq-zeile .f-antwort {
  font-family: 'Outfit', sans-serif; font-size: 14.5px; color: var(--tinte);
  border: 1.5px solid #e3e0f0; border-radius: 12px; padding: 11px 13px;
  width: 100%; outline: none; background: var(--weiss);
  transition: border-color .15s ease, box-shadow .15s ease; }
body.kp .faq-zeile .f-antwort { grid-column: 1 / -1; min-height: 78px; resize: vertical; line-height: 1.55; }
body.kp .faq-zeile .f-frage:focus, body.kp .faq-zeile .f-antwort:focus {
  border-color: var(--violet); box-shadow: 0 0 0 3px rgba(124,58,237,.12); }
body.kp .faq-zeile .l-weg { border-radius: 12px; }

body.kp .feld input[type=date] { width: 100%; font-family: 'Outfit', sans-serif;
  font-size: 15px; color: var(--tinte); padding: 11px 13px;
  border: 1.5px solid #e3e0f0; border-radius: 12px; background: var(--weiss); outline: none;
  transition: border-color .15s ease, box-shadow .15s ease; }
body.kp .feld input[type=date]:focus { border-color: var(--violet);
  box-shadow: 0 0 0 3px rgba(124,58,237,.12); }

/* ── Meine Seiten: visueller Editor statt Roh-HTML ── */
body.kp .ss-editor { min-height: 260px; max-height: 560px; overflow-y: auto;
  border: 1.5px solid #e3e0f0; border-radius: 12px; background: var(--weiss);
  padding: 16px 18px; font-family: 'Outfit', sans-serif; font-size: 15px;
  line-height: 1.65; color: var(--tinte); outline: none;
  transition: border-color .15s ease, box-shadow .15s ease; }
body.kp .ss-editor:focus { border-color: var(--violet); box-shadow: 0 0 0 3px rgba(124,58,237,.12); }
body.kp .ss-editor h2 { font-size: 21px; font-weight: 800; letter-spacing: -.3px; margin: 14px 0 8px; }
body.kp .ss-editor h3 { font-size: 17px; font-weight: 700; margin: 12px 0 6px; }
body.kp .ss-editor p  { margin: 0 0 10px; }
body.kp .ss-editor ul { margin: 0 0 10px; padding-left: 22px; }
body.kp .ss-editor img { max-width: 100%; height: auto; border-radius: 10px; display: block; margin: 10px 0; }
body.kp .ss-wz { font-family: 'Outfit', sans-serif; }

/* Favicon-Vorschau in der Upload-Zone */
body.kp .fav-vorschau { width: 40px; height: 40px; border-radius: 9px;
  border: 1.5px solid #e3e0f0; background: var(--weiss); object-fit: contain;
  padding: 4px; display: block; margin: 0 auto 8px; }

/* ── Startseiten-Slider im aktuellen Look ──────────────────────────
   Weiche Radien, feine Linien, Soft-Schatten – die Neo-Brutalism-Reste
   (Hardschatten-Knöpfe, kantige Karten) sind Geschichte. Wirkt sitewide
   auf alle .vorlage-karte (Galerie, Wizard) – bewusst konsistent. */
.vorlage-karte { border: 1.5px solid #e3e0f0; border-radius: 16px; overflow: hidden;
  box-shadow: 0 2px 10px rgba(20,16,40,.05);
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease; }
.vorlage-karte:hover { transform: translateY(-4px); border-color: var(--violet);
  box-shadow: 0 16px 36px rgba(124,58,237,.16); }
.slider-knopf { border-radius: 999px; border: 1.5px solid #e3e0f0;
  box-shadow: 0 4px 16px rgba(20,16,40,.12); }
.slider-knopf:hover { box-shadow: 0 10px 26px rgba(124,58,237,.30); transform: translateY(-1px); }
.slider::-webkit-scrollbar { height: 6px; }
.slider::-webkit-scrollbar-thumb { background: var(--violet); border-radius: 99px; }
.slider::-webkit-scrollbar-track { background: var(--violet-pale); border-radius: 99px; }

/* ── Signatur-Kollektion: dunkles Band mit eigenem Slider ── */
.sig-band { background: linear-gradient(135deg, #1a1130 0%, #0c0a14 60%, #140b26 100%);
  border-radius: 28px; padding: clamp(34px, 5vw, 58px) clamp(20px, 4vw, 48px) clamp(26px, 4vw, 40px);
  position: relative; overflow: hidden; }
.sig-band::before { content: ''; position: absolute; top: -120px; right: -80px; width: 420px; height: 420px;
  background: radial-gradient(circle, rgba(124,58,237,.35), transparent 68%); pointer-events: none; }
.sig-band .eyebrow { color: #c4b5fd; }
.sig-band h2, .sig-band .block-kopf p { color: #fff; }
.sig-band .block-kopf p { opacity: .82; }
.sig-band .slider { scrollbar-color: var(--violet) rgba(255,255,255,.12); }
.sig-band .slider::-webkit-scrollbar-track { background: rgba(255,255,255,.12); }
.sig-band .slider-knopf { border-color: rgba(255,255,255,.25); }
.sig-band a[href^="vorlagen"] { color: #c4b5fd; }
.v-sig { position: absolute; top: 12px; left: 12px; z-index: 3;
  background: var(--violet); color: #fff; font-size: 11px; font-weight: 800;
  letter-spacing: .8px; text-transform: uppercase; padding: 6px 12px; border-radius: 999px;
  box-shadow: 0 4px 14px rgba(124,58,237,.45); }

/* ── Erstbesucher-Show «Von Pixel zu Produkt» (nur Startseite) ── */
#pxaIntro { display: none; }
html.intro-an #pxaIntro { display: block; position: fixed; inset: 0; z-index: 9999;
  background: #0c0a14; opacity: 1; transition: opacity .7s ease; }
html.intro-an { overflow: hidden; }
#pxaIntro.pi-weg { opacity: 0; pointer-events: none; }
#pxaIntro canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
#pxaIntro .pi-blitz { position: absolute; inset: 0; background: #fff; opacity: 0; pointer-events: none; }
#pxaIntro .pi-blitz.pi-zuend { opacity: .92; transition: none; }
#pxaIntro .pi-blitz.pi-verglueh { opacity: 0; transition: opacity .55s ease-out; }
#pxaIntro .pi-marke { position: absolute; inset: 0; display: grid; place-items: center; pointer-events: none; }
/* Mattglas hinter der Wortmarke: die Karte bleibt sichtbar, wird aber weich
   und dunkler – so hebt sich die Schrift klar ab. Die Ränder laufen sanft
   aus, damit keine Kante entsteht. */
#pxaIntro .pi-marke > div { position: relative; }
#pxaIntro .pi-glas { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: min(112vw, 1180px); height: min(58vh, 460px); border-radius: 50%;
  background: radial-gradient(ellipse at center, rgba(8,6,20,.72) 0%, rgba(8,6,20,.55) 42%, rgba(8,6,20,0) 72%);
  backdrop-filter: blur(11px) saturate(1.15) brightness(.82);
  -webkit-backdrop-filter: blur(11px) saturate(1.15) brightness(.82);
  -webkit-mask-image: radial-gradient(ellipse at center, #000 40%, transparent 72%);
  mask-image: radial-gradient(ellipse at center, #000 40%, transparent 72%);
  pointer-events: none; z-index: 0;
  opacity: 0; transition: opacity .85s cubic-bezier(.16,1,.3,1); }
#pxaIntro .pi-glas.sichtbar { opacity: 1; }
#pxaIntro .pi-wm, #pxaIntro .pi-tagline { position: relative; z-index: 1; }
@media (prefers-reduced-motion: reduce) { #pxaIntro .pi-glas { backdrop-filter: none; } }
#pxaIntro .pi-wm { position: relative; color: #fff; font-weight: 800; letter-spacing: -.02em;
  font-size: clamp(40px, 9vw, 112px); line-height: 1; display: flex; font-family: 'Outfit', sans-serif; }
#pxaIntro .pi-wm b { font-weight: 800; display: inline-block; opacity: 0;
  transform: translateY(.28em); filter: blur(7px); }
#pxaIntro .pi-wm b.los { animation: piBst .62s cubic-bezier(.16,1,.3,1) forwards; }
@keyframes piBst { to { opacity: 1; transform: none; filter: blur(0); } }
#pxaIntro .pi-wm i { font-style: normal; position: absolute; left: calc(100% + .093em);
  top: .125em; width: .145em; height: .145em; }
#pxaIntro .pi-wm i b { position: absolute; inset: 0; background: var(--violet);
  border-radius: .02em; opacity: 0; transform: none; filter: none; }
#pxaIntro .pi-wm i span { position: absolute; width: 50%; height: 50%;
  background: var(--violet); opacity: 0; border-radius: .015em; }
#pxaIntro .pi-wm i span:nth-child(1){ left:0; top:0; }
#pxaIntro .pi-wm i span:nth-child(2){ right:0; top:0; }
#pxaIntro .pi-wm i span:nth-child(3){ left:0; bottom:0; }
#pxaIntro .pi-wm i span:nth-child(4){ right:0; bottom:0; }
#pxaIntro .pi-wm i.flug span { animation: piPp .8s cubic-bezier(.16,1,.3,1) forwards; }
#pxaIntro .pi-wm i.flug span:nth-child(1){ --dx:-3.2em; --dy:-1.6em; animation-delay:.00s; }
#pxaIntro .pi-wm i.flug span:nth-child(2){ --dx: 2.4em; --dy:-2.2em; animation-delay:.07s; }
#pxaIntro .pi-wm i.flug span:nth-child(3){ --dx:-2.0em; --dy: 2.4em; animation-delay:.14s; }
#pxaIntro .pi-wm i.flug span:nth-child(4){ --dx: 3.0em; --dy: 1.8em; animation-delay:.21s; }
@keyframes piPp { from { opacity: 0; transform: translate(var(--dx), var(--dy)) scale(.4); }
  25% { opacity: 1; } to { opacity: 1; transform: none; } }
#pxaIntro .pi-wm i.fertig span { opacity: 0; transition: opacity .2s; }
#pxaIntro .pi-wm i.fertig b { opacity: 1; animation: piGlut 3.4s ease-in-out .3s infinite; }
@keyframes piGlut { 0%,100% { box-shadow: 0 0 0 rgba(124,58,237,0); }
  50% { box-shadow: 0 0 .22em rgba(124,58,237,.85); } }
#pxaIntro .pi-tagline { margin-top: 26px; text-align: center; color: #cfc6ee;
  font-weight: 400; font-size: clamp(14px, 2.3vw, 22px); opacity: 0;
  letter-spacing: .42em; transform: translateY(10px); font-family: 'Outfit', sans-serif; }
#pxaIntro .pi-tagline.los { animation: piTgl 1.1s cubic-bezier(.16,1,.3,1) .25s forwards; }
@keyframes piTgl { to { opacity: 1; letter-spacing: .14em; transform: none; } }
#pxaIntro .pi-skip { position: absolute; right: 22px; bottom: 20px; z-index: 2;
  background: rgba(255,255,255,.08); color: #cfc6ee; border: 1.5px solid rgba(255,255,255,.22);
  border-radius: 999px; padding: 9px 18px; font: 600 13.5px 'Outfit', sans-serif;
  letter-spacing: .04em; cursor: pointer; opacity: 0; transition: opacity .5s, background .2s; }
#pxaIntro.pi-skip-da .pi-skip { opacity: 1; }

/* Der Chat-Knopf liegt fest unten rechts (z-index 99990) und deckte den
   Ueberspringen-Knopf des Intros zu - auf dem Handy war er gar nicht mehr
   erreichbar. Waehrend das Intro laeuft, hat der Chat ohnehin nichts zu
   suchen: Es ist eine Vollbild-Einblendung, kein Zustand, in dem jemand
   eine Frage stellt. */
html.intro-an #pxaCon { opacity: 0; pointer-events: none;
  transition: opacity .4s ease; }
#pxaIntro .pi-skip:hover { background: rgba(124,58,237,.35); color: #fff; }

/* Intro: Kollaps-Abgang mit gefederter Radial-Maske (JS steuert mask-size) –
   weicher Übergangssaum statt harter Kreiskante. */
html.intro-an #pxaIntro {
  mask-image: radial-gradient(circle closest-side, #000 55%, transparent 74%);
  -webkit-mask-image: radial-gradient(circle closest-side, #000 55%, transparent 74%);
  mask-repeat: no-repeat; -webkit-mask-repeat: no-repeat;
  mask-position: center; -webkit-mask-position: center;
  /* Grundzustand: riesiges QUADRAT – bei mask-size in % richtet sich
     closest-side nach der kurzen Seite und liess auf breiten Screens
     die Raender in die Feder fallen (Header schien oben durch). */
  mask-size: 500vmax 500vmax; -webkit-mask-size: 500vmax 500vmax; }
#pxaIntro.pi-kollaps .pi-marke > div {
  transform: scale(.001); filter: blur(12px); opacity: .35;
  transition: transform 1.35s cubic-bezier(.55,0,.72,.1), filter 1.3s, opacity 1.3s; }
#pxaIntro.pi-kollaps .pi-skip { opacity: 0 !important; }

/* Mega-Menü «Live ansehen»-Karte: Text in beiden Zuständen weiss –
   eine globale Link-Hover-Regel färbte die Karte dunkel und machte
   die Beschreibung auf dem Verlauf unlesbar. */
.mm-feature, .mm-feature:hover { color: #fff; }
.mm-f-text { color: rgba(255,255,255,.9); }
.mm-feature:hover .mm-f-text { color: #fff; }

/* ── Mobile-Feinschliff (Screenshots 16.07.) ── */
@media (max-width: 560px) {
  /* Geschenk-Band Preise: gestapelt statt gequetscht */
  .pb-gratis { flex-direction: column; gap: 3px; text-align: center;
    padding: 12px 18px; line-height: 1.45; }
}
/* Vorschau-Kacheln: Platzhalter, solange das iframe (noch) nicht geladen ist */
.v-live { background: linear-gradient(160deg, #f1eefa, #e6e1f4); position: relative; }
.v-live::before { content: 'Vorschau'; position: absolute; inset: 0; display: grid;
  place-items: center; color: #9a90c4; font: 600 12px/1 'Outfit', sans-serif;
  letter-spacing: 2px; text-transform: uppercase; }
.v-live iframe { position: relative; z-index: 1; background: #fff; }

/* /vorlagen mobil: Branchen-Filter als kompakte Pills statt Riesen-Blöcke */
@media (max-width: 560px) {
  .chips { gap: 7px; }
  .chip-link { padding: 6px 10px; font-size: 12.5px; border-width: 1.5px; gap: 5px; }
  .chip-link small { font-size: 9.5px; padding: 1px 5px; }
}


/* Mobile-Menü als Drill-Down: Hauptliste schlicht, «Funktionen ›» öffnet
   nur die Unterseiten samt «‹ Zurück» – das Mega-Menü bleibt dem Desktop. */
.mm-zurueck { display: none; }

/* Mobile Vorschau-Kacheln: statisches Bild statt Live-iframe */
.v-live img.v-bild { position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: top; z-index: 1; background: #fff; }

/* Vorschau-Bilder: dezenter Zoom als Hover-Ersatz für die alte Scroll-Fahrt */
.v-live img.v-bild { transition: transform 1.1s ease; }
.vorlage-karte:hover .v-bild, a:hover > .v-live .v-bild { transform: scale(1.045); }

/* ── Vorschau-Fenster: Beispiel-Websites im Popup ──────────────────
   Optik wie der Vorschau-Dialog im Bestellprozess – dieselbe Sprache
   für dieselbe Sache. [hidden] gewinnt dank der globalen Regel. */
html.vs-offen { overflow: hidden; }
.vs-huelle { position: fixed; inset: 0; z-index: 300; display: flex;
  align-items: center; justify-content: center; padding: clamp(8px, 3vw, 36px);
  background: rgba(10,10,18,.78); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  opacity: 0; transition: opacity .2s ease; }
.vs-huelle.ist-da { opacity: 1; }
.vs-dialog { width: 100%; max-width: 1240px; height: 100%; max-height: 92vh;
  background: #fff; border-radius: 14px; overflow: hidden; display: flex; flex-direction: column;
  box-shadow: 0 30px 90px rgba(0,0,0,.5);
  transform: translateY(16px) scale(.985); transition: transform .28s cubic-bezier(.16,1,.3,1); }
.vs-huelle.ist-da .vs-dialog { transform: none; }
.vs-kopf { display: flex; justify-content: space-between; align-items: center; gap: 16px;
  padding: 13px 16px 13px 20px; border-bottom: 1.5px solid var(--linie);
  background: #fafafa; flex-shrink: 0; }
.vs-kopf-text { min-width: 0; }
.vs-titel { display: block; font-size: 15.5px; font-weight: 800; letter-spacing: -.2px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vs-hinweis { display: block; font-size: 12.5px; color: var(--muted); margin-top: 1px; }
.vs-tasten { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.vs-tab { font-size: 13px; font-weight: 700; color: var(--violet);
  border: 1.5px solid var(--linie); border-radius: 9px; padding: 8px 13px; white-space: nowrap;
  transition: border-color .18s ease, background .18s ease; }
.vs-tab:hover { border-color: var(--violet); background: var(--violet-soft); }
.vs-zu { background: none; border: 1.5px solid var(--linie); border-radius: 9px;
  width: 36px; height: 36px; font-size: 15px; cursor: pointer; color: var(--text2);
  transition: border-color .18s ease, color .18s ease; }
.vs-zu:hover { border-color: var(--tinte); color: var(--tinte); }
.vs-buehne { position: relative; flex: 1; background: #fff; }
.vs-frame { width: 100%; height: 100%; border: 0; display: block; background: #fff; }
.vs-lader { position: absolute; inset: 0; z-index: 2; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 16px; background: #fff; }
.vs-lader p { font-size: 14.5px; color: var(--text2); font-weight: 500; }
@media (max-width: 640px) {
  .vs-huelle { padding: 0; }
  .vs-dialog { max-height: 100%; border-radius: 0; }
  .vs-hinweis { display: none; }
  .vs-tab { padding: 8px 10px; }
}

/* ── Kundenportal: Erweiterungen ───────────────────────────────────
   Karten im Stil der übrigen Portal-Abschnitte: helle Fläche, weiche
   Rundung, zarte Linie. Aktive Module treten zurück, kaufbare vor. */
.kp-module { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 16px; }
.kp-modul { border: 1.5px solid #eceaf6; border-radius: 18px; padding: 20px 20px 18px;
  background: #fff; display: flex; flex-direction: column;
  transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease; }
.kp-modul:hover { border-color: #d9d4f0; transform: translateY(-2px);
  box-shadow: 0 12px 30px -18px rgba(20,12,50,.4); }
.kp-modul.ist-aktiv { background: #f8f7fd; border-color: rgba(124,58,237,.28); }
.kp-modul-kopf { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.kp-modul-zeichen { font-size: 26px; line-height: 1; flex: 0 0 auto; }
.kp-modul-titel { min-width: 0; flex: 1; }
.kp-modul-titel b { display: block; font-size: 16px; letter-spacing: -.2px; }
.kp-modul-preis { display: block; font-size: 13px; font-weight: 700; color: var(--violet); margin-top: 1px; }
.kp-modul-haken { flex: 0 0 auto; font-size: 11px; font-weight: 800; letter-spacing: .4px;
  color: var(--gruen); background: var(--gruen-pale); border-radius: 999px; padding: 4px 10px; }
.kp-modul-text { font-size: 13.5px; line-height: 1.6; color: var(--text2); margin: 0 0 12px; }
.kp-modul-liste { list-style: none; margin: 0 0 16px; padding: 0; display: grid; gap: 6px; }
.kp-modul-liste li { position: relative; padding-left: 20px; font-size: 13px; color: var(--text2); }
.kp-modul-liste li::before { content: '✓'; position: absolute; left: 0; top: 0;
  color: var(--violet); font-weight: 800; }
.kp-modul-fuss { margin-top: auto; display: flex; align-items: center; justify-content: space-between;
  gap: 12px; flex-wrap: wrap; padding-top: 14px; border-top: 1.5px solid #f3f1fa; }
.kp-modul-kauf { white-space: nowrap; }
.kp-modul-seit { font-size: 12.5px; color: var(--muted); font-weight: 600; }
.kp-modul-mehr { font-size: 12.5px; font-weight: 700; color: var(--muted); white-space: nowrap; }
.kp-modul-mehr:hover { color: var(--violet); }
.kp-modul-fussnote { margin: 18px 2px 0; font-size: 13px; line-height: 1.6; color: var(--muted); }
.kp-kauf-gut, .kp-kauf-weh { border-radius: 14px; padding: 14px 18px; margin-bottom: 18px; }
.kp-kauf-gut { background: var(--gruen-pale); border: 1.5px solid var(--gruen); }
.kp-kauf-gut b { color: var(--gruen); font-size: 15px; }
.kp-kauf-weh { background: var(--rot-pale); border: 1.5px solid var(--rot); }
.kp-kauf-weh b { color: var(--rot); font-size: 15px; }
.kp-kauf-gut p, .kp-kauf-weh p { margin: 5px 0 0; font-size: 13.5px; line-height: 1.6; color: var(--text2); }
@media (max-width: 560px) {
  .kp-module { grid-template-columns: 1fr; }
  .kp-modul-fuss { flex-direction: column; align-items: stretch; }
  .kp-modul-kauf { width: 100%; }
  .kp-modul-mehr { text-align: center; }
}

/* Zusätzliche Seite: Titel und Varianten-Wahl in der Modul-Karte */
.kp-seite-form{margin:0 0 16px}
.kp-seite-form label{display:block;font-size:11px;font-weight:800;letter-spacing:1.4px;
  text-transform:uppercase;color:var(--muted);margin-bottom:6px}
.kp-seite-form input[type=text]{width:100%;border:1.5px solid #e3e0f0;border-radius:12px;
  padding:11px 13px;font:inherit;font-size:14.5px;background:#fff;outline:none;
  transition:border-color .14s ease,box-shadow .14s ease}
.kp-seite-form input[type=text]:focus{border-color:var(--violet);box-shadow:0 0 0 3px rgba(124,58,237,.13)}
.kp-seite-wahl{display:grid;gap:8px;margin-top:12px}
.kp-seite-wahl > label{display:flex;align-items:flex-start;gap:10px;border:1.5px solid #eceaf6;
  border-radius:12px;padding:11px 13px;cursor:pointer;text-transform:none;letter-spacing:0;
  font-size:13.5px;font-weight:400;color:var(--tinte);margin:0;transition:border-color .14s,background .14s}
.kp-seite-wahl > label:hover{border-color:#d6cff0}
.kp-seite-wahl > label:has(input:checked){border-color:var(--violet);background:#f8f7fd}
.kp-seite-wahl input{margin-top:3px;accent-color:var(--violet);flex:0 0 auto}
.kp-seite-wahl b{display:block;font-size:14px;font-weight:700}
.kp-seite-wahl span{display:block;font-size:12.5px;color:var(--muted);margin-top:1px}

/* Erweiterungen: Eingabe für mehrfach kaufbare Module (Zusatzseiten) */
.kp-modul-eingabe { margin: 0 0 16px; }
.kp-modul-eingabe label { display: block; font-size: 11px; font-weight: 800; letter-spacing: 1.4px;
  text-transform: uppercase; color: var(--muted); margin-bottom: 7px; }
.kp-modul-titelfeld { width: 100%; border: 1.5px solid #e3e0f0; border-radius: 12px;
  padding: 11px 13px; font: inherit; font-size: 14.5px; background: #fff; color: var(--tinte);
  outline: none; transition: border-color .15s ease, box-shadow .15s ease; }
.kp-modul-titelfeld:focus { border-color: var(--violet); box-shadow: 0 0 0 3px rgba(124,58,237,.12); }
.kp-modul-schon { margin: 8px 0 0; font-size: 12.5px; color: var(--muted); }
.kp-modul-tasten { display: flex; gap: 8px; flex-wrap: wrap; }
.kp-modul-tasten .kp-btn { white-space: nowrap; }
@media (max-width: 560px) { .kp-modul-tasten { width: 100%; } .kp-modul-tasten .kp-btn { flex: 1; } }
.kp-modul-wahl { display: grid; gap: 8px; margin-top: 12px; }
.kp-modul-wahl label { display: flex; align-items: center; gap: 10px; cursor: pointer;
  border: 1.5px solid #eceaf6; border-radius: 12px; padding: 10px 13px; transition: border-color .15s; }
.kp-modul-wahl label:hover { border-color: #d9d4f0; }
.kp-modul-wahl input { accent-color: var(--violet); width: 17px; height: 17px; flex: 0 0 auto; }
.kp-modul-wahl span { display: flex; align-items: baseline; justify-content: space-between;
  gap: 10px; flex: 1; min-width: 0; }
.kp-modul-wahl b { font-size: 14px; font-weight: 600; }
.kp-modul-wahl small { font-size: 13px; font-weight: 700; color: var(--violet); white-space: nowrap; }

/* --- Touch-Geraete: Vorlagen-Kacheln ohne Hover-Zwang (iOS-Doppeltipp-Fix) ---
   Auf Touch blendete der :hover-Zustand erst das Karten-Auge ein; iOS wertet
   den ersten Tipp dann als "Hover" und feuert den Klick erst beim zweiten ->
   das Design liess sich nur mit zwei Tipps waehlen. Auf Touch ist der Hover-
   Zustand jetzt gleich dem Normalzustand, damit der erste Tipp sofort waehlt. */
@media (hover: none) {
  .vorlage-karte:hover { transform: none; }
  .vorlage-karte:active { transform: translateY(-2px); }
  .vorlage-karte .v-auge { opacity: 1; }
  .vorlage-karte:hover .v-bild,
  a:hover > .v-live .v-bild { transform: none; }
}

/* ── Kino-Film Website-Übernahme (imp-*) — helle Mockups auf dunkler Bühne ── */
.imp-akt-lesen,.imp-akt-sammeln,.imp-akt-bauen,.imp-akt-vn{display:flex;flex-direction:column}
/* Akt 1: alte Website + Scanner */
.imp-alt{position:relative;flex:1;max-width:560px;width:100%;margin:0 auto;background:#efeae2;border-radius:12px;padding:16px 18px;overflow:hidden;display:flex;flex-direction:column;gap:12px}
.imp-a-kopf{display:flex;align-items:center;justify-content:space-between}
.imp-a-logo{width:74px;height:16px;border-radius:4px;background:#b9b0a2}
.imp-a-nav{display:flex;gap:8px}
.imp-a-nav i{width:34px;height:8px;border-radius:4px;background:#cfc7ba}
.imp-a-hero{padding:6px 0 2px}
.imp-a-titel{width:70%;height:16px;border-radius:4px;background:#8f8678;margin-bottom:9px}
.imp-a-zeile{width:92%;height:8px;border-radius:4px;background:#cfc7ba;margin-bottom:6px}
.imp-a-zeile.kurz{width:58%}
.imp-a-reihe{display:flex;gap:10px;flex:1;min-height:56px}
.imp-a-bild{flex:1;border-radius:8px;background:linear-gradient(135deg,#d8d0c2,#c4bbaa)}
.imp-item{outline:2px solid transparent;outline-offset:2px;transition:outline-color .4s,box-shadow .4s;border-radius:8px}
.imp-item.imp-mark{outline-color:#C43A31;box-shadow:0 0 0 4px rgba(196,58,49,.18)}
.imp-scan{position:absolute;left:0;right:0;top:-8%;height:5px;border-radius:4px;background:linear-gradient(90deg,transparent,#C43A31 30%,#7c3aed 70%,transparent);box-shadow:0 0 18px rgba(196,58,49,.55);opacity:0;z-index:2}
.imp-alt.scannt .imp-scan{opacity:1;animation:impScan 3.4s ease-in-out forwards}
@keyframes impScan{0%{top:-4%}55%{top:102%}56%{top:102%;opacity:1}70%{top:40%;opacity:.85}100%{top:102%;opacity:0}}
/* Akt 2: Chips */
.imp-chips{flex:1;display:flex;flex-wrap:wrap;gap:12px;align-content:center;justify-content:center;max-width:520px;margin:0 auto}
.imp-chip{display:inline-flex;align-items:center;gap:8px;padding:12px 18px;border-radius:999px;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.16);color:#e9e6f2;font-size:14.5px;font-weight:600;opacity:0;transform:translateY(10px) scale(.94);transition:opacity .45s,transform .45s}
.imp-chip.pop{opacity:1;transform:none}
.imp-chip b{color:#fff;font-weight:800}
.imp-punkt{width:15px;height:15px;border-radius:50%;display:inline-block;border:1.5px solid rgba(255,255,255,.35);margin-left:2px}
/* Akt 3: neue Website baut sich */
.imp-neu{flex:1;max-width:560px;width:100%;margin:0 auto;background:#fff;border-radius:12px;padding:16px 18px;display:flex;flex-direction:column;gap:12px;overflow:hidden}
.imp-teil{opacity:0;transform:translateY(12px);transition:opacity .5s,transform .5s}
.imp-teil.an{opacity:1;transform:none}
.imp-n-hero{background:linear-gradient(120deg,#C43A31,#a02c25);border-radius:10px;padding:16px;display:flex;flex-direction:column;gap:8px}
.imp-n-titel{width:64%;height:14px;border-radius:4px;background:rgba(255,255,255,.92)}
.imp-n-sub{width:84%;height:8px;border-radius:4px;background:rgba(255,255,255,.55)}
.imp-n-knopf{align-self:flex-start;margin-top:4px;background:#fff;color:#C43A31;font-size:11.5px;font-weight:800;padding:6px 12px;border-radius:7px}
.imp-n-karten{display:flex;gap:10px;flex:1;min-height:58px}
.imp-n-karte{flex:1;border-radius:8px;background:#f4f1ec;border:1px solid #e7e1d6;position:relative}
.imp-n-karte::before{content:'';position:absolute;left:12%;top:18%;width:34%;height:9px;border-radius:4px;background:#C43A31;opacity:.85}
.imp-n-karte::after{content:'';position:absolute;left:12%;top:46%;width:72%;height:7px;border-radius:4px;background:#d9d2c4;box-shadow:0 13px 0 #d9d2c4}
/* Akt 4: Vorher/Nachher */
.imp-vn{flex:1;display:flex;align-items:center;justify-content:center;gap:clamp(12px,3.5vw,30px);max-width:560px;margin:0 auto;width:100%}
.imp-vn-spalte{flex:1;max-width:210px;text-align:center}
.imp-vn-label{display:block;font-size:12px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;color:#b9b3cd;margin-bottom:9px}
.imp-vn-alt,.imp-vn-neu{border-radius:10px;padding:13px;display:flex;flex-direction:column;gap:8px;min-height:110px}
.imp-vn-alt{background:#e6e1d7;filter:grayscale(.5) brightness(.94)}
.imp-vn-alt i{border-radius:4px;background:#b6ad9d;height:9px}
.imp-vn-alt i:first-child{height:14px;width:62%}
.imp-vn-alt i:nth-child(3){width:74%}
.imp-vn-neu{background:#fff;box-shadow:0 10px 30px rgba(124,58,237,.28)}
.imp-vn-neu i{border-radius:4px;background:#e6e0d4;height:9px}
.imp-vn-neu i:first-child{height:14px;width:62%;background:#C43A31}
.imp-vn-neu i:nth-child(3){width:74%}
.imp-vn-pfeil{font-size:clamp(22px,4vw,32px);color:#7c3aed;font-weight:800}
.imp-badges{display:flex;gap:12px;justify-content:center;margin-top:16px;flex-wrap:wrap}
.imp-badge{background:rgba(34,197,94,.14);border:1px solid rgba(34,197,94,.4);color:#7ce6a3;font-size:13.5px;font-weight:700;padding:8px 15px;border-radius:999px;opacity:0;transform:translateY(8px);transition:opacity .5s,transform .5s}
.imp-badge.an{opacity:1;transform:none}
@media (max-width:560px){.imp-a-nav i:nth-child(n+3){display:none}.imp-chips{gap:9px}.imp-chip{padding:10px 14px;font-size:13px}}

/* ── Kino-Film Feedback (fm-*) + Referenz-Badge ── */
.fm-akt-melden,.fm-akt-ankunft,.fm-akt-status,.fm-akt-fertig{display:flex;flex-direction:column;justify-content:center}
.fm-formular{max-width:480px;width:100%;margin:0 auto}
.fm-knopf{margin-top:14px;text-align:center;background:#7c3aed;color:#fff;font-weight:800;font-size:14.5px;padding:12px;border-radius:10px;transition:transform .18s,box-shadow .18s}
.fm-knopf.klick{transform:scale(.96);box-shadow:0 3px 10px rgba(124,58,237,.5)}
.fm-ok{width:64px;height:64px;margin:0 auto 14px;opacity:0;transform:scale(.6);transition:opacity .5s,transform .5s cubic-bezier(.34,1.56,.64,1)}
.fm-ok.an{opacity:1;transform:none}
.fm-ok svg{width:100%;height:100%}
.fm-ok circle{fill:none;stroke:#22c55e;stroke-width:3}
.fm-ok path{fill:none;stroke:#22c55e;stroke-width:4;stroke-linecap:round;stroke-linejoin:round}
.fm-ok-titel{text-align:center;color:#fff;font-weight:800;font-size:17px}
.fm-mail{max-width:420px;margin:14px auto 0;text-align:center;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.16);border-radius:12px;padding:13px 16px;color:#cbc4dd;font-size:14px;opacity:0;transform:translateY(10px);transition:opacity .5s,transform .5s}
.fm-mail.an{opacity:1;transform:none}
.fm-mail b{color:#fff}
.fm-zeile{max-width:520px;width:100%;margin:0 auto;background:#fff;border-radius:12px;padding:14px 16px;display:flex;align-items:center;justify-content:space-between;gap:12px}
.fm-text{color:#1e1b2a;font-size:14.5px;font-weight:600;text-align:left}
.fm-chip{flex:none;font-size:12.5px;font-weight:800;padding:5px 12px;border-radius:999px;letter-spacing:.3px}
.fm-offen{background:#fff3dd;color:#b45309}
.fm-geplant{background:#efe9ff;color:#6d28d9}
.fm-erledigt{background:#e4f6ea;color:#1a7f4b}
.fm-verlauf{max-width:520px;width:100%;margin:22px auto 0;display:flex;align-items:center;gap:8px}
.fm-stufe{flex:none;font-size:12.5px;font-weight:700;color:#8f88a6;border:1.5px solid rgba(255,255,255,.22);padding:6px 13px;border-radius:999px;transition:color .4s,border-color .4s,background .4s}
.fm-stufe.an{color:#fff;border-color:#7c3aed;background:rgba(124,58,237,.28)}
.fm-verlauf i{flex:1;height:2px;background:rgba(255,255,255,.18);border-radius:2px}
.fm-antwort{max-width:520px;width:100%;margin:16px auto 0;background:#e9fbf1;border:1px solid rgba(34,197,94,.4);border-radius:12px;padding:13px 16px;color:#14532d;font-size:14px;text-align:left;opacity:0;transform:translateY(10px);transition:opacity .5s,transform .5s}
.fm-antwort.an{opacity:1;transform:none}
.fm-antwort b{color:#0f3d21}
.ref-umzug{display:inline-block;margin-top:6px;font-size:11.5px;font-weight:800;letter-spacing:.4px;color:#6d28d9;background:#efe9ff;border-radius:999px;padding:3px 10px}
@media (max-width:560px){.fm-zeile{flex-direction:column;align-items:flex-start}.fm-verlauf{gap:5px}.fm-stufe{padding:5px 9px;font-size:11.5px}}

/* ── Bestell-Schritt 3: Wahl «Pixify-Vorlage» vs «1:1-Nachbau» ── */
.nb-wahl{display:grid;gap:12px;margin:0 0 18px}
.nb-opt{display:flex;gap:12px;align-items:flex-start;background:#fff;border:1.5px solid var(--linie,#e5e0ea);border-radius:13px;padding:14px 16px;cursor:pointer;transition:border-color .2s}
.nb-opt:hover{border-color:#c9b8f2}
.nb-opt input{width:auto;margin-top:3px;accent-color:#7c3aed}
.nb-opt input:checked ~ span b{color:#5b21b6}
.nb-opt small{color:var(--text2,#6f6782);line-height:1.5;display:block;margin-top:2px}
#nbFelder{background:#faf8fd;border:1.5px dashed #d9ccf3;border-radius:13px;padding:14px 16px;margin:2px 0 16px}
#nbFelder .hinweis{margin:8px 0 0;font-size:13px;color:#8a7d97}

.f-schritt.uebersprungen{opacity:.25;transition:opacity .3s}
/* ── Danke-Seite: Umzugs-Karte beim 1:1-Nachbau (statt Vorlagen-Reveal) ── */
.bau-umzug{height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:10px;padding:26px;background:linear-gradient(160deg,#17142a,#221b3f)}
.bau-umzug .bu-icon{width:58px;height:58px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:26px;color:#fff;background:rgba(124,58,237,.35);border:1.5px solid rgba(167,139,250,.6)}
.bau-umzug .bu-titel{margin:0;color:#fff;font-size:19px;font-weight:800}
.bau-umzug .bu-text{margin:0;max-width:440px;color:#c9c3dd;font-size:14.5px;line-height:1.65}
.bau-umzug .bu-text b{color:#fff}

/* ── Shop-Preisblock: drei gleichwertige Stufen-Karten ── */
.pb-stufen-3{grid-template-columns:repeat(3,1fr)}
.pb-stufe{display:flex;flex-direction:column;gap:6px}
.pb-stufe small{flex:1}
.pb-zahl-anfrage{font-size:clamp(19px,2.4vw,24px);font-weight:800;color:#fff;padding:6px 0 2px}
.pb-stufe-anfrage{border-style:dashed;border-color:rgba(196,181,253,.4)}
.pb-stufe-cta{display:block;text-align:center;margin-top:10px;padding:10px 12px;border-radius:10px;font-size:13.5px;font-weight:800;color:#fff;background:#7c3aed;text-decoration:none;transition:background .2s,transform .15s}
a.pb-stufe-cta:hover{background:#8b5cf6;transform:translateY(-1px)}
.pb-stufe-anfrage .pb-stufe-cta{background:transparent;border:1.5px solid rgba(196,181,253,.55);color:#e4dcff}
.pb-stufe-anfrage a.pb-stufe-cta:hover{background:rgba(124,58,237,.25)}
.pb-stufe-cta.ist-aus{background:rgba(255,255,255,.08);color:#8f88a6;cursor:default}
@media (max-width:900px){.pb-stufen-3{grid-template-columns:1fr}}

/* ── Shop-Panel: Beispielprodukte-Kennzeichnung ── */
.sp-beispiel-hinweis{grid-column:1/-1;background:#f4f0fa;border:1px solid #e4dcf5;border-radius:12px;padding:10px 14px;font-size:13.5px;line-height:1.55;color:#4c4066;margin:0 0 6px}
.sp-p-beispiel{display:inline-block;margin-left:8px;padding:2px 8px;border-radius:999px;font-size:10.5px;font-weight:800;letter-spacing:.4px;text-transform:uppercase;background:rgba(124,58,237,.12);color:#6d28d9;vertical-align:2px}

/* ── Panel-Kopf mobil: Link-Zeile (Shop/Vorschau/Abmelden) über die
     zweite .top-innen-Schicht heben – vorher schluckte die Logo-Schicht
     alle Taps auf die Aktions-Links. ── */
body.kp .top-nav.kp-aktionen{position:relative;z-index:5}
body.kp .top::before,body.kp .top::after,body.kp .top-innen::before,body.kp .top-innen::after{pointer-events:none}
/* Bei aktivem Support-Banner: Panel-Kopf klebt UNTER dem Banner statt dahinter */
body.kp:has(.pxa-support-banner) header.top{top:46px}

/* ── Kundenpanel: Kopf-Aktionen sind KEIN Burger-Overlay ──────────────────
   Die Mobil-Regel der Hauptnavigation (nav.top-nav als fixed Overlay mit
   opacity:0 + pointer-events:none + visibility:hidden) legte die Panel-
   Links schlafen: per kp-Overrides sichtbar, aber nicht antippbar.
   Hier wird das Overlay-Verhalten für das Panel komplett neutralisiert. */
body.kp nav.top-nav.kp-aktionen{
  position:static !important; transform:none !important; opacity:1 !important;
  pointer-events:auto !important; visibility:visible !important;
  flex-direction:row !important; align-items:center !important;
  background:transparent !important; border:0 !important; box-shadow:none !important;
  padding:0 !important; gap:10px !important;
}

/* ── Shop-Seite: Skill-Gitter (helles Thema) ── */
.sk-gitter{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:26px}
.sk-karte{display:block;background:#fff;border:1.5px solid var(--linie,#e6e0f2);border-radius:14px;padding:16px 15px;height:auto;min-height:0;overflow:visible;box-shadow:0 4px 14px rgba(30,22,51,.05)}
.sk-karte>b{display:block;font-size:15px;color:#1e1633;margin:0 0 7px}
.sk-karte>small{display:block;font-size:13px;line-height:1.55;color:#5a5470}
.sk-karte small b{display:inline;font-size:inherit;color:#6d28d9}
@media (max-width:1000px){.sk-gitter{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.sk-gitter{grid-template-columns:1fr}}

.fz-gewinn{color:#c4a5ff!important;font-weight:700}.fz-gewinn:hover{color:#e9dbff!important}