/* ---------- Schriften (lokal eingebunden, kein Google-Request) ----------
   Figtree = Fließtext, Unbounded = Überschriften (Design „KlimaTeam“) */
@font-face { font-family: "Figtree"; font-weight: 400; font-style: normal; font-display: swap; src: url("assets/fonts/figtree-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Figtree"; font-weight: 600; font-style: normal; font-display: swap; src: url("assets/fonts/figtree-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "Figtree"; font-weight: 700; font-style: normal; font-display: swap; src: url("assets/fonts/figtree-latin-700-normal.woff2") format("woff2"); }
@font-face { font-family: "Unbounded"; font-weight: 800; font-style: normal; font-display: swap; src: url("assets/fonts/unbounded-latin-800-normal.woff2") format("woff2"); }
/* (optional wählbar in den Seiteneinstellungen:) */
@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) * 5.2);   /* ungefähre Höhe der Kachel-Überschrift (nur für eingeklappte Kacheln mobil) */
  /* Farben des Designs – Navy und Grün stammen aus dem KlimaTeam-Logo */
  --navy: #304f77; --green: #8fd95a; --lime: #e9f7b5; --bar: #91d8c5; --page: #f7faf2;
  --ink: #14202e;
  --font: "Figtree", system-ui, -apple-system, "Segoe UI", sans-serif;
  --display: "Unbounded", "Figtree", system-ui, sans-serif;
  --ui: system-ui, -apple-system, "Segoe UI", sans-serif;
  --accent: #2f7d32;
  --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: var(--page);
}
/* Hintergrund fest am Bildschirm: bleibt bei jedem Seitenwechsel identisch (auch mobil, wo „fixed“ nicht greift) */
body::before {
  content: ""; position: fixed; left: 0; top: 0; width: 100%; height: 100vh; height: 100lvh; z-index: -1; pointer-events: none;
  background: var(--bg-col, var(--page)) var(--bg-img, none) center / cover no-repeat;   /* Seiteneinstellungen > Seite: Hintergrund */
}

/* ---------- Kopf: farbige Leiste über die ganze Breite (Logo links, Menü, Login rechts) ---------- */
.site-header { width: 100%; background: var(--bar-bg, var(--bar)); border-bottom: var(--bar-line-w, 2px) solid var(--bar-line, var(--ink)); position: var(--bar-pos, relative); top: 0; z-index: 50; }   /* Einstellungen > Menüleiste (fest: sticky) */
.site-header-in { width: min(75.6vw, 1512px); margin: 0 auto; padding: calc(var(--u) * .9) 0; display: flex; justify-content: space-between; align-items: center; gap: calc(var(--u) * 2); }
.logo-link { display: flex; align-items: center; gap: calc(var(--u) * 1.4); min-width: 0; flex: 0 1 auto; text-decoration: none; color: inherit; }
.logo { display: block; height: calc(var(--u) * 5.2 * var(--lh, 1)); width: auto; max-width: 100%; min-width: 0; object-fit: contain; }
.logo, .site-name { transition: transform .35s cubic-bezier(.3,1.5,.5,1), filter .3s; }
.logo { filter: drop-shadow(0 calc(var(--lsh, 0px) * .4) var(--lsh, 0px) rgba(0,0,0,.45)); }   /* Einstellungen > Namenslogo-Schatten */
.logo-link[data-lfx="tilt"] :is(.logo, .site-name), .logo-link[data-lfx="tilt-grow"] :is(.logo, .site-name) { transform: rotate(-4deg); }
.logo-link[data-lfx="tilt"]:hover :is(.logo, .site-name) { transform: rotate(0deg); }
.logo-link[data-lfx="grow"]:hover :is(.logo, .site-name) { transform: scale(1.08); }
.logo-link[data-lfx="tilt-grow"]:hover :is(.logo, .site-name) { transform: rotate(0deg) scale(1.08); }
.logo[hidden], .logo-mark[hidden], .site-name:empty { display: none; }
/* Seitenname als Text, solange kein Logo hochgeladen ist */
.site-name { font: 800 calc(var(--u) * 2.1) / 1.1 var(--name-font, var(--display)); text-transform: uppercase; color: var(--navy); overflow-wrap: anywhere; }
/* Zeichen links neben dem Logo; Effekt je nach Einstellung (data-fx am .logo-link) */
.logo-mark { display: block; height: calc(var(--u) * 4.6 * var(--mh, 1)); width: auto; flex: none; transition: transform .35s cubic-bezier(.3,1.5,.5,1), filter .3s; }
.logo-link[data-fx="tilt"] .logo-mark, .logo-link[data-fx="tilt-grow"] .logo-mark { transform: rotate(-20deg); }
.logo-link[data-fx="tilt"]:hover .logo-mark { transform: rotate(0deg); }
.logo-link[data-fx="grow"]:hover .logo-mark { transform: scale(1.15); filter: drop-shadow(0 3px 4px rgba(0,0,0,.35)); }
.logo-link[data-fx="tilt-grow"]:hover .logo-mark { transform: rotate(0deg) scale(1.15); filter: drop-shadow(0 3px 4px rgba(0,0,0,.35)); }
/* Menü: Links zu den Seiten, auf die Kacheln der Startseite verweisen */
.site-nav { display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: calc(var(--u) * .4) calc(var(--u) * 2); flex: 1 1 auto; margin-left: auto; }
.site-nav a { font: 600 calc(var(--u) * 1.25) var(--nav-font, var(--font)); color: var(--nav-col, var(--ink)); text-decoration: none; padding: .3em 0; border-bottom: 3px solid transparent; }
.site-nav a:hover { border-bottom-color: var(--nav-col, var(--ink)); }
.site-nav:empty { display: none; }

