/* Bunk Media CD – identische Designsprache wie bunk-media.de:
   Anthrazit #111, warmes Gold (tokens.css), Inter + Fraunces-Italic-Akzente,
   Bone/Paper-Flächen, runde Karten, sanfte Reveals & Hover-Lifts. */
@font-face { font-family: Inter; src: url(/static/fonts/inter.woff2) format("woff2"); font-weight: 100 900; }
@font-face { font-family: Fraunces; src: url(/static/fonts/fraunces-italic.woff2) format("woff2"); font-style: italic; font-weight: 100 900; }

/* Design-Tokens kommen zentral aus tokens.css (gemeinsam mit der
   Kundenansicht) — hier bewusst keine eigene :root-Definition mehr. */
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-font-smoothing: antialiased; }
body { margin: 0; font-family: Inter, system-ui, sans-serif; background: var(--paper);
  color: var(--ink); min-height: 100vh; }

h1 { font-size: 1.75rem; font-weight: 700; letter-spacing: -.01em; margin: 0; }
/* h2 ist wieder eine echte Überschrift; die goldene Kleinst-Zeile der
   Formularsektionen ist eine KLASSE (M2: Semantik und Optik getrennt). */
h2 { font-size: 1.15rem; font-weight: 700; margin: 1.4rem 0 .4rem; }
.section-eyebrow { font-size: .78rem; text-transform: uppercase;
  letter-spacing: .14em; color: var(--gold-dark); font-weight: 600;
  margin: 1.6rem 0 .4rem; }
.gold { color: var(--gold); }
.serif { font-family: Fraunces, serif; font-style: italic; font-weight: 500; }

/* ---------- Reveals (wie .reveal auf der Website) ---------- */
@keyframes reveal { from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: none; } }
.reveal { animation: reveal .6s cubic-bezier(.22,1,.36,1) both; }
.reveal.d1 { animation-delay: .08s; }
.reveal.d2 { animation-delay: .16s; }
@media (prefers-reduced-motion: reduce) {
  .reveal { animation: none; }
  * { transition-duration: .01ms !important; }
}

/* Skip-Link: unsichtbar, bis er per Tastatur fokussiert wird. */
.skip-link { position: absolute; left: .75rem; top: -3rem; z-index: 60;
  background: var(--ink); color: #fff; padding: .55rem 1rem;
  border-radius: 0 0 12px 12px; font-size: .85rem; font-weight: 600;
  text-decoration: none; transition: top var(--t-fast) ease; }
.skip-link:focus { top: 0; }

/* ---------- Topbar ---------- */
.topbar { display: flex; justify-content: space-between; align-items: center;
  background: var(--ink); color: #fff; padding: .85rem 1.5rem;
  position: sticky; top: 0; z-index: 10; }
/* .brand ist ein Button (Heimweg zur Projektliste) im Look des Logos. */
.brand { display: flex; align-items: center; gap: .7rem;
  background: none; border: 0; padding: 0; font: inherit; color: inherit;
  cursor: pointer; }
.brand-logo { height: 40px; width: auto; display: block; }
.brand span { font-weight: 400; letter-spacing: .02em; color: #ffffff99;
  font-family: Fraunces, serif; font-style: italic; font-size: .95rem; }
.topbar-right { display: flex; gap: .9rem; align-items: center;
  font-size: .88rem; color: #ffffffcc; }

section { max-width: 1200px; margin: 0 auto; padding: 2rem 1.5rem; }
.center { display: grid; place-items: center; min-height: 72vh; }
.page-head { display: flex; align-items: center; gap: 1rem;
  margin-bottom: 1.4rem; flex-wrap: wrap; }
.page-head h1 { flex: 1; }

.ki-run-head .field-help { margin: .35rem .1rem 0; }
.eyebrow { font-size: max(.75rem, 12px); text-transform: uppercase; letter-spacing: .16em;
  color: var(--gold-dark); font-weight: 600; margin: 0 0 .5rem; }

/* ---------- Karten ---------- */
.card { background: #fff; border: 1px solid var(--line); border-radius: var(--r-xl);
  padding: 1.5rem 1.6rem; box-shadow: var(--shadow-card); }
.login { width: min(380px, 92vw); display: grid; gap: 1rem; padding: 2rem; }
.login h1 { font-size: 2rem; }
.login .sub { margin: -0.4rem 0 .2rem; color: var(--ink-soft); font-size: .9rem; }

/* ---------- Formulare ---------- */
label { display: grid; gap: .35rem; font-size: .8rem; font-weight: 600;
  color: var(--ink-soft); }
input, select, textarea { font: inherit; padding: .6rem .75rem;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-m); background: #fff; color: var(--ink);
  transition: border-color var(--t-fast) ease, box-shadow var(--t-fast) ease; }
/* Maus-Fokus: goldene Border statt Ring; Tastatur-Fokus behält den
   opaken Ring über :focus-visible (Regel weiter unten). */
input:focus:not(:focus-visible), select:focus:not(:focus-visible),
textarea:focus:not(:focus-visible) { outline: none;
  border-color: var(--gold); box-shadow: 0 0 0 3px var(--gold-20); }
input:focus, select:focus, textarea:focus { border-color: var(--gold); }
.row { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: .85rem; margin-top: .6rem; }
.form label { margin-top: .6rem; }

/* ---------- Buttons (Arrow-Nudge & Lift wie Website) ---------- */
/* Grundfeedback für ALLE Buttons — auch Chips und Spezialknöpfe, die
   (noch) kein .btn tragen: Drücken ist immer spürbar. Opacity statt
   transform, damit transform-positionierte Elemente nicht springen. */
button { cursor: pointer; }
button:disabled { cursor: not-allowed; }
button:not(:disabled):active { opacity: .75; }
.btn { font: inherit; font-weight: 600; border-radius: var(--r-pill); padding: .6rem 1.35rem;
  cursor: pointer; border: 1px solid transparent;
  transition: transform var(--t-fast) ease, background var(--t-fast) ease, box-shadow var(--t-fast) ease; }
.btn:not(:disabled):active { transform: translateY(0) scale(.98); opacity: 1; }

/* Lade-Zustand: busy(btn, …) in app.js setzt aria-busy — der Button
   zeigt einen Ring statt Text und nimmt keine Klicks mehr an.
   !important, weil der State jede Farb-Variante (.ghost/.topbar)
   schlagen muss. */
.btn[aria-busy="true"] { position: relative;
  color: transparent !important; pointer-events: none; }
.btn[aria-busy="true"]::after { content: ""; position: absolute;
  inset: 0; margin: auto; width: 1em; height: 1em; border-radius: 50%;
  border: 2px solid currentcolor; border-color: var(--line-strong);
  border-top-color: transparent; animation: btn-spin .7s linear infinite; }
.btn.primary[aria-busy="true"]::after { border-color: #ffffff88;
  border-top-color: transparent; }
