/* Farben und Typografie aus den Mockups („Schulinventar Mockups") */
@font-face { font-family: "Source Sans 3"; font-weight: 400; font-display: swap; src: url("../vendor/fonts/source-sans-3-400.27ab01c4cb50.woff2") format("woff2"); }
@font-face { font-family: "Source Sans 3"; font-weight: 600; font-display: swap; src: url("../vendor/fonts/source-sans-3-600.9a35cba76eda.woff2") format("woff2"); }
@font-face { font-family: "Bricolage Grotesque"; font-weight: 700; font-display: swap; src: url("../vendor/fonts/bricolage-grotesque-700.48e4b00b03b4.woff2") format("woff2"); }

:root {
  --grund: #f5f7f9; --flaeche: #ffffff; --text: #1b2530; --leise: #5a6875; --linie: #d9e0e6; --feldrand: #c4ced7;
  --akzent: #1e5a85; --akzent-hell: #dfeaf4;
  --ok-grund: #e4f1ea; --ok-text: #1d5b3a;
  --warn-grund: #fbf0d9; --warn-text: #6b4a07;
  --sperr-grund: #f6e3e1; --sperr-text: #7a2a22;
  --schrift: "Source Sans 3", "Segoe UI", system-ui, sans-serif;
  --titel: "Bricolage Grotesque", "Segoe UI", system-ui, sans-serif;
  --mono: ui-monospace, "Cascadia Mono", Consolas, monospace;
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--grund); color: var(--text); font: 17px/1.5 var(--schrift); }
h1, h2 { font-family: var(--titel); font-weight: 700; line-height: 1.15; margin: 0; }
h1 { font-size: 1.65rem; }
h2 { font-size: 1.2rem; }
a { color: var(--akzent); }
.mono { font-family: var(--mono); font-size: .88em; color: var(--leise); }
.leise { color: var(--leise); font-size: .92rem; }

.kopf { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 16px; background: var(--flaeche); border-bottom: 1px solid var(--linie); }
.kopf__marke { font-family: var(--titel); font-weight: 700; font-size: 1.2rem; color: var(--text); text-decoration: none; }
.kopf__nav { display: flex; align-items: center; gap: 12px; }
.kopf__nav form { margin: 0; }
/* Lange Namen kürzen, damit die Kopfzeile auf schmalen Handys einzeilig bleibt. */
.kopf__nutzer { color: var(--leise); max-width: 40vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.inhalt { max-width: 40rem; margin: 0 auto; padding: 16px; display: grid; gap: 18px; }
.fuss { text-align: center; font-size: .88rem; padding: 8px 16px 24px; margin-top: 24px; }
.meldungen { max-width: 40rem; margin: 12px auto 0; padding: 0 16px; display: grid; gap: 8px; }
.meldung { margin: 0; padding: 10px 14px; border-radius: 10px; background: var(--akzent-hell); }
.meldung--success { background: var(--ok-grund); color: var(--ok-text); }
.meldung--warning { background: var(--warn-grund); color: var(--warn-text); }
.meldung--error { background: var(--sperr-grund); color: var(--sperr-text); }

.knopf { display: flex; align-items: center; justify-content: center; min-height: 52px; padding: 0 18px; border-radius: 12px; border: 2px solid var(--akzent); background: var(--flaeche); color: var(--akzent); font: inherit; font-weight: 600; text-decoration: none; cursor: pointer; width: 100%; }
.knopf--haupt { background: var(--akzent); color: #fff; font-size: 1.1rem; }
.knopf--gross { min-height: 160px; font-family: var(--titel); font-size: 1.6rem; }
.link { background: none; border: none; color: var(--akzent); font: inherit; font-weight: 600; cursor: pointer; min-height: 44px; padding: 0; }
.aktionen { display: grid; gap: 10px; }

.pill { display: inline-block; padding: 2px 12px; border-radius: 99px; font-size: .85rem; font-weight: 600; }
.pill--verfuegbar { background: var(--ok-grund); color: var(--ok-text); }
.pill--ausgeliehen { background: var(--akzent-hell); color: #1e4d72; }
.pill--gesperrt, .pill--ueberfaellig { background: var(--sperr-grund); color: var(--sperr-text); }
.pill--ausgemustert { background: var(--linie); color: var(--leise); }

.karte { background: var(--flaeche); border: 1px solid var(--linie); border-radius: 12px; padding: 12px 14px; display: grid; gap: 4px; }
.hinweis { border-radius: 10px; padding: 12px 14px; display: grid; gap: 4px; }
.hinweis--warnung { background: var(--warn-grund); color: var(--warn-text); }
.hinweis--sperre { background: var(--sperr-grund); color: var(--sperr-text); }
.foto { width: 100%; max-height: 260px; object-fit: cover; border-radius: 10px; background: #e3e8ed; }
.foto--leer { height: 160px; display: flex; align-items: center; justify-content: center; color: var(--leise); }
.meta { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }

.liste { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.liste a { text-decoration: none; color: inherit; }

.formular { display: grid; gap: 16px; }
.formular label, .formular legend { font-weight: 600; }
.formular fieldset { border: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.feld { display: grid; gap: 6px; }
.feld input[type=text], .feld input[type=date], .feld input[type=search], .feld select, .feld textarea {
  min-height: 48px; width: 100%; border: 1px solid var(--feldrand); border-radius: 10px; padding: 8px 12px; font: inherit; background: var(--flaeche); color: var(--text);
}
.feld .fehler { color: var(--sperr-text); font-size: .92rem; margin: 0; }
.wahl { display: flex; align-items: center; gap: 10px; min-height: 44px; }
.wahl input { width: 22px; height: 22px; accent-color: var(--akzent); }

.etiketten { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6mm; }
.etikett { border: 1px dashed var(--feldrand); padding: 3mm; display: grid; justify-items: center; gap: 1mm; text-align: center; break-inside: avoid; }
.etikett svg { width: 32mm; height: 32mm; }
@media print {
  .kopf, .meldungen, .nicht-drucken { display: none; }
  body { background: #fff; }
  .inhalt { max-width: none; padding: 0; }
}