/*
  LSB Lernapp — Design-Grundlage (Briefing §3).

  Warm-neutrale Hauptfläche (Cremeweiß), gedämpfter Olivgrün-Akzent,
  serifenbetonte Überschriften, sans-serif Body über System-UI.

  Bewusst handgeschrieben statt Tailwind — die Briefing-§3-Anforderung
  ist "ordentliche, konsistente Grundlage". Tailwind-Standalone-CLI
  und Inter/Lora Self-Hosting können später nachgezogen werden, wenn
  die Phase 2 Feinschliff einfordert. Solange ist System-UI eine
  briefing-erlaubte Body-Schrift und der Code bleibt build-frei.

  Mindest-Tap-Target 44 × 44 px (Briefing §3 Mobil), Kontrast WCAG AA.
*/

:root {
    --bg:           #faf6ec; /* warm cream */
    --bg-card:      #fffaef; /* leicht heller fuer Karten / Eingaben */
    --bg-muted:     rgba(0, 0, 0, 0.03);
    --text:         #2a2a28; /* warm-near-black */
    --text-muted:   #5e5e58;
    --accent:       #6f7d52; /* gedaempftes Olivgruen */
    --accent-strong:#566440;
    --warn:         #b8704c; /* warmes Terrakotta fuer Hinweise */
    --warn-bg:      #fdf3ee;
    --error:        #a64030;
    --error-bg:     #fce8e1;
    --line:         #d4cdb6;

    --serif: "Iowan Old Style", "Palatino", Georgia, "Times New Roman", serif;
    --sans:  system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
             Roboto, "Helvetica Neue", Arial, sans-serif;
    --mono:  ui-monospace, "SF Mono", Menlo, Consolas, monospace;
}

* { box-sizing: border-box; }

html, body {
    margin: 0;
    padding: 0;
    background: var(--bg);
    color: var(--text);
    font-family: var(--sans);
    font-size: 17px;
    line-height: 1.6;
    -webkit-text-size-adjust: 100%;
    -webkit-font-smoothing: antialiased;
}

body {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

/* --- Layout-Container ----------------------------------------------- */

main {
    width: 100%;
    max-width: 65ch;
    margin: 0 auto;
    padding: 1.25rem 1rem 4rem;
    flex: 1;
}

footer {
    border-top: 1px solid var(--line);
    background: var(--bg-muted);
    padding: 1rem;
    text-align: center;
    font-size: 0.9rem;
}
footer small,
footer a {
    color: var(--text-muted);
}

/* --- Typografie ----------------------------------------------------- */

h1, h2, h3, h4 {
    font-family: var(--serif);
    color: var(--text);
    line-height: 1.2;
    font-weight: 600;
}
h1 { font-size: 1.85rem; margin: 0.2em 0 0.6em; }
h2 { font-size: 1.4rem;  margin: 1.4em 0 0.5em; }
h3 { font-size: 1.15rem; margin: 1.2em 0 0.4em; }
h4 { font-size: 1rem;    margin: 1em 0 0.3em; }

p { margin: 0.6em 0; }

a {
    color: var(--accent-strong);
    text-decoration: underline;
    text-decoration-thickness: 0.05em;
    text-underline-offset: 0.2em;
}
a:hover, a:focus { color: var(--accent); }
a:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

ul, ol { padding-left: 1.5em; margin: 0.5em 0; }
li { margin: 0.2em 0; }

dl dt { font-weight: 600; margin-top: 0.7em; }
dl dd { margin: 0.2em 0 0.6em; }

code, pre {
    font-family: var(--mono);
    font-size: 0.92em;
}
pre {
    background: var(--bg-muted);
    padding: 0.8em 1em;
    border-radius: 4px;
    overflow-x: auto;
    border: 1px solid var(--line);
}

hr {
    border: 0;
    border-top: 1px solid var(--line);
    margin: 1.5em 0;
}

/* --- Buttons -------------------------------------------------------- */

button,
.btn,
input[type="submit"] {
    background: var(--accent);
    color: white;
    border: 0;
    border-radius: 6px;
    padding: 0.65rem 1.05rem;
    font: inherit;
    font-weight: 500;
    cursor: pointer;
    min-height: 44px;
    text-decoration: none;
    transition: background-color 120ms ease;
}
button:hover, .btn:hover, input[type="submit"]:hover {
    background: var(--accent-strong);
}
button:focus-visible {
    outline: 2px solid var(--accent-strong);
    outline-offset: 2px;
}
button:disabled, .btn:disabled {
    opacity: 0.55;
    cursor: not-allowed;
}

/* Inline-Buttons in Admin-Tabellen u.ae. nicht volle Breite. */
table button { min-height: 36px; padding: 0.4rem 0.7rem; }

/* --- Form-Felder ---------------------------------------------------- */

label {
    display: block;
    margin: 0.2em 0;
    font-weight: 500;
}

input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="date"],
textarea,
select {
    display: block;
    width: 100%;
    padding: 0.55rem 0.7rem;
    border: 1px solid var(--line);
    border-radius: 6px;
    font: inherit;
    background: white;
    margin-top: 0.25em;
    min-height: 44px;
    color: var(--text);
}
table input[type="text"],
table input[type="number"] {
    min-height: 36px;
    padding: 0.3rem 0.5rem;
    width: auto;
    display: inline-block;
    margin-top: 0;
}
input:focus, textarea:focus, select:focus {
    outline: 2px solid var(--accent);
    outline-offset: 1px;
}
textarea {
    resize: vertical;
    min-height: 6em;
}

