/* Die Konsole der Projektzentrale. Erscheinungsbild „Grau“ (../../Erscheinungsbild.md): Papier, warmes
   Grau für den Text, Braun für Überschriften und Knöpfe, der Ton nur als Punkt; Spectral, leicht gesetzt.
   Das eine prägende Element ist das Lot der Homepage: Die Lage steht an einer feinen Linie, jeder Punkt
   darauf ist eine Sache (gefüllt: jetzt; Ring: bald; klein und grau: zur Kenntnis). Getönt heißt
   „steht“, gestrichelt „im Entstehen“, wie auf Homepage und App. Keine Schatten, keine Verläufe. */

:root {
  --papier: #F1EADD;
  --flaeche: #E8DFCE;
  --linie: #D6CAB6;
  --strich: #B5A993;
  --ton: #AE5B38;
  --ton-text: #9C4F30;
  --tinte: #4A4541;
  --braun: #6E4A39;
  --grau: #68625C;
  --knopf: #5E4436;
  --schrift: "Spectral", "Iowan Old Style", Georgia, serif;
  --rund: 2px;
  --leiste: 15.5rem;
  --kurve: cubic-bezier(0.22, 0.61, 0.24, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0; background: var(--papier); color: var(--tinte);
  font-family: var(--schrift); font-size: 1.0625rem; line-height: 1.55;
  font-kerning: normal; font-variant-numeric: lining-nums; -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4 { font-weight: 300; color: var(--braun); line-height: 1.2; margin: 0; }
p { margin: 0; }
a { color: inherit; }
button { font: inherit; color: inherit; }
strong { font-weight: 500; }
:focus-visible { outline: 2px solid var(--ton); outline-offset: 2px; }
::selection { background: color-mix(in srgb, var(--ton) 26%, transparent); }
.laedt { padding: 3rem; color: var(--grau); }

/* ---------------------------------------------------------------- Knöpfe */
.knopf {
  display: inline-flex; align-items: center; gap: 0.4em; font-size: 0.95rem; line-height: 1; letter-spacing: 0.01em;
  padding: 0.72em 1.15em; border: 1px solid var(--knopf); border-radius: var(--rund); background: var(--knopf); color: var(--papier);
  cursor: pointer; text-decoration: none; transition: background-color 0.3s var(--kurve), border-color 0.3s var(--kurve), color 0.3s var(--kurve);
}
.knopf:hover { background: var(--ton-text); border-color: var(--ton-text); }
.knopf.still { background: transparent; color: var(--tinte); border-color: color-mix(in srgb, var(--tinte) 45%, transparent); }
.knopf.still:hover { background: var(--knopf); border-color: var(--knopf); color: var(--papier); }
.knopf.leise { background: transparent; border-color: transparent; color: var(--grau); text-decoration: underline; text-decoration-color: var(--strich); text-underline-offset: 0.2em; }
.knopf.leise:hover { color: var(--tinte); background: transparent; }
.knopf.klein { font-size: 0.86rem; padding: 0.45em 0.8em; }
.knopf[disabled], [aria-busy="true"] .knopf { opacity: 0.55; cursor: progress; }
.verweis { background: none; border: 0; padding: 0; cursor: pointer; text-decoration: underline; text-decoration-color: var(--ton); text-underline-offset: 0.22em; }

.hinweis { color: var(--grau); font-size: 0.9rem; }
.stimme { font-style: italic; font-weight: 300; color: var(--braun); font-size: 1.15rem; }
.leer { color: var(--grau); font-style: italic; }
.springen { position: absolute; left: -999px; }
.springen:focus { left: 1rem; top: 1rem; z-index: 10; background: var(--papier); padding: 0.5rem 1rem; }

/* ---------------------------------------------------------------- Felder (wie auf der Homepage: die Linie trägt) */
.feld { display: block; margin-top: 1.1rem; }
.feld > span, legend { display: block; font-size: 0.88rem; color: var(--grau); }
.feld small { display: block; color: var(--grau); font-size: 0.82rem; margin-top: 0.2rem; }
.feld:focus-within > span { color: var(--tinte); }
input[type="text"], input[type="email"], input[type="url"], input[type="date"], input[type="time"], input[type="number"], textarea, select {
  display: block; width: 100%; font: inherit; color: inherit; background: transparent; border: 0; border-radius: 0;
  border-bottom: 1px solid color-mix(in srgb, var(--tinte) 55%, transparent); padding: 0.3rem 0 0.4rem;
}
textarea { resize: vertical; line-height: 1.5; }
select { appearance: none; -webkit-appearance: none; padding-right: 1.4rem; cursor: pointer;
  background: linear-gradient(45deg, transparent 50%, var(--grau) 50%) right 0.45rem center / 0.35rem 0.35rem no-repeat,
              linear-gradient(-45deg, transparent 50%, var(--grau) 50%) right 0.2rem center / 0.35rem 0.35rem no-repeat; }
input:focus, textarea:focus, select:focus { outline: none; border-bottom-color: var(--ton); box-shadow: 0 1px 0 var(--ton); }
fieldset { border: 0; padding: 0; margin: 1.1rem 0 0; }
.haken { display: inline-flex; align-items: baseline; gap: 0.5rem; margin-top: 0.9rem; cursor: pointer; }
.haken input { accent-color: var(--knopf); transform: translateY(0.1rem); }
.tage { display: flex; flex-wrap: wrap; gap: 0 1.1rem; }
.tage .haken { margin-top: 0.35rem; }
.zwei { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 1.75rem; }
.dialog-fehler { margin-top: 1rem; color: var(--ton-text); }

/* ---------------------------------------------------------------- Anmeldung */
.anmeldung { min-height: 100vh; display: grid; place-items: center; padding: 2rem 1.25rem; }
.anmeldung-blatt { width: min(100%, 25rem); text-align: center; }
.anmeldung-blatt .zeichen { width: 3.4rem; height: 3.4rem; color: var(--braun); }
.anmeldung-blatt h1 { font-weight: 200; font-size: 2.6rem; margin-top: 1.25rem; letter-spacing: -0.012em; }
.anmeldung-blatt .leise { color: var(--grau); font-style: italic; margin-top: 0.3rem; }
.anmeldung-blatt form { text-align: left; margin-top: 2.25rem; }
.anmeldung-blatt .knopf { margin-top: 1.5rem; }
.anmeldung-blatt .hinweis { margin-bottom: 0.5rem; }

/* ---------------------------------------------------------------- Rahmen */
/* Die Linie zwischen Leiste und Inhalt läuft über die ganze Seite (die Leiste selbst bleibt stehen). */
.rahmen { display: grid; grid-template-columns: var(--leiste) minmax(0, 1fr); min-height: 100vh;
  background: linear-gradient(var(--linie), var(--linie)) calc(var(--leiste) - 1px) 0 / 1px 100% no-repeat; }
.leiste { position: sticky; top: 0; height: 100vh; overflow-y: auto; padding: 2rem 1.5rem 1.5rem;
  display: flex; flex-direction: column; }
.marke { display: flex; align-items: center; gap: 0.65rem; text-decoration: none; color: var(--braun); font-size: 1.15rem; font-weight: 300; }
.marke .zeichen { width: 1.9rem; height: 1.9rem; flex: none; }
.leiste ul { list-style: none; margin: 2.25rem 0 0; padding: 0; }
.leiste li a { position: relative; display: flex; justify-content: space-between; padding: 0.38rem 0 0.38rem 1rem; text-decoration: none; color: var(--grau); }
.leiste li a:hover { color: var(--tinte); }
.leiste li a[aria-current]::before { content: ""; position: absolute; left: 0; top: 50%; width: 0.36rem; height: 0.36rem; margin-top: -0.18rem;
  border-radius: 50%; background: var(--ton); }
.leiste li a[aria-current] { color: var(--tinte); }
.zahl { color: var(--ton-text); font-size: 0.88rem; }
.wer { margin-top: auto; padding-top: 2rem; color: var(--grau); font-size: 0.82rem; overflow-wrap: anywhere; }
.wer p { margin: 0 0 0.6rem; }
.menue { display: none; }
main#inhalt { padding: 2.75rem clamp(1.25rem, 4vw, 4rem) 5rem; outline: none; }
main[aria-busy="true"] .seite { opacity: 0.6; transition: opacity 0.3s 0.15s; }
.seite { max-width: 74rem; }
.seite > section, .seite > form { margin-top: 2.75rem; }
.seite h2 { font-size: 1.3rem; font-weight: 400; }
.seitenkopf h1 { font-size: clamp(1.9rem, 1.45rem + 1.3vw, 2.5rem); letter-spacing: -0.012em; }
.seitenkopf .neben { color: var(--grau); margin-top: 0.6rem; max-width: 44rem; }
.schmal { max-width: 40rem; }
.werkzeuge { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 1.75rem; }
ul.ruhig, ol.ruhig { list-style: none; margin: 0.8rem 0 0; padding: 0; }
ul.ruhig li, ol.ruhig li { padding: 0.45rem 0; border-top: 1px solid var(--linie); }
.tag { font-variant-numeric: tabular-nums; }

/* Reiter (Filter) */
.reiterleiste { display: flex; flex-wrap: wrap; align-items: center; gap: 0.3rem 1.3rem; margin-top: 2rem; }
.reiter { text-decoration: none; color: var(--grau); padding: 0.2rem 0; border-bottom: 1px solid transparent; }
.reiter[aria-current] { color: var(--tinte); border-bottom-color: var(--ton); }
.trenner { width: 1px; height: 1.1rem; background: var(--linie); }

/* ---------------------------------------------------------------- Die Lage: das Lot */
.lage .datum { color: var(--grau); }
.lage .schwelle { font-size: clamp(2rem, 1.35rem + 1.9vw, 2.9rem); font-weight: 300; letter-spacing: -0.014em; max-width: 22em; margin-top: 0.35rem; }
.lage-raster { display: grid; grid-template-columns: minmax(0, 1fr) 19rem; gap: 4.5rem; margin-top: 3rem; align-items: start; }
.lot { position: relative; padding-left: 2.25rem; }
.lot::before { content: ""; position: absolute; left: 0.42rem; top: 0.7rem; bottom: 0.4rem; width: 1px; background: var(--linie); }
.lot-gruppe + .lot-gruppe { margin-top: 2.6rem; }
.lot-gruppe h2 { position: relative; font-size: 1.35rem; font-weight: 300; }
.lot-gruppe h2::before { content: ""; position: absolute; left: -2.25rem; top: 0.68em; width: 1.6rem; height: 1px; background: var(--strich); }
.lot-gruppe .unter { color: var(--grau); font-size: 0.9rem; }
.lot-liste { list-style: none; margin: 0.7rem 0 0; padding: 0; }
.lot-punkt { position: relative; padding: 0.75rem 0 0.8rem; border-top: 1px solid color-mix(in srgb, var(--linie) 70%, transparent); }
.lot-punkt:first-child { border-top: 0; }
.lot-punkt .punkt { position: absolute; left: -2.25rem; top: 1.18rem; width: 0.86rem; height: 0.86rem; border-radius: 50%; background: var(--papier); }
.stufe-rot .punkt { background: var(--ton); }
.stufe-gelb .punkt { border: 1.5px solid var(--ton); }
.stufe-leise .punkt { width: 0.42rem; height: 0.42rem; left: -2.03rem; top: 1.38rem; background: var(--strich); }
.lot-text > p { max-width: 42rem; }
.aktionen { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 0.6rem; margin-top: 0.5rem; }
.aktionen:empty { display: none; }
details.lot-gruppe summary { list-style: none; cursor: pointer; }
details.lot-gruppe summary::-webkit-details-marker { display: none; }
details.lot-gruppe summary h2 { display: inline; color: var(--grau); }
details.lot-gruppe summary h2::after { content: " zeigen"; font-size: 0.85rem; color: var(--grau); }
details[open].lot-gruppe summary h2::after { content: " ausblenden"; }
.anzahl { font-size: 0.95rem; }

.seitenspalte section + section { margin-top: 2.25rem; }
.seitenspalte h2 { font-size: 1.1rem; font-weight: 400; margin-bottom: 0.6rem; }
.seitenspalte p + p { margin-top: 0.5rem; }
.kanaele, .kanal-liste ul { list-style: none; margin: 0; padding: 0; }
.kanal-knopf { display: grid; grid-template-columns: auto 1fr; column-gap: 0.7rem; width: 100%; text-align: left; background: none; border: 0;
  border-top: 1px solid var(--linie); padding: 0.6rem 0; cursor: pointer; }
.kanal-knopf[disabled] { cursor: default; }
.kanal-knopf:not([disabled]):hover .kanal-name { text-decoration: underline; text-decoration-color: var(--ton); text-underline-offset: 0.2em; }
.kanal-name { grid-column: 2; }
.kanal-was { grid-column: 2; color: var(--grau); font-size: 0.88rem; }
.schalter { grid-row: 1 / span 2; margin-top: 0.42rem; position: relative; width: 1.75rem; height: 0.95rem; border: 1px solid var(--strich); border-radius: 1rem; }
.schalter::after { content: ""; position: absolute; top: 0.14rem; left: 0.16rem; width: 0.55rem; height: 0.55rem; border-radius: 50%; background: var(--strich); transition: left 0.3s var(--kurve); }
.an .schalter { background: var(--flaeche); border-color: var(--braun); }
.an .schalter::after { left: 0.98rem; background: var(--ton); }

/* ---------------------------------------------------------------- Getönt und gestrichelt */
.eintrag, .stand { display: inline-block; border-radius: var(--rund); padding: 0.12rem 0.45rem; font-size: 0.86rem; border: 1px solid transparent; }
.eintrag.steht, .stand.steht { background: var(--flaeche); }
.eintrag.offen, .stand.offen { border: 1px dashed var(--strich); }
.eintrag.faellt, .stand.faellt { color: var(--grau); text-decoration: line-through; text-decoration-color: var(--strich); }
.legende { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-top: 1rem; }

/* ---------------------------------------------------------------- Kalender */
.kalender .taeglich { margin-top: 0.9rem; color: var(--grau); }
.woche { margin-top: 2.5rem; }
.woche h2 { font-size: 1.15rem; font-weight: 400; }
.tagreihe { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 0 0.6rem; margin-top: 0.8rem; }
.kal-tag { border-top: 1px solid var(--linie); padding: 0.45rem 0 0.9rem; min-height: 5.5rem; }
.tag-kopf { color: var(--grau); font-size: 0.9rem; }
.tag-kopf .wt { color: var(--tinte); }
.heute .tag-kopf::before { content: ""; display: inline-block; width: 0.42rem; height: 0.42rem; border-radius: 50%; background: var(--ton); margin-right: 0.35rem; vertical-align: 0.12em; }
.vorbei { opacity: 0.5; }
.nach-horizont .tag-kopf { color: var(--strich); }
.kal-tag.horizont { border-right: 1px dashed var(--ton); padding-right: 0.4rem; }
.horizont-marke { color: var(--ton-text); font-size: 0.8rem; font-style: italic; }
.kal-tag ul { list-style: none; margin: 0.35rem 0 0; padding: 0; }
.kalender .eintrag { display: block; margin-top: 0.3rem; line-height: 1.35; overflow-wrap: anywhere; }
.kalender .eintrag button { all: unset; cursor: pointer; display: block; }
.kalender .eintrag button:focus-visible { outline: 2px solid var(--ton); }
.eintrag .art, .eintrag .zeit { display: block; color: var(--grau); font-size: 0.78rem; }
.eintrag .stand { display: block; padding: 0; font-size: 0.78rem; color: var(--grau); border: 0; }

/* ---------------------------------------------------------------- Termine */
.filter { display: flex; flex-wrap: wrap; align-items: end; gap: 0.5rem 2rem; margin-top: 2rem; }
.filter .feld { margin-top: 0; min-width: 16rem; }
.sammel { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 1rem; margin-top: 1.75rem; }
.monat { margin-top: 2.25rem; }
.terminliste { list-style: none; margin: 0.6rem 0 0; padding: 0; }
.termin-zeile { display: grid; grid-template-columns: 9.5rem minmax(0, 1fr) auto; grid-template-areas: "wann was stand" "wann aktionen aktionen";
  column-gap: 1.25rem; padding: 0.7rem 0; border-top: 1px solid var(--linie); align-items: baseline; }
.termin-zeile .wann { grid-area: wann; font-variant-numeric: tabular-nums; }
.termin-zeile .uhr { color: var(--grau); }
.termin-zeile .was { grid-area: was; }
.termin-zeile .stand { grid-area: stand; justify-self: end; }
.termin-zeile .aktionen { grid-area: aktionen; margin-top: 0.4rem; }
.serien .ruhig li { color: var(--tinte); }

/* ---------------------------------------------------------------- Redaktionsplan */
.kanal-liste ul { display: grid; grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr)); gap: 0 2rem; margin-top: 0.6rem; }
.woche-plan { margin-top: 2.25rem; }
.woche-plan.diese h2::after { content: " (diese Woche)"; color: var(--grau); font-size: 0.9rem; }
.plan { list-style: none; margin: 0.6rem 0 0; padding: 0; }
.plan-zeile button { display: grid; grid-template-columns: 6rem 12rem minmax(0, 1fr) auto; column-gap: 1.25rem; align-items: baseline; width: 100%;
  text-align: left; background: none; border: 0; border-top: 1px solid var(--linie); padding: 0.7rem 0; cursor: pointer; }
