/* ============================================================
   layout.css  –  Header, Navigation, Footer
   ============================================================ */

/* ── Site Wrapper ────────────────────────────────────────────── */
.site-wrapper { display: flex; flex-direction: column; min-height: 100vh; }
.site-main    { flex: 1; }
#main-content { background-color: var(--color-surface); }

/* ── Header ──────────────────────────────────────────────────── */
.site-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  height: var(--header-height);
  background-color: transparent;
  border-bottom: 1px solid rgba(255,255,255,0.15);
  transition: background-color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}
.site-header.is-scrolled {
  background-color: var(--color-white);
  border-bottom-color: var(--color-border);
  box-shadow: var(--shadow-sm);
}
.site-header.is-opaque {
  background-color: var(--color-white);
  border-bottom-color: var(--color-border);
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 100%;
  max-width: var(--max-width);
  margin-inline: auto;
  padding-inline: var(--header-px);
  gap: var(--space-6);
}

/* ── Logo ────────────────────────────────────────────────────── */
.site-logo {
  flex-shrink: 0; text-decoration: none;
  display: flex; align-items: center; z-index: 1;
}

/* Beide Logos immer geladen, Sichtbarkeit per CSS gesteuert */
.logo-img {
  height: 50px; width: auto; display: block;
  transition: opacity var(--transition-base);
}

/* Standard: weißes Logo sichtbar, cmyk versteckt */
.logo-img--negative { opacity: 1; position: static; }
.logo-img--cmyk     { opacity: 0; position: absolute; pointer-events: none; }

/* Weißer Header (gescrollt oder Unterseite): cmyk sichtbar, negatives versteckt */
.site-header.is-scrolled .logo-img--negative,
.site-header.is-opaque   .logo-img--negative { opacity: 0; position: absolute; pointer-events: none; }
.site-header.is-scrolled .logo-img--cmyk,
.site-header.is-opaque   .logo-img--cmyk     { opacity: 1; position: static; pointer-events: auto; }

/* ── Desktop Navigation ──────────────────────────────────────── */
.site-nav { display: flex; align-items: center; gap: 0; }

.nav-link {
  font-family: var(--font-display);
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  letter-spacing: 0.04em;
  color: rgba(255,255,255,0.85);
  text-decoration: none;
  padding: var(--space-3) var(--space-4);
  position: relative;
  transition: color var(--transition-fast);
  white-space: nowrap;
}
.site-header.is-scrolled .nav-link,
.site-header.is-opaque   .nav-link { color: var(--color-text); }

.nav-link::after {
  content: ''; position: absolute;
  bottom: 0; left: var(--space-4); right: var(--space-4);
  height: 1px; background-color: var(--color-accent);
  transform: scaleX(0); transform-origin: left;
  transition: transform var(--transition-base);
}
.nav-link:hover::after, .nav-link.is-active::after { transform: scaleX(1); }
.nav-link:hover, .nav-link.is-active { color: var(--color-black); }
.site-header:not(.is-scrolled):not(.is-opaque) .nav-link:hover,
.site-header:not(.is-scrolled):not(.is-opaque) .nav-link.is-active { color: var(--color-white); }

.nav-link--cta {
  padding: 9px var(--space-5);
  border: 1px solid rgba(255,255,255,0.5);
  margin-left: var(--space-3);
  color: var(--color-white) !important;
  transition: background-color var(--transition-base), color var(--transition-base), border-color var(--transition-base);
}
.nav-link--cta::after { display: none; }
.nav-link--cta:hover { background-color: var(--color-white); color: var(--color-black) !important; border-color: var(--color-white); }
.site-header.is-scrolled .nav-link--cta,
.site-header.is-opaque   .nav-link--cta { border-color: var(--color-black); color: var(--color-black) !important; }
.site-header.is-scrolled .nav-link--cta:hover,
.site-header.is-opaque   .nav-link--cta:hover { background-color: var(--color-black); color: var(--color-white) !important; }

