/*
Theme Name: rail4mation Modern
Theme URI: https://rail4mation.ch
Author: rail4mation
Description: Premium B2B website theme for rail4mation.
Version: 2.0.0
*/

:root {
  /* Brand colors from style guide */
  --orange: #ec7e34;
  --dark: #3c3c3b;
  --black: #4a4a49;
  --text: #3c3c3b;
  --muted: #666e7c;
  /* Hairline: visible on both white cards and the paper canvas */
  --line: #d5dae2;
  /* Page canvas: cool paper so white panels/cards read as boxes */
  --bg: #eef1f5;
  --white: #fff;
  --radius: 0;
  --radius-sm: 0;
  --shadow: 0 10px 30px rgba(17, 24, 39, 0.08);
  --container: 1240px;
  /* Shared bottom-bevel for .btn and zigzag button groups */
  --r4m-btn-slope: 86%;
  /* Logo-Verlauf: Rot → Orange → Rot (Fortschrittsbalken / CI) */
  --r4m-logo-gradient: linear-gradient(
    90deg,
    #c41e1e 0%,
    #ec7e34 45%,
    #b91c1c 100%
  );

  /*
   * Standard-Kachel / Prominent-Fläche (Referenz: Startseite «Wir sind» / .value-card).
   * Überall nutzbar: --r4m-tile-min-height, --r4m-tile-padding, --r4m-tile-aspect, --r4m-tile-gap
   * Varianten: .r4m-tile--sm | .r4m-tile--md | .r4m-tile--lg am Wrapper oder auf der Kachel setzen.
   */
  --r4m-tile-min-height: 265px;
  --r4m-tile-max-height: 520px;
  --r4m-tile-padding-x: 1.1rem;
  --r4m-tile-padding-y-start: 1.2rem;
  --r4m-tile-padding-y-end: 1.35rem;
  --r4m-tile-padding: var(--r4m-tile-padding-y-start) var(--r4m-tile-padding-x)
    var(--r4m-tile-padding-y-end);
  --r4m-tile-gap: 0.7rem;
  /* Primäre Text-Buttons (.btn): eigene, kompaktere Masse als Kacheln */
  --r4m-btn-padding-y: 0.7rem;
  --r4m-btn-padding-x: 1rem;

  /*
   * Innenseiten & Ausbildungen (Startseite nutzt .r4m-home --r4m-home-*).
   * Untergrenze UI-Text: 14px (0.875rem). Fliesstext: 16px (1rem).
   */
  --r4m-type-body: 1rem;
  --r4m-type-ui: 0.9375rem;
  --r4m-type-min: 0.875rem;
  --r4m-type-section: clamp(1.2rem, 2.8vw, 1.55rem);
  --r4m-type-block-title: clamp(1.12rem, 2.4vw, 1.35rem);
  --r4m-type-eyebrow: 0.8125rem;
}

/* Überschreibt nur CSS-Variablen — an Wrapper oder Kachel hängen (z. B. Ausbildungs-Kacheln). */
.r4m-tile--sm {
  --r4m-tile-min-height: 220px;
  --r4m-tile-max-height: 400px;
}

.r4m-tile--md {
  --r4m-tile-min-height: 265px;
  --r4m-tile-max-height: 520px;
}

.r4m-tile--lg {
  --r4m-tile-min-height: 340px;
  --r4m-tile-max-height: 640px;
}

* {
  box-sizing: border-box;
}

html {
  margin: 0;
  padding: 0;
  /* Gleiche Viewport-Breite auf allen Seiten (kurze Seiten ohne Scrollbalken springen sonst). */
  scrollbar-gutter: stable;
  overflow-y: scroll;
  overflow-x: hidden;
}

html,
body {
  margin: 0;
  padding: 0;
  font-family: Roboto, Arial, sans-serif;
  color: var(--text);
  background: var(--bg);
}

.r4m-skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 10000;
  padding: 0.75rem 1rem;
  background: var(--text, #1a1a1a);
  color: #fff;
  text-decoration: none;
  font-weight: 600;
}

.r4m-skip-link:focus {
  left: 0.75rem;
  top: 0.75rem;
}

.r4m-hp {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

.screen-reader-text {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

.r4m-form-field {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.r4m-form-field__label {
  font-size: 0.875rem;
  font-weight: 600;
}

.r4m-form-field__hint {
  display: block;
  margin-top: 0.2rem;
  font-size: 0.85rem;
  line-height: 1.4;
  color: var(--color-muted, #5c6573);
}

.r4m-room-booking__phone-field {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

/* Turbo frame: only main content swaps; no progress bar or extra fades */
.turbo-progress-bar {
  display: none !important;
}

turbo-frame.r4m-main-frame {
  display: block;
  width: 100%;
}

body {
  max-width: 100%;
  font-size: 16px;
  line-height: 1.55;
  font-weight: 400;
  letter-spacing: 0;
}

/*
 * Aufzählungen: orangefarbener Chevron (›) statt runder Punkte — Navigation/Footer ausgenommen.
 */
:is(
  .r4m-chevron-list,
  .ausbildungen-rich-section__items,
  .r4m-tw-result__optional,
  main.section ul:not(
    .ausbildungen-product__variants,
    .ausbildungen-cat-card__products,
    .unternehmen-hub__grid,
    .beratung-hub__benefits,
    .kurskalender-whats-new__list,
    .r4m-org-open__list,
    .r4m-aktuelles__list,
    .r4m-aktuelles-newsletter__actions,
    .r4m-newsletter-archive__list,
    .r4m-rooms-pills,
    .r4m-rooms-info__list,
    .r4m-room-card__features,
    .r4m-legal ul,
    .r4m-lg-mods__list,
    .r4m-lg-builder__summary-list
  )
) {
  list-style: none;
  margin-left: 0;
  padding-left: 0;
}

:is(
  .r4m-chevron-list,
  .ausbildungen-rich-section__items,
  .r4m-tw-result__optional,
  main.section ul:not(
    .ausbildungen-product__variants,
    .ausbildungen-cat-card__products,
    .unternehmen-hub__grid,
    .beratung-hub__benefits,
    .kurskalender-whats-new__list,
    .r4m-org-open__list,
    .r4m-aktuelles__list,
    .r4m-aktuelles-newsletter__actions,
    .r4m-newsletter-archive__list,
    .r4m-rooms-pills,
    .r4m-rooms-info__list,
    .r4m-room-card__features,
    .r4m-legal ul,
    .r4m-lg-mods__list,
    .r4m-lg-builder__summary-list
  )
) > li {
  position: relative;
  padding-left: 1.1em;
}

:is(
  .r4m-chevron-list,
  .ausbildungen-rich-section__items,
  .r4m-tw-result__optional,
  main.section ul:not(
    .ausbildungen-product__variants,
    .ausbildungen-cat-card__products,
    .unternehmen-hub__grid,
    .beratung-hub__benefits,
    .kurskalender-whats-new__list,
    .r4m-org-open__list,
    .r4m-aktuelles__list,
    .r4m-aktuelles-newsletter__actions,
    .r4m-newsletter-archive__list,
    .r4m-rooms-pills,
    .r4m-rooms-info__list,
    .r4m-room-card__features,
    .r4m-legal ul,
    .r4m-lg-mods__list,
    .r4m-lg-builder__summary-list
  )
) > li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.72em;
  width: 0;
  height: 0;
  border-top: 0.28em solid transparent;
  border-bottom: 0.28em solid transparent;
  border-left: 0.42em solid var(--orange);
  transform: translateY(-50%);
}

a {
  color: inherit;
  text-decoration: none;
}

.container {
  width: min(var(--container), calc(100% - 2.4rem));
  margin: 0 auto;
}

.site-header {
  position: sticky;
  top: 0;
  z-index: 30;
  max-width: 100%;
  background: rgba(255, 255, 255, 0.98);
  backdrop-filter: blur(6px);
  border-bottom: 1px solid var(--line);
}

/* Sticky header: anchor targets on inner pages */
main.section :target,
.ausbildungen-rich-course:target {
  scroll-margin-top: 5.5rem;
}

.header-inner {
  display: grid;
  grid-template-columns: auto 1fr auto auto;
  gap: 1rem;
  align-items: center;
  min-height: 78px;
}

.brand {
  display: inline-flex;
  align-items: center;
  max-width: 290px;
}

.brand img {
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 52px;
  display: block;
}

.menu {
  display: block;
}

.menu li {
  list-style: none;
}

.menu > ul {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 1.2rem;
  margin: 0;
  padding: 0;
}

.menu a {
  display: inline-block;
  padding: 0.45rem 0;
  border-radius: 0;
  font-weight: 500;
  color: #2f3745;
  border-bottom: 2px solid transparent;
}

.menu a:hover,
.menu a:focus-visible {
  color: #111827;
  border-bottom-color: var(--orange);
}

.has-mega {
  position: relative;
  /* Hover bridge: li stays “active” while the cursor moves down to the panel */
  padding-bottom: 0.65rem;
  margin-bottom: -0.65rem;
}

.mega-menu {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translate(-50%, 6px);
  /* 100vw zählt die Scrollbar mit und erzeugt horizontalen Overflow → Seite springt. */
  width: min(860px, calc(100svw - 3rem));
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  align-items: stretch;
  gap: 1.2rem;
  padding: 1rem;
  border: 1px solid var(--line);
  background: #fff;
  box-shadow: 0 16px 34px rgba(17, 24, 39, 0.12);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition:
    opacity 0.14s ease,
    transform 0.14s ease,
    visibility 0s linear 0.14s;
  z-index: 50;
}

/* Links-only (no lead CTA): compact panel under Ausbildungen, like Unternehmen */
.mega-menu.mega-menu--compact {
  left: 0;
  right: auto;
  transform: translate(0, 6px);
  width: max-content;
  min-width: 16.5rem;
  max-width: min(26rem, calc(100svw - 2rem));
  grid-template-columns: 1fr;
  gap: 0;
  padding: 0.4rem 0;
}

.mega-menu.mega-menu--compact .mega-menu__links {
  gap: 0;
}

.mega-menu.mega-menu--compact .mega-menu__links a {
  display: block;
  padding: 0.62rem 1rem;
  white-space: nowrap;
  border: 0;
}

.mega-menu.mega-menu--compact .mega-menu__links a:hover,
.mega-menu.mega-menu--compact .mega-menu__links a:focus-visible {
  background: #f5f7fb;
  border-color: transparent;
  color: #111827;
}

.mega-menu::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: -0.65rem;
  height: 0.65rem;
}

.has-mega:hover .mega-menu,
.has-mega:focus-within .mega-menu {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translate(-50%, 0);
  transition:
    opacity 0.14s ease,
    transform 0.14s ease,
    visibility 0s;
}

.has-mega:hover .mega-menu.mega-menu--compact,
.has-mega:focus-within .mega-menu.mega-menu--compact {
  transform: translate(0, 0);
}

.mega-menu__lead {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  align-items: stretch;
  min-height: 100%;
  padding: 0.85rem 0.75rem;
  border: 0;
  background: transparent;
  box-sizing: border-box;
}

.mega-menu__links {
  display: grid;
  align-content: start;
  gap: 0.25rem;
}

.mega-menu__title {
  margin: 0 0 0.4rem;
  font-size: 0.86rem;
  font-weight: 700;
  color: #4f5968;
}

.mega-menu__links a {
  display: block;
  padding: 0.5rem 0.55rem;
  border: 1px solid transparent;
  border-bottom: 0;
  color: #1f2937;
  font-weight: 500;
}

.mega-menu__links a:hover,
.mega-menu__links a:focus-visible {
  border-color: #d9dee7;
  background: #f8fafc;
  color: #111827;
}

.submenu-toggle {
  border: 0;
  background: transparent;
  padding: 0.45rem 0;
  font: inherit;
  font-weight: 500;
  color: #2f3745;
  border-bottom: 2px solid transparent;
  cursor: pointer;
}

.submenu-toggle:hover,
.submenu-toggle:focus-visible,
.has-submenu.is-open .submenu-toggle {
  color: #111827;
  border-bottom-color: var(--orange);
}

.has-submenu {
  position: relative;
  padding-bottom: 0.65rem;
  margin-bottom: -0.65rem;
}

.submenu {
  position: absolute;
  top: 100%;
  right: 0;
  min-width: 220px;
  margin: 0;
  padding: 0.35rem 0;
  border: 1px solid var(--line);
  background: #fff;
  box-shadow: 0 12px 26px rgba(17, 24, 39, 0.12);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(5px);
  transition:
    opacity 0.14s ease,
    transform 0.14s ease,
    visibility 0s linear 0.14s;
  z-index: 40;
}

.submenu::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: -0.65rem;
  height: 0.65rem;
}

.submenu li {
  margin: 0;
}

.submenu a {
  display: block;
  padding: 0.55rem 0.85rem;
  border-bottom: 0;
}

.submenu a:hover,
.submenu a:focus-visible {
  background: #f5f7fb;
  color: #111827;
}

.has-submenu:hover .submenu,
.has-submenu:focus-within .submenu,
.has-submenu.is-open .submenu {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(0);
  transition:
    opacity 0.14s ease,
    transform 0.14s ease,
    visibility 0s;
}

.menu-wrap {
  display: flex;
  justify-content: flex-end;
}

.menu-toggle {
  display: none;
  border: 1px solid #d5dae2;
  border-radius: 0;
  background: var(--white);
  font-weight: 700;
  padding: 0.5rem 0.9rem;
  min-height: 44px;
  min-width: 44px;
  cursor: pointer;
}

.header-cta {
  display: flex;
  gap: 0.6rem;
  align-items: center;
}

.header-tools {
  display: flex;
  align-items: center;
  gap: 0.95rem;
}

/* Mobile menu panel only (shown ≤1280px when menu open) */
.header-mobile-cta {
  display: none;
}

.btn {
  border: 0;
  border-radius: 0;
  padding: var(--r4m-btn-padding-y) var(--r4m-btn-padding-x);
  font-size: 0.9rem;
  font-weight: 600;
  display: inline-block;
  position: relative;
  overflow: visible;
  clip-path: polygon(0 0, 100% 0, 100% var(--r4m-btn-slope), 0 100%);
  transition: transform 0.22s ease, box-shadow 0.22s ease;
  cursor: pointer;
}

.btn:hover,
.btn:focus-visible {
  transform: translateY(-2px);
  box-shadow: 0 10px 22px rgba(17, 24, 39, 0.18);
}

/* Angled bottom detail for interactive controls */
.btn::after {
  content: none;
}

/*
 * Zigzag row: alternating bottom edges (see .value-card-*).
 * Use .btn-group on any horizontal cluster of 2+ .btn elements.
 */
.btn-group {
  display: flex;
  flex-wrap: wrap;
  gap: 0.65rem;
  align-items: stretch;
}

.btn-group > :is(a, button).btn:nth-child(odd),
.header-cta > :is(a, button).btn:nth-child(odd),
.hero-actions > :is(a, button).btn:nth-child(odd),
.r4m-home .home-vte-more-actions > :is(a, button).btn:nth-child(odd),
.course-actions > :is(a, button).btn:nth-child(odd),
.r4m-pf-actions-row > :is(a, button).btn:nth-child(odd),
.homev2-actions > :is(a, button).btn:nth-child(odd),
.homev2-guide-choice-row > :is(a, button).btn:nth-child(odd),
.homev2-guide-choice:not(.homev2-guide-choice-stack) > :is(a, button).btn:nth-child(odd),
.r4m-tw-toolbar > :is(a, button).btn:nth-child(odd),
.r4m-tw-result__ctas > :is(a, button).btn:nth-child(odd),
.r4m-room-booking__bulk-slots-actions > :is(a, button).btn:nth-child(odd),
.r4m-room-booking__selected-slot-actions > :is(a, button).btn:nth-child(odd),
.r4m-room-wizard__nav.btn-group > :is(a, button).btn:nth-child(odd),
.r4m-room-booking__order-line-actions > :is(a, button).btn:nth-child(odd) {
  clip-path: polygon(0 0, 100% 0, 100% var(--r4m-btn-slope), 0 100%);
  -webkit-clip-path: polygon(0 0, 100% 0, 100% var(--r4m-btn-slope), 0 100%);
}

.btn-group > :is(a, button).btn:nth-child(even),
.header-cta > :is(a, button).btn:nth-child(even),
.hero-actions > :is(a, button).btn:nth-child(even),
.r4m-home .home-vte-more-actions > :is(a, button).btn:nth-child(even),
.course-actions > :is(a, button).btn:nth-child(even),
.r4m-pf-actions-row > :is(a, button).btn:nth-child(even),
.homev2-actions > :is(a, button).btn:nth-child(even),
.homev2-guide-choice-row > :is(a, button).btn:nth-child(even),
.homev2-guide-choice:not(.homev2-guide-choice-stack) > :is(a, button).btn:nth-child(even),
.r4m-tw-toolbar > :is(a, button).btn:nth-child(even),
.r4m-tw-result__ctas > :is(a, button).btn:nth-child(even),
.r4m-room-booking__bulk-slots-actions > :is(a, button).btn:nth-child(even),
.r4m-room-booking__selected-slot-actions > :is(a, button).btn:nth-child(even),
.r4m-room-wizard__nav.btn-group > :is(a, button).btn:nth-child(even),
.r4m-room-booking__order-line-actions > :is(a, button).btn:nth-child(even) {
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 var(--r4m-btn-slope));
  -webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 0 var(--r4m-btn-slope));
}

@media (max-width: 768px) {
  .r4m-home .home-vte-more-actions > :is(a, button).btn:nth-child(even) {
    clip-path: polygon(0 0, 100% 0, 100% var(--r4m-btn-slope), 0 100%);
  }
}

/* Stacked full-width buttons: single bevel when not in a horizontal row */
@media (max-width: 700px) {
  .header-cta > :is(a, button).btn:nth-child(even),
  .hero-actions > :is(a, button).btn:nth-child(even),
  .course-actions > :is(a, button).btn:nth-child(even),
  .r4m-pf-actions-row > :is(a, button).btn:nth-child(even),
  .homev2-actions > :is(a, button).btn:nth-child(even),
  .r4m-tw-toolbar > :is(a, button).btn:nth-child(even),
  .r4m-tw-result__ctas > :is(a, button).btn:nth-child(even) {
    clip-path: polygon(0 0, 100% 0, 100% var(--r4m-btn-slope), 0 100%);
  }
}

/*
 * Button variants (site-wide — see .cursor/rules/rail4mation-buttons.mdc):
 * - .btn-primary — orange fill, white text; Kurskalender / buchen / Kalender-CTAs
 * - .btn-inquiry — white fill, orange text; Kontakt / Anfrage / Beratung; hover = lift only
 * - .btn-secondary — dark fill; e4learn, wizard chrome; not for inquiry vs booking pairs
 */
.btn-primary {
  background: var(--orange);
  color: var(--white);
}

.btn-secondary {
  background: var(--dark);
  color: var(--white);
}

/* Anfrage / Beratung: white fill + orange outline that follows the angled clip-path,
 * orange text. Outline via orange ::before + inset white ::after (same clip-path). */
.btn-inquiry {
  background: transparent;
  color: var(--orange);
  box-shadow: none;
  z-index: 0; /* stacking context so angled outline layers stay inside the button */
}

.btn-inquiry::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  background: var(--orange);
  clip-path: inherit;
  -webkit-clip-path: inherit;
  pointer-events: none;
}

.btn-inquiry::after {
  content: "";
  position: absolute;
  inset: 2px;
  z-index: -1;
  background: var(--white);
  clip-path: inherit;
  -webkit-clip-path: inherit;
  pointer-events: none;
}

.btn-primary:hover,
.btn-primary:focus-visible {
  color: var(--white);
}

.btn-inquiry:hover,
.btn-inquiry:focus-visible {
  color: var(--orange);
  background: transparent;
  box-shadow: 0 10px 22px rgba(17, 24, 39, 0.18);
}

/* Kurskalender-CTA: grau statt Orange */
.btn-calendar {
  background: #9aa3b2;
  color: #fff;
  box-shadow: none;
}

.btn-calendar:hover,
.btn-calendar:focus-visible {
  background: #868f9e;
  color: #fff;
  transform: none;
  box-shadow: none;
}

/* Kurskalender-CTA ohne Termine: sichtbar, nicht klickbar */
.btn.is-disabled,
.btn-primary.is-disabled,
.btn-calendar.is-disabled {
  background: #c8cdd6;
  color: #5c6573;
  cursor: not-allowed;
  pointer-events: none;
  transform: none;
  box-shadow: none;
}

.btn-primary.is-disabled:hover,
.btn-primary.is-disabled:focus-visible,
.btn-calendar.is-disabled:hover,
.btn-calendar.is-disabled:focus-visible {
  background: #c8cdd6;
  color: #5c6573;
  transform: none;
  box-shadow: none;
}

/* .menu a nav color must not override btn-primary (mega-menu Qualifikationsberater) */
.menu a.btn-primary,
.menu a.btn-secondary,
.mega-menu__lead .mega-menu__berater.btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: auto;
  min-height: 0;
  padding: 0.85rem 0.9rem;
  font-size: 0.95rem;
  font-weight: 700;
  line-height: 1.3;
  text-align: center;
  text-decoration: none;
  box-sizing: border-box;
  border-bottom-color: transparent;
}

.menu a.btn-primary,
.mega-menu__lead .mega-menu__berater.btn-primary {
  color: var(--white);
}

/* Dark fill (.btn-secondary) needs light text — nav link color must not win. */
.menu a.btn-secondary,
.mega-menu__lead .mega-menu__berater.btn-secondary {
  color: var(--white);
}

/* Same angled bottom as Kurse buchen (.btn / header-cta odd) */
.mega-menu__lead .mega-menu__berater.btn {
  clip-path: polygon(0 0, 100% 0, 100% var(--r4m-btn-slope), 0 100%);
  -webkit-clip-path: polygon(0 0, 100% 0, 100% var(--r4m-btn-slope), 0 100%);
  flex: 1 1 auto;
}

.menu a.btn-primary:hover,
.menu a.btn-primary:focus-visible,
.menu a.btn-secondary:hover,
.menu a.btn-secondary:focus-visible,
.mega-menu__lead .mega-menu__berater.btn:hover,
.mega-menu__lead .mega-menu__berater.btn:focus-visible {
  border-bottom-color: transparent;
}

.menu a.btn-primary:hover,
.menu a.btn-primary:focus-visible,
.menu a.btn-secondary:hover,
.menu a.btn-secondary:focus-visible,
.mega-menu__lead .mega-menu__berater.btn-primary:hover,
.mega-menu__lead .mega-menu__berater.btn-primary:focus-visible,
.mega-menu__lead .mega-menu__berater.btn-secondary:hover,
.mega-menu__lead .mega-menu__berater.btn-secondary:focus-visible {
  color: var(--white);
}

.mega-menu__lead .mega-menu__berater.btn:hover,
.mega-menu__lead .mega-menu__berater.btn:focus-visible {
  transform: translateY(-2px);
  box-shadow: 0 10px 22px rgba(17, 24, 39, 0.18);
}

.btn-e4learn {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
}

.btn-e4learn img {
  width: 18px;
  height: 18px;
  object-fit: contain;
  border-radius: 0;
  background: transparent;
}

.lang-switch {
  display: flex;
  gap: 0.35rem;
  font-size: 0.76rem;
  font-weight: 500;
  color: #6a7282;
  text-transform: uppercase;
}

.lang-switch--drawer {
  display: none;
}

.lang-switch a.is-active {
  color: var(--orange, #e85d04);
  font-weight: 700;
}

.r4m-lang-notice {
  margin: 0 0 1.25rem;
  padding: 0.85rem 1rem;
  font-size: 0.95rem;
  color: #4b5563;
  background: #f8fafc;
  border-left: 3px solid var(--orange, #e85d04);
}

.hero {
  padding: 5rem 0 3rem;
  background:
    radial-gradient(circle at 20% -10%, #ffefe1 0%, transparent 40%),
    radial-gradient(circle at 90% 10%, #f7f9fd 0%, transparent 45%),
    #fff;
  position: relative;
}

/* Photo hero: dark base so nothing light shows through the angled bottom mask */
.hero.hero-bg-full {
  background: rgb(10, 12, 18);
}

.hero-bg-full {
  position: relative;
  min-height: min(86vh, 780px);
  display: flex;
  align-items: center;
  overflow: hidden;
}

.hero-bg-full--img picture {
  position: absolute;
  inset: 0;
  z-index: 0;
  display: block;
  width: 100%;
  height: 100%;
  margin: 0;
}

.hero-bg-full--img .hero-bg-full__photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  z-index: 0;
}

.hero-bg-full__scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(
    90deg,
    rgba(10, 12, 18, 0.84) 0%,
    rgba(10, 12, 18, 0.68) 36%,
    rgba(10, 12, 18, 0.45) 62%,
    rgba(10, 12, 18, 0.45) 100%
  );
}

.hero-bg-full .hero-grid {
  position: relative;
  z-index: 2;
  grid-template-columns: 1fr;
}

.hero-bg-full .hero-kicker {
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
  border-color: rgba(255, 255, 255, 0.45);
}

.hero-bg-full h1,
.hero-bg-full p {
  color: #fff;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
}

.hero-bg-full .hero-metrics span {
  color: #fff;
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.42);
}

.hero-bg-full .btn-primary {
  color: var(--white);
}

/* Brand secondary element: 3.5° angled lower edge */
.angled-35::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 56px;
  background: var(--bg);
  clip-path: polygon(0 34%, 100% 0, 100% 100%, 0 100%);
  pointer-events: none;
}

.hero-bg-full.angled-35::after {
  z-index: 3;
}

.hero-grid {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 1.2rem;
  align-items: center;
}

.hero-media {
  position: relative;
  overflow: hidden;
  box-shadow: var(--shadow);
  clip-path: polygon(0 0, 100% 0, 100% 91%, 0 100%);
  transform: translateZ(0);
  transition: transform 0.28s ease, box-shadow 0.28s ease;
}

.hero-media img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  object-position: 55% 58%;
  display: block;
}

.hero-media::before {
  content: "";
  position: absolute;
  inset: 0;
  border: 1px solid var(--line);
  pointer-events: none;
}

.hero-media::after {
  content: "";
  position: absolute;
  left: -20%;
  bottom: 0;
  width: 38%;
  height: 2px;
  background: var(--orange);
  transform: skewX(-30deg);
  animation: r4m-angle-slide 4.4s ease-in-out infinite;
  pointer-events: none;
}

.hero-media:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 38px rgba(17, 24, 39, 0.18);
}

