/* =========================================================
   DAVECTO DESIGN – SAUBERE WEBSITE V5
   Nur Video im Hero, kein Hero-Bild beim Laden
   ========================================================= */


/* =========================================================
   1. VARIABLEN
   ========================================================= */

:root {

  --bg: #07090c;
  --bg-soft: #0b0f14;

  --panel: #131922;
  --panel-soft: #0e131a;

  --white: #ffffff;
  --text: #e7ebee;
  --muted: #b9c0c7;

  --gold: #d3a13b;
  --gold-light: #efc35c;
  --orange: #f47a0b;

  --line: rgba(255, 255, 255, 0.12);

  --shadow:
    0 24px 70px rgba(0, 0, 0, 0.42);

  --shadow-strong:
    0 34px 95px rgba(0, 0, 0, 0.58);

  --radius: 24px;
  --max-width: 1240px;

}


/* =========================================================
   2. RESET UND GRUNDLAGEN
   ========================================================= */

*,
*::before,
*::after {

  box-sizing: border-box;

}


html,
body {

  width: 100%;

  max-width: 100%;

  overflow-x: hidden;

}


html {

  scroll-behavior: smooth;

  background: var(--bg);

}


body {

  margin: 0;

  color: var(--text);

  background:

    radial-gradient(
      circle at 80% 8%,
      rgba(244, 122, 11, 0.07),
      transparent 30rem
    ),

    linear-gradient(
      180deg,
      #090c11 0%,
      var(--bg) 100%
    );

  font-family:
    Inter,
    system-ui,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    sans-serif;

  line-height: 1.6;

}


a {

  color: inherit;

  text-decoration: none;

}


img,
video {

  display: block;

  max-width: 100%;

}


button,
a {

  -webkit-tap-highlight-color: transparent;

}


h1,
h2,
h3,
p {

  margin-top: 0;

}


/* =========================================================
   3. HEADER UND NAVIGATION
   ========================================================= */

.site-header {

  position: fixed;

  inset:
    0
    0
    auto;

  z-index: 1000;

  min-height: 82px;

  padding:
    0
    clamp(18px, 4vw, 60px);

  display: flex;

  align-items: center;

  justify-content: flex-end;

  gap: 24px;

  background:

    linear-gradient(
      to bottom,
      rgba(5, 7, 10, 0.96),
      rgba(5, 7, 10, 0.48)
    );

  border-bottom:
    1px
    solid
    rgba(255, 255, 255, 0.08);

  backdrop-filter:
    blur(14px);

  -webkit-backdrop-filter:
    blur(14px);

  transition:
    min-height 0.25s ease,
    background 0.25s ease;

}


.site-header.scrolled {

  min-height: 68px;

  background:
    rgba(5, 7, 10, 0.97);

}


.main-nav {

  display: flex;

  align-items: center;

  gap: 24px;

  font-size: 0.84rem;

  font-weight: 850;

  letter-spacing: 0.05em;

  text-transform: uppercase;

}


.main-nav a {

  transition:
    color
    0.2s
    ease;

}


.main-nav a:hover {

  color: var(--gold);

}


.nav-shop {

  padding:
    10px
    17px;

  color: var(--gold);

  border:
    1px
    solid
    rgba(211, 161, 59, 0.72);

  border-radius: 999px;

}


.menu-toggle {

  display: none;

  width: 46px;

  height: 46px;

  color: var(--white);

  background:
    rgba(10, 13, 17, 0.78);

  border:
    1px
    solid
    var(--line);

  border-radius: 50%;

  font-size: 1.25rem;

  cursor: pointer;

}


/* =========================================================
   4. HERO
   ========================================================= */

.hero {

  position: relative;

  isolation: isolate;

  min-height: 100svh;

  display: flex;

  align-items: center;

  overflow: hidden;

  background: #07090c;

}


.hero-media {

  position: absolute;

  inset: 0;

  z-index: -2;

  overflow: hidden;

  background: #07090c;

}


.hero-video {

  position: absolute;

  inset: 0;

  width: 100%;

  height: 100%;

  max-width: none;

  object-fit: cover;

  object-position:
    center
    center;

  border: 0;

  opacity: 0;

  visibility: hidden;

  transition:
    opacity
    0.45s
    ease;

}


.hero-video.ready {

  opacity: 1;

  visibility: visible;

}


