/* ============================================================================
   teil-termin — Terminkalender: Kopfkachel und Kalenderrahmen.

   Wird von functions.php automatisch nach seiten.css geladen (glob auf
   assets/css/teil-*.css). Alles hier steht deshalb LETZTER in der Kaskade und
   gewinnt bei gleicher Spezifitaet gegen grund.css, bau.css und seiten.css —
   ohne ein einziges !important.

   Zwei Dinge, beide von Christopher am 03.10.2026 gemeldet:
     1. Die Kopfbox der Auswahlseite war eine flache helle Flaeche:
        „keine Kachel mit Schatten, immer noch rechteckig. Hat immer noch kein
        Icon, keine Animation." Jetzt: Glaskachel mit runden Ecken, Schatten,
        gezeichnetem Kalenderzeichen und ruhiger Bewegung.
     2. Der Rahmen um den Kalender bekommt dieselbe Kachelsprache.
        Der iframe selbst wird NICHT angefasst — Hoehe, Attribute und das
        Fehlen von loading/sandbox/referrerpolicy bleiben, wo sie gemessen
        wurden (seiten.css, Zeile 315/316 und vorlagen/termin.php).

   Spezifitaets-Falle, gemessen in bau.css Zeile 165:
     .seitenblatt .kopfzeile:first-child{ padding-top:clamp(2.4rem,5vw,4rem) }
   trifft die Kopfzeile dieser Seite und hat 0-3-0. Ein .termin-kopf (0-1-0)
   oder .termin-seite .termin-kopf (0-2-0) verliert gegen diesen padding-top
   und die Kachel bekaeme oben 4rem und unten 2,5rem. Darum steht hier ueberall
   .termin-seite .kopfzeile.termin-kopf — ebenfalls 0-3-0, aber spaeter geladen.

   Keine neuen Farbwerte: nur die Token aus :root (grund.css).
   ========================================================================= */

/* ── Die Kopfkachel ──────────────────────────────────────────── */
/* Heller Grund, Blau und Gold nur als Hauch in den Ecken — keine Vollflaeche. */
.termin-seite .kopfzeile.termin-kopf{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:clamp(1rem,2.6vw,2.4rem);
  max-width:none;
  margin:0 0 clamp(1.5rem,2.8vw,2.4rem);
  padding:clamp(1.5rem,3.2vw,2.5rem) clamp(1.4rem,3vw,2.4rem);
  border-radius:var(--r-l);
  border:1px solid var(--glas-rand);
  box-shadow:var(--glas-schatten);
  background:
    radial-gradient(78% 130% at 6% -24%, var(--blau-zart), transparent 56%),
    radial-gradient(62% 120% at 102% -8%, var(--gold-zart), transparent 58%),
    var(--glas);
  position:relative;
  overflow:hidden;
  /* .glas legt als ::after einen Lichtschleier mit mix-blend-mode:overlay
     darueber. isolation haelt die Mischung in der Kachel. */
  isolation:isolate;
}
.termin-seite .kopfzeile.termin-kopf > *{ position:relative; z-index:1 }

.termin-seite .kopfzeile.termin-kopf h1{
  font-size:clamp(1.8rem,3vw,2.6rem);
  color:var(--text);
  /* „Bad Brückenau" bei 375 px: ohne Umbruch waere die Kachel breiter als das
     Fenster. Querscrollen ist auf dieser Seite nicht verhandelbar. */
  overflow-wrap:break-word;
  hyphens:auto;
}

.termin-kopf-text{ min-width:0; max-width:52ch }
.termin-kopf-text .marke{ margin-bottom:.7rem }
.termin-kopf-text p{
  margin:.7rem 0 0;
  color:var(--text-leise);
  font-size:clamp(.97rem,1vw,1.05rem);
}

/* Eingleiten der Kalenderseiten-Kachel.
   Bewusst eine CSS-Animation und nicht .einblenden: .einblenden startet bei
   opacity 0 und wird erst von wirkung.js auf .auf gesetzt. Auf der Seite, auf
   der gebucht wird, darf nichts an JavaScript haengen. Diese Animation endet
   mit fill-mode both immer sichtbar — auch wenn die Dauer durch die globale
   prefers-reduced-motion-Regel auf 0,001 ms gesetzt wird. */
.termin-kopf-fest{ animation:termin-kopf-auf .8s var(--weich) both }
@keyframes termin-kopf-auf{
  from{ opacity:0; transform:translateY(18px) }
  to{ opacity:1; transform:none }
}