.plan-zeile button:hover .thema { text-decoration: underline; text-decoration-color: var(--ton); text-underline-offset: 0.2em; }
.plan-zeile .kanal { color: var(--grau); }
.plan-zeile .kern { display: block; color: var(--grau); font-style: italic; font-size: 0.92rem; }
.plan-zeile.ist-aus { opacity: 0.55; }

/* ---------------------------------------------------------------- Zitate, Fundus */
.zitat-liste, .fund-liste, .notiz-liste, .aufgaben-liste, .vorhaben-liste, .lauf-liste { list-style: none; margin: 0.6rem 0 0; padding: 0; }
.zitat-liste > li, .fund-liste > li, .notiz-liste > li { padding: 1.1rem 0; border-top: 1px solid var(--linie); }
blockquote { margin: 0; font-style: italic; font-weight: 300; color: var(--braun); font-size: 1.22rem; line-height: 1.45; max-width: 38rem; }
.quelle { color: var(--grau); margin-top: 0.3rem; }
.zitat-liste .tag { color: var(--grau); font-size: 0.9rem; }
.zitat-liste li.gilt .tag::before { content: ""; display: inline-block; width: 0.42rem; height: 0.42rem; border-radius: 50%; background: var(--ton); margin-right: 0.4rem; vertical-align: 0.12em; }
.fund .art { color: var(--grau); font-size: 0.9rem; margin-bottom: 0.35rem; }
.fund-text { max-width: 40rem; }
.original { white-space: pre-wrap; color: var(--grau); font-size: 0.95rem; max-width: 44rem; margin-top: 0.5rem; }
details summary { cursor: pointer; color: var(--grau); }
.notiz-liste summary .tag { color: var(--tinte); margin-right: 0.4rem; }