.hero-light {

  position: absolute;

  top: 5%;

  right: 8%;

  z-index: 3;

  width:
    min(48vw, 760px);

  aspect-ratio: 1;

  border-radius: 50%;

  background:

    radial-gradient(
      circle,
      rgba(255, 213, 140, 0.24),
      rgba(244, 122, 11, 0.06) 46%,
      transparent 72%
    );

  filter:
    blur(18px);

  pointer-events: none;

}


.hero-shade {

  position: absolute;

  inset: 0;

  z-index: 4;

  background:

    linear-gradient(
      90deg,
      rgba(4, 6, 9, 0.72) 0%,
      rgba(4, 6, 9, 0.50) 35%,
      rgba(4, 6, 9, 0.12) 68%,
      rgba(4, 6, 9, 0.20) 100%
    ),

    linear-gradient(
      0deg,
      rgba(4, 6, 9, 0.52),
      transparent 45%
    );

  pointer-events: none;

}


.hero::after {

  content: "";

  position: absolute;

  left: 0;

  right: 0;

  bottom: 0;

  z-index: 5;

  height: 210px;

  background:

    linear-gradient(
      to bottom,
      rgba(7, 9, 12, 0) 0%,
      rgba(7, 9, 12, 0.08) 35%,
      rgba(7, 9, 12, 0.30) 72%,
      var(--bg) 100%
    );

  pointer-events: none;

}


.hero-logo {

  position: absolute;

  top: 13%;

  right: 8%;

  z-index: 10;

  width:
    min(700px, 40vw);

  pointer-events: none;

  animation:
    floatLogo
    5s
    ease-in-out
    infinite;

}


.hero-logo img {

  width: 100%;

  height: auto;

  filter:

    drop-shadow(
      0
      0
      12px
      rgba(255, 170, 40, 0.36)
    )

    drop-shadow(
      0
      0
      28px
      rgba(255, 120, 0, 0.26)
    );

}


@keyframes floatLogo {

  0%,
  100% {

    transform:
      translateY(0);

  }

  50% {

    transform:
      translateY(-7px);

  }

}


.hero-content {

  position: relative;

  z-index: 10;

  width:
    min(
      calc(100% - 48px),
      var(--max-width)
    );

  margin: auto;

  padding:
    140px
    0
    120px;

}


.eyebrow {

  margin-bottom: 16px;

  color: var(--gold);

  font-size: 0.78rem;

  font-weight: 900;

  letter-spacing: 0.22em;

  text-transform: uppercase;

}


.hero h1 {

  max-width: 760px;

  margin-bottom: 25px;

  color: var(--white);

  font-size:
    clamp(
      3.3rem,
      6.4vw,
      6.6rem
    );

  font-weight: 950;

  line-height: 0.98;

  letter-spacing: -0.045em;

  text-transform: uppercase;

  text-shadow:
    0
    6px
    22px
    rgba(0, 0, 0, 0.45);

}


.hero h1 span {

  display: block;

  margin-top: 12px;

  color: var(--gold);

}


.hero-copy {

  max-width: 610px;

  margin-bottom: 34px;

  color: var(--white);

  font-size:
    clamp(
      1rem,
      1.35vw,
      1.25rem
    );

  text-shadow:
    0
    2px
    10px
    rgba(0, 0, 0, 0.55);

}


.hero-actions {

  display: flex;

  flex-wrap: wrap;

  gap: 14px;

}


.button {

  min-height: 54px;

  padding:
    14px
    24px;

  display: inline-flex;

  align-items: center;

  justify-content: center;

  border:
    1px
    solid
    transparent;

  border-radius: 999px;

  font-size: 0.82rem;

  font-weight: 900;

  letter-spacing: 0.07em;

  text-transform: uppercase;

  transition:
    transform 0.2s ease,
    box-shadow 0.2s ease,
    border-color 0.2s ease;

}


.button:hover {

  transform:
    translateY(-3px);

}


.primary {

  color: #111111;

  background:

    linear-gradient(
      135deg,
      var(--gold),
      var(--orange)
    );

  box-shadow:
    0
    17px
    44px
    rgba(244, 122, 11, 0.28);

}


.secondary {

  color: var(--white);

  border-color:
    rgba(255, 255, 255, 0.42);

  background:
    rgba(8, 11, 15, 0.55);

  backdrop-filter:
    blur(10px);

  -webkit-backdrop-filter:
    blur(10px);

}


