/* ============================================
   sprach-test.com — Partnerportal & Administration
   Baut auf denselben Design-Tokens auf wie die Website.
   ============================================ */

.panel-body {
  background: var(--mist);
}

.panel-shell {
  display: flex;
  min-height: 100vh;
}

/* --------------------------------------------
   Seitennavigation
   -------------------------------------------- */
.panel-sidebar {
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  width: 252px;
  background: var(--ink);
  color: #C7D2E1;
  position: sticky;
  top: 0;
  height: 100vh;
  overflow-y: auto;
}

.panel-brand {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 20px 20px 18px;
  text-decoration: none;
  border-bottom: 1px solid rgba(255, 255, 255, 0.09);
}

.panel-brand .brand-mark {
  background: var(--signal);
  color: #fff;
}

.panel-brand .brand-name {
  display: block;
  font-family: var(--font-display);
  font-size: 0.92rem;
  font-weight: 800;
  color: #fff;
  line-height: 1.2;
}

.panel-brand .brand-sub {
  display: block;
  font-size: 0.73rem;
  color: #8296B0;
  margin-top: 1px;
}

.panel-nav-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 14px 12px;
  flex: 1;
}

.panel-nav-link {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  border-radius: 8px;
  font-size: 0.89rem;
  font-weight: 500;
  color: #C7D2E1;
  text-decoration: none;
  transition: background 0.14s ease, color 0.14s ease;
}

.panel-nav-link svg {
  flex-shrink: 0;
  opacity: 0.75;
}

.panel-nav-link:hover {
  background: rgba(255, 255, 255, 0.07);
  color: #fff;
}

.panel-nav-link.active {
  background: var(--signal);
  color: #fff;
  font-weight: 600;
}

.panel-nav-link.active svg {
  opacity: 1;
}

.panel-nav-badge {
  margin-left: auto;
  min-width: 21px;
  padding: 1px 6px;
  border-radius: 999px;
  background: var(--signal);
  color: #fff;
  font-size: 0.72rem;
  font-weight: 700;
  text-align: center;
}

.panel-nav-link.active .panel-nav-badge {
  background: rgba(255, 255, 255, 0.24);
}

.panel-sidebar-foot {
  padding: 12px;
  border-top: 1px solid rgba(255, 255, 255, 0.09);
}

/* --------------------------------------------
   Kopfzeile
   -------------------------------------------- */
.panel-main {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.panel-topbar {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 14px 26px;
  background: var(--white);
  border-bottom: 1px solid var(--line);
  position: sticky;
  top: 0;
  z-index: 20;
}

.panel-topbar-title {
  flex: 1;
  min-width: 0;
}

.panel-topbar-title h1 {
  font-family: var(--font-display);
  font-size: 1.12rem;
  font-weight: 800;
  line-height: 1.3;
  color: var(--ink);
}

.panel-topbar-title p {
  font-size: 0.85rem;
  color: var(--slate);
  margin-top: 2px;
}

.panel-user {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
}

.panel-user-name {
  font-size: 0.85rem;
  font-weight: 600;
  text-align: right;
  line-height: 1.35;
}

.panel-user-name small {
  display: block;
  font-weight: 400;
  color: var(--slate);
  font-size: 0.78rem;
}

.panel-burger {
  display: none;
  width: 38px;
  height: 38px;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--white);
  cursor: pointer;
  color: var(--ink);
}

.panel-content {
  padding: 24px 26px 48px;
  flex: 1;
}

/* --------------------------------------------
   Kennzahlen
   -------------------------------------------- */
.kpi-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 14px;
  margin-bottom: 24px;
}

.kpi {
  padding: 18px 20px;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
}

.kpi-label {
  display: block;
  font-size: 0.79rem;
  font-weight: 500;
  color: var(--slate);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 7px;
}

.kpi-value {
  font-family: var(--font-display);
  font-size: 1.75rem;
  font-weight: 800;
  line-height: 1.1;
  color: var(--ink);
}

.kpi-hint {
  display: block;
  margin-top: 5px;
  font-size: 0.8rem;
  color: var(--slate);
}

