/* =========================================================
   Base / Reset
========================================================= */
* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 96px; }
body { font-family: 'Helvetica Neue', Arial, sans-serif; color: #333; background: #fff; line-height: 1.6; }

/* Brand Variablen */
:root{
  --brand-red:  #dc3545;
  --brand-gold: #d4a056;
  --brand-dark: #3a3a3a;
  --brand-light:#ffffff;
  /* Aliase, falls irgendwo noch var(--gold/--red) referenziert wird */
  --gold: var(--brand-gold);
  --red:  var(--brand-red);
  --dark: var(--brand-dark);
}

/* Utilities */
.visually-hidden{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}
.container { max-width: 1100px; margin: 0 auto; padding: 0 1.25rem; }

/* =========================================================
   Navbar / Navigation
========================================================= */
.navbar{
  position: fixed; top:0; left:0; right:0;
  display:flex; align-items:center; justify-content:space-between;
  padding: .75rem 1rem;
  background:#333; color:#fff;
  box-shadow: 0 2px 10px rgba(0,0,0,.15);
  z-index:1000;
  min-height:64px;
}
.logo{
  width:56px; height:56px;
  background: url("#") no-repeat center / contain;
}
.nav-links{
  list-style:none; display:flex; gap:2rem;
}
.nav-links a{
  color:#fff; text-decoration:none; font-weight:600;
  transition: color .2s ease;
}
.nav-links a:hover, .nav-links a:focus{ color: var(--brand-gold); outline:none; }

/* Hamburger (mobil/tablet) */
.nav-toggle{
  display:none; align-items:center; justify-content:center;
  width:42px; height:42px; border-radius:10px;
  background:#fff; border:1px solid rgba(0,0,0,.08);
  box-shadow:0 2px 10px rgba(0,0,0,.06);
  cursor:pointer;
}
.nav-toggle .bar{
  display:block; width:22px; height:2px; background:var(--brand-dark);
  border-radius:2px; transition:transform .25s ease, opacity .2s ease;
}
.nav-toggle .bar + .bar{ margin-top:5px; }
/* X-Icon aktiv */
.nav-toggle.active .bar:nth-child(2){ transform:translateY(7px) rotate(45deg); }
.nav-toggle.active .bar:nth-child(3){ opacity:0; }
.nav-toggle.active .bar:nth-child(4){ transform:translateY(-7px) rotate(-45deg); }

/* Off-canvas Menü: ≤ 1024px */
@media (max-width:1024px){
  .nav-toggle{ display:inline-flex; }
  .nav-links{
    position:fixed; top:0; right:0; bottom:0; width:78vw; max-width:320px;
    background:#fff; transform:translateX(100%); transition:transform .28s ease-out;
    display:flex; flex-direction:column; gap:0; padding:92px 24px 24px; z-index:1001;
    box-shadow:-16px 0 40px rgba(0,0,0,.12);
  }
  .nav-links li{ margin:0 0 8px; }
  .nav-links a{ color:var(--brand-dark); display:block; padding:12px 10px; border-radius:10px; }
  .nav-links a:hover{ background:rgba(0,0,0,.05); }

  .nav-links.open{ transform:translateX(0); }
  body.nav-open{ overflow:hidden; }
  .nav-overlay{
    position:fixed; inset:0; background:rgba(0,0,0,.35);
    opacity:0; pointer-events:none; transition:opacity .2s ease; z-index:1000;
  }
  .nav-overlay.show{ opacity:1; pointer-events:auto; }
}

/* =========================================================
   Hero (klassisch wie zuvor)
========================================================= */
.hero{
  min-height: 60vh; /* nicht Vollbild */
  display:flex; align-items:center; justify-content:center;
  text-align:center; padding: 6rem 1rem 3rem; /* Platz für fixe Navbar */
  background:#fff; /* kein dunkles Bild-Overlay */
}

/* ===== Hero: dezente Hexagon-Deko in den Ecken (ohne Overlay) ===== */
.hero{ position: relative; overflow: hidden; }

/* Großes Hex oben links */
.hero::before,
.hero::after{
  content: "";
  position: absolute;
  width: min(34vw, 420px);
  height: min(34vw, 420px);
  pointer-events: none;
  z-index: 0;            /* hinter dem Content */
  opacity: .25;          /* dezent */
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}



/* Hero-Content sicher über den Hex-Elementen */
.hero .hero-content{ position: relative; z-index: 1; }


.hero-content{
  position:relative; z-index:1; color:var(--brand-dark);
  background: transparent; padding: 0; border-radius: 0; backdrop-filter: none;
}
.brand-logo-banner{ width:min(820px, 85vw); height:auto; display:block; margin:0 auto 1.25rem; }
.brand-headline{ font-size: clamp(2.2rem, 6vw, 3.25rem); line-height:1.1; font-weight:800; letter-spacing:.2px; margin:.25rem 0 .5rem; }
.brand-headline .line1, .brand-headline .line2{ display:block; }
.brand-red{ color: var(--brand-red); }
.brand-brown{ color: #8a5a2b; }
.brand-subline{ font-size: clamp(1rem, 2.5vw, 1.2rem); color:#666; margin-bottom:1.25rem; }

/* CTA */
.btn-primary{
  background: var(--brand-gold); color:#fff; padding:1rem 2rem;
  border-radius:30px; text-decoration:none; display:inline-block; font-weight:600;
  transition: transform .2s ease, box-shadow .2s ease, background .2s ease;
}
.btn-primary:hover{
  background: color-mix(in srgb, var(--brand-gold) 85%, black 15%);
  transform: translateY(-2px);
  box-shadow: 0 5px 15px rgba(212,160,86,.35);
}

/* =========================================================
   Sections
========================================================= */
.section{ padding: 6rem 1.25rem; text-align:center; }
.section h2{ font-size: 2.5rem; margin-bottom: 3rem; font-weight: 700; color:#333; }
.bg-light{ background:#f9f9f9; }

/* =========================================================
   Leistungen – Honeycomb Cards (2 Reihen: oben 3 / unten 4)
========================================================= */
/* Für diese Sektion eine breitere Arbeitsfläche auf Desktop,
   damit 3 + 4 Hex sauber nebeneinander passen */
#leistungen .container{
  max-width: 1520px;
}

.honeycomb-container{ display:flex; flex-direction:column; align-items:center; gap:0; margin: 2rem 0; }

/* Jede Reihe ist eine eigene Flex-Reihe (Markup gibt 2 Reihen vor) */
.hex-row{ display:flex; gap:12px; flex-wrap:nowrap; justify-content:center; }
.hex-row.top{ margin-bottom: -90px; }   /* Versatz für Honeycomb */
.hex-row.bottom{ margin-top: 0; }

/* Karten-Größe Desktop */
.card{
  position:relative; width:360px; height:315px; cursor:pointer;
  clip-path: polygon(50% 0%,93.3% 25%,93.3% 75%,50% 100%,6.7% 75%,6.7% 25%);
  overflow:hidden; text-align:left; border:6px solid transparent; transition: transform .3s ease, border-color .2s ease, box-shadow .2s ease;
}
.card:hover{ transform: scale(1.05); border-color: var(--brand-red); box-shadow:0 0 20px color-mix(in srgb, var(--brand-red) 40%, transparent); }
.card img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }

/* Titel-Overlay unten */
#leistungen .card::after{
  content:''; position:absolute; left:0; right:0; bottom:0; height:46%;
  background: linear-gradient(to top, rgba(0,0,0,.70) 0%, rgba(0,0,0,0) 100%);
  z-index:1; pointer-events:none;
}
#leistungen .card .card-content{
  position:absolute; left:0; right:0; bottom:0; padding:12px 14px 14px;
  z-index:2; background:transparent; text-align:left;
}
#leistungen .card h3{
  margin:0 0 6px; color:#fff; font-weight:800; line-height:1.2;
  font-size: clamp(1rem, 2vw, 1.25rem); text-shadow:0 1px 2px rgba(0,0,0,.45);
  border-bottom:2px solid rgba(212,160,86,0); transition: transform .2s ease, border-color .2s ease;
}
#leistungen .card p{ margin:0; color:#fff; opacity:.95; font-size:.9rem; line-height:1.3; display:none; }

