/* ═══════════════════════════════════════════════════════════════════
   PUZZLELOGIC DESIGN SYSTEM V1
   STATUS: FROZEN
   Stand: 2026-06-30 · Wölkchen
   Grundlage: Brandboard 3.0 · UI_FREEZE_ERGEBNISDESIGN_V1
   ═══════════════════════════════════════════════════════════════════ */

/* ─── Lokale Fonts (kein Google CDN) ───────────────────────────────── */
@import url('/fonts/fonts.css');


/* ─── Design Tokens ────────────────────────────────────────────────── */
:root {

  /* === FARBEN ======================================================= */

  /* Brand Core */
  --pl-navy:        #1A2A2F;  /* Deep Navy   — Wortmarke, Körper, Puzzleteil */
  --pl-header:      #041d3c;  /* Header Navy — App-Header, Login-Card */
  --pl-lime:        #B7D800;  /* Electric Lime — Akzent, CTA, "logic"-Wortmarke */
  --pl-lime-10:     rgba(183, 216, 0, 0.10);
  --pl-lime-15:     rgba(183, 216, 0, 0.15);
  --pl-lime-20:     rgba(183, 216, 0, 0.20);

  /* Neutral */
  --pl-white-warm:  #F5F3EE;  /* Warm White — App-Body-Hintergrund */
  --pl-white:       #FFFFFF;  /* Pure White — Karten-Hintergrund */
  --pl-border:      #DDD8CE;  /* Warm Border */
  --pl-border-subtle: #EAE7E0;/* Noch schwächere Trenner */
  --pl-muted-bg:    #EDEAE3;  /* Neutral Background — disabled, subtile Bereiche */
  --pl-black:       #111111;  /* Soft Black — Primärtext */
  --pl-muted:       #6B7F85;  /* Muted — Labels, Meta-Text */
  --pl-muted-light: #9AABB0;  /* Heller muted — Placeholder */

  /* Semantisch — Feedback (FROZEN per UI_FREEZE_ERGEBNISDESIGN_V1) */
  --pl-lavender:    #C9C2D9;  /* Dusty Lavender — Fehler, Score 0–49 % */
  --pl-apricot:     #E7B78A;  /* Soft Apricot   — Übersehen, Score 75–89 % */
  --pl-gold:        #D8B63A;  /* Gold/Ocker      — Score 50–74 % */

  /* Score-Stufen FROZEN */
  --pl-score-5:     #B7D800;  /* 90–100 % */
  --pl-score-4:     #E7B78A;  /* 75–89 %  */
  --pl-score-3:     #D8B63A;  /* 50–74 %  */
  --pl-score-2:     #C9C2D9;  /* 25–49 %  */
  --pl-score-1:     #1A2A2F;  /* 0–24 %   */

  /* Feedback-Zustände (Richtig / Übersehen / Falsch) */
  --pl-richtig:        #2A6B2A;
  --pl-richtig-bg:     #EAF6EA;
  --pl-richtig-border: #A8D8A8;
  --pl-uebersehen:     #7A5C00;
  --pl-uebersehen-bg:  #FFF8E1;
  --pl-uebersehen-border: #E8C84A;
  --pl-falsch:         #8B1A1A;
  --pl-falsch-bg:      #FEF0F0;
  --pl-falsch-border:  #E8A0A0;

  /* System-Farben */
  --pl-error:       #C01048;
  --pl-error-bg:    #FFF1F3;
  --pl-error-border:#FECDD6;
  --pl-success:     #027A48;
  --pl-success-bg:  #ECFDF3;
  --pl-success-border: #A9EFC5;


  /* === TYPOGRAFIE =================================================== */

  /* Font Families */
  --pl-font-display: 'Bebas Neue', 'League Spartan', sans-serif;
  /* → Score-Badges, Splash-Headlines, große Kennzahlen */

  --pl-font-heading: 'League Spartan', 'Poppins', sans-serif;
  /* → H1–H3 in der App, Section-Titles, Card-Headlines */

  --pl-font-body:    'Montserrat', -apple-system, BlinkMacSystemFont, sans-serif;
  /* → Fließtext, Labels, Buttons, Meta, alle UI-Texte */

  --pl-font-logo:    'Poppins', sans-serif;
  /* → Nur für das SVG-Logo. Nicht in App-UI verwenden. */

  /* Font Sizes — Mobile First */
  --pl-text-2xs:  0.6875rem; /*  11px — bylines, capslock labels   */
  --pl-text-xs:   0.75rem;   /*  12px — meta, Tags                 */
  --pl-text-sm:   0.8125rem; /*  13px — Labels, Helper-Text        */
  --pl-text-base: 0.9375rem; /*  15px — Standard Fließtext         */
  --pl-text-md:   1rem;      /*  16px — etwas größerer Text        */
  --pl-text-lg:   1.125rem;  /*  18px — Lead-Text, Card-Intro      */
  --pl-text-xl:   1.375rem;  /*  22px — Card-Titles               */
  --pl-text-2xl:  1.75rem;   /*  28px — Section-Headlines         */
  --pl-text-3xl:  2.25rem;   /*  36px — Screen-Titles             */
  --pl-text-4xl:  3rem;      /*  48px — Score-Anzeige             */
  --pl-text-5xl:  4rem;      /*  64px — Splash-Display            */

  /* Font Weights */
  --pl-regular:   400;
  --pl-medium:    500;
  --pl-semibold:  600;
  --pl-bold:      700;

  /* Line Heights */
  --pl-leading-tight:  1.15;
  --pl-leading-snug:   1.3;
  --pl-leading-normal: 1.55;
  --pl-leading-loose:  1.75;

  /* Letter Spacing */
  --pl-tracking-tight:   -0.01em;
  --pl-tracking-normal:   0em;
  --pl-tracking-wide:     0.04em;
  --pl-tracking-wider:    0.08em;
  --pl-tracking-caps:     0.12em;  /* für ALL CAPS Labels */


  /* === ABSTÄNDE ==================================================== */

  --pl-1:   0.25rem;   /*  4px */
  --pl-2:   0.5rem;    /*  8px */
  --pl-3:   0.75rem;   /* 12px */
  --pl-4:   1rem;      /* 16px */
  --pl-5:   1.25rem;   /* 20px */
  --pl-6:   1.5rem;    /* 24px */
  --pl-7:   1.75rem;   /* 28px */
  --pl-8:   2rem;      /* 32px */
  --pl-10:  2.5rem;    /* 40px */
  --pl-12:  3rem;      /* 48px */
  --pl-16:  4rem;      /* 64px */
  --pl-20:  5rem;      /* 80px */
  --pl-24:  6rem;      /* 96px */


  /* === RADIUS ======================================================= */

  --pl-radius-xs:   3px;
  --pl-radius-sm:   6px;
  --pl-radius-md:   10px;
  --pl-radius-lg:   14px;
  --pl-radius-xl:   20px;
  --pl-radius-2xl:  28px;
  --pl-radius-full: 9999px;


  /* === SCHATTEN ===================================================== */

  --pl-shadow-xs:  0 1px 2px rgba(26,42,47,0.06);
  --pl-shadow-sm:  0 1px 4px rgba(26,42,47,0.08), 0 1px 2px rgba(26,42,47,0.05);
  --pl-shadow-md:  0 4px 12px rgba(26,42,47,0.10), 0 2px 4px rgba(26,42,47,0.06);
  --pl-shadow-lg:  0 8px 24px rgba(26,42,47,0.12), 0 4px 8px rgba(26,42,47,0.07);
  --pl-shadow-xl:  0 16px 40px rgba(26,42,47,0.14), 0 6px 12px rgba(26,42,47,0.08);
  --pl-shadow-lime: 0 4px 16px rgba(183,216,0,0.30); /* CTA-Button Hover-Glow */


  /* === ANIMATIONEN ================================================== */

  --pl-dur-fast:    100ms;
  --pl-dur-base:    180ms;
  --pl-dur-slow:    320ms;
  --pl-dur-slower:  480ms;
  --pl-ease:        cubic-bezier(0.4, 0, 0.2, 1);
  --pl-ease-out:    cubic-bezier(0, 0, 0.2, 1);
  --pl-ease-in:     cubic-bezier(0.4, 0, 1, 1);
  --pl-ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);


  /* === LAYOUT ======================================================= */

  --pl-header-h:     72px;
  --pl-max-app:      780px;  /* FormenCheck / Training: max-width */
  --pl-max-card:     680px;  /* Enge Karten-Breite */
  --pl-max-content:  560px;  /* Textblöcke, Paywall */
  --pl-gutter:       1rem;   /* Mobile Seitenabstand */
  --pl-gutter-md:    1.5rem; /* Desktop Seitenabstand */
}


