/* WolfRope Design 2026 – Design der Übergangsseite wolfrope.de (TECH-017, v11) über Customizr.
   Farben und Schriften wie site/wolfrope-de-statisch/assets/site.css.
   Alle Regeln hängen an body.wr-design; ohne das Plugin greift keine davon. */

@font-face {
  font-family: "Playfair Display";
  src: url("fonts/playfair-display-latin-400-normal.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Playfair Display";
  src: url("fonts/playfair-display-latin-700-normal.woff2") format("woff2");
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Inter";
  src: url("fonts/inter-latin-400-normal.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Inter";
  src: url("fonts/inter-latin-600-normal.woff2") format("woff2");
  font-weight: 600; font-style: normal; font-display: swap;
}

body.wr-design {
  --creme: #F8F4ED;
  --beige: #EDE4D5;
  --hanko: #9C2A2A;
  --dunkel: #3C2F2F;
  --gedeckt: #6B5A55;
  --linie: #D9CCB8;
  --schrift-titel: "Playfair Display", Georgia, "Times New Roman", serif;
  --schrift-text: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
}

/* ---------- Grundfläche und Schrift ---------- */

body.wr-design,
body.wr-design #tc-page-wrap {
  background: var(--creme);
  color: var(--dunkel);
  font-family: var(--schrift-text);
}

body.wr-design input,
body.wr-design select,
body.wr-design textarea,
body.wr-design button {
  font-family: var(--schrift-text);
}

body.wr-design h1,
body.wr-design h2,
body.wr-design h3,
body.wr-design h4,
body.wr-design .entry-title,
body.wr-design .czr-title {
  font-family: var(--schrift-titel);
  color: var(--dunkel);
  letter-spacing: -0.01em;
}
body.wr-design h1,
body.wr-design .entry-title { font-weight: 700; }
body.wr-design h2,
body.wr-design h3,
body.wr-design h4 { font-weight: 400; }
body.wr-design h5,
body.wr-design h6 { font-family: var(--schrift-text); font-weight: 600; color: var(--dunkel); }

body.wr-design strong,
body.wr-design b { font-weight: 600; }

/* ---------- Links ---------- */

body.wr-design #main-wrapper a:not(.btn):not(.wp-block-button__link):not([class*="tribe-common-c-btn"]) {
  color: var(--hanko);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
}
body.wr-design #main-wrapper a:not(.btn):not(.wp-block-button__link):not([class*="tribe-common-c-btn"]):hover {
  color: var(--dunkel);
}
body.wr-design a:focus-visible {
  outline: 2px solid var(--hanko);
  outline-offset: 3px;
  border-radius: 2px;
}

/* ---------- Kopfbereich ---------- */

body.wr-design header.tc-header {
  background: var(--creme);
  border-top-color: var(--hanko);
  border-top-width: 3px;
  border-bottom: 1px solid var(--linie);
  box-shadow: none;
}

body.wr-design .primary-navbar__wrapper,
body.wr-design .mobile-navbar__wrapper,
body.wr-design .mobile-nav__container,
body.wr-design .sticky-transparent .primary-navbar__wrapper,
body.wr-design .tc-header .czr-search-expand {
  background-color: var(--creme);
}

/* Bambuszweig oben rechts im Kopf, wie auf der Übergangsseite */
@media (min-width: 992px) {
  body.wr-design .primary-navbar__wrapper {
    background-image: url("bambus.svg");
    background-repeat: no-repeat;
    background-position: right -1rem top -4.5rem;
    background-size: clamp(9rem, 14vw, 13rem) auto;
  }
}

body.wr-design .header-tagline,
body.wr-design.header-skin-light .header-tagline,
body.wr-design .header-skin-light .header-tagline,
body.wr-design .mobile-navbar__wrapper .header-tagline {
  color: var(--gedeckt) !important;
  font-family: var(--schrift-text);
  letter-spacing: 0.02em;
  font-size: 0.8rem;
  font-style: normal;
}