.angle-demo {
  position: relative;
  overflow: hidden;
  clip-path: polygon(0 0, 100% 0, 100% 94%, 0 100%);
  max-width: 760px;
}

.angle-demo img {
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  object-position: center;
  display: block;
}

.angle-demo::before {
  content: "";
  position: absolute;
  inset: 0;
  border: 1px solid var(--line);
  pointer-events: none;
}

.angle-showcase {
  display: grid;
  justify-content: start;
  margin-top: 0.8rem;
}

.angle-demo::after {
  content: "";
  position: absolute;
  left: -20%;
  bottom: 0;
  width: 36%;
  height: 2px;
  background: var(--orange);
  transform: skewX(-30deg);
  animation: r4m-angle-slide 5.4s ease-in-out infinite;
  pointer-events: none;
}

/* Variante A: feine Neigung */
.angle-demo-a img {
  clip-path: none;
}

.angle-demo-a::after {
  content: none;
}

/* Variante B: deutlichere Neigung */
.angle-demo-b img {
  clip-path: none;
}

.angle-demo-b::after {
  content: none;
}

/* Variante C: subtile Doppel-Linie */
.angle-demo-c img {
  clip-path: none;
}

.angle-demo-a {
  /* Classic diagonal: lower left, higher right */
  clip-path: polygon(0 0, 100% 0, 100% 95%, 0 100%);
}

.angle-demo-b {
  clip-path: polygon(0 0, 100% 0, 100% 95%, 0 100%);
}

.angle-demo-c {
  clip-path: polygon(0 0, 100% 0, 100% 95%, 0 100%);
}

@keyframes r4m-angle-slide {
  0% {
    left: -24%;
    opacity: 0.15;
  }
  25% {
    opacity: 0.9;
  }
  50% {
    left: 36%;
    opacity: 0.35;
  }
  75% {
    opacity: 0.85;
  }
  100% {
    left: 108%;
    opacity: 0.15;
  }
}

@media (prefers-reduced-motion: reduce) {
  .btn,
  .hero-media {
    transition: none;
  }

  .btn:hover,
  .btn:focus-visible,
  .hero-media:hover {
    transform: none;
    box-shadow: var(--shadow);
  }

  .btn::after,
  .hero-media::after,
  .angle-demo::after {
    animation: none;
    left: 0;
    width: 100%;
    transform: none;
    opacity: 0.65;
  }

  .cards-cut .card::after {
    left: 0;
    width: 100%;
    opacity: 0.55;
    transition: none;
  }

  .orbit-item,
  .orbit-item-1,
  .orbit-item-2,
  .orbit-item-3,
  .orbit-item-4,
  .orbit-item-5 {
    animation: none;
  }
}

.angle-demo-c::before {
  content: none;
}

.angle-demo-c::after {
  content: none;
}

.hero-kicker {
  display: inline-block;
  padding: 0.34rem 0.75rem;
  border-radius: 0;
  background: #fff;
  color: #1f2530;
  border: 1px solid #e2bf9f;
  font-size: 0.8rem;
  font-weight: 700;
  margin-bottom: 0.8rem;
}

.hero h1 {
  margin: 0;
  font-family: Roboto, Arial, sans-serif;
  font-size: clamp(2.1rem, 6vw, 3.8rem);
  line-height: 1.08;
  font-weight: 700;
  color: #151922;
  max-width: 16ch;
  letter-spacing: -0.02em;
}

.hero p {
  margin: 1.05rem 0 0;
  max-width: 58ch;
  color: var(--text);
  font-size: 1.04rem;
}

/* Ensure full-background hero keeps high-contrast text */
.hero.hero-bg-full h1,
.hero.hero-bg-full p {
  color: #fff;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
}

.hero-actions {
  margin-top: 1.35rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.65rem;
  align-items: stretch;
}

.hero-metrics {
  margin-top: 1.3rem;
  display: flex;
  gap: 0.55rem;
  flex-wrap: wrap;
}

.hero-metrics span {
  display: inline-block;
  font-size: 0.8rem;
  font-weight: 500;
  color: #515768;
  border: 1px solid #e4e8ef;
  background: var(--white);
  border-radius: 0;
  padding: 0.34rem 0.64rem;
}

.trust-strip {
  padding: 0.75rem 0 0.65rem;
}

.trust-strip-kicker {
  margin: 0 0 0.42rem;
  text-align: center;
  font-size: 0.78rem;
  line-height: 1.2;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: #737b89;
  font-weight: 600;
}

.trust-strip-inner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.trust-badge {
  border: 1px solid #dde3eb;
  background: #fff;
  padding: 0.45rem 0.6rem;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 58px;
  min-width: 128px;
  transition: border-color 0.14s ease, transform 0.14s ease;
}

.trust-badge:hover,
.trust-badge:focus-visible {
  border-color: var(--orange);
  transform: translateY(-1px);
}

.trust-badge img {
  max-height: 34px;
  width: auto;
  max-width: 100%;
  object-fit: contain;
  display: block;
}

/* ——— Homepage flow (r4m-home): hero → VTE → Anerkannt → … ——— */
.r4m-home {
  --r4m-home-eyebrow: 0.8125rem;
  --r4m-home-eyebrow-ls: 0.1em;
  --r4m-home-hero: clamp(1.75rem, 3.6vw, 2.45rem);
  --r4m-home-title: clamp(1.38rem, 2.55vw, 1.62rem);
  --r4m-home-card-title: clamp(1.12rem, 2vw, 1.28rem);
  --r4m-home-body: 1rem;
  --r4m-home-ui: 0.9375rem;
}

.r4m-home > .section {
  padding: clamp(2.5rem, 5vw, 3.75rem) 0;
}

/* Homepage: one type rhythm */
main.r4m-home .hero.hero-bg-full h1 {
  font-size: var(--r4m-home-hero);
  max-width: min(42ch, 100%);
  line-height: 1.12;
  margin: 0 0 0.85rem;
}

main.r4m-home .hero-kicker {
  font-size: var(--r4m-home-ui);
  margin-top: 0;
}

main.r4m-home .section > .container > h2,
main.r4m-home .home-vte-title {
  font-size: var(--r4m-home-title);
  line-height: 1.18;
}

main.r4m-home .home-flow-kicker {
  font-size: var(--r4m-home-eyebrow);
  letter-spacing: var(--r4m-home-eyebrow-ls);
}

main.r4m-home .value-card h3 {
  font-size: var(--r4m-home-card-title);
  line-height: 1.2;
}

main.r4m-home .value-card p {
  font-size: var(--r4m-home-body);
  line-height: 1.5;
}

.r4m-home .home-strip--vte {
  background: var(--bg);
}

.r4m-home .home-vte {
  max-width: 100%;
}

.r4m-home .home-vte-title {
  margin: 0 0 1rem;
  font-family: Roboto, Arial, sans-serif;
  font-weight: 700;
  color: var(--black);
  letter-spacing: -0.01em;
}

.r4m-home .home-vte-pillars {
  display: grid;
  width: 100%;
  margin: 0;
  gap: 0.75rem;
  min-height: 11rem;
  background: transparent;
}

.r4m-home .home-vte-pillars--3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.r4m-home .home-vte-pillars--2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.r4m-home .home-vte-pillars--1 {
  grid-template-columns: 1fr;
}

.r4m-home .home-vte-pillar--link {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0.45rem;
  min-height: 9.5rem;
  padding: 1.15rem 1.1rem 1.2rem;
  box-sizing: border-box;
  border: 2px solid #d5dae2;
  background: #fff;
  text-decoration: none;
  color: inherit;
  transition:
    border-color 0.16s ease,
    background-color 0.16s ease,
    box-shadow 0.16s ease,
    transform 0.16s ease;
}

.r4m-home .home-vte-pillar--link:hover,
.r4m-home .home-vte-pillar--link:focus-visible {
  border-color: var(--orange, #e85d04);
  box-shadow: 0 8px 24px rgba(17, 24, 39, 0.08);
  transform: translateY(-2px);
}

.r4m-home .home-vte-pillar-title {
  display: block;
  margin: 0;
  font-family: Roboto, Arial, sans-serif;
  font-size: clamp(1.05rem, 2.4vw, 1.35rem);
  font-weight: 700;
  line-height: 1.2;
  color: var(--black);
}

.r4m-home .home-vte-pillar-teaser {
  display: block;
  font-size: 0.88rem;
  font-weight: 500;
  line-height: 1.4;
  color: #4b5563;
}

.r4m-home .home-vte-pillar-cta {
  display: inline-block;
  margin-top: 0.35rem;
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--orange, #e85d04);
}

.r4m-home .home-vte-pillar--lf.home-vte-pillar--link {
  text-align: right;
  align-items: flex-end;
}

.r4m-home .home-vte-pillar--rb.home-vte-pillar--link {
  text-align: center;
  align-items: center;
}

.r4m-home .home-vte-pillar--wp.home-vte-pillar--link {
  text-align: left;
  align-items: flex-start;
}

@media (max-width: 900px) {
  .form-grid {
    grid-template-columns: 1fr;
  }

  .r4m-home .home-vte-pillars--3 {
    grid-template-columns: 1fr;
    min-height: 0;
  }

  .r4m-home .home-vte-pillar--lf.home-vte-pillar--link,
  .r4m-home .home-vte-pillar--rb.home-vte-pillar--link,
  .r4m-home .home-vte-pillar--wp.home-vte-pillar--link {
    text-align: left;
    align-items: flex-start;
  }
}

@media (max-width: 640px) {
  .r4m-home .home-vte-pillars--2 {
    grid-template-columns: 1fr;
  }
}

.r4m-home .home-vte-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}

.r4m-home .home-vte-chip {
  display: inline-block;
  padding: 0.35rem 0.58rem;
  font-size: var(--r4m-home-ui);
  font-weight: 600;
  line-height: 1.35;
  color: var(--text);
  text-decoration: none;
  border: 1px solid var(--line);
  background: #fff;
  border-radius: 0;
  transition: background 0.14s ease, transform 0.14s ease, box-shadow 0.14s ease;
}

.r4m-home .home-vte-chip:hover,
.r4m-home .home-vte-chip:focus-visible {
  background: #fff;
  box-shadow: 0 4px 12px rgba(26, 34, 48, 0.08);
}

.r4m-home .home-vte-more {
  margin-top: 1.5rem;
  padding-top: 1.25rem;
}

.r4m-home .home-vte-more::before {
  content: "";
  display: block;
  width: 3rem;
  height: 3px;
  margin: 0 0 1rem;
  background: var(--r4m-logo-gradient);
}

.r4m-home .home-vte-more-title {
  margin: 0 0 0.85rem;
  font-size: var(--r4m-home-ui);
  font-weight: 600;
  line-height: 1.4;
  color: var(--text);
}

.r4m-home .home-vte-more-actions {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.75rem;
  width: 100%;
}

.r4m-home .home-vte-more-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-width: 0;
  min-height: 3.25rem;
  padding: 0.85rem 1rem;
  font-size: var(--r4m-home-ui);
  line-height: 1.3;
  text-align: center;
  box-sizing: border-box;
}

@media (max-width: 768px) {
  .r4m-home .home-vte-more-actions {
    grid-template-columns: 1fr;
  }
}

/* Homepage: one paper canvas — white cards sit on --bg */
.r4m-home .home-strip--trust {
  background: var(--bg);
  border-top: 0;
  padding-top: clamp(2.5rem, 5vw, 3.75rem);
  padding-bottom: clamp(2.5rem, 5vw, 3.75rem);
}

.r4m-home .trust-badge {
  border: 0;
  background: transparent;
  box-shadow: none;
}

.r4m-home .trust-badge:hover,
.r4m-home .trust-badge:focus-visible {
  border: 0;
  transform: translateY(-1px);
}

.r4m-home .home-strip--why.values-band {
  border-top: 0;
  padding-top: 0;
}

/* Unified logo wall: Aktionäre / Partner / Kunden */
.r4m-home .home-strip--shareholders,
.r4m-home .home-strip--partners,
.r4m-home .home-strip--clients {
  background: var(--bg);
  color: var(--text);
  border-top: 1px solid var(--line);
  padding-top: clamp(2.25rem, 4vw, 3.25rem);
  padding-bottom: clamp(2.25rem, 4vw, 3.25rem);
}

.r4m-home .home-strip--partners h2,
.r4m-home .home-strip--shareholders h2,
.r4m-home .home-strip--clients h2 {
  color: var(--black);
}

.r4m-home .home-shareholders-logos,
.r4m-home .home-partners-logos,
.r4m-home .client-wall-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(148px, 1fr));
  gap: 0;
  width: 100%;
  margin-top: 0.85rem;
  border-top: 1px solid var(--line);
  border-left: 1px solid var(--line);
  background: var(--bg);
}

.r4m-home .home-strip--clients .client-wall {
  margin-top: 0.35rem;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
  border-radius: 0;
}

.r4m-home .client-logo-card,
.r4m-home .home-partners-logos .client-logo-card--partner,
.r4m-home .home-shareholders-logos .client-logo-card--shareholder {
  flex: none;
  max-width: none;
  min-height: 112px;
  padding: 1.25rem 1.15rem;
  border: 0;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  border-radius: 0;
  box-shadow: none;
  background: #fff;
  transition: background 0.28s ease;
}

.r4m-home .client-logo-card img {
  width: 100%;
  max-width: 11rem; /* ~176px */
  height: 3.5rem; /* 56px — shared optical slot */
  margin: 0 auto;
  object-fit: contain;
  object-position: center;
  filter: grayscale(1) opacity(0.62);
  transition:
    filter 0.35s ease,
    opacity 0.35s ease,
    transform 0.35s ease;
}

/* Tall source art was cropped to mueller-gleisbau-wall.svg — same slot as others */

.r4m-home .client-logo-card:hover,
.r4m-home .client-logo-card:focus-visible,
.r4m-home .home-partners-logos .client-logo-card--partner:hover,
.r4m-home .home-shareholders-logos .client-logo-card--shareholder:hover {
  border-color: var(--line);
  box-shadow: none;
  transform: none;
  background: #fafbfc;
}

.r4m-home .client-logo-card:hover img,
.r4m-home .client-logo-card:focus-visible img {
  filter: grayscale(0) opacity(1);
  transform: scale(1.03);
}

.r4m-home .client-logo-card--on-dark {
  background: #fff;
  border-color: var(--line);
  box-shadow: none;
}

.r4m-home .client-logo-card--on-dark img {
  filter: grayscale(1) opacity(0.62);
}

.r4m-home .client-logo-card--on-dark:hover img,
.r4m-home .client-logo-card--on-dark:focus-visible img {
  filter: grayscale(0) opacity(1);
}

.r4m-home .client-logo-card--text {
  color: var(--muted);
  font-weight: 600;
  font-size: 0.84rem;
  letter-spacing: 0.01em;
}

.r4m-home .client-logo-card--cta,
.r4m-home .client-logo-card--partner-cta {
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: #f8f9fb;
  color: var(--text);
}

.r4m-home .client-logo-card--cta:hover,
.r4m-home .client-logo-card--cta:focus-visible,
.r4m-home .client-logo-card--partner-cta:hover,
.r4m-home .client-logo-card--partner-cta:focus-visible {
  background: #fff7f2;
  color: var(--black);
}

.r4m-home .client-logo-card--cta .client-logo-card__label,
.r4m-home .client-logo-card--partner-cta .client-logo-card__label {
  position: relative;
  padding-bottom: 0.35rem;
}

.r4m-home .client-logo-card--cta .client-logo-card__label::after,
.r4m-home .client-logo-card--partner-cta .client-logo-card__label::after {
  content: "";
  display: block;
  width: 1.5rem;
  height: 2px;
  margin: 0.45rem auto 0;
  background: var(--orange);
  transition: width 0.28s ease;
}

.r4m-home .client-logo-card--cta:hover .client-logo-card__label::after,
.r4m-home .client-logo-card--cta:focus-visible .client-logo-card__label::after,
.r4m-home .client-logo-card--partner-cta:hover .client-logo-card__label::after,
.r4m-home .client-logo-card--partner-cta:focus-visible .client-logo-card__label::after {
  width: 2.5rem;
}

.r4m-home .client-logo-card--cta-lg {
  min-height: 112px;
}

.r4m-home .client-logo-card--cta-lg .client-logo-card__label {
  font-size: 0.92rem;
  line-height: 1.35;
  max-width: 11rem;
}

.r4m-home .client-logo-card--partner-cta {
  min-height: 112px;
}

.r4m-home .client-wall-carousel {
  margin-top: 0.85rem;
}

.r4m-home .client-wall-viewport {
  overflow: hidden;
  border: 1px solid var(--line);
  background: #fff;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 2.5%, #000 97.5%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 2.5%, #000 97.5%, transparent);
}

.r4m-home .client-wall-track {
  display: flex;
  width: max-content;
  animation: r4m-logo-marquee var(--r4m-logo-marquee-duration, 90s) linear infinite;
  will-change: transform;
}

.r4m-home .client-wall-set {
  display: flex;
  flex-shrink: 0;
}

.r4m-home .client-wall-carousel .client-logo-card {
  flex: 0 0 168px;
  width: 168px;
  min-height: 96px;
  padding: 1rem 1.05rem;
  border-bottom: 0;
}

.r4m-home .client-wall-viewport:hover .client-wall-track,
.r4m-home .client-wall-viewport:focus-within .client-wall-track {
  animation-play-state: paused;
}

.r4m-home .client-wall-cta-wrap {
  margin: 0.85rem 0 0;
  text-align: center;
}

.r4m-home .client-wall-cta {
  display: inline-block;
  color: var(--orange);
  font-weight: 700;
  font-size: 0.95rem;
  text-decoration: none;
  border-bottom: 2px solid var(--orange);
  padding-bottom: 0.12rem;
}

.r4m-home .client-wall-cta:hover,
.r4m-home .client-wall-cta:focus-visible {
  color: var(--black);
  border-bottom-color: var(--black);
}

.r4m-home .client-wall-carousel.is-static .client-wall-track {
  animation: none;
  transform: none;
}

.r4m-home .client-wall-carousel.is-static .client-wall-set[aria-hidden="true"] {
  display: none;
}

@keyframes r4m-logo-marquee {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(calc(-1 * var(--r4m-logo-set-width, 50%)));
  }
}

@media (prefers-reduced-motion: reduce) {
  .r4m-home .client-logo-card,
  .r4m-home .client-logo-card img,
  .r4m-home .client-logo-card--cta .client-logo-card__label::after,
  .r4m-home .client-logo-card--partner-cta .client-logo-card__label::after {
    transition: none;
  }

  .r4m-home .client-logo-card:hover img,
  .r4m-home .client-logo-card:focus-visible img {
    transform: none;
  }

  .r4m-home .client-wall-track {
    animation: none;
    transform: none;
  }

  .r4m-home .client-wall-set[aria-hidden="true"] {
    display: none;
  }
}

.hero-lead {
  margin-top: 1.15rem;
  max-width: 52ch;
  font-size: clamp(1.02rem, 2.1vw, 1.22rem);
  line-height: 1.5;
  font-weight: 400;
}

.home-flow-kicker {
  margin: 0 0 0.35rem;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #7a8494;
}

.home-flow-kicker::before {
  content: "";
  display: inline-block;
  width: 2.25rem;
  height: 3px;
  margin-right: 0.55rem;
  vertical-align: middle;
  background: var(--r4m-logo-gradient);
}

/* Orange accent dash above section titles */
.r4m-home .section > .container > h2::before,
.r4m-home .home-vte-title::before,
main:not(.r4m-home) .container.panel > h1::before,
main:not(.r4m-home) :is(
  .section > h2:not(.r4m-org-block__title),
  .panel > h2:not(.r4m-org-block__title),
  .card > h3,
  .ausbildungen-hub__block > h2:not(.home-flow-kicker),
  .ausbildungen-product__title,
  .ausbildungen-cat-card__title,
  .r4m-tw-title
)::before {
  content: "";
  display: block;
  width: 3rem;
  height: 3px;
  margin: 0 0 0.55rem;
  background: var(--r4m-logo-gradient);
}

.home-flow-kicker--on-dark {
  color: rgba(255, 255, 255, 0.72);
}

.home-flow-kicker--on-dark::before {
  background: linear-gradient(90deg, #f59e66 0%, #ec7e34 50%, #f59e66 100%);
}

.home-strip-lede {
  margin: 0 0 1.25rem;
  max-width: 62ch;
  font-size: 1rem;
  line-height: 1.5;
  color: #4a5568;
}

.home-strip-lede--on-dark {
  color: rgba(255, 255, 255, 0.85);
}

.home-strip--trust {
  background: var(--bg);
  border-top: 3px solid var(--orange);
  padding-top: clamp(1.5rem, 3vw, 2.25rem);
  padding-bottom: clamp(1.5rem, 3vw, 2.25rem);
}

.home-strip--trust .trust-strip-inner {
  margin-top: 0.35rem;
}

.home-strip--trust .home-flow-kicker {
  text-align: center;
}

.home-strip--trust .home-flow-kicker::before {
  display: block;
  width: 3rem;
  margin: 0 auto 0.55rem;
}

.home-strip--rooms {
  background: var(--bg);
}

.home-strip--rooms .home-rooms-strip__inner {
  padding-top: 0.25rem;
}

.home-strip--rooms h2 {
  margin: 0 0 1.15rem;
}

.home-rooms-strip__lede {
  margin: 0 0 1rem;
  max-width: 52ch;
  color: #4b5563;
  line-height: 1.55;
  font-size: 1.05rem;
}

.home-rooms-strip__highlights {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 0 0 1.35rem;
  padding: 0;
  list-style: none;
}

.home-rooms-strip__highlights li {
  padding: 0.35rem 0.7rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: 0.88rem;
  font-weight: 500;
  color: #374151;
  background: var(--bg);
}

.home-rooms-strip__carousel {
  --r4m-rooms-visible: 3;
  --r4m-rooms-gap: 0.75rem;
  position: relative;
  display: block;
  width: 100%;
  margin: 0 0 1.25rem;
}

.home-rooms-strip__viewport {
  position: relative;
  overflow: hidden;
  min-width: 0;
  container-type: inline-size;
}

.home-rooms-strip__viewport::before,
.home-rooms-strip__viewport::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: clamp(3.5rem, 12%, 6.5rem);
  z-index: 3;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.25s ease;
}

.home-rooms-strip__viewport::before {
  left: 0;
  background: linear-gradient(90deg, var(--bg) 0%, color-mix(in srgb, var(--bg) 88%, transparent) 38%, transparent 100%);
}

.home-rooms-strip__viewport::after {
  right: 0;
  background: linear-gradient(270deg, var(--bg) 0%, color-mix(in srgb, var(--bg) 92%, transparent) 42%, transparent 100%);
}

.home-rooms-strip__carousel:not(.is-start) .home-rooms-strip__viewport::before,
.home-rooms-strip__carousel:not(.is-end) .home-rooms-strip__viewport::after {
  opacity: 1;
}

.home-rooms-strip__track {
  display: flex;
  align-items: stretch;
  gap: var(--r4m-rooms-gap);
  transition: transform 0.4s ease;
}

.home-rooms-strip__track .r4m-room-card {
  flex: 0 0 calc((100cqw - (var(--r4m-rooms-visible) - 1) * var(--r4m-rooms-gap)) / var(--r4m-rooms-visible));
  width: auto;
  max-width: calc((100cqw - (var(--r4m-rooms-visible) - 1) * var(--r4m-rooms-gap)) / var(--r4m-rooms-visible));
  text-decoration: none;
  color: inherit;
}

.home-rooms-strip__track .r4m-room-card__media img {
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
}

.home-rooms-strip__nav {
  position: absolute;
  top: 22%;
  z-index: 5;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.55rem;
  height: 2.55rem;
  padding: 0;
  border: 2px solid #fff;
  background: var(--dark);
  color: #fff;
  font-size: 1.85rem;
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 6px 18px rgba(17, 24, 39, 0.28);
}

.home-rooms-strip__nav--prev {
  left: 0.65rem;
}

.home-rooms-strip__nav--next {
  right: 0.65rem;
}

.home-rooms-strip__nav:hover,
.home-rooms-strip__nav:focus-visible {
  background: var(--orange);
  color: #fff;
}

.home-rooms-strip__nav:disabled {
  opacity: 0;
  pointer-events: none;
}

.home-rooms-strip__meta {
  font-size: 0.82rem;
  color: #6b7280;
}

.home-rooms-strip__actions {
  margin-top: 0;
}

.homev2-rooms-wrap .home-strip--rooms {
  border-top: 0;
  background: var(--bg);
}

.homev2-rooms-wrap .home-strip--rooms .home-rooms-strip__inner {
  padding-top: 0;
}

@media (max-width: 960px) {
  .home-rooms-strip__carousel {
    --r4m-rooms-visible: 2;
  }
}

