/* ================================================================
   Mietpark Kobatec – Kalender (Monatsansicht)
   Stylesheet für index.php
   ================================================================ */

* { margin:0; padding:0; box-sizing:border-box; }

:root {
  --bg:#eef1f8;
  --card:rgba(255,255,255,.78);
  --border:rgba(30,41,59,.09);
  --surface:rgba(30,41,59,.06);
  --text:#2b3245;
  --muted:#7d869c;
  --accent-1:#ff8f5e;
  --accent-2:#3fb6c9;
}

html { color-scheme:light; }

body {
  min-height:100vh;
  display:flex; align-items:flex-start; justify-content:center;
  padding:40px 16px;
  background:var(--bg);
  color:var(--text);
  font-family:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  -webkit-font-smoothing:antialiased;
}

/* dezente Licht-Flächen im Hintergrund */
body::before {
  content:""; position:fixed; inset:0; z-index:-1; pointer-events:none;
  background:
    radial-gradient(640px 420px at 12% -8%, rgba(255,143,94,.20), transparent 65%),
    radial-gradient(720px 480px at 95% 112%, rgba(63,182,201,.18), transparent 65%);
}

.wrap { width:100%; max-width:1015px; } /* +175px vs. 840px → jede Zelle ~25px breiter */

/* ── Topbar ─────────────────────────────── */
.topbar { display:flex; align-items:center; justify-content:space-between; gap:16px; margin-bottom:20px; }

.brand { display:flex; align-items:center; gap:12px; }
.logo {
  width:42px; height:42px; border-radius:13px; flex:none;
  display:grid; place-items:center;
  background:linear-gradient(135deg,var(--accent-1),var(--accent-2));
  color:#fff; font-weight:800; font-size:20px;
  box-shadow:0 10px 24px rgba(255,143,94,.35);
}
.brand .name { font-weight:700; font-size:16px; letter-spacing:-.01em; }
.brand .sub  { font-size:12px; color:var(--muted); margin-top:1px; }

