/* ============================================================
   ENAMEL (Version 1) – Ergänzungen zu main.css
   main.css wird immer als Basis geladen, diese Datei danach (siehe
   KONZEPT, Paket 6). Abschnitte in dieser Reihenfolge:
   1. Versions-Hooks (.section--NAME-enamel, ehemals in main.css)
   2. Seitentypen (ehemals css/layouts/{typ}-1.css)
   Seitentyp-Regeln sind mit :where(.dv-<typ>) auf ihren Seitentyp begrenzt.
   ============================================================ */

/* ============================================================
   1. VERSIONS-HOOKS
   ============================================================ */

.section--galerie-enamel .container {
  text-align: center;
}

@media (min-width: 1280px) {
  .section--alt.section--about-enamel {
    padding-bottom: 0;
  }
}

/* Vertrauensangaben als Wechsel-Slider (js/trust-slider.js): Karte rechtsbündig, so breit wie die breiteste Angabe; Stern (Font Awesome,
   nur wenn kein eigenes Icon hinterlegt ist) und Fortschrittsbalken, der sich in den 4 s bis zum Wechsel füllt. */
.section--about-enamel .trust__grid--slider {
  grid-template-columns: 1fr;
  width: fit-content;
  max-width: 100%;
  margin-left: auto;
}

.section--about-enamel .trust__grid--slider .trust__item {
  position: relative;
  overflow: hidden;
  grid-area: 1 / 1;
  flex-direction: row;
  padding: 1.75rem 2.25rem;
  border-radius: var(--radius-card);
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

.section--about-enamel .trust__grid--slider .trust__item.is-active {
  opacity: 1;
  transform: none;
}

.section--about-enamel .trust__grid--slider .trust__item:not(:has(.trust__icon))::before {
  content: "";
  flex-shrink: 0;
  width: 1.5rem;
  height: 1.5rem;
  background-color: var(--color-primary);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cpath d='M341.5 45.1C337.4 37.1 329.1 32 320.1 32C311.1 32 302.8 37.1 298.7 45.1L225.1 189.3L65.2 214.7C56.3 216.1 48.9 222.4 46.1 231C43.3 239.6 45.6 249 51.9 255.4L166.3 369.9L141.1 529.8C139.7 538.7 143.4 547.7 150.7 553C158 558.3 167.6 559.1 175.7 555L320.1 481.6L464.4 555C472.4 559.1 482.1 558.3 489.4 553C496.7 547.7 500.4 538.8 499 529.8L473.7 369.9L588.1 255.4C594.5 249 596.7 239.6 593.9 231C591.1 222.4 583.8 216.1 574.8 214.7L415 189.3L341.5 45.1z'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cpath d='M341.5 45.1C337.4 37.1 329.1 32 320.1 32C311.1 32 302.8 37.1 298.7 45.1L225.1 189.3L65.2 214.7C56.3 216.1 48.9 222.4 46.1 231C43.3 239.6 45.6 249 51.9 255.4L166.3 369.9L141.1 529.8C139.7 538.7 143.4 547.7 150.7 553C158 558.3 167.6 559.1 175.7 555L320.1 481.6L464.4 555C472.4 559.1 482.1 558.3 489.4 553C496.7 547.7 500.4 538.8 499 529.8L473.7 369.9L588.1 255.4C594.5 249 596.7 239.6 593.9 231C591.1 222.4 583.8 216.1 574.8 214.7L415 189.3L341.5 45.1z'/%3E%3C/svg%3E") center / contain no-repeat;
}

.section--about-enamel .trust__grid--slider .trust__item::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 3px;
  background-color: var(--color-primary);
  transform: scaleX(0);
  transform-origin: left;
}

.section--about-enamel .trust__grid--slider .trust__item.is-active::after {
  animation: trust-progress 4s linear forwards;
}

@keyframes trust-progress {
  to {
    transform: scaleX(1);
  }
}

@media (prefers-reduced-motion: reduce) {
  .section--about-enamel .trust__grid--slider .trust__item {
    transition: none;
  }

  .section--about-enamel .trust__grid--slider .trust__item::after {
    display: none;
  }
}

