/* HubRaum ERP — Basis-Stylesheet (Design-Tokens laut design/README.md)
   Selbst gehostete Fonts (DSGVO: keine Google-Fonts-CDN). */

/* ---- Fonts ---- */
@font-face { font-family:'Archivo'; font-style:normal; font-weight:700; font-display:swap;
  src:url('/assets/fonts/archivo-v25-latin-700.woff2') format('woff2'); }
@font-face { font-family:'Archivo'; font-style:normal; font-weight:800; font-display:swap;
  src:url('/assets/fonts/archivo-v25-latin-800.woff2') format('woff2'); }
@font-face { font-family:'Hanken Grotesk'; font-style:normal; font-weight:400; font-display:swap;
  src:url('/assets/fonts/hanken-grotesk-v12-latin-regular.woff2') format('woff2'); }
@font-face { font-family:'Hanken Grotesk'; font-style:normal; font-weight:500; font-display:swap;
  src:url('/assets/fonts/hanken-grotesk-v12-latin-500.woff2') format('woff2'); }
@font-face { font-family:'Space Grotesk'; font-style:normal; font-weight:500; font-display:swap;
  src:url('/assets/fonts/space-grotesk-v22-latin-500.woff2') format('woff2'); }
@font-face { font-family:'Space Grotesk'; font-style:normal; font-weight:600; font-display:swap;
  src:url('/assets/fonts/space-grotesk-v22-latin-600.woff2') format('woff2'); }

/* ---- Tokens ---- */
:root {
  --hr-creme:#FBF8F2; --hr-creme-panel:#F7F2EA; --hr-white:#fff; --hr-ink:#15130E;
  --hr-bronze:#A07C44; --hr-gold:#C9A86A; --hr-eyebrow:#E5C690;
  --hr-text:#5a574e; --hr-text-strong:#3f3b33; --hr-muted:#7a7468; --hr-faint:#a59e8f;
  --hr-line:#ebe3d5; --hr-line-strong:#ddd3c0;
  --hr-frei:#5a8a4a; --hr-vorgemerkt:#C99A3A; --hr-belegt:#B3503C;
  --f-head:'Archivo',system-ui,sans-serif;
  --f-body:'Hanken Grotesk',system-ui,sans-serif;
  --f-label:'Space Grotesk',system-ui,sans-serif;
}

