/*
Theme Name: TANGO RACING Child
Theme URI: https://tango-racing.com/
Description: Child-Theme von Twenty Twenty-Five für TANGO RACING. Design-Tokens (Farben, Typografie, Breiten) liegen in theme.json. Schriften werden lokal gehostet.
Author: Bernhard Gehberger
Template: twentytwentyfive
Version: 1.1.0
Requires at least: 6.7
Tested up to: 7.1
Requires PHP: 8.0
Text Domain: tango-racing-child
*/

/* ==========================================================================
   Diese Datei enthält ausschliesslich, was theme.json nicht abbilden kann:
   Layout-Zwänge, Zustände (:hover, aktive Seite), Responsive-Verhalten.
   Farben und Schriften kommen als CSS-Variablen aus theme.json.

   Palette-Slugs: bg · bg-alt · card · primary · accent · glow · link-hover
                  heading · body · muted · footer · line · white
   Achtung: Slugs dürfen nicht text/background/border/link heissen — WordPress
   belegt diese Namen als Marker-Klassen und überschreibt sie mit !important.
   ========================================================================== */

/* ==========================================================================
   1. Header
   ========================================================================== */

.tr-header {
  position: sticky;
  top: 0;
  z-index: 100;
  border-bottom: 1px solid var(--wp--preset--color--line);
}

/* Sticky-Versatz, wenn die WordPress-Adminleiste sichtbar ist */
.admin-bar .tr-header { top: 32px; }

@media screen and (max-width: 782px) {
  .admin-bar .tr-header { top: 46px; }
}

.tr-header .tr-header-inner { flex-wrap: nowrap; }

/* Die rechte Gruppe fuellt die Restbreite: Navigation links, Buchen-Knopf
   rechts. Der feste Vorlauf haelt Logo und Menue naeher zusammen als das
   fruehere "margin-left: auto", das die Navigation ganz nach rechts schob. */
.tr-header .tr-header-right {
  flex-wrap: nowrap;
  margin-left: 0;
  flex: 1 1 auto;
  justify-content: space-between;
  padding-left: 90px;
}

@media (max-width: 1350px) {
  .tr-header .tr-header-right { padding-left: 50px; }
}

@media (max-width: 1250px) {
  .tr-header .tr-header-right {
    padding-left: 0;
    flex: 0 0 auto;
    margin-left: auto;
    justify-content: flex-end;
  }
}

/* Logo darf im Flex-Layout nie gestaucht werden */
.tr-header .wp-block-site-logo { flex-shrink: 0; }

.tr-header .wp-block-site-logo img {
  display: block;
  height: auto;
}

/* --- Navigation ----------------------------------------------------------- */

.tr-header .tr-nav .wp-block-navigation__container {
  gap: 22px;
  flex-wrap: nowrap;
}

.tr-header .tr-nav .wp-block-navigation-item__content { white-space: nowrap; }

.tr-header .tr-nav a {
  text-decoration: none;
  padding-bottom: 2px;
  border-bottom: 2px solid transparent;
  transition: color .2s ease, border-color .2s ease;
}

.tr-header .tr-nav a:hover { border-bottom-color: var(--wp--preset--color--link-hover); }

.tr-header .tr-nav .current-menu-item > a,
.tr-header .tr-nav .current_page_item > a,
.tr-header .tr-nav .current-menu-ancestor > a {
  color: var(--wp--preset--color--glow);
  border-bottom-color: var(--wp--preset--color--glow);
}

/* --- Buchen-Button -------------------------------------------------------- */
/* Grössen bewusst hier statt inline im Block — Inline-Styles würden die
   Responsive-Regeln weiter unten überstimmen. */

.tr-header .tr-header-cta .wp-block-button__link {
  background-color: var(--wp--preset--color--accent);
  color: var(--wp--preset--color--white);
  border-radius: 4px;
  font-family: var(--wp--preset--font-family--nav);
  font-weight: 700;
  font-size: 15px;
  letter-spacing: 0.3px;
  padding: 12px 22px;
  white-space: nowrap;
  transition: background-color .2s ease;
}

.tr-header .tr-header-cta .wp-block-button__link:hover {
  background-color: var(--wp--preset--color--glow);
}

/* ==========================================================================
   2. Seitenkopf (page, single, archive, search)
   ========================================================================== */

.tr-page-header {
  border-bottom: 1px solid var(--wp--preset--color--line);
}

.tr-page-header h1,
.tr-page-header .wp-block-post-title,
.tr-page-header .wp-block-query-title {
  margin: 0;
  color: var(--wp--preset--color--heading);
}

.tr-page-header .wp-block-post-date { margin-bottom: 10px; }

/* ==========================================================================
   3. Beiträge
   ========================================================================== */

/* Beitragstitel dürfen nicht die Linkfarbe erben */
.wp-block-post-title a {
  color: var(--wp--preset--color--heading);
  text-decoration: none;
  transition: color .2s ease;
}

.wp-block-post-title a:hover { color: var(--wp--preset--color--link-hover); }

/* --- Beitragsraster (News, Archiv, Suche) --------------------------------- */

.tr-post-grid { gap: 40px 32px; }

.tr-post-grid > li {
  display: flex;
  flex-direction: column;
  background-color: var(--wp--preset--color--card);
  border: 1px solid var(--wp--preset--color--line);
  border-radius: 8px;
  overflow: hidden;
  padding: 0 0 24px;
}

.tr-post-grid > li > *:not(.wp-block-post-featured-image) {
  margin-left: 24px;
  margin-right: 24px;
}

.tr-post-grid .wp-block-post-featured-image {
  margin: 0 0 20px;
}

.tr-post-grid .wp-block-post-featured-image img {
  width: 100%;
  border-radius: 0;
  object-fit: cover;
}

.tr-post-grid .wp-block-post-title {
  margin: 0 24px 12px;
  line-height: 1.25;
}

.tr-post-grid .wp-block-post-excerpt {
  flex: 1 1 auto;
  color: var(--wp--preset--color--body);
}

.tr-post-grid .wp-block-post-excerpt__more-link {
  display: inline-block;
  margin-top: 10px;
  color: var(--wp--preset--color--glow);
  font-weight: 600;
  text-decoration: none;
}

.tr-post-grid .wp-block-post-excerpt__more-link:hover {
  color: var(--wp--preset--color--link-hover);
}

.tr-post-grid .wp-block-post-date { margin-top: 16px; }

@media (max-width: 900px) {
  .tr-post-grid { grid-template-columns: repeat(2, 1fr) !important; }
}

@media (max-width: 600px) {
  .tr-post-grid { grid-template-columns: 1fr !important; }
}

/* --- Pagination und Beitragsnavigation ------------------------------------ */

.wp-block-query-pagination { gap: 14px; }

.wp-block-query-pagination a,
.wp-block-query-pagination .page-numbers {
  padding: 6px 12px;
  border: 1px solid var(--wp--preset--color--line);
  border-radius: 4px;
  color: var(--wp--preset--color--body);
  text-decoration: none;
}

.wp-block-query-pagination a:hover {
  color: var(--wp--preset--color--heading);
  border-color: var(--wp--preset--color--glow);
}

.wp-block-query-pagination .page-numbers.current {
  background-color: var(--wp--preset--color--primary);
  border-color: var(--wp--preset--color--primary);
  color: var(--wp--preset--color--white);
}

.wp-block-post-navigation-link {
  display: inline-block;
  margin: 24px 24px 0 0;
}

.wp-block-post-navigation-link a {
  color: var(--wp--preset--color--body);
  text-decoration: none;
}

.wp-block-post-navigation-link a:hover { color: var(--wp--preset--color--link-hover); }

/* --- Vertrauensleiste unter dem Hero -------------------------------------- */
.tr-chip {
  padding: 10px 14px;
  border: 1px solid var(--wp--preset--color--line);
  border-radius: 4px;
  background-color: var(--wp--preset--color--card);
}

.tr-chips .wp-block-column {
  display: flex;
  align-items: stretch;
}

.tr-chips .tr-chip {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

@media (max-width: 780px) {
  .tr-chips { flex-wrap: wrap !important; gap: 10px; }
  .tr-chips .wp-block-column { flex-basis: calc(50% - 5px) !important; }
}

/* --- Karten (Startseite, Zielgruppen und Zitate) -------------------------- */
/* Hintergrund kommt aus dem Block (backgroundColor "card"), hier nur Form. */
.tr-card {
  height: 100%;
  padding: 32px;
  border: 1px solid var(--wp--preset--color--line);
  border-radius: 8px;
}

.tr-card-highlight {
  border-color: var(--wp--preset--color--primary);
}

.tr-card .wp-block-buttons { margin-top: auto; padding-top: 24px; }

/* Spalten mit Karten auf gleiche Hoehe ziehen */
.wp-block-columns:has(.tr-card) .wp-block-column { display: flex; }

.wp-block-columns:has(.tr-card) .tr-card {
  display: flex;
  flex-direction: column;
}

/* Augenbrauen-Zeile ueber Ueberschriften */
.tr-eyebrow { margin-top: 0; }

/* ==========================================================================
   4. Button-Paare ausserhalb des Headers
   ========================================================================== */

/* Button-Paare ausserhalb des Headers (className "tr-cta" auf wp:buttons) */
.tr-cta .wp-block-button__link {
  font-family: var(--wp--preset--font-family--nav);
  font-weight: 700;
  padding: 14px 28px;
  border-radius: 4px;
  transition: background-color .2s ease, border-color .2s ease, color .2s ease;
}

.tr-cta .wp-block-button:not(.is-style-outline) .wp-block-button__link {
  background-color: var(--wp--preset--color--accent);
  color: var(--wp--preset--color--white);
}

.tr-cta .wp-block-button:not(.is-style-outline) .wp-block-button__link:hover {
  background-color: var(--wp--preset--color--glow);
}

.tr-cta .is-style-outline .wp-block-button__link {
  border: 1px solid var(--wp--preset--color--line);
  color: var(--wp--preset--color--heading);
}

.tr-cta .is-style-outline .wp-block-button__link:hover {
  border-color: var(--wp--preset--color--glow);
  color: var(--wp--preset--color--glow);
}

/* Knoepfe in den Angebots-Karten und unter den Simulatoren: rote Umrandung */
.tr-card .tr-cta .is-style-outline .wp-block-button__link,
.tr-cta-sim .is-style-outline .wp-block-button__link {
  border-color: var(--wp--preset--color--accent);
}

.tr-card .tr-cta .is-style-outline .wp-block-button__link:hover,
.tr-cta-sim .is-style-outline .wp-block-button__link:hover {
  border-color: var(--wp--preset--color--glow);
  color: var(--wp--preset--color--glow);
}

/* Handlungsaufruf ueber dem Newsletter: Ueberschrift und Satz stehen oben,
   die Knoepfe sitzen mittig im verbleibenden Raum statt direkt unter dem Text. */
.tr-cta-cover .wp-block-cover__inner-container {
  display: flex;
  flex-direction: column;
  align-self: stretch;
  flex: 1 0 auto;
}

.tr-cta-cover .tr-cta {
  margin-top: auto;
  margin-bottom: auto;
}

/* Unterer Footer-Streifen: Links weiss, Farbe erst beim Ueberfahren. */
.tr-footer-bottom a {
  color: var(--wp--preset--color--heading);
}

.tr-footer-bottom a:hover,
.tr-footer-bottom a:focus {
  color: var(--wp--preset--color--link-hover);
}

/* ==========================================================================
   5. Footer
   ========================================================================== */

.tr-footer-links {
  list-style: none;
  margin: 0;
  padding-left: 0;
}

.tr-footer-links li { margin: 0 0 8px; }

.tr-footer-links a {
  color: var(--wp--preset--color--body);
  text-decoration: none;
}

.tr-footer-links a:hover {
  color: var(--wp--preset--color--link-hover);
}

/* ==========================================================================
   6. Scroll-Reveal
   Die Klasse tr-reveal wird per JS aus functions.php gesetzt.
   ========================================================================== */

@media (prefers-reduced-motion: no-preference) {
  .tr-reveal {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity .6s ease, transform .6s ease;
  }

  .tr-reveal.is-visible {
    opacity: 1;
    transform: none;
  }
}

/* ==========================================================================
   7. Mobiles Overlay-Menü
   Der Navigation-Block schaltet von Haus aus erst bei 600px auf das Overlay
   um. Logo, acht Menüpunkte und der CTA passen aber schon ab etwa 1250px
   nicht mehr nebeneinander.
   ========================================================================== */

@media (max-width: 1250px) {
  .tr-header .tr-nav .wp-block-navigation__responsive-container-open {
    display: flex;
    color: var(--wp--preset--color--heading);
  }

  .tr-header .tr-nav .wp-block-navigation__responsive-container:not(.is-menu-open) {
    display: none;
  }

  /* Unterhalb des Umschaltpunkts fuehrt der letzte Menuepunkt "Jetzt buchen"
     im Overlay zum Ziel — der Button waere doppelt und draengt das Logo zusammen. */
  .tr-header .tr-header-cta {
    display: none;
  }
}

/* Oberhalb des Umschaltpunkts uebernimmt der CTA-Button rechts im Kopf,
   der Menuepunkt "Jetzt buchen" waere dort doppelt. */
@media (min-width: 1251px) {
  .tr-header .tr-nav .tr-nav-buchung {
    display: none;
  }
}

/* Kein Rahmen um das Menuesymbol nach dem Anklicken.
   Bei Bedienung ueber die Tastatur bleibt die Fokusanzeige erhalten. */
.tr-header .tr-nav .wp-block-navigation__responsive-container-open,
.tr-header .tr-nav .wp-block-navigation__responsive-container-close {
  background: transparent;
  border: none;
  box-shadow: none;
}

.tr-header .tr-nav .wp-block-navigation__responsive-container-open:focus:not(:focus-visible),
.tr-header .tr-nav .wp-block-navigation__responsive-container-close:focus:not(:focus-visible) {
  outline: none;
  box-shadow: none;
}

/* Geoeffnetes Overlay */
.tr-header .tr-nav .wp-block-navigation__responsive-container.is-menu-open {
  background-color: var(--wp--preset--color--bg);
  padding: 24px;
}

/* Der Block vererbt justifyContent:right aus dem Desktop-Layout ins Overlay —
   dort soll das Menue die volle Breite nutzen und links ausgerichtet sein. */
.tr-header .tr-nav .is-menu-open .wp-block-navigation__responsive-container-content {
  width: 100%;
  padding-top: 56px;
  justify-content: flex-start;
  align-items: stretch;
}

.tr-header .tr-nav .is-menu-open .wp-block-navigation__container {
  width: 100%;
  justify-content: flex-start;
}

.tr-header .tr-nav .is-menu-open .wp-block-navigation__container {
  gap: 4px;
  align-items: stretch;
}

.tr-header .tr-nav .is-menu-open .wp-block-navigation-item {
  width: 100%;
  border-bottom: 1px solid var(--wp--preset--color--line);
}

.tr-header .tr-nav .is-menu-open .wp-block-navigation-item:last-child {
  border-bottom: none;
}

.tr-header .tr-nav .is-menu-open a {
  display: block;
  width: 100%;
  box-sizing: border-box;
  padding: 16px 4px;
  font-size: 19px;
  border-bottom: none;
  color: var(--wp--preset--color--heading);
}

.tr-header .tr-nav .is-menu-open a:hover {
  color: var(--wp--preset--color--link-hover);
}

/* "Jetzt buchen" steht als letzter Punkt im Overlay — optisch als Ziel hervorheben */
.tr-header .tr-nav .is-menu-open .tr-nav-buchung {
  border-bottom: none;
}

.tr-header .tr-nav .is-menu-open .tr-nav-buchung a {
  margin-top: 12px;
  padding: 16px;
  border-radius: 4px;
  background-color: var(--wp--preset--color--accent);
  color: var(--wp--preset--color--white);
  text-align: center;
  font-family: var(--wp--preset--font-family--nav);
  font-weight: 700;
}

.tr-header .tr-nav .is-menu-open .wp-block-navigation__responsive-container-close {
  color: var(--wp--preset--color--heading);
  top: 26px;
  right: 24px;
}

/* ==========================================================================
   8. Responsive Header
   ========================================================================== */

@media (max-width: 1350px) {
  .tr-header .tr-nav .wp-block-navigation__container { gap: 16px; }
  .tr-header .tr-nav a { font-size: 15px; }
  .tr-header .tr-header-right { gap: 18px; }
}

@media (max-width: 900px) {
  .tr-header .wp-block-site-logo img { width: 145px; }
}

@media (max-width: 480px) {
  .tr-header .wp-block-site-logo img { width: 130px; }
}

/* ==========================================================================
   9. Newsletter-Anmeldung (The Newsletter Plugin)
   Formular auf /newsletter/ und in der Startseiten-Sektion .tr-newsletter.
   Beschriftungen und Felder uebernehmen die Werte des Kontaktformulars der
   Live-Seite (mu-plugin tr-contact.php), damit beide Formulare gleich aussehen.
   ========================================================================== */

/* Das Plugin-Stylesheet laedt nach dem Child-Theme und setzt .tnp-form auf
   500px ohne Zentrierung. Dreifache Klasse sticht das. */
.tnp.tnp-form.tnp-subscription,
.tnp.tnp-form.tnp-profile,
.tnp-subscription,
.tnp-profile {
  max-width: 520px;
  margin-left: auto;
  margin-right: auto;
}

/* Kurze Bestaetigung nach dem Speichern der Newsletter-Angaben. */
.tr-hinweis {
  position: fixed;
  bottom: 28px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 9999;
  max-width: min(90vw, 560px);
  padding: 14px 22px;
  border-radius: 6px;
  background: #1E6B34;
  border: 1px solid #2E8B4A;
  color: #FFFFFF;
  font-family: var(--wp--preset--font-family--nav);
  font-size: 15px;
  font-weight: 600;
  text-align: center;
  box-shadow: 0 6px 24px rgba(0, 0, 0, .45);
  transition: opacity .4s ease, transform .4s ease;
}

.tr-hinweis.is-weg {
  opacity: 0;
  transform: translateX(-50%) translateY(12px);
  pointer-events: none;
}

/* Abmeldebereich unter dem Profilformular: gleiche Achse und Breite wie das
   Formular darueber, damit Text und Knopf nicht am linken Rand haengen. */
.tr-abmelden {
  max-width: 520px;
  margin: 36px auto 0;
  text-align: center;
}

.tr-abmelden p {
  margin: 0 0 16px;
}

.tnp-subscription form,
.tnp-profile form {
  margin: 0;
}

.tnp-subscription .tnp-field,
.tnp-profile .tnp-field {
  margin-bottom: 18px;
  text-align: left;
}

.tnp-subscription .tnp-field label,
.tnp-profile .tnp-field label {
  display: block;
  font-size: 13px;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--wp--preset--color--body);
  margin: 0 0 6px;
  font-family: var(--wp--preset--font-family--nav);
}

/* Pflichtfelder bekommen den roten Stern wie im Kontaktformular */
.tnp-subscription .tnp-field-firstname label::after,
.tnp-subscription .tnp-field-surname label::after,
.tnp-subscription .tnp-field-email label::after {
  content: " *";
  color: var(--wp--preset--color--glow);
}

.tnp-subscription form input[type="text"],
.tnp-subscription form input[type="email"],
.tnp-subscription form select,
.tnp-profile form input[type="text"],
.tnp-profile form input[type="email"],
.tnp-profile form select {
  width: 100%;
  box-sizing: border-box;
  background: #1a1a1a;
  border: 1px solid #333;
  border-radius: 6px;
  color: var(--wp--preset--color--heading);
  font-family: var(--wp--preset--font-family--body);
  font-size: 16px;
  line-height: 1.4;
  padding: 12px 14px;
  margin: 0;
}

.tnp-subscription form input[type="text"]:focus,
.tnp-subscription form input[type="email"]:focus,
.tnp-subscription form select:focus,
.tnp-profile form input[type="text"]:focus,
.tnp-profile form input[type="email"]:focus,
.tnp-profile form select:focus {
  outline: none;
  border-color: var(--wp--preset--color--glow);
  box-shadow: 0 0 0 2px rgba(160, 32, 32, .25);
}

.tnp-subscription form input::placeholder,
.tnp-profile form input::placeholder {
  color: #777;
}

/* Absende-Button — Optik des CTA-Buttons im Header, wie bisher */
.tnp-subscription form input.tnp-submit,
.tnp-subscription form input[type="submit"],
.tnp-profile form input.tnp-submit,
.tnp-profile form input[type="submit"] {
  width: auto;
  background-color: var(--wp--preset--color--accent);
  color: var(--wp--preset--color--white);
  border: none;
  border-radius: 4px;
  font-family: var(--wp--preset--font-family--nav);
  font-weight: 700;
  font-size: 15px;
  letter-spacing: 0.3px;
  padding: 12px 22px;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color .2s ease;
}

.tnp-subscription form input.tnp-submit:hover,
.tnp-subscription form input[type="submit"]:hover,
.tnp-profile form input.tnp-submit:hover,
.tnp-profile form input[type="submit"]:hover {
  background-color: var(--wp--preset--color--glow);
}

.tr-newsletter .tnp-field-button {
  text-align: center;
}

/* Das Profilformular des Plugins stellt die E-Mail-Adresse an den Anfang.
   Hier dieselbe Reihenfolge wie im Anmeldeformular: Vorname, Nachname, E-Mail. */
.tnp-profile form {
  display: flex;
  flex-direction: column;
}

.tnp-profile .tnp-field-firstname { order: 1; }
.tnp-profile .tnp-field-lastname  { order: 2; }
.tnp-profile .tnp-field-email     { order: 3; }
.tnp-profile .tnp-field-profile   { order: 4; }
.tnp-profile .tnp-field-list      { order: 5; }
.tnp-profile .tnp-field-button    { order: 6; }


/* Knoepfe auf den Abmelde- und Reaktivierungsseiten des Plugins bekommen
   dieselbe Optik wie der Anmelden-Knopf. */
.tnp-button-form.tnp-unsubscribe button.tnp-submit,
.tnp-button-form.tnp-unsubscribe input[type="submit"],
.tnp-button-form.tnp-reactivate button.tnp-submit,
.tnp-button-form.tnp-reactivate input[type="submit"] {
  background-color: var(--wp--preset--color--accent);
  color: var(--wp--preset--color--white);
  border: none;
  border-radius: 4px;
  font-family: var(--wp--preset--font-family--nav);
  font-weight: 700;
  font-size: 15px;
  letter-spacing: 0.3px;
  padding: 12px 22px;
  cursor: pointer;
  transition: background-color .2s ease;
}

.tnp-button-form.tnp-unsubscribe button.tnp-submit:hover,
.tnp-button-form.tnp-unsubscribe input[type="submit"]:hover,
.tnp-button-form.tnp-reactivate button.tnp-submit:hover,
.tnp-button-form.tnp-reactivate input[type="submit"]:hover {
  background-color: var(--wp--preset--color--glow);
}

/* Trennlinie ueber dem Footer — sonst geht er in den Seiteninhalt ueber,
   wenn der letzte Abschnitt denselben Hintergrund hat. */
.tr-footer {
  border-top: 1px solid var(--wp--preset--color--line);
}

/* Die untere Trennlinie im Footer laeuft ueber die ganze Breite, damit sie
   zur oberen passt. Der Separator sitzt in einem Container mit seitlichem
   Innenabstand — der wird hier ausgeglichen. */
.tr-footer .wp-block-separator.alignfull {
  max-width: none;
  width: calc(100% + var(--wp--style--root--padding-left, 24px) + var(--wp--style--root--padding-right, 24px));
  margin-left: calc(-1 * var(--wp--style--root--padding-left, 24px));
  margin-right: calc(-1 * var(--wp--style--root--padding-right, 24px));
  border: 0;
  border-top: 1px solid var(--wp--preset--color--line);
  opacity: 1;
}

/* ==========================================================================
   10. Ueberschriften auf schmalen Bildschirmen
   Die Hero-Groesse aus theme.json ergibt bei 375px noch 37,5px. Das laengste
   Wort der Startseiten-H1 ("RENNSIMULATOREN") braucht dabei 401px bei 347px
   verfuegbarer Breite und laeuft ueber.
   WordPress gibt die Preset-Groessenklassen mit !important aus, deshalb ist
   das hier ebenfalls noetig (siehe THEME-REGELN, Abschnitt 6).
   ========================================================================== */

@media (max-width: 782px) {
  h1.has-hero-font-size,
  .wp-block-cover h1.wp-block-heading {
    font-size: 34px !important;
  }
}

@media (max-width: 600px) {
  h1.has-hero-font-size,
  .wp-block-cover h1.wp-block-heading {
    font-size: 30px !important;
  }

  h2.wp-block-heading {
    font-size: 26px !important;
  }
}

@media (max-width: 420px) {
  h1.has-hero-font-size,
  .wp-block-cover h1.wp-block-heading {
    font-size: 27px !important;
  }
}

/* ==========================================================================
   11. Menuesymbol mit drei Strichen
   Der Navigation-Block des WordPress-Kerns zeichnet nur zwei Striche. Das
   verbreitete Zeichen hat drei. Das SVG kommt aus dem Kern und laesst sich
   nicht per Template austauschen, deshalb hier ersetzt.
   ========================================================================== */

.tr-header .tr-nav .wp-block-navigation__responsive-container-open svg {
  display: none;
}

.tr-header .tr-nav .wp-block-navigation__responsive-container-open {
  position: relative;
  width: 24px;
  height: 24px;
  padding: 0;
}

.tr-header .tr-nav .wp-block-navigation__responsive-container-open::before {
  content: "";
  position: absolute;
  left: 3px;
  right: 3px;
  top: 50%;
  height: 2px;
  transform: translateY(-50%);
  background-color: currentColor;
  box-shadow: 0 -7px 0 currentColor, 0 7px 0 currentColor;
}

/* Textbloecke im Footer — Formatierung wie auf der Live-Seite:
   14px, Textfarbe #BBBBBB (Slug "body"), Zeilenhoehe 1.8, Links in Weiss. */
.tr-footer-text {
  line-height: 1.8;
  margin-top: 0;
  margin-bottom: 0;
}

.tr-footer-hinweis {
  margin-top: 12px;
}

/* Zusatzsatz sitzt dicht unter dem Logo */
.tr-footer .wp-block-site-logo {
  margin: 0 0 12px;
}

/* Die erste Textzeile rechts soll optisch auf Hoehe der Logo-Oberkante sitzen.
   Zeilenhoehe 1,8 setzt die Schrift rund 6px unter die Boxoberkante — das wird
   hier ausgeglichen. */
.tr-footer .wp-block-columns > .wp-block-column:last-child {
  margin-top: -6px;
}

@media (max-width: 781px) {
  .tr-footer .wp-block-columns > .wp-block-column:last-child {
    margin-top: 0;
  }
}

.tr-footer p a {
  color: var(--wp--preset--color--white);
  text-decoration: none;
}

.tr-footer p a:hover {
  color: var(--wp--preset--color--link-hover);
}

/* ==========================================================================
   12. Links: keine Unterstreichung bei Hover, Fokus und Klick
   WordPress unterstreicht Links im Kern per
   ":root :where(a:where(:not(.wp-element-button)):hover)".
   ========================================================================== */

a:hover,
a:focus,
a:active,
:root :where(a:where(:not(.wp-element-button)):hover),
:root :where(.wp-block-post-title a:where(:not(.wp-element-button)):hover),
:root :where(.wp-block-navigation a:where(:not(.wp-element-button)):hover) {
  text-decoration: none;
}

/* Kein farbiger Rahmen um das Logo nach dem Anklicken.
   Bei Bedienung ueber die Tastatur bleibt die Fokusanzeige erhalten. */
.wp-block-site-logo a:focus:not(:focus-visible),
.wp-block-site-logo a:active {
  outline: none;
  box-shadow: none;
}

/* ==========================================================================
   13. Rechtstexte (Impressum, AGB, Datenschutz)
   Aufbau wie auf gehberger.at: kleine Zwischenueberschrift in Versalien,
   darunter der Text. Kein Kasten, kein Rahmen.
   ========================================================================== */

.tr-legal-heading {
  text-transform: uppercase;
  letter-spacing: 1px;
  font-family: var(--wp--preset--font-family--nav);
  font-weight: 700;
  margin: 36px 0 10px;
}

.tr-legal-heading:first-child {
  margin-top: 0;
}

.tr-legal-text {
  line-height: 1.45;
  margin: 0;
}

.tr-legal-text a {
  color: var(--wp--preset--color--white);
  text-decoration: none;
}

.tr-legal-text a:hover {
  color: var(--wp--preset--color--link-hover);
}

/* ==========================================================================
   14. Seitenkopf kompakter
   Der Kopfbereich war im Verhaeltnis zur schmalen Navigationsleiste zu hoch
   und die Ueberschrift zu gross.
   ========================================================================== */

.tr-page-header h1,
.tr-page-header .wp-block-post-title,
.tr-page-header .wp-block-query-title {
  font-size: 42px !important;
  line-height: 1.15;
  text-align: center;
}

