/* ==========================================
   COMPONENTS – seitenübergreifende Komponenten
   Wird auf jeder Seite NACH dem Inline-<style> geladen
   und nutzt die dort im :root definierten Custom Properties.
========================================== */

:root {
  --contact-bar-height: 3.75rem;   /* 60px Leistenhöhe (Handy/Tablet) */
  --contact-fab-size:   3rem;      /* 48px runde Buttons (Desktop) */
}

/* Das hidden-Attribut gewinnt immer gegen display-Regeln */
[hidden] {
  display: none !important;
}

/* ==========================================
   ÜBERSCHRIFTEN – Silbentrennung / Umbruch (B6)
========================================== */
h1, h2, h3, h4 {
  -webkit-hyphens: auto;
  hyphens: auto;
  overflow-wrap: break-word;
}

/* ==========================================
   NAVIGATION – DROPDOWN "LEISTUNGEN" (Desktop)
========================================== */
.nav__item--dropdown {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.125rem;
}

.nav__dropdown-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.75rem;
  height: 1.75rem;
  margin-left: -0.375rem;
  background: none;
  border: none;
  border-radius: var(--radius);
  color: var(--color-text-muted);
  cursor: pointer;
  transition: color 0.2s ease, transform 0.2s ease;
}

.nav__item--dropdown:hover .nav__dropdown-toggle,
.nav__item--dropdown.is-open .nav__dropdown-toggle {
  color: var(--color-primary);
  transform: rotate(180deg);
}

.nav__dropdown {
  position: absolute;
  top: calc(100% + 0.875rem);
  left: -0.875rem;
  min-width: 12.5rem;
  background-color: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: 0 20px 44px -16px rgba(27, 43, 75, 0.22);
  padding: 0.5rem;
  display: flex;
  flex-direction: column;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s;
}

.nav__item--dropdown:hover .nav__dropdown,
.nav__item--dropdown:focus-within .nav__dropdown,
.nav__item--dropdown.is-open .nav__dropdown {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.nav__dropdown-link {
  display: block;
  padding: 0.625rem 0.75rem;
  border-radius: var(--radius);
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--color-text);
  transition: background-color 0.2s ease, color 0.2s ease;
}

.nav__dropdown-link:hover {
  background-color: var(--color-bg-alt);
  color: var(--color-primary);
}

/* ==========================================
   NAVIGATION – HANDYMENÜ (B1) + ACCORDION "LEISTUNGEN"
========================================== */
.nav__mobile {
  max-height: calc(100vh - var(--nav-height));
  max-height: calc(100dvh - var(--nav-height));
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

.nav__mobile-links {
  margin-bottom: 0;
}

.nav__mobile-link {
  display: flex;
  align-items: center;
  min-height: 3rem;
}

/* Seite hinter dem geöffneten Handymenü sperren */
html.is-scroll-locked,
html.is-scroll-locked body {
  overflow: hidden;
}

.nav__mobile-group {
  border-bottom: 1px solid var(--color-border);
}

.nav__mobile-accordion-toggle {
  width: 100%;
  min-height: 3rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.875rem 0;
  background: none;
  border: none;
  font-family: var(--font-base);
  color: var(--color-text);
  font-size: var(--text-base);
  font-weight: 500;
  text-align: left;
  cursor: pointer;
  transition: color 0.2s ease;
}

.nav__mobile-accordion-toggle:hover {
  color: var(--color-primary);
}

.nav__mobile-accordion-icon {
  flex-shrink: 0;
  color: var(--color-text-muted);
  transition: transform 0.25s ease;
}

.nav__mobile-accordion-toggle[aria-expanded="true"] .nav__mobile-accordion-icon {
  transform: rotate(180deg);
}

.nav__mobile-submenu {
  display: none;
  flex-direction: column;
  padding: 0 0 0.75rem 1rem;
}

.nav__mobile-submenu.is-open {
  display: flex;
}

.nav__mobile-sublink {
  display: flex;
  align-items: center;
  min-height: 2.75rem;
  padding: 0.5rem 0;
  color: var(--color-text-muted);
  font-size: var(--text-base);
  font-weight: 500;
  transition: color 0.2s ease;
}

.nav__mobile-sublink:hover {
  color: var(--color-primary);
}

.nav__mobile-sublink--all {
  color: var(--color-accent);
  font-weight: 600;
}

/* ==========================================
   QUERFORMAT (B10) – flacher Kopfbereich
========================================== */
@media (orientation: landscape) and (max-height: 500px) {
  :root {
    --nav-height: 3.5rem;
    --contact-bar-height: 3rem;
  }
}

/* ==========================================
   KONTAKTLEISTE (A1)
   Handy/Tablet/kleiner Desktop: Leiste unten, volle Breite
   Ab 1360px: runde Buttons fest am rechten Rand
   (Unter 1360px reicht der Rand neben dem 1200px-Container
   nicht, die Buttons würden Inhalte verdecken.)
========================================== */
body {
  padding-bottom: calc(var(--contact-bar-height) + env(safe-area-inset-bottom, 0px));
}

.contact-bar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 90;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  padding-bottom: env(safe-area-inset-bottom, 0px);
  background-color: var(--color-primary);
  box-shadow: 0 -6px 20px -8px rgba(27, 43, 75, 0.35);
  transition: transform 0.25s ease, visibility 0.25s;
}

