/* ---------- Schrift (lokal eingebunden, kein Google-Request) ---------- */
@font-face {
  font-family: "Caveat Brush"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("assets/fonts/caveat-brush-latin-400-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Caveat Brush"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("assets/fonts/caveat-brush-latin-ext-400-normal.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  --u: min(1vw, 20px);              /* 1 Einheit = 1/100 der Mockup-Breite (max. 2000px) */
  --gap: calc(var(--u) * 3.4);
  --tape-h: calc(var(--u) * 4.6);
  --ink: #111;
  --font: "Caveat Brush", "Segoe Print", "Comic Sans MS", cursive;
  --ui: system-ui, -apple-system, "Segoe UI", sans-serif;
  --accent: #1f4f9c;
  --free: rgba(76,175,80,.40);
  --busy: rgba(206,62,58,.80);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
  margin: 0; min-height: 100vh;
  font-family: var(--font); color: var(--ink);
  background: #d9b48d url("assets/kraft.jpg") center / cover fixed;
}

/* ---------- Kopf & Layout ---------- */
.site-header { width: min(75.6vw, 1512px); margin: 0 auto; padding-top: calc(var(--u) * 1.6); }
.logo { display: block; height: calc(var(--u) * 7.6); width: auto; filter: drop-shadow(0 3px 5px rgba(0,0,0,.3)); }
.container { width: min(75.6vw, 1512px); margin: calc(var(--u) * 3.2) auto calc(var(--u) * 8); }

/* Alle Seiten: 3-Spalten-Masonry. Jede Zelle belegt 4px-Zeilen (per JS gesetzt),
   „dense“ lässt nachfolgende Kacheln in Lücken nach oben rutschen. */
.grid-3 {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: var(--gap);
  grid-auto-rows: 4px; grid-auto-flow: row dense; align-items: start;
}
.cell { padding-bottom: calc(var(--u) * 4.2); min-width: 0; align-self: start; }
.cell.span-2 { grid-column: span 2; }
.cell.span-3 { grid-column: span 3; }
.cell.add-wrap { grid-column: 1 / -1; display: none; }
body.editing .cell.add-wrap { display: block; }

/* ---------- Kachel: Klebeband liegt zur Hälfte auf dem Zettel ---------- */
.card { position: relative; min-width: 0; filter: drop-shadow(0 calc(var(--u) * .25) calc(var(--u) * .5) rgba(0,0,0,.28)); }

.tape-row { display: flex; gap: var(--gap); position: relative; z-index: 2; }
.tape {
  flex: 1; min-width: 0; height: var(--tape-h);
  background: url("assets/tape.png") center / 100% 100% no-repeat;
  display: flex; align-items: center; justify-content: center; padding: 0 6%;
}
.tape-title {
  font-size: calc(var(--u) * 2.1); letter-spacing: .02em; line-height: 1.1; margin: 0; font-weight: 400;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%;
}
.caps .tape-title { text-transform: uppercase; }

.paper {
  position: relative;
  margin: calc(var(--tape-h) / -2) calc(var(--u) * 1.15) 0;
  padding: calc(var(--tape-h) / 2 + var(--u) * 1.2) calc(var(--u) * 1.5) calc(var(--u) * 1.6);
  background: #eee url("assets/paper.jpg") center / cover;
  font-size: calc(var(--u) * 1.75); line-height: 1.28;
}
.paper.tile { text-align: center; }
.paper h3 { margin: .2em 0 .3em; font-weight: 400; font-size: 1.25em; }
.paper p, .paper div { margin: 0 0 .5em; }
.paper ul { margin: .3em 0 .5em; padding-left: 1.2em; text-align: left; }
.paper a { color: var(--accent); }

/* Nur-Link-Kachel (kein Zettel) */
.card.linkonly .tape { height: calc(var(--tape-h) * 1.1); }

/* Ganze Kachel klickbar */
.stretch { position: absolute; inset: 0; z-index: 3; cursor: pointer; }
.card.link:focus-within { outline: 3px solid var(--accent); outline-offset: 4px; }

/* ---------- Bearbeiten ---------- */
.ed { outline: none; min-height: 1.2em; }
.ed:empty::before { content: attr(data-placeholder); opacity: .4; }
body:not(.editing) .ed:empty::before { content: ""; }
body.editing .ed { outline: 2px dashed rgba(31,79,156,.55); outline-offset: 2px; cursor: text; border-radius: 3px; }
body.editing .ed:focus { outline-style: solid; background: rgba(255,255,255,.55); }
body.editing .stretch { display: none; }
body.editing .tape-title { overflow: visible; text-overflow: clip; }

.ctl { display: none; }
body.editing .ctl { display: flex; }
.ctl {
  position: absolute; top: calc(var(--u) * -1.1); right: calc(var(--u) * .4); z-index: 6; gap: 4px;
  font-family: var(--ui);
}
.ctl button, .ctl-btn {
  font: 600 13px var(--ui); cursor: pointer; border: 1px solid rgba(0,0,0,.3); border-radius: 6px;
  background: #fffdf6; padding: 3px 8px; box-shadow: 0 1px 3px rgba(0,0,0,.25);
}
.ctl button:hover { background: #fff; }
.add-row { display: flex; gap: var(--gap); }
.add {
  display: flex; flex: 1; align-items: center; justify-content: center; text-align: center; cursor: pointer;
  min-height: calc(var(--u) * 7); width: 100%; font: 400 calc(var(--u) * 1.8) var(--font); color: #333;
  border: 3px dashed rgba(60,40,10,.5); border-radius: 6px; background: rgba(255,255,255,.35);
}
.add:hover { background: rgba(255,255,255,.65); }

.editbar {
  position: fixed; right: 14px; bottom: 14px; z-index: 50;
  display: flex; flex-direction: column; align-items: flex-end; gap: 8px; font: 14px var(--ui);
}
.editbar button, .editbar select {
  font: inherit; cursor: pointer; border: 1px solid rgba(0,0,0,.25);
  background: #fffdf6; color: #222; padding: 6px 12px; border-radius: 6px; box-shadow: 0 1px 3px rgba(0,0,0,.2);
}
.editbar select { padding: 5px 6px; }
.editbar button:hover { background: #fff; }
.editbar .edit-toggle { opacity: .55; }
.editbar .edit-toggle:hover, body.editing .edit-toggle { opacity: 1; }
body.editing .edit-toggle { background: var(--accent); color: #fff; border-color: var(--accent); }
.editbar-tools {
  display: flex; flex-wrap: wrap; gap: 6px; align-items: center; justify-content: flex-end;
  background: rgba(255,253,246,.96); padding: 8px; border-radius: 8px;
  box-shadow: 0 2px 10px rgba(0,0,0,.3); max-width: min(94vw, 760px);
}
.editbar-tools[hidden], #page-tools[hidden] { display: none; }
#page-tools { display: contents; }
#page-tools label { display: flex; gap: 6px; align-items: center; }
.editbar .sep { width: 1px; height: 22px; background: rgba(0,0,0,.2); margin: 0 4px; }
.status { color: #2a7a2a; min-width: 7em; text-align: right; }

/* ---------- Buchungs-Kalender (Woche) ---------- */
.bk-nav { display: flex; align-items: center; justify-content: space-between; font: 600 calc(var(--u) * 1) var(--ui); margin: 0 0 .5em; }
.bk-nav button { font: inherit; border: 0; background: rgba(0,0,0,.08); border-radius: 4px; cursor: pointer; padding: .15em .7em; }
.bk-nav button:hover { background: rgba(0,0,0,.18); }

.wk {
  display: grid; grid-template-columns: auto repeat(var(--n), minmax(0, 1fr)); gap: 2px; align-items: center;
  font: calc(var(--u) * .8) var(--ui);
}
.wk-h { font-size: .9em; line-height: 1; opacity: .65; overflow: hidden; text-align: left; padding-bottom: 2px; }
.wk-d { font: calc(var(--u) * 1.1) var(--font); padding-right: .6em; white-space: nowrap; text-align: left; }
.wk-d small { font: .7em var(--ui); opacity: .6; }
.wk-d.today { color: var(--accent); text-decoration: underline; }
.wk .s { display: block; height: calc(var(--u) * 1.4); border: 0; padding: 0; border-radius: 2px; background: var(--free); }
.wk .s.busy { background: var(--busy); }
.wk .s.past { background: rgba(0,0,0,.13); }
.wk .s.sel  { background: var(--accent); }
.wk-i .s { height: 34px; min-width: 26px; cursor: pointer; font: 700 14px var(--ui); color: #fff; }
.wk-i .s.past { cursor: not-allowed; }
.wk-i .s.busy { cursor: help; }
.wk-i .s.free:hover { background: rgba(76,175,80,.75); }
.wk-i { font-size: 13px; gap: 3px; }
.wk-i .wk-d { font-size: 22px; }
.wk-clickable { cursor: pointer; }

.bk-legend { display: flex; gap: 1em; flex-wrap: wrap; font: calc(var(--u) * .8) var(--ui); margin: .6em 0 .2em; opacity: .85; }
.bk-legend i { display: inline-block; width: 1.1em; height: .8em; border-radius: 2px; margin-right: .35em; vertical-align: -1px; }
.btn-book {
  display: block; margin: .6em auto 0; font: 400 calc(var(--u) * 1.7) var(--font); cursor: pointer;
  background: var(--accent); color: #fff; border: 0; padding: .25em 1.6em; border-radius: 6px;
  box-shadow: 0 2px 4px rgba(0,0,0,.3);
}
.btn-book:hover { filter: brightness(1.12); }
.paper.bk { text-align: left; }

/* ---------- Dialoge ---------- */
dialog { border: 0; padding: 0; background: transparent; max-width: min(96vw, 940px); width: 100%; color: var(--ink); }
dialog::backdrop { background: rgba(30,20,5,.55); }
.dlg {
  background: #f1f1f1 url("assets/paper.jpg") center / cover; padding: 24px 26px 22px; border-radius: 4px;
  box-shadow: 0 10px 40px rgba(0,0,0,.5); font: 16px var(--ui); max-height: 92vh; overflow: auto;
}
.dlg h2 { font: 400 34px var(--font); margin: 0 0 .5em; }
.dlg label { display: block; margin: .7em 0 .2em; font-weight: 600; }
.dlg input[type=text], .dlg input[type=number], .dlg select {
  width: 100%; font: inherit; padding: 7px 9px; border: 1px solid rgba(0,0,0,.3); border-radius: 5px; background: #fff;
}
.dlg .row { display: flex; gap: 12px; flex-wrap: wrap; } .dlg .row > * { flex: 1; min-width: 120px; }
.dlg .chk { display: flex; align-items: center; gap: 8px; font-weight: 400; margin-top: 1em; }
.dlg .actions { display: flex; gap: 10px; margin-top: 1.3em; flex-wrap: wrap; align-items: center; }
.dlg .actions .grow { flex: 1; }
.dlg button { font: 600 15px var(--ui); padding: 8px 16px; border-radius: 6px; border: 1px solid rgba(0,0,0,.3); background: #fff; cursor: pointer; }
.dlg button.primary { background: var(--accent); color: #fff; border-color: var(--accent); }
.dlg button.danger { color: #b3261e; }
.dlg button:disabled { opacity: .45; cursor: not-allowed; }
.dlg .hint { opacity: .7; font-size: 13px; margin: .3em 0 0; }
.dlg .wk-wrap { overflow-x: auto; padding-bottom: 6px; }
.dlg .bk-nav { font-size: 15px; }
.dlg .bk-legend { font-size: 13px; }
.dlg .info { min-height: 1.5em; margin: .8em 0 .2em; font-weight: 600; }
.dlg .info.ok { color: #2a7a2a; } .dlg .info.err { color: #b3261e; }
[hidden] { display: none !important; }

/* ---------- Schmale Bildschirme ---------- */
@media (max-width: 860px) {
  :root { --u: 5px; --gap: 16px; --tape-h: 58px; }
  .site-header, .container { width: calc(100vw - 32px); }
  .logo { height: 64px; }
  .grid-3 { grid-template-columns: 1fr; }
  .cell { padding-bottom: 34px; }
  .cell.span-2, .cell.span-3 { grid-column: auto; }
  .add-row { flex-direction: column; gap: 12px; }
  .tape-title { font-size: 28px; }
  .paper { font-size: 22px; padding: 38px 18px 18px; margin: -29px 8px 0; }
  .tape-row .tape:not(:first-child) { display: none; }
  .wk { font-size: 11px; } .wk-d { font-size: 18px; } .wk .s { height: 16px; }
  .bk-nav, .bk-legend { font-size: 13px; } .btn-book { font-size: 26px; }
  .add { min-height: 90px; font-size: 26px; }
  .dlg { padding: 18px 14px; }
}

/* Leerer Hinweistext in der Buchungskachel nur im Bearbeiten-Modus zeigen */
body:not(.editing) .bk-text:empty { display: none; }
.paper.bk { padding-top: calc(var(--tape-h) / 2 + var(--u) * 1.4); }

/* ---------- Bilder im Text ---------- */
.ed { display: flow-root; }                       /* umschließt auch umflossene Bilder */
.ed img.mimg { max-width: 100%; height: auto; border-radius: 2px; box-shadow: 0 1px 4px rgba(0,0,0,.3); }
.mimg.c { display: block; margin: .5em auto; }
.mimg.l { float: left;  margin: .25em .9em .4em 0; }
.mimg.r { float: right; margin: .25em 0 .4em .9em; }
.mimg.i { display: inline-block; vertical-align: middle; margin: 0 .25em; }
body.editing .ed img.mimg { cursor: grab; touch-action: none; -webkit-user-drag: none; user-select: none; }
body.dragging, body.dragging * { cursor: grabbing !important; user-select: none !important; }
.dragghost { position: fixed; z-index: 90; pointer-events: none; opacity: .7; border-radius: 3px; box-shadow: 0 6px 18px rgba(0,0,0,.4); }
#dropmark { position: fixed; z-index: 89; width: 3px; background: var(--accent); border-radius: 2px; pointer-events: none; box-shadow: 0 0 0 1px #fff; }

#imgframe { position: fixed; z-index: 80; border: 2px solid var(--accent); pointer-events: none; box-shadow: 0 0 0 1px rgba(255,255,255,.7); }
#imgframe .ibar {
  position: absolute; left: 0; display: flex; gap: 3px; pointer-events: auto; font-family: var(--ui);
  background: #fffdf6; padding: 3px; border-radius: 7px; box-shadow: 0 2px 8px rgba(0,0,0,.35);
}
#imgframe .ibar button { font: 16px/1 var(--ui); cursor: pointer; width: 30px; height: 28px; border: 1px solid rgba(0,0,0,.25); border-radius: 5px; background: #fff; color: #222; padding: 0; }
#imgframe .ibar button:hover { background: #e8eefb; }
#imgframe[data-mode="l"] [data-img="l"], #imgframe[data-mode="r"] [data-img="r"],
#imgframe[data-mode="c"] [data-img="c"], #imgframe[data-mode="i"] [data-img="i"] { background: var(--accent); color: #fff; border-color: var(--accent); }
#imgframe .ihandle {
  position: absolute; right: -9px; bottom: -9px; width: 16px; height: 16px; border-radius: 4px; pointer-events: auto;
  background: var(--accent); border: 2px solid #fff; cursor: nwse-resize; touch-action: none; box-shadow: 0 1px 4px rgba(0,0,0,.5);
}
#imgframe .ihandle.left { right: auto; left: -9px; cursor: nesw-resize; }

.paper .blk-add { display: none; gap: 6px; flex-wrap: wrap; justify-content: center; align-items: center; margin: .9em 0 0; font-family: var(--ui); clear: both; }
body.editing .paper .blk-add { display: flex; }
.blk-add button {
  font: 600 13px var(--ui); cursor: pointer; border: 1px solid rgba(0,0,0,.3); border-radius: 5px; padding: 4px 10px;
  background: #fffdf6; box-shadow: 0 1px 3px rgba(0,0,0,.25); color: #222;
}
.blk-add button:hover { background: #fff; }
.blk-hint { flex-basis: 100%; text-align: center; font: 12px var(--ui); opacity: .6; }

/* Leere Textfelder in Buchungs-/Lagerkacheln nur im Bearbeiten-Modus zeigen */
body:not(.editing) .paper.bk .ed:empty { display: none; }

/* ---------- Lagerbestand ---------- */
.stock-body { text-align: left; }
.st-row { margin: 0 0 .75em; }
.st-head { display: flex; align-items: baseline; justify-content: space-between; gap: .6em; flex-wrap: wrap; }
.paper .st-head .st-name { margin: 0; flex: 1 1 8em; min-width: 0; font-size: 1.05em; }
.st-ctl { display: flex; align-items: center; gap: .45em; font: calc(var(--u) * 1.05) var(--ui); white-space: nowrap; }
.st-num b { font-size: 1.15em; }
.st-bar { height: calc(var(--u) * 1.15); margin-top: .25em; border-radius: 99px; background: rgba(0,0,0,.14); overflow: hidden; box-shadow: inset 0 1px 2px rgba(0,0,0,.2); }
.st-bar i { display: block; height: 100%; border-radius: 99px; transition: width .25s ease; }
.st-bar.ok i  { background: rgba(60,160,70,.9); }
.st-bar.mid i { background: #e3a22b; }
.st-bar.low i { background: #cf3e3a; }
.st-adj, .st-edit button, .st-add {
  font: 700 calc(var(--u) * 1.15) var(--ui); line-height: 1; cursor: pointer; min-width: 1.9em; height: 1.9em; padding: 0 .5em;
  border: 1px solid rgba(0,0,0,.3); border-radius: 6px; background: #fffdf6; color: #222; box-shadow: 0 1px 3px rgba(0,0,0,.25);
}
.st-adj:hover, .st-edit button:hover, .st-add:hover { background: #fff; }
.st-adj { display: none; font-size: calc(var(--u) * 1.4); }
body.editing .st-adj, .stock-body.pub .st-adj { display: inline-block; }
.st-edit, .st-add { display: none; }
body.editing .st-edit { display: flex; gap: .5em; flex-wrap: wrap; align-items: center; margin-top: .35em; font: calc(var(--u) * .9) var(--ui); }
body.editing .st-add { display: block; margin: .4em auto 0; padding: 0 1em; }
.st-edit label { display: flex; align-items: center; gap: .3em; }
.st-edit input { width: 4.5em; font: inherit; padding: .2em .3em; border: 1px solid rgba(0,0,0,.3); border-radius: 4px; background: #fff; }
.st-edit button { font-size: calc(var(--u) * .9); font-weight: 600; min-width: 0; height: auto; padding: .3em .6em; }

@media (max-width: 860px) {
  .st-ctl { font-size: 16px; } .st-adj { font-size: 20px; } .st-edit { font-size: 14px; } .st-edit button, .st-add { font-size: 14px; }
  .st-bar { height: 12px; }
}
.paper .st-head, .paper .st-ctl { margin: 0; }
.paper .st-bar { margin: .25em 0 0; }
.paper .st-edit { margin-bottom: 0; }
.paper .st-head .st-name { font-size: .82em; flex: 1 1 5em; }
.st-ctl { font-size: calc(var(--u) * .95); gap: .35em; }
.st-adj { font-size: calc(var(--u) * 1.1); min-width: 1.7em; height: 1.7em; padding: 0 .4em; }
body.editing .st-edit { font-size: calc(var(--u) * .8); }
.st-edit input { width: 3.8em; }