/* ==========================================================================
   PartnerTo — App-spezifische Komponenten
   Baut auf dem AssistUK/GazeTo-Designsystem auf (tokens/base/components).
   Namensraum: .pt-*
   ========================================================================== */

:root {
  /* Baustein-Akzente (Lernpfad 1..8) */
  --pt-b1: #10b981;  /* Zutrauen */
  --pt-b2: #0ea5e9;  /* Warten */
  --pt-b3: #8b5cf6;  /* Vormachen */
  --pt-b4: #f59e0b;  /* Gut fragen */
  --pt-b5: #ec4899;  /* Aufgreifen */
  --pt-b6: #14b8a6;  /* Wenig helfen */
  --pt-b7: #6366f1;  /* Zusammen bauen */
  --pt-b8: #ef4444;  /* Dranbleiben */
}

/* ── Statusbar-Anpassung (Brand-Logo als Farbfläche) ── */
.statusbar {
  position: sticky; top: 0; z-index: 60;
  display: flex; align-items: center; gap: var(--space-1);
  padding: var(--space-2) var(--space-3);
  background: var(--color-surface);
  border-bottom: 1px solid var(--color-border);
  box-shadow: var(--shadow-sm);
}
.statusbar__brand {
  display: flex; align-items: center; gap: var(--space-2);
  font-family: var(--font-headline); font-weight: var(--font-black);
  font-size: var(--text-lg); color: var(--color-primary-dark);
  padding: var(--space-1) var(--space-2); border-radius: var(--radius-md);
  background: none; border: none; cursor: pointer;
}
.statusbar__brand-logo {
  width: 32px; height: 32px; border-radius: var(--radius-md);
  background: var(--color-primary); color: #fff;
  display: flex; align-items: center; justify-content: center; font-weight: 900;
  font-family: var(--font-headline); font-size: 1.1rem;
  overflow: hidden;
}
.statusbar__brand-logo img { width: 100%; height: 100%; display: block; }
.statusbar__spacer { flex: 1; }
.statusbar__btn {
  display: inline-flex; align-items: center; gap: var(--space-1);
  padding: var(--space-2); border-radius: var(--radius-md);
  color: var(--color-text-secondary); font-size: var(--text-xs); font-weight: var(--font-medium);
  min-width: 44px; min-height: 44px; justify-content: center;
  background: none; border: none; cursor: pointer;
}
.statusbar__btn:hover { background: var(--color-surface-alt); color: var(--color-text); }
.statusbar__btn i { width: 22px; height: 22px; }
.statusbar__btn[aria-pressed="true"] { background: var(--color-primary-bg); color: var(--color-primary-dark); }
.statusbar__btn-label { display: none; }
.statusbar__btn--font { font-weight: var(--font-bold); font-size: var(--text-sm); }
@media (min-width: 820px) { .statusbar__btn-label { display: inline; } }

/* ── Bottom-Nav Primär-Item (Mitte) ── */
.bottom-nav__item--primary { position: relative; }
.bottom-nav__primary-disc {
  display: flex; align-items: center; justify-content: center;
  width: 54px; height: 54px; margin-top: -22px; margin-bottom: -6px;
  border-radius: 50%; background: var(--color-primary); color: #fff;
  box-shadow: var(--shadow-lg); border: 3px solid var(--color-surface);
}
.bottom-nav__primary-disc i { width: 26px; height: 26px; }
.bottom-nav__item--primary.active .bottom-nav__primary-disc { background: var(--color-primary-dark); }

/* ── Screen-Grundgerüst ── */
.pt-screen { max-width: 900px; margin: 0 auto; }
.pt-screen--wide { max-width: 1100px; }

/* Vertikaler Rhythmus in Screens — Ueberschriften/Bloecke waren gequetscht (alle margin:0).
   Additiv (Kinder haben margin:0), aendert das Layout-Modell nicht. */
.pt-screen > * + * { margin-top: var(--space-5); }
.pt-screen > h2 { margin-top: var(--space-10); }   /* Luft VOR Abschnitts-Ueberschrift */
.pt-screen > h3 { margin-top: var(--space-8); }
.pt-screen > h1 + *,
.pt-screen > h2 + *,
.pt-screen > h3 + * { margin-top: var(--space-3); } /* eng NACH Ueberschrift zum Inhalt */
.pt-screen > h1 + p.muted,
.pt-screen > h2 + p.muted { margin-top: var(--space-2); } /* Unterzeile haengt an Ueberschrift */
.pt-head { margin-bottom: var(--space-5); }
.pt-head h1 { font-size: var(--text-3xl); font-family: var(--font-headline); }
.pt-head p { color: var(--color-text-muted); margin-top: var(--space-1); }
.pt-back {
  display: inline-flex; align-items: center; gap: var(--space-2);
  padding: var(--space-2) var(--space-3); margin-bottom: var(--space-3);
  color: var(--color-text-secondary); font-weight: var(--font-medium); font-size: var(--text-sm);
  border-radius: var(--radius-md); background: none; border: none; cursor: pointer;
}
.pt-back:hover { color: var(--color-primary); background: var(--color-primary-bg); }
.pt-back i { width: 20px; height: 20px; }

