/* =============================================================
   Kundenraum · Angebots-Annahme
   Eigene, deutlich abgesetzte Sektion: weiße Karte mit warmem
   Akzent, Headline, Checkbox, Namensfeld, primärer Annahme-Knopf.
   Nach Annahme zeigt die Karte eine Quittung mit Häkchen.
   ============================================================= */
.cl-offer-block {
  margin-top:8px;
}
.cl-offer-card {
  background:#fff;
  border:.5px solid var(--line);
  border-left:3px solid var(--accent);
  border-radius:var(--r-xl);
  box-shadow:var(--shadow-card);
  padding:24px 26px 22px;
  margin-bottom:18px;
}
.cl-offer-card + .cl-offer-card {
  margin-top:14px;
}
.cl-offer-head {
  margin-bottom:18px;
}
.cl-offer-eyebrow {
  font-size:11px;
  font-weight:600;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--accent);
  margin-bottom:6px;
}
.cl-offer-title {
  font-family:var(--font-serif);
  font-size:22px;
  line-height:1.25;
  color:var(--ink);
  margin:0 0 10px;
}
.cl-offer-body {
  font-size:13.5px;
  line-height:1.65;
  color:var(--text-2);
  max-width:58ch;
}
.cl-offer-form {
  display:flex;
  flex-direction:column;
  gap:12px;
  margin-top:6px;
}
.cl-offer-check {
  display:flex;
  align-items:flex-start;
  gap:10px;
  font-size:13px;
  line-height:1.5;
  color:var(--text-1);
  background:var(--paper);
  border:.5px solid var(--line);
  border-radius:var(--r-lg);
  padding:12px 14px;
  cursor:pointer;
}
.cl-offer-check input[type="checkbox"] {
  margin-top:2px;
  width:16px;
  height:16px;
  accent-color:var(--accent);
  flex-shrink:0;
}
.cl-offer-check strong {
  font-weight:600;
  color:var(--ink);
}
.cl-offer-name {
  display:flex;
  flex-direction:column;
  gap:4px;
  font-size:11.5px;
  color:var(--text-2);
}
.cl-offer-name input {
  font-size:14px;
  padding:10px 12px;
  border:.5px solid var(--line-2);
  border-radius:var(--r-lg);
  background:#fff;
  color:var(--ink);
}
.cl-offer-name input:focus {
  outline:none;
  border-color:var(--accent);
}
.cl-offer-btn {
  align-self:flex-start;
  margin-top:4px;
  font-size:14px;
  padding:11px 22px;
}
.cl-offer-btn:disabled {
  opacity:.45;
  cursor:not-allowed;
}
.cl-offer-hint {
  font-size:11.5px;
  color:var(--text-3);
  line-height:1.55;
  max-width:58ch;
}