.contact-bar__btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.25rem;
  min-height: var(--contact-bar-height);
  padding: 0.375rem 0.25rem;
  color: #fff;
  font-size: var(--text-sm);
  font-weight: 600;
  line-height: 1.2;
  text-align: center;
  transition: background-color 0.2s ease;
}

.contact-bar__btn + .contact-bar__btn {
  border-left: 1px solid rgba(255, 255, 255, 0.16);
}

.contact-bar__btn:hover {
  background-color: var(--color-accent);
}

.contact-bar__btn:focus-visible {
  outline: 2px solid var(--color-accent-light);
  outline-offset: -4px;
}

.contact-bar__icon {
  flex-shrink: 0;
  width: 1.375rem;
  height: 1.375rem;
}

/* Ausblenden: Tastatur offen (Formularfeld aktiv) oder Handymenü offen */
body.is-typing .contact-bar,
body.is-menu-open .contact-bar {
  transform: translateY(100%);
  visibility: hidden;
}

/* Querformat Handy: Symbol und Text nebeneinander, 48px hoch */
@media (orientation: landscape) and (max-height: 500px) {
  .contact-bar__btn {
    flex-direction: row;
    gap: 0.5rem;
    padding: 0.25rem;
  }
}

@media (min-width: 1360px) {
  body {
    padding-bottom: 0;
  }

  .contact-bar {
    left: auto;
    right: 1rem;
    top: 50%;
    bottom: auto;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    padding: 0;
    background: none;
    box-shadow: none;
    transform: translateY(-50%);
  }

  body.is-typing .contact-bar,
  body.is-menu-open .contact-bar {
    transform: translateY(-50%);
    visibility: visible;
  }

  .contact-bar__btn {
    width: var(--contact-fab-size);
    height: var(--contact-fab-size);
    min-height: 0;
    padding: 0;
    border-radius: 50%;
    background-color: var(--color-primary);
    box-shadow: 0 8px 20px -8px rgba(27, 43, 75, 0.55);
  }

  .contact-bar__btn + .contact-bar__btn {
    border-left: 0;
  }

  .contact-bar__btn:focus-visible {
    outline-offset: 3px;
  }

  .contact-bar__icon {
    width: 1.25rem;
    height: 1.25rem;
  }

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

  /* Hero-Karte (Startseite, Standorte) an den Container ausrichten,
     damit sie nicht an die Kontakt-Buttons stößt */
  .hero__card {
    margin-right: max(3.75rem, calc((100vw - var(--container-max)) / 2 + 1.25rem));
  }
}

