/* =====================================================================
   GBS-Framework – Grundlayout
   Farben kommen aus theme.css. Mobil zuerst: Handy → iPad → PC.
   ===================================================================== */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: 1rem;          /* 16 px – verhindert Auto-Zoom auf iPhone/iPad */
  line-height: 1.55;
  color: var(--text);
  background: var(--hintergrund);
}

img { max-width: 100%; height: auto; }

a { color: var(--akzent); text-underline-offset: .15em; }
a:hover { color: var(--akzent-hover); }

:focus-visible { outline: 3px solid var(--gbs-orange); outline-offset: 2px; }

h1 { font-size: 1.5rem; line-height: 1.25; margin: 0 0 1rem; }
h2 { font-size: 1.2rem; margin: 1.5rem 0 .75rem; }

/* ---------- Kopfzeile ---------- */

.kopf {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: .75rem;
  padding: .6rem 1rem;
  background: var(--hintergrund);
}
.marke { display: flex; align-items: center; line-height: 0; }
.marke img { height: 40px; width: auto; }

.konto { display: flex; align-items: center; gap: .75rem; }
.konto form { margin: 0; }
.konto-name { color: var(--leise); font-size: .95rem; }

/* Farbband in den drei Schulfarben */
.farbband {
  height: 5px;
  background: linear-gradient(90deg,
    var(--gbs-orange) 0 33.3%,
    var(--gbs-gruen) 33.3% 66.6%,
    var(--gbs-alu) 66.6% 100%);
}

.umgebung {
  padding: .3rem 1rem;
  background: var(--hinweis);
  color: var(--text);
  font-size: .85rem;
  text-align: center;
}

/* ---------- Inhalt ---------- */

.inhalt { max-width: 960px; margin: 0 auto; padding: 1.25rem 1rem 3rem; }

/* ---------- Knöpfe (mind. 44 px hoch – Touch) ---------- */

button, .knopf {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: .5rem 1.1rem;
  border: 1px solid var(--akzent);
  border-radius: 8px;
  background: var(--akzent);
  color: var(--knopf-text);
  font: inherit;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
}
button:hover, .knopf:hover { background: var(--akzent-hover); border-color: var(--akzent-hover); color: var(--knopf-text); }

.knopf-zweit, .konto button {
  background: var(--hintergrund);
  color: var(--text);
  border-color: var(--rand);
}
.knopf-zweit:hover, .konto button:hover { background: var(--flaeche); color: var(--text); border-color: var(--gbs-alu); }

/* ---------- Kacheln (Startseite) ---------- */

.kacheln {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr;            /* Handy: eine Spalte */
  gap: 1rem;
}
.kacheln a {
  display: block;
  height: 100%;
  padding: 1rem 1.1rem;
  border: 1px solid var(--rand);
  border-top: 5px solid var(--gbs-orange);
  border-radius: 10px;
  background: var(--hintergrund);
  color: var(--text);
  text-decoration: none;
}
.kacheln li:nth-child(3n+2) a { border-top-color: var(--gbs-gruen); }
.kacheln li:nth-child(3n)   a { border-top-color: var(--gbs-alu); }
.kacheln a:hover { background: var(--flaeche); }
.kacheln strong { display: block; font-size: 1.1rem; }
.kacheln span { display: block; margin-top: .3rem; color: var(--leise); font-size: .95rem; }

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

.daten { border-collapse: collapse; width: 100%; }
.daten th, .daten td { padding: .55rem .6rem; border-bottom: 1px solid var(--rand); text-align: left; vertical-align: top; }
.daten th { width: 35%; font-weight: 600; }

/* ---------- Meldungen ---------- */

.meldung {
  padding: .75rem 1rem;
  background: var(--hinweis);
  border-left: 4px solid var(--hinweis-rand);
  border-radius: 6px;
}
.leise { color: var(--leise); font-size: .95rem; }
.ok { color: var(--ok); font-weight: 600; }
.fehler { color: var(--fehler); font-weight: 600; }

