:root{
  --bg:#0b0f14;
  --bg2:#0e141c;
  --card:#101823;
  --card2:#0f1620;
  --text:#e9f0f7;
  --muted:#9fb0c2;
  --line:rgba(255,255,255,.10);
  --shadow: 0 20px 60px rgba(0,0,0,.55);
  --accent:#f59e0b;
  --accent2:#ffd08a;
  --radius:18px;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}

body{
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, "Noto Sans", "Helvetica Neue", sans-serif;
  background:
    radial-gradient(1200px 800px at 50% 0%, rgba(245,158,11,.10), transparent 60%),
    linear-gradient(180deg, var(--bg), var(--bg2));
  color:var(--text);
}

a{color:inherit;text-decoration:none}
.container{width:min(1120px, 92%); margin:0 auto}

.muted{color:var(--muted)}
.accent{color:var(--accent)}
.tiny{font-size:12px; opacity:.85}

/* =========================
   Header
========================= */
.site-header{
  position:sticky; top:0; z-index:50;
  backdrop-filter: blur(14px);
  background: rgba(10,14,18,.55);
  border-bottom:1px solid rgba(255,255,255,.06);
  box-shadow: 0 14px 60px rgba(0,0,0,.55);
}

.header-inner{
  display:flex; align-items:center; justify-content:space-between;
  padding:16px 0;
  gap:16px;
}

.brand{display:flex; align-items:baseline; gap:10px; letter-spacing:.08em}
.brand-mark{font-weight:800; font-size:26px}
.brand-sub{font-weight:600; font-size:12px; color:rgba(233,240,247,.75)}

.nav-list{list-style:none; display:flex; gap:22px; margin:0; padding:0}
.nav-list a{
  font-size:14px; color:rgba(233,240,247,.80);
  padding:10px 8px; border-radius:12px;
}
.nav-list a:hover{background:rgba(255,255,255,.06); color:var(--text)}

.header-cta{display:flex; align-items:center; gap:14px}
.phone{font-size:14px; color:rgba(233,240,247,.82)}
.phone:hover{color:var(--text)}

/* =========================
   Buttons (Theme)
========================= */
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  gap:10px;
  padding:12px 18px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.10);
  background:rgba(255,255,255,.06);
  box-shadow: 0 10px 30px rgba(0,0,0,.35);
  transition: transform .15s ease, background .15s ease, border-color .15s ease;
  font-weight:700;
}
.btn:hover{
  transform: translateY(-1px);
  background: rgba(255,255,255,.08);
  border-color: rgba(255,255,255,.16);
}

.btn-accent{
  background: linear-gradient(180deg, rgba(245,158,11,.98), rgba(245,158,11,.82));
  border-color: rgba(245,158,11,.6);
  color:#111;
  border-radius: 999px !important;
}
.btn-accent:hover{
  background: linear-gradient(180deg, rgba(245,158,11,1), rgba(245,158,11,.9));
}

.btn-ghost{
  background: rgba(16,24,35,.55);
}

.btn-small{
  padding:10px 14px;
  border-radius:12px;
  font-size:13px;
}

/* =========================
   Burger (falls genutzt)
========================= */
.burger{
  display:none;
  width:44px; height:44px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.10);
  background:rgba(255,255,255,.06);
  cursor:pointer;

  align-items:center;
  justify-content:center;
  flex-direction: column;
  padding:0;
}
.burger span{
  display:block;
  width:18px; height:2px;
  margin:3px 0;
  background:rgba(233,240,247,.92);
  border-radius:2px;
}

/* =========================
   HERO (HTML-only)  -> nur .hero.hero-html
   (dein externes hero.html)
========================= */
.hero.hero-html{
  position:relative;
  min-height:72vh;
  display:grid;
  place-items:center;
  overflow:hidden;
  border-bottom:1px solid rgba(255,255,255,.06);
}

.hero.hero-html .hero-bg{
  position:absolute;
  inset:0;
  background-image:url("/wp-content/themes/brb-drohnenservice/assets/img/hero.jpg");
  background-size:cover;
  background-position:center;
  transform:scale(1.02);
  z-index:0;
}