.kpi-accent .kpi-value {
  color: var(--signal);
}

/* --------------------------------------------
   Karten und Tabellen
   -------------------------------------------- */
.card {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  margin-bottom: 20px;
}

.card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
  padding: 16px 20px;
  border-bottom: 1px solid var(--line);
}

.card-head h2 {
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 700;
  color: var(--ink);
}

.card-head p {
  font-size: 0.83rem;
  color: var(--slate);
  margin-top: 2px;
}

.card-body {
  padding: 20px;
}

.card-body-flush {
  padding: 0;
}

.table-wrap {
  overflow-x: auto;
}

.table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.88rem;
}

.table th {
  padding: 11px 16px;
  text-align: left;
  font-weight: 600;
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  color: var(--slate);
  background: var(--mist);
  border-bottom: 1px solid var(--line);
  white-space: nowrap;
}

.th-sort {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: inherit;
  text-decoration: none;
  cursor: pointer;
}

.th-sort:hover {
  color: var(--ink);
}

.th-sort.active {
  color: var(--ink);
}

.th-sort-arrow {
  font-size: 0.7em;
}

/* Kurzes Abdunkeln, während eine Filter-/Sortier-Anfrage per AJAX läuft */
.is-loading {
  opacity: 0.5;
  transition: opacity 0.12s ease;
  pointer-events: none;
}

.table td {
  padding: 12px 16px;
  border-bottom: 1px solid var(--line);
  vertical-align: middle;
}

.table tbody tr:last-child td {
  border-bottom: 0;
}

.table tbody tr:hover {
  background: #FAFBFD;
}

.table .num {
  text-align: right;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.table .actions {
  text-align: right;
  white-space: nowrap;
}

.table-strong {
  font-weight: 600;
  color: var(--ink);
}

.table-sub {
  display: block;
  font-size: 0.8rem;
  color: var(--slate);
  margin-top: 2px;
}

.table a {
  color: var(--ink);
  text-decoration: none;
}

.table a:hover {
  color: var(--signal);
  text-decoration: underline;
}

/* --------------------------------------------
   Filterleiste
   -------------------------------------------- */
.toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 12px;
  padding: 16px 20px;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  margin-bottom: 18px;
  box-shadow: var(--shadow-sm);
}

.toolbar .field {
  min-width: 150px;
  margin: 0;
}

.toolbar .field label {
  font-size: 0.78rem;
}

.toolbar-grow {
  flex: 1;
  min-width: 200px;
}

/* Von/Bis (o. ä. zusammengehörige Felder) sollen beim Umbruch immer
   gemeinsam auf eine Zeile springen statt einzeln zu verrutschen. */
.toolbar-group {
  display: flex;
  gap: 12px;
  margin: 0;
}

.toolbar-group .field {
  min-width: 130px;
}

.toolbar-actions {
  display: flex;
  gap: 8px;
  margin-left: auto;
}

/* --------------------------------------------
   Statusanzeigen
   -------------------------------------------- */
.status {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 0.76rem;
  font-weight: 600;
  white-space: nowrap;
}

.status-approved,
.status-paid,
.status-published {
  background: #E8F5EC;
  color: #1B5E33;
}

.status-pending,
.status-draft,
.status-new {
  background: #FEF4E6;
  color: #8A5A08;
}

.status-rejected,
.status-cancelled,
.status-failed {
  background: #FDECEE;
  color: var(--signal-dark);
}

.status-completed,
.status-read,
.status-answered,
.status-refunded {
  background: #EDF1F7;
  color: var(--ink-800);
}

/* Hochgeladener Nachweis: als eigener, gut sichtbarer Link mit Symbol,
   damit man ihn nicht mit reinem Text verwechselt. */
.doc-badge {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 5px 12px 5px 8px;
  border-radius: 999px;
  background: #EAF2FF;
  color: var(--signal, #1B5EAD);
  font-weight: 600;
  font-size: 0.85rem;
  text-decoration: none;
  transition: background 0.15s ease;
}

.doc-badge:hover {
  background: #DBEAFF;
}

.doc-badge svg {
  flex-shrink: 0;
}

/* --------------------------------------------
   Formulare im Panel
   -------------------------------------------- */
.form-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 16px;
}

