/* ---------- Header ---------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  border-bottom: 1px solid var(--color-line-dark);
  background: rgba(25, 28, 32, 0.95);
  backdrop-filter: blur(4px);
}

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding-block: 1rem;
}

.site-header__logo img {
  height: 2.25rem;
  width: auto;
}

@media (min-width: 768px) {
  .site-header__logo img {
    height: 2.5rem;
  }
}

.site-nav {
  display: none;
}

@media (min-width: 1024px) {
  .site-nav {
    display: block;
  }
}

.site-nav__list {
  display: flex;
  align-items: center;
  gap: 2rem;
}

.site-nav__item {
  position: relative;
}

.site-nav__link {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  font-family: var(--font-sans);
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--color-cream-soft);
  transition: color 0.15s ease;
}

.site-nav__link:hover {
  color: var(--color-cream);
}

.site-nav__chevron {
  margin-top: 1px;
  opacity: 0.6;
}

.site-nav__dropdown {
  visibility: hidden;
  position: absolute;
  left: 50%;
  top: 100%;
  z-index: 10;
  width: 14rem;
  padding-top: 0.75rem;
  transform: translateX(-50%);
  opacity: 0;
  transition: opacity 0.15s ease;
}

/* Maus: Hover. Tastatur: sichtbarer Fokus. Touch: .is-open aus js/site.js (erster Tipp oeffnet, zweiter folgt dem Link). */
@media (hover: hover) {
  .site-nav__item--dropdown:hover .site-nav__dropdown {
    visibility: visible;
    opacity: 1;
  }
}

.site-nav__item--dropdown:has(:focus-visible) .site-nav__dropdown,
.site-nav__item--dropdown.is-open .site-nav__dropdown {
  visibility: visible;
  opacity: 1;
}

.site-nav__dropdown::before {
  content: "";
  display: block;
  border-radius: 6px;
  border: 1px solid var(--color-line-dark);
  background: var(--color-dark-2);
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
  padding: 0.5rem;
  position: absolute;
  inset: 0.75rem 0 0 0;
  z-index: -1;
}

.site-nav__dropdown {
  display: flex;
  flex-direction: column;
}

.site-nav__dropdown-link {
  display: block;
  border-radius: 4px;
  padding: 0.5rem 0.75rem;
  font-family: var(--font-sans);
  font-size: 0.875rem;
  color: var(--color-cream-soft);
  transition: background 0.15s ease, color 0.15s ease;
}

.site-nav__dropdown-link:hover {
  background: rgba(255, 255, 255, 0.05);
  color: var(--color-cream);
}

.site-nav__dropdown-label {
  padding: 0.625rem 0.75rem 0.25rem;
  font-family: var(--font-sans);
  font-size: 0.6875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-cream-mute);
}

.site-header__cta {
  display: none;
  border-radius: 6px;
  background: linear-gradient(180deg, #2bffd0, #00f5c4);
  padding: 0.625rem 1.25rem;
  font-family: var(--font-display);
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--color-dark);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 1px 2px rgba(0, 0, 0, 0.16), 0 6px 16px rgba(0, 0, 0, 0.2);
  transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}

.site-header__cta:hover {
  transform: translateY(-2px);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.45), 0 2px 4px rgba(0, 0, 0, 0.18), 0 12px 24px rgba(0, 0, 0, 0.24);
}

.site-header__cta:active {
  transform: translateY(0);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3), 0 1px 2px rgba(0, 0, 0, 0.18);
}

/* Kontakt-Button auf allen Groessen sichtbar (Wunsch der Nutzerin, 10.11.2026).
   Unter 1024 px kompakt und so hoch wie der Menue-Button. */
.site-header__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  white-space: nowrap;
}

@media (max-width: 1023px) {
  .site-header__cta {
    height: 2.5rem;
    padding: 0 0.875rem;
    font-size: 0.8125rem;
  }
}

.site-header__toggle {
  display: flex;
  height: 2.5rem;
  width: 2.5rem;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  border: 1px solid var(--color-line-dark);
  background: transparent;
  color: var(--color-cream);
  cursor: pointer;
}

