/* ============================================================================
   INNOVATURA — Entdecker (Project Discovery)
   Single-scroll creative conversation
   ============================================================================ */

/* Layer-Reihenfolge fixieren (projekt/entdecker-Chunk lädt vor dem Shared-Chunk). */
@layer tokens, reset, base, components, sections, animations, entdecker;

@layer entdecker {

  /* ======================== LAYOUT ======================== */
  .ent__header {
    position: sticky;
    top: 0;
    z-index: 100;
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: var(--nav-height);
    padding-inline: var(--gutter);
    border-bottom: 1px solid var(--color-border);
    backdrop-filter: blur(12px) saturate(180%);
    -webkit-backdrop-filter: blur(12px) saturate(180%);
    background: color-mix(in srgb, var(--color-surface) 80%, transparent);
  }

  .ent__logo {
    font-size: 1rem;
    font-weight: 600;
    letter-spacing: -.01em;
    color: var(--color-primary);
    text-decoration: none;
  }

  /* ======================== HEADER RIGHT ======================== */
  .ent__header-right {
    display: flex;
    align-items: center;
    gap: var(--space-md);
  }

  /* ======================== PROGRESS BAR ======================== */
  .ent__progress {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
  }

  .ent__progress-label {
    font-size: var(--text-label);
    font-weight: 600;
    color: var(--color-neutral);
    letter-spacing: var(--tracking-label);
    white-space: nowrap;
  }

  /* Hide progress label on very narrow, keep bar */
  @media (max-width: 360px) {
    .ent__progress-label { display: none; }
  }

  .ent__progress-bar {
    width: 6rem;
    height: 3px;
    background: var(--color-border);
    border-radius: var(--radius-full);
    overflow: hidden;
  }

  .ent__progress-fill {
    height: 100%;
    /* Fill-Breite kommt aus --ent-pct (JS setzt sie per setProperty — CSP-sicher,
       im Gegensatz zu style.width, das style-src 'self' blockiert). */
    width: var(--ent-pct, 0%);
    background: var(--color-accent);
    border-radius: var(--radius-full);
    transition: width var(--duration-normal) var(--ease-spring);
  }

  .ent__main {
    max-width: var(--content-width);
    margin-inline: auto;
    padding: 0 var(--gutter);
  }

  .ent__footer {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: var(--space-xs) var(--space-sm);
    padding: var(--space-xl) var(--gutter);
    margin-top: var(--space-5xl);
    border-top: 1px solid var(--color-border);
    font-size: var(--text-small);
    color: var(--color-neutral);
  }

  .ent__footer-link {
    color: var(--color-neutral);
    text-decoration: none;
    transition: color var(--duration-fast) ease;
  }

  .ent__footer-link:hover {
    color: var(--color-accent-deep);
  }

  .ent__footer-sep {
    opacity: 0.9;
  }

  .ent__reset {
    font-family: var(--font-primary);
    font-size: var(--text-small);
    color: var(--color-neutral);
    transition: opacity var(--duration-fast) ease, color var(--duration-fast) ease;
  }

  .ent__reset:hover {
    opacity: 1;
    color: var(--color-error);
  }

  .ent__reset-header {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border-radius: var(--radius-full);
    color: var(--color-neutral);
    opacity: 0.5;
    transition: opacity var(--duration-fast) ease, color var(--duration-fast) ease, background var(--duration-fast) ease;
  }

  .ent__reset-header:hover {
    opacity: 1;
    color: var(--color-error);
    background: color-mix(in srgb, var(--color-error) 8%, transparent);
  }

  /* ======================== INTRO ======================== */
  .ent__intro {
    padding: var(--space-5xl) 0 var(--space-3xl);
    text-align: center;
  }

  .ent__hero-title {
    font-size: var(--text-hero);
    font-weight: 600;
    line-height: var(--leading-tight);
    letter-spacing: var(--tracking-tight);
    margin-bottom: var(--space-md);
    opacity: 0;
    transform: translateY(1.5rem);
    animation: entReveal 0.8s var(--ease-enter) 0.1s forwards;
  }

  .ent__hero-sub {
    font-size: var(--text-body);
    color: var(--color-neutral);
    line-height: var(--leading-body);
    max-width: var(--measure);
    margin-inline: auto;
    opacity: 0;
    animation: entReveal 0.6s var(--ease-enter) 0.5s forwards;
  }

  .ent__hero-badge {
    display: inline-block;
    margin-top: var(--space-lg);
    padding: var(--space-sm) var(--space-lg);
    font-size: var(--text-small);
    font-weight: 600;
    letter-spacing: var(--tracking-label);
    /* deep-hover tone: deep lands at 4.49:1 on the muted-orange badge bg */
    color: var(--color-accent-deep-hover);
    background: var(--color-accent-muted);
    border-radius: var(--radius-full);
    opacity: 0;
    animation: entReveal 0.5s var(--ease-enter) 0.9s forwards;
  }

  @keyframes entReveal {
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

  /* ======================== CHAPTER NUMBER ======================== */
  .ent__chapter-num {
    font-family: var(--font-mono);
    font-size: clamp(3rem, 6vw, 5rem);
    font-weight: 700;
    color: var(--color-accent-muted);
    line-height: 1;
    letter-spacing: -0.02em;
    margin-bottom: var(--space-lg);
    user-select: none;
  }
  /* Ghost number is pure decoration (WCAG 1.4.3 exempt): rendered via CSS
     content from data-num so it never counts as document text. */
  .ent__chapter-num::before {
    content: attr(data-num);
  }

  /* ======================== CHAPTERS ======================== */
  .ent__chapter {
    padding: var(--space-4xl) 0;
    border-top: 1px solid var(--color-border);
    opacity: 1;
    transition: opacity var(--duration-slow) var(--ease-enter);
  }

  .ent__chapter--locked {
    opacity: 0;
    pointer-events: none;
    max-height: 0;
    overflow: hidden;
    padding: 0;
    border: none;
    transition: opacity var(--duration-slow) var(--ease-enter),
                max-height var(--duration-slow) var(--ease-enter),
                padding var(--duration-slow) var(--ease-enter);
  }

  .ent__chapter--revealed {
    opacity: 1;
    pointer-events: auto;
    max-height: none;
    overflow: visible;
    padding: var(--space-4xl) 0;
    border-top: 1px solid var(--color-border);
  }

  /* ======================== JAN'S VOICE ======================== */
  .ent__voice {
    margin-bottom: var(--space-2xl);
  }

  .ent__voice p {
    font-size: clamp(1.25rem, 1.5vw + 0.5rem, 1.75rem);
    font-weight: 500;
    line-height: var(--leading-section);
    color: var(--color-primary);
    max-width: 30ch;
    position: relative;
    padding-left: var(--space-lg);
  }

  .ent__voice p::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0.15em;
    bottom: 0.15em;
    width: 3px;
    background: var(--color-accent);
    border-radius: var(--radius-full);
  }

  /* ======================== FIELDS ======================== */
  .ent__fields {
    display: flex;
    flex-direction: column;
    gap: var(--space-2xl);
  }

  .ent__field {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
  }

  .ent__label {
    font-size: var(--text-small);
    font-weight: 600;
    color: var(--color-neutral);
    letter-spacing: var(--tracking-label);
    text-transform: uppercase;
  }

  .ent__optional {
    font-weight: 400;
    text-transform: none;
    letter-spacing: normal;
  }

  .ent__req {
    font-weight: 400;
    text-transform: none;
    letter-spacing: normal;
    color: var(--color-accent-deep);
  }

  .ent__fieldnote {
    font-size: var(--text-small);
    color: var(--color-neutral);
    line-height: 1.5;
  }
  .ent__fieldnote a {
    color: var(--color-accent-deep);
  }

  .ent__input {
    width: 100%;
    padding: 0.75rem 0;
    background: transparent;
    border: none;
    border-bottom: 2px solid var(--color-border);
    font-family: var(--font-primary);
    font-size: var(--text-body);
    color: var(--color-primary);
    transition: border-color var(--duration-fast) ease;
  }

  .ent__input:focus {
    outline: none;
    border-bottom-color: var(--color-accent);
  }

  .ent__input::placeholder {
    color: var(--color-neutral);
    opacity: 0.5;
  }

  .ent__input--error {
    border-bottom-color: var(--color-error);
  }

  .ent__error {
    font-size: var(--text-small);
    color: var(--color-error);
    min-height: 1rem;
  }

  /* Textarea */
  .ent__textarea {
    width: 100%;
    min-height: 100px;
    padding: var(--space-md);
    background: transparent;
    border: 2px solid var(--color-border);
    border-radius: var(--radius-md);
    font-family: var(--font-primary);
    font-size: var(--text-body);
    color: var(--color-primary);
    resize: vertical;
    transition: border-color var(--duration-fast) ease;
  }

  .ent__textarea:focus {
    outline: none;
    border-color: var(--color-accent);
  }

  .ent__textarea::placeholder {
    color: var(--color-neutral);
    opacity: 0.5;
  }

  /* ======================== CUSTOM TOGGLES ======================== */
  .ent__custom-toggle {
    margin-top: var(--space-xs);
  }

  .ent__custom-btn {
    background: none;
    border: 1px dashed var(--color-border);
    border-radius: var(--radius-full);
    padding: var(--space-xs) var(--space-md);
    font-family: var(--font-primary);
    font-size: var(--text-small);
    color: var(--color-neutral);
    cursor: pointer;
    transition: all var(--duration-fast) ease;
  }

  .ent__custom-btn:hover {
    border-color: var(--color-accent);
    color: var(--color-accent-deep);
  }

  .ent__input--custom,
  .ent__textarea--custom {
    margin-top: var(--space-sm);
  }

  /* ======================== PILLS ======================== */
  .ent__pills {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-sm);
  }

  .ent__pill {
    padding: var(--space-sm) var(--space-lg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-full);
    font-size: var(--text-small);
    font-weight: 600;
    cursor: pointer;
    transition: all var(--duration-fast) ease;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    background: transparent;
    color: var(--color-primary);
  }

  .ent__pill:hover {
    border-color: var(--color-accent);
    color: var(--color-accent-deep);
  }

  .ent__pill[aria-checked="true"] {
    background: var(--color-accent-deep);
    color: var(--farbe-flaeche-1);
    border-color: var(--color-accent);
  }

  /* ======================== COLOR PALETTES ======================== */
  .ent__palettes {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(8.5rem, 1fr));
    gap: var(--space-md);
  }

  .ent__palette {
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
    padding: var(--space-sm);
    border: 2px solid var(--color-border);
    border-radius: var(--radius-lg);
    cursor: pointer;
    transition: border-color var(--duration-fast) ease, box-shadow var(--duration-fast) ease, transform var(--duration-fast) ease, background var(--duration-fast) ease;
    background: transparent;
    text-align: center;
    min-height: 44px;
  }

  .ent__palette:hover {
    border-color: var(--color-accent);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px var(--farbe-schleier);
  }

  .ent__palette[aria-checked="true"] {
    border-color: var(--color-accent);
    box-shadow: 0 0 0 2px var(--color-accent), 0 4px 16px var(--farbe-schatten);
    background: var(--color-accent-muted);
  }

  .ent__palette-colors {
    display: flex;
    gap: 0;
    border-radius: var(--radius-sm);
    overflow: hidden;
    height: 3.5rem;
  }

  .ent__palette-colors span {
    flex: 1;
  }

  /* Swatch-Farben als CSS (statt Inline-style="background:#..", das style-src 'self'
     blockiert → sonst transparente Swatches). Positionsbasiert: data-value + nth-child. */
  .ent__palette[data-value="warm_natur"] .ent__palette-colors span:nth-child(1){background:#7D5A3C}
  .ent__palette[data-value="warm_natur"] .ent__palette-colors span:nth-child(2){background:#B8926A}
  .ent__palette[data-value="warm_natur"] .ent__palette-colors span:nth-child(3){background:#DBC8A9}
  .ent__palette[data-value="warm_natur"] .ent__palette-colors span:nth-child(4){background:#F2ECE4}
  .ent__palette[data-value="frisch_blau"] .ent__palette-colors span:nth-child(1){background:#1A5276}
  .ent__palette[data-value="frisch_blau"] .ent__palette-colors span:nth-child(2){background:#2E86C1}
  .ent__palette[data-value="frisch_blau"] .ent__palette-colors span:nth-child(3){background:#85C1E9}
  .ent__palette[data-value="frisch_blau"] .ent__palette-colors span:nth-child(4){background:#EBF5FB}
  .ent__palette[data-value="gruen_organisch"] .ent__palette-colors span:nth-child(1){background:#1E5631}
  .ent__palette[data-value="gruen_organisch"] .ent__palette-colors span:nth-child(2){background:#4E8D4E}
  .ent__palette[data-value="gruen_organisch"] .ent__palette-colors span:nth-child(3){background:#A8D5A2}
  .ent__palette[data-value="gruen_organisch"] .ent__palette-colors span:nth-child(4){background:#F0F4E8}
  .ent__palette[data-value="zart_pastell"] .ent__palette-colors span:nth-child(1){background:#E8B4CB}
  .ent__palette[data-value="zart_pastell"] .ent__palette-colors span:nth-child(2){background:#B5A8D5}
  .ent__palette[data-value="zart_pastell"] .ent__palette-colors span:nth-child(3){background:#A8D8C8}
  .ent__palette[data-value="zart_pastell"] .ent__palette-colors span:nth-child(4){background:#FFF5EE}
  .ent__palette[data-value="schwarz_weiss"] .ent__palette-colors span:nth-child(1){background:#1A1A1A}
  .ent__palette[data-value="schwarz_weiss"] .ent__palette-colors span:nth-child(2){background:#555}
  .ent__palette[data-value="schwarz_weiss"] .ent__palette-colors span:nth-child(3){background:#BBB}
  .ent__palette[data-value="schwarz_weiss"] .ent__palette-colors span:nth-child(4){background:#F8F8F8}
  .ent__palette[data-value="kraeftig_bunt"] .ent__palette-colors span:nth-child(1){background:#E63946}
  .ent__palette[data-value="kraeftig_bunt"] .ent__palette-colors span:nth-child(2){background:#F4A261}
  .ent__palette[data-value="kraeftig_bunt"] .ent__palette-colors span:nth-child(3){background:#2A9D8F}
  .ent__palette[data-value="kraeftig_bunt"] .ent__palette-colors span:nth-child(4){background:#264653}
  .ent__palette[data-value="dunkel_edel"] .ent__palette-colors span:nth-child(1){background:#1A1A2E}
  .ent__palette[data-value="dunkel_edel"] .ent__palette-colors span:nth-child(2){background:#2D2D44}
  .ent__palette[data-value="dunkel_edel"] .ent__palette-colors span:nth-child(3){background:#C9A96E}
  .ent__palette[data-value="dunkel_edel"] .ent__palette-colors span:nth-child(4){background:#F0E6D3}
  .ent__palette[data-value="terrakotta"] .ent__palette-colors span:nth-child(1){background:#8B3A2F}
  .ent__palette[data-value="terrakotta"] .ent__palette-colors span:nth-child(2){background:#C46B4A}
  .ent__palette[data-value="terrakotta"] .ent__palette-colors span:nth-child(3){background:#E8A87C}
  .ent__palette[data-value="terrakotta"] .ent__palette-colors span:nth-child(4){background:#FAF0E6}
  .ent__palette[data-value="ozean"] .ent__palette-colors span:nth-child(1){background:#0B3D4E}
  .ent__palette[data-value="ozean"] .ent__palette-colors span:nth-child(2){background:#1B7A6E}
  .ent__palette[data-value="ozean"] .ent__palette-colors span:nth-child(3){background:#76C7B7}
  .ent__palette[data-value="ozean"] .ent__palette-colors span:nth-child(4){background:#F5E6CA}
  .ent__palette[data-value="rosa_gold"] .ent__palette-colors span:nth-child(1){background:#B76E79}
  .ent__palette[data-value="rosa_gold"] .ent__palette-colors span:nth-child(2){background:#E8C4C8}
  .ent__palette[data-value="rosa_gold"] .ent__palette-colors span:nth-child(3){background:#C9A96E}
  .ent__palette[data-value="rosa_gold"] .ent__palette-colors span:nth-child(4){background:#FDF6F0}
  .ent__palette[data-value="lavendel"] .ent__palette-colors span:nth-child(1){background:#5B4A7A}
  .ent__palette[data-value="lavendel"] .ent__palette-colors span:nth-child(2){background:#9B8EC4}
  .ent__palette[data-value="lavendel"] .ent__palette-colors span:nth-child(3){background:#87A98F}
  .ent__palette[data-value="lavendel"] .ent__palette-colors span:nth-child(4){background:#F4F1F8}
  .ent__palette[data-value="sonnenuntergang"] .ent__palette-colors span:nth-child(1){background:#5C2751}
  .ent__palette[data-value="sonnenuntergang"] .ent__palette-colors span:nth-child(2){background:#D1435B}
  .ent__palette[data-value="sonnenuntergang"] .ent__palette-colors span:nth-child(3){background:#F4845F}
  .ent__palette[data-value="sonnenuntergang"] .ent__palette-colors span:nth-child(4){background:#F7DC6F}

  .ent__noscript { padding: 2rem; text-align: center; }

  .ent__palette-name {
    font-size: var(--text-label);
    font-weight: 600;
    color: var(--color-neutral);
    letter-spacing: var(--tracking-label);
    padding-top: 0.1rem;
  }

  /* ======================== FONT PREVIEWS ======================== */
  .ent__fonts {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr));
    gap: var(--space-md);
  }

  .ent__font-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--space-sm);
    padding: var(--space-xl) var(--space-sm) var(--space-md);
    border: 2px solid var(--color-border);
    border-radius: var(--radius-lg);
    cursor: pointer;
    transition: border-color var(--duration-fast) ease, box-shadow var(--duration-fast) ease, transform var(--duration-fast) ease, background var(--duration-fast) ease;
    background: transparent;
    text-align: center;
    min-height: 5.5rem;
    overflow: hidden;
  }

  .ent__font-card:hover {
    border-color: var(--color-accent);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px var(--farbe-schleier);
  }

  .ent__font-card[aria-checked="true"] {
    border-color: var(--color-accent);
    box-shadow: 0 0 0 2px var(--color-accent), 0 4px 16px var(--farbe-schatten);
    background: var(--color-accent-muted);
  }

  .ent__font-sample {
    font-size: clamp(1.2rem, 2vw, 1.6rem);
    line-height: 1.2;
    color: var(--color-primary);
    max-width: 100%;
    white-space: nowrap;
  }

  .ent__font-name {
    font-size: var(--text-label);
    font-weight: 600;
    color: var(--color-neutral);
    letter-spacing: var(--tracking-label);
  }

  .ent__font--klar {
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
    font-weight: 400;
    letter-spacing: -0.02em;
  }

  .ent__font--elegant {
    font-family: Georgia, 'Palatino Linotype', 'Book Antiqua', Palatino, serif;
    font-weight: 400;
    letter-spacing: 0.03em;
    font-style: normal;
  }

  .ent__font--stark {
    font-family: 'Impact', 'Arial Black', 'Helvetica Neue', sans-serif;
    font-weight: 900;
    letter-spacing: 0.02em;
    text-transform: uppercase;
  }

  .ent__font--persoenlich {
    font-family: 'Segoe Script', 'Apple Chancery', 'Lucida Handwriting', 'Dancing Script', cursive;
    font-weight: 400;
  }

  .ent__font--technisch {
    font-family: var(--font-mono);
    font-weight: 400;
    letter-spacing: -0.02em;
  }

  /* ======================== VIBE PAIRS ======================== */
  .ent__vibe-pairs {
    display: flex;
    flex-direction: column;
    gap: var(--space-lg);
  }

  .ent__vibe-pair {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    justify-content: center;
  }

  .ent__vibe-word {
    flex: 1;
    max-width: 12rem;
    padding: var(--space-md) var(--space-lg);
    border: 2px solid var(--color-border);
    border-radius: var(--radius-lg);
    font-size: var(--text-body);
    font-weight: 600;
    cursor: pointer;
    background: transparent;
    color: var(--color-primary);
    text-align: center;
    transition: all var(--duration-fast) var(--ease-spring);
    min-height: 44px;
  }

  .ent__vibe-word:hover {
    border-color: var(--color-accent);
    transform: scale(1.03);
  }

  .ent__vibe-word[aria-checked="true"] {
    background: var(--color-accent-deep);
    color: var(--farbe-flaeche-1);
    border-color: var(--color-accent);
    transform: scale(1.05);
  }

  .ent__vibe-pair:has([aria-checked="true"]) .ent__vibe-word[aria-checked="false"]:not(:hover) {
    opacity: 0.55; /* 0.4 broke AA contrast for the unchosen word */
  }

  .ent__vibe-or {
    font-size: var(--text-small);
    color: var(--color-neutral);
    flex-shrink: 0;
    width: 3rem;
    text-align: center;
  }

  /* Vibe pairs: compact on narrow screens */
  @media (max-width: 480px) {
    .ent__vibe-pair {
      gap: var(--space-xs);
    }
    .ent__vibe-word {
      font-size: var(--text-small);
      padding: var(--space-sm);
      max-width: none;
      flex: 1;
      min-width: 0;
    }
    .ent__vibe-or {
      width: auto;
      font-size: var(--text-label);
    }
  }
  /* Extreme narrow: hide "oder", full-width buttons */
  @media (max-width: 360px) {
    .ent__vibe-or { display: none; }
    .ent__vibe-pair { gap: var(--space-sm); }
  }

  /* ======================== WEITER BUTTON ======================== */
  .ent__weiter {
    display: inline-flex;
    align-items: center;
    gap: var(--space-xs);
    margin-top: var(--space-2xl);
    padding: var(--space-md) var(--space-xl);
    background: var(--color-accent-deep);
    color: var(--farbe-flaeche-1);
    border: none;
    border-radius: var(--radius-full);
    font-family: var(--font-primary);
    font-size: var(--text-body);
    font-weight: 600;
    cursor: pointer;
    transition: opacity var(--duration-fast) ease, transform var(--duration-fast) ease;
  }

  .ent__weiter:hover {
    opacity: 0.9;
    transform: translateY(-1px);
  }

  .ent__weiter:active {
    transform: translateY(0);
  }

  /* ======================== SUMMARY CARDS ======================== */
  .ent__summary {
    margin-top: var(--space-2xl);
    padding: var(--space-xl);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    background: var(--color-surface);
    opacity: 0;
    transform: translateY(1rem);
    transition: opacity var(--duration-normal) var(--ease-enter),
                transform var(--duration-normal) var(--ease-enter);
  }

  .ent__summary--visible {
    opacity: 1;
    transform: translateY(0);
  }

  .ent__summary-label {
    font-size: var(--text-label);
    font-weight: 600;
    letter-spacing: var(--tracking-label);
    text-transform: uppercase;
    color: var(--color-accent-deep);
    margin-bottom: var(--space-md);
  }

  .ent__summary-content {
    font-size: var(--text-body);
    line-height: var(--leading-body);
    color: var(--color-primary);
  }

  .ent__summary-content strong {
    font-weight: 600;
  }

  .ent__summary-content .ent__summary-quote {
    display: block;
    font-size: clamp(1.1rem, 1.2vw + 0.5rem, 1.4rem);
    font-weight: 500;
    font-style: italic;
    margin-bottom: var(--space-sm);
  }

  .ent__summary-content .ent__summary-meta {
    font-size: var(--text-small);
    color: var(--color-neutral);
  }

  .ent__summary-content .ent__summary-vibe {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-xs);
    margin-top: var(--space-sm);
  }

  .ent__summary-content .ent__vibe-tag {
    font-size: var(--text-label);
    font-weight: 600;
    padding: 0.15rem 0.6rem;
    background: var(--color-accent-muted);
    color: var(--color-accent-deep);
    border-radius: var(--radius-full);
  }

  /* ======================== HINTS ======================== */
  .ent__hint {
    margin-top: var(--space-md);
    font-size: var(--text-small);
    color: var(--color-neutral);
    padding: var(--space-sm) var(--space-md);
    background: color-mix(in srgb, var(--color-surface) 94%, var(--color-border));
    border-radius: var(--radius-md);
    border-left: 3px solid var(--color-accent);
    line-height: 1.8;
  }

  .ent__hint-prefix {
    font-weight: 600;
    color: var(--color-accent-deep);
  }

  .ent__hint-item {
    display: inline-block;
    padding: 0.1em 0.5em;
    margin: 0.15em 0.2em;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    font-size: var(--text-label);
    font-weight: 600;
    color: var(--color-primary);
  }

  /* ======================== SUBMIT ======================== */
  .ent__submit {
    margin-top: var(--space-2xl);
    width: 100%;
  }

  @media (min-width: 480px) {
    .ent__submit {
      width: auto;
    }
  }

  /* Compact pills on narrow screens */
  @media (max-width: 400px) {
    .ent__pill {
      padding: var(--space-sm) var(--space-md);
      font-size: var(--text-label);
    }
  }

  /* ======================== PROFESSIONAL BRIEF ======================== */
  .ent__brief {
    border: 1px solid var(--color-border);
    border-radius: var(--radius-xl);
    background: var(--color-surface);
    overflow: hidden;
  }

  /* Brief Header */
  .brief__header {
    padding: var(--space-2xl) var(--space-xl);
    border-bottom: 1px solid var(--color-border);
    background: color-mix(in srgb, var(--color-surface) 94%, var(--color-border));
  }

  .brief__header-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--space-md);
    flex-wrap: wrap;
    gap: var(--space-sm);
  }

  .brief__badge {
    font-size: var(--text-label);
    font-weight: 600;
    letter-spacing: var(--tracking-label);
    text-transform: uppercase;
    color: var(--color-accent-deep);
    padding: 0.2rem 0.6rem;
    border: 1px solid var(--color-accent);
    border-radius: var(--radius-sm);
  }

  .brief__date {
    font-size: var(--text-label);
    color: var(--color-neutral);
    font-family: var(--font-mono);
  }

  .brief__title {
    font-size: clamp(1.25rem, 2vw + 0.5rem, 1.75rem);
    font-weight: 600;
    letter-spacing: var(--tracking-section);
    line-height: var(--leading-section);
    margin-bottom: var(--space-xs);
  }

  .brief__subtitle {
    font-size: var(--text-body);
    color: var(--color-neutral);
    line-height: var(--leading-body);
  }

  /* Brief Grid */
  .brief__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1px;
    background: var(--color-border);
  }

  @media (min-width: 640px) {
    .brief__grid {
      grid-template-columns: 1fr 1fr;
    }
  }

  /* Brief Cards */
  .brief__card {
    padding: var(--space-xl);
    background: var(--color-surface);
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
  }

  .brief__card-icon {
    font-family: var(--font-mono);
    font-size: var(--text-label);
    font-weight: 700;
    color: var(--color-accent-deep);
  }

  .brief__card-title {
    font-size: var(--text-body);
    font-weight: 600;
    letter-spacing: var(--tracking-section);
  }

  .brief__card-text {
    font-size: var(--text-small);
    color: var(--color-neutral);
    line-height: var(--leading-body);
  }

  .brief__card--highlight {
    background: color-mix(in srgb, var(--color-surface) 94%, var(--color-border));
  }

  .brief__card--contact {
    background: var(--color-surface);
  }

  @media (min-width: 640px) {
    .brief__card--contact {
      grid-column: 1 / -1;
    }
  }

  /* Brief Meta Rows */
  .brief__meta {
    display: flex;
    flex-direction: column;
    gap: 0;
  }

  .brief__row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    padding: var(--space-sm) 0;
    border-bottom: 1px solid var(--color-border);
    font-size: var(--text-small);
    gap: var(--space-md);
  }

  .brief__row:last-child {
    border-bottom: none;
  }

  .brief__key {
    color: var(--color-neutral);
    flex-shrink: 0;
    font-size: var(--text-label);
    font-weight: 600;
    letter-spacing: var(--tracking-label);
    text-transform: uppercase;
  }

  .brief__val {
    font-weight: 500;
    text-align: right;
    word-break: break-word;
  }

  .brief__val a {
    color: var(--color-accent-deep);
    text-decoration: none;
  }

  .brief__val a:hover {
    text-decoration: underline;
  }

  .brief__val--accent {
    color: var(--color-accent-deep);
    font-weight: 600;
  }

  /* Brief Tags */
  .brief__tags {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-xs);
    margin-top: var(--space-sm);
  }

  .brief__tag {
    font-size: var(--text-label);
    font-weight: 600;
    padding: 0.15rem 0.6rem;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-full);
    color: var(--color-primary);
  }

  .brief__tag--vibe {
    background: var(--color-accent-muted);
    border-color: var(--color-accent);
    color: var(--color-accent-deep);
  }

  /* ======================== CONFIRMATION ======================== */
  .ent__confirm {
    margin-top: var(--space-2xl);
  }

  .ent__confirm-box {
    padding: var(--space-xl);
    border: 2px solid var(--color-accent);
    border-radius: var(--radius-lg);
    background: color-mix(in srgb, var(--color-surface) 94%, var(--color-border));
    text-align: center;
  }

  .ent__confirm-title {
    font-size: clamp(1.1rem, 1.5vw + 0.5rem, 1.5rem);
    font-weight: 600;
    margin-bottom: var(--space-sm);
  }

  .ent__confirm-text {
    font-size: var(--text-small);
    color: var(--color-neutral);
    line-height: var(--leading-body);
    max-width: 45ch;
    margin-inline: auto;
    margin-bottom: var(--space-xl);
  }

  .ent__confirm-actions {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
    align-items: center;
  }

  @media (min-width: 480px) {
    .ent__confirm-actions {
      flex-direction: row;
      justify-content: center;
    }
  }

  /* ======================== SUCCESS ======================== */
  .ent__success {
    margin-top: var(--space-2xl);
    padding: var(--space-2xl) var(--space-xl);
    border: 2px solid var(--color-success);
    border-radius: var(--radius-lg);
    background: color-mix(in srgb, var(--color-success) 6%, var(--color-surface));
    text-align: center;
  }

  .ent__success-icon {
    width: 3rem;
    height: 3rem;
    margin-inline: auto;
    margin-bottom: var(--space-md);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-full);
    background: var(--color-success);
    color: var(--farbe-flaeche-1);
    font-size: 1.25rem;
    font-weight: 700;
  }

  .ent__success-title {
    font-size: clamp(1.1rem, 1.5vw + 0.5rem, 1.5rem);
    font-weight: 600;
    margin-bottom: var(--space-sm);
  }

  .ent__success-text {
    font-size: var(--text-small);
    color: var(--color-neutral);
    line-height: var(--leading-body);
    max-width: 45ch;
    margin-inline: auto;
    margin-bottom: var(--space-xl);
  }

  .ent__success-actions {
    display: flex;
    justify-content: center;
    gap: var(--space-sm);
  }

  /* ======================== NEXT STEPS ======================== */
  .ent__next-steps {
    margin-top: var(--space-2xl);
    padding: var(--space-xl);
    background: color-mix(in srgb, var(--color-surface) 94%, var(--color-border));
    border-radius: var(--radius-lg);
    border-left: 3px solid var(--color-accent);
  }

  .ent__next-steps h3 {
    font-size: var(--text-body);
    font-weight: 600;
    margin-bottom: var(--space-md);
  }

  .ent__next-steps ol {
    list-style: none;
    counter-reset: steps;
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
  }

  .ent__next-steps li {
    counter-increment: steps;
    font-size: var(--text-small);
    color: var(--color-primary);
    padding-left: 1.8em;
    position: relative;
  }

  .ent__next-steps li::before {
    content: counter(steps) ".";
    position: absolute;
    left: 0;
    font-weight: 600;
    color: var(--color-accent-deep);
    font-family: var(--font-mono);
    font-size: var(--text-label);
  }

  /* ======================== SEND ERROR ======================== */
  .ent__send-error {
    color: var(--color-accent-deep);
    font-size: var(--text-small);
    margin-top: var(--space-sm);
    text-align: center;
  }

  /* ======================== CONFETTI ======================== */
  .ent__confetti {
    position: fixed;
    pointer-events: none;
    z-index: 200;
    inset: 0;
  }

  .ent__confetti-dot {
    position: absolute;
    /* Position/Farbe/Delay kommen aus Custom Properties (JS setzt sie per
       setProperty — CSP-sicher; style.left/top/background wären blockiert). */
    left: var(--cx, 50%);
    top: var(--cy, 50%);
    background: var(--cbg, var(--color-accent));
    animation-delay: var(--cdelay, 0s);
    width: 8px;
    height: 8px;
    border-radius: 50%;
    animation: entConfetti 1.2s var(--ease-enter) forwards;
    opacity: 0;
  }

  @keyframes entConfetti {
    0% { opacity: 0; transform: translateY(0) scale(0); }
    20% { opacity: 1; transform: translateY(-20px) scale(1); }
    100% { opacity: 0; transform: translateY(-80px) scale(0.5); }
  }

  /* ======================== RESPONSIVE BRIEF ======================== */
  @media (max-width: 480px) {
    .brief__row {
      flex-direction: column;
      gap: var(--space-xs);
      align-items: flex-start;
    }
    .brief__val {
      text-align: left;
    }
    .brief__header {
      padding: var(--space-xl) var(--space-md);
    }
    .brief__card {
      padding: var(--space-md);
    }
  }

  /* ======================== REDUCED MOTION ======================== */
  @media (prefers-reduced-motion: reduce) {
    .ent__hero-title,
    .ent__hero-sub,
    .ent__hero-badge {
      opacity: 1;
      transform: none;
      animation: none;
    }

    .ent__chapter,
    .ent__chapter--locked,
    .ent__chapter--revealed,
    .ent__summary,
    .ent__summary--visible,
    .ent__vibe-word,
    .ent__pill,
    .ent__palette,
    .ent__font-card,
    .ent__weiter,
    .ent__hint {
      transition: none;
    }

    .ent__confetti-dot {
      animation: none;
      display: none;
    }
  }
}

/* Schriftgewicht 2026-09-22 — siehe sections.css: große Zeilen werden leicht
   gesetzt, seit die Überschriften in Fraunces stehen. */
@layer entdecker {
  .ent__hero-title,
  .ent__confirm-title,
  .ent__success-title {
    font-weight: var(--weight-display);
  }
}