/* Gerotec - Global Design Token */
:root {
  --font: "Avenir Next", "Avenir", "Inter", "Segoe UI", Arial, sans-serif;
  --font-bold:
    "Avenir Bold", "Avenir Next", "Avenir", "Inter", "Segoe UI", Arial,
    sans-serif;

  /* Weights */
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600; /* subheadings, card titles, eyebrows */
  --fw-bold: 700; /* large headers, micro-labels, buttons */

  /* Type sizes */
  --fs-h1: 64px;
  --fs-h2: 40px; /* page-head title (product/category/cart) */
  --fs-h3: 32px;
  --fs-h4: 24px;
  --fs-h5: 20px;
  --fs-h6: 16px;
  --fs-body-lg: 18px;
  --fs-body: 16px;
  --fs-sm: 14px;
  --fs-xs: 13px;
  --fs-accent: 14px; /* eyebrow / micro-label */
  --fs-btn: 15px; /* primary buttons */

  /* Letter-spacing */
  --ls-accent: 0.15em; /* eyebrows */
  --ls-label: 0.06em; /* form labels / section titles */

  /* Brand palette */
  --yellow: #ffe700;
  --yellow-med: #fff099;
  --yellow-soft: #fffacc;
  --dark: #404040;
  --med: #606060;
  --gray: #909090;
  --darker: #2e2e2e; /* headings + dark tiles — a step below --dark */
  --light-gray: #c8c8c8;
  --line: #ececec;
  --vlight: #f2f2f2; /* faint fill: pills, thumbs */
  --panel: #f7f7f7; /* tinted section fill: revealed address blocks */
  --white: #ffffff;
  --req: #c00000; /* required-field asterisk (red) */

  /* Corner radius (single source of truth) */
  --r-badge: 4px; /* NEWS/MESSEN tags, chips, small labels, remove buttons */
  --r-btn: 8px; /* buttons, inputs, steppers, panels, small thumbnails */
  --r-img: 12px; /* large images */
  --r-card: 14px; /* cards, boxes, containers */
  --r-side: 12px; /* sidebar Themen/promo card */

  --box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.11);
}

/* Responsive type scale — tokens shrink on tablet/mobile,
   so every component using var(--fs-*) scales automatically. */
@media (max-width: 1024px) {
  :root {
    --fs-h1: 48px;
    --fs-h2: 34px;
    --fs-h3: 28px;
    --fs-h4: 22px;
    --fs-h5: 18px;
    --fs-h6: 16px;
    --fs-body-lg: 17px;
    --fs-body: 15px;
    --fs-sm: 13px;
    --fs-xs: 13px;
    --fs-accent: 13px;
  }
}

@media (max-width: 767px) {
  :root {
    --fs-h1: 35px;
    --fs-h2: 28px;
    --fs-h3: 24px;
    --fs-h4: 20px;
    --fs-h5: 18px;
    --fs-h6: 16px;
    --fs-body-lg: 16px;
    --fs-body: 14px;
    --fs-sm: 13px;
    --fs-xs: 12px;
    --fs-accent: 13px;
    --fs-btn: 14px;
  }
}

/* Utilities */
.ge-utils--heading-line .elementor-heading-title:before {
  content: "";
  display: inline-block;
  width: 24px;
  height: 3px;
  margin-top: -3px;
  background: var(--yellow);
}

.ge-utils--heading-line .elementor-heading-title {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  position: relative;
}

/* Gerotec Schulungen — Single Course Detail */
/* Wrapper */
.ge-schulungen--detail {
  width: 100%;
  margin-bottom: 50px;
}

.ge-schulungen--wrap-inner {
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 20px;
}

/* Banner */
.ge-schulungen--banner {
  position: relative;
  background-color: #1a1a1a;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  overflow: hidden;
}

.ge-schulungen--banner-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(0, 0, 0, 0.45) 0%,
    rgba(0, 0, 0, 0.9) 100%
  );
}

.ge-schulungen--banner-inner {
  position: relative;
  z-index: 1;
  margin: 0 auto;
  padding: 60px 0;
}

/* Breadcrumb */
.ge-schulungen--breadcrumb {
  color: rgba(255, 255, 255, 0.6);
  margin-bottom: 24px;
}

.ge-schulungen--breadcrumb p {
  font-size: var(--fs-sm) !important;
}

.ge-schulungen--breadcrumb a,
.ge-schulungen--breadcrumb span {
  color: var(--white) !important;
  text-decoration: none;
}

.ge-schulungen--breadcrumb a:hover {
  color: var(--white);
}

/* Eyebrow pill */
.ge-schulungen--eyebrow {
  display: inline-block;
  background: var(--yellow);
  color: #1a1a1a;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 5px 10px;
  border-radius: var(--r-badge);
  margin-bottom: 20px;
}

/* Title */
.ge-schulungen--title {
  font-size: var(--fs-h1);
  font-weight: 700;
  line-height: 1.15;
  color: #fff;
  margin: 0 0 20px;
  max-width: 1024px;
}

/* Lead text */
.ge-schulungen--lead {
  font-size: var(--fs-body-lg);
  line-height: 1.65;
  color: rgba(255, 255, 255, 0.85);
  max-width: 960px;
  margin: 0;
}

/* Tab navigation */
.ge-schulungen--tabs {
  position: sticky;
  top: 0;
  z-index: 10;
  background: #fff;
  border-bottom: 1px solid #e5e5e5;
}

.ge-schulungen--tabs-inner {
  display: flex;
  margin: 0 auto;
  padding: 0;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.ge-schulungen--tab {
  flex-shrink: 0;
  padding: 16px 20px;
  font-size: 0.9375rem;
  font-weight: 500;
  color: #666;
  text-decoration: none;
  border-bottom: 3px solid transparent;
  transition:
    color 0.2s ease,
    border-color 0.2s ease;
  white-space: nowrap;
}

.ge-schulungen--tab:hover {
  color: #1a1a1a;
}

.ge-schulungen--tab.is-active {
  color: #1a1a1a;
  font-weight: 600;
  border-bottom-color: var(--yellow);
}

/* Grid */
.ge-schulungen--main-inner {
  display: flex;
  flex-wrap: wrap;
  gap: 2%;
  padding-top: 48px;
}

.ge-schulungen--main {
  width: 100%;
  min-width: 0;
}

.ge-schulungen--main > section:last-child {
  margin-bottom: 0;
}

.ge-schulungen--sidebar {
  width: 100%;
  position: static;
  order: -1;
  margin-bottom: 40px;
}

.ge-schulungen--sidebar-inner {
  background: #f7f7f7;
  border-radius: var(--r-card);
  padding: 25px 20px;
}

@media only screen and (min-width: 960px) {
  .ge-schulungen--main {
    width: 69%;
  }

  .ge-schulungen--sidebar {
    width: 29%;
    order: 1;
    margin-bottom: 0;
  }

  .ge-schulungen--sidebar-inner {
    position: sticky;
    top: 130px;
  }
}

/* Section spacing */
.ge-schulungen--section {
  margin-bottom: 50px;
}

.ge-schulungen--section:last-child {
  margin-bottom: 0;
}

/* Section header */
.ge-schulungen--section-header {
  display: flex;
  gap: 32px;
  align-items: flex-start;
  margin-bottom: 32px;
}

.ge-schulungen--section-title {
  font-size: var(--fs-h3) !important;
  font-weight: 700;
  line-height: 1.2;
  color: #1a1a1a;
  margin: 0;
  flex-shrink: 0;
}

.ge-schulungen--section-intro {
  font-size: 1rem;
  line-height: 1.7;
  color: #555;
  margin: 0;
  padding-top: 16px;
  position: relative;
}

.ge-schulungen--section-intro::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 40px;
  height: 3px;
  background: var(--yellow);
}

/* Kursinhalte cards */
.ge-schulungen--cards {
  display: flex;
  flex-wrap: wrap;
  gap: 1%;
  margin-bottom: 50px;
}

.ge-schulungen--card {
  width: 100%;
  display: flex;
  align-items: flex-start;
  gap: 10px;
  background: #f7f7f7;
  border-radius: var(--r-card);
  padding: 20px;
  margin-bottom: 10px;
}

.ge-schulungen--card-icon {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fdeab4;
  border-radius: 50%;
  flex-shrink: 0;
}

.ge-schulungen--card-icon svg {
  width: 25px;
  height: 25px;
}

.ge-schulungen--card-content {
  min-width: 0;
}

.ge-schulungen--card-heading {
  font-size: var(--fs-h6);
  font-weight: 700;
  color: #1a1a1a;
  margin: 0 0 8px;
  overflow-wrap: break-word;
  word-break: break-word;
}

.ge-schulungen--card-desc {
  font-size: var(--fs-body);
  color: #555;
  margin: 0;
  overflow-wrap: break-word;
  word-break: break-word;
}

@media only screen and (min-width: 767px) {
  .ge-schulungen--card {
    width: 32.66%;
  }
}

/* Mehrwert */
.ge-schulungen--mehrwert {
  display: flex;
  flex-direction: column;
  background: #fef8e8;
  border-radius: var(--r-card);
  overflow: hidden;
  margin: 0 0 50px;
  padding: 20px;
}

.ge-schulungen--mehrwert-img img {
  display: block;
  width: 100%;
  height: 100% !important;
  object-fit: cover;
  border-radius: var(--r-btn) !important;
}

.ge-schulungen--mehrwert-content {
  flex: 1;
  padding: 20px 0 0;
}

.ge-schulungen--mehrwert-title {
  font-size: var(--fs-h4);
  font-weight: var(--fw-bold);
  color: var(--darker);
  margin: 0 0 20px;
  text-align: center;
}

.ge-schulungen--mehrwert-items {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}

.ge-schulungen--mehrwert-item {
  flex: 0 0 calc(50% - 8px);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 8px;
}

.ge-schulungen--mehrwert-icon {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fdedae;
  border-radius: 50%;
}

.ge-schulungen--mehrwert-icon svg {
  width: 20px;
  height: 20px;
  color: var(--dark);
}

.ge-schulungen--mehrwert-item span {
  font-size: var(--fs-body);
  font-weight: var(--fw-semibold);
  color: var(--darker);
  line-height: 1.3;
}

@media only screen and (min-width: 580px) {
  .ge-schulungen--mehrwert {
    flex-direction: row;
    align-items: center;
  }

  .ge-schulungen--mehrwert-img {
    flex: 0 0 200px;
    height: auto;
    height: 160px;
  }

  .ge-schulungen--mehrwert-content {
    padding: 0 25px;
  }

  .ge-schulungen--mehrwert-items {
    flex-wrap: nowrap;
    gap: 24px;
  }

  .ge-schulungen--mehrwert-title {
    text-align: left;
  }

  .ge-schulungen--mehrwert-item {
    flex: 1;
  }
}

/* Text card */
.ge-schulungen--textcard {
  background: #f7f7f7;
  border-radius: var(--r-card);
  padding: 28px;
  margin-bottom: 50px;
}

.ge-schulungen--textcard-title {
  font-size: var(--fs-h4) !important;
  font-weight: 700;
  color: #1a1a1a;
  margin: 0 0 16px;
  padding-top: 16px;
  position: relative;
}

.ge-schulungen--textcard-title::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 40px;
  height: 3px;
  background: var(--yellow);
}

.ge-schulungen--textcard-body h1,
.ge-schulungen--textcard-body h2,
.ge-schulungen--textcard-body h3,
.ge-schulungen--textcard-body h4,
.ge-schulungen--textcard-body h5,
.ge-schulungen--textcard-body h6 {
  font-size: var(--fs-h5);
  font-weight: 700;
}

.ge-schulungen--textcard-body p {
  font-size: var(--fs-body);
  line-height: 1.75;
  color: #444;
  margin: 0 0 12px;
}
.ge-schulungen--textcard-body p:last-child {
  margin-bottom: 0;
}

/* Price block */
.ge-schulungen--price-block {
  margin-bottom: 0;
  padding-bottom: 15px;
  border-bottom: 1px solid #e0e0e0;
}
.ge-schulungen--price {
  display: block;
  font-size: 2.25rem;
  font-weight: 700;
  color: #1a1a1a;
  line-height: 1.2;
}
.ge-schulungen--price-note {
  display: block;
  font-size: var(--fs-sm);
  color: #777;
  margin-top: 6px;
}

/* Facts list */
.ge-schulungen--facts {
  list-style: none;
  padding: 0;
  margin: 0 0 15px;
}
.ge-schulungen--fact {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 0;
  border-bottom: 1px solid #e8e8e8;
}

.ge-schulungen--fact:last-child {
  border-bottom: none;
}

.ge-schulungen--fact-icon {
  flex-shrink: 0;
  width: 25px;
  height: 25px;
  color: var(--yellow);
  margin-top: 2px;
}

.ge-schulungen--fact span {
  font-size: var(--fs-body);
  line-height: 1.5;
  color: #333;
}

.ge-schulungen--fact strong {
  display: block;
  font-size: var(--fs-sm);
  font-weight: 700;
  color: #999;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 4px;
}

/* CTA button */
.ge-schulungen--cta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  padding: 16px 24px;
  background: var(--yellow);
  color: var(--dark) !important;
  font-size: 1rem;
  font-weight: 700;
  font-family: var(--font-bold);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  text-decoration: none;
  border-radius: 6px;
  transition: background 0.2s ease;
}

.ge-schulungen--cta:hover {
  background: #fff099;
}

.ge-schulungen--cta svg {
  width: 20px;
  height: 20px;
}

/* Responsive */
@media only screen and (max-width: 960px) {
  /*   .ge-schulungen--grid {
    flex-direction: column;
    gap: 40px;
  }

  .ge-schulungen--sidebar {
    position: static;
    order: -1;
    margin-bottom: 40px;
  }

  .ge-schulungen--section-header {
    flex-direction: column;
    gap: 12px;
  }

  .ge-schulungen--cards {
    gap: 16px;
  }

  .ge-schulungen--card {
    flex: 0 0 calc(50% - 8px);
  } */
}
@media (max-width: 580px) {
  .ge-schulungen--title {
    font-size: 1.75rem;
  }

  .ge-schulungen--card {
    flex: 0 0 100%;
  }

  .ge-schulungen--tab {
    padding: 14px 16px;
    font-size: 0.8125rem;
  }
}

/**
 * Gerotec Schulungen — Listing Grid
 */

/* Grid */
.ge-listing--grid {
  display: flex;
  flex-wrap: wrap;
  gap: 32px;
}
.ge-listing--card {
  flex: 0 0 calc(33.333% - 22px);
}

/* Card */
.ge-listing--card {
  background: #fff;
  border-radius: var(--r-card);
  overflow: hidden;
  box-shadow: var(--box-shadow);
  transition: box-shadow 0.2s ease;
}
.ge-listing--card:hover {
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
}

/* Card image */
.ge-listing--card-img {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: #e8e8e8;
}

.ge-listing--card-img img {
  display: block;
  width: 100%;
  height: 100% !important;
  object-fit: cover;
  object-position: center;
}

.ge-listing--card-tag {
  position: absolute;
  top: 12px;
  right: 12px;
  background: var(--yellow);
  color: #1a1a1a;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 4px 12px;
  border-radius: var(--r-badge);
}

/* Card body */
.ge-listing--card-body {
  padding: 15px;
}

.ge-listing--card-title {
  font-size: var(--fs-h5);
  font-weight: 700;
  line-height: 1.35;
  margin: 0 0 10px;
}

.ge-listing--card-title a {
  color: #1a1a1a !important;
}

/* Meta chips */
.ge-listing--card-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-bottom: 15px;
}
.ge-listing--chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: var(--fs-body);
  color: #555;
}
.ge-listing--chip svg {
  width: 16px;
  height: 16px;
  color: var(--yellow);
  flex-shrink: 0;
}

/* Card footer */
.ge-listing--card-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 8px;
  border-top: 1px solid #f0f0f0;
}
.ge-listing--card-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: var(--fs-body);
  font-weight: 600;
  color: #1a1a1a;
  text-decoration: none;
  transition: color 0.2s ease;
}

.ge-listing--card:hover .ge-listing--card-btn {
  color: var(--yellow) !important;
}

.ge-listing--card-btn svg {
  width: 16px;
  height: 16px;
}

.ge-listing--card-price {
  font-size: 1.25rem;
  font-weight: 700;
  color: #1a1a1a;
}

/* Empty state */
.ge-listing--empty {
  text-align: center;
  color: #777;
  padding: 48px 20px;
  font-size: 1rem;
}

/* Responsive */
@media (max-width: 900px) {
  .ge-listing--card {
    flex: 0 0 calc(50% - 16px);
  }
}

@media (max-width: 580px) {
  .ge-listing--card {
    flex: 0 0 100%;
  }
}

/* Kontakt CTA */
.ge-kontakt {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 30px 28px;
  background: var(--panel);
  border-radius: var(--r-card);
  position: relative;
  overflow: hidden;
}

.ge-kontakt::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 100%;
  background: radial-gradient(
    circle,
    rgba(250, 230, 0, 1) 0%,
    rgba(250, 230, 0, 0) 100%
  );
  opacity: 0.1;
  pointer-events: none;
  width: 40%;
}