body.wr-design .tc-header .nav__menu a,
body.wr-design .tc-header .nav__utils a,
body.wr-design .tc-header .search-toggle_btn,
body.wr-design .tc-header .ham__toggler-span-wrapper {
  color: var(--dunkel);
}
body.wr-design .tc-header .nav__menu a:hover,
body.wr-design .tc-header .nav__menu .current-menu-item > a,
body.wr-design .tc-header .nav__menu .current-menu-ancestor > a {
  color: var(--hanko);
}
body.wr-design .tc-header .line { background-color: var(--dunkel); }

body.wr-design .tc-header .dropdown-menu,
body.wr-design .tc-header .czr-dropdown-menu {
  background-color: var(--creme);
  border: 1px solid var(--linie);
  box-shadow: 0 10px 24px rgba(60, 47, 47, 0.08);
}

/* ---------- Schaltflächen ---------- */

body.wr-design .entry-content .wp-block-button__link,
body.wr-design .entry-content .btn,
body.wr-design .entry-content input[type="submit"],
body.wr-design .entry-content button[type="submit"],
body.wr-design .comment-form input[type="submit"] {
  background-color: var(--hanko);
  border-color: var(--hanko);
  color: var(--creme);
  border-radius: 3px;
  font-weight: 600;
}
body.wr-design .entry-content .wp-block-button__link:hover,
body.wr-design .entry-content .btn:hover,
body.wr-design .entry-content input[type="submit"]:hover,
body.wr-design .entry-content button[type="submit"]:hover,
body.wr-design .comment-form input[type="submit"]:hover {
  background-color: var(--dunkel);
  border-color: var(--dunkel);
  color: var(--creme);
}
body.wr-design .entry-content .is-style-outline .wp-block-button__link {
  background-color: transparent;
  color: var(--hanko);
  border: 1px solid var(--hanko);
}

/* Zitate, Trennlinien, Tabellen */
body.wr-design blockquote,
body.wr-design .wp-block-quote {
  border-left-color: var(--hanko);
  font-family: var(--schrift-titel);
}
body.wr-design hr,
body.wr-design .wp-block-separator { border-color: var(--linie); background-color: var(--linie); }
body.wr-design table th,
body.wr-design table td { border-color: var(--linie); }

/* ---------- Fußbereich ---------- */

body.wr-design #footer,
body.wr-design .footer__wrapper {
  background: var(--beige);
  color: var(--dunkel);
  border-top: 1px solid var(--linie);
}
body.wr-design #footer .widget__container,
body.wr-design #footer .widget,
body.wr-design #footer p,
body.wr-design #footer li {
  color: var(--dunkel);
}
body.wr-design #footer h2,
body.wr-design #footer h3,
body.wr-design #footer .widget-title {
  color: var(--dunkel);
  font-family: var(--schrift-titel);
  font-weight: 400;
}

/* Hanko im Fußbereich rechts, wie im Kontaktband der Übergangsseite */
@media (min-width: 1200px) {
  body.wr-design #footer .widget__container {
    background: url("hanko.png") no-repeat right 1rem center / 6.5rem auto;
    padding-right: 9rem;
  }
}

/* Child-Theme setzt footer a auf Weiß mit !important */
body.wr-design #footer a,
body.wr-design footer#footer a {
  color: var(--hanko) !important;
}
body.wr-design #footer a:hover,
body.wr-design footer#footer a:hover {
  color: var(--dunkel) !important;
}

body.wr-design #colophon,
body.wr-design #footer #colophon {
  background: var(--beige);
  border-top: 1px solid var(--linie);
  color: var(--gedeckt) !important;
}
body.wr-design #colophon .fc-copyright-text,
body.wr-design #colophon .fc-copyright-after-text {
  color: var(--gedeckt) !important;
}
body.wr-design #colophon a,
body.wr-design #colophon .fc-copyright-link,
body.wr-design #colophon .social-icon {
  color: var(--hanko) !important;
}

