/* Gemeinsame Regeln für alle Seiten. Wird nach Tailwind geladen. */

/* Schriften aus dem Projekt statt von Google, damit keine IP-Adressen an Google gehen.
   Inter und Playfair Display, beide SIL Open Font License 1.1. */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('/fonts/inter-latin-wght.woff2') format('woff2');
}
@font-face {
  font-family: 'Playfair Display';
  font-style: normal;
  font-weight: 400 900;
  font-display: swap;
  src: url('/fonts/playfair-latin-wght.woff2') format('woff2');
}
@font-face {
  font-family: 'Playfair Display';
  font-style: italic;
  font-weight: 400 900;
  font-display: swap;
  src: url('/fonts/playfair-latin-wght-italic.woff2') format('woff2');
}

/* Anker landen nicht mehr unter der festen Navigation */
html { scroll-padding-top: 6rem; }

h1, h2, h3 { text-wrap: balance; }
p { text-wrap: pretty; }

/* Sichtbarer Fokus für die Tastaturbedienung */
:where(a, button, summary, input, select, textarea):focus-visible {
  outline: 3px solid #0071ba;
  outline-offset: 2px;
  border-radius: 4px;
}
.dark :where(a, button, summary, input, select, textarea):focus-visible,
footer :where(a, button):focus-visible {
  outline-color: #38bdf8;
}

/* Keine Bewegung, wenn sie im Betriebssystem abgeschaltet ist */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto !important; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    transition-delay: 0s !important;
  }
}

/* Footer: Kontraste auf Schwarz und Umbruch der Linkzeile bei 320 px.
   Der Abstand unten hält die Rechtstexte frei vom Termin-Button. */
footer .text-brand-blue { color: #38bdf8; }
footer .text-gray-600,
footer .text-gray-500,
footer .text-neutral-500 { color: #9ca3af; }
footer .flex.gap-6 { flex-wrap: wrap; row-gap: 0.5rem; }
footer.pb-12 { padding-bottom: 7rem; }

/* Markenblau ist auf dunklem Grund zu dunkel */
.dark .text-brand-blue,
.bg-gray-900 .text-brand-blue,
.bg-neutral-900 .text-brand-blue,
.bg-brand-black .text-brand-blue,
.bg-bora-dark .text-brand-blue,
.bg-berbel-dark .text-brand-blue,
.bg-bosch-carbon .text-brand-blue,
.bg-blanco-anthrazit .text-brand-blue { color: #38bdf8; }
.dark .bg-white.text-brand-blue { color: #0071ba; }

/* Weiß auf Sky-600 liegt unter 4.5:1, Markenblau erreicht 5.2:1 */
a.bg-sky-600 { background-color: #0071ba; }
a.bg-sky-600:hover { background-color: #005a94; }

/* Touch-Ziele im Footer und in den FAQ */
@media (pointer: coarse) {
  footer li a,
  footer .flex.gap-6 a { display: inline-block; padding-block: 0.625rem; }
  summary { padding-block: 0.5rem; }
}

/* Stadtseiten: Bewertungskarten passen auch bei 320 px, Kontraste reichen aus */
:root { --gray-500: #4b5563; }
.reviews-grid { grid-template-columns: repeat(auto-fit, minmax(min(310px, 100%), 1fr)); }
.btn-whatsapp { color: #0a0a0a; }