/* ---------------------------------------------------------------- Aufgaben, Vorhaben, Angebote */
.aufgaben-liste li { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 0.9rem; align-items: start; border-top: 1px solid var(--linie); padding: 0.7rem 0; }
.abhaken, .abgehakt { width: 1.05rem; height: 1.05rem; margin-top: 0.3rem; border: 1px solid var(--tinte); border-radius: 50%; background: transparent; cursor: pointer; padding: 0; }
.abhaken:hover { border-color: var(--ton); box-shadow: inset 0 0 0 0.24rem var(--papier); background: var(--ton); }
.abgehakt { display: inline-block; background: var(--strich); border-color: var(--strich); cursor: default; }
.zeile-knopf { display: block; width: 100%; text-align: left; background: none; border: 0; padding: 0; cursor: pointer; }
.zeile-knopf .titel { display: block; }
.zeile-knopf:hover .titel { text-decoration: underline; text-decoration-color: var(--ton); text-underline-offset: 0.2em; }
.zeile-knopf .hinweis, .zeile-knopf .wann { display: block; }
.ergebnis { display: block; font-style: italic; color: var(--grau); font-size: 0.92rem; }
.ueberfaellig .hinweis { color: var(--ton-text); }
.status-erledigt .titel, .status-verworfen .titel { color: var(--grau); }
.vorhaben-liste li { border-top: 1px solid var(--linie); padding: 0.7rem 0; }
.vorhaben-liste .wann { color: var(--braun); }
details.angebot { border-top: 1px solid var(--linie); padding: 0.75rem 0; }
details.angebot summary { display: flex; flex-wrap: wrap; gap: 0.2rem 1rem; align-items: baseline; color: var(--tinte); }
details.angebot summary .titel { font-size: 1.1rem; }
.angebot-form { max-width: 46rem; padding: 0.5rem 0 1rem; }
.angebot-form .knopf { margin-top: 1.25rem; }