.section--leistungen-hero-enamel .container,
.section--notfall-hero-enamel .container,
.section--ueberuns-hero-enamel .container {
  display: flex;
  flex-direction: column;
  gap: var(--gap-lg);
}

@media (min-width: 768px) {
  .section--leistungen-hero-enamel .page-hero__text,
  .section--ueberuns-hero-enamel .page-hero__text,
  .section--notfall-hero-enamel .page-hero__text {
    display: grid;
    grid-template-columns: 2fr 1fr;
    align-items: end;
  }
}

@media (min-width: 1133px) {
  .section--leistungen-hero-enamel .page-hero__image,
  .section--ueberuns-hero-enamel .page-hero__image,
  .section--notfall-hero-enamel .page-hero__image {
    height: 55vh;
    width: 100%;
    background-color: var(--color-bg-alt);
    min-height: 450px;
  }
}

.section--leistungen-hero-enamel .page-hero__image img,
.section--ueberuns-hero-enamel .page-hero__image img,
.section--notfall-hero-enamel .page-hero__image img {
  aspect-ratio: 2 / 1;
}

.section--notfall-hero-enamel .page-hero__text p {
  max-width: 600px;
  /* leicht größer als der Fließtext, aber relativ zu --text-body statt fest
     1.0625rem: folgt dadurch der Fließtext-Größe unter Website-Einstellungen →
     Schriften (auch bei clamp()-Werten und pro Version). */
  font-size: calc(var(--text-body) * 1.0625);
}

.section--kontakt-hero-enamel {
  min-height: 50vh;
  display: flex;
  align-items: center;
}

.section--kontakt-hero-enamel .page-hero__text {
  text-align: center;
  max-width: 560px;
  margin: 0 auto;
  gap: var(--gap-md);
}

.section--white.section--kontakt-split-enamel {
  padding-top: 0;
  padding-bottom: 0;
}

/* ============================================================
   2. SEITENTYPEN
   ============================================================ */

/* ------------------------------------------------------------
   Leistungen (ehemals css/layouts/leistungen-1.css)
   ------------------------------------------------------------ */

/* ============================================================
   LEISTUNGEN – VARIANTE 1 (page-leistungen.php, Basis)
   ============================================================ */

:where(.dv-leistungen) .leistungsblock__image {
  aspect-ratio: 1 / 1;
}

@media (min-width: 1024px) {
  :where(.dv-leistungen) .leistungsblock {
    padding-bottom: 0;
  }
}

/* ------------------------------------------------------------
   Startseite (ehemals css/layouts/startseite-1.css)
   ------------------------------------------------------------ */

/* ============================================================
   STARTSEITE – VARIANTE 1 (page-startseite.php)
   Hero: Vollflächiges Hintergrundbild (inline background-image, per PHP
   aus dem hero_bild-Feld gesetzt) statt separatem <img> neben dem Text.
   Bewusst KEIN wp_get_attachment_image() hier – ein CSS-Hintergrundbild
   bekommt kein automatisches srcset/sizes, lädt also immer dieselbe
   Auflösung unabhängig vom Endgerät (siehe Abwägung in conventions.md).
   Text liegt über einem dunklen Overlay, damit er auf jedem Foto lesbar
   bleibt, unabhängig von dessen Helligkeit. 1:1 aus main-zirkon.css
   (.section--hero-zirkon) übernommen, nur Hook-Klasse auf .section--hero-enamel
   (Enamel, Basis-Variante) geändert; die generische Klasse .section--hero
   gibt es am Markup nicht mehr.

   min-height zieht --nav-height (main.css :root, sitewide Header-Höhe)
   ab, damit Header + Hero zusammen exakt eine Bildschirmhöhe füllen statt
   um die Höhe des sticky Headers darüber hinauszuragen (gleiches Prinzip
   wie --nav-height-Nutzung in main-zirkon.css (Abschnitt Header)).

   Nur das, was diese Variante von anderen Varianten unterscheidet – die
   gemeinsame Text-Typografie (.hero__eyebrow/__title/__subtitle/__buttons)
   lebt in main.css.
   ============================================================ */