@media (min-width: 1024px) {
  .site-header__toggle {
    display: none;
  }
}

.site-header__toggle-icon-close {
  display: none;
}

.site-header__toggle[aria-expanded="true"] .site-header__toggle-icon-open {
  display: none;
}

.site-header__toggle[aria-expanded="true"] .site-header__toggle-icon-close {
  display: block;
}

.mobile-nav {
  border-top: 1px solid var(--color-line-dark);
  background: var(--color-dark);
  padding: 1rem 1.5rem;
  /* Das Menue steckt im klebenden Header. Ist es hoeher als der Bildschirm,
     waere der untere Teil (Telefon, Kontakt) sonst nie erreichbar. Daher
     hoechstens bis zum Bildschirmrand und darin scrollbar. 4.75rem = Hoehe
     der Kopfzeile (76 px inklusive Rand). */
  max-height: calc(100vh - 4.75rem);
  max-height: calc(100dvh - 4.75rem);
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

@media (min-width: 1024px) {
  .mobile-nav {
    display: none !important;
  }
}

.mobile-nav__list {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.mobile-nav__link {
  display: block;
  border-radius: 6px;
  padding: 0.625rem 0.75rem;
  font-family: var(--font-sans);
  font-size: 1rem;
  font-weight: 500;
  color: var(--color-cream);
}

.mobile-nav__sublist {
  margin-left: 0.75rem;
  border-left: 1px solid var(--color-line-dark);
  padding-left: 0.75rem;
}

.mobile-nav__sublink {
  display: block;
  border-radius: 4px;
  padding: 0.5rem 0.75rem;
  font-family: var(--font-sans);
  font-size: 0.875rem;
  color: var(--color-cream-soft);
}

.mobile-nav__subhead {
  padding: 0.625rem 0.75rem 0.125rem;
  font-family: var(--font-sans);
  font-size: 0.6875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-cream-mute);
}

.mobile-nav__cta-item {
  margin-top: 0.5rem;
}

.mobile-nav__cta {
  display: block;
  border-radius: 6px;
  background: linear-gradient(180deg, #2bffd0, #00f5c4);
  padding: 0.625rem 1rem;
  text-align: center;
  font-family: var(--font-display);
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--color-dark);
}

/* ---------- Footer ---------- */

.site-footer {
  border-top: 1px solid var(--color-line-dark);
  background: var(--color-dark);
  padding-block: 3.5rem;
  color: var(--color-cream);
}

.site-footer__top {
  display: flex;
  flex-direction: column;
  gap: 2.5rem;
}

@media (min-width: 768px) {
  .site-footer__top {
    flex-direction: row;
    justify-content: space-between;
  }
}

.site-footer__brand {
  max-width: 20rem;
}

.site-footer__logo {
  height: 1.5rem;
  width: auto;
}

.site-footer__claim {
  margin-top: 1rem;
  font-size: 0.875rem;
  line-height: 1.6;
  color: var(--color-cream-soft);
}

.site-footer__nav {
  display: flex;
  flex-wrap: wrap;
  column-gap: 2rem;
  row-gap: 0.75rem;
  align-content: flex-start;
}

.site-footer__link {
  font-family: var(--font-sans);
  font-size: 0.875rem;
  color: var(--color-cream-soft);
  transition: color 0.15s ease;
}

.site-footer__link:hover {
  color: var(--color-cream);
}

.site-footer__link--button {
  border: none;
  background: none;
  padding: 0;
  cursor: pointer;
}

.site-footer__wissen {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  font-family: var(--font-sans);
  font-size: 0.875rem;
  color: var(--color-cream-soft);
}

.site-footer__wissen-label {
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-cream-mute);
}

.site-footer__bottom {
  margin-top: 3rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  border-top: 1px solid var(--color-line-dark);
  padding-top: 1.5rem;
  font-family: var(--font-sans);
  font-size: 0.75rem;
  color: var(--color-cream-mute);
}