/* ─── Reset ────────────────────────────────────────────────────────── */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-size: 15px;
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  font-family: var(--pl-font-body);
  font-size: var(--pl-text-base);
  font-weight: var(--pl-regular);
  line-height: var(--pl-leading-normal);
  color: var(--pl-black);
  background: var(--pl-white-warm);
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}


/* ─── Typografie ───────────────────────────────────────────────────── */

h1, h2, h3, h4 {
  font-family: var(--pl-font-heading);
  font-weight: var(--pl-bold);
  line-height: var(--pl-leading-snug);
  letter-spacing: var(--pl-tracking-tight);
  color: var(--pl-navy);
}

h1 { font-size: var(--pl-text-2xl); }
h2 { font-size: var(--pl-text-xl); }
h3 { font-size: var(--pl-text-lg); }
h4 { font-size: var(--pl-text-base); }

.pl-display {
  font-family: var(--pl-font-display);
  font-weight: var(--pl-regular); /* Bebas Neue hat nur regular */
  line-height: var(--pl-leading-tight);
  letter-spacing: var(--pl-tracking-wide);
}

.pl-label {
  font-size: var(--pl-text-xs);
  font-weight: var(--pl-semibold);
  letter-spacing: var(--pl-tracking-caps);
  text-transform: uppercase;
  color: var(--pl-muted);
}

