/* FF Waidegg – Terminhinweis „Kalenderblatt-Lasche“ (nur Startseite)
   Farben und Schriften aus style.css. Bewegung nur bei prefers-reduced-motion: no-preference.
   Telefon (< 600px): schmale Leiste direkt unter dem Kopf, klappt im Seitenfluss auf.
   Tablet/Desktop: Blatt hängt an der Unterkante des klebenden Kopfes, rechts an der Inhaltskante –
   flach, damit es über dem Titelbild endet; ab 85rem als ganzes Kalenderblatt im freien Rand daneben. */

[data-termin][hidden] { display: none !important; }

/* Ohne JavaScript (oder bei Fehler): schlichter Hinweiskasten */
.termin-fallback {
  width: min(calc(100% - 2rem), calc(var(--max) - 2.5rem));
  margin: 1rem auto 0;
  padding: .9rem 1rem;
  background: var(--sheet);
  border: 1px solid var(--line);
  border-left: 4px solid var(--ember);
}
.termin-fallback p { margin: 0; }
.termin-fallback .kicker { margin-bottom: .2rem; }
.termin-fallback strong { font-family: var(--display); font-weight: 500; letter-spacing: .04em; text-transform: uppercase; font-size: 1.25rem; }
.termin.is-bereit .termin-fallback { display: none; }
.termin:not(.is-bereit) .termin-ui { display: none; }

/* Inhalt des Detailblatts */
.tl-inhalt { padding: .9rem 1.1rem 1rem; }
.tl-titel { margin: .15rem 0 0; font-size: 1.7rem; }
.tl-titel:focus { outline: none; }
.tl-titel:focus-visible { outline: 2px solid var(--ember); outline-offset: 3px; }
.tl-zusatz { margin: .1rem 0 .6rem; color: var(--ink-soft); }
.tl-wann { margin: 0 0 .5rem; font-weight: 600; }
.tl-wann time { color: var(--ember-deep); }
.tl-countdown { margin: 0 0 .9rem; font-family: var(--display); letter-spacing: .1em; text-transform: uppercase; color: var(--ember); }
.tl-aktionen { display: flex; flex-wrap: wrap; gap: .5rem; margin: 0; }
.tl-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem; flex: 1 1 auto;
  min-height: 2.75rem; padding: .5rem .85rem;
  font-family: var(--display); font-size: .92rem; letter-spacing: .08em; text-transform: uppercase;
  text-decoration: none; white-space: nowrap;
  background: var(--ember); color: var(--sheet); border: 1px solid var(--ember-deep);
}
.tl-btn:hover { background: var(--ember-deep); color: var(--sheet); }
.tl-btn--ruhig { background: var(--sheet); color: var(--ink); border-color: var(--ink-soft); }
.tl-btn--ruhig:hover { background: var(--paper); color: var(--ember-deep); border-color: var(--ember); }
.tl-btn[hidden] { display: none; }
.tl-btn svg { width: 1.15rem; height: 1.15rem; flex: 0 0 auto; }
.tl-zuklappen {
  display: block; margin: .6rem auto 0; min-height: 2.75rem; padding: .3rem .8rem;
  background: none; border: 0; cursor: pointer; color: var(--muted);
  font-family: var(--display); font-size: .85rem; letter-spacing: .12em; text-transform: uppercase;
}
.tl-zuklappen:hover { color: var(--ember-deep); }

/* Pfeil im Blatt */
.tl-pfeil { flex: 0 0 auto; width: .5rem; height: .5rem; border-right: 2px solid var(--ember); border-bottom: 2px solid var(--ember); transform: translateY(-2px) rotate(45deg); }
.termin.is-offen .tl-pfeil { transform: translateY(2px) rotate(225deg); }

