/* ====== NAV & LAYOUT ====== */
.skip-link{position:absolute;left:-999px;top:auto;width:1px;height:1px;overflow:hidden;}
.skip-link:focus{position:static;width:auto;height:auto;padding:8px;background:#111;color:#fff;z-index:1000;}

.site-header{background:#fff;box-shadow:0 2px 8px rgba(0,0,0,.05);position:sticky;top:0;z-index:50;}
.header-inner{display:flex;align-items:center;justify-content:space-between;padding:10px 20px;}
.brand{display:flex;align-items:center;gap:10px;color:#1f2937;text-decoration:none;font-weight:700;}
.brand.small span{font-size:1rem;}
.nav{display:flex;gap:16px;align-items:center;}
.nav a{color:#1f2937;text-decoration:none;font-weight:500;}
.nav-cta{padding:8px 12px;border-radius:10px;background:linear-gradient(180deg,#60a5fa,#3b82f6);color:#fff;}

.hero{position:relative;overflow:hidden;}
.hero-inner{display:flex;flex-direction:column;align-items:center;gap:16px;}
.hero-actions{display:flex;gap:12px;flex-wrap:wrap;justify-content:center;}
.btn{display:inline-block;padding:12px 18px;border-radius:10px;text-decoration:none;font-weight:700;}
.btn-primary{background:linear-gradient(180deg,#60a5fa,#3b82f6);color:#fff;}
.btn-secondary{background:#fff;color:#1f2937;border:1px solid #e5e7eb;}

/* Trust bar */
.trustbar{background:#f3f4f6;padding:14px 0;border-top:1px solid #e5e7eb;border-bottom:1px solid #e5e7eb;}
.trustbar-inner{display:flex;gap:18px;align-items:center;justify-content:center;flex-wrap:wrap;}
.trust-text{color:#6b7280;font-size:.95rem;}
.trust-logos{display:flex;gap:20px;opacity:.7;}

/* Features */
.features h2{text-align:center;margin-bottom:12px;}
.feature-grid{display:grid;gap:20px;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));margin-top:16px;}
.feature{background:#fff;border-radius:16px;padding:18px;box-shadow:0 2px 8px rgba(0,0,0,.05);text-align:center;}
.feature .icon{font-size:28px;margin-bottom:8px;}
.feature h3{margin-bottom:6px;}

.brand-logo {
  width: 64px;
  height: 36px;
  object-fit: contain; /* verhindert Verzerren/Abschneiden */
}

/* Stats */
.stats{background:linear-gradient(180deg,rgba(59,130,246,.06),transparent);padding:24px 0;}
.stats-grid{display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));}
.stat{background:#fff;border-radius:16px;padding:16px;text-align:center;box-shadow:0 2px 8px rgba(0,0,0,.05);}
.stat .num{display:block;font-size:1.6rem;font-weight:800;}
.stat .label{color:#6b7280;font-size:.9rem;}

/* Testimonials */
.testimonials h2{text-align:center;margin-bottom:12px;}
.testimonial-grid{display:grid;gap:20px;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));margin-top:10px;}
.testimonial{background:#fff;border-radius:16px;padding:18px;box-shadow:0 2px 8px rgba(0,0,0,.05);}
.testimonial blockquote{font-style:italic;margin-bottom:8px;color:#374151;}
.testimonial figcaption{color:#6b7280;font-size:.9rem;}

/* FAQ */
.faq h2{text-align:center;margin-bottom:12px;}
.faq details{background:#fff;border-radius:12px;padding:14px;margin-top:10px;box-shadow:0 2px 8px rgba(0,0,0,.05);}
.faq summary{cursor:pointer;font-weight:600;}
.faq summary::marker{color:#3b82f6;}
.faq p{margin-top:8px;}

/* Final CTA */
.final-cta{background:linear-gradient(180deg,#60a5fa,#3b82f6);color:#fff;padding:40px 0;margin-top:20px;}
.final-cta-inner{display:flex;flex-direction:column;align-items:center;gap:10px;text-align:center;}
.final-cta .btn-primary{background:#111827;}

/* Footer */
.site-footer{background:#111827;color:#e5e7eb;margin-top:0;}
.footer-grid{display:grid;gap:20px;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));padding:24px 20px;}
.footer-nav{display:flex;flex-direction:column;gap:8px;}
.footer-nav a{color:#e5e7eb;text-decoration:none;}
.footer-contact{display:flex;flex-direction:column;gap:8px;}
.socials{display:flex;gap:10px;}
.footnote{text-align:center;padding:10px 0;border-top:1px solid rgba(255,255,255,.08);font-size:.9rem;opacity:.8;}

/* =============================
   LIVEMANAGER – GRID & KÄSTCHEN
   ============================= */
.manager-grid{
  display: grid !important;   /* überschreibt evtl. altes flex */
  gap: 30px;
  grid-template-columns: 1fr; /* Mobil: 1 */
}
@media (min-width: 640px){
  .manager-grid{ grid-template-columns: repeat(2, 1fr); } /* Tablet: 2 */
}
@media (min-width: 1024px){
  .manager-grid{ grid-template-columns: repeat(3, 1fr); } /* Desktop: 3 */
}

/* Karten */
.manager-card{
  background:#fff;
  border-radius:16px;
  padding:20px;
  box-shadow:0 2px 8px rgba(0,0,0,.05);
  transition:transform .2s ease, box-shadow .2s ease;
  text-align:center;
  display:flex; flex-direction:column;
}
.manager-card:hover{ transform: translateY(-4px); box-shadow:0 8px 20px rgba(0,0,0,.12); }

/* Bild rund wie zuvor */
.manager-card img{
  width:110px; height:110px; object-fit:cover; border-radius:50%;
  margin:0 auto 10px;
}

/* Text */
.manager-card h3{font-size:1.2rem;margin:4px 0 6px;}
.manager-card p{font-size:.95rem;color:#6b7280;margin-bottom:12px;flex:1;}

/* Links & Buttons in Karten (nutzt bestehende .btn/.link Stile) */
.manager-card .link{display:inline-block;margin-bottom:12px;text-decoration:underline;color:#3b82f6;}
.manager-card .btn{width:100%;}

/* Optional: wenn es noch alte width-Werte gibt */
.manager-card{width:auto;max-width:none;}


/* === Farb-Variablen (neu) === */
:root{
  --clr-primary-500:#3b82f6;
  --clr-primary-600:#2563eb;
  --clr-secondary-500:#a855f7;
  --clr-accent-500:#ec4899;
  --clr-gray-50:#f9fafb;
  --clr-gray-600:#4b5563;
}

.btn-primary{
  background:linear-gradient(180deg,var(--clr-primary-500),var(--clr-primary-600));
  color:#fff;
}
.btn-secondary{
  background:#fff;
  color:var(--clr-gray-600);
  border:1px solid #e5e7eb;
}

.features{
  background:linear-gradient(180deg,rgba(168,85,247,.06),transparent);
}
.stats{
  background:linear-gradient(180deg,rgba(236,72,153,.05),transparent);
}

/* === Gründer (Founders) === */
.founders h2{text-align:center;margin-bottom:12px;}
.founder-grid{display:grid;gap:30px;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));margin-top:16px;}
.founder-card{background:#fff;border-radius:20px;padding:24px;text-align:center;box-shadow:0 4px 16px rgba(0,0,0,.06);transition:transform .2s ease,box-shadow .2s ease;}
.founder-card:hover{transform:translateY(-4px);box-shadow:0 8px 24px rgba(0,0,0,.12);}
.founder-card img{width:140px;height:140px;border-radius:50%;object-fit:cover;margin-bottom:12px;}
.founder-card h3{font-size:1.3rem;margin:6px 0;}
.founder-card p{color:var(--clr-gray-600);font-size:.95rem;margin-bottom:16px;}


/* === Dannys Diamonds Theme === */
:root{
  --clr-primary-500:#49c6ff;   /* Azur */
  --clr-primary-600:#2094ff;   /* Royal */
  --clr-secondary-500:#c084fc; /* Amethyst */
  --clr-accent-500:#ff6ec7;    /* Pink Sapphire */
  --clr-gray-50:#f9fafb;
  --clr-gray-600:#475569;
}

/* Primary Buttons */
.btn-primary{
  background:linear-gradient(180deg,var(--clr-primary-500),var(--clr-primary-600));
  color:#fff;
  transition:box-shadow .2s ease, transform .2s ease;
}
.btn-primary:hover{
  box-shadow:0 0 0 3px rgba(73,198,255,.35);
  transform:translateY(-2px);
}

/* Hero Diamond Glow */
.hero::before{
  content:"";
  position:absolute;
  inset:0;
  background:radial-gradient(at top left,var(--clr-primary-500) 0%,rgba(255,255,255,0) 70%);
  z-index:-1;
}

/* Final CTA Gradient */
.final-cta{
  background:linear-gradient(135deg,var(--clr-primary-500) 0%,var(--clr-secondary-500) 100%);
}

/* Brand Color Accent */
.brand span{
  color:var(--clr-primary-600);
}
.brand:hover span{
  color:var(--clr-secondary-500);
}


/* === Dannys Diamonds Professional Enhancements === */

/* Layout container */
.container{
  max-width:1200px;
  margin-inline:auto;
  padding-inline:clamp(1rem,4vw,2rem);
  display:grid;
  gap:clamp(2rem,5vw,4rem);
}

/* Top bar gradient */
.top-bar{
  height:4px;
  width:100%;
  background:linear-gradient(90deg,var(--clr-primary-500),var(--clr-secondary-500));
}

/* Glassmorphism Card */
.card-glass{
  position:relative;
  padding:2rem;
  border-radius:1.5rem;
  background:rgba(255,255,255,.07);
  border:1px solid rgba(255,255,255,.15);
  box-shadow:0 4px 16px rgba(0,0,0,.15);
  backdrop-filter:blur(8px);
  transition:transform .3s ease, box-shadow .3s ease;
}
.card-glass:hover{
  transform:translateY(-6px);
  box-shadow:0 8px 24px rgba(0,0,0,.25);
}

/* Section wave */
.section-wave{
  position:relative;
  overflow:hidden;
}
.section-wave::after{
  content:"";
  position:absolute;
  left:0; right:0; bottom:-1px;
  height:80px;
  background:url("/assets/wave.svg") no-repeat bottom/cover;
  pointer-events:none;
}

/* Fluid typography */
h1{font-size:clamp(2.4rem,5vw,4rem);}
h2{font-size:clamp(1.8rem,4vw,2.8rem);}
h3{font-size:clamp(1.4rem,3.5vw,2rem);}

/* Scroll reveal */
@media (prefers-reduced-motion:no-preference){
  @keyframes fadeUp{0%{opacity:0;transform:translateY(30px);}100%{opacity:1;transform:none;}}
  .fade-up{opacity:0;transform:translateY(30px);}
  .fade-up.in-view{animation:fadeUp .6s ease-out both;}
}

/* Focus states */
a:focus-visible,button:focus-visible{outline:3px solid var(--clr-accent-500);outline-offset:2px;}

/* Dark mode */
@media (prefers-color-scheme:dark){
  body{background:#0f172a;color:var(--clr-gray-50);}
  .card-glass{background:rgba(30,41,59,.4);border:1px solid rgba(255,255,255,.1);}
}


/* === Full Mobile Optimization === */
*,*::before,*::after{box-sizing:border-box;}
html,body{width:100%;max-width:100%;overflow-x:hidden;}

img,video{max-width:100%;height:auto;display:block;}

.burger{
  display:none;
  background:none;
  border:none;
  font-size:2rem;
  line-height:1;
  cursor:pointer;
  color:var(--clr-primary-600);
}

@media(max-width:767px){
  .burger{display:block;}

  .nav{
    position:fixed;
    top:0;
    right:-100%;
    width:70%;
    max-width:320px;
    height:100%;
    background:rgba(15,23,42,.95);
    backdrop-filter:blur(6px);
    padding:6rem 2rem;
    display:flex;
    flex-direction:column;
    gap:1.5rem;
    transition:right .3s ease, opacity .3s ease;
    opacity:0;
  }
  .nav.open{right:0;opacity:1;}

  .site-header .header-inner{
    justify-content:space-between;
  }
}

/* Live Manager grid – exactly 2 on mobile */
.manager-grid{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:1rem;
}
.manager-card{width:100%;}

@media(min-width:768px){
  .manager-grid{grid-template-columns:repeat(3,1fr);}
}
@media(min-width:1024px){
  .manager-grid{grid-template-columns:repeat(4,1fr);}
}


/* === Header adjustments === */
.site-header .header-inner{
  display:flex;
  align-items:center;
  gap:.75rem;
}

/* Remove unintended justify-content on mobile */
@media(max-width:767px){
  .site-header .header-inner{
    justify-content:flex-start;
  }
  .burger{
    margin-left:auto; /* keep to far right of header row */
  }
}

/* Burger next to brand visually but still right aligned due gap+auto margin */
.burger{
  color:var(--clr-primary-600);
  padding:.25rem;
}

/* Nav link readability */
.nav ul{padding:0;margin:0;display:flex;flex-direction:column;gap:1rem;}
.nav li{list-style:none;}
.nav a{
  color:#fff;
  font-size:1.25rem;
  font-weight:600;
  text-decoration:none;
}

/* Background video styling */
.bg-video{
  position:fixed;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  z-index:-2;
}
.bg-overlay{
  position:fixed;
  inset:0;
  background:rgba(255,255,255,.6); /* light overlay for readability */
  backdrop-filter:blur(2px);
  z-index:-1;
}

/* Ensure content sits on top */
body > *:not(.bg-video):not(.bg-overlay){
  position:relative;
  z-index:0;
}


/* === Fine Mobile Grid & Nav Improvements === */

/* Manager grid: exactly 2 cols mobile without overflow */
.manager-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:.75rem;
}

/* Manager card responsiveness */
.manager-card{width:100%;min-width:0;}

/* Improve nav readability & behaviour */
@media(max-width:767px){
  .nav{
    background:#0f172a;
    z-index:1000;
  }
  .nav ul{
    margin:0;padding:0;
    display:flex;
    flex-direction:column;
    gap:1.25rem;
  }
  .nav a{
    color:#fff;
    font-size:1.25rem;
    font-weight:600;
  }
}

/* Desktop nav visible */
@media(min-width:768px){
  .nav{
    position:static;
    right:auto;
    opacity:1;
    height:auto;
    display:flex;
    flex-direction:row;
    gap:1.75rem;
    background:transparent;
    padding:0;
  }
  .burger{display:none;}
  .nav a{
    color:var(--clr-gray-600);
  }
  .nav a:hover{
    color:var(--clr-primary-600);
  }
}

/* Ensure no horizontal overflow */
html,body{overflow-x:hidden;}


/* --- Burger Nav Foreground Fix --- */
@media(max-width:767px){
  .nav{
    z-index:2000;
  }
  .nav.open{right:0;opacity:1;}
}

/* Body lock when nav open */
body.nav-open{overflow:hidden;}


/* Story card custom width */
.story.card-glass{
  max-width: 100%;
  margin-inline:auto;
}


/* === Story Card desktop size tweak === */
@media(min-width:768px){
  .story.card-glass{
    max-width:640px;      /* gleicht die Breite den Manager‑Cards an */
    margin-inline:auto;
    padding:1.5rem 2rem;
  }
}

/* === iOS text-visibility patch (force dark text on light cards) === */
@supports (-webkit-touch-callout:none){

  /* 1. Karten fast voll deckend → Background-Video scheint nicht mehr durch */
  .card-glass,
  .feature,
  .faq details{
    background:rgba(255,255,255,.92) !important;  /* vorher .07–1.0 */
    backdrop-filter:blur(8px);                    /* bleibt glasig */
  }

  /* 2. Dunkle Schrift + explizites WebKit-Textfill */
  .card-glass *,
  .feature *,
  .faq summary,
  .faq p{
    color:#1f2937 !important;                    /* dunkles Grau */
    -webkit-text-fill-color:#1f2937 !important;  /* Safari sicher */
  }

  /* 3. Pfeil-Marker behält Marken-Blau */
  .faq summary::marker{ color:#3b82f6; }
}


/* === Video sichtbarer machen (Desktop, Android & iOS) === */
/* Setze dies ans ENDE der Datei, damit es alle früheren Regeln überschreibt. */
.bg-video{
  /* Heller und etwas kontrastreicher, damit das Video stärker wirkt */
  filter: brightness(0.7) contrast(1.05) !important;
}
.bg-overlay{
  /* Statt weißem Schleier: sehr leichtes Schwarz – erhöht die Farbsättigung */
  background: rgba(0,0,0,.25) !important;
  backdrop-filter: blur(1.5px);
}

/* iOS-Safari: gleiche Werte erzwingen */
@supports (-webkit-touch-callout:none){
  .bg-video{ filter: brightness(0.7) contrast(1.05) !important; }
  .bg-overlay{ background: rgba(0,0,0,.25) !important; }
}


/* === Readability & Story-Card Adjustments (Overrides) === */

/* 1) "Unsere Geschichte" als weiße Karte mit dunklem Text */
.story.card-glass{
  background:#ffffff !important;
  color:#1f2937 !important;
  border:1px solid rgba(0,0,0,.06);
}
.story.card-glass h1,
.story.card-glass h2,
.story.card-glass h3,
.story.card-glass p{
  color:#3b414a !important;
}

/* 2) Standard-Überschriften generell dunkel (auf hellen Sektionen) */
h1, h2, h3{
  color:#0f172a;
}

/* 3) Hero-Texte über dem Video: weiß + leichter Schatten für Kontrast */
.hero h1,
.hero h2,
.hero p{
  color:#ffffff !important;
  text-shadow:0 2px 10px rgba(0,0,0,.35);
}

/* 4) Optional: Section-Titel in sehr dunklen Bereichen (falls vorhanden) */
.section-dark h1,
.section-dark h2,
.section-dark h3{
  color:#ffffff;
}

/* === Überschriften gezielt in WEISS (sichtbar über Bild/Video) === */
.founders h2,
.features h2,
.hero h1,
.hero h2,
.testimonials h2,
.faq h2{
  color:#ffffff !important;
  -webkit-text-fill-color:#ffffff;      /* iOS-Safari */
  text-shadow:0 2px 10px rgba(0,0,0,.35); /* besserer Kontrast */
}

/* === FORCE WHITE for "Wähle deinen Livemanager" (incl. nested spans) === */
/* Deckt Fälle ab mit inneren <span>, Brand-Farbe, oder gradient text */
.hero h1, .hero h2,
.hero h1 *, .hero h2 *,
.hero .section-title, .hero .section-title *,
.hero .brand, .hero .brand *{
  color:#ffffff !important;
  -webkit-text-fill-color:#ffffff !important;   /* iOS/Safari gradient override */
  background:none !important;                   /* falls gradient-text aktiv ist */
  -webkit-background-clip:initial !important;
  background-clip:initial !important;
  text-shadow:0 2px 10px rgba(0,0,0,.35);       /* bessere Lesbarkeit */
}

/* === Fix: "Wähle deinen Livemanager" Überschrift in WEISS === */
/* Abschnitt: <section id="manager" class="call-to-action container"> */
#manager > h2,
#manager h2,
section#manager h2,
.call-to-action > h2,
.call-to-action h2{
  color:#ffffff !important;
  -webkit-text-fill-color:#ffffff !important;  /* iOS/Safari */
  text-shadow:0 2px 10px rgba(0,0,0,.35);
  background:none !important;                  /* falls Gradient-Text aktiv ist */
  -webkit-background-clip:initial !important;
  background-clip:initial !important;
}

/* Falls im Titel verschachtelte <span> o.Ä. stehen */
#manager h2 *{
  color:#ffffff !important;
  -webkit-text-fill-color:#ffffff !important;
}