.ge-kontakt--avatar {
  flex-shrink: 0;
  width: 100px;
  height: 100px;
  border-radius: 50%;
  overflow: hidden;
  position: relative;
  z-index: 2;
}

.ge-kontakt--avatar img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.ge-kontakt--initials {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  background: var(--yellow);
  color: var(--dark);
  font-family: var(--font);
  font-size: var(--fs-sm);
  font-weight: var(--fw-bold);
}

.ge-kontakt--info {
  flex: 1;
  min-width: 0;
  position: relative;
  z-index: 2;
}

.ge-kontakt--desc {
  font-family: var(--font);
  font-size: var(--fs-body);
  color: var(--dark);
  margin: 0 0 2px;
}

.ge-kontakt--name {
  font-family: var(--font-bold);
  font-size: var(--fs-h4);
  font-weight: var(--fw-bold);
  color: var(--darker);
  margin-bottom: 7px;
}

.ge-kontakt--links {
  display: flex;
  gap: 12px;
  flex-shrink: 0;
  position: relative;
  z-index: 2;
}

.ge-kontakt--links a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font);
  font-size: var(--fs-body);
  font-weight: var(--fw-medium);
  color: var(--dark) !important;
  text-decoration: none;
  padding: 8px 16px;
  border: 1px solid var(--dark);
  border-radius: var(--r-btn);
  transition:
    border-color 0.2s ease,
    background 0.2s ease;
}

.ge-kontakt--links a:hover {
  border-color: var(--yellow);
  background: var(--yellow);
}

.ge-kontakt--links a:hover {
  border-color: var(--yellow);
}

.ge-kontakt--links svg {
  width: 22px;
  height: 22px;
  color: var(--dark);
}

/* Responsive */
@media (max-width: 680px) {
  .ge-kontakt {
    flex-direction: column;
    text-align: center;
  }
  .ge-kontakt--links {
    flex-direction: column;
    width: 100%;
  }
  .ge-kontakt--links a {
    justify-content: center;
  }
}

/* Kontakt Card (sidebar) */
.ge-kontakt-card {
  position: relative;
  background: var(--white);
  border-radius: var(--r-card);
  padding: 28px 24px;
  overflow: hidden;
  box-shadow: var(--box-shadow);
}

.ge-kontakt-card::before {
  content: "";
  position: absolute;
  height: 120%;
  background: radial-gradient(
    circle,
    rgba(250, 230, 0, 1) 10%,
    rgba(250, 230, 0, 0) 50%
  );
  opacity: 0.2;
  pointer-events: none;
  width: 70%;
  right: -70px;
  top: -130px;
}

.ge-kontakt-card--label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font);
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  color: var(--gray);
  text-transform: uppercase;
  letter-spacing: var(--ls-label);
  margin-bottom: 20px;
  position: relative;
  z-index: 2;
}

.ge-kontakt-card--header {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 20px;
  text-align: left;
  position: relative;
  z-index: 2;
}

.ge-kontakt-card--name {
  margin: 0 0 2px;
}

.ge-kontakt-card--desc {
  margin: 0;
}

.ge-kontakt-card--label::before {
  content: "";
  display: inline-block;
  width: 24px;
  height: 3px;
  background: var(--yellow);
}
.ge-kontakt-card--avatar {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  overflow: hidden;
  flex-shrink: 0;
}

.ge-kontakt-card--avatar img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.ge-kontakt-card--initials {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  background: var(--yellow);
  color: var(--dark);
  font-family: var(--font);
  font-size: var(--fs-body-lg);
  font-weight: var(--fw-bold);
}

.ge-kontakt-card--name {
  font-family: var(--font-bold);
  font-size: var(--fs-h5);
  font-weight: var(--fw-bold);
  color: var(--darker);
  margin: 0 0 4px;
}

.ge-kontakt-card--address {
  margin: 0;
  padding: 16px 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  font-size: var(--fs-body);
  line-height: 1.6;
  color: var(--darker);
}

.ge-kontakt-card--desc {
  font-family: var(--font);
  font-size: var(--fs-body);
  color: var(--dark);
  line-height: 1.5;
}
.ge-kontakt-card--links {
  display: flex;
  flex-direction: column;
  gap: 8px;
  position: relative;
  z-index: 2;
}

.ge-kontakt-card--links a {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  background: var(--vlight);
  border-radius: var(--r-btn);
  text-decoration: none;
  transition: background 0.2s ease;
}

.ge-kontakt-card--links a:hover {
  background: var(--yellow);
}

.ge-kontakt-card--link-icon {
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--yellow);
  border-radius: 50%;
  flex-shrink: 0;
}

.ge-kontakt-card--link-icon svg {
  width: 18px;
  height: 18px;
  color: var(--dark);
}

.ge-kontakt-card--links a span:nth-child(2) {
  flex: 1;
  font-family: var(--font);
  font-size: var(--fs-body);
  font-weight: var(--fw-semibold);
  color: var(--darker);
  text-align: left;
}

.ge-kontakt-card--chevron {
  width: 16px;
  height: 16px;
  color: var(--gray);
  flex-shrink: 0;
}

/* ============================================================
   GEROTEC Anfrageliste / Cart
   ============================================================ */
.gtc-cart-block {
  font-family: var(--font);
  position: relative;
  display: inline-flex;
  flex: 0 0 auto !important;
}
/* Icon-only toggle with overlaid count (same at all sizes) */
.gtc-cart-block .gtc-cart-toggle {
  background: var(--yellow) !important;
  color: var(--dark) !important;
  border: 0 !important;
  padding: 0 !important;
  width: 44px !important;
  height: 44px !important;
  min-width: 44px !important;
  flex: 0 0 auto !important;
  border-radius: var(--r-btn) !important;
  position: relative !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  box-shadow: none !important;
}
.gtc-cart-block .gtc-cart-toggle:hover {
  background: var(--yellow-med) !important;
}
.gtc-cart-block .gtc-cart-toggle svg {
  width: 20px !important;
  height: 20px !important;
  flex: 0 0 auto !important;
}
.gtc-cart-block .gtc-cart-badge {
  position: absolute !important;
  top: -7px !important;
  right: -7px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 20px !important;
  height: 20px !important;
  padding: 0 5px !important;
  border-radius: 999px !important; /* count pill - stays circular */
  background: var(--dark) !important;
  color: var(--yellow) !important;
  font: var(--fw-bold) var(--fs-accent) var(--font) !important;
  border: 2px solid var(--white) !important;
  box-sizing: border-box !important;
}
@media (max-width: 767px) {
  .gtc-cart-block .gtc-cart-toggle {
    width: 52px !important;
    height: 52px !important;
    min-width: 52px !important;
  }
  .gtc-cart-block .gtc-cart-toggle svg {
    width: 28px !important;
    height: 28px !important;
  }
}
/* Panel */
.gtc-cart-block .gtc-cart-panel {
  position: absolute !important;
  top: calc(100% + 12px) !important;
  right: 0 !important;
  width: 460px !important;
  max-width: 92vw !important;
  max-height: 85vh !important;
  display: flex !important;
  flex-direction: column !important;
  background: var(--white) !important;
  color: var(--dark) !important;
  border: 1px solid var(--light-gray) !important;
  border-radius: var(--r-btn) !important;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.18) !important;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition:
    opacity 0.18s ease,
    transform 0.18s ease,
    visibility 0.18s;
  z-index: 9999 !important;
  overflow: hidden !important;
}
.gtc-cart-block .gtc-cart-panel.is-open {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.gtc-cart-block .gtc-cart-head {
  background: var(--dark) !important;
  color: var(--white) !important;
  padding: 14px 18px !important;
  font: var(--fw-semibold) var(--fs-xs) var(--font) !important;
  text-transform: uppercase !important;
  letter-spacing: 1px !important;
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  flex: 0 0 auto !important;
}
.gtc-cart-block .gtc-cart-close {
  background: transparent !important;
  border: 0 !important;
  color: var(--yellow) !important;
  cursor: pointer !important;
  font-size: var(--fs-h4) !important;
  line-height: 1 !important;
  padding: 0 !important;
}
.gtc-cart-block .gtc-cart-scroll {
  overflow-y: auto !important;
  flex: 1 1 auto !important;
}
/* Line item: thumbnail + info + stepper + remove */
.gtc-cart-block .gtc-cart-item {
  position: relative !important;
  display: flex !important;
  gap: 12px !important;
  align-items: flex-start !important;
  padding: 14px 40px 14px 18px !important;
  border-bottom: 1px solid var(--vlight) !important;
}
.gtc-cart-block .gtc-item-thumb {
  flex: 0 0 auto !important;
  width: 52px !important;
  height: 52px !important;
  border: 1px solid #e4e4e4 !important;
  border-radius: var(--r-btn) !important;
  background: var(--vlight) !important;
  overflow: hidden !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}
.gtc-cart-block .gtc-item-thumb img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
}
.gtc-cart-block .gtc-item-thumb svg {
  width: 24px !important;
  height: 24px !important;
  stroke: #b7b7b7 !important;
}
.gtc-cart-block .gtc-item-info {
  flex: 1 1 auto !important;
  min-width: 0 !important;
}
.gtc-cart-block .gtc-item-name {
  font: var(--fw-semibold) var(--fs-sm) var(--font) !important;
  color: var(--dark) !important;
  line-height: 1.3 !important;
}
.gtc-cart-block .gtc-item-art {
  font: var(--fw-regular) var(--fs-accent) var(--font) !important;
  color: var(--gray) !important;
  margin-top: 3px !important;
}
.gtc-cart-block .gtc-item-art b {
  font-weight: var(--fw-semibold) !important;
  color: var(--med) !important;
}
.gtc-cart-block .gtc-item-variant {
  font: var(--fw-regular) var(--fs-accent) var(--font) !important;
  color: var(--gray) !important;
  margin-top: 1px !important;
}
.gtc-cart-block .gtc-item-qty {
  display: inline-flex !important;
  align-items: center !important;
  margin-top: 10px !important;
  border: 1px solid var(--light-gray) !important;
  border-radius: var(--r-btn) !important;
  overflow: hidden !important;
}
.gtc-cart-block .gtc-item-qty button {
  width: 32px !important;
  height: 36px !important;
  min-height: 0 !important;
  border: 0 !important;
  background: var(--vlight) !important;
  color: var(--dark) !important;
  font-family: var(--font) !important;
  font-size: var(--fs-body) !important;
  font-weight: var(--fw-bold) !important;
  line-height: 1 !important;
  padding: 0 !important;
  cursor: pointer !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}
.gtc-cart-block .gtc-item-qty button:hover {
  background: var(--yellow) !important;
}
.gtc-cart-block .gtc-item-qty input {
  width: 44px !important;
  height: 36px !important;
  min-height: 0 !important;
  border: 0 !important;
  border-left: 1px solid var(--light-gray) !important;
  border-right: 1px solid var(--light-gray) !important;
  text-align: center !important;
  padding: 0 !important;
  margin: 0 !important;
  font-family: var(--font) !important;
  font-size: var(--fs-sm) !important;
  font-weight: var(--fw-semibold) !important;
  line-height: normal !important;
  color: var(--dark) !important;
  background: var(--white) !important;
  outline: none !important;
  -moz-appearance: textfield !important;
  appearance: textfield !important;
  box-sizing: border-box !important;
  vertical-align: middle !important;
}
.gtc-cart-block .gtc-item-qty input::-webkit-outer-spin-button,
.gtc-cart-block .gtc-item-qty input::-webkit-inner-spin-button {
  -webkit-appearance: none !important;
  margin: 0 !important;
}
.gtc-cart-block .gtc-item-remove {
  position: absolute !important;
  top: 10px !important;
  right: 10px !important;
  background: transparent !important;
  border: 0 !important;
  cursor: pointer !important;
  border-radius: var(--r-badge) !important;
  color: #b7b7b7 !important;
  font-size: var(--fs-body-lg) !important;
  line-height: 1 !important;
  padding: 4px 7px !important;
  transition:
    background 0.15s,
    color 0.15s !important;
}
.gtc-cart-block .gtc-item-remove:hover {
  background: var(--yellow) !important;
  color: var(--dark) !important;
}
.gtc-cart-block .gtc-cart-empty {
  padding: 28px 18px !important;
  text-align: center !important;
  color: var(--gray) !important;
  font-size: var(--fs-sm) !important;
}
.gtc-cart-block .gtc-cart-foot {
  padding: 14px 18px !important;
  background: var(--vlight) !important;
  border-top: 1px solid var(--light-gray) !important;
  flex: 0 0 auto !important;
}
.gtc-cart-block .gtc-cart-cta {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  width: 100% !important;
  background: var(--yellow) !important;
  color: var(--dark) !important;
  padding: 13px 16px !important;
  border: 0 !important;
  border-radius: var(--r-btn) !important;
  font: var(--fw-semibold) var(--fs-xs) var(--font) !important;
  text-transform: uppercase !important;
  letter-spacing: 1px !important;
  cursor: pointer !important;
  text-decoration: none !important;
  transition: background 0.15s ease !important;
  box-sizing: border-box !important;
}
.gtc-cart-block .gtc-cart-cta:hover {
  background: var(--yellow-med) !important;
}
.gtc-cart-block .gtc-cart-cta[aria-disabled="true"] {
  opacity: 0.4 !important;
  pointer-events: none !important;
}
.gtc-cart-block .gtc-cart-cta .arrow {
  transition: transform 0.15s ease !important;
}
.gtc-cart-block .gtc-cart-cta:hover .arrow {
  transform: translateX(3px);
}
/* ============================================================
   GEROTEC /anfrage page (all 3 widgets)
   ============================================================ */
/* ---------- WIDGET 1: Cart items block ---------- */
.anf-block {
  background: var(--white);
  border: 1.5px solid var(--light-gray);
  border-radius: var(--r-card);
  padding: 36px;
  font-family: var(--font);
  color: var(--dark);
  box-shadow:
    0 2px 8px rgba(0, 0, 0, 0.04),
    0 16px 38px rgba(0, 0, 0, 0.07);
}
.anf-block * {
  box-sizing: border-box;
}
.anf-block h2 {
  font-size: var(--fs-h3);
  font-weight: var(--fw-semibold);
  color: var(--dark);
  margin: 0 0 18px;
  line-height: 1.15;
}
.anf-block-eyebrow {
  font-size: var(--fs-accent);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-accent);
  text-transform: uppercase;
  color: var(--gray);
  margin-bottom: 8px;
  display: block;
}
.anf-block-sub {
  font-size: var(--fs-body);
  color: var(--med);
  margin: 0 0 28px;
  line-height: 1.6;
}
.anf-cart-items {
  display: flex;
  flex-direction: column;
}
.anf-cart-item {
  display: grid;
  grid-template-columns: auto 1fr auto auto;
  gap: 16px;
  align-items: center;
  padding: 18px 0;
  border-top: 1px solid var(--light-gray);
}
.anf-cart-item:first-child {
  border-top: none;
  padding-top: 0;
}
.anf-cart-item:last-child {
  padding-bottom: 0;
}
.anf-cart-thumb {
  width: 84px;
  height: 84px;
  border: 1px solid #e4e4e4;
  border-radius: var(--r-btn);
  background: var(--vlight);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
}
.anf-cart-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.anf-cart-thumb svg {
  width: 34px;
  height: 34px;
  stroke: #b7b7b7;
}
.anf-cart-info .name {
  font-size: var(--fs-body-lg);
  font-weight: var(--fw-semibold);
  color: var(--dark);
  line-height: 1.3;
  margin-bottom: 4px;
}
.anf-cart-info .variant {
  font-size: var(--fs-body);
  color: var(--med);
  margin-bottom: 4px;
}
.anf-cart-info .sku {
  font-family: var(--font);
  font-size: var(--fs-sm);
  font-weight: var(--fw-regular);
  color: var(--med);
}
.anf-cart-qty {
  display: inline-flex;
  align-items: center;
  border: 1.5px solid var(--light-gray);
  border-radius: var(--r-btn);
  overflow: hidden;
}
.anf-cart-qty button {
  background: var(--white);
  border: none;
  width: 32px;
  height: 36px;
  cursor: pointer;
  font-size: var(--fs-body);
  color: var(--dark);
  transition: background 0.15s;
  padding: 0;
}
.anf-cart-qty button:hover {
  background: var(--vlight);
}
.anf-cart-qty input {
  width: 44px;
  height: 36px;
  border: none;
  border-left: 1px solid var(--light-gray);
  border-right: 1px solid var(--light-gray);
  text-align: center;
  font-family: inherit;
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  color: var(--dark);
  -moz-appearance: textfield;
}
.anf-cart-qty input::-webkit-outer-spin-button,
.anf-cart-qty input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.anf-cart-qty input:focus {
  outline: none;
  background: var(--vlight);
}
.anf-cart-remove {
  background: none;
  border: none;
  color: var(--gray);
  cursor: pointer;
  padding: 7px;
  border-radius: var(--r-badge);
  transition:
    background 0.15s,
    color 0.15s;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.anf-cart-remove svg {
  width: 20px;
  height: 20px;
}
.anf-cart-remove:hover {
  background: var(--yellow);
  color: var(--dark);
}
.anf-cart-empty {
  padding: 48px 0;
  text-align: center;
  color: var(--med);
}
.anf-cart-empty p {
  margin-bottom: 20px;
}
.anf-cart-empty a {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: var(--yellow);
  color: var(--dark);
  padding: 14px 24px;
  font-weight: var(--fw-semibold);
  font-size: var(--fs-btn);
  border-radius: var(--r-btn);
  text-decoration: none;
}
@media (max-width: 768px) {
  .anf-block {
    padding: 24px;
  }
  .anf-cart-item {
    grid-template-columns: auto 1fr;
    gap: 8px 14px;
  }
  .anf-cart-qty,
  .anf-cart-remove {
    justify-self: start;
  }
}
/* ---------- WIDGET 2: Contact form ---------- */
.anf-form-block {
  background: var(--white);
  border: 1.5px solid var(--light-gray);
  border-radius: var(--r-card);
  padding: 36px;
  font-family: var(--font);
  color: var(--dark);
  box-shadow:
    0 2px 8px rgba(0, 0, 0, 0.04),
    0 16px 38px rgba(0, 0, 0, 0.07);
}
.anf-form-block * {
  box-sizing: border-box;
}
.anf-form-block h2 {
  font-size: var(--fs-h3);
  font-weight: var(--fw-semibold);
  color: var(--dark);
  margin: 0 0 18px;
  line-height: 1.15;
}
.anf-form-eyebrow {
  font-size: var(--fs-accent);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-accent);
  text-transform: uppercase;
  color: var(--gray);
  margin-bottom: 8px;
  display: block;
}
.anf-form-sub {
  font-size: var(--fs-body);
  color: var(--med);
  margin: 0 0 28px;
  line-height: 1.6;
}
/* Dynamic address toggles — normal body-text labels */
.anf-form label.anf-check {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  margin: 22px 0 20px;
  font-size: var(--fs-body);
  font-weight: var(--fw-regular);
  letter-spacing: normal;
  text-transform: none;
  color: var(--dark);
  line-height: 1.5;
  cursor: pointer;
}
.anf-check input[type="checkbox"] {
  width: 20px;
  height: 20px;
  margin-top: 1px;
  flex: 0 0 auto;
  accent-color: var(--dark);
  cursor: pointer;
}
/* A revealed address block reads as a tinted panel, not a pair of rules.
   Anthony's note (July 2026) was that the section had no visual separation and
   needed another divider. A panel answers that better: rules only say "something
   ended", whereas the tint says "this block belongs to the checkbox you just
   unticked" — which is what it actually is. It also survives the fields inside
   changing height, and there's no hairline colour left to bikeshed.
   The inputs stay white, so they lift off the panel instead of blending in. */
