/* ==========================================================================
   Schatz Elektrotechnik – Komponenten
   Teil 1: wiederverwendbare Bausteine
   ========================================================================== */

/* ---------- Abschnitts-Intro (Dachzeile, Überschrift, Text, CTA) ---------- */
:has(> .section-intro) {
  container-type: inline-size;
  overflow: clip;
}

.section-intro {
  display: flex;
  flex-direction: column;
  gap: var(--content-gap);
}

.section-intro__content-wrapper {
  display: flex;
  gap: var(--content-gap, 1em);
  max-inline-size: 70ch;
}

/* Dachzeile mit auslaufenden Linien links und rechts */
.section-intro__heading {
  --divider-color: linear-gradient(to right, transparent 0%, var(--primary) 50%, transparent 100%);
  --divider-size: 1px;
  --divider-gap: 1em;
  display: flex;
  align-items: center;
  gap: var(--divider-gap);
  position: relative;
  max-inline-size: max-content;
  color: var(--primary-text);
  font-size: var(--text-s, 0.8em);
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  text-wrap: nowrap;
}

.section-intro__heading::before,
.section-intro__heading::after {
  content: "";
  position: absolute;
  inset-block-start: 50%;
  inline-size: 100vw;
  block-size: var(--divider-size);
  background: var(--divider-color);
  translate: 0 -50%;
}

.section-intro__heading::before {
  inset-inline-end: calc(100% + var(--divider-gap));
}

.section-intro__heading::after {
  inset-inline-start: calc(100% + var(--divider-gap));
}

.section-intro__headline {
  font-weight: var(--heading-font-weight, 700);
  text-wrap: balance;
}

.section-intro__headline--h1 {
  font-size: var(--h1);
}

.section-intro__headline--h2 {
  font-size: var(--h2);
}

.section-intro__headline--h3 {
  font-size: var(--h3);
}

.section-intro__lede {
  text-wrap: balance;
  line-height: 1.6;
}

.section-intro__cta-wrapper {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: calc(var(--content-gap, 1em) / 2);
  max-inline-size: max-content;
  justify-self: end;
}

.section-intro__cta-wrapper a {
  text-decoration: none;
}

.section-intro--left .section-intro__heading,
.section-intro--two-column .section-intro__heading {
  margin-inline: 0 auto;
}

.section-intro--left .section-intro__heading::before,
.section-intro--two-column .section-intro__heading::before {
  display: none;
}

@container (inline-size >= 43.75rem) {
  .section-intro--center {
    align-items: center;
    text-align: center;
  }

  .section-intro--center .section-intro__content-wrapper {
    align-items: center;
  }

  .section-intro--center .section-intro__cta-wrapper {
    margin-inline: auto;
  }

  .section-intro--two-column {
    display: grid;
    grid-template-columns: var(--grid-3-2);
    align-items: center;
  }
}

@container (inline-size < 43.75rem) {
  .section-intro__heading {
    --divider-color: var(--primary);
  }

  .section-intro__heading::before {
    display: none;
  }
}

/* ---------- Hero: Hintergrundfarbe ---------- */
.hero {
  --bg: var(--base-light);
}

/* ---------- Dachzeile ---------- */
.eyebrow {
  font-size: var(--text-s, 16px);
  font-weight: 600;
  text-transform: uppercase;
  margin-block-end: -1em;
}

/* ---------- Akkordeon ---------- */
.accordion {
  --accordion-duration: 300ms;
  --accordion-easing: cubic-bezier(0.4, 0, 0.2, 1);
  display: flex;
  flex-direction: column;
  gap: var(--space-xxs, 0.5rem);
}