* { box-sizing:border-box; }
html,body { margin:0; padding:0; }
body {
  background:var(--hr-creme); color:var(--hr-text);
  font-family:var(--f-body); font-weight:400; line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3 { font-family:var(--f-head); font-weight:800; letter-spacing:-0.02em; color:var(--hr-ink); margin:0 0 .4em; }
a { color:var(--hr-bronze); }
/* Kalender-IDs, Tokens und Cron-Pfade sind lange Zeichenketten ohne Trennstelle.
   Ohne das hier machen sie das ganze Dokument breiter als den Bildschirm — und
   schieben dann auch Navigation und Filterreiter aus dem Bild. */
code { overflow-wrap:anywhere; }

/* ---- Logo-Wortmarke ---- */
.hr-logo { font-family:var(--f-head); font-weight:800; font-size:28px; letter-spacing:-0.02em; color:var(--hr-ink); }
.hr-logo .r { color:var(--hr-bronze); }
.hr-logo .sq { display:inline-block; width:8px; height:8px; background:var(--hr-bronze); margin-left:3px; vertical-align:baseline; }

/* ---- Labels / Eyebrows ---- */
.eyebrow { font-family:var(--f-label); font-weight:600; text-transform:uppercase;
  letter-spacing:0.18em; font-size:11px; color:var(--hr-muted); }

/* ---- Buttons ---- */
.btn { display:inline-block; font-family:var(--f-label); font-weight:600; text-transform:uppercase;
  letter-spacing:0.08em; font-size:13px; padding:12px 20px; border-radius:2px; border:1px solid var(--hr-bronze);
  background:var(--hr-bronze); color:var(--hr-ink); cursor:pointer; text-decoration:none; }
.btn:hover { background:#8f6d3a; border-color:#8f6d3a; }
.btn-ghost { background:transparent; color:var(--hr-ink); border-color:var(--hr-line-strong); }
.btn-danger { background:transparent; color:var(--hr-belegt); border-color:var(--hr-belegt); }
.btn-danger:hover { background:var(--hr-belegt); color:#fff; border-color:var(--hr-belegt); }
/* Fuer Knoepfe INNERHALB einer Tabellenzelle: der normale .btn sprengt dort
   die Zeilenhoehe.
   ACHTUNG BEIM VERGROESSERN: die Klasse wird auch in rechnungen_liste.php und
   rechnung_editor.php benutzt, wo sie in einer ohnehin engen Spalte steht. Ein
   grosszuegigeres Polster hat die Rechnungstabelle aus ihrer Karte gedrueckt
   (29.08.2026). Deshalb knapp -- und die Tabellen liegen zusaetzlich in
   .tab-wrap, damit so etwas nicht mehr nach aussen durchschlaegt. */
.btn-mini { padding:4px 9px; font-size:11px; letter-spacing:0.06em; }

/* ---- Inputs ---- */
label.field { display:block; margin-bottom:16px; }
label.field .lbl { display:block; font-family:var(--f-label); font-weight:500; text-transform:uppercase;
  letter-spacing:0.08em; font-size:11px; color:var(--hr-muted); margin-bottom:6px; }
input[type=text], input[type=email], input[type=password] {
  width:100%; padding:11px 12px; border:1px solid var(--hr-line-strong); border-radius:2px;
  background:var(--hr-white); font-family:var(--f-body); font-size:15px; color:var(--hr-ink); }
input:focus { outline:none; border-color:var(--hr-bronze); }

/* ---- Karten / Panels ---- */
.card { background:var(--hr-white); border:1px solid var(--hr-line); border-radius:3px; padding:28px; }
/* ---- Rueckfrage-Dialog (assets/js/app.js) ----
   Ersetzt den grauen Systemdialog von confirm(). Ohne JavaScript erscheint er
   nicht -- dann sendet der Knopf direkt, so wie confirm() dann auch nicht lief. */
dialog.hr-frage {
  border:1px solid var(--hr-line-strong); border-radius:3px; padding:0;
  background:var(--hr-white); color:var(--hr-ink);
  max-width:440px; width:calc(100% - 32px);
  box-shadow:0 18px 48px rgba(0,0,0,0.18);
}
dialog.hr-frage::backdrop { background:rgba(31,28,24,0.45); }
.hr-frage-inner { padding:24px 26px 20px; }
.hr-frage-inner p { margin:0 0 10px; line-height:1.5; }
.hr-frage-inner p:first-child { font-weight:600; }
.hr-frage-inner p:last-of-type { margin-bottom:18px; }
.hr-frage-aktionen { display:flex; gap:10px; justify-content:flex-end; flex-wrap:wrap; }
@media (max-width:480px) {
  .hr-frage-aktionen { flex-direction:column-reverse; }
  .hr-frage-aktionen .btn { width:100%; }
}

/* Karte fuer unumkehrbare Aktionen. Bewusst nur ein farbiger linker Rand statt
   flaechigem Rot: sie steht dauerhaft in der Maske und soll auffallen, ohne
   wie eine Fehlermeldung auszusehen (dafuer gibt es .alert). */
.card-warn { border-left:3px solid var(--hr-belegt); }
.card-warn .eyebrow { color:var(--hr-belegt); }

/* ---- Login-Layout ---- */
.auth-wrap { min-height:100vh; display:flex; align-items:center; justify-content:center; padding:24px; }
.auth-box { width:100%; max-width:380px; }
.auth-box .card { padding:32px; }
.auth-head { text-align:center; margin-bottom:24px; }
.alert { border:1px solid var(--hr-belegt); color:var(--hr-belegt); background:#fbece8;
  padding:10px 12px; border-radius:2px; font-size:14px; margin-bottom:16px; }

/* ---- Admin-Shell ---- */
.topbar { background:var(--hr-ink); color:var(--hr-creme-panel); padding:14px 24px;
  display:flex; align-items:center; justify-content:space-between; gap:16px; }
.topbar-left { display:flex; align-items:center; gap:24px; }
.topbar-right { display:flex; align-items:center; gap:16px; }
.topbar .hr-logo { color:var(--hr-creme-panel); }
.topbar .hr-logo .r { color:var(--hr-gold); }
.topbar a { color:var(--hr-gold); font-family:var(--f-label); text-transform:uppercase; font-size:12px; letter-spacing:0.08em; text-decoration:none; }
.topnav { display:flex; gap:18px; }
.topnav a { color:var(--hr-muted-ink); }
.topnav a:hover { color:var(--hr-gold); }
.container { max-width:1080px; margin:0 auto; padding:32px 24px; }
.env-badge { font-family:var(--f-label); font-size:11px; text-transform:uppercase; letter-spacing:0.1em;
  border:1px solid var(--hr-gold); color:var(--hr-gold); padding:2px 8px; border-radius:2px; }

/* ---- Tabs / Filter ---- */
.tabs { display:flex; gap:6px; flex-wrap:wrap; margin-top:8px; }
.tab { font-family:var(--f-label); font-size:12px; text-transform:uppercase; letter-spacing:0.06em;
  padding:8px 14px; border:1px solid var(--hr-line); border-radius:2px; color:var(--hr-muted);
  text-decoration:none; background:var(--hr-white); }
.tab-active { border-color:var(--hr-bronze); color:var(--hr-ink); }
.tab-count { color:var(--hr-faint); margin-left:4px; }

/* ---- Tabelle ---- */
table.grid { width:100%; border-collapse:collapse; font-size:14px; }
table.grid th { text-align:left; font-family:var(--f-label); font-size:10px; font-weight:600;
  letter-spacing:0.14em; text-transform:uppercase; color:var(--hr-muted);
  padding:14px 20px; border-bottom:1px solid var(--hr-line); }
table.grid td { padding:14px 20px; border-bottom:1px solid var(--hr-line); }
table.grid tbody tr { cursor:pointer; }
table.grid tbody tr:hover { background:var(--hr-creme-panel); }
table.grid tfoot td { padding:8px 20px; }
table.grid tfoot tr:first-child td { padding-top:14px; }

/* ---- Status-Punkt ---- */
.dot { display:inline-block; width:8px; height:8px; border-radius:50%; background:var(--dot,var(--hr-muted));
  margin-right:8px; vertical-align:middle; }
.badge-status { display:inline-flex; align-items:center; font-family:var(--f-label); font-size:12px;
  text-transform:uppercase; letter-spacing:0.06em; border:1px solid var(--hr-line-strong);
  padding:6px 12px; border-radius:2px; }

/* ---- Detail ---- */
.back { display:inline-block; font-family:var(--f-label); font-size:12px; text-transform:uppercase;
  letter-spacing:0.06em; color:var(--hr-muted); text-decoration:none; margin-bottom:12px; }
.detail-head { display:flex; justify-content:space-between; align-items:flex-start; gap:20px;
  flex-wrap:wrap; margin-bottom:16px; }
.form-grid { display:grid; gap:16px; }
.form-grid.cols-3 { grid-template-columns:repeat(3,1fr); }
@media (max-width:820px){ .form-grid.cols-3 { grid-template-columns:1fr 1fr; } }
@media (max-width:560px){ .form-grid.cols-3 { grid-template-columns:1fr; } }
/* Zwei Spalten fuer Felder, die PAARWEISE gehoeren (Datum + Uhrzeit). In
   cols-3 riss die dritte Spalte das Paar auseinander. */
.form-grid.cols-2 { grid-template-columns:repeat(2,1fr); }
@media (max-width:560px){ .form-grid.cols-2 { grid-template-columns:1fr; } }
select { width:100%; padding:11px 12px; border:1px solid var(--hr-line-strong); border-radius:2px;
  background:var(--hr-white); font-family:var(--f-body); font-size:15px; color:var(--hr-ink); }
textarea { width:100%; padding:11px 12px; border:1px solid var(--hr-line-strong); border-radius:2px;
  background:var(--hr-white); font-family:var(--f-body); font-size:15px; color:var(--hr-ink); resize:vertical; }
.checks { display:flex; gap:18px; flex-wrap:wrap; margin:8px 0 4px; }
.chk { display:inline-flex; align-items:center; gap:8px; font-size:14px; color:var(--hr-text-strong); cursor:pointer; }
.chk input { accent-color:var(--hr-bronze); width:16px; height:16px; }

/* ---- Flash / Log ---- */
.flash { padding:12px 16px; border-radius:2px; font-size:14px; margin:16px 0; }
.flash-ok { background:#eef4e9; border:1px solid var(--hr-frei); color:#3f5a30; }
.log-row { padding:10px 0; border-bottom:1px solid var(--hr-line); font-size:14px; }
.log-row:last-child { border-bottom:none; }
.log-meta { font-family:var(--f-label); font-size:11px; color:var(--hr-faint); }

/* ---- Mail-Vorschau ---- */
.mailvorschau { display:block; width:100%; height:520px; border:1px solid var(--hr-line);
  border-radius:2px; background:var(--hr-creme); margin-top:8px; }

/* ---- Portal-Platzhalter ---- */
.placeholder { min-height:100vh; display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center; padding:24px; }
.muted { color:var(--hr-muted); }

/* ---- Mobil (Telefon, Hochformat) --------------------------------------------
   Die Verwaltung wird auch am Telefon benutzt. Zwei Dinge sind dabei
   entscheidend: Eingabefelder brauchen mindestens 16px, sonst zoomt iOS beim
   Antippen in die Seite hinein — und breite Listentabellen werden zu Karten
   umgebrochen (siehe .stack unten), statt seitlich aus dem Bild zu laufen. */
@media (max-width:720px) {
  .container { padding:20px 14px; }
  .card { padding:18px 16px; }
  .auth-wrap { padding:16px; }
  .auth-box .card { padding:24px 20px; }

  h1 { font-size:26px; }
  h2 { font-size:19px; }

  .topbar { padding:12px 14px; flex-wrap:wrap; row-gap:10px; }
  .topbar-left, .topbar-right { gap:14px; flex-wrap:wrap; row-gap:6px; min-width:0; }
  .topbar .hr-logo { font-size:23px; }
  /* Die Navigation muss umbrechen duerfen — sonst schiebt sie das Dokument
     breiter als den Bildschirm und alles andere laeuft mit aus dem Bild. */
  .topnav { gap:14px; flex-wrap:wrap; row-gap:6px; min-width:0; }

  /* Filterzeilen (Zeitraum/Status/Zahlung): Label über die Reiter statt daneben */
  .filterzeile { flex-direction:column; align-items:stretch; gap:6px; }
  .filterlabel { width:auto; }

  /* Kein iOS-Zoom beim Fokus */
  input[type=text], input[type=email], input[type=password], input[type=date],
  input[type=time], input[type=number], input[type=file], select, textarea { font-size:16px; }

  table.grid th, table.grid td { padding:10px 12px; }
}

/* Listentabelle -> Karten: jede Zeile ein Block, Spaltenname aus data-label.
   Nur für Tabellen mit .stack — der dichte Positions-Editor bleibt Tabelle. */
@media (max-width:720px) {
  table.grid.stack, table.grid.stack tbody, table.grid.stack tr, table.grid.stack td { display:block; }
  table.grid.stack thead { display:none; }
  table.grid.stack tr { padding:12px 16px; border-bottom:1px solid var(--hr-line); }
  table.grid.stack tr:last-child { border-bottom:none; }
  table.grid.stack td { padding:4px 0; border-bottom:none; text-align:left !important; }
  table.grid.stack td[data-label]::before {
    content:attr(data-label);
    display:block; margin-bottom:1px;
    font-family:var(--f-label); font-size:10px; font-weight:600;
    letter-spacing:0.12em; text-transform:uppercase; color:var(--hr-faint);
  }
  /* Aktionsspalten (ohne data-label) bekommen etwas Luft nach oben */
  table.grid.stack td:not([data-label]) { margin-top:6px; }
}

/* ============================================================================
   Kundenportal (portal. / portal-test.)
   Eigene Schale, aber dieselben Farben und Schriften wie die Verwaltung.
   Bewusst schmal: Kunden oeffnen den Link fast immer am Telefon.
   ========================================================================= */
body.portal { display:flex; flex-direction:column; min-height:100vh; }

.portal-kopf {
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding:18px 24px; border-bottom:1px solid var(--hr-line); background:var(--hr-white);
}
.portal-kopf .hr-logo { text-decoration:none; }
.portal-kopf-rechts { display:flex; align-items:center; gap:14px; }
.portal-kopf-rechts a {
  font-family:var(--f-label); font-size:12px; text-transform:uppercase;
  letter-spacing:0.08em; color:var(--hr-bronze); text-decoration:none;
}

.portal-inhalt { flex:1; width:100%; max-width:720px; margin:0 auto; padding:32px 24px; }
.portal-schmal h1 { font-size:26px; margin:4px 0 20px; }
.portal-schmal h2 { font-size:15px; margin:22px 0 6px; }
.portal-schmal h2:first-of-type { margin-top:0; }
.portal-schmal .card p { line-height:1.6; margin:0 0 12px; }
.portal-schmal .card ul { margin:0 0 12px; padding-left:20px; line-height:1.6; }
.portal-schmal .card li { margin-bottom:4px; }

.portal-fuss {
  display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap;
  padding:18px 24px; border-top:1px solid var(--hr-line);
  font-size:13px; color:var(--hr-muted);
}
.portal-fuss a { color:var(--hr-muted); margin-right:16px; }

@media (max-width:560px) {
  .portal-inhalt { padding:24px 16px; }
  .portal-kopf, .portal-fuss { padding:14px 16px; }
  .portal-schmal h1 { font-size:22px; }
  .portal-schmal .card { padding:20px; }
}

/* ---- Telefonate (/anrufe) ----------------------------------------------
   Zuordnung und Notiz sind je ein eigenes Formular IN der Zeile. Auf dem
   Telefon stapeln sie sich mit .grid.stack ohnehin zu Karten; die Felder
   bleiben deshalb bewusst voll breit statt nebeneinander gequetscht. */
.anruf-zuordnen { display:flex; gap:6px; align-items:center; flex-wrap:wrap; }
.anruf-zuordnen select { flex:1; min-width:180px; padding:7px 8px; font-size:13px; }
.anruf-notiz { display:flex; gap:6px; align-items:flex-start; flex-wrap:wrap; }
.anruf-notiz textarea {
  flex:1; min-width:200px; padding:8px; font-size:14px; line-height:1.45;
  border:1px solid var(--hr-line-strong); border-radius:2px;
  background:var(--hr-white); font-family:var(--f-body); color:var(--hr-ink); resize:vertical;
}
/* Unter 720px zoomt iOS beim Fokus hinein, wenn die Schrift kleiner als 16px
   ist -- dieselbe Falle wie beim Positions-Editor. */
@media (max-width:720px) {
  .anruf-zuordnen select, .anruf-notiz textarea { font-size:16px; }
  .anruf-zuordnen .btn-mini, .anruf-notiz .btn-mini { width:100%; }
}

/* Suchzeile im Adressbuch. Die Buchungsliste hat bis heute keine Freitextsuche;
   ein Adressbuch ohne waere aber keines. */
.kontakt-suche { display:flex; gap:8px; align-items:center; flex-wrap:wrap; }
.kontakt-suche input[type=text] { flex:1; min-width:220px; }
@media (max-width:560px) { .kontakt-suche .btn { width:100%; } }

/* ---- Breite Listentabellen ---------------------------------------------
   Eine Tabelle mit nicht umbrechbaren Spalten (Preis, Datumsfeld, Knopf) kann
   breiter werden als ihre Karte. `table.grid` ist auf width:100% gesetzt, das
   verhindert es aber NICHT: die Mindestbreite des Inhalts gewinnt, und die
   Tabelle laeuft rechts aus der Karte heraus. Genau das ist der
   Rechnungsliste passiert.
   Deshalb: die Tabelle in einen scrollbaren Rahmen setzen. Unterhalb von 720px
   uebernimmt `.grid.stack` und bricht ohnehin zu Karten um -- dort darf keine
   Mindestbreite gelten, sonst scrollt die Kartenansicht seitlich. */
.tab-wrap { overflow-x:auto; -webkit-overflow-scrolling:touch; }
@media (min-width:721px) {
  .tab-wrap table.grid { min-width:820px; }
}

/* ---- Aktionszeile: Eingabefeld neben Knoepfen ---------------------------
   `align-items:flex-end` richtet die LABEL-Box aus, nicht das Feld darin --
   und `label.field` bringt margin-bottom:16px mit. Das Feld stand deshalb
   genau diese 16px hoeher als die Knoepfe daneben. Hier wird der Abstand
   aufgehoben; ausserhalb einer solchen Zeile bleibt er, wo er hingehoert. */
.aktionszeile { display:flex; gap:12px; align-items:flex-end; flex-wrap:wrap; }
.aktionszeile label.field { margin-bottom:0; }
@media (max-width:560px) {
  .aktionszeile { align-items:stretch; }
  .aktionszeile label.field, .aktionszeile .btn { width:100%; max-width:none; }
}

/* Stand der Besichtigung in der Buchungsmaske. Nimmt die volle Breite des
   Rasters ein, weil es eine Aussage ist und kein Eingabefeld. */
.besichtigung-stand {
  grid-column:1 / -1; margin:0 0 12px; padding:10px 12px;
  border-left:3px solid var(--bes,var(--hr-line-strong));
  background:var(--hr-creme-panel); font-size:13px; border-radius:2px;
}
.besichtigung-stand a { margin-left:8px; }

/* ---- Kalender-Monatsansicht (/kalender) --------------------------------
   Bewusst eine echte Tabelle: sieben Spalten, feste Breite, keine Bibliothek
   und kein JavaScript. Unter 720px scrollt sie seitlich in .tab-wrap statt zu
   Karten umzubrechen -- ein Monatsraster ohne Raster waere sinnlos. */
.kal-kopf { display:flex; gap:12px; align-items:center; flex-wrap:wrap; margin-top:16px; }
table.kal { width:100%; border-collapse:collapse; table-layout:fixed; min-width:840px; }
table.kal th {
  font-family:var(--f-label); font-size:10px; font-weight:600; letter-spacing:0.14em;
  text-transform:uppercase; color:var(--hr-muted); text-align:left;
  padding:10px 8px; border-bottom:1px solid var(--hr-line);
}
table.kal td {
  vertical-align:top; height:104px; width:14.28%;
  padding:6px 6px 8px; border:1px solid var(--hr-line);
}
.kal-tag { font-size:12px; font-weight:600; color:var(--hr-ink); margin-bottom:4px; }
.kal-fremd { background:var(--hr-creme-panel); }
.kal-fremd .kal-tag { color:var(--hr-muted); font-weight:400; }
.kal-heute { outline:2px solid var(--hr-bronze); outline-offset:-2px; }

.kal-ev {
  display:block; font-size:11px; line-height:1.35; margin-bottom:3px;
  padding:3px 5px; border-radius:2px; border-left:3px solid var(--hr-muted);
  background:var(--hr-white); color:var(--hr-ink); text-decoration:none;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
a.kal-ev:hover { background:var(--hr-creme-panel); }
.kal-zeit { color:var(--hr-muted); }
.kal-belegung { border-left-color:var(--hr-belegt); }
.kal-besichtigung { border-left-color:var(--hr-vorgemerkt); }
/* Vorlaeufig = im Kalender noch nicht zugesagt (Google: tentative).
   Die Schraffur muss auf einen Blick auffallen -- sie ist der Unterschied
   zwischen „Termin steht" und „Vorschlag, noch nicht zugesagt". Der erste
   Entwurf war so blass, dass man sie suchen musste: groeberes Muster,
   kraeftigerer Kontrast, dazu ein gestrichelter Rahmen und kursiver Text,
   damit sie auch ohne Farbe erkennbar bleibt. */
.kal-vorlaeufig {
  background:repeating-linear-gradient(45deg,
    var(--hr-creme-panel), var(--hr-creme-panel) 5px,
    #e2d6bf 5px, #e2d6bf 10px);
  border:1px dashed var(--hr-line-strong);
  border-left-width:3px;
  border-left-style:solid;
  font-style:italic;
}
/* Ein Termin ohne Buchung ist kein Link -- das soll man auch sehen. */
.kal-ohne { color:var(--hr-muted); cursor:help; }

.kal-punkt { display:inline-block; width:9px; height:9px; border-radius:2px; vertical-align:middle; margin-right:4px; }
.kal-punkt.kal-belegung { background:var(--hr-belegt); border:none; }
.kal-punkt.kal-besichtigung { background:var(--hr-vorgemerkt); border:none; }

@media (max-width:720px) {
  table.kal td { height:88px; }
  .kal-kopf .btn-mini { flex:1 1 auto; text-align:center; }
}

/* Eingegangene Antwort -- optisch von dem getrennt, was WIR geschrieben haben.
   Ohne den Unterschied liest man im Faden schnell die eigene Mail fuer die
   Antwort des Kunden. */
.nachricht-ein { border-left:3px solid var(--hr-frei); padding-left:9px; }
.nachricht-ein .n-typ { background:var(--hr-frei); color:#fff; }

/* ---- Sprungleiste und Klappkarten ------------------------------------
   Die Buchungsmaske ist die laengste Seite der Verwaltung: ein gutes Dutzend
   Karten untereinander, von den Stammdaten bis zum Aenderungsverlauf. Statt
   sie auf Unterseiten zu zerlegen (dann liesse sich der Stand einer Buchung
   nicht mehr mit einem Blick und einem Strg+F ueberfliegen) bleibt sie ein
   Dokument -- mit einer mitlaufenden Sprungleiste und eingeklappten Archiven.
   Dieselben Klassen nutzt das Kundenportal auf „Fuer Ihre Planung". */

.sprung {
  position:sticky; top:0; z-index:20;
  display:flex; flex-wrap:wrap; gap:2px 16px;
  margin:0 0 18px; padding:9px 0;
  background:var(--hr-creme); border-bottom:1px solid var(--hr-line);
  font-family:var(--f-label); font-weight:500; font-size:12px;
  letter-spacing:0.08em; text-transform:uppercase;
}
.sprung a { color:var(--hr-muted); text-decoration:none; }
.sprung a:hover { color:var(--hr-bronze); }

/* Ohne das verschwindet das Sprungziel unter der Leiste, die es angesprungen hat. */
[id] { scroll-margin-top:56px; }

details.karte { padding:0; }
details.karte > summary {
  list-style:none; cursor:pointer;
  display:flex; align-items:center; gap:10px;
  padding:20px 28px;
}
details.karte[open] > summary { padding-bottom:0; }
details.karte > summary::-webkit-details-marker { display:none; }
/* Der Pfeil sitzt rechts und dreht sich -- die einzige Rueckmeldung darauf,
   dass hier ueberhaupt etwas aufgeht. */
details.karte > summary::after {
  content:'\25BE'; margin-left:auto; color:var(--hr-faint);
  transition:transform .15s ease;
}
details.karte[open] > summary::after { transform:rotate(180deg); }
details.karte > summary:hover::after { color:var(--hr-bronze); }
details.karte > .karte-inhalt { padding:14px 28px 24px; }

/* Zusatz in der Kopfzeile („12 Einträge", „zuletzt am …") -- er nimmt der
   zugeklappten Karte das Ratespiel, ob dahinter etwas steht. */
.karte-zahl {
  font-family:var(--f-body); font-weight:400; font-size:12px;
  letter-spacing:0; text-transform:none; color:var(--hr-muted);
}

@media (max-width:720px) {
  .sprung { gap:2px 12px; font-size:11px; }
  details.karte > summary { padding:16px 18px; }
  details.karte > .karte-inhalt { padding:12px 18px 20px; }
}

/* ---- Cateringempfehlungen im Kundenportal ----------------------------
   Kacheln statt Liste: eine Marke erkennt man am Zeichen schneller als am
   Namen. Die Kachel steht aber auch ohne Logo -- die Dateien werden
   nachgereicht, und bis dahin darf die Liste nicht wie ein Fehler aussehen. */
.partner-gitter {
  display:grid; gap:12px;
  grid-template-columns:repeat(auto-fill, minmax(190px, 1fr));
}
.partner {
  border:1px solid var(--hr-line); border-radius:3px;
  padding:16px; background:var(--hr-creme);
}
.partner-logos {
  display:flex; align-items:center; gap:10px; flex-wrap:wrap;
  min-height:44px; margin-bottom:10px;
}
/* Die Logos kommen in ganz verschiedenen Seitenverhaeltnissen und mit
   unterschiedlich viel Weissraum. Eine feste Hoehe wuerde die breiten
   verzerren, deshalb begrenzt beides und `object-fit:contain`. */
.partner-logos img { max-height:44px; max-width:100%; object-fit:contain; }