/* ============================================================================
   teil-zg-termin — die Terminseiten, zweiter Durchgang.
   Angelegt am 04.10.2026.

   Laedt als LETZTE der teil-*.css (functions.php glob, alphabetisch: zg steht
   hinter termin, scroll, bewegung, za, zb, zc, zd). Alles hier gewinnt deshalb
   bei GLEICHER Spezifitaet gegen jede andere Datei des Themes — ohne ein
   einziges !important.

   ── Was hier steht und warum ─────────────────────────────────────────────

   1) /tk-auswahl/, Kopfbox. Sein offener Punkt lautet woertlich: „Schatten,
      runde Ecken, Icon, Animation." Die Kachel hatte das seit dem 03.10.2026
      dem Grunde nach, aber so leise, dass es nicht als Antwort durchgeht.
      Jetzt: groessere Rundung (--r-xl statt --r-l), ein doppelter Schatten
      mit Lichtkante, die Blume des Lebens als Wasserzeichen, ein Lichtstrich,
      der beim Erscheinen einmal ueber die Kachel laeuft, eine Goldlinie, die
      sich selbst zieht, zwei gestaffelte Schritte — und ein Kalenderzeichen
      mit zwei gegenlaeufigen Ringen, wanderndem Funken und Taktpunkt.

   2) Die fuenf Kalenderseiten. Sie trugen gemessen 132–135 Zeichen Text und
      ein <iframe>, sonst nichts. Hier bekommen sie den Rahmen dazu: Weg
      zurueck, Kopfkachel mit Filialfoto, drei Infokarten unter dem Kalender,
      Chips zu den anderen Filialen.

   3) Der iframe. Gemessen am 04.10.2026 (scrollHeight, erste Stufe des
      Ablaufs): Wiesbaden laeuft in der Anbieterfassung v10 und braucht
      1663 px bei 375 px Fensterbreite und 1197 px bei 1150 px. seiten.css
      gibt allen Kalendern 1500 px bzw. 1100 px — Wiesbaden wurde dort also
      um 163 px bzw. 97 px abgeschnitten. NUR dieser Kalender bekommt deshalb
      eine eigene Hoehe. Die uebrigen (gemessen 1107–1284 px schmal,
      900–946 px breit) behalten ihre, denn die spaeteren Stufen des Ablaufs
      sind NICHT gemessen; sie herunterzusetzen waere geraten.

   ── Die vier Fallen, an die sich diese Datei haelt ───────────────────────

   * Kein transition auf „all" und kein pauschales transition-delay. Jede
     Eigenschaft bekommt ihre eigene Dauer UND ihren eigenen Verzug — genau
     wie teil-bewegung.css es vormacht. Ein Verzug auf allem hat dort schon
     einmal das Schweben um 540 ms lahmgelegt.
   * Spaeter in der Datei schlaegt frueher NUR bei gleicher Spezifitaet.
     seiten.css setzt .termin-kachel > * auf position/z-index (0-1-0) und
     teil-termin.css .termin-seite .kopfzeile.termin-kopf > * (0-3-0). Jede
     Regel hier, die dagegen anschreibt, ist nachgezaehlt und mindestens
     ebenso spezifisch; die Zahl steht jeweils daneben.
   * Alles, was unsichtbar macht, hat drei Netze: das 12-Sekunden-Netz von
     wirkung.js (.einblenden/.auf), @media (scripting: none) ganz unten und
     @media (prefers-reduced-motion: reduce) als letzter Block.
     Was mit einer CSS-Animation kommt, traegt immer fill-mode „both" und
     endet damit sichtbar — auch wenn bau.css die Dauer unter
     prefers-reduced-motion auf 0,001 ms zieht.
   * Kein seitlicher Versatz, der die Seite waagerecht wachsen laesst. Der
     einzige negative Rand (der Kalender auf dem Telefon) ist genau --gasse
     und damit das Innenmass von .bahn; er fuellt die Polsterung aus, er
     ueberschreitet sie nicht.

   Haltepunkte: 1660, 940, 430 — plus 900, weil seiten.css die Kalenderhoehe
   dort umschaltet und diese Datei denselben Punkt treffen muss.
   Keine neuen Farbwerte: nur die Token aus :root (grund.css).
   ========================================================================= */


/* ============================================================================
   0 — EIGENE GROESSEN
   ========================================================================= */
.termin-seite{
  --tm-ein:.72s;                 /* Eingleiten eines Teils */
  --tm-zeig:.26s;                /* Zeigen mit der Maus — kurz, wie teil-bewegung */
  --tm-schatten:0 28px 70px rgba(19,55,109,.11), 0 6px 18px rgba(19,55,109,.06);
  --tm-kante:0 1px 0 rgba(255,255,255,.95) inset;
}


/* ============================================================================
   1 — DIE KOPFKACHEL (beide Seiten)
   teil-termin.css hat sie mit .termin-seite .kopfzeile.termin-kopf (0-3-0)
   gebaut. Dieselbe Spezifitaet, spaeter geladen — das reicht.
   ========================================================================= */
.termin-seite .kopfzeile.termin-kopf{                       /* 0-3-0 */
  padding:clamp(1.7rem,3.6vw,3rem) clamp(1.5rem,3.2vw,2.8rem);
  border-radius:var(--r-xl);
  gap:clamp(1.1rem,2.8vw,2.6rem);
  background:
    radial-gradient(88% 150% at 2% -32%, var(--blau-zart), transparent 58%),
    radial-gradient(72% 132% at 104% -16%, var(--gold-zart), transparent 60%),
    linear-gradient(168deg, rgba(255,255,255,.88), rgba(255,255,255,.5) 62%),
    var(--glas);
  box-shadow:var(--tm-schatten), var(--tm-kante);
}