.form-grid .field {
  margin: 0;
}

.form-full {
  grid-column: 1 / -1;
}

.form-section-title {
  grid-column: 1 / -1;
  font-family: var(--font-display);
  font-size: 0.93rem;
  font-weight: 700;
  color: var(--ink);
  padding-top: 8px;
  margin-top: 4px;
  border-top: 1px solid var(--line);
}

.form-section-title:first-child {
  border-top: 0;
  padding-top: 0;
  margin-top: 0;
}

.form-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  padding: 16px 20px;
  border-top: 1px solid var(--line);
  background: #FAFBFD;
  border-radius: 0 0 var(--radius) var(--radius);
}

/* --------------------------------------------
   Zwei Spalten (Detailansichten)
   -------------------------------------------- */
.panel-split {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(280px, 1fr);
  gap: 20px;
  align-items: start;
}

/* --------------------------------------------
   Definitionsliste
   -------------------------------------------- */
.detail-list {
  display: grid;
  gap: 0;
}

.detail-row {
  display: grid;
  grid-template-columns: minmax(120px, 34%) 1fr;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid var(--line);
  font-size: 0.89rem;
}

.detail-row:last-child {
  border-bottom: 0;
}

.detail-row dt {
  color: var(--slate);
}

.detail-row dd {
  font-weight: 500;
  color: var(--ink);
  word-break: break-word;
}

/* --------------------------------------------
   Notizen
   -------------------------------------------- */
.note-list {
  display: grid;
  gap: 12px;
}

.note {
  padding: 12px 14px;
  background: var(--mist);
  border-radius: 8px;
  font-size: 0.87rem;
  line-height: 1.6;
}

.note-meta {
  display: block;
  margin-top: 6px;
  font-size: 0.77rem;
  color: var(--slate);
}

/* --------------------------------------------
   Leerzustand
   -------------------------------------------- */
.panel-empty {
  padding: 44px 20px;
  text-align: center;
  color: var(--slate);
}

.panel-empty h3 {
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 700;
  color: var(--ink);
  margin-bottom: 6px;
}

.panel-empty p {
  font-size: 0.89rem;
  max-width: 420px;
  margin: 0 auto 16px;
}

/* --------------------------------------------
   Anmeldeseite
   -------------------------------------------- */
.login-page {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  padding: 32px 18px;
  background: var(--ink);
}

.login-card {
  width: 100%;
  max-width: 400px;
  padding: 32px;
  background: var(--white);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
}

.login-card .brand {
  justify-content: center;
  margin-bottom: 22px;
}

.login-card h1 {
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 800;
  text-align: center;
  margin-bottom: 5px;
}

.login-card .login-sub {
  font-size: 0.87rem;
  color: var(--slate);
  text-align: center;
  margin-bottom: 24px;
}

.login-foot {
  margin-top: 20px;
  padding-top: 18px;
  border-top: 1px solid var(--line);
  text-align: center;
  font-size: 0.83rem;
  color: var(--slate);
}

.login-foot a {
  color: var(--signal);
}

/* --------------------------------------------
   Kleinere Bildschirme
   -------------------------------------------- */