@media (max-width: 900px) {
  .tr-page-header h1,
  .tr-page-header .wp-block-post-title,
  .tr-page-header .wp-block-query-title {
    font-size: 34px !important;
  }
}

@media (max-width: 600px) {
  .tr-page-header h1,
  .tr-page-header .wp-block-post-title,
  .tr-page-header .wp-block-query-title {
    font-size: 28px !important;
  }
}

/* ==========================================================================
   15. Kundenstimmen: Kollage, Erfahrungsbericht, Presse
   Die Bewertungsbilder haben sehr verschiedene Formate (107 bis 387 Pixel
   hoch). Ein starres Raster wuerde beschneiden oder Luecken reissen, deshalb
   ein Spaltensatz: jedes Bild behaelt sein Format.
   ========================================================================== */

.tr-kollage.wp-block-gallery {
  display: block !important;
  column-gap: 20px;
}

/* Die fuenf gerahmten Bewertungskarten sind nur 330 Pixel breit. In drei
   Spalten wuerden sie hochgerechnet und der Abschnitt unnoetig hoch. In
   einer Reihe zu fuenft bleiben sie unter ihrer Originalbreite. */
.tr-kollage-gross.wp-block-gallery { columns: 5; }

/* Die Google-Aufnahmen sind rund 495 Pixel breit und vertragen drei Spalten. */
.tr-kollage-klein.wp-block-gallery { columns: 3; }

.tr-kollage.wp-block-gallery .wp-block-image {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  flex: none !important;
  margin: 0 0 20px !important;
  break-inside: avoid;
}

.tr-kollage.wp-block-gallery .wp-block-image img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 8px;
}

/* Der Gallery-Block blendet Bildunterschriften ueber dem Bild ein. Hier
   tragen die Bilder keine, die Flaeche wuerde nur Platz kosten. */
.tr-kollage.wp-block-gallery .wp-block-image figcaption { display: none; }

@media (max-width: 1100px) {
  .tr-kollage-gross.wp-block-gallery { columns: 3; }
}

@media (max-width: 900px) {
  .tr-kollage-gross.wp-block-gallery { columns: 2; }
  .tr-kollage-klein.wp-block-gallery { columns: 2; }
}

@media (max-width: 600px) {
  .tr-kollage-gross.wp-block-gallery,
  .tr-kollage-klein.wp-block-gallery { columns: 1; }
}

/* Erfahrungsbericht zweispaltig: auf schmalen Schirmen untereinander,
   dort braucht das Bild keinen Abstand nach unten mehr als der Text. */
@media (max-width: 780px) {
  .tr-bericht .wp-block-columns { gap: 24px; }
}

/* Erfahrungsbericht und Presseartikel: Bild oben in der Karte, Text darunter */
.tr-bericht .wp-block-image { margin: 0; }
.tr-bericht > .wp-block-image { margin-bottom: 28px; }

.tr-bericht .wp-block-image img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 6px;
}

.tr-bericht .wp-block-image figcaption {
  margin-top: 10px;
  color: var(--wp--preset--color--muted);
  font-size: var(--wp--preset--font-size--sm);
  text-align: center;
}

/* Der Presseausschnitt ist eine Doppelseite, klein nicht lesbar.
   Der Zeiger zeigt an, dass er sich vergroessern laesst. */
.tr-bericht .wp-lightbox-container img { cursor: zoom-in; }

/* ==========================================================================
   16. FAQ: aufklappbare Fragen (core/details)
   Nur die Fragen stehen sichtbar, die Antwort klappt beim Klick auf.
   ========================================================================== */

.tr-faq .wp-block-details {
  border-top: 1px solid var(--wp--preset--color--line);
  padding: 0;
  margin: 0;
}

.tr-faq .wp-block-details:last-child {
  border-bottom: 1px solid var(--wp--preset--color--line);
}

.tr-faq .wp-block-details > summary {
  position: relative;
  display: block;
  padding: 20px 44px 20px 0;
  cursor: pointer;
  list-style: none;
  color: var(--wp--preset--color--heading);
  font-family: var(--wp--preset--font-family--nav);
  font-size: 18px;
  font-weight: 600;
  line-height: 1.4;
  transition: color .2s ease;
}

/* Der voreingestellte Pfeil der Browser wird durch ein eigenes Zeichen ersetzt */
.tr-faq .wp-block-details > summary::-webkit-details-marker { display: none; }
.tr-faq .wp-block-details > summary::marker { content: ""; }

.tr-faq .wp-block-details > summary::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 8px;
  width: 10px;
  height: 10px;
  margin-top: -6px;
  border-right: 2px solid var(--wp--preset--color--muted);
  border-bottom: 2px solid var(--wp--preset--color--muted);
  transform: rotate(45deg);
  transition: transform .25s ease, border-color .2s ease;
}

.tr-faq .wp-block-details > summary:hover,
.tr-faq .wp-block-details > summary:focus-visible {
  color: var(--wp--preset--color--link-hover);
}

.tr-faq .wp-block-details > summary:hover::after {
  border-color: var(--wp--preset--color--link-hover);
}

.tr-faq .wp-block-details[open] > summary::after {
  transform: rotate(-135deg);
  margin-top: -2px;
}

.tr-faq .wp-block-details[open] > summary {
  color: var(--wp--preset--color--glow);
}

/* Antwortbereich */
.tr-faq .wp-block-details > :not(summary) {
  margin-top: 0;
  margin-bottom: 14px;
}

.tr-faq .wp-block-details > :last-child { margin-bottom: 22px; }

.tr-faq .wp-block-details ul { margin-top: 0; }

@media (max-width: 600px) {
  .tr-faq .wp-block-details > summary {
    font-size: 16px;
    padding: 16px 36px 16px 0;
  }
}

/* Kein Rahmen beim Anklicken einer Frage. Dass sie den Fokus hat, zeigt
   stattdessen die Textfarbe -- das bleibt auch fuer Tastaturbedienung
   erkennbar, ohne den Kasten zu umranden. */
.tr-faq .wp-block-details,
.tr-faq .wp-block-details:focus,
.tr-faq .wp-block-details > summary,
.tr-faq .wp-block-details > summary:focus,
.tr-faq .wp-block-details > summary:focus-visible,
.tr-faq .wp-block-details > summary:active {
  outline: none !important;
  box-shadow: none !important;
  border-color: transparent;
}

.tr-faq .wp-block-details > summary:focus-visible {
  color: var(--wp--preset--color--link-hover);
}

/* ==========================================================================
   17. Fokusrahmen
   Browser umranden angeklickte Menuepunkte, Knoepfe und Links. Auf dem
   dunklen Hintergrund faellt dieser Rahmen unangenehm auf. Erkennbar
   bleibt der Fokus ueber dieselbe Hervorhebung wie beim Ueberfahren.
   ========================================================================== */

.tr-header .tr-nav a:focus,
.tr-header .tr-nav a:focus-visible,
.wp-block-navigation a:focus,
.wp-block-navigation a:focus-visible,
.wp-block-navigation__responsive-container-open:focus,
.wp-block-navigation__responsive-container-close:focus,
.wp-block-button__link:focus,
.wp-block-button__link:focus-visible,
.wp-element-button:focus,
.wp-element-button:focus-visible,
.tr-footer a:focus,
.tr-footer a:focus-visible,
.tr-footer-bottom a:focus,
.tr-footer-bottom a:focus-visible,
.wp-block-site-logo a:focus,
.wp-block-site-logo a:focus-visible {
  outline: none !important;
  box-shadow: none !important;
}

/* Ersatz fuer den entfallenen Rahmen */
.tr-header .tr-nav a:focus-visible {
  color: var(--wp--preset--color--link-hover);
  border-bottom-color: var(--wp--preset--color--link-hover);
}

.wp-block-button__link:focus-visible,
.wp-element-button:focus-visible {
  background-color: var(--wp--preset--color--glow);
}

.tr-footer a:focus-visible,
.tr-footer-bottom a:focus-visible {
  color: var(--wp--preset--color--link-hover);
}

/* Links im Abschlussbereich: Auf dem Foto verschwimmt Rot mit dem
   Hintergrund. Deshalb weiss und fett, Rot erst beim Ueberfahren. */
.tr-cta-cover .wp-block-cover__inner-container a:not(.wp-block-button__link) {
  color: var(--wp--preset--color--white);
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: color .2s ease;
}

.tr-cta-cover .wp-block-cover__inner-container a:not(.wp-block-button__link):hover,
.tr-cta-cover .wp-block-cover__inner-container a:not(.wp-block-button__link):focus-visible {
  color: var(--wp--preset--color--link-hover);
}

/* ============================================================
   18. Bewertungs-Diashow (Kundenstimmen)
   ============================================================ */

.tr-slider-huelle {
  position: relative;
}

.tr-slider.wp-block-gallery {
  display: flex !important;
  flex-wrap: nowrap !important;
  gap: 20px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
  padding-bottom: 4px;
}

.tr-slider.wp-block-gallery::-webkit-scrollbar { display: none; }

.tr-slider.wp-block-gallery > figure.wp-block-image {
  flex: 0 0 380px;
  width: 380px;
  height: 330px;
  margin: 0;
  scroll-snap-align: start;
  background: var(--wp--preset--color--white);
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px;
}

.tr-slider.wp-block-gallery > figure.wp-block-image img {
  width: 100%;
  height: 100%;
  object-fit: contain !important;
  border-radius: 0;
}

.tr-slider-knopf {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: 50%;
  background: rgba(10, 10, 10, .82);
  color: var(--wp--preset--color--heading);
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  z-index: 2;
  transition: background .2s ease;
}

.tr-slider-knopf:hover { background: var(--wp--preset--color--primary); }
.tr-slider-knopf:focus { outline: none; box-shadow: none; }
.tr-slider-knopf[hidden] { display: none; }
.tr-slider-zurueck { left: -14px; }
.tr-slider-vor { right: -14px; }

@media (max-width: 781px) {
  .tr-slider.wp-block-gallery > figure.wp-block-image {
    flex-basis: 300px;
    width: 300px;
    height: 300px;
  }
  .tr-slider-zurueck { left: 2px; }
  .tr-slider-vor { right: 2px; }
}

/* ============================================================
   19. Presse-Ausschnitte
   ============================================================ */

.tr-presse .wp-block-image {
  background: var(--wp--preset--color--card);
  border-radius: 8px;
  padding: 12px;
  margin: 0;
}

.tr-presse .wp-block-image img {
  border-radius: 4px;
  width: 100%;
  height: 260px;
  object-fit: cover;
  object-position: top center;
}

.tr-presse figcaption {
  color: var(--wp--preset--color--muted);
  font-size: 13px;
  margin-top: 10px;
  text-align: left;
}

/* ============================================================
   20. Abstand vor Bildreihen
   Zwei Spaltenbloecke direkt untereinander bekommen denselben
   Abstand wie die Spalten nebeneinander (64px).
   ============================================================ */

.wp-block-columns + .wp-block-columns {
  margin-top: 64px;
}

/* ============================================================
   21. News-Liste (Beitragsuebersicht)
   Ganze Karte anklickbar, Bild links, Text rechts.
   ============================================================ */

.tr-news-liste {
  list-style: none;
  margin: 0;
  padding: 0;
  display: block;
}

.tr-news-liste > li {
  list-style: none;
  margin: 0 0 28px;
}

.tr-news-liste > li::marker { content: none; }

.tr-news-karte {
  position: relative;
  border-radius: 10px;
  overflow: hidden;
  transition: background-color .25s ease, transform .25s ease;
}

.tr-news-karte:hover {
  background-color: var(--wp--preset--color--bg-alt) !important;
}

/* Ganze Karte klickbar: der Titel-Link wird ueber die Karte gelegt */
.tr-news-karte .wp-block-post-title a::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
}

.tr-news-karte .wp-block-post-title a {
  text-decoration: none;
  transition: color .2s ease;
}

.tr-news-karte:hover .wp-block-post-title a {
  color: var(--wp--preset--color--link-hover);
}

.tr-news-karte .wp-block-post-featured-image {
  margin: 0;
  height: 100%;
  overflow: hidden;
}

.tr-news-karte .wp-block-post-featured-image img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 0;
  transition: transform .4s ease;
}

.tr-news-karte:hover .wp-block-post-featured-image img {
  transform: scale(1.04);
}

.tr-news-karte .wp-block-columns { margin: 0; gap: 0; }

.tr-news-kat a {
  color: var(--wp--preset--color--glow);
  text-decoration: none;
  position: relative;
  z-index: 2;
}

.tr-news-kat a:hover { color: var(--wp--preset--color--link-hover); }

.tr-news-karte .wp-block-post-excerpt__more-text { display: none; }

@media (max-width: 781px) {
  .tr-news-karte .wp-block-columns { flex-wrap: wrap !important; }
  .tr-news-karte .wp-block-column { flex-basis: 100% !important; }
  .tr-news-karte .wp-block-column:last-child {
    padding: 22px 22px 24px !important;
  }
}

/* ============================================================
   22. Beitragsinhalt: alte Bildausrichtungen wiederherstellen
   Die Beitraege stammen aus dem klassischen Editor und nutzen
   alignright / alignleft. Im Block-Theme fehlt dafuer der Float.
   ============================================================ */

.wp-block-post-content img.alignright,
.entry-content img.alignright {
  float: right;
  margin: 6px 0 26px 34px;
  max-width: 46%;
  height: auto;
  border-radius: 8px;
}

.wp-block-post-content img.alignleft,
.entry-content img.alignleft {
  float: left;
  margin: 6px 34px 26px 0;
  max-width: 46%;
  height: auto;
  border-radius: 8px;
}

.wp-block-post-content img.aligncenter,
.entry-content img.aligncenter {
  display: block;
  margin: 26px auto;
  height: auto;
  border-radius: 8px;
}

.wp-block-post-content p:has(> img.alignright),
.wp-block-post-content p:has(> img.alignleft) {
  margin: 0;
}

.wp-block-post-content::after {
  content: "";
  display: block;
  clear: both;
}

@media (max-width: 781px) {
  .wp-block-post-content img.alignright,
  .wp-block-post-content img.alignleft {
    float: none;
    display: block;
    margin: 20px auto;
    max-width: 100%;
  }
}

/* Kopfbereich einzelner Beitraege: Kategorie und Datum wie der Titel zentriert */
.tr-page-header .tr-news-kat,
.tr-page-header .wp-block-post-date {
  text-align: center;
}

/* ============================================================
   23. Beitragsnavigation (vorheriger / naechster Beitrag)
   ============================================================ */

.tr-beitragsnav {
  gap: 16px;
  margin-top: 36px;
}

.tr-beitragsnav .wp-block-post-navigation-link {
  margin: 0;
  font-size: 14px;
}

.tr-beitragsnav .wp-block-post-navigation-link a,
.tr-beitragsnav .tr-nav-uebersicht a {
  display: inline-block;
  padding: 11px 22px;
  border: 1px solid var(--wp--preset--color--primary);
  border-radius: 6px;
  background: var(--wp--preset--color--bg);
  color: var(--wp--preset--color--heading);
  text-decoration: none;
  font-size: 14px;
  line-height: 1.2;
  transition: background-color .2s ease, border-color .2s ease;
}

.tr-beitragsnav .wp-block-post-navigation-link a:hover,
.tr-beitragsnav .tr-nav-uebersicht a:hover {
  background: var(--wp--preset--color--primary);
  border-color: var(--wp--preset--color--accent);
  color: var(--wp--preset--color--heading);
}

@media (max-width: 600px) {
  .tr-beitragsnav { flex-direction: column; align-items: stretch; }
  .tr-beitragsnav .wp-block-post-navigation-link a,
.tr-beitragsnav .tr-nav-uebersicht a { display: block; text-align: center; }
}

.tr-beitragsnav .tr-nav-uebersicht { margin: 0; font-size: 14px; }

/* Einzelner Beitrag: Aufmacherbild nie ueber seine echte Groesse strecken */
body.single .wp-block-post-featured-image img {
  width: auto;
  height: auto;
  max-width: 100%;
  margin-left: auto;
  margin-right: auto;
  display: block;
}

/* ============================================================
   24. Social-Media-Zeilen mit Symbol (Kontaktseite)
   ============================================================ */

.tr-sm {
  display: flex;
  align-items: center;
  gap: 10px;
}

.tr-sm::before {
  content: "";
  display: inline-block;
  flex: 0 0 20px;
  width: 20px;
  height: 20px;
  opacity: .92;
  transition: opacity .2s ease, transform .2s ease;
}

.tr-sm:hover::before {
  opacity: 1;
  transform: scale(1.08);
}

/* Markenfarben */
.tr-sm-fb::before { background-color: #1877F2; }
.tr-sm-yt::before { background-color: #FF0000; }
.tr-sm-ig::before {
  background-color: transparent;
  background-image: linear-gradient(45deg, #FEDA75 0%, #FA7E1E 25%, #D62976 50%, #962FBF 75%, #4F5BD5 100%);
}

.tr-sm-fb::before { -webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20d%3D%22M9.101%2023.691v-7.98H6.627v-3.667h2.474v-1.58c0-4.085%201.848-5.978%205.858-5.978.401%200%20.955.042%201.468.103a8.68%208.68%200%200%201%201.141.195v3.325a8.623%208.623%200%200%200-.653-.036%2026.805%2026.805%200%200%200-.733-.009c-.707%200-1.259.096-1.675.309a1.686%201.686%200%200%200-.679.622c-.258.42-.374.995-.374%201.752v1.297h3.919l-.386%202.103-.287%201.564h-3.246v8.245C19.396%2023.238%2024%2018.179%2024%2012.044c0-6.627-5.373-12-12-12s-12%205.373-12%2012c0%205.628%203.874%2010.35%209.101%2011.647Z%22%2F%3E%3C%2Fsvg%3E") no-repeat center / contain; mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20d%3D%22M9.101%2023.691v-7.98H6.627v-3.667h2.474v-1.58c0-4.085%201.848-5.978%205.858-5.978.401%200%20.955.042%201.468.103a8.68%208.68%200%200%201%201.141.195v3.325a8.623%208.623%200%200%200-.653-.036%2026.805%2026.805%200%200%200-.733-.009c-.707%200-1.259.096-1.675.309a1.686%201.686%200%200%200-.679.622c-.258.42-.374.995-.374%201.752v1.297h3.919l-.386%202.103-.287%201.564h-3.246v8.245C19.396%2023.238%2024%2018.179%2024%2012.044c0-6.627-5.373-12-12-12s-12%205.373-12%2012c0%205.628%203.874%2010.35%209.101%2011.647Z%22%2F%3E%3C%2Fsvg%3E") no-repeat center / contain; }
.tr-sm-ig::before { -webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20d%3D%22M12%200C8.74%200%208.333.015%207.053.072%205.775.132%204.905.333%204.14.63c-.789.306-1.459.717-2.126%201.384S.935%203.35.63%204.14C.333%204.905.131%205.775.072%207.053.012%208.333%200%208.74%200%2012s.015%203.667.072%204.947c.06%201.277.261%202.148.558%202.913.306.788.717%201.459%201.384%202.126.667.666%201.336%201.079%202.126%201.384.766.296%201.636.499%202.913.558C8.333%2023.988%208.74%2024%2012%2024s3.667-.015%204.947-.072c1.277-.06%202.148-.262%202.913-.558.788-.306%201.459-.718%202.126-1.384.666-.667%201.079-1.335%201.384-2.126.296-.765.499-1.636.558-2.913.06-1.28.072-1.687.072-4.947s-.015-3.667-.072-4.947c-.06-1.277-.262-2.149-.558-2.913-.306-.789-.718-1.459-1.384-2.126C21.319%201.347%2020.651.935%2019.86.63c-.765-.297-1.636-.499-2.913-.558C15.667.012%2015.26%200%2012%200zm0%202.16c3.203%200%203.585.016%204.85.071%201.17.055%201.805.249%202.227.415.562.217.96.477%201.382.896.419.42.679.819.896%201.381.164.422.36%201.057.413%202.227.057%201.266.07%201.646.07%204.85s-.015%203.585-.074%204.85c-.061%201.17-.256%201.805-.421%202.227-.224.562-.479.96-.899%201.382-.419.419-.824.679-1.38.896-.42.164-1.065.36-2.235.413-1.274.057-1.649.07-4.859.07-3.211%200-3.586-.015-4.859-.074-1.171-.061-1.816-.256-2.236-.421-.569-.224-.96-.479-1.379-.899-.421-.419-.69-.824-.9-1.38-.165-.42-.359-1.065-.42-2.235-.045-1.26-.061-1.649-.061-4.844%200-3.196.016-3.586.061-4.861.061-1.17.255-1.814.42-2.234.21-.57.479-.96.9-1.381.419-.419.81-.689%201.379-.898.42-.166%201.051-.361%202.221-.4211.275-.045%201.65-.06%204.859-.06l.045.03zm0%203.678a6.162%206.162%200%201%200%200%2012.324%206.162%206.162%200%201%200%200-12.324zM12%2016c-2.21%200-4-1.79-4-4s1.79-4%204-4%204%201.79%204%204-1.79%204-4%204zm7.846-10.405a1.441%201.441%200%200%201-2.881%200a1.441%201.441%200%200%201%202.881%200z%22%2F%3E%3C%2Fsvg%3E") no-repeat center / contain; mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20d%3D%22M12%200C8.74%200%208.333.015%207.053.072%205.775.132%204.905.333%204.14.63c-.789.306-1.459.717-2.126%201.384S.935%203.35.63%204.14C.333%204.905.131%205.775.072%207.053.012%208.333%200%208.74%200%2012s.015%203.667.072%204.947c.06%201.277.261%202.148.558%202.913.306.788.717%201.459%201.384%202.126.667.666%201.336%201.079%202.126%201.384.766.296%201.636.499%202.913.558C8.333%2023.988%208.74%2024%2012%2024s3.667-.015%204.947-.072c1.277-.06%202.148-.262%202.913-.558.788-.306%201.459-.718%202.126-1.384.666-.667%201.079-1.335%201.384-2.126.296-.765.499-1.636.558-2.913.06-1.28.072-1.687.072-4.947s-.015-3.667-.072-4.947c-.06-1.277-.262-2.149-.558-2.913-.306-.789-.718-1.459-1.384-2.126C21.319%201.347%2020.651.935%2019.86.63c-.765-.297-1.636-.499-2.913-.558C15.667.012%2015.26%200%2012%200zm0%202.16c3.203%200%203.585.016%204.85.071%201.17.055%201.805.249%202.227.415.562.217.96.477%201.382.896.419.42.679.819.896%201.381.164.422.36%201.057.413%202.227.057%201.266.07%201.646.07%204.85s-.015%203.585-.074%204.85c-.061%201.17-.256%201.805-.421%202.227-.224.562-.479.96-.899%201.382-.419.419-.824.679-1.38.896-.42.164-1.065.36-2.235.413-1.274.057-1.649.07-4.859.07-3.211%200-3.586-.015-4.859-.074-1.171-.061-1.816-.256-2.236-.421-.569-.224-.96-.479-1.379-.899-.421-.419-.69-.824-.9-1.38-.165-.42-.359-1.065-.42-2.235-.045-1.26-.061-1.649-.061-4.844%200-3.196.016-3.586.061-4.861.061-1.17.255-1.814.42-2.234.21-.57.479-.96.9-1.381.419-.419.81-.689%201.379-.898.42-.166%201.051-.361%202.221-.4211.275-.045%201.65-.06%204.859-.06l.045.03zm0%203.678a6.162%206.162%200%201%200%200%2012.324%206.162%206.162%200%201%200%200-12.324zM12%2016c-2.21%200-4-1.79-4-4s1.79-4%204-4%204%201.79%204%204-1.79%204-4%204zm7.846-10.405a1.441%201.441%200%200%201-2.881%200a1.441%201.441%200%200%201%202.881%200z%22%2F%3E%3C%2Fsvg%3E") no-repeat center / contain; }
.tr-sm-yt::before { -webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20d%3D%22M23.498%206.186a3.016%203.016%200%200%200-2.122-2.136C19.505%203.545%2012%203.545%2012%203.545s-7.505%200-9.377.505A3.017%203.017%200%200%200%20.502%206.186C0%208.07%200%2012%200%2012s0%203.93.502%205.814a3.016%203.016%200%200%200%202.122%202.136c1.871.505%209.376.505%209.376.505s7.505%200%209.377-.505a3.015%203.015%200%200%200%202.122-2.136C24%2015.93%2024%2012%2024%2012s0-3.93-.502-5.814zM9.545%2015.568V8.432L15.818%2012l-6.273%203.568z%22%2F%3E%3C%2Fsvg%3E") no-repeat center / contain; mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20d%3D%22M23.498%206.186a3.016%203.016%200%200%200-2.122-2.136C19.505%203.545%2012%203.545%2012%203.545s-7.505%200-9.377.505A3.017%203.017%200%200%200%20.502%206.186C0%208.07%200%2012%200%2012s0%203.93.502%205.814a3.016%203.016%200%200%200%202.122%202.136c1.871.505%209.376.505%209.376.505s7.505%200%209.377-.505a3.015%203.015%200%200%200%202.122-2.136C24%2015.93%2024%2012%2024%2012s0-3.93-.502-5.814zM9.545%2015.568V8.432L15.818%2012l-6.273%203.568z%22%2F%3E%3C%2Fsvg%3E") no-repeat center / contain; }

/* ============================================================
   25. Buchungsseite: Angebotskarten mit Bild
   ============================================================ */

.tr-buchung-karte {
  overflow: hidden;
  height: 100%;
  display: flex;
  flex-direction: column;
}

.tr-buchung-bild {
  margin: 0;
}

.tr-buchung-bild img {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: 0;
}

.tr-buchung-karte > .wp-block-group {
  display: flex;
  flex-direction: column;
  flex: 1;
}

.tr-buchung-karte .wp-block-buttons {
  margin-top: auto;
}

/* Buchungskarten: ganze Karte anklickbar, Pro Coaching hervorgehoben */
.tr-buchung-karte {
  position: relative;
  border: 1px solid transparent;
  transition: border-color .2s ease;
}

.tr-buchung-karte .wp-block-button__link::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
}

.tr-buchung-karte:hover {
  border-color: var(--wp--preset--color--link-hover);
}

.tr-buchung-karte.tr-card-highlight {
  border: 1px solid var(--wp--preset--color--primary);
}

.tr-buchung-karte.tr-card-highlight:hover {
  border-color: var(--wp--preset--color--link-hover);
}

/* ============================================================
   26. Angebotskarten: ganze Flaeche anklickbar
   Gilt fuer jede Karte mit genau einem Knopf (Startseite,
   GT, F1, Ueber mich, Kundenstimmen, Buchung).
   ============================================================ */

.tr-card:has(.wp-block-button__link) {
  position: relative;
  transition: border-color .2s ease;
}

.tr-card:has(.wp-block-button__link) .wp-block-button__link::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
}

.tr-card:has(.wp-block-button__link):hover {
  border-color: var(--wp--preset--color--link-hover);
}

.tr-card:has(.wp-block-button__link) a:not(.wp-block-button__link) {
  position: relative;
  z-index: 2;
}

/* ============================================================
   27. Kein Fokusrahmen bei Mausklick
   Bei Tastaturbedienung bleibt der Rahmen erhalten.
   ============================================================ */

a:focus:not(:focus-visible),
button:focus:not(:focus-visible),
.wp-block-image a:focus:not(:focus-visible),
.woocommerce-product-gallery a:focus:not(:focus-visible),
.woocommerce-product-gallery__trigger:focus:not(:focus-visible),
.flex-control-thumbs a:focus:not(:focus-visible),
.flex-control-thumbs img:focus:not(:focus-visible) {
  outline: none !important;
  box-shadow: none !important;
}

.woocommerce-product-gallery img,
.woocommerce-product-gallery a {
  outline: none;
}

/* ============================================================
   28. Produktseite: Schriftgroessen wie auf den uebrigen Seiten
   ============================================================ */

.woocommerce div.product .product_title,
.woocommerce div.product h1.product_title {
  font-size: 42px !important;
  line-height: 1.15;
  letter-spacing: -0.5px;
  margin-bottom: 18px;
}

/* Ueberschrift im Reiter (Beschreibung) wie die Session-Titel */
.woocommerce div.product .woocommerce-Tabs-panel > h2 {
  font-size: 22px;
  font-weight: 700;
  line-height: 1.25;
  color: var(--wp--preset--color--white);
  margin: 0 0 18px;
}

/* Reiterleiste */
.woocommerce div.product .woocommerce-tabs ul.tabs li a {
  font-size: 15px;
}

/* Aehnliche Produkte: Abstand und groessere Ueberschrift */
.woocommerce .related.products,
.woocommerce .up-sells.products {
  margin-top: 72px;
  padding-top: 40px;
  border-top: 1px solid var(--wp--preset--color--line);
}

