/* Reithalle Hof Buschbur – schlankes, modernes, mobil-first Stylesheet. */
:root {
  --green: #2f6f4e;
  --green-dark: #245740;
  --green-soft: #e7f1ea;
  --bg: #f7f6f2;
  --card: #ffffff;
  --ink: #1f2937;
  --muted: #6b7280;
  --border: #e6e2d8;
  --danger: #b3261e;
  --danger-soft: #fdeceb;
  --warn-soft: #fdf6e3;
  --ok-soft: #e7f1ea;
  --info-soft: #eaf1fb;
  --radius: 12px;
  --shadow: 0 1px 2px rgba(0, 0, 0, .05), 0 6px 20px rgba(0, 0, 0, .04);
  --maxw: 960px;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  color: var(--ink);
  background: var(--bg);
  line-height: 1.5;
}
a { color: var(--green-dark); }

/* Kopfzeile / Navigation */
.topbar {
  position: sticky; top: 0; z-index: 20;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: .3rem 1rem; padding: .7rem 1rem;
  background: rgba(255, 255, 255, .92);
  backdrop-filter: saturate(1.4) blur(8px);
  border-bottom: 1px solid var(--border);
}
.brand { display: flex; align-items: center; gap: .5rem; text-decoration: none; color: var(--ink); font-weight: 700; }
.brand-mark { font-size: 1.4rem; }
.brand-name { white-space: nowrap; }
.topnav, .account-actions { display: flex; align-items: center; gap: .25rem; }
.topnav a, .topnav .linklike, .account-actions a, .account-actions .linklike {
  padding: .45rem .7rem; border-radius: 8px; text-decoration: none;
  color: var(--ink); font: inherit; font-weight: 500;
}
.topnav a.active, .account-actions a.active { background: var(--green-soft); color: var(--green-dark); }
.topnav a:hover, .topnav .linklike:hover, .account-actions a:hover, .account-actions .linklike:hover { background: #f0efe9; }
.inline-form { display: inline; margin: 0; }
.linklike { border: 0; background: none; cursor: pointer; }

/* Burger-Menü: nur auf dem Handy. Dort bleiben in der Leiste ausschließlich "Hallenplan" und
   "Bestellungen"; alles Weitere klappt rechts auf. Auf dem Desktop (ab 700px, siehe unten)
   ist der Burger aus und die Sekundär-Links stehen wie gewohnt direkt in der Leiste. */
.nav-desktop { display: none; }
.burger {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; flex: none;
  border: 1px solid var(--border); border-radius: 10px; background: #fff;
  font-size: 1.3rem; line-height: 1; color: var(--ink); cursor: pointer;
}
.burger:hover { background: #f6f5f0; }
.burger[aria-expanded="true"] { background: var(--green-soft); border-color: var(--green); color: var(--green-dark); }
.burger-panel {
  position: absolute; top: calc(100% + .3rem); right: .7rem; z-index: 30;
  display: grid; gap: .15rem; min-width: 190px; padding: .4rem;
  background: #fff; border: 1px solid var(--border); border-radius: 10px; box-shadow: var(--shadow);
}
.burger-panel[hidden] { display: none; }
.burger-panel a, .burger-panel .linklike {
  display: block; width: 100%; text-align: left; padding: .6rem .7rem; border-radius: 8px;
  text-decoration: none; color: var(--ink); font: inherit; font-weight: 500;
}
.burger-panel a:hover, .burger-panel .linklike:hover { background: #f0efe9; }
.burger-panel a.active { background: var(--green-soft); color: var(--green-dark); }
.burger-panel .inline-form { display: block; }

/* Layout */
.container { max-width: var(--maxw); margin: 0 auto; padding: 1.25rem 1rem 3rem; }
.card {
  background: var(--card); border: 1px solid var(--border);
  border-radius: var(--radius); box-shadow: var(--shadow);
  padding: 1.5rem; margin-bottom: 1.25rem;
}
.card.narrow { max-width: 460px; margin-left: auto; margin-right: auto; }
.card.center { text-align: center; }
h1 { font-size: 1.5rem; margin: 0 0 .5rem; }
/* Anzahl neben einer Überschrift (z. B. registrierte Nutzer bei "Nutzer & Rollen"). */
.count-badge {
  display: inline-block; vertical-align: .12em; margin-left: .35rem;
  padding: .1rem .55rem; border-radius: 999px;
  background: var(--green-soft); color: var(--green-dark);
  font-size: .95rem; font-weight: 700;
}
.lead { font-size: 1.05rem; color: #374151; }
.muted { color: var(--muted); }
.small { font-size: .9rem; }
.opt { color: var(--muted); font-weight: 400; font-size: .85em; }

/* Eigene Rollen im Profil: Kürzel plus Klartext, damit "BST" o. Ä. verständlich ist. */
.myroles {
  display: grid; gap: .4rem; margin: 0 0 1.25rem;
  padding: .75rem .9rem; background: #f7f6f2; border: 1px solid var(--border); border-radius: 10px;
}
.myroles-label { font-weight: 600; font-size: .95rem; }
.myroles-list { display: flex; flex-wrap: wrap; gap: .4rem 1rem; align-items: center; }
.myroles-name { margin-left: -.2rem; font-size: .92rem; }

/* Login-Intro (Icon + Titel über dem Anmelden-Block) */
.login-intro { text-align: center; padding: 2rem 1rem 0; }
.login-intro-icon { width: 140px; height: 140px; object-fit: contain; margin: 0 auto 1rem; display: block; }
.login-intro-title { font-size: 1.6rem; margin: 0 0 .4rem; }
.login-intro-sub { color: var(--muted); margin: 0; }

/* Hero (Startseite) */
.hero { text-align: center; padding: 2.5rem 1rem; }
.hero h1 { font-size: 2rem; }
.hero .lead { max-width: 40ch; margin: .5rem auto 1.5rem; }
.hero-actions { display: flex; gap: .75rem; justify-content: center; flex-wrap: wrap; }

/* Buttons */
.btn {
  display: inline-block; padding: .6rem 1.1rem; border-radius: 10px;
  font-weight: 600; text-decoration: none; cursor: pointer;
  border: 1px solid transparent; font-size: 1rem;
}
.btn-primary { background: var(--green); color: #fff; }
.btn-primary:hover { background: var(--green-dark); }
.btn-ghost { background: #fff; border-color: var(--border); color: var(--ink); }
.btn-ghost:hover { background: #f6f5f0; }
.btn-danger { background: var(--danger-soft); color: var(--danger); border-color: #f3c9c6; }
.btn-warn { background: var(--warn-soft); color: #92600b; border-color: #ecdca6; }
.btn-warn:hover { background: #f7ecc9; }
.btn-sm { padding: .35rem .7rem; font-size: .9rem; border-radius: 8px; }

/* Formulare */
.form { display: grid; gap: 1rem; margin-top: 1rem; }
.form label { display: grid; gap: .35rem; font-weight: 600; font-size: .95rem; }
.form input, .form select, .form textarea {
  font: inherit; padding: .6rem .7rem; border: 1px solid var(--border);
  border-radius: 10px; background: #fff; color: var(--ink); width: 100%;
  /* Mindestens 16px: darunter zoomt Safari auf dem iPhone beim Antippen des Feldes hinein.
     "font: inherit" würde sonst die .95rem der Beschriftung übernehmen. */
  font-size: 1rem;
}
.form input:focus, .form select:focus, .form textarea:focus {
  outline: 2px solid var(--green-soft); border-color: var(--green);
}
/* Der native Datums-Picker legt intern mehr Höhe an als ein Textfeld gleicher Schriftgröße –
   selbst mit reduziertem Padding bleibt eine sichtbare Differenz, da Chrome dafür nicht allein
   auf line-height/Padding hört. Feste Höhe erzwingt dieselbe Größe wie bei .form input. */
.form input[type="date"] { padding-block: .45rem; height: 45px; }
/* Noch nicht freigeschaltete Felder (z. B. Buchungsformular: erst Tag/Startzeit/Dauer).
   Bewusst nicht nur opacity, sonst wirkt der Rahmen weiter „aktiv“. */
.form input:disabled, .form select:disabled, .form textarea:disabled {
  background: var(--bg); color: var(--muted); border-color: var(--border); cursor: not-allowed;
}
.form label.is-locked { color: var(--muted); }

.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.err { color: var(--danger); font-weight: 500; font-size: .85rem; }

/* Flash-Nachrichten */
.flash { padding: .75rem 1rem; border-radius: 10px; margin-bottom: 1rem; border: 1px solid var(--border); }
.flash-success { background: var(--ok-soft); border-color: #bcd8c7; }
.flash-error { background: var(--danger-soft); border-color: #f3c9c6; color: var(--danger); }
.flash-info { background: var(--info-soft); border-color: #c7d8f2; }
.flash-warn { background: var(--warn-soft); border-color: #ecdca6; }

/* Statistik-Kacheln (Admin) */
.stat-row { display: flex; gap: 1rem; flex-wrap: wrap; margin: 1rem 0; }
.stat {
  flex: 1 1 140px; display: grid; gap: .2rem; text-decoration: none;
  padding: 1rem; border: 1px solid var(--border); border-radius: var(--radius);
  background: #fff; color: var(--ink);
}
.stat:hover { background: #f9f8f4; }
.stat-num { font-size: 1.8rem; font-weight: 700; color: var(--green-dark); }
.stat-label { color: var(--muted); font-size: .9rem; }

/* Fußzeile */
.footer {
  max-width: var(--maxw); margin: 0 auto; padding: 1.5rem 1rem 3rem;
  color: var(--muted); font-size: .9rem; display: flex; gap: 1rem; justify-content: space-between;
}

/* Allgemeine Kleinteile */
.card-title { font-size: 1.15rem; margin: 0 0 .75rem; }
.mt { margin-top: 1.5rem; }
.crumb { margin-bottom: .5rem; }
.crumb a { text-decoration: none; color: var(--muted); }
.form-actions { display: flex; gap: .75rem; align-items: center; flex-wrap: wrap; }
.dot { width: 12px; height: 12px; border-radius: 50%; display: inline-block; flex: none; }

/* Meine Buchungen */
.booking-list { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; }
.booking-item {
  display: flex; align-items: center; gap: .6rem; flex-wrap: wrap;
  padding: .6rem .75rem; border: 1px solid var(--border); border-radius: 10px; background: #fff;
}
.booking-when { font-weight: 600; }
.booking-act { color: var(--muted); }
.booking-item .inline-form, .booking-item .units { margin-left: auto; }
/* Vergangene Buchungen im Profil: zurückgenommen, damit die kommenden Termine hervorstechen. */
.booking-item.is-past { opacity: .65; }
.booking-item .badge { margin-left: auto; }

/* Tages-Navigation */
/* Grid statt flex: der mittlere Tagesblock hat eine feste Breite, damit die Pfeile bei
   unterschiedlich langen Wochentagsnamen (z. B. "Mo" vs. "Donnerstag") nicht hin- und herspringen. */
.daynav { display: grid; grid-template-columns: auto 200px auto; align-items: center; justify-content: center; gap: .9rem; }
.daynav-center { text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.daynav-date { font-size: 1.25rem; font-weight: 700; }
.daynav-sub { color: var(--muted); font-size: .9rem; }
.daynav-arrow { font-size: 1.5rem; line-height: 1; padding: .35rem 1rem; font-weight: 700; }
.daynav-tools { display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; margin: .9rem 0 .3rem; }

/* Kopfzeile des Plans: Zeitraum-Navigation und Ansichts-Umschalter in einer Zeile.
   Auf schmalen Geräten reicht der Platz für beides nicht – dort bricht der Umschalter
   in eine zweite Zeile um (flex-wrap) statt zu überlaufen. */
.plan-head { display: flex; align-items: center; justify-content: space-between; gap: .6rem 1rem; flex-wrap: wrap; }
.plan-head .plan-switch { margin-bottom: 0; }

/* Umschalter Tag/Woche/Monat */
.plan-switch { display: inline-flex; gap: .2rem; padding: .2rem;
  background: #f0efe9; border-radius: 999px; }
.plan-switch-btn {
  padding: .45rem 1.1rem; border-radius: 999px; text-decoration: none;
  color: var(--ink); font-weight: 600; font-size: .95rem; min-height: 40px;
  display: inline-flex; align-items: center;
}
.plan-switch-btn:hover { background: #e6e4dc; }
.plan-switch-btn.active { background: #fff; color: var(--green-dark); box-shadow: 0 1px 2px rgba(0,0,0,.08); }

/* Wochenübersicht: mobil eine Liste, ab 700px sieben Spalten nebeneinander. */
.weekgrid { list-style: none; margin: 1rem 0 0; padding: 0; display: grid; gap: .5rem; }
.weekday { border: 2px solid var(--border); border-radius: 10px; background: #fff; }
.weekday > a {
  display: grid; gap: .2rem; padding: .7rem .8rem; text-decoration: none; color: var(--ink);
}
.weekday-top { display: flex; align-items: center; justify-content: space-between; gap: .5rem; }
.weekday-name { font-weight: 700; }
.weekday-today {
  font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .03em;
  background: var(--green); color: #fff; padding: .1rem .45rem; border-radius: 999px;
}
.weekday-status { font-weight: 600; font-size: .92rem; }
.weekday-info { color: var(--muted); font-size: .85rem; }
.weekday.is-past { opacity: .55; }
.weekday.is-today { box-shadow: 0 0 0 2px var(--green-soft); }
.weekday:hover { border-color: var(--green); }

/* Ampel: weiß = frei, orange = teilweise belegt, rot = ausgebucht. */
.status-frei { background: #fff; border-color: #d8d3c4; }
.status-teilweise { background: #fde6b8; border-color: #e2a63a; }
.status-voll { background: #f7d6d3; border-color: #c9524a; }
.status-teilweise .weekday-status { color: #8a5a06; }
.status-voll .weekday-status { color: #9d2f27; }

.weekday-date { color: var(--muted); font-size: .85rem; font-variant-numeric: tabular-nums; }

/* Monatsübersicht: immer 7 Spalten (Mo–So), auch auf dem Handy – ein Monat ergibt nur als
   Raster Sinn. Die Kacheln sind daher bewusst knapp gehalten. */
.monthgrid { display: grid; grid-template-columns: repeat(7, 1fr); gap: .2rem; margin-top: 1rem; }
.monthhead { text-align: center; font-size: .75rem; font-weight: 700; color: var(--muted); padding: .2rem 0; }
.monthday {
  position: relative; display: flex; align-items: center; justify-content: center;
  min-height: 46px; padding: .2rem; border: 2px solid var(--border); border-radius: 8px;
  text-decoration: none; color: var(--ink); font-variant-numeric: tabular-nums;
}
.monthday:hover { border-color: var(--green); }
.monthday-num { font-weight: 600; font-size: .95rem; }
.monthday-count {
  position: absolute; top: 2px; right: 3px;
  font-size: .7rem; font-weight: 700; line-height: 1;
  color: var(--muted);
}
.monthday.is-outside { opacity: .35; }
.monthday.is-past { opacity: .55; }
.monthday.is-outside.is-past { opacity: .3; }
.monthday.is-today { box-shadow: 0 0 0 2px var(--green); font-weight: 800; }

.weeklegend { display: flex; flex-wrap: wrap; gap: .4rem 1.1rem; margin-top: 1rem; font-size: .88rem; color: var(--muted); }
.weeklegend-dot {
  display: inline-block; width: 14px; height: 14px; border-radius: 4px;
  border: 2px solid var(--border); vertical-align: -2px; margin-right: .25rem;
}

/* Slot-Liste */
.slotlist { list-style: none; margin: 1rem 0 0; padding: 0; display: grid; gap: .4rem; }
.slot {
  display: grid; grid-template-columns: 56px 1fr auto; align-items: center; gap: .75rem;
  padding: .55rem .7rem; border: 1px solid var(--border); border-radius: 10px; background: #fff;
  transition: border-color .12s ease, box-shadow .12s ease;
}
.slot.is-past { opacity: .5; }
.slot.is-exclusive { background: #fbf7f0; }
.slot:hover { border-color: var(--green); box-shadow: 0 0 0 1px var(--green); }
.slot.is-past:hover { border-color: var(--border); box-shadow: none; }
.slot-time { font-variant-numeric: tabular-nums; font-weight: 700; color: #374151; }
/* Endzeit eines zusammengefassten Zeitraums: unter der Startzeit, damit die schmale
   Zeitspalte (56px, mobil 48px) nicht breiter werden muss. */
.slot-time-bis { display: block; font-weight: 700; font-size: .8rem; color: #374151; }
/* Halbe Stunde, die innerhalb derselben Stunde vom Segment darüber abweicht: eingerückt und
   kleiner, damit die volle Stunde die führende Zeile bleibt. */
.slot-sub {
  margin-left: 1.25rem; background: #fbfaf7; border-style: dashed;
  padding-top: .4rem; padding-bottom: .4rem;
}
.slot-sub .slot-time { font-weight: 500; font-size: .9rem; color: var(--muted); }
.slot-sub .chip { font-size: .8rem; }
/* Buchung, die aus der Zeile darüber weiterläuft: nur als Kontext, nicht als Neuigkeit. */
.chip-cont { background: #fafaf8; border-style: dashed; }
.chip-cont .chip-name { font-weight: 400; color: var(--muted); }
.chip-cont .chip-horse { color: var(--muted); font-weight: 400; }
/* Mehrere Buchungen im selben Zeitfenster stehen untereinander (nicht nebeneinander):
   bei bis zu 4 Reitern gleichzeitig bleibt so auf jeder Breite ablesbar, wer gebucht hat. */
.slot-body { display: flex; flex-direction: column; align-items: flex-start; gap: .3rem; min-height: 1.5rem; }
.slot-empty {
  display: inline-block; background: var(--green-soft); color: var(--green-dark);
  font-size: .8rem; font-weight: 700; padding: .15rem .5rem; border-radius: 999px;
}
/* Vergangener Zeitraum: kein grüner Badge – "vorbei" ist keine buchbare Einladung.
   Größe/Gewicht wie die Endzeit (.slot-time-bis) davor, damit beide als Einheit wirken. */
.slot-empty-past { background: none; color: #374151; font-weight: 700; font-size: .8rem; padding: 0; }
.slot-side { display: flex; align-items: center; gap: .5rem; }

.chip {
  display: inline-flex; align-items: center; gap: .4rem; max-width: 100%;
  padding: .2rem .55rem; border: 1px solid var(--border); border-radius: 999px; background: #fff; font-size: .85rem;
}
.chip-exclusive { background: var(--warn-soft); border-color: #ecdca6; }
/* Freigabe-Formular (Verwaltung → Freigaben): Grundfeld und Knopf nebeneinander. */
.reject-form { display: flex; gap: .4rem; align-items: center; flex-wrap: wrap; margin: 0; }
.reject-form input { font: inherit; font-size: 1rem; padding: .4rem .6rem; border: 1px solid var(--border); border-radius: 8px; min-width: 14rem; }
.chip-name { font-weight: 600; }
.chip-horse { color: var(--green-dark); font-weight: 500; white-space: nowrap; }
.chip-name-link { text-decoration: none; color: inherit; }
.chip-name-link:hover .chip-name { text-decoration: underline; color: var(--green-dark); }
.chip-act { color: var(--muted); }

.cap-badge { font-size: .8rem; font-weight: 700; padding: .15rem .5rem; border-radius: 999px; }
.cap-ok { background: var(--green-soft); color: var(--green-dark); }
.cap-full { background: var(--danger-soft); color: var(--danger); }

/* Admin */
.admin-menu-group { margin-top: 1.5rem; }
.admin-menu-group:first-of-type { margin-top: 1rem; }
.admin-menu-heading {
  font-size: 1.05rem; font-weight: 700; letter-spacing: .01em;
  color: var(--ink); margin: 0 0 .6rem;
}
.admin-menu { display: flex; gap: .75rem; flex-wrap: wrap; }
.act-list { display: grid; gap: .5rem; margin: 1rem 0; }
.act-card {
  display: flex; align-items: center; gap: .6rem; flex-wrap: wrap;
  padding: .6rem .7rem; border: 1px solid var(--border); border-radius: 10px; background: #fff;
}
.act-card.is-inactive { opacity: .55; }
.act-card.is-dragging { opacity: .4; }
.act-card.drag-over { border-color: var(--green); box-shadow: 0 0 0 1px var(--green); }
.drag-handle { cursor: grab; color: var(--muted); font-size: 1.2rem; line-height: 1; padding: 0 .2rem; flex: none; user-select: none; touch-action: none; }
.drag-handle:active { cursor: grabbing; }
.act-edit { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; margin: 0; }
.act-edit input[type="color"] { width: 40px; height: 34px; padding: 0; border: 1px solid var(--border); border-radius: 8px; background: #fff; }
.act-name { min-width: 160px; }
.act-edit input[type="number"] { width: 70px; }
.check { display: inline-flex; align-items: center; gap: .5rem; font-weight: 500; }
/* "eingeloggt bleiben" am Login. Mit .form davor notiert, sonst überstimmt
   `.form label { display: grid }` das inline-flex von .check und stapelt Kästchen und Text.
   min-height für eine fingergerechte Tippfläche (Richtwert 44px). */
.form label.check.remember { display: inline-flex; min-height: 44px; justify-self: start; }
.check.inline { font-weight: 600; }
.check input[type="checkbox"] { width: 1.4em; height: 1.4em; flex: none; accent-color: var(--green); }
.units { display: inline-flex; align-items: center; gap: .4rem; }
.act-card .inline-form { margin-left: auto; }

/* Aktivitäten-Liste (nur diese Seite, nicht die act-card-Nutzung bei Produkten/Anlagen):
   CSS-Grid mit fester Spaltenbreite statt Flexbox – bewusst NACH .act-card notiert, damit
   display:grid dessen display:flex überstimmt (gleiche Selektor-Spezifität, Reihenfolge
   entscheidet). Mit flex-grow verteilte sich der Platz je nach Textlänge der jeweiligen Zeile –
   dadurch stimmten Kopf und Werte nie zuverlässig überein. Grid-Spalten sind unabhängig vom
   Inhalt fix, Kopf und Zeilen teilen dasselbe Template. Der Bearbeiten-Formular-Zustand bleibt
   bewusst bei der alten Flex-Zeile (andere Feldanzahl, keine Ausrichtung nötig). */
/* Kopf und Zeilen sind SEPARATE Grid-Container (kein gemeinsames Elternelement) – eine "auto"-
   oder minmax(...,1fr)-Spalte bemisst sich am eigenen Inhalt JEDES Containers für sich. Die
   Kopfzeile hat in der letzten Spalte keinen Inhalt, die Datenzeilen die beiden Knöpfe – bei
   "auto" bekäme "Platzbedarf" dadurch in Kopf und Zeile unterschiedlich viel Platz zugeteilt und
   die Spalten verschieben sich gegeneinander. Deshalb sind ab Spalte 3 alle Breiten fix in Pixeln
   statt inhaltsabhängig (fr/auto/minmax) – garantiert identische Spaltengrenzen in jeder Zeile. */
.act-row {
  display: grid; align-items: center; column-gap: .6rem;
  grid-template-columns: 12px 200px 1fr 100px 230px;
}
.act-list-head {
  margin-top: 1rem; padding: 0 .7rem;
  font-size: .78rem; font-weight: 700; text-transform: uppercase; letter-spacing: .02em;
  color: var(--muted);
}
.act-list-head-dot { width: 12px; }
.act-row-actions { display: flex; gap: .5rem; justify-self: end; }

/* Kompakte Admin-Listenzeilen (Produkte, Anlagen, …): eine Zeile je Eintrag. "Bearbeiten" lädt
   dieselbe Seite mit ?bearbeiten=<id> neu und ersetzt die Textfelder der betroffenen Zeile direkt
   durch Eingabefelder (kein zusätzliches Formular darunter) – ganz ohne JavaScript, per
   Server-Rendering. Modifier-Klassen (-name/-narrow/-num/-wide) sind seitenübergreifend gleich,
   damit neue Listen (z. B. Anlagen) dasselbe Erscheinungsbild wie Produkte bekommen. */
.list-row { flex-wrap: wrap; font-size: .88rem; }
.list-view { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.list-view-name { font-weight: 600; flex: 1 1 140px; min-width: 90px; max-width: 240px; }
.list-view-narrow { color: var(--muted); flex: 0 1 70px; min-width: 50px; }
.list-view-num { font-variant-numeric: tabular-nums; font-weight: 600; flex: 0 0 auto; min-width: 60px; }
.list-view-wide { color: var(--muted); flex: 1 1 160px; min-width: 60px; }
.list-view-wide.is-empty { color: #9aa0a6; }
.list-input, select.list-input {
  font: inherit; font-size: .88rem; padding: .35rem .5rem; border: 1px solid var(--border);
  border-radius: 8px; background: #fff; color: var(--ink);
}
.list-input-name { flex: 1 1 140px; min-width: 100px; }
.list-input-narrow { flex: 0 1 90px; min-width: 70px; }
.list-input-num { flex: 0 1 90px; min-width: 70px; }
.list-input-wide { flex: 1 1 180px; min-width: 100px; }
.list-input-color { flex: 0 0 42px; width: 42px; height: 32px; padding: 2px; }
.list-check { flex: none; font-size: .88rem; font-weight: 500; }
.list-row .btn-sm { flex: none; }
.list-row .dot { flex: none; }
.list-row .units { flex: none; display: inline-flex; align-items: center; gap: .4rem; }

/* Tabellen (falls verwendet) */
.table-wrap { overflow-x: auto; }

/* Historien auf der Nutzer-Detailseite (Buchungen, Bestellungen, Anmeldungen) */
.hist-sub { font-size: .95rem; font-weight: 700; color: var(--muted); margin: .8rem 0 .4rem; }
.hist-list { list-style: none; margin: 0; padding: 0; display: grid; gap: .25rem; }
.hist-row {
  display: flex; align-items: center; gap: .5rem 1rem; flex-wrap: wrap;
  padding: .4rem .6rem; border: 1px solid var(--border); border-radius: 8px; background: #fff;
  font-size: .9rem;
}
.hist-row.is-canceled { opacity: .55; }
.hist-when { font-variant-numeric: tabular-nums; font-weight: 600; min-width: 8.5rem; }
.hist-time { font-variant-numeric: tabular-nums; color: var(--muted); }
.hist-what { display: flex; align-items: center; gap: .4rem; flex-wrap: wrap; }
.hist-sum { margin-left: auto; font-weight: 700; font-variant-numeric: tabular-nums; }

/* Personen (Freigaben / Reiter) */
.people-list { display: grid; gap: .6rem; margin: 1rem 0; }
.person-card {
  padding: .8rem .9rem; border: 2px solid #cec6ac; border-radius: 10px; background: #fff;
  transition: background-color .12s ease, border-color .12s ease, box-shadow .12s ease;
}
/* Hover hebt den kompletten Nutzerblock hervor – bei langen Listen sonst schwer zu erkennen,
   welche Zeilen (Kopf, Kontaktdaten, Rollenformular) noch zum selben Nutzer gehören. */
.person-card:hover { background: #faf9f4; border-color: var(--green); box-shadow: 0 0 0 1px var(--green); }
.person-card:hover .roles-form { background: #eef4f0; }
.person-card.is-inactive { opacity: .6; }
.person-card.is-inactive:hover { opacity: .8; }
.person-head { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; margin-bottom: .3rem; }
.person-meta { display: flex; gap: .5rem 1rem; flex-wrap: wrap; color: #374151; font-size: .9rem; margin-bottom: .5rem; }
.approve-form { display: grid; gap: .5rem; margin: .3rem 0; }
.approve-form input[name="versicherung_note"] { padding: .5rem .6rem; border: 1px solid var(--border); border-radius: 8px; max-width: 360px; }

.badge { font-size: .72rem; font-weight: 700; padding: .12rem .5rem; border-radius: 999px; text-transform: uppercase; letter-spacing: .02em; }
.badge-pending { background: var(--warn-soft); color: #92600b; }
.badge-blocked { background: var(--danger-soft); color: var(--danger); }
.badge-fremdreiter { background: #eef2ff; color: #3730a3; }
.badge-einsteller { background: var(--green-soft); color: var(--green-dark); }
.badge-role { background: #eef2ff; color: #3730a3; }
/* Bestellung ohne Berechnung (Rolle BSF) – bewusst neutral, nicht wie eine Statusmeldung. */
.badge-free { background: var(--green-soft); color: var(--green-dark); }
.badge-status-bestellt { background: var(--info-soft); color: #2c5aa0; }
.badge-status-in_arbeit { background: var(--warn-soft); color: #92600b; }
.badge-status-ausgeliefert { background: var(--ok-soft); color: var(--green-dark); }
.badge-status-storniert { background: var(--danger-soft); color: var(--danger); }

/* ============================================================
   Bestellmodul
   Eigene Klassen (prod-/day-/ord-), damit das Hallen-Modul unberührt bleibt.
   ============================================================ */

/* --- Produktauswahl im Bestellformular --- */
.prod-list { display: grid; gap: .6rem; margin: .75rem 0 0; }
.prod-card {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: .85rem 1rem; border: 1px solid var(--border); border-radius: var(--radius);
  background: #fff; transition: border-color .12s ease, box-shadow .12s ease;
}
/* Sobald eine Menge > 0 gewählt ist, hebt sich die Karte hervor. */
.prod-card.has-qty { border-color: var(--green); box-shadow: 0 0 0 1px var(--green); }
.prod-info { display: grid; gap: .15rem; min-width: 0; }
.prod-name { font-weight: 600; }
.prod-desc { color: var(--muted); font-size: .88rem; }
.prod-price { font-size: .92rem; font-weight: 600; color: #374151; }

/* Mengen-Stepper (− Zahl +). Das Zahlenfeld bleibt erhalten – ohne JS voll bedienbar. */
.stepper { display: flex; align-items: center; gap: .45rem; flex: none; }
.stepper-btn {
  width: 34px; height: 34px; flex: none; display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--border); border-radius: 999px; background: #fff;
  font: inherit; font-size: 1.25rem; line-height: 1; color: var(--ink); cursor: pointer;
}
.stepper-btn:hover { background: var(--green-soft); border-color: var(--green); }
.stepper input[type="number"] {
  width: 3.5rem; padding: .35rem .25rem; text-align: center;
  font: inherit; font-weight: 600; font-variant-numeric: tabular-nums;
  border: 1px solid var(--border); border-radius: 8px; background: #fff; color: var(--ink);
}
/* Native Zahlenfeld-Pfeile ausblenden – gesteuert wird ausschließlich über − und +. */
.stepper input[type="number"] { -moz-appearance: textfield; appearance: textfield; }
.stepper input[type="number"]::-webkit-outer-spin-button,
.stepper input[type="number"]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.stepper input[type="number"]:focus { outline: 2px solid var(--green-soft); border-color: var(--green); }
/* Feste Breite für die Einheit: sonst verschiebt ein längerer Name ("Umsetzen" vs. "Ballen")
   den ganzen Stepper und die −/+-Knöpfe stehen von Zeile zu Zeile unterschiedlich weit rechts. */
.stepper-unit {
  color: var(--muted); font-size: .85rem;
  flex: 0 0 5.5rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* --- Bestellung ändern: Positionszeilen ---
   Beschriftung und Eingabefeld sollen nebeneinander stehen. Die Regeln sind bewusst mit .form
   davor notiert: sonst greift `.form label { display: grid }` und stapelt "Menge" bzw. die
   Entfernen-Box über ihr Feld. */
.edit-row.is-delivered { background: var(--green-soft); border-color: #8fbfa3; }
.edit-side { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; flex: none; }
.edit-fixed { color: var(--muted); font-size: .9rem; white-space: nowrap; }
.form .edit-field, .form .edit-remove {
  display: inline-flex; align-items: center; gap: .45rem; margin: 0;
  font-size: .9rem; white-space: nowrap;
}
.form .edit-field { font-weight: 600; }
.form .edit-remove { font-weight: 500; color: var(--muted); }
.form .edit-field input[type="number"] {
  width: 4.2rem; text-align: center; font-variant-numeric: tabular-nums;
}
.form .edit-field input[type="date"] { width: auto; }
.form .edit-remove input[type="checkbox"] {
  width: 1.2em; height: 1.2em; flex: none; accent-color: var(--green);
}

/* --- Wunschtermin-Auswahl --- */
.dayopts { display: grid; gap: .4rem; margin-top: .5rem; }
.dayopt {
  display: flex; align-items: center; justify-content: space-between; gap: .75rem;
  padding: .6rem .85rem; border: 1px solid var(--border); border-radius: 10px;
  background: #fff; cursor: pointer; font-weight: 500;
}
.dayopt:hover { background: #f6f5f0; }
.dayopt input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.dayopt.is-active { background: var(--green); border-color: var(--green); color: #fff; }
.dayopt.is-active:hover { background: var(--green-dark); }
.dayopt-extra { font-size: .82rem; font-weight: 700; color: #92600b; white-space: nowrap; }
.dayopt.is-active .dayopt-extra { color: rgba(255, 255, 255, .88); }

/* Hinweisbox (z. B. Zuschlagsregeln) */
.notice {
  padding: .75rem .9rem; border-radius: 10px; font-size: .9rem; margin-top: 1rem;
  background: var(--warn-soft); border: 1px solid #ecdca6; color: #7a5109;
}

/* --- Live-Zusammenfassung am Fuß des Bestellformulars --- */
.ordersum {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap;
  margin-top: 1.25rem; padding-top: 1rem; border-top: 1px solid var(--border);
}
.ordersum-figures { display: grid; gap: .1rem; }
.ordersum-count { color: var(--muted); font-size: .9rem; }
.ordersum-extra { color: #92600b; font-size: .85rem; font-weight: 600; }
.ordersum-total { font-size: 1.35rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.btn:disabled { opacity: .45; cursor: not-allowed; }

/* --- Bestellkarten (Kunde + Verwaltung) ---
   Kräftiger Statusrahmen wie in der Vorgänger-App: die Farbe trägt die Information. */
.order-list { display: grid; gap: .85rem; margin: 1rem 0; }
.order-card {
  border: 3px solid var(--border); border-radius: var(--radius);
  padding: 1rem; background: #fff; box-shadow: 0 1px 2px rgba(0, 0, 0, .04);
}
.order-card.status-in_arbeit { background: #fde6b8; border-color: #e2a63a; }
.order-card.status-ausgeliefert { background: var(--ok-soft); border-color: #8fbfa3; }
.order-card.status-storniert { background: #fdf4f3; border-color: #e0a9a4; }
.order-head { display: flex; align-items: flex-start; justify-content: space-between; flex-wrap: wrap; gap: .5rem; margin-bottom: .5rem; }
.order-head-right { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; }
.order-no { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-weight: 700; }
.order-meta { display: grid; gap: .15rem; color: var(--muted); font-size: .88rem; }

/* Bestellkopf (Verwaltung und Nutzeransicht gleich gestaffelt): Name und Termin sind die
   Arbeitsinformationen und deshalb groß, alles Übrige (Bestelldatum, Nummer, Anleger) ist
   Beleg-Angabe und tritt zurück. */
.order-person strong { font-size: 1.25rem; font-weight: 700; color: var(--ink); }
.order-wish { font-size: 1.1rem; font-weight: 700; color: var(--ink); }
.order-sub { font-size: .85rem; font-weight: 400; color: var(--muted); }
/* Die Bestellnummer erbt sonst font-weight 700 aus .order-no. */
.order-sub.order-no { font-weight: 400; }

/* Positionsliste innerhalb einer Bestellkarte */
.ord-items { list-style: none; margin: .75rem 0 0; padding: .6rem 0 0; display: grid; gap: .12rem; border-top: 1px solid var(--border); }
.ord-item { display: flex; align-items: center; justify-content: space-between; gap: .75rem; padding: .3rem .4rem; border-radius: 8px; font-size: .93rem; transition: background-color .12s ease; }
/* Hover hebt die überfahrene Position hervor – hilft beim Abhaken langer Bestellungen. */
.ord-item:hover { background: #efeee8; }
.ord-item.is-delivered:hover { background: #d9ebe0; }
.ord-item-main { display: flex; align-items: center; gap: .5rem; min-width: 0; }
.ord-item-qty { flex: none; color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.ord-item.is-delivered { background: var(--green-soft); }
.ord-item.is-delivered, .ord-item.is-delivered .ord-item-qty { color: var(--green-dark); }
.ord-item-note { font-size: .8rem; color: var(--green-dark); padding: 0 .4rem .25rem 1.75rem; }

/* Betragszeilen (Zuschlag / Gesamt) */
.ord-line { display: flex; justify-content: space-between; gap: .75rem; padding: .3rem .4rem; font-size: .93rem; font-variant-numeric: tabular-nums; }
.ord-line-extra { color: #92600b; font-weight: 600; }
.ord-line-total { margin-top: .3rem; padding-top: .5rem; border-top: 1px solid var(--border); font-size: 1.02rem; font-weight: 700; }
.ord-note { font-size: .9rem; color: var(--muted); font-style: italic; margin: .6rem 0 0; }

/* Interne Notiz je Bestellung: speichert beim Verlassen des Feldes automatisch. */
.intnote { margin-top: .85rem; padding-top: .6rem; border-top: 1px solid var(--border); display: grid; gap: .3rem; }
.intnote-label {
  display: flex; align-items: center; gap: .6rem; flex-wrap: wrap;
  color: var(--muted); font-size: .78rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: .03em;
}
.intnote-saved { color: var(--green-dark); font-weight: 700; text-transform: none; letter-spacing: 0; font-size: .85rem; }
.intnote-saved.is-error { color: var(--danger); }
.intnote-field {
  font: inherit; font-size: .9rem; width: 100%; padding: .5rem .6rem; resize: vertical;
  border: 1px solid var(--border); border-radius: 8px; background: #fff; color: var(--ink);
}
.intnote-field:focus { outline: 2px solid var(--green-soft); border-color: var(--green); }
.ord-note-danger { color: var(--danger); font-style: italic; margin: .6rem 0 0; font-size: .9rem; }
.ord-actions { display: flex; gap: .5rem; flex-wrap: wrap; align-items: center; margin-top: .85rem; }
/* Das Liefer-Formular trägt kein .form, daher greifen dessen Feldstile hier nicht – ohne diese
   Regel bleibt das Datumsfeld ein unformatiertes Systemfeld (nur ~22px hoch, zu klein zum Tippen). */
.ord-actions input[type="date"] {
  font: inherit; font-size: 1rem; padding: .45rem .55rem; color: var(--ink);
  border: 1px solid var(--border); border-radius: 8px; background: #fff;
}
.ord-actions input[type="date"]:focus { outline: 2px solid var(--green-soft); border-color: var(--green); }

/* Filterleiste als Chips (Status) */
.chip-row { display: flex; gap: .35rem; flex-wrap: wrap; align-items: center; }
.chip-link {
  display: inline-block; padding: .3rem .75rem; border: 1px solid var(--border); border-radius: 999px;
  background: #fff; color: var(--muted); font-size: .88rem; font-weight: 500; text-decoration: none;
}
.chip-link:hover { background: #f6f5f0; }
.chip-link.active { background: var(--green-soft); border-color: #9cc5ae; color: var(--green-dark); font-weight: 700; }
.filter-label { color: var(--muted); font-size: .88rem; font-weight: 600; min-width: 3.5rem; }
.filter-row { display: flex; gap: .6rem; align-items: center; flex-wrap: wrap; margin-bottom: .6rem; }

/* Zusammenklappbarer Block in der Verwaltung. Bewusst als <details>: der Browser verwaltet den
   Zustand selbst, es braucht kein JavaScript und die Tastaturbedienung ist eingebaut. */
.admin-collapse { border: 1px solid var(--border); border-radius: 10px; background: #fff; margin-top: 1rem; }
.admin-collapse > summary {
  cursor: pointer; display: flex; align-items: center; gap: .5rem; flex-wrap: wrap;
  padding: .7rem .9rem; min-height: 44px; /* Fingergröße auf dem Handy */
  font-weight: 600; border-radius: 10px; list-style: none;
}
.admin-collapse > summary::-webkit-details-marker { display: none; }
.admin-collapse > summary::before { content: '▸'; color: var(--green); font-size: .9rem; }
.admin-collapse[open] > summary::before { content: '▾'; }
.admin-collapse > summary:hover { background: #f7f6f2; }
.admin-collapse[open] > summary { border-bottom: 1px solid var(--border); border-radius: 10px 10px 0 0; }
.admin-collapse-hint { font-weight: 400; font-size: .85rem; color: var(--muted); }
.admin-collapse-body { padding: .8rem .9rem .9rem; }
/* Die Summenzeile ist die letzte Zeile im Block – kein zusätzlicher Abstand nach unten. */
.admin-collapse-body .summary { margin-bottom: 0; }

.booking-item.is-delivered { background: var(--ok-soft); border-color: #bcd8c7; }

.person-actions { display: flex; gap: 1rem; align-items: center; flex-wrap: wrap; margin-top: .4rem; }
.roles-form { display: flex; gap: .8rem; align-items: center; flex-wrap: wrap; margin: 0; padding: .5rem .6rem; background: #f7f6f2; border-radius: 8px; }
.role-check { font-weight: 600; }
.guardian-meta { margin-top: -.2rem; }
.person-link { text-decoration: none; color: inherit; }
.person-link:hover strong { text-decoration: underline; }

/* Datentabelle (Präsenz) */
.datatable { width: 100%; border-collapse: collapse; font-size: .92rem; }
.datatable th, .datatable td { text-align: left; padding: .5rem .6rem; border-bottom: 1px solid var(--border); vertical-align: top; }
.datatable th { color: var(--muted); font-size: .8rem; text-transform: uppercase; letter-spacing: .03em; }

/* Sortierbare Tabellenköpfe: der ganze Kopf ist ein Link, die aktive Spalte hervorgehoben. */
.th-sort { padding: 0 !important; }
.th-sort a {
  display: block; padding: .5rem .6rem; text-decoration: none; color: inherit; white-space: nowrap;
}
.th-sort a:hover { background: #f0efe9; color: var(--green-dark); }
.th-sort.is-active a { color: var(--green-dark); }
.th-arrow { font-size: .75em; }
.nowrap { white-space: nowrap; }
.datatable tr.row-inactive { opacity: .5; }

/* Nutzer-Suche & Rollen-Filter */
.user-filter { display: flex; flex-wrap: wrap; gap: .6rem; align-items: center; margin: .5rem 0 1rem; }
#userSearch { flex: 1 1 220px; min-width: 180px; font: inherit; padding: .55rem .7rem; border: 1px solid var(--border); border-radius: 10px; background: #fff; }
#userSearch:focus { outline: 2px solid var(--green-soft); border-color: var(--green); }
.role-filters { display: flex; gap: .35rem; flex-wrap: wrap; }
.chip-btn { font: inherit; font-size: .85rem; font-weight: 600; padding: .35rem .7rem; border: 1px solid var(--border); border-radius: 999px; background: #fff; color: var(--ink); cursor: pointer; }
.chip-btn:hover { background: #f6f5f0; }
.chip-btn.active { background: var(--green); border-color: var(--green); color: #fff; }

/* Personen-Live-Suche (z. B. Rundmail: Einzelperson auswählen) */
.user-picker { position: relative; display: grid; gap: .5rem; }
.user-picker input[type="search"] {
  font: inherit; padding: .6rem .7rem; border: 1px solid var(--border); border-radius: 10px; background: #fff; width: 100%;
}
.user-picker input[type="search"]:focus { outline: 2px solid var(--green-soft); border-color: var(--green); }
.user-picker-list {
  position: absolute; z-index: 30; top: 3.1rem; left: 0; right: 0;
  max-height: 260px; overflow-y: auto; background: #fff; border: 1px solid var(--border);
  border-radius: 10px; box-shadow: var(--shadow); padding: .3rem;
}
.user-picker-item {
  display: block; width: 100%; text-align: left; padding: .55rem .6rem; border: 0; background: none;
  border-radius: 8px; cursor: pointer; font: inherit; color: var(--ink);
}
.user-picker-item:hover { background: var(--green-soft); }

/* Desktop: Menü mittig statt rechts, Burger aus, Sekundär-Links direkt in der Leiste */
@media (min-width: 700px) {
  .topbar { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; }
  .topbar .topnav { grid-column: 2; justify-self: center; }
  .topbar .account-actions { grid-column: 3; justify-self: end; }
  .nav-desktop { display: inline-flex; align-items: center; gap: .25rem; }
  .burger, .burger-panel { display: none !important; }
  /* Wochenübersicht ab hier als echte Wochenspalten. */
  .weekgrid { grid-template-columns: repeat(7, 1fr); gap: .4rem; }
  .weekday > a { padding: .6rem .5rem; }
  .weekday-status { font-size: .85rem; }
  .weekday-info { font-size: .78rem; }
}

/* Abrechnung */
.filterbar { display: flex; gap: 1rem; align-items: end; flex-wrap: wrap; margin: 1rem 0; }
.filterbar label { display: grid; gap: .3rem; font-weight: 600; font-size: .9rem; }
.filterbar select, .filterbar input { font: inherit; padding: .5rem .6rem; border: 1px solid var(--border); border-radius: 8px; }
/* align-items nötig: ohne es strecken sich alle Knöpfe (Flex-Standard "stretch") auf die Höhe
   des höchsten – sobald ein Beschriftungstext auf schmalen Displays umbricht, werden dadurch
   ALLE Knöpfe unnötig hoch. flex-wrap, damit sie stattdessen sauber umbrechen. */
.filterbar-actions { display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; }
.billing-actions { display: flex; gap: .5rem; flex-wrap: wrap; margin-bottom: 1rem; }
.summary { background: var(--green-soft); padding: .6rem .9rem; border-radius: 8px; }
.bill-group { margin: 1.25rem 0; }
.bill-name { font-size: 1.05rem; margin: 0 0 .5rem; padding-bottom: .3rem; border-bottom: 2px solid var(--border); }
.datatable tfoot td { border-top: 2px solid var(--border); border-bottom: none; }
.right { text-align: right; }
.print-title { display: none; }

/* Honeypot (Spamschutz) – für Menschen unsichtbar */
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* Rollen-Auswahl bei der Registrierung ("Ich bin …"): jede Option eine eigene Fläche, damit
   die beiden Möglichkeiten klar getrennt sind. Die Regeln stehen bewusst mit .form davor –
   sonst greift `.form label { display: grid }` und stapelt Kästchen, Titel und Beschreibung
   untereinander (und macht die Beschreibung fett mit). */
.rolepick { display: grid; gap: .5rem; }
.form .rolepick-item {
  display: flex; align-items: flex-start; gap: .7rem; margin: 0;
  padding: .7rem .8rem; border: 1px solid var(--border); border-radius: 10px;
  background: #fff; cursor: pointer; font-weight: 400; font-size: 1rem;
}
.form .rolepick-item:hover { border-color: var(--green); background: #f9fbf8; }
/* Angekreuzte Option deutlich hervorheben. */
.form .rolepick-item:has(input:checked) {
  border-color: var(--green); background: var(--green-soft); box-shadow: 0 0 0 1px var(--green);
}
.form .rolepick-item input[type="checkbox"] {
  width: 1.4em; height: 1.4em; flex: none; margin-top: .1rem; accent-color: var(--green);
}
.rolepick-text { display: grid; gap: .2rem; }
.rolepick-title { font-weight: 600; }
.rolepick-desc { color: var(--muted); font-size: .9rem; font-weight: 400; }

/* Erziehungsberechtigte(r) */
.guardian { border: 1px solid var(--border); border-radius: 10px; padding: 1rem; display: grid; gap: 1rem; margin: 0; }
.guardian legend { font-weight: 600; padding: 0 .4rem; }

/* Pferde */
.horse-list { display: grid; gap: .8rem; margin: 1rem 0; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
.horse-card { display: flex; gap: .8rem; padding: .7rem; border: 1px solid var(--border); border-radius: 10px; background: #fff; }
.horse-photo { flex: none; width: 96px; height: 96px; border-radius: 8px; overflow: hidden; background: #f0efe9; display: flex; align-items: center; justify-content: center; }
.horse-photo img { width: 100%; height: 100%; object-fit: cover; cursor: zoom-in; }
.horse-nophoto { color: #9aa0a6; font-size: .8rem; text-align: center; }
.horse-info { display: flex; flex-direction: column; gap: .25rem; min-width: 0; }
.photo-form { display: flex; gap: .4rem; align-items: center; flex-wrap: wrap; margin: .3rem 0 0; }
.photo-form input[type="file"] { font-size: .8rem; max-width: 100%; }

/* Bild-Lightbox (Pferdefotos u. a.) */
.lightbox-overlay {
  position: fixed; inset: 0; z-index: 200; display: flex; align-items: center; justify-content: center;
  padding: 2rem; background: rgba(15, 15, 15, .82);
  opacity: 0; pointer-events: none; transition: opacity .15s ease;
}
.lightbox-overlay.open { opacity: 1; pointer-events: auto; }
.lightbox-img { max-width: min(92vw, 630px); max-height: 90vh; border-radius: 12px; box-shadow: 0 10px 40px rgba(0, 0, 0, .45); }
.lightbox-close {
  position: absolute; top: 1rem; right: 1.2rem; width: 40px; height: 40px;
  border: 0; border-radius: 999px; background: rgba(255, 255, 255, .92); color: #1f2937;
  font-size: 1.4rem; line-height: 1; cursor: pointer;
}
body.lightbox-lock { overflow: hidden; }

/* Bestellbestätigung (nutzt die Overlay-Basis der Bild-Lightbox) */
.confirm-overlay { padding: 1rem; }
.confirm-box {
  background: #fff; border-radius: var(--radius); box-shadow: var(--shadow);
  padding: 1.5rem; max-width: 440px; width: 100%; max-height: 90vh; overflow-y: auto;
}
.confirm-items { list-style: none; margin: .75rem 0; padding: 0; display: grid; gap: .35rem; }
.confirm-items li { display: flex; justify-content: space-between; gap: .5rem; font-size: .95rem; }
.confirm-total { font-size: 1.1rem; margin-top: .75rem; padding-top: .5rem; border-top: 1px solid var(--border); }

/* Gesperrter Slot (Sperrzeit) */
.slot.is-blocked { background: #f4f2ef; }
.chip-blocked { background: #efeae2; border-color: #ddd4c6; color: #6b5d45; }

@media print {
  .topbar, .footer, .no-print, .billing-actions, .filterbar, .crumb { display: none !important; }
  .print-title { display: block; font-weight: 700; font-size: 1.1rem; margin-bottom: .75rem; }
  .card { box-shadow: none; border: none; padding: 0; margin: 0; }
  body { background: #fff; }
  .bill-group { break-inside: avoid; }
}

@media (max-width: 560px) {
  /* Produktkarte stapeln: nebeneinander bliebe für den Namen zu wenig Platz. */
  .prod-card { flex-direction: column; align-items: stretch; gap: .7rem; }
  .prod-card .stepper { justify-content: flex-end; }
  .grid2 { grid-template-columns: 1fr; }
  .brand-name { font-size: .95rem; }
  .slot { grid-template-columns: 48px 1fr; }
  .slot-side { grid-column: 2; justify-content: flex-end; }
  /* Auf dem Handy nur leicht einrücken – 1,25rem würden vom knappen Platz zu viel wegnehmen. */
  .slot-sub { margin-left: .5rem; }
  /* Pferdename nur im Hallenplan-Raster ausblenden: bei bis zu 4 Buchungen im selben
     Zeitfenster wird die Zeile auf dem Handy sonst unlesbar. Name und Aktivität bleiben.
     "Meine nächsten Buchungen" und das Profil behalten den Pferdenamen – dort steht je
     Zeile nur eine eigene Buchung. */
  .slotlist .chip-horse { display: none; }
  .act-name { min-width: 120px; }
  /* Zeitraum-Navigation und Umschalter passen nebeneinander nicht auf ein Handy-Display;
     gestapelt sehen sie zentriert besser aus als linksbündig. */
  .plan-head { justify-content: center; }
  .daynav { grid-template-columns: auto 150px auto; gap: .5rem; }
  /* Tages-Pfeile: werden am häufigsten getippt, daher auf Fingergröße (Richtwert 44px). */
  .daynav-arrow { font-size: 1.3rem; padding: .55rem .9rem; min-height: 44px; }

  /* Kein Auto-Zoom auf dem iPhone: jedes Eingabefeld mindestens 16px. Die klassenbasierten
     Felder müssen einzeln genannt werden – ein bloßes "input, select, textarea" wäre zu
     unspezifisch und würde von .filterbar/.list-input/.intnote-field überstimmt.
     Die kompaktere Schrift dort bleibt auf dem Desktop erhalten. */
  input, select, textarea,
  .filterbar input, .filterbar select,
  .list-input, select.list-input, .intnote-field { font-size: 16px; }

  /* Mengen-Stepper und Entfernen-Kästchen auf Fingergröße. Die Einheit bekommt dafür etwas
     weniger Platz, sonst passt die Zeile auf sehr schmalen Geräten (320px) nicht mehr.
     Feste Breite bleibt, damit die Stepper über alle Produktzeilen bündig stehen. */
  .stepper-btn { width: 44px; height: 44px; }
  .stepper input[type="number"] { height: 44px; }
  .stepper-unit { flex-basis: 4rem; }
  .form .edit-remove { padding: .5rem 0; }
  .form .edit-remove input[type="checkbox"] { width: 1.5em; height: 1.5em; }

  /* Das feste Spaltenraster der Aktivitäten-Liste (12+200+100+230px) passt nicht auf ein
     Handy-Display. Unter 560px zurück auf Umbruch statt Ausrichtung – eine bündige Kopfzeile
     bringt auf so wenig Platz ohnehin nichts und würde nur zu horizontalem Scrollen zwingen. */
  .act-row { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
  .act-list-head { display: none; }
  .act-row-actions { justify-self: unset; margin-left: auto; }
}