/* ---------- Kopfbild (nur Startseite): Titel groß auf Verlauf oder eigenem Bild ---------- */
.hero { position: relative; overflow: hidden; color: #fff; text-align: center; border-bottom: 2px solid var(--ink);
  background: var(--hero-bg, linear-gradient(120deg, var(--navy) 0%, #2b7290 55%, #4aa98a 100%)); }
.hero::before { content: ""; position: absolute; inset: 0; opacity: .22; pointer-events: none;   /* Puls-Linie aus dem Logo */
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 120' preserveAspectRatio='none'%3E%3Cpath d='M0 60 H90 L110 40 L135 92 L165 8 L200 110 L225 32 L245 70 L262 52 L280 60 H400' fill='none' stroke='white' stroke-width='5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 100% 70% no-repeat; }
.hero-in { position: relative; width: min(75.6vw, 1512px); margin: 0 auto; padding: calc(var(--u) * 8 * var(--hh, 1)) 0; }
.hero h1 { margin: 0; font: 800 calc(var(--u) * 5.2) / 1.08 var(--display); text-transform: uppercase; white-space: pre-line; letter-spacing: -.01em; text-shadow: 0 3px 0 rgba(20,32,46,.35); }
.hero p { margin: calc(var(--u) * 1.4) auto 0; max-width: 40em; font: 600 calc(var(--u) * 1.7) / 1.35 var(--font); white-space: pre-line; }
.hero p:empty { display: none; }

/* ---------- Fußzeile ---------- */
.site-foot { text-align: center; padding: 0 0 calc(var(--u) * 9); font: 600 calc(var(--u) * 1.2) var(--font); color: var(--navy); }
.site-foot::before { content: ""; display: block; height: 18px; margin: 0 auto calc(var(--u) * 1.2); width: min(75.6vw, 1512px);
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 600 18' preserveAspectRatio='none'%3E%3Cpath d='M0 9 H250 L262 3 L274 15 L286 1 L298 17 L308 6 L316 9 H600' fill='none' stroke='%238fd95a' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 100% 100% no-repeat; }

.container { width: min(75.6vw, 1512px); margin: calc(var(--u) * 4) auto calc(var(--u) * 3); }

/* 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: weiße Karte mit dunklem Rand und dickem Unterrand; Überschrift oben, darunter Puls-Linie ----------
   Seiteneinstellungen > Seite steuert: Papier (--paper-col/-img = Kartenfläche), Klebeband (--tape-col/-img = Überschriften-Streifen),
   Ecken (--rad), Schatten (--shd = Dicke des Unterrands), Rand (--edge). */
.card { position: relative; min-width: 0; border: 2px solid var(--edge, var(--ink)); border-radius: var(--rad, 18px); background: var(--paper-col, #fff) var(--paper-img, none) center / cover;
  box-shadow: 0 var(--shd, 4px) 0 var(--edge, var(--ink)); transition: transform .15s ease, box-shadow .15s ease; }
.card.link:hover { transform: translateY(-3px); box-shadow: 0 calc(var(--shd, 4px) + 3px) 0 var(--edge, var(--ink)); }

.tape-row { display: block; position: relative; z-index: 2; }
.tape {
  min-width: 0; padding: var(--tape-top, calc(var(--u) * 1.7)) calc(var(--u) * 1.8) var(--tape-bot, calc(var(--u) * .4));
  background: var(--tape-col, transparent) var(--tape-img, none) center / cover no-repeat;   /* Seiteneinstellungen > Seite: Klebeband = Streifen hinter der Überschrift */
  border-radius: calc(var(--rad, 18px) - 2px) calc(var(--rad, 18px) - 2px) 0 0;
}
.tape:not(:first-child) { display: none; }
.tape-title {
  font-family: var(--hf, var(--display)); color: var(--hc, var(--ink));
  font-size: calc(var(--u) * 1.35 * var(--hs, 1)); letter-spacing: .01em; line-height: 1.2; margin: 0; font-weight: 800;
  overflow-wrap: break-word; hyphens: auto; text-align: left;
}
.caps .tape-title { text-transform: uppercase; }

.paper {
  position: relative; margin: 0;
  padding: calc(var(--u) * .8) calc(var(--u) * 1.8) calc(var(--u) * 1.9);
  background: none; border-radius: 0 0 calc(var(--rad, 18px) - 2px) calc(var(--rad, 18px) - 2px);
  font-size: calc(var(--u) * 1.45 * var(--ts, 1)); line-height: 1.45;
  font-family: var(--tf, inherit); color: var(--tc, var(--ink));
  text-align: left;
  --tm: var(--tf, var(--mono));     /* Schrift der Tool-Kacheln (Lager/Geräte/ToDo): folgt der Theme-Schrift */
}
.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); font-weight: 600; }

/* Nur-Link-Kachel (kein Zettel) */
.card.linkonly { background: var(--navy); }
.card.linkonly .tape-title { color: var(--hc, #fff); }
.card.linkonly .tape { padding-bottom: var(--tape-bot, calc(var(--u) * 1.7)); background: none; }   /* Link-Kachel bekommt nie einen Streifen */
/* LEGO- und Etiketten-Kachel: keine Karte, nur der Inhalt */
.card[data-kind="lego"], .card[data-kind="labels"] { background: none; border: 0; box-shadow: none; }

/* 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; }
/* Bedienleiste an jeder Kachel im Bearbeiten-Modus: dunkle Pille mit hellen Symbolen, damit sie auf jedem Hintergrund auffällt */
.ctl {
  position: absolute; top: -34px; right: 10px; z-index: 6; gap: 2px; align-items: center;
  padding: 4px; border-radius: 999px; background: var(--ink); border: 2px solid #fff;
  box-shadow: 0 3px 10px rgba(0,0,0,.35); font-family: var(--ui);
}
.ctl button {
  font: 700 15px/1 var(--ui); cursor: pointer; color: #fff; background: transparent; border: 0;
  min-width: 36px; height: 36px; padding: 0 10px; border-radius: 999px; white-space: nowrap;
  transition: background .12s, color .12s;
}
.ctl button[data-action="card-prev"], .ctl button[data-action="card-next"] { font-size: 18px; padding: 0; width: 36px; }
.ctl button[data-action="card-edit"], .ctl button[data-action="page-edit"] { background: var(--green); color: var(--ink); margin-left: 4px; padding: 0 14px; }
.ctl button:hover { background: rgba(255,255,255,.22); }
.ctl button[data-action="card-edit"]:hover, .ctl button[data-action="page-edit"]:hover { background: #fff; }
.ctl button:focus-visible { outline: 3px solid var(--green); outline-offset: 1px; }
.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);
}
@media (max-width: 640px) {
  .ctl { right: 4px; top: -36px; }
  .ctl button { min-width: 40px; height: 40px; }
  .ctl button[data-action="card-prev"], .ctl button[data-action="card-next"] { width: 40px; }
}

/* Upload-Meldung im Kachel-Dialog und Hinweis über offenem Dialog */
.up-msg { margin: .4em 0 0; padding: .45em .8em; border-radius: 8px; font: 600 14px var(--ui); background: #eef6e6; color: #26561f; border: 1px solid #b7d9a3; }
.up-msg.err { background: #fdeceb; color: #9c1c14; border-color: #efb1ac; }
.up-msg[hidden], .toast[hidden] { display: none; }
dialog .toast { position: fixed; left: 50%; bottom: 20px; transform: translateX(-50%); z-index: 100; max-width: min(92vw, 560px);
  padding: .6em 1.1em; border-radius: 999px; background: var(--ink); color: #fff; font: 600 14px var(--ui); box-shadow: 0 4px 14px rgba(0,0,0,.4); }
dialog .toast.err { background: #b3261e; }
#f-ipv { display: inline-flex; align-items: center; justify-content: center; min-width: 4em; max-width: 12em; min-height: 3em; padding: 3px; border: 1px dashed rgba(0,0,0,.35); border-radius: 6px; background: repeating-conic-gradient(#ddd 0 25%, #fff 0 50%) 0 0 / 10px 10px; }
#f-ipv img { display: block; max-width: 100%; max-height: 7em; width: auto; height: auto; }
#f-ipv i { font: .85em var(--ui); opacity: .6; padding: 0 .5em; }
.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: 700 calc(var(--u) * 1.5) var(--font); color: var(--navy);
  border: 3px dashed var(--navy); border-radius: var(--rad, 18px); background: rgba(255,255,255,.5);
}
.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-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(--ts, 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(--ts, 1)) 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(--ts, 1)) var(--tf, 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(--ts, 1)) 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(--ts, 1)) var(--tf, 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(20,32,46,.6); }
.dlg {
  background: #fff; padding: 24px 26px 22px; border-radius: 20px; border: 2px solid var(--ink);
  box-shadow: 0 6px 0 var(--ink), 0 20px 50px rgba(0,0,0,.35); font: 16px var(--ui); max-height: 92vh; overflow: auto;
}
.dlg h2 { font: 800 22px/1.2 var(--display); text-transform: uppercase; margin: 0 0 .7em; }
.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: 700 15px var(--font); padding: 8px 18px; border-radius: 999px; border: 2px solid var(--ink); background: #fff; cursor: pointer; }
.dlg button:hover { background: var(--lime); }
.dlg button.primary { background: var(--ink); color: #fff; }
.dlg button.primary:hover { background: var(--navy); }
.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: 76px; }
  .site-header-in, .container, .hero-in { width: calc(100vw - 32px); }
  .site-header-in { gap: 8px; padding: 10px 0; }
  .logo { height: calc(44px * var(--lh, 1)); }
  .logo-mark { height: calc(48px * var(--mh, 1)); }
  .site-name { font-size: 22px; }
  .site-nav { display: none; }
  .hero-in { padding: calc(56px * var(--hh, 1)) 0; }
  .hero h1 { font-size: 9vw; } .hero p { font-size: 17px; }
  .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; }
  .site-foot { font-size: 14px; }
  .tape { padding: var(--tape-top, 18px) 18px var(--tape-bot, 4px); }
  .tape-title { font-size: calc(22px * var(--hs, 1)); }
  .paper { font-size: calc(24px * var(--ts, 1)); padding: 8px 18px 22px; }
  .wk { font-size: 13px; } .wk-d { font-size: 22px; } .wk .s { height: 20px; }
  .bk-nav, .bk-legend { font-size: 16px; } .btn-book { font-size: 32px; }
  .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; }


/* ---------- Bilder im Text ---------- */
.ed { display: flow-root; }                       /* umschließt auch umflossene Bilder */
.ed img.mimg { max-width: 100%; height: auto; border: 0; border-radius: 0; box-shadow: none; }   /* eingefügte Bilder: ohne Rahmen und Schatten */
.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; }

/* ---------- Schrift für Lager/Geräte/ToDo: IBM Plex Mono (lokal) ---------- */
@font-face { font-family: "IBM Plex Mono"; font-weight: 400; font-style: normal; font-display: swap; src: url("assets/fonts/ibm-plex-mono-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Mono"; font-weight: 700; font-style: normal; font-display: swap; src: url("assets/fonts/ibm-plex-mono-latin-700-normal.woff2") format("woff2"); }
:root { --mono: var(--font); }   /* Tool-Kacheln (Lager, Geräte, ToDo) nutzen im neuen Design ebenfalls Figtree; „Schreibmaschine“ bleibt in den Seiteneinstellungen wählbar */

/* ---------- Lagerbestand: Bezeichnung + prozentualer Balken ---------- */
.stock-body { text-align: left; font-family: var(--tm, var(--mono)); }
.st-row { margin: 0 0 .8em; cursor: pointer; }
.st-row:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.st-title { font: 400 .74em/1.3 var(--tm, var(--mono)); text-transform: uppercase; margin: 0 0 .25em; overflow-wrap: anywhere; }
.st-title b { font-weight: 700; }
.st-row:hover .st-title { color: var(--accent); }
.pct-bar { background: rgba(0,0,0,.11); padding: calc(var(--u) * .3); }
.pct-bar i { display: block; height: calc(var(--u) * 1.1); }
.pct-bar i.green  { background: #4caf5f; }
.pct-bar i.yellow { background: #f5c242; }
.pct-bar i.orange { background: #f0974a; }
.pct-bar i.red    { background: #b5241b; }
.st-add, .xk-add { display: none; font: 600 13px var(--ui); cursor: pointer; border: 1px solid rgba(0,0,0,.3); border-radius: 5px; background: #fffdf6; padding: 4px 10px; margin: .5em auto 0; }
body.editing .st-add, body.editing .xk-add { display: block; }
@media (max-width: 860px) { .pct-bar i { height: 17px; } .pct-bar { padding: 3px; } }

/* Detail-Dialog */
.s-amount { display: flex; align-items: center; justify-content: center; gap: 1em; margin: .8em 0 .4em; }
.s-num { font: 600 18px var(--ui); } .s-num b { font-size: 1.5em; }
.dlg .s-adj { font-size: 26px; width: 52px; height: 48px; padding: 0; line-height: 1; }
#s-bar .pct-bar i { height: 22px; } #s-bar .pct-bar { padding: 4px; }

/* ---------- Anmeldung ---------- */
.editbar [hidden] { display: none !important; }
.userchip {
  position: fixed; left: 14px; bottom: 14px; z-index: 50; font: 13px var(--ui); color: #222;
  background: rgba(255,253,246,.92); border: 1px solid rgba(0,0,0,.2); border-radius: 6px; padding: 5px 10px;
  box-shadow: 0 1px 3px rgba(0,0,0,.2);
}
.userchip[hidden] { display: none; }
.userchip button { font: inherit; border: 0; background: none; color: var(--accent); cursor: pointer; text-decoration: underline; padding: 0; }
.fatal { max-width: 32em; margin: 8vh auto; padding: 1.5em 2em; background: #fffdf6; border-radius: 6px; font: 16px var(--ui); box-shadow: 0 2px 8px rgba(0,0,0,.3); }
.fatal h2 { margin-top: 0; font-family: var(--font); }

/* ---------- Knöpfe (Login, Back, Edit, Formatierung): runde „Pillen“ ---------- */
.btn-pixel.btn-pixel {
  position: relative; text-decoration: none; cursor: pointer; user-select: none; border: 2px solid var(--ink);
  font: 700 15px/1 var(--font); height: 42px; padding: 0 22px; margin: 4px 6px 12px 4px; display: inline-flex; align-items: center; justify-content: center; box-sizing: border-box;
  border-radius: 999px; background: var(--b, var(--ink)); color: var(--t, #fff); box-shadow: none; transition: background .15s, color .15s, transform .15s;
}
.btn-pixel.btn-pixel:focus-visible { outline: 3px solid var(--navy); outline-offset: 3px; }
.btn-pixel.btn-pixel:hover { background: var(--green); color: var(--ink); transform: translateY(-2px); box-shadow: none; filter: none; }
.btn-pixel.btn-pixel:active { transform: translateY(0); box-shadow: none; }
/* Farbvarianten: --b Fläche, --t Schrift */
.btn-cyber { --b: var(--navy); }                              /* Edit */
.btn-green { --b: var(--green); --t: var(--ink); }            /* Back */
.btn-blue  { --b: var(--ink); }                               /* Login */
.btn-rose  { --b: #fff; --t: var(--ink); }                    /* Logout */
.btn-grey  { --b: #fff; --t: var(--ink); }                    /* Formatierung */
body.editing .btn-pixel.btn-toggle { --b: var(--green); --t: var(--ink); }   /* Done */
.btn-pixel[hidden] { display: none !important; }

/* ---------- Startseiten-Kachel: Login-Link / LEGO-Gruß ---------- */
.card.sys .tape-title { white-space: nowrap; }
.sys-click { cursor: pointer; position: relative; z-index: 2; }
.sys-click:hover .tape-title { text-decoration: underline; }
.sys-click:focus-visible { outline: 3px solid var(--accent); outline-offset: 4px; }
svg.lego { --ls: calc(var(--u) * .42); display: block; margin: 0 auto; width: min(100%, calc(var(--ls) * var(--n))); height: auto; }

/* ---------- Mobil: Kacheln eingeklappt (nur Kreppband) ---------- */
@media (max-width: 860px) {
  .editbar button.btn-pixel { font-size: 13px; padding: 0 16px; }
  svg.lego { --ls: 3.2px; }
  body:not(.editing) .card.coll .tape-row { cursor: pointer; }
  body:not(.editing) .card.coll:not(.open) .paper { display: none; }
  .card.coll .stretch { top: var(--tape-h); }
}

/* ---------- Rechts unten: Login/Logout + Edit; oben rechts: LEGO-Gruß ---------- */
.editbar-btns { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: flex-end; }
@media (max-width: 860px) {
    .editbar-btns { gap: 6px; }
}


/* Login/Logout oben rechts auf Höhe des Logos (scrollt mit) */
.site-header .btn-pixel.btn-pixel { margin: 4px 4px 4px 0; flex: none; }

/* ---------- Untere Leiste: so breit wie der Seiteninhalt ---------- */
.dock { position: fixed; bottom: 14px; left: 50%; transform: translateX(-50%); width: min(75.6vw, 1512px); z-index: 50;
  display: flex; justify-content: space-between; align-items: flex-end; gap: 12px; pointer-events: none; }
.dock > * { pointer-events: auto; }
.dock-left, .dock-right { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; position: relative; }
.dock-right { justify-content: flex-end; }
.dock .editbar-tools { display: flex; gap: 6px; flex-wrap: wrap; background: none; box-shadow: none; padding: 0; max-width: none; }
.dock .editbar-tools[hidden] { display: none; }
.dock .editbar-tools .btn-pixel.btn-pixel { height: 38px; min-width: 42px; padding: 0 14px; font-size: 13px; margin: 4px 4px 12px; }
.dock .btn-pixel.btn-pixel { margin-bottom: 12px; }
.dock .status { position: absolute; right: 4px; bottom: 100%; margin-bottom: 4px; font: 13px var(--ui); background: #fff; border: 2px solid var(--ink); padding: 3px 10px; border-radius: 999px; white-space: nowrap; }
.dock .status:empty { display: none; }
@media (max-width: 860px) { .dock { width: calc(100vw - 32px); } .dock .editbar-tools .btn-pixel.btn-pixel { height: 32px; padding: 0 8px; } }

/* Zweiter Login/Logout-Knopf unten (nur schmale Bildschirme), Kopf-Knopf nur auf dem Desktop */
.auth-dock { display: none !important; }
@media (max-width: 860px) {
  .site-header .auth-btn { display: none !important; }
  .dock .auth-dock { display: inline-flex !important; }
  .btn-pixel.btn-pixel { font-size: 13px; height: 38px; padding: 0 16px; margin: 4px 4px 10px; }
  .dock .btn-pixel.btn-pixel { margin-bottom: 10px; }
  .dock .editbar-tools .btn-pixel.btn-pixel { height: 32px; min-width: 32px; padding: 0 10px; font-size: 12px; margin: 4px 3px 10px; }
  .dock-right { gap: 6px; }
}

/* Detail-Dialoge: Felder mit „anzeigen“-Haken, Textfelder */
.s-fld { display: flex; align-items: center; gap: .8em; }
.s-fld > input[type=text] { flex: 1; min-width: 0; }
.s-fld .chk { margin: 0; white-space: nowrap; font-weight: 400; display: flex; align-items: center; gap: .3em; }
.dlg textarea { width: 100%; font: 16px var(--ui); padding: 8px 10px; border: 1px solid rgba(0,0,0,.3); border-radius: 6px; background: #fff; resize: vertical; }
.dlg h3.x-h { margin: 1em 0 .2em; font: 600 15px var(--ui); }
.x-comment { padding: .4em .6em; margin: .3em 0; background: rgba(0,0,0,.05); border-radius: 6px; font: 14px var(--ui); }
.x-comment small { opacity: .6; }
.x-status { font: 16px var(--ui); display: flex; align-items: center; gap: .6em; }

/* Ampeln */
.lamp { display: inline-block; flex: none; width: 1.15em; height: 1.15em; border-radius: 50%; border: 2px solid rgba(0,0,0,.55); vertical-align: -.15em; }
.lamp.green  { background: radial-gradient(circle at 35% 30%, #b9ffc6, #2fd04f 55%, #14862b); box-shadow: 0 0 .5em rgba(47,208,79,.8); }
.lamp.yellow { background: radial-gradient(circle at 35% 30%, #fff1b0, #ffc21a 55%, #b88300); box-shadow: 0 0 .5em rgba(255,194,26,.8); }
.lamp.grey   { background: radial-gradient(circle at 35% 30%, #f1f1f1, #a3a3a3 55%, #6b6b6b); box-shadow: none; }
.lamp.red    { background: radial-gradient(circle at 35% 30%, #ffc2bd, #ff3b30 55%, #a3160d); box-shadow: 0 0 .5em rgba(255,59,48,.8); }

/* Geräte-Manager / Status */
.xk-body { text-align: left; font-family: var(--tm, var(--mono)); }
.xk-row { display: flex; align-items: center; gap: .7em; width: 100%; background: none; border: 0; border-bottom: 1px dashed rgba(0,0,0,.2); padding: .35em .1em; cursor: pointer; font: 400 .8em var(--tm, var(--mono)); color: var(--tc, var(--ink)); text-align: left; text-transform: uppercase; }
.xk-row:hover .xk-name { color: var(--accent); }
.xk-name { flex: 1; font-weight: 700; min-width: 0; overflow-wrap: break-word; }
.xk-row small { opacity: .65; text-transform: none; white-space: nowrap; }
.xk-legend { display: flex; gap: 1em; flex-wrap: wrap; margin-top: .6em; font: .65em var(--tm, var(--mono)); opacity: .8; }
.xk-legend .lamp { width: .9em; height: .9em; margin-right: .2em; }
.xk-empty { font: 14px var(--ui); }
.btn-book:disabled { opacity: .45; cursor: not-allowed; filter: grayscale(.5); }

/* ToDo */
.td-add { display: flex; gap: .4em; margin: 0 0 .6em; }
.td-in { flex: 1; min-width: 0; font: .75em var(--tm, var(--mono)); padding: .35em .5em; border: 1px solid rgba(0,0,0,.35); background: #fff; }
.td-addbtn { font: 700 1em var(--tm, var(--mono)); cursor: pointer; border: 1px solid rgba(0,0,0,.4); background: #fffdf6; padding: 0 .7em; }
.td-list { list-style: none; margin: 0; padding: 0; }
.td-item { display: flex; gap: .5em; align-items: flex-start; padding: .35em 0; border-bottom: 1px dashed rgba(0,0,0,.2); }
.td-check { background: none; border: 0; cursor: pointer; font-size: 1.2em; line-height: 1; padding: 0; color: var(--tc, var(--ink)); }
.td-main { flex: 1; min-width: 0; }
.td-text { display: block; background: none; border: 0; padding: 0; text-align: left; cursor: pointer; font: 700 .78em/1.3 var(--tm, var(--mono)); color: var(--tc, var(--ink)); overflow-wrap: anywhere; }
.td-text:hover { color: var(--accent); }
.td-meta { font: .6em var(--tm, var(--mono)); opacity: .65; margin-top: .15em; }
.is-done .td-text { text-decoration: line-through; font-weight: 400; opacity: .7; }
.td-empty { font: .75em var(--tm, var(--mono)); opacity: .6; padding: .4em 0; }
details.td-done { margin-top: .6em; }
details.td-done summary { cursor: pointer; font: 700 .7em var(--tm, var(--mono)); text-transform: uppercase; }


/* ---------- Admin-Kacheln: dezente Marke „nur Admins“ im Klebestreifen (grau, halbtransparent) ---------- */
.card.adm-only .tape-row::before {
  content: "nur Admins"; position: absolute; right: calc(var(--u) * 1.2); top: calc(var(--u) * -1.2); z-index: 3;
  font: 700 10px/1 var(--ui); text-transform: uppercase; letter-spacing: .06em; color: var(--ink); background: var(--green); border: 2px solid var(--ink); border-radius: 999px; padding: 3px 8px; pointer-events: none;
}

/* ---------- Seiteneinstellungen (Theme) & Benutzerverwaltung ---------- */
.th textarea { font: inherit; width: 100%; padding: 4px 8px; resize: vertical; }
.th { font: .64em var(--ui); color: var(--tc, var(--ink)); }   /* em: folgt der Schriftgröße der Kachel (Seiteneinstellungen → Größe) */
.th-l { display: block; font-weight: 600; margin-bottom: .2em; }
.th h4 { margin: 1em 0 .3em; font: 700 .93em var(--ui); text-transform: uppercase; letter-spacing: .04em; opacity: .7; }
.th select, .us-q, .us-new { width: 100%; font: 1em var(--ui); padding: .43em .57em; border: 1px solid rgba(0,0,0,.3); border-radius: 5px; background: #fff; color: #111; }
.th-row { display: flex; align-items: center; justify-content: space-between; gap: .6em; margin: .35em 0; flex-wrap: wrap; }
.th-row label { font-weight: 600; flex: 1 1 8em; }
.th-c { display: flex; align-items: center; gap: .5em; flex: 2 1 12em; }
.th-c select { flex: 1; min-width: 0; } .th-c input[type=range] { flex: 1; min-width: 0; }
.th-c input[type=color] { width: 3.1em; height: 2.1em; padding: 0; border: 1px solid rgba(0,0,0,.3); background: #fff; }
.th-c output { font-size: .86em; opacity: .65; min-width: 4.5em; }
.th-x { font: 700 1.15em/1 var(--ui); cursor: pointer; border: 1px solid rgba(0,0,0,.3); border-radius: 5px; background: #fffdf6; padding: 3px 7px; }
.th-act { display: flex; gap: .5em; flex-wrap: wrap; margin-top: .6em; }
.th-act button { font: 600 .93em var(--ui); cursor: pointer; border: 1px solid rgba(0,0,0,.3); border-radius: 5px; background: #fffdf6; padding: 5px 10px; }
.us-q { margin-bottom: .5em; }
.us-list { max-height: 22em; overflow: auto; }
.us-list .xk-name { text-transform: none; }
.us-add { margin-top: .6em; }
.us-hint { font-size: .55em; }
.xk-body .hint { font: .7em var(--tm, var(--mono)); opacity: .7; margin: .4em 0; }
.th .hint { font: .86em/1.35 var(--ui); }
.xk-body .us-hint { font: .58em/1.35 var(--ui); }
.xk-body .us-q, .xk-body .us-new { font-size: .72em; }

.x-btns { display: flex; gap: .6em; flex-wrap: wrap; margin-top: .5em; }

/* ---------- ToDo: Liste oben, Eingabefeld mit Abstand darunter, kein Einzug links ---------- */
.paper .td-list { padding: 0; margin: 0; }
.paper .td-main, .paper .td-meta { margin: 0; }
.paper .td-add { margin: .9em 0 0; }
.paper .td-meta { margin-top: .15em; }
.paper .td-item { padding-left: 0; }

/* Fehlermeldung beim Speichern bleibt stehen */
.dock .status.err { color: #b3261e; font-weight: 700; background: rgba(255,240,238,.97); white-space: normal; max-width: min(90vw, 560px); }

/* ---------- LEGO-Kachel: grüne Bauplatte, Steine passen exakt auf die Noppen ---------- */
.paper.lego { background: none; padding: 0; text-align: center; }
.paper.lego div { margin: 0; }
.lego-body { cursor: pointer; padding-top: calc(var(--tape-h) / 2 - var(--u) * .5); }
.lego-body svg.lego.plate { display: block; width: 100%; height: auto; margin: 0; border-radius: 4px; }
body.editing .lego-body { cursor: default; }

/* Geräte-/Status-Zeilen: lange Zustände („nicht einsatzbereit“) rutschen in die nächste Zeile statt den Namen zu zerhacken */
.xk-row { flex-wrap: wrap; }
.xk-name { flex: 1 1 5em; min-width: 5em; }
.xk-row small { margin-left: auto; padding-left: 1.85em; }



/* LEGO-Kachel ohne Kreppband: die Platte füllt die ganze Kachel */
.card[data-kind="lego"] .paper.lego { margin: 0 calc(var(--u) * 1.15); }   /* so breit wie das Papier der anderen Kacheln */
@media (max-width: 860px) { .card[data-kind="lego"] .paper.lego { margin: 0 8px; } }
.card[data-kind="lego"] .lego-body { padding-top: 0; }
.card.adm-only[data-kind="lego"]::after {
  content: "nur Admins"; position: absolute; left: .9em; top: .7em; z-index: 3; pointer-events: none;
  font: 600 10px/1 var(--ui); text-transform: uppercase; letter-spacing: .08em; color: rgba(255,255,255,.65);
}


/* ---------- Etiketten-Kachel (Prägeband) – ohne Papier und Kreppband, nur die Etiketten ---------- */
@font-face { font-family: "Special Elite"; font-weight: 400; font-style: normal; font-display: swap; src: url("assets/fonts/special-elite-latin-400-normal.woff2") format("woff2"); }
.card[data-kind="labels"] .lb-wrap { padding: calc(var(--u) * 1.2) calc(var(--u) * 1.15); }
.lb-body { display: flex; flex-direction: column; gap: .5em; align-items: flex-start; font-size: 100%; }
.lb-body[data-align="center"] { align-items: center; }
.lb-body[data-align="right"] { align-items: flex-end; }
/* Ein Etikett: schwarzes Prägeband, Buchstaben weiß und erhaben. Farben: --lb-bg / --lb-fg, Neigung: transform (per Style gesetzt) */
.lb { display: block; width: fit-content; max-width: 100%; box-sizing: border-box; padding: .44em .8em .2em; border-radius: .14em; font: 400 1.25em/1.2 "Special Elite", var(--ui); letter-spacing: .1em; text-align: center; text-decoration: none; overflow-wrap: break-word; white-space: pre-wrap;
  color: var(--lb-fg); background: var(--lb-bg);
  box-shadow: 0 1px 1.5px rgba(0,0,0,.35);
  -webkit-text-stroke: .03em var(--lb-bg); }   /* Kontur in Bandfarbe über der Schrift = dünnere Buchstaben */
.lb.caps { text-transform: uppercase; }
.paper a.lb, a.lb, a.lb:visited { color: var(--lb-fg); }
.lb.lk { cursor: pointer; transition: filter .2s; }
.lb.lk:hover { filter: brightness(1.2); }
body.editing .lb { cursor: pointer; outline: 1px dashed rgba(255,255,255,.7); outline-offset: 3px; }
.card.adm-only[data-kind="labels"]::after { content: "nur Admins"; position: absolute; left: .9em; top: .2em; z-index: 3; pointer-events: none; font: 600 10px/1 var(--ui); text-transform: uppercase; letter-spacing: .08em; color: rgba(255,255,255,.75); text-shadow: 0 0 2px rgba(0,0,0,.6); }
@media (max-width: 860px) { .lb { font-size: 1.05em; } .card[data-kind="labels"] .lb-wrap { padding: 8px; } }

/* ---------- Seiteneinstellungen > Seite: Bild-Auswahl (Vorschau + Knöpfe) ---------- */
.th .br-img { display: inline-flex; align-items: center; justify-content: center; min-width: 3.2em; max-width: 9em; min-height: 2.2em; padding: 2px; border: 1px dashed rgba(0,0,0,.3); border-radius: 4px; background: repeating-conic-gradient(#ddd 0 25%, #fff 0 50%) 0 0 / 10px 10px; }
.th .br-img img { display: block; max-width: 100%; max-height: 2.6em; width: auto; height: auto; }
.th .br-img i { font: .8em var(--ui); opacity: .6; padding: 0 .4em; }
.th input[type="text"].br-ctl { flex: 1; min-width: 0; font: inherit; padding: 4px 8px; }


/* ---------- Seite „Einstellungen“ (#/einstellungen) ---------- */
.set-intro { margin: 0 0 calc(var(--u) * 2); font: 600 16px var(--font); }
/* Einstellungs-Kacheln: gleiche Masonry-Logik wie die Seiten (.grid-3), aber 2 Spalten und senkrechter Abstand = waagerechter Abstand.
   Überschrift und Kartenfläche folgen den Kachel-Einstellungen (keine festen Größen), nur das Formular darin bleibt gut lesbar. */
.set-grid.grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.set-grid > .cell { padding-bottom: var(--gap); }
.set-card .th { font: 15px/1.35 var(--ui); color: var(--ink); }
.set-card .th h4 { margin: 1em 0 .2em; font: 800 12px var(--ui); text-transform: uppercase; letter-spacing: .06em; color: var(--navy); }
.set-card .th-row label { flex: 1 1 11em; }
.set-card .xk-body { font-family: var(--ui); }
.mn-list { display: flex; flex-direction: column; gap: 4px; }
.mn-row { display: flex; align-items: center; gap: 6px; padding: 4px 8px; border: 2px solid var(--ink); border-radius: 12px; background: #fff; }
.mn-vis { flex: 1; display: flex; align-items: center; gap: 8px; font-weight: 600; cursor: pointer; }
.mn-row button { font: 700 12px var(--ui); width: 30px; height: 28px; border: 2px solid var(--ink); border-radius: 999px; background: #fff; cursor: pointer; padding: 0; }
.mn-row button:hover:not(:disabled) { background: var(--lime); }
.mn-row button:disabled { opacity: .3; cursor: default; }
@media (max-width: 860px) { .set-grid.grid-3 { grid-template-columns: 1fr; } .set-grid > .cell { padding-bottom: var(--gap); } }

/* Vorschau auf der Einstellungs-Seite: bleibt beim Scrollen sichtbar und nutzt dieselben Variablen wie die echte Seite */
.set-preview { position: sticky; top: calc(var(--hdr-h, 0px) + 6px); z-index: 20; margin: 0 0 calc(var(--u) * 2); padding: 10px 12px 12px;
  background: var(--bg-col, var(--page)) var(--bg-img, none); border: 2px dashed var(--ink); border-radius: 14px; }
.set-preview .pv-lbl { display: block; font: 800 11px var(--ui); letter-spacing: .08em; text-transform: uppercase; color: var(--navy); margin-bottom: 6px; }
.pv-grid { display: grid; grid-template-columns: 2fr 1fr; gap: 14px; align-items: start; }
.pv-grid .paper p { margin: 0; }
@media (max-width: 860px) { .set-preview { position: static; } .pv-grid { grid-template-columns: 1fr; } }

/* Bild-Kachel: gleicher Rahmen wie alle Kacheln, das Bild füllt die Fläche */
.card[data-kind="image"] { overflow: visible; }   /* das Bild beschneidet .img-tile selbst; sonst würde die Bedienleiste im Bearbeiten-Modus abgeschnitten */
.img-tile { position: relative; height: var(--ih, 240px); overflow: hidden; border-radius: calc(var(--rad, 18px) - 2px); background: rgba(0,0,0,.05); }
.img-pic { display: block; width: 100%; height: 100%; object-fit: cover; -webkit-user-drag: none; }
.img-empty { height: 100%; display: flex; align-items: center; justify-content: center; text-align: center; padding: 12px; font: 600 14px var(--ui); opacity: .55; }
body:not(.editing) .img-empty { visibility: hidden; }
.img-txt { position: absolute; inset: 0; display: flex; padding: calc(var(--u) * 1.6); pointer-events: none; font-family: var(--hf, var(--display)); color: #fff; }
.img-txt span { display: inline-block; max-width: 100%; white-space: pre-line; overflow-wrap: anywhere; line-height: 1.2; font-weight: 800; padding: .25em .6em; border-radius: calc(var(--rad, 18px) / 2); }
.img-txt.sh-dark span { background: rgba(20,32,46,.55); }
.img-txt.sh-light span { background: rgba(255,255,255,.65); }
.img-txt.sh-light { color: var(--ink); }
.img-txt.p-tl { align-items: flex-start; justify-content: flex-start; } .img-txt.p-tc { align-items: flex-start; justify-content: center; text-align: center; }
.img-txt.p-tr { align-items: flex-start; justify-content: flex-end; text-align: right; } .img-txt.p-ml { align-items: center; justify-content: flex-start; }
.img-txt.p-mc { align-items: center; justify-content: center; text-align: center; } .img-txt.p-mr { align-items: center; justify-content: flex-end; text-align: right; }
.img-txt.p-bl { align-items: flex-end; justify-content: flex-start; } .img-txt.p-bc { align-items: flex-end; justify-content: center; text-align: center; }
.img-txt.p-br { align-items: flex-end; justify-content: flex-end; text-align: right; }
.card[data-kind="image"].link:hover .img-pic { filter: brightness(1.05); }
#g-image .row { align-items: center; }
#g-image .row button { width: auto; flex: 0 0 auto; padding: .5em 1.2em; }