/* ---------------------------------------------------------------- Läufe */
.laeufe-raster { display: grid; grid-template-columns: 19rem minmax(0, 1fr); gap: 3.5rem; margin-top: 2.25rem; align-items: start; }
.lauf-liste a { display: block; text-decoration: none; border-top: 1px solid var(--linie); padding: 0.65rem 0 0.65rem 1rem; position: relative; }
.lauf-liste a[aria-current]::before { content: ""; position: absolute; left: 0; top: 1.05rem; width: 0.36rem; height: 0.36rem; border-radius: 50%; background: var(--ton); }
.lauf-liste .titel, .lauf-liste .hinweis { display: block; }
.lauf-liste .zusammenfassung { display: block; font-style: italic; color: var(--braun); font-size: 0.92rem; margin-top: 0.2rem; }
.bericht { max-width: 44rem; }
.bericht h2 { font-size: 1.8rem; margin: 0.6rem 0 1rem; }
.bericht h3 { font-size: 1.25rem; font-weight: 400; margin: 1.75rem 0 0.4rem; }
.bericht h4 { font-size: 1.05rem; font-weight: 500; margin: 1.25rem 0 0.3rem; color: var(--tinte); }
.bericht p { margin: 0.6rem 0; }
.bericht ul, .bericht ol { padding-left: 1.2rem; margin: 0.5rem 0; }
.bericht li { margin: 0.25rem 0; }
.bericht li::marker { color: var(--strich); }
code { font-family: inherit; background: var(--flaeche); padding: 0 0.25rem; border-radius: var(--rund); }

