/* Produktseite CrowdWork. Aufbau und Bausteine wie die SlideDesk-Produktseite
   (SlideDesk/mockups/produktseite), damit die TSE Product Family gleich
   auftritt: Familien-Lockup, dunkle Bühne mit Glyphenfeld, ruhige Abschnitte.
   Das eine kühne Element ist die Leinwand in der Bühne, die mit dem echten
   Diagramm-Renderer läuft. */

.pp { background: var(--bg-1); }
.pp main { max-width: none; padding: 0; }
.pp-skip { position: absolute; left: 16px; top: -48px; z-index: 100; background: var(--bg-strong); color: var(--fg-on-strong);
  padding: 10px 14px; border-radius: var(--radius-2); font-weight: 600; text-decoration: none; }
.pp-skip:focus { top: 8px; }
.pp a:focus-visible, .pp button:focus-visible, .pp summary:focus-visible { outline: none; box-shadow: var(--shadow-red-glow); border-radius: var(--radius-2); }

/* Dunkle Flächen nur in der dunklen Darstellung; sonst bleibt die Seite weiß */
:root[data-thema="dunkel"] .pp-hero, :root[data-thema="dunkel"] .pp-schluss {
  color-scheme: dark;
  --fg-1: var(--tse-mist); --fg-2: var(--tse-silver); --fg-3: var(--tse-stone); --fg-accent: var(--tse-red-bright);
  --fg-success: var(--tse-success-light); --bg-1: var(--tse-ink); --bg-2: var(--tse-graphite); --bg-3: var(--tse-black);
  --bg-accent: var(--tse-red-tint); --bg-accent-hover: var(--tse-red); --bg-accent-wash: var(--tse-red-deep);
  --border-1: var(--tse-steel); --border-2: var(--tse-charcoal); --border-strong: var(--tse-mist); --border-accent: var(--tse-red-bright);
  --shadow-3: 0 24px 64px rgba(0,0,0,0.55), 0 0 0 1px var(--tse-charcoal);
  color: var(--fg-1);
}

/* Kopfzeile */
.pp-lockup { display: flex; align-items: center; gap: 12px; text-decoration: none; color: var(--fg-1); }
.pp-lockup img { height: 20px; width: auto; display: block; }
.pp-lockup-name { font-weight: 700; font-size: 17px; letter-spacing: -0.015em; white-space: nowrap; }
.pp-nav { display: none; gap: 2px; margin-left: 12px; }
.pp-nav a { display: inline-flex; align-items: center; min-height: 42px; padding: 0 12px; color: var(--fg-2); font-size: 13px; font-weight: 600;
  text-decoration: none; border-radius: var(--radius-2); transition: color var(--duration-base) var(--ease-standard), background var(--duration-base) var(--ease-standard); }
.pp-nav a:hover { color: var(--fg-1); background: var(--bg-3); }
@media (min-width: 1180px) { .pp-nav { display: flex; } }
.pp-nur-breit { display: none !important; }
@media (min-width: 900px) { .pp-nur-breit { display: inline-flex !important; } }

/* Typo */
.pp-innen { max-width: 1180px; margin: 0 auto; padding: 0 16px; }
.pp-h2 { font-size: clamp(30px, 3.6vw, 44px); font-weight: 800; letter-spacing: -0.025em; line-height: 1.08; max-width: 22ch; }
.pp-gross { font-size: clamp(38px, 5.4vw, 64px); font-weight: 800; letter-spacing: -0.035em; line-height: 1; }
.pp-absatz { margin: 16px 0 48px; font-size: var(--fs-body-lg); line-height: var(--lh-loose); color: var(--fg-2); max-width: 60ch; }
.pp-leise { color: var(--fg-2); }
.pp-cta { display: flex; flex-wrap: wrap; gap: 10px; }
.pp-btn-dunkel { background: transparent; border-color: var(--border-1); color: var(--fg-1); }
.pp-btn-dunkel:hover { border-color: var(--border-strong); background: rgba(255,255,255,0.04); }
.pp-platzhalter { display: inline-block; margin-top: 10px; padding: 4px 8px; border: 1px dashed var(--border-accent); border-radius: var(--radius-1);
  color: var(--fg-accent); font-size: 12px; font-weight: 600; line-height: 1.4; }

/* ============ Bühne ============ */
.pp-hero { position: relative; z-index: 1; background: var(--bg-1); isolation: isolate; overflow: hidden; }
:root[data-thema="dunkel"] .pp-hero { background: #050404; }
.pp-hero-feld { position: absolute; inset: 0; z-index: 0; overflow: hidden; }
.pp-hero-feld { display: none; }
:root[data-thema="dunkel"] .pp-hero-feld { display: block; }
:root[data-thema="dunkel"] .pp-hero::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(180deg, rgba(5,4,4,0.5) 0%, rgba(5,4,4,0.8) 60%, rgba(5,4,4,0.96) 100%); }
.pp-hero { border-bottom: 1px solid var(--border-2); }
.pp-hero-innen { position: relative; z-index: 2; max-width: 1180px; margin: 0 auto; padding: 72px 16px 72px; display: grid; gap: 28px; }
.pp-hero h1 { font-size: clamp(44px, 6.4vw, 92px); font-weight: 800; line-height: .96; letter-spacing: -0.04em; color: var(--fg-1); max-width: 12ch; }
.pp-hero-unten { display: grid; gap: 24px; margin-top: 24px; align-items: end; }
.pp-hero-unten .pp-cta { margin-top: 4px; }
.pp-lead { font-size: var(--fs-body-lg); line-height: var(--lh-loose); color: var(--fg-2); max-width: 46ch; }

/* Demo-Leinwand */
.pp-demo { margin: 0; }
.pp-demo-leinwand { position: relative; aspect-ratio: 16 / 9; border-radius: var(--radius-3); overflow: hidden; box-shadow: var(--shadow-3);
  background: var(--leinwand-grund); color: var(--leinwand-schrift); padding: clamp(14px, 2.2vw, 30px) clamp(18px, 3vw, 44px);
  display: flex; flex-direction: column; font-size: clamp(10px, 1.35vw, 17px); }
