:root {
  --wood: #7a4b25; --wood-d: #3a2210; --wood-l: #a8763f; --paper: #f4e9d2; --paper-d: #e5d4ae;
  --ink: #2b1d10; --muted: #7d6c57; --green: #2f6b4f; --green-d: #1f4a36; --red: #8a2b1d;
  --pixel: "Courier New", ui-monospace, monospace;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { height: 100%; margin: 0; overflow: hidden; }
body { background: #2a1d15; color: var(--ink); font: 700 15px/1.5 var(--pixel); }
canvas { position: fixed; image-rendering: pixelated; touch-action: none; }

#menu { position: fixed; z-index: 5; top: 10px; right: 10px; max-width: 60vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  background: var(--paper); color: var(--ink); padding: 2px 12px; border: 3px solid var(--wood-d); box-shadow: 3px 3px 0 rgba(0,0,0,.4); font-size: 14px; }
#tip { position: fixed; z-index: 5; pointer-events: none; transform: translate(-50%, -100%); white-space: nowrap;
  background: var(--paper); color: var(--ink); padding: 2px 10px; border: 3px solid var(--wood-d); box-shadow: 3px 3px 0 rgba(0,0,0,.4); }

/* ---- Fenster im Raum-Stil ---- */
#overlay { position: fixed; inset: 0; z-index: 10; background: rgba(20,12,6,.72); display: grid; place-items: center; padding: 16px; }
.panel { width: min(980px, 100%); height: min(700px, 100%); display: flex; flex-direction: column; padding: 8px;
  background: var(--paper); border: 4px solid var(--wood-d);
  box-shadow: inset 0 0 0 4px var(--wood-l), inset 0 0 0 8px var(--wood), 8px 8px 0 rgba(0,0,0,.5); }
.panel > header { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 6px 12px;
  color: var(--paper); background: repeating-linear-gradient(0deg, var(--wood) 0 6px, #6e4221 6px 7px); border-bottom: 4px solid var(--wood-d); }
.panel h2 { margin: 0; font-size: 18px; text-shadow: 2px 2px 0 var(--wood-d); }
.hdr { display: flex; gap: 8px; align-items: center; }

.panel button { font: inherit; cursor: pointer; color: var(--ink); background: #fff3d6; border: 3px solid var(--wood-d);
  border-radius: 0; padding: 4px 12px; box-shadow: 0 3px 0 var(--wood-d); }
.panel button:hover { background: #fff; }
.panel button:active { transform: translateY(3px); box-shadow: none; }
.panel button:disabled { opacity: .6; cursor: wait; }
.panel button.primary { background: var(--green); color: #fff; border-color: var(--green-d); box-shadow: 0 3px 0 var(--green-d); }
.panel button.primary:hover { background: #3b7e5e; }
.panel button.danger { color: var(--red); }
.panel button.x { padding: 0 10px; font-size: 18px; }
.panel button.link { background: none; border: 0; box-shadow: none; text-decoration: underline; color: var(--muted); }
.empty { color: var(--muted); padding: 24px; text-align: center; }

/* ---- Notizen ---- */
.cols { flex: 1; display: grid; grid-template-columns: 250px 1fr; min-height: 0; }
.cols > aside { border-right: 4px solid var(--wood-d); padding: 12px; display: flex; flex-direction: column; gap: 12px; overflow: auto; background: var(--paper-d); }
.list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.list button { width: 100%; text-align: left; background: #fff0a8; border-color: #8c7a2a; box-shadow: 0 3px 0 #8c7a2a; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.list button.on { background: #fff7c9; border-color: var(--green-d); box-shadow: 0 3px 0 var(--green-d), -6px 0 0 var(--green); }
.list small { display: block; color: var(--muted); font-weight: 400; }
.main { display: flex; flex-direction: column; min-height: 0; }
.editor { display: flex; flex: 1; flex-direction: column; gap: 10px; padding: 12px; min-height: 0; }
.editor input, .editor textarea { font: inherit; color: var(--ink); background: #fffdf2; border: 3px solid var(--wood-d); border-radius: 0; padding: 6px 10px; }
.editor input { font-size: 18px; }
.editor textarea { flex: 1; resize: none; line-height: 26px; font-weight: 400;
  background: repeating-linear-gradient(#fffdf2 0 25px, var(--paper-d) 25px 26px) local; }
.editor footer { display: flex; gap: 8px; justify-content: space-between; }

/* ---- Passwort ---- */
.lock { margin: auto; width: min(380px, 100%); display: grid; gap: 12px; padding: 24px; text-align: center; }
.lock-icon { font-size: 44px; }
.lock p { margin: 0; }
.lock input { font: inherit; padding: 8px 10px; border: 3px solid var(--wood-d); border-radius: 0; background: #fffdf2; text-align: center; }
.lock .msg { color: var(--red); min-height: 1.5em; }

/* ---- Bücherregal ---- */
.shelf { flex: 1; overflow: auto; padding: 18px 14px; display: flex; flex-direction: column; gap: 22px; background: #4d2e16;
  background-image: repeating-linear-gradient(90deg, rgba(0,0,0,.12) 0 2px, transparent 2px 24px); }
.row { min-height: 176px; display: flex; align-items: flex-end; gap: 5px; padding: 0 12px;
  border-bottom: 16px solid var(--wood-l); box-shadow: 0 4px 0 var(--wood-d); }
.panel .spine { width: 46px; padding: 10px 0; color: #fff; writing-mode: vertical-rl; text-align: left; font-size: 13px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; border: 3px solid rgba(0,0,0,.55);
  box-shadow: inset 5px 0 0 rgba(255,255,255,.2); }
.panel .spine:hover { transform: translateY(-6px); box-shadow: inset 5px 0 0 rgba(255,255,255,.35); }
.panel .spine:active { transform: translateY(-2px); }
.shelf + .empty { background: #4d2e16; color: var(--paper-d); padding: 0 0 24px; }
.reader { flex: 1; overflow: auto; padding: 20px 28px; background: repeating-linear-gradient(var(--paper) 0 25px, var(--paper-d) 25px 26px) local; }
.reader h3 { margin: 0 0 12px; }
.reader p { white-space: pre-wrap; margin: 0; line-height: 26px; font-weight: 400; }
.bar { display: flex; gap: 8px; padding: 10px 12px; border-top: 4px solid var(--wood-d); justify-content: space-between; background: var(--paper-d); }

.toast { position: fixed; z-index: 20; left: 50%; bottom: 24px; transform: translateX(-50%); background: var(--paper); color: var(--ink);
  border: 3px solid var(--wood-d); padding: 6px 16px; box-shadow: 4px 4px 0 rgba(0,0,0,.4); }

@media (max-width: 640px) {
  #overlay { padding: 0; }
  .panel { height: 100%; }
  .cols { grid-template-columns: 1fr; grid-template-rows: auto 1fr; }
  .cols > aside { border-right: 0; border-bottom: 4px solid var(--wood-d); max-height: 36%; }
  .panel .spine { width: 40px; }
}

/* ---- Öffentliche Regal-Seite (/regal/) ---- */
body.page { overflow: auto; display: grid; place-items: center; min-height: 100%; padding: 16px; }
body.page .panel { width: min(980px, 100%); height: min(700px, calc(100vh - 32px)); }
.bar a { color: var(--green-d); }

/* ---- Notizen-App: Tresor, Editor, Formatierung ---- */
.panel { position: relative; }
.tabs { display: flex; gap: 0; justify-content: center; }
.panel .tabs button { box-shadow: none; border-bottom-width: 0; background: var(--paper-d); }
.panel .tabs button.on { background: #fff3d6; transform: translateY(0); }
.lock .hint, .hint { margin: 0; font-weight: 400; color: var(--muted); font-size: 14px; }
.chips { display: flex; gap: 6px; flex-wrap: wrap; justify-content: center; }
.panel .chip { width: 26px; height: 26px; padding: 0; box-shadow: none; border-color: var(--wood-d); }
.panel .chip.on { outline: 3px solid var(--wood-d); outline-offset: 2px; }
.editor > div:first-child { display: flex; justify-content: flex-start; }
.editor .chips { justify-content: flex-start; }
.toolbar { display: flex; gap: 6px; flex-wrap: wrap; }
.panel .toolbar button { padding: 2px 10px; }
.toolbar.off button:not(:last-child) { opacity: .4; pointer-events: none; }
.preview { flex: 1; overflow: auto; border: 3px solid var(--wood-d); background: #fffdf2; padding: 10px 14px; }
.stat { color: var(--muted); font-weight: 400; }
.stat.error { color: var(--red); font-weight: 700; }
.profile { margin-top: auto; display: grid; gap: 6px; border-top: 3px solid var(--wood-d); padding-top: 10px; }
.profile > span { overflow: hidden; text-overflow: ellipsis; }
.meter { height: 10px; border: 2px solid var(--wood-d); background: #fffdf2; }
.meter i { display: block; height: 100%; width: 0; background: var(--green); }
.meter i.full { background: var(--red); }
.profile small { color: var(--muted); font-weight: 400; }
.row-btns { display: flex; gap: 8px; justify-content: flex-end; align-items: center; flex-wrap: wrap; }
.editor footer { align-items: center; }

.modal { position: absolute; inset: 0; z-index: 2; background: rgba(20,12,6,.6); display: grid; place-items: center; padding: 16px; }
.modal .card { width: min(480px, 100%); display: grid; gap: 12px; padding: 20px; background: var(--paper); border: 4px solid var(--wood-d); box-shadow: 6px 6px 0 rgba(0,0,0,.5); }
.modal .card h3, .modal .card p { margin: 0; }
.modal .card input { font: inherit; padding: 8px 10px; border: 3px solid var(--wood-d); border-radius: 0; background: #fffdf2; }

.bookview { display: flex; flex-direction: column; flex: 1; min-height: 0; }
.reader .by { margin: 0 0 14px; color: var(--muted); font-weight: 400; }
.lock label { text-align: left; }
.rich { font-weight: 400; }
.rich p { margin: 0 0 12px; line-height: 26px; }
.rich h3.heading { margin: 8px 0 12px; font-size: 24px; line-height: 30px; }
.rich h4.chapter { margin: 22px 0 10px; font-size: 18px; border-bottom: 4px double var(--wood-l); padding-bottom: 2px; }
.rich strong { font-weight: 900; }
.rich em { font-style: italic; }
.rich u { text-decoration: underline; }
.toc { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 16px; }
.panel .toc button { padding: 1px 8px; font-size: 13px; }

/* ---- Pinnwand ---- */
.board { position: relative; flex: 1; min-height: 360px; margin: 12px; overflow: hidden; border: 6px solid var(--wood-d);
  background: #c89a5b radial-gradient(#b3864a 1px, transparent 1.5px) 0 0 / 14px 14px; box-shadow: inset 0 0 0 4px var(--wood-l), inset 0 0 30px rgba(0,0,0,.25); }
.board .empty { color: #5a3a14; }
.postit { --w: clamp(130px, 24%, 200px); position: absolute; width: var(--w); height: auto; max-height: 190px; overflow: auto;
  left: calc((100% - var(--w)) * var(--x)); top: calc((100% - 190px) * var(--y));
  padding: 14px 10px 8px; text-align: left; font-size: 13px; line-height: 1.35; color: #2b1d10;
  transform: rotate(var(--rot)); box-shadow: 3px 4px 0 rgba(0,0,0,.35); }
.postit::before { content: ''; position: absolute; top: 4px; left: 50%; width: 10px; height: 10px; margin-left: -5px; border-radius: 50%;
  background: #c33; border: 2px solid #611; box-shadow: 1px 2px 0 rgba(0,0,0,.35); }
.postit h4 { margin: 0 0 4px; font-size: 14px; overflow-wrap: anywhere; }
.postit p { margin: 0 0 6px; white-space: pre-wrap; overflow-wrap: anywhere; font-weight: 400; }
.postit a { display: block; font-weight: 700; color: #1f3a7a; overflow-wrap: anywhere; }
.postit.edit { cursor: grab; touch-action: none; user-select: none; }
.postit.dragging { cursor: grabbing; z-index: 3; box-shadow: 6px 8px 0 rgba(0,0,0,.3); }
.stat.saved { color: var(--green); }
.modal .card textarea { font: inherit; padding: 8px 10px; border: 3px solid var(--wood-d); border-radius: 0; background: #fffdf2; resize: none; }

/* ================= Erweiterungen: Menü, Sprechblase, Regal, Pinnwand, Briefkasten, Admin ================= */
.row-btns.spread { justify-content: space-between; }
.bar.small { font-weight: 400; font-size: 13px; justify-content: flex-start; gap: 4px; padding: 6px 12px; }
.bar.top { justify-content: flex-start; align-items: center; gap: 16px; border-top: 0; border-bottom: 4px solid var(--wood-d); }
.check { display: flex; gap: 8px; align-items: flex-start; font-weight: 400; font-size: 14px; text-align: left; }
.modal .card.wide { width: min(640px, 100%); max-height: 100%; overflow: auto; }

/* Menü oben rechts (Name des Autorenplatzes; beim Admin klickbar mit Zähler für ungelesene Briefe) */
button#menu { font: inherit; cursor: default; display: flex; gap: 8px; align-items: center; }
button#menu.admin { cursor: pointer; background: #fff3d6; border-color: var(--green-d); }
button#menu.admin::before { content: '👑'; }
button#menu.admin:hover { background: #fff; }
#menu .badge, .letter-card .badge { background: #c33; color: #fff; border-radius: 10px; padding: 0 7px; font-size: 12px; line-height: 18px; min-width: 18px; text-align: center; }

/* Sprechblase des Frosches */
#bubble { position: fixed; z-index: 6; width: min(300px, 90vw); transform: translate(-50%, -100%); background: var(--paper); color: var(--ink);
  border: 3px solid var(--wood-d); box-shadow: 4px 4px 0 rgba(0,0,0,.4); padding: 10px 12px 8px; font-size: 14px; line-height: 1.45; margin-top: -10px; }
#bubble::after { content: ''; position: absolute; bottom: -13px; left: calc(50% + var(--tail, 0px)); margin-left: -8px; width: 12px; height: 12px;
  background: var(--paper); border-right: 3px solid var(--wood-d); border-bottom: 3px solid var(--wood-d); transform: rotate(45deg); }
#bubble p { margin: 0 0 8px; font-weight: 400; padding-right: 14px; }
#bubble .bubble-row { display: flex; justify-content: space-between; align-items: center; }
#bubble small { color: var(--muted); font-weight: 400; }
#bubble button { font: inherit; cursor: pointer; background: #fff3d6; color: var(--ink); border: 3px solid var(--wood-d); border-radius: 0; padding: 1px 10px; box-shadow: 0 3px 0 var(--wood-d); }
#bubble button:active { transform: translateY(3px); box-shadow: none; }
#bubble button.x { position: absolute; top: 2px; right: 2px; border: 0; background: none; box-shadow: none; padding: 0 6px; }

/* Lesen: Bücher und Poems ohne Linien, Autorenname hervorgehoben */
.reader { background: var(--paper); }
.reader h3 { font-size: 24px; line-height: 30px; margin: 0 0 6px; }
.reader .by { margin: 0 0 18px; color: var(--muted); font-weight: 400; }
.author { font-weight: 900; color: var(--green-d); background: linear-gradient(transparent 58%, #ffe27a 58%); padding: 0 3px; }
button.author { font: inherit; font-weight: 900; border: 0; box-shadow: none; cursor: pointer; text-decoration: underline; }
.panel button.author { background: linear-gradient(transparent 58%, #ffe27a 58%); border: 0; box-shadow: none; padding: 0 3px; }
.panel button.author:hover { background: #ffe27a; }
.reader.poem { text-align: center; font-style: italic; font-family: Georgia, "Times New Roman", serif; }
.reader.poem .rich p { line-height: 30px; margin-bottom: 18px; }
.reader.poem h3, .reader.poem .by { font-style: normal; font-family: var(--pixel); }
.reader.letter { border: 3px solid var(--wood-d); padding: 14px 18px; max-height: 40vh; }

/* Regal: Reiter, Autorenliste in der Ecke, Poems */
.shelfroot, .shelf-main { display: flex; flex-direction: column; flex: 1; min-height: 0; }
.shelf-layout { display: flex; flex: 1; min-height: 0; }
.shelf-layout > .shelf-main, .shelf-layout > .poems { flex: 1; min-width: 0; }
.shelf-main > .shelf { flex: 1; }
.empty.on-wood { background: #4d2e16; color: var(--paper-d); padding: 0 0 24px; margin: 0; }
.authors { width: 190px; flex: none; border-left: 4px solid var(--wood-d); background: var(--paper-d); padding: 10px 12px; overflow: auto; font-size: 14px; }
.authors h4 { margin: 0 0 8px; }
.authors ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.authors small { color: var(--muted); font-weight: 400; }
.panel button.link { background: none; border: 0; box-shadow: none; padding: 0; text-align: left; color: var(--green-d); text-decoration: underline; cursor: pointer; font-weight: 700; }
.poems { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 12px; align-content: start; padding: 16px; overflow: auto; background: var(--paper); }
.panel .poemcard { display: grid; gap: 4px; text-align: left; background: #fffdf2; border-left: 10px solid var(--green); min-height: 84px; }
.poemcard small { color: var(--muted); font-weight: 400; }
@media (max-width: 640px) {
  .shelf-layout { flex-direction: column-reverse; }
  .authors { width: auto; border-left: 0; border-bottom: 4px solid var(--wood-d); max-height: 96px; }
  #bubble { font-size: 13px; }
}

/* Pinnwand: Listen, Poems, Pinnadeln */
.postit.list { background-image: repeating-linear-gradient(transparent 0 19px, rgba(0,0,0,.08) 19px 20px); }
.postit .items { margin: 0 0 20px; padding-left: 18px; font-weight: 400; }
.postit .items li { margin: 0; }
.postit.poem { font-family: Georgia, serif; }
.postit.poem .snippet { font-style: italic; margin: 0 0 4px; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
.postit.poem:not(.edit) { cursor: pointer; }
.postit .pins { position: absolute; left: 8px; right: 8px; bottom: 4px; display: flex; gap: 6px; }
.postit { padding-bottom: 30px; }
.panel .pin { font: inherit; font-size: 12px; padding: 0 6px; background: rgba(255,255,255,.6); border-width: 2px; box-shadow: none; cursor: pointer; }
.panel .pin.up { color: #1f6b3a; } .panel .pin.down { color: #8a2b1d; }
.panel .pin.mine { background: #fff; border-color: currentColor; outline: 2px solid currentColor; outline-offset: 1px; }
.modal .card textarea, .modal .card input { max-width: 100%; }

/* Briefkasten */
.mailroot { flex: 1; overflow: auto; display: flex; flex-direction: column; }
.mailform { display: grid; gap: 10px; padding: 18px 22px; max-width: 640px; width: 100%; margin: 0 auto; }
.mailform p { margin: 0; }
.mailform textarea, .mailform input { font: inherit; background: #fffdf2; color: var(--ink); border: 3px solid var(--wood-d); border-radius: 0; padding: 8px 10px; }
.trap { position: absolute !important; left: -9999px; width: 1px; height: 1px; opacity: 0; }

/* Admin */
.admin-tabs { margin: 10px 12px 0; flex-wrap: wrap; }
.admin-body { flex: 1; overflow: auto; padding: 12px; border-top: 4px solid var(--wood-d); background: var(--paper); }
.tablewrap { overflow: auto; }
.admin-body table { width: 100%; border-collapse: collapse; font-size: 13px; }
.admin-body th { text-align: left; border-bottom: 3px solid var(--wood-d); padding: 4px 8px; white-space: nowrap; }
.admin-body td { padding: 6px 8px; border-bottom: 1px solid var(--line, #d9c8a5); vertical-align: middle; }
.admin-body tr.blocked td { background: rgba(138,43,29,.1); }
.admin-body code { background: #fffdf2; border: 2px solid var(--wood-d); padding: 0 6px; }
.letter-card { border: 3px solid var(--wood-d); background: #fffdf2; padding: 10px 14px; margin-bottom: 12px; }
.letter-card.unread { border-color: var(--green-d); box-shadow: -6px 0 0 var(--green); }
.letter-card header { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; margin-bottom: 6px; }
.letter-card p { white-space: pre-wrap; font-weight: 400; margin: 0 0 8px; overflow-wrap: anywhere; }

.pin.up .dot { display: inline-block; filter: hue-rotate(120deg) saturate(1.4); }

/* ============ Pinnwand: Zettelarten (Höhe pro Art über --h, muss zu KIND_H in board.js passen) ============ */
.postit { --h: 190px; top: calc((100% - var(--h)) * var(--y)); max-height: var(--h); }
.postit.list { --h: 340px; --w: clamp(150px, 19%, 180px); height: var(--h); background: #fff !important; background-image: none !important;
  border-top: 6px solid #cfc7b2; padding-top: 18px; }
.postit.list h4 { font-size: 15px; border-bottom: 2px solid #cfc7b2; padding-bottom: 4px; margin-bottom: 6px; }
.postit .entries { list-style: none; margin: 0 0 26px; padding: 0; }
.postit .entries li { padding: 5px 0; border-bottom: 1px solid #ece7d8; }
.postit .entries b { display: block; font-size: 13px; }
.postit .entries small { display: block; color: #6b6558; font-weight: 400; font-size: 12px; line-height: 1.3; overflow-wrap: anywhere; }
.postit.photo { --h: 240px; --w: clamp(150px, 22%, 200px); background: #fff !important; padding: 8px 8px 34px; }
.postit.photo img { width: 100%; height: 168px; object-fit: cover; display: block; background: #e8e2d2; user-select: none; }
.postit.photo .caption, .postit.video .caption { display: block; margin-top: 4px; font-weight: 400; font-size: 12px; overflow-wrap: anywhere; }
.postit.photo:not(.edit) { cursor: zoom-in; }
.postit.video { --h: 200px; --w: clamp(190px, 28%, 260px); color: #fff; padding: 12px 8px 34px; }
.ytbox { position: relative; width: 100%; aspect-ratio: 16 / 9; background: #111; }
.ytbox iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.panel .ytplay { position: absolute; inset: 0; width: 100%; height: 100%; display: grid; place-content: center; gap: 2px; justify-items: center;
  background: #1b1b1b; color: #fff; border: 0; box-shadow: none; font-size: 34px; cursor: pointer; }
.panel .ytplay:hover { background: #2a2a2a; }
.ytplay small { font-size: 11px; font-weight: 400; }
.bigphoto { margin: 0; text-align: center; }
.bigphoto img { max-width: 100%; max-height: 60vh; border: 6px solid #fff; box-shadow: 3px 4px 0 rgba(0,0,0,.35); }
.bigphoto figcaption { margin-top: 8px; font-weight: 400; }
.preview-img { max-width: 100%; max-height: 150px; object-fit: contain; align-self: center; border: 3px solid var(--wood-d); }
.modal .card { max-height: 100%; overflow: auto; }

/* Listeneinträge im Editor: Titel, Link, Beschreibung, entfernen */
.entryrows { display: grid; gap: 8px; max-height: 38vh; overflow: auto; }
.entryrow { display: grid; grid-template-columns: 1fr 1fr auto; gap: 6px; align-items: start; border: 2px dashed var(--wood-l); padding: 6px; }
.entryrow input { min-width: 0; padding: 4px 8px; font-size: 13px; }
.entryrow input:nth-child(3) { grid-column: 1 / 3; }
.entryrow button { grid-column: 3; grid-row: 1 / span 2; align-self: stretch; }

/* ============ Kalender ============ */
.cal { display: flex; flex-direction: column; flex: 1; min-height: 0; }
.calnav { display: flex; gap: 8px; align-items: center; padding: 10px 12px; flex-wrap: wrap; border-bottom: 4px solid var(--wood-d); background: var(--paper-d); }
.calmonth { flex: 1; text-align: center; font-size: 18px; min-width: 130px; }
.calgrid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; padding: 10px 12px; flex: 1; min-height: 0; overflow: auto; align-content: start; }
.calgrid .wd { text-align: center; font-size: 12px; color: var(--muted); }
.panel .day { display: flex; flex-direction: column; align-items: flex-start; gap: 1px; padding: 2px 5px; min-height: 52px; overflow: hidden;
  background: #fffdf2; border: 2px solid var(--line, #d9c8a5); box-shadow: none; text-align: left; }
.panel .day:hover { background: #fff; border-color: var(--wood); }
.panel .day.today { border-color: #c33; }
.panel .day.sel { outline: 3px solid var(--green); outline-offset: 1px; }
.calgrid .empty-day { min-height: 0; }
.day .n { font-size: 13px; }
.day .ev { font-size: 10px; line-height: 1.25; display: block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #1f3a7a; font-weight: 400; }
.day .ev.more { color: var(--muted); }
.caldetails { border-top: 4px solid var(--wood-d); padding: 10px 14px; max-height: 38%; overflow: auto; background: var(--paper-d); }
.caldetails h4 { margin: 0; }
.event { background: #fffdf2; border: 2px solid var(--wood-d); padding: 6px 10px; margin: 8px 0; }
.event p { margin: 4px 0 0; font-weight: 400; white-space: pre-wrap; overflow-wrap: anywhere; }
@media (max-width: 640px) { .panel .day { min-height: 40px; } .day .ev { display: none; } .entryrow { grid-template-columns: 1fr auto; } .entryrow input:nth-child(3) { grid-column: 1; } .entryrow button { grid-column: 2; } }

/* ============ Termine auf der Hauptseite, Katze, Rätsel ============ */
#bubble .riddle { display: grid; gap: 8px; }
#bubble .riddle input { font: inherit; font-size: 14px; padding: 5px 8px; border: 3px solid var(--wood-d); border-radius: 0; background: #fffdf2; color: var(--ink); min-width: 0; }
#bubble .choices { display: flex; flex-wrap: wrap; gap: 6px; }

/* Ecke oben rechts: Name des Autorenplatzes und darunter die Terminübersicht (ausblendbar) */
#corner { position: fixed; z-index: 5; top: 10px; right: 10px; display: flex; flex-direction: column; align-items: flex-end; gap: 8px; pointer-events: none; max-width: min(280px, 70vw); }
#corner > * { pointer-events: auto; }
#corner #menu { position: static; max-width: 100%; }
#upcoming { position: relative; background: var(--paper); border: 3px solid var(--wood-d); box-shadow: 3px 3px 0 rgba(0,0,0,.4); }
#upcoming .open { display: grid; gap: 2px; width: 100%; text-align: left; cursor: pointer; font: inherit; font-size: 12px; line-height: 1.35; color: var(--ink);
  background: none; border: 0; padding: 4px 28px 4px 10px; }
#upcoming .open:hover { background: #fff; }
#upcoming .open b { font-size: 13px; }
#upcoming .open span { font-weight: 400; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#upcoming .close { position: absolute; top: 2px; right: 2px; font: inherit; font-size: 13px; line-height: 1; cursor: pointer; color: var(--ink); background: none; border: 0; padding: 2px 6px; }
#upcoming .close:hover { background: #e5d4ae; }

/* Kompakte Funktionsliste (Frosch-Menü, Handy) */
.frogmenu { display: grid; gap: 8px; padding: 12px; overflow: auto; background: var(--paper); align-content: start; }
.frogmenu button, .frogmenu a { text-align: left; min-height: 44px; padding: 8px 12px; font: inherit; color: var(--ink); background: #fff3d6; border: 3px solid var(--wood-d); text-decoration: none; display: flex; align-items: center; }
.frogmenu button:disabled { opacity: .5; }
.frogmenu a { justify-content: center; background: transparent; border-style: dashed; font-size: 13px; }

/* Impressum-Link unten links im Raum */
#legal { position: fixed; z-index: 4; left: 8px; bottom: 6px; display: flex; gap: 4px; }
#legal a { font: 700 11px/1 var(--pixel, monospace); color: var(--paper); background: rgba(42,29,21,.6); padding: 3px 7px; text-decoration: none; }
#legal a:hover, #legal a:focus-visible { background: var(--wood-d); }