/* ==========================================================================
   Apple-Design-Überarbeitung – wird auf jeder Seite ZULETZT geladen.
   Bewusst eine eigene Datei: alle Änderungen sind hier gebündelt und leicht prüfbar.
   Der Heft-Look bleibt unverändert; geändert werden Kontrast, Fokus, Bewegung, Bedienbarkeit.
   ========================================================================== */

/* ---- 1. Kontrast (WCAG AA: Text 4,5:1, Symbole und Rahmen 3:1) ---- */
:root{
  --muted:#5E6676;
  --teal:#0A7A70;
  --star:#C47F00; --star-ink:#8F5F00;
  --control-line:#7F8899;
  --focus-ring:#2F5BFF;
  --u-ok:#12713A; --u-warn:#8A5206; --u-gold:#8A5A00;
}
:root[data-theme="dark"]{ --control-line:#7A8499; --focus-ring:#8FA9FF; }
html[data-heft="on"]{ --focus-ring:var(--pen); }
.badge-warn{ color:var(--star-ink); }
.auth-in,.u-in,.set-ta{ border-color:var(--control-line); }
.sw-ui,.u-sw .u-sw-ui{ background:var(--control-line); }

/* ---- 2. Fokus: überall sichtbar für Tastatur ---- */
:where(a,button,summary,[role="button"],[tabindex]):focus-visible{
  outline:3px solid var(--focus-ring); outline-offset:2px;
}
.rule-card:has(.rule-link:focus-visible){ outline:3px solid var(--focus-ring); outline-offset:3px; }
.rule-link:focus-visible{ outline:none; }
.skip-link{
  position:absolute; left:12px; top:-64px; z-index:1000; padding:10px 16px; border-radius:12px;
  background:var(--focus-ring); color:#fff; font-weight:600; text-decoration:none; transition:top .15s ease-out;
}
.skip-link:focus{ top:10px; }
main:focus{ outline:none; }
.sr-only{ position:absolute; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }
.noscript{ margin:0; padding:14px 18px; text-align:center; background:#fff3b0; color:#1d1b4f; }

/* ---- 3. Bedienung per Touch ---- */
a,button,[role="button"],[role="radio"],label,summary,input,select{ touch-action:manipulation; }     /* kein Doppeltipp-Zoom, Pinch-Zoom bleibt */
input:not([type="checkbox"]):not([type="radio"]),select,textarea{ font-size:max(16px,1em); }           /* iOS zoomt sonst beim Antippen */
.modal-open{ overflow:hidden; }
.overlay{ overscroll-behavior:contain; }
.chip{ appearance:none; -webkit-appearance:none; margin:0; font-family:inherit; }
@media (pointer:coarse){
  .chip{ min-height:44px; }
  .theme-btn,.heft-btn,.icon-btn,.fav-star,.overlay-head .back{ min-width:44px; min-height:44px; }
  html[data-heft="on"] .heft-btn,html[data-heft="on"] .theme-btn{ width:44px; height:44px; }
  .clear-btn::before{ content:""; position:absolute; inset:-9px; }
  .p-chip{ min-height:44px; }
}

/* ---- 4. Karten: ganze Karte klickbar, Titel ist der echte Link ---- */
.rule-card{ position:relative; }
.rule-card h3 a.rule-link{ color:inherit; text-decoration:none; font:inherit; letter-spacing:inherit; }
.rule-card h3 a.rule-link::after{ content:""; position:absolute; inset:0; z-index:1; border-radius:inherit; }
.rule-card .fav-star{ position:relative; z-index:2; }
.empty-reset{ margin:14px auto 0; display:block; }

/* ---- 5. Bewegung: kurz, mit Zweck, nur bei seltenen Aktionen ---- */
.rule-card{ animation:none; }
.rule-card.anim{ animation:cardIn .32s cubic-bezier(.2,.8,.25,1) both; }
@media (prefers-reduced-motion:no-preference){
  .overlay.open{ animation:sheetIn .3s cubic-bezier(.2,.9,.25,1); }
  .news-card{ animation:sheetIn .32s cubic-bezier(.2,.9,.25,1); }
  @view-transition{ navigation:auto; }
  header.top{ view-transition-name:site-top; }
  ::view-transition-old(root),::view-transition-new(root){ animation-duration:.16s; }
}
@keyframes sheetIn{ from{ opacity:0; transform:translateY(28px); } to{ opacity:1; transform:none; } }
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{ animation-duration:.01ms!important; animation-iteration-count:1!important; transition-duration:.01ms!important; scroll-behavior:auto!important; }
}

/* ---- 6. Aktuelles als Sheet von unten (Handy) ---- */
@media (max-width:600px){
  .news-overlay{ align-items:flex-end; padding:0; }
  .news-card{ max-width:none; width:100%; border-radius:26px 26px 0 0; padding-bottom:calc(22px + env(safe-area-inset-bottom)); }
}

/* ---- 7. Üben: Karte folgt dem Finger ---- */
.p-card{ position:relative; }
.p-card.is-flipped{ touch-action:pan-y; }
.p-card.dragging{ transition:none; cursor:grabbing; user-select:none; }
.p-card[data-swipe]::after{
  position:absolute; top:14px; padding:4px 12px; border-radius:999px; font-weight:600; font-size:.9rem;
  opacity:var(--swipe,0); background:var(--surface); border:2px solid currentColor; pointer-events:none;
}
.p-card[data-swipe="know"]{ box-shadow:0 0 0 calc(var(--swipe,0)*4px) #15803d; }
.p-card[data-swipe="know"]::after{ content:"Gewusst"; right:14px; color:#15803d; }
.p-card[data-swipe="again"]{ box-shadow:0 0 0 calc(var(--swipe,0)*4px) #b91c1c; }
.p-card[data-swipe="again"]::after{ content:"Nochmal"; left:14px; color:#b91c1c; }
.p-swipehint{ display:none; margin:8px 0 0; text-align:center; font-size:.85rem; color:var(--muted); }
@media (pointer:coarse){ .p-swipehint:not(.is-hidden){ display:block; } }
.u-msg{ min-height:1.4em; margin-top:10px; text-align:center; font-size:.9rem; color:var(--ink-soft); }
.dlg-actions{ display:flex; gap:10px; margin-top:16px; }
.dlg-actions .ai-btn{ flex:1; margin:0; }

/* ---- 8. Systemeinstellungen der Person respektieren ---- */
@media (prefers-reduced-transparency:reduce){
  :root{ --glass:#fff; } :root[data-theme="dark"]{ --glass:#0F1218; }
  .top,.searchbar,.nav-bar,.overlay-head,.set-save{ -webkit-backdrop-filter:none!important; backdrop-filter:none!important; }
}
@media (prefers-contrast:more){
  :root{ --border:#5F6879; --ink-soft:#2F3744; --muted:#434B5B; }
  :root[data-theme="dark"]{ --border:#8A93A8; --ink-soft:#D3D9E6; --muted:#C2C9D8; }
  html[data-heft="on"]{ --pen-soft:var(--pen); }
}