.scroll-cue {

  position: absolute;

  left: 50%;

  bottom: 22px;

  z-index: 11;

  font-size: 2rem;

}


/* =========================================================
   5. STANDARD-SEKTIONEN
   ========================================================= */

.section {

  width:
    min(
      calc(100% - 48px),
      var(--max-width)
    );

  margin: auto;

  padding:
    110px
    0;

}


.section-heading {

  max-width: 790px;

  margin-bottom: 44px;

}


.section h2,
.shop-cta h2 {

  margin-bottom: 18px;

  color: var(--white);

  font-size:
    clamp(
      2.5rem,
      4.7vw,
      5rem
    );

  font-weight: 950;

  line-height: 0.98;

  letter-spacing: -0.04em;

  text-transform: uppercase;

}


.section-heading > p:last-child {

  color: #c8cdd2;

  font-size: 1.08rem;

}


/* =========================================================
   6. KOLLEKTIONEN
   ========================================================= */

.collection-grid {

  display: grid;

  grid-template-columns:
    repeat(
      3,
      minmax(0, 1fr)
    );

  gap: 24px;

}


.collection-card {

  display: block;

  aspect-ratio: 3 / 2;

  overflow: hidden;

  border:
    1px
    solid
    rgba(255, 255, 255, 0.22);

  border-radius: var(--radius);

  background-repeat: no-repeat;

  background-position: center;

  background-size: cover;

  filter:
    brightness(1.15)
    contrast(1.06)
    saturate(1.07);

  box-shadow: var(--shadow);

  transition:
    transform 0.32s ease,
    border-color 0.32s ease,
    box-shadow 0.32s ease,
    filter 0.32s ease;

}


.collection-men {

  background-image:
    url("../images/herren-premium.webp");

}


.collection-women {

  background-image:
    url("../images/damen-premium.webp");

}


.collection-gods {

  background-image:
    url("../images/goetter-mythen.webp");

}


.collection-card:hover {

  transform:
    translateY(-8px)
    scale(1.025);

  border-color:
    rgba(211, 161, 59, 0.88);

  filter:
    brightness(1.22)
    contrast(1.08)
    saturate(1.11);

  box-shadow:
    var(--shadow-strong),
    0 0 34px rgba(211, 161, 59, 0.22);

}


/* =========================================================
   7. PRODUKTKARTEN
   ========================================================= */

.featured-products {

  padding-top: 80px;

}


.product-grid {

  display: grid;

  grid-template-columns:
    repeat(
      2,
      minmax(0, 1fr)
    );

  gap: 28px;

}


.product-card {

  overflow: hidden;

  border:
    1px
    solid
    var(--line);

  border-radius: 26px;

  background:

    linear-gradient(
      145deg,
      rgba(255, 255, 255, 0.055),
      rgba(255, 255, 255, 0.015)
    );

  box-shadow: var(--shadow);

  transition:
    transform 0.3s ease,
    border-color 0.3s ease,
    box-shadow 0.3s ease;

}


.product-card:hover {

  transform:
    translateY(-8px);

  border-color:
    rgba(211, 161, 59, 0.76);

  box-shadow:
    var(--shadow-strong),
    0 0 32px rgba(211, 161, 59, 0.14);

}


.product-image-link {

  display: block;

  aspect-ratio: 16 / 10;

  overflow: hidden;

  background: #0d1117;

}


.product-image {

  width: 100%;

  height: 100%;

  object-fit: cover;

  object-position: center;

  transition:
    transform 0.7s ease;

}


.product-card:hover .product-image {

  transform:
    scale(1.05);

}


.product-copy {

  padding: 28px;

}


.product-kicker {

  margin-bottom: 8px;

  color: var(--gold);

  font-size: 0.75rem;

  font-weight: 900;

  letter-spacing: 0.16em;

  text-transform: uppercase;

}


.product-copy h3 {

  margin-bottom: 12px;

  color: var(--white);

  font-size:
    clamp(
      1.75rem,
      3vw,
      2.6rem
    );

  line-height: 1;

  text-transform: uppercase;

}


.product-copy > p:not(.product-kicker) {

  margin-bottom: 20px;

  color: #c7cdd2;

}


.product-link {

  color: var(--gold-light);

  font-weight: 900;

  letter-spacing: 0.05em;

  text-transform: uppercase;

}


/* =========================================================
   8. APP-HERO
   ========================================================= */