/* Nach-oben-Schaltfläche */
body.wr-design .czr-btta,
body.wr-design #czr-btt,
body.wr-design .czr-btt {
  background-color: var(--hanko);
  color: var(--creme);
}

/* ---------- Druck ---------- */

@media print {
  body.wr-design,
  body.wr-design #tc-page-wrap,
  body.wr-design #footer,
  body.wr-design #colophon { background: #fff; }
}

/* ---------- Consent-Banner (Complianz) ----------
   Complianz setzt seine Farben als Variablen auf :root; auf body überschrieben, die
   Banner-Einstellungen in der Datenbank bleiben unverändert. */

body.wr-design {
  --cmplz_banner_background_color: var(--creme);
  --cmplz_banner_border_color: var(--linie);
  --cmplz_banner_border_width: 1px 1px 1px 1px;
  --cmplz_banner_border_radius: 4px 4px 4px 4px;
  --cmplz_text_color: var(--dunkel);
  --cmplz_hyperlink_color: var(--hanko);
  --cmplz_slider_active_color: var(--hanko);
  --cmplz_slider_inactive_color: var(--gedeckt);
  --cmplz_slider_bullet_color: var(--creme);
  --cmplz_category_header_always_active_color: var(--hanko);
  --cmplz_button_border_radius: 3px 3px 3px 3px;
  --cmplz_button_accept_background_color: var(--hanko);
  --cmplz_button_accept_border_color: var(--hanko);
  --cmplz_button_accept_text_color: var(--creme);
  --cmplz_button_deny_background_color: var(--beige);
  --cmplz_button_deny_border_color: var(--linie);
  --cmplz_button_deny_text_color: var(--dunkel);
  --cmplz_button_settings_background_color: var(--beige);
  --cmplz_button_settings_border_color: var(--linie);
  --cmplz_button_settings_text_color: var(--dunkel);
}
body.wr-design .cmplz-cookiebanner,
body.wr-design .cmplz-manage-consent {
  font-family: var(--schrift-text);
  box-shadow: 0 10px 30px rgba(60, 47, 47, 0.12);
}
body.wr-design .cmplz-cookiebanner .cmplz-title {
  font-family: var(--schrift-titel);
  font-weight: 700;
}
body.wr-design .cmplz-cookiebanner .cmplz-category {
  background-color: var(--beige);
}
body.wr-design .cmplz-cookiebanner .cmplz-btn { font-weight: 600; }

/* ---------- Veranstaltungskalender und Tickets (The Events Calendar, Event Tickets) ----------
   Farben über die Variablen von TEC; Kästen aus dem Zusatz-CSS (Customizer) mit eigenen Linien. */

body.wr-design {
  --tec-font-family-sans-serif: var(--schrift-text);
  --tec-color-text-primary: var(--dunkel);
  --tec-color-text-primary-light: rgba(60, 47, 47, 0.62);
  --tec-color-text-secondary: var(--gedeckt);
  --tec-color-text-events-title: var(--dunkel);
  --tec-color-text-event-title: var(--dunkel);
  --tec-color-text-event-date: var(--dunkel);
  --tec-color-text-secondary-event-date: var(--gedeckt);
  --tec-color-background: var(--creme);
  --tec-color-background-secondary: var(--beige);
  --tec-color-background-events: transparent;
  --tec-color-background-secondary-datepicker: var(--beige);
  --tec-color-accent-primary: var(--hanko);
  --tec-color-accent-primary-hover: #7E2020;
  --tec-color-accent-primary-active: #6A1B1B;
  --tec-color-accent-primary-background: rgba(156, 42, 42, 0.07);
  --tec-color-accent-primary-background-datepicker: var(--hanko);
  --tec-color-accent-secondary: var(--gedeckt);
  --tec-color-accent-secondary-hover: var(--dunkel);
  --tec-color-accent-secondary-active: var(--dunkel);
  --tec-color-accent-secondary-background: var(--beige);
  --tec-color-button-primary: var(--hanko);
  --tec-color-button-primary-hover: var(--dunkel);
  --tec-color-button-primary-active: var(--dunkel);
  --tec-color-button-secondary: var(--gedeckt);
  --tec-color-link-primary: var(--dunkel);
  --tec-color-link-accent: var(--hanko);
  --tec-color-link-accent-hover: var(--dunkel);
  --tec-color-icon-active: var(--hanko);
  --tec-color-icon-primary: var(--gedeckt);
  --tec-color-icon-secondary: var(--gedeckt);
  --tec-color-border-default: var(--linie);
  --tec-color-border-secondary: var(--linie);
  --tec-color-border-tertiary: var(--gedeckt);
  --tec-color-border-active: var(--hanko);
  --tec-color-box-shadow: rgba(60, 47, 47, 0.06);
  --tec-color-box-shadow-secondary: rgba(60, 47, 47, 0.1);
  --tec-color-text-events-bar-submit-button: var(--creme);
}

