/* ══ Redesign "Design perfekt" – Ebenen & Material ═══════════════════════════
   Wird nur in app.html geladen (nach shell.css, vor helper.css). Alle Farben
   kommen aus base.css (Variablen), hier stehen keine festen Farbwerte.
   Tiefe ueber Flaechentoene statt Glow (Feedback Leandro 11.10.2026):
   Sidebar dunkler/waermer als die Seite, Karten Off-White mit feinem Rand und
   zweischichtigem Schatten, Eingabefelder eingelassen. Kein blauer Schatten. */

/* Ebene 0: Seite */
.app-main, .app-shell { background: var(--tone-page); }
/* Peach Beige (Leandro 12.10.): Hintergrund nicht ganz gleichmaessig – sehr dezente
   Verlaeufe (Off-White, warmes Beige) und zwei grosse, kaum sichtbare Bogenformen. */
.app-main {
  background-color: var(--tone-page);
  background-image:
    radial-gradient(1100px 620px at 88% -8%, rgba(255,255,255,.62), transparent 62%),
    radial-gradient(900px 640px at -6% 46%, rgba(229,213,197,.30), transparent 64%),
    radial-gradient(circle at 104% 108%, transparent 0 29%, rgba(222,210,197,.30) 29.2% 29.5%, transparent 29.7%),
    radial-gradient(circle at -14% 2%, transparent 0 21%, rgba(222,210,197,.22) 21.2% 21.45%, transparent 21.65%);
  background-attachment: fixed;
}
@media (max-width: 760px) { .app-main { background-attachment: scroll; } }
/* Sidebar: Hover dezent, aktiv klar davon unterscheidbar */
.sidebar .nav-item:not(.active):hover { background: var(--tone-hover); }

/* Ebene 1: Sidebar/Panel – eigener, dunklerer Ton mit Kante zur Seite */
.sidebar { background: var(--tone-side); border-right: 1px solid var(--line-side); }
@media (min-width: 761px) {
  .sidebar .sidebar-user { background: var(--tone-inset); box-shadow: var(--shadow-inset); }
  .sidebar.collapsed .sidebar-user { box-shadow: none; }
}

/* Ebene 2: Karten – Off-White, feiner Rand, enge Kontakt- plus weiche Schattierung */
.app-shell .card, .app-shell .dash-quick-card:not(.dash-quick-card-featured), .app-shell .todo-banner,
.app-shell .mc-frame { background: var(--tone-card); box-shadow: var(--shadow-card); }
.app-shell .card .card, .app-shell .mc-shell-sheet .card { box-shadow: 0 0 0 1px var(--line-soft); }
.app-shell .dash-quick-card:not(.dash-quick-card-featured):hover,
.app-shell .tile:hover, .app-shell .stat-card:hover { box-shadow: var(--shadow-card-hi); }
/* Blaue Hauptkarte auf Home: Schatten statt blauem Glow */
.app-shell .dash-quick-card-featured { box-shadow: var(--shadow-card-hi); }

/* Eingelassene Flaechen: Eingabefelder (Fokus behaelt den blauen Rahmen aus base.css) */
.app-shell input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]),
.app-shell textarea, .app-shell select {
  background: var(--tone-inset); border-color: var(--line-soft); box-shadow: var(--shadow-inset);
}
.app-shell input:not([type="checkbox"]):not([type="radio"]):focus,
.app-shell textarea:focus, .app-shell select:focus { background: var(--tone-card); box-shadow: 0 0 0 2px var(--gold); }

/* Keine blauen Glows mehr: aktiver Coach-Schritt und Antwort-Blasen mit warmem Schatten */
.app-shell .coaching-step.step-active { box-shadow: 0 0 0 2px var(--btn), var(--shadow-card-hi); }
.app-shell .step-student-a { box-shadow: var(--shadow-card); }

.surface-2 { box-shadow: var(--shadow-2) !important; }
/* Hover-Anhebung ohne box-shadow-Animation: staerkerer Schatten liegt auf ::after */
.lift { position: relative; }
.lift::after { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: var(--shadow-2); opacity: 0; pointer-events: none; }
@media (prefers-reduced-motion: no-preference) {
  .lift { transition: transform var(--dur-base) var(--ease-out); }
  .lift::after { transition: opacity var(--dur-base) var(--ease-out); }
  .lift:hover { transform: translateY(-2px); }
}
.lift:hover::after { opacity: 1; }
/* Fokus ueberall gleich sichtbar – als outline, damit Schatten der Knoepfe, Karten
   und der aktive Sidebar-Balken im Fokus erhalten bleiben (N6). Knoepfe behalten
   ihre eigene Fokus-Regel aus base.css. */
.app-shell :focus-visible:not(.btn) { outline: 3px solid var(--focus-outline); outline-offset: 2px; }
/* Seitenwechsel mit Bewegungs-Tokens (Empfehlung #22) */
@media (prefers-reduced-motion: no-preference) { .page.active { animation-duration: var(--dur-slow); } }
@media (prefers-reduced-motion: reduce) { .page.active { animation: none; } }
/* Sidebar-Flyout und Profilmenue: schwebende Karte ueber der Seite */
@media (min-width: 761px) {
  .sidebar.collapsed .nav-group.is-flyout,
  .sidebar.collapsed .user-menu { background: var(--tone-card); border: none; box-shadow: var(--shadow-pop); }
}