/* ── Dropdown ────────────────────────────────────────────────── */
.nav-item { position: relative; }
.nav-dropdown {
  position: absolute;
  top: calc(100% + 8px);   /* Abstand zum Link */
  left: -var(--space-4);
  min-width: 220px;
  background-color: var(--color-white);
  border: 1px solid var(--color-border-light);
  box-shadow: var(--shadow-md);
  opacity: 0; pointer-events: none;
  transition: opacity 0.18s ease, transform 0.18s ease;
  transform: translateY(-4px);
  z-index: 200;
}
/* Unsichtbare Brücke: pseudo-element überbrückt den Spalt zwischen Link und Dropdown */
.nav-item::before {
  content: '';
  position: absolute;
  top: 100%;
  left: -20px;
  right: -20px;
  height: 16px;   /* deckt den Spalt ab */
  background: transparent;
  z-index: 201;
}
.nav-item:hover .nav-dropdown,
.nav-item:focus-within .nav-dropdown {
  opacity: 1;
  pointer-events: all;
  transform: translateY(0);
}
.nav-dropdown a {
  display: block; padding: var(--space-3) var(--space-5);
  font-size: var(--text-xs); font-weight: var(--weight-regular);
  color: var(--color-text);
  border-bottom: 1px solid var(--color-border-light);
  transition: background-color var(--transition-fast), padding-left var(--transition-fast);
}
.nav-dropdown a:last-child { border-bottom: none; }
.nav-dropdown a:hover { background-color: var(--color-surface); padding-left: var(--space-6); }

/* ── Hamburger ───────────────────────────────────────────────── */
.nav-toggle {
  display: none; flex-direction: column; gap: 5px;
  cursor: pointer; padding: var(--space-3);
  background: none; border: none;
  min-width: 44px; min-height: 44px; /* Touch-Target */
  align-items: center; justify-content: center;
}
.nav-toggle span {
  display: block; width: 22px; height: 1.5px;
  background-color: var(--color-white);
  transition: all var(--transition-base); transform-origin: center;
}
.site-header.is-scrolled .nav-toggle span,
.site-header.is-opaque   .nav-toggle span { background-color: var(--color-text); }

.nav-toggle.is-open span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.nav-toggle.is-open span:nth-child(2) { opacity: 0; transform: scaleX(0); }
.nav-toggle.is-open span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

/* ── Mobile Navigation ───────────────────────────────────────── */
.mobile-nav {
  /* Immer im DOM, aber unsichtbar – kein display:none/flex-Toggle nötig */
  display: flex;
  flex-direction: column;
  position: fixed;
  top: var(--header-height); left: 0; right: 0; bottom: 0;
  background-color: var(--color-white);
  z-index: 99;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: var(--space-6) var(--container-px) var(--space-16);
  /* Standardmäßig unsichtbar und nicht klickbar */
  opacity: 0;
  visibility: hidden;
  transform: translateX(4%);
  pointer-events: none;
  transition: opacity 0.25s ease, transform 0.25s ease, visibility 0.25s;
}
.mobile-nav.is-open {
  opacity: 1;
  visibility: visible;
  transform: translateX(0);
  pointer-events: auto;
}

.mobile-nav-link {
  display: block;
  font-family: var(--font-display);
  font-size: 1.375rem;
  font-weight: var(--weight-medium);
  color: var(--color-text);
  padding: var(--space-5) 0;
  border-bottom: 1px solid var(--color-border-light);
  text-decoration: none;
  transition: color var(--transition-fast), padding-left var(--transition-fast);
}
.mobile-nav-link:hover, .mobile-nav-link.is-active {
  color: var(--color-brand); padding-left: var(--space-3);
}
/* Unterpunkte im Mobile-Menü */
.mobile-nav-sub {
  padding: var(--space-2) 0 var(--space-2) var(--space-6);
}
.mobile-nav-sub a {
  display: block;
  font-size: var(--text-sm); font-weight: var(--weight-regular);
  color: var(--color-text-muted); padding: var(--space-2) 0;
  text-decoration: none; border-bottom: 1px solid var(--color-border-light);
  transition: color var(--transition-fast);
}
.mobile-nav-sub a:hover { color: var(--color-text); }

