/*
  Neuer Auftritt des Portals (Betreiber, Admin, Anmeldung) seit 16.09.2026.

  WARUM EINE EIGENE DATEI UND NICHT snackpot.css UMSCHREIBEN: snackpot.css
  laedt auch der Gastbereich (customer/base.html), darunter die klassische
  Speisekarte. Die soll sich durch den neuen Portal-Auftritt nicht aendern.
  Diese Datei laedt nur base.html (Block portal_css), nach snackpot.css, und
  setzt die Grundwerte und die tragenden Bausteine auf die Sprache der
  Website (website.css): Burgunderrot mit warmem Gold, eine Schrift (Geist),
  weiche Karten, klare Knoepfe. Keine Seite musste dafuer umgebaut werden,
  weil die Vorlagen ihre Farben aus diesen Grundwerten holen.
*/

:root {
  --color-burgundy:       #8b1e1e;
  --color-burgundy-dark:  #5a1212;
  --color-burgundy-light: #a8322a;

  /* Gold als Schrift auf hellem Grund braucht Tiefe (Kontrast AA); das
     helle Gold bleibt fuer dunkle Flaechen und Markierungen. */
  --color-gold:           #8a6420;
  --color-gold-light:     #e3b25c;
  --color-gold-pale:      #f7eedc;

  --color-cream:          #faf8f5;
  --color-cream-dark:     #f1ede7;
  --color-cream-darker:   #e3ddd4;

  --color-ink:            #16120f;
  --color-ink-muted:      #5d554d;
  --color-ink-soft:       #6f675f;

  --color-line:           #ddd5c9;

  /* Rot fuer Loeschen und Fehler, sichtbar anders als das Burgunder der
     normalen Knoepfe (Weiss darauf 6,6:1). */
  --color-error:          #b42318;
  --color-line-soft:      #ebe5dc;

  --font-display: 'Geist', 'Geist Ersatz', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-body:    'Geist', 'Geist Ersatz', system-ui, -apple-system, 'Segoe UI', sans-serif;

  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;

  --shadow-sm: 0 1px 2px rgba(22, 18, 15, 0.04);
  --shadow-md: 0 1px 2px rgba(22, 18, 15, 0.04), 0 8px 24px -12px rgba(22, 18, 15, 0.14);
  --shadow-lg: 0 2px 4px rgba(22, 18, 15, 0.05), 0 24px 48px -20px rgba(22, 18, 15, 0.25);
}

/* ---------- Grundlagen ---------- */
html, body { background: var(--color-cream); }

/* ---------- Grosse Bildschirme ----------
   Auf einem breiten Buero-Bildschirm wirkte das Portal bei 100 % Zoom klein
   und schmal; man musste zwei-, dreimal hineinzoomen. Die Grundschrift
   waechst deshalb mit der Fensterbreite, und weil fast alle Masse in rem
   stehen, waechst die Seite mit, als haette man gezoomt. snackpot.css setzt
   body auf 16px fest; hier folgt body der Wurzel. */
body { font-size: 1rem; }
@media (min-width: 1600px) { html { font-size: 17px; } }
@media (min-width: 1900px) { html { font-size: 18px; } }
@media (min-width: 2300px) { html { font-size: 20px; } }
h1, h2, h3 { font-weight: 700; letter-spacing: -0.025em; }
h1 { font-size: clamp(1.9rem, 3.4vw, 2.6rem); line-height: 1.1; }
h2 { font-size: 1.45rem; line-height: 1.2; }
h3 { font-size: 1.12rem; line-height: 1.3; }
/* Ueberschriften, die die Anzeigeschrift inline setzen: Die war eine
   duenne Serifenschrift; in Geist brauchen sie Gewicht. */
[style*="font-display"] { font-weight: 700; letter-spacing: -0.02em; }
:focus-visible { outline: 2px solid var(--color-burgundy); outline-offset: 2px; }