.pp-demo-buehne { flex: 1; min-height: 0; }
.pp-demo-buehne > .ebene { display: flex; flex-direction: column; min-height: 0; }
.pp-demo-kopf { display: flex; justify-content: space-between; align-items: center; gap: 12px; color: var(--leinwand-leise); font-size: .9em; }
.pp-demo-mitmachen { display: inline-flex; gap: 10px; align-items: baseline; background: var(--leinwand-flaeche); padding: 5px 10px; border-radius: 3px; }
.pp-demo-mitmachen b { color: var(--leinwand-schrift); font-weight: 600; }
.pp-demo-mitmachen .kennung { font-weight: 700; font-size: 1.15em; color: var(--leinwand-schrift); }
.pp-demo-online::before { content: ""; display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: #2E7D4F; margin-right: 6px; vertical-align: 1px; }
.pp-demo-titel { font-size: 2em; font-weight: 800; letter-spacing: -0.02em; margin: .8em 0 .7em; line-height: 1.1; }
.pp-demo-diagramm { flex: 1; min-height: 0; font-size: 1.05em; padding-bottom: 4.2em; }
.pp-demo-diagramm .d-spur { height: 1.2em; }
.pp-demo-diagramm .d-wolke { min-height: 0; height: 100%; }
.pp-demo-binde { position: absolute; left: clamp(14px, 2.2vw, 30px); right: clamp(14px, 2.2vw, 30px); bottom: clamp(12px, 1.8vw, 24px); display: flex; gap: 14px; align-items: center; justify-content: space-between;
  padding: 12px 16px; background: var(--leinwand-schrift); color: var(--leinwand-grund); border-left: 5px solid var(--leinwand-balken); border-radius: 3px;
  font-weight: 700; font-size: 1.1em; transform: translateY(140%); opacity: 0;
  transition: transform 300ms cubic-bezier(.4, 0, .7, .2), opacity 300ms cubic-bezier(.4, 0, .7, .2); }
.pp-demo-binde.da { transform: none; opacity: 1; transition: transform 450ms var(--ease-standard), opacity 450ms var(--ease-standard); }
.pp-demo-reaktionen { position: absolute; right: 22px; bottom: 70px; width: 80px; height: 70%; pointer-events: none; }
.pp-demo-reaktionen .lw-reaktion svg { width: 1.8em; height: 1.8em; }
.pp-demo-fuss { display: flex; align-items: center; justify-content: space-between; margin-top: 12px; }
.pp-live { display: inline-flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--fg-2); }
.pp-live-punkt { width: 8px; height: 8px; border-radius: 50%; background: var(--fg-accent); animation: pp-blinken 1.6s var(--ease-standard) infinite; }
.pp-pausiert .pp-live-punkt { animation: none; }
@keyframes pp-blinken { 0%, 100% { opacity: 1; } 50% { opacity: .25; } }
.pp-pause { width: 42px; height: 42px; display: grid; place-items: center; border: 1px solid var(--border-2); border-radius: var(--radius-2);
  background: transparent; color: var(--fg-2); cursor: pointer; transition: color var(--bewegung-ui) var(--ease-standard), border-color var(--bewegung-ui) var(--ease-standard); }
.pp-pause:hover { color: var(--fg-1); border-color: var(--border-1); }
.pp-pause svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; }

/* Teilnehmen */
.pp-teilnehmen { background: var(--bg-2); border-top: 0; border-bottom: 1px solid var(--border-2); scroll-margin-top: var(--shell-h); }
.pp-teilnehmen-innen { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 16px; padding-top: 12px; padding-bottom: 12px; }
.pp-teilnehmen h2 { font-size: 16px; }
.pp-code { display: flex; gap: 8px; flex: 1; max-width: 460px; min-width: 0; }
.pp-code input { min-width: 0; width: 0; }
@media (max-width: 520px) { .pp-teilnehmen-innen > .pp-code, .pp-teilnehmen-innen form { flex: 1 1 100%; max-width: none; } }
.pp-code input { flex: 1; min-height: 50px; font-family: var(--font-mono); font-size: 18px; letter-spacing: .06em; text-align: center; }
.pp-code .btn { min-height: 50px; font-size: 14px; }

/* Abschnitte */
.pp-abschnitt { padding: 96px 0; }
.pp-grau { background: var(--bg-1); border-top: 1px solid var(--border-2); border-bottom: 1px solid var(--border-2); }
.pp-schritte { list-style: none; margin: 48px 0 0; padding: 0; display: grid; gap: 40px; }
@media (min-width: 900px) { .pp-schritte { grid-template-columns: repeat(3, 1fr); gap: 48px; } }
.pp-schritte li { position: relative; display: flex; flex-direction: column; gap: 10px; padding-top: 22px; border-top: 2px solid var(--border-strong); }
.pp-schritt-nr { display: block; font-family: var(--font-mono); font-size: 13px; font-weight: 600; color: var(--fg-2); margin-bottom: 6px; letter-spacing: 0; }
.pp-schritte h3 { font-size: 22px; font-weight: 700; letter-spacing: -0.015em; margin-top: 4px; }
.pp-schritte p { font-size: var(--fs-body); line-height: var(--lh-loose); color: var(--fg-2); max-width: 34ch; }