.anf-reveal {
  margin: 16px 0 20px;
  padding: 24px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
}
.anf-reveal[hidden] {
  display: none;
}
.anf-form .anf-reveal .anf-section-title {
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
}
.anf-form .row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-bottom: 16px;
}
.anf-form .field-full {
  margin-bottom: 16px;
}
.anf-form label {
  display: block;
  font-size: var(--fs-accent);
  font-weight: var(--fw-semibold);
  color: var(--dark);
  margin-bottom: 6px;
  letter-spacing: var(--ls-accent);
  text-transform: uppercase;
}
.anf-form label .req {
  color: var(--req);
  margin-left: 4px;
}
.anf-form input,
.anf-form select,
.anf-form textarea {
  width: 100%;
  padding: 14px 16px;
  border: 1.5px solid var(--light-gray);
  border-radius: var(--r-btn);
  background: var(--white);
  font-family: var(--font);
  font-size: var(--fs-body);
  color: var(--dark);
  transition: border-color 0.15s;
}
.anf-form input:focus,
.anf-form textarea:focus,
.anf-form select:focus {
  outline: none;
  border-color: var(--dark);
}
/* inline field error (email validity message on blur) */
.anf-field-error {
  color: var(--req);
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  margin: 6px 0 0;
  line-height: 1.3;
  letter-spacing: normal;
  text-transform: none;
}
/* custom dropdown caret, inset from the edge */
.anf-form select {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  padding-right: 42px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path d='M1 1l5 5 5-5' fill='none' stroke='%23606060' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  background-repeat: no-repeat;
  background-position: right 16px center;
}
.anf-form textarea {
  resize: vertical;
  min-height: 120px;
  line-height: 1.6;
}
.anf-form .dsg-line {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-size: var(--fs-xs);
  color: var(--med);
  margin: 24px 0 0;
  line-height: 1.6;
}
.anf-form .dsg-line input {
  width: auto;
  padding: 0;
  margin-top: 2px;
  accent-color: var(--dark);
}
.anf-form .dsg-line label {
  text-transform: none;
  letter-spacing: 0;
  font-weight: var(--fw-regular);
  color: var(--med);
  font-size: var(--fs-xs);
  margin: 0;
  cursor: pointer;
}
.anf-form .dsg-line a {
  color: var(--dark);
  border-bottom: 1.5px solid var(--yellow);
  text-decoration: none;
}
/* Honeypot - hidden from humans, visible to bots */
.anf-form .hp-field {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}
/* Submit status message */
.anf-submit-msg {
  margin-top: 20px;
  padding: 16px 20px;
  border-radius: var(--r-btn);
  font-size: var(--fs-sm);
  display: none;
}
/* No dark left bar — the yellow border already carries it, and the black stub
   read as a separate element. Same call as the Beratung confirmation box. */
.anf-submit-msg.is-error {
  display: block;
  background: var(--yellow-soft);
  border: 1.5px solid var(--yellow);
  color: var(--dark);
  font-weight: var(--fw-semibold);
}
.anf-submit-msg.is-success {
  display: block;
  background: #f0fff0;
  border: 1.5px solid #50b050;
  color: #205020;
}
/* Section sub-title inside the form (Lieferadresse, etc.) */
.anf-form .anf-section-title {
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--dark);
  margin: 26px 0 12px;
  padding-top: 22px;
  border-top: 1px solid var(--vlight);
}
/* Collapsible Rechnungsadresse (native <details>) */
.anf-billing {
  margin: 16px 0;
  border: 1px solid var(--light-gray);
  border-radius: var(--r-btn);
  overflow: hidden;
}
.anf-billing > summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 14px 16px;
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--dark);
  background: var(--vlight);
}
.anf-billing > summary::-webkit-details-marker {
  display: none;
}
.anf-billing .opt {
  color: var(--gray);
  font-weight: var(--fw-regular);
  text-transform: none;
  letter-spacing: 0;
}
.anf-billing-chevron {
  width: 12px;
  height: 8px;
  flex: 0 0 auto;
  transition: transform 0.18s ease;
}
.anf-billing[open] .anf-billing-chevron {
  transform: rotate(180deg);
}
.anf-billing-body {
  padding: 16px;
  border-top: 1px solid var(--light-gray);
}
.anf-billing-body .field-full:last-child,
.anf-billing-body .row:last-child {
  margin-bottom: 0;
}
/* Binding-order box - deliberately distinct from the DSGVO line */
.anf-order-box {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  margin: 20px 0 0;
  padding: 16px 18px;
  background: var(--yellow-soft);
  border: 1.5px solid var(--yellow);
  border-left: 5px solid var(--dark);
  border-radius: var(--r-btn);
  cursor: pointer;
}
.anf-order-box input {
  width: 20px;
  height: 20px;
  margin-top: 2px;
  flex: 0 0 auto;
  accent-color: var(--dark);
  cursor: pointer;
}
.anf-order-text {
  display: block;
}
.anf-order-head {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: var(--fs-sm);
  font-weight: var(--fw-bold);
  color: var(--dark);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 5px;
}
.anf-order-head svg {
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
}
.anf-order-box .anf-order-desc {
  display: block;
  font-size: var(--fs-xs);
  color: var(--dark);
  line-height: 1.5;
  text-transform: none;
  letter-spacing: 0;
  font-weight: var(--fw-regular);
}
.anf-order-box:has(input:checked) {
  background: var(--yellow-med);
  border-color: var(--yellow);
}
@media (max-width: 768px) {
  .anf-form-block {
    padding: 24px;
  }
  .anf-form .row {
    grid-template-columns: 1fr;
  }
  .anf-order-box {
    padding: 14px;
    gap: 12px;
  }
  .anf-form .anf-section-title {
    margin-top: 20px;
  }
}
/* ---------- WIDGET 3: Summary sidebar ---------- */
/* --- Sticky needs somewhere to travel -------------------------------------
   position:sticky moves within its CONTAINING BLOCK. If that block is exactly
   as tall as the card, travel = 0 and the card never pins — it just sits there.
   Two ancestors have to cooperate:

   1. The ROW (flex-direction:row) must let the sidebar column stretch to the
      row's full height. If align-items is flex-start the column collapses to
      its content and the card can't move.
   2. The COLUMN is flex-direction:COLUMN, so align-items works on the
      HORIZONTAL axis — a child's height there comes from flex-grow, not from
      stretch. Without flex-grow the HTML widget hugs the card and travel is 0
      again, even with a full-height column.

   Do NOT re-enable Elementor's own Sticky motion effect on this column.
   It works by CLONING the element, which duplicated the whole form: two
   #anf-dsg (both required, one invisible) meant checkValidity() was false
   forever and the submit button could never activate. That was the bug.

   !important is needed, not lazy: Elementor writes the row's align-items from
   the container's UI setting as `.elementor-{page} .elementor-element.elementor-
   element-{id}` (0,3,0), which outranks the :has() selector below (0,2,0). */
.e-con:has(> .e-con > .elementor-widget-html > .anf-summary) {
  align-items: stretch !important;
}
.elementor-widget-html:has(> .anf-summary) {
  flex-grow: 1 !important;
}

/* STICKY IS CONDITIONAL — see the JS in anfrage-widget-3.html.
   Once the card pins at top:24px it scrolls WITH the page, so on a short
   viewport its bottom (the order type, consent checkbox and submit button)
   becomes permanently unreachable — you physically cannot scroll to it.
   The JS adds .is-unstuck whenever the card is taller than the viewport,
   which drops it back to normal flow so everything stays reachable.
   The max-height below is only a no-JS fallback; when the JS runs, the card
   either fits (no cap needed) or is unstuck (cap removed). */
/* Sticky offset is 115px — clears the 107px fixed site header with 8px to spare.
   The JS in anfrage-widget-3.html reads this value back off the element, so this
   rule is the single source of truth. Change it here only. */
.anf-summary {
  background: var(--white);
  color: var(--dark);
  border: 1.5px solid var(--light-gray);
  padding: 36px;
  border-radius: var(--r-card);
  font-family: var(--font);
  position: sticky;
  top: 115px;
  max-height: calc(100vh - 139px);
  overflow-y: auto;
  overscroll-behavior: contain;
  box-shadow:
    0 2px 8px rgba(0, 0, 0, 0.04),
    0 16px 38px rgba(0, 0, 0, 0.07);
}

/* Logged-in admins get WordPress's 32px admin bar, which pushes the fixed header
   down to 32–139. Without this the card pins UNDER the header — but only ever for
   admins, never for visitors. Don't tune `top` above while logged in; check the
   frontend in a private window instead. */
body.admin-bar .anf-summary {
  top: 147px;
  max-height: calc(100vh - 171px);
}
.anf-summary.is-unstuck {
  position: static;
  max-height: none;
  overflow: visible;
}
.anf-summary * {
  box-sizing: border-box;
}
.anf-summary-eyebrow {
  font-size: var(--fs-accent);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-accent);
  text-transform: uppercase;
  color: var(--gray);
  display: inline-block;
  margin-bottom: 12px;
}
.anf-summary h3 {
  color: var(--dark);
  margin: 0 0 18px;
  font-size: var(--fs-h3);
  font-weight: var(--fw-semibold);
  line-height: 1.15;
}
.anf-summary-line {
  display: flex;
  justify-content: space-between;
  padding: 14px 0;
  border-top: 1px solid var(--line);
  font-size: var(--fs-body);
}
.anf-summary-line:first-of-type {
  border-top: none;
  padding-top: 0;
}
.anf-summary-line .k {
  color: var(--med);
}
.anf-summary-line .v {
  color: var(--dark);
  font-weight: var(--fw-semibold);
}
.anf-summary-total {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 0;
  border-top: 1px solid var(--light-gray);
  margin-top: 16px;
}
.anf-summary-total .k {
  font-size: var(--fs-xs);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--dark);
}
.anf-summary-total .v {
  font-size: var(--fs-xs);
  letter-spacing: 0.05em;
  color: var(--dark);
  font-weight: var(--fw-semibold);
}
.anf-summary-cta {
  display: block;
  width: 100%;
  text-align: center;
  white-space: normal;
  overflow-wrap: break-word;
  background: var(--yellow);
  color: var(--dark);
  padding: 16px 22px;
  font-family: inherit;
  font-size: var(--fs-btn);
  font-weight: var(--fw-semibold);
  line-height: 1.3;
  border: 2px solid transparent;
  border-radius: var(--r-btn);
  cursor: pointer;
  margin-top: 24px;
  transition: background-color 0.15s;
}
/* Both colours are restated on hover because a global button-hover style (theme
   or Elementor Site Settings → Buttons) paints this CTA crimson with white text
   — that's the red button in the July 2026 screenshot, not a state of ours.
   White on --yellow-med is 1.16:1, i.e. invisible. !important so a future change
   to those global button settings can't silently break it again. */
.anf-summary-cta:hover {
  background: var(--yellow-med) !important;
  color: var(--dark) !important;
}

/* If the server ever rejects a submission, the CTA greys out to match the notice
   below it, rather than sitting there looking like a live CTA above a message
   saying it failed. Deliberately still clickable — the user fixes a field and
   retries, so pointer-events stays on; this is appearance only. */
.anf-summary:has(.anf-submit-msg.is-error) .anf-summary-cta,
.anf-summary:has(.anf-submit-msg.is-error) .anf-summary-cta:hover {
  background: var(--light-gray) !important;
  color: var(--dark) !important;
}
.anf-summary-cta[aria-disabled="true"] {
  background: var(--light-gray);
  color: var(--white);
  box-shadow: none;
  pointer-events: none;
  cursor: not-allowed;
}
.anf-summary-cta .arrow {
  display: inline-block;
  margin-left: 6px;
  transition: transform 0.15s;
}
.anf-summary-cta:hover .arrow {
  transform: translateX(3px);
}
/* Helper hint shown only while the button is disabled */
.anf-summary-hint {
  display: none;
  font-size: var(--fs-accent);
  color: var(--gray);
  text-align: center;
  margin-top: 10px;
}
.anf-summary-cta[aria-disabled="true"] + .anf-summary-hint {
  display: block;
}
.anf-summary-note {
  font-size: var(--fs-accent);
  color: var(--gray);
  margin: 16px 0 0;
  line-height: 1.5;
  text-align: center;
}
/* Consent block inside the summary sidebar */
.anf-summary-consent {
  margin-top: 20px;
}
/* order type - mutually exclusive radios (white inset box) */
.anf-ordertype {
  display: flex;
  flex-direction: column;
  gap: 12px;
  background: var(--white);
  border: 1px solid var(--light-gray);
  border-radius: var(--r-btn);
  padding: 14px 16px;
  margin-bottom: 16px;
}
.anf-radio {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  cursor: pointer;
  font-size: var(--fs-xs);
  line-height: 1.5;
  color: var(--med);
}
.anf-radio input[type="radio"] {
  width: 20px;
  height: 20px;
  margin-top: 1px;
  flex: 0 0 auto;
  accent-color: var(--dark);
  cursor: pointer;
}
.anf-radio b {
  color: var(--dark);
  font-weight: var(--fw-semibold);
}
.anf-summary .dsg-line {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-size: var(--fs-xs);
  color: var(--med);
  line-height: 1.75;
}
.anf-summary .dsg-line input {
  width: 20px;
  height: 20px;
  margin-top: 2px;
  flex: 0 0 auto;
  accent-color: var(--dark);
  cursor: pointer;
}
.anf-summary .dsg-line label {
  font-size: var(--fs-xs);
  color: var(--med);
  line-height: 1.75;
  cursor: pointer;
}
.anf-summary .dsg-line a {
  color: var(--dark);
  text-decoration: none;
  border-bottom: 1.5px solid var(--yellow);
}
.anf-summary .anf-order-box {
  margin-top: 16px;
}
.anf-summary .anf-submit-msg {
  margin-top: 14px;
}
@media (max-width: 1024px) {
  .anf-summary {
    position: static;
  }
  .anf-summary-cta {
    font-size: 14px;
    padding: 16px 18px;
    gap: 8px;
  }
}
@media (max-width: 768px) {
  .anf-summary {
    padding: 28px;
  }
  .anf-summary-cta {
    font-size: 13px;
    padding: 15px 14px;
  }
}
@media (max-width: 380px) {
  .anf-summary {
    padding: 22px;
  }
  .anf-summary-cta {
    font-size: 12px;
    padding: 14px 10px;
  }
}

