/* Lokale Google Fonts — DSGVO-konform, kein externes Tracking */

@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../fonts/open-sans-500-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../fonts/open-sans-700-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url('../fonts/roboto-300-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/roboto-400-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../fonts/roboto-500-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../fonts/roboto-700-normal.woff2') format('woff2');
}

/* Offset für Sprung-Anker, damit Ziel nicht vom fixed Header (h-20) verdeckt wird */
:target,
[id="parkett-arten"],
[id="fliesen-arten"],
[id="abdichtung"],
[id="designboden-arten"] {
  scroll-margin-top: 6rem;
}

/* group-open:rotate-90 — nicht im Tailwind-Build, manuell ergänzt für Mobile-Menu-Accordion */
.group-open\:rotate-90:is(:where(.group):is([open]) *) {
  rotate: 90deg;
}

/* Native <summary>-Marker auf Webkit verstecken */
summary::-webkit-details-marker { display: none; }

/* border-black/5 — nicht im Tailwind-Build, manuell ergänzt */
.border-black\/5 { border-color: rgba(0, 0, 0, 0.05); }

/* Markenfarben (Mobile-Flyout) */
:root {
  --brand-brown: #A97C50;
  --brand-gold:  #C89B3C;
  --brand-dark:  #2B211C;
}
.text-brand-brown { color: var(--brand-brown); }
.text-brand-gold  { color: var(--brand-gold); }
.text-brand-dark  { color: var(--brand-dark); }
.hover\:text-brand-gold:hover  { color: var(--brand-gold); }
.hover\:text-brand-brown:hover { color: var(--brand-brown); }