/* ═══════════════════════════════════════════════════════════
   PROBEPLAN — Startseite, Sektion #probieren + Post-Vorschau
   Eigenes Stylesheet, damit landing.css (fester ?v=) unberuehrt bleibt.
   Wer diese Datei aendert, zieht das ?v= in index.html hoch.
   ═══════════════════════════════════════════════════════════ */

/* Eigene Flaeche ueber die volle Breite (Chris, 2026-10-14): Video und Probeplan
   standen auf demselben Schwarz mit demselben zentrierten Kopf und liefen
   ineinander. Der Markenton im Grund sagt „hier faengt etwas Neues an“, die
   Karte darin bleibt dunkler und wird so zum Arbeitsplatz. */
.pp { padding-block: var(--sp-20); position: relative;
  background: #130C2A;
  border-block: 1px solid var(--border-accent); }
.pp__kopf { max-width: 760px; margin: 0 auto var(--sp-10); text-align: center; }
.pp__kopf .section-subtitle { margin-inline: auto; }
.pp__karte {
  --marke: #7C3AFF; --auf-marke: #fff;
  max-width: 1080px; margin-inline: auto;
  background: var(--bg-surface);
  border: 1px solid var(--border-accent); border-radius: var(--radius-xl);
  padding: clamp(var(--sp-5), 4vw, var(--sp-10));
}
.pp [hidden], .ppv[hidden], .ppv [hidden] { display: none !important; }

/* ── Eingabe ─────────────────────────────────────────────── */
.pp__label { display: block; font-weight: 600; font-size: var(--text-base); margin-bottom: var(--sp-3); }
.pp__zeile { display: flex; gap: var(--sp-3); }
.pp__feld {
  flex: 1; min-width: 0; display: flex; align-items: center; gap: var(--sp-3);
  background: var(--bg-base); border: 1px solid var(--border-medium); border-radius: var(--radius-full);
  padding: 0 var(--sp-5);
}
.pp__feld:focus-within { outline: 3px solid var(--clr-primary-light); outline-offset: 2px; }
.pp__feld svg { flex-shrink: 0; color: var(--txt-muted); }
.pp__feld input { flex: 1; min-width: 0; background: none; border: 0; outline: 0; color: var(--txt-primary);
  font: inherit; font-size: var(--text-lg); padding: var(--sp-4) 0; }
.pp__feld input::placeholder { color: var(--txt-muted); }
.pp__los { flex-shrink: 0; }
.pp__los[disabled] { opacity: .6; pointer-events: none; }
.pp__optionen { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--sp-3) var(--sp-6);
  margin-top: var(--sp-4); font-size: var(--text-base); color: var(--txt-secondary); }