p { line-height: var(--pl-leading-normal); }

small, .pl-small {
  font-size: var(--pl-text-sm);
  color: var(--pl-muted);
}


/* ─── App Shell ────────────────────────────────────────────────────── */

.pl-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: var(--pl-header-h);
  background: var(--pl-header);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 var(--pl-6);
  z-index: 100;
  box-shadow: 0 1px 0 rgba(255,255,255,0.07);
}

.pl-header__logo {
  height: 40px;
  width: auto;
}

.pl-header__account {
  width: 36px;
  height: 36px;
  border-radius: var(--pl-radius-full);
  background: rgba(255,255,255,0.12);
  border: 1.5px solid rgba(255,255,255,0.20);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background var(--pl-dur-base) var(--pl-ease);
  color: var(--pl-white-warm);
}

.pl-header__account:hover {
  background: rgba(255,255,255,0.20);
}

.pl-app-body {
  padding-top: var(--pl-header-h);
  min-height: 100vh;
}

.pl-page {
  width: 100%;
  max-width: var(--pl-max-app);
  margin: 0 auto;
  padding: var(--pl-8) var(--pl-gutter) var(--pl-16);
}


/* ─── Cards ────────────────────────────────────────────────────────── */

.pl-card {
  background: var(--pl-white);
  border-radius: var(--pl-radius-lg);
  border: 1px solid var(--pl-border);
  box-shadow: var(--pl-shadow-sm);
  padding: var(--pl-6);
}

.pl-card--flat {
  box-shadow: none;
}

.pl-card--elevated {
  box-shadow: var(--pl-shadow-md);
  border: none;
}


/* ─── Buttons ──────────────────────────────────────────────────────── */

.pl-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--pl-2);
  font-family: var(--pl-font-body);
  font-size: var(--pl-text-base);
  font-weight: var(--pl-semibold);
  line-height: 1;
  padding: 0.8em 1.6em;
  border-radius: var(--pl-radius-md);
  border: none;
  cursor: pointer;
  text-decoration: none;
  transition:
    background var(--pl-dur-base) var(--pl-ease),
    box-shadow var(--pl-dur-base) var(--pl-ease),
    opacity var(--pl-dur-base) var(--pl-ease),
    transform var(--pl-dur-fast) var(--pl-ease);
  white-space: nowrap;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}

.pl-btn:active { transform: scale(0.98); }