@media (max-width: 640px) {
  .home-rooms-strip__carousel {
    --r4m-rooms-visible: 1;
  }

  .home-rooms-strip__nav {
    width: 2.15rem;
    height: 2.15rem;
    font-size: 1.65rem;
    top: 20%;
  }

  .home-rooms-strip__nav--prev {
    left: 0.4rem;
  }

  .home-rooms-strip__nav--next {
    right: 0.4rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .home-rooms-strip__track {
    transition: none;
  }
}

.home-strip--why {
  background: var(--bg);
  border-top: 1px solid var(--line);
}


.home-strip--why .value-cards {
  margin-top: 0.25rem;
}

.home-strip--clients {
  background: var(--bg);
  border-top: 1px solid var(--line);
}

.home-strip--clients .client-wall {
  margin-top: 0.5rem;
  padding: 1.25rem 1.35rem 1.35rem;
  border: 1px solid #e1e6ef;
  border-radius: 0;
  border-left: 4px solid var(--orange);
  background: #fff;
  box-shadow: 0 8px 24px rgba(26, 34, 48, 0.06);
}

.home-strip--partners {
  background: linear-gradient(160deg, #1e2633 0%, #2a3344 48%, #1a2230 100%);
  color: #e8ecf2;
  border-top: none;
}

.home-strip--partners .home-flow-kicker {
  color: rgba(255, 255, 255, 0.7);
}

.home-partners-logos {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  gap: 0.75rem;
  margin-top: 0.25rem;
}

.home-partners-logos .client-logo-card--partner {
  flex: 1 1 200px;
  max-width: 280px;
  background: #fff;
  border-color: #d8dee8;
}

.section {
  padding: 3rem 0;
}

.section h2 {
  margin: 0 0 1rem;
  font-family: Roboto, Arial, sans-serif;
  font-size: clamp(1.4rem, 3.5vw, 2.2rem);
  line-height: 1.15;
  font-weight: 700;
  color: var(--black);
  letter-spacing: -0.01em;
}

.cards {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1rem;
}

.cards-2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.cards-3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.category-cards {
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

.orbit-wrap {
  position: relative;
  min-height: 560px;
  border: 1px solid var(--line);
  background: #fff;
  overflow: hidden;
}

.orbit-core {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: min(46vw, 440px);
  max-width: 88%;
  padding: 1rem;
  border: 1px solid var(--line);
  background: #fff;
  box-shadow: 0 12px 30px rgba(17, 24, 39, 0.08);
}

.orbit-core img {
  width: 100%;
  height: auto;
  display: block;
}

.orbit-core h3 {
  margin: 0;
  font-size: clamp(1.35rem, 2.1vw, 1.8rem);
  line-height: 1.1;
  color: var(--black);
}

.orbit-core p {
  margin: 0.55rem 0 0;
  font-size: 0.95rem;
  color: #596172;
}

.orbit-item {
  position: absolute;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--line);
  background: #fff;
  box-shadow: 0 8px 20px rgba(17, 24, 39, 0.1);
  transition: transform 0.18s ease, box-shadow 0.18s ease;
  text-decoration: none;
}

.orbit-item:hover,
.orbit-item:focus-visible {
  transform: translateY(-3px) scale(1.02);
  box-shadow: 0 14px 28px rgba(17, 24, 39, 0.16);
}

.orbit-item img {
  width: 100%;
  height: auto;
  display: block;
}

.orbit-pill {
  padding: 0.7rem 1rem;
  font-weight: 600;
  color: var(--black);
}

.orbit-item-1 {
  left: 4%;
  top: 16%;
  width: min(30vw, 290px);
  animation: orbit-float-a 4.4s ease-in-out infinite;
}

.orbit-item-2 {
  right: 4%;
  top: 13%;
  width: min(34vw, 330px);
  animation: orbit-float-b 5s ease-in-out infinite;
}

.orbit-item-3 {
  left: 50%;
  bottom: 9%;
  transform: translateX(-50%);
  width: min(30vw, 290px);
  animation: orbit-float-c 4.8s ease-in-out infinite;
}

.orbit-item-4 {
  left: 7%;
  bottom: 22%;
  width: min(30vw, 290px);
  animation: orbit-float-b 5.2s ease-in-out infinite;
}

.orbit-item-5 {
  right: 8%;
  bottom: 24%;
  width: min(30vw, 290px);
  animation: orbit-float-a 4.6s ease-in-out infinite;
}

@keyframes orbit-float-a {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-8px);
  }
}

@keyframes orbit-float-b {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(7px);
  }
}

@keyframes orbit-float-c {
  0%,
  100% {
    transform: translateX(-50%) translateY(0);
  }
  50% {
    transform: translateX(-50%) translateY(-9px);
  }
}

.card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: 0 2px 10px rgba(17, 24, 39, 0.03);
  padding: 1.15rem;
  transition: box-shadow 0.18s ease;
  position: relative;
  overflow: hidden;
}

/* Angled brand edge on content blocks */
.card::after {
  content: none;
}

/* Selected homepage sections: apply classic cut frame to whole box */
.cards-cut .card {
  clip-path: none;
  border: 1px solid var(--line);
  box-shadow: 0 2px 10px rgba(17, 24, 39, 0.03);
  padding-bottom: 1.15rem;
  transition: 0.18s ease;
}

.cards-cut .card::before {
  content: none;
}

.cards-cut .card:hover,
.cards-cut .card:focus-within {
  box-shadow: var(--shadow);
}

.cards-cut .card::after {
  content: none;
}

.cards-cut .card:hover::after,
.cards-cut .card:focus-within::after {
  content: none;
}

.card h3 {
  margin: 0 0 0.5rem;
  font-size: 1.08rem;
  font-weight: 700;
  color: #1b2330;
}

.card-thumb {
  width: 100%;
  border-radius: 0;
  border: 1px solid var(--line);
  margin-bottom: 0.8rem;
  background: #fff;
  clip-path: none;
}

.card p {
  margin: 0 0 0.8rem;
  color: var(--text);
  font-size: 0.94rem;
  font-weight: 400;
}

.card a {
  color: var(--black);
  font-weight: 500;
  font-size: 0.9rem;
}

.card-link {
  display: block;
  color: inherit;
  text-decoration: none;
  cursor: pointer;
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.card-link:hover,
.card-link:focus-visible {
  transform: translateY(-2px);
  box-shadow: var(--shadow);
}

.card-link::after {
  content: "↗";
  position: absolute;
  top: 0.65rem;
  right: 0.65rem;
  font-size: 0.86rem;
  line-height: 1;
  color: #7b8392;
  pointer-events: none;
}

.card-link:focus-visible {
  outline: 2px solid var(--orange);
  outline-offset: 2px;
}

.category-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 0.9rem;
}

.category-nav a {
  border: 1px solid var(--line);
  padding: 0.45rem 0.7rem;
  font-size: 0.85rem;
  font-weight: 500;
  background: #fff;
}

.course-card {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.course-card p {
  margin: 0;
}

.course-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: stretch;
}

.course-actions .btn {
  width: auto;
}

.link-ghost {
  border-bottom: 1px solid var(--line);
  font-size: 0.88rem;
  padding-bottom: 0.08rem;
}

.course-card details {
  border-top: 1px solid var(--line);
  padding-top: 0.5rem;
}

.course-card summary {
  cursor: pointer;
  font-weight: 500;
  font-size: 0.88rem;
}

.course-card details p {
  margin-top: 0.45rem;
  font-size: 0.9rem;
}

.split {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 1rem;
}

.panel {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1.2rem;
  position: relative;
  overflow: hidden;
}

.quick-finder-actions {
  align-items: center;
}

.quick-finder-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.8rem;
}

.quick-finder label {
  display: block;
  font-weight: 500;
  color: var(--black);
}

.quick-finder select {
  width: 100%;
  margin-top: 0.35rem;
  border: 1px solid #d7dce4;
  border-radius: 0;
  padding: 0.65rem 0.7rem;
  font: inherit;
  background: #fff;
}

.panel::after {
  content: none;
}

.quick-list {
  margin: 0;
  padding-left: 1.2rem;
}

.quick-list li {
  margin-bottom: 0.45rem;
}

.values-band {
  padding-top: 2.2rem;
}

.values-band-intro {
  margin: 0.4rem 0 1rem;
  color: #3f4957;
  max-width: 74ch;
}

.value-cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--r4m-tile-gap);
}

.value-card {
  color: #fff;
  padding: var(--r4m-tile-padding);
  min-height: var(--r4m-tile-min-height);
  display: flex;
  flex-direction: column;
}

.value-card h3 {
  margin: 0 0 1rem;
  font-size: 2rem;
  line-height: 1;
  font-weight: 700;
  text-transform: lowercase;
  letter-spacing: 0.01em;
  color: #fff;
}

.value-card p {
  margin: 0;
  font-size: 1.06rem;
  line-height: 1.42;
  color: #fff;
}

.value-card-1 {
  clip-path: polygon(0 0, 100% 0, 100% 95.5%, 0 100%);
  background: linear-gradient(90deg, #e65a36 0%, #ee9140 100%);
}

.value-card-2 {
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 95.5%);
  background: linear-gradient(90deg, #e9833d 0%, #f09a43 100%);
}

.value-card-3 {
  clip-path: polygon(0 0, 100% 0, 100% 95.5%, 0 100%);
  background: linear-gradient(90deg, #ef8f3f 0%, #e85a33 100%);
}

.client-wall {
  margin-top: 0.75rem;
}

.client-wall-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(152px, 1fr));
  gap: 0.65rem;
}

.client-logo-card {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 76px;
  padding: 0.55rem 0.75rem;
  border: 1px solid #d8dee8;
  border-radius: 10px;
  background: #fff;
  color: #1f2a3a;
  text-decoration: none;
  box-shadow: 0 1px 2px rgba(26, 34, 48, 0.04);
  transition: border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
}

.client-logo-card:hover {
  border-color: #c5cedc;
  box-shadow: 0 6px 18px rgba(26, 34, 48, 0.08);
  transform: translateY(-2px);
}

.client-logo-card:focus-visible {
  outline: 2px solid #e65a36;
  outline-offset: 2px;
}

.client-logo-card--on-dark {
  background: linear-gradient(148deg, #1a2434 0%, #2a3548 55%, #1e2838 100%);
  border-color: #3d4d66;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12);
}

.client-logo-card--on-dark:hover {
  border-color: #556a88;
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.18);
}

.client-logo-card--on-dark img {
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.25));
}

.client-logo-card img {
  width: 100%;
  max-height: 48px;
  object-fit: contain;
  display: block;
}

.client-logo-card--text {
  text-align: center;
  font-weight: 600;
  font-size: 0.86rem;
  line-height: 1.35;
  hyphens: auto;
  padding: 0.65rem 0.7rem;
}

.client-logo-card__label {
  display: block;
}

.client-logo-card--partner {
  flex: 1 1 160px;
  max-width: 220px;
}

.client-logo-card--partner.client-logo-card--text {
  max-width: 200px;
}

.client-logo-card--cta {
  border-style: dashed;
  border-color: #c5cedc;
  background: #f6f8fa;
  color: #3d4a5c;
}

.client-logo-card--cta:hover,
.client-logo-card--cta:focus-visible {
  border-color: var(--orange);
  background: #fff;
  color: var(--black);
}

.client-logo-card--cta .client-logo-card__label {
  font-size: 0.82rem;
  font-weight: 600;
  line-height: 1.35;
}

.r4m-logo-action-fieldset {
  margin: 0 0 0.85rem;
  padding: 0.65rem 0.75rem;
  border: 1px solid #d7dce4;
  border-radius: var(--radius-sm);
}

.r4m-logo-action-fieldset legend {
  padding: 0 0.25rem;
  font-weight: 600;
  font-size: 0.9rem;
}

.r4m-logo-action-option {
  display: block;
  margin: 0.35rem 0 0;
  font-size: 0.95rem;
  cursor: pointer;
}

.r4m-logo-action-option input {
  width: auto;
  margin: 0 0.45rem 0 0;
  vertical-align: middle;
}

.r4m-choice-fieldset {
  margin: 0 0 1rem;
  padding: 0;
  border: 0;
  min-width: 0;
}

.r4m-choice-fieldset legend {
  margin: 0 0 0.55rem;
  padding: 0;
  font-weight: 700;
  color: var(--text);
}

.r4m-choice-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem;
}

.r4m-choice-btn {
  position: relative;
  display: inline-flex;
  margin: 0;
  cursor: pointer;
}

.r4m-choice-btn input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
  margin: -1px;
  clip: rect(0 0 0 0);
  overflow: hidden;
}

.r4m-choice-btn span {
  display: inline-block;
  padding: 0.7rem 1rem;
  border: 1px solid #d7dce4;
  background: #fff;
  color: var(--text);
  font-weight: 600;
  font-size: 0.92rem;
  line-height: 1.25;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.r4m-choice-btn:hover span {
  border-color: var(--orange);
  color: var(--orange);
}

.r4m-choice-btn input:checked + span {
  background: var(--orange);
  border-color: var(--orange);
  color: #fff;
}

.r4m-choice-btn input:focus-visible + span {
  outline: 2px solid var(--orange);
  outline-offset: 2px;
}

.r4m-client-logo-form-intro {
  margin: 0 0 1rem;
  max-width: 42rem;
  line-height: 1.5;
}

.r4m-form-notice {
  margin: 0 0 1rem;
  padding: 0.65rem 0.75rem;
  border: 1px solid #d7dce4;
}

.r4m-form-notice--success {
  background: #f0f7f0;
  border-color: #c5dcc5;
}

.r4m-form-notice--error {
  background: #fdf3f3;
  border-color: #e8c5c5;
}

.r4m-form input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="submit"]):not([type="button"]),
.r4m-form select,
.r4m-form textarea {
  width: 100%;
  border: 1px solid #d7dce4;
  border-radius: var(--radius-sm);
  padding: 0.75rem 0.8rem;
  font: inherit;
  margin-bottom: 0.7rem;
}

.form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.7rem;
}

.r4m-ersatzdokumente-form__fieldset {
  border: 1px solid #d7dce4;
  border-radius: var(--radius-sm);
  margin: 0 0 1.25rem;
  padding: 0.85rem 1rem 1rem;
}

.r4m-ersatzdokumente-form__legend {
  font-weight: 700;
  padding: 0 0.35rem;
}

.r4m-ersatzdokumente-form__type-options {
  display: grid;
  gap: 0.65rem;
  margin-top: 0.5rem;
}

.r4m-ersatzdokumente-form__type-option {
  display: flex;
  align-items: flex-start;
  gap: 0.55rem;
  cursor: pointer;
  line-height: 1.45;
}

.r4m-ersatzdokumente-form__type-option input {
  width: auto;
  margin: 0.2rem 0 0;
  flex-shrink: 0;
}

