/* ══════════════════════════════════════════
   Kartenkiste – cozy & smooth, pixel als akzent
   ══════════════════════════════════════════ */

:root {
  --bg:        #faf6ec;
  --bg-alt:    #e8dcc1;
  --surface:   #fffdf8;
  --ink:       #5b3f26;
  --ink-soft:  #815b37;
  --line:      #e0d2b4;
  --line-strong: #c5ae85;

  /* Primärfarbe = Hauptgrün (laut Spec) */
  --lilac:     #6a8a41;
  --lilac-dk:  #46652a;
  --lilac-lt:  #eaf0d9;

  --mint:      #b3ca85;
  --mint-dk:   #6a8a41;
  --sage:      #b6ccaa;
  --rose:      #e0857e;
  --rose-dk:   #cc6b64;
  --butter:    #e0a845;
  --butter-dk: #c48a2c;
  --peach:     #d27730;
  --peach-dk:  #b9611f;
  --sky:       #a3c6d6;
  --sky-dk:    #6fa2b8;

  --pix: 'Press Start 2P', monospace;
  --font: 'Nunito Sans', ui-rounded, 'Segoe UI', system-ui, sans-serif;

  --shadow:    0 12px 32px rgba(91, 63, 38, .08);
  --shadow-lg: 0 18px 40px rgba(91, 63, 38, .16);
  --radius:    24px;
  --radius-sm: 14px;
}

