/* ═══════════════════════════════════════════════════════════════
   QRGen Medilabels – Design-System v2 („clinical clean")
   Ruhige neutrale Flächen · weiße Karten · DRK-Rot als Identität
   Blau als Interaktionsfarbe · konsistente Radien & Schatten
   ═══════════════════════════════════════════════════════════════ */
:root {
  /* Flächen */
  --bg:        #EEF0F4;   /* App-Hintergrund (kühles Hellgrau) */
  --card:      #FFFFFF;   /* Karten/Panels */
  --line:      #DDE1E8;   /* Trennlinien, Ränder */
  --line-soft: #EBEEF3;
  /* Text */
  --text:      #1E242C;
  --muted:     #5C6674;
  --faint:     #8B93A1;
  /* Marken- & Funktionsfarben */
  --brand:     #9B1B2E;   /* DRK-Rot: Identität, aktiver Tab */
  --brand-dk:  #7E1425;
  --accent:    #1565C0;   /* Blau: Interaktion */
  --accent-dk: #0D4FA0;
  --accent-bg: #E8F1FB;
  --ok:        #217A3C;
  --ok-bg:     #E4F3E9;
  --warn:      #B71C1C;
  --warn-bg:   #FBEAEA;
  /* Dunkle Vorschau-Flächen */
  --dark:      #17191D;
  --dark-hdr:  #24272D;
  /* Geometrie */
  --r-card: 12px;
  --r-ctl:  8px;
  --shadow-sm: 0 1px 2px rgba(20, 24, 32, .06), 0 1px 6px rgba(20, 24, 32, .05);
  --shadow-md: 0 4px 14px rgba(20, 24, 32, .10), 0 1px 4px rgba(20, 24, 32, .06);
  --shadow-dark: 0 8px 30px rgba(0, 0, 0, .55);
  --font: -apple-system, "SF Pro Text", "Segoe UI", Roboto, "Helvetica Neue",
          Arial, sans-serif;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; }
body {
  font-family: var(--font);
  background: var(--bg);
  color: var(--text);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
}

/* ── Kopfzeile: DRK-Identität ─────────────────────────── */
header {
  background: linear-gradient(180deg, #A61F33, var(--brand));
  color: #fff;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 20px;
  flex-shrink: 0;
  box-shadow: 0 1px 0 rgba(0,0,0,.18);
}
header h1 {
  font-size: 16px;
  font-weight: 700;
  letter-spacing: .2px;
}
#hdr-info {
  font-size: 12px;
  color: #F3D2D8;
  background: rgba(255,255,255,.10);
  padding: 4px 12px;
  border-radius: 999px;
}
#hdr-user { font-size: 12.5px; font-weight: 600; color: #F8E8EB; }
.hdr-btn {
  background: rgba(255,255,255,.12);
  color: #fff;
  border: 1px solid rgba(255,255,255,.22);
  padding: 6px 14px;
  border-radius: 999px;
  font-size: 12.5px;
  font-weight: 600;
  transition: background .15s;
}
.hdr-btn:hover { background: rgba(255,255,255,.26); color: #fff; }

/* ── Navigation: Unterstrich-Tabs statt Notebook ───────── */
#tabs {
  display: flex;
  gap: 4px;
  background: var(--card);
  padding: 0 14px;
  border-bottom: 1px solid var(--line);
  flex-shrink: 0;
}
.tab-btn {
  border: none;
  background: none;
  color: var(--muted);
  padding: 13px 16px 11px;
  font-size: 13.5px;
  font-weight: 600;
  cursor: pointer;
  border-bottom: 2.5px solid transparent;
  border-radius: 0;
  box-shadow: none;
  transition: color .15s, border-color .15s;
}
.tab-btn:hover { color: var(--text); background: none; border-bottom-color: var(--line); }
.tab-btn.active {
  color: var(--brand);
  border-bottom-color: var(--brand);
}

/* ── Ansichten ─────────────────────────────────────────── */
.view { display: none; flex: 1; overflow: hidden; }
.view.active { display: flex; }

/* ── Sektions-Header ───────────────────────────────────── */
.sec {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .7px;
  text-transform: uppercase;
  color: var(--accent);
  margin: 16px 0 8px;
}
.sec i { width: 3px; height: 13px; background: var(--accent); border-radius: 2px; flex-shrink: 0; }
.sec b { flex: 1; height: 1px; background: var(--line); }

/* ── Spalten-Layout ────────────────────────────────────── */
.list-col {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--card);
  border-right: 1px solid var(--line);
}
.side-col {
  width: 330px;
  flex-shrink: 0;
  padding: 2px 16px 16px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 6px;
  background: var(--bg);
}
.side-col.wide { width: 372px; border-right: 1px solid var(--line); }

/* ── Toolbar & Medikamenten-Liste ──────────────────────── */
.toolbar {
  display: flex;
  gap: 8px;
  align-items: center;
  padding: 12px 14px;
  background: var(--card);
  border-bottom: 1px solid var(--line);
}
.toolbar input[type=search] {
  flex: 1;
  min-width: 120px;
}
.count { font-size: 12px; color: var(--faint); white-space: nowrap; padding: 0 4px; }