/* ---------------------------------------------------------------- Dialog und Rückmeldung */
dialog { width: min(40rem, calc(100vw - 2rem)); max-height: calc(100vh - 2rem); padding: 0; border: 1px solid var(--linie); border-radius: var(--rund);
  background: var(--papier); color: var(--tinte); }
dialog.breit { width: min(58rem, calc(100vw - 2rem)); }
dialog::backdrop { background: rgba(74, 69, 65, 0.38); }
.dialog-formular { padding: 1.75rem clamp(1.25rem, 3vw, 2.25rem) 1.5rem; }
.dialog-formular h2 { font-size: 1.5rem; }
.dialog-formular blockquote { margin-top: 1rem; }
.dialog-inhalt > .hinweis { margin-top: 0.9rem; }
.dialog-knoepfe { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-top: 1.75rem; position: sticky; bottom: 0; background: var(--papier); padding-top: 0.75rem; }
.meldung { position: fixed; left: 50%; bottom: 1.5rem; translate: -50% 0; z-index: 20; max-width: calc(100vw - 2rem); padding: 0.75rem 1.2rem;
  background: var(--tinte); color: var(--papier); border-radius: var(--rund); transition: opacity 0.6s; }
.meldung.fehler { background: var(--ton-text); }
.meldung.weg { opacity: 0; }