/* Die Goldlinie an der Oberkante. ::before ist hier frei — .glas belegt nur
   ::after (grund.css Z. 101), teil-termin.css belegt keines von beiden. */
.termin-seite .kopfzeile.termin-kopf::before{               /* 0-3-0 */
  content:"";
  position:absolute;
  inset:0 0 auto;
  height:3px;
  z-index:3;
  pointer-events:none;
  background:linear-gradient(90deg,
    rgba(203,176,130,0), var(--gold) 22%, var(--gold-tief) 52%, rgba(203,176,130,0));
  transform-origin:left center;
  animation:tm-linie-zieht 1.1s var(--weich) .25s both;
}

/* Der Text nimmt den freien Platz. teil-termin.css gibt .termin-kopf-text
   (0-1-0) nur min-width/max-width; flex-grow fehlte, die Kachel stand
   deshalb mit einer Luecke zwischen Text und Zeichen. */
.termin-seite .termin-kopf-text{                            /* 0-2-0 */
  flex:1 1 auto;
  max-width:56ch;
}

/* Die Ueberschrift bekommt hier BEWUSST keine eigene Einblendung:
   bewegung.js zerlegt .kopfzeile h1 in Woerter und blendet sie einzeln ein
   (teil-scroll.css, .wortteil). Zwei Einblendungen uebereinander waeren ein
   Zucken — dieselbe Begruendung, aus der bewegung.js Kinder mit .einblenden
   nur den Verzug gibt und keine zweite Spur. */
.termin-kopf-fest .termin-kopf-text .marke{                 /* 0-3-0 */
  animation:tm-teil-auf var(--tm-ein) var(--weich) .14s both;
}
.termin-kopf-fest .termin-kopf-text > p{                    /* 0-3-0 */
  animation:tm-teil-auf var(--tm-ein) var(--weich) .32s both;
}

/* Die Kachel selbst gleitet ein. Der Name termin-kopf-auf stammt aus
   teil-termin.css und bleibt; hier kommt nur ein laengerer, weicherer Weg
   dazu. „both" heisst: der Endzustand steht, auch ohne JavaScript. */
.termin-kopf-fest{                                          /* 0-1-0 */
  animation:tm-kopf-auf .95s var(--weich) both;
}
@keyframes tm-kopf-auf{
  from{ opacity:0; transform:translateY(26px) scale(.985) }
  to  { opacity:1; transform:none }
}
@keyframes tm-teil-auf{
  from{ opacity:0; transform:translateY(14px) }
  to  { opacity:1; transform:none }
}
@keyframes tm-linie-zieht{
  from{ transform:scaleX(0); opacity:0 }
  to  { transform:scaleX(1); opacity:1 }
}


/* ── Das Wasserzeichen: die Blume des Lebens ─────────────────────────────
   Muss 0-4-0 sein: teil-termin.css setzt .termin-seite .kopfzeile.termin-kopf > *
   auf position:relative und z-index:1 (0-3-0). Mit 0-2-0 bliebe die Blume im
   Fluss stehen und schoebe den Text zur Seite — nachgezaehlt, nicht geraten. */
.termin-seite .kopfzeile.termin-kopf > .termin-kopf-blume{   /* 0-4-0 */
  position:absolute;
  z-index:0;
  right:-7%;
  bottom:-58%;
  width:min(46%,420px);
  aspect-ratio:1;
  color:var(--blau);
  opacity:.06;
  pointer-events:none;
  animation:tm-blume-dreht 140s linear infinite;
}
.termin-kopf-blume svg{ display:block; width:100%; height:auto }
@keyframes tm-blume-dreht{ to{ rotate:360deg } }

/* ── Der Lichtstrich, der einmal ueberlaeuft ─────────────────────────────
   Rein dekorativ, pointer-events:none, endet bei opacity 0. Er verdeckt
   nichts dauerhaft und braucht deshalb kein Netz — er LAEUFT nur, er HAELT
   nichts verborgen. */
.termin-seite .kopfzeile.termin-kopf > .termin-kopf-schimmer{ /* 0-4-0 */
  position:absolute;
  inset:0;
  z-index:2;
  border-radius:inherit;
  pointer-events:none;
  opacity:0;
  background:linear-gradient(104deg,
    transparent 38%, rgba(255,255,255,.72) 50%, transparent 62%);
  translate:-130% 0;
}
.termin-kopf-fest > .termin-kopf-schimmer{                   /* 0-2-0 */
  animation:tm-schimmer 1.6s var(--weich) .6s 1 both;
}
@keyframes tm-schimmer{
  0%  { translate:-130% 0; opacity:0 }
  16% { opacity:.9 }
  100%{ translate:130% 0;  opacity:0 }
}

/* ── Die Goldlinie unter dem Text ────────────────────────────────────────
   aria-hidden, reine Zierde. */
.termin-seite .termin-kopf-linie{                            /* 0-2-0 */
  display:block;
  height:3px;
  width:clamp(64px,22%,150px);
  margin-top:clamp(1rem,1.9vw,1.5rem);
  border-radius:var(--r-rund);
  background:linear-gradient(90deg,var(--gold-tief),var(--gold) 55%,rgba(203,176,130,0));
  transform-origin:left center;
  animation:tm-linie-zieht 1s var(--weich) .6s both;
}

/* ── Das Filialfoto in der Kopfkachel (nur Kalenderseiten) ───────────────
   Die fuenf Kalenderseiten trugen gemessen KEIN Bild. Dieses hier kommt von
   der Filialseite (bv_erstes_bild) — keine zweite Pflegestelle. */
