:root{
  --navy:#0b1220; /* Hintergrund */
  --navy-2:#0e1628; /* Panels */
  --violet:#b266ff; /* Akzent 1 */
  --violet-2:#7e5cff; /* Akzent 1 dunkel */
  --orange:#ff9900; /* Akzent 2 */
  --orange-2:#ffb347; /* Akzent 2 hell */
  --white:#ecf0ff;
  --muted:#9aa4c2;
  --glass: rgba(255,255,255,0.06);
  --radius:20px;
  --shadow: 0 10px 25px rgba(0,0,0,.35), inset 0 0 0 1px rgba(255,255,255,.06);
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font: 16px/1.6 ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
  background: radial-gradient(at 20% 30%, #ff990030, transparent 60%),
              radial-gradient(at 80% 70%, #b266ff40, transparent 70%),
              radial-gradient(at 60% 20%, #ffb34720, transparent 60%),
              linear-gradient(180deg, #0b1220 0%, #0e1628 100%);
  background-attachment: fixed;
  background-size: cover;
  color: var(--white);
  overflow-x:hidden;
  scroll-behavior: smooth;
}

/* Sprachumschaltung */
.lang-de, .lang-en, .lang-zh { display: inline; }
body[data-lang="de"] .lang-en,
body[data-lang="de"] .lang-zh { display: none; }
body[data-lang="en"] .lang-de,
body[data-lang="en"] .lang-zh { display: none; }
body[data-lang="zh"] .lang-de,
body[data-lang="zh"] .lang-en { display: none; }

a{color:inherit;text-decoration:none}
.container{width:min(1150px, 92vw); margin-inline:auto}

/* ---------- Floating background orbs ---------- */
.orb{position:fixed; filter:blur(60px); opacity:.35; pointer-events:none; z-index:-1}
.orb.violet{width:38vmax; height:38vmax; background:radial-gradient(circle at 30% 30%, var(--violet), transparent 60%); top:-6vmax; left:-6vmax}
.orb.orange{width:45vmax; height:45vmax; background:radial-gradient(circle at 70% 70%, var(--orange), transparent 60%); bottom:-10vmax; right:-12vmax}

/* ---------- Header / Nav ---------- */
header{
  position:sticky; top:0; z-index:50; backdrop-filter: blur(10px);
  background: linear-gradient(180deg, rgba(11,18,32,.8), rgba(11,18,32,.45));
  border-bottom:1px solid rgba(255,255,255,.06);
}
.nav{display:flex; align-items:center; justify-content:space-between; gap:24px; padding:14px 0}
.brand{display:flex; align-items:center; gap:14px; letter-spacing:.04em; font-weight:700}
.brand img{
  height:40px;
  width:auto;
  flex:0 0 auto;
  border-radius:8px;
}
.brand .name{font-size:1.05rem}
.pill{border:1px solid rgba(255,255,255,.12); padding:8px 14px; border-radius:999px; background:rgba(255,255,255,.03)}
.nav a:hover{color:var(--orange)}

.lang-toggle{
  display:flex;
  align-items:center;
  gap:6px;
  font-size:.85rem;
}
.lang-toggle a{
  padding:4px 8px;
  border-radius:999px;
  border:1px solid transparent;
  opacity:.7;
}
.lang-toggle a.active{
  border-color:rgba(255,255,255,.35);
  opacity:1;
}

/* ---------- Hero ---------- */
.hero{position:relative; padding:96px 0 72px}
.title{font-size: clamp(2.2rem, 6vw, 4rem); line-height:1.1; margin:0 0 18px; letter-spacing:.02em}
.title .accent{background:linear-gradient(90deg, var(--orange), var(--violet)); -webkit-background-clip:text; background-clip:text; color:transparent}
.lead{color:var(--muted); font-size: clamp(1.05rem, 2.2vw, 1.25rem)}
.cta{display:flex; gap:12px; margin-top:28px}
.btn{padding:12px 18px; border-radius:12px; border:1px solid rgba(255,255,255,.12); background:linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02)); color:var(--white); box-shadow: var(--shadow); transition: transform .2s ease, box-shadow .2s ease, background .3s; cursor:pointer; display:inline-flex; align-items:center; justify-content:center}
.btn.primary{background:linear-gradient(180deg, var(--orange), var(--orange-2)); color:#1a1200; border-color:rgba(255,153,0,.35); font-weight:700}
.btn:hover{transform: translateY(-2px)}

/* ---------- Feature Cards ---------- */
.grid{display:grid; grid-template-columns:repeat(3, 1fr); gap:18px; margin:44px 0 8px}
.card{padding:22px; border-radius:var(--radius); background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
      border:1px solid rgba(255,255,255,.12); box-shadow: var(--shadow); transition: transform .25s ease, border-color .25s ease}
.card:hover{transform: translateY(-6px); border-color: rgba(178,102,255,.45)}
.card h3{margin:4px 0 8px; font-size:1.05rem; letter-spacing:.04em}
.card p{margin:0; color:var(--muted)}
.chip{display:inline-flex; align-items:center; gap:8px; padding:6px 10px; border-radius:999px; font-size:.8rem; color:#1a1220; background:linear-gradient(90deg, var(--orange), var(--orange-2)); font-weight:700; letter-spacing:.06em}

/* ---------- Showcase band ---------- */
.band{margin:72px 0; border-radius:calc(var(--radius) + 6px); overflow:hidden; position:relative; border:1px solid rgba(255,255,255,.08); box-shadow: var(--shadow)}
.band::before{content:""; position:absolute; inset:0; background:
  radial-gradient(800px 120px at 10% 10%, rgba(255,153,0,.25), transparent 60%),
  radial-gradient(1200px 120px at 90% 70%, rgba(178,102,255,.25), transparent 60%);
  mix-blend: screen; opacity:.7}
.band .inner{display:grid; grid-template-columns: 1.2fr 1fr; gap:0}
.panel{padding:34px; background:linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.01))}
.panel.right{background:linear-gradient(180deg, rgba(178,102,255,.08), rgba(255,255,255,0)); border-left:1px solid rgba(255,255,255,.08)}
.kpi{display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin-top:18px}
.kpi .n{font:700 clamp(1.6rem,4.2vw,2.6rem)/1 "Segoe UI", ui-sans-serif}
.muted{color:var(--muted)}

/* ---------- Footer ---------- */
footer{margin:90px 0 48px; color:var(--muted)}
.foot{display:flex; align-items:center; justify-content:space-between; gap:16px; padding:18px 0; border-top:1px solid rgba(255,255,255,.08)}
.small{font-size:.9rem}

/* ---------- Responsive ---------- */
@media (max-width: 960px){
  .grid{grid-template-columns:1fr 1fr}
  .band .inner{grid-template-columns:1fr}
}
@media (max-width: 640px){
  .grid{grid-template-columns:1fr}
  .brand .name{display:none}
  .cta{flex-direction:column}
}

/* ---------- Simple float animation ---------- */
@keyframes float{0%{transform:translateY(0)} 50%{transform:translateY(-6px)} 100%{transform:translateY(0)}}
.brand img{animation: float 6s ease-in-out infinite}

/* ---------- Einsatzberichte (Accordion) ---------- */
.reports{margin:84px 0}
.report-wrap{display:grid; gap:12px}
details.report{
  border:1px solid rgba(255,255,255,.12);
  border-radius: var(--radius);
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
  box-shadow: var(--shadow);
  overflow:hidden;
}
details.report[open]{border-color: rgba(178,102,255,.45)}
.report summary{
  list-style:none; cursor:pointer; padding:16px 18px; display:flex; align-items:center; gap:12px;
}
.report summary::-webkit-details-marker{display:none}
.report .badge{
  display:inline-flex; align-items:center; gap:8px; padding:6px 10px; border-radius:999px; font-size:.78rem;
  color:#1a1220; background:linear-gradient(90deg, var(--orange), var(--orange-2)); font-weight:700; letter-spacing:.06em;
}
.report h3{margin:0; font-size:1.02rem; letter-spacing:.02em}
.report .meta{margin-left:auto; display:flex; gap:16px; color:var(--muted); font-size:.9rem}
.report .content{padding:0 18px 18px; color:var(--muted)}
.report .grid-meta{display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin:10px 0 6px}
.report .k{
  font-size:.85rem; background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.08);
  padding:10px 12px; border-radius:12px;
}
.report .tags{display:flex; flex-wrap:wrap; gap:8px; margin-top:8px}
.tag{
  font-size:.78rem; color:#1a1220; padding:4px 10px; border-radius:999px;
  background:linear-gradient(90deg, var(--violet-2), var(--violet));
  letter-spacing:.04em; font-weight:700; opacity:.95;
}

@media (max-width: 720px){
  .report .meta{display:none}
  .report .grid-meta{grid-template-columns:1fr}
}

/* ---------- Glatter Hintergrundblock für den Reports-Abschnitt ---------- */
.reports-pane {
  position: relative;
  margin: 96px auto;
  padding: 80px 48px;
  border-radius: calc(var(--radius) + 8px);
  background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.015));
  border: 1px solid rgba(255,255,255,.06);
  box-shadow: var(--shadow);
}