/* ── Header-Spacer ───────────────────────────────────────────── */
.header-spacer { height: var(--header-height); }

/* ── Footer ──────────────────────────────────────────────────── */
/* ── Footer ──────────────────────────────────────────────────── */
/* Hintergrund: sehr dunkles Anthrazit (nicht reines Schwarz – weicher) */
/* ── Footer ──────────────────────────────────────────────────── */
.site-footer {
  background-color: #1a1a18;
  color: #a0a09c;
  padding-block: var(--space-20) var(--space-10);
}

/* 3-Spalten-Raster: breite Markenspalte links */
.footer-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: var(--space-16);
}

/* ── Logo & Tagline ──────────────────────────────────────────── */
.footer-brand {
  max-width: 400px;
}
.footer-logo {
  display: block;
  height: auto;
  max-width: 220px;
  width: 100%;
  margin-bottom: var(--space-6);
  opacity: 0.88;
  transition: opacity var(--transition-fast);
}
.footer-logo:hover { opacity: 1; }

.footer-tagline {
  font-size: var(--text-sm);
  font-weight: var(--weight-light);
  line-height: var(--leading-wide);
  color: #787874;        /* sichtbar, aber dezent */
  margin: 0;
}


/* ── Spalten-Überschriften ───────────────────────────────────── */
.footer-heading {
  font-family: var(--font-display);
  font-size: 0.625rem;          /* 10px – sehr schmal, elegant */
  font-weight: var(--weight-semi);
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: #6b6b67;               /* Grau – Hierarchie klar */
  margin-bottom: var(--space-6);
  padding-bottom: var(--space-3);
  border-bottom: 1px solid rgba(255,255,255,0.06);
}