body.wr-design .tribe-common .tribe-common-h1,
body.wr-design .tribe-common .tribe-common-h2,
body.wr-design .tribe-common .tribe-common-h3,
body.wr-design .tribe-common .tribe-common-h4,
body.wr-design .tribe-events-single-event-title,
body.wr-design .tribe-events .tribe-events-calendar-list__event-title,
body.wr-design .tribe-events-single-section-title,
body.wr-design .tribe-tickets__tickets-title {
  font-family: var(--schrift-titel) !important;
}

body.wr-design .tribe-common .tribe-common-c-btn,
body.wr-design .tribe-common a.tribe-common-c-btn,
body.wr-design .tribe-common button.tribe-common-c-btn,
body.wr-design .tribe-events .tribe-events-c-search__button,
body.wr-design .tribe-tickets__tickets-buy,
body.wr-design .tribe-common .tribe-common-c-btn--small,
body.wr-design .tribe-events-c-subscribe-dropdown__button {
  background-color: var(--hanko);
  border-color: var(--hanko);
  color: var(--creme);
  border-radius: 3px;
  font-family: var(--schrift-text);
  font-weight: 600;
}
body.wr-design .tribe-common .tribe-common-c-btn:hover,
body.wr-design .tribe-common .tribe-common-c-btn:focus,
body.wr-design .tribe-events .tribe-events-c-search__button:hover,
body.wr-design .tribe-tickets__tickets-buy:hover,
body.wr-design .tribe-events-c-subscribe-dropdown__button:hover {
  background-color: var(--dunkel);
  border-color: var(--dunkel);
  color: var(--creme);
}
body.wr-design .tribe-events-c-subscribe-dropdown__button .tribe-events-c-subscribe-dropdown__button-text,
body.wr-design .tribe-events-c-subscribe-dropdown__button svg { color: inherit; fill: currentColor; }

/* Kästen der Einzelveranstaltung und der Tickets (Zusatz-CSS: Rahmen rgba(0,0,0,.08), Radius 18px) */
body.wr-design div.tribe_events .tribe-events-single-event-description,
body.wr-design div.tribe_events .tribe-events-single-section,
body.wr-design div.tribe_events div.tribe-events.tribe-common,
body.wr-design .tribe-common.event-tickets.tribe-tickets__tickets-wrapper,
body.wr-design .tribe-common.event-tickets .tribe-tickets__rsvp-wrapper {
  background-color: var(--creme) !important;
  border: 1px solid var(--linie) !important;
  border-radius: 4px !important;
  box-shadow: 0 10px 24px rgba(60, 47, 47, 0.05) !important;
}
body.wr-design div.tribe_events .tribe-events-event-image,
body.wr-design div.tribe_events .tribe-events-event-image img {
  border-radius: 3px !important;
}
body.wr-design .tribe-tickets__tickets-item,
body.wr-design .tribe-tickets__tickets-footer {
  border-color: var(--linie) !important;
}