.btn-today {
  font-size:13px; font-weight:600; color:var(--text); text-decoration:none;
  background:#fff; border:1px solid var(--border);
  padding:9px 18px; border-radius:999px;
  box-shadow:0 4px 12px rgba(30,41,59,.06);
  transition:background .15s ease, transform .15s ease, border-color .15s ease;
}
.btn-today:hover { background:#f0f2f8; border-color:rgba(30,41,59,.16); transform:translateY(-1px); } /* solide Farbe: --surface (6 %) wäre auf Navy-Hintergrund transparent → Button „verschwindet" */

/* ── Topbar-Aktionen (Heute + Burgermenü) ─────────────── */
.topbar-actions { display:flex; align-items:center; gap:8px; }

.menu-wrap { position:relative; }

.burger {
  width:38px; height:38px; border-radius:50%; flex:none;
  display:grid; place-items:center; cursor:pointer;
  color:var(--text); background:#fff; border:1px solid var(--border);
  box-shadow:0 4px 12px rgba(30,45,80,.06);
  transition:background .15s ease, border-color .15s ease;
}
.burger:hover { background:#f0f2f8; border-color:rgba(30,41,59,.16); } /* solide Farbe: --surface (6 %) wäre auf Navy-Hintergrund transparent → Icon „verschwindet" */
.burger svg { width:17px; height:17px; display:block; }

.menu {
  position:absolute; top:calc(100% + 8px); right:0; z-index:40;
  min-width:172px; padding:8px;
  display:flex; flex-direction:column; gap:2px;
  background:rgba(255,255,255,.94);
  backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px);
  border:1px solid var(--border); border-radius:16px;
  box-shadow:0 24px 60px rgba(31,45,80,.18);
  opacity:0; transform:translateY(-6px) scale(.97); transform-origin:top right;
  transition:opacity .2s ease, transform .25s cubic-bezier(.32,.72,0,1);
}
.menu.open { opacity:1; transform:none; }
.menu[hidden] { display:none; } /* display:flex würde das hidden-Attribut sonst übersteuern */

.menu a {
  padding:10px 14px; border-radius:10px;
  font-size:14px; font-weight:600; color:var(--text); text-decoration:none;
  transition:background .15s ease, color .15s ease;
}
.menu a:hover { background:var(--surface); }
.menu a.active { color:#bf5b28; background:rgba(255,143,94,.14); }

/* Trennlinie + Aktionen (Über/Abmelden): Abmelden mit roter Akzentfarbe */
.menu-sep { border:none; border-top:1px solid var(--border); margin:6px 0; }
.menu-logout {
  padding:10px 14px; border-radius:10px;
  font-family:inherit; font-size:14px; font-weight:600; color:#c2453a; text-align:left;
  background:none; border:none; cursor:pointer;
  transition:background .15s ease, color .15s ease;
}
.menu-logout:hover { background:rgba(194,69,58,.08); }
.menu-logout:disabled { opacity:.55; cursor:not-allowed; }

/* Über (Info statt Aktion): gleiche Geometrie wie Abmelden, neutral */
.menu-about {
  padding:10px 14px; border-radius:10px;
  font-family:inherit; font-size:14px; font-weight:600; color:var(--text); text-align:left;
  background:none; border:none; cursor:pointer;
  transition:background .15s ease, color .15s ease;
}
.menu-about:hover { background:var(--surface); } /* wie .menu a:hover */

/* ── Karte ──────────────────────────────── */
.card {
  background:var(--card);
  border:1px solid var(--border);
  border-radius:24px;
  padding:28px;
  backdrop-filter:blur(16px);
  -webkit-backdrop-filter:blur(16px);
  box-shadow:0 24px 60px rgba(31,45,80,.12);
}

.cal-head { display:flex; align-items:center; justify-content:space-between; gap:16px; margin-bottom:22px; }
.cal-head h1 { font-size:clamp(20px,3.5vw,26px); font-weight:700; letter-spacing:-.02em; }
.cal-head h1 span { color:var(--muted); font-weight:500; }

.nav { display:flex; gap:8px; }
.nav a {
  width:38px; height:38px; border-radius:50%; flex:none;
  display:grid; place-items:center;
  color:var(--text); text-decoration:none;
  background:#fff; border:1px solid var(--border);
  box-shadow:0 4px 12px rgba(30,41,59,.06);
  transition:background .15s ease, transform .15s ease, border-color .15s ease;
}
.nav a:hover { background:var(--surface); border-color:rgba(30,41,59,.16); transform:translateY(-1px); }
.nav svg { width:15px; height:15px; display:block; }

/* ── Wochentagszeile ────────────────────── */
.weekdays { display:grid; grid-template-columns:repeat(7,1fr); gap:6px; margin-bottom:8px; }
.weekdays span { text-align:center; padding:6px 0; font-size:11px; font-weight:600; letter-spacing:.09em; text-transform:uppercase; color:var(--muted); }

/* ── Raster ─────────────────────────────── */
.grid { display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); gap:6px; position:relative; } /* Anker für die .bars-Overlay-Schicht */

.cell {
  min-height:clamp(58px,10vw,92px);
  border-radius:14px;
  padding:8px 9px;
  display:flex; flex-direction:column; gap:6px;
  color:var(--text); text-decoration:none;
  border:1px solid transparent;
  transition:background .15s ease, border-color .15s ease, transform .15s ease;
}
.cell:hover { background:var(--surface); border-color:var(--border); }

.num {
  width:24px; height:24px; flex:none;
  display:grid; place-items:center; border-radius:50%;
  font-size:13px; font-weight:600;
}

.cell.wknd { background:rgba(30,41,59,.03); }
.cell.wknd:hover { background:var(--surface); border-color:var(--border); }

.cell.out, .cell.wknd.out { opacity:.4; }
.cell.out:hover, .cell.wknd.out:hover { opacity:1; background:var(--surface); border-color:var(--border); }

.cell.today, .cell.wknd.today {
  background:linear-gradient(135deg,var(--accent-1),var(--accent-2));
  border-color:transparent; opacity:1;
  box-shadow:0 12px 28px rgba(255,143,94,.35);
}
.cell.today:hover, .cell.wknd.today:hover { transform:translateY(-2px); background:linear-gradient(135deg,var(--accent-1),var(--accent-2)); }
.cell.today .num, .cell.wknd.today .num { background:rgba(255,255,255,.3); color:#fff; }

/* ── Ereignisse in Zellen ───────────────── */
.evs { display:flex; flex-wrap:wrap; align-items:center; gap:4px; overflow:hidden; }
.dot { display:none; width:5px; height:5px; border-radius:50%; background:var(--dev-c,var(--accent-2)); flex:none; } /* --dev-c = Geräte-Farbe (JS) */
.tag {
  max-width:100%; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  font-size:10px; line-height:1.2; font-weight:600;
  padding:4px 8px; border-radius:999px;
  background:rgba(255,143,94,.16); color:#bf5b28; /* Fallback ohne --dev-c/color-mix: Orange wie bisher */
}
/* Pro-Gerät-Färbung (JS setzt --dev-c, siehe barColor() in app.js) */
@supports (background:color-mix(in srgb, red 50%, blue)) {
  .tag.dev-c { background:color-mix(in srgb, var(--dev-c) 16%, transparent); color:color-mix(in srgb, var(--dev-c) 62%, #000); }
}
.tag.more { background:rgba(30,41,59,.08); color:var(--muted); }

/* ── Mietbalken (Mehrtags-Termine als durchgehender Balken, nur Desktop) ── */
/* Die .bars-Schicht liegt über dem Raster; Geometrie wird per JS gemessen
   (layoutBars in app.js) und als Inline-Style gesetzt. */
.bars { position:absolute; inset:0; pointer-events:none; z-index:2; }

.bar {
  position:absolute; pointer-events:auto;
  display:flex; align-items:center;
  padding:0 10px; border-radius:4px;
  background:var(--dev-c,var(--accent-1)); color:#fff; /* Fallback ohne color-mix */
  font-size:11px; line-height:1.25; font-weight:600;
  text-decoration:none; cursor:pointer; overflow:hidden; white-space:nowrap;
  box-shadow:0 2px 8px rgba(31,45,80,.22);
  transition:filter .15s ease;
}
@supports (background:color-mix(in srgb, red 50%, blue)) {
  .bar { background:color-mix(in srgb, var(--dev-c) 70%, #1f2637); } /* gedämpft → weißer Text kontrastreich */
}
.bar span { min-width:0; overflow:hidden; text-overflow:ellipsis; } /* Name über die volle Balken-Breite, sonst Ellipsis */
.bar:hover { filter:brightness(1.08); }
.bar:focus-visible { outline:2px solid var(--accent-2); outline-offset:1px; }

/* Rundungen nur an echten Miet-Anfang/-Ende (am Raster-Schnitt bleiben die Enden gerade) */
.bar--cap-l { border-top-left-radius:999px; border-bottom-left-radius:999px; }
.bar--cap-r { border-top-right-radius:999px; border-bottom-right-radius:999px; }

/* „+N"-Chip: Balken, die nicht in die Tag-Zone der Zeile passen (Klick → Tag-Sheet) */
.barchip {
  position:absolute; pointer-events:auto;
  display:grid; place-items:center; padding:0 8px; border-radius:999px;
  background:rgba(30,41,59,.72); color:#fff;
  font-size:10px; font-weight:700; text-decoration:none; cursor:pointer;
}
.barchip:hover { background:rgba(30,41,59,.88); }
.barchip:focus-visible { outline:2px solid var(--accent-2); outline-offset:1px; }

/* Kunden-Tooltip bei Hover/Fokus auf einem Mietbalken (JS: showBarTip in app.js;
   nur Desktop, ein Element in .grid – nicht in .bars, die wird neu gerendert) */
.bar-tip {
  position:absolute; left:0; top:0; z-index:3; pointer-events:none;
  max-width:min(320px,90%); /* Kunde darf bis 200 Zeichen lang sein → Ellipsis */
  padding:4px 10px; border-radius:999px;
  background:rgba(30,41,59,.78); color:#fff;
  font-size:11px; line-height:1.3; font-weight:600;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  box-shadow:0 4px 12px rgba(31,45,80,.28);
  opacity:0; visibility:hidden; transform:translateY(4px);
  transition:opacity .15s ease, transform .15s ease, visibility .15s;
}
.bar-tip.show { opacity:1; visibility:visible; transform:none; }

/* ── Geräte-Sidebar (Drag & Drop, nur Desktop ≥901 px) ─────────────── */
/* Default: ausgeblendet, Kalender-Layout exakt wie vorher (kein Shift).
   Ab 901px: Panel links neben der Kalender-Karte; ziehbare Geräte-Items
   (JS: setupDeviceDrag in app.js) → Drop öffnet das Termin-Modal. */
.cal-layout { display:block; }
.dev-panel { display:none; }

/* Drop-Zielfarben: outline statt background (robust gegen .today-Gradient) */
.cell.drop-ok { outline:2px solid rgba(88,179,104,.8); outline-offset:-2px; }
.cell.drop-busy { outline:2px solid rgba(217,106,133,.8); outline-offset:-2px; }

/* Während des Drags: Balken-Schicht transparent, damit die Zellen darunter
   die dragover/drop-Events erhalten (pointer-events:auto an .bar/.barchip
   würde sie sonst abfangen) */
body.drag-device .bars, body.drag-device .bar, body.drag-device .barchip { pointer-events:none; }

@media (min-width:901px) {
  .wrap.wide { max-width:1280px; }

  .cal-layout { display:flex; gap:20px; align-items:flex-start; }

  .dev-panel { display:block; width:230px; flex:none; padding:20px 16px; }

  /* Kalender-Karte füllt den Rest (Panel bleibt fix) */
  .cal-layout > .card:not(.dev-panel) { flex:1; min-width:0; }

  .dev-panel h2 { font-size:15px; font-weight:700; letter-spacing:-.01em; margin-bottom:12px; }

  /* Liste scrollt (22 Geräte wären sonst höher als der Kalender) */
  .dev-side { list-style:none; max-height:600px; overflow-y:auto; display:flex; flex-direction:column; gap:2px; }

  .dev-item {
    display:flex; align-items:center; gap:8px; width:100%;
    padding:7px 9px; border-radius:10px;
    border:1px solid transparent; background:none;
    cursor:grab; user-select:none; -webkit-user-select:none;
    transition:background .15s ease, border-color .15s ease;
  }
  .dev-item:hover { background:var(--surface); border-color:var(--border); }
  .dev-item.dragging { opacity:.5; }

  /* Farb-Punkt = Balken-Farbe (JS setzt --dev-c via barColor(); Fallback Orange) */
  .dev-dot { width:10px; height:10px; border-radius:50%; flex:none; background:var(--dev-c,var(--accent-1)); }

  .dev-name { flex:1; min-width:0; font-size:13px; font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

  /* Inaktiv: abgedunkelt, nicht ziehbar (kein Hover) */
  .dev-item--off { opacity:.45; cursor:not-allowed; }
  .dev-item--off:hover { background:none; border-color:transparent; }
}

/* ── Terminliste unter dem Kalender (nur mobil sichtbar) ────── */
.evlist { display:none; margin-top:16px; }
.evlist h2 { font-size:15px; font-weight:700; letter-spacing:-.01em; margin-bottom:12px; }
.evrow {
  display:flex; align-items:center; gap:12px; width:100%;
  padding:11px 14px; margin-bottom:8px;
  border-radius:12px; border:1px solid transparent; background:none;
  font:inherit; color:var(--text); text-align:left; cursor:pointer;
  transition:background .15s ease, border-color .15s ease;
}
.evrow:last-child { margin-bottom:0; }
.evrow:hover, .evrow:focus-visible { background:var(--surface); border-color:var(--border); }
.evdate { flex:none; width:56px; font-size:13px; font-weight:700; color:var(--muted); }
.evlabels { display:flex; flex-wrap:wrap; gap:6px; min-width:0; }

/* ── Geräte-Seite (Liste wie Terminliste) ─────────────── */
.devlist h2 { font-size:15px; font-weight:700; letter-spacing:-.01em; margin-bottom:12px; }

.devrow {
  display:flex; align-items:center; gap:12px; width:100%;
  padding:13px 14px; margin-bottom:8px;
  border-radius:12px; border:1px solid transparent; background:none;
  font:inherit; color:var(--text); text-align:left; cursor:pointer;
  transition:background .15s ease, border-color .15s ease;
}
.devrow:last-child { margin-bottom:0; }
.devrow:hover, .devrow:focus-visible { background:var(--surface); border-color:var(--border); }

.devname {
  flex:none; max-width:45%;
  font-size:15px; font-weight:700; letter-spacing:-.01em;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.devname--full { flex:1; max-width:none; } /* ohne Preis-Tags (Bearbeiter-Liste) */
.devprices { display:flex; flex-wrap:wrap; gap:6px; margin-left:auto; }
.tag.alt { background:rgba(63,182,201,.15); color:#1d7f92; }
.tag--off { background:rgba(30,41,59,.1); color:var(--muted); } /* „Inaktiv"-Badge */
.devrow--inactive { opacity:.55; } /* deaktivierte Geräte (z. B. in Reparatur) */
.devrow--inactive:hover, .devrow--inactive:focus-visible { opacity:1; }

/* Rolle user: Read-only-Zeile (kein Button, kein Hover) */
.devrow--static { cursor:default; }
.devrow--static:hover, .devrow--static:focus-visible { background:none; border-color:transparent; }
.dev-chev { flex:none; color:var(--muted); display:grid; place-items:center; }
.dev-chev::before { content:"›"; font-size:20px; line-height:.9; }

/* „i"-Icon (Geräte-Info): eigene Farbe oder Auto-Palette (--dev-c); span mit
   role=button (Admin-Zeile ist ein <button> → kein Button-in-Button) */
.dev-info {
  flex:none; display:grid; place-items:center; width:26px; height:26px;
  border-radius:50%; cursor:pointer; color:var(--dev-c,var(--accent-1));
}
.dev-info svg { width:16px; height:16px; display:block; }
.dev-info:hover { background:rgba(30,41,59,.08); }
@supports (background:color-mix(in srgb, red 50%, blue)) {
  .dev-info:hover { background:color-mix(in srgb, var(--dev-c) 15%, transparent); }
}
.dev-info:focus-visible { outline:2px solid var(--dev-c,var(--accent-1)); outline-offset:1px; }

.dev-empty { padding:13px 14px; font-size:14px; color:var(--muted); text-align:center; }

/* ── Bottom Sheet (Tag-Details) ─────────────────────────────── */
.sheet-backdrop {
  position:fixed; inset:0; z-index:50;
  background:rgba(30,41,59,.42);
  backdrop-filter:blur(2px); -webkit-backdrop-filter:blur(2px);
  opacity:0; transition:opacity .25s ease;
}
.sheet-backdrop.open { opacity:1; }

.sheet {
  position:fixed; left:50%; bottom:0; z-index:60;
  width:100%; max-width:520px;
  transform:translate(-50%,105%);
  transition:transform .3s cubic-bezier(.32,.72,0,1);
  background:rgba(255,255,255,.94);
  backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px);
  border:1px solid var(--border); border-bottom:none;
  border-radius:24px 24px 0 0;
  box-shadow:0 -20px 60px rgba(31,45,80,.28);
  padding:10px 20px calc(18px + env(safe-area-inset-bottom));
}
.sheet.open { transform:translate(-50%,0); }

.grabber { width:36px; height:4px; border-radius:999px; background:rgba(30,41,59,.18); margin:6px auto 12px; }

.sheet-head { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.sheet-head h2 { font-size:17px; font-weight:700; letter-spacing:-.02em; }
.sheet-close {
  width:38px; height:38px; border-radius:50%; flex:none;
  display:grid; place-items:center; cursor:pointer;
  color:var(--text); background:#fff; border:1px solid var(--border);
  box-shadow:0 4px 12px rgba(30,45,80,.06);
  transition:background .15s ease, border-color .15s ease;
}
.sheet-close:hover { background:var(--surface); border-color:rgba(30,41,59,.16); }
.sheet-close svg { width:15px; height:15px; display:block; }

.sheet-list { list-style:none; margin-top:14px; display:flex; flex-direction:column; gap:8px; }
.sheet-list li { list-style:none; }

/* klickbarer Termin in der Sheet */
.sheet-item {
  display:flex; align-items:center; gap:12px; width:100%;
  padding:13px 14px; border-radius:12px; background:var(--surface);
  border:1px solid transparent; font:inherit; color:var(--text); text-align:left; cursor:pointer;
  transition:background .15s ease, border-color .15s ease;
}
.sheet-item:hover { background:rgba(30,41,59,.09); border-color:var(--border); }
.sheet-item:focus-visible { outline:none; background:rgba(30,41,59,.09); border-color:var(--accent-2); }
.sdot { width:8px; height:8px; border-radius:50%; background:var(--accent-2); flex:none; }
.si-body { display:flex; flex-direction:column; gap:2px; min-width:0; flex:1; }
.si-main { font-size:15px; font-weight:700; letter-spacing:-.01em; }
.si-sub { font-size:12px; color:var(--muted); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.si-chev { flex:none; color:var(--muted); display:grid; place-items:center; }
.si-chev::before { content:"›"; font-size:20px; line-height:.9; }

/* „Termin eintragen"-Button unten im Sheet */
.sheet-add {
  display:flex; align-items:center; justify-content:center; gap:8px;
  width:100%; margin-top:14px; padding:13px 14px;
  border-radius:12px; border:none; cursor:pointer;
  font:inherit; font-size:15px; font-weight:700; letter-spacing:-.01em; color:#fff;
  background:linear-gradient(135deg,var(--accent-1),var(--accent-2));
  box-shadow:0 8px 20px rgba(255,143,94,.28);
  transition:transform .15s ease, box-shadow .15s ease;
}
.sheet-add:hover { transform:translateY(-1px); box-shadow:0 12px 26px rgba(255,143,94,.38); }
.sheet-add:focus-visible { outline:none; box-shadow:0 8px 20px rgba(255,143,94,.28), 0 0 0 3px rgba(63,182,201,.45); }
.sheet-add svg { width:16px; height:16px; display:block; }

/* Empty-State im Sheet (Tag ohne Termine) */
.sheet-empty { padding:13px 14px; font-size:14px; color:var(--muted); text-align:center; }

/* ── Modal (Termin bearbeiten) ─────────────────────────────── */
.modal-backdrop {
  position:fixed; inset:0; z-index:70;
  background:rgba(30,41,59,.5);
  backdrop-filter:blur(3px); -webkit-backdrop-filter:blur(3px);
  opacity:0; transition:opacity .25s ease;
}
.modal-backdrop.open { opacity:1; }

.modal {
  position:fixed; left:50%; top:50%; z-index:80;
  width:calc(100% - 32px); max-width:460px;
  max-height:calc(100vh - 48px); overflow:auto;
  transform:translate(-50%,-50%) scale(.96); opacity:0;
  transition:transform .28s cubic-bezier(.32,.72,0,1), opacity .2s ease;
  background:rgba(255,255,255,.96);
  backdrop-filter:blur(18px); -webkit-backdrop-filter:blur(18px);
  border:1px solid var(--border); border-radius:24px;
  box-shadow:0 30px 80px rgba(31,45,80,.32);
  padding:22px;
}
.modal.open { transform:translate(-50%,-50%) scale(1); opacity:1; }
.modal:focus { outline:none; } /* Container nimmt Fokus auf (tabindex=-1), ohne sichtbaren Ring */

.modal-head { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:18px; }
.modal-head h2 { font-size:18px; font-weight:700; letter-spacing:-.02em; }
.modal-close {
  width:38px; height:38px; border-radius:50%; flex:none;
  display:grid; place-items:center; cursor:pointer;
  color:var(--text); background:#fff; border:1px solid var(--border);
  box-shadow:0 4px 12px rgba(30,45,80,.06);
  transition:background .15s ease, border-color .15s ease;
}
.modal-close:hover { background:var(--surface); border-color:rgba(30,41,59,.16); }
.modal-close svg { width:15px; height:15px; display:block; }

.modal-form { display:flex; flex-direction:column; gap:14px; }
.modal-form[hidden] { display:none; } /* hidden-Attribut schlägt sonst nicht gegen display:flex (Schritt 2) */
.field { display:flex; flex-direction:column; gap:6px; min-width:0; }
.field > span { font-size:12px; font-weight:600; color:var(--muted); letter-spacing:.02em; }
.field input, .field select, .field textarea {
  font:inherit; font-size:15px; color:var(--text);
  padding:11px 13px; border-radius:12px;
  background:#fff; border:1px solid var(--border);
  box-shadow:0 2px 8px rgba(31,45,80,.04);
  transition:border-color .15s ease, box-shadow .15s ease;
}
.field textarea { resize:vertical; min-height:72px; line-height:1.45; }
.field input:focus, .field select:focus, .field textarea:focus {
  outline:none; border-color:var(--accent-2);
  box-shadow:0 0 0 3px rgba(63,182,201,.18);
}

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

/* Hinweis-Text unter dem Feld-Label (z. B. „Anzahl", „Aktiv") */
.field .hint { display:block; font-size:12px; font-weight:400; color:var(--muted); margin-top:3px; }

/* Switch (Geräte-Modal: aktiv/inaktiv) – Label links, Toggle rechts */
.field--switch { flex-direction:row; align-items:center; justify-content:space-between; gap:12px; }
.field--switch input.switch {
  appearance:none; -webkit-appearance:none; flex:none; position:relative;
  width:46px; height:27px; border-radius:999px;
  padding:0; background:rgba(30,41,59,.2); border:none; box-shadow:none;
  cursor:pointer; transition:background .2s ease, box-shadow .15s ease;
}
.field--switch input.switch::after {
  content:""; position:absolute; top:3px; left:3px;
  width:21px; height:21px; border-radius:50%; background:#fff;
  box-shadow:0 2px 6px rgba(31,45,80,.28);
  transition:transform .2s ease;
}
.field--switch input.switch:checked { background:linear-gradient(135deg,var(--accent-1),var(--accent-2)); }
.field--switch input.switch:checked::after { transform:translateX(19px); }
.field--switch input.switch:focus-visible { outline:none; box-shadow:0 0 0 3px rgba(63,182,201,.25); }

.modal-actions { display:flex; justify-content:flex-end; gap:10px; margin-top:4px; }
.btn-ghost, .btn-primary {
  font:inherit; font-size:14px; font-weight:600; cursor:pointer;
  padding:11px 20px; border-radius:999px; border:1px solid transparent;
  transition:background .15s ease, transform .15s ease, border-color .15s ease;
}
.btn-ghost { background:#fff; border-color:var(--border); color:var(--text); box-shadow:0 4px 12px rgba(30,45,80,.06); }
.btn-ghost:hover { background:var(--surface); border-color:rgba(30,41,59,.16); }
.btn-primary { background:linear-gradient(135deg,var(--accent-1),var(--accent-2)); color:#fff; box-shadow:0 10px 24px rgba(255,143,94,.3); }
.btn-primary:hover { transform:translateY(-1px); }

/* Danger-Variante (z. B. „Löschen" im Geräte-Modal) */
.btn-danger { color:#c2453a; border-color:rgba(194,69,58,.25); }
.btn-danger:hover { background:rgba(194,69,58,.07); border-color:rgba(194,69,58,.4); }

.actions-spacer { flex:1; } /* schiebt Abbrechen/Speichern nach rechts */

/* Über-Modal: statische Info-Zeilen (Version, Ersteller, PHP-Minimum) */
.about-rows { margin:0 0 18px; display:flex; flex-direction:column; gap:10px; }
.about-rows > div { display:flex; justify-content:space-between; gap:12px; }
.about-rows dt { font-size:13px; color:var(--muted); }
.about-rows dd { margin:0; font-size:14px; font-weight:600; text-align:right; }

/* ── Geräte-Info (Notiz/Farbe/Bild) – eigenes Modal über dem Bearbeiten-Modal ── */
/* Höheres z-index: Info liegt über dem Bearbeiten-Modal (Backdrop 85 > 70, Modal 90 > 80) */
.modal-backdrop--info { z-index:85; }
.modal--info { z-index:90; }

/* „i"-Button im Bearbeiten-Modal (neben dem Namensfeld, nur Edit-Modus) */
.dev-info-btn {
  display:inline-grid; place-items:center; width:20px; height:20px; margin-left:8px;
  padding:0; border:none; border-radius:50%; background:none; cursor:pointer;
  color:var(--dev-c,var(--accent-1)); vertical-align:-4px; /* neben dem Label-Text ausrichten */
}
.dev-info-btn[hidden] { display:none; } /* hidden-Attribut schlägt sonst nicht gegen display:inline-grid */
.dev-info-btn svg { width:14px; height:14px; display:block; }
.dev-info-btn:hover { background:rgba(30,41,59,.08); }
.dev-info-btn:focus-visible { outline:2px solid var(--dev-c,var(--accent-1)); outline-offset:1px; }

/* Farbe: Checkbox „Standardfarbe (Auto)" + Color-Picker */
.field-color-row { display:flex; align-items:center; gap:12px; }
.color-auto { display:inline-flex; align-items:center; gap:8px; font-size:13px; color:var(--text); cursor:pointer; }
.color-auto input { width:16px; height:16px; margin:0; accent-color:#ff8f5e; cursor:pointer; }
.color-auto input:disabled { opacity:.55; cursor:not-allowed; }
.field input[type="color"] { flex:none; width:48px; height:36px; padding:4px; border-radius:10px; cursor:pointer; }
.field input[type="color"]:disabled { opacity:.55; cursor:not-allowed; }

/* Bild-Vorschau (aus eigener Canvas-Erzeugung, max. 240 px) */
.img-preview img { display:block; width:100%; max-height:240px; object-fit:contain; border-radius:12px; border:1px solid var(--border); background:#fff; }

/* ── Kostenübersicht (Schritt 2 im Modal, nach „Berechnen") ─────────────── */
.cost-summary { display:flex; flex-direction:column; gap:14px; }
.cost-summary[hidden] { display:none; }

.cs-rows { display:flex; flex-direction:column; gap:2px; }

.cs-row {
  display:flex; align-items:baseline; justify-content:space-between; gap:12px;
  padding:9px 0; font-size:14px; color:var(--text);
}
.cs-label { display:flex; flex-direction:column; gap:1px; min-width:0; }
.cs-detail { font-size:12px; color:var(--muted); font-weight:400; }
.cs-value { font-variant-numeric:tabular-nums; text-align:right; white-space:nowrap; }

/* Zwischensummen (Miete, Zwischensumme) mit Trennlinie + fett */
.cs-row.cs-sub { border-top:1px solid var(--border); margin-top:6px; padding-top:12px; }
.cs-row.cs-sub .cs-label, .cs-row.cs-sub .cs-value { font-weight:600; }

/* Gesamt (groß, fett, mit Trennlinie) */
.cs-row.cs-total { border-top:2px solid rgba(30,41,59,.2); margin-top:8px; padding-top:14px; }
.cs-row.cs-total .cs-label { font-size:16px; font-weight:700; }
.cs-row.cs-total .cs-value { font-size:20px; font-weight:800; letter-spacing:-.02em; }

/* Hinweis (z. B. „keine Preise hinterlegt") */
.cs-warn { margin:2px 0 0; font-size:12px; color:#b45309; }

/* Verfügbarkeits-Warnung im Termin-Formular (Konflikt → Save gesperrt) */
.field-warn { margin:2px 0 0; font-size:12px; color:#b45309; }
.field-warn[hidden] { display:none; }

/* ── Toast (Bestätigung) ─────────────────────── */
.toast {
  position:fixed; left:50%; bottom:28px; z-index:90;
  transform:translate(-50%,16px); opacity:0;
  background:#2b3245; color:#fff; font-size:14px; font-weight:600;
  padding:12px 20px; border-radius:999px; white-space:nowrap;
  box-shadow:0 16px 40px rgba(31,45,80,.3);
  transition:transform .25s ease, opacity .25s ease;
}
.toast.show { transform:translate(-50%,0); opacity:1; }

/* ── Login-Seite (abstrakter Hintergrund + Glas-Panel) ─────────────── */

body.login-page { display:block; padding:0; overflow:hidden; background:#0b1120; color-scheme:dark; }
body.login-page::before { display:none; } /* App-Glows aus, login-bg bringt eigene Atmosphäre */

/* Abstrakter Hintergrund (dekorativ, keine echten Daten): Navy-Basis mit
   weichen Farbflächen in Brand-Farben + feines Grid mit radialem Fade */
.login-bg { position:fixed; inset:0; z-index:0; pointer-events:none; overflow:hidden; background:radial-gradient(130% 100% at 50% 0%, #182742, #0b1120 75%); transition:transform .8s ease; }

.login-bg__glow { position:absolute; border-radius:50%; filter:blur(72px); opacity:.5; transition:opacity .6s ease, filter .6s ease; }
.login-bg__glow--1 { width:72vmax; height:72vmax; left:-26vmax; top:-30vmax; background:radial-gradient(circle, rgba(255,143,94,.5), transparent 65%); animation:bg-drift-1 26s ease-in-out infinite alternate; }
.login-bg__glow--2 { width:84vmax; height:84vmax; right:-30vmax; bottom:-36vmax; background:radial-gradient(circle, rgba(63,182,201,.45), transparent 65%); animation:bg-drift-2 34s ease-in-out infinite alternate; }
@keyframes bg-drift-1 { to { transform:translate(9vmax,7vmax) scale(1.12); } }
@keyframes bg-drift-2 { to { transform:translate(-8vmax,-6vmax) scale(1.08); } }

.login-bg__grid {
  position:absolute; inset:0; opacity:.9; transition:opacity .6s ease;
  background-image:linear-gradient(rgba(148,163,205,.08) 1px, transparent 1px), linear-gradient(90deg, rgba(148,163,205,.08) 1px, transparent 1px);
  background-size:44px 44px;
  -webkit-mask-image:radial-gradient(ellipse 95% 85% at 50% 42%, #000 35%, transparent 80%);
  mask-image:radial-gradient(ellipse 95% 85% at 50% 42%, #000 35%, transparent 80%);
}

/* Fließende Linien: dezente Basis-Linie + animierter "Datenpuls" */
.login-bg__lines { position:absolute; inset:0; width:100%; height:100%; transition:filter .6s ease; }
.ln-base use { fill:none; stroke:rgba(148,163,205,.2); stroke-width:1.5; }
.ln-flow use { fill:none; stroke-linecap:round; stroke-width:2; stroke-dasharray:14 386; animation:ln-flow linear infinite; }
.ln-flow use:nth-child(1) { stroke:#ff8f5e; animation-duration:7s; }
.ln-flow use:nth-child(2) { stroke:#3fb6c9; animation-duration:10s; animation-delay:-4s; }
.ln-flow use:nth-child(3) { stroke:#ff8f5e; opacity:.6; animation-duration:12s; animation-delay:-7s; }
.ln-flow use:nth-child(4) { stroke:#3fb6c9; opacity:.55; animation-duration:9s; animation-delay:-2s; }
@keyframes ln-flow { to { stroke-dashoffset:-400; } }

.ln-nodes circle { fill:#3fb6c9; animation:ln-node 4s ease-in-out infinite; }
.ln-nodes circle:nth-child(1) { fill:#ff8f5e; }
.ln-nodes circle:nth-child(2) { animation-delay:-1.3s; }
.ln-nodes circle:nth-child(3) { fill:#ff8f5e; animation-delay:-2.1s; }
.ln-nodes circle:nth-child(4) { animation-delay:-3s; }
@keyframes ln-node { 0%,100% { opacity:.25; } 50% { opacity:.85; } }

/* Panel-Container (zentriert, mobil: Tastatur-Aufruf via visualViewport in login.js) */
.login-panel-wrap { position:relative; z-index:2; min-height:100vh; min-height:100dvh; display:flex; flex-direction:column; align-items:center; justify-content:center; padding:24px 16px; transition:opacity .45s ease, transform .45s ease; } /* column: Formular + Impressum-Link gestapelt (nie row) */

.login-card { width:100%; max-width:380px; padding:26px 24px calc(22px + env(safe-area-inset-bottom)); }
.login-card .logo { width:36px; height:36px; border-radius:11px; font-size:17px; }
.login-card .field label { font-size:12px; font-weight:600; color:var(--muted); letter-spacing:.02em; } /* wie die Modal-Labels */

.login-hint { margin-top:16px; font-size:13px; color:var(--muted); }

/* Progressive Disclosure: Passwort-Feld schiebt sich ein (JS setzt .open) */
.login-user { margin-top:20px; }
.login-pass { max-height:0; opacity:0; overflow:hidden; margin-top:0; transition:max-height .3s cubic-bezier(.32,.72,0,1), opacity .25s ease, margin-top .3s cubic-bezier(.32,.72,0,1); }
.login-pass.open { max-height:96px; opacity:1; margin-top:12px; }

/* Inline-Fehlermeldung (statt alert) */
.login-error { margin-top:14px; font-size:13px; font-weight:600; color:#c2453a; }

.login-submit { margin-top:16px; width:100%; }
.login-card input:disabled { opacity:.55; cursor:not-allowed; }

/* Shake bei Fehlversuch */
.login-card.shake { animation:login-shake .4s ease; }
@keyframes login-shake { 0%,100%{transform:translateX(0)} 20%{transform:translateX(-9px)} 40%{transform:translateX(8px)} 60%{transform:translateX(-5px)} 80%{transform:translateX(3px)} }

/* Erfolg: Hintergrund "energiert" (Zoom, Glows/Linien heller), Panel fade-out */
body.unlocked .login-bg { transform:scale(1.05); }
body.unlocked .login-bg__glow { opacity:1; filter:blur(60px); }
body.unlocked .login-bg__grid { opacity:.45; }
body.unlocked .login-bg__lines { filter:brightness(1.7) saturate(1.25); }
body.unlocked .login-panel-wrap { opacity:0; transform:scale(.985); pointer-events:none; }

/* ── Impressum (öffentlich, gleiche Atmosphäre wie Login) ─────────────── */

body.impressum-page { display:block; padding:0; background:#0b1120; color-scheme:dark; } /* bewusst ohne overflow:hidden → scrollbar auf kleinen Screens */
body.impressum-page::before { display:none; } /* App-Glows aus, login-bg bringt eigene Atmosphäre */

.impressum-card { max-width:460px; }
.impressum-card h1 { font-size:20px; font-weight:800; letter-spacing:-.01em; }
.impressum-h { margin-top:22px; font-size:13px; font-weight:700; }
.impressum-card p { margin-top:8px; font-size:14px; line-height:1.65; }
.impressum-card a { color:var(--accent-1); text-decoration:none; }
.impressum-card a:hover { text-decoration:underline; }
.impressum-back { margin-top:26px; font-size:13.5px; }

/* Rechtlicher Link unter dem Login-Panel (liegt auf dunklem Hintergrund) */
.login-legal { margin-top:18px; text-align:center; font-size:12.5px; }
.login-legal a { color:rgba(235,240,250,.6); text-decoration:none; transition:color .2s ease; }
.login-legal a:hover { color:var(--accent-1); }

/* ── App-Seiten mit Login-Hintergrund (testweise) ─────────────── */

body.app-dark { background:#0b1120; }
body.app-dark::before { display:none; } /* helle App-Glows aus, login-bg bringt eigene Atmosphäre */
body.app-dark .wrap { position:relative; z-index:1; } /* Content über dem fixed-Hintergrund */
body.app-dark .brand .name { color:#fff; } /* sonst unsichtbar auf Navy */

/* ── Mobil ──────────────────────────────── */
@media (max-width:600px) {
  body { padding:24px 12px; }
  .card { padding:18px; border-radius:20px; }
  .cal-head { margin-bottom:16px; }
  .grid, .weekdays { gap:4px; }
  .cell { min-height:52px; padding:6px 7px; border-radius:10px; }
  .num { width:20px; height:20px; font-size:12px; }
  .tag { display:none; } /* mobil nur Punkte statt Labels */
  .dot { display:inline-block; }
  .bars { display:none; } /* Mietbalken nur Desktop (JS rendert sie dort ohnehin nicht) */

  /* Terminliste unter dem Kalender einblenden */
  .evlist { display:block; }
  .evrow .tag { display:inline-block; font-size:12px; padding:5px 10px; }

  /* Preis-Tags in der Geräte-Liste bleiben sichtbar */
  .devrow .tag { display:inline-block; font-size:12px; padding:5px 10px; }

  /* Modal mobil */
  .modal { padding:18px 16px calc(18px + env(safe-area-inset-bottom)); border-radius:20px; }
  .modal-actions { flex-wrap:wrap; }
  .btn-ghost, .btn-primary { flex:1; } /* Buttons nebeneinander ausfüllen */

  /* Login-Panel mobil → zentriert (wie Desktop), kompaktere Ränder;
     Tastatur-Aufruf übernimmt das visualViewport-Handling in login.js */
  .login-panel-wrap { padding:16px 14px; }
}

/* sehr schmale Screens: Datumsfelder stapeln */
@media (max-width:400px) {
  .field-row { grid-template-columns:1fr; }
  /* Kontakt-Zeile bleibt zweispaltig (Werte sind kurz, kein fixes UI wie bei Datumsfeldern) */
  .field-row--contact { grid-template-columns:1fr 1fr; }
}

/* sehr, sehr schmal (<340px): auch Kontakt stapeln */
@media (max-width:339px) {
  .field-row--contact { grid-template-columns:1fr; }
}

@media (prefers-reduced-motion:reduce) {
  * { transition:none !important; }
  .login-card.shake, .login-bg__glow, .ln-flow use, .ln-nodes circle { animation:none !important; } /* Shake + Hintergrund-Bewegung aus */
}