.r4m-ersatzdokumente-form__price {
  display: block;
  margin-top: 0.15rem;
  color: var(--color-muted, #5c6573);
  font-size: 0.95rem;
}

.r4m-ersatzdokumente-form .r4m-form-field--full {
  display: block;
  width: 100%;
  margin-top: 0.85rem;
}

.r4m-ersatzdokumente-form__heading {
  margin: 1.35rem 0 0.35rem;
  font-size: 1.05rem;
}

.r4m-ersatzdokumente-form__hint {
  margin: 0 0 0.65rem;
  max-width: 42rem;
  line-height: 1.5;
  color: var(--color-muted, #5c6573);
  font-size: 0.95rem;
}

.r4m-ersatzdokumente-form__photo {
  margin-top: 0.5rem;
}

.r4m-ersatzdokumente-form__terms {
  display: flex;
  align-items: flex-start;
  gap: 0.55rem;
  margin: 1rem 0 0.5rem;
  font-size: 0.92rem;
  line-height: 1.45;
  color: #374151;
}

.r4m-ersatzdokumente-form__terms input {
  width: 1.05rem;
  height: 1.05rem;
  margin: 0.15rem 0 0;
  padding: 0;
  flex-shrink: 0;
  accent-color: var(--orange, #e85d04);
}

.r4m-ersatzdokumente-form__total {
  margin: 0.5rem 0 0;
  font-size: 0.92rem;
  line-height: 1.45;
  font-weight: 700;
}

/* CMS tables and wide embeds in page content */
main.section .container.panel :is(table, .wp-block-table) {
  display: block;
  width: 100%;
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

main.section .container.panel :is(table, .wp-block-table) table {
  width: 100%;
  min-width: 28rem;
}

main.section .container.panel > div :is(img, video) {
  max-width: 100%;
  height: auto;
}

main.section .container.panel > div iframe {
  max-width: 100%;
}

.site-footer {
  margin-top: 2.5rem;
  max-width: 100%;
  background: var(--dark);
  color: #f4f4f3;
  padding: 2.2rem 0 1rem;
  position: relative;
  overflow-x: clip;
}

/* Angled transition into footer (+1px height avoids hairline seam) */
.site-footer::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: -44px;
  height: 45px;
  background: var(--dark);
  clip-path: polygon(0 100%, 100% 30%, 100% 100%);
  pointer-events: none;
  z-index: 0;
}

.site-footer__inner {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 1.75rem;
}

.site-footer__main {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1.95fr);
  gap: 2rem 2.5rem;
  align-items: start;
}

.site-footer__lead {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.site-footer__brand {
  display: inline-block;
  margin: 0;
  font-size: 1.2rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: #fff;
  text-decoration: none;
}

.site-footer__brand:hover,
.site-footer__brand:focus-visible {
  color: #fff;
  outline: none;
  text-decoration: underline;
  text-decoration-color: var(--orange);
  text-underline-offset: 4px;
}

.footer-contact-panel {
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: rgba(0, 0, 0, 0.12);
}

.footer-contact-row {
  display: flex;
  align-items: stretch;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.footer-contact-row:last-child {
  border-bottom: none;
}

.footer-contact-row__action {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  align-items: center;
  min-height: 2.85rem;
  padding: 0.65rem 0.9rem;
  font-size: 0.92rem;
  font-weight: 500;
  line-height: 1.35;
  color: rgba(255, 255, 255, 0.94);
  text-decoration: none;
  transition:
    background 0.16s ease,
    color 0.16s ease;
}

.footer-contact-row__action:hover,
.footer-contact-row__action:focus-visible {
  background: rgba(255, 255, 255, 0.06);
  color: #fff;
  outline: none;
}

.footer-contact-row__copy {
  flex: 0 0 2.85rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.25rem;
  margin: 0;
  padding: 0 0.35rem;
  border: 0;
  border-left: 1px solid rgba(255, 255, 255, 0.1);
  background: transparent;
  font: inherit;
  color: rgba(255, 255, 255, 0.72);
  cursor: pointer;
  transition:
    background 0.16s ease,
    color 0.16s ease;
}

.footer-contact-row__copy-icon {
  display: block;
}

.footer-contact-row__copy-feedback {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.footer-contact-row__copy:hover,
.footer-contact-row__copy:focus-visible {
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
  outline: none;
}

.footer-contact-row__copy[data-copied="true"] {
  background: rgba(80, 140, 80, 0.28);
  color: #e8f5e8;
}

.footer-contact-row__copy[data-copied="true"] .footer-contact-row__copy-icon {
  display: none;
}

.footer-contact-row__copy[data-copied="true"] .footer-contact-row__copy-feedback {
  position: static;
  width: auto;
  height: auto;
  margin: 0;
  overflow: visible;
  clip: auto;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.02em;
}

/* Kontakt page contact details (light theme) */
.r4m-contact-details {
  margin: 0 0 1.75rem;
  max-width: 36rem;
}

.r4m-contact-details__name {
  margin: 0 0 0.65rem;
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--dark);
}

.r4m-contact-details__rows {
  border: 1px solid var(--line);
  background: var(--white);
}

.r4m-contact-row {
  display: flex;
  align-items: stretch;
  border-bottom: 1px solid var(--line);
}

.r4m-contact-row:last-child {
  border-bottom: none;
}

.r4m-contact-row__value {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  align-items: center;
  min-height: 2.85rem;
  padding: 0.65rem 0.9rem;
  font-size: 0.95rem;
  font-weight: 500;
  line-height: 1.35;
  color: var(--text);
}

.r4m-contact-row__value--link {
  text-decoration: none;
  color: var(--text);
  transition: color 0.16s ease, background 0.16s ease;
}

.r4m-contact-row__value--link:hover,
.r4m-contact-row__value--link:focus-visible {
  color: var(--orange);
  background: rgba(236, 126, 52, 0.06);
  outline: none;
}

.r4m-contact-row__aside {
  flex: 0 0 2.85rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.25rem;
  margin: 0;
  padding: 0 0.35rem;
  border: 0;
  border-left: 1px solid var(--line);
  background: transparent;
  font: inherit;
  color: var(--muted);
  text-decoration: none;
  cursor: pointer;
  transition: background 0.16s ease, color 0.16s ease;
}

.r4m-contact-row__aside:hover,
.r4m-contact-row__aside:focus-visible {
  background: rgba(236, 126, 52, 0.08);
  color: var(--orange);
  outline: none;
}

.r4m-contact-row__icon {
  display: block;
}

.r4m-contact-row__copy-feedback {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.r4m-contact-row__copy[data-copied="true"] {
  background: rgba(80, 140, 80, 0.14);
  color: #2f6b2f;
}

.r4m-contact-row__copy[data-copied="true"] .r4m-contact-row__icon {
  display: none;
}

.r4m-contact-row__copy[data-copied="true"] .r4m-contact-row__copy-feedback,
.r4m-contact-row__copy[data-copied="true"] .footer-contact-row__copy-feedback {
  position: static;
  width: auto;
  height: auto;
  margin: 0;
  overflow: visible;
  clip: auto;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.02em;
}

.site-footer__nav {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1.25rem 1.5rem;
}

.footer-nav-col__title {
  margin: 0 0 0.65rem;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.68);
}

.footer-nav-col__title::before {
  content: "";
  display: block;
  width: 2.25rem;
  height: 3px;
  margin-bottom: 0.5rem;
  background: linear-gradient(90deg, #f59e66 0%, #ec7e34 50%, #f59e66 100%);
}

.footer-nav-col ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.footer-nav-col li {
  margin: 0 0 0.4rem;
}

.footer-nav-col li:last-child {
  margin-bottom: 0;
}

.footer-nav-col a {
  font-size: 0.9rem;
  color: rgba(255, 255, 255, 0.88);
  text-decoration: none;
  transition: color 0.16s ease;
}

.footer-nav-col a:hover,
.footer-nav-col a:focus-visible {
  color: #fff;
  outline: none;
  text-decoration: underline;
  text-decoration-color: rgba(236, 126, 52, 0.65);
  text-underline-offset: 3px;
}

.site-footer__social {
  display: flex;
  align-items: center;
  gap: 0.55rem;
}

.site-footer__social-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.4rem;
  height: 2.4rem;
  color: rgba(255, 255, 255, 0.9);
  border: 1px solid rgba(255, 255, 255, 0.18);
  background: rgba(0, 0, 0, 0.12);
  text-decoration: none;
}

.site-footer__social-link:hover,
.site-footer__social-link:focus-visible {
  color: #fff;
  border-color: var(--orange);
  background: rgba(236, 126, 52, 0.2);
  outline: none;
}

.site-footer__social-link svg {
  display: block;
  width: 1.15rem;
  height: 1.15rem;
}

.site-footer__bar {
  padding-top: 1rem;
  border-top: 1px solid rgba(255, 255, 255, 0.14);
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 1rem 1.5rem;
  flex-wrap: wrap;
}

.site-footer__copy,
.site-footer__tagline {
  margin: 0;
  font-size: 0.82rem;
  line-height: 1.45;
  color: rgba(255, 255, 255, 0.62);
}

.site-footer__tagline {
  max-width: 36rem;
  text-align: right;
}

@media (max-width: 1280px) {
  .brand {
    max-width: min(52vw, 168px);
    grid-column: 1;
    grid-row: 1;
  }

  .brand img {
    max-height: 28px;
  }

  /* Compact bar: logo + menu icon only; CTAs only inside open menu panel */
  .header-inner {
    grid-template-columns: 1fr auto;
    grid-template-rows: auto;
    gap: 0.25rem 0.45rem;
    row-gap: 0;
    min-height: 0;
    padding: 0.3rem 0;
    align-items: center;
  }

  .header-inner > .header-tools {
    display: none !important;
  }

  .header-inner > .menu-toggle {
    grid-column: 2;
    grid-row: 1;
    justify-self: end;
    align-self: center;
    position: relative;
    z-index: 35;
  }

  .menu-toggle {
    display: inline-flex;
    position: relative;
    z-index: 35;
    align-items: center;
    justify-content: center;
    padding: 0.35rem 0.55rem;
    font-size: 1.15rem;
    line-height: 1;
    min-height: 36px;
    min-width: 36px;
  }

  .menu-toggle__label {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }

  .menu-wrap.is-open .header-mobile-cta {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 0.45rem;
    padding: 0.55rem 0.6rem 0.65rem;
    margin: 0;
    border-bottom: 1px solid var(--line);
    background: #f7f9fc;
  }

  .menu-wrap.is-open .header-mobile-cta .btn {
    width: auto;
    min-height: 40px;
    padding: 0.5rem 0.65rem;
    font-size: 0.8rem;
    text-align: center;
  }

  .menu-wrap.is-open .header-mobile-cta .btn-primary {
    flex: 1 1 auto;
    min-width: 0;
  }

  .menu-wrap.is-open .header-mobile-cta .btn-e4learn {
    justify-content: center;
    padding: 0.45rem 0.55rem;
  }

  .menu-wrap.is-open .header-mobile-cta .btn-e4learn__label {
    font-size: 0.78rem;
  }

  main.section :target,
  .ausbildungen-rich-course:target {
    scroll-margin-top: 3.5rem;
  }

  .header-inner > .menu-wrap {
    grid-column: 1 / -1;
    grid-row: 2;
    width: 100%;
    display: none;
  }

  .menu-wrap.is-open {
    display: block;
  }

  .menu {
    background: #f7f9fc;
    border: 1px solid var(--line);
    border-radius: 0;
    padding: 0.6rem;
  }

  .menu > ul {
    justify-content: flex-start;
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 0.65rem 1rem;
  }

  .has-mega,
  .has-submenu {
    padding-bottom: 0;
    margin-bottom: 0;
  }

  .submenu {
    position: static;
    min-width: 0;
    margin-top: 0.4rem;
    box-shadow: none;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: none;
    display: none;
  }

  .submenu::before {
    content: none;
  }

  .has-submenu.is-open .submenu {
    display: block;
  }

  .mega-menu,
  .mega-menu.mega-menu--compact {
    position: static;
    width: 100%;
    min-width: 0;
    max-width: none;
    left: auto;
    transform: none;
    box-shadow: none;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    display: none;
    grid-template-columns: 1fr;
    margin-top: 0.4rem;
    padding: 0.4rem 0 0;
  }

  .mega-menu::before {
    content: none;
  }

  .has-mega:hover .mega-menu,
  .has-mega:focus-within .mega-menu {
    transform: none;
  }

  .has-mega.is-open .mega-menu {
    display: grid;
  }

  .cards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .orbit-wrap {
    min-height: 500px;
  }

  .orbit-item-1 {
    left: 3%;
    top: 8%;
    width: min(44vw, 320px);
  }

  .orbit-item-2 {
    right: 3%;
    top: 26%;
    width: min(47vw, 340px);
  }

  .orbit-item-3 {
    left: 50%;
    bottom: 6%;
    width: min(46vw, 320px);
  }

  .orbit-item-4 {
    left: 5%;
    bottom: 30%;
  }

  .orbit-item-5 {
    right: 5%;
    bottom: 42%;
  }

  .trust-strip-inner {
    grid-template-columns: 1fr;
  }

  .value-cards {
    grid-template-columns: 1fr;
  }

  .client-wall-grid {
    grid-template-columns: repeat(auto-fill, minmax(128px, 1fr));
  }

  .hero-grid {
    grid-template-columns: 1fr;
  }

  .hero-bg-full {
    min-height: min(74vh, 680px);
  }

  .split {
    grid-template-columns: 1fr;
  }

  .site-footer__main {
    grid-template-columns: 1fr;
  }

  .site-footer__nav {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .site-footer__tagline {
    text-align: left;
  }

  .menu-wrap.is-open .lang-switch--drawer {
    display: flex;
    gap: 0.5rem;
    padding: 0.55rem 0.75rem;
    border-bottom: 1px solid var(--line);
    font-size: 0.85rem;
  }
}

/* Wide desktop: full header bar (unchanged layout) */
@media (min-width: 1281px) {
  .menu-toggle {
    display: none;
  }

  .menu-wrap {
    display: block;
    grid-column: auto;
    width: auto;
  }

  .header-inner > .header-tools {
    display: flex;
  }

  .header-mobile-cta {
    display: none;
  }
}

@media (max-width: 700px) {
  .header-cta .btn,
  .hero-actions .btn,
  .course-actions .btn,
  .r4m-pf-actions-row .btn,
  .homev2-actions .btn,
  .r4m-tw-toolbar .btn,
  .r4m-tw-result__ctas .btn {
    width: 100%;
    text-align: center;
  }

  .menu-wrap.is-open .header-mobile-cta .btn {
    width: auto;
  }

  .btn-e4learn {
    justify-content: center;
  }

  .cards,
  .cards-2,
  .cards-3,
  .site-footer__nav,
  .form-grid {
    grid-template-columns: 1fr;
  }

  .orbit-wrap {
    min-height: auto;
    padding: 0.9rem;
    display: grid;
    gap: 0.7rem;
  }

  .orbit-core,
  .orbit-item,
  .orbit-item-1,
  .orbit-item-2,
  .orbit-item-3,
  .orbit-item-4,
  .orbit-item-5 {
    position: static;
    width: 100%;
    transform: none;
    animation: none;
  }

  .orbit-core {
    max-width: none;
  }

  .quick-finder-grid {
    grid-template-columns: 1fr;
  }

  .card-link {
    padding-bottom: 1.9rem;
  }

  .card-link::before {
    content: "Tippen zum Öffnen";
    position: absolute;
    left: 1.15rem;
    bottom: 0.65rem;
    font-size: 0.72rem;
    font-weight: 500;
    color: #6e7583;
    letter-spacing: 0.01em;
    pointer-events: none;
  }
}

/* Produktfinder — Wizard mit grossen Tap-Zielen (Mobil + Desktop) */
.r4m-produktfinder {
  scroll-margin-top: 92px;
}

.r4m-produktfinder--embedded {
  scroll-margin-top: 92px;
  margin: 0;
  padding: 0;
  border: none;
  background: transparent;
  box-shadow: none;
}

.r4m-pf-embed-heading {
  margin: 0 0 0.45rem;
  font-size: clamp(1.05rem, 2.2vw, 1.28rem);
  font-weight: 700;
  color: var(--black);
}

.r4m-pf-intro {
  margin: 0 0 1.15rem;
  font-size: 1.02rem;
  color: var(--muted);
  max-width: 52ch;
}

.r4m-pf-stage {
  margin-top: 1rem;
}

.r4m-pf-q {
  margin: 0 0 0.75rem;
  font-size: 1.22rem;
  font-weight: 700;
  color: var(--black);
}

.r4m-pf-note {
  margin: 0 0 0.75rem;
  color: var(--muted);
}

.r4m-pf-trail {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 1rem;
}

.r4m-pf-chip {
  border: 1px solid var(--line);
  background: var(--bg);
  font: inherit;
  font-size: 0.88rem;
  font-weight: 500;
  padding: 0.35rem 0.75rem;
  cursor: pointer;
  color: var(--text);
  transition:
    background 0.12s ease,
    border-color 0.12s ease;
}

.r4m-pf-chip:hover,
.r4m-pf-chip:focus-visible {
  border-color: var(--orange);
  background: #fff8f2;
}

.r4m-pf-btn {
  border: 1px solid var(--line);
  background: #fff;
  font: inherit;
  font-weight: 600;
  cursor: pointer;
  padding: 0.55rem 1rem;
  color: var(--dark);
}

.r4m-pf-btn:hover,
.r4m-pf-btn:focus-visible {
  border-color: var(--orange);
}

.r4m-pf-btn--lite {
  border-color: transparent;
  background: transparent;
  color: var(--muted);
  padding-left: 0;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.r4m-pf-btn--lite:hover,
.r4m-pf-btn--lite:focus-visible {
  border-color: transparent;
  background: transparent;
  color: var(--orange);
}

.r4m-pf-btn--back {
  display: block;
  width: 100%;
  max-width: 11rem;
  margin-bottom: 1rem;
}

.r4m-pf-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.65rem;
}

@media (min-width: 720px) {
  .r4m-pf-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.75rem;
  }
}

@media (min-width: 1024px) {
  .r4m-pf-grid {
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  }
}

.r4m-pf-choice {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0.25rem;
  text-align: left;
  border: 1px solid #d7dce4;
  background: #fff;
  padding: 1rem 1.1rem;
  font: inherit;
  cursor: pointer;
  min-height: 3.25rem;
  color: var(--text);
  box-shadow: none;
  transition:
    border-color 0.14s ease,
    box-shadow 0.14s ease,
    transform 0.14s ease;
}

.r4m-pf-choice:hover,
.r4m-pf-choice:focus-visible {
  border-color: var(--orange);
  outline: none;
  box-shadow: 0 8px 22px rgba(236, 126, 52, 0.18);
  transform: translateY(-2px);
}

.r4m-pf-choice__title {
  font-weight: 700;
  font-size: 1rem;
  line-height: 1.35;
}

.r4m-pf-choice__meta {
  font-size: 0.82rem;
  font-weight: 400;
  color: var(--muted);
  line-height: 1.35;
}

.r4m-pf-result {
  border-top: 1px solid var(--line);
  padding-top: 1rem;
  margin-top: 0.35rem;
}

.r4m-pf-result-kicker {
  margin: 0 0 0.35rem;
  font-weight: 700;
  font-size: 0.95rem;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.r4m-pf-result-title {
  margin: 0 0 0.5rem;
  font-size: clamp(1.35rem, 4vw, 1.7rem);
}

.r4m-pf-result-sub {
  margin: 0 0 1.25rem;
  font-size: 1rem;
  color: var(--muted);
  max-width: 58ch;
}

.r4m-pf-actions-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.65rem;
  align-items: stretch;
}

.r4m-pf-actions-row .btn {
  flex: 1 1 12rem;
}

.r4m-pf-cta-main {
  flex-grow: 2;
}

.r4m-pf-again {
  margin-top: 1rem;
  width: 100%;
}

.r4m-pf-fallback-tip {
  margin-top: 1rem;
  margin-bottom: 0;
  font-size: 0.92rem;
  color: var(--muted);
}

@media (max-width: 640px) {
  .r4m-pf-actions-row .btn {
    flex: 1 1 100%;
  }
}

/* UX wireframe page */
.wireframe-page {
  display: grid;
  gap: 0.9rem;
}

.wireframe-hero h1 {
  margin: 0.1rem 0 0.5rem;
  font-size: clamp(1.45rem, 3.4vw, 2.2rem);
}

.wireframe-kicker {
  margin: 0;
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #6f7888;
  font-weight: 700;
}

.wireframe-hero p {
  margin: 0 0 0.8rem;
  color: #4d5564;
  max-width: 70ch;
}

.wireframe-chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
}

.wireframe-chip-row span {
  border: 1px solid var(--line);
  background: #f7f9fc;
  padding: 0.3rem 0.6rem;
  font-size: 0.83rem;
  font-weight: 600;
  color: #465063;
}

.wireframe-block h2 {
  margin: 0 0 0.6rem;
  font-size: clamp(1.2rem, 2.5vw, 1.5rem);
}

.wireframe-block h3 {
  margin: 0 0 0.35rem;
  font-size: 1rem;
}

.wireframe-block ul {
  margin: 0;
  padding-left: 1.15rem;
}

.wireframe-block li {
  margin-bottom: 0.35rem;
}

.wireframe-note {
  margin: 0 0 0.7rem;
  color: #596274;
}

.wireframe-grid {
  display: grid;
  gap: 0.7rem;
}

.wireframe-grid article {
  border: 1px solid var(--line);
  background: #fff;
  padding: 0.7rem 0.75rem;
}

.wireframe-grid.two {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.wireframe-grid.three {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.wireframe-flow {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.65rem;
}

.wireframe-step {
  border: 1px solid var(--line);
  background: #fff;
  padding: 0.75rem;
}

.wireframe-step p {
  margin: 0 0 0.55rem;
  color: #596274;
}

.wireframe-button-cloud {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
}

.wireframe-button-cloud button {
  border: 1px solid #d8dee8;
  background: #fff;
  padding: 0.4rem 0.65rem;
  font: inherit;
  font-size: 0.88rem;
  font-weight: 600;
  text-align: left;
}

@media (max-width: 980px) {
  .wireframe-grid.two,
  .wireframe-grid.three,
  .wireframe-flow {
    grid-template-columns: 1fr;
  }
}

/* Homepage V2 (separate production variant) */
.homev2 {
  display: grid;
  gap: 0.85rem;
}

.homev2-hero h1 {
  margin: 0.2rem 0 0.55rem;
  font-size: clamp(1.5rem, 3.8vw, 2.25rem);
  line-height: 1.15;
}

.homev2-kicker {
  margin: 0;
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #727c8e;
  font-weight: 700;
}

.homev2-lead {
  margin: 0 0 0.95rem;
  color: #4f5868;
  max-width: 62ch;
}

.homev2-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  align-items: stretch;
}

.homev2-actions .btn {
  flex: 1 1 14rem;
}

.homev2-hero-note {
  margin: 0.85rem 0 0;
  font-size: 0.88rem;
  line-height: 1.45;
  color: #5c6678;
  max-width: 58ch;
}

.homev2-trust-kicker {
  margin: 0 0 0.45rem;
  text-align: center;
  font-size: 0.78rem;
  line-height: 1.2;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: #737b89;
  font-weight: 600;
}

.homev2-trust-logos {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.homev2-logo-link {
  border: 1px solid #dde3eb;
  background: #fff;
  padding: 0.42rem 0.58rem;
  min-width: 122px;
  min-height: 56px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: border-color 0.14s ease, transform 0.14s ease;
}

.homev2-logo-link:hover,
.homev2-logo-link:focus-visible {
  border-color: var(--orange);
  transform: translateY(-1px);
}

.homev2-logo-link img {
  max-height: 34px;
  max-width: 100%;
  width: auto;
  height: auto;
  display: block;
}

.homev2-proof-row {
  margin-top: 0.6rem;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.45rem;
}

.homev2-proof-row span {
  border: 1px solid var(--line);
  background: #f8f9fc;
  padding: 0.28rem 0.6rem;
  font-size: 0.83rem;
  color: #495367;
  font-weight: 600;
}

.homev2 h2 {
  margin: 0 0 0.62rem;
  font-size: clamp(1.2rem, 2.6vw, 1.58rem);
}

.homev2-guide-deck {
  margin: -0.35rem 0 0.65rem;
  color: #4f5868;
  font-size: 0.98rem;
  line-height: 1.45;
  max-width: 58ch;
}

.homev2-guide-section-label {
  margin: 0 0 0.28rem;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  font-weight: 700;
  color: #727c8e;
}

.homev2-guide-section-label--split {
  margin-top: 1.35rem;
  padding-top: 1rem;
  border-top: 1px solid var(--line);
}

.homev2-guide-step-label--tight {
  margin-top: 0;
  margin-bottom: 0.45rem;
}

.homev2-guide-primary-row {
  margin-bottom: 0.15rem;
}

.homev2-guide-secondary-cta {
  flex: 1 1 16rem;
}

.homev2-guide-hint {
  margin: 0.85rem 0 0;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.35rem 0.65rem;
  font-size: 0.9rem;
  color: #5c6678;
}

.homev2-guide-hint-btn {
  font: inherit;
  font-weight: 600;
  cursor: pointer;
  padding: 0;
  border: none;
  background: none;
  color: var(--orange, #e85a1c);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.homev2-guide-hint-btn:hover,
.homev2-guide-hint-btn:focus-visible {
  color: var(--dark, #273041);
}

.homev2-guide-hint-text {
  font-size: 0.86rem;
  color: #6d7684;
}

.homev2-guide-stage {
  margin-top: 0.45rem;
  min-height: 3.5rem;
}

.homev2-guide-step[hidden] {
  display: none !important;
}

.homev2-guide-step-label {
  margin: 0 0 0.55rem;
  color: #4f5868;
  font-size: 1rem;
  line-height: 1.4;
  max-width: 42ch;
}

.homev2-guide-choice {
  display: flex;
  flex-wrap: wrap;
  gap: 0.65rem;
  margin-top: 0.35rem;
  align-items: stretch;
}

.homev2-guide-choice-stack {
  flex-direction: column;
  flex-wrap: nowrap;
  gap: 0.5rem;
}

.homev2-guide-choice-stack .btn {
  flex: 0 0 auto;
  width: 100%;
  max-width: 100%;
  text-align: center;
  justify-content: center;
  min-height: 2.75rem;
}

.homev2-guide-choice-row {
  display: flex;
  flex-flow: row wrap;
  gap: 0.5rem;
  margin-top: 0.35rem;
  align-items: stretch;
}

.homev2-guide-choice-row .btn {
  flex: 1 1 0;
  min-width: 7.25rem;
  text-align: center;
  justify-content: center;
  min-height: 2.65rem;
}

.homev2-guide-choice-row--three .btn {
  min-width: min(100%, 12rem);
  white-space: normal;
  line-height: 1.3;
  padding-top: 0.6rem;
  padding-bottom: 0.6rem;
}

.homev2-guide-choice-row--pair .btn {
  flex: 1 1 calc(50% - 0.35rem);
  min-width: 10rem;
  white-space: normal;
}

.homev2-guide-choice-footer {
  margin-top: 0.95rem;
  padding-top: 0.95rem;
  border-top: 1px solid var(--line);
}

.homev2-guide-choice-footer .homev2-guide-back {
  width: auto;
  max-width: none;
  flex: 1 1 14rem;
}

.homev2-guide-choice:not(.homev2-guide-choice-stack) .btn {
  flex: 1 1 16rem;
  text-align: center;
  justify-content: center;
  min-height: 2.85rem;
}

.homev2-guide-choice-secondary {
  line-height: 1.35;
  white-space: normal;
  padding-top: 0.65rem;
  padding-bottom: 0.65rem;
}

.homev2-guide-finder-actions {
  margin-top: 1rem;
  padding-top: 0.85rem;
  border-top: 1px solid var(--line);
}

.homev2-guide-back {
  width: 100%;
  max-width: 16rem;
}

.homev2-grid {
  display: grid;
  gap: 0.62rem;
}

.homev2-grid.three {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.homev2-grid.five {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

.homev2-card {
  border: 1px solid var(--line);
  background: #fff;
  padding: 0.75rem 0.8rem;
}

.homev2-card h3,
.homev2-card h4 {
  margin: 0 0 0.4rem;
  font-size: 1rem;
}

.homev2-card p {
  margin: 0 0 0.5rem;
  color: #5a6476;
}

.homev2-area {
  border: 1px solid #d8dee8;
  background: #fff;
  padding: 0.72rem 0.6rem;
  text-align: center;
  font-weight: 700;
  color: #273041;
  transition: border-color 0.14s ease, transform 0.14s ease;
}

.homev2-area:hover,
.homev2-area:focus-visible {
  border-color: var(--orange);
  transform: translateY(-1px);
}

.homev2-final p {
  margin: 0 0 0.75rem;
  color: #5d6677;
}

@media (max-width: 1080px) {
  .homev2-grid.five {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 860px) {
  .homev2-grid.three,
  .homev2-grid.five {
    grid-template-columns: 1fr;
  }
}

/* VTE Qualifikationsberater (Ausbildungen) */
.r4m-vte-wizard,
.r4m-training-wizard {
  --r4m-tw-border: #c5ccd6;
  --r4m-tw-bg: #f4f5f7;
  --r4m-tw-opt-radius: 4px;
  scroll-margin-top: 88px;
}

/* .panel sets overflow:hidden; option hover ring must not be clipped at edges */
.r4m-vte-wizard.panel,
.r4m-training-wizard.panel {
  overflow: visible;
}

.r4m-tw-top {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.75rem 1rem;
  margin-bottom: 1.1rem;
}

.r4m-tw-head {
  flex: 1 1 12rem;
  margin: 0;
  min-width: 0;
}

.r4m-tw-quick {
  flex: 0 0 auto;
  align-self: flex-start;
  font: inherit;
  font-size: 0.82rem;
  font-weight: 600;
  line-height: 1.35;
  max-width: 11.5rem;
  text-align: right;
  padding: 0.35rem 0.5rem;
  border: none;
  background: transparent;
  color: #4a5568;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}

.r4m-tw-quick:hover,
.r4m-tw-quick:focus-visible {
  color: var(--orange);
  outline: none;
}

.r4m-tw-quick--hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.r4m-tw-title {
  margin: 0;
  font-size: clamp(1.2rem, 2.8vw, 1.5rem);
  font-weight: 700;
  letter-spacing: -0.015em;
  color: var(--black, #1a1f28);
}

.r4m-tw-lead {
  margin: 0.35rem 0 0;
  font-size: 0.95rem;
  line-height: 1.45;
  color: #4a5568;
  max-width: 36rem;
}

.r4m-tw-result__meta,
.r4m-tw-result__notes {
  margin: 0.5rem 0 0;
  font-size: 0.95rem;
  line-height: 1.45;
  color: #3d4a5c;
}

.r4m-tw-result__meta-label {
  font-weight: 600;
  color: var(--black, #1a1f28);
}

.r4m-tw-search-item {
  display: block;
  width: 100%;
  margin: 0 0 0.35rem;
  padding: 0.65rem 0.75rem;
  border: 1px solid var(--r4m-tw-border, #c5ccd6);
  background: #fff;
  font: inherit;
  font-size: 0.92rem;
  font-weight: 600;
  text-align: left;
  color: var(--text);
  cursor: pointer;
  transition: border-color 0.14s ease, background 0.14s ease;
}

.r4m-tw-search-item:hover,
.r4m-tw-search-item:focus-visible {
  border-color: #9aa6b8;
  background: #f6f8fa;
  outline: none;
}

.r4m-tw-progress {
  margin-bottom: 1.15rem;
}

.r4m-tw-progress__track {
  height: 6px;
  border-radius: 999px;
  background: #e8ecf2;
  overflow: hidden;
}

.r4m-tw-progress__bar {
  height: 100%;
  width: 14%;
  border-radius: 999px;
  background: var(--r4m-logo-gradient);
  transition: width 0.28s ease;
}

.r4m-tw-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: stretch;
  margin-top: 1.25rem;
  padding-top: 1rem;
  border-top: 1px solid var(--line, #e6e9ee);
}

.r4m-tw-toolbar .btn {
  min-height: 2.6rem;
  padding-left: 1rem;
  padding-right: 1rem;
}

.r4m-tw-panel {
  min-height: 12rem;
  padding: 0.1rem 0 0.25rem;
}

.r4m-tw-panel--exit {
  opacity: 0;
  transform: translateY(6px);
  transition:
    opacity 0.15s ease,
    transform 0.15s ease;
}

.r4m-tw-panel--enter {
  animation: r4mTwEnter 0.22s ease forwards;
}

@keyframes r4mTwEnter {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .r4m-tw-panel--exit,
  .r4m-tw-panel--enter {
    animation: none;
    transition: none;
  }
}

.r4m-tw-q {
  margin: 0 0 1.1rem;
  font-size: clamp(1.02rem, 2.4vw, 1.22rem);
  font-weight: 600;
  line-height: 1.35;
  letter-spacing: 0.01em;
  color: #1e2430;
}

.r4m-tw-options {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
}

.r4m-tw-opt {
  display: flex;
  align-items: stretch;
  gap: 0;
  width: 100%;
  text-align: left;
  border: 1px solid var(--r4m-tw-border);
  background: #fff;
  border-radius: var(--r4m-tw-opt-radius, 4px);
  padding: 1.05rem 1.15rem;
  min-height: 3rem;
  font: inherit;
  font-weight: 600;
  font-size: 1.03rem;
  line-height: 1.38;
  color: #1a2230;
  cursor: pointer;
  transition:
    border-color 0.14s ease,
    box-shadow 0.14s ease,
    background-color 0.14s ease;
  box-shadow: none;
}

.r4m-tw-opt:hover,
.r4m-tw-opt:focus-visible {
  border-color: rgba(236, 126, 52, 0.55);
  outline: none;
  background: #fafbfc;
  /* inset: full ring even inside .panel { overflow: hidden } */
  box-shadow: inset 0 0 0 2px rgba(236, 126, 52, 0.35);
}

.r4m-tw-opt:active {
  background: #f3f4f6;
}

.r4m-tw-opt__body {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  flex: 1;
  min-width: 0;
  text-align: left;
}

.r4m-tw-opt__help {
  font-size: 0.86rem;
  font-weight: 500;
  color: #4b5565;
  line-height: 1.42;
}

.r4m-tw-options--featured {
  gap: 0.75rem;
}

.r4m-tw-opt--featured {
  flex-direction: column;
  align-items: stretch;
  padding: 1.2rem 1.25rem;
  min-height: 3.25rem;
  gap: 0;
}

.r4m-tw-opt--featured .r4m-tw-opt__label {
  font-size: 1.04rem;
  line-height: 1.32;
  font-weight: 600;
}

.r4m-tw-result__intro {
  font-size: 0.82rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #6b7280;
  margin: 0 0 0.35rem;
}

.r4m-tw-result__title {
  margin: 0 0 0.75rem;
  font-size: clamp(1.15rem, 2.8vw, 1.45rem);
  font-weight: 800;
  line-height: 1.2;
  color: var(--black);
}

.r4m-tw-result__list,
.r4m-tw-result__optional {
  margin: 0 0 1rem;
  padding-left: 1.15rem;
  color: #3d4758;
  line-height: 1.5;
}

.r4m-tw-result__optional-label {
  margin: 0 0 0.35rem;
  font-size: 0.88rem;
  font-weight: 600;
  color: #5c6678;
}

.r4m-tw-result__optional {
  margin-bottom: 1.1rem;
}

.r4m-tw-result__ctas {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  align-items: stretch;
  margin-bottom: 1rem;
}

.r4m-tw-result__ctas .btn {
  flex: 1 1 12rem;
  min-height: 2.85rem;
  justify-content: center;
}

.r4m-tw-disclaimer {
  margin: 0;
  padding-top: 1rem;
  border-top: 1px solid var(--line, #e2e8f0);
  font-size: 0.81rem;
  line-height: 1.5;
  color: #6a7382;
  max-width: 62ch;
}

.r4m-tw-error {
  color: #a61e1e;
  font-weight: 600;
}

.r4m-tw-search-label {
  display: block;
  font-weight: 700;
  font-size: clamp(1.05rem, 2.6vw, 1.35rem);
  margin-bottom: 0.35rem;
  color: var(--black);
}

.r4m-tw-search-hint {
  margin: 0 0 0.65rem;
  font-size: 0.9rem;
  color: #5c6678;
}

.r4m-tw-search-input {
  width: 100%;
  max-width: 28rem;
  padding: 0.75rem 0.9rem;
  font: inherit;
  font-size: 1rem;
  border: 1px solid var(--r4m-tw-border);
  border-radius: 8px;
  margin-bottom: 0.85rem;
}

.r4m-tw-search-list {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  max-height: 16rem;
  overflow-y: auto;
}

.r4m-tw-search-item {
  display: block;
  padding: 0.85rem 1rem;
  border-radius: 8px;
  border: 1px solid var(--r4m-tw-border);
  background: #fff;
  font-weight: 600;
  color: #273041;
  text-decoration: none;
  transition:
    border-color 0.14s ease,
    background 0.14s ease;
}

.r4m-tw-search-item:hover,
.r4m-tw-search-item:focus-visible {
  border-color: var(--orange);
  background: #fff8f2;
  outline: none;
}

.r4m-tw-search-empty {
  margin: 0;
  font-size: 0.92rem;
  color: #6b7280;
}

@media (min-width: 640px) {
  .r4m-tw-options {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.7rem;
  }

  .r4m-tw-options.r4m-tw-options--featured {
    display: flex;
    flex-direction: column;
  }

  .r4m-tw-opt {
    min-height: 3.35rem;
    padding: 1.1rem 1.2rem;
  }

  .r4m-tw-opt--featured {
    min-height: 3.5rem;
    padding: 1.25rem 1.3rem;
  }
}

/* ——— Ausbildungen hub: full-width photo strip ——— */
main.section {
  max-width: 100%;
  overflow-x: clip;
}

main.section:has(.ausbildungen-page-hero) {
  padding-top: 0;
}

.ausbildungen-page-hero {
  position: relative;
  display: flex;
  align-items: stretch;
  width: 100%;
  max-width: 100%;
  min-height: clamp(220px, 28vw, 320px);
  margin: 0;
  padding: 0;
  overflow: hidden;
  background: rgb(10, 12, 18);
}

.ausbildungen-page-hero__photo,
.ausbildungen-page-hero picture img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  z-index: 0;
}

.ausbildungen-page-hero picture {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.ausbildungen-cat-tile__media picture {
  position: absolute;
  inset: 0;
  display: block;
}

.ausbildungen-cat-tile__media picture img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Same tonal overlay as homepage hero (.hero-bg-full::before) */
.ausbildungen-page-hero__scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(
    90deg,
    rgba(10, 12, 18, 0.84) 0%,
    rgba(10, 12, 18, 0.68) 36%,
    rgba(10, 12, 18, 0.45) 62%,
    rgba(10, 12, 18, 0.45) 100%
  );
}

.ausbildungen-page-hero__inner {
  position: relative;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  min-height: clamp(220px, 28vw, 320px);
  padding-block: clamp(0.75rem, 2vw, 1rem);
  box-sizing: border-box;
}

/* Match .container.panel--ausbildungen horizontal edge (do not use width: 100%) */
.ausbildungen-page-hero__inner.container,
main.section:has(.ausbildungen-page-hero) .container.panel--ausbildungen {
  width: min(var(--container), calc(100% - 2.4rem));
  margin-left: auto;
  margin-right: auto;
  padding-left: 0;
  padding-right: 0;
}

.ausbildungen-page-hero__inner h1 {
  margin: 0;
  max-width: min(22ch, 100%);
  font-family: Roboto, Arial, sans-serif;
  font-size: clamp(1.4rem, 3.5vw, 2.2rem);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: var(--white);
  text-shadow: 0 1px 12px rgba(10, 12, 18, 0.55);
}

.ausbildungen-page-hero__inner h1::before {
  content: "";
  display: block;
  width: 3rem;
  height: 3px;
  margin: 0 0 0.55rem;
  background: var(--r4m-logo-gradient);
}

.ausbildungen-page-hero__titles {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  max-width: min(36ch, 100%);
}

.ausbildungen-page-hero__subline {
  margin: 0;
  font-family: Roboto, Arial, sans-serif;
  font-size: var(--r4m-type-ui);
  font-weight: 500;
  line-height: 1.35;
  letter-spacing: 0.01em;
  color: rgba(255, 255, 255, 0.92);
  text-shadow: 0 1px 10px rgba(10, 12, 18, 0.45);
}

/* White angled cut between photo and content below */
.ausbildungen-page-hero.angled-35::after {
  z-index: 2;
  pointer-events: none;
}

.ausbildungen-page-hero--kontakt .ausbildungen-page-hero__photo,
.ausbildungen-page-hero--kontakt picture img {
  object-position: center 28%;
}

main.section:has(.ausbildungen-page-hero) .container.panel--ausbildungen {
  padding-top: clamp(1.75rem, 4vw, 2.5rem);
}

/* ——— Ausbildungen Hub & Kategorieseiten ——— */
.panel--ausbildungen h1 {
  margin-bottom: 1.25rem;
}

.ausbildungen-hub__block {
  margin-bottom: 2rem;
}

.ausbildungen-hub__block:last-child {
  margin-bottom: 0;
}

.ausbildungen-tools__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.85rem;
}

.ausbildungen-tools__card {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  padding: 1rem 1.1rem;
  border: 1px solid #d7dce4;
  background: #fff;
  color: inherit;
  text-decoration: none;
  transition: border-color 0.15s ease, background 0.15s ease;
}

.ausbildungen-tools__card:hover,
.ausbildungen-tools__card:focus-visible {
  border-color: var(--orange);
  background: rgba(236, 126, 52, 0.05);
  color: inherit;
}

.ausbildungen-tools__title {
  font-size: 1.05rem;
  font-weight: 700;
  line-height: 1.25;
  color: var(--text, #1a1f28);
}

.ausbildungen-tools__text {
  font-size: 0.92rem;
  line-height: 1.4;
  color: var(--color-muted, #5c6573);
}

@media (max-width: 720px) {
  .ausbildungen-tools__grid {
    grid-template-columns: 1fr;
  }
}

.ausbildungen-hinweis__text {
  margin: 0;
  padding: clamp(1rem, 2.5vw, 1.35rem) clamp(1.1rem, 3vw, 1.5rem);
  border-left: 4px solid var(--orange);
  background: linear-gradient(
    90deg,
    rgba(236, 126, 52, 0.1) 0%,
    rgba(245, 247, 250, 0.95) 35%,
    var(--bg) 100%
  );
  font-family: Roboto, Arial, sans-serif;
  font-size: clamp(1.1rem, 2.2vw, 1.28rem);
  font-weight: 500;
  line-height: 1.55;
  letter-spacing: -0.01em;
  color: var(--text);
}

.ausbildungen-hinweis__label {
  font-weight: 700;
  color: var(--dark);
}

.ausbildungen-categories.ausbildungen-categories--pop {
  /*
   * Breite : Höhe = 16 : 9 (Querformat wie Referenz).
   * Untere Schräge: gleiche Geometrie wie Startseite .value-card-1 — nur hier, keine Änderung am Home-CSS.
   */
  --r4m-ausbildungen-cat-aspect: 16 / 9;
  --r4m-ausbildungen-cat-clip: polygon(0 0, 100% 0, 100% 95.5%, 0 100%);
}

.ausbildungen-categories.ausbildungen-categories--pop > h2 {
  margin: 0 0 clamp(1.1rem, 3vw, 1.65rem);
  font-size: var(--r4m-type-section);
  letter-spacing: -0.02em;
}

.ausbildungen-categories-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
}

.ausbildungen-categories-grid--tiles {
  grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
  gap: max(var(--r4m-tile-gap), 1.25rem);
}

@media (min-width: 980px) {
  .ausbildungen-categories-grid--tiles {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.ausbildungen-cat-tile-wrap {
  margin: 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

/*
 * Ausbildungsbereiche: Vollflächiges Bild, weisser Titel, untere Schräge (wie Werte-Karte 1 — nur Geometrie).
 */
.ausbildungen-categories--pop .ausbildungen-cat-tile {
  --r4m-cat-pop-radius: 0;
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: var(--r4m-ausbildungen-cat-aspect);
  min-height: 0;
  max-height: none;
  overflow: hidden;
  clip-path: var(--r4m-ausbildungen-cat-clip);
  -webkit-clip-path: var(--r4m-ausbildungen-cat-clip);
  border-radius: 0;
  text-decoration: none;
  color: var(--white);
  background: rgb(10, 12, 18);
  box-shadow:
    0 6px 14px rgba(10, 12, 18, 0.12),
    0 22px 44px rgba(10, 12, 18, 0.18);
  isolation: isolate;
  transition:
    box-shadow 0.35s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.35s cubic-bezier(0.22, 1, 0.36, 1),
    filter 0.35s ease;
  filter: drop-shadow(0 4px 12px rgba(10, 12, 18, 0.12));
}

.ausbildungen-categories--pop .ausbildungen-cat-tile:hover {
  transform: translateY(-5px);
  filter: drop-shadow(0 16px 36px rgba(10, 12, 18, 0.2));
  box-shadow:
    0 10px 28px rgba(236, 126, 52, 0.15),
    0 28px 56px rgba(10, 12, 18, 0.28);
}

.ausbildungen-categories--pop .ausbildungen-cat-tile:focus-visible {
  outline: 3px solid var(--orange);
  outline-offset: 4px;
  transform: translateY(-3px);
}

.ausbildungen-categories--pop .ausbildungen-cat-tile__media {
  position: absolute;
  inset: 0;
  background: rgb(10, 12, 18);
  overflow: hidden;
}

.ausbildungen-categories--pop .ausbildungen-cat-tile__img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transform: scale(1);
  transition: transform 0.55s cubic-bezier(0.22, 1, 0.36, 1);
}

.ausbildungen-categories--pop .ausbildungen-cat-tile:hover .ausbildungen-cat-tile__img {
  transform: scale(1.06);
}

/* Lesbarkeit weisser Schrift: Verdunkelung vor allem unten */
.ausbildungen-categories--pop .ausbildungen-cat-tile__shade {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(
    to top,
    rgba(10, 12, 18, 0.92) 0%,
    rgba(10, 12, 18, 0.65) 38%,
    rgba(10, 12, 18, 0.12) 72%,
    rgba(10, 12, 18, 0) 100%
  );
  transition: opacity 0.35s ease;
}

.ausbildungen-categories--pop .ausbildungen-cat-tile:hover .ausbildungen-cat-tile__shade {
  opacity: 0.97;
}

.ausbildungen-categories--pop .ausbildungen-cat-tile__title {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2;
  margin: 0;
  padding: 1.5rem var(--r4m-tile-padding-x) 1.65rem
    calc(var(--r4m-tile-padding-x) + 0.35rem);
  font-family: Roboto, Arial, sans-serif;
  font-size: clamp(1.05rem, 2.4vw, 1.38rem);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: #fff;
  text-shadow:
    0 1px 3px rgba(10, 12, 18, 0.65),
    0 10px 28px rgba(10, 12, 18, 0.45);
}

.ausbildungen-categories--pop .ausbildungen-cat-tile__title::before {
  content: "";
  position: absolute;
  left: 0;
  top: 1rem;
  bottom: 1rem;
  width: 4px;
  border-radius: 0 3px 3px 0;
  background: linear-gradient(180deg, #c41e1e 0%, #ec7e34 48%, #b91c1c 100%);
}

@media (prefers-reduced-motion: reduce) {
  .ausbildungen-categories--pop .ausbildungen-cat-tile,
  .ausbildungen-categories--pop .ausbildungen-cat-tile__img,
  .ausbildungen-categories--pop .ausbildungen-cat-tile__shade {
    transition: none !important;
  }

  .ausbildungen-categories--pop .ausbildungen-cat-tile:hover,
  .ausbildungen-categories--pop .ausbildungen-cat-tile:focus-visible {
    transform: none;
  }

  .ausbildungen-categories--pop .ausbildungen-cat-tile:hover .ausbildungen-cat-tile__img {
    transform: none;
  }
}

.ausbildungen-cat-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 1.1rem 1.15rem;
}

.ausbildungen-cat-card__title {
  margin: 0 0 0.45rem;
  font-size: var(--r4m-type-block-title);
  line-height: 1.25;
}

.ausbildungen-cat-card__title a {
  color: var(--black);
  text-decoration: none;
}

.ausbildungen-cat-card__title a:hover,
.ausbildungen-cat-card__title a:focus-visible {
  color: var(--orange);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.ausbildungen-cat-card__intro {
  margin: 0 0 0.75rem;
  font-size: var(--r4m-type-ui);
  line-height: 1.5;
  color: var(--muted);
}

.ausbildungen-cat-card__products {
  margin: 0 0 1rem;
  padding: 0;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 0.5rem;
  flex: 1 1 auto;
}

.ausbildungen-cat-card__products a {
  display: inline-block;
  padding: 0.28rem 0.5rem;
  border: 1px solid #d8dee8;
  background: #fff;
  font-size: var(--r4m-type-min);
  font-weight: 600;
  color: var(--text);
  text-decoration: none;
  transition:
    border-color 0.14s ease,
    background 0.14s ease;
}

.ausbildungen-cat-card__products a:hover,
.ausbildungen-cat-card__products a:focus-visible {
  border-color: #b8c0cc;
  background: #f8fafc;
}

.ausbildungen-cat-card__more {
  margin: 0;
}

.ausbildungen-cat-card__btn {
  width: 100%;
  text-align: center;
}

.ausbildungen-category__back {
  margin: 0 0 1rem;
}

.ausbildungen-category__back a {
  font-size: var(--r4m-type-ui);
  font-weight: 600;
  text-decoration: none;
}

.ausbildungen-category__intro {
  margin: 0 0 1.5rem;
  max-width: 62ch;
  font-size: var(--r4m-type-body);
  line-height: 1.55;
  color: var(--muted);
}

.ausbildungen-category__products {
  display: grid;
  gap: 1rem;
}

/* ——— Ausbildungen: Rich-Kurslayout (Pilot) ——— */
.ausbildungen-category--rich .ausbildungen-rich-overview {
  margin: 0 0 clamp(1.75rem, 4vw, 2.5rem);
}

.ausbildungen-rich-overview__heading {
  margin: 0 0 clamp(0.85rem, 2vw, 1.15rem);
  font-size: var(--r4m-type-section);
  line-height: 1.18;
  letter-spacing: -0.02em;
  scroll-margin-top: 5.5rem;
}

.ausbildungen-rich-overview__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.85rem;
}

@media (min-width: 640px) {
  .ausbildungen-rich-overview__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
  }
}

@media (min-width: 1024px) {
  .ausbildungen-rich-overview__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.ausbildungen-rich-overview-card {
  margin: 0;
  scroll-margin-top: 5rem;
  height: 100%;
}

.ausbildungen-rich-overview-card--link {
  position: relative;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  height: 100%;
  padding: 1.15rem 1.2rem 1rem;
  overflow: hidden;
  border: 1px solid var(--line);
  background: var(--white);
  text-decoration: none;
  color: inherit;
  text-align: left;
  transition:
    border-color 0.18s ease,
    box-shadow 0.18s ease;
}

.ausbildungen-rich-overview-card--link::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  height: 3px;
  background: var(--r4m-logo-gradient);
}

.ausbildungen-rich-overview-card--link:hover,
.ausbildungen-rich-overview-card--link:focus-visible {
  border-color: #c5cad4;
  box-shadow: 0 14px 36px rgba(17, 24, 39, 0.09);
}

.ausbildungen-rich-overview-card--link:hover .ausbildungen-rich-overview-card__detail,
.ausbildungen-rich-overview-card--link:focus-visible .ausbildungen-rich-overview-card__detail {
  color: #d96a22;
}

.ausbildungen-rich-overview-card--link:focus-visible {
  outline: 2px solid var(--orange);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  .ausbildungen-rich-overview-card--link {
    transition-duration: 0.01ms;
  }
}

.ausbildungen-rich-overview-card__stack {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.55rem;
  width: 100%;
  min-height: 0;
  flex: 1;
}

.ausbildungen-rich-overview-card__title {
  margin: 0;
  width: 100%;
  font-size: clamp(1.05rem, 1.7vw, 1.18rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.28;
  color: var(--text);
  text-align: left;
  overflow-wrap: break-word;
  text-wrap: pretty;
}

.ausbildungen-rich-overview-card__meta {
  margin: 0;
}

.ausbildungen-rich-overview-card__badge {
  display: inline-block;
  padding: 0.22rem 0.55rem;
  border: 1px solid var(--line);
  background: #f7f8fa;
  font-size: var(--r4m-type-min);
  font-weight: 600;
  letter-spacing: 0.01em;
  line-height: 1.3;
  color: #4b5563;
}

.ausbildungen-rich-overview-card__detail {
  margin-top: auto;
  padding-top: 0.7rem;
  font-size: 0.95rem;
  font-weight: 700;
  line-height: 1.3;
  color: var(--orange);
  text-decoration: none;
}

.ausbildungen-rich-visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.ausbildungen-rich-course {
  margin-bottom: clamp(1.5rem, 4vw, 2.25rem);
  padding: clamp(1.15rem, 2.5vw, 1.5rem) clamp(1.1rem, 2.5vw, 1.35rem);
  scroll-margin-top: 5.5rem;

  background: #fff;
  border: 1px solid #d8dee8;
  box-shadow: none;
}

main:not(.r4m-home) .ausbildungen-category--rich .ausbildungen-rich-course.panel {
  background: #fff;
  border: 1px solid #d8dee8;
  box-shadow: none;
  padding: clamp(1.15rem, 2.5vw, 1.5rem) clamp(1.25rem, 2.5vw, 1.5rem);
}

.ausbildungen-rich-course:last-child {
  margin-bottom: 0;
}

.ausbildungen-rich-course__header {
  display: flex;
  align-items: center;
  margin: 0 0 1rem;
  padding: 0.75rem 0;
  border-bottom: 1px solid var(--line);
}

.ausbildungen-rich-course__title {
  margin: 0;
  font-size: var(--r4m-type-block-title);
  line-height: 1.2;
  letter-spacing: -0.02em;
}

.ausbildungen-rich-course__shell {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.15rem;
  align-items: start;
}

@media (min-width: 860px) {
  .ausbildungen-rich-course__shell:has(.ausbildungen-rich-course__rail) {
    grid-template-columns: minmax(200px, 240px) minmax(0, 1fr);
    gap: clamp(1.25rem, 3vw, 2rem);
  }
}

.ausbildungen-rich-course__tablist {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.ausbildungen-rich-course__tab {
  appearance: none;
  margin: 0;
  padding: 0.55rem 0.75rem;
  border: 1px solid var(--line);
  border-radius: 0;
  background: #fff;
  font: inherit;
  font-size: var(--r4m-type-ui);
  font-weight: 600;
  text-align: left;
  color: var(--text);
  cursor: pointer;
  transition:
    border-color 0.15s ease,
    background 0.15s ease,
    box-shadow 0.15s ease;
}

.ausbildungen-rich-course__tab:hover {
  border-color: #b8c0cc;
  background: #f8fafc;
}

.ausbildungen-rich-course__tab:focus-visible {
  outline: 3px solid var(--orange);
  outline-offset: 2px;
}

.ausbildungen-rich-course__tab[aria-selected="true"] {
  border-color: rgba(236, 126, 52, 0.55);
  background: linear-gradient(
    90deg,
    rgba(236, 126, 52, 0.12) 0%,
    rgba(236, 126, 52, 0.04) 100%
  );
  box-shadow: inset 3px 0 0 var(--orange);
}

.ausbildungen-rich-type-panel[hidden] {
  display: none !important;
}

.ausbildungen-rich-course__panels {
  min-width: 0;
}

.ausbildungen-rich-sectabs {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.ausbildungen-rich-sectabs__tablist {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 0.5rem;
  padding-bottom: 0.35rem;
  border-bottom: 1px solid var(--line);
}

@media (max-width: 640px) {
  .ausbildungen-rich-sectabs__tablist {
    flex-wrap: nowrap;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    margin-inline: calc(-1 * clamp(0.25rem, 1.5vw, 0.5rem));
    padding-inline: clamp(0.25rem, 1.5vw, 0.5rem);
  }
}

.ausbildungen-rich-sectabs__tab {
  appearance: none;
  margin: 0;
  flex: 0 0 auto;
  padding: 0.42rem 0.85rem;
  border: 1px solid var(--line);
  border-radius: 0;
  background: #fff;
  font: inherit;
  font-size: var(--r4m-type-ui);
  font-weight: 600;
  color: var(--text);
  cursor: pointer;
  white-space: nowrap;
  transition:
    background 0.15s ease,
    color 0.15s ease,
    border-color 0.15s ease;
}

.ausbildungen-rich-sectabs__tab:hover {
  border-color: #b8c0cc;
  background: #f8fafc;
  color: var(--text);
}

.ausbildungen-rich-sectabs__tab:focus-visible {
  outline: 3px solid var(--orange);
  outline-offset: 2px;
}

.ausbildungen-rich-sectabs__tab[aria-selected="true"] {
  background: rgba(236, 126, 52, 0.14);
  border-color: rgba(236, 126, 52, 0.45);
  color: var(--dark);
}

.ausbildungen-rich-sectabs__panel[hidden] {
  display: none !important;
}

.ausbildungen-rich-sectabs__panel {
  padding-top: 0.15rem;
}

.ausbildungen-rich-sectabs__panel .ausbildungen-rich-section {
  margin: 0;
}

.ausbildungen-rich-section {
  margin: 0 0 clamp(1rem, 2.5vw, 1.35rem);
}

.ausbildungen-rich-section:last-of-type {
  margin-bottom: 0;
}

.ausbildungen-rich-section__heading {
  margin: 0 0 0.5rem;
  font-size: var(--r4m-type-body);
  font-weight: 700;
  line-height: 1.28;
}

.ausbildungen-rich-section__intro {
  margin: 0 0 0.6rem;
  max-width: 68ch;
  font-size: var(--r4m-type-body);
  line-height: 1.55;
}

.ausbildungen-rich-section__rows {
  margin: 0;
  display: grid;
  gap: 0.65rem;
}

.ausbildungen-rich-section__row {
  margin: 0;
  padding: 0;
  padding-bottom: 0.65rem;
  border-bottom: 1px dashed #dfe4eb;
}

.ausbildungen-rich-section__row:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}

.ausbildungen-rich-section__dt {
  margin: 0 0 0.2rem;
  font-size: var(--r4m-type-min);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--muted);
}

.ausbildungen-rich-section__dd {
  margin: 0;
  max-width: 68ch;
  font-size: var(--r4m-type-body);
  line-height: 1.55;
}

.ausbildungen-rich-section__items {
  margin: 0;
  max-width: 68ch;
  font-size: var(--r4m-type-body);
  line-height: 1.55;
}

.ausbildungen-rich-section__items li {
  margin: 0.28rem 0;
}

.ausbildungen-rich-course__actions {
  margin: clamp(1.25rem, 2.5vw, 1.5rem) 0 0;
  padding: clamp(1.15rem, 2.5vw, 1.5rem) 0 0;
  border-top: 1px solid var(--line);
}

.ausbildungen-rich-course__actions .btn {
  font-size: var(--r4m-type-ui);
  cursor: pointer;
}

.r4m-room-detail .ausbildungen-rich-course__actions [data-r4m-book-room] {
  cursor: pointer;
}

.ausbildungen-product {
  padding: 1.1rem 1.15rem;
}

.ausbildungen-product__title {
  margin: 0 0 0.75rem;
  font-size: var(--r4m-type-block-title);
  line-height: 1.25;
  scroll-margin-top: 6rem;
}

.ausbildungen-product__variants {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 0.55rem;
}

.ausbildungen-product__variant {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem 0.75rem;
  padding: 0.55rem 0;
  border-top: 1px solid var(--line);
}

.ausbildungen-product__variant:first-child {
  border-top: 0;
  padding-top: 0;
}

.ausbildungen-product__typ {
  font-size: var(--r4m-type-ui);
  font-weight: 600;
  color: #3f4957;
}

.ausbildungen-product__variant .btn {
  flex: 0 0 auto;
}

@media (max-width: 768px) {
  .ausbildungen-categories-grid {
    grid-template-columns: 1fr;
  }
}

/* Interior pages: paper canvas; white content boxes keep a quiet hairline */
main:not(.r4m-home) .orbit-wrap,
main:not(.r4m-home) .orbit-core,
main:not(.r4m-home) .orbit-item {
  border: 0;
}

main:not(.r4m-home) > .container.panel,
main:not(.r4m-home) .container.panel.panel--ausbildungen {
  border: 0;
  box-shadow: none;
  background: transparent;
  padding-left: 0;
  padding-right: 0;
}

main:not(.r4m-home) .panel {
  border: 1px solid var(--line);
  box-shadow: none;
  background: var(--white);
}

main:not(.r4m-home) .ausbildungen-hub__block.panel {
  box-shadow: none;
  padding: 0;
  background: transparent;
  border: 0;
}

main:not(.r4m-home) .card,
main:not(.r4m-home) .ausbildungen-product.panel,
main:not(.r4m-home) .ausbildungen-cat-card.panel {
  border: 1px solid var(--line);
  box-shadow: none;
  background: var(--white);
}

main:not(.r4m-home) .card-thumb,
main:not(.r4m-home) .category-nav a,
main:not(.r4m-home) .ausbildungen-cat-card__products a {
  border: 0;
}

main:not(.r4m-home) .category-nav a,
main:not(.r4m-home) .ausbildungen-cat-card__products a {
  background: #fff;
}

main:not(.r4m-home) .course-card details,
main:not(.r4m-home) .ausbildungen-product__variant,
main:not(.r4m-home) .r4m-tw-toolbar,
main:not(.r4m-home) .r4m-tw-disclaimer,
main:not(.r4m-home) .homev2-guide-section-label--split,
main:not(.r4m-home) .homev2-guide-choice-footer,
main:not(.r4m-home) .homev2-guide-finder-actions {
  border-top: 0;
}

main:not(.r4m-home) .link-ghost {
  border-bottom-color: rgba(236, 126, 52, 0.4);
}

main:not(.r4m-home) :is(.r4m-pf-chip, .r4m-pf-btn, .r4m-pf-choice) {
  border: 0;
}

main:not(.r4m-home) .r4m-pf-chip {
  background: #f3f5f8;
}

main:not(.r4m-home) .r4m-pf-choice {
  background: #fff;
  box-shadow: 0 2px 8px rgba(26, 34, 48, 0.05);
}

main:not(.r4m-home) .r4m-tw-opt,
main:not(.r4m-home) .r4m-tw-search-item {
  border: 1px solid var(--line, #e1e6ef);
  background: #f8fafc;
}

main:not(.r4m-home) .r4m-tw-opt:hover,
main:not(.r4m-home) .r4m-tw-opt:focus-visible,
main:not(.r4m-home) .r4m-tw-search-item:hover,
main:not(.r4m-home) .r4m-tw-search-item:focus-visible {
  border-color: rgba(236, 126, 52, 0.55);
  background: #fff8f2;
  box-shadow: inset 0 0 0 2px rgba(236, 126, 52, 0.35);
}

/* ——— Kurskalender & Buchung ——— */
.kurskalender-portal-cta {
  margin-top: 1.5rem;
  padding: 1.15rem 1.25rem;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  background: #f9fafb;
}

.kurskalender-portal-cta__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem 1.25rem;
}

.kurskalender-portal-cta__title {
  margin: 0 0 0.35rem;
  font-size: 1.1rem;
}

.kurskalender-portal-cta__text {
  margin: 0;
  max-width: 52ch;
  font-size: 0.92rem;
  line-height: 1.5;
  color: #4b5563;
}

.kurskalender-portal-cta__btn {
  flex-shrink: 0;
}

.kurskalender-product-spotlight {
  background: #fff8f3;
  border-bottom: 1px solid #f0dcc8;
  color: var(--dark);
  margin: 0 0 0.75rem;
}

.kurskalender-product-spotlight__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.55rem 1rem;
  padding-top: 0.55rem;
  padding-bottom: 0.55rem;
  border-left: 3px solid var(--orange);
  padding-left: 0.85rem;
}

.kurskalender-product-spotlight__channel {
  flex-shrink: 0;
  margin: 0;
  padding: 0.12rem 0.45rem;
  background: var(--orange);
  color: #fff;
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  line-height: 1.3;
}

.kurskalender-product-spotlight__copy {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.3rem 0.75rem;
  min-width: 0;
  flex: 1 1 auto;
}

.kurskalender-product-spotlight__kicker {
  margin: 0;
  font-size: var(--r4m-type-min);
  font-weight: 700;
  letter-spacing: 0.03em;
  color: var(--muted);
}

.kurskalender-product-spotlight__title {
  margin: 0;
  font-size: 0.95rem;
  font-weight: 700;
  line-height: 1.25;
  color: var(--dark);
}

.kurskalender-product-spotlight__format {
  margin: 0;
  padding: 0.12rem 0.45rem;
  border: 1px solid #eed7c2;
  background: #fff;
  font-size: var(--r4m-type-min);
  font-weight: 600;
  color: var(--muted);
  white-space: nowrap;
}

.kurskalender-product-spotlight__cta {
  white-space: nowrap;
  flex-shrink: 0;
  padding: 0.4rem 0.8rem;
  font-size: 0.875rem;
}

@media (max-width: 520px) {
  .kurskalender-product-spotlight__cta {
    white-space: normal;
  }
}

.panel--kurskalender {
  padding-top: clamp(1.5rem, 3vw, 2rem);
  overflow: visible;
}

main:not(.r4m-home) .container.panel.panel--kurskalender {
  overflow: visible;
}

.kurskalender-app__head {
  margin-bottom: 1rem;
}

.kurskalender-app__head h2 {
  margin: 0 0 0.35rem;
  font-size: clamp(1.35rem, 2.5vw, 1.65rem);
}

.kurskalender-app__intro {
  margin: 0;
  max-width: 68ch;
  font-size: 0.95rem;
  line-height: 1.55;
  color: #4b5563;
}

/* Kundenportal: Nachbestellungshinweis über dem Login */
.kundenportal-nachbestellung-notice {
  margin: 0 0 1rem;
  max-width: 68ch;
  font-size: 0.95rem;
  line-height: 1.55;
  color: #4b5563;
}

.kundenportal-nachbestellung-notice a {
  font-weight: 600;
}

/* Kundenportal: Semco iframe.js resizes height — no fixed cap (was clipping login on mobile). */
.kurskalender-app--kundenportal {
  overflow: visible;
}

.kurskalender-app--kundenportal .kurskalender-app__frame-wrap--semco,
.kurskalender-app--kundenportal #semco-portal-embed-root {
  min-height: clamp(360px, 52vh, 520px);
  height: auto;
  overflow: visible;
}

.kurskalender-app--kundenportal #semco-portal-iframe-container {
  width: 100%;
  max-width: 100%;
  margin: 0 auto;
}

.kurskalender-app--kundenportal #semco-portal-iframe {
  display: block;
  width: 100% !important;
  max-width: 100%;
  min-height: 360px;
  border: 0;
}

.kurskalender-app__filter {
  margin: 0;
  font-size: 0.95rem;
  color: #4b5563;
}

.kurskalender-app__filter-label {
  margin-right: 0.35rem;
}

.kurskalender-app__local-notice {
  padding: 1.25rem 1.35rem;
  margin-bottom: 1rem;
  border: 1px solid #dbe4f0;
  border-radius: 12px;
  background: #f7fafc;
}

.kurskalender-app__local-notice-text {
  margin: 0 0 1rem;
  max-width: 62ch;
  font-size: 0.95rem;
  line-height: 1.55;
  color: #374151;
}

.kurskalender-app__semco-note {
  margin: 0.75rem 0 0;
  max-width: 62ch;
  font-size: 0.85rem;
  line-height: 1.45;
  color: #6b7280;
}

.kurskalender-app__semco-note a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 0.12em;
}

.kurskalender-app__external {
  margin: 0 0 0.75rem;
  font-size: 0.92rem;
}

.kurskalender-app__external a {
  color: var(--r4m-blue, #1e4f8a);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 0.12em;
}

.kurskalender-app__filter-hint {
  display: block;
  margin-top: 0.2rem;
  font-size: 0.85rem;
  color: #6b7280;
}

.kurskalender-app__frame-wrap {
  position: relative;
  width: 100%;
  overflow: visible;
  border: 1px solid #dfe4eb;
  background: #f8fafc;
  box-shadow: 0 12px 28px rgba(17, 24, 39, 0.06);
}

.kurskalender-app__frame-wrap--semco,
#semco-calendar-embed-root,
#semco-portal-embed-root {
  height: auto;
  min-height: 320px;
  overflow: visible;
}

#semco-portal-iframe-container,
#semco-calendar-embed-root #semco-portal-iframe-container {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  box-sizing: border-box;
}

#semco-portal-iframe,
#semco-calendar-embed-root #semco-portal-iframe {
  display: block;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  min-height: clamp(480px, 70vh, 900px);
  box-sizing: border-box;
}

.kurskalender-app__frame-wrap--semco {
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.kurskalender-app__frame {
  display: block;
  width: 100%;
  height: 480px;
  min-height: 320px;
  border: 0;
  overflow: hidden;
  background: #fff;
}

.kurskalender-app__placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-height: clamp(320px, 48vh, 520px);
  padding: clamp(2rem, 5vw, 3rem);
  border: 1px dashed #c5cdd8;
  background: #f3f5f8;
  text-align: center;
}

.kurskalender-app__placeholder-title {
  margin: 0;
  font-size: 1.15rem;
  font-weight: 700;
  color: #374151;
}

.kurskalender-app__placeholder-text {
  margin: 0;
  max-width: 36ch;
  font-size: 0.95rem;
  line-height: 1.5;
  color: #6b7280;
}

.kurskalender-integration-note {
  margin-top: 1.25rem;
  padding: 0.85rem 1rem;
  border: 1px solid #e5e9f0;
  background: #fafbfd;
  font-size: 0.9rem;
}

.kurskalender-integration-note summary {
  cursor: pointer;
  font-weight: 600;
  color: #374151;
}

.kurskalender-integration-note__body {
  margin-top: 0.65rem;
  color: #4b5563;
}

.kurskalender-integration-note__body ul {
  margin: 0.5rem 0 0.75rem 1.1rem;
  padding: 0;
}

.kurskalender-integration-note__body code {
  font-size: 0.86em;
  background: #eef1f6;
  padding: 0.1em 0.35em;
}

@media (max-width: 900px) {
  .kurskalender-product-spotlight__inner {
    align-items: flex-start;
  }

  .kurskalender-product-spotlight__cta {
    justify-self: start;
  }
}

main:not(.r4m-home) #semcosoft-booking-root {
  border: 0 !important;
  border-radius: 0;
  background: #f8fafc;
}

main:not(.r4m-home) .wireframe-chip-row span,
main:not(.r4m-home) .wireframe-grid article,
main:not(.r4m-home) .wireframe-step,
main:not(.r4m-home) .homev2-proof-row span {
  border: 0;
  background: #f3f5f8;
}

/* ——— Beratung ——— */
.beratung-hub__block {
  margin-bottom: 2rem;
}

.beratung-hub__block:last-child {
  margin-bottom: 0;
}

.beratung-hub__intro.panel {
  padding: clamp(1.1rem, 3vw, 1.5rem) clamp(1.15rem, 3vw, 1.65rem);
  border: 1px solid #e5e9f0;
  background: #fafbfd;
}

.beratung-hub__lede {
  margin: 0 0 1rem;
  max-width: 62ch;
  font-size: clamp(1rem, 2vw, 1.08rem);
  line-height: 1.55;
  color: #374151;
}

.beratung-hub__benefits {
  margin: 0 0 1.35rem;
  padding: 0;
  list-style: none;
}

.beratung-hub__benefits li {
  position: relative;
  margin: 0 0 0.5rem;
  padding-left: 1.15rem;
  color: #1f2937;
  line-height: 1.45;
  font-size: 0.98rem;
}

.beratung-hub__benefits li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 0;
  height: 0;
  border-top: 0.28em solid transparent;
  border-bottom: 0.28em solid transparent;
  border-left: 0.45em solid var(--orange);
}

.beratung-hub__actions {
  margin-top: 0.25rem;
}

.beratung-hub__services > h2 {
  margin: 0 0 1.15rem;
  font-size: clamp(1.25rem, 2.5vw, 1.5rem);
}

.beratung-services-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(0.85rem, 2.5vw, 1.25rem);
}

.beratung-service-card {
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
  min-height: 100%;
  padding: clamp(1.1rem, 3vw, 1.45rem);
  border: 1px solid #dfe4eb;
  background: #fff;
  box-shadow: 0 8px 20px rgba(17, 24, 39, 0.05);
}

.beratung-service-card__title {
  margin: 0;
  font-size: 1.12rem;
  font-weight: 700;
  color: #111827;
}

.beratung-service-card__title::before {
  content: "";
  display: block;
  width: 3rem;
  height: 3px;
  margin: 0 0 0.55rem;
  background: var(--r4m-logo-gradient);
}

.beratung-service-card__text {
  flex: 1;
  margin: 0;
  font-size: 0.94rem;
  line-height: 1.5;
  color: #4b5563;
}

.beratung-service-card__actions {
  margin-top: auto;
  padding-top: 0.35rem;
}

@media (max-width: 768px) {
  .beratung-services-grid {
    grid-template-columns: 1fr;
  }

  .beratung-hub__actions.btn-group {
    flex-direction: column;
    align-items: stretch;
  }

  .beratung-hub__actions.btn-group > .btn {
    width: 100%;
    text-align: center;
  }
}

/* ——— Unternehmen Hub ——— */
.unternehmen-hub__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(0.85rem, 2.5vw, 1.25rem);
  margin: 0;
  padding: 0;
  list-style: none;
  align-items: stretch;
}

.unternehmen-hub__item {
  margin: 0;
  min-width: 0;
  display: flex;
}

.unternehmen-hub__tile {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0.35rem;
  box-sizing: border-box;
  width: 100%;
  flex: 1 1 auto;
  height: 100%;
  min-height: 8.25rem;
  padding: clamp(1.1rem, 3vw, 1.65rem) clamp(1.25rem, 3.5vw, 1.85rem);
  border: 1px solid #d5dae2;
  background: #fff;
  color: #111827;
  text-decoration: none;
  transition:
    border-color 0.16s ease,
    background 0.16s ease,
    box-shadow 0.16s ease;
}

.unternehmen-hub__tile:hover,
.unternehmen-hub__tile:focus-visible {
  border-color: var(--orange);
  background: #fff8f3;
  color: #111827;
  box-shadow: 0 10px 24px rgba(17, 24, 39, 0.08);
}

.unternehmen-hub__label {
  font-size: clamp(1.15rem, 2.4vw, 1.45rem);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.02em;
}

.unternehmen-hub__teaser {
  font-size: clamp(0.88rem, 1.6vw, 0.98rem);
  line-height: 1.45;
  color: #4b5563;
  max-width: 36ch;
}

.unternehmen-standort {
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
}

.unternehmen-standort__header {
  margin-bottom: 1.25rem;
}

.unternehmen-standort__title {
  margin: 0 0 0.35rem;
  font-size: clamp(1.35rem, 2.8vw, 1.75rem);
  font-weight: 700;
  letter-spacing: -0.02em;
}

.unternehmen-standort__address {
  margin: 0 0 0.65rem;
  color: #374151;
  font-size: 1.05rem;
  font-weight: 600;
}

.unternehmen-standort__intro {
  margin: 0;
  color: #4b5563;
  font-size: 1rem;
  line-height: 1.55;
  max-width: 62ch;
}

.unternehmen-standort__parking {
  margin: 0 0 1.5rem;
  padding: 1rem 1.15rem;
  border: 2px solid #9a3412;
  border-left-width: 6px;
  background: #fff7ed;
}

.unternehmen-standort__parking-title {
  margin: 0 0 0.35rem;
  color: #9a3412;
  font-size: 1.05rem;
  font-weight: 800;
  letter-spacing: 0.01em;
  text-transform: none;
}

.unternehmen-standort__parking-body {
  margin: 0;
  color: #7c2d12;
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.5;
}

.unternehmen-standort__directions {
  margin: 0 0 1.75rem;
}

.unternehmen-standort__directions-title {
  margin: 0 0 0.85rem;
  font-size: clamp(1.1rem, 2.2vw, 1.3rem);
  font-weight: 700;
  letter-spacing: -0.01em;
}

.unternehmen-standort__options {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(0.85rem, 2.5vw, 1.25rem);
}

.unternehmen-standort__option {
  margin: 0;
  padding: 0.95rem 1.05rem;
  border: 1px solid #d5dae2;
  background: #fafbfd;
}

.unternehmen-standort__option-label {
  margin: 0 0 0.4rem;
  color: var(--orange, #e85d04);
  font-size: 0.92rem;
  font-weight: 700;
  letter-spacing: 0.01em;
}

.unternehmen-standort__option-body {
  margin: 0;
  color: #374151;
  font-size: 0.98rem;
  line-height: 1.55;
}

.unternehmen-standort__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(0.85rem, 2.5vw, 1.25rem);
  align-items: stretch;
}

.unternehmen-standort__photo,
.unternehmen-standort__map {
  margin: 0;
  min-height: clamp(14rem, 36vw, 22rem);
  border: 1px solid #d5dae2;
  background: #f3f4f6;
  overflow: hidden;
}

.unternehmen-standort__photo img {
  display: block;
  width: 100%;
  height: 100%;
  min-height: clamp(14rem, 36vw, 22rem);
  object-fit: cover;
  border: 0;
}

.unternehmen-standort__route {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0.75rem;
  padding: clamp(1rem, 3vw, 1.5rem);
  min-height: clamp(14rem, 36vw, 22rem);
}

.unternehmen-standort__route-address {
  margin: 0;
  font-weight: 600;
  color: #111827;
}

.unternehmen-standort__route-note {
  margin: 0;
  font-size: 0.92rem;
  line-height: 1.45;
  color: #4b5563;
}

.unternehmen-standort__route .btn {
  align-self: flex-start;
}

.r4m-form-privacy {
  display: flex;
  align-items: flex-start;
  gap: 0.55rem;
  margin: 0.85rem 0 1rem;
  font-size: 0.92rem;
  line-height: 1.45;
  color: #374151;
}

.r4m-form-privacy input[type="checkbox"] {
  width: 1.05rem;
  height: 1.05rem;
  margin: 0.15rem 0 0;
  padding: 0;
  border: 0;
  flex-shrink: 0;
  accent-color: var(--orange, #e85d04);
}

@media (max-width: 640px) {
  .unternehmen-hub__grid {
    grid-template-columns: 1fr;
  }

  .unternehmen-standort__grid {
    grid-template-columns: 1fr;
  }
}

/* ——— Team organigram (matches hub / card marketing UI) ——— */
.r4m-org {
  margin-top: 0.25rem;
}

.r4m-org__stage {
  position: relative;
  min-height: 10rem;
}

.r4m-org__chart {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 0;
  min-width: 0;
  padding: 0;
  background: transparent;
  border: 0;
}

.r4m-org-block + .r4m-org-block {
  margin-top: clamp(1.35rem, 3vw, 2rem);
  padding-top: clamp(1.35rem, 3vw, 2rem);
  border-top: 1px solid var(--line);
}

.r4m-org-block:first-child {
  padding-top: 0;
  border-top: 0;
}

.r4m-org-block__title {
  margin: 0;
  font-size: clamp(1.05rem, 2.2vw, 1.28rem);
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -0.02em;
  color: #111827;
}

.r4m-org-block > .r4m-org-block__title {
  margin: 0 0 0.85rem;
}

.r4m-org-block__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.85rem 1.25rem;
  margin: 0 0 1.15rem;
}

#r4m-org-team .r4m-org-block__title {
  margin: 0;
  font-size: clamp(1.55rem, 3.4vw, 2.15rem);
  line-height: 1.15;
  letter-spacing: -0.025em;
}

.r4m-org-block__kontakt.btn {
  flex: 0 0 auto;
  text-decoration: none;
  white-space: nowrap;
}

.r4m-org-block__grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: clamp(0.85rem, 2vw, 1.15rem);
  align-items: stretch;
}

.r4m-org-person {
  display: grid;
  grid-template-rows: 3.4rem 6.5rem auto 1.5rem;
  align-items: start;
  justify-items: center;
  gap: 0.45rem;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 1.1rem 0.85rem 1.15rem;
  border: 1px solid #d5dae2;
  border-radius: 0;
  background: #fff;
  color: #111827;
  text-align: center;
  box-shadow: 0 2px 10px rgba(17, 24, 39, 0.03);
}

.r4m-org-person.has-photo {
  padding-top: 1.1rem;
}

.r4m-org-person__photo {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 6.5rem;
  height: 6.5rem;
  margin: 0;
  overflow: hidden;
  border-radius: 50%;
  background: var(--bg);
  border: 1px solid var(--line);
  flex-shrink: 0;
}

.r4m-org-person__photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
}

.r4m-org-person.is-lead {
  border-color: rgba(236, 126, 52, 0.55);
  background: #fff;
}

.r4m-org-person.is-vacant {
  border-style: dashed;
  border-color: #c5ccd6;
  background: var(--bg);
  color: var(--muted);
  justify-content: center;
}

.r4m-org-person__name {
  display: -webkit-box;
  max-width: 100%;
  overflow: hidden;
  margin: 0;
  align-self: start;
  font-size: clamp(0.88rem, 1.5vw, 0.98rem);
  font-weight: 600;
  line-height: 1.3;
  color: var(--muted);
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
}

.r4m-org-person.is-vacant .r4m-org-person__name {
  color: var(--muted);
}

.r4m-org-person__role {
  display: -webkit-box;
  max-width: 100%;
  overflow: hidden;
  margin: 0;
  align-self: center;
  font-size: clamp(0.95rem, 1.8vw, 1.12rem);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.015em;
  color: #111827;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  line-clamp: 3;
}

.r4m-org-person.is-vacant .r4m-org-person__role {
  color: var(--muted);
}

.r4m-org-person__badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 1.35rem;
  margin: 0;
  padding: 0.12rem 0.4rem;
  font-size: 0.65rem;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: 0.02em;
  color: var(--muted);
  background: var(--bg);
  border: 1px solid var(--line);
}

.r4m-org-person__badge.is-empty {
  visibility: hidden;
  border-color: transparent;
  background: transparent;
}

.r4m-org-person__email {
  display: block;
  max-width: 100%;
  margin: 0.15rem 0 0;
  font-size: 0.62rem;
  line-height: 1.3;
  color: var(--orange);
  text-decoration: none;
  word-break: break-all;
}

.r4m-org-person__email:hover,
.r4m-org-person__email:focus-visible {
  text-decoration: underline;
  outline: none;
}

.r4m-org-block__grid {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

.r4m-blindbewerbung {
  margin-top: clamp(1.25rem, 3vw, 1.75rem);
  padding: clamp(1.1rem, 2.5vw, 1.5rem);
  border: 1px solid #d5dae2;
  background: #f8fafc;
}

.r4m-blindbewerbung__title {
  margin: 0 0 0.45rem;
  font-size: clamp(1.05rem, 2.2vw, 1.22rem);
  font-weight: 700;
  line-height: 1.25;
  color: #111827;
}

.r4m-blindbewerbung__intro,
.r4m-blindbewerbung__hint {
  margin: 0 0 0.85rem;
  font-size: 0.92rem;
  line-height: 1.45;
  color: #5a6578;
}

.r4m-blindbewerbung__hint {
  margin-top: 0.75rem;
  margin-bottom: 0.85rem;
  font-size: 0.82rem;
}

.r4m-blindbewerbung-form .r4m-form-field--full {
  grid-column: 1 / -1;
}

.r4m-file-picker {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.65rem 0.85rem;
}

.r4m-file-picker__input {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.r4m-file-picker__btn {
  appearance: none;
  margin: 0;
  padding: 0.55rem 0.9rem;
  border: 1px solid #c5ccd6;
  border-radius: 4px;
  background: #f4f6f8;
  color: #1a2332;
  font: inherit;
  font-size: 0.95rem;
  line-height: 1.2;
  cursor: pointer;
}

.r4m-file-picker__btn:hover,
.r4m-file-picker__btn:focus-visible {
  border-color: var(--orange, #e36a1e);
  outline: none;
}

.r4m-file-picker__name {
  color: #5a6575;
  font-size: 0.95rem;
  word-break: break-word;
}

@media (max-width: 1100px) {
  .r4m-org-block__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 700px) {
  .r4m-org-block__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .r4m-org-person {
    grid-template-rows: 3.2rem 5.25rem auto 1.5rem;
  }

  .r4m-org-person__photo {
    width: 5.25rem;
    height: 5.25rem;
  }

  .r4m-org-block__head {
    flex-direction: column;
    align-items: flex-start;
  }
}

@media (max-width: 420px) {
  .r4m-org-block__grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 640px) {
  .r4m-org-block__grid {
    gap: 0.75rem;
  }
}


.r4m-org-open__list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 0.65rem;
}

.r4m-org-open__item {
  margin: 0;
  list-style: none;
  padding-left: 0;
}

.r4m-org-open__list > .r4m-org-open__item::before {
  content: none !important;
  display: none !important;
}

.r4m-org-open__btn.btn {
  width: auto;
  max-width: 100%;
  white-space: normal;
  text-decoration: none;
  text-align: center;
}

.r4m-org-block__title::before,
.r4m-org-open .r4m-org-block__title::before {
  content: none !important;
  display: none !important;
}

/* ——— Aktuelles (expandable tiles, aligned with .unternehmen-hub__tile) ——— */
.r4m-aktuelles__list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: clamp(0.85rem, 2.5vw, 1.25rem);
}

.r4m-aktuelles__item {
  margin: 0;
  padding-left: 0;
  list-style: none;
}

.r4m-aktuelles__list > .r4m-aktuelles__item::before {
  content: none !important;
  display: none !important;
}

.r4m-aktuelles__entry {
  border: 1px solid #d5dae2;
  background: #fff;
  transition:
    border-color 0.16s ease,
    background 0.16s ease,
    box-shadow 0.16s ease;
}

.r4m-aktuelles__item.is-open .r4m-aktuelles__entry,
.r4m-aktuelles__entry:has(.r4m-aktuelles__tile:hover),
.r4m-aktuelles__entry:has(.r4m-aktuelles__tile:focus-visible) {
  border-color: var(--orange);
  background: #fff8f3;
  box-shadow: 0 10px 24px rgba(17, 24, 39, 0.08);
}

.r4m-aktuelles__tile {
  display: flex;
  align-items: center;
  gap: clamp(0.85rem, 2.5vw, 1.25rem);
  box-sizing: border-box;
  width: 100%;
  min-height: clamp(5.5rem, 14vw, 7.5rem);
  margin: 0;
  padding: clamp(1.1rem, 3vw, 1.65rem) clamp(1.25rem, 3.5vw, 1.85rem);
  border: 0;
  background: transparent;
  color: #111827;
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: none;
}

.r4m-aktuelles__tile:hover,
.r4m-aktuelles__tile:focus-visible {
  outline: none;
}

.r4m-aktuelles__icon {
  flex: 0 0 auto;
  width: 0.75rem;
  height: 0.75rem;
  margin-left: auto;
  border-right: 2px solid var(--orange);
  border-bottom: 2px solid var(--orange);
  transform: rotate(45deg) translateY(-0.15em);
  transition: transform 0.2s ease;
}

.r4m-aktuelles__item.is-open .r4m-aktuelles__icon {
  transform: rotate(-135deg) translateY(0.1em);
}

.r4m-aktuelles__visual {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.4rem;
  flex: 0 0 auto;
}

.r4m-aktuelles__date {
  display: block;
  font-size: clamp(0.78rem, 1.6vw, 0.88rem);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: 0.03em;
  color: var(--muted);
}

.r4m-aktuelles__media {
  display: block;
  width: clamp(5.5rem, 18vw, 8.5rem);
  overflow: hidden;
  border: 1px solid var(--line);
  background: var(--bg);
}

.r4m-aktuelles__media img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

.r4m-aktuelles__title {
  flex: 1 1 auto;
  min-width: 0;
  font-size: clamp(1.15rem, 2.4vw, 1.45rem);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.02em;
}

.r4m-aktuelles__title::before,
.r4m-aktuelles__date::before,
.r4m-aktuelles-block__title::before {
  content: none !important;
  display: none !important;
}

.r4m-aktuelles-block__title {
  margin: clamp(1.5rem, 3.5vw, 2.25rem) 0 0.85rem;
  font-size: clamp(1.05rem, 2.2vw, 1.28rem);
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -0.02em;
  color: #111827;
}

.r4m-aktuelles-newsletter {
  margin-top: clamp(1.5rem, 3.5vw, 2.25rem);
  padding-top: clamp(1.35rem, 3vw, 2rem);
  border-top: 1px solid var(--line);
}

.r4m-aktuelles-newsletter__actions {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 0.65rem;
}

.r4m-aktuelles-newsletter__action {
  margin: 0;
  padding-left: 0;
  list-style: none;
}

.r4m-aktuelles-newsletter__actions > .r4m-aktuelles-newsletter__action::before {
  content: none !important;
  display: none !important;
}

.r4m-aktuelles-newsletter__btn.btn {
  width: auto;
  max-width: 100%;
  white-space: normal;
  text-decoration: none;
  text-align: center;
}

.r4m-aktuelles-newsletter__btn--link {
  cursor: pointer;
}

.r4m-aktuelles-newsletter__panel {
  margin-top: 0.75rem;
  padding: clamp(1.1rem, 2.8vw, 1.45rem) clamp(1.25rem, 3.5vw, 1.85rem);
  border: 1px solid var(--line);
  background: #fff;
}

.r4m-aktuelles-newsletter.is-signup-open .r4m-aktuelles-newsletter__panel {
  border-color: rgba(236, 126, 52, 0.45);
  background: #fff8f3;
}

.r4m-aktuelles-newsletter__lead {
  margin: 0 0 1rem;
  font-size: clamp(1rem, 2.1vw, 1.0625rem);
  line-height: 1.5;
  color: var(--text);
}

.r4m-aktuelles-newsletter__notice {
  margin: 0 0 0.85rem;
  padding: 0.7rem 0.85rem;
  border-radius: 6px;
  font-size: 0.95rem;
  line-height: 1.45;
}

.r4m-aktuelles-newsletter__notice--ok {
  background: #ecfdf3;
  border: 1px solid #bbf7d0;
  color: #166534;
}

.r4m-aktuelles-newsletter__notice--err {
  background: #fef2f2;
  border: 1px solid #fecaca;
  color: #991b1b;
}

.r4m-nl-status__panel > p {
  margin: 0 0 1rem;
  font-size: clamp(1.05rem, 2.2vw, 1.2rem);
  line-height: 1.55;
  max-width: 40rem;
}

.r4m-nl-status__extra {
  margin: 0 0 1.25rem;
  max-width: 40rem;
}

.r4m-nl-status__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 0.5rem;
}

.r4m-aktuelles-newsletter__form p {
  margin: 0 0 0.85rem;
}

.r4m-aktuelles-newsletter__form p > label {
  display: block;
  margin-bottom: 0.35rem;
  font-weight: 500;
  color: #111827;
}

.r4m-newsletter-archive {
  margin-top: 1.5rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--line);
  scroll-margin-top: 6rem;
}

.r4m-newsletter-archive__title {
  margin: 0 0 0.85rem;
  font-size: 1.05rem;
  font-weight: 700;
  color: #111827;
}

.r4m-newsletter-archive__list {
  margin: 0;
  padding: 0;
  list-style: none;
  border: 1px solid var(--line);
  background: var(--white);
}

.r4m-newsletter-archive__item {
  margin: 0;
  border-bottom: 1px solid var(--line);
}

.r4m-newsletter-archive__item:last-child {
  border-bottom: none;
}

.r4m-newsletter-archive__item::before {
  content: none !important;
  display: none !important;
}

.r4m-newsletter-archive__link {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.45rem 0.85rem;
  padding: 0.85rem 1rem;
  text-decoration: none;
  color: var(--text);
  transition: background 0.16s ease, color 0.16s ease;
}

.r4m-newsletter-archive__link:hover,
.r4m-newsletter-archive__link:focus-visible {
  background: rgba(236, 126, 52, 0.06);
  color: var(--orange);
  outline: none;
}

.r4m-newsletter-archive__name {
  flex: 1 1 auto;
  min-width: 0;
  font-weight: 600;
}

.r4m-newsletter-archive__date {
  color: var(--muted);
  font-size: 0.9rem;
}

.r4m-newsletter-archive__badge {
  flex: 0 0 auto;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--muted);
}

