/* ==========================================================================
   KENBES.de — Terminseite
   --------------------------------------------------------------------------
   Eigene Datei, nur von termin.php geladen (webKopf, $meta['css']). Baut auf
   style.css auf: Farben, Knoepfe und Raster kommen von dort.

   Der Kalender ist ein Raster aus Links — kein Skript, keine Bibliothek.
   Auf dem Telefon steht er ueber dem Formular, auf dem Schreibtisch daneben.
   ========================================================================== */

.tm-kopf{ padding:120px 0 8px; }
.tm-kopf h1{ margin:0 0 10px; }
.tm-lead{ max-width:60ch; color:var(--fg-2); }

.tm-haupt{ padding:24px 0 80px; }

/* Auf dem Telefon zaehlt die Reihenfolge: Kalender, Uhrzeiten und Formular,
   und erst ganz unten die Oeffnungszeiten. Wer bucht, soll nicht an einer
   Tabelle vorbeiscrollen muessen. */
.tm-gitter{ display:grid; gap:26px; grid-template-columns:1fr; align-items:start; }
.tm-kalender{ order:1; }
.tm-form{ order:2; }
.tm-zeiten-zeile{ order:3; }
@media (min-width: 900px){
  .tm-gitter{ grid-template-columns:minmax(320px, 420px) 1fr; gap:22px 34px; }
  .tm-kalender{ grid-column:1; grid-row:1; }
  .tm-zeiten-zeile{ grid-column:1; grid-row:2; }
  .tm-form{ grid-column:2; grid-row:1 / span 2; }
}

/* --- Kalender -------------------------------------------------------------- */

.tm-kalender{
  background:var(--glas); border:1px solid var(--line); border-radius:var(--radius);
  padding:16px 16px 18px;
}
.tm-monat{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  margin-bottom:14px;
}
.tm-monat strong{ font-family:var(--display); font-size:1.15rem; letter-spacing:.01em; }
.tm-pfeil{
  display:inline-flex; align-items:center; justify-content:center;
  width:38px; height:38px; border-radius:var(--radius-sm);
  border:1px solid var(--line); color:var(--fg-2); text-decoration:none;
  font-size:1.1rem; line-height:1;
}
.tm-pfeil:hover{ border-color:var(--accent); color:var(--accent); }
.tm-pfeil--aus{ opacity:.3; }

.tm-raster{ display:grid; grid-template-columns:repeat(7, 1fr); gap:5px; }
.tm-wtag{
  text-align:center; font-family:var(--mono); font-size:.66rem; letter-spacing:.1em;
  text-transform:uppercase; color:var(--fg-3); padding-bottom:4px;
}
.tm-leer{ aspect-ratio:1; }
.tm-tag{
  position:relative; aspect-ratio:1; display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:3px;
  border:1px solid var(--line); border-radius:var(--radius-sm);
  text-decoration:none; color:var(--fg); font-variant-numeric:tabular-nums;
  transition:border-color .15s ease, background .15s ease, transform .15s ease;
}
a.tm-tag:hover{ border-color:var(--accent); background:rgba(232,192,68,.08); transform:translateY(-1px); }
.tm-tag--gewaehlt{ border-color:var(--accent); background:rgba(232,192,68,.14); }
.tm-tag--zu{ color:var(--fg-3); opacity:.45; border-style:dashed; }
.tm-tag__zahl{ font-size:.95rem; font-weight:600; }
.tm-tag__punkt{
  width:5px; height:5px; border-radius:50%; background:var(--ok);
}

.tm-legende{
  display:flex; align-items:center; gap:8px; margin:14px 0 0;
  font-size:.78rem; color:var(--fg-3);
}
.tm-legende__frei, .tm-legende__voll{
  display:inline-block; width:10px; height:10px; border-radius:50%; margin-left:10px;
}
.tm-legende__frei{ background:var(--ok); margin-left:0; }
.tm-legende__voll{ background:transparent; border:1px dashed var(--fg-3); }

.tm-zeiten-box h3{ margin:0 0 8px; font-size:.95rem; }
.tm-zeiten-liste{ list-style:none; margin:0; padding:0; }
.tm-zeiten-liste li{
  display:flex; justify-content:space-between; gap:12px;
  padding:3px 0; font-size:.85rem; color:var(--fg-2);
}
.tm-zeiten-liste span:last-child{ font-variant-numeric:tabular-nums; color:var(--fg-3); }

/* --- Formular -------------------------------------------------------------- */

.tm-form h2{ margin:0 0 6px; }
.tm-gewaehlt{ color:var(--fg-2); margin:0 0 16px; }
.tm-klein{ font-size:.8rem; color:var(--fg-3); }
.tm-klein a{ color:var(--fg-2); }

.tm-slots{ border:0; padding:0; margin:0 0 22px; display:flex; flex-wrap:wrap; gap:8px; }
.tm-legende-txt{
  width:100%; padding:0 0 8px; font-family:var(--mono); font-size:.7rem;
  letter-spacing:.12em; text-transform:uppercase; color:var(--fg-3);
}
.tm-slot{
  position:relative; cursor:pointer;
  padding:10px 16px; border:1px solid var(--line); border-radius:var(--radius-sm);
  font-variant-numeric:tabular-nums; color:var(--fg-2);
}
.tm-slot input{ position:absolute; opacity:0; pointer-events:none; }
.tm-slot:hover{ border-color:var(--accent); color:var(--fg); }
.tm-slot:has(input:checked){
  border-color:var(--accent); background:rgba(232,192,68,.14); color:var(--fg); font-weight:600;
}
.tm-slot:has(input:focus-visible){ outline:2px solid var(--accent); outline-offset:2px; }
.tm-slot--voll{ opacity:.35; cursor:not-allowed; text-decoration:line-through; }
.tm-slot--voll:hover{ border-color:var(--line); color:var(--fg-2); }