/* ── Navigation-Links ────────────────────────────────────────── */
.footer-links {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.footer-links a {
  font-size: var(--text-sm);     /* 16px – gut lesbar */
  font-weight: var(--weight-light);
  color: #9c9c98;                /* deutlich sichtbarer Grauton */
  text-decoration: none;
  transition: color var(--transition-fast), padding-left var(--transition-fast);
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
}
.footer-links a::before {
  content: '';
  display: inline-block;
  width: 14px; height: 1px;
  background: currentColor;
  opacity: 0;
  transition: opacity var(--transition-fast), width var(--transition-fast);
  flex-shrink: 0;
}
.footer-links a:hover {
  color: #e8e8e4;
  padding-left: 4px;
}
.footer-links a:hover::before { opacity: 0.5; }

/* ── Kontakt-Block ───────────────────────────────────────────── */
.footer-address {
  display: flex;
  flex-direction: column;
  gap: 0;
  font-style: normal;
}
.footer-contact-item {
  display: block;
  font-size: var(--text-sm);
  font-weight: var(--weight-light);
  color: #9c9c98;
  line-height: var(--leading-normal);
  padding-block: var(--space-3);
  border-bottom: 1px solid rgba(255,255,255,0.04);
}
.footer-contact-item:last-child { border-bottom: none; }
.footer-contact-item--link {
  text-decoration: none;
  transition: color var(--transition-fast);
}
.footer-contact-item--link:hover { color: #e8e8e4; }

/* ── Trennlinie ──────────────────────────────────────────────── */
.footer-rule {
  border: none;
  border-top: 1px solid rgba(255,255,255,0.07);
  margin-block: var(--space-12) var(--space-8);
}

/* ── Footer-Bottom: Copyright + Rechtliches ─────────────────── */
.footer-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-6);
  flex-wrap: wrap;
}
.footer-copy {
  font-size: var(--text-xs);
  color: #4a4a47;               /* sehr dunkel – unauffällig aber lesbar */
  font-weight: var(--weight-light);
}
.footer-legal {
  display: flex;
  gap: var(--space-6);
}
.footer-legal a {
  font-size: var(--text-xs);
  color: #5a5a57;
  text-decoration: none;
  transition: color var(--transition-fast);
}
.footer-legal a:hover { color: #c0c0bc; }

/* ── Footer Instagram-Spalte ─────────────────────────────────── */
.footer-instagram-col {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  text-decoration: none;
  color: #9c9c98;
  margin-top: var(--space-2);
  transition: color var(--transition-fast);
}
.footer-instagram-col:hover { color: #e8e8e4; }
.footer-instagram-col__logo {
  width: 36px;
  height: 36px;
  flex-shrink: 0;
  margin-top: 2px;
  transition: transform var(--transition-fast);
}
.footer-instagram-col:hover .footer-instagram-col__logo {
  transform: scale(1.08);
}
.footer-instagram-col__text {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.footer-instagram-col__label {
  font-size: var(--text-xs);
  font-weight: var(--weight-light);
  line-height: var(--leading-wide);
  color: #787874;
}
.footer-instagram-col__handle {
  font-size: var(--text-sm);
  font-weight: var(--weight-light);
  color: inherit;
}

/* ════════════════════════════════════════════════════════════
   RESPONSIVE
   ════════════════════════════════════════════════════════════ */

/* ── Tablet Landscape (≤1024px) ──────────────────────────────── */
@media (max-width: 1024px) {
  .site-nav    { display: none; }
  .nav-toggle  { display: flex; }

  .footer-grid {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-10);
  }
  .footer-brand { max-width: 100%; grid-column: span 2; }
}

/* ── Tablet Portrait (≤768px) ────────────────────────────────── */
@media (max-width: 768px) {
  .footer-grid {
    grid-template-columns: 1fr;
    gap: var(--space-8);
    display: flex;
    flex-direction: column;
  }
}

/* ── Partner-Logos ──────────────────────────────────────────── */
.partner-logos {
  padding-block: 80px;
  border-top: 1px solid var(--color-border-light);
}
.partner-logos__label {
  font-size: var(--text-h6);
  text-transform: uppercase;
  letter-spacing: var(--tracking-label);
  color: var(--color-text-subtle);
  text-align: center;
  margin-bottom: var(--space-8);
}
.partner-logos__grid {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 4rem;
  flex-wrap: wrap;
}
.partner-logos__img {
  height: 50px;
  width: auto;
  object-fit: contain;
  /*filter: grayscale(1) opacity(0.5);*/
  transition: filter 0.3s ease;
}
.partner-logos__img:hover {
  filter: grayscale(0) opacity(1);
}
@media (max-width: 768px) {
  .partner-logos__grid { gap: var(--space-8) var(--space-6); display: flex; flex-direction: column;  }
  .partner-logos__img  { height: 49px; margin: 6px 0px; }
  .partner-logos__img[alt="PREFA-Logo"]  { height: 77px; margin-bottom: 0px; }
  .partner-logos__img[alt="ROTO-Logo"]  { height: 64px; }
}
@media (max-width: 480px) {
  .partner-logos__grid { gap: var(-- space-6) var(--space-5); display: flex; flex-direction: column; }
  .partner-logos__img  { height: 35px; margin: 5px 0px; }
  .partner-logos__img[alt="PREFA-Logo"]  { height: 77px; margin-bottom: 0px; }
  .partner-logos__img[alt="ROTO-Logo"]  { height: 64px; }
}

/* ── Smartphone (≤480px) ─────────────────────────────────────── */
@media (max-width: 480px) {
  .mobile-nav-link { font-size: 1.25rem; padding: var(--space-4) 0; }
  .footer-bottom   { flex-direction: column; align-items: flex-start; gap: var(--space-4); }
  .footer-legal    { gap: var(--space-4); }
}