:root { color-scheme: light; font: 16px/1.55 system-ui, sans-serif; color: #172b33; background: #f3f5f4; }
* { box-sizing: border-box; }
body { margin: 0; }
main { max-width: 1600px; margin: auto; padding: 40px; }
h1, h2, h3 { line-height: 1.2; }
a { color: #006c67; text-underline-offset: 3px; }
button, input, select, textarea { font: inherit; border-radius: 6px; }
input, select, textarea { border: 1px solid #a3b4b7; padding: 10px; background: white; color: inherit; }
button { border: 0; padding: 10px 18px; color: white; background: #006c67; cursor: pointer; }
button:hover { background: #00504c; }
:focus-visible { outline: 3px solid #b35c08; outline-offset: 3px; }
label { display: block; font-weight: 600; }
.rubrik { color: #006c67; font-weight: 700; letter-spacing: .04em; }
.anmeldung { max-width: 550px; margin: 9vh auto; padding: 40px; background: white; border: 1px solid #dbe4e1; border-radius: 14px; }
.anmeldung form { display: grid; gap: 12px; }
.meldung { padding: 12px; border-left: 3px solid #a92c2c; background: #fff1ee; }
body:has(.seitenkopf) { min-width: 1100px; }
section { scroll-margin-top: 24px; }
.seitenkopf { display: flex; justify-content: space-between; align-items: start; gap: 36px; }
.seitenkopf h1 { max-width: 900px; font-size: 30px; margin: 10px 0 16px; }
.seitenkopf .rubrik { margin: 0; }
.konto { display: grid; justify-items: end; gap: 12px; white-space: nowrap; }
.datenstand, .leer, time { font-size: 14px; color: #53676e; }
nav { display: flex; gap: 28px; margin: 25px 0; padding-bottom: 18px; border-bottom: 1px solid #ccd9d5; }
nav a { font-weight: 600; text-decoration: none; }
.zaehler { padding: 18px 22px; border-left: 4px solid #00796e; border-radius: 0 8px 8px 0; background: #dfeee8; font-weight: 650; }
section > h2, .abschnittskopf > h2 { font-size: 23px; margin: 0 0 22px; }
#fragen { margin-top: 36px; }
.frage, .einzelheiten, #machbarkeit, .lesetext { background: white; padding: 24px; border: 1px solid #d9e2de; border-radius: 10px; }
.frage { margin-bottom: 14px; }
.frage h3 { margin: 0; font-size: 18px; white-space: pre-line; }
.abschnittskopf { display: flex; align-items: baseline; justify-content: space-between; gap: 20px; }
.abschnittskopf form { flex-shrink: 0; }
.fragenummer { color: #006c67; margin-right: 8px; }
.nebensache { background: #e7eeeb; color: #1b514a; font-size: 14px; }
.nebensache:hover { background: #d4e1db; }
.kommentarliste { list-style: none; padding: 0; margin: 20px 0; }
.kommentar { padding: 14px 0; border-top: 1px solid #e1e8e5; }
.kommentarkopf { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; font-size: 14px; }
.kommentartext { white-space: pre-wrap; overflow-wrap: anywhere; margin: 7px 0 0; }
.kommentarformular { display: grid; grid-template-columns: 1fr auto; align-items: end; gap: 8px 14px; }
.kommentarformular label { grid-column: 1 / -1; font-size: 14px; }
textarea { width: 100%; min-height: 68px; resize: vertical; }
.neu, .hinweis, .anzahl, .ampel { display: inline-block; border-radius: 5px; font-size: 12px; padding: 2px 7px; font-weight: 650; }
.neu { color: #174c82; background: #e1edff; margin-left: 5px; }
.hinweis { color: #6c4500; background: #fff0cc; margin-top: 5px; }
.anzahl { color: #53676e; background: #e1e8e5; vertical-align: middle; }
details { margin: 20px 0 38px; }
summary { cursor: pointer; padding: 12px 0; font-weight: 650; }
.vorschlagsbereich { margin: 36px 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px; align-items: start; }
.mit-einzelheiten { grid-template-columns: minmax(0, 1.65fr) minmax(330px, 1fr); }
.tabellenrahmen { overflow-x: auto; border: 1px solid #d9e2de; border-radius: 8px; background: white; }
table { border-collapse: collapse; width: 100%; text-align: left; font-size: 14px; }
th, td { padding: 14px 12px; vertical-align: top; border-bottom: 1px solid #e1e8e5; }
thead { background: #eaf0ed; }
tbody tr:last-child > * { border-bottom: none; }
.vorschlaege td a { display: block; text-decoration: none; color: inherit; }
.vorschlaege th a { white-space: nowrap; text-decoration: none; }
.vorschlaege tbody tr:hover, .vorschlaege .ausgewaehlt { background: #eaf5f0; }
.einzelheiten h2 { font-size: 22px; margin-top: 8px; }
.einzelheiten dt { font-size: 13px; font-weight: 700; color: #53676e; }
.einzelheiten dd { margin: 2px 0 15px; white-space: pre-wrap; overflow-wrap: anywhere; }
.einzelheiten .kommentarformular { grid-template-columns: 1fr; }
.einzelheiten .kommentarformular button { justify-self: start; }
#machbarkeit, .lesetext { margin: 32px 0; }
.passt { color: #1b6248; background: #e0f0e5; }
.ausweichen { color: #863b0b; background: #ffe8d5; }
.belegungszahl { margin-right: 10px; font-size: 20px; }
.machbarkeit td { width: 40%; }
.machbarkeit small { display: block; margin-top: 6px; color: #53676e; }
.datum { display: block; font-weight: 400; }
.planungslisten { display: grid; grid-template-columns: 145px 1fr; gap: 8px 16px; }
.planungslisten dt { font-weight: 650; }
.planungslisten dd { margin: 0; }
.markdown { max-width: 85ch; overflow-wrap: anywhere; }
.markdown h1, .markdown h2, .markdown h3 { font-size: 18px; }