.tm-formular h3{ margin:22px 0 12px; font-size:1rem; }
.tm-feld{ display:block; margin-bottom:14px; }
.tm-feld > span{
  display:block; margin-bottom:5px; font-size:.82rem; color:var(--fg-2);
}
.tm-feld input, .tm-feld select, .tm-feld textarea{
  width:100%; padding:11px 12px;
  background:rgba(255,255,255,.03); color:var(--fg);
  border:1px solid var(--line); border-radius:var(--radius-sm);
  font:inherit;
}
.tm-feld input:focus, .tm-feld select:focus, .tm-feld textarea:focus{
  outline:none; border-color:var(--accent);
}
.tm-feld textarea{ resize:vertical; min-height:96px; }
.tm-zwei{ display:grid; gap:0 14px; grid-template-columns:1fr; }
@media (min-width: 560px){ .tm-zwei{ grid-template-columns:1fr 1fr; } }

.tm-senden{ margin:6px 0 10px; }
.tm-koeder{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }

.tm-hinweis, .tm-fehler{
  border:1px solid var(--line); border-radius:var(--radius); padding:14px 16px;
  color:var(--fg-2); background:var(--glas);
}
.tm-fehler{ border-color:rgba(255,120,120,.5); color:#ffb3b3; margin-bottom:20px; }

.tm-ok{
  border:1px solid var(--accent); border-radius:var(--radius);
  background:rgba(232,192,68,.08); padding:26px 24px; max-width:60ch;
}
.tm-ok h2{ margin:0 0 8px; color:var(--accent); }

.tm-direkt{ margin-top:22px; border-top:1px solid var(--line); padding-top:16px; }
.tm-direkt h3{ margin:0 0 6px; font-size:.95rem; }

/* --- Der schnelle Weg: naechster freier Platz auf einem Knopf --------------- */

.tm-schnell{
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  flex-wrap:wrap; margin:0 0 22px;
  border:1px solid var(--accent); border-radius:var(--radius);
  background:rgba(232,192,68,.08); padding:14px 18px;
}
.tm-schnell__label{
  display:block; font-family:var(--mono); font-size:.68rem; letter-spacing:.12em;
  text-transform:uppercase; color:var(--fg-3); margin-bottom:3px;
}
.tm-schnell strong{ font-size:1.05rem; }

/* --- Gewaehlter Tag ueber den Uhrzeiten ------------------------------------ */

.tm-gewaehlt{
  display:flex; align-items:baseline; gap:10px; flex-wrap:wrap;
  margin:0 0 16px; padding-bottom:14px; border-bottom:1px solid var(--line);
}
.tm-gewaehlt__label{ color:var(--fg-3); font-size:.85rem; }
.tm-gewaehlt strong{ font-size:1.1rem; font-family:var(--display); }
.tm-gewaehlt__frei{
  font-size:.75rem; color:#8ef0b8; border:1px solid rgba(61,220,132,.4);
  background:rgba(61,220,132,.12); border-radius:999px; padding:2px 10px;
}

/* --- Freiwillige Angaben: aufklappbar, ohne Skript ------------------------- */

.tm-mehr{ margin:4px 0 18px; border-top:1px solid var(--line); padding-top:12px; }
.tm-mehr > summary{
  cursor:pointer; list-style:none; color:var(--fg-2); font-size:.88rem;
  padding:4px 0; user-select:none;
}
.tm-mehr > summary::-webkit-details-marker{ display:none; }
.tm-mehr > summary::before{ content:"+ "; color:var(--accent); font-weight:700; }
.tm-mehr[open] > summary::before{ content:"– "; }
.tm-mehr > summary:hover{ color:var(--fg); }
.tm-mehr > *:not(summary){ margin-top:12px; }

/* --- Pflichtstern und Notiz ------------------------------------------------ */

.tm-feld b{ color:var(--accent); font-weight:700; }
.tm-klein--luft{ margin:0 0 16px; }
.tm-sofort{ color:#8ef0b8; }

/* --- Bestaetigung ---------------------------------------------------------- */

.tm-ok__haken{
  width:46px; height:46px; border-radius:50%; margin-bottom:14px;
  display:flex; align-items:center; justify-content:center;
  background:rgba(61,220,132,.15); color:#8ef0b8;
}
.tm-ok__haken svg{ width:26px; height:26px; }
.tm-ok__wann{ font-family:var(--display); font-size:1.25rem; margin:0 0 10px; }
.tm-ok__knoepfe{ display:flex; gap:10px; flex-wrap:wrap; margin:18px 0 14px; }

/* Oeffnungszeiten: eine Zeile unter dem Kalender, keine Tabelle. */
.tm-zeiten-zeile{
  margin:0; font-size:.85rem; color:var(--fg-3);
  border:1px solid var(--line); border-radius:var(--radius);
  background:var(--glas); padding:11px 14px;
}
.tm-zeiten-zeile strong{ color:var(--fg-2); font-weight:600; }