.reports-pane::before {
  content: "";
  position: absolute;
  left: 0; right: 0; top: -60px; height: 60px;
  background: linear-gradient(180deg, rgba(178,102,255,.18), rgba(255,255,255,0));
  filter: blur(14px);
  opacity: .4;
  pointer-events: none;
}
@media (max-width: 720px){
  .reports-pane {
    padding: 64px 24px;
  }
}

/* ---------- sichtbarer Toggle-Pfeil im Summary ---------- */
.report summary {
  position: relative;
  padding-right: 40px;
}

.report summary::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 18px;
  width: 10px;
  height: 10px;
  border-right: 2px solid var(--muted);
  border-bottom: 2px solid var(--muted);
  transform: translateY(-50%) rotate(45deg);
  transition: transform .25s ease, border-color .25s ease;
}

details.report[open] summary::after {
  transform: translateY(-50%) rotate(225deg);
  border-color: var(--orange);
}

.crewlist {
  width: 100%;
  border-collapse: collapse;
  background: var(--glass);
  border-radius: 12px;
  overflow: hidden;
  margin-top: 1rem;
}

.crewlist th,
.crewlist td {
  padding: 0.75rem 1rem;
  text-align: left;
  color: var(--white);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.crewlist th {
  background: rgba(255, 255, 255, 0.08);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-size: 0.85rem;
  color: var(--muted);
}

.crewlist tr:last-child td {
  border-bottom: none;
}

/* ---------- Tools-Sektion (nur Buttons, keine festen iframes) ---------- */
.tools-section {
  margin-top: 64px;
  margin-bottom: 32px;
}
.tools-block {
  margin-top: 18px;
  margin-bottom: 32px;
}

/* ---------- Overlay / Modal für iFrames ---------- */
.modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.72);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 999;
}
.modal-backdrop.active {
  display: flex;
}
.modal-inner {
  position: relative;
  width: min(1200px, 96vw);
  height: min(80vh, 900px);
  background: #050814;
  border-radius: 18px;
  box-shadow: 0 20px 50px rgba(0,0,0,0.75);
  border: 1px solid rgba(255,255,255,0.18);
  padding: 16px 16px 12px;
  display: flex;
  flex-direction: column;
}
.modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 8px;
}
.modal-title {
  font-size: 1rem;
  color: var(--muted);
}
.modal-close {
  border: none;
  background: rgba(255,255,255,0.06);
  color: var(--white);
  border-radius: 999px;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 1rem;
}
.modal-close:hover {
  background: rgba(255,255,255,0.15);
}
.modal-iframe {
  flex: 1;
  width: 100%;
  border: none;
  border-radius: 10px;
  background: #000;
}