.hero.hero-html::after{
  content:"";
  position:absolute;
  inset:0;
  background:rgba(0,0,0,.70);
  z-index:1;
}

.hero.hero-html .hero-inner{
  position:relative;
  z-index:2;
  text-align:center;
  padding:64px 0 56px;
}

/* Logo */
.hero.hero-html .hero-logo{
  display:flex;
  justify-content:center;
  margin-bottom:22px;
}
.hero.hero-html .hero-logo img{
  height: clamp(200px, 38vw, 420px);
  width:auto;
  max-width:92vw;
  filter: drop-shadow(0 10px 30px rgba(0,0,0,.55));
}

/* Buttons */
.hero.hero-html .hero-actions{
  display:flex;
  gap:14px;
  justify-content:center;
  align-items:center;
  flex-wrap:wrap;
  margin-top:18px;
}
.hero.hero-html .hero-actions .btn{
  line-height:1;
  white-space:nowrap;
  padding:14px 26px;
  border-radius:999px;
}

/* =========================
   Gutenberg Hero (Cover Block) - für Cover mit class "hero"
   (falls du ihn irgendwo noch nutzt)
========================= */
.wp-block-cover.hero{
  min-height:72vh !important;
  border-bottom:1px solid rgba(255,255,255,.06);
}

.wp-block-cover.hero .wp-block-cover__inner-container{
  width:min(1120px, 92%);
  margin:0 auto;
  text-align:center;
  padding-top:10vh !important;
}

/* Typo im Cover */
.wp-block-cover.hero .hero-title{
  font-weight:900;
  letter-spacing:.02em;
  font-size:86px;
  margin:0;
  color:var(--accent);
  text-shadow: 0 30px 80px rgba(0,0,0,.7);
}
.wp-block-cover.hero .hero-sub{
  margin:6px 0 0;
  font-weight:800;
  letter-spacing:.25em;
  font-size:18px;
  color:rgba(233,240,247,.92);
}
.wp-block-cover.hero .hero-tagline{
  margin:14px 0 0;
  font-weight:700;
  color:rgba(233,240,247,.85);
}
.wp-block-cover.hero .hero-lead{
  margin:18px auto 0;
  width:min(780px, 92%);
  font-size:18px;
  line-height:1.6;
  color:rgba(233,240,247,.78);
}

/* Gutenberg Buttons im Hero */
.wp-block-cover.hero .wp-block-button__link{
  border-radius:14px;
  padding:12px 18px;
  font-weight:800;
  border:1px solid rgba(255,255,255,.10);
  box-shadow: 0 10px 30px rgba(0,0,0,.35);
}

.wp-block-button.btn-accent .wp-block-button__link{
  background: linear-gradient(180deg, rgba(245,158,11,.98), rgba(245,158,11,.82));
  border-color: rgba(245,158,11,.6);
  color:#111;
  border-radius: 999px !important;
}

.wp-block-button.btn-ghost .wp-block-button__link{
  background: rgba(16,24,35,.55);
  color:var(--text);
}

/* =========================
   Sections
========================= */
.section{padding:56px 0}

.section-title{
  text-align:center;
  font-size:34px;
  margin:0 0 26px;
}

.cards{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap:18px;
}

.card{
  background: linear-gradient(180deg, rgba(16,24,35,.90), rgba(16,24,35,.60));
  border:1px solid rgba(255,255,255,.08);
  border-radius: var(--radius);
  overflow:hidden;
  box-shadow: var(--shadow);
}

.card-media{
  height:auto;
  aspect-ratio: 16 / 9;
  background-size: cover;
  background-position: center;
}

.card-body{padding:18px}
.card h3{margin:0 0 10px; font-size:18px}
.card p{
  margin:0 0 14px;
  color:rgba(233,240,247,.75);
  line-height:1.6;
  font-size:14px;
}

/* =========================
   Contact
========================= */
.contact-grid{
  display:grid;
  grid-template-columns: 1.2fr .8fr;
  gap:18px;
  align-items:stretch;
}