/* ============================================================
   GEROTEC News inline featured image
   ============================================================ */
.inline-featured-image {
  float: none;
  width: 100%;
  margin: 0 0 28px 0; /* sits above the body text */
  border-radius: var(--r-img);
  overflow: hidden;
  aspect-ratio: 16 / 9; /* consistent shape across posts (optional) */
}
.inline-featured-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: var(--r-img);
}
@media (max-width: 767px) {
  .inline-featured-image {
    aspect-ratio: 16 / 10;
    margin-bottom: 20px;
  }
}
/* ============================================================
   GEROTEC News & Messen combined grid
   ============================================================ */
.gerotec-news-messen-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
}
.gerotec-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  overflow: hidden;
  /* same resting shadow as the Schulungen cards, for a uniform card system */
  box-shadow:
    0 2px 8px rgba(0, 0, 0, 0.04),
    0 16px 38px rgba(0, 0, 0, 0.07);
  transition:
    box-shadow 0.25s ease,
    transform 0.25s ease;
}
.gerotec-card:hover {
  box-shadow:
    0 4px 12px rgba(0, 0, 0, 0.06),
    0 20px 44px rgba(0, 0, 0, 0.09);
  transform: translateY(-2px);
}
.gerotec-card__full-link {
  display: flex;
  flex-direction: column;
  height: 100%;
  color: inherit;
  text-decoration: none;
}
.gerotec-card__image {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-bottom: 1px solid var(--line);
}
.gerotec-card__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.gerotec-card__image--logo {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  aspect-ratio: 4 / 3;
  background: var(--white);
  padding: 60px;
  border-bottom: 1px solid var(--line);
}
.gerotec-card__image--logo img {
  width: 62%;
  height: auto;
  object-fit: contain;
}
.gerotec-card__badge {
  position: absolute;
  top: 24px;
  right: 24px;
  background: var(--yellow);
  border-radius: var(--r-badge);
  padding: 12px 20px;
  font-family: var(--font);
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  text-transform: uppercase;
  letter-spacing: 0.15em;
  line-height: 1.3;
  color: var(--dark);
}
.gerotec-card__body {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: 32px;
}
.gerotec-card__body h3 {
  margin: 0 0 16px;
  font-family: var(--font);
  font-size: var(--fs-h5);
  font-weight: var(--fw-semibold);
  line-height: 1.1;
  color: var(--dark);
  /* reserve exactly 2 lines so every excerpt starts at the same height */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: calc(1.1em * 2);
}
.gerotec-card__excerpt {
  margin: 0;
  font-family: var(--font);
  font-size: var(--fs-body);
  font-weight: var(--fw-regular);
  line-height: 1.5;
  color: var(--dark);
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
  /* reserve 3 lines so meta + button align across the row */
  min-height: calc(1.5em * 3);
}
.gerotec-card__meta {
  margin-top: 16px;
  font-family: var(--font);
  font-size: var(--fs-sm);
  font-weight: var(--fw-regular);
  line-height: 1.2;
  color: var(--gray);
}
.gerotec-card__meta p {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 8px;
}
.gerotec-card__meta p:last-child {
  margin-bottom: 0;
}
.gerotec-card__icon {
  width: 15px;
  height: 15px;
  flex: 0 0 15px;
  stroke: var(--gray);
  fill: none;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.gerotec-card__link,
.gerotec-card__link:link,
.gerotec-card__link:visited {
  margin-top: auto;
  padding-top: 24px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font);
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  text-transform: uppercase;
  letter-spacing: 0.15em;
  line-height: 1.3;
  color: var(--dark) !important;
  text-decoration: none;
  transition: 0.2s ease;
}
.gerotec-card__link:hover {
  color: var(--dark) !important;
  opacity: 0.75;
}
.gerotec-card a,
.gerotec-card a:link,
.gerotec-card a:visited,
.gerotec-card a:hover {
  color: var(--dark) !important;
}
.gerotec-card__footer {
  padding: 20px 32px;
  border-top: 1px solid var(--line);
  font-family: var(--font);
  font-size: var(--fs-sm);
  font-weight: var(--fw-regular);
  line-height: 1.2;
  color: var(--gray);
}
.gerotec-pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  margin-top: 48px;
}
.gerotec-pagination .page-numbers {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  min-width: 42px;
  height: 42px;
  padding: 0 14px;
  border: 1px solid var(--line);
  border-radius: var(--r-btn);
  font-family: var(--font);
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  line-height: 1;
  color: var(--dark) !important;
  text-decoration: none;
}
.gerotec-pagination .page-numbers.current {
  background: var(--yellow);
  border-color: var(--yellow);
  color: var(--dark) !important;
}
.gerotec-pagination .page-numbers:hover {
  background: #f7f7f7;
  color: var(--dark) !important;
}
@media (max-width: 1024px) {
  .gerotec-news-messen-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 767px) {
  .gerotec-news-messen-grid {
    grid-template-columns: 1fr;
  }
  .gerotec-card__body {
    padding: 28px;
  }
  .gerotec-card__footer {
    padding: 20px 28px;
  }
}
/* ============================================================
   GEROTEC - Related post cards ("Weitere Beitraege")
   horizontal desktop -> vertical tablet/phone
   ============================================================ */
.gtc-related-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  width: 100%;
}
.gtc-rel-card {
  display: flex;
  gap: 16px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  padding: 14px;
  text-decoration: none;
  transition:
    box-shadow 0.2s ease,
    transform 0.2s ease;
}
.gtc-rel-card:hover {
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.08);
  transform: translateY(-2px);
}
.gtc-rel-img {
  flex: 0 0 44%;
  max-width: 44%;
  align-self: stretch;
  position: relative;
  min-height: 150px;
  border-radius: var(--r-img);
  overflow: hidden;
  background: var(--line);
}
.gtc-related-grid .gtc-rel-img img,
.gtc-related-grid .gtc-rel-img img.wp-post-image {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  min-height: 100% !important;
  object-fit: cover !important;
  object-position: center center !important;
  display: block !important;
}
.gtc-rel-noimg {
  display: block;
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, #dcdcdc, #efefef);
}
.gtc-rel-body {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  padding: 6px 8px 6px 0;
}
.gtc-rel-meta {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
}
.gtc-rel-badge {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 1;
  font-family: var(--font);
  font-size: var(--fs-accent);
  font-weight: var(--fw-bold);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--dark);
  background: var(--yellow);
  padding: 4px 9px;
  border-radius: var(--r-badge);
}
.gtc-rel-date {
  font-family: var(--font);
  font-size: var(--fs-xs);
  color: var(--gray);
}
.gtc-rel-title {
  font-family: var(--font);
  font-size: var(--fs-body-lg);
  font-weight: var(--fw-semibold);
  line-height: 1.3;
  color: var(--dark);
  margin: 0 0 8px;
}
.gtc-rel-more {
  margin-top: auto;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding-top: 14px;
  font-family: var(--font);
  font-size: var(--fs-accent);
  font-weight: var(--fw-bold);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--dark);
}
.gtc-rel-more svg {
  transition: transform 0.15s ease;
}
.gtc-rel-card:hover .gtc-rel-more svg {
  transform: translateX(3px);
}
/* Below full-width desktop: 2-up and flip cards to vertical (image on top) */
@media (max-width: 1280px) {
  .gtc-related-grid {
    grid-template-columns: 1fr 1fr;
  }
  .gtc-rel-card {
    flex-direction: column;
  }
  .gtc-rel-img {
    flex: 0 0 auto;
    max-width: 100%;
    min-height: 0;
    aspect-ratio: 16/9;
    align-self: stretch;
  }
  .gtc-rel-body {
    padding: 0 4px;
  }
}
/* Phone: single column */
@media (max-width: 640px) {
  .gtc-related-grid {
    grid-template-columns: 1fr;
  }
}
/* ============================================================
   GEROTEC - Nested-tabs active state (Kontakt "Schreib uns / Rückruf")
   ------------------------------------------------------------
   Elementor wires the active tab's background to the global Accent colour
   (--n-tabs-title-background-color-active -> --e-global-color-accent = #FFF099),
   so the active tab fills pale yellow. The design wants ONLY the yellow
   underline. Two things are needed to override it reliably:
     1. High specificity — a plain .e-n-tab-title selector loses to Elementor's.
     2. transition:none — the tab has a 0.3s background transition, so without
        this the fill fades out slowly / flickers back on interaction.
   The border-bottom underline is untouched.
   ============================================================ */
/* .elementor-widget-n-tabs
  .e-n-tabs
  .e-n-tabs-heading
  .e-n-tab-title[aria-selected="true"] {
  background: transparent !important;
  transition: none !important;
} */

/* ============================================================
   GEROTEC - Schulung course detail ([gerotec_schulung_detail])
   Rendered on the Elementor Single template for the schulung CPT.
   ============================================================ */
.sch-d-wrap {
  max-width: 1120px;
  margin: 0 auto;
  padding: 0 40px;
}
.sch-d-hero {
  background: var(--darker);
  color: #fff;
  padding: 64px 0 56px;
  margin: 0 0 8px;
}
.sch-d-eyebrow {
  font-size: var(--fs-accent);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-accent);
  text-transform: uppercase;
  color: var(--yellow);
  margin: 0 0 14px !important;
}
.sch-d-rule {
  width: 56px;
  height: 5px;
  background: var(--yellow);
  border-radius: 3px;
  margin: 0 0 20px;
}
.sch-d-title {
  font-family: var(--font-bold);
  font-weight: normal;
  font-size: clamp(30px, 4vw, 48px);
  line-height: 1.1;
  letter-spacing: -0.01em;
  color: #fff;
  margin: 0 0 18px;
}
.sch-d-lead {
  font-size: var(--fs-body-lg);
  line-height: 1.6;
  color: #cfcfcf;
  max-width: 680px;
  margin: 0;
}

.sch-d-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: 56px;
  align-items: start;
  padding: 56px 0 0;
}
.sch-d-h {
  font-family: var(--font);
  font-size: var(--fs-sm);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--darker);
  margin: 40px 0 16px;
}
.sch-d-h:first-child {
  margin-top: 0;
}
.sch-d-body {
  font-size: var(--fs-body);
  line-height: 1.75;
  color: var(--med);
}
.sch-d-body p {
  margin: 0 0 16px;
}
.sch-d-agenda {
  list-style: none;
  margin: 0;
  padding: 0;
}
.sch-d-agenda li {
  display: flex;
  gap: 14px;
  padding: 14px 0;
  border-bottom: 1px solid var(--line);
  font-size: var(--fs-body);
  color: var(--dark);
}
/* black check, black circle border, no fill — inline SVG (paste-safe) */
.sch-d-agenda li:before {
  content: "";
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: transparent
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l4 4L19 7'/%3E%3C/svg%3E")
    no-repeat center/12px 12px;
  border: 1.5px solid #000000;
  margin-top: 1px;
}

/* no bg / border / padding here — style the container in Elementor instead */
.sch-d-aside {
  position: sticky;
  top: 110px;
}
body.admin-bar .sch-d-aside {
  top: 142px;
}
.sch-d-price {
  font-family: var(--font-bold);
  font-weight: normal;
  font-size: 34px;
  color: var(--darker);
  letter-spacing: -0.01em;
  margin: 0 0 4px !important;
}
.sch-d-price small {
  display: block;
  font-family: var(--font);
  font-size: var(--fs-sm);
  font-weight: var(--fw-regular);
  color: var(--gray);
  letter-spacing: 0;
  margin-top: 4px;
}
.sch-d-facts {
  list-style: none;
  margin: 22px 0 26px;
  padding: 22px 0 0;
  border-top: 1px solid var(--line);
}
.sch-d-facts li {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  font-size: var(--fs-sm);
  color: var(--dark);
  margin: 0 0 14px;
}
.sch-d-facts li:last-child {
  margin-bottom: 0;
}
.sch-d-facts svg {
  width: 18px;
  height: 18px;
  stroke: var(--gray);
  fill: none;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex: 0 0 auto;
  margin-top: 1px;
}
.sch-d-facts b {
  display: block;
  font-weight: var(--fw-semibold);
  color: var(--darker);
}
.sch-d-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-top: 26px;
  background: var(--yellow);
  color: var(--e-global-color-text, var(--darker)) !important;
  border: 1.5px solid var(--yellow);
  padding: 16px;
  border-radius: var(--r-btn);
  text-decoration: none;
  font-size: var(--fs-accent);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-accent);
  text-transform: uppercase;
  transition:
    background 0.15s,
    border-color 0.15s;
}
.sch-d-btn:hover {
  background: var(--yellow-med) !important;
  border-color: var(--yellow-med) !important;
  color: var(--e-global-color-text, var(--darker)) !important;
}
.sch-d-btn svg {
  width: 15px;
  height: 15px;
  stroke: currentColor;
  fill: none;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.sch-d-contact {
  margin: 56px 0 88px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  padding: 28px 34px;
  display: flex;
  align-items: center;
  gap: 22px;
  flex-wrap: wrap;
}
.sch-d-avatar {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--yellow);
  color: var(--darker);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 19px;
  font-weight: var(--fw-bold);
  flex: 0 0 auto;
}
.sch-d-clead {
  font-size: var(--fs-sm);
  color: var(--gray);
  margin: 0 0 3px !important;
}
.sch-d-name {
  font-size: var(--fs-body-lg);
  font-weight: var(--fw-semibold);
  color: var(--darker);
}
.sch-d-links {
  margin-left: auto;
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}
.sch-d-links a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: var(--fs-sm);
  color: var(--dark);
  text-decoration: none;
  border: 1px solid var(--light-gray);
  border-radius: var(--r-btn);
  padding: 11px 16px;
  transition: 0.15s;
}
.sch-d-links a:hover {
  background: var(--yellow);
  border-color: var(--yellow);
  color: var(--darker);
}
.sch-d-links svg {
  width: 16px;
  height: 16px;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

@media (max-width: 900px) {
  .sch-d-grid {
    grid-template-columns: 1fr;
    gap: 36px;
  }
  .sch-d-aside {
    position: static;
  }
}
@media (max-width: 767px) {
  .sch-d-wrap {
    padding: 0 20px;
  }
  .sch-d-hero {
    padding: 44px 0 40px;
  }
  .sch-d-contact {
    flex-direction: column;
    align-items: flex-start;
  }
  .sch-d-links {
    margin-left: 0;
  }
}

/* ============================================================
   GEROTEC - Fahrzeuge filter bar (FacetWP dropdowns + reset)
   ------------------------------------------------------------
   Put the three facet shortcodes + the reset link inside ONE Elementor
   container and give it the CSS class "fzg-filters". This lays them in a
   row and styles the dropdowns on-brand. Scoped to .fzg-filters so it
   doesn't touch FacetWP dropdowns elsewhere.
     [facetwp facet="fahrzeugtyp"]
     [facetwp facet="status"]
     [facetwp facet="zustand"]
     <a href="#" class="fzg-reset" onclick="FWP.reset();return false;">Filter zurücksetzen</a>
   ============================================================ */
.fzg-filters {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  align-items: center;
  margin: 0 0 24px;
}
.fzg-filters .facetwp-facet {
  flex: 1 1 200px;
  min-width: 180px;
  margin: 0 !important;
}
.fzg-filters .facetwp-type-dropdown select {
  width: 100%;
  font-family: var(--font);
  font-size: var(--fs-body);
  color: var(--dark);
  background: #fff;
  border: 1px solid var(--light-gray);
  border-radius: var(--r-btn);
  padding: 13px 40px 13px 15px;
  cursor: pointer;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none' stroke='%23606060' stroke-width='2'%3E%3Cpath d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 15px center;
}
.fzg-filters .facetwp-type-dropdown select:focus {
  outline: none;
  border-color: var(--yellow);
  box-shadow: 0 0 0 3px var(--yellow-soft);
}
.fzg-reset {
  font-size: var(--fs-sm);
  color: var(--med);
  text-decoration: none;
  white-space: nowrap;
  flex: 0 0 auto;
  transition: color 0.15s;
}
.fzg-reset:hover {
  color: var(--dark);
}
@media (max-width: 767px) {
  .fzg-filters .facetwp-facet,
  .fzg-reset {
    flex: 1 1 100%;
  }
}

/* ============================================================
   GEROTEC - Fahrzeuge overview cards ([gerotec_fahrzeuge])
   ------------------------------------------------------------
   Status badges are ON-BRAND (yellow + greys), distinguished by
   fill/darkness, not traffic-light colour. A used vehicle also gets a
   second "Gebraucht" badge. Verkauft cards stay visible but recede.
   ============================================================ */
.fzg-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 26px;
}
.fzg-card {
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  overflow: hidden;
  text-decoration: none;
  box-shadow:
    0 1px 3px rgba(0, 0, 0, 0.06),
    0 12px 28px rgba(0, 0, 0, 0.05);
  transition:
    box-shadow 0.2s,
    transform 0.2s;
}
.fzg-card:hover {
  box-shadow:
    0 4px 12px rgba(0, 0, 0, 0.06),
    0 18px 40px rgba(0, 0, 0, 0.09);
  transform: translateY(-2px);
}
.fzg-img {
  position: relative;
  aspect-ratio: 16/10;
  background: var(--vlight);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.fzg-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.fzg-ph {
  display: flex;
}
.fzg-ph svg {
  width: 52px;
  height: 52px;
  stroke: var(--light-gray);
  fill: none;
  stroke-width: 1.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.fzg-badges {
  position: absolute;
  top: 12px;
  right: 12px;
  display: flex;
  gap: 6px;
}
/* type matched to the site's card badges (.gerotec-card__badge / .sch-tag):
   --fs-xs, semibold, .15em tracking, uppercase */
.fzg-badge {
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-accent);
  text-transform: uppercase;
  padding: 6px 12px;
  border-radius: var(--r-badge);
  line-height: 1.3;
}
.fzg-badge.is-lager {
  background: var(--yellow);
  color: var(--darker);
}
.fzg-badge.is-reserviert {
  background: var(--vlight);
  color: var(--med);
  border: 1px solid var(--light-gray);
}
.fzg-badge.is-produktion {
  background: #fff;
  color: var(--dark);
  border: 1px solid var(--dark);
}
.fzg-badge.is-verkauft {
  background: var(--darker);
  color: #fff;
}
.fzg-badge.is-gebraucht {
  background: #fff;
  color: var(--dark);
  border: 1px solid var(--dark);
}
.fzg-body {
  padding: 18px;
  display: flex;
  flex-direction: column;
  flex: 1;
}
.fzg-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  margin: 0 0 5px;
}
/* title matched to the News card title (.gerotec-card__body h3): --fs-h5, semibold.
   Locked to 2 lines (clamp + min-height) so the title and the text below it
   start at the same Y on every card, and card heights match. */