.meldung-ok     { border-left-color: var(--gbs-gruen); background: #f2f9e6; }
.meldung-fehler { border-left-color: var(--fehler); background: #fdecea; }

/* ---------- Formulare ---------- */

input[type="text"], input[type="search"], input[type="number"], select, textarea {
  width: 100%;
  min-height: 44px;
  padding: .5rem .65rem;
  border: 1px solid var(--rand);
  border-radius: 8px;
  background: var(--hintergrund);
  color: var(--text);
  font: inherit;            /* 16 px → kein Auto-Zoom auf iOS */
}
input:focus, select:focus, textarea:focus { border-color: var(--gbs-orange); }

label { display: block; font-weight: 600; font-size: .95rem; }
label > input, label > select, label > textarea { margin-top: .25rem; font-weight: 400; }

.formular { display: grid; gap: .85rem; margin: 1rem 0; }
.formular h2 { margin: 0; }
.formular button { justify-self: start; }

.box { padding: 1rem; border: 1px solid var(--rand); border-radius: 10px; background: var(--flaeche); }

.filter { display: grid; gap: .75rem; margin: 1rem 0; align-items: end; }

.knopf-klein { min-height: 36px; padding: .25rem .7rem; font-size: .9rem; }
.knopf-gefahr { background: var(--hintergrund); color: var(--fehler); border-color: var(--fehler); }
.knopf-gefahr:hover { background: #fdecea; color: var(--fehler); border-color: var(--fehler); }

form.inline { display: inline; margin: 0; }

.aufklapp { margin: 1.5rem 0; }
.aufklapp summary { cursor: pointer; font-weight: 600; color: var(--akzent); min-height: 44px; display: flex; align-items: center; }

/* ---------- Reiter-Navigation (Adminpanel) ---------- */

.reiter {
  display: flex;
  gap: .25rem;
  margin: 0 0 1.25rem;
  box-shadow: inset 0 -2px 0 var(--rand);   /* Grundlinie, ohne Überstand */
  overflow-x: auto;                          /* auf dem Handy seitlich wischen */
  overflow-y: hidden;                        /* kein senkrechter Mini-Scrollbalken */
  scrollbar-width: none;                     /* Scrollbalken ausblenden, Wischen geht weiter */
  -webkit-overflow-scrolling: touch;
}
.reiter::-webkit-scrollbar { display: none; }
.reiter a {
  flex: 0 0 auto;
  padding: .6rem .9rem;
  color: var(--text);
  text-decoration: none;
  border-bottom: 3px solid transparent;
}
.reiter a:hover { color: var(--akzent); }
.reiter a[aria-current="page"] { border-bottom-color: var(--gbs-orange); font-weight: 600; }

/* ---------- Kennzahlen ---------- */

.kennzahlen {
  list-style: none;
  margin: 0 0 1rem;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: .75rem;
}
.kennzahlen li { padding: .8rem; border: 1px solid var(--rand); border-left: 4px solid var(--gbs-gruen); border-radius: 8px; }
.kennzahlen strong { display: block; font-size: 1.5rem; line-height: 1.2; }
.kennzahlen span { color: var(--leise); font-size: .9rem; }

/* ---------- Listen-Tabellen (mehrspaltig, auf dem Handy seitlich scrollbar) ---------- */

.tabelle-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; margin: 1rem 0; }
.liste { border-collapse: collapse; width: 100%; min-width: 560px; }
.liste th, .liste td { padding: .5rem .6rem; border-bottom: 1px solid var(--rand); text-align: left; vertical-align: middle; }
.liste thead th { background: var(--flaeche); font-size: .9rem; }
.liste tr.gesperrt td { color: var(--leise); }
.nowrap { white-space: nowrap; }
.klein { font-size: .85rem; color: var(--leise); word-break: break-word; }

.etikett {
  display: inline-flex !important;
  align-items: center;
  gap: .25rem;
  margin: .1rem .25rem .1rem 0;
  padding: .1rem .2rem .1rem .6rem;
  border: 1px solid var(--rand);
  border-radius: 999px;
  background: var(--flaeche);
  font-size: .9rem;
}
.entfernen {
  min-height: 32px;
  min-width: 32px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--leise);
  font-size: 1.1rem;
  line-height: 1;
}
.entfernen:hover { background: #fdecea; color: var(--fehler); }

.spalten { display: grid; gap: 1rem; }

/* ---------- Anmeldeseite ---------- */

.anmeldung { max-width: 520px; margin: 1.5rem auto; text-align: center; }
.anmeldung img { width: 260px; margin-bottom: 1.5rem; }

/* ---------- Handy (schmal) ---------- */

@media (max-width: 559px) {
  .konto-name { display: none; }

  /* Tabellen untereinander statt nebeneinander */
  .daten, .daten tbody, .daten tr, .daten th, .daten td { display: block; width: auto; }
  .daten tr { padding: .5rem 0; border-bottom: 1px solid var(--rand); }
  .daten th, .daten td { border: 0; padding: .1rem 0; }
  .daten th { color: var(--leise); font-weight: 500; font-size: .9rem; }
}

/* ---------- iPad und größer ---------- */

@media (min-width: 560px) {
  .kacheln { grid-template-columns: repeat(2, 1fr); }
  .kennzahlen { grid-template-columns: repeat(4, 1fr); }
  .filter { grid-template-columns: 2fr 1fr 1fr auto; }
}

@media (min-width: 760px) {
  .spalten { grid-template-columns: 1fr 1fr; align-items: start; }
}

@media (min-width: 900px) {
  .kopf { padding: .75rem 1.5rem; }
  .marke img { height: 48px; }
  h1 { font-size: 1.75rem; }
  .kacheln { grid-template-columns: repeat(3, 1fr); }
}