/* ── Das gezeichnete Kalenderzeichen ─────────────────────────── */
/* Warme Platte statt dunklem Kreis; das Blatt darauf weiss mit blauer Kontur. */
.termin-zeichen{
  flex:none;
  display:grid;
  place-items:center;
  width:clamp(92px,11vw,128px);
  aspect-ratio:1;
  border-radius:var(--r-m);
  background:linear-gradient(150deg,#FFFDF9,var(--creme) 54%,var(--gold-zart));
  border:1px solid rgba(203,176,130,.34);
  box-shadow:0 10px 26px rgba(19,55,109,.09), 0 1px 0 rgba(255,255,255,.9) inset;
}
.termin-zeichen svg{ width:76%; height:76%; display:block; overflow:visible }

/* Der Ring: eine gestrichelte Bahn, die sehr langsam kreist — 34 s je Umlauf,
   dezent genug, dass man sie eher spuert als sieht.
   transform-box:fill-box, damit der Drehpunkt in jedem Browser die Mitte des
   Kreises ist und nicht die Ecke des Koordinatensystems. */
.tz-ring{
  fill:none;
  stroke:var(--gold-tief);
  stroke-width:1.6;
  stroke-linecap:round;
  stroke-dasharray:3 13;
  opacity:.7;
  transform-box:fill-box;
  transform-origin:center;
  animation:tz-kreisen 34s linear infinite;
}
@keyframes tz-kreisen{ to{ transform:rotate(360deg) } }

.tz-blatt{ fill:rgba(255,255,255,.92); stroke:var(--blau); stroke-width:2.4 }
.tz-linie{ fill:none; stroke:var(--blau); stroke-width:2.4; stroke-linecap:round }
.tz-buegel{ fill:none; stroke:var(--gold-tief); stroke-width:2.4; stroke-linecap:round }

.tz-punkt{ fill:var(--blau); opacity:.26 }
.tz-puls{
  fill:var(--gold-tief);
  opacity:1;
  transform-box:fill-box;
  transform-origin:center;
  animation:tz-pulsen 3.6s ease-in-out infinite;
}
@keyframes tz-pulsen{
  0%,100%{ transform:scale(1);    opacity:.95 }
  50%    { transform:scale(1.45); opacity:.5 }
}

/* ── Der Rahmen um den Kalender ──────────────────────────────── */
/* Nur der Rahmen. Hoehe und Attribute des iframes bleiben unberuehrt. */
.termin-seite .termin-rahmen{
  padding:clamp(6px,.9vw,14px);
  border-radius:var(--r-l);
  background:var(--weiss);
  border:1px solid var(--glas-rand);
  box-shadow:0 18px 54px rgba(19,55,109,.10), 0 2px 10px rgba(19,55,109,.05);
  overflow:hidden;
  /* isolation:isolate — ohne das schneidet Safari den iframe nicht an der
     Rundung ab (so schon in seiten.css begruendet). */
  isolation:isolate;
}
.termin-seite .termin-fenster{ border-radius:clamp(10px,1.4vw,18px) }

/* Das Netz, falls der Kalender nicht laedt: bleibt, ruecht nur naeher heran. */
.termin-seite .termin-hilfe{ margin-top:clamp(.9rem,1.8vw,1.3rem) }

/* ── Schmale Fenster ─────────────────────────────────────────── */
/* column-reverse: im Quelltext steht der Text zuerst (richtig fuer Vorlese-
   programme), auf dem Telefon steht das Zeichen oben. */
@media (max-width:720px){
  .termin-seite .kopfzeile.termin-kopf{
    flex-direction:column-reverse;
    align-items:flex-start;
    gap:1rem;
    padding:clamp(1.2rem,4vw,1.8rem);
  }
  .termin-kopf-text{ max-width:none }
  .termin-zeichen{ width:84px }
}
@media (max-width:400px){
  .termin-zeichen{ width:72px }
}

/* ── Ruhe, wenn er sie eingestellt hat ───────────────────────── */
/* grund.css und bau.css drehen unter prefers-reduced-motion bereits jede
   Animation auf 0,001 ms herunter. Hier steht es noch einmal ausdruecklich,
   damit nichts davon abhaengt, dass eine fremde Regel bestehen bleibt. */
@media (prefers-reduced-motion:reduce){
  .tz-ring,
  .tz-puls{ animation:none; transform:none }
  .termin-kopf-fest{ animation:none; opacity:1; transform:none }
}