input[type="radio"], input[type="checkbox"] {
    margin-right: 0.5em;
    width: 20px;
    height: 20px;
    vertical-align: -3px;
}

fieldset {
    border: 1px solid var(--line);
    border-radius: 6px;
    padding: 0.8em 1em 1em;
    margin: 1em 0;
}
legend {
    padding: 0 0.5em;
    font-weight: 600;
}

form p { margin: 0.7em 0; }

/* --- Status-Bloecke (aside / role=alert) ---------------------------- */

aside[role="status"],
aside[role="alert"] {
    background: var(--bg-card);
    border-left: 4px solid var(--accent);
    padding: 0.9em 1em;
    margin: 1em 0;
    border-radius: 4px;
}
aside[role="alert"] {
    background: var(--warn-bg);
    border-left-color: var(--warn);
}
ul[role="alert"] {
    background: var(--error-bg);
    border-left: 4px solid var(--error);
    padding: 0.7em 0.7em 0.7em 2.2em;
    border-radius: 4px;
}
p[role="alert"] {
    color: var(--error);
    background: var(--error-bg);
    padding: 0.5em 0.9em;
    border-radius: 4px;
    border-left: 4px solid var(--error);
}

/* --- Tabellen ------------------------------------------------------- */

table {
    border-collapse: collapse;
    width: 100%;
    margin: 1em 0;
    font-size: 0.95em;
    background: var(--bg-card);
    border-radius: 6px;
    overflow: hidden;
}
th, td {
    text-align: left;
    padding: 0.55em 0.7em;
    border-bottom: 1px solid var(--line);
    vertical-align: top;
}
th {
    background: var(--bg-muted);
    font-weight: 600;
    font-family: var(--serif);
}
tr:last-child th, tr:last-child td { border-bottom: 0; }

/* --- Coachee-Chat --------------------------------------------------- */

#chat-log {
    background: var(--bg-card);
    border: 1px solid var(--line);
    border-radius: 6px;
    padding: 0.8em 1em;
    margin: 1em 0;
    min-height: 8em;
    max-height: 50vh;
    overflow-y: auto;
}
#chat-log p { margin: 0.5em 0; }

/* --- Admin-Nav ------------------------------------------------------ */

main > nav {
    background: var(--bg-card);
    border: 1px solid var(--line);
    border-radius: 6px;
    padding: 0.6em 0.9em;
    margin: 0 0 1em 0;
    font-size: 0.95em;
}
main > nav a { margin-right: 0.4em; }

/* --- Responsive ----------------------------------------------------- */

@media (min-width: 768px) {
    body { font-size: 18px; }
    main { padding: 2rem 1.25rem 5rem; }
    h1 { font-size: 2.05rem; }
    h2 { font-size: 1.5rem; }
}

/* Print (Datenschutz/Impressum sollen ausdruckbar sein) */
@media print {
    body { background: white; color: black; font-size: 12pt; }
    main { max-width: none; padding: 0; }
    nav, footer, button, form { display: none; }
    a { color: inherit; text-decoration: none; }
    h1, h2, h3 { page-break-after: avoid; }
}