/* ---------- Subpage Layout & Kontaktformular ---------- */
.page{
  padding:96px 0 64px;
}

.contact-form{
  display:flex;
  flex-direction:column;
  gap:1rem;
  margin-top:1rem;
  max-width:520px;
}

.contact-form label{
  display:flex;
  flex-direction:column;
  font-size:0.9rem;
  color:var(--muted);
  gap:0.25rem;
}

.contact-form input,
.contact-form textarea{
  background:rgba(0,0,0,0.4);
  border-radius:0.5rem;
  border:1px solid rgba(255,255,255,0.08);
  padding:0.6rem 0.8rem;
  color:var(--white);
  font:inherit;
}

.contact-form input:focus,
.contact-form textarea:focus{
  outline:none;
  border-color:var(--violet);
}

.info-panel {
  margin: 1.5rem auto;
  padding: 1.25rem 1.5rem;
  border-radius: 12px;
  background: var(--glass);
  border: 1px solid rgba(188, 167, 255, 0.3);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.35);
  color: var(--white);
}

.info-panel h2 {
  margin-top: 0;
  margin-bottom: 0.5rem;
  font-size: 1.25rem;
  color: var(--orange);
}

.info-panel p {
  margin: 0;
  color: var(--muted);
  line-height: 1.5;
}