.pp-gruppen { display: grid; gap: 40px; }
.pp-gruppe h3 { font-size: 16px; font-weight: 700; padding-bottom: 10px; border-bottom: 2px solid var(--border-strong); }
.pp-typen { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: 32px; }
.pp-typen li { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 2px 12px; align-items: start; padding: 16px 0; border-bottom: 1px solid var(--border-2); }
.pp-typen .ic { grid-row: span 2; display: inline-flex; padding-top: 1px; }
.pp-typen .ic svg { width: 20px; height: 20px; fill: none; stroke: var(--fg-2); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.pp-typen b { font-size: 15px; font-weight: 600; }
.pp-typen span.t { font-size: 14px; color: var(--fg-2); line-height: 1.45; }
@media (max-width: 1000px) { .pp-typen { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 700px) { .pp-typen span.t { display: none; } .pp-typen li { padding: 12px 0; } .pp-typen { column-gap: 20px; } }

.pp-zwei { display: grid; gap: 48px; margin-top: 56px; }
@media (min-width: 900px) { .pp-zwei { grid-template-columns: 1fr 1fr; gap: 64px; } }
.pp-zwei h3 { font-size: 16px; font-weight: 700; padding-bottom: 10px; border-bottom: 2px solid var(--border-strong); }
.pp-liste { list-style: none; margin: 0; padding: 0; }
.pp-liste li { padding: 11px 0; border-bottom: 1px solid var(--border-2); font-size: 15.5px; line-height: 1.45; }

.pp-ernst { display: grid; gap: 0; margin: 0; border-top: 2px solid var(--border-strong); }
@media (min-width: 900px) { .pp-ernst { grid-template-columns: 1fr 1fr; column-gap: 48px; } }
.pp-ernst > div { padding: 20px 0; border-bottom: 1px solid var(--border-1); }
.pp-ernst dt { font-size: 17px; font-weight: 700; letter-spacing: -0.01em; }
.pp-ernst dd { margin: 6px 0 0; font-size: 15px; line-height: var(--lh-loose); color: var(--fg-2); max-width: 52ch; }
.pp-knapp { padding: 64px 0; }
.pp-daten { display: grid; gap: 24px 64px; }
@media (min-width: 960px) { .pp-daten { grid-template-columns: minmax(0, 1fr) minmax(0, 2.2fr); } .pp-daten .pp-vertrag { grid-column: 2; } }
.pp-fakten { margin: 0; display: grid; gap: 20px 40px; }
@media (min-width: 700px) { .pp-fakten { grid-template-columns: 1fr 1fr; } }
.pp-fakten dt { font-weight: 700; font-size: 15.5px; }
.pp-fakten dd { margin: 4px 0 0; color: var(--fg-2); line-height: var(--lh-loose); font-size: 15px; }
.pp-klein { margin-top: 18px; }
.pp-vertrag { margin-top: 8px; padding: 20px 22px; border-left: 3px solid var(--border-strong); background: var(--bg-2); font-size: 15px; line-height: var(--lh-loose); color: var(--fg-2); }
.pp-vertrag strong { color: var(--fg-1); }

/* Branding-Beispiel */
.pp-marke { display: grid; gap: 48px; align-items: center; }
@media (min-width: 1000px) { .pp-marke { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); } }
.pp-marke-bild { position: relative; padding: 0 0 40px; --m-grund: #FAFAFA; --m-schrift: #1F1F1F; --m-akzent: #801624; --m-leise: #6B6B6B; --m-flaeche: #F0F0F0; }
.pp-marke-bild[data-marke="kongress"] { --m-grund: #0B2540; --m-schrift: #FFFFFF; --m-akzent: #3FA9F5; --m-leise: #A9BCD0; --m-flaeche: #143457; }
.pp-marke-bild[data-marke="gala"] { --m-grund: #1A1410; --m-schrift: #F5EBDD; --m-akzent: #C9A24B; --m-leise: #B7A890; --m-flaeche: #2A211A; }
.pp-segment button { min-height: 42px; }
.pp-mb-leinwand { container-type: inline-size; aspect-ratio: 16 / 9; border-radius: var(--radius-3); background: var(--m-grund); color: var(--m-schrift); padding: 20px 26px; box-shadow: var(--shadow-3);
  display: flex; flex-direction: column; transition: background .4s var(--ease-standard), color .4s var(--ease-standard); }
.pp-mb-kopf { display: flex; justify-content: space-between; align-items: center; }
.pp-mb-logo { display: inline-block; width: 92px; height: 22px; border-radius: 2px; background: var(--m-akzent); transition: background .4s; }
.pp-marke-bild[data-marke="standard"] .pp-mb-logo { background: url("/static/bildmarke.png") left center / contain no-repeat; }
.pp-mb-code { background: var(--m-flaeche); padding: 4px 10px; border-radius: 3px; font-weight: 700; transition: background .4s; }
.pp-mb-titel { font-size: 3.6cqi; margin: 3cqi 0 1cqi; letter-spacing: -0.02em; }
.pp-mb-wolke { flex: 1; display: flex; flex-wrap: wrap; align-content: center; justify-content: center; gap: .4cqi 2.6cqi; font-weight: 800; padding-right: 22%; }
.pp-mb-wolke span { transition: color var(--bewegung-buehne) var(--ease-standard); }
.pp-mb-wolke .w1 { font-size: 6.5cqi; color: var(--m-akzent); } .pp-mb-wolke .w2 { font-size: 5cqi; } .pp-mb-wolke .w3 { font-size: 3.4cqi; color: var(--m-leise); }
.pp-mb-wolke .w4 { font-size: 8cqi; color: var(--m-akzent); } .pp-mb-wolke .w5 { font-size: 4.2cqi; } .pp-mb-wolke .w6 { font-size: 3cqi; color: var(--m-leise); }
.pp-mb-leinwand, .pp-mb-code, .pp-mb-logo, .pp-mb-knopf { transition: background-color var(--bewegung-buehne) var(--ease-standard), color var(--bewegung-buehne) var(--ease-standard) !important; }
@media (max-width: 600px) { .pp-mb-handy.pp-iphone-klein { right: 4px; width: 148px; } }
.pp-mb-handy { position: absolute; right: -10px; bottom: 0; width: 180px; color: #1F1F1F; }
  display: flex; flex-direction: column; gap: 8px; font-size: 12px; box-shadow: var(--shadow-3); }
.pp-mb-handy-kopf { border-bottom: 1px solid #E5E5E5; padding-bottom: 6px; }
.pp-mb-feld { border: 1px solid #C9C9C9; border-radius: 3px; padding: 6px 8px; }
.pp-mb-knopf { background: var(--m-akzent); color: #fff; text-align: center; font-weight: 700; padding: 8px; border-radius: 3px; transition: background .4s; }
.pp-marke-bild[data-marke="gala"] .pp-mb-knopf { color: #1A1410; }

.pp-pakete { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); margin-top: 40px; }
.pp-paket { border-top: 2px solid var(--border-strong); padding-top: 16px; }
.pp-pakete h3 { font-size: 20px; font-weight: 700; margin-bottom: 8px; }
.pp-pakete p { color: var(--fg-2); line-height: var(--lh-loose); }

.pp-fragen { display: grid; gap: 40px; }
@media (min-width: 960px) { .pp-fragen { grid-template-columns: 1fr 2fr; gap: 64px; } }
.pp-faq details { border-top: 1px solid var(--border-1); }
.pp-faq details:last-child { border-bottom: 1px solid var(--border-1); }
.pp-faq summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 24px; min-height: 42px; padding: 18px 0;
  font-size: 17px; font-weight: 700; letter-spacing: -0.01em; }
.pp-faq summary::-webkit-details-marker { display: none; }
.pp-faq summary::after { content: "+"; font-size: 24px; font-weight: 300; line-height: 1; color: var(--fg-2); transition: transform var(--duration-base) var(--ease-standard); flex: none; }
.pp-faq details[open] summary::after { transform: rotate(45deg); }
.pp-faq { interpolate-size: allow-keywords; }
.pp-faq details::details-content { height: 0; overflow: clip; opacity: 0;
  transition: height var(--bewegung-ui) var(--ease-standard), opacity var(--bewegung-ui) var(--ease-standard), content-visibility var(--bewegung-ui) allow-discrete; }
.pp-faq details[open]::details-content { height: auto; opacity: 1; }
.pp-faq details p { padding: 0 0 22px; font-size: 15px; line-height: var(--lh-loose); color: var(--fg-2); max-width: 64ch; }

.pp-schluss { background: var(--bg-1); border-top: 3px solid var(--tse-red); padding: 96px 0; }
.pp-schluss-innen { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 32px; }
.pp-schluss-innen > div:first-child { max-width: 640px; }
.pp-schluss p { margin-top: 16px; color: var(--fg-2); font-size: var(--fs-body-lg); max-width: 52ch; line-height: var(--lh-loose); }
.pp-schluss .pp-cta { margin-top: 28px; }
.pp-person { display: flex; flex-direction: column; gap: 4px; padding: 20px; border: 1px solid var(--border-2); border-radius: var(--radius-2); background: var(--bg-1); min-width: 280px; font-size: 13.5px; color: var(--fg-2); }
.pp-person strong { color: var(--fg-1); font-size: 15px; }

.pp-fuss { border-top: 1px solid var(--border-2); padding: 28px 0 36px; }
.pp-fuss-innen { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 28px; font-size: 13px; }
.pp-lockup-klein img { height: 15px; }
.pp-lockup-klein .pp-lockup-name { font-size: 14px; }
.pp-fuss-links { margin-left: auto; display: flex; align-items: center; gap: 4px 20px; flex-wrap: wrap; }
.pp-fuss-links a { color: var(--fg-2); text-decoration: none; min-height: 42px; display: inline-flex; align-items: center; }
.pp-fuss-links a:hover { color: var(--fg-1); text-decoration: underline; }

@media (prefers-reduced-motion: reduce) { .pp-live-punkt { animation: none; } }

@media screen and (prefers-color-scheme: dark) { :root:not([data-thema="hell"]) .pp-grau { border-color: var(--border-1); } }
@media screen { :root[data-thema="dunkel"] .pp-grau { border-color: var(--border-1); } }

/* Sehr schmale Geräte (320 px): Kopfzeilenknopf kürzer, Formular-Knöpfe umbrechen statt überlaufen */
@media (max-width: 360px) {
  .kopf .aktionen .btn.primaer { padding: 0 10px; font-size: 12px; }
  .pp-lockup-name { display: none; }
  .pp-innen button.btn.primaer[type=submit] { max-width: 100%; white-space: normal; }
}

/* Läuft mit */
.pp-laeuft { border-bottom: 1px solid var(--border-2); }
.pp-laeuft-innen { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 20px; padding-top: 16px; padding-bottom: 16px; }
.pp-laeuft-kopf { font-size: 13px; font-weight: 600; color: var(--fg-2); }
.pp-laeuft-liste { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px 20px; font-size: 15px; font-weight: 600; }
.pp-laeuft-liste li { white-space: nowrap; }

/* Funktionen mit wechselnder Vorschau */
.pp-reiter-liste { display: flex; gap: 4px; overflow-x: auto; border-bottom: 2px solid var(--border-strong); scrollbar-width: thin; }
.pp-reiter-knopf { flex: none; min-height: 42px; padding: 0 16px; border: 0; background: transparent; color: var(--fg-2); font: inherit; font-size: 13px; font-weight: 600;
  cursor: pointer; border-radius: var(--radius-2) var(--radius-2) 0 0; position: relative;
  transition: color .16s cubic-bezier(.32,.72,.4,1), background .16s cubic-bezier(.32,.72,.4,1); }
.pp-reiter-knopf:hover { color: var(--fg-1); background: var(--bg-3); }
.pp-reiter-knopf[aria-selected="true"] { color: var(--fg-1); }
.pp-reiter-knopf[aria-selected="true"]::after { content: ""; position: absolute; left: 0; right: 0; bottom: -2px; height: 2px; background: var(--fg-accent); }
.pp-tafel { padding-top: 24px; display: grid; gap: 16px; }
.pp-tafel[hidden] { display: none; }
.pp-tafel:not([hidden]) { animation: pp-tafel-ein .16s cubic-bezier(.32,.72,.4,1); }
@keyframes pp-tafel-ein { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
.pp-tafel-text { margin: 0; font-size: var(--fs-body-lg); line-height: var(--lh-loose); color: var(--fg-2); max-width: 60ch; }
.pp-vorschau { position: relative; border-radius: var(--radius-3); overflow: hidden; box-shadow: var(--shadow-3); min-height: 280px; padding: 16px 18px 20px;
  background: var(--leinwand-grund); color: var(--leinwand-schrift); display: flex; flex-direction: column; font-size: clamp(11px, 1.35vw, 17px); }
@media (min-width: 700px) { .pp-vorschau { aspect-ratio: 16 / 9; min-height: 0; padding: clamp(14px, 2.2vw, 30px) clamp(18px, 3vw, 44px); } }
.pp-vorschau .pp-demo-titel { margin-top: .2em; }
.pp-vorschau .pp-demo-diagramm { padding-bottom: 0; overflow: hidden; }
.pp-beispiel { margin: 12px 0 0; font-size: 13px; color: var(--fg-2); }
.pp-typenzeile { margin: 32px 0 0; font-size: 15px; line-height: 1.6; color: var(--fg-2); }
.pp-schluss .pp-cta .btn { white-space: normal; }
@media (prefers-reduced-motion: reduce) { .pp-tafel:not([hidden]) { animation: none; } .pp-reiter-knopf { transition: none; } }

/* Kontrollsatz im Hero, Leiste für das Publikum unter dem Hero */
.pp-kontrolle { margin: 0 0 20px; max-width: 34em; font-size: 15px; color: var(--fg-2); }
.pp-teilnehmen { border-top: 1px solid var(--border-2); }
.pp-teilnehmen h2 { font-weight: 600; }
.pp-laeuft-innen { gap: 4px 12px; }
.pp-laeuft-liste + .pp-laeuft-kopf { margin-left: 16px; }
.pp-hero-satz .pp-lead { margin-bottom: 14px; }
.pp-hero-satz .pp-kontrolle { margin-bottom: 0; }

/* Demo mit Leinwand und Handy */
.pp-demo-paar { display: grid; gap: 24px; align-items: end; container-type: inline-size; }
@media (min-width: 900px) { .pp-demo-paar { grid-template-columns: minmax(0, 1fr) 272px; gap: 40px; } }
.pp-demo-paar .pp-demo-leinwand { font-size: clamp(9px, 1.35cqi, 17px); }
@media (max-width: 899px) { .pp-demo-paar .pp-demo-leinwand { font-size: clamp(9px, 2.6cqi, 15px); } }
.pp-handy { justify-self: center; width: 100%; max-width: 272px; }
/* iPhone-Rahmen: Titan-Kante, Dynamic Island, Statusleiste, Tasten, Home-Balken */
.pp-iphone { position: relative; aspect-ratio: 9 / 19.3; background: #1d1d1f; border-radius: 46px; padding: 10px;
  box-shadow: 0 0 0 1.5px #6e6e73, 0 0 0 3px #2c2c2e, 0 0 0 3.5px #8a8a8e, 0 28px 56px rgba(17,17,17,.32), 0 6px 14px rgba(17,17,17,.18); }
.pp-iphone-taste { position: absolute; width: 3px; background: linear-gradient(90deg, #4a4a4e, #7a7a7e, #4a4a4e); border-radius: 2px; }
.pp-iphone-aktion { left: -6.5px; top: 96px; height: 22px; }
.pp-iphone-laut1 { left: -6.5px; top: 136px; height: 42px; }
.pp-iphone-laut2 { left: -6.5px; top: 188px; height: 42px; }
.pp-iphone-power { right: -6.5px; top: 156px; height: 66px; }
.pp-iphone-schirm { position: relative; height: 100%; background: #fff; color: #1F1F1F; border-radius: 37px; overflow: hidden; display: flex; flex-direction: column; font-size: 14px; }
.pp-iphone-status { position: relative; flex: none; height: 50px; display: flex; align-items: flex-start; justify-content: space-between; padding: 13px 20px 0 26px; font-size: 13.5px; font-weight: 600; letter-spacing: -.01em; color: #111; }
.pp-iphone-insel { position: absolute; left: 50%; top: 10px; transform: translateX(-50%); width: 76px; height: 25px; background: #000; border-radius: 14px; }
.pp-iphone-icons { display: inline-flex; gap: 4px; align-items: center; color: #111; margin-top: 1px; }
.pp-iphone-icons svg { height: 10px; width: auto; fill: currentColor; display: block; }
.pp-handy-inhalt { flex: 1; min-height: 0; overflow: auto; padding: 10px 14px 6px; display: flex; flex-direction: column; gap: 12px; }
.pp-iphone-home { flex: none; height: 22px; display: grid; place-items: center; }
.pp-iphone-home::before { content: ""; width: 118px; height: 5px; border-radius: 3px; background: #111; }
.pp-handy-kopf { flex: none; display: flex; align-items: center; gap: 8px; margin: 0 14px; border-bottom: 1px solid #E5E5E5; padding-bottom: 8px; font-weight: 700; font-size: 12.5px; }
.pp-handy-kopf img { height: 18px; }
.pp-handy-frage { margin: 0; font-weight: 800; font-size: 16px; line-height: 1.25; }
.pp-handy-liste, .pp-handy-sterne { display: grid; gap: 8px; }
.pp-hopt { min-height: 46px; padding: 8px 12px; text-align: left; border: 1.5px solid #C9C9C9; border-radius: 4px; background: #fff; color: #1F1F1F; font: inherit; font-weight: 600; cursor: pointer; transition: border-color 160ms cubic-bezier(.32,.72,.4,1), background 160ms cubic-bezier(.32,.72,.4,1); }
.pp-hopt:hover { border-color: #1F1F1F; }
.pp-hopt[aria-pressed="true"] { border-color: #801624; background: #F2E4E5; }
.pp-handy-sterne { grid-auto-flow: column; grid-template-columns: repeat(5, 1fr); }
.pp-handy-sterne button { min-height: 48px; border: 1.5px solid #C9C9C9; border-radius: 4px; background: #fff; display: grid; place-items: center; cursor: pointer; color: #6B6B6B; }
.pp-handy-sterne button svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; }
.pp-handy-sterne button[aria-pressed="true"] { border-color: #801624; color: #801624; }
.pp-handy-sterne button[aria-pressed="true"] svg { fill: currentColor; }
.pp-handy-form { display: grid; gap: 8px; }
.pp-handy-form input, .pp-handy-form textarea { min-height: 46px; padding: 10px 12px; border: 1.5px solid #6B6B6B; border-radius: 4px; font: inherit; color: #1F1F1F; background: #fff; resize: none; }
.pp-handy-hilfe { margin: 0; font-size: 12.5px; color: #6B6B6B; }
.pp-handy-fragen { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.pp-handy-fragen li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; align-items: center; font-size: 13px; line-height: 1.3; }
.pp-hup { min-width: 48px; min-height: 48px; border: 1.5px solid #C9C9C9; border-radius: 4px; background: #fff; color: #1F1F1F; display: grid; place-items: center; cursor: pointer; font: inherit; }
.pp-hup svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; }
.pp-hup b { font-size: 12px; }
.pp-hup[aria-pressed="true"] { border-color: #801624; color: #801624; }
.pp-demo-fuss { flex-wrap: wrap; gap: 12px 16px; }
.pp-demo-fuss .pp-live { flex: 1 1 220px; }

/* Funktionen: Liste mit Icon, Vorschau rechts */
.pp-fx { display: grid; gap: 24px; margin-top: 28px; align-items: start; }
@media (min-width: 900px) { .pp-fx { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 40px; } .pp-fx-vorschau { position: sticky; top: 80px; } }
@media (max-width: 899px) { .pp-fx-vorschau { order: -1; } }
.pp-fx-liste { display: grid; gap: 2px; }
.pp-fx-gruppe { margin: 14px 0 4px; font-size: 13px; font-weight: 700; color: var(--fg-2); }
.pp-fx-gruppe:first-child { margin-top: 0; }
.pp-fx-knopf { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 12px; align-items: start; min-height: 48px; padding: 10px 12px; text-align: left; border: 1px solid transparent; border-radius: var(--radius-2); background: transparent; color: var(--fg-1); font: inherit; cursor: pointer; transition: background 160ms cubic-bezier(.32,.72,.4,1), border-color 160ms cubic-bezier(.32,.72,.4,1); }
.pp-fx-knopf:hover { background: var(--bg-2); }
.pp-fx-knopf[aria-selected="true"] { background: var(--bg-1); border-color: var(--border-1); box-shadow: var(--shadow-1); }
.pp-fx-knopf .ic svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.pp-fx-knopf[aria-selected="true"] .ic { color: var(--fg-accent); }
.pp-fx-t { display: grid; gap: 2px; min-width: 0; }
.pp-fx-t b { font-size: 15px; }
.pp-fx-t span { font-size: 13px; color: var(--fg-2); }
.pp-fx-vorschau h3 { margin: 0 0 4px; font-size: 20px; }
.pp-fx-vorschau > p { margin: 0 0 14px; color: var(--fg-2); }
.pp-fx-vorschau .pp-vorschau { font-size: clamp(11px, 1.1vw, 15px); height: clamp(280px, 34vw, 420px); display: flex; flex-direction: column; padding: clamp(14px, 2vw, 26px); }
.pp-fx-bild { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.pp-fx-bild > .diagramm { flex: 1; min-height: 0; padding-bottom: 0; overflow: hidden; }

/* Branding: Beispiellogos und Fotos */
.pp-mb-logo { width: 150px !important; height: 30px !important; background-repeat: no-repeat !important; background-position: left center !important; background-size: contain !important; background-color: transparent !important; }
.pp-marke-bild[data-marke="kongress"] .pp-mb-logo { background-image: url("/static/logo-beispiel-kongress.svg") !important; }
.pp-marke-bild[data-marke="gala"] .pp-mb-logo { background-image: url("/static/logo-beispiel-gala.svg") !important; background-position: center !important; }
.pp-marke-bild[data-marke="kongress"] .pp-mb-leinwand { background: linear-gradient(rgba(11, 37, 64, .84), rgba(11, 37, 64, .9)), url("/static/foto-kongress.webp") center / cover; }
.pp-marke-bild[data-marke="gala"] .pp-mb-leinwand { background: linear-gradient(rgba(26, 20, 16, .82), rgba(26, 20, 16, .9)), url("/static/foto-gala.webp") center / cover; }
.pp-mb-handy-kopf .pp-mb-logo { width: 110px !important; height: 22px !important; background-color: #0B2540 !important; border-radius: 3px; }
.pp-marke-bild[data-marke="standard"] .pp-mb-handy-kopf .pp-mb-logo { background-color: transparent !important; }
.pp-marke-bild[data-marke="gala"] .pp-mb-handy-kopf .pp-mb-logo { background-color: #1A1410 !important; }

.pp-textlink { align-self: center; min-height: 42px; display: inline-flex; align-items: center; font-weight: 600; color: var(--fg-1); text-decoration: underline; text-underline-offset: 3px; }
.pp-textlink:hover { color: var(--fg-accent); }

.pp-fx > * { min-width: 0; }
.pp-fx-vorschau .pp-vorschau { max-width: 100%; min-width: 0; width: 100%; box-sizing: border-box; }

/* Vorschauen auf der Produktseite: Leinwand-Optik verfeinert (nur hier, nicht im Produkt).
   Bühne mit leichter Tiefe, Balken mit Verlauf und Glanzkante, große Prozentwerte, Karten mit Schatten. */
.pp .pp-demo-leinwand, .pp .pp-fx-vorschau .pp-vorschau {
  background: radial-gradient(120% 90% at 50% 0%, #FFFFFF 0%, #F7F7F7 55%, #EFEFEF 100%);
  box-shadow: 0 0 0 1px rgba(17,17,17,.06), 0 1px 0 rgba(255,255,255,.9) inset, 0 24px 48px rgba(17,17,17,.12), 0 4px 12px rgba(17,17,17,.06);
}
.pp .diagramm { --d-flaeche: #E6E6E6; }
.pp .pp-demo-titel { font-size: 2.1em; letter-spacing: -.03em; }

/* Balken */
.pp .d-balken { gap: 1.05em; }
.pp .d-kopf { margin-bottom: .4em; }
.pp .d-label { font-size: 1.08em; font-weight: 700; letter-spacing: -.01em; }
.pp .d-wert b { font-size: 1.35em; font-weight: 800; letter-spacing: -.02em; }
.pp .d-wert small { font-size: .78em; }
.pp .d-spur { height: 1.15em; border-radius: 3px; background: var(--d-flaeche); box-shadow: inset 0 1px 2px rgba(17,17,17,.06); }
.pp .d-fuellung { border-radius: 3px; background: linear-gradient(180deg, color-mix(in srgb, var(--d-balken) 86%, #fff) 0%, var(--d-balken) 45%, color-mix(in srgb, var(--d-balken) 84%, #000) 100%); box-shadow: 0 1px 2px rgba(17,17,17,.18); }
.pp .d-zeile.d-richtig .d-fuellung { background: linear-gradient(180deg, color-mix(in srgb, var(--d-gut) 85%, #fff), var(--d-gut) 45%, color-mix(in srgb, var(--d-gut) 82%, #000)); }
.pp .d-zeile:nth-child(6n+1) .d-fuellung, .pp .d-zeile:nth-child(6n+2) .d-fuellung, .pp .d-zeile:nth-child(6n+3) .d-fuellung, .pp .d-zeile:nth-child(6n+4) .d-fuellung, .pp .d-zeile:nth-child(6n+5) .d-fuellung, .pp .d-zeile:nth-child(6n+6) .d-fuellung { background: linear-gradient(180deg, color-mix(in srgb, var(--d-balken) 86%, #fff) 0%, var(--d-balken) 45%, color-mix(in srgb, var(--d-balken) 84%, #000) 100%); }
.pp .d-zeile.d-richtig .d-fuellung { background: linear-gradient(180deg, color-mix(in srgb, var(--d-gut) 85%, #fff), var(--d-gut) 45%, color-mix(in srgb, var(--d-gut) 82%, #000)) !important; }

/* Ranking */
.pp .d-rang .d-platz { font-size: 1.5em; font-weight: 800; color: var(--d-akzent); }
.pp .d-rang .d-wert { font-size: .95em; }

/* Skalen */
.pp .d-skala { gap: 1.5em; }
.pp .d-skala-spur { height: 2.8em; border-bottom: 2px solid #CFCFCF; }
.pp .d-verteilung { gap: 3%; }
.pp .d-verteilung span { background: linear-gradient(180deg, color-mix(in srgb, var(--d-balken) 28%, #fff), color-mix(in srgb, var(--d-balken) 42%, #fff)); border-radius: 3px 3px 0 0; }
.pp .d-marke { width: 1.3em; height: 1.3em; margin-left: -.65em; bottom: -.65em; background: var(--d-balken); border: 3px solid #fff; box-shadow: 0 2px 6px rgba(17,17,17,.28); }
.pp .d-aussage .d-wert { font-size: 1.3em; font-weight: 800; }

/* Bewertung */
.pp .d-schnitt-zahl { font-size: 4.2em; letter-spacing: -.05em; }
.pp .d-sterne-voll { color: var(--d-balken); }

/* Offene Antworten und Fragen: Karten mit Tiefe */
.pp .d-karte, .pp .d-frage { background: #fff; border-radius: 4px; box-shadow: 0 1px 2px rgba(17,17,17,.06), 0 6px 16px rgba(17,17,17,.07); border-left: 3px solid var(--d-balken); }
.pp .d-frage-stimmen, .pp .d-frage-stimmen b { color: var(--d-balken); }
.pp .d-frage.hervorgehoben, .pp .d-frage:first-child { box-shadow: 0 1px 2px rgba(17,17,17,.08), 0 10px 24px rgba(17,17,17,.12); }

/* Histogramm und Säulen */
.pp .d-histo .d-saeulen-box span, .pp .d-histo > span { background: linear-gradient(180deg, color-mix(in srgb, var(--d-balken) 80%, #fff), var(--d-balken)); opacity: 1; border-radius: 3px 3px 0 0; }
.pp .d-histo .d-linie-richtig { box-shadow: 0 0 0 2px #fff; }

/* 2x2-Raster: Feld als Fläche, Punkte mit Ring */
.pp .d-raster-feld { background: linear-gradient(#fff, #fff) padding-box, #E6E6E6; border-radius: 4px; box-shadow: inset 0 0 0 1px #DADADA; }
.pp .d-punkt i { width: 1.15em; height: 1.15em; border: 3px solid #fff; box-shadow: 0 2px 6px rgba(17,17,17,.25); }

/* Pin auf Bild */
.pp .d-pin-bild { border-radius: 4px; overflow: hidden; box-shadow: 0 8px 24px rgba(17,17,17,.14), 0 0 0 1px rgba(17,17,17,.06); }
.pp .d-pin-punkte i { box-shadow: 0 0 0 3px #fff, 0 2px 8px rgba(17,17,17,.35); }

/* Rangliste */
.pp .d-rangliste li { background: #fff; box-shadow: 0 1px 2px rgba(17,17,17,.06), 0 6px 16px rgba(17,17,17,.07); border-radius: 4px; }
.pp .d-rangliste li.p1 { background: linear-gradient(180deg, color-mix(in srgb, var(--d-balken) 88%, #fff), var(--d-balken)); box-shadow: 0 10px 24px rgba(128,22,36,.28); }

/* Wortwolke: Tiefe über Gewicht, nicht Farbe */
.pp .d-wolke span { text-shadow: 0 1px 0 rgba(255,255,255,.8); }

/* Zitat */
.pp .d-inhalt-zitat blockquote { font-size: 2.2em; }


/* Drei Schritte als Szenen: Konsole, Startbild, Steuerung (verkleinerte Oberflächen) */
.pp-schritt-bild { margin: 22px 0 18px; }
.pp-sz { aspect-ratio: 4 / 3; border-radius: 6px; overflow: hidden; font-size: 10.5px; line-height: 1.3; color: var(--fg-1);
  background: var(--bg-1); border: 1px solid var(--border-2); box-shadow: 0 1px 2px rgba(17,17,17,.06), 0 12px 28px rgba(17,17,17,.10); }
.pp-sz .kennung { font-family: var(--font-mono); }
.pp-sz-kopf { display: flex; justify-content: space-between; align-items: center; font-weight: 700; font-size: 10px; color: var(--fg-2); padding: 0 2px 6px; }
/* Konsole */
.pp-sz-konsole { display: grid; grid-template-columns: 42% 58%; }
.pp-sz-liste { background: var(--bg-2); border-right: 1px solid var(--border-2); padding: 10px 8px; display: flex; flex-direction: column; gap: 3px; }
.pp-sz-folie { display: flex; align-items: center; gap: 6px; padding: 5px 6px; border-radius: 3px; font-weight: 600; min-width: 0; }
.pp-sz-folie span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pp-sz-folie .ic { flex: none; width: 13px; height: 13px; color: var(--fg-2); }
.pp-sz-folie .ic svg { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.pp-sz-folie.an { background: var(--bg-1); box-shadow: 0 0 0 1px var(--border-1); }
.pp-sz-folie.an .ic { color: var(--fg-accent); }
.pp-sz-plus { margin-top: auto; padding: 5px 6px; border: 1px dashed var(--border-1); border-radius: 3px; text-align: center; font-weight: 700; color: var(--fg-2); }
.pp-sz-editor { padding: 10px 10px 0; display: flex; flex-direction: column; gap: 7px; min-width: 0; }
.pp-sz-feld label { display: block; font-size: 9px; color: var(--fg-2); margin-bottom: 2px; }
.pp-sz-feld > div { border: 1px solid var(--border-1); border-radius: 3px; padding: 4px 6px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pp-sz-zwei { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.pp-sz-mini { flex: 1; min-height: 0; border-radius: 4px 4px 0 0; padding: 8px 8px 0; font-size: 7px; overflow: hidden; box-shadow: 0 -1px 0 var(--border-2), 0 4px 12px rgba(17,17,17,.08); }
.pp-sz-mini .diagramm { height: 100%; }
.pp-sz-mini .d-wolke { height: 100%; min-height: 0; }
/* Startbild */
.pp-sz-start { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 14px 16px; }
.pp-sz-start-text img { height: 14px; display: block; margin-bottom: 8px; }
.pp-sz-start-text h4 { margin: 0 0 8px; font-size: 15px; font-weight: 800; letter-spacing: -.02em; line-height: 1.1; }
.pp-sz-start-text p { margin: 0 0 3px; color: var(--leinwand-leise); font-size: 9.5px; }
.pp-sz-start-text p b { color: var(--leinwand-schrift); }
.pp-sz-code { font-size: 18px; font-weight: 800; letter-spacing: .06em; margin-top: 6px; }
.pp-sz-qr { width: 34%; max-width: 110px; aspect-ratio: 1; background: #fff; padding: 5px; border-radius: 4px; box-shadow: 0 1px 2px rgba(0,0,0,.08); }
/* Steuerung */
.pp-sz-regie { display: grid; grid-template-columns: 58% 42%; grid-template-rows: 1fr auto; background: var(--bg-2); }
.pp-sz-vorschau { grid-column: 1; grid-row: 1; margin: 10px 0 0 10px; border-radius: 4px 4px 0 0; padding: 8px 9px 0; font-size: 7px; overflow: hidden; box-shadow: 0 0 0 1px var(--border-2); display: flex; flex-direction: column; }
.pp-sz-vt { font-size: 9px; font-weight: 800; margin-bottom: 5px; letter-spacing: -.01em; }
.pp-sz-vorschau .diagramm { flex: 1; min-height: 0; }
.pp-sz-knoepfe { grid-column: 1; grid-row: 2; display: flex; gap: 4px; padding: 8px 10px 10px; }
.pp-sz-btn { flex: 1; text-align: center; padding: 5px 3px; border-radius: 3px; border: 1px solid var(--border-1); font-weight: 700; font-size: 9px; white-space: nowrap; background: var(--bg-1); }
.pp-sz-btn.an { background: var(--bg-accent); border-color: var(--bg-accent); color: var(--fg-on-accent); }
.pp-sz-fragen { grid-column: 2; grid-row: 1 / 3; border-left: 1px solid var(--border-2); background: var(--bg-1); padding: 10px 8px; display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.pp-sz-frage { position: relative; padding: 6px 7px 7px; border-radius: 3px; background: var(--bg-2); display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px; align-items: start; font-weight: 600; font-size: 9.5px; }
.pp-sz-frage b { color: var(--fg-accent); }
.pp-sz-frage em { grid-column: 1 / 3; font-style: normal; font-size: 8.5px; font-weight: 700; color: var(--fg-on-accent); background: var(--bg-accent); padding: 2px 6px; border-radius: 2px; justify-self: start; margin-top: 2px; }
@media (max-width: 899px) { .pp-schritt-bild { max-width: 420px; } }
.pp-demo-fuss { justify-content: space-between; }

/* Kleines iPhone im Branding-Beispiel */
.pp-iphone-klein { aspect-ratio: 9 / 17.2; border-radius: 32px; padding: 7px; box-shadow: 0 0 0 1px #6e6e73, 0 0 0 2px #2c2c2e, 0 0 0 2.5px #8a8a8e, 0 20px 40px rgba(17,17,17,.3), 0 4px 10px rgba(17,17,17,.18); }
.pp-iphone-klein .pp-iphone-taste { width: 2px; }
.pp-iphone-klein .pp-iphone-aktion { left: -4.5px; top: 62px; height: 14px; }
.pp-iphone-klein .pp-iphone-laut1 { left: -4.5px; top: 88px; height: 28px; }
.pp-iphone-klein .pp-iphone-laut2 { left: -4.5px; top: 122px; height: 28px; }
.pp-iphone-klein .pp-iphone-power { right: -4.5px; top: 102px; height: 44px; }
.pp-iphone-klein .pp-iphone-schirm { border-radius: 26px; font-size: 11px; }
.pp-iphone-klein .pp-iphone-status { height: 36px; padding: 9px 14px 0 18px; font-size: 9.5px; }
.pp-iphone-klein .pp-iphone-insel { top: 7px; width: 54px; height: 18px; border-radius: 10px; }
.pp-iphone-klein .pp-iphone-icons { gap: 3px; } .pp-iphone-klein .pp-iphone-icons svg { height: 7.5px; }
.pp-iphone-klein .pp-mb-handy-kopf { margin: 0 12px; padding-bottom: 7px; }
.pp-iphone-klein .pp-mb-handy-inhalt { flex: 1; min-height: 0; padding: 10px 12px; display: flex; flex-direction: column; gap: 8px; }
.pp-iphone-klein .pp-mb-handy-inhalt b { font-size: 12px; line-height: 1.25; }
.pp-iphone-klein .pp-mb-feld { padding: 7px 8px; } .pp-iphone-klein .pp-mb-knopf { padding: 8px; }
.pp-iphone-klein .pp-iphone-home { height: 16px; } .pp-iphone-klein .pp-iphone-home::before { width: 72px; height: 4px; }
.pp-sz-qr { width: 40%; max-width: 132px; }

.pp-mb-handy.pp-iphone-klein { position: absolute; right: -10px; bottom: 0; aspect-ratio: 9 / 14.6; }
.pp-marke-bild { padding-bottom: 48px; }

/* Branding-Handy in echten Proportionen; es ragt unter die Leinwand statt gestaucht zu werden */
.pp-mb-handy.pp-iphone-klein { aspect-ratio: 9 / 19.3; width: 156px; right: -6px; bottom: 0; }
.pp-marke-bild { padding-bottom: 120px; }
@media (max-width: 600px) { .pp-mb-handy.pp-iphone-klein { width: 136px; right: 2px; } .pp-marke-bild { padding-bottom: 100px; } }

.pp-iphone-klein .pp-iphone-status { padding: 8px 11px 0 15px; font-size: 8.5px; }
.pp-iphone-klein .pp-iphone-insel { width: 46px; height: 16px; }
.pp-iphone-klein .pp-iphone-icons svg { height: 7px; }

/* Szenen: größer, ein Motiv je Schritt */
.pp-sz { font-size: 12.5px; }
.pp-sz-kopf { font-size: 11.5px; padding-bottom: 8px; }
.pp-sz-konsole { grid-template-columns: 40% 60%; }
.pp-sz-liste { padding: 12px 10px; gap: 4px; }
.pp-sz-folie { padding: 7px 8px; gap: 8px; }
.pp-sz-folie .ic { width: 15px; height: 15px; }
.pp-sz-editor { padding: 12px 12px 0; gap: 10px; }
.pp-sz-feld label { font-size: 10.5px; margin-bottom: 3px; }
.pp-sz-feld > div { padding: 6px 8px; }
.pp-sz-mini { font-size: 10px; padding: 10px 10px 0; }
.pp-sz-start { grid-template-columns: minmax(0, 58%) minmax(0, 42%); gap: 14px; padding: 18px 20px; }
.pp-sz-start-text img { height: 18px; margin-bottom: 12px; }
.pp-sz-start-text h4 { font-size: 19px; margin-bottom: 10px; }
.pp-sz-start-text p { font-size: 12px; margin-bottom: 6px; }
.pp-sz-code { font-size: 30px; letter-spacing: .08em; margin-top: 4px; }
.pp-sz-qr { width: 100%; max-width: none; padding: 7px; }
.pp-sz-regie { grid-template-columns: 60% 40%; }
.pp-sz-vorschau { margin: 12px 0 0 12px; padding: 10px 11px 0; font-size: 10px; }
.pp-sz-vt { font-size: 12px; margin-bottom: 8px; }
.pp-sz-vorschau .d-balken { gap: .9em; }
.pp-sz-vorschau .d-spur { height: 1.1em; }
.pp-sz-knoepfe { padding: 10px 12px 12px; gap: 6px; }
.pp-sz-btn { padding: 7px 4px; font-size: 11px; }
.pp-sz-fragen { padding: 12px 10px; gap: 6px; }
.pp-sz-frage { font-size: 11.5px; padding: 8px 9px; }
.pp-sz-frage em { font-size: 10px; padding: 3px 7px; }

/* Drei Schritte: ein Grundton (Leinwand-Papier) für alle Szenen, keine doppelte Trennung, nichts abgeschnitten */
.pp-schritte li { border-top: 0; padding-top: 0; }
.pp-schritt-bild { margin: 0 0 20px; }
.pp-sz, .pp-sz-liste, .pp-sz-regie, .pp-sz-fragen { background: #FAFAFA; }
.pp-sz-folie.an, .pp-sz-feld > div, .pp-sz-btn, .pp-sz-frage { background: #FFFFFF; }
.pp-sz-btn.an { background: var(--bg-accent); }
.pp-sz-mini { padding-bottom: 8px; border-radius: 4px; box-shadow: 0 0 0 1px var(--border-2), 0 4px 12px rgba(17,17,17,.06); margin-bottom: 12px; background: #FFFFFF; }
.pp-sz-mini .d-wolke { font-size: 9px; }
.pp-sz-editor { padding-bottom: 0; }
.pp-sz-regie { grid-template-columns: 55% 45%; }
.pp-sz-vorschau { background: #FFFFFF; }
.pp-sz-frage { grid-template-columns: minmax(0, 1fr) auto; }

/* Branding-Handy: Bildschirm in echter Größe (393 Punkte breit), mit zoom auf den Rahmen verkleinert */
.pp-iphone-klein .pp-iphone-schirm { padding: 0; display: block; }
.pp-rs { width: 393px; height: 886px; zoom: .3613; display: flex; flex-direction: column; background: #fff; color: #111; font-size: 17px; line-height: 1.3; }
.pp-rs-status { position: relative; flex: none; height: 54px; display: flex; align-items: flex-start; justify-content: space-between; padding: 16px 26px 0 40px; font-weight: 600; font-size: 17px; letter-spacing: -.01em; }
.pp-rs-insel { position: absolute; left: 50%; top: 11px; transform: translateX(-50%); width: 126px; height: 37px; background: #000; border-radius: 20px; }
.pp-rs-icons { display: inline-flex; gap: 7px; align-items: center; margin-top: 2px; }
.pp-rs-icons svg { display: block; fill: currentColor; }
.pp-rs-kopf { flex: none; height: 56px; margin: 4px 16px 0; border-bottom: 1px solid #E5E5E5; display: flex; align-items: center; }
.pp-rs-kopf .pp-mb-logo { width: 150px !important; height: 32px !important; }
.pp-rs-inhalt { padding: 22px 16px; display: flex; flex-direction: column; gap: 14px; }
.pp-rs-inhalt h5 { margin: 0 0 4px; font-size: 22px; font-weight: 800; line-height: 1.2; letter-spacing: -.01em; }
.pp-rs .pp-mb-feld { padding: 13px 14px; font-size: 17px; border: 1.5px solid #6B6B6B; border-radius: 4px; }
.pp-rs .pp-mb-knopf { padding: 14px; font-size: 17px; border-radius: 4px; }
.pp-rs-hinweis { margin: 0; font-size: 14px; color: #6B6B6B; }
.pp-rs-home { margin-top: auto; flex: none; height: 34px; display: grid; place-items: center; }
.pp-rs-home::before { content: ""; width: 134px; height: 5px; border-radius: 3px; background: #111; }
@media (max-width: 600px) { .pp-rs { zoom: .3104; } }

/* Gala: Teilnahme auf dem Handy im Dunkelmodus */
.pp-marke-bild[data-marke="gala"] .pp-rs { background: #1A1410; color: #F5EBDD; }
.pp-marke-bild[data-marke="gala"] .pp-rs-kopf { border-bottom-color: #3A2F26; }
.pp-marke-bild[data-marke="gala"] .pp-rs .pp-mb-feld { background: #2A211A; border-color: #6A5A48; color: #F5EBDD; }
.pp-marke-bild[data-marke="gala"] .pp-rs-hinweis { color: #B7A890; }
.pp-marke-bild[data-marke="gala"] .pp-rs-home::before { background: #F5EBDD; }
.pp-marke-bild[data-marke="gala"] .pp-rs-icons, .pp-marke-bild[data-marke="gala"] .pp-rs-status { color: #F5EBDD; }
.pp-marke-bild[data-marke="gala"] .pp-rs-kopf .pp-mb-logo { background-color: transparent !important; }

.pp-iphone-klein .pp-iphone-schirm { background: #fff; }
.pp-marke-bild[data-marke="gala"] .pp-iphone-klein .pp-iphone-schirm { background: #1A1410; }
.pp-rs { width: 100%; height: 100%; }

/* Hero: Text links, Foto rechts, Demo darunter in voller Breite */
.pp-hero-foto { margin: 0; border-radius: var(--radius-3); overflow: hidden; box-shadow: var(--shadow-3); aspect-ratio: 16 / 9; background: var(--bg-3); }
.pp-hero-foto img { display: block; width: 100%; height: 100%; object-fit: cover; }
@media (min-width: 1000px) {
  .pp-hero-innen { grid-template-columns: minmax(0, 1fr) 560px; column-gap: 48px; align-items: center; }
  .pp-hero-foto { aspect-ratio: 4 / 3; }
  .pp-hero-foto img { object-position: 62% 50%; }
  .pp-demo { grid-column: 1 / -1; margin-top: 24px; }
}
@media (max-width: 999px) { .pp-hero-foto { order: -1; } .pp-hero-innen { padding-top: 24px; } }

@media (min-width: 1000px) { .pp-hero h1 { font-size: clamp(44px, 5.2vw, 76px); max-width: 11ch; } }

/* Hero als Header: Foto über die volle Breite hinter dem Text, Verlauf von links (Version A) */
.pp-hero { background: #0a0808; color: #fff; border-bottom: 0; }
.pp-hero-bild { position: absolute; inset: 0; z-index: 0; }
.pp-hero-bild img { width: 100%; height: 100%; object-fit: cover; object-position: 100% 50%; display: block; }
.pp-hero::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(90deg, rgba(10,8,8,.86) 0%, rgba(10,8,8,.74) 42%, rgba(10,8,8,.28) 100%), linear-gradient(180deg, rgba(10,8,8,.25), rgba(10,8,8,0) 30%); }
:root[data-thema="dunkel"] .pp-hero::after { background: linear-gradient(90deg, rgba(10,8,8,.86) 0%, rgba(10,8,8,.74) 42%, rgba(10,8,8,.28) 100%), linear-gradient(180deg, rgba(10,8,8,.25), rgba(10,8,8,0) 30%); }
.pp-hero-feld { display: none !important; }
.pp-hero-innen { grid-template-columns: minmax(0, 1fr); min-height: min(86vh, 820px); align-content: center; padding: 96px 16px; }
.pp-hero h1 { color: #fff; font-size: clamp(44px, 5.6vw, 84px); max-width: 10ch; }
.pp-hero .pp-lead { color: #fff; max-width: 38ch; }
.pp-hero .pp-kontrolle { color: rgba(255,255,255,.85); }
.pp-hero .pp-cta .btn.primaer { box-shadow: 0 8px 24px rgba(0,0,0,.35); }
.pp-hero .pp-hero-unten { margin-top: 18px; }
/* Handy: Text oben auf dunklem Grund, das Foto rückt darunter, so dass das Handy mit der Abstimmung frei sichtbar ist */
@media (max-width: 999px) {
  .pp-hero { display: flex; flex-direction: column; }
  .pp-hero-innen { order: 1; min-height: 0; padding: 48px 16px 0; }
  .pp-hero-bild { order: 2; position: relative; inset: auto; height: 112vw; max-height: 560px; margin-top: -8px; z-index: 0; display: block; }
  .pp-hero-bild img { object-position: 64% 42%; }
  .pp-hero-bild::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(10,8,8,1) 0%, rgba(10,8,8,.6) 22%, rgba(10,8,8,0) 48%, rgba(10,8,8,.25) 100%); }
  .pp-hero::after { display: none; }
}

.pp-demo-abschnitt { padding-top: 56px; padding-bottom: 32px; }
.pp-demo { margin: 0; }