@media (max-width: 980px) {
  .panel-split {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 860px) {
  .panel-sidebar {
    position: fixed;
    inset: 0 auto 0 0;
    z-index: 60;
    transform: translateX(-100%);
    transition: transform 0.22s ease;
    box-shadow: var(--shadow-lg);
  }

  .panel-sidebar.open {
    transform: none;
  }

  .panel-burger {
    display: inline-flex;
  }

  .panel-content {
    padding: 18px 16px 40px;
  }

  .panel-topbar {
    padding: 12px 16px;
  }

  .panel-user-name {
    display: none;
  }
}

/* --------------------------------------------
   Kleine Verlaufsdarstellung
   -------------------------------------------- */
.trend {
  display: grid;
  gap: 10px;
}

.trend-row {
  display: grid;
  grid-template-columns: 84px 1fr 34px;
  align-items: center;
  gap: 10px;
  font-size: 0.82rem;
}

.trend-label {
  color: var(--slate);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.trend-bar {
  display: block;
  height: 8px;
  border-radius: 999px;
  background: var(--mist);
  overflow: hidden;
}

.trend-bar > span {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: var(--signal);
}

.trend-value {
  text-align: right;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

/* --------------------------------------------
   Platzhalterliste (E-Mail-Vorlagen)
   -------------------------------------------- */
.placeholder-list {
  display: grid;
  gap: 4px;
}

.placeholder {
  display: block;
  width: 100%;
  padding: 7px 10px;
  text-align: left;
  background: var(--mist);
  border: 1px solid transparent;
  border-radius: 7px;
  cursor: pointer;
  font: inherit;
  transition: border-color 0.14s ease, background 0.14s ease;
}

.placeholder:hover {
  background: var(--white);
  border-color: var(--signal);
}

.placeholder code {
  display: block;
  font-family: ui-monospace, 'Cascadia Mono', Consolas, monospace;
  font-size: 0.79rem;
  font-weight: 600;
  color: var(--signal);
}

.placeholder span {
  display: block;
  margin-top: 2px;
  font-size: 0.76rem;
  line-height: 1.4;
  color: var(--slate);
}

/* Benutzername in der Kopfzeile führt zum eigenen Zugang */
a.panel-user-name {
  color: var(--ink);
  text-decoration: none;
}

a.panel-user-name:hover {
  color: var(--signal);
}

/* --------------------------------------------
   Bildfeld mit Vorschau und Upload
   -------------------------------------------- */
.image-field > label {
  display: block;
  margin-bottom: 6px;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--slate);
}

.image-field-inner {
  display: grid;
  grid-template-columns: 96px minmax(0, 1fr);
  gap: 12px;
  align-items: start;
}

.image-field-preview {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 96px;
  height: 96px;
  overflow: hidden;
  background: var(--mist);
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--slate);
}

.image-field-preview.is-over {
  border-color: var(--signal);
  border-style: dashed;
  background: #FDF3F4;
}

.image-field-preview img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.image-field-broken {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--signal);
  color: #fff;
  font-weight: 800;
}

.image-field-controls {
  display: grid;
  gap: 8px;
}

.image-field-controls input[type="text"] {
  width: 100%;
  padding: 9px 12px;
  border: 1px solid var(--line);
  border-radius: 7px;
  font: inherit;
  font-size: 0.88rem;
  color: var(--ink);
}

.image-field-controls input[type="text"]:focus {
  outline: none;
  border-color: var(--signal);
}

.image-field-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.image-field-status {
  font-size: 0.8rem;
  color: var(--slate);
}

.image-field-status.is-ok    { color: #1B5E33; }
.image-field-status.is-error { color: var(--signal); }

/* --------------------------------------------
   Auswahlfenster der Mediathek
   -------------------------------------------- */
.mp-overlay[hidden] {
  display: none;
}

.mp-overlay {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(15, 33, 56, 0.55);
}

.mp-dialog {
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 840px;
  max-height: 84vh;
  background: var(--white);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
}

.mp-head,
.mp-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 18px;
}

.mp-head  { border-bottom: 1px solid var(--line); }
.mp-foot  { border-top: 1px solid var(--line); background: #FAFBFD; }

.mp-head h2 {
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 700;
}

.mp-body {
  flex: 1;
  overflow-y: auto;
  padding: 18px;
}

.mp-note {
  font-size: 0.86rem;
  color: var(--slate);
}

.mp-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(132px, 1fr));
  gap: 10px;
}

.mp-item {
  display: grid;
  gap: 6px;
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--white);
  cursor: pointer;
  text-align: left;
  font: inherit;
}

.mp-item:hover {
  border-color: var(--signal);
}

.mp-item img {
  width: 100%;
  height: 88px;
  object-fit: cover;
  border-radius: 6px;
  background: var(--mist);
}