/* Bestätigte Variante */
.cl-offer-card--confirmed {
  border-left-color:var(--teal, #2A8C7F);
  background:#F6FBF9;
}
.cl-offer-confirm {
  display:flex;
  align-items:flex-start;
  gap:14px;
}
.cl-offer-confirm-ico {
  color:var(--teal, #2A8C7F);
  font-size:24px;
  flex-shrink:0;
  margin-top:2px;
}
.cl-offer-confirm-title {
  font-family:var(--font-serif);
  font-size:18px;
  font-weight:600;
  color:var(--ink);
  margin-bottom:4px;
}
.cl-offer-confirm-meta {
  font-size:12px;
  color:var(--text-2);
  margin-bottom:8px;
}
.cl-offer-confirm-note {
  font-size:13px;
  line-height:1.6;
  color:var(--text-2);
}

/* =============================================================
   Admin · Stationen-Sidebar
   Pro Station: Titel + Status-Tag, darunter Aktions-Knopf
   ("Für Kunden freischalten" / "Verbergen") oder die Bestätigungs-
   Meta-Zeile ("Name · vor X Min.").
   ============================================================= */
.station-row {
  padding:10px 0;
  border-bottom:.5px solid var(--line);
}
.station-row:last-child { border-bottom:none; }
.station-row-head {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  margin-bottom:4px;
}
.station-row-title {
  font-size:11.5px;
  font-weight:500;
  color:var(--ink);
  flex:1;
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.station-tag {
  font-size:10px;
  font-weight:600;
  padding:2px 8px;
  border-radius:10px;
  letter-spacing:.04em;
  white-space:nowrap;
  display:inline-flex;
  align-items:center;
  gap:3px;
}
.station-tag svg { font-size:10px; }
.station-tag--inactive {
  color:var(--text-3);
  background:var(--surface);
}
.station-tag--active {
  color:var(--accent-dark);
  background:#FCE9E4;
}
.station-tag--confirmed {
  color:#1F6F5A;
  background:#DAF1E6;
}
.station-row-meta {
  font-size:10.5px;
  color:var(--text-3);
  margin-top:2px;
}
.station-toggle {
  font-size:11px;
  padding:5px 10px;
}

/* Hinweis "öffnet in neuem Tab" — sehr dezent neben dem regulären
   Hinweistext in der Konzept-Karte. */
.cl-concept-tab-hint {
  color:var(--text-3);
  font-size:11px;
  white-space:nowrap;
}

/* =============================================================
   Kundenraum · Unterschriftsfeld in der Annahme-Sektion
   Zwei Tabs: Zeichnen (Canvas) und Bild hochladen. Beides optional.
   ============================================================= */
.cl-offer-signature-area {
  background:var(--paper);
  border:.5px solid var(--line);
  border-radius:var(--r-lg);
  padding:14px;
}
.cl-offer-signature-head {
  font-size:12.5px;
  font-weight:600;
  color:var(--ink);
  margin-bottom:10px;
}
.cl-offer-signature-opt {
  font-weight:400;
  color:var(--text-3);
  font-size:11.5px;
  margin-left:4px;
}
.cl-signature-tabs {
  display:flex;
  gap:0;
  border:.5px solid var(--line);
  border-radius:8px;
  overflow:hidden;
  margin-bottom:12px;
  background:#fff;
  width:fit-content;
}
.cl-signature-tab {
  border:none;
  background:transparent;
  padding:7px 14px;
  font-size:12px;
  color:var(--text-2);
  cursor:pointer;
  border-right:.5px solid var(--line);
}
.cl-signature-tab:last-child { border-right:none; }
.cl-signature-tab.is-active {
  background:var(--accent);
  color:#fff;
}
.cl-signature-pane {
  display:none;
}
.cl-signature-pane.is-active {
  display:block;
}
.cl-signature-canvas {
  display:block;
  width:100%;
  max-width:520px;
  height:180px;
  background:#fff;
  border:1.5px dashed #C7CBD3;
  border-radius:10px;
  touch-action:none;        /* damit Touch-Scroll nicht stört */
  cursor:crosshair;
  box-shadow:inset 0 0 0 1px rgba(192, 57, 43, 0.05),
             0 1px 3px rgba(0, 0, 0, 0.04);
  transition:border-color .25s ease, box-shadow .25s ease;
}
.cl-signature-canvas:hover {
  border-color:var(--accent);
  box-shadow:inset 0 0 0 1px rgba(192, 57, 43, 0.10),
             0 2px 8px rgba(192, 57, 43, 0.08);
}
/* Aktiver Zustand: kein Demo-Text mehr, neutrale Linie */
.cl-signature-canvas.has-ink {
  border-style:solid;
  border-color:var(--ink);
  box-shadow:none;
}
/* Sanftes Pulsen, solange noch kein Strich gesetzt ist —
   nur visuell, nicht beweglich, damit Maus-Hover ungestört bleibt. */
@keyframes cl-sig-pulse {
  0%, 100% { box-shadow:inset 0 0 0 1px rgba(192, 57, 43, 0.05),
                       0 1px 3px rgba(0, 0, 0, 0.04); }
  50%      { box-shadow:inset 0 0 0 1px rgba(192, 57, 43, 0.15),
                       0 2px 10px rgba(192, 57, 43, 0.10); }
}
.cl-signature-canvas:not(.has-ink) {
  animation:cl-sig-pulse 2.6s ease-in-out infinite;
}
.cl-signature-canvas:not(.has-ink):hover,
.cl-signature-canvas:not(.has-ink):focus {
  animation:none;
}
.cl-signature-pane-foot {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin-top:8px;
}
.cl-signature-hint {
  font-size:11px;
  color:var(--text-3);
}
.cl-signature-upload {
  display:block;
  font-size:12.5px;
  padding:8px 0;
}

/* Unterschriftsanzeige in der Quittung */
.cl-offer-confirm-body {
  flex:1;
  min-width:0;
}
.cl-offer-signature {
  margin:10px 0;
  padding:8px 10px;
  background:#fff;
  border:.5px solid var(--line);
  border-radius:8px;
  display:inline-block;
}
.cl-offer-signature-label {
  font-size:10.5px;
  color:var(--text-3);
  letter-spacing:.06em;
  text-transform:uppercase;
  margin-bottom:4px;
}
.cl-offer-signature-img {
  display:block;
  max-width:280px;
  max-height:80px;
  height:auto;
}

/* Live-Preview der hochgeladenen Unterschrift —
   wird sofort sichtbar, sobald der Kunde eine Datei wählt. */
.cl-signature-preview {
  display:block;
  margin:12px 0 8px;
  max-width:380px;
  max-height:150px;
  height:auto;
  background:#fff;
  border:.5px solid var(--line);
  border-radius:8px;
  padding:8px;
}

/* Admin · Zugriffs-Detailzeile mit Endgerät-Info */
.tok-access-row {
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:10px;
  padding:5px 0;
  border-bottom:.5px dotted var(--line);
  font-size:11px;
}
.tok-access-row:last-child { border-bottom:none; }
.tok-access-row-main {
  flex:1;
  min-width:0;
}
.tok-access-action {
  color:var(--text-1);
  font-weight:500;
}
.tok-access-device {
  color:var(--text-3);
  font-size:10.5px;
  margin-left:2px;
}
.tok-access-time {
  color:var(--text-3);
  font-size:10.5px;
  white-space:nowrap;
  flex-shrink:0;
  text-align:right;
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  line-height:1.3;
}
.tok-access-time-main {
  color:var(--ink);
  font-weight:500;
  font-variant-numeric:tabular-nums;
}
.tok-access-time-ago {
  color:var(--text-3);
  font-size:9.5px;
}
.tok-access-line-ago {
  color:var(--text-3);
  font-size:10.5px;
  font-weight:400;
  margin-left:2px;
}

/* Admin · Klick-Zähler pro Datei in der Versionen-Liste */
.file-clicks {
  display:inline-flex;
  align-items:center;
  gap:3px;
  font-size:10px;
  color:var(--text-3);
  background:var(--surface);
  padding:2px 7px;
  border-radius:8px;
  white-space:nowrap;
}
.file-clicks svg {
  font-size:11px;
  opacity:.6;
}

/* Admin · Klartext-IP in der bestätigten Station */
.station-row-meta-ip {
  font-size:10px;
  color:var(--text-3);
  font-family:ui-monospace, "SF Mono", Menlo, monospace;
}

/* =============================================================
   Admin · Mail-Vorschau
   Zweispaltiges Layout: links Editor, rechts Live-Vorschau.
   Auf engen Bildschirmen stapelt sich's automatisch.
   ============================================================= */
.mail-grid {
  display:grid;
  grid-template-columns:minmax(0, 1fr) minmax(0, 1fr);
  gap:16px;
  align-items:start;
}
@media (max-width:960px) {
  .mail-grid { grid-template-columns:1fr; }
}

.mail-editor,
.mail-preview {
  border-radius:var(--r-lg);
  background:#fff;
  box-shadow:var(--shadow-card);
  overflow:hidden;
}

.mail-field {
  display:flex;
  flex-direction:column;
  gap:5px;
}
.mail-field-label {
  font-size:11px;
  font-weight:600;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:var(--text-3);
}
.mail-field input[type="text"],
.mail-field textarea {
  font-size:13px;
  font-family:inherit;
  line-height:1.55;
  padding:9px 11px;
  border:.5px solid var(--line-2);
  border-radius:7px;
  background:#fff;
  color:var(--ink);
  width:100%;
  resize:vertical;
}
.mail-field textarea {
  font-family:ui-monospace, "SF Mono", Menlo, monospace;
  font-size:12.5px;
  min-height:240px;
}
.mail-field input:focus,
.mail-field textarea:focus {
  outline:none;
  border-color:var(--accent);
}
.mail-field-hint {
  font-size:11px;
  color:var(--text-3);
  line-height:1.5;
}
.mail-actions {
  display:flex;
  gap:8px;
  align-items:center;
  flex-wrap:wrap;
  margin-top:4px;
}

.mail-preview-meta {
  padding-bottom:12px;
  margin-bottom:14px;
  border-bottom:.5px solid var(--line);
}
.mail-preview-from {
  font-size:11.5px;
  color:var(--text-3);
  margin-bottom:6px;
}
.mail-preview-from span { margin-right:4px; }
.mail-preview-from strong {
  color:var(--ink);
  font-weight:600;
}
.mail-preview-subject {
  font-size:16px;
  font-family:var(--font-serif);
  font-weight:500;
  color:var(--ink);
  line-height:1.3;
}
.mail-preview-body {
  font-size:13px;
  line-height:1.65;
  color:var(--text-1);
}
.mail-preview-body p {
  margin-bottom:12px;
}
.mail-preview-body a {
  color:var(--accent);
  word-break:break-word;
}
.mail-preview-body img {
  max-width:100%;
  height:auto;
}
.mail-preview-frame {
  display:block;
  width:100%;
  height:680px;
  border:none;
  background:#eee;
}
.mail-preview-status {
  font-size:11px;
  color:var(--text-3);
  font-style:italic;
}

/* =============================================================
   Admin · Reset-Karte
   Versteckt sich hinter einem Details-Klappelement: ist nichts,
   was man häufig braucht, aber wenn doch, soll es deutlich vor
   Augen führen, was passiert.
   ============================================================= */
.reset-card {
  border:.5px solid var(--line);
  border-radius:7px;
  padding:0;
  margin-top:14px;
  background:#fff;
}
.reset-card[open] {
  border-color:#E5B8B0;
  background:#FCF7F5;
}
.reset-summary {
  list-style:none;
  cursor:pointer;
  padding:10px 14px;
  font-size:11.5px;
  font-weight:600;
  color:var(--text-2);
  display:flex;
  align-items:center;
  gap:7px;
}
.reset-summary::-webkit-details-marker { display:none; }
.reset-summary svg { font-size:13px; opacity:.7; }
.reset-card[open] .reset-summary {
  color:#A93226;
  border-bottom:.5px solid #E5B8B0;
}
.reset-body {
  padding:14px;
}
.reset-intro {
  font-size:12px;
  line-height:1.55;
  color:var(--text-2);
  margin-bottom:12px;
}
.reset-list-head {
  font-size:10.5px;
  font-weight:600;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:var(--text-3);
  margin:10px 0 4px;
}
.reset-list {
  list-style:disc;
  padding-left:18px;
  font-size:11.5px;
  line-height:1.55;
  color:var(--text-2);
  margin:0 0 6px;
}
.reset-list-keep li { color:var(--text-2); }
.reset-confirm {
  display:flex;
  flex-direction:column;
  gap:5px;
  margin:14px 0 10px;
}
.reset-confirm span {
  font-size:11px;
  color:var(--text-2);
}
.reset-confirm strong {
  font-family:ui-monospace, "SF Mono", Menlo, monospace;
  color:#A93226;
  letter-spacing:.05em;
}
.reset-confirm input {
  font-family:ui-monospace, "SF Mono", Menlo, monospace;
  font-size:13px;
  padding:7px 10px;
  border:.5px solid var(--line-2);
  border-radius:6px;
  background:#fff;
  letter-spacing:.06em;
}
.reset-confirm input:focus {
  outline:none;
  border-color:#A93226;
}

/* Danger-Button-Variante */
.btn-danger {
  background:#A93226;
  color:#fff;
  border-color:#A93226;
}
.btn-danger:hover:not(:disabled) {
  background:#8E2A20;
  border-color:#8E2A20;
}
.btn-danger:disabled {
  opacity:.4;
  cursor:not-allowed;
}

/* =============================================================
   Admin · Mail-Vorlagen-Switch (Pill-Variante)
   Statt eines klassischen Selects: jede Vorlage als kleiner
   Klick-Knopf. Die aktive Vorlage ist farblich hervorgehoben.
   ============================================================= */
.tpl-switch-card {
  background:#fff;
  border:.5px solid var(--line);
  border-radius:10px;
  padding:11px 14px;
  margin-bottom:16px;
  display:flex;
  align-items:center;
  gap:14px;
  flex-wrap:wrap;
  box-shadow:var(--shadow-card);
}
.tpl-switch-label {
  display:flex;
  align-items:center;
  gap:6px;
  font-size:11px;
  font-weight:600;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:var(--text-3);
}
.tpl-switch-label svg {
  font-size:14px;
  opacity:.7;
}
.tpl-switch-pills {
  display:flex;
  gap:6px;
  flex-wrap:wrap;
  flex:1;
}
.tpl-switch-pill {
  display:inline-flex;
  align-items:center;
  gap:5px;
  padding:6px 13px;
  border-radius:18px;
  border:.5px solid var(--line-2);
  background:#fff;
  color:var(--text-1);
  font-size:12.5px;
  font-weight:500;
  cursor:pointer;
  transition:background .15s, border-color .15s, color .15s;
  font-family:inherit;
  line-height:1.4;
}
.tpl-switch-pill svg {
  font-size:13px;
}
.tpl-switch-pill:hover:not(.is-active) {
  border-color:var(--accent);
  color:var(--accent);
  background:rgba(192,57,43,.04);
}
.tpl-switch-pill.is-active {
  background:var(--accent);
  border-color:var(--accent);
  color:#fff;
  cursor:default;
}
.tpl-switch-pill.is-active svg {
  color:#fff;
}