/* ---------------------------------------------------------------- Schmale Bildschirme */
@media (max-width: 1080px) {
  .lage-raster, .laeufe-raster { grid-template-columns: minmax(0, 1fr); gap: 3rem; }
}
@media (max-width: 860px) {
  .rahmen { grid-template-columns: minmax(0, 1fr); background: none; }
  .leiste { position: sticky; top: 0; z-index: 5; height: auto; flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: space-between;
    padding: 0.8rem 1.25rem; border-right: 0; border-bottom: 1px solid var(--linie); background: var(--papier); }
  .menue { display: inline-block; background: none; border: 1px solid color-mix(in srgb, var(--tinte) 45%, transparent); border-radius: var(--rund); padding: 0.35rem 0.8rem; cursor: pointer; }
  .leiste ul { display: none; width: 100%; margin-top: 0.6rem; }
  .menue[aria-expanded="true"] + ul { display: block; }
  .wer { display: none; }
  .menue[aria-expanded="true"] ~ .wer { display: block; width: 100%; padding-top: 0.8rem; }
  main#inhalt { padding-top: 1.75rem; }
  .tagreihe { grid-template-columns: minmax(0, 1fr); }
  .kal-tag { min-height: 0; display: grid; grid-template-columns: 4.5rem minmax(0, 1fr); column-gap: 0.75rem; }
  .kal-tag ul { margin-top: 0; }
  .kal-tag:not(:has(ul)):not(.heute):not(.horizont) { display: none; }
  .kal-tag.horizont { border-right: 0; border-bottom: 1px dashed var(--ton); }
  .termin-zeile { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "wann stand" "was was" "aktionen aktionen"; }
  .plan-zeile button { grid-template-columns: minmax(0, 1fr) auto; }
  .plan-zeile .tag { grid-column: 1; }
  .plan-zeile .kanal { grid-column: 1; }
  .plan-zeile .thema { grid-column: 1 / -1; }
  .plan-zeile .stand { grid-column: 2; grid-row: 1; }
  .zwei { grid-template-columns: minmax(0, 1fr); }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; }
}