/* Hunters World, Schuelerbereich und Verwaltung.
   Ergaenzt styles.css, veraendert dort nichts. */

:root{
  /* Alles Ungelesene trägt dieselbe Farbe: der Punkt am Postfach, die
     Marke "neu" und der Punkt im Posteingang. Vorher war das teils
     grün, teils rot, teils golden und wirkte wie ein Fehler. */
  --hw-neu:#d4820a;
  --hw-s-offen:#9aa0a3;
  --hw-s-arbeit:#b8892f;
  --hw-s-fertig:#6B7A3F;
  --hw-s-rot:#a13b3b;
}

/* Halbhoher Bildkopf, damit der Fortschritt frueher sichtbar wird */
.hw-hero-schmal{ min-height:0 !important; }
.hw-hero-schmal .hero-inner{ padding-top:52px !important; padding-bottom:46px !important; }
.hw-hero-schmal h1{ font-size:clamp(30px,4vw,46px); }
.hw-hero-schmal .hero-lead{ margin-top:6px; }

/* Schlanker Kopf fuer die Arbeitsansichten der Verwaltung */
.hw-hero-schlicht{ min-height:0 !important; }
.hw-hero-schlicht::before, .hw-hero-schlicht::after{ display:none !important; }
.hw-hero-schlicht .hero-inner{ padding-top:16px !important; padding-bottom:14px !important; }
.hw-hero-schlicht h1{ font-size:clamp(19px,2.2vw,25px); margin:4px 0 2px; }
.hw-hero-schlicht .hero-lead{ font-size:12.5px; margin:0; opacity:.85; }
.hw-hero-schlicht .hero-eyebrow{ font-size:10px; padding:3px 10px; }

/* ---------------------------------------------------------- Bausteine */

.hw-karte{
  background:var(--hw-flaeche,#fff);
  border:.5px solid var(--hairline,#e2e5dd);
  border-radius:6px;
  padding:24px 22px;
  margin:0 0 18px;
}

.hw-feld{ display:flex; flex-direction:column; gap:7px; justify-content:flex-end; }
.hw-feld > span{
  font-size:12px; letter-spacing:1.6px; text-transform:uppercase;
  color:var(--hw-text-muted,#6d7370); font-weight:600;
  /* Damit ein- und zweizeilige Beschriftungen die Eingabefelder
     einer Reihe nicht gegeneinander verschieben. */
  line-height:1.35; align-self:flex-start;
}
.hw-feld input, .hw-feld select, .hw-feld textarea{
  padding:13px 14px;
  border:1px solid var(--hairline-strong,#cfd4c9);
  background:var(--hw-flaeche,#fff);
  font-family:inherit;
  font-size:15px;
  color:var(--hw-anthracite,#1A1F22);
  border-radius:4px;
  width:100%;
}
.hw-feld textarea{ resize:vertical; }

/* Geburtsdatum in drei Feldern: Tag, Monat, Jahr getippt. */
.hw-geburt-reihe{ display:flex; gap:8px; align-items:stretch; }
.hw-geburt-teil{ display:flex; flex:1 1 0; min-width:0; }
.hw-geburt-teil--breit{ flex:1.5 1 0; }
.hw-geburt-reihe select, .hw-geburt-reihe input{
  width:100%; padding:13px 10px;
  border:1px solid var(--hairline-strong,#cfd4c9);
  background:var(--hw-flaeche,#fff);
  font-family:inherit; font-size:15px; color:var(--hw-anthracite,#1A1F22);
  border-radius:4px;
}
.hw-geburt-reihe input{ text-align:center; letter-spacing:1px; }
.hw-geburt-reihe select:focus, .hw-geburt-reihe input:focus{
  outline:2px solid var(--hw-olive,#6B7A3F); outline-offset:1px; border-color:transparent;
}
.hw-feld input:focus, .hw-feld select:focus, .hw-feld textarea:focus{
  outline:2px solid var(--hw-olive,#6B7A3F); outline-offset:1px; border-color:transparent;
}

.hw-login{ display:flex; flex-direction:column; gap:16px; background:var(--hw-snow,#fafbf8); }
.hw-login-titel{ margin:0; font-size:22px; }
.hw-fehler{ color:var(--hw-s-rot); font-size:14px; margin:0; text-align:center; }
.hw-hinweis{ font-size:13px; color:var(--hw-text-muted,#6d7370); margin:22px 0 0; text-align:center; }
.hw-hinweis a{ color:var(--hw-olive,#6B7A3F); }

.hw-balken{
  height:8px; background:var(--hw-stone,#F2F4EF); border-radius:99px; overflow:hidden;
}
.hw-balken > i{ display:block; height:100%; background:var(--hw-olive,#6B7A3F); border-radius:99px; }
.hw-balken--gross{ height:12px; }
.hw-balken--klein{ height:5px; max-width:190px; margin-top:5px; }

/* ---------------------------------------------------------- Dashboard */

.hw-dash{ background:var(--hw-stone,#F2F4EF); padding-top:38px; }

.hw-uebersicht-kopf{
  display:flex; align-items:flex-start; justify-content:space-between; gap:16px; margin-bottom:14px;
}
.hw-name{ font-size:20px; font-weight:700; color:var(--hw-anthracite,#1A1F22); }
.hw-kurs{ font-size:14px; color:var(--hw-text-muted,#6d7370); margin-top:3px; }
.hw-prozent{ font-size:38px; font-weight:800; color:var(--hw-olive,#6B7A3F); line-height:1; }
.hw-prozent span{ font-size:18px; margin-left:2px; }
.hw-zaehlzeile{ font-size:13px; color:var(--hw-text-muted,#6d7370); margin-top:10px; }

/* ------------------------------------------------- Uebersicht */

.hw-schmal{ max-width:820px; }

.hw-stand{ padding:26px 24px; }
.hw-stand-satz{ margin:0 0 14px; font-size:22px; line-height:1.35; color:var(--hw-anthracite,#1A1F22); }
.hw-stand-satz strong{ color:var(--hw-olive,#6B7A3F); }
.hw-stand-fuss{
  display:flex; align-items:baseline; justify-content:space-between; gap:14px;
  margin-top:11px; flex-wrap:wrap;
}
.hw-stand-prozent{ font-size:15px; font-weight:700; color:var(--hw-olive,#6B7A3F); }
.hw-stand-kurs{ font-size:14px; color:var(--hw-text-muted,#6d7370); }

/* Überschriften in Karten sehen überall gleich aus. Vorher gab es zwei
   Sorten nebeneinander: große in gewöhnlicher Schrift und kleine in
   gesperrten Versalien. Das wirkte wie zwei verschiedene Programme. */
.hw-ueberschrift{
  margin:0 0 14px; font-size:18px; font-weight:700; letter-spacing:-.01em;
  text-transform:none; color:var(--hw-text,#22261f);
}

.hw-naechstes ul{ list-style:none; margin:0; padding:0; }
.hw-naechstes li{
  display:flex; align-items:flex-start; gap:13px;
  padding:13px 0; border-top:.5px solid var(--hairline,#e2e5dd);
}
.hw-naechstes li:first-child{ border-top:0; padding-top:0; }
.hw-punktmarke{
  flex:0 0 auto; width:11px; height:11px; margin-top:5px; border-radius:50%;
  border:2px solid var(--hw-s-offen); background:transparent;
}
.hw-naechstes li.ist-angefangen .hw-punktmarke{ border-color:var(--hw-s-arbeit); background:var(--hw-s-arbeit); }
.hw-naechstes-titel{ font-size:16px; font-weight:600; line-height:1.35; }
.hw-naechstes-unter{ font-size:13.5px; color:var(--hw-text-muted,#6d7370); margin-top:3px; }
.hw-naechstes li.ist-angefangen .hw-naechstes-unter{ color:var(--hw-s-arbeit); }

.hw-fertigmeldung{ border-left:3px solid var(--hw-olive,#6B7A3F); }
.hw-fertigmeldung h3{ margin:0 0 8px; font-size:18px; }
.hw-fertigmeldung p{ margin:0; font-size:15px; }

.hw-zeile{
  display:grid; grid-template-columns:1fr 150px auto 14px; align-items:center; gap:16px;
  padding:15px 0; border-top:.5px solid var(--hairline,#e2e5dd);
  text-decoration:none; color:inherit;
}
.hw-zeile:first-of-type{ border-top:0; padding-top:2px; }
.hw-zeile:hover .hw-zeile-name{ color:var(--hw-olive,#6B7A3F); }
.hw-zeile:hover .hw-pfeil{ transform:translateX(3px); }
.hw-zeile-name{ font-size:16px; font-weight:600; transition:color .15s ease; }
.hw-fertighaken{ color:var(--hw-s-fertig); font-weight:700; margin-left:6px; }
.hw-zeile-zahl{
  font-size:13.5px; color:var(--hw-text-muted,#6d7370); white-space:nowrap;
  font-variant-numeric:tabular-nums; text-align:right; min-width:112px;
}
.hw-pfeil{ color:var(--hw-s-offen); font-size:20px; line-height:1; transition:transform .15s ease; }
.hw-zeile.ist-fertig .hw-zeile-zahl{ color:var(--hw-s-fertig); }

/* Der Abschluss einer Karte fuehrt weiter: als Knopf, nicht als Textzeile */
.hw-alles-reihe{
  display:flex; flex-wrap:wrap; gap:10px;
  margin-top:18px; padding-top:16px;
  border-top:.5px solid var(--hairline,#e2e5dd);
}
.hw-alles-reihe .btn{ text-decoration:none; }
@media (max-width:520px){
  .hw-alles-reihe .btn{ flex:1 1 100%; justify-content:center; text-align:center; }
}

/* Klickbare Bereichszeilen und Kalenderkacheln als Flaeche erkennbar */
.hw-zeile{ border-radius:6px; padding-left:12px; padding-right:12px; transition:background .15s ease; }
.hw-zeile:hover{ background:var(--hw-sand,#FAF9F6); }

.hw-zurueck{
  display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap;
  margin-bottom:16px; font-size:14px;
}
/* Alles Klickbare im Schuelerbereich ist ein Knopf, nichts unterstrichenes
   im Fliesstext: das ist am Handy sicherer zu treffen und klarer zu sehen. */
.hw-zurueck a:not(.btn){
  display:inline-flex; align-items:center; gap:6px;
  padding:8px 14px; border:1.5px solid var(--hw-linie,#E3E1DA); border-radius:6px;
  background:var(--hw-flaeche,#fff); color:var(--hw-olive,#6B7A3F);
  font-weight:700; font-size:13px; text-decoration:none;
}
.hw-zurueck a:not(.btn):hover{
  background:var(--hw-olive,#6B7A3F); border-color:var(--hw-olive,#6B7A3F); color:#fff;
}
.hw-zurueck a[style]{ margin-left:8px !important; }
.hw-zurueck span{ color:var(--hw-text-muted,#6d7370); }
.hw-dash--details .hw-bereich{ scroll-margin-top:20px; }

/* ------------------------------------------------- Listen-Import */

.hw-vorschau{
  border:.5px solid var(--hairline,#e2e5dd); border-radius:5px;
  max-height:420px; overflow:auto;
}
.hw-vorschau table{ width:100%; border-collapse:collapse; font-size:13.5px; }
.hw-vorschau th, .hw-vorschau td{ padding:8px 10px; text-align:left; border-bottom:.5px solid var(--hairline,#e2e5dd); }
.hw-vorschau thead th{ position:sticky; top:0; background:var(--hw-snow,#fafbf8); font-size:12px; letter-spacing:.6px; text-transform:uppercase; }
.hw-vs-haken{ width:34px; }
.hw-vs-grau{ color:var(--hw-text-muted,#6d7370); background:#fbfbfa; }
.hw-vs-hinweis{ color:var(--hw-s-arbeit); font-size:12.5px; }

.hw-zugangstabelle{ width:100%; border-collapse:collapse; font-size:14px; margin-bottom:14px; background:var(--hw-flaeche,#fff); }
.hw-zugangstabelle th, .hw-zugangstabelle td{ padding:9px 11px; text-align:left; border-bottom:.5px solid var(--hairline,#e2e5dd); }
.hw-zugangstabelle thead th{ font-size:12px; letter-spacing:.6px; text-transform:uppercase; color:var(--hw-text-muted,#6d7370); }
.hw-pw{ font-size:16px; font-weight:700; font-variant-numeric:tabular-nums; }
.hw-drucknotiz{ font-size:13px; color:var(--hw-text-muted,#6d7370); margin:0 0 14px; }

.hw-nachricht{ border-left:3px solid var(--hw-olive,#6B7A3F); background:var(--hw-snow,#fafbf8); }
.hw-nachricht h3{ margin:0 0 8px; font-size:15px; letter-spacing:.02em; }
.hw-nachricht p{ margin:0; font-size:15px; line-height:1.55; }

.hw-bereich-kopf{ display:flex; align-items:flex-start; justify-content:space-between; gap:16px; }
.hw-bereich-kopf h3{ margin:0 0 4px; font-size:18px; }
.hw-bereich-hinweis{ margin:0 0 10px; font-size:13px; color:var(--hw-text-muted,#6d7370); }
.hw-bereich-stand{ font-size:15px; font-weight:700; color:var(--hw-olive,#6B7A3F); white-space:nowrap; }

.hw-punkte{ list-style:none; margin:16px 0 0; padding:0; }
.hw-punkt{
  display:flex; align-items:flex-start; gap:12px;
  padding:12px 0; border-top:.5px solid var(--hairline,#e2e5dd);
}
.hw-punkt:first-child{ border-top:0; }
.hw-marke{
  flex:0 0 auto; width:20px; height:20px; margin-top:1px; border-radius:50%;
  border:1.5px solid var(--hw-s-offen); display:flex; align-items:center; justify-content:center;
  font-size:12px; font-weight:700; color:#fff;
}
.hw-erledigt .hw-marke{ background:var(--hw-s-fertig); border-color:var(--hw-s-fertig); }
.hw-in_arbeit .hw-marke{ border-color:var(--hw-s-arbeit); background:transparent; }
.hw-punkt-text{ flex:1 1 auto; min-width:0; }
.hw-punkt-titel{ font-size:15px; line-height:1.4; }
.hw-erledigt .hw-punkt-titel{ color:var(--hw-anthracite,#1A1F22); }
.hw-offen .hw-punkt-titel{ color:#4c5254; }
.hw-punkt-zaehler{ font-size:13px; color:var(--hw-text-muted,#6d7370); margin-top:4px; }
.hw-punkt-zusatz{ margin-top:5px; font-size:13px; color:var(--hw-text-muted,#6d7370); display:flex; flex-wrap:wrap; gap:10px; }
.hw-datum{ font-variant-numeric:tabular-nums; }
.hw-bemerkung{ font-style:italic; }
.hw-status-text{
  flex:0 0 auto; font-size:12px; letter-spacing:1px; text-transform:uppercase; font-weight:600;
  color:var(--hw-s-offen); padding-top:2px;
}
.hw-erledigt .hw-status-text{ color:var(--hw-s-fertig); }
.hw-in_arbeit .hw-status-text{ color:var(--hw-s-arbeit); }

.hw-abschluss{
  display:flex; align-items:center; justify-content:space-between; gap:20px; flex-wrap:wrap;
  margin-top:26px; padding-top:20px; border-top:.5px solid var(--hairline,#e2e5dd);
}
.hw-abschluss p{ margin:0; font-size:13px; color:var(--hw-text-muted,#6d7370); max-width:640px; }
.hw-abschluss a{ color:var(--hw-olive,#6B7A3F); }
.hw-abschluss .btn{ text-decoration:none; }

/* ---------------------------------------------------------- Verwaltung */

.hw-admin{ background:var(--hw-stone,#F2F4EF); padding-top:32px; }

/* Die Hauptleiste der Verwaltung: eine abgesetzte Werkzeugzeile.
   Links die Bereiche, rechts klar getrennt Kommandozentrale und Abmelden. */
.hw-adminnav{
  display:flex; flex-wrap:wrap; align-items:center; gap:6px;
  margin-bottom:20px; padding:8px;
  background:var(--hw-snow,#fafbf8); border:.5px solid var(--hairline,#e2e5dd);
  border-radius:6px;
}
.hw-adminnav a{
  padding:8px 12px; background:transparent; border:.5px solid transparent;
  border-radius:4px; font-size:12.5px; font-weight:600; text-decoration:none;
  color:#4c5254; white-space:nowrap;
}
.hw-adminnav a:hover{ background:var(--hw-flaeche,#fff); border-color:var(--hairline-strong,#cfd4c9); color:var(--hw-anthracite,#1A1F22); }
.hw-adminnav a.ist-aktiv{
  background:var(--hw-olive,#6B7A3F); color:#fff; border-color:var(--hw-olive,#6B7A3F);
  box-shadow:0 1px 3px rgba(107,122,63,.35);
}

/* ------------------------------------------------- Verwaltungs-Huelle */

body.hw-app{ background:var(--hw-snow,#fafbf8); }
.hw-app-kopf{
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  /* Heller Kopf: das Logo kommt auf weissem Grund besser zur Geltung
     und darf deshalb groesser sein. */
  background:var(--hw-flaeche,#fff); padding:0 22px; height:72px;
  border-bottom:.5px solid var(--hairline,#e2e5dd);
}
/* Das Logo steht mittig, links der Seitenname, rechts das Wort
   Verwaltung. Der Schriftzug HUNTERS WORLD entfällt, das Zeichen
   spricht für sich. */
.hw-app-kopf{ position:relative; }
.hw-app-marke{
  position:absolute; left:50%; top:50%; transform:translate(-50%, -50%);
  display:flex; align-items:center; text-decoration:none;
}
.hw-app-marke img{ height:52px; width:auto; display:block; }
.hw-app-ort--links{ flex:1 1 0; min-width:0; text-align:left; }
.hw-app-ort--rechts{ flex:1 1 0; min-width:0; text-align:right; }
.hw-app-marke strong{
  color:var(--hw-anthracite,#1A1F22); font-size:14px; letter-spacing:2.5px; font-weight:700;
}
.hw-app-marke span{
  color:var(--hw-olive-hell,#b6c48a); font-size:10px; letter-spacing:2.5px; text-transform:uppercase;
}
.hw-app-ort{ color:var(--hw-text-muted,#6d7370); font-size:12px; letter-spacing:1px; }
.hw-app-ort--rechts{ font-weight:600; color:var(--hw-olive,#6B7A3F); text-transform:uppercase; font-size:11px; }
.hw-app-titel{ padding:22px 0 4px; }
.hw-app-titel h1{ font-size:24px; margin:0 0 2px; color:var(--hw-anthracite,#1A1F22); }
.hw-app-titel h1 em{ font-style:normal; color:var(--hw-olive,#6B7A3F); }
.hw-app-titel p{ margin:0; font-size:13px; color:var(--hw-text-muted,#6d7370); }
.hw-app .section{ padding-top:16px; }
.hw-app-fuss{
  padding:18px 22px 26px; font-size:11.5px; letter-spacing:1px;
  color:var(--hw-text-muted,#6d7370); text-align:center;
}

/* ---------------------------------------------------------------- Fuss ganz unten
   Auf kurzen Seiten hing die Fusszeile bisher mitten im Weiss. Mit
   diesem Kniff rutscht sie ans untere Ende, sobald der Inhalt den
   Bildschirm nicht fuellt, und verhaelt sich sonst voellig normal. */
body{ min-height:100vh; min-height:100svh; }
body > .hw-app-fuss,
body > .footer,
.hw-app-fuss, .hw-fuss-schlank{
  position:sticky; top:100vh; top:100svh;
}

/* Die Randleiste: ein festes Feld rechts, Schrift ganz normal waagerecht. */
.hw-rand{
  position:fixed; top:76px; right:14px; z-index:70; width:152px;
  display:flex; flex-direction:column; gap:10px; max-height:calc(100vh - 96px);
  overflow-y:auto;
}
.hw-rand-gruppe{
  display:flex; flex-direction:column; background:var(--hw-flaeche,#fff);
  border:.5px solid var(--hairline-strong,#cfd4c9); border-radius:8px; overflow:hidden;
}
.hw-rand a, .hw-rand button, .hw-rand .hw-nav-wer{
  padding:10px 14px; font-size:12.5px; font-weight:600;
  text-decoration:none; color:#4c5254; background:none; border:0; cursor:pointer;
  border-top:.5px solid var(--hairline,#e2e5dd); font-family:inherit; text-align:left;
}
.hw-rand-gruppe > :first-child{ border-top:0; }
.hw-rand a:hover, .hw-rand button:hover{ background:var(--hw-snow,#fafbf8); color:var(--hw-anthracite,#1A1F22); }
.hw-rand .ist-aktiv{ background:var(--hw-olive,#6B7A3F); color:#fff; }
.hw-rand .hw-nav-chef{ color:var(--hw-anthracite,#1A1F22); }
.hw-rand .hw-nav-raus{ color:var(--hw-s-rot,#a03a3a); }
.hw-rand .hw-nav-raus:hover{ background:var(--hw-s-rot,#a03a3a); color:#fff; }
.hw-rand .hw-nav-wer{ color:var(--hw-text-muted,#6d7370); font-weight:400; cursor:default; font-size:11.5px; }

/* Frueher stand rechts eine Randleiste, dafuer hielt der Inhalt 186px
   frei. Suche, Name und Abmelden sind laengst oben im Kopf, die Leiste
   ist weg; der Abstand blieb stehen und schob die ganze Seite um 93px
   aus der Mitte. Beide Seiten tragen jetzt denselben Rand. */
.hw-admin > .container, .hw-app-titel > .container{ margin-inline:auto; }

/* ---------------------------------------------------------------- Das Suchblatt
   Klappt vom Kopf herunter und legt sich ueber die Seite. Feld und Treffer
   stehen untereinander an einer Stelle, statt als schmaler Kasten
   irgendwo am Rand zu haengen. */
.hw-suchschleier{
  position:fixed; inset:0; z-index:80; background:rgba(26,31,34,.28);
  opacity:0; transition:opacity .2s ease;
  -webkit-backdrop-filter:blur(2px); backdrop-filter:blur(2px);
}
.hw-suchschleier.ist-offen{ opacity:1; }
.hw-suchblatt{
  position:fixed; top:64px; left:50%; z-index:81;
  width:min(620px, calc(100vw - 40px));
  opacity:0; transform:translate(-50%, -10px) scale(.985);
  transition:opacity .2s ease, transform .24s cubic-bezier(.2,.9,.24,1);
}
.hw-suchblatt.ist-offen{ opacity:1; transform:translate(-50%, 0) scale(1); }
.hw-suchblatt-innen{
  background:var(--hw-flaeche,#fff); border:.5px solid var(--hairline-strong,#cfd4c9);
  border-radius:14px; box-shadow:0 24px 60px rgba(26,31,34,.22);
  overflow:hidden;
}
body.hw-suche-offen{ overflow:hidden; }
/* Lupe, Feld und Esc nebeneinander, die Trefferliste darunter über die
   ganze Breite. Als Raster, weil eine Flex-Reihe entweder umbricht oder
   die Liste nach rechts stellt. */
.hw-nav-suche{
  position:relative; display:grid; grid-template-columns:auto 1fr auto;
  align-items:center; gap:10px; padding:4px 14px;
}
.hw-suchlupe{ color:var(--hw-text-muted,#6d7370); display:flex; flex:0 0 auto; }
.hw-suchlupe svg{ width:18px; height:18px; }
.hw-nav-suche input{
  min-width:0; width:100%; padding:16px 4px;
  border:0 !important; border-radius:0 !important; box-shadow:none !important;
  font:inherit; font-size:17px; background:transparent;
  -webkit-appearance:none; appearance:none;
}
.hw-nav-suche input::-webkit-search-cancel-button{ -webkit-appearance:none; }
.hw-nav-suche input:focus,
.hw-nav-suche input:focus-visible{ outline:none !important; }
.hw-suchzu{
  flex:0 0 auto; border:.5px solid var(--hairline,#e3e6df); background:var(--hw-snow,#fafbf8);
  color:var(--hw-text-muted,#6d7370); border-radius:6px; padding:4px 8px;
  font:inherit; font-size:11px; letter-spacing:.4px; cursor:pointer;
  transition:background .16s ease, color .16s ease;
}
.hw-suchzu:hover{ background:#eef2e6; color:var(--hw-anthracite,#1A1F22); }
.hw-suchstart{ border-top:.5px solid var(--hairline,#e3e6df); padding:12px 14px 14px; }
.hw-suchstart .vs-bereich{
  display:block; font-size:10.5px; letter-spacing:1.2px; text-transform:uppercase;
  color:var(--hw-text-muted,#6d7370);
}
.hw-suchstart-reihe{ display:flex; flex-wrap:wrap; gap:7px; margin-top:8px; }
.hw-suchstart-reihe a{
  display:inline-block; padding:7px 11px; border-radius:999px;
  border:.5px solid var(--hairline-strong,#cfd4c9); background:var(--hw-snow,#fafbf8);
  color:var(--hw-anthracite,#1A1F22); text-decoration:none; font-size:12.5px;
  transition:background .16s ease, border-color .16s ease, transform .16s ease;
}
.hw-suchstart-reihe a:hover{ background:#eef2e6; border-color:var(--hw-olive,#6B7A3F); }
.hw-suchstart-reihe a:active{ transform:scale(.97); }
.hw-suchtipp{
  margin:12px 0 0; font-size:12px; line-height:1.5; color:var(--hw-text-muted,#6d7370);
}
.hw-nav-vorschlaege{
  /* Eigene Zeile unter dem Feld, ueber die ganze Blattbreite: das
     Formular ist eine Flex-Reihe, ohne das stuende die Liste daneben. */
  position:static; z-index:60; grid-column:1 / -1;
  margin:0 -14px -4px; width:calc(100% + 28px);
  background:var(--hw-flaeche,#fff); border:0; border-top:.5px solid var(--hairline,#e3e6df);
  border-radius:0; box-shadow:none; overflow:hidden; max-height:min(58vh, 460px); overflow-y:auto;
}
.hw-nav-vorschlaege .vs-leer{
  padding:14px 14px 4px; font-size:13px; color:var(--hw-text-muted,#6d7370);
}
.hw-nav-vorschlaege .vs-bereich{
  padding:8px 14px 4px; font-size:10.5px; letter-spacing:1.2px; text-transform:uppercase;
  color:var(--hw-text-muted,#6d7370); background:var(--hw-snow,#fafbf8);
}
.hw-nav-vorschlaege .vs-treffer{
  display:block; padding:10px 14px; text-decoration:none; color:var(--hw-anthracite,#1A1F22);
  border-left:2px solid transparent;
}
.hw-nav-vorschlaege .vs-treffer strong{ display:block; font-size:13.5px; }
.hw-nav-vorschlaege .vs-treffer span{ display:block; font-size:12px; color:var(--hw-text-muted,#6d7370); }
.hw-nav-vorschlaege .vs-treffer:hover, .hw-nav-vorschlaege .vs-treffer.ist-aktiv{
  background:#eef2e6; border-left-color:var(--hw-olive,#6B7A3F);
}
a.hw-tabellenzeile{ text-decoration:none; color:inherit; }
a.hw-tabellenzeile:hover strong{ color:var(--hw-olive,#6B7A3F); }
a.hw-tabellenzeile .hw-pfeil{ color:var(--hw-text-muted,#6d7370); transition:transform .15s ease; }
a.hw-tabellenzeile:hover .hw-pfeil{ transform:translateX(3px); }
.hw-nav-meta a{
  padding:6px 13px; border-radius:4px; font-weight:600; text-decoration:none; white-space:nowrap;
}
.hw-nav-chef{
  border:.5px solid var(--hw-anthracite,#1A1F22); color:var(--hw-anthracite,#1A1F22); background:var(--hw-flaeche,#fff);
}
.hw-nav-chef:hover{ background:var(--hw-anthracite,#1A1F22); color:#fff; }
.hw-nav-raus{
  border:.5px solid transparent; color:var(--hw-s-rot,#a03a3a);
}
.hw-nav-raus:hover{ background:var(--hw-s-rot,#a03a3a); border-color:var(--hw-s-rot,#a03a3a); color:#fff; }

.hw-melde{ padding:13px 16px; border-radius:4px; margin-bottom:16px; font-size:14px; }
.hw-melde--ok{ background:#eef2e6; border:.5px solid #c7d3ae; color:#41501f; }
.hw-melde--fehler{ background:#f8eded; border:.5px solid #e3c4c4; color:#7d2b2b; }

.hw-suche{ display:flex; gap:8px; margin-bottom:16px; }
.hw-suche input{
  flex:1 1 auto; padding:12px 14px; border:1px solid var(--hairline-strong,#cfd4c9);
  border-radius:4px; font-family:inherit; font-size:15px; background:var(--hw-flaeche,#fff);
}

.hw-liste{ display:flex; flex-direction:column; gap:8px; }
.hw-listeneintrag{
  display:flex; align-items:center; justify-content:space-between; gap:20px;
  background:var(--hw-flaeche,#fff); border:.5px solid var(--hairline,#e2e5dd); border-radius:6px;
  padding:16px 18px; text-decoration:none; color:inherit;
}
.hw-listeneintrag:hover{ border-color:var(--hw-olive,#6B7A3F); }
.hw-listen-name strong{ display:block; font-size:16px; }
.hw-listen-name span{ display:block; font-size:13px; color:var(--hw-text-muted,#6d7370); margin-top:2px; }
.hw-merker{ color:var(--hw-s-arbeit) !important; }
.hw-listen-stand{ display:flex; align-items:center; gap:10px; flex:0 0 auto; }
.hw-listen-stand .hw-balken{ width:120px; }
.hw-listen-stand span{ font-size:13px; font-weight:700; min-width:44px; text-align:right; }

.hw-form{ display:flex; flex-direction:column; gap:16px; }
.hw-form h3{ margin:0; font-size:20px; }
.hw-formreihe{ display:flex; gap:14px; align-items:flex-end; flex-wrap:wrap; margin-bottom:14px; }
.hw-formreihe > *{ flex:1 1 220px; min-width:0; }
.hw-formreihe:last-child{ margin-bottom:0; }
/* Haken und Knoepfe in einer Feldreihe sitzen auf der Linie der Eingaben. */
.hw-formreihe > .hw-haken{ padding-bottom:13px; }
.hw-formreihe > .btn{ flex:0 0 auto; }

.hw-editbereich{ border-top:.5px solid var(--hairline,#e2e5dd); padding-top:14px; }
/* Artikelzeilen im Ladenauftrag: je Artikel ein Block aus vier Feldern,
   oben Artikel und Menge, darunter Lieferant und Preis, rechts das Kreuz
   ueber beide Reihen. Das Formular steht immer im schmalen Fenster,
   darum ein festes Raster statt einer Reihe, die umbricht. */
.hw-posten .hw-postenzeile{
  display:grid; gap:10px 12px; align-items:end;
  grid-template-columns:minmax(0,1fr) 118px 30px;
  margin:0; padding:12px 0;
  border-top:.5px solid var(--hairline,#e2e5dd);
}
.hw-posten .hw-postenzeile:first-child{ border-top:0; padding-top:0; }
.hw-posten .hw-postenzeile > .hw-feld{ max-width:none; min-width:0; }
.hw-posten .hw-postenzeile > .hw-feld:nth-of-type(1){ grid-area:1 / 1 / 2 / 2; }
.hw-posten .hw-postenzeile > .hw-feld:nth-of-type(2){ grid-area:1 / 2 / 2 / 3; }
.hw-posten .hw-postenzeile > .hw-feld:nth-of-type(3){ grid-area:2 / 1 / 3 / 2; }
.hw-posten .hw-postenzeile > .hw-feld:nth-of-type(4){ grid-area:2 / 2 / 3 / 3; }
/* Das Kreuz nimmt eine Artikelzeile weg: rot wie das Plus darunter,
   ohne Rahmen, damit die Zeile ruhig bleibt. */
.hw-posten .hw-posten-weg{
  grid-area:1 / 3 / 3 / 4; align-self:center; justify-self:end;
  width:26px; height:30px; padding:0;
  border:0; background:transparent; color:var(--hw-s-rot,#a03a3a);
  font-size:19px; line-height:1; cursor:pointer;
  transition:opacity 150ms ease;
}
.hw-posten .hw-posten-weg:hover{ opacity:.65; }
.hw-posten .hw-posten-weg:focus-visible{
  outline:2px solid var(--hw-s-rot,#a03a3a); outline-offset:2px; border-radius:3px;
}
/* Das Plus haengt die naechste Artikelzeile an: klein und rot, mit dem
   Wort daneben, ohne Rahmen. Es rutscht mit jeder neuen Zeile nach
   unten, bei zehn Artikeln verschwindet es. */
.hw-posten .hw-posten-mehr{
  display:inline-flex; align-items:center; gap:5px;
  margin-top:4px; padding:2px 0;
  border:0; background:transparent; color:var(--hw-s-rot,#a03a3a);
  font-family:inherit; font-size:13px; font-weight:600; letter-spacing:.01em;
  cursor:pointer; transition:opacity 150ms ease;
}
.hw-posten .hw-posten-mehr svg{ width:11px; height:11px; stroke-width:2.6; }
.hw-posten .hw-posten-mehr:hover{ text-decoration:underline; }
.hw-posten .hw-posten-mehr:focus-visible{
  outline:2px solid var(--hw-s-rot,#a03a3a); outline-offset:3px; border-radius:3px;
}
.hw-editbereich h4{ margin:0 0 10px; font-size:15px; letter-spacing:.04em; text-transform:uppercase; color:var(--hw-olive,#6B7A3F); }
.hw-editzeile{
  display:flex; align-items:center; gap:14px; padding:9px 0;
  border-top:.5px solid var(--hairline,#e2e5dd);
}
.hw-editzeile:first-of-type{ border-top:0; }
.hw-editname{ flex:1 1 40%; font-size:14px; }
.hw-editsteuer{ flex:1 1 60%; display:flex; gap:8px; align-items:center; }
.hw-editsteuer select, .hw-editsteuer input{
  padding:9px 10px; border:1px solid var(--hairline-strong,#cfd4c9); border-radius:4px;
  font-family:inherit; font-size:14px; background:var(--hw-flaeche,#fff);
}
.hw-editsteuer select{ flex:0 0 120px; }
.hw-editsteuer input[type=date]{ flex:0 0 150px; }
.hw-editsteuer input[type=text]{ flex:1 1 auto; min-width:0; }
.hw-zaehlfeld{ display:flex; align-items:center; gap:7px; flex:0 0 auto; }
.hw-zaehlfeld input{ width:74px; text-align:center; font-variant-numeric:tabular-nums; }
.hw-zaehlfeld span{ font-size:13px; color:var(--hw-text-muted,#6d7370); white-space:nowrap; }

.hw-zugang{ background:var(--hw-snow,#fafbf8); border-left:3px solid var(--hw-olive,#6B7A3F); }
.hw-zugang h3{ margin:0 0 6px; font-size:17px; }
.hw-zugang p{ margin:0 0 14px; font-size:14px; color:var(--hw-text-muted,#6d7370); }
.hw-zugang-box{ display:flex; flex-wrap:wrap; gap:26px; padding:16px 18px; background:var(--hw-flaeche,#fff); border:.5px solid var(--hairline,#e2e5dd); border-radius:4px; margin-bottom:14px; }
.hw-zugang-box span{ display:block; font-size:11px; letter-spacing:1.4px; text-transform:uppercase; color:var(--hw-text-muted,#6d7370); margin-bottom:3px; }
.hw-zugang-box strong{ font-size:18px; }

/* Haken fuer Einwilligungen, sitzt auf gleicher Hoehe wie die Textfelder */
.hw-haken{ display:flex; align-items:center; gap:9px; align-self:end; padding-bottom:11px; }
.hw-haken input{ width:17px; height:17px; accent-color:var(--hw-olive,#6B7A3F); flex:0 0 auto; }
.hw-haken span{ font-size:14px; }

/* Gespraechsverlauf */
.hw-notizliste{ display:flex; flex-direction:column; }
.hw-notiz{ padding:12px 0; border-top:.5px solid var(--hairline,#e2e5dd); }
.hw-notiz:first-child{ border-top:0; }
.hw-notiz-kopf{ display:flex; align-items:center; gap:10px; margin-bottom:5px; }
.hw-notiz-art{
  font-size:11px; letter-spacing:1.2px; text-transform:uppercase;
  color:var(--hw-olive,#6B7A3F); font-weight:700;
}
.hw-notiz-zeit, .hw-notiz-wer{ font-size:12.5px; color:var(--hw-text-muted,#6d7370); }
.hw-notiz-kopf form{ margin-left:auto; }
.hw-notiz-weg{
  border:0; background:none; cursor:pointer; padding:0 4px; line-height:1;
  font-size:19px; color:var(--hw-text-muted,#6d7370);
}
.hw-notiz-weg:hover{ color:var(--hw-s-rot,#a03a3a); }
.hw-notiz-text{ font-size:14.5px; }

/* Wiederkehrende Saetze: Pruefungsversuche, Zahlungen */
.hw-satzliste{ display:flex; flex-direction:column; gap:14px; margin-bottom:18px; }
.hw-satz{
  display:flex; flex-direction:column; gap:12px;
  padding:18px 2px;
  border-top:.5px solid var(--hairline,#e2e5dd);
}
.hw-satz:first-child{ border-top:0; padding-top:6px; }
.hw-satz-kopf{ display:flex; align-items:center; gap:12px; }
.hw-satz-marke{ font-size:14px; font-weight:700; }
.hw-satz-lage{
  font-size:11px; letter-spacing:1.2px; text-transform:uppercase; font-weight:700;
  padding:3px 9px; border-radius:99px; background:var(--hw-flaeche,#fff); border:.5px solid var(--hairline,#e2e5dd);
  color:var(--hw-text-muted,#6d7370);
}
.hw-lage-bestanden{ color:var(--hw-olive,#6B7A3F); border-color:currentColor; }
.hw-lage-nicht_bestanden{ color:var(--hw-s-rot,#a03a3a); border-color:currentColor; }
.hw-satz-fuss{ display:flex; align-items:center; gap:14px; }
.hw-satz-weg{
  border:0; background:none; cursor:pointer; padding:0;
  font-size:13.5px; color:var(--hw-text-muted,#6d7370); text-decoration:underline;
}
.hw-satz-weg:hover{ color:var(--hw-s-rot,#a03a3a); }
.hw-satz-neu{ padding-top:16px; border-top:.5px solid var(--hairline,#e2e5dd); }
.hw-offen{ color:var(--hw-s-rot,#a03a3a); }

/* Abgelegte Dateien */
.hw-dokliste{ display:flex; flex-direction:column; margin-bottom:18px; }
.hw-dok{
  display:flex; align-items:center; gap:14px;
  padding:11px 0; border-top:.5px solid var(--hairline,#e2e5dd);
}
.hw-dok:first-child{ border-top:0; }
.hw-dok-text{ flex:1 1 auto; min-width:0; }
.hw-dok-text a{ font-size:15px; font-weight:600; }
.hw-dok-zeile{ display:flex; gap:12px; margin-top:3px; font-size:12.5px; color:var(--hw-text-muted,#6d7370); }
.hw-dok-art{ color:var(--hw-olive,#6B7A3F); letter-spacing:.6px; text-transform:uppercase; font-size:11px; font-weight:700; }
.hw-feld input[type=file]{ padding:9px 10px; background:var(--hw-flaeche,#fff); font-size:14px; }

/* Schaubild der Datenbank */
.hw-schaubild{ display:flex; flex-direction:column; gap:22px; }
.hw-sb-reihe{ display:flex; align-items:stretch; gap:0; }
.hw-sb-kasten{
  flex:1 1 0; display:flex; flex-direction:column; gap:4px; justify-content:center;
  padding:16px 18px; text-align:center; text-decoration:none;
  background:var(--hw-flaeche,#fff); border:1px solid var(--hairline-strong,#cfd4c9); border-radius:4px;
}
.hw-sb-kasten:hover{ border-color:var(--hw-olive,#6B7A3F); }
.hw-sb-kasten strong{ font-size:15px; }
.hw-sb-kasten span{ font-size:22px; font-weight:700; font-variant-numeric:tabular-nums; color:var(--hw-olive,#6B7A3F); }
.hw-sb-wurzel{ background:var(--hw-snow,#fafbf8); border-color:var(--hw-olive,#6B7A3F); border-width:2px; }
.hw-sb-strich{ flex:0 0 26px; align-self:center; height:1px; background:var(--hairline-strong,#cfd4c9); }

.hw-sb-aeste{ display:flex; gap:14px; flex-wrap:wrap; }
.hw-sb-ast{ flex:1 1 200px; display:flex; flex-direction:column; gap:7px; padding-top:12px; border-top:2px solid var(--hairline,#e2e5dd); }
.hw-sb-astkopf{ font-size:11px; letter-spacing:1.2px; text-transform:uppercase; color:var(--hw-text-muted,#6d7370); margin-bottom:3px; }
.hw-sb-klein{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding:9px 12px; text-decoration:none;
  background:var(--hw-flaeche,#fff); border:.5px solid var(--hairline,#e2e5dd); border-radius:4px;
}
.hw-sb-klein:hover{ border-color:var(--hw-olive,#6B7A3F); }
.hw-sb-klein strong{ font-size:14px; font-weight:600; }
.hw-sb-klein span{ font-size:15px; font-weight:700; font-variant-numeric:tabular-nums; color:var(--hw-olive,#6B7A3F); }

/* Tabellenliste */
.hw-tabellenliste{ display:flex; flex-direction:column; }
.hw-tabellenzeile{
  display:flex; align-items:center; gap:18px; padding:14px 0; text-decoration:none;
  border-top:.5px solid var(--hairline,#e2e5dd);
}
.hw-tabellenzeile:first-child{ border-top:0; }
.hw-tabellenzeile.ist-offen{ background:var(--hw-snow,#fafbf8); padding-left:12px; padding-right:12px; margin:0 -12px; border-radius:4px; }
.hw-tz-text{ flex:1 1 auto; min-width:0; }
.hw-tz-text strong{ font-size:15.5px; margin-right:9px; }
.hw-tz-text code{ font-size:12.5px; color:var(--hw-text-muted,#6d7370); }
.hw-tz-text p{ margin:3px 0 0; font-size:13.5px; color:var(--hw-text-muted,#6d7370); }
.hw-tz-zahl{ flex:0 0 auto; text-align:right; font-size:22px; font-weight:700; font-variant-numeric:tabular-nums; line-height:1.1; }
.hw-tz-zahl span{ display:block; font-size:11px; font-weight:400; letter-spacing:1.1px; text-transform:uppercase; color:var(--hw-text-muted,#6d7370); }

.hw-blaettern{ display:flex; align-items:center; gap:16px; margin-top:14px; }
.hw-blaettern span{ font-size:13.5px; color:var(--hw-text-muted,#6d7370); }
.hw-leer{ color:var(--hw-text-muted,#6d7370); }

/* Terminliste */
.hw-terminliste{ display:flex; flex-direction:column; }
.hw-termin{
  display:flex; align-items:center; gap:16px; padding:12px 0; text-decoration:none;
  border-top:.5px solid var(--hairline,#e2e5dd);
}
.hw-termin:first-child{ border-top:0; }
.hw-termin:hover .hw-termin-tag{ border-color:var(--hw-olive,#6B7A3F); }
.hw-termin-tag{
  flex:0 0 58px; text-align:center; padding:7px 0;
  border:1px solid var(--hairline-strong,#cfd4c9); border-radius:4px; background:var(--hw-flaeche,#fff);
}
.hw-termin-tag strong{ display:block; font-size:15px; font-variant-numeric:tabular-nums; }
.hw-termin-tag span{ display:block; font-size:11px; letter-spacing:1px; text-transform:uppercase; color:var(--hw-text-muted,#6d7370); }
.hw-termin-text{ flex:1 1 auto; min-width:0; }
.hw-termin-text strong{ font-size:15px; }
.hw-termin-zeile{ display:flex; flex-wrap:wrap; gap:12px; margin-top:2px; font-size:13px; color:var(--hw-text-muted,#6d7370); }

/* Anwesenheitsliste */
.hw-anwesenheit{ display:flex; flex-direction:column; }
.hw-aw-zeile{
  display:flex; align-items:center; gap:14px; padding:10px 0;
  border-top:.5px solid var(--hairline,#e2e5dd);
}
.hw-aw-zeile:first-child{ border-top:0; }
.hw-aw-name{ flex:1 1 30%; min-width:0; }
.hw-aw-name strong{ font-size:14.5px; }
.hw-aw-hinweis{ font-size:12px; color:var(--hw-text-muted,#6d7370); margin-left:7px; }
.hw-aw-wahl{ flex:0 0 auto; display:flex; gap:0; }
.hw-aw-knopf{ cursor:pointer; }
.hw-aw-knopf input{ position:absolute; opacity:0; pointer-events:none; }
.hw-aw-knopf span{
  display:block; padding:7px 12px; font-size:13px; background:var(--hw-flaeche,#fff);
  border:1px solid var(--hairline-strong,#cfd4c9); border-left-width:0;
}
.hw-aw-knopf:first-child span{ border-left-width:1px; border-radius:4px 0 0 4px; }
.hw-aw-knopf:last-child span{ border-radius:0 4px 4px 0; }
.hw-aw-knopf.ist-gewaehlt span,
.hw-aw-knopf:has(input:checked) span{
  background:var(--hw-olive,#6B7A3F); border-color:var(--hw-olive,#6B7A3F); color:#fff;
}
.hw-aw-bem{
  flex:1 1 25%; min-width:0; padding:8px 10px; font-family:inherit; font-size:13.5px;
  border:1px solid var(--hairline-strong,#cfd4c9); border-radius:4px; background:var(--hw-flaeche,#fff);
}

/* Filterleiste */
.hw-filter{ display:flex; flex-wrap:wrap; gap:8px; margin-bottom:16px; }
.hw-filter a{
  padding:5px 12px; font-size:13px; text-decoration:none; border-radius:99px;
  border:.5px solid var(--hairline-strong,#cfd4c9); color:var(--hw-text-muted,#6d7370);
}
.hw-filter a.ist-aktiv{ background:var(--hw-olive,#6B7A3F); border-color:var(--hw-olive,#6B7A3F); color:#fff; }

.hw-tz-knoepfe{ flex:0 0 auto; display:flex; gap:8px; align-items:center; }
.hw-satz-link{ margin-left:auto; font-size:13.5px; }

.hw-gefahr{ border-color:#e3d7c4; }
.hw-gefahr h4{ margin:0 0 12px; font-size:15px; }
.hw-gefahr-reihe{ display:flex; gap:10px; flex-wrap:wrap; margin-bottom:18px; }
.hw-loeschform{ display:flex; flex-direction:column; gap:12px; padding-top:14px; border-top:.5px solid var(--hairline,#e2e5dd); max-width:520px; }
.hw-btn-rot{ background:var(--hw-s-rot); color:#fff; border-color:var(--hw-s-rot); align-self:flex-start; }
.hw-btn-rot:hover{ background:#8a3030; border-color:#8a3030; }

/* ---------------------------------------------------------- Handy */

@media (max-width:760px){
  .hw-karte{ padding:20px 16px; }
  .hw-stand-satz{ font-size:19px; }
  .hw-zeile{ grid-template-columns:1fr auto; gap:6px 12px; padding:14px 0; }
  .hw-zeile-balken{ grid-column:1 / -1; order:3; }
  .hw-zeile-zahl{ text-align:right; min-width:0; }
  .hw-pfeil{ display:none; }
  .hw-vorschau{ max-height:320px; }
  .hw-vorschau table{ font-size:12.5px; }
  .hw-formreihe{ flex-direction:column; gap:16px; }
  .hw-haken{ align-self:stretch; padding-bottom:0; }
  .hw-aw-zeile{ flex-direction:column; align-items:stretch; gap:8px; }
  .hw-aw-wahl{ flex-wrap:wrap; }
  .hw-aw-knopf span{ font-size:12.5px; padding:7px 9px; }
  .hw-tz-knoepfe{ flex-direction:column; align-items:stretch; }
  .hw-sb-reihe{ flex-direction:column; }
  .hw-sb-strich{ flex:0 0 20px; width:1px; height:20px; align-self:center; }
  .hw-tabellenzeile{ align-items:flex-start; }
  .hw-feld[style*="max-width"]{ max-width:none !important; }
  .hw-editzeile{ flex-direction:column; align-items:stretch; gap:8px; }
  .hw-editsteuer{ flex-wrap:wrap; }
  .hw-editsteuer select, .hw-editsteuer input[type=date]{ flex:1 1 140px; }
  .hw-listeneintrag{ flex-direction:column; align-items:stretch; gap:12px; }
  .hw-listen-stand .hw-balken{ flex:1 1 auto; width:auto; }
  .hw-prozent{ font-size:32px; }
  .hw-status-text{ display:none; }
}

/* ---------------------------------------------------------- Druck */

@media print{
  header, footer, .hw-adminnav, .btn, .hw-abschluss{ display:none !important; }
  .hw-karte{ border:0; padding:0; }
  body{ background:var(--hw-flaeche,#fff); }
}

/* ---------------------------------------------------------- Dokumenteneingang */

.hw-eingang{
  display:flex; gap:14px; align-items:flex-end; flex-wrap:wrap;
  padding:13px 15px; margin-bottom:10px;
  background:var(--hw-flaeche,#fff); border:.5px solid var(--hairline,#e2e5dd); border-left:3px solid var(--hairline-strong,#cfd4c9);
  border-radius:4px;
}
.hw-eingang.ist-sicher{ border-left-color:var(--hw-olive,#6B7A3F); background:var(--hw-snow,#fafbf8); }
.hw-ei-name{ flex:1 1 240px; min-width:0; }
.hw-ei-name strong{ display:block; font-size:14.5px; word-break:break-word; }
.hw-ei-name span{ font-size:12.5px; color:var(--hw-text-muted,#6d7370); }
.hw-eingang .hw-feld{ flex:1 1 240px; }

@media (max-width:760px){
  .hw-eingang{ flex-direction:column; align-items:stretch; }
  .hw-eingang .hw-feld{ max-width:none !important; }
}

/* ---------------------------------------------------------- Bestellungen */

.hw-bestellung{ border-top:.5px solid var(--hairline,#e2e5dd); }
.hw-bestellung:first-child{ border-top:0; }
.hw-bestellung > summary{ list-style:none; cursor:pointer; border-top:0; }
.hw-bestellung > summary::-webkit-details-marker{ display:none; }
.hw-bestellung[open] > summary{ background:var(--hw-snow,#fafbf8); padding-left:12px; padding-right:12px; margin:0 -12px; border-radius:4px 4px 0 0; }
.hw-bestellung.ist-storniert .hw-tz-text,
.hw-bestellung.ist-storniert .hw-tz-zahl{ opacity:.55; }
.hw-best-status{ flex:0 0 auto; display:flex; gap:6px; flex-wrap:wrap; justify-content:flex-end; }
.hw-schild{
  display:inline-block; padding:2.5px 9px; border-radius:99px; font-size:12px; font-weight:600;
  background:var(--hw-snow,#fafbf8); border:.5px solid var(--hairline-strong,#cfd4c9);
  color:var(--hw-text-muted,#6d7370); white-space:nowrap;
}
.hw-schild--rot{ color:var(--hw-s-rot,#a03a3a); border-color:var(--hw-s-rot,#a03a3a); background:transparent; }
.hw-best-positionen{
  padding:4px 12px 12px; margin:0 -12px 10px; background:var(--hw-snow,#fafbf8);
  border-radius:0 0 4px 4px;
}
.hw-best-position{
  display:flex; align-items:baseline; gap:14px; padding:7px 0;
  border-top:.5px dashed var(--hairline,#e2e5dd);
}
.hw-best-position:first-child{ border-top:0; }
.hw-best-artikel{ flex:1 1 auto; min-width:0; font-size:14px; }
.hw-best-variante{ color:var(--hw-text-muted,#6d7370); margin-left:6px; }
.hw-best-eigenschaft{
  display:inline-block; margin:2px 0 0 6px; padding:1px 7px; border-radius:3px;
  font-size:12px; background:var(--hw-flaeche,#fff); border:.5px solid var(--hairline,#e2e5dd);
  color:var(--hw-text-muted,#6d7370);
}
.hw-best-preis{ flex:0 0 auto; font-size:14px; font-weight:600; font-variant-numeric:tabular-nums; }
.hw-best-fuss{
  display:flex; gap:16px; flex-wrap:wrap; padding-top:9px; margin-top:4px;
  border-top:.5px solid var(--hairline,#e2e5dd); font-size:13px; color:var(--hw-text-muted,#6d7370);
}
.hw-best-fuss a{ color:inherit; }

@media (max-width:760px){
  .hw-bestellung > summary{ flex-wrap:wrap; gap:8px; }
  .hw-best-status{ order:3; justify-content:flex-start; }
}

/* Kurstermine im Schuelerbereich: Selbstanmeldung und Ausbildungsnachweis */
.hw-terminzeilen{ display:flex; flex-direction:column; }
.hw-monat{
  margin:18px 0 4px; font-size:12px; font-weight:600; letter-spacing:1.4px;
  text-transform:uppercase; color:var(--hw-text-muted,#6d7370);
}
.hw-monat:first-child{ margin-top:0; }
.hw-tz{
  display:flex; align-items:center; gap:16px; padding:12px 0;
  border-top:.5px solid var(--hairline,#e2e5dd);
}
.hw-tz:first-child, .hw-monat + .hw-tz{ border-top:0; }
/* Die Datumsspalte steht weiter unten im Abschnitt Terminzeilen. */
.hw-tz .hw-tz-text strong{ display:block; margin:0; font-size:15px; }
.hw-tz .hw-tz-text > span{ display:block; margin-top:2px; font-size:13px; color:var(--hw-text-muted,#6d7370); }
.hw-tz-frei{ color:var(--hw-olive,#6B7A3F); font-weight:600; }
.hw-tz-voll{ color:#7d2b2b; font-weight:600; }
.hw-tz-knopf{ flex:0 0 auto; white-space:nowrap; }
.hw-tz-std{
  flex:0 0 auto; font-size:14px; font-weight:700; font-variant-numeric:tabular-nums;
  color:var(--hw-olive,#6B7A3F);
}
.hw-tz--war .hw-tz-tag{ font-weight:600; }
.hw-punkt-auto{
  display:inline-block; margin-left:7px; padding:1px 7px; border-radius:3px;
  font-size:11.5px; background:#eef2e6; border:.5px solid #c7d3ae; color:#41501f;
}
@media (max-width:620px){
  .hw-tz{ flex-wrap:wrap; }
  .hw-tz-tag{ flex-basis:64px; }
  .hw-tz form, .hw-tz .hw-tz-knopf{ margin-left:80px; }
}
.hw-aw-hinweis--an{ color:#41501f; background:#eef2e6; border:.5px solid #c7d3ae; border-radius:3px; padding:1px 6px; }

/* Zweite Navigationszeile innerhalb eines Bereichs, etwa in der Schülerverwaltung */
/* Zweite Ebene: die Unterpunkte des Bereichs als Reiter mit Unterstrich. */
.hw-adminnav--unter{
  margin-top:-12px; margin-bottom:14px; padding:0 8px; gap:2px;
  background:transparent; border:0; border-bottom:.5px solid var(--hairline,#e2e5dd);
  border-radius:0;
}
.hw-adminnav--unter a{
  padding:8px 13px 10px; border:0; border-bottom:2px solid transparent; border-radius:0;
  font-size:13px; font-weight:600; color:#4c5254;
}
.hw-adminnav--unter a:hover{ background:transparent; border-color:var(--hairline-strong,#cfd4c9); color:var(--hw-anthracite,#1A1F22); }
.hw-adminnav--unter a.ist-aktiv{
  background:transparent; border-color:var(--hw-olive,#6B7A3F); color:var(--hw-olive,#6B7A3F); box-shadow:none;
}

/* Dritte Ebene: die Arbeitsschritte einer Seite, noch dezenter. */
.hw-adminnav--tief{
  margin-top:-6px; margin-bottom:16px; padding:0 8px; gap:6px;
  background:transparent; border:0; border-radius:0;
}
.hw-adminnav--tief a{
  padding:5px 11px; border:.5px solid var(--hairline,#e2e5dd); border-radius:99px;
  font-size:12px; font-weight:600; color:var(--hw-text-muted,#6d7370); background:var(--hw-flaeche,#fff);
}
.hw-adminnav--tief a:hover{ border-color:var(--hw-olive,#6B7A3F); color:var(--hw-anthracite,#1A1F22); }
.hw-adminnav--tief a.ist-aktiv{
  background:var(--hw-olive,#6B7A3F); border-color:var(--hw-olive,#6B7A3F); color:#fff;
}

/* Eigene Eintraege des Schuelers je Ausbildungspunkt */
.hw-eintraege{ list-style:none; margin:8px 0 0; padding:0; }
.hw-eintraege li{
  display:flex; align-items:baseline; gap:10px; padding:5px 0;
  font-size:13px; border-top:.5px dashed var(--hairline,#e2e5dd);
}
.hw-eintraege li:first-child{ border-top:0; }
.hw-eintrag-wann{ flex:0 0 auto; font-weight:600; font-variant-numeric:tabular-nums; white-space:nowrap; }
/* Ort und Lehrer stehen direkt neben der Zeit, nicht durch die halbe
   Zeile davon getrennt. Der Löschknopf rutscht ans Ende. */
.hw-eintrag-wo{ flex:0 1 auto; min-width:0; color:var(--hw-text-muted,#6d7370); }
.hw-eintraege li > form{ margin-left:auto; }
@media (max-width: 620px){
  /* Am Telefon zwei Zeilen: oben die Zeit mit dem Löschknopf, darunter
     Ort und Lehrer. Nebeneinander bliebe vom Ort nichts übrig. */
  .hw-eintraege li{ flex-wrap:wrap; row-gap:2px; }
  .hw-eintrag-wann{ order:1; }
  .hw-eintraege li > form{ order:2; }
  .hw-eintrag-wo{ order:3; flex:1 1 100%; }
}
.hw-eintrag-weg{
  flex:0 0 auto; border:0; background:none; cursor:pointer; padding:0 4px;
  font-size:16px; line-height:1; color:var(--hw-text-muted,#6d7370);
}
.hw-eintrag-weg:hover{ color:#7d2b2b; }
.hw-eintragen{ margin-top:8px; }
.hw-eintragen > summary{
  cursor:pointer; font-size:13px; font-weight:600; color:var(--hw-olive,#6B7A3F);
  list-style:none; display:inline-flex; align-items:center; gap:5px;
}
.hw-eintragen > summary::-webkit-details-marker{ display:none; }
.hw-eintragen > summary::before{ content:'+'; font-size:15px; line-height:1; }
.hw-eintragen[open] > summary::before{ content:'–'; }
.hw-eintragen-form{
  margin-top:10px; padding:12px; border-radius:4px;
  background:var(--hw-snow,#fafbf8); border:.5px solid var(--hairline,#e2e5dd);
}
.hw-eintragen-reihe{ display:flex; gap:10px; flex-wrap:wrap; align-items:flex-end; }
.hw-eintragen-reihe + .hw-eintragen-reihe{ margin-top:9px; }
.hw-eintragen-reihe label{ display:flex; flex-direction:column; gap:3px; flex:1 1 120px; }
.hw-eintragen-reihe label span{
  font-size:11px; font-weight:600; letter-spacing:.6px; text-transform:uppercase;
  color:var(--hw-text-muted,#6d7370);
}
.hw-eintragen-reihe input{
  padding:7px 9px; font:inherit; font-size:14px; border-radius:4px;
  border:.5px solid var(--hairline,#c9cec5); background:var(--hw-flaeche,#fff); min-width:0;
}
.hw-eintragen-breit{ flex:2 1 220px; }
.hw-eintragen-reihe .btn{ flex:0 0 auto; }
/* Erklaert den Ansitz ueber Mitternacht, direkt unter den Uhrzeiten. */
.hw-eintragen-nacht{
  margin:6px 0 0; font-size:12.5px; line-height:1.45;
  color:var(--hw-text-muted,#6d7370);
}

/* ---------------------------------------------------------- Kalenderansicht */

/* Der eingebettete Google Kalender ist am 10.08.2026 dem eigenen
   Kalender gewichen, die Regeln dafuer sind entfallen. */

.hw-kal-gruppen{
  display:grid; grid-template-columns:repeat(auto-fill, minmax(300px, 1fr)); gap:14px;
}
.hw-kal-gruppe{
  border:.5px solid var(--hairline,#e2e5dd); border-radius:4px; background:var(--hw-flaeche,#fff);
  padding:12px 14px;
}
.hw-kal-gruppe h4{
  margin:0 0 8px; font-size:14.5px; display:flex; align-items:baseline; gap:8px;
}
.hw-kal-gruppe h4 span{
  font-size:12px; font-weight:400; color:var(--hw-text-muted,#6d7370);
}
.hw-kal-gruppenliste{ display:flex; flex-direction:column; }
.hw-kal-gruppenliste a{
  display:flex; gap:10px; align-items:baseline; padding:4.5px 0; text-decoration:none;
  color:var(--hw-anthracite,#1A1F22); font-size:13.5px;
  border-top:.5px dashed var(--hairline,#e2e5dd);
}
.hw-kal-gruppenliste a:first-child{ border-top:0; }
.hw-kal-gruppenliste a:hover strong{ color:var(--hw-olive,#6B7A3F); }
.hw-kal-gruppenliste strong{ font-variant-numeric:tabular-nums; white-space:nowrap; }
.hw-kal-gruppenliste span{ color:var(--hw-text-muted,#6d7370); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }


@media (max-width:1100px){
  .hw-rand{
    position:static; width:auto; max-height:none; flex-direction:row; flex-wrap:wrap;
    gap:6px; margin-bottom:10px; overflow:visible;
  }
  .hw-rand-gruppe{ flex-direction:row; border-radius:6px; }
  .hw-rand a, .hw-rand button, .hw-rand .hw-nav-wer{
    padding:8px 12px; border-top:0;
    border-left:.5px solid var(--hairline,#e2e5dd);
  }
  .hw-rand-gruppe > :first-child{ border-left:0; }
  /* Auf schmalen Bildschirmen gab es die Randleiste ohnehin nicht. */
  .hw-suchblatt{ width:calc(100vw - 24px); }
}


/* ---------------------------------------------------------- Aktivitaets-Analyse */

.hw-analyse-balken{
  display:flex; align-items:flex-end; gap:6px; padding:6px 0 0;
}
.hw-ab-saeule{ flex:1 1 0; display:flex; flex-direction:column; align-items:center; gap:3px; min-width:0; }
.hw-ab-saeule i{
  display:block; width:100%; max-width:40px; border-radius:3px 3px 0 0;
  background:var(--hw-olive,#6B7A3F); min-height:2px;
}
.hw-ab-zahl{ font-size:11.5px; font-weight:700; color:var(--hw-anthracite,#1A1F22); min-height:14px; }
.hw-ab-saeule em{
  font-style:normal; font-size:10px; line-height:1.25; text-align:center;
  color:var(--hw-text-muted,#6d7370);
}
.hw-doppel{ display:grid; grid-template-columns:1fr 1fr; gap:14px; }
@media (max-width:900px){ .hw-doppel{ grid-template-columns:1fr; } }


/* ---------------------------------------------------------- Werbefeld Schuelerportal */

.hw-werbung{ position:relative; }
.hw-werbung-marke{
  display:block; font-size:9.5px; letter-spacing:1.6px; text-transform:uppercase;
  color:var(--hw-text-muted,#6d7370); margin-bottom:4px;
}
/* Alle Anzeigen liegen in derselben Rasterzelle: die Bühne behält ihre
   Höhe, egal welches Motiv läuft. Vorher sprang beim Wechsel alles
   darunter weg, mitten im Lesen. Gewechselt wird über die Deckkraft. */
.hw-werbung-buehne{ display:grid; }
.hw-werbung-karte{
  grid-area:1 / 1; text-decoration:none; color:var(--hw-anthracite,#1A1F22);
  background:var(--hw-flaeche,#fff); border:.5px solid var(--hairline,#e2e5dd); border-radius:8px;
  overflow:hidden;
  opacity:0; visibility:hidden; pointer-events:none;
  transition: opacity 420ms var(--ease-out-stark, cubic-bezier(0.23,1,0.32,1)),
              visibility 0s linear 420ms;
}
.hw-werbung-karte.ist-sichtbar{
  opacity:1; visibility:visible; pointer-events:auto;
  transition-delay: 0s;
}
@media (prefers-reduced-motion: reduce){
  .hw-werbung-karte{ transition:none; }
}
/* Festes Seitenverhältnis: sonst steht die Höhe erst fest, wenn das
   Bild geladen ist, und die Seite springt beim Anzeigenwechsel. */
.hw-werbung-karte img{ width:100%; height:auto; display:block; aspect-ratio:4 / 3; object-fit:cover; }
.hw-werbung-text{ display:block; padding:10px 12px; }
.hw-werbung-text strong{ display:block; font-size:13.5px; line-height:1.35; }
.hw-werbung-text span{ display:block; font-size:12px; color:var(--hw-text-muted,#6d7370); margin-top:3px; }
.hw-werbung-karte:hover{ border-color:var(--hw-olive,#6B7A3F); }

@media (min-width:1240px){
  .hw-werbung{
    position:absolute; left:18px; top:560px; width:280px; z-index:40;
  }
  /* Der Inhalt rueckt neben das Werbefeld, statt darunter zu liegen. */
  /* Der Inhalt rückt neben die Anzeigenspalte. Die Portalleiste macht
     denselben Versatz mit, sonst steht das Menü über der ganzen Breite
     und die Anzeige liegt darauf. */
  .hw-werbung ~ section > .container,
  .hw-werbung ~ .hw-portalnav .hw-portalnav-innen{
    margin-left:322px; margin-right:auto;
    max-width:min(1200px, calc(100vw - 360px));
  }
  .hw-werbung ~ .hw-portalnav .hw-portalnav-innen{ padding-left:0; padding-right:0; }
  .hw-werbung-text strong{ font-size:15px; }
  .hw-werbung-text span{ font-size:13px; }
}
@media (max-width:1239px){
  .hw-werbung-buehne{ min-height:104px; }
  .hw-werbung{ margin:12px 14px 0; }
  /* Alle Anzeigen gleich aufbauen, nicht nur die sichtbare: sonst
     misst die Bühne je nach Motiv eine andere Höhe und die Seite
     rutscht beim Wechsel. */
  .hw-werbung-karte{ display:flex; align-items:stretch; }
  /* Kleiner und vollständig: object-fit cover schnitt Produktfotos an,
     beim Fernglas fehlte die Hälfte. contain zeigt das ganze Bild. */
  .hw-werbung-karte img{
    width:96px; height:88px; min-height:0; aspect-ratio:auto;
    object-fit:contain; background:var(--hw-flaeche,#fff); padding:6px;
    flex:0 0 auto; align-self:center;
  }
  .hw-werbung-text{ padding:9px 12px 9px 4px; min-width:0; align-self:center; }
  .hw-werbung-text strong{ font-size:14.5px; }
  .hw-werbung-text span{
    font-size:12.5px; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
  }
}


/* ---------------------------------------------------------- Schueler-Kurskalender */

.skal-kopf{ display:flex; align-items:center; gap:10px; margin-bottom:14px; }
.skal-kopf h3{ margin:0; min-width:170px; text-align:center; }
.hw-heute{ border-left:3px solid var(--hw-olive,#6B7A3F); }
.hw-teilnahme-haken{ color:var(--hw-olive,#6B7A3F); font-weight:700; font-size:14px; white-space:nowrap; }

.skal-raster{ display:grid; grid-template-columns:repeat(7, minmax(0, 1fr)); gap:4px; }
.skal-wochentag{
  font-size:11px; letter-spacing:1.2px; text-transform:uppercase;
  color:var(--hw-text-muted,#6d7370); text-align:center; padding:4px 0 6px;
}
.skal-tag{
  min-height:92px; padding:6px; border:.5px solid var(--hairline,#e2e5dd);
  border-radius:6px; background:var(--hw-flaeche,#fff); display:flex; flex-direction:column; gap:3px;
}
.skal-tag.ist-anderer-monat{ background:var(--hw-snow,#fafbf8); opacity:.55; }
.skal-tag.ist-heute{ border-color:var(--hw-olive,#6B7A3F); box-shadow:inset 0 0 0 1.5px var(--hw-olive,#6B7A3F); }
.skal-datum{
  font-size:12.5px; font-weight:700; font-variant-numeric:tabular-nums;
  color:var(--hw-text-muted,#6d7370); margin-bottom:2px;
}
.skal-tag.ist-heute .skal-datum{ color:var(--hw-olive,#6B7A3F); }

.skal-termin{
  display:block; position:relative; padding:3px 7px; border-radius:4px;
  font-size:11.5px; line-height:1.35; text-decoration:none;
  color:var(--hw-anthracite,#1A1F22); background:var(--hw-snow,#fafbf8);
  border-left:3px solid var(--hairline-strong,#cfd4c9);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.skal-termin:hover{ background:var(--hw-flaeche,#fff); }
.skal-termin span{ font-weight:700; margin-right:4px; font-variant-numeric:tabular-nums; }
.skal-termin em{ font-style:normal; color:var(--hw-olive,#6B7A3F); font-weight:700; margin-left:3px; }
.skal-termin.ist-theorie{ border-left-color:#5b7fa6; }
.skal-termin.ist-praxis{ border-left-color:var(--hw-olive,#6B7A3F); }
.skal-termin.ist-schiessen{ border-left-color:#b0762c; }
.skal-termin.ist-pruefung{ border-left-color:var(--hw-s-rot,#a03a3a); }
.skal-termin.ist-meiner{ background:#eef2e6; }
/* Fortsetzung eines Termins, der schon am Vortag begonnen hat. */
.skal-termin.ist-weiter{ border-left-style:dashed; }
.skal-termin.ist-weiter > b,
.skal-termin.ist-weiter > span{ color:var(--hw-text-muted,#6d7370); }

.skal-legende{
  display:flex; align-items:center; gap:7px; flex-wrap:wrap;
  margin-top:12px; font-size:12.5px; color:var(--hw-text-muted,#6d7370);
}
.skal-legende > span:not(.skal-punkt){ margin-right:10px; }
.skal-punkt{
  width:10px; height:10px; border-radius:2px; display:inline-block;
  background:var(--hairline-strong,#cfd4c9);
}
.skal-punkt.ist-theorie{ background:#5b7fa6; }
.skal-punkt.ist-praxis{ background:var(--hw-olive,#6B7A3F); }
.skal-punkt.ist-schiessen{ background:#b0762c; }
.skal-punkt.ist-pruefung{ background:var(--hw-s-rot,#a03a3a); }
.skal-punkt.ist-meiner-punkt{
  background:transparent; width:auto; height:auto; color:var(--hw-olive,#6B7A3F); font-weight:700;
}

@media (max-width:760px){
  .skal-raster{ grid-template-columns:1fr; }
  .skal-wochentag{ display:none; }
  .skal-tag{ min-height:0; }
  .skal-tag.ist-anderer-monat{ display:none; }
  .skal-tag:not(.ist-heute):not(:has(.skal-termin)){ display:none; }
  .skal-datum::after{ content:" · " attr(data-wt); font-weight:400; }
  .skal-termin{ white-space:normal; }
}


/* Hinweis der Verwaltung an einem Termin */
.hw-termin-info{
  display:block; margin-top:5px; padding:7px 10px; border-radius:4px;
  background:#f4f1e4; border-left:3px solid #c9b458;
  font-size:12.5px; line-height:1.5; color:#5a5230;
}


/* Kalender-Abo im Schuelerbereich */
.hw-abo-wege{ display:flex; gap:10px; flex-wrap:wrap; margin-bottom:14px; }
.hw-abo-android{ font-size:13.5px; line-height:1.6; color:var(--hw-anthracite,#1A1F22); }
.hw-abo-adresse{ display:flex; gap:8px; margin-top:8px; }
.hw-abo-adresse input{
  flex:1 1 auto; min-width:0; padding:9px 12px; font-size:12.5px;
  border:1px solid var(--hairline-strong,#cfd4c9); border-radius:4px; background:var(--hw-flaeche,#fff);
  font-family:ui-monospace, Menlo, monospace;
}


/* Kalender-Export oben rechts auf der Terminseite */
.hw-kal-export{ margin-left:auto; display:flex; gap:8px; flex-wrap:wrap; }
.hw-kal-export .btn{
  padding:9px 16px; font-size:12.5px; font-weight:700;
  border:1.5px solid var(--hw-olive,#6B7A3F); border-radius:6px;
  background:var(--hw-flaeche,#fff); color:var(--hw-olive,#6B7A3F);
  letter-spacing:.4px; text-decoration:none;
}
.hw-kal-export .btn:hover{ background:var(--hw-olive,#6B7A3F); color:#fff; }
.hw-kal-export .btn:first-child{ background:var(--hw-olive,#6B7A3F); color:#fff; }
.hw-kal-export .btn:first-child:hover{ background:var(--hw-anthracite,#1A1F22); border-color:var(--hw-anthracite,#1A1F22); }
@media (max-width:700px){
  .hw-kal-export{ flex-basis:100%; margin-left:0; margin-top:8px; }
}


/* Der runde Info-Knopf zur Erklaerseite */
.hw-hilfeknopf{
  position:fixed; right:18px; bottom:18px; z-index:80;
  width:46px; height:46px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:var(--hw-anthracite,#1A1F22); color:#fff;
  font-size:21px; font-weight:700; text-decoration:none;
  box-shadow:0 4px 16px rgba(26,31,34,.3);
}
.hw-hilfeknopf:hover{ background:var(--hw-olive,#6B7A3F); }

.hw-hilfe p{ font-size:14.5px; line-height:1.65; margin:0; }
.hw-hilfe p + p, .hw-hilfe ul + p{ margin-top:10px; }
.hw-hilfe h3{ margin:0 0 10px; }
.hw-hilfe-liste{ margin:10px 0 0; padding-left:20px; }
.hw-hilfe-liste li{ font-size:14.5px; line-height:1.65; margin-bottom:6px; }


/* Teilnehmerliste fuer die Ausbildungsbestaetigungen */
.hw-teilnehmerblock{ padding:4px 0 14px; }
.hw-teilnehmertabelle{ width:100%; border-collapse:collapse; font-size:13.5px; }
.hw-teilnehmertabelle th{
  text-align:left; font-size:11px; letter-spacing:1px; text-transform:uppercase;
  color:var(--hw-text-muted,#6d7370); padding:0 10px 6px 0; font-weight:600;
}
.hw-teilnehmertabelle td{ padding:7px 10px 7px 0; border-top:.5px solid var(--hairline,#e2e5dd); vertical-align:middle; }
.hw-teilnehmertabelle a{ color:inherit; font-weight:600; }
.hw-teilnehmertabelle tr.ist-unvollstaendig td{ background:#fbf1f1; }
.hw-teilnehmertabelle em{ color:var(--hw-s-rot,#a03a3a); font-style:normal; }
.hw-teilnehmertabelle .btn{ padding:5px 10px; font-size:11.5px; }


/* Nachrichten der Jagdschule im Schuelerportal */
.hw-nachricht{
  padding:12px 0; border-top:.5px solid var(--hairline,#e2e5dd);
}
.hw-nachricht:first-of-type{ border-top:0; }
.hw-nachricht.ist-neu{
  background:#fdf4e6; margin:0 -14px; padding-left:14px; padding-right:14px; border-radius:4px;
  border-left:3px solid var(--hw-neu,#d4820a);
}
.hw-nachricht-kopf{ display:flex; gap:10px; align-items:baseline; flex-wrap:wrap; margin-bottom:4px; }
.hw-nachricht-kopf strong{ font-size:14.5px; }
.hw-nachricht-kopf span{ font-size:12px; color:var(--hw-text-muted,#6d7370); }
.hw-nachricht p{ margin:0; font-size:14px; line-height:1.6; }


/* Kleiner Zusatz an einem Ausbildungspunkt in der Verwaltung */
.hw-editnote{
  display:block; font-size:11.5px; color:var(--hw-text-muted,#6d7370); margin-top:2px;
}


/* Schiessnachweise als Zeilenblock in der Verwaltung */
.hw-schiesszeilen{ padding:10px 0 14px; border-top:.5px solid var(--hairline,#e2e5dd); }
.hw-schiesszeilen:first-of-type{ border-top:0; }
.hw-sz-kopf{ display:flex; align-items:baseline; gap:10px; flex-wrap:wrap; margin-bottom:8px; }
.hw-sz-kopf strong{ font-size:14.5px; }
.hw-sz-kopf span{ font-size:12px; color:var(--hw-text-muted,#6d7370); }
.hw-sz-zeile{ display:flex; gap:8px; align-items:center; margin-bottom:5px; }
.hw-sz-nr{
  flex:0 0 22px; text-align:right; font-size:12px; color:var(--hw-text-muted,#6d7370);
  font-variant-numeric:tabular-nums;
}
.hw-sz-zeile input[type="date"]{ flex:0 0 150px; }
.hw-sz-zeile input[type="text"]{ flex:1 1 auto; min-width:0; }
.hw-sz-zeile input{
  padding:7px 10px; border:1px solid var(--hairline-strong,#cfd4c9); border-radius:4px;
  font:inherit; font-size:13px; background:var(--hw-flaeche,#fff);
}
@media (max-width:760px){
  .hw-sz-zeile{ flex-wrap:wrap; }
  .hw-sz-zeile input[type="date"]{ flex:1 1 130px; }
}

.hw-sz-titel span{ font-size:10.5px; letter-spacing:1px; text-transform:uppercase; color:var(--hw-text-muted,#6d7370); }
.hw-sz-zeile input[type="time"]{ padding:7px 8px; }


/* ----------------------------------------------------------------
   Kalender abonnieren: drei nummerierte Wege, gleich im Schueler-
   portal und in der Verwaltung. Die Ziffern stimmen mit den kleinen
   Knoepfen oben rechts (hw-kal-export) ueberein.
   ---------------------------------------------------------------- */
.hw-abo{
  background:var(--hw-flaeche,#fff); border:1px solid var(--hw-linie,#E3E1DA); border-radius:10px;
  padding:22px 24px; margin:22px 0;
}
.hw-abo--eng{ padding:18px; }
.hw-abo-kopf h3{ margin:0 0 6px; font-size:17px; }
.hw-abo-kopf p{ margin:0 0 16px; font-size:13.5px; line-height:1.55; color:var(--hw-grau,#6A6D68); max-width:62ch; }
.hw-abo-liste{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; }
.hw-abo-weg{
  display:flex; align-items:center; gap:16px;
  padding:16px 2px;
  border-top:.5px solid var(--hairline,#e2e5dd);
}
.hw-abo-weg:first-child{ border-top:0; padding-top:6px; }
.hw-abo-nr{
  flex:0 0 auto; width:30px; height:30px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:var(--hw-olive,#6B7A3F); color:#fff;
  font-weight:800; font-size:14px; line-height:1;
}
.hw-abo-text{ flex:1 1 auto; display:flex; flex-direction:column; gap:2px; min-width:0; }
.hw-abo-text strong{ font-size:14.5px; }
.hw-abo-text span{ font-size:12.5px; color:var(--hw-grau,#6A6D68); line-height:1.5; }
.hw-abo-weg .btn{
  flex:0 0 auto; padding:9px 16px; font-size:12.5px; font-weight:700;
  border:1.5px solid var(--hw-olive,#6B7A3F); border-radius:6px;
  background:var(--hw-flaeche,#fff); color:var(--hw-olive,#6B7A3F); text-decoration:none; white-space:nowrap;
}
.hw-abo-weg .btn:hover{ background:var(--hw-olive,#6B7A3F); color:#fff; }
.hw-abo-weg .btn-primary{ background:var(--hw-olive,#6B7A3F); color:#fff; }
.hw-abo-weg .btn-primary:hover{ background:var(--hw-anthracite,#1A1F22); border-color:var(--hw-anthracite,#1A1F22); }
@media (max-width:640px){
  .hw-abo{ padding:18px 14px; }
  .hw-abo-weg{ flex-wrap:wrap; gap:10px; }
  .hw-abo-text{ flex:1 1 calc(100% - 44px); }
  .hw-abo-weg .btn{
    flex:1 1 100%; margin-left:0; white-space:normal;
    text-align:center; justify-content:center; padding:11px 12px;
  }
}

/* Die Ziffer in den kleinen Export-Knoepfen oben rechts */
.hw-kal-export .btn b{
  display:inline-flex; align-items:center; justify-content:center;
  width:17px; height:17px; margin-right:6px; border-radius:50%;
  background:var(--hw-olive,#6B7A3F); color:#fff; font-size:11px; line-height:1;
}
.hw-kal-export .btn:first-child b,
.hw-kal-export .btn:hover b{ background:var(--hw-flaeche,#fff); color:var(--hw-olive,#6B7A3F); }

/* Marke fuer Eintraege, die aus dem Schuelerportal kommen */
.hw-marke--selbst{
  background:var(--hw-olive,#6B7A3F); border-color:var(--hw-olive,#6B7A3F); color:#fff;
}


/* Knopfreihen im Schuelerbereich: statt klickbarer Woerter im Text */
.hw-knopfreihe{ display:flex; flex-wrap:wrap; gap:10px; margin:12px 0 0; }
.hw-knopfreihe .btn{ text-decoration:none; }
@media (max-width:520px){
  .hw-knopfreihe{ flex-direction:column; }
  .hw-knopfreihe .btn{ justify-content:center; text-align:center; }
}

/* Im Schuelerbereich nichts unterstreichen, was kein Knopf ist */
.hw-dash a{ text-decoration:none; }


/* Terminzeilen in der Schuelerakte: alles linksbuendig, Knoepfe in einer Reihe */
.hw-satz-unter{ font-size:12.5px; color:var(--hw-text-muted,#6d7370); text-align:left; }
.hw-satz-quelle{ font-size:12.5px; color:var(--hw-text-muted,#6d7370); text-align:left; margin:6px 0 0; }
.hw-satz-knoepfe{ display:flex; align-items:flex-end; gap:8px; flex-wrap:wrap; flex:1 1 100%; }
.hw-satz-knoepfe .btn{
  padding:9px 16px; font-size:12.5px; font-weight:700; border-radius:6px;
  border:1.5px solid var(--hw-linie,#E3E1DA); background:var(--hw-flaeche,#fff);
  color:var(--hw-anthracite,#1A1F22); text-decoration:none; white-space:nowrap;
}
.hw-satz-knoepfe .btn:hover{ border-color:var(--hw-olive,#6B7A3F); color:var(--hw-olive,#6B7A3F); }
.hw-satz-knoepfe .btn-primary{
  background:var(--hw-olive,#6B7A3F); border-color:var(--hw-olive,#6B7A3F); color:#fff;
}
.hw-satz-knoepfe .btn-primary:hover{ background:var(--hw-anthracite,#1A1F22); border-color:var(--hw-anthracite,#1A1F22); color:#fff; }
.hw-satz-knoepfe .hw-btn-rot{
  background:var(--hw-s-rot,#9c3a3a); border-color:var(--hw-s-rot,#9c3a3a); color:#fff;
}
.hw-satz-knoepfe .hw-btn-rot:hover{ background:#8a3030; border-color:#8a3030; color:#fff; }
/* Erklaertexte in der Akte linksbuendig, nicht mittig wie die Seitenhinweise */
#termine > .hw-hinweis{ text-align:left; margin:6px 0 14px; }

/* ----------------------------------------------------------------
   Knopfoptik im ganzen Schuelerbereich.
   Der Grundstil .btn der Website ist ein Textknopf ohne Rahmen; im
   Schuelerportal soll jedes klickbare Ziel als Knopf zu erkennen sein.
   ---------------------------------------------------------------- */
.hw-dash .btn,
.hw-knopfreihe .btn,
.hw-alles-reihe .btn,
.hw-abschluss .btn,
.hw-zurueck .btn,
.hw-hilfe .btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:11px 18px; border-radius:6px;
  border:1.5px solid var(--hw-olive,#6B7A3F);
  background:var(--hw-flaeche,#fff); color:var(--hw-olive,#6B7A3F);
  font-weight:700; font-size:13px; letter-spacing:.4px; text-decoration:none;
  transition: transform var(--dauer-druck,140ms) var(--ease-out-stark, cubic-bezier(0.23,1,0.32,1)),
              background-color 150ms ease, color 150ms ease, border-color 150ms ease;
}
.hw-dash .btn:hover,
.hw-knopfreihe .btn:hover,
.hw-alles-reihe .btn:hover,
.hw-abschluss .btn:hover,
.hw-zurueck .btn:hover,
.hw-hilfe .btn:hover{
  background:var(--hw-olive,#6B7A3F); color:#fff; border-color:var(--hw-olive,#6B7A3F);
}
.hw-dash .btn-primary,
.hw-knopfreihe .btn-primary,
.hw-alles-reihe .btn-primary,
.hw-abschluss .btn-primary,
.hw-hilfe .btn-primary{
  background:var(--hw-olive,#6B7A3F); color:#fff; border-color:var(--hw-olive,#6B7A3F);
}
.hw-dash .btn-primary:hover,
.hw-knopfreihe .btn-primary:hover,
.hw-alles-reihe .btn-primary:hover,
.hw-abschluss .btn-primary:hover,
.hw-hilfe .btn-primary:hover{
  background:var(--hw-anthracite,#1A1F22); border-color:var(--hw-anthracite,#1A1F22); color:#fff;
}
/* Abmelden bleibt zurueckhaltend, aber klar als Knopf erkennbar */
.hw-abschluss .btn[href*="abmelden"]{ border-color:var(--hw-s-rot,#9c3a3a); color:var(--hw-s-rot,#9c3a3a); }
.hw-abschluss .btn[href*="abmelden"]:hover{ background:var(--hw-s-rot,#9c3a3a); border-color:var(--hw-s-rot,#9c3a3a); color:#fff; }
/* Die Monatspfeile im Kalender bleiben schmal */
.skal-kopf .btn{ padding:8px 14px; }

/* Filterleiste über der Schülerliste: alle, Jagdschüler, externe */
.hw-filterleiste{ display:flex; gap:8px; flex-wrap:wrap; margin:0 0 16px; }
.hw-filter{
  display:inline-flex; align-items:center; gap:8px;
  padding:8px 15px; border-radius:99px; text-decoration:none;
  border:1px solid var(--hairline,#e2e5dd); background:var(--hw-flaeche,#fff);
  font-size:13px; font-weight:600; color:var(--hw-text-muted,#6d7370);
}
.hw-filter span{
  font-size:11.5px; font-weight:700; padding:1px 7px; border-radius:99px;
  background:var(--hw-stone,#F2F4EF); color:var(--hw-anthracite,#1A1F22);
}
.hw-filter:hover{ border-color:var(--hw-olive,#6B7A3F); color:var(--hw-olive,#6B7A3F); }
.hw-filter.ist-aktiv{
  background:var(--hw-olive,#6B7A3F); border-color:var(--hw-olive,#6B7A3F); color:#fff;
}
.hw-filter.ist-aktiv span{ background:rgba(255,255,255,.22); color:#fff; }
.hw-marke--extern{
  display:inline-block; margin-left:6px; padding:1px 8px; border-radius:99px;
  background:var(--hw-sand,#FAF9F6); border:1px solid var(--hw-olive,#6B7A3F);
  color:var(--hw-olive,#6B7A3F); font-size:11px; font-weight:700; font-style:normal;
}

/* Nachrichten, die aus dem Schülerportal kommen */
.hw-notiz.ist-vom-schueler{
  border-left:3px solid var(--hw-olive,#6B7A3F);
  background:var(--hw-sand,#FAF9F6);
}
.hw-nachricht.ist-eigene{
  border-left:3px solid var(--hw-olive,#6B7A3F);
  background:var(--hw-sand,#FAF9F6);
}


/* ================================================================
   CRAFT-SCHICHT
   Bewegung mit Zweck, nach Emil Kowalskis Regeln, im PRODUCT-Modus:
   das hier ist eine Arbeitsoberfläche, keine Werbeseite. Also kurze
   Dauern (unter 300ms), ruhige Kurven, Feedback statt Show. Es wird
   ausschließlich transform und opacity bewegt.
   ================================================================ */

:root{
  /* Eigene Kurven, die schwachen Browser-Defaults reichen nicht. */
  --ease-out-stark:    cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out-stark: cubic-bezier(0.77, 0, 0.175, 1);
  --ease-ios:          cubic-bezier(0.32, 0.72, 0, 1);
  --dauer-druck: 140ms;   /* Knopfdruck, muss sofort wirken */
  --dauer-ui:    200ms;   /* Ein- und Ausblenden im Alltag */
  --dauer-ruhe:  320ms;   /* Einmalige Momente, etwa der Fortschritt */
}

/* ---------------------------------------------------------------- Druckgefühl
   Jedes drückbare Element gibt nach. Ohne das fühlt sich eine
   Oberfläche wie ein Papierausdruck an. */
.btn, button, .hw-filter, .hw-abo-weg .btn, .hw-satz-knoepfe .btn,
.hw-kal-export .btn, .hw-adminnav a, .hw-rand-suchknopf{
  transition: transform var(--dauer-druck) var(--ease-out-stark),
              background-color var(--dauer-ui) ease,
              border-color var(--dauer-ui) ease,
              color var(--dauer-ui) ease;
}
.btn:active, button:active, .hw-filter:active,
.hw-kal-export .btn:active, .hw-rand-suchknopf:active{ transform: scale(0.97); }
.hw-listeneintrag:active, .hw-tabellenzeile:active, .hw-zeile:active{ transform: scale(0.995); }

/* ---------------------------------------------------------------- Zeilen
   Listenzeilen heben sich beim Überfahren leicht an, der Pfeil zieht
   mit. Nur Transform, damit nichts neu umbricht. */
.hw-listeneintrag, .hw-tabellenzeile, .hw-zeile, .hw-tz, .skal-termin{
  transition: transform var(--dauer-ui) var(--ease-out-stark),
              background-color var(--dauer-ui) ease,
              border-color var(--dauer-ui) ease;
}
@media (hover:hover) and (pointer:fine){
  /* Die Zeile selbst bleibt liegen: verschiebt man die Trefferfläche
     unter dem Zeiger, kann sie flackern. Bewegt wird nur der Pfeil,
     der Rest antwortet über die Fläche. */
  .hw-listeneintrag:hover, .hw-tabellenzeile:hover{ background: var(--hw-sand,#FAF9F6); }
  .hw-listeneintrag:hover .hw-pfeil, .hw-tabellenzeile:hover .hw-pfeil,
  .hw-zeile:hover .hw-pfeil{ transform: translateX(3px); }
  .skal-termin:hover{ filter: brightness(0.97); }
}
.hw-pfeil{ transition: transform var(--dauer-ui) var(--ease-out-stark); }

/* ---------------------------------------------------------------- Fokus
   Wer mit der Tastatur arbeitet, muss sehen, wo er steht. */
:focus-visible{
  outline: 2px solid var(--hw-olive,#6B7A3F);
  outline-offset: 2px;
  border-radius: 4px;
}
.hw-feld input:focus-visible, .hw-feld select:focus-visible, .hw-feld textarea:focus-visible{
  outline-offset: 0;
}

/* ---------------------------------------------------------------- Eintreten
   Meldungen und frisch geöffnete Karten blenden kurz auf, statt zu
   springen. Nie aus scale(0), nichts verschwindet real komplett. */
@supports (transition-behavior: allow-discrete){
  .hw-melde{
    transition: opacity var(--dauer-ui) var(--ease-out-stark),
                transform var(--dauer-ui) var(--ease-out-stark);
  }
  @starting-style{
    .hw-melde{ opacity: 0; transform: translateY(-6px); }
  }
}

/* Reiter in der Akte werden dutzende Male am Tag gewechselt. Nach Emils
   Regel wird so etwas nicht animiert: Bewegung bei häufigen Aktionen
   macht die Oberfläche langsam, nicht schöner. Bleibt bewusst hart. */
@keyframes hw-auf{
  from{ opacity: 0; transform: translateY(6px); }
  to{ opacity: 1; transform: none; }
}

/* ---------------------------------------------------------------- Staffel
   Nur die ersten Zeilen laufen leicht versetzt ein, 40ms Versatz. Bewusst
   nicht die ganze Liste: was weiter unten steht, darf nie darauf warten,
   dass eine Animation läuft, sonst bleibt Inhalt unsichtbar. Alles
   darunter erscheint sofort. */
.hw-liste .hw-listeneintrag:nth-child(-n+5),
.hw-tabellenliste > .hw-tabellenzeile:nth-child(-n+5),
.hw-abo-liste .hw-abo-weg{
  animation: hw-auf 260ms var(--ease-out-stark) both;
}
.hw-liste .hw-listeneintrag:nth-child(2),
.hw-tabellenliste > .hw-tabellenzeile:nth-child(2),
.hw-abo-liste .hw-abo-weg:nth-child(2){ animation-delay: 40ms; }
.hw-liste .hw-listeneintrag:nth-child(3),
.hw-tabellenliste > .hw-tabellenzeile:nth-child(3),
.hw-abo-liste .hw-abo-weg:nth-child(3){ animation-delay: 95ms; }
.hw-liste .hw-listeneintrag:nth-child(4),
.hw-tabellenliste > .hw-tabellenzeile:nth-child(4){ animation-delay: 120ms; }
.hw-liste .hw-listeneintrag:nth-child(5),
.hw-tabellenliste > .hw-tabellenzeile:nth-child(5){ animation-delay: 190ms; }

/* ---------------------------------------------------------------- Fortschritt
   Der Balken wächst einmal von links auf seinen Stand. Das ist der
   eine Moment, der etwas erklärt: wie weit jemand ist. */
.hw-balken i{
  transform-origin: left center;
  animation: hw-wachsen 620ms var(--ease-ios) both;
}
@keyframes hw-wachsen{
  from{ transform: scaleX(0); }
  to{ transform: scaleX(1); }
}

/* ---------------------------------------------------------------- Speichern
   Beim Absenden zeigt der Knopf, dass etwas passiert. Sonst klickt
   man zweimal. */
/* Der Knopf zeigt, dass es läuft, bleibt aber bedienbar: eine tote
   Fläche ist schlimmer als ein doppelter Klick. */
button[data-laeuft]{ opacity: .78; }
button[data-laeuft]::after{
  content: "";
  display: inline-block; width: 12px; height: 12px; margin-left: 9px;
  border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%;
  animation: hw-dreht 720ms linear infinite;
  vertical-align: -2px;
}
@keyframes hw-dreht{ to{ transform: rotate(360deg); } }

/* ---------------------------------------------------------------- Seitenwechsel
   Zwischen zwei Seiten wird überblendet statt hart geschnitten. */
@view-transition{ navigation: auto; }
::view-transition-old(root){ animation: hw-raus 120ms var(--ease-out-stark) both; }
::view-transition-new(root){ animation: hw-rein 180ms var(--ease-out-stark) both; }
@keyframes hw-raus{ to{ opacity: 0; } }
@keyframes hw-rein{ from{ opacity: 0; transform: translateY(6px); } }

/* ---------------------------------------------------------------- Rücksicht
   Wer Bewegung abgestellt hat, bekommt keine. Inhalte bleiben da. */
@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .hw-balken i{ animation: none; transform: none; }
  .hw-karte[data-reiter], .hw-liste .hw-listeneintrag,
  .hw-tabellenliste > .hw-tabellenzeile, .hw-abo-liste .hw-abo-weg,
  .hw-liste .hw-listeneintrag:nth-child(-n+5),
  .hw-tabellenliste > .hw-tabellenzeile:nth-child(-n+5){
    animation: none !important; opacity: 1; transform: none;
  }
  @view-transition{ navigation: none; }
}


/* Der Druck muss zuletzt gelten, sonst überschreibt ihn eine frühere Regel. */
.hw-dash .btn:active, .hw-knopfreihe .btn:active, .hw-alles-reihe .btn:active,
.hw-abschluss .btn:active, .hw-zurueck .btn:active, .hw-hilfe .btn:active,
.hw-satz-knoepfe .btn:active, .hw-abo-weg .btn:active{ transform: scale(0.97); }
@media (prefers-reduced-motion: reduce){
  .hw-dash .btn:active, .hw-knopfreihe .btn:active, .hw-alles-reihe .btn:active,
  .hw-abschluss .btn:active, .hw-zurueck .btn:active, .hw-hilfe .btn:active,
  .hw-satz-knoepfe .btn:active, .hw-abo-weg .btn:active{ transform: none; }
}


/* ================================================================
   HANDY ZUERST
   Fast alle Schüler sind mit dem Telefon unterwegs. Auf schmalen
   Bildschirmen steht deshalb jedes Eingabefeld allein in seiner Zeile,
   linksbündig und über die volle Breite. Vorher quetschten sich zwei
   Felder nebeneinander, ein Datumsfeld blieb 102px breit.
   ================================================================ */
@media (max-width: 680px){
  .hw-formreihe{
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
  }
  /* Inline gesetzte Breiten aus den Masken hier bewusst aufheben. */
  .hw-formreihe > *{
    flex: 1 1 auto !important;
    max-width: none !important;
    width: 100%;
  }
  .hw-formreihe > .btn,
  .hw-formreihe > button{ width: 100%; justify-content: center; }
  .hw-formreihe > .hw-haken{ padding-bottom: 0; }
  .hw-feld > span{ min-height: 0; }
  .hw-form{ gap: 14px; }
  .hw-karte{ padding-left: 16px; padding-right: 16px; }
}


/* ================================================================
   PORTAL-NAVIGATION
   Am Telefon eine feste Leiste unten am Daumen, wie in einer App:
   vier Ziele, immer da, kein Menü und kein Scrollen dafür. Am Rechner
   dieselbe Auswahl als ruhige Reiterzeile unter dem Kopf.
   ================================================================ */
.hw-portalnav{
  background:var(--hw-flaeche,#fff);
  border-bottom: .5px solid var(--hairline,#e2e5dd);
}
.hw-portalnav-innen{
  max-width: 1200px; margin: 0 auto; padding: 0 22px;
  display: flex; gap: 4px;
}
.hw-pn-punkt{
  display: inline-flex; align-items: center; gap: 9px;
  padding: 15px 16px 13px;
  border-bottom: 2px solid transparent;
  color: var(--hw-text-muted,#6d7370);
  font-size: 14px; font-weight: 600; text-decoration: none;
  transition: color 160ms ease, border-color 160ms ease;
}
.hw-pn-punkt svg{ width: 18px; height: 18px; flex: 0 0 auto; }
.hw-pn-punkt:hover{ color: var(--hw-anthracite,#1A1F22); }
.hw-pn-punkt.ist-aktiv{
  color: var(--hw-olive,#6B7A3F);
  border-bottom-color: var(--hw-olive,#6B7A3F);
}

@media (max-width: 760px){
  /* Feste Leiste unten: der Daumen kommt hin, ohne die Hand zu drehen. */
  .hw-portalnav{
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 90;
    border-top: .5px solid var(--hairline,#e2e5dd); border-bottom: 0;
    padding-bottom: env(safe-area-inset-bottom, 0px);
    box-shadow: 0 -6px 20px rgba(26,31,34,.06);
  }
  .hw-portalnav-innen{ padding: 0; gap: 0; }
  .hw-pn-punkt{
    flex: 1 1 0; min-width: 0;
    flex-direction: column; align-items: center; gap: 4px;
    padding: 9px 4px 8px;
    border-bottom: 0; border-top: 2px solid transparent;
    font-size: 10.5px; letter-spacing: .2px; text-align: center;
  }
  .hw-pn-punkt svg{ width: 21px; height: 21px; }
  .hw-pn-punkt.ist-aktiv{ border-top-color: var(--hw-olive,#6B7A3F); border-bottom-color: transparent; }
  .hw-pn-punkt span{ white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }

  /* Platz für die Leiste, damit nichts darunter verschwindet. */
  body{ padding-bottom: calc(62px + env(safe-area-inset-bottom, 0px)); }
  /* Der runde Knopf bleibt unten rechts, sitzt aber über der Leiste und
     ist etwas kleiner. Damit er beim Ausfüllen nicht im Weg steht,
     blendet er sich aus, solange ein Feld den Finger hat (siehe JS). */
  .hw-hilfeknopf{
    width: 44px !important; height: 44px !important; right: 14px; font-size: 19px;
    bottom: calc(74px + env(safe-area-inset-bottom, 0px));
  }
  .footer{ margin-bottom: 0; }
}

/* ---------------------------------------------------------------- Menü in zwei Ebenen
   Ohne JavaScript sind beide Listen sichtbar, es geht also nichts
   verloren. Mit JavaScript liegt der Schülerbereich vorn. */
.hw-menue-ebene{ display: none; }
.hw-menue-ebene.ist-offen{ display: block; }
html.kein-js .hw-menue-ebene{ display: block; }
.hw-menue-weiter, .hw-menue-zurueck{
  display: flex; align-items: center; gap: 8px; width: 100%;
  background: none; border: 0; padding: 0;
  font: inherit; color: inherit; cursor: pointer; text-align: left;
}
.hw-menue-zurueck{
  padding: 6px 0 14px; margin-bottom: 6px;
  border-bottom: .5px solid rgba(255,255,255,.16);
  font-size: 13px; opacity: .8;
}
.hw-menue-raus{ color: var(--hw-s-rot,#a13b3b) !important; }

/* ---------------------------------------------------------------- Rubriken aufklappen
   Nur am Telefon, und nur wenn JavaScript da ist: sonst steht alles
   offen. Der Griff ist die ganze Kopfzeile, nicht nur ein kleiner Pfeil. */
.hw-klapp-griff{
  display: flex; align-items: center; gap: 12px; width: 100%;
  background: none; border: 0; padding: 0; margin: 0;
  font: inherit; color: inherit; text-align: left; cursor: pointer;
}
.hw-klapp-griff > *:first-child{ flex: 1 1 auto; min-width: 0; }
.hw-klapp-griff h3{ margin: 0; }
.hw-klapp-pfeil{
  flex: 0 0 auto; font-size: 22px; line-height: 1;
  color: var(--hw-text-muted,#6d7370);
  transform: rotate(90deg);
  transition: transform 200ms var(--ease-out-stark, cubic-bezier(0.23,1,0.32,1));
}
.hw-klapp.ist-offen .hw-klapp-pfeil{ transform: rotate(270deg); }
/* Diese drei Regeln gehoeren der aelteren, mit JavaScript gesteuerten
   Klappkarte (hw_klapp_js setzt die Klasse ist-offen). Sie duerfen die
   spaeter dazugekommenen <details class="hw-klapp"> nicht anfassen: die
   klappen ueber [open] auf und haetten sonst einen Inhalt, der auch im
   aufgeklappten Zustand unsichtbar bleibt. */
.hw-klapp:not(details) .hw-klapp-inhalt{ display: none; }
.hw-klapp:not(details).ist-offen .hw-klapp-inhalt{ display: block; padding-top: 14px; }
.hw-klapp:not(details):not(.ist-offen){ padding-bottom: 16px; }
@media (prefers-reduced-motion: reduce){
  .hw-klapp-pfeil{ transition: none; }
}

/* ---------------------------------------------------------------- Schlanker Fuß im Portal */
.hw-fuss-schlank{
  background: var(--hw-anthracite,#1A1F22); color: #fff;
  padding: 20px 22px; text-align: center;
}
.hw-fuss-zeile{
  display: flex; flex-wrap: wrap; gap: 8px 18px; justify-content: center;
  font-size: 13px;
}
.hw-fuss-zeile a{ color: #fff; opacity: .82; text-decoration: none; }
.hw-fuss-zeile a:hover{ opacity: 1; }
.hw-fuss-klein{ margin-top: 10px; font-size: 11.5px; opacity: .58; }

/* ---------------------------------------------------------------- Kopf am Telefon
   Im angemeldeten Portal ist der Bildkopf Ballast: Der Schüler weiß,
   wo er ist, und will zu seinen Sachen. Also kürzer halten. */
@media (max-width: 760px){
  .hw-dash-kopf.hero .hero-inner,
  body:has(.hw-portalnav) .hero .hero-inner{ padding-top: 30px !important; padding-bottom: 26px !important; }
  body:has(.hw-portalnav) .hero h1{ font-size: 26px; margin-bottom: 4px; }
  body:has(.hw-portalnav) .hero .hero-lead{ font-size: 13.5px; line-height: 1.45; }
  body:has(.hw-portalnav) .hero-eyebrow{ font-size: 9.5px; padding: 3px 9px; }
  .hw-abschluss{ padding-top: 18px; }
}


/* ================================================================
   POSTFACH
   Der Verlauf liest sich wie ein Gespräch: was von der Jagdschule
   kommt, steht links; was der Schüler geschrieben hat, ist abgesetzt.
   Feste Struktur, damit am Telefon nichts verrutscht.
   ================================================================ */
.hw-verlauf{ display: flex; flex-direction: column; gap: 12px; }
.hw-blase{
  max-width: 88%;
  padding: 12px 14px;
  border: .5px solid var(--hairline,#e2e5dd);
  border-left: 3px solid var(--hw-olive,#6B7A3F);
  border-radius: 4px 10px 10px 4px;
  background:var(--hw-flaeche,#fff);
}
.hw-blase.ist-eigene{
  margin-left: auto;
  border-left: .5px solid var(--hairline,#e2e5dd);
  border-right: 3px solid var(--hw-stone,#c9cfc0);
  border-radius: 10px 4px 4px 10px;
  background: var(--hw-sand,#FAF9F6);
}
.hw-blase-kopf{
  display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap;
  margin-bottom: 6px;
  font-size: 11.5px; letter-spacing: .3px; text-transform: uppercase;
  color: var(--hw-text-muted,#6d7370);
}
.hw-blase-kopf span{ font-weight: 700; color: var(--hw-olive,#6B7A3F); }
.hw-blase.ist-eigene .hw-blase-kopf span{ color: var(--hw-anthracite,#1A1F22); }
.hw-blase-kopf time{ margin-left: auto; font-size: 11px; text-transform: none; letter-spacing: 0; }
.hw-blase-betreff{ font-weight: 700; font-size: 14px; margin-bottom: 3px; }
.hw-blase-text{ font-size: 14.5px; line-height: 1.55; overflow-wrap: anywhere; }

/* Neuigkeiten für alle */
.hw-news{ display: flex; flex-direction: column; }
.hw-news-satz{
  padding: 14px 0;
  border-top: .5px solid var(--hairline,#e2e5dd);
}
.hw-news-satz:first-child{ border-top: 0; padding-top: 2px; }
.hw-news-kopf{ display: flex; align-items: baseline; gap: 12px; margin-bottom: 5px; }
.hw-news-kopf h4{ margin: 0; font-size: 15.5px; flex: 1 1 auto; }
.hw-news-kopf time{ font-size: 12px; color: var(--hw-text-muted,#6d7370); flex: 0 0 auto; }
.hw-news-satz p{ margin: 0; font-size: 14.5px; line-height: 1.55; }
.hw-news-satz.ist-wichtig{
  border-left: 3px solid var(--hw-s-arbeit,#b8892f);
  padding-left: 12px; margin-left: -12px;
}
.hw-news-satz.ist-neu h4::after{
  content: "neu";
  display: inline-block; margin-left: 8px; padding: 1px 7px; border-radius: 99px;
  background: var(--hw-neu,#d4820a); color: #fff;
  font-size: 10px; letter-spacing: .6px; text-transform: uppercase; vertical-align: 2px;
}

/* Der Punkt am Postfach in der Leiste */
.hw-pn-bild{ position: relative; display: inline-flex; }
.hw-pn-punktzahl{
  position: absolute; top: -5px; right: -8px;
  min-width: 16px; height: 16px; padding: 0 4px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 99px; background: var(--hw-neu,#d4820a); color: #fff;
  font-size: 10px; font-weight: 700; font-style: normal; line-height: 1;
  border: 1.5px solid #fff;
}

/* Posteingang der Verwaltung */
.hw-postliste{ display: flex; flex-direction: column; }
.hw-post{
  display: flex; align-items: flex-start; gap: 12px;
  padding: 13px 2px;
  border-top: .5px solid var(--hairline,#e2e5dd);
}
.hw-post:first-child{ border-top: 0; }
.hw-post.ist-neu{ background: #fdf7ee; }
.hw-post-haken{ flex: 0 0 20px; padding-top: 2px; }
.hw-post-text{ flex: 1 1 auto; min-width: 0; text-decoration: none; color: inherit; display: block; }
.hw-post-kopf{ display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin-bottom: 3px; }
.hw-post-kopf strong{ font-size: 14.5px; }
.hw-post-richtung{
  font-size: 11px; font-style: normal; letter-spacing: .4px; text-transform: uppercase;
  color: var(--hw-text-muted,#6d7370);
}
.hw-post-kopf time{ margin-left: auto; font-size: 12px; color: var(--hw-text-muted,#6d7370); }
.hw-post-inhalt{ display: block; font-size: 13.5px; line-height: 1.5; color: var(--hw-text-muted,#6d7370); }
.hw-post.ist-neu .hw-post-inhalt{ color: var(--hw-anthracite,#1A1F22); }
.hw-post.ist-neu .hw-post-kopf strong::before{
  content: ""; display: inline-block; width: 7px; height: 7px; margin-right: 7px;
  border-radius: 50%; background: var(--hw-neu,#d4820a); vertical-align: 1px;
}
.hw-satz-text{ font-size: 14px; line-height: 1.55; }

@media (max-width: 680px){
  .hw-blase{ max-width: 94%; }
  .hw-post-kopf time{ margin-left: 0; flex-basis: 100%; }
}

/* ---------------------------------------------------------------- Empfängerwahl
   Drei Wege, klar getrennt: alle, ein Kurs, einzelne Schüler. */
/* Raster statt Flex: gleich breite Felder, egal wie lang der Text ist. */
.hw-wahlreihe{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 10px;
}
.hw-wahl{
  display: flex; align-items: flex-start; gap: 10px;
  padding: 12px 14px; border: 1.5px solid var(--hairline,#e2e5dd); border-radius: 8px;
  cursor: pointer; background:var(--hw-flaeche,#fff);
  transition: border-color 160ms ease, background-color 160ms ease;
}
/* Der Formularstil zieht Eingabefelder auf volle Breite. Ein Auswahl-
   knopf ist keine Eingabezeile: er bleibt klein, sonst sprengt er die
   Kästen und schiebt die Beschriftung heraus. */
.hw-wahl input[type="radio"],
.hw-wahl input[type="checkbox"],
.hw-schuelerzeile input[type="checkbox"]{
  width: auto !important; min-width: 0; flex: 0 0 auto;
  margin: 3px 0 0; padding: 0;
}
.hw-wahl:hover{ border-color: var(--hw-olive,#6B7A3F); }
.hw-wahl:has(input:checked){ border-color: var(--hw-olive,#6B7A3F); background: var(--hw-sand,#FAF9F6); }
.hw-wahl input{ margin-top: 2px; flex: 0 0 auto; }
.hw-wahl span{ display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.hw-wahl strong{ font-size: 14px; }
.hw-wahl em{ font-style: normal; font-size: 12px; color: var(--hw-text-muted,#6d7370); }

.hw-schuelerwahl{
  max-height: 260px; overflow-y: auto;
  border: .5px solid var(--hairline,#e2e5dd); border-radius: 6px;
  background:var(--hw-flaeche,#fff);
}
.hw-schuelerzeile{
  display: flex; align-items: center; gap: 10px;
  padding: 9px 12px; border-top: .5px solid var(--hairline,#e2e5dd);
  cursor: pointer; font-size: 13.5px;
}
.hw-schuelerzeile:first-child{ border-top: 0; }
.hw-schuelerzeile:hover{ background: var(--hw-sand,#FAF9F6); }
.hw-sz-name{ flex: 1 1 auto; font-weight: 600; min-width: 0; }
.hw-sz-kurs{ flex: 0 0 auto; font-size: 12px; color: var(--hw-text-muted,#6d7370); }

/* ---------------------------------------------------------------- Abgesagte Termine
   Steht im Google Kalender ENTFÄLLT vor dem Termin, ist er abgesagt:
   sichtbar bleiben, aber nichts mehr zum Anklicken. */
.hw-tz.ist-entfallen{ opacity: .72; }
.hw-tz.ist-entfallen .hw-tz-text strong{ text-decoration: line-through; text-decoration-thickness: 1px; }
.hw-entfaellt{
  display: inline-block; margin-left: 8px; padding: 2px 9px; border-radius: 99px;
  background: var(--hw-s-rot,#a13b3b); color: #fff;
  font-size: 10.5px; font-style: normal; font-weight: 700;
  letter-spacing: .6px; text-transform: uppercase; text-decoration: none;
  vertical-align: 2px;
}
.skal-termin.ist-entfallen{ opacity: .55; text-decoration: line-through; }

/* ---------------------------------------------------------------- Kalender-Download
   Ein Aufklapper statt drei Knöpfen: nimmt wenig Platz, die Wege sind
   erst da, wenn man sie braucht. <details> ist nativ, funktioniert
   also auch ohne JavaScript. */
.hw-kalmenue{
  border: 1.5px solid var(--hw-olive,#6B7A3F); border-radius: 8px;
  background:var(--hw-flaeche,#fff); overflow: hidden;
  /* Rechts andocken und nur so breit wie nötig, nicht über die ganze
     Zeile: der Kalender ist eine Nebensache, kein Hauptweg. */
  width: max-content; max-width: 100%;
  margin-left: auto;
}
/* Offen fest 320px: sonst bleibt die Breite beim geschlossenen Zustand
   stehen und der Inhalt ragt aus dem Rahmen. */
.hw-kalmenue[open]{ width: min(320px, 100%); }
.hw-kalmenue > summary{
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 11px 15px; cursor: pointer; list-style: none;
  color: var(--hw-olive,#6B7A3F); font-weight: 700; font-size: 13px; letter-spacing: .4px;
}
.hw-kalmenue > summary::-webkit-details-marker{ display: none; }
.hw-kalmenue-titel{ display: inline-flex; align-items: center; gap: 9px; }
.hw-kalmenue-titel svg{ width: 17px; height: 17px; }
.hw-kalmenue-pfeil{
  font-size: 20px; line-height: 1; transform: rotate(90deg);
  transition: transform 180ms var(--ease-out-stark, cubic-bezier(0.23,1,0.32,1));
}
.hw-kalmenue[open] > summary{ border-bottom: .5px solid var(--hairline,#e2e5dd); }
.hw-kalmenue[open] .hw-kalmenue-pfeil{ transform: rotate(270deg); }
.hw-kalmenue-inhalt{ padding: 4px 0 6px; }
.hw-kalmenue-satz{
  margin: 10px 15px 12px; font-size: 12.5px; line-height: 1.5;
  color: var(--hw-text-muted,#6d7370);
}
.hw-kalweg{
  display: flex; align-items: center; gap: 12px; width: 100%;
  padding: 11px 15px; text-decoration: none; color: inherit;
  border-top: .5px solid var(--hairline,#e2e5dd);
  transition: background-color 160ms ease;
  box-sizing: border-box;
}
.hw-kalweg:hover{ background: var(--hw-sand,#FAF9F6); }
.hw-kalweg-text{ flex: 1 1 0; display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.hw-kalweg-text strong, .hw-kalweg-text em{ overflow-wrap: break-word; }
.hw-kalweg-text strong{ font-size: 13.5px; }
.hw-kalweg-text em{ font-style: normal; font-size: 11.5px; color: var(--hw-text-muted,#6d7370); }
.hw-kalweg-pfeil{ flex: 0 0 auto; color: var(--hw-text-muted,#6d7370); font-size: 19px; line-height: 1; }
@media (max-width: 680px){
  /* Auch am Telefon rechts bleiben und schmal, nicht über die Breite. */
  .hw-kalmenue[open]{ width: 100%; }
  .hw-kal-export{ margin-left: auto; max-width: 100%; }
}
@media (prefers-reduced-motion: reduce){
  .hw-kalmenue-pfeil{ transition: none; }
}


/* ---------------------------------------------------------------- Terminzeilen
   Links das Datum als eigener Block, der sich abhebt: Wochentag klein,
   Tag groß, Monat klein. Daneben der Termin, rechts auf gleicher Höhe
   der Knopf. So sieht man beim Überfliegen zuerst den Tag. */
.hw-tz{
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  gap: 14px;
  padding: 12px 0;
}
.hw-tz-tag{
  flex: 0 0 auto;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  width: 52px; padding: 7px 0 6px;
  border-radius: 8px;
  background: var(--hw-sand,#FAF9F6);
  border: .5px solid var(--hairline,#e2e5dd);
  line-height: 1;
}
.hw-tz-tag em{
  font-style: normal; font-size: 10.5px; font-weight: 700; letter-spacing: .8px;
  text-transform: uppercase; color: var(--hw-olive,#6B7A3F);
}
.hw-tz-tag b{
  font-size: 21px; font-weight: 700; font-variant-numeric: tabular-nums;
  margin: 2px 0 1px; color: var(--hw-anthracite,#1A1F22);
}
.hw-tz-tag span{
  display: block; font-size: 10.5px; letter-spacing: .4px;
  color: var(--hw-text-muted,#6d7370);
}
/* Basis 0, damit der Text den freien Platz wirklich füllt. Mit
   flex-basis auto blieb er auf Inhaltsbreite stehen und brach vier Mal
   um, während daneben Leerraum stand. */
.hw-tz-text{ flex: 1 1 0; min-width: 0; }
.hw-tz > form,
.hw-tz > .hw-tz-knopf,
.hw-tz > .hw-teilnahme-haken,
.hw-tz > .hw-hinweis,
.hw-tz > .hw-tz-std{
  flex: 0 0 auto; width: auto; text-align: right;
}
/* Das Formular selbst soll keinen Platz beanspruchen: seine
   versteckten Felder machten es 174px breit und drückten den Text auf
   null. display:contents nimmt es aus dem Layout, der Knopf wird
   direkt zum Element der Zeile. */
.hw-tz > form{ display: contents; }
.hw-tz > form > input[type="hidden"]{ display: none !important; }
.hw-tz > form > .hw-tz-knopf,
.hw-tz > form > button{ flex: 0 0 auto; margin-left: 0; }
.hw-tz .hw-tz-knopf{ white-space: nowrap; }
/* Nur umbrechen, wenn ein Wort wirklich zu lang ist, und dann mit
   Trennung statt mitten im Wort ("Sicherheitsüberprüfu ng"). */
.hw-tz-text strong{ overflow-wrap: break-word; hyphens: auto; }
.hw-tz.ist-entfallen .hw-tz-tag{ opacity: .6; }

@media (max-width: 680px){
  .hw-tz{ gap: 11px; padding: 13px 0; }
  .hw-tz-tag{ width: 46px; padding: 6px 0 5px; }
  .hw-tz-tag b{ font-size: 18px; }
  .hw-tz-tag em, .hw-tz-tag span{ font-size: 9.5px; }
  .hw-tz .hw-tz-text strong{ font-size: 14px; line-height: 1.35; }
  .hw-tz-text span{ font-size: 12px; }
  .hw-tz .hw-tz-knopf{ padding: 9px 12px; font-size: 11.5px; }
  .hw-tz > .hw-hinweis{ max-width: 108px; font-size: 11px; }
}


/* ---------------------------------------------------------------- Bitte an den Schüler
   Steht bewusst vor den Ausbildungssachen und sieht anders aus als die
   Karten: eine Bitte, keine Rubrik. */
.hw-bitte{
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
  margin: 0 0 20px; padding: 15px 18px;
  border-left: 4px solid var(--hw-s-arbeit,#b8892f);
  border-radius: 4px;
  background: #fdf8ee;
}
.hw-bitte-text{ flex: 1 1 220px; display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.hw-bitte-text strong{ font-size: 15px; }
.hw-bitte-text span{ font-size: 13.5px; line-height: 1.5; color: var(--hw-text-muted,#6d7370); }
.hw-bitte .btn{ flex: 0 0 auto; }
@media (max-width: 560px){
  .hw-bitte{ padding: 14px 15px; }
  .hw-bitte .btn{ flex: 1 1 100%; justify-content: center; }
}

/* ---------------------------------------------------------------- Unterlagen
   Skripte, Merkblätter und Videos als ruhige Liste mit Zeichen davor,
   damit man Art und Inhalt beim Überfliegen erkennt. */
.hw-unterlagen{ display: flex; flex-direction: column; }
.hw-unterlage{
  display: flex; align-items: center; gap: 13px;
  padding: 12px 2px; text-decoration: none; color: inherit;
  border-top: .5px solid var(--hairline,#e2e5dd);
  transition: background-color 160ms ease;
}
.hw-unterlage:first-child{ border-top: 0; }
.hw-unterlage:hover{ background: var(--hw-sand,#FAF9F6); }
.hw-unterlage-zeichen{
  flex: 0 0 auto; width: 34px; height: 34px; border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  background: var(--hw-sand,#FAF9F6); border: .5px solid var(--hairline,#e2e5dd);
  color: var(--hw-olive,#6B7A3F);
}
.hw-unterlage-zeichen svg{ width: 17px; height: 17px; }
.hw-uz-video{ color: #8a5a2b; }
.hw-uz-link{ color: var(--hw-text-muted,#6d7370); }
.hw-unterlage-text{ flex: 1 1 0; min-width: 0; font-size: 14.5px; font-weight: 600; overflow-wrap: break-word; }
.hw-unterlage-art{
  flex: 0 0 auto; font-size: 10.5px; font-weight: 700; letter-spacing: .6px;
  text-transform: uppercase; color: var(--hw-text-muted,#6d7370);
}
@media (max-width: 680px){
  .hw-unterlage{ gap: 11px; padding: 11px 2px; }
  .hw-unterlage-zeichen{ width: 30px; height: 30px; }
  .hw-unterlage-text{ font-size: 14px; }
}

/* ---------------------------------------------------------------- Termine suchen und filtern
   Bei über sechzig Terminen findet man den richtigen sonst nicht. */
.hw-terminfilter{ margin: 0 0 14px; display: flex; flex-direction: column; gap: 10px; }
.hw-terminsuche{
  display: flex; align-items: center; gap: 9px;
  padding: 9px 12px; border-radius: 8px;
  border: 1px solid var(--hairline,#e2e5dd); background:var(--hw-flaeche,#fff);
}
.hw-terminsuche:focus-within{ border-color: var(--hw-olive,#6B7A3F); }
.hw-terminsuche svg{ width: 16px; height: 16px; flex: 0 0 auto; color: var(--hw-text-muted,#6d7370); }
.hw-terminsuche input{
  flex: 1 1 0; min-width: 0; border: 0; outline: none; background: none;
  font: inherit; font-size: 14px; padding: 0;
}
/* Der Browser setzt bei Suchfeldern ein eigenes Kreuz. Zusammen mit
   unserem wären es zwei. */
.hw-terminsuche input::-webkit-search-cancel-button,
.hw-terminsuche input::-webkit-search-decoration,
.hw-suche input::-webkit-search-cancel-button,
.hw-schuelersuche::-webkit-search-cancel-button{
  -webkit-appearance: none; appearance: none; display: none;
}
.hw-tsuche-weg{
  flex: 0 0 auto; border: 0; background: none; cursor: pointer;
  font-size: 20px; line-height: 1; color: var(--hw-text-muted,#6d7370); padding: 0 2px;
}
.hw-tfilter{ display: flex; gap: 7px; flex-wrap: wrap; }
.hw-tf{
  padding: 6px 13px; border-radius: 99px; cursor: pointer;
  border: 1px solid var(--hairline,#e2e5dd); background:var(--hw-flaeche,#fff);
  font: inherit; font-size: 12.5px; font-weight: 600; color: var(--hw-text-muted,#6d7370);
  transition: background-color 160ms ease, color 160ms ease, border-color 160ms ease;
}
.hw-tf:hover{ border-color: var(--hw-olive,#6B7A3F); color: var(--hw-olive,#6B7A3F); }
.hw-tf.ist-aktiv{
  background: var(--hw-olive,#6B7A3F); border-color: var(--hw-olive,#6B7A3F); color: #fff;
}
.hw-tstand{ margin: 0; font-size: 12.5px; color: var(--hw-text-muted,#6d7370); }
@media (max-width: 680px){
  .hw-tfilter{ gap: 6px; }
  .hw-tf{ padding: 6px 11px; font-size: 12px; }
}

/* Vorschläge unter dem Suchfeld */
.hw-tvorschlaege{
  display: flex; flex-wrap: wrap; gap: 7px;
  margin: -2px 0 2px;
}
.hw-tvorschlag{
  padding: 6px 12px; border-radius: 99px; cursor: pointer;
  border: 1px dashed var(--hw-olive,#6B7A3F); background:var(--hw-flaeche,#fff);
  font: inherit; font-size: 12.5px; color: var(--hw-olive,#6B7A3F);
  max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.hw-tvorschlag:hover{ background: var(--hw-olive,#6B7A3F); color: #fff; border-style: solid; }

/* ---------------------------------------------------------------- Anzeigen, aufgewertet
   Ein Etikett sagt in einem Wort, worum es geht, darunter Titel, Satz
   und ein dezenter Hinweis, dass man tippen kann. */
.hw-werbung-etikett{
  display: inline-block; align-self: flex-start;
  margin-bottom: 5px; padding: 2px 9px; border-radius: 99px;
  background: var(--hw-olive,#6B7A3F); color: #fff;
  font-style: normal; font-size: 9.5px; font-weight: 700;
  letter-spacing: 1px; text-transform: uppercase;
}
.hw-werbung-mehr{
  display: inline-flex; align-items: center; gap: 5px;
  margin-top: 7px; color: var(--hw-olive,#6B7A3F);
  font-size: 12px; font-weight: 700; letter-spacing: .3px;
}
.hw-werbung-mehr b{ font-weight: 400; font-size: 15px; line-height: 1; transition: transform 160ms var(--ease-out-stark, cubic-bezier(0.23,1,0.32,1)); }
.hw-werbung-karte:hover .hw-werbung-mehr b{ transform: translateX(3px); }
.hw-werbung-karte{ transition: border-color 180ms ease, box-shadow 180ms ease, opacity 420ms var(--ease-out-stark, cubic-bezier(0.23,1,0.32,1)); }
.hw-werbung-karte:hover{
  border-color: var(--hw-olive,#6B7A3F);
  box-shadow: 0 6px 20px rgba(26,31,34,.07);
}
.hw-werbung-text{ display: flex; flex-direction: column; }
@media (prefers-reduced-motion: reduce){
  .hw-werbung-mehr b{ transition: none; }
}

/* Verstecktes bleibt versteckt: .hw-tz setzt display:flex und würde das
   hidden-Attribut sonst überstimmen. Genau deshalb blieben beim Filtern
   Termine anderer Art stehen. */
.hw-tz[hidden],
.hw-monat[hidden],
.hw-schuelerzeile[hidden],
.hw-unterlage[hidden],
.hw-post[hidden]{ display: none !important; }


/* ================================================================
   VERWALTUNG AM TELEFON
   Drei Menüzeilen nehmen auf einem Handy ein Drittel des Bildschirms.
   Dort wird jede Zeile zu einem Auswahlfeld, die Randleiste zu einer
   Knopfreihe. Alles bleibt mit dem Daumen erreichbar.
   ================================================================ */
@media (max-width: 760px){
  .hw-adminnav--versteckt{ display: none !important; }

  .hw-navwahl{
    display: flex; align-items: center; gap: 10px;
    margin-bottom: 8px; padding: 7px 12px;
    background:var(--hw-flaeche,#fff); border: 1px solid var(--hairline,#e2e5dd); border-radius: 8px;
  }
  .hw-navwahl-marke{
    flex: 0 0 auto; font-size: 10px; font-weight: 700; letter-spacing: 1px;
    text-transform: uppercase; color: var(--hw-text-muted,#6d7370);
  }
  .hw-navwahl-feld{
    flex: 1 1 0; min-width: 0; border: 0; background: none; outline: none;
    font: inherit; font-size: 14.5px; font-weight: 600;
    color: var(--hw-anthracite,#1A1F22);
    padding: 4px 0;
  }
  .hw-navwahl:focus-within{ border-color: var(--hw-olive,#6B7A3F); }

  /* Die Randleiste wird zur Knopfreihe über dem Inhalt. */
  .hw-rand{
    position: static; width: auto; max-height: none; overflow: visible;
    flex-direction: row; flex-wrap: wrap; gap: 8px;
    margin: 0 0 12px;
  }
  .hw-rand-gruppe{
    flex-direction: row; flex: 1 1 auto; border-radius: 8px; overflow: hidden;
  }
  .hw-rand a, .hw-rand button{
    flex: 1 1 auto; text-align: center; padding: 10px 12px;
    border-top: 0; border-left: .5px solid var(--hairline,#e2e5dd);
    white-space: nowrap;
  }
  .hw-rand-gruppe > :first-child{ border-left: 0; }
  .hw-rand .hw-nav-wer{ display: none; }
  /* Überschrift und Inhalt auf dieselbe senkrechte Linie. Der
     Inhaltsbereich hatte außen nochmal Abstand, dadurch standen die
     Kästen 22px weiter rechts als die Überschrift. */
  .hw-admin{ padding-left: 0 !important; padding-right: 0 !important; }
  .hw-admin > .container, .hw-app-titel > .container{
    padding-left: 22px !important;
    padding-right: 22px !important;
  }
  .hw-app-titel h1, .hw-app-titel p{ margin-left: 0; margin-right: 0; }
  .hw-suchblatt{ width: calc(100vw - 24px); }
}

/* Die Leiste unten in der Verwaltung, wie im Schülerportal */
.hw-vleiste{ display: none; }
@media (max-width: 760px){
  .hw-vleiste{
    display: block;
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 90;
    background:var(--hw-flaeche,#fff); border-top: .5px solid var(--hairline,#e2e5dd);
    padding-bottom: env(safe-area-inset-bottom, 0px);
    box-shadow: 0 -6px 20px rgba(26,31,34,.06);
  }
  .hw-vleiste-innen{ display: flex; }
  .hw-vl-punkt{
    flex: 1 1 0; min-width: 0;
    display: flex; flex-direction: column; align-items: center; gap: 4px;
    padding: 9px 3px 8px; text-decoration: none;
    border-top: 2px solid transparent;
    color: var(--hw-text-muted,#6d7370);
    font-size: 10px; font-weight: 600; letter-spacing: .2px; text-align: center;
  }
  .hw-vl-punkt svg{ width: 20px; height: 20px; }
  .hw-vl-punkt.ist-aktiv{ color: var(--hw-olive,#6B7A3F); border-top-color: var(--hw-olive,#6B7A3F); }
  .hw-vl-bild{ position: relative; display: inline-flex; }
  .hw-vl-punkt span:last-child{ white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
  /* Platz, damit die Leiste nichts verdeckt */
  body{ padding-bottom: calc(60px + env(safe-area-inset-bottom, 0px)); }
  .hw-app-fuss{ margin-bottom: 0; }
}


@media (max-width: 760px){
  /* Am Telefon nur Logo und Verwaltung, der Seitenname steht ohnehin
     gleich darunter als Überschrift. */
  .hw-app-ort--links{ display:none; }
  .hw-app-marke img{ height:46px; }
  .hw-app-kopf{ padding:0 16px; height:64px; }
}

@media (max-width: 760px){
  /* Die Seitenebene bleibt sichtbar, wird aber waagerecht schiebbar,
     damit sie nicht über drei Zeilen umbricht. */
  .hw-adminnav--schiebbar{
    display: flex !important;
    flex-wrap: nowrap;
    overflow-x: auto;
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    margin-bottom: 8px;
  }
  .hw-adminnav--schiebbar::-webkit-scrollbar{ display: none; }
  .hw-adminnav--schiebbar a{
    flex: 0 0 auto; scroll-snap-align: start; white-space: nowrap;
  }
}

/* Das Blatt hinter „Mehr": alle Bereiche, die nicht in die fünf Plätze
   der Leiste passen. */
.hw-mehrblatt{
  position: fixed; inset: 0; z-index: 95;
  background: rgba(26,31,34,.42);
  display: flex; align-items: flex-end;
}
.hw-mehrblatt[hidden]{ display: none; }
.hw-mehrblatt-innen{
  width: 100%; max-height: 82vh; overflow-y: auto;
  background:var(--hw-flaeche,#fff); border-radius: 14px 14px 0 0;
  padding: 6px 0 calc(78px + env(safe-area-inset-bottom, 0px));
  animation: hw-blatt-auf 220ms var(--ease-out-stark, cubic-bezier(0.23,1,0.32,1)) both;
}
@keyframes hw-blatt-auf{ from{ transform: translateY(14px); opacity: 0; } }
.hw-mehrblatt-kopf{
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 20px 10px; border-bottom: .5px solid var(--hairline,#e2e5dd);
}
.hw-mehrblatt-kopf strong{ font-size: 15px; }
.hw-mehrblatt-zu{
  border: 0; background: none; font-size: 26px; line-height: 1; cursor: pointer;
  color: var(--hw-text-muted,#6d7370); padding: 0 4px;
}
/* Die Übersicht hinter "Mehr": Gruppen mit kleiner Überschrift, darunter
   die Punkte als Kacheln zu zweit nebeneinander. Vorher war es eine
   lange Reihe gleicher Zeilen, durch die man scrollen musste; so passen
   drei Bereiche auf einen Blick, und die Zeichen führen das Auge. */
.hw-mehrblatt-gruppe{
  display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap;
  padding: 16px 18px 8px;
}
.hw-mehrblatt-gruppe span{
  font-size: 11px; font-weight: 700; letter-spacing: 1.3px;
  text-transform: uppercase; color: var(--hw-anthracite,#1A1F22);
}
.hw-mehrblatt-gruppe em{
  font-style: normal; font-size: 11.5px; color: var(--hw-text-muted,#6d7370);
}
.hw-mehrblatt-raster{
  display: grid; grid-template-columns: 1fr 1fr; gap: 8px; padding: 0 14px 4px;
}
.hw-mehrblatt-punkt{
  position: relative; display: flex; align-items: center; gap: 10px;
  min-height: 52px; padding: 10px 12px; border-radius: 12px;
  border: .5px solid var(--hairline,#e2e5dd); background: var(--hw-snow,#fafbf8);
  text-decoration: none; color: var(--hw-anthracite,#1A1F22);
  font-size: 13px; font-weight: 600; line-height: 1.28;
  transition: background-color .16s ease, border-color .16s ease, transform .16s ease;
}
.hw-mehrblatt-punkt:active{ transform: scale(.98); background: #eef2e6; }
.hw-mehrblatt-punkt.ist-hier{
  border-color: var(--hw-olive,#6B7A3F); background: #eef2e6;
}
.hw-mp-bild{
  flex: 0 0 auto; display: flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; border-radius: 9px;
  background: var(--hw-flaeche,#fff); border: .5px solid var(--hairline,#e2e5dd);
  color: var(--hw-olive,#6B7A3F);
}
.hw-mp-bild svg{ width: 17px; height: 17px; }
.hw-mp-text{
  flex: 1 1 auto; min-width: 0;
  /* Trennen ja, aber an sinnvollen Stellen: "Bescheinigunge / n" war
     schlimmer als eine Zeile mehr. */
  overflow-wrap: break-word; hyphens: auto; -webkit-hyphens: auto;
}
.hw-mp-zahl{
  flex: 0 0 auto; font-style: normal; font-size: 11px; font-weight: 700;
  min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--hw-olive,#6B7A3F); color: #fff;
}
.hw-mehrblatt-punkt.hat-wartende{ border-color: var(--hw-olive,#6B7A3F); }
/* Ganz unten: wer angemeldet ist und der Weg hinaus, abgesetzt vom Rest. */
.hw-mehrblatt-fuss{
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  margin-top: 14px; padding: 14px 18px 0; border-top: .5px solid var(--hairline,#e2e5dd);
}
.hw-mehrblatt-fuss .hw-mehrblatt-wer{ padding: 0; }
.hw-mehrblatt-fuss .hw-mehrblatt-raus{
  flex: 0 0 auto; padding: 10px 16px; border-radius: 999px;
  border: .5px solid var(--hairline-strong,#cfd4c9); background: var(--hw-flaeche,#fff);
  color: var(--hw-s-rot,#a03a3a); font-size: 13px; font-weight: 600; text-decoration: none;
}
@media (max-width: 360px){
  .hw-mehrblatt-raster{ grid-template-columns: 1fr; }
}
body.hw-mehr-offen{ overflow: hidden; }
@media (min-width: 761px){
  .hw-mehrblatt{ display: none !important; }
}
@media (prefers-reduced-motion: reduce){
  .hw-mehrblatt-innen{ animation: none; }
}


@media (max-width: 760px){
  /* Die frühere Randleiste gibt es nicht mehr. Der Suchknopf sitzt jetzt
     als Lupe im Kopf, auch am Telefon; das Feld klappt darunter über die
     ganze Breite auf. */
  .hw-rand-suchknopf{ display: none !important; }
  /* Am Telefon fuellt das Blatt fast die Breite und sitzt dicht unter
     dem Kopf, damit die Tastatur den Rest nicht wegdrueckt. */
  .hw-suchblatt{ top: 54px; width: calc(100vw - 20px); }
  .hw-nav-suche{ padding: 2px 12px; }
  .hw-nav-suche input{ font-size: 16px; padding: 14px 2px; }   /* kein Hineinzoomen auf dem iPhone */
  .hw-nav-vorschlaege{ max-height: min(52vh, 380px); }
  .hw-suchtipp{ display: none; }
  .hw-rand-gruppe{ flex: 1 1 100%; }
}

/* ---------------------------------------------------------------- Erklärung auf Abruf
   Der kleine Fragezeichen-Knopf neben der Überschrift. Der Erklärtext
   erscheint erst, wenn jemand ihn braucht. */
.hw-erklaer-knopf{
  display: inline-flex; align-items: center; justify-content: center;
  width: 19px; height: 19px; margin-left: 9px; padding: 0;
  border: 1px solid var(--hairline-strong,#cfd4c9); border-radius: 50%;
  background:var(--hw-flaeche,#fff); color: var(--hw-text-muted,#6d7370);
  font: inherit; font-size: 11px; font-weight: 700; line-height: 1;
  cursor: pointer; vertical-align: 2px;
  transition: background-color 160ms ease, color 160ms ease, border-color 160ms ease;
}
.hw-erklaer-knopf:hover{ border-color: var(--hw-olive,#6B7A3F); color: var(--hw-olive,#6B7A3F); }
.hw-erklaer-knopf.ist-offen{
  background: var(--hw-olive,#6B7A3F); border-color: var(--hw-olive,#6B7A3F); color: #fff;
}
/* Der Text gehört unter sein Fragezeichen. Die Kopfzeile ist ein Flex-
   Streifen; mit einer eigenen Zeile (flex-basis 100 %) rutscht der Text
   direkt unter den Knopf, statt am Ende des Kastens zu erscheinen. */
/* Mit Erklärtext darf die Kopfzeile umbrechen, aber nur für den Text:
   Überschrift und Zähler bleiben zusammen in der ersten Zeile, der Text
   kommt darunter. Ohne die Reihenfolge fiel der Zähler mit nach unten. */
.hw-bereich-kopf.hat-erklaerung{ flex-wrap: wrap; }
.hw-bereich-kopf.hat-erklaerung > h3,
.hw-bereich-kopf.hat-erklaerung > h4,
.hw-bereich-kopf.hat-erklaerung > div:not(.hw-bereich-stand):not(.hw-erklaer-text){ order: 1; }
.hw-bereich-kopf.hat-erklaerung > .hw-bereich-stand{ order: 2; margin-left: auto; }
.hw-bereich-kopf.hat-erklaerung > .hw-erklaer-text{ order: 3; flex: 1 0 100%; }
.hw-erklaer-text{
  flex: 1 0 100%;
  margin: 10px 0 0; padding: 10px 12px; border-radius: 6px;
  background: var(--hw-sand,#FAF9F6);
  border-left: 3px solid var(--hw-olive,#6B7A3F);
  text-align: left !important;
  font-size: 13.5px; line-height: 1.55; color: var(--hw-text-muted,#6d7370);
  overflow-wrap: anywhere;
}
.hw-erklaer-text[hidden]{ display: none !important; }
/* Der Text erbt sonst Versalien und Sperrsatz der Überschrift, in der
   sein Fragezeichen steckt. */
.hw-erklaer-text{
  text-transform: none !important;
  letter-spacing: normal !important;
  font-weight: 400 !important;
}
/* Steckt die Kopfzeile im zugeklappten Griff, bleibt die Erklärung
   trotzdem lesbar und nimmt die ganze Breite ein. */
.hw-klapp-griff .hw-erklaer-text{ margin-bottom: 4px; cursor: auto; }

/* ---------------------------------------------------------------- Kacheln
   Die Aktivität der Schüler auf einen Blick: eine Zahl je Kachel,
   darunter wofür sie steht. Am Telefon zwei nebeneinander. */
.hw-kacheln{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  /* Gleiche Höhe in jeder Reihe: sonst stehen am Telefon Kacheln mit
     66, 80 und 95 Pixeln nebeneinander, je nach Länge der Beschriftung. */
  grid-auto-rows: 1fr;
  gap: 10px;
  margin-bottom: 16px;
}
.hw-kachel{
  display: flex; flex-direction: column; gap: 4px;
  padding: 14px 16px;
  background:var(--hw-flaeche,#fff); border: .5px solid var(--hairline,#e2e5dd); border-radius: 10px;
  text-decoration: none; color: inherit;
  transition: border-color 160ms ease, transform 160ms var(--ease-out-stark, cubic-bezier(0.23,1,0.32,1));
}
.hw-kachel strong{
  font-size: 26px; font-weight: 700; line-height: 1;
  font-variant-numeric: tabular-nums; color: var(--hw-anthracite,#1A1F22);
}
.hw-kachel span{
  font-size: 11.5px; letter-spacing: .6px; text-transform: uppercase;
  color: var(--hw-text-muted,#6d7370); line-height: 1.35;
}
.hw-kachel.ist-lebendig{ border-color: var(--hw-olive,#6B7A3F); }
.hw-kachel.ist-lebendig strong{ color: var(--hw-olive,#6B7A3F); }
.hw-kachel.ist-offen{ border-color: var(--hw-s-rot,#a13b3b); }
.hw-kachel.ist-offen strong{ color: var(--hw-s-rot,#a13b3b); }
a.hw-kachel:hover{ border-color: var(--hw-olive,#6B7A3F); }
a.hw-kachel:active{ transform: scale(0.985); }
@media (max-width: 680px){
  .hw-kacheln{ grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .hw-kachel{ padding: 12px 13px; }
  .hw-kachel strong{ font-size: 22px; }
  .hw-kachel span{ font-size: 10.5px; letter-spacing: .4px; }
}

/* ---------------------------------------------------------------- Onlineshop
   Der Stand einer Bestellung ist die wichtigste Frage: was ist offen,
   was wartet auf Geld, was ist durch. Deshalb steht er als Reiterreihe
   ganz oben, mit der Zahl gleich daneben. Am Telefon rutschen die vier
   Reiter in zwei Reihen, keiner wird abgeschnitten. */
.hw-standreiter{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  grid-auto-rows: 1fr;
  gap: 8px;
  margin: 0 0 10px;
}
.hw-standknopf{
  display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
  padding: 11px 14px; border: 1.5px solid var(--hairline,#e2e5dd); border-radius: 10px;
  background:var(--hw-flaeche,#fff); text-decoration: none; color: inherit;
  transition: border-color 180ms cubic-bezier(.22,.61,.36,1),
              background-color 180ms cubic-bezier(.22,.61,.36,1),
              transform 120ms cubic-bezier(.22,.61,.36,1);
}
.hw-standknopf:hover{ border-color: var(--hw-olive,#6B7A3F); }
.hw-standknopf:active{ transform: scale(.985); }
.hw-standknopf.ist-aktiv{
  border-color: var(--hw-olive,#6B7A3F);
  background: var(--hw-sand,#FAF9F6);
  box-shadow: inset 0 0 0 1px var(--hw-olive,#6B7A3F);
}
.hw-sk-titel{ font-size: 13.5px; font-weight: 600; }
.hw-sk-zahl{ font-size: 20px; font-weight: 700; font-variant-numeric: tabular-nums; line-height: 1; }
/* Offene Bestellungen sind Arbeit, Wartendes ist Geld: beide farbig,
   damit man beim Draufschauen weiss, wo etwas liegt. */
.hw-sk--offen.ist-aktiv .hw-sk-zahl,
.hw-sk--offen .hw-sk-zahl{ color: var(--hw-olive,#6B7A3F); }
.hw-sk--wartend .hw-sk-zahl{ color: var(--hw-s-rot,#a03a3a); }

.hw-lagerreiter{ display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 16px; }
.hw-lagerknopf{
  padding: 7px 13px; border: .5px solid var(--hairline,#e2e5dd); border-radius: 999px;
  background:var(--hw-flaeche,#fff); font-size: 13px; text-decoration: none; color: var(--hw-text-muted,#6d7370);
  transition: border-color 180ms ease, color 180ms ease, background-color 180ms ease;
}
.hw-lagerknopf:hover{ border-color: var(--hw-olive,#6B7A3F); color: var(--hw-text,#22261f); }
.hw-lagerknopf.ist-aktiv{
  border-color: var(--hw-olive,#6B7A3F); color: #fff; background: var(--hw-olive,#6B7A3F);
}

/* Woher die Bestellung rausgeht, steht als eigenes Schild in der Zeile. */
.hw-schild--lager{ color: var(--hw-olive,#6B7A3F); border-color: var(--hw-olive,#6B7A3F); }
.hw-schild--lager.ist-strecke{ color: var(--hw-text-muted,#6d7370); border-color: var(--hairline,#e2e5dd); }

/* Kunde, Anschrift, Zahlung, Lager im Aufklapper: vier gleich gebaute
   Felder, damit das Auge immer an derselben Stelle sucht. */
.hw-best-daten{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 12px;
  margin: 14px 0 0; padding: 14px 0 0;
  border-top: .5px solid var(--hairline,#e2e5dd);
}
.hw-best-daten > div{ display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.hw-best-daten span{
  font-size: 11px; letter-spacing: .07em; text-transform: uppercase;
  color: var(--hw-text-muted,#6d7370);
}
.hw-best-daten strong{ font-size: 14px; font-weight: 600; overflow-wrap: anywhere; }
.hw-best-daten em{ font-style: normal; font-size: 13px; color: var(--hw-text-muted,#6d7370); overflow-wrap: anywhere; }
.hw-best-daten a{ font-size: 13px; color: var(--hw-olive,#6B7A3F); overflow-wrap: anywhere; }

.hw-best-fuss{ display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }

@media (max-width: 560px){
  .hw-standreiter{ grid-template-columns: repeat(2, 1fr); }
  .hw-standknopf{ padding: 10px 12px; }
  .hw-sk-zahl{ font-size: 18px; }
}

/* ---------------------------------------------------------------- Kaufstatistik
   Vier gleich hohe Kennzahlkasten, egal wie lang die Beschriftung ist:
   feste Zeilenfolge Marke, Wert, Fussnote, alle drei mit eigener Hoehe.
   Deshalb 1fr auto auto und nicht einfach untereinander. */
.hw-kennzahlen{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  /* Alle Reihen gleich hoch: sonst ist die zweite Reihe hoeher, sobald
     eine Beschriftung umbricht, und das Raster wirkt schief. */
  grid-auto-rows: 1fr;
  gap: 10px;
  margin: 0 0 16px;
}
.hw-kz{
  display: grid; grid-template-rows: auto 1fr auto; gap: 4px;
  padding: 14px 16px; border: .5px solid var(--hairline,#e2e5dd); border-radius: 12px;
  background:var(--hw-flaeche,#fff); min-width: 0;
}
.hw-kz-marke{
  font-size: 11px; letter-spacing: .07em; text-transform: uppercase;
  color: var(--hw-text-muted,#6d7370); overflow-wrap: anywhere;
}
.hw-kz-wert{ font-size: 25px; font-weight: 700; line-height: 1.15; font-variant-numeric: tabular-nums; }
.hw-kz-fuss{ font-style: normal; font-size: 12.5px; color: var(--hw-text-muted,#6d7370); overflow-wrap: anywhere; }
.hw-kz-fuss.ist-hoch{ color: var(--hw-olive,#6B7A3F); }
.hw-kz-fuss.ist-tief{ color: var(--hw-s-rot,#a03a3a); }

.hw-zeitreiter{ display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 16px; }

/* Die Kurve: eigenes SVG, keine Bibliothek. preserveAspectRatio none
   laesst sie in jeder Breite arbeiten, die Linie bleibt gleich dick. */
.hw-graph{ position: relative; }
.hw-graph svg{ display: block; width: 100%; height: 150px; overflow: visible; }
.hw-graph-linie{
  fill: none; stroke: var(--hw-olive,#6B7A3F); stroke-width: 2;
  vector-effect: non-scaling-stroke; stroke-linejoin: round; stroke-linecap: round;
}
.hw-graph-flaeche{ fill: var(--hw-olive,#6B7A3F); opacity: .1; }
.hw-graph-linie.hw-graph--zweit{ stroke: #8a6d3b; }
.hw-graph-flaeche.hw-graph--zweit{ fill: #8a6d3b; }
.hw-graph-achse{
  display: flex; justify-content: space-between;
  margin: 6px 0 0; font-size: 12px; color: var(--hw-text-muted,#6d7370);
}
.hw-graph-legende{
  display: flex; flex-wrap: wrap; gap: 6px 18px;
  margin: 12px 0 0; padding: 12px 0 0;
  border-top: .5px solid var(--hairline,#e2e5dd);
  font-size: 13px; color: var(--hw-text-muted,#6d7370);
}
.hw-graph-legende strong{ color: var(--hw-text,#22261f); }

/* Monatsbalken: alle Saeulen gleich breit, gleiche Hoehe des Kastens,
   nur die Fuellung wandert. So springt beim Wechseln nichts. */
.hw-monatsbalken{ display: flex; align-items: flex-end; gap: 6px; }
.hw-mb-satz{ flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 5px; }
.hw-mb-saeule{
  width: 100%; height: 120px; display: flex; align-items: flex-end;
  background: var(--hw-sand,#FAF9F6); border-radius: 5px; overflow: hidden;
}
.hw-mb-fuell{
  width: 100%; background: var(--hw-olive,#6B7A3F); border-radius: 5px 5px 0 0;
  transition: height 420ms cubic-bezier(.22,.61,.36,1);
}
.hw-mb-marke{ font-size: 11px; color: var(--hw-text-muted,#6d7370); }
.hw-mb-wert{ font-size: 12px; font-weight: 600; font-variant-numeric: tabular-nums; }

/* Ranglisten (Artikel, Zahlwege, Lager): immer derselbe Aufbau, damit
   die Karten nebeneinander gleich aussehen. */
.hw-rangliste{ display: flex; flex-direction: column; gap: 13px; }
.hw-rang{ display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.hw-rang-kopf{ display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.hw-rang-titel{ font-size: 14px; font-weight: 600; overflow-wrap: anywhere; min-width: 0; }
.hw-rang-zahl{ flex: 0 0 auto; font-size: 14px; font-weight: 700; font-variant-numeric: tabular-nums; }
.hw-rang-schiene{ height: 7px; border-radius: 999px; background: var(--hw-sand,#FAF9F6); overflow: hidden; }
.hw-rang-fuell{
  height: 100%; border-radius: 999px; background: var(--hw-olive,#6B7A3F);
  transition: width 420ms cubic-bezier(.22,.61,.36,1);
}
.hw-rang-fuss{ font-size: 12.5px; color: var(--hw-text-muted,#6d7370); overflow-wrap: anywhere; }

/* Zwei Karten nebeneinander wachsen mit ihrem Inhalt. Sie auf gleiche
   Höhe zu ziehen sah ordentlich aus, hinterliess in der kürzeren aber bis
   zu 500 Pixel weisse Fläche. Gleich hoch bleiben Eingabefelder in einer
   Reihe, nicht Karten mit verschieden viel Inhalt. */
.hw-doppel{ align-items: start; }
.hw-doppel > .hw-karte{ margin: 0; }

/* Notizen und Kommentare aus dem Shop */
.hw-best-notizen{
  display: flex; flex-direction: column; gap: 10px;
  margin: 14px 0 0; padding: 14px 0 0;
  border-top: .5px solid var(--hairline,#e2e5dd);
}
.hw-shopnotiz{
  padding: 11px 13px; border-radius: 9px; background: var(--hw-sand,#FAF9F6);
  border-left: 2.5px solid var(--hw-olive,#6B7A3F);
}
.hw-shopnotiz-marke{
  display: block; font-size: 11px; letter-spacing: .06em; text-transform: uppercase;
  color: var(--hw-text-muted,#6d7370); margin: 0 0 4px;
}
.hw-shopnotiz p{ margin: 0; font-size: 14px; line-height: 1.5; overflow-wrap: anywhere; }

/* Der Text einer wartenden Mail: vorformatiert, aber mit Umbruch, sonst
   schiebt eine lange Zeile die ganze Karte auf. */
.hw-mailtext{
  margin: 14px 0 12px; padding: 13px 15px;
  border-radius: 9px; background: var(--hw-sand,#FAF9F6);
  font-size: 13.5px; line-height: 1.6; overflow-wrap: anywhere;
  max-height: 320px; overflow-y: auto;
}

@media (max-width: 560px){
  .hw-kennzahlen{ grid-template-columns: repeat(2, 1fr); }
  .hw-kz{ padding: 12px 13px; }
  .hw-kz-wert{ font-size: 21px; }
  .hw-mb-saeule{ height: 90px; }
  .hw-monatsbalken{ gap: 4px; }
  .hw-mb-wert{ display: none; }
}

/* ---------------------------------------------------------------- Bestellzeile am Telefon
   Nebeneinander bleibt am Handy vom Text nur eine schmale Spalte übrig,
   in der Datum und Name mitten im Wort umbrechen. Deshalb bekommt die
   Zeile hier drei Ebenen: oben Nummer und Summe, darunter Datum und
   Kunde, ganz unten die Schilder. */
@media (max-width: 620px){
  .hw-bestellung > .hw-tabellenzeile{
    flex-wrap: wrap;
    align-items: baseline;
    gap: 4px 10px;
    padding: 13px 0;
  }
  .hw-bestellung > .hw-tabellenzeile .hw-tz-text{
    order: 1; flex: 1 1 auto; min-width: 0;
  }
  .hw-bestellung > .hw-tabellenzeile .hw-tz-zahl{
    order: 2; flex: 0 0 auto; font-size: 18px;
  }
  .hw-bestellung > .hw-tabellenzeile .hw-best-status{
    order: 3; flex: 1 1 100%;
    display: flex; flex-wrap: wrap; gap: 5px; margin-top: 3px;
  }
  /* Datum gehört neben die Nummer und darf nie mitten im Wort brechen. */
  .hw-tz-text strong{ display: inline; margin-right: 7px; }
  .hw-tz-text code{ white-space: nowrap; }
  .hw-tz-text p{ margin-top: 4px; line-height: 1.45; }
  .hw-bestellung .hw-schild{ font-size: 11px; padding: 2px 7px; }
}

/* Zugang im Mehr-Blatt: wer angemeldet ist und der Weg hinaus. */
.hw-mehrblatt-wer{
  padding: 4px 18px 8px; font-size: 13px; color: var(--hw-text-muted,#6d7370);
}
.hw-mehrblatt-wer strong{ color: var(--hw-text,#22261f); }


@media (max-width: 760px){
  /* Der Weg hinaus steht am Telefon allein im Mehr-Blatt, ganz unten.
     Oben wäre er beim Blättern ohnehin weg und nimmt nur Platz. */
  .hw-rand-fuss{ display: none !important; }
}

/* ---------------------------------------------------------------- Feinschliff Portal
   Der Kopftext der Hauptwebsite steht im Blocksatz. Im Portal zieht das
   die Wörter auseinander, als wäre die Zeile kaputt. Hier linksbündig. */
.hero .hero-lead,
.hw-hero-schmal .hero-lead,
.hw-hero-schlicht .hero-lead{ text-align: left; }

/* Ein Feld, das allein in seiner Reihe steht, darf nicht doppelt so breit
   werden wie die daneben. Es behält die halbe Breite. */
.hw-feld--halb{ flex: 1 1 calc(50% - 8px); max-width: calc(50% - 8px); }
@media (max-width: 680px){
  .hw-feld--halb{ max-width: none; }
}

/* "Selbst eintragen" ist eine Handlung, also sieht es aus wie ein Knopf
   und nicht wie ein unterstrichener Satz. */
.hw-eintragen > summary{
  display: inline-flex; align-items: center; gap: 7px;
  padding: 8px 14px; border: 1px solid var(--hairline-strong,#cfd4c9); border-radius: 999px;
  background:var(--hw-flaeche,#fff); font-size: 13px; font-weight: 600; color: var(--hw-olive,#6B7A3F);
  cursor: pointer; list-style: none; text-decoration: none;
  transition: border-color 160ms ease, background-color 160ms ease, transform 120ms ease;
}
.hw-eintragen > summary::-webkit-details-marker{ display: none; }
.hw-eintragen > summary::before{ content: '+'; font-size: 15px; line-height: 1; }
.hw-eintragen > summary:hover{ border-color: var(--hw-olive,#6B7A3F); background: var(--hw-sand,#FAF9F6); }
.hw-eintragen > summary:active{ transform: scale(.985); }
.hw-eintragen[open] > summary{ background: var(--hw-sand,#FAF9F6); border-color: var(--hw-olive,#6B7A3F); }
.hw-eintragen[open] > summary::before{ content: '−'; }

/* Das Löschkreuz an einem Eintrag war ein winziges Zeichen am Rand.
   Jetzt ist es eine Fläche, die man am Telefon auch trifft. */
.hw-eintrag-weg{
  flex: 0 0 auto; width: 30px; height: 30px; padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
  border: .5px solid transparent; border-radius: 50%;
  background: transparent; color: var(--hw-text-muted,#6d7370);
  font-size: 17px; line-height: 1; cursor: pointer;
  transition: background-color 160ms ease, color 160ms ease, border-color 160ms ease;
}
.hw-eintrag-weg:hover{
  background: var(--hw-sand,#FAF9F6); color: var(--hw-s-rot,#a03a3a);
  border-color: var(--hairline,#e2e5dd);
}

/* Anschrift in einer Zeile: die Straße braucht Platz, die Postleitzahl
   fast keinen. Am Telefon stehen sie untereinander. */
.hw-feld--breit{ flex: 2 1 240px; }
.hw-feld--schmal{ flex: 0 1 110px; }
@media (max-width: 680px){
  .hw-feld--breit, .hw-feld--schmal{ flex: 1 1 auto; }
}

/* ---------------------------------------------------------------- Zweite Knopfreihe
   Die Website kennt nur den vollen Knopf (.btn-primary). Ein schlichtes
   .btn hat dort weder Rahmen noch Fläche und liest sich wie Text. Im
   Portal und in der Verwaltung sind das aber Handlungen: Filtern,
   Anzeigen, Zurücksetzen, Abgleichen. Sie bekommen hier eine Form. */
.btn:not(.btn-primary):not(.btn-ghost){
  padding: 11px 18px;
  border: 1px solid var(--hairline-strong,#cfd4c9);
  border-radius: 9px;
  background:var(--hw-flaeche,#fff);
  color: var(--hw-text,#22261f);
  font-size: 12.5px;
  letter-spacing: 1.2px;
}
.btn:not(.btn-primary):not(.btn-ghost):hover{
  border-color: var(--hw-olive,#6B7A3F);
  color: var(--hw-olive,#6B7A3F);
  background: var(--hw-sand,#FAF9F6);
}
.btn:not(.btn-primary):not(.btn-ghost)[disabled],
.btn:not(.btn-primary):not(.btn-ghost):disabled{
  opacity: .45; cursor: not-allowed;
}
/* Knöpfe, die aus einem Formular kommen, sind oft <button class="btn">.
   Sie sollen genauso aussehen, nicht wie ein Eingabefeld. */
button.btn{ width: auto; }
.hw-satz-fuss button.btn, .hw-form button.btn{ align-self: flex-start; }

/* Der Hinweis, wenn eine Handlung gerade nicht möglich ist. */
.hw-leer-klein{ font-size: 12.5px; color: var(--hw-text-muted,#6d7370); }

/* ---------------------------------------------------------------- Listenzeilen am Telefon
   Nebeneinander bleiben Schilder und Knöpfe stehen, der Text wird auf
   null Pixel gequetscht und bricht auf ein Zeichen je Zeile um. Deshalb
   nimmt der Text unter 620px die volle Breite, alles andere rutscht
   darunter. Gilt für Laden, Werkstatt, Entnahmen und jede weitere Liste. */
@media (max-width: 620px){
  .hw-tabellenzeile{ flex-wrap: wrap; row-gap: 8px; }
  .hw-tabellenzeile > .hw-tz-text{ flex: 1 1 100% !important; min-width: 0; }
  .hw-tabellenzeile > .hw-tz-zahl,
  .hw-tabellenzeile > .hw-tz-knoepfe,
  .hw-tabellenzeile > .hw-schild,
  .hw-tabellenzeile > .hw-standwahl,
  .hw-tabellenzeile > .hw-best-status{ flex: 0 0 auto; }
  .hw-tz-knoepfe{ flex-wrap: wrap; gap: 6px; }
}

/* Eingabefelder und Auswahlfelder waren gut zwei Pixel verschieden hoch.
   In einer Reihe nebeneinander sieht man das sofort. Feste Höhe für alle,
   dann steht die Zeile ruhig. */
.hw-feld input:not([type="checkbox"]):not([type="radio"]),
.hw-feld select,
.hw-form input:not([type="checkbox"]):not([type="radio"]),
.hw-form select{
  box-sizing: border-box;
  height: 48px;
  line-height: 1.35;
}
.hw-feld textarea, .hw-form textarea{ box-sizing: border-box; min-height: 96px; }

/* Meldung direkt am betroffenen Punkt, nicht am Seitenanfang. */
.hw-melde--klein{
  margin: 8px 0 6px; padding: 9px 12px; font-size: 13px; border-radius: 8px;
}

/* Erklärung unter dem Fortschrittsbalken, klein und unaufdringlich. */
.hw-stand-erklaerung{ margin: 8px 0 0; font-size: 12.5px; text-align: left; }

/* Versand und Gesamtbetrag schliessen die Positionsliste ab, damit die
   Summe der Zeilen sichtbar zum Betrag in der Kopfzeile passt. */
.hw-best-versand{ color: var(--hw-text-muted,#6d7370); }
.hw-best-gesamt{
  border-top: .5px solid var(--hairline,#e2e5dd);
  margin-top: 4px; padding-top: 8px; font-weight: 700;
}

@media (max-width: 620px){
  /* Die Filtergruppe behielt am Telefon ihre Pillenform, während die
     Knöpfe darin senkrecht standen: ein hoher schmaler Ring. Jetzt
     nehmen die Knöpfe die Breite und stehen nebeneinander. */
  /* Achtung: .hw-filter ist an einer Stelle der Behälter (nav) und an
     einer anderen der Knopf selbst (a). Deshalb hier ausdrücklich nur
     der Behälter, sonst werden aus drei Filtern drei breite Balken. */
  nav.hw-filter{
    display: flex; flex-wrap: wrap; gap: 6px;
    border: 0; border-radius: 0; padding: 0;
    flex: 1 1 100%; width: 100%; max-width: 100%;
  }
  nav.hw-filter a, nav.hw-filter button{
    flex: 1 1 auto; text-align: center;
    border: 1px solid var(--hairline-strong,#cfd4c9); border-radius: 999px;
    padding: 8px 12px;
  }
  /* Die Filterleiste der Schülerliste: kurze Knöpfe nebeneinander. */
  .hw-filterleiste{ gap: 6px; }
  .hw-filterleiste .hw-filter{ flex: 0 1 auto; width: auto; max-width: none; }
  /* Im Tagesdiagramm liefen die Datumsangaben ineinander. Am Telefon
     steht nur noch jede dritte Beschriftung. */
  .hw-ab-saeule em{ font-size: 9px; }
  .hw-ab-saeule:not(:nth-child(3n+1)) em{ visibility: hidden; }
}

/* Filterreihe und Knopf in einer Zeile. Am Telefon reicht die Breite
   nicht für beides: dann steht der Filter oben, der Knopf darunter. */
.hw-kopfzeile{ display: flex; gap: 10px; align-items: center; }
@media (max-width: 620px){
  .hw-kopfzeile{ flex-wrap: wrap; }
  .hw-kopfzeile > .hw-filter{ flex: 1 1 100%; }
  .hw-kopfzeile > .btn{ flex: 1 1 auto; justify-content: center; }
}

/* Hinweise standen mittig unter linksbündigen Überschriften. Innerhalb
   einer Karte lesen sie sich links besser; die eine mittige Ausnahme ist
   der Abschlusssatz am Seitenende. */
/* Am Telefon wandern die Inhalte in einen Klapp-Kasten, dadurch sind sie
   keine direkten Kinder der Karte mehr. Deshalb ohne Kind-Zeichen. */
.hw-karte .hw-hinweis,
.hw-punkt .hw-hinweis,
.hw-eintraege + .hw-hinweis{ text-align: left; }

/* Das Dateifeld war das einzige Bedienelement in Systemdarstellung. */
.hw-feld input[type="file"]{
  height: auto; min-height: 48px; padding: 10px 12px;
  font-size: 13px; cursor: pointer;
}
.hw-feld input[type="file"]::file-selector-button{
  margin-right: 12px; padding: 8px 14px;
  border: 1px solid var(--hairline-strong,#cfd4c9); border-radius: 8px;
  background:var(--hw-flaeche,#fff); color: var(--hw-text,#22261f);
  font: inherit; font-size: 12.5px; font-weight: 600; cursor: pointer;
}
.hw-feld input[type="file"]::file-selector-button:hover{
  border-color: var(--hw-olive,#6B7A3F); color: var(--hw-olive,#6B7A3F);
}

/* ---------------------------------------------------------------- Datumsfelder auf dem iPhone
   Safari gibt input[type=date] ein eigenes Innenleben und macht daraus
   auf dem Telefon einen dreimal zu hohen Kasten. Mit abgeschalteter
   Systemdarstellung und fester Höhe steht es wie jedes andere Feld. */
.hw-feld input[type="date"],
.hw-feld input[type="time"],
.hw-form input[type="date"],
.hw-form input[type="time"]{
  -webkit-appearance: none;
  appearance: none;
  height: 48px; min-height: 48px; max-height: 48px;
  line-height: 1.2;
}
.hw-feld input[type="date"]::-webkit-date-and-time-value,
.hw-form input[type="date"]::-webkit-date-and-time-value{
  text-align: left; height: 20px; margin: 0;
}
.hw-feld input[type="date"]::-webkit-calendar-picker-indicator{ margin-left: auto; }

/* ---------------------------------------------------------------- Filter am Telefon
   Der Filterkasten war höher als die Liste darunter. Am Telefon steckt er
   deshalb hinter einem Knopf und klappt nur auf, wenn jemand ihn braucht. */
@media (max-width: 620px){
  .hw-filterkarte .hw-form{ display: none; }
  .hw-filterkarte.ist-offen .hw-form{ display: block; }
  .hw-filterknopf{
    display: flex; align-items: center; justify-content: space-between;
    width: 100%; padding: 12px 4px; border: 0; background: none;
    font-size: 14px; font-weight: 600; color: var(--hw-text,#22261f); cursor: pointer;
  }
  .hw-filterknopf::after{
    content: '›'; font-size: 20px; color: var(--hw-text-muted,#6d7370);
    transform: rotate(90deg); transition: transform 200ms cubic-bezier(.22,.61,.36,1);
  }
  .hw-filterkarte.ist-offen .hw-filterknopf::after{ transform: rotate(270deg); }
  .hw-filterkarte .hw-formreihe{ flex-direction: column; gap: 10px; }
}
@media (min-width: 621px){
  .hw-filterknopf{ display: none; }
}

/* Beim Tippen tritt der Hilfeknopf zur Seite, damit er kein Feld und
   keine Zeile verdeckt. */
.hw-hilfeknopf{
  transition: opacity 180ms ease, transform 180ms cubic-bezier(.22,.61,.36,1);
}
body.hw-tippt .hw-hilfeknopf{
  opacity: 0; transform: scale(.8) translateY(8px); pointer-events: none;
}
/* Beim Blättern nach unten rückt er halb aus dem Bild, damit er keine
   Zahl und keine Zeile verdeckt. Antippen geht weiterhin. */
body.hw-blaettert .hw-hilfeknopf{
  opacity: .35; transform: translateX(46%);
}
/* Am Seitenende genug Luft, damit der Knopf nie auf dem letzten Absatz
   oder dem letzten Knopf liegt. */
.hw-dash .container, .hw-admin .container{ padding-bottom: 78px; }
@media (min-width: 761px){
  .hw-dash .container, .hw-admin .container{ padding-bottom: 40px; }
}

/* ---------------------------------------------------------------- Revierkarte
   Eine selbst gezeichnete Übersicht: kein fremder Kartendienst, also
   fließen keine Daten ab, bevor jemand bewusst auf Google Maps tippt. */
.hw-revierkarte{
  border: .5px solid var(--hairline,#e2e5dd); border-radius: 10px;
  background: var(--hw-snow,#fafbf8); color: var(--hw-olive,#6B7A3F);
  overflow: hidden;
}
.hw-revierkarte svg{ display: block; width: 100%; height: auto; }
.hw-rk-punkt circle{
  fill: #fff; stroke: var(--hw-olive,#6B7A3F); stroke-width: 2.5;
}
.hw-rk-punkt.ist-schule circle{ fill: var(--hw-olive,#6B7A3F); }
.hw-rk-punkt text{
  font-size: 13px; font-weight: 600; fill: var(--hw-text,#22261f);
  paint-order: stroke; stroke: #fff; stroke-width: 3px; stroke-linejoin: round;
}
.hw-rk-legende{
  display: flex; align-items: center; flex-wrap: wrap; gap: 6px 14px;
  margin: 10px 0 0; font-size: 12.5px; color: var(--hw-text-muted,#6d7370);
}
.hw-rk-marke{
  width: 11px; height: 11px; border-radius: 50%;
  border: 2px solid var(--hw-olive,#6B7A3F); background:var(--hw-flaeche,#fff);
  display: inline-block; margin-left: 4px;
}
.hw-rk-marke.ist-schule{ background: var(--hw-olive,#6B7A3F); margin-left: 0; }

/* Eine sehr lange Kette ohne Leerzeichen (etwa eine Adresse) sprengte
   sonst die Zeile im Posteingang und ragte über die Karte hinaus. */
.hw-post-text, .hw-post-inhalt, .hw-post-betreff,
.hw-blase-text, .hw-blase-betreff, .hw-news-satz p{
  overflow-wrap: anywhere; word-break: break-word;
}

/* Kurs umbenennen: klappt in der Zeile auf, ohne die Liste zu sprengen. */
.hw-kursname > summary{
  display: inline-flex; align-items: center; gap: 6px;
  padding: 9px 14px; border: 1px solid var(--hairline-strong,#cfd4c9); border-radius: 9px;
  background:var(--hw-flaeche,#fff); font-size: 12.5px; font-weight: 600; cursor: pointer; list-style: none;
}
.hw-kursname > summary::-webkit-details-marker{ display: none; }
.hw-kursname > summary:hover{ border-color: var(--hw-olive,#6B7A3F); color: var(--hw-olive,#6B7A3F); }
.hw-kursname-form{
  display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-end;
  margin-top: 10px; padding: 12px; border-radius: 9px; background: var(--hw-sand,#FAF9F6);
}
.hw-kursname-form .hw-feld{ flex: 1 1 180px; margin: 0; }

/* ================================================================ Immer hell
   Entscheidung der Geschaeftsfuehrung (02.08.2026): Die Plattform bleibt
   weiss, auch auf Geraeten, die auf Dunkelmodus stehen. Deshalb steht
   hier ausdruecklich 'light'. Das faerbt nicht nur unsere eigenen
   Flaechen, sondern haelt auch die Bedienelemente des Systems hell:
   Auswahllisten, Datumsauswahl, Rollbalken und die Ausfuellhilfe des
   Browsers. Ohne diese Zeile mischt das Geraet dunkle Systemelemente in
   eine helle Seite, und genau das sah kaputt aus. */
:root{ color-scheme: light; }
html, body{ color-scheme: light; background: var(--hw-snow,#FAFBF9); }


/* Überschriften in Karten haben eine Größe, ganz gleich ob sie in einem
   Kopfstreifen stehen oder direkt in der Karte. Die Website vererbt sonst
   17,55 Pixel an die einen und 18 an die anderen. */
.hw-karte h3, .hw-karte > h3, .hw-bereich-kopf h3{
  font-size: 18px; letter-spacing: -.01em;
}
.hw-karte h4{ font-size: 15px; letter-spacing: -.01em; }

@media (max-width: 620px){
  /* Überschrift und Zusatz teilten sich am Telefon eine Zeile, dadurch
     brach die Überschrift mitten im Wort um. Jetzt steht der Zusatz
     darunter und die Überschrift bekommt die ganze Breite. */
  /* Überschrift und Zähler stehen nebeneinander, die Überschrift bricht
     bei Bedarf in sich um. Mit voller Breite fiel der Zähler in die
     zweite Zeile und stand dort verloren. */
  /* Der Zähler steht oben rechts, auf einer Linie mit der Überschrift.
     Mittig ausgerichtet rutschte er bei mehrzeiligen Köpfen nach unten. */
  .hw-bereich-kopf{ flex-wrap: nowrap; align-items: flex-start; gap: 10px; }
  .hw-bereich-stand{ margin-top: 1px; }
  /* Ein ganzer Satz ("54 Termine, 120 Stunden") passt am Telefon nicht
     neben die Überschrift: der rutscht darunter, aber linksbündig. Kurze
     Angaben wie "Revier" bleiben daneben stehen. */
  .hw-bereich-stand.ist-lang{
    margin-left: 0; margin-top: 4px; flex: 1 1 100%;
    font-size: 12.5px; font-weight: 600;
  }
  .hw-bereich-kopf:has(.ist-lang){ flex-wrap: wrap; }
  .hw-bereich-kopf > :first-child,
  .hw-bereich-kopf h3{ flex: 1 1 auto; min-width: 0; }
  .hw-bereich-stand{ flex: 0 0 auto; font-size: 13px; }
  /* Der Erklärtext braucht die ganze Breite, er steht unter beiden. */
  .hw-bereich-kopf .hw-erklaer-text{ flex: 1 0 100%; }
}

/* ================================================================ Auftritt
   Beim Wechsel auf eine Seite treten die Kästen nacheinander auf, statt
   alle auf einmal dazustehen. Das Auge folgt der Reihenfolge und findet
   sich schneller zurecht. Der ganze Ablauf dauert etwa eine Sekunde,
   danach ist nichts mehr in Bewegung.

   Wichtig: Die Klasse setzt erst das Skript. Fällt es aus, steht alles
   sofort da, es kann also nichts unsichtbar bleiben. Bewegt wird nur,
   was der Browser billig bewegen kann (Deckkraft und Verschiebung), und
   wer Bewegung abbestellt hat, bekommt keine. */
@keyframes hw-auftritt{
  from{ opacity: 0; transform: translateY(9px); }
  to{ opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: no-preference){
  /* Alles, was unmittelbar im Inhalt steht, tritt der Reihe nach auf.
     Das Skript vergibt die Verzögerungen; hier steht nur, wie der
     Auftritt aussieht. */
  body.hw-auftritt .hw-dash > .container > *,
  body.hw-auftritt .hw-admin > .container > *{
    animation: hw-auftritt 400ms cubic-bezier(.22,.61,.36,1) both;
  }
  /* Die Staffel setzt das Skript, weil zwischen den Kästen unsichtbare
     Elemente stehen (Skripte, versteckte Formulare). Mit nth-child kämen
     dadurch Lücken in die Reihenfolge, und mehrere Kästen träten
     gleichzeitig auf. */

  /* Der angetippte Menüpunkt gibt kurz nach, damit der Druck spürbar ist. */
  .hw-pn-punkt:active, .hw-vl-punkt:active, .hw-adminnav a:active{
    transform: scale(.96);
    transition: transform 90ms cubic-bezier(.22,.61,.36,1);
  }
}

/* ---------------------------------------------------------------- Kopf der Verwaltung
   Suche, angemeldeter Name und Abmelden stehen am Schreibtisch oben
   rechts. Vorher klebten sie in einer schmalen Leiste am rechten
   Bildrand, die beim Blättern mitlief und Platz nahm. */
.hw-app-ort--rechts{
  display: flex; align-items: center; gap: 14px;
  justify-content: flex-end; min-width: 0;
}
.hw-kopf-suchknopf{
  display: inline-flex; align-items: center; gap: 7px;
  padding: 7px 13px; border: 1px solid var(--hairline-strong,#cfd4c9); border-radius: 999px;
  background: var(--hw-flaeche,#fff); color: var(--hw-text-muted,#6d7370);
  font: inherit; font-size: 12.5px; font-weight: 600; cursor: pointer;
  transition: border-color 160ms ease, color 160ms ease, background-color 160ms ease;
}
.hw-kopf-suchknopf svg{ width: 15px; height: 15px; }
.hw-kopf-suchknopf:hover{
  border-color: var(--hw-olive,#6B7A3F); color: var(--hw-olive,#6B7A3F);
  background: var(--hw-sand,#FAF9F6);
}
.hw-kopf-wer{
  font-size: 12.5px; color: var(--hw-text-muted,#6d7370);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 220px;
  /* Der Kopfstreifen schreibt alles in Versalien. Ein Name gehört nicht
     geschrien, und „Abmelden" auch nicht. */
  text-transform: none; letter-spacing: normal;
}
.hw-kopf-raus, .hw-kopf-suchknopf, .hw-kopf-mail{
  text-transform: none; letter-spacing: normal;
}
.hw-kopf-raus{
  font-size: 12.5px; font-weight: 600; color: var(--hw-s-rot,#a03a3a);
  text-decoration: none; white-space: nowrap;
}
.hw-kopf-raus:hover{ text-decoration: underline; }
.hw-kopf-marke{ font-size: 12.5px; letter-spacing: 1.4px; text-transform: uppercase; }

@media (max-width: 760px){
  /* Am Telefon ist oben kein Platz: dort führen die Leiste unten und das
     Mehr-Blatt zu Suche und Abmelden. */
  .hw-kopf-suchknopf span, .hw-kopf-wer, .hw-kopf-raus{ display: none; }
  .hw-kopf-suchknopf{ padding: 7px 9px; }
  .hw-app-ort--rechts{ gap: 8px; }
}

/* Mail-Freigabe im Kopf: nur die Leitung sieht sie. Wartet etwas, wird
   der Punkt farbig und zeigt die Zahl. */
.hw-kopf-mail{
  display: inline-flex; align-items: center; gap: 7px;
  padding: 7px 12px; border: 1px solid var(--hairline-strong,#cfd4c9); border-radius: 999px;
  background: var(--hw-flaeche,#fff); color: var(--hw-text-muted,#6d7370);
  font-size: 12.5px; font-weight: 600; text-decoration: none; white-space: nowrap;
  transition: border-color 160ms ease, color 160ms ease, background-color 160ms ease;
}
.hw-kopf-mail svg{ width: 15px; height: 15px; }
.hw-kopf-mail:hover{ border-color: var(--hw-olive,#6B7A3F); color: var(--hw-olive,#6B7A3F); }
.hw-kopf-mail.hat-wartende{
  border-color: var(--hw-s-rot,#a03a3a); color: var(--hw-s-rot,#a03a3a);
  background: rgba(160,58,58,.06);
}
.hw-kopf-mail em{
  font-style: normal; font-weight: 700; font-variant-numeric: tabular-nums;
  background: var(--hw-s-rot,#a03a3a); color: #fff;
  border-radius: 999px; padding: 1px 7px; font-size: 11.5px;
}
@media (max-width: 760px){
  /* Am Telefon nur das Zeichen und die Zahl, der Text hat keinen Platz. */
  .hw-kopf-mail span{ display: none; }
  .hw-kopf-mail{ padding: 7px 9px; }
  /* Ohne Wartendes verschwindet der Punkt am Telefon ganz: er steht
     dann im Mehr-Blatt. */
  .hw-kopf-mail:not(.hat-wartende){ display: none; }
}

/* Die eingebettete Karte: fester Ausschnitt, gerundete Ecken, kein
   Rahmen vom Browser. */
.hw-revierkarte iframe{
  display: block; width: 100%; height: 340px; border: 0;
}
@media (max-width: 620px){
  .hw-revierkarte iframe{ height: 260px; }
}

/* ---------------------------------------------------------------- Luft in den Karten
   Überschrift und Inhalt klebten aneinander. Jetzt hat jede Karte oben
   und zwischen Überschrift und Inhalt einen ruhigen Abstand. */
.hw-karte{ padding: 22px 22px 20px; }
.hw-karte > .hw-bereich-kopf{ margin-bottom: 14px; }
.hw-karte > h3, .hw-karte > h4, .hw-karte > .hw-ueberschrift{ margin-top: 2px; }
.hw-karte > .hw-bereich-kopf + *{ margin-top: 0; }
.hw-klapp-griff + .hw-klapp-inhalt{ padding-top: 4px; }
@media (max-width: 620px){
  .hw-karte{ padding: 18px 16px 16px; }
}

/* Das letzte Wort einer Überschrift und ihr Fragezeichen bleiben
   zusammen, damit der Knopf nie allein in der nächsten Zeile steht. */
.hw-erklaer-halt{ white-space: nowrap; }
.hw-erklaer-halt .hw-erklaer-knopf{ white-space: normal; }

/* ---------------------------------------------------------------- Postfach
   Die Zeitangaben waren so klein, dass man sie am Telefon suchen musste,
   und der Zähler klebte in der Ecke. Beides bekommt jetzt mehr Gewicht
   und Luft. */
.hw-news-kopf{ align-items: flex-start; gap: 10px; margin-bottom: 7px; }
.hw-news-kopf time{
  font-size: 13px; font-weight: 600; color: var(--hw-text-muted,#6d7370);
  white-space: nowrap;
}
.hw-blase-kopf time{ font-size: 12.5px; font-weight: 600; }
.hw-news-satz{ padding: 16px 0; }

/* Der Zähler am Kartenkopf: eigene Fläche statt lose Zahl. */
.hw-bereich-stand{
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 26px; height: 24px; padding: 0 8px;
  border-radius: 999px; background: var(--hw-stone,#F2F4EF);
  font-size: 13px; font-weight: 700; color: var(--hw-olive,#6B7A3F);
}
/* Trägt der Zähler einen Satz statt einer Zahl, bleibt er schlicht. */
.hw-bereich-stand:not(:empty){ white-space: nowrap; }
.hw-bereich-kopf .hw-bereich-stand:where(.ist-text){ background: none; padding: 0; }

@media (max-width: 620px){
  /* Am Telefon steht die Zahl in der Kopfzeile rechts neben der
     Überschrift, nicht darunter. */
  .hw-bereich-kopf{ align-items: center; }
  .hw-bereich-kopf h3{ flex: 1 1 auto; }
  .hw-bereich-stand{ flex: 0 0 auto; margin-left: auto; }
  .hw-news-kopf{ flex-wrap: wrap; }
  .hw-news-kopf h4{ flex: 1 1 100%; }
  .hw-news-kopf time{ flex: 0 0 auto; font-size: 13px; }
  .hw-blase-kopf time{ margin-left: 0; }
}


/* Wer Bewegung abbestellt hat, bekommt das Suchblatt ohne Fahrt. */
@media (prefers-reduced-motion: reduce){
  .hw-suchblatt, .hw-suchschleier{ transition: none; }
  .hw-suchblatt{ transform: translate(-50%, 0); }
}


/* ---------------------------------------------------------------- Platz für den Finger
   Am Telefon zählt nicht, wie groß ein Knopf aussieht, sondern was man
   trifft. Die Optik bleibt, die Trefferfläche wächst über ein
   unsichtbares Feld darum herum. Apple rechnet mit 44 Pixeln. */
@media (max-width: 760px){
  .hw-erklaer-knopf{ position: relative; }
  .hw-erklaer-knopf::after{
    content: ""; position: absolute; top: 50%; left: 50%;
    width: 44px; height: 44px; transform: translate(-50%, -50%);
  }
  .hw-eintrag-weg{
    position: relative; width: 34px; height: 34px;
  }
  .hw-eintrag-weg::after{
    content: ""; position: absolute; top: 50%; left: 50%;
    width: 44px; height: 44px; transform: translate(-50%, -50%);
  }
  /* Die Klappleiste einer Karte ist die meistgetippte Fläche im Portal.
     Sie war 28 Pixel hoch, das ist unter dem, was ein Daumen sicher
     trifft. */
  .hw-klapp-griff{ min-height: 44px; }
  /* Zeilen im Kurskalender: eine Zeile pro Termin, vorher 22 Pixel. */
  .skal-termin{ min-height: 32px; display: flex; align-items: center; }
  /* Die Links ganz unten (Kontakt, Impressum, Datenschutz) standen so
     dicht, dass man beim Zielen daneben griff. */
  .hw-portalfuss a, .site-footer a{ display: inline-block; padding: 5px 2px; }
}


/* ---------------------------------------------------------------- Kein Cookie-Kasten im Portal
   Im Schülerbereich und in der Verwaltung läuft nur das Sitzungscookie,
   das die Anmeldung trägt. Für das braucht es keine Einwilligung, und
   ohne Einwilligung wird auch nichts anderes gesetzt: gemessen mit
   leerem localStorage und ohne fremde Zähler. Der Kasten deckte am
   Telefon den halben Bildschirm zu, sobald sich jemand angemeldet
   hatte. Auf der öffentlichen Website bleibt er unverändert stehen. */
body.hw-app .hw-cookie,
body.hw-portal .hw-cookie{ display: none !important; }


/* Sehr schmale Telefone (iPhone SE, 320 Pixel): Überschriften mit
   Fragezeichen daneben passten dort um wenige Pixel nicht mehr in die
   Zeile und wurden abgeschnitten. Sie dürfen umbrechen und lange Wörter
   trennen. */
@media (max-width: 360px){
  .hw-bereich-kopf h3, .hw-klapp-griff h3{
    overflow-wrap: anywhere; hyphens: auto;
  }
  .hw-bereich-kopf{ gap: 8px; }
  /* Auf 320 Pixeln reicht die Zeile auch für kurze Angaben nicht mehr:
     "Hattenhofen" plus "Schießstand" plus Pfeil brauchen 251 Pixel, da
     sind 242. Deshalb rutscht dort jede Wortangabe unter die
     Überschrift, Zahlen (3 %, 12) bleiben oben stehen. */
  .hw-bereich-kopf{ flex-wrap: wrap; }
  .hw-bereich-kopf .hw-bereich-stand.ist-text,
  .hw-klapp-griff .hw-bereich-stand.ist-text{
    margin-left: 0; margin-top: 3px; flex: 1 1 100%;
    font-size: 12.5px; font-weight: 600; text-align: left !important;
  }
}


/* ================================================================ Kurzfristige Termine
   Was ein Ausbilder auf /termin einstellt: im Portal ein Kasten ganz
   oben und ein Blatt, das sich meldet, sobald jemand das Portal öffnet.
   Die Zahl der freien Plätze läuft mit, deshalb ist sie das auffälligste
   Element im Kasten. */

.hw-angebot-kasten{ border-color: var(--hw-olive,#6B7A3F); }
.hw-angebot-zeile{
  display: flex; align-items: flex-start; gap: 14px; flex-wrap: wrap;
  padding: 14px 0; border-top: .5px solid var(--hairline,#e3e6df);
}
.hw-angebot-kasten .hw-angebot-zeile:first-of-type{ border-top: 0; padding-top: 4px; }
.hw-angebot-text{ flex: 1 1 200px; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.hw-angebot-text strong{ font-size: 16px; letter-spacing: -.01em; }
.hw-angebot-wann{ font-size: 13.5px; font-weight: 700; color: var(--hw-olive,#6B7A3F); }
.hw-angebot-ort{ font-size: 13px; color: var(--hw-text-muted,#6d7370); }
.hw-angebot-info{ font-size: 12.5px; color: var(--hw-text-muted,#6d7370); }
.hw-angebot-melde:not(:empty){
  margin-top: 4px; font-size: 12.5px; font-weight: 600; color: var(--hw-olive,#6B7A3F);
}
.hw-angebot-rechts{
  flex: 0 0 auto; display: flex; flex-direction: column; align-items: flex-end; gap: 8px;
}
.hw-angebot-stand{
  display: inline-block; padding: 5px 11px; border-radius: 999px;
  background: #eef2e6; color: var(--hw-olive,#6B7A3F);
  font-size: 12.5px; font-weight: 700; white-space: nowrap;
  transition: background-color .3s ease, color .3s ease;
}
.hw-angebot-stand.ist-voll{ background: #f6e9e9; color: #a03a3a; }
.hw-angebot-stand.ist-neu{ animation: hw-stand-blitz 1.2s ease; }
@keyframes hw-stand-blitz{
  0%{ transform: scale(1); } 22%{ transform: scale(1.09); } 100%{ transform: scale(1); }
}
.hw-angebot-knopf{ min-height: 44px; }
.hw-angebot-knopf.ist-dabei{
  background: var(--hw-flaeche,#fff); color: var(--hw-anthracite,#1A1F22);
  border: 1px solid var(--hairline-strong,#cfd4c9);
}
.hw-angebot-zeile.ist-abgesagt .hw-angebot-text strong{ text-decoration: line-through; }
.hw-angebot-zeile.ist-abgesagt{ opacity: .75; }

/* Das Blatt, das sich von selbst meldet. */
.hw-angebot-blatt{
  position: fixed; inset: 0; z-index: 120; display: flex;
  align-items: center; justify-content: center; padding: 20px;
  background: rgba(26,31,34,.42); opacity: 0;
  transition: opacity .22s ease;
  -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);
}
.hw-angebot-blatt.ist-offen{ opacity: 1; }
.hw-angebot-blatt-innen{
  width: min(460px, 100%); max-height: 86vh; overflow-y: auto;
  background: var(--hw-flaeche,#fff); border-radius: 18px;
  box-shadow: 0 30px 70px rgba(26,31,34,.3);
  padding: 26px 24px 22px; text-align: left;
  transform: translateY(14px) scale(.98);
  transition: transform .26s cubic-bezier(.2,.9,.24,1);
}
.hw-angebot-blatt.ist-offen .hw-angebot-blatt-innen{ transform: translateY(0) scale(1); }
.hw-angebot-marke{
  display: inline-block; padding: 5px 12px; border-radius: 999px;
  background: var(--hw-olive,#6B7A3F); color: #fff;
  font-size: 10.5px; letter-spacing: 1.6px; text-transform: uppercase; font-weight: 700;
}
.hw-angebot-blatt-innen h2{
  margin: 14px 0 6px; font-size: 26px; line-height: 1.15; letter-spacing: -.02em;
}
.hw-angebot-blatt-wann{ margin: 0 0 2px; font-size: 17px; font-weight: 700; color: var(--hw-olive,#6B7A3F); }
.hw-angebot-blatt-ort{ margin: 0 0 10px; font-size: 15px; color: var(--hw-anthracite,#1A1F22); }
.hw-angebot-blatt-info{ margin: 0 0 8px; font-size: 13.5px; line-height: 1.55; color: var(--hw-text-muted,#6d7370); }
.hw-angebot-blatt-von{ margin: 0 0 14px; font-size: 12.5px; color: var(--hw-text-muted,#6d7370); }
.hw-angebot-blatt-stand{
  display: inline-block; margin-bottom: 18px; padding: 8px 14px; border-radius: 999px;
  background: #eef2e6; color: var(--hw-olive,#6B7A3F); font-size: 14px; font-weight: 700;
}
.hw-angebot-blatt-stand.ist-voll{ background: #f6e9e9; color: #a03a3a; }
.hw-angebot-blatt-knoepfe{ display: flex; gap: 10px; flex-wrap: wrap; }
.hw-angebot-blatt-knoepfe .btn{ flex: 1 1 140px; justify-content: center; min-height: 48px; }
body.hw-blatt-offen{ overflow: hidden; }
.ist-dabei h2{ color: var(--hw-olive,#6B7A3F); }

@media (max-width: 760px){
  .hw-angebot-zeile{ gap: 10px; }
  .hw-angebot-rechts{ flex: 1 1 100%; flex-direction: row; align-items: center; justify-content: space-between; }
  .hw-angebot-knopf{ flex: 0 0 auto; }
  .hw-angebot-blatt{ align-items: flex-end; padding: 0; }
  .hw-angebot-blatt-innen{
    width: 100%; max-height: 90vh; border-radius: 20px 20px 0 0;
    padding: 22px 20px calc(20px + env(safe-area-inset-bottom));
    transform: translateY(100%);
  }
  .hw-angebot-blatt-innen h2{ font-size: 23px; }
  /* Am Telefon steht die Zusage über die ganze Breite: "Ich bin dabei"
     brach sonst mitten im Wort um. */
  .hw-angebot-blatt-knoepfe{ flex-direction: column-reverse; }
  .hw-angebot-blatt-knoepfe .btn{ flex: 1 1 auto; width: 100%; letter-spacing: .06em; }
}
@media (prefers-reduced-motion: reduce){
  .hw-angebot-blatt, .hw-angebot-blatt-innen{ transition: none; }
  .hw-angebot-blatt-innen{ transform: none; }
  .hw-angebot-stand.ist-neu{ animation: none; }
}

/* ---------------------------------------------------------------- Die Seite der Ausbilder
   Bewusst karg: Kopf, ein Formular, eine Liste. Wer im Revier steht, hat
   kalte Finger und wenig Empfang. */
body.hw-terminseite{ background: var(--hw-snow,#fafbf8); }
.hw-termin-kopf{
  position: sticky; top: 0; z-index: 20;
  background: var(--hw-flaeche,#fff); border-bottom: .5px solid var(--hairline,#e3e6df);
}
.hw-termin-innen{
  display: flex; align-items: center; gap: 12px;
  max-width: 640px; margin: 0 auto; padding: 10px 18px;
}
.hw-termin-innen img{ width: 40px; height: 40px; object-fit: contain; }
.hw-termin-innen > div{ flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.hw-termin-innen strong{ font-size: 15px; letter-spacing: -.01em; }
.hw-termin-innen span{ font-size: 12.5px; color: var(--hw-text-muted,#6d7370); }
.hw-termin-raus{
  flex: 0 0 auto; font-size: 12.5px; font-weight: 600;
  color: var(--hw-s-rot,#a03a3a); text-decoration: none; padding: 8px 4px;
}
.hw-termin-blatt{ max-width: 640px; margin: 0 auto; padding: 18px 18px 60px; }
.hw-termin-blatt .hw-karte{ margin-bottom: 16px; }

/* Die Knopfreihen gehören zum Feld darüber, dürfen aber nicht daran
   kleben. Zwischen den Feldgruppen steht deutlich mehr Luft als
   innerhalb einer Gruppe: so sieht man auf einen Blick, was zusammen
   gehört. */
.hw-termin-form .hw-feld{ margin-bottom: 18px; }
.hw-termin-form .hw-doppelfeld{ margin-bottom: 18px; }
.hw-termin-form .hw-doppelfeld .hw-feld{ margin-bottom: 0; }
.hw-termin-form .hw-feldmarke{ margin-top: 4px; }
.hw-termin-schnell, .hw-termin-schnellwas{
  display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0 20px;
}
/* Die Vorschläge hängen unter ihrem Feld, deshalb rückt das Feld
   darüber enger heran. */
.hw-termin-form .hw-feld:has(+ .hw-termin-schnellwas){ margin-bottom: 0; }
.hw-termin-schnell{ margin-top: 0; }
.hw-termin-schnell button, .hw-termin-schnellwas button{
  padding: 8px 14px; border-radius: 999px; min-height: 40px;
  border: .5px solid var(--hairline-strong,#cfd4c9); background: var(--hw-snow,#fafbf8);
  color: var(--hw-anthracite,#1A1F22); font: inherit; font-size: 13.5px; cursor: pointer;
  transition: background-color .16s ease, border-color .16s ease, transform .16s ease;
}
.hw-termin-schnell button:hover, .hw-termin-schnellwas button:hover{ background: #eef2e6; }
.hw-termin-schnell button:active, .hw-termin-schnellwas button:active{ transform: scale(.97); }
.hw-termin-schnell button.ist-aktiv, .hw-termin-schnellwas button.ist-aktiv{
  background: var(--hw-olive,#6B7A3F); border-color: var(--hw-olive,#6B7A3F); color: #fff; font-weight: 600;
}
.hw-doppelfeld{ display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.hw-angebot{ padding: 16px 0; border-top: .5px solid var(--hairline,#e3e6df); }
.hw-karte > .hw-angebot:first-of-type{ border-top: 0; }
.hw-angebot-kopf{ display: flex; align-items: flex-start; gap: 12px; flex-wrap: wrap; }
.hw-angebot-kopf > div{ flex: 1 1 180px; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.hw-angebot-kopf strong{ font-size: 16px; }
.hw-angebot-leute{ margin-top: 12px; display: flex; flex-direction: column; gap: 6px; }
.hw-angebot-person{
  display: flex; align-items: baseline; gap: 8px; font-size: 14px;
  padding: 6px 10px; border-radius: 8px; background: var(--hw-snow,#fafbf8);
}
.hw-angebot-person b{ color: var(--hw-text-muted,#6d7370); font-size: 12px; }
.hw-angebot-person span{ flex: 1 1 auto; min-width: 0; }
.hw-angebot-person a{ color: var(--hw-olive,#6B7A3F); text-decoration: none; font-size: 13px; white-space: nowrap; }
.hw-leer-klein{ font-size: 13px; color: var(--hw-text-muted,#6d7370); }
.hw-angebot-knoepfe{ margin-top: 12px; display: flex; gap: 10px; }
.hw-angebot-weg{
  border: .5px solid var(--hairline-strong,#cfd4c9); background: var(--hw-flaeche,#fff);
  color: var(--hw-s-rot,#a03a3a); border-radius: 999px; padding: 9px 16px; min-height: 40px;
  font: inherit; font-size: 13px; font-weight: 600; cursor: pointer;
}
.hw-angebot-weg:hover{ background: #f6e9e9; }

/* Beschriftung über einer Knopfreihe, die zu einem Feld gehört. */
.hw-feldmarke{
  display: block; margin: 0 0 6px;
  font-size: 11px; letter-spacing: 1.3px; text-transform: uppercase;
  color: var(--hw-text-muted,#6d7370); font-weight: 700;
}
.hw-termin-form .btn{ width: 100%; justify-content: center; min-height: 52px; margin-top: 8px; }
/* Der Kasten selbst braucht am Telefon etwas mehr Rand, sonst stehen die
   Felder auf der Kante. */
.hw-termin-blatt .hw-karte{ padding: 22px 20px 20px; }
@media (max-width: 480px){
  .hw-termin-blatt{ padding: 16px 14px 60px; }
  .hw-termin-blatt .hw-karte{ padding: 20px 16px 18px; }
  .hw-termin-schnell button, .hw-termin-schnellwas button{ padding: 8px 12px; font-size: 13px; }
}


/* Die kleine Aufstellung in der Karte "Hinweise aufs Telefon": zeigt in
   drei Zeilen, woran es gerade hängt. */
.hw-pushpruefung{ list-style: none; margin: 14px 0 0; padding: 0; display: flex; flex-direction: column; gap: 7px; }
.hw-pushpruefung li{ display: flex; align-items: baseline; gap: 9px; font-size: 13px; }
.hw-pushpruefung li b{ flex: 0 0 auto; width: 14px; text-align: center; font-size: 12px; }
.hw-pushpruefung li.ist-gut{ color: var(--hw-anthracite,#1A1F22); }
.hw-pushpruefung li.ist-gut b{ color: var(--hw-olive,#6B7A3F); }
.hw-pushpruefung li.ist-offen{ color: var(--hw-text-muted,#6d7370); }
.hw-pushpruefung li.ist-notiz{
  display: block; margin-top: 2px; padding: 10px 12px; border-radius: 10px;
  background: var(--hw-snow,#fafbf8); font-size: 12.5px; line-height: 1.5;
  color: var(--hw-text-muted,#6d7370);
}


/* Absagen mit Grund: der Knopf klappt ein kleines Feld auf, damit
   niemand kommentarlos absagt. Die Angemeldeten lesen den Grund. */
.hw-absage{ width: 100%; }
.hw-absage > summary{
  display: inline-block; cursor: pointer; list-style: none;
  border: .5px solid var(--hairline-strong,#cfd4c9); background: var(--hw-flaeche,#fff);
  color: var(--hw-s-rot,#a03a3a); border-radius: 999px; padding: 9px 16px; min-height: 40px;
  font-size: 13px; font-weight: 600; line-height: 22px;
}
.hw-absage > summary::-webkit-details-marker{ display: none; }
.hw-absage > summary:hover{ background: #f6e9e9; }
.hw-absage[open] > summary{ background: #f6e9e9; }
.hw-absage-form{ margin-top: 12px; padding: 14px; border-radius: 12px; background: var(--hw-snow,#fafbf8); }
.hw-absage-form .hw-feld{ margin-bottom: 10px; }
.hw-absage-form .hw-angebot-weg{ width: 100%; }

.hw-angebot-blatt-grund{
  margin: 0 0 12px; padding: 10px 12px; border-radius: 10px;
  background: #f6e9e9; color: #7d2b2b; font-size: 13.5px; line-height: 1.5;
}


/* ================================================================ Zahlen und Verläufe
   Das Dashboard der Verwaltung: Kennzahlen oben, darunter Diagramme, die
   der Server als SVG zeichnet. Kein fremdes Skript, deshalb sind die
   Bilder sofort da und bleiben auch ohne Netz stehen. */

.hw-kennzahlen{
  display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 12px; margin-bottom: 18px;
}
.hw-kennzahl{
  display: flex; flex-direction: column; gap: 2px;
  padding: 16px 16px 14px; border-radius: 14px;
  background: var(--hw-flaeche,#fff); border: .5px solid var(--hairline,#e2e5dd);
}
.hw-kz-wert{ font-size: 27px; font-weight: 700; letter-spacing: -.02em; line-height: 1.1; }
.hw-kz-titel{ font-size: 12px; font-weight: 600; color: var(--hw-anthracite,#1A1F22); }
.hw-kz-unten{ font-size: 11.5px; color: var(--hw-text-muted,#6d7370); }
.hw-kz-wandel{
  align-self: flex-start; margin-top: 4px; padding: 2px 8px; border-radius: 999px;
  font-size: 11px; font-weight: 700; background: var(--hw-snow,#fafbf8);
  color: var(--hw-text-muted,#6d7370);
}
.hw-kz-wandel.ist-mehr{ background: #eef2e6; color: var(--hw-olive,#6B7A3F); }
.hw-kz-wandel.ist-weniger{ background: #f6e9e9; color: #a03a3a; }

.hw-dia{ display: block; width: 100%; height: auto; margin-top: 6px; }
.hw-dia text{ font-family: inherit; }

.hw-doppelkarte{ display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.hw-doppelkarte > .hw-karte{ margin: 0 0 18px; }

/* Rangliste: Name, Bahn, Wert */
.hw-rangliste{ display: flex; flex-direction: column; gap: 10px; margin-top: 8px; }
.hw-rang-zeile{ display: grid; grid-template-columns: minmax(90px, 34%) 1fr auto; align-items: center; gap: 10px; }
.hw-rang-name{ font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hw-rang-bahn{
  display: block; height: 10px; border-radius: 999px; background: var(--hw-snow,#f2f4ee); overflow: hidden;
}
.hw-rang-bahn i{ display: block; height: 100%; border-radius: 999px; transition: width .5s ease; }
.hw-rang-wert{ font-size: 12.5px; font-weight: 700; color: var(--hw-text-muted,#6d7370); white-space: nowrap; }

/* Ring mit Beschriftung daneben */
.hw-ringblock{ display: flex; align-items: center; gap: 18px; flex-wrap: wrap; margin-top: 8px; }
.hw-dia-ring{ width: 168px; height: 168px; flex: 0 0 auto; }
.hw-dia-marken{ list-style: none; margin: 0; padding: 0; flex: 1 1 160px; display: flex; flex-direction: column; gap: 8px; }
.hw-dia-marken li{ display: grid; grid-template-columns: 12px 1fr auto auto; align-items: center; gap: 8px; font-size: 13px; }
.hw-dia-marken i{ width: 12px; height: 12px; border-radius: 4px; }
.hw-dia-marken b{ font-size: 13px; }
.hw-dia-marken em{ font-style: normal; font-size: 11.5px; color: var(--hw-text-muted,#6d7370); }

@media (max-width: 760px){
  .hw-kennzahlen{ grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .hw-kennzahl{ padding: 13px 13px 12px; }
  .hw-kz-wert{ font-size: 22px; }
  .hw-doppelkarte{ grid-template-columns: 1fr; gap: 0; }
  .hw-ringblock{ gap: 12px; }
  .hw-dia-ring{ width: 140px; height: 140px; margin: 0 auto; }
  .hw-rang-zeile{ grid-template-columns: minmax(74px, 40%) 1fr auto; gap: 8px; }
  .hw-rang-name{ font-size: 12.5px; }
}


/* Am Telefon wird das Diagramm stark verkleinert: dort die Schrift im
   Bild anheben und jede zweite Achsenangabe weglassen, sonst klebt alles
   ineinander und ist nicht mehr zu lesen. */
@media (max-width: 860px){
  .hw-dia .dia-achse{ font-size: 22px; }
  .hw-dia .dia-marke{ font-size: 22px; }
  .hw-dia .dia-achse text:nth-child(2n){ display: none; }
}
@media (max-width: 560px){
  .hw-dia .dia-achse{ font-size: 26px; }
  .hw-dia .dia-marke{ font-size: 26px; }
  .hw-dia .dia-achse text:nth-child(3n+2), .hw-dia .dia-achse text:nth-child(3n){ display: none; }
}


/* Das Fähnchen beim Überfahren, auch im Portal (Verwaltung). */
.hw-dia-fahne{
  position: fixed; top: 0; left: 0; z-index: 200; pointer-events: none;
  display: flex; flex-direction: column; gap: 1px;
  padding: 8px 11px; border-radius: 10px;
  background: rgba(26,31,34,.94); color: #fff;
  box-shadow: 0 8px 24px rgba(26,31,34,.28);
  opacity: 0; transition: opacity .12s ease; max-width: 260px;
}
.hw-dia-fahne.ist-da{ opacity: 1; }
.hw-dia-fahne b{ font-size: 11.5px; font-weight: 600; opacity: .72; }
.hw-dia-fahne span{ font-size: 15px; font-weight: 700; }
.dia-saeule, .dia-bogen{ transition: opacity .14s ease; }
svg.hw-dia:hover .dia-saeule{ opacity: .55; }
.dia-feld:hover + .dia-saeule{ opacity: 1 !important; }
.hw-dia-ring:hover .dia-bogen{ opacity: .6; }
.hw-dia-ring .dia-bogen:hover{ opacity: 1; }


/* ---------------------------------------------------------------- Meine Aufgaben
   Was einem selbst zugeteilt wurde, in der Verwaltung. Verteilt wird in
   der Kommandozentrale, hier setzt jeder nur seinen eigenen Stand. */
.hw-meine-aufgabe{
  padding: 14px 0; border-top: .5px solid var(--hairline,#e3e6df);
}
.hw-karte > .hw-meine-aufgabe:first-of-type{ border-top: 0; padding-top: 4px; }
.hw-meine-aufgabe.ist-spaet .hw-ma-kopf strong{ color: var(--hw-s-rot,#a03a3a); }
.hw-ma-kopf{ display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.hw-ma-kopf strong{ font-size: 15.5px; flex: 1 1 auto; min-width: 0; }
.hw-ma-marke{
  flex: 0 0 auto; padding: 3px 9px; border-radius: 999px; font-size: 11px; font-weight: 700;
  background: var(--hw-snow,#fafbf8); border: .5px solid var(--hairline,#e3e6df);
  color: var(--hw-text-muted,#6d7370);
}
.hw-ma-zeile{
  display: flex; flex-wrap: wrap; gap: 10px; margin-top: 4px;
  font-size: 12.5px; color: var(--hw-text-muted,#6d7370);
}
.hw-ma-zeile .ist-spaet{ color: var(--hw-s-rot,#a03a3a); font-weight: 600; }
.hw-ma-zeile .ist-wichtig{ color: var(--hw-olive,#6B7A3F); font-weight: 700; }
.hw-ma-text{ margin: 8px 0 0; font-size: 13.5px; line-height: 1.55; }
.hw-ma-notizen{
  margin-top: 10px; padding: 10px 12px; border-radius: 10px;
  background: var(--hw-snow,#fafbf8); font-size: 12.5px; line-height: 1.6;
}
.hw-ma-notizen b{ color: var(--hw-olive,#6B7A3F); }
.hw-ma-knoepfe{ display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.hw-ma-knopf{
  padding: 9px 14px; border-radius: 999px; min-height: 40px;
  border: .5px solid var(--hairline-strong,#cfd4c9); background: var(--hw-flaeche,#fff);
  color: var(--hw-anthracite,#1A1F22); font: inherit; font-size: 13px; font-weight: 600; cursor: pointer;
}
.hw-ma-knopf:hover{ background: #eef2e6; }
.hw-ma-knopf.ist-fertig{ background: var(--hw-olive,#6B7A3F); border-color: var(--hw-olive,#6B7A3F); color: #fff; }
.hw-ma-notiz{ display: flex; gap: 8px; margin-top: 10px; }
.hw-ma-notiz input{
  flex: 1 1 auto; min-width: 0; padding: 10px 12px; border-radius: 10px;
  border: .5px solid var(--hairline-strong,#cfd4c9); font: inherit; font-size: 13px;
}
.hw-ma-notiz button{
  flex: 0 0 auto; padding: 10px 14px; border-radius: 10px; border: 0;
  background: var(--hw-anthracite,#1A1F22); color: #fff; font: inherit; font-size: 13px; cursor: pointer;
}
@media (max-width: 560px){
  .hw-ma-knoepfe form{ flex: 1 1 46%; }
  .hw-ma-knopf{ width: 100%; }
}

/* Ein Haken mit Text daneben, für Formulare in der Verwaltung. */
.hw-hakenzeile{
  display: flex; align-items: center; gap: 10px; margin: 4px 0 14px;
  font-size: 13.5px; cursor: pointer;
}
.hw-hakenzeile input{ width: 20px; height: 20px; flex: 0 0 auto; }
form.hw-karte .hw-feld{ margin-bottom: 14px; }
form.hw-karte .hw-doppelfeld{ display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 14px; }
form.hw-karte .hw-doppelfeld .hw-feld{ margin-bottom: 0; }
@media (max-width: 560px){
  form.hw-karte .hw-doppelfeld{ grid-template-columns: 1fr; }
}


/* ---------------------------------------------------------------- Warenbestand */
.hw-bestandzahlen{
  display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 10px; margin: 4px 0 16px;
}
.hw-bestandzahlen > div{
  padding: 12px 13px; border-radius: 12px; background: var(--hw-snow,#fafbf8);
  border: .5px solid var(--hairline,#e3e6df); display: flex; flex-direction: column; gap: 2px;
}
.hw-bestandzahlen b{ font-size: 20px; font-weight: 700; letter-spacing: -.02em; }
.hw-bestandzahlen span{ font-size: 11.5px; color: var(--hw-text-muted,#6d7370); }
.hw-bestandzahlen .ist-warnung{ border-color: #d9b8b8; background: #fdf6f6; }
.hw-bestandzahlen .ist-warnung b{ color: var(--hw-s-rot,#a03a3a); }
.hw-bestandsuche{ display: flex; gap: 8px; margin-bottom: 12px; }
.hw-bestandsuche input{
  flex: 1 1 auto; min-width: 0; padding: 12px 14px; border-radius: 10px;
  border: .5px solid var(--hairline-strong,#cfd4c9); font: inherit; font-size: 16px;
}
.hw-bestandfilter{ display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 12px; }
.hw-bestandmenge{
  flex: 0 0 auto; display: flex; flex-direction: column; align-items: flex-end; line-height: 1.15;
}
.hw-bestandmenge b{ font-size: 18px; font-weight: 700; }
.hw-bestandmenge span{ font-size: 10.5px; color: var(--hw-text-muted,#6d7370); }
.hw-bestandmenge em{ font-size: 12px; font-style: normal; color: var(--hw-text-muted,#6d7370); }
.hw-bestandzeile.ist-knapp .hw-bestandmenge b{ color: #b5761f; }
.hw-bestandzeile.ist-leer .hw-bestandmenge b{ color: var(--hw-s-rot,#a03a3a); }
.hw-blaettern{ display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 14px; }
.hw-blaettern span{ font-size: 12.5px; color: var(--hw-text-muted,#6d7370); }
@media (max-width: 560px){
  .hw-bestandfilter{ grid-template-columns: 1fr; }
  .hw-bestandzahlen{ grid-template-columns: repeat(2, 1fr); }
}

/* ---------------------------------------------------------------- Zustimmung zur Datenverarbeitung
   Das Fenster vor dem ersten Betreten des Portals und der Widerruf im
   Profil. Beide teilen sich den Haken und die Achtung-Box. */
.hw-zustimmung{ text-align:left; }
.hw-zustimmung h4{ margin:22px 0 6px; font-size:15px; letter-spacing:.02em; }
.hw-zustimmung p{ margin:0 0 4px; line-height:1.65; }
.hw-zu-lead{ margin-bottom:6px !important; }
.hw-zu-liste{ margin:0; padding-left:20px; line-height:1.6; }
.hw-zu-liste li{ margin-bottom:8px; }
.hw-zu-haken{
  display:flex; gap:12px; align-items:flex-start; margin:26px 0 20px; padding:16px;
  border:1px solid rgba(107,122,63,.45); border-radius:10px; background:rgba(107,122,63,.06);
  line-height:1.55; text-align:left; cursor:pointer;
}
.hw-zu-haken input{ margin-top:3px; width:20px; height:20px; flex:0 0 auto; }
.hw-achtung{
  margin:0 0 4px; padding:16px 18px; border-radius:10px; text-align:left;
  border:1px solid rgba(161,59,59,.35); background:rgba(161,59,59,.05);
}
.hw-achtung strong{ display:block; margin-bottom:8px; color:var(--hw-s-rot,#a13b3b); }
.hw-achtung p{ margin:0 0 8px; line-height:1.6; font-size:14.5px; }
.hw-achtung p:last-child{ margin-bottom:0; }
.hw-widerruf .hw-zu-haken{ border-color:rgba(161,59,59,.35); background:rgba(161,59,59,.05); }


/* ---------------------------------------------------------- Eigener Kalender der Verwaltung
   Seit 10.08.2026: Jagdschule und Event in einer Monatsansicht, angelegt
   und geaendert wird hier. Das Raster teilt sich die skal-Klassen mit dem
   Kurskalender der Schueler, hier kommt nur dazu, was die Verwaltung
   zusaetzlich braucht: Filterleiste, Plus am Tag, Kalenderfarben. */

.vkal-leiste{
  display:flex; align-items:center; justify-content:space-between;
  gap:14px; flex-wrap:wrap; margin-bottom:16px;
}
.vkal-filter{ display:flex; align-items:center; gap:12px; flex-wrap:wrap; }
.vkal-filter-titel{
  font-size:12px; letter-spacing:1.6px; text-transform:uppercase;
  color:var(--hw-text-muted,#6d7370); font-weight:600;
}

/* Welcher Kalender: eine Auswahl aus dreien, darum sitzen die drei in
   einem gemeinsamen Rahmen und nicht als lose Knoepfe nebeneinander. */
.vkal-gruppe{
  display:inline-flex; align-items:stretch;
  border:.5px solid var(--hairline-strong,#cfd4c9); border-radius:6px;
  background:var(--hw-flaeche,#fff); overflow:hidden;
}
.vkal-teil{
  display:inline-flex; align-items:center; gap:7px;
  padding:8px 15px; text-decoration:none; font-size:13px; line-height:1.2;
  color:var(--hw-text-muted,#6d7370); background:transparent;
  border-left:.5px solid var(--hairline,#e2e5dd);
}
.vkal-teil:first-child{ border-left:0; }
.vkal-teil:hover{ background:var(--hw-snow,#fafbf8); color:var(--hw-anthracite,#1A1F22); }
.vkal-teil.ist-an{
  background:var(--hw-anthracite,#1A1F22); color:#fff; font-weight:600;
}
.vkal-teil.ist-jagdschule::before,
.vkal-teil.ist-event::before{
  content:""; width:9px; height:9px; border-radius:2px; display:inline-block; flex:0 0 auto;
}
.vkal-teil.ist-jagdschule::before{ background:var(--hw-olive,#6B7A3F); }
.vkal-teil.ist-event::before{ background:#b0762c; }

/* Interne Termine: ein Schalter, kein Filter. Die Beschriftung bleibt
   gleich, nur der Schieber zeigt an oder aus. */
.vkal-schalter{
  display:inline-flex; align-items:center; gap:9px;
  padding:7px 14px 7px 11px; border-radius:6px; text-decoration:none;
  font-size:13px; line-height:1.2; color:var(--hw-text-muted,#6d7370);
  border:.5px solid var(--hairline-strong,#cfd4c9); background:var(--hw-flaeche,#fff);
}
.vkal-schalter:hover{ border-color:var(--hw-olive,#6B7A3F); color:var(--hw-anthracite,#1A1F22); }
.vkal-schalter-bahn{
  width:34px; height:19px; border-radius:999px; flex:0 0 auto;
  background:var(--hairline-strong,#cfd4c9); position:relative;
  transition:background .14s ease;
}
.vkal-schalter-knopf{
  position:absolute; top:2px; left:2px; width:15px; height:15px; border-radius:50%;
  background:#fff; box-shadow:0 1px 2px rgba(26,31,34,.3);
  transition:transform .14s ease;
}
.vkal-schalter.ist-an{ color:var(--hw-anthracite,#1A1F22); border-color:var(--hw-olive,#6B7A3F); }
.vkal-schalter.ist-an .vkal-schalter-bahn{ background:var(--hw-olive,#6B7A3F); }
.vkal-schalter.ist-an .vkal-schalter-knopf{ transform:translateX(15px); }

/* Die ganze Tageskachel ist ein Link auf die Tagesansicht, die Termine
   darin sind nur Beschriftung. Ein Klick irgendwo im Tag oeffnet den Tag. */
a.vkal-tag{ text-decoration:none; color:inherit; }
a.vkal-tag:hover{ border-color:var(--hw-olive,#6B7A3F); }
a.vkal-tag:hover .skal-datum{ color:var(--hw-olive,#6B7A3F); }
.vkal-termin b{ font-weight:700; margin-right:4px; font-variant-numeric:tabular-nums; }

.vkal-termin.ist-topf-jagdschule{ border-left-color:var(--hw-olive,#6B7A3F); }
.vkal-termin.ist-topf-event{ border-left-color:#b0762c; }
.vkal-termin.ist-intern{ background:#f4f2ea; border-left-style:dashed; }
.vkal-termin.ist-intern em{ color:var(--hw-text-muted,#6d7370); }
.vkal-termin.ist-abgesagt{ text-decoration:line-through; color:var(--hw-text-muted,#6d7370); }

.skal-punkt.ist-topf-jagdschule{ background:var(--hw-olive,#6B7A3F); }
.skal-punkt.ist-topf-event{ background:#b0762c; }
.skal-punkt.ist-intern-punkt{
  background:transparent; width:auto; height:auto;
  color:var(--hw-text-muted,#6d7370); font-weight:700;
}
.skal-punkt.ist-abgesagt-punkt{ background:transparent; border:.5px dashed var(--hairline-strong,#cfd4c9); }

@media (max-width:760px){
  .vkal-leiste{ flex-direction:column; align-items:stretch; }
}


/* ---------------------------------------------------------- Tagesansicht des Kalenders */

.vkal-tagliste{ display:flex; flex-direction:column; gap:10px; }
.vkal-tagzeile{
  display:flex; gap:16px; align-items:flex-start;
  padding:14px 16px; border:.5px solid var(--hairline,#e2e5dd); border-radius:8px;
  border-left:4px solid var(--hairline-strong,#cfd4c9);
  background:var(--hw-flaeche,#fff);
}
.vkal-tagzeile.ist-topf-jagdschule{ border-left-color:var(--hw-olive,#6B7A3F); }
.vkal-tagzeile.ist-topf-event{ border-left-color:#b0762c; }
.vkal-tagzeile.ist-abgesagt{ background:var(--hw-snow,#fafbf8); }
.vkal-tagzeile.ist-abgesagt .vkal-tagtext h4{ text-decoration:line-through; color:var(--hw-text-muted,#6d7370); }

.vkal-tagzeit{
  flex:0 0 92px; display:flex; flex-direction:column; gap:2px;
  font-variant-numeric:tabular-nums;
}
.vkal-tagzeit strong{ font-size:17px; }
.vkal-tagzeit span{ font-size:12.5px; color:var(--hw-text-muted,#6d7370); }

.vkal-tagtext{ flex:1 1 auto; min-width:0; }
.vkal-tagtext h4{ margin:0 0 6px; font-size:16px; }
.vkal-marken{ display:flex; flex-wrap:wrap; gap:6px; }
.vkal-marke{
  display:inline-block; padding:2px 9px; border-radius:999px;
  font-size:11.5px; line-height:1.5; letter-spacing:.02em;
  background:var(--hw-snow,#fafbf8); color:var(--hw-text-muted,#6d7370);
  border:.5px solid var(--hairline,#e2e5dd);
}
.vkal-marke.ist-jagdschule{ background:#eef2e6; color:#4d5c30; border-color:#d8e0c8; }
.vkal-marke.ist-event{ background:#f7efe2; color:#8a5a1d; border-color:#e8d6ba; }
.vkal-marke.ist-intern{ background:#f4f2ea; color:#6d6350; border-style:dashed; }
.vkal-marke.ist-aus{ background:#f7ecec; color:var(--hw-s-rot,#a03a3a); border-color:#e8cdcd; }
.vkal-taginfo{
  margin:8px 0 0; padding:8px 11px; border-radius:6px;
  background:#fdf8e6; border:.5px solid #eadfb6; font-size:13.5px;
}
.vkal-tagknoepfe{ flex:0 0 auto; display:flex; flex-direction:column; align-items:flex-end; gap:8px; }

@media (max-width:760px){
  .vkal-tagzeile{ flex-direction:column; gap:8px; }
  .vkal-tagzeit{ flex:0 0 auto; flex-direction:row; align-items:baseline; gap:8px; }
  .vkal-tagknoepfe{ flex-direction:row; align-items:center; align-self:stretch; }
}

/* ---------------------------------------------------------- Terminfenster
   Anlegen und Aendern laufen in einem Fenster ueber der Seite, damit der
   Kalender stehen bleibt. Ohne Javascript: der Hintergrund ist selbst ein
   Link zurueck, Escape erledigt ein Dreizeiler auf der Seite. */

/* Die Klassen gibt es doppelt: vkal-* ist das Terminfenster im Kalender,
   hw-fenster-* dasselbe fuer alle uebrigen Masken (Aufgaben, Meetings,
   Erinnerungen, Notizen). Sie sehen gleich aus, damit ein Fenster im
   Verwaltungstool immer ein Fenster ist. */
.vkal-fenster, .hw-fenster{
  position:fixed; inset:0; z-index:900;
  /* Mittig, waagerecht wie senkrecht. Der Kasten hat eine Hoechsthoehe
     und rollt innen, deshalb bleibt er auch bei langen Formularen ganz
     sichtbar. */
  display:flex; align-items:center; justify-content:center;
  padding:40px 20px;
}
.vkal-fenster-hinter, .hw-fenster-hinter{
  position:absolute; inset:0; background:rgba(26,31,34,.55);
  backdrop-filter:blur(2px); -webkit-backdrop-filter:blur(2px);
}
.vkal-fenster-kasten, .hw-fenster-kasten{
  position:relative; z-index:1; width:min(860px, 100%);
  max-height:calc(100vh - 80px); display:flex; flex-direction:column;
  background:var(--hw-flaeche,#fff); border-radius:10px;
  box-shadow:0 24px 60px rgba(26,31,34,.28);
  overflow:hidden;
}
.hw-fenster-kasten{ width:min(680px, 100%); }
.vkal-fenster-kopf, .hw-fenster-kopf{
  display:flex; align-items:flex-start; justify-content:space-between; gap:16px;
  padding:20px 24px 14px; border-bottom:.5px solid var(--hairline,#e2e5dd);
}
.vkal-fenster-kopf h3, .hw-fenster-kopf h3{ margin:0; }
.vkal-fenster-zu, .hw-fenster-zu{
  flex:0 0 auto; text-decoration:none; font-size:24px; line-height:1;
  color:var(--hw-text-muted,#6d7370); padding:2px 6px; border-radius:4px;
}
.vkal-fenster-zu:hover, .hw-fenster-zu:hover{ background:var(--hw-snow,#fafbf8); color:var(--hw-anthracite,#1A1F22); }
.vkal-fenster-inhalt, .hw-fenster-inhalt{ padding:18px 24px 24px; overflow-y:auto; }
.vkal-fenster-loeschen{ margin-top:12px; padding-top:14px; border-top:.5px solid var(--hairline,#e2e5dd); }
/* Im Fenster braucht ein Formular keine eigene Karte mehr, das Fenster
   ist die Karte. */
.hw-fenster-inhalt > .hw-form{ margin:0; padding:0; border:0; background:transparent; }

/* Solange das Fenster offen ist, scrollt die Seite dahinter nicht mit. */
body:has(.vkal-fenster), body:has(.hw-fenster){ overflow:hidden; }

@media (max-width:760px){
  .vkal-fenster, .hw-fenster{ padding:0; }
  .vkal-fenster-kasten, .hw-fenster-kasten{ width:100%; max-height:100vh; height:100vh; border-radius:0; }
}


/* ---------------------------------------------------------- Terminmaske im Fenster
   Die Felder stehen in Abschnitten, damit man beim Anlegen nicht vor
   einer Wand aus Eingaben sitzt. */

.vkal-block{
  padding:16px 0; border-top:.5px solid var(--hairline,#e2e5dd);
}
.vkal-block:first-of-type{ padding-top:0; border-top:0; }
.vkal-block:last-of-type{ padding-bottom:4px; }
.vkal-block h4{
  margin:0 0 12px; font-size:12px; letter-spacing:1.6px; text-transform:uppercase;
  color:var(--hw-olive,#6B7A3F); font-weight:600;
}
.vkal-block > .hw-feld{ margin-bottom:14px; }
.vkal-block > .hw-feld:last-child{ margin-bottom:0; }
.vkal-notiz{
  margin:8px 0 0; font-size:12.5px; color:var(--hw-text-muted,#6d7370);
}

/* Feldbreiten in einer Reihe: Uhrzeiten brauchen wenig, Ort und Titel viel. */
.hw-formreihe > .vkal-feld-klein{ flex:0 1 132px; }
.hw-formreihe > .vkal-feld-mittel{ flex:0 1 190px; }
.hw-formreihe > .vkal-feld-gross{ flex:2 1 300px; }
.hw-formreihe > .vkal-feld-breit{ flex:0 1 330px; }
.hw-formreihe > .hw-haken.vkal-feld-klein{ flex:0 0 auto; white-space:nowrap; }
.hw-haken.vkal-haken-breit{ align-items:flex-start; padding-bottom:0; }
.hw-haken.vkal-haken-breit span{ line-height:1.45; }

@media (max-width:760px){
  .hw-formreihe > .vkal-feld-klein,
  .hw-formreihe > .vkal-feld-mittel,
  .hw-formreihe > .vkal-feld-breit,
  .hw-formreihe > .vkal-feld-gross{ flex:1 1 140px; }
}


/* ---------------------------------------------------------- Bestellplattform
   Positionszeilen im Auftrag: eine Reihe je Posten, darunter die
   optionale Beschreibung. Ab der zweiten Zeile stehen die
   Feldbeschriftungen nicht noch einmal da. */

.auf-posten{ display:flex; flex-direction:column; }
.auf-zeile{ display:flex; gap:14px; align-items:flex-end; flex-wrap:wrap; margin-bottom:8px; }
.auf-zeile > *{ flex:1 1 200px; min-width:0; }
.auf-zeile > .vkal-feld-klein{ flex:0 1 110px; }
.auf-zeile > .vkal-feld-mittel{ flex:0 1 165px; }
.hw-feld > span.nur-erste{ display:none; }
.auf-untertext{ margin:0 0 16px; }
.auf-untertext input{ font-size:14px; }
.auf-knoepfe{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; }

@media (max-width:760px){
  .auf-zeile{ gap:8px; }
  .auf-zeile > *, .auf-zeile > .vkal-feld-klein, .auf-zeile > .vkal-feld-mittel{ flex:1 1 120px; }
  .hw-feld > span.nur-erste{ display:block; }
}


/* ---------------------------------------------------------------- Stand in der Liste
   Werkstatt-, Laden- und Verkaufsaufträge lassen sich in der Zeile selbst
   umstellen: fertig, Kunde benachrichtigt, abgeholt. Das Auswahlfeld
   speichert beim Wählen, der Knopf daneben erscheint nur ohne JavaScript. */
.hw-standwahl{ flex:0 0 auto; display:flex; align-items:center; gap:6px; margin:0; }
.hw-standwahl select{
  box-sizing:border-box; height:34px; max-width:200px; padding:2px 10px; border-radius:99px;
  font-size:12.5px; font-weight:600; color:var(--hw-text-muted,#6d7370);
  background-color:var(--hw-snow,#fafbf8); border:.5px solid var(--hairline-strong,#cfd4c9);
  cursor:pointer;
}
.hw-standwahl.ist-offen select{
  color:var(--hw-s-rot,#a03a3a); border-color:var(--hw-s-rot,#a03a3a); background-color:transparent;
}
.hw-standwahl.ist-fertig select{
  color:var(--hw-olive,#6B7A3F); border-color:var(--hw-olive,#6B7A3F);
}
/* Das Dokumentenfeld daneben: Blatt, Bestätigung, Lieferschein, Rechnung,
   Erinnerung, Mahnung. Sieht aus wie ein Knopf, führt aber eine Liste. */
select.hw-dokwahl{
  box-sizing:border-box; height:34px; max-width:190px; padding:2px 10px; border-radius:99px;
  font-size:12.5px; font-weight:600; color:var(--hw-gruen,#3E4F25);
  background-color:#fff; border:.5px solid var(--hairline-strong,#cfd4c9); cursor:pointer;
}
@media (max-width: 620px){
  .hw-standwahl select{ max-width:none; width:100%; }
  .hw-tabellenzeile > .hw-standwahl{ flex:1 1 100%; }
  select.hw-dokwahl{ max-width:none; width:100%; }
}


/* ================================================================
   Meldungswesen: Glocke, Einblendung, Postfach, Einrichtung
   ================================================================ */

/* --- Die Glocke im Kopf. Wie die Mail-Freigabe daneben, aber olive:
   ein wartendes Postfach ist kein Alarm, nur etwas zu tun. --- */
.hw-kopf-glocke{
  display: inline-flex; align-items: center; gap: 7px;
  padding: 7px 12px; border: 1px solid var(--hairline-strong,#cfd4c9); border-radius: 999px;
  background: var(--hw-flaeche,#fff); color: var(--hw-text-muted,#6d7370);
  font-size: 12.5px; font-weight: 600; text-decoration: none; white-space: nowrap;
  text-transform: none; letter-spacing: normal;
  transition: border-color 160ms ease, color 160ms ease, background-color 160ms ease;
}
.hw-kopf-glocke svg{ width: 15px; height: 15px; }
.hw-kopf-glocke:hover{ border-color: var(--hw-olive,#6B7A3F); color: var(--hw-olive,#6B7A3F); }
.hw-kopf-glocke.hat-neue{
  border-color: var(--hw-olive,#6B7A3F); color: var(--hw-olive,#6B7A3F);
  background: rgba(107,122,63,.07);
}
.hw-kopf-glocke em{
  font-style: normal; font-weight: 700; font-variant-numeric: tabular-nums;
  background: var(--hw-olive,#6B7A3F); color: #fff;
  border-radius: 999px; padding: 1px 7px; font-size: 11.5px;
}
@media (max-width: 760px){
  /* Am Telefon nur das Zeichen mit der Zahl. Anders als bei der
     Mail-Freigabe bleibt die Glocke stehen, auch wenn nichts wartet:
     sie ist dort der einzige Weg ins Postfach. */
  .hw-kopf-glocke span{ display: none; }
  .hw-kopf-glocke{ padding: 7px 9px; gap: 5px; }
}

/* --- Die Einblendung waehrend der Arbeit ---
   Am Schreibtisch oben rechts unter dem Kopf, am Telefon unten ueber
   der Bedienleiste, damit sie diese nie verdeckt. */
.hw-meld-stapel{
  position: fixed; top: 74px; right: 18px; z-index: 120;
  display: flex; flex-direction: column; gap: 10px;
  width: min(360px, calc(100vw - 36px));
  pointer-events: none;
}
.hw-meld-karte{
  pointer-events: auto;
  position: relative; display: block;
  background: var(--hw-flaeche,#fff);
  border: .5px solid var(--hairline,#e2e5dd);
  border-left: 3px solid var(--hw-olive,#6B7A3F);
  border-radius: 8px; padding: 13px 38px 13px 15px;
  box-shadow: 0 10px 30px rgba(26,31,34,.14);
  text-decoration: none; color: var(--hw-text,#1A1F22);
  opacity: 0; transform: translateY(-8px);
  transition: opacity 240ms ease, transform 240ms var(--ease-out-stark, cubic-bezier(0.23,1,0.32,1));
}
.hw-meld-karte.ist-da{ opacity: 1; transform: none; }
.hw-meld-karte strong{
  display: block; font-size: 14px; font-weight: 700; line-height: 1.35;
  overflow-wrap: anywhere;
}
.hw-meld-karte span{
  display: block; margin-top: 3px; font-size: 13px; line-height: 1.45;
  color: var(--hw-text-muted,#6d7370); overflow-wrap: anywhere;
}
.hw-meld-karte:hover{ border-color: var(--hw-olive,#6B7A3F); }
.hw-meld-zu{
  position: absolute; top: 6px; right: 6px;
  width: 28px; height: 28px; padding: 0;
  border: 0; background: transparent; cursor: pointer;
  color: var(--hw-text-muted,#6d7370); font-size: 19px; line-height: 1;
  border-radius: 6px;
}
.hw-meld-zu:hover{ background: var(--hw-flaeche-2,#f4f6f1); color: var(--hw-text,#1A1F22); }
@media (max-width: 760px){
  .hw-meld-stapel{
    top: auto; left: 12px; right: 12px; width: auto;
    /* Ueber der festen Leiste unten, samt Rand am iPhone. */
    bottom: calc(64px + env(safe-area-inset-bottom, 0px));
  }
  .hw-meld-karte{ transform: translateY(8px); }
  .hw-meld-karte.ist-da{ transform: none; }
}
@media (prefers-reduced-motion: reduce){
  .hw-meld-karte{ transition: opacity 120ms linear; transform: none; }
}

/* --- Das Postfach ---
   Auf Lesebreite begrenzt: eine Liste kurzer Zeilen ueber 1400 Pixel
   zwingt das Auge, nach jedem Eintrag den Weg zurueck zu suchen. */
.hw-post{ padding: 26px 0 60px; max-width: 860px; }
.hw-post-leer{
  background: var(--hw-flaeche,#fff); border: .5px solid var(--hairline,#e2e5dd);
  border-radius: 8px; padding: 26px 24px; color: var(--hw-text-muted,#6d7370);
  line-height: 1.6;
}
.hw-post-leer p{ margin: 0 0 10px; }
.hw-post-leer p:last-child{ margin-bottom: 0; }
.hw-post-alle{ margin: 0 0 14px; }
.hw-post-liste{ list-style: none; margin: 0; padding: 0; }
.hw-post-tag{
  margin: 20px 0 8px; font-size: 11.5px; font-weight: 700;
  letter-spacing: 1.2px; text-transform: uppercase;
  color: var(--hw-text-muted,#6d7370);
}
.hw-post-tag:first-child{ margin-top: 0; }
.hw-post-zeile{
  display: flex; align-items: stretch; gap: 0;
  background: var(--hw-flaeche,#fff);
  border: .5px solid var(--hairline,#e2e5dd);
  border-radius: 8px; margin-bottom: 8px; overflow: hidden;
}
.hw-post-zeile.ist-neu{ border-left: 3px solid var(--hw-olive,#6B7A3F); }
.hw-post-inhalt{
  flex: 1 1 auto; min-width: 0;
  display: block; padding: 13px 15px; text-decoration: none;
  color: var(--hw-text,#1A1F22);
}
.hw-post-inhalt:hover{ background: var(--hw-flaeche-2,#f4f6f1); }
.hw-post-inhalt strong{ display: block; font-size: 14.5px; line-height: 1.4; overflow-wrap: anywhere; }
.hw-post-zeile:not(.ist-neu) .hw-post-inhalt strong{ font-weight: 500; }
.hw-post-text{
  display: block; margin-top: 3px; font-size: 13.5px; line-height: 1.5;
  color: var(--hw-text-muted,#6d7370); overflow-wrap: anywhere;
}
.hw-post-fuss{
  display: flex; align-items: center; gap: 9px; flex-wrap: wrap;
  margin-top: 7px; font-size: 12px; color: var(--hw-text-muted,#6d7370);
  font-variant-numeric: tabular-nums;
}
.hw-post-marke{
  font-style: normal; font-size: 11.5px; font-weight: 600;
  color: var(--hw-s-rot,#a13b3b);
  background: rgba(161,59,59,.08); border-radius: 999px; padding: 2px 9px;
}
.hw-post-haken{ display: flex; align-items: center; margin: 0; }
.hw-post-haken button{
  height: 100%; min-width: 48px; padding: 0 14px;
  border: 0; border-left: .5px solid var(--hairline,#e2e5dd);
  background: transparent; cursor: pointer;
  color: var(--hw-text-muted,#6d7370);
}
.hw-post-haken button:hover{ background: rgba(107,122,63,.08); color: var(--hw-olive,#6B7A3F); }
.hw-post-haken svg{ width: 19px; height: 19px; display: block; }
@media (max-width: 760px){
  .hw-post{ padding: 18px 0 84px; }
  .hw-post-inhalt{ padding: 12px 13px; }
  .hw-post-haken button{ min-width: 44px; padding: 0 11px; }
}

/* --- Benachrichtigungen einrichten ---
   Eine Spalte, auf Lesebreite begrenzt. Die Seite fuehrt Schritt fuer
   Schritt durch die Einrichtung, das ist ein Weg und keine Uebersicht;
   nebeneinander gestellt entstuende bloss eine leere zweite Spalte,
   sobald eine der Karten gerade nicht gebraucht wird. */
.hw-hinw{ padding: 26px 0 60px; display: grid; gap: 16px; max-width: 860px; }
.hw-hinw-karte{
  background: var(--hw-flaeche,#fff); border: .5px solid var(--hairline,#e2e5dd);
  border-radius: 8px; padding: 22px 24px;
}
.hw-hinw-karte h2{ margin: 0 0 10px; font-size: 17px; line-height: 1.35; }
.hw-hinw-karte p{ margin: 0 0 12px; line-height: 1.6; font-size: 14.5px; }
.hw-hinw-karte p:last-child{ margin-bottom: 0; }
.hw-hinw-karte--warnung{ border-left: 3px solid var(--hw-s-arbeit,#b8892f); }
.hw-hinw-lage{
  border-radius: 8px; padding: 13px 16px; font-size: 14px; line-height: 1.55;
  border: .5px solid var(--hairline,#e2e5dd);
}
.hw-hinw-lage.ist-gut{
  border-color: var(--hw-olive,#6B7A3F); background: rgba(107,122,63,.08);
  color: var(--hw-olive,#6B7A3F);
}
.hw-hinw-lage.ist-schlecht{
  border-color: var(--hw-s-rot,#a13b3b); background: rgba(161,59,59,.07);
  color: var(--hw-s-rot,#a13b3b);
}
.hw-hinw-lage.ist-warte{ color: var(--hw-text-muted,#6d7370); }
.hw-hinw-knoepfe{
  display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px;
}
.hw-hinw-knoepfe:empty{ margin-top: 0; }
.hw-hinw-knoepfe .btn{ min-height: 44px; }
.hw-hinw-schritte{
  list-style: none; counter-reset: hwschritt; margin: 0 0 14px; padding: 0;
  display: grid; gap: 12px;
}
.hw-hinw-schritte li{
  counter-increment: hwschritt;
  position: relative; padding-left: 42px;
}
.hw-hinw-schritte li::before{
  content: counter(hwschritt);
  position: absolute; left: 0; top: 0;
  width: 28px; height: 28px; border-radius: 999px;
  background: var(--hw-olive,#6B7A3F); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: 700;
}
.hw-hinw-schritte strong{ display: block; font-size: 14.5px; line-height: 1.4; }
.hw-hinw-schritte span{
  display: block; margin-top: 2px; font-size: 13.5px; line-height: 1.5;
  color: var(--hw-text-muted,#6d7370);
}
.hw-hinw-hinweis{
  font-size: 13px !important; color: var(--hw-text-muted,#6d7370);
  border-top: .5px solid var(--hairline,#e2e5dd); padding-top: 12px; margin-top: 14px !important;
}
.hw-hinw-liste{ list-style: none; margin: 0 0 12px; padding: 0; }
.hw-hinw-liste li{
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  padding: 12px 0; border-bottom: .5px solid var(--hairline,#e2e5dd);
}
.hw-hinw-liste li:last-child{ border-bottom: 0; }
.hw-hinw-liste strong{ display: block; font-size: 14.5px; }
.hw-hinw-liste span{
  display: block; margin-top: 2px; font-size: 12.5px; color: var(--hw-text-muted,#6d7370);
}
.hw-hinw-weg{
  flex: 0 0 auto; min-height: 40px; padding: 0 14px;
  border: 1px solid var(--hairline-strong,#cfd4c9); border-radius: 999px;
  background: transparent; cursor: pointer;
  font-size: 13px; font-weight: 600; color: var(--hw-s-rot,#a13b3b);
}
.hw-hinw-weg:hover{ border-color: var(--hw-s-rot,#a13b3b); background: rgba(161,59,59,.06); }
.hw-hinw-was{ list-style: none; margin: 0 0 12px; padding: 0; display: grid; gap: 10px; }
.hw-hinw-was li{
  display: grid; grid-template-columns: 108px 1fr; gap: 14px; align-items: baseline;
  font-size: 14px; line-height: 1.5;
}
.hw-hinw-was strong{ font-weight: 700; }
.hw-hinw-was span{ color: var(--hw-text-muted,#6d7370); }
@media (max-width: 760px){
  .hw-hinw{ padding: 18px 0 84px; gap: 12px; }
  .hw-hinw-karte{ padding: 18px 16px; }
  .hw-hinw-knoepfe .btn{ width: 100%; justify-content: center; }
  .hw-hinw-was li{ grid-template-columns: 1fr; gap: 2px; }
  .hw-hinw-liste li{ flex-wrap: wrap; }
  .hw-hinw-weg{ width: 100%; }
}

/* ================================================================ Mega-Menue im Kopf
   Seit dem 13.08.2026 steht das ganze Menue oben links im Kopf: eine
   Zeile mit den Bereichen, und je Bereich klappt ein Blatt mit allen
   Punkten darunter auf. Die frueheren zwei Leisten quer ueber der Seite
   sind damit weg, der Arbeitsbereich beginnt weiter oben. */
.hw-mm{ display: flex; align-items: center; gap: 8px; min-width: 0; }
.hw-mm-reihe{ display: flex; align-items: center; gap: 2px; min-width: 0; }
.hw-mm-bereich{ position: relative; }
.hw-mm-knopf{
  display: inline-flex; align-items: center; gap: 5px;
  padding: 8px 12px; border: 1px solid transparent; border-radius: 8px;
  background: transparent; cursor: pointer;
  font-family: inherit; font-size: 13.5px; font-weight: 600;
  color: var(--hw-text-muted,#6d7370); text-decoration: none; white-space: nowrap;
  text-transform: none; letter-spacing: normal; line-height: 1.2;
  transition: background-color 150ms ease, color 150ms ease, border-color 150ms ease;
}
.hw-mm-knopf svg{ width: 13px; height: 13px; opacity: .6; transition: transform 160ms ease; }
.hw-mm-knopf:hover{ background: var(--hw-snow,#fafbf8); color: var(--hw-anthracite,#1A1F22); }
.hw-mm-knopf[aria-expanded="true"]{
  background: var(--hw-snow,#fafbf8); color: var(--hw-anthracite,#1A1F22);
  border-color: var(--hairline,#e2e5dd);
}
.hw-mm-knopf[aria-expanded="true"] svg{ transform: rotate(180deg); }
.hw-mm-bereich.ist-aktiv > .hw-mm-knopf{
  color: var(--hw-anthracite,#1A1F22);
  box-shadow: inset 0 -2px 0 var(--hw-olive,#6B7A3F);
  border-radius: 8px 8px 0 0;
}

/* Das Blatt haengt am Bereich und legt sich ueber die Seite. */
.hw-mm-blatt{
  position: absolute; top: calc(100% + 12px); left: 0; z-index: 220;
  background: var(--hw-flaeche,#fff);
  border: .5px solid var(--hairline,#e2e5dd); border-radius: 10px;
  box-shadow: 0 18px 44px rgba(26,31,34,.16);
  padding: 18px 20px;
  animation: hw-mm-auf 150ms ease;
}
@keyframes hw-mm-auf{ from{ opacity: 0; transform: translateY(-6px); } to{ opacity: 1; transform: none; } }
.hw-mm-innen{ display: flex; gap: 30px; align-items: flex-start; }
.hw-mm-gruppe{ display: flex; flex-direction: column; gap: 2px; min-width: 246px; }
.hw-mm-gruppentitel{
  font-size: 10.5px; letter-spacing: 1.4px; text-transform: uppercase;
  color: var(--hw-text-muted,#6d7370); padding: 2px 8px 8px; font-weight: 700;
}
.hw-mm-punkt{
  display: flex; align-items: flex-start; gap: 11px;
  padding: 9px 10px; border-radius: 8px; text-decoration: none;
  color: var(--hw-text,#1A1F22);
  transition: background-color 130ms ease;
}
.hw-mm-punkt:hover{ background: var(--hw-snow,#fafbf8); }
.hw-mm-punkt.ist-hier{ background: rgba(107,122,63,.09); }
.hw-mm-bild{
  flex: 0 0 auto; display: grid; place-items: center;
  width: 30px; height: 30px; border-radius: 7px;
  background: var(--hw-snow,#fafbf8); border: .5px solid var(--hairline,#e2e5dd);
  color: var(--hw-olive,#6B7A3F);
}
.hw-mm-punkt.ist-hier .hw-mm-bild{ background: var(--hw-olive,#6B7A3F); color: #fff; border-color: transparent; }
.hw-mm-bild svg{ width: 16px; height: 16px; }
.hw-mm-text{ display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.hw-mm-text strong{
  display: flex; align-items: center; gap: 7px;
  font-size: 13.5px; font-weight: 600; line-height: 1.35;
}
.hw-mm-text em{
  font-style: normal; font-size: 11.5px; line-height: 1.4;
  color: var(--hw-text-muted,#6d7370);
}
.hw-mm-zahl{
  font-style: normal; font-weight: 700; font-variant-numeric: tabular-nums;
  background: var(--hw-olive,#6B7A3F); color: #fff;
  border-radius: 999px; padding: 0 6px; font-size: 10.5px; line-height: 17px;
}

/* Der Burger: nur am Telefon, dort klappt die ganze Zeile auf. */
.hw-mm-burger{
  display: none; align-items: center; gap: 7px;
  padding: 7px 11px; border: 1px solid var(--hairline-strong,#cfd4c9); border-radius: 999px;
  background: var(--hw-flaeche,#fff); cursor: pointer;
  font-family: inherit; font-size: 12.5px; font-weight: 600;
  color: var(--hw-text-muted,#6d7370);
  text-transform: none; letter-spacing: normal;
}
.hw-mm-burger svg{ width: 15px; height: 15px; }

@media (max-width: 1100px){
  .hw-mm-text em{ display: none; }
  .hw-mm-gruppe{ min-width: 200px; }
}
@media (max-width: 760px){
  /* Der Kopf hat am Telefon nur Platz fuer den Burger. Dahinter klappt
     die Bereichsliste als Blatt unter dem Kopf auf, jeder Bereich
     wiederum mit seinen Punkten. */
  .hw-app-ort--links{ display: block; }
  .hw-mm-burger{ display: inline-flex; }
  .hw-mm-reihe{
    display: none;
    position: fixed; left: 0; right: 0; top: 64px; bottom: 0; z-index: 240;
    flex-direction: column; align-items: stretch; gap: 0;
    background: var(--hw-flaeche,#fff);
    padding: 10px 14px 90px; overflow-y: auto;
  }
  .hw-mm.ist-offen .hw-mm-reihe{ display: flex; }
  .hw-mm-bereich{ position: static; border-bottom: .5px solid var(--hairline,#e2e5dd); }
  .hw-mm-knopf{
    width: 100%; justify-content: space-between; padding: 14px 4px;
    font-size: 15px; border-radius: 0;
  }
  .hw-mm-bereich.ist-aktiv > .hw-mm-knopf{ box-shadow: none; color: var(--hw-olive,#6B7A3F); }
  .hw-mm-blatt{
    position: static; box-shadow: none; border: 0; border-radius: 0;
    padding: 0 0 12px; animation: none;
  }
  .hw-mm-innen{ flex-direction: column; gap: 10px; }
  .hw-mm-gruppe{ min-width: 0; }
  .hw-mm-text em{ display: block; }
}

/* ---------------------------------------------------------------- Postfach oben rechts
   Das Postfach gehoert der Person, nicht einem Menuebereich. Es steht
   deshalb ganz fuer sich im Kopf: Glocke mit Zahl, dahinter ein Blatt
   mit den letzten Meldungen. */
.hw-kopf-postfach{ position: relative; display: inline-flex; }
.hw-kopf-glocke{ cursor: pointer; font-family: inherit; }
.hw-postblatt{
  position: absolute; top: calc(100% + 12px); right: 0; z-index: 220;
  width: min(380px, calc(100vw - 28px));
  background: var(--hw-flaeche,#fff);
  border: .5px solid var(--hairline,#e2e5dd); border-radius: 10px;
  box-shadow: 0 18px 44px rgba(26,31,34,.16);
  text-align: left; text-transform: none; letter-spacing: normal;
  animation: hw-mm-auf 150ms ease;
}
.hw-postblatt-kopf{
  display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
  padding: 14px 16px 10px; border-bottom: .5px solid var(--hairline,#e2e5dd);
}
.hw-postblatt-kopf strong{ font-size: 14px; color: var(--hw-anthracite,#1A1F22); }
.hw-postblatt-kopf span{ font-size: 11.5px; color: var(--hw-text-muted,#6d7370); font-weight: 400; }
.hw-postblatt-leer{ margin: 0; padding: 18px 16px; font-size: 13px; color: var(--hw-text-muted,#6d7370); }
.hw-postblatt-liste{ max-height: 62vh; overflow-y: auto; }
.hw-postblatt-zeile{
  display: block; padding: 11px 16px; text-decoration: none;
  border-bottom: .5px solid var(--hairline,#e2e5dd);
  color: var(--hw-text,#1A1F22);
}
.hw-postblatt-zeile:last-child{ border-bottom: 0; }
.hw-postblatt-zeile:hover{ background: var(--hw-snow,#fafbf8); }
.hw-postblatt-zeile.ist-neu{ border-left: 3px solid var(--hw-olive,#6B7A3F); padding-left: 13px; }
.hw-postblatt-zeile strong{ display: block; font-size: 13px; font-weight: 600; margin-bottom: 2px; }
.hw-postblatt-zeile span{ display: block; font-size: 12px; color: var(--hw-text-muted,#6d7370); line-height: 1.45; }
.hw-postblatt-zeile em{ display: block; font-style: normal; font-size: 11px; color: var(--hw-text-muted,#6d7370); margin-top: 3px; }
.hw-postblatt-fuss{
  display: flex; gap: 16px; padding: 11px 16px;
  border-top: .5px solid var(--hairline,#e2e5dd); background: var(--hw-snow,#fafbf8);
  border-radius: 0 0 10px 10px;
}
.hw-postblatt-fuss a{ font-size: 12px; font-weight: 600; color: var(--hw-olive,#6B7A3F); text-decoration: none; }
.hw-postblatt-fuss a:hover{ text-decoration: underline; }
@media (max-width: 760px){
  .hw-postblatt{ position: fixed; top: 64px; right: 8px; }
}

/* ================================================================ Schuelerliste, Knoepfe
   Neu anlegen, Liste hochladen und Dokumente waren frueher Menuepunkte.
   Jetzt stehen sie als runde Knoepfe neben der Suche, dort wo man sie
   braucht. */
.hw-listenkopf{
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  margin-bottom: 14px;
}
.hw-listenkopf .hw-suche{ flex: 1 1 320px; margin: 0; }
.hw-listenknoepfe{ display: flex; align-items: center; gap: 8px; }
.hw-rundknopf{
  display: grid; place-items: center; width: 42px; height: 42px;
  border-radius: 999px; border: 1px solid var(--hairline-strong,#cfd4c9);
  background: var(--hw-flaeche,#fff); color: var(--hw-text-muted,#6d7370);
  text-decoration: none;
  transition: border-color 150ms ease, color 150ms ease, background-color 150ms ease, transform 120ms ease;
}
.hw-rundknopf svg{ width: 19px; height: 19px; }
.hw-rundknopf:hover{
  border-color: var(--hw-olive,#6B7A3F); color: var(--hw-olive,#6B7A3F);
  transform: translateY(-1px);
}
.hw-rundknopf.ist-haupt{
  background: var(--hw-olive,#6B7A3F); border-color: var(--hw-olive,#6B7A3F); color: #fff;
}
.hw-rundknopf.ist-haupt:hover{ background: var(--hw-anthracite,#1A1F22); border-color: var(--hw-anthracite,#1A1F22); color: #fff; }

/* ---------------------------------------------------------------- Aktenkopf
   Links die Daten, rechts das Bild: so erkennt man beim Aufrufen sofort,
   wer vor einem steht. */
.hw-aktekopf{
  display: grid; grid-template-columns: 1fr auto; gap: 26px; align-items: start;
  background: var(--hw-flaeche,#fff);
  border: .5px solid var(--hairline,#e2e5dd); border-radius: 10px;
  padding: 20px 22px; margin-bottom: 14px;
}
.hw-aktekopf-marke{
  display: inline-block; font-size: 10.5px; letter-spacing: 1.4px; text-transform: uppercase;
  color: var(--hw-text-muted,#6d7370); font-weight: 700; margin-bottom: 4px;
}
.hw-aktekopf-daten h2{ margin: 0 0 12px; font-size: 22px; color: var(--hw-anthracite,#1A1F22); }
.hw-aktekopf-zeilen{ display: grid; gap: 6px; }
.hw-aktekopf-zeile{ display: grid; grid-template-columns: 96px 1fr; gap: 12px; align-items: baseline; }
.hw-aktekopf-zeile span{ font-size: 11.5px; color: var(--hw-text-muted,#6d7370); text-transform: uppercase; letter-spacing: .6px; }
.hw-aktekopf-zeile strong{ font-size: 14px; font-weight: 600; }
.hw-aktekopf-zeile a{ color: var(--hw-olive,#6B7A3F); text-decoration: none; }
.hw-aktekopf-zeile a:hover{ text-decoration: underline; }
.hw-aktekopf-bild{ display: flex; flex-direction: column; align-items: center; gap: 8px; width: 168px; }
.hw-aktekopf-bild img{
  width: 168px; height: 210px; object-fit: cover; border-radius: 8px;
  border: .5px solid var(--hairline,#e2e5dd); background: var(--hw-snow,#fafbf8); display: block;
}
.hw-aktekopf-platzhalter{
  width: 168px; height: 210px; border-radius: 8px;
  border: 1px dashed var(--hairline-strong,#cfd4c9); background: var(--hw-snow,#fafbf8);
  display: grid; place-items: center;
  font-size: 44px; font-weight: 700; color: var(--hairline-strong,#cfd4c9); letter-spacing: 2px;
}
.hw-aktekopf-hoch{ width: 100%; }
.hw-aktekopf-waehlen{ display: block; cursor: pointer; }
.hw-aktekopf-waehlen input{ position: absolute; width: 1px; height: 1px; opacity: 0; }
.hw-aktekopf-waehlen span{
  display: block; text-align: center; padding: 7px 10px;
  border: 1px solid var(--hairline-strong,#cfd4c9); border-radius: 999px;
  font-size: 12.5px; font-weight: 600; color: var(--hw-text-muted,#6d7370);
  transition: border-color 150ms ease, color 150ms ease;
}
.hw-aktekopf-waehlen:hover span{ border-color: var(--hw-olive,#6B7A3F); color: var(--hw-olive,#6B7A3F); }
.hw-aktekopf-weg{
  border: 0; background: transparent; cursor: pointer; font-family: inherit;
  font-size: 12px; color: var(--hw-s-rot,#a13b3b); text-decoration: underline; padding: 2px;
}
@media (max-width: 760px){
  .hw-aktekopf{ grid-template-columns: 1fr; gap: 18px; padding: 16px; }
  .hw-aktekopf-bild{ width: 100%; order: -1; }
  .hw-aktekopf-bild img, .hw-aktekopf-platzhalter{ width: 140px; height: 175px; }
  .hw-aktekopf-hoch{ max-width: 220px; }
  .hw-aktekopf-zeile{ grid-template-columns: 88px 1fr; }
}

/* ---------------------------------------------------------------- Erinnerungen */
.hw-erin{
  display: grid; grid-template-columns: auto 1fr auto; gap: 12px; align-items: start;
  padding: 12px 0; border-bottom: .5px solid var(--hairline,#e2e5dd);
}
.hw-erin:last-child{ border-bottom: 0; }
.hw-erin-haken button{
  width: 26px; height: 26px; border-radius: 999px; cursor: pointer;
  border: 1px solid var(--hairline-strong,#cfd4c9); background: transparent;
  color: var(--hw-text-muted,#6d7370); font-size: 14px; line-height: 1;
  transition: border-color 150ms ease, background-color 150ms ease, color 150ms ease;
}
.hw-erin-haken button:hover{
  border-color: var(--hw-olive,#6B7A3F); background: var(--hw-olive,#6B7A3F); color: #fff;
}
.hw-erin-text strong{ display: block; font-size: 14.5px; font-weight: 600; }
.hw-erin-text p{ margin: 4px 0 0; font-size: 13px; color: var(--hw-text-muted,#6d7370); line-height: 1.5; }
.hw-erin-zeile{ display: flex; flex-wrap: wrap; gap: 12px; margin-top: 5px; font-size: 12px; color: var(--hw-text-muted,#6d7370); }
.hw-erin-zeile .ist-spaet{ color: var(--hw-s-rot,#a13b3b); font-weight: 600; }
.hw-erin.ist-spaet{ border-left: 3px solid var(--hw-s-rot,#a13b3b); padding-left: 11px; }
.hw-erin.ist-heute{ border-left: 3px solid var(--hw-olive,#6B7A3F); padding-left: 11px; }
.hw-erin.ist-fertig .hw-erin-text strong{ text-decoration: line-through; color: var(--hw-text-muted,#6d7370); font-weight: 500; }
.hw-erin-knoepfe{ display: flex; align-items: center; gap: 10px; }
.hw-erin-knopf{
  border: 0; background: transparent; padding: 2px; cursor: pointer; font-family: inherit;
  font-size: 12px; color: var(--hw-text-muted,#6d7370); text-decoration: none;
}
.hw-erin-knopf:hover{ color: var(--hw-anthracite,#1A1F22); text-decoration: underline; }
.hw-erin-knopf.ist-weg:hover{ color: var(--hw-s-rot,#a13b3b); }

/* ---------------------------------------------------------------- Ausklappen
   Ein Muster fuer alle Listen, die man aufklappt: Meetings, Aufgaben,
   Notizen, Erinnerungen. Oben steht die Zeile, die man beim Ueberfliegen
   liest, darunter alles Weitere. Ohne Javascript, das kann der Browser
   von sich aus. */
.hw-klapp{
  border-bottom: .5px solid var(--hairline,#e2e5dd);
}
.hw-klapp:last-child{ border-bottom: 0; }
.hw-klapp > summary{
  display: flex; flex-direction: column; gap: 3px;
  padding: 13px 30px 13px 0; cursor: pointer; position: relative;
  list-style: none;
}
.hw-klapp > summary::-webkit-details-marker{ display: none; }
.hw-klapp > summary::after{
  content: ""; position: absolute; right: 6px; top: 19px;
  width: 8px; height: 8px; border-right: 1.6px solid var(--hw-text-muted,#6d7370);
  border-bottom: 1.6px solid var(--hw-text-muted,#6d7370);
  transform: rotate(45deg); transition: transform 160ms ease;
}
.hw-klapp[open] > summary::after{ transform: rotate(-135deg); top: 22px; }
.hw-klapp > summary:hover{ background: var(--hw-snow,#fafbf8); }
.hw-klapp > summary strong{ font-size: 14.5px; font-weight: 600; line-height: 1.4; }
.hw-klapp-zeile{ display: flex; flex-wrap: wrap; gap: 12px; }
.hw-klapp-zeile em{
  font-style: normal; font-size: 12px; color: var(--hw-text-muted,#6d7370);
}
.hw-klapp-zeile em.ist-spaet{ color: var(--hw-s-rot,#a13b3b); font-weight: 600; }
.hw-klapp-zeile em.ist-wichtig{ color: var(--hw-olive,#6B7A3F); font-weight: 600; }
.hw-klapp-zeile em.hw-klapp-wer{ color: var(--hw-anthracite,#1A1F22); font-weight: 600; }
.hw-klapp-inhalt{ padding: 2px 0 16px; display: flex; flex-direction: column; gap: 12px; }
/* Ausdruecklich, statt sich auf das Standardblatt des Browsers zu
   verlassen: zugeklappt weg, aufgeklappt da. */
details.hw-klapp:not([open]) > .hw-klapp-inhalt{ display: none; }
details.hw-klapp[open] > .hw-klapp-inhalt{ display: flex; }
.hw-klapp-inhalt p{
  margin: 0; font-size: 13.5px; line-height: 1.6; white-space: pre-wrap;
  color: var(--hw-text,#1A1F22);
}
.hw-klapp-daten{ display: flex; flex-wrap: wrap; gap: 22px; }
.hw-klapp-daten div{ display: flex; flex-direction: column; gap: 1px; }
.hw-klapp-daten span{ font-size: 11px; letter-spacing: .6px; text-transform: uppercase; color: var(--hw-text-muted,#6d7370); }
.hw-klapp-daten strong{ font-size: 13.5px; font-weight: 600; }
.hw-klapp-notizen{ display: flex; flex-direction: column; gap: 8px; padding-left: 12px; border-left: 2px solid var(--hairline,#e2e5dd); }
.hw-klapp-notizen div span{ font-size: 11.5px; color: var(--hw-text-muted,#6d7370); margin-left: 6px; }
.hw-klapp-notizen div strong{ font-size: 12.5px; }
.hw-klapp-notizen div p{ font-size: 13px; margin-top: 2px; }
.hw-klapp-knoepfe{ display: flex; flex-wrap: wrap; align-items: center; gap: 14px; }
.hw-klapp-knoepfe a, .hw-klapp-knoepfe button{
  border: 0; background: transparent; padding: 0; cursor: pointer; font-family: inherit;
  font-size: 12.5px; font-weight: 600; color: var(--hw-olive,#6B7A3F); text-decoration: none;
}
.hw-klapp-knoepfe a:hover, .hw-klapp-knoepfe button:hover{ text-decoration: underline; }
.hw-klapp-knoepfe button.ist-weg{ color: var(--hw-s-rot,#a13b3b); font-weight: 400; }
.hw-klapp-knoepfe .hw-klapp-wer{ font-size: 11.5px; font-weight: 400; color: var(--hw-text-muted,#6d7370); margin-left: auto; }
.hw-klapp-knoepfe form{ display: inline; }

/* Zustaende: eine Farbe am linken Rand sagt, woran man ist. */
.hw-klapp.ist-spaet > summary{ box-shadow: inset 3px 0 0 var(--hw-s-rot,#a13b3b); padding-left: 12px; }
.hw-klapp.ist-wichtig:not(.ist-spaet) > summary{ box-shadow: inset 3px 0 0 var(--hw-olive,#6B7A3F); padding-left: 12px; }
.hw-klapp.ist-fertig > summary strong{ text-decoration: line-through; color: var(--hw-text-muted,#6d7370); font-weight: 500; }
.hw-klapp.ist-jetzt > summary strong{ color: var(--hw-olive,#6B7A3F); }
.hw-klapp--zettel.ist-angeheftet > summary{ box-shadow: inset 3px 0 0 var(--hw-olive,#6B7A3F); padding-left: 12px; }
.hw-klapp-nadel{ font-style: normal; color: var(--hw-olive,#6B7A3F); font-size: 11px; margin-right: 5px; }

/* Wer wie weit ist: eine Zeile je Person unter den Aufgaben. */
.hw-standliste{ display: flex; flex-direction: column; gap: 10px; }
.hw-standzeile{ display: grid; grid-template-columns: 160px 1fr auto; gap: 14px; align-items: center; }
.hw-standzeile strong{ font-size: 13.5px; font-weight: 600; }
.hw-standzeile span{ font-size: 12px; color: var(--hw-text-muted,#6d7370); white-space: nowrap; }
.hw-standzeile span em{ font-style: normal; }
.hw-standzeile span em.ist-spaet{ color: var(--hw-s-rot,#a13b3b); font-weight: 600; }
@media (max-width: 760px){
  .hw-standzeile{ grid-template-columns: 1fr; gap: 4px; }
  .hw-klapp-daten{ gap: 16px; }
}

/* Die Kopfzeile eines Abschnitts traegt rechts das Plus. */
.hw-bereich-kopf .hw-rundknopf{ width: 36px; height: 36px; flex: 0 0 auto; }
.hw-bereich-kopf .hw-rundknopf svg{ width: 17px; height: 17px; }

/* ---------------------------------------------------------------- Bescheinigungen */
.hw-bescheinigung-wahl{ display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 12px; margin-bottom: 16px; }
.hw-bes-karte{
  display: block; padding: 14px 16px; text-decoration: none;
  background: var(--hw-flaeche,#fff);
  border: .5px solid var(--hairline,#e2e5dd); border-radius: 10px;
  transition: border-color 150ms ease, transform 120ms ease;
}
.hw-bes-karte:hover{ border-color: var(--hw-olive,#6B7A3F); transform: translateY(-1px); }
.hw-bes-karte.ist-an{ border-color: var(--hw-olive,#6B7A3F); box-shadow: inset 3px 0 0 var(--hw-olive,#6B7A3F); }
.hw-bes-karte strong{ display: block; font-size: 14px; font-weight: 600; color: var(--hw-anthracite,#1A1F22); margin-bottom: 3px; }
.hw-bes-karte span{ font-size: 12px; line-height: 1.45; color: var(--hw-text-muted,#6d7370); }
.hw-spannen{ display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 14px; }
.hw-spannen > span{ font-size: 11.5px; text-transform: uppercase; letter-spacing: 1px; color: var(--hw-text-muted,#6d7370); }
.hw-spanne{
  padding: 5px 12px; border-radius: 999px; text-decoration: none;
  border: 1px solid var(--hairline-strong,#cfd4c9);
  font-size: 12.5px; color: var(--hw-text-muted,#6d7370);
}
.hw-spanne:hover{ border-color: var(--hw-olive,#6B7A3F); color: var(--hw-olive,#6B7A3F); }
.hw-spanne.ist-an{ background: var(--hw-olive,#6B7A3F); border-color: var(--hw-olive,#6B7A3F); color: #fff; }

/* ---------------------------------------------------------------- Kalender-Ebenen
   Statt eines Topf-Filters hat der Kalender jetzt Ebenen, jede fuer sich
   an- und abschaltbar. Jeder Eintrag gehoert zu genau einer. */
.vkal-ebenen{ display: flex; flex-wrap: wrap; gap: 6px; }
.vkal-ebene{
  display: inline-flex; align-items: center; gap: 7px;
  padding: 5px 12px; border-radius: 999px; text-decoration: none;
  border: 1px solid var(--hairline-strong,#cfd4c9);
  font-size: 12.5px; font-weight: 600; color: var(--hw-text-muted,#6d7370);
  opacity: .55;
  transition: opacity 140ms ease, border-color 140ms ease, background-color 140ms ease;
}
.vkal-ebene:hover{ opacity: .85; }
.vkal-ebene.ist-an{ opacity: 1; color: var(--hw-anthracite,#1A1F22); background: var(--hw-flaeche,#fff); }
.vkal-ebene-punkt{ width: 9px; height: 9px; border-radius: 999px; background: currentColor; flex: 0 0 auto; }
.vkal-ebene.ist-eigen .vkal-ebene-punkt{ background: #4a6fa5; }
.vkal-ebene.ist-team .vkal-ebene-punkt{ background: #8a6d3b; }
.vkal-ebene.ist-jagdschule .vkal-ebene-punkt{ background: var(--hw-olive,#6B7A3F); }
.vkal-ebene.ist-event .vkal-ebene-punkt{ background: #7a5a3a; }
.vkal-ebene.ist-gb_schueler .vkal-ebene-punkt{ background: #b07aa1; }
.vkal-ebene.ist-gb_team .vkal-ebene-punkt{ background: #c08a2e; }
.vkal-ebene.ist-an.ist-eigen{ border-color: #4a6fa5; }
.vkal-ebene.ist-an.ist-team{ border-color: #8a6d3b; }
.vkal-ebene.ist-an.ist-jagdschule{ border-color: var(--hw-olive,#6B7A3F); }
.vkal-ebene.ist-an.ist-event{ border-color: #7a5a3a; }
.vkal-ebene.ist-an.ist-gb_schueler{ border-color: #b07aa1; }
.vkal-ebene.ist-an.ist-gb_team{ border-color: #c08a2e; }
.vkal-alle{ font-size: 12px; color: var(--hw-olive,#6B7A3F); text-decoration: underline; }

/* Ebenen im Monatsraster und in der Tagesansicht. */
.skal-termin.ist-ebene-eigen{ border-left: 3px solid #4a6fa5; }
.skal-termin.ist-gb_schueler{ color: #8a5f80; }
.skal-termin.ist-gb_team{ color: #96690f; font-weight: 600; }
.skal-punkt.ist-ebene-eigen{ background: #4a6fa5; }
.skal-punkt.ist-ebene-team{ background: #8a6d3b; }
.skal-punkt.ist-ebene-gb_schueler{ background: #b07aa1; }
.vkal-marke.ist-eigen{ background: rgba(74,111,165,.12); color: #3c5a86; }
.vkal-geburtstage{ display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 14px; }
.vkal-geburtstag{
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 12px; border-radius: 999px; font-size: 12.5px;
  background: rgba(176,122,161,.1); color: #7d5372;
}
.vkal-geburtstag.ist-gb_team{ background: rgba(192,138,46,.12); color: #8a6216; }

@media (max-width: 380px){
  /* Auf schmalen Geraeten reicht das Zeichen: der Kopf traegt links den
     Burger, mittig das Logo und rechts Lupe und Glocke. */
  .hw-mm-burger span{ display: none; }
  .hw-mm-burger{ padding: 7px 9px; }
}

/* ---------------------------------------------------------------- Bildchen
   Das Foto eines Schuelers in einer Liste. Es steht an einer Stelle im
   PHP (hw_bildchen) und hier, damit Liste, Suche, Anwesenheit und
   Teilnehmerlisten gleich aussehen. Ohne Foto ein Kreis mit Initialen,
   damit die Zeilen nicht unterschiedlich hoch werden. */
.hw-bildchen{
  flex: 0 0 auto; display: block; border-radius: 50%; object-fit: cover;
  background: var(--hw-snow,#fafbf8);
  border: .5px solid var(--hairline,#e2e5dd);
}
.hw-bildchen.ist-leer{
  display: grid; place-items: center; font-weight: 700;
  color: var(--hw-text-muted,#6d7370); background: var(--hw-snow,#f1f3ed);
  border-style: solid; letter-spacing: .5px; text-transform: uppercase;
}
.hw-bildchen--mini{ width: 34px; height: 34px; font-size: 11.5px; }
.hw-bildchen--klein{ width: 46px; height: 46px; font-size: 14px; }
.hw-bildchen--gross{ width: 72px; height: 72px; font-size: 22px; }

/* Die Zeilen, in denen ein Bildchen steht, bekommen es links davor. Die
   bestehenden Bausteine sind Grid oder Flex, deshalb je eine kleine
   Ergaenzung statt einer neuen Zeilenart. */
.hw-listeneintrag{ align-items: center; }
.hw-listen-person{ display: flex; align-items: center; gap: 12px; min-width: 0; }
.hw-listen-person .hw-listen-name{ min-width: 0; }
.hw-tz-person{ display: flex; align-items: center; gap: 12px; min-width: 0; flex: 1 1 auto; }
.hw-tz-person .hw-tz-text{ min-width: 0; }
.hw-aw-name{ display: flex; align-items: center; gap: 11px; flex-wrap: wrap; }
.hw-aw-name .hw-aw-text{ display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.hw-teilnehmertabelle .hw-bildchen{ margin: 0; }
.hw-tn-zelle{ display: flex; align-items: center; gap: 10px; }

@media (max-width: 560px){
  .hw-bildchen--klein{ width: 38px; height: 38px; font-size: 12px; }
}

/* ---------------------------------------------------------------- Aufgabenbrett
   Eine Spalte je Zustand statt einer langen Liste: man sieht auf einen
   Blick, was offen ist, was laeuft und was steht. Auf dem Handy stehen
   die Spalten untereinander, jede mit ihrer Ueberschrift. */
.hw-kanban{
  display: grid; gap: 14px; align-items: start;
  grid-template-columns: repeat(var(--hw-spalten,3), minmax(0, 1fr));
  margin-top: 4px;
}
.hw-kanban-spalte{
  background: var(--hw-snow,#fafbf8);
  border: .5px solid var(--hairline,#e2e5dd); border-radius: 8px;
  padding: 10px 12px 6px; min-width: 0;
}
.hw-kanban-kopf{
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding-bottom: 8px; margin-bottom: 4px;
  border-bottom: .5px solid var(--hairline,#e2e5dd);
}
.hw-kanban-kopf h4{
  margin: 0; font-size: 11.5px; letter-spacing: .8px; text-transform: uppercase;
  color: var(--hw-text-muted,#6d7370); font-weight: 700;
}
.hw-kanban-kopf span{
  font-size: 11.5px; font-weight: 700; color: var(--hw-text-muted,#6d7370);
  background: var(--hw-stone,#F2F4EF); border-radius: 999px; padding: 1px 8px;
}
.hw-kanban-leer{
  margin: 6px 0 10px; font-size: 12.5px; color: var(--hairline-strong,#cfd4c9);
}
/* Ein farbiger Kopf je Spalte, damit die Augen nicht lesen muessen. */
.hw-kanban-spalte.ist-offen .hw-kanban-kopf h4{ color: var(--hw-anthracite,#1A1F22); }
.hw-kanban-spalte.ist-laeuft .hw-kanban-kopf h4{ color: var(--hw-olive,#6B7A3F); }
.hw-kanban-spalte.ist-wartet .hw-kanban-kopf h4{ color: #96690f; }
.hw-kanban-spalte.ist-erledigt{ background: transparent; }
.hw-kanban-spalte.ist-erledigt .hw-kanban-kopf h4{ color: var(--hw-text-muted,#6d7370); }

/* Die Karten sind dieselben Klappzeilen wie vorher, in der Spalte aber
   etwas enger und ohne den Rahmen der Karte darunter. */
.hw-kanban .hw-klapp > summary{ padding: 10px 26px 10px 0; }
.hw-kanban .hw-klapp > summary::after{ right: 2px; top: 16px; }
.hw-kanban .hw-klapp[open] > summary::after{ top: 19px; }
.hw-kanban .hw-klapp > summary strong{ font-size: 13.5px; }
.hw-kanban .hw-klapp-zeile{ gap: 9px; }
.hw-kanban .hw-klapp-daten{ gap: 14px; }
.hw-balken--karte{ display: block; height: 4px; margin-top: 5px; }

/* Die Zustandsknoepfe im aufgeklappten Teil einer Karte. */
.hw-klapp-schieben{ display: flex; flex-wrap: wrap; align-items: center; gap: 7px; }
.hw-klapp-schieben > span{
  font-size: 11px; letter-spacing: .6px; text-transform: uppercase;
  color: var(--hw-text-muted,#6d7370); margin-right: 2px;
}
.hw-klapp-schieben form{ display: inline; }
.hw-klapp-schieben button{
  border: 1px solid var(--hairline-strong,#cfd4c9); background: var(--hw-flaeche,#fff);
  border-radius: 999px; padding: 3px 11px; cursor: pointer; font-family: inherit;
  font-size: 12px; font-weight: 600; color: var(--hw-text-muted,#6d7370);
  transition: border-color 150ms ease, color 150ms ease;
}
.hw-klapp-schieben button:hover{ border-color: var(--hw-olive,#6B7A3F); color: var(--hw-olive,#6B7A3F); }

@media (max-width: 900px){
  .hw-kanban{ grid-template-columns: 1fr; }
  .hw-kanban-spalte{ padding: 10px 12px 4px; }
}

/* ================================================================ Postfach
   Die eigene Seite /postfach: nur Nachrichten, gedacht fuers Telefon.
   Eigene Klassen statt der Termin-Klassen, damit sich beide Portale
   unabhaengig voneinander bewegen koennen. */
.hw-pfseite{ background: var(--hw-snow,#fafbf8); padding-bottom: 76px; }
.hw-pf-kopf{
  position: sticky; top: 0; z-index: 20;
  background: var(--hw-flaeche,#fff); border-bottom: .5px solid var(--hairline,#e3e6df);
}
.hw-pf-kopfinnen{
  display: flex; align-items: center; gap: 12px;
  max-width: 640px; margin: 0 auto; padding: 10px 18px;
}
.hw-pf-kopfinnen img{ width: 36px; height: 36px; object-fit: contain; }
.hw-pf-zurueck{
  flex: 0 0 auto; width: 36px; height: 36px; display: grid; place-items: center;
  border-radius: 50%; border: .5px solid var(--hairline,#e2e5dd);
  color: var(--hw-anthracite,#1A1F22); text-decoration: none; font-size: 17px;
}
.hw-pf-zurueck:hover{ border-color: var(--hw-olive,#6B7A3F); color: var(--hw-olive,#6B7A3F); }
.hw-pf-titel{ flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.hw-pf-titel strong{ font-size: 15px; letter-spacing: -.01em; }
.hw-pf-titel span{
  font-size: 12px; color: var(--hw-text-muted,#6d7370);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.hw-pf-raus{ flex: 0 0 auto; font-size: 12.5px; color: var(--hw-s-rot,#a13b3b); text-decoration: none; }
.hw-pf-blatt{ max-width: 640px; margin: 0 auto; padding: 16px 18px 24px; }
.hw-pf-blatt > .hw-karte{ margin-bottom: 14px; }

/* Der Posteingang: eine Zeile je Nachricht, Bildchen davor. */
.hw-pf-suche{ margin-bottom: 12px; }
.hw-pf-filterleiste{ margin-bottom: 12px; }
.hw-pf-liste{
  background: var(--hw-flaeche,#fff);
  border: .5px solid var(--hairline,#e2e5dd); border-radius: 8px;
  padding: 0 14px; margin-bottom: 12px;
}
.hw-pf-zeile{
  display: flex; align-items: flex-start; gap: 11px;
  padding: 12px 0; border-top: .5px solid var(--hairline,#e2e5dd);
}
.hw-pf-zeile:first-child{ border-top: 0; }
.hw-pf-zeile.ist-neu{ background: #fdf7ee; margin: 0 -14px; padding-left: 14px; padding-right: 14px; }
.hw-pf-haken{ flex: 0 0 20px; padding-top: 8px; }
.hw-pf-zeilentext{ flex: 1 1 auto; min-width: 0; text-decoration: none; color: inherit; display: block; }
.hw-pf-zeilenkopf{ display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px; }
.hw-pf-zeilenkopf strong{ font-size: 14px; font-weight: 600; }
.hw-pf-zeilenkopf em, .hw-pf-zeilenkopf time{
  font-style: normal; font-size: 11.5px; color: var(--hw-text-muted,#6d7370);
}
.hw-pf-zeilenkopf time{ margin-left: auto; white-space: nowrap; }
.hw-pf-auszug{
  display: block; margin-top: 3px; font-size: 13px; line-height: 1.5;
  color: var(--hw-text-muted,#6d7370);
}
.hw-pf-auszug b{ color: var(--hw-anthracite,#1A1F22); font-weight: 600; }
.hw-pf-sammelknoepfe{ display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 16px; }

/* Der Verlauf: ein Gespraech, Aeltestes oben. */
.hw-pf-person{ display: flex; align-items: center; gap: 12px; }
.hw-pf-person > div{ flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.hw-pf-person strong{ font-size: 15px; }
.hw-pf-person span, .hw-pf-person a{ font-size: 12.5px; color: var(--hw-text-muted,#6d7370); }
.hw-pf-person span a{ color: var(--hw-olive,#6B7A3F); text-decoration: none; }
.hw-pf-akte{
  flex: 0 0 auto; font-size: 12.5px; font-weight: 600;
  color: var(--hw-olive,#6B7A3F); text-decoration: none;
  border: 1px solid var(--hairline-strong,#cfd4c9); border-radius: 999px; padding: 5px 13px;
}
.hw-pf-akte:hover{ border-color: var(--hw-olive,#6B7A3F); }
.hw-pf-verlauf{ display: flex; flex-direction: column; gap: 10px; margin-bottom: 16px; }
.hw-pf-blase{
  max-width: 86%; border-radius: 12px; padding: 10px 13px;
  border: .5px solid var(--hairline,#e2e5dd);
}
/* Von uns rechts und olivgruen, vom Schueler links und weiss: so sieht
   man ohne zu lesen, wer gesprochen hat. */
.hw-pf-blase.ist-an{
  align-self: flex-end; background: #eef1e7; border-color: #dbe1cf;
  border-bottom-right-radius: 4px;
}
.hw-pf-blase.ist-von{
  align-self: flex-start; background: var(--hw-flaeche,#fff);
  border-bottom-left-radius: 4px;
}
.hw-pf-blase strong{ display: block; font-size: 13.5px; margin-bottom: 3px; }
.hw-pf-blase p{ margin: 0; font-size: 14px; line-height: 1.55; white-space: pre-wrap; }
.hw-pf-fuss{
  display: flex; align-items: center; flex-wrap: wrap; gap: 5px;
  margin-top: 6px; font-size: 11px; color: var(--hw-text-muted,#6d7370);
}
.hw-pf-fuss form{ display: inline; margin-left: auto; }
.hw-pf-fuss button{
  border: 0; background: transparent; cursor: pointer; font-family: inherit;
  font-size: 14px; line-height: 1; color: var(--hairline-strong,#cfd4c9); padding: 0 2px;
}
.hw-pf-fuss button:hover{ color: var(--hw-s-rot,#a13b3b); }
.hw-pf-antwort .hw-feld{ margin-bottom: 10px; }

/* Beim Schreiben: die Namensliste mit Haken, oben ein Filterfeld. */
.hw-pf-auswahl{
  max-height: 260px; overflow-y: auto; margin: 0 0 14px;
  border: .5px solid var(--hairline,#e2e5dd); border-radius: 8px;
}
.hw-pf-wahl{
  display: flex; align-items: center; gap: 10px; padding: 9px 12px; cursor: pointer;
  border-top: .5px solid var(--hairline,#e2e5dd);
}
.hw-pf-wahl:first-child{ border-top: 0; }
.hw-pf-wahl:hover{ background: var(--hw-snow,#fafbf8); }
/* Ohne diese Zeile bliebe eine ausgefilterte Zeile stehen: das display
   der Klasse schlaegt das display:none, das [hidden] mitbringt. */
.hw-pf-wahl[hidden]{ display: none; }
.hw-pf-wahl span{ display: flex; flex-direction: column; min-width: 0; }
.hw-pf-wahl strong{ font-size: 13.5px; font-weight: 600; }
.hw-pf-wahl em{ font-style: normal; font-size: 11.5px; color: var(--hw-text-muted,#6d7370); }

.hw-pf-rundliste .hw-pf-rundzeile{
  display: flex; flex-direction: column; gap: 2px;
  padding: 9px 0; border-top: .5px solid var(--hairline,#e2e5dd);
}
.hw-pf-rundliste .hw-pf-rundzeile:first-of-type{ border-top: 0; }
.hw-pf-rundzeile strong{ font-size: 13.5px; font-weight: 600; }
.hw-pf-rundzeile span{ font-size: 11.5px; color: var(--hw-text-muted,#6d7370); }

/* Die Leiste unten: drei Wege, immer erreichbar, auch mit dem Daumen. */
.hw-pf-leiste{
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 30;
  display: flex; background: var(--hw-flaeche,#fff);
  border-top: .5px solid var(--hairline,#e2e5dd);
  padding-bottom: env(safe-area-inset-bottom, 0);
}
.hw-pf-leiste a{
  flex: 1 1 0; display: flex; align-items: center; justify-content: center; gap: 6px;
  padding: 13px 6px; text-decoration: none; font-size: 13px; font-weight: 600;
  color: var(--hw-text-muted,#6d7370);
}
.hw-pf-leiste a.ist-hier{ color: var(--hw-olive,#6B7A3F); box-shadow: inset 0 2px 0 var(--hw-olive,#6B7A3F); }
.hw-pf-leiste i{
  font-style: normal; font-size: 11px; font-weight: 700; color: #fff;
  background: var(--hw-s-rot,#a13b3b); border-radius: 999px; padding: 1px 7px;
}

/* ---------------------------------------------------------- Auftragsansicht
   Ein Auftrag wird erst geoeffnet und in Ruhe angesehen, die Maske kommt
   erst auf den Knopf Bearbeiten. Die Bloecke sind bewusst nuechtern:
   Feldname klein darueber, Wert darunter. */
.hw-ansicht-block{
  padding: 16px 0; border-top: .5px solid var(--hairline,#e2e5dd);
}
.hw-ansicht-block:first-of-type{ padding-top: 6px; border-top: 0; }
.hw-ansicht-block h4{
  margin: 0 0 12px; font-size: 12px; letter-spacing: 1.6px; text-transform: uppercase;
  color: var(--hw-olive,#6B7A3F); font-weight: 600;
}
.hw-ansicht-felder{
  display: grid; gap: 12px 26px;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
}
.hw-ansicht-feld{ display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.hw-ansicht-feld > span{
  font-size: 11px; letter-spacing: .6px; text-transform: uppercase;
  color: var(--hw-text-muted,#6d7370);
}
.hw-ansicht-feld > strong{ font-size: 14px; font-weight: 600; line-height: 1.5; overflow-wrap: anywhere; }
.hw-ansicht-feld a{ color: var(--hw-olive,#6B7A3F); text-decoration: none; }
.hw-ansicht-feld a:hover{ text-decoration: underline; }
.hw-ansicht-knoepfe{ display: flex; flex-wrap: wrap; gap: 8px; }
.hw-ansicht .hw-kopfzeile{ display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }

/* Die Zeile in der Liste ist jetzt ein Link auf die Ansicht. */
.hw-tz-auf{ text-decoration: none; color: inherit; display: block; }
.hw-tz-auf:hover strong{ color: var(--hw-olive,#6B7A3F); }

/* ---------------------------------------------------------------- Bildergalerie
   Unterlagen im Portal und Pflege in der Verwaltung teilen sich das
   Gitter; nur die Knoepfe auf den Bildern unterscheiden sich. */
.hw-galerie-titel{ margin: 28px 0 14px; }
.hw-galerie-titel h2{ margin: 0 0 6px; }
.hw-galerie-titel .hw-hinweis{ margin: 0; }
.hw-galerie-gitter{ display: grid; grid-template-columns: repeat(auto-fill, minmax(108px, 1fr)); gap: 8px; margin: 12px 0; }
.hw-galerie-bild{ position: relative; }
.hw-galerie-bild > a:first-child{ display: block; aspect-ratio: 1; border-radius: 8px; overflow: hidden; background: #edeae4; }
.hw-galerie-bild img{ width: 100%; height: 100%; object-fit: cover; display: block; }
.hw-galerie-bild > a:first-child:hover img{ opacity: .88; }
/* Der Pfeil zum Herunterladen (Portal) und das Kreuz zum Loeschen
   (Verwaltung) sitzen in derselben Ecke, es gibt immer nur eines. */
.hw-galerie-laden,
.hw-galerie-weg{ position: absolute; top: 6px; right: 6px; width: 26px; height: 26px;
  display: flex; align-items: center; justify-content: center; border-radius: 50%;
  background: rgba(20,20,16,.62); color: #fff; text-decoration: none; font-size: 15px;
  line-height: 1; border: 0; cursor: pointer; }
.hw-galerie-laden:hover,
.hw-galerie-weg:hover{ background: rgba(20,20,16,.85); color: #fff; }
.hw-galerie-fuss{ align-items: center; gap: 10px; flex-wrap: wrap; }
.hw-galerie-nachladen{ display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.hw-galerie-nachladen input[type="file"]{ max-width: 240px; }

/* ---------------------------------------------------------------- Schichtplan
   Die Wochentafel des Ladens (/schichtplan): je Tag zwei Spuren, eine je
   Person, die Schichten als greifbare Bloecke. Die Farben kommen als
   --sp-farbe von der Spur, damit neue Bloecke sie einfach erben. */

.sp-kopf{ display:flex; flex-wrap:wrap; align-items:center; gap:14px 22px; margin-bottom:12px; }
.sp-wochenwahl{ display:flex; align-items:center; gap:8px; }
.sp-pfeil{ display:flex; align-items:center; justify-content:center; width:34px; height:34px;
  border:.5px solid #d5d9cd; border-radius:6px; background:#fff; color:#1A1F22;
  font-size:22px; line-height:1; text-decoration:none; }
.sp-pfeil:hover{ background:#eef1e7; }
.sp-wochentitel{ display:flex; flex-direction:column; min-width:220px; text-align:center; }
.sp-wochentitel strong{ font-size:16px; }
.sp-wochentitel a{ font-size:12.5px; color:#6B7A3F; }
/* ---------------------------------------------------------------- Die Lage
   Drei Fragen, drei Karten: Ist der Plan ausgehängt? Kommen beide auf ihre
   Stunden? Steht immer jemand im Laden? Zahlen allein sagen zu wenig,
   deshalb steht neben jeder ein Satz, der sie deutet. */
.sp-lage{ display:grid; grid-template-columns:repeat(auto-fit, minmax(250px, 1fr));
  gap:12px; margin-bottom:16px; align-items:stretch; }
.sp-lagekarte{ border:.5px solid #d5d9cd; border-radius:8px; background:#fff; padding:14px 16px; }
.sp-lagekarte h2{ margin:0 0 10px; font-size:11.5px; text-transform:uppercase;
  letter-spacing:.09em; color:#8a8f84; font-weight:600; }
.sp-lagetext{ margin:0; font-size:13px; line-height:1.5; color:#666; }

.sp-zustand{ display:inline-block; margin:0 0 8px; padding:4px 12px; border-radius:20px;
  font-size:13px; border:.5px solid #d5d9cd; background:#f4f5f1; color:#555; }
.sp-zustand--veroeffentlicht{ background:#eef2e6; border-color:#c7d3ae; color:#41501f; }

.sp-person + .sp-person{ margin-top:12px; padding-top:12px; border-top:.5px solid #eef0ea; }
.sp-personkopf{ display:flex; align-items:baseline; justify-content:space-between; gap:10px; }
.sp-personkopf strong{ font-size:14px; }
.sp-summe{ font-size:13px; color:#555; white-space:nowrap; }
.sp-summe b{ font-size:15px; color:#1A1F22; }
.sp-balken{ height:7px; margin:7px 0 5px; border-radius:4px; background:#eef0ea; overflow:hidden; }
.sp-balken i{ display:block; height:100%; background:var(--sp-farbe,#5E6F3A); border-radius:4px;
  transition:width .25s ease; }
.sp-balken--drunter i{ background:repeating-linear-gradient(-45deg,
  var(--sp-farbe,#5E6F3A) 0, var(--sp-farbe,#5E6F3A) 5px, rgba(255,255,255,.45) 5px, rgba(255,255,255,.45) 8px); }
.sp-balken--drueber i{ background:#b4762f; }
.sp-personfuss{ display:flex; align-items:baseline; justify-content:space-between; gap:10px;
  font-size:12.5px; color:#777; }
.sp-abweichung--genau{ color:#41501f; }
.sp-abweichung--drunter{ color:#8a6914; }
.sp-abweichung--drueber{ color:#8a4914; }

.sp-besetzung-satz{ margin:0 0 6px; font-size:14px; }
.sp-besetzung-satz--gut{ color:#41501f; }
.sp-besetzung-satz--schlecht{ color:#7d2b2b; }
.sp-lagekarte--besetzung.hat-luecken{ border-color:#e3c4c4; background:#fdf8f8; }
.sp-lueckenliste{ list-style:none; margin:0; padding:0; }
.sp-lueckenliste li{ display:flex; justify-content:space-between; gap:12px;
  padding:5px 0; border-top:.5px solid #f0e4e4; font-size:13px; }
.sp-lueckenliste li:first-child{ border-top:0; }
.sp-lueckenliste strong{ font-weight:600; }
.sp-lueckenliste span{ color:#7d2b2b; white-space:nowrap; }
/* Die vier Knöpfe sind eine Reihe, also müssen sie eine Reihe sein: gleiche
   Höhe, gleiche Schrift, gleicher Radius. Von Haus aus behält .btn-primary
   die Maße der öffentlichen Website (16/28, eckig), das schlichte .btn die
   der Verwaltung (11/18, rund). Unterscheiden sollen sie sich nur durch die
   Fläche, nicht durch die Form. */
.sp-knoepfe{ display:flex; flex-wrap:wrap; align-items:stretch; gap:8px; margin-left:auto; }
.sp-knoepfe form{ margin:0; display:flex; }
.sp-knoepfe .btn{
  min-height:42px; padding:0 18px; border-radius:9px;
  font-size:12.5px; letter-spacing:1.2px;
  display:inline-flex; align-items:center; justify-content:center; text-align:center;
}
.sp-leeren{ color:#7d2b2b; }
.sp-hilfe{ font-size:13.5px; color:#666; max-width:860px; margin:0 0 14px; }

.sp-tafelrahmen{ overflow-x:auto; border:.5px solid #d5d9cd; border-radius:8px; background:#fff; }
.sp-tafel{ display:flex; min-width:900px; }
.sp-zeitspalte{ flex:0 0 52px; border-right:.5px solid #e2e5dd; }
.sp-tagspalte{ flex:1 1 0; min-width:130px; border-right:.5px solid #e2e5dd; }
.sp-tagspalte:last-child{ border-right:0; }
.sp-tagspalte.ist-heute .sp-tagkopf{ background:#eef2e6; }
.sp-tagkopf{ position:sticky; top:0; z-index:3; display:flex; align-items:baseline; gap:6px;
  height:40px; padding:0 8px; background:#f7f8f4; border-bottom:.5px solid #e2e5dd;
  font-size:13px; box-sizing:border-box; }
.sp-tagkopf strong{ font-size:13.5px; }
.sp-tagkopf span{ color:#888; }
.sp-neu{ margin-left:auto; width:24px; height:24px; align-self:center; border:.5px solid #c7d3ae;
  border-radius:6px; background:#fff; color:#5E6F3A; font-size:16px; line-height:1; cursor:pointer; }
.sp-neu:hover{ background:#eef2e6; }
.sp-zeitkoerper{ position:relative; height:576px; }  /* 12 Stunden zu je 48px */
.sp-zeitmarke{ height:48px; box-sizing:border-box; font-size:11px; color:#888; text-align:right; padding-right:6px; }
.sp-zeitmarke span{ position:relative; top:-6px; }
.sp-tag{ position:relative; height:576px;
  background:repeating-linear-gradient(to bottom, #fbfbf9 0, #fbfbf9 47.5px, #eef0ea 47.5px, #eef0ea 48px); }
.sp-offen{ position:absolute; left:0; right:0; background:#f2f6e8; }
.sp-ladenpause{ position:absolute; left:0; right:0; z-index:1;
  background:repeating-linear-gradient(-45deg, #f2f6e8 0, #f2f6e8 6px, #e7ecd8 6px, #e7ecd8 8px); }
/* Wo niemand steht, obwohl jemand stehen müsste. Fällt absichtlich auf. */
.sp-luecke{ position:absolute; left:0; right:0; z-index:1;
  background:repeating-linear-gradient(-45deg, #fbeded 0, #fbeded 5px, #f3d6d6 5px, #f3d6d6 9px);
  box-shadow:inset 0 0 0 1px #e8c3c3; }
.sp-spur{ position:absolute; top:0; bottom:0; z-index:2; }
.sp-spur + .sp-spur{ border-left:.5px dashed #dde1d4; }

.sp-schicht{ position:absolute; left:3px; right:3px; box-sizing:border-box; z-index:4;
  border-radius:6px; padding:5px 6px 5px 9px; overflow:hidden; cursor:grab;
  background:color-mix(in srgb, var(--sp-farbe,#5E6F3A) 14%, #fff);
  border:1px solid var(--sp-farbe,#5E6F3A);
  border-left:5px solid var(--sp-farbe,#5E6F3A);
  touch-action:none; user-select:none; -webkit-user-select:none; }
.sp-schicht.wird-gezogen{ cursor:grabbing; z-index:6; box-shadow:0 6px 18px rgba(26,31,34,.25); }
.sp-schicht:focus-visible{ outline:2px solid var(--sp-farbe,#5E6F3A); outline-offset:2px; }
.sp-schichttext{ display:block; font-size:11.5px; line-height:1.35; color:#1A1F22; pointer-events:none; }
.sp-schichttext b{ display:block; font-size:12px; }
.sp-schichttext em{ display:block; font-style:normal; color:#666; }
.sp-schichttext i{ display:block; font-style:normal; color:#444; }
.sp-schichttext u{ display:block; text-decoration:none; color:#666; font-style:italic;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.sp-griff{ position:absolute; left:0; right:0; height:8px; cursor:ns-resize; z-index:5; }
.sp-griff--oben{ top:0; }
.sp-griff--unten{ bottom:0; }

.sp-legende{ display:flex; flex-wrap:wrap; gap:8px 20px; margin-top:12px; font-size:13px; color:#555; }
.sp-legende i{ display:inline-block; width:14px; height:14px; border-radius:4px; vertical-align:-2px; margin-right:5px; }
.sp-legende-offen{ background:#f2f6e8; border:.5px solid #d5dcc0; }
.sp-legende-pause{ background:repeating-linear-gradient(-45deg, #f2f6e8 0, #f2f6e8 4px, #e0e6cf 4px, #e0e6cf 6px); border:.5px solid #d5dcc0; }
.sp-legende-luecke{ background:repeating-linear-gradient(-45deg, #fbeded 0, #fbeded 4px, #f3d6d6 4px, #f3d6d6 6px); border:.5px solid #e8c3c3; }

.sp-dialog{ border:0; border-radius:10px; padding:0; max-width:420px; width:calc(100vw - 40px);
  box-shadow:0 18px 50px rgba(26,31,34,.3); }
.sp-dialog::backdrop{ background:rgba(26,31,34,.45); }
.sp-dialog form{ padding:22px 24px; }
.sp-dialog h2{ margin:0 0 14px; font-size:18px; }
.sp-feldreihe{ display:flex; gap:12px; margin-bottom:12px; }
.sp-feldreihe label{ flex:1; display:flex; flex-direction:column; gap:4px; font-size:13px; color:#555; }
.sp-feldbreit{ display:flex; flex-direction:column; gap:4px; font-size:13px; color:#555; margin-bottom:12px; }
.sp-dialog input, .sp-dialog select{ padding:8px 10px; border:.5px solid #c9cec2; border-radius:5px; font-size:14px; }
.sp-dialog-fehler{ margin:0 0 12px; font-size:13.5px; color:#7d2b2b; }
.sp-dialog-knoepfe{ display:flex; justify-content:space-between; align-items:stretch; gap:10px; }
.sp-dialog-knoepfe span{ display:flex; gap:8px; }
/* Wie oben in der Kopfreihe: gleiche Höhe und Form, es unterscheidet nur
   die Fläche. */
.sp-dialog-knoepfe .btn{
  min-height:40px; padding:0 16px; border-radius:9px;
  font-size:12.5px; letter-spacing:1.2px;
  display:inline-flex; align-items:center; justify-content:center;
}
.sp-dialog-loeschen{ color:#7d2b2b; }

/* ---------------------------------------------------------------- Tagesliste
   Am Telefon ist die Wochentafel nur eine Fläche zum Seitwärtsschieben.
   Dort steht deshalb dieselbe Woche als Liste: je Tag eine Karte, die
   Schichten untereinander, ein Tippen öffnet den Dialog. Am Schreibtisch
   ist es umgekehrt, dort bleibt die Tafel. */
.sp-liste{ display:none; }
.sp-listenhilfe{ font-size:13px; color:#666; margin:0 0 10px; }
.sp-tagkarte{ border:.5px solid #d5d9cd; border-radius:8px; background:#fff;
  margin-bottom:10px; overflow:hidden; }
.sp-tagkarte.ist-heute{ border-color:#c7d3ae; box-shadow:0 0 0 1px #c7d3ae inset; }
.sp-tagkarte-kopf{ display:flex; align-items:baseline; gap:8px; padding:10px 12px;
  background:#f7f8f4; border-bottom:.5px solid #e2e5dd; }
.sp-tagkarte-kopf strong{ font-size:14.5px; }
.sp-tagkarte-kopf > span{ font-size:12.5px; color:#888; }
.sp-tagkarte-offen{ margin-left:auto; }
.sp-tagkarte .sp-neu{ margin-left:0; align-self:center; flex:0 0 auto; }
.sp-tagkarte-frei{ margin:0; padding:12px; font-size:13px; color:#999; }
.sp-tagkarte-luecke{ margin:0; padding:8px 12px; font-size:12.5px; color:#7d2b2b;
  background:#fdf3f3; border-bottom:.5px solid #f0e0e0; }
.sp-listenschicht{ display:flex; align-items:center; gap:10px; width:100%;
  padding:11px 12px; border:0; border-top:.5px solid #eef0ea; border-radius:0;
  background:#fff; font:inherit; text-align:left; cursor:pointer;
  border-left:4px solid var(--sp-farbe,#5E6F3A); }
.sp-tagkarte-kopf + .sp-listenschicht{ border-top:0; }
.sp-listenschicht:hover{ background:#fbfbf9; }
.sp-punkt{ flex:0 0 auto; width:9px; height:9px; border-radius:50%; background:var(--sp-farbe,#5E6F3A); }
.sp-listentext{ display:flex; flex-wrap:wrap; align-items:baseline; gap:3px 9px; min-width:0; }
.sp-listentext strong{ font-size:13.5px; }
.sp-listenzeit{ font-size:13.5px; color:#1A1F22; }
.sp-listentext em{ font-style:normal; font-size:12.5px; color:#777; }
.sp-listennotiz{ flex:1 1 100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.sp-listenstunden{ margin-left:auto; flex:0 0 auto; font-size:12.5px; color:#555; white-space:nowrap; }

@media (max-width: 760px){
  .sp-kopf{ gap:12px; }
  .sp-wochenwahl{ width:100%; justify-content:space-between; }
  .sp-wochentitel{ min-width:0; }
  .sp-lage{ grid-template-columns:1fr; gap:10px; }
  /* Zwei gleich breite Spalten statt einer zerfransten Reihe. */
  .sp-knoepfe{ margin-left:0; width:100%; }
  .sp-knoepfe > form, .sp-knoepfe > .btn{ flex:1 1 calc(50% - 4px); }
  .sp-knoepfe .btn{ width:100%; padding:0 10px; }
  /* Tafel raus, Liste rein. */
  .sp-tafelrahmen, .sp-legende, .sp-hilfe{ display:none; }
  .sp-liste{ display:block; }
}

/* ---------------------------------------------------------------- Übersicht
   Die Startseite der Verwaltung. Sie beantwortet drei Fragen in dieser
   Reihenfolge: Was ist heute los, was wartet auf mich, wie steht das Haus
   da. Alles ist ein Weg irgendwohin, keine Zahl steht für sich allein. */

.hw-ueb-heute{ display:grid; grid-template-columns:repeat(auto-fit, minmax(310px, 1fr));
  gap:14px; margin-bottom:14px; align-items:start; }
.hw-ueb-karte{ border:.5px solid #d5d9cd; border-radius:8px; background:#fff;
  padding:16px 18px; margin-bottom:14px; }
/* Jede Karte so hoch, wie ihr Inhalt es verlangt. Auf gleiche Höhe
   gezogen bekämen die kürzeren eine tote Fläche, und die ist schlimmer
   als eine ungerade Unterkante. */
.hw-ueb-heute > .hw-ueb-karte{ margin-bottom:0; box-sizing:border-box; }
.hw-ueb-kopf{ display:flex; align-items:baseline; justify-content:space-between;
  gap:12px; margin-bottom:10px; }
.hw-ueb-kopf h3{ margin:0; font-size:15px; }
.hw-ueb-weiter{ font-size:12.5px; color:#6B7A3F; text-decoration:none; white-space:nowrap; }
.hw-ueb-weiter:hover{ text-decoration:underline; }
.hw-ueb-stand{ font-size:12.5px; color:#8a8f84; }
.hw-ueb-ruhe{ margin:0; font-size:13.5px; line-height:1.55; color:#777; }
.hw-ueb-zeile{ margin:0 0 10px; font-size:13px; color:#777; }
.hw-ueb-nachsatz{ margin:10px 0 0; font-size:12.5px; }
.hw-ueb-nachsatz a{ color:#6B7A3F; }
.hw-ueb-warnung{ margin:10px 0 0; padding:8px 11px; border-radius:6px;
  background:#fdf3f3; border:.5px solid #f0dede; color:#7d2b2b; font-size:13px; }

.hw-ueb-liste{ list-style:none; margin:0; padding:0; }
.hw-ueb-liste > li{ display:flex; align-items:baseline; gap:10px;
  padding:9px 0; border-top:.5px solid #eef0ea; font-size:13.5px; }
.hw-ueb-liste > li:first-child{ border-top:0; padding-top:0; }
.hw-ueb-was{ display:flex; flex-direction:column; gap:2px; min-width:0; flex:1; }
.hw-ueb-was strong{ font-size:13.5px; font-weight:600; }
.hw-ueb-was em{ font-style:normal; font-size:12.5px; color:#777;
  overflow:hidden; text-overflow:ellipsis; }
.hw-ueb-was em.ist-spaet{ color:#7d2b2b; }

/* Wer heute im Laden steht. Wer gerade da ist, bekommt einen grünen Punkt. */
.hw-ueb-schicht strong{ min-width:74px; }
.hw-ueb-schicht span{ color:#555; flex:1; }
.hw-ueb-schicht em{ font-style:normal; font-size:11.5px; color:#41501f;
  background:#eef2e6; border-radius:20px; padding:2px 9px; white-space:nowrap; }
.hw-ueb-schicht.ist-jetzt strong::before{ content:''; display:inline-block;
  width:7px; height:7px; border-radius:50%; background:#5E6F3A; margin-right:6px; }

.hw-ueb-uhr{ flex:0 0 62px; font-size:13px; color:#555; font-variant-numeric:tabular-nums; }
.hw-ueb-termin.ist-abgesagt .hw-ueb-was strong{ text-decoration:line-through; color:#999; }
.hw-ueb-aufgabe.ist-wichtig .hw-ueb-was strong::before{ content:'!'; color:#8a6914;
  font-weight:700; margin-right:5px; }

/* Was wartet: eine Kachel je Sache, jede ein Weg dorthin. Was auf null
   steht, erscheint gar nicht erst. */
.hw-ueb-wartet{ display:grid; grid-template-columns:repeat(auto-fill, minmax(158px, 1fr)); gap:9px; }
.hw-ueb-kachel{ display:flex; flex-direction:column; gap:3px; padding:12px 14px;
  border:.5px solid #d5d9cd; border-radius:7px; background:#fbfbf9;
  color:#1A1F22; text-decoration:none; }
.hw-ueb-kachel:hover{ border-color:#6B7A3F; background:#f4f6ee; }
.hw-ueb-kachel strong{ font-size:23px; line-height:1; font-weight:600; }
.hw-ueb-kachel span{ font-size:12.5px; color:#666; line-height:1.35; }
.hw-ueb-kachel.ist-dringend{ border-color:#e3c4c4; background:#fdf8f8; }
.hw-ueb-kachel.ist-dringend strong{ color:#7d2b2b; }
.hw-ueb-kachel.ist-dringend:hover{ border-color:#c98a8a; background:#fbf1f1; }

/* Die Zahlen des Hauses. Klein und unten: Hintergrund, keine Handlung. */
.hw-ueb-zahlen{ display:flex; flex-wrap:wrap; gap:10px 34px; }
.hw-ueb-zahlen a{ display:flex; flex-direction:column; gap:1px; text-decoration:none; color:#1A1F22; }
.hw-ueb-zahlen a:hover strong{ color:#6B7A3F; }
.hw-ueb-zahlen strong{ font-size:19px; font-weight:600; }
.hw-ueb-zahlen span{ font-size:12px; color:#8a8f84; }

@media (max-width: 760px){
  .hw-ueb-heute{ grid-template-columns:1fr; gap:12px; }
  .hw-ueb-wartet{ grid-template-columns:repeat(auto-fill, minmax(140px, 1fr)); }
  .hw-ueb-zahlen{ gap:10px 24px; }
}
.hw-ueb-uhr--breit{ flex:0 0 96px; }

/* Die Woche im Laden als Streifen unter dem heutigen Tag: sechs Kästchen,
   je Tag die Anfangsbuchstaben derer, die eingeteilt sind. */
.hw-ueb-woche{ display:grid; grid-template-columns:repeat(6, 1fr); gap:5px; margin-top:14px;
  padding-top:12px; border-top:.5px solid #eef0ea; }
.hw-ueb-wtag{ display:flex; flex-direction:column; align-items:center; gap:2px;
  padding:6px 2px; border-radius:6px; background:#fbfbf9; border:.5px solid #eef0ea; }
.hw-ueb-wtag span{ font-size:10.5px; color:#8a8f84; text-transform:uppercase; letter-spacing:.05em; }
.hw-ueb-wtag strong{ font-size:12px; font-weight:600; }
.hw-ueb-wtag.ist-heute{ background:#eef2e6; border-color:#c7d3ae; }
.hw-ueb-wtag.ist-vorbei{ opacity:.5; }

/* Eine Karte, die etwas will: heller Warnton, aber kein Alarm. */
.hw-ueb-karte--achtung{ border-color:#e8d6b4; background:#fdfaf4; }
.hw-ueb-karte--achtung .hw-ueb-kopf h3{ color:#7a5c12; }

.hw-ueb-liste > li > .hw-ueb-weiter{ flex:0 0 auto; align-self:center; }
.hw-ueb-zahlen a.ist-dringend strong{ color:#7d2b2b; }

/* ---------------------------------------------------------------- Events
   Kurse neben der Jagdscheinausbildung.

   Der Teil, auf den es ankommt, ist die Teilnehmerliste. Auf dem Rechner
   soll sie eine Liste sein, Zeile unter Zeile, damit man beim Abhaken mit
   den Augen die Spalte halten kann. Am Telefon geht das nicht: sieben
   Eingabefelder nebeneinander sind dort unbedienbar. Deshalb faellt das
   Raster unter 900 px weg und jede Person wird eine Karte, in der jedes
   Feld seine Beschriftung danebenstehen hat.

   Es ist dieselbe Maske, nur anders angeordnet. Zwei getrennte Fassungen
   waeren zwei Stellen, an denen ein Feld fehlen kann. */

.ev-zurueck{ margin:0 0 10px; font-size:13.5px; }
.ev-zurueck a{ color:var(--hw-olive,#6B7A3F); text-decoration:none; }
.ev-zurueck a:hover{ text-decoration:underline; }

.ev-titel{ margin:26px 0 8px; font-size:19px; }
.ev-titel:first-child{ margin-top:0; }
.ev-zahlen{ font-size:13px; font-weight:400; color:var(--hw-text-muted,#6d7370); }

.ev-kopfreihe{ display:flex; flex-wrap:wrap; align-items:baseline;
  justify-content:space-between; gap:10px 20px; margin:26px 0 10px; }
.ev-kopfreihe > *{ margin:0; }
.ev-knopfform{ margin:0; }

/* Der Kopf eines Termins: was man wissen muss, ohne zu klicken. */
.ev-kopf{ margin:0 0 16px; }
.ev-kopf h2{ margin:0; font-size:22px; line-height:1.25; }
.ev-kopf-kurs{ margin:2px 0 12px; color:var(--hw-text-muted,#6d7370); font-size:14px; }
.ev-eckdaten{ display:flex; flex-wrap:wrap; gap:8px 28px; margin:0;
  padding:12px 16px; border:1px solid var(--hairline,#e4e7dd); border-radius:8px;
  background:var(--hw-snow,#fbfbf8); }
.ev-eckdaten > div{ min-width:110px; }
.ev-eckdaten dt{ font-size:10.5px; letter-spacing:1px; text-transform:uppercase;
  color:var(--hw-text-muted,#6d7370); }
.ev-eckdaten dd{ margin:2px 0 0; font-size:15px; }
.ev-eckdaten dd.ist-offen{ color:var(--hw-s-arbeit,#b8892f); }

/* Karten und Aufklapper */
.ev-karte{ border:1px solid var(--hairline,#e4e7dd); border-radius:8px;
  background:var(--hw-flaeche,#fff); padding:16px 18px; margin:16px 0 24px; }
.ev-karte > h3{ margin:0 0 10px; font-size:16px; }
.ev-aufklapp{ padding:0; }
.ev-aufklapp > summary{ cursor:pointer; padding:13px 18px; font-weight:600; font-size:14.5px;
  list-style:none; display:flex; align-items:center; gap:10px; }
.ev-aufklapp > summary::-webkit-details-marker{ display:none; }
.ev-aufklapp > summary::before{ content:'+'; font-size:16px; line-height:1;
  color:var(--hw-olive,#6B7A3F); }
.ev-aufklapp[open] > summary::before{ content:'–'; }
.ev-aufklapp[open] > summary{ border-bottom:1px solid var(--hairline,#e4e7dd); }
.ev-aufklapp > form, .ev-aufklapp > div{ padding:16px 18px; }
.ev-warn{ font-weight:400; font-size:12.5px; color:var(--hw-s-arbeit,#b8892f); }

/* Feldgruppen: zwei ruhige Spalten, am Telefon eine. */
.ev-felder{ display:grid; gap:12px 18px; grid-template-columns:repeat(2,minmax(0,1fr)); }
.ev-felder label{ display:flex; flex-direction:column; gap:4px; font-size:12.5px;
  color:var(--hw-text-muted,#6d7370); min-width:0; }
.ev-felder input, .ev-felder select{
  padding:8px 10px; border:1px solid var(--hairline-strong,#cfd4c9); border-radius:5px;
  font:inherit; font-size:14px; background:var(--hw-flaeche,#fff); color:var(--hw-text,#1A1F22);
  width:100%; min-width:0; }
.ev-felder input:focus, .ev-felder select:focus,
.ev-person input:focus, .ev-person select:focus{
  outline:2px solid var(--hw-olive,#6B7A3F); outline-offset:-1px; }
.ev-schalter{ flex-direction:row !important; align-items:center; gap:8px;
  font-size:14px; color:var(--hw-text,#1A1F22); }
.ev-schalter input{ width:auto; }

/* Die Kurse als Kacheln */
.ev-kacheln{ display:grid; gap:12px; grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); }
.ev-kachel{ display:flex; flex-direction:column; gap:5px; padding:15px 16px;
  border:1px solid var(--hairline,#e4e7dd); border-radius:8px;
  background:var(--hw-flaeche,#fff); color:var(--hw-text,#1A1F22);
  text-decoration:none; transition:border-color .15s; }
.ev-kachel:hover{ border-color:var(--hw-olive,#6B7A3F); }
.ev-kachel strong{ font-size:15px; line-height:1.3; }
.ev-kachel--still{ background:var(--hw-snow,#f6f6f2); color:var(--hw-text-muted,#6d7370); }
.ev-marke{ font-size:12px; color:var(--hw-olive,#6B7A3F); }
.ev-marke--offen{ color:var(--hw-s-arbeit,#b8892f); }

.ev-leer{ border:1px dashed var(--hairline-strong,#cfd4c9); border-radius:8px;
  padding:20px; background:var(--hw-snow,#fbfbf8); color:var(--hw-text-muted,#6d7370); }
.ev-leer p{ margin:0 0 6px; }
.ev-leer p:last-child{ margin-bottom:0; }

/* Die Termine eines Kurses */
.ev-termine{ display:flex; flex-direction:column; gap:8px; }
.ev-termin{ display:flex; flex-wrap:wrap; align-items:center; gap:6px 18px;
  padding:12px 16px; border:1px solid var(--hairline,#e4e7dd); border-radius:8px;
  background:var(--hw-flaeche,#fff); text-decoration:none; color:var(--hw-text,#1A1F22); }
.ev-termin:hover{ border-color:var(--hw-olive,#6B7A3F); }
.ev-termin.ist-vorbei{ background:var(--hw-snow,#f6f6f2); color:var(--hw-text-muted,#6d7370); }
.ev-termin-name{ flex:1 1 220px; font-weight:600; font-size:15px; min-width:0; }
.ev-termin-wert{ flex:0 0 auto; font-size:13.5px; color:var(--hw-text-muted,#6d7370); }

/* ---- Die Teilnehmer ---- */

.ev-personen{ margin:0 0 24px; max-width:100%; }
.ev-personen *, .ev-karte *, .ev-eckdaten *{ max-width:100%; }
.ev-personkopf{ display:grid; grid-template-columns:2.4rem var(--ev-raster) 9rem;
  gap:10px; padding:0 12px 6px; font-size:10.5px; letter-spacing:1px;
  text-transform:uppercase; color:var(--hw-text-muted,#6d7370); }
.ev-person{ display:grid; grid-template-columns:2.4rem var(--ev-raster) 9rem;
  gap:10px; align-items:center; padding:8px 12px;
  border:1px solid var(--hairline,#e4e7dd); border-radius:7px; margin-bottom:6px;
  background:var(--hw-flaeche,#fff); }
.ev-person.ist-luecke{ border-color:#e8d6b4; background:#fdfaf4; }
.ev-p-kopf{ display:contents; }
.ev-p-nr{ font-size:12px; color:var(--hw-text-muted,#6d7370);
  font-variant-numeric:tabular-nums; text-align:right; }
.ev-p-name, .ev-p-herkunft{ display:none; }
.ev-p-feld{ display:block; min-width:0; }
.ev-p-name-feld{ display:none; }
.ev-person input, .ev-person select{
  width:100%; min-width:0; padding:6px 8px; font:inherit; font-size:13.5px;
  border:1px solid var(--hairline-strong,#cfd4c9); border-radius:5px;
  background:var(--hw-flaeche,#fff); color:var(--hw-text,#1A1F22); }
.ev-person input.ist-fehlt{ border-color:var(--hw-s-arbeit,#b8892f); background:#fffdf7; }
.ev-p-mehr{ grid-column:1 / -1; margin-top:2px; }
.ev-p-mehr > summary{ cursor:pointer; font-size:12.5px; color:var(--hw-text-muted,#6d7370);
  padding:4px 0 4px 2px; }
.ev-p-mehr[open] > summary{ margin-bottom:10px; }
.ev-p-mehr .ev-felder{ padding:0 0 8px; }
.ev-speicherleiste{ position:sticky; bottom:0; padding:12px 0;
  background:linear-gradient(to top, var(--hw-snow,#fbfbf8) 65%, transparent); }

.ev-holen{ display:flex; flex-wrap:wrap; gap:8px; }
.hw-melde--warnung{ background:#fdfaf4; border:1px solid #e8d6b4; color:#7a5c12;
  border-radius:6px; padding:11px 14px; margin:0 0 12px; }

/* ---- Am Telefon: aus jeder Zeile wird eine Karte ---- */
@media (max-width:900px){
  .ev-personkopf{ display:none; }
  .ev-person{ display:block; padding:0; margin-bottom:10px; }
  .ev-p-kopf{ display:flex; align-items:center; gap:10px;
    padding:10px 14px; border-bottom:1px solid var(--hairline,#e4e7dd);
    background:var(--hw-snow,#f6f7f2); border-radius:6px 6px 0 0; }
  .ev-person.ist-luecke .ev-p-kopf{ background:#fbf4e6; }
  .ev-p-name{ display:block; flex:1 1 auto; font-weight:600; font-size:15px; }
  .ev-p-herkunft{ display:inline-block; flex:0 0 auto; font-size:11px;
    padding:2px 7px; border-radius:10px; background:var(--hw-flaeche,#fff);
    border:1px solid var(--hairline-strong,#cfd4c9); color:var(--hw-text-muted,#6d7370); }
  .ev-p-feld{ display:flex; align-items:center; gap:10px; padding:7px 12px;
    border-bottom:1px solid var(--hairline,#eef0e9); }
  .ev-p-name-feld{ display:block; flex:0 0 7.5rem; font-size:12.5px;
    color:var(--hw-text-muted,#6d7370); }
  /* flex-basis 0 und min-width 0: sonst besteht ein Eingabefeld auf seiner
     Standardbreite von rund zwanzig Zeichen und schiebt die Karte ueber
     den Rand hinaus. Am Telefon faellt das sofort auf. */
  .ev-p-feld input, .ev-p-feld select{ flex:1 1 0; min-width:0; width:auto;
    font-size:16px; padding:8px 9px; }
  .ev-p-mehr{ margin:0; padding:8px 14px 12px; }
  .ev-felder{ grid-template-columns:1fr; }
  .ev-eckdaten{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr));
    gap:10px 16px; padding:12px 14px; }
  .ev-eckdaten dd{ font-size:14px; overflow-wrap:anywhere; }
  .ev-termin{ padding:11px 13px; }
  .ev-termin-name{ flex:1 1 100%; }
  .ev-kopf h2{ font-size:19px; }
  .ev-knopfform, .ev-knopfform .btn{ width:100%; }
  .ev-holen .btn{ flex:1 1 100%; text-align:center; }
  .ev-speicherleiste .btn{ width:100%; }
}
.ev-breit{ display:flex; flex-direction:column; gap:4px; margin-top:12px;
  font-size:12.5px; color:var(--hw-text-muted,#6d7370); }
.ev-breit input{ padding:8px 10px; border:1px solid var(--hairline-strong,#cfd4c9);
  border-radius:5px; font:inherit; font-size:14px; background:var(--hw-flaeche,#fff); }
.ev-personkopf .ev-p-ende{ text-align:left; }

/* Die Downloads: eine Reihe Kacheln statt einer Knopfleiste. Die Namen der
   Reiter stammen aus der Vorlage und sind lang; als Knopfbeschriftung
   werden sie unleserlich, als Kachel mit Zeile darunter nicht. */
.ev-holen{ display:grid; gap:8px; grid-template-columns:repeat(auto-fill,minmax(215px,1fr)); }
.ev-holknopf{ display:flex; flex-direction:column; gap:3px; padding:12px 14px;
  border:1px solid var(--hairline-strong,#cfd4c9); border-radius:7px;
  background:var(--hw-flaeche,#fff); color:var(--hw-text,#1A1F22); text-decoration:none; }
.ev-holknopf:hover{ border-color:var(--hw-olive,#6B7A3F); }
.ev-holknopf strong{ font-size:14px; font-weight:600; }
.ev-holknopf span{ font-size:12px; color:var(--hw-text-muted,#6d7370); }
.ev-holknopf.ist-wichtig{ background:var(--hw-olive,#6B7A3F); border-color:var(--hw-olive,#6B7A3F); color:#fff; }
.ev-holknopf.ist-wichtig span{ color:rgba(255,255,255,.82); }
.ev-holknopf.ist-wichtig:hover{ background:#5c6a35; }
/* Hinweise stehen im Haus mittig; in den Events gehoeren sie an den
   linken Rand, weil sie dort unter Formularzeilen und Karten sitzen. */
.ev .hw-hinweis{ text-align:left; margin:10px 0 0; }
.ev-karte > .hw-hinweis:first-of-type{ margin-top:0; }
.ev-arbeitsblaetter{ margin:12px 0 0; font-size:12.5px; color:var(--hw-text-muted,#6d7370); }
.ev-arbeitsblaetter a{ color:var(--hw-olive,#6B7A3F); }

/* ---------------------------------------------------------------- Schiessstand
   Die Karte im Schuelerportal: ein Tag, seine sieben Zeitslots und der
   persoenliche Tagescode. */
.hw-bu-tag{ border-top:1px solid #eceee7; padding:12px 0; }
.hw-bu-tag:first-of-type{ border-top:0; padding-top:0; }
.hw-bu-kopf strong{ display:block; font-size:16px; }
.hw-bu-kopf span{ display:block; font-size:14px; color:#5a6152; margin-bottom:8px; }
.hw-bu-vorschlag{ margin:4px 0 10px; }
.hw-bu-slots{ display:grid; grid-template-columns:repeat(auto-fill,minmax(190px,1fr)); gap:8px; }
.hw-bu-slot{ display:flex; align-items:center; gap:8px; border:1.5px solid #d5d8cf;
  border-radius:11px; padding:8px 10px; background:#fff; }
.hw-bu-slot b{ flex:0 0 auto; }
.hw-bu-slot span{ flex:1 1 auto; font-size:13.5px; color:#5a6152; }
.hw-bu-slot form{ flex:0 0 auto; }
.hw-bu-slot.ist-voll{ opacity:.55; }
.hw-bu-voll{ flex:0 0 auto; font-size:13px; color:#8a8f80; }
.hw-bu-frist{ margin:8px 0 0; font-size:13.5px; color:#5a6152; }
.hw-bu-info{ margin:10px 0 0; font-size:14px; line-height:1.5; background:#f4f5f1;
  border-radius:11px; padding:10px 12px; }
.hw-bu-ausweis{ text-align:center; background:#f4f5f1; border-radius:14px; padding:14px; }
.hw-bu-dabei{ margin:0 0 2px; font-weight:600; color:#5F6E36; }
.hw-bu-ausweis strong{ display:block; font-size:17px; }
.hw-bu-code{ max-width:240px; margin:10px auto; }
.hw-bu-code svg{ width:100%; height:auto; display:block; }
.hw-bu-erklaer{ margin:0 0 10px; font-size:13.5px; color:#5a6152; }
@media (max-width:520px){
  .hw-bu-slots{ grid-template-columns:1fr; }
  .hw-bu-code{ max-width:200px; }
}

/* Monatsbloecke in der Terminliste eines Kurses: statt Hunderter Formulare
   am Stueck je Monat ein Aufklapper mit Zaehler. */
.hw-monatsblock{ border:1.5px solid #d5d8cf; border-radius:12px; margin:0 0 8px; background:#fff; }
.hw-monatsblock > summary{ cursor:pointer; padding:10px 14px; font-weight:600;
  display:flex; align-items:center; gap:10px; list-style:none; }
.hw-monatsblock > summary::-webkit-details-marker{ display:none; }
.hw-monatsblock > summary::before{ content:"›"; display:inline-block; transition:transform .15s;
  color:#5F6E36; font-size:19px; line-height:1; }
.hw-monatsblock[open] > summary::before{ transform:rotate(90deg); }
.hw-monatsblock > summary span{ margin-left:auto; font-weight:500; color:#5a6152; font-size:14px; }
.hw-monatsblock > .hw-satzliste{ padding:0 12px 12px; }

/* Schalter im Stil eines Telefons: eine Zeile je Sache, rechts der
   Schieber. Der Haken selbst bleibt ein normales Kontrollkaestchen und
   wird nur versteckt, damit Tastatur und Formular unveraendert
   funktionieren. */
.hw-schalterliste{ border:1.5px solid #d5d8cf; border-radius:12px; background:#fff;
  overflow:hidden; margin:0 0 4px; }
.hw-schalter{ display:flex; align-items:center; gap:14px; padding:11px 14px;
  border-top:1px solid #eceee7; cursor:pointer; }
.hw-schalter:first-child{ border-top:0; }
.hw-schalter-text{ flex:1 1 auto; min-width:0; }
.hw-schalter-text strong{ display:block; font-weight:600; }
.hw-schalter-text em{ display:block; font-style:normal; font-size:13px; color:#5a6152;
  line-height:1.35; }
.hw-schalter input{ position:absolute; opacity:0; width:0; height:0; }
.hw-schalter-bahn{ flex:0 0 auto; width:50px; height:30px; border-radius:15px;
  background:#d5d8cf; position:relative; transition:background .18s ease; }
.hw-schalter-bahn i{ position:absolute; top:3px; left:3px; width:24px; height:24px;
  border-radius:50%; background:#fff; box-shadow:0 1px 3px rgba(26,31,34,.3);
  transition:transform .18s ease; }
.hw-schalter input:checked ~ .hw-schalter-bahn{ background:#5F6E36; }
.hw-schalter input:checked ~ .hw-schalter-bahn i{ transform:translateX(20px); }
.hw-schalter input:focus-visible ~ .hw-schalter-bahn{ outline:2px solid #5F6E36; outline-offset:2px; }
.hw-schalter:hover .hw-schalter-bahn{ filter:brightness(.97); }

/* Plus-Knopf: einheitlich fuer alles, was neu angelegt wird. Rund, gruen,
   sitzt rechts im Kartenkopf oder als eigene Zeile ueber einer Liste. */
.hw-plus{ display:inline-flex; align-items:center; justify-content:center; gap:7px;
  min-width:38px; height:38px; padding:0 14px 0 12px; border-radius:19px;
  background:#5F6E36; color:#fff; text-decoration:none; font-weight:600; font-size:15px;
  border:0; cursor:pointer; line-height:1; white-space:nowrap; }
.hw-plus:hover{ background:#54622f; color:#fff; }
.hw-plus::before{ content:"+"; font-size:22px; font-weight:400; line-height:1; margin-top:-2px; }
.hw-plus.ist-rund{ padding:0; width:38px; }
.hw-plus.ist-rund::before{ margin:0; }
/* Im Kartenkopf sitzt das Plus ganz rechts, hinter dem Zaehler, und auf
   der Hoehe der Ueberschrift. Ohne die order-Angabe rutscht es bei Karten
   mit Fragezeichen nach ganz links: dort tragen h3 und Zaehler feste
   order-Werte, ein Element ohne eigene order kommt vor ihnen. */
.hw-bereich-kopf > .hw-plus{ order:2; margin-left:10px; margin-top:-6px; flex:0 0 auto; }
.hw-bereich-kopf.hat-erklaerung > .hw-plus{ order:2; }
.hw-bereich-kopf > .hw-bereich-stand{ margin-left:auto; }

/* Abstaende im Terminfenster: die Bloecke standen zu eng aufeinander und
   die Notizen klebten an den Feldern. */
.vkal-block{ padding:14px 0; border-top:1px solid #eceee7; }
.vkal-block:first-of-type{ padding-top:0; border-top:0; }
.vkal-block > h4{ margin:0 0 10px; font-size:15px; color:#5a6152; }
.vkal-block .hw-formreihe{ margin-bottom:10px; }
.vkal-block .hw-formreihe:last-child{ margin-bottom:0; }
.vkal-notiz{ margin:8px 0 0; font-size:13px; line-height:1.45; color:#5a6152; }

/* Ein Tag mit mehreren Zeiten ist ein Block, keine Liste gleicher Zeilen.
   Kopf sagt was und wann, darunter je Zeit der Stand und wer da ist. */
.hw-dz-tag{ border:1.5px solid #d5d8cf; border-radius:12px; background:#fff;
  padding:0; margin:0 0 10px; }
/* Zugeklappt steht da, was der Tag ist und wie er belegt ist. Die Zeiten
   mit den Namen kommen erst beim Aufklappen: sonst fuellt ein einziger
   Schiessstand-Sonntag mit sieben Zeiten den ganzen Bildschirm. */
.hw-dz-tagkopf{ display:block; cursor:pointer; list-style:none; padding:12px 14px 10px 34px;
  position:relative; }
.hw-dz-tagkopf::-webkit-details-marker{ display:none; }
.hw-dz-tagkopf::before{ content:"›"; position:absolute; left:14px; top:11px; color:#9aa08d;
  font-size:19px; line-height:1.2; transition:transform .15s ease; }
.hw-dz-tag[open] > .hw-dz-tagkopf::before{ transform:rotate(90deg); color:#5F6E36; }
.hw-dz-tag[open] > .hw-dz-tagkopf{ border-bottom:1px solid #eceee7; }
.hw-dz-tagkopf:hover{ background:#fafbf8; }
.hw-dz-tagkopf strong{ display:block; font-size:15.5px; line-height:1.3; }
.hw-dz-tagkopf span{ display:block; font-size:13px; color:#5a6152; margin:2px 0 0; }
.hw-dz-tag > .hw-dz-slot{ margin:0 14px; }
.hw-dz-tag > .hw-dz-slot:first-of-type{ padding-top:10px; }
.hw-dz-tag > .hw-dz-tagfuss{ padding:0 14px 14px; }
.hw-dz-slot{ display:flex; flex-wrap:wrap; align-items:baseline; gap:2px 10px;
  padding:7px 0; border-top:1px solid #f2f3ee; }
.hw-dz-slot:first-of-type{ border-top:0; }
.hw-dz-slot b{ flex:0 0 74px; font-weight:600; }
.hw-dz-slot .stand{ flex:0 0 auto; font-size:13.5px; color:#5F6E36; font-weight:600; }
.hw-dz-slot .stand.ist-voll{ color:#8a8f80; }
.hw-dz-slot .leute{ flex:1 1 100%; font-size:13.5px; color:#5a6152; line-height:1.4; }
.hw-dz-slot .leute em{ font-style:normal; color:#8a8f80; }
.hw-dz-tagfuss{ margin-top:10px; }
.hw-dz-tag > .hw-dz-slot:last-of-type{ padding-bottom:12px; }
@media (min-width:620px){
  .hw-dz-slot .leute{ flex:1 1 auto; }
}

/* Ein Tag mit mehreren Zeiten in der Anmeldeliste: die Zeiten stehen als
   Zeilen unter dem Termin, jede mit ihrem Stand und ihrem Knopf. */
/* Die Zeiten eines Tages stehen untereinander, nicht als Kachelgitter.
   Als Kacheln brach "4 von 4 frei" in vier Zeilen um und der Knopf lief
   aus der Kachel heraus, sobald der Text breiter war als die Spalte. */
.hw-tz.hat-zeiten{ align-items:flex-start; }
.hw-tz-slots{ display:flex; flex-direction:column; gap:6px; margin:10px 0 2px; }
.hw-tz-slot{ display:flex; align-items:center; gap:12px; border:1.5px solid #d5d8cf;
  border-radius:10px; padding:8px 12px; background:#fff; min-height:44px; }
.hw-tz-slot b{ flex:0 0 52px; font-weight:700; font-size:15px; white-space:nowrap; }
.hw-tz-slot .frei{ flex:1 1 auto; font-size:13.5px; color:#5a6152; white-space:nowrap; }
.hw-tz-slot form{ flex:0 0 auto; margin-left:auto; }
.hw-tz-slot.ist-voll{ background:#f7f8f4; }
.hw-tz-slot.ist-voll b, .hw-tz-slot.ist-voll .frei{ color:#9aa08d; }
.hw-tz-slot.ist-meiner{ border-color:#5F6E36; background:#f4f6ee; }
.hw-tz-meiner{ flex:0 0 auto; margin-left:auto; font-size:13px; font-weight:700;
  color:#5F6E36; white-space:nowrap; }
/* Ein Knopf in der Zeile, nicht der grosse Knopf der Seite: der ist in
   Grossbuchstaben gesetzt und sprengt die Zeile. */
.hw-slot-knopf{ border:1.5px solid #5F6E36; background:#5F6E36; color:#fff;
  border-radius:9px; padding:7px 16px; font-size:14px; font-weight:600;
  cursor:pointer; white-space:nowrap; font-family:inherit; }
.hw-slot-knopf:hover{ background:#54622f; border-color:#54622f; }

/* Ein langer Hinweis am Termin steht eingeklappt, die erste Zeile ist der Griff. */
.hw-termin-mehr{ margin:6px 0 2px; }
.hw-termin-mehr > summary{ cursor:pointer; font-size:13.5px; font-weight:600;
  color:#5F6E36; padding:2px 0; }
.hw-termin-mehr .hw-termin-info{ display:block; margin-top:6px; }

@media (max-width:520px){
  .hw-tz-slot{ gap:8px; padding:8px 10px; }
  .hw-tz-slot b{ flex:0 0 46px; font-size:14.5px; }
  .hw-tz-slot .frei{ font-size:12.5px; }
  .hw-slot-knopf{ padding:7px 12px; font-size:13.5px; }
}

/* Der Ort führt zur Routenplanung. Dezent unterstrichen, damit man sieht,
   dass dahinter etwas liegt. */
.hw-ortlink{ color:inherit; text-decoration:underline; text-underline-offset:2px;
  text-decoration-color:#c3c8b8; text-decoration-thickness:1px; }
.hw-ortlink:hover{ text-decoration-color:#5F6E36; }

/* Der QR-Code hängt am eigenen Termin, eingeklappt. Er soll da sein, wenn
   man ihn braucht, und sonst die Liste nicht auseinanderziehen. */
.hw-bu-klapp{ margin:8px 0 0; }
.hw-bu-klapp > summary{ cursor:pointer; display:inline-block; font-size:13.5px;
  font-weight:600; color:#5F6E36; padding:4px 0; }
.hw-tz-abmelden{ display:flex; flex-direction:column; gap:6px; align-items:flex-end; }

/* ---------------------------------------------------------------- Dozentenliste
   Zugeklappt eine Zeile je Person mit dem, was man auf einen Blick braucht:
   Name, Rolle, ob sie in die App kommt. Alles Weitere erst beim Aufklappen.
   Vorher standen bei jedem dieselben drei Halbsätze untereinander, dadurch
   sah die Liste aus wie eine Wand aus gleichem Text. */
.hw-dozliste{ border:1.5px solid #d5d8cf; border-radius:12px; overflow:hidden; background:#fff; }
.hw-doz{ border-top:1px solid #eceee7; }
.hw-doz:first-child{ border-top:0; }
.hw-doz > summary{
  display:flex; align-items:center; gap:10px; flex-wrap:wrap;
  padding:13px 16px; cursor:pointer; list-style:none;
}
.hw-doz > summary::-webkit-details-marker{ display:none; }
.hw-doz > summary::before{
  content:"›"; flex:0 0 auto; width:12px; color:#9aa08d; font-size:19px; line-height:1;
  transition:transform .15s ease;
}
.hw-doz[open] > summary::before{ transform:rotate(90deg); color:#5F6E36; }
.hw-doz > summary:hover{ background:#fafbf8; }
.hw-doz[open] > summary{ background:#f4f5f1; }
.hw-doz-name{ flex:1 1 auto; min-width:0; font-size:16px; font-weight:600; color:#1A1F22; }
.hw-doz-rolle{
  flex:0 0 auto; font-size:11.5px; font-weight:700; letter-spacing:.04em;
  text-transform:uppercase; padding:3px 9px; border-radius:11px;
  background:#eceee7; color:#5a6152;
}
.hw-doz-rolle.ist-leitung{ background:#5F6E36; color:#fff; }
.hw-doz-rolle.ist-ausbilder{ background:#e3e8d5; color:#4a5730; }
.hw-doz-merker{ flex:0 0 auto; font-size:11.5px; color:#8a8f80; }
.hw-doz-zugang{
  flex:0 0 auto; font-size:12.5px; color:#8a8f80; display:inline-flex; align-items:center; gap:6px;
}
.hw-doz-zugang::before{
  content:""; width:8px; height:8px; border-radius:50%; background:#c9cdbe;
}
.hw-doz-zugang.ist-an{ color:#5F6E36; font-weight:600; }
.hw-doz-zugang.ist-an::before{ background:#5F6E36; }
.hw-doz.ist-ehemalig .hw-doz-name{ color:#8a8f80; }
.hw-doz-inhalt{ padding:4px 16px 16px 38px; }
.hw-doz-daten{ display:grid; grid-template-columns:auto 1fr; gap:2px 14px; margin:0 0 10px; }
.hw-doz-daten dt{ font-size:12.5px; color:#8a8f80; }
.hw-doz-daten dd{ margin:0; font-size:14px; }
.hw-doz-app{ margin:0 0 4px; font-size:13.5px; line-height:1.5; color:#5a6152; }
.hw-doz-app em{ font-style:normal; color:#8a8f80; }
.hw-doz-an{ font-weight:600; color:#5F6E36; }
.hw-doz-aus{ font-weight:600; color:#8a8f80; }
.hw-doz-fuss{ margin-top:12px; }
@media (max-width:560px){
  .hw-doz > summary{ padding:12px 12px; gap:6px 8px; }
  .hw-doz-name{ flex:1 1 100%; order:1; }
  .hw-doz > summary::before{ order:0; }
  .hw-doz-rolle, .hw-doz-zugang, .hw-doz-merker{ order:2; }
  .hw-doz-inhalt{ padding:4px 12px 14px 24px; }
}

/* Das Plus in der Kopfleiste einer App-Seite: oben rechts, vor dem
   Abmelden, in der Groesse der Leiste. */


/* ---------------------------------------------------------------- Monatskalender
   Der Dozent sieht seinen Monat auf einen Blick: Tage mit Terminen tragen
   einen Punkt, ein Tipp darauf zeigt sie unten. Bewusst schlicht, das
   Ding muss am Telefon mit dem Daumen bedienbar sein. */
.hw-kal-kopf{ display:flex; align-items:center; gap:10px; margin:0 0 12px; }
.hw-kal-kopf strong{ font-size:17px; flex:0 0 auto; }
.hw-kal-plus{ margin-left:auto; height:34px; font-size:14px; }
.hw-kal-plus::before{ font-size:20px; }
.hw-kal-pfeil{ flex:0 0 auto; width:36px; height:36px; border-radius:50%;
  border:1.5px solid #d5d8cf; display:flex; align-items:center; justify-content:center;
  text-decoration:none; color:#5a6152; font-size:20px; line-height:1; }
.hw-kal-pfeil:hover{ border-color:#5F6E36; color:#5F6E36; }
.hw-kal-gitter{ display:grid; grid-template-columns:repeat(7, 1fr); gap:4px; }
.hw-kal-wt{ text-align:center; font-size:11.5px; font-weight:700; letter-spacing:.04em;
  text-transform:uppercase; color:#9aa08d; padding-bottom:4px; }
.hw-kal-leer{ }
.hw-kal-tag{ position:relative; aspect-ratio:1; display:flex; align-items:center;
  justify-content:center; border-radius:10px; font-size:14.5px; color:#5a6152;
  text-decoration:none; }
.hw-kal-tag.ist-heute{ box-shadow:inset 0 0 0 1.5px #c3c8b8; font-weight:700; color:#1A1F22; }
a.hw-kal-tag.hat-termin{ background:#eef1e5; color:#3f4a26; font-weight:700; }
a.hw-kal-tag.hat-termin:hover{ background:#e3e8d5; }
a.hw-kal-tag i{ position:absolute; bottom:5px; left:50%; transform:translateX(-50%);
  width:5px; height:5px; border-radius:50%; background:#5F6E36; }
a.hw-kal-tag.ist-gewaehlt{ background:#5F6E36; color:#fff; }
a.hw-kal-tag.ist-gewaehlt i{ background:#fff; }
@media (max-width:400px){
  .hw-kal-tag{ font-size:13.5px; border-radius:8px; }
}

/* Namenssuche beim Schreiben: die Liste ist ein Flexstapel, damit die
   Treffer mit passendem Wortanfang per order nach oben rutschen. */
.hw-pf-auswahl{ display:flex; flex-direction:column; }
.hw-pf-wahlstand{ margin:4px 0 8px; font-size:13px; color:#8a8f80; }
.hw-pf-kopfreihe{ display:flex; align-items:center; gap:10px; }
.hw-pf-kopfreihe .hw-pf-suche{ flex:1 1 auto; }
.hw-pf-kopfreihe .hw-plus{ flex:0 0 auto; }

/* "An alle" steht neben dem Plus, wenn das Postfach keine eigene
   Fussleiste hat (Dozentenportal). Schlanker als der Seitenknopf. */
.hw-pf-rund{ flex:0 0 auto; padding:8px 14px; font-size:13.5px; white-space:nowrap; }