/* DTC GmbH – gemeinsame Stile für alle Seiten (Executive Precision) */

.material-symbols-outlined {
  font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
  vertical-align: middle;
}

.glass-card {
  background: rgba(255, 255, 255, 0.7);
  backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.scrim-hero {
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0.35) 0%, rgba(0, 0, 0, 0.8) 100%);
}

/* Scroll-Reveal */
.reveal-on-scroll {
  opacity: 0;
  transform: translateY(30px);
  transition: all 0.9s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: transform, opacity;
}
.reveal-on-scroll.visible { opacity: 1; transform: translateY(0); }

/* Soft page transitions for static multi-page navigation */
body {
  opacity: 1;
  transition: opacity .22s ease;
}
body.page-is-leaving { opacity: 0; }
html,
body {
  max-width: 100%;
  overflow-x: hidden;
}

/* Karten-Hover */
.hover-lift { transition: transform .4s cubic-bezier(0.16, 1, 0.3, 1), box-shadow .4s cubic-bezier(0.16, 1, 0.3, 1), border-color .4s ease; }
.hover-lift:hover { transform: translateY(-8px); box-shadow: 0 20px 40px rgba(0, 0, 0, 0.08); }
.hover-lift:focus-visible {
  transform: translateY(-4px);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.08);
}

/* Navigations-Unterstreichung */
.nav-link { position: relative; }
.nav-link::after {
  content: '';
  position: absolute; left: 0; bottom: -4px;
  height: 2px; width: 0; background: #103A5E;
  transition: width .3s cubic-bezier(0.16, 1, 0.3, 1);
}
.nav-link:hover::after, .nav-link:focus-visible::after { width: 100%; }
.nav-link[aria-current="page"]::after { width: 100%; }

/* Shimmer-Button */
.shimmer-button { position: relative; overflow: hidden; }
.shimmer-button::after {
  content: '';
  position: absolute; top: -50%; left: -50%; width: 200%; height: 200%;
  background: linear-gradient(45deg, transparent 25%, rgba(255, 255, 255, 0.12) 50%, transparent 75%);
  transform: translateX(-100%) rotate(45deg);
  transition: transform .6s;
}
.shimmer-button:hover::after { transform: translateX(100%) rotate(45deg); }

@media (prefers-reduced-motion: reduce) {
  .reveal-on-scroll, .hover-lift, .shimmer-button::after {
    transition: none !important;
    transform: none !important;
    opacity: 1 !important;
  }
}