.woocommerce .related.products > h2,
.woocommerce .up-sells.products > h2 {
  font-size: 32px;
  font-weight: 700;
  color: var(--wp--preset--color--white);
  margin: 0 0 28px;
}

/* Kacheln: gleiche Anmutung wie auf der Buchungsseite */
.woocommerce .related.products ul.products li.product img,
.woocommerce .up-sells.products ul.products li.product img {
  aspect-ratio: 16 / 9;
  object-fit: cover;
  width: 100%;
  height: auto;
  border-radius: 8px;
  margin-bottom: 14px;
}

.woocommerce .related.products ul.products li.product h2,
.woocommerce .related.products ul.products li.product .woocommerce-loop-product__title,
.woocommerce .up-sells.products ul.products li.product .woocommerce-loop-product__title {
  font-size: 19px;
  font-weight: 700;
  line-height: 1.3;
  color: var(--wp--preset--color--white);
  padding-top: 0;
}

.woocommerce .related.products ul.products li.product .price {
  font-size: 16px;
  color: var(--wp--preset--color--heading);
}

/* ============================================================
   29. Aehnliche Produkte auf der Produktseite
   Der Block gibt eine Liste .wc-block-product-template aus und
   setzt das Seitenverhaeltnis der Bilder inline (1:1).
   ============================================================ */

body.single-product h2.wp-block-heading:has(+ ul.wc-block-product-template) {
  font-size: 22px !important;
  font-weight: 700;
  color: var(--wp--preset--color--white);
  margin-top: 80px !important;
  margin-bottom: 28px !important;
  padding-top: 40px;
  border-top: 1px solid var(--wp--preset--color--line);
}

body.single-product ul.wc-block-product-template {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
  list-style: none;
  margin: 0;
  padding: 0;
}

body.single-product ul.wc-block-product-template > li {
  width: auto !important;
  max-width: none !important;
  margin: 0 !important;
  float: none !important;
  list-style: none;
}

body.single-product ul.wc-block-product-template img {
  aspect-ratio: 16 / 9 !important;
  object-fit: cover !important;
  width: 100% !important;
  height: auto !important;
  border-radius: 8px;
}

body.single-product ul.wc-block-product-template .wp-block-post-title,
body.single-product ul.wc-block-product-template h3 {
  font-size: 18px !important;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: 0;
  color: var(--wp--preset--color--white);
  text-align: left !important;
  margin: 14px 0 6px !important;
}

body.single-product ul.wc-block-product-template .wc-block-components-product-price,
body.single-product ul.wc-block-product-template .wc-block-components-product-price span,
body.single-product ul.wc-block-product-template .wc-block-components-product-price ins,
body.single-product ul.wc-block-product-template .wc-block-components-product-price del,
body.single-product ul.wc-block-product-template .wc-block-components-product-price bdi,
body.single-product ul.wc-block-product-template .price,
body.single-product ul.wc-block-product-template .price span {
  font-size: 16px !important;
  font-weight: 400 !important;
  line-height: 1.4 !important;
  color: var(--wp--preset--color--body) !important;
}

body.single-product ul.wc-block-product-template .wc-block-components-product-price {
  display: block;
  text-align: left;
  margin-bottom: 14px;
}

body.single-product ul.wc-block-product-template .wp-block-button__link,
body.single-product ul.wc-block-product-template .add_to_cart_button {
  font-size: 13px;
  padding: 10px 18px;
}

@media (max-width: 900px) {
  body.single-product ul.wc-block-product-template { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 600px) {
  body.single-product ul.wc-block-product-template { grid-template-columns: 1fr; }
}

/* Produktseite: Titel in der Groesse der uebrigen Seitenueberschriften */
body.single-product .wp-block-post-title,
body.single-product h1.product_title {
  font-size: 42px !important;
  line-height: 1.15;
  letter-spacing: -0.5px;
  margin-bottom: 18px;
}

body.single-product ul.wc-block-product-template .wp-block-post-title {
  font-size: 18px !important;
  line-height: 1.3;
  letter-spacing: 0;
}

/* Abstand zwischen den aehnlichen Produkten und dem Fussbereich */
body.single-product ul.wc-block-product-template {
  margin-bottom: 90px !important;
}

/* Zusaetzliche Informationen: Voraussetzungen und Ablauf */
.tr-produkt-zusatz h3 {
  font-size: 20px;
  font-weight: 700;
  color: var(--wp--preset--color--white);
  margin: 34px 0 14px;
}

.tr-produkt-zusatz h3:first-child { margin-top: 0; }

.tr-produkt-zusatz ul,
.tr-produkt-zusatz ol {
  margin: 0 0 8px 22px;
  padding: 0;
  color: var(--wp--preset--color--body);
  line-height: 1.5;
}

.tr-produkt-zusatz li { margin-bottom: 6px; }

.tr-produkt-zusatz ol > li > ul {
  margin: 8px 0 12px 18px;
  color: var(--wp--preset--color--muted);
}

/* ============================================================
   30. Produktseite: Dauer-Auswahl, Menge, Aufraeumen
   ============================================================ */

body.single-product .quantity,
body.single-product .woocommerce-breadcrumb,
body.single-product .wp-block-woocommerce-breadcrumbs,
body.single-product .woocommerce-product-gallery__trigger {
  display: none !important;
}

body.single-product .variations .label,
body.single-product .variations th {
  display: none;
}

body.single-product .variations,
body.single-product .variations tbody,
body.single-product .variations tr,
body.single-product .variations td {
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
}

.tr-dauer-auswahl {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 4px 0 24px;
  max-width: 100%;
}

.tr-dauer-zeile {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 18px;
  border: 1px solid var(--wp--preset--color--line);
  border-radius: 8px;
  background: var(--wp--preset--color--card);
  cursor: pointer;
  transition: border-color .2s ease, background-color .2s ease;
}

.tr-dauer-zeile:hover {
  border-color: var(--wp--preset--color--link-hover);
}

.tr-dauer-zeile.ist-gewaehlt {
  border-color: var(--wp--preset--color--primary);
  background: var(--wp--preset--color--bg-alt);
}

/* kein graues Kaestchen um den Auswahlknopf beim Anklicken */
.tr-dauer-zeile input[type="radio"]:focus:not(:focus-visible) {
  outline: none !important;
  box-shadow: none !important;
}

.tr-dauer-zeile input[type="radio"] {
  accent-color: var(--wp--preset--color--glow);
  width: 18px;
  height: 18px;
  margin: 0;
  flex: 0 0 18px;
}

.tr-dauer-text {
  flex: 1;
  font-size: 16px;
  color: var(--wp--preset--color--heading);
}

.tr-dauer-preis {
  font-size: 16px;
  font-weight: 700;
  color: var(--wp--preset--color--heading);
}

/* Produktseite: doppelte Angaben entfernen, Preisgroesse anpassen */
body.single-product .reset_variations,
body.single-product .woocommerce-variation-price,
body.single-product .woocommerce-variation-availability {
  display: none !important;
}

body.single-product .wp-block-woocommerce-product-price,
body.single-product .wp-block-woocommerce-product-price .woocommerce-Price-amount,
body.single-product .summary > .price {
  font-size: 26px !important;
  line-height: 1.2;
  font-weight: 700;
  margin-bottom: 20px;
}

/* Abstand zwischen Dauer-Auswahl und Knopf wie zwischen den Zeilen */
.tr-dauer-auswahl { margin: 4px 0 10px; }

body.single-product .variations_form .single_variation_wrap,
body.single-product .woocommerce-variation-add-to-cart {
  margin-top: 0;
}

body.single-product .single_variation_wrap .woocommerce-variation {
  margin: 0;
}

body.single-product form.variations_form table.variations {
  margin-bottom: 0;
}

/* Produktgalerie: Abstaende, keine Zoom-Lupe */
body.single-product .woocommerce-product-gallery .flex-viewport,
body.single-product .woocommerce-product-gallery__wrapper {
  margin-bottom: 16px;
}

body.single-product .flex-control-thumbs {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin: 0;
  padding: 0;
}

body.single-product .flex-control-thumbs li {
  width: calc(25% - 9px) !important;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none;
}

body.single-product .flex-control-thumbs img,
body.single-product .flex-control-thumbs li img {
  border-radius: 6px;
  opacity: 1 !important;
  border: 2px solid transparent;
  box-sizing: border-box;
  width: 100%;
  transition: border-color .2s ease;
}

body.single-product .flex-control-thumbs img.flex-active,
body.single-product .flex-control-thumbs img:hover,
body.single-product .flex-control-thumbs li img.flex-active,
body.single-product .flex-control-thumbs li img:hover {
  border-color: var(--wp--preset--color--primary);
}

body.single-product .woocommerce-product-gallery img {
  cursor: default;
}

/* Zwischenueberschrift in der Beschreibung so gross wie "Beschreibung" */
body.single-product .woocommerce-Tabs-panel h3,
body.single-product .tr-produkt-zusatz h3 {
  font-size: 22px !important;
  font-weight: 700;
  line-height: 1.25;
  color: var(--wp--preset--color--white);
  margin: 34px 0 16px;
}

/* ============================================================
   31. Warenkorbsymbol im Kopfbereich
   ============================================================ */

.tr-warenkorb-symbol {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  line-height: 1;
}

.tr-warenkorb-bild {
  position: relative;
  display: inline-flex;
}

.tr-warenkorb-symbol svg {
  width: 26px;
  height: 26px;
  fill: var(--wp--preset--color--heading);
  transition: fill .2s ease;
}

.tr-warenkorb-symbol:hover svg {
  fill: var(--wp--preset--color--link-hover);
}

.tr-warenkorb-zahl {
  position: absolute;
  top: -6px;
  right: -8px;
  min-width: 17px;
  height: 17px;
  padding: 0 4px;
  border-radius: 9px;
  background: var(--wp--preset--color--primary);
  color: var(--wp--preset--color--heading);
  font-size: 11px;
  font-weight: 700;
  line-height: 17px;
  text-align: center;
}

.tr-header .wp-block-shortcode { margin: 0; }

/* ==========================================================================
   32. Warenkorb
   ========================================================================== */

/* Produktnamen in Weiss, die Linkfarbe war zu dunkel zum Lesen */
.woocommerce-cart-form .product-name a,
.woocommerce-cart-form td.product-name a,
.wc-block-cart-item__product a,
.wc-block-components-product-name {
  color: var(--wp--preset--color--heading) !important;
  font-weight: 600;
}

.woocommerce-cart-form .product-name a:hover,
.wc-block-components-product-name:hover {
  color: var(--wp--preset--color--link-hover) !important;
}

/* ==========================================================================
   33. Kassenseite — zwei Spalten
   ========================================================================== */

#customer_details {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 40px;
  align-items: start;
}

#customer_details .col-1,
#customer_details .col-2,
#customer_details .woocommerce-billing-fields,
#customer_details .woocommerce-billing-fields__field-wrapper,
#customer_details .woocommerce-additional-fields,
#customer_details .woocommerce-additional-fields__field-wrapper {
  display: contents;
}

#customer_details .woocommerce-billing-fields > h3 { grid-column: 1; grid-row: 1; }
#customer_details .woocommerce-additional-fields > h3 { grid-column: 2; grid-row: 1; }

#billing_first_name_field { grid-column: 1; grid-row: 2; }
#billing_last_name_field  { grid-column: 1; grid-row: 3; }
#billing_company_field    { grid-column: 1; grid-row: 4; }
#billing_address_1_field  { grid-column: 1; grid-row: 5; }
#billing_postcode_field   { grid-column: 1; grid-row: 6; }
#billing_city_field       { grid-column: 1; grid-row: 7; }
#billing_country_field    { grid-column: 1; grid-row: 8; }
#billing_state_field      { grid-column: 1; grid-row: 9; }

#billing_email_field  { grid-column: 2; grid-row: 2; }
#billing_phone_field  { grid-column: 2; grid-row: 3; }

/* ueber mehrere Zeilen, sonst zieht das hohe Textfeld die Zeile links auseinander */
#order_comments_field { grid-column: 2; grid-row: 4 / span 6; }

/* die rechte Spalte braucht keine eigene Ueberschrift */
#customer_details .woocommerce-additional-fields > h3 { display: none; }

#customer_details .form-row { width: 100%; float: none; margin: 0 0 18px; }

@media (max-width: 900px) {
  #customer_details { grid-template-columns: 1fr; }
  #customer_details .woocommerce-billing-fields > h3,
  #customer_details .woocommerce-additional-fields > h3,
  #customer_details .form-row {
    grid-column: 1 !important;
    grid-row: auto !important;
  }
}

/* Hinweis auf vertippte E-Mail-Domains */
.tr-mail-hinweis {
  margin-top: 8px;
  font-size: 14px;
  color: var(--wp--preset--color--body);
}

.tr-mail-uebernehmen {
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  color: var(--wp--preset--color--link-hover);
  text-decoration: underline;
  cursor: pointer;
}

.tr-mail-uebernehmen:hover {
  color: var(--wp--preset--color--heading);
}

/* Kassenfelder in denselben Massen wie das Kontaktformular */
#customer_details .form-row { margin: 0 0 18px; }

#customer_details .form-row label {
  display: block;
  font-size: 13px;
  letter-spacing: .5px;
  color: var(--wp--preset--color--body);
  margin: 0 0 6px;
  font-weight: 600;
  line-height: 1.3;
}

#customer_details .form-row input[type="text"],
#customer_details .form-row input[type="email"],
#customer_details .form-row input[type="tel"],
#customer_details .form-row textarea,
#customer_details .form-row .select2-selection,
#customer_details .form-row select {
  font-size: 16px !important;
  line-height: 1.4;
  padding: 12px 14px;
  margin: 0;
}

#customer_details .woocommerce-billing-fields > h3 {
  margin: 0 0 18px;
}

#customer_details .select2-container .select2-selection--single {
  height: auto;
}

/* ==========================================================================
   34. Zahlungsarten im Kassenbereich
   ========================================================================== */

.woocommerce-checkout #payment {
  background: transparent;
  border-radius: 0;
}

.woocommerce-checkout #payment ul.payment_methods {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin: 0 0 24px;
  padding: 0;
  border: 0;
  list-style: none;
}

.woocommerce-checkout #payment ul.payment_methods li {
  display: block;
  margin: 0;
  padding: 0;
  border: 1px solid var(--wp--preset--color--line);
  border-radius: 8px;
  background: var(--wp--preset--color--card);
  overflow: hidden;
  transition: border-color .2s ease;
  list-style: none;
}

.woocommerce-checkout #payment ul.payment_methods li:hover {
  border-color: var(--wp--preset--color--link-hover);
}

.woocommerce-checkout #payment ul.payment_methods li.tr-gewaehlt {
  border-color: var(--wp--preset--color--primary);
  background: var(--wp--preset--color--bg-alt);
}

/* Der Auswahlknopf sitzt im Label, damit die ganze Zeile anklickbar ist */
.woocommerce-checkout #payment ul.payment_methods li > input[type="radio"] {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.woocommerce-checkout #payment ul.payment_methods li > label {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
  margin: 0;
  padding: 16px 18px;
  cursor: pointer;
  font-size: 16px;
  font-weight: 600;
  color: var(--wp--preset--color--heading);
}

.woocommerce-checkout #payment ul.payment_methods li > label::before {
  content: "";
  flex: 0 0 18px;
  width: 18px;
  height: 18px;
  border: 2px solid var(--wp--preset--color--line);
  border-radius: 50%;
  background: transparent;
}

.woocommerce-checkout #payment ul.payment_methods li.tr-gewaehlt > label::before {
  border-color: var(--wp--preset--color--primary);
  box-shadow: inset 0 0 0 3px var(--wp--preset--color--bg-alt);
  background: var(--wp--preset--color--primary);
}

.woocommerce-checkout #payment li.payment_method_stripe_eps > label .tr-eps-zusatz {
  font-weight: 400;
  font-size: 15px;
  color: var(--wp--preset--color--body);
}

.tr-zahl-logos {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex: 0 0 auto;
}

.tr-zahl-logos img {
  height: 24px;
  width: auto;
  max-width: 44px;
  border-radius: 3px;
  background: #fff;
  padding: 2px 3px;
  box-sizing: content-box;
}

/* Eingabefelder der gewählten Zahlungsart */
.woocommerce-checkout #payment div.payment_box {
  margin: 0;
  padding: 0 18px 18px;
  background: transparent;
  color: var(--wp--preset--color--body);
  font-size: 15px;
  line-height: 1.5;
  border-radius: 0;
}

.woocommerce-checkout #payment div.payment_box::before {
  display: none;
}

.woocommerce-checkout #payment div.payment_box:empty {
  display: none !important;
}

/* Bestellknopf erst nach der Auswahl */
.woocommerce-checkout #payment #place_order[disabled] {
  opacity: .45;
  cursor: not-allowed;
}

/* EPS traegt seinen Namen fest im Plugin, die Erklaerung kommt aus der Darstellung */
.woocommerce-checkout #payment li.payment_method_stripe_eps > label::after {
  content: "— Online-Überweisung Deiner Bank";
  order: 2;
  font-weight: 400;
  font-size: 15px;
  color: var(--wp--preset--color--body);
}

.woocommerce-checkout #payment ul.payment_methods li .tr-zahl-logos {
  order: 3;
}


/* WooPayments zaehlt weitere Kartenmarken mit "+ 3"; lesbar machen */
.woocommerce-checkout #payment .payment-methods--logos-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 24px;
  padding: 0 8px;
  border-radius: 3px;
  background: var(--wp--preset--color--bg-alt);
  color: var(--wp--preset--color--body);
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
}

/* Kartenlogos von WooPayments: gleiche Hoehe, nichts abgeschnitten */
.woocommerce-checkout #payment .payment-methods--logos {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.woocommerce-checkout #payment .payment-methods--logos img {
  height: 24px;
  width: auto;
  max-width: none;
  object-fit: contain;
}

/* der Zaehler "+ 3" nennt Marken, die hier niemand braucht */
.woocommerce-checkout #payment .payment-methods--logos-count {
  display: none !important;
}

/* Das Amex-Zeichen von WooPayments ist beschnitten gezeichnet; eigenes verwenden */
.woocommerce-checkout #payment .payment-methods--logos img[alt="amex"] {
  content: url(assets/amex.svg);
}

/* Zustimmung und Bestellknopf gehoeren zusammen, beide linksbuendig */
.woocommerce-checkout #payment .form-row.place-order {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 18px;
  margin: 0;
  padding: 0;
  float: none;
  width: 100%;
}

.woocommerce-checkout #payment .woocommerce-terms-and-conditions-wrapper {
  order: 1;
  margin: 0;
  width: 100%;
}

.woocommerce-checkout #payment .woocommerce-terms-and-conditions-wrapper .form-row {
  margin: 0;
}

.woocommerce-checkout #payment #place_order {
  order: 2;
  float: none;
  margin: 0;
  align-self: flex-start;
}

/* Die Clearfix-Elemente von WooCommerce zaehlen im Flexfluss mit
   und erzeugen dort zwei zusaetzliche Abstaende */
.woocommerce-checkout #payment .form-row.place-order::before,
.woocommerce-checkout #payment .form-row.place-order::after {
  display: none;
}

.woocommerce-checkout #payment .form-row.place-order > noscript,
.woocommerce-checkout #payment .form-row.place-order > input[type="hidden"] {
  display: none;
}

/* Bilder in den Karten des Abschnitts "Individuell abgestimmte Sessions" */
.tr-card:has(.tr-sessions-bild) {
  padding: 0 0 32px;
  overflow: hidden;
}

.tr-sessions-bild {
  margin: 0 0 24px;
}

.tr-sessions-bild img {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: 0;
}

.tr-card:has(.tr-sessions-bild) > *:not(.tr-sessions-bild) {
  padding-left: 32px;
  padding-right: 32px;
}

/* ==========================================================================
   35. Terminverwaltung (nur fuer angemeldete Verwalter)
   ========================================================================== */

.tr-header-links {
  gap: 14px;
}

.tr-admin-zahnrad {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--wp--preset--color--body);
  cursor: pointer;
  transition: color .2s ease, background-color .2s ease;  text-decoration: none;
}

.tr-admin-zahnrad svg {
  width: 21px;
  height: 21px;
}

.tr-admin-zahnrad:hover {
  color: var(--wp--preset--color--heading);
  background: var(--wp--preset--color--bg-alt);
}