.fzg-top h3 {
  font-family: var(--font);
  font-size: var(--fs-h5);
  font-weight: var(--fw-semibold);
  color: var(--dark);
  margin: 0;
  line-height: 1.15;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  min-height: calc(2 * 1.15em);
}
.fzg-chev {
  width: 20px;
  height: 20px;
  stroke: var(--darker);
  fill: none;
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex: 0 0 auto;
  margin-top: 2px;
}
/* text matched to the News card excerpt (.gerotec-card__excerpt): --fs-body.
   Locked to 3 lines so the spec strip below aligns across every card. */
.fzg-desc {
  font-family: var(--font);
  font-size: var(--fs-body);
  font-weight: var(--fw-regular);
  color: var(--med);
  line-height: 1.5;
  margin: 0 0 16px;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
  min-height: calc(3 * 1.5em);
}
.fzg-specs {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 8px;
  border-top: 1px solid var(--line);
  padding-top: 13px;
  margin-top: auto;
}
.fzg-sc {
  padding-left: 10px;
  min-width: 0;
}
.fzg-sc:first-child {
  padding-left: 0;
}
.fzg-sc + .fzg-sc {
  border-left: 1px solid var(--line);
}
.fzg-sl {
  display: block;
  font-size: 9.5px;
  color: var(--gray);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin: 0 0 3px;
}
.fzg-sv {
  display: block;
  font-size: 12px;
  color: var(--dark);
  font-weight: var(--fw-medium);
  line-height: 1.3;
}
.fzg-card.is-sold {
  opacity: 0.82;
}
.fzg-card.is-sold .fzg-img img {
  filter: grayscale(1);
}
.fzg-card.is-sold .fzg-top h3 {
  color: var(--med);
}
.fzg-empty {
  font-size: var(--fs-body);
  color: var(--med);
  text-align: center;
  padding: 40px 0;
}
@media (max-width: 1024px) {
  .fzg-grid {
    grid-template-columns: 1fr 1fr;
  }
}
@media (max-width: 640px) {
  .fzg-grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }
}

/* ============================================================
   GEROTEC - Reusable category pill (.gtc-pill)
   ------------------------------------------------------------
   One consistent yellow category pill for the whole site. Add the class
   "gtc-pill" to the widget (Elementor → Advanced → CSS Classes) and remove
   any background you set on the widget container — the yellow lives on this
   inline element so it hugs the word instead of filling the column.
   display:inline-block + width:fit-content is what shrinks it to the text.
   ============================================================ */
.gtc-pill {
  display: inline-block;
  width: fit-content;
  background: var(--yellow);
  color: var(--e-global-color-text, var(--darker));
  font-family: var(--font);
  font-size: var(--fs-accent);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-accent);
  text-transform: uppercase;
  padding: 8px 16px;
  border-radius: var(--r-badge);
  line-height: 1.3;
}

/* ============================================================
   GEROTEC - Schulungen course cards
   ------------------------------------------------------------
   Rendered by [gerotec_schulungen] (gerotec-schulungen.php) from the
   schulung CPT. Card anatomy borrowed from the Coachly reference,
   rebranded: photo on top, tag pill, title, icon meta row, then a
   footer with the "Mehr erfahren" button and the price.

   Meta chips are emitted by PHP only when their field is filled, so an
   unconfirmed date or location just shortens the row — no empty chip.
   ============================================================ */
/* Identical grid to the News & Messen cards (.gerotec-news-messen-grid): 3
   equal 1fr columns, 32px gap. Each card is therefore the same width as a News
   card. With 2 courses, tracks 1 and 2 fill and the 3rd sits empty on the
   right, so they read as left-aligned without extra rules. */
.sch-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
}
.sch-card {
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  overflow: hidden;
  box-shadow:
    0 2px 8px rgba(0, 0, 0, 0.04),
    0 16px 38px rgba(0, 0, 0, 0.07);
}
.sch-img {
  position: relative;
  aspect-ratio: 16/10;
  background: var(--vlight);
  overflow: hidden;
}
.sch-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.sch-ph {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.sch-ph svg {
  width: 64px;
  height: 64px;
  stroke: var(--light-gray);
  fill: none;
  stroke-width: 1.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.sch-body {
  padding: 24px;
  display: flex;
  flex-direction: column;
  flex: 1;
}
/* type sizes matched to the homepage News & Messen cards (.gerotec-card__*)
   for a uniform card system: title --fs-h5 semibold, meta --fs-sm, tag --fs-xs.
   Only the button keeps its yellow fill. */
/* overlaid on the card image, top-right. Light grey (--vlight = #F2F2F2) with
   dark text, matching the Empfohlene-Produkte badge. Kept off yellow so it
   doesn't compete with the CTA button. */
.sch-tag {
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 1;
  background: var(--vlight);
  color: var(--dark);
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  letter-spacing: 0.15em;
  text-transform: uppercase;
  padding: 6px 12px;
  border-radius: var(--r-badge);
  line-height: 1.3;
}
/* Title is locked to exactly 3 lines: min-height reserves 3 lines for short
   titles, line-clamp caps long ones at 3 (extra text is trimmed with an …).
   Every title block is therefore the same height, so the meta row, divider and
   footer line up across all cards regardless of title length. The full,
   untrimmed title still shows on the course detail page. */
.sch-body h2 {
  font-family: var(--font);
  font-size: var(--fs-h5);
  font-weight: var(--fw-semibold);
  color: var(--dark);
  line-height: 1.1;
  margin: 0 0 14px;
  min-height: 22px;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
}
/* borders removed (off-brand faint lines); the meta row is now plain text */
.sch-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 14px 20px;
  padding: 0;
  margin: 0 0 18px;
}
.sch-meta span {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: var(--fs-sm);
  color: var(--med);
}
.sch-meta svg {
  width: 16px;
  height: 16px;
  stroke: var(--gray);
  fill: none;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex: 0 0 auto;
}
/* wrap:wrap lets the price drop below the button on a narrow (4-up) card
   instead of overflowing the card edge; on wide cards they stay on one row */
.sch-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px 14px;
  flex-wrap: wrap;
  margin-top: auto;
}
/* !important on the colour: a global theme button style was overriding it (same
   issue as the Anfrage CTA). Restated on hover so it can't flip to white. */
.sch-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--yellow);
  color: var(--e-global-color-text, var(--darker)) !important;
  border: 1.5px solid var(--yellow);
  padding: 12px 18px;
  border-radius: var(--r-btn);
  text-decoration: none;
  font-size: 12px;
  font-weight: var(--fw-bold);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  white-space: nowrap;
  transition:
    background 0.15s,
    border-color 0.15s;
}
.sch-btn:hover {
  background: var(--yellow-med) !important;
  border-color: var(--yellow-med) !important;
  color: var(--e-global-color-text, var(--darker)) !important;
}
.sch-btn svg {
  width: 13px;
  height: 13px;
  stroke: currentColor;
  fill: none;
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.sch-price {
  font-family: var(--font-bold);
  font-size: 18px;
  font-weight: normal;
  color: var(--darker);
  letter-spacing: -0.01em;
  white-space: nowrap;
  text-align: right;
}
/* second line: the MwSt note, right-aligned under the price */
.sch-price-hint {
  font-size: var(--fs-xs);
  color: var(--gray);
  text-align: right;
  margin: 8px 0 0 !important;
}
.sch-empty {
  font-size: var(--fs-body);
  color: var(--med);
  text-align: center;
  padding: 40px 0;
}
/* breakpoints mirror the News & Messen grid exactly: 3 → 2 → 1 */
@media (max-width: 1024px) {
  .sch-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 767px) {
  .sch-grid {
    grid-template-columns: 1fr;
  }
}

/* ============================================================
   GEROTEC - Featured vehicle block (Fahrzeuge mega menu)
   ------------------------------------------------------------
   Markup: fahrzeuge-menu-promo.html (an Elementor HTML widget for
   now, later the [gerotec_featured_fahrzeug] shortcode — same classes,
   so this block does not change when the CPT lands).

   STATUS COLOURS are deliberately brand-only: yellow + greys, no
   green/amber/red. A red "Verkauft" chip would be the first off-brand
   colour on the site, and status here is informational, not an alert.
   Confirm with Anthony before introducing a colour system for these.
   ============================================================ */
/* padding-left stays so the block still lines up with the menu columns —
   only the divider rule is gone */
.gtc-vp {
  padding-left: 40px;
}
.gtc-vp-eyebrow {
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-accent);
  text-transform: uppercase;
  color: var(--e-global-color-text, var(--dark));
  margin: 0 0 12px !important;
}

.gtc-vp-card {
  display: flex;
  gap: 22px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  padding: 18px;
  text-decoration: none;
  transition:
    border-color 0.15s,
    background 0.15s;
}
.gtc-vp-card:hover {
  background: #fff;
  border-color: var(--light-gray);
}

.gtc-vp-img {
  position: relative;
  width: 190px;
  height: 130px;
  flex: 0 0 auto;
  border-radius: 10px;
  overflow: hidden;
  background: var(--vlight);
  display: block;
}
.gtc-vp-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.gtc-vp-badge {
  position: absolute;
  left: 10px;
  top: 10px;
  font-family: var(--font);
  font-size: 10px;
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  padding: 4px 9px;
  border-radius: var(--r-badge);
  line-height: 1.4;
}
.gtc-vp-badge.is-lager {
  background: var(--yellow);
  color: var(--darker);
}
.gtc-vp-badge.is-reserviert {
  background: var(--vlight);
  color: var(--med);
  border: 1px solid var(--light-gray);
}
.gtc-vp-badge.is-produktion {
  background: #fff;
  color: var(--dark);
  border: 1px solid var(--dark);
}
.gtc-vp-badge.is-gebraucht {
  background: var(--yellow-soft);
  color: var(--darker);
}
.gtc-vp-badge.is-verkauft {
  background: var(--dark);
  color: #fff;
}

.gtc-vp-body {
  display: block;
  padding: 2px 0;
}
.gtc-vp-title {
  display: block;
  font-family: var(--font);
  font-size: var(--fs-body-lg);
  font-weight: var(--fw-semibold);
  color: var(--darker);
  line-height: 1.3;
  margin: 0 0 6px;
}
.gtc-vp-spec {
  display: block;
  font-size: var(--fs-sm);
  color: var(--med);
  line-height: 1.5;
  margin: 0 0 14px;
}
.gtc-vp-link {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--darker);
}
/* the arrow carries the affordance instead of an underline */
.gtc-vp-card:hover .gtc-vp-link svg {
  transform: translateX(3px);
}
.gtc-vp-link svg {
  transition: transform 0.15s;
}
.gtc-vp-link svg {
  width: 12px;
  height: 12px;
  stroke: currentColor;
  fill: none;
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* The mega panel collapses to an accordion on mobile, where a promo card is
   just something to scroll past on the way to the links. */
@media (max-width: 1024px) {
  .gtc-vp {
    display: none;
  }
}

/* ============================================================
   GEROTEC - News article intro / abstract
   ------------------------------------------------------------
   Styles the FIRST paragraph of the post content as the intro,
   so editors don't have to mark it up — it applies to every
   existing article automatically.

   SETUP: add the CSS class "gtc-article" to the Elementor
   container wrapping the Post Content widget. Scoped that way
   so it can't leak into product descriptions or other pages
   using the same widget.

   The separation comes from bigger type + a closing hairline.
   No coloured bar, no italic — both fight the brand.

   NOTE: :first-of-type targets the first <p>. If an article
   opens with an image or list, the first paragraph after it
   gets styled, which is still correct.

   The selector list covers both the Post Content widget and a
   Text Editor widget (ACF dynamic tag), each with and without
   .elementor-widget-container — that div is stripped when
   Elementor's "optimized DOM output" experiment is enabled.
   ============================================================ */
.gtc-article
  .elementor-widget-theme-post-content
  .elementor-widget-container
  > p:first-of-type,
.gtc-article .elementor-widget-theme-post-content > p:first-of-type,
.gtc-article
  .elementor-widget-text-editor
  .elementor-widget-container
  > p:first-of-type,
.gtc-article .elementor-widget-text-editor > p:first-of-type {
  font-family: var(--font);
  font-size: var(--fs-h5); /* 20 / 18 / 18 */
  font-weight: var(--fw-regular);
  line-height: 1.6;
  color: var(--dark);
  margin: 0 0 28px;
  padding-bottom: 24px;
  border-bottom: 1px solid var(--line);
}

/* ============================================================
   GEROTEC - Blog sidebar modules
   (stack under the sticky contact box: Themen pills, promo)
   ============================================================ */
.gtc-side {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r-side);
  padding: 22px;
  margin-top: 20px;
}
.gtc-side h3 {
  font-family: var(--font);
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-accent);
  text-transform: uppercase;
  color: var(--dark);
  margin: 0 0 14px;
}
/* Themen pills */
.gtc-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.gtc-tags a {
  font-family: var(--font);
  font-size: var(--fs-body);
  font-weight: var(--fw-regular);
  color: var(--dark);
  background: var(--vlight);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 7px 14px;
  text-decoration: none;
  transition: 0.15s;
}
.gtc-tags a:hover {
  background: var(--yellow);
  border-color: var(--yellow);
  color: var(--dark);
}
/* Kataloge / Downloads promo (optional dark card) */
.gtc-side--promo {
  background: var(--dark);
  border: 0;
}
.gtc-side--promo h3 {
  color: var(--yellow);
}
.gtc-side--promo p {
  font-family: var(--font);
  font-size: var(--fs-sm);
  line-height: 1.6;
  color: #c8c8c8;
  margin: 0 0 18px;
}
.gtc-side--promo .gtc-promo-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--yellow);
  color: var(--dark);
  font-family: var(--font);
  font-size: var(--fs-accent);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-accent);
  text-transform: uppercase;
  padding: 12px 18px;
  border-radius: var(--r-btn);
  text-decoration: none;
}
.gtc-side--promo .gtc-promo-btn:hover {
  background: var(--yellow-med);
}
/* ============================================================
   GEROTEC - Light page-head (product / category / cart / blog)
   Reusable header band. Drop the HTML in a full-width section.
   ============================================================ */
.gtc-pagehead {
  background: var(--vlight);
  border-bottom: 1px solid var(--line);
}
.gtc-pagehead-inner {
  max-width: 1400px;
  margin: 0 auto;
  padding: 24px 40px 34px;
}
.ph-crumb {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  font-family: var(--font);
  font-size: var(--fs-xs);
  color: var(--gray);
  margin-bottom: 22px;
}
.ph-crumb a {
  color: var(--gray);
}
.ph-crumb a:hover {
  color: var(--dark);
}
.ph-crumb .sep {
  color: var(--light-gray);
}
.ph-crumb .cur {
  color: var(--dark);
  font-weight: var(--fw-medium);
}