:focus-visible { outline: 2px solid #103A5E; outline-offset: 3px; }

/* Lange deutsche Komposita sauber umbrechen statt überlaufen */
h1, h2, h3, h4 { overflow-wrap: break-word; hyphens: auto; }
main p,
main li,
main a,
main span {
  overflow-wrap: anywhere;
}

/* ---------- Referenz-Logo-Kachel ---------- */
/* Einheitliche Kachelhöhe; Logos werden proportional auf eine konstante
   optische Größe begrenzt – unabhängig vom Seitenverhältnis der Datei. */
.logo-tile {
  display: flex; align-items: center; justify-content: center;
  height: 140px; margin-bottom: 20px;
  background: #ffffff; border: 1px solid #eeeef0; border-radius: 8px;
  padding: 16px 18px;
}
.logo-tile img {
  max-height: 88px;          /* gleiche optische Höhe für alle Logos */
  max-width: 100%;
  width: auto; height: auto;
  object-fit: contain;
}
.logo-tile img[src*="Logo%20farbwerk"],
.logo-tile img[src*="Logo farbwerk"] {
  max-height: 118px;
  max-width: 92%;
  transform: scale(1.45);
}
.logo-fallback {
  display: none; align-items: center; justify-content: center;
  height: 140px; margin-bottom: 20px;
  background: #f3f3f5; border: 1px solid #eeeef0; border-radius: 8px;
  color: #103A5E; font-family: Inter, sans-serif; font-weight: 800;
  font-size: 20px; letter-spacing: -0.02em; text-align: center; padding: 12px;
}

/* ---------- Logo-Marquee (laufende Kundenlogos) ---------- */
.logo-marquee {
  position: relative;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 8%, #000 92%, transparent 100%);
          mask-image: linear-gradient(to right, transparent 0, #000 8%, #000 92%, transparent 100%);
}
.logo-marquee__track {
  display: flex;
  width: max-content;
  align-items: center;
  animation: logo-marquee 50s linear infinite;
}
.logo-marquee:hover .logo-marquee__track { animation-play-state: paused; }
.logo-marquee__item {
  flex: 0 0 auto;
  display: flex; align-items: center; justify-content: center;
  height: 120px;
  padding: 0 52px;
}
.logo-marquee__item img {
  max-height: 84px;
  max-width: 220px;
  width: auto; height: auto;
  object-fit: contain;
}

/* ---------- Team-Profil auf der Über-uns-Seite ---------- */
.team-profile {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(32px, 6vw, 96px);
  align-items: center;
}
.team-profile + .team-profile {
  border-top: 1px solid rgba(196, 199, 199, .7);
  padding-top: clamp(56px, 7vw, 96px);
  margin-top: clamp(56px, 7vw, 96px);
}
.team-photo {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  object-position: center top;
  border-radius: 8px;
  background: #e8e8ea;
}
.team-role {
  color: #103A5E;
}
.team-copy p + p { margin-top: 1rem; }
@media (max-width: 767px) {
  main > section > div,
  nav > div {
    box-sizing: border-box;
    width: 100% !important;
    max-width: 100vw !important;
    margin-left: auto;
    margin-right: auto;
    padding-left: 20px !important;
    padding-right: 20px !important;
  }
  header#home > .absolute.inset-0 {
    width: 100% !important;
    max-width: none !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  header#home > .relative {
    box-sizing: border-box;
    width: 100% !important;
    max-width: 100vw !important;
    padding-left: 20px !important;
    padding-right: 20px !important;
  }
  main h1 {
    font-size: 30px !important;
    line-height: 1.14 !important;
    overflow-wrap: anywhere;
    white-space: normal !important;
    width: 100%;
    max-width: min(100%, 18ch) !important;
  }
  main h2,
  .team-role {
    font-size: 28px !important;
    line-height: 1.16 !important;
    overflow-wrap: anywhere;
    max-width: calc(100vw - 40px) !important;
  }
  main h3 {
    font-size: 25px !important;
    line-height: 1.18 !important;
    overflow-wrap: anywhere;
    max-width: calc(100vw - 40px) !important;
  }
  main p,
  main li {
    width: 100%;
    max-width: min(100%, 32ch) !important;
    white-space: normal !important;
  }
  .team-profile {
    grid-template-columns: 1fr;
    gap: 24px;
  }
  .team-profile + .team-profile {
    padding-top: 48px;
    margin-top: 48px;
  }
  .team-photo {
    max-height: 560px;
  }
}

@media (max-width: 767px) {
  body > main.max-w-3xl {
    width: 100%;
    max-width: calc(100vw - 40px) !important;
    margin-left: auto;
    margin-right: auto;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
}

/* ---------- Mobile Navigation ---------- */
@media (max-width: 767px) {
  nav[aria-label="Hauptnavigation"] {
    left: 0;
    right: 0;
    width: 100vw;
  }
  nav[aria-label="Hauptnavigation"] > div:first-child {
    min-height: 78px;
    padding-left: 20px !important;
    padding-right: 20px !important;
  }
  nav[aria-label="Hauptnavigation"] img {
    max-width: min(170px, 62vw);
  }
  #menu-toggle {
    position: fixed;
    top: 17px;
    left: calc(100vw - 64px);
    right: auto;
    width: 44px;
    height: 44px;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    z-index: 120;
    border: 1px solid rgba(16, 58, 94, .14);
    border-radius: 999px;
    background: #ffffff;
    box-shadow: 0 10px 28px rgba(16, 58, 94, .08);
    transition: background .2s ease, transform .2s ease, box-shadow .2s ease;
  }
  #menu-icon {
    color: #103A5E;
    font-size: 26px;
    line-height: 1;
  }
  #menu-toggle[aria-expanded="true"] {
    background: #103A5E;
    color: #fff;
    box-shadow: 0 14px 34px rgba(16, 58, 94, .22);
  }
  #menu-toggle:active {
    transform: scale(.96);
  }
  #mobile-menu {
    position: absolute;
    left: 12px;
    right: 12px;
    top: calc(100% + 8px);
    width: auto !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 10px !important;
    border: 1px solid rgba(196, 199, 199, .9) !important;
    border-radius: 18px;
    background: rgba(255, 255, 255, .995) !important;
    box-shadow: 0 24px 70px rgba(16, 58, 94, .20);
    backdrop-filter: blur(18px);
    overflow: hidden;
  }
  #mobile-menu:not(.hidden) {
    display: block;
    animation: mobile-menu-in .18s ease-out both;
  }
  #mobile-menu > :not([hidden]) ~ :not([hidden]) {
    margin-top: 4px !important;
  }
  #mobile-menu a {
    min-height: 48px;
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    padding: 0 14px;
    border-radius: 12px;
    color: #2f3a42;
    letter-spacing: .08em;
    transition: background .2s ease, color .2s ease, transform .2s ease;
  }
  #mobile-menu a:not(:last-child)::after {
    content: 'arrow_forward';
    font-family: 'Material Symbols Outlined';
    font-size: 18px;
    line-height: 1;
    opacity: .45;
    font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 20;
  }
  #mobile-menu a:hover,
  #mobile-menu a:focus-visible,
  #mobile-menu a[aria-current="page"] {
    background: #edf4f8;
    color: #103A5E;
  }
  #mobile-menu a:last-child {
    min-height: 52px;
    justify-content: center;
    margin-top: 8px;
    background: #103A5E;
    color: #fff;
    border-radius: 999px;
    box-shadow: 0 12px 28px rgba(16, 58, 94, .18);
  }
  #mobile-menu a:last-child::after {
    content: 'north_east';
    margin-left: 8px;
    font-family: 'Material Symbols Outlined';
    font-size: 18px;
    font-variation-settings: 'FILL' 0, 'wght' 500, 'GRAD' 0, 'opsz' 20;
  }
  body.mobile-menu-open {
    overflow: hidden;
  }
  body.mobile-menu-open .mobile-cta-bar {
    display: none;
  }
}