.med-table { flex: 1; overflow-y: auto; background: var(--card); }
.med-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 14px;
  border-bottom: 1px solid var(--line-soft);
  cursor: pointer;
  user-select: none;
  font-size: 13.5px;
  transition: background .1s;
}
.med-row:hover { background: #F6F8FB; }
.med-row.sel { background: var(--accent-bg); }
.med-row.sel:hover { background: #DDEBF9; }
.med-row .cb {
  width: 19px; height: 19px;
  border: 2px solid #C3C9D3;
  border-radius: 6px;
  flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; color: #fff;
  background: var(--card);
  transition: background .1s, border-color .1s;
}
.med-row.sel .cb { background: var(--accent); border-color: var(--accent); }
/* Miniatur: dezente Bühne, damit auch weiße Labels sichtbar sind */
.med-row .thumb, .med-row .swatch {
  width: 82px; height: 40px;
  flex-shrink: 0;
  position: relative;
  overflow: hidden;
  background: #F1F3F7;
  border: 1px solid var(--line-soft);
  border-radius: 6px;
}
.med-row .thumb img {
  position: absolute;
  top: 50%; left: 50%;
  width: 38px; height: 78px;
  transform: translate(-50%, -50%) rotate(-90deg);
  object-fit: contain;
}
.med-row .mname { font-weight: 600; flex: 1; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.med-row .mqr {
  font-size: 12px;
  color: var(--faint);
  width: 96px;
  font-variant-numeric: tabular-nums;
  text-align: right;
}

/* ── Formulare ─────────────────────────────────────────── */
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 12px; align-items: end; }
.grid3 { display: grid; grid-template-columns: 1fr auto auto; gap: 8px 12px; align-items: end; }
label {
  font-size: 11.5px;
  font-weight: 600;
  color: var(--muted);
  display: flex; flex-direction: column; gap: 4px;
}
label.chk, label.chk-inline {
  flex-direction: row; align-items: center; gap: 8px;
  font-size: 13px; font-weight: 500; color: var(--text); padding: 3px 0;
}
label.inline { flex-direction: row; align-items: center; gap: 6px; }

input[type=number], input[type=text], input[type=password], select {
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: var(--r-ctl);
  font-size: 13.5px;
  font-family: var(--font);
  width: 100%;
  background: var(--card);
  color: var(--text);
  transition: border-color .12s, box-shadow .12s;
}
input[type=search] {
  padding: 8px 12px;
  border: 1px solid var(--line);
  border-radius: var(--r-ctl);
  font-size: 13.5px;
  background: var(--card);
}
input:focus, select:focus, textarea:focus, input[type=search]:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(21, 101, 192, .14);
}
input[type=color] {
  width: 44px; height: 34px;
  border: 1px solid var(--line); border-radius: var(--r-ctl);
  padding: 2px; background: var(--card); cursor: pointer;
}
select:disabled, input:disabled { opacity: .5; }

button {
  padding: 8px 14px;
  border: 1px solid var(--line);
  border-radius: var(--r-ctl);
  background: var(--card);
  font-size: 13px;
  font-weight: 600;
  font-family: var(--font);
  cursor: pointer;
  color: var(--text);
  box-shadow: var(--shadow-sm);
  transition: border-color .12s, background .12s, box-shadow .12s;
}
button:hover { border-color: #B9C2CF; background: #FAFBFC; }
button:active { box-shadow: none; }
button:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(21,101,192,.2); }
button.primary {
  background: linear-gradient(180deg, #1B74D8, var(--accent));
  border-color: var(--accent-dk);
  color: #fff;
}
button.primary:hover { background: var(--accent-dk); color: #fff; }
button.big { padding: 12px; font-size: 14px; margin-top: 10px; border-radius: 10px; }
button.small { padding: 5px 11px; font-size: 12px; }

.hint { font-size: 11.5px; color: var(--faint); line-height: 1.55; font-weight: 400; }
kbd {
  background: var(--card); border: 1px solid var(--line);
  border-bottom-width: 2px; border-radius: 4px; padding: 0 5px;
  font-size: 11px;
}

/* ── Tab 1: Etikett-Vorschau (maßstabsgetreue SVG) ─────── */
.label-preview {
  background: var(--dark);
  border-radius: var(--r-card);
  padding: 10px 12px;
  box-shadow: inset 0 1px 6px rgba(0,0,0,.4);
}
.dims-caption {
  text-align: center;
  font-size: 11.5px;
  color: var(--faint);
  margin-top: 6px;
  font-variant-numeric: tabular-nums;
}

/* ── Tab 2: Label-Editor ───────────────────────────────── */
.rte-toolbar { display: flex; gap: 6px; align-items: center; }
.rte-toolbar label.inline { font-size: 11.5px; }
.rte-toolbar label.inline input { width: 64px; }
.rte-b { padding: 7px 12px; font-size: 13px; }
.vt-label { font-size: 12px; font-weight: 700; width: 72px; flex-shrink: 0; }
.rte {
  min-height: 44px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: var(--r-ctl);
  background: var(--dark);
  color: #fff;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.3;
  outline: none;
  white-space: nowrap;
  overflow-x: auto;
  box-shadow: inset 0 1px 4px rgba(0,0,0,.35);
  transition: border-color .12s, box-shadow .12s;
}
.rte:focus {
  border-color: var(--accent);
  box-shadow: inset 0 1px 4px rgba(0,0,0,.35), 0 0 0 3px rgba(21,101,192,.14);
}
.rte:empty::before {
  content: attr(data-ph);
  color: #777;
  font-weight: 400;
  font-size: 12.5px;
}

.editor-preview {
  flex: 1;
  background:
    radial-gradient(circle at 1px 1px, rgba(255,255,255,.05) 1px, transparent 0)
    0 0 / 22px 22px,
    var(--dark);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.prev-hdr {
  background: var(--dark-hdr);
  color: #E8EAEE;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .5px;
  padding: 10px 16px;
  flex-shrink: 0;
  border-bottom: 1px solid rgba(255,255,255,.06);
}
.prev-body {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 28px;
  overflow: auto;
}
/* prevwrap schmiegt sich ans Bild an → bleibt im Flex-Zentrum mittig,
   und das WF-Overlay behält seinen Bezugsrahmen (= Bildfläche) */
.prevwrap { position: relative; display: inline-block; max-width: 66%; }
#e-preview {
  max-width: 100%;
  max-height: 60vh;    /* Vorschau bewusst nicht bildschirmfüllend */
  display: block;
  box-shadow: var(--shadow-dark);
  border-radius: 6px;
}
/* Kein kaputtes Bild-Icon: ohne src ausblenden, Hinweis zeigen */
#e-preview:not([src]) { display: none; }
.prev-body:has(#e-preview:not([src]))::before {
  content: "Medikament laden oder Vorlage wählen — die Live-Vorschau erscheint hier";
  color: #6B717C;
  font-size: 13px;
  max-width: 260px;
  text-align: center;
  line-height: 1.6;
}
.wf-box {
  position: absolute;
  background: #fff;
  border: 1.5px dashed var(--accent);
  border-radius: 3px;
  cursor: move;
  box-sizing: border-box;
  touch-action: none;
  box-shadow: 0 0 0 1px rgba(0,0,0,.15);
}
.wf-box:hover { border-color: #FF8F00; }

/* ── Tab 3: Bogen-Vorschau ─────────────────────────────── */
.sheet-preview {
  background: var(--dark);
  border-radius: var(--r-card);
  padding: 16px;
  display: flex;
  justify-content: center;
  box-shadow: inset 0 1px 6px rgba(0,0,0,.4);
}
.sheet {
  background: #fff;
  width: 170px; height: 240px;
  display: grid;
  gap: 1px;
  padding: 7px;
  border-radius: 3px;
  box-shadow: var(--shadow-dark);
}
.sheet i {
  background: #EDF0F5;
  border-radius: 1px;
  position: relative;
  overflow: hidden;
}
.sheet i img {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%) rotate(-90deg);
  object-fit: contain;   /* nie verzerren — Rest der Zelle bleibt frei */
}

/* ── Tab 4: A3-Ampullarium ─────────────────────────────── */
.palette {
  min-height: 170px;
  max-height: 320px;
  overflow-y: auto;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 10px;
  box-shadow: var(--shadow-sm);
}
.pal-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 10px;
  border-bottom: 1px solid var(--line-soft);
  cursor: grab;
  font-size: 13px;
  transition: background .1s;
}
.pal-item:hover { background: var(--accent-bg); }
.pal-item img, .pal-item .swatch {
  width: 24px; height: 40px;
  object-fit: fill;
  border: 1px solid var(--line);
  border-radius: 4px;
  flex-shrink: 0;
  background: #F1F3F7;
}
.pal-item .swatch.leer { background: var(--card); border-style: dashed; }
.pal-item .pname { font-weight: 600; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pal-item .pdose { font-size: 11px; color: var(--faint); }

.a3-board-wrap {
  flex: 1;
  display: flex;
  flex-direction: column;
  background:
    radial-gradient(circle at 1px 1px, rgba(255,255,255,.05) 1px, transparent 0)
    0 0 / 22px 22px,
    var(--dark);
  overflow: hidden;
}
.board-scroll {
  flex: 1;
  overflow: auto;
  display: flex;
  align-items: safe center;
  justify-content: safe center;
  padding: 28px;
}
#a3-board {
  background: #fff;
  box-shadow: var(--shadow-dark);
  border-radius: 4px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  flex-shrink: 0;
}
.strip { display: flex; background: #F7F9FC; outline: 1px solid #B9C6DA; }
.slot {
  border-right: 1px dashed #D5DEEA;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  cursor: pointer;
  transition: background .1s;
}
.slot:last-child { border-right: none; }
.slot:hover { background: #EFF4FB; }
.slot.over { outline: 3px solid #FF8F00; outline-offset: -3px; z-index: 2; }
.slot.sel  { outline: 3px solid #FFC107; outline-offset: -3px; z-index: 2; }
.slot img {
  object-fit: fill;
  display: block;
  box-shadow: 0 1px 4px rgba(0,0,0,.25);
  border-radius: 2px;
}
.slot .fallback {
  display: flex; align-items: center; justify-content: center;
  writing-mode: vertical-rl; transform: rotate(180deg);
  font-size: 10px; font-weight: 700; overflow: hidden; text-align: center;
  border-radius: 2px;
}
.slot .num {
  position: absolute; bottom: 1px; left: 50%; transform: translateX(-50%);
  font-size: 8px; color: #93A5BC; pointer-events: none;
  font-variant-numeric: tabular-nums;
}

/* ── Toast ─────────────────────────────────────────────── */
#toast {
  position: fixed;
  bottom: 26px; left: 50%;
  transform: translateX(-50%) translateY(100px);
  background: var(--dark-hdr);
  color: #fff;
  padding: 12px 26px;
  border-radius: 999px;
  font-size: 13.5px;
  font-weight: 500;
  transition: transform .28s cubic-bezier(.2, .9, .3, 1.2);
  z-index: 99;
  box-shadow: var(--shadow-dark);
  border: 1px solid rgba(255,255,255,.08);
}
#toast.show { transform: translateX(-50%) translateY(0); }

/* ── Login ─────────────────────────────────────────────── */
.login-bg {
  position: fixed; inset: 0;
  background:
    radial-gradient(circle at 1px 1px, rgba(255,255,255,.04) 1px, transparent 0)
    0 0 / 22px 22px,
    var(--dark);
  display: flex; align-items: center; justify-content: center;
  z-index: 100;
}
.login-bg[hidden] { display: none; }
.login-card {
  background: var(--bg);
  border-radius: 16px;
  padding: 32px 36px;
  width: 330px;
  display: flex; flex-direction: column; gap: 13px;
  box-shadow: 0 18px 60px rgba(0,0,0,.65);
}
.login-card h2 { font-size: 17px; color: var(--brand); text-align: center; margin-bottom: 4px; }

/* ── Dialog: Neue Vorlage ──────────────────────────────── */
.vdlg-tabs { display: flex; gap: 6px; }
.vdlg-tabs button { flex: 1; }
.vdlg-tabs button.on {
  background: var(--accent);
  border-color: var(--accent-dk);
  color: #fff;
}
.vdlg-prev {
  background: var(--dark);
  border-radius: 10px;
  min-height: 100px;
  width: 100%;
  max-width: 100%;
  overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  padding: 12px;
  box-shadow: inset 0 1px 6px rgba(0,0,0,.4);
}
.vdlg-prev img {
  display: block;
  width: auto; height: auto;
  max-width: 330px;
  max-height: 140px;
  border-radius: 6px;
  box-shadow: 0 4px 18px rgba(0,0,0,.55);
}
#vdlg .login-card { max-width: 92vw; max-height: 92vh; overflow-y: auto; width: 460px; }

/* DIVI-Farbauswahl */
.farb-row { display: flex; gap: 6px; align-items: center; }
.farb-row select { flex: 1; }
.farb-sw {
  width: 32px; height: 32px;
  border: 1px solid var(--line); border-radius: var(--r-ctl);
  flex-shrink: 0;
}

/* ── Mobil ─────────────────────────────────────────────── */
@media (max-width: 760px) {
  .view.active { flex-direction: column; }
  .side-col, .side-col.wide { width: 100%; max-height: 46vh; border-right: none; }

  /* iOS zoomt in Felder mit Schrift < 16px hinein — deshalb bekommen
     ALLE Eingabefelder auf dem Handy mindestens 16px */
  input[type=text], input[type=password], input[type=number],
  input[type=search], input[type=email], select, textarea {
    font-size: 16px;
  }

  /* Kopfzeile: einzeilig und kompakt */
  header { padding: 8px 12px; gap: 8px; }
  header h1 { font-size: 14px; white-space: nowrap; }
  #hdr-user {
    font-size: 11.5px;
    min-width: 0;
    flex: 0 1 auto;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .hdr-btn { padding: 6px 10px; font-size: 12px; white-space: nowrap; }
  #hdr-orgview { font-size: 11.5px; padding: 5px 6px; max-width: 128px; }

  /* Tab-Leiste: einzeilige, wischbare Chips */
  #tabs {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding: 0 8px;
  }
  #tabs::-webkit-scrollbar { display: none; }
  .tab-btn {
    white-space: nowrap;
    padding: 11px 11px 9px;
    font-size: 12.5px;
    flex-shrink: 0;
  }

  /* Werkzeugleisten dürfen umbrechen statt überzulaufen */
  .toolbar { flex-wrap: wrap; row-gap: 8px; padding: 10px 12px; }
  .toolbar input[type=search] { flex: 1 1 100%; }

  /* Listen-Zeilen: mehr Platz für den Namen; Miniatur im echten
     Etiketten-Verhältnis 2,61:1 (Bild skaliert mit — nichts abschneiden) */
  .med-row { gap: 8px; padding: 8px 10px; }
  .med-row .thumb, .med-row .swatch { width: 76px; height: 30px; }
  .med-row .thumb img { width: 28px; height: 74px; }
  .med-row .mqr { font-size: 11px; width: auto; min-width: 62px; }

  /* Editor-Werkzeugzeilen (Wirkstoff/Dosierung): einheitliche Höhen —
     B/K/Farbe wachsen auf die Höhe des Größe-Feldes (Touch-Ziele) */
  .rte-toolbar { flex-wrap: wrap; row-gap: 8px; }
  .rte-toolbar label.inline { font-size: 13px; }
  .rte-toolbar label.inline input { width: 78px; padding: 10px 8px; }
  .rte-b { padding: 10px 16px; font-size: 15px; }
  .rte-toolbar input[type=color] { width: 48px; height: 42px; }
  .med-row .mname {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  /* Labelgenerator: Live-Vorschau kompakt statt bildschirmfüllend */
  .editor-preview { flex: 0 0 auto; }
  .prev-body { padding: 14px; min-height: 110px; }
  .prevwrap { max-width: 90%; }
  #e-preview { max-height: 24vh; }
}

/* Sehr schmale Geräte (iPhone-Standardbreite): Kopfzeile muss
   schrumpfen können, sonst läuft die ganze Seite seitlich über */
@media (max-width: 480px) {
  header { gap: 6px; }
  header h1 {
    flex: 0 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 13px;
  }
  #hdr-user { display: none; }          /* Platz geht vor Kennung */
  #hdr-orgview { flex: 0 1 auto; min-width: 84px; max-width: 128px; }
  .hdr-btn { padding: 6px 9px; font-size: 11.5px; flex-shrink: 0; }
}

/* ── Tab 5: Ampullenhalter (1:1) ───────────────────────── */
#hl-board {
  background: #fff;
  position: relative;
  box-shadow: var(--shadow-dark);
  flex-shrink: 0;
}
.hl-item {
  position: absolute;
  border: 2px solid #2B3442;
  background: rgba(21, 101, 192, .07);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: move;
  touch-action: none;
  overflow: hidden;
  font-size: 10px;
  font-weight: 600;
  color: #2B3442;
  text-align: center;
  line-height: 1.15;
  user-select: none;
}
.hl-item.kreis { border-radius: 50%; }
.hl-item.sel { border-color: var(--accent); background: rgba(21,101,192,.16); z-index: 2; }
#hl-calbar {
  height: 12px;
  background: repeating-linear-gradient(90deg,
    var(--accent) 0 6px, #fff 6px 12px);
  border: 1px solid var(--accent);
  border-radius: 3px;
}

.hl-sperr {
  position: absolute;
  border: 1px dashed rgba(183, 28, 28, .45);
  pointer-events: none;
}

/* ── Tab 6: Stammdatenpflege (konfigurierbares Grid) ───── */
.stamm-scroll { flex: 1; overflow: auto; }
.stamm-head, .stamm-row {
  display: grid;
  gap: 8px;
  align-items: center;
  padding: 6px 14px;
  min-width: max-content;
}
.stamm-head {
  position: sticky; top: 0; z-index: 3;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .5px;
  text-transform: uppercase;
  color: var(--muted);
  background: var(--bg);
  border-bottom: 1px solid var(--line);
}
.stamm-head .hcell {
  position: relative;
  display: flex; align-items: center;
  overflow: hidden; white-space: nowrap;
  padding-right: 10px;
}
.stamm-head .rz {
  position: absolute; right: 0; top: -6px; bottom: -6px;
  width: 9px;
  cursor: col-resize;
  border-right: 2px solid var(--line);
}
.stamm-head .rz:hover { border-right-color: var(--accent); }
.stamm-row { border-bottom: 1px solid var(--line-soft); font-size: 13px; }
.stamm-row:hover { background: #F6F8FB; }
.stamm-row .ro {
  color: var(--faint);
  font-variant-numeric: tabular-nums;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.stamm-row input, .stamm-row select { padding: 5px 8px; font-size: 12.5px; }
.stamm-row input[type=color] { width: 100%; height: 30px; }
.stamm-row input[type=checkbox] { width: 17px; height: 17px; margin: 0 auto; display: block; }
.stamm-row .sok { font-size: 14px; color: var(--ok); text-align: center; }
.colpick {
  position: absolute;
  z-index: 20;
  margin: 4px 0 0 14px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 10px;
  box-shadow: var(--shadow-md);
  padding: 12px 16px;
  display: grid;
  grid-template-columns: repeat(3, auto);
  gap: 4px 18px;
  max-width: 560px;
}
.colpick label.chk { font-size: 12.5px; }
.colpick[hidden] { display: none; }   /* hidden muss display:grid schlagen */

/* ── Label-Generator: Datenbank-Schaukasten ────────────── */
.lg-kopf { display: flex; gap: 6px; align-items: center; }
.lg-kopf input[type=search] { flex: 1; }
.lg-liste {
  height: 235px;
  flex-shrink: 0;      /* Flex-Spalte darf die Liste nicht zusammendrücken */
  overflow: auto;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 10px;
  box-shadow: var(--shadow-sm);
}
.lg-row {
  display: grid;
  gap: 8px;
  align-items: center;
  padding: 5px 10px;
  border-bottom: 1px solid var(--line-soft);
  cursor: pointer;
  font-size: 12.5px;
  min-width: max-content;
}
.lg-row:hover { background: #F6F8FB; }
.lg-row.akt { background: var(--accent-bg); }
.lg-row span {
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.lg-row span.ro { color: var(--faint); font-variant-numeric: tabular-nums; }
.lg-row input {
  padding: 4px 7px;
  font-size: 12px;
}
.lg-row .sok { color: var(--ok); font-size: 13px; width: 16px; text-align: center; }

/* ── Fahrzeug-Filter (RTW/NEF) ── */
select.fzg { width: auto; min-width: 108px; flex: 0 0 auto; }

/* ── Weißes Feld: Eck-Griffe zum Skalieren ── */
.wfh {
  position: absolute;
  width: 10px; height: 10px;
  background: var(--accent);
  border: 1.5px solid #fff;
  border-radius: 3px;
  z-index: 2;
}
.wfh.nw { left: -5px; top: -5px; cursor: nwse-resize; }
.wfh.se { right: -5px; bottom: -5px; cursor: nwse-resize; }
.wfh.ne { right: -5px; top: -5px; cursor: nesw-resize; }
.wfh.sw { left: -5px; bottom: -5px; cursor: nesw-resize; }

/* ── A3-Palette: Miniaturen quer (90° nach links gedreht) ── */
.pthumb {
  width: 66px; height: 32px;
  flex-shrink: 0;
  position: relative;
  overflow: hidden;
  background: #F1F3F7;
  border: 1px solid var(--line);
  border-radius: 4px;
}
.pthumb img {
  position: absolute;
  top: 50%; left: 50%;
  width: 30px; height: 64px;
  transform: translate(-50%, -50%) rotate(-90deg);
  object-fit: contain;
  border: none;
}

/* ── A3: Board-Verschieben (Pan) ── */
.board-scroll { cursor: grab; }
.board-scroll.panning { cursor: grabbing; }

/* ── Einstellungen-Tab ── */
.einst-body { padding: 4px 22px 24px; overflow-y: auto; }
.fmt-zeile {
  display: flex; align-items: center; gap: 10px;
  padding: 7px 4px;
  border-bottom: 1px solid var(--line-soft);
  font-size: 13.5px;
}
.fmt-zeile .fname { flex: 1; font-weight: 600; }
.fmt-zeile .fdesc { font-size: 11.5px; color: var(--faint); }
.fmt-neu {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px 14px;
  align-items: end;
}
.fmt-neu label:first-child { grid-column: 1 / -1; }

/* ── Einstellungen: gespiegelte Tab-Leiste ── */
.etabs {
  display: flex;
  flex-wrap: wrap;
  gap: 2px;
  border-bottom: 1.5px solid var(--line);
  margin-bottom: 16px;
}
.etabs button {
  border: none;
  background: none;
  color: var(--muted);
  padding: 10px 14px 9px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  border-bottom: 2.5px solid transparent;
  border-radius: 0;
  box-shadow: none;
  margin-bottom: -1.5px;
}
.etabs button:hover { color: var(--text); background: none; border-bottom-color: var(--line); }
.etabs button.on { color: var(--brand); border-bottom-color: var(--brand); }
.epane[hidden] { display: none; }

/* ── Einstellungen: Vorlagen-Verwaltung ── */
.evl-name { width: 210px; }
.evl-form {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: flex-end;
  padding: 8px 10px 14px 84px;
  border-bottom: 1px solid var(--line);
}
.evl-form[hidden] { display: none; }
.evl-form label {
  display: flex;
  flex-direction: column;
  gap: 3px;
  font-size: 12px;
  color: var(--muted);
}

/* ── Benutzerverwaltung ── */
.ben-neu {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  padding: 10px 0 4px;
}
.ben-zeile {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  padding: 8px 4px;
  border-bottom: 1px solid var(--line-soft);
  font-size: 13.5px;
}
.ben-zeile select { width: auto; min-width: 150px; }
.ben-zeile .bname { font-weight: 700; }
.ben-zeile .chk { font-size: 12.5px; display: inline-flex; gap: 4px; align-items: center; }
.ben-zeile .btag {
  font-size: 11px;
  background: var(--brand);
  color: #fff;
  border-radius: 9px;
  padding: 2px 8px;
}

/* ── Superadmin: Datensicht-Wahl im Kopfbereich ── */
#hdr-orgview {
  width: auto;
  background: rgba(255,255,255,.14);
  color: #fff;
  border: 1px solid rgba(255,255,255,.4);
  border-radius: 8px;
  padding: 6px 10px;
  font-size: 13px;
}
#hdr-orgview option { color: #1c1e21; }
#hdr-orgview[hidden] { display: none; }

/* ── Anleitung & Rechtliches ── */
.hilfe-body {
  padding: 6px 24px 40px;
  overflow-y: auto;
  max-width: 880px;
}
.hilfe-body details {
  border: 1px solid var(--line);
  border-radius: 10px;
  margin: 10px 0;
  background: var(--card);
}
.hilfe-body summary {
  cursor: pointer;
  padding: 12px 16px;
  font-weight: 700;
  font-size: 14px;
}
.hilfe-body details > *:not(summary) { margin: 4px 16px 12px; }
.hilfe-body ul { padding-left: 20px; }
.hilfe-body li { margin: 5px 0; line-height: 1.55; }
.hilfe-body p { line-height: 1.55; }
.kontakt-card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 16px 18px;
  max-width: 640px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.kontakt-card label {
  display: flex;
  flex-direction: column;
  gap: 5px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--muted);
}
.kontakt-card textarea { resize: vertical; font: inherit; }
.kontakt-card button { align-self: flex-end; }
.hilfe-fuss { margin-top: 22px; font-size: 12.5px; }
.hilfe-fuss a { color: var(--muted); }
.texte-feld { display: flex; flex-direction: column; gap: 8px; max-width: 980px; }
.texte-feld[hidden] { display: none; }
.texte-feld textarea {
  width: 100%;
  font: 13px/1.55 ui-monospace, "SF Mono", Menlo, monospace;
  padding: 12px;
  resize: vertical;
}
.texte-feld button { align-self: flex-start; margin-bottom: 8px; }
.login-recht { text-align: center; margin-top: 12px; font-size: 12px; }
.login-recht a, #hilfe-recht { color: var(--muted); }
.recht-card {
  width: 640px;
  max-width: 92vw;
  max-height: 84vh;
  overflow-y: auto;
}
.recht-card details {
  border: 1px solid var(--line);
  border-radius: 10px;
  margin: 8px 0;
}
.recht-card summary { cursor: pointer; padding: 10px 14px; font-weight: 700; }
.recht-card details > *:not(summary) { margin: 4px 14px 12px; line-height: 1.55; font-size: 13px; }

/* ── Einstellungen: Halter-Formen & Entwurfs-Verwaltung ── */
#ehm-liste {
  border: 1px solid var(--line);
  border-radius: var(--r-ctl);
  background: var(--card);
  max-width: 1080px;
  margin-top: 10px;
}
.ehm-zeile {
  display: grid;
  grid-template-columns: 44px minmax(170px, 1fr) 150px 122px 84px 84px 84px 118px;
  align-items: center;
  gap: 10px;
  padding: 6px 12px;
  font-size: 13px;
}
.ehm-zeile + .ehm-zeile { border-top: 1px solid var(--line-soft); }
.ehm-zeile:not(.ehm-kopf):hover { background: #FAFBFD; }
.ehm-kopf {
  position: sticky;
  top: -1px;
  border-radius: var(--r-ctl) var(--r-ctl) 0 0;
  z-index: 2;
  background: var(--card);
  border-bottom: 1.5px solid var(--line);
  font-size: 11px;
  font-weight: 700;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: .4px;
  padding: 9px 12px;
}
.ehm-zeile .mname {
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ehm-zeile select { width: 100%; min-width: 0; }
.ehm-zeile input[type=number] { width: 100%; }
.ehm-zeile input[type=number]:disabled { opacity: .35; }
.ehd-nutzer {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  padding: 6px 4px 10px 30px;
  border-bottom: 1px solid var(--line-soft);
  font-size: 12.5px;
}
.ehd-nutzer[hidden] { display: none; }

/* ── Labelgenerator-Liste: Kopfzeile + ziehbare Spalten ── */
.lg-kopfzeile {
  position: sticky;
  top: 0;
  z-index: 2;
  background: var(--card);
  border-bottom: 1.5px solid var(--line);
  font-size: 11px;
  font-weight: 700;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: .4px;
  cursor: default;
}
.lg-kopfzeile:hover { background: var(--card); }
.lg-kopfzeile span { position: relative; overflow: hidden; padding-right: 10px; }
.lg-grip {
  position: absolute;
  top: 0; right: 0;
  width: 9px; height: 100%;
  cursor: col-resize;
  border-right: 2px solid var(--line);
}
.lg-grip:hover { border-right-color: var(--brand); }

/* ── Anleitung: Baukasten-Editor v2 (Design-System clinical clean) ── */
#txa-editor { display: flex; gap: 18px; align-items: flex-start; }
#txa-spalte { flex: 1 1 56%; min-width: 400px; }
#txa-prev-wrap {
  flex: 1 1 44%;
  position: sticky;
  top: 6px;
  max-height: calc(100vh - 230px);
  overflow-y: auto;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  padding: 10px 16px 16px;
}
#txa-prev-wrap[hidden] { display: none; }
.txa-prev-titel {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .5px;
  text-transform: uppercase;
  color: var(--faint);
  padding: 4px 4px 10px;
}

.txa-sec {
  background: var(--card);
  border: 1px solid var(--line);
  border-left: 3px solid var(--brand);
  border-radius: var(--r-card);
  box-shadow: var(--shadow-sm);
  margin: 0 0 14px;
  transition: box-shadow .15s;
}
.txa-sec:hover { box-shadow: var(--shadow-md); }
.txa-sec.txa-zu .txa-block,
.txa-sec.txa-zu .txa-fuss { display: none; }
.txa-sec.txa-dragging { opacity: .35; }

.txa-kopf {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 9px 10px;
  border-bottom: 1px solid var(--line-soft);
}
.txa-zu .txa-kopf { border-bottom: none; }
.txa-kopf input {
  flex: 1;
  border: 1px solid transparent;
  background: transparent;
  font-weight: 700;
  font-size: 14.5px;
  padding: 6px 8px;
  border-radius: var(--r-ctl);
}
.txa-kopf input:hover { border-color: var(--line); }
.txa-kopf input:focus { border-color: var(--accent); background: var(--card); }

.txa-grip {
  flex: 0 0 auto;
  color: var(--faint);
  cursor: grab;
  font-size: 15px;
  padding: 4px 6px;
  border-radius: 6px;
  user-select: none;
  touch-action: none;
}
.txa-grip:hover { color: var(--text); background: var(--line-soft); }
.txa-grip:active { cursor: grabbing; }

.txa-ikn {
  border: none;
  background: none;
  box-shadow: none;
  color: var(--muted);
  font-size: 13px;
  padding: 5px 7px;
  border-radius: 6px;
  cursor: pointer;
}
.txa-ikn:hover { background: var(--line-soft); color: var(--text); }
.txa-ikn.warn:hover { background: var(--warn-bg); color: var(--warn); }
.txa-ikn.an { color: var(--accent); background: var(--accent-bg); }

.txa-block {
  display: flex;
  align-items: flex-start;
  gap: 2px;
  padding: 4px 10px 4px 6px;
  border-left: 2px solid transparent;
  position: relative;
}
.txa-block:hover { background: #FAFBFD; }
.txa-block:focus-within {
  border-left-color: var(--accent);
  background: #FAFBFD;
}
.txa-block .txa-grip { padding-top: 8px; font-size: 13px; }
.txa-block textarea {
  flex: 1;
  border: none;
  background: transparent;
  resize: none;
  overflow: hidden;
  font: 13.5px/1.55 var(--font);
  padding: 8px 6px;
  min-height: 34px;
}
.txa-block textarea:focus { outline: none; }
.txa-block.liste textarea { font-size: 13px; }
.txa-tools {
  display: flex;
  gap: 1px;
  opacity: 0;
  transition: opacity .12s;
  padding-top: 4px;
}
.txa-block:hover .txa-tools,
.txa-block:focus-within .txa-tools { opacity: 1; }
.txa-tools .txa-ikn { font-size: 12px; padding: 4px 6px; }
.txa-tools .fett { font-weight: 800; }

.txa-typ {
  flex: 0 0 22px;
  text-align: center;
  color: var(--faint);
  font-size: 13px;
  padding-top: 9px;
  cursor: default;
}

.txa-fuss {
  display: flex;
  gap: 8px;
  padding: 8px 12px 10px;
}
.txa-add, .txa-add-sec {
  border: 1.5px dashed var(--line);
  background: none;
  box-shadow: none;
  color: var(--muted);
  font-size: 12.5px;
  padding: 6px 12px;
  border-radius: var(--r-ctl);
  cursor: pointer;
}
.txa-add:hover, .txa-add-sec:hover {
  border-color: var(--accent);
  color: var(--accent);
  background: var(--accent-bg);
}
.txa-add-sec { padding: 10px 18px; font-size: 13px; }

.txa-drop {
  height: 3px;
  background: var(--accent);
  border-radius: 2px;
  margin: 4px 8px;
  box-shadow: 0 0 0 3px var(--accent-bg);
}
.txa-leer {
  border: 1.5px dashed var(--line);
  border-radius: var(--r-card);
  padding: 34px;
  text-align: center;
  color: var(--faint);
}
@media (max-width: 1100px) {
  #txa-editor { flex-direction: column; }
  #txa-prev-wrap { position: static; max-height: none; width: 100%; }
}

/* ── Rechtstexte: aufklappbare Baukasten-Panels ── */
.txb-panel {
  background: var(--card);
  border: 1px solid var(--line);
  border-left: 3px solid var(--brand);
  border-radius: var(--r-card);
  box-shadow: var(--shadow-sm);
  margin: 0 0 12px;
  max-width: 1400px;
}
.txb-panel summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 13px 16px;
  font-weight: 700;
  font-size: 14px;
  border-radius: var(--r-card);
}
.txb-panel summary::-webkit-details-marker { display: none; }
.txb-panel summary:hover { background: #FAFBFD; }
.txb-chev { color: var(--faint); transition: transform .15s; font-size: 12px; }
.txb-panel[open] .txb-chev { transform: rotate(90deg); }
.txb-flag { color: var(--brand); font-size: 16px; }
.txb-leiste { padding: 0 14px; }
.txb-editor {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  padding: 10px 14px 16px;
}
.txb-spalte { flex: 1 1 56%; min-width: 360px; }
.txb-bau {
  border: 1px solid var(--line-soft);
  border-radius: var(--r-ctl);
}
.txb-bau .txa-block + .txa-block { border-top: 1px solid var(--line-soft); }
.txb-fuss { display: flex; gap: 8px; padding: 10px 2px 0; }
.txb-prev-wrap {
  flex: 1 1 44%;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--r-ctl);
  padding: 8px 16px 14px;
  max-height: 460px;
  overflow-y: auto;
}
.txb-prev { font-size: 13.5px; line-height: 1.55; }
.txb-prev ul { padding-left: 20px; }
@media (max-width: 1100px) {
  .txb-editor { flex-direction: column; }
  .txb-prev-wrap { width: 100%; max-height: 280px; }
}

/* ── Favoriten-Stern ── */
.fav-star {
  flex: 0 0 auto;
  font-size: 17px;
  color: #C9CFD8;
  cursor: pointer;
  padding: 2px 4px;
  border-radius: 6px;
  transition: color .12s, transform .12s;
  line-height: 1;
}
.fav-star:hover { color: #F5B301; transform: scale(1.2); }
.fav-star.an { color: #F5B301; }

/* ── Kennzeichen: Handschriftliches Feld hinterlegt ── */
.med-row .wfb {
  flex: 0 0 22px;
  text-align: center;
  font-size: 17px;
  font-weight: 700;
  color: #DDE2E9;
  line-height: 1;
}
.med-row .wfb.an { color: var(--accent); }

/* ── Ampullenhalter: Hilfslinien + Maßband ── */
.hl-lin {
  position: absolute;
  pointer-events: none;
  z-index: 5;
}
.hl-lin.v { top: 0; bottom: 0; width: 0; border-left: 1.5px dashed var(--accent); }
.hl-lin.h { left: 0; right: 0; height: 0; border-top: 1.5px dashed var(--accent); }
.hl-lin[hidden] { display: none; }
.hl-mass {
  position: absolute;
  height: 0;
  border-top: 1.5px solid #F5B301;
  transform-origin: 0 0;
  pointer-events: none;
  z-index: 4;
}
.hl-mass[hidden] { display: none; }
.hl-mass-lbl {
  position: absolute;
  transform: translate(-50%, -130%);
  background: #1E242C;
  color: #FFD866;
  font-size: 11px;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 999px;
  pointer-events: none;
  white-space: nowrap;
  z-index: 6;
}
.hl-mass-lbl[hidden] { display: none; }

/* ── Ampullen-Varianten ── */
.ehm-varianten {
  padding: 8px 14px 12px 56px;
  border-top: 1px dashed var(--line);
  background: #FAFBFD;
}
.ehm-varianten[hidden] { display: none; }
.ehm-vzeile {
  display: grid;
  grid-template-columns: minmax(200px, 1fr) 130px 90px 90px 90px 44px;
  gap: 10px;
  align-items: center;
  padding: 4px 0;
}
.ehm-vzeile input[type=number]:disabled { opacity: .35; }
.hlva-card { width: 420px; max-width: 92vw; }
.hlva-wahl {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  width: 100%;
  text-align: left;
  margin-top: 8px;
  padding: 11px 14px;
  border: 1.5px solid var(--line);
  border-radius: var(--r-ctl);
  background: var(--card);
  box-shadow: none;
  cursor: pointer;
}
.hlva-wahl:hover { border-color: var(--accent); background: var(--accent-bg); }
.hlva-wahl span { font-size: 12px; color: var(--muted); }

/* ═══ Öffentliche Startseite ═══ */
#landing {
  position: fixed;
  inset: 0;
  overflow-y: auto;
  background: var(--bg);
  z-index: 40;
}
#landing[hidden] { display: none; }
.ld-seite { min-height: 100%; display: flex; flex-direction: column; }
.ld-hero {
  background: linear-gradient(160deg, var(--brand) 0%, var(--brand-dk) 70%);
  color: #fff;
  text-align: center;
  padding: 84px 24px 76px;
}
.ld-hero h1 { font-size: 42px; letter-spacing: -.5px; margin-bottom: 14px; }
.ld-hero p {
  max-width: 640px;
  margin: 0 auto 30px;
  font-size: 17px;
  line-height: 1.6;
  opacity: .92;
}
.ld-cta {
  background: #fff;
  color: var(--brand);
  font-size: 16px;
  font-weight: 700;
  padding: 13px 34px;
  border: none;
  border-radius: 999px;
  cursor: pointer;
  box-shadow: var(--shadow-md);
}
.ld-cta:hover { transform: translateY(-1px); box-shadow: var(--shadow-dark); }
.ld-text, .ld-features {
  max-width: 880px;
  margin: 0 auto;
  padding: 48px 24px 8px;
  width: 100%;
}
.ld-text h2, .ld-features h2 {
  font-size: 26px;
  margin-bottom: 14px;
  text-align: center;
}
.ld-text p, .ld-text li { font-size: 15px; line-height: 1.7; color: var(--text); }
.ld-text ul { padding-left: 22px; margin: 10px 0; }
.ld-karten {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 16px;
  margin-top: 22px;
}
.ld-karte {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  box-shadow: var(--shadow-sm);
  padding: 22px 18px;
  text-align: center;
}
.ld-icon { font-size: 30px; margin-bottom: 10px; }
.ld-karte h3 { font-size: 15px; margin-bottom: 7px; }
.ld-karte p { font-size: 13px; color: var(--muted); line-height: 1.55; }
.ld-callout {
  max-width: 880px;
  margin: 40px auto 0;
  width: calc(100% - 48px);
  background: var(--accent-bg);
  border: 1px solid var(--accent);
  border-radius: var(--r-card);
  padding: 18px 24px;
  text-align: center;
  font-size: 15px;
}
.ld-fuss {
  margin-top: auto;
  padding: 34px 24px 26px;
  display: flex;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  color: var(--faint);
  font-size: 12.5px;
  border-top: 1px solid var(--line);
  margin-top: 56px;
}
.ld-fuss a { color: var(--muted); }

/* ── Startseiten-Editor ── */
#ld-editor { display: flex; gap: 18px; align-items: flex-start; }
#ld-bau { flex: 1 1 50%; min-width: 380px; }
#ld-prev-wrap {
  flex: 1 1 50%;
  position: sticky;
  top: 6px;
  max-height: calc(100vh - 230px);
  overflow-y: auto;
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  background: var(--bg);
  padding: 10px 0 0;
}
#ld-prev-wrap .txa-prev-titel { padding: 4px 16px 10px; }
#ld-prev .ld-hero { padding: 44px 18px 40px; }
#ld-prev .ld-hero h1 { font-size: 28px; }
.ld-typ { font-weight: 700; font-size: 13.5px; padding-left: 4px; }
.ld-inhalt { padding: 10px 14px 14px; display: flex; flex-direction: column; gap: 8px; }
.ld-feld { width: 100%; }
textarea.ld-feld { resize: none; overflow: hidden; min-height: 38px; }
.ld-kartenzeile {
  display: grid;
  grid-template-columns: 52px minmax(140px, 1fr) minmax(200px, 2fr) 40px;
  gap: 8px;
  align-items: center;
}
.ld-icon-feld { text-align: center; }
@media (max-width: 1100px) {
  #ld-editor { flex-direction: column; }
  #ld-prev-wrap { position: static; width: 100%; max-height: 420px; }
}