.pp__anrede { display: inline-flex; align-items: center; gap: var(--sp-3); }
.pp__seg { display: inline-flex; background: var(--bg-elevated); border: 1px solid var(--border-medium); border-radius: var(--radius-full); padding: 3px; }
.pp__seg button { min-height: 40px; padding: 4px 16px; border-radius: var(--radius-full); color: var(--txt-secondary); font-weight: 600; font-size: var(--text-base); }
.pp__seg button[aria-pressed="true"] { background: var(--clr-primary); color: #fff; }
.pp__seg button:focus-visible, .pp__link:focus-visible, .pp__chip:focus-visible,
.pp-karte__los:focus-visible, .ppv button:focus-visible, .ppv a:focus-visible { outline: 3px solid var(--clr-primary-light); outline-offset: 2px; }
.pp__link { color: var(--clr-primary-light); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; min-height: 40px; }
.pp__manuell { display: grid; grid-template-columns: 1.3fr 1fr 1fr; gap: var(--sp-3); }
.pp__manuell label { display: flex; flex-direction: column; gap: 6px; font-size: var(--text-sm); color: var(--txt-secondary); font-weight: 600; }
.pp__manuell input, .pp__manuell select {
  background: var(--bg-base); border: 1px solid var(--border-medium); border-radius: var(--radius-md);
  color: var(--txt-primary); font: inherit; font-size: var(--text-base); padding: 12px 14px; min-height: 48px; }
.pp__manuell input:focus-visible, .pp__manuell select:focus-visible { outline: 3px solid var(--clr-primary-light); outline-offset: 2px; }
.pp__manuell select option { background: #161628; }
.pp__beispiele { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); margin-top: var(--sp-6);
  padding-top: var(--sp-5); border-top: 1px solid var(--border); font-size: var(--text-base); color: var(--txt-secondary); }
.pp__chip { min-height: 40px; padding: 6px 14px; border-radius: var(--radius-full); border: 1px solid var(--border-medium);
  color: var(--txt-primary); font-size: var(--text-sm); }
.pp__chip:hover { border-color: var(--clr-primary-light); }
.pp__klein { margin-top: var(--sp-4); font-size: var(--text-sm); color: var(--txt-muted); line-height: 1.6; }
.pp__klein a { text-decoration: underline; text-underline-offset: 2px; }
/* Lockfeld fuer Bots: unsichtbar, aber ausfuellbar — und ohne Versatz aus dem Bild,
   sonst meldet jede Ueberlaufpruefung es als Fund */
.pp__hp, .pp__hp * { position: absolute; top: 0; left: 0; display: block; width: 1px; height: 1px; padding: 0; border: 0;
  overflow: hidden; opacity: 0; pointer-events: none; font-size: 1px; }
.pp__fehler { margin-top: var(--sp-4); padding: var(--sp-3) var(--sp-4); border-radius: var(--radius-md);
  background: rgba(239,68,68,.12); border: 1px solid rgba(239,68,68,.45); color: #FECACA; font-size: var(--text-base); }
.pp__fehler::before { content: "Hinweis: "; font-weight: 700; }

/* ── Ablauf ──────────────────────────────────────────────── */
.pp__schritte { display: flex; gap: var(--sp-6); flex-wrap: wrap; margin-bottom: var(--sp-6); font-size: var(--text-sm); color: var(--txt-muted); }
.pp__schritt { display: inline-flex; align-items: center; gap: var(--sp-2); }
.pp__schritt i { width: 20px; height: 20px; border-radius: 50%; border: 2px solid var(--border-medium); flex-shrink: 0; display: grid; place-items: center; font-style: normal; font-size: 12px; }
.pp__schritt[data-s="laeuft"] { color: var(--txt-primary); }
.pp__schritt[data-s="laeuft"] i { border-color: var(--clr-primary-light); border-top-color: transparent; }
.pp__schritt[data-s="ok"] { color: var(--txt-secondary); }
.pp__schritt[data-s="ok"] i { border-color: var(--clr-success); background: var(--clr-success); color: #fff; }
.pp__schritt[data-s="ok"] i::before { content: "✓"; }

/* ── Profil ──────────────────────────────────────────────── */
.pp__profil { display: flex; align-items: center; gap: var(--sp-5); padding: var(--sp-4) var(--sp-5);
  background: var(--bg-base); border: 1px solid var(--border); border-radius: var(--radius-lg); margin-bottom: var(--sp-6); }
.pp__logo { flex-shrink: 0; width: 64px; height: 64px; border-radius: 14px; background: #fff; display: grid; place-items: center; padding: 10px; overflow: hidden; }
.pp__logo img { width: 100%; height: 100%; object-fit: contain; display: block; }
.pp__logo--dunkel { background: #111; }
.pp__logo--initial { background: var(--marke); color: var(--auf-marke); font-weight: 800; font-size: 26px; }
.pp__profil-text { flex: 1; min-width: 0; }
.pp__profil-name { font-weight: 800; font-size: var(--text-xl); line-height: 1.25; overflow-wrap: anywhere; }
.pp__profil-meta { color: var(--txt-secondary); font-size: var(--text-base); margin-top: 2px; }
.pp__tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: var(--sp-2); }
.pp__tag { font-size: 13px; padding: 3px 10px; border-radius: var(--radius-full); background: var(--bg-elevated); color: var(--txt-secondary); }
.pp__profil-rechts { flex-shrink: 0; display: flex; flex-direction: column; align-items: flex-end; gap: var(--sp-2); font-size: var(--text-sm); color: var(--txt-muted); }
.pp__farbe { display: inline-flex; align-items: center; gap: 8px; }
.pp__farbe b { width: 18px; height: 18px; border-radius: 50%; background: var(--marke); box-shadow: 0 0 0 2px rgba(255,255,255,.25); }

/* ── Plan: gespiegelt aus app/views/posts.php (.sugg-card) ── */
.pp__plan-kopf { margin-bottom: var(--sp-5); }
.pp__plan-kopf h3 { font-size: var(--text-2xl); line-height: 1.25; }
.pp__plan-kopf p { font-size: var(--text-base); color: var(--txt-muted); margin-top: 4px; }
.pp__raster { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-4); }
.pp-karte { position: relative; background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-lg);
  padding: var(--sp-4); display: flex; flex-direction: column; gap: var(--sp-3); transition: border-color .15s; }
.pp-karte:hover { border-color: rgba(168,133,255,.55); }
.pp-karte__top { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2); }
/* slop-ok: emoji Kategorie-Symbole gespiegelt aus dem Tool (katMeta) — die Karte soll aussehen wie der echte Plan */
.pp-karte__kat { font-size: 12px; font-weight: 700; color: var(--kat-color, var(--clr-primary-light)); letter-spacing: .03em; text-transform: uppercase; white-space: nowrap; }
.pp-karte__chip { display: inline-flex; align-items: center; gap: 4px; padding: 2px 7px; border-radius: var(--radius-full);
  border: 1px solid var(--border); background: var(--bg-elevated); font-size: 12px; font-weight: 600; color: var(--txt-secondary); white-space: nowrap; }
.pp-karte__chip svg { display: block; flex-shrink: 0; }
.pp-karte__thema { font-size: var(--text-lg); font-weight: 700; color: var(--txt-primary); line-height: 1.35; overflow-wrap: anywhere; hyphens: auto; }
.pp-karte__hook { font-size: var(--text-base); color: var(--txt-secondary); line-height: 1.55; font-style: italic; flex: 1; overflow-wrap: anywhere; hyphens: auto; }
.pp-karte__foot { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2); padding-top: var(--sp-3); border-top: 1px solid var(--border); margin-top: auto; }
.pp-karte__vorlage { font-size: 13px; color: var(--txt-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.pp-karte__los { flex-shrink: 0; min-height: 40px; font-size: 14px; font-weight: 700; color: #fff; background: var(--clr-primary); padding: 8px 16px; border-radius: var(--radius-full); white-space: nowrap; }
.pp-karte__los:hover { background: var(--clr-primary-dark); }
.pp-karte--leer { min-height: 200px; overflow: hidden; }
.pp__balken { height: 12px; border-radius: 6px; background: rgba(255,255,255,.07); }

/* ── Abschluss ───────────────────────────────────────────── */
.pp__weiter { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: var(--sp-6); margin-top: var(--sp-6);
  padding: var(--sp-6); border-radius: var(--radius-lg); background: var(--bg-base); border: 1px solid var(--border-accent); }
.pp__weiter > * { min-width: 0; }
.pp__weiter h3 { font-size: var(--text-xl); margin-bottom: var(--sp-3); }
.pp__weiter ul { display: grid; gap: 6px; font-size: var(--text-base); color: var(--txt-secondary); }
.pp__weiter li { position: relative; padding-left: 24px; }
.pp__weiter li::before { content: "✓"; position: absolute; left: 0; color: var(--clr-success); font-weight: 800; }
.pp__weiter-knoepfe { display: flex; flex-direction: column; align-items: stretch; gap: var(--sp-3); text-align: center; }
.pp__weiter-knoepfe button { min-height: 40px; font-size: var(--text-base); color: var(--txt-secondary); text-decoration: underline; text-underline-offset: 3px; }

/* ── Post-Vorschau: der fertige Beitrag im Feed ──────────── */
/* slop-ok: modal Die Vorschau ist eine Ansicht AUF eine Karte — Escape, Klick daneben und x schliessen, Fokus springt zurueck */
.ppv { position: fixed; inset: 0; z-index: 1000; display: grid; place-items: center; padding: 24px 16px;
  background: rgba(4,4,10,.92); overflow-y: auto; }
.ppv__panel { --marke: #7C3AFF; position: relative; width: min(980px, 100%); display: grid; grid-template-columns: minmax(0, 370px) minmax(0, 1fr); gap: 44px;
  align-items: center; background: var(--bg-surface); border: 1px solid var(--border-accent);
  border-radius: 28px; padding: 32px 40px; box-shadow: 0 30px 80px rgba(0,0,0,.6); }
.ppv__zu { position: absolute; top: 14px; right: 14px; width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center;
  color: var(--txt-primary); background: var(--bg-elevated); font-size: 24px; line-height: 1; z-index: 3; }
.ppv__zu:hover { background: var(--border-medium); }

.ppv__feed { background: #fff; color: #111; border-radius: 22px; overflow: hidden; box-shadow: 0 20px 50px rgba(0,0,0,.5);
  font-family: system-ui, -apple-system, 'Segoe UI', sans-serif; }
.ppv__kopf { display: flex; align-items: center; gap: 10px; padding: 12px 14px; }
.ppv__avatar { width: 36px; height: 36px; border-radius: 50%; flex-shrink: 0; overflow: hidden; background: #fff; display: grid; place-items: center;
  box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--marke); }
.ppv__avatar img { width: 78%; height: 78%; object-fit: contain; }
.ppv__avatar--dunkel { background: #111; }
.ppv__avatar--initial { background: var(--marke); color: var(--auf-marke, #fff); font-weight: 800; font-size: 15px; }
.ppv__wer { min-width: 0; flex: 1; line-height: 1.25; }
.ppv__wer b { display: block; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ppv__wer span { font-size: 12px; color: #5f5f6b; display: inline-flex; align-items: center; gap: 4px; }
.ppv__buehne { position: relative; aspect-ratio: 3 / 4; background: #eee; overflow: hidden; }
.ppv__slide { position: absolute; left: 0; top: 0; width: 600px; height: 800px; transform-origin: 0 0; overflow: hidden; }
.ppv__pfeil { position: absolute; top: 50%; transform: translateY(-50%); width: 32px; height: 32px; border-radius: 50%;
  background: rgba(255,255,255,.92); color: #111; display: grid; place-items: center; font-size: 20px; line-height: 1; box-shadow: 0 2px 8px rgba(0,0,0,.25); z-index: 2; }
.ppv__pfeil--l { left: 6px; } .ppv__pfeil--r { right: 6px; }
.ppv__zaehler { position: absolute; top: 12px; right: 12px; z-index: 2; background: rgba(0,0,0,.65); color: #fff; font-size: 12px; font-weight: 600; padding: 3px 9px; border-radius: 99px; }
.ppv__laden { position: absolute; inset: 0; display: grid; place-items: center; background: #f1eff8; z-index: 3; }
.ppv__laden-inhalt { text-align: center; padding: 24px; color: #2c2840; }
.ppv__laden-kreis { width: 54px; height: 54px; margin: 0 auto 16px; border-radius: 50%; border: 4px solid rgba(124,58,255,.2); border-top-color: var(--marke); }
.ppv__laden-text { font-weight: 700; font-size: 16px; min-height: 1.4em; }
.ppv__laden-sub { font-size: 13px; color: #5f5a74; margin-top: 4px; }
.ppv__leiste { display: flex; align-items: center; gap: 14px; padding: 10px 14px 4px; }
.ppv__leiste svg { width: 24px; height: 24px; flex-shrink: 0; }
.ppv__punkte { flex: 1; display: flex; justify-content: center; gap: 4px; margin-right: 38px; }
.ppv__punkte i { width: 6px; height: 6px; border-radius: 50%; background: #c9c9d1; }
.ppv__punkte i.an { background: #3897f0; }
.ppv__text { padding: 4px 14px 16px; font-size: 14px; line-height: 1.5; }
/* Wie im Feed: drei Zeilen, dann "mehr". Kein Scrollbereich — die Landingpage
   faerbt Rollbalken global dunkel, im weissen Feed stand er als Kante da. */
.ppv__caption { white-space: pre-line; overflow-wrap: anywhere; }
.ppv__caption--zu { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; }
.ppv__caption .tags { color: #00376b; }
.ppv__caption .credit, .ppv__text .credit { color: #6b6b76; font-size: 12px; }
.ppv__mehr { color: #6b6b76; font-size: 14px; padding: 0; margin-top: 2px; min-height: 32px; }
.ppv__text-laden { display: grid; gap: 7px; } .ppv__text-laden i { height: 10px; border-radius: 5px; background: #ececf1; }

.ppv__info { min-width: 0; }
.ppv__dauer { font-size: var(--text-sm); font-weight: 700; color: #6EE7B7; }
.ppv__titel { font-size: clamp(1.4rem, 1rem + 1.2vw, 2rem); line-height: 1.2; margin: 10px 0 10px; overflow-wrap: anywhere; hyphens: auto; }
.ppv__sub { color: var(--txt-secondary); font-size: var(--text-lg); line-height: 1.6; }
.ppv__liste { display: grid; gap: 8px; margin: 22px 0 26px; padding-top: 18px; border-top: 1px solid var(--border); }
.ppv__liste li { font-size: var(--text-base); color: var(--txt-secondary); }
.ppv__liste b { color: var(--txt-primary); }
.ppv__probe { width: 14px; height: 14px; border-radius: 50%; display: inline-block; vertical-align: -2px; margin-left: 2px; box-shadow: 0 0 0 2px rgba(255,255,255,.25); }
.ppv__knoepfe { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.ppv__anders { min-height: 48px; padding: 10px 18px; border-radius: 99px; border: 1px solid var(--border-medium);
  color: var(--txt-primary); font-weight: 600; font-size: var(--text-base); }
.ppv__anders:hover { border-color: var(--clr-primary-light); }
.ppv__anders[disabled] { opacity: .5; pointer-events: none; }
.ppv__hinweis { margin-top: 18px; font-size: var(--text-sm); color: var(--txt-muted); line-height: 1.6; }

/* ── Bewegung nur, wenn erwuenscht ────────────────────────── */
@media (prefers-reduced-motion: no-preference) {
  .pp-karte { animation: pp-rein .4s cubic-bezier(.16,1,.3,1) both; }
  .pp-karte--leer { animation: none; }
  .pp-karte--leer::after { content: ""; position: absolute; inset: 0; background: linear-gradient(100deg, transparent 30%, rgba(255,255,255,.06) 50%, transparent 70%);
    background-size: 200% 100%; animation: pp-schimmer 1.3s linear infinite; }
  .pp__schritt[data-s="laeuft"] i, .ppv__laden-kreis { animation: pp-dreh .9s linear infinite; }
  .ppv { animation: ppv-auf .2s ease-out; }
}
@keyframes pp-rein { from { opacity: 0; transform: translateY(8px); } }
@keyframes pp-schimmer { from { background-position: 150% 0; } to { background-position: -50% 0; } }
@keyframes pp-dreh { to { transform: rotate(360deg); } }
@keyframes ppv-auf { from { opacity: 0; } }

/* ── Breiten ─────────────────────────────────────────────── */
@media (max-width: 900px) {
  .pp__raster { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pp__weiter { grid-template-columns: minmax(0, 1fr); }
  .pp__weiter-knoepfe .btn { white-space: normal; }
  .ppv { place-items: start center; }
  .ppv__panel { grid-template-columns: minmax(0, 1fr); gap: 20px; padding: 20px 16px 24px; border-radius: 22px; }
  .ppv__feed { max-width: 420px; width: 100%; margin-inline: auto; }
  .ppv__info { display: contents; }
  .ppv__kopfinfo { order: -1; padding-right: 48px; }
  .ppv__sub { font-size: var(--text-base); }
  .ppv__liste { display: none; }
  .ppv__knoepfe .btn { flex: 1 1 100%; white-space: normal; }
  .ppv__anders { flex: 1 1 100%; }
  .ppv__hinweis { margin-top: 0; }
}
@media (max-width: 640px) {
  .pp { padding-block: var(--sp-12); }
  .pp__zeile { flex-direction: column; }
  .pp__los { width: 100%; }
  .pp__manuell { grid-template-columns: 1fr; }
  .pp__raster { grid-template-columns: 1fr; }
  .pp__profil { flex-wrap: wrap; gap: var(--sp-4); }
  .pp__profil-rechts { flex-direction: row; align-items: center; width: 100%; justify-content: space-between; }
  .pp__optionen { flex-direction: column; align-items: flex-start; }
  .ppv { padding: 0; }
  .ppv__panel { border-radius: 0; min-height: 100%; border: 0; }
}

/* ── Zwei Wege, immer zusammen: ausprobieren, daneben testen ──────────────
   Im Hero und unter dem Erklaervideo (Chris, 2026-10-06). Seit 2026-10-14
   NEBENEINANDER (Chris: „untereinander macht gar keinen Sinn“), zuerst die
   Handlung ohne Huerde. Reicht die Breite nicht (Handy, schmale Hero-Spalte),
   bricht die REIHE um, nie ein Knopf: flex-wrap legt den zweiten darunter,
   flex:1 macht beide dann gleich breit. nowrap haelt jeden Knopf einzeilig.
   slop-ok: knopfpaar ausdrueckliche Vorgabe von Chris, beide Knoepfe sagen, was passiert */
.pp-cta { display: inline-flex; flex-flow: row wrap; align-items: stretch; gap: var(--sp-3); max-width: 100%; }
.pp-cta .btn { flex: 1 1 auto; justify-content: center; white-space: nowrap; }
.pp-cta--mitte { display: flex; width: fit-content; margin: var(--sp-8) auto 0; }
@media (max-width: 640px) {
  .pp-cta, .pp-cta--mitte { display: flex; width: 100%; }
}

/* ── Schwebender Hinweis auf den Probeplan ────────────────────────────────
   Steht nur zwischen Hero und #probieren — im Hero gibt es den Knopf schon,
   ab dem Probeplan waere er eine Wiederholung. Waehrend das Video laeuft,
   tritt er zurueck, sonst laege er auf der Abspielleiste.
   Ein Knopf hat EINE Zeile: inline-block + nowrap, Abstaende in em, kein
   Flex-Container um den Text. Schaltet sich ueber data-sichtbar. */
.pp-hinweis {
  position: fixed; left: 50%; bottom: max(16px, env(safe-area-inset-bottom)); z-index: var(--z-modal);
  display: inline-block; white-space: nowrap;
  padding: .85em 1.4em; border-radius: var(--radius-full);
  background: var(--grad-brand); color: #fff;
  font-weight: 700; font-size: var(--text-base); line-height: 1.2; text-decoration: none;
  box-shadow: 0 10px 32px rgba(0,0,0,.5), 0 4px 24px rgba(124,58,255,.45);
  transform: translate(-50%, 0);
}
.pp-hinweis[data-sichtbar="0"] { opacity: 0; visibility: hidden; transform: translate(-50%, 1.25rem); pointer-events: none; }
.pp-hinweis__pfeil { display: inline-block; vertical-align: -.2em; margin-left: .5em; }
.pp-hinweis__kurz { display: none; }
.pp-hinweis:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }
@media (prefers-reduced-motion: no-preference) {
  .pp-hinweis { transition: opacity .3s cubic-bezier(.16,1,.3,1), transform .3s cubic-bezier(.16,1,.3,1), visibility .3s; }
  /* Pulsieren: ein Ring laeuft dreimal nach aussen, jedes Mal wenn der Hinweis
     erscheint — die Animation haengt am Zustand, also startet sie mit ihm neu.
     slop-ok: puls Vorgabe von Chris 2026-10-14 („dass man weiss, da kann man
     direkt was machen“). Endlich statt endlos wegen WCAG 2.2.2. Nur Ring,
     transform + opacity: der Knopf selbst bleibt ruhig lesbar. */
  .pp-hinweis::after {
    content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
    box-shadow: 0 0 0 2px rgba(196,140,255,.9), 0 0 24px rgba(124,58,255,.6);
    opacity: 0;
  }
  .pp-hinweis[data-sichtbar="1"]::after { animation: pp-puls 1.6s cubic-bezier(.16,1,.3,1) .5s 3; }
}
@keyframes pp-puls {
  0%   { opacity: .9; transform: scale(1); }
  100% { opacity: 0;  transform: scale(1.18, 1.45); }
}
@media (max-width: 640px) {
  /* Links statt mittig: rechts sitzt der WhatsApp-Knopf (.wa-knopf, 56 px).
     Mittig ueberlappten beide ab 360 px Breite, gemessen. */
  .pp-hinweis { left: max(16px, env(safe-area-inset-left)); transform: none; padding: .85em 1.1em; }
  .pp-hinweis[data-sichtbar="0"] { transform: translateY(1.25rem); }
}
/* Langer Text erst ab 900 px: darunter lief er mittig in den WhatsApp-Knopf
   rechts (gemessen 641–899 px, bis zu 110 px Ueberlappung). */
@media (max-width: 899px) {
  .pp-hinweis__lang { display: none; }
  .pp-hinweis__kurz { display: inline; }
}
/* 320 px: es weicht die Schrift, nie die Zeile (Ein Knopf hat EINE Zeile) */
@media (max-width: 359px) {
  .pp-hinweis { font-size: .9375rem; padding: .85em 1em; }
}