.app-hero-section {

  width:
    min(
      calc(100% - 48px),
      1500px
    );

  margin:
    70px
    auto
    120px;

}


.app-hero-link {

  display: block;

  overflow: hidden;

  border:
    1px
    solid
    rgba(211, 161, 59, 0.45);

  border-radius: 28px;

  background: #05070a;

  box-shadow:
    0 34px 95px rgba(0, 0, 0, 0.58),
    0 0 42px rgba(244, 122, 11, 0.12);

  transition:
    transform 0.3s ease,
    border-color 0.3s ease,
    box-shadow 0.3s ease;

}


.app-hero-link:hover {

  transform:
    translateY(-6px);

  border-color:
    rgba(244, 122, 11, 0.88);

}


.app-hero-image {

  width: 100%;

  height: auto;

}


/* =========================================================
   9. WARUM DAVECTO
   ========================================================= */

.about {

  padding:
    clamp(
      42px,
      5vw,
      64px
    );

  border:
    1px
    solid
    rgba(211, 161, 59, 0.46);

  border-radius: 30px;

  background:

    radial-gradient(
      circle at 88% 12%,
      rgba(244, 122, 11, 0.12),
      transparent 320px
    ),

    linear-gradient(
      135deg,
      rgba(24, 30, 38, 0.98),
      rgba(8, 12, 17, 0.98)
    );

  box-shadow:
    0 32px 90px rgba(0, 0, 0, 0.5);

}


.about h2 {

  max-width: 850px;

  margin-bottom: 42px;

  color: var(--white);

  font-size:
    clamp(
      2.8rem,
      4.8vw,
      5.3rem
    );

  font-weight: 950;

  line-height: 0.96;

  text-transform: uppercase;

}


.benefits {

  display: grid;

  grid-template-columns:
    repeat(
      4,
      minmax(0, 1fr)
    );

  gap: 20px;

}


.benefits > div {

  position: relative;

  min-height: 220px;

  padding:
    92px
    25px
    26px;

  display: flex;

  flex-direction: column;

  justify-content: flex-end;

  border:
    1px
    solid
    rgba(255, 255, 255, 0.14);

  border-radius: 22px;

  background:

    linear-gradient(
      145deg,
      rgba(255, 255, 255, 0.07),
      rgba(255, 255, 255, 0.018)
    );

  box-shadow:
    0 18px 48px rgba(0, 0, 0, 0.28);

}


.benefits > div::before {

  position: absolute;

  top: 24px;

  left: 25px;

  width: 54px;

  height: 54px;

  display: grid;

  place-items: center;

  color: #11151a;

  border-radius: 16px;

  background:

    linear-gradient(
      135deg,
      var(--gold-light),
      var(--orange)
    );

  font-size: 25px;

  font-weight: 950;

}


.benefits > div:nth-child(1)::before {

  content: "✦";

}


.benefits > div:nth-child(2)::before {

  content: "◆";

}


.benefits > div:nth-child(3)::before {

  content: "ᚱ";

}


.benefits > div:nth-child(4)::before {

  content: "ᛉ";

}


.benefits b {

  display: block;

  margin-bottom: 10px;

  color: #efb53d;

  font-size: 1.17rem;

}


.benefits span {

  color: #d0d4d8;

  font-size: 0.97rem;

  line-height: 1.62;

}


/* =========================================================
   10. SHOP CTA
   ========================================================= */

.shop-cta {

  width:
    min(
      calc(100% - 48px),
      var(--max-width)
    );

  margin:
    0
    auto
    110px;

  padding:
    clamp(
      34px,
      5vw,
      60px
    );

  display: flex;

  align-items: center;

  justify-content: space-between;

  gap: 30px;

  border:
    1px
    solid
    rgba(211, 161, 59, 0.3);

  border-radius: 24px;

  background:
    linear-gradient(
      135deg,
      rgba(20, 25, 32, 0.98),
      rgba(7, 9, 12, 0.98)
    );

  box-shadow: var(--shadow);

}


/* =========================================================
   11. FOOTER
   ========================================================= */

footer {

  padding:
    54px
    clamp(24px, 5vw, 70px)
    28px;

  display: grid;

  grid-template-columns:
    1.2fr
    1fr;

  gap: 30px;

  background: #05070a;

  border-top:
    1px
    solid
    var(--line);

}


