/*
  Gemeinsame Basis für alle Seiten.

  Wichtig: Es dürfen keine style="..."-Attribute im HTML mehr vorkommen und kein
  <style>/<script> inline stehen, sonst greift die Content-Security-Policy nicht
  mehr ohne 'unsafe-inline'. Neue Abstände deshalb immer als Klasse ergänzen.
*/

/* Grundreset, muss hier stehen, nicht je Seite. Fehlte er auf einer Seite,
   blieb dort der Standard-Rand des Browsers von 8px stehen und der Kopfbereich
   saß sichtbar versetzt gegenüber den anderen Seiten. */
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }

/* ===== Icons =====
   Größe kommt über eine Klasse statt über ein style-Attribut. */
.ico { flex-shrink: 0; display: inline-block; vertical-align: middle; }
.ico-14 { width: 14px; height: 14px; }
.ico-15 { width: 15px; height: 15px; }
.ico-16 { width: 16px; height: 16px; }
.ico-18 { width: 18px; height: 18px; }
.ico-22 { width: 22px; height: 22px; }
.ico-26 { width: 26px; height: 26px; }
.ico-28 { width: 28px; height: 28px; }
.ico-32 { width: 32px; height: 32px; }

/* ===== Kleine Hilfsklassen =====
   Bewusst mit den exakten Werten der früheren Inline-Styles, damit sich am
   Erscheinungsbild nichts ändert. */
.u-flush { margin: 0; }
.u-p0 { padding: 0; }
.u-static { cursor: default; }
.u-truncate { overflow: hidden; text-overflow: ellipsis; }
.u-noshrink { flex-shrink: 0; }

.u-mb-2 { margin-bottom: 2px; }
.u-mb-4 { margin-bottom: 4px; }
.u-mb-10 { margin-bottom: 10px; }
.u-mb-14 { margin-bottom: 14px; }
.u-mb-18 { margin-bottom: 18px; }
.u-mb-20 { margin-bottom: 20px; }
.u-mb-field { margin-bottom: var(--sc-space-4); }
.u-mb-3 { margin-bottom: var(--sc-space-3); }

.u-mt-8 { margin-top: 8px; }
.u-mt-14 { margin-top: 14px; }
.u-mt-16 { margin-top: 16px; }
.u-mt-3 { margin-top: var(--sc-space-3); }
.u-mt-6 { margin-top: var(--sc-space-6); }

.u-ml-6 { margin-left: 6px; }
.u-ml-12 { margin-left: 12px; }

.u-pt-3 { padding-top: var(--sc-space-3); }

.u-fs-lg { font-size: var(--sc-text-lg); }
.u-maxw-320 { max-width: 320px; }

/* Fehlermeldungen direkt über einem Button */
.u-err-12 { padding: 0 0 12px; }
.u-err-10 { padding: 0 0 10px; }

/* ===== Fußzeile "Ein Angebot von" =====
   Auf allen drei Seiten gleich; Abweichungen (Deckkraft, Logohöhe, Abstand)
   überschreibt die jeweilige Seiten-CSS. */
.brand-footer-link { display: block; margin-top: var(--sc-space-8); text-decoration: none; }
.brand-footer { display: flex; flex-direction: column; align-items: center; gap: var(--sc-space-1); opacity: .7; transition: opacity .15s ease; }
.brand-footer-link:hover .brand-footer { opacity: 1; }
.brand-footer span { font-size: var(--sc-text-xs); color: var(--sc-color-text-muted); }

/* Logo als Hintergrundbild: Der Browser lädt nur die Variante, die zum
   Farbschema passt. Seitenverhältnis wie die SVG-Dateien (viewBox 3000 x 830). */
.brand-footer .brand-logo {
  display: block; height: 18px; aspect-ratio: 3000 / 830;
  background: url("/assets/sc-logo-light.svg?v=564e278877ce") center / contain no-repeat;
}
html[data-theme="dark"] .brand-footer .brand-logo { background-image: url("/assets/sc-logo-dark.svg?v=36e704629567"); }
@media (prefers-color-scheme: dark) {
  html:not([data-theme="light"]) .brand-footer .brand-logo { background-image: url("/assets/sc-logo-dark.svg?v=36e704629567"); }
}

/* ===== Modale Dialoge ===== */
.modal-overlay { position: fixed; inset: 0; z-index: 60; }
.modal-header { text-align: center; margin-bottom: var(--sc-space-4); }
.modal-header .sc-modal-icon { margin: 0 auto var(--sc-space-4); }
.modal-header h3 { margin: 0; }
.modal-info-row { display: flex; justify-content: center; align-items: center; gap: var(--sc-space-2); font-size: var(--sc-text-sm); color: var(--sc-color-text-muted); }
.modal-info-row + .modal-info-row { margin-top: var(--sc-space-1); }
.sc-modal-actions { flex-direction: column; margin-top: var(--sc-space-6); }

/* ===== Kurzmeldung am unteren Rand ===== */
.toast {
  position: fixed; left: 50%; bottom: 26px; transform: translateX(-50%);
  background: var(--sc-navy); color: var(--sc-white);
  padding: 11px var(--sc-space-6); border-radius: var(--sc-radius-pill);
  font-size: var(--sc-text-sm); font-weight: 600; box-shadow: var(--sc-shadow-md); z-index: 50;
  opacity: 0; pointer-events: none; transition: opacity .2s ease, bottom .2s ease;
}
.toast.show { opacity: 1; bottom: 34px; }

/* ===== Fußbereich mit Pflicht- und Hilfeseiten =====
   Reihenfolge: Seitenlinks oben, der Hinweis auf Schulcomputer ganz unten. */
.fuss { margin-top: var(--sc-space-8); }
.fuss .brand-footer-link { margin-top: var(--sc-space-4); }
.fuss-links {
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: var(--sc-space-2) var(--sc-space-4);
}
.fuss-links a {
  font-size: var(--sc-text-xs);
  color: var(--sc-color-text-muted);
  text-decoration: none;
}
.fuss-links a:hover { color: var(--sc-color-link-hover); text-decoration: underline; }