/* Rank Math breadcrumb -> match .ph-crumb */
.rank-math-breadcrumb p,
.rank-math-breadcrumb nav {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  font-family: var(--font);
  font-size: var(--fs-xs);
  color: var(--gray);
  margin: 0;
  line-height: 1.4;
}
.rank-math-breadcrumb a {
  color: var(--gray);
  text-decoration: none;
  transition: color 0.15s;
}
.rank-math-breadcrumb a:hover {
  color: var(--dark);
}
.rank-math-breadcrumb .separator {
  color: var(--light-gray);
  margin: 0;
}
.rank-math-breadcrumb .last {
  color: var(--med);
  font-family: var(--font);
  font-weight: var(--fw-bold);
  max-width: 420px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
@media (max-width: 768px) {
  .rank-math-breadcrumb .last {
    max-width: 200px;
  }
}
.ph-row {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 32px;
}
.ph-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font);
  font-size: var(--fs-accent);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-accent);
  text-transform: uppercase;
  color: var(--med);
  margin-bottom: 12px;
}
.ph-eyebrow::before {
  content: "";
  width: 26px;
  height: 3px;
  background: var(--yellow);
  border-radius: 2px;
}
.gtc-pagehead h1 {
  font-family: var(--font);
  font-size: var(--fs-h2);
  font-weight: var(--fw-bold);
  line-height: 1.08;
  letter-spacing: -0.01em;
  color: var(--dark);
  margin: 0;
}
.ph-lead {
  max-width: 640px;
  font-family: var(--font);
  font-size: var(--fs-body);
  line-height: 1.6;
  color: var(--med);
  margin-top: 14px;
}
.ph-meta {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 9px 16px;
  font-family: var(--font);
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  color: var(--dark);
  white-space: nowrap;
}
@media (max-width: 980px) {
  .gtc-pagehead-inner {
    padding-left: 24px;
    padding-right: 24px;
  }
  .ph-row {
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
  }
}
/* ============================================================
   GEROTEC - Product highlight chips (dynamic key benefits)
   Rendered by [gerotec_highlights]. Icons come from the shortcode.
   ============================================================ */
.p-specs {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  margin: 26px 0;
}
.p-spec {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 18px 16px;
  border-left: 1px solid var(--line);
}
.p-spec:first-child {
  border-left: 0;
}
.p-spec svg {
  width: 24px;
  height: 24px;
  stroke: var(--dark);
  fill: none;
  stroke-width: 1.7;
  flex: 0 0 auto;
}
.p-spec span {
  font-family: var(--font);
  font-size: var(--fs-xs);
  line-height: 1.3;
  color: var(--dark);
  font-weight: var(--fw-medium);
}
@media (max-width: 560px) {
  .p-specs {
    grid-template-columns: 1fr 1fr;
  }
  .p-spec:nth-child(3) {
    border-left: 0;
  }
}
/* ============================================================
   GEROTEC - Product Merkmale cards (Vorteile / Ausstattung)
   Rendered by [gerotec_merkmale].
   ============================================================ */
.feat-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}
.feat-card {
  background: #fff;
  border: 0;
  border-radius: var(--r-card);
  padding: 36px;
  box-shadow: none;
}
.feat-head {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 14px;
  margin-bottom: 22px;
}
.feat-chip {
  width: 48px;
  height: 48px;
  border-radius: 14px;
  background: var(--yellow);
  display: grid;
  place-items: center;
  flex: 0 0 auto;
}
.feat-chip svg {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: var(--dark);
  stroke-width: 1.8;
}
.feat-head h3 {
  font-family: var(--font-bold) !important;
  font-size: var(--fs-h4);
  font-weight: normal !important;
  color: var(--dark);
}
.feat-head .ac {
  display: block;
  width: 40px;
  height: 3px;
  background: var(--yellow);
  border-radius: 2px;
  margin-top: 8px;
}
.feat-list {
  list-style: none;
  margin: 0;
  padding: 0 0 0 8px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.feat-list li {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  font-family: var(--font);
  font-size: var(--fs-body);
  font-weight: var(--fw-regular);
  line-height: 1.5;
  color: var(--dark);
}
.feat-list li svg {
  width: 20px;
  height: 20px;
  flex: 0 0 auto;
  margin-top: 1px;
  fill: none;
  stroke: var(--dark);
}
@media (max-width: 980px) {
  .feat-grid {
    grid-template-columns: 1fr;
  }
}

/* ============================================================
   GEROTEC - Produkt detail template
   (breadcrumb, kategorie/hersteller, gallery, variants table,
    support docs). Merkmale reuses .feat-* above.
   ============================================================ */

/* --- Breadcrumb --- */
.gerotec-breadcrumb {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  font-family: var(--font);
  font-size: var(--fs-xs);
  color: var(--med);
  padding: 16px 0;
}
.gerotec-breadcrumb a {
  color: var(--med);
  text-decoration: none;
  transition: color 0.15s;
}
.gerotec-breadcrumb a:hover {
  color: var(--dark);
}
.gerotec-breadcrumb .sep {
  color: var(--light-gray);
}
.gerotec-breadcrumb .current {
  color: var(--dark);
  font-weight: var(--fw-medium);
}
.gerotec-breadcrumb .bc-home {
  width: 16px;
  height: 16px;
  stroke: var(--med);
  fill: none;
  vertical-align: -3px;
}

/* --- Kategorie / Hersteller (accent micro-labels) --- */
.gerotec-kategorie,
.gerotec-hersteller {
  display: inline-block;
  font-family: var(--font);
  font-size: var(--fs-accent);
  font-weight: var(--fw-semibold);
  text-transform: uppercase;
  letter-spacing: var(--ls-accent);
  color: var(--dark);
  text-decoration: none;
  transition: color 0.15s;
}
.gerotec-kategorie:hover,
.gerotec-hersteller:hover {
  color: var(--dark);
  text-decoration: underline;
  text-decoration-color: var(--yellow);
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}

/* --- Hero dimensions callout --- */
.dim-callout {
  background: var(--vlight);
  border-left: 3px solid var(--yellow);
  border-radius: var(--r-btn);
  padding: 14px 18px;
  margin: 16px 0 24px;
  font-family: var(--font);
  font-size: var(--fs-sm);
  color: var(--dark);
}
.dim-callout strong {
  color: var(--dark);
  display: block;
  margin-bottom: 4px;
}

/* --- Gallery --- */
.gerotec-gallery .main-img {
  background: var(--vlight);
  border-radius: var(--r-img);
  overflow: hidden;
  aspect-ratio: 4/3;
}
.gerotec-gallery .main-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  animation: ggFade 0.4s ease;
}
@keyframes ggFade {
  from {
    opacity: 0.35;
  }
  to {
    opacity: 1;
  }
}
.gerotec-gallery .thumbs {
  display: flex;
  gap: 10px;
  margin-top: 12px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.gerotec-gallery .thumbs::-webkit-scrollbar {
  display: none;
}
/* ~5.5 visible: 5 full thumbs + a half "peek" of the next, so it's clear the
   strip scrolls. Extras scroll and snap one per move. */
.gerotec-gallery .thumbs .t {
  position: relative;
  flex: 0 0 calc((100% - 50px) / 5.5);
  scroll-snap-align: start;
  background: var(--vlight);
  border-radius: var(--r-btn);
  aspect-ratio: 1/1;
  overflow: hidden;
  cursor: pointer;
  padding: 0;
  border: 2px solid transparent;
  transition: border-color 0.15s;
}
.gerotec-gallery .thumbs .t:hover,
.gerotec-gallery .thumbs .t.is-active {
  border-color: var(--yellow);
}
.gerotec-gallery .thumbs .t img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
/* video: stage player + thumbnail play badge */
.gerotec-gallery .main-img {
  position: relative;
}
.gerotec-gallery .main-img .gg-video {
  width: 100%;
  height: 100%;
  background: #000;
}
.gerotec-gallery .main-img .gg-video iframe,
.gerotec-gallery .main-img .gg-video video {
  width: 100%;
  height: 100%;
  display: block;
  border: 0;
}
.gerotec-gallery .thumbs .t-video::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.28);
}
.gerotec-gallery .thumbs .t-video .gg-play {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: grid;
  place-items: center;
}
.gerotec-gallery .thumbs .t-video .gg-play svg {
  width: 26px;
  height: 26px;
  color: #fff;
  filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.5));
}

/* --- Beratung popup form (WPForms), on-brand ---
   Labels intentionally NOT restyled here, so they inherit the same font/size
   as every other WPForms form on the site. */
.gtc-beratung .wpforms-field {
  padding: 8px 0;
}
/* labels: identical to the other forms (.gtc-callback) */
.gtc-beratung .wpforms-field-label {
  font-family: var(--font) !important;
  font-size: var(--fs-accent) !important;
  font-weight: var(--fw-bold) !important;
  letter-spacing: var(--ls-label) !important;
  text-transform: uppercase !important;
  color: var(--dark) !important;
  margin-bottom: 6px !important;
}
.gtc-beratung input[type="text"],
.gtc-beratung input[type="email"],
.gtc-beratung input[type="tel"],
.gtc-beratung textarea {
  width: 100%;
  box-sizing: border-box;
  border: 1px solid var(--light-gray);
  border-radius: var(--r-btn);
  background: #fff;
  padding: 12px 14px;
  font-family: var(--font);
  font-size: var(--fs-body);
  color: var(--dark);
}
/* override WPForms' capped field widths (small/medium/large) so all fields fill the popup */
.gtc-beratung .wpforms-field-small,
.gtc-beratung .wpforms-field-medium,
.gtc-beratung .wpforms-field-large,
.gtc-beratung input[type="text"],
.gtc-beratung input[type="email"],
.gtc-beratung input[type="tel"],
.gtc-beratung textarea,
.gtc-beratung select {
  max-width: 100% !important;
  width: 100% !important;
}
.gtc-beratung input:focus,
.gtc-beratung textarea:focus {
  outline: none;
  border-color: var(--yellow);
  box-shadow: 0 0 0 3px var(--yellow-soft);
}
.gtc-beratung textarea {
  min-height: 120px;
  resize: vertical;
}
.gtc-beratung .wpforms-required-label {
  color: var(--req);
}
.gtc-beratung button[type="submit"],
.gtc-beratung .wpforms-submit {
  width: 100%;
  background: var(--yellow) !important;
  color: var(--dark) !important;
  border: none !important;
  border-radius: var(--r-btn) !important;
  padding: 15px 28px !important;
  cursor: pointer;
  font-family: var(--font) !important;
  font-size: var(--fs-accent) !important;
  font-weight: var(--fw-semibold) !important;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  transition: filter 0.15s;
}
.gtc-beratung button[type="submit"]:hover,
.gtc-beratung .wpforms-submit:hover {
  filter: brightness(0.95);
}
/* confirmation message: on-brand (no green) + compact */
.gtc-beratung .wpforms-confirmation-container-full,
div.wpforms-confirmation-container-full.gtc-beratung {
  background: var(--yellow-soft) !important;
  border: 1.5px solid var(--yellow) !important;
  color: var(--dark) !important;
  border-radius: var(--r-btn) !important;
  padding: 16px 18px !important;
  margin: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
}
.gtc-beratung .wpforms-confirmation-container-full p {
  margin: 0 !important;
}
/* pre-filled, non-editable Produkt field */
.gtc-produkt input,
.gtc-produkt input:focus {
  background: var(--vlight) !important;
  color: var(--dark) !important;
  cursor: default;
  box-shadow: none !important;
}

/* --- Shop toolbar (count | sort | view toggle) ---
   Elementor container class: gtc-toolbar  →  [facetwp counts] + [facetwp facet="sortierung"] + view toggle */
.gtc-toolbar {
  display: flex !important;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r-btn);
  padding: 12px 16px;
}
.gtc-toolbar .facetwp-counts {
  font-family: var(--font);
  font-size: var(--fs-body);
  font-weight: var(--fw-bold);
  color: var(--dark);
}
.gtc-toolbar .facetwp-sort select,
.gtc-toolbar select {
  font-family: var(--font);
  font-size: var(--fs-body);
  color: var(--dark);
  border: 1px solid var(--light-gray);
  border-radius: var(--r-btn);
  padding: 9px 30px 9px 12px;
  background: #fff;
  cursor: pointer;
}
.gtc-toolbar .facetwp-sort {
  display: flex;
  align-items: center;
  gap: 10px;
}

/* view toggle */
.gtc-view {
  display: inline-flex;
  border: 1px solid var(--line);
  border-radius: var(--r-btn);
  overflow: hidden;
}
.gtc-view button {
  width: 42px;
  height: 40px;
  display: grid;
  place-items: center;
  background: #fff;
  border: 0;
  cursor: pointer;
  transition: background 0.15s;
}
.gtc-view button + button {
  border-left: 1px solid var(--line);
}
.gtc-view button svg {
  width: 18px;
  height: 18px;
  stroke: var(--gray);
  fill: none;
  stroke-width: 2;
}
.gtc-view button.is-active {
  background: var(--yellow-soft);
}
.gtc-view button.is-active svg {
  stroke: var(--dark);
}

/* --- Downloads card grid  →  [gerotec_downloads] ---
   SHADOW RULE: one card style site-wide, tuned to the background it sits on.
     grey section  ->  box-shadow: 0 2px 12px rgba(0,0,0,.05);
     white section ->  two layers (tight edge + wide lift), as below. */
.gtc-dl-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 32px;
}
.gtc-dl-card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  padding: 16px;
  box-shadow:
    0 1px 3px rgba(0, 0, 0, 0.06),
    0 8px 24px rgba(0, 0, 0, 0.06);
  display: flex;
  flex-direction: column;
}

/* full-bleed to the card edges: cancel the card's 16px padding, round the top
   corners to match the card (bottom corners meet the card body, so they stay flat).
   Radius is 1px under --r-card so it nests inside the card border — matching it
   exactly leaves a hairline of white peeking at the top corners. */
.gtc-dl-cover {
  aspect-ratio: 1/1;
  margin: -16px -16px 0;
  overflow: hidden;
  background: var(--vlight);
  border-radius: 13px 13px 0 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.gtc-dl-cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
/* manuals show a product photo — fit it inside instead of cropping */
.gtc-dl-cover.is-contain {
  background: #fff;
}
.gtc-dl-cover.is-contain img {
  object-fit: contain;
  padding: 16px;
}
/* fallback when no featured image is set */
.gtc-dl-cover.is-tile {
  background: var(--darker);
  flex-direction: column;
  align-items: flex-start;
  justify-content: space-between;
  padding: 16px;
}
.gtc-dl-cover.is-tile .r {
  width: 34px;
  height: 3px;
  background: var(--yellow);
  border-radius: 1px;
}
.gtc-dl-cover.is-tile .nm {
  color: #fff;
  font-size: var(--fs-h5);
  font-weight: var(--fw-semibold);
  line-height: 1.15;
}

/* title: Avenir Bold at weight normal (the "H2 Produkt name" global) — 20/18/18 */
.gtc-dl-title {
  font-family: var(--font-bold);
  font-size: var(--fs-h5);
  font-weight: normal;
  color: var(--darker);
  margin: 16px 0 5px !important;
  line-height: 1.3;
}
.gtc-dl-meta {
  font-size: var(--fs-sm);
  color: var(--gray);
  margin: 0 0 16px !important;
}
/* button: accent type (same as the Beratung submit) · icon right, inherits text colour ·
   hover fills brand yellow, border included */
/* colour is bound to Elementor's Global Color "Text" so it tracks any change there.
   var(--dark) is only the fallback if that global is ever missing. */
.gtc-dl-btn,
.gtc-dl-btn:link,
.gtc-dl-btn:visited {
  margin-top: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  background: #fff;
  border: 1px solid var(--e-global-color-text, var(--dark));
  border-radius: var(--r-btn);
  padding: 14px 16px;
  align-self: center;
  width: calc(100% - 12px);
  font-family: var(--font);
  font-size: var(--fs-accent);
  font-weight: var(--fw-semibold);
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--e-global-color-text, var(--dark)) !important;
  text-decoration: none;
  cursor: pointer;
  transition:
    background 0.15s,
    border-color 0.15s;
}
.gtc-dl-btn:hover {
  background: var(--yellow);
  border-color: var(--yellow);
  color: var(--e-global-color-text, var(--dark)) !important;
}
/* icon inherits the text colour — never set it separately */
.gtc-dl-btn svg {
  width: 16px;
  height: 16px;
  flex: 0 0 auto;
  stroke: currentColor;
  fill: none;
  stroke-width: 2.2;
}
.gtc-dl-btn.is-off {
  opacity: 0.45;
  cursor: default;
}
.gtc-dl-btn.is-off:hover {
  background: #fff;
  border-color: var(--e-global-color-text, var(--dark));
}

.gtc-dl-empty {
  padding: 60px 0;
  text-align: center;
  color: var(--med);
  font-size: var(--fs-body);
}
.gtc-dl-empty b {
  display: block;
  color: var(--dark);
  font-size: var(--fs-h6);
  margin-bottom: 6px;
}

@media (max-width: 1080px) {
  .gtc-dl-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}
@media (max-width: 760px) {
  .gtc-dl-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 460px) {
  .gtc-dl-grid {
    grid-template-columns: 1fr;
  }
}

/* --- Search facet (Downloads hero) ---
   Elementor container class: gtc-search  →  [facetwp facet="dokument_suche"] */
/* Elementor flex containers shrink-wrap their content. The facet has no intrinsic
   width, so the whole chain collapses and the input renders at ~0. Force it. */
