:root {
  --grund: #f3f5f7; --karte: #ffffff; --text: #15202b; --leise: #4f5a65; --linie: #dde2e7;
  --haupt: #0b5c73; --haupt-dunkel: #073e4e; --pause: #b4500b; --ok: #1d7a45; --fehler: #b42318; --warn: #8a5a00;
  --radius: 14px;
}
@media (prefers-color-scheme: dark) {
  :root { --grund: #11161b; --karte: #1b232b; --text: #e8edf2; --leise: #a9b4bf; --linie: #2e3944;
    --haupt: #2b8fab; --haupt-dunkel: #5fb3cc; --pause: #e07a2e; --ok: #4cc27f; --fehler: #ff6b5e; --warn: #f0b84a; }
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--grund); color: var(--text); font: 16px/1.45 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; }
a { color: var(--haupt); }
a:hover { color: var(--haupt-dunkel); }
h1 { font-size: 1.5rem; margin: 0 0 .4rem; display: flex; align-items: center; gap: .5rem; }
h2 { font-size: 1.15rem; margin: 0 0 .6rem; }
.beta { background: #ffd84d; color: #3a2b00; text-align: center; font-weight: 600; font-size: .85rem; padding: .35rem 1rem; }
.kopf { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem 1rem; padding: .8rem 1rem; background: var(--karte); border-bottom: 1px solid var(--linie); }
.firma { font-weight: 700; }
.menue { display: flex; flex-wrap: wrap; gap: .25rem; }
.menue a { text-decoration: none; padding: .45rem .7rem; border-radius: 10px; color: var(--text); min-height: 44px; display: inline-flex; align-items: center; }
.menue a[aria-current="page"] { background: var(--haupt); color: #fff; }
.inhalt { max-width: 1400px; margin: 0 auto; padding: 1rem; display: flex; flex-direction: column; gap: 1rem; }
.fuss { max-width: 1400px; margin: 0 auto 2rem; padding: 0 1rem; display: flex; flex-wrap: wrap; gap: 1rem; align-items: center; color: var(--leise); font-size: .9rem; }
.karte { background: var(--karte); border-radius: var(--radius); padding: 1.1rem 1.2rem; box-shadow: 0 1px 2px rgba(0,0,0,.06); }
.schmal { max-width: 460px; width: 100%; margin: 0 auto; }
.klein { font-size: .88rem; color: var(--leise); }
.hinweis { margin: 0; padding: .7rem .9rem; border-radius: 10px; background: #e6f4ec; color: #0f4d2b; }
.hinweis-fehler { background: #fde8e6; color: #7a1a12; }
.hinweis-warnung { background: #fff4d6; color: #5c3d00; margin-top: .5rem; }
.formular { display: flex; flex-direction: column; gap: .45rem; }
.formular label:not(.haken) { font-weight: 600; margin-top: .4rem; }
input, select, textarea { font: inherit; padding: .65rem .7rem; border: 1px solid var(--linie); border-radius: 10px; background: var(--karte); color: var(--text); min-height: 44px; width: 100%; }
.haken { display: flex; gap: .6rem; align-items: center; min-height: 44px; }
.haken input, .ort input { width: 22px; height: 22px; min-height: 0; accent-color: var(--haupt); }
.knopf { font: inherit; font-weight: 700; border: none; border-radius: var(--radius); padding: .7rem 1.1rem; cursor: pointer; text-decoration: none; display: inline-flex; align-items: center; justify-content: center; min-height: 44px; }
.knopf-haupt { background: var(--haupt); color: #fff; }
.knopf-haupt:hover { background: var(--haupt-dunkel); color: #fff; }
.knopf-pause { background: var(--pause); color: #fff; }
.knopf-rand { background: transparent; color: var(--text); border: 2px solid var(--text); }
.klein-knopf { min-height: 40px; padding: .3rem .8rem; font-size: .95rem; }
.knopf.gross { width: 100%; min-height: 88px; font-size: 1.35rem; }
.knopf:disabled { opacity: .6; }
.link { background: none; border: none; color: var(--haupt); font: inherit; text-decoration: underline; cursor: pointer; padding: 0; min-height: 44px; }
.inline { display: inline; }
.status .punkt { width: 14px; height: 14px; border-radius: 50%; background: #8a949e; display: inline-block; }
.status-arbeit .punkt { background: var(--ok); }
.status-pause .punkt { background: var(--pause); }
.status p { margin: .2rem 0; }
.stempelformular { display: flex; flex-direction: column; gap: .8rem; }
.knoepfe { display: flex; flex-direction: column; gap: .7rem; }
.orte { border: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: .5rem; }
.orte legend { font-weight: 600; margin-bottom: .4rem; }
.ort { display: flex; align-items: center; gap: .45rem; border: 1px solid var(--linie); border-radius: 10px; padding: .5rem .8rem; min-height: 44px; }
.ort:has(input:checked) { border-color: var(--haupt); background: color-mix(in srgb, var(--haupt) 10%, transparent); }
.zugang { display: flex; justify-content: space-between; align-items: center; gap: .6rem; flex-wrap: wrap; font-weight: 700; font-size: 1.1rem; margin: 0; padding: .6rem .8rem; border-radius: 10px; background: color-mix(in srgb, var(--haupt) 12%, transparent); }
.zugang a { font-weight: 400; white-space: nowrap; }
.buchungsliste { list-style: none; margin: 0 0 .6rem; padding: 0; }
.buchungsliste li { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: .5rem 0; border-bottom: 1px solid var(--linie); }
.zeile-zwischen { display: flex; justify-content: space-between; align-items: center; gap: .6rem; }
.auswahl { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; margin: .6rem 0; }
.auswahl select { width: auto; flex: 1 1 200px; }
.kennzahlen { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: .8rem; margin-top: .8rem; }
.kennzahlen div { display: flex; flex-direction: column; }
.kennzahlen strong { font-size: 1.4rem; font-variant-numeric: tabular-nums; }
.minus { color: var(--fehler); }
.plus { color: var(--ok); }
.tabelle-rahmen { overflow-x: auto; }
table { border-collapse: collapse; width: 100%; font-variant-numeric: tabular-nums; }
th, td { text-align: left; padding: .45rem .5rem; border-bottom: 1px solid var(--linie); white-space: nowrap; }
td.klein { white-space: normal; min-width: 160px; }
thead th { font-size: .82rem; color: var(--leise); }
tr.frei { color: var(--leise); background: color-mix(in srgb, var(--linie) 35%, transparent); }
tr.heute { outline: 2px solid var(--haupt); outline-offset: -2px; }
tr.offener-tag { background: color-mix(in srgb, var(--fehler) 12%, transparent); }
.markierung { color: var(--warn); font-weight: 700; }
.warnung-text { color: var(--warn); }
.status-chip { padding: .15rem .5rem; border-radius: 999px; font-size: .85rem; background: var(--linie); }
.status-chip.status-arbeit { background: color-mix(in srgb, var(--ok) 18%, transparent); }
.status-chip.status-pause { background: color-mix(in srgb, var(--pause) 18%, transparent); }
.gruppe { border: 1px solid var(--linie); border-radius: 10px; padding: .6rem .8rem; margin: .4rem 0; }
.drei { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: .6rem; }
.passwort { font-family: ui-monospace, monospace; font-size: 1.2rem; letter-spacing: .05em; }
.knopfreihe form { display: flex; gap: .4rem; flex-wrap: wrap; }
.status-chip.status-genehmigt { background: color-mix(in srgb, var(--ok) 18%, transparent); }
.status-chip.status-beantragt { background: color-mix(in srgb, var(--warn) 22%, transparent); }
.status-chip.status-abgelehnt, .status-chip.status-storniert { text-decoration: line-through; }
.zahl { display: inline-block; min-width: 1.4em; padding: 0 .35em; margin-left: .3em; border-radius: 999px; background: var(--pause); color: #fff; font-size: .8rem; text-align: center; }
.knopfreihe-frei { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .6rem; }
.unterschriften { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; margin-top: 3rem; }
.unterschriften div { border-top: 1px solid var(--text); padding-top: .3rem; font-size: .85rem; color: var(--leise); }
tfoot th, tfoot td { border-top: 2px solid var(--text); }
@media print {
  @page { size: A4; margin: 12mm; }
  body { background: #fff; color: #000; font-size: 10pt; }
  .beta, .kopf, .fuss, .nicht-drucken, .hinweis { display: none !important; }
  .inhalt { max-width: none; padding: 0; }
  .karte { box-shadow: none; padding: 0; }
  th, td { padding: .2rem .3rem; }
  a { color: inherit; text-decoration: none; }
  .tabelle-rahmen { overflow: visible; }
}
.haken-klein { width: 22px; height: 22px; min-height: 0; accent-color: var(--haupt); }
.status-chip.status-ausgezahlt { background: color-mix(in srgb, var(--ok) 18%, transparent); }
.status-chip.status-in_pruefung { background: color-mix(in srgb, var(--warn) 22%, transparent); }
.wochentage { display: flex; flex-wrap: wrap; gap: .2rem 1rem; }
.reiter { display: flex; flex-wrap: wrap; gap: .4rem; margin: .6rem 0; }
.reiter a { white-space: nowrap; padding: .35rem .9rem; border-radius: 999px; border: 1px solid var(--linie); text-decoration: none; color: inherit; }
.reiter a[aria-current="page"] { background: var(--haupt); border-color: var(--haupt); color: #fff; }
.matrix td { text-align: center; }
.zeitraeume { margin: 0 0 .8rem; padding-left: 1.2rem; }
.zeitraeume .geplant { color: var(--leise); }
.nur-drucken { display: none; }
@media print { .nur-drucken { display: block; } }
.knopf.gefahr { color: var(--fehler); border-color: var(--fehler); }
th.rechts, td.rechts { text-align: right; }
.trenner { border: 0; border-top: 2px solid var(--linie); margin: 1.6rem 10% 1.4rem; }
.kacheln { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1rem; }
.kachel { display: flex; flex-direction: column; gap: .3rem; text-decoration: none; color: var(--text); border: 2px solid transparent; }
.kachel:hover, .kachel:focus-visible { border-color: var(--haupt); }
.kachel strong { font-size: 1.15rem; color: var(--haupt); }
.marke { font-weight: 800; color: var(--haupt); margin-right: .4rem; }
.ohne-rahmen { border: 0; padding: 0; margin: 0; min-width: 0; display: flex; flex-direction: column; gap: .45rem; }
.kopf a.firma { text-decoration: none; color: var(--text); }
.mailtext { white-space: pre-wrap; word-break: break-word; font: inherit; font-size: .92rem; margin: .5rem 0 0; }

/* Rechtevergabe wie im IT-Service-CRM: Bereiche x Stufen */
.rechte-matrix td { text-align: center; }
.rechte-matrix tr.frei { opacity: .5; }
.rechte-matrix tr.gewaehlt { background: color-mix(in srgb, var(--haupt) 10%, transparent); }

/* Hauptmenues (Innendienst, Dozenten, Administration): am PC zum Aufklappen, am Handy untereinander */
.hauptmenue { position: relative; }
.hauptmenue summary { list-style: none; cursor: pointer; padding: .45rem .7rem; border-radius: 10px; min-height: 44px; display: inline-flex; align-items: center; gap: .3rem; }
.hauptmenue summary::-webkit-details-marker { display: none; }
.hauptmenue summary::after { content: "▾"; font-size: .8em; color: var(--leise); }
.hauptmenue[open] summary::after { content: "▴"; }
.hauptmenue summary.aktiv { background: var(--haupt); color: #fff; }
.hauptmenue summary.aktiv::after { color: #fff; }
.untermenue { display: flex; flex-direction: column; gap: .15rem; padding: .3rem; background: var(--karte); border: 1px solid var(--linie); border-radius: 10px; box-shadow: 0 6px 18px rgba(0,0,0,.12); position: absolute; top: calc(100% + .25rem); left: 0; min-width: 14rem; z-index: 20; }
.untermenue a { width: 100%; }
.hauptmenue:last-child .untermenue { left: auto; right: 0; } /* ganz rechts: nach links aufklappen */
@media (max-width: 640px) {
  /* Handy: Hauptmenues bleiben eine Zeile, das offene Untermenue nimmt die volle Breite */
  .menue { position: relative; width: 100%; }
  .hauptmenue { position: static; }
  .untermenue, .hauptmenue:last-child .untermenue { left: 0; right: 0; min-width: 0; }
}

/* Katalog: Filterzeile intern und oeffentlich */
.filter { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; margin: .6rem 0; }
.filter input[type="search"] { flex: 2 1 220px; width: auto; }
.filter select { flex: 1 1 160px; width: auto; }
.filter .haken { width: auto; }
.status-chip.status-oeffentlich, .status-chip.status-bestaetigt { background: color-mix(in srgb, var(--ok) 18%, transparent); }
.status-chip.status-neu, .status-chip.art-anmeldung { background: color-mix(in srgb, var(--haupt) 18%, transparent); }
.angaben { display: grid; grid-template-columns: max-content 1fr; gap: .3rem 1rem; margin: .8rem 0; }
.angaben dt { font-weight: 600; color: var(--leise); }
.angaben dd { margin: 0; }
/* Katalog oeffentlich (Frontend) */
.frontend .kopf .firma { font-size: 1.1rem; }
.marker { display: inline-block; margin: .2rem 0 .4rem; padding: .2rem .6rem; border-radius: 999px; font-size: .85rem; font-weight: 700; }
.marker-termin { background: color-mix(in srgb, var(--ok) 18%, transparent); color: var(--ok); }
.marker-anfrage { background: color-mix(in srgb, var(--haupt) 14%, transparent); color: var(--haupt); }
.legende { font-size: .9rem; color: var(--leise); display: flex; flex-wrap: wrap; gap: .3rem .6rem; align-items: center; margin: .4rem 0; }
.legende .marker { margin: 0; }
.themen-chips { display: flex; flex-wrap: wrap; gap: .4rem; }
.themen-chips a { padding: .35rem .9rem; border-radius: 999px; border: 1px solid var(--linie); text-decoration: none; color: inherit; }
.themen-chips a:hover { border-color: var(--haupt); }
.themen-chips a.an { background: var(--haupt); border-color: var(--haupt); color: #fff; }
.themen-chips a.alle { border-style: dashed; }
.themen-block { display: flex; flex-direction: column; gap: .6rem; scroll-margin-top: 1rem; }
.themen-block h2 { margin: .6rem 0 0; }
.kurs-raster { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 1rem; }
.kurs-karte { display: flex; flex-direction: column; }
.kurs-karte h3 { margin: 0; font-size: 1.1rem; }
.kurs-karte h3 a { text-decoration: none; }
.kurs-karte p { margin: .25rem 0; }
.kurs-karte p:last-child { margin-top: auto; padding-top: .5rem; }
.einleitung { font-size: 1.05rem; }
.fliesstext p, .fliesstext ul { margin: 0 0 .7rem; }
.terminliste { list-style: none; margin: 0; padding: 0; }
.terminliste li { display: flex; justify-content: space-between; align-items: center; gap: .5rem 1rem; flex-wrap: wrap; padding: .6rem 0; border-bottom: 1px solid var(--linie); }
.termin-aktion { display: inline-flex; gap: .6rem; align-items: center; }
.anfrage-formular { max-width: 640px; }
.honigtopf { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.katalog-tabelle th[scope="row"], .katalog-tabelle td { white-space: normal; }
/* Abzeichen und kurze Werte nie umbrechen (sonst zerfaellt der Hintergrund in zwei Blasen) */
.status-chip, .katalog-tabelle td.kurz { white-space: nowrap; }
/* Homepage (Frontend) */
.frontend .inhalt, .frontend .fuss { max-width: 1100px; }
.knopf-zweit { background: transparent; color: var(--haupt); border: 2px solid var(--haupt); }
.knopf-zweit:hover { background: color-mix(in srgb, var(--haupt) 10%, transparent); }
.frontend .menue { align-items: center; }
.held { padding: 1.6rem 0 .4rem; }
.held h1 { font-size: clamp(1.8rem, 5vw, 2.6rem); margin: 0 0 .6rem; }
.held-vorzeile { margin: 0 0 .2rem; color: var(--haupt); font-weight: 700; text-transform: uppercase; letter-spacing: .06em; font-size: .85rem; }
.held .einleitung { max-width: 46rem; }
.held-knoepfe { display: flex; flex-wrap: wrap; gap: .6rem; }
.kachel-raster { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 1rem; }
.kachel p { margin: 0 0 .6rem; }
.kontakt-raster { display: flex; flex-wrap: wrap; gap: .5rem 3rem; }
.kontakt-raster address { font-style: normal; margin: 0 0 1rem; }
.kontakt-raster p { margin: 0 0 1rem; }
#kontakt { scroll-margin-top: 1rem; }
.rechtstext { max-width: 46rem; }
.rechtstext h2 { margin: 1.3rem 0 .4rem; font-size: 1.05rem; }
.rechtstext p, .rechtstext ul { margin: 0 0 .6rem; }
/* Homepage im BmS-Gruen (Ronny 2026-10-28), damit man Homepage und Backend (Petrol) sofort unterscheidet */
.frontend { --haupt: #0e6b30; --haupt-dunkel: #094d22; --bms: #0e6b30; --bms-dunkel: #094d22; }
@media (prefers-color-scheme: dark) { .frontend { --haupt: #4cbf6e; --haupt-dunkel: #7fd69a; } }
.frontend .kopf { background: var(--bms); border-bottom: 0; color: #fff; padding: .6rem 1rem; }
.frontend .kopf a.firma { color: #fff; display: inline-flex; align-items: center; gap: .7rem; font-size: 1.15rem; }
.frontend .kopf .logo { width: 60px; height: 60px; background: #fff; padding: 3px; }
.frontend .held { display: flex; align-items: center; gap: 1.5rem 2.5rem; }
.held-text { flex: 1 1 auto; }
.held-logo { flex: 0 0 auto; width: 200px; height: 200px; background: #fff; padding: 6px; }
.frontend .menue a { color: #fff; }
.frontend .menue a:hover { background: rgba(255,255,255,.14); color: #fff; }
.frontend .menue a[aria-current="page"] { background: #fff; color: var(--bms); }
.frontend .held { background: linear-gradient(135deg, var(--bms) 0%, #13863d 100%); color: #fff; border-radius: var(--radius); padding: 2rem 1.6rem 1.6rem; margin-top: .5rem; }
.frontend .held h1 { color: #fff; }
.frontend .held .held-vorzeile { color: #cfeedd; }
.frontend .held .knopf-haupt { background: #fff; color: var(--bms); }
.frontend .held .knopf-haupt:hover { background: #e7f3eb; color: var(--bms-dunkel); }
.frontend .held .knopf-zweit { color: #fff; border-color: #fff; }
.frontend .held .knopf-zweit:hover { background: rgba(255,255,255,.14); color: #fff; }
.frontend .kachel { border-top: 4px solid var(--bms); }
.frontend .fuss { border-top: 1px solid var(--linie); padding-top: 1rem; }
@media (max-width: 700px) { .held-logo { display: none; } }
@media (max-width: 560px) { .frontend .kopf .logo { width: 52px; height: 52px; } .frontend .kopf a.firma { font-size: 1rem; } }
.kachel-bild { display: block; width: calc(100% + 2.4rem); max-width: none; height: auto; aspect-ratio: 3 / 2; object-fit: cover; margin: -1.1rem -1.2rem 1rem; }
.frontend .kachel-raster .kachel { overflow: hidden; }
/* Auftritt dozent.info (Ronny 2026-10-31): eigene Farbe Blau, BmS-Logo im Fuss */
.auftritt-dozent { --haupt: #1d645c; --haupt-dunkel: #144a44; --bms: #1d645c; --bms-dunkel: #144a44; } /* dozent.info-Grün wie Magazin, Rollup, Infotisch (Ronny) */
@media (prefers-color-scheme: dark) { .auftritt-dozent { --haupt: #7fcfc2; --haupt-dunkel: #a8e0d7; } }
.auftritt-dozent .held { background: linear-gradient(135deg, #1d645c 0%, #2a8578 100%); }
.auftritt-dozent .held .held-vorzeile { color: #d4efe9; }
.auftritt-dozent .held .knopf-haupt:hover { background: #e3f4f0; }
.auftritt-dozent .kopf a.marke { flex-direction: column; align-items: flex-start; gap: 0; font-weight: 700; }
.auftritt-dozent .kopf a.marke small { font-weight: 400; font-size: .85rem; opacity: .9; }
.held-foto { flex: 0 0 auto; width: 360px; max-width: 40%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; border-radius: var(--radius); }
@media (max-width: 700px) { .held-foto { display: none; } }
.auftritt-dozent section[id] { scroll-margin-top: 1rem; }
/* Ronny 2026-10-31: Abschnitte (im Menue verlinkt) deutlicher trennen */
.auftritt-dozent .inhalt { gap: 2.75rem; }
.auftritt-dozent section.karte[id] { border-top: 4px solid var(--haupt); padding-top: 1.3rem; }
.auftritt-dozent section.karte[id] > h2 { margin-top: 0; font-size: 1.5rem; }
.auftritt-dozent #video > h2, .auftritt-dozent .video-hinweis { text-align: center; }
.faq details { border-bottom: 1px solid var(--linie); }
.faq details:first-child { border-top: 1px solid var(--linie); }
.faq summary { cursor: pointer; font-weight: 600; padding: .75rem 2rem .75rem 0; list-style: none; position: relative; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; position: absolute; right: .3rem; top: .55rem; font-size: 1.3rem; color: var(--haupt); }
.faq details[open] summary::after { content: "−"; }
.faq summary:hover { color: var(--haupt); }
.faq details p { margin: 0 0 .8rem; max-width: 52rem; }
/* Ronny 2026-10-31: Knopf „nach oben“ auf dozent.info */
@media (prefers-reduced-motion: no-preference) { html:has(.auftritt-dozent) { scroll-behavior: smooth; } }
.nach-oben { position: fixed; right: 1rem; bottom: 1rem; width: 2.8rem; height: 2.8rem; display: flex; align-items: center; justify-content: center;
  border-radius: 50%; background: var(--haupt); color: #fff; font-size: 1.4rem; text-decoration: none; box-shadow: 0 2px 8px rgba(0,0,0,.25); z-index: 20; }
.nach-oben:hover, .nach-oben:focus-visible { background: var(--haupt-dunkel); color: #fff; }
@media (prefers-color-scheme: dark) { .auftritt-dozent .nach-oben { color: #0f2f2b; } }
.auftritt-dozent video.video { display: block; width: 100%; height: auto; max-width: 960px; margin: 0 auto; border-radius: var(--radius); background: #000; }
.saeulen { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: .4rem 1.4rem; margin: .4rem 0 1rem; }
.saeulen h3 { margin: .4rem 0 .2rem; color: var(--haupt); font-size: 1.05rem; }
.saeulen p { margin: 0; }
.eckpunkte { margin: .3rem 0 1rem; padding-left: 1.3rem; }
.eckpunkte li { margin: 0 0 .3rem; }
.themen summary { cursor: pointer; font-weight: 600; color: var(--haupt); }
.themen-raster { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: .8rem; margin: .9rem 0; }
.themen-feld { border: 1px solid var(--linie); border-top: 3px solid var(--haupt); border-radius: 10px; padding: .7rem .85rem; }
.themen-feld h4 { margin: 0 0 .45rem; font-size: 1rem; color: var(--haupt); }
.themen-feld ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .3rem; }
.themen-feld li { font-size: .85rem; line-height: 1.3; padding: .2rem .55rem; border-radius: 999px; background: color-mix(in srgb, var(--haupt) 10%, transparent); }
.passt-raster { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1rem; margin: .6rem 0 1rem; }
.passt { border-radius: var(--radius); padding: .8rem 1rem; border-left: 4px solid; }
.passt h3 { margin: 0 0 .4rem; font-size: 1.05rem; }
.passt ul { margin: 0; padding-left: 1.2rem; }
.passt li { margin: 0 0 .25rem; }
.passt-ja { border-color: var(--ok); background: color-mix(in srgb, var(--ok) 8%, transparent); }
.passt-nein { border-color: var(--leise); background: color-mix(in srgb, var(--leise) 8%, transparent); }
.ein-angebot { display: inline-flex; align-items: center; gap: .5rem; }
.ein-angebot img { width: 36px; height: 36px; background: #fff; padding: 2px; }
.status-chip.status-gemeinsam { background: color-mix(in srgb, var(--haupt) 18%, transparent); }

/* Untergruppen im Hauptmenue (Menue-Anordnung) */
.untermenue .unterkopf { font-size: .8rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--leise); padding: .5rem .7rem .1rem; }
.untermenue a.eingerueckt { padding-left: 1.4rem; }

/* Menue-Editor (Modul menue) */
.menue-editor { margin-top: .8rem; }
.menue-liste { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .3rem; }
.menue-liste .menue-liste { margin: .3rem 0 .2rem 1.6rem; padding-left: .6rem; border-left: 2px solid var(--linie); }
.menue-zeile { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem .6rem; padding: .35rem .5rem; border: 1px solid var(--linie); border-radius: 10px; background: var(--karte); }
.menue-gruppe > .menue-zeile { background: color-mix(in srgb, var(--haupt) 8%, var(--karte)); font-weight: 700; }
.menue-zeile input[type="text"] { flex: 1 1 12rem; min-width: 0; font: inherit; }
.menue-griff { cursor: grab; font-size: 1.2rem; padding: 0 .2rem; user-select: none; color: var(--leise); }
.menue-info { flex: 1 1 10rem; font-weight: 400; overflow-wrap: anywhere; }
.menue-ausblenden { display: inline-flex; align-items: center; gap: .25rem; font-weight: 400; }
.menue-knoepfe { display: inline-flex; flex-wrap: wrap; gap: .25rem; }
.mini-knopf { min-height: 36px; min-width: 36px; padding: .1rem .45rem; font-size: .95rem; border-width: 1px; }
.menue-aus > .menue-zeile { opacity: .55; border-style: dashed; }
.menue-gezogen > .menue-zeile { opacity: .4; }
.menue-leer { padding: .4rem .6rem; border: 1px dashed var(--linie); border-radius: 10px; }
.menue-zeile[data-zone="davor"] { box-shadow: 0 -3px 0 var(--haupt); }
.menue-zeile[data-zone="dahinter"] { box-shadow: 0 3px 0 var(--haupt); }
.menue-zeile[data-zone="hinein"], .menue-leer[data-zone="hinein"] { outline: 2px solid var(--haupt); outline-offset: 1px; }

/* Auf- und zuklappbare Listen (z. B. Postfaecher und Weiterleitungen): Ueberschrift ist der Schalter */
.aufklappen > summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: .4rem; min-height: 44px; }
.aufklappen > summary::-webkit-details-marker { display: none; }
.aufklappen > summary::before { content: "▸"; color: var(--leise); width: 1em; }
.aufklappen[open] > summary::before { content: "▾"; }
.aufklappen > summary h2, .aufklappen > summary h3 { margin: 0; }

/* Beta orange kennzeichnen (Ronny 2026-10-29): Streifen, Kopfzeile, Favicon und Etikett „NEU · nicht live“ nur in der Beta */
.beta-streifen { background: #c2410c; color: #fff; text-align: center; font-weight: 700; font-size: .85rem; letter-spacing: .02em; padding: .4rem 1rem; }
.umgebung-beta .kopf { background: #ffe8d1; border-bottom: 4px solid #c2410c; }
.umgebung-beta.frontend .kopf { background: #c2410c; border-bottom: 0; }
.marke-beta { display: inline-block; margin-right: .5rem; padding: .05rem .45rem; border-radius: 6px; background: #c2410c; color: #fff; font-size: .75rem; font-weight: 800; vertical-align: middle; }
.beta-etikett { display: inline-block; margin-left: .4rem; padding: .05rem .45rem; border-radius: 999px; background: #ffe8d1; color: #9a3412; border: 1px solid #c2410c; font-size: .72rem; font-weight: 700; line-height: 1.5; white-space: nowrap; vertical-align: middle; }
.frontend .kopf .beta-etikett, .menue a[aria-current="page"] .beta-etikett, .hauptmenue summary.aktiv .beta-etikett { background: #fff; }
.hinweis.beta-seite { background: #ffe8d1; color: #7c2d12; border-left: 4px solid #c2410c; }
.vorschau-etikett { display: inline-block; margin-left: .4rem; padding: .05rem .45rem; border-radius: 999px; background: #ede9fe; color: #5b21b6; border: 1px solid #7c3aed; font-size: .72rem; font-weight: 700; line-height: 1.5; white-space: nowrap; vertical-align: middle; }
.menue a[aria-current="page"] .vorschau-etikett, .hauptmenue summary.aktiv .vorschau-etikett { background: #fff; }
.hinweis.beta-seite .beta-etikett { margin: 0 .3rem 0 0; }
@media (prefers-color-scheme: dark) {
  .umgebung-beta .kopf { background: #3d1f0a; }
  .umgebung-beta.frontend .kopf { background: #9a3412; }
  .beta-etikett { background: #3d1f0a; color: #fdba74; border-color: #f97316; }
  .frontend .kopf .beta-etikett, .menue a[aria-current="page"] .beta-etikett, .hauptmenue summary.aktiv .beta-etikett { background: #3d1f0a; }
  .hinweis.beta-seite { background: #3d1f0a; color: #fed7aa; }
}
@media print { .beta-streifen { display: none !important; } }

/* E-Mail-Konten: zur Loeschung vorgesehen (Ronny 2026-10-29) rot; Suchfeld ueber den Listen */
tr.zur-loeschung td { color: var(--fehler); }
.status-chip.status-loeschung { background: color-mix(in srgb, var(--fehler) 15%, transparent); color: var(--fehler); }
.tabellen-suche { width: 100%; margin: .6rem 0; }

/* Abrechnung (Ronny 2026-10-30): Gruppenkopf je Klasse, Summenzeile, Gesamtsumme, nicht erkanntes Fach rot */
table.abrechnung tr.gruppe th { background: color-mix(in srgb, var(--haupt) 12%, transparent); color: var(--haupt); border-top: 2px solid var(--haupt); }
table.abrechnung tr.summe th, table.abrechnung tr.summe td { font-weight: 700; color: var(--haupt); }
table.abrechnung tr.gesamt th, table.abrechnung tr.gesamt td { background: var(--haupt); color: #fff; white-space: normal; }
.abrechnung-fehler { color: var(--fehler); font-weight: 700; }
/* IWK-Monatsuebersicht (Ronny 2026-10-30): gewaehlter Monat hervorgehoben, abgerechnete Monate gruen */
table.iwk-uebersicht tr.gewaehlt th, table.iwk-uebersicht tr.gewaehlt td { background: color-mix(in srgb, var(--haupt) 8%, transparent); }
table.iwk-uebersicht td form { margin: 0; }
.iwk-abgerechnet { color: var(--ok); font-weight: 700; }
.iwk-rechnung { font-weight: 700; margin-left: .3rem; }
input.iwk-rechnung-feld { width: 9rem; min-height: 40px; margin-right: .3rem; }
.iwk-rechnung-aendern { margin-top: .3rem; }
.iwk-rechnung-aendern summary { cursor: pointer; color: var(--haupt); }

/* Abrechnung Jugendweihe (Ronny 2026-10-30) */
.mitte { text-align: center; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.jw-fehler { color: var(--fehler); font-weight: 700; }
.jw-warn { color: #b35f00; }
table.jw-tabelle tr.jw-ab td { color: var(--leise); }
table.jw-tabelle tr.jw-bereit td { background: color-mix(in srgb, var(--ok) 14%, transparent); }
table.jw-tabelle input.jw-vsnr { width: 4.6em; text-align: center; padding: .2rem .3rem; min-height: 0; }
table.jw-tabelle input.jw-vsnr.ungueltig { border-color: var(--fehler); color: var(--fehler); }
table.jw-tabelle input.jw-rechnung { width: 8em; padding: .2rem .3rem; min-height: 0; }
table.jw-tabelle tr:not(.jw-ab) input.jw-rechnung { visibility: hidden; }
table.jw-tabelle input[type="checkbox"], .jw-checks input, .jw-option input { width: 20px; height: 20px; min-height: 0; padding: 0; display: inline-block; vertical-align: middle; margin: 0; }
.jw-option { display: inline-flex; align-items: center; gap: .4rem; }
table.jw-tabelle td.mitte { white-space: nowrap; }
tr.jw-vorbei td { color: var(--leise); }
.jw-tag { font-size: 1.05rem; margin: 1rem 0 .3rem; }
.jw-termin { border: 1px solid var(--linie); border-left: 5px solid var(--fehler); border-radius: 10px; padding: .5rem .8rem; margin: .4rem 0; }
.jw-termin.teil { border-left-color: #c48a00; }
.jw-termin.fertig { border-left-color: #1e6b3a; }
.jw-termin p { margin: .2rem 0; }
.jw-checks { display: flex; flex-wrap: wrap; gap: .5rem; }
.jw-chk { display: inline-flex; align-items: center; gap: .35rem; border: 1px solid var(--linie); border-radius: 999px; padding: .25rem .8rem .25rem .5rem; cursor: pointer; }
.jw-chk.an { background: #e5f3ea; border-color: #1e6b3a; color: #1e6b3a; font-weight: 600; }
.jw-alle { color: #1e6b3a; }
table.jw-balken th[scope="row"] { font-weight: 400; }
td.jw-balken-feld, th.jw-balken-feld { width: 50%; min-width: 120px; }
td.jw-balken-feld svg { display: block; width: 100%; height: 16px; }
.jw-saeule-kunden { fill: var(--haupt); }
.jw-saeule-dozenten { fill: #1f7a6d; }
.jw-saeule-workshops { fill: #7a4fa3; }
@media print { table.jw-tabelle input.jw-vsnr, table.jw-tabelle input.jw-rechnung { border: 0; background: none; } }
/* Dozenten: Status */
.status-chip.status-doz-uebernahme { background: color-mix(in srgb, var(--warn) 22%, transparent); }
.status-chip.status-doz-einarbeitung { background: color-mix(in srgb, var(--haupt) 18%, transparent); }
.status-chip.status-doz-keine_uebernahme { background: color-mix(in srgb, var(--fehler) 15%, transparent); color: var(--fehler); }
.status-chip.status-doz-innendienst { background: color-mix(in srgb, var(--haupt) 12%, transparent); }
.status-chip.status-doz-wird_uebernommen { background: color-mix(in srgb, var(--ok) 12%, transparent); }
.status-chip.status-doz-aktiv { background: color-mix(in srgb, var(--ok) 18%, transparent); }
.status-chip.status-doz-ausgeschieden { text-decoration: line-through; }
/* IWK: Listen Faecher, Klassen, Nicht abrechnen nebeneinander, kompakt (Ronny 2026-10-30) */
.iwk-listen { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1.5rem; align-items: start; }
table.iwk-liste { width: 100%; }
table.iwk-liste th, table.iwk-liste td { padding: .2rem .4rem; }
table.iwk-liste td form { margin: 0; }
.iwk-listen form.auswahl { display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; margin-top: .5rem; }
.iwk-listen form.auswahl input[name="begriff"] { flex: 1 1 8rem; width: auto; min-width: 6rem; }
.liste-ohne { list-style: none; padding: 0; margin: .5rem 0 1rem; }
.liste-ohne li { margin: .35rem 0; }
/* Dozentenliste: Knoepfe der Vorsortierung kompakt nebeneinander */
.doz-aktionen { white-space: nowrap; width: 1%; }
.doz-aktionen form { display: inline-flex; gap: .3rem; align-items: center; margin: .15rem .3rem .15rem 0; }
.doz-aktionen select { width: auto; min-height: 40px; padding: .3rem .5rem; font-size: .95rem; }
@media (max-width: 900px) { .doz-aktionen { white-space: normal; } }
/* Dozenten-Uebersicht (Ronny 2026-10-31): Filterleiste, aktive Filter als wegklickbare Etiketten */
.filter input.filter-kurz { flex: 0 1 130px; width: auto; }
.weitere-filter { margin: .2rem 0 .6rem; }
.weitere-filter summary { cursor: pointer; color: var(--haupt); font-weight: 600; }
.filter-etiketten { display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; margin: .4rem 0; }
.filter-etikett { padding: .2rem .6rem; border-radius: 999px; background: color-mix(in srgb, var(--haupt) 15%, transparent); color: inherit; text-decoration: none; font-size: .9rem; }
.filter-etikett:hover { background: color-mix(in srgb, var(--haupt) 28%, transparent); }

/* Hilfe: Menuebaum je Person (Ronny 2026-11-01) */
.hilfe-ansicht { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; margin: .6rem 0; }
.hilfe-ansicht select { max-width: 100%; }
.hilfe-baum { list-style: none; margin: .2rem 0 .2rem .4rem; padding-left: 1rem; border-left: 2px solid var(--linie); }
.karte > .hilfe-baum { margin-left: 0; }
.hilfe-baum li { margin: .25rem 0; }
.hilfe-gruppe > .hilfe-titel { font-weight: 700; }
.hilfe-seite::before { content: "– "; color: var(--leise); }
.ansprech-raster { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: .8rem; margin-top: .6rem; }
.ansprech-karte { display: flex; gap: .8rem; align-items: flex-start; border: 1px solid var(--linie); border-radius: 10px; padding: .8rem; }
.ansprech-karte p { margin: .1rem 0; overflow-wrap: anywhere; }
.ansprech-foto { flex: none; width: 72px; height: 72px; border-radius: 50%; object-fit: cover; }
.ansprech-initialen { display: flex; align-items: center; justify-content: center; background: color-mix(in srgb, var(--haupt) 14%, transparent); color: var(--haupt); font-weight: 800; font-size: 1.4rem; }
.ansprech-bez { color: var(--leise); font-size: .85rem; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; }
.ansprech-name { font-weight: 700; font-size: 1.05rem; }