.r4m-aktuelles__panel {
  border-top: 1px solid var(--line);
}

.r4m-aktuelles__item.is-open .r4m-aktuelles__panel {
  border-top-color: rgba(236, 126, 52, 0.35);
}

.r4m-aktuelles__body {
  padding: clamp(1.1rem, 2.8vw, 1.45rem) clamp(1.5rem, 4vw, 2.15rem) clamp(1.4rem, 3.5vw, 1.85rem);
  font-size: clamp(1rem, 2.1vw, 1.0625rem);
  line-height: 1.6;
  color: var(--text);
}

.r4m-aktuelles__body > :first-child {
  margin-top: 0;
}

.r4m-aktuelles__body > :last-child {
  margin-bottom: 0;
}

.r4m-aktuelles__body p {
  margin: 0 0 0.95rem;
}

.r4m-aktuelles__body ul {
  margin: 0 0 1rem;
  padding-left: 1.35rem;
  list-style: disc;
}

.r4m-aktuelles__body ul > li {
  position: static;
  padding-left: 0;
}

.r4m-aktuelles__body ul > li::before {
  content: none !important;
  display: none !important;
}

.r4m-aktuelles__body li + li {
  margin-top: 0.45rem;
}

.r4m-aktuelles__body strong {
  font-size: inherit;
}

