/* static/planer/planer.css – Wochen- und Tagesansicht des Marketing-Planers.
 *
 * Alles über Design-Token (--surface, --border, --primary …), damit jede Haut trägt.
 * Keine Kästchenwand: Haarlinien, ein Akzent (die Jetzt-Linie in --primary), Status als
 * schmaler Rand an der Karte statt als Pille. Reihenfarben kommen als Inline-Variable
 * --rf aus der Registry (core/planer_reihen.py).
 */
.pl-wo { --pl-label: 168px; position: relative; display: grid;
  grid-template-columns: var(--pl-label) repeat(7, minmax(0, 1fr));
  border: 1px solid var(--border); border-radius: 12px; overflow: hidden; background: var(--surface); }
.pl-wo > div { min-width: 0; border-right: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.pl-wo > div:nth-child(8n) { border-right: 0; }
.pl-wo-kopf { position: sticky; top: 0; z-index: 3; background: var(--surface2); padding: 8px 8px 6px; font-size: 12px;
  color: var(--text-dim); line-height: 1.25; }
.pl-wo-kopf b { display: block; color: var(--text); font-size: 13px; }
.pl-wo-kopf.pl-heute b { color: var(--primary); }
.pl-wo-kopf.pl-feiertag { color: var(--danger); }
.pl-wo-kopf.pl-we { background: color-mix(in srgb, var(--surface2) 70%, var(--bg2)); }
.pl-wo-label { padding: 8px 10px; font-size: 12.5px; font-weight: 600; background: var(--surface2);
  display: flex; align-items: center; gap: 8px; position: sticky; left: 0; z-index: 2; }
.pl-wo-label .pl-punkt { width: 9px; height: 9px; border-radius: 50%; background: var(--rf, var(--text-dim)); flex-shrink: 0; }
.pl-wo-label small { font-weight: 400; color: var(--text-dim); }
.pl-wo-gruppe { grid-column: 1 / -1; padding: 5px 10px; font-size: 11px; letter-spacing: 1.5px; text-transform: uppercase;
  color: var(--text-dim); background: var(--bg2); cursor: pointer; user-select: none; display: flex; align-items: center; gap: 8px; }
.pl-wo-gruppe:hover { color: var(--text); }
.pl-wo-gruppe .pl-pfeil { display: inline-block; transition: transform .15s; }
.pl-wo-gruppe.zu .pl-pfeil { transform: rotate(-90deg); }
.pl-wo-zelle { position: relative; min-height: 64px; padding: 4px 4px 22px; display: flex; flex-direction: column; gap: 3px; }
.pl-wo-zelle.pl-heute { background: color-mix(in srgb, var(--primary) 4%, var(--surface)); }
.pl-wo-zelle.pl-we { background: color-mix(in srgb, var(--bg2) 45%, var(--surface)); }
.pl-wo-zelle.pl-ziel { outline: 2px dashed var(--primary); outline-offset: -3px; background: var(--hover); }
.pl-wo-zelle.pl-kontext { min-height: 30px; padding-bottom: 4px; }
.pl-wo-plus { position: absolute; right: 4px; bottom: 3px; width: 20px; height: 20px; border-radius: 6px; border: 1px solid var(--border);
  background: var(--surface); color: var(--text-dim); font-size: 15px; line-height: 17px; text-align: center; cursor: pointer;
  opacity: 0; transition: opacity .12s; }
.pl-wo-zelle:hover .pl-wo-plus { opacity: 1; }
.pl-wo-plus:hover { color: var(--primary); border-color: var(--primary); }

/* Karte eines Eintrags */
.pl-k { display: flex; gap: 6px; align-items: flex-start; padding: 4px 6px 4px 5px; border-radius: 7px; background: var(--surface);
  border: 1px solid var(--border); border-left: 3px solid var(--rf, var(--border)); font-size: 11.5px; line-height: 1.25;
  cursor: pointer; min-width: 0; }
.pl-k:hover { background: var(--hover); }
.pl-k[draggable="true"] { cursor: grab; }
.pl-k.st-entwurf { border-style: dashed; border-left-style: solid; }
.pl-k.st-in_freigabe { border-left-color: var(--warning); }
.pl-k.st-fertig { opacity: .6; }
.pl-k.st-fertig .pl-k-t { text-decoration: none; }
.pl-k.pl-bar { padding: 2px 6px; font-size: 11px; opacity: .85; }
.pl-k.pl-bar.pl-bar-mitte { border-radius: 0; border-left-width: 1px; }
.pl-k-b { width: 38px; height: 38px; border-radius: 5px; object-fit: cover; flex-shrink: 0; background: var(--bg2); }
.pl-k-b.pl-video::after { content: ''; }
.pl-k-txt { min-width: 0; flex: 1; }
.pl-k-z { color: var(--text-dim); font-family: 'IBM Plex Mono', monospace; font-size: 10.5px; }
.pl-k-t { font-weight: 600; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; word-break: break-word; }
.pl-k-m { color: var(--text-dim); font-size: 10.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pl-k-kz { color: var(--text-dim); font-size: 10.5px; font-family: 'IBM Plex Mono', monospace; }
.pl-k .pl-kurz { display: inline-block; min-width: 18px; font-size: 9.5px; font-weight: 700; letter-spacing: .5px;
  color: var(--rf, var(--text-dim)); }

/* Kontextzeile: Feiertage, Veranstaltungen, Märkte, Produktion, Neuheiten */
.pl-kx { display: flex; align-items: center; gap: 5px; font-size: 11px; padding: 2px 4px; border-radius: 5px;
  color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pl-kx .pl-punkt { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; background: var(--kf, var(--text-dim)); }
.pl-kx.kx-feiertag { color: var(--danger); }
.pl-kx.kx-abgesagt { text-decoration: line-through; opacity: .6; }
.pl-kx:hover { background: var(--hover); }

/* Jetzt-Linie und „als Nächstes" */
.pl-now { position: absolute; top: 0; width: 2px; background: var(--primary); z-index: 4; pointer-events: none;
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--primary) 25%, transparent); }
.pl-now::before { content: attr(data-zeit); position: absolute; bottom: 6px; left: 4px; font-size: 10px; font-weight: 700;
  color: #fff; background: var(--primary); padding: 1px 5px; border-radius: 4px; font-family: 'IBM Plex Mono', monospace; }
#pl-naechstes { font-size: 12px; color: var(--text-dim); display: flex; gap: 14px; align-items: center; flex-wrap: wrap; min-height: 18px; }
#pl-naechstes b { color: var(--text); font-weight: 600; }
#pl-naechstes .pl-k-z { color: var(--primary); }

/* Plus-Menü und Eintragskarte */
.pl-menu { position: absolute; z-index: 7000; background: var(--surface); border: 1px solid var(--border); border-radius: 10px;
  box-shadow: 0 10px 30px var(--shadow); padding: 6px; min-width: 190px; }
.pl-menu div { padding: 7px 10px; border-radius: 7px; font-size: 12.5px; cursor: pointer; }
.pl-menu div:hover { background: var(--hover); color: var(--primary); }
.pl-menu .pl-menu-kopf { font-size: 11px; color: var(--text-dim); cursor: default; padding-bottom: 3px; }
.pl-menu .pl-menu-kopf:hover { background: transparent; color: var(--text-dim); }
.pl-karte { width: 560px; padding: 18px 20px; }
.pl-karte-bild { width: 100%; max-height: 300px; object-fit: contain; background: var(--bg2); border-radius: 10px; display: block; }
.pl-karte h3 { margin: 12px 0 4px; font-size: 17px; }
.pl-karte .pl-meta { font-size: 12.5px; color: var(--text-dim); display: flex; flex-wrap: wrap; gap: 4px 14px; margin-bottom: 8px; }
.pl-karte .pl-text { font-size: 13px; white-space: pre-wrap; max-height: 180px; overflow: auto; border-top: 1px solid var(--border);
  padding-top: 8px; }
.pl-karte .pl-knoepfe { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 14px; }

/* Seitenleisten (Fällig, Ideen) */
#pl-faellig { width: 340px; flex-shrink: 0; }
#pl-faellig-list { display: flex; flex-direction: column; gap: 6px; max-height: 72vh; overflow-y: auto; }

/* ── Tagesansicht ── */
.pl-tag { --pl-label: 168px; --pl-ganz: 150px; position: relative; display: grid; grid-template-columns: var(--pl-label) minmax(0, 1fr);
  border: 1px solid var(--border); border-radius: 12px; overflow: hidden; background: var(--surface); }
.pl-tag > div { min-width: 0; border-bottom: 1px solid var(--border); }
.pl-tag-label { border-right: 1px solid var(--border); }
.pl-tag-kopf { display: block; padding: 8px 10px; font-size: 12px; color: var(--text-dim); background: var(--surface2); position: sticky; top: 0; z-index: 3; }
.pl-tag-kopf b { display: block; color: var(--text); font-size: 13px; }
.pl-tag-skala { position: relative; height: 40px; background: var(--surface2); margin-left: var(--pl-ganz); border-left: 1px solid var(--border); position: sticky; top: 0; z-index: 3; }
.pl-tag-skala span { position: absolute; bottom: 4px; transform: translateX(-50%); font-family: 'IBM Plex Mono', monospace; font-size: 10.5px; color: var(--text-dim); }
.pl-tag-zeile { position: relative; display: flex; min-height: 64px; }
.pl-tag-zeile .pl-wo-plus { z-index: 2; }
.pl-tag-ganz { width: var(--pl-ganz); flex-shrink: 0; padding: 4px; display: flex; flex-direction: column; gap: 3px; border-right: 1px dashed var(--border);
  background: color-mix(in srgb, var(--bg2) 35%, var(--surface)); }
.pl-tag-ganz.pl-ziel, .pl-tag-achse.pl-ziel { outline: 2px dashed var(--primary); outline-offset: -3px; }
.pl-tag-achse { position: relative; flex: 1; min-height: 64px; }
.pl-tag-achse > i { position: absolute; top: 0; bottom: 0; width: 0; border-left: 1px solid color-mix(in srgb, var(--border) 60%, transparent); }
.pl-tag-pos { position: absolute; top: 4px; width: 190px; max-width: calc(100% - 8px); z-index: 1; }
.pl-tag-pos.pl-kx { width: auto; background: var(--surface); border: 1px solid var(--border); }
.pl-tag-pos.pl-tag-block { min-width: 60px; }
.pl-tag-achse .pl-k + .pl-k.pl-tag-pos { top: 4px; }
/* Mehrere Karten dicht beieinander: staffeln, damit nichts verdeckt wird */
.pl-tag-achse .pl-tag-pos:nth-of-type(2n) { top: 56px; }
.pl-tag-achse .pl-tag-pos:nth-of-type(3n) { top: 108px; }
.pl-tag-zeile:has(.pl-tag-pos:nth-of-type(2n)) { min-height: 120px; }
.pl-tag-zeile:has(.pl-tag-pos:nth-of-type(3n)) { min-height: 170px; }
.pl-tag-programm { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: flex-start; gap: 3px; padding: 34px 0 4px; pointer-events: none; }

.pl-tag-spur { position: relative; height: 36px; pointer-events: auto; }
.pl-tag-spur-name { position: absolute; left: 6px; top: -1px; font-size: 10px; color: var(--text-dim); z-index: 1; background: color-mix(in srgb, var(--surface) 80%, transparent); padding: 0 4px; border-radius: 4px; }
.pl-tag-bl { position: absolute; top: 5px; height: 26px; border-radius: 5px; background: color-mix(in srgb, #5b6b8a 14%, var(--surface)); border: 1px solid color-mix(in srgb, #5b6b8a 45%, var(--border));
  display: flex; align-items: center; gap: 2px; padding: 0 4px; overflow: hidden; cursor: pointer; }
.pl-tag-bl:hover { background: color-mix(in srgb, #5b6b8a 24%, var(--surface)); }
.pl-tag-bl-img { width: 22px; height: 22px; object-fit: cover; border-radius: 3px; flex-shrink: 0; background: var(--bg2); }
.pl-tag-bl-punkt { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; display: inline-block; }
.pl-tag-bl-mehr { font-size: 10px; color: var(--text-dim); }

/* ── Geister (Vorschläge) ── */
.pl-k.pl-geist { opacity: .55; border-style: dashed; border-left-style: dashed; background: color-mix(in srgb, var(--surface) 70%, var(--bg2)); }
.pl-k.pl-geist:hover { opacity: 1; }
.pl-geist-marke { font-size: 9.5px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: var(--primary); }
.pl-geist-chip { font-size: 11px; line-height: 1.25; padding: 3px 6px; border-radius: 6px; margin-top: 2px; border: 1.5px dashed var(--text-dim);
  color: var(--text-dim); opacity: .7; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; cursor: grab; background: var(--surface); }
.pl-geist-chip:hover { opacity: 1; color: var(--text); }
.pl-geist-kopf { font-size: 12px; color: var(--text-dim); margin-top: 4px; }
.pl-geist-warum { font-size: 12.5px; margin-top: 6px; }

/* ── Kopf, Fuß, Pillen ── */
.pl-kopf { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; }
.pl-ansichten { display: flex; border: 1px solid var(--border); border-radius: 10px; overflow: hidden; }
.pl-ansichten .btn { border: 0; border-radius: 0; }
.pl-ansichten .btn + .btn { border-left: 1px solid var(--border); }
.pl-haken { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; padding: 0 6px; cursor: pointer; user-select: none; }
.pl-pille { background: var(--text); color: var(--surface); border-radius: 10px; padding: 0 7px; font-size: 11px; margin-left: 4px; }
.pl-pille-akzent { background: var(--primary); color: #fff; }
.pl-fuss { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-top: 14px; padding-top: 10px; border-top: 1px solid var(--border);
  font-size: 12px; color: var(--text-dim); }

/* ── Monat: ein Raster mit Haarlinien, KW-Spalte, heute als einziger Akzent ── */
.pl-m { display: grid; grid-template-columns: 44px repeat(7, minmax(0, 1fr)); border: 1px solid var(--border); border-radius: 12px;
  overflow: hidden; background: var(--surface); }
.pl-m > div { min-width: 0; border-right: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.pl-m > div:nth-child(8n) { border-right: 0; }
.pl-m-wt { padding: 8px 10px 7px; font-size: 11px; letter-spacing: 1px; text-transform: uppercase; color: var(--text-dim);
  background: var(--surface2); }
.pl-m-wt .pl-kurz { display: none; }
.pl-m-kwkopf { text-align: center; padding-left: 0; padding-right: 0; }
.pl-m-kw { background: var(--surface2); color: var(--text-dim); font-family: 'IBM Plex Mono', monospace; font-size: 11px;
  text-align: center; padding-top: 10px; cursor: pointer; }
.pl-m-kw:hover { color: var(--primary); }
.pl-m-kw.pl-heute { color: var(--primary); font-weight: 700; box-shadow: inset 3px 0 0 var(--primary); }
.pl-m-tag { position: relative; min-height: 124px; padding: 6px 6px 8px; display: flex; flex-direction: column; gap: 1px; }
.pl-m-tag.pl-we { background: color-mix(in srgb, var(--bg2) 40%, var(--surface)); }
.pl-m-tag.pl-fremd { background: color-mix(in srgb, var(--bg2) 55%, var(--surface)); }
.pl-m-tag.pl-fremd .pl-m-n { color: color-mix(in srgb, var(--text-dim) 55%, transparent); font-weight: 400; font-size: 11.5px; }
.pl-m-tag.pl-heute { background: color-mix(in srgb, var(--primary) 6%, var(--surface)); box-shadow: inset 0 0 0 2px var(--primary); }
.pl-m-tag.pl-ziel { outline: 2px dashed var(--primary); outline-offset: -3px; background: var(--hover); }
.pl-m-kopf { display: flex; align-items: center; gap: 6px; min-height: 24px; margin-bottom: 3px; cursor: pointer; min-width: 0; }
.pl-m-n { font-size: 13px; font-weight: 600; color: var(--text); min-width: 24px; height: 24px; line-height: 24px; text-align: center;
  border-radius: 12px; flex-shrink: 0; }
.pl-m-kopf:hover .pl-m-n { background: var(--hover); }
.pl-m-tag.pl-heute .pl-m-n { background: var(--primary); color: #fff; }
.pl-m-heute { font-size: 11px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: var(--primary); }
.pl-m-fei { font-size: 11px; color: var(--danger); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pl-m-tag.pl-feiertag .pl-m-n { color: var(--danger); }
.pl-m-tag.pl-heute.pl-feiertag .pl-m-n { color: #fff; }
.pl-m-tag.pl-vergangen .pl-m-n { color: var(--text-dim); font-weight: 500; }
.pl-m-tag.pl-vergangen .pl-mz { opacity: .65; }
.pl-m-tag.pl-vergangen .pl-mz:hover { opacity: 1; }
.pl-m-band { position: absolute; left: 0; right: 0; top: 0; height: 3px; opacity: .7; }
.pl-m-mehr { font-size: 11.5px; color: var(--text-dim); padding: 2px 4px; cursor: pointer; }
.pl-m-mehr:hover { color: var(--primary); }
.pl-m-geister { font-size: 11.5px; color: var(--text-dim); padding: 2px 4px; margin-top: 2px; cursor: pointer; border-top: 1px dashed var(--border); }
.pl-m-geister:hover, .pl-m-geister.offen { color: var(--text); }
.pl-m-tag .pl-geist-chip { margin-top: 1px; }
.pl-m-hinweis { font-size: 12.5px; color: var(--text-dim); padding: 10px 2px 0; }

/* Eintragszeile im Monat: Kürzel in Kanalfarbe + Titel, kein Kasten */
.pl-mz { display: flex; align-items: baseline; gap: 6px; font-size: 12px; line-height: 1.3; padding: 2px 4px; border-radius: 5px;
  color: var(--text); cursor: pointer; min-width: 0; }
.pl-mz:hover { background: var(--hover); }
.pl-mz[draggable="true"] { cursor: grab; }
.pl-mz-k { font-size: 10px; font-weight: 700; letter-spacing: .5px; color: var(--rf, var(--text-dim)); flex-shrink: 0; min-width: 20px; }
.pl-mz-t { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pl-mz-fmt { font-size: 10px; color: var(--text-dim); flex-shrink: 0; }
.pl-mz-s { font-size: 11px; color: var(--success); flex-shrink: 0; }
.pl-mz-frei { width: 7px; height: 7px; border-radius: 50%; background: var(--warning); align-self: center; }
.pl-mz.st-entwurf .pl-mz-t { color: var(--text-dim); font-style: italic; }
.pl-mz.st-fertig .pl-mz-t { color: var(--text-dim); }
.pl-mz.pl-mz-haus .pl-mz-t { color: var(--text-dim); }
@media (max-width: 1100px) {
  .pl-m-wt .pl-lang { display: none; }
  .pl-m-wt .pl-kurz { display: inline; }
  .pl-m-heute { display: none; }
  .pl-mz-fmt { display: none; }
}

/* ── Quartal: drei Monate, Punkte statt Farbverläufe ── */
.pl-q { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.pl-q-monat { display: flex; align-items: baseline; gap: 8px; margin-bottom: 6px; cursor: pointer; }
.pl-q-monat b { font-size: 15px; color: var(--primary); }
.pl-q-monat small { color: var(--text-dim); font-size: 11.5px; }
.pl-q-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 3px; }
.pl-q-wt { font-size: 10px; color: var(--text-dim); text-align: center; letter-spacing: 1px; text-transform: uppercase; padding-bottom: 2px; }
.pl-q-tag { position: relative; aspect-ratio: 1; border-radius: 7px; border: 1px solid var(--border); background: var(--surface); cursor: pointer;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; overflow: hidden; }
.pl-q-tag:hover { background: var(--hover); }
.pl-q-tag.pl-we { background: color-mix(in srgb, var(--bg2) 55%, var(--surface)); }
.pl-q-tag.pl-heute { border-color: var(--primary); box-shadow: inset 0 0 0 1px var(--primary); }
.pl-q-tag.pl-feiertag .pl-q-n { color: var(--danger); font-weight: 700; }
.pl-q-n { font-size: 11px; color: var(--text-dim); }
.pl-q-tag.hat .pl-q-n { color: var(--text); font-weight: 600; }
.pl-q-dots { display: flex; align-items: center; gap: 2px; height: 8px; }
.pl-q-dots i { width: 6px; height: 6px; border-radius: 50%; display: inline-block; }
.pl-q-dots small { font-size: 9px; color: var(--text-dim); margin-left: 1px; }
.pl-q-band { position: absolute; left: 4px; right: 4px; bottom: 3px; height: 2px; border-radius: 1px; opacity: .7; }

/* ── Tag: Display-Namen in der Beschriftungsspalte ── */
.pl-tag-label { position: relative; align-items: flex-start; }
.pl-tag-namen { position: absolute; left: 0; right: 0; top: 34px; display: flex; flex-direction: column; gap: 3px; padding: 0 10px 0 26px; }
.pl-tag-name { height: 36px; display: flex; flex-direction: column; justify-content: center; font-size: 11.5px; font-weight: 500; line-height: 1.2; overflow: hidden; }
.pl-tag-name span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pl-tag-name small { font-weight: 400; color: var(--text-dim); font-size: 10px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pl-tag-spur-name { display: none; }
.pl-tag-bl-z { font-size: 10px; color: var(--text-dim); margin-left: 2px; }

/* Filter-Chips: Haarlinie mit Farbpunkt statt Farbfläche */
.pl-chip { border-radius: 20px; gap: 6px; color: var(--text-dim); }
.pl-chip i { width: 8px; height: 8px; border-radius: 50%; background: var(--rf); opacity: .35; }
.pl-chip.an { color: var(--text); border-color: color-mix(in srgb, var(--rf) 50%, var(--border)); }
.pl-chip.an i { opacity: 1; }

/* ── Filterzeile (Scheibe 4) ── */
.pl-filterzeile { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; flex-basis: 100%; margin-top: 4px; }
.pl-filterzeile .pl-f-sel { width: auto; min-width: 140px; max-width: 220px; padding: 5px 8px; font-size: 12.5px; }
.pl-filterzeile .pl-f-suche { width: 240px; padding: 5px 10px; font-size: 12.5px; }

/* ── Druck (Scheibe 5): nur der Plan, eine Seite quer ── */
#pl-druckkopf { display: none; }
/* schon beim Einpassen (vor dem Druckdialog) ohne Vorschläge messen, sonst zu klein */
body.pl-druck .pl-geist, body.pl-druck .pl-geist-chip, body.pl-druck .pl-wo-plus,
body.pl-druck .pl-leer, body.pl-druck .pl-wo-gruppe { display: none !important; }
body.pl-druck .pl-wo-zelle { min-height: 30px; padding-bottom: 4px; }
body.pl-druck .pl-wo-label { padding: 4px 8px; }
@media print {
  @page { size: A4 landscape; margin: 8mm; }
  body.pl-druck * { visibility: hidden !important; }
  body.pl-druck #pl-cal, body.pl-druck #pl-cal *, body.pl-druck #pl-druckkopf { visibility: visible !important; }
  body.pl-druck #pl-druckkopf { display: block; position: absolute; left: 0; top: 0; font-weight: 700; font-size: 14px; }
  body.pl-druck #pl-cal { position: absolute; left: 0; top: 24px; width: 1060px; }
  body.pl-druck .pl-geist, body.pl-druck .pl-geist-chip, body.pl-druck .pl-wo-plus, body.pl-druck .pl-now { display: none !important; }
  body.pl-druck .pl-wo-kopf, body.pl-druck .pl-wo-label, body.pl-druck .pl-tag-kopf, body.pl-druck .pl-tag-skala { position: static !important; }
  body.pl-druck * { -webkit-print-color-adjust: exact; print-color-adjust: exact; box-shadow: none !important; }
}

/* ── Kampagnenvorlagen (docs/kampagnen_vorlagen_konzept.md, Scheibe MH-2) ──
   Geisterfelder beim Ziehen und vorgemerkte Felder nach dem Loslassen tragen die Kampagnenfarbe
   kräftig (Kürzel als gefüllte Marke, getönter Grund, Rand in der Farbe) – so sieht man beim
   Ziehen deutlich, was hinzukäme (Michael, 30.09.2026). Gestrichelt = noch nicht gespeichert,
   durchgezogen = vorgemerkt. Marke je Stand als Punkt, Leiste unten, Palette als Seitenleiste. */
.pv-chip { display: flex; align-items: baseline; gap: 5px; font-size: 11.5px; line-height: 1.3; padding: 2px 5px 2px 3px; border-radius: 6px;
  border: 1.5px solid color-mix(in srgb, var(--rf) 80%, var(--border)); background: color-mix(in srgb, var(--rf) 16%, var(--surface));
  color: var(--text); min-width: 0; margin-top: 1px; cursor: grab; }
.pv-chip.pv-hell { border-style: dashed; opacity: .94; cursor: default; }
.pv-chip.pv-bar { border-style: solid; border-color: color-mix(in srgb, var(--rf) 45%, var(--border)); background: color-mix(in srgb, var(--rf) 9%, var(--surface));
  padding: 0 5px 0 3px; font-size: 10.5px; opacity: .95; cursor: default; }
.pv-chip.pv-bar.pv-hell { border-style: dashed; }
.pv-chip.pv-bar .pv-k { background: color-mix(in srgb, var(--rf) 70%, var(--surface)); }
.pv-chip.pv-bar .pv-t { color: var(--text-dim); }
.pv-chip.pv-optional .pv-t { color: var(--text-dim); font-style: italic; }
.pv-chip.pv-st-weggelassen { opacity: .35; border-style: dotted; text-decoration: line-through; background: var(--surface); }
.pv-chip.pv-st-weggelassen .pv-k { background: var(--text-dim); }
.pv-chip .pv-k { font-size: 10px; font-weight: 700; letter-spacing: .3px; color: #fff; background: var(--rf); border-radius: 4px; padding: 0 4px;
  line-height: 1.5; text-align: center; flex-shrink: 0; min-width: 22px; align-self: center; }
.pv-chip .pv-t { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pv-chip .pv-bis { font-size: 10px; color: var(--text-dim); flex-shrink: 0; }
.pv-chip .pv-marke { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; align-self: center; background: transparent; }
.pv-chip.pv-st-kollision .pv-marke { background: var(--danger); }
.pv-chip.pv-st-hinweis .pv-marke { background: var(--warning); }
.pv-chip.pv-st-vorhanden .pv-marke { background: var(--success); }
.pv-chip.pv-st-vorhanden { border-style: solid; border-color: color-mix(in srgb, var(--success) 60%, var(--border)); }
.pv-chip.pv-st-kollision { border-color: color-mix(in srgb, var(--danger) 55%, var(--border)); }
.pv-dot { width: 8px; height: 8px; border-radius: 50%; border: 1.5px solid var(--rf); background: color-mix(in srgb, var(--rf) 55%, var(--surface)); display: inline-block; margin-top: 1px; }
.pv-dot.pv-hell { border-style: dashed; opacity: .9; }
.pv-dot.pv-st-kollision { border-color: var(--danger); border-style: solid; }
.pv-dot.pv-st-hinweis { border-color: var(--warning); border-style: solid; }
.pv-dot.pv-st-vorhanden { border-color: var(--success); border-style: solid; }
.pv-dot.pv-st-weggelassen { opacity: .3; }

/* Gantt: Balken der Schablone; Platzhalter schraffiert (auch in plGanttRender) */
.pv-gantt-bar { position: absolute; top: 2px; height: 26px; border-radius: 8px; font-size: 12px; font-weight: 600; display: flex; align-items: center;
  padding: 0 10px; overflow: hidden; white-space: nowrap; color: var(--text); cursor: grab;
  border: 1.5px dashed color-mix(in srgb, var(--rf) 75%, var(--border)); background: color-mix(in srgb, var(--rf) 12%, var(--surface)); }
.pv-gantt-bar.pv-hell { opacity: .85; border-style: dashed; cursor: default; }
.pv-gantt-bar.pv-aussen { justify-content: center; color: var(--text-dim); font-weight: 500; border-style: dotted; background: transparent; cursor: default; }
.pl-platzhalter { background-image: repeating-linear-gradient(135deg, transparent 0 6px, rgba(255,255,255,.35) 6px 10px) !important; opacity: .85; }
.pv-q-balken { display: flex; flex-direction: column; gap: 3px; margin: 0 0 6px; }
.pv-q-zeile { position: relative; height: 18px; }
.pv-q-bar { position: absolute; top: 0; height: 18px; border-radius: 5px; background: var(--rf); color: #fff; font-size: 10.5px; font-weight: 600;
  padding: 0 7px; line-height: 18px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; cursor: pointer; min-width: 14px; }

/* Palette */
#pl-vorlagen { width: 300px; flex-shrink: 0; }
#pl-vorlagen-list { display: flex; flex-direction: column; gap: 8px; max-height: 72vh; overflow-y: auto; }
.pv-hinweis { font-size: 12px; color: var(--text-dim); line-height: 1.4; padding: 2px 2px 6px; }
.pv-vorlage { background: var(--surface); border: 1px solid var(--border); border-radius: 10px; padding: 10px 12px; cursor: grab; user-select: none; }
.pv-vorlage:hover { border-color: color-mix(in srgb, var(--rf, var(--text-dim)) 50%, var(--border)); background: var(--hover); }
.pv-vorlage-kopf { display: flex; align-items: center; gap: 8px; font-size: 13.5px; }
.pv-vorlage-kopf b { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pv-griff { color: var(--text-dim); font-size: 12px; letter-spacing: -2px; }
.pv-punkt { width: 9px; height: 9px; border-radius: 50%; background: var(--rf, var(--text-dim)); flex-shrink: 0; display: inline-block; }
.pv-punkt-schraffiert { background: repeating-linear-gradient(135deg, var(--text-dim) 0 2px, transparent 2px 4px); }
.pv-vorlage-meta { font-size: 11.5px; color: var(--text-dim); margin-top: 3px; line-height: 1.35; }
.pv-vorlage-meta a { color: var(--primary); text-decoration: none; }
.pv-vorlage-meta a:hover { text-decoration: underline; }
.pv-vorlage-text { font-size: 11.5px; color: var(--text); margin-top: 4px; line-height: 1.35; }
.pv-vorlage-kopf { cursor: pointer; }
/* Felderliste einer Vorlage in der Palette (vorlage.js _pvDetails): Umfang oben, dann je Phase
   die Felder mit Abstand zum Stichtag, Termin, Kürzel, Zuständigem und Titel – Haarlinien, kein Kasten */
.pv-details { margin-top: 8px; border-top: 1px solid var(--border); padding-top: 6px; font-size: 11.5px; line-height: 1.4; max-height: 52vh; overflow: auto; cursor: default; }
.pv-det-sum { color: var(--text); }
.pv-det-sum .pv-meta { display: block; font-size: 11.5px; }
.pv-det-phase { margin-top: 8px; font-size: 10.5px; font-weight: 700; letter-spacing: .4px; text-transform: uppercase; color: var(--text-dim); display: flex; align-items: center; gap: 6px; }
.pv-det-phase i { width: 8px; height: 8px; border-radius: 50%; background: var(--pf, var(--text-dim)); display: inline-block; }
.pv-det-phase span { font-weight: 500; }
.pv-fz { padding: 3px 0 4px; border-top: 1px solid color-mix(in srgb, var(--border) 65%, transparent); }
.pv-fz-1 { display: flex; gap: 6px; align-items: baseline; color: var(--text-dim); font-size: 10.5px; white-space: nowrap; overflow: hidden; }
.pv-fz-1 b { color: var(--text); font-weight: 600; min-width: 30px; }
.pv-fz-1 .pv-k { color: var(--rf, var(--primary)); font-weight: 700; letter-spacing: .3px; }
.pv-fz-1 .pv-fz-r { margin-left: auto; }
.pv-fz-2 { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text); }
.pv-fz.pv-optional .pv-fz-2 { color: var(--text-dim); font-style: italic; }

/* Leiste unten: erscheint, solange eine Schablone vorgemerkt ist */
.pv-leiste { position: fixed; left: 50%; bottom: 14px; transform: translateX(-50%); z-index: 5500; width: min(1180px, calc(100vw - 32px));
  background: var(--surface); border: 1px solid var(--border); border-radius: 14px; box-shadow: 0 12px 34px var(--shadow, rgba(0,0,0,.18));
  padding: 10px 14px; display: flex; flex-direction: column; gap: 6px; }
.pv-leiste-zeile { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.pv-leiste-unten { border-top: 1px solid var(--border); padding-top: 6px; font-size: 12px; }
.pv-leiste .pv-name { width: 240px; padding: 6px 10px; font-size: 13px; font-weight: 600; }
.pv-meta { font-size: 12.5px; color: var(--text-dim); }
.pv-tipp { margin-left: auto; }
.pv-zaehler { display: flex; gap: 8px; font-size: 12.5px; }
.pv-z { color: var(--text-dim); }
.pv-z-k { color: var(--danger); font-weight: 600; }
.pv-z-h { color: var(--warning); font-weight: 600; }
.pv-z-v { color: var(--success); font-weight: 600; }
.pv-z-f { color: var(--success); }
.pv-marke-w { display: inline-flex; align-items: center; gap: 5px; font-size: 12.5px; cursor: pointer; }
.pv-menu { min-width: 300px; max-width: 380px; }
.pv-menu .pv-titel { color: var(--text); font-weight: 600; font-size: 13px; }
.pv-menu .pv-grund { white-space: normal; line-height: 1.35; }
.pv-menu .pv-grund-kollision { color: var(--danger); }
.pv-menu .pv-grund-hinweis { color: var(--warning); }
.pv-menu .pv-grund-vorhanden { color: var(--success); }
.pv-modal-zeile { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; border-top: 1px solid var(--border); padding-top: 10px; margin-top: 4px; }
body.pl-druck .pv-chip, body.pl-druck .pv-dot, body.pl-druck .pv-gantt, body.pl-druck .pv-leiste { display: none !important; }
.pv-chip.pv-lauf { border-style: dotted; background: transparent; padding: 0 5px; margin-top: 2px; }
.pv-chip.pv-lauf .pv-k { min-width: 12px; }
#pl-vorlagen-btn.pv-an { border-color: var(--primary); color: var(--primary); }

/* Canva-Design-Set im Kampagnen-Modal (vorlage.js pvCanvaSet) */
.pv-set{margin-top:8px;border-top:1px solid var(--border);padding-top:6px;font-size:12px}
.pv-set-zeile{display:flex;gap:10px;align-items:baseline;padding:3px 0}
.pv-set-zeile>span:first-child{min-width:110px;font-weight:600}
.pv-set-zeile a{color:var(--primary);text-decoration:none}

/* ── Kampagnenziele und Vorlagen-Editor (static/planer/vorlagen-editor.js, MH-5) ── */
.kz-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 10px; margin-bottom: 8px; }
.kz-grid-2 { grid-template-columns: 1fr 1fr; }
.kz-block { margin-bottom: 10px; }
.kz-regel { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.kz-farbe { height: 34px; padding: 2px 4px; width: 70px; }
.kz-checks { display: flex; flex-wrap: wrap; gap: 4px 14px; }
.kz-check { display: inline-flex; align-items: center; gap: 5px; font-size: 12.5px; cursor: pointer; margin-right: 8px; }
.kz-flags { display: flex; gap: 18px; flex-wrap: wrap; margin: 6px 0 14px; }
.kz-hinweis { background: color-mix(in srgb, var(--primary) 8%, var(--surface)); border: 1px solid color-mix(in srgb, var(--primary) 45%, var(--border)); border-radius: 8px; padding: 8px 12px; font-size: 12px; margin-bottom: 14px; }
.kz-tag { font-size: 9.5px; font-weight: 700; letter-spacing: .3px; color: var(--text-dim); border: 1px solid var(--border); border-radius: 5px; padding: 1px 6px; }
.kz-tag-seed { color: var(--primary); border-color: color-mix(in srgb, var(--primary) 50%, var(--border)); }
.kz-tag-aus { color: var(--text-dim); }
.kz-punkt { width: 9px; height: 9px; border-radius: 50%; display: inline-block; flex-shrink: 0; }
.kz-tabelle { table-layout: fixed; width: 100%; border-collapse: collapse; }
.kz-tabelle th { font-size: 11px; color: var(--text-dim); text-align: left; padding: 0 4px 4px; font-weight: 600; }
.kz-tabelle td { padding: 5px 4px; vertical-align: middle; }
.kz-zeile { border-top: 1px solid var(--border); }
.kz-zeile.kz-offen td { background: color-mix(in srgb, var(--primary) 5%, transparent); }
.kz-in { width: 100%; font-size: 12px; padding: 3px 5px; }
.kz-beispiel { font-size: 11px; color: var(--text-dim); line-height: 1.3; }
.kz-knoepfe { white-space: nowrap; text-align: right; }
.kz-knoepfe .btn { padding: 1px 6px; font-size: 11px; }
.kz-det-zeile td { padding: 0 4px 10px 22px; }
.kz-det { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 8px 14px; border-left: 2px solid color-mix(in srgb, var(--primary) 40%, var(--border)); padding: 8px 0 8px 12px; }
.kz-det .flabel { font-size: 10.5px; }
.kz-det-breit { grid-column: 1 / -1; }
.kz-canva { display: flex; flex-wrap: wrap; gap: 6px 18px; align-items: center; }
.kz-canva-zeile { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; }
.kz-canva-name { min-width: 100px; }
.kz-vorschau { margin-top: 8px; max-height: 60vh; }
/* ── Anlegen in Monat und Tag (10/2026): Plus im Tageskopf des Monats, Plus in der Zeile des Tags,
   Klick auf eine freie Stelle der Stundenachse legt mit der Uhrzeit aus der Position an ── */
.pl-m-plus { margin-left: auto; width: 20px; height: 20px; border-radius: 6px; border: 1px solid var(--border); background: var(--surface);
  color: var(--text-dim); font-size: 15px; line-height: 17px; text-align: center; cursor: pointer; opacity: 0; transition: opacity .12s; flex-shrink: 0; }
.pl-m-tag:hover .pl-m-plus { opacity: 1; }
.pl-m-plus:hover { color: var(--primary); border-color: var(--primary); }
.pl-tag-zeile:hover .pl-wo-plus { opacity: 1; }
.pl-tag-achse.pl-tag-anlegbar, .pl-tag-ganz.pl-tag-anlegbar { cursor: cell; }
.pl-menu-tag { max-height: 72vh; overflow: auto; min-width: 250px; }
.pl-menu-tag div[data-r] { display: flex; align-items: center; gap: 7px; }
.pl-menu-tag .pl-punkt { width: 8px; height: 8px; border-radius: 50%; background: var(--rf, var(--text-dim)); flex-shrink: 0; }
.pl-menu-tag small { color: var(--text-dim); font-weight: 400; margin-left: auto; padding-left: 10px; white-space: nowrap; }
.pl-menu .pl-menu-gruppe { font-size: 10px; letter-spacing: 1px; text-transform: uppercase; color: var(--text-dim); cursor: default; padding: 7px 10px 2px; }
.pl-menu .pl-menu-gruppe:hover { background: transparent; color: var(--text-dim); }

/* Mehrtägiges im Monat (Sale, Shop-Banner, Displays): erster Tag als Zeile mit Ende, Folgetage als
   schmale Fortsetzung – so bleibt der Zeitraum sichtbar, ohne die Beiträge zu verdrängen */
.pl-mz.pl-mz-lauf { padding-top: 0; padding-bottom: 0; font-size: 11px; opacity: .72; }
.pl-mz.pl-mz-lauf .pl-mz-t { color: var(--text-dim); }
.pl-mz.pl-mz-lauf.pl-mz-ende .pl-mz-t { color: var(--text); }

/* Vorschläge im Monat stehen wie in der Woche direkt im Tag (gestrichelt, halbtransparent);
   im Quartal ein gestrichelter Punkt statt eines unsichtbaren */
.pl-q-dots i.pl-q-geist { background: color-mix(in srgb, #8a8175 35%, transparent); border: 1px dashed var(--text-dim); box-sizing: border-box; }