.termin-seite .termin-kopf-bild{                             /* 0-2-0 */
  flex:none;
  position:relative;
  z-index:1;
  width:clamp(84px,9.5vw,124px);
  aspect-ratio:1;
  border-radius:var(--r-rund);
  overflow:hidden;
  background:var(--sand);
  border:3px solid rgba(255,255,255,.96);
  box-shadow:0 14px 34px rgba(19,55,109,.16);
  animation:tm-bild-auf .95s var(--weich) .18s both;
}
.termin-seite .termin-kopf-bild img{                         /* 0-2-0 */
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
}
@keyframes tm-bild-auf{
  from{ opacity:0; transform:translateY(16px); scale:.86 }
  to  { opacity:1; transform:none;             scale:1 }
}

/* ── Die zwei Schritte ───────────────────────────────────────────────────
   Nur zwei, und beide gemessen: Schritt eins ist diese Seite, Schritt zwei
   ist die erste Maske des Anbieters („Grund des Termins", gemessen am
   04.10.2026). Was danach kommt, steht hier nicht. */
.termin-seite .termin-schritte{                              /* 0-2-0 */
  list-style:none;
  display:flex;
  flex-wrap:wrap;
  gap:.6rem .8rem;
  margin:clamp(1.1rem,2.2vw,1.7rem) 0 0;
  padding:0;
}
.termin-seite .termin-schritte li{                           /* 0-2-0 */
  display:inline-flex;
  align-items:center;
  gap:.6em;
  min-width:0;
  padding:.46em 1em .46em .46em;
  border-radius:var(--r-rund);
  background:rgba(255,255,255,.76);
  border:1px solid rgba(19,55,109,.09);
  box-shadow:0 4px 14px rgba(19,55,109,.055);
  font-size:.875rem;
  font-weight:750;
  line-height:1.3;
  color:var(--text);
  animation:tm-teil-auf var(--tm-ein) var(--weich) both;
  animation-delay:var(--einzug,0ms);
}
.termin-schritt-nr{
  flex:none;
  display:grid;
  place-items:center;
  width:1.78em;
  height:1.78em;
  border-radius:var(--r-rund);
  background:linear-gradient(145deg,var(--gold),var(--gold-tief));
  color:#2A2113;
  font-size:.82em;
  font-weight:900;
  box-shadow:0 2px 8px rgba(203,176,130,.5), 0 1px 0 rgba(255,255,255,.7) inset;
}
.termin-schritt-wort{ min-width:0; overflow-wrap:break-word }


/* ============================================================================
   2 — DAS GEZEICHNETE KALENDERZEICHEN
   Die Grundform steht in teil-termin.css. Hier kommt die zweite Ebene dazu:
   ein gegenlaeufiger Innenring, ein Funke auf der Bahn, ein Kranz um den
   Taktpunkt — und das Blatt zeichnet seine Linie beim Erscheinen selbst.
   ========================================================================= */