.r4m-aktuelles__body a {
  color: #111827;
  font-weight: 500;
  text-decoration: underline;
  text-decoration-color: rgba(236, 126, 52, 0.45);
  text-underline-offset: 3px;
}

.r4m-aktuelles__body a:hover,
.r4m-aktuelles__body a:focus-visible {
  color: var(--orange);
}

@media (max-width: 640px) {
  .r4m-aktuelles__tile {
    flex-wrap: wrap;
  }

  .r4m-aktuelles__visual {
    align-items: stretch;
    width: 100%;
  }

  .r4m-aktuelles__media {
    width: 100%;
  }

  .r4m-aktuelles__icon {
    margin-left: 0;
  }
}

/* ——— Rechtliches (Impressum, Datenschutz, AGB) ——— */
.r4m-legal-hub__cta {
  margin-bottom: 1.5rem;
}

.r4m-legal-hub__grid {
  display: grid;
  gap: 0.75rem;
  align-items: stretch;
}

.r4m-legal-hub__item {
  display: flex;
  min-width: 0;
}

.r4m-legal-hub__tile {
  flex: 1 1 auto;
  height: 100%;
  min-height: 0;
  padding-top: 1.15rem;
  padding-bottom: 1.15rem;
}

@media (min-width: 640px) {
  .r4m-legal-hub__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.r4m-legal {
  max-width: 52rem;
  font-size: clamp(0.98rem, 2vw, 1.0625rem);
  line-height: 1.65;
  color: var(--text);
}

.r4m-legal__meta {
  margin: 0 0 1.25rem;
  font-size: 0.92rem;
  color: #6b7280;
}

.r4m-legal h2 {
  margin: 1.75rem 0 0.65rem;
  font-size: clamp(1.05rem, 2.2vw, 1.25rem);
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -0.02em;
  color: #111827;
}

.r4m-legal h3 {
  margin: 1.25rem 0 0.5rem;
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.35;
  color: #1f2937;
}

.r4m-legal__publisher {
  margin: 0 0 1.5rem;
  padding: 1rem 1.1rem;
  border: 1px solid var(--line, #e5e7eb);
  background: #f9fafb;
  line-height: 1.55;
}

.r4m-legal h2::before {
  content: none !important;
  display: none !important;
}

.r4m-legal h2:first-of-type {
  margin-top: 0.5rem;
}

.r4m-legal p {
  margin: 0 0 0.95rem;
}

.r4m-legal ul {
  margin: 0 0 1rem;
  padding-left: 1.35rem;
  list-style: disc;
}

.r4m-legal ul > li {
  position: static;
  padding-left: 0;
}

.r4m-legal ul > li::before {
  content: none !important;
  display: none !important;
}

.r4m-legal li + li {
  margin-top: 0.4rem;
}

.r4m-legal a {
  color: #111827;
  font-weight: 500;
  text-decoration: underline;
  text-decoration-color: rgba(236, 126, 52, 0.45);
  text-underline-offset: 3px;
}

.r4m-legal a:hover,
.r4m-legal a:focus-visible {
  color: var(--orange);
}

.panel--legal .r4m-legal {
  padding-top: 0.25rem;
}


/* ——— Raumvermietung (Marketing + Buchung) ——— */
.ausbildungen-page-hero--raeume .ausbildungen-page-hero__photo {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 42%;
}

.ausbildungen-page-hero--raeume .ausbildungen-page-hero__actions {
  margin-top: 1rem;
}

.r4m-rooms-page {
  display: flex;
  flex-direction: column;
  gap: clamp(1.25rem, 3vw, 2rem);
}

.r4m-rooms-page .panel {
  padding: clamp(1.25rem, 3vw, 1.75rem);
}

/* Author display:flex would otherwise fight the hidden attribute */
.r4m-rooms-view[hidden],
.r4m-room-detail[hidden],
.r4m-room-wizard__step[hidden] {
  display: none !important;
}

.r4m-rooms-list .r4m-rooms-list__title {
  margin: 0 0 1.1rem;
  max-width: 44rem;
  font-size: 1.125rem;
  line-height: 1.45;
  font-weight: 600;
  letter-spacing: 0;
}

.r4m-rooms-list__lede {
  margin: 0.5rem 0 1.25rem;
  color: #6b7280;
  max-width: 48ch;
}

.r4m-rooms-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(1rem, 2.5vw, 1.5rem);
}

.r4m-room-card {
  display: flex;
  flex-direction: column;
  border: 1px solid #d5dae2;
  background: #fff;
  overflow: hidden;
  transition:
    border-color 0.18s ease,
    box-shadow 0.18s ease;
}

.r4m-room-card:hover,
.r4m-room-card:focus-visible {
  border-color: #c5cad4;
  box-shadow: 0 14px 36px rgba(17, 24, 39, 0.09);
}

.r4m-room-card--large .r4m-room-card__media,
.r4m-room-card--small .r4m-room-card__media {
  aspect-ratio: 16 / 9;
}

.r4m-room-card__media {
  position: relative;
  display: block;
  overflow: hidden;
  background: #e5e7eb;
}

/* Beat main.section .container.panel > div img { height: auto } */
main.section .container.panel .r4m-room-card__media img {
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
}

.r4m-room-card__badge {
  position: absolute;
  top: 0.75rem;
  left: 0.75rem;
  padding: 0.3rem 0.65rem;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #fff;
  background: rgba(17, 24, 39, 0.72);
  border-radius: 2px;
}

.r4m-room-card__body {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 0.5rem;
  padding: clamp(1rem, 2.5vw, 1.35rem);
}

.r4m-room-card__name {
  margin: 0;
  font-size: clamp(1.25rem, 2.6vw, 1.5rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.15;
}

.r4m-room-card__capacity {
  font-size: 0.88rem;
  font-weight: 600;
  color: #6b7280;
}

.r4m-room-card__ideal {
  display: block;
  margin-top: 0.35rem;
  font-size: 0.86rem;
  color: #111827;
  line-height: 1.35;
}

.r4m-room-card__desc {
  margin: 0;
  color: #4b5563;
  line-height: 1.5;
  font-size: 0.95rem;
}

.r4m-rooms-back {
  margin: 0 0 0.75rem;
}

.r4m-rooms-back__btn {
  appearance: none;
  border: 0;
  background: transparent;
  padding: 0;
  font: inherit;
  font-weight: 600;
  color: #374151;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.r4m-rooms-back__btn:hover,
.r4m-rooms-back__btn:focus-visible {
  color: var(--orange);
}

.r4m-room-card--pick {
  width: 100%;
  padding: 0;
  font: inherit;
  text-align: left;
  cursor: pointer;
  color: inherit;
}

.r4m-room-card--pick .r4m-room-card__body {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 0.35rem;
}

.r4m-room-card--pick .r4m-room-card__name {
  display: block;
}

.r4m-room-card--pick .r4m-room-card__open {
  margin-top: auto;
  padding-top: 0.75rem;
  font-weight: 700;
  color: var(--orange);
  font-size: 0.95rem;
}

.r4m-room-detail__hero {
  position: relative;
  margin: 0;
  overflow: hidden;
  background: #1f2937;
  aspect-ratio: 16 / 9;
  max-width: none;
}

.r4m-room-detail__hero-open {
  appearance: none;
  display: block;
  position: relative;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: zoom-in;
  font: inherit;
  color: inherit;
  text-align: left;
}

.r4m-room-detail__hero-badge {
  position: absolute;
  top: 0.85rem;
  right: 0.85rem;
  z-index: 2;
  padding: 0.35rem 0.65rem;
  border-radius: 2px;
  background: rgba(17, 24, 39, 0.72);
  color: #fff;
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.02em;
}

.r4m-room-gallery {
  margin: 0 0 1.25rem;
}

.r4m-room-gallery__thumbs {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(5.5rem, 1fr));
  gap: 0.5rem;
  margin-top: 0.5rem;
}

.r4m-room-gallery__thumb {
  appearance: none;
  display: block;
  margin: 0;
  padding: 0;
  border: 2px solid transparent;
  background: #e5e7eb;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  cursor: pointer;
}

.r4m-room-gallery__thumb img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

main.section .container.panel .r4m-room-gallery__thumb img {
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
}

.r4m-room-gallery__thumb:hover,
.r4m-room-gallery__thumb:focus-visible {
  border-color: #9ca3af;
  outline: none;
}

.r4m-room-gallery__thumb.is-active {
  border-color: var(--orange);
}

.r4m-room-lightbox[hidden] {
  display: none !important;
}

.r4m-room-lightbox {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
}

html.r4m-room-lightbox-open {
  overflow: hidden;
}

.r4m-room-lightbox__backdrop {
  position: absolute;
  inset: 0;
  margin: 0;
  padding: 0;
  border: 0;
  background: rgba(17, 24, 39, 0.82);
  cursor: pointer;
}

.r4m-room-lightbox__dialog {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.5rem;
  width: min(100%, 960px);
}

.r4m-room-lightbox__figure {
  margin: 0;
  background: #111827;
  border: 1px solid rgba(255, 255, 255, 0.12);
}

.r4m-room-lightbox__img {
  display: block;
  width: 100%;
  max-height: min(78vh, 720px);
  object-fit: contain;
  background: #111827;
}

.r4m-room-lightbox__caption {
  margin: 0;
  padding: 0.55rem 0.75rem;
  color: #fff;
  font-size: 0.9rem;
  font-weight: 600;
  text-align: center;
  background: rgba(17, 24, 39, 0.92);
}

.r4m-room-lightbox__close,
.r4m-room-lightbox__nav {
  appearance: none;
  border: 1px solid rgba(255, 255, 255, 0.28);
  background: rgba(17, 24, 39, 0.75);
  color: #fff;
  cursor: pointer;
  font: inherit;
  line-height: 1;
}

.r4m-room-lightbox__close {
  position: absolute;
  top: -0.35rem;
  right: -0.15rem;
  z-index: 3;
  width: 2.5rem;
  height: 2.5rem;
  font-size: 1.6rem;
}

.r4m-room-lightbox__nav {
  width: 2.75rem;
  height: 2.75rem;
  font-size: 1.75rem;
}

.r4m-room-lightbox__nav[hidden] {
  visibility: hidden;
}

.r4m-room-lightbox__close:hover,
.r4m-room-lightbox__close:focus-visible,
.r4m-room-lightbox__nav:hover,
.r4m-room-lightbox__nav:focus-visible {
  border-color: var(--orange);
  color: #fff;
  outline: none;
}

@media (max-width: 720px) {
  .r4m-room-lightbox__dialog {
    grid-template-columns: 1fr;
    gap: 0.65rem;
  }

  .r4m-room-lightbox__nav {
    justify-self: center;
  }

  .r4m-room-lightbox__nav--prev {
    order: 2;
  }

  .r4m-room-lightbox__figure {
    order: 1;
  }

  .r4m-room-lightbox__nav--next {
    order: 3;
  }
}

/* Match Ausbildungen course block: white card on paper canvas */
main.section .r4m-room-detail.ausbildungen-rich-course.panel,
.r4m-rooms-page .r4m-room-detail.panel {
  background: #fff;
  border: 1px solid #d8dee8;
  box-shadow: none;
  padding: clamp(1.15rem, 2.5vw, 1.5rem) clamp(1.25rem, 2.5vw, 1.5rem);
}

.r4m-room-detail .ausbildungen-rich-course__shell {
  background: transparent;
}

.r4m-room-detail__hero-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

main.section .container.panel .r4m-room-detail__hero-img {
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
}

.r4m-room-detail__hero-scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top,
    rgba(17, 24, 39, 0.78) 0%,
    rgba(17, 24, 39, 0.35) 45%,
    rgba(17, 24, 39, 0.12) 100%
  );
  pointer-events: none;
}