.mp-item span {
  font-size: 0.75rem;
  color: var(--slate);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

@media (max-width: 560px) {
  .image-field-inner {
    grid-template-columns: 1fr;
  }
}

/* --------------------------------------------
   Hochladen im Auswahlfenster
   -------------------------------------------- */
.mp-drop {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  padding: 12px 18px;
  background: var(--mist);
  border-bottom: 1px solid var(--line);
}

.mp-drop.is-over {
  background: #FDF3F4;
  outline: 2px dashed var(--signal);
  outline-offset: -6px;
}

.mp-status {
  font-size: 0.82rem;
  color: var(--slate);
}

.mp-status.is-ok    { color: #1B5E33; font-weight: 600; }
.mp-status.is-error { color: var(--signal); font-weight: 600; }

/* Vorschaubild nicht erreichbar – Kachel bleibt, wird aber gekennzeichnet */
.mp-item.is-broken {
  opacity: 0.55;
  border-style: dashed;
}

.mp-item.is-broken img {
  min-height: 88px;
  background: repeating-linear-gradient(45deg, var(--mist), var(--mist) 8px, #E9EDF3 8px, #E9EDF3 16px);
}

.mp-item.is-broken span::before {
  content: 'nicht erreichbar · ';
  color: var(--signal);
}

/* --------------------------------------------
   Bearbeitbare Zeilenliste
   Jeder Eintrag ist ein eigenes Formular – eine Tabelle mit
   Eingabefeldern wirkt schnell wie ein nacktes Raster.
   -------------------------------------------- */
.row-list {
  display: grid;
  gap: 12px;
}

.row-item {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--white);
  padding: 14px 16px 12px;
  transition: border-color 0.16s, box-shadow 0.16s;
}

.row-item:hover,
.row-item:focus-within {
  border-color: #C9D3E0;
  box-shadow: 0 2px 10px rgba(15, 33, 56, 0.06);
}

/* Ausgeschaltete Gruppen treten zurück, bleiben aber lesbar */
.row-item.is-off {
  background: #FCFCFD;
  border-style: dashed;
}

.row-item.is-off .row-item-title {
  color: var(--slate);
}

.row-item-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}

.row-item-title {
  font-family: var(--font-display);
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--ink);
}

.count-pill {
  flex-shrink: 0;
  padding: 4px 10px;
  border-radius: 999px;
  background: var(--mist);
  color: var(--slate);
  font-size: 0.75rem;
  font-weight: 600;
  white-space: nowrap;
}

.row-item-fields {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(0, 1.2fr) 110px;
  gap: 12px;
  align-items: end;
}

.row-item-fields .field input {
  padding: 9px 12px;
  font-size: 0.875rem;
}

.row-item-fields .field label {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--slate);
}

.row-item-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 12px;
  padding-top: 11px;
  border-top: 1px solid var(--line);
}

@media (max-width: 900px) {
  .row-item-fields {
    grid-template-columns: 1fr;
  }
}

/* --------------------------------------------
   Schalter
   -------------------------------------------- */
.switch {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  cursor: pointer;
  user-select: none;
}

/* Das Kästchen bleibt für Tastatur und Vorlesehilfen bestehen,
   sichtbar ist stattdessen der Schalter daneben. */
.switch input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.switch-track {
  position: relative;
  display: block;
  width: 38px;
  height: 22px;
  flex-shrink: 0;
  border-radius: 999px;
  background: #CBD3DE;
  transition: background 0.18s ease;
}

.switch-knob {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--white);
  box-shadow: 0 1px 3px rgba(15, 33, 56, 0.28);
  transition: transform 0.18s ease;
}

.switch input:checked + .switch-track {
  background: var(--signal);
}

.switch input:checked + .switch-track .switch-knob {
  transform: translateX(16px);
}

.switch input:focus-visible + .switch-track {
  outline: 2px solid var(--ink);
  outline-offset: 2px;
}

.switch-label {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--slate);
}

.switch input:checked ~ .switch-label {
  color: var(--ink);
}

