/* ============================================================
   CONVOCIS · Dark-Design (Variante B) — gemeinsames Stylesheet
   Kompiliert aus dem Claude-Design-Canvas-Export zu statischem,
   runtime-freiem CSS. Läuft ohne Framework, degradiert ohne JS.
   Palette: Navy #16294a/#1F3A5F · Terrakotta #C96F4A · Grün #4C9A6E
   Schrift: Lora (Headlines) + Karla (Text)
   ============================================================ */

/* ---------- Schriften: lokal gehostet (DSGVO-konform & schneller, kein Google-CDN) ---------- */
@font-face {
  font-family: 'Lora';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('fonts/lora-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Karla';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('fonts/karla-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; color-scheme: dark; }
body {
  margin: 0;
  background: #16294a;
  color: #BCC9DC;
  font-family: Karla, system-ui, -apple-system, sans-serif;
  overflow-x: clip;
}

/* Skip-Link (Barrierefreiheit) */
.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: #C96F4A; color: #fff; padding: 10px 16px; border-radius: 0 0 8px 0;
  font-weight: 700; font-size: 14px; text-decoration: none;
}
.skip-link:focus { left: 0; }

a { color: inherit; }
img { max-width: 100%; height: auto; }

/* ---------- Keyframes ---------- */
@keyframes bvLive { 0%{box-shadow:0 0 0 0 rgba(76,154,110,0.55)} 70%{box-shadow:0 0 0 10px rgba(76,154,110,0)} 100%{box-shadow:0 0 0 0 rgba(76,154,110,0)} }
@keyframes bvFloat { 0%{transform:translateY(0)} 50%{transform:translateY(-18px)} 100%{transform:translateY(0)} }
@keyframes bvFloatBig { 0%{transform:translateY(0)} 50%{transform:translateY(-20px)} 100%{transform:translateY(0)} }
@keyframes bvDrift { 0%{transform:translate(0,0) scale(1)} 50%{transform:translate(-24px,22px) scale(1.05)} 100%{transform:translate(0,0) scale(1)} }
@keyframes bvWave { 0%,100%{transform:scaleY(0.18)} 50%{transform:scaleY(1)} }
@keyframes bvMarq { 0%{transform:translateX(0)} 100%{transform:translateX(-50%)} }
@keyframes bvb1 { 0%,5%{opacity:0;transform:translateY(10px)} 11%,88%{opacity:1;transform:none} 96%,100%{opacity:0} }
@keyframes bvb2 { 0%,24%{opacity:0;transform:translateY(10px)} 30%,88%{opacity:1;transform:none} 96%,100%{opacity:0} }
@keyframes bvb3 { 0%,46%{opacity:0;transform:translateY(10px)} 52%,88%{opacity:1;transform:none} 96%,100%{opacity:0} }
@keyframes bvRes { 0%,64%{opacity:0;transform:translateY(12px) scale(.97)} 72%,88%{opacity:1;transform:none} 96%,100%{opacity:0} }
@keyframes bvStar { 0%{opacity:.25;transform:scale(.85)} 50%{opacity:1;transform:scale(1.1)} 100%{opacity:.25;transform:scale(.85)} }
@keyframes bvSpinSlow { from{transform:rotate(0)} to{transform:rotate(360deg)} }

[data-motion="off"] .bvAnim { animation: none !important; }
@media (prefers-reduced-motion: reduce) { .bvAnim { animation: none !important; } }

/* ---------- Nav-Unterstrich ---------- */
.bvNav { position: relative; }
.bvNav::after { content:""; position:absolute; left:0; bottom:-3px; width:0; height:2px; background:#C96F4A; transition:width .25s ease; }
.bvNav:hover::after, .bvNav:focus-visible::after { width:100%; }
.bvNav[aria-current="page"] { color:#FAF6EF; }
.bvNav[aria-current="page"]::after { width:100%; }

/* ---------- Formfelder ---------- */
.bvInput {
  width:100%; font-family:Karla,sans-serif; font-size:15.5px; padding:12px 14px;
  border-radius:10px; border:1px solid rgba(250,246,239,0.18);
  background:rgba(250,246,239,0.05); color:#FAF6EF; outline:none;
  transition:border-color .2s, box-shadow .2s;
}
.bvInput:focus { border-color:#C96F4A; box-shadow:0 0 0 3px rgba(201,111,74,0.25); }
.bvInput::placeholder { color:#8FA3BD; }
.bvInput option { background:#1F3A5F; color:#FAF6EF; }
textarea.bvInput { resize:vertical; min-height:84px; }

.bvLabel { display:flex; justify-content:space-between; align-items:baseline; font-size:13.5px; font-weight:700; color:#DBE3EE; margin-bottom:9px; }
.bvLabel.block { display:block; }

/* ---------- Slider (Regler) ---------- */
.bvRange { -webkit-appearance:none; appearance:none; width:100%; height:6px; border-radius:999px; background:rgba(250,246,239,0.14); outline:none; margin:4px 0; }
.bvRange::-webkit-slider-thumb { -webkit-appearance:none; appearance:none; width:22px; height:22px; border-radius:50%; background:#C96F4A; cursor:pointer; box-shadow:0 2px 8px rgba(201,111,74,.5); border:3px solid #1F3A5F; }
.bvRange::-moz-range-thumb { width:18px; height:18px; border-radius:50%; background:#C96F4A; cursor:pointer; border:3px solid #1F3A5F; }
.bvRange:focus-visible { box-shadow:0 0 0 3px rgba(201,111,74,0.3); }
.bvOut { font-family:Lora,serif; font-weight:600; color:#eab59d; }

/* ---------- Status-Box (Formular-Rückmeldung) ---------- */
.form-status {
  margin-top:16px; border-radius:12px; padding:14px 16px; font-size:14.5px; line-height:1.5;
  background:rgba(250,246,239,0.06); border:1px solid rgba(250,246,239,0.18); color:#DBE3EE;
}
.form-status[hidden] { display:none; }
.form-status.is-ok { background:rgba(76,154,110,0.14); border-color:rgba(76,154,110,0.35); color:#9ad9b4; }
.form-status.is-error { background:rgba(201,111,74,0.12); border-color:rgba(201,111,74,0.4); color:#eab59d; }
.form-status-title { font-weight:700; margin:0 0 4px; }
.form-status-text { margin:0; }
.form-status a { color:#eab59d; font-weight:700; }
.form-status .btn-ghost {
  margin-top:10px; background:rgba(250,246,239,0.06); color:#FAF6EF; font-weight:700; font-size:14px;
  padding:9px 16px; border:1.5px solid rgba(250,246,239,0.3); border-radius:10px; cursor:pointer;
}

/* ---------- Scroll-Reveal (Progressive Enhancement) ---------- */
html.js [data-reveal] { opacity:0; transform:translateY(22px); transition:opacity .45s cubic-bezier(.22,.8,.35,1), transform .45s cubic-bezier(.22,.8,.35,1); }
html.js [data-reveal].is-in { opacity:1; transform:none; }
@media (prefers-reduced-motion: reduce) { html.js [data-reveal] { opacity:1 !important; transform:none !important; transition:none !important; } }

/* ---------- Header ---------- */
.bv-header {
  position:sticky; top:0; z-index:80; display:flex; align-items:center; justify-content:space-between;
  padding:18px 44px; background:rgba(22,41,74,0.72);
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  border-bottom:1px solid transparent; transition:border-color .3s, box-shadow .3s, padding .3s;
}
.bv-header.is-scrolled { border-bottom-color:rgba(250,246,239,0.12); box-shadow:0 8px 30px rgba(0,0,0,0.22); padding-top:12px; padding-bottom:12px; }
.bv-brand { display:flex; align-items:baseline; text-decoration:none; }
.bv-brand-word { font-family:Lora,Georgia,serif; font-size:26px; font-weight:600; color:#FAF6EF; letter-spacing:-0.01em; }
.bv-brand-dot { width:7px; height:7px; border-radius:50%; background:#C96F4A; margin-left:5px; display:inline-block; }
.bv-nav { display:flex; gap:26px; align-items:center; font-size:14.5px; font-weight:600; }
.bv-nav a { color:#9FB3CC; text-decoration:none; }
.bv-cta {
  display:inline-flex; align-items:center; gap:7px; background:#B35E3B; color:#fff !important;
  padding:11px 22px; border-radius:10px; text-decoration:none; box-shadow:0 2px 8px rgba(201,111,74,.4);
  transition:transform .2s, box-shadow .2s, background .2s;
}
.bv-cta:hover { background:#A9532F; transform:translateY(-1px); box-shadow:0 6px 18px rgba(201,111,74,.5); }

/* Einheitlicher, sichtbarer Tastatur-Fokus auf dunklem Grund */
a:focus-visible, button:focus-visible, summary:focus-visible, [tabindex]:focus-visible {
  outline: 2.5px solid rgba(224,138,99,0.9); outline-offset: 3px;
}

/* Marquee: bewegter Inhalt pausierbar (WCAG 2.2.2) */
.bvMarqueeWrap:hover .bvMarquee, .bvMarqueeWrap:focus-within .bvMarquee { animation-play-state: paused; }

/* Hörbeispiel-Player */
audio.bv-audio { width:100%; height:44px; border-radius:10px; }

/* Gruppen-Dropdowns in der Hauptnavigation (Produkt / Ressourcen / Unternehmen) */
.bv-dd { position:relative; display:inline-flex; align-items:center; }
.bv-dd-toggle { background:none; border:none; color:#9FB3CC; font-family:inherit; font-size:14.5px; font-weight:600; cursor:pointer; display:inline-flex; align-items:center; gap:5px; padding:0; }
.bv-dd-toggle:hover, .bv-dd.is-open .bv-dd-toggle, .bv-dd-toggle.is-active { color:#FAF6EF; }
.bv-dd-toggle.is-active { position:relative; }
.bv-dd-toggle.is-active::after { content:""; position:absolute; left:0; bottom:-3px; width:calc(100% - 14px); height:2px; background:#C96F4A; }
.bv-dd-toggle .bv-dd-caret { font-size:10px; transition:transform .2s; }
.bv-dd.is-open .bv-dd-caret { transform:rotate(180deg); }
.bv-dd-menu { position:absolute; top:calc(100% + 16px); left:50%; transform:translateX(-50%); min-width:212px; background:#1F3A5F; border:1px solid rgba(250,246,239,0.14); border-radius:12px; padding:8px; box-shadow:0 16px 40px rgba(0,0,0,0.42); display:none; flex-direction:column; gap:2px; z-index:90; }
.bv-dd-menu::before { content:""; position:absolute; left:0; right:0; top:-16px; height:16px; }
.bv-dd.is-open .bv-dd-menu { display:flex; }
.bv-dd-menu a { color:#DBE3EE; text-decoration:none; font-size:14.5px; font-weight:600; padding:10px 12px; border-radius:8px; white-space:nowrap; }
.bv-dd-menu a:hover, .bv-dd-menu a[aria-current="page"] { background:rgba(250,246,239,0.08); color:#FAF6EF; }
@media (max-width:900px) { .bv-dd { display:none; } }

/* Gruppen-Labels im Mobile-Menü */
.bv-mnav-label { display:block; font-size:11px; font-weight:700; letter-spacing:0.12em; text-transform:uppercase; color:#8FA3BD; margin:18px 4px 4px; }
.bv-mnav-label:first-child { margin-top:0; }

/* Hamburger / Mobile-Nav */
.bv-burger { display:none; background:none; border:none; color:#FAF6EF; cursor:pointer; padding:8px; margin:-8px; }
.bv-mobile-nav { display:none; }

/* ---------- Footer ---------- */
.bv-foot { max-width:1200px; margin:0 auto; padding:64px 44px 48px; }
.bv-foot-grid { display:grid; grid-template-columns:1.7fr 1fr 1fr 1fr 1fr; gap:34px; }
.bv-foot-grid h4 { font-size:12px; font-weight:700; letter-spacing:0.1em; text-transform:uppercase; color:#8FA3BD; margin:0 0 4px; }
.bv-foot-grid nav { display:flex; flex-direction:column; gap:10px; }
.bv-foot-grid nav a { font-size:14.5px; color:#BCC9DC; text-decoration:none; }
.bv-foot-grid nav a:hover { color:#FAF6EF; }
.bv-foot-base { display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px; margin-top:40px; padding-top:24px; border-top:1px solid rgba(250,246,239,0.12); font-size:13px; color:#8FA3BD; }

/* ---------- Responsive Grid-Helfer (überschreiben Inline-Grids) ---------- */
@media (max-width: 900px) {
  .dc-2col { grid-template-columns:1fr !important; }
  .dc-3col { grid-template-columns:1fr !important; }
  .dc-bento { grid-template-columns:1fr !important; }
  .dc-bento > * { grid-column:auto !important; }
  .dc-split { grid-template-columns:1fr !important; }
}
@media (max-width: 900px) {
  .bv-nav { display:none; }
  .bv-burger { display:inline-flex; }
}
@media (max-width: 760px) {
  .bv-header { padding:14px 20px; }
  .bv-foot { padding:48px 22px 40px; }
  .bv-foot-grid { grid-template-columns:1fr 1fr; gap:28px; }
  .dc-pad { padding-left:22px !important; padding-right:22px !important; }
  .dc-pad-section { padding-left:22px !important; padding-right:22px !important; }
  .dc-2col-sm { grid-template-columns:1fr !important; }
  /* Mobile-Menü offen */
  .bv-mobile-nav.is-open {
    display:flex; flex-direction:column; gap:4px;
    position:fixed; top:0; right:0; bottom:0; width:min(82vw,320px); z-index:120;
    background:#1F3A5F; padding:84px 24px 28px; box-shadow:-12px 0 40px rgba(0,0,0,0.4);
    border-left:1px solid rgba(250,246,239,0.12);
  }
  .bv-mobile-nav.is-open a { color:#DBE3EE; text-decoration:none; font-size:17px; font-weight:600; padding:12px 4px; border-bottom:1px solid rgba(250,246,239,0.08); }
  .bv-mobile-nav.is-open a.bv-cta { background:#C96F4A; color:#fff; border:none; border-radius:10px; margin-top:14px; justify-content:center; padding:14px; }
  .bv-scrim { position:fixed; inset:0; background:rgba(8,16,30,0.5); z-index:110; }
  .bv-scrim[hidden] { display:none; }
}
@media (max-width: 460px) {
  .bv-foot-grid { grid-template-columns:1fr; }
}

/* ---------- Sticky Mobile-CTA ---------- */
.bv-sticky-cta { display:none; }
@media (max-width: 760px) {
  .bv-sticky-cta {
    display:block; position:fixed; left:16px; right:16px; bottom:16px; z-index:90;
    background:#B35E3B; color:#fff; text-align:center; font-weight:700; font-size:16px;
    padding:15px; border-radius:12px; text-decoration:none; box-shadow:0 8px 24px rgba(0,0,0,0.35);
  }
}

/* Letztes Gruppen-Dropdown rechtsbündig ausrichten (verhindert Überstehen) */
.bv-dd:last-of-type .bv-dd-menu { left:auto; right:0; transform:none; }