/* Header (header.php, Basis-.nav aus main.css mit border-bottom) ohne
   Trennlinie – nur auf der Enamel-Startseite: diese Datei wird ausschließlich
   dort geladen (main-enamel.css), alle anderen Seiten behalten
   den Rahmen. */
:where(.dv-startseite) .nav {
  border-bottom: none;
}

.section--alt.section--hero-enamel {
  position: relative;
  background-size: cover;
  background-position: center;
  background-color: var(--color-bg-alt);
  min-height: calc(100svh - var(--nav-height));
  display: flex;
  align-items: center;
}

.section--alt.section--hero-enamel::before {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
}

.section--alt.section--hero-enamel .container {
  position: relative;
  z-index: 1;
  width: 100%;
}

/* Textspalte: die Hälfte der Containerbreite, höchstens 1000px. clamp() statt
   width: 50% + max-width: 1000px, weil 50% allein auf kleinen Bildschirmen
   zu schmal wird: Untergrenze 28rem, bzw. die volle Breite, wenn der
   Container schmaler ist (Handy) – min(100%, 28rem). */
.section--alt.section--hero-enamel .hero__content {
  width: clamp(min(100%, 28rem), 50%, 1000px);
  text-wrap: balance;
}

.section--alt.section--hero-enamel .hero__eyebrow,
.section--alt.section--hero-enamel .hero__title,
.section--alt.section--hero-enamel .hero__subtitle {
  color: var(--color-white);
}

.section--alt.section--hero-enamel .btn-secondary {
  color: var(--color-white);
  border-color: var(--color-white);
}

.section--alt.section--hero-enamel .btn-secondary:hover {
  background: var(--color-white);
  color: var(--color-text);
}

@media (min-width: 768px) {
  .section--alt.section--hero-enamel {
    min-height: calc(75svh - var(--nav-height));
  }
}

@media (min-width: 1024px) {
  .section--alt.section--hero-enamel {
    min-height: calc(100svh - var(--nav-height));
  }
}

/* Mobil: Leistungs-Karten als Swipe-Carousel (Muster: conventions.md → Mobile-Swipe-Carousel; Punkte: js/carousel-dots.js). */
@media (max-width: 767.98px) {
  .section--leistungen-enamel .leistungen__grid {
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: 88%;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    /* bis an den rechten Bildschirmrand (hebt den Innenabstand 1.5rem des .container auf; der Abstand bleibt am Ende der Reihe erhalten) */
    margin-right: -1.5rem;
    padding-right: 1.5rem;
  }

  .section--leistungen-enamel .leistungen__grid::-webkit-scrollbar {
    display: none;
  }

  .section--leistungen-enamel .leistungen__card {
    scroll-snap-align: start;
  }

  /* Keine Eingangsanimation in der Wisch-Reihe: auch der Schutz vor dem ersten Paint (html.reveal-pending, functions.php) versteckt diese Karten nicht. */
  html.reveal-pending .section--leistungen-enamel .leistungen__grid > * {
    opacity: 1;
  }
}

/* Ganze Karte ist jetzt selbst ein <a> (statt <div> mit innerem Link) –
   gleiches Muster wie main-veneer.css. Reset der Anchor-Standardstile,
   damit h3/p nicht wie Linktext aussehen. */
:where(.dv-startseite) .leistungen__card {
  padding: 2.5rem 1.5rem 2.5rem;
  position: relative;
  text-decoration: none;
}

:where(.dv-startseite) .leistungen__card img {
  width: 100px;
  height: 100px;
  margin-bottom: var(--gap-md);
}

@media (min-width: 1440px) {
  :where(.dv-startseite) .leistungen__card img {
    width: 150px;
    height: 150px;
  }
}

/* "Mehr erfahren"-Span ist kein <a> mehr (siehe oben), deshalb die
   sitewide .leistungen__card a-Optik (main.css) hier repliziert. */
:where(.dv-startseite) .leistungen__card-link {
  display: inline-flex;
  align-items: center;
  gap: var(--gap-xs);
  color: var(--color-primary-text);
  font-size: 0.9375rem;
  font-weight: 500;
  text-transform: uppercase;
  transition: letter-spacing 300ms;
}