/* ---------- Marke ---------- */
.brand-wordmark {
  display: inline-flex; align-items: center;
  font-family: var(--font-body); font-weight: 700; font-size: 1.2rem; letter-spacing: -0.03em;
}
.brand-wordmark::first-letter { color: inherit; }
.brand-wordmark::before {
  content: ""; display: inline-block; vertical-align: middle; flex: none;
  width: 1.6rem; height: 1.6rem; margin-right: 0.5rem; border-radius: 8px;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 8V5a1 1 0 0 1 1-1h3M16 4h3a1 1 0 0 1 1 1v3M20 16v3a1 1 0 0 1-1 1h-3M8 20H5a1 1 0 0 1-1-1v-3'/%3E%3Cpath d='M8 8h3v3H8zM13 8h3v3h-3zM8 13h3v3H8zM13 13h3v3'/%3E%3C/svg%3E") center / 62% no-repeat,
    linear-gradient(135deg, #8b1e1e 0%, #c2412d 100%);
}

/* ---------- Knoepfe ---------- */
.btn {
  border-radius: 10px; font-weight: 600; letter-spacing: 0;
  padding: 0.7rem 1.2rem; line-height: 1.2;
  transition: transform 0.15s ease, background 0.15s ease, color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}
/* Hintergrund und Schrift von .btn-primary NICHT hier setzen: snackpot.css
   holt sie aus den Grundwerten oben, und hier gesetzt schlugen sie den roten
   Loeschknopf .btn-gefahr (gleiche Spezifitaet, spaeter geladen). */
.btn-primary { box-shadow: 0 6px 16px -8px rgba(139, 30, 30, 0.7); }
.btn-primary:hover { transform: translateY(-1px); }
.btn-gefahr { box-shadow: none; }
.btn-ghost.btn-gefahr:hover { border-color: var(--color-error); color: var(--color-error); }
.btn-ghost { background: #fff; color: var(--color-ink); border: 1px solid var(--color-line); }
.btn-ghost:hover { background: #fff; border-color: var(--color-ink-soft); color: var(--color-ink); }
/* .btn setzt oben ein neues padding; .btn-sm steht in snackpot.css mit gleicher
   Spezifitaet VOR dieser Datei und verloere es sonst. */
.btn-sm { padding: 0.42rem 0.85rem; font-size: 0.82rem; border-radius: 8px; }

/* ---------- Karten und Kacheln ---------- */
/* Keine border-color hier: Die Grundfarbe kommt ueber --color-line-soft, und
   hier gesetzt schlug sie .card-gefahr, .zugangskarte und .zeit-nachtragen. */
.card { border-radius: var(--radius-lg); box-shadow: var(--shadow-md); }
.stat-card { border-radius: var(--radius-lg); box-shadow: var(--shadow-md); }
.stat-card::after { display: none; }
.stat-label { font-size: 0.8rem; letter-spacing: 0; text-transform: none; font-weight: 500; color: var(--color-ink-muted); }
.stat-value { font-weight: 700; letter-spacing: -0.03em; font-size: 2.4rem; }
/* snackpot.css stellt die Kacheln bis 768 px zweispaltig; Geist fett ist
   breiter als die alte Serifenschrift, "12.345,67 €" wuerde abgeschnitten. */
@media (max-width: 768px) { .stat-value { font-size: 1.6rem; } }
.empty-state { border-radius: var(--radius-lg); }

/* ---------- Kopf und Reiter ---------- */
/* Der Kopf klebt oben. Sprungziele (#gericht-N, #zahlung ...) und die
   klebenden Vorschau-Spalten muessen darunter anfangen. */
html { scroll-padding-top: 5.5rem; }
@media (min-width: 901px) { .dashboard-side, .form-preview { top: 5.5rem; } }
.app-header {
  position: sticky; top: 0; z-index: 40;
  padding: 0.75rem 2rem;
  background: rgba(255, 255, 255, 0.9);
  -webkit-backdrop-filter: saturate(160%) blur(12px);
  backdrop-filter: saturate(160%) blur(12px);
  border-bottom: 1px solid rgba(22, 18, 15, 0.07);
}
.app-header .brand-wordmark { color: var(--color-ink); font-size: 1.2rem; }
.app-header .brand-wordmark::first-letter { color: inherit; }
.app-header-right .user-email { font-family: var(--font-body); font-size: 0.88rem; }
.admin-tabs { padding: 0 2rem; background: #fff; }
.admin-tab { font-weight: 500; padding: 0.85rem 1rem; }
.admin-tab.is-active { font-weight: 600; }

.page-header .eyebrow {
  display: inline-block; font-family: var(--font-body); font-size: 0.78rem; font-weight: 600;
  letter-spacing: 0; text-transform: none; color: var(--color-burgundy);
  background: #fbeeee; border: 1px solid #f3d9d9; border-radius: 999px; padding: 0.22rem 0.65rem;
  margin-bottom: 0.7rem;
}
/* Breiten in rem statt px, damit sie mit der Grundschrift oben wachsen. */
.app-main { padding: 2.5rem 2rem; max-width: 90rem; }
.app-main-narrow { max-width: 46rem; }
.app-main-einstellungen { max-width: 90rem; }
@media (min-width: 1600px) { .einstellungen-raster { columns: 26rem 3; } }

/* Gespraech (Feedback) im Admin: links der Verlauf mit Antwort, rechts
   Status und Loeschen. Auf schmalen Schirmen untereinander. */
.app-main-gespraech { max-width: 76rem; }
.gespraech-raster { display: grid; gap: 1.5rem; grid-template-columns: minmax(0, 1fr); align-items: start; }
.gespraech-seite { display: grid; gap: 1.25rem; }
@media (min-width: 1100px) {
  .gespraech-raster { grid-template-columns: minmax(0, 1fr) 22rem; }
  .gespraech-seite { position: sticky; top: 5.5rem; }
}
@media (max-width: 640px) {
  .app-header { padding: 0.65rem 1rem; }
  .admin-tabs { padding: 0 1rem; }
  .app-main { padding: 1.75rem 1rem; }
  /* .card behaelt 2rem: Die Speicherleiste der Einstellungen (.einstell-leiste)
     gleicht genau diesen Innenabstand mit negativem Rand aus. */
  .quick-action { padding: 1.25rem; }
}

/* ---------- Formulare ---------- */
label {
  font-size: 0.86rem; font-weight: 600; letter-spacing: 0; text-transform: none; color: var(--color-ink);
}
input:where(:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="submit"]):not([type="button"]):not([type="reset"]):not([type="range"]):not([type="color"]):not([type="image"])),
select,
textarea { border-color: var(--color-line); border-radius: 10px; }
input:focus, select:focus, textarea:focus { border-color: var(--color-burgundy); box-shadow: 0 0 0 3px rgba(139, 30, 30, 0.12); }
/* Felder zeigen den Fokus mit Rand und Ring; der Aussenrahmen von
   :focus-visible kaeme sonst bei jedem Klick noch dazu. */
input:focus-visible, select:focus-visible, textarea:focus-visible { outline: none; }
input::placeholder, textarea::placeholder { color: var(--color-ink-soft); opacity: 1; }
/* Text neben einem Haken ist Fliesstext, keine Feldbeschriftung. */
label.form-check, label.check-row { font-weight: 400; font-size: 0.9rem; color: var(--color-ink-muted); }

/* ---------- Hinweise ---------- */
.alert { border-radius: 12px; }

/* ---------- Kleine Ueberschriften (Eyebrows) ----------
   Frueher Schreibmaschinenschrift in Versalien mit weitem Abstand. Im neuen
   Auftritt: gleiche Schrift wie der Text, halbfett, normale Schreibweise. */
.quick-action-eyebrow,
.form-preview-eyebrow,
.shop-wechsler-marke,
.einstell-marke,
.step-badge,
.poster-eyebrow,
.kiosk-button-eyebrow,
.kiosk-result-eyebrow {
  font-family: var(--font-body); font-size: 0.8rem; font-weight: 600;
  letter-spacing: 0; text-transform: none;
}
.quick-action-eyebrow { color: var(--color-burgundy); }
.form-preview-eyebrow { color: var(--color-ink-muted); }

.data-table thead th,
.plan-raster thead th {
  font-size: 0.78rem; font-weight: 600; letter-spacing: 0; text-transform: none;
  color: var(--color-ink-muted);
}
.verlauf-titel,
.gebucht-label,
.loesch-label,
.feld-gruppe-titel,
.zahl-paar-titel,
.hinweis-block-titel,
.chat-kopf,
.fremdportal-band > strong,
.person-plan-titel,
.redeem-meta dt {
  font-family: var(--font-body); letter-spacing: 0; text-transform: none; font-weight: 600;
}
.app-header-right .user-email, .login-side-meta { font-family: var(--font-body); }

/* ---------- Zahlen und Titel in der Anzeigeschrift ----------
   Die war eine duenne Serifenschrift (400). In Geist brauchen sie Gewicht. */
.quick-action-title,
.stat-value-sm,
.theme-gallery-meta h3,
.shop-card-body h3,
.erste-schritte-kopf h2,
.loesch-wert,
.zahl-gross,
.poster-title,
.kiosk-button-title,
.redeem-prize-name { font-weight: 700; letter-spacing: -0.02em; }
.quick-action-title { font-size: 1.3rem; }

/* ---------- Vorschauen der Gastkarte ----------
   Die Handys zeigen, wie die Karte beim Gast aussieht. Dort (customer/base.html,
   Kartenvorlagen) stehen Ladenname und Titel weiter in Instrument Serif. */
.phone-mock, .fa-handy { --font-display: 'Instrument Serif', 'Times New Roman', serif; }

/* ---------- Schnellzugriffe ---------- */
.quick-action {
  box-shadow: var(--shadow-sm);
  transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}
.quick-action::before { display: none; }
.quick-action:hover { border-color: rgba(139, 30, 30, 0.35); box-shadow: var(--shadow-md); transform: translateY(-2px); }

/* ---------- Tabellen und Datenkarten ---------- */
.data-card { border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); }
.data-table tbody tr:hover { background: #fcfaf7; }

/* Nur fuer Vorleseprogramme sichtbar. */
/* Alles mit !important: `input[type=file]` und Co. tragen weiter oben eine
   Breite von 100 %, und die schlug die Klasse. Ein verstecktes Dateifeld war
   dann so breit wie die Seite und schob sie auf dem Handy seitlich auf. */
/* hidden gilt immer (seit 18.09.2026). Klassen mit display: flex/grid
   (.ft-aktionen, .es-sammel, .gs-suche ...) schlugen sonst das Attribut:
   Knoepfe standen da, bevor es etwas zu tun gab. */
[hidden] { display: none !important; }

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

/* ---------- Entwicklung (Admin, seit 17.09.2026) ---------- */
.ew-raster { display: grid; gap: 1.5rem; grid-template-columns: minmax(0, 1fr); align-items: start; }
@media (min-width: 1100px) {
  .ew-raster { grid-template-columns: minmax(0, 1fr) 24rem; }
  .ew-raster > aside { position: sticky; top: 5.5rem; }
}
.ew-leiste { display: flex; flex-wrap: wrap; gap: 0.75rem; align-items: center; justify-content: space-between; margin-bottom: 0.9rem; }
.ew-ansichten { display: inline-flex; gap: 0.25rem; padding: 0.25rem; border-radius: 12px; background: var(--color-cream-dark); }
.ew-ansichten a { padding: 0.4rem 0.8rem; border-radius: 9px; font-size: 0.88rem; font-weight: 500; color: var(--color-ink-muted); text-decoration: none; }
.ew-ansichten a span { margin-left: 0.25rem; font-size: 0.78rem; color: var(--color-ink-soft); }
.ew-ansichten a.ist-aktiv { background: #fff; color: var(--color-ink); font-weight: 600; box-shadow: var(--shadow-sm); }
.ew-filter select { min-width: 12rem; }
.ew-liste { display: grid; gap: 0.6rem; }
.ew-eintrag {
  display: grid; grid-template-columns: 3rem minmax(0, 1fr) auto; gap: 0.9rem; align-items: center;
  padding: 0.9rem 1.1rem; background: #fff; border: 1px solid var(--color-line-soft); border-left: 4px solid var(--color-line);
  border-radius: 14px; color: var(--color-ink); text-decoration: none; box-shadow: var(--shadow-sm);
  transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}
.ew-eintrag:hover { text-decoration: none; box-shadow: var(--shadow-md); transform: translateY(-1px); }
.ew-eintrag.ew-prio-hoch { border-left-color: #b42318; }
.ew-eintrag.ew-prio-normal { border-left-color: #e3b25c; }
.ew-eintrag.ew-prio-niedrig { border-left-color: var(--color-line); }
.ew-nummer { font-size: 0.85rem; font-weight: 600; color: var(--color-ink-soft); font-variant-numeric: tabular-nums; }
.ew-nummer-gross { color: var(--color-ink-soft); font-weight: 600; }
.ew-kern { min-width: 0; display: grid; gap: 0.3rem; }
.ew-titel { font-size: 1rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ew-marken { display: flex; flex-wrap: wrap; gap: 0.35rem; align-items: center; }
.ew-meta { font-size: 0.8rem; color: var(--color-ink-muted); }
.ew-rechts { display: grid; justify-items: end; gap: 0.25rem; font-size: 0.8rem; color: var(--color-ink-muted); white-space: nowrap; }
.ew-status-neu { background: #fbeeee; color: #8b1e1e; }
.ew-status-geplant { background: var(--color-gold-pale); color: #7a5a24; }
.ew-status-in_arbeit { background: #e3ebf5; color: #2b4c73; }
.ew-status-erledigt { background: #e6f4ea; color: #1e6b3a; }
.ew-status-verworfen { background: var(--color-cream-dark); color: var(--color-ink-muted); }
.ew-prio-marke-hoch { background: #fdecea; color: #b42318; }
.ew-prio-marke-normal { background: var(--color-cream-dark); color: var(--color-ink-muted); }
.ew-prio-marke-niedrig { background: var(--color-cream-dark); color: var(--color-ink-soft); }
.ew-dreier { display: grid; gap: 0 0.75rem; grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (min-width: 1100px) { .ew-dreier { grid-template-columns: minmax(0, 1fr); } }
.ew-text { white-space: pre-wrap; overflow-wrap: anywhere; line-height: 1.6; }
.ew-verlauf { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.7rem; }
.ew-kommentar { padding: 0.8rem 1rem; border-radius: 12px; background: var(--color-cream); border: 1px solid var(--color-line-soft); }
.ew-kommentar.ist-eigen { background: #fbf6ec; border-color: #f0e2c4; }
.ew-kommentar-kopf { display: flex; gap: 0.6rem; align-items: baseline; font-size: 0.85rem; margin-bottom: 0.3rem; }
.ew-kommentar-kopf span, .ew-verlauf-stand span { color: var(--color-ink-soft); font-size: 0.78rem; }
.ew-verlauf-stand { font-size: 0.84rem; color: var(--color-ink-muted); padding: 0 0.2rem; }
.ew-knopfreihe { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.ew-bearbeiten summary { cursor: pointer; list-style: none; }
.ew-bearbeiten summary::-webkit-details-marker { display: none; }
.ew-bearbeiten summary::after { content: "▾"; float: right; color: var(--color-ink-soft); }
.ew-bearbeiten[open] summary::after { content: "▴"; }
@media (max-width: 640px) {
  .ew-eintrag { grid-template-columns: minmax(0, 1fr); gap: 0.4rem; }
  .ew-rechts { justify-items: start; }
  .ew-dreier { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- Zahlungen (Admin, seit 17.09.2026) ---------- */
.zl-kacheln { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); margin-bottom: 1.5rem; }
.zl-wert { font-size: 1.15rem; font-weight: 700; letter-spacing: -0.01em; margin-top: 0.35rem; }
.zl-raster { display: grid; gap: 1.5rem; grid-template-columns: minmax(0, 1fr); align-items: start; margin-bottom: 1.5rem; }
@media (min-width: 1100px) { .zl-raster { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.zl-karten { display: grid; gap: 1.5rem; }
.zl-schritte { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.9rem; }
.zl-schritt { display: grid; grid-template-columns: 2rem minmax(0, 1fr); gap: 0.75rem; align-items: start; }
.zl-marke { width: 2rem; height: 2rem; border-radius: 50%; display: grid; place-items: center; font-weight: 700; font-size: 0.85rem; background: var(--color-cream-dark); color: var(--color-ink-muted); }
.zl-schritt.ist-ok .zl-marke { background: #e6f4ea; color: #1e6b3a; }
.zl-schritt.ist-offen .zl-marke { background: #fbeeee; color: #8b1e1e; }
.zl-stand { margin-left: 0.4rem; font-size: 0.75rem; font-weight: 600; color: var(--color-ink-soft); }
.zl-schritt.ist-ok .zl-stand { color: #1e6b3a; }
.zl-schritt.ist-offen .zl-stand { color: #8b1e1e; }
.zl-befehl { display: block; margin-top: 0.35rem; padding: 0.4rem 0.6rem; border-radius: 8px; background: var(--color-cream-dark); font-size: 0.78rem; overflow-wrap: anywhere; }

/* ---------- Rechtstexte (Impressum, Datenschutz) ---------- */
.recht-seite .card h2 { font-size: 1.1rem; margin: 1.6rem 0 0.5rem; }
.recht-seite .card h2:first-child { margin-top: 0; }
.recht-seite .card p, .recht-seite .card li { line-height: 1.6; }
.recht-seite .card ul { padding-left: 1.2rem; margin: 0.4rem 0 0.8rem; }
.recht-seite .card li { margin-bottom: 0.55rem; }

/* Die Haken der Gerichtkarte standen einzeln mit style="margin: 0;" da,
   57 Mal je Gericht (seit 18.09.2026 hier). */
.karten-extras-haken .check-row { margin: 0; }

/* ---------- Pflegestand der Karte (Admin, seit 18.09.2026) ---------- */
.pflege-pill { display: inline-block; padding: 0.2rem 0.6rem; border-radius: 999px; font-size: 0.8rem; font-weight: 700; font-variant-numeric: tabular-nums; text-decoration: none; border: 1px solid transparent; white-space: nowrap; }
.pflege-pill.pflege-ok { background: #e6f4ea; color: #1e6b3a; border-color: #cfe8d7; }
.pflege-pill.pflege-teils { background: var(--color-gold-pale); color: #7a5510; border-color: #efdfbd; }
.pflege-pill.pflege-offen { background: #fbeeee; color: #8b1e1e; border-color: #f3d9d9; }
.pflege-liste { list-style: none; margin: 0.75rem 0 0; padding: 0; display: grid; gap: 0.5rem; }
.pflege-liste li { display: grid; grid-template-columns: 1.5rem 1fr auto; gap: 0.6rem; align-items: center; padding: 0.6rem 0.75rem; border: 1px solid var(--color-line-soft); border-radius: 12px; background: #fff; }
.pflege-liste .muted { font-size: 0.86rem; }
.pflege-zeichen { font-size: 1.1rem; text-align: center; }
.pflege-liste li.pflege-ok .pflege-zeichen { color: #1e6b3a; }
.pflege-liste li.pflege-teils .pflege-zeichen { color: #7a5510; }
.pflege-liste li.pflege-offen .pflege-zeichen { color: var(--color-burgundy); }
@media (min-width: 1100px) { .pflege-liste { grid-template-columns: 1fr 1fr; } }
.pflege-tabelle td { vertical-align: top; }
.pflege-zelle a { display: flex; gap: 0.35rem; align-items: flex-start; text-decoration: none; color: inherit; font-size: 0.8rem; line-height: 1.35; }
.pflege-zelle a:hover .pflege-kurz { text-decoration: underline; }
.pflege-kurz { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; min-width: 9rem; max-width: 15rem; color: var(--color-ink-soft); }
.pflege-zelle a.pflege-ok > span:first-child { color: #1e6b3a; }
.pflege-zelle a.pflege-teils > span:first-child { color: #7a5510; }
.pflege-zelle a.pflege-offen > span:first-child { color: var(--color-burgundy); }

/* ---------- Uebersetzen je Sprache (seit 18.09.2026) ---------- */
.sp-kopf { margin-bottom: 1rem; }
.sp-sprachen { display: flex; flex-wrap: wrap; gap: 0.35rem; }
.sp-sprache { padding: 0.25rem 0.65rem; border-radius: 999px; font-size: 0.82rem; border: 1px solid var(--color-line-soft); background: #fff; color: var(--color-ink); text-decoration: none; }
.sp-sprache:hover { border-color: var(--color-burgundy); }
.sp-sprache.ist-aktiv { background: var(--color-burgundy); border-color: var(--color-burgundy); color: #fff; }
.sp-gruppe { padding: 0.25rem 0; margin-bottom: 0.9rem; }
.sp-zeile { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: 0.9rem; align-items: start; padding: 0.6rem 1.25rem; border-top: 1px solid var(--color-line-soft); }
.sp-zeile:first-child { border-top: 0; }
.sp-zeile.sp-kat { background: var(--color-cream); }
.sp-zeile.sp-kat .sp-de strong { font-size: 1.02rem; }
.sp-zeile.ist-aus { opacity: 0.65; }
.sp-de { display: grid; gap: 0.15rem; font-size: 0.92rem; }
.sp-de .muted { font-size: 0.84rem; }
.sp-hilfe { font-size: 0.78rem; color: var(--color-ink-soft); }
.sp-felder { display: grid; gap: 0.35rem; }
.sp-felder input { width: 100%; }
.sp-ohne { padding: 0.6rem 1.25rem; font-size: 0.88rem; }
.sprachstand-liste li a { display: flex; justify-content: space-between; gap: 0.5rem; width: 100%; color: inherit; text-decoration: none; }
.sprachstand-liste li:has(a):hover { border-color: var(--color-burgundy); }
@media (max-width: 640px) { .sp-zeile { grid-template-columns: 1fr; gap: 0.4rem; } }

/* ---------- Suche ueber die Gerichtliste (seit 18.09.2026) ---------- */
.gs-suche { position: sticky; top: 0.5rem; z-index: 6; display: flex; gap: 0.75rem; align-items: center; margin: 1.5rem 0 0.5rem; padding: 0.5rem; border-radius: 12px; background: rgba(250, 248, 245, .92); backdrop-filter: blur(6px); }
.gs-suche input { flex: 1 1 auto; max-width: 28rem; }
.gs-suche .muted { font-size: 0.85rem; white-space: nowrap; }

/* ---------- Einsortieren (seit 18.09.2026) ---------- */
.es-kopf, .es-neu { margin-bottom: 1rem; }
.es-liste { padding: 0.5rem 0; }
.es-gruppe { padding: 0.9rem 1.25rem 0.3rem; font-weight: 700; font-size: 0.95rem; }
.es-zeile { display: grid; grid-template-columns: minmax(0, 1fr) minmax(10rem, 16rem); gap: 0.75rem; align-items: center; padding: 0.45rem 1.25rem; border-top: 1px solid var(--color-line-soft); }
.es-zeile:first-child { border-top: 0; }
.es-marke { display: flex; gap: 0.6rem; align-items: center; margin: 0; font-weight: 500; cursor: pointer; text-transform: none; letter-spacing: 0; }
.es-nr { font-variant-numeric: tabular-nums; color: var(--color-ink-soft); }
.es-wahl { width: 100%; }
.es-leiste { position: sticky; bottom: 0; z-index: 5; display: flex; gap: 0.75rem; justify-content: flex-end; align-items: center; flex-wrap: wrap; padding: 0.75rem 0; background: linear-gradient(to top, var(--color-cream) 70%, transparent); }
.es-sammel { display: inline-flex; gap: 0.5rem; align-items: center; flex-wrap: wrap; }
.es-sammel select { width: auto; max-width: 16rem; }
@media (max-width: 560px) { .es-zeile { grid-template-columns: 1fr; gap: 0.35rem; } }

/* Kachel der Uebersicht, die zur Foto-Seite fuehrt. */
a.stat-card-link { text-decoration: none; color: inherit; transition: border-color .15s ease, box-shadow .15s ease; }
a.stat-card-link:hover { border-color: var(--color-burgundy); box-shadow: 0 0 0 3px rgba(139, 30, 30, .08); }
a.stat-card-link .stat-meta { color: var(--color-burgundy); font-weight: 600; }
.stat-von { font-size: 0.55em; font-weight: 500; color: var(--color-ink-soft); }

/* ---------- Fotos der Gerichte (seit 18.09.2026) ---------- */
.ft-kopf, .ft-mehrere { margin-bottom: 1rem; }
.ft-stand { font-size: 1rem; }
.ft-balken { height: 6px; border-radius: 999px; background: var(--color-cream-dark); margin-top: 0.6rem; overflow: hidden; max-width: 28rem; }
.ft-balken span { display: block; height: 100%; background: var(--color-burgundy); border-radius: inherit; transition: width .3s ease; }
.ft-filter { margin-top: 0.9rem; }
.ft-mehrere summary { cursor: pointer; list-style: none; }
.ft-mehrere summary::-webkit-details-marker { display: none; }
.ft-mehrere summary h2 { display: inline; font-size: 1.1rem; }
.ft-mehrere summary::after { content: "▾"; float: right; color: var(--color-ink-soft); }
.ft-mehrere[open] summary::after { content: "▴"; }
.ft-liste { display: grid; gap: 0.5rem; margin: 1rem 0; }
.ft-zeile { display: grid; grid-template-columns: 4rem minmax(0, 1fr); gap: 0.75rem; align-items: center; padding: 0.5rem; border: 1px solid var(--color-line-soft); border-radius: 12px; background: #fff; }
.ft-zeile img { width: 4rem; height: 3rem; object-fit: cover; border-radius: 8px; }
.ft-zeile-text { display: grid; gap: 0.3rem; min-width: 0; }
.ft-dateiname { font-size: 0.8rem; color: var(--color-ink-soft); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ft-zeile select { width: 100%; max-width: 100%; min-width: 0; text-overflow: ellipsis; }
.ft-zeile-status { font-size: 0.8rem; color: var(--color-ink-muted); }
.ft-zeile.ohne-treffer { border-style: dashed; }
.ft-zeile.ist-doppelt { border-color: #efdfbd; background: var(--color-gold-pale); }
.ft-zeile.ist-doppelt .ft-zeile-status::before { content: "Zwei Dateien für dasselbe Gericht. "; color: #7a5510; }
.ft-zeile.ist-fertig { border-color: #cfe8d7; background: #f0f8f2; }
.ft-zeile.hat-fehler { border-color: #f3d9d9; background: #fbeeee; }
.ft-ziehen { margin-left: 0.5rem; font-size: 0.88rem; }
.ft-mehrere.ist-ziel { outline: 2px dashed var(--color-burgundy); outline-offset: -6px; background: #fdf6f5; }
.ft-kachel.ist-ziel .ft-bild { border: 2px dashed var(--color-burgundy); box-shadow: 0 0 0 4px rgba(139, 30, 30, .12); }
.ft-aktionen { display: flex; gap: 0.75rem; align-items: center; flex-wrap: wrap; }
.ft-gruppe { margin-top: 1.75rem; }
.ft-gruppe-titel { font-size: 1.05rem; margin: 0 0 0.75rem; }
.ft-raster { display: grid; gap: 0.9rem; grid-template-columns: repeat(auto-fill, minmax(9.5rem, 1fr)); }
.ft-kachel { position: relative; display: flex; flex-direction: column; gap: 0.4rem; }
.ft-kachel.ist-aus { opacity: 0.6; }
.ft-bild { position: relative; display: block; aspect-ratio: 4 / 3; border-radius: 12px; overflow: hidden; cursor: pointer; background: var(--color-cream); border: 1px dashed var(--color-cream-darker); transition: border-color .15s ease, box-shadow .15s ease; }
.ft-bild:hover, .ft-datei:focus-visible + .ft-name, .ft-hoch:focus-within .ft-bild { border-color: var(--color-burgundy); box-shadow: 0 0 0 3px rgba(139, 30, 30, .12); }
.ft-bild img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ft-kachel:has(.ft-bild img) .ft-bild { border-style: solid; border-color: var(--color-line-soft); }
.ft-leer { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: var(--color-ink-soft); font-size: 0.9rem; font-weight: 600; }
.ft-status { position: absolute; inset: auto 0 0 0; padding: 0.3rem 0.5rem; font-size: 0.75rem; line-height: 1.3; color: #fff; background: rgba(22, 18, 15, .72); }
.ft-status:empty { display: none; }
.ft-kachel.hat-fehler .ft-status { background: rgba(180, 35, 24, .92); }
.ft-kachel.laedt .ft-bild { opacity: 0.75; }
.ft-kachel.ist-neu .ft-bild { border: 2px solid #3b8a55; }
.ft-name { font-size: 0.86rem; line-height: 1.35; display: flex; gap: 0.35rem; flex-wrap: wrap; align-items: baseline; }
.ft-nr { font-variant-numeric: tabular-nums; color: var(--color-ink-soft); }
.ft-mit-skript .ft-senden { display: none; }
.ft-senden { align-self: flex-start; }
.ft-weg { position: absolute; top: 0.4rem; right: 0.4rem; }
.ft-entfernen { border: 0; border-radius: 999px; padding: 0.25rem 0.6rem; font-size: 0.72rem; font-weight: 600; background: rgba(255, 255, 255, .92); color: var(--color-ink); cursor: pointer; box-shadow: 0 1px 3px rgba(0,0,0,.15); }
.ft-entfernen:hover { background: #fff; color: var(--color-error); }

/* ---------- Sprachstand der Karte (seit 18.09.2026) ---------- */
.sprachstand summary { cursor: pointer; list-style: none; }
.sprachstand summary::-webkit-details-marker { display: none; }
.sprachstand summary::after { content: "▾"; float: right; color: var(--color-ink-soft); }
.sprachstand[open] summary::after { content: "▴"; }
.sprachstand-liste { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.4rem; grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr)); }
.sprachstand-liste li { display: flex; justify-content: space-between; gap: 0.5rem; padding: 0.45rem 0.7rem; border-radius: 10px; font-size: 0.88rem; border: 1px solid var(--color-line-soft); background: #fff; }
.sprachstand-liste li.ist-voll { background: #e6f4ea; border-color: #cfe8d7; color: #1e6b3a; }
.sprachstand-liste li.ist-teils { background: var(--color-gold-pale); border-color: #efdfbd; color: #7a5510; }
.sprachstand-liste li.ist-leer { color: var(--color-ink-soft); }

/* ---------- Anmeldung ---------- */
.login-page { background: #fff; }
.login-side {
  isolation: isolate;
  background: radial-gradient(120% 90% at 85% 0%, #7a1c1c 0%, transparent 55%),
              radial-gradient(90% 80% at 0% 100%, #4a1010 0%, transparent 60%),
              #1d0b0b;
  color: #fff;
}
/* Feines Raster wie im Kopf der Website, zur Mitte hin ausgeblendet. */
.login-side::before {
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.055) 1px, transparent 1px);
  background-size: 44px 44px;
  -webkit-mask-image: radial-gradient(ellipse 80% 70% at 50% 40%, #000 30%, transparent 75%);
  mask-image: radial-gradient(ellipse 80% 70% at 50% 40%, #000 30%, transparent 75%);
}
.login-side::after {
  content: ""; position: absolute; z-index: 0; pointer-events: none;
  width: 60vmax; height: 60vmax; left: -20vmax; top: -30vmax;
  background: radial-gradient(circle, rgba(227, 178, 92, 0.22) 0%, rgba(227, 178, 92, 0) 60%);
  animation: login-schein 16s ease-in-out infinite alternate;
}
@keyframes login-schein { from { transform: translate(0, 0); } to { transform: translate(30vmax, 25vmax); } }
@media (prefers-reduced-motion: reduce) { .login-side::after { animation: none; } }
.login-side .brand-wordmark { color: #fff !important; }
.login-side-headline {
  font-family: var(--font-body); font-weight: 700; letter-spacing: -0.035em;
  font-size: clamp(2.4rem, 4vw, 3.6rem); line-height: 1.04;
}
.login-side-headline em {
  font-style: normal;
  background: linear-gradient(92deg, #ffd9a8 0%, #e3b25c 45%, #ff9f7a 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.login-side-liste { list-style: none; margin: 1.6rem 0 0; padding: 0; display: grid; gap: 0.6rem; color: rgba(255, 255, 255, 0.8); }
.login-side-liste li { display: flex; gap: 0.55rem; align-items: center; }
.login-side-liste li::before {
  content: ""; flex: none; width: 1.15rem; height: 1.15rem; border-radius: 50%;
  background: rgba(74, 222, 128, 0.16) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234ade80' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5L20 7'/%3E%3C/svg%3E") center / 0.7rem no-repeat;
}
.login-side-meta { font-family: var(--font-body); font-size: 0.85rem; color: rgba(255, 255, 255, 0.62); opacity: 1; letter-spacing: 0; }
.login-form-wrap { background: var(--color-cream); }
.login-form {
  background: #fff; border: 1px solid var(--color-line-soft); border-radius: 20px;
  box-shadow: var(--shadow-lg); padding: 2.2rem 2rem; max-width: 420px;
}
.login-form h1 { font-size: 2rem; margin-bottom: 0.35rem; }
.login-form .btn-primary { width: 100%; padding: 0.85rem 1.2rem; }
/* Handy: kurzer dunkler Kopf, das Formular gleich darunter und leicht
   hineingeschoben. Ohne feste Zeilen verteilt das Raster die 100vh auf beide
   Haelften, und das Formular rutscht unter den Rand. */
@media (max-width: 768px) {
  .login-page { grid-template-rows: auto 1fr; background: var(--color-cream); }
  .login-side { min-height: 0; padding: 1.25rem 1.25rem 2.75rem; }
  .login-side-headline { font-size: 1.9rem; margin: 1.1rem 0 0; }
  .login-side-liste, .login-side-meta { display: none; }
  .login-form-wrap { align-items: flex-start; padding: 0 1rem 2rem; margin-top: -1.5rem; position: relative; z-index: 1; background: transparent; }
  .login-form { padding: 1.5rem 1.25rem; border-radius: 16px; }
  .login-form h1 { font-size: 1.6rem; }
}

/* ---------- Registrierung (gleicher Aufbau wie die Anmeldung) ---------- */
.login-form.registrieren-form { max-width: 460px; }
.registrieren-form form { margin-top: 0.4rem; }
.registrieren-form .form-group { margin-bottom: 1rem; }
.registrieren-form .btn-primary { width: 100%; margin-top: 0.4rem; }
.registrieren-danach {
  margin-top: 1.5rem; padding: 1rem 1.1rem; border-radius: 12px;
  background: var(--color-cream); border: 1px solid var(--color-line-soft);
}
.registrieren-danach h2 { font-size: 0.98rem; margin: 0 0 0.35rem; letter-spacing: -0.01em; }
.registrieren-danach .form-hint { margin: 0 0 0.5rem; }
.registrieren-danach .form-hint:last-child { margin-bottom: 0; }
.registrieren-konto { text-align: center; margin: 1.1rem 0 0; font-size: 0.92rem; color: var(--color-ink-muted); }
.login-page:has(.registrieren-form) .login-form-wrap { align-items: flex-start; padding-top: 4rem; padding-bottom: 4rem; }
.login-page:has(.registrieren-form) .login-side { position: sticky; top: 0; height: 100vh; }
@media (max-width: 768px) {
  .login-page:has(.registrieren-form) .login-side { position: relative; height: auto; }
  .login-page:has(.registrieren-form) .login-form-wrap { padding: 0 1rem 2rem; }
}

/* ---------- Passwort vergessen, neues Passwort ---------- */
.auth-schlicht { margin: 0 auto; padding-top: 4rem; max-width: 480px; }
.auth-schlicht .page-header .brand-wordmark { margin-bottom: 1.6rem; }
.auth-schlicht .card { padding: 1.75rem; }
@media (max-width: 640px) { .auth-schlicht { padding-top: 2rem; } }