/* Smartineer — Custom Styles (React-UI, PWA) */

:root {
    --c-bg: #f8fafc;
    --c-text: #0f172a;
    --c-accent: #2563eb;
}

html, body {
    background: linear-gradient(180deg, #f8fafc 0%, #eef2ff 100%);
    color: var(--c-text);
    font-family: 'Inter', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Verankerung: Seite darf horizontal nicht über den Viewport hinaus gezogen werden. */
html, body {
    width: 100%;
    max-width: 100vw;
    overflow-x: hidden;
    overscroll-behavior-x: none;
}
/* P-UI-RESTRUCTURE (v85): Zusatz-Verankerung fuer alle App-Shell-Container.
 * `overflow-x: clip` schneidet Overflow ab, ohne `position: sticky` zu brechen
 * (anders als `overflow-x: hidden`, das Sticky-Header im Nav deaktivieren wuerde). */
#react-root,
#react-root > * ,
main,
footer {
    max-width: 100vw;
    overflow-x: clip;
}
/* Flex-Children duerfen nicht ueber den Container hinausragen: min-width:0 erlaubt Shrink. */
.nav-glass > div { min-width: 0; }
body {
    position: relative;
}

/* iOS PWA: Notch / Safe-Area */
body {
    padding-top: env(safe-area-inset-top, 0);
    padding-bottom: env(safe-area-inset-bottom, 0);
    padding-left: env(safe-area-inset-left, 0);
    padding-right: env(safe-area-inset-right, 0);
}

/* ---------- Hilfsklassen ---------- */
.hide { display: none !important; }
.math-block { overflow-x: auto; padding: 0.5rem 0; line-height: 1.7; }
.math-block .katex-display { margin: 0.6em 0; max-width: 100%; }

/* KaTeX-Block-Formeln dürfen den Container nicht sprengen */
.katex-display {
    overflow-x: auto;
    overflow-y: hidden;
    max-width: 100%;
}
.katex-display > .katex { white-space: nowrap; }

/* Lange Code-/Pre-Blöcke (z.B. PLC) niemals über den Container hinaus */
pre, code {
    max-width: 100%;
    overflow-x: auto;
    word-break: normal;
}
pre {
    white-space: pre;
}

/* Tabellen in Aufgabentexten dürfen scrollen, nicht überlaufen */
.task-question table,
.task-hint table,
.task-solution table,
.cheatsheet-formulas table,
.cheatsheet-solutions table {
    display: block;
    max-width: 100%;
    overflow-x: auto;
}

/* Bilder/SVGs respektieren Container */
img, svg { max-width: 100%; height: auto; }

/* ---------- IMPP-Quiz-Optionen (Schulung Allgemeinmedizin, Trainings-Mirror) ---------- */
.impp-options {
    list-style: none;
    padding-left: 0;
    margin-top: 0.5em;
}
.impp-options li {
    margin: 0.25em 0;
}

/* ---------- Chart-Container ---------- */
.chart-container {
    position: relative;
    width: 100%;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
    height: 400px;
    max-height: 400px;
}
@media (max-width: 768px) {
    .chart-container { height: 300px; max-height: 300px; }
}

/* ---------- Task-Pills ---------- */
.task-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 9999px;
    background: #e2e8f0;
    color: #334155;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    border: 2px solid transparent;
    transition: transform 0.15s ease, background-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
}
.task-pill:hover { background: #cbd5e1; transform: translateY(-1px); }
.task-pill.active {
    background: linear-gradient(135deg, #2563eb, #06b6d4);
    color: white;
    border-color: #1d4ed8;
    box-shadow: 0 4px 12px -2px rgba(37, 99, 235, 0.45);
    transform: scale(1.05);
}
.task-pill.solved {
    background: #d1fae5;
    color: #065f46;
}
.task-pill.solved.active {
    background: linear-gradient(135deg, #10b981, #14b8a6);
    color: white;
    border-color: #059669;
}

/* ---------- Animationen ---------- */
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes viewFade { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
@keyframes cardFade { from { opacity: 0; transform: translateY(12px) scale(0.97); } to { opacity: 1; transform: translateY(0) scale(1); } }
@keyframes slideIn { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: translateY(0); } }
@keyframes slideUp { from { opacity: 0; transform: translateY(40px); } to { opacity: 1; transform: translateY(0); } }

.fade-in   { animation: fadeIn 0.25s ease-out both; }
.view-fade { animation: viewFade 0.35s cubic-bezier(0.22, 1, 0.36, 1) both; }
.card-fade { animation: cardFade 0.45s cubic-bezier(0.22, 1, 0.36, 1) both; opacity: 0; }
.slide-in  { animation: slideIn 0.25s ease-out both; }
.slide-up  { animation: slideUp 0.3s cubic-bezier(0.22, 1, 0.36, 1) both; }
.task-fade { animation: viewFade 0.25s ease-out both; }

/* Reduced-motion respektieren */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
    }
}

/* ---------- Cheatsheet details ---------- */
details > summary { list-style: none; cursor: pointer; }
details > summary::-webkit-details-marker { display: none; }

/* ---------- line-clamp Fallback ---------- */
.line-clamp-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* ---------- Scrollbar (dezent) ---------- */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 9999px; }
::-webkit-scrollbar-thumb:hover { background: #94a3b8; }

/* ============================================================
   DARK MODE
   Aktiviert über <html class="theme-dark"> oder <body class="theme-dark">.
   Setzt Tailwind-Utility-Klassen via höherer Selektor-Spezifität (kein !important).
   ============================================================ */
.theme-dark { color-scheme: dark; }
html.theme-dark, body.theme-dark {
    background: linear-gradient(180deg, #0b1220 0%, #111827 100%);
    color: #e2e8f0;
}
.theme-dark .bg-white,
.theme-dark .bg-slate-50,
.theme-dark .bg-slate-100 { background-color: #1e293b; }
.theme-dark .bg-gradient-to-br.from-white,
.theme-dark .bg-gradient-to-br.from-slate-50 {
    background-image: linear-gradient(to bottom right, #1e293b, #1e293b, rgba(30,58,138,0.35));
}
.theme-dark .border-slate-200,
.theme-dark .border-slate-300 { border-color: #334155; }
.theme-dark .text-slate-900,
.theme-dark .text-slate-800,
.theme-dark .text-slate-700 { color: #e2e8f0; }
.theme-dark .text-slate-600,
.theme-dark .text-slate-500 { color: #94a3b8; }
.theme-dark .hover\:bg-slate-50:hover,
.theme-dark .hover\:bg-slate-100:hover { background-color: #273449; }
.theme-dark .text-blue-600,
.theme-dark .text-blue-700 { color: #93c5fd; }
.theme-dark .bg-blue-50 { background-color: rgba(59,130,246,0.15); }
.theme-dark .bg-blue-50\/40 { background-color: rgba(59,130,246,0.1); }
.theme-dark .bg-blue-100 { background-color: rgba(59,130,246,0.25); }
.theme-dark .bg-amber-50 { background-color: rgba(251,191,36,0.12); }
.theme-dark .bg-amber-100 { background-color: rgba(251,191,36,0.22); }
.theme-dark .bg-amber-200,
.theme-dark .hover\:bg-amber-200:hover { background-color: rgba(251,191,36,0.3); }
.theme-dark .border-amber-200 { border-color: rgba(251,191,36,0.45); }
.theme-dark .border-amber-300 { border-color: rgba(251,191,36,0.55); }
.theme-dark .border-amber-400 { border-color: #f59e0b; }
.theme-dark .text-amber-700,
.theme-dark .text-amber-800,
.theme-dark .text-amber-900 { color: #fde68a; }
.theme-dark .bg-emerald-50 { background-color: rgba(16,185,129,0.12); }
.theme-dark .bg-emerald-100 { background-color: rgba(16,185,129,0.22); }
.theme-dark .bg-emerald-200,
.theme-dark .hover\:bg-emerald-200:hover { background-color: rgba(16,185,129,0.3); }
.theme-dark .border-emerald-200,
.theme-dark .border-emerald-300 { border-color: rgba(16,185,129,0.4); }
.theme-dark .text-emerald-600,
.theme-dark .text-emerald-700,
.theme-dark .text-emerald-800,
.theme-dark .text-emerald-900 { color: #6ee7b7; }
.theme-dark .bg-teal-50 { background-color: rgba(20,184,166,0.12); }
.theme-dark .bg-teal-50\/50 { background-color: rgba(20,184,166,0.12); }
.theme-dark .bg-teal-100,
.theme-dark .hover\:bg-teal-100:hover { background-color: rgba(20,184,166,0.22); }
.theme-dark .border-teal-200,
.theme-dark .border-teal-300 { border-color: rgba(20,184,166,0.4); }
.theme-dark .text-teal-700,
.theme-dark .text-teal-800 { color: #5eead4; }
/* Rose-/Rot-Akzente (falsche Antworten, Reset-Button, Fehler-Hinweise):
   Hellrosa Tailwind-Defaults sind im Dark-Mode unlesbar in Kombination mit gemappter
   slate-800-Schrift. Daher analog zu Emerald/Amber halbtransparent dunkel-rosa
   einfaerben + helle Schrift. */
.theme-dark .bg-rose-50 { background-color: rgba(244,63,94,0.12); }
.theme-dark .bg-rose-100 { background-color: rgba(244,63,94,0.22); }
.theme-dark .bg-rose-200,
.theme-dark .hover\:bg-rose-200:hover { background-color: rgba(244,63,94,0.3); }
.theme-dark .hover\:bg-rose-100:hover { background-color: rgba(244,63,94,0.3); }
.theme-dark .border-rose-200 { border-color: rgba(244,63,94,0.45); }
.theme-dark .border-rose-300 { border-color: rgba(244,63,94,0.55); }
.theme-dark .border-rose-400 { border-color: #fb7185; }
.theme-dark .text-rose-600,
.theme-dark .text-rose-700 { color: #fda4af; }
.theme-dark .text-red-700 { color: #fca5a5; }
/* Blau-Akzente (Login-Hinweis, Badges): dunkel-blau-Hintergrund + helle Schrift */
.theme-dark .border-blue-200 { border-color: rgba(59,130,246,0.45); }
.theme-dark .text-blue-800,
.theme-dark .text-blue-900 { color: #bfdbfe; }
.theme-dark .text-blue-950 { color: #dbeafe; }
.theme-dark .hover\:bg-blue-50:hover { background-color: rgba(59,130,246,0.2); }
.theme-dark .text-emerald-950 { color: #d1fae5; }
.theme-dark .hover\:bg-emerald-50:hover { background-color: rgba(16,185,129,0.2); }
.theme-dark .text-rose-800,
.theme-dark .text-rose-900 { color: #fecdd3; }
/* Indigo-/Violet-Akzente (Pruefungsmodus, SRS, PBQ-Tags): helle Tailwind-
   Panels werden im Dark-Mode sonst blendend hell, waehrend globale Slate-
   Textmappings bereits helle Schrift setzen. */
.theme-dark .bg-indigo-50 { background-color: rgba(99,102,241,0.14); }
.theme-dark .bg-indigo-100 { background-color: rgba(99,102,241,0.24); }
.theme-dark .border-indigo-200,
.theme-dark .border-indigo-300 { border-color: rgba(129,140,248,0.45); }
.theme-dark .text-indigo-700,
.theme-dark .text-indigo-800,
.theme-dark .text-indigo-900 { color: #c7d2fe; }
.theme-dark .bg-violet-50 { background-color: rgba(139,92,246,0.14); }
.theme-dark .bg-violet-100 { background-color: rgba(139,92,246,0.24); }
.theme-dark .border-violet-200,
.theme-dark .border-violet-300 { border-color: rgba(167,139,250,0.45); }
.theme-dark .text-violet-600,
.theme-dark .text-violet-700,
.theme-dark .text-violet-800,
.theme-dark .text-violet-900 { color: #ddd6fe; }
.theme-dark .srs-review-panel {
    background-image: linear-gradient(135deg, rgba(76,29,149,0.34), rgba(30,64,175,0.2));
    border-color: rgba(167,139,250,0.42);
}
.theme-dark .assessment-panel {
    background-image: linear-gradient(135deg, rgba(49,46,129,0.52), rgba(30,41,59,0.97));
    border-color: rgba(129,140,248,0.5);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.04);
}
.theme-dark .assessment-card {
    background-color: rgba(15,23,42,0.74);
    border-color: rgba(129,140,248,0.42);
}
.theme-dark .assessment-card:hover { border-color: rgba(167,139,250,0.7); }
.theme-dark .assessment-meta,
.theme-dark .assessment-best { color: #a5b4fc; }
.theme-dark .assessment-start-button:not(:disabled) {
    background-image: linear-gradient(to right, #4f46e5, #7c3aed);
    color: #ffffff;
    box-shadow: 0 12px 24px -16px rgba(168,85,247,0.75);
}
.theme-dark .assessment-start-button:not(:disabled):hover {
    background-image: linear-gradient(to right, #818cf8, #c084fc);
    color: #0f172a;
}
.theme-dark .assessment-start-button:disabled {
    background: #334155;
    color: #94a3b8;
    box-shadow: none;
}
.theme-dark .assessment-status-banner-normal {
    background-color: rgba(76,29,149,0.28);
    border-color: rgba(167,139,250,0.52);
}
.theme-dark .assessment-status-banner-danger {
    background-color: rgba(127,29,29,0.36);
    border-color: #fb7185;
}
.theme-dark .dashboard-resume-panel {
    background-image: linear-gradient(135deg, rgba(30,64,175,0.28), rgba(15,23,42,0.94), rgba(8,145,178,0.18));
    border-color: rgba(96,165,250,0.42);
}
.theme-dark .bg-clip-text.text-transparent { -webkit-text-fill-color: initial; color: #e2e8f0; background: none; }
.theme-dark .task-pill { background: #334155; color: #cbd5e1; border-color: transparent; }
.theme-dark .task-pill:hover { background: #475569; }
.theme-dark .task-pill.solved { background: #064e3b; color: #6ee7b7; }
/* Dark-Mode: aktive (= aktuell ausgewaehlte) Pille deutlich kontrastreicher als im Light-Mode.
   Hellerer Farbverlauf, weisser Ring + dickerer Border, kraeftigerer Schatten und leicht
   groesserer Skalierungs-Hub heben die Auswahl klar vom dunklen Panel ab. */
.theme-dark .task-pill.active {
    background: linear-gradient(135deg, #60a5fa, #22d3ee);
    color: #0f172a;
    border-color: #ffffff;
    box-shadow: 0 0 0 3px rgba(96,165,250,0.35), 0 6px 16px -2px rgba(34,211,238,0.55);
    transform: scale(1.1);
    font-weight: 800;
}
.theme-dark .task-pill.solved.active {
    background: linear-gradient(135deg, #34d399, #2dd4bf);
    color: #022c22;
    border-color: #ffffff;
    box-shadow: 0 0 0 3px rgba(52,211,153,0.35), 0 6px 16px -2px rgba(45,212,191,0.55);
}
.theme-dark ::-webkit-scrollbar-thumb { background: #475569; }
.theme-dark ::-webkit-scrollbar-thumb:hover { background: #64748b; }
.theme-dark .nav-glass { background: rgba(15,23,42,0.85); border-bottom-color: #1e293b; }

/* Schüler-Bereich Eingabe */
.schueler-input {
    width: 100%;
    font-size: 1.5rem;
    padding: 0.75rem 1rem;
    border: 2px solid #cbd5e1;
    border-radius: 0.75rem;
    background: #fff;
    color: #0f172a;
    text-align: center;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.schueler-input:focus {
    outline: none;
    border-color: #2563eb;
    box-shadow: 0 0 0 4px rgba(37,99,235,0.18);
}
.theme-dark .schueler-input { background: #1e293b; color: #e2e8f0; border-color: #334155; }
.theme-dark .schueler-input:focus { border-color: #60a5fa; }

/* P-UI-SCHUELER-DARK-CONTRAST (v78): Lehrplan-Abschnitte und Breadcrumb-Pillen
   im Schueler-Bereich. Im Dark-Mode kollidiert das urspruengliche
   `bg-slate-50/80`-Panel mit dem dunklen Hintergrund (Tailwind-Mapping greift
   nur fuer `bg-slate-50`, nicht fuer das `/80`-Alpha-Modifier). Eigene Klassen
   geben uns klare Kontrolle ohne globale Tailwind-Overrides zu beruehren. */
.schueler-section { background-color: #f8fafc; }
.theme-dark .schueler-section {
    background-color: #1e293b;
    border-color: #334155;
}
.theme-dark .schueler-section > summary { color: #e2e8f0; }
.theme-dark .schueler-section .schueler-section-count {
    background-color: #0f172a;
    color: #cbd5e1;
    border-color: #475569;
}
.theme-dark .schueler-section .text-slate-600 { color: #94a3b8; }
.theme-dark .schueler-crumb-pill {
    background-color: #334155;
    color: #e2e8f0;
}
.theme-dark .schueler-crumb-sep { color: #64748b; }

/* P-UI-SCHUELER-BOX-CONTRAST (v82): Formel/Merksatz- und Musterloesung-Boxen
   im Schueler-Training und Quiz-Result. Im Dark-Mode greift Tailwind
   `bg-cyan-50` / `bg-emerald-50` als near-white und erzeugt einen blendend
   hellen Block (Formel-Box wirkt zu weiss) bzw. einen kontrastarmen
   Pastell-Block (Musterloesung-Box wirkt schwach). Eigene Klassen
   gewinnen ueber Tailwind-Utilities (gleiche Spezifitaet, gleicher
   Cascade-Punkt — Reihenfolge stellt sicher dass diese Regeln zuletzt
   gelten) und bringen WCAG-AA-Kontrast (Text/Hintergrund >= 7:1). */
.theme-dark .schueler-formula-box {
    background-color: #0c2a33;
    border-color: #0e7490;
    border-left-color: #06b6d4;
}
.theme-dark .schueler-formula-title { color: #67e8f9; }
.theme-dark .schueler-formula-body,
.theme-dark .schueler-formula-body * { color: #a5f3fc; }
.theme-dark .schueler-formula-body strong,
.theme-dark .schueler-formula-body code { color: #e0f7fa; }
.theme-dark .schueler-formula-hint { color: #67e8f9; }
.theme-dark .schueler-solution-box {
    background-color: #064e3b;
    border-color: #10b981;
}
.theme-dark .schueler-solution-title {
    color: #6ee7b7;
    border-color: #10b981;
}
.theme-dark .schueler-solution-body,
.theme-dark .schueler-solution-body * { color: #d1fae5; }
.theme-dark .schueler-solution-body strong,
.theme-dark .schueler-solution-body code { color: #ecfdf5; }
.theme-dark .schueler-result-details > summary { color: #cbd5e1; }
.theme-dark .schueler-result-details > summary:hover { color: #f1f5f9; }

/* Schulungen — Book-Reader & Quiz */
.book-page {
    font-family: Georgia, 'Times New Roman', 'Iowan Old Style', serif;
    line-height: 1.7;
}
/* P-UI-READER-TYPOGRAPHY: Schriftgroessen, Zeilenabstand, Lesebreite. */
.book-page.book-size-sm { font-size: 0.92rem; }
.book-page.book-size-md { font-size: 1rem; }
.book-page.book-size-lg { font-size: 1.125rem; }
.book-page.book-line-tall { line-height: 1.9; }
.book-page.book-wide { max-width: none; }
.book-page h2, .book-page h3, .book-page h4 {
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}
.prose-book p { margin: 0 0 0.9em 0; }
.prose-book ul, .prose-book ol { margin: 0.4em 0 1em 1.4em; }
.prose-book ul { list-style: disc; }
.prose-book ol { list-style: decimal; }
.prose-book li { margin: 0.25em 0; }
.prose-book h3 { font-size: 1.1rem; font-weight: 700; margin: 1em 0 0.4em 0; color: #0f172a; }
.prose-book h4 { font-size: 1rem; font-weight: 700; margin: 0.9em 0 0.3em 0; color: #1e293b; }
.prose-book strong { color: #0f172a; }
.prose-book code { background: #f1f5f9; padding: 0.1em 0.35em; border-radius: 0.25rem; font-size: 0.92em; }
.prose-book table { width: 100%; border-collapse: collapse; margin: 0.8em 0; font-size: 0.92em; }
.prose-book th, .prose-book td { border: 1px solid #cbd5e1; padding: 0.4em 0.6em; text-align: left; }
.prose-book th { background: #f1f5f9; font-weight: 700; }
.prose-book blockquote { border-left: 4px solid #93c5fd; padding: 0.3em 0.9em; color: #475569; background: #eff6ff; margin: 0.8em 0; border-radius: 0 0.4rem 0.4rem 0; }

.theme-dark .book-page { color: #e2e8f0; }
.theme-dark .prose-book h3, .theme-dark .prose-book h4, .theme-dark .prose-book strong { color: #f1f5f9; }
.theme-dark .prose-book code { background: #1e293b; color: #e2e8f0; }
.theme-dark .prose-book th, .theme-dark .prose-book td { border-color: #334155; }
.theme-dark .prose-book th { background: #1e293b; }
.theme-dark .prose-book blockquote { background: rgba(59,130,246,0.08); color: #cbd5e1; border-left-color: #3b82f6; }

@media (max-width: 640px) {
    .book-page { font-size: 1rem; }
}

/* ============================================================
   P-ARCH-GLOSSARY — Glossar-Links im Reader/Quiz-Result
   Klickbare Begriffe (Marker `[[glossary:id]]`) werden zu Buttons.
   Inline-Optik: gestrichelte Unterstreichung statt Vollunterstreichung,
   damit sie sich von normalen Links abheben.
   ============================================================ */
.glossary-link {
    display: inline;
    background: none;
    border: none;
    padding: 0;
    margin: 0;
    font: inherit;
    color: #2563eb;
    text-decoration: underline dotted;
    text-underline-offset: 2px;
    cursor: pointer;
    border-radius: 0.2rem;
}
.glossary-link:hover { color: #1d4ed8; text-decoration-style: solid; }
.theme-dark .glossary-link { color: #93c5fd; }
.theme-dark .glossary-link:hover { color: #dbeafe; }

/* ============================================================
   P-UI-FOCUS-RINGS — globale :focus-visible-Regeln
   Konsistenter, sichtbarer Tastatur-Fokus-Ring (WCAG-AA 2.4.7).
   :focus-visible verhindert, dass Mausklicks den Ring zeigen.
   ============================================================ */
button:focus-visible,
a:focus-visible,
[role="button"]:focus-visible,
[role="radio"]:focus-visible,
[role="tab"]:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.5), 0 0 0 5px rgba(37, 99, 235, 0.2);
    border-radius: 0.5rem;
}
.theme-dark button:focus-visible,
.theme-dark a:focus-visible,
.theme-dark [role="button"]:focus-visible,
.theme-dark [role="radio"]:focus-visible,
.theme-dark [role="tab"]:focus-visible,
.theme-dark input:focus-visible,
.theme-dark textarea:focus-visible,
.theme-dark select:focus-visible {
    box-shadow: 0 0 0 3px rgba(96, 165, 250, 0.7), 0 0 0 5px rgba(96, 165, 250, 0.25);
}
/* schueler-input und task-pill bringen eigene Fokus-Styles mit (siehe oben);
   :focus-visible-Schatten dort additiv ohne Konflikt. */

/* ============================================================
   P-UI-TOUCH-TARGETS — Mobile Touch-Mindestgroessen (HIG/Material)
   Auf Mobile mindestens 40x40 (HIG-light) fuer Task-Pills und
   Nav-Icon-Buttons. CSS-Variable erlaubt spaetere Anpassung.
   ============================================================ */
:root {
    --touch-target: 40px;
}
@media (max-width: 768px) {
    .task-pill {
        min-width: var(--touch-target);
        min-height: var(--touch-target);
    }
    /* Mobile-Nav-Icon-Buttons (siehe NAV_ICONS in app.jsx) und allgemeine
       Icon-only-Buttons: Mindestgroesse erreichen, auch wenn sie als
       <button class="w-9 h-9 ..."> gerendert sind. */
    .nav-glass button,
    button[aria-label][title]:not(.task-pill) {
        min-width: var(--touch-target);
        min-height: var(--touch-target);
    }
}