/* Planning Suite: Übersicht, Listen, Paar-Karten, Datensatz, Kalender, Jahresübersicht. */

/* ---------- Dashboard ---------- */
/* Bannerbild über die ganze Breite; Suche und Konto-Menü liegen darauf. */
.content.has-banner { position: relative; padding-top: 0; }
.content.has-banner > .topbar { position: absolute; top: 0; left: 0; right: 0; z-index: 4; }
/* Suche auf dem Bild: klein und dezent — nur Umriss, zarter Hintergrund, weiße Schrift. */
.content.has-banner > .topbar { padding-block: 12px; }
.has-banner .top-search { width: min(170px, 42%); transition: width .15s; height: 32px; padding: 0 12px; gap: 8px; background: rgba(255, 255, 255, .12); border-color: rgba(255, 255, 255, .7); color: #fff; backdrop-filter: blur(3px); font-size: 14px; }
.has-banner .top-search .icon { width: 15px; height: 15px; }
.has-banner .top-search input { color: #fff; }
.has-banner .top-search input::placeholder { color: #fff; opacity: 1; }
.has-banner .top-search:focus-within { width: min(240px, 60%); border-color: #fff; background: rgba(255, 255, 255, .2); }
.dashboard { max-width: none; }
.dashboard > * { width: 100%; max-width: 860px; margin-inline: auto; }
.dashboard > .banner { max-width: none; width: auto; margin: 0 -32px 6px; height: clamp(120px, 13vw, 190px); position: relative; overflow: hidden; }
.banner img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; display: block; }
.banner::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(38, 44, 44, .28), transparent 42%); pointer-events: none; }
.greeting { font-size: 34px; font-weight: 300; line-height: 1.2; margin-top: 10px; }
.dashboard .page-head h1 { font-size: 13px; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-soft); font-weight: 400; }
.dashboard .page-head { align-items: center; padding-top: 0; }
/* Offene Schritte: kompakte Karten im dunkleren Beige (wie das Feld "Planning Suite"), ohne Schatten und Randstreifen. */
.steps { display: grid; gap: 8px; }
.step { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; padding: 11px 14px 11px 20px; background: var(--sand); border-radius: 12px; }
.step-main { flex: 1; min-width: 220px; display: grid; gap: 1px; }
.step-main-btn, button.upcoming-item { border: 0; background: none; padding: 0; text-align: left; color: inherit; width: 100%; }
button.upcoming-item { padding: 13px 22px; }
.step-line { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 12px; }
.step-main h3 { font-size: 17px; font-weight: 400; color: var(--primary-800); }
.step-meta { color: var(--ink-soft); font-size: 13.5px; }
.step-meta strong { color: var(--ink); }
.step-actions { display: flex; flex-wrap: wrap; gap: 6px; }
.step .btn-ghost { border-color: var(--sand-700); }
.step .btn-ghost:hover { background: var(--sand-300); }
.btn-task { background: var(--sand); color: var(--primary-800); }
.btn-task:hover { background: var(--sand-600); color: #fff; }
/* Schritte aus den Paaren: dunkleres Grün mit weißer Schrift. Eigene Aufgaben bleiben beige. */
.step.is-couple { background: var(--primary-600); color: #fff; }
.step.is-couple h3, .step.is-couple .step-meta strong { color: #fff; }
.step.is-couple .step-meta { color: rgba(255, 255, 255, .88); }
.step.is-couple .step-open { color: var(--sand); }
.step.is-couple .btn-ghost { border-color: rgba(255, 255, 255, .7); color: #fff; }
.step.is-couple .btn-ghost:hover { background: rgba(255, 255, 255, .16); }
.step.is-couple .btn-todo { border-color: transparent; }
/* Offener Schritt: Hinweis "Noch offen" und ein Knopf mit leerem Kästchen — der Haken erscheint erst beim Darüberfahren. */
/* Anfragen: helleres Grün wie der Bereichsumschalter oben links (Weiß zu 14 % über #7A9191), Schrift weiß wie bei den Paaren */
.step.is-inquiry { background: #8DA0A0; color: #fff; }
.step.is-inquiry h3, .step.is-inquiry .step-meta strong { color: #fff; }
.step.is-inquiry .step-meta { color: rgba(255, 255, 255, .9); }
.step.is-inquiry .step-open { color: var(--sand); }
.step.is-inquiry .btn-ghost { border-color: rgba(255, 255, 255, .75); color: #fff; }
.step.is-inquiry .btn-ghost:hover { background: rgba(255, 255, 255, .16); }
.step.is-inquiry .btn-todo { border-color: transparent; }
/* Bereiche auf dem Dashboard: Anfragen · Gebuchte Paare · Eigene Aufgaben */
.step-groups { display: grid; gap: 22px; }
.step-group { display: grid; gap: 10px; }
.step-toggle { display: inline-flex; align-items: center; gap: 6px; padding: 4px 6px 4px 0; border: 0; background: none; color: inherit; font: inherit; letter-spacing: inherit; text-transform: inherit; cursor: pointer; }
.step-toggle:hover { color: var(--ink); }
.step-toggle svg { flex: none; transition: transform .15s; }
.step-toggle[aria-expanded="true"] svg { transform: rotate(90deg); }
.step-toggle .step-count { margin-left: 2px; }
.steps[hidden] { display: none; }
.step-count { display: inline-grid; place-items: center; min-width: 20px; height: 20px; margin-left: 8px; padding: 0 6px; border-radius: 999px; background: var(--sand-300); color: var(--ink); font-size: 11.5px; letter-spacing: 0; vertical-align: 1px; }
.step-open { font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--warn); }
.btn-todo { border-color: var(--sand-600); background: #fff; color: var(--ink); gap: 10px; }
.btn-todo:hover { border-color: var(--primary-600); background: var(--primary-50); }
.todo-box { width: 18px; height: 18px; border-radius: 5px; border: 1.5px solid var(--sand-700); background: #fff; display: grid; place-items: center; flex: none; }
.btn-todo:hover .todo-box { border-color: var(--primary-600); }
.btn-todo:hover .todo-box::after { content: ""; width: 8px; height: 4px; border-left: 2px solid var(--primary-600); border-bottom: 2px solid var(--primary-600); transform: rotate(-45deg) translate(1px, -1px); }

.upcoming { display: grid; gap: 10px; margin-top: 14px; }
.upcoming-list { list-style: none; margin: 0; padding: 0; background: var(--surface); border-radius: var(--radius); box-shadow: var(--shadow); overflow: hidden; }
.upcoming-list li + li { border-top: 1px solid var(--line); }
.upcoming-item { display: grid; grid-template-columns: auto 84px 1fr auto; align-items: center; gap: 12px; padding: 13px 22px; }
.upcoming-item:hover { background: var(--sand-50); }
.upcoming-date, .upcoming-rel { color: var(--ink-soft); font-size: 14.5px; }

.dot { width: 10px; height: 10px; border-radius: 50%; flex: none; background: var(--primary); }
.dot-anfrage { background: none; border: 1.5px solid var(--primary); }
.dot-privat { background: var(--sand-600); }
.dot-step { background: none; border: 1.5px dashed var(--primary-700); }
/* Eigene Aufgaben unter "Demnächst": Beige wie ihre Karten oben, mit feinem Rand, damit der Punkt auf Weiß sichtbar bleibt */
.dot-task { background: var(--sand); box-shadow: inset 0 0 0 1.5px var(--sand-600); }
.dot-call, .dot-shooting { background: var(--primary-800); }

/* ---------- Listen ---------- */
.rows { display: grid; background: var(--surface); border-radius: var(--radius); box-shadow: var(--shadow); overflow: hidden; }
.row { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr) minmax(0, 1.2fr); align-items: center; gap: 16px; padding: 16px 24px; }
.row + .row { border-top: 1px solid var(--line); }
a.row:hover { background: var(--sand-50); }
.row-main, .row-col { display: grid; gap: 3px; justify-items: start; min-width: 0; }
.row-main strong { font-size: 17px; }
.row-meta { font-size: 13.5px; color: var(--ink-soft); }
.row-meta.is-warn { color: var(--warn); }
.row-actions { display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; }

/* ---------- Paar-Karten ---------- */
.year-group { display: grid; gap: 14px; }
.year-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; padding-bottom: 8px; border-bottom: 1px solid var(--sand-300); }
.year-head h2 { font-size: 24px; font-weight: 300; letter-spacing: .06em; }
.couple-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(196px, 1fr)); gap: 22px; }
.couple-card { position: relative; display: block; aspect-ratio: 5 / 7; border-radius: 18px; background: var(--primary-700); color: #fff; box-shadow: var(--shadow); transition: transform .2s ease, box-shadow .2s ease; }
.couple-card:hover { transform: translateY(-3px); box-shadow: 0 18px 40px rgba(38, 44, 44, .22); }
/* Paarfotos: warmes, weiches Schwarz-Weiß nach dem Bildstil der Userin. Die Tonwertkurve und die Tönung
   stehen als SVG-Filter "photo-look" in index.html (dort lassen sich Lichter, Mitten und Tiefen einzeln einstellen). */
:root { --photo-look: url(#photo-look); }
.couple-card img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: var(--photo-look); border-radius: inherit; }
.couple-initials { position: absolute; inset: 0; display: grid; place-items: center; padding-bottom: 20%; font-size: 34px; font-weight: 300; letter-spacing: .12em; color: rgba(255, 255, 255, .5); }
.couple-shade { position: absolute; inset: 0; border-radius: inherit; background: linear-gradient(to top, rgba(20, 24, 24, .82) 0%, rgba(20, 24, 24, .3) 34%, transparent 58%); }
.couple-card .menu-wrap { position: absolute; top: 8px; right: 8px; z-index: 2; }
.card-menu { display: grid; place-items: center; width: 34px; height: 34px; border: 0; border-radius: 50%; background: none; color: #fff; }
.card-menu:hover { background: rgba(255, 255, 255, .2); }
.couple-text { position: absolute; left: 18px; right: 18px; bottom: 18px; display: grid; gap: 2px; }
.couple-name { font-size: 16px; letter-spacing: .12em; text-transform: uppercase; line-height: 1.3; margin-bottom: 4px; overflow-wrap: anywhere; }
/* Datum und Ort bewusst klein und dünn, damit der Name klar hervorsticht. */
.couple-meta { font-size: 10.5px; font-weight: 300; letter-spacing: .06em; opacity: .85; min-height: 0; }

/* ---------- Paar-Datensatz ---------- */
.detail { gap: 18px; }
.detail-head { display: grid; gap: 18px; position: sticky; top: -8px; z-index: 5; background: var(--sand-100); padding: 8px 0 14px; }
.detail-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.detail-save { display: flex; align-items: center; gap: 6px; }
.back { display: inline-flex; align-items: center; gap: 6px; color: var(--ink-soft); font-size: 14.5px; }
.back:hover { color: var(--ink); }
.detail-title { display: flex; align-items: center; gap: 18px; }
.detail-photo { flex: none; width: 60px; height: 76px; border-radius: 12px; overflow: hidden; background: var(--primary); color: #fff; display: grid; place-items: center; }
.detail-photo img, .photo-preview img { width: 100%; height: 100%; object-fit: cover; filter: var(--photo-look); }

.phases { list-style: none; margin: 0; padding: 0; display: flex; gap: 4px; overflow-x: auto; }
.phases li { flex: 1; min-width: max-content; padding: 10px 12px 0; border-top: 3px solid var(--sand-300); font-size: 12.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--sand-700); }
.phases li.is-done { border-color: var(--primary-200); color: var(--ink-soft); }
.phases li.is-current { border-color: var(--primary-600); color: var(--primary-800); }

.tabs { display: flex; gap: 4px; overflow-x: auto; overflow-y: hidden; box-shadow: inset 0 -1px 0 var(--sand-300); }
.tab { padding: 11px 16px; border: 0; background: none; border-bottom: 2px solid transparent; color: var(--ink-soft); white-space: nowrap; font-size: 15.5px; }
.tab:hover { color: var(--ink); }
.tab.is-active { color: var(--primary-800); border-color: var(--primary-600); }
.detail-body { display: grid; gap: 22px; }
/* Eingabefeld mit Kopier-Knopf daneben (z. B. Link zum Videocall) */
.mail-actions { margin-bottom: 8px; }
.placeholder-hint { margin-top: 8px; font-size: 13px; line-height: 1.5; color: var(--ink-soft); }
.placeholder-hint p { margin: 0; }
.placeholder-hint ul { margin: 2px 0 6px; padding: 0; list-style: none; }
.placeholder-hint strong { color: var(--ink); font-weight: 700; }
.mail-templates { display: grid; gap: 8px; }
.mail-template { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 4px; }
.mail-template-main { display: grid; gap: 2px; padding: 10px 14px; text-align: left; background: var(--sand-100); border: 0; border-radius: 10px; color: var(--ink); font: inherit; cursor: pointer; }
.mail-template-main:hover { background: var(--sand-300); }
.with-copy { display: flex; align-items: center; gap: 6px; }
.with-copy .input { flex: 1; min-width: 0; }

.hours-row { display: flex; flex-wrap: wrap; gap: 16px 20px; align-items: start; }
.hours-row .field { min-width: 150px; }
.swap-row { display: flex; justify-content: center; margin-top: -10px; }
/* Terminprüfung oben auf der Seite „Anfragen“ */
.date-check { display: grid; gap: 14px; margin-bottom: 22px; }
.date-check .field { max-width: 280px; }
.date-check-result { display: grid; gap: 12px; }
.date-check-result:empty { display: none; }
.date-check-state { display: flex; align-items: flex-start; gap: 8px; padding: 10px 14px; border-radius: var(--radius-sm); }
.date-check-state .icon { flex: none; margin-top: 3px; }
.date-check-state strong { color: inherit; }
.date-check-state.is-free { background: var(--primary-100); color: var(--primary-800); }
.date-check-state.is-asked { background: var(--sand-200); color: var(--ink); }
.date-check-state.is-taken { background: var(--warn-bg); color: var(--warn); }
.date-check-block { display: grid; gap: 4px; }
.date-check-entry { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; padding: 4px 0; }
.date-check-entry:hover { color: var(--primary-700); }
.avail { display: flex; align-items: flex-start; gap: 8px; font-size: 14px; }
.avail .icon { margin-top: 3px; }
.avail.is-free { color: var(--primary-700); }
.avail.is-warn { color: var(--warn); background: var(--warn-bg); padding: 10px 14px; border-radius: var(--radius-sm); }
.avail.is-warn strong { color: inherit; }

.accept { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px; padding: 20px 26px; border-radius: var(--radius); background: var(--primary-100); }
.accept strong { font-size: 17px; }

.photo-field { display: flex; flex-wrap: wrap; gap: 22px; align-items: center; }
.photo-field > div:last-child { display: grid; gap: 12px; justify-items: start; flex: 1; min-width: 220px; }
.couple-photo { position: absolute; inset: 0; overflow: hidden; border-radius: inherit; }
.photo-zoom { display: grid; gap: 4px; width: min(260px, 100%); }
.photo-zoom input { width: 100%; accent-color: var(--primary-600); }
.photo-preview.is-movable { cursor: grab; touch-action: none; user-select: none; }
.photo-preview.is-movable:active { cursor: grabbing; }
.photo-preview.is-movable img { pointer-events: none; }
.photo-field .field-hint .icon { vertical-align: -2px; }
.photo-preview { flex: none; width: 130px; aspect-ratio: 5 / 7; border-radius: 14px; overflow: hidden; background: var(--primary); color: #fff; display: grid; place-items: center; }

.day-banner { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-radius: var(--radius-sm); background: var(--primary-100); color: var(--primary-800); font-size: 17px; }
.list-rows { display: grid; gap: 8px; }
.list-rows:empty { display: none; }
.list-row { display: grid; gap: 8px; align-items: center; }
.timeline-row { grid-template-columns: 26px 120px 1fr 38px; }
/* Pfeile zum Verschieben einer Zeile, übereinander vor der Uhrzeit */
.row-move { display: grid; gap: 0; }
.row-move .icon-btn { width: 26px; height: 22px; padding: 0; color: var(--ink-soft); }
.row-move .icon-btn:disabled { opacity: .25; }
.vendor-row { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr) minmax(0, 1fr) minmax(0, 1fr) 38px; }
.own-vendor-row { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr) minmax(0, 1fr) 38px; }
.card > .btn { justify-self: start; }

/* ---------- Dienstleister-Suche ---------- */
.vendor-results { display: grid; gap: 26px; }
.vendor-group { display: grid; gap: 8px; }
.vendor-group h2 { display: flex; align-items: center; gap: 12px; font-size: 22px; font-weight: 300; }

/* ---------- Kalender ---------- */
.cal-head { position: sticky; top: -8px; z-index: 5; display: grid; gap: 12px; background: var(--sand-100); padding: 0 0 12px; margin-bottom: -10px; box-shadow: 0 8px 8px -8px rgba(61, 78, 78, .12); }
.month { scroll-margin-top: 150px; }
.year-switch { display: flex; align-items: center; gap: 4px; }
.year-switch strong { font-size: 22px; font-weight: 300; min-width: 62px; text-align: center; }
.legend { display: flex; flex-wrap: wrap; gap: 6px 20px; font-size: 13.5px; color: var(--ink-soft); }
.legend > span { display: inline-flex; align-items: center; gap: 8px; }
.swatch { width: 16px; height: 16px; border-radius: 5px; display: inline-block; }
.swatch-hochzeit { background: var(--primary-600); }
.swatch-anfrage { border: 1.5px solid var(--primary-600); }
.swatch-privat { background: var(--sand); }
.swatch-call { background: #fff; border: 1px solid var(--line); position: relative; }
.swatch-call::after { content: ""; position: absolute; left: 50%; bottom: 2px; width: 4px; height: 4px; margin-left: -2px; border-radius: 50%; background: var(--primary-800); }
.swatch-conflict { background: #fff; box-shadow: inset 0 0 0 2px var(--warn); }

.year-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 18px; }
.month { background: var(--surface); border-radius: var(--radius); box-shadow: var(--shadow); padding: 16px 16px 14px; display: grid; gap: 10px; align-content: start; }
.month h2 { font-size: 13px; letter-spacing: .16em; text-transform: uppercase; color: var(--primary-700); }
.month-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 3px; }
.weekday { text-align: center; font-size: 11px; color: var(--sand-700); padding-bottom: 2px; }
.day { position: relative; aspect-ratio: 1; display: grid; place-items: center; border: 0; padding: 0; background: none; border-radius: 8px; font-size: 13.5px; color: var(--ink); }
button.day:hover { background: var(--sand-200); }
.day.is-today { box-shadow: inset 0 0 0 1px var(--ink-soft); }
.day.is-hochzeit { background: var(--primary-600); color: #fff; }
.day.is-anfrage { box-shadow: inset 0 0 0 1.5px var(--primary-600); }
.day.is-privat { background: var(--sand); }
.day.is-conflict { box-shadow: inset 0 0 0 2px var(--warn); }
.day.has-dot::after { content: ""; position: absolute; bottom: 3px; width: 4px; height: 4px; border-radius: 50%; background: var(--primary-800); }
.day.is-hochzeit.has-dot::after { background: #fff; }

.day-list { list-style: none; margin: 0 0 12px; padding: 0; display: grid; gap: 10px; }
.day-list li { display: flex; align-items: baseline; gap: 10px; }

/* ---------- Jahresübersicht (Druck / PDF) ---------- */
.sheet { background: #fff; border-radius: var(--radius); box-shadow: var(--shadow); padding: 36px 40px; }
.sheet-head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; padding-bottom: 14px; margin-bottom: 6px; border-bottom: 2px solid var(--primary); }
.sheet-head span { letter-spacing: .14em; text-transform: uppercase; font-size: 12px; color: var(--ink-soft); }
.year-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.year-table th { text-align: left; font-weight: 400; font-size: 11.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--primary-700); padding: 12px 10px 8px 0; }
.year-table td { vertical-align: top; padding: 10px 10px 10px 0; border-top: 1px solid var(--line); }
.year-table tr { break-inside: avoid; }

@media (max-width: 900px) {
  .dashboard > .banner { margin-inline: -16px; }
  .greeting { font-size: 26px; }
}
@media (max-width: 760px) {
  .row { grid-template-columns: 1fr; gap: 6px; padding: 14px 18px; }
  .row-actions { justify-content: flex-start; }
  .vendor-row { grid-template-columns: 1fr 38px; }
  .vendor-row .input { grid-column: 1; }
  .vendor-row .icon-btn { grid-column: 2; grid-row: 1; }
  .upcoming-item { grid-template-columns: auto 1fr; }
  .upcoming-rel { grid-column: 2; }
  .couple-grid { grid-template-columns: repeat(auto-fill, minmax(128px, 1fr)); gap: 12px; }
  .couple-text { left: 12px; right: 12px; bottom: 12px; }
  .couple-name { font-size: 13.5px; }
  .sheet { padding: 20px 16px; overflow-x: auto; }
}

@media print {
  @page { size: A4 landscape; margin: 14mm; }
  body { background: #fff; }
  .no-print, .toast { display: none !important; }
  .shell { display: block; height: auto; }
  .main, .content { display: block; height: auto; overflow: visible; padding: 0; }
  .sheet { box-shadow: none; padding: 0; border-radius: 0; }
  .page { max-width: none; }
}

/* ---------- Smartphone: Paar-Datensatz ----------
   Der Kopf schrumpft auf eine Zeile, die beim Scrollen stehen bleibt: Zurück · Foto · Name · E-Mail einfügen · Speichern.
   Die Phasenleiste entfällt hier – so bleibt der Bildschirm für den Inhalt frei. */
@media (max-width: 760px), (max-height: 520px) {
  .detail, .detail > *, .detail-body > * { min-width: 0; }
  .detail { gap: 10px; }
  .detail-head { display: flex; align-items: center; gap: 8px; top: 0; padding: 6px 0; box-shadow: 0 8px 8px -8px rgba(61, 78, 78, .14); }
  .detail-top { display: contents; }
  .detail-head .back { order: 0; flex: none; font-size: 0; gap: 0; padding: 6px 2px; }
  .detail-title { order: 1; flex: 1; min-width: 0; gap: 9px; }
  .detail-title > div:last-child { min-width: 0; }
  .detail-photo { width: 32px; height: 40px; border-radius: 8px; }
  .detail-photo .icon { width: 16px; height: 16px; }
  .detail-title h1 { font-size: 17px; line-height: 1.25; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .detail-title .page-sub { margin: 0; font-size: 11.5px; line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .detail-title .tag { display: none; }
  .detail-save { order: 2; flex: none; gap: 2px; }
  .detail-save > .btn { font-size: 0; gap: 0; padding: 0 9px; height: 34px; }
  .detail-save .savebar { gap: 6px; }
  .detail-save .savebar .btn { height: 34px; padding: 0 13px; font-size: 14px; }
  /* Speicherstand als kleines Zeichen statt als Text */
  .detail-save .save-status { font-size: 0; }
  .detail-save .save-status::before { font-size: 13px; }
  .detail-save .save-status.is-dirty::before { content: "●"; }
  .detail-save .save-status.is-saved::before { content: "✓"; font-size: 15px; }
  .detail-save .save-status.is-saving::before { content: "…"; }
  .detail-save .save-status.is-error::before { content: "!"; font-size: 16px; }
  .phases { display: none; }
  .tab { padding: 9px 12px; font-size: 14.5px; }
  .detail-body { gap: 14px; }
  .check-date { margin-left: 0; }
}
@media (max-height: 520px) {
  .cal-head { position: static; }
}
/* ---------- Ablauf: Leseansicht fürs Smartphone ---------- */
.timeline { display: grid; gap: 12px; }
.timeline > .btn { justify-self: start; }
.timeline-read, .timeline-edit { display: none; }
@media (max-width: 760px), (max-height: 520px) {
  .timeline:not(.is-editing) .timeline-read { display: grid; }
  .timeline-edit { display: inline-flex; }
  .timeline:not(.is-editing) > .list-rows, .timeline:not(.is-editing) > .btn-row { display: none; }
  .timeline-read-row { display: grid; grid-template-columns: 58px minmax(0, 1fr); gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--line); font-size: 16.5px; line-height: 1.35; }
  .timeline-read-row:last-child { border-bottom: 0; }
  .timeline-read-row strong { font-weight: 400; color: var(--primary-800); font-variant-numeric: tabular-nums; }
  .timeline-read-row span { overflow-wrap: anywhere; }
  .timeline-row { grid-template-columns: 26px 100px minmax(0, 1fr) 34px; gap: 6px; }
}