@keyframes mobile-menu-in {
  from {
    opacity: 0;
    transform: translateY(-8px) scale(.98);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}
/* Bewegung von links nach rechts */
@keyframes logo-marquee {
  from { transform: translateX(-50%); }
  to   { transform: translateX(0); }
}
@media (prefers-reduced-motion: reduce) {
  .logo-marquee__track { animation: none; flex-wrap: wrap; justify-content: center; width: 100%; }
}

.skip-link { position: absolute; left: -999px; top: 0; z-index: 100; }
.skip-link:focus { left: 16px; top: 16px; background: #103A5E; color: #fff; padding: 12px 20px; }

/* ---------- Logo-Lockup (Wort-Bild-Marke DTC GmbH) ---------- */
.logo-lockup {
  display: inline-flex;
  flex-direction: column;
  line-height: 1;
  gap: 3px;
  text-decoration: none;
}
.logo-main {
  font-family: Inter, sans-serif;
  font-weight: 800;
  font-size: 22px;
  letter-spacing: -0.03em;
  color: #103A5E;
}
.logo-sub {
  font-family: Inter, sans-serif;
  font-weight: 700;
  font-size: 9px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: #103A5E;
}
@media (min-width: 768px) {
  .logo-main { font-size: 24px; }
  .logo-sub { font-size: 10px; }
}

/* Marken-Icons (Social) */
.brand-icon { width: 20px; height: 20px; display: inline-block; }

/* ---------- Mobile Conversion Bar ---------- */
.mobile-cta-bar {
  position: fixed;
  left: 12px;
  right: 12px;
  bottom: 12px;
  z-index: 70;
  display: none;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 12px;
  background: rgba(255, 255, 255, .96);
  border: 1px solid #c4c7c7;
  border-radius: 999px;
  box-shadow: 0 16px 42px rgba(16, 58, 94, .18);
  backdrop-filter: blur(16px);
}
.mobile-cta-bar__copy {
  min-width: 0;
  color: #103A5E;
  font: 700 12px/1.25 Inter, sans-serif;
}
.mobile-cta-bar__button {
  flex: 0 0 auto;
  min-height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 16px;
  border-radius: 999px;
  background: #103A5E;
  color: #fff;
  font: 700 11px/1 Inter, sans-serif;
  letter-spacing: .08em;
  text-transform: uppercase;
}
@media (max-width: 767px) {
  body:not(.has-cookie-banner) { padding-bottom: 74px; }
  .mobile-cta-bar { display: flex; }
  body.is-contact-page .mobile-cta-bar,
  body.has-cookie-banner .mobile-cta-bar { display: none; }
}

/* ---------- Cookie Consent ---------- */
.cookie-consent {
  position: fixed;
  left: 16px;
  right: 16px;
  bottom: 16px;
  box-sizing: border-box;
  z-index: 80;
  display: none;
  width: min(760px, calc(100vw - 32px));
  max-width: calc(100vw - 32px);
  margin: 0 auto;
  padding: 20px;
  background: rgba(255, 255, 255, .96);
  border: 1px solid #c4c7c7;
  border-radius: 8px;
  box-shadow: 0 24px 70px rgba(16, 58, 94, .18);
  backdrop-filter: blur(18px);
}
.cookie-consent.is-visible { display: block; }
.cookie-consent__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 16px;
}
.cookie-consent__button {
  min-height: 44px;
  border-radius: 999px;
  padding: 11px 18px;
  font: 700 12px/1 Inter, sans-serif;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.cookie-consent__button--primary {
  background: #103A5E;
  color: #fff;
}
.cookie-consent__button--secondary {
  background: #fff;
  color: #103A5E;
  border: 1px solid #c4c7c7;
}
@media (max-width: 520px) {
  .cookie-consent {
    left: 12px;
    right: 12px;
    width: calc(100vw - 24px);
    max-width: calc(100vw - 24px);
    padding: 18px;
  }
  .cookie-consent h2 {
    font-size: 24px !important;
    line-height: 1.16 !important;
    max-width: 13ch !important;
  }
  .cookie-consent p {
    max-width: 32ch !important;
    overflow-wrap: anywhere;
  }
  .cookie-consent__actions { flex-direction: column; }
  .cookie-consent__button { width: 100%; }
}