/* HH-SCHRIFTEN-ANFANG */
/* ==========================================================================
   Schriften – ausgeliefert vom eigenen Server
   --------------------------------------------------------------------------
   Die Dateien liegen unter /schriften/ und werden NICHT von Google Fonts
   geladen. Eine Einbindung ueber fonts.googleapis.com wuerde bei jedem
   Seitenaufruf die IP-Adresse des Besuchers an einen Dritten uebertragen
   (LG Muenchen I, 20.01.2022, Az. 3 O 17493/20). In einer Anwendung mit
   Mandantendaten kommt das nicht in Betracht.

   Das ganze Produkt spricht nur ueber zwei Namen: HH Sans und HH Mono.
   Welche Schrift dahintersteckt, steht ausschliesslich in diesem Block.
   Ein Wechsel ist deshalb eine Aenderung an genau einer Stelle.

   Aktuell: IBM Plex Sans + IBM Plex Mono
   ========================================================================== */
@font-face{font-family:"HH Sans";font-style:normal;font-weight:100 700;font-display:swap;src:url(/schriften/plex-sans-latin.woff2) format("woff2")}
@font-face{font-family:"HH Mono";font-style:normal;font-weight:400;font-display:swap;src:url(/schriften/plex-mono-400-latin.woff2) format("woff2")}
@font-face{font-family:"HH Mono";font-style:normal;font-weight:600;font-display:swap;src:url(/schriften/plex-mono-600-latin.woff2) format("woff2")}
/* HH-SCHRIFTEN-ENDE */
/* ==========================================================================
   Reiseheld24 – Kundenportal und interner Bereich
   --------------------------------------------------------------------------
   Ein Stylesheet fuer beide angemeldeten Bereiche. Die Marketing-Seite
   (public/styles.css) ist die Farb- und Schriftquelle; hier wird keine
   eigene Farbe erfunden, damit Website, Portal und Arbeitsplatz wie EIN
   Produkt wirken.

   Register: Fachanwendung fuer Reiserecht. Warmes Papier statt kaltem
   Weiss, ein Ockerakzent statt des Vorlagenblaus, Haarlinien statt
   Schlagschatten. Die Semantikfarben (gut / Achtung / Fehler) sind
   bewusst NICHT der Akzent, damit sich Hervorhebung und Bewertung
   unterscheiden lassen.
   ========================================================================== */

:root {
  /* --------------------------------------------------------------------------
     Designtokens – Herkunft public/styles.css
       --navy   #14294a  Institution, Ueberschriften, dunkle Flaechen
       --navy-2 #234b71  Betonung
       --blue   #2e8049  Akzent (Ocker), Handlungsaufrufe, aktive Zustaende
       --ink    #14202e  Fliesstext
       --muted  #5b6976  Nebentext
       --line   #e2e8ec  Trennlinien
       --bg     #f7f9fa  Seitenhintergrund (Papier)
     -------------------------------------------------------------------------- */

  /* --- Grundfarben aus dem Frontend --------------------------------------- */
  --navy: #14294a;
  --navy-2: #234b71;
  --blue: #2e8049;
  --ink: #14202e;
  --muted: #5b6976;
  --muted-2: #5b6976;
  --line: #e6ebee;
  --line-soft: #eef2f5;
  --bg: #fbfaf7;
  --white: #fff;

  /* --- Semantische Tokens -------------------------------------------------- */
  --primary: var(--navy);
  --primary-strong: var(--navy-2);
  --secondary: var(--navy-2);
  --accent: var(--blue);
  --accent-strong: #236b3d;
  --accent-soft: #eef7f1;
  --surface: var(--white);
  --surface-alt: #f2efe9;
  --background: var(--bg);
  --text: var(--ink);
  --text-muted: var(--muted);
  --text-faint: var(--muted-2);
  --border: var(--line);
  --border-strong: #dde4e9;

  --success: #2c6a4c;
  --success-soft: #e8f1ec;
  --success-text: #245a41;

  /* Achtung und Fehler sind getrennt: „muss geprueft werden" ist etwas
     anderes als „ist fehlgeschlagen". Achtung traegt den Ockerbraunton,
     Fehler das gedeckte Rot. */
  --warning: #b7791f;
  --warning-soft: #fdf3e0;
  --warning-border: #ecd9b0;
  --warning-text: #8a5a12;

  --error: #c0392b;
  --error-soft: #fbeceb;
  --error-border: #ecc8c4;
  --error-text: #c0392b;

  /* --- Rückwärtskompatible Namen ------------------------------------------
     Werden in bestehenden Regeln noch verwendet und zeigen jetzt auf die
     Frontend-Farben. So musste keine bestehende Regel angefasst werden. */
  --green: var(--success);
  --green-soft: var(--success-soft);
  --blue-soft: var(--accent-soft);
  --amber: var(--warning-text);
  --amber-soft: var(--warning-soft);
  --red: var(--error);
  --red-soft: var(--error-soft);

  /* --- Form und Tiefe ------------------------------------------------------ */
  --radius: 8px;
  --radius-lg: 14px;
  /* Karten trennen ueber eine Linie, nicht ueber Tiefe. Der Schatten
     bleibt als Kante fuer schwebende Elemente erhalten. */
  --shadow-card: none;
  --shadow-pop: 0 2px 8px rgba(26,29,34,.12);

  /* Schriftfamilien. Welche Dateien hinter "HH Sans" und "HH Mono"
     stecken, steht oben im Schriftenblock. Ausgeliefert wird vom
     eigenen Server, nicht von einem fremden Dienst. */
  --schrift-oberflaeche:"HH Sans",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  --schrift-auszeichnung:var(--schrift-oberflaeche);
  --schrift-daten:"HH Mono",ui-monospace,SFMono-Regular,Consolas,"Liberation Mono",monospace;

  --sidebar-width: 268px;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: var(--schrift-oberflaeche);
  font-optical-sizing: auto;
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  font-size: 16px;
  line-height: 1.6;
}