.termin-seite .termin-zeichen{                               /* 0-2-0 */
  position:relative;
  z-index:1;
  border-radius:var(--r-l);
  background:linear-gradient(150deg,#FFFDF9,var(--creme) 50%,var(--gold-zart));
  border:1px solid rgba(203,176,130,.38);
  box-shadow:
    0 16px 38px rgba(19,55,109,.11),
    0 1px 0 rgba(255,255,255,.95) inset;
  animation:
    tm-zeichen-auf 1s var(--weich) .1s both,
    tm-schweben 7.5s ease-in-out 1.3s infinite;
}
.termin-seite .termin-zeichen-gross{                         /* 0-2-0 */
  width:clamp(104px,13vw,160px);
}
@keyframes tm-zeichen-auf{
  from{ opacity:0; transform:translateY(18px) rotate(-7deg) scale(.84) }
  to  { opacity:1; transform:none }
}
/* translate statt transform: der Endzustand der Einblendung oben ist
   transform:none, beide Kanaele setzen sich unabhaengig zusammen. */
@keyframes tm-schweben{
  0%,100%{ translate:0 0 }
  50%    { translate:0 -7px }
}

/* Der zweite, langsamere Ring laeuft rueckwaerts.
   .tz-ring-zwei traegt im Markup auch .tz-ring (teil-termin.css, 0-1-0) —
   gleiche Spezifitaet, diese Datei laedt spaeter. */
.tz-ring-zwei{                                               /* 0-1-0 */
  stroke:var(--blau-hell);
  stroke-width:1.1;
  stroke-dasharray:2 11;
  opacity:.4;
  animation:tm-kreisen-zurueck 46s linear infinite;
}
@keyframes tm-kreisen-zurueck{ to{ transform:rotate(-360deg) } }

/* Der Funke auf der aeusseren Bahn. Er sitzt bei (48,5) — das ist der
   Scheitel des Rings mit r=43 um (48,48). Gedreht wird um die Mitte des
   Koordinatensystems, nicht um die eigene: transform-box:view-box. */
.tz-funke{
  fill:var(--gold-tief);
  transform-box:view-box;
  transform-origin:48px 48px;
  animation:tm-kreisen-vor 11s linear infinite;
}
@keyframes tm-kreisen-vor{ to{ transform:rotate(360deg) } }

/* Der Kranz um den Taktpunkt — gleicher Takt wie tz-puls (3,6 s). */
.tz-kranz{
  fill:none;
  stroke:var(--gold-tief);
  stroke-width:1.5;
  opacity:0;
  transform-box:fill-box;
  transform-origin:center;
  animation:tm-kranz-weit 3.6s ease-out infinite;
}
@keyframes tm-kranz-weit{
  0%     { transform:scale(.42); opacity:.7 }
  70%,100%{ transform:scale(1.18); opacity:0 }
}

/* Blatt und Mittellinie zeichnen sich beim Erscheinen.
   Die Laengen sind gerechnet, nicht geschaetzt:
     Blatt  = Rechteck 62x54, r=13  ->  2*(62-26) + 2*(54-26) + 2*pi*13
            = 72 + 56 + 81,7 = 209,7  -> aufgerundet 212
     Linie  = 62
   Die Fuellung des Blattes bleibt die ganze Zeit stehen; nur die Kontur
   laeuft. Faellt die Animation aus, steht stroke-dashoffset auf 0 — nichts
   verschwindet. */
.termin-kopf-fest .tz-blatt{                                 /* 0-2-0 */
  stroke-dasharray:212;
  animation:tm-zeichnen 1.5s var(--weich) .35s both;
}
.termin-kopf-fest .tz-linie{                                 /* 0-2-0 */
  stroke-dasharray:62;
  animation:tm-zeichnen .7s var(--weich) 1.2s both;
}
@keyframes tm-zeichnen{
  from{ stroke-dashoffset:var(--tm-strich,212) }
  to  { stroke-dashoffset:0 }
}
.termin-kopf-fest .tz-blatt{ --tm-strich:212 }
.termin-kopf-fest .tz-linie{ --tm-strich:62 }


/* ============================================================================
   3 — DER WEG ZURUECK (Kalenderseiten)
   Stand bisher nirgends: wer auf einer Kalenderseite landete, kam nur ueber
   den Zurueck-Knopf des Browsers wieder zur Auswahl.
   ========================================================================= */
.termin-seite .termin-weg{                                   /* 0-2-0 */
  margin:0 0 clamp(.9rem,1.8vw,1.4rem);
  animation:tm-teil-auf .6s var(--weich) both;
}
.termin-weg-zurueck{
  display:inline-flex;
  align-items:center;
  gap:.55em;
  padding:.52em 1.1em .52em .9em;
  border-radius:var(--r-rund);
  background:rgba(255,255,255,.72);
  border:1px solid var(--linie);
  box-shadow:0 3px 12px rgba(19,55,109,.05);
  color:var(--blau);
  font-size:.88rem;
  font-weight:800;
  text-decoration:none;
  /* Eigenschaftsgenau, kein „all" und kein gemeinsamer Verzug. */
  transition:
    background-color var(--tm-zeig) var(--weich),
    border-color     var(--tm-zeig) var(--weich),
    box-shadow       .4s var(--weich),
    translate        var(--tm-zeig) var(--weich);
}
.termin-weg-pfeil{
  font-size:1.05em;
  line-height:1;
  transition:translate var(--tm-zeig) var(--bew-nach,var(--weich));
}
@media (hover:hover) and (pointer:fine){
  .termin-weg-zurueck:hover{
    background-color:#fff;
    border-color:var(--gold);
    box-shadow:0 10px 24px rgba(19,55,109,.1);
    translate:0 -2px;
  }
  .termin-weg-zurueck:hover .termin-weg-pfeil{ translate:-4px 0 }
}
.termin-weg-zurueck:focus-visible{
  background-color:#fff;
  border-color:var(--gold);
  translate:0 -2px;
  outline:3px solid var(--blau-hell);
  outline-offset:3px;
}
.termin-weg-zurueck:focus-visible .termin-weg-pfeil{ translate:-4px 0 }


/* ============================================================================
   4 — DER KALENDER
   Der iframe ist fremdes Gut. Er bekommt hier NUR Rahmen und Hoehe; an
   Attributen, loading, sandbox und referrerpolicy aendert sich nichts.
   ========================================================================= */
.termin-seite .termin-rahmen{                                /* 0-2-0 */
  margin-top:clamp(1rem,2vw,1.6rem);
  box-shadow:
    0 24px 62px rgba(19,55,109,.11),
    0 3px 12px rgba(19,55,109,.05),
    0 1px 0 rgba(255,255,255,.9) inset;
  animation:tm-rahmen-auf 1s var(--weich) .25s both;
}
/* „both" und ein Endzustand ohne opacity-Rest: der Kalender steht am Ende
   immer da — auch ohne JavaScript, auch bei 0,001 ms Dauer. */
@keyframes tm-rahmen-auf{
  from{ opacity:0; transform:translateY(20px) }
  to  { opacity:1; transform:none }
}

/*
 * Die eigene Hoehe fuer den gemessen hoeheren Kalender.
 *
 * GEMESSEN am 04.10.2026 im Browser, erste Stufe des Buchungsablaufs
 * („Grund des Termins"), document.scrollHeight bei der jeweiligen Breite:
 *
 *   Kalender                   ~380 px    810 px   1038 px   1150 px
 *   Bayreuth        (v2)        1107        —         —        900 *
 *   Hammelburg      (v2)        1250       966        —         —
 *   Bad Brueckenau  (v2)        1284       966        —        946
 *   Schweinfurt     (v2)        1284        —         —         —
 *   Wiesbaden       (v10)       1663      1293      1217      1197
 *   * bei 1440 px gemessen.
 *
 * seiten.css gibt allen Kalendern 1100 px, unter 900 px Fensterbreite
 * 1500 px (0-1-0). Fuer die vier v2-Kalender reicht das ueberall. Wiesbaden
 * laeuft beim Anbieter in der Fassung v10 und wurde abgeschnitten: 163 px
 * auf dem Telefon, 193 px bei der schmalsten Rechnerbreite (1293 gegen
 * 1100). NUR dieser Kalender bekommt deshalb hier eine eigene Hoehe, 0-3-0,
 * also spezifischer UND spaeter als seiten.css.
 *
 * Die Breite des Rahmens, an der sich die Hoehe entscheidet, ist gemessen:
 *   Fenster  940 px -> Rahmen  810 px   (Hoehe noetig 1293 -> 1360, 67 Luft)
 *   Fenster 1660 px -> Rahmen 1038 px   (Hoehe noetig 1217 -> 1280, 63 Luft)
 * Ab etwa 1180 px Fensterbreite steht der Rahmen fest bei ~1038 px, weil
 * .termin-seite .bahn dort an max-width:1180px laeuft. Genau dort schaltet
 * die zweite Stufe um — zwei Stufen statt einer, damit auf dem grossen
 * Schirm nicht 143 px leeres Weiss unter dem Kalender stehen.
 *
 * Die spaeteren Stufen des Ablaufs (Tag- und Uhrzeitwahl) sind NICHT
 * gemessen: dafuer haette in ein echtes, fremdes Buchungssystem geklickt
 * werden muessen. Was dort hoeher steht, rollt im Rahmen — nichts geht
 * verloren. Aus demselben Grund wird an den vier anderen Kalendern NICHTS
 * herabgesetzt, obwohl sie gemessen Platz uebrig haben.
 */
.termin-seite .termin-rahmen-hoch .termin-fenster{           /* 0-3-0 */
  height:1360px;
}
@media (min-width:1180px){
  .termin-seite .termin-rahmen-hoch .termin-fenster{         /* 0-3-0 */
    height:1280px;
  }
}
@media (max-width:899.98px){
  .termin-seite .termin-rahmen-hoch .termin-fenster{         /* 0-3-0 */
    height:1740px;
  }
}


/* ============================================================================
   5 — DIE DREI INFOKARTEN UNTER DEM KALENDER
   Anschrift, Kontakt, Oeffnungszeiten. Alles aus der Filialseite; eine Karte
   ohne Angabe wird in der Vorlage gar nicht erst ausgegeben.
   ========================================================================= */
.termin-seite .termin-infos{                                 /* 0-2-0 */
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,250px),1fr));
  gap:clamp(.8rem,1.5vw,1.15rem);
  margin-top:clamp(1.2rem,2.4vw,2rem);
}

