/* Plankostenrechner: Gestaltung nach Style Guide Schellhorn (Teil C, ARCHITEKTUR.md 7.2).
   Keine Schriftdateien, keine CDN: Avenir Next ist auf Mac und iPad vorhanden, sonst Systemschrift.
   Eingabefelder weiß, berechnete Felder grau, Summenzeilen grau und fett, Zahlen rechtsbündig. */
:root {
  --gruen: #a1e25f;        /* Akzent: aktiver Baumknoten, Knöpfe, Fokus */
  --gruen-hell: #eef9e2;
  --dunkel: #242421;       /* Text, Kopfzeile */
  --grau: #59594f;         /* Nebentext */
  --grau-hell: #a49d97;    /* Linien, Rahmen */
  --linie: #d9d6d2;
  --hell: #ededeb;         /* Flächen, berechnete (graue) Felder */
  --summe: #e2e1dc;
  --weiss: #ffffff;        /* Eingabefelder */
  --fehler: #c8442f;       /* rotes Ausrufezeichen, nicht verteilt */
  --fehler-hell: #fbe9e5;
  --hinweis: #e0a526;      /* gelbes Dreieck, auf Verwaltung */
  --hinweis-hell: #fdf4dd;
  --vorschau: #fff3b0;
  --schrift: "Avenir Next", Avenir, -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --kopf-hoehe: 56px;
  --baum-breite: 290px;
}
* { box-sizing: border-box; }
html, body { margin: 0; background: var(--weiss); color: var(--dunkel); font-family: var(--schrift); font-size: 15px; line-height: 1.4; }
a { color: var(--dunkel); }
h1 { font-size: 1.45rem; font-weight: 600; margin: 0; }
h2 { font-size: 1.05rem; font-weight: 600; margin: 0 0 .5rem; }
h3 { font-size: .95rem; font-weight: 600; margin: .8rem 0 .3rem; }
small, .grau { color: var(--grau); }
.zahl { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.mitte { text-align: center; }
.fett, .fett td, td.fett { font-weight: 700; }
.inline { display: inline; margin: 0; }
[hidden] { display: none !important; }

/* ---- Knöpfe ---------------------------------------------------------------------------------------------- */
.knopf { display: inline-flex; align-items: center; gap: .3rem; min-height: 40px; padding: 0 .9rem; border: 1px solid var(--grau-hell);
  border-radius: 8px; background: var(--weiss); color: var(--dunkel); font: inherit; font-size: .93rem; text-decoration: none;
  cursor: pointer; white-space: nowrap; }
.knopf:hover { border-color: var(--dunkel); }
.knopf:focus-visible { outline: 3px solid var(--gruen); outline-offset: 1px; }
.knopf[disabled] { opacity: .45; cursor: default; }
.knopf.haupt { background: var(--gruen); border-color: var(--gruen); font-weight: 600; }
.knopf.leise { border-color: transparent; background: transparent; }
.knopf.gefahr { color: var(--fehler); border-color: #e3b3a9; }
.knopf.klein { min-height: 32px; padding: 0 .6rem; font-size: .85rem; }
.knopf.breit { width: 100%; justify-content: center; }
.knopf.loeschen { min-width: 32px; justify-content: center; color: var(--grau); border-color: transparent; }
.knopf.loeschen:hover { color: var(--fehler); border-color: #e3b3a9; }
.leiste { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; margin: .8rem 0; }
.leiste.rechts { justify-content: flex-end; }

/* ---- Kopfzeile ------------------------------------------------------------------------------------------- */
.kopf { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; gap: 1rem; height: var(--kopf-hoehe);
  padding: 0 1rem; background: var(--dunkel); color: var(--weiss); }
.kopf a, .kopf .knopf { color: var(--weiss); }
.kopf .knopf { background: transparent; border-color: #55554d; min-height: 36px; }
.kopf .knopf:hover { border-color: var(--gruen); }
.kopf .zurueck { text-decoration: none; white-space: nowrap; opacity: .9; }
.kopf-titel { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.kopf-titel strong { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kopf .zeitraum { font-size: .82rem; color: #c9c6bf; }
.kopf .stand { font-size: .85rem; color: #c9c6bf; white-space: nowrap; }
.kopf .befehle { display: flex; align-items: center; gap: .4rem; }
.kopf .benutzer { font-size: .85rem; color: var(--gruen); padding: 0 .3rem; }
.knopf-baum { display: none; width: 44px; height: 44px; border: 0; background: transparent; color: var(--weiss); font-size: 1.3rem; cursor: pointer; }
.menue { position: relative; }
.menue summary { list-style: none; }
.menue summary::-webkit-details-marker { display: none; }
.menue ul { position: absolute; right: 0; top: 44px; min-width: 240px; margin: 0; padding: .4rem 0; list-style: none; background: var(--weiss);
  border: 1px solid var(--linie); border-radius: 8px; box-shadow: 0 8px 24px rgba(0, 0, 0, .15); z-index: 30; }
.menue li a { display: block; padding: .6rem 1rem; color: var(--dunkel); text-decoration: none; }
.menue li a:hover { background: var(--hell); }

/* ---- Rahmen: Baum links, Maske rechts --------------------------------------------------------------------- */
.rahmen { display: grid; grid-template-columns: var(--baum-breite) minmax(0, 1fr); height: calc(100vh - var(--kopf-hoehe)); }
.baum { overflow: auto; border-right: 1px solid var(--linie); background: #f7f7f5; padding: .6rem 0 2rem; font-size: .92rem; }
.baum ul { list-style: none; margin: 0; padding: 0 0 0 .9rem; }
.baum > ul.baum-wurzel { padding-left: .4rem; }
.baum li { margin: 0; }
.baum summary { list-style: none; cursor: pointer; display: flex; align-items: center; }
.baum summary::-webkit-details-marker { display: none; }
.baum summary::before { content: ""; width: .42rem; height: .42rem; margin: 0 .35rem 0 .2rem; flex: none; border-right: 2px solid var(--grau);
  border-bottom: 2px solid var(--grau); transform: rotate(-45deg); transition: transform .15s; }
.baum details[open] > summary::before { transform: rotate(45deg); }
.baum li > a, .baum li > span.gruppe { margin-left: 1rem; }
.baum a, .baum .gruppe { display: flex; align-items: center; gap: .3rem; min-height: 32px; padding: .15rem .5rem; border-radius: 6px;
  text-decoration: none; color: var(--dunkel); flex: 1; min-width: 0; }
.baum .text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.baum .gruppe { color: var(--grau); font-weight: 600; }
.baum a:hover { background: var(--hell); }
.baum a[aria-current="page"] { background: var(--gruen); font-weight: 600; }
.zeichen { display: inline-flex; align-items: center; justify-content: center; min-width: 1.15rem; height: 1.15rem; border-radius: 50%;
  font-size: .78rem; font-weight: 700; flex: none; }
.zeichen.fehler { background: var(--fehler); color: var(--weiss); }
.zeichen.hinweis { color: var(--hinweis); font-size: .9rem; }
.zeichen.aus { color: var(--fehler); font-weight: 800; }
.zeichen.info { background: var(--hell); color: var(--grau); }
.inhalt { overflow: auto; padding: 0 1.5rem 3rem; }

/* ---- Warnleiste -------------------------------------------------------------------------------------------- */
.warnleiste { display: flex; flex-direction: column; gap: .3rem; padding-top: .8rem; }
.warnleiste:empty { display: none; }
.warnung { display: flex; align-items: center; gap: .5rem; margin: 0; padding: .45rem .7rem; border-radius: 8px; text-decoration: none; font-size: .9rem;
  background: var(--hell); color: var(--dunkel); }
.warnung.fehler { background: var(--fehler-hell); }
.warnung.hinweis { background: var(--hinweis-hell); }
a.warnung:hover { text-decoration: underline; }
.warnleiste .weitere summary { cursor: pointer; font-size: .88rem; color: var(--grau); padding: .2rem .7rem; }
.warnleiste .weitere .warnung { margin-top: .3rem; }

/* ---- Maske ----------------------------------------------------------------------------------------------------- */
.maske-kopf { display: flex; justify-content: space-between; align-items: flex-end; gap: 1rem; flex-wrap: wrap; padding: 1rem 0 .6rem; }
.untertitel { margin: 0; font-size: .85rem; color: var(--grau); }
.druckknoepfe { display: flex; gap: .4rem; flex-wrap: wrap; }
.reiter { display: flex; gap: .2rem; border-bottom: 2px solid var(--linie); margin-bottom: 1rem; overflow-x: auto; }
.reiter a { padding: .6rem .9rem; text-decoration: none; color: var(--grau); border-bottom: 3px solid transparent; margin-bottom: -2px; white-space: nowrap; min-height: 44px; display: flex; align-items: center; }
.reiter a:hover { color: var(--dunkel); }
.reiter a.aktiv { color: var(--dunkel); border-bottom-color: var(--gruen); font-weight: 600; }
.erklaerung { color: var(--grau); font-size: .9rem; max-width: 70rem; margin: .4rem 0 .8rem; }
.leer { color: var(--grau); padding: 1rem 0; }
.block { margin: 1.4rem 0; }
.kasten { margin: 1.2rem 0; padding: 1rem 1.2rem; border: 1px solid var(--linie); border-radius: 10px; background: #fafaf8; max-width: 60rem; }
.spalten { display: flex; flex-wrap: wrap; gap: 1.5rem; align-items: flex-start; }
.spalten > * { flex: 1 1 320px; }
details.info { margin: .6rem 0; padding: .6rem .9rem; border-radius: 8px; background: var(--hinweis-hell); max-width: 60rem; }
details.info summary { cursor: pointer; font-weight: 600; }
.hinweistext { color: #9a6c00; }
.fehlertext { color: var(--fehler); font-weight: 600; }
.hinweis-klein { font-size: .78rem; color: var(--grau); white-space: nowrap; }
dl.liste { display: grid; grid-template-columns: max-content 1fr; gap: .3rem 1rem; margin: 0; }
dl.liste dt { color: var(--grau); }
dl.liste dd { margin: 0; }
ul.hinweise { margin: .3rem 0; padding-left: 1.2rem; font-size: .9rem; }
.kosten-je { max-width: 40rem; }
dl.kennzahlen { display: flex; gap: 2rem; margin: 0; }
dl.kennzahlen div { display: flex; flex-direction: column; }
dl.kennzahlen dt { color: var(--grau); font-size: .85rem; }
dl.kennzahlen dd { margin: 0; font-size: 1.25rem; font-variant-numeric: tabular-nums; }

/* ---- Formulare --------------------------------------------------------------------------------------------- */
.formular { display: grid; gap: .5rem; max-width: 52rem; margin: .5rem 0 1rem; }
.formular.zweispaltig { grid-template-columns: repeat(auto-fit, minmax(330px, 1fr)); max-width: 72rem; column-gap: 2rem; }
.feldzeile { display: grid; grid-template-columns: 13rem minmax(0, 1fr); align-items: center; gap: .3rem .8rem; }
.feldzeile > small { grid-column: 2; margin-top: -.2rem; }
.feldzeile.oben { align-items: start; }
.feldzeile > span:first-child { color: var(--grau); font-size: .92rem; }
.formular .eingabe, .feldzeile .eingabe { max-width: 26rem; }
.grau-feld { display: inline-flex; align-items: center; min-height: 36px; padding: 0 .6rem; background: var(--hell); border-radius: 6px; color: var(--grau); }
.paar { display: flex; gap: .4rem; flex-wrap: wrap; }
.eingabe { width: 100%; min-height: 36px; padding: .3rem .55rem; border: 1px solid var(--linie); border-radius: 6px; background: var(--weiss);
  color: var(--dunkel); font: inherit; font-size: .95rem; }
.eingabe:hover { border-color: var(--grau-hell); }
.eingabe:focus, .haken:focus-visible, .farbe:focus-visible { outline: 3px solid var(--gruen); outline-offset: 0; border-color: var(--gruen); }
.eingabe.zahl { text-align: right; font-variant-numeric: tabular-nums; }
.eingabe.kurz { max-width: 9rem; }
.eingabe.breit { max-width: 40rem; }
.eingabe[disabled] { background: var(--hell); color: var(--grau); }
.eingabe.notiz { min-height: 76px; resize: vertical; }
select.eingabe { padding-right: 1.6rem; }
.haken { width: 22px; height: 22px; accent-color: #5b9a1c; cursor: pointer; }
.farbe { width: 48px; height: 36px; padding: 2px; border: 1px solid var(--linie); border-radius: 6px; background: var(--weiss); cursor: pointer; }
.eingabe.sendet { background: var(--gruen-hell); }
.eingabe.falsch, .eingabe.falsch:focus { border-color: var(--fehler); outline-color: var(--fehler); background: var(--fehler-hell); }
.feldfehler { position: absolute; z-index: 40; max-width: 22rem; padding: .35rem .6rem; border-radius: 6px; background: var(--fehler); color: var(--weiss);
  font-size: .85rem; box-shadow: 0 4px 12px rgba(0, 0, 0, .2); }

/* ---- Tabellen ----------------------------------------------------------------------------------------------- */
.tabelle-rahmen { max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; margin: .4rem 0; }
.tabelle { border-collapse: separate; border-spacing: 0; font-size: .92rem; min-width: 22rem; }
.tabelle th, .tabelle td { padding: .25rem .45rem; border-bottom: 1px solid var(--linie); vertical-align: middle; text-align: left; }
.tabelle thead th { position: sticky; top: 0; z-index: 2; background: var(--weiss); color: var(--grau); font-weight: 600; font-size: .85rem;
  border-bottom: 2px solid var(--grau-hell); white-space: nowrap; }
.tabelle thead th.zahl { text-align: right; }
.tabelle thead th.mitte { text-align: center; }
.tabelle tbody th { font-weight: 500; }
.tabelle td.grau, .tabelle td.zahl.grau { background: var(--hell); color: var(--dunkel); }
.tabelle td.negativ { color: var(--fehler); }
.tabelle td .eingabe { min-width: 5.5rem; }
.tabelle td.monat .eingabe { min-width: 5.4rem; width: 6.2rem; }
.tabelle td.jahr .eingabe { min-width: 7rem; }
.tabelle tfoot tr.summe th, .tabelle tfoot tr.summe td, .tabelle tr.summe th, .tabelle tr.summe td { background: var(--summe); font-weight: 700; border-top: 2px solid var(--grau-hell); }
.tabelle tr.zwischensumme th, .tabelle tr.zwischensumme td { font-weight: 700; }
.tabelle tr.summe.fehler th, .tabelle tr.summe.fehler td { background: var(--fehler-hell); color: var(--fehler); }
.tabelle tr.fehler > th, .tabelle tr.fehler > td { background: var(--fehler-hell); }
.tabelle tr.fehler td.rest { color: var(--fehler); font-weight: 700; }
.tabelle tr.hinweis > th, .tabelle tr.hinweis > td { background: var(--hinweis-hell); }
.tabelle tr.aus > th, .tabelle tr.aus > td { opacity: .6; }
.tabelle tr.fest td, .tabelle tr.fest th { background: #f4f4f2; color: var(--grau); }
.tabelle tr.verwaltung td, .tabelle tr.verwaltung th { background: #f4f4f2; }
.tabelle tr.gruppen-zeile th { background: #f4f4f2; color: var(--grau); font-weight: 600; font-size: .85rem; padding-top: .5rem; }
.tabelle tr.block-zeile th, .tabelle tr.block-zeile td { font-weight: 700; }
.tabelle tr.unterzeile th { padding-left: 1.4rem; font-weight: 400; color: var(--grau); }
.tabelle tr.neu td, .tabelle tr.neu th { background: var(--gruen-hell); }
.tabelle tr.berechnet th { color: var(--grau); }
.tabelle tr.nicht-gewaehlt th, .tabelle tr.nicht-gewaehlt td { opacity: .5; font-style: italic; }
.tabelle tr.lohn th, .tabelle tr.lohn td { font-weight: 700; }
.tabelle tr.lohn td.grau { background: #e3e2dc; }
.tabelle td.vorschau { background: var(--vorschau); font-weight: 600; }
.tabelle td.nachher { border-bottom: 1px solid var(--linie); }
.tabelle .schmal { width: 2.5rem; }
.tabelle .typspalte { font-size: .78rem; max-width: 6.5rem; white-space: normal; }
.tabelle .einheit { color: var(--grau); font-size: .8rem; font-weight: 400; }
.tabelle.kennwerte { min-width: 0; width: 100%; max-width: 32rem; }
.tabelle.kennwerte td { width: 10rem; }
.tabelle.schmal-tabelle { min-width: 0; }
/* Monatstabellen: erste Spalte fest beim waagerechten Scrollen */
.tabelle.monate th:first-child, .tabelle.verteilung th:first-child, .tabelle.uebersicht th:first-child { position: sticky; left: 0; z-index: 1; background: var(--weiss);
  min-width: 13rem; max-width: 22rem; }
.tabelle.monate thead th:first-child, .tabelle.verteilung thead th:first-child, .tabelle.uebersicht thead th:first-child { z-index: 3; }
.tabelle.monate tr.summe th:first-child, .tabelle.uebersicht tr.summe th:first-child { background: var(--summe); }
.tabelle.monate tr.neu th:first-child { background: var(--gruen-hell); }
.tabelle.monate tr.fehler th:first-child, .tabelle.verteilung tr.fehler th:first-child { background: var(--fehler-hell); }
.tabelle.verteilung tr.hinweis th:first-child { background: var(--hinweis-hell); }
.tabelle.monate th:first-child .eingabe { min-width: 12rem; }
/* Planungs- und Kostenübersicht */
.tabelle.uebersicht td.gesamt, .tabelle.uebersicht th.gesamt { background: #f4f4f2; font-weight: 600; }
.tabelle.uebersicht tr.ebene-0 th, .tabelle.uebersicht tr.ebene-0 td { font-weight: 700; }
.tabelle.uebersicht tr.ebene-1 th { padding-left: 1.4rem; font-weight: 400; color: var(--grau); }
.tabelle.uebersicht tr.ebene-2 th { padding-left: 2.6rem; font-weight: 400; color: var(--grau); font-size: .88rem; }
.tabelle.uebersicht tr.hat-kinder { cursor: pointer; }
.tabelle.uebersicht .pfeil { display: inline-block; width: 1rem; color: var(--grau); transition: transform .15s; }
.tabelle.uebersicht tr.offen .pfeil { transform: rotate(90deg); }
.tabelle.uebersicht tr.zu { display: none; }
.tabelle.zuschlaege td .eingabe { width: 6rem; min-width: 5rem; }
:target > th, :target > td { outline: none; animation: aufleuchten 2.5s ease-out; }
@keyframes aufleuchten { from { background: var(--gruen); } }

/* ---- Lohnanpassung ------------------------------------------------------------------------------------------- */
.anpassung { display: flex; flex-wrap: wrap; gap: .6rem 1rem; align-items: flex-end; padding: .8rem 1rem; margin: .6rem 0 1rem; border: 1px solid var(--linie);
  border-radius: 10px; background: #fafaf8; max-width: 72rem; }
.anpassung h2 { flex-basis: 100%; margin: 0; }
.anpassung label { display: flex; flex-direction: column; gap: .2rem; font-size: .88rem; color: var(--grau); }
.anpassung .eingabe { width: 9rem; }
.anpassung .leiste { margin: 0; }
.anpassung .erklaerung { flex-basis: 100%; margin: 0; }
.filter label { display: flex; align-items: center; gap: .4rem; color: var(--grau); }
.filter .eingabe { width: auto; }

/* ---- Diagramme ------------------------------------------------------------------------------------------------ */
.diagramme { display: flex; flex-wrap: wrap; gap: 1.5rem 2.5rem; margin: 1.5rem 0; }
.diagramm { margin: 0; display: flex; gap: 1rem; align-items: center; flex-wrap: wrap; }
.diagramm.breit { flex-direction: column; align-items: stretch; width: 100%; max-width: 760px; margin: 1rem 0; }
.diagramm figcaption { font-weight: 600; }
svg.ring { width: 180px; height: 180px; flex: none; }
svg.ring .ring-titel { font-size: 11px; fill: var(--grau); font-family: var(--schrift); }
svg.ring .ring-wert { font-size: 15px; font-weight: 600; fill: var(--dunkel); font-family: var(--schrift); }
svg.balken { width: 100%; height: auto; }
svg.balken .balken-text { font-size: 13px; fill: var(--dunkel); font-family: var(--schrift); }
.legende { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 12px auto auto auto; gap: .25rem .7rem;
  align-items: center; font-size: .88rem; }
.legende li { display: contents; }
.legende.waagerecht { display: flex; flex-wrap: wrap; gap: .4rem 1.2rem; }
.legende.waagerecht li { display: flex; align-items: center; gap: .35rem; }
svg.punkt { width: 11px; height: 11px; vertical-align: -1px; margin-right: .3rem; }
.legende svg.punkt { margin: 0; }
.kacheln-klein { display: flex; flex-wrap: wrap; gap: .5rem; margin: .5rem 0 1rem; }
.kachel-klein { padding: .7rem 1rem; border: 1px solid var(--linie); border-radius: 10px; text-decoration: none; min-height: 44px; }
.kachel-klein:hover { border-color: var(--gruen); background: var(--gruen-hell); }

/* ---- Dialoge, Meldungen, Kontextmenü -------------------------------------------------------------------------- */
.dialog { border: 0; border-radius: 12px; padding: 1.2rem 1.4rem; max-width: 34rem; width: calc(100% - 2rem); box-shadow: 0 16px 48px rgba(0, 0, 0, .25); }
.dialog::backdrop { background: rgba(36, 36, 33, .4); }
.baumauswahl { max-height: 50vh; overflow: auto; border: 1px solid var(--linie); border-radius: 8px; padding: .5rem .8rem; }
.baumauswahl ul { list-style: none; margin: .2rem 0 .5rem; padding-left: 1.6rem; }
.baumauswahl label { display: inline-flex; align-items: center; gap: .4rem; min-height: 32px; }
.meldung { position: fixed; right: 1rem; bottom: 1rem; z-index: 50; display: flex; flex-direction: column; gap: .4rem; max-width: 28rem; }
.meldung > div { padding: .6rem .9rem; border-radius: 8px; background: var(--dunkel); color: var(--weiss); font-size: .9rem; box-shadow: 0 6px 18px rgba(0, 0, 0, .2); }
.meldung > div.fehler { background: var(--fehler); }
.kontextmenue { position: absolute; z-index: 60; display: flex; flex-direction: column; min-width: 260px; padding: .3rem 0; background: var(--weiss);
  border: 1px solid var(--linie); border-radius: 8px; box-shadow: 0 8px 24px rgba(0, 0, 0, .18); }
.kontextmenue button { border: 0; background: transparent; text-align: left; padding: .6rem 1rem; font: inherit; cursor: pointer; min-height: 40px; }
.kontextmenue button:hover { background: var(--hell); }

/* ---- Startseite und Anmeldung ----------------------------------------------------------------------------------- */
.start { padding: 1.5rem; }
.start > .warnung { margin-bottom: .6rem; max-width: 60rem; }
.kacheln { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 1rem; }
.kachel { display: flex; flex-direction: column; gap: .5rem; padding: 1.1rem 1.2rem; border: 1px solid var(--linie); border-radius: 12px; background: var(--weiss); }
.kachel.neu { background: #fafaf8; }
.kachel.neu .feldzeile { grid-template-columns: 1fr; }
.kachel.neu form { display: flex; flex-direction: column; gap: .5rem; }
.kachel.planung:hover { border-color: var(--gruen); box-shadow: 0 4px 16px rgba(0, 0, 0, .06); }
.kachel:target { border-color: var(--gruen); box-shadow: 0 0 0 3px var(--gruen); }
.kachel-link { text-decoration: none; color: inherit; }
.kachel h2 { font-size: 1.1rem; margin: 0 0 .2rem; }
.kachel .zeitraum { margin: 0; color: var(--grau); }
.kachel .notiz { margin: .3rem 0 0; font-size: .9rem; }
.kachel .wer { margin: 0; font-size: .8rem; color: var(--grau); }
.kachel-befehle { display: flex; flex-wrap: wrap; gap: .35rem; margin-top: auto; padding-top: .5rem; border-top: 1px solid var(--linie); }
.seite-anmelden, .anmelden { background: var(--hell); }
.anmelden { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 1rem; }
.anmelde-kasten { width: 100%; max-width: 380px; display: flex; flex-direction: column; gap: .8rem; padding: 2rem; background: var(--weiss); border-radius: 14px;
  box-shadow: 0 10px 40px rgba(0, 0, 0, .08); border-top: 6px solid var(--gruen); }
.anmelde-kasten .feldzeile { grid-template-columns: 1fr; }

/* ---- iPad und schmale Fenster: Baum klappt ein ------------------------------------------------------------------ */
@media (max-width: 1100px) {
  .kopf .stand { display: none; }
}
@media (max-width: 1024px) and (orientation: portrait), (max-width: 860px) {
  .knopf-baum { display: inline-flex; align-items: center; justify-content: center; }
  .rahmen { grid-template-columns: minmax(0, 1fr); }
  .baum { position: fixed; top: var(--kopf-hoehe); left: 0; bottom: 0; width: min(340px, 85vw); z-index: 15; transform: translateX(-105%);
    transition: transform .2s; box-shadow: 4px 0 20px rgba(0, 0, 0, .15); }
  body.baum-offen .baum { transform: none; }
  .baum a, .baum .gruppe { min-height: 44px; }
  .inhalt { padding: 0 1rem 3rem; }
  .kopf { gap: .5rem; padding: 0 .5rem; }
  .kopf .zurueck { display: none; }
  .kopf .benutzer { display: none; }
  .feldzeile { grid-template-columns: 1fr; }
  .feldzeile > small { grid-column: 1; }
}
@media print {
  .kopf, .baum, .reiter, .leiste, .druckknoepfe, .knopf { display: none !important; }
  .rahmen { display: block; height: auto; }
  .inhalt { overflow: visible; }
}
.tabelle tfoot tr.summen-kopf th { background: #f4f4f2; color: var(--grau); font-size: .8rem; font-weight: 600; text-align: right;
  border-top: 2px solid var(--grau-hell); }
.tabelle tfoot tr.summen-kopf th:first-child { text-align: left; }
.tabelle.monate tbody th:first-child { min-width: 16rem; }
.tabelle.monate td select.eingabe { min-width: 11rem; }
.tabelle td.knoepfe { white-space: nowrap; }
/* Spaltenbreiten in Tabellen: Zahlen schmal, Bezeichnungen breit genug */
.tabelle td .eingabe.zahl { width: 7.5rem; }
.tabelle td.jahr .eingabe.zahl { width: 8.5rem; }
.tabelle td .eingabe.text { min-width: 11rem; }
.tabelle td .eingabe.text.kurz { min-width: 6rem; width: 7rem; }
.tabelle td .eingabe.text.breit { min-width: 24rem; }

/* ---- Gelöschte Planungen (Startseite) und Füllen-Knopf der Monatszeilen ----------------------------------------- */
.geloescht { margin-top: 1.5rem; max-width: 60rem; }
.geloescht summary { cursor: pointer; min-height: 44px; display: flex; align-items: center; color: var(--grau); }
.geloescht-liste { list-style: none; padding: 0; margin: .4rem 0; display: flex; flex-direction: column; gap: .4rem; }
.geloescht-liste li { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; }
.fuellen-knopf { margin-left: .4rem; min-width: 32px; min-height: 32px; padding: 0 .4rem; border: 1px solid var(--linie);
  border-radius: 6px; background: var(--weiss); color: var(--grau); font: inherit; line-height: 1; cursor: pointer; }
.fuellen-knopf:hover, .fuellen-knopf:focus-visible { background: var(--hell); }
@media (hover: hover) and (pointer: fine) { .fuellen-knopf { opacity: .55; } tr:hover > th .fuellen-knopf { opacity: 1; } }
.kontext-titel { padding: .2rem 1rem; color: var(--grau); font-size: .85rem; }
.kontext-titel:empty { display: none; }