@media (min-width: 640px) {
  .site-footer__bottom {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }
}

.site-footer__legal {
  display: flex;
  gap: 1rem;
}

/* ---------- Section shell ---------- */

.section {
  padding-block: 6rem;
}

@media (min-width: 768px) {
  .section {
    padding-block: 7rem;
  }
}

.section--dark {
  background: var(--color-dark);
  color: var(--color-cream);
}

.section--band {
  background: var(--color-band);
}

.section--surface {
  background: var(--color-surface);
}

/* Leistungsfarben im Dropdown */
.site-nav__dropdown-label--strategie,
.mobile-nav__subhead--strategie { color: var(--color-cat-strategie); }
.site-nav__dropdown-label--marketing,
.mobile-nav__subhead--marketing { color: var(--color-cat-marketing); }
.site-nav__dropdown-label--vertrieb,
.mobile-nav__subhead--vertrieb { color: var(--color-cat-vertrieb); }

/* Leistungen-Menue: Strategie, Marketing und Vertrieb nebeneinander, Ueberblick-Link darueber.
   Spaltenweiser Fluss: Zeile 1 Ueberblick, darunter je Ueberschrift plus vier Eintraege. */
.site-nav__dropdown--cols {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(6, auto);
  grid-auto-flow: column;
  column-gap: 0.5rem;
  left: -1.25rem;
  width: max-content;
  padding: 1.25rem 0.5rem 0.5rem;
  transform: none;
}

.site-nav__dropdown--cols > :first-child {
  grid-column: 1 / -1;
}

@media (min-width: 768px) {
  .mobile-nav__sublist--cols {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(6, auto);
    grid-auto-flow: column;
    column-gap: 0.5rem;
  }

  .mobile-nav__sublist--cols > :first-child {
    grid-column: 1 / -1;
  }
}

