/* ==========================================
   Handwerker Langenberg — Header compact tweaks
   Änderungen:
   - Header-Padding reduziert, flex-basiertes Layout, min-height für Touch.
   - Logo responsiv mit clamp() skaliert.
   - Entfernte/verminderte !important-Einsätze zugunsten spezifischer Selektoren.
   - Skip-link & Fokus-Styling für bessere Accessibility.
   - Neue Regel: header .site-logo (spezifisch) stellt sicher, dass das Logo
     auf allen Seiten identisch angezeigt wird und Tailwind-Höhenklassen überschreibt.
   ========================================== */

/* Sicherstellen, dass Header-Logo überall gleich groß ist (höhere Spezifität) */
header .site-logo,
header img.site-logo,
.site-header .site-logo {
  display: block;
  height: clamp(3rem, 5.5vw, 4.75rem);
  max-height: 80px;
  width: auto;
  object-fit: contain;
  margin: 0;
  line-height: 1;
}

/* Grundstruktur: kompakter Header, zentrierte Elemente */
header,
.site-header,
nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.125rem 1rem; /* sehr kompakt, aber horizontales Padding bleibt */
  min-height: 48px;      /* Touch-freundliche Mindesthöhe */
  gap: 0.75rem;
  transition: padding .18s ease, box-shadow .18s ease;
}

/* Desktop leicht andere Werte (noch kompakt) */
@media (min-width: 768px) {
  header,
  .site-header,
  nav {
    padding: 0.25rem 1.25rem;
    min-height: 56px;
  }
}

/* Logo: größer wahrnehmbar, aber responsiv und keine harten Sprünge */
nav img,
.site-logo,
.logo img {
  display: block;
  height: clamp(3rem, 5.5vw, 4.75rem); /* skaliert zwischen mobile und desktop */
  max-height: 80px;
  object-fit: contain;
  margin: 0;
  line-height: 1;
  /* keine !important hier — benutzt spezifische Selektoren */
}

/* Kontaktlinks (Telefon, Mail, Adresse) — sichtbar und gut klickbar */
a[href^="tel:"],
a[href^="mailto:"],
a.address-link,
.address a,
.adr a {
  color: #ffffff;
  font-weight: 700;
  text-decoration: none;
  padding: 0.25rem 0.35rem; /* erleichtert Tap-Targets */
  border-radius: 6px;
  transition: color .18s ease, background-color .18s ease, text-decoration-color .18s ease;
}

/* Hover/Active */
a[href^="tel:"]:hover,
a[href^="mailto:"]:hover,
.address a:hover,
.adr a:hover,
a.address-link:hover {
  color: #e6e6e6;
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* Automatische Umfärbung auf hellen Hintergründen (spezifische Klassen) */
.bg-white a[href^="tel:"],
.bg-white a[href^="mailto:"],
.bg-white .address a,
.bg-white .adr a,
.bg-white a.address-link,
.bg-gray-50 a[href^="tel:"],
.bg-gray-50 a[href^="mailto:"],
.bg-gray-50 .address a,
.bg-gray-50 .adr a,
.bg-gray-50 a.address-link {
  color: var(--primary);
}

/* SVG/Icon-Support: Icons erben Textfarbe */
a[href^="tel:"] svg,
a[href^="mailto:"] svg,
.address a svg,
.adr a svg,
a.address-link svg {
  color: inherit;
  fill: currentColor;
}

/* Button-Look für Rück-Buttons / CTA (angepasst auf Primärfarbe) */
.bg-blue-600 {
  background-color: var(--primary);
  color: var(--primary-foreground);
  border-color: var(--primary);
  font-weight: 600;
  padding: .45rem .8rem;
  border-radius: 8px;
}
.hover\:bg-blue-700:hover {
  background-color: color-mix(in oklab, var(--primary) 90%, black);
  color: var(--primary-foreground);
  border-color: color-mix(in oklab, var(--primary) 90%, black);
}

/* Skip link für bessere Keyboard-Navigation */
.skip-link {
  position: absolute;
  left: -9999px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
}
.skip-link:focus,
.skip-link:active {
  left: 1rem;
  top: 1rem;
  width: auto;
  height: auto;
  padding: 0.5rem 0.75rem;
  background: var(--primary);
  color: var(--primary-foreground);
  border-radius: 6px;
  z-index: 9999;
  box-shadow: 0 6px 18px rgba(0,0,0,.08);
}

/* Optional: kompakte Header-Variante (kann per JS beim Scrollen getoggelt werden) */
.site-header {
  position: sticky;
  top: 0;
  z-index: 40;
  background: var(--background);
  backdrop-filter: blur(4px); /* dezenter Glass-Effekt falls gewünscht */
}

/* Wenn .shrink gesetzt wird (kleiner Header) */
.site-header.shrink {
  padding: 0.075rem 1rem;
  min-height: 44px;
  box-shadow: 0 6px 18px rgba(0,0,0,.06);
}

/* Fokus-Styles für Links/Buttons sichtbar halten (nicht entfernen) */
a:focus,
button:focus,
input:focus {
  outline: 3px solid color-mix(in oklab, var(--primary) 25%, transparent);
  outline-offset: 2px;
  border-radius: 6px;
}

/* Kleine Utilities: mobile spacing / fallback */
@media (max-width: 480px) {
  nav img,
  .site-logo {
    height: clamp(2.5rem, 12vw, 3.25rem);
  }

  header,
  .site-header,
  nav {
    padding-left: 0.75rem;
    padding-right: 0.75rem;
    gap: .5rem;
  }
}

/* Hinweis: Viele vorherige globalen !important Regeln entfernt.
   Falls bestimmte Styles weiterhin von anderen Styles überschrieben werden,
   nutze stattdessen spezifischere Selektoren wie `.site-header .logo img` */