/* ── Skip Screen ── */
    /* Eigenes Scroll-Layout statt nur über .app-content zu scrollen: Zurück-
       Button/Titel bleiben oben fix, die (potenziell lange) Gründe-Liste
       scrollt in ihrem eigenen Bereich, der "Weiter"-Button bleibt unten
       sichtbar statt mit der Liste wegzuscrollen — daher height:100%
       (s. #screen-skip.screen.active weiter oben) statt nur min-height. */
    #screen-skip {
      display: flex;
      flex-direction: column;
      padding-top: 2rem;
      padding-left: 1.25rem;
      padding-right: 1.25rem;
    }
    .skip-screen-back, .skip-screen-title { flex-shrink: 0; }
    #screen-skip.screen.active { display: flex; }
    .skip-screen-back {
      background: none;
      border: none;
      border-radius: 8px;
      color: var(--muted);
      font-size: .85rem;
      cursor: pointer;
      font-family: inherit;
      padding: .3rem .5rem;
      margin: -.3rem -.5rem 1.2rem;
      text-align: left;
      display: inline-flex;
      align-items: center;
      gap: .3rem;
      transition: background .12s, color .12s;
      -webkit-tap-highlight-color: transparent;
    }
    .skip-screen-back:hover  { color: var(--text); background: rgba(255,255,255,.05); }
    .skip-screen-back:active { background: rgba(255,255,255,.09); }
    .skip-screen-back svg { width: 14px; height: 14px; stroke: currentColor; fill: none; stroke-width: 2; flex-shrink: 0; }
    .skip-screen-title {
      font-size: 1.1rem;
      font-weight: 700;
      margin-bottom: 1.25rem;
      color: var(--text);
    }
    .skip-reasons {
      border: 1px solid var(--line-strong);
      border-radius: 14px;
      overflow-x: hidden; /* behält die abgerundeten Ecken der Liste */
      overflow-y: auto;   /* eigener Scrollbereich statt mit der ganzen Seite zu scrollen */
      flex: 1;
      min-height: 0; /* nötig, damit der Flex-Child tatsächlich schrumpft/scrollt statt den Container zu sprengen */
    }
    .skip-reason-btn {
      display: block;
      width: 100%;
      background: transparent;
      border: none;
      border-bottom: 1px solid var(--line-strong);
      color: var(--text);
      padding: .85rem 1.1rem;
      text-align: left;
      font-size: .93rem;
      font-weight: 500; /* explizit, sonst erbt der globale button{font-weight:700}-Fallback (style.css) -
        wirkte unausgewählt fälschlich fetter als .selected (600) */
      cursor: pointer;
      font-family: inherit;
      transition: background .12s, color .12s;
    }
    .skip-reason-btn:last-child { border-bottom: none; }
    /* :not(.selected), da :hover sonst dieselbe Goldfarbe wie .selected zeigt
       und ein Abwählen (Klick bei weiterhin gehovertem Button) optisch nicht
       erkennbar war — sah aus, als hätte das Abwählen nicht funktioniert. */
    .skip-reason-btn:hover:not(.selected) { background: rgba(255,255,255,.05); }
    /* A11y: --accent-rgb existierte nie (immer der Orange-Fallback 255,140,0)
       und lag bei .15 Alpha mit Goldtext nur bei 4.17:1 Kontrast — unter AA
       (4.5:1). .1 Alpha statt der nie definierten Variable ergibt ≈4.64:1 —
       höhere Alpha würde den Hintergrund aufhellen und den Kontrast wieder
       unter AA drücken. Linker Akzentstrich zusätzlich, damit "ausgewählt"
       nicht nur über die (für Farbenblinde ggf. unklare) Textfarbe
       erkennbar ist. */
    .skip-reason-btn.selected {
      background: rgba(181,137,54,.1);
      color: var(--accent);
      font-weight: 700;
      box-shadow: inset 3px 0 0 var(--accent);
    }
    .skip-reason-muted { color: var(--muted); font-size: .85rem; }
    /* flex-shrink:0 + eigenes padding-bottom (statt vorher auf #screen-skip):
       bleibt als Footer fix sichtbar, während nur .skip-reasons scrollt;
       companion-reserve reserviert hier Platz für die Mascot-Figur
       (s. #screen-start/#screen-loading-Konvention) - hier aber abzüglich
       eines Lifts: anders als beim Start-Screen genügt der Figur selbst plus
       etwas Padding, der volle Reserve-Wert liess zu viel Leerraum stehen. */
    .skip-confirm-wrap {
      margin-top: 1.1rem;
      display: flex;
      gap: .7rem;
      justify-content: flex-end;
      flex-shrink: 0;
      /* gleiche Reduktion wie #screen-start/#screen-loading (--start-content-lift) -
         dort bereits als sicher verifiziert (kein Überlapp mit Figur/Sprechblase).
         Ein grösserer Abzug (vorher 4.5rem) liess den "Weiter"-Button in die
         Sprechblase hineinragen. */
      padding-bottom: calc(var(--companion-reserve) - var(--start-content-lift));
    }
    .skip-confirm-btn {
      /* Stil wie .btn-next (Vorschlagsseite) statt voll gefülltem Akzent-Button -
         "Weiter" ist hier kein gleichrangiger CTA wie z.B. "Ja, mache ich". */
      background: rgba(255,255,255,.018); color: var(--text); border: 1px solid var(--line-strong);
      border-radius: 14px;
      padding: .7rem 1.4rem; font-size: .95rem; font-family: inherit; cursor: pointer;
      font-weight: 600; transition: background .15s, opacity .15s;
    }
    .skip-confirm-btn:hover:not(:disabled) { background: rgba(255,255,255,.04); }
    .skip-confirm-btn:disabled { opacity: .4; cursor: default; }