/* Kalenderleiste und Datumswahl */
body.wr-design .tribe-events .tribe-events-c-events-bar,
body.wr-design .tribe-events .tribe-events-c-events-bar__search-container {
  background-color: var(--creme);
  border-color: var(--linie);
}
body.wr-design .tribe-events .datepicker .day.active,
body.wr-design .tribe-events .datepicker .month.active,
body.wr-design .tribe-events .datepicker .year.active {
  background-color: var(--hanko);
  color: var(--creme);
}

/* Überschriften in Listen- und Monatsansicht in der Titelschrift */
body.wr-design .tribe-events .tribe-events-calendar-latest-past__heading,
body.wr-design .tribe-events .tribe-events-calendar-latest-past__event-title,
body.wr-design .tribe-events .tribe-events-calendar-list__event-title,
body.wr-design .tribe-events .tribe-events-calendar-month__calendar-event-title,
body.wr-design .tribe-events .tribe-events-calendar-day__event-title,
body.wr-design .tribe-events .tribe-events-c-top-bar__datepicker-button {
  font-family: var(--schrift-titel) !important;
}
body.wr-design .tribe-events .tribe-events-calendar-latest-past__heading { font-weight: 400; }

/* Suchleiste und Hinweise */
body.wr-design .tribe-events .tribe-events-c-events-bar,
body.wr-design .tribe-events .tribe-events-c-events-bar--border,
body.wr-design .tribe-common--breakpoint-medium.tribe-events .tribe-events-c-events-bar--border {
  background-color: var(--creme) !important;
  border-color: var(--linie) !important;
}
body.wr-design .tribe-events .tribe-events-c-messages__message {
  background-color: var(--beige);
  color: var(--dunkel);
}
body.wr-design .tribe-events .tribe-events-c-top-bar__today-button {
  border-color: var(--linie);
  color: var(--dunkel);
  background-color: transparent;
}
body.wr-design .tribe-events-back a,
body.wr-design .tribe-events-sub-nav a { color: var(--hanko); }
body.wr-design .tribe-events-back a:hover,
body.wr-design .tribe-events-sub-nav a:hover { color: var(--dunkel); }

/* Hauptmenü in einer Zeile (Thorsten 13.10.2026, nach Menüpunkt „Termine“; TECH-018 Abschnitt 19.14).
   Customizr setzt je Eintrag 2 × 6,25 px Rand plus 2 × 6,25 px Innenabstand, 0,95em und 1 px Laufweite;
   mit sieben Einträgen reichte die Breite neben Logo und Symbolen nicht. Etwas enger, kein Umbruch im Titel.
   Zwischen 992 und 1199 px ist selbst das zu breit: dort das Klappmenü (wie am Tablet). */
@media (min-width: 1200px) {
  body.wr-design .primary-nav__menu {
    flex-wrap: nowrap;
  }
  body.wr-design .primary-nav__menu .menu-item {
    margin: 0 2px;
  }
  body.wr-design .primary-nav__menu .menu-item .nav__link {
    padding: 0 6px;
  }
  body.wr-design .primary-nav__menu,
  body.wr-design .primary-nav__menu .nav__title {
    font-size: 0.88em;
    letter-spacing: 0.04em;
    white-space: nowrap;
  }
}
@media (min-width: 992px) and (max-width: 1199.98px) {
  body.wr-design .tc-header .primary-navbar__wrapper {
    display: none !important;
  }
  body.wr-design .tc-header .mobile-navbar__wrapper {
    display: block !important;
  }
}

/* Social-Media-Symbole im Footer „Kontakt“ (TECH-018 19.92): inline, nichts von Fremdservern */
body.wr-design .wr-social {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin: 14px 0 0;
}
body.wr-design .wr-social a {
  display: inline-flex;
  color: var(--hanko);
  line-height: 0;
  transition: color 0.15s ease;
}
body.wr-design .wr-social a:hover,
body.wr-design .wr-social a:focus-visible {
  color: var(--dunkel);
}
body.wr-design .wr-social svg {
  width: 26px;
  height: 26px;
}