/*
 * Der Verzug gilt dem Einblenden, NICHT dem Zeigen — dieselbe Entscheidung
 * wie in teil-bewegung.css. Ein gemeinsames transition-delay laege sonst auch
 * auf dem Heben mit der Maus, und die dritte Karte taete 180 ms lang nichts.
 * Diese Regel (0-2-0) schlaegt ausserdem .einblenden:nth-child(2|3) aus
 * bau.css (ebenfalls 0-2-0, aber frueher geladen), das sonst einen eigenen
 * Verzug auf ALLES legt.
 */
.termin-seite .termin-info{                                  /* 0-2-0 */
  position:relative;
  display:flex;
  flex-direction:column;
  gap:.5rem;
  min-width:0;
  padding:clamp(1.05rem,2vw,1.5rem);
  border-radius:var(--r-l);
  transition:
    opacity      .7s  var(--weich) var(--einzug,0ms),
    transform    .7s  var(--weich) var(--einzug,0ms),
    translate    var(--tm-zeig) var(--weich) 0ms,
    border-color var(--tm-zeig) var(--weich) 0ms,
    box-shadow   .42s var(--weich) 0ms;
}
/* .glas legt einen Lichtschleier als ::after darueber (grund.css Z. 101). */
.termin-seite .termin-info > *{ position:relative; z-index:1 }  /* 0-3-0 */

@media (hover:hover) and (pointer:fine){
  .termin-seite .termin-info:hover{                          /* 0-3-0 */
    translate:0 -4px;
    border-color:var(--gold);
    box-shadow:0 22px 46px rgba(19,55,109,.13);
  }
}

.termin-seite .termin-info h2{                               /* 0-3-0 */
  display:flex;
  align-items:center;
  gap:.55em;
  margin:0 0 .15rem;
  font-size:1.02rem;
  font-weight:800;
  line-height:1.25;
  letter-spacing:-.012em;
  color:var(--blau);
}
.termin-info-zeichen{
  flex:none;
  width:22px;
  height:22px;
  color:var(--gold-tief);
  fill:none;
  stroke:currentColor;
  stroke-width:1.7;
  stroke-linecap:round;
  stroke-linejoin:round;
  /* Ein sehr kleiner Takt, damit die Karte nicht tot wirkt. */
  animation:tm-zeichen-takt 6s ease-in-out infinite;
}
@keyframes tm-zeichen-takt{
  0%,88%,100%{ rotate:0deg }
  93%        { rotate:-9deg }
}

.termin-seite .termin-info address{                          /* 0-3-0 */
  display:flex;
  flex-direction:column;
  gap:.1rem;
  font-style:normal;
  font-size:.93rem;
  line-height:1.58;
  color:var(--text-leise);
  overflow-wrap:anywhere;
}
.termin-info-text{
  margin:0;
  font-size:.9rem;
  line-height:1.58;
  color:var(--text-leise);
}
.termin-info-wege{
  display:flex;
  flex-direction:column;
  gap:.25rem;
  margin-top:auto;
  padding-top:.45rem;
  min-width:0;
}
.termin-ruf{
  font-size:clamp(1.02rem,1.5vw,1.18rem);
  font-weight:850;
  letter-spacing:-.015em;
  color:var(--blau);
  text-decoration:none;
  overflow-wrap:anywhere;
  transition:color var(--tm-zeig) var(--weich), translate var(--tm-zeig) var(--weich);
}
.termin-post{
  font-size:.88rem;
  font-weight:700;
  color:var(--text-leise);
  text-decoration:none;
  overflow-wrap:anywhere;
  transition:color var(--tm-zeig) var(--weich), translate var(--tm-zeig) var(--weich);
}
@media (hover:hover) and (pointer:fine){
  .termin-ruf:hover,
  .termin-post:hover{ color:var(--blau-hell); translate:2px 0 }
}
.termin-ruf:focus-visible,
.termin-post:focus-visible{ color:var(--blau-hell); outline:3px solid var(--blau-hell); outline-offset:3px }