/* Menue-Dropdowns heben sich hell vom dunklen Hintergrund ab (Wunsch des Chefs, 04.11.2026). */
.site-nav__dropdown::before {
  border: 0;
  background: #ffffff;
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.55);
}
.site-nav__dropdown-link {
  color: var(--color-dark);
  font-weight: 500;
}
.site-nav__dropdown-link:hover {
  background: #e6f7f8;
  color: var(--color-dark);
}
.site-nav__dropdown-label { color: #55606a; font-weight: 700; }
.site-nav__dropdown-label--strategie { color: #06754f; }
.site-nav__dropdown-label--marketing { color: #5b34d6; }
.site-nav__dropdown-label--vertrieb { color: #05727d; }

/* Handy-Menü: Neon-Lila ist als kleine Schrift auf Dunkel zu schwach */
.mobile-nav__subhead--marketing { color: #ab75ff; }

/* Telefon in der Navigation: Icon-Button, die Nummer erscheint per Klick */
.site-header__phone { position: relative; margin-left: auto; flex: none; }
.site-header__phone-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  padding: 0;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: #00f5c4;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}
.site-header__phone-btn:hover,
.site-header__phone-btn[aria-expanded="true"] { background: linear-gradient(180deg, #2bffd0, #00f5c4); color: var(--color-dark); }
.site-header__phone-btn:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
.site-header__phone-panel {
  position: absolute;
  top: calc(100% + 0.75rem);
  right: 0;
  z-index: 60;
  display: grid;
  gap: 0.25rem;
  padding: 0.875rem 1.25rem;
  border-radius: 10px;
  background: #fff;
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.55);
  white-space: nowrap;
}
.site-header__phone-panel[hidden] { display: none; }
.site-header__phone-label { font-size: 0.8125rem; color: #55606a; }
.site-header__phone-link {
  font-family: var(--font-display);
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--color-dark);
  text-decoration: none;
}
.site-header__phone-link:hover { text-decoration: underline; }
.site-header__phone-link:focus-visible { outline: 2px solid var(--color-dark); outline-offset: 3px; border-radius: 4px; }
.site-header__toggle { flex: none; }
@media (min-width: 1024px) {
  .site-nav { margin-inline: auto; }
  .site-header__phone { margin-left: 0; }
}

/* Telefonnummer am Computer sichtbar neben dem Icon, ohne +49
   (Wunsch der Nutzerin, 10.11.2026). Darunter bleibt nur das Icon. */
.site-header__phone-num { display: none; }
@media (min-width: 1024px) {
  .site-header__phone-btn {
    width: auto;
    gap: 0.5rem;
    padding: 0 0.75rem;
  }
  .site-header__phone-num {
    display: inline;
    font-family: var(--font-display);
    font-size: 0.9375rem;
    font-weight: 600;
    letter-spacing: 0.01em;
    white-space: nowrap;
    color: var(--color-cream);
  }
  .site-header__phone-btn:hover .site-header__phone-num { color: inherit; }
}

.mobile-nav__phone {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 44px;
  font-size: 1.0625rem;
  font-weight: 500;
  color: var(--color-cream);
  text-decoration: none;
  white-space: nowrap;
}
.mobile-nav__phone svg { color: var(--color-cyan); flex: none; }
.mobile-nav__phone:hover { color: var(--color-cyan); }
.mobile-nav__phone:focus-visible { outline: 2px solid var(--color-cyan); outline-offset: 3px; border-radius: 4px; }


/* Handy und Tablet: Nummer direkt hinter dem Hoerer in der Kopfzeile
   (Wunsch der Nutzerin nach Ahmeds Vorgabe, 11.11.2026). Ersetzt die
   eigene Zeile "Ruf uns an" unter der Kopfzeile. Die Nummer waehlt direkt.
   Damit alles in eine Zeile passt, sind Abstaende und Kontakt-Button auf dem
   Handy etwas knapper. Unter 360 px reicht der Platz nicht, dort bleibt nur
   der Hoerer. */
@media (max-width: 1023px) {
  .site-header__logo { flex: none; }
  .site-header__phone-btn {
    width: auto;
    gap: 0.375rem;
    padding: 0 0.375rem;
  }
  .site-header__phone-btn svg { width: 18px; height: 18px; }
  .site-header__phone-num {
    display: inline;
    font-family: var(--font-display);
    font-size: 0.875rem;
    font-weight: 600;
    white-space: nowrap;
    color: #00f5c4;
  }
  .site-header__phone-btn:hover .site-header__phone-num { color: inherit; }
}
@media (max-width: 479px) {
  .site-header__inner { gap: 0.5rem; padding-inline: 1rem; }
  .site-header__logo img { height: 2rem; }
  .site-header__phone-btn { padding: 0 0.25rem; gap: 0.3rem; }
  .site-header__phone-num { font-size: 0.8125rem; }
  .site-header__cta { padding: 0 0.625rem; }
}

/* Handy und Tablet: Hoerer und Nummer als Button mit Rahmen, so hoch wie
   Kontakt- und Menue-Button (Wunsch der Nutzerin, 11.11.2026). */
@media (max-width: 1023px) {
  .site-header__phone-btn {
    height: 2.5rem;
    padding: 0 0.625rem;
    border: 1px solid rgba(0, 245, 196, 0.5);
    background: rgba(0, 245, 196, 0.08);
  }
}
/* Handy: Logo, Telefon, Kontakt und Menue mit gleich grossen Abstaenden
   zueinander statt eines grossen Abstands hinter dem Logo. */
@media (max-width: 599px) {
  .site-header__phone { margin-left: 0; }
  .site-header__phone-btn { padding: 0 0.5rem; }
}
@media (max-width: 379px) {
  .site-header__phone-btn { padding: 0 0.375rem; }
}
@media (max-width: 379px) {
  .site-header__inner { gap: 0.3rem; }
  .site-header__phone-num { font-size: 0.78rem; }
  .site-header__cta { padding: 0 0.5rem; }
}
@media (max-width: 359px) {
  .site-header__phone-num { display: none; }
  .site-header__phone-btn { width: 2.75rem; padding: 0; }
}