@import url("/styles/colors.css");

*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--bg);color:var(--text);font:16px/1.55 system-ui,Segoe UI,Roboto,Arial,sans-serif}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}

.container{max-width:1180px;margin:0 auto;padding:0 24px}
.header{position:sticky;top:0;backdrop-filter:saturate(140%) blur(6px);background:linear-gradient(180deg,rgba(7,26,27,.75),rgba(7,26,27,.35) 60%,transparent);z-index:10;border-bottom:1px solid var(--line)}
.nav{display:flex;align-items:center;justify-content:space-between;height:72px}
.nav-left{display:flex;align-items:center;gap:14px}
.brand{display:flex;align-items:center;gap:10px}
.brand img{height:28px}
.brand strong{letter-spacing:.12em}
.menu{display:flex;gap:28px;color:var(--text-dim)}
.menu a:hover{color:var(--text)}
.ctas{display:flex;gap:10px}

.btn{display:inline-flex;align-items:center;gap:10px;padding:10px 16px;border-radius:999px;font-weight:600;border:1px solid var(--brand-2);color:var(--text);background:transparent;box-shadow:var(--ring)}
.btn.fill{background:linear-gradient(180deg,var(--brand),var(--brand-2));color:#03201d;border-color:transparent}
.btn.small{padding:8px 12px;font-weight:600}

.hero{background:var(--hero-grad);padding:56px 0 36px;border-bottom:1px solid var(--line)}
.hero-wrap{display:grid;grid-template-columns:1.05fr .95fr;gap:28px;align-items:center}
h1{font-size:46px;line-height:1.1;margin:8px 0 6px}
.lead{color:var(--text-dim);max-width:52ch}
.hero-badge{display:inline-flex;align-items:center;gap:8px;background:rgba(18,57,61,.35);border:1px solid var(--line);color:var(--text-dim);padding:6px 10px;border-radius:999px}

.hero-art{display:grid;place-items:center}
.disk{width:360px;height:360px;border-radius:50%;display:grid;place-items:center;
  background: radial-gradient(70% 70% at 50% 45%, rgba(22,224,199,.15), rgba(18,57,61,.25)),
              radial-gradient(50% 50% at 50% 50%, rgba(22,224,199,.07), transparent 60%);
  box-shadow:0 0 0 2px rgba(22,224,199,.25), inset 0 0 60px rgba(22,224,199,.08), var(--shadow-1);
  position:relative}
.disk:before{content:"";position:absolute;inset:-14px;border-radius:50%;border:2px dashed rgba(22,224,199,.4);}
.hero-art img{width:58%;filter:drop-shadow(0 0 18px rgba(22,224,199,.35))}

.section{padding:24px 0 56px}
.section h2{font-size:22px;color:var(--text);margin:8px 0 18px}

.cards{display:grid;gap:18px;grid-template-columns:repeat(5,minmax(0,1fr))}
.card{border-radius:var(--radius-xl);padding:18px;background:var(--card-bg);border:1px solid var(--line);box-shadow:var(--shadow-1)}
.card .icon{width:40px;height:40px;margin-bottom:10px;opacity:.95}
.card h3{margin:6px 0 6px;font-size:18px}
.card:hover{box-shadow:0 0 0 1px rgba(22,224,199,.28), 0 0 40px rgba(22,224,199,.08); border-color:rgba(22,224,199,.28)}

.panel{border:1px solid var(--line);border-radius:var(--radius-2xl);background:linear-gradient(180deg,rgba(18,57,61,.28),rgba(18,57,61,.15));padding:22px}

.footer{border-top:1px solid var(--line);padding:28px 0;color:var(--text-dim)}
.footer .row{display:flex;align-items:center;justify-content:space-between;gap:18px;flex-wrap:wrap}
.footer .brand img{height:22px}

/* responsive */
@media (max-width: 980px){
  .hero-wrap{grid-template-columns:1fr;gap:22px}
  .cards{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width: 560px){
  .menu{display:none}
  .cards{grid-template-columns:1fr}
  h1{font-size:36px}
}

/* === Hero-Drohne größer ab Desktop === */
@media (min-width: 981px){
  .disk{
    width:520px;
    height:520px;
  }
  .hero-art img{
    width:110%;
  }
}
@media (min-width: 981px){
  .disk{
    box-shadow:
      0 0 0 3px rgba(22,224,199,.28),
      inset 0 0 90px rgba(22,224,199,.12),
      var(--shadow-1);
  }
}
/* === Hero-Drohne ~20% kleiner (Desktop) === */
@media (min-width: 981px){
  .disk{
    width:480px;   /* vorher 520px */
    height:480px;
  }
  .hero-art img{
    width:88%;     /* vorher 110% -> 110 * 0.8 ≈ 88% */
  }
}
/* === Kachel-Buttons: Icons +50% & mehr Präsenz === */
.cards{gap:22px}
.card{padding:24px;border-radius:22px}
.card .icon{
  width:60px;     /* vorher 40px -> +50% */
  height:60px;
  margin-bottom:14px;
  opacity:.98;
  filter:drop-shadow(0 0 10px rgba(22,224,199,.10));
}
.card h3{font-size:20px}
.card p{font-size:15px;color:var(--text-dim)}

/* Mobile: etwas kleiner, damit’s nicht sprengt */
@media (max-width:560px){
  .card{padding:20px}
  .card .icon{width:48px;height:48px;margin-bottom:12px}
}
.card:hover{
  box-shadow:0 0 0 1px rgba(22,224,199,.35), 0 0 44px rgba(22,224,199,.10);
}
/* Top-Leiste: Menü rechts, kompakter */
.header .menu{ margin-left:auto; gap:24px; }
.header .ctas{ display:none; } /* nur falls irgendwo noch vorhanden */
/* === Inline-Dokument-Panel (Kontakt/Impressum) === */
.embed-wrap[hidden]{display:none}
.embed-wrap{padding:24px 0 0;border-bottom:1px solid var(--line);background:linear-gradient(180deg,rgba(18,57,61,.10),transparent)}
.embed-panel{border:1px solid var(--line);border-radius:var(--radius-2xl);
  background:linear-gradient(180deg,rgba(18,57,61,.28),rgba(18,57,61,.15));padding:18px;box-shadow:var(--shadow-1)}
.embed-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:2px 2px 12px}
.embed-head strong{color:var(--text);letter-spacing:.02em}
#embed-frame{width:100%;height:72vh;border:0;border-radius:14px;background:var(--bg-2)}
/* === Mittelbereich: Inline-Dokument (Kontakt/Impressum) === */
#inline-frame{width:100%;height:68vh;border:0;border-radius:14px;background:var(--bg-2)}
/* Sanfte Ein-/Ausblendung */
#hero-embed[hidden]{display:none}
.hero-embed{
  grid-column:1; /* linke Spalte der .hero-wrap */
  border:1px solid var(--line);
  border-radius:var(--radius-2xl);
  background:linear-gradient(180deg,rgba(18,57,61,.28),rgba(18,57,61,.15));
  padding:18px;
  box-shadow:var(--shadow-1);
}
.embed-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:2px 2px 12px}
#hero-embed-frame{width:100%;height:46vh;border:0;border-radius:14px;background:var(--bg-2)}
@media(min-width:1200px){ #hero-embed-frame{height:52vh} }
/* === Inline-Pane exakt im linken Hero-Slot, in Größe gedeckelt === */
#hero-embed[hidden]{display:none}
.hero-embed{
  grid-column:1;               /* linke Spalte der .hero-wrap */
  align-self:start;
  width:clamp(420px, 44vw, 560px);    /* max ~Drohnen-Scheibe */
  border:1px solid var(--line);
  border-radius:var(--radius-2xl);
  background:linear-gradient(180deg,rgba(18,57,61,.28),rgba(18,57,61,.15));
  padding:18px;
  box-shadow:var(--shadow-1);
}
.embed-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:2px 2px 12px}
#hero-embed-frame{
  width:100%;
  height:clamp(340px, 42vh, 520px);   /* Höhe an Scheiben-Optik angelehnt */
  border:0;border-radius:14px;background:var(--bg-2)
}

/* Beim Öffnen: nur den Textblock links ausblenden, Rest bleibt */
#hero-left[hidden]{display:none}
/* kompakteres Hero-Panel */
.hero-embed{
  width:clamp(380px, 38vw, 520px);   /* vorher max 560 */
  padding:12px;                      /* vorher 18 */
  border-radius:16px;                /* vorher var(--radius-2xl) */
}
.embed-head{justify-content:flex-start; gap:10px; margin:0 0 8px}
#hero-embed-frame{height:clamp(320px, 40vh, 480px);}  /* etwas kleiner */
/* feinerer Rahmen & Schatten reduziert */
.hero-embed{border:1px solid rgba(18,57,61,.7); box-shadow:0 10px 24px rgba(0,0,0,.25);}
#hero-embed-frame{background:linear-gradient(180deg, rgba(18,57,61,.18), rgba(18,57,61,.10))}