/* Zeitrückmeldung – klappt unter der Kopfzeile nach unten auf und wieder zu.
   Gemeinsam für alle Seiten. Die Zeiterfassung ist eine eigene Anwendung; sie
   läuft hier in einem Rahmen, damit man für eine Stundenmeldung nicht die
   Seite verlassen muss.

   Bewusst im normalen Seitenfluss und nicht als schwebendes Fenster: der
   Inhalt darunter rutscht nach, nichts wird verdeckt. */

.zeit-bereich {
  overflow: hidden;
  max-height: 0;
  transition: max-height .3s ease;
  margin-bottom: 0;
  /* Wird beim Aufklappen aus der Fensterhöhe gesetzt (siehe zeit.js). Der
     Vorgabewert greift nur, falls das Skript nicht dazu kommt. */
  --zeit-h: 60vh;
}
.zeit-bereich.offen {
  /* Rahmenhöhe plus Kopf-, Fußzeile und Rand, damit nichts abgeschnitten wird. */
  max-height: calc(var(--zeit-h) + 112px);
  margin-bottom: 18px;
}
@media (prefers-reduced-motion: reduce) {
  .zeit-bereich { transition: none; }
}

.zeit-kasten {
  background: var(--surface-1); border: 1px solid var(--ring);
  border-radius: 12px; overflow: hidden;
}
.zeit-kopf {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 9px 11px 9px 14px; border-bottom: 1px solid var(--ring);
  background: var(--plane);
}
.zeit-titel { font-size: 13px; font-weight: 650; letter-spacing: -0.01em; }
.zeit-knoepfe { display: flex; gap: 6px; align-items: center; }
.zeit-knoepfe button { font: inherit; font-size: 12px; padding: 4px 10px; border-radius: 7px;
                       border: 1px solid var(--ring); background: var(--surface-1);
                       color: var(--ink); cursor: pointer; }
.zeit-knoepfe button:hover { background: var(--plane); }
.zeit-knoepfe a { text-decoration: none; }

/* Weißer Grund: die fremde App bringt ihr eigenes Aussehen mit und soll im
   Dunkelmodus nicht durchscheinen. */
.zeit-rahmen { display: block; border: 0; width: 100%; height: var(--zeit-h);
               background: #fff; }
.zeit-fuss { font-size: 11.5px; color: var(--muted); padding: 6px 12px;
             border-top: 1px solid var(--ring); background: var(--plane); }
.zeit-fuss a { color: var(--akzent, #2a78d6); }