/* Treffpunkt Places Backoffice
   Warm-neutrale SaaS-Verwaltungsoberflaeche. Olive als funktionaler Akzent,
   Terracotta sparsam als Markenakzent. Bewusst kein Reiseportal-Look,
   bewusst keine WordPress-Admin-Optik. */

:root {
  --bg:            #F7F5F1;
  --surface:       #FFFFFF;
  --surface-sunk:  #FBFAF7;
  --border:        #E6E1D8;
  --border-strong: #D5CEC1;

  --text:          #201E1A;
  --text-muted:    #6B645B;
  --text-faint:    #948C81;

  --olive:         #6B7A4B;
  --olive-dark:    #55623C;
  --olive-tint:    #EDF0E4;
  --olive-border:  #C9D2B2;

  --terracotta:    #B3543A;
  --terracotta-tint:#F8EDE8;

  --danger:        #9B3B2C;
  --danger-tint:   #FBEDEA;

  --radius:   10px;
  --radius-s: 7px;
  --shadow-1: 0 1px 2px rgba(32,30,26,.05), 0 1px 3px rgba(32,30,26,.04);
  --shadow-2: 0 8px 28px rgba(32,30,26,.10), 0 2px 6px rgba(32,30,26,.05);

  --sidebar-w: 248px;
  --font: "Inter", "Segoe UI", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
}

* { box-sizing: border-box; }

html, body { height: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: 14px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

h1, h2, p { margin: 0; }
a { color: inherit; }

:focus-visible {
  outline: 2px solid var(--olive);
  outline-offset: 2px;
  border-radius: 4px;
}

.muted { color: var(--text-faint); }

/* ---------------------------------------------------------------- Marke */
.brand { display: inline-flex; align-items: center; gap: 10px; }
.brand-mark { display: block; flex: none; border-radius: 9px; }
.brand-text { display: flex; flex-direction: column; line-height: 1.15; }
.brand-line1 {
  font-size: 11px; letter-spacing: .09em; text-transform: uppercase;
  color: var(--text-faint); font-weight: 600;
}
.brand-line2 { font-size: 16px; font-weight: 650; letter-spacing: -.01em; }

/* -------------------------------------------------------------- Buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 9px 15px; border-radius: var(--radius-s);
  border: 1px solid transparent; background: transparent;
  font: inherit; font-weight: 550; color: var(--text);
  cursor: pointer; white-space: nowrap;
  transition: background-color .14s ease, border-color .14s ease, color .14s ease;
}
.btn:disabled { cursor: not-allowed; }

.btn-primary { background: var(--olive); border-color: var(--olive); color: #fff; }
.btn-primary:hover:not(:disabled) { background: var(--olive-dark); border-color: var(--olive-dark); }
.btn-primary:disabled { background: var(--olive-tint); border-color: var(--olive-border); color: #7E8A63; }

.btn-secondary { background: var(--surface); border-color: var(--border-strong); }
.btn-secondary:hover:not(:disabled) { background: var(--surface-sunk); }

.btn-quiet { color: var(--text-muted); border-color: var(--border); background: var(--surface); }
.btn-quiet:hover:not(:disabled) { background: var(--surface-sunk); color: var(--text); }

.btn-block { width: 100%; }
.btn.is-busy { opacity: .85; }

.btn-badge {
  font-size: 10px; font-weight: 700; letter-spacing: .06em;
  padding: 2px 6px; border-radius: 999px;
  background: rgba(255,255,255,.55); color: #6E7A55;
}
.btn-primary:disabled .btn-badge { background: #fff; color: #7E8A63; }

/* -------------------------------------------------------------- Anmelden */
.login-page {
  min-height: 100dvh;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 18px; padding: 32px 16px;
  background:
    radial-gradient(1100px 520px at 50% -180px, #EFF1E7 0%, rgba(239,241,231,0) 62%),
    var(--bg);
}
.login-card {
  width: 100%; max-width: 392px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  box-shadow: var(--shadow-2);
  padding: 30px 28px 28px;
}
.login-brand { margin-bottom: 22px; }
.login-title { font-size: 21px; font-weight: 650; letter-spacing: -.015em; }
.login-sub { color: var(--text-muted); margin-top: 5px; margin-bottom: 22px; }

.login-form { display: flex; flex-direction: column; gap: 15px; }
.field { display: flex; flex-direction: column; gap: 6px; }
/* GEMESSEN (B-11): .field setzt display:flex und schlaegt damit das
   HTML-Attribut hidden, das seine Wirkung nur ueber den Browservorgabewert
   display:none entfaltet. Ein als hidden markiertes Feld blieb dadurch
   sichtbar - im Zertifizierungsdialog waere das Datumsfeld erschienen,
   bevor "Befristet" gewaehlt ist. Diese Regel gilt fuer JEDES Element und
   steht deshalb allgemein, nicht nur fuer den einen Dialog. */
[hidden] { display: none !important; }
.label { font-size: 12.5px; font-weight: 600; color: var(--text-muted); }

.input {
  width: 100%; padding: 10px 12px;
  border: 1px solid var(--border-strong); border-radius: var(--radius-s);
  background: var(--surface); color: var(--text);
  font: inherit;
  transition: border-color .14s ease, box-shadow .14s ease;
}
.input::placeholder { color: var(--text-faint); }
.input:focus {
  outline: none;
  border-color: var(--olive);
  box-shadow: 0 0 0 3px rgba(107,122,75,.16);
}
.input:disabled { background: var(--surface-sunk); color: var(--text-faint); }

.form-error {
  background: var(--danger-tint);
  border: 1px solid #EBC9C0;
  color: var(--danger);
  border-radius: var(--radius-s);
  padding: 9px 11px;
  font-size: 13px;
}
.login-config {
  margin-top: 16px; font-size: 12.5px; color: var(--text-muted);
  border-top: 1px solid var(--border); padding-top: 14px;
}
.login-footnote { font-size: 12px; color: var(--text-faint); }

/* --------------------------------------------------------------- Layout */
.boot {
  min-height: 100dvh; display: flex; align-items: center; justify-content: center;
}

.layout { min-height: 100dvh; }

.topbar {
  display: none;
  align-items: center; gap: 12px;
  padding: 10px 14px;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  position: sticky; top: 0; z-index: 30;
}

.nav-toggle {
  flex: none; width: 36px; height: 36px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--border-strong); border-radius: var(--radius-s);
  background: var(--surface); cursor: pointer;
}
.nav-toggle-bars, .nav-toggle-bars::before, .nav-toggle-bars::after {
  display: block; width: 15px; height: 1.5px; border-radius: 2px;
  background: var(--text); content: '';
}
.nav-toggle-bars { position: relative; }
.nav-toggle-bars::before { position: absolute; top: -5px; }
.nav-toggle-bars::after  { position: absolute; top: 5px; }

.sidebar {
  position: fixed; inset: 0 auto 0 0;
  width: var(--sidebar-w);
  display: flex; flex-direction: column;
  background: var(--surface);
  border-right: 1px solid var(--border);
  padding: 20px 14px 14px;
  z-index: 20;
}
.sidebar-head { padding: 0 8px 20px; }
.nav { flex: 1 1 auto; }
.nav-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }

.nav-link {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 8px 10px; border-radius: var(--radius-s);
  color: var(--text-muted); text-decoration: none; font-weight: 550;
  transition: background-color .14s ease, color .14s ease;
}
.nav-link:hover:not(.is-disabled):not(.is-active) { background: var(--surface-sunk); color: var(--text); }
.nav-link.is-active { background: var(--olive-tint); color: var(--olive-dark); }
.nav-link.is-disabled { color: var(--text-faint); cursor: default; }

.nav-badge {
  font-size: 10px; font-weight: 600; letter-spacing: .05em;
  padding: 2px 6px; border-radius: 999px;
  background: var(--surface-sunk); border: 1px solid var(--border);
  color: var(--text-faint);
}

.sidebar-foot {
  border-top: 1px solid var(--border);
  padding-top: 12px; display: flex; flex-direction: column; gap: 10px;
}
.account { display: flex; align-items: center; gap: 9px; padding: 0 2px; min-width: 0; }
.avatar {
  flex: none; width: 28px; height: 28px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--terracotta-tint); color: var(--terracotta);
  font-size: 12px; font-weight: 700;
}
.account-mail {
  font-size: 12.5px; color: var(--text-muted);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.main { margin-left: var(--sidebar-w); min-width: 0; }
.outlet { padding: 34px 34px 56px; max-width: 1180px; }

/* ----------------------------------------------------------------- Seite */
.page { display: flex; flex-direction: column; gap: 20px; }
.page-head {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 16px; flex-wrap: wrap;
}
.page-title { font-size: 23px; font-weight: 650; letter-spacing: -.02em; }
.page-intro { color: var(--text-muted); margin-top: 3px; }
.page-head-actions { display: flex; gap: 8px; }

.panel {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-1);
  overflow: hidden;
}

/* --------------------------------------------------------------- Tabelle */
.table-wrap { overflow-x: auto; }
.table { width: 100%; border-collapse: collapse; min-width: 720px; }

.table th {
  text-align: left; font-size: 11.5px; font-weight: 650;
  letter-spacing: .06em; text-transform: uppercase; color: var(--text-faint);
  padding: 11px 18px; background: var(--surface-sunk);
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
}
.table td {
  padding: 13px 18px; border-bottom: 1px solid var(--border);
  vertical-align: middle;
}
.table tbody tr:last-child td { border-bottom: 0; }
.table tbody tr:hover:not(.row-skeleton) { background: var(--surface-sunk); }
.table.is-loading { opacity: .6; }

.cell-name, .cell-place { display: flex; flex-direction: column; gap: 2px; }
.cell-title { font-weight: 600; }
.cell-sub { font-size: 12.5px; color: var(--text-faint); }

/* Begruendung eines Delegationsantrags in der Tabelle.
   pre-line haelt die vom Menschen gesetzten Zeilenumbrueche, ohne
   Leerraum zu erfinden. break-word laesst ein ueberlanges Wort brechen,
   statt die Tabelle aufzureissen - kein anywhere, damit normale Woerter
   nicht zerfallen. Die Deckelung sorgt dafuer, dass ein langer Text die
   Spalte nicht ueber den Bildschirm hinaus zieht. */
.cell-grund { max-width: 26rem; min-width: 0; }

/* Der erteilte Agenturzugriff steht als eigene Spalte neben dem Antrag:
   Statuszeichen, Fristen, bestaetigte Rechte und - nach einem Widerruf -
   Zeitpunkt und Begruendung. Untereinander, damit die Spalte auf einem
   schmalen Bildschirm nicht in die Breite geht. */
.cell-zugriff {
  display: flex; flex-direction: column; gap: 4px;
  max-width: 22rem; min-width: 0;
}
.cell-zugriff .liste-schmal { margin: 0; }
.grundtext {
  margin: 0; white-space: pre-line; overflow-wrap: break-word;
  color: var(--text-muted); font-size: 13px;
}

/* Die Antwort des Betriebs steht unter der Begruendung der Agentur und
   ist als solche erkennbar - gleicher Umbruch, eigene Einleitung. */
.grundtext-antwort {
  margin-top: 6px; padding-top: 6px; border-top: 1px dashed var(--border);
  color: var(--text-faint);
}

/* Auswahl der zu bestaetigenden Rechte im Entscheidungsdialog.
   Nur beantragte Rechte stehen hier - die Liste kann nichts hinzufuegen. */
.rechtewahl { display: flex; flex-direction: column; gap: 6px; }
.rechtewahl-eintrag {
  display: flex; align-items: flex-start; gap: 10px; min-width: 0;
  padding: 8px 10px; border: 1px solid var(--border); border-radius: 8px;
  background: var(--surface); cursor: pointer;
}
.rechtewahl-eintrag:focus-within {
  border-color: var(--olive); box-shadow: 0 0 0 3px rgba(107, 122, 75, 0.16);
}
.rechtewahl-eintrag span { min-width: 0; overflow-wrap: break-word; }
.rechtewahl-eintrag input[disabled] { cursor: default; }
.cell-date { color: var(--text-muted); white-space: nowrap; font-variant-numeric: tabular-nums; }

.table-note {
  padding: 11px 18px; font-size: 12.5px; color: var(--text-faint);
  border-top: 1px solid var(--border); background: var(--surface-sunk);
}