/* Ueberschriften. Es gibt keine zweite Schriftfamilie mehr – die
   Hierarchie tragen Groesse, Gewicht und Laufweite. */
h1, h2, h3, h4 {/* HH-UEBERSCHRIFT */font-family:var(--schrift-auszeichnung);font-weight:600;letter-spacing:-.011em;text-wrap:balance}

/* Zahlen, Aktenzeichen, Betraege und Datumsangaben stehen in einer
   Schrift mit fester Zeichenbreite. In einer Fallliste stehen sie damit
   untereinander buendig und lassen sich zeilenweise vergleichen. */
.mono, .amount, .case-ref, .kennzahl-wert, td.num, .num {
  font-family: var(--schrift-daten);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0;
}

button, input, textarea, select { font: inherit; color: inherit; }
/* Ankreuzfelder, Auswahlknoepfe und Fortschrittsbalken zeichnet der
   Browser sonst in seinem eigenen Blau – das einzige Blau, das im
   Produkt noch uebrig waere. */
input[type="checkbox"], input[type="radio"], progress, input[type="range"] {
  accent-color: var(--navy);
}
button { cursor: pointer; }
a { color: inherit; }

/* Sichtbarer Fokusrahmen: wichtig fuer die Bedienung nur mit Tastatur. */
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 3px;
}

/* Sprungmarke fuer Screenreader und Tastatur. */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 8px;
  z-index: 100;
  background: var(--navy);
  color: #fff;
  padding: 10px 16px;
  border-radius: 3px;
  font-weight: 700;
  text-decoration: none;
}
.skip-link:focus { left: 8px; }

.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;
}

/* ==========================================================================
   Grundgeruest: Seitenleiste + Inhalt
   ========================================================================== */

.shell {
  display: grid;
  grid-template-columns: var(--sidebar-width) 1fr;
  min-height: 100vh;
}

.sidebar {
  background: var(--white);
  border-right: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  padding: 26px 18px 22px;
  position: sticky;
  top: 0;
  height: 100vh;
  overflow-y: auto;
}

.sidebar-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 8px 26px;
  text-decoration: none;
  color: var(--navy);
  font-size: 21px;
  font-weight: 700;
  letter-spacing: -.03em;
}
.sidebar-brand .brand-hero { color: var(--accent); }
.sidebar-brand svg { width: 34px; height: 36px; flex: none; }

.nav-group { display: flex; flex-direction: column; gap: 2px; }

.nav-item {
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 11px 14px;
  border-radius: 4px;
  text-decoration: none;
  color: #5c5446;
  font-weight: 600;
  font-size: 16px;
  transition: background .16s, color .16s;
  /* "Abmelden" ist eine Schaltflaeche, die uebrigen Punkte sind Verweise.
     Diese Angaben nehmen der Schaltflaeche ihr Standardaussehen, damit
     beide gleich aussehen. */
  border: 0;
  background: none;
  width: 100%;
  text-align: left;
  font-family: inherit;
}
.nav-item:hover { background: var(--line-soft); color: var(--navy); }
.nav-item.active { background: var(--accent-soft); color: var(--accent-strong); font-weight: 600; }
.nav-item svg { width: 20px; height: 20px; flex: none; stroke-width: 1.9; }