/* NO wrapper container needed. FacetWP tags every search facet with
   .facetwp-type-search, so we style that directly — drop the shortcode widget
   anywhere and it works. (A "gtc-search" container is optional; if the widget
   sits in a flex row it can shrink-wrap to nothing, which is why we set the
   width on the facet itself rather than on a wrapper.) */
.facetwp-type-search {
  width: 100%;
  max-width: 420px;
  min-width: 240px;
  margin: 0 !important;
}
.facetwp-type-search .facetwp-input-wrap {
  position: relative;
  display: block;
  width: 100%;
}
.facetwp-type-search .facetwp-search {
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
  font-family: var(--font);
  font-size: var(--fs-body);
  color: var(--dark);
  background: #fff;
  border: 1px solid var(--light-gray);
  border-radius: var(--r-btn);
  padding: 15px 16px 15px 46px;
}
.facetwp-type-search .facetwp-search::placeholder {
  color: var(--gray);
}
.facetwp-type-search .facetwp-search:focus {
  outline: none;
  border-color: var(--yellow);
  box-shadow: 0 0 0 3px var(--yellow-soft);
}
/* magnifier: replace FacetWP's default icon with our own */
.facetwp-type-search .facetwp-icon {
  position: absolute;
  left: 16px;
  top: 50%;
  transform: translateY(-50%);
  width: 18px;
  height: 18px;
}
.facetwp-type-search .facetwp-icon:before {
  content: "";
  display: block;
  width: 18px;
  height: 18px;
  opacity: 1;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23909090' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M21 21l-4.3-4.3'/%3E%3C/svg%3E")
    center/18px 18px no-repeat;
}
/* Give the wrapper a floor so the facet can't shrink-wrap to nothing — but do
   NOT set width:100%, that makes the widget greedy in a flex row and the input
   ends up pinned left inside a full-width wrapper. */
.elementor-widget-shortcode:has(.facetwp-type-search),
.elementor-widget-shortcode:has(.facetwp-type-search) .elementor-shortcode {
  min-width: 240px;
}
/* utility: add CSS class "gtc-right" to the search widget to push it to the
   right end of the row it shares with the pills */
.gtc-right {
  margin-left: auto !important;
}

/* tablet: a little narrower, still beside the pills */
@media (max-width: 1024px) {
  .facetwp-type-search {
    max-width: 320px;
    min-width: 200px;
  }
  .elementor-widget-shortcode:has(.facetwp-type-search),
  .elementor-widget-shortcode:has(.facetwp-type-search) .elementor-shortcode {
    min-width: 200px;
  }
}
/* mobile: full width on its own line — drop the floor so it can't overflow a 320px screen */
@media (max-width: 767px) {
  .facetwp-type-search {
    max-width: 100%;
    min-width: 0;
  }
  .elementor-widget-shortcode:has(.facetwp-type-search),
  .elementor-widget-shortcode:has(.facetwp-type-search) .elementor-shortcode {
    min-width: 0;
  }
  /* 16px is deliberate: iOS Safari zooms the page when focusing an input under 16px */
  .facetwp-type-search .facetwp-search {
    font-size: 16px;
    padding: 13px 14px 13px 42px;
  }
  .facetwp-type-search .facetwp-icon {
    left: 14px;
    width: 16px;
    height: 16px;
  }
  .facetwp-type-search .facetwp-icon:before {
    width: 16px;
    height: 16px;
    background-size: 16px 16px;
  }
}

/* --- Düsen-Typ pills (a FacetWP checkbox facet rendered as pills) ---
   Elementor container class: gtc-pills  →  [facetwp facet="duesen_typ"] */
/* Styled to match the Themen pills (.gtc-tags a): vlight fill, hairline border,
   --fs-body regular, pill radius, yellow on hover.
   The container holds TWO widgets — the "Alle" HTML widget and the facet shortcode.
   display:contents flattens Elementor's wrappers so every pill sits in ONE flex row. */
.gtc-pills {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
  align-items: center !important;
  justify-content: flex-start !important;
}
.gtc-pills .elementor-widget,
.gtc-pills .elementor-widget-container,
.gtc-pills .elementor-shortcode,
.gtc-pills .facetwp-facet {
  display: contents !important;
}

.gtc-pills .facetwp-checkbox,
.gtc-pills .facetwp-radio,
.gtc-pills .gtc-pill-all {
  display: inline-flex !important;
  align-items: center;
  gap: 6px;
  font-family: var(--font);
  font-size: var(--fs-body);
  font-weight: var(--fw-regular);
  color: var(--dark) !important;
  background: var(--vlight) !important;
  border: 1px solid var(--line) !important;
  border-radius: 999px;
  padding: 7px 14px !important;
  margin: 0 !important;
  cursor: pointer;
  white-space: nowrap;
  /* the Alle pill is a <button>, the facet pills are <div>s — they inherit
     different case/tracking/line-height from the theme. Pin all three so the
     pills come out identical. */
  text-transform: none !important;
  letter-spacing: normal !important;
  line-height: 1.5 !important;
  box-sizing: border-box;
  vertical-align: middle;
  transition:
    background 0.15s,
    border-color 0.15s,
    color 0.15s;
}
.gtc-pills .facetwp-checkbox:before,
.gtc-pills .facetwp-radio:before {
  content: none !important;
} /* no checkbox/radio dot in pill mode */
.gtc-pills .facetwp-checkbox:hover,
.gtc-pills .facetwp-radio:hover,
.gtc-pills .gtc-pill-all:hover {
  background: var(--yellow) !important;
  border-color: var(--yellow) !important;
}
/* selected = the same yellow as the hover */
.gtc-pills .facetwp-checkbox.checked,
.gtc-pills .facetwp-radio.checked,
.gtc-pills .gtc-pill-all.is-active {
  background: var(--yellow) !important;
  border-color: var(--yellow) !important;
  color: var(--dark) !important;
}
.gtc-pills .facetwp-counter {
  color: var(--gray);
  font-size: var(--fs-xs);
  margin-left: 0;
}
/* counter must stay dark on a yellow pill — white would be unreadable */
.gtc-pills .facetwp-checkbox.checked .facetwp-counter,
.gtc-pills .facetwp-radio.checked .facetwp-counter {
  color: var(--med);
}
.gtc-pills .facetwp-checkbox.disabled,
.gtc-pills .facetwp-radio.disabled {
  opacity: 0.4;
  cursor: default;
}
.gtc-pills .facetwp-checkbox.disabled:hover,
.gtc-pills .facetwp-radio.disabled:hover {
  background: var(--vlight) !important;
  border-color: var(--line) !important;
}

/* --- FacetWP filters (category sidebar) ---
   Wrap the sidebar in an Elementor container with CSS class: gtc-filters
   Give each group heading the class: gtc-filter-title */
.gtc-filters .gtc-filter-title {
  font-family: var(--font);
  font-size: var(--fs-accent);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--dark);
  margin: 26px 0 14px;
}
.gtc-filters .gtc-filter-title:first-child {
  margin-top: 0;
}
.gtc-filters .facetwp-facet {
  margin: 0 !important;
  padding: 0 0 24px;
  border-bottom: 1px solid var(--line);
}
.gtc-filters .facetwp-facet:last-of-type {
  border-bottom: 0;
  padding-bottom: 0;
}
.gtc-filters .facetwp-facet:empty {
  display: none;
}
.gtc-filters .facetwp-checkbox {
  display: flex;
  align-items: center;
  gap: 12px;
  background: none !important;
  padding: 0 !important;
  margin: 0 0 13px !important;
  font-family: var(--font);
  font-size: var(--fs-body);
  color: var(--dark);
  line-height: 1.4;
  cursor: pointer;
}
.gtc-filters .facetwp-checkbox:last-child {
  margin-bottom: 0 !important;
}
.gtc-filters .facetwp-checkbox:before {
  content: "";
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  box-sizing: border-box;
  border: 1.5px solid var(--light-gray);
  border-radius: var(--r-badge);
  background: #fff;
  transition:
    border-color 0.15s,
    background 0.15s;
}
.gtc-filters .facetwp-checkbox:hover:before {
  border-color: var(--dark);
}
.gtc-filters .facetwp-checkbox.checked:before {
  border-color: var(--dark);
  background: var(--dark)
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E")
    center/12px 12px no-repeat;
}
.gtc-filters .facetwp-counter {
  margin-left: auto;
  color: var(--gray);
  font-size: var(--fs-sm);
}
.gtc-filters .facetwp-checkbox.disabled {
  opacity: 0.45;
  cursor: default;
}
.gtc-filters .facetwp-checkbox.disabled:hover:before {
  border-color: var(--light-gray);
}

/* --- Variants (modern cards) --- */
.gtc-variants {
  display: flex;
  flex-direction: column;
  gap: 18px;
  margin: 26px 0;
}
.gtc-variants svg {
  fill: none !important;
} /* stop theme from filling outline icons */
.vcard {
  background: #fff;
  border: 1px solid var(--light-gray);
  border-radius: var(--r-card);
  padding: 36px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}
.vc-top {
  display: flex;
  align-items: center;
  gap: 22px;
  padding-bottom: 22px;
  border-bottom: 1px solid var(--line);
}
.vc-lead {
  display: flex;
  align-items: center;
  gap: 18px;
  min-width: 0;
  flex: 1;
}
.vc-img {
  width: 104px;
  height: 104px;
  flex: 0 0 auto;
  border: 1px solid var(--line);
  border-radius: var(--r-btn);
  background: var(--vlight);
  display: grid;
  place-items: center;
  overflow: hidden;
}
.vc-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.vc-img svg {
  width: 40px;
  height: 40px;
  stroke: var(--light-gray);
  fill: none;
}
.vc-id {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  min-width: 0;
}
.vc-sku {
  display: block;
  font-family: var(--font);
  font-size: var(--fs-sm);
  font-weight: var(--fw-regular);
  letter-spacing: normal;
  text-transform: none;
  color: var(--med);
  line-height: 1.3;
  margin-left: 1px;
}
.vc-name {
  font-family: var(--font-bold);
  font-size: var(--fs-h5);
  font-weight: normal;
  color: var(--dark);
  line-height: 1.15;
}
.vc-metrics {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.vc-metrics .metric {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--vlight);
  border-radius: var(--r-btn);
  padding: 12px 16px;
}
.vc-metrics .metric svg {
  width: 22px;
  height: 22px;
  stroke: var(--gray);
  fill: none;
  flex: 0 0 auto;
}
.vc-metrics .m-l {
  font-family: var(--font);
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--gray);
}
.vc-metrics .m-v {
  font-family: var(--font);
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  color: var(--dark);
}
.vc-cta {
  flex: 0 0 auto;
}
.vcard .btn-angebot {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  background: var(--yellow);
  border: 0;
  color: var(--dark);
  font-family: var(--font);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-sm);
  letter-spacing: var(--ls-accent);
  text-transform: uppercase;
  padding: 14px 22px;
  border-radius: var(--r-btn);
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.15s;
}
.vcard .btn-angebot:hover {
  background: var(--yellow-med);
}
.vcard .btn-angebot.added {
  background: var(--dark);
  color: var(--yellow);
}
.vcard .btn-angebot svg {
  width: 15px;
  height: 15px;
  stroke: currentColor;
  fill: none;
  flex: 0 0 auto;
}
.vc-specs {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 260px;
  gap: 0 48px;
  align-items: start;
  padding-top: 20px;
}
.vc-spec-grid {
  column-count: 2;
  column-gap: 48px;
}
.vc-spec-grid .spec {
  break-inside: avoid;
}
.vc-specs .spec {
  display: flex;
  gap: 9px;
  font-family: var(--font);
  font-size: var(--fs-body);
  line-height: 1.4;
  padding: 3px 0;
}
/* chevron drawn as an inline SVG, NOT a content glyph. content:"\203A" and the
   literal "›" both lose their escaping when pasted into Site Settings / WPCode
   and render as raw text ("203A"). An SVG data-URI has no backslash to strip. */
.vc-specs .spec::before {
  content: "";
  flex: 0 0 auto;
  width: 0.5em;
  height: 1.4em;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23FFE700' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 4l4 4-4 4'/%3E%3C/svg%3E")
    no-repeat left center/contain;
}
.vc-specs .s-l {
  color: var(--dark);
  font-weight: var(--fw-semibold);
}
.vc-specs .s-v {
  color: var(--med);
  font-weight: var(--fw-regular);
}

/* --- Support docs / Datenblatt --- */
.gerotec-support-docs {
  list-style: none;
  padding: 0;
  margin: 0;
}
.gerotec-support-docs .support-doc-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  padding: 34px 36px;
  margin-bottom: 14px;
  background: var(--vlight);
  border: 0;
  border-radius: var(--r-card);
  font-family: var(--font);
  font-size: var(--fs-body);
  color: var(--dark);
}
.gerotec-support-docs .doc-label {
  display: flex;
  align-items: center;
  gap: 18px;
  font-family: var(--font-bold);
  font-size: var(--fs-h5);
  font-weight: normal;
  color: var(--dark);
}
.gerotec-support-docs .doc-ic {
  width: 56px;
  height: 56px;
  border-radius: 14px;
  background: var(--yellow);
  display: grid;
  place-items: center;
  flex: 0 0 auto;
}
.gerotec-support-docs .doc-ic svg {
  width: 26px;
  height: 26px;
  stroke: var(--dark);
  fill: none;
}
.gerotec-support-docs .btn-download {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 14px 22px;
  background: var(--yellow);
  border: 0;
  color: var(--dark);
  font-family: var(--font);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-accent);
  text-transform: uppercase;
  letter-spacing: var(--ls-accent);
  border-radius: var(--r-btn);
  text-decoration: none;
  white-space: nowrap;
  transition: background 0.15s;
  flex: 0 0 auto;
}
.gerotec-support-docs .btn-download:hover {
  background: var(--yellow-med);
}
.gerotec-support-docs .btn-download svg {
  width: 15px;
  height: 15px;
  fill: none;
  flex: 0 0 auto;
}

/* --- Hero trust row (bottom-left of dark hero) --- */
.gtc-herotrust {
  display: flex;
  flex-wrap: wrap;
  gap: 22px 40px;
}
.gtc-herotrust .ht-item {
  display: flex;
  align-items: center;
  gap: 12px;
}
.gtc-herotrust .ht-ic {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: var(--yellow);
  display: grid;
  place-items: center;
  flex: 0 0 auto;
}
.gtc-herotrust .ht-ic svg {
  width: 24px;
  height: 24px;
  stroke: var(--dark);
  fill: none;
  stroke-width: 1.7;
}
.gtc-herotrust .ht-tx {
  display: flex;
  flex-direction: column;
  line-height: 1.25;
}
.gtc-herotrust .ht-title {
  font-family: var(--font);
  font-size: var(--fs-body);
  font-weight: var(--fw-semibold);
  color: #fff;
}
.gtc-herotrust .ht-sub {
  font-family: var(--font);
  font-size: var(--fs-sm);
  font-weight: var(--fw-regular);
  color: rgba(255, 255, 255, 0.62);
}
@media (max-width: 768px) {
  .gtc-herotrust {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px 20px;
  }
  .gtc-herotrust .ht-item {
    border-left: 0;
    padding-left: 0;
  } /* drop dividers on mobile */
  .gtc-herotrust .ht-ic {
    width: 40px;
    height: 40px;
  }
  .gtc-herotrust .ht-ic svg {
    width: 21px;
    height: 21px;
  }
  .gtc-herotrust .ht-title {
    font-size: var(--fs-sm);
  }
}
@media (max-width: 420px) {
  .gtc-herotrust {
    grid-template-columns: 1fr;
    gap: 14px;
  }
}

/* ============================================================
   GEROTEC - Service rail (desktop) + mobile action bar
   Markup: the .gtc-servicebar HTML widget (no inline <style>).
   ============================================================ */
