/* kunden-admin-termine.css (21.10.2026) — Admin-Seite /kunden/admin/termine/: Tage mit Terminen, Kästen für Apple und iCloud.
   Farben und Flächen kommen aus konto-app.css (ld-*) und kunden-admin.css (kpa-mail*).
   Ganz unten: Kalenderansicht (26.10.2026), Präfixe tm-k- (Monat und gemeinsame Teile) und tm-w- (Woche). */
.tm-tag{ margin: 0 0 18px }
.tm-tag-kopf{ margin: 0 0 8px; font-size: 13px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--ld-text-2) }
.tm-liste{ display: flex; flex-direction: column; gap: 8px }
.tm-termin{ display: grid; grid-template-columns: 76px minmax(0, 1fr) auto; gap: 14px; align-items: center; padding: 12px 16px;
  border: 1px solid var(--ld-rand); border-left-width: 3px; border-radius: 12px; background: var(--ld-flaeche, rgba(11,13,22,0.022)) }
.tm-termin--gelb{ border-left-color: #d4a106 }
.tm-termin--gruen{ border-left-color: #16a34a }
.tm-termin--blau{ border-left-color: #3b82f6 }
.tm-termin--grau{ border-left-color: #8a91a3; opacity: .75 }
.tm-termin--iphone{ border-left-color: #0891b2 }   /* 01.11.2026: iPhone-Termine („Arbeit“, „Privat“) */
.tm-zeit b.tm-zeit-ganz{ font-size: 13px; white-space: nowrap }
.tm-zeit{ display: flex; flex-direction: column; font-variant-numeric: tabular-nums }
.tm-zeit b{ font-size: 18px }
.tm-zeit span{ font-size: 12px; color: var(--ld-text-2) }
.tm-haupt{ min-width: 0 }
.tm-haupt h3{ margin: 0 0 6px; font-size: 16px; overflow-wrap: anywhere }
.tm-meta{ margin: 0; display: flex; flex-wrap: wrap; gap: 6px }
.tm-notiz{ margin: 8px 0 0; font-size: 14px; color: var(--ld-text-2); overflow-wrap: anywhere }
.tm-knoepfe{ justify-content: flex-start }
.tm-frage{ margin-top: 12px; display: flex; flex-direction: column; gap: 10px }
.tm-kasten-reihe{ display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 14px; margin-top: 26px }
.tm-kasten h2{ margin: 0 0 6px; font-size: 17px }
.tm-feed{ display: flex; gap: 8px; margin: 12px 0 }
.tm-feed input{ flex: 1 1 auto; min-width: 0; padding: 10px 12px; border-radius: 10px; border: 1px solid var(--ld-rand); background: rgba(11,13,22,0.08);
  color: var(--ld-text); font: 13px/1.4 ui-monospace, SFMono-Regular, Menlo, monospace }
.tm-schritte{ margin: 8px 0; padding-left: 20px; font-size: 14px; line-height: 1.6; color: var(--ld-text-2) }
.tm-schritte b{ color: var(--ld-text) }
.tm-ic-stand{ display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 14px }
@media (max-width: 640px){
  .tm-termin{ grid-template-columns: 58px minmax(0, 1fr); }
  .tm-termin > button{ grid-column: 1 / -1; justify-self: start }
  .tm-feed{ flex-direction: column }
}

/* ---------- Private Zeiten blocken (22.10.2026, privat blocken (René)) ----------
   Abschnitt zwischen den Terminen und den Kästen unten: links „Neue Zeit blocken“ in drei Schritten, rechts „Schon geblockt“.
   Bei schmalen Fenstern untereinander. Felder 16 px auf dem Handy, sonst zoomt das iPhone beim Antippen. */
.tm-zahl-knopf{ appearance: none; -webkit-appearance: none; text-align: left; font: inherit; color: inherit; cursor: pointer }
.tm-zahl-knopf:hover{ border-color: var(--ld-rand-stark); background: var(--ld-flaeche-2) }
.tm-zahl-knopf.ld-zahl--an:hover{ background: #e9e0fd }
.tm-zahl-knopf:focus-visible{ outline: 2px solid var(--zk-akzent); outline-offset: 2px }
.tm-zahl-tun{ margin-top: 4px; font-size: 12.5px; font-weight: 600; color: var(--ld-link) }

.tm-privat{ display: flex; flex-direction: column; gap: 12px; margin-top: 18px; scroll-margin-top: 16px }
.tm-privat-kopf h2{ margin: 0 0 4px; font-family: inherit; font-size: 20px; font-weight: 700; line-height: 1.3; letter-spacing: 0; text-transform: none; color: var(--ld-text) }
.tm-privat-kopf p{ margin: 0; max-width: 78ch; font-size: 14.5px; line-height: 1.55; color: var(--ld-text-2) }
.tm-privat-raster{ display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); gap: 14px; align-items: start }
.tm-privat-karte{ display: flex; flex-direction: column; gap: 16px; min-width: 0; padding: 18px 20px; border-radius: 14px; background: var(--ld-flaeche); border: 1px solid var(--ld-rand) }
.tm-privat-karte h3{ display: flex; align-items: center; gap: 8px; margin: 0; font-family: inherit; font-size: 16px; font-weight: 700; letter-spacing: 0; text-transform: none; color: var(--ld-text) }
.tm-leise{ margin: 0; font-size: 13px; line-height: 1.5; color: var(--ld-text-3) }

/* Drei Schritte */
.tm-schritt{ display: flex; flex-direction: column; gap: 8px; min-width: 0; margin: 0; padding: 0; border: 0 }
.tm-schritt-titel{ display: flex; align-items: center; gap: 10px; margin: 0; padding: 0; font-size: 14.5px; font-weight: 600; color: var(--ld-text) }
.tm-schritt-titel small{ font-size: 12.5px; font-weight: 500; color: var(--ld-text-3) }
.tm-nr{ flex: none; display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 50%;
  border: 1px solid rgba(124,58,237,.6); background: rgba(106,44,216,.16); color: #5b21b6; font-size: 12.5px; font-weight: 700; font-variant-numeric: tabular-nums }
.tm-privat input[type="date"], .tm-privat input[type="time"], .tm-privat input[type="text"]{
  display: block; width: 100%; min-width: 0; min-height: 44px; box-sizing: border-box; margin: 0; padding: 0 12px; border: 1px solid var(--ld-rand-stark);
  border-radius: 10px; background: var(--ld-flaeche-2); color: var(--ld-text); font: inherit; font-size: 15px; color-scheme: dark }
.tm-privat input::-webkit-date-and-time-value{ text-align: left }
.tm-privat input::placeholder{ color: var(--ld-text-3) }
.tm-privat input[type="date"]:focus, .tm-privat input[type="time"]:focus, .tm-privat input[type="text"]:focus{ outline: none; border-color: #7c3aed; box-shadow: 0 0 0 3px rgba(124,58,237,.22) }
.tm-wahl{ display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px }
.tm-wahl-knopf{ position: relative; display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 8px 12px; box-sizing: border-box;
  border: 1px solid var(--ld-rand-stark); border-radius: 10px; cursor: pointer; font-size: 14.5px; font-weight: 600; color: var(--ld-text-2) }
.tm-wahl-knopf input{ flex: none; width: 16px; height: 16px; margin: 0; accent-color: #7c3aed }
.tm-wahl-knopf:hover{ background: var(--ld-flaeche-2) }
.tm-wahl-knopf:has(input:checked){ border-color: #7c3aed; background: rgba(124,58,237,.12); color: var(--ld-text) }
.tm-wahl-knopf:has(input:focus-visible){ outline: 2px solid var(--zk-akzent); outline-offset: 2px }
.tm-zeitfelder{ display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 10px }
.tm-zeitfelder[hidden]{ display: none }
.tm-zeitfelder .tm-leise{ grid-column: 1 / -1 }
.tm-feld{ display: flex; flex-direction: column; gap: 5px; min-width: 0; font-size: 13px; font-weight: 600; color: var(--ld-text-2) }
.tm-feld--breit{ grid-column: 1 / -1 }
.tm-privat-los{ display: flex }
.tm-privat-los .ld-neu-knopf{ margin-left: 0 }
.tm-privat-meldung{ margin: -6px 0 0; color: #fcd34d }

/* Zusammenfassung vor dem Eintragen; scroll-margin: „Ja, so blocken“ landet beim Hinscrollen nicht unter der Meldung unten (.ld-toast) */
#tmPrivatPruefung{ scroll-margin-bottom: 96px }
.tm-pruef{ display: flex; flex-direction: column; gap: 12px; padding: 14px 16px; border-radius: 12px; border: 1px solid rgba(124,58,237,.55); background: rgba(124,58,237,.07) }
.tm-pruef--offen{ border-color: rgba(212,161,6,.55); background: rgba(212,161,6,.06) }
.tm-pruef-kopf{ margin: 0; font-size: 12.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--ld-text-2) }
.tm-pruef-satz{ display: flex; flex-direction: column; gap: 2px; margin: 0; font-size: 15px; color: var(--ld-text-2) }
.tm-pruef-satz b{ font-size: 17px; color: var(--ld-text); overflow-wrap: anywhere }
.tm-pruef-anlass{ color: var(--ld-text); overflow-wrap: anywhere }
.tm-pruef-fragen{ margin: 0; padding-left: 20px; font-size: 14px; line-height: 1.55; color: var(--ld-text) }
.tm-pruef-knoepfe{ display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px }
.tm-pruef-knoepfe .ld-details{ width: auto; padding: 0 16px; min-height: 42px }
.tm-pruef-knoepfe .ld-neu-knopf{ margin-left: 0 }
.tm-konflikt{ display: flex; flex-direction: column; gap: 8px; padding: 12px 14px; border-radius: 10px; border: 1px solid rgba(234,108,16,.55); background: rgba(234,108,16,.08) }
.tm-konflikt-kopf{ margin: 0; font-size: 14px; font-weight: 700; color: #a8430a }
.tm-konflikt ul{ display: flex; flex-direction: column; gap: 6px; margin: 0; padding: 0; list-style: none }
.tm-konflikt li{ display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 12px; font-size: 14px; color: var(--ld-text) }
.tm-konflikt li > span{ min-width: 0; overflow-wrap: anywhere }
.tm-konflikt .ld-link{ font-size: 13.5px }

/* Schon geblockt */
.tm-bloecke{ display: flex; flex-direction: column; gap: 8px; margin: 0; padding: 0; list-style: none }
.tm-block{ display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "wann tun" "anlass tun" "meta tun" "meldung meldung";
  gap: 4px 12px; align-items: center; padding: 12px 14px; border: 1px solid var(--ld-rand); border-left: 3px solid #7c3aed; border-radius: 12px; background: var(--ld-flaeche-2) }
.tm-block--jetzt{ border-left-color: #d4a106 }
.tm-block-wann{ grid-area: wann; display: flex; flex-direction: column; min-width: 0 }
.tm-block-wann b{ font-size: 15px; color: var(--ld-text); overflow-wrap: anywhere }
.tm-block-wann span{ font-size: 13.5px; color: var(--ld-text-2) }
.tm-block-anlass{ grid-area: anlass; margin: 0; font-size: 14px; color: var(--ld-text); overflow-wrap: anywhere }
.tm-block-anlass.tm-leise{ font-size: 13px; font-style: italic }
.tm-block-meta{ grid-area: meta; display: flex; flex-wrap: wrap; gap: 6px; margin: 2px 0 0 }
.tm-block-meta:empty{ display: none }
.tm-block-tun{ grid-area: tun; display: flex; flex-direction: column; align-items: flex-end; gap: 8px; max-width: 280px }
.tm-block-tun > .ld-details{ width: auto; padding: 0 14px }
.tm-block-frage{ margin: 0; font-size: 13.5px; line-height: 1.45; color: var(--ld-text); text-align: right }
.tm-block-meldung{ grid-area: meldung; margin: 0; color: #fcd34d }
.tm-privat-leer{ margin: 0; padding: 16px; border: 1px dashed var(--ld-rand-stark); border-radius: 12px; font-size: 14px; color: var(--ld-text-2) }
/* Abgleich mit Section Monsters gestört (Gegenprüfung 22.10.2026): nur sichtbar, wenn privatAbgleich.fehler gesetzt ist */
#tmPrivatAbgleich:empty{ display: none }
.tm-abgleich{ display: flex; flex-direction: column; gap: 6px; padding: 12px 14px; border-radius: 10px; border: 1px solid rgba(220,38,38,.55); background: rgba(220,38,38,.08) }
.tm-abgleich p{ margin: 0; font-size: 14px; line-height: 1.5; color: var(--ld-text); overflow-wrap: anywhere }
.tm-abgleich .tm-abgleich-kopf{ font-weight: 700; color: #a51c1c }
.tm-abgleich .tm-leise{ font-size: 13px; color: var(--ld-text-3) }

@media (max-width: 640px){
  .tm-privat-karte{ padding: 16px 14px }
  .tm-privat input[type="date"], .tm-privat input[type="time"], .tm-privat input[type="text"]{ font-size: 16px }
  .tm-privat-los .ld-neu-knopf, .tm-pruef-knoepfe > *{ flex: 1 1 auto }
  .tm-block{ grid-template-columns: minmax(0, 1fr); grid-template-areas: "wann" "anlass" "meta" "tun" "meldung" }
  .tm-block-tun{ align-items: stretch; max-width: none; margin-top: 6px }
  .tm-block-tun > .ld-details{ width: 100% }
  .tm-block-frage{ text-align: left }
}

/* ---------- Kalenderansicht (26.10.2026) ----------
   Schalter „Liste | Kalender“ oben (#tmAnsicht, ld-ansichten wie im Projektboard), darunter #tmKalender: Monat oder Woche.
   Töne wie in der Liste: Gelb wartet auf dich, Grün bestätigt, Blau Link offen, Grau abgesagt, Violett privat (ld-ton--<ton> setzt --ton).
   Nicht nur Farbe: „Wartet auf dich“ hat einen gestrichelten Rand, „Abgesagt“ ist durchgestrichen und blasser.
   Bis 720 px (wie konto-app.css): Monat = Raster mit Punkten + Tagesliste darunter, Woche = Liste je Tag. */
.tm-ansicht{ align-self: flex-start }
.tm-ansicht .ld-ansicht svg{ width: 16px; height: 16px }
#tmSchnell[hidden], #tmInhalt[hidden], #tmKalender[hidden]{ display: none }
.tm-kal{ --ton: #8a91a3; display: flex; flex-direction: column; gap: 12px; min-width: 0 }

.tm-k-kopf{ display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px }
.tm-k-nav{ display: inline-flex; gap: 6px }
.tm-k-nav .ld-details{ display: inline-flex; align-items: center; justify-content: center; width: auto; min-width: 44px; min-height: 42px; padding: 0 14px; box-sizing: border-box }
.tm-k-titel{ flex: 1 1 200px; min-width: 0; margin: 0; font-family: inherit; font-size: 20px; font-weight: 700; line-height: 1.3; letter-spacing: 0; text-transform: none; color: var(--ld-text) }
.tm-k-titel small{ margin-left: 6px; font-size: 13px; font-weight: 600; color: var(--ld-text-3) }
.tm-k-modus .ld-ansicht{ min-height: 38px }
.tm-k-status{ margin: 0; font-size: 14px; color: var(--ld-text-2) }
.tm-k-status--fehler{ padding: 10px 14px; border-radius: 10px; border: 1px solid rgba(220,38,38,.55); background: rgba(220,38,38,.08); color: var(--ld-text) }

/* Eintrag als Pille (Monat) */
.tm-k-pille{ appearance: none; -webkit-appearance: none; display: flex; align-items: center; gap: 5px; min-width: 0; min-height: 22px; margin: 0; padding: 1px 6px;
  box-sizing: border-box; border: 1px solid color-mix(in srgb, var(--ton) 55%, transparent); border-left: 3px solid var(--ton); border-radius: 6px;
  background: color-mix(in srgb, var(--ton) 15%, transparent); color: var(--ld-text); font: inherit; font-size: 12px; line-height: 1.3; text-align: left; cursor: pointer }
.tm-k-pille:hover{ background: color-mix(in srgb, var(--ton) 30%, transparent) }
.tm-k-pille:focus-visible, .tm-k-zeile:focus-visible, .tm-w-eintrag:focus-visible, .tm-k-nr:focus-visible, .tm-w-tag:focus-visible, .tm-k-mehr:focus-visible{ outline: 2px solid var(--zk-akzent); outline-offset: 1px }
.tm-k-pille b{ flex: none; font-weight: 700; font-variant-numeric: tabular-nums }
.tm-k-pille i, .tm-w-eintrag i{ flex: none; font-style: normal; font-size: 10px; font-weight: 700; letter-spacing: .04em; color: var(--ld-text-3) }
.tm-k-pille span{ min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
.tm-k-pille--wartet, .tm-w-eintrag--wartet{ border-style: dashed; border-left-style: solid }
.tm-k-pille--aus, .tm-w-eintrag--aus, .tm-k-zeile--aus{ opacity: .6 }
.tm-k-pille--aus span, .tm-w-eintrag--aus, .tm-k-zeile--aus .tm-k-text b{ text-decoration: line-through }
/* Ganztägig privat: Band über den Tag; setzt es sich im Nachbartag fort (--l / --r), laufen die Bänder ineinander */
.tm-k-pille--band{ --rl: 6px; --rr: 6px; position: relative; z-index: 1; border-radius: var(--rl) var(--rr) var(--rr) var(--rl);
  background: repeating-linear-gradient(135deg, rgba(124,58,237,.26) 0 6px, rgba(124,58,237,.14) 6px 12px) }
.tm-k-pille--band span{ font-weight: 600; color: #5b21b6 }
.tm-k-pille--l{ --rl: 0; margin-left: -5px; padding-left: 9px; border-left-width: 1px }
.tm-k-pille--r{ --rr: 0; margin-right: -5px; border-right-width: 0 }

/* Monat */
.tm-k-monat{ display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 1px; border: 1px solid var(--ld-rand); border-radius: 12px; overflow: hidden; background: var(--ld-rand) }
.tm-k-wt{ padding: 8px 4px; background: var(--ld-flaeche-2); text-align: center; font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--ld-text-2) }
.tm-k-zelle{ position: relative; display: flex; flex-direction: column; gap: 4px; min-width: 0; min-height: 116px; padding: 4px; background: var(--ld-flaeche); cursor: pointer }
.tm-k-zelle--fremd{ background: var(--ld-flaeche-2) }
.tm-k-zelle--fremd .tm-k-nr{ color: var(--ld-text-3) }
.tm-k-zelle--vorbei{ cursor: default }
.tm-k-zelle--vorbei .tm-k-liste{ opacity: .8 }
.tm-k-zelle:not(.tm-k-zelle--vorbei):hover{ background: var(--ld-flaeche-2) }
.tm-k-nr{ appearance: none; -webkit-appearance: none; align-self: flex-start; min-width: 28px; height: 28px; margin: 0; padding: 0 6px; box-sizing: border-box; border: 0; border-radius: 14px;
  background: none; color: var(--ld-text-2); font: inherit; font-size: 13px; font-weight: 600; font-variant-numeric: tabular-nums; cursor: inherit }
.tm-k-zelle--heute .tm-k-nr{ background: #6a2cd8; color: #fff }
.tm-k-nr:disabled, .tm-w-tag:disabled{ cursor: default }
.tm-k-liste{ display: flex; flex-direction: column; gap: 3px; min-width: 0 }
.tm-k-mehr{ appearance: none; -webkit-appearance: none; align-self: flex-start; margin: 0; padding: 2px 4px; border: 0; background: none; color: var(--ld-link); font: inherit; font-size: 12px; font-weight: 600; cursor: pointer; text-decoration: underline; text-underline-offset: 2px }
.tm-k-punkte{ display: none }
.tm-k-tagliste{ display: none }
@media (min-width: 721px) and (max-width: 1200px){
  /* schmale Tage: RK/SM weglassen, damit vom Namen etwas übrig bleibt (steht weiter im Tooltip und im Panel) */
  .tm-k-pille i{ display: none }
  .tm-k-pille{ gap: 4px; padding: 1px 4px }
}
@media (min-width: 721px){
  /* Hinweis beim Darüberfahren: in schmalen Tagen nur „+“ (der Text lag über der Tageszahl), erst ab breiten Tagen mit Text */
  .tm-k-zelle:not(.tm-k-zelle--vorbei):hover::after{ content: "+"; position: absolute; top: 7px; right: 9px; font-size: 16px; line-height: 1; color: var(--ld-text-3); pointer-events: none }
}
@media (min-width: 1360px){
  .tm-k-zelle:not(.tm-k-zelle--vorbei):hover::after{ content: "+ Zeit blocken"; top: 11px; right: 8px; font-size: 11px }
}

/* Tagesliste (Handy: gewählter Tag im Monat, jeder Tag der Woche) */
.tm-k-tag{ display: flex; flex-direction: column; gap: 8px; padding: 14px; border-radius: 12px; border: 1px solid var(--ld-rand); background: var(--ld-flaeche) }
.tm-k-tag--heute{ border-color: rgba(29,78,216,.5) }
.tm-k-tagkopf{ display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 12px }
.tm-k-tagkopf h3{ margin: 0; font-family: inherit; font-size: 16px; font-weight: 700; line-height: 1.3; letter-spacing: 0; text-transform: none; color: var(--ld-text) }
.tm-k-tagkopf .ld-details{ width: auto; min-height: 38px; padding: 0 14px }
.tm-k-zeilen{ display: flex; flex-direction: column; gap: 8px }
.tm-k-zeile{ appearance: none; -webkit-appearance: none; display: grid; grid-template-columns: 66px minmax(0, 1fr); gap: 12px; align-items: center; width: 100%; min-height: 52px; margin: 0; padding: 10px 12px; box-sizing: border-box;
  border: 1px solid var(--ld-rand); border-left: 3px solid var(--ton); border-radius: 10px; background: var(--ld-flaeche-2); color: var(--ld-text); font: inherit; text-align: left; cursor: pointer }
.tm-k-zeile:hover{ background: var(--ld-flaeche-3) }
.tm-k-zeit{ display: flex; flex-direction: column; font-size: 13px; line-height: 1.3; font-variant-numeric: tabular-nums }
.tm-k-zeit b{ font-size: 16px }
.tm-k-zeit .tm-k-zeit-ganz{ font-size: 13px; line-height: 1.3 }
.tm-k-zeit span{ font-size: 12px; color: var(--ld-text-2) }
.tm-k-text{ display: flex; flex-direction: column; min-width: 0; gap: 1px }
.tm-k-text b{ font-size: 15px; overflow-wrap: anywhere }
.tm-k-text span{ font-size: 13px; color: var(--ld-text-2); overflow-wrap: anywhere }
.tm-k-zeile--wartet{ border-style: dashed; border-left-style: solid }

/* Legende */
.tm-k-fuss{ display: flex; flex-direction: column; gap: 6px }
.tm-k-legende{ display: flex; flex-wrap: wrap; gap: 6px 16px; margin: 0; padding: 0; list-style: none; font-size: 13px; color: var(--ld-text-2) }
.tm-k-legende li{ display: inline-flex; align-items: center; gap: 7px }
.tm-k-leg{ display: inline-block; width: 14px; height: 14px; box-sizing: border-box; border-radius: 4px; border: 1px solid var(--ton); border-left-width: 3px; background: color-mix(in srgb, var(--ton) 25%, transparent) }
.tm-k-leg--wartet{ border-style: dashed; border-left-style: solid }
.tm-k-handy{ display: none }

/* Woche (ab 721 px: Stundenraster 7–21 Uhr) */
.tm-w-raster{ display: flex; flex-direction: column; min-width: 0; border: 1px solid var(--ld-rand); border-radius: 12px; overflow: hidden; background: var(--ld-flaeche) }
.tm-w-zeile{ display: grid; grid-template-columns: 54px repeat(7, minmax(0, 1fr)); min-width: 0 }
.tm-w-kopf{ background: var(--ld-flaeche-2); border-bottom: 1px solid var(--ld-rand) }
.tm-w-eck{ display: flex; align-items: center; justify-content: flex-end; padding: 0 6px; font-size: 10.5px; line-height: 1.1; color: var(--ld-text-3); hyphens: manual }
.tm-w-tag{ appearance: none; -webkit-appearance: none; display: flex; flex-direction: column; align-items: center; gap: 2px; margin: 0; padding: 8px 2px; border: 0; border-left: 1px solid var(--ld-rand); background: none; color: var(--ld-text-2);
  font: inherit; font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; cursor: pointer }
.tm-w-tag b{ min-width: 30px; height: 30px; padding: 0 4px; box-sizing: border-box; border-radius: 15px; font-size: 17px; line-height: 30px; letter-spacing: 0; color: var(--ld-text); font-variant-numeric: tabular-nums }
.tm-w-tag--vorbei{ cursor: default }
.tm-w-tag--vorbei b{ color: var(--ld-text-2) }
.tm-w-tag--heute b{ background: #6a2cd8; color: #fff }
.tm-w-tag:not(.tm-w-tag--vorbei):hover{ background: var(--ld-flaeche-3) }
.tm-w-ganz{ border-bottom: 1px solid var(--ld-rand); min-height: 32px }
.tm-w-ganz-tag{ display: flex; flex-direction: column; gap: 3px; min-width: 0; padding: 4px; border-left: 1px solid var(--ld-rand); cursor: pointer }
.tm-w-koerper{ position: relative }
.tm-w-achse{ position: relative }
.tm-w-std{ position: absolute; right: 6px; padding-top: 2px; font-size: 11px; line-height: 1; font-variant-numeric: tabular-nums; color: var(--ld-text-3) }
.tm-w-spalte{ position: relative; border-left: 1px solid var(--ld-rand); cursor: pointer;
  background-image: repeating-linear-gradient(to bottom, transparent 0 47px, var(--ld-rand) 47px 48px) }
.tm-w-spalte--heute{ background-color: rgba(29,78,216,.05) }
.tm-w-spalte--vorbei{ cursor: default }
.tm-w-eintrag{ appearance: none; -webkit-appearance: none; position: absolute; display: block; margin: 0; padding: 2px 5px; box-sizing: border-box; overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--ton) 60%, transparent); border-left: 3px solid var(--ton); border-radius: 6px;
  background: color-mix(in srgb, var(--ton) 22%, var(--ld-flaeche)); color: var(--ld-text); font: inherit; font-size: 12px; line-height: 1.3; text-align: left; cursor: pointer; z-index: 1 }
.tm-w-eintrag:hover{ background: color-mix(in srgb, var(--ton) 36%, var(--ld-flaeche)); z-index: 3 }
.tm-w-eintrag b{ font-weight: 700; font-variant-numeric: tabular-nums }
.tm-w-eintrag--privat{ background: repeating-linear-gradient(135deg, rgba(124,58,237,.28) 0 6px, rgba(124,58,237,.16) 6px 12px) }
/* Private Stücke, die über den Rand des Rasters hinauslaufen: gestrichelte Kante dort, wo es weitergeht */
.tm-w-eintrag--davor{ border-top: 2px dashed var(--ton) }
.tm-w-eintrag--danach{ border-bottom: 2px dashed var(--ton) }
.tm-w-jetzt{ position: absolute; left: 0; right: 0; z-index: 2; height: 2px; margin-top: -1px; background: #dc2626; pointer-events: none }
.tm-w-jetzt::before{ content: ""; position: absolute; left: -4px; top: -3px; width: 8px; height: 8px; border-radius: 50%; background: #dc2626 }
.tm-w-liste{ display: none }

@media (max-width: 720px){
  .tm-k-titel{ flex-basis: 100%; order: -1; font-size: 18px }
  .tm-k-modus{ margin-left: auto }
  /* Monat: Raster mit Punkten, Einträge stehen in der Tagesliste darunter */
  .tm-k-zelle{ align-items: center; min-height: 54px; gap: 2px; padding: 3px 1px 4px }
  .tm-k-liste{ display: none }
  .tm-k-nr{ align-self: center; min-width: 34px; height: 34px; border-radius: 17px; font-size: 14px }
  .tm-k-zelle--vorbei .tm-k-nr{ color: var(--ld-text-3) }
  .tm-k-zelle--gewaehlt .tm-k-nr{ box-shadow: inset 0 0 0 2px var(--zk-akzent); color: var(--ld-text) }
  .tm-k-zelle--heute.tm-k-zelle--gewaehlt .tm-k-nr{ box-shadow: inset 0 0 0 2px var(--zk-akzent) }
  .tm-k-punkte{ display: flex; align-items: center; justify-content: center; gap: 3px; min-height: 8px; max-width: 100%; overflow: hidden }
  .tm-k-punkt{ width: 7px; height: 7px; border-radius: 50%; background: var(--ton) }
  .tm-k-punkt--aus{ background: none; border: 1px solid var(--ton); box-sizing: border-box }
  .tm-k-punkte u{ font-size: 10px; line-height: 1; text-decoration: none; color: var(--ld-text-3) }
  .tm-k-tagliste{ display: block }
  .tm-k-wt{ padding: 6px 0; font-size: 11px; letter-spacing: 0 }
  /* Woche: eine Liste je Tag statt Stundenraster */
  .tm-w-raster{ display: none }
  .tm-w-liste{ display: flex; flex-direction: column; gap: 10px }
  .tm-k-tag{ padding: 12px }
  .tm-k-pc{ display: none }
  .tm-k-handy{ display: inline }
}
@media (max-width: 380px){
  .tm-k-nav .ld-details{ min-width: 40px; padding: 0 10px }
}

/* ---------- Termin-Wecker und iPhone-Kalender (27.10.2026, konzept/2026-10-27-termin-wecker.md, Baustein W4) ----------
   René hat den bestätigten Termin mit Tischflamme.de verpasst: „sowas darf natürlich nie wieder passieren“. Beide Kästen legt
   kunden-admin-termine.js selbst an: #tmWecker oben über den Kennzahlen (Präfix tm-wk-), #tmIphone vor den Kästen unten (tm-ip-).
   Schalter wie im Büro (.bu-schalter, hier .tm-schalter, weil die Büro-Stile auf dieser Seite fehlen). Stufen als Chips:
   grün erledigt, gelb nur teilweise (27.10.2026: vorher grün, obwohl z. B. die WhatsApp fehlte), blau kommt noch, grau nicht nötig/aus,
   rot hat nicht geklappt — immer mit Text, nie nur Farbe. */
.tm-wk{ margin: 0 0 18px }
.tm-ip{ margin-top: 18px }
.tm-wk h2, .tm-ip h2{ margin: 0; font-family: inherit; font-size: 20px; font-weight: 700; line-height: 1.3; letter-spacing: 0; text-transform: none; color: var(--ld-text) }
.tm-wk-kopf{ display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px }
.tm-wk-text{ margin: 0; max-width: 78ch; font-size: 14.5px; line-height: 1.55; color: var(--ld-text-2) }
.tm-wk-raster{ display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); gap: 18px 22px; align-items: start }
.tm-wk-spalte{ display: flex; flex-direction: column; gap: 12px; min-width: 0 }
.tm-wk-unter{ margin: 4px 0 0; font-family: inherit; font-size: 13px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--ld-text-2) }
.tm-wk-probe{ display: flex; flex-direction: column; align-items: flex-start; gap: 6px }
.tm-wk-probe .ld-details, .tm-wk-tun .ld-details, .tm-wk-tun .ld-neu-knopf{ width: auto; min-height: 40px; padding: 0 16px; margin-left: 0 }

.tm-schalter-liste{ display: flex; flex-direction: column; gap: 6px }
.tm-schalter{ display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; min-height: 48px; padding: 8px 12px; box-sizing: border-box;
  border-radius: 10px; cursor: pointer; text-align: left; background: var(--ld-flaeche-2); border: 1px solid var(--ld-rand); color: var(--ld-text); font: inherit }
.tm-schalter:hover{ border-color: var(--ld-text-3) }
.tm-schalter:focus-visible{ outline: 2px solid var(--zk-akzent); outline-offset: 2px }
.tm-schalter[disabled]{ opacity: .6; cursor: default }
.tm-schalter span{ display: flex; flex-direction: column; min-width: 0 }
.tm-schalter b{ font-size: 14px; font-weight: 600 }
.tm-schalter small{ font-size: 12.5px; color: var(--ld-text-3) }
.tm-schalter em{ flex: none; min-width: 38px; padding: 2px 8px; border-radius: 99px; text-align: center; font-style: normal; font-size: 12px; font-weight: 700;
  color: var(--ld-text-3); border: 1px solid var(--ld-rand-stark) }
.tm-schalter[aria-pressed="true"] em{ color: #16a34a; border-color: rgba(22,163,74,.55); background: rgba(22,163,74,.12) }

/* Nächste 24 Stunden */
.tm-wk-liste{ display: flex; flex-direction: column; gap: 8px }
.tm-wk-termin{ display: grid; grid-template-columns: 62px minmax(0, 1fr); grid-template-areas: "zeit haupt" "zeit tun"; gap: 8px 12px; padding: 12px 14px;
  border: 1px solid var(--ld-rand); border-left: 3px solid #3b82f6; border-radius: 12px; background: var(--ld-flaeche-2) }
.tm-wk-termin--bereit{ border-left-color: #16a34a }
.tm-wk-termin .tm-zeit{ grid-area: zeit }
.tm-wk-termin .tm-haupt{ grid-area: haupt }
.tm-wk-termin h4{ margin: 0 0 6px; font-size: 15px; font-weight: 700; color: var(--ld-text); overflow-wrap: anywhere }
.tm-wk-stufen{ display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0 0; padding: 0; list-style: none }
.tm-wk-stufe{ --ton: #8a91a3; display: flex; flex-direction: column; gap: 1px; padding: 4px 9px; border-radius: 8px; border: 1px solid color-mix(in srgb, var(--ton) 55%, transparent);
  background: color-mix(in srgb, var(--ton) 12%, transparent); font-size: 12px; line-height: 1.3 }
.tm-wk-stufe b{ font-weight: 700; color: var(--ld-text) }
.tm-wk-stufe span{ color: var(--ld-text-2) }
.tm-wk-stufe--fertig{ --ton: #16a34a }
.tm-wk-stufe--kommt{ --ton: #3b82f6 }
.tm-wk-stufe--fehler{ --ton: #dc2626 }
.tm-wk-stufe--teilweise{ --ton: #d4a106 }   /* 27.10.2026: nur ein Teil kam an, gelb wie „Wartet auf dich“ */
.tm-wk-stufe--laeuft{ --ton: #8a91a3 }      /* 27.10.2026: „läuft gerade“ (status laeuft, auch hängengeblieben) — neutral grau, nie grün */
.tm-wk-stand{ margin: 0 }                  /* „Stand von HH:MM“, wenn das Terminbuch gerade nicht antwortet (27.10.2026) */
.tm-wk-stufe--aus{ border-style: dashed; opacity: .8 }
.tm-wk-tun{ grid-area: tun; display: flex; flex-wrap: wrap; gap: 8px }
.tm-wk-tun:empty{ display: none }

/* iPhone-Kalender */
.tm-ip-schritte{ display: flex; flex-direction: column; gap: 16px; margin: 4px 0 0; padding: 0; list-style: none }
.tm-ip-schritte > li{ display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: 12px; align-items: start }
.tm-ip-schritte > li > div{ display: flex; flex-direction: column; gap: 6px; min-width: 0 }
.tm-ip-schritte b{ font-size: 15px; color: var(--ld-text) }
.tm-ip-schritte p{ margin: 0; font-size: 14px; line-height: 1.55; color: var(--ld-text-2) }
.tm-ip-schritte p b{ font-size: inherit }
.tm-ip-schritte code{ padding: 1px 5px; border-radius: 5px; background: var(--ld-flaeche-2); font: 13px/1.4 ui-monospace, SFMono-Regular, Menlo, monospace; color: var(--ld-text) }
.tm-ip-felder{ display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); gap: 10px 12px; max-width: 640px }
.tm-ip-form input{ display: block; width: 100%; min-width: 0; min-height: 44px; box-sizing: border-box; margin: 0; padding: 0 12px; border: 1px solid var(--ld-rand-stark);
  border-radius: 10px; background: var(--ld-flaeche-2); color: var(--ld-text); font: inherit; font-size: 15px; color-scheme: dark }
.tm-ip-form input:focus{ outline: none; border-color: #7c3aed; box-shadow: 0 0 0 3px rgba(124,58,237,.22) }
.tm-ip-los{ display: flex }
.tm-ip-los .ld-neu-knopf{ margin-left: 0 }
.tm-ip-trennen{ display: flex; flex-direction: column; align-items: flex-start; gap: 8px }
.tm-ip-trennen .tm-pruef{ align-self: stretch }
.tm-ip-wahl b{ color: var(--ld-text) }      /* Trennen: Termine im iPhone lassen oder löschen (27.10.2026) */
.tm-ip-kalender{ display: flex; flex-direction: column; gap: 8px; margin: 0; padding: 0; list-style: none }
.tm-ip-kalender li{ display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 14px; padding: 10px 12px;
  border: 1px solid var(--ld-rand); border-radius: 10px; background: var(--ld-flaeche-2) }
.tm-ip-kalender li > b{ min-width: 0; font-size: 14.5px; overflow-wrap: anywhere }
.tm-ip-modus .ld-ansicht{ min-height: 38px }
#tmIphoneWecken{ display: flex; flex-direction: column; gap: 8px }
#tmIphoneWecken:empty, #tmIphoneStand:empty{ display: none }
#tmIphoneStand{ display: flex; flex-direction: column; gap: 10px }

@media (max-width: 640px){
  .tm-wk-termin{ grid-template-columns: 54px minmax(0, 1fr); grid-template-areas: "zeit haupt" "tun tun" }
  .tm-wk-tun > *{ flex: 1 1 auto }
  .tm-ip-form input{ font-size: 16px }
  .tm-ip-kalender li{ flex-direction: column; align-items: stretch }
  .tm-ip-modus{ display: flex }
  .tm-ip-modus .ld-ansicht{ flex: 1 1 0 }
}
/* Eigene Kartenfläche: kpv-projekt hat auf dieser Seite keine Stile (kunden-portal.css ist hier nicht eingebunden) */
.tm-wk, .tm-ip{ display: flex; flex-direction: column; gap: 14px; padding: 18px 20px; border-radius: 14px; background: var(--ld-flaeche); border: 1px solid var(--ld-rand) }
.tm-ip-schritte a, .tm-wk-text a{ color: var(--ld-link); text-decoration: underline; text-underline-offset: 2px }
@media (max-width: 640px){ .tm-wk, .tm-ip{ padding: 16px 14px } }

/* ---------- Nachfassung, wenn ein Kunde nicht erscheint (27./28.10.2026, konzept/2026-10-28-nachfassung-nicht-erschienen.md, Baustein N3) ----------
   René: „dazu brauchen wir einen schalter (button oder so), dass er nicht anwesend war.“ Präfix tm-nf-. Knopf „Kunde nicht erschienen …“
   in der Terminzeile (dann stehen beide Knöpfe in .tm-termin-tun übereinander) und im Termin-Panel; Seitenpanel mit Vorschau (kpa-mail-*
   wie Bestätigen/Absagen); Kasten #tmNachfass unter den Terminen, gebaut wie der Termin-Wecker (tm-wk-*, .tm-schalter). */
.tm-termin-tun{ display: flex; flex-direction: column; align-items: stretch; gap: 6px; min-width: 0 }
.tm-nf-knopf{ border-color: rgba(234,108,16,.6) }
.tm-nf-knopf:hover{ background: rgba(234,108,16,.12) }
.tm-nf-panelteil{ display: flex; flex-direction: column; gap: 8px; margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--ld-rand) }
.tm-nf-panelteil .kp-klein{ margin: 0 }
.tm-nf-anmelden{ max-width: 46ch; margin: 0 0 14px }

/* Seitenpanel */
.tm-nf{ display: flex; flex-direction: column; gap: 12px; margin-top: 12px }
.tm-nf .kp-klein{ margin: 0 }
.tm-nf .tm-frage{ margin-top: 0 }
.tm-nf-text{ padding: 12px 14px; border-radius: 10px; border: 1px solid var(--ld-rand); background: var(--ld-flaeche-2); color: var(--ld-text);
  font-size: 14px; line-height: 1.55; white-space: pre-wrap; overflow-wrap: anywhere }
.tm-nf-plan{ display: flex; flex-direction: column; gap: 8px; padding: 14px 16px; border-radius: 12px; border: 1px solid rgba(124,58,237,.55); background: rgba(124,58,237,.07) }
.tm-nf-plan ol{ display: flex; flex-direction: column; gap: 6px; margin: 0; padding-left: 20px; font-size: 14px; line-height: 1.55; color: var(--ld-text) }
.tm-nf-plan b{ color: var(--ld-text) }
.tm-nf-mail2{ border: 1px solid var(--ld-rand); border-radius: 12px; background: var(--ld-flaeche-2) }
.tm-nf-mail2 > summary, .tm-nf-erledigt > summary{ min-height: 44px; display: flex; align-items: center; padding: 0 14px; cursor: pointer; font-size: 14px; font-weight: 600; color: var(--ld-text) }
.tm-nf-mail2 > summary:focus-visible, .tm-nf-erledigt > summary:focus-visible{ outline: 2px solid var(--zk-akzent); outline-offset: 2px; border-radius: 10px }
.tm-nf-mail2[open] > summary{ border-bottom: 1px solid var(--ld-rand) }
.tm-nf-mail2 > .kpa-mail-betreff, .tm-nf-mail2 > .tm-nf-text{ margin: 12px 14px }
.tm-nf-frei{ margin: 0; font-size: 14px; font-weight: 700; color: var(--ld-text) }
.tm-nf .kpa-mail-knoepfe + .tm-leise{ text-align: right }

/* Kasten „Nachfassungen“ */
.tm-nf-kasten{ display: flex; flex-direction: column; gap: 14px; margin-top: 18px; padding: 18px 20px; border-radius: 14px; background: var(--ld-flaeche); border: 1px solid var(--ld-rand) }
.tm-nf-kasten h2{ margin: 0; font-family: inherit; font-size: 20px; font-weight: 700; line-height: 1.3; letter-spacing: 0; text-transform: none; color: var(--ld-text) }
.tm-nf-fall{ --ton: #3b82f6; display: flex; flex-direction: column; gap: 6px; padding: 12px 14px; border: 1px solid var(--ld-rand); border-left: 3px solid var(--ton);
  border-radius: 12px; background: var(--ld-flaeche-2) }
.tm-nf-fall--gelb{ --ton: #d4a106 }
.tm-nf-fall--rot{ --ton: #dc2626 }
.tm-nf-fall--gruen{ --ton: #16a34a }
.tm-nf-fall--grau{ --ton: #8a91a3 }
.tm-nf-fall h4{ margin: 0; font-size: 15px; font-weight: 700; color: var(--ld-text); overflow-wrap: anywhere }
.tm-nf-daten{ display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 3px 12px; margin: 4px 0 0; font-size: 13.5px; line-height: 1.45 }
.tm-nf-daten dt{ color: var(--ld-text-3) }
.tm-nf-daten dd{ margin: 0; color: var(--ld-text); overflow-wrap: anywhere }
.tm-nf-fall .tm-wk-tun{ margin-top: 4px }
.tm-nf-fall-meldung{ margin: 0; color: #fcd34d }
.tm-nf-fall-meldung:empty{ display: none }
.tm-nf-erledigt{ border: 1px dashed var(--ld-rand-stark); border-radius: 12px }
.tm-nf-erledigt[open] > .tm-wk-liste{ padding: 0 10px 10px }
.tm-nf-erledigt .tm-nf-fall{ opacity: .85 }
#tmNachfassMeldung:empty{ display: none }

@media (max-width: 640px){
  .tm-termin > .tm-termin-tun{ grid-column: 1 / -1; flex-direction: row; flex-wrap: wrap }
  .tm-termin-tun > *{ flex: 1 1 auto; width: auto }
  .tm-nf-kasten{ padding: 16px 14px }
  .tm-nf-daten{ grid-template-columns: minmax(0, 1fr); gap: 0 }
  .tm-nf-daten dd{ margin-bottom: 4px }
  .tm-nf .kpa-mail-knoepfe > *{ flex: 1 1 auto }
  .tm-nf .kpa-mail-knoepfe + .tm-leise{ text-align: left }
}

/* ---------- Reiter „Termine“ | „Einstellungen“ (28.10.2026) ----------
   René: „der kalenderbereich mit listing und allem ganz oben … die einstellungen … eher auf einer einstellungsseite im tab Termine“.
   Leiste wie in der Buchhaltung (.ld-leiste + .ld-ansichten, role=tablist), darunter zwei Reiterflächen (.tm-reiter). Die Bereiche darin
   stehen mit dem Abstand der Fläche (gap) untereinander, ihre eigenen Außenabstände von früher (über/unter den Terminen) fallen weg.
   Auf dem Handy füllen die beiden Reiter die Breite, je mindestens 44 px hoch. */
.tm-reiterleiste .ld-ansicht{ min-height: 42px; padding: 0 18px; font-size: 15px }
.tm-reiterleiste .ld-ansicht:focus-visible{ outline: 2px solid var(--zk-akzent); outline-offset: 2px }
.tm-reiter{ display: flex; flex-direction: column; gap: 16px; min-width: 0 }
.tm-reiter[hidden]{ display: none }
.tm-reiter > .tm-wk, .tm-reiter > .tm-ip, .tm-reiter > .tm-privat, .tm-reiter > .tm-nf-kasten, .tm-reiter > .tm-kasten-reihe{ margin: 0 }
#tmTeilTermine > #tmWecker{ margin-top: 10px }
#tmPrivat{ scroll-margin-top: 16px }
.tm-wk-aus{ display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 14px; padding: 12px 14px; border-radius: 10px;
  border: 1px solid rgba(212,161,6,.55); background: rgba(212,161,6,.06) }
.tm-wk-aus p{ margin: 0; min-width: 0; font-size: 14px; line-height: 1.5; color: var(--ld-text); overflow-wrap: anywhere }
.tm-wk-aus .ld-details{ width: auto; min-height: 40px; padding: 0 16px; display: inline-flex; align-items: center; text-decoration: none }
.tm-nf-kasten .tm-leise a{ color: var(--ld-link); text-decoration: underline; text-underline-offset: 2px }
@media (max-width: 640px){
  .tm-reiterleiste .ld-ansichten{ display: flex; width: 100% }
  .tm-reiterleiste .ld-ansicht{ flex: 1 1 0; justify-content: center; min-height: 44px; padding: 0 10px }
  .tm-wk-aus .ld-details{ flex: 1 1 auto; justify-content: center }
}
/* Zweiklang (30.10.2026): Themenauswahl im Reiter „Einstellungen“, immer nur ein Kasten sichtbar */
.tm-einst-nav{ margin: 0 0 14px }
.tm-einst-aus{ display: none !important }

/* 01.11.2026: Ganztägiger iPhone-Termin als türkises Band statt des violetten „Privat geblockt“ */
.tm-k-pille--band.tm-k-pille--iphone{ background: repeating-linear-gradient(135deg, rgba(8,145,178,.24) 0 6px, rgba(8,145,178,.12) 6px 12px) }
.tm-k-pille--band.tm-k-pille--iphone span{ color: #0e7490 }

/* 01.11.2026: Neuer Termin (Reiter Arbeit | Privat) und Ziehen im Kalender */
.tm-neu-reiter{ display: grid; grid-template-columns: 1fr 1fr; gap: 4px; padding: 4px; margin: 0 0 16px; border-radius: 12px; background: var(--ld-flaeche-3) }
.tm-neu-reiter-knopf{ min-height: 40px; border: 0; border-radius: 9px; background: transparent; color: var(--ld-text-2); font: inherit; font-weight: 600; cursor: pointer }
.tm-neu-reiter-knopf--an{ background: var(--ld-flaeche); color: var(--ld-text); box-shadow: var(--zk-schatten) }
.tm-neu-reiter-knopf:focus-visible{ outline: 2px solid var(--zk-akzent); outline-offset: 2px }
.tm-neu{ display: grid; gap: 12px }
.tm-neu textarea{ resize: vertical; font: inherit }
.tm-neu-ganz{ display: inline-flex; align-items: center; gap: 8px; font-weight: 500; cursor: pointer }
.tm-k-tagknoepfe{ display: inline-flex; flex-wrap: wrap; gap: 6px }
@media (hover: hover) and (pointer: fine){
  .tm-k-pille[data-kal-iphone], .tm-w-eintrag[data-kal-iphone]{ cursor: grab }
  .tm-w-spalte:not(.tm-w-spalte--vorbei){ cursor: copy }
  .tm-w-spalte:not(.tm-w-spalte--vorbei) > .tm-w-eintrag{ cursor: pointer }
  .tm-w-spalte:not(.tm-w-spalte--vorbei) > .tm-w-eintrag[data-kal-iphone]{ cursor: grab }
}
.tm-zieht{ z-index: 5; opacity: .9; box-shadow: var(--zk-schatten-hoch); cursor: grabbing !important }
.tm-zieht-gerade, .tm-zieht-gerade *{ user-select: none; -webkit-user-select: none; cursor: grabbing !important }
.tm-k-zelle.tm-ziel{ outline: 2px dashed var(--zk-akzent); outline-offset: -2px; background: var(--zk-akzent-hell) }

/* 01.11.2026: Felder wie bei „Private Zeiten blocken“ — dort jetzt auch Auswahllisten (15-Minuten-Takt) */
.tm-privat select, .tm-neu input[type="date"], .tm-neu input[type="text"], .tm-neu input[type="url"], .tm-neu input:not([type]), .tm-neu select, .tm-neu textarea{
  display: block; width: 100%; min-width: 0; min-height: 44px; box-sizing: border-box; margin: 0; padding: 0 12px; border: 1px solid var(--ld-rand-stark);
  border-radius: 10px; background: var(--ld-flaeche-2); color: var(--ld-text); font: inherit; font-size: 15px; color-scheme: dark }
.tm-privat select:focus, .tm-neu input:focus, .tm-neu select:focus, .tm-neu textarea:focus{ outline: none; border-color: #7c3aed; box-shadow: 0 0 0 3px rgba(124,58,237,.22) }
.tm-neu input[type="checkbox"]{ width: 16px; height: 16px; margin: 0; accent-color: #7c3aed }
.tm-neu input, .tm-neu select, .tm-neu textarea{ color-scheme: light }
.tm-neu textarea{ padding: 10px 12px; min-height: 84px }

/* ── Panels auf der Termine-Seite (01.11.2026, René: „die panels sehen so ungestylt aus“) ── */
.tm-pk-held{ display: grid; gap: 2px; margin: 0 0 18px; padding: 16px 18px; border-radius: 16px; border-left: 4px solid var(--ton, #8a91a3);
  background: color-mix(in srgb, var(--ton, #8a91a3) 9%, #ffffff) }
.tm-pk-tag{ font-size: 12.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--ld-text-2) }
.tm-pk-zeit{ font-family: var(--zk-titel); font-size: 26px; font-weight: 600; line-height: 1.2; letter-spacing: -.01em; color: var(--ld-text); font-variant-numeric: tabular-nums }
.tm-pk-marken{ display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px }
.tm-pk-unter{ margin-top: 4px; font-size: 14px; color: var(--ld-text-2) }
.tm-pk-zeilen{ margin: 0 0 18px; border: 1px solid var(--ld-rand); border-radius: 14px; overflow: hidden }
.tm-pk-zeilen > div{ display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 12px; padding: 11px 14px; border-top: 1px solid var(--ld-rand) }
.tm-pk-zeilen > div:first-child{ border-top: 0 }
.tm-pk-zeilen dt{ margin: 0; font-size: 13px; font-weight: 600; color: var(--ld-text-3) }
.tm-pk-zeilen dd{ margin: 0; min-width: 0; font-size: 15px; color: var(--ld-text); overflow-wrap: anywhere }
.tm-pk-zeilen a{ color: var(--ld-link) }
@media (max-width: 480px){ .tm-pk-zeilen > div{ grid-template-columns: 1fr; gap: 2px } }
.tm-pk-fuss{ position: sticky; bottom: 0; z-index: 2; display: flex; flex-wrap: wrap; gap: 8px; margin: 18px -2px 0; padding: 14px 2px calc(14px + env(safe-area-inset-bottom, 0px));
  border-top: 1px solid var(--ld-rand); background: #ffffff }
.tm-pk-fuss .zk-knopf{ flex: 1 1 auto }
.tm-pk-fuss--innen{ position: static; margin: 12px 0 0; padding: 0; border-top: 0; background: transparent }
.tm-pk-frage{ margin: 0 0 14px; padding: 14px 16px; border-radius: 14px; border: 1px solid var(--ld-rand-stark); background: var(--ld-flaeche-2) }
.tm-pk-frage p{ margin: 0 0 8px }
.tm-pk-hinweis{ display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 14px; font-size: 14px; color: var(--ld-text-2) }
.tm-knopf-gefahr{ color: #b42318 !important }
.tm-knopf-gefahr:hover{ background: #fef3f2 !important }
.tm-knopf-rot{ background: #d92d20 !important; color: #fff !important }
.tm-knopf-rot:hover{ background: #b42318 !important }
.tm-neu-zeile{ display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 12px }
.tm-neu-zeile .tm-neu-ganz{ min-height: 44px }
.tm-neu-punkt{ display: inline-block; width: 9px; height: 9px; margin-right: 7px; border-radius: 50%; vertical-align: 1px }
.tm-neu-punkt--arbeit{ background: #d946ef }
.tm-neu-punkt--privat{ background: #0891b2 }

/* Vergangenes ausgegraut (01.11.2026, René: „alle vergangen termine müssten bitte ausgegraut sein“) */
.tm-vorbei{ opacity: .45; filter: grayscale(1) }
.tm-vorbei:hover, .tm-vorbei:focus-visible{ opacity: .8 }

/* ── Kacheln oben: Arbeit | Privat | Alle (01.11.2026) ── */
.tm-kz-raster{ display: grid !important; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)) !important; gap: 14px !important }
.tm-kz{ display: flex; flex-direction: column; gap: 12px; padding: 18px 20px; border: 1px solid var(--ld-rand); border-radius: 18px; background: var(--ld-flaeche); box-shadow: var(--zk-schatten) }
.tm-kz--arbeit{ --kz: #6a2cd8 } .tm-kz--privat{ --kz: #0891b2 } .tm-kz--alle{ --kz: #0b0d16; background: var(--zk-leiste); border-color: var(--zk-leiste); color: #eef0f8 }
.tm-kz-titel{ display: flex; align-items: center; gap: 8px; margin: 0; font-family: var(--zk-titel); font-size: 16px; font-weight: 600 }
.tm-kz-punkt{ width: 10px; height: 10px; border-radius: 50%; background: var(--kz) }
.tm-kz-zahlen{ display: grid; grid-template-columns: 1fr 1fr; gap: 10px }
.tm-kz-zahlen--eins{ grid-template-columns: 1fr }
.tm-kz-zahlen > div{ display: flex; flex-direction: column; gap: 2px; padding: 12px 14px; border-radius: 12px; background: color-mix(in srgb, var(--kz) 8%, #fff) }
.tm-kz--alle .tm-kz-zahlen > div{ background: rgba(255,255,255,.07) }
.tm-kz-zahlen b{ font-family: var(--zk-titel); font-size: 30px; line-height: 1.1; font-variant-numeric: tabular-nums; color: var(--kz) }
.tm-kz--alle .tm-kz-zahlen b{ color: #fff; font-size: 38px }
.tm-kz-zahlen span{ font-size: 13px; color: var(--ld-text-2) }
.tm-kz--alle .tm-kz-zahlen span, .tm-kz-fuss{ color: #b9bfd0 }
.tm-kz-fuss{ margin: 0; font-size: 13px }
.tm-kz-tun{ align-self: flex-start; padding: 0; border: 0; background: none; color: var(--ld-link); font: inherit; font-size: 14px; font-weight: 600; cursor: pointer }
.tm-kz-tun--gelb{ padding: 6px 10px; border-radius: 999px; background: #fdf3d3; color: #7a5300 }
.tm-kz-tun:focus-visible{ outline: 2px solid var(--zk-akzent); outline-offset: 2px }

/* Private Zeiten: Abstand zwischen „Von … bis | Ganzer Tag“ und den Feldern (01.11.2026) */
#tmPZeit, #tmPTage{ margin-top: 14px }

/* ── Kalenderabo und Buchbare Zeiten (01.11.2026) ── */
.tm-ab-raster{ display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 16px; align-items: start }
.tm-ab-karte{ display: flex; flex-direction: column; gap: 14px; min-width: 0; padding: 22px; border: 1px solid var(--ld-rand); border-radius: 18px; background: var(--ld-flaeche); box-shadow: var(--zk-schatten) }
.tm-ab-kopf{ display: flex; gap: 14px; align-items: flex-start }
.tm-ab-kopf h2{ margin: 0; font-size: 19px }
.tm-ab-kopf p{ margin: 2px 0 0; font-size: 14px; color: var(--ld-text-2) }
.tm-ab-symbol{ flex: none; display: grid; place-items: center; width: 42px; height: 42px; border-radius: 12px; background: var(--zk-akzent-hell); color: var(--zk-akzent) }
.tm-ab-symbol--gruen{ background: #e7f6ec; color: #16a34a }
.tm-ab-symbol svg{ width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round }
.tm-ab-text{ margin: 0; font-size: 15px; color: var(--ld-text-2) }
.tm-ab-feld{ display: flex; gap: 8px; min-width: 0 }
.tm-ab-feld input{ flex: 1 1 auto; min-width: 0; min-height: 44px; padding: 0 12px; border: 1px solid var(--ld-rand-stark); border-radius: 10px; background: var(--ld-flaeche-2);
  color: var(--ld-text-2); font: 13px/1 ui-monospace, SFMono-Regular, Menlo, monospace; text-overflow: ellipsis }
.tm-ab-schritte{ display: grid; gap: 10px; margin: 0; padding: 0; list-style: none }
.tm-ab-schritte li{ display: flex; gap: 10px; align-items: flex-start; font-size: 14.5px; color: var(--ld-text) }
.tm-ab-fuss{ display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; padding-top: 14px; border-top: 1px solid var(--ld-rand) }
.tm-ab-chips{ display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 8px; margin: 0; padding: 0; list-style: none }
.tm-ab-chips li{ display: flex; flex-direction: column; gap: 2px; padding: 10px 12px; border-radius: 12px; background: var(--ld-flaeche-2); border: 1px solid var(--ld-rand) }
.tm-ab-chips span{ font-size: 12.5px; color: var(--ld-text-3) }
.tm-ab-chips b{ font-size: 15px; color: var(--ld-text) }

/* ── iPhone-Kalender: Kennzahlen und Gefahrenzone (01.11.2026) ── */
.tm-ip-zahlen{ display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 10px; margin: 6px 0 18px }
.tm-ip-zahl{ display: flex; flex-direction: column; gap: 3px; min-width: 0; padding: 14px 16px; border: 1px solid var(--ld-rand); border-radius: 14px; background: var(--ld-flaeche-2) }
.tm-ip-zahl span{ font-size: 12.5px; font-weight: 600; letter-spacing: .03em; text-transform: uppercase; color: var(--ld-text-3) }
.tm-ip-zahl b{ font-size: 17px; color: var(--ld-text); overflow-wrap: anywhere }
.tm-ip-zahl small{ font-size: 12.5px; color: var(--ld-text-2) }
.tm-gefahr{ margin-top: 22px; padding: 16px 18px; border: 1px solid #f4c7c3; border-radius: 14px; background: #fef6f5 }
.tm-gefahr p{ margin: 0 0 8px; color: var(--ld-text-2); font-size: 14.5px }
.tm-gefahr .tm-gefahr-titel{ margin: 0 0 4px; color: #b42318; font-weight: 700; font-size: 15.5px }
.tm-gefahr-zeile{ display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px }
.tm-gefahr-zeile p{ margin: 0 }
.tm-gefahr-wahl{ display: grid; gap: 8px; margin: 12px 0; padding: 0; border: 0 }
.tm-gefahr-wahl legend{ margin-bottom: 6px; font-size: 13px; font-weight: 600; color: var(--ld-text-2) }
.tm-gefahr-wahl label{ display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border: 1px solid var(--ld-rand-stark); border-radius: 10px; background: #fff; cursor: pointer; font-size: 14.5px }
.tm-gefahr-wahl input{ margin-top: 3px; accent-color: #d92d20 }
.tm-gefahr .tm-feld input{ display: block; width: 100%; max-width: 280px; min-height: 44px; box-sizing: border-box; padding: 0 12px; border: 1px solid var(--ld-rand-stark); border-radius: 10px; background: #fff; font: inherit; color-scheme: light }
.tm-gefahr-knoepfe{ display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px }
.tm-knopf-rot:disabled{ opacity: .45; cursor: not-allowed }