.r4m-room-detail__hero-title,
main.section .r4m-room-detail__hero .r4m-room-detail__hero-title {
  position: absolute;
  left: clamp(1rem, 3vw, 1.5rem);
  right: clamp(1rem, 3vw, 1.5rem);
  bottom: clamp(0.85rem, 2.5vw, 1.25rem);
  z-index: 1;
  margin: 0;
  color: #ffffff;
  font-size: clamp(1.5rem, 3.2vw, 2rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.15;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.55);
}

.r4m-room-wizard__progress {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 1.25rem;
  margin: 1.1rem 0 0;
  padding: 0;
  list-style: none;
}

.r4m-room-wizard__progress-item {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  color: #9ca3af;
  font-size: 0.9rem;
  font-weight: 600;
}

.r4m-room-wizard__progress-item.is-done {
  color: #374151;
}

.r4m-room-wizard__progress-item.is-current {
  color: #111827;
}

.r4m-room-wizard__progress-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.65rem;
  height: 1.65rem;
  border-radius: 50%;
  border: 2px solid currentColor;
  font-size: 0.82rem;
  font-weight: 700;
  line-height: 1;
}

.r4m-room-wizard__progress-item.is-current .r4m-room-wizard__progress-num {
  background: var(--orange);
  border-color: var(--orange);
  color: #fff;
}

.r4m-room-wizard__progress-item.is-done .r4m-room-wizard__progress-num {
  background: #111827;
  border-color: #111827;
  color: #fff;
}

.r4m-room-wizard__nav {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 1.35rem;
}

.r4m-room-booking__addon-label {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  margin-top: 1rem;
  font-weight: 600;
  font-size: 0.95rem;
}

.r4m-room-booking__addon-label select {
  max-width: 28rem;
  font: inherit;
  font-weight: 500;
}

.panel--raeume-booking {
  border-top: 1px solid #e5e7eb;
  margin-top: 0.5rem;
  padding-top: clamp(1.5rem, 3vw, 2rem);
}

.r4m-room-booking {
  display: flex;
  flex-direction: column;
  gap: clamp(1.25rem, 3vw, 1.75rem);
}

.r4m-room-booking__calendar,
.r4m-room-booking__form,
.r4m-room-booking__header,
#raum-buchen,
#raeume-uebersicht,
.r4m-rooms-view {
  scroll-margin-top: 5.5rem;
}

.r4m-room-booking__title {
  margin: 0.35rem 0 0;
  font-size: clamp(1.25rem, 2.6vw, 1.5rem);
  font-weight: 700;
}

.r4m-room-booking__heading {
  margin: 0 0 1rem;
  font-size: clamp(1.05rem, 2.2vw, 1.2rem);
  font-weight: 700;
}

.r4m-room-booking__lede {
  margin: 0.5rem 0 0;
  max-width: 62ch;
  color: #4b5563;
}

.r4m-room-booking__selected {
  margin: 0.75rem 0 0;
  padding: 0.65rem 0.9rem;
  font-weight: 600;
  color: #111827;
  background: #f3f4f6;
  border: 1px solid #e5e7eb;
  border-radius: 2px;
}

.r4m-room-picker {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.65rem;
}

.r4m-room-picker__card {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.55rem;
  border: 1px solid #d5dae2;
  background: #fff;
  cursor: pointer;
  font: inherit;
  text-align: left;
  transition:
    border-color 0.16s ease,
    background 0.16s ease,
    box-shadow 0.16s ease;
}

.r4m-room-picker__card:hover,
.r4m-room-picker__card:focus-visible {
  border-color: #9ca3af;
  background: #f9fafb;
}

.r4m-room-picker__card.is-selected {
  border-color: #9ca3af;
  background: #f9fafb;
  box-shadow: 0 4px 14px rgba(17, 24, 39, 0.06);
}

.r4m-room-picker__thumb {
  flex: 0 0 4.5rem;
  width: 4.5rem;
  height: 3rem;
  overflow: hidden;
  background: #e5e7eb;
}

.r4m-room-picker__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.r4m-room-picker__text {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  min-width: 0;
}

.r4m-room-picker__name {
  font-weight: 700;
  font-size: 1rem;
}

.r4m-room-picker__meta {
  font-size: 0.82rem;
  color: #6b7280;
}

.r4m-room-booking__month-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  margin-bottom: 1rem;
}

.r4m-room-booking__month-label {
  min-width: 12rem;
  text-align: center;
  font-weight: 700;
}

.r4m-room-booking__calendar-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 0.35rem;
}

.r4m-room-booking__cal-head {
  text-align: center;
  font-size: 0.75rem;
  font-weight: 700;
  color: #6b7280;
  padding: 0.25rem;
}

.r4m-room-booking__cal-empty {
  min-height: 2.5rem;
}

.r4m-room-booking__cal-day {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.15rem;
  min-height: 2.75rem;
  border: 2px solid #d5dae2;
  background: #fff;
  font: inherit;
  cursor: pointer;
  border-radius: 4px;
  padding: 0.2rem;
  transition:
    border-color 0.15s ease,
    background-color 0.15s ease,
    box-shadow 0.15s ease;
}

.r4m-room-booking__cal-day-num {
  font-weight: 700;
  font-size: 0.95rem;
  line-height: 1.1;
}

.r4m-room-booking__cal-day-dot {
  width: 0.45rem;
  height: 0.45rem;
  border-radius: 50%;
  background: currentColor;
  opacity: 0.85;
}

.r4m-room-booking__cal-day.is-avail-free {
  border-color: #86efac;
  background: #ecfdf5;
  color: #166534;
}

.r4m-room-booking__cal-day.is-avail-partial {
  border-color: #fcd34d;
  background: linear-gradient(135deg, #fffbeb 0%, #fffbeb 48%, #fef3c7 48%, #fef3c7 100%);
  color: #92400e;
}

.r4m-room-booking__cal-day.is-avail-full {
  border-color: #fca5a5;
  background: #fef2f2;
  color: #991b1b;
}

.r4m-room-booking__cal-day.is-avail-closed {
  border-color: #e5e7eb;
  background: #f3f4f6;
  color: #9ca3af;
}

.r4m-room-booking__cal-day:hover:not(:disabled):not(.is-selected) {
  box-shadow: 0 2px 8px rgba(17, 24, 39, 0.1);
  filter: brightness(0.98);
}

.r4m-room-booking__cal-day.is-selected {
  background: #111827;
  border-color: #111827;
  color: #fff;
  box-shadow: 0 4px 12px rgba(17, 24, 39, 0.25);
}

.r4m-room-booking__cal-day.is-selected .r4m-room-booking__cal-day-dot {
  background: #fff;
}

.r4m-room-booking__mode {
  margin: 0 0 1rem;
  padding: 0;
  border: 0;
}

.r4m-room-booking__mode-legend {
  font-weight: 700;
  margin: 0 0 0.55rem;
}

.r4m-room-booking__mode-options {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
}

.r4m-room-booking__mode-option {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  position: relative;
  padding: 0.45rem 0.7rem;
  border: 1px solid transparent;
  background: #f3f4f6;
  cursor: pointer;
  font-size: 0.92rem;
}

.r4m-room-booking__mode-option:has(input:checked) {
  background: #111827;
  color: #fff;
}

.r4m-room-booking__mode-option input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.r4m-room-booking__calendar-body.is-locked {
  opacity: 0.55;
  pointer-events: none;
  user-select: none;
}

.r4m-room-booking__calendar-body.is-locked .r4m-room-booking__month-nav button {
  cursor: not-allowed;
}

.r4m-room-booking__mode-hint,
.r4m-room-booking__selected-dates-note {
  margin: 0.55rem 0 0;
  color: #4b5563;
  font-size: 0.9rem;
}

.r4m-room-booking__weekly-opts {
  margin: 0 0 1rem;
  display: grid;
  gap: 0.85rem;
}

.r4m-room-booking__weekly-opts[hidden] {
  display: none !important;
}

.r4m-room-booking__weekday-picker {
  margin: 0;
  padding: 0;
  border: 0;
  min-width: 0;
}

.r4m-room-booking__weekday-picker legend {
  padding: 0;
  margin: 0 0 0.45rem;
  font-weight: 700;
  font-size: 0.95rem;
}

.r4m-room-booking__weekday-options {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
}

.r4m-room-booking__weekday-option {
  display: inline-flex;
  align-items: center;
  margin: 0;
  cursor: pointer;
}

.r4m-room-booking__weekday-option input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.r4m-room-booking__weekday-option span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.75rem;
  min-height: 2.5rem;
  padding: 0.35rem 0.65rem;
  border: 0;
  background: var(--dark, #111827);
  color: var(--white, #fff);
  font-weight: 700;
  font-size: 0.95rem;
  line-height: 1;
  clip-path: polygon(0 0, 100% 0, 100% var(--r4m-btn-slope), 0 100%);
  -webkit-clip-path: polygon(0 0, 100% 0, 100% var(--r4m-btn-slope), 0 100%);
}

.r4m-room-booking__weekday-options > .r4m-room-booking__weekday-option:nth-child(even) span {
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 var(--r4m-btn-slope));
  -webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 0 var(--r4m-btn-slope));
}

.r4m-room-booking__weekday-option input:checked + span {
  background: var(--orange, #e4572e);
  color: var(--white, #fff);
}

.r4m-room-booking__weekday-option input:focus-visible + span {
  outline: 2px solid var(--orange, #e4572e);
  outline-offset: 2px;
}

.r4m-room-booking__weekday-hint {
  margin: 0.45rem 0 0;
  color: #6b7280;
  font-size: 0.88rem;
  line-height: 1.4;
}

.r4m-room-booking__weeks {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  font-weight: 600;
  font-size: 0.95rem;
}

.r4m-room-booking__weekly-opts input[data-r4m-recurring-weeks] {
  display: block;
  max-width: 6rem;
  font: inherit;
  font-weight: 600;
  padding: 0.4rem 0.55rem;
}

.r4m-room-booking__selected-dates,
.r4m-room-booking__review {
  margin: 1rem 0;
  padding: 0.85rem 1rem;
  border: 1px solid var(--line, #d1d5db);
  background: #fafafa;
}

.r4m-room-booking__selected-dates-title,
.r4m-room-booking__review-title {
  margin: 0 0 0.55rem;
  font-size: 1rem;
}

.r4m-room-booking__bulk-slots {
  margin: 0 0 0.85rem;
  padding: 0.75rem 0.8rem;
  border: 1px solid #d1d5db;
  background: #fff;
}

.r4m-room-booking__bulk-slots-label {
  margin: 0 0 0.55rem;
  font-size: 0.95rem;
  font-weight: 700;
  color: #111827;
}

.r4m-room-booking__bulk-slots-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem;
}

.r4m-room-booking__bulk-slot-btn {
  flex: 1 1 7.5rem;
  justify-content: center;
  text-align: center;
}

.r4m-room-booking__bulk-slots[hidden],
.r4m-room-booking__slot-pick[hidden],
.r4m-room-booking__selected-dates[hidden] {
  display: none !important;
}

.r4m-room-booking__bulk-slots-hint {
  margin: 0.55rem 0 0;
  font-size: 0.88rem;
  color: #6b7280;
  line-height: 1.4;
}

.r4m-room-booking__selected-dates-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.r4m-room-booking__selected-date-item {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.65rem 0.85rem;
  padding: 0.7rem 0.8rem;
  background: #fff;
  border: 1px solid #e5e7eb;
}

.r4m-room-booking__selected-date-label {
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.35;
  min-width: 12rem;
  flex: 1 1 14rem;
}

.r4m-room-booking__selected-slot-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-left: auto;
}

.r4m-room-booking__selected-slot-btn {
  min-height: 2.5rem;
  padding: 0.45rem 0.8rem;
  font-size: 0.95rem;
  line-height: 1.25;
}

.r4m-room-booking__selected-slot-btn.is-booked,
.r4m-room-booking__selected-slot-btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
  text-decoration: line-through;
  pointer-events: none;
}

.r4m-room-booking__bulk-slot-btn.is-booked,
.r4m-room-booking__bulk-slot-btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
  text-decoration: line-through;
}

.r4m-room-booking__selected-date-item.is-focus {
  border-color: #111827;
  box-shadow: 0 0 0 1px #111827;
}

.r4m-room-booking__selected-date-time {
  font-weight: 600;
  white-space: nowrap;
}

.r4m-room-booking__selected-date-missing {
  color: #92400e;
  font-weight: 600;
}

.r4m-room-booking__review--final {
  margin: 1.25rem 0 1rem;
  padding: 0.85rem 0.9rem;
  border: 1px solid #d1d5db;
  background: #f9fafb;
}

.r4m-room-booking__order-summary {
  margin: 0 0 1.25rem;
  padding: 0.9rem 1rem;
  border: 1px solid #d1d5db;
  background: #f9fafb;
}

.r4m-room-booking__order-summary .r4m-room-booking__review-actions {
  margin: 0.85rem 0 0;
}

.r4m-room-booking__order-summary-title {
  margin: 0 0 0.75rem;
  font-size: 1.05rem;
}

.r4m-room-booking__order-lines {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
}

.r4m-room-booking__order-line {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.55rem 0.6rem;
  background: #fff;
  border: 1px solid #e5e7eb;
}

.r4m-room-booking__order-line-main {
  display: flex;
  flex: 1;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.35rem 1rem;
  min-width: 0;
}

.r4m-room-booking__order-line-label {
  flex: 1 1 12rem;
  line-height: 1.35;
}

.r4m-room-booking__order-line-price {
  font-weight: 700;
  white-space: nowrap;
}

.r4m-room-booking__order-line-actions {
  flex-shrink: 0;
  gap: 0.35rem;
}

.r4m-room-booking__order-line-actions.btn-group > :is(a, button).btn {
  min-height: 2rem;
  min-width: 2rem;
  padding: 0.35rem 0.55rem;
  font-size: 0.95rem;
  line-height: 1;
}

.r4m-room-booking__order-total {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  margin-top: 0.85rem;
  padding-top: 0.75rem;
  border-top: 1px solid #d1d5db;
  font-size: 1.05rem;
}