/* Primär — Lime CTA */
.pl-btn--primary {
  background: var(--pl-lime);
  color: var(--pl-navy);
}
.pl-btn--primary:hover {
  background: #C5E800;
  box-shadow: var(--pl-shadow-lime);
}
.pl-btn--primary:focus-visible {
  outline: 3px solid var(--pl-lime);
  outline-offset: 2px;
}

/* Sekundär — Navy */
.pl-btn--secondary {
  background: var(--pl-navy);
  color: var(--pl-white-warm);
}
.pl-btn--secondary:hover {
  background: #253B42;
}

/* Ghost */
.pl-btn--ghost {
  background: transparent;
  color: var(--pl-navy);
  border: 1.5px solid var(--pl-border);
}
.pl-btn--ghost:hover {
  background: var(--pl-muted-bg);
  border-color: var(--pl-muted);
}

/* Danger */
.pl-btn--danger {
  background: transparent;
  color: var(--pl-error);
  border: 1.5px solid var(--pl-error-border);
}
.pl-btn--danger:hover {
  background: var(--pl-error-bg);
}

/* Größen */
.pl-btn--sm  { font-size: var(--pl-text-sm);  padding: 0.6em 1.2em; border-radius: var(--pl-radius-sm); }
.pl-btn--lg  { font-size: var(--pl-text-md);  padding: 1em 2em; }
.pl-btn--full { width: 100%; }

/* States */
.pl-btn:disabled,
.pl-btn--disabled {
  opacity: 0.45;
  cursor: not-allowed;
  pointer-events: none;
}

.pl-btn--loading {
  position: relative;
  color: transparent;
  pointer-events: none;
}
.pl-btn--loading::after {
  content: '';
  position: absolute;
  width: 1em;
  height: 1em;
  border: 2px solid currentColor;
  border-top-color: transparent;
  border-radius: 50%;
  animation: pl-spin 0.6s linear infinite;
  color: var(--pl-navy);
}
@keyframes pl-spin { to { transform: rotate(360deg); } }


/* ─── Chips (Merkmal-Auswahl) ──────────────────────────────────────── */

.pl-chip-group {
  display: flex;
  flex-wrap: wrap;
  gap: var(--pl-2);
  margin-bottom: var(--pl-3);
}

.pl-chip-group__label {
  display: block;
  font-size: var(--pl-text-xs);
  font-weight: var(--pl-semibold);
  letter-spacing: var(--pl-tracking-caps);
  text-transform: uppercase;
  color: var(--pl-muted);
  margin-bottom: var(--pl-2);
}

.pl-chip {
  display: inline-flex;
  align-items: center;
  font-family: var(--pl-font-body);
  font-size: var(--pl-text-sm);
  font-weight: var(--pl-medium);
  padding: 0.45em 0.9em;
  border-radius: var(--pl-radius-full);
  border: 1.5px solid var(--pl-border);
  background: var(--pl-white);
  color: var(--pl-navy);
  cursor: pointer;
  user-select: none;
  transition:
    background var(--pl-dur-fast) var(--pl-ease),
    border-color var(--pl-dur-fast) var(--pl-ease),
    color var(--pl-dur-fast) var(--pl-ease),
    box-shadow var(--pl-dur-fast) var(--pl-ease);
  -webkit-tap-highlight-color: transparent;
  min-height: 36px;
  min-width: 44px;
  justify-content: center;
}

.pl-chip:hover {
  border-color: var(--pl-muted);
  background: var(--pl-muted-bg);
}

.pl-chip--selected {
  background: var(--pl-navy);
  border-color: var(--pl-navy);
  color: var(--pl-white-warm);
  box-shadow: var(--pl-shadow-xs);
}

.pl-chip--selected:hover {
  background: #253B42;
  border-color: #253B42;
}

.pl-chip--disabled {
  opacity: 0.4;
  cursor: not-allowed;
  pointer-events: none;
}


/* ─── Eingabefelder ────────────────────────────────────────────────── */

.pl-field {
  margin-bottom: var(--pl-4);
}

.pl-label-text {
  display: block;
  font-size: var(--pl-text-sm);
  font-weight: var(--pl-medium);
  color: var(--pl-navy);
  margin-bottom: var(--pl-2);
}