.nav-badge {
  margin-left: auto;
  min-width: 22px;
  height: 22px;
  padding: 0 7px;
  border-radius: 3px;
  background: var(--accent);
  color: #fff;
  font-size: 15px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.nav-badge[hidden] { display: none; }

.sidebar-footer { margin-top: auto; padding-top: 24px; }

.reassure-card {
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: 18px 16px;
}
.reassure-card .icon {
  width: 34px; height: 34px;
  border-radius: 4px;
  background: var(--accent-soft);
  color: var(--accent-strong);
  display: grid;
  place-items: center;
  margin-bottom: 11px;
}
.reassure-card strong {
  display: block;
  font-size: 16px;
  line-height: 1.4;
  margin-bottom: 9px;
  color: var(--navy);
}
.reassure-card span { font-size: 15px; color: var(--muted); }

/* --- Inhaltsbereich ------------------------------------------------------ */

.main { display: flex; flex-direction: column; min-width: 0; }

.topbar {
  background: var(--white);
  border-bottom: 1px solid var(--line);
  padding: 18px 34px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  position: sticky;
  top: 0;
  z-index: 20;
}

.topbar-greeting h1 {
  font-size: 22px;
  letter-spacing: -.03em;
  margin: 0 0 2px;
  font-weight: 700;
}
.topbar-greeting p { margin: 0; font-size: 16px; color: var(--muted); }

.topbar-actions { display: flex; align-items: center; gap: 16px; }

.icon-button {
  position: relative;
  width: 40px; height: 40px;
  border: 1px solid var(--line);
  background: var(--white);
  border-radius: 4px;
  display: grid;
  place-items: center;
  color: #665e4f;
  transition: border-color .16s, color .16s;
}
.icon-button:hover { border-color: #dedad4; color: var(--navy); }
.icon-button .dot {
  position: absolute;
  top: -5px; right: -5px;
  min-width: 19px; height: 19px;
  padding: 0 5px;
  border-radius: 3px;
  background: var(--accent);
  color: #fff;
  font-size: 15px;
  font-weight: 700;
  display: grid;
  place-items: center;
  border: 2px solid var(--white);
}
.icon-button .dot[hidden] { display: none; }

.user-chip {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 6px 8px 6px 14px;
  border: 1px solid var(--line);
  border-radius: 3px;
  background: var(--white);
  font-size: 16px;
  font-weight: 600;
  color: #494338;
  text-decoration: none;
}
.user-chip:hover { border-color: #dedad4; }
.user-chip .avatar {
  width: 32px; height: 32px;
  border-radius: 50%;
  background: var(--navy);
  color: #fff;
  display: grid;
  place-items: center;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: .02em;
}

.content { padding: 30px 34px 60px; max-width: 1240px; width: 100%; }

/* Menue-Schalter, nur auf schmalen Bildschirmen sichtbar. */
.menu-toggle { display: none; }

/* ==========================================================================
   Karten und Bausteine
   ========================================================================== */

.card {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: none;
}
.card + .card { margin-top: 16px; }
.card-body { padding: 18px 20px; }
.card-head {
  padding: 13px 20px;
  border-bottom: 1px solid var(--line-soft);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.card-head h2 {
  font-size: 17px;
  letter-spacing: -.02em;
  margin: 0;
  font-weight: 600;
}

.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.grid-2 > .card + .card { margin-top: 0; }

.section-title {
  font-size: 15px;
  font-weight: 600;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 12px;
}

/* --- Statusabzeichen ----------------------------------------------------- */

/* Der Status wird von einem farbigen Strich links getragen, nicht von
   einer eingefaerbten Flaeche. In einer langen Liste stehen sonst zwanzig
   bunte Kaestchen nebeneinander und keines faellt mehr auf. Der Strich
   ist schmal genug, um die Zeile ruhig zu lassen, und deutlich genug,
   um den Status auf einen Blick zu erkennen.

   Farbe ist nie das einzige Merkmal – der Text nennt den Status
   ausgeschrieben, damit auch ohne Farbwahrnehmung alles lesbar bleibt. */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 2px 0 2px 9px;
  border-left: 3px solid var(--line);
  border-radius: 0;
  font-size: 15px;
  font-weight: 600;
  color: var(--tinte-2, #3f454e);
  white-space: nowrap;
}
.badge.neutral { border-left-color: #b4ab99; }
.badge.active  { border-left-color: var(--accent); }
.badge.action  { border-left-color: var(--warning); }
.badge.success { border-left-color: var(--green); }
.badge.ended   { border-left-color: #cfc7b7; color: var(--muted); }

/* --- Schaltflaechen ------------------------------------------------------ */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  border: 0;
  border-radius: 3px;
  padding: 10px 18px;
  /* Die Hauptschaltflaeche traegt die Institutionsfarbe, nicht den
     Akzent. Der Ocker bleibt fuer Hervorhebungen im Text reserviert;
     eine flaechige Akzentfarbe auf jedem Knopf wirkt wie eine Vorlage. */
  background: var(--navy);
  color: #fff;
  font-weight: 600;
  font-size: 16px;
  text-decoration: none;
  transition: background .12s;
  box-shadow: none;
}
.btn:hover { background: var(--navy-2); }
.btn:disabled { opacity: .5; cursor: not-allowed; }

/* Bleibt als Name erhalten, weil bestehendes Markup ihn verwendet. */
.btn-navy { background: var(--navy); }
.btn-navy:hover { background: var(--navy-2); }

.btn-ghost {
  background: var(--white);
  color: #524b3f;
  border: 1px solid var(--line);
  box-shadow: none;
}
.btn-ghost:hover { background: var(--line-soft); border-color: #dedad4; }

.btn-sm { padding: 9px 15px; font-size: 16px; border-radius: 3px; }

.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--blue);
  font-weight: 700;
  font-size: 16px;
  text-decoration: none;
}
.link-arrow:hover { text-decoration: underline; }

/* ==========================================================================
   Fallkarte (Kopfbereich, wie im Entwurf)
   ========================================================================== */

.case-hero { display: grid; grid-template-columns: 280px 1fr; gap: 24px; padding: 18px 20px; }
/* Ohne Hotelbild faellt die Bildspalte weg, statt leer stehen zu bleiben. */
.case-hero.ohne-bild { grid-template-columns: 1fr; }

.case-photo {
  position: relative;
  border-radius: 4px;
  overflow: hidden;
  background: var(--surface-alt);
  min-height: 196px;
}
.case-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.case-photo .booking-tag {
  position: absolute;
  top: 12px; left: 12px;
  background: rgba(22,50,79, .82);
  color: #fff;
  border-radius: 3px;
  padding: 6px 11px;
  font-size: 15px;
  font-weight: 700;
  
}

.case-main { display: flex; flex-direction: column; min-width: 0; }

.case-title-row {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  margin-bottom: 18px;
}
.case-title-row h2 {
  font-size: 25px;
  letter-spacing:-.02em;
  margin: 0;
  font-weight: 700;
}

.facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 18px 24px;
  margin-bottom: 20px;
}
.fact { display: flex; gap: 11px; align-items: flex-start; min-width: 0; }
.fact .fact-icon { color: var(--muted-2); flex: none; margin-top: 2px; }
.fact .fact-icon svg { width: 19px; height: 19px; stroke-width: 1.8; }
.fact-label { font-size: 15px; color: var(--muted); display: block; }
.fact-value {
  font-size: 16px;
  font-weight: 700;
  color: var(--navy);
  display: block;
  overflow-wrap: anywhere;
}

.case-summary-row { display: grid; grid-template-columns: auto 1fr; gap: 16px; margin-top: auto; }

.claim-box {
  background: var(--accent-soft);
  border-radius: 4px;
  padding: 14px 18px;
  min-width: 200px;
}
.claim-box .label {
  font-size: 15px;
  color: #497663;
  display: block;
  margin-bottom: 3px;
}
.claim-box .amount {
  font-size: 23px;
  font-weight: 700;
  color: var(--accent-strong);
  letter-spacing: -.03em;
  display: flex;
  align-items: center;
  gap: 8px;
}

.status-note {
  background: var(--bg);
  border-radius: 4px;
  padding: 15px 18px;
  display: flex;
  align-items: center;
  gap: 18px;
  font-size: 16px;
  color: #665e4f;
  line-height: 1.55;
}
.status-note p { margin: 0; flex: 1; }

/* Kleiner Hinweis-Knopf mit Erklaerung beim Ueberfahren. */
.info-dot {
  width: 18px; height: 18px;
  border-radius: 50%;
  border: 1.5px solid currentColor;
  color: #457662;
  background: none;
  font-size: 15px;
  font-weight: 700;
  display: inline-grid;
  place-items: center;
  padding: 0;
  line-height: 1;
}

/* ==========================================================================
   Fortschrittsanzeige
   ========================================================================== */

.progress-track {
  display: grid;
  gap: 8px;
  padding: 8px 4px 4px;
  position: relative;
}

.progress-step { text-align: center; position: relative; padding-top: 4px; }

.progress-step .marker {
  width: 34px; height: 34px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  margin: 0 auto 11px;
  font-size: 16px;
  font-weight: 700;
  background: var(--white);
  border: 2px solid var(--line);
  color: var(--muted-2);
  position: relative;
  z-index: 2;
  transition: background .2s, border-color .2s, color .2s;
}
.progress-step .marker svg { width: 17px; height: 17px; stroke-width: 2.6; }

.progress-step.done .marker { background: var(--green); border-color: var(--green); color: #fff; }
.progress-step.current .marker { background: var(--blue); border-color: var(--blue); color: #fff; }

/* Verbindungslinie zwischen den Stationen. */
.progress-step::before {
  content: "";
  position: absolute;
  top: 21px;
  left: -50%;
  width: 100%;
  height: 3px;
  background: var(--line);
  z-index: 1;
  border-radius: 2px;
}
.progress-step:first-child::before { display: none; }
.progress-step.done::before,
.progress-step.current::before { background: var(--green); }
.progress-step.current::before {
  background: var(--green);
}

.progress-step .step-label {
  display: block;
  font-size: 15px;
  font-weight: 700;
  color: #665e4f;
  line-height: 1.35;
  padding: 0 4px;
}
.progress-step.current .step-label { color: var(--blue); }
.progress-step .step-date {
  display: block;
  font-size: 15px;
  color: var(--muted-2);
  margin-top: 3px;
}

/* ==========================================================================
   Einfache/erweiterte Ansicht der Fallbearbeitung (Adminbereich)

   Standardmäßig ausgeblendet: Statushistorie, protokollierte
   Schreiben-Fassungen, KI-Anmerkungen. Sichtbar erst, wenn <body> die Klasse
   `wb-erweitert` trägt (Umschalter oben im Fall, admin/index.js).
   ========================================================================== */
body:not(.wb-erweitert) .wb-advanced-only { display: none !important; }
/* Die Spalte „Vorschlag der Maschine" ist advanced-only – ohne sie soll die
   Spalte „Entscheidung" die volle Breite nutzen, nicht nur die halbe. */
body:not(.wb-erweitert) .wb-two-col-ai { grid-template-columns: 1fr !important; }

/* ==========================================================================
   Verlauf, Listen, Dokumente
   ========================================================================== */

.timeline { list-style: none; margin: 0; padding: 0; }
.timeline li {
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 13px 0;
  border-bottom: 1px solid var(--line-soft);
  font-size: 16px;
}
.timeline li:last-child { border-bottom: 0; }
.timeline .tl-icon {
  width: 30px; height: 30px;
  border-radius: 3px;
  background: var(--blue-soft);
  color: var(--blue);
  display: grid;
  place-items: center;
  flex: none;
}
.timeline .tl-icon svg { width: 16px; height: 16px; stroke-width: 1.9; }
.timeline .tl-label { flex: 1; font-weight: 600; color: #4d463b; min-width: 0; }
.timeline .tl-time { font-size: 15px; color: var(--muted-2); white-space: nowrap; }
.timeline li.is-current .tl-label { color: var(--blue); font-weight: 600; }

/* Hinweisstreifen. Auf warmem Papier reicht eine getoente Flaeche
   allein nicht mehr aus, um den Rang zu zeigen – ein Strich links
   uebernimmt das. Der Text bleibt in Lesefarbe, damit der Hinweis
   lesbar ist und nicht selbst zur Farbflaeche wird. */
.notice {
  border-radius: 0;
  border-left: 3px solid var(--line);
  padding: 13px 16px;
  display: flex;
  gap: 12px;
  font-size: 16px;
  line-height: 1.6;
  color: var(--tinte-2, #3f454e);
  background: var(--surface-alt);
}
.notice .notice-icon { flex: none; margin-top: 1px; }
.notice .notice-icon svg { width: 18px; height: 18px; stroke-width: 2; display: block; }
.notice strong { display: block; margin-bottom: 2px; color: var(--ink); }
.notice.ok      { border-left-color: var(--green);   background: var(--green-soft); }
.notice.ok .notice-icon { color: var(--green); }
.notice.action  { border-left-color: var(--warning); background: var(--warning-soft); }
.notice.action .notice-icon { color: var(--warning); }
.notice.info    { border-left-color: var(--accent);  background: var(--accent-soft); }
.notice.info .notice-icon { color: var(--accent); }
.notice.error   { border-left-color: var(--error);   background: var(--error-soft); }
.notice.error .notice-icon { color: var(--error); }

.contact-box {
  background: var(--bg);
  border-radius: 4px;
  padding: 16px 18px;
  margin-top: 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}
.contact-box strong { display: block; font-size: 16px; color: var(--navy); }
.contact-box span { font-size: 16px; color: var(--muted); }

.doc-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 13px;
}
.doc-tile {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 4px;
  text-decoration: none;
  color: inherit;
  background: var(--white);
  transition: border-color .16s, box-shadow .16s;
  min-width: 0;
}
.doc-tile:hover { border-color: #ddd9d2; background: var(--surface-alt); }
.doc-tile .doc-icon {
  width: 36px; height: 36px;
  border-radius: 4px;
  background: var(--line-soft);
  color: #756b5a;
  display: grid;
  place-items: center;
  flex: none;
}
.doc-tile .doc-icon svg { width: 18px; height: 18px; stroke-width: 1.8; }
.doc-tile .doc-meta { min-width: 0; }
.doc-tile .doc-name {
  display: block;
  font-size: 16px;
  font-weight: 700;
  color: var(--navy);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.doc-tile .doc-sub { display: block; font-size: 15px; color: var(--muted-2); margin-top: 1px; }

/* --- Fallliste ----------------------------------------------------------- */

.case-list { display: grid; gap: 14px; }

.case-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 18px;
  align-items: center;
  padding: 20px 22px;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  text-decoration: none;
  color: inherit;
  transition: border-color .12s, background .12s;
}
/* Kein Anheben beim Ueberfahren: eine Zeile, die sich bewegt, ist eine
   Spielerei. Der Wechsel der Flaeche zeigt dasselbe ruhiger an. */
.case-row:hover {
  border-color: #ddd9d2;
  background: var(--surface-alt);
}
.case-row .case-ref {
  font-size: 15px;
  color: var(--muted-2);
  font-weight: 700;
  letter-spacing: .04em;
}
.case-row h3 {
  font-size: 17px;
  letter-spacing: -.02em;
  margin: 4px 0 8px;
  font-weight: 600;
}
.case-row .case-meta {
  display: flex;
  gap: 18px;
  flex-wrap: wrap;
  font-size: 16px;
  color: var(--muted);
}
.case-row .case-side { text-align: right; display: grid; gap: 9px; justify-items: end; }

/* --- Nachrichten --------------------------------------------------------- */

.thread { display: flex; flex-direction: column; gap: 15px; }

.bubble {
  max-width: 74%;
  padding: 14px 17px;
  border-radius: 4px;
  font-size: 16px;
  line-height: 1.6;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.bubble .bubble-meta {
  display: block;
  font-size: 15px;
  margin-top: 8px;
  opacity: .72;
}
.bubble.from-team {
  align-self: flex-start;
  background: var(--white);
  border: 1px solid var(--line);
  border-bottom-left-radius: 5px;
}
.bubble.from-me {
  align-self: flex-end;
  background: var(--accent);
  color: #fff;
  border-bottom-right-radius: 5px;
}
.bubble.system {
  align-self: stretch;
  max-width: 100%;
  background: var(--blue-soft);
  color: #96611c;
  border-radius: 4px;
}
.bubble .bubble-subject { font-weight: 700; display: block; margin-bottom: 5px; }

/* --- Formulare ----------------------------------------------------------- */

.field { margin-bottom: 18px; }
.field label {
  display: block;
  font-size: 16px;
  font-weight: 600;
  color: var(--navy-2);
  margin-bottom: 7px;
}
.field .hint { font-size: 15px; color: var(--muted); margin: 6px 0 0; }

.input, .textarea, .select {
  width: 100%;
  border: 1px solid #d8d1c4;
  border-radius: 4px;
  padding: 12px 14px;
  font-size: 16px;
  background: var(--white);
  transition: border-color .16s, box-shadow .16s;
}
.input:focus, .textarea:focus, .select:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(162,102,31, .13);
}
.textarea { min-height: 120px; resize: vertical; }

.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }

.upload-zone {
  border: 2px dashed #cfc7b7;
  border-radius: 4px;
  padding: 30px 22px;
  text-align: center;
  color: var(--muted);
  background: var(--white);
  transition: border-color .16s, background .16s;
  cursor: pointer;
  display: block;
}
.upload-zone:hover, .upload-zone.dragover { border-color: var(--accent); background: var(--accent-soft); }
.upload-zone strong { display: block; color: var(--navy); margin-bottom: 5px; font-size: 15px; }
.upload-zone span { font-size: 16px; }
.upload-zone .zone-icon { color: var(--accent); margin-bottom: 10px; }
.upload-zone .zone-icon svg { width: 30px; height: 30px; stroke-width: 1.7; }

.upload-list { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 8px; }
.upload-list li {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 16px;
  padding: 9px 13px;
  border-radius: 4px;
  background: var(--bg);
}
.upload-list li.ok { background: var(--green-soft); color: #256148; }
.upload-list li.error { background: var(--red-soft); color: #933a2e; }
.upload-list .file-name {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* --- Anmeldeseiten ------------------------------------------------------- */

.auth-page {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 40px 20px;
  background: var(--bg);
}
.auth-card {
  width: 100%;
  max-width: 430px;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: none;
  padding: 32px 30px 28px;
}
.auth-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  justify-content: center;
  margin-bottom: 24px;
  font-size: 21px;
  font-weight: 700;
  letter-spacing: -.03em;
  color: var(--navy);
  text-decoration: none;
}
.auth-brand .brand-hero { color: var(--accent); }
.auth-brand svg { width: 32px; height: 35px; }
.auth-card h1 {
  font-size: 25px;
  letter-spacing:-.02em;
  margin: 0 0 7px;
  text-align: center;
  font-weight: 700;
}
.auth-card .lead {
  text-align: center;
  color: var(--muted);
  font-size: 16px;
  margin: 0 0 26px;
  line-height: 1.6;
}
.auth-card .btn { width: 100%; }
.auth-foot {
  margin-top: 20px;
  padding-top: 18px;
  border-top: 1px solid var(--line-soft);
  text-align: center;
  font-size: 16px;
  color: var(--muted);
}
.auth-foot a { color: var(--accent-strong); font-weight: 700; text-decoration: none; }
.auth-foot a:hover { text-decoration: underline; }

/* --- Zustaende ----------------------------------------------------------- */

.empty {
  text-align: center;
  padding: 54px 24px;
  color: var(--muted);
}
.empty .empty-icon { color: #cfcac1; margin-bottom: 14px; }
.empty .empty-icon svg { width: 44px; height: 44px; stroke-width: 1.4; }
.empty h3 { font-size: 18px; color: var(--navy); margin: 0 0 8px; letter-spacing: -.02em; }
.empty p { margin: 0 auto 22px; max-width: 380px; font-size: 16px; line-height: 1.65; }

/* Ladeflaechen: verhindern das Springen des Layouts. */
.skeleton {
  background: linear-gradient(90deg, #eef2f5 25%, #edf1f3 50%, #eef2f5 75%);
  background-size: 200% 100%;
  animation: shimmer 1.3s infinite;
  border-radius: 3px;
  color: transparent !important;
}
@keyframes shimmer {
  from { background-position: 200% 0; }
  to { background-position: -200% 0; }
}
@media (prefers-reduced-motion: reduce){
  .skeleton { animation: none; }
  * { transition: none !important; }
}

/* Kurzmeldung unten rechts. */
.toast {
  position: fixed;
  right: 22px; bottom: 22px;
  z-index: 200;
  background: var(--navy);
  color: #fff;
  padding: 13px 18px;
  border-radius: 4px;
  box-shadow: var(--shadow-pop);
  font-size: 16px;
  font-weight: 600;
  max-width: 380px;
  opacity: 0;
  transform: translateY(10px);
  pointer-events: none;
  transition: opacity .22s, transform .22s;
}
.toast.show { opacity: 1; transform: none; }
.toast.error { background: #a63e30; }
.toast.success { background: #286a4e; }

/* ==========================================================================
   Anpassung an kleinere Bildschirme
   ========================================================================== */

@media (max-width: 1080px) {
  .case-hero { grid-template-columns: 220px 1fr; }
  .case-summary-row { grid-template-columns: 1fr; }
}

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

  /* Die Seitenleiste wird zum ausklappbaren Menue. */
  .sidebar {
    position: fixed;
    inset: 0 auto 0 0;
    width: 284px;
    height: 100dvh;
    z-index: 60;
    transform: translateX(-100%);
    transition: transform .24s ease;
    box-shadow: var(--shadow-pop);
  }
  .sidebar.open { transform: none; }

  .menu-toggle {
    display: grid;
    place-items: center;
    width: 40px; height: 40px;
    border: 1px solid var(--line);
    background: var(--white);
    border-radius: 4px;
    color: #665e4f;
  }

  .sidebar-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(22,50,79, .45);
    z-index: 50;
    opacity: 0;
    pointer-events: none;
    transition: opacity .24s;
  }
  .sidebar-backdrop.show { opacity: 1; pointer-events: auto; }

  .topbar { padding: 14px 18px; }
  .topbar-greeting h1 { font-size: 18px; }
  .topbar-greeting p { display: none; }
  .content { padding: 20px 18px 48px; }

  .grid-2 { grid-template-columns: 1fr; }

  .case-hero { grid-template-columns: 1fr; padding: 16px; gap: 18px; }
  .case-photo { min-height: 168px; }
  .case-title-row h2 { font-size: 21px; }

  .status-note { flex-direction: column; align-items: flex-start; gap: 13px; }
  .status-note .btn { width: 100%; }

  /* Der Fortschritt laeuft auf schmalen Bildschirmen senkrecht: waagerecht
     waeren sechs Stationen unlesbar. */
  .progress-track { grid-template-columns: 1fr !important; gap: 0; }
  .progress-step {
    display: grid;
    grid-template-columns: 34px 1fr;
    gap: 14px;
    text-align: left;
    padding: 0 0 18px;
    align-items: start;
  }
  .progress-step:last-child { padding-bottom: 0; }
  .progress-step .marker { margin: 0; }
  .progress-step::before {
    top: 34px;
    left: 16px;
    width: 3px;
    height: calc(100% - 34px);
  }
  .progress-step:first-child::before { display: none; }
  .progress-step:last-child::before { display: none; }
  /* Bei senkrechter Anordnung gehoert die Linie zum jeweils vorherigen
     Schritt – deshalb wird sie hier auf den Folgeschritt bezogen gezeichnet. */
  .progress-step.done::before { background: var(--green); }
  .progress-step .step-label { padding: 6px 0 0; }

  .bubble { max-width: 88%; }
  .field-row { grid-template-columns: 1fr; }
  .user-chip .chip-name { display: none; }
  .user-chip { padding: 5px; border: 0; }
}

@media (max-width: 560px){
  .facts { grid-template-columns: 1fr 1fr; gap: 14px; }
  .case-row { grid-template-columns: 1fr; }
  .case-row .case-side { text-align: left; justify-items: start; }
  .doc-grid { grid-template-columns: 1fr; }
  .auth-card { padding: 26px 22px 24px; }
  .toast { left: 16px; right: 16px; max-width: none; }
}

/* Druckansicht: Menue und Bedienelemente weglassen. */
@media print {
  .sidebar, .topbar, .btn, .menu-toggle { display: none !important; }
  .shell { grid-template-columns: 1fr; }
  .content { padding: 0; }
  .card { box-shadow: none; border-color: #ccc; }
}

/* ==========================================================================
   Hotel-Eingabehilfe im Kundenportal
   ========================================================================== */
.hh-ac { position: relative; }
.hh-ac-live {
  position: absolute; width: 1px; height: 1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}
.hh-ac-list {
  position: absolute; z-index: 60; left: 0; right: 0; top: calc(100% + 5px);
  margin: 0; padding: 6px; list-style: none; max-height: 290px; overflow-y: auto;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 4px; box-shadow: var(--shadow-pop);
}
.hh-ac-item {
  display: flex; flex-direction: column; gap: 2px;
  padding: 11px 13px; border-radius: 3px; cursor: pointer;
}
.hh-ac-item:hover, .hh-ac-item.active { background: var(--accent-soft); }
.hh-ac-item.active { outline: 2px solid var(--accent); outline-offset: -2px; }
.hh-ac-name { font-size: 16px; font-weight: 600; color: var(--primary); }
.hh-ac-location { font-size: 15px; color: var(--text-faint); }

/* Hinweis auf mehrdeutige Hoteltreffer. */
.hotel-candidates { display: grid; gap: 8px; margin-top: 12px; }
.hotel-candidate {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 11px 14px; border: 1px solid var(--border); border-radius: 4px;
  background: var(--surface); text-align: left; width: 100%; cursor: pointer;
}
.hotel-candidate:hover { border-color: var(--accent); background: var(--accent-soft); }
.hotel-candidate .cand-name { font-weight: 700; font-size: 16px; color: var(--primary); }
.hotel-candidate .cand-location { font-size: 15px; color: var(--text-muted); }

/* Bedienflaechen auf dem Telefon: freistehende Links im Portal
   („Passwort vergessen?", „Jetzt registrieren") waren 14 bis 15 Pixel
   hoch und damit mit dem Finger kaum zu treffen. */
@media (max-width: 640px) {
  .auth-foot a,
  .field-hint a,
  .link-arrow,
  .text-link {
    display: inline-block;
    padding: 7px 0;
    min-height: 24px;
  }
}