/* ── Home-Hero („Dein nächster Schritt") ── */
.pt-hero {
  border-radius: var(--radius-xl); padding: var(--space-6);
  background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
  color: #fff; box-shadow: var(--shadow-lg); margin-bottom: var(--space-6);
}
.pt-hero__hi { font-size: var(--text-lg); opacity: .9; }
.pt-hero__title { font-family: var(--font-headline); font-size: var(--text-4xl); color: #fff; margin: var(--space-1) 0 var(--space-2); }
.pt-hero__what { font-size: var(--text-base); line-height: 1.5; color: #fff; opacity: .95; max-width: 62ch; margin: 0 0 var(--space-4); }
.pt-hero__what strong { font-weight: var(--font-bold); }
.pt-hero__next {
  display: flex; align-items: center; gap: var(--space-4);
  background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.25);
  border-radius: var(--radius-lg); padding: var(--space-4); margin-top: var(--space-4);
  cursor: pointer; transition: background var(--transition-fast); width: 100%; text-align: left;
}
.pt-hero__next:hover { background: rgba(255,255,255,.22); }
.pt-hero__next-icon { font-size: 2.4rem; line-height: 1; align-self: flex-start; }
.pt-hero__next-body { flex: 1; display: flex; flex-direction: column; gap: 2px; }
.pt-hero__next-kicker { display: block; font-size: var(--text-xs); text-transform: uppercase; letter-spacing: .08em; opacity: .85; }
.pt-hero__next-title { display: block; font-family: var(--font-headline); font-size: var(--text-2xl); color: #fff; line-height: var(--leading-tight); }
.pt-hero__next-meta { display: block; font-size: var(--text-sm); opacity: .9; }
.pt-hero__next i { width: 28px; height: 28px; }

/* ── Rollen-Chips (Einstieg nach Rolle) ── */
.pt-roles { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-bottom: var(--space-6); }
.pt-role {
  display: inline-flex; align-items: center; gap: var(--space-2);
  padding: var(--space-2) var(--space-4); border-radius: var(--radius-full);
  background: var(--color-surface); border: 1px solid var(--color-border);
  font-weight: var(--font-medium); font-size: var(--text-sm); color: var(--color-text-secondary);
  cursor: pointer; min-height: 44px;
}
.pt-role:hover { border-color: var(--color-primary); color: var(--color-primary); }
.pt-role.is-active { background: var(--color-primary); border-color: var(--color-primary); color: #fff; }
.pt-role i { width: 18px; height: 18px; }

/* ── Lernpfad (8 Bausteine) ── */
.pt-path { display: flex; flex-direction: column; gap: var(--space-3); position: relative; }
.pt-node {
  display: flex; align-items: center; gap: var(--space-4);
  background: var(--color-surface); border: 1px solid var(--color-border);
  border-left: 6px solid var(--pt-accent, var(--color-primary));
  border-radius: var(--radius-lg); padding: var(--space-4);
  box-shadow: var(--shadow-sm); cursor: pointer; text-align: left; width: 100%;
  transition: transform var(--transition-fast), box-shadow var(--transition-fast);
}
.pt-node:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
.pt-node.is-locked { opacity: .58; cursor: not-allowed; border-left-color: var(--color-border-strong); }
.pt-node.is-locked:hover { transform: none; box-shadow: var(--shadow-sm); }
.pt-node.is-current { box-shadow: 0 0 0 2px var(--pt-accent, var(--color-primary)), var(--shadow-md); }
.pt-node__disc {
  width: 56px; height: 56px; flex-shrink: 0; border-radius: 50%;
  background: var(--pt-accent, var(--color-primary)); color: #fff;
  display: flex; align-items: center; justify-content: center; font-size: 1.8rem;
  box-shadow: var(--shadow-sm); position: relative;
}
.pt-node__num {
  position: absolute; top: -6px; left: -6px; width: 24px; height: 24px; border-radius: 50%;
  background: var(--color-surface); color: var(--pt-accent, var(--color-primary));
  border: 2px solid var(--pt-accent, var(--color-primary));
  font-size: .8rem; font-weight: 800; display: flex; align-items: center; justify-content: center;
}
.pt-node__body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.pt-node__title { display: block; font-family: var(--font-headline); font-size: var(--text-xl); font-weight: var(--font-bold); color: var(--color-text); line-height: var(--leading-tight); }
.pt-node__claim { display: block; font-size: var(--text-sm); color: var(--color-text-secondary); }
.pt-node__meta { display: flex; align-items: center; gap: var(--space-3); margin-top: var(--space-2); }
.pt-node__dots { display: flex; gap: 4px; }
.pt-node__dot { width: 9px; height: 9px; border-radius: 50%; background: var(--color-border); }
.pt-node__dot.is-done { background: var(--color-success); }
.pt-node__state { color: var(--color-text-muted); display: flex; align-items: center; }
.pt-node__state i { width: 22px; height: 22px; }
.pt-node__state.is-done { color: var(--color-success); }

/* ── Kachel-Raster (6 Kacheln je Baustein) ── */
.pt-kachel-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-4); }
@media (min-width: 640px) { .pt-kachel-grid { grid-template-columns: repeat(3, 1fr); } }
.pt-kachel {
  display: flex; flex-direction: column; align-items: center; gap: var(--space-2);
  background: var(--color-surface); border: 1px solid var(--color-border);
  border-radius: var(--radius-xl); padding: var(--space-5) var(--space-3); min-height: 172px;
  box-shadow: var(--shadow-sm); cursor: pointer; text-align: center;
  transition: transform var(--transition-fast), box-shadow var(--transition-fast);
}
.pt-kachel:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.pt-kachel__icon {
  display: flex; align-items: center; justify-content: center;
  width: 68px; height: 68px; border-radius: 20px; margin-bottom: var(--space-1);
  background: var(--pt-k-color, var(--color-primary)); color: #fff;
  box-shadow: 0 6px 16px color-mix(in srgb, var(--pt-k-color, var(--color-primary)) 45%, transparent);
}
.pt-kachel__icon svg { width: 36px; height: 36px; }
.pt-kachel__title { font-family: var(--font-headline); font-size: var(--text-xl); font-weight: var(--font-bold); justify-content: center; }
.pt-kachel__meta { font-size: var(--text-sm); color: var(--color-text-muted); }
.pt-kachel__done { margin-top: auto; display: inline-flex; align-items: center; gap: 4px; color: var(--color-success); font-size: var(--text-sm); font-weight: var(--font-bold); }
.pt-kachel__done i { width: 18px; height: 18px; }
.pt-kachel.is-done { border-color: var(--color-success); }

/* ── Wissen-Kachel ── */
.pt-wissen__figure {
  display: flex; align-items: center; justify-content: center;
  height: 150px; border-radius: var(--radius-lg); margin-bottom: var(--space-4);
  background: var(--pt-accent-bg, var(--color-primary-bg));
}
.pt-wissen__figure svg { width: 96px; height: 96px; }
.pt-wissen__sentences { list-style: none; padding: 0; margin: 0; }
.pt-wissen__sentences li {
  font-size: var(--text-xl); line-height: var(--leading-normal); color: var(--color-text);
  padding: var(--space-3) 0; border-bottom: 1px solid var(--color-border);
  display: flex; gap: var(--space-3); align-items: flex-start;
}
.pt-wissen__sentences li:last-child { border-bottom: none; }
.pt-wissen__sentences li::before { content: "→"; color: var(--pt-accent, var(--color-primary)); font-weight: 800; }

/* ── Warum-Layer (3 Ebenen, Akkordeon) ── */
.pt-warum {
  margin-top: var(--space-5); border: 1px solid var(--color-border);
  border-radius: var(--radius-lg); overflow: hidden;
}
.pt-warum__head {
  display: flex; align-items: center; gap: var(--space-2);
  padding: var(--space-4); background: var(--color-primary-bg); color: var(--color-primary-dark);
  font-weight: var(--font-bold); cursor: pointer; list-style: none; width: 100%; border: none;
  font-size: var(--text-base);
}
.pt-warum__head i { width: 20px; height: 20px; }
.pt-warum__body { padding: var(--space-4); display: none; }
.pt-warum.is-open .pt-warum__body { display: block; }
.pt-warum__level { padding: var(--space-3) 0; border-top: 1px solid var(--color-border); }
.pt-warum__level:first-child { border-top: none; }
.pt-warum__badge {
  display: inline-block; font-size: .78rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em;
  color: var(--color-primary-dark); background: var(--color-primary-bg);
  padding: 2px 10px; border-radius: var(--radius-full); margin-bottom: var(--space-2);
}
.pt-warum__level p { margin: 0; color: var(--color-text-secondary); }
.pt-warum__quellen { font-size: var(--text-xs); color: var(--color-text-muted); font-style: italic; }

/* ── Quiz ── */
.pt-quiz__situation { font-size: var(--text-xl); font-weight: var(--font-medium); margin-bottom: var(--space-4); line-height: var(--leading-normal); }
.pt-quiz__options { display: flex; flex-direction: column; gap: var(--space-3); }
.pt-quiz__option {
  display: flex; align-items: center; gap: var(--space-3); text-align: left;
  padding: var(--space-4); border-radius: var(--radius-lg);
  background: var(--color-surface); border: 2px solid var(--color-border);
  font-size: var(--text-lg); cursor: pointer; min-height: 60px; transition: all var(--transition-fast);
}
.pt-quiz__option:hover { border-color: var(--color-primary); }
.pt-quiz__option.is-correct { border-color: var(--color-success); background: #eafaf0; }
.pt-quiz__option.is-wrong { border-color: var(--color-error); background: #fdeded; }
.pt-quiz__option[disabled] { cursor: default; }
.pt-quiz__mark { width: 28px; height: 28px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; }
.pt-quiz__mark i { width: 24px; height: 24px; }
.pt-quiz__feedback {
  margin-top: var(--space-4); padding: var(--space-4); border-radius: var(--radius-lg);
  background: var(--color-surface-alt); border-left: 4px solid var(--color-primary);
  font-size: var(--text-base); display: none;
}
.pt-quiz__feedback.is-shown { display: block; }
.pt-quiz__feedback.is-good { border-left-color: var(--color-success); background: #eafaf0; }
.pt-quiz__feedback.is-bad { border-left-color: var(--color-warning); background: #fff7ea; }
.pt-quiz__progress { font-size: var(--text-sm); color: var(--color-text-muted); margin-bottom: var(--space-3); }

/* ── Warte-Trainer ── */
.pt-warte { text-align: center; }
.pt-warte__stage {
  position: relative; height: 260px; border-radius: var(--radius-xl); overflow: hidden;
  background: radial-gradient(circle at 50% 40%, #33507a, #1a3050);
  display: flex; flex-direction: column; align-items: center; justify-content: center; color: #fff;
  margin-bottom: var(--space-4);
}
.pt-warte__scene { font-size: var(--text-lg); opacity: .95; max-width: 30ch; }
.pt-warte__ring { position: relative; width: 120px; height: 120px; margin: var(--space-4) auto; }
.pt-warte__ring svg { transform: rotate(-90deg); }
.pt-warte__ring-track { stroke: rgba(255,255,255,.2); }
.pt-warte__ring-fill { stroke: #fff; transition: stroke-dashoffset .1s linear; }
.pt-warte__count { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-family: var(--font-headline); font-size: 2.6rem; font-weight: 800; }
.pt-warte__tempt {
  margin: 0 auto; display: inline-flex; align-items: center; gap: var(--space-2);
  padding: var(--space-3) var(--space-5); border-radius: var(--radius-full);
  background: var(--color-secondary); color: #fff; font-weight: var(--font-bold); border: none; cursor: pointer;
  animation: pt-wobble 2.4s ease-in-out infinite;
}
@keyframes pt-wobble { 0%,100%{ transform: rotate(-2deg);} 50%{ transform: rotate(2deg);} }
.pt-warte__hint { color: var(--color-text-muted); margin-top: var(--space-2); }
.pt-warte__result { font-size: var(--text-xl); margin-top: var(--space-3); }

/* ── Symbol-Board (Modellieren / Duett) ── */
.pt-board { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-2); }
@media (min-width: 640px) { .pt-board { grid-template-columns: repeat(6, 1fr); } }
.pt-cell {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  padding: var(--space-2); border-radius: var(--radius-md);
  background: var(--color-surface); border: 2px solid var(--color-border); cursor: pointer;
  min-height: 84px; justify-content: center;
}
.pt-cell:hover { border-color: var(--color-primary); }
.pt-cell.is-target { border-color: var(--color-warning); box-shadow: 0 0 0 3px rgba(217,119,6,.25); }
.pt-cell.is-hit { border-color: var(--color-success); background: #eafaf0; }
.pt-cell svg { width: 40px; height: 40px; }
.pt-cell__label { font-size: .78rem; font-weight: var(--font-medium); text-align: center; }
.pt-model__prompt { font-size: var(--text-xl); text-align: center; margin-bottom: var(--space-4); }
.pt-model__built { min-height: 44px; display: flex; flex-wrap: wrap; gap: var(--space-2); justify-content: center; margin: var(--space-3) 0; }
.pt-chip-word {
  display: inline-flex; align-items: center; padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-full); background: var(--color-primary); color: #fff; font-weight: var(--font-bold);
}

/* ── Fragen-Umformer (Wortkacheln) ── */
.pt-tiles { display: flex; flex-wrap: wrap; gap: var(--space-2); justify-content: center; }
.pt-tile {
  padding: var(--space-2) var(--space-4); border-radius: var(--radius-md);
  background: var(--color-surface); border: 2px solid var(--color-border);
  font-size: var(--text-lg); font-weight: var(--font-medium); cursor: pointer; min-height: 48px;
}
.pt-tile:hover { border-color: var(--color-primary); }
.pt-tile.is-used { opacity: .35; pointer-events: none; }
.pt-answer-line {
  min-height: 60px; border: 2px dashed var(--color-border-strong); border-radius: var(--radius-lg);
  padding: var(--space-3); margin: var(--space-3) 0; display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center;
  font-size: var(--text-lg);
}
.pt-answer-line:empty::before { content: attr(data-placeholder); color: var(--color-text-muted); font-style: italic; }

/* ── Rollenspiel ── */
.pt-rp-choose { display: grid; gap: var(--space-3); grid-template-columns: 1fr; }
@media (min-width: 640px) { .pt-rp-choose { grid-template-columns: repeat(3, 1fr); } }
.pt-rp-card {
  padding: var(--space-5); border-radius: var(--radius-lg); background: var(--color-surface);
  border: 1px solid var(--color-border); box-shadow: var(--shadow-sm); cursor: pointer; text-align: left;
}
.pt-rp-card:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); }
.pt-rp-card__icon { width: 48px; height: 48px; border-radius: var(--radius-md); background: var(--color-primary); color: #fff; display: flex; align-items: center; justify-content: center; margin-bottom: var(--space-3); }
.pt-rp-card__icon i { width: 26px; height: 26px; }

/* Video-Rollenspiel (Text-Szene) */
.pt-scene {
  border-radius: var(--radius-xl); padding: var(--space-6); color: #fff; margin-bottom: var(--space-4);
  background: linear-gradient(135deg, #3a5273, #263a55); min-height: 160px;
}
.pt-scene__narration { font-size: var(--text-xl); line-height: var(--leading-normal); }
.pt-scene__outcome { margin-top: var(--space-3); padding-top: var(--space-3); border-top: 1px solid rgba(255,255,255,.25); }
.pt-scene__effect { display: inline-block; padding: 2px 10px; border-radius: var(--radius-full); font-size: var(--text-xs); font-weight: 700; margin-top: var(--space-2); }
.pt-scene__effect--bloom { background: #16a34a; }
.pt-scene__effect--stop  { background: #dc2626; }
.pt-scene__effect--neutral { background: #6b7280; }

/* KI-Chat */
.pt-chat { display: flex; flex-direction: column; gap: var(--space-3); }
.pt-chat__log { display: flex; flex-direction: column; gap: var(--space-2); min-height: 200px; max-height: 380px; overflow-y: auto; padding: var(--space-2); }
.pt-bubble { max-width: 80%; padding: var(--space-3) var(--space-4); border-radius: var(--radius-lg); font-size: var(--text-base); line-height: var(--leading-normal); }
.pt-bubble--them { align-self: flex-start; background: var(--color-surface-alt); border-bottom-left-radius: var(--radius-sm); }
.pt-bubble--me { align-self: flex-end; background: var(--color-primary); color: #fff; border-bottom-right-radius: var(--radius-sm); }
.pt-bubble--typing { align-self: flex-start; color: var(--color-text-muted); font-style: italic; }
.pt-chat__input { display: flex; gap: var(--space-2); }
.pt-chat__input input { flex: 1; padding: var(--space-3); border: 2px solid var(--color-border); border-radius: var(--radius-md); font: inherit; }
.pt-chat__quick { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.pt-chat__quick button { padding: var(--space-2) var(--space-3); border-radius: var(--radius-full); border: 1px solid var(--color-border); background: var(--color-surface); font-size: var(--text-sm); cursor: pointer; }
.pt-chat__quick button:hover { border-color: var(--color-primary); color: var(--color-primary); }

/* ── Übungsgespräch: Briefing, Auftrag, Fortschritt ── */
.pt-brief { display: flex; flex-direction: column; gap: var(--space-3); margin-bottom: var(--space-4); }
.pt-brief__step { display: flex; gap: var(--space-3); align-items: flex-start; }
.pt-brief__num { flex: 0 0 auto; width: 2rem; height: 2rem; border-radius: var(--radius-full);
  background: var(--color-primary); color: #fff; display: flex; align-items: center;
  justify-content: center; font-weight: 700; }
.pt-mission { border-left: 4px solid var(--color-primary); }
.pt-mission--sticky { margin-bottom: var(--space-3); }
.pt-mission--ok { border-left: 4px solid #16a34a; }
.pt-mission--open { border-left: 4px solid #d97706; }
.pt-ai-optin { display: flex; gap: var(--space-3); align-items: flex-start; padding: var(--space-3);
  border: 2px solid var(--color-border); border-radius: var(--radius-md); margin-bottom: var(--space-4);
  cursor: pointer; }
.pt-ai-optin input { margin-top: .25rem; width: 1.25rem; height: 1.25rem; flex: 0 0 auto; }
.pt-ai-state { display: flex; align-items: center; gap: var(--space-2); margin-bottom: var(--space-4); }
.pt-badge { display: inline-block; padding: .1rem .5rem; border-radius: var(--radius-full);
  font-size: var(--text-sm); }
.pt-badge--ai { background: var(--color-primary); color: #fff; }
.pt-chat__head { margin-bottom: var(--space-2); }
.pt-chat__progress { display: flex; flex-direction: column; gap: var(--space-1);
  margin-bottom: var(--space-3); }
.pt-chat__bar { height: .5rem; border-radius: var(--radius-full); background: var(--color-surface-alt);
  overflow: hidden; }
.pt-chat__bar-fill { height: 100%; width: 0; background: var(--color-primary);
  transition: width .3s ease; }
.pt-chat__hint { margin: var(--space-2) 0 0; }
.pt-chat__end { margin-top: var(--space-4); display: flex; flex-direction: column;
  gap: var(--space-2); align-items: flex-start; }
@media (prefers-reduced-motion: reduce) { .pt-chat__bar-fill { transition: none; } }

/* Live-Rollenspiel Rollenkarten */
.pt-rolecards { display: grid; gap: var(--space-4); grid-template-columns: 1fr; }
@media (min-width: 700px) { .pt-rolecards { grid-template-columns: 1fr 1fr; } }
.pt-rolecard { border-radius: var(--radius-lg); padding: var(--space-5); color: #fff; }
.pt-rolecard--a { background: linear-gradient(135deg, #6366f1, #4f46e5); }
.pt-rolecard--b { background: linear-gradient(135deg, #0ea5e9, #0284c7); }
.pt-rolecard h3 { color: #fff; }
.pt-obs { list-style: none; padding: 0; margin: var(--space-3) 0; display: flex; flex-direction: column; gap: var(--space-2); }
.pt-obs li { display: flex; align-items: center; gap: var(--space-2); padding: var(--space-2); background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md); }

/* ── Profil ── */
.pt-profile-field { margin-bottom: var(--space-5); }
.pt-profile-field > label { display: block; font-weight: var(--font-bold); margin-bottom: var(--space-2); }
.pt-profile-field input[type=text], .pt-profile-field textarea, .pt-profile-field select {
  width: 100%; padding: var(--space-3); border: 2px solid var(--color-border); border-radius: var(--radius-md); font: inherit; background: var(--color-surface);
}
.pt-choice-row { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.pt-choice-btn {
  padding: var(--space-3) var(--space-4); border-radius: var(--radius-full);
  border: 2px solid var(--color-border); background: var(--color-surface); cursor: pointer; font: inherit; min-height: 48px;
}
.pt-choice-btn.is-active { background: var(--color-primary); border-color: var(--color-primary); color: #fff; }

/* Zielgruppen-Auswahl (große Kacheln, Leichte Sprache) */
.pt-zg { display: grid; gap: var(--space-3); grid-template-columns: 1fr; }
@media (min-width: 640px) { .pt-zg { grid-template-columns: 1fr 1fr; } }
.pt-zg__card { text-align: left; padding: var(--space-4); border-radius: var(--radius-lg); border: 2px solid var(--color-border); background: var(--color-surface); cursor: pointer; }
.pt-zg__card.is-active { border-color: var(--color-primary); box-shadow: 0 0 0 2px var(--color-primary); }
.pt-zg__card b { display: block; font-family: var(--font-headline); font-size: var(--text-lg); }
.pt-zg__card span { color: var(--color-text-muted); font-size: var(--text-sm); }

/* ── Feedback-Modul der UK-Person (große Symbol-Buttons) ── */
.pt-fb-grid { display: grid; gap: var(--space-4); grid-template-columns: repeat(2, 1fr); }
.pt-fb-btn {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--space-2);
  padding: var(--space-6) var(--space-4); border-radius: var(--radius-xl); border: 3px solid var(--color-border);
  background: var(--color-surface); cursor: pointer; min-height: 160px; text-align: center;
}
.pt-fb-btn:hover, .pt-fb-btn:focus-visible { border-color: var(--color-primary); }
.pt-fb-btn svg { width: 72px; height: 72px; }
.pt-fb-btn__label { font-size: var(--text-xl); font-weight: var(--font-bold); }
.pt-fb-btn.is-picked { border-color: var(--color-success); background: #eafaf0; }

/* ── Badges / Abzeichen ── */
.pt-badges { display: flex; flex-wrap: wrap; gap: var(--space-3); }
.pt-badge {
  display: flex; flex-direction: column; align-items: center; gap: var(--space-1);
  width: 96px; text-align: center;
}
.pt-badge__disc {
  width: 68px; height: 68px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  font-size: 2rem; background: var(--color-surface-alt); border: 2px dashed var(--color-border-strong); color: var(--color-text-muted);
}
.pt-badge.is-earned .pt-badge__disc { background: var(--pt-accent, var(--color-primary)); border-style: solid; border-color: var(--pt-accent, var(--color-primary)); color: #fff; }
.pt-badge__name { font-size: var(--text-xs); font-weight: var(--font-medium); }

/* ── Kompetenz-Balken (Reflexion) ── */
.pt-komp { display: flex; flex-direction: column; gap: var(--space-4); }
.pt-komp__row { }
.pt-komp__label { display: flex; justify-content: space-between; font-weight: var(--font-medium); margin-bottom: var(--space-1); }
.pt-komp__bar { height: 12px; background: var(--color-surface-alt); border-radius: var(--radius-full); overflow: hidden; }
.pt-komp__fill { height: 100%; border-radius: var(--radius-full); background: var(--color-primary); transition: width var(--transition-slow); }

/* ── Aufgabe (freundlicher Zettel) ── */
.pt-note {
  background: #fffbeb; border: 1px solid #fde68a; border-radius: var(--radius-lg);
  padding: var(--space-5); box-shadow: var(--shadow-sm); position: relative;
}
.pt-note__pin { position: absolute; top: -10px; left: 50%; transform: translateX(-50%); font-size: 1.4rem; }
.pt-note ul { list-style: none; padding: 0; margin: 0; }
.pt-note li { font-size: var(--text-xl); padding: var(--space-2) 0; color: #713f12; }

/* Abend-Check */
.pt-check-row { display: flex; gap: var(--space-3); justify-content: center; margin-top: var(--space-4); }
.pt-check-btn { font-size: 2.4rem; padding: var(--space-3); border-radius: var(--radius-lg); border: 2px solid var(--color-border); background: var(--color-surface); cursor: pointer; }
.pt-check-btn.is-active { border-color: var(--color-primary); background: var(--color-primary-bg); }

/* ── Situationen ── */
.pt-sit-grid { display: grid; gap: var(--space-4); grid-template-columns: 1fr; }
@media (min-width: 640px) { .pt-sit-grid { grid-template-columns: 1fr 1fr; } }
.pt-sit__do { color: #166534; }
.pt-sit__dont { color: #991b1b; }
.pt-sit ul { list-style: none; padding: 0; margin: var(--space-2) 0 0; }
.pt-sit li { padding: var(--space-1) 0; display: flex; gap: var(--space-2); align-items: flex-start; }

/* ── Zertifikat / Poster (Druck) ── */
.pt-cert {
  border: 3px solid var(--color-primary); border-radius: var(--radius-xl); padding: var(--space-8);
  text-align: center; background: #fff; max-width: 720px; margin: 0 auto;
}
.pt-cert__seal { font-size: 3rem; }
.pt-cert__title { font-family: var(--font-headline); font-size: var(--text-3xl); color: var(--color-primary-dark); }
.pt-cert__name { font-family: var(--font-headline); font-size: var(--text-2xl); margin: var(--space-4) 0; }
.pt-cert__line { color: var(--color-text-secondary); }
.pt-cert__date { margin-top: var(--space-4); font-weight: var(--font-bold); color: var(--color-text); }
.pt-cert__logo { width: 150px; height: auto; margin: var(--space-4) auto 0; display: block; }

/* Poster: großzügig, mittig, nur Inhalt + kleine AssistUK-Marke */
.pt-poster { display: flex; flex-direction: column; justify-content: center; min-height: 240px; margin-bottom: var(--space-5); }
.pt-poster__title { font-size: var(--text-2xl); }
.pt-poster__body { font-size: var(--text-xl); line-height: var(--leading-loose); margin-top: var(--space-4); }
.pt-poster__logo { width: 120px; height: auto; margin: var(--space-6) auto 0; display: block; opacity: .9; }

/* ── Auswahlmöglichkeiten immer untereinander, mit Abstand ── */
.pt-choices { display: flex; flex-direction: column; gap: var(--space-3); }
.pt-choices .btn { width: 100%; justify-content: flex-start; text-align: left; min-height: 56px; }

/* ── Konfetti / Feier ── */
.pt-confetti { position: fixed; inset: 0; pointer-events: none; z-index: 3000; overflow: hidden; }
.pt-confetti span { position: absolute; top: -12px; width: 10px; height: 14px; opacity: .9; animation: pt-fall 1.8s linear forwards; }
@keyframes pt-fall { to { transform: translateY(105vh) rotate(540deg); opacity: 0; } }

/* ── Fortschritts-Kopf (Kachel-Screen) ── */
.pt-b-head { display: flex; align-items: center; gap: var(--space-4); margin-bottom: var(--space-5); }
.pt-b-head__disc { width: 64px; height: 64px; border-radius: 50%; background: var(--pt-accent, var(--color-primary)); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 2rem; flex-shrink: 0; }
.pt-b-head__title { font-family: var(--font-headline); font-size: var(--text-2xl); }
.pt-b-head__claim { color: var(--color-text-muted); }

/* ── Mehr-Hub ── */
.pt-hub { display: grid; gap: var(--space-3); grid-template-columns: 1fr; }
@media (min-width: 560px) { .pt-hub { grid-template-columns: 1fr 1fr; } }
.pt-hub__item { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-4); border-radius: var(--radius-lg); background: var(--color-surface); border: 1px solid var(--color-border); cursor: pointer; text-align: left; }
.pt-hub__item:hover { box-shadow: var(--shadow-md); }
.pt-hub__item i { width: 26px; height: 26px; color: var(--color-primary); }

.pt-actions { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-6); }

/* ── Weiter/Fortsetzen immer rechts, konsistente Leiste ── */
.pt-nextbar { display: flex; flex-wrap: wrap; gap: var(--space-3); justify-content: flex-end; margin-top: var(--space-4); }
.pt-complete-bar {
  justify-content: flex-end; margin-top: var(--space-5);
  border-top: 1px solid var(--color-border); padding-top: var(--space-4);
}
@media (max-width: 520px) { .pt-nextbar, .pt-complete-bar { justify-content: stretch; } .pt-nextbar .btn, .pt-complete-bar .btn { flex: 1; } }

/* ── Icon-Größen (Ersatz für frühere Emojis) ── */
.pt-node__disc svg, .pt-b-head__disc svg, .pt-hero__next-icon svg { width: 30px; height: 30px; }
.pt-hero__next-icon { display: flex; align-items: center; }
.pt-badge__disc svg { width: 30px; height: 30px; }
.pt-check-btn svg { width: 40px; height: 40px; }
.pt-note__pin svg { width: 24px; height: 24px; color: var(--color-warning); }
.pt-cert__seal svg { width: 52px; height: 52px; margin: 0 auto; color: var(--color-primary); }
.pt-warte__count svg { width: 48px; height: 48px; }
.pt-choice-btn svg { width: 22px; height: 22px; vertical-align: middle; }
.pt-obs .pt-choice-btn svg { width: 26px; height: 26px; }
.pt-sit li svg { width: 18px; height: 18px; flex-shrink: 0; margin-top: 4px; }
.pt-kachel__title, .pt-b-head__title, h2 { display: flex; align-items: center; gap: var(--space-2); }
.pt-kachel__title svg, h2 svg, .pt-b-head__title svg { width: 22px; height: 22px; flex-shrink: 0; }

/* dwell ring reuse */
.pt-dwell-ring { position: absolute; border-radius: 50%; pointer-events: none; z-index: 9999; }

/* ── Vorlesen: aktuell gelesenes Element hervorheben ── */
.pt-reading {
  background: var(--color-primary-bg) !important;
  box-shadow: 0 0 0 3px var(--color-primary);
  border-radius: var(--radius-sm);
  scroll-margin-top: 90px;
  transition: box-shadow var(--transition-fast), background var(--transition-fast);
}
/* Auf dunklem Hero/Szene-Hintergrund heller hervorheben */
.pt-hero .pt-reading, .pt-scene .pt-reading, .pt-hero__next .pt-reading {
  background: rgba(255,255,255,.22) !important;
  box-shadow: 0 0 0 3px #fff;
}

/* ==========================================================================
   Responsive & Geräte: iPhone / Smartphone / iPad / Desktop
   ========================================================================== */
/* Dynamische Viewport-Höhe (gegen iOS-Safari-URL-Leisten-Sprünge) */
#app { min-height: 100dvh; }

/* Safe-Area oben (Notch) für die sticky Statusbar; unten regelt die Bottom-Nav */
.statusbar { padding-top: calc(var(--space-2) + env(safe-area-inset-top, 0px)); }

/* Inhalt nicht hinter Bottom-Nav + Home-Indicator verstecken */
#app-content { padding-bottom: calc(var(--space-16) + var(--space-4) + env(safe-area-inset-bottom, 0px)); }

/* Viele Statusbar-Werkzeuge, wenig Platz: kompakt und nie abgeschnitten
   (horizontales Scrollen als Sicherheitsnetz auf sehr schmalen Geräten). */
.statusbar { overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
.statusbar::-webkit-scrollbar { display: none; }
.statusbar__brand, .statusbar__btn { flex: 0 0 auto; }

@media (max-width: 560px) {
  .statusbar { gap: 2px; padding-left: var(--space-2); padding-right: var(--space-2); }
  .statusbar__btn { min-width: 40px; min-height: 40px; padding: var(--space-1); }
  .statusbar__btn i { width: 20px; height: 20px; }
  .statusbar__brand span:not(.statusbar__brand-logo) { display: none; } /* nur Logo-Quadrat behalten */
  #sb-profile { display: none; }   /* redundant zur Bottom-Nav „Mein Mensch" — spart Platz */
  .pt-hero { padding: var(--space-4); }
  .pt-hero__title { font-size: var(--text-3xl); }
  .pt-hero__next { gap: var(--space-3); padding: var(--space-3); }
  .pt-hero__next-title { font-size: var(--text-xl); }
}

/* iPad / große Tablets: etwas mehr seitliche Luft */
@media (min-width: 640px) and (max-width: 1024px) {
  #app-content { padding-left: var(--space-6); padding-right: var(--space-6); }
}

/* ── Sprach-Menü (Dropdown aus der Statusbar; Flaggen als SVG, keine Emojis) ── */
.sb-lang-menu {
  position: fixed; z-index: 70;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  padding: var(--space-2);
  max-height: 60vh; overflow-y: auto;
  min-width: 220px; max-width: min(92vw, 440px);
  display: grid; grid-template-columns: 1fr 1fr; gap: 2px;
}
@media (max-width: 420px) { .sb-lang-menu { grid-template-columns: 1fr; } }
.sb-lang-item {
  display: flex; align-items: center; gap: var(--space-2);
  padding: var(--space-2) var(--space-3); min-height: 44px;
  border: 0; background: none; border-radius: var(--radius-md);
  font-family: var(--font-body); font-size: var(--text-sm); font-weight: var(--font-medium);
  color: var(--color-text); text-align: left; cursor: pointer;
}
.sb-lang-item:hover { background: var(--color-surface-alt); }
.sb-lang-item.is-active { background: var(--color-primary); color: #fff; }
.sb-lang-item[dir="rtl"] { flex-direction: row-reverse; text-align: right; }
.sb-lang-flag {
  width: 26px; height: 18px; object-fit: cover; border-radius: 3px; flex-shrink: 0;
  box-shadow: 0 0 0 1px rgba(0,0,0,0.08);
}

/* ── „Mein Mensch": editierbare Tipp-Checkliste ── */
.pt-checklist { margin-top: var(--space-6); padding-top: var(--space-5); border-top: 1px solid var(--color-border); }
.pt-check-list { display: flex; flex-direction: column; gap: var(--space-2); margin: var(--space-3) 0; }
.pt-check-item {
  display: flex; align-items: flex-start; gap: var(--space-3);
  background: var(--color-surface); border: 1px solid var(--color-border);
  border-radius: var(--radius-md); padding: var(--space-3);
}
.pt-check-item__box {
  flex: 0 0 auto; width: 32px; height: 32px; border-radius: 9px;
  border: 2px solid var(--color-border); background: var(--color-surface);
  display: flex; align-items: center; justify-content: center; cursor: pointer; color: #fff;
}
.pt-check-item__box i { width: 20px; height: 20px; }
.pt-check-item.is-done .pt-check-item__box { background: var(--color-success); border-color: var(--color-success); }
.pt-check-item__text { flex: 1; line-height: var(--leading-normal); padding-top: 3px; }
.pt-check-item.is-done .pt-check-item__text { text-decoration: line-through; color: var(--color-text-muted); }
.pt-check-item__del { flex: 0 0 auto; width: 34px; height: 34px; border: none; background: none; color: var(--color-text-muted); cursor: pointer; border-radius: var(--radius-sm); }
.pt-check-item__del:hover { color: var(--color-error); background: var(--color-surface-alt); }
.pt-check-item__del i { width: 18px; height: 18px; }
.pt-check-add { display: flex; gap: var(--space-2); margin: var(--space-3) 0; }
.pt-check-add input {
  flex: 1; padding: var(--space-3); font: inherit;
  border: 1px solid var(--color-border); border-radius: var(--radius-md);
  background: var(--color-surface); color: var(--color-text);
}
.pt-check-suggest { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-2); }
.pt-suggest-chip {
  display: inline-flex; align-items: center; gap: 6px; text-align: left; max-width: 100%;
  padding: var(--space-2) var(--space-3); border-radius: var(--radius-full);
  background: var(--color-primary-bg); border: 1px dashed var(--color-primary);
  color: var(--color-primary-dark); font-size: var(--text-sm); font-weight: var(--font-medium); cursor: pointer;
}
.pt-suggest-chip:hover { background: var(--color-primary); color: #fff; }
.pt-suggest-chip i { width: 16px; height: 16px; flex-shrink: 0; }

/* ── „Je nach Mensch": Strategie je Kommunikationsweg (Wissen-Kachel) ── */
.pt-zgtipp { margin: var(--space-4) 0; padding: var(--space-4); border-radius: var(--radius-lg); background: var(--color-surface-alt); border: 1px solid var(--color-border); }
.pt-zgtipp__head { display: flex; align-items: center; gap: var(--space-2); font-family: var(--font-headline); font-weight: var(--font-bold); font-size: var(--text-lg); }
.pt-zgtipp__head i { width: 20px; height: 20px; color: var(--color-primary); flex-shrink: 0; }
.pt-zgtipp__intro { margin: var(--space-1) 0 var(--space-3); font-size: var(--text-sm); }
.pt-zgtipp__list { display: flex; flex-direction: column; gap: var(--space-3); }
.pt-zgtipp__row {
  position: relative; display: grid; grid-template-columns: minmax(10rem, 15rem) auto 1fr;
  align-items: start; gap: var(--space-2) var(--space-3);
  padding: var(--space-3); border-radius: var(--radius-md);
  background: var(--color-surface); border: 1px solid var(--color-border);
}
.pt-zgtipp__row.is-active { border-color: var(--color-primary); background: var(--color-primary-bg); box-shadow: 0 0 0 1px var(--color-primary); }
.pt-zgtipp__when { font-weight: var(--font-bold); color: var(--color-text); }
.pt-zgtipp__arrow { color: var(--color-primary); display: flex; align-items: center; }
.pt-zgtipp__arrow i { width: 18px; height: 18px; }
.pt-zgtipp__what { color: var(--color-text-secondary); line-height: var(--leading-normal); }
.pt-zgtipp__badge { position: absolute; top: -9px; right: 12px; background: var(--color-primary); color: #fff; font-size: var(--text-xs); font-weight: var(--font-bold); padding: 2px 10px; border-radius: var(--radius-full); }
.pt-zgtipp__hint { margin-top: var(--space-3); font-size: var(--text-sm); }
@media (max-width: 620px) {
  .pt-zgtipp__row { grid-template-columns: 1fr; gap: 2px; }
  .pt-zgtipp__arrow { display: none; }
  .pt-zgtipp__when { color: var(--color-primary-dark); }
}

/* ── Druckbare Checkliste (nutzt den .pt-cert-Rahmen) ── */
.pt-checkprint { text-align: left; }
.pt-checkprint__title { text-align: center; }
.pt-checkprint__sub { text-align: center; color: var(--color-text-secondary); margin-top: var(--space-1); }
.pt-checkprint .pt-cert__date { text-align: center; }
.pt-checkprint__list { list-style: none; padding: 0; margin: var(--space-5) 0 0; display: flex; flex-direction: column; gap: var(--space-3); }
.pt-checkprint__item { display: flex; align-items: flex-start; gap: var(--space-3); font-size: var(--text-lg); line-height: var(--leading-normal); }
.pt-checkprint__box { flex: 0 0 auto; width: 22px; height: 22px; border: 2px solid var(--color-text); border-radius: 5px; margin-top: 3px; }
.pt-checkprint__empty { color: var(--color-text-muted); list-style: none; }

/* ── Übung/Rollenspiel: „Angepasst an [Weg]"-Banner ── */
.pt-zg-adapt {
  display: inline-flex; align-items: center; gap: var(--space-2);
  margin-bottom: var(--space-3); padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-full);
  background: var(--color-primary-bg); color: var(--color-primary-dark);
  font-size: var(--text-sm); font-weight: var(--font-bold);
}
.pt-zg-adapt i { width: 16px; height: 16px; flex-shrink: 0; }

/* ── Quellen & Fachwissen (Referenzliste) ── */
.pt-refs { list-style: none; padding: 0; margin: var(--space-2) 0 0; display: flex; flex-direction: column; gap: var(--space-2); }
.pt-refs li { position: relative; padding-left: var(--space-4); font-size: var(--text-sm); color: var(--color-text-secondary); line-height: var(--leading-normal); }
.pt-refs li::before { content: ""; position: absolute; left: 0; top: .55em; width: 6px; height: 6px; border-radius: 50%; background: var(--color-primary); }


/* == Merkhilfe (3-Schritt-Formel je Baustein) ============================= */
.pt-merk {
  display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap;
  margin: var(--space-4) 0; padding: var(--space-3) var(--space-4);
  border: 2px solid var(--pt-accent, var(--color-primary));
  border-radius: var(--radius-lg); background: var(--color-surface);
}
.pt-merk__icon { display: inline-flex; color: var(--pt-accent, var(--color-primary)); }
.pt-merk__icon i, .pt-merk__icon svg { width: 22px; height: 22px; }
.pt-merk__label { color: var(--color-text-secondary); font-size: var(--text-sm); }
.pt-merk__formel { font-family: var(--font-headline); font-size: var(--text-lg); }

/* == Kontrast-Karte "So nicht / So ja" ==================================== */
.pt-kontrast { margin: var(--space-4) 0; }
.pt-kontrast__situation {
  display: flex; align-items: center; gap: var(--space-2);
  font-weight: var(--font-medium); margin-bottom: var(--space-2);
}
.pt-kontrast__situation i, .pt-kontrast__situation svg { width: 20px; height: 20px; flex: none; color: var(--color-text-secondary); }
.pt-kontrast__cols { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3); }
@media (max-width: 560px) { .pt-kontrast__cols { grid-template-columns: 1fr; } }
.pt-kontrast__col { border-radius: var(--radius-lg); padding: var(--space-3) var(--space-4); border: 1px solid; }
.pt-kontrast__col.is-bad  { background: #fef2f2; border-color: #fecaca; }
.pt-kontrast__col.is-good { background: #f0fdf4; border-color: #bbf7d0; }
.pt-kontrast__head { display: flex; align-items: center; gap: var(--space-1); font-weight: var(--font-bold); margin-bottom: var(--space-2); }
.pt-kontrast__col.is-bad  .pt-kontrast__head { color: #b91c1c; }
.pt-kontrast__col.is-good .pt-kontrast__head { color: #15803d; }
.pt-kontrast__head i, .pt-kontrast__head svg { width: 18px; height: 18px; }
.pt-kontrast__say { font-family: var(--font-headline); margin: 0 0 var(--space-2); }
.pt-kontrast__wirkung { margin: 0; font-size: var(--text-sm); color: var(--color-text-secondary); }

/* == Feedback-Bruecke in der Aufgaben-Kachel ============================== */
.pt-fb-bridge { margin-top: var(--space-5); padding-top: var(--space-3); border-top: 1px dashed var(--color-border); }
.pt-fb-bridge p { margin: 0 0 var(--space-2); }

/* == Choices untereinander (B5 Schritt 1) ================================= */
.pt-choices--col { flex-direction: column; align-items: stretch; }
.pt-choices--col .btn { justify-content: flex-start; text-align: left; }


/* == PWA-Install-Karte + Update-Pill ====================================== */
.pt-pwa-card {
  position: fixed; bottom: 84px; right: 24px; z-index: 9000;
  max-width: 340px; width: calc(100% - 48px);
  background: var(--color-surface); border: 1px solid var(--color-border);
  border-radius: var(--radius-lg); padding: var(--space-4);
  box-shadow: var(--shadow-lg, 0 8px 32px rgba(0,0,0,.18));
  display: flex; flex-direction: column; gap: var(--space-2);
}
.pt-pwa-card__title { display: flex; align-items: center; gap: var(--space-2); font-weight: var(--font-bold); }
.pt-pwa-card__title i, .pt-pwa-card__title svg { width: 18px; height: 18px; }
.pt-pwa-card__desc { font-size: var(--text-sm); color: var(--color-text-secondary); }
.pt-pwa-card__ios { font-size: var(--text-sm); background: var(--color-surface-alt); padding: var(--space-2) var(--space-3); border-radius: var(--radius-md); }
.pt-pwa-card__row { display: flex; gap: var(--space-2); margin-top: var(--space-1); }
.pt-pwa-card__btn { flex: 1; }
.pt-pwa-update {
  position: fixed; top: 16px; left: 50%; transform: translateX(-50%); z-index: 9001;
  display: flex; align-items: center; gap: var(--space-2);
  background: var(--color-primary); color: #fff; border: none; cursor: pointer;
  border-radius: var(--radius-full, 999px); padding: var(--space-2) var(--space-4);
  font-size: var(--text-sm); font-weight: var(--font-medium);
  box-shadow: 0 6px 18px rgba(0,0,0,.2);
}
.pt-pwa-update i, .pt-pwa-update svg { width: 16px; height: 16px; }

/* == Sprachmenue-Hinweis =================================================== */
.sb-lang-note {
  padding: var(--space-2) var(--space-3); font-size: var(--text-xs);
  color: var(--color-text-secondary); border-top: 1px solid var(--color-border);
}

/* == Formeln-Poster (8 Merkhilfen) ======================================== */
.pt-formeln__list { list-style: none; margin: var(--space-4) 0 0; padding: 0; text-align: left; }
.pt-formeln__row {
  display: grid; grid-template-columns: 34px 1fr; grid-template-rows: auto auto;
  column-gap: var(--space-3); align-items: baseline;
  padding: var(--space-2) 0; border-bottom: 1px solid var(--color-border);
}
.pt-formeln__row:last-child { border-bottom: none; }
.pt-formeln__num {
  grid-row: 1 / span 2; align-self: center;
  width: 30px; height: 30px; border-radius: 50%;
  background: var(--color-primary); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-weight: var(--font-bold); font-size: var(--text-sm);
}
.pt-formeln__name { font-size: var(--text-sm); color: var(--color-text-secondary); }
.pt-formeln__formel { font-family: var(--font-headline); font-weight: var(--font-bold); font-size: var(--text-lg); }

/* == Wochen-Mission auf Home ============================================== */
.pt-mission {
  display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap;
  margin: var(--space-4) 0; padding: var(--space-3) var(--space-4);
  border: 2px solid var(--pt-b8, var(--color-primary)); border-radius: var(--radius-lg);
  background: var(--color-surface);
}
.pt-mission__icon { display: inline-flex; color: var(--pt-b8, var(--color-primary)); }
.pt-mission__icon i, .pt-mission__icon svg { width: 22px; height: 22px; }
.pt-mission__body { flex: 1 1 220px; min-width: 0; }
.pt-mission__kicker { display: block; font-size: var(--text-xs); text-transform: uppercase; letter-spacing: .04em; color: var(--color-text-secondary); }
.pt-mission__text { font-weight: var(--font-medium); }
.pt-mission__count { font-size: var(--text-sm); color: var(--color-text-secondary); }
.pt-mission__actions { display: flex; gap: var(--space-2); flex-wrap: wrap; }


/* == Poster-Einzeldruck: Leiste unter jedem Poster ======================== */
.pt-poster-item { margin-bottom: var(--space-5); }
.pt-poster-item__bar { display: flex; justify-content: flex-end; margin-top: var(--space-2); }

/* == Meine Tafel (Foto + Raster + Vorlesen) =============================== */
.pt-tafel__intro { display: flex; flex-direction: column; gap: var(--space-3); align-items: flex-start; }
.pt-tafel__pick { cursor: pointer; }
.pt-tafel__stage { position: relative; margin: var(--space-3) 0; border-radius: var(--radius-lg); overflow: hidden; border: 1px solid var(--color-border); }
.pt-tafel__img { display: block; width: 100%; height: auto; }
.pt-tafel__overlay { position: absolute; top: 0; left: 0; right: 0; bottom: 0; }
.pt-tafel__cell { position: absolute; box-sizing: border-box; border: 2px dashed rgba(75,105,140,.75); }
.pt-tafel__cell--btn {
  border: 2px solid rgba(75,105,140,.55); background: transparent; cursor: pointer;
  padding: 0; border-radius: 0;
}
.pt-tafel__cell--btn:hover, .pt-tafel__cell--btn:focus-visible { background: rgba(75,105,140,.16); }
.pt-tafel__cell--btn.is-speaking { background: rgba(16,185,129,.3); border-color: #10b981; }
.pt-tafel__controls { display: flex; gap: var(--space-4); flex-wrap: wrap; margin: var(--space-3) 0; }
.pt-tafel__stepper { display: flex; align-items: center; gap: var(--space-2); }
.pt-tafel__stepper .btn { min-width: 44px; min-height: 44px; padding: var(--space-1) var(--space-3); font-size: var(--text-lg); }
.pt-tafel__stepper-label { font-weight: var(--font-medium); }
.pt-tafel__stepper-val { min-width: 2ch; text-align: center; font-weight: var(--font-bold); font-size: var(--text-lg); }
.pt-tafel__ocr { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; margin: var(--space-2) 0 var(--space-4); }
.pt-tafel__ocr-status { font-size: var(--text-sm); }
.pt-tafel__labels { display: grid; gap: var(--space-1); margin-top: var(--space-2); }
.pt-tafel__label-input {
  width: 100%; min-width: 0; padding: var(--space-2); font-size: var(--text-sm);
  border: 1px solid var(--color-border); border-radius: var(--radius-md);
  background: var(--color-surface); color: var(--color-text);
}
.pt-tafel__label-input:focus { outline: 2px solid var(--color-primary); }


/* == Ich-Buch (Medien-Buch) =============================================== */
.pt-ib__tabs { display: flex; gap: var(--space-1); flex-wrap: wrap; margin-bottom: var(--space-3); }
.pt-ib__tab {
  display: inline-flex; align-items: center; gap: var(--space-1);
  padding: var(--space-2) var(--space-3); border-radius: var(--radius-full, 999px);
  border: 1px solid var(--color-border); background: var(--color-surface);
  color: var(--color-text-secondary); font-size: var(--text-sm); cursor: pointer;
  min-height: 44px;
}
.pt-ib__tab i, .pt-ib__tab svg { width: 16px; height: 16px; }
.pt-ib__tab.is-active { background: var(--color-primary); border-color: var(--color-primary); color: #fff; }
.pt-ib__page { border: 1px solid var(--color-border); border-radius: var(--radius-lg); overflow: hidden; background: var(--color-surface); }
.pt-ib__kap { display: flex; align-items: center; gap: var(--space-2); padding: var(--space-2) var(--space-3); font-size: var(--text-sm); color: var(--color-text-secondary); border-bottom: 1px solid var(--color-border); }
.pt-ib__kap i, .pt-ib__kap svg { width: 16px; height: 16px; }
.pt-ib__media { position: relative; background: #0b1420; min-height: 200px; display: flex; align-items: center; justify-content: center; }
.pt-ib__img { display: block; width: 100%; max-height: 55vh; object-fit: contain; cursor: pointer; }
.pt-ib__video { display: block; width: 100%; max-height: 55vh; }
.pt-ib__videoposter {
  display: flex; align-items: center; justify-content: center;
  width: 100%; min-height: 240px; border: none; cursor: pointer;
  background-color: #0b1420; background-size: cover; background-position: center;
}
.pt-ib__play {
  display: flex; align-items: center; justify-content: center;
  width: 84px; height: 84px; border-radius: 50%;
  background: rgba(255,255,255,.92); color: var(--color-primary);
  box-shadow: 0 6px 24px rgba(0,0,0,.35);
}
.pt-ib__play i, .pt-ib__play svg { width: 40px; height: 40px; }
.pt-ib__videoposter:hover .pt-ib__play, .pt-ib__videoposter:focus-visible .pt-ib__play { transform: scale(1.06); }
.pt-ib__textonly { display: flex; align-items: center; justify-content: center; width: 100%; min-height: 200px; color: #cfe0f2; }
.pt-ib__textonly i, .pt-ib__textonly svg { width: 56px; height: 56px; }
.pt-ib__caption {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-3);
  width: 100%; text-align: left; padding: var(--space-3) var(--space-4);
  background: var(--color-surface); border: none; cursor: pointer;
  font-family: var(--font-headline); font-size: var(--text-lg); color: var(--color-text);
}
.pt-ib__caption:hover { background: var(--color-surface-alt); }
.pt-ib__caption i, .pt-ib__caption svg { width: 20px; height: 20px; flex: none; color: var(--color-primary); }
.pt-ib__nav { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); margin: var(--space-3) 0; }
.pt-ib__navbtn { min-width: 72px; min-height: 56px; }
.pt-ib__count { color: var(--color-text-secondary); font-size: var(--text-sm); }
.pt-ib__author { margin-bottom: var(--space-4); }
.pt-ib__author select { padding: var(--space-2); border-radius: var(--radius-md); border: 1px solid var(--color-border); background: var(--color-surface); color: var(--color-text); margin-top: var(--space-1); }
.pt-ib__author-hint { margin-top: var(--space-1); }
.pt-ib__add { border: 1px dashed var(--color-border); border-radius: var(--radius-lg); padding: var(--space-3) var(--space-4); margin-bottom: var(--space-4); }
.pt-ib__kapchips { display: flex; gap: var(--space-1); flex-wrap: wrap; margin: var(--space-2) 0; }
.pt-ib__text { width: 100%; padding: var(--space-2); border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-surface); color: var(--color-text); margin: var(--space-2) 0; }
.pt-ib__sources { display: flex; gap: var(--space-2); flex-wrap: wrap; }
.pt-ib__list { display: flex; flex-direction: column; gap: var(--space-2); margin: var(--space-3) 0; }
.pt-ib__row { display: flex; align-items: center; gap: var(--space-3); border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: var(--space-2); background: var(--color-surface); }
.pt-ib__row-thumb {
  flex: none; width: 64px; height: 48px; border-radius: var(--radius-sm, 6px);
  background: var(--color-surface-alt) center/cover no-repeat;
  display: flex; align-items: center; justify-content: center; color: var(--color-text-secondary);
}
.pt-ib__row-thumb i, .pt-ib__row-thumb svg { width: 22px; height: 22px; }
.pt-ib__row-body { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.pt-ib__row-kap { font-size: var(--text-xs); color: var(--color-text-secondary); }
.pt-ib__row-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pt-ib__row-acts { display: flex; gap: 2px; }
.pt-ib__act { min-width: 44px; min-height: 44px; padding: var(--space-1); }
.pt-ib__note { margin-top: var(--space-3); }
@media (max-width: 560px) {
  .pt-ib__row-acts { flex-wrap: wrap; max-width: 96px; }
}


/* == Ich-Buch: In-App-Videoaufnahme + Abspiel-Fehler ====================== */
.pt-ib__rec {
  position: fixed; top: 0; left: 0; right: 0; bottom: 0; z-index: 9500;
  background: rgba(8, 14, 22, .96);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: var(--space-4); padding: var(--space-4);
}
.pt-ib__rec-preview { width: 100%; max-width: 640px; max-height: 60vh; border-radius: var(--radius-lg); background: #000; }
.pt-ib__rec-timer { color: #fff; font-size: var(--text-xl); font-weight: var(--font-bold); min-height: 1.4em; }
.pt-ib__rec-row { display: flex; gap: var(--space-3); flex-wrap: wrap; justify-content: center; }
.pt-ib__mediaerr { text-align: center; color: #cfe0f2; padding: var(--space-5); }
.pt-ib__mediaerr i, .pt-ib__mediaerr svg { width: 48px; height: 48px; }
.pt-ib__mediaerr p { margin: var(--space-2) 0 0; }

/* ==========================================================================
   Botschaften-Tafel (Route botschaften) — sprechende Ich-Botschaften
   ========================================================================== */
.pt-say__tabs { margin: var(--space-4) 0 var(--space-3); }
.pt-say__toolbar { display: flex; gap: var(--space-2); flex-wrap: wrap; margin-bottom: var(--space-4); }

.pt-say__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: var(--space-3);
}
.pt-say__grid--erkl { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
.pt-say__item { display: flex; flex-direction: column; gap: var(--space-2); }

.pt-say__tile {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: var(--space-2); text-align: center;
  min-height: 132px; padding: var(--space-4) var(--space-3);
  background: var(--color-surface); color: var(--color-primary);
  border: 2px solid var(--color-border); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm); cursor: pointer;
  transition: transform .12s ease, border-color .12s ease, background .12s ease;
  flex: 1 1 auto;
}
.pt-say__tile:hover, .pt-say__tile:focus-visible {
  border-color: var(--color-primary); background: var(--color-primary-bg);
}
.pt-say__tile.is-speaking { border-color: #10b981; background: rgba(16,185,129,.16); }
.pt-say__sym { display: block; line-height: 0; color: var(--color-primary); }
.pt-say__sym svg { width: 46px; height: 46px; }
.pt-say__text {
  font-size: var(--text-base); font-weight: var(--font-bold);
  line-height: 1.25; color: var(--color-text);
}

.pt-say__erkl {
  display: flex; align-items: flex-start; gap: var(--space-2);
  text-align: left; width: 100%;
  padding: var(--space-2) var(--space-3);
  background: var(--color-surface-alt); color: var(--color-text-secondary);
  border: 1px solid var(--color-border); border-radius: var(--radius-md);
  font-size: var(--text-sm); line-height: 1.35; cursor: pointer;
}
.pt-say__erkl:hover, .pt-say__erkl:focus-visible {
  border-color: var(--color-primary); color: var(--color-text);
}
.pt-say__erkl i, .pt-say__erkl svg { width: 18px; height: 18px; flex: 0 0 auto; margin-top: 2px; color: var(--color-primary); }
.pt-say__foot { margin-top: var(--space-5); }

@media (max-width: 480px) {
  .pt-say__grid { grid-template-columns: repeat(auto-fill, minmax(128px, 1fr)); }
  .pt-say__tile { min-height: 112px; }
  .pt-say__sym svg { width: 40px; height: 40px; }
}

/* Home-Einstieg (Call-to-action) */
.pt-saycta {
  display: flex; align-items: center; gap: var(--space-3); width: 100%; text-align: left;
  padding: var(--space-4); margin: var(--space-4) 0;
  background: var(--color-surface); border: 1px solid var(--color-border);
  border-left: 4px solid var(--color-primary); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm); cursor: pointer;
}
.pt-saycta:hover, .pt-saycta:focus-visible { border-color: var(--color-primary); background: var(--color-primary-bg); }
.pt-saycta__icon { display: flex; align-items: center; justify-content: center; flex: 0 0 auto;
  width: 44px; height: 44px; border-radius: 50%; background: var(--color-primary-bg); color: var(--color-primary); }
.pt-saycta__icon svg { width: 24px; height: 24px; }
.pt-saycta__body { flex: 1 1 auto; }
.pt-saycta__title { display: block; font-weight: var(--font-bold); color: var(--color-text); }
.pt-saycta__desc { display: block; font-size: var(--text-sm); color: var(--color-text-muted); }
.pt-saycta > i, .pt-saycta > svg { flex: 0 0 auto; color: var(--color-text-muted); }

/* Papier-Tafel: nur im Druck sichtbar (siehe print.css) */
.pt-say-print-sheet { display: none; }