.accordion__item {
  border: var(--border, 1px solid #e5e7eb);
  border-radius: var(--radius, 8px);
  background: var(--base-light, #fff);
  overflow: hidden;
}

.accordion__header {
  inline-size: 100%;
}

.accordion__trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1em;
  inline-size: 100%;
  padding: 1rem 1.25rem;
  border: 0;
  background: transparent;
  color: var(--text-dark, #1a1a1a);
  font-family: inherit;
  font-size: var(--text-m, 1rem);
  font-weight: var(--heading-font-weight, 600);
  line-height: var(--text-line-height, 1.5);
  text-align: start !important;
  cursor: pointer;
  transition: background-color 150ms ease;
}

.accordion__trigger:hover {
  background: var(--bg-ultra-light, #f9fafb);
}

.accordion__trigger:focus-visible {
  outline: 2px solid var(--focus-color, #2563eb);
  outline-offset: var(--focus-offset, 2px);
}

.accordion__label {
  flex: 1;
}

.accordion__chevron {
  flex-shrink: 0;
  font-size: 1.25em;
  color: var(--text-dark-muted, #6b7280);
  transition: transform var(--accordion-duration) var(--accordion-easing);
}

.accordion__trigger[aria-expanded="true"] .accordion__chevron {
  transform: rotate(180deg);
}

/* Höhe animiert über grid-template-rows (0fr -> 1fr) */
.accordion__panel {
  display: grid;
  grid-template-rows: 0fr;
  overflow: hidden;
  visibility: hidden;
  color: var(--text-dark, #1a1a1a);
  transition:
    grid-template-rows var(--accordion-duration) var(--accordion-easing),
    visibility var(--accordion-duration) var(--accordion-easing);
}

.accordion__panel--open {
  grid-template-rows: 1fr;
  visibility: visible;
}

.accordion__panel-inner {
  overflow: hidden;
  min-height: 0;
}

.accordion__content {
  padding: var(--space-m);
  background-color: var(--bg-ultra-light);
}

/* ---------- Karussell (Kundenstimmen) ---------- */
.carousel {
  --carousel-gap: 16px;
  --carousel-per-view: 1;
  gap: var(--space-l);
}

.carousel__viewport {
  inline-size: 100%;
  overflow: hidden;
}

.carousel__track {
  display: flex;
  gap: var(--carousel-gap);
  margin: 0;
  padding: 0;
  list-style: none;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
}

.carousel__track::-webkit-scrollbar {
  display: none;
}

.carousel__slide {
  flex: 0 0 calc((100% - var(--carousel-gap) * (var(--carousel-per-view) - 1)) / var(--carousel-per-view));
  scroll-snap-align: start;
}

.carousel__controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-m);
}

.carousel__button {
  padding: 1px 6px;
  cursor: pointer;
}

@media (width >= 768px) {
  .carousel {
    --carousel-gap: 24px;
    --carousel-per-view: 2;
  }
}

/* ---------- Bewertungs-Badge ---------- */
.rating-badge__icon-wrapper::after {
  content: attr(data-rating);
  display: flex;
}

/* ---------- Icon-Liste (Häkchen) ---------- */
.icon-list {
  --icon: url("../images/check-icon.svg");
  --icon-color: var(--primary-dark);
  --font-size: 1em;
  --icon-offset-block: 0.5ex;
  --list-item-gap: 0.5ex;
  --label-color: currentColor;
}

/* ---------- Avatar ---------- */
.avatar {
  --avatar-size: min(7rem, 15vmin);
  --font-size: var(--text-m, 1rem);
}

/* ---------- Video ---------- */
.video-player {
  position: relative;
  display: flex;
  flex-direction: column;
  margin: 0;
  border-radius: var(--radius);
}

.video-player__video {
  display: block;
  inline-size: 100%;
  block-size: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  object-position: center;
  background: black;
  border-radius: var(--radius);
}

/* Großer Play-Button mittig auf dem Vorschaubild (Video lädt erst beim Abspielen)
   Icon: Hugeicons „play-circle“ (MIT) */
.video-player__play {
  position: absolute;
  inset: 0 0 3.5rem; /* Steuerleiste des Browsers frei lassen */
  display: grid;
  place-items: center;
  padding: 0;
  padding-block-start: 3.5rem; /* Icon trotzdem mittig im Bild */
  border: 0;
  border-radius: var(--radius) var(--radius) 0 0;
  background: radial-gradient(circle at 50% calc(50% + 1.75rem), rgb(0 0 0 / 0.3), transparent 60%);
  color: #fff;
  cursor: pointer;
  transition: background-color 0.25s ease;

  &:hover {
    background-color: rgb(0 0 0 / 0.1);
  }

  &:focus-visible {
    outline: 3px solid #fff;
    outline-offset: -6px;
  }

  &[hidden] {
    display: none;
  }
}

.video-player__play-icon {
  inline-size: clamp(4rem, 10vw, 7rem);
  block-size: auto;
  border-radius: 50%;
  background-color: rgb(0 0 0 / 0.25);
  backdrop-filter: blur(4px);
  filter: drop-shadow(0 0.25rem 0.75rem rgb(0 0 0 / 0.4));
  transition: scale 0.25s ease, color 0.25s ease, background-color 0.25s ease;

  .video-player__play:hover &,
  .video-player__play:focus-visible & {
    scale: 1.08;
    background-color: var(--primary);
  }
}

@media (prefers-reduced-motion: reduce) {
  .video-player__play,
  .video-player__play-icon {
    transition: none;
  }

  .video-player__play:hover .video-player__play-icon,
  .video-player__play:focus-visible .video-player__play-icon {
    scale: none;
  }
}

/* ---------- Logo-Laufband ---------- */
.logo-marquee__wrapper {
  mask-image: linear-gradient(to right, transparent 0%, black 10%, black 90%, transparent 100%);
}

.logo-marquee--running .logo-marquee__track {
  animation: logo-marquee var(--marquee-duration, 20s) linear infinite;
}

.logo-marquee__wrapper:hover .logo-marquee__track {
  animation-play-state: paused;
}

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

/* ---------- Karte (OpenStreetMap / Leaflet) ---------- */
.map-frame {
  --map-height: 350px;
  border: var(--border);
  border-radius: var(--radius);
  overflow: clip;
}

.map {
  position: relative;
  z-index: 0;
  inline-size: 100%;
  block-size: var(--map-height);
  background: var(--bg-light);
  font: inherit;
}

/* Zwei-Klick-Hinweis: wird angezeigt, bis die Karte freigegeben ist */
.map__consent {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-s);
  padding: var(--space-m);
  background-color: var(--bg-ultra-light);
  background-image: var(--pattern-stripes);
  color: var(--text-color);
  text-align: center;
}

.map__consent-text {
  max-inline-size: 45ch;
  font-size: var(--text-s);
}

.map__consent-link {
  text-decoration: underline;
  text-underline-offset: 0.15em;
}

.map__consent-button {
  cursor: pointer;
}

/* Zwei-Klick-Einbettung externer Inhalte (z. B. Wärmepumpen-Konfigurator) */
.consent-embed {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-s);
  min-block-size: 25rem;
  padding: var(--space-m);
  border: var(--border);
  border-radius: var(--radius);
  background-color: var(--bg-ultra-light);
  background-image: var(--pattern-stripes);
  color: var(--text-color);
  text-align: center;
}

.consent-embed__text {
  max-inline-size: 55ch;
  font-size: var(--text-s);
}

.consent-embed__link {
  text-decoration: underline;
  text-underline-offset: 0.15em;
}

.consent-embed__button {
  cursor: pointer;
}

.map__fallback {
  padding: var(--space-s);
}

.map .leaflet-control-attribution {
  display: flex;
  gap: 0.25rem;
}

.map .leaflet-attribution-flag {
  display: none !important;
}

.map__popup-title {
  display: block;
  font-weight: 700;
  letter-spacing: -0.01em;
}

.map__popup-address {
  display: block;
  margin-block: 0.35rem;
  font-size: 0.95em;
}

.map__popup-link {
  text-decoration: underline;
  text-underline-offset: 0.15em;
  white-space: nowrap;
}

@media (width > 58.125rem) {
  .map-frame {
    min-block-size: 28.125rem;
  }

  .map-frame--h600 {
    --map-height: 600px;
  }

  .map-frame--h720 {
    --map-height: 720px;
  }
}

/* ---------- Cover (Bild mit abgedunkelter Fläche und Text) ---------- */
.cover {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-block-size: 430px;
  padding: 1em;
  color: #fff;
  overflow: clip;
}

.cover--bottom-left {
  align-items: flex-end;
  justify-content: flex-start;
}

.cover__image {
  position: absolute;
  inset: 0;
  inline-size: 100%;
  block-size: 100%;
  max-inline-size: none;
  object-fit: cover;
}

.cover__overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  background-color: #000;
  opacity: 0.5;
}

.cover__content {
  position: relative;
  z-index: 1;
  text-align: center;
}

/* ---------- Bildunterschriften ---------- */
main figure > :where(figcaption) {
  margin-block: 0.5em 1em;
}

/* Zitat-Box am Ende eines Blogbeitrags behält ihren Abstand nach unten */
.post-body__inner > figure:last-child {
  margin-block-end: var(--figure-spacing);
}

/* ---------- PDF-Einbettung ---------- */
.pdf-embed__link {
  inline-size: fit-content;
  margin-block-end: var(--space-xs);
  padding: var(--space-xs) var(--space-s);
  background-color: white;
  color: var(--primary); /* Leiste ist immer weiß → dunkles Petrol in beiden Modi */
  border: var(--border);
  border-radius: var(--radius);
  font-weight: 600;
}

.pdf-embed__frame {
  inline-size: 100%;
  max-inline-size: 100%;
  border: var(--border);
  border-radius: var(--radius);
}

/* ---------- Cookie-Erklärung (Tabelle) ---------- */
.cookie-declaration__purpose {
  margin: 32px 0 16px;
  font-size: 1.17em;
  font-weight: 700;
  line-height: 1.2;
}

.cookie-declaration__table-wrap {
  max-inline-size: 100%;
  overflow-x: auto;
}

.cookie-declaration__table {
  inline-size: 100%;
  margin: 0 0 16px;
  border-collapse: collapse;
}

.cookie-declaration__table thead tr {
  text-align: left;
  border-block-end: 2px solid currentColor;
  opacity: 0.85;
}

.cookie-declaration__table tbody tr {
  border-block-end: 1px solid rgb(0 0 0 / 8%);
}

.cookie-declaration__table th {
  padding: 8px 12px;
  white-space: nowrap;
}

.cookie-declaration__table td {
  padding: 8px 12px;
  overflow-wrap: anywhere;
}

.cookie-declaration__name {
  font-weight: 500;
}

@media (width <= 640px) {
  .cookie-declaration__table-wrap {
    overflow-x: visible;
  }

  .cookie-declaration__table thead {
    position: absolute;
    inset-inline-start: -9999px;
  }

  .cookie-declaration__table,
  .cookie-declaration__table tbody,
  .cookie-declaration__table tr,
  .cookie-declaration__table td {
    display: block;
    inline-size: 100%;
  }

  .cookie-declaration__table tbody tr {
    margin: 0 0 12px;
    padding: 8px 12px;
    border: 1px solid rgb(0 0 0 / 10%);
    border-radius: 6px;
  }

  .cookie-declaration__table td {
    padding: 4px 0;
  }

  .cookie-declaration__table td:empty {
    display: none;
  }

  .cookie-declaration__table td::before {
    content: attr(data-label) ": ";
    display: inline-block;
    min-inline-size: 80px;
    font-weight: 600;
    opacity: 0.75;
  }
}

/* ==========================================================================
   Teil 2: Sektionen und seitenbezogene Blöcke
   ========================================================================== */
/* ---------- Hero (Startseite) ---------- */
.hero {
  background-color: var(--bg);
  .hero__body {
    display: grid;
    grid-template-columns: var(--grid-12);
    grid-template-areas: "headline headline headline headline headline headline featured-media featured-media featured-media featured-media featured-media featured-media" "callout callout callout callout callout callout featured-media featured-media featured-media featured-media featured-media featured-media" "content content content content content content featured-media featured-media featured-media featured-media featured-media featured-media";
    @media (width < 62.5rem) {
      grid-template-columns: var(--grid-1);
      grid-template-areas: "headline" "featured-media" "callout" "content";
    }
  }
  .hero__headline-wrapper {
    grid-area: headline;
  }
  .hero__featured-media-wrapper {
    grid-area: featured-media;
    margin: 0;
  }
  .hero__featured-media {
    flex: 1;
    block-size: 100%;
    inline-size: 100%;
    object-fit: cover;
  }
  .hero__callout-wrapper {
    position: relative;
    z-index: 2;
    grid-area: callout;
    display: grid;
    gap: var(--content-gap);
    align-items: center;
    grid-template-columns: subgrid;
    grid-column: callout / span 8;
    margin-block: var(--content-gap);
    > * {
      grid-column: span 2;
    }
    @media (width < 62.5rem) {
      grid-column: callout;
      grid-template-columns: var(--grid-4);
      margin-block: 0;
      > * {
        grid-column: span 1;
      }
    }
    @media (width < 48rem) {
      grid-template-columns: var(--grid-3);
      > *:nth-child(1) {
        grid-column: 1 / -1;
      }
    }
  }
  .hero__callout-media-wrapper {
    margin: 0;
  }
  .hero__callout-media {
    aspect-ratio: 1;
    object-fit: cover;
    inline-size: 100%;
  }
  .hero__callout-media-cutout {
    position: absolute;
    background: var(--bg);
    grid-column: 7 / -1;
    inline-size: calc(100% + var(--content-gap));
    block-size: calc(100% + var(--content-gap) * 2);
    border-radius: 0 var(--radius) var(--radius) 0;
    z-index: -1;
    @media (width < 62.5rem) {
      display: none;
    }
  }
  .hero__lede-wrapper {
    grid-area: content;
    @media (width >= 62.5rem) {
      max-inline-size: 60ch;
    }
  }
  .hero__headline {
    font-weight: var(--heading-font-weight);
    line-height: var(--heading-line-height);
    letter-spacing: var(--heading-letter-spacing);
    font-family: var(--heading-font-family);
    max-inline-size: var(--heading-width, 25ex);
    font-size: var(--h1-to-h2);
  }
  .hero__callout-text {
    font-size: var(--callout-font-size, 1.5rem);
    font-weight: var(--callout-font-weight, 700);
    line-height: var(--callout-line-height);
    letter-spacing: var(--callout-letter-spacing);
    font-family: var(--callout-font-family);
    @media (width <= 47.875rem) {
      order: 1;
    }
  }
  .hero__lede {
    font-size: var(--lede-font-size);
    font-weight: var(--lede-font-weight);
    text-transform: var(--lede-text-transform);
    letter-spacing: var(--lede-letter-spacing);
    line-height: var(--lede-line-height);
  }
}

/* ---------- Video mit direkten Konfigurator-Links ---------- */
.showcase {
  /* im Dunkelmodus heller, damit Rahmen, Pfeile und Icons sichtbar bleiben */
  --showcase-accent: light-dark(var(--primary), oklch(0.78 0.08 217));
  display: flex;
  flex-direction: column;
  min-height: 60vh;
  justify-content: center;
}
.showcase__media {
  margin: 0;
}
.showcase__arrow { inline-size: 1.1rem; min-inline-size: 1.1rem; block-size: 1.1rem; flex: none; }
.showcase__container { display: flex; flex-direction: column; gap: var(--space-l); }
.showcase__top {
  display: grid;
  gap: var(--space-l);
  align-items: center;
  @media (width >= 64rem) { grid-template-columns: 1fr 1fr; }
}
.showcase__panel { display: grid; gap: var(--space-s); }
.showcase__heading { font-size: var(--h2); line-height: 1.15; text-wrap: balance; }
.showcase__lead { color: var(--text-dark-muted); }
.showcase__configurators {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.75rem;
  @media (width < 30rem) { grid-template-columns: 1fr; }
  padding: 0;
  list-style: none;
}
.showcase__tile {
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-rows: auto auto;
  column-gap: 0.75rem;
  padding: 1rem 1.125rem;
  border: 1px solid color-mix(in oklch, var(--showcase-accent) 35%, transparent);
  border-radius: var(--radius);
  background: var(--bg-ultra-light);
  color: var(--text-dark);
  text-decoration: none;
  transition: border-color 160ms ease-out, background-color 160ms ease-out, transform 160ms ease-out;
  .showcase__arrow { grid-row: 1 / 3; grid-column: 2; align-self: center; color: var(--showcase-accent); transition: transform 160ms ease-out; }
  @media (hover: hover) and (pointer: fine) {
    &:hover { border-color: var(--showcase-accent); background: color-mix(in oklch, var(--showcase-accent) 12%, var(--bg-ultra-light)); }
    &:hover .showcase__arrow { transform: translate(2px, -2px); }
  }
  &:active { transform: scale(0.98); }
  &:focus-visible { outline: 2px solid var(--showcase-accent); outline-offset: 2px; }
}
.showcase__tile-title { font-weight: 700; }
.showcase__tile-sub { font-size: var(--text-s); color: var(--text-dark-muted); }
.showcase__features {
  display: grid;
  gap: var(--space-s);
  padding: 0;
  list-style: none;
  @media (width >= 56.25rem) { grid-template-columns: repeat(3, 1fr); }
}
.showcase__feature {
  display: grid;
  grid-template-columns: 2.25rem 1fr;
  gap: 0.875rem;
  padding-block-start: 1em;
  border-block-start: 2px solid color-mix(in oklch, var(--showcase-accent) 30%, transparent);
  color: inherit;
  text-decoration: none;
  &:hover .showcase__feature-title { color: var(--showcase-accent); }
  &:focus-visible { outline: 2px solid var(--showcase-accent); outline-offset: 4px; }
}
.showcase__feature-icon { inline-size: 2.25rem; color: var(--showcase-accent); fill: currentColor; }
.showcase__feature-title { display: block; font-size: var(--text-m); transition: color 160ms ease-out; }
.showcase__feature-text { display: block; font-size: var(--text-s); color: var(--text-dark-muted); }
@media (prefers-reduced-motion: reduce) {
  .showcase__tile, .showcase__tile .showcase__arrow { transition: none; }
}

/* ---------- Feature-Karte ---------- */
.feature-card {
  display: flex;
  flex-direction: column;
  gap: var(--card-gap, 0.5em);
}
.feature-card__icon {
  inline-size: var(--icon-size, 38px);
  fill: var(--text-dark);
}
.feature-card__heading {
  font-size: var(--h3);
}

/* ---------- Feature-Liste ---------- */
.feature-list {
  display: grid;
  gap: var(--content-gap);
  @media (width >= 56.25rem) {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
.feature-list__item {
  padding-block-start: 1em;
  border-block-start: 2px solid color-mix(in oklch, var(--primary) 30%, transparent);
  display: flex;
  flex-direction: column;
  gap: var(--card-gap);
}

/* ---------- Artikel-Sektion ---------- */
.articles {
  display: flex;
  flex-direction: column;
  background-color: color-mix(in oklch, var(--base) 20%, transparent);
  background-image: var(--pattern-stripes);
  background-repeat: repeat;
}
.articles__container {
  display: flex;
  flex-direction: column;
  gap: var(--container-gap);
}
/* ---------- Loxone-Hervorhebung (Startseite) ---------- */
.loxone-feature {
  display: grid;
  gap: var(--space-l);
  align-items: center;
  padding: var(--space-m);
  border: var(--border);
  border-radius: var(--radius);
  background: var(--bg-ultra-light);
  @media (width >= 62.5rem) {
    grid-template-columns: 1fr 1fr;
    padding: var(--space-l);
  }
}
.loxone-feature__media {
  margin: 0;
}
.loxone-feature__image {
  display: block;
  inline-size: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: calc(var(--radius) - 4px);
}
.loxone-feature__body {
  display: grid;
  gap: var(--space-s);
  justify-items: start;
}
.loxone-feature__badge {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.4rem 0.8rem 0.4rem 0.6rem;
  border: 1px solid color-mix(in oklch, var(--primary) 25%, transparent);
  border-radius: 999px;
  background: #fff;
  color: #1a1a1a;
  font-size: 0.875rem;
  font-weight: 600;
  .loxone-feature__check {
    inline-size: 1.25rem;
    block-size: 1.25rem;
    padding: 0.2rem;
    color: var(--primary); /* Plakette ist immer weiß → dunkles Petrol in beiden Modi */
  }
}
.loxone-feature__title {
  font-size: var(--h3);
  line-height: 1.2;
  text-wrap: balance;
}
.loxone-feature__list {
  display: grid;
  gap: 0.75rem;
  padding: 0;
  list-style: none;
}
.loxone-feature__item {
  display: grid;
  grid-template-columns: 1.5rem 1fr;
  gap: 0.6rem;
  align-items: start;
  color: var(--text-dark-muted);
  strong {
    color: var(--text-dark);
  }
}
.loxone-feature__check {
  inline-size: 1.5rem;
  block-size: 1.5rem;
  padding: 0.25rem;
  border-radius: 50%;
  background: color-mix(in oklch, var(--primary) 15%, transparent);
  color: var(--primary-text);
}
.loxone-feature__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem 1.5rem;
  margin-block-start: 0.25rem;
}

/* ---------- Link mit Pfeil ---------- */
.arrow-link {
  --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24' fill='none' stroke='currentColor' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M13 17.9995L19 11.9995L13 5.99951M18.5 11.9995L5 11.9995'/%3E%3C/svg%3E");
  margin-block-start: calc(var(--card-gap) / 2);
  display: flex;
  flex-direction: row;
  gap: 0.35em;
  font-weight: 700;
  transition: all 0.25s ease;
  &::before {
    content: "";
    display: block;
    inline-size: 1em;
    order: 1;
    flex-shrink: 0;
    background: currentColor;
    mask-image: var(--icon);
    mask-size: cover;
    mask-position: center center;
    mask-repeat: no-repeat;
    transition: transform 0.25s ease;
  }
  &:hover::before,
  &:focus::before {
    transform: translateX(6px) scale(1.1);
  }
}

/* ---------- Hintergrundmuster (Leiterbahnen) ---------- */
.u-pattern-bg {
  background-color: color-mix(in oklch, var(--base) 40%, transparent);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 304 304' width='304' height='304'%3E%3Cpath fill='%230b6b7f' fill-opacity='0.04' d='M44.1 224a5 5 0 1 1 0 2H0v-2h44.1zm160 48a5 5 0 1 1 0 2H82v-2h122.1zm57.8-46a5 5 0 1 1 0-2H304v2h-42.1zm0 16a5 5 0 1 1 0-2H304v2h-42.1zm6.2-114a5 5 0 1 1 0 2h-86.2a5 5 0 1 1 0-2h86.2zm-256-48a5 5 0 1 1 0 2H0v-2h12.1zm185.8 34a5 5 0 1 1 0-2h86.2a5 5 0 1 1 0 2h-86.2zM258 12.1a5 5 0 1 1-2 0V0h2v12.1zm-64 208a5 5 0 1 1-2 0v-54.2a5 5 0 1 1 2 0v54.2zm48-198.2V80h62v2h-64V21.9a5 5 0 1 1 2 0zm16 16V64h46v2h-48V37.9a5 5 0 1 1 2 0zm-128 96V208h16v12.1a5 5 0 1 1-2 0V210h-16v-76.1a5 5 0 1 1 2 0zm-5.9-21.9a5 5 0 1 1 0 2H114v48H85.9a5 5 0 1 1 0-2H112v-48h12.1zm-6.2 130a5 5 0 1 1 0-2H176v-74.1a5 5 0 1 1 2 0V242h-60.1zm-16-64a5 5 0 1 1 0-2H114v48h10.1a5 5 0 1 1 0 2H112v-48h-10.1zM66 284.1a5 5 0 1 1-2 0V274H50v30h-2v-32h18v12.1zM236.1 176a5 5 0 1 1 0 2H226v94h48v32h-2v-30h-48v-98h12.1zm25.8-30a5 5 0 1 1 0-2H274v44.1a5 5 0 1 1-2 0V146h-10.1zm-64 96a5 5 0 1 1 0-2H208v-80h16v-14h-42.1a5 5 0 1 1 0-2H226v18h-16v80h-12.1zm86.2-210a5 5 0 1 1 0 2H272V0h2v32h10.1zM98 101.9V146H53.9a5 5 0 1 1 0-2H96v-42.1a5 5 0 1 1 2 0zM53.9 34a5 5 0 1 1 0-2H80V0h2v34H53.9zm60.1 3.9V66H82v64H69.9a5 5 0 1 1 0-2H80V64h32V37.9a5 5 0 1 1 2 0zM101.9 82a5 5 0 1 1 0-2H128V37.9a5 5 0 1 1 2 0V82h-28.1zm16-64a5 5 0 1 1 0-2H146v44.1a5 5 0 1 1-2 0V18h-26.1zm102.2 270a5 5 0 1 1 0 2H98v14h-2v-16h124.1zM242 149.9V160h16v34h-16v62h48v48h-2v-46h-48v-66h16v-30h-16v-12.1a5 5 0 1 1 2 0zM53.9 18a5 5 0 1 1 0-2H64V2H48V0h18v18H53.9zm112 32a5 5 0 1 1 0-2H192V0h50v2h-48v48h-28.1zm-48-48a5 5 0 0 1-9.8-2h2.07a3 3 0 1 0 5.66 0H178v34h-18V21.9a5 5 0 1 1 2 0V32h14V2h-58.1zm0 96a5 5 0 1 1 0-2H137l32-32h39V21.9a5 5 0 1 1 2 0V66h-40.17l-32 32H117.9zm28.1 90.1a5 5 0 1 1-2 0v-76.51L175.59 80H224V21.9a5 5 0 1 1 2 0V82h-49.59L146 112.41v75.69zm16 32a5 5 0 1 1-2 0v-99.51L184.59 96H300.1a5 5 0 0 1 3.9-3.9v2.07a3 3 0 0 0 0 5.66v2.07a5 5 0 0 1-3.9-3.9H185.41L162 121.41v98.69zm-144-64a5 5 0 1 1-2 0v-3.51l48-48V48h32V0h2v50H66v55.41l-48 48v2.69zM50 53.9v43.51l-48 48V208h26.1a5 5 0 1 1 0 2H0v-65.41l48-48V53.9a5 5 0 1 1 2 0zm-16 16V89.41l-34 34v-2.82l32-32V69.9a5 5 0 1 1 2 0zM12.1 32a5 5 0 1 1 0 2H9.41L0 43.41V40.6L8.59 32h3.51zm265.8 18a5 5 0 1 1 0-2h18.69l7.41-7.41v2.82L297.41 50H277.9zm-16 160a5 5 0 1 1 0-2H288v-71.41l16-16v2.82l-14 14V210h-28.1zm-208 32a5 5 0 1 1 0-2H64v-22.59L40.59 194H21.9a5 5 0 1 1 0-2H41.41L66 216.59V242H53.9zm150.2 14a5 5 0 1 1 0 2H96v-56.6L56.6 162H37.9a5 5 0 1 1 0-2h19.5L98 200.6V256h106.1zm-150.2 2a5 5 0 1 1 0-2H80v-46.59L48.59 178H21.9a5 5 0 1 1 0-2H49.41L82 208.59V258H53.9zM34 39.8v1.61L9.41 66H0v-2h8.59L32 40.59V0h2v39.8zM2 300.1a5 5 0 0 1 3.9 3.9H3.83A3 3 0 0 0 0 302.17V256h18v48h-2v-46H2v42.1zM34 241v63h-2v-62H0v-2h34v1zM17 18H0v-2h16V0h2v18h-1zm273-2h14v2h-16V0h2v16zm-32 273v15h-2v-14h-14v14h-2v-16h18v1zM0 92.1A5.02 5.02 0 0 1 6 97a5 5 0 0 1-6 4.9v-2.07a3 3 0 1 0 0-5.66V92.1zM80 272h2v32h-2v-32zm37.9 32h-2.07a3 3 0 0 0-5.66 0h-2.07a5 5 0 0 1 9.8 0zM5.9 0A5.02 5.02 0 0 1 0 5.9V3.83A3 3 0 0 0 3.83 0H5.9zm294.2 0h2.07A3 3 0 0 0 304 3.83V5.9a5 5 0 0 1-3.9-5.9zm3.9 300.1v2.07a3 3 0 0 0-1.83 1.83h-2.07a5 5 0 0 1 3.9-3.9zM97 100a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm0-16a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm16 16a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm16 16a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm0 16a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm-48 32a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm16 16a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm32 48a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm-16 16a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm32-16a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm0-32a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm16 32a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm32 16a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm0-16a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm-16-64a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm16 0a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm16 96a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm0 16a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm16 16a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm16-144a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm0 32a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm16-32a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm16-16a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm-96 0a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm0 16a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm16-32a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm96 0a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm-16-64a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm16-16a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm-32 0a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm0-16a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm-16 0a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm-16 0a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm-16 0a3 3 0 1 0 0-6 3 3 0 0 0 0 6zM49 36a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm-32 0a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm32 16a3 3 0 1 0 0-6 3 3 0 0 0 0 6zM33 68a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm16-48a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm0 240a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm16 32a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm-16-64a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm0 16a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm-16-32a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm80-176a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm16 0a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm-16-16a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm32 48a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm16-16a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm0-32a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm112 176a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm-16 16a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm0 16a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm0 16a3 3 0 1 0 0-6 3 3 0 0 0 0 6zM17 180a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm0 16a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm0-32a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm16 0a3 3 0 1 0 0-6 3 3 0 0 0 0 6zM17 84a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm32 64a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm16-16a3 3 0 1 0 0-6 3 3 0 0 0 0 6z'%3E%3C/path%3E%3C/svg%3E");
}

/* ---------- Dienstleistungen ---------- */
.services__container {
  gap: var(--container-gap);
  display: flex;
  flex-direction: column;
}
.services__grid-wrapper {
  display: grid;
  gap: var(--grid-gap);
  @media (width >= 50rem) {
    grid-template-columns: var(--grid-auto-2);
  }
}
.services__card {
  display: flex;
  flex-direction: column;
  gap: var(--card-gap);
  padding: var(--space-s);
  background-color: var(--bg-ultra-light);
  border-radius: var(--radius);
  border: 1px solid color-mix(in oklch, var(--primary) 50%, transparent);
}
.services__heading {
  color: var(--primary-text);
}
.services__description {
  font-size: var(--text-s);
  display: flex;
  flex-direction: column;
}
.services__icon {
  order: -1;
  width: 2.5rem;
  height: 2.5rem;
  margin-block-end: -0.25rem;
}
.services__info-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.services__info-text {
  font-weight: 600;
  inline-size: 100%;
  max-inline-size: 50ch;
  padding: var(--space-s);
  border-radius: var(--radius);
  border: var(--border);
  background-color: var(--bg-ultra-light);
  font-size: var(--text-s);
  & span {
    font-style: italic;
  }
}

/* ---------- E-Handwerk zertifiziert ---------- */
.certified {
  min-block-size: 100vh;
  max-block-size: none;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.certified__content-wrapper {
  background-color: var(--bg-ultra-light);
  padding: var(--space-l-to-m);
  inline-size: 100%;
  max-inline-size: var(--width-40);
  border-radius: var(--radius);
  border: 1px solid color-mix(in oklch, var(--primary) 50%, transparent);
  display: flex;
  flex-direction: column;
  gap: calc(var(--content-gap, 1rem) / 1);
}
.certified__heading {
  color: var(--primary-text);
}
.certified__cta {
  margin-block-start: var(--space-xs);
}
.certified__logo-wrapper {
  display: flex;
  flex-direction: column;
  inline-size: 100%;
  max-inline-size: 6rem;
  order: -1;
}
.certified__logo {
  object-fit: cover;
  width: 100%;
  height: 100%;
}
.certified__bg-image-wrapper {
  :has(> &) {
    position: relative;
    isolation: isolate;
  }
  position: var(--bg-position, absolute);
  inset: var(--bg-inset, 0);
  inline-size: var(--bg-width, 100%);
  block-size: var(--bg-height, 100%);
  border-radius: 0;
  object-fit: var(--bg-object-fit, cover);
  object-position: var(--bg-object-position, center);
  z-index: var(--bg-z-index, -2);
  pointer-events: none;
  > img {
    object-fit: var(--bg-object-fit, cover);
    object-position: var(--bg-object-position, center);
    inline-size: var(--bg-width, 100%);
    block-size: var(--bg-height, 100%);
    border-radius: 0;
  }
}

/* ---------- Icon-Liste ---------- */
.icon-list {
  display: flex;
  flex-direction: column;
  gap: var(--list-item-gap, 0.5ex);
}
.icon-list__item {
  display: flex;
  font-size: var(--font-size, 1em);
  color: var(--label-color, currentColor);
  &::before {
    content: "";
    inline-size: var(--font-size, 1em);
    block-size: var(--font-size, 1em);
    aspect-ratio: 1;
    background: var(--icon-color);
    mask-image: var(--icon);
    mask-size: contain;
    mask-repeat: no-repeat;
    mask-position: center;
    position: relative;
    top: var(--icon-offset-block, 0);
    margin-inline-end: 1ch;
  }
}

/* ---------- Zweispalter mit Bild ---------- */
.split {
  display: flex;
  flex-direction: column;
  height: auto;
  justify-content: center;
  padding: var(--section-space-l) var(--gutter);
}
.split__main {
  display: grid;
  gap: var(--content-gap, 1em);
  @media (width >= 56.25rem) {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
.split__media-wrapper {
  z-index: 1;
  position: relative;
  overflow: clip;
  @media (width <= 56.25rem) {
    order: 2;
  }
}
.split__image {
  display: block;
  object-fit: cover;
  inline-size: 100%;
  block-size: 100%;
}

/* ---------- Partner ---------- */
.partners {
  background-image: linear-gradient(to top, var(--base-light), transparent);
  min-height: 90vh;
  height: auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.partners__container {
  gap: var(--container-gap);
}
.partners__lede-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.partners__lede-text {
  max-inline-size: 50ch;
  text-align: left;
  @media (width >= 49.625rem) {
    text-align: center;
  }
}

/* ---------- Logo-Laufband ---------- */
.logo-marquee {
  padding-block: var(--section-space-s);
  overflow: hidden;
  width: 100%;
}
.logo-marquee__container {
  width: 100%;
  padding-inline: var(--gutter);
}
.logo-marquee__wrapper {
  overflow: hidden;
  position: relative;
  width: 100%;
}
.logo-marquee__track {
  display: flex;
  gap: var(--space-l);
  align-items: center;
  width: max-content;
  justify-content: center;
}
.logo-marquee__logo {
  background-color: white;
  height: 5.625rem;
  width: 5.625rem;
  flex-shrink: 0;
  opacity: 0.9;
  transition: opacity 0.2s ease;
  &:hover {
    opacity: 1;
  }
}

/* ---------- FAQ ---------- */
.faq__inner {
  display: flex;
  flex-direction: column;
  gap: var(--container-gap);
  align-items: center;
}
.faq__accordion {
  inline-size: 100%;
  max-inline-size: var(--width-60);
}

/* ---------- Bewertungen ---------- */
.reviews {
  gap: var(--container-gap);
  background-image: linear-gradient(to top, var(--base-light), transparent);
  display: flex;
  flex-direction: column;
}
.reviews__badges {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: var(--content-gap, 1rem);
  @media (width <= 49.375rem) {
    align-self: start;
  }
}
.reviews__card {
  display: flex;
  flex-direction: column;
  gap: var(--space-l);
  background: var(--base-light);
  border-radius: var(--radius);
  border: var(--border);
  height: 100%;
}
.reviews__quote {
  display: flex;
  flex-direction: column;
  gap: 0.5lh;
  padding: var(--space-s-to-xs);
  font-weight: 600;
}
.reviews__cta-wrapper {
  display: flex;
  flex-direction: column;
  width: 100%;
  text-align: center;
  align-items: center;
}
.reviews__cta-text {
  inline-size: 100%;
  max-inline-size: 55ch;
}
.reviews__anchor-wrapper {
  display: flex;
  flex-direction: column;
  gap: var(--content-gap);
  align-items: center;
}

/* ---------- Bewertungs-Badge ---------- */
.rating-badge {
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  gap: 0.5ch;
  inline-size: max-content;
  max-inline-size: 100%;
  font-size: var(--font-size);
}
.rating-badge__icon-wrapper {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 0.5ch;
  padding: 0.25em 0.5em;
  border-radius: var(--radius, 2px);
  background-color: var(--neutral-ultra-light, #eee);
}
.rating-badge__icon {
  inline-size: 1em;
}
.rating-badge__description {
  line-height: 1;
}

/* ---------- Kontakt-Sektion (Startseite) ---------- */
.contact {
  background-image: linear-gradient(to top, var(--base-light), transparent);
}
.contact__container {
  gap: var(--container-gap);
}
.contact__grid {
  display: grid;
  gap: var(--grid-gap);
  align-items: stretch;
  @media (width >= 58.125rem) {
    grid-template-columns: var(--grid-2-3);
  }
}
.contact__form {
  padding: var(--space-s);
  border: var(--border);
  border-radius: var(--radius);
  background-color: var(--neutral-ultra-light);
}

/* ---------- Seitenfuß ---------- */
.site-footer {
  gap: var(--container-gap);
  background: var(--base-semi-dark);
}
.site-footer__inner {
  gap: var(--content-gap);
  @media (width >= 62.5rem) {
    display: grid;
    grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
    align-items: stretch;
  }
}
.site-footer__nav {
  display: flex;
  flex-direction: column;
  gap: var(--content-gap);
  justify-content: center;
}
.site-footer__nav-row {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: calc(var(--content-gap, 1rem) / 2);
  flex-wrap: wrap;
  @media (width <= 42.5rem) {
    flex-direction: column;
    align-items: start;
  }
}
.site-footer__nav-row-heading {
  font-size: var(--h4);
  color: var(--white);
  text-decoration: underline;
}
.site-footer__nav-list {
  display: flex;
  flex-direction: row;
  gap: calc(var(--content-gap, 1rem) / 2);
  align-items: center;
  flex-wrap: wrap;
}
.site-footer__nav-link {
  color: var(--white);
  text-wrap: nowrap;
}
.site-footer__cta {
  display: flex;
  flex-direction: column;
  gap: calc(var(--content-gap) / 2);
  padding: var(--space-s);
  background-color: var(--base-light);
  border-radius: var(--radius);
  border: var(--border, 1px solid #ddd);
}
.site-footer__cta-link {
  margin-block-start: auto;
}
.site-footer__lower {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: var(--content-gap, 1rem);
  font-size: var(--text-xs);
  flex-wrap: wrap;
  @media (width <= 40rem) {
    gap: calc(var(--content-gap, 1rem) / 2);
  }
}
.site-footer__copyright-text {
  color: var(--white);
}
.site-footer__legal {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: var(--content-gap, 1rem);
  flex-wrap: wrap;
}
.site-footer__legal-link {
  color: var(--white);
}
.site-footer__credit {
  color: var(--white);
}

/* ---------- Über uns ---------- */
.about {
  display: flex;
  flex-direction: column;
  gap: var(--container-gap, 1.5em);
  background-color: color-mix(in oklch, var(--base) 20%, transparent);
  background-image: var(--pattern-stripes);
}
.about__content-wrapper {
  display: grid;
  gap: var(--content-gap, 1em);
  @media (width >= 56.25rem) {
    grid-template-columns: var(--grid-2);
  }
}
.about__text-group {
  body :where(& > *:not(:first-child)) {
    margin-block-start: 1em;
  }
}
.about__media-wrapper {
  order: -1;
}
.about__media {
  aspect-ratio: 16/6;
  object-fit: cover;
}

/* ---------- Leistungen (Übersicht) ---------- */
.services-page__container {
  display: flex;
  flex-direction: column;
  gap: var(--container-gap);
}
.services-page__grid-wrapper {
  display: grid;
  grid-template-columns: var(--grid-auto-3);
  gap: var(--grid-gap);
}
.services-page__grid-item {
  display: flex;
  flex-direction: column;
  padding: var(--space-s);
  border: var(--border);
  border-radius: var(--radius);
  background-color: var(--bg-ultra-light);
  gap: var(--card-gap);
}

/* ---------- Blogbeitrag ---------- */
.post {
  background-color: var(--neutral-ultra-light);
  padding-block-end: var(--section-space-m);
  > :first-child > * {
    border-radius: var(--radius) var(--radius) 0 0;
    overflow: clip;
  }
  > :last-child > * {
    border-radius: 0 0 var(--radius) var(--radius);
    overflow: clip;
  }
}

/* ---------- Blogbeitrag – Kopf ---------- */
.post-header {
  background-color: var(--neutral-light);
  & {
    --feature-width: 50px;
    --feature-max-width: 100px;
    --full: minmax(var(--gutter), 1fr);
    padding-inline: 0 !important;
    column-gap: 0 !important;
    display: grid;
    grid-template-columns:
      [full-start] var(--full) [feature-max-start] minmax(0, var(--feature-max-width)) [feature-start] minmax(0, var(--feature-width))
      [content-start] min(var(--content-width), 100% - var(--gutter) * 2) [content-end] minmax(0, var(--feature-width))
      [feature-end] minmax(0, var(--feature-max-width)) [feature-max-end] var(--full) [full-end];
    > * {
      max-width: 100%;
      width: 100%;
    }
    > :where(*) {
      grid-column: content;
    }
  }
}
.post-header__structure {
  display: flex;
  flex-direction: column;
  gap: var(--content-gap, 1rem);
  padding-block: var(--section-space-xl-to-m, 3rem);
  padding-inline: var(--gutter, 16px);
  position: relative;
  margin-block-start: var(--section-space-m, 1.5rem);
  @media (width >= 45rem) {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
  }
}
.post-header__inner {
  display: flex;
  flex-direction: column;
  gap: var(--content-gap, 1rem);
  inline-size: 100%;
  max-inline-size: 70ch;
  color: white;
  @media (width >= 45rem) {
    align-items: center;
    text-align: center;
  }
}
.post-header__title {
  color: white;
  font-size: var(--h1-to-h2);
}
.post-header__author-info {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 1ch;
  inline-size: 100%;
  max-inline-size: max-content;
  margin-block-start: 1em;
}
.post-header__author-avatar {
  block-size: 3rem;
  inline-size: 3rem;
  aspect-ratio: 1;
  border-radius: 50vw;
}
.post-header__date {
}
.post-header__featured-image-wrapper {
  :has(> &) {
    position: relative;
    isolation: isolate;
  }
  position: var(--bg-position, absolute);
  inset: var(--bg-inset, 0);
  inline-size: var(--bg-width, 100%);
  block-size: var(--bg-height, 100%);
  border-radius: var(--bg-radius, 0);
  object-fit: var(--bg-object-fit, cover);
  object-position: var(--bg-object-position, center);
  z-index: var(--bg-z-index, -2);
  border-radius: var(--bg-radius, 0);
  pointer-events: none;
  > img {
    object-fit: var(--bg-object-fit, cover);
    object-position: var(--bg-object-position, center);
    inline-size: var(--bg-width, 100%);
    block-size: var(--bg-height, 100%);
  }
}
.post-header__featured-image-overlay {
  position: var(--bg-position, absolute);
  inset: var(--bg-inset, 0);
  border-radius: var(--bg-radius, 0);
  object-fit: var(--bg-object-fit, cover);
  object-position: var(--bg-object-position, center);
  z-index: var(--bg-z-index, -2);
  border-radius: var(--bg-radius, 0);
  pointer-events: none;
  background-color: oklch(from var(--neutral) l c h / 0.65);
  z-index: 1;
}

/* ---------- Blogbeitrag – Inhalt ---------- */
.post-body {
  & {
    --feature-width: 50px;
    --feature-max-width: 100px;
    --full: minmax(var(--gutter), 1fr);
    padding-inline: 0 !important;
    column-gap: 0 !important;
    display: grid;
    grid-template-columns:
      [full-start] var(--full) [feature-max-start] minmax(0, var(--feature-max-width)) [feature-start] minmax(0, var(--feature-width))
      [content-start] min(var(--content-width), 100% - var(--gutter) * 2) [content-end] minmax(0, var(--feature-width))
      [feature-end] minmax(0, var(--feature-max-width)) [feature-max-end] var(--full) [full-end];
    > * {
      max-width: 100%;
      width: 100%;
    }
    > :where(*) {
      grid-column: content;
    }
  }
}
.post-body__inner {
  padding-block: var(--section-space-m);
  background-color: var(--neutral-light);
  /* Links auf grauem Grund: im Hellmodus dunkleres Petrol (Kontrast WCAG AA) */
  --link-color: light-dark(oklch(0.4 0.08 217.238849582), var(--primary-text));
  --content-width: 70ch;
  & {
    --feature-width: 50px;
    --feature-max-width: 100px;
    --full: minmax(var(--gutter), 1fr);
    padding-inline: 0 !important;
    column-gap: 0 !important;
    display: grid;
    grid-template-columns:
      [full-start] var(--full) [feature-max-start] minmax(0, var(--feature-max-width)) [feature-start] minmax(0, var(--feature-width))
      [content-start] min(var(--content-width), 100% - var(--gutter) * 2) [content-end] minmax(0, var(--feature-width))
      [feature-end] minmax(0, var(--feature-max-width)) [feature-max-end] var(--full) [full-end];
    > * {
      max-width: 100%;
      width: 100%;
    }
    > :where(*) {
      grid-column: content;
    }
  }
}

/* ---------- Blogbeitrag – Fuß ---------- */
.post-footer {
  & {
    --feature-width: 50px;
    --feature-max-width: 100px;
    --full: minmax(var(--gutter), 1fr);
    padding-inline: 0 !important;
    column-gap: 0 !important;
    display: grid;
    grid-template-columns:
      [full-start] var(--full) [feature-max-start] minmax(0, var(--feature-max-width)) [feature-start] minmax(0, var(--feature-width))
      [content-start] min(var(--content-width), 100% - var(--gutter) * 2) [content-end] minmax(0, var(--feature-width))
      [feature-end] minmax(0, var(--feature-max-width)) [feature-max-end] var(--full) [full-end];
    > * {
      max-width: 100%;
      width: 100%;
    }
    > :where(*) {
      grid-column: content;
    }
  }
}
.post-footer__inner {
  display: flex;
  flex-direction: column;
  padding: var(--section-space-m, 1.5rem);
  gap: var(--content-gap, 1rem);
  background-color: oklch(0.45 0.021 243.503139019); /* in beiden Modi dunkel genug für weiße Schrift */
  color: #fff;
  @media (width >= 45rem) {
    align-items: center;
    justify-content: center;
    text-align: center;
  }
}
.post-footer__author-bio {
  inline-size: 100%;
  max-inline-size: 50ch;
}
.post-footer__cta {
  color: #fff;
}

/* ---------- Avatar ---------- */
.avatar {
  display: flex;
  flex-direction: row;
  max-inline-size: max-content;
  align-items: center;
  gap: calc(var(--content-gap, 1em) / 2);
  &.avatar--center {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }
}
.avatar__avatar-wrapper {
  max-inline-size: max-content;
}
.avatar__avatar {
  max-inline-size: var(--avatar-size);
  object-fit: cover;
}
.avatar__content-wrapper {
  display: flex;
  flex-direction: column;
  gap: calc(var(--content-gap, 1em) / 4);
  font-size: var(--font-size, 1rem);
}
.avatar__avatar-name {
  line-height: 1;
  font-weight: 700;
}
.avatar__avatar-description {
  line-height: 1;
  font-size: 85%;
}

/* ---------- pdf-page ---------- */
.pdf-page {
  background-color: color-mix(in oklch, var(--base) 20%, transparent);
  background-image: var(--pattern-stripes);
}
.pdf-page__shortcode-wrapper-div {
  .pdfjs-fullscreen {
    margin-block-end: var(--space-xs);
    padding: var(--space-xs) var(--space-s);
    border-radius: var(--radius);
    border: var(--border);
    background-color: white;
    width: fit-content;
    font-weight: 600;
  }
  iframe {
    border: var(--border);
    border-radius: var(--radius);
  }
}

/* ---------- Impressum ---------- */
.legal {
  display: flex;
  flex-direction: column;
  background-color: color-mix(in oklch, var(--base) 20%, transparent);
  background-image: var(--pattern-stripes);
}
.legal__container {
  inline-size: 100%;
  max-inline-size: var(--width-60);
}

/* ---------- Blog-Übersicht ---------- */
.blog-list__container {
  gap: var(--space-xxl);
  max-width: 56rem;
}
.blog-list__list {
  display: flex;
  flex-direction: column;
  gap: var(--space-xxl);
}
.blog-list__article {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--space-l);
  align-items: start;
  @media (max-width: 767px) {
    grid-template-columns: 1fr;
  }
}
.blog-list__article-figure {
  width: 15rem;
  border-radius: var(--radius);
  overflow: hidden;
  aspect-ratio: 1 / 1;
  background: var(--bg-light);
  @media (max-width: 767px) {
    width: 100%;
  }
}
.blog-list__article-image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
.blog-list__article-content {
  display: flex;
  flex-direction: column;
  gap: var(--space-s);
}
.blog-list__article-meta {
  display: flex;
  align-items: center;
  gap: var(--space-s);
}
.blog-list__article-date {
  font-size: var(--text-s);
  color: var(--text-dark-muted);
}
.blog-list__article-category {
  display: inline-block;
  padding: 0.15em 0.65em;
  border-radius: var(--radius);
  background: var(--bg-light);
  font-size: var(--text-xs);
  color: var(--text-dark-muted);
}
.blog-list__article-title {
  margin: 0;
  font-size: var(--h3);
  text-wrap: var(--heading-text-wrap);
}
.blog-list__article-excerpt {
  margin: 0;
  color: var(--text-dark-muted);
}
.blog-list__article-divider {
  border-top: 1px solid var(--base);
}
.blog-list__article-author {
  display: flex;
  align-items: center;
  gap: var(--space-s);
}
.blog-list__article-avatar {
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  overflow: hidden;
  flex-shrink: 0;
}
.blog-list__author-info {
  display: flex;
  flex-direction: column;
}
.blog-list__author-name {
  font-size: var(--text-s);
  font-weight: var(--heading-font-weight);
}
.blog-list__author-role {
  font-size: var(--text-xs);
  color: var(--text-dark-muted);
}

/* ---------- Seiten-Intro (Blog) ---------- */
.page-intro {
  :has(> &) {
    container-type: inline-size;
  }
  display: flex;
  flex-direction: column;
  gap: var(--content-gap);
  &.page-intro--center {
    @container (inline-size >= 43.75rem) {
      align-items: center;
      text-align: center;
    }
  }
  &.page-intro--two-column {
    @container (inline-size >= 43.75rem) {
      display: grid;
      grid-template-columns: var(--grid-3-2);
      align-items: center;
    }
  }
}
.page-intro__content-wrapper {
  display: flex;
  gap: var(--content-gap, 1em);
  max-inline-size: 70ch;
}
.page-intro__heading {
  font-size: var(--text-s, 0.8em);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-weight: 400;
}
.page-intro__headline {
  font-weight: var(--heading-font-weight, 700);
  &.page-intro__headline--h1 {
    font-size: var(--h1);
  }
  &.page-intro__headline--h2 {
    font-size: var(--h2);
  }
}
.page-intro__lede {
  text-wrap: balance;
  line-height: 1.6;
}

/* ---------- Wärmepumpen-Konfigurator ---------- */
.configurator-embed__container {
  display: flex;
  flex-direction: column;
  gap: var(--content-gap);
}
.configurator-embed__frame {
  display: flex;
  flex-direction: column;
  min-block-size: 100vh;
  max-block-size: none;
  border: var(--border);
  border-radius: var(--radius);
}

/* ---------- Datenschutz ---------- */
.privacy {
  display: flex;
  flex-direction: column;
  background-color: color-mix(in oklch, var(--base) 20%, transparent);
  background-image: var(--pattern-stripes);
}
.privacy__container {
  display: flex;
  flex-direction: column;
  inline-size: 100%;
  max-inline-size: var(--width-60);
}

/* ---------- Landingpages (Leistungen / Regionen) ---------- */
.landing {
  background-color: color-mix(in oklch, var(--base) 20%, transparent);
  background-image: var(--pattern-stripes);
}
.landing__container {
  display: flex;
  flex-direction: column;
  inline-size: 100%;
  max-inline-size: var(--width-70);
  .pdfjs-fullscreen {
    margin-block-end: var(--space-xs);
    padding: var(--space-xs) var(--space-s);
    border-radius: var(--radius);
    border: var(--border);
    background-color: white;
    width: fit-content;
    font-weight: 600;
  }
  iframe {
    border: var(--border);
    border-radius: var(--radius);
  }
}
.landing__bottom-text {
  display: flex;
  flex-direction: column;
  gap: var(--card-gap);
}
.landing__faq-wrapper {
  display: flex;
  flex-direction: column;
  inline-size: 100%;
  max-inline-size: var(--width-40);
  gap: var(--content-gap);
}

/* ---------- Downloads ---------- */
.downloads {
  background-color: color-mix(in oklch, var(--base) 20%, transparent);
  background-image: var(--pattern-stripes);
}
.downloads__container {
  display: flex;
  flex-direction: column;
  gap: var(--container-gap);
}
.downloads__grid-wrapper {
  display: grid;
  gap: var(--grid-gap);
  @media (width >= 50rem) {
    display: grid;
    grid-template-columns: var(--grid-2);
  }
}

/* ---------- Download-Leiste ---------- */
.download-bar {
  container-type: inline-size;
  container-name: download-bar;
}
.download-bar__wrapper {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--card-gap);
  padding: var(--space-s);
  background: var(--bg-ultra-light);
  border-radius: var(--radius);
  border: var(--border);
  @container download-bar (min-width: 600px) {
    & {
      flex-direction: row;
      align-items: center;
      justify-content: space-between;
    }
  }
}
.download-bar__content {
  display: flex;
  flex-direction: column;
  gap: var(--space-xxs, 0.375rem);
  flex: 1;
  min-inline-size: 0;
}
.download-bar__heading {
  font-size: var(--text-l);
  font-weight: 600;
  margin: 0;
}
.download-bar__disclaimer {
  font-size: var(--text-xs);
  line-height: 1.5;
}
.download-bar__btn-wrap {
  flex-shrink: 0;
  @container download-bar (max-width: 599px) {
    & {
      inline-size: 100%;
    }
  }
}
.download-bar__btn {
  display: inline-flex;
  align-items: center;
  gap: calc(var(--space-xs) / 2);
  cursor: pointer;
  transition: all 200ms ease;
  &.is-copied {
    opacity: 0.7;
  }
  @container download-bar (max-width: 599px) {
    & {
      inline-size: 100%;
      justify-content: center;
    }
  }
}
.download-bar__btn-label {
  white-space: nowrap;
  line-height: 1;
}
.download-bar__icon {
  flex-shrink: 0;
  opacity: 0.9;
  fill: white;
  width: 1rem;
  height: 1rem;
}

/* ---------- Kontaktseite ---------- */
.contact-page {
  background-color: var(--neutral-ultra-light);
}
.contact-page__grid-container {
  display: grid;
  gap: var(--grid-gap);
  @media (width >= 56.25rem) {
    grid-template-columns: var(--grid-auto-2);
  }
}
.contact-page__content-wrapper {
  display: flex;
  flex-direction: column;
  gap: var(--content-gap);
}

/* ---------- Kontaktdaten-Liste ---------- */
.contact-list {
  display: flex;
  flex-direction: column;
  gap: var(--card-gap);
}
.contact-list__item {
  display: flex;
  flex-direction: row;
  align-items: center;
}
.contact-list__svg-icon {
  margin-inline-end: 0.75rem;
  color: var(--primary-text);
}

/* ---------- Anfrage ---------- */
.inquiry {
  background-color: color-mix(in oklch, var(--base) 20%, transparent);
  background-image: var(--pattern-stripes);
}
.inquiry__container {
  display: grid;
  gap: var(--grid-gap);
  align-items: stretch;
  @media (width >= 58.125rem) {
    grid-template-columns: var(--grid-2);
  }
}
.inquiry__form-wrapper {
  padding: var(--space-s-to-xs);
  border: var(--border);
  border-radius: var(--radius);
  background-color: var(--bg-ultra-light);
}

/* ---------- Cookie-Erklärung ---------- */
.cookie-page {
  display: flex;
  flex-direction: column;
  height: auto;
  justify-content: center;
  background-color: color-mix(in oklch, var(--base) 20%, transparent);
  background-image: var(--pattern-stripes);
}
.cookie-page__container {
  gap: var(--content-gap);
}

/* ---------- Stellenangebot ---------- */
.job {
  background-color: color-mix(in oklch, var(--base) 20%, transparent);
  background-image: var(--pattern-stripes);
}
.job__container {
  display: flex;
  flex-direction: column;
  inline-size: 100%;
  max-inline-size: var(--width-60);
}