.pl-input {
  width: 100%;
  font-family: var(--pl-font-body);
  font-size: var(--pl-text-base);
  padding: 0.7em 0.85em;
  border: 1.5px solid var(--pl-border);
  border-radius: var(--pl-radius-md);
  background: var(--pl-white);
  color: var(--pl-black);
  outline: none;
  transition:
    border-color var(--pl-dur-base) var(--pl-ease),
    box-shadow var(--pl-dur-base) var(--pl-ease);
}

.pl-input::placeholder { color: var(--pl-muted-light); }

.pl-input:focus {
  border-color: var(--pl-navy);
  box-shadow: 0 0 0 3px rgba(26,42,47,0.10);
}

.pl-input:focus.pl-input--lime {
  border-color: var(--pl-lime);
  box-shadow: 0 0 0 3px var(--pl-lime-15);
}

.pl-input--error {
  border-color: var(--pl-error);
}
.pl-input--error:focus {
  box-shadow: 0 0 0 3px rgba(192,16,72,0.12);
}

.pl-field-hint {
  font-size: var(--pl-text-xs);
  color: var(--pl-muted);
  margin-top: var(--pl-1);
}
.pl-field-error {
  font-size: var(--pl-text-xs);
  color: var(--pl-error);
  margin-top: var(--pl-1);
}


/* ─── Form-Card (Trainingseinheit) ─────────────────────────────────── */

.pl-form-card {
  background: var(--pl-white);
  border-radius: var(--pl-radius-xl);
  border: 1px solid var(--pl-border);
  box-shadow: var(--pl-shadow-md);
  padding: var(--pl-6) var(--pl-6) var(--pl-8);
  max-width: var(--pl-max-card);
  margin: 0 auto;
}

.pl-form-card__progress {
  display: flex;
  align-items: center;
  gap: var(--pl-3);
  margin-bottom: var(--pl-6);
}

.pl-form-card__progress-track {
  flex: 1;
  height: 4px;
  background: var(--pl-muted-bg);
  border-radius: var(--pl-radius-full);
  overflow: hidden;
}

.pl-form-card__progress-fill {
  height: 100%;
  background: var(--pl-lime);
  border-radius: var(--pl-radius-full);
  transition: width var(--pl-dur-slow) var(--pl-ease-out);
}

.pl-form-card__progress-label {
  font-size: var(--pl-text-xs);
  font-weight: var(--pl-semibold);
  color: var(--pl-muted);
  white-space: nowrap;
}

.pl-form-card__word {
  font-family: var(--pl-font-heading);
  font-size: var(--pl-text-4xl);
  font-weight: var(--pl-bold);
  color: var(--pl-navy);
  letter-spacing: var(--pl-tracking-tight);
  text-align: center;
  padding: var(--pl-6) 0 var(--pl-5);
  line-height: var(--pl-leading-tight);
}

.pl-form-card__instruction {
  font-size: var(--pl-text-sm);
  color: var(--pl-muted);
  text-align: center;
  margin-bottom: var(--pl-5);
}

.pl-form-card__groups {
  display: flex;
  flex-direction: column;
  gap: var(--pl-4);
  margin-bottom: var(--pl-6);
}

/* Bedeutungsfeld */
.pl-form-card__meaning {
  margin-bottom: var(--pl-6);
}


/* ─── Feedback-Zeilen (nach Bestätigung) ───────────────────────────── */

.pl-feedback-list {
  display: flex;
  flex-direction: column;
  gap: var(--pl-2);
  margin: var(--pl-5) 0;
}

.pl-feedback-row {
  display: flex;
  align-items: flex-start;
  gap: var(--pl-3);
  padding: var(--pl-3) var(--pl-4);
  border-radius: var(--pl-radius-md);
  font-size: var(--pl-text-sm);
  font-weight: var(--pl-medium);
  border: 1px solid transparent;
}

.pl-feedback-row__icon {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  border-radius: var(--pl-radius-full);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: var(--pl-bold);
  margin-top: 1px;
}

.pl-feedback-row--richtig {
  background: var(--pl-richtig-bg);
  border-color: var(--pl-richtig-border);
  color: var(--pl-richtig);
}
.pl-feedback-row--richtig .pl-feedback-row__icon {
  background: var(--pl-richtig);
  color: #fff;
}