/* Oeffentliche Terminliste */
.tr-termine-liste {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.tr-termin {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 18px;
  border-left: 4px solid var(--wp--preset--color--line);
  border-radius: 6px;
  background: var(--wp--preset--color--card);
  font-size: 16px;
  flex-wrap: wrap;
}

.tr-termin.ist-gruen { border-left-color: #3aa44a; }
.tr-termin.ist-gelb  { border-left-color: #d8a300; }
.tr-termin.ist-rot   { border-left-color: #c0392b; }

.tr-termin-tag {
  font-weight: 700;
  color: var(--wp--preset--color--heading);
  min-width: 150px;
}

.tr-termin-zeit {
  color: var(--wp--preset--color--body);
}

.tr-termin-status {
  margin-left: auto;
  font-weight: 600;
}

.tr-termin.ist-gruen .tr-termin-status { color: #3aa44a; }
.tr-termin.ist-gelb  .tr-termin-status { color: #d8a300; }
.tr-termin.ist-rot   .tr-termin-status { color: #c0392b; }

.tr-termin-notiz {
  flex: 0 0 100%;
  font-size: 14px;
  color: var(--wp--preset--color--muted);
}

.tr-termine-leer {
  color: var(--wp--preset--color--muted);
  margin: 0;
}

/* Verwaltungsfenster */
body.tr-fenster-offen { overflow: hidden; }

.tr-fenster {
  position: fixed;
  inset: 0;
  z-index: 100000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}

.tr-fenster[hidden] { display: none; }

.tr-fenster-hintergrund {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, .7);
}

.tr-fenster-kasten {
  position: relative;
  width: min(760px, 100%);
  max-height: 88vh;
  display: flex;
  flex-direction: column;
  border: 1px solid var(--wp--preset--color--line);
  border-radius: 10px;
  background: var(--wp--preset--color--bg-alt);
  box-shadow: 0 24px 60px rgba(0, 0, 0, .5);
}

.tr-fenster-kopf {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 24px;
  border-bottom: 1px solid var(--wp--preset--color--line);
}

.tr-fenster-kopf h2 {
  margin: 0;
  font-size: 20px;
  color: var(--wp--preset--color--heading);
}

.tr-fenster-zu {
  border: 0;
  background: transparent;
  color: var(--wp--preset--color--body);
  font-size: 30px;
  line-height: 1;
  cursor: pointer;
  padding: 0 4px;
}

.tr-fenster-zu:hover { color: var(--wp--preset--color--heading); }

.tr-fenster-inhalt {
  padding: 22px 24px 26px;
  overflow-y: auto;
}

.tr-fenster-inhalt h3 {
  margin: 28px 0 12px;
  font-size: 16px;
  color: var(--wp--preset--color--heading);
}

.tr-termin-form {
  display: grid;
  grid-template-columns: 1fr 140px 140px;
  gap: 14px 16px;
  align-items: end;
}

.tr-feld { display: flex; flex-direction: column; gap: 6px; }
.tr-feld-breit { grid-column: 1 / -1; }

.tr-feld label {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .3px;
  color: var(--wp--preset--color--body);
}

.tr-feld input {
  padding: 10px 12px;
  border: 1px solid var(--wp--preset--color--line);
  border-radius: 6px;
  background: var(--wp--preset--color--card);
  color: var(--wp--preset--color--heading);
  font: inherit;
  font-size: 15px;
}

.tr-status-knoepfe { display: flex; gap: 10px; flex-wrap: wrap; }

.tr-status-knopf {
  padding: 10px 16px;
  border: 2px solid var(--wp--preset--color--line);
  border-radius: 6px;
  background: var(--wp--preset--color--card);
  color: var(--wp--preset--color--body);
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: border-color .15s ease, color .15s ease;
}

.tr-status-knopf.ist-gruen.ist-gewaehlt { border-color: #3aa44a; color: #3aa44a; }
.tr-status-knopf.ist-gelb.ist-gewaehlt  { border-color: #d8a300; color: #d8a300; }
.tr-status-knopf.ist-rot.ist-gewaehlt   { border-color: #c0392b; color: #c0392b; }

.tr-knopf-primaer {
  grid-column: 1 / -1;
  justify-self: start;
  padding: 12px 24px;
  border: 0;
  border-radius: 6px;
  background: var(--wp--preset--color--primary);
  color: #fff;
  font: inherit;
  font-weight: 700;
  letter-spacing: .5px;
  cursor: pointer;
}

.tr-knopf-primaer:hover { background: var(--wp--preset--color--link-hover); }

/* Liste im Verwaltungsfenster */
.tr-verwaltung-zeile {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 10px 14px;
  border-left: 4px solid var(--wp--preset--color--line);
  border-radius: 6px;
  background: var(--wp--preset--color--card);
  margin-bottom: 8px;
  flex-wrap: wrap;
}

.tr-verwaltung-zeile.ist-gruen { border-left-color: #3aa44a; }
.tr-verwaltung-zeile.ist-gelb  { border-left-color: #d8a300; }
.tr-verwaltung-zeile.ist-rot   { border-left-color: #c0392b; }
.tr-verwaltung-zeile.ist-vergangen { opacity: .45; }

.tr-verwaltung-datum {
  font-weight: 700;
  color: var(--wp--preset--color--heading);
  min-width: 150px;
}

.tr-verwaltung-zeit { color: var(--wp--preset--color--body); font-size: 15px; }

.tr-verwaltung-knoepfe { margin-left: auto; display: flex; gap: 6px; }

.tr-verwaltung-hinweis {
  flex: 0 0 100%;
  font-size: 13px;
  color: var(--wp--preset--color--muted);
}

.tr-mini-knopf {
  width: 28px;
  height: 28px;
  padding: 0;
  border: 2px solid var(--wp--preset--color--line);
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--wp--preset--color--body);
  font-size: 17px;
  line-height: 1;
}

.tr-mini-knopf span {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  display: block;
}

.tr-mini-knopf.ist-gruen span { background: #3aa44a; }
.tr-mini-knopf.ist-gelb span  { background: #d8a300; }
.tr-mini-knopf.ist-rot span   { background: #c0392b; }

.tr-mini-knopf.ist-gruen.ist-gewaehlt { border-color: #3aa44a; }
.tr-mini-knopf.ist-gelb.ist-gewaehlt  { border-color: #d8a300; }
.tr-mini-knopf.ist-rot.ist-gewaehlt   { border-color: #c0392b; }

.tr-mini-knopf.tr-weg:hover { border-color: #c0392b; color: #c0392b; }

@media (max-width: 700px) {
  .tr-termin-form { grid-template-columns: 1fr; }
  .tr-verwaltung-knoepfe { margin-left: 0; }
}

/* ==========================================================================
   35. Terminverwaltung (nur fuer angemeldete Verwalter)
   ========================================================================== */

.tr-header-links {
  gap: 14px;
}

.tr-admin-zahnrad {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--wp--preset--color--body);
  cursor: pointer;
  transition: color .2s ease, background-color .2s ease;
}

.tr-admin-zahnrad svg {
  width: 21px;
  height: 21px;
}

.tr-admin-zahnrad:hover {
  color: var(--wp--preset--color--heading);
  background: var(--wp--preset--color--bg-alt);
}

/* Oeffentliche Terminliste */
.tr-termine-liste {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.tr-termin {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 18px;
  border-left: 4px solid var(--wp--preset--color--line);
  border-radius: 6px;
  background: var(--wp--preset--color--card);
  font-size: 16px;
  flex-wrap: wrap;
}

.tr-termin.ist-gruen { border-left-color: #3aa44a; }
.tr-termin.ist-gelb  { border-left-color: #d8a300; }
.tr-termin.ist-rot   { border-left-color: #c0392b; }

.tr-termin-tag {
  font-weight: 700;
  color: var(--wp--preset--color--heading);
  min-width: 150px;
}

.tr-termin-zeit {
  color: var(--wp--preset--color--body);
}

.tr-termin-status {
  margin-left: auto;
  font-weight: 600;
}

.tr-termin.ist-gruen .tr-termin-status { color: #3aa44a; }
.tr-termin.ist-gelb  .tr-termin-status { color: #d8a300; }
.tr-termin.ist-rot   .tr-termin-status { color: #c0392b; }

.tr-termin-notiz {
  flex: 0 0 100%;
  font-size: 14px;
  color: var(--wp--preset--color--muted);
}

.tr-termine-leer {
  color: var(--wp--preset--color--muted);
  margin: 0;
}

/* Verwaltungsfenster */
body.tr-fenster-offen { overflow: hidden; }

.tr-fenster {
  position: fixed;
  inset: 0;
  z-index: 100000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}

.tr-fenster[hidden] { display: none; }

.tr-fenster-hintergrund {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, .7);
}

.tr-fenster-kasten {
  position: relative;
  width: min(760px, 100%);
  max-height: 88vh;
  display: flex;
  flex-direction: column;
  border: 1px solid var(--wp--preset--color--line);
  border-radius: 10px;
  background: var(--wp--preset--color--bg-alt);
  box-shadow: 0 24px 60px rgba(0, 0, 0, .5);
}

.tr-fenster-kopf {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 24px;
  border-bottom: 1px solid var(--wp--preset--color--line);
}

.tr-fenster-kopf h2 {
  margin: 0;
  font-size: 20px;
  color: var(--wp--preset--color--heading);
}

.tr-fenster-zu {
  border: 0;
  background: transparent;
  color: var(--wp--preset--color--body);
  font-size: 30px;
  line-height: 1;
  cursor: pointer;
  padding: 0 4px;
}

.tr-fenster-zu:hover { color: var(--wp--preset--color--heading); }

.tr-fenster-inhalt {
  padding: 22px 24px 26px;
  overflow-y: auto;
}

.tr-fenster-inhalt h3 {
  margin: 28px 0 12px;
  font-size: 16px;
  color: var(--wp--preset--color--heading);
}

.tr-termin-form {
  display: grid;
  grid-template-columns: 1fr 140px 140px;
  gap: 14px 16px;
  align-items: end;
}

.tr-feld { display: flex; flex-direction: column; gap: 6px; }
.tr-feld-breit { grid-column: 1 / -1; }

.tr-feld label {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .3px;
  color: var(--wp--preset--color--body);
}

.tr-feld input {
  padding: 10px 12px;
  border: 1px solid var(--wp--preset--color--line);
  border-radius: 6px;
  background: var(--wp--preset--color--card);
  color: var(--wp--preset--color--heading);
  font: inherit;
  font-size: 15px;
}

.tr-status-knoepfe {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: center;
}

.tr-feld-breit > label { text-align: center; }

.tr-status-knopf {
  padding: 10px 18px;
  border: 2px solid transparent;
  border-radius: 6px;
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}

/* gedaempft in der eigenen Farbe, leuchtend sobald gewaehlt */
.tr-status-knopf.ist-gruen { background: rgba(58, 164, 74, .18);  border-color: rgba(58, 164, 74, .45);  color: #6cc478; }
.tr-status-knopf.ist-gelb  { background: rgba(216, 163, 0, .18);  border-color: rgba(216, 163, 0, .45);  color: #e3ba3d; }
.tr-status-knopf.ist-rot   { background: rgba(192, 57, 43, .18);  border-color: rgba(192, 57, 43, .45);  color: #d9695b; }

.tr-status-knopf.ist-gruen.ist-gewaehlt { background: #3aa44a; border-color: #3aa44a; color: #fff; }
.tr-status-knopf.ist-gelb.ist-gewaehlt  { background: #d8a300; border-color: #d8a300; color: #1a1a1a; }
.tr-status-knopf.ist-rot.ist-gewaehlt   { background: #c0392b; border-color: #c0392b; color: #fff; }

.tr-knopf-primaer {
  grid-column: 1 / -1;
  justify-self: center;
  padding: 12px 24px;
  border: 0;
  border-radius: 6px;
  background: var(--wp--preset--color--primary);
  color: #fff;
  font: inherit;
  font-weight: 700;
  letter-spacing: .5px;
  cursor: pointer;
}

.tr-knopf-primaer:hover { background: var(--wp--preset--color--link-hover); }

/* Liste im Verwaltungsfenster */
.tr-verwaltung-zeile {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 10px 14px;
  border-left: 4px solid var(--wp--preset--color--line);
  border-radius: 6px;
  background: var(--wp--preset--color--card);
  margin-bottom: 8px;
  flex-wrap: wrap;
}

.tr-verwaltung-zeile.ist-gruen { border-left-color: #3aa44a; }
.tr-verwaltung-zeile.ist-gelb  { border-left-color: #d8a300; }
.tr-verwaltung-zeile.ist-rot   { border-left-color: #c0392b; }
.tr-verwaltung-zeile.ist-vergangen { opacity: .45; }

.tr-verwaltung-datum {
  font-weight: 700;
  color: var(--wp--preset--color--heading);
  min-width: 150px;
}

.tr-verwaltung-zeit { color: var(--wp--preset--color--body); font-size: 15px; }

.tr-verwaltung-knoepfe { margin-left: auto; display: flex; gap: 6px; }

.tr-verwaltung-hinweis {
  flex: 0 0 100%;
  font-size: 13px;
  color: var(--wp--preset--color--muted);
}

.tr-mini-knopf {
  width: 28px;
  height: 28px;
  padding: 0;
  border: 2px solid var(--wp--preset--color--line);
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--wp--preset--color--body);
  font-size: 17px;
  line-height: 1;
}

.tr-mini-knopf span {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  display: block;
}

.tr-mini-knopf.ist-gruen span { background: #3aa44a; }
.tr-mini-knopf.ist-gelb span  { background: #d8a300; }
.tr-mini-knopf.ist-rot span   { background: #c0392b; }

.tr-mini-knopf.ist-gruen.ist-gewaehlt { border-color: #3aa44a; }
.tr-mini-knopf.ist-gelb.ist-gewaehlt  { border-color: #d8a300; }
.tr-mini-knopf.ist-rot.ist-gewaehlt   { border-color: #c0392b; }

.tr-mini-knopf.tr-weg:hover { border-color: #c0392b; color: #c0392b; }

@media (max-width: 700px) {
  .tr-termin-form { grid-template-columns: 1fr; }
  .tr-verwaltung-knoepfe { margin-left: 0; }
}

/* Kalendersymbol neben der Ueberschrift auf der Terminseite */
.tr-termine-kopfzeile {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}

.tr-termine-symbol {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  padding: 0;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--wp--preset--color--body);
  cursor: pointer;
  transition: color .2s ease, background-color .2s ease;
}

.tr-termine-symbol svg {
  width: 21px;
  height: 21px;
}

.tr-termine-symbol:hover {
  color: var(--wp--preset--color--heading);
  background: var(--wp--preset--color--card);
}

/* ==========================================================================
   35. Terminverwaltung (nur fuer angemeldete Verwalter)
   ========================================================================== */

.tr-header-links {
  gap: 14px;
}

.tr-admin-zahnrad {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--wp--preset--color--body);
  cursor: pointer;
  transition: color .2s ease, background-color .2s ease;
}

.tr-admin-zahnrad svg {
  width: 21px;
  height: 21px;
}

.tr-admin-zahnrad:hover {
  color: var(--wp--preset--color--heading);
  background: var(--wp--preset--color--bg-alt);
}

/* Oeffentliche Anzeige: Sommerpause und Terminliste */
.tr-termine-anzeige {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.tr-sommerpause {
  padding: 22px 24px;
  border-radius: 8px;
  background: var(--wp--preset--color--card);
  color: var(--wp--preset--color--heading);
  font-size: 20px;
  font-weight: 700;
  text-align: center;
  letter-spacing: 1px;
}

/* Oeffentliche Terminliste */
.tr-termine-liste {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.tr-termin {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 18px;
  border-left: 4px solid var(--wp--preset--color--line);
  border-radius: 6px;
  background: var(--wp--preset--color--card);
  font-size: 16px;
  flex-wrap: wrap;
}

.tr-termin.ist-gruen { border-left-color: #3aa44a; }
.tr-termin.ist-gelb  { border-left-color: #d8a300; }
.tr-termin.ist-rot   { border-left-color: #c0392b; }

.tr-termin-tag {
  font-weight: 700;
  color: var(--wp--preset--color--heading);
  min-width: 150px;
}

.tr-termin-zeit {
  color: var(--wp--preset--color--body);
}

.tr-termin-status {
  margin-left: auto;
  font-weight: 600;
}

.tr-termin.ist-gruen .tr-termin-status { color: #3aa44a; }
.tr-termin.ist-gelb  .tr-termin-status { color: #d8a300; }
.tr-termin.ist-rot   .tr-termin-status { color: #c0392b; }

.tr-termin-notiz {
  flex: 0 0 100%;
  font-size: 14px;
  color: var(--wp--preset--color--muted);
}

.tr-termine-leer {
  color: var(--wp--preset--color--muted);
  margin: 0;
}

/* Verwaltungsfenster */
body.tr-fenster-offen { overflow: hidden; }

.tr-fenster {
  position: fixed;
  inset: 0;
  z-index: 100000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}

.tr-fenster[hidden] { display: none; }

.tr-fenster-hintergrund {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, .7);
}

.tr-fenster-kasten {
  position: relative;
  width: min(760px, 100%);
  max-height: 88vh;
  display: flex;
  flex-direction: column;
  border: 1px solid var(--wp--preset--color--line);
  border-radius: 10px;
  background: var(--wp--preset--color--bg-alt);
  box-shadow: 0 24px 60px rgba(0, 0, 0, .5);
}

.tr-fenster-kopf {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 24px;
  border-bottom: 1px solid var(--wp--preset--color--line);
}

.tr-fenster-kopf h2 {
  margin: 0;
  font-size: 20px;
  color: var(--wp--preset--color--heading);
}

.tr-pause-knopf {
  margin: 0 auto;
  padding: 8px 18px;
  border: 2px solid var(--wp--preset--color--line);
  border-radius: 20px;
  background: transparent;
  color: var(--wp--preset--color--body);
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}

.tr-pause-knopf:hover { border-color: var(--wp--preset--color--body); }

.tr-pause-knopf.ist-aktiv {
  background: var(--wp--preset--color--primary);
  border-color: var(--wp--preset--color--primary);
  color: #fff;
}

.tr-fenster-zu {
  border: 0;
  background: transparent;
  color: var(--wp--preset--color--body);
  font-size: 30px;
  line-height: 1;
  cursor: pointer;
  padding: 0 4px;
}

.tr-fenster-zu:hover { color: var(--wp--preset--color--heading); }

.tr-fenster-inhalt {
  padding: 22px 24px 26px;
  overflow-y: auto;
}

.tr-fenster-inhalt h3 {
  margin: 28px 0 12px;
  font-size: 16px;
  color: var(--wp--preset--color--heading);
}

.tr-termin-form {
  display: grid;
  grid-template-columns: 1fr 140px 140px;
  gap: 14px 16px;
  align-items: end;
}

.tr-feld { display: flex; flex-direction: column; gap: 6px; }
.tr-feld-breit { grid-column: 1 / -1; }

.tr-feld label {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .3px;
  color: var(--wp--preset--color--body);
}

.tr-feld input {
  padding: 10px 12px;
  cursor: pointer;
  border: 1px solid var(--wp--preset--color--line);
  border-radius: 6px;
  background: var(--wp--preset--color--card);
  color: var(--wp--preset--color--heading);
  font: inherit;
  font-size: 15px;
}

.tr-status-knoepfe {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: center;
}

.tr-feld-breit > label { text-align: center; }

.tr-status-knopf {
  padding: 10px 18px;
  border: 2px solid transparent;
  border-radius: 6px;
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}

/* gedaempft in der eigenen Farbe, leuchtend sobald gewaehlt */
.tr-status-knopf.ist-gruen { background: rgba(58, 164, 74, .18);  border-color: rgba(58, 164, 74, .45);  color: #6cc478; }
.tr-status-knopf.ist-gelb  { background: rgba(216, 163, 0, .18);  border-color: rgba(216, 163, 0, .45);  color: #e3ba3d; }
.tr-status-knopf.ist-rot   { background: rgba(192, 57, 43, .18);  border-color: rgba(192, 57, 43, .45);  color: #d9695b; }

.tr-status-knopf.ist-gruen.ist-gewaehlt { background: #3aa44a; border-color: #3aa44a; color: #fff; }
.tr-status-knopf.ist-gelb.ist-gewaehlt  { background: #d8a300; border-color: #d8a300; color: #1a1a1a; }
.tr-status-knopf.ist-rot.ist-gewaehlt   { background: #c0392b; border-color: #c0392b; color: #fff; }

.tr-knopf-primaer {
  grid-column: 1 / -1;
  justify-self: center;
  padding: 12px 24px;
  border: 0;
  border-radius: 6px;
  background: var(--wp--preset--color--primary);
  color: #fff;
  font: inherit;
  font-weight: 700;
  letter-spacing: .5px;
  cursor: pointer;
}

.tr-knopf-primaer:hover { background: var(--wp--preset--color--link-hover); }

/* Liste im Verwaltungsfenster */
.tr-verwaltung-zeile {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 10px 14px;
  border-left: 4px solid var(--wp--preset--color--line);
  border-radius: 6px;
  background: var(--wp--preset--color--card);
  margin-bottom: 8px;
  flex-wrap: wrap;
}

.tr-verwaltung-zeile.ist-gruen { border-left-color: #3aa44a; }
.tr-verwaltung-zeile.ist-gelb  { border-left-color: #d8a300; }
.tr-verwaltung-zeile.ist-rot   { border-left-color: #c0392b; }
.tr-verwaltung-zeile.ist-vergangen { opacity: .45; }

.tr-verwaltung-datum {
  font-weight: 700;
  color: var(--wp--preset--color--heading);
  min-width: 150px;
}

.tr-verwaltung-zeit { color: var(--wp--preset--color--body); font-size: 15px; }

.tr-verwaltung-knoepfe { margin-left: auto; display: flex; gap: 6px; }

.tr-verwaltung-hinweis {
  flex: 0 0 100%;
  font-size: 13px;
  color: var(--wp--preset--color--muted);
}

.tr-mini-knopf {
  width: 28px;
  height: 28px;
  padding: 0;
  border: 2px solid var(--wp--preset--color--line);
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--wp--preset--color--body);
  font-size: 17px;
  line-height: 1;
}

.tr-mini-knopf span {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  display: block;
}

.tr-mini-knopf.ist-gruen span { background: #3aa44a; }
.tr-mini-knopf.ist-gelb span  { background: #d8a300; }
.tr-mini-knopf.ist-rot span   { background: #c0392b; }

.tr-mini-knopf.ist-gruen.ist-gewaehlt { border-color: #3aa44a; }
.tr-mini-knopf.ist-gelb.ist-gewaehlt  { border-color: #d8a300; }
.tr-mini-knopf.ist-rot.ist-gewaehlt   { border-color: #c0392b; }

.tr-mini-knopf.tr-weg:hover { border-color: #c0392b; color: #c0392b; }

@media (max-width: 700px) {
  .tr-termin-form { grid-template-columns: 1fr; }
  .tr-verwaltung-knoepfe { margin-left: 0; }
}

/* Kalendersymbol neben der Ueberschrift auf der Terminseite */
.tr-termine-kopfzeile {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}

.tr-termine-symbol {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  padding: 0;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--wp--preset--color--body);
  cursor: pointer;
  transition: color .2s ease, background-color .2s ease;
}

.tr-termine-symbol svg {
  width: 21px;
  height: 21px;
}

.tr-termine-symbol:hover {
  color: var(--wp--preset--color--heading);
  background: var(--wp--preset--color--card);
}

/* ==========================================================================
   35. Terminverwaltung (nur fuer angemeldete Verwalter)
   ========================================================================== */

.tr-header-links {
  gap: 14px;
}

.tr-admin-zahnrad {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--wp--preset--color--body);
  cursor: pointer;
  transition: color .2s ease, background-color .2s ease;
}

.tr-admin-zahnrad svg {
  width: 21px;
  height: 21px;
}

.tr-admin-zahnrad:hover {
  color: var(--wp--preset--color--heading);
  background: var(--wp--preset--color--bg-alt);
}

/* Oeffentliche Anzeige: Sommerpause und Terminliste */
.tr-termine-anzeige {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.tr-sommerpause {
  padding: 22px 24px;
  border-radius: 8px;
  background: var(--wp--preset--color--card);
  color: var(--wp--preset--color--heading);
  font-size: 20px;
  font-weight: 700;
  text-align: center;
  letter-spacing: 1px;
}

/* Oeffentliche Terminliste */
.tr-termine-liste {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.tr-termin {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 18px;
  border-left: 4px solid var(--wp--preset--color--line);
  border-radius: 6px;
  background: var(--wp--preset--color--card);
  font-size: 16px;
  flex-wrap: wrap;
}

.tr-termin.ist-gruen { border-left-color: #3aa44a; }
.tr-termin.ist-gelb  { border-left-color: #d8a300; }
.tr-termin.ist-rot   { border-left-color: #c0392b; }

.tr-termin-tag {
  font-weight: 700;
  color: var(--wp--preset--color--heading);
  min-width: 150px;
}

.tr-termin-zeit {
  color: var(--wp--preset--color--body);
}

.tr-termin-status {
  margin-left: auto;
  font-weight: 600;
}

.tr-termin.ist-gruen .tr-termin-status { color: #3aa44a; }
.tr-termin.ist-gelb  .tr-termin-status { color: #d8a300; }
.tr-termin.ist-rot   .tr-termin-status { color: #c0392b; }

.tr-termin-notiz {
  flex: 0 0 100%;
  font-size: 14px;
  color: var(--wp--preset--color--muted);
}

.tr-termine-leer {
  color: var(--wp--preset--color--muted);
  margin: 0;
}

/* Verwaltungsfenster */
body.tr-fenster-offen { overflow: hidden; }

.tr-fenster {
  position: fixed;
  inset: 0;
  z-index: 100000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}

.tr-fenster[hidden] { display: none; }

.tr-fenster-hintergrund {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, .7);
}

.tr-fenster-kasten {
  position: relative;
  width: min(760px, 100%);
  max-height: 88vh;
  display: flex;
  flex-direction: column;
  border: 1px solid var(--wp--preset--color--line);
  border-radius: 10px;
  background: var(--wp--preset--color--bg-alt);
  box-shadow: 0 24px 60px rgba(0, 0, 0, .5);
}

.tr-fenster-kopf {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 24px;
  border-bottom: 1px solid var(--wp--preset--color--line);
}

.tr-fenster-kopf h2 {
  margin: 0;
  font-size: 20px;
  color: var(--wp--preset--color--heading);
}

.tr-pause-knopf {
  margin: 0 auto;
  padding: 8px 18px;
  border: 2px solid var(--wp--preset--color--line);
  border-radius: 20px;
  background: transparent;
  color: var(--wp--preset--color--body);
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}

.tr-pause-knopf:hover { color: var(--wp--preset--color--heading); }

.tr-pause-knopf.ist-aktiv {
  background: var(--wp--preset--color--primary);
  border-color: var(--wp--preset--color--primary);
  color: #fff;
}

.tr-fenster-zu {
  border: 0;
  background: transparent;
  color: var(--wp--preset--color--body);
  font-size: 30px;
  line-height: 1;
  cursor: pointer;
  padding: 0 4px;
}

.tr-fenster-zu:hover { color: var(--wp--preset--color--heading); }

.tr-fenster-inhalt {
  padding: 22px 24px 26px;
  overflow-y: auto;
}

.tr-fenster-inhalt h3 {
  margin: 28px 0 12px;
  font-size: 16px;
  color: var(--wp--preset--color--heading);
}

.tr-termin-form {
  display: grid;
  grid-template-columns: 1fr 140px 140px;
  gap: 14px 16px;
  align-items: end;
}

.tr-feld { display: flex; flex-direction: column; gap: 6px; }
.tr-feld-breit { grid-column: 1 / -1; }

.tr-feld label {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .3px;
  color: var(--wp--preset--color--body);
}

.tr-feld input {
  padding: 10px 12px;
  cursor: pointer;
  border: 1px solid var(--wp--preset--color--line);
  border-radius: 6px;
  background: var(--wp--preset--color--card);
  color: var(--wp--preset--color--heading);
  font: inherit;
  font-size: 15px;
}

.tr-status-knoepfe {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: center;
}

.tr-feld-breit > label { text-align: center; }

.tr-status-knopf {
  padding: 10px 18px;
  border: 2px solid transparent;
  border-radius: 6px;
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}

/* gedaempft in der eigenen Farbe, leuchtend sobald gewaehlt */
.tr-status-knopf.ist-gruen { background: rgba(58, 164, 74, .18);  border-color: rgba(58, 164, 74, .45);  color: #6cc478; }
.tr-status-knopf.ist-gelb  { background: rgba(216, 163, 0, .18);  border-color: rgba(216, 163, 0, .45);  color: #e3ba3d; }
.tr-status-knopf.ist-rot   { background: rgba(192, 57, 43, .18);  border-color: rgba(192, 57, 43, .45);  color: #d9695b; }

.tr-status-knopf.ist-gruen.ist-gewaehlt { background: #3aa44a; border-color: #3aa44a; color: #fff; }
.tr-status-knopf.ist-gelb.ist-gewaehlt  { background: #d8a300; border-color: #d8a300; color: #1a1a1a; }
.tr-status-knopf.ist-rot.ist-gewaehlt   { background: #c0392b; border-color: #c0392b; color: #fff; }

.tr-knopf-primaer {
  grid-column: 1 / -1;
  justify-self: center;
  padding: 12px 24px;
  border: 0;
  border-radius: 6px;
  background: var(--wp--preset--color--primary);
  color: #fff;
  font: inherit;
  font-weight: 700;
  letter-spacing: .5px;
  cursor: pointer;
}

.tr-knopf-primaer:hover { background: var(--wp--preset--color--link-hover); }

/* Liste im Verwaltungsfenster */
.tr-verwaltung-zeile {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 10px 14px;
  border-left: 4px solid var(--wp--preset--color--line);
  border-radius: 6px;
  background: var(--wp--preset--color--card);
  margin-bottom: 8px;
  flex-wrap: wrap;
}

.tr-verwaltung-zeile.ist-gruen { border-left-color: #3aa44a; }
.tr-verwaltung-zeile.ist-gelb  { border-left-color: #d8a300; }
.tr-verwaltung-zeile.ist-rot   { border-left-color: #c0392b; }
.tr-verwaltung-zeile.ist-vergangen { opacity: .45; }

.tr-verwaltung-datum {
  font-weight: 700;
  color: var(--wp--preset--color--heading);
  min-width: 150px;
}

.tr-verwaltung-zeit { color: var(--wp--preset--color--body); font-size: 15px; }

.tr-verwaltung-knoepfe { margin-left: auto; display: flex; gap: 6px; }

.tr-verwaltung-hinweis {
  flex: 0 0 100%;
  font-size: 13px;
  color: var(--wp--preset--color--muted);
}

.tr-mini-knopf {
  width: 28px;
  height: 28px;
  padding: 0;
  border: 2px solid var(--wp--preset--color--line);
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--wp--preset--color--body);
  font-size: 17px;
  line-height: 1;
}

.tr-mini-knopf span {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  display: block;
}

.tr-mini-knopf.ist-gruen span { background: #3aa44a; }
.tr-mini-knopf.ist-gelb span  { background: #d8a300; }
.tr-mini-knopf.ist-rot span   { background: #c0392b; }

.tr-mini-knopf.ist-gruen.ist-gewaehlt { border-color: #3aa44a; }
.tr-mini-knopf.ist-gelb.ist-gewaehlt  { border-color: #d8a300; }
.tr-mini-knopf.ist-rot.ist-gewaehlt   { border-color: #c0392b; }

.tr-mini-knopf.tr-weg:hover { border-color: #c0392b; color: #c0392b; }

@media (max-width: 700px) {
  .tr-termin-form { grid-template-columns: 1fr; }
  .tr-verwaltung-knoepfe { margin-left: 0; }
}

/* Kalendersymbol neben der Ueberschrift auf der Terminseite */
.tr-termine-kopfzeile {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}

.tr-termine-symbol {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  padding: 0;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--wp--preset--color--body);
  cursor: pointer;
  transition: color .2s ease, background-color .2s ease;
}

.tr-termine-symbol svg {
  width: 21px;
  height: 21px;
}

.tr-termine-symbol:hover {
  color: var(--wp--preset--color--heading);
  background: var(--wp--preset--color--card);
}

/* ==========================================================================
   35. Terminverwaltung (nur fuer angemeldete Verwalter)
   ========================================================================== */

.tr-header-links {
  gap: 14px;
}

.tr-admin-zahnrad {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--wp--preset--color--body);
  cursor: pointer;
  transition: color .2s ease, background-color .2s ease;
}

.tr-admin-zahnrad svg {
  width: 21px;
  height: 21px;
}

.tr-admin-zahnrad:hover {
  color: var(--wp--preset--color--heading);
  background: var(--wp--preset--color--bg-alt);
}

/* Oeffentliche Anzeige: Sommerpause und Terminliste */
.tr-termine-anzeige {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.tr-sommerpause {
  padding: 22px 24px;
  border-radius: 8px;
  background: var(--wp--preset--color--card);
  color: var(--wp--preset--color--heading);
  font-size: 20px;
  font-weight: 700;
  text-align: center;
  letter-spacing: 1px;
}

/* Oeffentliche Terminliste */
.tr-termine-liste {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.tr-termin {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 18px;
  border-left: 4px solid var(--wp--preset--color--line);
  border-radius: 6px;
  background: var(--wp--preset--color--card);
  font-size: 16px;
  flex-wrap: wrap;
}

.tr-termin.ist-gruen { border-left-color: #3aa44a; }
.tr-termin.ist-gelb  { border-left-color: #d8a300; }
.tr-termin.ist-rot   { border-left-color: #c0392b; }

.tr-termin-tag {
  font-weight: 700;
  color: var(--wp--preset--color--heading);
  min-width: 150px;
}

.tr-termin-zeit {
  color: var(--wp--preset--color--body);
}

.tr-termin-status {
  margin-left: auto;
  font-weight: 600;
}

.tr-termin.ist-gruen .tr-termin-status { color: #3aa44a; }
.tr-termin.ist-gelb  .tr-termin-status { color: #d8a300; }
.tr-termin.ist-rot   .tr-termin-status { color: #c0392b; }

.tr-termin-notiz {
  flex: 0 0 100%;
  font-size: 14px;
  color: var(--wp--preset--color--muted);
}

.tr-termine-leer {
  color: var(--wp--preset--color--muted);
  margin: 0;
}

/* Verwaltungsfenster */
body.tr-fenster-offen { overflow: hidden; }

.tr-fenster {
  position: fixed;
  inset: 0;
  z-index: 100000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}

.tr-fenster[hidden] { display: none; }

.tr-fenster-hintergrund {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, .7);
}

.tr-fenster-kasten {
  position: relative;
  width: min(760px, 100%);
  max-height: 88vh;
  display: flex;
  flex-direction: column;
  border: 1px solid var(--wp--preset--color--line);
  border-radius: 10px;
  background: var(--wp--preset--color--bg-alt);
  box-shadow: 0 24px 60px rgba(0, 0, 0, .5);
}

.tr-fenster-kopf {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 24px;
  border-bottom: 1px solid var(--wp--preset--color--line);
}

.tr-fenster-kopf h2 {
  margin: 0;
  font-size: 20px;
  color: var(--wp--preset--color--heading);
}

.tr-pause-knopf {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  padding: 8px 18px;
  border: 1px solid var(--wp--preset--color--heading);
  border-radius: 20px;
  background: transparent;
  color: var(--wp--preset--color--body);
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}

.tr-pause-knopf:hover { color: var(--wp--preset--color--heading); }

.tr-pause-knopf.ist-aktiv {
  background: var(--wp--preset--color--primary);
  border-color: var(--wp--preset--color--primary);
  color: #fff;
}

.tr-fenster-zu {
  border: 0;
  background: transparent;
  color: var(--wp--preset--color--body);
  font-size: 30px;
  line-height: 1;
  cursor: pointer;
  padding: 0 4px;
}

.tr-fenster-zu:hover { color: var(--wp--preset--color--heading); }

.tr-fenster-inhalt {
  padding: 22px 24px 26px;
  overflow-y: auto;
}

.tr-fenster-inhalt h3 {
  margin: 28px 0 12px;
  font-size: 16px;
  color: var(--wp--preset--color--heading);
}

.tr-termin-form {
  display: grid;
  grid-template-columns: 1fr 140px 140px;
  gap: 14px 16px;
  align-items: end;
}

.tr-feld { display: flex; flex-direction: column; gap: 6px; }
.tr-feld-breit { grid-column: 1 / -1; }

.tr-feld label {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .3px;
  color: var(--wp--preset--color--body);
}

.tr-feld input {
  padding: 10px 12px;
  cursor: pointer;
  border: 1px solid var(--wp--preset--color--line);
  border-radius: 6px;
  background: var(--wp--preset--color--card);
  color: var(--wp--preset--color--heading);
  font: inherit;
  font-size: 15px;
}

.tr-status-knoepfe {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: center;
}

.tr-feld-breit > label { text-align: center; }

.tr-status-knopf {
  padding: 10px 18px;
  border: 2px solid transparent;
  border-radius: 6px;
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}

/* gedaempft in der eigenen Farbe, leuchtend sobald gewaehlt */
.tr-status-knopf.ist-gruen { background: rgba(58, 164, 74, .18);  border-color: rgba(58, 164, 74, .45);  color: #6cc478; }
.tr-status-knopf.ist-gelb  { background: rgba(216, 163, 0, .18);  border-color: rgba(216, 163, 0, .45);  color: #e3ba3d; }
.tr-status-knopf.ist-rot   { background: rgba(192, 57, 43, .18);  border-color: rgba(192, 57, 43, .45);  color: #d9695b; }

.tr-status-knopf.ist-gruen.ist-gewaehlt { background: #3aa44a; border-color: #3aa44a; color: #fff; }
.tr-status-knopf.ist-gelb.ist-gewaehlt  { background: #d8a300; border-color: #d8a300; color: #1a1a1a; }
.tr-status-knopf.ist-rot.ist-gewaehlt   { background: #c0392b; border-color: #c0392b; color: #fff; }

.tr-knopf-primaer {
  grid-column: 1 / -1;
  justify-self: center;
  padding: 12px 24px;
  border: 0;
  border-radius: 6px;
  background: var(--wp--preset--color--primary);
  color: #fff;
  font: inherit;
  font-weight: 700;
  letter-spacing: .5px;
  cursor: pointer;
}

.tr-knopf-primaer:hover { background: var(--wp--preset--color--link-hover); }

/* Liste im Verwaltungsfenster */
.tr-verwaltung-zeile {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 10px 14px;
  border-left: 4px solid var(--wp--preset--color--line);
  border-radius: 6px;
  background: var(--wp--preset--color--card);
  margin-bottom: 8px;
  flex-wrap: wrap;
}

.tr-verwaltung-zeile.ist-gruen { border-left-color: #3aa44a; }
.tr-verwaltung-zeile.ist-gelb  { border-left-color: #d8a300; }
.tr-verwaltung-zeile.ist-rot   { border-left-color: #c0392b; }
.tr-verwaltung-zeile.ist-vergangen { opacity: .45; }

.tr-verwaltung-datum {
  font-weight: 700;
  color: var(--wp--preset--color--heading);
  min-width: 150px;
}

.tr-verwaltung-zeit { color: var(--wp--preset--color--body); font-size: 15px; }

.tr-verwaltung-knoepfe { margin-left: auto; display: flex; gap: 6px; }

.tr-verwaltung-hinweis {
  flex: 0 0 100%;
  font-size: 13px;
  color: var(--wp--preset--color--muted);
}

.tr-mini-knopf {
  width: 28px;
  height: 28px;
  padding: 0;
  border: 2px solid var(--wp--preset--color--line);
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--wp--preset--color--body);
  font-size: 17px;
  line-height: 1;
}

.tr-mini-knopf span {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  display: block;
}

.tr-mini-knopf.ist-gruen span { background: #3aa44a; }
.tr-mini-knopf.ist-gelb span  { background: #d8a300; }
.tr-mini-knopf.ist-rot span   { background: #c0392b; }

.tr-mini-knopf.ist-gruen.ist-gewaehlt { border-color: #3aa44a; }
.tr-mini-knopf.ist-gelb.ist-gewaehlt  { border-color: #d8a300; }
.tr-mini-knopf.ist-rot.ist-gewaehlt   { border-color: #c0392b; }

.tr-mini-knopf.tr-weg:hover { border-color: #c0392b; color: #c0392b; }

@media (max-width: 700px) {
  .tr-termin-form { grid-template-columns: 1fr; }
  .tr-verwaltung-knoepfe { margin-left: 0; }
}

/* Kalendersymbol neben der Ueberschrift auf der Terminseite */
.tr-termine-kopfzeile {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}

.tr-termine-symbol {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  padding: 0;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--wp--preset--color--body);
  cursor: pointer;
  transition: color .2s ease, background-color .2s ease;
}

.tr-termine-symbol svg {
  width: 21px;
  height: 21px;
}

.tr-termine-symbol:hover {
  color: var(--wp--preset--color--heading);
  background: var(--wp--preset--color--card);
}

/* ==========================================================================
   35. Terminverwaltung (nur fuer angemeldete Verwalter)
   ========================================================================== */

.tr-header-links {
  gap: 14px;
}

.tr-admin-zahnrad {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--wp--preset--color--body);
  cursor: pointer;
  transition: color .2s ease, background-color .2s ease;
}

.tr-admin-zahnrad svg {
  width: 21px;
  height: 21px;
}

.tr-admin-zahnrad:hover {
  color: var(--wp--preset--color--heading);
  background: var(--wp--preset--color--bg-alt);
}

/* Oeffentliche Anzeige: Sommerpause und Terminliste */
.tr-termine-anzeige {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.tr-sommerpause {
  padding: 22px 24px;
  border-radius: 8px;
  background: var(--wp--preset--color--card);
  color: var(--wp--preset--color--heading);
  font-size: 20px;
  font-weight: 700;
  text-align: center;
  letter-spacing: 1px;
}

/* Oeffentliche Terminliste */
.tr-termine-liste {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.tr-termin {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 18px;
  border-left: 4px solid var(--wp--preset--color--line);
  border-radius: 6px;
  background: var(--wp--preset--color--card);
  font-size: 16px;
  flex-wrap: wrap;
}

.tr-termin.ist-gruen { border-left-color: #3aa44a; }
.tr-termin.ist-gelb  { border-left-color: #d8a300; }
.tr-termin.ist-rot   { border-left-color: #c0392b; }

.tr-termin-tag {
  font-weight: 700;
  color: var(--wp--preset--color--heading);
  min-width: 150px;
}

.tr-termin-zeit {
  color: var(--wp--preset--color--body);
}

.tr-termin-status {
  margin-left: auto;
  font-weight: 600;
}

.tr-termin.ist-gruen .tr-termin-status { color: #3aa44a; }
.tr-termin.ist-gelb  .tr-termin-status { color: #d8a300; }
.tr-termin.ist-rot   .tr-termin-status { color: #c0392b; }

.tr-termin-notiz {
  flex: 0 0 100%;
  font-size: 14px;
  color: var(--wp--preset--color--muted);
}

.tr-termine-leer {
  margin: 0;
  text-align: center;
  color: var(--wp--preset--color--body);
}

.tr-termine-hinweis {
  margin: 0;
  text-align: center;
  font-size: 16px;
  font-weight: 700;
  color: var(--wp--preset--color--heading);
}

/* Verwaltungsfenster */
body.tr-fenster-offen { overflow: hidden; }

.tr-fenster {
  position: fixed;
  inset: 0;
  z-index: 100000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}

.tr-fenster[hidden] { display: none; }

.tr-fenster-hintergrund {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, .7);
}

.tr-fenster-kasten {
  position: relative;
  width: min(760px, 100%);
  max-height: 88vh;
  display: flex;
  flex-direction: column;
  border: 1px solid var(--wp--preset--color--line);
  border-radius: 10px;
  background: var(--wp--preset--color--bg-alt);
  box-shadow: 0 24px 60px rgba(0, 0, 0, .5);
}

.tr-fenster-kopf {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 24px;
  border-bottom: 1px solid var(--wp--preset--color--line);
}

.tr-fenster-kopf h2 {
  margin: 0;
  font-size: 20px;
  color: var(--wp--preset--color--heading);
}

.tr-pause-knopf {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  padding: 8px 18px;
  border: 1px solid var(--wp--preset--color--heading);
  border-radius: 20px;
  background: transparent;
  color: var(--wp--preset--color--body);
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}

.tr-pause-knopf:hover { color: var(--wp--preset--color--heading); }

.tr-pause-knopf.ist-aktiv {
  background: var(--wp--preset--color--primary);
  border-color: var(--wp--preset--color--primary);
  color: #fff;
}

.tr-fenster-zu {
  border: 0;
  background: transparent;
  color: var(--wp--preset--color--body);
  font-size: 30px;
  line-height: 1;
  cursor: pointer;
  padding: 0 4px;
}

.tr-fenster-zu:hover { color: var(--wp--preset--color--heading); }

.tr-fenster-inhalt {
  padding: 22px 24px 26px;
  overflow-y: auto;
}

.tr-fenster-inhalt h3 {
  margin: 28px 0 12px;
  font-size: 16px;
  color: var(--wp--preset--color--heading);
}

.tr-termin-form {
  display: grid;
  grid-template-columns: 1fr 140px 140px;
  gap: 14px 16px;
  align-items: end;
}

.tr-feld { display: flex; flex-direction: column; gap: 6px; }
.tr-feld-breit { grid-column: 1 / -1; }

.tr-feld label {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .3px;
  color: var(--wp--preset--color--body);
}

.tr-feld input {
  padding: 10px 12px;
  cursor: pointer;
  border: 1px solid var(--wp--preset--color--line);
  border-radius: 6px;
  background: var(--wp--preset--color--card);
  color: var(--wp--preset--color--heading);
  font: inherit;
  font-size: 15px;
}

.tr-status-knoepfe {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: center;
}

.tr-feld-breit > label { text-align: center; }

.tr-status-knopf {
  padding: 10px 18px;
  border: 2px solid transparent;
  border-radius: 6px;
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}

/* gedaempft in der eigenen Farbe, leuchtend sobald gewaehlt */
.tr-status-knopf.ist-gruen { background: rgba(58, 164, 74, .18);  border-color: rgba(58, 164, 74, .45);  color: #6cc478; }
.tr-status-knopf.ist-gelb  { background: rgba(216, 163, 0, .18);  border-color: rgba(216, 163, 0, .45);  color: #e3ba3d; }
.tr-status-knopf.ist-rot   { background: rgba(192, 57, 43, .18);  border-color: rgba(192, 57, 43, .45);  color: #d9695b; }

.tr-status-knopf.ist-gruen.ist-gewaehlt { background: #3aa44a; border-color: #3aa44a; color: #fff; }
.tr-status-knopf.ist-gelb.ist-gewaehlt  { background: #d8a300; border-color: #d8a300; color: #1a1a1a; }
.tr-status-knopf.ist-rot.ist-gewaehlt   { background: #c0392b; border-color: #c0392b; color: #fff; }

.tr-knopf-primaer {
  grid-column: 1 / -1;
  justify-self: center;
  padding: 12px 24px;
  border: 0;
  border-radius: 6px;
  background: var(--wp--preset--color--primary);
  color: #fff;
  font: inherit;
  font-weight: 700;
  letter-spacing: .5px;
  cursor: pointer;
}

.tr-knopf-primaer:hover { background: var(--wp--preset--color--link-hover); }

/* Liste im Verwaltungsfenster */
.tr-verwaltung-zeile {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 10px 14px;
  border-left: 4px solid var(--wp--preset--color--line);
  border-radius: 6px;
  background: var(--wp--preset--color--card);
  margin-bottom: 8px;
  flex-wrap: wrap;
}

.tr-verwaltung-zeile.ist-gruen { border-left-color: #3aa44a; }
.tr-verwaltung-zeile.ist-gelb  { border-left-color: #d8a300; }
.tr-verwaltung-zeile.ist-rot   { border-left-color: #c0392b; }
.tr-verwaltung-zeile.ist-vergangen { opacity: .45; }

.tr-verwaltung-datum {
  font-weight: 700;
  color: var(--wp--preset--color--heading);
  min-width: 150px;
}

.tr-verwaltung-zeit { color: var(--wp--preset--color--body); font-size: 15px; }

.tr-verwaltung-knoepfe { margin-left: auto; display: flex; gap: 6px; }

.tr-verwaltung-hinweis {
  flex: 0 0 100%;
  font-size: 13px;
  color: var(--wp--preset--color--muted);
}

.tr-mini-knopf {
  width: 28px;
  height: 28px;
  padding: 0;
  border: 2px solid var(--wp--preset--color--line);
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--wp--preset--color--body);
  font-size: 17px;
  line-height: 1;
}

.tr-mini-knopf span {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  display: block;
}

.tr-mini-knopf.ist-gruen span { background: #3aa44a; }
.tr-mini-knopf.ist-gelb span  { background: #d8a300; }
.tr-mini-knopf.ist-rot span   { background: #c0392b; }

.tr-mini-knopf.ist-gruen.ist-gewaehlt { border-color: #3aa44a; }
.tr-mini-knopf.ist-gelb.ist-gewaehlt  { border-color: #d8a300; }
.tr-mini-knopf.ist-rot.ist-gewaehlt   { border-color: #c0392b; }

.tr-mini-knopf.tr-weg:hover { border-color: #c0392b; color: #c0392b; }

@media (max-width: 700px) {
  .tr-termin-form { grid-template-columns: 1fr; }
  .tr-verwaltung-knoepfe { margin-left: 0; }
}

/* Kalendersymbol neben der Ueberschrift auf der Terminseite */
.tr-termine-kopfzeile {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}

.tr-termine-symbol {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  padding: 0;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--wp--preset--color--body);
  cursor: pointer;
  transition: color .2s ease, background-color .2s ease;
}

.tr-termine-symbol svg {
  width: 21px;
  height: 21px;
}

.tr-termine-symbol:hover {
  color: var(--wp--preset--color--heading);
  background: var(--wp--preset--color--card);
}

/* Textblöcke im Verwaltungsfenster */
.tr-textblock {
  margin-bottom: 16px;
}

.tr-textblock-kopf {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 6px;
  font-size: 13px;
  font-weight: 600;
  color: var(--wp--preset--color--body);
}

.tr-textblock textarea {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--wp--preset--color--line);
  border-radius: 6px;
  background: var(--wp--preset--color--card);
  color: var(--wp--preset--color--heading);
  font: inherit;
  font-size: 15px;
  line-height: 1.5;
  resize: vertical;
}

.tr-schalter {
  position: relative;
  width: 44px;
  height: 24px;
  padding: 0;
  border: 0;
  border-radius: 12px;
  background: var(--wp--preset--color--line);
  cursor: pointer;
  flex: 0 0 44px;
  transition: background-color .15s ease;
}

.tr-schalter span {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #fff;
  transition: transform .15s ease;
}

.tr-schalter.ist-aktiv { background: #3aa44a; }
.tr-schalter.ist-aktiv span { transform: translateX(20px); }

/* ==========================================================================
   35. Terminverwaltung (nur fuer angemeldete Verwalter)
   ========================================================================== */

.tr-header-links {
  gap: 14px;
}

.tr-admin-zahnrad {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--wp--preset--color--body);
  cursor: pointer;
  transition: color .2s ease, background-color .2s ease;
}

.tr-admin-zahnrad svg {
  width: 21px;
  height: 21px;
}

.tr-admin-zahnrad:hover {
  color: var(--wp--preset--color--heading);
  background: var(--wp--preset--color--bg-alt);
}

/* Oeffentliche Anzeige: Sommerpause und Terminliste */
.tr-termine-anzeige {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.tr-sommerpause {
  padding: 22px 24px;
  border-radius: 8px;
  background: var(--wp--preset--color--card);
  color: var(--wp--preset--color--heading);
  font-size: 20px;
  font-weight: 700;
  text-align: center;
  letter-spacing: 1px;
}

/* Oeffentliche Terminliste */
.tr-termine-liste {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.tr-termin {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 18px;
  border-left: 4px solid var(--wp--preset--color--line);
  border-radius: 6px;
  background: var(--wp--preset--color--card);
  font-size: 16px;
  flex-wrap: wrap;
}

.tr-termin.ist-gruen { border-left-color: #3aa44a; }
.tr-termin.ist-gelb  { border-left-color: #d8a300; }
.tr-termin.ist-rot   { border-left-color: #c0392b; }

.tr-termin-tag {
  font-weight: 700;
  color: var(--wp--preset--color--heading);
  min-width: 150px;
}

.tr-termin-zeit {
  color: var(--wp--preset--color--body);
}

.tr-termin-status {
  margin-left: auto;
  font-weight: 600;
}

.tr-termin.ist-gruen .tr-termin-status { color: #3aa44a; }
.tr-termin.ist-gelb  .tr-termin-status { color: #d8a300; }
.tr-termin.ist-rot   .tr-termin-status { color: #c0392b; }

.tr-termin-notiz {
  flex: 0 0 100%;
  font-size: 14px;
  color: var(--wp--preset--color--muted);
}

.tr-termine-leer {
  margin: 0;
  text-align: center;
  color: var(--wp--preset--color--body);
}

.tr-termine-hinweis {
  margin: 0;
  text-align: center;
  font-size: 16px;
  font-weight: 700;
  color: var(--wp--preset--color--heading);
}

/* Verwaltungsfenster */
body.tr-fenster-offen { overflow: hidden; }

.tr-fenster {
  position: fixed;
  inset: 0;
  z-index: 100000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}

.tr-fenster[hidden] { display: none; }

.tr-fenster-hintergrund {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, .7);
}

.tr-fenster-kasten {
  position: relative;
  width: min(760px, 100%);
  max-height: 88vh;
  display: flex;
  flex-direction: column;
  border: 1px solid var(--wp--preset--color--line);
  border-radius: 10px;
  background: var(--wp--preset--color--bg-alt);
  box-shadow: 0 24px 60px rgba(0, 0, 0, .5);
}

.tr-fenster-kopf {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 24px;
  border-bottom: 1px solid var(--wp--preset--color--line);
}

.tr-fenster-kopf h2 {
  margin: 0;
  font-size: 20px;
  color: var(--wp--preset--color--heading);
}

.tr-pause-knopf {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  padding: 8px 18px;
  border: 1px solid var(--wp--preset--color--heading);
  border-radius: 20px;
  background: transparent;
  color: var(--wp--preset--color--body);
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}

.tr-pause-knopf:hover { color: var(--wp--preset--color--heading); }

.tr-pause-knopf.ist-aktiv {
  background: var(--wp--preset--color--primary);
  border-color: var(--wp--preset--color--primary);
  color: #fff;
}

.tr-fenster-zu {
  border: 0;
  background: transparent;
  color: var(--wp--preset--color--body);
  font-size: 30px;
  line-height: 1;
  cursor: pointer;
  padding: 0 4px;
}

.tr-fenster-zu:hover { color: var(--wp--preset--color--heading); }

.tr-fenster-inhalt {
  padding: 22px 24px 26px;
  overflow-y: auto;
  overflow-x: hidden;
}

.tr-fenster-inhalt h3 {
  margin: 28px 0 12px;
  font-size: 16px;
  color: var(--wp--preset--color--heading);
}

.tr-termin-form {
  display: grid;
  grid-template-columns: 1fr 140px 140px;
  gap: 14px 16px;
  align-items: end;
}

.tr-feld { display: flex; flex-direction: column; gap: 6px; }
.tr-feld-breit { grid-column: 1 / -1; }

.tr-feld label {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .3px;
  color: var(--wp--preset--color--body);
}

.tr-feld input {
  padding: 10px 12px;
  cursor: pointer;
  border: 1px solid var(--wp--preset--color--line);
  border-radius: 6px;
  background: var(--wp--preset--color--card);
  color: var(--wp--preset--color--heading);
  font: inherit;
  font-size: 15px;
}

.tr-status-knoepfe {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: center;
}

.tr-feld-breit > label { text-align: center; }

.tr-status-knopf {
  padding: 10px 18px;
  border: 2px solid transparent;
  border-radius: 6px;
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}

/* gedaempft in der eigenen Farbe, leuchtend sobald gewaehlt */
.tr-status-knopf.ist-gruen { background: rgba(58, 164, 74, .18);  border-color: rgba(58, 164, 74, .45);  color: #6cc478; }
.tr-status-knopf.ist-gelb  { background: rgba(216, 163, 0, .18);  border-color: rgba(216, 163, 0, .45);  color: #e3ba3d; }
.tr-status-knopf.ist-rot   { background: rgba(192, 57, 43, .18);  border-color: rgba(192, 57, 43, .45);  color: #d9695b; }

.tr-status-knopf.ist-gruen.ist-gewaehlt { background: #3aa44a; border-color: #3aa44a; color: #fff; }
.tr-status-knopf.ist-gelb.ist-gewaehlt  { background: #d8a300; border-color: #d8a300; color: #1a1a1a; }
.tr-status-knopf.ist-rot.ist-gewaehlt   { background: #c0392b; border-color: #c0392b; color: #fff; }

.tr-knopf-primaer {
  grid-column: 1 / -1;
  justify-self: center;
  padding: 12px 24px;
  border: 0;
  border-radius: 6px;
  background: var(--wp--preset--color--primary);
  color: #fff;
  font: inherit;
  font-weight: 700;
  letter-spacing: .5px;
  cursor: pointer;
}

.tr-knopf-primaer:hover { background: var(--wp--preset--color--link-hover); }

/* Liste im Verwaltungsfenster */
.tr-verwaltung-zeile {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 10px 14px;
  border-left: 4px solid var(--wp--preset--color--line);
  border-radius: 6px;
  background: var(--wp--preset--color--card);
  margin-bottom: 8px;
  flex-wrap: wrap;
}

.tr-verwaltung-zeile.ist-gruen { border-left-color: #3aa44a; }
.tr-verwaltung-zeile.ist-gelb  { border-left-color: #d8a300; }
.tr-verwaltung-zeile.ist-rot   { border-left-color: #c0392b; }
.tr-verwaltung-zeile.ist-vergangen { opacity: .45; }

.tr-verwaltung-datum {
  font-weight: 700;
  color: var(--wp--preset--color--heading);
  min-width: 150px;
}

.tr-verwaltung-zeit { color: var(--wp--preset--color--body); font-size: 15px; }

.tr-verwaltung-knoepfe { margin-left: auto; display: flex; gap: 6px; }

.tr-verwaltung-hinweis {
  flex: 0 0 100%;
  font-size: 13px;
  color: var(--wp--preset--color--muted);
}

.tr-mini-knopf {
  width: 28px;
  height: 28px;
  padding: 0;
  border: 2px solid var(--wp--preset--color--line);
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--wp--preset--color--body);
  font-size: 17px;
  line-height: 1;
}

.tr-mini-knopf span {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  display: block;
}

.tr-mini-knopf.ist-gruen span { background: #3aa44a; }
.tr-mini-knopf.ist-gelb span  { background: #d8a300; }
.tr-mini-knopf.ist-rot span   { background: #c0392b; }

.tr-mini-knopf.ist-gruen.ist-gewaehlt { border-color: #3aa44a; }
.tr-mini-knopf.ist-gelb.ist-gewaehlt  { border-color: #d8a300; }
.tr-mini-knopf.ist-rot.ist-gewaehlt   { border-color: #c0392b; }

.tr-mini-knopf.tr-weg:hover { border-color: #c0392b; color: #c0392b; }

@media (max-width: 700px) {
  .tr-termin-form { grid-template-columns: 1fr; }
  .tr-verwaltung-knoepfe { margin-left: 0; }
}

/* Kalendersymbol neben der Ueberschrift auf der Terminseite */
.tr-termine-kopfzeile {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}

.tr-termine-symbol {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  padding: 0;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--wp--preset--color--body);
  cursor: pointer;
  transition: color .2s ease, background-color .2s ease;
}

.tr-termine-symbol svg {
  width: 21px;
  height: 21px;
}

.tr-termine-symbol:hover {
  color: var(--wp--preset--color--heading);
  background: var(--wp--preset--color--card);
}

/* Textblöcke im Verwaltungsfenster */
.tr-textblock {
  margin-bottom: 16px;
}

.tr-textblock-kopf {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 6px;
  font-size: 13px;
  font-weight: 600;
  color: var(--wp--preset--color--body);
}

.tr-textblock textarea {
  width: 100%;
  box-sizing: border-box;
  padding: 10px 12px;
  border: 1px solid var(--wp--preset--color--line);
  border-radius: 6px;
  background: var(--wp--preset--color--card);
  color: var(--wp--preset--color--heading);
  font: inherit;
  font-size: 15px;
  line-height: 1.5;
  resize: vertical;
}

.tr-schalter {
  position: relative;
  width: 44px;
  height: 24px;
  padding: 0;
  border: 0;
  border-radius: 12px;
  background: var(--wp--preset--color--line);
  cursor: pointer;
  flex: 0 0 44px;
  transition: background-color .15s ease;
}

.tr-schalter span {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #fff;
  transition: transform .15s ease;
}

.tr-schalter.ist-aktiv { background: #3aa44a; }
.tr-schalter.ist-aktiv span { transform: translateX(20px); }

/* ==========================================================================
   35. Terminverwaltung (nur fuer angemeldete Verwalter)
   ========================================================================== */

.tr-header-links {
  gap: 14px;
}

.tr-admin-zahnrad {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--wp--preset--color--body);
  cursor: pointer;
  transition: color .2s ease, background-color .2s ease;
}

.tr-admin-zahnrad svg {
  width: 21px;
  height: 21px;
}

.tr-admin-zahnrad:hover {
  color: var(--wp--preset--color--heading);
  background: var(--wp--preset--color--bg-alt);
}

/* Oeffentliche Anzeige: Sommerpause und Terminliste */
.tr-termine-anzeige {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.tr-sommerpause {
  padding: 22px 24px;
  border-radius: 8px;
  background: var(--wp--preset--color--card);
  color: var(--wp--preset--color--heading);
  font-size: 20px;
  font-weight: 700;
  text-align: center;
  letter-spacing: 1px;
}

/* Oeffentliche Terminliste */
.tr-termine-liste {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.tr-termin {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 18px;
  border-left: 4px solid var(--wp--preset--color--line);
  border-radius: 6px;
  background: var(--wp--preset--color--card);
  font-size: 16px;
  flex-wrap: wrap;
}

.tr-termin.ist-gruen { border-left-color: #3aa44a; }
.tr-termin.ist-gelb  { border-left-color: #d8a300; }
.tr-termin.ist-rot   { border-left-color: #c0392b; }

.tr-termin-tag {
  font-weight: 700;
  color: var(--wp--preset--color--heading);
  min-width: 150px;
}

.tr-termin-zeit {
  color: var(--wp--preset--color--body);
}

.tr-termin-status {
  margin-left: auto;
  font-weight: 600;
}

.tr-termin.ist-gruen .tr-termin-status { color: #3aa44a; }
.tr-termin.ist-gelb  .tr-termin-status { color: #d8a300; }
.tr-termin.ist-rot   .tr-termin-status { color: #c0392b; }

.tr-termin-notiz {
  flex: 0 0 100%;
  font-size: 14px;
  color: var(--wp--preset--color--muted);
}

.tr-termine-leer {
  margin: 0;
  text-align: center;
  color: var(--wp--preset--color--body);
}

.tr-termine-hinweis {
  margin: 0;
  text-align: center;
  font-size: 16px;
  font-weight: 700;
  color: var(--wp--preset--color--heading);
}

/* Verwaltungsfenster */
body.tr-fenster-offen { overflow: hidden; }

.tr-fenster {
  position: fixed;
  inset: 0;
  z-index: 100000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}

.tr-fenster[hidden] { display: none; }

.tr-fenster-hintergrund {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, .7);
}

.tr-fenster-kasten {
  position: relative;
  width: min(760px, 100%);
  max-height: 88vh;
  display: flex;
  flex-direction: column;
  border: 1px solid var(--wp--preset--color--line);
  border-radius: 10px;
  background: var(--wp--preset--color--bg-alt);
  box-shadow: 0 24px 60px rgba(0, 0, 0, .5);
}

.tr-fenster-kopf {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 24px;
  border-bottom: 1px solid var(--wp--preset--color--line);
}

.tr-fenster-kopf h2 {
  margin: 0;
  font-size: 20px;
  color: var(--wp--preset--color--heading);
}

.tr-pause-knopf {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  padding: 8px 18px;
  border: 1px solid var(--wp--preset--color--heading);
  border-radius: 20px;
  background: transparent;
  color: var(--wp--preset--color--body);
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}

.tr-pause-knopf:hover { color: var(--wp--preset--color--heading); }

.tr-pause-knopf.ist-aktiv {
  background: var(--wp--preset--color--primary);
  border-color: var(--wp--preset--color--primary);
  color: #fff;
}

.tr-fenster-zu {
  border: 0;
  background: transparent;
  color: var(--wp--preset--color--body);
  font-size: 30px;
  line-height: 1;
  cursor: pointer;
  padding: 0 4px;
}

.tr-fenster-zu:hover { color: var(--wp--preset--color--heading); }

.tr-fenster-inhalt {
  padding: 22px 24px 26px;
  overflow-y: auto;
  overflow-x: hidden;
}

.tr-fenster-inhalt h3 {
  margin: 28px 0 12px;
  font-size: 16px;
  color: var(--wp--preset--color--heading);
}

.tr-termin-form {
  display: grid;
  grid-template-columns: 1fr 140px 140px;
  gap: 14px 16px;
  align-items: end;
}

.tr-feld { display: flex; flex-direction: column; gap: 6px; }
.tr-feld-breit { grid-column: 1 / -1; }

.tr-feld label {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .3px;
  color: var(--wp--preset--color--body);
}

.tr-feld input {
  padding: 10px 12px;
  cursor: pointer;
  border: 1px solid var(--wp--preset--color--line);
  border-radius: 6px;
  background: var(--wp--preset--color--card);
  color: var(--wp--preset--color--heading);
  font: inherit;
  font-size: 15px;
}

.tr-status-knoepfe {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: center;
}

.tr-feld-breit > label { text-align: center; }

.tr-status-knopf {
  padding: 10px 18px;
  border: 2px solid transparent;
  border-radius: 6px;
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}

/* gedaempft in der eigenen Farbe, leuchtend sobald gewaehlt */
.tr-status-knopf.ist-gruen { background: rgba(58, 164, 74, .18);  border-color: rgba(58, 164, 74, .45);  color: #6cc478; }
.tr-status-knopf.ist-gelb  { background: rgba(216, 163, 0, .18);  border-color: rgba(216, 163, 0, .45);  color: #e3ba3d; }
.tr-status-knopf.ist-rot   { background: rgba(192, 57, 43, .18);  border-color: rgba(192, 57, 43, .45);  color: #d9695b; }

.tr-status-knopf.ist-gruen.ist-gewaehlt { background: #3aa44a; border-color: #3aa44a; color: #fff; }
.tr-status-knopf.ist-gelb.ist-gewaehlt  { background: #d8a300; border-color: #d8a300; color: #1a1a1a; }
.tr-status-knopf.ist-rot.ist-gewaehlt   { background: #c0392b; border-color: #c0392b; color: #fff; }

.tr-knopf-primaer {
  grid-column: 1 / -1;
  justify-self: center;
  padding: 12px 24px;
  border: 0;
  border-radius: 6px;
  background: var(--wp--preset--color--primary);
  color: #fff;
  font: inherit;
  font-weight: 700;
  letter-spacing: .5px;
  cursor: pointer;
}

.tr-knopf-primaer:hover { background: var(--wp--preset--color--link-hover); }

/* Liste im Verwaltungsfenster */
.tr-verwaltung-zeile {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 10px 14px;
  border-left: 4px solid var(--wp--preset--color--line);
  border-radius: 6px;
  background: var(--wp--preset--color--card);
  margin-bottom: 8px;
  flex-wrap: wrap;
}

.tr-verwaltung-zeile.ist-gruen { border-left-color: #3aa44a; }
.tr-verwaltung-zeile.ist-gelb  { border-left-color: #d8a300; }
.tr-verwaltung-zeile.ist-rot   { border-left-color: #c0392b; }
.tr-verwaltung-zeile.ist-vergangen { opacity: .45; }

.tr-verwaltung-datum {
  font-weight: 700;
  color: var(--wp--preset--color--heading);
  min-width: 150px;
}

.tr-verwaltung-zeit { color: var(--wp--preset--color--body); font-size: 15px; }

.tr-verwaltung-knoepfe { margin-left: auto; display: flex; gap: 6px; }

.tr-verwaltung-hinweis {
  flex: 0 0 100%;
  font-size: 13px;
  color: var(--wp--preset--color--muted);
}

.tr-mini-knopf {
  width: 28px;
  height: 28px;
  padding: 0;
  border: 2px solid var(--wp--preset--color--line);
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--wp--preset--color--body);
  font-size: 17px;
  line-height: 1;
}

.tr-mini-knopf span {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  display: block;
}

.tr-mini-knopf.ist-gruen span { background: #3aa44a; }
.tr-mini-knopf.ist-gelb span  { background: #d8a300; }
.tr-mini-knopf.ist-rot span   { background: #c0392b; }

.tr-mini-knopf.ist-gruen.ist-gewaehlt { border-color: #3aa44a; }
.tr-mini-knopf.ist-gelb.ist-gewaehlt  { border-color: #d8a300; }
.tr-mini-knopf.ist-rot.ist-gewaehlt   { border-color: #c0392b; }

.tr-mini-knopf.tr-weg:hover { border-color: #c0392b; color: #c0392b; }

@media (max-width: 700px) {
  .tr-termin-form { grid-template-columns: 1fr; }
  .tr-verwaltung-knoepfe { margin-left: 0; }
}

/* Kalendersymbol neben der Ueberschrift auf der Terminseite */
.tr-termine-kopfzeile {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}

.tr-termine-symbol {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  padding: 0;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--wp--preset--color--body);
  cursor: pointer;
  transition: color .2s ease, background-color .2s ease;
}

.tr-termine-symbol svg {
  width: 21px;
  height: 21px;
}

.tr-termine-symbol:hover {
  color: var(--wp--preset--color--heading);
  background: var(--wp--preset--color--card);
}

/* Textblöcke im Verwaltungsfenster */
.tr-textblock {
  margin-bottom: 16px;
}

.tr-textblock-kopf {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 6px;
  font-size: 13px;
  font-weight: 600;
  color: var(--wp--preset--color--body);
}

.tr-textblock textarea {
  width: 100%;
  box-sizing: border-box;
  padding: 10px 12px;
  border: 1px solid var(--wp--preset--color--line);
  border-radius: 6px;
  background: var(--wp--preset--color--card);
  color: var(--wp--preset--color--heading);
  font: inherit;
  font-size: 15px;
  line-height: 1.5;
  resize: vertical;
}

.tr-schalter {
  position: relative;
  width: 44px;
  height: 24px;
  padding: 0;
  border: 0;
  border-radius: 12px;
  background: var(--wp--preset--color--line);
  cursor: pointer;
  flex: 0 0 44px;
  transition: background-color .15s ease;
}

.tr-schalter span {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #fff;
  transition: transform .15s ease;
}

.tr-schalter.ist-aktiv { background: #3aa44a; }
.tr-schalter.ist-aktiv span { transform: translateX(20px); }

/* Eigener Kalender im Verwaltungsfenster */
.tr-kalender {
  border: 1px solid var(--wp--preset--color--line);
  border-radius: 8px;
  background: var(--wp--preset--color--card);
  padding: 12px;
}

.tr-kalender-kopf {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}

.tr-kalender-monat {
  font-weight: 700;
  color: var(--wp--preset--color--heading);
}

.tr-kalender-pfeil {
  width: 30px;
  height: 30px;
  border: 1px solid var(--wp--preset--color--line);
  border-radius: 6px;
  background: transparent;
  color: var(--wp--preset--color--body);
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
}

.tr-kalender-pfeil:hover {
  color: var(--wp--preset--color--heading);
  border-color: var(--wp--preset--color--body);
}

.tr-kalender-gitter {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 4px;
}

.tr-kalender-wochentag {
  text-align: center;
  font-size: 12px;
  font-weight: 600;
  color: var(--wp--preset--color--muted);
  padding-bottom: 4px;
}

.tr-kalender-wochentag.ist-samstag {
  color: var(--wp--preset--color--heading);
  font-weight: 700;
}

.tr-kalender-tag {
  position: relative;
  aspect-ratio: 1;
  border: 1px solid transparent;
  border-radius: 6px;
  background: transparent;
  color: var(--wp--preset--color--body);
  font: inherit;
  font-size: 14px;
  cursor: pointer;
  transition: border-color .15s ease, background-color .15s ease;
}

.tr-kalender-tag:hover:not(:disabled) {
  border-color: var(--wp--preset--color--body);
}

.tr-kalender-tag.ist-samstag {
  font-weight: 700;
  color: var(--wp--preset--color--heading);
}

.tr-kalender-tag.ist-sonntag {
  color: var(--wp--preset--color--muted);
}

.tr-kalender-tag.ist-vergangen {
  opacity: .3;
  cursor: default;
}

.tr-kalender-tag.ist-gewaehlt {
  background: var(--wp--preset--color--primary);
  border-color: var(--wp--preset--color--primary);
  color: #fff;
}

/* schon eingetragene Tage: Punkt in der Kennzeichnungsfarbe */
.tr-kalender-tag.ist-belegt::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 4px;
  transform: translateX(-50%);
  width: 5px;
  height: 5px;
  border-radius: 50%;
}

.tr-kalender-tag.ist-belegt.ist-gruen::after { background: #3aa44a; }
.tr-kalender-tag.ist-belegt.ist-gelb::after  { background: #d8a300; }
.tr-kalender-tag.ist-belegt.ist-rot::after   { background: #c0392b; }

/* ==========================================================================
   35. Terminverwaltung (nur fuer angemeldete Verwalter)
   ========================================================================== */

.tr-header-links {
  gap: 14px;
}

.tr-admin-zahnrad {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--wp--preset--color--body);
  cursor: pointer;
  transition: color .2s ease, background-color .2s ease;
}

.tr-admin-zahnrad svg {
  width: 21px;
  height: 21px;
}

.tr-admin-zahnrad:hover {
  color: var(--wp--preset--color--heading);
  background: var(--wp--preset--color--bg-alt);
}

/* Oeffentliche Anzeige: Sommerpause und Terminliste */
.tr-termine-anzeige {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.tr-sommerpause {
  padding: 22px 24px;
  border-radius: 8px;
  background: var(--wp--preset--color--card);
  color: var(--wp--preset--color--heading);
  font-size: 20px;
  font-weight: 700;
  text-align: center;
  letter-spacing: 1px;
}

/* Oeffentliche Terminliste */
.tr-termine-liste {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.tr-termin {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 18px;
  border-left: 4px solid var(--wp--preset--color--line);
  border-radius: 6px;
  background: var(--wp--preset--color--card);
  font-size: 16px;
  flex-wrap: wrap;
}

.tr-termin.ist-gruen { border-left-color: #3aa44a; }
.tr-termin.ist-gelb  { border-left-color: #d8a300; }
.tr-termin.ist-rot   { border-left-color: #c0392b; }

.tr-termin-tag {
  font-weight: 700;
  color: var(--wp--preset--color--heading);
  min-width: 150px;
}

.tr-termin-zeit {
  color: var(--wp--preset--color--body);
}

.tr-termin-status {
  margin-left: auto;
  font-weight: 600;
}

.tr-termin.ist-gruen .tr-termin-status { color: #3aa44a; }
.tr-termin.ist-gelb  .tr-termin-status { color: #d8a300; }
.tr-termin.ist-rot   .tr-termin-status { color: #c0392b; }

.tr-termin-notiz {
  flex: 0 0 100%;
  font-size: 14px;
  color: var(--wp--preset--color--muted);
}

.tr-termine-leer {
  margin: 0;
  text-align: center;
  color: var(--wp--preset--color--body);
}

.tr-termine-hinweis {
  margin: 0;
  text-align: center;
  font-size: 16px;
  font-weight: 700;
  color: var(--wp--preset--color--heading);
}

/* Verwaltungsfenster */
body.tr-fenster-offen { overflow: hidden; }

.tr-fenster {
  position: fixed;
  inset: 0;
  z-index: 100000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}

.tr-fenster[hidden] { display: none; }

.tr-fenster-hintergrund {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, .7);
}

.tr-fenster-kasten {
  position: relative;
  width: min(760px, 100%);
  max-height: 88vh;
  display: flex;
  flex-direction: column;
  border: 1px solid var(--wp--preset--color--line);
  border-radius: 10px;
  background: var(--wp--preset--color--bg-alt);
  box-shadow: 0 24px 60px rgba(0, 0, 0, .5);
}

.tr-fenster-kopf {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 24px;
  border-bottom: 1px solid var(--wp--preset--color--line);
}

.tr-fenster-kopf h2 {
  margin: 0;
  font-size: 20px;
  color: var(--wp--preset--color--heading);
}

.tr-pause-knopf {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  padding: 8px 18px;
  border: 1px solid var(--wp--preset--color--heading);
  border-radius: 20px;
  background: transparent;
  color: var(--wp--preset--color--body);
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}

.tr-pause-knopf:hover { color: var(--wp--preset--color--heading); }

.tr-pause-knopf.ist-aktiv {
  background: var(--wp--preset--color--primary);
  border-color: var(--wp--preset--color--primary);
  color: #fff;
}

.tr-fenster-zu {
  border: 0;
  background: transparent;
  color: var(--wp--preset--color--body);
  font-size: 30px;
  line-height: 1;
  cursor: pointer;
  padding: 0 4px;
}

.tr-fenster-zu:hover { color: var(--wp--preset--color--heading); }

.tr-fenster-inhalt {
  padding: 22px 24px 26px;
  overflow-y: auto;
  overflow-x: hidden;
}

.tr-fenster-inhalt h3 {
  margin: 28px 0 12px;
  font-size: 16px;
  color: var(--wp--preset--color--heading);
}

.tr-termin-form {
  display: grid;
  grid-template-columns: 340px 1fr;
  gap: 14px 20px;
  align-items: start;
}

.tr-feld-kalender { grid-row: span 2; }

.tr-feld { display: flex; flex-direction: column; gap: 6px; }
.tr-feld-breit { grid-column: 1 / -1; }

.tr-feld label {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .3px;
  color: var(--wp--preset--color--body);
}

.tr-feld input {
  padding: 10px 12px;
  cursor: pointer;
  border: 1px solid var(--wp--preset--color--line);
  border-radius: 6px;
  background: var(--wp--preset--color--card);
  color: var(--wp--preset--color--heading);
  font: inherit;
  font-size: 15px;
}

.tr-status-knoepfe {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: center;
}

.tr-feld-breit > label { text-align: center; }

.tr-status-knopf {
  padding: 10px 18px;
  border: 2px solid transparent;
  border-radius: 6px;
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}

/* gedaempft in der eigenen Farbe, leuchtend sobald gewaehlt */
.tr-status-knopf.ist-gruen { background: rgba(58, 164, 74, .18);  border-color: rgba(58, 164, 74, .45);  color: #6cc478; }
.tr-status-knopf.ist-gelb  { background: rgba(216, 163, 0, .18);  border-color: rgba(216, 163, 0, .45);  color: #e3ba3d; }
.tr-status-knopf.ist-rot   { background: rgba(192, 57, 43, .18);  border-color: rgba(192, 57, 43, .45);  color: #d9695b; }

.tr-status-knopf.ist-gruen.ist-gewaehlt { background: #3aa44a; border-color: #3aa44a; color: #fff; }
.tr-status-knopf.ist-gelb.ist-gewaehlt  { background: #d8a300; border-color: #d8a300; color: #1a1a1a; }
.tr-status-knopf.ist-rot.ist-gewaehlt   { background: #c0392b; border-color: #c0392b; color: #fff; }

.tr-knopf-primaer {
  grid-column: 1 / -1;
  justify-self: center;
  padding: 12px 24px;
  border: 0;
  border-radius: 6px;
  background: var(--wp--preset--color--primary);
  color: #fff;
  font: inherit;
  font-weight: 700;
  letter-spacing: .5px;
  cursor: pointer;
}

.tr-knopf-primaer:hover { background: var(--wp--preset--color--link-hover); }

/* Liste im Verwaltungsfenster */
.tr-verwaltung-zeile {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 10px 14px;
  border-left: 4px solid var(--wp--preset--color--line);
  border-radius: 6px;
  background: var(--wp--preset--color--card);
  margin-bottom: 8px;
  flex-wrap: wrap;
}

.tr-verwaltung-zeile.ist-gruen { border-left-color: #3aa44a; }
.tr-verwaltung-zeile.ist-gelb  { border-left-color: #d8a300; }
.tr-verwaltung-zeile.ist-rot   { border-left-color: #c0392b; }
.tr-verwaltung-zeile.ist-vergangen { opacity: .45; }

.tr-verwaltung-datum {
  font-weight: 700;
  color: var(--wp--preset--color--heading);
  min-width: 150px;
}

.tr-verwaltung-zeit { color: var(--wp--preset--color--body); font-size: 15px; }

.tr-verwaltung-knoepfe { margin-left: auto; display: flex; gap: 6px; }

.tr-verwaltung-hinweis {
  flex: 0 0 100%;
  font-size: 13px;
  color: var(--wp--preset--color--muted);
}

.tr-mini-knopf {
  width: 28px;
  height: 28px;
  padding: 0;
  border: 2px solid var(--wp--preset--color--line);
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--wp--preset--color--body);
  font-size: 17px;
  line-height: 1;
}

.tr-mini-knopf span {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  display: block;
}

.tr-mini-knopf.ist-gruen span { background: #3aa44a; }
.tr-mini-knopf.ist-gelb span  { background: #d8a300; }
.tr-mini-knopf.ist-rot span   { background: #c0392b; }

.tr-mini-knopf.ist-gruen.ist-gewaehlt { border-color: #3aa44a; }
.tr-mini-knopf.ist-gelb.ist-gewaehlt  { border-color: #d8a300; }
.tr-mini-knopf.ist-rot.ist-gewaehlt   { border-color: #c0392b; }

.tr-mini-knopf.tr-weg:hover { border-color: #c0392b; color: #c0392b; }

@media (max-width: 700px) {
  .tr-termin-form { grid-template-columns: 1fr; }
  .tr-feld-kalender { grid-row: auto; }
  .tr-kalender { max-width: none; }
  .tr-verwaltung-knoepfe { margin-left: 0; }
}

/* Kalendersymbol neben der Ueberschrift auf der Terminseite */
.tr-termine-kopfzeile {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}

.tr-termine-symbol {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  padding: 0;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--wp--preset--color--body);
  cursor: pointer;
  transition: color .2s ease, background-color .2s ease;
}

.tr-termine-symbol svg {
  width: 21px;
  height: 21px;
}

.tr-termine-symbol:hover {
  color: var(--wp--preset--color--heading);
  background: var(--wp--preset--color--card);
}

/* Textblöcke im Verwaltungsfenster */
.tr-textblock {
  margin-bottom: 16px;
}

.tr-textblock-kopf {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 6px;
  font-size: 13px;
  font-weight: 600;
  color: var(--wp--preset--color--body);
}

.tr-textblock textarea {
  width: 100%;
  box-sizing: border-box;
  padding: 10px 12px;
  border: 1px solid var(--wp--preset--color--line);
  border-radius: 6px;
  background: var(--wp--preset--color--card);
  color: var(--wp--preset--color--heading);
  font: inherit;
  font-size: 15px;
  line-height: 1.5;
  resize: vertical;
}

.tr-schalter {
  position: relative;
  width: 44px;
  height: 24px;
  padding: 0;
  border: 0;
  border-radius: 12px;
  background: var(--wp--preset--color--line);
  cursor: pointer;
  flex: 0 0 44px;
  transition: background-color .15s ease;
}

.tr-schalter span {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #fff;
  transition: transform .15s ease;
}

.tr-schalter.ist-aktiv { background: #3aa44a; }
.tr-schalter.ist-aktiv span { transform: translateX(20px); }

/* Eigener Kalender im Verwaltungsfenster */
.tr-kalender {
  border: 1px solid var(--wp--preset--color--line);
  border-radius: 8px;
  background: var(--wp--preset--color--card);
  padding: 12px;
  max-width: 340px;
}

.tr-kalender-kopf {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}

.tr-kalender-monat {
  font-weight: 700;
  color: var(--wp--preset--color--heading);
}

.tr-kalender-pfeil {
  width: 30px;
  height: 30px;
  border: 1px solid var(--wp--preset--color--line);
  border-radius: 6px;
  background: transparent;
  color: var(--wp--preset--color--body);
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
}

.tr-kalender-pfeil:hover {
  color: var(--wp--preset--color--heading);
  border-color: var(--wp--preset--color--body);
}

.tr-kalender-gitter {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 4px;
}

.tr-kalender-wochentag {
  text-align: center;
  font-size: 12px;
  font-weight: 600;
  color: var(--wp--preset--color--muted);
  padding-bottom: 4px;
}

.tr-kalender-wochentag.ist-samstag {
  color: var(--wp--preset--color--heading);
  font-weight: 700;
}

.tr-kalender-tag {
  position: relative;
  height: 34px;
  border: 1px solid transparent;
  border-radius: 6px;
  background: transparent;
  color: var(--wp--preset--color--body);
  font: inherit;
  font-size: 14px;
  cursor: pointer;
  transition: border-color .15s ease, background-color .15s ease;
}

.tr-kalender-tag:hover:not(:disabled) {
  border-color: var(--wp--preset--color--body);
}

.tr-kalender-tag.ist-samstag {
  font-weight: 700;
  color: var(--wp--preset--color--heading);
}

.tr-kalender-tag.ist-sonntag {
  color: var(--wp--preset--color--muted);
}

.tr-kalender-tag.ist-vergangen {
  opacity: .3;
  cursor: default;
}

.tr-kalender-tag.ist-gewaehlt {
  background: var(--wp--preset--color--primary);
  border-color: var(--wp--preset--color--primary);
  color: #fff;
}

/* schon eingetragene Tage: Punkt in der Kennzeichnungsfarbe */
.tr-kalender-tag.ist-belegt::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 4px;
  transform: translateX(-50%);
  width: 5px;
  height: 5px;
  border-radius: 50%;
}

.tr-kalender-tag.ist-belegt.ist-gruen::after { background: #3aa44a; }
.tr-kalender-tag.ist-belegt.ist-gelb::after  { background: #d8a300; }
.tr-kalender-tag.ist-belegt.ist-rot::after   { background: #c0392b; }

/* ==========================================================================
   35. Terminverwaltung (nur fuer angemeldete Verwalter)
   ========================================================================== */

.tr-header-links {
  gap: 14px;
}

.tr-admin-zahnrad {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--wp--preset--color--body);
  cursor: pointer;
  transition: color .2s ease, background-color .2s ease;
}

.tr-admin-zahnrad svg {
  width: 21px;
  height: 21px;
}

.tr-admin-zahnrad:hover {
  color: var(--wp--preset--color--heading);
  background: var(--wp--preset--color--bg-alt);
}

/* Oeffentliche Anzeige: Sommerpause und Terminliste */
.tr-termine-anzeige {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.tr-sommerpause {
  padding: 22px 24px;
  border-radius: 8px;
  background: var(--wp--preset--color--card);
  color: var(--wp--preset--color--heading);
  font-size: 20px;
  font-weight: 700;
  text-align: center;
  letter-spacing: 1px;
}

/* Oeffentliche Terminliste */
.tr-termine-liste {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.tr-termin {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 18px;
  border-left: 4px solid var(--wp--preset--color--line);
  border-radius: 6px;
  background: var(--wp--preset--color--card);
  font-size: 16px;
  flex-wrap: wrap;
}

.tr-termin.ist-gruen { border-left-color: #3aa44a; }
.tr-termin.ist-gelb  { border-left-color: #d8a300; }
.tr-termin.ist-rot   { border-left-color: #c0392b; }

.tr-termin-tag {
  font-weight: 700;
  color: var(--wp--preset--color--heading);
  min-width: 150px;
}

.tr-termin-zeit {
  color: var(--wp--preset--color--body);
}

.tr-termin-status {
  margin-left: auto;
  font-weight: 600;
}

.tr-termin.ist-gruen .tr-termin-status { color: #3aa44a; }
.tr-termin.ist-gelb  .tr-termin-status { color: #d8a300; }
.tr-termin.ist-rot   .tr-termin-status { color: #c0392b; }

.tr-termin-notiz {
  flex: 0 0 100%;
  font-size: 14px;
  color: var(--wp--preset--color--muted);
}

.tr-termine-leer {
  margin: 0;
  text-align: center;
  color: var(--wp--preset--color--body);
}

.tr-termine-hinweis {
  margin: 0;
  text-align: center;
  font-size: 16px;
  font-weight: 700;
  color: var(--wp--preset--color--heading);
}

/* Verwaltungsfenster */
body.tr-fenster-offen { overflow: hidden; }

.tr-fenster {
  position: fixed;
  inset: 0;
  z-index: 100000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}

.tr-fenster[hidden] { display: none; }

.tr-fenster-hintergrund {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, .7);
}

.tr-fenster-kasten {
  position: relative;
  width: min(760px, 100%);
  max-height: 88vh;
  display: flex;
  flex-direction: column;
  border: 1px solid var(--wp--preset--color--line);
  border-radius: 10px;
  background: var(--wp--preset--color--bg-alt);
  box-shadow: 0 24px 60px rgba(0, 0, 0, .5);
}

.tr-fenster-kopf {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 24px;
  border-bottom: 1px solid var(--wp--preset--color--line);
}

.tr-fenster-kopf h2 {
  margin: 0;
  font-size: 20px;
  color: var(--wp--preset--color--heading);
}

.tr-pause-knopf {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  padding: 8px 18px;
  border: 1px solid var(--wp--preset--color--heading);
  border-radius: 20px;
  background: transparent;
  color: var(--wp--preset--color--body);
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}

.tr-pause-knopf:hover { color: var(--wp--preset--color--heading); }

.tr-pause-knopf.ist-aktiv {
  background: var(--wp--preset--color--primary);
  border-color: var(--wp--preset--color--primary);
  color: #fff;
}

.tr-fenster-zu {
  border: 0;
  background: transparent;
  color: var(--wp--preset--color--body);
  font-size: 30px;
  line-height: 1;
  cursor: pointer;
  padding: 0 4px;
}

.tr-fenster-zu:hover { color: var(--wp--preset--color--heading); }

.tr-fenster-inhalt {
  padding: 22px 24px 26px;
  overflow-y: auto;
  overflow-x: hidden;
}

.tr-fenster-inhalt h3 {
  margin: 28px 0 12px;
  font-size: 16px;
  color: var(--wp--preset--color--heading);
}

.tr-termin-form {
  display: grid;
  grid-template-columns: 340px 1fr;
  gap: 14px 24px;
  align-items: start;
}

.tr-rechts {
  display: flex;
  flex-direction: column;
  gap: 18px;
  align-items: center;
}

.tr-zeitzeile {
  display: flex;
  gap: 14px;
  width: 100%;
}

.tr-zeitzeile .tr-feld { flex: 1; }

.tr-feld { display: flex; flex-direction: column; gap: 6px; }
.tr-feld-breit { grid-column: 1 / -1; }

.tr-feld label {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .3px;
  color: var(--wp--preset--color--body);
}

.tr-feld input {
  padding: 10px 12px;
  cursor: pointer;
  border: 1px solid var(--wp--preset--color--line);
  border-radius: 6px;
  background: var(--wp--preset--color--card);
  color: var(--wp--preset--color--heading);
  font: inherit;
  font-size: 15px;
}

.tr-status-knoepfe {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: center;
}

.tr-feld-breit > label { text-align: center; }

.tr-status-knopf {
  padding: 10px 18px;
  border: 2px solid transparent;
  border-radius: 6px;
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}

/* gedaempft in der eigenen Farbe, leuchtend sobald gewaehlt */
.tr-status-knopf.ist-gruen { background: rgba(58, 164, 74, .18);  border-color: rgba(58, 164, 74, .45);  color: #6cc478; }
.tr-status-knopf.ist-gelb  { background: rgba(216, 163, 0, .18);  border-color: rgba(216, 163, 0, .45);  color: #e3ba3d; }
.tr-status-knopf.ist-rot   { background: rgba(192, 57, 43, .18);  border-color: rgba(192, 57, 43, .45);  color: #d9695b; }

.tr-status-knopf.ist-gruen.ist-gewaehlt { background: #3aa44a; border-color: #3aa44a; color: #fff; }
.tr-status-knopf.ist-gelb.ist-gewaehlt  { background: #d8a300; border-color: #d8a300; color: #1a1a1a; }
.tr-status-knopf.ist-rot.ist-gewaehlt   { background: #c0392b; border-color: #c0392b; color: #fff; }

.tr-knopf-primaer {
  justify-self: center;
  padding: 12px 24px;
  border: 0;
  border-radius: 6px;
  background: var(--wp--preset--color--primary);
  color: #fff;
  font: inherit;
  font-weight: 700;
  letter-spacing: .5px;
  cursor: pointer;
}

.tr-knopf-primaer:hover { background: var(--wp--preset--color--link-hover); }

/* Liste im Verwaltungsfenster */
.tr-verwaltung-zeile {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 10px 14px;
  border-left: 4px solid var(--wp--preset--color--line);
  border-radius: 6px;
  background: var(--wp--preset--color--card);
  margin-bottom: 8px;
  flex-wrap: wrap;
}

.tr-verwaltung-zeile.ist-gruen { border-left-color: #3aa44a; }
.tr-verwaltung-zeile.ist-gelb  { border-left-color: #d8a300; }
.tr-verwaltung-zeile.ist-rot   { border-left-color: #c0392b; }
.tr-verwaltung-zeile.ist-vergangen { opacity: .45; }

.tr-verwaltung-datum {
  font-weight: 700;
  color: var(--wp--preset--color--heading);
  min-width: 150px;
}

.tr-verwaltung-zeit { color: var(--wp--preset--color--body); font-size: 15px; }

.tr-verwaltung-knoepfe { margin-left: auto; display: flex; gap: 6px; }

.tr-verwaltung-hinweis {
  flex: 0 0 100%;
  font-size: 13px;
  color: var(--wp--preset--color--muted);
}

.tr-mini-knopf {
  width: 28px;
  height: 28px;
  padding: 0;
  border: 2px solid var(--wp--preset--color--line);
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--wp--preset--color--body);
  font-size: 17px;
  line-height: 1;
}

.tr-mini-knopf span {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  display: block;
}

.tr-mini-knopf.ist-gruen span { background: #3aa44a; }
.tr-mini-knopf.ist-gelb span  { background: #d8a300; }
.tr-mini-knopf.ist-rot span   { background: #c0392b; }

.tr-mini-knopf.ist-gruen.ist-gewaehlt { border-color: #3aa44a; }
.tr-mini-knopf.ist-gelb.ist-gewaehlt  { border-color: #d8a300; }
.tr-mini-knopf.ist-rot.ist-gewaehlt   { border-color: #c0392b; }

.tr-mini-knopf.tr-weg:hover { border-color: #c0392b; color: #c0392b; }

@media (max-width: 700px) {
  .tr-termin-form { grid-template-columns: 1fr; }
  .tr-kalender { max-width: none; }
  .tr-verwaltung-knoepfe { margin-left: 0; }
}

/* Kalendersymbol neben der Ueberschrift auf der Terminseite */
.tr-termine-kopfzeile {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}

.tr-termine-symbol {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  padding: 0;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--wp--preset--color--body);
  cursor: pointer;
  transition: color .2s ease, background-color .2s ease;
}

.tr-termine-symbol svg {
  width: 21px;
  height: 21px;
}

.tr-termine-symbol:hover {
  color: var(--wp--preset--color--heading);
  background: var(--wp--preset--color--card);
}

/* Textblöcke im Verwaltungsfenster */
.tr-textblock {
  margin-bottom: 16px;
}

.tr-textblock-kopf {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 6px;
  font-size: 13px;
  font-weight: 600;
  color: var(--wp--preset--color--body);
}

.tr-textblock textarea {
  width: 100%;
  box-sizing: border-box;
  padding: 10px 12px;
  border: 1px solid var(--wp--preset--color--line);
  border-radius: 6px;
  background: var(--wp--preset--color--card);
  color: var(--wp--preset--color--heading);
  font: inherit;
  font-size: 15px;
  line-height: 1.5;
  resize: vertical;
}

.tr-schalter {
  position: relative;
  width: 44px;
  height: 24px;
  padding: 0;
  border: 0;
  border-radius: 12px;
  background: var(--wp--preset--color--line);
  cursor: pointer;
  flex: 0 0 44px;
  transition: background-color .15s ease;
}

.tr-schalter span {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #fff;
  transition: transform .15s ease;
}

.tr-schalter.ist-aktiv { background: #3aa44a; }
.tr-schalter.ist-aktiv span { transform: translateX(20px); }

/* Eigener Kalender im Verwaltungsfenster */
.tr-kalender {
  border: 1px solid var(--wp--preset--color--line);
  border-radius: 8px;
  background: var(--wp--preset--color--card);
  padding: 12px;
  max-width: 340px;
}

.tr-kalender-kopf {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}

.tr-kalender-monat {
  font-weight: 700;
  color: var(--wp--preset--color--heading);
}

.tr-kalender-pfeil {
  width: 30px;
  height: 30px;
  border: 1px solid var(--wp--preset--color--line);
  border-radius: 6px;
  background: transparent;
  color: var(--wp--preset--color--body);
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
}

.tr-kalender-pfeil:hover {
  color: var(--wp--preset--color--heading);
  border-color: var(--wp--preset--color--body);
}

.tr-kalender-gitter {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 4px;
}

.tr-kalender-wochentag {
  text-align: center;
  font-size: 12px;
  font-weight: 600;
  color: var(--wp--preset--color--muted);
  padding-bottom: 4px;
}

.tr-kalender-wochentag.ist-samstag {
  color: var(--wp--preset--color--heading);
  font-weight: 700;
}

.tr-kalender-tag {
  position: relative;
  height: 34px;
  border: 1px solid transparent;
  border-radius: 6px;
  background: transparent;
  color: var(--wp--preset--color--body);
  font: inherit;
  font-size: 14px;
  cursor: pointer;
  transition: border-color .15s ease, background-color .15s ease;
}

.tr-kalender-tag:hover:not(:disabled) {
  border-color: var(--wp--preset--color--body);
}

.tr-kalender-tag.ist-samstag {
  font-weight: 700;
  color: var(--wp--preset--color--heading);
}

.tr-kalender-tag.ist-sonntag {
  color: var(--wp--preset--color--muted);
}

.tr-kalender-tag.ist-vergangen {
  opacity: .3;
  cursor: default;
}

.tr-kalender-tag.ist-gewaehlt {
  background: var(--wp--preset--color--primary);
  border-color: var(--wp--preset--color--primary);
  color: #fff;
}

/* schon eingetragene Tage: Punkt in der Kennzeichnungsfarbe */
.tr-kalender-tag.ist-belegt::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 4px;
  transform: translateX(-50%);
  width: 5px;
  height: 5px;
  border-radius: 50%;
}

.tr-kalender-tag.ist-belegt.ist-gruen::after { background: #3aa44a; }
.tr-kalender-tag.ist-belegt.ist-gelb::after  { background: #d8a300; }
.tr-kalender-tag.ist-belegt.ist-rot::after   { background: #c0392b; }

/* ==========================================================================
   35. Terminverwaltung (nur fuer angemeldete Verwalter)
   ========================================================================== */

.tr-header-links {
  gap: 14px;
}

.tr-admin-zahnrad {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--wp--preset--color--body);
  cursor: pointer;
  transition: color .2s ease, background-color .2s ease;
}

.tr-admin-zahnrad svg {
  width: 21px;
  height: 21px;
}

.tr-admin-zahnrad:hover {
  color: var(--wp--preset--color--heading);
  background: var(--wp--preset--color--bg-alt);
}

/* Oeffentliche Anzeige: Sommerpause und Terminliste */
.tr-termine-anzeige {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.tr-sommerpause {
  padding: 22px 24px;
  border-radius: 8px;
  background: var(--wp--preset--color--card);
  color: var(--wp--preset--color--heading);
  font-size: 20px;
  font-weight: 700;
  text-align: center;
  letter-spacing: 1px;
}

/* Oeffentliche Terminliste */
.tr-termine-liste {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.tr-termin {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 18px;
  border-left: 4px solid var(--wp--preset--color--line);
  border-radius: 6px;
  background: var(--wp--preset--color--card);
  font-size: 16px;
  flex-wrap: wrap;
}

.tr-termin.ist-gruen { border-left-color: #3aa44a; }
.tr-termin.ist-gelb  { border-left-color: #d8a300; }
.tr-termin.ist-rot   { border-left-color: #c0392b; }

.tr-termin-tag {
  font-weight: 700;
  color: var(--wp--preset--color--heading);
  min-width: 150px;
}

.tr-termin-zeit {
  color: var(--wp--preset--color--body);
}

.tr-termin-status {
  margin-left: auto;
  font-weight: 600;
}

.tr-termin.ist-gruen .tr-termin-status { color: #3aa44a; }
.tr-termin.ist-gelb  .tr-termin-status { color: #d8a300; }
.tr-termin.ist-rot   .tr-termin-status { color: #c0392b; }

.tr-termin-notiz {
  flex: 0 0 100%;
  font-size: 14px;
  color: var(--wp--preset--color--muted);
}

.tr-termine-leer {
  margin: 0;
  text-align: center;
  color: var(--wp--preset--color--body);
}

.tr-termine-hinweis {
  margin: 0;
  text-align: center;
  font-size: 16px;
  font-weight: 700;
  color: var(--wp--preset--color--heading);
}

/* Verwaltungsfenster */
body.tr-fenster-offen { overflow: hidden; }

.tr-fenster {
  position: fixed;
  inset: 0;
  z-index: 100000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}

.tr-fenster[hidden] { display: none; }

.tr-fenster-hintergrund {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, .7);
}

.tr-fenster-kasten {
  position: relative;
  width: min(760px, 100%);
  max-height: 88vh;
  display: flex;
  flex-direction: column;
  border: 1px solid var(--wp--preset--color--line);
  border-radius: 10px;
  background: var(--wp--preset--color--bg-alt);
  box-shadow: 0 24px 60px rgba(0, 0, 0, .5);
}

.tr-fenster-kopf {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 24px;
  border-bottom: 1px solid var(--wp--preset--color--line);
}

.tr-fenster-kopf h2 {
  margin: 0;
  font-size: 20px;
  color: var(--wp--preset--color--heading);
}

.tr-pause-knopf {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  padding: 8px 18px;
  border: 1px solid var(--wp--preset--color--heading);
  border-radius: 20px;
  background: transparent;
  color: var(--wp--preset--color--body);
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}

.tr-pause-knopf:hover { color: var(--wp--preset--color--heading); }

.tr-pause-knopf.ist-aktiv {
  background: var(--wp--preset--color--primary);
  border-color: var(--wp--preset--color--primary);
  color: #fff;
}

.tr-fenster-zu {
  border: 0;
  background: transparent;
  color: var(--wp--preset--color--body);
  font-size: 30px;
  line-height: 1;
  cursor: pointer;
  padding: 0 4px;
}

.tr-fenster-zu:hover { color: var(--wp--preset--color--heading); }

.tr-fenster-inhalt {
  padding: 22px 24px 26px;
  overflow-y: auto;
  overflow-x: hidden;
}

.tr-fenster-inhalt h3 {
  margin: 28px 0 12px;
  font-size: 16px;
  color: var(--wp--preset--color--heading);
}

.tr-termin-form {
  display: grid;
  grid-template-columns: 340px 1fr;
  gap: 14px 24px;
  align-items: start;
}

.tr-rechts {
  display: flex;
  flex-direction: column;
  gap: 18px;
  align-items: center;
}

.tr-zeitzeile {
  display: flex;
  gap: 14px;
  width: 100%;
}

.tr-zeitzeile .tr-feld { flex: 1; }

.tr-feld { display: flex; flex-direction: column; gap: 6px; }
.tr-feld-breit { grid-column: 1 / -1; }

.tr-feld label {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .3px;
  color: var(--wp--preset--color--body);
}

.tr-feld input {
  padding: 10px 12px;
  cursor: pointer;
  border: 1px solid var(--wp--preset--color--line);
  border-radius: 6px;
  background: var(--wp--preset--color--card);
  color: var(--wp--preset--color--heading);
  font: inherit;
  font-size: 15px;
}

.tr-status-knoepfe {
  display: flex;
  gap: 8px;
  flex-wrap: nowrap;
  justify-content: center;
  width: 100%;
}

.tr-feld-breit > label { text-align: center; }

.tr-status-knopf {
  padding: 9px 12px;
  white-space: nowrap;
  border: 2px solid transparent;
  border-radius: 6px;
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}

/* gedaempft in der eigenen Farbe, leuchtend sobald gewaehlt */
.tr-status-knopf.ist-gruen { background: rgba(58, 164, 74, .18);  border-color: rgba(58, 164, 74, .45);  color: #6cc478; }
.tr-status-knopf.ist-gelb  { background: rgba(216, 163, 0, .18);  border-color: rgba(216, 163, 0, .45);  color: #e3ba3d; }
.tr-status-knopf.ist-rot   { background: rgba(192, 57, 43, .18);  border-color: rgba(192, 57, 43, .45);  color: #d9695b; }

.tr-status-knopf.ist-gruen.ist-gewaehlt { background: #3aa44a; border-color: #3aa44a; color: #fff; }
.tr-status-knopf.ist-gelb.ist-gewaehlt  { background: #d8a300; border-color: #d8a300; color: #1a1a1a; }
.tr-status-knopf.ist-rot.ist-gewaehlt   { background: #c0392b; border-color: #c0392b; color: #fff; }

.tr-knopf-primaer {
  justify-self: center;
  padding: 12px 24px;
  border: 0;
  border-radius: 6px;
  background: var(--wp--preset--color--primary);
  color: #fff;
  font: inherit;
  font-weight: 700;
  letter-spacing: .5px;
  cursor: pointer;
}

.tr-knopf-primaer:hover { background: var(--wp--preset--color--link-hover); }

/* Liste im Verwaltungsfenster */
.tr-verwaltung-zeile {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 10px 14px;
  border-left: 4px solid var(--wp--preset--color--line);
  border-radius: 6px;
  background: var(--wp--preset--color--card);
  margin-bottom: 8px;
  flex-wrap: wrap;
}

.tr-verwaltung-zeile.ist-gruen { border-left-color: #3aa44a; }
.tr-verwaltung-zeile.ist-gelb  { border-left-color: #d8a300; }
.tr-verwaltung-zeile.ist-rot   { border-left-color: #c0392b; }
.tr-verwaltung-zeile.ist-vergangen { opacity: .45; }

.tr-verwaltung-datum {
  font-weight: 700;
  color: var(--wp--preset--color--heading);
  min-width: 150px;
}

.tr-verwaltung-zeit { color: var(--wp--preset--color--body); font-size: 15px; }

.tr-verwaltung-knoepfe { margin-left: auto; display: flex; gap: 6px; }

.tr-verwaltung-hinweis {
  flex: 0 0 100%;
  font-size: 13px;
  color: var(--wp--preset--color--muted);
}

.tr-mini-knopf {
  width: 28px;
  height: 28px;
  padding: 0;
  border: 2px solid var(--wp--preset--color--line);
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--wp--preset--color--body);
  font-size: 17px;
  line-height: 1;
}

.tr-mini-knopf span {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  display: block;
}

.tr-mini-knopf.ist-gruen span { background: #3aa44a; }
.tr-mini-knopf.ist-gelb span  { background: #d8a300; }
.tr-mini-knopf.ist-rot span   { background: #c0392b; }

.tr-mini-knopf.ist-gruen.ist-gewaehlt { border-color: #3aa44a; }
.tr-mini-knopf.ist-gelb.ist-gewaehlt  { border-color: #d8a300; }
.tr-mini-knopf.ist-rot.ist-gewaehlt   { border-color: #c0392b; }

.tr-mini-knopf.tr-weg:hover { border-color: #c0392b; color: #c0392b; }

@media (max-width: 700px) {
  .tr-termin-form { grid-template-columns: 1fr; }
  .tr-kalender { max-width: none; }
  .tr-verwaltung-knoepfe { margin-left: 0; }
}

/* Kalendersymbol neben der Ueberschrift auf der Terminseite */
.tr-termine-kopfzeile {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}

.tr-termine-symbol {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  padding: 0;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--wp--preset--color--body);
  cursor: pointer;
  transition: color .2s ease, background-color .2s ease;
}

.tr-termine-symbol svg {
  width: 21px;
  height: 21px;
}

.tr-termine-symbol:hover {
  color: var(--wp--preset--color--heading);
  background: var(--wp--preset--color--card);
}

/* Textblöcke im Verwaltungsfenster */
.tr-textblock {
  margin-bottom: 16px;
}

.tr-textblock-kopf {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 6px;
  font-size: 13px;
  font-weight: 600;
  color: var(--wp--preset--color--body);
}

.tr-textblock textarea {
  width: 100%;
  box-sizing: border-box;
  padding: 10px 12px;
  border: 1px solid var(--wp--preset--color--line);
  border-radius: 6px;
  background: var(--wp--preset--color--card);
  color: var(--wp--preset--color--heading);
  font: inherit;
  font-size: 15px;
  line-height: 1.5;
  resize: vertical;
}

.tr-schalter {
  position: relative;
  width: 44px;
  height: 24px;
  padding: 0;
  border: 0;
  border-radius: 12px;
  background: var(--wp--preset--color--line);
  cursor: pointer;
  flex: 0 0 44px;
  transition: background-color .15s ease;
}

.tr-schalter span {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #fff;
  transition: transform .15s ease;
}

.tr-schalter.ist-aktiv { background: #3aa44a; }
.tr-schalter.ist-aktiv span { transform: translateX(20px); }

/* Eigener Kalender im Verwaltungsfenster */
.tr-kalender {
  border: 1px solid var(--wp--preset--color--line);
  border-radius: 8px;
  background: var(--wp--preset--color--card);
  padding: 12px;
  max-width: 340px;
}

.tr-kalender-kopf {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}

.tr-kalender-monat {
  font-weight: 700;
  color: var(--wp--preset--color--heading);
}

.tr-kalender-pfeil {
  width: 30px;
  height: 30px;
  border: 1px solid var(--wp--preset--color--line);
  border-radius: 6px;
  background: transparent;
  color: var(--wp--preset--color--body);
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
}

.tr-kalender-pfeil:hover {
  color: var(--wp--preset--color--heading);
  border-color: var(--wp--preset--color--body);
}

.tr-kalender-gitter {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 4px;
}

.tr-kalender-wochentag {
  text-align: center;
  font-size: 12px;
  font-weight: 600;
  color: var(--wp--preset--color--muted);
  padding-bottom: 4px;
}

.tr-kalender-wochentag.ist-samstag {
  color: var(--wp--preset--color--heading);
  font-weight: 700;
}

.tr-kalender-tag {
  position: relative;
  height: 34px;
  border: 1px solid transparent;
  border-radius: 6px;
  background: transparent;
  color: var(--wp--preset--color--body);
  font: inherit;
  font-size: 14px;
  cursor: pointer;
  transition: border-color .15s ease, background-color .15s ease;
}

.tr-kalender-tag:hover:not(:disabled) {
  border-color: var(--wp--preset--color--body);
}

.tr-kalender-tag.ist-samstag {
  font-weight: 700;
  color: var(--wp--preset--color--heading);
}

.tr-kalender-tag.ist-sonntag {
  color: var(--wp--preset--color--muted);
}

.tr-kalender-tag.ist-vergangen {
  opacity: .3;
  cursor: default;
}

.tr-kalender-tag.ist-gewaehlt {
  background: var(--wp--preset--color--primary);
  border-color: var(--wp--preset--color--primary);
  color: #fff;
}

/* schon eingetragene Tage: Punkt in der Kennzeichnungsfarbe */
.tr-kalender-tag.ist-belegt::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 4px;
  transform: translateX(-50%);
  width: 5px;
  height: 5px;
  border-radius: 50%;
}

.tr-kalender-tag.ist-belegt.ist-gruen::after { background: #3aa44a; }
.tr-kalender-tag.ist-belegt.ist-gelb::after  { background: #d8a300; }
.tr-kalender-tag.ist-belegt.ist-rot::after   { background: #c0392b; }

/* ==========================================================================
   35. Terminverwaltung (nur fuer angemeldete Verwalter)
   ========================================================================== */

.tr-header-links {
  gap: 14px;
}

.tr-admin-zahnrad {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--wp--preset--color--body);
  cursor: pointer;
  transition: color .2s ease, background-color .2s ease;
}

.tr-admin-zahnrad svg {
  width: 21px;
  height: 21px;
}

.tr-admin-zahnrad:hover {
  color: var(--wp--preset--color--heading);
  background: var(--wp--preset--color--bg-alt);
}

/* Oeffentliche Anzeige: Sommerpause und Terminliste */
.tr-termine-anzeige {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.tr-sommerpause {
  padding: 22px 24px;
  border-radius: 8px;
  background: var(--wp--preset--color--card);
  color: var(--wp--preset--color--heading);
  font-size: 20px;
  font-weight: 700;
  text-align: center;
  letter-spacing: 1px;
}

/* Oeffentliche Terminliste */
.tr-termine-liste {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.tr-termin {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 18px;
  border-left: 4px solid var(--wp--preset--color--line);
  border-radius: 6px;
  background: var(--wp--preset--color--card);
  font-size: 16px;
  flex-wrap: wrap;
}

.tr-termin.ist-gruen { border-left-color: #3aa44a; }
.tr-termin.ist-gelb  { border-left-color: #d8a300; }
.tr-termin.ist-rot   { border-left-color: #c0392b; }

.tr-termin-tag {
  font-weight: 700;
  color: var(--wp--preset--color--heading);
  min-width: 150px;
}

.tr-termin-zeit {
  color: var(--wp--preset--color--body);
}

.tr-termin-status {
  margin-left: auto;
  font-weight: 600;
}

.tr-termin.ist-gruen .tr-termin-status { color: #3aa44a; }
.tr-termin.ist-gelb  .tr-termin-status { color: #d8a300; }
.tr-termin.ist-rot   .tr-termin-status { color: #c0392b; }

.tr-termin-notiz {
  flex: 0 0 100%;
  font-size: 14px;
  color: var(--wp--preset--color--muted);
}

.tr-termine-leer {
  margin: 0;
  text-align: center;
  color: var(--wp--preset--color--body);
}

.tr-termine-hinweis {
  margin: 0;
  text-align: center;
  font-size: 16px;
  font-weight: 700;
  color: var(--wp--preset--color--heading);
}

/* Verwaltungsfenster */
body.tr-fenster-offen { overflow: hidden; }

.tr-fenster {
  position: fixed;
  inset: 0;
  z-index: 100000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}

.tr-fenster[hidden] { display: none; }

.tr-fenster-hintergrund {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, .7);
}

.tr-fenster-kasten {
  position: relative;
  width: min(760px, 100%);
  max-height: 88vh;
  display: flex;
  flex-direction: column;
  border: 1px solid var(--wp--preset--color--line);
  border-radius: 10px;
  background: var(--wp--preset--color--bg-alt);
  box-shadow: 0 24px 60px rgba(0, 0, 0, .5);
}

.tr-fenster-kopf {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 24px;
  border-bottom: 1px solid var(--wp--preset--color--line);
}

.tr-fenster-kopf h2 {
  margin: 0;
  font-size: 20px;
  color: var(--wp--preset--color--heading);
}

.tr-pause-knopf {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  padding: 8px 18px;
  border: 1px solid var(--wp--preset--color--heading);
  border-radius: 20px;
  background: transparent;
  color: var(--wp--preset--color--body);
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}

.tr-pause-knopf:hover { color: var(--wp--preset--color--heading); }

.tr-pause-knopf.ist-aktiv {
  background: var(--wp--preset--color--primary);
  border-color: var(--wp--preset--color--primary);
  color: #fff;
}

.tr-fenster-zu {
  border: 0;
  background: transparent;
  color: var(--wp--preset--color--body);
  font-size: 30px;
  line-height: 1;
  cursor: pointer;
  padding: 0 4px;
}

.tr-fenster-zu:hover { color: var(--wp--preset--color--heading); }

.tr-fenster-inhalt {
  padding: 22px 24px 26px;
  overflow-y: auto;
  overflow-x: hidden;
}

.tr-fenster-inhalt h3 {
  margin: 28px 0 12px;
  font-size: 16px;
  color: var(--wp--preset--color--heading);
}

.tr-termin-form {
  display: grid;
  grid-template-columns: 340px 1fr;
  gap: 14px 24px;
  align-items: start;
}

.tr-rechts {
  display: flex;
  flex-direction: column;
  gap: 30px;
  align-items: center;
  padding-top: 4px;
}

.tr-zeitzeile {
  display: flex;
  gap: 14px;
  width: 100%;
}

.tr-zeitzeile .tr-feld { flex: 1; }

.tr-feld { display: flex; flex-direction: column; gap: 6px; }
.tr-feld-breit { grid-column: 1 / -1; }

.tr-feld label {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .3px;
  color: var(--wp--preset--color--body);
}

.tr-feld input {
  padding: 10px 12px;
  cursor: pointer;
  border: 1px solid var(--wp--preset--color--line);
  border-radius: 6px;
  background: var(--wp--preset--color--card);
  color: var(--wp--preset--color--heading);
  font: inherit;
  font-size: 15px;
}

.tr-status-knoepfe {
  display: flex;
  gap: 8px;
  flex-wrap: nowrap;
  justify-content: center;
  width: 100%;
}

.tr-feld-breit > label { text-align: center; }

.tr-status-knopf {
  padding: 9px 12px;
  white-space: nowrap;
  border: 2px solid transparent;
  border-radius: 6px;
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}

/* gedaempft in der eigenen Farbe, leuchtend sobald gewaehlt */
.tr-status-knopf.ist-gruen { background: rgba(58, 164, 74, .18);  border-color: rgba(58, 164, 74, .45);  color: #6cc478; }
.tr-status-knopf.ist-gelb  { background: rgba(216, 163, 0, .18);  border-color: rgba(216, 163, 0, .45);  color: #e3ba3d; }
.tr-status-knopf.ist-rot   { background: rgba(192, 57, 43, .18);  border-color: rgba(192, 57, 43, .45);  color: #d9695b; }

.tr-status-knopf.ist-gruen.ist-gewaehlt { background: #3aa44a; border-color: #3aa44a; color: #fff; }
.tr-status-knopf.ist-gelb.ist-gewaehlt  { background: #d8a300; border-color: #d8a300; color: #1a1a1a; }
.tr-status-knopf.ist-rot.ist-gewaehlt   { background: #c0392b; border-color: #c0392b; color: #fff; }

.tr-knopf-primaer {
  justify-self: center;
  padding: 12px 24px;
  border: 0;
  border-radius: 6px;
  background: var(--wp--preset--color--primary);
  color: #fff;
  font: inherit;
  font-weight: 700;
  letter-spacing: .5px;
  cursor: pointer;
}

.tr-knopf-primaer:hover { background: var(--wp--preset--color--link-hover); }

/* Liste im Verwaltungsfenster */
.tr-verwaltung-zeile {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 10px 14px;
  border-left: 4px solid var(--wp--preset--color--line);
  border-radius: 6px;
  background: var(--wp--preset--color--card);
  margin-bottom: 8px;
  flex-wrap: wrap;
}

.tr-verwaltung-zeile.ist-gruen { border-left-color: #3aa44a; }
.tr-verwaltung-zeile.ist-gelb  { border-left-color: #d8a300; }
.tr-verwaltung-zeile.ist-rot   { border-left-color: #c0392b; }
.tr-verwaltung-zeile.ist-vergangen { opacity: .45; }

.tr-verwaltung-datum {
  font-weight: 700;
  color: var(--wp--preset--color--heading);
  min-width: 150px;
}

.tr-verwaltung-zeit { color: var(--wp--preset--color--body); font-size: 15px; }

.tr-verwaltung-knoepfe { margin-left: auto; display: flex; gap: 6px; }

.tr-verwaltung-hinweis {
  flex: 0 0 100%;
  font-size: 13px;
  color: var(--wp--preset--color--muted);
}

.tr-mini-knopf {
  width: 28px;
  height: 28px;
  padding: 0;
  border: 2px solid var(--wp--preset--color--line);
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--wp--preset--color--body);
  font-size: 17px;
  line-height: 1;
}

.tr-mini-knopf span {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  display: block;
}

.tr-mini-knopf.ist-gruen span { background: #3aa44a; }
.tr-mini-knopf.ist-gelb span  { background: #d8a300; }
.tr-mini-knopf.ist-rot span   { background: #c0392b; }

.tr-mini-knopf.ist-gruen.ist-gewaehlt { border-color: #3aa44a; }
.tr-mini-knopf.ist-gelb.ist-gewaehlt  { border-color: #d8a300; }
.tr-mini-knopf.ist-rot.ist-gewaehlt   { border-color: #c0392b; }

.tr-mini-knopf.tr-weg:hover { border-color: #c0392b; color: #c0392b; }

@media (max-width: 700px) {
  .tr-termin-form { grid-template-columns: 1fr; }
  .tr-kalender { max-width: none; }
  .tr-verwaltung-knoepfe { margin-left: 0; }
}

/* Kalendersymbol neben der Ueberschrift auf der Terminseite */
.tr-termine-kopfzeile {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}

.tr-termine-symbol {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  padding: 0;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--wp--preset--color--body);
  cursor: pointer;
  transition: color .2s ease, background-color .2s ease;
}

.tr-termine-symbol svg {
  width: 21px;
  height: 21px;
}

.tr-termine-symbol:hover {
  color: var(--wp--preset--color--heading);
  background: var(--wp--preset--color--card);
}

/* Textblöcke im Verwaltungsfenster */
.tr-textblock {
  margin-bottom: 16px;
}

.tr-textblock-kopf {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 6px;
  font-size: 13px;
  font-weight: 600;
  color: var(--wp--preset--color--body);
}

.tr-textblock textarea {
  width: 100%;
  box-sizing: border-box;
  padding: 10px 12px;
  border: 1px solid var(--wp--preset--color--line);
  border-radius: 6px;
  background: var(--wp--preset--color--card);
  color: var(--wp--preset--color--heading);
  font: inherit;
  font-size: 15px;
  line-height: 1.5;
  resize: vertical;
}

.tr-schalter {
  position: relative;
  width: 44px;
  height: 24px;
  padding: 0;
  border: 0;
  border-radius: 12px;
  background: var(--wp--preset--color--line);
  cursor: pointer;
  flex: 0 0 44px;
  transition: background-color .15s ease;
}

.tr-schalter span {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #fff;
  transition: transform .15s ease;
}

.tr-schalter.ist-aktiv { background: #3aa44a; }
.tr-schalter.ist-aktiv span { transform: translateX(20px); }

/* Eigener Kalender im Verwaltungsfenster */
.tr-kalender {
  border: 1px solid var(--wp--preset--color--line);
  border-radius: 8px;
  background: var(--wp--preset--color--card);
  padding: 12px;
  max-width: 340px;
}

.tr-kalender-kopf {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}

.tr-kalender-monat {
  font-weight: 700;
  color: var(--wp--preset--color--heading);
}

.tr-kalender-pfeil {
  width: 30px;
  height: 30px;
  border: 1px solid var(--wp--preset--color--line);
  border-radius: 6px;
  background: transparent;
  color: var(--wp--preset--color--body);
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
}

.tr-kalender-pfeil:hover {
  color: var(--wp--preset--color--heading);
  border-color: var(--wp--preset--color--body);
}

.tr-kalender-gitter {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 4px;
}

.tr-kalender-wochentag {
  text-align: center;
  font-size: 12px;
  font-weight: 600;
  color: var(--wp--preset--color--muted);
  padding-bottom: 4px;
}

.tr-kalender-wochentag.ist-samstag {
  color: var(--wp--preset--color--heading);
  font-weight: 700;
}

.tr-kalender-tag {
  position: relative;
  height: 34px;
  border: 1px solid transparent;
  border-radius: 6px;
  background: transparent;
  color: var(--wp--preset--color--body);
  font: inherit;
  font-size: 14px;
  cursor: pointer;
  transition: border-color .15s ease, background-color .15s ease;
}

.tr-kalender-tag:hover:not(:disabled) {
  border-color: var(--wp--preset--color--body);
}

.tr-kalender-tag.ist-samstag {
  font-weight: 700;
  color: var(--wp--preset--color--heading);
}

.tr-kalender-tag.ist-sonntag {
  color: var(--wp--preset--color--muted);
}

.tr-kalender-tag.ist-vergangen {
  opacity: .3;
  cursor: default;
}

.tr-kalender-tag.ist-gewaehlt {
  background: var(--wp--preset--color--primary);
  border-color: var(--wp--preset--color--primary);
  color: #fff;
}

/* schon eingetragene Tage: Punkt in der Kennzeichnungsfarbe */
.tr-kalender-tag.ist-belegt::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 4px;
  transform: translateX(-50%);
  width: 5px;
  height: 5px;
  border-radius: 50%;
}

.tr-kalender-tag.ist-belegt.ist-gruen::after { background: #3aa44a; }
.tr-kalender-tag.ist-belegt.ist-gelb::after  { background: #d8a300; }
.tr-kalender-tag.ist-belegt.ist-rot::after   { background: #c0392b; }

/* ==========================================================================
   35. Terminverwaltung (nur fuer angemeldete Verwalter)
   ========================================================================== */

.tr-header-links {
  gap: 14px;
}

.tr-admin-zahnrad {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--wp--preset--color--body);
  cursor: pointer;
  transition: color .2s ease, background-color .2s ease;
}

.tr-admin-zahnrad svg {
  width: 21px;
  height: 21px;
}

.tr-admin-zahnrad:hover {
  color: var(--wp--preset--color--heading);
  background: var(--wp--preset--color--bg-alt);
}

/* Oeffentliche Anzeige: Sommerpause und Terminliste */
.tr-termine-anzeige {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.tr-sommerpause {
  padding: 22px 24px;
  border-radius: 8px;
  background: var(--wp--preset--color--card);
  color: var(--wp--preset--color--heading);
  font-size: 20px;
  font-weight: 700;
  text-align: center;
  letter-spacing: 1px;
}

/* Oeffentliche Terminliste */
.tr-termine-liste {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.tr-termin {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 18px;
  border-left: 4px solid var(--wp--preset--color--line);
  border-radius: 6px;
  background: var(--wp--preset--color--card);
  font-size: 16px;
  flex-wrap: wrap;
}

.tr-termin.ist-gruen { border-left-color: #3aa44a; }
.tr-termin.ist-gelb  { border-left-color: #d8a300; }
.tr-termin.ist-rot   { border-left-color: #c0392b; }

.tr-termin-tag {
  font-weight: 700;
  color: var(--wp--preset--color--heading);
  min-width: 150px;
}

.tr-termin-zeit {
  color: var(--wp--preset--color--body);
}

.tr-termin-status {
  margin-left: auto;
  font-weight: 600;
}

.tr-termin.ist-gruen .tr-termin-status { color: #3aa44a; }
.tr-termin.ist-gelb  .tr-termin-status { color: #d8a300; }
.tr-termin.ist-rot   .tr-termin-status { color: #c0392b; }

.tr-termin-notiz {
  flex: 0 0 100%;
  font-size: 14px;
  color: var(--wp--preset--color--muted);
}

.tr-termine-leer {
  margin: 0;
  text-align: center;
  color: var(--wp--preset--color--body);
}

.tr-termine-hinweis {
  margin: 0;
  text-align: center;
  font-size: 16px;
  font-weight: 700;
  color: var(--wp--preset--color--heading);
}

/* Verwaltungsfenster */
body.tr-fenster-offen { overflow: hidden; }

.tr-fenster {
  position: fixed;
  inset: 0;
  z-index: 100000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}

.tr-fenster[hidden] { display: none; }

.tr-fenster-hintergrund {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, .7);
}

.tr-fenster-kasten {
  position: relative;
  width: min(760px, 100%);
  max-height: 88vh;
  display: flex;
  flex-direction: column;
  border: 1px solid var(--wp--preset--color--line);
  border-radius: 10px;
  background: var(--wp--preset--color--bg-alt);
  box-shadow: 0 24px 60px rgba(0, 0, 0, .5);
}

.tr-fenster-kopf {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 24px;
  border-bottom: 1px solid var(--wp--preset--color--line);
}

.tr-fenster-kopf h2 {
  margin: 0;
  font-size: 20px;
  color: var(--wp--preset--color--heading);
}

.tr-pause-knopf {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  padding: 8px 18px;
  border: 1px solid var(--wp--preset--color--heading);
  border-radius: 20px;
  background: transparent;
  color: var(--wp--preset--color--body);
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}

.tr-pause-knopf:hover { color: var(--wp--preset--color--heading); }

.tr-pause-knopf.ist-aktiv {
  background: var(--wp--preset--color--primary);
  border-color: var(--wp--preset--color--primary);
  color: #fff;
}

.tr-fenster-zu {
  border: 0;
  background: transparent;
  color: var(--wp--preset--color--body);
  font-size: 30px;
  line-height: 1;
  cursor: pointer;
  padding: 0 4px;
}

.tr-fenster-zu:hover { color: var(--wp--preset--color--heading); }

.tr-fenster-inhalt {
  padding: 22px 24px 26px;
  overflow-y: auto;
  overflow-x: hidden;
}

.tr-fenster-inhalt h3 {
  margin: 28px 0 12px;
  font-size: 16px;
  color: var(--wp--preset--color--heading);
}

.tr-termin-form {
  display: grid;
  grid-template-columns: 340px 1fr;
  gap: 14px 24px;
  align-items: start;
}

.tr-rechts {
  display: flex;
  flex-direction: column;
  gap: 30px;
  align-items: center;
  padding-top: 4px;
}

.tr-zeitzeile {
  display: flex;
  gap: 14px;
  width: 100%;
}

.tr-zeitzeile .tr-feld { flex: 1; }

.tr-feld { display: flex; flex-direction: column; gap: 6px; }
.tr-feld-breit { grid-column: 1 / -1; }

.tr-feld label {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .3px;
  color: var(--wp--preset--color--body);
}

.tr-feld input {
  padding: 10px 12px;
  cursor: pointer;
  border: 1px solid var(--wp--preset--color--line);
  border-radius: 6px;
  background: var(--wp--preset--color--card);
  color: var(--wp--preset--color--heading);
  font: inherit;
  font-size: 15px;
}

.tr-status-knoepfe {
  display: flex;
  gap: 8px;
  flex-wrap: nowrap;
  justify-content: center;
  width: 100%;
}

.tr-feld-breit > label { text-align: center; }

.tr-status-knopf {
  padding: 9px 12px;
  white-space: nowrap;
  border: 2px solid transparent;
  border-radius: 6px;
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}

/* gedaempft in der eigenen Farbe, leuchtend sobald gewaehlt */
.tr-status-knopf.ist-gruen { background: rgba(58, 164, 74, .18);  border-color: rgba(58, 164, 74, .45);  color: #6cc478; }
.tr-status-knopf.ist-gelb  { background: rgba(216, 163, 0, .18);  border-color: rgba(216, 163, 0, .45);  color: #e3ba3d; }
.tr-status-knopf.ist-rot   { background: rgba(192, 57, 43, .18);  border-color: rgba(192, 57, 43, .45);  color: #d9695b; }

.tr-status-knopf.ist-gruen.ist-gewaehlt { background: #3aa44a; border-color: #3aa44a; color: #fff; }
.tr-status-knopf.ist-gelb.ist-gewaehlt  { background: #d8a300; border-color: #d8a300; color: #1a1a1a; }
.tr-status-knopf.ist-rot.ist-gewaehlt   { background: #c0392b; border-color: #c0392b; color: #fff; }

.tr-knopf-primaer {
  justify-self: center;
  padding: 12px 24px;
  border: 0;
  border-radius: 6px;
  background: var(--wp--preset--color--primary);
  color: #fff;
  font: inherit;
  font-weight: 700;
  letter-spacing: .5px;
  cursor: pointer;
}

.tr-knopf-primaer:hover { background: var(--wp--preset--color--link-hover); }

/* Liste im Verwaltungsfenster */
.tr-verwaltung-zeile {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 10px 14px;
  border-left: 4px solid var(--wp--preset--color--line);
  border-radius: 6px;
  background: var(--wp--preset--color--card);
  margin-bottom: 8px;
  flex-wrap: wrap;
}

.tr-verwaltung-zeile.ist-gruen { border-left-color: #3aa44a; }
.tr-verwaltung-zeile.ist-gelb  { border-left-color: #d8a300; }
.tr-verwaltung-zeile.ist-rot   { border-left-color: #c0392b; }
.tr-verwaltung-zeile.ist-vergangen { opacity: .45; }

.tr-verwaltung-datum {
  font-weight: 700;
  color: var(--wp--preset--color--heading);
  min-width: 150px;
}

.tr-verwaltung-zeit { color: var(--wp--preset--color--body); font-size: 15px; }

.tr-verwaltung-knoepfe { margin-left: auto; display: flex; gap: 6px; }

.tr-verwaltung-hinweis {
  flex: 0 0 100%;
  font-size: 13px;
  color: var(--wp--preset--color--muted);
}

.tr-mini-knopf {
  width: 28px;
  height: 28px;
  padding: 0;
  border: 2px solid var(--wp--preset--color--line);
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--wp--preset--color--body);
  font-size: 17px;
  line-height: 1;
}

.tr-mini-knopf span {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  display: block;
}

.tr-mini-knopf.ist-gruen span { background: #3aa44a; }
.tr-mini-knopf.ist-gelb span  { background: #d8a300; }
.tr-mini-knopf.ist-rot span   { background: #c0392b; }

.tr-mini-knopf.ist-gruen.ist-gewaehlt { border-color: #3aa44a; }
.tr-mini-knopf.ist-gelb.ist-gewaehlt  { border-color: #d8a300; }
.tr-mini-knopf.ist-rot.ist-gewaehlt   { border-color: #c0392b; }

.tr-mini-knopf.tr-weg:hover { border-color: #c0392b; color: #c0392b; }

@media (max-width: 700px) {
  .tr-termin-form { grid-template-columns: 1fr; }
  .tr-kalender { max-width: none; }
  .tr-verwaltung-knoepfe { margin-left: 0; }
}

/* Kalendersymbol neben der Ueberschrift auf der Terminseite */
.tr-termine-kopfzeile {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}

.tr-termine-symbol {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  padding: 0;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--wp--preset--color--body);
  cursor: pointer;
  transition: color .2s ease, background-color .2s ease;
}

.tr-termine-symbol svg {
  width: 21px;
  height: 21px;
}

.tr-termine-symbol:hover {
  color: var(--wp--preset--color--heading);
  background: var(--wp--preset--color--card);
}

/* Textblöcke im Verwaltungsfenster */
.tr-textblock {
  margin-bottom: 16px;
}

.tr-textblock-kopf {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 6px;
  font-size: 13px;
  font-weight: 600;
  color: var(--wp--preset--color--body);
}

.tr-textblock textarea {
  width: 100%;
  box-sizing: border-box;
  padding: 10px 12px;
  border: 1px solid var(--wp--preset--color--line);
  border-radius: 6px;
  background: var(--wp--preset--color--card);
  color: var(--wp--preset--color--heading);
  font: inherit;
  font-size: 15px;
  line-height: 1.5;
  resize: vertical;
}

.tr-schalter {
  position: relative;
  width: 44px;
  height: 24px;
  padding: 0;
  border: 0;
  border-radius: 12px;
  background: var(--wp--preset--color--line);
  cursor: pointer;
  flex: 0 0 44px;
  transition: background-color .15s ease;
}

.tr-schalter span {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #fff;
  transition: transform .15s ease;
}

.tr-schalter.ist-aktiv { background: #3aa44a; }
.tr-schalter.ist-aktiv span { transform: translateX(20px); }

/* Eigener Kalender im Verwaltungsfenster */
.tr-kalender {
  border: 1px solid var(--wp--preset--color--line);
  border-radius: 8px;
  background: var(--wp--preset--color--card);
  padding: 12px;
  max-width: 340px;
}

.tr-kalender-kopf {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}

.tr-kalender-monat {
  font-weight: 700;
  color: var(--wp--preset--color--heading);
}

.tr-kalender-pfeil {
  width: 30px;
  height: 30px;
  border: 1px solid var(--wp--preset--color--line);
  border-radius: 6px;
  background: transparent;
  color: var(--wp--preset--color--body);
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
}

.tr-kalender-pfeil:hover {
  color: var(--wp--preset--color--heading);
  border-color: var(--wp--preset--color--body);
}

.tr-kalender-gitter {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 4px;
}

.tr-kalender-wochentag {
  text-align: center;
  font-size: 12px;
  font-weight: 600;
  color: var(--wp--preset--color--muted);
  padding-bottom: 4px;
}

.tr-kalender-wochentag.ist-samstag {
  color: var(--wp--preset--color--heading);
  font-weight: 700;
}

.tr-kalender-tag {
  position: relative;
  height: 34px;
  border: 1px solid transparent;
  border-radius: 6px;
  background: transparent;
  color: var(--wp--preset--color--body);
  font: inherit;
  font-size: 14px;
  cursor: pointer;
  transition: border-color .15s ease, background-color .15s ease;
}

.tr-kalender-tag:hover:not(:disabled) {
  border-color: var(--wp--preset--color--body);
}

.tr-kalender-tag.ist-samstag {
  font-weight: 700;
  color: var(--wp--preset--color--heading);
}

.tr-kalender-tag.ist-sonntag {
  color: var(--wp--preset--color--muted);
}

.tr-kalender-tag.ist-vergangen {
  opacity: .3;
  cursor: default;
}

.tr-kalender-tag.ist-gewaehlt {
  background: var(--wp--preset--color--primary);
  border-color: var(--wp--preset--color--primary);
  color: #fff;
}

/* schon eingetragene Tage: Punkt in der Kennzeichnungsfarbe */
.tr-kalender-tag.ist-belegt::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 4px;
  transform: translateX(-50%);
  width: 5px;
  height: 5px;
  border-radius: 50%;
}

.tr-kalender-tag.ist-belegt.ist-gruen::after { background: #3aa44a; }
.tr-kalender-tag.ist-belegt.ist-gelb::after  { background: #d8a300; }
.tr-kalender-tag.ist-belegt.ist-rot::after   { background: #c0392b; }

/* Termine auf der Seite sind fuer Verwalter umschaltbar */
.tr-termin.ist-verwaltbar {
  cursor: pointer;
  transition: background-color .15s ease;
}

.tr-termin.ist-verwaltbar:hover {
  background: var(--wp--preset--color--bg-alt);
}

/* Warenkorb: Rückweg zum zuletzt gewählten Produkt, links in der Zeile */
.woocommerce table.shop_table td.actions,
table.shop_table td.actions {
  overflow: hidden;
  text-align: left;
}

.woocommerce table.shop_table td.actions .button[name="update_cart"],
table.shop_table td.actions .button[name="update_cart"] {
  float: right;
}

.woocommerce table.shop_table td.actions .tr-zurueck-produkt,
table.shop_table td.actions .tr-zurueck-produkt {
  display: inline-block;
  float: left;
  padding: 13px 24px;
  line-height: 1.2;
  background: transparent !important;
  border: 1px solid var(--wp--preset--color--line);
  color: var(--wp--preset--color--body) !important;
  font-weight: 600;
}

.tr-zurueck-produkt:hover {
  border-color: var(--wp--preset--color--link-hover);
  color: var(--wp--preset--color--heading) !important;
}

/* ==========================================================================
   36. Bewertungsformular auf der Produktseite
   ========================================================================== */

#reviews .woocommerce-noreviews {
  display: none;
}

#reviews #commentform {
  display: flex;
  flex-direction: column;
  max-width: 700px;
}

#reviews #commentform .comment-notes { margin: 0 0 22px; }
#reviews #commentform .form-submit { margin: 4px 0 0; }

/* Die Zeile zum Speichern von Name und E-Mail entfaellt */
#reviews #commentform .comment-form-cookies-consent {
  display: none;
}

#reviews #commentform p {
  margin: 0 0 18px;
}

#reviews #commentform label {
  display: block;
  font-size: 13px;
  letter-spacing: .5px;
  text-transform: uppercase;
  color: var(--wp--preset--color--body);
  margin: 0 0 6px;
  font-weight: 600;
}

#reviews #commentform input[type="text"],
#reviews #commentform input[type="email"],
#reviews #commentform textarea {
  width: 100%;
  box-sizing: border-box;
  padding: 12px 14px;
  border: 1px solid var(--wp--preset--color--line);
  border-radius: 6px;
  background: var(--wp--preset--color--card);
  color: var(--wp--preset--color--heading);
  font: inherit;
  font-size: 16px;
  line-height: 1.4;
}

#reviews #commentform input:focus,
#reviews #commentform textarea:focus {
  outline: none;
  border-color: var(--wp--preset--color--primary);
}

#reviews #commentform textarea {
  min-height: 140px;
  resize: vertical;
}

#reviews #commentform .stars {
  margin: 0;
}

#reviews #commentform .submit {
  padding: 13px 32px;
  border: 0;
  border-radius: 6px;
  background: var(--wp--preset--color--primary);
  color: #fff;
  font: inherit;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: .5px;
  cursor: pointer;
}

#reviews #commentform .submit:hover {
  background: var(--wp--preset--color--link-hover);
}

/* Reiterüberschriften auf die Größe von "Beschreibung" */
body.single-product .woocommerce-Tabs-panel > h2,
body.single-product .tr-produkt-zusatz > h2,
body.single-product #reviews h2,
body.single-product .woocommerce-Reviews-title {
  font-size: 22px !important;
  font-weight: 700;
  line-height: 1.25;
  margin: 0 0 18px;
  color: var(--wp--preset--color--white);
}

/* Sterne größer und deutlicher */
#reviews #commentform .stars {
  font-size: 26px;
  line-height: 1;
}

#reviews #commentform .stars a {
  margin-right: 6px;
}

#reviews .comment-form-rating.ist-fehlend .stars a::before {
  color: var(--wp--preset--color--primary);
}


/* Reviews: kein Platzhalterbild, dafür der Name deutlicher */
#reviews .comment_container img.avatar,
#reviews .woocommerce-review__gravatar {
  display: none;
}

#reviews .comment-text {
  margin-left: 0;
  padding: 18px 22px;
  border: 1px solid var(--wp--preset--color--line);
  border-radius: 8px;
  background: var(--wp--preset--color--card);
}

#reviews .woocommerce-review__author {
  font-size: 17px;
  font-weight: 700;
  color: var(--wp--preset--color--heading);
}

#reviews .woocommerce-review__published-date {
  font-size: 14px;
  color: var(--wp--preset--color--muted);
}

/* Luft zwischen der Anrede und dem ersten Feld.
   Die Zeile ist ein Inline-Element, ohne block wirkt kein Abstand. */
#reviews .comment-reply-title {
  display: block;
  margin-bottom: 28px;
}


/* h4: Zwischengroesse zwischen Reiterueberschrift und Fliesstext */
body.single-product .woocommerce-Tabs-panel h4,
body.single-product .tr-produkt-zusatz h4,
body.single-product .woocommerce-product-details__short-description h4 {
  font-size: 19px !important;
  font-weight: 700;
  line-height: 1.3;
  color: var(--wp--preset--color--white);
  margin: 26px 0 12px;
}

body.single-product .woocommerce-Tabs-panel h4:first-child,
body.single-product .tr-produkt-zusatz h4:first-child {
  margin-top: 0;
}









/* ==========================================================================
   37. Farben der Kassenfelder wie in den uebrigen Formularen
   ========================================================================== */

#customer_details .form-row input[type="text"],
#customer_details .form-row input[type="email"],
#customer_details .form-row input[type="tel"],
#customer_details .form-row input[type="number"],
#customer_details .form-row textarea,
#customer_details .form-row select {
  background: #1a1a1a;
  color: var(--wp--preset--color--heading);
  border-color: #333;
}

#customer_details .form-row input::placeholder,
#customer_details .form-row textarea::placeholder {
  color: #777;
  opacity: 1;
}

#customer_details .form-row input:focus,
#customer_details .form-row textarea:focus,
#customer_details .form-row select:focus {
  border-color: var(--wp--preset--color--glow);
  box-shadow: 0 0 0 2px rgba(160, 32, 32, .25);
  outline: none;
}

/* Die Landauswahl laeuft ueber Select2 und braucht eigene Regeln */
#customer_details .select2-container--default .select2-selection--single {
  background: #1a1a1a;
  border-color: #333;
}

#customer_details .select2-container--default .select2-selection--single
  .select2-selection__rendered {
  color: var(--wp--preset--color--heading);
}

#customer_details .select2-container--default .select2-selection--single
  .select2-selection__arrow b {
  border-top-color: var(--wp--preset--color--body);
}

/* --- Bestellbestaetigung: Ueberschriften auf Seitenmass ---------------- */

/* WooCommerce setzt den Bestaetigungsblock auf „gross": 64 Pixel fuer die
   Ueberschrift, 36 fuer die Dankzeile. Das sprengt jede andere Seite. Die
   Ueberschrift bekommt das Mass der Abschnittsueberschriften (32/700, wie
   „Simulatorkunden"), die Dankzeile das der Zwischenueberschriften
   darunter (24, wie „Bestelldetails"), aber im normalen Schriftschnitt. */
body.woocommerce-order-received .wc-block-order-confirmation-status h1 {
  font-size: 32px;
  font-weight: 700;
  line-height: 1.2;
}

body.woocommerce-order-received .wc-block-order-confirmation-status p {
  font-size: 24px;
  line-height: 1.35;
}

/* Rechnungsanschrift und Bestellhinweis teilen sich die Zeile. Ueber die
   volle Breite waren fuenf kurze Zeilen absurd auseinandergezogen. */
body.woocommerce-order-received .tr-bestaetigung-zeile {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  align-items: start;
}

/* Die leere Spalte fuer die Lieferadresse nimmt keinen Platz mehr. */
body.woocommerce-order-received .wc-block-order-confirmation-address-wrapper
  > .wp-block-column:empty { display: none; }

@media (max-width: 700px) {
  body.woocommerce-order-received .tr-bestaetigung-zeile {
    grid-template-columns: 1fr;
  }
}

/* Der Hinweis steht im selben Kasten wie die Anschrift daneben, aber
   aufrecht — „address" waere hier die falsche Auszeichnung. */
body.woocommerce-order-received .tr-bestellhinweis
  .wc-block-order-confirmation-billing-address {
  font-style: normal;
}

/* Die Ueberschrift des Hinweises erbt sonst 36 Pixel — sie steht neben
   „Rechnungsadresse" und soll dasselbe Mass haben. */
body.woocommerce-order-received .tr-bestellhinweis > h2 {
  font-size: 24px;
  font-weight: 900;
}

/* Beide Kaesten gleich hoch, egal ob die Anschrift drei Zeilen hat und
   der Hinweis eine. */
body.woocommerce-order-received .tr-bestaetigung-zeile { align-items: stretch; }

body.woocommerce-order-received .tr-bestaetigung-zeile > * {
  display: flex;
  flex-direction: column;
}

body.woocommerce-order-received .tr-bestaetigung-zeile
  .wc-block-order-confirmation-billing-address {
  flex: 1 1 auto;
}

/* Der Fahrername stand in 12 Pixel unter einem 16-Pixel-Produktnamen und
   war kaum lesbar. Er ist die wichtigste Angabe der Position. */
body.woocommerce-order-received .wc-item-meta,
body.woocommerce-order-received .wc-item-meta p,
body.woocommerce-order-received .wc-item-meta strong {
  font-size: 16px;
}

/* Hinweis auf eine offene Zahlung — steht direkt unter der Dankzeile und
   darf nicht uebersehen werden. */
body.woocommerce-order-received .tr-zahlung-offen {
  margin: 14px 0 0;
  padding: 12px 16px;
  font-size: 16px;
  line-height: 1.5;
  color: var(--wp--preset--color--heading, #f0f0f0);
  background: rgba(160, 32, 32, .12);
  border-left: 3px solid #A02020;
  border-radius: 4px;
}

/* Der Hinweis kommt als Absatz und bringt eine Aussenmarge mit — dadurch
   sass er neun Pixel tiefer als die Anschrift daneben. */
body.woocommerce-order-received .tr-bestellhinweis
  .wc-block-order-confirmation-billing-address > *:first-child { margin-top: 0; }

body.woocommerce-order-received .tr-bestellhinweis
  .wc-block-order-confirmation-billing-address > *:last-child { margin-bottom: 0; }

/* Die Anzahl vor dem Produktnamen. Weiss und fett, damit sie sich vom
   Namen abhebt, und mit Abstand — sonst klebt sie daran.

   Das Mal-Zeichen sitzt bauartbedingt auf der Mittellinie, die Ziffer auf
   der Grundlinie; nebeneinander wirkt es versetzt. Ein kleinerer Schnitt
   und ein Hauch Abstand nehmen dem die Unruhe. */
.product-quantity {
  margin-right: 10px;
  font-weight: 700;
  color: var(--wp--preset--color--heading, #f0f0f0);
  white-space: nowrap;
}

.product-quantity::after { content: ""; }

/* Ein kleines x, kein Rechenzeichen: Das typografische Malzeichen sitzt
   auf der Mittellinie und wirkt neben der Ziffer versetzt. Gleiche
   Schrift, gleiche Groesse, gleiche Staerke. */
.product-quantity .tr-mal {
  margin-left: 5px;
  font-size: inherit;
  font-weight: inherit;
  opacity: 1;
}

/* Eingebettete YouTube-Liste im Seitenverhaeltnis 16:9. */
.tr-videoliste {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  /* Oben derselbe Abstand wie zwischen der Ueberschrift „SimRacing
     Impressionen" und der Galerie darunter. */
  margin: 24px 0 1.5rem;
  border-radius: 6px;
  overflow: hidden;
}

.tr-videoliste iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/* --- Fussbereich: Menuespalten ------------------------------------------ */

/* Die Seitenliste steht rechtsbuendig neben Logo und Anschrift, ohne
   Aufzaehlungspunkte — sie ist ein Menue, keine Aufzaehlung. */
.tr-footer-menue { gap: 24px; margin: 0; }

.tr-footer-liste {
  margin: 0;
  padding: 0;
  list-style: none;
  text-align: right;
}

.tr-footer-liste li { margin: 0 0 6px; }

.tr-footer-liste a {
  color: var(--wp--preset--color--body);
  text-decoration: none;
}

.tr-footer-liste a:hover {
  color: var(--wp--preset--color--heading);
  text-decoration: underline;
}

@media (max-width: 700px) {
  .tr-footer-menue { gap: 8px; }
  .tr-footer-liste { text-align: left; }
}

/* Schneller dunkler Hinweis (data-tip), Gegenstueck zu .trv-tip im Backend. */
.tr-tip {
  position: fixed;
  z-index: 100010;
  display: none;
  max-width: 320px;
  padding: 6px 10px;
  font-size: 12.5px;
  line-height: 1.4;
  color: #f0f0f2;
  background: #0d0d11;
  border: 1px solid #34343c;
  border-radius: 6px;
  box-shadow: 0 6px 20px rgba(0, 0, 0, .55);
  pointer-events: none;
  white-space: normal;
}
/* Bestellpositionen mit mehreren Meta-Paaren (Fahrer 1 / Fahrer 2) sauber
   ausrichten. WooCommerce nutzt für dt/dd Floats — bei mehr als einem Paar
   rutscht der zweite Wert in eine eigene Zeile. Ein Raster stellt jedes
   Paar Beschriftung + Wert nebeneinander. */
.woocommerce dl.variation {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 2px 8px;
  margin: 6px 0 0;
}
.woocommerce dl.variation dt,
.woocommerce dl.variation dd {
  float: none;
  margin: 0;
  padding: 0;
}
.woocommerce dl.variation dd p { margin: 0; }

/* Abstand zwischen Gesamtbetrag und der Steuerklammer — ohne ihn kleben
   „€ 360,00" und „(inkl. …)" zusammen. */
.woocommerce .includes_tax { margin-left: 8px; }