.termin-info-weg{
  display:inline-flex;
  align-items:center;
  gap:.45em;
  margin-top:auto;
  padding-top:.5rem;
  font-size:.87rem;
  font-weight:800;
  color:var(--blau);
  text-decoration:none;
}
.termin-info-weg span{ transition:translate var(--tm-zeig) var(--weich) }
@media (hover:hover) and (pointer:fine){
  .termin-info-weg:hover span{ translate:5px 0 }
}
.termin-info-weg:focus-visible span{ translate:5px 0 }

/* Die Oeffnungszeiten als zweispaltige Liste.
   Die Spalten stehen 1fr | auto und NICHT auto | 1fr. Gemessen am 04.10.2026
   in einer 280 px breiten Karte: mit auto|1fr nahm der Tag („Montag bis
   Samstags") 140 px und die Uhrzeit brach nach „19:00" um — das Wort „Uhr"
   stand allein in der naechsten Zeile. Jetzt nimmt die Uhrzeit, was sie
   braucht, und der Tag bricht um; ein umgebrochener Tagesname liest sich,
   eine zerrissene Uhrzeit nicht. */
.termin-zeitliste{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  align-items:baseline;
  gap:.2rem .7rem;
  margin:0;
  font-size:.88rem;
  line-height:1.5;
}
.termin-zeitliste dt{ color:var(--text); font-weight:750; overflow-wrap:anywhere }
.termin-zeitliste dd{ margin:0; color:var(--text-leise); text-align:right; overflow-wrap:anywhere }
/* Eine Zeile ohne Uhrzeit ist ein Hinweis und laeuft ueber beide Spalten;
   ihr leeres dd wuerde sonst eine Zelle Platz nehmen. */
.termin-zeitliste dt.termin-zeit-hinweis{
  grid-column:1 / -1;
  font-weight:650;
  font-size:.85rem;
  color:var(--text-leise);
}
.termin-zeitliste dd.termin-zeit-hinweis{ display:none }


/* ============================================================================
   6 — DIE ANDEREN KALENDER ALS CHIPS
   ========================================================================= */
.termin-seite .termin-andere{                                /* 0-2-0 */
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:.6rem .9rem;
  margin-top:clamp(1.3rem,2.6vw,2.1rem);
  padding-top:clamp(1rem,2vw,1.5rem);
  border-top:1px solid var(--linie);
  /* Wie bei den Infokarten: Verzug nur auf das Einblenden. */
  transition:
    opacity   .7s var(--weich) 0ms,
    transform .7s var(--weich) 0ms;
}
.termin-andere-titel{
  font-size:.72rem;
  font-weight:850;
  letter-spacing:.15em;
  text-transform:uppercase;
  color:var(--text-leise);
}
.termin-seite .termin-andere ul{                             /* 0-2-0 */
  display:flex;
  flex-wrap:wrap;
  gap:.5rem;
  margin:0;
  padding:0;
  list-style:none;
}
/* Die Chips staffeln sich erst, wenn wirkung.js .auf gesetzt hat. Ohne
   JavaScript laeuft diese Regel nie an — und weil sie nichts verbirgt,
   stehen die Chips dann einfach sofort da. Kein Netz noetig. */
.termin-andere.auf li{                                       /* 0-2-0 */
  animation:tm-chip-auf .55s var(--weich) both;
  animation-delay:var(--einzug,0ms);
}
@keyframes tm-chip-auf{
  from{ opacity:0; transform:translateY(10px) scale(.96) }
  to  { opacity:1; transform:none }
}
.termin-andere li a{
  display:inline-flex;
  align-items:center;
  padding:.46em 1em;
  border-radius:var(--r-rund);
  background:rgba(255,255,255,.74);
  border:1px solid var(--linie);
  color:var(--blau);
  font-size:.87rem;
  font-weight:800;
  text-decoration:none;
  transition:
    background-color var(--tm-zeig) var(--weich),
    border-color     var(--tm-zeig) var(--weich),
    box-shadow       .4s var(--weich),
    translate        var(--tm-zeig) var(--weich);
}
@media (hover:hover) and (pointer:fine){
  .termin-andere li a:hover{
    background-color:#fff;
    border-color:var(--gold);
    box-shadow:0 10px 24px rgba(19,55,109,.1);
    translate:0 -2px;
  }
}
.termin-andere li a:focus-visible{
  background-color:#fff;
  border-color:var(--gold);
  outline:3px solid var(--blau-hell);
  outline-offset:3px;
}


/* ============================================================================
   7 — DIE AUSWAHLKACHELN
   Das Kacheldesign bleibt (seiten.css, teil-bewegung.css). Hier kommt dazu:
   ein Lichtstrich beim Zeigen und eine Anordnung, die am Ende keine leere
   Zelle stehen laesst.
   ========================================================================= */

/*
 * Gezaehlt: FUENF Kalender. Im Raster aus seiten.css
 * (auto-fill, minmax(312px,1fr)) ergeben fuenf Kacheln bei 1180 px drei in
 * der ersten und zwei in der zweiten Reihe — und rechts daneben ein leeres
 * Drittel. Genau solche Flaechen hat Christopher am 04.10.2026 gemeldet.
 * Mit flex-wrap gibt es keine leere Zelle: die letzte Reihe wird mittig
 * gesetzt, die Kacheln wachsen bis hoechstens 420 px. min-width:0 ist
 * Pflicht, sonst waechst eine lange Anschrift die Reihe auf (das Netz gegen
 * Querscrollen in bau.css faengt genau diesen Fall).
 */
