/* ═══════════════════════════════════════════
   SELF-HOSTED FONTS (kein Google-CDN-Kontakt)
═══════════════════════════════════════════ */

/* Press Start 2P — latin-ext */
@font-face {
  font-family: 'Press Start 2P';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/press-start-2p-latin-ext-400.woff2') format('woff2');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
/* Press Start 2P — latin */
@font-face {
  font-family: 'Press Start 2P';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/press-start-2p-latin-400.woff2') format('woff2');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

/* Orbitron — alle Stärken (variable font, eine Datei) */
@font-face {
  font-family: 'Orbitron';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/orbitron-latin-400-600-700-900.woff2') format('woff2');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
  font-family: 'Orbitron';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../fonts/orbitron-latin-400-600-700-900.woff2') format('woff2');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
  font-family: 'Orbitron';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../fonts/orbitron-latin-400-600-700-900.woff2') format('woff2');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
  font-family: 'Orbitron';
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url('../fonts/orbitron-latin-400-600-700-900.woff2') format('woff2');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

/* ═══════════════════════════════════════════
   CSS VARIABLES — THEMES
═══════════════════════════════════════════ */
:root {
  --bg: #0b0b0f;
  --bg2: #13131a;
  --bg3: #1e1e28;
  --surface: #1a1a24;
  --surface2: #23232f;
  --border: #2a2a3a;
  --text: #e8e8f0;
  --text2: #9090a8;
  --text3: #5a5a72;
  --accent: #00ffcc;
  --accent2: #ff00ff;
  --accent3: #4a6fe3;
  --green: #1D9E75;
  --red: #993C1D;
  --gold: #F0A500;
  --glow: 0 0 12px rgba(0,255,204,.35);
  --card-shadow: 0 4px 24px rgba(0,0,0,.5);
  --radius: 12px;
  --font-main: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-retro: "Press Start 2P", monospace;
}

/* ── DARK ── */
[data-theme="dark"] {
  --bg:#0b0b0f; --bg2:#13131a; --bg3:#1e1e28;
  --surface:#1a1a24; --surface2:#23232f; --border:#2a2a3a;
  --text:#e8e8f0; --text2:#9090a8; --text3:#6a6a88;
  --accent:#00ffcc; --accent2:#ff00ff; --accent3:#4a6fe3;
  --glow:0 0 12px rgba(0,255,204,.35);
}

/* ── LIGHT ── */
[data-theme="light"] {
  --bg:#f5f5f0; --bg2:#ececec; --bg3:#e2e2e2;
  --surface:#ffffff; --surface2:#f8f8f5; --border:#e0e0e0;
  --text:#1a1a1a; --text2:#666; --text3:#aaa;
  --accent:#0056d6; --accent2:#c026d3; --accent3:#4a6fe3;
  --glow:0 0 12px rgba(0,86,214,.2);
  --card-shadow:0 2px 12px rgba(0,0,0,.08);
}

/* ── SAKURA (hell) ── */
[data-theme="sakura"] {
  --bg:#fff5f7; --bg2:#ffe8ed; --bg3:#ffd6e0;
  --surface:#ffffff; --surface2:#fff0f3; --border:#ffb3c6;
  --text:#3d1520; --text2:#a0455a; --text3:#d4849a;
  --accent:#e91e63; --accent2:#ff6b9d; --accent3:#9c27b0;
  --green:#2e7d32; --red:#c62828; --gold:#f9a825;
  --glow:0 0 14px rgba(233,30,99,.25);
  --card-shadow:0 2px 14px rgba(233,30,99,.12);
}

/* ── ICE (hell) ── */
[data-theme="ice"] {
  --bg:#f0f7ff; --bg2:#e3f0ff; --bg3:#d4e8ff;
  --surface:#ffffff; --surface2:#f5f9ff; --border:#b0ccee;
  --text:#0d2744; --text2:#3a6fa8; --text3:#8aaed0;
  --accent:#1565c0; --accent2:#00bcd4; --accent3:#7c4dff;
  --green:#2e7d32; --red:#c62828; --gold:#f9a825;
  --glow:0 0 12px rgba(21,101,192,.22);
  --card-shadow:0 2px 12px rgba(21,101,192,.1);
}

/* ── SAND (hell) ── */
[data-theme="sand"] {
  --bg:#fdf6e3; --bg2:#f5ead0; --bg3:#ecdfc0;
  --surface:#fffef9; --surface2:#fdf8ed; --border:#e0c87a;
  --text:#3d2e00; --text2:#8a6a20; --text3:#b89840;
  --accent:#c8860a; --accent2:#e67e22; --accent3:#27ae60;
  --green:#2e7d32; --red:#c62828; --gold:#f9a825;
  --glow:0 0 14px rgba(200,134,10,.28);
  --card-shadow:0 2px 12px rgba(200,134,10,.12);
}

/* ── SYNTHWAVE ── */
[data-theme="synthwave"] {
  --bg:#0d0221; --bg2:#150332; --bg3:#1e0547;
  --surface:#1a0535; --surface2:#220645; --border:#3d0f6e;
  --text:#f0e6ff; --text2:#b06ef0; --text3:#8048c8;
  --accent:#fe53bb; --accent2:#09fbd3; --accent3:#f5d300;
  --glow:0 0 18px rgba(254,83,187,.5);
}

/* ── FOREST ── */
[data-theme="forest"] {
  --bg:#0a1208; --bg2:#101a0e; --bg3:#182416;
  --surface:#1a2818; --surface2:#213320; --border:#2d4a28;
  --text:#d8f0d0; --text2:#7ab870; --text3:#507848;
  --accent:#4cff91; --accent2:#ffcc00; --accent3:#00bfff;
  --green:#4ddf90; --red:#e05030;
  --glow:0 0 14px rgba(76,255,145,.3);
}

/* ── OCEAN ── */
[data-theme="ocean"] {
  --bg:#020e1a; --bg2:#041525; --bg3:#062035;
  --surface:#072845; --surface2:#0a3255; --border:#1050a0;
  --text:#c8e8ff; --text2:#5898d8; --text3:#3a6898;
  --accent:#00d4ff; --accent2:#ff6b35; --accent3:#7bed9f;
  --green:#3dc88a; --red:#e05530;
  --glow:0 0 14px rgba(0,212,255,.3);
}

/* ── SUNSET ── */
[data-theme="sunset"] {
  --bg:#1a0a00; --bg2:#240f02; --bg3:#301505;
  --surface:#3a1c08; --surface2:#48240e; --border:#7a3a15;
  --text:#ffe8d0; --text2:#e08050; --text3:#b06038;
  --accent:#ff7b00; --accent2:#ff00aa; --accent3:#ffe066;
  --green:#40cc80; --red:#e05530;
  --glow:0 0 16px rgba(255,123,0,.4);
}

/* ── MONO ── */
[data-theme="mono"] {
  --bg:#050505; --bg2:#0f0f0f; --bg3:#1a1a1a;
  --surface:#1f1f1f; --surface2:#282828; --border:#333;
  --text:#ffffff; --text2:#aaaaaa; --text3:#707070;
  --accent:#ffffff; --accent2:#aaaaaa; --accent3:#dddddd;
  --glow:0 0 10px rgba(255,255,255,.15);
}

/* ── PALACE (Bilder) ── */
[data-theme="palace"] {
  --bg:#07061a; --bg2:#0e0b2a; --bg3:#160f3a;
  --surface:#1a1430; --surface2:#221a3e; --border:#3a2d6a;
  --text:#f0ecd8; --text2:#b8a060; --text3:#705a30;
  --accent:#c8a850; --accent2:#8060c0; --accent3:#5080e0;
  --glow:0 0 16px rgba(200,168,80,.35);
}

/* ═══════════════════════════════════════════
   RESET & BASE
═══════════════════════════════════════════ */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family:var(--font-main);
  background:var(--bg);
  color:var(--text);
  min-height:100vh;
  transition:background .3s,color .3s;
  padding-bottom:36px;
}
button{
  font-family:var(--font-main);
  cursor:pointer;
  transition:all .15s;
}
button:disabled{opacity:.3;cursor:default}
#gap-check-btn:disabled,#gap-check-btn-top:disabled{opacity:.2;pointer-events:none;}

/* ═══════════════════════════════════════════
   BACKGROUND SYSTEM
   Klassen werden direkt auf <body> angewendet.
   .bg-xxx setzt nur background-image (nicht
   background-Shorthand), damit die Theme-
   Hintergrundfarbe erhalten bleibt.
   Dieselben Klassen funktionieren auch auf
   .bg-preview-inner für die Mini-Vorschau.
═══════════════════════════════════════════ */
#bg-layer{ display:none; } /* nur noch für Struktur, nicht mehr visuell */

/* ── dark ── */
.bg-dark-stars{
  background-image:
    radial-gradient(rgba(255,255,255,.55) 1px, transparent 1px),
    radial-gradient(rgba(255,255,255,.25) 1px, transparent 1px);
  background-size: 32px 32px, 79px 79px;
  background-position: 0 0, 16px 40px;
}
.bg-dark-aurora{
  background-image:
    radial-gradient(ellipse 55% 40% at 15% 35%, rgba(0,255,204,.18) 0%, transparent 65%),
    radial-gradient(ellipse 50% 60% at 85% 65%, rgba(255,0,255,.13) 0%, transparent 65%),
    radial-gradient(ellipse 45% 50% at 52% 8%,  rgba(74,111,227,.15) 0%, transparent 65%);
  animation: auroraFloat 14s ease-in-out infinite alternate;
}
@keyframes auroraFloat {
  from { background-position: 0% 0%, 100% 100%, 50% 0%; }
  to   { background-position: 8% 12%, 92% 88%, 54% 8%; }
}
.bg-palace-image{
  background-image:
    linear-gradient(rgba(7,6,26,.35) 0%, rgba(7,6,26,.35) 100%),
    url('../img/palace.png');
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center center;
}

/* ── synthwave ── */
.bg-synthwave-grid{
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='160'%3E%3Cline x1='0' y1='64' x2='300' y2='64' stroke='%23fe53bb' stroke-opacity='0.40' stroke-width='2'/%3E%3Cline x1='0' y1='67' x2='300' y2='67' stroke='%23fe53bb' stroke-opacity='0.20' stroke-width='1'/%3E%3Cline x1='0' y1='78' x2='300' y2='78' stroke='%23fe53bb' stroke-opacity='0.20' stroke-width='1'/%3E%3Cline x1='0' y1='94' x2='300' y2='94' stroke='%23fe53bb' stroke-opacity='0.18' stroke-width='1'/%3E%3Cline x1='0' y1='113' x2='300' y2='113' stroke='%23fe53bb' stroke-opacity='0.16' stroke-width='1'/%3E%3Cline x1='0' y1='136' x2='300' y2='136' stroke='%23fe53bb' stroke-opacity='0.14' stroke-width='1'/%3E%3Cline x1='150' y1='64' x2='-30' y2='160' stroke='%2309fbd3' stroke-opacity='0.20' stroke-width='1'/%3E%3Cline x1='150' y1='64' x2='30' y2='160' stroke='%2309fbd3' stroke-opacity='0.20' stroke-width='1'/%3E%3Cline x1='150' y1='64' x2='90' y2='160' stroke='%2309fbd3' stroke-opacity='0.16' stroke-width='0.8'/%3E%3Cline x1='150' y1='64' x2='150' y2='160' stroke='%2309fbd3' stroke-opacity='0.16' stroke-width='0.8'/%3E%3Cline x1='150' y1='64' x2='210' y2='160' stroke='%2309fbd3' stroke-opacity='0.16' stroke-width='0.8'/%3E%3Cline x1='150' y1='64' x2='270' y2='160' stroke='%2309fbd3' stroke-opacity='0.20' stroke-width='1'/%3E%3Cline x1='150' y1='64' x2='330' y2='160' stroke='%2309fbd3' stroke-opacity='0.20' stroke-width='1'/%3E%3C/svg%3E");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: bottom center;
}
.bg-synthwave-neon{
  background-image:
    repeating-linear-gradient(
      60deg,
      transparent 0px, transparent 55px,
      rgba(254,83,187,.22) 55px, rgba(254,83,187,.22) 56px,
      rgba(254,83,187,.08) 56px, rgba(254,83,187,.08) 58px,
      transparent 58px, transparent 113px
    ),
    repeating-linear-gradient(
      -60deg,
      transparent 0px, transparent 55px,
      rgba(9,251,211,.22) 55px, rgba(9,251,211,.22) 56px,
      rgba(9,251,211,.08) 56px, rgba(9,251,211,.08) 58px,
      transparent 58px, transparent 113px
    ),
    repeating-linear-gradient(
      180deg,
      transparent 0px, transparent 95px,
      rgba(155,30,255,.18) 95px, rgba(155,30,255,.18) 96px,
      rgba(155,30,255,.07) 96px, rgba(155,30,255,.07) 98px,
      transparent 98px, transparent 190px
    );
}

/* ── forest ── */
.bg-forest-leaves{
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cpath d='M25,95 Q45,35 85,28 Q98,52 82,78 Q65,100 25,95Z' fill='%234cff91' fill-opacity='0.09'/%3E%3Cpath d='M8,55 Q22,18 52,22 Q64,42 48,68 Q30,80 8,55Z' fill='%234cff91' fill-opacity='0.06'/%3E%3Cpath d='M72,8 Q92,4 100,22 Q96,42 76,38 Q56,34 72,8Z' fill='%2327ae60' fill-opacity='0.07'/%3E%3C/svg%3E");
  background-size: 120px 120px;
}
.bg-forest-trees{
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='140'%3E%3Cpolygon points='28,12 14,48 42,48' fill='%234cff91' fill-opacity='0.18'/%3E%3Cpolygon points='28,34 8,78 48,78' fill='%234cff91' fill-opacity='0.14'/%3E%3Cpolygon points='28,56 2,112 54,112' fill='%2327ae60' fill-opacity='0.13'/%3E%3Crect x='22' y='112' width='12' height='18' fill='%23614026' fill-opacity='0.18'/%3E%3Cpolygon points='88,36 76,66 100,66' fill='%234cff91' fill-opacity='0.15'/%3E%3Cpolygon points='88,52 71,90 105,90' fill='%2327ae60' fill-opacity='0.12'/%3E%3Crect x='83' y='90' width='10' height='14' fill='%23614026' fill-opacity='0.15'/%3E%3C/svg%3E");
  background-size: 120px 140px;
}

/* ── ocean ── */
.bg-ocean-fish{
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='100'%3E%3Cpath d='M 31,40 C 22,28 12,20 8,22 L 15,40 L 8,58 C 12,60 22,52 31,40 Z' fill='%2300b4dc' fill-opacity='0.28'/%3E%3Cellipse cx='55' cy='40' rx='24' ry='13' fill='%2300b4dc' fill-opacity='0.24'/%3E%3Cpath d='M 45,27 C 50,18 62,16 66,22 L 60,27 Z' fill='%2300b4dc' fill-opacity='0.22'/%3E%3Cpath d='M 48,53 C 52,60 60,60 62,55 L 58,53 Z' fill='%2300b4dc' fill-opacity='0.18'/%3E%3Ccircle cx='70' cy='37' r='3.5' fill='%2300b4dc' fill-opacity='0.6'/%3E%3Ccircle cx='71.5' cy='35.5' r='1.2' fill='%23ffffff' fill-opacity='0.7'/%3E%3Cpath d='M 133,72 C 142,62 152,56 156,58 L 150,72 L 156,86 C 152,88 142,82 133,72 Z' fill='%2300c8a0' fill-opacity='0.22'/%3E%3Cellipse cx='115' cy='72' rx='18' ry='10' fill='%2300c8a0' fill-opacity='0.18'/%3E%3Cpath d='M 120,62 C 116,54 106,52 102,58 L 108,62 Z' fill='%2300c8a0' fill-opacity='0.16'/%3E%3Ccircle cx='100' cy='69' r='2.8' fill='%2300c8a0' fill-opacity='0.55'/%3E%3Ccircle cx='99' cy='68' r='1' fill='%23ffffff' fill-opacity='0.65'/%3E%3C/svg%3E");
  background-size: 160px 100px;
}
.bg-ocean-bubbles{
  background-image:
    radial-gradient(circle 5px  at 15% 25%, rgba(0,212,255,.22) 0%, transparent 100%),
    radial-gradient(circle 8px  at 55% 12%, rgba(0,212,255,.14) 0%, transparent 100%),
    radial-gradient(circle 4px  at 82% 55%, rgba(0,212,255,.20) 0%, transparent 100%),
    radial-gradient(circle 6px  at 38% 72%, rgba(0,212,255,.16) 0%, transparent 100%),
    radial-gradient(circle 4px  at 70% 82%, rgba(123,237,159,.18) 0%, transparent 100%),
    radial-gradient(circle 9px  at 8%  78%, rgba(0,212,255,.10) 0%, transparent 100%),
    radial-gradient(circle 3px  at 92% 30%, rgba(0,212,255,.20) 0%, transparent 100%);
  background-size: 140px 140px;
}

/* ── sunset ── */
.bg-sunset-rays{
  background-image: repeating-conic-gradient(
    from -90deg at 50% 115%,
    rgba(255,123,0,.09) 0deg 4deg,
    transparent 4deg 12deg
  );
}
.bg-sunset-clouds{
  /* Geschichtete Radialgradienten — weiche Abendhimmel-Wolkenbänder */
  background-image:
    radial-gradient(ellipse 620px 110px at 50% 90%, rgba(255,100,0,.10) 0%, transparent 78%),
    radial-gradient(ellipse 400px 82px  at 20% 72%, rgba(255,120,0,.11) 0%, transparent 74%),
    radial-gradient(ellipse 480px 78px  at 74% 80%, rgba(255,136,24,.10) 0%, transparent 74%),
    radial-gradient(ellipse 340px 54px  at 38% 46%, rgba(255,155,65,.10) 0%, transparent 72%),
    radial-gradient(ellipse 295px 46px  at 78% 37%, rgba(255,168,85,.09) 0%, transparent 72%),
    radial-gradient(ellipse 255px 34px  at 26% 17%, rgba(255,198,142,.09) 0%, transparent 70%),
    radial-gradient(ellipse 375px 29px  at 66%  8%, rgba(255,212,165,.08) 0%, transparent 70%);
}

/* ── light ── */
.bg-light-dots{
  background-image: radial-gradient(circle, rgba(0,86,214,.14) 1.5px, transparent 1.5px);
  background-size: 24px 24px;
}
.bg-light-paper{
  background-image:
    repeating-linear-gradient(0deg,
      rgba(0,86,214,.06) 0px, rgba(0,86,214,.06) 1px,
      transparent 1px, transparent 28px);
}
.bg-light-pril{
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Ccircle cx='73' cy='55' r='18' fill='%23e03030' fill-opacity='0.16'/%3E%3Ccircle cx='68' cy='68' r='18' fill='%23e03030' fill-opacity='0.16'/%3E%3Ccircle cx='55' cy='73' r='18' fill='%23e03030' fill-opacity='0.16'/%3E%3Ccircle cx='42' cy='68' r='18' fill='%23e03030' fill-opacity='0.16'/%3E%3Ccircle cx='37' cy='55' r='18' fill='%23e03030' fill-opacity='0.16'/%3E%3Ccircle cx='42' cy='42' r='18' fill='%23e03030' fill-opacity='0.16'/%3E%3Ccircle cx='55' cy='37' r='18' fill='%23e03030' fill-opacity='0.16'/%3E%3Ccircle cx='68' cy='42' r='18' fill='%23e03030' fill-opacity='0.16'/%3E%3Ccircle cx='55' cy='55' r='12' fill='%23ffd700' fill-opacity='0.30'/%3E%3Ccircle cx='161' cy='82' r='13' fill='%233366ff' fill-opacity='0.14'/%3E%3Ccircle cx='157' cy='91' r='13' fill='%233366ff' fill-opacity='0.14'/%3E%3Ccircle cx='148' cy='95' r='13' fill='%233366ff' fill-opacity='0.14'/%3E%3Ccircle cx='139' cy='91' r='13' fill='%233366ff' fill-opacity='0.14'/%3E%3Ccircle cx='135' cy='82' r='13' fill='%233366ff' fill-opacity='0.14'/%3E%3Ccircle cx='139' cy='73' r='13' fill='%233366ff' fill-opacity='0.14'/%3E%3Ccircle cx='148' cy='69' r='13' fill='%233366ff' fill-opacity='0.14'/%3E%3Ccircle cx='157' cy='73' r='13' fill='%233366ff' fill-opacity='0.14'/%3E%3Ccircle cx='148' cy='82' r='9' fill='%23ff66cc' fill-opacity='0.28'/%3E%3Ccircle cx='53' cy='155' r='15' fill='%2322bb55' fill-opacity='0.14'/%3E%3Ccircle cx='49' cy='166' r='15' fill='%2322bb55' fill-opacity='0.14'/%3E%3Ccircle cx='38' cy='170' r='15' fill='%2322bb55' fill-opacity='0.14'/%3E%3Ccircle cx='27' cy='166' r='15' fill='%2322bb55' fill-opacity='0.14'/%3E%3Ccircle cx='23' cy='155' r='15' fill='%2322bb55' fill-opacity='0.14'/%3E%3Ccircle cx='27' cy='144' r='15' fill='%2322bb55' fill-opacity='0.14'/%3E%3Ccircle cx='38' cy='140' r='15' fill='%2322bb55' fill-opacity='0.14'/%3E%3Ccircle cx='49' cy='144' r='15' fill='%2322bb55' fill-opacity='0.14'/%3E%3Ccircle cx='38' cy='155' r='10' fill='%23ff8800' fill-opacity='0.28'/%3E%3C/svg%3E");
  background-size: 200px 200px;
}

/* ── mono ── */
.bg-mono-grid{
  background-image:
    linear-gradient(rgba(255,255,255,.07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.07) 1px, transparent 1px);
  background-size: 32px 32px;
}
.bg-mono-halftone{
  background-image:
    radial-gradient(circle, rgba(255,255,255,.20) 1.5px, transparent 1.5px),
    radial-gradient(circle, rgba(255,255,255,.10) 1px,   transparent 1px);
  background-size: 14px 14px, 14px 14px;
  background-position: 0 0, 7px 7px;
}

/* ── sakura ── */
/* Blüten: einzelne treibende Blütenblätter (keine vollständigen Blumen) */
.bg-sakura-petals{
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='130' height='130'%3E%3Cpath transform='translate(38,42) rotate(28)' d='M0,0 C-8,-3 -10,-15 0,-24 C10,-15 8,-3 0,0' fill='%23ffb3c6' fill-opacity='0.28'/%3E%3Cpath transform='translate(98,22) rotate(-52)' d='M0,0 C-7,-2 -9,-13 0,-21 C9,-13 7,-2 0,0' fill='%23ff8fab' fill-opacity='0.24'/%3E%3Cpath transform='translate(18,92) rotate(75)' d='M0,0 C-7,-2 -9,-13 0,-21 C9,-13 7,-2 0,0' fill='%23ffb3c6' fill-opacity='0.22'/%3E%3Cpath transform='translate(110,80) rotate(-18)' d='M0,0 C-5,-2 -7,-11 0,-17 C7,-11 5,-2 0,0' fill='%23e91e63' fill-opacity='0.17'/%3E%3Cpath transform='translate(68,115) rotate(48)' d='M0,0 C-8,-3 -10,-15 0,-24 C10,-15 8,-3 0,0' fill='%23ffb3c6' fill-opacity='0.25'/%3E%3Cpath transform='translate(115,48) rotate(12)' d='M0,0 C-4,-1 -5,-9 0,-14 C5,-9 4,-1 0,0' fill='%23ff6b9d' fill-opacity='0.20'/%3E%3Ccircle cx='60' cy='18' r='1.5' fill='%23e91e63' fill-opacity='0.16'/%3E%3Ccircle cx='82' cy='95' r='1.2' fill='%23ff6b9d' fill-opacity='0.14'/%3E%3Ccircle cx='28' cy='62' r='1' fill='%23ffb3c6' fill-opacity='0.20'/%3E%3C/svg%3E");
  background-size: 130px 130px;
}
/* Kirschblüten: vollständige 5-blättrige Blumen als Muster */
.bg-sakura-bloom{
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='90' height='90'%3E%3Cg transform='translate(56,50)'%3E%3Cg opacity='0.19' fill='%23ffb3c6'%3E%3Cpath transform='rotate(0)' d='M0,0 C-9,-2 -11,-12 -3,-20 Q0,-22 3,-20 C11,-12 9,-2 0,0'/%3E%3Cpath transform='rotate(72)' d='M0,0 C-9,-2 -11,-12 -3,-20 Q0,-22 3,-20 C11,-12 9,-2 0,0'/%3E%3Cpath transform='rotate(144)' d='M0,0 C-9,-2 -11,-12 -3,-20 Q0,-22 3,-20 C11,-12 9,-2 0,0'/%3E%3Cpath transform='rotate(216)' d='M0,0 C-9,-2 -11,-12 -3,-20 Q0,-22 3,-20 C11,-12 9,-2 0,0'/%3E%3Cpath transform='rotate(288)' d='M0,0 C-9,-2 -11,-12 -3,-20 Q0,-22 3,-20 C11,-12 9,-2 0,0'/%3E%3C/g%3E%3Ccircle r='5' fill='%23e91e63' fill-opacity='0.20'/%3E%3Ccircle r='2' fill='%23ffeecc' fill-opacity='0.45'/%3E%3C/g%3E%3Cg transform='translate(16,18)'%3E%3Cg opacity='0.14' fill='%23ff6b9d'%3E%3Cpath transform='rotate(20)' d='M0,0 C-5,-1 -7,-8 -2,-13 Q0,-15 2,-13 C7,-8 5,-1 0,0'/%3E%3Cpath transform='rotate(92)' d='M0,0 C-5,-1 -7,-8 -2,-13 Q0,-15 2,-13 C7,-8 5,-1 0,0'/%3E%3Cpath transform='rotate(164)' d='M0,0 C-5,-1 -7,-8 -2,-13 Q0,-15 2,-13 C7,-8 5,-1 0,0'/%3E%3Cpath transform='rotate(236)' d='M0,0 C-5,-1 -7,-8 -2,-13 Q0,-15 2,-13 C7,-8 5,-1 0,0'/%3E%3Cpath transform='rotate(308)' d='M0,0 C-5,-1 -7,-8 -2,-13 Q0,-15 2,-13 C7,-8 5,-1 0,0'/%3E%3C/g%3E%3Ccircle r='2.5' fill='%23e91e63' fill-opacity='0.18'/%3E%3C/g%3E%3Ccircle cx='82' cy='72' r='1.5' fill='%23ff8fab' fill-opacity='0.16'/%3E%3Ccircle cx='7' cy='80' r='1' fill='%23ffb3c6' fill-opacity='0.18'/%3E%3Ccircle cx='42' cy='8' r='1.5' fill='%23ff6b9d' fill-opacity='0.14'/%3E%3C/svg%3E");
  background-size: 90px 90px;
}

/* ── ice ── */
.bg-ice-crystals{
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='80'%3E%3Cpolygon points='40,6 52,30 40,54 28,30' fill='%2390e0f0' fill-opacity='0.14' stroke='%231565c0' stroke-opacity='0.22' stroke-width='0.8'/%3E%3Cpolygon points='40,6 52,30 40,54' fill='%23ffffff' fill-opacity='0.06'/%3E%3Cpolygon points='66,14 74,28 66,42 58,28' fill='%2300bcd4' fill-opacity='0.12' stroke='%231565c0' stroke-opacity='0.18' stroke-width='0.7'/%3E%3Cpolygon points='66,14 74,28 66,42' fill='%23ffffff' fill-opacity='0.05'/%3E%3Cpolygon points='16,50 24,64 16,78 8,64' fill='%2390e0f0' fill-opacity='0.12' stroke='%231565c0' stroke-opacity='0.18' stroke-width='0.7'/%3E%3Cpolygon points='16,50 24,64 16,78' fill='%23ffffff' fill-opacity='0.04'/%3E%3Ccircle cx='57' cy='8' r='1.8' fill='%23ffffff' fill-opacity='0.50'/%3E%3Ccircle cx='11' cy='36' r='1.2' fill='%23b0e8f8' fill-opacity='0.45'/%3E%3Ccircle cx='72' cy='56' r='1.5' fill='%23ffffff' fill-opacity='0.42'/%3E%3Ccircle cx='34' cy='72' r='1' fill='%23b0e8f8' fill-opacity='0.38'/%3E%3C/svg%3E");
  background-size: 80px 80px;
}
.bg-ice-snow{
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100'%3E%3Cg stroke='rgba(140,210,255,0.55)' stroke-width='1.5' fill='none'%3E%3Cline x1='50' y1='14' x2='50' y2='42'/%3E%3Cline x1='36' y1='21' x2='64' y2='35'/%3E%3Cline x1='36' y1='35' x2='64' y2='21'/%3E%3Cline x1='47' y1='18' x2='43' y2='14'/%3E%3Cline x1='53' y1='18' x2='57' y2='14'/%3E%3Cline x1='47' y1='38' x2='43' y2='42'/%3E%3Cline x1='53' y1='38' x2='57' y2='42'/%3E%3C/g%3E%3Cg stroke='rgba(140,210,255,0.40)' stroke-width='1' fill='none'%3E%3Cline x1='18' y1='64' x2='18' y2='78'/%3E%3Cline x1='11' y1='68' x2='25' y2='74'/%3E%3Cline x1='11' y1='74' x2='25' y2='68'/%3E%3Cline x1='15' y1='66' x2='12' y2='63'/%3E%3Cline x1='21' y1='66' x2='24' y2='63'/%3E%3C/g%3E%3Cg stroke='rgba(140,210,255,0.35)' stroke-width='1' fill='none'%3E%3Cline x1='80' y1='66' x2='80' y2='78'/%3E%3Cline x1='74' y1='69' x2='86' y2='75'/%3E%3Cline x1='74' y1='75' x2='86' y2='69'/%3E%3C/g%3E%3Ccircle cx='7' cy='18' r='1.5' fill='rgba(180,230,255,0.50)'/%3E%3Ccircle cx='88' cy='10' r='1' fill='rgba(180,230,255,0.45)'/%3E%3Ccircle cx='67' cy='52' r='1.5' fill='rgba(180,230,255,0.40)'/%3E%3Ccircle cx='32' cy='90' r='1' fill='rgba(180,230,255,0.40)'/%3E%3Ccircle cx='92' cy='48' r='1.5' fill='rgba(180,230,255,0.35)'/%3E%3Ccircle cx='44' cy='6' r='1' fill='rgba(180,230,255,0.35)'/%3E%3C/svg%3E");
  background-size: 100px 100px;
}

/* ── sand ── */
.bg-sand-dunes{
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='320' height='100'%3E%3Cpath d='M0,58 C30,44 60,52 100,42 C140,32 170,50 220,38 C260,28 290,46 320,36 L320,100 L0,100 Z' fill='%23c8a040' fill-opacity='0.09'/%3E%3Cpath d='M0,72 C25,58 55,68 95,56 C130,46 165,65 210,55 C250,46 285,64 320,52 L320,100 L0,100 Z' fill='%23c8880e' fill-opacity='0.13'/%3E%3Cpath d='M0,85 C20,74 50,82 90,72 C125,63 160,80 200,72 C235,65 270,80 320,70 L320,100 L0,100 Z' fill='%23c87a00' fill-opacity='0.16'/%3E%3Ccircle cx='40' cy='55' r='1' fill='%23c8a040' fill-opacity='0.28'/%3E%3Ccircle cx='95' cy='44' r='0.8' fill='%23c8a040' fill-opacity='0.22'/%3E%3Ccircle cx='160' cy='50' r='1' fill='%23c8a040' fill-opacity='0.25'/%3E%3Ccircle cx='230' cy='40' r='0.8' fill='%23c8a040' fill-opacity='0.20'/%3E%3Ccircle cx='290' cy='48' r='1' fill='%23c8a040' fill-opacity='0.24'/%3E%3Ccircle cx='70' cy='68' r='0.8' fill='%23c8880e' fill-opacity='0.22'/%3E%3Ccircle cx='140' cy='62' r='1' fill='%23c8880e' fill-opacity='0.26'/%3E%3Ccircle cx='210' cy='58' r='0.8' fill='%23c8880e' fill-opacity='0.22'/%3E%3Ccircle cx='270' cy='70' r='1' fill='%23c8880e' fill-opacity='0.26'/%3E%3Ccircle cx='50' cy='80' r='1' fill='%23c87a00' fill-opacity='0.30'/%3E%3Ccircle cx='110' cy='76' r='0.8' fill='%23c87a00' fill-opacity='0.26'/%3E%3Ccircle cx='175' cy='78' r='1' fill='%23c87a00' fill-opacity='0.30'/%3E%3Ccircle cx='250' cy='75' r='0.8' fill='%23c87a00' fill-opacity='0.26'/%3E%3C/svg%3E");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: bottom center;
}
.bg-sand-oasis{
  /* 2 Palmen als Einzelbild — gebogener Stamm + drapenartige Wedel */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='350' height='230'%3E%3Cpath d='M 99,230 Q 108,150 120,68 Q 130,150 116,230 Z' fill='%237a5200' fill-opacity='0.24'/%3E%3Cpath d='M 120,68 C 100,52 82,38 65,35 C 84,44 102,58 120,68 Z' fill='%233d6b28' fill-opacity='0.21'/%3E%3Cpath d='M 120,68 C 96,56 72,58 48,72 C 72,74 96,74 120,68 Z' fill='%233d6b28' fill-opacity='0.19'/%3E%3Cpath d='M 120,70 C 102,74 84,86 62,108 C 86,84 104,72 120,70 Z' fill='%233d6b28' fill-opacity='0.18'/%3E%3Cpath d='M 121,70 C 116,85 112,100 108,118 C 116,100 120,84 121,70 Z' fill='%233d6b28' fill-opacity='0.17'/%3E%3Cpath d='M 122,70 C 138,74 154,86 170,108 C 152,84 136,72 122,70 Z' fill='%233d6b28' fill-opacity='0.18'/%3E%3Cpath d='M 122,68 C 144,58 164,60 188,74 C 164,76 144,74 122,68 Z' fill='%233d6b28' fill-opacity='0.19'/%3E%3Cpath d='M 122,68 C 140,54 158,40 174,35 C 156,44 138,58 122,68 Z' fill='%233d6b28' fill-opacity='0.21'/%3E%3Cpath d='M 121,67 C 124,50 130,34 132,18 C 136,34 134,52 121,67 Z' fill='%233d6b28' fill-opacity='0.20'/%3E%3Cpath d='M 278,230 Q 276,175 272,118 Q 280,175 290,230 Z' fill='%237a5200' fill-opacity='0.18'/%3E%3Cpath d='M 271,118 C 258,108 244,96 228,92 C 244,102 258,112 271,118 Z' fill='%233d6b28' fill-opacity='0.16'/%3E%3Cpath d='M 271,118 C 254,112 236,114 218,122 C 236,118 254,118 271,118 Z' fill='%233d6b28' fill-opacity='0.15'/%3E%3Cpath d='M 270,120 C 258,122 246,130 238,148 C 248,128 260,120 270,120 Z' fill='%233d6b28' fill-opacity='0.14'/%3E%3Cpath d='M 273,118 C 288,112 304,114 322,122 C 304,118 288,118 273,118 Z' fill='%233d6b28' fill-opacity='0.15'/%3E%3Cpath d='M 273,118 C 286,108 300,96 314,92 C 300,102 286,112 273,118 Z' fill='%233d6b28' fill-opacity='0.16'/%3E%3Cpath d='M 272,117 C 274,104 278,90 280,78 C 282,90 282,106 272,117 Z' fill='%233d6b28' fill-opacity='0.15'/%3E%3C/svg%3E");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center bottom;
}

/* ═══════════════════════════════════════════
   GLOBAL FOOTER
═══════════════════════════════════════════ */
#global-footer{
  position:fixed;bottom:0;left:0;right:0;z-index:500;
  height:32px;
  display:flex;align-items:center;justify-content:center;gap:.6rem;
  background:var(--bg2);
  border-top:1px solid var(--border);
  font-size:10px;
  color:var(--text3);
  letter-spacing:.04em;
  transition:background .3s,border-color .3s,color .3s;
}
.footer-sep{opacity:.4;}
#global-footer span:last-child{color:var(--text2);}
.footer-link{color:var(--text2);text-decoration:none;transition:color .15s;}
.footer-link:hover{color:var(--accent);text-decoration:underline;}

/* ════════════════════════════════════════════════════════════
   FEEDBACK BUTTON & MODAL
   ════════════════════════════════════════════════════════════ */
#feedback-btn{
  position:fixed;top:1rem;left:1rem;z-index:900;
  background:color-mix(in srgb,var(--red) 10%,var(--surface));
  border:1px solid color-mix(in srgb,var(--red) 35%,transparent);
  border-radius:99px;
  padding:8px 14px;font-size:13px;font-weight:500;color:var(--red);
  cursor:pointer;box-shadow:var(--card-shadow);
  transition:background .15s,border-color .15s,box-shadow .15s;
}
#feedback-btn:hover{
  background:color-mix(in srgb,var(--red) 16%,var(--surface));
  border-color:color-mix(in srgb,var(--red) 55%,transparent);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--red) 12%,transparent);
}