/* ==========================================
   TEXTLINK (ersetzt Kontakt-Buttons im Inhalt, A4)
========================================== */
.text-link {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  min-height: 2.75rem;
  color: var(--color-accent);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: color 0.2s ease;
}

.text-link:hover {
  color: var(--color-primary);
}

/* ==========================================
   KENNZAHLEN-KACHELN (B5)
   Handy: Kacheln untereinander, Zahl über der Beschriftung –
   so hat die Beschriftung die volle Breite und bricht nie im Wort
========================================== */
@media (max-width: 639px) {
  .trust__stats {
    grid-template-columns: minmax(0, 1fr);
    gap: 0.75rem;
    margin-top: 2.5rem;
  }

  .trust__stat {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.375rem;
    padding: 1rem 1.25rem;
    text-align: left;
  }

  .trust__stat-value {
    margin-bottom: 0;
    font-size: var(--text-2xl);
    white-space: nowrap;
  }
}

@media (min-width: 640px) {
  .trust__stat-value {
    font-size: clamp(1.5rem, 3vw, 2rem);
    white-space: nowrap;
  }
}

/* ==========================================
   SCHRIFTGRÖSSEN (B7)
   Mehrzeiliger Fließtext mind. 16px, Etiketten mind. 14px,
   Galerie-Beschriftungen mind. 13px, KI-Hinweis mind. 12px
========================================== */
.service-card__text,
.step__text,
.before-after__desc,
.footer__brand-text,
.footer__address,
.announce-card__text,
.areas__text,
.edge-card__text,
.edge-note,
.material-card__text,
.material-card__desc,
.material-card__infobox,
.material-card__suitability-text,
.process__text,
.timeline__desc,
.pw-gate__text,
.kuecheck__list-item,
.service__list-item,
.service__note,
.weitere__note,
.variant-column__text,
.legal__info-box,
.info-note,
.dekor-footnote,
.finder__result-tip,
.pros-cons__item,
.form__privacy,
.form__subtitle,
.status-banner,
.anfahrt-ergebnis {
  font-size: var(--text-base);
}

.hero__eyebrow,
.fronten-hero__eyebrow,
.step__index,
.trust__stat-label,
.testimonial-card__source,
.service-card__number,
.areas__tag,
.anfahrt-label,
.announce-card__badge,
.edge-card__tag,
.finder__option-letter,
.footer__bottom,
.footer__legal-link,
.footer__logo-tagline,
.kuecheck__price-note,
.material-card__chip,
.material-card__meta,
.material-card__number,
.material-card__suitability-label,
.material-card__tag,
.pw-gate__eyebrow,
.timeline__year {
  font-size: var(--text-sm);
}

.dekor-item__tag,
.compare-bar {
  font-size: var(--text-xs);
}

@media (min-width: 640px) {
  .compare-bar {
    font-size: var(--text-sm);
  }
}

.ki-label {
  font-size: 0.75rem;
}

/* ==========================================
   TIPPFLÄCHEN (B8) – mind. 44px
========================================== */
.footer__links {
  gap: 0;
}

.footer__link,
.footer__legal-link,
.footer__address a {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
}

.footer__legal-links {
  flex-wrap: wrap;
  justify-content: center;
  column-gap: 1.5rem;
  row-gap: 0;
}

/* Sprung-Buttons (leistungen, faq, preise), Brotkrumen (acryl, lack,
   melamin), "Zum YouTube-Kanal" (über uns), "Zurück" (Frontenfinder) */
.page-header__nav-link,
.timeline__link,
.finder__back-btn {
  min-height: 2.75rem;
}

.breadcrumb {
  row-gap: 0;
}

.breadcrumb a {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
}

/* YouTube-Link im Footer */
.footer__yt {
  gap: 0.5rem;
}