.pl-feedback-row--uebersehen {
  background: var(--pl-uebersehen-bg);
  border-color: var(--pl-uebersehen-border);
  color: var(--pl-uebersehen);
}
.pl-feedback-row--uebersehen .pl-feedback-row__icon {
  background: var(--pl-uebersehen);
  color: #fff;
}

.pl-feedback-row--falsch {
  background: var(--pl-falsch-bg);
  border-color: var(--pl-falsch-border);
  color: var(--pl-falsch);
}
.pl-feedback-row--falsch .pl-feedback-row__icon {
  background: var(--pl-falsch);
  color: #fff;
}


/* ─── Score Badge ───────────────────────────────────────────────────── */

.pl-score-badge {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: var(--pl-8) var(--pl-6);
}

.pl-score-badge__number {
  font-family: var(--pl-font-display);
  font-size: var(--pl-text-5xl);
  line-height: 1;
  letter-spacing: var(--pl-tracking-wide);
}

.pl-score-badge__label {
  font-family: var(--pl-font-heading);
  font-size: var(--pl-text-lg);
  font-weight: var(--pl-semibold);
  margin-top: var(--pl-2);
  letter-spacing: var(--pl-tracking-tight);
}

/* Score-Farben */
.pl-score-badge--5 .pl-score-badge__number,
.pl-score-badge--5 .pl-score-badge__label { color: var(--pl-score-5); }

.pl-score-badge--4 .pl-score-badge__number,
.pl-score-badge--4 .pl-score-badge__label { color: var(--pl-score-4); }

.pl-score-badge--3 .pl-score-badge__number,
.pl-score-badge--3 .pl-score-badge__label { color: var(--pl-score-3); }

.pl-score-badge--2 .pl-score-badge__number,
.pl-score-badge--2 .pl-score-badge__label { color: var(--pl-score-2); }

.pl-score-badge--1 .pl-score-badge__number,
.pl-score-badge--1 .pl-score-badge__label { color: var(--pl-score-1); }


/* ─── Lernkompass (Kompetenz-Balken) ───────────────────────────────── */

.pl-kompass {
  display: flex;
  flex-direction: column;
  gap: var(--pl-3);
}

.pl-kompass__row {
  display: grid;
  grid-template-columns: 100px 1fr 40px;
  align-items: center;
  gap: var(--pl-3);
}

.pl-kompass__category {
  font-size: var(--pl-text-sm);
  font-weight: var(--pl-medium);
  color: var(--pl-navy);
  white-space: nowrap;
}

.pl-kompass__track {
  height: 8px;
  background: var(--pl-muted-bg);
  border-radius: var(--pl-radius-full);
  overflow: hidden;
}

.pl-kompass__fill {
  height: 100%;
  border-radius: var(--pl-radius-full);
  transition: width var(--pl-dur-slower) var(--pl-ease-out);
}

/* Farben nach Score-Stufe */
.pl-kompass__fill--5 { background: var(--pl-score-5); }
.pl-kompass__fill--4 { background: var(--pl-score-4); }
.pl-kompass__fill--3 { background: var(--pl-score-3); }
.pl-kompass__fill--2 { background: var(--pl-score-2); }
.pl-kompass__fill--1 { background: var(--pl-score-1); }

.pl-kompass__pct {
  font-size: var(--pl-text-xs);
  font-weight: var(--pl-semibold);
  color: var(--pl-muted);
  text-align: right;
}


/* ─── Badges ────────────────────────────────────────────────────────── */

.pl-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--pl-1);
  font-size: var(--pl-text-xs);
  font-weight: var(--pl-semibold);
  letter-spacing: var(--pl-tracking-wide);
  padding: 0.3em 0.7em;
  border-radius: var(--pl-radius-full);
  white-space: nowrap;
}

.pl-badge--trial {
  background: var(--pl-apricot);
  color: var(--pl-navy);
}

.pl-badge--premium {
  background: var(--pl-lime);
  color: var(--pl-navy);
}

.pl-badge--soon {
  background: var(--pl-muted-bg);
  color: var(--pl-muted);
}

.pl-badge--streak {
  background: var(--pl-gold);
  color: var(--pl-navy);
}


/* ─── Divider ───────────────────────────────────────────────────────── */