/* Modal overlay */
#feedback-modal{
  display:none;position:fixed;inset:0;z-index:99998;
  align-items:center;justify-content:center;padding:1rem;
  background:rgba(0,0,0,.45);backdrop-filter:blur(3px);
}
#feedback-modal.open{display:flex;}

/* Modal card */
#feedback-box{
  background:var(--surface);border-radius:20px;
  padding:1.875rem 2rem 2rem;
  width:min(500px,100%);
  max-height:calc(100vh - 2rem);overflow-y:auto;
  box-shadow:0 20px 60px rgba(0,0,0,.2);
  font-family:system-ui,-apple-system,'Segoe UI',sans-serif;
  animation:fadeDown .2s ease;
}

/* Header */
#feedback-header{
  display:flex;align-items:center;justify-content:space-between;
  margin-bottom:.75rem;
}
#feedback-title{
  font-size:1.125rem;font-weight:700;color:var(--text);
}
#feedback-close{
  background:none;border:none;font-size:1.125rem;
  color:var(--text3);cursor:pointer;padding:.25rem;line-height:1;
  transition:color .15s;
}
#feedback-close:hover{color:var(--text);}

#feedback-sub{
  font-size:.8125rem;color:var(--text2);line-height:1.6;margin:0 0 .375rem;
}
#feedback-quota{
  font-size:.8125rem;font-weight:600;margin:0 0 1.125rem;
}
#feedback-quota.ok{color:var(--green);}
#feedback-quota.warn{color:var(--gold);}
#feedback-quota.full{color:var(--red);}

/* Fields */
.fb-field{display:flex;flex-direction:column;gap:.35rem;margin-bottom:.875rem;}
.fb-label{font-size:.75rem;font-weight:600;color:var(--text2);letter-spacing:.01em;}
.fb-input{
  padding:.68rem 1rem;font-size:.9375rem;font-family:inherit;color:var(--text);
  background:var(--surface2);border:1.5px solid var(--border);border-radius:10px;
  outline:none;box-sizing:border-box;width:100%;
  transition:border-color .15s,box-shadow .15s;
}
.fb-input:focus{
  background:var(--surface);border-color:var(--accent);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 20%,transparent);
}
.fb-textarea{resize:vertical;min-height:100px;}

/* Message + submit */
#feedback-msg{
  font-size:.8125rem;min-height:1.15em;
  margin-bottom:.625rem;line-height:1.5;
}
#feedback-msg.ok{color:var(--green);}
#feedback-msg.err{color:var(--red);}
#feedback-submit{
  width:100%;padding:.75rem;
  background:var(--red);border:none;border-radius:10px;
  color:#fff;font-size:.9375rem;font-weight:600;
  cursor:pointer;transition:background .15s,opacity .15s;
}
#feedback-submit:hover{opacity:.85;}
#feedback-submit:disabled{opacity:.5;cursor:default;}

/* ═══════════════════════════════════════════
   TOP CONTROLS (profile + settings)
═══════════════════════════════════════════ */
#top-controls{
  position:fixed;top:1rem;right:1rem;z-index:900;
  display:flex;align-items:center;gap:.5rem;
}

/* ── Profile button ── */
#profile-btn{
  display:flex;align-items:center;justify-content:center;
  width:36px;height:36px;padding:0;
  background:var(--accent);
  border:none;border-radius:99px;
  cursor:pointer;
  box-shadow:var(--card-shadow);
  flex-shrink:0;
  transition:opacity .15s,box-shadow .15s;
}
#profile-btn:hover{opacity:.85;box-shadow:var(--glow);}
#profile-initials{
  font-size:12px;font-weight:700;color:#fff;
  letter-spacing:.02em;line-height:1;
  pointer-events:none;
}

/* ── Profile panel ── */
#profile-panel{
  display:none;
  position:fixed;top:3.5rem;right:1rem;z-index:899;
  background:var(--surface2);
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:1.25rem;
  width:272px;
  box-shadow:var(--card-shadow);
  animation:fadeDown .2s ease;
  max-height:calc(100vh - 5rem);
  overflow-y:auto;
}
#profile-panel.open{display:block;}
#pp-name{
  font-size:.9375rem;font-weight:600;color:var(--text);
  margin-bottom:.25rem;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
#pp-email{
  font-size:.75rem;color:var(--text2);
  margin-bottom:.875rem;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
#pp-logout{
  width:100%;padding:.5rem .875rem;
  background:transparent;
  border:1px solid var(--border);border-radius:8px;
  color:var(--text);font-size:.8125rem;font-weight:500;
  cursor:pointer;text-align:left;
  transition:background .15s,border-color .15s,color .15s;
}
#pp-logout:hover{
  background:color-mix(in srgb,var(--red) 10%,var(--surface));
  border-color:color-mix(in srgb,var(--red) 40%,transparent);
  color:var(--red);
}