/* Desktop: mehr Infos beim Hover */
@media (hover:hover){
  #leistungen .card:hover::after{ height:70%; }
  #leistungen .card:hover .card-content p{ display:block; }
  #leistungen .card:hover h3{ transform: translateY(-2px); border-bottom-color: var(--brand-gold); }
}

/* Tablet */
@media (max-width:1024px){
  #leistungen .container{ max-width: 1100px; } /* wieder normale Containerbreite */
  .hex-row{ gap:16px; flex-wrap:wrap; margin: 0; }
  .hex-row.top{ margin-bottom: 0; }
  .card{ width:260px; height:230px; }
  #leistungen .card::after{ height:52%; }
  #leistungen .card p{ display:none; } /* nur Titel */
}

/* Mobile */
@media (max-width:768px){
  .card{ width:210px; height:190px; }
  .section{ padding: 4rem 1.25rem; }
  .section h2{ font-size:2rem; margin-bottom:2rem; }
}
@media (max-width:520px){
  /* auf Karten-Layout wechseln */
  .card{
    width:92vw; height:auto; clip-path:none; border-radius:16px; border-width:0;
  }
  .card img{ position:relative; border-radius:16px 16px 0 0; }
  #leistungen .card .card-content{
    position:relative; padding: 1rem 1rem 1.25rem; background: rgba(0,0,0,.55);
    border-radius: 0 0 16px 16px;
  }
  #leistungen .card h3{ font-size:1.1rem; }
}