@media (prefers-reduced-motion: reduce) {
  .row-item,
  .switch-track,
  .switch-knob {
    transition: none;
  }
}

/* --------------------------------------------
   Bildfeld: Vorschau groß über den Bedienelementen
   Für Übersichten, in denen viele Bilder nebeneinander stehen –
   ein kleines Vorschauquadrat neben dem Pfad lässt sich dort kaum
   noch der richtigen Beschriftung zuordnen.
   -------------------------------------------- */
.image-field.is-stacked > label {
  font-family: var(--font-display);
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--ink);
  margin-bottom: 10px;
}

.image-field.is-stacked .image-field-inner {
  grid-template-columns: minmax(0, 1fr);
  gap: 10px;
}

.image-field.is-stacked .image-field-preview {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 10;
}

@supports not (aspect-ratio: 16 / 10) {
  .image-field.is-stacked .image-field-preview {
    height: 150px;
  }
}

.image-field.is-stacked .image-field-buttons .btn {
  flex: 1 1 auto;
  justify-content: center;
  white-space: nowrap;
}

/* --------------------------------------------
   Städte mit ihrem Bild
   -------------------------------------------- */
.city-image-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(270px, 1fr));
  gap: 16px;
}

.city-image-card {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--white);
  padding: 14px;
  transition: border-color 0.16s, box-shadow 0.16s;
}

.city-image-card:hover,
.city-image-card:focus-within {
  border-color: #C9D3E0;
  box-shadow: 0 2px 10px rgba(15, 33, 56, 0.06);
}

/* Städte, die gerade nicht auf der Standortseite stehen */
.city-image-card.is-quiet {
  background: #FCFCFD;
  border-style: dashed;
}

.city-image-card.is-quiet .image-field > label {
  color: var(--slate);
}

.city-image-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: auto;
  padding-top: 10px;
  border-top: 1px solid var(--line);
  font-size: 0.78rem;
  color: var(--slate);
}

.city-image-count,
.city-image-flag {
  padding: 3px 9px;
  border-radius: 999px;
  font-weight: 600;
  white-space: nowrap;
}

.city-image-count {
  background: var(--mist);
  color: var(--ink);
}

.city-image-flag {
  background: #FDF3F4;
  color: var(--signal);
}

@media (prefers-reduced-motion: reduce) {
  .city-image-card {
    transition: none;
  }
}

/* Datumsauswahl: eigene Datei (datepicker.css), gemeinsam mit der
   Website genutzt – eingebunden über <link> im Seitenkopf, nicht per
   @import (das wäre an dieser Stelle mitten in der Datei ungültig). */


/* --------------------------------------------
   Feldpaare
   Zwei zusammengehörige Felder auf einer Zeile, über die volle Breite.
   Dadurch stehen Datum und Uhrzeit in eigenen Zeilen und die Kanten
   fluchten mit den Abschnitten darunter.
   -------------------------------------------- */
.form-paar {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  align-items: start;
}

@media (max-width: 620px) {
  .form-paar {
    grid-template-columns: 1fr;
  }
}

/* --------------------------------------------
   Einstellungen
   Jede Einstellung steht in einem eigenen Kasten. Vorher liefen die
   Felder ineinander: bei Bildern saß die Vorschau neben der Eingabe und
   direkt daneben begann schon die nächste Einstellung.
   -------------------------------------------- */
.settings-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 16px;
  align-items: start;
}

.setting-field {
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--white);
  transition: border-color 0.16s, box-shadow 0.16s;
}

.setting-field:hover,
.setting-field:focus-within {
  border-color: #C9D3E0;
  box-shadow: 0 2px 10px rgba(15, 33, 56, 0.06);
}

.setting-field > label,
.setting-field .image-field > label {
  font-family: var(--font-display);
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--ink);
}

/* Technischer Schlüssel: zum Nachschlagen da, aber nicht im Vordergrund */
.setting-key {
  margin-top: auto;
  padding-top: 8px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.7rem;
  color: #9AA6B6;
  word-break: break-all;
}

/* Mehrzeilige Felder brauchen die ganze Breite */
.settings-grid .form-full {
  grid-column: 1 / -1;
}