.pl-divider {
  height: 1px;
  background: var(--pl-border-subtle);
  margin: var(--pl-6) 0;
}


/* ─── Bottom Sheet ──────────────────────────────────────────────────── */

.pl-overlay {
  position: fixed;
  inset: 0;
  background: rgba(4,29,60,0.55);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  z-index: 200;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--pl-dur-slow) var(--pl-ease);
}

.pl-overlay--visible {
  opacity: 1;
  pointer-events: all;
}

.pl-bottom-sheet {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: var(--pl-white);
  border-radius: var(--pl-radius-2xl) var(--pl-radius-2xl) 0 0;
  padding: var(--pl-2) var(--pl-6) var(--pl-10);
  z-index: 210;
  transform: translateY(100%);
  transition: transform var(--pl-dur-slow) var(--pl-ease-out);
  max-width: var(--pl-max-app);
  margin: 0 auto;
  box-shadow: 0 -8px 40px rgba(26,42,47,0.16);
}

.pl-bottom-sheet--open {
  transform: translateY(0);
}

.pl-bottom-sheet__handle {
  width: 36px;
  height: 4px;
  background: var(--pl-border);
  border-radius: var(--pl-radius-full);
  margin: var(--pl-3) auto var(--pl-5);
}

/* Desktop: Modal statt Bottom Sheet */
@media (min-width: 768px) {
  .pl-bottom-sheet {
    position: fixed;
    inset: 50% auto auto 50%;
    transform: translate(-50%, calc(-50% + 20px));
    bottom: auto;
    border-radius: var(--pl-radius-xl);
    max-width: 480px;
    width: calc(100% - 2rem);
    padding: var(--pl-8);
  }
  .pl-bottom-sheet--open {
    transform: translate(-50%, -50%);
  }
  .pl-bottom-sheet__handle { display: none; }
}


/* ─── Trial-Zähler ──────────────────────────────────────────────────── */

.pl-trial-counter {
  display: flex;
  align-items: center;
  gap: var(--pl-2);
  font-size: var(--pl-text-xs);
  font-weight: var(--pl-medium);
  color: var(--pl-muted);
  padding: var(--pl-2) var(--pl-3);
  background: var(--pl-muted-bg);
  border-radius: var(--pl-radius-full);
}


/* ─── Alert / Inline-Meldungen ──────────────────────────────────────── */

.pl-alert {
  display: flex;
  gap: var(--pl-3);
  padding: var(--pl-3) var(--pl-4);
  border-radius: var(--pl-radius-md);
  font-size: var(--pl-text-sm);
  border: 1px solid transparent;
}

.pl-alert--error {
  background: var(--pl-error-bg);
  border-color: var(--pl-error-border);
  color: var(--pl-error);
}

.pl-alert--success {
  background: var(--pl-success-bg);
  border-color: var(--pl-success-border);
  color: var(--pl-success);
}


/* ─── Responsive ────────────────────────────────────────────────────── */

@media (min-width: 768px) {
  :root {
    --pl-gutter: var(--pl-gutter-md);
  }

  .pl-page {
    padding: var(--pl-10) var(--pl-gutter-md) var(--pl-16);
  }

  .pl-form-card {
    padding: var(--pl-8);
  }

  .pl-form-card__word {
    font-size: 3.5rem;
  }

  .pl-kompass__row {
    grid-template-columns: 120px 1fr 45px;
  }
}

/* Touch targets — mindestens 44×44px */
@media (pointer: coarse) {
  .pl-chip   { min-height: 44px; min-width: 44px; }
  .pl-btn    { min-height: 48px; }
  .pl-input  { min-height: 48px; }
}


/* ─── Utilities ─────────────────────────────────────────────────────── */

.pl-text-center { text-align: center; }
.pl-text-muted  { color: var(--pl-muted); }
.pl-text-navy   { color: var(--pl-navy); }
.pl-text-lime   { color: var(--pl-lime); }

.pl-mt-auto { margin-top: auto; }
.pl-w-full  { width: 100%; }

.pl-visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}

/* ═══════════════════════════════════════════════════════════════════
   Ende PUZZLELOGIC DESIGN SYSTEM V1
   ═══════════════════════════════════════════════════════════════════ */