.contact-visual{
  border-radius: var(--radius);
  border:1px solid rgba(255,255,255,.08);
  background:
    radial-gradient(800px 400px at 20% 30%, rgba(245,158,11,.14), transparent 60%),
    linear-gradient(180deg, rgba(16,24,35,.85), rgba(12,18,26,.85));
  box-shadow: var(--shadow);
  padding:22px;
}
.contact-visual h2{margin:0 0 10px; font-size:28px}

.contact-form-wrap{
  border-radius: var(--radius);
  border:1px solid rgba(255,255,255,.08);
  background: linear-gradient(180deg, rgba(16,24,35,.85), rgba(12,18,26,.85));
  box-shadow: var(--shadow);
  padding:22px;
}

.contact-form label{display:block; margin-bottom:12px}
.label{
  display:block;
  font-size:12px;
  color:rgba(233,240,247,.70);
  margin-bottom:6px;
}

input, textarea{
  width:100%;
  padding:12px 12px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.05);
  color:var(--text);
  outline:none;
}

input:focus, textarea:focus{
  border-color: rgba(245,158,11,.55);
  box-shadow: 0 0 0 4px rgba(245,158,11,.12);
}

.contact-actions{
  margin-top:10px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  flex-wrap:wrap;
}
.contact-phone{color:rgba(245,158,11,.95); font-weight:800}
.contact-phone:hover{color:var(--accent2)}

/* =========================
   Footer
========================= */
.site-footer{
  border-top:1px solid rgba(255,255,255,.06);
  padding:28px 0;
  background: rgba(8,12,16,.6);
}

.footer-inner{
  display:flex;
  justify-content:space-between;
  gap:18px;
  flex-wrap:wrap;
}
.footer-title{margin:0 0 10px}

/* =========================
   Responsive
========================= */
@media (max-width: 980px){
  /* Cards: Tablet 1 Spalte (wie vorher) */
  .cards{grid-template-columns:1fr}

  .contact-grid{grid-template-columns:1fr}

  /* Menü bleibt auf Mobile/Tablet weg */
  .nav{display:none}
  .burger{display:inline-flex}

  /* Gutenberg Hero */
  .wp-block-cover.hero{min-height:66vh !important}
  .wp-block-cover.hero .hero-title{font-size:64px}
  .wp-block-cover.hero .wp-block-cover__inner-container{padding-top:8vh !important}
}

@media (max-width: 600px){
  /* HTML-Hero: Logo begrenzen, Buttons untereinander */
  .hero.hero-html .hero-logo img{
    height: min(240px, 55vw);
  }
  .hero.hero-html .hero-actions{
    flex-direction: column;
    gap: 12px;
  }
  .hero.hero-html .hero-actions .btn{
    width: min(360px, 92vw);
  }

  /* Gutenberg Hero */
  .wp-block-cover.hero{min-height:78vh !important}
  .wp-block-cover.hero .hero-title{font-size:52px !important}
  .wp-block-cover.hero .wp-block-cover__inner-container{padding-top:7vh !important}

  /* Cards: Bildausschnitt netter */
  .card-media{
    aspect-ratio: 3 / 2;
    background-position: 50% 30%;
  }

  /* Mobile Header Fix */
  .site-header .header-inner{
    padding: 12px 0;
    gap: 10px;
  }
  .brand-mark{ font-size: 22px; }
  .brand-sub{ font-size: 11px; letter-spacing: .12em; }
  .phone{ display:none !important; }
  .header-cta{
    margin-left: auto;
    gap: 10px;
    align-items: center;
  }
  .header-cta .btn{
    padding: 10px 14px;
    border-radius: 14px;
    font-size: 13px;
    white-space: nowrap;
  }
}

@media (max-width: 520px){
  .section-title{font-size:28px}
}

/* Optional: Gutenberg Drone Wrap (falls genutzt) */
.wp-block-cover.hero-brand .hero-drone-wrap{
  display:flex;
  justify-content:center;
  margin:0 auto 14px;
}
.wp-block-cover.hero-brand .hero-drone-wrap img{
  max-width:320px;
  width:min(320px,60vw);
  filter:
    drop-shadow(0 18px 50px rgba(0,0,0,.65))
    drop-shadow(0 6px 18px rgba(245,158,11,.15));
}