@media (max-width: 560px) {
  .settings-grid {
    grid-template-columns: 1fr;
  }
}

@media (prefers-reduced-motion: reduce) {
  .setting-field {
    transition: none;
  }
}

/* Logo und Favicon sind keine Fotos: sie werden vollständig gezeigt statt
   auf das Seitenverhältnis der Vorschau beschnitten. */
/* Genauer als die allgemeine Regel der gestapelten Ansicht, sonst bliebe
   dort das Seitenverhältnis 16:10 stehen. */
.setting-field .image-field.is-stacked .image-field-preview {
  aspect-ratio: 16 / 7;
  background: var(--mist);
}

.setting-field .image-field.is-stacked .image-field-preview img {
  object-fit: contain;
  padding: 8px;
}

@supports not (aspect-ratio: 16 / 7) {
  .setting-field .image-field.is-stacked .image-field-preview {
    height: 120px;
  }
}

/* --------------------------------------------
   Menüpunkte umsortieren
   -------------------------------------------- */
.menu-griff {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  flex-shrink: 0;
  margin-right: 2px;
  border-radius: 7px;
  color: #A8B3C2;
  cursor: grab;
  touch-action: none;   /* sonst scrollt die Seite statt zu verschieben */
}

.menu-griff:hover {
  background: var(--mist);
  color: var(--ink);
}

.menu-griff:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 1px;
}

.wird-gezogen .menu-griff {
  cursor: grabbing;
}

.menu-zeile.wird-gezogen {
  border-color: var(--signal);
  box-shadow: 0 8px 24px rgba(15, 33, 56, 0.18);
  opacity: 0.95;
}

/* Während des Ziehens keine Textauswahl */
.row-list.sortiert-gerade {
  user-select: none;
}

.row-list.sortiert-gerade .row-item:not(.wird-gezogen) {
  transition: transform 0.12s ease;
}

/* Die Zieladresse als Kennzeichen in der Kopfzeile */
.menu-zeile .count-pill {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.72rem;
  max-width: 46%;
  overflow: hidden;
  text-overflow: ellipsis;
}

.menu-zeile .row-item-title {
  flex: 1;
  min-width: 0;
}

/* Hinweis, dass die neue Reihenfolge noch gespeichert werden muss */
.hint.ist-geaendert {
  color: var(--signal);
  font-weight: 600;
}

.btn.pocht {
  animation: pochen 1.4s ease-in-out 3;
}

@keyframes pochen {
  0%, 100% { box-shadow: 0 0 0 0 rgba(200, 50, 60, 0); }
  50%      { box-shadow: 0 0 0 5px rgba(200, 50, 60, 0.22); }
}

@media (prefers-reduced-motion: reduce) {
  .btn.pocht { animation: none; }
  .row-list.sortiert-gerade .row-item { transition: none; }
}

/* --------------------------------------------
   Auswahlfenster im Dateimodus
   -------------------------------------------- */
.mp-overlay.mp-dateien .mp-grid {
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
}

.mp-item.mp-datei {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 16px 10px 12px;
  text-align: center;
}

.mp-endung {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 54px;
  padding: 7px 10px;
  border-radius: 8px;
  background: var(--mist);
  font-family: var(--font-display);
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.03em;
  color: var(--ink);
}

/* Vertraute Farben je Format – erleichtert das Wiederfinden */
.mp-datei[data-endung="PDF"]  .mp-endung { background: #FDE8E9; color: #A5262F; }
.mp-datei[data-endung="DOC"]  .mp-endung,
.mp-datei[data-endung="DOCX"] .mp-endung { background: #E5EEFB; color: #1B3A6B; }
.mp-datei[data-endung="XLS"]  .mp-endung,
.mp-datei[data-endung="XLSX"] .mp-endung { background: #E4F3E9; color: #1B5E33; }
.mp-datei[data-endung="ZIP"]  .mp-endung { background: #F3EEE2; color: #7A5A16; }

.mp-item.mp-datei small {
  font-size: 0.72rem;
  color: var(--slate);
}