@keyframes btn-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .btn[aria-busy="true"]::after { animation: none;
    border-top-color: inherit; opacity: .55; }
}
.btn.primary { background: var(--ink); color: #fff; }
.btn.primary:hover { transform: translateY(-2px); box-shadow: 0 10px 24px #11111133; }
.btn.ghost { background: transparent; border-color: var(--line); color: inherit; }
.btn.ghost:hover { background: var(--bone); transform: translateY(-1px); }
.topbar .btn.ghost { color: #fff; border-color: #ffffff44; padding: .45rem 1.05rem; }
.topbar .btn.ghost:hover { background: #ffffff1a; }
/* Aktive Ansicht in der Topbar sichtbar machen (aria-current="page"). */
.topbar .btn.ghost[aria-current="page"] { background: #ffffff;
  color: var(--ink); border-color: #ffffff; }

/* ---------- Projektkarten ---------- */
.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(270px, 1fr));
  gap: 1.1rem; }
.cards .card { cursor: pointer; position: relative;
  transition: transform var(--t-slow) var(--ease-out), box-shadow var(--t-slow) ease; }
.cards .card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lift); }
.cards h3 { margin: 0 0 .35rem; font-size: 1.02rem; }
.cards .meta { font-size: .8rem; color: var(--ink-soft); }
.cards .tpl { display: inline-block; margin-top: .7rem; font-size: max(.75rem, 12px);
  background: var(--gold-soft); color: var(--gold-dark); border: 1px solid var(--gold-20);
  padding: .18rem .65rem; border-radius: var(--r-pill); font-weight: 600; }
.cards .del { position: absolute; top: .9rem; right: .9rem; border: none;
  background: none; cursor: pointer; color: #6f6c66; font-size: 1rem;
  transition: color var(--t-fast) ease, transform var(--t-fast) ease; }
.cards .del:hover { color: var(--error); transform: scale(1.15); }
.cards .del.warn { color: var(--error); font-size: .78rem; font-weight: 600; }
.cards .dup { position: absolute; top: .9rem; right: 2.6rem; border: none;
  background: none; cursor: pointer; color: #6f6c66; font-size: 1rem;
  transition: color var(--t-fast) ease, transform var(--t-fast) ease; }
.cards .dup:hover { color: var(--gold-dark); transform: scale(1.15); }

/* Leerzustand mit direkter Aktion (Projekte, Vorlagen-Filter) */
.leer-hinweis { grid-column: 1 / -1; display: grid; gap: .7rem;
  justify-items: start; padding: 1.2rem 0; }

/* ---------- Editor ---------- */
.editor { display: grid; grid-template-columns: minmax(320px, 420px) 1fr;
  gap: 1.2rem; align-items: start; }
/* Grid-Falle: min-width:auto lässt Spalten mit breitem Inhalt (Zoom!)
   aufblähen statt zu scrollen */
.editor > * { min-width: 0; }
@media (max-width: 900px) { .editor { grid-template-columns: 1fr; } }

.chips { display: flex; flex-wrap: wrap; gap: .45rem; margin-bottom: 1rem; }
.chips button { font: inherit; font-size: .77rem; padding: .34rem .8rem;
  border-radius: var(--r-pill); border: 1px solid var(--line-strong); background: #fff; cursor: pointer;
  transition: background var(--t-fast) ease, color var(--t-fast) ease, border-color var(--t-fast) ease,
    transform .18s ease; }
.chips button:hover { transform: translateY(-1px); background: var(--bone); }
.chips button.active { background: var(--ink); color: #fff; border-color: var(--ink); }

.preview-frame { background: var(--bone); border-radius: var(--r-l); padding: .7rem;
  display: grid; place-items: center; min-height: 320px; position: relative; }
.preview-frame img { max-width: 100%; border-radius: 10px;
  box-shadow: 0 14px 36px #11111126; opacity: 0; transform: scale(.985);
  transition: opacity .45s ease, transform .45s var(--ease-out); }
.preview-frame img.loaded { opacity: 1; transform: none; }

/* Render-Spinner: drei goldene Punkte */
.spinner { position: absolute; inset: 0; display: grid; place-items: center;
  pointer-events: none; opacity: 0; transition: opacity var(--t-fast) ease; }
.spinner.on { opacity: 1; }
.spinner i { width: 9px; height: 9px; border-radius: 50%; background: var(--gold);
  display: inline-block; margin: 0 4px; animation: pulse 1s ease-in-out infinite; }
.spinner i:nth-child(2) { animation-delay: .15s; }
.spinner i:nth-child(3) { animation-delay: .3s; }
@keyframes pulse { 0%, 100% { opacity: .25; transform: scale(.85); }
  50% { opacity: 1; transform: scale(1); } }

.hint { font-size: .78rem; color: var(--ink-soft); }
.error { color: var(--error); font-size: .85rem; min-height: 1.1em; margin: .4rem 0 0; }

/* ---------- Aufklapp-Sektionen (Farben/Systemtexte) ---------- */
details.section { margin-top: 1.1rem; border-top: 1px solid var(--line);
  padding-top: .9rem; }
details.section summary { cursor: pointer; list-style: none; font-size: .78rem;
  text-transform: uppercase; letter-spacing: .14em; font-weight: 600;
  color: var(--gold-dark); display: flex; align-items: center; gap: .5rem; }
details.section summary::-webkit-details-marker { display: none; }
details.section summary::after { content: "+"; margin-left: auto;
  font-size: 1rem; color: var(--ink-soft); transition: transform var(--t-slow) ease; }
details.section[open] summary::after { transform: rotate(45deg); }
.color-row { display: flex; gap: 1.6rem; margin-top: .8rem; flex-wrap: wrap; }
.color-field { display: grid; gap: .4rem; }
.color-name { font-size: .8rem; font-weight: 600; color: var(--ink-soft); }
.color-input { display: flex; align-items: center; border: 1px solid var(--line-strong);
  border-radius: var(--r-m); overflow: hidden; background: #fff; width: 158px;
  transition: border-color var(--t-fast) ease, box-shadow var(--t-fast) ease; }
.color-input:focus-within { border-color: var(--gold);
  box-shadow: 0 0 0 3px var(--gold-20); }
.color-input input[type=color] { appearance: none; -webkit-appearance: none;
  border: none; padding: 0; width: 44px; height: 40px; cursor: pointer;
  background: none; }
.color-input input[type=color]::-webkit-color-swatch-wrapper { padding: 6px; }
.color-input input[type=color]::-webkit-color-swatch { border: none;
  border-radius: 7px; }
.color-input .hex { border: none; border-radius: 0; padding: .45rem .3rem;
  width: 100%; font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
  font-size: .86rem; letter-spacing: .04em; }
.color-input .hex:focus:not(:focus-visible) { outline: none;
  box-shadow: none; }
.color-input.invalid { border-color: var(--error);
  box-shadow: 0 0 0 3px #b3261e22; }
.tpl-chip { display: inline-flex; align-items: center; gap: .4rem;
  align-self: start; font: inherit; font-size: max(.75rem, 12px); font-weight: 600;
  color: var(--ink-soft); background: var(--bone); border: 1px solid var(--line);
  border-radius: var(--r-pill); padding: .22rem .7rem .22rem .3rem; cursor: pointer;
  transition: background var(--t-fast) ease, color var(--t-fast) ease, transform var(--t-fast) ease; }
.tpl-chip:hover { background: var(--gold-soft); color: var(--gold-dark);
  transform: translateY(-1px); }
.tpl-chip i { width: 18px; height: 18px; border-radius: 50%;
  border: 1px solid #00000022; display: inline-block; }
#system-texts label { margin-top: .6rem; }
#system-texts .screens { font-weight: 400; color: #77746d; font-size: max(.75rem, 12px); }

/* ---------- Vorlagen-Verwaltung (M2-①) ---------- */
.badge { display: inline-block; font-size: max(.75rem, 12px); font-weight: 600;
  border-radius: var(--r-pill); padding: .16rem .6rem; border: 1px solid var(--line);
  color: var(--ink-soft); background: var(--bone); }
.badge.gold { background: var(--gold-soft); color: var(--gold-dark);
  border-color: var(--gold-20); }
.badge.warn { background: var(--error-soft); color: var(--error); border-color: #b3261e22; }
.vorlage-actions { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .9rem; }
.vorlage-actions .btn { padding: .38rem .9rem; font-size: .78rem; }
.cards .card.archiviert { opacity: .55; }

/* Filterleiste: Suche + Kategorie-Chips + Copyright (Lizenz-Sicht) */
.vorlagen-filter { display: flex; align-items: center; gap: .8rem;
  flex-wrap: wrap; margin: .2rem 0 1rem; }
#vorlagen-suche { max-width: 320px; border-radius: var(--r-pill); }
#vorlagen-copyright { max-width: 260px; border-radius: var(--r-pill);
  font-size: .8rem; font-weight: 600; color: var(--ink-soft); }
.bulk-actions { display: flex; align-items: center; gap: .6rem;
  flex-wrap: wrap; margin: -.4rem 0 1rem; padding: .55rem .9rem;
  border: 1px dashed var(--gold); border-radius: 14px;
  background: var(--gold-soft); }
.bulk-actions .bulk-info { font-size: .8rem; font-weight: 600;
  color: var(--gold-dark); }
.bulk-actions .btn { padding: .32rem .8rem; font-size: .76rem; }
.badge.cr { background: #fff; }

/* Logo = Heimweg zur Projektliste */
.topbar .brand { cursor: pointer; }

/* Print-Feinschliff: Automatik-Budgets dezenter als bewusste Overrides */
.fein-widthbar.auto { opacity: .5; }

/* Screen-Chips: Gruppen-Überschriften (Foto/Video/E-Mail/Druck) */
#screen-chips .chip-gruppe { flex-basis: 100%; font-size: max(.75rem, 12px);
  font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: var(--ink-soft); margin: .4rem 0 -.15rem; }
#screen-chips .chip-gruppe:first-child { margin-top: 0; }

/* Gewählter Slot: Panel-Zeile ↔ Anker synchron markiert */
.fein-slot-row { cursor: pointer; border-radius: 10px;
  transition: background var(--t-fast) ease, box-shadow var(--t-fast) ease; }
.fein-slot-row.selected { background: var(--gold-soft);
  box-shadow: 0 0 0 1px var(--gold); }

/* Gespeichert-Anzeige im Feinschliff */
#fein-save { color: var(--gold-dark); font-weight: 600; min-width: 7.5rem;
  text-align: right; }

/* Animierte Vorschau-Overlays (Loops mittig, Countdown zentriert) —
   liegen als GIF über der scharfen PNG-Vorschau */
.preview-frame { position: relative; }
#preview-overlay { display: none; position: absolute; left: 50%; top: 50%;
  transform: translate(-50%, -50%); pointer-events: none; }
/* Die Einblende-Regel ".preview-frame img" startet ALLE Vorschaubilder
   bei opacity 0, aber nur #preview-img bekommt je die Klasse "loaded".
   Das GIF-Overlay (Countdown/Verarbeitung/Danke) blendet deshalb mit
   seiner eigenen "on"-Klasse ein; das zentrierende translate gewinnt als
   ID-Regel ohnehin gegen das scale der Einblende-Regel. Schatten und
   Eckenrundung der Bildregel gehoeren nicht auf eine transparente
   Animationsebene - sonst zeichnet der Schatten die GIF-Box nach. */
#preview-overlay { box-shadow: none; border-radius: 0; }
#preview-overlay.on { display: block; opacity: 1; }
#preview-overlay.loop { width: 48.96%; }      /* 940/1920 des Screens */
#preview-overlay.countdown { width: 53.33%; } /* 1024/1920 des Screens */

/* Druck-Chips in der Screen-Leiste + Lightbox (Groß-Ansicht) */
#screen-chips button.druck { border-style: dashed; }
#preview-img.loaded { cursor: zoom-in; }
#lightbox { position: fixed; inset: 0; z-index: 200;
  background: rgb(17 17 17 / .88); display: grid; place-items: center;
  padding: 3vh 3vw; backdrop-filter: blur(10px); }
.lightbox-shell { width: min(1600px, 96vw); height: min(94vh, 1100px);
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto;
  grid-template-rows: auto minmax(0, 1fr) auto; gap: .65rem;
  padding: .8rem; border: 1px solid #ffffff24; border-radius: 20px;
  background: #181817; box-shadow: 0 30px 90px rgb(0 0 0 / .55); }
.lightbox-head { grid-column: 1 / -1; display: flex; align-items: center;
  justify-content: space-between; gap: .8rem; color: #fff; }
.lightbox-actions { display: flex; gap: .4rem; flex-wrap: wrap;
  justify-content: flex-end; }
.lightbox-actions .btn { color: #fff; border-color: #ffffff35;
  padding: .4rem .85rem; font-size: .76rem; }
#lightbox img { grid-column: 2; grid-row: 2; align-self: center;
  justify-self: center; max-width: 100%; max-height: 100%; border-radius: var(--r-m);
  background: #fff; box-shadow: 0 30px 80px rgb(0 0 0 / .5);
  transform: translate3d(0, 0, 0);
  transition: opacity var(--t-fast) ease, transform var(--t-fast) ease; }
/* Animationsebene der Großansicht: gleiche Grid-Zelle wie das Bild,
   beide zentriert - die Mitte stimmt damit ohne Positionsrechnung.
   Nur die Breite wird per JS relativ zum gerenderten Bild gesetzt
   (Countdown 1024/1920, Loop-Panel 940/1920 des Screens). */
#lightbox #lightbox-overlay { display: none; background: transparent;
  box-shadow: none; border-radius: 0; pointer-events: none; }
#lightbox #lightbox-overlay.on { display: block; }
.lightbox-nav { align-self: center; width: 42px; height: 42px;
  border-radius: 50%; border: 1px solid #ffffff35; background: #ffffff10;
  color: #fff; font-size: 2rem; cursor: pointer; }
.lightbox-nav.prev { grid-column: 1; grid-row: 2; }
.lightbox-nav.next { grid-column: 3; grid-row: 2; }
#lightbox-note { grid-column: 1 / -1; margin: 0; color: #ffffffa8;
  text-align: center; }
body.modal-open { overflow: hidden; }

/* Status-Chips auf Projekt-Karten + Kunden-Link-Sektion (M3-①) */
.badge.status { margin-left: .4rem; }
.badge.status.gold { background: var(--gold-soft); color: var(--gold-dark);
  border-color: var(--gold-20); }
.badge.status.gruen { background: var(--ok-soft); color: var(--ok);
  border-color: #2c6b2f33; }
.link-zeile { border: 1px solid var(--line); border-radius: 14px;
  padding: .8rem .9rem; margin-bottom: .7rem; display: grid; gap: .5rem; }
.link-zeile.widerrufen { opacity: .55; }
.link-kopf { display: flex; justify-content: space-between; gap: .8rem;
  flex-wrap: wrap; align-items: baseline; }
.link-rechte { display: flex; gap: .9rem; flex-wrap: wrap;
  font-size: .8rem; color: var(--ink-soft); }
.link-rechte label { display: flex; align-items: center; gap: .35rem;
  cursor: pointer; }
.link-rechte input { accent-color: var(--gold); }
.link-neu { display: grid; gap: .6rem; margin-top: .4rem; }
.link-ergebnis { display: flex; gap: .6rem; align-items: center;
  background: var(--gold-soft); border: 1px dashed var(--gold);
  border-radius: var(--r-m); padding: .6rem .8rem; }
.link-ergebnis code { flex: 1; word-break: break-all; font-size: .78rem; }
.hint.fehler { color: var(--error); }

/* Freigabe-Banner (M3-④) */
.freigabe-banner { display: flex; align-items: center; gap: .9rem;
  flex-wrap: wrap; margin-bottom: 1rem; padding: .8rem 1.1rem;
  background: var(--ok-soft); border: 1px solid #2c6b2f33; }
.freigabe-banner strong { color: var(--ok); }
.freigabe-banner .hint { flex: 1; min-width: 14rem; }

/* Kommentare (M3-③): Kunden-Bubbles links (gold), Antworten rechts */
.badge.ungelesen { margin-left: .4rem; background: var(--gold-soft);
  color: var(--gold-dark); border-color: #b8925a55; font-weight: 700; }
#kommentare-liste { display: grid; gap: .55rem; margin: .5rem 0 .7rem; }
.kommentar { border: 1px solid var(--line); border-radius: 14px;
  padding: .6rem .8rem; max-width: 88%; font-size: .88rem; }
.kommentar.kunde { background: var(--gold-soft); border-color: var(--gold-20);
  justify-self: start; }
.kommentar.bunk { background: #fff; justify-self: end; }
.kommentar-kopf { display: flex; justify-content: space-between;
  gap: .8rem; align-items: baseline; margin-bottom: .2rem;
  font-size: .78rem; }
.kommentar p { margin: 0; white-space: pre-wrap; word-break: break-word; }
.kommentar-neu { display: flex; gap: .6rem; align-items: flex-end; }
.kommentar-neu textarea { flex: 1; border: 1px solid var(--line);
  border-radius: var(--r-m); padding: .55rem .7rem; font: inherit;
  font-size: .88rem; resize: vertical; }
.kommentar-neu textarea:focus:not(:focus-visible) { outline: none;
  border-color: var(--gold); }

/* Einstellungen (M3-③): Mail-Empfängerliste */
.mail-zeile { display: flex; align-items: center; gap: .8rem;
  border: 1px solid var(--line); border-radius: var(--r-m);
  padding: .45rem .5rem .45rem .8rem; margin-bottom: .5rem; }
.mail-zeile code { flex: 1; font-size: .85rem; word-break: break-all; }
.demo-toggle { display: flex; align-items: center; gap: .55rem;
  font-size: .92rem; font-weight: 600; cursor: pointer; margin-top: .4rem; }
.demo-toggle input { width: 18px; height: 18px; accent-color: var(--gold); }

.btn:disabled { opacity: .5; cursor: not-allowed; }

/* KI-Kategorien: Chips mit Entfernen */

/* Stationsleiste des KI-Designers: immer sichtbar, erreichte Stationen
   sind klickbar (Sprungnavigation), rechts die bisher angefallenen
   Kosten. Grundlage des Assistenten-Umbaus (Redesign-Etappe 1). */

.ki-stepper button.active { cursor: pointer; }
.ki-stepper button.active:hover {
  border-color: var(--gold); }

.ki-stepper button.active { border-color: var(--gold); color: var(--ink);
  background: #fff; }
.ki-stepper button.active b {
  background: var(--gold); color: #fff; }

/* Kandidaten-Review als Bildvergleich (Redesign-Etappe 6): links die
   aktive Fassung, rechts der neue Kandidat. */

.ki-vergleich-spalten figure.neu figcaption { color: var(--gold-dark); }
/* Spezifitaet bewusst ueber der alten Kandidaten-Kachelregel
   (.ki-decoration-candidate img: 132px/104px) - der Vergleich braucht
   grosse Bilder und Blocklayout. */

.ki-decoration-candidate .ki-vergleich-spalten figure.neu img {
  border-color: var(--gold); box-shadow: 0 0 0 1px var(--gold); }

/* Visuelle Produktions-Pipeline (Redesign-Etappe 5): Schrittkacheln je
   Konzept, die sich waehrend der Produktion mit Miniaturen fuellen. */

.ki-pipeline-schritt.fertig .ki-pipeline-kachel {
  border-color: var(--gold); color: var(--gold-dark); }

@keyframes ki-pipeline-puls { 50% { opacity: .55; } }

/* Entscheidungsdiaet (Redesign-Etappe 4): Die Konzept-Regler starten
   eingeklappt hinter einer Kurzfassung der aktuellen Wahl - Anfaenger
   sehen Empfehlungen, Experten klappen auf. */

/* Einheitliches Hilfesystem (Redesign-Etappe 3): kleine Info-Knoepfe,
   EIN Popover fuer alle Begriffe, Glossar als Nachschlagewerk. */
/* "Naechster Schritt"-Karten: klarer Abschluss der Konzept- und der
   Feinschliff-Station (aktive Fuehrung, Redesign-Nacharbeit). */

.ki-cta .hint { margin: 0; max-width: 60ch; }
.ki-cta .btn { flex: none; }

/* Feldtitel + Info-Knopf bleiben EINE Zeile - sonst schiebt der Knopf
   die Eingabefelder benachbarter Optionen aus der Flucht. */

.ki-primary-action .btn { min-width: min(100%, 240px); }
.ki-primary-action .field-help { flex: 1 1 260px; }
.field-help { display: block; font-size: .75rem; line-height: 1.42;
  font-weight: 400; color: var(--ink-soft); }
.field-help strong { color: var(--ink); font-weight: 650; }

.ki-quality-auto .hint { margin: .2rem 0 0; }

.ki-naehe-start .field-help { min-height: 2.8em; }

.ki-event-quelle.warn { color: var(--error); font-weight: 650; }

.ki-concept-tab.active { border-color: var(--gold); background: var(--surface-warm);
  box-shadow: inset 0 0 0 1px #b8925a35; }

.freigabe-leiste .hint { margin-top: .2rem; }

.ki-konzept.aus { opacity: 1; background: var(--surface-hint);
  border-color: var(--line-mid); border-style: dashed; }

.ki-konzept .stil { font-style: italic; }

.ki-konzept-meta .swatch { width: 18px; height: 18px; border-radius: 50%;
  border: 1px solid var(--line); display: inline-block; }
.ki-konzept .fonts { font-size: .78rem; color: var(--ink-soft); }

.ki-contract-row .field-help { min-height: 2.7em; }

.ki-prompt .field-help { margin: .35rem 0; }

.konzept-status.ok { color: var(--gold-dark); }

/* Mini-Wireframe: Komposition sichtbar, bevor ein Bild existiert */

/* Beispiel-Mottos (D66) — Chips füllen das Feld statt es zu ersetzen */

/* KI-Kostenübersicht (D65) */
.kosten-uebersicht { display: grid; gap: .35rem; margin-top: .6rem; }
.kosten-zeile { display: flex; justify-content: space-between;
  align-items: baseline; padding: .4rem .7rem; border-radius: 10px;
  background: #fff; border: 1px solid var(--line); font-size: .88rem; }
.kosten-zeile.warn { border-color: var(--error); color: var(--error); }

/* Kostenloses Nachjustieren an der Variante (D64) */

/* Schieberegler mit Wertanzeige und das Zurücksetzen der Fläche (P4) */

.ki-regler .wert { float: right; font-weight: 400; color: var(--gold-dark); }

.ki-regler .field-help { min-height: 2.8em; }

.ki-position-coordinates > .field-help { grid-column: 1 / -1; min-height: 0; }

.ki-icon-choice .field-help, .ki-edge-choice .field-help { min-height: 0; margin: 0; }
.ki-icon-choice .icon-sets { margin-top: .45rem; }
.ki-icon-choice .icon-chip { min-width: 92px; }

/* Das Vorschaubild nimmt den Klick entgegen, der die Textfläche setzt */
.ki-variante .vorschau.setzbar { cursor: crosshair; }

.ki-variante .vorschau { transition: opacity var(--t-fast) ease; }

.ki-output-grid img.is-refreshing, #lightbox-img.is-refreshing,
.ki-output-grid img.is-render-pending, #lightbox-img.is-render-pending {
  opacity: .48; will-change: opacity; }

.ki-variante { cursor: default !important; overflow: visible; }
.ki-variante:hover { transform: none !important; box-shadow: var(--shadow-card) !important; }
.ki-variante > h3 { font-size: 1.12rem; letter-spacing: -.015em; }

/* Format-Tabs: ein grosses Bild pro Format statt drei Miniaturen. */

/* Kontextsensitive Steuerspalte: Der Format-Tab entscheidet, welche
   Regler-Bloecke sichtbar sind ([data-fein-kontext] traegt die Zuordnung,
   mehrere Kontexte sind leerzeichengetrennt). */
.ki-variante[data-fein-tab="screen"] [data-fein-kontext]:not([data-fein-kontext~="screen"]),
.ki-variante[data-fein-tab="print_single"] [data-fein-kontext]:not([data-fein-kontext~="print_single"]),
.ki-variante[data-fein-tab="print_strip"] [data-fein-kontext]:not([data-fein-kontext~="print_strip"]),
.ki-variante[data-fein-tab="animation"] [data-fein-kontext]:not([data-fein-kontext~="animation"]) {
  display: none; }

/* Animations-Buehne: Countdown-GIF und Overlay-Bogen auf dunkler Flaeche. */

.ki-quality.warn { background: var(--surface-warm); border-color: #e9bd6c; }
.ki-quality.error { background: #fff5f2; border-color: #c96a5d; }

.ki-quality-level.warn::before { background: #aa7222;
  box-shadow: 0 0 0 3px #aa722224; }
.ki-quality-level.error::before { background: #a04337;
  box-shadow: 0 0 0 3px #a0433724; }

.ki-quality-level > .hint {
  grid-column: 2; margin: 0; }

.ki-ergebnis.ok { color: var(--gold-dark); }

/* Wartende Variante: Skelett statt leerer Kasten (D62) */

@keyframes skelett { 0% { background-position: 100% 0; }
  100% { background-position: 0 0; } }

/* „Material Bloom“: drei stabile Zielkacheln statt generischem Spinner.
   Nur Transform/Opacity animieren, damit der Browser nicht neu layoutet. */

@keyframes bloom-wash { from { opacity: .38; transform: scale(.9) rotate(-2deg); }
  to { opacity: .92; transform: scale(1.08) rotate(3deg); } }
@keyframes bloom-photo { from { opacity: .28; transform: translateY(8px); }
  to { opacity: .9; transform: translateY(0); } }
@keyframes bloom-motif { from { opacity: .25; transform: scale(.65) rotate(-12deg); }
  to { opacity: .9; transform: scale(1) rotate(5deg); } }

.ki-compare-tabs .btn { padding: .35rem .75rem; font-size: max(.75rem, 12px); }
.ki-compare-tabs .active { background: var(--ink); color: #fff;
  border-color: var(--ink); }

.ki-compare-concept.active { border-color: var(--gold); background: var(--surface-warm); }

.ki-version-history .btn { padding: .25rem .65rem; font-size: max(.75rem, 12px); }
.ki-position-mode.active { color: #fff; background: var(--gold-dark);
  border-color: var(--gold-dark); }

.ki-final-review-action > .btn { flex: 0 1 auto; max-width: 100%;
  white-space: normal; overflow-wrap: anywhere; text-align: center; }

@media (max-width: 420px) {
  
  .ki-quality-level > .hint { grid-column: 1; }
  
  .ki-position-coordinates > .field-help { grid-column: 1; }
}

/* Bedienhinweise bleiben auch bei schmalen Ansichten und Browserzoom
   lesbar. Die Untergrenze gilt nur im KI-Arbeitsbereich und verändert
   weder Canvas-Maße noch exportierte Typografie. */
#view-ki .eyebrow,
#view-ki .ki-compare-tabs .btn,
#view-ki .ki-version-history .btn,
#view-ki .icon-chip,
#view-ki .icon-chip .icon-orig,
#view-ki .ki-decoration-asset-action .btn,
#view-ki .badge {
  font-size: max(.75rem, 12px);
}

@media (max-width: 720px) {
  .topbar { padding: .65rem .75rem; gap: .45rem; }
  .brand-logo { height: 32px; }
  .brand span, #username { display: none; }
  .topbar-right { gap: .35rem; margin-left: auto; font-size: max(.75rem, 12px); }
  .topbar .btn.ghost { min-height: 44px; padding: .42rem .58rem;
    font-size: max(.75rem, 12px); }
  /* seit der Planung (1a) fünf Knöpfe: die Leiste scrollt in sich statt
     die ganze Seite zu verbreitern */
  .brand { flex: none; }
  .topbar-right { min-width: 0; overflow-x: auto; scrollbar-width: none; }
  .topbar-right::-webkit-scrollbar { display: none; }
  .topbar-right .btn { flex: none; white-space: nowrap; }
  
  
  
  
  #view-ki .ki-thumb .x { width: 44px; height: 44px; top: -15px; right: -15px;
    background: transparent; box-shadow: none; isolation: isolate; }
  #view-ki .ki-thumb .x::before { content: ""; position: absolute; inset: 10px;
    z-index: -1; border-radius: 50%; background: var(--ink);
    box-shadow: 0 2px 6px rgb(0 0 0 / .25); }
  
  /* Ohne ausführbare Aktion (alles disabled, z. B. „Bereits übernommen")
     verdeckt die Leiste keinen Inhalt mehr, sondern fließt im Text mit. */
  .ki-takeover-actions:not(:has(.btn:not(:disabled))) { position: static;
    box-shadow: none; background: transparent; border: 0; padding: 0; }
  
  .ki-takeover-actions .hint { min-width: 0; overflow: hidden;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
  
  /* Mehrzeilig darf die Leiste nicht kleben - sie wuerde den halben
     Bildschirm verdecken. */
  
  
  
  
  
  
  
  .ki-run-alert-actions .btn, .ki-cost-actions .btn { flex: 1; }
  
  
  
  
  
  
  
  
  
  
  
  .lightbox-shell { padding: .5rem; }
  .lightbox-head { align-items: flex-start; }
}

/* Referenzbild-Thumbnails: weiche Kacheln + ✕-Badge */

.ki-thumb .x { position: absolute; top: -7px; right: -7px; width: 22px;
  height: 22px; border-radius: 50%; border: none; background: var(--ink);
  color: #fff; font-size: 12px; line-height: 1; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 2px 6px rgb(0 0 0 / .25);
  transition: transform .12s ease, background .12s ease; }
.ki-thumb .x:hover { background: #000; transform: scale(1.12); }

/* Drag & Drop: die ganze Zeile leuchtet als Ablagefläche auf */

/* Button-Icon-Sets im Feinschliff */
.icon-sets { display: flex; gap: .5rem; flex-wrap: wrap; margin-top: .5rem; }
.icon-chip { display: flex; flex-direction: column; align-items: center;
  gap: .35rem; padding: .55rem .7rem; border: 1px solid var(--line);
  border-radius: var(--r-m); background: #fff; cursor: pointer;
  font-size: max(.75rem, 12px); font-weight: 600; color: var(--ink-soft); }
.icon-chip.active { border-color: var(--gold); color: var(--gold-dark);
  background: var(--gold-soft); }
.icon-chip .icon-mini { display: flex; gap: .25rem; align-items: center;
  min-height: 26px; }
.icon-chip .icon-mini img { width: 24px; height: 24px; }
.icon-chip .icon-orig { font-size: max(.75rem, 12px); color: var(--ink-soft);
  border: 1px dashed var(--line); border-radius: 6px; padding: .2rem .4rem; }

/* Technische Fotoränder: kleine CSS-Skizzen halten die Auswahl schnell und
   zeigen den Charakter, ohne zusätzliche Vorschaudateien zu benötigen. */

.photo-edge-chip.active { border-color: var(--gold); color: var(--gold-dark);
  background: var(--gold-soft); }

/* V4-Gestaltungsregie: lokale Rahmen und Ornamente bleiben getrennt. */

.ki-decoration-artifact.is-saving { opacity: .68; }

.ki-decoration-mode.active { border-color: var(--gold); color: var(--ink);
  box-shadow: inset 0 0 0 1px #b8925a40; }

/* Eingeklappte Erklaerungen ("Warum empfiehlt Breeze das?" / Pruefdetails):
   Neugier wird beantwortet, ohne die Station mit Jargon zu fluten. */

/* Event-Typ-Wahl in der Eventdaten-Karte: sichtbar + kostenlos wechselbar. */

.ki-eventtyp-chip.active { border-color: var(--gold);
  background: var(--surface-warm); color: var(--ink);
  box-shadow: inset 0 0 0 1px #b8925a35; }

.ki-eventtyp-wahl .field-help { flex-basis: 100%; margin: 0; }

/* Abschnitts-Header der Steuerspalte: Pruefen -> Anpassen -> Uebernehmen. */

.ki-decoration-frame .field-help { margin: 0; }

.btn:focus-visible, button:focus-visible, select:focus-visible,
input:focus-visible, textarea:focus-visible, summary:focus-visible {
  outline: 3px solid var(--focus-ring); outline-offset: 3px; }

.ki-decoration-asset-action .btn { font-size: max(.75rem, 12px); padding: .35rem .65rem; }
.ki-decoration-asset-action .field-help { flex: 1 1 210px; }

.ki-decoration-candidate .vorlage-actions { margin-top: .4rem; }
/* Aussortierte Versuche sind Information, kein Alarm: neutrale Flaeche
   statt Fehlerrot - der rote Ton bleibt echten Fehlschlaegen vorbehalten. */

.ki-decoration-candidate.is-test-only .badge { background: var(--surface-warm);
  color: var(--ink-soft); border: 1px solid var(--line-mid); }

.ki-decoration-artifact.is-saving .ki-decoration-mode-icon {
  animation: decoration-breathe .8s ease-in-out infinite alternate;
  will-change: opacity, transform; }
@keyframes decoration-breathe {
  from { opacity: .48; transform: translate3d(0, 0, 0) scale(.96); }
  to { opacity: .9; transform: translate3d(0, 0, 0) scale(1); }
}

@media (prefers-reduced-motion: reduce) {
  .ki-decoration-artifact.is-saving .ki-decoration-mode-icon {
    animation: none !important; opacity: .72; }
  .ki-output-grid img.is-refreshing,
#lightbox-img.is-refreshing {
    transform: none; }
}

@media (max-width: 420px) {
  
  
  .ki-cost-actions .btn { width: 100%; }
}

@media (max-width: 600px) {
  .page-head { align-items: flex-start; }
  
  .ki-primary-action .btn { width: 100%; }
  
  .freigabe-leiste > .btn { width: 100%; }
  
  
  
  
  
}

/* KI-Design: Varianten-Galerie */
.ki-variante label { display: grid; gap: .3rem; font-size: .78rem;
  font-weight: 600; color: var(--ink-soft); margin-top: .6rem; }
.ki-variante input { padding: .55rem .8rem; border: 1px solid var(--line);
  border-radius: 10px; font-size: .92rem; width: 100%; }

.ki-variante .meta a { color: var(--gold-dark); }

/* Vorlagen-Thumbnail (Ready-Screen) auf der Karte */
.cards .card .vorschau { width: 100%; aspect-ratio: 16 / 9;
  object-fit: cover; border-radius: 14px; border: 1px solid var(--line);
  background: var(--bone); margin-bottom: .75rem; display: block; }

/* „Scharfer" Bestätigungs-Zustand (confirmClick) + Canvas-Panel */
.btn.warn { border-color: var(--error); color: var(--error);
  background: var(--error-soft); }
.canvas-panel { max-width: 430px; margin-bottom: 1rem; display: grid;
  gap: .5rem; }
.canvas-panel label { display: grid; gap: .35rem; font-size: .8rem;
  font-weight: 600; color: var(--ink-soft); }
.katchips { display: flex; gap: .45rem; flex-wrap: wrap; }
.katchip { border: 1px solid var(--line); background: transparent;
  border-radius: var(--r-pill); padding: .32rem .85rem; font-size: .78rem;
  font-weight: 600; color: var(--ink-soft); cursor: pointer;
  transition: background var(--t-fast) ease, border-color var(--t-fast) ease,
    color .15s ease, transform .15s ease; }
.katchip:hover { transform: translateY(-1px); border-color: var(--gold); }
.katchip.active { background: var(--gold-soft); color: var(--gold-dark);
  border-color: var(--gold); }

/* Karten-Details: Farbpunkt + Bearbeiten-Formular */
.farbdot { display: inline-block; width: .85em; height: .85em;
  border-radius: 50%; margin-right: .45rem; vertical-align: -0.06em;
  box-shadow: inset 0 0 0 1px rgb(17 17 17 / .12); }
.vorlage-edit { margin-top: .9rem; padding-top: .9rem;
  border-top: 1px dashed var(--line); display: grid; gap: .6rem; }
.vorlage-edit label { display: grid; gap: .3rem; font-size: .78rem;
  font-weight: 600; color: var(--ink-soft); }
.vorlage-edit .ed-row { display: flex; gap: .8rem; flex-wrap: wrap; }
.vorlage-edit .ed-row label { flex: 1 1 140px; }
.ed-pill { display: flex; align-items: center; gap: .45rem; }
.ed-pill input[type="color"] { width: 42px; height: 32px; padding: 2px;
  border: 1px solid var(--line); border-radius: var(--r-s); background: #fff;
  cursor: pointer; }
.ed-pill .ed-farbe-hex { width: 96px; font-family: ui-monospace, monospace; }
.ed-farbe-hex.invalid { border-color: var(--error); }
.freigabe { display: flex; align-items: center; gap: .5rem; margin-top: .8rem;
  font-size: .8rem; font-weight: 600; color: var(--ink-soft); cursor: pointer; }
.freigabe input { accent-color: var(--gold); width: 16px; height: 16px; }

/* ---------- Feinschliff (M2-③) ---------- */
.fein-toolbar { display: flex; align-items: center; gap: .8rem;
  justify-content: space-between; flex-wrap: wrap; margin-bottom: .7rem; }
.fein-scroll { overflow: auto; max-height: 74vh; display: block; }
#fein-stage { position: relative; width: max-content; margin: 0 auto; }
#fein-overlay { position: absolute; inset: 0; }
#fein-frame img { user-select: none; display: block; }
.fein-marker.selected { box-shadow: 0 0 0 4px #b8925a55, 0 1px 6px #11111155; }
.fein-guide { position: absolute; background: var(--gold); opacity: .55;
  pointer-events: none; display: none; }
#fein-guide-v { width: 1.5px; top: 0; bottom: 0; }
#fein-guide-h { height: 1.5px; left: 0; right: 0; }

/* Fokus-/Vollbild-Modus: Bühne füllt das Fenster, Panel wird zur Lade */
#btn-fein-panel, #btn-panel-close { display: none; }
body.fein-fokus .topbar,
body.fein-fokus #view-feinschliff .page-head { display: none; }
body.fein-fokus #view-feinschliff { max-width: none; padding: .6rem 1rem; }
body.fein-fokus #view-feinschliff .editor { display: block; }
body.fein-fokus #btn-fein-panel { display: inline-block; }
body.fein-fokus #view-feinschliff .card.preview { box-shadow: none;
  border: none; padding: .6rem .9rem; }
body.fein-fokus .fein-scroll { max-height: calc(100vh - 110px); }
/* Toolbar hat IMMER Vorrang vor der Panel-Lade (Buttons bleiben klickbar).
   Wichtig: Die reveal-Animation der Karte erzeugt einen Stacking-Context,
   der das z-index einsperren würde → im Fokus-Modus abschalten. */
body.fein-fokus #view-feinschliff .card { animation: none !important; }
body.fein-fokus .fein-toolbar { position: relative; z-index: 70;
  transition: margin-right var(--t-slow) var(--ease-out); }
/* Offene Lade: Toolbar rückt nach links, statt über dem Panel zu liegen */
body.fein-fokus.fein-panel-open .fein-toolbar {
  margin-right: calc(min(380px, 94vw) + 12px); }
body.fein-fokus #fein-form { position: fixed; top: 0; right: 0; bottom: 0;
  width: min(380px, 94vw); z-index: 60; overflow: auto; margin: 0;
  border-radius: 0; box-shadow: -14px 0 44px #11111126;
  padding-top: 3rem;
  transform: translateX(105%); transition: transform var(--t-slow) var(--ease-out); }
body.fein-fokus.fein-panel-open #fein-form { transform: none; }
body.fein-fokus #btn-panel-close { display: flex; position: absolute;
  top: .6rem; right: .8rem; border: none; background: var(--bone);
  width: 32px; height: 32px; border-radius: 50%; align-items: center;
  justify-content: center; cursor: pointer; font-size: 1rem;
  color: var(--ink-soft); }
body.fein-fokus #btn-panel-close:hover { color: var(--error); }
@media (max-width: 560px) {
  body.fein-fokus #fein-form { width: 100vw; }
  /* Vollflächiges Panel: Toolbar dahinter ausblenden (✕ schließt) */
  /* Nur der Ausweg bleibt sichtbar — sonst säße man auf Touch-Geräten
     im Fokusmodus fest (ESC gibt es dort nicht). */
  body.fein-fokus.fein-panel-open .fein-toolbar > * { visibility: hidden; }
  body.fein-fokus.fein-panel-open #btn-fein-fokus { visibility: visible; }
}
/* Panel-Zeilen brechen auf schmalen Breiten sauber um (ID-Selektor:
   gewinnt unabhängig von der Regel-Reihenfolge gegen die Grid-Basis) */
@media (max-width: 1099px) {
  #fein-form .fein-slot-row { display: flex; flex-wrap: wrap; align-items: end; }
  #fein-form .fein-slot-row .fein-slot-name { flex-basis: 100%; }
  #fein-form .fein-slot-row label { flex: 1 1 72px; }
}
.fein-marker { position: absolute; width: 16px; height: 16px;
  border-radius: 50%; background: var(--gold); border: 2.5px solid #fff;
  box-shadow: 0 1px 6px #11111155; transform: translate(-50%, -50%);
  cursor: grab; }
.fein-marker:active { cursor: grabbing; }
.fein-marker .tag { position: absolute; left: 50%; top: -22px;
  transform: translateX(-50%); font-size: max(.75rem, 12px); font-weight: 700;
  background: #111111cc; color: #fff; border-radius: 6px;
  padding: .1rem .4rem; white-space: nowrap; pointer-events: none; }
.fein-widthbar { position: absolute; height: 0;
  border-top: 2px dashed #b8925acc; transform: translate(-50%, -50%);
  pointer-events: none; }
.fein-slot-row { display: grid;
  grid-template-columns: 1.2fr repeat(3, .8fr) auto; gap: .4rem;
  align-items: end; margin-top: .5rem; }
.fein-slot-row label { font-size: max(.75rem, 12px); }
.fein-slot-row input { padding: .35rem .5rem; font-size: .82rem; }
.fein-slot-row input[type=color] { padding: 2px; height: 32px; width: 44px; }
.fein-slot-name { font-size: .78rem; font-weight: 700; color: var(--ink); }
.kontrast-row { display: flex; align-items: center; gap: .5rem;
  margin-top: .45rem; font-size: .78rem; color: var(--ink-soft); }
.kontrast-row i { width: 14px; height: 14px; border-radius: 50%;
  border: 1px solid #00000022; flex: none; }
.kontrast-row b { font-variant-numeric: tabular-nums; }
.kontrast-row.warn b { color: var(--error); }
.kontrast-row .btn { padding: .2rem .6rem; font-size: max(.75rem, 12px); }
.fein-color-row { display: flex; align-items: center; gap: .5rem;
  margin-top: .45rem; font-size: .78rem; font-weight: 600;
  color: var(--ink-soft); }
.fein-color-row input[type=color] { padding: 2px; height: 30px; width: 42px;
  border-radius: var(--r-s); border: 1px solid var(--line-strong); }
.fein-font-row { display: grid; grid-template-columns: 1fr 1.4fr;
  gap: .5rem; align-items: center; margin-top: .45rem; font-size: .78rem;
  font-weight: 600; color: var(--ink-soft); }
.fein-decoration-advanced { margin-top: 1rem; padding-top: .8rem;
  border-top: 1px solid var(--line); }
.fein-decoration-advanced > summary { display: flex; align-items: center;
  justify-content: space-between; gap: .5rem; cursor: pointer;
  color: var(--ink); font-size: .82rem; font-weight: 750;
  list-style: none; }
.fein-decoration-advanced > summary::-webkit-details-marker { display: none; }
.fein-decoration-advanced > summary::after { content: "+"; font-size: 1rem;
  color: var(--gold-dark); transition: transform var(--t-fast) ease; }
.fein-decoration-advanced[open] > summary::after {
  transform: rotate(45deg); }
#fein-decoration-status { margin: .55rem 0 .7rem; color: #4c6865; }
.fein-decoration-row { display: grid; gap: .48rem; margin-top: .65rem;
  padding: .65rem; border: 1px solid var(--line); border-radius: var(--r-m);
  background: #fffdf9; transition: border-color var(--t-fast) ease,
  box-shadow .18s ease, opacity .18s ease; }
.fein-decoration-row.selected { border-color: var(--gold);
  box-shadow: 0 0 0 2px #b8925a1f; }
.fein-decoration-row.is-saving { opacity: .58; pointer-events: none; }
.fein-decoration-row-head { display: flex; align-items: baseline;
  justify-content: space-between; gap: .5rem; }
.fein-decoration-row-head strong { font-size: .76rem; color: var(--ink); }
.fein-decoration-row-head span { font-size: max(.75rem, 12px); color: var(--ink-soft);
  overflow-wrap: anywhere; }
.fein-decoration-row > label { font-size: max(.75rem, 12px); color: var(--ink-soft); }
.fein-decoration-row select, .fein-decoration-row input[type=number] {
  width: 100%; margin-top: .16rem; padding: .4rem .5rem; font-size: max(.75rem, 12px); }
.fein-decoration-transform { display: grid; grid-template-columns: 1fr 1fr;
  gap: .45rem; align-items: end; }
.fein-decoration-transform label { font-size: max(.75rem, 12px); color: var(--ink-soft); }
.fein-decoration-transform .fein-decoration-mirror {
  grid-column: 1 / -1; display: flex; align-items: center; gap: .38rem;
  min-height: 30px; color: var(--ink); }
.fein-decoration-transform .fein-decoration-mirror input { margin: 0; }
.fein-decoration-row .hint { margin: 0; font-size: max(.75rem, 12px); }
.fein-decoration-row .fein-decoration-remove {
  justify-self: start; padding: .3rem .58rem; font-size: max(.75rem, 12px); }
.fein-decoration-row-error { min-height: 0; margin: 0; font-size: max(.75rem, 12px); }
.fein-decoration-empty { margin: .5rem 0 0; padding: .65rem;
  border-radius: 10px; background: var(--bone); color: var(--ink-soft);
  font-size: max(.75rem, 12px); line-height: 1.45; }
.fein-decoration-safe { position: absolute; border: 1.5px dashed #397d77aa;
  border-radius: 9px; background: #5ea59b10; pointer-events: none; }
.fein-decoration-marker { position: absolute; width: 17px; height: 17px;
  padding: 0; border-radius: 50%; border: 2.5px solid #fff;
  background: #397d77; box-shadow: 0 1px 7px #11111155;
  transform: translate3d(-50%, -50%, 0); cursor: pointer; }
.fein-decoration-marker.selected { width: 21px; height: 21px;
  background: var(--gold-dark); }
.fein-decoration-marker span { position: absolute; left: 50%; top: -23px;
  transform: translateX(-50%); padding: .1rem .35rem; border-radius: 6px;
  color: #fff; background: #274d49e8; font-family: sans-serif;
  font-size: max(.75rem, 12px); font-weight: 700; line-height: 1.25;
  white-space: nowrap; pointer-events: none; }
@media (max-width: 560px) {
  .fein-decoration-transform { grid-template-columns: 1fr; }
  .fein-decoration-transform .fein-decoration-mirror { grid-column: auto; }
}
/* Deko-Rahmen: Fläche lässt Klicks durch (Anker darunter bleiben
   greifbar), gezogen wird an Rahmenlinie + Label */
.fein-deco { position: absolute; border: 2px dashed #b8925a99;
  border-radius: var(--r-s); transform: translate(-50%, -50%);
  pointer-events: none; }
.fein-deco .tag { position: absolute; left: 50%; top: -22px;
  transform: translateX(-50%); font-size: max(.75rem, 12px); font-weight: 700;
  background: #b8925acc; color: #fff; border-radius: 6px;
  padding: .1rem .4rem; white-space: nowrap;
  pointer-events: auto; cursor: move; }
.fein-deco .edge { position: absolute; pointer-events: auto; cursor: move; }
.fein-deco .edge.n { left: 0; right: 0; top: -6px; height: 12px; }
.fein-deco .edge.s { left: 0; right: 0; bottom: -6px; height: 12px; }
.fein-deco .edge.w { top: 0; bottom: 0; left: -6px; width: 12px; }
.fein-deco .edge.e { top: 0; bottom: 0; right: -6px; width: 12px; }

/* ---------- Export-Panel ---------- */
.export-panel { margin-bottom: 1.2rem; }
.export-head { display: flex; justify-content: space-between; align-items: baseline; }
.progress { height: 8px; background: var(--bone); border-radius: var(--r-pill);
  overflow: hidden; margin: .7rem 0; }
.progress-bar { height: 100%; width: 0; background: var(--gold);
  border-radius: var(--r-pill); transition: width .4s ease; position: relative; }
.ki-run-status[data-running="true"] .progress-bar::after { content: "";
  position: absolute; inset: 0; width: 42%; transform: translateX(-120%);
  background: linear-gradient(90deg, transparent, #ffffffa8, transparent);
  animation: ki-progress-light 2.6s cubic-bezier(.22,1,.36,1) infinite;
  will-change: transform; }
@keyframes ki-progress-light { to { transform: translateX(340%); } }

.ki-cost-pause .btn { margin-top: .45rem; }
.progress-bar.indeterminate { width: 34%;
  animation: slide 1.4s ease-in-out infinite alternate; }
/* Bar ist 34 % breit; 66 % Containerweg = 194 % der eigenen Breite.
   transform statt margin: keine Layout-Arbeit pro Frame. */
@keyframes slide { from { transform: translateX(0); }
  to { transform: translateX(194%); } }

@media (prefers-reduced-motion: reduce) {
  .ki-run-status[data-running="true"] .progress-bar::after { display: none; }
  .progress-bar.indeterminate { width: 100%; animation: none; opacity: .55; }
}

#export-download { margin-top: .4rem; display: inline-block; }
.export-warnings { margin: .35rem 0 .5rem; padding-left: 1.1rem;
  font-size: .78rem; color: var(--ink-soft); }
.export-warnings li { margin: .2rem 0; }
.export-warnings li::marker { color: var(--gold-dark); }

/* Schrift ohne ein Zeichen des Textes (z. B. „ć“) — fehlte sonst im Druck */
.zeichen-warnung { margin: .4rem 0 0; padding: .6rem .8rem; border-radius: var(--r-s);
  background: var(--surface-warm); border: 1px solid #e9bd6c; font-size: .9rem; }

/* ---------- Boxen & Settings-Profile (Paket G) ---------- */
.boxen-raster { display: grid; gap: 1rem;
  grid-template-columns: repeat(auto-fill, minmax(min(340px, 100%), 1fr)); }
.box-karte label, .profil-form label { margin-top: .5rem; }
.profile-liste { display: grid; gap: .8rem; }
.profil-karte { padding: 1rem 1.3rem; }
.profil-karte summary { cursor: pointer; display: flex; flex-wrap: wrap; gap: .3rem;
  align-items: baseline; list-style: none; }
.profil-karte summary::-webkit-details-marker { display: none; }
.profil-karte[open] summary { margin-bottom: .6rem; }
.profil-gruppe { border: 1px solid var(--line); border-radius: var(--r-m);
  padding: .5rem .9rem .8rem; margin: .9rem 0 0; }
.profil-gruppe legend { font-size: .72rem; text-transform: uppercase; letter-spacing: .12em;
  color: var(--gold-dark); font-weight: 600; padding: 0 .3rem; }
label.inline { display: inline-flex; align-items: center; gap: .4rem; margin-right: 1.1rem; }
label.inline input { accent-color: var(--gold); }
.ablauf-mail { border: 1px solid var(--line); border-radius: var(--r-m); background: var(--bone);
  padding: .7rem .9rem; font-size: .85rem; margin-top: .5rem; }
.ablauf-mail .mail-kopf { display: grid; gap: .15rem; padding-bottom: .5rem;
  margin-bottom: .5rem; border-bottom: 1px solid var(--line); }
.ablauf-mail .mail-kopf span { color: var(--ink-soft); font-size: .75rem; }
.ablauf-mail .mail-text { white-space: normal; overflow-wrap: anywhere; }
.ablauf-hinweise { margin: .5rem 0 0; padding: .6rem .8rem .6rem 1.8rem; border-radius: var(--r-s);
  background: var(--surface-warm); border: 1px solid #e9bd6c; font-size: .85rem; }
#boxen-status.fehler { color: var(--error); }
.box-karte input, .box-karte select, .profil-form select, .profil-form textarea,
.profil-form input:not([type=checkbox]):not([type=radio]),
#ablauf-sektion select { width: 100%; min-width: 0; }
label.inline input { width: auto; }

/* Magic-Mirror-Vorschau (hochkant) und Box-Bereitschaft */
.preview-frame.hochkant { text-align: center; }
.preview-frame.hochkant #preview-img { max-height: 72vh; width: auto; }
.badge.ok { background: #e7f2e8; color: #2f6b36; border-color: #bfdcc2; }

/* ---------- Kalender kommender Events + Sammel-Export (Paket H4) ---------- */
.kalender { margin-bottom: 1.4rem; }
.kalender-kopf { display: flex; align-items: center; justify-content: space-between;
  gap: .8rem; flex-wrap: wrap; margin-bottom: .6rem; }
.kalender-kopf .section-eyebrow { margin: 0; }
.kal-monat { font-size: .8rem; font-weight: 600; color: var(--ink-soft);
  margin: 1rem 0 .4rem; }
.kal-monat:first-child { margin-top: 0; }
.kal-liste { display: grid; gap: .45rem; }
.kal-zeile { display: grid; grid-template-columns: 6.4rem minmax(0, 1fr) auto; gap: .9rem;
  align-items: center; width: 100%; text-align: left; font: inherit; color: inherit;
  background: #fff; border: 1px solid var(--line); border-radius: var(--r-l);
  padding: .65rem .9rem; cursor: pointer;
  transition: border-color var(--t-fast, .15s) ease, box-shadow var(--t-fast, .15s) ease; }
.kal-zeile:hover { border-color: var(--gold-20); box-shadow: var(--shadow-lift); }
.kal-zeile:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.kal-datum { display: grid; line-height: 1.15; font-variant-numeric: tabular-nums; }
.kal-datum b { font-size: 1.05rem; }
.kal-datum small { font-size: .72rem; color: var(--ink-soft); }
.kal-zeile.bald .kal-datum small { color: var(--gold-dark); font-weight: 600; }
.kal-name { min-width: 0; }
.kal-name strong { display: block; overflow-wrap: anywhere; }
.kal-name span { font-size: .8rem; color: var(--ink-soft); }
.kal-chips { display: flex; flex-wrap: wrap; gap: .35rem; justify-content: flex-end; }
#projekte-titel { margin: 1.8rem 0 0; }
@media (max-width: 640px) {
  .kal-zeile { grid-template-columns: 5.6rem minmax(0, 1fr); }
  .kal-chips { grid-column: 1 / -1; justify-content: flex-start; }
}
.sammel-panel { margin-bottom: 1rem; display: grid; gap: .7rem; }
.sammel-panel h3 { margin: 0; font-size: 1rem; }
.sammel-wahl { display: grid; gap: .3rem; max-height: 18rem; overflow: auto; }
.sammel-wahl label { display: flex; gap: .6rem; align-items: baseline; font-size: .88rem;
  flex-direction: row; color: var(--ink); }
.sammel-wahl label small { color: var(--ink-soft); }
.sammel-ergebnisse { display: grid; gap: .5rem; }
.sammel-ergebnis { border: 1px solid var(--line); border-radius: var(--r-m);
  padding: .55rem .75rem; }
.sammel-ergebnis > summary { cursor: pointer; display: flex; gap: .6rem; align-items: baseline;
  flex-wrap: wrap; list-style: none; }
.sammel-ergebnis > summary::-webkit-details-marker { display: none; }
.sammel-ergebnis > summary::before { content: "▸"; color: var(--ink-soft); }
.sammel-ergebnis[open] > summary::before { content: "▾"; }
.sammel-ergebnis .sammel-detail { font-size: .82rem; margin-top: .5rem; display: grid;
  gap: .35rem; }
.sammel-detail ul { margin: 0; padding-left: 1.1rem; }
.sammel-detail code { font-size: .78rem; overflow-wrap: anywhere; }
.sammel-panel .fehler:empty { display: none; }
.kal-ohne { margin: -.2rem 0 .5rem; }

/* Namen nebeneinander / Titelblock mittig (Projekt-Editor) */
.layout-wahl { margin: .4rem 0 .6rem; }
.layout-wahl .chips { margin: .35rem 0 0; }

/* ---------- Planung: Bestand, Standardzeiten, Zugänge (Paket 1a) ---------- */
.zeiten-karte { max-width: 760px; margin-bottom: 1.4rem; }
.zeiten-zeilen { display: grid; gap: .7rem; }
.zeiten-eingabe { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem;
  color: var(--ink-soft); font-size: .88rem; }
.zeiten-eingabe input[type=number] { width: 5.2rem; }
.zeiten-eingabe input[type=time] { width: 7.5rem; }
.geraet-form { max-width: 760px; margin-bottom: 1.4rem; }
.bestand-liste { display: grid; gap: 1.4rem; }
.bestand-gruppe .section-eyebrow { margin-bottom: .5rem; }
.bestand-tabelle { display: grid; gap: .4rem; }
.bestand-zeile { display: grid; grid-template-columns: minmax(0, 1fr) 4rem auto auto; gap: .8rem;
  align-items: center; background: #fff; border: 1px solid var(--line); border-radius: var(--r-l);
  padding: .55rem .9rem; }
.bestand-zeile.inaktiv { opacity: .55; }
.bestand-name { min-width: 0; display: grid; }
.bestand-name strong { overflow-wrap: anywhere; }
.bestand-zahl { font-variant-numeric: tabular-nums; font-weight: 600; text-align: right; }
.bestand-rolle { display: flex; flex-wrap: wrap; gap: .3rem; justify-content: flex-end; }
@media (max-width: 640px) {
  .bestand-zeile { grid-template-columns: minmax(0, 1fr) auto; }
  .bestand-rolle { grid-column: 1 / -1; justify-content: flex-start; }
}
.zugaenge-liste { display: grid; gap: .4rem; margin-bottom: .8rem; }
.zugang-zeile { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center;
  gap: .5rem; border: 1px solid var(--line); border-radius: var(--r-m); padding: .5rem .7rem; }
.zugang-zeile.offen { border-style: dashed; }
.row.einladung-zeile { display: flex; align-items: flex-end; flex-wrap: wrap; }
.einladung-zeile .einladung-name { flex: 1 1 14rem; }
.einladung-zeile .einladung-rolle { flex: 0 1 9rem; }
.zugang-knoepfe { display: flex; gap: .4rem; flex-wrap: wrap; }
.einladung-ergebnis { margin: .6rem 0; }
.einladung-ergebnis .row { align-items: center; }
.einladung-ergebnis input { flex: 1; font-family: ui-monospace, monospace; font-size: .8rem; }
.zeiten-karte .section-eyebrow, .geraet-form .section-eyebrow { margin-top: 0; }
@media (max-width: 640px) {
  .bestand-zeile > button { grid-column: 1 / -1; justify-self: start; }
}

/* ---------- Planung: Buchungen (Paket 1b) ---------- */
.planung-tabs { margin: 0 0 1.2rem; }
.buchungen-kopf { display: flex; justify-content: flex-end; margin: .4rem 0 .6rem; }
.buchungen-liste { display: grid; gap: .2rem; }
.kal-zeile.inaktiv { opacity: .6; }
.buchung-meta { display: block; font-size: .8rem; color: var(--ink-soft); overflow-wrap: anywhere; }
.buchung-form { max-width: 980px; margin-bottom: 1.6rem; display: grid; gap: .9rem; }
.buchung-form-kopf { display: flex; justify-content: space-between; align-items: center; gap: .6rem;
  flex-wrap: wrap; }
.buchung-form-kopf .section-eyebrow { margin: 0; }
.buchung-block { border: 1px solid var(--line); border-radius: var(--r-l); padding: .8rem 1rem 1rem;
  margin: 0; display: grid; gap: .6rem; min-width: 0; }
.buchung-block legend { padding: 0 .4rem; font-size: .78rem; font-weight: 600; letter-spacing: .08em;
  text-transform: uppercase; color: var(--gold-dark); }
.positionen { display: grid; gap: .45rem; }
.position-zeile { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem;
  border: 1px solid var(--line); border-radius: var(--r-m); padding: .45rem .6rem; background: #fff; }
.position-zeile select, .position-zeile input:not([type=checkbox]) { flex: 1 1 10rem; min-width: 0; }
.position-zeile input[type=number] { flex: 0 0 5.5rem; }
.position-art { font-size: .75rem; font-weight: 600; text-transform: uppercase; letter-spacing: .06em;
  color: var(--ink-soft); min-width: 5.6rem; }
.position-check { display: flex; align-items: center; gap: .35rem; flex-direction: row; font-size: .88rem; }
.position-weg { padding: .3rem .6rem; }
.verfuegbarkeit { display: grid; gap: .4rem; }
.verfuegbar-zeile { display: flex; flex-wrap: wrap; align-items: baseline; gap: .3rem .6rem; }
.verfuegbar-zeile > .hint:last-child { flex-basis: 100%; }
.datei-knopf { cursor: pointer; }
.status-aktionen { gap: .5rem; flex-wrap: wrap; }

/* ---------- Planung: Kalender (Paket 1c) ---------- */
.kalender-knoepfe { display: flex; flex-wrap: wrap; gap: .4rem; }
#view-planung { --kal-orange: #8f5200; --kal-orange-soft: #fff3df; }
.kal-leiste { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem 1rem; margin-bottom: 1rem; }
.kal-nav { display: flex; gap: .3rem; }
.kal-pfeil { padding-inline: .85rem; font-size: 1.15rem; line-height: 1; }
.kal-titel { margin: 0; flex: 1 1 14rem; font-size: 1.25rem; text-wrap: balance; }
.kal-ansichten { margin: 0; }

/* Monat */
.kal-raster { background: #fff; border: 1px solid var(--line); border-radius: var(--r-l); overflow: hidden; }
.kal-raster-kopf, .kal-raster-tage { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); }
.kal-raster-kopf span { font-size: .72rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase;
  color: var(--ink-soft); padding: .45rem .5rem; border-bottom: 1px solid var(--line); }
.kal-zelle { display: flex; flex-direction: column; align-items: stretch; gap: .2rem; min-width: 0;
  min-height: 6.6rem; padding: .35rem .35rem .45rem; font: inherit; text-align: left; cursor: pointer;
  background: #fff; border: 0; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.kal-zelle:nth-child(7n) { border-right: 0; }
.kal-zelle.wochenende { background: var(--surface-hint); }
.kal-zelle.fremd { background: var(--paper); }
.kal-zelle.fremd .kal-zahl { color: var(--line-strong); }
.kal-zelle:hover { background: var(--bone); }
.kal-zelle:focus-visible { outline: 2px solid var(--gold); outline-offset: -2px; }
.kal-zahl { font-size: .8rem; font-weight: 600; font-variant-numeric: tabular-nums; width: 1.6rem; height: 1.6rem;
  display: grid; place-items: center; border-radius: 50%; }
.kal-zelle.heute .kal-zahl { background: var(--ink); color: #fff; }
.kal-eintrag { display: block; font-size: .72rem; line-height: 1.35; white-space: nowrap; overflow: hidden;
  text-overflow: ellipsis; border-radius: 6px; padding: .08rem .35rem; border: 1px solid transparent;
  background: var(--gold-soft); color: var(--gold-dark); }
.kal-eintrag b { font-weight: 700; font-variant-numeric: tabular-nums; }
.kal-eintrag.typ-event { background: var(--ink); color: #fff; }
.kal-eintrag.typ-projekt { background: #fff; color: var(--ink-soft); border: 1px dashed var(--line-strong); }
.kal-eintrag.vorgemerkt { background: #fff; border: 1px dashed currentColor; }
.kal-eintrag.typ-event.vorgemerkt { color: var(--ink); }
.kal-eintrag.konflikt-vorgemerkt { color: var(--kal-orange); background: var(--kal-orange-soft); }
.kal-eintrag.konflikt-belegt { color: var(--error); background: var(--error-soft); border-color: var(--error); }
.kal-mehr { font-size: .7rem; color: var(--ink-soft); padding-left: .35rem; }

/* Belegung */
.kal-belegung { margin-top: 1.6rem; }
.kal-belegung .section-eyebrow { margin-top: 0; }
.kal-bel-scroll { overflow-x: auto; background: #fff; border: 1px solid var(--line); border-radius: var(--r-l); }
.kal-bel { min-width: 620px; padding: 0 .8rem .3rem; }
.kal-bel[data-lang="ja"] { min-width: 980px; }
.kal-bel-zeile { display: grid; grid-template-columns: 10.5rem minmax(0, 1fr); border-top: 1px solid var(--line); }
.kal-bel-kopf { border-top: 0; }
.kal-bel-name { font-size: .82rem; font-weight: 600; padding: .45rem .6rem .45rem 0; overflow-wrap: anywhere;
  position: sticky; left: 0; z-index: 4; background: #fff; }
.kal-bel-kopf > span:first-child { position: sticky; left: 0; z-index: 4; background: #fff; }
.kal-bel-name small { display: block; font-weight: 400; font-size: .72rem; color: var(--ink-soft); }
.kal-bel-tage { display: grid; grid-template-columns: repeat(var(--tage), minmax(0, 1fr)); }
.kal-bel-tage span { font-size: .72rem; color: var(--ink-soft); text-align: center; padding: .5rem 0 .4rem;
  font-variant-numeric: tabular-nums; }
.kal-bel-tage .wochenende { background: var(--surface-hint); }
.kal-bel-tage .heute { color: var(--gold-dark); font-weight: 700; }
.kal-bel-spur { --bahn-h: 1.75rem; position: relative; height: calc(var(--bahnen) * var(--bahn-h) + .5rem);
  background: linear-gradient(90deg, var(--line) 0 1px, transparent 1px) 0 0 / calc(100% / var(--tage)) 100% repeat-x; }
.kal-balken { position: absolute; top: calc(.25rem + var(--bahn, 0) * var(--bahn-h)); height: calc(var(--bahn-h) - .3rem);
  font: inherit; font-size: .72rem; font-weight: 600; text-align: left; white-space: nowrap; overflow: hidden;
  text-overflow: ellipsis; padding: 0 .45rem; border-radius: 6px; cursor: pointer; z-index: 2;
  background: var(--ink); color: #fff; border: 1px solid var(--ink); }
.kal-balken:hover { box-shadow: var(--shadow-lift); }
.kal-balken:focus-visible { outline: 2px solid var(--gold); outline-offset: 1px; }
.kal-balken.status-erledigt { background: var(--ink-soft); border-color: var(--ink-soft); }
.kal-balken.status-anfrage, .kal-balken.status-angebot { background: #fff; color: var(--ink);
  border: 1.5px dashed var(--line-strong); }
.kal-balken.konflikt-vorgemerkt { color: var(--kal-orange); background: var(--kal-orange-soft); border-color: var(--kal-orange); }
.kal-balken.konflikt-belegt { color: var(--error); background: var(--error-soft); border-color: var(--error); }
.kal-balken.status-reserviert.konflikt-belegt { color: #fff; background: var(--error); }
.kal-jetzt { position: absolute; top: 0; bottom: 0; width: 2px; margin-left: -1px; background: var(--gold); z-index: 3;
  pointer-events: none; }
.kal-legende { display: flex; flex-wrap: wrap; gap: .4rem .8rem; margin: .6rem 0 0; }
.kal-legende .kal-balken { position: static; display: inline-block; height: auto; padding: .1rem .5rem;
  cursor: default; box-shadow: none; }
.kal-bel-leer { margin-top: 1.2rem; }

/* Woche (Agenda) und Tag */
.kal-agenda-tag { font-size: 1rem; margin: 1.6rem 0 .5rem; }
.kal-agenda-tag small { font-weight: 600; color: var(--gold-dark); margin-left: .3rem; }
.kal-tag-link { font: inherit; font-weight: 700; background: none; border: 0; padding: 0; color: inherit;
  cursor: pointer; text-align: left; }
.kal-tag-link:hover { text-decoration: underline; text-underline-offset: 3px; }
.kal-termine { display: grid; gap: .5rem; }
.kal-termin { display: grid; grid-template-columns: 6.2rem minmax(0, 1fr) auto; gap: .9rem; background: #fff;
  border: 1px solid var(--line); border-left: 4px solid var(--gold); border-radius: var(--r-l); padding: .75rem 1rem; }
.kal-termin.typ-event { border-left-color: var(--ink); }
.kal-termin.typ-projekt { border-left-style: dashed; border-left-color: var(--line-strong); }
.kal-termin.vorgemerkt { border-left-style: dashed; }
.kal-termin.konflikt-vorgemerkt { border-left-color: var(--kal-orange); }
.kal-termin.konflikt-belegt { border-left-color: var(--error); }
.kal-termin-zeit { display: grid; align-content: start; line-height: 1.2; }
.kal-termin-zeit b { font-size: 1.15rem; font-variant-numeric: tabular-nums; }
.kal-termin-zeit small { font-size: .7rem; font-weight: 600; color: var(--ink-soft); text-transform: uppercase;
  letter-spacing: .07em; }
.kal-termin-text { min-width: 0; }
.kal-termin-text h4 { margin: 0 0 .3rem; font-size: 1rem; overflow-wrap: anywhere; }
.kal-termin-text h4 .badge { margin-left: .3rem; vertical-align: 1px; }
.kal-termin-text p { margin: .15rem 0; font-size: .86rem; overflow-wrap: anywhere; }
.kal-ort a, .kal-kontakt a { color: inherit; text-underline-offset: 3px; }
.kal-warnung { color: var(--error); font-weight: 600; }
.kal-warnung.weich { color: var(--kal-orange); }
.kal-design { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem .6rem; font-size: .84rem;
  margin-top: .45rem; }
.kal-design .kal-chips { justify-content: flex-start; }
.kal-termin-aktionen { display: flex; flex-direction: column; gap: .35rem; }
.kal-tag-kopf { display: flex; justify-content: flex-end; margin-bottom: .6rem; }
.kal-unterwegs { margin-top: 1.4rem; }
.kal-unterwegs ul { list-style: none; padding: 0; margin: 0; display: grid; gap: .35rem; }
.kal-unterwegs li { display: flex; flex-wrap: wrap; align-items: baseline; gap: .15rem .6rem; font-size: .86rem; }
.kal-unterwegs small { color: var(--ink-soft); font-variant-numeric: tabular-nums; }
.kal-unterwegs small.kal-warnung { color: var(--error); }
.kal-unterwegs small.kal-warnung.weich { color: var(--kal-orange); }
.kal-leer { margin: 1rem 0; }

/* Abos */
.kal-abos { margin-top: 2rem; }
.kal-abos .section-eyebrow { margin-top: 0; }
.kal-abos-liste { display: grid; }
.kal-abo { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .5rem .8rem; align-items: center;
  border-top: 1px solid var(--line); padding: .75rem 0; }
.kal-abo-text { display: grid; gap: .1rem; }
.kal-abo-text span { font-size: .85rem; color: var(--ink-soft); }
.kal-abo-text small { font-size: .76rem; color: var(--ink-soft); }
.kal-abo.aktiv .kal-abo-text small { color: var(--ok); }
.kal-abo-knoepfe { display: flex; flex-wrap: wrap; gap: .4rem; justify-content: flex-end; }
.kal-abo-link { grid-column: 1 / -1; margin: 0; }
.kal-abo-link .row { display: flex; flex-wrap: wrap; gap: .4rem; }
.kal-abo-link input { min-width: 0; flex: 1 1 16rem; }

@media (max-width: 640px) {
  .kal-zelle { min-height: 3.6rem; padding: .25rem; gap: 2px; }
  .kal-raster-kopf span { padding: .4rem .25rem; text-align: center; }
  .kal-zahl { align-self: center; }
  /* auf dem Handy nur farbige Striche — der Tag öffnet die Details */
  .kal-eintrag { font-size: 0; height: 5px; padding: 0; border-radius: 3px; }
  .kal-mehr { display: none; }
  .kal-sperre { font-size: 0; height: 3px; padding: 0; border-left: 0; background: var(--line-strong); }
  .kal-bel-zeile { grid-template-columns: 7.4rem minmax(0, 1fr); }
  .kal-termin { grid-template-columns: 4.8rem minmax(0, 1fr); gap: .6rem; padding: .7rem .8rem; }
  .kal-termin-aktionen { grid-column: 1 / -1; flex-direction: row; }
  .kal-abo { grid-template-columns: minmax(0, 1fr); }
  .kal-abo-knoepfe { justify-content: flex-start; }
}

/* ---------- Planung: Team, Kassetten, Einsatz (Paket 2) ---------- */
body.rolle-team .nur-inhaber, body.rolle-team #btn-ki5, body.rolle-team #btn-boxen,
body.rolle-team #btn-einstellungen { display: none !important; }

.kassetten-liste { display: grid; gap: .4rem; }
.kassette-zeile { display: grid; grid-template-columns: 4.2rem minmax(0, 18rem) minmax(0, 1fr); gap: .9rem;
  align-items: center; font: inherit; text-align: left; cursor: pointer; background: #fff;
  border: 1px solid var(--line); border-radius: var(--r-l); padding: .6rem .9rem; }
.kassette-zeile:hover { border-color: var(--gold-20); box-shadow: var(--shadow-lift); }
.kassette-zeile:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.kassette-zeile.inaktiv { opacity: .55; }
.kassette-nummer { font-weight: 800; font-size: 1.05rem; letter-spacing: .02em; font-variant-numeric: tabular-nums; }
.kassette-nummer.gross { font-size: 2rem; line-height: 1; }
.kassette-stand { display: grid; gap: .25rem; min-width: 0; }
.kassette-stand small, .kassette-stand span:last-child { font-size: .8rem; color: var(--ink-soft);
  font-variant-numeric: tabular-nums; }
.kassette-stand.gross span:last-child { font-size: .95rem; color: var(--ink); }
.kassette-balken { display: block; height: 8px; border-radius: var(--r-pill); background: var(--bone);
  overflow: hidden; min-width: 5rem; }
.kassette-balken > span { display: block; height: 100%; background: var(--ok); border-radius: inherit; }
.kassette-balken.knapp > span { background: var(--error); }
.kassette-karte { display: grid; gap: .9rem; margin-bottom: 1.2rem; }
.kassette-karte .section-eyebrow { margin: .4rem 0 0; }
.kassette-kopf { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 1rem; align-items: center; }
.kassette-abbuchen { display: flex; flex-wrap: wrap; align-items: flex-end; gap: .6rem; }
.kassette-abbuchen label { flex: 0 1 9rem; }
.kassette-abbuchen .kassette-notiz { flex: 1 1 12rem; }
.kassette-schnell { display: flex; gap: .35rem; }
.kassette-schnell .btn { min-width: 3.2rem; font-variant-numeric: tabular-nums; font-weight: 700; }
.kassette-aktionen { display: flex; flex-wrap: wrap; gap: .4rem; }
.kassette-protokoll { list-style: none; margin: 0; padding: 0; display: grid; }
.kassette-protokoll li { display: grid; grid-template-columns: 3.4rem minmax(0, 1fr) auto; gap: .7rem;
  align-items: center; padding: .45rem 0; border-top: 1px solid var(--line); font-size: .88rem; }
.kassette-protokoll small { display: block; color: var(--ink-soft); font-size: .76rem; }
.kassette-anzahl { font-weight: 700; font-variant-numeric: tabular-nums; text-align: right; }
.kassette-anzahl.plus { color: var(--ok); }

.einsatz-kopf { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .6rem; margin-bottom: 1rem; }
.einsatz-knoepfe { display: flex; flex-wrap: wrap; gap: .4rem; }
.einsatz-karte { margin-bottom: 1rem; }
.einsatz-karte .section-eyebrow { margin-top: 0; }
.einsatz-karte .section-eyebrow + * { margin-top: 0; }
.einsatz-titel { margin: 0 0 .8rem; font-size: 1.35rem; overflow-wrap: anywhere; }
.einsatz-titel .badge { vertical-align: 3px; margin-left: .3rem; }
.einsatz-fakten { display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: .6rem 1.4rem; margin: 0; }
.einsatz-fakten div { min-width: 0; }
.einsatz-fakten dt { font-size: .72rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase;
  color: var(--ink-soft); }
.einsatz-fakten dd { margin: .1rem 0 0; overflow-wrap: anywhere; font-variant-numeric: tabular-nums; }
.einsatz-fakten a { color: inherit; text-underline-offset: 3px; }
.einsatz-notiz { white-space: pre-line; margin: .9rem 0 0; padding: .6rem .8rem; background: var(--surface-hint);
  border-radius: var(--r-m); font-size: .9rem; }
.einsatz-kassetten { list-style: none; margin: 0 0 .6rem; padding: 0; display: grid; gap: .4rem; }
.einsatz-kassetten li { display: grid; grid-template-columns: 3.6rem minmax(0, 12rem) auto 1fr; gap: .7rem;
  align-items: center; }
.einsatz-kassetten li .btn { justify-self: end; }
.einsatz-kassette-neu { max-width: 20rem; margin-bottom: 1rem; }
.einsatz-zaehler { align-items: flex-end; gap: .6rem; }
.einsatz-zaehler label { flex: 0 1 12rem; }
.einsatz-pack-kopf { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: .4rem; }
.pack-spalten, .pack-punkt { display: grid; grid-template-columns: 2.2rem 2.2rem minmax(0, 1fr); align-items: center; }
.pack-spalten span { font-size: .68rem; font-weight: 600; text-transform: uppercase; letter-spacing: .06em;
  color: var(--ink-soft); text-align: center; }
.pack-gruppe { margin-top: .9rem; }
.pack-gruppe h4 { margin: 0 0 .3rem; font-size: .95rem; }
.pack-gruppe h4 small { font-weight: 400; color: var(--ink-soft); margin-left: .3rem; }
.pack-gruppe .kal-warnung { margin: .2rem 0 .4rem; font-size: .86rem; }
.pack-punkt { min-height: 2.6rem; border-top: 1px solid var(--line); }
.pack-punkt input { width: 1.25rem; height: 1.25rem; justify-self: center; accent-color: var(--ink); cursor: pointer; }
.pack-text { overflow-wrap: anywhere; font-size: .92rem; padding: .35rem 0; }
.pack-text small { display: block; font-size: .72rem; color: var(--ink-soft); }
.pack-punkt.zubehoer .pack-text { padding-left: 1.1rem; color: var(--ink-soft); font-size: .86rem; }
.buchung-kopf-knoepfe { display: flex; flex-wrap: wrap; gap: .4rem; margin-left: auto; }
.einsatz-knoepfe a.btn, .kassette-aktionen a.btn, .buchung-kopf-knoepfe a.btn { text-decoration: none; }

@media (max-width: 640px) {
  .kassette-zeile { grid-template-columns: 3.6rem minmax(0, 1fr); }
  .kassette-zeile > .hint { grid-column: 1 / -1; }
  .kassette-kopf { grid-template-columns: auto minmax(0, 1fr); }
  .kassette-kopf .kassette-zu { grid-column: 1 / -1; justify-self: start; }
  .kassette-schnell .btn { min-height: 48px; }
  .einsatz-kassetten li { grid-template-columns: 3.4rem minmax(0, 1fr) auto; }
  .einsatz-kassetten li .btn { grid-column: 1 / -1; justify-self: start; }
  .pack-punkt input { width: 1.5rem; height: 1.5rem; }
}

/* ---------- Sperrtage, Entfernung (Paket 4) ---------- */
.kal-sperre { display: block; font-size: .7rem; line-height: 1.35; color: var(--ink-soft); white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis; padding: 0 .35rem; border-left: 2px solid var(--line-strong);
  border-radius: 0; }
.kal-sperren-zeile { margin: 0 0 .4rem; font-size: .84rem; color: var(--ink-soft); }
.kal-sperren-zeile small { font-size: .78rem; }
.kal-tag-kopf { flex-wrap: wrap; gap: .6rem; align-items: center; }
.kal-tag-kopf .kal-sperren-zeile { margin: 0 auto 0 0; }
.kal-sperren { margin-top: 2rem; }
.kal-sperren .section-eyebrow { margin-top: 0; }
.sperre-form { display: flex; flex-wrap: wrap; align-items: flex-end; gap: .6rem; margin: .6rem 0; }
.sperre-form label { flex: 0 1 10rem; min-width: 0; }
.sperre-form .sperre-notiz { flex: 1 1 12rem; }
.sperren-liste { display: grid; }
.sperre-zeile { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: .4rem .8rem;
  border-top: 1px solid var(--line); padding: .5rem 0; font-size: .9rem; font-variant-numeric: tabular-nums; }
.row.entfernung-zeile { display: flex; align-items: flex-end; flex-wrap: wrap; gap: .6rem; }
.entfernung-zeile label { flex: 0 1 16rem; }
.entfernung-zeile a.btn { text-decoration: none; }
.personal-hinweise p { margin: .3rem 0 0; }

/* ---------- Invoice Ninja (Paket 3) ---------- */
.in-bereich { display: grid; gap: .6rem; }
.in-zeile { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem .8rem; }
.in-zeile > span:first-child { font-variant-numeric: tabular-nums; }
.in-zeile a.btn { text-decoration: none; }
.in-kandidaten-liste { list-style: none; margin: 0; padding: 0; display: grid; gap: .4rem; }
.in-kandidaten-liste li { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center;
  gap: .4rem .8rem; border: 1px solid var(--line); border-radius: var(--r-m); padding: .5rem .7rem; background: #fff; }
.in-kandidaten-liste small { display: block; color: var(--ok); font-weight: 600; font-size: .76rem; }
.in-status .btn { margin-left: .4rem; }
.in-zuordnung { display: grid; gap: .6rem; margin-top: .6rem; }
/* eine Zeile je Zuordnung: Produktnamen sind lang („Drucker inkl. 300 Sofortausdrucke“),
   ein <select> ist sonst so breit wie seine längste Option und sprengt die Karte */
.in-zuordnung-felder { display: grid; gap: .6rem; }
.in-zuordnung-felder > label { min-width: 0; }
.in-zuordnung-felder select { width: 100%; max-width: 100%; }

@media print {
  body.druck-einsatz .topbar, body.druck-einsatz #view-planung .page-head,
  body.druck-einsatz .planung-tabs, body.druck-einsatz .einsatz-kopf,
  body.druck-einsatz .einsatz-kassette-neu, body.druck-einsatz .einsatz-zaehler-bereich,
  body.druck-einsatz .einsatz-kassetten .btn, body.druck-einsatz #einsatz-status { display: none !important; }
  body.druck-einsatz { background: #fff; }
  body.druck-einsatz .card { box-shadow: none; border: 1px solid #ccc; break-inside: avoid; }
  body.druck-einsatz .pack-gruppe { break-inside: avoid; }
}