/* Die Terminseite.

   Baut auf jf.css auf, das Schriften, Farben, Kopf und Fuß mitbringt.
   Hier steht nur, was dort fehlt: die Zeitplättchen und das Formular.

   Die Plättchen sind absichtlich mindestens 48 Pixel hoch. Darunter
   trifft man sie auf dem Handy mit dem Daumen nicht zuverlässig. */

.ttage{display:flex;flex-direction:column;gap:clamp(14px,1.8vw,22px);
  margin:clamp(28px,3.4vw,42px) 0 clamp(26px,3.2vw,38px)}

.ttag{border-radius:var(--rund);padding:clamp(20px,2.4vw,28px);
  background:var(--karte);box-shadow:inset 0 0 0 1px var(--linie);
  transition:box-shadow .45s var(--ease)}
.ttag:hover{box-shadow:inset 0 0 0 1px var(--linie-stark)}

/* Der Tageskasten trennt schon - die Überschrift braucht keine
   zusätzliche Linie und keinen großen Abstand darüber. */
.ttag h2{margin:0 0 .9rem;font-size:clamp(1.02rem,2vw,1.2rem);text-align:left}

.tzeiten{list-style:none;margin:0;padding:0;max-width:none;
  display:flex;flex-wrap:wrap;gap:.6rem}
.tzeiten li{margin:0}

.tzeit{display:inline-flex;align-items:center;justify-content:center;
  min-width:5.4rem;min-height:48px;padding:.5rem 1rem;
  font-family:var(--fest);font-size:.92rem;font-weight:500;letter-spacing:.02em;
  color:var(--text);text-decoration:none;border-radius:999px;
  background:rgba(238,242,255,.06);box-shadow:inset 0 0 0 1px var(--linie);
  transition:background-color .3s var(--ease),color .3s var(--ease),
             box-shadow .3s var(--ease),transform .3s var(--ease)}
.tzeit:hover{background:var(--rot-tief);color:#F2FBFF;
  box-shadow:0 14px 30px -14px rgba(44,224,206,.9);transform:translateY(-2px)}
.tzeit:active{transform:translateY(0)}

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

.tform{max-width:36rem;margin:clamp(26px,3.2vw,36px) 0 0;
  display:flex;flex-direction:column;gap:.1rem}
.tform label{font-family:var(--fest);font-size:.74rem;letter-spacing:.09em;
  text-transform:uppercase;color:var(--leise);margin:1.1rem 0 .42rem}
.tform label:first-of-type{margin-top:0}
.tpflicht{color:var(--rot-text)}

.tform input,.tform select,.tform textarea{
  font-family:var(--lese);font-size:1rem;color:var(--text);
  background:var(--karte);border:0;border-radius:var(--rund-klein);
  box-shadow:inset 0 0 0 1px var(--linie);
  padding:.82rem 1rem;width:100%;
  /* Unter 16 Pixel zoomt das iPhone beim Antippen in das Feld hinein
     und der Rest der Seite rutscht weg. */
  min-height:48px;
  transition:box-shadow .3s var(--ease),background-color .3s var(--ease)}
.tform textarea{min-height:7rem;resize:vertical;line-height:1.6}
.tform input::placeholder,.tform textarea::placeholder{color:var(--leiser)}
.tform input:focus,.tform select:focus,.tform textarea:focus{
  outline:0;background:var(--karte-2);
  box-shadow:inset 0 0 0 1px var(--rot-zart),0 0 0 3px var(--rot-nebel)}

.tform .knopf{align-self:flex-start;margin-top:1.6rem}
.tnote{font-size:.9em;color:var(--leise);margin-top:1rem;max-width:60ch;line-height:1.7}
.tnote a{color:var(--rot-text)}

/* Die Falle für Roboter. Nicht display:none - manche Roboter füllen
   gerade das aus, was versteckt ist, und erkennen none als Falle. */
.tfalle{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

.tfehler{border-radius:var(--rund-klein);
  background:linear-gradient(130deg,rgba(44,224,206,.16),var(--karte));
  box-shadow:inset 0 0 0 1px rgba(166,243,234,.3);
  padding:1rem 1.2rem;margin:0 0 1.4rem;max-width:60ch;
  font-size:.96em;color:var(--text)}

.tkasten{border-radius:var(--rund);padding:clamp(22px,2.6vw,30px);
  background:var(--karte);box-shadow:inset 0 0 0 1px var(--linie);
  margin:clamp(24px,3vw,34px) 0;max-width:46rem}
.tkasten::before{content:"";display:block;width:34px;height:2px;
  background:var(--rot);margin-bottom:1rem;border-radius:2px}
.tkasten h2{margin:0 0 .8rem;text-align:left;font-size:clamp(1.1rem,2vw,1.3rem)}
.tkasten p{color:var(--leise);line-height:1.74}
.tkasten p:last-child{margin-bottom:0}
.tkasten strong{color:var(--text)}

/* ---------- Der Kasten auf der Startseite ---------- */

.jf-termin-zeiten{list-style:none;margin:.9rem 0 0;padding:0;
  display:flex;flex-wrap:wrap;gap:.55rem}
.jf-termin-zeiten li{margin:0}

@media (max-width:560px){
  .tzeit{min-width:4.6rem;flex:1 1 4.6rem}
}

/* Zwei Knöpfe nebeneinander, auf dem Handy untereinander. */
.tknoepfe{display:flex;flex-wrap:wrap;gap:.8rem;margin:1.6rem 0 0}