/* =========================================================
   Team – 3 nebeneinander (Desktop), 2 (Tablet), 1 (Phone)
========================================================= */
#team .team-intro{ max-width: 900px; margin: 0 auto 1.5rem; }
#team h3{ font-size:1.5rem; margin-bottom:.5rem; font-weight:700; }
.team-text{ font-size:1.1rem; line-height:1.6; color:#555; }

/* Grid statt Flex, damit 3/2/1 sauber steht */
.team-gallery{
  display:grid; gap: 1rem; margin-top:1rem;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: start;
}
.team-gallery img{
  width:100%; height:auto; display:block;
  transition: transform .3s ease, box-shadow .3s ease;
}

@media (max-width:1024px){
  .team-gallery{ grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (max-width:600px){
  .team-gallery{ grid-template-columns: 1fr; }
}

/* =========================================================
   Analyse-Sektion (Video)
========================================================= */
.analyse-section{
  background: linear-gradient(180deg, #ffffff 0%, #fff8f4 35%, #fdf5ee 100%);
  padding: 6rem 0;
}
.analyse-section h2{
  font-size:2.5rem; margin-bottom:2rem; font-weight:800;
  color:var(--brand-dark); /* Fallback */
  background-image: linear-gradient(90deg, var(--brand-gold), var(--brand-red));
  background-clip: text; -webkit-background-clip:text;
}
@supports (-webkit-background-clip:text){
  .analyse-section h2{ -webkit-text-fill-color: transparent; }
}

.video-wrapper{
  width:100%; max-width:820px; margin:0 auto 2rem; border-radius:20px; overflow:hidden;
  box-shadow: 0 10px 40px rgba(0,0,0,.15);
}
.video-wrapper video{ display:block; width:100%; height:auto; }

.analyse-text{
  max-width: 750px; margin:0 auto; text-align:left;
  font-size:1.125rem; line-height:1.75rem; color:#1f2937;
}
.analyse-text p{ margin-bottom:1.5rem; }
.analyse-text ul{ list-style:disc; padding-left:1.5rem; margin-bottom:2rem; }
.analyse-text li{ margin-bottom:.5rem; }
.analyse-text .highlight{ font-weight:700; color:var(--brand-red); text-align:center; margin:2rem 0; }

.analyse-cta{ margin-top: .5rem; }

@media (max-width:768px){
  .analyse-section h2{ font-size:2rem; margin-bottom:1.25rem; }
}

/* =========================================================
   Kontaktformular
========================================================= */
.contact-form{
  display:flex; flex-direction:column; gap:1.25rem;
  max-width:500px; margin: 0 auto;
}
.contact-form input, .contact-form textarea{
  padding:1rem; border:2px solid #e0e0e0; border-radius:15px; font-size:1rem; transition: border-color .2s ease;
}
.contact-form input:focus, .contact-form textarea:focus{ outline:none; border-color: var(--brand-gold); }
@media (max-width:480px){ .contact-form{ max-width:92vw; } .contact-form button{ width:100%; } }

/* =========================================================
   Footer
========================================================= */
.footer{ background:#333; color:#fff; text-align:center; padding:2rem; margin-top:2rem; }

/* =========================================================
   Cookie Banner
========================================================= */
.cookie-banner{
  position:fixed; left:0; right:0; bottom:0;
  background:#333; color:#fff; padding:1rem 2rem;
  display:flex; justify-content:space-between; align-items:center; z-index:2000; font-size:.9rem;
}
.cookie-buttons{ display:flex; gap:.5rem; }
.cookie-buttons .btn-primary{ background: var(--brand-gold); color:#fff; border:none; padding:.6rem 1rem; border-radius:5px; }
.cookie-buttons .btn-secondary{ background:#777; color:#fff; border:none; padding:.6rem 1rem; border-radius:5px; }
@media (max-width:640px){
  .cookie-banner{ flex-direction:column; align-items:stretch; gap:.75rem; }
  .cookie-buttons{ justify-content:flex-end; }
}


/* ===== Hero: 4 unterschiedliche Corner-Bilder (ohne HTML-Änderung) ===== */
.hero{
  position: relative; /* Deko sicher hinter dem Content */
  /* Vier Background-Layer – je Ecke ein Bild */
  background-image:
    url("assets/hex/hex-gold.png"),
    url("assets/hex/hex-antrazit.png"),
    url("assets/hex/hex-orange.png"),
    url("assets/hex/hex-grau.png");
  background-repeat: no-repeat, no-repeat, no-repeat, no-repeat;
  /* Grundgrößen & Positionen (Desktop) */
  --hero-hex-size: clamp(140px, 22vw, 360px);
  --hero-hex-offset: -48px; /* leicht nach außen geschoben */
  background-size:
    var(--hero-hex-size),
    var(--hero-hex-size),
    var(--hero-hex-size),
    var(--hero-hex-size);
  background-position:
    left   var(--hero-hex-offset) top    var(--hero-hex-offset),
    right  var(--hero-hex-offset) top    var(--hero-hex-offset),
    left   var(--hero-hex-offset) bottom var(--hero-hex-offset),
    right  var(--hero-hex-offset) bottom var(--hero-hex-offset);
  /* belassene Hintergrundfarbe bleibt bestehen */
}

/* Tablet: etwas kleiner & weniger Offset */
@media (max-width: 1024px){
  .hero{
    --hero-hex-size: clamp(120px, 26vw, 260px);
    --hero-hex-offset: -32px;
  }
}

/* Phone: noch kleiner & näher an den Rand, damit nix überlappt */
@media (max-width: 600px){
  .hero{
    --hero-hex-size: clamp(100px, 28vw, 200px);
    --hero-hex-offset: -18px;
  }
}

/* Falls einzelne Ecken eigene Größen brauchen, kannst du sie separat setzen: */
/*
.hero{
  background-size:
    320px,   /!* TL *!/
    280px,   /!* TR *!/
    260px,   /!* BL *!/
    300px;   /!* BR *!/
}
*/
/* === Leistungen: h3 mittig im Hexagon, Texte unten (nur Desktop-Hover) === */
#leistungen .card .card-content{
  position: absolute;
  inset: 0;                            /* füllt die ganze Karte */
  display: flex;
  align-items: center;                 /* vertikal zentrieren */
  justify-content: center;             /* horizontal zentrieren */
  text-align: center;
  padding: 14px;
  background: transparent;
  z-index: 2;
  pointer-events: none;                /* damit nichts klick-blockiert wird */
}

/* zentrierter Titel */
#leistungen .card .card-content h3{
  margin: 0;
  color: #fff;
  font-weight: 800;
  line-height: 1.15;
  font-size: clamp(1.05rem, 1.8vw, 1.35rem);
  text-shadow: 0 1px 2px rgba(0,0,0,.45);

  /* für Lesbarkeit auf hellen Bildern: dezente Kapsel */
  background: rgba(0,0,0,.35);
  padding: 6px 10px;
  border-radius: 12px;

  /* frühere Unterstreichung/Movement deaktivieren */
  border-bottom: none;
  transform: none;
}

/* Detailtexte unten andocken – standardmäßig versteckt */
#leistungen .card .card-content p{
  position: absolute;
  left: 14px; right: 14px; bottom: 14px;
  margin: 0;
  color: #fff; opacity: .95;
  font-size: .9rem; line-height: 1.3;
  display: none;                       /* erst auf Desktop-Hover sichtbar */
}

/* Desktop: Texte auf Hover sichtbar, Gradientfläche etwas höher */
@media (hover:hover){
  #leistungen .card:hover .card-content p{ display: block; }
  #leistungen .card:hover::after{ height: 70%; }
}

/* Tablet/Phone: nur Titel (ruhigere Optik) */
@media (max-width:1024px){
  #leistungen .card .card-content p{ display: none !important; }
}


/* ===== Service-Modal ===== */
.svc-modal[hidden]{ display:none; }

.svc-modal{
  position: fixed; inset: 0; z-index: 3000;
  display: grid; place-items: center;
}

.svc-modal__backdrop{
  position: absolute; inset: 0;
  background: rgba(0,0,0,.45);
  backdrop-filter: blur(2px);
}

.svc-modal__dialog{
  position: relative; z-index: 1;
  width: min(720px, 92vw);
  background: #fff; color: #1f2937;
  border-radius: 20px;
  box-shadow: 0 20px 80px rgba(0,0,0,.35);
  padding: clamp(16px, 3vw, 28px);
  animation: svc-pop .22s ease-out both;
}

.svc-modal__title{
  font-size: clamp(1.35rem, 2.4vw, 1.8rem);
  font-weight: 800; color: var(--brand-dark);
  margin: 0 0 .5rem;
  background: linear-gradient(90deg, var(--brand-gold), var(--brand-red));
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}

.svc-modal__body{
  font-size: 1rem; line-height: 1.65;
}
.svc-modal__body p{ margin: .5rem 0 1rem; color: #374151; }
.svc-modal__body ul{ margin: 0 0 1rem 1.25rem; }
.svc-modal__body li{ margin: .35rem 0; }

.svc-modal__actions{
  margin-top: 1rem; display: flex; justify-content: flex-end; gap: .5rem;
}
.svc-modal__cta{ border-radius: 12px; }

/* Close-Button */
.svc-modal__close{
  position: absolute; top: 10px; right: 10px;
  width: 40px; height: 40px; border-radius: 50%;
  border: 0; background: #f3f4f6; color: #111; cursor: pointer;
  font-size: 18px; line-height: 1;
  box-shadow: 0 2px 8px rgba(0,0,0,.12);
}
.svc-modal__close:hover{ background:#e5e7eb; }

@keyframes svc-pop{
  from{ opacity: 0; transform: translateY(8px) scale(.98); }
  to  { opacity: 1; transform: translateY(0) scale(1); }
}

/* Mobile Feinschliff */
@media (max-width: 480px){
  .svc-modal__dialog{ border-radius: 16px; }
}


/* === Abstand zwischen Leistungen (#leistungen) und Team (#team) reduzieren === */

/* Desktop: straffer Übergang */
#leistungen.section { padding-bottom: 3rem; }   /* vorher 6rem */
#team.section       { padding-top:    3rem; }   /* vorher 6rem */

/* Kleinere Geräte: noch kompakter */
@media (max-width: 1024px){
  #leistungen.section { padding-bottom: 2.25rem; }
  #team.section       { padding-top:    2.25rem; }
}

/* Interner Abstand unter dem Honeycomb ein wenig straffen */
#leistungen .honeycomb-container { margin-bottom: 1rem; }
@media (max-width: 1024px){
  #leistungen .honeycomb-container { margin-bottom: .5rem; }
}

/* Optional – falls du es SUPER eng willst, nimm zusätzlich (kannst du weglassen):
#leistungen.section + #team.section { margin-top: -0.75rem; }
*/
/* --- Analyse-H2: robust gegen Mobile-WebKit-Bug (iOS) --- */

/* Fallback-Farbe + Gradient-Setup */
.analyse-section h2{
  position: relative;
  z-index: 1;
  color: var(--brand-dark); /* sichtbare Basisfarbe */
  background-image: linear-gradient(90deg, var(--brand-gold), var(--brand-red));
  background-clip: text;             /* Standard */
  -webkit-background-clip: text;     /* WebKit */
  opacity: 1 !important;             /* falls irgendwo Animation/Reveal aktiv ist */
  transform: none !important;
}

/* Wo WebKit-Clip zuverlässig geht: transparenter Text = Gradient sichtbar */
@supports (-webkit-background-clip:text){
  .analyse-section h2{
    -webkit-text-fill-color: transparent;
  }
}

/* iOS/Phones-Fallback: lieber solide Farbe als „unsichtbar“ */
@media (max-width: 640px){
  .analyse-section h2{
    -webkit-text-fill-color: initial !important;
    background-image: none !important;
    color: var(--brand-dark) !important;
    text-shadow: none !important;
  }
}