/* 12 Pastellfarben für Karten (warm & sanft) */
.pc-0  { --card-bg: #fffdf7; --card-edge: #ece0cd; }
.pc-1  { --card-bg: #f1e9ff; --card-edge: #cdb8f5; }
.pc-2  { --card-bg: #ffe6ec; --card-edge: #ffb0bb; }
.pc-3  { --card-bg: #ffe9d8; --card-edge: #ffbf9e; }
.pc-4  { --card-bg: #fff6d9; --card-edge: #ffdc94; }
.pc-5  { --card-bg: #f0f6d4; --card-edge: #cfe0a0; }
.pc-6  { --card-bg: #dcf1e3; --card-edge: #a8dcbb; }
.pc-7  { --card-bg: #d9f0f0; --card-edge: #9fe0e0; }
.pc-8  { --card-bg: #dcedff; --card-edge: #a9d0ef; }
.pc-9  { --card-bg: #e6e3ff; --card-edge: #bdb8f2; }
.pc-10 { --card-bg: #f8e5f6; --card-edge: #ecb7e8; }
.pc-11 { --card-bg: #f1e8d6; --card-edge: #dcc9a9; }

* { box-sizing: border-box; margin: 0; padding: 0; }

body {
  font-family: var(--font);
  font-size: 15px;
  line-height: 1.5;
  background: var(--bg);
  color: var(--ink);
  min-height: 100vh;
  background-image:
    radial-gradient(circle at 10% 6%, #faf0dc 0%, transparent 44%),
    radial-gradient(circle at 92% 90%, #e8f3e4 0%, transparent 46%),
    radial-gradient(circle at 96% 10%, #fdeadf 0%, transparent 38%);
  background-attachment: fixed;
}

button { font-family: inherit; cursor: pointer; border: none; background: none; color: inherit; }
input, textarea, select { font-family: inherit; font-size: .95rem; color: inherit; }
.hidden { display: none !important; }
h1, h2, h3 { font-weight: 700; letter-spacing: -.01em; }
.pix { font-family: var(--pix); font-weight: 400; letter-spacing: 0; }
code { font-family: ui-monospace, monospace; font-size: .82em; background: var(--lilac-lt); color: #6f5a97; padding: 1px 6px; border-radius: 5px; }

/* Pixel-Art scharf, alles andere weich */
.buddy-art, .buddy-big, .summary-buddy, .acc-icon { image-rendering: pixelated; }
img[src$=".png"] { image-rendering: pixelated; }

.scanlines { position: fixed; inset: 0; pointer-events: none; z-index: 70; display: none; background: repeating-linear-gradient(rgba(0,0,0,.045) 0 1px, transparent 1px 3px); }
body.crt .scanlines { display: block; }
#confetti { position: fixed; inset: 0; pointer-events: none; z-index: 80; display: none; }

.app { display: flex; min-height: 100vh; }

/* ── Sidebar ── */
.sidebar {
  width: 268px; flex-shrink: 0;
  background: rgba(255,253,247,.8); backdrop-filter: blur(10px);
  border-right: 1px solid var(--line);
  padding: 22px 16px; display: flex; flex-direction: column; gap: 16px;
  position: sticky; top: 0; height: 100vh;
}
.brand { display: flex; align-items: center; gap: 11px; }
.brand h1 { font-family: var(--pix); font-size: .74rem; line-height: 1.5; color: var(--lilac-dk); }
.brand-sub { font-size: .74rem; color: var(--ink-soft); margin-top: 3px; }
.brand-deco { width: 42px; height: 42px; object-fit: cover; border-radius: 12px; flex-shrink: 0; box-shadow: var(--shadow); }
.brand-deco:not([src]) { display: none; }

/* ── Maskottchen ── */
.buddy-box {
  display: flex; align-items: center; gap: 12px; text-align: left;
  background: linear-gradient(155deg, #fff7ec, var(--surface));
  border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow);
  padding: 11px 13px; transition: transform .14s, box-shadow .14s;
}
.buddy-box:hover { transform: translateY(-2px); box-shadow: var(--shadow-lg); }
.buddy-art { width: 54px; height: 54px; flex-shrink: 0; }
.buddy-art svg, .buddy-big svg, .summary-buddy svg, .acc-icon svg { width: 100%; height: 100%; display: block; }

/* Katze + PNG-Accessoire als Overlay */
.cat-wrap { position: relative; width: 100%; height: 100%; }
.cat-wrap > svg, .cat-wrap > img:not(.cat-acc) { width: 100%; height: 100%; display: block; }
.cat-wrap .cat-acc { position: absolute; height: auto; pointer-events: none; image-rendering: pixelated; }
/* Sinnvolle Position je Accessoire-Typ auf der Katze */
.cat-wrap .cat-acc-hat     { top: -16%; left: 11%; width: 78%; }
.cat-wrap .cat-acc-bow     { top: -2%;  left: 4%;  width: 42%; }
.cat-wrap .cat-acc-glasses { top: 30%;  left: 17%; width: 66%; }
.cat-wrap .cat-acc-scarf   { bottom: -8%; left: 15%; width: 70%; }
.buddy-info { flex: 1; min-width: 0; }
.buddy-lvl { font-family: var(--pix); font-size: .54rem; color: var(--lilac-dk); }
.buddy-lvl.big { font-size: .78rem; margin: 8px 0; }
.xp-bar { height: 11px; background: var(--bg-alt); border-radius: 20px; overflow: hidden; margin: 6px 0; }
.xp-bar.big { height: 16px; }
.xp-fill { height: 100%; width: 0; background: linear-gradient(90deg, var(--lilac), #d6c2ff); border-radius: 20px; transition: width .5s cubic-bezier(.4,0,.2,1); }
.buddy-xp { font-size: .74rem; color: var(--ink-soft); }

/* ── Serie ── */
.streak-box { background: linear-gradient(150deg, #fff2df, var(--surface)); border: 1px solid #f4e2c8; border-radius: var(--radius); box-shadow: var(--shadow); padding: 11px 13px; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.streak-flame { font-size: 1.4rem; }
.streak-num { font-size: 1.02rem; font-weight: 700; }
.streak-lbl { font-size: .7rem; color: var(--ink-soft); }
.streak-week { width: 100%; margin-top: 3px; }
.week-dots { display: flex; gap: 4px; margin-bottom: 5px; }
.week-dot { flex: 1; height: 8px; background: var(--bg-alt); border-radius: 5px; }
.week-dot.done { background: var(--mint-dk); }
.week-dot.today { box-shadow: 0 0 0 2px var(--lilac); }

.side-section { flex: 1; overflow-y: auto; min-height: 0; }
.side-head { display: flex; justify-content: space-between; align-items: center; font-size: .7rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-soft); margin-bottom: 10px; padding: 0 4px; }
.icon-btn { width: 26px; height: 26px; border-radius: 9px; background: var(--lilac-lt); color: var(--lilac-dk); font-size: 1.05rem; line-height: 1; transition: .15s; }
.icon-btn:hover { background: var(--lilac); color: #fff; }

.course-tree { display: flex; flex-direction: column; gap: 4px; }
.course-row { display: flex; align-items: center; gap: 8px; width: 100%; text-align: left; padding: 9px 10px; border-radius: var(--radius-sm); font-weight: 600; font-size: .92rem; transition: .14s; }
.course-row:hover { background: var(--bg-alt); }
.course-row.selected { background: var(--lilac-lt); color: #6f5a97; }
.course-row.archived, .deck-row.archived { opacity: .5; }
.caret { font-size: .6rem; color: var(--ink-soft); transition: transform .18s; width: 11px; flex-shrink: 0; }
.caret.open { transform: rotate(90deg); }
.course-name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.badge { font-size: .68rem; font-weight: 700; color: var(--ink-soft); background: var(--bg-alt); padding: 2px 8px; border-radius: 20px; }
.badge.due { background: var(--rose); color: #fff; }

.deck-list { padding: 3px 0 6px 20px; display: flex; flex-direction: column; gap: 3px; }
.deck-row { display: flex; align-items: center; gap: 7px; width: 100%; border-radius: var(--radius-sm); padding-right: 6px; color: var(--ink-soft); transition: .14s; overflow: hidden; }
.deck-row:hover { background: var(--bg-alt); color: var(--ink); }
.deck-row.selected { background: var(--mint); color: #2f6b45; font-weight: 600; }
.deck-swatch { width: 6px; align-self: stretch; background: var(--card-edge, var(--line)); flex-shrink: 0; }
.deck-pick { display: flex; align-items: center; gap: 8px; flex: 1; min-width: 0; padding: 8px 0 8px 6px; text-align: left; font-size: .88rem; }
.deck-edit { width: 26px; height: 26px; border-radius: 8px; flex-shrink: 0; font-size: .82rem; color: var(--ink-soft); opacity: .5; transition: .14s; }
.deck-row:hover .deck-edit { opacity: 1; }
.deck-edit:hover { background: var(--surface); color: var(--lilac-dk); }
.deck-mini { font-size: .8rem; color: var(--lilac-dk); font-weight: 600; padding: 6px 10px; border-radius: 9px; text-align: left; width: 100%; }
.deck-mini:hover { background: var(--lilac-lt); }
.show-arch { display: flex; align-items: center; gap: 7px; font-size: .78rem; color: var(--ink-soft); padding: 12px 4px 0; cursor: pointer; }
.show-arch input, .toggle input { accent-color: var(--lilac-dk); width: 15px; height: 15px; }

.side-foot { display: flex; flex-direction: column; gap: 2px; border-top: 1px solid var(--line); padding-top: 12px; }
.nav-link { padding: 9px 10px; border-radius: 10px; text-align: left; font-size: .88rem; font-weight: 600; color: var(--ink-soft); transition: .14s; }
.nav-link:hover { background: var(--bg-alt); color: var(--ink); }
.nav-link.active { background: var(--lilac-lt); color: #6f5a97; }
.foot-deco { width: 100%; max-height: 90px; object-fit: contain; margin-top: 10px; border-radius: var(--radius-sm); }
.foot-deco:not([src]) { display: none; }

/* ── Main ── */
.main { flex: 1; padding: 26px 42px 60px; max-width: 1000px; }
.tabs { display: flex; gap: 4px; margin-bottom: 24px; border-bottom: 1px solid var(--line); flex-wrap: wrap; }
.tab { display: inline-flex; align-items: center; gap: 8px; font-size: .9rem; font-weight: 700; padding: 10px 14px; border-radius: 12px 12px 0 0; color: var(--ink-soft); border-bottom: 3px solid transparent; margin-bottom: -1px; transition: .16s; }
.tab:hover { color: var(--ink); background: var(--bg-alt); }
.tab.active { color: var(--lilac-dk); border-bottom-color: var(--lilac); }
.tab-ico { width: 22px; height: 22px; flex-shrink: 0; }
.nav-ico { width: 20px; height: 20px; vertical-align: -4px; margin-right: 4px; }
.streak-ico { width: 34px; height: 34px; }

.page-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 20px; margin-bottom: 22px; }
.page-head h2 { font-size: 1.6rem; }
.page-sub { font-size: .9rem; color: var(--ink-soft); margin-top: 5px; }
.head-deco { width: 76px; height: 76px; object-fit: cover; border-radius: 16px; flex-shrink: 0; box-shadow: var(--shadow); }
.head-deco:not([src]) { display: none; }

.card-panel {
  position: relative; overflow: hidden;
  background-color: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow); padding: 22px 24px; margin-bottom: 16px;
  background-repeat: no-repeat;
  background-position: 6px 6px, right 6px top 6px, left 6px bottom 6px, right 6px bottom 6px;
  background-size: 26px 26px;
  background-image:
    url("assets/corner_top_left.png"),
    url("assets/corner_top_right.png"),
    url("assets/corner_bottom_left.png"),
    url("assets/corner_bottom_right.png");
}
/* Pixel-Deko rechts unten in Panels */
.panel-decor { position: absolute; right: 12px; bottom: 10px; pointer-events: none; image-rendering: pixelated; z-index: 0; }
.panel-decor.cat { width: 150px; opacity: .97; }
.panel-decor.desk { width: 96px; opacity: .97; right: 16px; bottom: 12px; }
/* Panel hoch genug, damit der Schreibtisch den „Termin setzen"-Button nie erreicht */
#exam-panel { min-height: 188px; }
/* Studien-Katze oben rechts, damit der „Los geht's"-Button sie nicht überdeckt */
.panel-decor.start-cat { width: 150px; top: 6px; right: 12px; bottom: auto; }
/* Blatt-Girlande sitzt auf dem oberen Rahmen der Box */
.panel-topper { position: absolute; top: 0; left: 50%; transform: translate(-50%, -52%); width: 190px; height: auto; z-index: 3; pointer-events: none; image-rendering: pixelated; }
.card-panel > *:not(.panel-decor):not(.panel-topper) { position: relative; z-index: 1; }
/* Inhalt macht Platz, damit Deko frei steht (auf großen Screens) */
@media (min-width: 901px) {
  #exam-body, .mini-stats { padding-right: 132px; }
  #view-dashboard .card-panel > h3 { padding-right: 150px; }
}
/* Icons einheitlich groß & unverzerrt */
.tab-ico, .nav-ico, .chip-ico, .coll-ico, .ach-ico, .pd-ico, .prof-ach-ico, .streak-ico, .currency-bar .cur img, .pen-ico { object-fit: contain; }
.card-panel h3 { font-size: 1.02rem; margin-bottom: 8px; }
.card-panel.danger { border-color: #f7d5da; }
.panel-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-bottom: 14px; }
.panel-head h3 { margin: 0; }
.pct { font-size: 1.35rem; font-weight: 700; color: var(--lilac-dk); }
.soon { font-size: .58rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: #fff; background: var(--sky-dk); padding: 3px 8px; border-radius: 12px; vertical-align: middle; }

.bar { height: 15px; background: var(--bg-alt); border-radius: 20px; overflow: hidden; }
.bar-fill { height: 100%; width: 0; background: linear-gradient(90deg, var(--lilac), #d9c6ff); border-radius: 20px; transition: width .5s cubic-bezier(.4,0,.2,1); }
.bar-note { font-size: .84rem; color: var(--ink-soft); margin-top: 10px; }
.mini-stats { display: flex; gap: 18px; flex-wrap: wrap; margin-top: 14px; }
.mini-stat { font-size: .82rem; color: var(--ink-soft); }
.mini-stat b { font-size: 1.15rem; color: var(--ink); display: block; margin-bottom: 1px; }

.level-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-bottom: 16px; }
.level-box { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); padding: 18px; position: relative; }
.dot { position: absolute; top: 18px; right: 18px; width: 12px; height: 12px; border-radius: 50%; }
.lvl-red .dot { background: var(--rose); } .lvl-yellow .dot { background: var(--butter-dk); } .lvl-green .dot { background: var(--mint-dk); }
.lvl-red { background: linear-gradient(160deg, #fff3f4, var(--surface)); }
.lvl-yellow { background: linear-gradient(160deg, #fff9e9, var(--surface)); }
.lvl-green { background: linear-gradient(160deg, #eff9f2, var(--surface)); }
.level-num { font-size: 1.9rem; font-weight: 700; letter-spacing: -.02em; }
.level-lbl { font-size: .76rem; color: var(--ink-soft); margin-top: 4px; }

.opt-row { display: flex; align-items: center; gap: 14px; margin: 14px 0; flex-wrap: wrap; }
.opt-label { font-size: .72rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-soft); width: 96px; flex-shrink: 0; }
.chips { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.chip { font-size: .88rem; font-weight: 600; padding: 8px 15px; border-radius: 20px; background: var(--bg-alt); color: var(--ink-soft); transition: .15s; }
.chip:hover { background: var(--lilac-lt); color: var(--lilac-dk); }
.chip.active { background: var(--lilac); color: #fff; box-shadow: 0 4px 12px rgba(161,132,230,.34); }
.scope-note { font-size: .9rem; flex: 1; }
.due-note { font-size: .84rem; color: var(--ink-soft); text-align: center; margin-top: 10px; }

.input, .textarea, .select, .mini-input { background: var(--bg-alt); border: 1.5px solid transparent; border-radius: var(--radius-sm); padding: 11px 14px; width: 100%; transition: .15s; outline: none; }
.input:focus, .textarea:focus, .select:focus, .mini-input:focus { border-color: var(--lilac); background: var(--surface); }
.textarea { resize: vertical; line-height: 1.5; }
.mini-input { width: 110px; }
.select { cursor: pointer; }
.card-panel > .input, .card-panel > .textarea { margin: 12px 0; }
.filter-row { display: flex; gap: 12px; align-items: center; margin-bottom: 16px; flex-wrap: wrap; }
.search { max-width: 240px; }
.toggle { display: flex; align-items: center; gap: 10px; font-size: .9rem; padding: 8px 0; cursor: pointer; }

.btn-primary { font-weight: 700; font-size: .9rem; color: #fff; background: var(--lilac); border-radius: 20px; padding: 11px 22px; box-shadow: 0 4px 14px rgba(161,132,230,.32); transition: .15s; }
.btn-primary:hover { background: var(--lilac-dk); transform: translateY(-1px); }
.btn-primary:active { transform: translateY(1px); }
.btn-primary:disabled { opacity: .5; cursor: not-allowed; transform: none; }
.btn-primary.big { width: 100%; padding: 14px; font-size: .98rem; margin-top: 8px; }
.btn-primary.tiny, .btn-ghost.tiny { font-size: .8rem; padding: 8px 14px; }
.btn-ghost { font-weight: 600; font-size: .88rem; color: var(--ink-soft); padding: 10px 16px; border-radius: 20px; transition: .14s; }
.btn-ghost:hover { background: var(--bg-alt); color: var(--ink); }
.btn-ghost.outline { border: 1.5px solid var(--line); }
.btn-ghost.outline:hover { border-color: var(--lilac); background: var(--lilac-lt); color: var(--lilac-dk); }
.btn-danger { font-weight: 700; font-size: .88rem; color: #fff; background: var(--rose); border-radius: 20px; padding: 10px 18px; box-shadow: 0 4px 14px rgba(255,176,187,.5); transition: .15s; }
.btn-danger:hover { background: var(--rose-dk); }

/* ── Study ── */
.study-head { align-items: center; }
.study-progress { display: flex; align-items: center; gap: 12px; }
#study-counter { font-size: .84rem; font-weight: 700; color: var(--ink-soft); }
.mini-bar { width: 170px; height: 9px; background: var(--bg-alt); border-radius: 10px; overflow: hidden; }
.mini-bar-fill { height: 100%; width: 0; background: var(--lilac); border-radius: 10px; transition: width .35s; }

.stage { display: flex; flex-direction: column; align-items: center; gap: 15px; }
.flashcard { width: 100%; max-width: 640px; height: 380px; perspective: 1600px; cursor: pointer; }
.flip-inner { position: relative; width: 100%; height: 100%; transition: transform .58s cubic-bezier(.4,.15,.2,1); transform-style: preserve-3d; }
.flip-inner.flipped { transform: rotateY(180deg); }
.face { position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden; border: 1.5px solid var(--card-edge, var(--line)); border-radius: 22px; box-shadow: var(--shadow-lg); background: var(--card-bg, var(--surface)); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; padding: 48px 34px 34px; text-align: center; overflow: auto; }
.face.back { transform: rotateY(180deg); }
.face-text { font-size: 1.3rem; font-weight: 600; line-height: 1.5; }
.face-img { max-width: 100%; max-height: 220px; object-fit: contain; border-radius: var(--radius-sm); }
.face-top { position: absolute; top: 14px; left: 20px; right: 20px; display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.face-deck { font-size: .7rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--ink-soft); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: left; }
.face-status { display: flex; align-items: center; gap: 6px; font-size: .74rem; color: var(--ink-soft); flex-shrink: 0; }
.face-status .pill { width: 10px; height: 10px; border-radius: 50%; }
.face-side { position: absolute; bottom: 14px; left: 0; right: 0; font-size: .64rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-soft); opacity: .7; }
.face-flags { position: absolute; top: 40px; right: 20px; font-size: .9rem; }

.card-tools { display: flex; gap: 8px; }
.tool-btn { width: 42px; height: 42px; border-radius: 13px; background: var(--surface); border: 1px solid var(--line); font-size: 1rem; box-shadow: var(--shadow); transition: .14s; }
.tool-btn:hover { border-color: var(--lilac); background: var(--lilac-lt); transform: translateY(-1px); }
.tool-btn.on { background: var(--butter); border-color: var(--butter-dk); }

.hint-box { max-width: 640px; width: 100%; background: #fff7e2; border: 1px solid var(--butter-dk); border-radius: var(--radius-sm); padding: 14px 16px; font-size: .92rem; line-height: 1.5; display: flex; align-items: center; gap: 12px; }
.hint-cat { width: 46px; height: 46px; flex-shrink: 0; image-rendering: pixelated; }
.hint { font-size: .82rem; color: var(--ink-soft); text-align: center; }

.answer-row { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; }
.rate { font-weight: 700; font-size: .88rem; padding: 12px 20px; border-radius: 16px; transition: .15s; display: flex; flex-direction: column; align-items: center; gap: 3px; min-width: 108px; box-shadow: var(--shadow); }
.rate small { font-size: .62rem; opacity: .65; font-weight: 600; }
.rate:hover { transform: translateY(-2px); box-shadow: var(--shadow-lg); }
.rate-again { background: var(--rose); color: #fff; }
.rate-hard { background: var(--butter); color: #8a6413; }
.rate-good { background: var(--mint); color: #2f6b45; }
.rate-easy { background: var(--sky); color: #2c5578; }

.summary { text-align: center; padding: 26px 0; }
.summary h2 { font-size: 1.55rem; margin-bottom: 10px; }
.summary > p { color: var(--ink-soft); margin-bottom: 18px; }
.summary-buddy { margin: 0 auto 6px; }
.cat-emote { width: 210px; height: auto; image-rendering: pixelated; display: block; margin: 0 auto; }
.summary-stats { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin-bottom: 20px; }
.sum-tile { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-sm); box-shadow: var(--shadow); padding: 12px 18px; }
.sum-num { font-size: 1.4rem; font-weight: 700; }
.sum-lbl { font-size: .72rem; color: var(--ink-soft); margin-top: 3px; }
.summary-actions { display: flex; gap: 12px; justify-content: center; }

/* ── Kartenliste ── */
.card-list { display: flex; flex-direction: column; gap: 10px; }
.mini-card { background: var(--surface); border: 1px solid var(--line); border-left: 6px solid var(--line); border-radius: var(--radius-sm); box-shadow: var(--shadow); padding: 13px 16px; display: flex; align-items: center; gap: 13px; transition: .15s; }
.mini-card:hover { transform: translateX(2px); box-shadow: var(--shadow-lg); }
.mini-card.lvl-red { border-left-color: var(--rose); } .mini-card.lvl-yellow { border-left-color: var(--butter-dk); } .mini-card.lvl-green { border-left-color: var(--mint-dk); }
.mini-thumb { width: 46px; height: 46px; object-fit: cover; border-radius: 10px; flex-shrink: 0; }
.mini-swatch { width: 10px; height: 46px; border-radius: 5px; background: var(--card-bg); border: 1px solid var(--card-edge); flex-shrink: 0; }
.mini-body { flex: 1; min-width: 0; }
.mini-q { font-weight: 600; font-size: .95rem; margin-bottom: 2px; }
.mini-a { font-size: .84rem; color: var(--ink-soft); }
.mini-q, .mini-a { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mini-deck { font-size: .72rem; color: var(--ink-soft); margin-top: 4px; }
.mini-actions { display: flex; gap: 4px; flex-shrink: 0; }
.mini-btn { width: 32px; height: 32px; border-radius: 9px; font-size: .85rem; color: var(--ink-soft); transition: .14s; }
.mini-btn:hover { background: var(--bg-alt); color: var(--ink); }
.mini-btn.on { color: var(--butter-dk); }
.mini-btn.del:hover { background: #ffe6ec; color: var(--rose-dk); }
.empty { text-align: center; padding: 52px 20px; color: var(--ink-soft); background: var(--surface); border: 1px dashed var(--line); border-radius: var(--radius); }
.empty-emoji { font-size: 2.1rem; display: block; margin-bottom: 10px; }

/* ── Sammlungen ── */
.coll-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(205px, 1fr)); gap: 14px; margin-bottom: 16px; }
.coll-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); padding: 18px; text-align: left; transition: .15s; }
.coll-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); }
.coll-emoji { font-size: 1.5rem; }
.coll-num { font-size: 1.7rem; font-weight: 700; margin-top: 6px; }
.coll-name { font-weight: 700; font-size: .94rem; margin-top: 2px; }
.coll-desc { font-size: .76rem; color: var(--ink-soft); margin-top: 5px; line-height: 1.4; }

/* ── Kalender ── */
.cal-weekdays, .cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; }
.cal-weekdays { margin-bottom: 6px; }
.cal-weekdays span { text-align: center; font-size: .68rem; font-weight: 700; text-transform: uppercase; color: var(--ink-soft); }
.cal-day { aspect-ratio: 1; border-radius: 11px; background: var(--bg-alt); display: flex; flex-direction: column; align-items: center; justify-content: center; font-size: .82rem; font-weight: 600; transition: .14s; position: relative; border: 2px solid transparent; }
.cal-day:hover { border-color: var(--lilac); }
.cal-day.blank { background: none; cursor: default; }
.cal-day.blank:hover { border-color: transparent; }
.cal-day.today { border-color: var(--lilac-dk); }
.cal-day.selected { box-shadow: var(--shadow); border-color: var(--ink-soft); }
.cal-day .n { font-size: .6rem; font-weight: 600; color: var(--ink-soft); }
.cal-day.d1 { background: #dcf1e3; } .cal-day.d2 { background: #b6e4c6; } .cal-day.d3 { background: #8fd6a8; } .cal-day.d4 { background: var(--mint-dk); }
.cal-day.exam { background: var(--rose); color: #fff; } .cal-day.exam .n { color: #fff; }
.cal-day .due-mark { position: absolute; top: 4px; right: 4px; width: 7px; height: 7px; border-radius: 50%; background: var(--lilac-dk); }
.cal-legend { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 14px; font-size: .78rem; color: var(--ink-soft); }
.cal-legend span { display: flex; align-items: center; gap: 5px; }
.sw { width: 12px; height: 12px; border-radius: 4px; display: inline-block; }
.sw0 { background: var(--bg-alt); } .sw1 { background: #b6e4c6; } .sw3 { background: var(--mint-dk); } .sw-exam { background: var(--rose); } .sw-due { background: var(--lilac-dk); border-radius: 50%; }

/* ── Statistik ── */
.stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 14px; margin-bottom: 16px; }
.stat-tile { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); padding: 18px; }
.stat-num { font-size: 1.55rem; font-weight: 700; letter-spacing: -.02em; }
.stat-lbl { font-size: .74rem; color: var(--ink-soft); margin-top: 4px; }
.stat-row { margin-bottom: 12px; }
.stat-row-head { display: flex; justify-content: space-between; font-size: .86rem; margin-bottom: 5px; }
.stat-row-head span { color: var(--ink-soft); font-size: .8rem; }
.stat-bar { height: 10px; background: var(--bg-alt); border-radius: 10px; overflow: hidden; }
.stat-bar i { display: block; height: 100%; background: var(--lilac); border-radius: 10px; }

/* ── Belohnungen ── */
.buddy-panel { display: flex; gap: 22px; align-items: center; flex-wrap: wrap; }
.buddy-panel { background: linear-gradient(150deg, #fff6ea, var(--surface)); }
.buddy-big { width: 128px; height: 128px; flex-shrink: 0; }
.buddy-big-info { flex: 1; min-width: 200px; }
.acc-grid, .ach-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 12px; }
.acc-card, .ach-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-sm); box-shadow: var(--shadow); padding: 14px 10px; text-align: center; }
.acc-card { cursor: pointer; transition: .15s; }
.acc-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-lg); }
.acc-card.locked, .ach-card.locked { opacity: .5; }
.acc-card.equipped { background: var(--lilac-lt); border-color: var(--lilac); }
.acc-icon { width: 46px; height: 46px; margin: 0 auto 7px; }
.acc-name { font-size: .82rem; font-weight: 600; }
.acc-need { font-size: .7rem; color: var(--ink-soft); margin-top: 3px; }
.ach-emoji { font-size: 1.7rem; }
.ach-name { font-weight: 700; font-size: .84rem; margin-top: 8px; }
.ach-need { font-size: .74rem; color: var(--ink-soft); margin-top: 5px; }
.ach-card.done { background: linear-gradient(160deg, #eff9f2, var(--surface)); border-color: var(--mint-dk); }

/* ── Modal ── */
.modal-backdrop { position: fixed; inset: 0; background: rgba(87,77,99,.3); backdrop-filter: blur(4px); display: flex; align-items: center; justify-content: center; padding: 20px; z-index: 90; }
.modal { background: var(--surface); border-radius: var(--radius); box-shadow: var(--shadow-lg); padding: 26px; width: 100%; max-width: 560px; max-height: 88vh; overflow-y: auto; animation: pop .22s cubic-bezier(.34,1.4,.64,1); }
@keyframes pop { from { opacity: 0; transform: scale(.95) translateY(8px); } }
.modal h3 { font-size: 1.2rem; margin-bottom: 16px; }
.modal-actions { display: flex; gap: 10px; justify-content: flex-end; margin-top: 20px; }
.field { margin-bottom: 14px; }
.field label { display: block; font-size: .72rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--ink-soft); margin-bottom: 7px; }
.img-slot { display: flex; align-items: center; gap: 10px; margin-top: 8px; }
.img-slot img { width: 58px; height: 58px; object-fit: cover; border-radius: 10px; border: 1px solid var(--line); }
.file-btn { font-size: .8rem; font-weight: 600; color: var(--lilac-dk); padding: 8px 13px; border-radius: 11px; background: var(--lilac-lt); }
.file-btn:hover { background: var(--lilac); color: #fff; }
.swatches { display: flex; gap: 7px; flex-wrap: wrap; }
.swatch { width: 32px; height: 32px; border-radius: 9px; background: var(--card-bg); border: 2px solid var(--card-edge); transition: .14s; }
.swatch:hover { transform: scale(1.12); }
.swatch.sel { box-shadow: 0 0 0 3px var(--lilac-dk); }
.row-actions { display: flex; gap: 8px; margin: 14px 0 8px; flex-wrap: wrap; }
.radio-row { display: flex; flex-direction: column; gap: 10px; margin: 12px 0; }
.radio-opt { display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; border: 1.5px solid var(--line); border-radius: var(--radius-sm); cursor: pointer; transition: .14s; }
.radio-opt:hover { border-color: var(--lilac); background: var(--lilac-lt); }
.radio-opt input { margin-top: 3px; accent-color: var(--lilac-dk); }
.radio-opt strong { font-size: .95rem; display: block; }
.radio-opt span { font-size: .8rem; color: var(--ink-soft); line-height: 1.4; }

.backup-row { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 14px; }
.status { font-size: .84rem; color: var(--ink-soft); margin-top: 12px; min-height: 20px; }
.status.err { color: var(--rose-dk); font-weight: 600; }
.status.ok { color: var(--mint-dk); font-weight: 600; }
.deco-preview { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 14px; }
.deco-preview img { width: 74px; height: 74px; object-fit: cover; border-radius: var(--radius-sm); border: 1px solid var(--line); }

.toast { position: fixed; bottom: 26px; left: 50%; transform: translateX(-50%); font-weight: 600; font-size: .9rem; background: var(--ink); color: #fff; padding: 13px 22px; border-radius: 20px; box-shadow: var(--shadow-lg); z-index: 95; animation: rise .26s cubic-bezier(.34,1.4,.64,1); }
@keyframes rise { from { opacity: 0; transform: translateX(-50%) translateY(10px); } }

/* Erfolgs-Benachrichtigung unten links */
.ach-pop { position: fixed; left: 22px; bottom: 22px; z-index: 96; display: flex; align-items: center; gap: 12px;
  background: var(--surface); border: 1px solid var(--line-strong); border-radius: 16px; box-shadow: var(--shadow-lg);
  padding: 12px 16px 12px 12px; max-width: 320px; animation: achIn .3s cubic-bezier(.34,1.5,.6,1); }
.ach-pop.hide { animation: achOut .3s ease forwards; }
.ach-pop .pop-ico { width: 52px; height: 52px; flex-shrink: 0; }
.ach-pop .pop-eyebrow { font-size: .66rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--lilac-dk); }
.ach-pop .pop-name { font-weight: 800; font-size: 1rem; }
.ach-pop .pop-reward { font-size: .78rem; color: var(--ink-soft); }
@keyframes achIn { from { opacity: 0; transform: translateX(-24px); } }
@keyframes achOut { to { opacity: 0; transform: translateX(-24px); } }

/* Profil */
.prof-head { display: flex; gap: 22px; align-items: center; flex-wrap: wrap; }
.prof-avatar { width: 120px; height: 120px; flex-shrink: 0; }
.prof-avatar svg, .prof-avatar img { width: 100%; height: 100%; image-rendering: pixelated; }
.prof-name { font-size: 1.5rem; font-weight: 800; }
.prof-meta { color: var(--ink-soft); font-size: .92rem; margin-top: 2px; }
.prof-bio { margin-top: 10px; line-height: 1.5; }
.prof-badges { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; }
.prof-chip { display: inline-flex; align-items: center; gap: 6px; background: var(--lilac-lt); border: 1px solid var(--mint); color: var(--lilac-dk); font-weight: 700; font-size: .8rem; padding: 5px 12px; border-radius: 20px; }
.prof-ach { display: flex; gap: 8px; flex-wrap: wrap; }
.prof-ach .acc-icon { width: 42px; height: 42px; }
.prof-deck { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 14px; margin-bottom: 8px; background: var(--surface); }
.prof-deck .pd-body { flex: 1; min-width: 0; }
.prof-deck .pd-title { font-weight: 700; }
.prof-deck .pd-sub { font-size: .78rem; color: var(--ink-soft); }
.prof-deck .pd-likes { font-weight: 800; color: var(--rose-dk); white-space: nowrap; }
.field-lbl { display: block; font-size: .72rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--ink-soft); margin-bottom: 7px; }

/* ── PNG-Widgets & Deko ── */
.panel-decor.desk { width: 148px; opacity: .96; bottom: 0; right: 8px; }
.panel-decor.chest { width: 96px; bottom: 10px; right: 14px; }
.coll-ico { width: 40px; height: 40px; image-rendering: pixelated; }
.empty { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.empty-img { width: 180px; max-width: 60%; image-rendering: pixelated; opacity: .95; }
.chip-ico { width: 16px; height: 16px; vertical-align: -3px; margin-right: 4px; image-rendering: pixelated; }

/* Accessoire-Shop mit echten Rahmen-PNGs */
.acc-slot { position: relative; width: 84px; height: 84px; margin: 0 auto 8px; }
.acc-slot .slot-frame { position: absolute; inset: 0; width: 100%; height: 100%; image-rendering: pixelated; }
.acc-slot .cat-wrap { position: absolute; inset: 16%; width: 68%; height: 68%; }
.acc-card .acc-need { min-height: 16px; }

/* Erfolge mit Icon-PNGs */
.ach-ico { width: 40px; height: 40px; image-rendering: pixelated; }
.ach-card { display: flex; flex-direction: column; align-items: center; }
.ach-card.locked .ach-ico { filter: grayscale(1); opacity: .45; }
.ach-reward { color: var(--lilac-dk); font-weight: 700; }

/* Profil – Inline-Bearbeitung (Discord-Stil) */
.prof-card .prof-head { align-items: center; }
.prof-main { flex: 1; min-width: 0; }
.pf-pen { font-size: .8rem; color: var(--ink-soft); opacity: .55; padding: 2px 6px; border-radius: 8px; margin-left: 6px; transition: .14s; }
.pf-pen:hover { opacity: 1; background: var(--lilac-lt); color: var(--lilac-dk); }
.prof-name { display: flex; align-items: center; gap: 2px; }
.prof-meta { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.pf-chip { display: inline-flex; align-items: center; gap: 6px; background: var(--bg-alt); border-radius: 20px; padding: 5px 6px 5px 12px; font-size: .84rem; }
.pf-chip .pf-k { font-weight: 700; color: var(--ink-soft); font-size: .72rem; text-transform: uppercase; letter-spacing: .04em; }
.prof-bio { display: flex; align-items: flex-start; gap: 2px; }
.prof-bio .pf-val { flex: 1; }
.pf-edit { max-width: 100%; margin: 2px 0; }
select.pf-edit, input.pf-edit { width: auto; min-width: 140px; }
textarea.pf-edit { width: 100%; }
.prof-ach-ico { width: 40px; height: 40px; image-rendering: pixelated; }
.pd-ico { width: 34px; height: 34px; image-rendering: pixelated; }

/* Bestenliste / Medaillen */
.medals { display: flex; flex-direction: column; gap: 8px; }
.medal-row { display: flex; align-items: center; gap: 12px; padding: 10px 14px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); }
.medal-row.me { border-color: var(--lilac); background: var(--lilac-lt); }
.medal-row.empty { opacity: .5; }
.medal-rank { font-size: 1.4rem; width: 28px; text-align: center; }
.medal-name { flex: 1; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.medal-cards { font-size: .82rem; color: var(--ink-soft); }

/* Kalender – Termin-Typen & Lern-Pausen */
.ev-dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; }
.ev-klausur { background: var(--rose); } .ev-testat { background: var(--peach); } .ev-uebung { background: var(--sky-dk); }
.ev-dots { position: absolute; bottom: 4px; left: 0; right: 0; display: flex; gap: 3px; justify-content: center; }
.cal-day.blocked { background: repeating-linear-gradient(45deg, #efe6d4, #efe6d4 4px, #e4d7bd 4px, #e4d7bd 8px); color: var(--ink-soft); }
.sw-block { background: repeating-linear-gradient(45deg, #efe6d4, #efe6d4 3px, #d8c8a6 3px, #d8c8a6 6px); }
.ev-block { margin: 8px 0 4px; }
.ev-block-head { font-size: .72rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--ink-soft); margin-bottom: 8px; }
.ev-row { display: flex; align-items: center; gap: 10px; padding: 8px 4px; border-bottom: 1px solid var(--line); }
.ev-name { flex: 1; font-size: .9rem; }
.ev-add { margin-top: 12px; }
.ev-add-row { display: flex; gap: 8px; margin-top: 10px; }
.ev-add-row .input { flex: 1; }
.block-toggle { border-top: 1px solid var(--line); padding-top: 12px; margin-top: 6px; }

/* ── Währung (Coins & Diamanten) ── */
.currency-bar { display: flex; gap: 10px; }
.currency-bar .cur { flex: 1; display: flex; align-items: center; justify-content: center; gap: 7px;
  background: linear-gradient(150deg, #fff7e6, var(--surface)); border: 1px solid #f0e2c4; border-radius: 14px;
  box-shadow: var(--shadow); padding: 8px 10px; font-weight: 800; }
.currency-bar .cur img { width: 24px; height: 24px; image-rendering: pixelated; }
.summary-reward { display: flex; gap: 14px; justify-content: center; margin-bottom: 16px; }
.cur-earn { display: inline-flex; align-items: center; gap: 7px; font-weight: 800; font-size: 1.15rem; color: var(--ink);
  background: #fff7e6; border: 1px solid #f0e2c4; border-radius: 16px; padding: 7px 15px; box-shadow: var(--shadow); }
.cur-earn img { width: 26px; height: 26px; image-rendering: pixelated; }
.pen-ico { width: 15px; height: 15px; vertical-align: -2px; image-rendering: pixelated; }

/* Schwierigere Accessoires größer anzeigen */
.acc-icon { image-rendering: pixelated; }
.acc-tier-2 .acc-icon { width: 56px; height: 56px; }
.acc-tier-3 .acc-icon { width: 66px; height: 66px; }

/* Blatt-Trenner unter Seitentiteln */
.section-divider { display: block; width: 100%; max-width: 360px; height: auto; margin: -6px auto 18px; opacity: .85; image-rendering: pixelated; pointer-events: none; }
/* Profil-Avatar im Blätterkranz */
.prof-avatar-wrap { position: relative; width: 150px; height: 150px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; }
.prof-wreath { position: absolute; inset: 0; width: 100%; height: 100%; image-rendering: pixelated; pointer-events: none; }
.prof-avatar-wrap .prof-avatar { width: 84px; height: 84px; }
/* Pflanze im Sidebar-Fuß */
.foot-plant { display: block; width: 62px; height: auto; margin: 8px auto 0; image-rendering: pixelated; }

@media (max-width: 900px) {
  .app { flex-direction: column; }
  .sidebar { width: 100%; height: auto; position: static; border-right: none; border-bottom: 1px solid var(--line); }
  .side-section { max-height: 240px; }
  .main { padding: 20px 16px 50px; }
  .level-grid { grid-template-columns: 1fr; }
  .flashcard { height: 340px; }
  .opt-label { width: 100%; }
  .tabs { overflow-x: auto; flex-wrap: nowrap; }
  .tab { white-space: nowrap; }
  .landing-title { font-size: 2rem; }
  .cat-emote { width: 160px; }
}

/* ══════════ Landing / Login ══════════ */
.landing { position: fixed; inset: 0; z-index: 200; display: flex; align-items: center; justify-content: center; padding: 24px; overflow: auto; }
.landing-bg { position: absolute; inset: 0; background: url("assets/bg_landing.jpg") center/cover no-repeat; image-rendering: pixelated; }
.landing-bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(30,20,10,.28), rgba(30,20,10,.5)); }
.landing-inner { position: relative; z-index: 1; text-align: center; width: 100%; max-width: 420px; }
.landing-title { font-family: var(--pix); font-size: 2.9rem; color: #fff; text-shadow: 0 4px 0 #3a2a18, 0 8px 22px rgba(0,0,0,.5); letter-spacing: 1px; }
.landing-tagline { font-size: 1.15rem; font-weight: 700; color: #fff; margin: 14px 0 24px; text-shadow: 0 2px 10px rgba(0,0,0,.6); }
.auth-card { background: rgba(255,253,248,.97); border: 1px solid var(--line-strong); border-radius: var(--radius); box-shadow: var(--shadow-lg); padding: 22px; text-align: left; }
.auth-tabs { display: flex; gap: 6px; background: var(--bg-alt); padding: 5px; border-radius: 14px; margin-bottom: 18px; }
.auth-tab { flex: 1; padding: 9px; border-radius: 10px; font-weight: 700; font-size: .9rem; color: var(--ink-soft); transition: .15s; }
.auth-tab.active { background: var(--surface); color: var(--lilac-dk); box-shadow: var(--shadow); }
.auth-form { display: flex; flex-direction: column; gap: 4px; }
.auth-form .field-lbl { margin-top: 10px; }
.auth-form .btn-primary { margin-top: 16px; }
.auth-status { font-size: .86rem; font-weight: 600; min-height: 18px; margin-top: 12px; text-align: center; }
.auth-status.err { color: var(--rose-dk); }
.auth-status.ok { color: var(--mint-dk); }
.auth-note { font-size: .74rem; color: var(--ink-soft); text-align: center; margin-top: 10px; }
.magic-sent { margin-top: 14px; padding: 12px; border-radius: 12px; background: var(--lilac-lt); border: 1px solid var(--mint); text-align: center; font-size: .88rem; font-weight: 600; color: var(--lilac-dk); }
.magic-sent a { color: var(--lilac-dk); }

/* Belohnungen: Truhe nach oben, damit sie den XP-Balken nicht überdeckt */
.panel-decor.chest { width: 84px; top: 14px; right: 16px; bottom: auto; }
.buddy-panel { padding-right: 110px; }

/* ══════════ Shop & Zimmer ══════════ */
.shop-wallet { display: flex; gap: 10px; }
.shop-wallet .cur { display: inline-flex; align-items: center; gap: 7px; background: linear-gradient(150deg, #fff7e6, var(--surface)); border: 1px solid #f0e2c4; border-radius: 14px; box-shadow: var(--shadow); padding: 8px 14px; font-weight: 800; }
.shop-wallet .cur img { width: 24px; height: 24px; image-rendering: pixelated; }
.shop-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 14px; }
.shop-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-sm); box-shadow: var(--shadow); padding: 14px; text-align: center; transition: .15s; }
.shop-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-lg); }
.shop-card.owned { background: var(--lilac-lt); border-color: var(--mint-dk); }
.shop-thumb { height: 92px; display: flex; align-items: center; justify-content: center; margin-bottom: 8px; }
.shop-thumb img { max-width: 100%; max-height: 92px; image-rendering: pixelated; }
.shop-name { font-weight: 700; font-size: .9rem; }
.shop-price { font-size: .82rem; color: var(--ink-soft); margin: 4px 0 10px; font-weight: 700; }
.buy-btn { width: 100%; }
.buy-btn:disabled { opacity: 1; background: var(--mint-dk); }

.room-stage { position: relative; width: 100%; height: 340px; border-radius: var(--radius-sm); overflow: hidden;
  background: var(--wall, #efe4cb); border: 1px solid var(--line-strong); touch-action: none; }
.room-floor { position: absolute; left: 0; right: 0; bottom: 0; height: 42%; background: var(--floor, #cdb488); box-shadow: inset 0 3px 6px rgba(0,0,0,.08); }
.theme-swatch { display: block; width: 60px; height: 60px; border-radius: 10px; border: 1px solid var(--line-strong); }
.shop-thumb svg { image-rendering: pixelated; }
/* Erfolgs-Fortschrittsbalken */
.ach-bar { height: 7px; background: var(--bg-alt); border-radius: 6px; overflow: hidden; margin: 8px 4px 0; }
.ach-bar i { display: block; height: 100%; background: var(--lilac); border-radius: 6px; }
.ach-prog { font-size: .7rem; color: var(--ink-soft); margin-top: 4px; }
.room-cat { position: absolute; left: 50%; bottom: 8%; transform: translateX(-50%); width: 78px; height: 78px; z-index: 5; pointer-events: none; }
.room-cat svg, .room-cat img { width: 100%; height: 100%; display: block; image-rendering: pixelated; }
.room-item { position: absolute; width: 92px; height: auto; image-rendering: pixelated; cursor: grab; user-select: none; transform: translate(-50%, -50%); transition: filter .12s; z-index: 3; }
.room-item:hover { filter: drop-shadow(0 4px 6px rgba(0,0,0,.25)); }
.room-item.dragging { cursor: grabbing; filter: drop-shadow(0 8px 12px rgba(0,0,0,.35)); z-index: 9; }
.room-stage.readonly .room-item { cursor: default; pointer-events: none; }
.room-empty { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; text-align: center; color: var(--ink-soft); font-size: .9rem; padding: 20px; }

/* ══════════ Lern-Modi (Schreiben / Quiz) ══════════ */
.flashcard.locked { cursor: default; }
.write-box { display: flex; gap: 10px; width: 100%; max-width: 640px; }
.write-box .input { flex: 1; }
.quiz-box { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 10px; width: 100%; max-width: 640px; }
.quiz-opt { display: flex; align-items: center; gap: 10px; text-align: left; background: var(--surface); border: 1.5px solid var(--line); border-radius: var(--radius-sm); padding: 12px 14px; font-size: .94rem; font-weight: 600; box-shadow: var(--shadow); transition: .14s; }
.quiz-opt:hover:not(:disabled) { border-color: var(--lilac); background: var(--lilac-lt); transform: translateY(-1px); }
.quiz-opt .qkey { width: 22px; height: 22px; flex-shrink: 0; border-radius: 7px; background: var(--bg-alt); display: flex; align-items: center; justify-content: center; font-size: .72rem; font-weight: 700; }
.quiz-opt.correct { border-color: var(--mint-dk); background: #eff9f2; }
.quiz-opt.correct .qkey { background: var(--mint-dk); color: #fff; }
.quiz-opt.wrong { border-color: var(--rose-dk); background: #ffe6ec; }
.quiz-opt:disabled { cursor: default; }
.answer-fb { width: 100%; max-width: 640px; text-align: center; font-weight: 700; padding: 11px; border-radius: var(--radius-sm); }
.answer-fb.ok { background: #eff9f2; color: var(--mint-dk); }
.answer-fb.no { background: #ffe6ec; color: var(--rose-dk); }

/* ═══════════ Design-Umschalter ═══════════ */
.design-toggle { position: fixed; top: 14px; right: 16px; z-index: 120; display:flex; align-items:center; gap:6px;
  background: var(--surface); border:1px solid var(--line-strong); border-radius: 20px; padding:8px 14px;
  font-weight:700; font-size:.82rem; color: var(--ink-soft); box-shadow: var(--shadow); cursor:pointer; }
.design-toggle:hover { background: var(--lilac-lt); color: var(--lilac-dk); }

/* ═══════════ VERSION 2 (Redesign) ═══════════ */
body.design-v2 {
  --bg:#fbf7ed; --surface:#fffdf8; --ink:#4a3525; --ink-soft:#795c3e; --line:#e5d6b7; --line-strong:#ccb98f;
  --lilac:#739642; --lilac-dk:#526f2f; --lilac-lt:#edf3dd; --mint:#dce9bd; --mint-dk:#526f2f;
  --rose:#d87870; --rose-dk:#c0645c; --butter:#dfb551; --peach:#df954b;
  --shadow:0 8px 28px rgba(89,66,41,.07); --shadow-lg:0 12px 34px rgba(89,66,41,.11);
  background-image:
    radial-gradient(circle at 88% 85%, rgba(192,216,159,.22), transparent 34%),
    linear-gradient(135deg,#fffaf1 0%,#fbf7ed 60%,#f5f7e9 100%);
}
body.design-v2 .card-panel { background-image:none; }
body.design-v2 .tab.active { background: var(--lilac-lt); border-radius:12px 12px 0 0; }
body.design-v2 .buddy-box, body.design-v2 .streak-box, body.design-v2 .currency-bar .cur { border-radius:18px; }

.v2-head { margin-bottom:18px; }
.v2-title { font-size:30px; font-weight:800; color:var(--ink); }
.v2-sub { font-size:14px; color:var(--ink-soft); margin-top:4px; }
.v2-grid { display:grid; grid-template-columns:minmax(0,1.65fr) minmax(320px,.85fr); gap:20px; align-items:start; }
.v2-main, .v2-side { display:flex; flex-direction:column; gap:20px; min-width:0; }
.v2-card { position:relative; background:var(--surface); border:1px solid var(--line); border-radius:22px; padding:22px 24px; box-shadow:var(--shadow); }
.v2-cardtitle { font-size:13px; font-weight:800; letter-spacing:.04em; text-transform:uppercase; color:var(--ink-soft); margin-bottom:14px; }
.v2-cardtop { display:flex; justify-content:space-between; align-items:center; margin-bottom:6px; }
.v2-cardtop .v2-cardtitle { margin:0; }
.v2-pct { font-size:26px; font-weight:800; color:var(--lilac-dk); }
.v2-click { text-align:left; width:100%; cursor:pointer; transition:.16s; display:block; }
.v2-click:hover { transform:translateY(-2px); box-shadow:var(--shadow-lg); }

.v2-exam-inner { display:grid; grid-template-columns:1fr 220px; align-items:center; gap:12px; }
.v2-exam-illu { width:100%; max-width:240px; justify-self:end; image-rendering:auto; }
.v2-empty-title { font-weight:800; font-size:1.05rem; color:var(--ink); margin-bottom:6px; }
.v2-empty-text { font-size:.9rem; color:var(--ink-soft); line-height:1.5; margin-bottom:14px; }
.v2-greenbtn { background:var(--lilac); color:#fff; border-radius:12px; padding:12px 20px; font-weight:700; font-size:.9rem; box-shadow:0 5px 14px rgba(83,113,48,.2); transition:.15s; cursor:pointer; }
.v2-greenbtn:hover { background:var(--lilac-dk); transform:translateY(-1px); }

.v2-bar { height:16px; background:var(--lilac-lt); border-radius:20px; overflow:hidden; margin:6px 0 10px; }
.v2-bar-fill { height:100%; width:0; background:linear-gradient(90deg,var(--lilac),#a9c97e); border-radius:20px; transition:width .6s cubic-bezier(.4,0,.2,1); }
.v2-barnote { font-size:.85rem; color:var(--ink-soft); }
.v2-progstats { display:grid; grid-template-columns:repeat(4,1fr); gap:12px; margin-top:16px; max-width:calc(100% - 110px); }
.v2-stat b { display:block; font-size:1.5rem; font-weight:800; color:var(--ink); }
.v2-stat span { font-size:.74rem; color:var(--ink-soft); }
.v2-sleepcat { position:absolute; right:26px; bottom:18px; width:92px; image-rendering:pixelated; pointer-events:none; }

.v2-status { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
.v2-scard { border:1px solid var(--line); border-radius:18px; padding:16px 18px; box-shadow:var(--shadow); background:var(--surface); }
.v2-sdot { width:12px; height:12px; border-radius:50%; display:inline-block; }
.v2-snum { font-size:1.7rem; font-weight:800; margin:8px 0 2px; }
.v2-sname { font-weight:700; font-size:.92rem; }
.v2-sdesc { font-size:.76rem; color:var(--ink-soft); margin-top:2px; }
.v2-sbar { height:6px; border-radius:6px; background:var(--lilac-lt); margin-top:10px; overflow:hidden; }
.v2-sbar i { display:block; height:100%; border-radius:6px; }
.v2-scard.red { background:#fff9f7; border-color:rgba(216,120,112,.35); }
.v2-scard.yellow { background:#fffdf3; border-color:rgba(223,181,81,.35); }
.v2-scard.green { background:#f7fbef; border-color:rgba(115,150,66,.35); }

.v2-start-grid { display:grid; grid-template-columns:1fr 200px; gap:20px; align-items:center; }
.v2-optrow { display:flex; align-items:center; gap:12px; margin-bottom:12px; flex-wrap:wrap; }
.v2-optlabel { width:74px; font-size:.72rem; font-weight:700; text-transform:uppercase; letter-spacing:.05em; color:var(--ink-soft); }
.v2-seg { display:inline-flex; gap:6px; flex-wrap:wrap; }
.v2-segbtn { background:var(--surface); border:1px solid var(--line); color:var(--ink-soft); border-radius:10px; padding:8px 13px; font-size:.82rem; font-weight:600; transition:.14s; cursor:pointer; }
.v2-segbtn:hover { border-color:var(--lilac); }
.v2-segbtn.active { background:var(--lilac); color:#fff; border-color:var(--lilac); box-shadow:0 5px 14px rgba(83,113,48,.2); }
.v2-start-cta { text-align:center; }
.v2-startcat { width:96px; image-rendering:pixelated; display:block; margin:0 auto 10px; }
.v2-startbtn { width:100%; background:var(--lilac); color:#fff; border-radius:14px; padding:14px; font-weight:800; font-size:1rem; box-shadow:0 6px 16px rgba(83,113,48,.25); transition:.15s; cursor:pointer; }
.v2-startbtn:hover { background:var(--lilac-dk); transform:translateY(-1px); }
.v2-scopenote { font-size:.76rem; color:var(--ink-soft); margin-top:8px; }

.v2-daily-inner { display:flex; align-items:center; gap:16px; }
.v2-ring { width:96px; height:96px; flex-shrink:0; }
.v2-daily-frac { font-size:1.6rem; font-weight:800; color:var(--ink); }
.v2-daily-lbl { font-size:.8rem; color:var(--ink-soft); }
.v2-speech { display:flex; align-items:center; gap:10px; margin-top:14px; background:var(--lilac-lt); border-radius:14px; padding:10px 12px; }
.v2-speechcat { width:44px; image-rendering:pixelated; flex-shrink:0; }
.v2-speech span { font-size:.82rem; color:var(--lilac-dk); font-weight:600; line-height:1.4; }

.v2-streak-num { font-size:.9rem; color:var(--ink-soft); margin-bottom:18px; }
.v2-streak-num b { font-size:1.4rem; color:var(--ink); }
.v2-milestones { display:flex; align-items:flex-start; justify-content:space-between; position:relative; }
.v2-milestones:before { content:''; position:absolute; left:14px; right:14px; top:9px; height:2px; background:var(--line); z-index:0; }
.v2-ms { display:flex; flex-direction:column; align-items:center; gap:6px; position:relative; z-index:1; }
.v2-msdot { width:20px; height:20px; border-radius:50%; background:var(--surface); border:2px solid var(--line-strong); }
.v2-ms.done .v2-msdot { background:var(--lilac); border-color:var(--lilac-dk); }
.v2-mslbl { font-size:.68rem; color:var(--ink-soft); font-weight:600; }

.v2-cardline { display:flex; align-items:center; gap:12px; }
.v2-cardline > img { width:30px; height:30px; }
.v2-cardbig { font-weight:800; font-size:1rem; color:var(--ink); }
.v2-cardsmall { font-size:.8rem; color:var(--ink-soft); margin-top:2px; }
.v2-arrow { margin-left:auto; color:var(--lilac-dk); font-size:1.2rem; transition:transform .15s; }
.v2-click:hover .v2-arrow { transform:translateX(3px); }

.v2-motiv { display:flex; align-items:center; gap:18px; margin-top:20px; background:var(--lilac-lt); border:1px solid var(--mint); border-radius:20px; padding:14px 22px; }
.v2-motiv-plant { width:56px; image-rendering:pixelated; }
.v2-motiv-shelf { width:80px; image-rendering:pixelated; margin-left:auto; }
.v2-motiv-txt b { display:block; font-size:1.02rem; color:var(--lilac-dk); }
.v2-motiv-txt span { font-size:.86rem; color:var(--ink-soft); }

@media (max-width:1100px){
  .v2-grid { grid-template-columns:1fr; }
  .v2-status { grid-template-columns:1fr; }
  .v2-exam-inner, .v2-start-grid { grid-template-columns:1fr; }
  .v2-exam-illu { justify-self:center; max-width:200px; }
  .v2-progstats { max-width:100%; grid-template-columns:repeat(2,1fr); }
}

/* ── v2 Feinschliff: volle Breite · „Lernen starten" oben · größere Katzen ── */
body.design-v2 .main { max-width: none; padding-left: 34px; padding-right: 34px; }
.v2-start { order: -1; }                 /* Lernen starten zuerst (oben, direkt anklickbar) */
.v2-start .v2-startbtn { font-size: 1.05rem; padding: 16px; }

/* größere Katzen-Widgets */
.v2-sleepcat { width: 140px; }
.v2-progstats { max-width: calc(100% - 160px); }
.v2-startcat { width: 150px; }
.v2-speechcat { width: 60px; }
.v2-duetoday .v2-cardline > img { width: 46px; height: 46px; }

/* ── v2: Klausurplan kompakter (nicht so hoch) ── */
.v2-exam { padding: 16px 22px; }
.v2-exam .v2-cardtitle { margin-bottom: 8px; }
.v2-exam .v2-exam-inner { grid-template-columns: 1fr 120px; gap: 10px; }
.v2-exam .v2-exam-illu { max-width: 118px; }
.v2-exam .v2-empty-title { font-size: 1rem; margin-bottom: 3px; }
.v2-exam .v2-empty-text { font-size: .84rem; line-height: 1.45; margin-bottom: 10px; }
.v2-exam .v2-greenbtn { padding: 9px 16px; font-size: .85rem; }
@media (max-width:1100px){ .v2-exam .v2-exam-illu { max-width: 96px; } }

/* ── v2: großes Studien-Kätzchen rechts vom Tagesziel ── */
.v2-daily-row { display:flex; align-items:center; gap:14px; }
.v2-daily-left { flex:1; min-width:0; }
.v2-daily-cat { width:132px; flex-shrink:0; align-self:center; image-rendering:pixelated; }

/* ── v2: Illustrationen in Lernen starten / Klausurplan / Fortschritt größer ── */
.v2-startcat { width:192px; }
.v2-sleepcat { width:178px; }
.v2-progstats { max-width:calc(100% - 200px); }
.v2-exam .v2-exam-inner { grid-template-columns:1fr 148px; }
.v2-exam .v2-exam-illu { max-width:148px; }

@media (max-width:1100px){
  .v2-startcat { width:150px; }
  .v2-sleepcat { width:132px; }
  .v2-progstats { max-width:100%; }
  .v2-exam .v2-exam-illu { max-width:120px; }
  .v2-daily-cat { width:120px; }
}

/* ── v2: alle Deko-Widgets ca. doppelt so groß ── */
.v2-start-grid { grid-template-columns: 1fr 320px; }
.v2-startcat { width: 300px; }
.v2-sleepcat { width: 290px; }
.v2-progstats { max-width: calc(100% - 320px); }
.v2-exam .v2-exam-inner { grid-template-columns: 1fr 240px; }
.v2-exam .v2-exam-illu { max-width: 240px; }
.v2-daily-cat { width: 220px; }
.v2-speechcat { width: 96px; }
.v2-ring { width: 150px; height: 150px; }
.v2-daily-frac { font-size: 2rem; }
.v2-msdot { width: 30px; height: 30px; }
.v2-milestones:before { top: 14px; }
.v2-nextexam .v2-cardline > img { width: 54px; height: 54px; }
.v2-duetoday .v2-cardline > img { width: 74px; height: 74px; }

@media (max-width:1100px){
  .v2-start-grid { grid-template-columns: 1fr; }
  .v2-startcat { width: 210px; }
  .v2-sleepcat { width: 180px; }
  .v2-progstats { max-width: 100%; }
  .v2-exam .v2-exam-illu { max-width: 170px; }
  .v2-daily-cat { width: 170px; }
}

/* ── v2: Lernen starten & Klausurplan wieder auf vorherige (kleinere) Größe ── */
.v2-start-grid { grid-template-columns: 1fr 210px; }
.v2-startcat { width: 190px; }
.v2-exam .v2-exam-inner { grid-template-columns: 1fr 150px; }
.v2-exam .v2-exam-illu { max-width: 148px; }
@media (max-width:1100px){
  .v2-start-grid { grid-template-columns: 1fr; }
  .v2-startcat { width: 150px; }
  .v2-exam .v2-exam-illu { max-width: 120px; }
}

/* ── v2: Klausurplan & Lernen starten – große Illustration, aber KOMPAKTE Box ──
   (Illustration als Ecken-Deko wie die schlafende Katze → bläht die Box nicht auf) */
.v2-exam { position: relative; overflow: hidden; padding: 16px 20px; }
.v2-exam .v2-exam-inner { display: block; }
.v2-exam .v2-exam-body { max-width: calc(100% - 185px); }
.v2-exam .v2-exam-illu { position: absolute; right: 12px; bottom: 2px; width: 180px; max-width: 180px; margin: 0; }

.v2-start { position: relative; overflow: hidden; padding: 18px 22px; }
.v2-start-grid { grid-template-columns: 1fr 200px; align-items: start; }
.v2-startcat { position: absolute; right: 14px; bottom: 2px; width: 214px; margin: 0; z-index: 0; pointer-events: none; }
.v2-start-cta { position: relative; z-index: 1; text-align: center; }

@media (max-width:1100px){
  .v2-start-grid { grid-template-columns: 1fr; }
  .v2-startcat { position: static; width: 180px; margin: 10px auto 0; display: block; }
  .v2-exam .v2-exam-illu { position: static; width: 150px; margin: 10px auto 0; display: block; }
  .v2-exam .v2-exam-body { max-width: 100%; }
}

/* v2: schlafende Katze weiter nach unten rechts */
.v2-sleepcat { right: 2px; bottom: -8px; }
.v2-sleepcat { right: -14px; bottom: -16px; }

/* ── v2 Korrektur ── */
/* Lernen-starten-Katze zurück an Originalplatz (im Flow, über dem Button) */
.v2-startcat { position: static; width: 190px; margin: 0 auto 10px; z-index: auto; pointer-events: auto; }
.v2-start-grid { align-items: center; }
/* schlafende Katze weiter nach unten & etwas nach links */
.v2-sleepcat { right: 26px; bottom: -24px; }

/* ═══════════ Coming Soon ═══════════ */
.soon-hero { display:grid; grid-template-columns: 1fr 340px; gap:24px; align-items:center;
  background: var(--surface); border:1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow); padding:26px 30px; margin-bottom:22px; }
.soon-title { font-size:1.9rem; font-weight:800; color:var(--ink); }
.soon-lead { font-size:1rem; color:var(--ink-soft); margin-top:8px; font-weight:600; }
.soon-desc { font-size:.92rem; color:var(--ink-soft); margin-top:10px; line-height:1.55; max-width:52ch; }
.soon-hero-widget { position:relative; text-align:center; background: var(--lilac-lt);
  border:2px dashed var(--line-strong); border-radius: var(--radius-sm); padding:20px 18px; }
.soon-hero-cat { width:120px; image-rendering:pixelated; }
.soon-pill { display:inline-block; margin-top:6px; background: var(--lilac); color:#fff; font-weight:800;
  letter-spacing:.06em; font-size:.9rem; padding:9px 22px; border-radius:20px; box-shadow:0 5px 14px rgba(83,113,48,.25); }
.soon-pill-sub { font-size:.8rem; color:var(--lilac-dk); font-weight:600; margin-top:8px; }
.soon-spark { position:absolute; font-size:1rem; opacity:.9; }
.soon-spark.s1 { top:10px; left:14px; } .soon-spark.s2 { top:14px; right:16px; } .soon-spark.s3 { bottom:12px; right:22px; }

.soon-section-title { font-size:1.05rem; font-weight:800; color:var(--ink); margin:6px 2px 14px; }
.soon-grid { display:flex; flex-wrap:wrap; gap:16px; justify-content:center; max-width:1080px; margin:0 auto 22px; }
.soon-card { flex:0 1 320px; display:flex; flex-direction:column; background:var(--surface);
  border:1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); padding:16px 18px; transition:.16s; }
.soon-card:hover { transform:translateY(-3px); box-shadow: var(--shadow-lg); }
.soon-card-head { display:flex; align-items:center; justify-content:space-between; margin-bottom:10px; }
.soon-card-ico { font-size:1.5rem; }
.soon-badge { font-size:.68rem; font-weight:800; letter-spacing:.04em; text-transform:uppercase;
  color:var(--lilac-dk); background:var(--lilac-lt); border:1px solid var(--mint); padding:4px 10px; border-radius:20px; }
.soon-thumb { background: var(--lilac-lt); border:1px solid var(--line); border-radius: var(--radius-sm);
  height:130px; display:flex; align-items:center; justify-content:center; overflow:hidden; }
.soon-thumb img { width:110px; image-rendering:pixelated; }
.soon-card-title { font-size:1.05rem; font-weight:800; color:var(--ink); margin:12px 0 4px; }
.soon-card-desc { font-size:.85rem; color:var(--ink-soft); line-height:1.5; flex:1; }
.soon-notify { margin-top:14px; width:100%; font-weight:700; font-size:.86rem; padding:10px 14px; border-radius:14px;
  border:1.5px solid var(--line-strong); color:var(--ink-soft); background:var(--surface); transition:.15s; cursor:pointer; }
.soon-notify:hover { border-color:var(--lilac); background:var(--lilac-lt); color:var(--lilac-dk); }
.soon-notify.on { background:var(--lilac); border-color:var(--lilac); color:#fff; box-shadow:0 5px 14px rgba(83,113,48,.22); }

.soon-feedback { display:flex; align-items:center; gap:18px; background: var(--surface); border:1px solid var(--line);
  border-radius: var(--radius); box-shadow: var(--shadow); padding:18px 24px; margin-bottom:16px; }
.soon-fb-plant { width:56px; image-rendering:pixelated; flex-shrink:0; }
.soon-fb-text { flex:1; }
.soon-fb-text h3 { font-size:1.05rem; }
.soon-footer { display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap;
  background: var(--lilac-lt); border:1px solid var(--mint); border-radius: var(--radius); padding:16px 24px; }
.soon-footer-text b { color:var(--lilac-dk); } .soon-footer-text span { color:var(--ink-soft); font-size:.9rem; }
.soon-social { display:flex; gap:10px; font-size:1.3rem; }

@media (max-width:900px){
  .soon-hero { grid-template-columns:1fr; }
  .soon-feedback { flex-direction:column; text-align:center; }
}

/* ── Coming Soon: echte Mockup-Bilder ── */
.soon-hero-widget { background:none; border:none; padding:0; }
.soon-hero-img { width:100%; max-width:360px; border-radius:18px; display:block; margin:0 auto; box-shadow:var(--shadow); image-rendering:auto; }
.soon-grid { max-width:1120px; }
.soon-card { flex:0 1 340px; padding:0; overflow:hidden; }
.soon-cover { line-height:0; }
.soon-cover img { width:100%; display:block; image-rendering:auto; }
.soon-card-body { padding:16px 18px; display:flex; flex-direction:column; flex:1; }
.soon-card-body .soon-card-desc { flex:1; }

/* Coming-Soon-Schild groß, halbe Hero-Box, ohne eigenen Rahmen */
.soon-hero { grid-template-columns: 1fr 1fr; align-items: center; }
/* Coming-Soon-Schild groß, halbe Hero-Box, ohne eigenen Rahmen */
.soon-hero { grid-template-columns: 1fr 1fr; align-items: center; }
.soon-hero-img { width: 100%; max-width: none; border-radius: 0; box-shadow: none; }

/* Coming-Soon-Hero: kompakte Box, Widget groß aber gedeckelt (kein Aufblähen auf breiten Screens) */
.soon-hero { padding: 16px 30px; align-items: center; }
.soon-hero-img { width: 100%; max-width: 440px; margin: 0 auto; border-radius: 0; box-shadow: none; }