/* Uri, Block 1: schlichtes Aussehen (Tannengrün und Gold aus der Werkstatt). Das Pixelart-Zimmer kommt in Block 3. Rechner zuerst, Handy bedienbar. */
:root {
  --dunkel: #08110d; --stein: #0f1c16; --stein-2: #172a21; --moos: #2c4a35; --moos-hell: #4d7556;
  --gold: #e6c46c; --kerze: #f2d27a; --text: #efe5c8; --text-matt: #aaa184;
  --z: 3; --u: calc(var(--z) * 1px); --fehler: #e2877a; --ok: #9fd18a; --warn: #e6a35c; --urlaub: #5aa3c4; --krank: #c4708a; --frei: #8f8fd0;
}
* { box-sizing: border-box; }
body { margin: 0; min-height: 100vh; background: var(--dunkel) linear-gradient(180deg, #14281e, var(--dunkel) 70%) no-repeat; color: var(--text); font: 16px/1.5 system-ui, -apple-system, "Segoe UI", sans-serif; }
a { color: var(--kerze); }
h1 { color: var(--gold); font-size: 1.5rem; margin: 0 0 .75rem; }
h2 { color: var(--gold); font-size: 1.05rem; margin: 0 0 .5rem; }
h3 { color: var(--text-matt); font-size: .95rem; margin: 1rem 0 .4rem; }
.seite { max-width: 72rem; margin: 0 auto; padding: 1.25rem 1rem 3rem; display: flex; flex-direction: column; gap: 1.25rem; }
.kopf { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 1.5rem; padding: .6rem 1rem; background: var(--stein); border-bottom: 1px solid var(--moos-hell); }
.kopf .marke { color: var(--gold); font-weight: 700; font-size: 1.2rem; text-decoration: none; }
.kopf nav { display: flex; gap: 1.25rem; flex: 1; }
.kopf nav a { text-decoration: none; }
.titel { color: var(--gold); font-size: 1.6rem; margin: 0 0 1.25rem; }
.karte { background: var(--stein); border: 1px solid var(--moos-hell); border-radius: 6px; padding: 1.1rem; display: flex; flex-direction: column; gap: .6rem; }
.karte p { margin: 0; }
.matt { color: var(--text-matt); }
.fehler { color: var(--fehler); margin: 0; }
.hinweis { background: var(--stein-2); border-left: 3px solid var(--gold); padding: .5rem .75rem; margin: 0 0 .75rem; }
.meldung { margin: 0; padding: .6rem .9rem; border-radius: 4px; border: 1px solid; }
.ok-box { background: #14301f; border-color: var(--ok); color: var(--ok); }
.fehler-box { background: #3a1a17; border-color: var(--fehler); color: var(--fehler); }
label { color: var(--text-matt); display: flex; flex-direction: column; gap: .25rem; }
input[type=text], input[type=date], input[type=password] { background: var(--dunkel); color: var(--text); border: 1px solid var(--moos-hell); border-radius: 4px; padding: .55rem; font: inherit; }
button { background: var(--gold); color: var(--dunkel); border: 0; border-radius: 4px; padding: .55rem .9rem; font: inherit; font-weight: 600; cursor: pointer; }
button:hover:not(:disabled) { background: var(--kerze); }
button:disabled { opacity: .4; cursor: not-allowed; }
button.leise { background: transparent; color: var(--text-matt); border: 1px solid var(--moos-hell); }
button.an { background: var(--moos-hell); color: var(--text); }
button.zweit { background: var(--moos); color: var(--text); }
button.klein { padding: .25rem .6rem; font-weight: 400; }
button.gross { font-size: 1.15rem; padding: .8rem 1.6rem; min-width: 8rem; }
button:focus-visible, input:focus-visible, a:focus-visible { outline: 2px solid var(--kerze); outline-offset: 2px; }
form { margin: 0; }
.spalte { display: flex; flex-direction: column; gap: .75rem; max-width: 22rem; }
.zeile { display: flex; flex-wrap: wrap; gap: .75rem; align-items: flex-end; }
.liste { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .4rem; }
.liste li { display: flex; align-items: center; gap: .75rem; flex-wrap: wrap; }
.liste li > span { flex: 1; }

/* Uhr */
.uhrblock { display: flex; flex-direction: column; align-items: center; gap: .5rem; padding: 1rem 0; }
.uhr { font-size: clamp(3.5rem, 12vw, 7rem); font-weight: 700; color: var(--kerze); font-variant-numeric: tabular-nums; letter-spacing: .03em; line-height: 1.1; }
.datum, .laeuft { margin: 0; color: var(--text-matt); font-size: 1.05rem; }
.laeuft b { color: var(--text); font-variant-numeric: tabular-nums; }
.knoepfe { display: flex; flex-wrap: wrap; gap: .75rem; justify-content: center; margin-top: .5rem; }
.ort { display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; }
.klein-reihe { justify-content: flex-start; }

/* Budget */
.budgets { display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: 1rem; }
.gross-zahl { font-size: 1.6rem; font-weight: 700; color: var(--text); font-variant-numeric: tabular-nums; margin: 0; }
.gross-zahl .matt { font-size: 1rem; font-weight: 400; }
.balken { position: relative; height: .9rem; background: var(--dunkel); border: 1px solid var(--moos-hell); border-radius: 3px; overflow: hidden; }
.balken .fuell { height: 100%; background: var(--moos-hell); }
.balken .fuell.voll { background: var(--ok); }
.balken .soll-marke { position: absolute; top: 0; bottom: 0; width: 2px; background: var(--gold); }

@media (max-width: 40rem) {
  button.gross { min-width: 6.5rem; padding: .7rem 1rem; }
}

/* Startseite: das Zimmer, ganzzahlig vergrößert (--z wird per Skript gesetzt) */
body:has(.kbuehne) { background: #120d14; overflow: hidden; }
body:has(.kbuehne) .seite { max-width: none; padding: 0; gap: 0; }
.zimmer { --u: calc(var(--z) * 1px); position: relative; width: calc(320 * var(--u)); height: calc(182 * var(--u)); flex: none; z-index: 1; box-shadow: 0 0 calc(14 * var(--u)) calc(3 * var(--u)) rgba(8, 5, 10, .65); }
.zimmer .ebene { position: absolute; inset: 0; width: 100%; height: 100%; image-rendering: pixelated; display: block; }
.zimmer .teil { position: absolute; image-rendering: pixelated; pointer-events: none; }
.treffer { position: absolute; margin: 0; padding: 0; }
.treffer button, .treffer.ding { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; padding: 0; border: 0; background: transparent; cursor: pointer; border-radius: 0; }
.treffer.ding { display: block; }
.treffer .an { position: absolute; inset: 0; width: 100%; height: 100%; image-rendering: pixelated; visibility: hidden; pointer-events: none; }
.treffer .an.dauer, .treffer.knopf:has(button:active) .an, .treffer.taste:has(button:active) .an { visibility: visible; }
.treffer .aus-bild { position: absolute; inset: 0; width: 100%; height: 100%; image-rendering: pixelated; pointer-events: none; }
.treffer button:disabled { cursor: not-allowed; }
.treffer button:hover:not(:disabled), .treffer.ding:hover { outline: 2px solid rgba(255, 226, 168, .9); outline-offset: 1px; }
.treffer button:focus-visible, .treffer.ding:focus-visible { outline: 3px solid #ffe2a8; outline-offset: 2px; }
.zettel { position: absolute; left: 50%; top: 1.5%; transform: translateX(-50%); margin: 0; padding: .4rem .9rem; background: #321e26; color: #ffe2a8; border: 2px solid #f9b66b; font: 600 .95rem/1.3 system-ui, sans-serif; max-width: 80%; text-align: center; z-index: 5; }
.zettel.fehler { border-color: #e2877a; color: #ffd6cf; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Kalender im Vollbild: das Zimmer als ruhiger Hintergrund, das Blatt ganzzahlig vergrößert (--z) */
@font-face { font-family: "Pixelify Sans"; src: url("/static/fonts/PixelifySans.ttf") format("truetype"); font-weight: 400 700; font-display: swap; }
@font-face { font-family: "VT323"; src: url("/static/fonts/VT323.ttf") format("truetype"); font-display: swap; }
.kbuehne { position: fixed; inset: 0; overflow: hidden; display: flex; align-items: center; justify-content: center; background: #120d14; }
.rand { position: fixed; inset: -4%; background-size: cover; background-position: center; filter: blur(14px) brightness(.5) saturate(1.1); }
.kzimmer { --u: calc(var(--z) * 1px); z-index: 1; box-shadow: 0 0 calc(14 * var(--u)) calc(3 * var(--u)) rgba(8, 5, 10, .65); position: relative; width: calc(320 * var(--u)); height: calc(182 * var(--u)); flex: none; align-self: center; font-family: "Pixelify Sans", "VT323", monospace; color: #18151a;
  background: #120d14 url("/static/zimmer/hintergrund.png") center / 100% 100% no-repeat; image-rendering: pixelated; }
.blatt { position: absolute; left: calc(10 * var(--u)); top: calc(9 * var(--u)); width: calc(300 * var(--u)); height: calc(166 * var(--u)); background: #e5d2bc;
  box-shadow: 0 0 0 var(--u) #1a1214, calc(3 * var(--u)) calc(3 * var(--u)) 0 var(--u) rgba(10, 6, 14, .55); display: flex; flex-direction: column; }
.ringe { position: absolute; left: 0; right: 0; top: calc(-8 * var(--u)); display: flex; justify-content: space-around; padding: 0 calc(16 * var(--u)); pointer-events: none; z-index: 3; }
.ringe img { height: calc(11 * var(--u)); width: auto; image-rendering: pixelated; }
.kkopf { display: flex; align-items: center; gap: calc(6 * var(--u)); height: calc(18 * var(--u)); padding: calc(3 * var(--u)) calc(8 * var(--u)) 0; background: #ce8158; border-bottom: var(--u) solid #1a1214; flex: none; }
.kkopf h1 { margin: 0; flex: 1; text-align: center; font: 700 calc(11 * var(--u))/1 "Pixelify Sans", monospace; color: #18151a; letter-spacing: var(--u); text-transform: uppercase; }
.kkopf a { color: #18151a; text-decoration: none; font: 600 calc(6.5 * var(--u))/1 "Pixelify Sans", monospace; padding: calc(2 * var(--u)) calc(4 * var(--u)); background: #f0c79a; box-shadow: 0 0 0 var(--u) #1a1214; }
.kkopf a:hover, .kkopf a:focus-visible { background: #ffe2a8; outline: none; }
.kkopf .pfeil { padding: calc(1 * var(--u)) calc(3 * var(--u)); display: flex; }
.kkopf .pfeil img { height: calc(10 * var(--u)); width: auto; image-rendering: pixelated; }
.kzettel { position: absolute; left: 50%; top: calc(20 * var(--u)); transform: translateX(-50%); margin: 0; padding: calc(3 * var(--u)) calc(8 * var(--u)); background: #321e26; color: #ffe2a8; box-shadow: 0 0 0 var(--u) #f9b66b; font: 600 calc(6.5 * var(--u))/1.2 "Pixelify Sans", monospace; z-index: 5; }
.kzettel.fehler { box-shadow: 0 0 0 var(--u) #e2877a; color: #ffd6cf; }
.kalender { display: grid; grid-template-columns: repeat(7, 1fr); grid-auto-rows: 1fr; gap: var(--u); padding: calc(3 * var(--u)) calc(5 * var(--u)) 0; flex: 1; min-height: 0; }
.kopfzelle { display: block; text-align: center; font: 600 calc(6 * var(--u))/1 "Pixelify Sans", monospace; color: #5b4a3e; padding-top: calc(2 * var(--u)); }
.kalender .kopfzelle { grid-row: 1; }
.kalender { grid-template-rows: calc(9 * var(--u)) repeat(6, 1fr); }
.kachel { position: relative; background: #cbbaa1; box-shadow: 0 0 0 var(--u) #8a726d inset; padding: calc(2 * var(--u)) calc(3 * var(--u)); display: flex; flex-direction: column; min-width: 0; overflow: hidden; }
.kachel.leer { background: transparent; box-shadow: none; }
.kachelkopf { display: flex; justify-content: space-between; align-items: baseline; position: relative; z-index: 1; }
.kachel .nr { font: 700 calc(7 * var(--u))/1 "Pixelify Sans", monospace; color: #18151a; text-decoration: none; }
.kachel .nr:hover, .kachel .nr:focus-visible { text-decoration: underline; outline: none; }
.kachel .ist { font: 400 calc(7 * var(--u))/1 "VT323", monospace; color: #18151a; }
.kachel .symbol { position: absolute; inset: calc(7 * var(--u)) 0 calc(8 * var(--u)) 0; display: flex; align-items: center; justify-content: center; pointer-events: none; }
.kachel .symbol img { height: calc(10 * var(--u)); width: auto; image-rendering: pixelated; }
.kachel .notiz { margin-top: auto; display: flex; justify-content: space-between; align-items: flex-end; gap: var(--u); position: relative; z-index: 1; }
.kachel .fname { font: 400 calc(4.5 * var(--u))/1 "VT323", monospace; color: #3a2f42; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }
.ortmarke { background: #4a79b8; color: #fff7e6; font: 700 calc(5 * var(--u))/1 "Pixelify Sans", monospace; padding: var(--u) calc(2 * var(--u)); margin-left: auto; box-shadow: 0 0 0 var(--u) #1a1214; }
.kachelknoepfe { position: absolute; left: 0; right: 0; bottom: 0; display: none; gap: var(--u); padding: var(--u); background: rgba(26, 18, 20, .86); z-index: 2; justify-content: space-between; }
.kachel:hover .kachelknoepfe, .kachel:focus-within .kachelknoepfe { display: flex; }
.kachelknoepfe form { margin: 0; flex: 1 1 0; display: flex; min-width: 0; }
.kachelknoepfe button { flex: 1; min-width: 0; overflow: hidden; display: flex; align-items: center; justify-content: center; padding: 0; height: calc(8 * var(--u)); background: #3a2f42; border: 0; cursor: pointer; box-shadow: 0 0 0 var(--u) #5b4a6a inset; color: #ffe2a8; font: 700 calc(6 * var(--u))/1 "Pixelify Sans", monospace; }
.kachelknoepfe button img { max-width: 100%; max-height: calc(6 * var(--u)); width: auto; height: auto; image-rendering: pixelated; }
.kachelknoepfe button:hover, .kachelknoepfe button:focus-visible { background: #5b4a6a; outline: none; }
.kachelknoepfe button.an { background: #6b8a52; }
.kachel.heute { box-shadow: 0 0 0 calc(2 * var(--u)) #f2d27a inset; }
.kachel.mit { background: #8cc27a; }
.kachel.fehlt { background: #e0a05a; }
.kachel.urlaub { background: #7ab4d4; }
.kachel.krank { background: #d88a9c; }
.kachel.frei, .kachel.feiertag { background: #a8a8e0; }
.kachel.wochenende, .kachel.vorher { background: #9a8a80; }
.kachel.vorher .nr, .kachel.wochenende .nr { color: #4a3f48; }
.kachel.offen { background: #cbbaa1; }
.summe { margin: 0; padding: calc(2 * var(--u)) calc(6 * var(--u)) 0; font: 400 calc(7 * var(--u))/1 "VT323", monospace; flex: none; }
.legende { display: flex; gap: calc(4 * var(--u)); list-style: none; margin: 0; padding: calc(2 * var(--u)) calc(6 * var(--u)) calc(3 * var(--u)); flex: none; font: 400 calc(5.5 * var(--u))/1 "VT323", monospace; flex-wrap: nowrap; }
.legende li { padding: var(--u) calc(3 * var(--u)); box-shadow: 0 0 0 var(--u) #1a1214; border: 0; border-radius: 0; }
.legende .mit { background: #8cc27a; } .legende .fehlt { background: #e0a05a; } .legende .urlaub { background: #7ab4d4; } .legende .krank { background: #d88a9c; }
.legende .frei { background: #a8a8e0; } .legende .wochenende { background: #9a8a80; }

/* Budget im Zimmer-Stil: Klemmbrett mit Zellenbalken, Pflanze (wächst mit dem Monat) und Goldglas (Stundenkonto) stehen auf dem Tisch */
.kzimmer.bild-budget { background-image: url("/static/zimmer/budget-zimmer.png"); }
.lage { position: absolute; inset: 0; width: 100%; height: 100%; image-rendering: pixelated; pointer-events: none; }
.klemm { position: absolute; left: calc(100 * var(--u)); top: calc(12 * var(--u)); width: calc(150 * var(--u)); background: #e5d2bc; display: flex; flex-direction: column; padding-bottom: calc(3 * var(--u));
  box-shadow: 0 0 0 var(--u) #1a1214, calc(3 * var(--u)) calc(3 * var(--u)) 0 var(--u) rgba(10, 6, 14, .55); }
.klammer { position: absolute; left: 50%; top: calc(-5 * var(--u)); width: calc(28 * var(--u)); height: calc(8 * var(--u)); transform: translateX(-50%); background: #8a8f98; z-index: 3;
  box-shadow: 0 0 0 var(--u) #1a1214, inset 0 calc(2 * var(--u)) 0 #c5cad2, inset 0 calc(-2 * var(--u)) 0 #5e636c; }
.bzeile { padding: calc(3 * var(--u)) calc(8 * var(--u)) 0; display: flex; flex-direction: column; gap: calc(2 * var(--u)); }
.bkopf { display: flex; justify-content: space-between; align-items: baseline; gap: calc(4 * var(--u)); }
.bkopf h2 { margin: 0; font: 700 calc(6.5 * var(--u))/1 "Pixelify Sans", monospace; color: #18151a; text-transform: uppercase; letter-spacing: var(--u); }
.bkopf .zahl { margin: 0; font: 400 calc(9 * var(--u))/1 "VT323", monospace; color: #18151a; }
.bkopf .matt { color: #5b4a3e; }
.bbalken { display: flex; align-items: center; justify-content: space-between; }
.zellen { position: relative; width: calc(100 * var(--u)); height: calc(5 * var(--u)); flex: none;
  background: repeating-linear-gradient(90deg, #b9a58c 0 calc(4 * var(--u)), transparent calc(4 * var(--u)) calc(5 * var(--u))); }
.zellen::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: calc(var(--n) * 5 * var(--u));
  background: repeating-linear-gradient(90deg, #4f9a62 0 calc(4 * var(--u)), transparent calc(4 * var(--u)) calc(5 * var(--u))); }
.zellen.voll::before { background: repeating-linear-gradient(90deg, #d9a93a 0 calc(4 * var(--u)), transparent calc(4 * var(--u)) calc(5 * var(--u))); }
.sollmarke { position: absolute; left: calc(var(--m) * 5 * var(--u) - var(--u)); top: calc(-2 * var(--u)); width: calc(2 * var(--u)); height: calc(9 * var(--u)); background: #1a1214; z-index: 1; }
.prozent { font: 400 calc(8 * var(--u))/1 "VT323", monospace; color: #18151a; }
.klein { margin: 0; font: 400 calc(5.5 * var(--u))/1 "VT323", monospace; color: #5b4a3e; }
.kontozettel { position: absolute; left: calc(138 * var(--u)); top: calc(126 * var(--u)); width: calc(104 * var(--u)); background: #e5d2bc; padding: calc(3 * var(--u)) calc(5 * var(--u)) calc(4 * var(--u)); display: flex; flex-direction: column; gap: calc(2 * var(--u));
  box-shadow: 0 0 0 var(--u) #1a1214, calc(3 * var(--u)) calc(3 * var(--u)) 0 var(--u) rgba(10, 6, 14, .55); }
.kontozettel h2 { margin: 0; font: 700 calc(6.5 * var(--u))/1 "Pixelify Sans", monospace; color: #18151a; text-transform: uppercase; letter-spacing: var(--u); }
.kontozettel .gross { margin: 0; font: 400 calc(15 * var(--u))/1 "VT323", monospace; color: #18151a; }
.klemm.halb { left: calc(150 * var(--u)); top: calc(24 * var(--u)); width: calc(150 * var(--u)); }
.klemm .text { margin: 0; font: 400 calc(8 * var(--u))/1.15 "VT323", monospace; color: #18151a; }
.klemm .bzeile { padding-bottom: calc(2 * var(--u)); gap: calc(3 * var(--u)); }

/* Tag und Einstellungen im Zimmer-Stil: Klemmbrett mit Pixelknöpfen und Eingabefeldern */
.klemm.breit { left: calc(10 * var(--u)); top: calc(12 * var(--u)); width: calc(300 * var(--u)); }
.klemm.links-oben { left: calc(14 * var(--u)); top: calc(12 * var(--u)); width: calc(190 * var(--u)); }
.klemm h2 { margin: 0; font: 700 calc(6 * var(--u))/1 "Pixelify Sans", monospace; color: #5b4a3e; text-transform: uppercase; letter-spacing: var(--u); }
.klemm .abschnitt { color: #18151a; font-size: calc(6.5 * var(--u)); }
.klemm .kzettel { top: calc(21 * var(--u)); }
.tagkopf { padding: calc(3 * var(--u)) calc(8 * var(--u)) 0; display: flex; align-items: baseline; gap: calc(6 * var(--u)); flex-wrap: wrap; }
.tagkopf .zahl { margin: 0; font: 400 calc(11 * var(--u))/1 "VT323", monospace; color: #18151a; }
.tagkopf .matt { color: #5b4a3e; font-size: calc(8 * var(--u)); }
.spalten { display: flex; gap: calc(8 * var(--u)); padding: calc(3 * var(--u)) calc(8 * var(--u)) 0; align-items: flex-start; }
.spalten .links { flex: none; width: calc(150 * var(--u)); display: flex; flex-direction: column; gap: calc(3 * var(--u)); }
.spalten .rechts { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: calc(3 * var(--u)); }
.pzeile { display: flex; flex-wrap: wrap; gap: calc(2 * var(--u)); align-items: center; font: 400 calc(7 * var(--u))/1 "VT323", monospace; color: #18151a; }
.pzeile .matt { color: #5b4a3e; }
.pknopf { display: inline-flex; align-items: center; justify-content: center; gap: calc(2 * var(--u)); height: calc(10 * var(--u)); padding: 0 calc(4 * var(--u)); background: #3a2f42; color: #ffe2a8; border: 0; border-radius: 0; cursor: pointer;
  box-shadow: 0 0 0 var(--u) #1a1214, inset 0 0 0 var(--u) #5b4a6a; font: 700 calc(6 * var(--u))/1 "Pixelify Sans", monospace; }
.pknopf:hover:not(:disabled) { background: #4d3f58; color: #fff3cf; }
.pknopf.an { background: #8a6d2a; color: #fff3cf; box-shadow: 0 0 0 var(--u) #1a1214, inset 0 0 0 var(--u) #f2d27a; }
.pknopf.leise { background: transparent; color: #3a2f42; box-shadow: 0 0 0 var(--u) #8a726d; }
.pknopf.leise:hover:not(:disabled) { background: #cbbaa1; color: #18151a; }
.pknopf:disabled { opacity: .4; cursor: not-allowed; }
.pknopf:focus-visible, .klemm input:focus-visible { outline: calc(2 * var(--u)) solid #f2d27a; outline-offset: var(--u); }
.pknopf img { height: calc(6 * var(--u)); width: auto; image-rendering: pixelated; }
.klemm label { display: inline-flex; flex-direction: row; align-items: center; gap: calc(2 * var(--u)); color: #18151a; font: inherit; }
.klemm input[type=text], .klemm input[type=date] { background: #f3e6d3; color: #18151a; border: 0; border-radius: 0; height: calc(10 * var(--u)); padding: 0 calc(2 * var(--u)); font: 400 calc(8 * var(--u))/1 "VT323", monospace;
  box-shadow: 0 0 0 var(--u) #1a1214, inset var(--u) var(--u) 0 #d9c7ad; width: calc(32 * var(--u)); min-width: 0; }
.klemm input[type=date] { width: calc(72 * var(--u)); }
.klemm.links-oben form { flex-direction: column; align-items: flex-start; }
.klemm.links-oben label { width: 100%; justify-content: space-between; }
.von-hand { gap: calc(4 * var(--u)); }
.pliste { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: calc(2 * var(--u)); max-height: calc(78 * var(--u)); overflow-y: auto; }
.pliste li { display: flex; align-items: center; gap: calc(3 * var(--u)); font: 400 calc(7 * var(--u))/1.1 "VT323", monospace; color: #18151a; }
.pliste li > span { flex: 1; min-width: 0; }
.pliste .matt { color: #5b4a3e; font-size: calc(5.5 * var(--u)); }
.pliste b { font-weight: 400; font-size: calc(8 * var(--u)); }
.klemm.breit .kkopf h1 { font-family: "VT323", monospace; font-weight: 400; font-size: calc(14 * var(--u)); }
.klemm.links-oben .text { font-size: calc(7 * var(--u)); }
.klemm.links-oben input[type=text] { width: calc(72 * var(--u)); }

/* Kopfleiste: Zurück links, Ausklappmenü rechts (immer in Bildschirmgröße, damit man gut trifft) */
.kopfleiste { position: fixed; z-index: 50; top: max(10px, env(safe-area-inset-top, 0px)); left: max(10px, env(safe-area-inset-left, 0px)); right: max(10px, env(safe-area-inset-right, 0px)); display: flex; justify-content: space-between; align-items: flex-start; pointer-events: none; font-family: "Pixelify Sans", "VT323", monospace; }
.kopfleiste > * { pointer-events: auto; }
.zurueck-fest, .menue summary { display: flex; align-items: center; gap: calc(2 * var(--u)); height: max(44px, calc(8 * var(--u))); padding: 0 max(14px, calc(3 * var(--u))); background: #f0c79a; color: #18151a; text-decoration: none; cursor: pointer; list-style: none;
  box-shadow: 0 0 0 3px #1a1214, 4px 4px 0 3px rgba(10, 6, 14, .55); font: 700 max(18px, calc(4.5 * var(--u)))/1 "Pixelify Sans", monospace; image-rendering: pixelated; }
.zurueck-fest img { height: max(20px, calc(4.5 * var(--u))); width: auto; image-rendering: pixelated; }
.zurueck-fest:hover, .menue summary:hover, .menue[open] summary { background: #ffe2a8; }
.zurueck-fest:focus-visible, .menue summary:focus-visible { outline: 3px solid #fff3cf; outline-offset: 5px; }
.menue { position: relative; margin-left: auto; }
.menue summary::-webkit-details-marker { display: none; }
.menue summary { width: max(48px, calc(9 * var(--u))); padding: 0; justify-content: center; background: #ce8158; }
.striche { width: max(24px, calc(4.5 * var(--u))); height: max(20px, calc(4 * var(--u))); background: linear-gradient(#18151a 0 0) 0 0 / 100% 20% no-repeat, linear-gradient(#18151a 0 0) 0 50% / 100% 20% no-repeat, linear-gradient(#18151a 0 0) 0 100% / 100% 20% no-repeat; }
.menue nav { position: absolute; top: calc(max(44px, 8 * var(--u)) + 12px); right: 0; width: max(230px, calc(48 * var(--u))); display: flex; flex-direction: column; background: #e5d2bc; box-shadow: 0 0 0 3px #1a1214, 4px 4px 0 3px rgba(10, 6, 14, .55); }
.menue nav a, .menue nav button { display: block; width: 100%; text-align: left; padding: max(12px, calc(2.5 * var(--u))) max(16px, calc(3.5 * var(--u))); color: #18151a; text-decoration: none; background: transparent; border: 0; border-radius: 0; cursor: pointer; font: 700 max(18px, calc(4.5 * var(--u)))/1 "Pixelify Sans", monospace; }
.menue nav a:hover, .menue nav button:hover, .menue nav a:focus-visible, .menue nav button:focus-visible { background: #ce8158; outline: 0; }
.menue nav form { border-top: 3px solid #1a1214; }

/* Tag leeren: erst fragen, dann löschen */
.sicher { margin-top: calc(3 * var(--u)); }
.sicher summary { list-style: none; cursor: pointer; display: inline-flex; }
.sicher summary::-webkit-details-marker { display: none; }
.sicher form { display: flex; flex-direction: column; align-items: flex-start; gap: calc(2 * var(--u)); margin-top: calc(2 * var(--u)); }

/* Handy hochkant (html.schmal, gesetzt von buehne.js): Startseite zum seitlichen Verschieben, Unterseiten als Seiten zum Scrollen (--u fest, Teile untereinander) */
.dekoreihe { display: none; }
html.schmal .kbuehne:has(.zimmer) { overflow-x: auto; overflow-y: hidden; justify-content: flex-start; scrollbar-width: none; touch-action: pan-x; }
html.schmal .kbuehne:has(.zimmer)::-webkit-scrollbar { display: none; }
html.schmal .zimmer { margin: auto; }
html.schmal .zettel { position: fixed; top: calc(max(44px, 8 * var(--u)) + 24px); }
html.schmal .kbuehne:has(.kzimmer) { display: block; overflow-x: hidden; overflow-y: auto; }
html.schmal .kzimmer { width: auto; height: auto; min-height: 100%; box-shadow: none; background: none; display: flex; flex-direction: column; align-items: stretch; gap: calc(8 * var(--u)); padding: calc(max(44px, 8 * var(--u)) + 34px) 10px 28px; }
html.schmal .kzimmer > .lage { display: none; }
html.schmal .blatt, html.schmal .klemm, html.schmal .klemm.breit, html.schmal .klemm.links-oben, html.schmal .klemm.halb, html.schmal .kontozettel { position: relative; left: auto; top: auto; width: 100%; height: auto; }
html.schmal .dekoreihe { display: flex; justify-content: space-around; align-items: flex-end; gap: calc(8 * var(--u)); }
html.schmal .deko { flex: none; width: calc(var(--bw) * var(--u)); height: calc(var(--bh) * var(--u)); background-repeat: no-repeat; background-size: calc(320 * var(--u)) calc(182 * var(--u));
  background-position: calc(var(--bx) * var(--u) * -1) calc(var(--by) * var(--u) * -1); image-rendering: pixelated; }
html.schmal .kkopf { height: auto; min-height: calc(18 * var(--u)); padding-bottom: calc(2 * var(--u)); }
html.schmal .kkopf h1 { font-size: calc(7.5 * var(--u)) !important; line-height: 1.1; }
html.schmal .kalender { flex: none; grid-template-rows: calc(9 * var(--u)) repeat(6, minmax(calc(22 * var(--u)), auto)); }
html.schmal .kachelkopf, html.schmal .kachel .notiz { position: static; }
html.schmal .kachel .nr::after { content: ""; position: absolute; inset: 0; }
html.schmal .kachelknoepfe, html.schmal .kachel:hover .kachelknoepfe { display: none; }
html.schmal .legende { flex-wrap: wrap; }
html.schmal .spalten { flex-direction: column; padding-bottom: calc(3 * var(--u)); }
html.schmal .spalten .links { width: 100%; }
html.schmal .pliste { max-height: none; }
html.schmal .bkopf { flex-wrap: wrap; }
html.schmal .kalender { grid-template-rows: calc(9 * var(--u)) repeat(6, minmax(calc(30 * var(--u)), auto)); }
html.schmal .kachelkopf { flex-direction: column; align-items: flex-start; gap: calc(1 * var(--u)); }
html.schmal .kachel .ist { font-size: calc(6 * var(--u)); }
html.schmal .kachel .symbol { inset: auto auto calc(2 * var(--u)) calc(2 * var(--u)); justify-content: flex-start; }
html.schmal .kachel .symbol img { height: calc(9 * var(--u)); }
html.schmal .kachel .fname { display: none; }

/* Auswertung: Reiter, Tageszeilen mit Zellenbalken, Wochenzeilen und das Bücherregal der Monate */
a.pknopf { text-decoration: none; }
.reiter { display: flex; gap: calc(3 * var(--u)); padding: calc(3 * var(--u)) calc(8 * var(--u)) 0; }
.aspalten { display: flex; gap: calc(8 * var(--u)); padding: calc(4 * var(--u)) calc(8 * var(--u)) 0; align-items: flex-start; }
.atage { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: calc(1.5 * var(--u)); }
.azeile, .wzeile { display: grid; align-items: center; gap: calc(3 * var(--u)); padding: calc(1.5 * var(--u)) calc(2 * var(--u)); text-decoration: none; color: #18151a; background: rgba(255, 255, 255, .28); font: 400 calc(7 * var(--u))/1 "VT323", monospace; }
.azeile { grid-template-columns: calc(30 * var(--u)) calc(48 * var(--u)) calc(16 * var(--u)) 1fr; }
.wzeile { grid-template-columns: calc(17 * var(--u)) calc(31 * var(--u)) calc(60 * var(--u)) 1fr; }
.azeile:hover, .wzeile:hover, .azeile:focus-visible, .wzeile:focus-visible { background: rgba(206, 129, 88, .45); outline: none; }
.azeile.wochenende { color: #6b5a52; background: rgba(0, 0, 0, .06); }
.atag { font: 700 calc(5.5 * var(--u))/1 "Pixelify Sans", monospace; }
.adatum { font: 400 calc(6 * var(--u))/1 "VT323", monospace; }
.aist { text-align: right; font-size: calc(8 * var(--u)); }
.wzeile .aist { text-align: left; white-space: nowrap; font-size: calc(7 * var(--u)); }
.wzeile .aist .matt { font-size: calc(6 * var(--u)); }
.abem { font-size: calc(6 * var(--u)); color: #5b4a3e; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tbalken { position: relative; width: calc(48 * var(--u)); height: calc(4 * var(--u)); background: repeating-linear-gradient(90deg, #b9a58c 0 calc(2 * var(--u)), transparent calc(2 * var(--u)) calc(3 * var(--u))); }
.tbalken::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: calc(var(--n) * 3 * var(--u)); background: repeating-linear-gradient(90deg, #4f9a62 0 calc(2 * var(--u)), transparent calc(2 * var(--u)) calc(3 * var(--u))); }
.tbalken.ueber::before { background: repeating-linear-gradient(90deg, #d9a93a 0 calc(2 * var(--u)), transparent calc(2 * var(--u)) calc(3 * var(--u))); }
.wzeile .zellen { width: calc(60 * var(--u)); height: calc(4 * var(--u)); background: repeating-linear-gradient(90deg, #b9a58c 0 calc(2 * var(--u)), transparent calc(2 * var(--u)) calc(3 * var(--u))); }
.wzeile .zellen::before { width: calc(var(--n) * 3 * var(--u)); background: repeating-linear-gradient(90deg, #4f9a62 0 calc(2 * var(--u)), transparent calc(2 * var(--u)) calc(3 * var(--u))); }
.wzeile .zellen.voll::before { background: repeating-linear-gradient(90deg, #d9a93a 0 calc(2 * var(--u)), transparent calc(2 * var(--u)) calc(3 * var(--u))); }
.asumme { flex: none; width: calc(106 * var(--u)); display: flex; flex-direction: column; gap: calc(2 * var(--u)); padding: calc(3 * var(--u)); background: rgba(255, 255, 255, .28); box-shadow: 0 0 0 var(--u) #8a726d inset; }
.asumme .zahl { margin: 0; font: 400 calc(10 * var(--u))/1 "VT323", monospace; color: #18151a; }
.asumme .matt { color: #5b4a3e; font-size: calc(7 * var(--u)); }
.asumme p { margin: 0; }
.pdfzeile { padding: calc(4 * var(--u)) calc(8 * var(--u)) 0; }
.regalbereich { display: flex; gap: calc(8 * var(--u)); padding: calc(4 * var(--u)) calc(8 * var(--u)) 0; align-items: flex-end; }
.regal { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: center; }
.buecher { position: relative; display: flex; align-items: flex-end; gap: calc(2 * var(--u)); height: calc(84 * var(--u)); padding: 0 calc(3 * var(--u)); }
.buchsp { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: calc(1 * var(--u)); width: calc(13 * var(--u)); text-decoration: none; color: #18151a; }
.bzahl { font: 400 calc(5 * var(--u))/1 "VT323", monospace; white-space: nowrap; }
.buch { position: relative; display: block; width: 100%; height: calc(var(--h) * var(--u)); box-shadow: 0 0 0 var(--u) #1a1214; background: #e0a05a; }
.buch::before { content: ""; position: absolute; inset: 0; box-shadow: inset calc(3 * var(--u)) 0 0 rgba(255, 255, 255, .28), inset calc(-3 * var(--u)) 0 0 rgba(0, 0, 0, .22); }
.buch::after { content: ""; position: absolute; left: 0; right: 0; top: calc(4 * var(--u)); height: calc(2 * var(--u)); background: rgba(26, 18, 20, .55); box-shadow: 0 calc(5 * var(--u)) 0 rgba(26, 18, 20, .55); }
.buch.erfuellt { background: #6fb06a; }
.buchsp.laeuft .buch { outline: calc(2 * var(--u)) solid #f2d27a; outline-offset: var(--u); }
.buchsp:hover .buch, .buchsp:focus-visible .buch { filter: brightness(1.15); }
.bmarke { position: absolute; left: calc(-2 * var(--u)); right: calc(-2 * var(--u)); bottom: calc(var(--m) * var(--u)); height: calc(2 * var(--u)); background: #1a1214; z-index: 1; }
.sollstrich { position: absolute; left: 0; right: 0; bottom: calc(50 * var(--u) + 6 * var(--u)); height: 0; border-top: var(--u) dashed rgba(26, 18, 20, .45); }
.sollstrich span { position: absolute; right: 0; top: calc(-6 * var(--u)); font: 400 calc(5 * var(--u))/1 "VT323", monospace; color: #5b4a3e; }
.brett { width: 100%; height: calc(4 * var(--u)); background: #8a5a3a; box-shadow: 0 0 0 var(--u) #1a1214, inset 0 calc(1.5 * var(--u)) 0 #b07a50; }
.monatsnamen { display: flex; gap: calc(2 * var(--u)); padding: calc(2 * var(--u)) calc(3 * var(--u)) 0; }
.monatsnamen span { width: calc(13 * var(--u)); text-align: center; font: 600 calc(5 * var(--u))/1 "Pixelify Sans", monospace; color: #18151a; }
.pdfzeile.pzeile { gap: calc(3 * var(--u)); }
html.schmal .reiter { flex-wrap: wrap; }
html.schmal .aspalten, html.schmal .regalbereich { flex-direction: column; align-items: stretch; }
html.schmal .asumme, html.schmal .regalbereich .asumme { width: auto; }
html.schmal .azeile { grid-template-columns: calc(30 * var(--u)) calc(48 * var(--u)) 1fr; }
html.schmal .azeile .abem { grid-column: 1 / -1; }
html.schmal .wzeile { grid-template-columns: calc(18 * var(--u)) 1fr; }
html.schmal .wzeile .zellen, html.schmal .wzeile .aist { grid-column: 1 / -1; }
html.schmal .buchsp { width: calc(8 * var(--u)); }
html.schmal .monatsnamen span { width: calc(8 * var(--u)); font-size: calc(4 * var(--u)); }
html.schmal .bzahl { display: none; }
html.schmal .buecher { height: calc(72 * var(--u)); }