/* Stuffle (17.10.2026, Freizeit-Welt nach dem abgenommenen Klickdummy): ruhiger Creme-Grund, weisse Karten mit feinem Rand,
   Koralle fuer Hauptknoepfe, Waldgruen fuer Verweise, weiche Rundungen und Schatten. Werte kommen aus skin.json -
   hier nur der Feinschliff der Kern-Bauteile, kein Gimmick. Schrift Plus Jakarta Sans (OFL) ueber schrift.url. */
html[data-skin="stuffle"] body{-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
html[data-skin="stuffle"] ::selection{background:var(--auswahl);color:var(--ink)}
html[data-skin="stuffle"] h1,html[data-skin="stuffle"] h2{letter-spacing:-.02em}
html[data-skin="stuffle"] :focus-visible{outline:2px solid var(--fokus);outline-offset:2px}
/* Knoepfe: 44 px Tippflaeche, ruhiger Rand, Hauptknopf in Koralle */
html[data-skin="stuffle"] .ay-knopf,html[data-skin="stuffle"] .ay-hauptknopf{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:0 16px;
  border-radius:var(--radius-knopf);border:var(--rand) solid color-mix(in srgb,var(--line) 75%,var(--muted));background:var(--card);color:var(--ink);font-weight:600;line-height:1.2;text-decoration:none}
html[data-skin="stuffle"] .ay-knopf:hover{background:var(--soft);opacity:1}
html[data-skin="stuffle"] .ay-knopf.gelb,html[data-skin="stuffle"] .ay-hauptknopf{background:var(--yellow);border-color:var(--yellow);color:var(--onyellow);font-weight:700}
html[data-skin="stuffle"] .ay-knopf.gelb:hover,html[data-skin="stuffle"] .ay-hauptknopf:hover{background:color-mix(in srgb,var(--yellow) 86%,var(--ink));border-color:color-mix(in srgb,var(--yellow) 86%,var(--ink))}
html[data-skin="stuffle"] .ay-knopf:disabled{opacity:.55;cursor:default}
/* Pille: leise gruene Kennzeichnung ohne Rand */
html[data-skin="stuffle"] .ay-pille{border:0;border-radius:var(--radius-pille);background:color-mix(in srgb,var(--blue) 12%,var(--card));color:var(--blue);font-weight:700}
/* Felder: 48 px hoch, Rand etwas kraeftiger als die Kartenlinie (sichtbar auf Weiss) */
html[data-skin="stuffle"] .ay-feld{min-height:48px;padding:0 14px;border-radius:var(--radius-feld);border:var(--rand) solid color-mix(in srgb,var(--line) 60%,var(--muted));background:var(--card);font-size:16px}
html[data-skin="stuffle"] textarea.ay-feld{padding:12px 14px;line-height:1.5}
html[data-skin="stuffle"] .ay-feld:focus{outline:2px solid var(--fokus);outline-offset:1px;border-color:transparent}
/* Karte: feiner Rand, Schatten erst beim Zeigen auf eine anklickbare Karte */
html[data-skin="stuffle"] .ay-karte{border:var(--rand) solid var(--line);border-radius:var(--radius);box-shadow:none}
html[data-skin="stuffle"] a.ay-karte{transition:transform var(--bewegung) ease,box-shadow var(--bewegung) ease}
html[data-skin="stuffle"] a.ay-karte:hover{transform:translateY(-2px);box-shadow:var(--shadow);opacity:1}
html[data-skin="stuffle"] .ay-blase{border-radius:var(--radius-blase)}
html[data-skin="stuffle"] .ay-liste .ay-zeile{border-radius:var(--radius-klein)}
/* Dialog: grosse Rundung, weicher Schatten, Schleier hinter dem Dialog */
html[data-skin="stuffle"] .ay-dialog{border:0;border-radius:var(--radius-blase);box-shadow:var(--shadow);padding:24px}
html[data-skin="stuffle"] .ay-dialog::backdrop{background:var(--schleier)}
html[data-skin="stuffle"] .ay-dialog-titel{font-weight:800;letter-spacing:-.02em}
@media (prefers-reduced-motion:reduce){html[data-skin="stuffle"] a.ay-karte,html[data-skin="stuffle"] a.ay-karte:hover{transition:none;transform:none}}