.gtc-servicebar,
.gtc-servicebar * {
  box-sizing: border-box !important;
  font-family: var(--font) !important;
}
.gtc-servicebar .gtc-rail {
  position: fixed !important;
  top: 50% !important;
  right: 14px !important;
  transform: translateY(-50%) !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
  z-index: 90 !important;
  transition:
    opacity 0.18s ease,
    transform 0.18s ease,
    visibility 0.18s ease !important;
}
.gtc-servicebar .gtc-rail.gtc-rail-hidden {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
  transform: translateY(-50%) translateX(80px) !important;
}
.gtc-servicebar .gtc-rail a {
  position: relative !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 52px !important;
  height: 52px !important;
  background: var(--dark) !important;
  color: var(--yellow) !important;
  border-radius: var(--r-card) !important;
  text-decoration: none !important;
  cursor: pointer !important;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.18) !important;
  transition:
    background 0.15s ease,
    color 0.15s ease !important;
}
.gtc-servicebar .gtc-rail a:hover {
  background: var(--yellow) !important;
  color: var(--dark) !important;
}
.gtc-servicebar .gtc-rail a svg {
  width: 22px !important;
  height: 22px !important;
}
.gtc-servicebar .gtc-rail a .gtc-lbl {
  position: absolute !important;
  right: calc(100% + 10px) !important;
  top: 0 !important;
  height: 52px !important;
  display: flex !important;
  align-items: center !important;
  white-space: nowrap !important;
  padding: 0 18px !important;
  background: var(--yellow) !important;
  color: var(--dark) !important;
  border-radius: var(--r-btn) !important;
  font-size: var(--fs-xs) !important;
  font-weight: var(--fw-bold) !important;
  letter-spacing: 0.5px !important;
  text-transform: uppercase !important;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.18) !important;
  opacity: 0 !important;
  visibility: hidden !important;
  transform: translateX(8px) !important;
  transition:
    opacity 0.15s ease,
    transform 0.15s ease !important;
  pointer-events: none !important;
}
.gtc-servicebar .gtc-rail a:hover .gtc-lbl {
  opacity: 1 !important;
  visibility: visible !important;
  transform: translateX(0) !important;
}
.gtc-servicebar .gtc-bottom {
  display: none !important;
  position: fixed !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  z-index: 90 !important;
  background: var(--dark) !important;
  border-top: 3px solid var(--yellow) !important;
  border-radius: var(--r-card) var(--r-card) 0 0 !important;
  overflow: hidden !important;
  box-shadow: 0 -4px 18px rgba(0, 0, 0, 0.18) !important;
}
.gtc-servicebar .gtc-bottom-inner {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
}
.gtc-servicebar .gtc-bottom a {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 4px !important;
  padding: 11px 4px !important;
  color: #fff !important;
  text-decoration: none !important;
  font-size: 11px !important;
  font-weight: var(--fw-semibold) !important;
  letter-spacing: 0.3px !important;
  border-right: 1px solid rgba(255, 255, 255, 0.08) !important;
}
.gtc-servicebar .gtc-bottom a:last-child {
  border-right: 0 !important;
}
.gtc-servicebar .gtc-bottom a svg {
  width: 22px !important;
  height: 22px !important;
  stroke: var(--yellow) !important;
  fill: none !important;
}
.gtc-servicebar .gtc-bottom a.gtc-primary {
  background: var(--yellow) !important;
  color: var(--dark) !important;
}
.gtc-servicebar .gtc-bottom a.gtc-primary svg {
  stroke: var(--dark) !important;
}
@media (max-width: 767px) {
  .gtc-servicebar .gtc-rail {
    display: none !important;
  }
  .gtc-servicebar .gtc-bottom {
    display: block !important;
  }
  body {
    padding-bottom: 64px !important;
  }
}

/* ============================================================
   GEROTEC - Add-to-cart confirmation (toast + button state)
   ============================================================ */
.gtc-toast {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 10000;
  display: flex;
  align-items: center;
  gap: 14px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  padding: 16px 20px;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.16);
  max-width: 360px;
  font-family: var(--font);
  transform: translateY(150%);
  opacity: 0;
  transition:
    transform 0.32s cubic-bezier(0.2, 0.8, 0.2, 1),
    opacity 0.32s;
  pointer-events: none;
}
.gtc-toast.show {
  transform: translateY(0);
  opacity: 1;
  pointer-events: auto;
}
.gtc-toast-ic {
  width: 38px;
  height: 38px;
  border-radius: var(--r-btn);
  background: var(--yellow);
  display: grid;
  place-items: center;
  flex: 0 0 auto;
}
.gtc-toast-ic svg {
  width: 20px;
  height: 20px;
  stroke: var(--dark);
  fill: none;
  stroke-width: 2.4;
}
.gtc-toast-tx {
  font-size: var(--fs-sm);
  color: var(--dark);
  line-height: 1.45;
}
.gtc-toast-tx b {
  font-weight: var(--fw-semibold);
}
.gtc-toast-tx a {
  display: inline-block;
  margin-top: 3px;
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  color: var(--dark);
  border-bottom: 1.5px solid var(--yellow);
  text-decoration: none;
}
@media (max-width: 560px) {
  .gtc-toast {
    right: 12px;
    left: 12px;
    bottom: 84px;
    max-width: none;
  }
}
/* confirmed button state (on-brand: dark + yellow) */
[data-add-to-cart].added {
  background: var(--dark) !important;
  color: var(--yellow) !important;
}
[data-add-to-cart].added svg {
  stroke: currentColor !important;
  fill: none !important;
}

/* --- MOBILE <=820px: variant cards stack (image beside name) --- */
@media (max-width: 820px) {
  .vcard {
    display: flex;
    flex-direction: column;
    padding: 32px;
  }
  .vc-top {
    display: contents;
  } /* let lead + actions reorder in the card */
  .vc-lead {
    order: 1;
    width: 100%;
    flex-direction: row-reverse;
    justify-content: space-between;
    align-items: flex-start;
  }
  .vc-img {
    width: 92px;
    height: 92px;
  }
  .vc-specs {
    order: 2;
    grid-template-columns: 1fr;
    padding-top: 18px;
  }
  .vc-spec-grid {
    column-count: 1;
  }
  .vc-metrics {
    margin-top: 18px;
  }
  .vc-cta {
    order: 3;
    width: 100%;
    margin-top: 18px;
  }
  .vcard .btn-angebot {
    width: 100%;
    justify-content: center;
  }
  .gerotec-support-docs .support-doc-row {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
    padding: 32px;
  }
  .gerotec-support-docs .btn-download {
    width: 100%;
    justify-content: center;
  }
  .feat-card {
    padding: 32px 20px;
  }
}
@media (max-width: 480px) {
  .vc-name {
    font-size: var(--fs-h6);
  }
}

/* ============================================================
   Gerotec Stellen
   Job tiles   [gerotec_stellen]
   Job detail  [gerotec_stelle_detail] + [gerotec_bewerbung]
   Prefix ge-stellen--, mobile-first, flexbox only.
   Relies on the global tokens (--yellow, --darker, --r-card ...).
   ============================================================ */

/* ---------- Shared ---------- */
.ge-stellen--inner {
  width: 100%;
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 20px;
  box-sizing: border-box;
}

.ge-stellen--section {
  padding: 48px 0;
}

.ge-stellen--heading {
  position: relative;
  margin: 0 0 20px;
  padding-top: 18px;
  font-family: var(--font);
  font-size: var(--fs-h3);
  font-weight: var(--fw-bold);
  line-height: 1.2;
  color: var(--darker);
}

.ge-stellen--heading::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 40px;
  height: 3px;
  background: var(--yellow);
}

/* Outline icons: stop the theme from filling them */
.ge-stellen--ico {
  fill: none !important;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex: 0 0 auto;
}

/* Buttons */
.ge-stellen--btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 14px 22px;
  background: var(--yellow);
  border: 1.5px solid var(--yellow);
  border-radius: var(--r-btn);
  color: var(--darker) !important;
  font-family: var(--font-bold);
  font-size: var(--fs-body);
  font-weight: var(--fw-bold);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-decoration: none;
  transition:
    background 0.15s,
    border-color 0.15s;
}

.ge-stellen--btn:hover {
  background: var(--yellow-med) !important;
  border-color: var(--yellow-med) !important;
  color: var(--darker) !important;
}

.ge-stellen--btn .ge-stellen--ico {
  width: 16px;
  height: 16px;
  stroke-width: 2.2;
}

.ge-stellen--btn-ghost {
  background: transparent;
  border-color: var(--darker);
}

.ge-stellen--btn-ghost:hover {
  background: var(--yellow) !important;
  border-color: var(--yellow) !important;
}

.ge-stellen--btn:focus-visible,
.ge-stellen--tile-title a:focus-visible {
  outline: 3px solid var(--darker);
  outline-offset: 3px;
}

/* ---------- Tiles (overview page) ---------- */
.ge-stellen--tiles {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
}

.ge-stellen--tile {
  display: flex;
  flex-direction: column;
  flex: 0 0 100%;
  box-sizing: border-box;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  padding: 28px;
  transition: box-shadow 0.2s ease;
}

.ge-stellen--tile:hover {
  box-shadow:
    0 4px 12px rgba(0, 0, 0, 0.06),
    0 20px 44px rgba(0, 0, 0, 0.1);
}

.ge-stellen--tile-title {
  position: relative;
  margin: 0 0 12px;
  font-family: var(--font);
  font-size: var(--fs-h4);
  font-weight: var(--fw-bold);
  line-height: 1.25;
}

.ge-stellen--tile-title a {
  color: var(--darker) !important;
  text-decoration: none;
}

.ge-stellen--tile-text {
  margin: 0 0 24px;
  font-size: var(--fs-body);
  line-height: 1.65;
  color: var(--med);
}

.ge-stellen--tile-foot {
  margin-top: auto;
}

.ge-stellen--empty {
  padding: 40px 0;
  text-align: center;
  font-size: var(--fs-body);
  color: var(--med);
}

/* ---------- Hero ---------- */
.ge-stellen--hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: 50px 0;
  background: var(--darker);
  color: var(--white);
}

.ge-stellen--hero-img {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center right;
}

.ge-stellen--hero-overlay {
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(
    180deg,
    rgba(26, 26, 26, 0.82) 0%,
    rgba(26, 26, 26, 0.92) 100%
  );
}

/* Breadcrumb (same markup classes as Rank Math, so global styles still apply) */
.ge-stellen--breadcrumb {
  margin-bottom: 28px;
}

.ge-stellen--breadcrumb p,
.ge-stellen--breadcrumb .separator {
  color: rgba(255, 255, 255, 0.55);
  font-size: var(--fs-sm);
}

.ge-stellen--breadcrumb.rank-math-breadcrumb a {
  color: var(--yellow);
}

.ge-stellen--breadcrumb.rank-math-breadcrumb .last {
  max-width: none;
  white-space: normal;
  color: var(--white);
  font-weight: var(--fw-medium);
}

.ge-stellen--title {
  max-width: 820px;
  margin: 0 0 20px;
  font-family: var(--font);
  font-size: var(--fs-h1);
  font-weight: var(--fw-bold);
  line-height: 1.12;
  letter-spacing: -0.01em;
  color: var(--white);
}

.ge-stellen--lead {
  max-width: 640px;
  margin: 0;
  font-size: var(--fs-body-lg);
  line-height: 1.65;
  color: rgba(255, 255, 255, 0.88);
}

.ge-stellen--chips {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 30px 0 0;
  padding: 0;
  list-style: none;
}

.ge-stellen--chip {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: var(--r-btn);
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  color: var(--white);
}

.ge-stellen--chip .ge-stellen--ico {
  width: 20px;
  height: 20px;
  color: var(--yellow);
}

/* ---------- Über die Stelle ---------- */
.ge-stellen--about {
  display: flex;
  flex-direction: column;
  gap: 32px;
}

.ge-stellen--about-text {
  min-width: 0;
}

.ge-stellen--about-text p {
  margin: 0;
  max-width: 62ch;
  font-size: var(--fs-body);
  line-height: 1.75;
  color: var(--dark);
}

.ge-stellen--about-media {
  margin: 0;
  min-width: 0;
}

.ge-stellen--about-img {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  border-radius: var(--r-img) !important;
}

/* ---------- Aufgaben / Profil / Das bieten wir dir ---------- */
.ge-stellen--band {
  padding: 48px 0;
  background: var(--panel);
}

.ge-stellen--cards {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.ge-stellen--card {
  flex: 0 0 auto;
  min-width: 0;
  box-sizing: border-box;
  padding: 28px 24px;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  box-shadow:
    0 2px 8px rgba(0, 0, 0, 0.04),
    0 16px 38px rgba(0, 0, 0, 0.05);
}

.ge-stellen--card-head {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 22px;
}

.ge-stellen--card-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 48px;
  width: 48px;
  height: 48px;
  background: var(--yellow);
  border-radius: 14px;
  color: var(--darker);
}

.ge-stellen--card-icon .ge-stellen--ico {
  width: 24px;
  height: 24px;
}

.ge-stellen--card-title {
  margin: 0;
  font-family: var(--font);
  font-size: var(--fs-h3);
  font-weight: var(--fw-bold);
  line-height: 1.2;
  color: var(--darker);
}

.ge-stellen--list {
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 0;
  list-style: none;
}

.ge-stellen--item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px 0;
  border-top: 1px solid var(--line);
  font-size: var(--fs-body);
  line-height: 1.5;
  color: var(--dark);
}

.ge-stellen--item:first-child {
  padding-top: 0;
  border-top: 0;
}

.ge-stellen--item:last-child {
  padding-bottom: 0;
}

.ge-stellen--check {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 22px;
  width: 22px;
  height: 22px;
  margin-top: 1px;
  background: var(--yellow);
  border-radius: 50%;
  color: var(--darker);
}

.ge-stellen--check .ge-stellen--ico {
  width: 12px;
  height: 12px;
  stroke-width: 3;
}

/* "Das bieten wir dir": the one dark card, so the offer stands out */
.ge-stellen--card.is-dark {
  background: var(--darker);
  border-color: var(--darker);
}

.ge-stellen--card.is-dark .ge-stellen--card-title {
  color: var(--white);
}

.ge-stellen--card.is-dark .ge-stellen--item {
  border-top-color: rgba(255, 255, 255, 0.14);
  color: rgba(255, 255, 255, 0.9);
}

.ge-stellen--card.is-dark .ge-stellen--item:first-child {
  border-top: 0;
}

/* ---------- Bewerbung ---------- */
.ge-stellen--apply {
  display: flex;
  flex-direction: column;
  gap: 32px;
}

.ge-stellen--apply-main {
  min-width: 0;
}

.ge-stellen--apply-text {
  margin: 0 0 20px;
  font-size: var(--fs-body);
  line-height: 1.7;
  color: var(--darker);
}

.ge-stellen--needs {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin: 0 0 20px;
  padding: 0;
  list-style: none;
}

.ge-stellen--need {
  display: flex;
  align-items: center;
  gap: 14px;
  font-size: var(--fs-body);
  font-weight: var(--fw-medium);
  color: var(--darker);
}

.ge-stellen--need-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 40px;
  width: 40px;
  height: 40px;
  background: var(--yellow);
  border-radius: 10px;
  color: var(--darker);
}

.ge-stellen--need-icon .ge-stellen--ico {
  width: 20px;
  height: 20px;
}

.ge-stellen--apply-btn {
  margin-top: 8px;
}

.ge-stellen--contact {
  min-width: 0;
}

/* ---------- Back link ---------- */
.ge-stellen--back {
  padding: 8px 0 64px;
  text-align: center;
}

/* ---------- Tablet ---------- */
@media (min-width: 768px) {
  .ge-stellen--hero {
    padding: 60px 0;
  }

  .ge-stellen--section,
  .ge-stellen--band {
    padding: 64px 0;
  }

  .ge-stellen--tile {
    flex-basis: calc(50% - 12px);
  }

  .ge-stellen--about {
    flex-direction: row;
    align-items: center;
    gap: 56px;
  }

  .ge-stellen--about-text,
  .ge-stellen--about-media {
    flex: 1 1 0;
  }
}

/* ---------- Desktop ---------- */
@media (min-width: 1025px) {
  .ge-stellen--hero-overlay {
    background: linear-gradient(
      90deg,
      rgba(26, 26, 26, 0.96) 0%,
      rgba(26, 26, 26, 0.84) 45%,
      rgba(26, 26, 26, 0.25) 100%
    );
  }

  .ge-stellen--tile {
    flex-basis: calc(33.333% - 16px);
  }

  .ge-stellen--cards {
    flex-direction: row;
    gap: 24px;
  }

  .ge-stellen--card {
    flex: 1 1 0;
    padding: 32px 28px;
  }

  .ge-stellen--apply {
    flex-direction: row;
    align-items: stretch;
    gap: 64px;
  }

  .ge-stellen--apply-main {
    flex: 1 1 0;
  }

  .ge-stellen--contact {
    flex: 0 0 40%;
  }
}

/* Function: Search */
#brx-header {
  position: relative;
}

.ge-search,
.ge-search form {
  position: static;
}

.ge-search input[type="search"] {
  transition: opacity 0.2s ease;
}

.ge-search:not(.is-open) input[type="search"] {
  width: 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  border-width: 0 !important;
  opacity: 0;
  pointer-events: none;
}

.ge-search.is-open input[type="search"] {
  position: absolute;
  top: 0;
  left: 0;
  width: 100% !important;
  height: 100% !important;
  padding: 0 80px 0 20px;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none;
  outline: 0;
  background-color: var(--ge-white);
  font-size: 28px;
  z-index: 10;
}

.ge-search.is-open button[type="submit"] {
  position: absolute;
  top: 50%;
  right: 20px;
  transform: translateY(-50%);
  z-index: 11;
}

@media (max-width: 991px) {
  .ge-search.is-open input[type="search"] {
    padding-right: 60px;
    font-size: 20px;
  }
}

/* Bricks Pagination */
.bricks-pagination ul .page-numbers {
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color 0.2s ease;
}

.bricks-pagination ul .page-numbers.current {
  background-color: var(--ge-light-gray) !important;
}

.bricks-pagination ul a.page-numbers:hover {
  background-color: var(--ge-yellow-med) !important;
}