footer strong {

  color: var(--gold);

}


footer p,
footer small {

  color: var(--muted);

}


footer nav {

  display: flex;

  flex-wrap: wrap;

  justify-content: flex-end;

  gap: 18px;

}


footer nav a {

  color: #d7dce0;

  font-weight: 700;

}


footer small {

  grid-column:
    1
    /
    -1;

  padding-top: 20px;

  border-top:
    1px
    solid
    var(--line);

}


/* =========================================================
   12. SCROLL-ANIMATIONEN
   ========================================================= */

.reveal {

  opacity: 0;

  transform:
    translateY(24px);

  transition:
    opacity 0.7s ease,
    transform 0.7s ease;

}


.reveal.visible {

  opacity: 1;

  transform: none;

}


/* =========================================================
   13. TABLET
   ========================================================= */

@media (max-width: 980px) {

  .menu-toggle {

    display: block;

  }


  .site-header {

    justify-content: flex-end;

  }


  .main-nav {

    position: fixed;

    top: 74px;

    left: 18px;

    right: 18px;

    padding: 22px;

    display: none;

    flex-direction: column;

    align-items: stretch;

    border:
      1px
      solid
      var(--line);

    border-radius: 18px;

    background:
      rgba(6, 8, 11, 0.98);

    box-shadow: var(--shadow);

  }


  .main-nav.open {

    display: flex;

  }


  .hero-logo {

    top: 50%;

    right: 8%;

    width:
      min(320px, 38vw);

  }


  .collection-grid,
  .product-grid {

    grid-template-columns: 1fr;

  }


  .collection-card,
  .product-card {

    width: 100%;

    max-width: 780px;

    margin-inline: auto;

  }


  .benefits {

    grid-template-columns:
      repeat(
        2,
        minmax(0, 1fr)
      );

  }


  .app-hero-section {

    width:
      calc(100% - 32px);

  }


  footer {

    grid-template-columns: 1fr;

  }


  footer nav {

    justify-content: flex-start;

  }

}


/* =========================================================
   14. SMARTPHONE
   ========================================================= */

@media (max-width: 640px) {

  .site-header {

    padding-inline: 15px;

  }


  .hero-content,
  .section,
  .shop-cta {

    width:
      calc(100% - 28px);

  }


  .hero-content {

    padding-top: 120px;

  }


  .hero h1 {

    font-size:
      clamp(
        2.7rem,
        13vw,
        4.6rem
      );

  }


  .hero-actions {

    flex-direction: column;

  }


  .button {

    width: 100%;

  }


  
  .hero-logo {
    display:none;
  }

  .site-header {
    position: relative;
  }

  .site-header::after{
    content:"";
    position:absolute;
    left:50%;
    top:50%;
    transform:translate(-50%,-50%);
    width:170px;
    height:56px;
    background:url("images/davecto-logo.png") center/contain no-repeat;
    z-index:15;
    pointer-events:none;
  }

  .menu-toggle{
    margin-left:auto;
    position:relative;
    z-index:20;
  }



  .hero-video {

    object-position:
      58%
      center;

  }


  .section {

    padding:
      80px
      0;

  }


  .product-copy {

    padding: 22px;

  }


  .app-hero-section {

    width:
      calc(100% - 20px);

    margin-top: 30px;

    margin-bottom: 70px;

  }


  .about {

    padding:
      36px
      20px;

    border-radius: 22px;

  }


  .benefits {

    grid-template-columns: 1fr;

    gap: 16px;

  }


  .benefits > div {

    min-height: 190px;

    padding:
      84px
      22px
      24px;

  }


  .shop-cta {

    align-items: stretch;

    flex-direction: column;

  }

}
/* Mobiles Logo im schwarzen Header */
@media screen and (max-width: 768px) {

  /* Großes Hero-Logo mobil ausblenden */
  .hero-logo {
    display: none !important;
  }

  /* Header als Bezugspunkt */
  .site-header {
    position: relative !important;
    min-height: 120px;
  }

  /* Logo mittig im schwarzen Header */
  .site-header::after {
    content: "";
    display: block;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);

    width: 405px;
    height: 180px;

    background-image: url("../images/davecto-logo.png");
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;

    z-index: 15;
    pointer-events: none;
  }

  /* Menü rechts über dem Logo halten */
  .menu-toggle {
    position: relative !important;
    z-index: 20;
    margin-left: auto;
  }
}