.r4m-room-booking__next-steps {
  margin: 0.5rem 0 1rem;
  padding-left: 1.25rem;
  color: #374151;
  line-height: 1.5;
}

.r4m-room-booking__success-summary {
  margin: 1rem 0 1.25rem;
}

.r4m-room-booking__date-remove {
  appearance: none;
  border: 0;
  background: transparent;
  color: #991b1b;
  text-decoration: underline;
  cursor: pointer;
  font: inherit;
  font-size: 0.88rem;
  padding: 0;
}

.r4m-room-booking__review-actions {
  margin: 0.75rem 0 0;
}

.r4m-room-wizard__nav--step1 {
  margin-top: 1rem;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.75rem;
}

.r4m-room-booking__step1-hints {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 0.4rem;
  width: 100%;
}

.r4m-room-booking__step1-hint {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  margin: 0;
  color: #4b5563;
  font-size: 0.9rem;
  line-height: 1.35;
}

.r4m-room-booking__step1-hint-icon {
  flex: 0 0 auto;
  width: 1.15rem;
  height: 1.15rem;
  border-radius: 50%;
  background: #9ca3af;
  color: #fff;
  font-size: 0.75rem;
  font-weight: 700;
  line-height: 1.15rem;
  text-align: center;
}

.r4m-room-wizard__nav--step1 [data-r4m-wizard-next].btn-secondary,
.r4m-room-wizard__nav--step1 [data-r4m-wizard-next]:disabled {
  background: #9ca3af;
  color: #fff;
  cursor: not-allowed;
  opacity: 1;
}

.r4m-room-wizard__nav--step1 [data-r4m-wizard-next].btn-primary:not(:disabled) {
  background: var(--orange);
  color: var(--white);
  cursor: pointer;
}

.r4m-room-booking__cal-day.is-disabled,
.r4m-room-booking__cal-day:disabled {
  cursor: not-allowed;
  opacity: 0.72;
}

.r4m-room-booking__cal-day.is-avail-full:disabled,
.r4m-room-booking__cal-day.is-avail-closed:disabled {
  opacity: 0.85;
}

.r4m-room-booking__cal-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 0.65rem 1.25rem;
  margin: 0.85rem 0 0;
  padding: 0;
  list-style: none;
  font-size: 0.82rem;
  color: #4b5563;
}

.r4m-room-booking__cal-legend li {
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

.r4m-room-booking__cal-swatch {
  display: inline-block;
  width: 1rem;
  height: 1rem;
  border-radius: 3px;
  border: 2px solid transparent;
  flex-shrink: 0;
}

.r4m-room-booking__cal-swatch.is-avail-free {
  border-color: #86efac;
  background: #ecfdf5;
}

.r4m-room-booking__cal-swatch.is-avail-partial {
  border-color: #fcd34d;
  background: linear-gradient(135deg, #fffbeb 0%, #fffbeb 48%, #fef3c7 48%, #fef3c7 100%);
}

.r4m-room-booking__cal-swatch.is-avail-full {
  border-color: #fca5a5;
  background: #fef2f2;
}

.r4m-room-booking__cal-swatch.is-avail-closed {
  border-color: #e5e7eb;
  background: #f3f4f6;
}

.r4m-room-booking__slot-date {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  font-weight: 600;
  margin: 1rem 0 0.5rem;
}

.r4m-room-booking__day-badge {
  display: inline-block;
  padding: 0.2rem 0.55rem;
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  text-transform: none;
}

.r4m-room-booking__day-badge.is-avail-free {
  background: #d1fae5;
  color: #065f46;
}

.r4m-room-booking__day-badge.is-avail-partial {
  background: #fef3c7;
  color: #92400e;
}

.r4m-room-booking__day-badge.is-avail-full {
  background: #fee2e2;
  color: #991b1b;
}

.r4m-room-booking__day-badge.is-avail-closed {
  background: #e5e7eb;
  color: #4b5563;
}

.r4m-room-booking__slots-summary {
  margin: 0 0 0.65rem;
  padding: 0.5rem 0.75rem;
  border-radius: 4px;
  font-size: 0.9rem;
  font-weight: 600;
  width: 100%;
  max-width: 36rem;
  box-sizing: border-box;
}

.r4m-room-booking__slots-summary.is-avail-free {
  background: #ecfdf5;
  color: #166534;
  border: 1px solid #86efac;
}

.r4m-room-booking__slots-summary.is-avail-partial {
  background: #fffbeb;
  color: #92400e;
  border: 1px solid #fcd34d;
}

.r4m-room-booking__slots-summary.is-avail-full {
  background: #fef2f2;
  color: #991b1b;
  border: 1px solid #fca5a5;
}

.r4m-room-booking__slots {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  align-items: stretch;
  width: 100%;
  max-width: 36rem;
}

.r4m-room-booking__slot-quick {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  margin: -0.1rem 0 0.15rem;
}

.r4m-room-booking__slot-quick-btn {
  appearance: none;
  border: 1px solid #d1d5db;
  background: #fff;
  color: #111827;
  cursor: pointer;
  font: inherit;
  font-size: 0.84rem;
  line-height: 1.2;
  padding: 0.4rem 0.55rem;
}

.r4m-room-booking__slot-quick-btn:hover,
.r4m-room-booking__slot-quick-btn:focus-visible {
  border-color: #111827;
  outline: none;
}

.r4m-room-booking__slot-btn {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.25rem;
  width: 100%;
  padding: 0.75rem 0.9rem;
  border: 2px solid #d5dae2;
  border-radius: 4px;
  background: #fff;
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition:
    border-color 0.15s ease,
    background-color 0.15s ease,
    box-shadow 0.15s ease;
}

.r4m-room-booking__slot-main {
  font-weight: 700;
  font-size: 0.95rem;
  color: #111827;
}

.r4m-room-booking__slot-meta {
  font-size: 0.88rem;
  font-weight: 600;
}

.r4m-room-booking__slot-price {
  font-weight: 700;
}

.r4m-room-booking__slot-btn.is-available {
  border-color: #86efac;
  background: #f0fdf4;
}

.r4m-room-booking__slot-btn.is-available .r4m-room-booking__slot-meta {
  color: #166534;
}

.r4m-room-booking__slot-btn.is-available:hover:not(:disabled) {
  border-color: #4ade80;
  box-shadow: 0 2px 10px rgba(22, 101, 52, 0.12);
}

.r4m-room-booking__slot-btn.is-booked {
  border-color: #fecaca;
  background: #fef2f2;
  cursor: not-allowed;
  opacity: 0.92;
}

.r4m-room-booking__slot-btn.is-booked .r4m-room-booking__slot-main,
.r4m-room-booking__slot-btn.is-booked .r4m-room-booking__slot-meta {
  color: #991b1b;
}

.r4m-room-booking__slot-btn.is-booked .r4m-room-booking__slot-main::after {
  content: " (Belegt)";
  font-weight: 700;
  font-size: 0.85rem;
}

.r4m-room-booking__slot-btn.is-booked .r4m-room-booking__slot-meta {
  display: none;
}

.r4m-room-booking__slot-btn.is-selected {
  border-color: #111827;
  background: #111827;
  box-shadow: 0 4px 14px rgba(17, 24, 39, 0.2);
}

.r4m-room-booking__slot-btn.is-selected .r4m-room-booking__slot-main,
.r4m-room-booking__slot-btn.is-selected .r4m-room-booking__slot-meta,
.r4m-room-booking__slot-btn.is-selected .r4m-room-booking__slot-price {
  color: #fff;
}

.r4m-room-booking__slot-btn.is-selected.is-booked {
  display: none;
}

.r4m-room-booking__span {
  margin-top: 1.25rem;
  padding: 1rem 1.1rem;
  border: 1px solid #e5e7eb;
  background: #fafafa;
}

.r4m-room-booking__span legend {
  font-weight: 700;
  padding: 0 0.25rem;
}

.r4m-room-booking__mode-label {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  font-weight: 600;
  font-size: 0.92rem;
  margin-bottom: 0.75rem;
}

.r4m-room-booking__mode-label select {
  max-width: 28rem;
  font-weight: 500;
}

.r4m-room-booking__von-bis {
  display: grid;
  gap: 0.65rem;
  margin-top: 0.5rem;
}

.r4m-room-booking__von-bis-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 0.6rem;
  align-items: baseline;
  margin: 0;
  font-size: 0.95rem;
}

.r4m-room-booking__von-bis-label {
  font-weight: 600;
  color: #4b5563;
  min-width: 2.25rem;
}

.r4m-room-booking__von-bis-value {
  font-weight: 700;
  color: #111827;
}

.r4m-room-booking__von-bis-till {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 0.6rem;
  align-items: center;
  font-weight: 600;
  font-size: 0.95rem;
}

.r4m-room-booking__von-bis-till input[type="date"] {
  width: auto;
  min-width: 11rem;
  max-width: 14rem;
  margin: 0;
  padding: 0.5rem 0.65rem;
  border: 1px solid #d7dce4;
  font: inherit;
}

.r4m-room-booking__check {
  display: flex;
  gap: 0.65rem;
  align-items: flex-start;
  margin: 0.5rem 0;
}

.r4m-room-booking__weeks {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
  margin-top: 0.75rem;
  font-weight: 600;
  font-size: 0.92rem;
}

.r4m-room-booking__weeks select {
  margin: 0;
  max-width: 6rem;
}

.r4m-room-booking__subhead {
  margin: 1.5rem 0 0.35rem;
  font-size: 1.05rem;
}

.r4m-room-booking__hint {
  margin: 0 0 0.75rem;
  color: #6b7280;
  font-size: 0.92rem;
}

.r4m-room-booking__addon {
  margin: 1.25rem 0 0;
  padding: 1rem 1.1rem;
  border: 1px solid #e5e7eb;
  background: #fafafa;
}

.r4m-room-booking__addon legend {
  font-weight: 700;
  padding: 0 0.25rem;
}

.r4m-room-booking__addon-label {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  font-weight: 600;
  font-size: 0.92rem;
}

.r4m-room-booking__addon select {
  max-width: 22rem;
  font-weight: 500;
}

.r4m-room-booking__costs {
  margin-top: 1.5rem;
  padding: 1.1rem 1.2rem;
  background: #f9fafb;
  border: 1px solid #e5e7eb;
}

.r4m-room-booking__costs-title {
  margin: 0 0 0.75rem;
  font-size: 1.05rem;
  font-weight: 700;
}

.r4m-room-booking__costs-list {
  margin: 0;
}

.r4m-room-booking__costs-row {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.4rem 0;
  border-bottom: 1px solid #e5e7eb;
  font-size: 0.95rem;
}

.r4m-room-booking__costs-row:last-child {
  border-bottom: 0;
}

.r4m-room-booking__costs-row dt {
  margin: 0;
  font-weight: 500;
  color: #4b5563;
}

.r4m-room-booking__costs-row dd {
  margin: 0;
  font-weight: 700;
  text-align: right;
}

.r4m-room-booking__costs-row--total {
  margin-top: 0.35rem;
  padding-top: 0.65rem;
  border-top: 2px solid #d1d5db;
  font-size: 1.05rem;
}

.r4m-room-booking__costs-row--total dt,
.r4m-room-booking__costs-row--total dd {
  color: #111827;
}

.r4m-room-booking__costs-note {
  margin: 0.75rem 0 0;
  font-size: 0.88rem;
  color: #6b7280;
}

.r4m-room-booking__submit-wrap {
  margin-top: 1.25rem;
}

.r4m-room-booking__submit {
  width: 100%;
  max-width: 20rem;
  padding: 0.85rem 1.5rem;
  font-size: 1.05rem;
  font-weight: 700;
  text-align: center;
}

.r4m-room-booking__error {
  color: #b91c1c;
  margin: 0.75rem 0 0;
}

.r4m-room-booking__terms-wrap {
  margin-top: 1.25rem;
  padding: 1rem 1.1rem;
  border: 1px solid #e5e7eb;
  background: #fff;
}

.r4m-room-booking__terms {
  margin: 0;
}

.r4m-room-booking__terms input[type="checkbox"] {
  width: 1.1rem;
  height: 1.1rem;
  min-width: 1.1rem;
  margin: 0.15rem 0 0;
  flex-shrink: 0;
  accent-color: var(--orange, #e85d04);
}

.r4m-room-booking__terms-text {
  flex: 1;
  line-height: 1.45;
  font-size: 0.92rem;
  font-weight: 400;
  color: #374151;
}

.r4m-room-booking__terms-text a {
  color: var(--orange, #e85d04);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.r4m-room-booking__terms-text a:hover {
  color: #c44f03;
}

.r4m-room-booking .r4m-form .r4m-room-booking__terms input[type="checkbox"],
.r4m-room-booking .r4m-form .r4m-room-booking__von-bis-till input[type="date"],
.r4m-room-booking .r4m-form .r4m-room-booking__mode-label select,
.r4m-room-booking .r4m-form .r4m-room-booking__weeks select {
  margin-bottom: 0;
}

.r4m-room-booking__success h3 {
  margin-top: 0;
}

.homev2-rooms .homev2-lede {
  max-width: 65ch;
}

@media (max-width: 960px) {
  .r4m-rooms-grid,
  .r4m-rooms-info__grid {
    grid-template-columns: 1fr;
  }

  .r4m-rooms-facts__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .r4m-room-card__features {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 640px) {
  .r4m-rooms-facts__grid,
  .r4m-room-picker {
    grid-template-columns: 1fr;
  }

  .r4m-room-card__footer {
    flex-direction: column;
    align-items: stretch;
  }

  .r4m-room-card__cta {
    width: 100%;
    text-align: center;
  }
}

/* Form fields keep borders for usability */
main:not(.r4m-home) .r4m-form input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="submit"]):not([type="button"]),
main:not(.r4m-home) .r4m-form select,
main:not(.r4m-home) .r4m-form textarea,
main:not(.r4m-home) .quick-finder select {
  border: 1px solid #d7dce4;
}

/* ---- Lehrgang builder ---- */
.container.panel.panel--ausbildungen:has(.r4m-lg-builder) {
  overflow: visible;
}

.r4m-lg-builder {
  margin: 0;
  padding: 0;
}

.r4m-lg-builder__layout {
  display: grid;
  gap: 1.25rem;
  align-items: start;
}

.r4m-lg-builder__controls {
  display: grid;
  gap: 0.75rem;
  margin: 0 0 1.1rem;
  padding: 0 0 1.1rem;
  border-bottom: 1px solid #e8ecf1;
}

.r4m-lg-builder__control {
  display: grid;
  grid-template-columns: 6.75rem minmax(0, 1fr);
  gap: 0.65rem 1rem;
  align-items: center;
  margin: 0;
  padding: 0;
  border: 0;
  min-width: 0;
}

.r4m-lg-builder__control-label {
  margin: 0;
  padding: 0;
  float: none;
  width: auto;
  font-size: 0.875rem;
  font-weight: 700;
  line-height: 1.2;
  color: var(--text);
}

.r4m-lg-builder__seg {
  gap: 0;
  flex-wrap: wrap;
}

.r4m-lg-builder__seg .r4m-choice-btn {
  margin: 0;
}

.r4m-lg-builder__seg .r4m-choice-btn + .r4m-choice-btn {
  margin-left: -1px;
}

.r4m-lg-builder__seg .r4m-choice-btn span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 2.4rem;
  padding: 0 0.95rem;
  box-sizing: border-box;
  border-radius: 0;
  white-space: nowrap;
}

.r4m-lg-builder__seg .r4m-choice-btn:hover span,
.r4m-lg-builder__seg .r4m-choice-btn input:checked + span,
.r4m-lg-builder__seg .r4m-choice-btn input:focus-visible + span {
  position: relative;
  z-index: 1;
}

.r4m-lg-builder__control--persons {
  max-width: 12.5rem;
}

.r4m-lg-builder__control--persons input {
  width: 4.5rem;
  height: 2.4rem;
  margin: 0;
  padding: 0 0.65rem;
  border: 1px solid #d7dce4;
  border-radius: 0;
  box-sizing: border-box;
  font: inherit;
  font-weight: 600;
  text-align: center;
  background: #fff;
}

.r4m-lg-builder__control--persons input:hover,
.r4m-lg-builder__control--persons input:focus {
  border-color: var(--orange);
  outline: none;
}

.r4m-lg-builder__disclaimer {
  margin: 0 0 0.85rem;
  padding: 0.45rem 0.65rem;
  border-left: 3px solid var(--orange);
  background: rgba(236, 126, 52, 0.07);
  font-size: 0.86rem;
  line-height: 1.35;
}

.r4m-lg-builder__block-title {
  margin: 0 0 0.65rem;
  font-size: 1.05rem;
  font-weight: 700;
  line-height: 1.25;
}

.r4m-lg-builder__modules-wrap {
  margin: 0 0 0.25rem;
}

@media (max-width: 640px) {
  .r4m-lg-builder__control {
    grid-template-columns: 1fr;
    gap: 0.4rem;
    align-items: start;
  }

  .r4m-lg-builder__control--persons {
    max-width: none;
  }
}

.r4m-lg-mods {
  margin: 0 0 0.85rem;
}

.r4m-lg-mods--bare {
  margin-top: 0.15rem;
}

.r4m-lg-mods__title {
  margin: 0 0 0.3rem;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--color-muted, #5c6573);
}

.r4m-lg-mods__list {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid #d7dce4;
  border-bottom: 1px solid #d7dce4;
}

.r4m-lg-mods__list > li,
.r4m-lg-builder__summary-list > li {
  position: static;
  padding-left: 0;
}

.r4m-lg-mods__list > li::before,
.r4m-lg-builder__summary-list > li::before {
  content: none;
}

.r4m-lg-mods + .r4m-lg-mods .r4m-lg-mods__list {
  border-top: 0;
}

.r4m-lg-mods__list li + li {
  border-top: 1px solid #e8ecf1;
}

.r4m-lg-mod {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto auto;
  gap: 0.5rem 0.7rem;
  align-items: center;
  margin: 0;
  padding: 0.48rem 0.15rem 0.48rem 0;
  cursor: pointer;
  background: transparent;
  transition: background 0.12s ease;
}

.r4m-lg-mod:hover {
  background: rgba(236, 126, 52, 0.04);
}

.r4m-lg-mod:has(input:checked) {
  background: rgba(236, 126, 52, 0.07);
}

.r4m-lg-mod input {
  width: 1.05rem;
  height: 1.05rem;
  margin: 0;
  accent-color: var(--orange);
}

.r4m-lg-mod__name {
  font-weight: 600;
  font-size: 0.93rem;
  line-height: 1.25;
  min-width: 0;
}

.r4m-lg-mod__days,
.r4m-lg-mod__price {
  font-size: 0.84rem;
  color: var(--color-muted, #5c6573);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.r4m-lg-mod__price {
  font-weight: 700;
  color: var(--text, #1a1f28);
  min-width: 5.25rem;
  text-align: right;
}

.r4m-lg-builder__offer {
  margin: 1.35rem 0 0;
  padding: 1.1rem 0 0;
  border-top: 1px solid #d7dce4;
}

.r4m-lg-builder__summary {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin: 0;
  padding: 0;
  border: 1px solid #d7dce4;
  border-left: 3px solid var(--orange);
  background: #fff;
  box-shadow: 0 8px 28px rgba(26, 34, 48, 0.07);
  z-index: 5;
}

.r4m-lg-builder__summary.is-updating .r4m-lg-builder__stat-total .r4m-lg-builder__stat-value {
  animation: r4m-lg-pulse 0.45s ease;
}

@keyframes r4m-lg-pulse {
  0% { transform: scale(1); }
  35% { transform: scale(1.04); color: var(--orange); }
  100% { transform: scale(1); }
}

@media (min-width: 980px) {
  .r4m-lg-builder__layout {
    grid-template-columns: minmax(0, 1fr) minmax(15.5rem, 18rem);
    gap: 1.35rem 1.6rem;
  }

  .r4m-lg-builder__summary {
    position: sticky;
    top: 5.25rem;
    align-self: start;
    max-height: calc(100vh - 5.75rem);
  }
}

.r4m-lg-builder__summary-head {
  padding: 0.85rem 0.95rem 0.7rem;
  flex: 0 0 auto;
}

.r4m-lg-builder__summary-track {
  margin: 0;
  font-size: 1.2rem;
  font-weight: 700;
  line-height: 1.2;
}

.r4m-lg-builder__summary-entry {
  margin: 0.2rem 0 0;
  font-size: 0.86rem;
  color: var(--color-muted, #5c6573);
}

.r4m-lg-builder__summary-list {
  list-style: none;
  margin: 0;
  padding: 0.55rem 0.95rem;
  border-top: 1px solid #e8ecf1;
  border-bottom: 1px solid #e8ecf1;
  display: grid;
  gap: 0.32rem;
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
}

.r4m-lg-builder__summary-list li {
  display: flex;
  justify-content: space-between;
  gap: 0.55rem;
  align-items: baseline;
  margin: 0;
  font-size: 0.84rem;
  line-height: 1.3;
}

.r4m-lg-builder__summary-price {
  flex-shrink: 0;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--color-muted, #5c6573);
}

.r4m-lg-builder__summary-empty {
  color: var(--color-muted, #5c6573);
}

.r4m-lg-builder__summary-foot {
  flex: 0 0 auto;
  padding: 0.75rem 0.95rem 0.9rem;
  background: #fafbfc;
}

.r4m-lg-builder__stats {
  display: grid;
  gap: 0.35rem;
}

.r4m-lg-builder__stats > div {
  display: flex;
  justify-content: space-between;
  gap: 0.55rem;
  align-items: baseline;
}

.r4m-lg-builder__stat-label {
  font-size: 0.84rem;
  color: var(--color-muted, #5c6573);
}

.r4m-lg-builder__stat-value {
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  text-align: right;
}

.r4m-lg-builder__stat-total {
  padding-top: 0.4rem;
  margin-top: 0.15rem;
  border-top: 1px solid #d7dce4;
}

.r4m-lg-builder__stat-total .r4m-lg-builder__stat-value {
  color: var(--orange);
  font-size: 1.12rem;
}

.r4m-lg-builder__vat {
  margin: 0.35rem 0 0;
  font-size: 0.75rem;
  color: var(--color-muted, #5c6573);
}

.r4m-lg-builder__to-offer {
  display: inline-block;
  margin-top: 0.55rem;
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--orange);
  text-decoration: none;
}

.r4m-lg-builder__to-offer:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.r4m-form-field--full {
  display: block;
  width: 100%;
  margin-top: 0.65rem;
}

.r4m-lg-hub-cta a {
  font-weight: 700;
  color: var(--orange);
  text-decoration: underline;
  text-underline-offset: 3px;
}

@media (max-width: 979px) {
  .r4m-lg-builder__layout {
    display: flex;
    flex-direction: column;
  }

  .r4m-lg-builder__summary {
    position: sticky;
    top: 4.25rem;
    order: -1;
    max-height: none;
    box-shadow: 0 6px 20px rgba(26, 34, 48, 0.08);
  }

  .r4m-lg-builder__summary-list {
    max-height: 9.5rem;
  }

  .r4m-lg-mod {
    grid-template-columns: auto minmax(0, 1fr) auto;
  }

  .r4m-lg-mod__days {
    display: none;
  }
}

/* Medien: YouTube channel videos */
.r4m-medien__intro {
  margin: 0 0 0.85rem;
  max-width: 48rem;
  color: var(--text);
}

.r4m-medien__links {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.75rem 1rem;
  margin: 0 0 0.85rem;
}

.r4m-medien__contact {
  color: var(--orange);
  font-weight: 700;
  text-decoration: none;
}

.r4m-medien__contact:hover,
.r4m-medien__contact:focus-visible {
  color: var(--black);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.r4m-medien__yt-logo {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  color: #fff;
  background: #c00;
  text-decoration: none;
}

.r4m-medien__yt-logo:hover,
.r4m-medien__yt-logo:focus-visible {
  background: var(--orange);
  color: #fff;
}

.r4m-medien__yt-logo svg {
  display: block;
}

.r4m-medien-videos {
  margin-top: 2rem;
}

.r4m-medien-videos__title {
  margin: 0 0 1rem;
}

.r4m-medien-videos__empty {
  margin: 0 0 1rem;
  color: var(--muted);
}

.r4m-yt-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(16.5rem, 1fr));
  gap: 1rem;
}

.r4m-yt-card {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--line);
  background: var(--white);
  overflow: hidden;
}

.r4m-yt-card__media {
  position: relative;
  aspect-ratio: 16 / 9;
  background: #111;
  overflow: hidden;
}

.r4m-yt-card__media iframe,
.r4m-yt-card__play,
.r4m-yt-card__play img {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}

.r4m-yt-card__play {
  position: relative;
  padding: 0;
  margin: 0;
  border: 0;
  cursor: pointer;
  background: #111;
}

.r4m-yt-card__play img {
  object-fit: cover;
}

.r4m-yt-card__play-icon {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 3.1rem;
  height: 2.2rem;
  margin: 0;
  transform: translate(-50%, -50%);
  border-radius: 0.45rem;
  background: var(--orange);
}

.r4m-yt-card__play-icon::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-38%, -50%);
  border-style: solid;
  border-width: 0.42rem 0 0.42rem 0.72rem;
  border-color: transparent transparent transparent #fff;
}

.r4m-yt-card__play:hover .r4m-yt-card__play-icon,
.r4m-yt-card__play:focus-visible .r4m-yt-card__play-icon {
  background: var(--dark);
}

.r4m-yt-card__privacy {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1;
  padding: 0.4rem 0.55rem 0.45rem;
  background: rgba(0, 0, 0, 0.72);
  color: #fff;
  font-size: 0.6875rem;
  font-weight: 500;
  line-height: 1.35;
  text-align: left;
  pointer-events: none;
}

.r4m-yt-card__title {
  margin: 0.75rem 0.9rem 0.15rem;
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.35;
}

.r4m-yt-card__title a {
  color: inherit;
  text-decoration: none;
}

.r4m-yt-card__title a:hover,
.r4m-yt-card__title a:focus-visible {
  color: var(--orange);
}

.r4m-yt-card__date {
  margin: 0 0.9rem 0.9rem;
  font-size: 0.8125rem;
  color: var(--muted);
}

.r4m-medien-videos__more {
  margin: 1.25rem 0 0;
}

.r4m-medien-videos__cta {
  display: inline-block;
  color: var(--orange);
  font-weight: 700;
  text-decoration: none;
  border-bottom: 2px solid var(--orange);
  padding-bottom: 0.12rem;
}

.r4m-medien-videos__cta:hover,
.r4m-medien-videos__cta:focus-visible {
  color: var(--black);
  border-bottom-color: var(--black);
}