.termin-seite .termin-wahl.filialen{                         /* 0-3-0 */
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:clamp(.9rem,1.6vw,1.25rem);
}
.termin-seite .termin-wahl.filialen > .termin-kachel{        /* 0-4-0 */
  flex:1 1 312px;
  min-width:0;
  max-width:min(100%,420px);
  position:relative;
}

/* Der Lichtstrich beim Zeigen.
   Er klammert sich selbst ab (overflow:hidden auf dem Strich, nicht auf der
   Kachel): teil-bewegung.css legt den tieferen Schatten der Kachel auf
   .filiale:not(.glas)::after, und ein overflow:hidden auf der Kachel wuerde
   genau diesen Schatten abschneiden.
   0-2-0, weil seiten.css .termin-kachel > * (0-1-0) auf position:relative
   und z-index:1 setzt — mit 0-1-0 bliebe der Strich im Fluss. */
.termin-seite .termin-kachel > .termin-kachel-schein{        /* 0-3-0 */
  position:absolute;
  inset:0;
  z-index:2;
  border-radius:inherit;
  overflow:hidden;
  pointer-events:none;
}
.termin-kachel-schein::before{
  content:"";
  position:absolute;
  inset:-25%;
  background:linear-gradient(104deg,
    transparent 42%, rgba(255,255,255,.7) 50%, transparent 58%);
  translate:-130% 0;
  opacity:0;
  transition:translate .9s var(--weich), opacity .35s var(--weich);
}
@media (hover:hover) and (pointer:fine){
  .termin-kachel:hover .termin-kachel-schein::before{ translate:130% 0; opacity:1 }
}
.termin-kachel:focus-visible .termin-kachel-schein::before{ translate:130% 0; opacity:1 }

/* Der leuchtende Punkt steht in der ersten Zeitzeile. Die Zeile ist ein
   Flex-Element geworden, damit Punkt und Text auf einer Grundlinie sitzen. */
/* Erst die Sperre sichern, DANN die Zeile zum Flex-Element machen.
   Beim Gegenlesen am 04.10.2026 gefunden: .termin-seite .termin-zeiten span
   wiegt 0-2-1 (zwei Klassen, ein Typ) und schlaegt damit
   teil-offen.css .offen-punkt[hidden]{display:none} mit 0-2-0 — der
   ausgeblendete Punkt der Oeffnungsanzeige waere wieder aufgetaucht.
   Der Kommentar daneben zaehlte die Spezifitaet falsch als 0-3-0. */
.termin-seite .termin-zeiten span[hidden]{ display:none }

.termin-seite .termin-zeiten span{                           /* 0-2-1 */
  display:flex;
  align-items:center;
  min-width:0;
}


/* ============================================================================
   8 — SCHMALE FENSTER
   Haltepunkte 1660 / 940 / 430. 900 kommt dazu, weil seiten.css dort die
   Kalenderhoehe umschaltet.
   ========================================================================= */

/* Bis 1660 px bleibt die Bahn, wie sie ist — nur die Kopfkachel darf etwas
   kompakter werden, damit Text und Zeichen nicht aneinanderstossen. */
@media (max-width:1660px){
  .termin-seite .kopfzeile.termin-kopf{                      /* 0-3-0 */
    gap:clamp(1rem,2.4vw,2rem);
  }
}

/*
 * Ab hier steht der Text unter Bild und Zeichen.
 * teil-termin.css macht das ab 720 px mit flex-direction:column-reverse
 * (0-3-0). Mit dem Filialfoto waere die Reihenfolge dort Zeichen, Text,
 * Bild — das Bild stuende ganz unten. Diese Regel hat dieselbe Spezifitaet,
 * laedt spaeter und ordnet neu: oben Bild und Zeichen nebeneinander,
 * darunter der Text ueber die volle Breite.
 */
@media (max-width:940px){
  .termin-seite .kopfzeile.termin-kopf{                      /* 0-3-0 */
    flex-direction:row;
    flex-wrap:wrap;
    align-items:center;
    gap:1rem clamp(.9rem,3vw,1.4rem);
    padding:clamp(1.3rem,4vw,2rem) clamp(1.2rem,3.6vw,1.9rem);
  }
  .termin-seite .termin-kopf-text{                           /* 0-2-0 */
    order:3;
    flex:1 1 100%;
    max-width:none;
  }
  .termin-seite .termin-kopf-bild{ order:1; width:clamp(72px,18vw,96px) }   /* 0-2-0 */
  .termin-seite .termin-zeichen{ order:2; width:clamp(78px,20vw,104px) }    /* 0-2-0 */
  .termin-seite .termin-zeichen-gross{ width:clamp(84px,22vw,112px) }       /* 0-2-0 */
  .termin-seite .termin-kopf-linie{ width:clamp(56px,30%,110px) }           /* 0-2-0 */
  .termin-seite .kopfzeile.termin-kopf > .termin-kopf-blume{                /* 0-4-0 */
    width:min(62%,300px);
    bottom:-48%;
    right:-12%;
  }
}