:where(.dv-startseite) .leistungen__card:hover .leistungen__card-link {
  letter-spacing: 1px;
}

/* Statt Text-Unterstreichen beim Hover: Rand am unteren Kartenrand,
   wächst per width 0 -> 100% von links nach rechts. */
:where(.dv-startseite) .leistungen__card::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 0;
  height: 3px;
  background: var(--color-primary);
  transition: width 300ms ease;
}

:where(.dv-startseite) .leistungen__card:hover::after {
  width: 100%;
}

@media (prefers-reduced-motion: reduce) {
  :where(.dv-startseite) .leistungen__card::after {
    transition: none;
  }
}

:where(.dv-startseite) .about__image {
  aspect-ratio: 1 / 1;
}

:where(.dv-startseite) .galerie__item {
  aspect-ratio: 1 / 1;
}

@media (min-width: 768px) {
  :where(.dv-startseite) .about__inner {
    grid-template-columns: 1fr 1fr;
  }
}

:where(.dv-startseite) .bewertungen__card {
  display: flex;
  flex-direction: column;
  gap: var(--gap-md);
}

:where(.dv-startseite) .bewertungen__card blockquote {
  flex-grow: 1;
}

/* Bewertungen: Kunden-Foto pro Zitat, gleiche Werte wie .leistungen__card img */
:where(.dv-startseite) .bewertungen__card img,
:where(.dv-startseite) .bewertungen__card .img-placeholder {
  width: 150px;
  height: 150px;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: 100%;
  align-self: flex-start;
  margin-bottom: var(--gap-md);
}

/* Google-Link steht jetzt unter .bewertungen__grid statt im Header,
   braucht deshalb eigene Positionierung (vorher übernahm
   .bewertungen__header { text-align: center } das automatisch). */
:where(.dv-startseite) .bewertungen__link {
  display: block;
  text-align: center;
  margin-top: var(--gap-lg);
}

/* Mobil: Bewertungen als Swipe-Carousel wie bei Inlay (Muster: conventions.md → Mobile-Swipe-Carousel; Punkte: js/carousel-dots.js).
   Der Slider ab vier Bewertungen (.bewertungen__grid--slider) hat eigene Pfeile und Punkte und ist ausgenommen. */
@media (max-width: 767.98px) {
  .section--bewertungen-enamel .bewertungen__grid:not(.bewertungen__grid--slider) {
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: 88%;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    /* bis an den rechten Bildschirmrand (hebt den Innenabstand 1.5rem des .container auf; der Abstand bleibt am Ende der Reihe erhalten) */
    margin-right: -1.5rem;
    padding-right: 1.5rem;
  }

  .section--bewertungen-enamel .bewertungen__grid:not(.bewertungen__grid--slider)::-webkit-scrollbar {
    display: none;
  }

  .section--bewertungen-enamel .bewertungen__grid:not(.bewertungen__grid--slider) > .bewertungen__card {
    scroll-snap-align: start;
  }

  /* Keine Eingangsanimation in der Wisch-Reihe: auch der Schutz vor dem ersten Paint (html.reveal-pending, functions.php) versteckt diese Karten nicht. */
  html.reveal-pending .section--bewertungen-enamel .bewertungen__grid:not(.bewertungen__grid--slider) > * {
    opacity: 1;
  }
}

/* ============================================================
   FOOTER – VARIANTE 1 (footer.php)
   Hook-Klasse .footer--enamel (nur dieser Footer); gemeinsame Grundstile in main.css (.footer …, dort auch der Aufdeck-Effekt:
   position: sticky am unteren Fensterrand – bei Enamel unverändert).
   ============================================================ */

/* Über uns: CTA-Abschnitt in voller Breite des Containers statt der 560 px aus main.css (.cta__inner) */
:where(.dv-ueber-uns) .section--cta-enamel .cta__inner {
  max-width: none;
}

/* Leistungen: Kosten-Box 960 px statt 720 px aus main.css, CTA in voller Breite des Containers statt 560 px (.cta__inner) */
:where(.dv-leistungen) .section--kosten-enamel .kosten__box {
  max-width: 960px;
}

:where(.dv-leistungen) .section--cta-enamel .cta__inner {
  max-width: none;
}