/* ---------- Telefon: Leiste unter dem Kopf ---------- */
@media (max-width: 599px) {
  .tl { background: var(--sheet); border-bottom: 1px solid var(--line); }
  .tl-blatt {
    display: flex; align-items: center; gap: .7rem; width: 100%; min-height: 3rem;
    padding: .35rem 1rem; background: transparent; border: 0; color: var(--ink); text-align: left; cursor: pointer;
    font: inherit;
  }
  .tl-blatt:focus-visible { outline: 3px solid var(--ember); outline-offset: -3px; }
  .tl-datum {
    flex: 0 0 auto; display: flex; flex-direction: column; align-items: center; width: 2.6rem;
    border: 1px solid var(--line); background: var(--paper);
    font-family: var(--display); text-transform: uppercase; line-height: 1;
  }
  .tl-monat { align-self: stretch; text-align: center; padding: .15rem 0; background: var(--ember); color: var(--sheet); font-size: .66rem; letter-spacing: .1em; }
  .tl-tag { font-size: 1.15rem; font-weight: 500; padding: .12rem 0 .1rem; }
  .tl-wtag { display: none; }
  .tl-leiste { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; line-height: 1.2; }
  .tl-leiste-titel { font-family: var(--display); font-weight: 500; letter-spacing: .05em; text-transform: uppercase; font-size: 1rem; }
  .tl-leiste-info { font-size: .88rem; color: var(--ink-soft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .tl-pfeil { width: .6rem; height: .6rem; margin-right: .3rem; }
  .tl-details { display: grid; grid-template-rows: 0fr; visibility: hidden; }
  .termin.is-offen .tl-details { grid-template-rows: 1fr; visibility: visible; }
  .tl-innen { overflow: hidden; min-height: 0; }
  .tl-inhalt { padding: .2rem 1rem 1rem; border-top: 2px dashed var(--line); }
}

/* ---------- Tablet/Desktop: am Kopf hängendes Blatt ---------- */
@media (min-width: 600px) {
  .tl {
    position: fixed; z-index: 19; /* knapp unter dem Kopf (20): das Blatt kommt unter dessen Kante hervor */
    top: var(--termin-kopf, 7.4rem);
    right: calc(max(0px, (100vw - var(--max)) / 2) + 1.25rem);
    display: flex; flex-direction: column; align-items: flex-end;
    perspective: 900px;
  }
  .tl-blatt {
    position: relative; display: flex; align-items: stretch; height: 2.4rem; padding: 0;
    background: var(--sheet); color: var(--ink); border: 1px solid var(--line); border-top: 0;
    border-radius: 0 0 .25rem .25rem;
    box-shadow: 0 5px 12px rgba(28, 27, 25, .18);
    font-family: var(--display); text-transform: uppercase; line-height: 1; cursor: pointer;
    transform-origin: 50% 0;
  }
  .tl-blatt:focus-visible { outline: 3px solid var(--ember); outline-offset: 3px; }
  .tl-blatt::before { /* Ringbindung: zwei Ösen an der Oberkante */
    content: ""; position: absolute; z-index: 1; left: .3rem; right: .3rem; top: .15rem; height: .5rem;
    background:
      radial-gradient(circle, var(--paper) 0 .09rem, var(--coal) .1rem .17rem, transparent .19rem) 0 50% / .5rem .5rem no-repeat,
      radial-gradient(circle, var(--paper) 0 .09rem, var(--coal) .1rem .17rem, transparent .19rem) 100% 50% / .5rem .5rem no-repeat;
  }
  .tl-blatt::after { /* Eselsohr, hebt sich beim Überfahren */
    content: ""; position: absolute; right: -1px; bottom: -1px; width: .7rem; height: .7rem;
    background: linear-gradient(135deg, var(--sheet) 50%, #e6dccb 50%);
    box-shadow: -1px -1px 2px rgba(28, 27, 25, .15);
  }
  .tl-blatt:hover::after, .tl-blatt:focus-visible::after { width: 1.1rem; height: 1.1rem; }
  .tl-datum { display: flex; align-items: stretch; }
  .tl-monat { display: flex; align-items: center; padding: .55rem .5rem 0; background: var(--ember); color: var(--sheet); font-size: .8rem; letter-spacing: .12em; }
  .tl-tag { display: flex; align-items: center; padding: .15rem .35rem 0 .5rem; font-size: 1.55rem; font-weight: 500; }
  .tl-wtag { display: flex; align-items: center; padding-top: .15rem; font-size: .75rem; letter-spacing: .12em; color: var(--muted); }
  .tl-leiste { display: none; }
  .tl-pfeil { align-self: center; margin: 0 .7rem 0 .55rem; }

  .tl-details {
    width: min(22rem, calc(100vw - 2rem)); margin-top: .35rem;
    max-height: calc(100vh - var(--termin-kopf, 7.4rem) - 4rem); overflow-y: auto; overscroll-behavior: contain;
    background: var(--sheet); border: 1px solid var(--line); border-top: 3px solid var(--ember);
    box-shadow: 0 14px 30px rgba(28, 27, 25, .22);
    transform-origin: 50% 0; transform: rotateX(-88deg); opacity: 0; visibility: hidden;
  }
  .termin.is-offen .tl-details { transform: none; opacity: 1; visibility: visible; }
}

/* Breite Bildschirme: ganzes Kalenderblatt im freien Rand neben dem Inhalt, verdeckt nichts */
@media (min-width: 85rem) {
  .tl { right: calc(((100vw - var(--max)) / 2 - 5.4rem) / 2); }
  .tl-blatt { flex-direction: column; align-items: center; width: 5.4rem; height: auto; padding-bottom: .3rem; }
  .tl-blatt::before { top: .2rem; left: .9rem; right: .9rem; }
  .tl-datum { flex-direction: column; align-self: stretch; text-align: center; }
  .tl-monat { justify-content: center; padding: .7rem 0 .3rem; font-size: .85rem; letter-spacing: .14em; }
  .tl-tag { justify-content: center; padding: .3rem 0 .05rem; font-size: 2.6rem; }
  .tl-wtag { justify-content: center; padding: 0 0 .3rem; font-size: .78rem; letter-spacing: .14em; }
  .tl-datum::after { content: "Termin"; padding: .3rem 0 .1rem; border-top: 1px dashed var(--line); font-size: .72rem; letter-spacing: .18em; color: var(--ember); }
  .tl-pfeil { margin: .2rem auto .15rem; }
}

@media (prefers-reduced-motion: no-preference) {
  .tl-pfeil { transition: transform .2s; }
  @media (max-width: 599px) {
    .tl-details { transition: grid-template-rows .3s ease, visibility 0s linear .3s; }
    .termin.is-offen .tl-details { transition: grid-template-rows .3s ease, visibility 0s; }
  }
  @media (min-width: 600px) {
    .tl-blatt { animation: tl-schwingen 2.6s ease-in-out .6s 1; transition: transform .25s; } /* einmal kurz schwingen, dann Ruhe */
    .tl-blatt:hover { transform: rotate(-2.5deg); }
    .tl-blatt::after { transition: width .2s, height .2s; }
    .termin.is-offen .tl-blatt { animation: none; transform: none; }
    .tl-details { transition: transform .45s cubic-bezier(.2, .9, .3, 1.15), opacity .2s, visibility 0s linear .45s; }
    .termin.is-offen .tl-details { transition: transform .45s cubic-bezier(.2, .9, .3, 1.15), opacity .2s, visibility 0s; }
  }
}
@keyframes tl-schwingen {
  0%, 100% { transform: rotate(0); }
  20% { transform: rotate(-5deg); }
  45% { transform: rotate(3.5deg); }
  65% { transform: rotate(-2deg); }
  85% { transform: rotate(1deg); }
}

@media print { .termin-ui { display: none !important; } }