@media (max-width:430px){
  /*
   * Der Kalender nimmt die ganze Breite des Blattes.
   * Gerechnet bei 375 px Fensterbreite:
   *   .blattrahmen  Polsterung clamp(10px,1.1vw,18px)  -> 10 px je Seite
   *   .bahn         Polsterung var(--gasse)
   *                 = clamp(16px,4vw,56px), 4vw = 15 px -> 16 px je Seite
   *   .termin-rahmen Polsterung clamp(6px,.9vw,14px) + 1 px Rand -> 7 px
   *   Bisher:  375 - 20 - 32 - 14 = 309 px fuer den Kalender.
   *   Jetzt:   375 - 20            = 355 px.  46 px mehr.
   * Der negative Rand ist GENAU --gasse und damit die Polsterung von .bahn —
   * er fuellt sie aus, er ueberschreitet sie nicht. Die Seite kann dadurch
   * nicht waagerecht wachsen; .seitenblatt schneidet ohnehin ab
   * (bau.css, overflow:hidden).
   */
  .termin-seite .termin-rahmen{                              /* 0-2-0 */
    margin-inline:calc(var(--gasse) * -1);
    padding:0;
    border-inline:0;
    border-radius:var(--r-s);
  }
  .termin-seite .termin-fenster{ border-radius:0 }           /* 0-2-0 */

  .termin-seite .termin-zeichen{ width:72px }                /* 0-2-0 */
  .termin-seite .termin-zeichen-gross{ width:78px }          /* 0-2-0 */
  .termin-seite .termin-kopf-bild{ width:66px; border-width:2px }  /* 0-2-0 */
  .termin-seite .termin-schritte li{ font-size:.83rem; padding:.42em .85em .42em .42em }
  .termin-seite .termin-infos{ grid-template-columns:1fr }   /* 0-2-0 */
  .termin-zeitliste{ gap:.18rem .5rem; font-size:.84rem }
  .termin-andere-titel{ flex:1 1 100% }
}


/* ============================================================================
   9 — ERSTES NETZ: KEIN JAVASCRIPT
   wirkung.js deckt .einblenden spaetestens nach 12 s auf. Ist JavaScript im
   Browser ABGESCHALTET, laeuft auch dieser Zeitgeber nicht. Dann gilt dieser
   Block. Kennt ein Browser (scripting) nicht, faellt er weg und das
   12-Sekunden-Netz traegt allein.

   bau.css setzt .einblenden{opacity:0} mit 0-1-0. Hier steht 0-2-0 und 0-3-0
   — beides spezifischer UND spaeter. Die Doppelung mit :not(.auf) ist
   Absicht: am 03.10.2026 ist genau an einer zu schwachen Netzregel ein
   gedrehtes Band 72 px versetzt stehen geblieben.
   ========================================================================= */
@media (scripting: none){
  .termin-seite .einblenden,
  .termin-seite .einblenden:not(.auf){
    opacity:1;
    transform:none;
    transition:none;
    will-change:auto;
  }
  /* Der Lichtstrich der Kachel haengt an :hover, nicht an einer Klasse —
     ohne Skript ist er unveraendert in Ordnung. Die Chips staffeln sich
     ueber .auf; ohne Skript stehen sie sofort, weil tm-chip-auf gar nicht
     erst anlaeuft und nichts verbirgt. */
}


/* ============================================================================
   10 — ZWEITES NETZ: KEINE BEWEGUNG
   bau.css zieht unter prefers-reduced-motion jede Dauer auf 0,001 ms. Das
   allein genuegt hier nicht: eine Animation mit fill-mode „both" steht dann
   zwar sofort auf ihrem Endwert, aber Dauerlaeufer wie der kreisende Ring
   oder das Schweben wuerden in 0,001 ms endlos springen. Deshalb wird hier
   abgeschaltet, nicht gedaempft — Punkt fuer Punkt.
   ========================================================================= */
@media (prefers-reduced-motion:reduce){
  /* Die Blume des Lebens ist ein Wasserzeichen mit opacity .06 — sie steht
     ABSICHTLICH fast unsichtbar da. Sie stand im Sammelblock darunter, der
     pauschal opacity:1 setzt; damit waere sie in voller Staerke ueber den
     Kopfbereich gelegt worden. Beim Gegenlesen am 04.10.2026 gefunden.
     Hier bekommt sie nur ihre Drehung genommen, nicht ihre Zurueckhaltung. */
  .termin-seite .kopfzeile.termin-kopf > .termin-kopf-blume{
    animation:none;
    opacity:.06;
  }

  .termin-kopf-fest,
  .termin-seite .kopfzeile.termin-kopf::before,
  .termin-kopf-fest .termin-kopf-text .marke,
  .termin-kopf-fest .termin-kopf-text > p,
  .termin-kopf-fest > .termin-kopf-schimmer,
  .termin-seite .termin-kopf-linie,
  .termin-seite .termin-kopf-bild,
  .termin-seite .termin-schritte li,
  .termin-seite .termin-zeichen,
  .termin-seite .termin-weg,
  .termin-seite .termin-rahmen,
  .termin-andere.auf li{
    animation:none;
    opacity:1;
    transform:none;
    translate:none;
    rotate:none;
    scale:none;
  }
  /* Der Lichtstrich ist der einzige Teil, der sichtbar bleiben WUERDE, wenn
     man ihn nur anhaelt — er wird ganz weggenommen. */
  .termin-seite .kopfzeile.termin-kopf > .termin-kopf-schimmer{ display:none }

  .tz-ring-zwei,
  .tz-funke,
  .tz-kranz,
  .termin-info-zeichen{
    animation:none;
    transform:none;
    rotate:none;
    opacity:1;
  }
  /* Der Kranz ist nur als wachsender Ring gedacht; still waere er ein
     zweiter Kreis um den Punkt. */
  .tz-kranz{ display:none }
  /* Gezeichnet wird nicht — die Linien stehen fertig da. */
  .termin-kopf-fest .tz-blatt,
  .termin-kopf-fest .tz-linie{
    animation:none;
    stroke-dasharray:none;
    stroke-dashoffset:0;
  }

  .termin-seite .termin-info,
  .termin-seite .termin-andere,
  .termin-weg-zurueck,
  .termin-weg-pfeil,
  .termin-andere li a,
  .termin-ruf,
  .termin-post,
  .termin-info-weg span,
  .termin-kachel-schein::before{
    transition:none;
    translate:none;
  }
  .termin-seite .termin-info:hover{ translate:none }
  .termin-kachel-schein::before{ display:none }
}