/* ── Kontoeinstellungen-Button im Panel ── */
#pp-account-btn{
  width:100%;padding:.5rem .875rem;
  background:transparent;
  border:1px solid var(--border);border-radius:8px;
  color:var(--text);font-size:.8125rem;font-weight:500;
  cursor:pointer;text-align:left;margin-bottom:.75rem;
  transition:background .15s,border-color .15s,color .15s;
}
#pp-account-btn:hover{border-color:var(--accent);color:var(--accent);}

/* ════════════════════════════════════════════════════════════
   KONTOEINSTELLUNGEN PAGE
   ════════════════════════════════════════════════════════════ */
#page-account{
  min-height:100vh;
  background:var(--bg);
  padding:4rem 1rem 5rem;
}
.as-wrap{
  max-width:560px;
  margin:0 auto;
}
.as-page-title{
  font-size:1.625rem;font-weight:700;color:var(--text);
  margin:.25rem 0 1.75rem;letter-spacing:-.025em;
}
.as-section{
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:16px;
  padding:1.625rem 1.75rem;
  margin-bottom:1rem;
}
.as-section-title{
  font-size:.9375rem;font-weight:600;color:var(--text);
  margin:0 0 1.125rem;letter-spacing:-.01em;
}
.as-row{
  display:grid;grid-template-columns:1fr 1fr;gap:.75rem;
  margin-bottom:.75rem;
}
.as-field{display:flex;flex-direction:column;gap:.35rem;margin-bottom:.75rem;}
.as-label{font-size:.75rem;font-weight:600;color:var(--text2);letter-spacing:.01em;}
.as-input{
  padding:.68rem 1rem;
  font-size:.9375rem;font-family:inherit;color:var(--text);
  background:var(--surface2);
  border:1.5px solid var(--border);border-radius:10px;
  outline:none;box-sizing:border-box;width:100%;
  transition:border-color .15s,box-shadow .15s,background .15s;
}
.as-input:focus{
  background:var(--surface);border-color:var(--accent);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 20%,transparent);
}
.as-input[readonly]{opacity:.55;cursor:default;}
.as-msg{
  font-size:.8125rem;min-height:1.15em;
  margin-bottom:.625rem;line-height:1.5;
}
.as-msg.ok{color:var(--green);}
.as-msg.err{color:var(--red);}
.as-btn{
  padding:.65rem 1.375rem;
  background:var(--accent);border:none;border-radius:10px;
  color:#fff;font-size:.875rem;font-weight:600;
  cursor:pointer;transition:opacity .15s;
}
.as-btn:hover{opacity:.85;}
.as-btn:disabled{opacity:.4;cursor:default;}

/* ── Danger / Gefahrenzone ── */
.as-danger-section{
  background:color-mix(in srgb,var(--red) 8%,var(--surface));
  border:2px solid var(--red);
  border-radius:16px;
  padding:1.625rem 1.75rem;
  margin-bottom:1rem;
  box-shadow:0 0 0 4px color-mix(in srgb,var(--red) 8%,transparent);
}
.as-danger-header{
  display:flex;align-items:center;gap:.625rem;
  margin-bottom:1rem;
}
.as-danger-icon{font-size:1.375rem;line-height:1;}
.as-danger-title{
  font-size:1rem;font-weight:700;color:var(--red);
  margin:0;letter-spacing:-.01em;
}
.as-danger-text{
  font-size:.875rem;color:var(--text2);
  line-height:1.65;margin:0 0 1.25rem;
}
.as-danger-text strong{color:var(--text);font-weight:700;}
.as-danger-label{
  display:block;font-size:.75rem;font-weight:600;
  color:var(--red);letter-spacing:.01em;margin-bottom:.35rem;
}
.as-danger-input{
  border-color:color-mix(in srgb,var(--red) 50%,var(--border)) !important;
  background:var(--surface2) !important;
}
.as-danger-input:focus{
  border-color:var(--red) !important;
  box-shadow:0 0 0 3px color-mix(in srgb,var(--red) 15%,transparent) !important;
}
.as-msg-danger.err{color:var(--red);}
.as-btn-danger{
  background:var(--red);width:100%;
  padding:.75rem;font-size:.9375rem;
}
.as-btn-danger:hover{opacity:.85;background:var(--red);}
.as-btn-danger:disabled{background:var(--red);}

@media(max-width:480px){
  .as-row{grid-template-columns:1fr;}
  .as-section{padding:1.25rem;}
}

@keyframes fadeDown{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:translateY(0)}}

.sp-title{
  font-size:11px;
  font-weight:700;
  color:var(--text3);
  letter-spacing:.1em;
  text-transform:uppercase;
  margin-bottom:.75rem;
}
.theme-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:7px;
  margin-bottom:.25rem;
}
.theme-btn{
  border:1px solid var(--border);
  background:var(--bg3);
  border-radius:8px;
  padding:7px 10px;
  font-size:11px;
  color:var(--text2);
  display:flex;align-items:center;gap:6px;
}
.theme-btn:hover{border-color:var(--accent);color:var(--text);}
.theme-btn.active{border-color:var(--accent);color:var(--accent);background:var(--surface);}
.theme-dot{width:10px;height:10px;border-radius:50%;flex-shrink:0;}
.sp-sep{border:none;border-top:1px solid var(--border);margin:.75rem 0;}

/* Background grid */
.bg-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:7px;
  margin-bottom:.25rem;
}
.bg-option{
  border:1px solid var(--border);
  background:var(--bg3);
  border-radius:8px;
  padding:0;
  display:flex;flex-direction:column;align-items:center;
  gap:4px;
  overflow:hidden;
  cursor:pointer;
  transition:border-color .15s,box-shadow .15s;
  padding-bottom:6px;
  position:relative;
}
.bg-option:hover:not(.locked){border-color:var(--accent);}
.bg-option.active{border-color:var(--accent);box-shadow:var(--glow);}
.bg-option.locked{cursor:default;opacity:.55;}
.bg-preview{
  width:100%;
  height:44px;
  overflow:hidden;
  border-radius:6px 6px 0 0;
  position:relative;
  background:var(--bg2);
}
.bg-preview-inner{
  position:absolute;inset:0;
}
.bg-lock{
  position:absolute;top:3px;right:4px;
  font-size:11px;line-height:1;
  opacity:.7;
}
.bg-label{
  font-size:9px;
  color:var(--text2);
  text-align:center;
  padding:0 4px;
  line-height:1.2;
}
.bg-option.active .bg-label{color:var(--accent);}
.bg-hint{
  font-size:8px;color:var(--text3);text-align:center;
  padding:0 4px;line-height:1.2;
  display:none;
}
.bg-option.locked:hover .bg-hint{display:block;}

.sp-option{display:flex;align-items:center;justify-content:space-between;padding:6px 0;font-size:13px;color:var(--text2);}
.sp-toggle{appearance:none;width:34px;height:18px;background:var(--border);border-radius:99px;cursor:pointer;position:relative;transition:background .2s;flex-shrink:0;border:none;}
.sp-toggle:checked{background:var(--accent);}
.sp-toggle::after{content:'';position:absolute;width:14px;height:14px;background:#fff;border-radius:50%;top:2px;left:2px;transition:left .2s;}
.sp-toggle:checked::after{left:18px;}

/* ═══════════════════════════════════════════
   HOMEPAGE
═══════════════════════════════════════════ */
#page-home{
  min-height:100vh;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  padding:2rem 1rem 5rem;
  position:relative;
  overflow:hidden;
}

/* Pixel grid bg — feste RGBA-Farbe, sichtbar auf allen Themes */
#page-home::before{
  content:'';
  position:absolute;inset:0;
  background-image:
    linear-gradient(rgba(255,255,255,.09) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.09) 1px, transparent 1px);
  background-size:40px 40px;
  opacity:1;
  pointer-events:none;
  transition:opacity .3s;
}
/* Dunklere Linien auf hellen Themes */
[data-theme="light"] #page-home::before,
[data-theme="sakura"] #page-home::before,
[data-theme="ice"] #page-home::before,
[data-theme="sand"] #page-home::before{
  background-image:
    linear-gradient(rgba(0,0,0,.09) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0,0,0,.09) 1px, transparent 1px);
}

/* ── Logo-Icon ── */
.home-icon-wrap{display:flex;justify-content:center;margin-bottom:1rem;}
.home-icon{width:80px;height:80px;display:none;}
.home-icon-retro{display:block;}
[data-style="modern"] .home-icon-retro{display:none;}
[data-style="modern"] .home-icon-modern{display:block;}

/* Modern: Icon etwas kleiner + kein Abstand zur Überschrift */
[data-style="modern"] .home-icon-wrap{margin-bottom:.5rem;}
[data-style="modern"] .home-icon{width:68px;height:68px;}