/* ----------------------------------------------------------------- Chips */
.chip {
  display: inline-flex; align-items: center;
  padding: 3px 9px; border-radius: 999px;
  font-size: 12px; font-weight: 600; white-space: nowrap;
  border: 1px solid transparent;
}
.chip-published { background: var(--olive-tint); color: var(--olive-dark); border-color: var(--olive-border); }
.chip-draft     { background: #F3F0EA; color: var(--text-muted); border-color: var(--border-strong); }
.chip-archived  { background: #EDEAE4; color: var(--text-faint); border-color: var(--border-strong); }
.chip-unknown   { background: #F3F0EA; color: var(--text-faint); border-color: var(--border-strong); }

.chip-row { display: inline-flex; flex-wrap: wrap; gap: 5px; }
.chip-portal {
  background: var(--surface-sunk); color: var(--text-muted);
  border-color: var(--border-strong); font-weight: 550;
}
.chip-portal-canonical {
  background: var(--terracotta-tint); color: var(--terracotta);
  border-color: #EAD2C8; font-weight: 600;
}

/* ------------------------------------------------------------- Zustaende */
.state {
  display: flex; flex-direction: column; align-items: center;
  gap: 8px; text-align: center;
  padding: 40px 24px;
}
.state-loading { flex-direction: row; justify-content: center; padding: 18px; }
.state-title { font-weight: 600; font-size: 15px; }
.state-hint { color: var(--text-muted); max-width: 42ch; }
.state-text { color: var(--text-muted); }
.state-error .state-title { color: var(--danger); }
.state .btn { margin-top: 6px; }

.spinner {
  width: 15px; height: 15px; flex: none;
  border: 2px solid var(--olive-border);
  border-top-color: var(--olive);
  border-radius: 50%;
  animation: spin .7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

.skeleton {
  display: block; height: 11px; border-radius: 5px;
  background: linear-gradient(90deg, #EFEBE4 25%, #F6F3EE 37%, #EFEBE4 63%);
  background-size: 400% 100%;
  animation: shimmer 1.4s ease infinite;
}
@keyframes shimmer { 0% { background-position: 100% 0; } 100% { background-position: 0 0; } }

@media (prefers-reduced-motion: reduce) {
  .spinner, .skeleton { animation: none; }
}

/* ------------------------------------------------------------ Responsive */
@media (max-width: 900px) {
  .topbar { display: flex; }
  .sidebar {
    top: 57px;
    transform: translateX(-100%);
    transition: transform .2s ease;
    box-shadow: var(--shadow-2);
  }
  .nav-open .sidebar { transform: translateX(0); }
  .main { margin-left: 0; }
  .outlet { padding: 22px 16px 44px; }
  .page-head-actions { width: 100%; }
  .page-head-actions .btn { width: 100%; }
}

@media (max-width: 480px) {
  .outlet { padding: 18px 14px 40px; }
  .page-title { font-size: 20px; }
  .table { min-width: 620px; }
}

/* ------------------------------------------------------------- Formular */
.form { display: block; }

.form-section { border-bottom: 1px solid var(--border); padding: 22px 24px 24px; }
.form-section:last-of-type { border-bottom: 0; }

.form-section-head { margin-bottom: 16px; }
.form-section-title {
  font-size: 12px; font-weight: 700; letter-spacing: .07em;
  text-transform: uppercase; color: var(--text-faint); margin: 0;
}
.form-section-hint { color: var(--text-muted); margin-top: 5px; font-size: 13px; }

.form-grid {
  display: grid; gap: 15px 18px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: start;
}
.field-wide { grid-column: 1 / -1; }

.label { display: flex; align-items: baseline; gap: 4px; }
.req { color: var(--terracotta); font-weight: 700; }

.select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5l5-5' fill='none' stroke='%236B645B' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  padding-right: 34px;
}
.select:disabled { color: var(--text-faint); }

.textarea { resize: vertical; min-height: 84px; line-height: 1.55; }

.input.has-error { border-color: var(--danger); }
.input.has-error:focus { box-shadow: 0 0 0 3px rgba(155,59,44,.14); }

.field-hint { font-size: 12.5px; color: var(--text-faint); margin: 0; }
.field-error { font-size: 12.5px; color: var(--danger); margin: 0; font-weight: 500; }

.fixed-facts .chip-row { margin-top: 2px; }
.chip-fixed {
  background: var(--surface-sunk); color: var(--text-muted);
  border-color: var(--border-strong); font-weight: 550;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 11.5px;
}

.check-row { display: flex; flex-wrap: wrap; gap: 8px 18px; padding-top: 2px; }
.check { display: inline-flex; align-items: center; gap: 7px; cursor: pointer; }
.checkbox {
  width: 16px; height: 16px; margin: 0; flex: none;
  accent-color: var(--olive); cursor: pointer;
}

.form .form-error { margin: 0 24px; }

.form-actions {
  display: flex; justify-content: flex-end; gap: 10px;
  padding: 18px 24px; background: var(--surface-sunk);
  border-top: 1px solid var(--border);
}

/* ---------------------------------------------------------------- Toast */
.toast {
  position: fixed; left: 50%; bottom: 26px; z-index: 60;
  transform: translate(-50%, 14px);
  display: flex; align-items: center; gap: 10px;
  max-width: calc(100vw - 32px);
  padding: 11px 16px;
  background: var(--text); color: #F7F5F1;
  border-radius: 999px; box-shadow: var(--shadow-2);
  font-weight: 550;
  opacity: 0; transition: opacity .22s ease, transform .22s ease;
}
.toast.is-in { opacity: 1; transform: translate(-50%, 0); }
.toast-mark {
  width: 17px; height: 17px; flex: none; border-radius: 50%;
  background: var(--olive);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='9' viewBox='0 0 11 9'%3E%3Cpath d='M1 4.6 4 7.6 10 1.4' fill='none' stroke='%23fff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: center;
}
@media (prefers-reduced-motion: reduce) {
  .toast { transition: none; }
}

@media (max-width: 720px) {
  .form-grid { grid-template-columns: minmax(0, 1fr); }
  .form-section { padding: 18px 16px 20px; }
  .form .form-error { margin: 0 16px; }
  .form-actions { padding: 14px 16px; flex-direction: column-reverse; }
  .form-actions .btn { width: 100%; }
}

/* --------------------------------------------------------- Detailansicht */
.detail { display: flex; flex-direction: column; gap: 16px; }

.detail-head {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 16px; flex-wrap: wrap;
}
.detail-head-main { min-width: 0; }
.detail-head-meta {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 7px;
}

.detail-block { padding: 18px 24px 20px; }
.detail-block-title {
  font-size: 12px; font-weight: 700; letter-spacing: .07em;
  text-transform: uppercase; color: var(--text-faint);
  margin: 0 0 14px;
}

.dl { margin: 0; display: grid; grid-template-columns: 210px minmax(0, 1fr); gap: 1px 0; }
.dl-row { display: contents; }
.dl-label {
  padding: 8px 16px 8px 0; color: var(--text-muted); font-size: 13px;
  border-top: 1px solid var(--border);
}
.dl-value {
  padding: 8px 0; margin: 0; border-top: 1px solid var(--border);
  overflow-wrap: anywhere;
}
.dl-row:first-child .dl-label, .dl-row:first-child .dl-value { border-top: 0; }

.detail-system { background: var(--surface-sunk); }
.dl-system .dl-label, .dl-system .dl-value { font-size: 12.5px; }

.mono {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 12.5px;
}

.cell-link {
  color: inherit; text-decoration: none;
  border-bottom: 1px solid transparent;
}
.cell-link:hover { color: var(--olive-dark); border-bottom-color: var(--olive-border); }

.head-actions { display: flex; gap: 8px; }

/* Dreiwertige Anzeige */
.flag {
  display: inline-flex; align-items: center; gap: 6px;
  font-weight: 550; font-size: 13px;
}
.flag::before {
  content: ''; width: 7px; height: 7px; border-radius: 50%; flex: none;
}
.flag-ja { color: var(--olive-dark); }
.flag-ja::before { background: var(--olive); }
.flag-nein { color: var(--text-muted); }
.flag-nein::before { background: var(--border-strong); }
.flag-offen { color: var(--text-faint); font-style: italic; }
.flag-offen::before { background: transparent; border: 1px dashed var(--border-strong); }

/* ------------------------------------------- Dreiwertiger Schalter (Edit) */
.tri-grid {
  display: grid; gap: 12px 20px;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}
.tri { display: flex; flex-direction: column; gap: 6px; min-width: 0; }

.seg {
  display: inline-flex; padding: 2px;
  background: var(--surface-sunk);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-s);
  width: fit-content; max-width: 100%;
}
.seg-option { position: relative; display: inline-flex; }
.seg-option span {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 5px 12px; border-radius: 5px;
  font-size: 12.5px; font-weight: 550; color: var(--text-muted);
  cursor: pointer; white-space: nowrap;
  transition: background-color .14s ease, color .14s ease;
}
.seg-input {
  position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer;
}
.seg-option:hover span { color: var(--text); }
.seg-input:checked + span { background: var(--surface); color: var(--text); box-shadow: var(--shadow-1); }
.seg-input:focus-visible + span { outline: 2px solid var(--olive); outline-offset: 1px; }

@media (max-width: 720px) {
  .dl { grid-template-columns: minmax(0, 1fr); }
  .dl-label { padding-bottom: 0; border-top: 1px solid var(--border); padding-top: 10px; }
  .dl-value { padding-top: 2px; padding-bottom: 10px; border-top: 0; }
  .dl-row:first-child .dl-label { border-top: 0; }
  .detail-block { padding: 16px; }
  .detail-head-main { width: 100%; }
  .page-head-actions, .head-actions { width: 100%; }
  .page-head-actions .btn, .head-actions .btn { flex: 1 1 0; }
  .seg { width: 100%; }
  .seg-option { flex: 1 1 0; }
  .seg-option span { width: 100%; }
}

/* --- Publikation / Publish-Preflight (M4A) --------------------------- */

.pf-inline {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
}
.pf-inline .input { flex: 1 1 200px; min-width: 0; max-width: 340px; }
.pf-inline .btn { flex: 0 0 auto; }

.pf-url {
  display: inline-block; max-width: 100%;
  overflow-wrap: anywhere; word-break: break-word;
  color: var(--olive-dark);
}

.pf-hinweis { margin-top: -2px; margin-bottom: 12px; }

.pf-liste { list-style: none; margin: 4px 0 0; padding: 0; }

.pf-zeile {
  display: grid;
  grid-template-columns: 16px minmax(0, 1fr) auto;
  align-items: start;
  gap: 12px;
  padding: 10px 0;
  border-top: 1px solid var(--border);
}
.pf-zeile:first-child { border-top: 0; padding-top: 2px; }
/* M7.3A20: Zeilen ohne Statusmarke (z. B. Tarifverlauf) nutzen die volle Breite */
.pf-zeile-voll > * { grid-column: 1 / -1; }

.pf-marke {
  width: 12px; height: 12px; margin-top: 4px;
  border-radius: 50%; flex: 0 0 auto;
}
.pf-ok    { background: var(--olive); }
.pf-fehlt { background: var(--danger); }
.pf-offen { background: transparent; border: 1px dashed var(--border-strong); }

.pf-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.pf-titel { font-weight: 550; overflow-wrap: anywhere; }
.pf-detail { color: var(--text-muted); font-size: 13px; overflow-wrap: anywhere; }

.pf-code {
  color: var(--text-faint); font-size: 12px;
  padding-top: 2px; white-space: nowrap;
}

.pf-abschluss { background: var(--surface-sunk); }
.pf-summe {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; flex-wrap: wrap;
}
.pf-summe-titel { font-weight: 600; }
.pf-summe-detail { color: var(--text-muted); font-size: 13px; margin-top: 2px; }

@media (max-width: 720px) {
  .pf-inline { align-items: stretch; }
  .pf-inline .input { flex: 1 1 100%; max-width: none; }
  .pf-inline .btn { width: 100%; }
  .pf-zeile { grid-template-columns: 16px minmax(0, 1fr); }
  .pf-code { grid-column: 2; padding-top: 0; }
  .pf-summe { flex-direction: column; align-items: stretch; }
  .pf-summe .btn { width: 100%; }
}

/* --- Öffnungszeiten-Editor (M4A.2) ---------------------------------- */

.btn-ghost {
  background: transparent; border-color: transparent; color: var(--text-muted);
}
.btn-ghost:hover:not(:disabled) { background: var(--surface-sunk); color: var(--text); }
.btn-klein { padding: 5px 10px; font-size: 12.5px; }

.oh-tage { display: flex; flex-direction: column; }

.oh-tag {
  display: grid; grid-template-columns: 210px minmax(0, 1fr);
  gap: 12px 20px; align-items: start;
  padding: 14px 0; border-top: 1px solid var(--border);
}
.oh-tag:first-child { border-top: 0; padding-top: 2px; }

.oh-kopf { display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }
.oh-name { font-weight: 600; }
.oh-schalter { width: 100%; }
.oh-schalter .seg-option { flex: 1 1 0; }
.oh-schalter .seg-option span { width: 100%; }

.oh-fenster-liste { display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }
.oh-fenster { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.oh-zeit { width: 116px; flex: 0 0 auto; }
.oh-bis { color: var(--text-faint); }
.oh-service { width: 150px; flex: 0 0 auto; }
.oh-plus { align-self: flex-start; }
.oh-zu { padding-top: 6px; }
.oh-summe { margin-right: auto; align-self: center; }

@media (max-width: 720px) {
  .oh-tag { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .oh-kopf { width: 100%; }
  .oh-fenster { width: 100%; }
  .oh-zeit { flex: 1 1 110px; width: auto; min-width: 0; }
  .oh-service { flex: 1 1 100%; width: auto; }
  .oh-fenster .btn { flex: 1 1 100%; }
  .oh-summe { margin-right: 0; order: -1; }
}

/* --- Veröffentlichen: Bestätigung (M4B) ----------------------------- */

.pf-bestaetigung {
  margin-top: 16px; padding: 16px 18px;
  background: var(--surface); border: 1px solid var(--olive-border);
  border-radius: var(--radius); box-shadow: var(--shadow-1);
}
.pf-bestaetigung-titel { font-weight: 600; margin-bottom: 10px; }
.pf-bestaetigung-liste { margin-bottom: 4px; }
.pf-bestaetigung-aktionen {
  display: flex; justify-content: flex-end; gap: 10px; margin-top: 14px;
}

@media (max-width: 720px) {
  .pf-bestaetigung { padding: 14px; }
  .pf-bestaetigung-aktionen { flex-direction: column-reverse; }
  .pf-bestaetigung-aktionen .btn { width: 100%; }
}

/* --- Speisekarte (M5) ------------------------------------------------ */

.mk-warnung { background: var(--terracotta-tint); border-color: var(--terracotta); }
.mk-warnung-titel { font-weight: 600; margin-bottom: 4px; }
.mk-warnung-text { color: var(--text-muted); font-size: 13px; }

.mk-leer { display: flex; flex-direction: column; gap: 10px; align-items: flex-start; }
.mk-leer-titel { font-weight: 600; font-size: 15px; }
.mk-leer-klein { padding: 6px 0 10px; }

.mk-menu { margin-bottom: 26px; }
.mk-menu-kopf {
  display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap;
  padding: 0 4px 10px;
}
.mk-menu-name { font-size: 17px; font-weight: 650; margin: 0; }

.mk-kat { padding: 0; margin-bottom: 10px; }
.mk-kat-kopf {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; flex-wrap: wrap; padding: 12px 18px;
}
.mk-kat-schalter {
  display: flex; align-items: center; gap: 10px; flex: 1 1 220px;
  background: none; border: 0; padding: 0; cursor: pointer;
  font: inherit; color: inherit; text-align: left; min-width: 0;
}
.mk-kat-pfeil { color: var(--text-faint); width: 12px; flex: 0 0 auto; }
.mk-kat-name { font-weight: 600; overflow-wrap: anywhere; }
.mk-kat-zahl { color: var(--text-faint); font-size: 12.5px; white-space: nowrap; }
.mk-kat-aktionen { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.mk-kat-beschreibung { padding: 0 18px 12px; margin: 0; }

.mk-sort { display: inline-flex; gap: 2px; }
.mk-sort .btn { min-width: 30px; padding: 4px 6px; }

.mk-gerichte { list-style: none; margin: 0; padding: 0 18px 8px; }
.mk-gericht {
  display: grid; grid-template-columns: minmax(0, 1fr) auto auto;
  gap: 10px 16px; align-items: start;
  padding: 10px 0; border-top: 1px solid var(--border);
}
.mk-gericht-offen { display: block; }
.mk-inaktiv .mk-gericht-name { color: var(--text-faint); }
.mk-gericht-text { min-width: 0; }
.mk-gericht-kopf { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.mk-gericht-name { font-weight: 550; overflow-wrap: anywhere; }
.mk-gericht-beschreibung {
  margin: 2px 0 0; color: var(--text-muted); font-size: 13px; overflow-wrap: anywhere;
}
.mk-gericht-preis { white-space: nowrap; padding-top: 1px; }
.mk-gericht-aktionen { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.mk-loeschen { color: var(--danger); }
.mk-loeschen:hover:not(:disabled) { background: var(--danger-tint); color: var(--danger); }
.mk-hinweis-klein { font-size: 12px; }

.mk-tags { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 5px; }
.mk-tag {
  font-size: 11.5px; padding: 2px 7px; border-radius: 999px;
  background: var(--olive-tint); color: var(--olive-dark);
}

.mk-neu-knopf { margin: 4px 4px 0; }

.mk-form { padding: 14px 18px 16px; background: var(--surface-sunk);
  border-top: 1px solid var(--border); }
.mk-gericht-offen .mk-form { border-top: 0; border-radius: var(--radius-s); }
.mk-feld { display: flex; flex-direction: column; gap: 4px; margin-bottom: 10px; min-width: 0; }
.mk-zeile { display: flex; gap: 12px; flex-wrap: wrap; }
.mk-zeile .mk-feld { flex: 1 1 150px; }
.mk-preis { max-width: 140px; }
.mk-schalter { display: flex; gap: 18px; flex-wrap: wrap; margin: 4px 0 10px; }
.mk-schalter-eintrag { display: inline-flex; align-items: center; gap: 7px; cursor: pointer; }
.mk-check { width: 16px; height: 16px; accent-color: var(--olive); }
.mk-form-aktionen { display: flex; justify-content: flex-end; gap: 10px; margin-top: 6px; }

@media (max-width: 720px) {
  .mk-kat-kopf { padding: 12px 14px; }
  .mk-kat-aktionen { width: 100%; }
  .mk-gerichte { padding: 0 14px 8px; }
  .mk-gericht { grid-template-columns: minmax(0, 1fr) auto; }
  .mk-gericht-aktionen { grid-column: 1 / -1; }
  .mk-gericht-aktionen .btn-secondary, .mk-gericht-aktionen .mk-loeschen { flex: 1 1 0; }
  .mk-zeile .mk-feld { flex: 1 1 100%; }
  .mk-preis { max-width: none; }
  .mk-form-aktionen { flex-direction: column-reverse; }
  .mk-form-aktionen .btn { width: 100%; }
  .mk-neu-knopf { width: calc(100% - 8px); }
}

/* --- Kulinarische Auszeichnung (M5.1) -------------------------------- */

.mk-taxonomie {
  margin: 12px 0 4px; padding-top: 12px; border-top: 1px solid var(--border);
}
.mk-taxonomie .form-section-hint { margin: 2px 0 8px; }
.mk-codes { display: flex; flex-wrap: wrap; gap: 6px 14px; }
.mk-code {
  display: inline-flex; align-items: center; gap: 6px;
  cursor: pointer; font-size: 13px; min-width: 0;
}
.mk-code span { overflow-wrap: anywhere; }
.mk-code-gruppe { margin-bottom: 10px; }
.mk-code-gruppe-titel {
  font-size: 11.5px; font-weight: 650; letter-spacing: .05em;
  text-transform: uppercase; color: var(--text-faint); margin-bottom: 4px;
}
.mk-tag-gericht { background: var(--terracotta-tint); color: var(--terracotta); }

@media (max-width: 720px) {
  .mk-codes { gap: 8px 12px; }
  .mk-code { flex: 1 1 45%; }
}

/* --- Allergene (M5.2) ------------------------------------------------ */

.al-liste { display: flex; flex-direction: column; gap: 2px; }

.al-zeile {
  display: grid; grid-template-columns: 200px minmax(0, 1fr);
  align-items: center; gap: 10px 16px;
  margin: 0; padding: 5px 0; border: 0;
  border-top: 1px solid var(--border);
}
.al-zeile:first-child { border-top: 0; }
.al-name {
  padding: 0; float: none; width: auto;
  font-size: 13px; overflow-wrap: anywhere;
}
.al-seg { width: 100%; }
.al-seg .seg-option { flex: 1 1 0; min-width: 0; }
.al-seg .seg-option span {
  width: 100%; padding: 5px 8px; font-size: 12px;
  overflow: hidden; text-overflow: ellipsis;
}

.mk-tag-allergen { background: var(--danger-tint); color: var(--danger); }

@media (max-width: 720px) {
  .al-zeile { grid-template-columns: minmax(0, 1fr); gap: 5px; padding: 8px 0; }
  .al-name { font-weight: 550; }
  .al-seg .seg-option span { padding: 7px 6px; }
}

/* ------------------------------------------------- Uebernahme /claim/start
   Eigenstaendige Seite ausserhalb des Backoffice-Rahmens. Etwas breiter
   als die Anmeldung, weil Betrieb, Paket und Formular untereinander
   stehen - und weil der Gastronom das auf dem Telefon liest. */
.claim-page {
  min-height: 100dvh;
  display: flex; flex-direction: column;
  align-items: center; justify-content: flex-start;
  gap: 18px; padding: 32px 16px 40px;
  background:
    radial-gradient(1100px 520px at 50% -180px, #EFF1E7 0%, rgba(239,241,231,0) 62%),
    var(--bg);
}
.claim-card {
  width: 100%; max-width: 480px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  box-shadow: var(--shadow-2);
  padding: 28px 26px 26px;
  display: flex; flex-direction: column; gap: 18px;
}
.claim-brand { margin-bottom: 2px; }
.claim-title { font-size: 21px; font-weight: 650; letter-spacing: -.015em; }
.claim-h2 { font-size: 14px; font-weight: 650; letter-spacing: -.01em; margin: 0 0 10px; }
.claim-sub { color: var(--text-muted); }
.claim-hint {
  font-size: 12.5px; color: var(--text-muted);
  border-top: 1px solid var(--border); padding-top: 14px;
}

.claim-place {
  background: var(--surface-sunk);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 13px 15px;
}
.claim-place-name { font-weight: 650; font-size: 15px; }
.claim-place-meta { color: var(--text-muted); font-size: 13px; margin-top: 2px; }

.claim-pkg {
  border: 1px solid var(--olive-border);
  background: var(--olive-tint);
  border-radius: var(--radius);
  padding: 15px 16px;
}
.claim-pkg-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.claim-pkg-name { font-weight: 700; font-size: 15px; letter-spacing: .01em; }
.claim-pkg-price { margin-top: 4px; }
.claim-pkg-amount { font-size: 20px; font-weight: 650; letter-spacing: -.015em; }
.claim-pkg-interval { color: var(--text-muted); font-size: 13px; }
.claim-pkg-features {
  list-style: none; margin: 13px 0 0; padding: 12px 0 0;
  border-top: 1px solid var(--olive-border);
  display: flex; flex-direction: column; gap: 5px;
}
.claim-pkg-feature {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 12px; font-size: 13px;
}
.claim-pkg-feature-label { color: var(--text-muted); }
.claim-pkg-feature-value { font-weight: 600; text-align: right; }

.claim-tabs {
  display: flex; gap: 6px; margin-bottom: 14px;
  background: var(--surface-sunk);
  border: 1px solid var(--border);
  border-radius: var(--radius-s);
  padding: 4px;
}
.claim-tab {
  flex: 1 1 0; min-width: 0;
  padding: 8px 10px;
  border: 1px solid transparent; border-radius: 5px;
  background: transparent; color: var(--text-muted);
  font: inherit; font-size: 13px; font-weight: 600;
  cursor: pointer;
  transition: background .14s ease, color .14s ease, border-color .14s ease;
}
.claim-tab.is-active {
  background: var(--surface); color: var(--text);
  border-color: var(--border-strong);
  box-shadow: var(--shadow-1);
}
.claim-tab:disabled { cursor: default; opacity: .6; }

.claim-form { display: flex; flex-direction: column; gap: 15px; }
.claim-form textarea.input { resize: vertical; min-height: 68px; font-family: inherit; }
.claim-account { font-size: 12.5px; color: var(--text-muted); margin-bottom: 12px; }

.claim-status {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-direction: column; gap: 6px;
  font-size: 13px; color: var(--text-muted);
}
.claim-status li { padding-left: 16px; position: relative; }
.claim-status li::before {
  content: ""; position: absolute; left: 0; top: .55em;
  width: 6px; height: 6px; border-radius: 50%; background: var(--olive);
}

.claim-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.claim-back { font-size: 13px; }
.claim-back .link { color: var(--olive-dark); text-decoration: underline; }

@media (max-width: 480px) {
  .claim-page { padding: 18px 12px 28px; }
  .claim-card { padding: 22px 18px 20px; border-radius: 12px; }
  .claim-pkg-feature { flex-direction: column; gap: 1px; }
  .claim-pkg-feature-value { text-align: left; }
}

/* --------------------------------------------- M6.0B3 Sprachabschluss */
.claim-pkg-note {
  margin: 4px 0 0; font-size: 12.5px; font-weight: 600; color: var(--olive-dark);
}
.claim-pkg-vat {
  margin: 12px 0 0; padding-top: 10px;
  border-top: 1px solid var(--olive-border);
  font-size: 12px; color: var(--text-muted);
}
.claim-switch {
  margin: 12px 0 0; font-size: 13px; color: var(--text-muted);
}
.claim-switch .link { color: var(--olive-dark); text-decoration: underline; }
.claim-switch-btn {
  border: 0; background: none; padding: 0; font: inherit; cursor: pointer;
  color: var(--olive-dark); text-decoration: underline;
}

/* Bestaetigung nach dem Antrag: das Paket ist nur noch Beleg, keine
   Auswahl mehr - deshalb ruhiger als auf der Antragsseite. */
.claim-pkg--quiet { background: var(--surface-sunk); border-color: var(--border); }
.claim-state {
  display: flex; align-items: baseline; gap: 10px; margin: 0;
  padding: 11px 14px;
  border: 1px solid var(--olive-border); background: var(--olive-tint);
  border-radius: var(--radius);
}
.claim-state dt { margin: 0; font-size: 12.5px; color: var(--text-muted); }
.claim-state dd { margin: 0; font-weight: 650; }

/* === Plattformverwaltung (M7.2C2B) =================================
   Kein neues Gestaltungssystem: alle Werte kommen aus den bestehenden
   Tokens oben. Neu sind nur Bausteine, die es bisher nicht gab -
   Gefahrenknopf, Agenturchips, Dialog, Karten, Filterleiste, Reiter.

   Farbe traegt nirgends allein eine Aussage: jeder Statuschip fuehrt
   sein Wort und zusaetzlich ein eigenes Zeichen.
   ------------------------------------------------------------------ */

.btn-danger {
  background: var(--surface); border-color: var(--danger); color: var(--danger);
}
.btn-danger:hover:not(:disabled) { background: var(--danger-tint); }
.btn-danger:disabled { color: #C08C82; border-color: #E3C7C0; }

/* --- Statuschips der Agentur --------------------------------------- */
.chip-zeichen { margin-right: 6px; font-size: 11px; line-height: 1; }

.chip-pruefung {
  background: var(--terracotta-tint); color: var(--terracotta);
  border-color: #E7C9BE;
}
.chip-aktiv {
  background: var(--olive-tint); color: var(--olive-dark);
  border-color: var(--olive-border);
}
.chip-gesperrt {
  background: var(--danger-tint); color: var(--danger);
  border-color: #E3C7C0;
}

/* --- Hinweiskasten -------------------------------------------------- */
.note {
  margin: 0; padding: 10px 14px;
  border: 1px solid var(--border); border-left-width: 3px;
  border-radius: var(--radius-s);
  background: var(--surface-sunk); color: var(--text-muted);
  font-size: 13px; max-width: 78ch;
}
.note-info { border-left-color: var(--olive); }
.note-warn { border-left-color: var(--terracotta); color: var(--text); }

.hinweis-lese { font-size: 12.5px; color: var(--text-faint); }

/* --- Filterleiste --------------------------------------------------- */
.filterleiste {
  display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px;
  padding: 16px 18px;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); box-shadow: var(--shadow-1);
}
.filterleiste .field { flex: 1 1 190px; min-width: 0; margin: 0; }
.filterleiste .field-breit { flex: 2 1 320px; }
.filter-knoepfe { display: flex; gap: 8px; flex: 0 0 auto; }

/* --- Panelueberschrift und Definitionsliste ------------------------- */
.panel-titel {
  font-size: 12px; font-weight: 700; letter-spacing: .07em;
  text-transform: uppercase; color: var(--text-faint);
  padding: 16px 18px 0;
}
.panel > .note { margin: 14px 18px; }
/* Aktionszeile als direktes Kind eines Panels (Zertifizierungsbereich
   der Agenturdetailsicht). Das Panel selbst hat kein Innenpolster; jedes
   Kind bringt die Panelmasse mit - 18 px seitlich wie .panel-titel,
   .dl-paare und .panel > .note. Ohne diese Regel sassen Schaltflaeche und
   Grundtext 1 px vom Rand (Live-Abnahme b14, Befund 1). */
.panel > .detail-aktionen { padding: 14px 18px 18px; }
.panel > .state + .state { border-top: 1px solid var(--border); }

/* Paarliste. Der eigene Klassenname ist Absicht und keine Kosmetik.
   Weiter oben steht eine zweite, aeltere Definitionsliste, die ebenfalls
   .dl heisst (.dl-row/.dl-label/.dl-value) und
   grid-template-columns: 210px minmax(0, 1fr) setzt. Solange beide
   Listen .dl hiessen, erbte diese hier jene zwei Spalten: jeder
   .dl-paar landete in einer 210px breiten Spur, und weil .dl-paar
   selbst 220px fuer die Beschriftung verlangte, blieb fuer den Wert
   0px uebrig. Genau daraus entstand die buchstabenweise Umbrechung von
   "Marketing 2" und "Inhaber" auf breitem Desktop. Zwei Listen, zwei
   Namen - damit kann die Spalte nicht mehr von woanders kommen. */
.dl-paare {
  margin: 0; padding: 14px 18px;
  display: grid;
  /* min() verhindert den klassischen Ueberlauf: ohne die Deckelung auf
     100% bliebe die Spur auch bei 320px Bildschirmbreite 24rem breit. */
  grid-template-columns: repeat(auto-fit, minmax(min(24rem, 100%), 1fr));
  gap: 10px 24px;
}
.dl-paar {
  display: grid;
  /* Beschriftung darf schrumpfen (minmax mit 0 als Minimum), der Wert
     bekommt den Rest. Keine feste Pixelbreite, die groesser sein kann
     als die Spur, in der das Paar steht. */
  grid-template-columns: minmax(0, 9.5rem) minmax(0, 1fr);
  gap: 12px; align-items: baseline; min-width: 0;
}
.dl-begriff { min-width: 0; color: var(--text-faint); font-size: 12.5px; }
/* break-word statt anywhere: ein langer Agenturname bricht, ein
   normaler Kurztext nicht. */
.dl-wert { margin: 0; min-width: 0; overflow-wrap: break-word; }

.cell-zahl { font-variant-numeric: tabular-nums; }
.cell-kennung { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 12.5px; }

/* --- Reiter der Detailansicht --------------------------------------- */
.tabs {
  display: flex; flex-wrap: wrap; gap: 4px;
  border-bottom: 1px solid var(--border); padding-bottom: 0;
}
.tab {
  appearance: none; background: none; border: 0;
  border-bottom: 2px solid transparent;
  padding: 9px 12px; margin-bottom: -1px;
  font: inherit; font-weight: 600; color: var(--text-muted);
  cursor: pointer; border-radius: var(--radius-s) var(--radius-s) 0 0;
}
.tab:hover:not(.is-active) { background: var(--surface-sunk); color: var(--text); }
.tab.is-active { color: var(--olive-dark); border-bottom-color: var(--olive); }

.tabpanel { display: flex; flex-direction: column; gap: 20px; padding-top: 20px; }
.tabpanel > div { display: flex; flex-direction: column; gap: 20px; }

.detail-aktionen { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.detail-status { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }

/* --- Karten statt Tabelle auf schmalen Schirmen --------------------- */
.kartenliste { display: none; flex-direction: column; gap: 12px; padding: 14px; }
.karte {
  border: 1px solid var(--border); border-radius: var(--radius);
  background: var(--surface); padding: 14px;
  display: flex; flex-direction: column; gap: 10px;
}
.karte-kopf {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 10px; flex-wrap: wrap;
}
.karte-dl { margin: 0; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 6px 14px; }
.karte-dl dt { color: var(--text-faint); font-size: 12.5px; }
.karte-dl dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }
.karte-fuss { display: flex; gap: 8px; }

/* --- Seitenschaltung ------------------------------------------------ */
.pager {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; flex-wrap: wrap;
  padding: 12px 18px; border-top: 1px solid var(--border);
  background: var(--surface-sunk);
}
.pager-info { font-size: 12.5px; color: var(--text-muted); }
.pager-knoepfe { display: flex; gap: 8px; }

/* --- Navigationsgruppe der Plattformverwaltung ---------------------- */
.nav-gruppe { margin-top: 14px; }
.nav-gruppe-titel {
  display: block; padding: 6px 10px;
  font-size: 11px; font-weight: 700; letter-spacing: .07em;
  text-transform: uppercase; color: var(--text-faint);
}
.nav-unterliste {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-direction: column; gap: 2px;
}
.nav-unterlink { padding-left: 18px; font-weight: 500; }

/* --- Dialog --------------------------------------------------------- */
.dialog-schicht {
  position: fixed; inset: 0; z-index: 60;
  display: flex; align-items: center; justify-content: center;
  padding: 20px;
  background: rgba(32, 30, 26, .45);
  overflow-y: auto;
}
.dialog {
  width: 100%; max-width: 560px;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); box-shadow: var(--shadow-2);
  display: flex; flex-direction: column; max-height: 100%;
}
.dialog-titel { font-size: 17px; font-weight: 650; padding: 18px 20px 0; }
.dialog-koerper {
  padding: 14px 20px 18px; display: flex; flex-direction: column; gap: 10px;
  overflow-y: auto;
}
.dialog-intro { font-weight: 550; }
.dialog-zeile { color: var(--text-muted); }
.dialog-zaehler { font-size: 12px; color: var(--text-faint); align-self: flex-end; }

/* Die Begruendung im Dialog. Eine Mindesthoehe von vier Zeilen macht
   sichtbar, dass hier mehr als ein Stichwort erwartet wird; vertikal
   groesser ziehen darf der Mensch selbst. min-width: 0 haelt das Feld
   auch in einem schmalen Dialog in seiner Spalte. */
.textarea-grund {
  resize: vertical; min-height: 96px; line-height: 1.55;
  min-width: 0; width: 100%; font-family: inherit;
}
.dialog-fehler { color: var(--danger); font-weight: 550; }
.dialog-fuss {
  display: flex; justify-content: flex-end; gap: 8px;
  flex-wrap: wrap;
  padding: 14px 20px; border-top: 1px solid var(--border);
  background: var(--surface-sunk);
  border-radius: 0 0 var(--radius) var(--radius);
}
/* GEMESSEN (Live-Abnahme b14, Befund 3): bei 320 px passten "Abbrechen"
   und "Weiter zur Bestaetigung" nicht nebeneinander in den Dialogfuss.
   Weil der Fuss nicht umbrach, ragte "Abbrechen" 3 px ueber den Rand.
   flex-wrap oben faengt jede Breite ab; auf schmalen Schirmen stehen die
   Schaltflaechen zusaetzlich untereinander, in DOM- und Tabreihenfolge,
   und duerfen ihre Beschriftung umbrechen statt sie abzuschneiden. */
@media (max-width: 480px) {
  .dialog-fuss { flex-direction: column; align-items: stretch; }
  .dialog-fuss .btn { width: 100%; white-space: normal; text-align: center; }
}

/* --- Schmale Schirme ------------------------------------------------ */
@media (max-width: 720px) {
  .dl-paar { grid-template-columns: 1fr; gap: 2px; }
  .filterleiste .field, .filterleiste .field-breit { flex: 1 1 100%; }
  .filter-knoepfe { width: 100%; }
  .filter-knoepfe .btn { flex: 1 1 auto; }
  .detail-aktionen .btn { flex: 1 1 auto; }
  .pager { justify-content: center; }
}

/* Unter 640 px traegt keine dieser Tabellen ihre Spalten mehr. Statt
   eines waagerechten Seitenscrolls wird jede Zeile zur Karte; die
   Tabelle selbst wird ausgeblendet, nicht nur verschoben. */
@media (max-width: 640px) {
  /* Nur die Adminlisten wechseln auf Karten. Die bestehenden Tabellen
     des Backoffice behalten ihr gemessenes Verhalten - ein globaler
     Wechsel haette sie unsichtbar gemacht. */
  .adminliste > .table-wrap { display: none; }
  .adminliste > .kartenliste { display: flex; }
  .tabs { overflow-x: auto; flex-wrap: nowrap; }
  .tab { white-space: nowrap; }
  .dialog-schicht { padding: 0; align-items: flex-end; }
  .dialog { max-width: none; border-radius: var(--radius) var(--radius) 0 0; max-height: 92vh; }
}

/* =====================================================================
   Agenturbereich (M7.2C3B)

   Kein zweites Design. Dieselben Farben, dieselben Abstaende, dieselben
   Bausteine wie im Backoffice - nur die Teile, die es dort noch nicht
   gibt. Alles, was den Innenraum einer Karte betrifft, haengt an
   .panel-agentur: die bestehenden Backofficeseiten behalten dadurch ihr
   gemessenes Aussehen unveraendert.
   ===================================================================== */

/* --- Kopf der Seitenleiste: fuer WELCHE Agentur wird gearbeitet? ----- */
.agentur-kopf {
  display: flex; flex-direction: column; gap: 8px;
  padding: 12px 10px 14px; margin-bottom: 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius-s);
  background: var(--surface-sunk);
}
.agentur-kopf-label {
  font-size: 11px; font-weight: 700; letter-spacing: .07em;
  text-transform: uppercase; color: var(--text-faint);
}
.agentur-kopf-name { font-weight: 650; overflow-wrap: anywhere; }
.agentur-kopf-leer { color: var(--text-faint); font-size: 13px; }
.agentur-kopf-meta { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.agentur-kopf-rolle { font-size: 12.5px; color: var(--text-muted); }
/* Der Waehler ist ein echtes select: Tastatur, Vorlesehilfe und
   Mobilbedienung bekommen damit das, was sie kennen. */
.agentur-waehler { padding: 7px 9px; font-size: 13px; }

/* --- Abstaende innerhalb einer Agenturkarte -------------------------- */
.panel-kopf {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 12px; padding-right: 18px;
}
.panel-kopf .panel-titel { flex: 1 1 auto; }
.panel-kopf > .btn { margin-top: 14px; flex: none; }

.panel-agentur { margin-bottom: 18px; }
.panel-agentur > p,
.panel-agentur > .aktionen,
.panel-agentur > .filterleiste,
.panel-agentur > .kacheln,
.panel-agentur > .liste,
.panel-agentur > .suchbereich,
.panel-agentur > .einladung-link { margin: 14px 18px; }
.panel-agentur > .table-wrap { margin-top: 14px; }
.panel-agentur > .form { padding-bottom: 4px; }

/* --- Aktionszeile ---------------------------------------------------- */
.aktionen { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }

/* --- Formularbausteine ----------------------------------------------- */
.feldgruppe {
  display: grid; gap: 14px 18px;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  padding: 14px 18px;
}
.feldgruppe-schmal { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
/* Artauswahl der Neuanlage (b18): ueber die ganze Breite, die Karten
   liegen auf breiten Schirmen nebeneinander, auf dem Telefon untereinander. */
.feldgruppe > .field-art { grid-column: 1 / -1; }
.field-art .paketwahl { flex-direction: row; flex-wrap: wrap; }
.field-art .paketwahl-eintrag { flex: 1 1 240px; min-height: 48px; }
.field-hinweis { font-size: 12.5px; color: var(--text-faint); margin: 0; }
.form-ok {
  background: var(--olive-tint);
  border: 1px solid var(--olive-border);
  color: var(--olive-dark);
  border-radius: var(--radius-s);
  padding: 9px 11px; font-size: 13px; font-weight: 550;
  margin: 0;
}
.panel-agentur > .form-ok, .panel-agentur > .form-error { margin: 14px 18px; }
.note-hinweis { border-left-color: var(--olive); }
/* Deutscher Name neben dem bestehenden .note-warn - der
   Agenturbereich beschriftet seine Kaesten deutsch. */
.note-warnung { border-left-color: var(--terracotta); color: var(--text); }

/* --- Kacheln der Uebersicht ------------------------------------------ */
.kacheln {
  display: grid; gap: 12px;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
}
.kachel {
  display: flex; flex-direction: column; gap: 3px; text-align: left;
  padding: 14px; border: 1px solid var(--border);
  border-radius: var(--radius-s); background: var(--surface);
  font: inherit; color: inherit; cursor: pointer;
  transition: border-color .14s ease, background .14s ease;
}
.kachel:hover { border-color: var(--border-strong); background: var(--surface-sunk); }
.kachel-titel {
  font-size: 11.5px; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; color: var(--text-faint);
}
.kachel-wert { font-size: 26px; font-weight: 650; line-height: 1.15; }
.kachel-sub { font-size: 12.5px; color: var(--text-muted); }

.agentur-status { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.agentur-status-rolle { font-size: 12.5px; color: var(--text-muted); }

/* --- Aufzaehlung mit Zeichen ----------------------------------------- */
/* Das Zeichen traegt die Aussage NICHT allein: daneben steht immer ein
   Satz, und fuer die Vorlesehilfe zusaetzlich ein verstecktes Wort. */
.liste { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.liste-eintrag { display: flex; align-items: flex-start; gap: 9px; }
.liste-zeichen { flex: none; width: 16px; text-align: center; font-weight: 700; line-height: 1.5; }
.liste-zeichen.ist-ja { color: var(--olive); }
.liste-zeichen.ist-nein { color: var(--text-faint); }
.liste-text { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.liste-titel { font-weight: 550; }
.liste-sub { font-size: 12.5px; color: var(--text-muted); }
.liste-schmal { gap: 4px; }
.liste-schmal .liste-eintrag { font-size: 13px; color: var(--text-muted); }

.visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* --- Kartenlisten des Agenturbereichs -------------------------------- */
/* .kartenliste ist im Backoffice nur auf schmalen Schirmen sichtbar.
   Hier ist die Karte die einzige Darstellung - also auf jeder Breite. */
.kartenliste-offen {
  display: grid; flex-direction: row;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 12px; padding: 14px 18px;
}
.karte-wahl, .karte-treffer { display: flex; flex-direction: column; gap: 10px; }
.karte-treffer .dl-paare {
  padding: 0; grid-template-columns: minmax(0, 1fr); gap: 6px 14px;
}
.karte-treffer .dl-paar { grid-template-columns: minmax(0, 7rem) minmax(0, 1fr); gap: 8px; }
.karte-zustand { display: flex; flex-direction: column; gap: 2px; }

/* --- Suche ------------------------------------------------------------ */
.suchbereich { display: flex; flex-direction: column; gap: 0; }
.panel-agentur > .suchbereich { margin: 0; }
.suchformular > .aktionen { padding: 0 18px 16px; }
.suchformular > .form-error { margin: 0 18px 12px; }
.suchergebnis { border-top: 1px solid var(--border); }
.suchzahl {
  padding: 12px 18px 0; font-size: 12.5px; color: var(--text-muted);
}

/* --- Paketwahl im Antragsdialog -------------------------------------- */
.paketwahl { display: flex; flex-direction: column; gap: 8px; }
.paketwahl-eintrag {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 11px 12px; border: 1px solid var(--border);
  border-radius: var(--radius-s); background: var(--surface);
  cursor: pointer;
}
.paketwahl-eintrag:hover { border-color: var(--border-strong); background: var(--surface-sunk); }
.paketwahl-eintrag:focus-within {
  border-color: var(--olive); box-shadow: 0 0 0 3px rgba(107,122,75,.16);
}
.radio { flex: none; margin: 3px 0 0; accent-color: var(--olive); }
.paketwahl-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.paketwahl-titel { font-weight: 600; }
.paket-rechte {
  border: 1px solid var(--border); border-radius: var(--radius-s);
  background: var(--surface-sunk); padding: 11px 12px;
}

/* --- Einladungslink --------------------------------------------------- */
/* Der Link wird gezeigt, nicht verschickt. Er steht deshalb in einem
   Feld, das man lesen und kopieren kann - und nirgends sonst. */
.einladung-link { display: flex; flex-direction: column; gap: 10px; }
.einladung-link .field { gap: 6px; }

/* --- Schmale Schirme -------------------------------------------------- */
@media (max-width: 720px) {
  .feldgruppe { grid-template-columns: 1fr; }
  .kacheln { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); }
  .kartenliste-offen { grid-template-columns: 1fr; }
  .karte-treffer .dl-paar { grid-template-columns: 1fr; gap: 2px; }
  .aktionen .btn { flex: 1 1 auto; }
  .panel-kopf > .btn { width: auto; }
}

/* Arbeitszugang einer Agentur zu einem genehmigten Betrieb (M7.2C3B6D) */
.cell-aktion { white-space: normal; }
.cell-aktion .btn { margin: 2px 6px 2px 0; }
.arbeit-kopf {
  display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: center;
  padding: 14px 18px; margin-bottom: 16px;
  border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface-sunk);
}
.arbeit-kopf .state-hint { margin: 0; flex: 1 1 260px; min-width: 0; }
.arbeit-kopf .btn { flex: 0 0 auto; }
@media (max-width: 520px) {
  .arbeit-kopf { flex-direction: column; align-items: stretch; }
  .arbeit-kopf .btn { width: 100%; }
}

/* =====================================================================
   ZERTIFIZIERTE SPEZIALAGENTUR - PILOT  (m7.2c3b12)
   =====================================================================
   Dieselbe Gestaltung wie das uebrige Backoffice, konsequent
   weitergefuehrt: ruhige Flaechen, eine Betonungsfarbe, grosszuegige
   Abstaende. Keine neuen Grundfarben - alles aus den vorhandenen
   Tokens.

   ZUSTAND NIE NUR UEBER FARBE: jeder Chip traegt zusaetzlich ein
   Zeichen und seinen Text; jede Sperre traegt einen Satz. Wer keine
   Farben unterscheidet, verliert keine einzige Aussage.
   ------------------------------------------------------------------ */

/* Kostenpflichtig gesperrt. Eigene, ruhige Kennung - nicht die
   Fehlerfarbe: es ist kein Fehler, sondern ein Angebot. */
.chip-tarif {
  background: var(--terracotta-tint); color: var(--terracotta);
  border-color: #E7C9BE;
}
.chip-neutral {
  background: var(--surface-sunk); color: var(--text-muted);
  border-color: var(--border);
}

/* --- Hauptaktionen der Einstiegsseite ------------------------------- */
.hauptaktionen {
  display: flex; flex-wrap: wrap; gap: 12px; align-items: center;
  margin: 0 0 4px;
}
.btn-gross {
  min-height: 46px; padding: 0 22px; font-size: 15px;
}
.hauptaktionen-grund {
  flex: 1 1 260px; margin: 0;
  font-size: 13px; line-height: 1.45; color: var(--text-muted);
}

/* --- Zertifizierungskasten ------------------------------------------ */
.pilot-kasten {
  display: flex; flex-direction: column; gap: 10px;
  padding: 16px; border: 1px solid var(--border);
  border-radius: var(--radius); background: var(--surface-sunk);
}
.pilot-kasten-kopf {
  display: flex; flex-wrap: wrap; gap: 10px;
  align-items: center; justify-content: space-between;
}
.pilot-kasten-titel {
  margin: 0; font-size: 13px; font-weight: 600; letter-spacing: .04em;
  text-transform: uppercase; color: var(--text-faint);
}
.pilot-kasten-text {
  margin: 0; font-size: 14px; line-height: 1.5; color: var(--text-muted);
}
.pilot-gebiete { margin: 0; padding: 0; list-style: none;
  display: flex; flex-wrap: wrap; gap: 8px; }
.pilot-gebiet {
  padding: 4px 10px; font-size: 13px;
  border: 1px solid var(--border); border-radius: 999px;
  background: var(--surface); color: var(--text);
}

/* --- Kartenraster ---------------------------------------------------
   Eine Spalte auf dem Telefon, danach so viele, wie hineinpassen. Kein
   fester Spaltenwert - damit entsteht bei 320 px keine waagerechte
   Bildlaufleiste und bei 1920 px keine Wueste.                        */
.kartenraster {
  display: grid; gap: 14px;
  grid-template-columns: 1fr;
}
@media (min-width: 620px) {
  .kartenraster { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
}

.betriebskarte {
  display: flex; flex-direction: column; gap: 8px;
  padding: 16px; background: var(--surface);
  border: 1px solid var(--border); border-radius: var(--radius);
  box-shadow: var(--shadow-1);
}
.betriebskarte.is-gesperrt { background: var(--surface-sunk); }
.betriebskarte-kopf {
  display: flex; flex-wrap: wrap; gap: 8px;
  align-items: flex-start; justify-content: space-between;
}
.betriebskarte-name {
  margin: 0; font-size: 16px; font-weight: 600; line-height: 1.3;
  color: var(--text); overflow-wrap: anywhere;
}
.betriebskarte-ort { margin: 0; font-size: 13px; color: var(--text-muted); }
.betriebskarte-zusatz {
  margin: 0; font-size: 13px; line-height: 1.45; color: var(--text-muted);
}
.betriebskarte-aktionen {
  display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px;
}
.betriebskarte-ohne {
  margin: 4px 0 0; font-size: 13px; color: var(--text-faint);
}

/* Ladezustand. Ein Geruest in der Form des Ergebnisses - kein
   springendes Layout, wenn die Antwort da ist. */
.betriebskarte-skelett { gap: 12px; }
.skelett-zeile {
  display: block; height: 12px; border-radius: 6px;
  background: linear-gradient(90deg, var(--surface-sunk) 0%,
              var(--border) 50%, var(--surface-sunk) 100%);
  background-size: 200% 100%;
  animation: skelett 1.4s ease-in-out infinite;
}
.skelett-breit  { width: 70%; }
.skelett-schmal { width: 40%; }
.skelett-knopf  { width: 120px; height: 30px; border-radius: var(--radius-s); }
@keyframes skelett {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}
@media (prefers-reduced-motion: reduce) {
  .skelett-zeile { animation: none; }
}

/* --- Bereiche im Arbeitsbereich ------------------------------------- */
.bereichsraster {
  display: grid; gap: 14px; grid-template-columns: 1fr;
}
@media (min-width: 620px) {
  .bereichsraster { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
}
.bereichskarte {
  display: flex; flex-direction: column; gap: 8px;
  padding: 16px; background: var(--surface);
  border: 1px solid var(--border); border-radius: var(--radius);
}
/* Die Klasse traegt den Zustand zusaetzlich zur Farbe - das linke Band
   ist eine zweite, nicht farbabhaengige Markierung (Position). */
.bereichskarte-offen { border-left: 3px solid var(--olive); }
.bereichskarte-recht { border-left: 3px solid var(--border-strong); }
.bereichskarte-tarif { border-left: 3px solid var(--terracotta); }
.bereichskarte-pilot { border-left: 3px solid var(--border); }
.bereichskarte-kopf {
  display: flex; flex-wrap: wrap; gap: 8px;
  align-items: flex-start; justify-content: space-between;
}
.bereichskarte-titel {
  margin: 0; font-size: 15px; font-weight: 600; color: var(--text);
}
.bereichskarte-text {
  margin: 0; font-size: 13px; line-height: 1.5; color: var(--text-muted);
}
.bereich-grund {
  margin: 0; font-size: 13px; line-height: 1.5; color: var(--text-muted);
}
.bereich-ohne {
  margin: 0; font-size: 13px; line-height: 1.5; color: var(--text-faint);
}

/* --- Arbeitsbereich: Kopf ------------------------------------------- */
.arbeit-kopf-zeile {
  display: flex; flex-wrap: wrap; gap: 10px; align-items: center;
}
.arbeit-laufzeit { font-size: 13px; color: var(--text-muted); }
.arbeit-antrag { display: flex; flex-direction: column; gap: 10px; }

/* --- Uebernahme und Neuanlage --------------------------------------- */
.uebernahme, .uebernahme-ergebnis { display: block; }
.uebernahme-umfang { display: flex; flex-direction: column; gap: 6px; }
.uebernahme-umfang-titel {
  margin: 8px 0 0; font-size: 13px; font-weight: 600; color: var(--text);
}
.dubletten { display: block; margin: 4px 0; }
.feldwert {
  margin: 0; padding: 9px 0; font-size: 14px; color: var(--text);
}
.state-ok { margin: 6px 0; font-size: 13px; color: var(--olive-dark); }
.kopf-aktionen { display: flex; flex-wrap: wrap; gap: 8px; }

/* --- Schmale Schirme -------------------------------------------------
   Bei 320 px muss jede Aktion vollstaendig erreichbar bleiben. Knoepfe
   gehen deshalb auf volle Breite, statt abgeschnitten zu werden.      */
@media (max-width: 479px) {
  .hauptaktionen { flex-direction: column; align-items: stretch; }
  .hauptaktionen .btn { width: 100%; }
  .betriebskarte-aktionen .btn { width: 100%; }
  .kopf-aktionen .btn { width: 100%; }
}

/* --- Zertifizierungsdialoge der Plattformverwaltung ------------------
   Der Name der Agentur steht in jedem dieser Dialoge oben und gross.
   Wer zertifiziert oder entzieht, soll ohne Suchen sehen, wen es
   trifft - auch auf 320 px, wo im Dialog sonst wenig hinpasst. */
.dialog-betreff {
  border: 1px solid var(--border); border-radius: var(--radius-s);
  background: var(--surface-sunk); padding: 11px 12px;
  display: flex; flex-direction: column; gap: 2px;
  margin-bottom: 12px;
}
.dialog-betreff-label {
  margin: 0; font-size: 12px; letter-spacing: .04em; text-transform: uppercase;
  color: var(--text-faint);
}
.dialog-betreff-name {
  margin: 0; font-size: 18px; line-height: 1.25; font-weight: 650;
  overflow-wrap: anywhere;
}
.dialog-betreff-sub {
  margin: 0; font-size: 12.5px; color: var(--text-muted); overflow-wrap: anywhere;
}

/* Laufzeitwahl. Die beiden Optionsfelder stehen untereinander, damit sie
   auch auf schmalen Schirmen mit dem Finger getroffen werden. Keines ist
   vorbelegt; das Datumsfeld erscheint erst nach der Wahl "Befristet". */
.fieldset {
  border: 1px solid var(--border); border-radius: var(--radius-s);
  padding: 11px 12px; margin: 0 0 12px; min-width: 0;
  display: flex; flex-direction: column; gap: 8px;
}
.fieldset > .label { padding: 0 4px; }
.radio-zeile {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 10px; border: 1px solid var(--border);
  border-radius: var(--radius-s); background: var(--surface);
}
.radio-zeile:focus-within {
  border-color: var(--olive); box-shadow: 0 0 0 3px rgba(107,122,75,.16);
}
.radio-label { cursor: pointer; min-width: 0; overflow-wrap: anywhere; }
.fieldset .field { margin: 0; }

/* =====================================================================
   Portale (m7.3a1) - Mehrportal-Ausspielung
   Karten und Reiter statt breiter Tabellen. Keine neuen Grundfarben;
   jeder Zustand traegt Zeichen und Wort, nie nur Farbe.
   ===================================================================== */
.portale-seite { display: flex; flex-direction: column; gap: 20px; min-width: 0; }
.portale-teil {
  display: flex; flex-direction: column; gap: 14px;
  padding: 16px 18px 18px; min-width: 0;
}
.portale-teil > .dl-paare { padding: 0; }
.portale-teil-kopf { display: flex; flex-direction: column; gap: 4px; }
.portale-teil-titel {
  margin: 0; font-size: 12px; font-weight: 700; letter-spacing: .07em;
  text-transform: uppercase; color: var(--text-faint);
}
.portale-teil-unter { margin: 0; font-size: 13px; color: var(--text-muted); }
.portale-zaehlung { margin: 0; font-weight: 600; }
.portale-leer { max-width: 60ch; }
.portale-cin { display: inline-flex; flex-wrap: wrap; gap: 8px; align-items: center; min-width: 0; }
.portale-cin .mono { overflow-wrap: anywhere; }

/* --- Portalkarten ----------------------------------------------------- */
.portalraster { display: grid; gap: 14px; grid-template-columns: 1fr; }
@media (min-width: 620px) {
  .portalraster { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
}
.portalkarte {
  display: flex; flex-direction: column; gap: 8px; min-width: 0;
  padding: 14px 16px; background: var(--surface);
  border: 1px solid var(--border); border-left: 3px solid var(--border);
  border-radius: var(--radius);
}
.portalkarte.is-aktiv { box-shadow: 0 0 0 2px var(--olive-border); }
.portalkarte-veroeffentlicht { border-left-color: var(--olive); }
.portalkarte-fertig, .portalkarte-eingereicht { border-left-color: var(--terracotta); }
.portalkarte-ausgewaehlt, .portalkarte-bestand { border-left-color: var(--olive-border); }
.portalkarte-zurueckgezogen { border-left-color: var(--danger); }
.portalkarte-kopf {
  display: flex; flex-wrap: wrap; gap: 8px;
  align-items: flex-start; justify-content: space-between;
}
.portalkarte-name {
  margin: 0; font-size: 15px; font-weight: 600; line-height: 1.3; overflow-wrap: anywhere;
}
.portalkarte-satz { margin: 0; font-size: 13px; line-height: 1.5; color: var(--text-muted); }
.portalkarte-fakten {
  margin: 0; padding: 0; list-style: none;
  display: flex; flex-direction: column; gap: 2px;
  font-size: 12.5px; color: var(--text-faint); overflow-wrap: anywhere;
}
.portalkarte-grenze { margin: 0; font-size: 12.5px; color: var(--text-muted); }
.portalkarte-aktionen { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 2px; }
.portalkarte .form-error { margin: 0; }

/* --- Reiter ----------------------------------------------------------- */
.reiter {
  display: flex; flex-wrap: wrap; gap: 6px;
  border-bottom: 1px solid var(--border); padding-bottom: 8px;
}
.reiter-knopf {
  display: inline-flex; flex-direction: column; align-items: flex-start; gap: 1px;
  min-height: 44px; max-width: 100%; padding: 6px 12px;
  border: 1px solid var(--border); border-radius: var(--radius-s);
  background: var(--surface-sunk); color: var(--text); font: inherit;
  cursor: pointer; text-align: left;
}
.reiter-knopf:hover { background: var(--surface); }
.reiter-knopf.is-aktiv, .reiter-knopf[aria-selected="true"] {
  background: var(--olive-tint); border-color: var(--olive); color: var(--olive-dark);
}
.reiter-knopf:focus-visible { outline: 2px solid var(--olive); outline-offset: 2px; }
.reiter-text { font-weight: 600; font-size: 13.5px; overflow-wrap: anywhere; }
.reiter-zusatz { font-size: 11.5px; color: var(--text-muted); }
.reiter-inhalt { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.portale-sprachhinweis { margin: 0; font-size: 13px; color: var(--text-muted); }

/* --- Fassung Portal x Sprache ----------------------------------------- */
.fassung-status { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.fassung-satz { margin: 0; flex: 1 1 240px; font-size: 13px; color: var(--text-muted); }
.fassung-vorlage { margin: 0; font-size: 13px; color: var(--text-muted); }

/* --- Darstellung je Portal (m7.3a4) ----------------------------------
   Radiogruppe mit Karten. Die Miniatur ist Zier (aria-hidden); Zustand
   steht immer als Wort in der Karte, nie nur als Farbe. */
.darstellung {
  display: flex; flex-direction: column; gap: 10px; min-width: 0;
  padding: 12px 14px 14px; border: 1px solid var(--border);
  border-radius: var(--radius); background: var(--surface-sunk);
}
.darstellung .fassung-unter { margin: 0; }
.darstellung-hinweis, .darstellung-nur-eine { margin: 0; max-width: 72ch; }
.darstellung-abweichung { margin: 0; }
.darstellung-aktionen { margin-top: 2px; }
.darstellung-meldung { margin: 0; }
.vorlagewahl { margin: 0; padding: 0; border: 0; min-width: 0; }
.vorlagewahl-legende { padding: 0; margin: 0 0 8px; }
.vorlagen-raster { display: grid; gap: 10px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 760px) {
  .vorlagen-raster { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }
}
.vorlagekarte {
  display: grid; grid-template-columns: auto 72px minmax(0, 1fr); gap: 12px;
  align-items: start; min-width: 0; padding: 12px;
  border: 1px solid var(--border); border-radius: var(--radius);
  background: var(--surface); cursor: pointer;
}
.vorlagekarte.is-lesend {
  grid-template-columns: 72px minmax(0, 1fr); cursor: default; max-width: 560px;
}
.vorlagekarte:not(.is-lesend):hover { border-color: var(--border-strong); }
.vorlagekarte.is-markiert, .vorlagekarte:has(.vorlagekarte-radio:checked) {
  border-color: var(--olive); background: var(--olive-tint);
  box-shadow: inset 0 0 0 1px var(--olive);
}
.vorlagekarte:focus-within { box-shadow: 0 0 0 3px rgba(107,122,75,.28); }
.vorlagekarte.is-markiert:focus-within, .vorlagekarte:has(.vorlagekarte-radio:checked):focus-within {
  box-shadow: inset 0 0 0 1px var(--olive), 0 0 0 3px rgba(107,122,75,.28);
}
.vorlagekarte-radio { width: 18px; height: 18px; margin: 2px 0 0; }
.vorlagekarte-radio:focus-visible { outline: 2px solid var(--olive); outline-offset: 3px; }
.vorlagekarte-bild { display: block; min-width: 0; line-height: 0; }
.vorlage-miniatur {
  display: block; width: 100%; height: auto; border-radius: 4px;
  box-shadow: 0 1px 2px rgba(32,30,26,.10);
}
.vorlagekarte-text { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.vorlagekarte-titel { font-weight: 650; font-size: 14px; line-height: 1.3; overflow-wrap: anywhere; }
.vorlagekarte-marken { display: flex; flex-wrap: wrap; gap: 5px; }
.vorlage-marke {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 1px 8px; border: 1px solid var(--border-strong); border-radius: 999px;
  font-size: 11.5px; line-height: 1.6; color: var(--text-muted); background: var(--surface);
}
.vorlage-marke-aktuell { border-color: var(--olive-border); color: var(--olive-dark); background: var(--olive-tint); font-weight: 600; }
.vorlage-marke-warnung { border-color: var(--terracotta); color: var(--terracotta); background: var(--terracotta-tint); }
.vorlage-marke-zeichen { font-size: 11px; line-height: 1; }
.vorlagekarte-beschreibung { font-size: 12.5px; line-height: 1.45; color: var(--text-muted); overflow-wrap: anywhere; }
@media (min-width: 480px) {
  .vorlagekarte { grid-template-columns: auto 88px minmax(0, 1fr); }
  .vorlagekarte.is-lesend { grid-template-columns: 88px minmax(0, 1fr); }
}
#portale-vorschau-titel:focus-visible { outline: 2px solid var(--olive); outline-offset: 3px; }
.fassung-form { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.portal-feld { min-width: 0; }
.portal-feld-kopf {
  display: flex; flex-wrap: wrap; gap: 8px;
  align-items: baseline; justify-content: space-between;
}
.portal-zaehler { font-size: 12px; color: var(--text-faint); font-variant-numeric: tabular-nums; }
.portal-zaehler.is-ueber { color: var(--danger); font-weight: 600; }
.input.has-error { border-color: var(--danger); }
.input[readonly] { background: var(--surface-sunk); color: var(--text-muted); }
.fassung-aktionen { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.fassung-hinweis { margin: 0; }
.fassung-konflikt { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.fassung-unter { margin: 0; font-size: 14px; font-weight: 600; color: var(--text); }
.fassung-medien, .fassung-freigabe {
  display: flex; flex-direction: column; gap: 6px;
  padding-top: 12px; border-top: 1px solid var(--border);
}
.fassung-medien-zahl { margin: 0; font-size: 13px; color: var(--text-muted); }

/* --- Veroeffentlichungsvoraussetzungen -------------------------------- */
.voraussetzungen {
  display: flex; flex-direction: column; gap: 8px;
  padding: 12px 14px; border: 1px solid #EBC9C0; border-radius: var(--radius-s);
  background: var(--danger-tint);
}
.voraussetzungen:focus-visible { outline: 2px solid var(--olive); outline-offset: 2px; }
.voraussetzungen-hinweise { border-color: var(--border); background: var(--surface-sunk); }
.voraussetzungen-liste { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 6px; }
.voraussetzung { display: flex; gap: 10px; align-items: baseline; min-width: 0; }
.voraussetzung-code {
  flex: none; min-width: 2.6em; padding: 1px 6px; border-radius: 999px;
  border: 1px solid var(--border-strong); background: var(--surface);
  font-size: 11.5px; font-weight: 700; text-align: center;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}
.voraussetzung-text { min-width: 0; font-size: 13px; color: var(--text); overflow-wrap: break-word; }

/* --- Vorschau --------------------------------------------------------- */
.vorschau-wahl { display: flex; flex-wrap: wrap; gap: 6px; }
.vorschau-umschalter.is-aktiv, .vorschau-umschalter[aria-pressed="true"] {
  background: var(--olive-tint); border-color: var(--olive); color: var(--olive-dark);
}
.vorschau {
  border: 1px dashed var(--border-strong); border-radius: var(--radius);
  background: var(--surface); overflow: hidden; min-width: 0;
}
.vorschau-marke {
  display: flex; flex-wrap: wrap; gap: 8px; align-items: center;
  padding: 8px 12px; background: var(--surface-sunk); border-bottom: 1px solid var(--border);
}
.vorschau-schild {
  padding: 2px 8px; border-radius: 999px; background: var(--text); color: var(--surface);
  font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
}
.vorschau-info { font-size: 12.5px; color: var(--text-muted); overflow-wrap: anywhere; min-width: 0; }
.vorschau-inhalt { display: flex; flex-direction: column; gap: 16px; padding: 18px; min-width: 0; }
/* Die Seite selbst gestaltet src/styles/portal-seite.css (gemeinsam mit der
   Referenzdarstellung fuer WordPress). */
/* --- m7.3a2: Tarif, Rueckzug, Erzaehlbausteine, Bildauswahl ---------- */
.portale-tarif { margin: 0; font-size: 13px; color: var(--text-muted); max-width: 80ch; }
.portale-tarif.is-voll { color: var(--text); font-weight: 550; }
.portalkarte-rueckzug {
  margin: 0; padding: 6px 10px; border-radius: var(--radius-s);
  background: var(--danger-tint); font-size: 12.5px; color: var(--text); overflow-wrap: anywhere;
}
.portalkarte-grund { color: var(--text-muted); }
.btn[aria-disabled="true"] { opacity: .5; cursor: not-allowed; }

.fassung-abschnitte {
  display: flex; flex-direction: column; gap: 10px; min-width: 0;
  padding-top: 12px; border-top: 1px solid var(--border);
}
.abschnitte-liste-wrap { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.abschnitt-liste { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 12px; }
.abschnitt-karte {
  display: flex; flex-direction: column; gap: 10px; min-width: 0;
  padding: 12px 14px; background: var(--surface-sunk);
  border: 1px solid var(--border); border-left: 3px solid var(--olive-border); border-radius: var(--radius);
}
.abschnitt-karte.is-verborgen { border-left-color: var(--border-strong); }
.abschnitt-karte:focus-within { border-color: var(--olive-border); }
.abschnitt-kopf { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; justify-content: space-between; }
.abschnitt-nr { font-weight: 600; font-size: 13.5px; overflow-wrap: anywhere; }
.abschnitt-karte .field { margin: 0; min-width: 0; }
.abschnitt-karte .select { width: 100%; max-width: 100%; }
.abschnitt-bild-zeile { display: flex; gap: 10px; align-items: center; min-width: 0; }
.abschnitt-bild-zeile .select { flex: 1 1 auto; min-width: 0; }
.abschnitt-bild-mini {
  flex: none; width: 64px; height: 48px; object-fit: cover;
  border-radius: var(--radius-s); border: 1px solid var(--border); background: var(--surface);
}
.abschnitt-aktionen { display: flex; flex-wrap: wrap; gap: 8px; }
.abschnitt-lese-titel { margin: 0; font-weight: 600; }
.abschnitt-lese-text { margin: 0; line-height: 1.55; overflow-wrap: break-word; }
.abschnitte-neu { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }

.bilder-stand { margin: 0; font-weight: 550; }
.bildauswahl { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.bild-fieldset { margin: 0; padding: 0; border: 0; min-width: 0; display: flex; flex-direction: column; gap: 10px; }
.bild-fieldset legend { padding: 0; margin-bottom: 8px; }
.bildraster {
  margin: 0; padding: 0; list-style: none; display: grid; gap: 12px;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
}
.bildkachel {
  display: flex; flex-direction: column; gap: 6px; min-width: 0; padding: 8px;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
}
.bildkachel.is-titel { box-shadow: 0 0 0 2px var(--terracotta); }
.bildkachel.is-galerie { border-color: var(--olive); }
.bildkachel.is-gesperrt { background: var(--surface-sunk); }
.bildkachel.is-gesperrt .bildkachel-img { opacity: .55; }
.bildkachel.has-error { border-color: var(--danger); }
.bildkachel-bild { aspect-ratio: 4 / 3; min-width: 0; }
.bildkachel-img {
  display: flex; align-items: center; justify-content: center;
  width: 100%; height: 100%; object-fit: cover; border-radius: var(--radius-s);
  background: var(--surface-sunk); color: var(--text-faint); font-size: 12px;
}
.bildkachel-name { margin: 0; font-size: 12.5px; overflow-wrap: anywhere; }
.bildkachel-credit { color: var(--text-faint); }
.bildkachel-problem { margin: 0; font-size: 12px; color: var(--danger); font-weight: 550; }
.bildkachel-wahl { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 13px; }
.bildkachel-wahl .check { min-height: 32px; }
.bild-keins { align-self: flex-start; }
.galerie-reihenfolge { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.galerie-reihe { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 8px; }
.galerie-eintrag {
  display: flex; flex-wrap: wrap; gap: 10px; align-items: center; min-width: 0;
  padding: 8px 10px; border: 1px solid var(--border); border-radius: var(--radius-s); background: var(--surface);
}
.galerie-eintrag.is-gesperrt { border-color: var(--danger); }
.galerie-mini {
  flex: none; width: 56px; height: 42px; object-fit: cover; border-radius: 5px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--surface-sunk); color: var(--text-faint); font-size: 10px; text-align: center;
}
.galerie-text { display: flex; flex-direction: column; flex: 1 1 160px; min-width: 0; }
.galerie-name { font-weight: 550; overflow-wrap: anywhere; }
.galerie-aktionen { display: flex; flex-wrap: wrap; gap: 6px; }
.vorschau-rueckfall { margin: 12px 18px 0; }
.vorschau-leer { padding: 16px; }

@media (max-width: 479px) {
  .bildraster { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .bildkachel { padding: 6px; }
  .galerie-aktionen .btn, .abschnitt-aktionen .btn { flex: 1 1 auto; }
  .vorschau-rueckfall { margin: 10px 12px 0; }
}

@media (max-width: 479px) {
  .portale-teil { padding: 14px 12px 16px; }
  .portalkarte-aktionen .btn, .fassung-aktionen .btn { width: 100%; }
  .vorschau-inhalt { padding: 14px 12px; }
  .reiter-knopf { flex: 1 1 auto; }
}
.portale-seite .btn { white-space: normal; text-align: center; }

/* m7.3a3: Hinweis zur Neuanlage im Unterkunftsbereich */
.uk-neuanlage-hinweis:empty { display: none; }
.uk-neuanlage-hinweis { margin: 0 0 16px; }
.uk-neuanlage-hinweis .form-section-hint { margin: 0; max-width: 72ch; }

/* m7.3a5 - Portaldarstellung im Vorschauteil */
.portaldarstellung { margin: 0 0 16px; padding: 12px 14px; border: 1px solid var(--line, #d9dde3); border-radius: 10px; background: var(--surface-2, #f7f8fa); }
.portaldarstellung .field-hint { margin: 0 0 10px; }
.portaldarstellung-knoepfe { display: flex; flex-wrap: wrap; gap: 8px; }
.portaldarstellung-knoepfe .btn { min-height: 44px; }
#portaldarstellung-meldung { margin: 10px 0 0; overflow-wrap: anywhere; }

/* m7.3a9: Bilder eines Betriebs ------------------------------------------ */
.chip-fehler { background: #FBEDEA; color: var(--danger); border-color: #EBC3BA; }
.bilder-kontingent { margin: 0 0 8px; font-weight: 600; }
.bilder-zone {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px;
  padding: 18px; border: 1.5px dashed var(--border-strong); border-radius: 12px;
  background: var(--surface-sunk); margin-bottom: 8px;
}
.bilder-zone.is-ueber { border-color: var(--olive); background: var(--olive-tint); }
.bilder-zone.is-gesperrt { opacity: .6; }
.bilder-zone .btn[aria-disabled="true"] { pointer-events: none; opacity: .6; }
.bilder-datei { position: absolute; width: 1px; height: 1px; opacity: 0; overflow: hidden; }
.bilder-datei:focus-visible + .bilder-zone-text { outline: 2px solid var(--olive); }
.bilder-zone-text { color: var(--text-muted); font-size: 13.5px; }
.bilder-uploads { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 6px; }
.bilder-upload {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 12px; align-items: center;
  padding: 8px 10px; border: 1px solid var(--border); border-radius: 8px; font-size: 13px;
}
.bilder-upload-name { overflow-wrap: anywhere; font-weight: 550; }
.bilder-upload-balken { grid-column: 1 / -1; width: 100%; height: 6px; }
.bilder-upload.is-fertig .bilder-upload-stand { color: var(--olive-dark); }
.bilder-upload.is-fehler { border-color: #EBC3BA; }
.bilder-raster { grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); }
.bilder-karte { display: flex; flex-direction: column; gap: 6px; }
.bilder-felder { display: grid; gap: 4px; }
.bilder-felder .label { font-size: 12.5px; margin-top: 4px; }
.bilder-einwilligung { align-items: flex-start; font-size: 12.5px; line-height: 1.35; margin-top: 4px; }
.bilder-aktionen { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.bilder-loeschen { color: var(--danger); }
/* m7.3a11: Platzierung je Bild (Titelbild / Galerie / nicht auf der Seite) */
.platz-gruppe { border: 0; margin: 0; padding: 0; min-width: 0; display: grid; gap: 2px; font-size: 13px; }
.platz-gruppe .check { min-height: 30px; }
.platz-kachel.is-platz-aus { border-style: dashed; }
.platz-kachel.is-platz-aus .bildkachel-img { opacity: .78; }
@media (max-width: 640px) {
  .bilder-raster { grid-template-columns: minmax(0, 1fr); }
}

/* --- M7.3A12: Einstieg fuer Betriebsinhaber (/inhaber) ------------------ */
.owner-konto { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.owner-konto .claim-account { margin-bottom: 0; }
.owner-liste { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.owner-eintrag {
  border: 1px solid var(--border); border-radius: 10px; padding: 10px 12px;
  display: flex; flex-direction: column; gap: 3px; min-width: 0;
}
.owner-eintrag-kopf { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.owner-eintrag-kopf .claim-h2 { margin: 0; }
.owner-eintrag .claim-place-name { overflow-wrap: anywhere; }
.owner-grund { font-size: 13px; color: var(--text); }
.owner-oeffnen { font-size: 13px; align-self: flex-start; color: var(--olive-dark); text-decoration: underline; }
.owner-suchzeile { display: flex; gap: 8px; }
.owner-suchzeile .input { flex: 1 1 auto; min-width: 0; }
.owner-treffer:empty { display: none; }
.owner-orgwahl { border: 0; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 6px; }
.owner-option { display: flex; align-items: center; gap: 8px; font-size: 14px; }
.owner-partner { align-self: flex-start; margin-top: 8px; text-decoration: none; }
.owner-unveroeffentlicht { font-style: italic; }

/* --- M7.3A12: Uebernahmeantraege in der Plattformverwaltung ------------- */
.claims-orgs { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 16px; }
.claims-lage { margin: 0 0 10px; }
.claims-wirkung { margin: 0 0 12px; padding-left: 18px; display: flex; flex-direction: column; gap: 4px; }
.claims-wirkung-warnung { color: var(--terracotta); font-weight: 600; }
.claims-h3 { font-size: 13px; font-weight: 650; margin: 14px 0 8px; }
.row-warnung td { background: #FBF1EC; }
.delegation-ohne-wirkung { color: var(--terracotta); font-weight: 600; }
#claims-filter { margin-bottom: 14px; max-width: 460px; }

/* --- m7.3a13: Übersicht für Betriebsinhaber (Basisbereich) ------------ */
.ub-liste { display: flex; flex-direction: column; gap: 16px; }
.ub-kopf { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 8px; }
.ub-kopf-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ub-name { margin: 0; font-size: 18px; font-weight: 600; overflow-wrap: anywhere; }
.ub-zustand { color: var(--text-faint); font-size: 12px; }
.ub-warten { background: transparent; border: 2px solid var(--terracotta); }
.ub-gesperrt { background: var(--border-strong); border-radius: 3px; }
.ub-schritt.is-ok .pf-titel { font-weight: 500; }
.ub-leistung { margin-top: 8px; }
.ub-leistung-spalten { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; }
.ub-leistung-titel { margin: 4px 0 6px; font-size: 13px; font-weight: 600; color: var(--text-muted); }
.ub-leistung-liste { list-style: none; margin: 0; padding: 0; }
.ub-leistung-zeile { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 12px; padding: 6px 0; border-top: 1px solid var(--border); }
.ub-leistung-zeile:first-child { border-top: 0; }
.ub-leistung-name { overflow-wrap: anywhere; }
.ub-leistung-wert { color: var(--olive-dark); font-size: 13px; white-space: nowrap; }
.ub-leistung-hinweis { grid-column: 1 / -1; color: var(--text-muted); font-size: 12px; }
.ub-leistung-zeile.is-nicht .ub-leistung-name { color: var(--text-faint); }
.ub-leistung-zeile.is-nicht .ub-leistung-wert { color: var(--text-faint); }
.ub-leistung-zeile.is-nicht .ub-leistung-name::before { content: "\1F512\FE0E"; margin-right: 6px; font-size: 11px; }
.ub-aktionen { margin-top: 12px; flex-wrap: wrap; }
.btn.is-gesperrt { opacity: .6; cursor: not-allowed; display: inline-flex; gap: 8px; align-items: center; }
.sprache-gesperrt p { margin: 0 0 6px; }
.sprache-gesperrt p:last-child { margin-bottom: 0; }
.owner-lingua { font-size: 13px; }
@media (max-width: 720px) {
  .ub-aktionen .btn { width: 100%; }
  .ub-leistung-wert { white-space: normal; }
}

/* --- m7.3a14: Plattformwege CIN-Pruefung und Servicegebiet ------------ */
.pw-seite .panel > .claim-form { padding: 14px 18px 18px; }
.pw-seite .panel > .state-hint { margin: 0; padding: 0 18px 16px; max-width: none; }
.pw-seite .panel > .table-wrap { margin: 12px 18px 16px; }
.cin-wahlen { border: 0; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.cin-wahlen legend { padding: 0; margin-bottom: 6px; }
.cin-wahl { display: flex; align-items: flex-start; gap: 10px; cursor: pointer; }
.cin-wahl input { margin-top: 3px; }
.cin-wahl.is-gesperrt { color: var(--text-faint); cursor: not-allowed; }
.cin-eigen { color: var(--terracotta); }
#cin-bestaetigung .note, #sg-bestaetigung .note { margin: 0; max-width: 46rem; }
#cin-bestaetigung .dl-paare, #sg-bestaetigung .dl-paare { padding: 8px 0; grid-template-columns: 1fr; }

/* --- m7.3a23: Kueche & Gerichte (Inhaber) und Kuechenpruefung (Redaktion) --- */
#kueche .pf-inline.pf-aktion, #admin-kueche .pf-inline.pf-aktion { margin-top: 8px; flex-wrap: wrap; gap: 8px; }
.ku-kennung { font-weight: 600; }
.ku-vorschlag .ku-kennung, .ku-angabe[data-anzeige="noch_nicht_geprueft"] .ku-kennung { color: var(--terracotta); }
.ku-hinweis { color: var(--text); }
.ku-belege { list-style: none; margin: 6px 0 0; padding: 0; display: flex; flex-direction: column; gap: 4px; font-size: 13px; overflow-wrap: anywhere; }
.ku-beleg-art { font-weight: 600; }
.ku-unter:empty { display: none; }
.ku-unter { margin-top: 10px; }
.ku-quelle { display: flex; flex-direction: column; gap: 10px; margin-top: 10px; }
.ku-quelle .note { margin: 0; max-width: 46rem; }
#ku-treffer { margin: 12px 0; display: flex; flex-direction: column; gap: 10px; }
#ku-treffer .cin-wahl-gruppe { display: flex; flex-direction: column; gap: 8px; }
.ku-treffer-text { overflow-wrap: anywhere; }
.ku-treffer-meta, .ku-treffer-hinweis { color: var(--text-faint); }
.kp-eintrag { padding: 14px 18px; border-top: 1px solid var(--border); display: flex; flex-direction: column; gap: 10px; }
.kp-eintrag:first-child { border-top: 0; }
.kp-kopf { display: flex; flex-wrap: wrap; gap: 6px 12px; align-items: baseline; }
.kp-kopf h3 { margin: 0; font-size: 15px; }
.kp-belege { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 10px; }
.kp-beleg { border: 1px solid var(--border); border-radius: 8px; padding: 10px 12px; font-size: 13px; display: flex; flex-direction: column; gap: 4px; overflow-wrap: anywhere; }
.kp-beleg-eigen { color: var(--terracotta); font-weight: 600; }
.kp-hinweise { margin: 0; padding-left: 18px; font-size: 13px; }
.kp-verlauf { margin: 0; padding-left: 18px; font-size: 12.5px; color: var(--text-faint); }
.kp-aktion { border-top: 1px dashed var(--border); padding-top: 10px; display: flex; flex-direction: column; gap: 8px; }
.kp-filter { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin-bottom: 12px; }
.kp-filter .select { max-width: 280px; }
.ku-zeile > .pf-text { grid-column: 2 / -1; }

/* m7.3a26: Quellen fuer Gerichte */
.qu-liste { display: grid; gap: 0.75rem; }
.qu-url { word-break: break-all; }
.qu-oeffentlich, .qu-vorschau { margin: 0.5rem 0 0; padding: 0.5rem 0.75rem; border-left: 3px solid var(--border); background: var(--surface-2, #f7f5ef); font-size: 0.95rem; }
.qu-vorschau { border-left-style: dashed; }
.qu-verlauf li[data-status="aktiv"] { font-weight: 600; }

/* m7.3a27: Quellenpruefung */
.kp-quellenpruefung { margin: 0.25rem 0 0.5rem; font-size: 0.92rem; }
.kp-quellenpruefung.is-faellig { font-weight: 600; color: var(--danger, #9b2c1f); }

/* m7.3a28 (0093): Bestaetigung bei der Freigabe einer Website-Quelle, Quellenpruefung */
.fb-bestaetigung { border: 1px solid var(--border); border-radius: 8px; padding: 12px 14px; margin: 12px 0; min-width: 0; }
.fb-bestaetigung legend { padding: 0 6px; }
.fb-vergleich { margin: 4px 0 10px; }
.fb-oeffnen { margin: 0 0 10px; display: inline-block; }
.fb-punkte { display: grid; gap: 6px; }
.fb-punkt { display: flex; gap: 8px; align-items: flex-start; }
.fb-punkt input[disabled] + span { opacity: .6; }
.pr-eintraege { display: grid; gap: 16px; }
.pr-eintrag .qu-url, .fb-vergleich .qu-url { overflow-wrap: anywhere; word-break: break-word; }
.kp-knoepfe { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0; }

/* m7.3a30 (0097 F3): Zimmer & Verpflegung */
#unterkunft-zimmer .ua-kopf { display: flex; flex-direction: column; gap: 10px; }
#unterkunft-zimmer .ua-tarif { margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 4px; }
#unterkunft-zimmer .ua-liste { list-style: none; margin: 0 0 12px; padding: 0; display: flex; flex-direction: column; gap: 12px; }
#unterkunft-zimmer .ua-karte { border: 1px solid var(--border-strong); border-radius: 10px; padding: 14px 16px; min-width: 0; }
#unterkunft-zimmer .ua-karte-kopf { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; justify-content: space-between; }
#unterkunft-zimmer .ua-karte-kopf h3 { margin: 0; font-size: 16px; overflow-wrap: anywhere; }
#unterkunft-zimmer .ua-fakten, #unterkunft-zimmer .ua-text { margin: 6px 0 0; overflow-wrap: anywhere; }
#unterkunft-zimmer .ua-fakten { color: var(--text-muted); font-size: 13.5px; }
#unterkunft-zimmer .ua-aktionen { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
#unterkunft-zimmer .ua-formular { display: flex; flex-direction: column; gap: 14px; margin-top: 12px; }
#unterkunft-zimmer .ua-verpflegung { margin-top: 10px; }
#unterkunft-zimmer .ua-unterkopf { margin: 12px 0 8px; font-size: 14px; }
#unterkunft-zimmer .ua-vliste { gap: 8px; }
#unterkunft-zimmer .ua-vkarte { padding: 10px 14px; background: var(--surface-muted, transparent); }
#unterkunft-zimmer .ua-vkarte h3 { font-size: 15px; font-weight: 600; }
#unterkunft-zimmer .btn, #unterkunft-zimmer .input { min-height: 44px; }
#unterkunft-zimmer .panel { padding: 18px 20px; margin-bottom: 18px; display: flex; flex-direction: column; gap: 10px; }
#unterkunft-zimmer .panel > h2 { margin: 0; font-size: 18px; }
#unterkunft-zimmer .panel .note { margin: 0; max-width: 72ch; }
@media (max-width: 720px) { #unterkunft-zimmer .panel { padding: 14px 12px; } #unterkunft-zimmer .ua-karte { padding: 12px; } }
/* m7.3a31 (0098): Verfuegbarkeitskalender je Einheit */
#unterkunft-zimmer .ua-kalender { margin-top: 12px; padding: 12px 14px; border: 1px dashed var(--border-strong); border-radius: 10px; min-width: 0; }
#unterkunft-zimmer .ua-kalender-kopf { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; }
#unterkunft-zimmer .ua-kalender-kopf h4 { margin: 0; font-size: 15px; }
#unterkunft-zimmer .ua-kal-monate { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr)); gap: 14px; margin: 10px 0; }
#unterkunft-zimmer .ua-kal-monat { width: 100%; border-collapse: collapse; table-layout: fixed; font-size: 13px; }
#unterkunft-zimmer .ua-kal-monat caption { text-align: left; font-weight: 600; padding: 0 0 4px; }
#unterkunft-zimmer .ua-kal-monat th { font-weight: 500; color: var(--text-muted); padding: 2px 0; }
#unterkunft-zimmer .ua-kal-tag { text-align: center; padding: 6px 0; border: 1px solid var(--bg, #fff); border-radius: 6px; }
#unterkunft-zimmer .ua-kal-unbekannt { background: repeating-linear-gradient(135deg, #f4f2ed, #f4f2ed 4px, #ebe8e0 4px, #ebe8e0 8px); color: #5c5850; }
#unterkunft-zimmer .ua-kal-belegt { background: #b3261e; color: #fff; }
#unterkunft-zimmer .ua-kal-auf_anfrage { background: #f3d58a; color: #3e3100; }
#unterkunft-zimmer .ua-kal-vergangen { opacity: .45; }
#unterkunft-zimmer .ua-kal-legende { list-style: none; margin: 4px 0 10px; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 13px; }
#unterkunft-zimmer .ua-kal-legende li { display: flex; align-items: center; gap: 6px; }
#unterkunft-zimmer .ua-kal-punkt { width: 14px; height: 14px; border-radius: 4px; display: inline-block; }
#unterkunft-zimmer .ua-kal-liste { gap: 8px; }
#unterkunft-zimmer .ua-kal-zeile { padding: 8px 12px; }
#unterkunft-zimmer .ua-kal-zeile h5 { margin: 0; font-size: 14px; }
#unterkunft-zimmer .ua-kal-chip-belegt { background: #fbe9e7; color: #8a1c14; }
#unterkunft-zimmer .ua-kal-chip-auf_anfrage { background: #fff4d6; color: #5c4600; }
#unterkunft-zimmer .ua-kal-pruefen { margin: 10px 0; }
#unterkunft-zimmer .ua-kal-pruefen-label { display: flex; align-items: flex-start; gap: 8px; min-height: 44px; cursor: pointer; }
#unterkunft-zimmer .ua-kal-pruefen-label input { width: 22px; height: 22px; margin-top: 2px; flex: none; }
/* m7.3a32 (0099): externe Kalender */
#unterkunft-zimmer .ua-quellen { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--border, #e4e1d8); }
#unterkunft-zimmer .ua-quellen-titel { margin: 0 0 4px; font-size: 14px; }
#unterkunft-zimmer .ua-quellen-liste { gap: 8px; margin: 8px 0; }
#unterkunft-zimmer .ua-quelle { padding: 8px 12px; min-width: 0; }
#unterkunft-zimmer .ua-quelle h5 { margin: 0; font-size: 14px; overflow-wrap: anywhere; }
#unterkunft-zimmer .ua-quelle [data-quelle-host] { overflow-wrap: anywhere; }
#unterkunft-zimmer .ua-quelle-chip-ok { background: #e6f2ea; color: #1f5a33; }
#unterkunft-zimmer .ua-quelle-chip-fehler { background: #fbe9e7; color: #8a1c14; }
#unterkunft-zimmer .ua-quelle-chip-teilweise { background: #fff4d6; color: #5c4600; }
#unterkunft-zimmer .ua-quelle-chip-neu, #unterkunft-zimmer .ua-quelle-chip-pausiert { background: #eeece6; color: #4f4b44; }
/* 0099 Fassung 2: getrennt (Belegungen bleiben), Entscheidung, Warnung nach drei Stunden */
#unterkunft-zimmer .ua-quelle-chip-getrennt { background: #ece8f4; color: #3f3566; }
#unterkunft-zimmer .ua-quelle-entscheidung { margin-top: 8px; }
#unterkunft-zimmer .ua-quelle-entscheidung .radio-zeile, #unterkunft-zimmer .ua-quelle-bestaetigung .check { min-height: 44px; box-sizing: border-box; }
#unterkunft-zimmer .ua-quelle-bestaetigung .check { align-items: flex-start; }
#unterkunft-zimmer .ua-quelle-bestaetigung .check span { overflow-wrap: anywhere; }
#unterkunft-zimmer .ua-quelle-sync { margin: 4px 0; font-weight: 600; color: #3f3566; overflow-wrap: anywhere; }
#unterkunft-zimmer .ua-kal-sync { margin: 6px 0; padding-left: 18px; color: #3f3566; font-weight: 600; }
#unterkunft-zimmer [data-kal-nicht-eingelesen] .ua-warnung-titel { margin: 8px 0 4px; font-weight: 600; color: #5c4600; }
#unterkunft-zimmer [data-kal-extern-veraltet] .ua-warnung-titel { margin: 8px 0 4px; font-weight: 600; color: #8a1c14; }
#unterkunft-zimmer .ua-kal-zeile-extern { border-style: dashed; }
#unterkunft-zimmer .ua-quelle-adresse .input { width: 100%; min-width: 0; }

/* m7.3a33 (0101/0102): Pflegeweg, Darstellung, Einordnung je Einheit */
#unterkunft-einrichten .ua-aktionen, #unterkunft-darstellung .ua-aktionen { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.pw-fortschritt { margin: 0 0 12px; color: var(--text-muted); font-weight: 600; }
.pw-schritte { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.pw-schritt { background: var(--surface, #fff); border: 1px solid var(--border-strong); border-radius: 12px; padding: 16px 18px; min-width: 0; }
.pw-schritt.is-erledigt { border-left: 5px solid #2f6b3a; }
.pw-schritt.is-offen { border-left: 5px solid #b7791f; }
.pw-schritt.is-hinweis { border-left: 5px solid #8a8577; }
.pw-kopf { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.pw-nr { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 50%; background: #efece3; font-weight: 700; flex: 0 0 auto; }
.pw-schritt.is-erledigt .pw-nr { background: #2f6b3a; color: #fff; }
.pw-titel { margin: 0; font-size: 1.05rem; flex: 1 1 auto; }
.pw-stand-erledigt { background: #e3f0e5; color: #1e4a26; }
.pw-stand-offen { background: #fbf0cf; color: #4a3a00; }
.pw-stand-hinweis { background: #efece3; color: #4f4b44; }
.pw-inhalt { margin-top: 10px; min-width: 0; }
.pw-liste { list-style: none; margin: 6px 0; padding: 0; display: grid; gap: 6px; }
.pw-liste li { overflow-wrap: anywhere; }
.chip-warnung { background: #fdecea; color: #7a1d15; border: 1px solid #f3b8b1; }
.pw-arten { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 10px; border: 0; padding: 0; margin: 8px 0; }
.pw-arten legend { margin-bottom: 6px; }
.pw-artkarte { display: flex; gap: 10px; align-items: flex-start; border: 1px solid var(--border-strong); border-radius: 10px; padding: 12px; cursor: pointer; min-height: 44px; }
.pw-artkarte.is-markiert, .pw-artkarte:has(input:checked) { border-color: #3d3f1b; box-shadow: 0 0 0 2px #3d3f1b33; background: #f7f6ee; }
.pw-artkarte-text { display: grid; gap: 3px; min-width: 0; }
.pw-artkarte-titel { font-weight: 700; }
.pw-artkarte-beschreibung, .pw-artkarte-einheiten { font-size: .88rem; color: var(--text-muted); }
.pw-checks { display: flex; flex-wrap: wrap; gap: 8px; border: 0; padding: 0; margin: 8px 0; }
.pw-checks legend { width: 100%; margin-bottom: 4px; }
.pw-check { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 6px 12px; border: 1px solid var(--border-strong); border-radius: 999px; cursor: pointer; }
.pw-check:has(input:checked) { background: #eef0e2; border-color: #3d3f1b; }
.pw-konfliktbericht { margin-top: 10px; }
#unterkunft-zimmer .ua-privat { color: #3d3f1b; }
#unterkunft-zimmer .ua-ruhend { margin-top: 8px; }
#unterkunft-zimmer .ua-ruhend-liste { margin: 6px 0 0 18px; }
#unterkunft-zimmer .ua-bildraster { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 10px; margin: 8px 0; }
#unterkunft-zimmer .ua-bildwahl { position: relative; display: grid; gap: 4px; border: 2px solid transparent; border-radius: 8px; padding: 4px; cursor: pointer; }
#unterkunft-zimmer .ua-bildwahl.is-markiert { border-color: #3d3f1b; background: #f7f6ee; }
#unterkunft-zimmer .ua-bildwahl input { position: absolute; top: 10px; left: 10px; width: 20px; height: 20px; }
#unterkunft-zimmer .ua-bildwahl img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 6px; }
#unterkunft-zimmer .ua-bildwahl-nr { position: absolute; top: 8px; right: 10px; min-width: 22px; text-align: center; background: #3d3f1b; color: #fff; border-radius: 11px; font-weight: 700; font-size: .85rem; }
#unterkunft-zimmer .ua-bildwahl-nr:empty { display: none; }
#unterkunft-zimmer .ua-bildwahl-text { font-size: .82rem; color: var(--text-muted); overflow-wrap: anywhere; }
#unterkunft-darstellung .ud-portal { margin-top: 12px; }
@media (max-width: 720px) { .pw-schritt { padding: 12px; } .pw-arten { grid-template-columns: 1fr; } }
#unterkunft-einrichten .btn, #unterkunft-einrichten .input, #unterkunft-darstellung .btn { min-height: 44px; }

/* m7.3a34: Entwurfsweg - Auswirkungen auf Einheit und Kalender vor dem Speichern */
.ua-auswirkungen { margin-top: 12px; padding: 12px 14px; border: 1px solid #d9c98a; border-left: 4px solid #b58a00; border-radius: 8px; background: #fffaf0; }
.ua-auswirkungen .label { margin: 0 0 6px; }
.ua-auswirkungen-liste { margin: 6px 0 8px 1.1rem; padding: 0; display: grid; gap: 4px; }
.ua-auswirkungen[data-entwurf="nein"] { border-left-color: #6b7a3a; background: #f7f9f1; }

/* m7.3a35 (0107): Umgebungsangaben und Bezeichnungen je Sprache im Pflegeweg */
.pw-sprachen { margin: 4px 0 12px; }
.pw-sprachen > summary { cursor: pointer; font-size: 13px; color: var(--text-muted); min-height: 44px; display: flex; align-items: center; }
.pw-sprachen-tabelle { overflow-x: auto; }
.pw-sprachen-tabelle table { width: 100%; border-collapse: collapse; font-size: 13px; }
.pw-sprachen-tabelle th, .pw-sprachen-tabelle td { text-align: left; padding: 6px 8px; border-bottom: 1px solid var(--border); vertical-align: top; }
@media (max-width: 640px) {
  .pw-sprachen-tabelle thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .pw-sprachen-tabelle tr { display: grid; gap: 2px; padding: 6px 0; border-bottom: 1px solid var(--border); }
  .pw-sprachen-tabelle td { display: block; border: 0; padding: 0 8px; }
  .pw-sprachen-tabelle td::before { content: attr(data-sprache) ': '; color: var(--text-faint); }
}
#pw-umgebung { margin-top: 14px; }

/* m7.3a38 (0112): Preise je Einheit und Zeitraum */
.up-einheiten { display: grid; gap: 20px; }
.up-einheit { padding: 18px 20px; display: grid; gap: 14px; }
.up-kopf { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.up-kopf h3 { margin: 0; }
.up-check { margin: 0; padding-left: 1.1rem; display: grid; gap: 4px; }
.up-check .up-ok { list-style: none; margin-left: -1.1rem; color: #3f6b2a; }
.up-block { border-top: 1px solid #e3e0d6; padding-top: 12px; display: grid; gap: 10px; }
.up-tabelle { width: 100%; border-collapse: collapse; font-size: 0.92rem; }
.up-tabelle th, .up-tabelle td { text-align: left; padding: 6px 8px; border-bottom: 1px solid #ece9df; vertical-align: middle; }
.up-form { display: grid; gap: 10px; padding: 12px 14px; border: 1px solid #d9d5c7; border-radius: 8px; background: #fbfaf5; max-width: 640px; }
.up-kontrolle { font-weight: 600; }
.up-fieldset { border: 1px solid #d9d5c7; border-radius: 8px; padding: 10px 14px; display: grid; gap: 6px; }
.up-radio, .up-check-zeile { display: flex; gap: 8px; align-items: flex-start; }
.up-sonst-zeile { display: grid; grid-template-columns: 2fr 1fr 1.2fr 1.2fr auto; gap: 8px; align-items: center; margin-bottom: 6px; }
.up-sonstige, .up-kaution, .up-bestaetigung { display: grid; gap: 8px; }
.up-probe { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 14px; }
.up-probe-spalte { padding: 10px 12px; border: 1px solid #d9d5c7; border-radius: 8px; }
.up-probe-summe { font-size: 1.15rem; font-weight: 700; margin: 4px 0; }
.up-konflikte li { color: #8a4b00; }
/* m7.3a39 (0116): Preismodell, Folgenvorschau, Kinder, Betten, Probe mit Gaesten */
.up-modelle { gap: 10px; }
.up-modell-karte { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border: 1px solid #d9d5c7; border-radius: 8px; background: #fff; cursor: pointer; }
.up-modell-karte.gewaehlt { border-color: #3f6b2a; box-shadow: 0 0 0 1px #3f6b2a inset; }
.up-modell-text { display: grid; gap: 2px; min-width: 0; }
.up-form-breit { max-width: 860px; }
.up-folgen { display: grid; gap: 10px; padding: 12px 14px; border: 1px solid #c9b77a; border-radius: 8px; background: #fffaf0; }
.up-folgen h5 { margin: 0; }
.up-abweichend { display: inline-block; white-space: normal; }
.up-details > summary { cursor: pointer; font-weight: 700; padding: 2px 0; }
.up-details[open] > summary { margin-bottom: 8px; }
.up-reihe { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 8px 12px; align-items: end; }
.up-kind { display: grid; gap: 8px; padding: 10px 12px; border: 1px solid #e3e0d6; border-radius: 8px; }
.up-kind.field-fehler, .field-fehler .input { border-color: #b3261e; }
.up-einheit .field-error { color: #b3261e; font-size: 0.9rem; }
.up-einheit .input { max-width: 100%; box-sizing: border-box; }
.up-einheit { min-width: 0; overflow-wrap: anywhere; }
.up-zeilen-aktionen { display: flex; flex-wrap: wrap; gap: 6px; }
.up-probe-gaeste { grid-column: 1 / -1; margin: 0; }
@media (max-width: 720px) {
  .up-sonst-zeile { grid-template-columns: 1fr; }
  /* Tabellen werden auf dem Telefon zu Karten: kein waagerechter Ueberlauf */
  .up-tabelle, .up-tabelle tbody, .up-tabelle tr, .up-tabelle td { display: block; width: 100%; box-sizing: border-box; }
  .up-tabelle thead { display: none; }
  .up-tabelle tr { border: 1px solid #e3e0d6; border-radius: 8px; padding: 6px 8px; margin-bottom: 8px; }
  .up-tabelle td { border-bottom: none; padding: 3px 0; }
  .up-tabelle td[data-label]::before { content: attr(data-label) ": "; font-weight: 600; }
  .up-probe { grid-template-columns: 1fr; }
}

/* m7.3a40 (0118): Fehler am Formular, Zuruecksetzen/Entfernen, nicht verwendete Personenpreise */
.up-blockfehler { margin: 0.6rem 0; outline: none; }
.up-blockfehler:focus-visible { outline: 2px solid var(--color-warning, #b45309); outline-offset: 2px; }
.up-ungenutzt { margin: 0.8rem 0; padding: 0.6rem 0.8rem; border: 1px dashed var(--color-border, #d1d5db); border-radius: 6px; background: var(--color-surface-muted, #fafaf9); }
.up-ungenutzt .ua-liste { margin: 0.3rem 0 0.4rem; }
.up-abhaengig { margin-top: -0.2rem; }
[data-form="belegung-entfernen"] .ua-liste li span, [data-block="ungenutzt"] .ua-liste li span { overflow-wrap: anywhere; }

/* m7.3a42: Vermieter-Startseite ----------------------------------------- */
#vermieter-startseite { max-width: 1200px; }
.vs-statuszeile { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 16px; }

/* Tabs */
.vs-tabs { display: flex; gap: 0; border-bottom: 2px solid var(--border-muted, #e3e0d6); margin: 0 0 20px; }
.vs-tab { background: none; border: none; border-bottom: 3px solid transparent; margin-bottom: -2px; padding: 8px 18px; font-size: 0.97rem; color: var(--text-muted); cursor: pointer; }
.vs-tab:hover { color: var(--text-base); }
.vs-tab-aktiv { color: var(--olive-dark, #3f6b2a); border-bottom-color: var(--olive-dark, #3f6b2a); font-weight: 600; }
.vs-tab-inhalt { animation: vs-fade 0.1s ease; }
@keyframes vs-fade { from { opacity: 0; } to { opacity: 1; } }

/* Einstiegskarte */
.vs-einstieg { margin: 0 0 20px; padding: 16px 20px; border-left: 4px solid var(--olive-border, #8a9a6a); }
.vs-einstieg-titel { margin: 0 0 6px; font-size: 1.05rem; }
.vs-einstieg-liste { margin: 8px 0 0; padding: 0; list-style: none; display: grid; gap: 8px; }
.vs-einstieg-punkt { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--border-muted, #e3e0d6); }
.vs-einstieg-punkt:last-child { border-bottom: none; }

/* Verfügbarkeiten-Tab: Monatswechsler */
.vs-monat-nav { display: flex; align-items: center; gap: 12px; margin: 0 0 12px; }
.vs-monat-label { font-weight: 600; min-width: 120px; text-align: center; }

/* Kalender-Tabelle */
.vs-kal-container { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.vs-kal-tabelle { border-collapse: collapse; font-size: 0.85rem; white-space: nowrap; }
.vs-kal-tabelle th, .vs-kal-tabelle td { padding: 4px 3px; border: 1px solid var(--border-muted, #e3e0d6); }
.vs-kal-einh-kopf { min-width: 140px; text-align: left; padding-left: 6px; }
.vs-kal-status-kopf { min-width: 130px; text-align: left; padding-left: 6px; }
.vs-kal-tag-kopf { width: 24px; text-align: center; font-weight: 400; color: var(--text-muted); }
.vs-kal-einh-name { vertical-align: top; padding: 5px 6px; }
.vs-einh-name { font-weight: 600; }
.vs-kal-link { font-size: 0.8rem; color: var(--olive-dark, #3f6b2a); white-space: nowrap; }
.vs-kal-status { padding: 5px 6px; font-size: 0.82rem; color: var(--text-muted); }
.vs-kal-status.vs-kal-warnung { color: var(--warning, #854d0e); }
.vs-kal-zelle { width: 24px; text-align: center; background: #fafaf8; font-size: 0.75rem; color: transparent; }
.vs-kal-belegt { background: #c9d8b8; color: #3f6b2a; }
.vs-kal-auf_anfrage { background: #f0e8c8; color: #7a6020; }
.vs-kal-punkt { display: inline-block; width: 12px; height: 12px; border-radius: 2px; margin-right: 4px; vertical-align: middle; }
.vs-legende { display: flex; gap: 16px; list-style: none; padding: 8px 0 0; margin: 0; font-size: 0.85rem; color: var(--text-muted); }
.vs-legende li { display: flex; align-items: center; }

/* Preise-Tab */
.vs-preis-aktionen { margin: 0 0 16px; }
.vs-preis-einheiten { display: grid; gap: 16px; }
.vs-pk { padding: 14px 18px; }
.vs-pk-kopf { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px; margin: 0 0 8px; }
.vs-pk-name { margin: 0; font-size: 1rem; }
.vs-pk-modell { margin: 0 0 8px; color: var(--text-muted); font-size: 0.92rem; }
.vs-pk-check { margin: 0 0 8px; padding: 0 0 0 16px; font-size: 0.92rem; color: var(--danger, #b3261e); }
.vs-pk-meldung:empty { display: none; }
.vs-pk-aktionen { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }

/* Schnellcheck-Tab */
.vs-sc-sektion { margin: 0 0 20px; }
.vs-sc-sektion[data-ton="rot"] .vs-sc-titel { color: var(--danger, #b3261e); }
.vs-sc-sektion[data-ton="orange"] .vs-sc-titel { color: #8a4b00; }
.vs-sc-sektion[data-ton="gelb"] .vs-sc-titel { color: #7a6020; }
.vs-sc-sektion[data-ton="oliv"] .vs-sc-titel { color: var(--olive-dark, #3f6b2a); }
.vs-sc-titel { margin: 0 0 10px; font-size: 1rem; }
.vs-sc-liste { padding: 0; margin: 0; list-style: none; display: grid; gap: 10px; }
.vs-sc-eintrag { display: grid; gap: 3px; padding: 10px 14px; border: 1px solid var(--border-muted, #e3e0d6); border-radius: 8px; background: #fbfaf5; }
.vs-sc-sektion[data-ton="rot"] .vs-sc-eintrag { border-color: #f3b8b1; background: #fff8f7; }
.vs-sc-sektion[data-ton="orange"] .vs-sc-eintrag { border-color: #f5d9a6; background: #fffbf5; }
.vs-sc-sektion[data-ton="gelb"] .vs-sc-eintrag { border-color: #e8daac; background: #fffdf0; }
.vs-sc-was { display: block; font-weight: 600; font-size: 0.95rem; }
.vs-sc-auswirkung, .vs-sc-loesung { display: block; font-size: 0.88rem; color: var(--text-muted); }
.vs-sc-sprung { margin-top: 6px; align-self: start; }

@media (max-width: 720px) {
  .vs-tabs { overflow-x: auto; gap: 0; }
  .vs-tab { padding: 8px 12px; }
  .vs-monat-label { min-width: 90px; }
  .vs-einstieg-punkt { flex-direction: column; align-items: flex-start; }
}

/* Schnellcheck in-page Sprung: kurze Hervorhebung der Zielkarte */
@keyframes vs-highlight { 0% { background: #d4e8c2; } 100% { background: transparent; } }
.vs-pk-highlight { animation: vs-highlight 1.6s ease; }

/* Publish-Bestätigung in der Preiskarte */
.vs-pk-bestaetigung { padding: 10px 0 4px; display: grid; gap: 8px; }
.vs-pk-best-text { margin: 0; font-size: 0.92rem; color: var(--text-muted); }
.vs-pk-best-aktionen { display: flex; gap: 8px; }

/* Knopf in der Vermieter-Startseite zum Belegungskalender */
.vs-kal-erfassen-link { margin: 0 0 12px; display: inline-block; }

/* ===================================================================
   Belegungskalender (m7.3a43)
   =================================================================== */

.bk-nav { display: flex; align-items: center; gap: 8px; margin: 0 0 16px; flex-wrap: wrap; }
.bk-nav-label { font-weight: 600; min-width: 140px; text-align: center; }

/* Auswahlhinweis bei Zwei-Klick-Erfassung */
.bk-auswahl-hint {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 8px 14px; margin: 0 0 12px;
  background: var(--bg-info, #eff6ff); border-left: 4px solid var(--blue, #3b82f6);
  border-radius: 0 6px 6px 0; font-size: 0.92rem;
}
.bk-fehler-hint {
  padding: 8px 14px; margin: 0 0 12px;
  background: #fff8f7; border-left: 4px solid var(--danger, #b3261e);
  border-radius: 0 6px 6px 0; font-size: 0.92rem; color: var(--danger, #b3261e);
}
.bk-fehler-hint p { margin: 0; }

/* Scrollbarer Kalender-Container */
.bk-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin: 0 0 12px;
}

/* Tabelle */
.bk-tabelle {
  border-collapse: collapse;
  font-size: 0.82rem;
  white-space: nowrap;
  min-width: max-content;
}

/* Sticky Kopfzeile und Einheitenspalte */
.bk-tabelle thead tr th { position: sticky; top: 0; z-index: 2; background: var(--bg-page, #fff); }
.bk-th-einh {
  position: sticky; left: 0; z-index: 3; background: var(--bg-page, #fff);
  min-width: 120px; max-width: 180px; text-align: left;
  padding: 5px 8px; border: 1px solid var(--border-muted, #e3e0d6);
  font-weight: 600; font-size: 0.82rem;
}
.bk-th-tag {
  width: 30px; min-width: 28px; text-align: center;
  padding: 3px 2px; border: 1px solid var(--border-muted, #e3e0d6);
  line-height: 1.2;
}
.bk-th-zahl { display: block; font-weight: 500; }
.bk-th-wt { display: block; color: var(--text-muted); font-size: 0.7rem; font-weight: 400; }
.bk-wo { background: var(--bg-soft, #f8f6f0) !important; }

/* Zeilen */
.bk-zeile { }
.bk-zeile-b .bk-td-einh, .bk-zeile-b .bk-td-tag { background: var(--bg-soft, #f8f6f0); }
.bk-td-einh {
  position: sticky; left: 0; z-index: 1;
  background: var(--bg-page, #fff);
  min-width: 120px; max-width: 180px;
  padding: 4px 8px; border: 1px solid var(--border-muted, #e3e0d6);
  vertical-align: middle;
}
.bk-zeile-b .bk-td-einh { background: var(--bg-soft, #f8f6f0); }
.bk-einh-name { font-weight: 600; font-size: 0.88rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; max-width: 165px; }
.bk-td-tag {
  width: 30px; min-width: 28px; height: 30px;
  padding: 2px 1px; border: 1px solid var(--border-muted, #e3e0d6);
  text-align: center; vertical-align: middle; cursor: pointer;
  position: relative;
}
.bk-td-tag:hover, .bk-td-tag:focus { outline: 2px solid var(--olive-border, #8a9a6a); outline-offset: -2px; }
.bk-td-tag:focus { z-index: 1; }

/* Belegungsbalken – inline span innerhalb der Zelle */
.bk-bar {
  display: block;
  height: 22px;
  background: transparent;
}
.bk-belegt { background: #c9d8b8; }
.bk-auf_anfrage { background: #f0e8c8; }
.bk-extern { opacity: 0.7; }

/* Balken-Enden: abgerundete Ecken am Start und Ende */
.bk-bar-l { border-radius: 4px 0 0 4px; margin-left: 2px; }
.bk-bar-r { border-radius: 0 4px 4px 0; margin-right: 2px; }
.bk-bar-einzel { border-radius: 4px; margin: 0 2px; }

/* Anreise-Auswahl-Markierung */
.bk-bar-anreise {
  background: var(--blue, #3b82f6) !important;
  border-radius: 4px !important;
  margin: 0 2px !important;
}

/* Legende */
.bk-legende { display: flex; gap: 16px; list-style: none; padding: 0; margin: 8px 0 0; font-size: 0.85rem; color: var(--text-muted); }
.bk-legende li { display: flex; align-items: center; gap: 6px; }
.bk-legend-punkt { display: inline-block; width: 16px; height: 16px; border-radius: 3px; }

/* Überlappungs-Liste im Dialog */
.bk-ueberlapp-liste { list-style: none; padding: 0; margin: 0 0 16px; display: grid; gap: 8px; }

/* Nächte-Info im Formular */
.bk-naechte-info { min-height: 1.4em; }

/* Mobile 390 px */
@media (max-width: 440px) {
  .bk-nav-label { min-width: 100px; font-size: 0.92rem; }
  .bk-th-einh, .bk-td-einh { min-width: 90px; max-width: 110px; }
  .bk-einh-name { max-width: 100px; }
  .bk-th-tag { width: 26px; min-width: 24px; }
  .bk-td-tag { width: 26px; min-width: 24px; height: 28px; }
  .bk-bar { height: 18px; }
}

/* m7.3a44: Belegungsdialog (unified) und Teilfreigabe */
.bk-dlg-kopf { padding: 0 0 12px; border-bottom: 1px solid var(--border, #ddd); margin-bottom: 12px; }
.bk-datum-reihe { display: flex; align-items: baseline; gap: 12px; margin: 0; }
.bk-datum-wert { font-weight: 600; font-size: 1rem; }
.bk-datum-naechte { color: var(--text-muted); font-size: 0.88rem; }
.bk-zustand { min-height: 60px; }
.bk-aktionen { display: flex; flex-direction: column; gap: 12px; }
.bk-aktion-reihe { display: flex; flex-wrap: wrap; gap: 8px; }
.bk-aktion-btn { flex: 1 1 auto; min-width: 140px; }
.bk-aktion-entfernen { border-color: var(--danger, #b44); color: var(--danger, #b44); }
.bk-aktion-entfernen:hover { background: #fdf0f0; }
.bk-loading-info { display: flex; align-items: center; gap: 10px; padding: 16px 0; color: var(--text-muted); }
.bk-vorschau-liste { list-style: none; padding: 0; margin: 0 0 4px; display: grid; gap: 6px; }
.bk-vorschau-op { display: flex; flex-direction: column; gap: 2px; padding: 6px 8px;
  background: var(--bg-soft, #f8f6f0); border-radius: 4px; font-size: 0.88rem; }
.bk-vorschau-rest { color: var(--text-muted); font-size: 0.82rem; padding-left: 8px; }
.bk-vorschau-aktualisiert { color: var(--text-muted); font-size: 0.85rem; margin: 0 0 8px; font-style: italic; }
.bk-details-btn { margin-left: 8px; }
@media (max-width: 420px) {
  .bk-aktion-reihe { flex-direction: column; }
  .bk-aktion-btn { min-width: 0; flex: none; width: 100%; }
  .bk-datum-reihe { flex-direction: column; gap: 2px; }
}

/* m7.3a45: Dialoge des Belegungskalenders - einheitlicher Innenabstand.
   Titel, Labels, Felder, Hinweise und Knoepfe teilen denselben Rand:
   Desktop 24 px, schmale Ansicht (Bottom-Sheet, ab 640 px abwaerts) 16 px.
   Gilt nur fuer .dialog-bk (Belegungskalender); andere Dialoge bleiben unveraendert.
   Der Dialogfuss steht im Koerper und schliesst buendig mit dem Inhalt ab.
   Kein waagerechtes Scrollen (min-width: 0, Umbruch); bei geringer Hoehe
   scrollt der Koerper senkrecht, der Titel bleibt stehen. */
.dialog-bk { --dp: 24px; min-width: 0; }
.dialog-bk .dialog-titel { padding: var(--dp) var(--dp) 0; overflow-wrap: anywhere; }
.dialog-bk .dialog-koerper {
  padding: 14px var(--dp) var(--dp); gap: 12px;
  min-width: 0; overflow-x: hidden; overflow-wrap: anywhere;
}
.dialog-bk .dialog-form { display: flex; flex-direction: column; min-height: 0; min-width: 0; }
.dialog-bk .field { min-width: 0; }
.dialog-bk .input { width: 100%; min-width: 0; max-width: 100%; box-sizing: border-box; }
.dialog-bk .dialog-koerper .dialog-fuss {
  padding: 16px 0 0; margin-top: 4px; background: none; border-radius: 0;
}
@media (max-width: 640px) {
  .dialog-bk { --dp: 16px; }
  .dialog-bk .dialog-koerper { padding-bottom: calc(var(--dp) + env(safe-area-inset-bottom, 0px)); }
}

/* m7.3a46: Teilfreigabe-Vorschau - Zeilen "Bisher / Entfaellt / Bleibt".
   Abstaende wie bk-vorschau-op; Beschriftung bricht auf schmalen Schirmen mit um. */
.bk-vorschau-titel { font-weight: 600; font-size: 0.9rem; }
.bk-vorschau-zeile { display: flex; flex-wrap: wrap; gap: 0 8px; font-size: 0.88rem; min-width: 0; }
.bk-vorschau-label { min-width: 5.2rem; color: var(--text-muted); }
@media (max-width: 420px) {
  .bk-vorschau-label { min-width: 0; }
}

/* --- m7.3a47: Operator-Zentrale (Einträge) ------------------------------ */
.chip-op-fehler  { background: var(--danger-tint); color: var(--danger); border-color: #E5BDB5; }
.chip-op-hinweis { background: var(--terracotta-tint); color: var(--terracotta); border-color: #E8C9BC; }
.chip-op-dublette { background: #F3F0EA; color: var(--text); border-color: var(--border-strong); }
.chip-op-ok      { background: var(--olive-tint); color: var(--olive-dark); border-color: var(--olive-border); }
.chip-op-pflicht { background: #F3F0EA; color: var(--text-muted); border-color: var(--border-strong); }
.op-zaehler { margin: 0 0 12px; color: var(--text-muted); font-size: 13.5px; overflow-wrap: anywhere; }
.op-probleme-zelle { display: flex; flex-wrap: wrap; gap: 4px; }
.op-detail { display: flex; flex-direction: column; gap: 16px; }
.op-abschnitt { padding: 18px; }
.op-titel { margin: 0 0 10px; font-size: 16px; }
.op-hinweis { margin: 0 0 12px; color: var(--text-muted); font-size: 13px; }
.op-problem { border: 1px solid var(--border); border-left-width: 4px; border-radius: var(--radius-s); padding: 12px 14px; margin-bottom: 12px; background: var(--surface); }
.op-problem-fehler  { border-left-color: var(--danger); }
.op-problem-hinweis { border-left-color: var(--terracotta); }
.op-problem-kopf { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 6px; }
.op-was { margin: 0 0 8px; font-weight: 600; overflow-wrap: anywhere; }
.op-dl { margin: 0; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 4px 14px; }
.op-dl dt { color: var(--text-faint); font-size: 12.5px; }
.op-dl dd { margin: 0; overflow-wrap: anywhere; }
.op-meldung { margin: 8px 0 0; color: var(--text-faint); font-size: 12.5px; overflow-wrap: anywhere; }
.op-problem-aktion { margin-top: 10px; }
.op-nicht-selbst { color: var(--text-muted); font-size: 13px; }
.op-liste, .op-dub { margin: 0; padding-left: 18px; }
.op-dub li { margin: 4px 0; display: flex; flex-direction: column; }
.op-aktion { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 16px; padding: 10px 0; border-top: 1px solid var(--border); }
.op-aktion:first-of-type { border-top: 0; }
.op-aktion-text { display: flex; flex-direction: column; min-width: 0; flex: 1 1 240px; }
.op-formular { display: flex; flex-direction: column; gap: 14px; padding: 18px; max-width: 640px; }
.op-venue { display: flex; flex-direction: column; gap: 14px; }
.op-venue[hidden] { display: none; }
.op-neu-knoepfe { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.filterleiste .filter-knoepfe { display: flex; gap: 8px; align-items: flex-end; flex: 0 0 auto; }
@media (max-width: 720px) {
  .op-dl { grid-template-columns: minmax(0, 1fr); }
  .op-abschnitt, .op-formular { padding: 14px; }
}
td.op-zwei > span { display: block; }
.op-zwei .cell-sub { color: var(--text-faint); font-size: 12.5px; }
.chip-op-empf { background: #F3F0EA; color: var(--text-muted); border-color: var(--border-strong); font-weight: 400; }
.op-problem-empfehlung { border-left-color: var(--border-strong); }

/* m7.3a58: Aufenthaltsbedingungen (Wochentage, Vorlauf) */
.up-tage { display: flex; flex-wrap: wrap; gap: 8px; }
.up-tag { min-width: 48px; min-height: 44px; }
.up-tag-alle { min-width: 96px; }
fieldset.field { border: 0; padding: 0; margin: 0; min-width: 0; }
fieldset.field > legend { padding: 0; margin-bottom: 6px; }