.home-logo{
  font-family:var(--font-retro);
  font-size:clamp(20px,5vw,42px);
  color:var(--accent);
  text-shadow:3px 3px 0 var(--accent2), 6px 6px 0 rgba(0,0,0,.5);
  letter-spacing:2px;
  margin-bottom:.5rem;
  text-align:center;
  animation:glow-pulse 3s ease-in-out infinite;
}
@keyframes glow-pulse{
  0%,100%{text-shadow:3px 3px 0 var(--accent2),6px 6px 0 #000,0 0 20px var(--accent);}
  50%{text-shadow:3px 3px 0 var(--accent2),6px 6px 0 #000,0 0 40px var(--accent),0 0 60px var(--accent);}
}

.home-sub{
  font-family:var(--font-retro);
  font-size:clamp(6px,1.5vw,10px);
  color:var(--text2);
  letter-spacing:3px;
  margin-bottom:3rem;
  text-align:center;
  /* Halo in Hintergrundfarbe → lesbar auf allen Backgrounds */
  text-shadow:
    0 0 18px var(--bg),
    0 0 10px var(--bg),
    1px 1px 4px var(--bg),
    -1px -1px 4px var(--bg);
}

.home-insert{
  font-family:var(--font-retro);
  font-size:clamp(7px,1.5vw,10px);
  color:var(--accent);
  letter-spacing:2px;
  margin-bottom:3.5rem;
  animation:blink 1.2s step-end infinite;
  text-align:center;
  text-shadow:
    0 0 14px var(--bg),
    0 0 7px var(--bg);
}
@keyframes blink{0%,100%{opacity:1}50%{opacity:0}}

.module-grid{
  display:flex;
  flex-direction:column;
  gap:1.25rem;
  width:100%;
  max-width:520px;
}

.module-btn{
  background:var(--surface);
  border:2px solid var(--border);
  border-radius:var(--radius);
  padding:1.25rem 1.75rem;
  text-align:left;
  position:relative;
  overflow:hidden;
  transition:border-color .2s, box-shadow .2s, transform .15s;
}
.module-btn::before{
  content:'';
  position:absolute;left:0;top:0;bottom:0;
  width:4px;
  background:var(--accent);
  opacity:0;
  transition:opacity .2s;
}
.module-btn:hover{border-color:var(--accent);box-shadow:var(--glow);transform:translateX(4px);}
.module-btn:hover::before{opacity:1;}
.module-btn.locked{opacity:.5;cursor:not-allowed;}
.module-btn.locked:hover{border-color:var(--border);box-shadow:none;transform:none;}
.module-btn.locked::before{display:none;}
.mb-tag{font-family:var(--font-retro);font-size:9px;color:var(--accent);margin-bottom:.5rem;letter-spacing:1px;}
.mb-title{font-size:15px;font-weight:600;color:var(--text);margin-bottom:.25rem;}
.mb-sub{font-size:12px;color:var(--text2);}
.mb-topics{font-size:11px;color:var(--text3);margin-top:.35rem;line-height:1.6;}
.mb-lock{position:absolute;right:1.25rem;top:50%;transform:translateY(-50%);font-size:20px;opacity:.4;}
.mb-arrow{position:absolute;right:1.25rem;top:50%;transform:translateY(-50%);font-size:18px;color:var(--accent);opacity:0;transition:opacity .2s;}
.module-btn:hover .mb-arrow{opacity:1;}

/* ═══════════════════════════════════════════
   D1 PAGE
═══════════════════════════════════════════ */
#page-d1{
  display:none;
  min-height:100vh;
  padding:1rem 1rem 5rem;
}

.back-btn{
  display:inline-flex;align-items:center;gap:8px;
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:99px;
  padding:7px 16px;
  font-size:12px;
  color:var(--text2);
  margin-bottom:1.5rem;
}
.back-btn:hover{border-color:var(--accent);color:var(--accent);}

.retro-title-wrap{display:flex;justify-content:center;margin-bottom:2rem;margin-top:.5rem;}
.retro-title{
  font-family:var(--font-retro);
  font-size:clamp(10px,2.5vw,18px);
  color:var(--accent);
  text-shadow:2px 2px 0 var(--accent2), 4px 4px 0 rgba(0,0,0,.6);
  letter-spacing:2px;
  border:2px solid var(--accent);
  padding:12px 20px;
  box-shadow:var(--glow);
  text-align:center;
  border-radius:4px;
}

.d1-container{max-width:680px;margin:0 auto;}

.mode-tabs{display:flex;gap:4px;margin-bottom:1.5rem;background:var(--bg3);border-radius:10px;padding:4px;flex-wrap:wrap;}
.mode-tab{flex:1;min-width:0;padding:8px 4px;border:none;border-radius:7px;font-size:12px;font-weight:600;background:transparent;color:var(--text2);transition:all .2s;white-space:nowrap;}
.mode-tab.active{background:var(--surface2);color:var(--accent);box-shadow:0 1px 6px rgba(0,0,0,.4);}
@media(max-width:400px){
  .mode-tab{ font-size:11px;padding:7px 2px; }
}

.filter-row{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:.75rem;align-items:center;}
.filter-label{font-size:11px;color:var(--text3);flex-shrink:0;}
.fbtn{font-size:11px;padding:3px 11px;border-radius:99px;border:1px solid var(--border);background:transparent;cursor:pointer;color:var(--text2);}
.fbtn.active{background:var(--surface2);border-color:var(--accent);color:var(--accent);}

/* ── Exam-Toggle ── */
.exam-wrap{
  display:inline-flex;align-items:center;gap:9px;
  padding:6px 12px 6px 8px;
  border-radius:99px;
  border:1px solid var(--border);
  background:var(--surface);
  cursor:pointer;
  margin-bottom:1rem;
  transition:border-color .2s, background .2s, box-shadow .2s;
  user-select:none;
}
.exam-wrap:has(.ex-toggle:checked){
  border-color:var(--accent);
  background:var(--accent);
  box-shadow:0 0 0 1px var(--accent);
}
.exam-wrap:has(.ex-toggle:checked) .ex-label{color:#fff;}
.exam-wrap:has(.ex-toggle:checked) .ex-toggle{
  background:rgba(0,0,0,0.22);
  border-color:rgba(0,0,0,0.12);
}
.ex-toggle{
  appearance:none;flex-shrink:0;
  width:32px;height:18px;
  background:var(--bg3);
  border:1px solid var(--border);
  border-radius:99px;
  cursor:pointer;
  position:relative;
  transition:background .2s, border-color .2s;
}
.ex-toggle:checked{background:var(--accent);border-color:var(--accent);}
.ex-toggle::after{
  content:'';position:absolute;
  width:12px;height:12px;
  background:#fff;border-radius:50%;
  top:2px;left:2px;
  transition:left .18s cubic-bezier(.4,0,.2,1);
  box-shadow:0 1px 3px rgba(0,0,0,.3);
}
.ex-toggle:checked::after{left:16px;}
.ex-label{font-size:12.5px;color:var(--text2);cursor:pointer;display:flex;align-items:center;gap:6px;}
.exam-pill{
  background:var(--gold);
  color:#fff;
  border:none;
  border-radius:99px;font-size:10px;
  padding:1px 7px;white-space:nowrap;font-weight:600;letter-spacing:.02em;
}

/* ── Fortschrittsbalken ── */
.prog-text{
  font-size:11px;color:var(--text3);
  margin-bottom:7px;
  display:flex;justify-content:space-between;align-items:baseline;
}
.prog-bg{
  background:var(--surface2);
  border:1px solid var(--border);
  border-radius:99px;height:7px;
  margin-bottom:1.25rem;
  position:relative;
  overflow:visible;
}
.prog-fill{
  border-radius:99px;height:100%;
  transition:width .45s cubic-bezier(.4,0,.2,1),background .4s ease,box-shadow .4s ease;
}
/* Farbstufen — kühl → lila → gold → grün (Goal-Gradient) */
.prog-fill.prog-s1{
  background:linear-gradient(90deg,var(--accent),color-mix(in srgb,var(--accent) 70%,var(--accent2)));
  box-shadow:0 0 5px color-mix(in srgb,var(--accent) 45%,transparent);
}
.prog-fill.prog-s2{
  background:linear-gradient(90deg,var(--accent),var(--accent2));
  box-shadow:0 0 7px color-mix(in srgb,var(--accent2) 55%,transparent);
}
.prog-fill.prog-s3{
  background:linear-gradient(90deg,var(--accent2),#f59e0b);
  box-shadow:0 0 9px rgba(245,158,11,.5);
}
.prog-fill.prog-s4{
  background:linear-gradient(90deg,#f59e0b,#22c55e);
}
/* Letztes Viertel: Balken lechzt danach, voll zu werden */
.prog-fill.prog-crave{
  transform-origin:left center;
  animation:progCrave 1.1s ease-in-out infinite;
}
@keyframes progCrave{
  0%  {transform:scaleX(1) translateX(0);   box-shadow:0 0 10px rgba(34,197,94,.5), 0 0 20px rgba(34,197,94,.18);}
  20% {transform:scaleX(1.012) translateX(1px); box-shadow:0 0 13px rgba(34,197,94,.7), 0 0 26px rgba(34,197,94,.28);}
  40% {transform:scaleX(1) translateX(-1px);box-shadow:0 0 10px rgba(34,197,94,.5), 0 0 20px rgba(34,197,94,.18);}
  60% {transform:scaleX(1.008) translateX(1px); box-shadow:0 0 12px rgba(34,197,94,.65),0 0 24px rgba(34,197,94,.25);}
  80% {transform:scaleX(1) translateX(0);   box-shadow:0 0 10px rgba(34,197,94,.5), 0 0 20px rgba(34,197,94,.18);}
  100%{transform:scaleX(1) translateX(0);   box-shadow:0 0 10px rgba(34,197,94,.5), 0 0 20px rgba(34,197,94,.18);}
}
/* Container-Pop beim Update */
.prog-bg.prog-pop{animation:progPop .35s cubic-bezier(.34,1.56,.64,1);}
@keyframes progPop{0%{height:7px}40%{height:11px}100%{height:7px}}
/* Milestone-Marker */
.prog-milestone{
  position:absolute;top:50%;
  transform:translate(-50%,-50%);
  width:8px;height:8px;border-radius:50%;
  background:var(--surface2);border:2px solid var(--border);
  z-index:3;pointer-events:none;
  transition:background .25s,border-color .25s,box-shadow .25s,transform .25s;
}
.prog-milestone.reached{
  background:var(--accent);border-color:var(--accent);
  box-shadow:0 0 7px var(--accent),0 0 14px color-mix(in srgb,var(--accent) 40%,transparent);
  transform:translate(-50%,-50%) scale(1.4);
}
.prog-milestone.reached.just-reached{
  animation:milePop .55s cubic-bezier(.34,1.56,.64,1) forwards;
}
@keyframes milePop{
  0%  {transform:translate(-50%,-50%) scale(1);}
  38% {transform:translate(-50%,-50%) scale(3.2);box-shadow:0 0 14px var(--accent),0 0 28px var(--accent);}
  100%{transform:translate(-50%,-50%) scale(1.4);}
}
.prog-milestone.just-reached::after{
  content:'';
  position:absolute;top:50%;left:50%;
  width:8px;height:8px;border-radius:50%;
  border:2px solid var(--accent);
  transform:translate(-50%,-50%) scale(1);
  animation:mileRipple .75s ease-out forwards;
}
@keyframes mileRipple{
  0%  {opacity:.85;transform:translate(-50%,-50%) scale(1);}
  100%{opacity:0;  transform:translate(-50%,-50%) scale(4.5);}
}
/* Balken voll — Glow-Puls */
.prog-fill.prog-full{
  animation:progFull 2s ease-out forwards;
}
@keyframes progFull{
  0%  {background:linear-gradient(90deg,#f59e0b,#22c55e);box-shadow:0 0 10px rgba(34,197,94,.5), 0 0 20px rgba(34,197,94,.18);}
  25% {background:linear-gradient(90deg,#4ade80,#86efac);box-shadow:0 0 24px rgba(74,222,128,.95),0 0 48px rgba(74,222,128,.5);}
  55% {background:linear-gradient(90deg,#22c55e,#4ade80);box-shadow:0 0 18px rgba(34,197,94,.8), 0 0 36px rgba(34,197,94,.4);}
  100%{background:linear-gradient(90deg,#f59e0b,#22c55e);box-shadow:0 0 12px rgba(34,197,94,.6), 0 0 24px rgba(34,197,94,.25);}
}
/* Container-Bounce bei Abschluss */
.prog-bg.prog-complete{animation:progComplete 1s cubic-bezier(.34,1.56,.64,1);}
@keyframes progComplete{
  0%  {height:7px;}
  25% {height:13px;}
  60% {height:8px;}
  80% {height:10px;}
  100%{height:7px;}
}
.blk-label{font-size:10px;color:var(--text3);letter-spacing:.08em;text-transform:uppercase;margin-bottom:6px;}

.card{
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:2rem 1.75rem;
  min-height:230px;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;
  transition:border-color .2s,box-shadow .2s;
  cursor:pointer;
  position:relative;z-index:1;
}
.card:hover{border-color:var(--accent);box-shadow:var(--glow);}
.card.exam-card{border-left:3px solid var(--gold);}
.card.static{cursor:default;}
.card.static:hover{border-color:var(--border);box-shadow:none;}
.card.static.exam-card:hover{border-color:var(--border);box-shadow:none;}
.q-text{font-size:17px;font-weight:500;line-height:1.5;color:var(--text);}
.hint{font-size:11px;color:var(--text2);margin-top:1.25rem;}
.formula-wrap{overflow-x:auto;max-width:100%;padding:.25rem 0;}
.note-text{font-size:12px;color:var(--text2);margin-top:.75rem;}
.exam-badge-card{display:inline-block;background:var(--gold);color:#fff;border:none;border-radius:99px;font-size:11px;padding:2px 10px;margin-bottom:.75rem;}

.btn-row{display:flex;gap:10px;margin-top:1.25rem;justify-content:center;flex-wrap:wrap;}
.app-btn{border:1px solid var(--border);background:transparent;border-radius:8px;padding:9px 20px;font-size:13px;color:var(--text);}
.app-btn:hover{border-color:var(--accent);color:var(--accent);}
.btn-ok{border-color:var(--green)!important;color:var(--green)!important;}
.btn-ok:hover{background:rgba(29,158,117,.12)!important;}
.btn-no{border-color:var(--red)!important;color:var(--red)!important;}
.btn-no:hover{background:rgba(153,60,29,.12)!important;}
.btn-muted{color:var(--text2)!important;border-color:var(--border)!important;}
.btn-primary{
  background:var(--accent)!important;color:var(--bg)!important;border-color:var(--accent)!important;
  font-weight:600;
  transition:background .18s ease,box-shadow .18s ease,transform .12s ease,opacity .18s ease!important;
}
.btn-primary:hover{
  background:color-mix(in srgb,var(--accent) 82%,#fff)!important;
  border-color:color-mix(in srgb,var(--accent) 82%,#fff)!important;
  box-shadow:0 0 12px color-mix(in srgb,var(--accent) 40%,transparent);
  transform:translateY(-1px);
  opacity:1;
}
.btn-primary:active{
  transform:scale(.94) translateY(0)!important;
  background:color-mix(in srgb,var(--accent) 80%,#000)!important;
  box-shadow:none;
  opacity:1;
}

.summary{text-align:center;padding:2.5rem 1.5rem;border-radius:16px;border:1px solid transparent;transition:background .4s,border-color .4s;}
.summary h2{font-size:20px;font-weight:600;margin-bottom:1rem;color:var(--text);transition:color .4s;}
.summary p{color:var(--text2);font-size:14px;margin-bottom:0;}
.badge-row{display:flex;justify-content:center;gap:12px;margin-bottom:1.25rem;flex-wrap:wrap;}
.badge{padding:6px 16px;border-radius:99px;font-size:13px;font-weight:600;}
.b-ok{background:rgba(29,158,117,.15);color:var(--green);}
.b-no{background:rgba(153,60,29,.15);color:var(--red);}
.b-sk{background:var(--bg3);color:var(--text2);}
/* Score-Ring */
.sum-score-wrap{display:flex;justify-content:center;margin-bottom:1.25rem;}
.sum-score-ring{
  width:80px;height:80px;border-radius:50%;
  border:3px solid var(--border);
  display:flex;align-items:center;justify-content:center;
  font-size:21px;font-weight:700;color:var(--text);
  transition:border-color .4s,color .4s,box-shadow .4s;
}
/* Bewertungs-Grades */
.summary.sum-perfect{background:linear-gradient(150deg,rgba(240,165,0,.09) 0%,transparent 65%);border-color:rgba(240,165,0,.22);}
.summary.sum-perfect h2{color:var(--gold);}
.summary.sum-perfect .sum-score-ring{border-color:var(--gold);color:var(--gold);box-shadow:0 0 20px rgba(240,165,0,.35),0 0 40px rgba(240,165,0,.12);}
.summary.sum-great{background:linear-gradient(150deg,rgba(34,197,94,.07) 0%,transparent 65%);border-color:rgba(34,197,94,.18);}
.summary.sum-great h2{color:var(--green);}
.summary.sum-great .sum-score-ring{border-color:var(--green);color:var(--green);box-shadow:0 0 14px rgba(34,197,94,.3);}
.summary.sum-poor{background:linear-gradient(150deg,rgba(153,60,29,.07) 0%,transparent 65%);border-color:rgba(153,60,29,.2);}
.summary.sum-poor h2{color:var(--red);}
.summary.sum-poor .sum-score-ring{border-color:var(--red);color:var(--red);box-shadow:0 0 12px rgba(153,60,29,.25);}
/* Button-Reihe */
.sum-btn-row{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-top:1.75rem;}

/* Unlock banner in summary */
.unlock-banner{
  background:rgba(240,165,0,.12);
  border:1px solid rgba(240,165,0,.4);
  border-radius:10px;
  padding:10px 16px;
  font-size:13px;
  color:var(--gold);
  margin:0 auto 1.5rem;
  max-width:340px;
}

.mc-options{display:flex;flex-direction:column;gap:10px;margin-top:1.25rem;width:100%;}
.mc-opt{
  border:1px solid var(--border);border-radius:10px;
  padding:12px 14px;cursor:pointer;text-align:left;
  background:var(--surface);font-size:14px;color:var(--text);
  display:flex;align-items:center;gap:10px;width:100%;
  transition:all .2s;position:relative;z-index:1;
}
.mc-opt:hover:not(:disabled){border-color:var(--accent);background:var(--surface2);}
.mc-opt.correct{border-color:var(--green)!important;border-width:2px!important;background:color-mix(in srgb,var(--green) 14%,var(--surface))!important;color:var(--text)!important;opacity:1!important;}
.mc-opt.correct-self{border-color:var(--accent)!important;border-width:2px!important;background:color-mix(in srgb,var(--accent) 18%,var(--surface))!important;color:var(--text)!important;opacity:1!important;}
.mc-opt.wrong{border-color:var(--red)!important;background:rgba(153,60,29,.12)!important;color:var(--red)!important;}
.mc-opt:disabled{cursor:default;}
.mc-letter{width:22px;height:22px;border-radius:50%;background:var(--bg3);display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:700;flex-shrink:0;color:var(--text2);min-width:22px;}
.mc-opt.correct .mc-letter{background:var(--green);color:#fff;}
.mc-opt.correct-self .mc-letter{background:var(--accent);color:#fff;}
.mc-opt.wrong .mc-letter{background:var(--red);color:#fff;}
.mc-formula{overflow-x:auto;flex:1;min-width:0;}
.mc-streak{font-size:12px;color:var(--text3);margin-top:.25rem;min-height:20px;}

.reward{display:none;position:fixed;inset:0;background:rgba(0,0,0,.7);z-index:800;align-items:center;justify-content:center;}
.reward.show{display:flex;}
.reward-box{
  background:var(--surface2);
  border:1px solid var(--accent);
  border-radius:20px;padding:2.5rem 2rem;
  text-align:center;max-width:320px;width:90%;
  box-shadow:var(--glow);
  animation:popIn .35s cubic-bezier(.34,1.56,.64,1);
}
@keyframes popIn{from{transform:scale(.6);opacity:0}to{transform:scale(1);opacity:1}}
.rw-emoji{font-size:60px;line-height:1;margin-bottom:.6rem;}
.rw-title{font-size:22px;font-weight:700;margin-bottom:.4rem;color:var(--accent);}
.rw-sub{font-size:14px;color:var(--text2);margin-bottom:1rem;}
.rw-streak{display:none;background:rgba(240,165,0,.15);color:var(--gold);border-radius:99px;padding:4px 14px;font-size:13px;font-weight:600;margin-bottom:1rem;}
.rw-formula{display:none;width:100%;background:var(--bg2);border:1px solid var(--border);border-radius:8px;padding:.6rem .9rem;margin-bottom:.75rem;text-align:center;}
.rw-formula-name{font-size:11px;color:var(--text3);text-transform:uppercase;letter-spacing:.06em;margin-bottom:.35rem;}
.rw-formula-math{overflow-x:auto;}
.rw-confetti{font-size:26px;letter-spacing:3px;margin-bottom:.75rem;min-height:36px;}

/* ── Reward Tier Styles ── */
/* Tier 0: Minimal — clean ✓ */
.reward-box.tier-0{border-color:var(--border);animation:popIn .35s cubic-bezier(.34,1.56,.64,1);}
.reward-box.tier-0 .rw-title{font-size:17px;font-weight:600;color:var(--text2);}
.reward-box.tier-0 .rw-emoji{font-size:32px;}

/* Tier 1: Warm — leichte Akzentfarbe */
.reward-box.tier-1{border-color:color-mix(in srgb,var(--accent) 60%,var(--border));animation:popIn .32s cubic-bezier(.34,1.56,.64,1);}
.reward-box.tier-1 .rw-title{color:var(--accent);}

/* Tier 2: Glow — Akzent leuchtet */
.reward-box.tier-2{
  border:2px solid var(--accent);
  box-shadow:0 0 24px color-mix(in srgb,var(--accent) 40%,transparent),0 8px 32px rgba(0,0,0,.3);
  animation:popIn .28s cubic-bezier(.34,1.56,.64,1);
}
.reward-box.tier-2 .rw-title{color:var(--accent);font-size:24px;}
.reward-box.tier-2 .rw-emoji{font-size:56px;}

/* Tier 3: Gold-Pulse — warm und pulsierend */
.reward-box.tier-3{
  border:2px solid #f59e0b;
  background:color-mix(in srgb,#f59e0b 8%,var(--surface2));
  animation:popIn .25s cubic-bezier(.34,1.56,.64,1),rwPulse3 2s .3s ease-in-out infinite;
}
.reward-box.tier-3 .rw-title{color:#f59e0b;font-size:25px;font-weight:800;}
.reward-box.tier-3 .rw-emoji{font-size:62px;}

/* Tier 4: Orange-Blaze — intensiv + Wackeln */
.reward-box.tier-4{
  border:2px solid #f97316;
  background:linear-gradient(145deg,color-mix(in srgb,#f97316 12%,var(--surface2)),var(--surface2));
  animation:popIn .22s cubic-bezier(.34,1.56,.64,1),rwPulse4 1.4s .2s ease-in-out infinite,rwWiggle 3.5s .6s ease-in-out infinite;
}
.reward-box.tier-4 .rw-title{color:#f97316;font-size:27px;font-weight:800;text-shadow:0 0 18px rgba(249,115,22,.55);}
.reward-box.tier-4 .rw-emoji{font-size:66px;}

/* Tier 5: Purple-Galaxy — Gradient-Text + starkes Glow + Wackeln */
.reward-box.tier-5{
  border:2px solid #a855f7;
  background:linear-gradient(145deg,color-mix(in srgb,#a855f7 10%,var(--surface2)),color-mix(in srgb,#3b82f6 8%,var(--surface2)));
  box-shadow:0 0 60px rgba(168,85,247,.55),0 0 120px rgba(59,130,246,.3),inset 0 0 30px rgba(168,85,247,.08);
  animation:popIn .18s cubic-bezier(.34,1.56,.64,1),rwPulse5 1.2s .2s ease-in-out infinite,rwWiggle 2s .4s ease-in-out infinite;
}
.reward-box.tier-5 .rw-title{
  font-size:28px;font-weight:900;
  background:linear-gradient(90deg,#a855f7,#3b82f6,#a855f7);background-size:200%;
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
  animation:rwTitleFlow 2s linear infinite;
}
.reward-box.tier-5 .rw-emoji{font-size:70px;}

/* Tier 6: LEGENDARY — Rainbow-Glow + animierter Gradient-Text */
.reward-box.tier-6{
  border:2px solid #f59e0b;
  background:linear-gradient(145deg,color-mix(in srgb,#f59e0b 8%,var(--surface2)),color-mix(in srgb,#a855f7 8%,var(--surface2)),color-mix(in srgb,#3b82f6 8%,var(--surface2)));
  animation:popIn .15s cubic-bezier(.34,1.56,.64,1),rwRainbow 2s .15s linear infinite,rwWiggle6 1.6s .15s ease-in-out infinite;
}
.reward-box.tier-6 .rw-title{
  font-size:30px;font-weight:900;
  background:linear-gradient(90deg,#f59e0b,#ef4444,#a855f7,#3b82f6,#f59e0b);background-size:200%;
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
  animation:rwTitleFlow 1.5s linear infinite;
}
.reward-box.tier-6 .rw-emoji{font-size:74px;animation:rwEmojiPulse .7s ease-in-out infinite alternate;}

/* ── Reward Animations ── */
@keyframes rwPulse3{0%,100%{box-shadow:0 0 28px rgba(245,158,11,.4);}50%{box-shadow:0 0 52px rgba(245,158,11,.75);}}
@keyframes rwPulse4{0%,100%{box-shadow:0 0 36px rgba(249,115,22,.45),0 0 72px rgba(249,115,22,.2);}50%{box-shadow:0 0 65px rgba(249,115,22,.8),0 0 120px rgba(249,115,22,.4);}}
@keyframes rwPulse5{0%,100%{box-shadow:0 0 50px rgba(168,85,247,.5),0 0 100px rgba(59,130,246,.25);}50%{box-shadow:0 0 85px rgba(168,85,247,.85),0 0 160px rgba(59,130,246,.55);}}
@keyframes rwWiggle{0%,82%,100%{transform:rotate(0) scale(1);}85%{transform:rotate(-1.8deg) scale(1.01);}88%{transform:rotate(1.8deg) scale(1.01);}91%{transform:rotate(-1.2deg);}94%{transform:rotate(1.2deg);}}
@keyframes rwWiggle6{0%,100%{transform:rotate(0) scale(1);}20%{transform:rotate(-1.8deg) scale(1.015);}40%{transform:rotate(1.8deg) scale(1.015);}60%{transform:rotate(-1.2deg);}80%{transform:rotate(1.2deg);}}
@keyframes rwRainbow{0%,100%{box-shadow:0 0 0 2px #f59e0b,0 0 40px rgba(245,158,11,.7),0 0 80px rgba(239,68,68,.4);}25%{box-shadow:0 0 0 2px #ef4444,0 0 40px rgba(239,68,68,.7),0 0 80px rgba(168,85,247,.4);}50%{box-shadow:0 0 0 2px #a855f7,0 0 40px rgba(168,85,247,.7),0 0 80px rgba(59,130,246,.4);}75%{box-shadow:0 0 0 2px #3b82f6,0 0 40px rgba(59,130,246,.7),0 0 80px rgba(245,158,11,.4);}}
@keyframes rwTitleFlow{from{background-position:0%;}to{background-position:200%;}}
@keyframes rwEmojiPulse{from{transform:scale(1);}to{transform:scale(1.1);}}

.wrong-overlay{display:none;position:fixed;inset:0;background:rgba(153,60,29,.2);z-index:700;pointer-events:none;}
.wrong-overlay.show{display:block;animation:shk .4s ease;}
@keyframes shk{0%,100%{transform:translateX(0)}20%{transform:translateX(-8px)}40%{transform:translateX(8px)}60%{transform:translateX(-4px)}80%{transform:translateX(4px)}}

/* ── Unlock Toast ── */
.unlock-toast{
  position:fixed;bottom:48px;left:50%;transform:translateX(-50%) translateY(20px);
  z-index:850;
  background:var(--surface2);
  border:1px solid var(--gold);
  border-radius:12px;
  padding:10px 18px;
  box-shadow:0 4px 20px rgba(0,0,0,.4);
  opacity:0;pointer-events:none;
  transition:opacity .3s,transform .3s;
  white-space:nowrap;
}
.unlock-toast.show{opacity:1;transform:translateX(-50%) translateY(0);}
.unlock-toast-inner{display:flex;align-items:center;gap:10px;}
.unlock-toast-icon{font-size:22px;}
.unlock-toast-title{font-size:13px;font-weight:700;color:var(--gold);}
.unlock-toast-sub{font-size:11px;color:var(--text2);}

.overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,.6);z-index:600;overflow-y:auto;padding:1.5rem 1rem;}
.overlay.open{display:block;}
.overlay-box{background:var(--surface2);border:1px solid var(--border);border-radius:var(--radius);max-width:740px;margin:0 auto;padding:1.5rem;}
.overlay-hdr{display:flex;justify-content:space-between;align-items:center;margin-bottom:.5rem;gap:1rem;}
.overlay-hdr h2{font-size:17px;font-weight:600;color:var(--text);}
.overlay-hint{font-size:11px;color:var(--text3);margin-bottom:.75rem;}
.lf-row{display:flex;gap:6px;margin-bottom:1rem;flex-wrap:wrap;}
.lf-btn{font-size:11px;padding:3px 11px;border-radius:99px;border:1px solid var(--border);background:transparent;cursor:pointer;color:var(--text2);}
.lf-btn.active{background:var(--surface);border-color:var(--accent);color:var(--accent);}
.sec-title{font-size:10px;font-weight:700;color:var(--text3);letter-spacing:.08em;text-transform:uppercase;padding:12px 0 6px;border-bottom:1px solid var(--border);margin-bottom:4px;}
.frow{display:grid;grid-template-columns:160px 1fr 32px;gap:12px;align-items:center;padding:10px 0;border-bottom:.5px solid var(--border);}
.frow:last-child{border-bottom:none;}
.frow-name{font-size:13px;color:var(--text);line-height:1.4;}
.frow-math{overflow-x:auto;font-size:13px;color:var(--text2);}
.star-btn{background:none;border:none;font-size:18px;cursor:pointer;padding:0;line-height:1;transition:transform .15s;}
.star-btn:hover{transform:scale(1.3);background:none;}

.fab{
  position:fixed;bottom:40px;right:1.5rem;
  background:var(--accent);color:var(--bg);
  border:none;border-radius:99px;
  padding:10px 18px;font-size:13px;font-weight:700;
  box-shadow:var(--glow);z-index:200;
}
.fab:hover{opacity:.85;}

.hidden{display:none!important;}
.katex-display{margin:.15rem 0!important;}
.katex{color:inherit!important;}

/* Scanlines on dark/synthwave home */
[data-theme="dark"] #page-home::after,
[data-theme="synthwave"] #page-home::after{
  content:'';
  position:absolute;inset:0;
  background:repeating-linear-gradient(0deg,transparent,transparent 2px,rgba(0,0,0,.08) 2px,rgba(0,0,0,.08) 4px);
  pointer-events:none;
}

.coming-soon{
  position:absolute;right:1.25rem;top:.75rem;
  font-size:8px;font-family:var(--font-retro);
  color:var(--text3);border:1px solid var(--border);
  border-radius:4px;padding:2px 6px;letter-spacing:1px;
}

/* ═══════════════════════════════════════════
   LIST INLINE BUTTON (unter D1-Titel)
═══════════════════════════════════════════ */
.list-inline-btn{
  display:flex;align-items:center;justify-content:center;
  margin:.3rem auto .8rem;
  font-size:11px;padding:5px 18px;
  opacity:.8;
}
.list-inline-btn:hover{opacity:1;}

/* ═══════════════════════════════════════════
   GAP MODE — Karte & Feedback
═══════════════════════════════════════════ */
/* Kompakte Buttons über dem Formelfeld */
.gap-top-bar{
  display:flex;align-items:center;gap:8px;flex-wrap:wrap;
  margin-bottom:.6rem;padding:.5rem .6rem;
  background:var(--surface);border:1px solid var(--border);border-radius:10px;
}
.gap-top-btn{font-size:12px!important;padding:5px 13px!important;}
.gap-top-after{display:flex;gap:8px;}
.gap-top-after.hidden{display:none!important;}
/* Sticky-Leiste unten — immer sichtbar beim Scrollen */
.gap-sticky-bar{
  position:sticky;bottom:32px;
  background:var(--bg);border-top:1px solid var(--border);
  padding:.6rem 0 .75rem;margin-top:.75rem;z-index:10;
}

/* Lücken-Platzhalter — kein Eingabefeld-Look, nur Unterstrich */
.gap-slot{
  display:inline-block;
  min-width:2.8em;
  height:.9em;
  vertical-align:-.15em;
  border-bottom:2.5px solid var(--accent);
  margin:0 .2em;
}

.gap-formula{
  margin:.5rem 0 .25rem;
  overflow-x:auto;
}
.gap-feedback{
  margin:.6rem 0 .25rem;
  padding:.75rem 1rem;
  border-radius:8px;
  font-size:13px;
  line-height:1.6;
  display:flex;
  flex-direction:column;
  gap:.4rem;
}
.gap-ok{
  background:rgba(29,158,117,.12);
  border:1px solid rgba(29,158,117,.3);
  color:var(--green);
}
.gap-no{
  background:rgba(153,60,29,.10);
  border:1px solid rgba(153,60,29,.25);
  color:var(--red);
}
.gap-mark-ok{
  background:color-mix(in srgb,var(--green) 6%,var(--surface));
  border:1px solid color-mix(in srgb,var(--green) 20%,transparent);
  color:var(--text3);
  font-size:13px;
}
.gap-honesty{
  font-size:11px;
  color:var(--text3);
  margin-top:.25rem;
  padding-top:.35rem;
  border-top:1px dashed var(--border);
  line-height:1.5;
}
/* ── Erfolg nach "Als richtig werten" — fixed Toast, scroll-unabhängig ── */
.gap-mark-success{
  position:fixed;
  bottom:72px;
  left:50%;
  transform:translateX(-50%);
  z-index:800;
  white-space:nowrap;
  padding:.6rem 1.6rem;
  background:var(--green);
  border:none;
  border-radius:10px;
  color:#fff;
  font-size:14px;font-weight:700;
  pointer-events:none;
  box-shadow:0 4px 20px rgba(0,0,0,.35);
  animation:gapSuccessPop .22s ease;
}
@keyframes gapSuccessPop{
  from{ transform:translateX(-50%) translateY(8px);opacity:0; }
  to  { transform:translateX(-50%) translateY(0);  opacity:1; }
}

/* ── Formel-Highlight im Warnungs-Modal — voller Box-Rahmen, höherer Kontrast ── */
.gap-modal-highlight{
  display:inline;
  background:var(--red);
  border:none;
  border-radius:4px;
  padding:.1em .28em .15em;
  -webkit-box-decoration-break:clone;
  box-decoration-break:clone;
}
/* KaTeX erzeugt tief verschachtelte Spans — alle mit !important überschreiben */
.gap-modal-highlight .katex,
.gap-modal-highlight .katex *{ color:#fff!important;font-weight:700!important; }

/* ── "Als richtig werten" — absichtlich unauffällig ── */
.gap-mark-subtle{
  display:block;width:100%;
  background:none;border:none;
  font-size:10px;color:var(--text3);
  padding:4px 0;cursor:pointer;
  opacity:.55;
  transition:opacity .15s;
  text-align:center;
}
.gap-mark-subtle:hover{ opacity:.85; }

/* ── "Als richtig werten" Bestätigungs-Modal ── */
.gap-mark-modal-box{
  max-width:460px!important;
}
.gap-mark-compare{
  display:flex;flex-direction:column;gap:.55rem;
  margin:.85rem 0 .5rem;
}
.gap-mark-row{
  background:var(--bg2);border:1px solid var(--border);
  border-radius:8px;padding:.5rem .75rem;
}
.gap-mark-row-full{
  border-style:dashed;
  overflow-x:auto;
}
.gap-mark-row-full .gap-mark-row-formula{
  justify-content:flex-start;
}
.gap-mark-row-full .katex-display{ margin:.2rem 0 0!important; }
.gap-mark-row-label{
  display:block;font-size:10px;font-weight:600;
  letter-spacing:.05em;text-transform:uppercase;
  margin-bottom:.3rem;color:var(--text3);
}
.gap-mark-row-wrong   { color:var(--red) !important; }
.gap-mark-row-correct { color:var(--green) !important; }
.gap-mark-row-formula{
  display:flex;align-items:center;justify-content:center;min-height:1.6em;
}
.gap-mark-row-formula .katex{ font-size:1em; }
/* "Wirklich als richtig werten" — klein und blass unter dem Primär-Button */
.gap-mark-really-btn{
  background:none;border:none;
  font-size:11px;color:var(--text3);
  padding:6px;cursor:pointer;opacity:.55;
  transition:opacity .15s;
  text-align:center;
}
.gap-mark-really-btn:hover{ opacity:.85; }

/* Ehrlichkeits-Button — dezent amber */
.btn-honest{
  background:rgba(240,165,0,.1);
  border-color:rgba(240,165,0,.35);
  color:var(--gold,#f0a500);
  font-size:12px;
}
.btn-honest:hover{
  background:rgba(240,165,0,.22);
  border-color:var(--gold,#f0a500);
}

/* ═══════════════════════════════════════════
   FORMULA EDITOR
═══════════════════════════════════════════ */
.fed-wrap{
  margin:.6rem 0 .4rem;
  border:1px solid var(--border);
  border-radius:12px;
  overflow:hidden;
  background:var(--surface);
  box-shadow:0 2px 12px rgba(0,0,0,.12);
}

/* Kopfzeile */
.fed-label{
  padding:.45rem .9rem;
  font-size:11px;
  font-weight:600;
  color:var(--text2);
  border-bottom:1px solid var(--border);
  letter-spacing:.03em;
  display:flex;
  align-items:center;
  gap:.3rem;
  background:var(--bg3,var(--surface));
}
.fed-label-accent{
  color:var(--gold);
  font-weight:700;
  font-size:13px;
}

/* Vorschau — groß & prominent */
.fed-preview{
  padding:.9rem 1rem;
  min-height:64px;
  border-bottom:1px solid var(--border);
  overflow-x:auto;
  text-align:center;
  background:var(--bg);
  display:flex;
  align-items:center;
  justify-content:center;
}
.fed-preview .katex{ font-size:1.25em; }
.fed-preview .katex-display{ margin:0!important; }

/* Richtige Antwort — erscheint direkt unter der eigenen Vorschau */
.gap-correct-answer{
  padding:.6rem 1rem .65rem;
  border-bottom:1px solid var(--border);
  background:rgba(29,158,117,.07);
  display:flex;flex-direction:column;align-items:center;gap:.3rem;
}
.gap-correct-label{
  font-size:11px;font-weight:600;letter-spacing:.04em;
  color:var(--green);text-transform:uppercase;
}
.gap-correct-formula{
  display:flex;align-items:center;justify-content:center;
}
.gap-correct-formula .katex{ font-size:1.15em; }

/* LaTeX-Eingabe — dezent */
.fed-input-wrap{
  padding:.4rem .75rem .5rem;
  border-bottom:1px solid var(--border);
  background:var(--surface);
}
.fed-input-hint{
  font-size:10px;
  color:var(--text3);
  letter-spacing:.02em;
  margin-bottom:4px;
  line-height:1.5;
}
.fed-input-hint code{
  font-size:10px;
  background:var(--bg3,var(--bg));
  border:1px solid var(--border);
  border-radius:3px;
  padding:0 3px;
  color:var(--accent);
}
.fed-textarea{
  width:100%;
  box-sizing:border-box;
  padding:7px 10px;
  background:var(--surface);
  color:var(--text);
  border:2px solid var(--accent);
  border-radius:6px;
  font-family:monospace;
  font-size:13px;
  resize:none;
  height:40px;
  outline:none;
  line-height:1.5;
  box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 12%,transparent);
  transition:border-color .15s,box-shadow .15s,height .15s;
}
.fed-textarea:focus{
  border-color:var(--accent);
  box-shadow:0 0 0 4px color-mix(in srgb,var(--accent) 22%,transparent);
  height:52px;
}

/* Löschen-Buttons direkt unter Textarea */
.fed-del-row{
  display:flex;gap:6px;
  margin-top:6px;
}
.fed-del-row .fed-btn-del{
  font-size:11px;
  padding:3px 11px;
  height:auto;
}

/* Button-Panel */
.fed-btns{
  padding:.5rem .6rem .45rem;
  display:flex;
  flex-wrap:wrap;
  gap:4px;
  align-items:center;
}
.fed-sec-lbl{
  width:100%;
  font-size:9px;
  color:var(--text3);
  text-transform:uppercase;
  letter-spacing:.1em;
  margin:5px 0 2px;
  padding-top:5px;
  border-top:1px solid var(--border);
  opacity:.7;
}
.fed-sec-lbl:first-child{
  border-top:none;
  margin-top:0;
  padding-top:0;
}
.fed-btn{
  padding:5px 10px;
  font-size:13px;
  font-family:inherit;
  background:var(--bg3,var(--bg));
  color:var(--text);
  border:1px solid var(--border);
  border-radius:6px;
  cursor:pointer;
  transition:background .12s, border-color .12s, transform .08s, box-shadow .12s;
  line-height:1.35;
  min-width:32px;
  text-align:center;
  position:relative;
}
.fed-btn:hover{
  background:var(--accent);
  color:var(--bg);
  border-color:var(--accent);
  transform:translateY(-1px);
  box-shadow:0 3px 10px rgba(0,0,0,.18);
}
.fed-btn:active{
  transform:translateY(0);
  box-shadow:none;
}
/* Löschen-Buttons */
.fed-btn-del{
  background:rgba(153,60,29,.08);
  border-color:rgba(153,60,29,.2);
  color:var(--red);
}
.fed-btn-del:hover{
  background:var(--red);
  border-color:var(--red);
  color:#fff;
}

/* ═══════════════════════════════════════════
   NEUE FORMEL FORMULAR
═══════════════════════════════════════════ */
.add-formula-wrap{
  margin-bottom:.9rem;
}
.add-formula-toggle{
  font-size:11px;
  padding:5px 14px;
  transition:background .2s ease,color .2s ease,border-color .2s ease,box-shadow .2s ease,transform .1s ease;
}
.add-formula-toggle:not(.open):hover{
  background:var(--accent);
  color:var(--bg);
  border-color:var(--accent);
  box-shadow:0 0 8px color-mix(in srgb,var(--accent) 35%,transparent);
}
.add-formula-toggle:not(.open):active{
  transform:scale(.96);
}
.add-formula-toggle.open{
  background:transparent;
  color:var(--text3);
  border-color:var(--border);
}
.add-formula-toggle.open:hover{
  background:transparent!important;
  color:var(--text3)!important;
  border-color:var(--border)!important;
  box-shadow:none!important;
  transform:none!important;
}
#add-formula-form{
  margin-top:.6rem;
  padding:.85rem;
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:10px;
}
.add-form-row{
  margin-bottom:.65rem;
}
.add-form-label{
  display:block;
  font-size:10px;
  color:var(--text2);
  margin-bottom:4px;
  text-transform:uppercase;
  letter-spacing:.06em;
  font-weight:600;
}
.add-form-input{
  width:100%;
  box-sizing:border-box;
  padding:7px 11px;
  background:var(--bg);
  color:var(--text);
  border:1px solid var(--border);
  border-radius:6px;
  font-family:inherit;
  font-size:13px;
  outline:none;
  transition:border-color .15s;
}
.add-form-input:focus{
  border-color:var(--accent);
}

/* ═══════════════════════════════════════════
   GAP MODE — PRE-SESSION CONFIG
═══════════════════════════════════════════ */
.cfg-section{margin-bottom:1.25rem;}
.cfg-title{font-size:11px;font-weight:700;color:var(--text3);text-transform:uppercase;letter-spacing:.08em;margin-bottom:.6rem;}
.cfg-blocks{display:flex;gap:6px;flex-wrap:wrap;}
.cfg-diff{display:flex;flex-direction:column;gap:8px;}

.cfg-diff-btn{
  display:flex;align-items:center;gap:12px;
  padding:11px 14px;
  border:1px solid var(--border);
  border-radius:10px;
  background:var(--surface);
  cursor:pointer;
  text-align:left;
  transition:all .18s;
  width:100%;
}
.cfg-diff-btn:hover:not(:disabled):not(.locked){
  border-color:var(--accent);
  background:var(--surface2);
}
.cfg-diff-btn.selected{
  border-color:var(--accent);
  background:var(--surface2);
  box-shadow:var(--glow);
}
.cfg-diff-btn.locked{
  opacity:.45;
  cursor:not-allowed;
}
.diff-emoji{font-size:20px;flex-shrink:0;line-height:1;}
.diff-label{font-size:14px;font-weight:600;color:var(--text);flex:1;text-align:left;}
.diff-count{font-size:11px;color:var(--text3);flex-shrink:0;}

/* Session header (shown during active session) */
.session-header{
  display:flex;align-items:center;gap:8px;flex-wrap:wrap;
  margin-bottom:.75rem;
  min-height:28px;
}
.diff-badge{
  display:inline-flex;align-items:center;gap:5px;
  font-size:11px;font-weight:700;
  padding:3px 11px;border-radius:99px;
  background:var(--surface2);
  border:1px solid var(--accent);
  color:var(--accent);
}
.session-blocks{font-size:11px;color:var(--text3);}

/* ════════════════════════════════════════════
   STYLE TOGGLE
════════════════════════════════════════════ */
.sp-style-wrap{display:flex;gap:5px;margin-bottom:.25rem;}
.sp-style-btn{
  flex:1;padding:8px 6px;
  border:1px solid var(--border);border-radius:8px;
  font-size:12px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;
  color:var(--text3);background:transparent;cursor:pointer;
  transition:border-color .15s, color .15s, background .15s;
}
.sp-style-btn.active{
  border-color:var(--accent);color:var(--accent);
  background:color-mix(in srgb, var(--accent) 8%, transparent);
}

/* ════════════════════════════════════════════
   MODERN MODE
════════════════════════════════════════════ */

/* ── Variablen ── */
[data-style="modern"] {
  --font-retro: system-ui, -apple-system, 'Segoe UI', sans-serif;
  --radius: 10px;
}
[data-style="modern"][data-theme="light"] {
  --bg:#f8fafc; --bg2:#f1f5f9; --bg3:#e2e8f0;
  --surface:#ffffff; --surface2:#f8fafc; --border:#e2e8f0;
  --text:#0f172a; --text2:#475569; --text3:#94a3b8;
  --accent:#2563eb; --accent2:#7c3aed; --accent3:#0ea5e9;
  --glow:0 0 0 3px rgba(37,99,235,.14);
  --card-shadow:0 1px 3px rgba(0,0,0,.08),0 1px 2px rgba(0,0,0,.05);
  --green:#16a34a; --red:#dc2626; --gold:#d97706;
}
[data-style="modern"][data-theme="dark"] {
  --bg:#0f172a; --bg2:#1e293b; --bg3:#334155;
  --surface:#1e293b; --surface2:#334155; --border:#334155;
  --text:#f1f5f9; --text2:#94a3b8; --text3:#475569;
  --accent:#3b82f6; --accent2:#8b5cf6; --accent3:#38bdf8;
  --glow:0 0 0 3px rgba(59,130,246,.2);
  --card-shadow:0 4px 12px rgba(0,0,0,.35);
  --green:#22c55e; --red:#ef4444; --gold:#f59e0b;
}

/* ── Kein Pixelraster ── */
[data-style="modern"] #page-home::before,
[data-style="modern"] #page-home::after { display:none; }

/* ── Profile / Settings ── */
[data-style="modern"] #profile-btn{border-radius:8px;}
[data-style="modern"] #profile-panel{border-radius:12px;}
[data-style="modern"] .sp-title{
  font-size:11px;font-weight:600;color:var(--text2);
  text-transform:none;letter-spacing:0;margin-bottom:.5rem;
}

/* ── Homepage ── */
[data-style="modern"] .home-logo{
  font-family:system-ui,-apple-system,'Segoe UI',sans-serif;
  font-size:clamp(30px,6vw,52px);
  font-weight:800;letter-spacing:-.04em;
  color:var(--text);text-shadow:none;animation:none;
}
[data-style="modern"] .home-sub{
  font-family:system-ui,-apple-system,sans-serif;
  font-size:clamp(14px,2vw,17px);font-weight:400;
  color:var(--text2);letter-spacing:0;text-shadow:none;
  margin-bottom:2.5rem;
}
[data-style="modern"] .home-insert{
  font-family:system-ui,-apple-system,sans-serif;
  font-size:12px;font-weight:500;letter-spacing:.06em;
  color:var(--text3);text-shadow:none;animation:none;
  margin-bottom:2rem;text-transform:uppercase;
}

/* ── Modulkarten ── */
[data-style="modern"] .module-btn{
  border:1px solid var(--border);border-radius:12px;
  box-shadow:var(--card-shadow);
  transition:box-shadow .2s, transform .15s, border-color .2s;
}
[data-style="modern"] .module-btn:hover{
  box-shadow:0 8px 24px rgba(0,0,0,.12);
  transform:translateY(-2px);border-color:var(--accent);
}
[data-style="modern"] .module-btn::before{display:none;}
[data-style="modern"] .mb-tag{
  font-family:system-ui,sans-serif;
  font-size:10px;font-weight:700;letter-spacing:.06em;
  color:var(--accent);
  background:color-mix(in srgb, var(--accent) 10%, transparent);
  display:inline-block;padding:2px 8px;border-radius:4px;margin-bottom:.6rem;
}
[data-style="modern"] .coming-soon{
  font-family:system-ui,sans-serif;font-size:10px;font-weight:600;letter-spacing:.04em;
}

/* ── Seitenüberschrift ── */
[data-style="modern"] .retro-title{
  font-family:system-ui,-apple-system,sans-serif;
  font-size:clamp(20px,4vw,28px);font-weight:700;
  letter-spacing:-.02em;color:var(--text);
  text-shadow:none;border:none;padding:0;
  background:none;box-shadow:none;text-align:left;
}
[data-style="modern"] .retro-title-wrap{
  justify-content:flex-start;margin-bottom:1.25rem;
}

/* ── Back-Button ── */
[data-style="modern"] .back-btn{
  border-radius:8px;font-size:13px;font-weight:500;
  border-color:var(--border);
}
[data-style="modern"] .back-btn:hover{background:var(--surface2);color:var(--text);}

/* ── Mode-Tabs ── */
[data-style="modern"] .mode-tabs{border-radius:10px;}
[data-style="modern"] .mode-tab{font-weight:500;letter-spacing:0;}
[data-style="modern"] .mode-tab.active{box-shadow:0 1px 4px rgba(0,0,0,.12);}

/* ── Filter-Buttons ── */
[data-style="modern"] .fbtn{font-size:12px;font-weight:500;padding:4px 12px;border-radius:6px;}

/* ── Block-Label ── */
[data-style="modern"] .blk-label{
  font-size:11px;font-weight:600;letter-spacing:.02em;
  color:var(--accent);text-transform:none;
}

/* ── Karte ── */
[data-style="modern"] .card{
  border:1px solid var(--border);border-radius:12px;
  box-shadow:var(--card-shadow);
}

/* ── Buttons ── */
[data-style="modern"] .app-btn{border-radius:8px;font-weight:500;}
[data-style="modern"] .app-btn:hover{background:var(--surface2);border-color:var(--border);color:var(--text);}
[data-style="modern"] .btn-ok{
  background:var(--accent)!important;border-color:var(--accent)!important;color:#fff!important;
}
[data-style="modern"] .btn-ok:hover{
  background:color-mix(in srgb,var(--accent) 82%,black)!important;box-shadow:0 2px 8px rgba(0,0,0,.2);
}
[data-style="modern"] .btn-no{
  border-color:var(--border)!important;color:var(--text2)!important;
}
[data-style="modern"] .btn-no:hover{background:var(--surface2)!important;}

/* ── Klausur-Badges ── */
[data-style="modern"] .exam-badge-card{
  font-family:system-ui,sans-serif;
  background:var(--gold);
  color:#fff;
  border:none;
}

/* ═══════════════════════════════════════════
   SRS — SPACED REPETITION
═══════════════════════════════════════════ */

/* Config screen */
.srs-config-header{text-align:center;margin-bottom:1.5rem;}
.srs-config-title{font-family:var(--font-retro);font-size:13px;color:var(--accent);letter-spacing:.06em;margin-bottom:.6rem;}
[data-style="modern"] .srs-config-title{font-family:var(--font-main);font-size:18px;font-weight:700;}
.srs-config-subtitle{font-size:13px;color:var(--text2);display:flex;gap:10px;justify-content:center;flex-wrap:wrap;}
.srs-all-done{color:var(--green);font-weight:600;}

/* "Alles gelernt"-Banner */
.srs-done-banner{
  text-align:center;padding:1.25rem 1rem;border-radius:14px;
  background:var(--green);border:none;
  margin-bottom:0;width:100%;
}
.srs-done-icon{font-size:1.75rem;font-weight:700;color:#fff;line-height:1;margin-bottom:.35rem;}
.srs-done-title{font-size:15px;font-weight:700;color:#fff;margin-bottom:.25rem;}
.srs-done-sub{font-size:12px;color:rgba(255,255,255,.8);}

/* stat chips (in block rows) */
.srs-stat-due{
  display:inline-flex;align-items:center;
  background:#e7a601;border:none;
  color:#fff;font-weight:700;font-size:10px;padding:2px 8px;border-radius:99px;
}
.srs-stat-new{
  display:inline-flex;align-items:center;
  background:#1cb0f6;border:none;
  color:#fff;font-weight:700;font-size:10px;padding:2px 8px;border-radius:99px;
}
.srs-stat-zero{color:var(--text3);font-size:11px;}

/* Urgency banner — Duolingo-style, solid colors */
.srs-urgency-banner{
  display:flex;align-items:stretch;
  border-radius:16px;overflow:hidden;margin-bottom:.25rem;
  box-shadow:0 6px 22px rgba(0,0,0,.28),0 2px 6px rgba(0,0,0,.16);
}
.srs-urgency-chip{
  flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding:18px 14px 16px;gap:3px;
}
.srs-urgency-due{ background:#e7a601; }
.srs-urgency-new{ background:#1cb0f6; }
.srs-urgency-num{
  font-size:2.4rem;font-weight:900;line-height:1;letter-spacing:-.02em;
  font-family:var(--font-main);
}
.srs-urgency-num{ color:#fff; }
.srs-urgency-label{
  font-size:9px;text-transform:uppercase;letter-spacing:.14em;font-weight:700;margin-top:3px;
  color:rgba(255,255,255,.72);
}

/* Block list */
.srs-block-list{display:flex;flex-direction:column;gap:5px;margin-bottom:1.25rem;}
.srs-block-row{display:flex;align-items:center;gap:10px;padding:9px 12px;border-radius:9px;
  border:1px solid var(--border);background:var(--surface);cursor:pointer;
  transition:border-color .15s,background .15s,opacity .15s;}
.srs-block-row:not(.active){opacity:.6;}
.srs-block-row.active{opacity:1;border-color:color-mix(in srgb,var(--accent) 30%,transparent);background:color-mix(in srgb,var(--accent) 4%,var(--surface));}
.srs-block-row-due{}
.srs-block-row-new{}
.srs-block-cb{accent-color:var(--accent);width:14px;height:14px;cursor:pointer;flex-shrink:0;}
.srs-block-name{flex:1;font-size:12px;color:var(--text);}
.srs-block-stats{display:flex;gap:6px;font-size:11px;}

/* Limit toggle */
.srs-limit-wrap{text-align:center;margin-top:.75rem;}
.srs-limit-toggle{
  background:transparent;border:none;color:var(--text3);
  font-size:11px;cursor:pointer;padding:4px 8px;
  text-decoration:underline;text-decoration-style:dotted;text-underline-offset:2px;
  font-family:var(--font-main);
}
.srs-limit-toggle:hover{color:var(--text2);}

/* Settings modal */
.srs-modal-backdrop{
  position:fixed;inset:0;z-index:200;
  background:rgba(0,0,0,.55);backdrop-filter:blur(6px);
  display:flex;align-items:center;justify-content:center;padding:1.5rem;
}
.srs-modal-box{
  background:var(--surface);border:1px solid var(--border);
  border-radius:18px;padding:1.75rem 1.5rem 1.5rem;
  width:100%;max-width:320px;
  box-shadow:0 8px 40px rgba(0,0,0,.35);
}
.srs-modal-title{font-size:16px;font-weight:700;color:var(--text);margin-bottom:.35rem;}
.srs-modal-desc{font-size:12px;color:var(--text2);margin-bottom:1.25rem;line-height:1.45;}
.srs-modal-input-row{
  display:flex;align-items:center;justify-content:center;gap:10px;margin-bottom:1.5rem;
}
.srs-modal-input{
  width:72px;text-align:center;font-size:28px;font-weight:700;
  background:var(--surface2);border:1.5px solid var(--border);
  color:var(--text);border-radius:10px;padding:8px 6px;
  -moz-appearance:textfield;font-family:var(--font-main);
}
.srs-modal-input::-webkit-outer-spin-button,
.srs-modal-input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0;}
.srs-modal-input:focus{outline:none;border-color:var(--accent);}
.srs-modal-step{
  border:1.5px solid var(--border);background:var(--surface2);color:var(--text2);
  border-radius:9px;width:44px;height:44px;font-size:16px;font-weight:700;line-height:1;
  display:inline-flex;align-items:center;justify-content:center;
  cursor:pointer;padding:0;transition:color .15s,border-color .15s,background .15s;
  font-family:var(--font-main);
}
.srs-modal-step:hover{color:var(--accent);border-color:var(--accent);background:color-mix(in srgb,var(--accent) 8%,var(--surface2));}
.srs-modal-footer{display:flex;gap:10px;justify-content:flex-end;}
.srs-modal-footer .app-btn{flex:1;justify-content:center;}
.srs-modal-reset-row{text-align:center;margin-top:.85rem;padding-top:.75rem;border-top:1px solid var(--border);}
.srs-modal-reset-btn{background:transparent;border:none;color:var(--text3);font-size:11px;cursor:pointer;font-family:var(--font-main);text-decoration:underline;text-decoration-style:dotted;text-underline-offset:2px;padding:2px 4px;}
.srs-modal-reset-btn:hover{color:#ef4444;}

/* Reset warning steps */
.srs-reset-warn{border-radius:14px;padding:1rem 1.1rem 1rem;margin-top:.85rem;}
.srs-reset-warn-1{background:#ff7878;}
.srs-reset-warn-2{background:#ea2b2b;}
.srs-reset-warn-title{font-size:13px;font-weight:800;color:#fff;margin-bottom:.3rem;}
.srs-reset-warn-sub{font-size:11px;color:rgba(255,255,255,.85);line-height:1.45;margin-bottom:.85rem;}
.srs-reset-warn-btns{display:flex;gap:8px;align-items:center;}
/* Stufe 1 — "Doch nicht" ist prominent, "Ich bin mir sicher" ist dezent */
.srs-reset-back-btn{
  flex:1;padding:9px 12px;border-radius:10px;border:none;cursor:pointer;
  background:#fff;color:#ff7878;font-weight:800;font-size:13px;font-family:var(--font-main);
  box-shadow:0 2px 8px rgba(0,0,0,.15);
}
.srs-reset-back-btn:hover{background:#fff0f0;}
.srs-reset-next-btn{
  background:transparent;border:none;cursor:pointer;
  color:rgba(255,255,255,.7);font-size:11px;font-family:var(--font-main);
  text-decoration:underline;text-decoration-style:dotted;text-underline-offset:2px;padding:4px 6px;
}
.srs-reset-next-btn:hover{color:#fff;}
/* Stufe 2 — "Abbrechen" ist sehr prominent, "Endgültig löschen" ist dezent */
.srs-reset-back-btn-2{
  flex:1;padding:10px 12px;border-radius:10px;border:none;cursor:pointer;
  background:#fff;color:#ea2b2b;font-weight:800;font-size:13px;font-family:var(--font-main);
  box-shadow:0 2px 10px rgba(0,0,0,.2);
}
.srs-reset-back-btn-2:hover{background:#fff0f0;}
.srs-reset-final-btn{
  background:transparent;border:none;cursor:pointer;
  color:rgba(255,255,255,.6);font-size:11px;font-family:var(--font-main);
  text-decoration:underline;text-decoration-style:dotted;text-underline-offset:2px;padding:4px 6px;
}
.srs-reset-final-btn:hover{color:#fff;}

/* Streak warning modal */
#streak-warn-modal .srs-modal-box{
  background:#ea2b2b;border:none;
}
#streak-warn-modal .srs-modal-title{color:#fff;}
#streak-warn-modal .srs-modal-desc{color:rgba(255,255,255,.85);}
.streak-warn-icon{font-size:2.25rem;text-align:center;margin-bottom:.5rem;}
.streak-warn-footer{display:flex;flex-direction:column;gap:10px;margin-top:1.25rem;}
/* "Streak behalten" — sehr auffällig: weißer Button, roter Text */
#streak-warn-modal .streak-warn-stay{
  background:#fff!important;color:#ea2b2b!important;border:none!important;
  padding:15px!important;font-size:15px!important;font-weight:800!important;
  justify-content:center;letter-spacing:.01em;
  box-shadow:0 2px 10px rgba(0,0,0,.2);
}
#streak-warn-modal .streak-warn-stay:hover{background:#fff0f0!important;}
/* "Trotzdem wechseln" — dezent */
#streak-warn-modal .streak-warn-leave{
  background:transparent!important;border:none!important;
  color:rgba(255,255,255,.65)!important;
  font-size:12px!important;padding:10px!important;
  justify-content:center;text-decoration:underline;text-decoration-style:dotted;text-underline-offset:2px;
}
#streak-warn-modal .streak-warn-leave:hover{color:#fff!important;}

/* Start button */
@keyframes srsShimmer{
  0%{background-position:200% center;}
  100%{background-position:-200% center;}
}
@keyframes srsStartGlow{
  0%,100%{box-shadow:0 6px 24px color-mix(in srgb,var(--accent) 35%,transparent);}
  50%{box-shadow:0 6px 44px color-mix(in srgb,var(--accent) 65%,transparent),
              0 0 0 7px color-mix(in srgb,var(--accent) 14%,transparent);}
}
@keyframes srsBtnPress{
  0%{transform:scale(1);}
  35%{transform:scale(.93);}
  65%{transform:scale(1.04);}
  100%{transform:scale(1);}
}
@keyframes srsRipple{
  to{transform:translate(-50%,-50%) scale(38);opacity:0;}
}
@keyframes srsFlash{
  0%{opacity:0;}18%{opacity:1;}100%{opacity:0;}
}
.srs-start-btn{
  position:relative;overflow:hidden;
  display:block;width:100%;padding:20px 24px!important;
  font-size:16px!important;font-weight:900!important;
  border-radius:16px!important;margin-bottom:.75rem;
  letter-spacing:.02em;
  transition:transform .14s,filter .14s!important;
}
.srs-start-btn:not(:disabled){
  background:linear-gradient(90deg,
    var(--accent),
    color-mix(in srgb,var(--accent) 72%,#fff) 40%,
    color-mix(in srgb,var(--accent) 85%,#66aaff) 60%,
    var(--accent)) !important;
  background-size:300% auto!important;
  color:var(--bg)!important;border-color:transparent!important;
  animation:srsShimmer 3.5s linear infinite,srsStartGlow 2s ease-in-out infinite;
}
.srs-start-btn:not(:disabled):hover{
  filter:brightness(1.1);transform:translateY(-3px) scale(1.015)!important;
}
.srs-start-btn.srs-btn-pressing{
  animation:srsBtnPress .34s ease-out forwards!important;
}
.srs-start-btn:disabled{
  opacity:.35;cursor:not-allowed;
  background:var(--surface2)!important;color:var(--text3)!important;
  border:1px solid var(--border)!important;
}
/* Ripple element spawned on click */
.srs-btn-ripple{
  position:absolute;
  width:14px;height:14px;border-radius:50%;
  background:rgba(255,255,255,.45);
  transform:translate(-50%,-50%) scale(0);
  animation:srsRipple .55s ease-out forwards;
  pointer-events:none;
}
/* Full-page flash on click */
.srs-btn-flash{
  position:fixed;inset:0;z-index:999;pointer-events:none;
  background:color-mix(in srgb,var(--accent) 22%,transparent);
  animation:srsFlash .45s ease-out forwards;
}

.srs-browse-link{text-align:center;}
.srs-browse-btn{font-size:11px!important;padding:4px 14px!important;}

/* In-session progress pips */
.srs-prog-wrap{display:flex;gap:12px;justify-content:center;margin-bottom:.6rem;flex-wrap:wrap;}
.srs-pip{font-size:11px;color:var(--text2);padding:2px 8px;border-radius:99px;background:var(--surface2);}
.srs-pip-due{background:#e7a601;border:none;color:#fff;}
.srs-pip-new{background:#1cb0f6;border:none;color:#fff;}

/* Rating buttons */
.srs-rate-row{display:flex;gap:8px;width:100%;}
.srs-rate-btn-wrap{display:flex;flex-direction:column;align-items:center;gap:5px;flex:1;}
.srs-interval-hint{font-size:11px;color:var(--text2);font-weight:500;}

.srs-btn-no,
.srs-btn-unsure,
.srs-btn-ok{
  width:100%!important;padding:14px 8px!important;font-size:13px!important;font-weight:600!important;
  transition:background .15s,transform .1s!important;
}

.srs-btn-no{background:transparent!important;border-color:var(--red)!important;color:var(--red)!important;}
.srs-btn-no:hover{background:color-mix(in srgb,var(--red) 12%,transparent)!important;transform:translateY(-1px);}
.srs-btn-no:active{transform:scale(.96)!important;}

.srs-btn-unsure{background:transparent!important;border-color:var(--gold)!important;color:var(--gold)!important;}
.srs-btn-unsure:hover{background:color-mix(in srgb,var(--gold) 12%,transparent)!important;transform:translateY(-1px);}
.srs-btn-unsure:active{transform:scale(.96)!important;}

.srs-btn-ok{background:transparent!important;border-color:var(--green)!important;color:var(--green)!important;}
.srs-btn-ok:hover{background:color-mix(in srgb,var(--green) 12%,transparent)!important;transform:translateY(-1px);}
.srs-btn-ok:active{transform:scale(.96)!important;}

/* Wrong cards list in summary */
.srs-wrong-header{font-size:11px;color:var(--text2);text-align:left;margin-top:1rem;margin-bottom:.4rem;font-weight:600;text-transform:uppercase;letter-spacing:.05em;}
.srs-wrong-list{text-align:left;display:flex;flex-direction:column;gap:6px;}
.srs-wrong-item{padding:8px 12px;border-radius:8px;background:var(--surface);border:1px solid color-mix(in srgb,var(--red) 25%,var(--border));}
.srs-wrong-q{font-size:11px;color:var(--text2);margin-bottom:4px;}
.srs-wrong-f .katex{font-size:.9em;}

/* ═══════════════════════════════════════════
   DARK THEME — CONTRAST OVERRIDES
   Card und UI-Elemente brauchen in dunklen
   Themes sichtbarere Ränder und Trennung.
═══════════════════════════════════════════ */

/* Stärkere Kartenränder in sehr dunklen Themes */
[data-theme="synthwave"] .card{
  border-color:#4a1880;
  background:#1e0647;
}
[data-theme="forest"] .card{
  border-color:#3d6038;
  background:#1f3020;
}
[data-theme="ocean"] .card{
  border-color:#1a60b8;
  background:#0a3258;
}
[data-theme="sunset"] .card{
  border-color:#8a4020;
  background:#422010;
}
[data-theme="mono"] .card{
  border-color:#444;
  background:#242424;
}

/* SRS-Config Block-Rows in dunklen Themes */
[data-theme="forest"] .srs-block-row{ border-color:#3d6038; }
[data-theme="sunset"] .srs-block-row{ border-color:#8a4020; }
[data-theme="synthwave"] .srs-block-row{ border-color:#4a1880; }
[data-theme="ocean"] .srs-block-row{ border-color:#1a60b8; }

/* ═══════════════════════════════════════════
   PROKRASTINATIONS-SPIEL
═══════════════════════════════════════════ */

.prokrastinieren-btn{
  background:transparent;border:none;
  color:var(--text3);font-size:10px;
  font-family:var(--font-main);
  cursor:pointer;padding:6px 10px;
  margin-top:1.5rem;margin-bottom:.5rem;
  opacity:.45;
  text-decoration:underline;text-decoration-style:dotted;text-underline-offset:3px;
  transition:opacity .2s;align-self:center;
}
.prokrastinieren-btn:hover{ opacity:1; }

#page-game{
  display:none;
  flex-direction:column;
  position:fixed;inset:0;
  background:#0d1117;
  z-index:1000;
}
.game-back-btn{
  position:absolute;top:calc(12px + env(safe-area-inset-top));left:calc(12px + env(safe-area-inset-left));z-index:11;
  font-family:'Orbitron',sans-serif!important;
  font-size:9px!important;
  padding:9px 14px!important;
  background:rgba(10,20,42,.92)!important;
  border:1.5px solid rgba(61,139,255,.75)!important;
  color:#cce0ff!important;
  box-shadow:0 2px 14px rgba(0,0,0,.55), 0 0 0 0 rgba(61,139,255,0)!important;
  transition:transform .12s ease, box-shadow .12s ease, background .12s ease!important;
}
.game-back-btn:hover{
  background:rgba(20,40,80,.95)!important;
  border-color:rgba(100,180,255,.9)!important;
  box-shadow:0 3px 18px rgba(0,0,0,.65), 0 0 12px rgba(61,139,255,.35)!important;
  transform:scale(1.04)!important;
}
/* Button-Pop beim Klick */
@keyframes gameBtnPop{
  0%  { transform:scale(1);    box-shadow:0 2px 14px rgba(0,0,0,.55),0 0 0   0  rgba(61,139,255,0); }
  35% { transform:scale(1.22); box-shadow:0 4px 24px rgba(0,0,0,.7), 0 0 28px 6px rgba(61,139,255,.6); }
  65% { transform:scale(0.96); box-shadow:0 2px 10px rgba(0,0,0,.4), 0 0 10px 2px rgba(61,139,255,.25); }
  100%{ transform:scale(1);    box-shadow:0 2px 14px rgba(0,0,0,.55),0 0 0   0  rgba(61,139,255,0); }
}
.game-back-btn.popping{
  animation:gameBtnPop .45s cubic-bezier(.22,1,.36,1) forwards!important;
}

/* ── Page Transition Overlay ──────────────────────── */
#game-leave-overlay{
  position:fixed;inset:0;z-index:3000;
  pointer-events:none;
  clip-path:circle(0% at var(--gl-x,50%) var(--gl-y,50%));
  /* default: learn direction (navy → deep blue) */
  background:radial-gradient(ellipse at var(--gl-x,50%) var(--gl-y,50%),
    #0f3460 0%, #0a1f3a 40%, #040d1a 100%);
  transition:none;
}
/* to-game variant: darker, space-like */
#game-leave-overlay.gl-to-game{
  background:radial-gradient(ellipse at var(--gl-x,50%) var(--gl-y,50%),
    #0a1832 0%, #050d1c 40%, #010408 100%);
}
#game-leave-overlay.gl-expand{
  pointer-events:all;
  animation:glExpand .48s cubic-bezier(.4,0,.2,1) forwards;
}
#game-leave-overlay.gl-shrink{
  clip-path:circle(150% at var(--gl-x,50%) var(--gl-y,50%));
  animation:glShrink .52s cubic-bezier(.4,0,.6,1) forwards;
}
@keyframes glExpand{
  from{ clip-path:circle(0%   at var(--gl-x) var(--gl-y)); }
  to  { clip-path:circle(150% at var(--gl-x) var(--gl-y)); }
}
@keyframes glShrink{
  from{ clip-path:circle(150% at 50% 30%); opacity:1; }
  to  { clip-path:circle(0%   at 50% 30%); opacity:.6; }
}

/* Inner content */
.gl-inner{
  position:absolute;top:50%;left:50%;
  transform:translate(-50%,-50%);
  text-align:center;
  opacity:0;transition:opacity .22s ease;
}
#game-leave-overlay.gl-show .gl-inner{ opacity:1; }

.gl-emoji{
  display:block;font-size:64px;line-height:1;
  animation:glEmojiBounce .6s cubic-bezier(.22,1,.36,1) both;
}
@keyframes glEmojiBounce{
  0%  { transform:scale(0) rotate(-20deg); }
  60% { transform:scale(1.18) rotate(6deg); }
  100%{ transform:scale(1)    rotate(0deg); }
}
.gl-text{
  display:block;margin-top:16px;
  font-family:'Orbitron',sans-serif;
  font-size:clamp(14px,4vw,22px);
  letter-spacing:.04em;
  /* learn direction: teal */
  color:#00ffcc;
  text-shadow:0 0 18px rgba(0,255,204,.6);
}
/* game direction: blue */
#game-leave-overlay.gl-to-game .gl-text{
  color:#4fa8ff;
  text-shadow:0 0 18px rgba(79,168,255,.65);
}
.gl-sub{
  display:block;margin-top:10px;
  font-size:12px;color:rgba(180,220,255,.5);
  letter-spacing:.08em;
}
.game-wrap{
  flex:1;overflow:hidden;position:relative;
}
#game-canvas{
  display:block;width:100%;height:100%;
  touch-action:none;
}
.game-touch-row{
  display:flex;gap:8px;align-items:flex-end;
  padding:10px 12px calc(16px + env(safe-area-inset-bottom));
  background:linear-gradient(to bottom,#060a12,#0b1020);
  border-top:1px solid rgba(61,139,255,.1);
}
.game-touch-btn{
  flex:1;height:56px;
  background:linear-gradient(160deg,rgba(255,255,255,.05) 0%,rgba(20,60,140,.18) 100%);
  border:1px solid rgba(80,150,255,.3);
  border-bottom:1px solid rgba(30,80,180,.55);
  border-radius:14px;
  color:rgba(150,200,255,.85);font-size:22px;
  cursor:pointer;
  user-select:none;-webkit-user-select:none;
  touch-action:none;
  -webkit-tap-highlight-color:transparent;
  box-shadow:0 3px 10px rgba(0,0,0,.45),inset 0 1px 0 rgba(255,255,255,.07);
  transition:background .08s,transform .08s,box-shadow .08s,border-color .08s,color .08s;
  will-change:transform;
}
.game-touch-btn:active,.game-touch-btn.pressed{
  background:linear-gradient(160deg,rgba(61,139,255,.22) 0%,rgba(30,80,200,.38) 100%);
  border-color:rgba(130,200,255,.75);
  box-shadow:0 0 18px rgba(61,139,255,.55),0 1px 4px rgba(0,0,0,.3),
             inset 0 0 12px rgba(61,139,255,.18);
  transform:scale(0.9) translateY(2px);
  color:#daeeff;
}
.game-touch-jump{
  flex:none;
  width:120px;height:76px;
  font-size:26px;
  border-radius:16px;
  background:linear-gradient(160deg,rgba(61,139,255,.18) 0%,rgba(20,60,180,.22) 100%);
  border:1px solid rgba(80,160,255,.45);
  border-bottom:1px solid rgba(30,80,200,.6);
  box-shadow:0 3px 14px rgba(0,0,0,.45),0 0 10px rgba(61,139,255,.12),
             inset 0 1px 0 rgba(255,255,255,.09);
  color:rgba(170,215,255,.9);
}
.game-touch-jump:active,.game-touch-jump.pressed{
  background:linear-gradient(160deg,rgba(61,139,255,.3) 0%,rgba(30,90,220,.48) 100%);
  border-color:rgba(140,215,255,.85);
  box-shadow:0 0 26px rgba(61,139,255,.72),0 0 10px rgba(61,139,255,.35),
             inset 0 0 16px rgba(61,139,255,.25);
  transform:scale(0.91) translateY(2px);
  color:#fff;
}
@media (hover:hover){
  .game-touch-row{ display:none; }
}

/* ═══════════════════════════════════════════
   SKIN SELECTOR
═══════════════════════════════════════════ */

/* Skin-Button (oben rechts im Game-Page) */
.skin-open-btn{
  position:absolute;
  top:calc(12px + env(safe-area-inset-top)); right:calc(12px + env(safe-area-inset-right));
  z-index:20;
  background:rgba(10,10,26,0.85);
  border:1px solid rgba(61,139,255,.55);
  border-radius:8px;
  color:#88bbff;
  font-size:16px;
  width:36px; height:36px;
  display:flex; align-items:center; justify-content:center;
  cursor:pointer;
  transition:background .15s, box-shadow .15s, transform .1s;
  box-shadow:0 0 8px rgba(61,139,255,.2);
}
.skin-open-btn:hover{
  background:rgba(20,40,80,.95);
  box-shadow:0 0 14px rgba(61,139,255,.5);
  transform:scale(1.08);
}

/* Overlay backdrop */
#skin-overlay{
  position:fixed; inset:0; z-index:1500;
  background:rgba(0,0,8,0.88);
  display:flex; align-items:center; justify-content:center;
  backdrop-filter:blur(4px);
}
#skin-overlay.hidden{ display:none; }

/* Panel — retro game menu card */
.skin-panel{
  background:#06060f;
  border:2px solid #1a3a6a;
  border-radius:4px;
  padding:0;
  width:min(94vw, 560px);
  max-height:90vh;
  overflow:hidden;
  display:flex; flex-direction:column;
  /* Outer neon glow */
  box-shadow:
    0 0 0 1px #0a1a3a,
    0 0 24px rgba(0,120,255,.25),
    inset 0 0 0 1px #0d1f45;
}

/* Header bar */
.skin-panel-header{
  display:flex; align-items:center; justify-content:space-between;
  padding:.7rem 1rem .65rem;
  background:linear-gradient(180deg, #0d1f45 0%, #07101f 100%);
  border-bottom:2px solid #1a3a6a;
  flex-shrink:0;
}
.skin-panel-titleblock{
  display:flex; flex-direction:column; gap:3px;
}
.skin-panel-title{
  font-family:'Orbitron',sans-serif;
  font-size:.72rem;
  color:#55ccff;
  letter-spacing:.12em;
  text-shadow:0 0 10px rgba(85,204,255,.7);
}
.skin-panel-progress{
  font-family:'Orbitron',sans-serif;
  font-size:.55rem;
  color:#3a6a99;
  letter-spacing:.06em;
}

/* Close button — game-style red X */
.skin-close-btn{
  background:#1a0606;
  border:1px solid #660000;
  border-radius:3px;
  color:#ff4444;
  font-size:.9rem;
  font-weight:700;
  cursor:pointer;
  line-height:1;
  width:28px; height:28px;
  display:flex; align-items:center; justify-content:center;
  transition:background .12s, box-shadow .12s;
  font-family:'Orbitron',sans-serif;
  flex-shrink:0;
}
.skin-close-btn:hover{
  background:#330000;
  box-shadow:0 0 10px rgba(255,0,0,.4);
}

/* Scrollable grid area */
.skin-grid{
  overflow-y:auto;
  padding:.75rem .7rem;
  display:grid;
  grid-template-columns: repeat(auto-fill, minmax(86px, 1fr));
  gap:.55rem;
  /* Custom scrollbar */
  scrollbar-width:thin;
  scrollbar-color:#1a3a6a #06060f;
}
.skin-grid::-webkit-scrollbar{ width:6px; }
.skin-grid::-webkit-scrollbar-track{ background:#06060f; }
.skin-grid::-webkit-scrollbar-thumb{ background:#1a3a6a; border-radius:3px; }

/* Footer hint */
.skin-panel-sub{
  font-family:'Orbitron',sans-serif;
  font-size:.5rem;
  color:#223355;
  text-align:center;
  padding:.5rem .5rem .6rem;
  border-top:1px solid #0d1f45;
  margin:0;
  flex-shrink:0;
  letter-spacing:.04em;
}

/* Individual skin cell */
.sk-cell{
  display:flex; flex-direction:column; align-items:center; gap:5px;
  border:1px solid #112240;
  border-radius:3px;
  padding:7px 4px 6px;
  cursor:pointer;
  transition:border-color .15s, background .15s, box-shadow .15s, transform .1s;
  background:#09091a;
  user-select:none;
  position:relative;
}
.sk-cell.sk-unlocked:hover{
  background:#0d1530;
  border-color:#2255aa;
  box-shadow:0 0 10px rgba(30,100,255,.3);
  transform:translateY(-2px);
}
.sk-cell.sk-active{
  border-color:#ffcc00;
  background:#110e00;
  box-shadow:0 0 14px rgba(255,200,0,.35), inset 0 0 8px rgba(255,200,0,.08);
}
/* Active indicator triangle (top-right corner) */
.sk-cell.sk-active::after{
  content:'';
  position:absolute; top:0; right:0;
  width:0; height:0;
  border-style:solid;
  border-width:0 14px 14px 0;
  border-color:transparent #ffcc00 transparent transparent;
}
.sk-cell.sk-locked{
  opacity:.45; cursor:not-allowed;
  border-color:#0a0a1a;
}

/* Preview canvas */
.sk-preview{
  width:52px; height:52px;
  border-radius:2px;
  image-rendering:pixelated;
  display:block;
}

/* Label */
.sk-label{
  font-family:'Orbitron',sans-serif;
  font-size:.48rem;
  color:#335588;
  text-align:center;
  line-height:1.4;
  max-width:78px;
  word-break:break-word;
  letter-spacing:.03em;
}
.sk-cell.sk-unlocked:not(.sk-active) .sk-label{ color:#4477aa; }
.sk-cell.sk-active .sk-label{ color:#ffcc00; }
.sk-cell.sk-locked  .sk-label{ color:#1a2a3a; }

/* ═══════════════════════════════════════════
   MEMORY — Konfiguration
═══════════════════════════════════════════ */
.mem-cfg-title{
  font-size:1.4rem;font-weight:700;color:var(--accent);
  margin-bottom:.3rem;text-align:center;
}
[data-style="retro"] .mem-cfg-title{ font-family:var(--font-retro);font-size:.85rem; }

.mem-cfg-sub{
  text-align:center;color:var(--text2);font-size:.85rem;margin-bottom:1.4rem;
}
.mem-diff-grid{
  display:grid;grid-template-columns:repeat(3,1fr);gap:.75rem;margin-bottom:1rem;
}
@media(max-width:480px){
  .mem-diff-grid{ grid-template-columns:1fr; }
}
.mem-diff-btn{
  background:var(--surface);border:2px solid var(--border);border-radius:var(--radius);
  padding:1rem .75rem;cursor:pointer;transition:border-color .2s,box-shadow .2s,transform .15s;
  color:var(--text);
}
.mem-diff-btn:hover{
  border-color:var(--accent);box-shadow:0 0 12px rgba(0,255,204,.2);transform:translateY(-2px);
}
.mem-diff-btn:active{ transform:translateY(0); }
.mem-diff-label{
  font-size:1rem;font-weight:700;margin-bottom:.3rem;
}
[data-style="retro"] .mem-diff-label{ font-family:var(--font-retro);font-size:.65rem; }
.mem-diff-sub{ font-size:.75rem;color:var(--text2); }

.mem-best-row{
  display:flex;justify-content:center;gap:1.5rem;margin-top:.75rem;flex-wrap:wrap;
}
.mem-best-item{ text-align:center; }
.mem-best-diff{ display:block;font-size:.7rem;color:var(--text3);margin-bottom:.15rem; }
.mem-best-val{ font-size:.8rem;color:var(--accent);font-weight:600; }

/* ═══════════════════════════════════════════
   MEMORY — HUD
═══════════════════════════════════════════ */
.mem-hud{
  display:flex;justify-content:space-between;align-items:center;
  background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);
  padding:.5rem 1rem;margin-bottom:.6rem;gap:.5rem;flex-wrap:wrap;
}
.mem-hud-item{
  font-size:.78rem;color:var(--text2);display:flex;flex-direction:column;align-items:center;gap:2px;
}
.mem-hud-label{ font-size:.62rem;color:var(--text3);text-transform:uppercase;letter-spacing:.05em; }
.mem-hud-val{ font-size:.95rem;font-weight:700;color:var(--text); }
[data-style="retro"] .mem-hud-val{ font-family:var(--font-retro);font-size:.6rem; }

/* ═══════════════════════════════════════════
   MEMORY — Spielgitter
═══════════════════════════════════════════ */
.mem-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:10px;
  margin:0 auto;
  max-width:720px;
}
@media(max-width:420px){
  .mem-grid{ gap:7px; }
}

/* ── Einzelne Karte ────────────────────────────────────────── */
.mem-card{
  aspect-ratio:1 / 1;
  perspective:600px;
  cursor:pointer;
  border-radius:10px;
  /* keine direkten Styles — alles über Inner und Faces */
}

.mem-card-inner{
  position:relative;
  width:100%;height:100%;
  transform-style:preserve-3d;
  transition:transform .42s cubic-bezier(.4,0,.2,1);
  border-radius:10px;
  will-change:transform; /* GPU-Layer erzwingen → flüssigere Animation */
}

/* Aufgedeckt: drehe die Innenseite */
.mem-card.mem-flipped .mem-card-inner{
  transform:rotateY(180deg);
}

/* ── Vorder- und Rückseite ─────────────────────────────────── */
.mem-card-back,
.mem-card-front{
  position:absolute;inset:0;
  border-radius:10px;
  backface-visibility:hidden;
  -webkit-backface-visibility:hidden;
  display:flex;align-items:center;justify-content:center;
  overflow:hidden;
  padding:6px;
  box-sizing:border-box;
}

/* Rückseite */
.mem-card-back{
  background:var(--surface2);
  border:2px solid var(--border);
  transition:border-color .2s,box-shadow .2s;
}
.mem-card:hover .mem-card-back{
  border-color:var(--accent);
  box-shadow:0 0 10px rgba(0,255,204,.18);
}
.mem-card-q{
  font-size:1.4rem;color:var(--text3);font-weight:700;
  user-select:none;
}
[data-style="retro"] .mem-card-q{
  /* Kein Pixel-Font auf der Karte — zu groß, überläuft */
  font-family:var(--font-main);font-size:1.3rem;
}

/* Vorderseite — gedreht (wird durch flip sichtbar) */
.mem-card-front{
  transform:rotateY(180deg);
  background:var(--surface);
  border:2px solid var(--accent);
  box-shadow:0 0 10px rgba(0,255,204,.18);
  flex-direction:column;
  gap:4px;
  text-align:center;
}

/* Formelname (text) */
.mem-front-name .mem-name-wrap{
  font-size:.75rem;font-weight:600;color:var(--text);
  line-height:1.3;overflow:hidden;
  display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;
}
[data-style="retro"] .mem-front-name .mem-name-wrap{
  /* Pixel-Font weglassen — unleserlich bei kleinen Karten */
  font-family:var(--font-main);font-size:.72rem;line-height:1.35;
}

/* Formelkarte (KaTeX) */
.mem-front-formula .mem-formula-wrap{
  max-width:100%;font-size:.7rem;
  overflow:hidden;
}
.mem-front-formula .mem-formula-wrap .katex{
  font-size:.72rem;white-space:normal;word-break:break-word;
}
@media(max-width:480px){
  .mem-front-formula .mem-formula-wrap .katex{ font-size:.6rem; }
  .mem-front-name .mem-name-wrap{ font-size:.68rem; }
}

/* ── "Kurz anschauen"-Zustand nach Treffer ──────────────────── */
/* Alle Transforms laufen auf .mem-card-inner — nie auf dem Outer-div.
   Das verhindert Konflikte zwischen Transition und Animation. */
.mem-card.mem-match-show .mem-card-inner{
  transform:rotateY(180deg) scale(1.06);
  transition:transform .18s ease, opacity .18s ease;
}
.mem-card.mem-match-show .mem-card-front{
  border-color:#f0c040;
  box-shadow:0 0 24px rgba(240,192,30,.75), 0 0 8px rgba(240,192,30,.4);
  transition:border-color .18s, box-shadow .18s;
}

/* ── Match-Verschwinden ─────────────────────────────────────── */
/* Läuft ausschließlich auf .mem-card-inner, damit kein zweites
   Element gleichzeitig transformiert wird.
   transition:none verhindert, dass die Flip-Transition die
   Animation überschreibt.
   Keyframe-Start bei scale(1.06) = genau der Endstand von
   mem-match-show → kein visueller Sprung beim Klassenwechsel. */
.mem-card.mem-matched{
  pointer-events:none;
}
.mem-card.mem-matched .mem-card-inner{
  transition:none;
  animation:memMatch .42s ease-in forwards;
}
@keyframes memMatch{
  0%  { transform:rotateY(180deg) scale(1.06); opacity:1; }
  100%{ transform:rotateY(180deg) scale(0);    opacity:0; }
}

/* ── Fehler-Shake ───────────────────────────────────────────── */
/* Läuft ebenfalls auf .mem-card-inner mit transition:none. */
.mem-card.mem-wrong .mem-card-inner{
  transition:none;
  animation:memWrong .48s ease;
}
.mem-card.mem-wrong .mem-card-front{
  border-color:var(--red);
  box-shadow:0 0 12px rgba(200,50,30,.4);
}
@keyframes memWrong{
  0%,100%{ transform:rotateY(180deg) translateX(0); }
  25%    { transform:rotateY(180deg) translateX(-6px); }
  75%    { transform:rotateY(180deg) translateX( 6px); }
}


/* ═══════════════════════════════════════════
   MEMORY — Zusammenfassung
═══════════════════════════════════════════ */
.mem-sum-stars{
  font-size:1.6rem;letter-spacing:.1em;
  margin:0 auto;display:block;text-align:center;
}
.mem-sum-stats{
  display:flex;justify-content:center;gap:2rem;margin:.75rem 0;
}
.mem-sum-stat{
  display:flex;flex-direction:column;align-items:center;gap:3px;
}
.mem-sum-stat-label{
  font-size:.7rem;color:var(--text3);text-transform:uppercase;letter-spacing:.06em;
}
.mem-sum-stat-val{
  font-size:1.05rem;font-weight:700;color:var(--accent);
}
[data-style="retro"] .mem-sum-stat-val{ font-family:var(--font-retro);font-size:.65rem; }

/* ═══════════════════════════════════════════
   OUTPUTS
═══════════════════════════════════════════ */
#view-out{
  padding:1rem 0 2rem;
}

/* ── Interaktive Tabelle ── */
.out-section{
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:8px;
  padding:1.25rem 1.5rem;
  overflow-x:auto;
}
.out-section-title{
  font-family:'Courier New',Courier,monospace;
  font-size:.8rem;font-weight:700;
  color:var(--text);
  margin-bottom:.2rem;
}
.out-sep{
  font-family:'Courier New',Courier,monospace;
  font-size:.8rem;color:var(--text3);
  margin-bottom:.75rem;
  white-space:pre;
}
.out-tss-grid{
  display:grid;
  grid-template-columns:8ch repeat(4,7ch);
  row-gap:1px;column-gap:2px;
}
.out-ic-grid{
  display:grid;
  grid-template-columns:28ch 7ch;
  row-gap:1px;column-gap:2px;
}
.out-sem-grid{
  display:grid;
  grid-template-columns:3ch 7ch 12ch 6ch 10ch;
  row-gap:1px;column-gap:2px;
}
.out-item-grid{
  display:grid;
  grid-template-columns:11ch 6ch 8ch 13ch 7ch 12ch 10ch;
  row-gap:1px;column-gap:2px;
}
.out-spacer{ height:1.5rem; }
.out-end{
  font-family:'Courier New',Courier,monospace;
  font-size:.8rem;color:var(--text3);
  margin-top:.75rem;
}
.out-left{ text-align:left !important; }
.out-cell{
  font-family:'Courier New',Courier,monospace;
  font-size:.8rem;
  line-height:1.9;
  padding:0 5px;
  border-radius:4px;
  background:transparent;
  border:none;
  color:var(--text);
  text-align:right;
  cursor:default;
}
.out-corner{ text-align:left; }
.out-head{
  color:var(--text2);font-weight:600;
  cursor:pointer;
  transition:background .12s,color .12s;
}
.out-rowlabel{
  text-align:left;
  cursor:pointer;
  transition:background .12s,color .12s;
}
.out-val{
  cursor:pointer;
  transition:background .12s,color .12s;
}
.out-head:hover,.out-rowlabel:hover,.out-val:hover{
  background:color-mix(in srgb,var(--accent) 14%,transparent);
  color:var(--accent);
}
.out-head:active,.out-rowlabel:active,.out-val:active{
  background:color-mix(in srgb,var(--accent) 24%,transparent);
}

/* ── Pre (Rest) ── */
#out-pre{
  font-family:'Courier New',Courier,monospace;
  font-size:.8rem;
  line-height:1.6;
  color:var(--text);
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:8px;
  padding:1.25rem 1.5rem;
  margin:0;
  white-space:pre;
  overflow-x:auto;
}

/* ── Modal ── */
#out-modal{
  position:fixed;inset:0;z-index:9500;
  background:rgba(0,0,0,.45);
  display:flex;align-items:center;justify-content:center;
  backdrop-filter:blur(2px);
}
#out-modal.hidden{ display:none; }
#out-modal-box{
  position:relative;
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:14px;
  padding:2rem 2.5rem 1.75rem;
  min-width:160px;
  text-align:center;
  box-shadow:0 8px 32px rgba(0,0,0,.3);
}
#out-modal-val{
  font-family:'Courier New',Courier,monospace;
  font-size:1.6rem;font-weight:700;
  color:var(--text);
  letter-spacing:.04em;
}
#out-modal-close{
  position:absolute;top:.6rem;right:.8rem;
  background:none;border:none;
  color:var(--text3);font-size:1rem;
  cursor:pointer;padding:.2rem .4rem;
  border-radius:4px;
  transition:color .15s,background .15s;
}
#out-modal-close:hover{ color:var(--text);background:var(--surface2); }

[data-style="modern"] .out-section,
[data-style="modern"] #out-pre{
  border-radius:10px;box-shadow:var(--card-shadow);
}
[data-style="modern"] #out-modal-box{ border-radius:16px; }

/* ═══════════════════════════════════════════
   SPERRBILDSCHIRM  (passt sich dem App-Theme an)
═══════════════════════════════════════════ */
#lock-overlay{
  position:fixed;inset:0;z-index:99999;
  display:flex;align-items:center;justify-content:center;
  background:var(--bg);
  transition:opacity .35s ease;
}
#lock-overlay.lock-fade-out{ opacity:0; pointer-events:none; }

#lock-box{
  display:flex;flex-direction:column;align-items:center;gap:1.5rem;
  padding:2.75rem 2.25rem 2.25rem;
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:16px;
  box-shadow:var(--card-shadow);
  width:min(380px, 92vw);
  text-align:center;
}

#lock-icon{
  width:48px;height:48px;
  display:flex;align-items:center;justify-content:center;
  margin-bottom:-.25rem;
}

#lock-title{
  font-family:system-ui,-apple-system,'Segoe UI',sans-serif;
  font-size:1.5rem;
  font-weight:700;
  color:var(--text);
  letter-spacing:-.02em;
  line-height:1.2;
}

#lock-sub{
  font-family:system-ui,-apple-system,'Segoe UI',sans-serif;
  font-size:.875rem;
  color:var(--text2);
  margin-top:-.5rem;
}

#lock-form{
  display:flex;flex-direction:column;gap:.75rem;width:100%;
}

#lock-email,
#lock-password{
  width:100%;
  padding:.7rem 1rem;
  font-family:system-ui,-apple-system,'Segoe UI',sans-serif;
  font-size:.95rem;
  color:var(--text);
  background:var(--surface2);
  border:1.5px solid var(--border);
  border-radius:10px;
  outline:none;
  box-sizing:border-box;
  transition:border-color .15s, box-shadow .15s, background .15s;
}
#lock-email:focus,
#lock-password:focus{
  background:var(--surface);
  border-color:var(--accent);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 20%,transparent);
}
#lock-email::placeholder,
#lock-password::placeholder{
  color:var(--text3);
}

#lock-submit{
  width:100%;
  padding:.75rem 1rem;
  font-family:system-ui,-apple-system,'Segoe UI',sans-serif;
  font-size:.95rem;font-weight:600;
  color:var(--bg);
  background:var(--accent);
  border:none;border-radius:10px;
  cursor:pointer;
  transition:opacity .15s, box-shadow .15s;
  margin-top:.25rem;
}
#lock-submit:hover:not(:disabled){
  opacity:.88;
  box-shadow:0 2px 12px color-mix(in srgb,var(--accent) 35%,transparent);
}
#lock-submit:disabled{
  opacity:.6;cursor:default;
}

#lock-error{
  font-family:system-ui,-apple-system,'Segoe UI',sans-serif;
  font-size:.8rem;
  color:var(--red);
  min-height:1.2em;
  opacity:0;
  transition:opacity .2s;
}
#lock-error.lock-err-visible{ opacity:1; }

@keyframes lock-shake{
  0%,100%{ transform:translateX(0); }
  20%     { transform:translateX(-7px); }
  40%     { transform:translateX( 7px); }
  60%     { transform:translateX(-4px); }
  80%     { transform:translateX( 4px); }
}
#lock-box.lock-shake{ animation:lock-shake .32s ease; }

#lock-pw-wrap{
  position:relative;width:100%;
}
#lock-pw-wrap #lock-password{
  padding-right:2.75rem;
}
#lock-pw-toggle{
  position:absolute;right:.7rem;top:50%;transform:translateY(-50%);
  background:none;border:none;padding:.2rem;
  color:var(--text3);cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  border-radius:6px;
  transition:color .15s;
}
#lock-pw-toggle:hover{ color:var(--accent); }

#lock-legal{
  display:flex;align-items:center;gap:.5rem;
  font-family:system-ui,-apple-system,'Segoe UI',sans-serif;
  font-size:.72rem;color:var(--text3);
  margin-top:-.25rem;
  flex-wrap:wrap;justify-content:center;
}
#lock-legal a{
  color:var(--text3);text-decoration:none;
  transition:color .15s;
}
#lock-legal a:hover{ color:var(--accent);text-decoration:underline; }
#lock-legal span{ opacity:.5; }

/* ════════════════════════════════════════════════════════════
   REGISTRATION PAGE
   ════════════════════════════════════════════════════════════ */
/* ════════════════════════════════════════════════════════════
   REGISTRATION PAGE
   ════════════════════════════════════════════════════════════ */

#reg-overlay{
  position:fixed;inset:0;z-index:99999;
  display:flex;align-items:flex-start;justify-content:center;
  background:var(--bg);
  overflow-y:auto;
  padding:2.5rem 1rem 5rem;
}

/* Card */
#reg-box{
  display:flex;flex-direction:column;
  padding:2.75rem 2.5rem 2.25rem;
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:20px;
  box-shadow:var(--card-shadow);
  width:min(480px,100%);
  margin:auto;
  font-family:system-ui,-apple-system,'Segoe UI',sans-serif;
}

/* ── Header ── */
.reg-header{
  text-align:center;
  margin-bottom:2rem;
}
.reg-logo{
  width:52px;height:52px;object-fit:contain;
  display:block;margin:0 auto 1.125rem;
}
.reg-title{
  font-size:1.5rem;font-weight:700;color:var(--text);
  letter-spacing:-.025em;line-height:1.2;
  margin-bottom:.375rem;
}
.reg-sub{ font-size:.875rem;color:var(--text2);line-height:1.5; }

/* ── Form: eigenes flex-Layout für gleichmäßige Abstände ── */
#reg-form{
  display:flex;flex-direction:column;gap:1.125rem;
}

.reg-row{ display:grid;grid-template-columns:1fr 1fr;gap:.875rem; }
.reg-field{ display:flex;flex-direction:column;gap:.375rem; }

.reg-label{
  font-size:.75rem;font-weight:600;color:var(--text2);
  letter-spacing:.01em;
}
.reg-hint{ font-weight:400;color:var(--text3); }

.reg-input{
  padding:.72rem 1rem;
  font-family:inherit;font-size:.9375rem;color:var(--text);
  background:var(--surface2);border:1.5px solid var(--border);border-radius:10px;
  outline:none;box-sizing:border-box;width:100%;
  transition:border-color .15s,box-shadow .15s,background .15s;
}
.reg-input:focus{
  background:var(--surface);border-color:var(--accent);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 20%,transparent);
}
.reg-input::placeholder{ color:var(--text3); }

/* Passwort-Sichtbarkeits-Toggle */
.reg-pw-wrap{ position:relative; }
.reg-pw-wrap .reg-input{ padding-right:2.75rem; }
.reg-pw-btn{
  position:absolute;right:.75rem;top:50%;transform:translateY(-50%);
  background:none;border:none;padding:.2rem;
  color:var(--text3);cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  border-radius:6px;transition:color .15s;
}
.reg-pw-btn:hover{ color:var(--accent); }

/* ── Checkboxen: visuell abgeteilt ── */
.reg-checks{
  display:flex;flex-direction:column;gap:.875rem;
  padding-top:1.25rem;
  border-top:1px solid var(--border);
}
.reg-check-row{
  display:flex;align-items:flex-start;gap:.625rem;
  font-size:.8125rem;color:var(--text2);line-height:1.6;cursor:pointer;
}
.reg-check-row input[type="checkbox"]{
  margin-top:.2rem;flex-shrink:0;
  width:16px;height:16px;accent-color:var(--accent);cursor:pointer;
}
.reg-check-row a{
  color:var(--accent);text-underline-offset:2px;
  text-decoration:underline;
}
.reg-check-row a:hover{ opacity:.8; }

/* ── Submit-Button ── */
#reg-submit{
  width:100%;padding:.8rem 1rem;
  font-family:inherit;font-size:.9375rem;font-weight:600;
  color:var(--bg);background:var(--accent);border:none;border-radius:10px;
  cursor:pointer;letter-spacing:.01em;
  transition:opacity .15s,box-shadow .15s,transform .1s;
  margin-top:.375rem;
}
#reg-submit:hover:not(:disabled){
  opacity:.88;
  box-shadow:0 2px 16px color-mix(in srgb,var(--accent) 35%,transparent);
}
#reg-submit:active:not(:disabled){ transform:translateY(1px); }
#reg-submit:disabled{ opacity:.6;cursor:default; }

/* ── Fehlermeldung ── */
#reg-error{
  font-size:.8rem;color:var(--red);
  text-align:center;opacity:0;transition:opacity .2s;
  min-height:1.2em;margin-top:.875rem;
}
#reg-error.reg-err-visible{ opacity:1; }

/* ── Erfolgsmeldung ── */
#reg-success{
  background:color-mix(in srgb,var(--green) 10%,var(--surface));
  border:1px solid color-mix(in srgb,var(--green) 35%,transparent);
  border-radius:12px;
  padding:1.5rem 1.5rem;
  font-size:.875rem;color:var(--green);line-height:1.7;text-align:center;
  margin-top:.5rem;
}
.reg-success-icon{
  font-size:2rem;margin-bottom:.625rem;color:var(--green);
}

/* ── "Bereits ein Konto?" – mit Trennlinie ── */
.reg-switch{
  text-align:center;
  font-size:.8125rem;color:var(--text2);
  margin-top:1.5rem;
  padding-top:1.25rem;
  border-top:1px solid var(--border);
}
.reg-switch a{ color:var(--accent);text-decoration:none;font-weight:500; }
.reg-switch a:hover{ text-decoration:underline; }

/* Legal-Links im Kontext der Registrierungsseite */
#reg-box #lock-legal{ margin-top:.875rem; }

@media(max-width:420px){
  #reg-box{ padding:2rem 1.5rem 1.75rem;border-radius:16px; }
  .reg-row{ grid-template-columns:1fr; }
}

/* ═══════════════════════════════════════════
   MOBILE RESPONSIVE  (≤ 600 px)
   Alle Regeln sind auf max-width begrenzt —
   die Desktop-Version bleibt unberührt.
═══════════════════════════════════════════ */

/* ── Feedback-Button: nur Symbol auf schmalen Screens ── */
@media (max-width: 600px) {
  .fb-btn-text { display: none; }
  #feedback-btn { padding: 8px 12px; }
}

/* ── Seiten mit Zurück-Button: Abstand für den fixen Feedback-Button ──
   Ohne Extra-Padding überlagert der feste ⚑-Button den Zurück-Button
   in der linken oberen Ecke des Seiteninhalts.                         */
@media (max-width: 600px) {
  #page-d1      { padding-top: 4.5rem; }
  #page-account { padding-top: 4.5rem; }
}

/* ── Mode-Tabs: horizontales Scrollen statt Zeilenumbruch ── */
@media (max-width: 600px) {
  .mode-tabs {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .mode-tabs::-webkit-scrollbar { display: none; }
  .mode-tab {
    flex-shrink: 0;
    white-space: nowrap;
    padding: 8px 10px;
  }
}

/* ── Karteikarte & MC-Karte: etwas kompakter ── */
@media (max-width: 600px) {
  .card {
    min-height: 180px;
    padding: 1.5rem 1.25rem;
  }
}

/* ── Feedback-Modal ── */
@media (max-width: 600px) {
  #feedback-box {
    padding: 1.25rem 1.25rem 1.5rem;
    border-radius: 14px;
  }
}

/* ── Profil-Panel: volle Breite auf sehr schmalen Displays ── */
@media (max-width: 400px) {
  #profile-panel {
    width: calc(100vw - 2rem);
    right: 1rem;
  }
}

/* ── Gefahrenzone: weniger Padding ── */
@media (max-width: 600px) {
  .as-danger-section { padding: 1.25rem 1rem; }
}

/* ── Formelübersicht (Overlay) ── */
@media (max-width: 600px) {
  .overlay        { padding: .75rem .5rem; }
  .overlay-box    { padding: 1rem .875rem; }

  /* frow: von 3-spaltigem Grid zu 2-spaltigem, 2-zeiligen Layout */
  .frow {
    grid-template-columns: 1fr 36px;
    grid-template-rows: auto auto;
    column-gap: 6px;
    row-gap: 2px;
    padding: 10px 2px;
  }
  .frow-name { grid-column: 1; grid-row: 1; }
  .frow-math { grid-column: 1; grid-row: 2; }
  .star-btn  { grid-column: 2; grid-row: 1 / 3; align-self: center; }
}

/* ── Memory-Grid: 2 Spalten → größere Karten, vertikal scrollbar ── */
@media (max-width: 600px) {
  .mem-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
  }
  /* Mehr Platz pro Karte → größere Schrift nutzbar */
  .mem-front-formula .mem-formula-wrap .katex { font-size: .72rem; }
  .mem-front-name .mem-name-wrap              { font-size: .74rem; }
}

/* ── SRS-Bewertungsbuttons: kompakter auf sehr kleinen Displays ── */
@media (max-width: 380px) {
  .srs-btn-no,
  .srs-btn-unsure,
  .srs-btn-ok {
    padding: 10px 4px !important;
    font-size: 11px !important;
  }
  .srs-interval-hint { font-size: 10px; }
}

/* ── Btn-Rows: bessere Touch-Targets ── */
@media (max-width: 600px) {
  .app-btn { padding: 10px 18px; }
  .btn-row { gap: 8px; }
}

/* ════════════════════════════════════════════════════════════════════
   Account-Settings: Nav-Button (→ Meine Daten u.a.)
   ════════════════════════════════════════════════════════════════════ */
.as-nav-btn {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  width:           100%;
  background:      var(--surface);
  border:          1px solid var(--border);
  border-radius:   12px;
  padding:         1rem 1.25rem;
  cursor:          pointer;
  text-align:      left;
  transition:      background .18s, border-color .18s, transform .1s;
  margin-bottom:   .75rem;
}
.as-nav-btn:hover {
  background:    color-mix(in srgb, var(--accent) 8%, var(--surface));
  border-color:  var(--accent);
}
.as-nav-btn:active { transform: scale(.985); }

.as-nav-btn-left {
  display:       flex;
  flex-direction: column;
  gap:            2px;
}
.as-nav-btn-title {
  font-family:   var(--font-main);
  font-size:     .9rem;
  font-weight:   600;
  color:         var(--text);
}
.as-nav-btn-sub {
  font-size:     .78rem;
  color:         var(--text2);
}
.as-nav-btn-arrow {
  font-size:     1.25rem;
  color:         var(--accent);
  flex-shrink:   0;
  margin-left:   .75rem;
}

/* ════════════════════════════════════════════════════════════════════
   Meine Daten — Seite
   ════════════════════════════════════════════════════════════════════ */
#page-mydata {
  min-height:    100vh;
  padding:       2rem 1.5rem 3rem;
  max-width:     680px;
  margin:        0 auto;
}

/* Intro-Banner */
.md-intro {
  background:    color-mix(in srgb, var(--accent) 10%, var(--surface));
  border:        1px solid color-mix(in srgb, var(--accent) 30%, transparent);
  border-radius: 14px;
  padding:       1.1rem 1.25rem;
  margin-bottom: 1.75rem;
}
.md-intro-title {
  font-family:   var(--font-main);
  font-size:     .9rem;
  font-weight:   700;
  color:         var(--accent);
  margin-bottom: .45rem;
}
.md-intro-text {
  font-size:     .82rem;
  color:         var(--text2);
  line-height:   1.55;
}
.md-intro-text strong {
  color:         var(--text);
}

/* Sections */
.md-section {
  background:    var(--surface);
  border:        1px solid var(--border);
  border-radius: 14px;
  padding:       1.1rem 1.25rem 1rem;
  margin-bottom: 1rem;
}
.md-section-head {
  display:         flex;
  align-items:     baseline;
  gap:             .5rem;
  margin-bottom:   .85rem;
  padding-bottom:  .6rem;
  border-bottom:   1px solid var(--border);
}
.md-section-title {
  font-family:   var(--font-main);
  font-size:     .85rem;
  font-weight:   700;
  color:         var(--accent);
}
.md-section-sub {
  font-size:     .75rem;
  color:         var(--text2);
  line-height:   1.4;
}

/* Row = label + description + value */
.md-rows {
  display:        flex;
  flex-direction: column;
  gap:            .55rem;
}
.md-row {
  display:         flex;
  align-items:     flex-start;
  justify-content: space-between;
  gap:             .75rem;
}
.md-row-left {
  display:        flex;
  flex-direction: column;
  gap:            1px;
  flex:           1 1 0;
  min-width:      0;
}
.md-label {
  font-size:     .82rem;
  font-weight:   600;
  color:         var(--text);
}
.md-desc {
  font-size:     .74rem;
  color:         var(--text2);
  line-height:   1.4;
}
.md-val {
  font-size:     .84rem;
  font-weight:   600;
  color:         var(--accent);
  white-space:   nowrap;
  flex-shrink:   0;
  padding-top:   1px;
}
.md-val-mono {
  font-family:   monospace;
  font-size:     .75rem;
  color:         var(--text2);
  word-break:    break-all;
  white-space:   normal;
  text-align:    right;
  max-width:     55%;
}

/* Sub-lists (reports, custom cards) */
.md-sub-list {
  margin-top:    .65rem;
  display:       flex;
  flex-direction: column;
  gap:           .4rem;
}

.md-custom-item {
  display:         flex;
  justify-content: space-between;
  align-items:     center;
  background:      color-mix(in srgb, var(--text) 4%, transparent);
  border-radius:   8px;
  padding:         .45rem .75rem;
  gap:             .5rem;
}
.md-report-title,
.md-custom-name {
  font-size:   .8rem;
  color:       var(--text);
  flex:        1 1 0;
  min-width:   0;
  overflow:    hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.md-report-date {
  font-size:   .73rem;
  color:       var(--text2);
  white-space: nowrap;
  flex-shrink: 0;
}
.md-custom-block {
  font-size:   .72rem;
  color:       var(--text2);
  white-space: nowrap;
  flex-shrink: 0;
  margin-right: .25rem;
}

.md-empty {
  font-size:   .8rem;
  color:       var(--text2);
  font-style:  italic;
  padding:     .3rem .25rem;
}

/* Footer note */
.md-footer-note {
  margin-top:    2rem;
  padding:       .9rem 1.1rem;
  background:    color-mix(in srgb, var(--text) 4%, transparent);
  border-radius: 10px;
  font-size:     .78rem;
  color:         var(--text2);
  line-height:   1.55;
  text-align:    center;
}

/* SRS-Detailliste (Lernstand pro Karte) */
.md-srs-details {
  margin-top:    .85rem;
  border-top:    1px solid var(--border);
  padding-top:   .65rem;
}
.md-srs-summary {
  font-size:     .78rem;
  color:         var(--accent);
  cursor:        pointer;
  user-select:   none;
  list-style:    none;
  display:       flex;
  align-items:   center;
  gap:           .35rem;
}
.md-srs-summary::-webkit-details-marker { display: none; }
.md-srs-summary::before {
  content:       '▸';
  font-size:     .7rem;
  transition:    transform .18s;
}
details[open] .md-srs-summary::before { transform: rotate(90deg); }
.md-srs-summary:hover { opacity: .8; }

.md-srs-list { margin-top: .55rem; }

/* Spalten-Legende */
.md-srs-legend {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  padding:         .25rem .6rem .3rem;
  font-size:       .68rem;
  color:           var(--text2);
  font-weight:     600;
  letter-spacing:  .03em;
  text-transform:  uppercase;
}
.md-srs-legend-meta {
  display:    flex;
  gap:        .5rem;
  flex-shrink: 0;
}
.md-srs-legend-meta span {
  cursor:    help;
  min-width: 3.5rem;
  text-align: right;
}
.md-srs-legend-meta span:last-child { min-width: 5.5rem; }

.md-srs-item {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  gap:             .5rem;
  padding:         .4rem .6rem;
  border-radius:   7px;
  background:      color-mix(in srgb, var(--text) 3%, transparent);
}
.md-srs-item + .md-srs-item { margin-top: .3rem; }

.md-srs-name {
  font-size:     .78rem;
  color:         var(--text);
  flex:          1 1 0;
  min-width:     0;
  overflow:      hidden;
  text-overflow: ellipsis;
  white-space:   nowrap;
}
.md-srs-meta {
  display:     flex;
  align-items: center;
  gap:         .5rem;
  flex-shrink: 0;
}
.md-srs-reps,
.md-srs-interval,
.md-srs-ef {
  font-size:  .73rem;
  color:      var(--text2);
  min-width:  3.5rem;
  text-align: right;
}
.md-srs-due {
  font-size:  .73rem;
  color:      var(--text2);
  min-width:  5.5rem;
  text-align: right;
}
.md-srs-overdue   { color: var(--red); font-weight: 600; }
.md-srs-today-due { color: var(--accent); font-weight: 600; }

/* Aufklappbare Report-Items */
.md-report-item {
  background:    color-mix(in srgb, var(--text) 4%, transparent);
  border-radius: 8px;
  padding:       0;
  overflow:      hidden;
}
.md-report-item + .md-report-item { margin-top: .4rem; }

.md-report-summary {
  display:         flex;
  justify-content: space-between;
  align-items:     center;
  gap:             .5rem;
  padding:         .45rem .75rem;
  cursor:          pointer;
  list-style:      none;
  user-select:     none;
}
.md-report-summary::-webkit-details-marker { display: none; }
.md-report-summary:hover { background: color-mix(in srgb, var(--text) 4%, transparent); }

.md-report-desc {
  font-size:   .78rem;
  color:       var(--text2);
  line-height: 1.5;
  padding:     .1rem .75rem .6rem;
  margin:      0;
  white-space: pre-wrap;
  border-top:  1px solid var(--border);
}

/* ── Mobile: Meine-Daten-Seite ── */
@media (max-width: 600px) {
  #page-mydata { padding-top: 4.5rem; }
  .md-val-mono { max-width: 48%; }
  .md-custom-item { flex-wrap: wrap; }
  .md-custom-name { white-space: normal; }
  /* SRS-Spalten: Intervall + Stärke auf kleinen Screens ausblenden */
  .md-srs-interval,
  .md-srs-ef,
  .md-srs-legend-meta span:nth-child(2),
  .md-srs-legend-meta span:nth-child(3) { display: none; }
}