/* ==========================================================================
   BELOX – Custom Theme (clean)
   ========================================================================== */

/* ---------- Design Tokens ---------- */
:root{
  --belox-bg: #061426;
  --belox-bg-2: #0a223d;

  --belox-text: rgba(255,255,255,.92);
  --belox-muted: rgba(255,255,255,.70);
  --belox-line: rgba(255,255,255,.14);

  --belox-accent: #FA6318;

  --belox-shadow: 0 14px 50px rgba(0,0,0,.35);

  /* Radius system */
  --belox-radius-lg: 22px;  /* hero-media / proof / footer cards */
  --belox-radius-md: 18px;  /* cards / CTA panel */
  --belox-radius-sm: 14px;  /* media */
}

/* ---------- Base ---------- */
body{ background:#0b1220; }
a{ text-decoration:none; }
.container{ max-width:1180px; }

/* ---------- Header / Nav ---------- */
.belox-header{
  position: sticky;
  top: 0;
  z-index: 1020;
  background: rgba(8,18,34,.72);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(255,255,255,.10);
}
.belox-header__inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  padding:14px 0;
}
.belox-brand__mark{
  font-weight:900;
  letter-spacing:.08em;
  color:#fff;
}
.belox-nav a{
  color: rgba(255,255,255,.86);
  font-weight:650;
  padding:10px 12px;
  border-radius:999px;
}
.belox-nav a:hover{
  background: rgba(255,255,255,.08);
  color:#fff;
}

/* ---------- Buttons ---------- */
.btn-belox-primary{
  background: var(--belox-accent);
  border: 1px solid rgba(250,99,24,.7);
  color:#0b0b0b;
  font-weight:750;
  padding:.78rem 1.05rem;
  border-radius:999px;
  box-shadow: 0 14px 30px rgba(250,99,24,.25);
  transition: transform .15s ease, filter .15s ease;
}
.btn-belox-primary:hover{ filter: brightness(1.06); transform: translateY(-1px); }

.btn-belox-outline{
  background: rgba(255,255,255,.06);
  border: 1px solid var(--belox-line);
  color: var(--belox-text);
  font-weight:700;
  padding:.78rem 1.05rem;
  border-radius:999px;
  backdrop-filter: blur(6px);
  transition: transform .15s ease, background .15s ease;
}
.btn-belox-outline:hover{ background: rgba(255,255,255,.10); transform: translateY(-1px); }

/* ---------- Hero ---------- */
.belox-hero{
  position:relative;
  overflow:hidden;
  padding: clamp(66px, 7vw, 118px) 0;
  background:
    radial-gradient(900px 500px at 18% 24%, rgba(250,99,24,.22), transparent 55%),
    radial-gradient(900px 700px at 85% 20%, rgba(79,146,255,.22), transparent 55%),
    linear-gradient(135deg, var(--belox-bg), var(--belox-bg-2));
  color: var(--belox-text);
  border-bottom: 1px solid rgba(255,255,255,.10);
}
.belox-eyebrow{
  display:inline-flex;
  align-items:center;
  gap:.5rem;
  padding:.35rem .7rem;
  border: 1px solid var(--belox-line);
  background: rgba(255,255,255,.04);
  border-radius:999px;
  letter-spacing:.12em;
  text-transform:uppercase;
  font-size:.78rem;
  color: var(--belox-muted);
}
.belox-hero h1{
  margin:14px 0 10px;
  font-weight:900;
  line-height:1.03;
  letter-spacing:-.02em;
  font-size: clamp(2.15rem, 4.3vw, 3.7rem);
}
.belox-hero h1 span{ color: var(--belox-accent); }

.belox-hero-text{
  max-width:54ch;
  font-size: clamp(1.02rem, 1.25vw, 1.18rem);
  color: var(--belox-muted);
  margin:10px 0 18px;
}
.belox-actions{
  display:flex;
  flex-wrap:wrap;
  gap:.75rem;
  margin-top:6px;
}
.belox-hero-media{
  border-radius: var(--belox-radius-lg);
  border: 1px solid var(--belox-line);
  background:
    radial-gradient(520px 240px at 30% 35%, rgba(255,255,255,.10), transparent 55%),
    radial-gradient(520px 260px at 70% 55%, rgba(250,99,24,.14), transparent 60%),
    linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03));
  box-shadow: var(--belox-shadow);
  min-height: clamp(240px, 30vw, 420px);
  position:relative;
  overflow:hidden;
}
.belox-hero-media::before{
  content:"";
  position:absolute; inset:-40%;
  background: linear-gradient(120deg, transparent 35%, rgba(255,255,255,.10) 45%, transparent 55%);
  transform: rotate(12deg);
  opacity:.55;
}

/* ---------- Sections ---------- */
.belox-section{
  padding: clamp(54px, 6vw, 92px) 0;
  background:#fff;
}
.belox-section h2{
  font-weight:900;
  letter-spacing:-.02em;
  font-size: clamp(1.7rem, 2.6vw, 2.4rem);
  margin:0 0 8px;
}
.belox-intro{
  color:#566170;
  max-width:72ch;
  margin:0 auto;
}

/* ---------- Cards ---------- */
.belox-card{
  height:100%;
  padding:22px 22px 20px;
  border-radius: var(--belox-radius-md);
  border: 1px solid rgba(10,35,61,.12);
  background:#fff;
  box-shadow: 0 18px 60px rgba(3,12,24,.06);
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.belox-card:hover{
  transform: translateY(-3px);
  box-shadow: 0 22px 70px rgba(3,12,24,.10);
  border-color: rgba(250,99,24,.28);
}
.belox-card h3{
  font-weight:900;
  letter-spacing:-.015em;
  font-size:1.12rem;
  margin:2px 0 8px;
}
.belox-card p{ color:#5b6676; margin:0; }

/* Leistungs-Card als Link + Bild */
.belox-card--link{ display:block; color:inherit; }
.belox-card-media{
  border-radius: var(--belox-radius-sm);
  overflow:hidden;
  margin-bottom:14px;
  border: 1px solid rgba(10,35,61,.10);
  background:#f5f6f8;
  aspect-ratio: 4 / 3;
}
.belox-card-media img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  transform: scale(1.0);
  transition: transform .25s ease;
}
.belox-card:hover .belox-card-media img{ transform: scale(1.04); }

/* ---------- Chips (Premium + Dot) ---------- */
.belox-chip{
  position:relative;
  display:inline-flex;
  align-items:center;
  gap:.45rem;

  padding: .35rem .75rem;
  padding-left: 1.4rem; /* Dot Platz */
  border-radius:999px;

  font-size:.8rem;
  font-weight:650;
  letter-spacing:.02em;

  background: linear-gradient(135deg, rgba(250,99,24,.12), rgba(250,99,24,.04));
  color:#7a2b05;
  border: 1px solid rgba(250,99,24,.22);

  transition: transform .15s ease, box-shadow .15s ease, background .15s ease, color .15s ease, border-color .15s ease;
  cursor: default;
}
.belox-chip::before{
  content:"";
  position:absolute;
  left:.55rem;
  top:50%;
  transform: translateY(-50%);
  width:.38rem;
  height:.38rem;
  border-radius:50%;
  background: var(--belox-accent);
  box-shadow: 0 0 0 2px rgba(250,99,24,.18);
  transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
}
.belox-chip:hover{
  transform: translateY(-2px);
  background: linear-gradient(135deg, rgba(250,99,24,.22), rgba(250,99,24,.08));
  border-color: rgba(250,99,24,.45);
  box-shadow: 0 10px 24px rgba(250,99,24,.18);
  color:#5a1f03;
}
.belox-chip:hover::before{
  transform: translateY(-50%) scale(1.15);
  box-shadow: 0 0 0 3px rgba(250,99,24,.35);
}

/* Chips on dark sections */
.belox-section-dark .belox-chip,
.belox-cta-panel .belox-chip{
  background: rgba(255,255,255,.08);
  color: rgba(255,255,255,.92);
  border: 1px solid rgba(255,255,255,.22);
}
.belox-section-dark .belox-chip:hover,
.belox-cta-panel .belox-chip:hover{
  background: rgba(255,255,255,.16);
  border-color: rgba(255,255,255,.38);
  box-shadow: 0 10px 24px rgba(0,0,0,.35);
}
.belox-section-dark .belox-chip::before,
.belox-cta-panel .belox-chip::before{
  background:#fff;
  box-shadow: 0 0 0 2px rgba(255,255,255,.25);
}
.belox-section-dark .belox-chip:hover::before,
.belox-cta-panel .belox-chip:hover::before{
  box-shadow: 0 0 0 3px rgba(255,255,255,.45);
}

/* ---------- Trust / Why (Dark) ---------- */
.belox-section-dark{
  background:
    radial-gradient(900px 420px at 20% 10%, rgba(250,99,24,.12), transparent 60%),
    linear-gradient(135deg, var(--belox-bg), var(--belox-bg-2));
  color: var(--belox-text);
  border-top: 1px solid rgba(255,255,255,.10);
  border-bottom: 1px solid rgba(255,255,255,.10);
}
.belox-section-dark h2{ color: var(--belox-text); }

.belox-trust-grid{
  display:grid;
  grid-template-columns: 1.25fr .95fr;
  gap:26px;
  align-items:start;
}
@media (max-width: 991.98px){
  .belox-trust-grid{ grid-template-columns:1fr; }
}

.belox-trust-cards{
  display:grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap:14px;
}
@media (max-width: 575.98px){
  .belox-trust-cards{ grid-template-columns:1fr; }
}

.belox-trust-card{
  padding:18px 18px 16px;
  border-radius: var(--belox-radius-md);
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.05);
  box-shadow: 0 18px 50px rgba(0,0,0,.20);
}
.belox-trust-card strong{
  display:block;
  font-weight:900;
  letter-spacing:-.01em;
  margin-bottom:6px;
}
.belox-trust-card p{ margin:0; color: var(--belox-muted); }

.belox-proof{
  border-radius: var(--belox-radius-lg);
  border: 1px solid rgba(255,255,255,.14);
  background:
    radial-gradient(520px 240px at 30% 35%, rgba(255,255,255,.10), transparent 55%),
    linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03));
  box-shadow: var(--belox-shadow);
  padding:22px;
}
.belox-proof .belox-proof-kicker{
  display:inline-flex;
  align-items:center;
  gap:.5rem;
  padding:.35rem .7rem;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.04);
  border-radius:999px;
  letter-spacing:.12em;
  text-transform:uppercase;
  font-size:.78rem;
  color: var(--belox-muted);
  margin-bottom:12px;
}
.belox-proof ul{ list-style:none; padding:0; margin:14px 0 0; }
.belox-proof li{
  display:flex;
  gap:10px;
  padding:10px 0;
  border-top: 1px solid rgba(255,255,255,.10);
  color: var(--belox-text);
}
.belox-proof li:first-child{ border-top:0; padding-top:0; }
.belox-proof .dot{
  width:10px; height:10px; border-radius:99px;
  background: var(--belox-accent);
  box-shadow: 0 10px 20px rgba(250,99,24,.25);
  margin-top:6px;
}

/* ---------- CTA Band ---------- */
.belox-cta-band{
  background:#fff;
  padding: 0 0 clamp(54px, 6vw, 92px);
}
.belox-cta-panel{
  /* IMPORTANT: other CSS overrides radius -> enforce */
  border-radius: var(--belox-radius-md) !important;

  padding: clamp(22px, 3vw, 34px);
  background:
    radial-gradient(900px 350px at 20% 10%, rgba(250,99,24,.12), transparent 60%),
    linear-gradient(135deg, var(--belox-bg), var(--belox-bg-2));
  color: var(--belox-text);
  box-shadow: var(--belox-shadow);
  border: 1px solid rgba(255,255,255,.12);
}
.belox-cta-panel h2{ color: var(--belox-text); margin-bottom:10px; }
.belox-cta-panel p{ color: var(--belox-muted); margin:0 0 16px; }

/* ---------- Footer (Premium) ---------- */
.belox-footer{
  background:
    radial-gradient(900px 420px at 20% 10%, rgba(250,99,24,.10), transparent 60%),
    linear-gradient(135deg, var(--belox-bg), var(--belox-bg-2));
  color: var(--belox-text);
  padding: clamp(54px, 6vw, 84px) 0 26px;
  border-top: 1px solid rgba(255,255,255,.10);
}
.belox-footer a{ color: rgba(255,255,255,.82); }
.belox-footer a:hover{ color:#fff; }
.belox-footer h3{
  color:#fff;
  font-weight:900;
  letter-spacing:-.01em;
  font-size:1.05rem;
  margin:0 0 12px;
}
.belox-footer-card{
  height:100%;
  border-radius: var(--belox-radius-lg);
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.05);
  box-shadow: 0 18px 55px rgba(0,0,0,.22);
  padding:18px;
}
.belox-footer-kicker{
  display:inline-flex;
  align-items:center;
  gap:.5rem;
  padding:.35rem .7rem;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.04);
  border-radius:999px;
  letter-spacing:.12em;
  text-transform:uppercase;
  font-size:.78rem;
  color: var(--belox-muted);
  margin-bottom:10px;
}
.belox-footer-list{ list-style:none; padding:0; margin:0; }
.belox-footer-list li{
  padding:8px 0;
  border-top: 1px solid rgba(255,255,255,.10);
}
.belox-footer-list li:first-child{ border-top:0; padding-top:0; }

.belox-footer-contact{ display:grid; gap:10px; }
.belox-footer-contact .item{
  display:flex;
  gap:10px;
  align-items:flex-start;
  color: rgba(255,255,255,.82);
}
.belox-footer-contact .dot{
  width:10px; height:10px; border-radius:99px;
  background: var(--belox-accent);
  box-shadow: 0 0 0 3px rgba(250,99,24,.18);
  margin-top:6px;
}

.belox-map{
  border-radius: var(--belox-radius-md);
  overflow:hidden;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(0,0,0,.2);
}
.belox-map iframe{
  width:100%;
  height:220px;
  border:0;
  display:block;
}

.belox-footer__bottom{
  margin-top:22px;
  padding-top:18px;
  border-top: 1px solid rgba(255,255,255,.10);
  color: rgba(255,255,255,.68);
  font-size:.9rem;

  display:flex;
  gap:12px;
  flex-wrap:wrap;
  justify-content:space-between;
  align-items:center;
}
.belox-footer__bottom a{ color: rgba(255,255,255,.75); }
.belox-footer__bottom a:hover{ color:#fff; }

/* ---------- Mobile ---------- */
@media (max-width: 575.98px){
  .belox-actions .btn{
    width:100%;
    justify-content:center;
  }
}

/* CTA Panel – exakt wie Cards (technisch, nicht rund) */
.belox-cta-panel{
  border-radius: var(--belox-radius-md) !important; /* = 18px */
  overflow: hidden; /* verhindert fremde Rundungen von Kindern */

  padding: clamp(22px, 3vw, 34px);
  background:
    radial-gradient(900px 350px at 20% 10%, rgba(250,99,24,.12), transparent 60%),
    linear-gradient(135deg, var(--belox-bg), var(--belox-bg-2));
  color: var(--belox-text);
  box-shadow: var(--belox-shadow);
  border: 1px solid rgba(255,255,255,.12);
}
.belox-cta-panel{ border-radius: 0px !important; }

/* CTA – obere Metallkante */
.belox-cta-panel{
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.12),
    var(--belox-shadow);
}
.belox-cta-panel:hover{
  transform: translateY(-2px);
  transition: transform .2s ease;
}

/* Hero Part: 3D rotation illusion */
.belox-hero-media{
  display: flex;
  align-items: center;
  justify-content: center;
  perspective: 900px;           /* wichtig für 3D */
  perspective-origin: 50% 45%;
}

.belox-hero-part{
  width: min(460px, 92%);
  height: auto;
  transform-style: preserve-3d;
  will-change: transform;
  filter: drop-shadow(0 22px 55px rgba(0,0,0,.40));
  animation: beloxTurn 7s ease-in-out infinite;
}

/* „hin und her“ Drehung (wirkt wie Objektrotation) */
@keyframes beloxTurn{
  0%   { transform: rotateY(-26deg) rotateX(6deg) translateZ(0); }
  50%  { transform: rotateY(26deg)  rotateX(6deg) translateZ(0); }
  100% { transform: rotateY(-26deg) rotateX(6deg) translateZ(0); }
}

/* Falls User reduzierte Bewegung will */
@media (prefers-reduced-motion: reduce){
  .belox-hero-part{ animation: none; }
}

/* Header Logo */
.belox-brand-logo{
  height: 34px;
  width: auto;
  display: block;
}

@media (max-width: 575.98px){
  .belox-brand-logo{
    height: 30px;
  }
}

/* Footer Map – sauber, ruhig, vollflächig */
.belox-map{
  height: 300px;                 /* guter Sweet Spot */
  padding: 0;
  overflow: hidden;
  border-radius: var(--belox-radius-md);
  background: transparent;
}

.belox-map-img{
  width: 100%;
  height: 100%;
  display: block;

  object-fit: cover;
  object-position: center;

  /* nur minimal reinzoomen */
  transform: scale(1.12);
  transform-origin: center;
}

/* Mobile */
@media (max-width: 575.98px){
  .belox-map{
    height: 240px;
  }
  .belox-map-img{
    transform: scale(1.06);
  }
}
.belox-footer-card{
  background: linear-gradient(
    180deg,
    rgba(6,20,38,1),
    rgba(6,20,38,.96)
  );
}

/* Footer Map: Rahmen bewusst entfernen für sauberen Übergang */
.belox-footer-card .belox-map{
  border: none;
  border-radius: 0;
  box-shadow: none;
}
/* sanfter Übergang Karte → Footer */
.belox-footer-card .belox-map{
  background: linear-gradient(
    180deg,
    rgba(6,20,38,0) 0%,
    rgba(6,20,38,.6) 100%
  );
}
/* Abstand zwischen "Standort" und Karte verkleinern */
.belox-footer-card h3{
  margin-bottom: 4px;
}

.belox-footer-card .belox-map{
  margin-top: 4px;
}

/* ==============================
   PATCH: Footer Standort + Map
   ============================== */

/* Standort-Card: H3 Abstand kontrollieren */
.belox-footer-card h3{
  margin: 0 0 6px !important;
}

/* Joomla-Editor: Leerabsätze/Leerzeilen entfernen */
.belox-footer-card p{
  margin: 0 !important;
}
.belox-footer-card p:empty{
  display: none !important;
}
/* Häufigster Fall: <p>&nbsp;</p> -> optisch neutralisieren */
.belox-footer-card p{
  line-height: 1.2;
}
.belox-footer-card p:where(:not(:has(*))){
  /* moderne Browser: wenn nur Text/nbsp, keine extra Höhe */
  padding: 0 !important;
}

/* Footer-Card Hintergrund (damit Map-Rand "verschmilzt") */
.belox-footer-card{
  background: linear-gradient(
    180deg,
    rgba(6,20,38,1),
    rgba(6,20,38,.96)
  );
}

/* Map: ohne sichtbaren Rahmen, in die Card integriert */
.belox-footer-card .belox-map{
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;

  /* Größe / Fläche */
  height: 300px;
  margin-top: 4px;
  padding: 0 !important;
  overflow: hidden;

  /* sanfter Übergang */
  background: linear-gradient(
    180deg,
    rgba(6,20,38,0) 0%,
    rgba(6,20,38,.6) 100%
  );
}

/* Das <img> soll wirklich den Kasten füllen */
.belox-map-img{
  width: 100% !important;
  height: 100% !important;
  display: block !important;
  object-fit: cover !important;
  object-position: center !important;

  /* minimaler Zoom gegen SVG-„Luft“ */
  transform: scale(1.12);
  transform-origin: center;
}

@media (max-width: 575.98px){
  .belox-footer-card .belox-map{ height: 240px; }
  .belox-map-img{ transform: scale(1.06); }
}

/* =========================================================
   Unternehmen – Profil (Inhaber)
   ========================================================= */

.belox-profile{
  border-radius: 22px;
  border: 1px solid rgba(10,35,61,.12);
  background: #ffffff;
  box-shadow: 0 18px 60px rgba(3,12,24,.08);
  padding: 20px;
}

/* Kopfbereich */
.belox-profile__head{
  display: flex;
  gap: 16px;
  align-items: center;
  margin-bottom: 16px;
}

.belox-profile__meta{
  display: flex;
  flex-direction: column;
}

.belox-profile__name{
  font-weight: 900;
  font-size: 1.1rem;
  color: #0a223d;
  line-height: 1.25;
}

.belox-profile__role{
  font-size: .95rem;
  color: #556070;
  margin-top: 2px;
}

/* Chips */
.belox-profile__tags{
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
}

/* Fakten */
.belox-profile__facts{
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  padding-top: 14px;
  margin-top: 14px;
  border-top: 1px solid rgba(10,35,61,.12);
}

.belox-profile__facts .fact{
  background: #f7f8fa;
  border: 1px solid rgba(10,35,61,.10);
  border-radius: 14px;
  padding: 12px;
}

.belox-profile__facts .num{
  font-weight: 900;
  font-size: 1.25rem;
  color: #0a223d;
  line-height: 1.1;
}

.belox-profile__facts .label{
  font-size: .9rem;
  color: #556070;
  margin-top: 2px;
}

/* CTA */
.belox-profile__cta{
  margin-top: 16px;
}

/* Mobile Anpassung */
@media (max-width: 575.98px){
  .belox-profile__head{
    align-items: flex-start;
  }
}

/* ==========================================
   Unternehmensseite – Profilbild (fixiert)
   ========================================== */

.belox-profile__photo{
  width: 96px;
  height: 96px;
  min-width: 96px;
  min-height: 96px;

  border-radius: 18px;
  overflow: hidden;

  background: #f2f4f7;
  border: 1px solid rgba(10,35,61,.14);
  box-shadow: 0 6px 22px rgba(0,0,0,.12);
}

.belox-profile__photo img{
  width: 100%;
  height: 100%;
  object-fit: cover;     /* KEIN Verzerren */
  object-position: 50% 35%; /* Gesicht etwas höher */
  display: block;
}

/* Mobile etwas kleiner */
@media (max-width: 575.98px){
  .belox-profile__photo{
    width: 80px;
    height: 80px;
    min-width: 80px;
    min-height: 80px;
  }
}

/* Prozessdarstellung – sauber & technisch */
.belox-process{
  display:flex;
  flex-direction:column;
  gap:22px;
  margin-top:18px;
  position:relative;
}
.belox-process::before{
  content:"";
  position:absolute;
  left:6px;
  top:0;
  bottom:0;
  width:1px;
  background: rgba(255,255,255,.18);
}
.belox-process-item{
  display:flex;
  align-items:flex-start;
  gap:16px;
  position:relative;
}
.belox-process-marker{
  width:14px;
  height:14px;
  margin-top:4px;
  border-radius:50%;
  background: var(--belox-accent);
  box-shadow: 0 0 0 4px rgba(250,99,24,.18);
  flex-shrink:0;
}
.belox-process-content h4{
  margin:0 0 4px;
  font-weight:900;
  font-size:1rem;
  color:#fff;
  letter-spacing:-0.01em;
}
.belox-process-content p{
  margin:0;
  color: var(--belox-muted);
  line-height:1.6;
  max-width:60ch;
}

/* Legal Pages (AGB / Datenschutz / Impressum) */
.belox-legal{
  padding: clamp(42px, 5vw, 72px) 0;
  background:#fff;
}
.belox-legal .belox-legal-box{
  max-width: 920px;
  margin: 0 auto;
}
.belox-legal-meta{
  display:inline-block;
  padding: .7rem 1rem;
  border-radius: 14px;
  border: 1px solid rgba(10,35,61,.10);
  background: rgba(10,35,61,.03);
  color:#445163;
  margin-bottom: 18px;
}
.belox-legal h2{
  font-weight: 900;
  letter-spacing: -0.02em;
  margin: 28px 0 10px;
  font-size: 1.35rem;
  color:#0a223d;
}
.belox-legal h3{
  font-weight: 850;
  margin: 18px 0 8px;
  font-size: 1.1rem;
  color:#0a223d;
}
.belox-legal p{
  color:#3c4654;
  line-height: 1.75;
  font-size: 1.03rem;
  margin: 0 0 10px;
}
.belox-legal-tablewrap{
  overflow:hidden;
  border-radius: 16px;
  border: 1px solid rgba(10,35,61,.10);
  background: #fff;
  margin: 10px 0 18px;
}
.belox-legal-table{
  width:100%;
  border-collapse: collapse;
}
.belox-legal-table td{
  padding: 12px 14px;
  border-top: 1px solid rgba(10,35,61,.08);
  color:#3c4654;
}
.belox-legal-table tr:first-child td{ border-top: 0; }
.belox-legal-table td:last-child{
  text-align:right;
  font-weight: 800;
  color:#0a223d;
}
html{
  scroll-behavior: smooth;
}
.belox-list {
  margin: 14px 0 0;
  padding-left: 18px;
}

.belox-list li {
  margin: 10px 0;
}

.belox-list { margin: 14px 0 0; padding-left: 18px; }
.belox-list li { margin: 10px 0; }

/* ==========================================
   FIX: belox-proof NUR in hellen Sections
   ========================================== */
.belox-section:not(.belox-section-dark) .belox-proof{
  background: #fff;
  border: 1px solid rgba(10,35,61,.12);
  box-shadow: 0 18px 60px rgba(3,12,24,.08);
  color: #0a223d;
}

.belox-section:not(.belox-section-dark) .belox-proof .belox-proof-kicker{
  border: 1px solid rgba(10,35,61,.12);
  background: rgba(10,35,61,.03);
  color: #556070;
}

.belox-section:not(.belox-section-dark) .belox-proof p{
  color: #556070 !important;
}

.belox-section:not(.belox-section-dark) .belox-proof li{
  border-top: 1px solid rgba(10,35,61,.10);
  color: #0a223d;
}

.belox-section:not(.belox-section-dark) .belox-proof .btn-belox-outline{
  background: rgba(10,35,61,.03);
  border: 1px solid rgba(10,35,61,.14);
  color: #0a223d;
  backdrop-filter: none;
}

.belox-section:not(.belox-section-dark) .belox-proof .btn-belox-outline:hover{
  background: rgba(10,35,61,.08);
  transform: translateY(-1px);
}
.belox-section-dark{
  padding: clamp(54px, 6vw, 92px) 0; /* gleich wie belox-section */
}
/* Wenn beides gesetzt ist: DARK muss gewinnen */
.belox-section.belox-section-dark{
  background:
    radial-gradient(900px 420px at 20% 10%, rgba(250,99,24,.12), transparent 60%),
    linear-gradient(135deg, var(--belox-bg), var(--belox-bg-2)) !important;
  color: var(--belox-text);
}

.belox-footer__bottom-left{
  display:flex;
  flex-direction:column;
  gap:4px;
}

.belox-footer__by{
  color: rgba(255,255,255,.58);
  font-size: .88rem;
}

.belox-footer__by a{
  color: rgba(255,255,255,.75);
}
.belox-footer__by a:hover{
  color:#fff;
}

/* Rechts wirklich ganz nach rechts */
.belox-footer__bottom-right{
  margin-left:auto;
  justify-content:flex-end;
  text-align:right;
}
/* ==========================================
   Footer Bottom – Full Width (Modul-sicher)
   ========================================== */

/* Outer: bricht aus Container aus, macht Linie full width */
.belox-footer__bottom{
  width: 100vw !important;
  margin-left: calc(50% - 50vw) !important;
  margin-right: calc(50% - 50vw) !important;

  border-top: 1px solid rgba(255,255,255,.10);
  padding: 18px 0 0;
}

/* Inner: wieder wie Container zentrieren */
.belox-footer__bottom-inner{
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 16px;

  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}

/* Left */
.belox-footer__bottom-left{
  display: flex;
  flex-direction: column;
  gap: 4px;
}

/* "Template by" */
.belox-footer__by{
  color: rgba(255,255,255,.58);
  font-size: .88rem;
}
.belox-footer__by a{
  color: rgba(255,255,255,.75);
}
.belox-footer__by a:hover{
  color: #fff;
}

/* Right */
.belox-footer__bottom-right{
  margin-left: auto;
  display: flex;
  gap: 18px;
  justify-content: flex-end;
  text-align: right;
}
.belox-footer__bottom-right a{
  color: rgba(255,255,255,.75);
}
.belox-footer__bottom-right a:hover{
  color: #fff;
}

/* Mobile */
@media (max-width: 575.98px){
  .belox-footer__bottom-inner{
    flex-direction: column;
    gap: 10px;
  }
  .belox-footer__bottom-right{
    margin-left: 0;
    justify-content: flex-start;
    text-align: left;
    flex-wrap: wrap;
    gap: 12px;
  }
}

/* Footer Bottom full width */
.belox-footer__bottom-wrap{
  width: 100%;
  border-top: 1px solid rgba(255,255,255,.10);
  margin-top: 22px;
}

.belox-footer__bottom{
  padding-top: 18px;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}

/* links */
.belox-footer__bottom-left{
  display:flex;
  flex-direction:column;
  gap:4px;
}

.belox-footer__by{
  color: rgba(255,255,255,.58);
  font-size: .88rem;
}

/* rechts */
.belox-footer__bottom-right{
  margin-left:auto;
  display:flex;
  gap:18px;
  justify-content:flex-end;
  text-align:right;
}

.belox-footer__bottom-right a{ color: rgba(255,255,255,.75); }
.belox-footer__bottom-right a:hover{ color:#fff; }

/* Mobile */
@media (max-width: 575.98px){
  .belox-footer__bottom{ flex-direction:column; gap:10px; }
  .belox-footer__bottom-right{
    margin-left:0;
    justify-content:flex-start;
    text-align:left;
    flex-wrap:wrap;
    gap:12px;
  }
}
/* ==========================================
   Footer Bottom RESET (kill old 100vw hacks)
   ========================================== */

.belox-footer__bottom{
  width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  border-top: 0 !important;     /* Border macht der Wrap */
  padding: 18px 0 0 !important;

  display: flex !important;
  justify-content: space-between !important;
  align-items: flex-start !important;
  gap: 16px;
}

.belox-footer__bottom-wrap{
  width: 100%;
  border-top: 1px solid rgba(255,255,255,.10);
  margin-top: 22px;
}

.belox-footer__bottom-right{
  margin-left: auto;
  display: flex;
  gap: 18px;
}

/* Footer-bottom: Joomla-Modul-Wrapper auch als Flex behandeln */
.belox-footer__bottom > .mod-custom,
.belox-footer__bottom > .module,
.belox-footer__bottom > .moduletable{
  display: flex !important;
  width: 100%;
  justify-content: space-between !important;
  align-items: flex-start;
  gap: 16px;
}

/* Rechts wirklich nach rechts drücken */
.belox-footer__bottom-right{
  margin-left: auto !important;
  display: flex;
  gap: 18px;
  justify-content: flex-end;
  text-align: right;
  flex-wrap: wrap;
}

/* Hero Video */
.belox-hero-video{
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: inherit;
  display: block;
}

/* Hero Video – gezielter Zoom */
.belox-hero-video{
  width: 100%;
  height: 100%;
  object-fit: cover;

  transform: scale(1.12);        /* <- Zoom */
  transform-origin: center center;

  border-radius: inherit;
  display: block;
}

.belox-hero-media{
  position: relative;
  overflow: hidden;        /* 👈 DAS ist der Schlüssel */
}

.belox-hero-video{
  width: 100%;
  height: 100%;
  object-fit: cover;

  transform: scale(1.18);     /* Zoom */
  transform-origin: center;

  border-radius: inherit;
  display: block;
}

/* Hero Media: muss abschneiden */
.belox-hero-media{
  position: relative;
  overflow: hidden;            /* schneidet Balken weg */
}

/* Video: absolut zentriert + reinzoomen */
.belox-hero-video{
  position: absolute;
  top: 50%;
  left: 50%;

  width: 100%;
  height: 100%;
  object-fit: cover;           /* füllt den Kasten */
  object-position: center;

  /* zentrieren + Zoom -> entfernt schwarze Balken */
  transform: translate(-50%, -50%) scale(1.00);
  transform-origin: center;

  display: block;
}



.belox-hero-media::after{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(
      600px 300px at 30% 30%,
      rgba(255,255,255,.10),
      transparent 60%
    ),
    linear-gradient(
      180deg,
      rgba(0,0,0,.25),
      rgba(0,0,0,.15)
    );
  pointer-events:none;
}
.belox-hero-video{
  filter: 
    saturate(0.9)
    contrast(1.05)
    brightness(0.95);
}

/* ==========================================
   Verfahren – Media Grid (3–4 Bilder)
   ========================================== */

.belox-media-grid{
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 16px;
}

/* Standard-Kacheln */
.belox-media{
  margin: 0;
  grid-column: span 6;
  border-radius: 18px;
  overflow: hidden;
  border: 1px solid rgba(10,35,61,.12);
  background: #0b1220;
  box-shadow: 0 18px 60px rgba(3,12,24,.10);
}

/* Optional: 1. Bild größer für mehr „Hero“-Feeling */
.belox-media-grid .belox-media:first-child{
  grid-column: span 12;
}

.belox-media img{
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  aspect-ratio: 16 / 9;
  transform: scale(1.0);
  transition: transform .25s ease;
}

.belox-media:hover img{
  transform: scale(1.03);
}

/* Mobile */
@media (max-width: 991.98px){
  .belox-media{ grid-column: span 12; }
  .belox-media img{ aspect-ratio: 4 / 3; }
}

/* =========================================================
   Verfahren – Media Grid (robust, gegen Overrides)
   ========================================================= */

.belox-media-grid{
  display: grid !important;
  grid-template-columns: repeat(12, minmax(0, 1fr)) !important;
  gap: 16px !important;
  margin-top: 18px;
}

.belox-media{
  margin: 0 !important;
  grid-column: span 6;
  border-radius: 18px;
  overflow: hidden;
  border: 1px solid rgba(10,35,61,.12);
  background: #0b1220;
  box-shadow: 0 18px 60px rgba(3,12,24,.10);
}

.belox-media-grid .belox-media:first-child{
  grid-column: span 12;
}

.belox-media img{
  width: 100% !important;
  height: 100% !important;
  display: block !important;
  object-fit: cover;
  aspect-ratio: 16 / 9;
}

/* Hover */
.belox-media img{
  transform: scale(1);
  transition: transform .25s ease;
}
.belox-media:hover img{
  transform: scale(1.03);
}

/* Responsive */
@media (max-width: 991.98px){
  .belox-media{ grid-column: span 12; }
  .belox-media img{ aspect-ratio: 4 / 3; }
}

/* =========================================================
   Verfahren – Galerie (5 Bilder: 1 groß + 4 klein)
   ========================================================= */

.belox-media-grid{
  display: grid !important;
  grid-template-columns: repeat(12, minmax(0, 1fr)) !important;
  gap: 16px !important;
}

.belox-media{
  margin: 0 !important;
  grid-column: span 6;               /* 2 pro Reihe */
  border-radius: 18px;
  overflow: hidden;
  border: 1px solid rgba(10,35,61,.12);
  background: #0b1220;
  box-shadow: 0 18px 60px rgba(3,12,24,.10);
}

/* erstes Bild groß */
.belox-media-grid .belox-media:first-child{
  grid-column: span 12;
}

/* Klickfläche */
.belox-lightbox{
  display: block;
  cursor: zoom-in;
}

/* Bilder */
.belox-media img{
  width: 100% !important;
  height: 100% !important;
  display: block !important;
  object-fit: cover;
  aspect-ratio: 16 / 9;
  transform: scale(1);
  transition: transform .25s ease;
}

.belox-media:hover img{
  transform: scale(1.03);
}

/* Mobile: alles untereinander */
@media (max-width: 991.98px){
  .belox-media{ grid-column: span 12; }
  .belox-media img{ aspect-ratio: 4 / 3; }
}

/* =========================================================
   Lightbox (Bootstrap Modal)
   ========================================================= */

.belox-lightbox-modal{
  background: rgba(10,18,32,.92);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 18px;
  overflow: hidden;
  position: relative;
}

#beloxLightboxImg{
  width: 100%;
  height: auto;
  display: block;
}

/* Close Button sichtbar auf dunkel */
.belox-lightbox-close{
  position: absolute;
  top: 12px;
  right: 12px;
  filter: invert(1);
  opacity: .9;
  z-index: 5;
}

/* =========================================================
   BELOX Lightbox Overlay (ohne Bootstrap)
   ========================================================= */

.belox-lightbox-overlay{
  position: fixed;
  inset: 0;
  background: rgba(8,12,20,.92);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 9999;
}

.belox-lightbox-overlay.active{
  display: flex;
}

.belox-lightbox-image{
  max-width: 92vw;
  max-height: 86vh;
  border-radius: 18px;
  box-shadow: 0 30px 120px rgba(0,0,0,.60);
  display: block;
}

.belox-lightbox-close,
.belox-lightbox-prev,
.belox-lightbox-next{
  position: absolute;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.14);
  color: #fff;
  cursor: pointer;
  border-radius: 999px;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  opacity: .9;
  transition: opacity .2s ease, transform .2s ease, background .2s ease;
}

.belox-lightbox-close:hover,
.belox-lightbox-prev:hover,
.belox-lightbox-next:hover{
  opacity: 1;
  transform: translateY(-1px);
  background: rgba(255,255,255,.10);
}

.belox-lightbox-close{
  top: 18px;
  right: 18px;
  font-size: 26px;
}

.belox-lightbox-prev{
  left: 18px;
  font-size: 26px;
}

.belox-lightbox-next{
  right: 18px;
  font-size: 26px;
}

/* Klickfläche in der Galerie */
.belox-lightbox-trigger{
  display: block;
  cursor: zoom-in;
}

/* Mobile: Buttons etwas kleiner */
@media (max-width: 575.98px){
  .belox-lightbox-close,
  .belox-lightbox-prev,
  .belox-lightbox-next{
    width: 40px;
    height: 40px;
  }
}


/* ==========================================
   Layout: Modul-Abstände (main-top / main-bottom)
   ========================================== */

/* Standard Abstand zwischen Modulen in main-top / main-bottom */
.belox-section .moduletable,
.belox-section .mod-custom,
.belox-section .module{
  margin: 0;                 /* kill Joomla default margin */
}

/* Abstand NUR zwischen aufeinanderfolgenden Modulen */
.belox-section .moduletable + .moduletable,
.belox-section .mod-custom + .mod-custom,
.belox-section .module + .module,
.belox-section .moduletable + .mod-custom,
.belox-section .mod-custom + .moduletable,
.belox-section .module + .mod-custom,
.belox-section .mod-custom + .module,
.belox-section .module + .moduletable,
.belox-section .moduletable + .module{
  margin-top: 28px;          /* <- hier steuern (z.B. 18–36px) */
}

/* Mobile etwas enger */
@media (max-width: 575.98px){
  .belox-section .moduletable + .moduletable,
  .belox-section .mod-custom + .mod-custom,
  .belox-section .module + .module,
  .belox-section .moduletable + .mod-custom,
  .belox-section .mod-custom + .moduletable,
  .belox-section .module + .mod-custom,
  .belox-section .mod-custom + .module,
  .belox-section .module + .moduletable,
  .belox-section .moduletable + .module{
    margin-top: 18px;
  }
}

/* ==========================================
   Layout: Abstand zwischen main-top / component / main-bottom
   ========================================== */

/* Main bekommt einen definierten Abstand (statt "zufällig") */
.belox-main{
  padding: 34px 0;     /* <- hier steuern */
  background: #fff;    /* passt zu belox-section */
}

/* Wenn main-top direkt davor ist, main enger machen */
.belox-section + .belox-main{
  padding-top: 18px;
}

/* Wenn main-bottom direkt danach kommt, main enger unten */
.belox-main + .belox-section{
  padding-top: clamp(40px, 5vw, 70px); /* optional: etwas weniger als 92px */
}


/* ==========================================
   Module Spacing – robust (style="none")
   ========================================== */

/* In main-top / main-bottom: Kinder-Blöcke „stacken“ */
.belox-pos-main-top,
.belox-pos-main-bottom{
  display: flex;
  flex-direction: column;
}

/* Abstand zwischen DIREKTEN Kindern (Module/HTML-Blöcke) */
.belox-pos-main-top > * + *,
.belox-pos-main-bottom > * + *{
  margin-top: 24px; /* <- hier steuern */
}

/* Wenn Module aus dem Editor mit <p> anfangen, killt das extra Abstand */
.belox-pos-main-top > * > p:first-child,
.belox-pos-main-bottom > * > p:first-child{
  margin-top: 0;
}

/* Mobile etwas enger */
@media (max-width: 575.98px){
  .belox-pos-main-top > * + *,
  .belox-pos-main-bottom > * + *{
    margin-top: 16px;
  }
}

/* Abstand zwischen Positions-Sektionen und Main reduzieren */
.belox-pos-main-top{
  padding-bottom: 38px !important;
}
.belox-main{
  padding: 28px 0 !important;
}
.belox-pos-main-bottom{
  padding-top: 38px !important;
}

/* Abstand zwischen Positions-Sektionen und Main reduzieren */
.belox-pos-main-top{
  padding-bottom: 38px !important;
}
.belox-main{
  padding: 28px 0 !important;
}
.belox-pos-main-bottom{
  padding-top: 38px !important;
}

/* ==========================================
   FIX: Doppelte belox-section Paddings in main-top/main-bottom
   ========================================== */

/* Wenn ein Modul IN main-top/main-bottom nochmal belox-section nutzt:
   dann Padding neutralisieren, sonst wird’s doppelt */
.belox-pos-main-top .belox-section,
.belox-pos-main-bottom .belox-section{
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  background: transparent !important; /* verhindert "weiße Kanten" */
}

/* Optional: trotzdem etwas Luft zwischen den Modulen */
.belox-pos-main-top > * + *,
.belox-pos-main-bottom > * + *{
  margin-top: 28px !important;
}

@media (max-width: 575.98px){
  .belox-pos-main-top > * + *,
  .belox-pos-main-bottom > * + *{
    margin-top: 18px !important;
  }
}


/* ==========================================
   HOTFIX: belox-section-dark darf NIE weiß sein
   (ganz ans Ende der custom.css)
   ========================================== */
section.belox-section.belox-section-dark{
  background:
    radial-gradient(900px 420px at 20% 10%, rgba(250,99,24,.12), transparent 60%),
    linear-gradient(135deg, var(--belox-bg), var(--belox-bg-2)) !important;
  color: var(--belox-text) !important;
}

/* Textfarben in DARK korrekt */
section.belox-section.belox-section-dark h2,
section.belox-section.belox-section-dark h3,
section.belox-section.belox-section-dark strong{
  color: var(--belox-text) !important;
}
section.belox-section.belox-section-dark .belox-hero-text,
section.belox-section.belox-section-dark p{
  color: var(--belox-muted);
}

/* Cards in DARK wieder „glassy“ (falls sie weiß geworden sind) */
section.belox-section.belox-section-dark .belox-trust-card{
  background: rgba(255,255,255,.05) !important;
  border: 1px solid rgba(255,255,255,.14) !important;
  box-shadow: 0 18px 50px rgba(0,0,0,.20) !important;
}

/* ==========================================
   Trust Section – belox-proof vertikal mittig
   ========================================== */

.belox-trust-grid{
  display: grid;
  grid-template-columns: 1.25fr .95fr;
  gap: 26px;
  align-items: center; /* 👈 sorgt für vertikale Zentrierung */
}

/* Optional: zusätzlich sicherstellen, dass die Karte selbst zentriert */
.belox-trust-grid .belox-proof{
  align-self: center;
}

/* Mobile: wieder normal untereinander */
@media (max-width: 991.98px){
  .belox-trust-grid{
    grid-template-columns: 1fr;
    align-items: stretch;
  }
}

/* ==========================================
   Trust Section – mehr vertikale Luft
   ========================================== */

/* gesamter Dark-Block bekommt mehr Raum */
.belox-section-dark .belox-trust-grid{
  padding: clamp(28px, 4vw, 56px) 0;
}

/* optional: weiße Proof-Box etwas freier atmen lassen */
.belox-section-dark .belox-proof{
  margin: clamp(12px, 2vw, 28px) 0;
}

/* ==========================================
   FIX: belox-proof Text in Dark Sections
   ========================================== */

.belox-section-dark .belox-proof{
  background: #ffffff;
  color: #0a223d;
}

.belox-section-dark .belox-proof h3{
  color: #0a223d; /* <- DAS ist der fehlende Part */
}

.belox-section-dark .belox-proof p,
.belox-section-dark .belox-proof li{
  color: #556070;
}

/* ==========================================
   FIX: Weißer belox-proof Kasten in DARK Section
   (schlägt Inline-Styles + spätere Overwrites)
   ========================================== */

.belox-section.belox-section-dark .belox-proof{
  background: #fff !important;
  border: 1px solid rgba(10,35,61,.12) !important;
  box-shadow: 0 18px 60px rgba(3,12,24,.08) !important;
  color: #0a223d !important;
}

/* Kicker oben */
.belox-section.belox-section-dark .belox-proof .belox-proof-kicker{
  background: rgba(10,35,61,.03) !important;
  border: 1px solid rgba(10,35,61,.12) !important;
  color: #556070 !important;
}

/* Headline sichtbar erzwingen */
.belox-section.belox-section-dark .belox-proof h3{
  color: #0a223d !important;
}

/* Text (auch wenn inline style="color: var(--belox-muted)" gesetzt ist) */
.belox-section.belox-section-dark .belox-proof p{
  color: #556070 !important;
}

/* Liste */
.belox-section.belox-section-dark .belox-proof li{
  color: #0a223d !important;
  border-top: 1px solid rgba(10,35,61,.10) !important;
}


/* ==========================================
   Kontakt – Form + Direktkontakt
   ========================================== */

.belox-form{
  border-radius: var(--belox-radius-md);
  border: 1px solid rgba(10,35,61,.12);
  background: #fff;
  box-shadow: 0 18px 60px rgba(3,12,24,.06);
  padding: 22px;
}

.belox-form-grid{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.belox-field{ display:flex; flex-direction:column; gap:6px; }
.belox-field--full{ grid-column: 1 / -1; }

.belox-field label{
  font-weight: 800;
  font-size: .92rem;
  color: #0a223d;
}

.belox-field input,
.belox-field select,
.belox-field textarea{
  width: 100%;
  border-radius: 14px;
  border: 1px solid rgba(10,35,61,.14);
  padding: .75rem .9rem;
  outline: none;
  transition: border-color .15s ease, box-shadow .15s ease;
  background: #fff;
}

.belox-field input:focus,
.belox-field select:focus,
.belox-field textarea:focus{
  border-color: rgba(250,99,24,.55);
  box-shadow: 0 0 0 4px rgba(250,99,24,.12);
}

.belox-check{
  flex-direction: row;
  align-items: flex-start;
  gap: 10px;
}

.belox-check input{
  width: 18px;
  height: 18px;
  margin-top: 2px;
}

.belox-form-actions{
  display:flex;
  flex-wrap:wrap;
  gap: 10px;
  align-items:center;
}

.belox-form-note{
  margin: 6px 0 0;
  color:#5b6676;
  font-size:.95rem;
}

.belox-form-note a{
  color: #0a223d;
  font-weight: 800;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.belox-contact-grid{
  display:grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 12px;
  margin-top: 10px;
}
.belox-contact-grid .item{
  border: 1px solid rgba(10,35,61,.10);
  border-radius: 14px;
  background:#f7f8fa;
  padding: 12px;
}
.belox-contact-grid .label{
  display:block;
  color:#556070;
  font-size:.9rem;
  margin-bottom: 3px;
}
.belox-contact-grid .value{
  display:block;
  font-weight: 900;
  color:#0a223d;
}

@media (max-width: 991.98px){
  .belox-form-grid{ grid-template-columns: 1fr; }
  .belox-contact-grid{ grid-template-columns: 1fr; }
}


/* ==========================================
   WhatsApp Proof Box – Text & Kontrast FIX
   ========================================== */

.belox-proof--whatsapp{
  color: var(--belox-text) !important;
}

/* Titel */
.belox-proof--whatsapp .belox-proof-title{
  margin: 0 0 10px;
  font-weight: 900;
  letter-spacing: -0.01em;
  font-size: 1.2rem;
  color: #ffffff !important;
}

/* Haupttext */
.belox-proof--whatsapp .belox-proof-text{
  margin: 0;
  color: var(--belox-muted) !important;
  line-height: 1.6;
}

/* Hinweistext */
.belox-proof--whatsapp .belox-proof-note{
  margin-top: 12px;
  font-size: 0.88rem;
  color: rgba(255,255,255,.60) !important;
}

/* Links & Buttons */
.belox-proof--whatsapp a{
  color: rgba(255,255,255,.85);
}
.belox-proof--whatsapp a:hover{
  color: #ffffff;
}
/* ==========================================
   FIX: WhatsApp-Proof darf NICHT weiß werden
   (Konflikt mit: .belox-section:not(.belox-section-dark) .belox-proof)
   ========================================== */

/* Erzwingt: WhatsApp-Box bleibt dunkel – auch in hellen Sections */
.belox-section:not(.belox-section-dark) .belox-proof.belox-proof--whatsapp,
.belox-proof.belox-proof--whatsapp{
  background:
    radial-gradient(520px 240px at 30% 35%, rgba(255,255,255,.10), transparent 55%),
    linear-gradient(135deg, var(--belox-bg), var(--belox-bg-2)) !important;

  border: 1px solid rgba(255,255,255,.14) !important;
  box-shadow: var(--belox-shadow) !important;

  color: var(--belox-text) !important;
}

/* Kicker */
.belox-proof.belox-proof--whatsapp .belox-proof-kicker{
  border: 1px solid rgba(255,255,255,.14) !important;
  background: rgba(255,255,255,.04) !important;
  color: var(--belox-muted) !important;
}

/* Titel */
.belox-proof.belox-proof--whatsapp .belox-proof-title{
  margin: 0 0 10px !important;
  font-weight: 900 !important;
  letter-spacing: -0.01em !important;
  font-size: 1.2rem !important;
  color: #fff !important;
}

/* Text */
.belox-proof.belox-proof--whatsapp .belox-proof-text{
  margin: 0 !important;
  color: var(--belox-muted) !important;
  line-height: 1.6 !important;
}

/* Hinweis */
.belox-proof.belox-proof--whatsapp .belox-proof-note{
  margin-top: 12px !important;
  font-size: 0.88rem !important;
  color: rgba(255,255,255,.60) !important;
}

/* Links/Buttons (nur in der WhatsApp Box) */
.belox-proof.belox-proof--whatsapp a{
  color: rgba(255,255,255,.85);
}
.belox-proof.belox-proof--whatsapp a:hover{
  color: #fff;
}


/* ==========================================
   WhatsApp Proof – Variante A (WEISS)
   ========================================== */

.belox-proof.belox-proof--whatsapp{
  background: #ffffff !important;
  border: 1px solid rgba(10,35,61,.12) !important;
  box-shadow: 0 18px 60px rgba(3,12,24,.08) !important;
  color: #0a223d !important;
}

/* Kicker */
.belox-proof.belox-proof--whatsapp .belox-proof-kicker{
  background: rgba(10,35,61,.03) !important;
  border: 1px solid rgba(10,35,61,.12) !important;
  color: #556070 !important;
}

/* Titel */
.belox-proof.belox-proof--whatsapp .belox-proof-title{
  margin: 0 0 10px !important;
  font-weight: 900 !important;
  letter-spacing: -0.01em !important;
  font-size: 1.2rem !important;
  color: #0a223d !important;
}

/* Text */
.belox-proof.belox-proof--whatsapp .belox-proof-text{
  margin: 0 !important;
  color: #556070 !important;
  line-height: 1.6 !important;
}

/* Hinweis */
.belox-proof.belox-proof--whatsapp .belox-proof-note{
  margin-top: 12px !important;
  font-size: .88rem !important;
  color: #6b7686 !important;
}

/* Optional: Links in weißer Box */
.belox-proof.belox-proof--whatsapp a{
  color: inherit;
}

/* ===============================
   HERO – Hintergrund behalten, Streifen entfernen
================================ */

/* Hero bleibt blau */
.belox-hero {
  margin: 0;
}

/* Falls die Streifen durch generisches section-Padding entstehen */
.belox-hero {
  padding-top: 0;
  padding-bottom: 0;
}

/* Das eigentliche Hero-Spacing geben wir dem Inhalt zurück */
.belox-hero .container {
  padding-top: clamp(3rem, 6vw, 6rem);
  padding-bottom: clamp(3rem, 6vw, 6rem);
}

/* ===============================
   Anchor-Fix – global
================================ */

section[id] {
  scroll-margin-top: 90px;
}

/* ===============================
   Buttons – Schatten entfernen
================================ */

.btn-belox-primary,
.btn-belox-primary:hover,
.btn-belox-primary:focus,
.btn-belox-primary:active,
.btn-belox-primary:focus-visible {
  box-shadow: none !important;
}

/* ===============================
   Footer – gleiche Höhe der Karten
================================ */

/* Falls die Karten in einem gemeinsamen Wrapper liegen (z.B. .belox-footer-grid):
   dann bitte diesen Wrapper auf "stretch" setzen. */
.belox-footer-grid,
.belox-footer-row,
.belox-footer-cards,
.belox-footer-inner {
  align-items: stretch;
}

/* Karten immer auf volle Höhe */
.belox-footer-card{
  height: 100%;
  display: flex;
  flex-direction: column;
}

/* Button-/Action-Bereich nach unten drücken, damit alle Karten optisch gleich wirken */
.belox-footer-card .mt-3{
  margin-top: auto !important;
}

/* Text-Styles ohne Inline-CSS */
.belox-footer-note{
  margin: 0;
  color: rgba(255,255,255,.70);
}

/* ===============================
   Footer – Abstand Standort/Karte reduzieren
================================ */

.belox-footer-card h3{
  margin-bottom: .6rem; /* falls bei euch zu groß */
}

.belox-map{
  margin-top: 0;
}

.belox-map-img{
  display: block;
  width: 100%;
  height: auto;
}

/* ===============================
   Footer – Karten gleiche Höhe (Bootstrap/Joomla robust)
================================ */

/* Der Footer-Bereich mit 3 Spalten: jede Spalte wird Flex-Container */
.belox-footer .row > [class*="col-"]{
  display: flex;
}

/* Die Card füllt die Spaltenhöhe komplett */
.belox-footer-card{
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
}

/* Buttons/Actions nach unten schieben (gleiche Optik) */
.belox-footer-card .mt-3{
  margin-top: auto !important;
}

.belox-footer-card .belox-map{
  margin-top: 0;
}

.belox-map-img{
  display: block;
}


/* ===============================
   Header / Menübanner – CI-blauer Hintergrund
================================ */

/* Versuche mehrere typische Header-Selektoren (Joomla/Template-abhängig) */
header,
.site-header,
.belox-header,
.navbar,
#header {
  background: linear-gradient(
    180deg,
    rgba(7, 24, 48, 0.92),
    rgba(7, 24, 48, 0.78)
  ) !important;

  /* sorgt dafür, dass es nicht "grau" aussieht, wenn dahinter weiß ist */
  backdrop-filter: saturate(140%) blur(10px);
  -webkit-backdrop-filter: saturate(140%) blur(10px);

  border-bottom: 1px solid rgba(255,255,255,0.10);
}

/* Optional: falls der Header sticky/fixed ist und transparent/halbtransparent sein soll */
header.is-sticky,
.site-header.is-sticky,
.navbar.is-sticky,
header.sticky,
.site-header.sticky {
  background: linear-gradient(
    180deg,
    rgba(7, 24, 48, 0.96),
    rgba(7, 24, 48, 0.86)
  ) !important;
}

/* ===============================
   Menü – Active/Current schöner markieren
================================ */

/* Links im Menü allgemein (sorgt für klare Lesbarkeit) */
.nav a,
.navbar a,
.mod-menu a,
.menu a {
  color: rgba(255,255,255,0.88);
}

/* Hover */
.nav a:hover,
.navbar a:hover,
.mod-menu a:hover,
.menu a:hover {
  color: #fff;
}

/* Aktiver Menüpunkt (Joomla nutzt oft: .current, .active) */
.nav .current > a,
.nav .active > a,
.navbar .current > a,
.navbar .active > a,
.mod-menu .current > a,
.mod-menu .active > a,
.menu .current > a,
.menu .active > a {
  color: #fff !important;
  background: rgba(255,255,255,0.08) !important; /* statt Grau/Braun */
  border: 1px solid rgba(255,255,255,0.14);
  border-radius: 999px;
}

/* Optional: "Underline"-Accent statt Hintergrund (wenn du es lieber dezenter willst)
   -> einfach die obige background/border Zeilen auskommentieren und das hier aktiv lassen */
.nav .current > a,
.nav .active > a,
.navbar .current > a,
.navbar .active > a,
.mod-menu .current > a,
.mod-menu .active > a,
.menu .current > a,
.menu .active > a {
  box-shadow: inset 0 -2px 0 rgba(0, 160, 255, 0.65);
}


/* ===============================
   Header – dunkles BELOX-Blau
================================ */

/* Header-Grundfläche */
header,
.site-header,
.belox-header,
.navbar,
#header {
  background: linear-gradient(
    180deg,
    #081b33 0%,   /* sehr dunkles Blau (wie Hero/Header oben) */
    #0b2545 100%
  ) !important;

  border-bottom: 1px solid rgba(255,255,255,0.08);
}

/* Sticky-Zustand minimal dichter */
header.is-sticky,
.site-header.is-sticky,
.navbar.is-sticky,
header.sticky {
  background: linear-gradient(
    180deg,
    #07182d 0%,
    #0a2240 100%
  ) !important;
}

/* ===============================
   Navigation – Farben & Active State
================================ */

/* Standard-Menülinks */
.nav a,
.navbar a,
.mod-menu a,
.menu a {
  color: rgba(255,255,255,0.85);
  transition: color .2s ease, box-shadow .2s ease;
}

/* Hover */
.nav a:hover,
.navbar a:hover,
.mod-menu a:hover,
.menu a:hover {
  color: #ffffff;
}

/* Aktiver Menüpunkt – BELOX-blaues Accent */
.nav .current > a,
.nav .active > a,
.navbar .current > a,
.navbar .active > a,
.mod-menu .current > a,
.mod-menu .active > a,
.menu .current > a,
.menu .active > a {
  color: #ffffff !important;

  /* dezente Markierung im CI-Blau */
  box-shadow: inset 0 -2px 0 #2f7dd1;
  background: transparent !important;
}


/* ===============================
   Unternehmen – Textgliederung
================================ */

.belox-subhead{
  font-size: 1.05rem;
  font-weight: 800;
  margin: 1.15rem 0 .35rem;
  letter-spacing: -0.01em;
}

.belox-copy-block{
  padding-top: .15rem;
}

/* ===============================
   Unternehmen – Portrait nicht abschneiden
   (falls irgendwo noch cover greift)
================================ */

.belox-profile__photo--clean{
  width: 100%;
  aspect-ratio: 3 / 4;
  overflow: hidden;
  border-radius: 14px;
  background: rgba(11, 37, 69, 0.25);
}

.belox-profile__photo--clean img{
  width: 100%;
  height: 100%;
  object-fit: contain !important;
  object-position: center top; /* Kopf bleibt sicher sichtbar */
  display: block;
}

/* ===============================
   Qualität-Modul – saubere Ausrichtung
================================ */

/* rechte Box soll nicht „hochschweben“ */
.belox-proof--aligned{
  margin-top: 0 !important;
}

/* falls im Template dort extra top-margins drin sind */
.belox-section-dark .belox-proof h3{
  margin-top: 0;
}

/* Optional: etwas mehr Balance auf großen Screens */
@media (min-width: 992px){
  .belox-section-dark .row.align-items-center{
    align-items: center;
  }
}


/* ==================================
   Unternehmen – Qualität & Werte
   Prozess-Texte sichtbar erzwingen
=================================== */

/* Überschriften im Prozess */
.belox-section-dark .belox-process-content h4{
  color: #ffffff !important;
  font-weight: 700;
}

/* Beschreibungstexte im Prozess */
.belox-section-dark .belox-process-content p{
  color: rgba(255,255,255,0.75) !important;
}

/* Marker optional minimal hervorheben */
.belox-section-dark .belox-process-marker{
  background-color: var(--belox-primary);
}

/* ==================================
   Unternehmen – Qualität & Werte
   Prozess-Titel sichtbar (in weißer belox-proof Box)
=================================== */

/* In der weißen Proof-Box: Texte dunkel erzwingen */
.belox-section-dark .belox-proof .belox-process-content h4{
  color: #081b33 !important;        /* dunkles BELOX-Blau */
  opacity: 1 !important;
  visibility: visible !important;
  display: block !important;
}

.belox-section-dark .belox-proof .belox-process-content p{
  color: rgba(8,27,51,0.78) !important;
  opacity: 1 !important;
  visibility: visible !important;
  display: block !important;
}

/* Marker wieder orange (falls er schwarz geworden ist) */
.belox-section-dark .belox-proof .belox-process-marker{
  background: var(--belox-accent, #ff7a00) !important;
}

/* ==================================
   Unternehmen – Qualität & Werte
   Weißer Proof-Kasten sauber ausrichten
=================================== */

/* Nur im Qualität-Modul */
.belox-section-dark .belox-proof{
  margin-top: 1.5rem;      /* Kasten nach unten schieben */
  margin-bottom: 0;        /* zu großen unteren Abstand entfernen */
  padding-top: 1.5rem;     /* oben etwas mehr Luft im Kasten */
}

/* ==================================
   Unternehmen – Portrait wieder kompakt
=================================== */

.belox-profile__photo--clean{
  max-width: 320px;          /* begrenzt die Breite */
  margin: 0 auto 1rem;       /* zentriert + etwas Luft unten */
}

/* auf größeren Screens minimal größer */
@media (min-width: 1200px){
  .belox-profile__photo--clean{
    max-width: 360px;
  }
}

.belox-profile{
  max-width: 420px;
  margin: 0 auto;           /* gesamte Box zentrieren */
}


/* ==================================
   Unternehmen – Profilfoto wieder kompakt wie Card
=================================== */

/* Den Kopfbereich stapeln (Foto oben, Text darunter) */
.belox-profile__head{
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 1rem !important;
}

/* Foto-Kasten wieder kompakt */
.belox-profile__photo.belox-profile__photo--clean{
  width: min(320px, 100%) !important;   /* kompakt */
  max-width: 320px !important;
  margin: 0 auto !important;

  aspect-ratio: 3 / 4;
  overflow: hidden;
  border-radius: 14px;
  background: rgba(11, 37, 69, 0.25);
}

/* Meta zentrieren (wirkt wie vorherige Card) */
.belox-profile__meta{
  width: 100%;
  text-align: center !important;
}

/* Bild NICHT abschneiden, aber positionierbar */
.belox-profile__photo--clean img{
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;

  /* Hier kannst du später feinjustieren */
  object-position: center 10% !important;  /* weiter nach oben/unten schieben */
  display: block;
}

/* Auf sehr großen Screens minimal größer */
@media (min-width: 1200px){
  .belox-profile__photo.belox-profile__photo--clean{
    max-width: 360px !important;
  }
}


/* ==================================
   Unternehmen – Profil-Card Kopf wie im Screenshot
   (kleines Foto links, Meta rechts)
=================================== */

/* Kopf wieder horizontal */
.belox-profile__head{
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 16px !important;
}

/* Foto klein, kompakt wie Card */
.belox-profile__photo.belox-profile__photo--clean{
  flex: 0 0 72px !important;
  width: 72px !important;
  height: 72px !important;
  max-width: none !important;

  border-radius: 16px !important;
  overflow: hidden !important;
  background: rgba(11, 37, 69, 0.20) !important;
}

/* Bild füllt die kleine Kachel – und ist verschiebbar */
.belox-profile__photo--clean img{
  width: 100% !important;
  height: 100% !important;

  object-fit: cover !important;         /* in kleiner Kachel wirkt cover besser */
  object-position: center 0% !important; /* <-- HIER feinjustieren (0%..50%) */
  display: block !important;
}

/* Meta rechts sauber */
.belox-profile__meta{
  flex: 1 1 auto !important;
  min-width: 0;
  text-align: left !important;
}

/* Tags nicht zu breit “sprengen” */
.belox-profile__tags{
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

/* ==================================
   Unternehmen – CTA Button sichtbar machen
=================================== */

.belox-profile__cta{
  margin-top: 1.25rem !important;
  display: block !important;
  width: 100%;
}

/* Falls ein Parent overflow versteckt */
.belox-profile{
  overflow: visible !important;
}


/* ==================================
   Unternehmen – Profil CTA sichtbar machen
   (nur innerhalb der Profil-Card)
=================================== */

.belox-profile__cta{
  display: block !important;
  margin-top: 1.25rem !important;
}

.belox-profile__cta a{
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  width: 100% !important;

  /* Sichtbarkeit / Kontrast */
  color: #081b33 !important;                 /* dunkles Blau */
  border: 1px solid rgba(8,27,51,0.25) !important;
  background: rgba(8,27,51,0.04) !important;

  /* falls irgendwo "unsichtbar" gemacht */
  opacity: 1 !important;
  visibility: visible !important;

  /* sauberes Button-Feeling */
  min-height: 44px;
  text-decoration: none !important;
}

/* Hover (optional hübscher) */
.belox-profile__cta a:hover{
  background: rgba(8,27,51,0.08) !important;
  border-color: rgba(8,27,51,0.35) !important;
}

/* ==================================
   Unternehmen – Profil-Zitat sauber setzen
=================================== */

.belox-profile__quote{
  position: relative;
  margin: 1rem 0 0;
  padding: 0.75rem 0.25rem;
  font-style: italic;
  color: rgba(8,27,51,0.85);
  line-height: 1.45;
}

/* öffnendes Anführungszeichen */
.belox-profile__quote::before{
  content: "„";
  font-size: 2rem;
  font-weight: 700;
  line-height: 1;
  margin-right: .25rem;
  vertical-align: -0.35em;
}

/* schließendes Anführungszeichen */
.belox-profile__quote::after{
  content: "“";
  font-size: 2rem;
  font-weight: 700;
  line-height: 1;
  margin-left: .1rem;
  vertical-align: -0.35em;
}

/* ==================================
   Profil-Quote – sauber, ohne „hängende“ Anführungszeichen
=================================== */

/* Reset: falls bereits ::before/::after vom Template gesetzt sind */
.belox-profile .belox-profile__quote::before,
.belox-profile .belox-profile__quote::after{
  content: none !important;
}

/* Neue Quote-Optik */
.belox-profile .belox-profile__quote{
  position: relative;
  margin: 1rem 0 0;
  padding: 0.25rem 0 0.25rem 1.25rem;
  font-style: italic;
  line-height: 1.5;
  color: rgba(8,27,51,0.85);
}

/* dezenter Quote-Strich links */
.belox-profile .belox-profile__quote{
  border-left: 3px solid rgba(8,27,51,0.15);
}



/* Reset zuerst wie oben */
.belox-profile .belox-profile__quote::before,
.belox-profile .belox-profile__quote::after{
  content: none !important;
}

.belox-profile .belox-profile__quote{
  position: relative;
  margin: 1rem 0 0;
  padding: 0.75rem 1rem 0.25rem 1.25rem;
  font-style: italic;
  line-height: 1.5;
  color: rgba(8,27,51,0.85);
}

/* großes öffnendes Zeichen links oben (ohne Umbruch) */
.belox-profile .belox-profile__quote::before{
  content: "„" !important;
  position: absolute;
  left: 0;
  top: 0;
  font-size: 2.25rem;
  font-weight: 800;
  line-height: 1;
  color: rgba(8,27,51,0.18);
}

/* ==================================
   Kontakt – Formular CTA "Lieber direkt kontaktieren" sichtbar
=================================== */

/* Sehr häufig: Buttons im Formular werden vom Template überschrieben */
.belox-section form .btn-belox-outline,
.belox-section .btn-belox-outline{
  color: #081b33 !important;
  border: 1px solid rgba(8,27,51,0.28) !important;
  background: rgba(8,27,51,0.04) !important;
  opacity: 1 !important;
  visibility: visible !important;
  text-decoration: none !important;
}

/* Hover */
.belox-section form .btn-belox-outline:hover,
.belox-section .btn-belox-outline:hover{
  background: rgba(8,27,51,0.08) !important;
  border-color: rgba(8,27,51,0.38) !important;
}

/* ==================================
   Kontakt – WhatsApp/Schnellkontakt Box lesbar machen
=================================== */

/* ===============================
   DARK Styling NUR wo es hingehört
   - belox-section-dark
   - WhatsApp / Dark Cards (eigene Klassen)
================================ */

/* Hintergrund nur für dunkle Bereiche */
.belox-section-dark .belox-proof,
.belox-card-dark,
.belox-whatsapp,
.belox-schnellkontakt,
.belox-proof--whatsapp{
  background: linear-gradient(180deg, rgba(7,24,45,0.92), rgba(7,24,45,0.80)) !important;
}

/* Textfarben nur für dunkle Bereiche */
.belox-section-dark .belox-proof *,
.belox-card-dark *,
.belox-whatsapp *,
.belox-schnellkontakt *,
.belox-proof--whatsapp *{
  color: rgba(255,255,255,0.88);
}

/* Überschriften nur für dunkle Bereiche */
.belox-section-dark .belox-proof h2,
.belox-section-dark .belox-proof h3,
.belox-card-dark h2,
.belox-card-dark h3,
.belox-whatsapp h2,
.belox-whatsapp h3,
.belox-schnellkontakt h2,
.belox-schnellkontakt h3,
.belox-proof--whatsapp h2,
.belox-proof--whatsapp h3{
  color: #fff !important;
}


.belox-section .belox-proof h2,
.belox-section .belox-proof h3,
.belox-section .belox-card-dark h2,
.belox-section .belox-card-dark h3,
.belox-section .belox-whatsapp h2,
.belox-section .belox-whatsapp h3,
.belox-section .belox-schnellkontakt h2,
.belox-section .belox-schnellkontakt h3{
  color: #fff !important;
}

/* Feiner Hinweistext in der Box */
.belox-section .belox-proof small,
.belox-section .belox-proof .hint,
.belox-section .belox-proof .note{
  color: rgba(255,255,255,0.72) !important;
}

/* ==================================
   Verfahren-Seiten – Intro/Head-Panel (blau) sauber & lesbar
=================================== */

.belox-hero-panel{
  background: radial-gradient(120% 120% at 0% 0%, rgba(255,255,255,0.08), transparent 55%),
              linear-gradient(180deg, rgba(6,20,38,0.96), rgba(10,34,61,0.92)) !important;
  border-radius: var(--belox-radius-lg, 22px);
  padding: clamp(18px, 3vw, 28px);
  box-shadow: 0 18px 60px rgba(3,12,24,.10);
  border: 1px solid rgba(255,255,255,.10);
}

/* Titel und Text im Panel immer hell */
.belox-hero-panel__title{
  color: #fff !important;
  margin: 0 0 10px;
}

.belox-hero-panel__text{
  color: rgba(255,255,255,.82) !important;
  margin: 0;
  max-width: 85ch;
}

/* Falls irgendwo global wieder dunkel drüberbügelt */
.belox-hero-panel *{
  color: inherit !important;
}

/* ===============================
   Verfahren – dunkler Info-Kasten
=============================== */

.belox-section--info-dark {
  background: linear-gradient(180deg, #0a223d 0%, #061426 100%);
  padding: clamp(3rem, 6vw, 5rem) 0;
}

.belox-info-box {
  max-width: 980px;
  margin: 0 auto;
  text-align: left;
}

/* Überschrift */
.belox-info-box h1 {
  color: #ffffff;
  margin-bottom: 1rem;
}

/* Fließtext */
.belox-info-box p {
  color: rgba(255, 255, 255, 0.9);
  font-size: 1.05rem;
  line-height: 1.65;
  max-width: 75ch;
}

/* Optional: weicher Kontrast */
.belox-info-box strong {
  color: #ffffff;
}

/* Verfahren – Intro Panel (dark) */
.belox-hero-panel.belox-hero-panel--dark{
  background: linear-gradient(180deg, #0a223d 0%, #061426 100%) !important;
  border: 1px solid rgba(255,255,255,.10);
}

.belox-hero-panel.belox-hero-panel--dark .belox-hero-panel__title{
  color: #fff !important;
}

.belox-hero-panel.belox-hero-panel--dark .belox-hero-panel__text{
  color: rgba(255,255,255,.90) !important;
}

/* Safety: falls irgendwo global reinfunkt */
.belox-hero-panel.belox-hero-panel--dark *{
  color: inherit !important;
}



/* ==================================
   Kontakt – WhatsApp-Kachel lesbar machen
=================================== */

.belox-proof--whatsapp{
  /* weniger "schwer" als vorher */
  background: linear-gradient(180deg, rgba(7,24,45,0.72), rgba(7,24,45,0.58)) !important;
  border: 1px solid rgba(255,255,255,0.10);
}

/* Headlines/Texts in der WhatsApp-Kachel */
.belox-proof--whatsapp .belox-proof-kicker{
  color: rgba(255,255,255,0.70) !important;
}

.belox-proof--whatsapp .belox-proof-title{
  color: #fff !important;
}

.belox-proof--whatsapp .belox-proof-text{
  color: rgba(255,255,255,0.85) !important;
}

/* Hinweis unten */
.belox-proof--whatsapp .belox-proof-note{
  color: rgba(255,255,255,0.70) !important;
}

/* Outline-Button in dunkler Box sichtbar */
.belox-proof--whatsapp .btn-belox-outline{
  color: #fff !important;
  border-color: rgba(255,255,255,0.35) !important;
  background: rgba(255,255,255,0.06) !important;
}

.belox-proof--whatsapp .btn-belox-outline:hover{
  background: rgba(255,255,255,0.10) !important;
  border-color: rgba(255,255,255,0.45) !important;
}

/* ==================================
   Kontakt – WhatsApp Kachel FINAL FIX
=================================== */

/* Hintergrund bewusst etwas heller */
.belox-proof--whatsapp{
  background: linear-gradient(
    180deg,
    #0b2545 0%,
    #081b33 100%
  ) !important;
}

/* ALLE Texte explizit auf hell setzen */
.belox-proof--whatsapp,
.belox-proof--whatsapp *{
  opacity: 1 !important;
  color: #ffffff !important;
}

/* Überschrift klar sichtbar */
.belox-proof--whatsapp .belox-proof-title{
  color: #ffffff !important;
  font-weight: 700;
}

/* Lauftext */
.belox-proof--whatsapp .belox-proof-text{
  color: rgba(255,255,255,0.92) !important;
}

/* Kicker oben */
.belox-proof--whatsapp .belox-proof-kicker{
  color: rgba(255,255,255,0.75) !important;
  letter-spacing: 0.04em;
}

/* Hinweistext */
.belox-proof--whatsapp .belox-proof-note{
  color: rgba(255,255,255,0.70) !important;
}

/* Buttons in der dunklen Kachel */
.belox-proof--whatsapp .btn-belox-primary{
  color: #000 !important;
}

.belox-proof--whatsapp .btn-belox-outline{
  color: #ffffff !important;
  border: 1px solid rgba(255,255,255,0.45) !important;
  background: rgba(255,255,255,0.10) !important;
}

/* ==================================
   Kontakt – WhatsApp Kachel: Overlay killen + Text sichtbar
=================================== */

/* Kachel als Stack-Context */
.belox-proof--whatsapp{
  position: relative !important;
  overflow: hidden; /* falls Effekte rauslaufen */
}

/* Falls das Template ein dunkles Overlay via Pseudo-Element nutzt */
.belox-proof--whatsapp::before,
.belox-proof--whatsapp::after{
  content: none !important;
  display: none !important;
}

/* Inhalt immer über allen Layern */
.belox-proof--whatsapp > *{
  position: relative;
  z-index: 2;
}

/* Hintergrund sauber (optional – kann bleiben, wenn du willst) */
.belox-proof--whatsapp{
  background: linear-gradient(180deg, #0b2545 0%, #081b33 100%) !important;
}

/* Text-Kontrast fix */
.belox-proof--whatsapp .belox-proof-kicker{
  color: rgba(255,255,255,0.75) !important;
}

.belox-proof--whatsapp .belox-proof-title{
  color: #ffffff !important;
  font-weight: 800;
}

.belox-proof--whatsapp .belox-proof-text{
  color: rgba(255,255,255,0.90) !important;
}

.belox-proof--whatsapp .belox-proof-note{
  color: rgba(255,255,255,0.70) !important;
}

.belox-proof--whatsapp{
  opacity: 1 !important;
  filter: none !important;
  mix-blend-mode: normal !important;
}

/* ==================================
   Kontakt – WhatsApp Kachel: NUKLEAR FIX
   (Overlay/Filter/Opacity/Z-Index neutralisieren)
=================================== */

.belox-proof.belox-proof--whatsapp{
  position: relative !important;
  isolation: isolate !important;   /* neuer Stacking Context */
  opacity: 1 !important;
  filter: none !important;
  mix-blend-mode: normal !important;
  background: linear-gradient(180deg, #0b2545 0%, #081b33 100%) !important;
}

/* ALLES in der Kachel wieder "normal" rendern */
.belox-proof.belox-proof--whatsapp *,
.belox-proof.belox-proof--whatsapp *::before,
.belox-proof.belox-proof--whatsapp *::after{
  opacity: 1 !important;
  filter: none !important;
  mix-blend-mode: normal !important;
}

/* Inhalt garantiert über allem */
.belox-proof.belox-proof--whatsapp > *{
  position: relative !important;
  z-index: 5 !important;
}

/* Falls irgendwo ein Overlay-DIV existiert (häufige Namen) */
.belox-proof.belox-proof--whatsapp .overlay,
.belox-proof.belox-proof--whatsapp .bg,
.belox-proof.belox-proof--whatsapp .background,
.belox-proof.belox-proof--whatsapp .layer,
.belox-proof.belox-proof--whatsapp .shader{
  display: none !important;
}

/* Textfarben explizit */
.belox-proof.belox-proof--whatsapp .belox-proof-kicker{ color: rgba(255,255,255,0.80) !important; }
.belox-proof.belox-proof--whatsapp .belox-proof-title{ color: #ffffff !important; font-weight: 800 !important; }
.belox-proof.belox-proof--whatsapp .belox-proof-text{  color: rgba(255,255,255,0.92) !important; }
.belox-proof.belox-proof--whatsapp .belox-proof-note{  color: rgba(255,255,255,0.75) !important; }

/* ==================================
   Kontakt – WhatsApp-Kachel: Text besser lesbar
=================================== */

/* Titel deutlich stärker */
.belox-proof--whatsapp .belox-proof-title{
  color: #fff !important;
  font-weight: 900 !important;
  letter-spacing: -0.01em;
  text-shadow: 0 1px 0 rgba(0,0,0,0.25);
}

/* Fließtext größer + kontrastreicher */
.belox-proof--whatsapp .belox-proof-text{
  color: rgba(255,255,255,0.96) !important;
  font-size: 1.02rem;
  line-height: 1.55;
  text-shadow: 0 1px 0 rgba(0,0,0,0.25);
}

/* Kicker oben: etwas sichtbarer */
.belox-proof--whatsapp .belox-proof-kicker{
  color: rgba(255,255,255,0.85) !important;
  font-weight: 700;
  letter-spacing: 0.08em;
}

/* Hinweistext unten: besser lesbar, aber weiterhin dezent */
.belox-proof--whatsapp .belox-proof-note{
  color: rgba(255,255,255,0.82) !important;
  font-size: 0.92rem;
  line-height: 1.4;
}

/* ==================================
   Datenschutz – Inhaltsverzeichnis Links untereinander
=================================== */

.belox-legal-toc__links{
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start;
  gap: .35rem;
}

.belox-legal-toc__links a{
  display: block;
  width: 100%;
}

.belox-legal-item {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  margin: 12px 0;
}

.belox-legal-badge {
  min-width: 42px;
  height: 42px;
  border-radius: 50%;
  background: #f2f4f6;   /* passt sich hell/dunkel gut an */
  color: #333;
  font-weight: 600;
  font-size: 0.95rem;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.belox-legal-item p {
  margin: 0;
  line-height: 1.55;
}

/* ==================================
   Fix: belox-proof auf Startseite wieder normalisieren
   (WhatsApp bleibt AUSGENOMMEN)
=================================== */

/* ALLE belox-proof EXCEPT WhatsApp */
.belox-proof:not(.belox-proof--whatsapp){
  opacity: 1 !important;
  filter: none !important;
  mix-blend-mode: normal !important;
  background: var(--belox-panel-bg, linear-gradient(180deg, #0b2545, #081b33));
}

/* Textfarben in normalen Proof-Boxen */
.belox-proof:not(.belox-proof--whatsapp) .belox-proof-kicker{
  color: rgba(255,255,255,0.65) !important;
}

.belox-proof:not(.belox-proof--whatsapp) h3{
  color: #fff !important;
}

.belox-proof:not(.belox-proof--whatsapp) p,
.belox-proof:not(.belox-proof--whatsapp) li{
  color: rgba(255,255,255,0.85) !important;
}

/* Listenpunkte auf der Startseite */
.belox-proof:not(.belox-proof--whatsapp) li::marker{
  color: var(--belox-accent, #ff6a00);
}


/* ==================================
   BELOX Proof Boxes – stabile Modifier-Varianten
   Basis: .belox-proof (Layout)
   Varianten: --dark / --light / --whatsapp
=================================== */

/* BASIS: nur Abstände/Layout, KEINE Farben */
.belox-proof{
  position: relative;
  border-radius: 20px;
  padding: 28px;
}

/* DARK (Startseite / dunkle Highlights) */
.belox-proof--dark{
  border: 1px solid rgba(255,255,255,.14);
  background:
    radial-gradient(520px 240px at 30% 35%, rgba(255,255,255,.10), transparent 55%),
    linear-gradient(180deg, rgba(11,37,69,.96), rgba(8,27,51,.96));
  color: #fff;
}

.belox-proof--dark .belox-proof-kicker{
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.04);
  color: rgba(255,255,255,.70);
}

.belox-proof--dark h3{ color:#fff; }
.belox-proof--dark p,
.belox-proof--dark li{ color: rgba(255,255,255,.86); }

/* LIGHT (weiße Box, z. B. Prozess) */
.belox-proof--light{
  background: #fff;
  border: 1px solid rgba(8,27,51,.10);
  color: #081b33;
}

.belox-proof--light .belox-proof-kicker{
  border: 1px solid rgba(8,27,51,.12);
  background: rgba(8,27,51,.04);
  color: rgba(8,27,51,.60);
}

.belox-proof--light h3{ color:#081b33; }
.belox-proof--light p,
.belox-proof--light li{ color: rgba(8,27,51,.82); }

/* WHATSAPP (eigene Optik – unabhängig von dark/light) */
.belox-proof--whatsapp{
  isolation: isolate;
  background: linear-gradient(180deg, #0b2545 0%, #081b33 100%);
  border: 1px solid rgba(255,255,255,.10);
}

.belox-proof--whatsapp .belox-proof-kicker{ color: rgba(255,255,255,.80); }
.belox-proof--whatsapp .belox-proof-title{ color:#fff; font-weight:900; }
.belox-proof--whatsapp .belox-proof-text{ color: rgba(255,255,255,.94); }
.belox-proof--whatsapp .belox-proof-note{ color: rgba(255,255,255,.80); }

/* Buttons in DARK/WHATSAPP korrekt */
.belox-proof--dark .btn-belox-outline,
.belox-proof--whatsapp .btn-belox-outline{
  color:#fff;
  border: 1px solid rgba(255,255,255,.35);
  background: rgba(255,255,255,.08);
}

/* ==================================
   Startseite – Express-Kasten bewusst WEISS
=================================== */

.belox-proof--light{
  background: #ffffff !important;
  border: 1px solid rgba(8,27,51,0.10) !important;
  color: #081b33 !important;
}

/* Textfarben */
.belox-proof--light h3{
  color: #081b33 !important;
}

.belox-proof--light p,
.belox-proof--light li{
  color: rgba(8,27,51,0.85) !important;
}

/* Kicker */
.belox-proof--light .belox-proof-kicker{
  background: rgba(8,27,51,0.04) !important;
  border: 1px solid rgba(8,27,51,0.12) !important;
  color: rgba(8,27,51,0.60) !important;
}

/* Buttons im weißen Kasten */
.belox-proof--light .btn-belox-outline{
  background: transparent !important;
  border: 1px solid rgba(8,27,51,0.28) !important;
  color: #081b33 !important;
}

/* Nur Startseite – erster belox-proof im Abschnitt */
body.home .belox-proof{
  background: #fff !important;
  color: #081b33 !important;
}

/* Startseite: Express-Kasten erzwingen (ultra-spezifisch) */
body.home .belox-section .belox-proof{
  background: #fff !important;
  color: #081b33 !important;
  border: 1px solid rgba(8,27,51,0.10) !important;
}

body.home .belox-section .belox-proof h3{
  color: #081b33 !important;
}

body.home .belox-section .belox-proof p,
body.home .belox-section .belox-proof li{
  color: rgba(8,27,51,0.85) !important;
}

/* ==================================
   FIX: Weiße belox-proof Boxen (helle Sections) -> Text wieder dunkel
   WhatsApp bleibt unberührt
=================================== */

.belox-section:not(.belox-section-dark) .belox-proof:not(.belox-proof--whatsapp),
.belox-section:not(.belox-section-dark) .belox-proof:not(.belox-proof--whatsapp) *{
  color: #0a223d !important;
}

/* etwas weichere Lesefarbe für Fließtext */
.belox-section:not(.belox-section-dark) .belox-proof:not(.belox-proof--whatsapp) p,
.belox-section:not(.belox-section-dark) .belox-proof:not(.belox-proof--whatsapp) li{
  color: rgba(10,35,61,0.85) !important;
}

/* Kicker in weißer Box */
.belox-section:not(.belox-section-dark) .belox-proof:not(.belox-proof--whatsapp) .belox-proof-kicker{
  color: rgba(10,35,61,0.65) !important;
  border-color: rgba(10,35,61,0.12) !important;
  background: rgba(10,35,61,0.04) !important;
}

/* Marker darf orange bleiben */
.belox-section:not(.belox-section-dark) .belox-proof:not(.belox-proof--whatsapp) li::marker{
  color: var(--belox-accent) !important;
}

.belox-section .belox-proof * { color: rgba(255,255,255,0.88); }


/* ==================================
   FINAL FIX – Weiße belox-proof Boxen (Startseite etc.)
   Klare Lesbarkeit + Buttons sichtbar
=================================== */

/* Grundtext */
.belox-section:not(.belox-section-dark) 
  .belox-proof:not(.belox-proof--whatsapp){
  color: #0a223d !important;
}

/* ALLE Texte sauber dunkel */
.belox-section:not(.belox-section-dark) 
  .belox-proof:not(.belox-proof--whatsapp) *{
  color: #0a223d !important;
  opacity: 1 !important;
}

/* Fließtext etwas softer */
.belox-section:not(.belox-section-dark) 
  .belox-proof:not(.belox-proof--whatsapp) p,
.belox-section:not(.belox-section-dark) 
  .belox-proof:not(.belox-proof--whatsapp) li{
  color: rgba(10,35,61,0.88) !important;
}

/* Headline */
.belox-section:not(.belox-section-dark) 
  .belox-proof:not(.belox-proof--whatsapp) h3{
  color: #081b33 !important;
}

/* Kicker */
.belox-section:not(.belox-section-dark) 
  .belox-proof:not(.belox-proof--whatsapp) .belox-proof-kicker{
  color: rgba(10,35,61,0.60) !important;
  border-color: rgba(10,35,61,0.14) !important;
  background: rgba(10,35,61,0.05) !important;
}

/* LISTEN: Linie & Marker */
.belox-section:not(.belox-section-dark) 
  .belox-proof:not(.belox-proof--whatsapp) li{
  border-top: 1px solid rgba(10,35,61,0.12) !important;
}

.belox-section:not(.belox-section-dark) 
  .belox-proof:not(.belox-proof--whatsapp) li::marker{
  color: var(--belox-accent) !important;
}

/* BUTTON "Über BELOX" sichtbar machen */
.belox-section:not(.belox-section-dark) 
  .belox-proof:not(.belox-proof--whatsapp) .btn-belox-outline{
  color: #081b33 !important;
  border: 1px solid rgba(8,27,51,0.35) !important;
  background: transparent !important;
}

.belox-section:not(.belox-section-dark) 
  .belox-proof:not(.belox-proof--whatsapp) .btn-belox-outline:hover{
  background: rgba(8,27,51,0.06) !important;
}

/* ==================================
   Startseite – Express-Box (weiß, klar, wie früher)
=================================== */

/* Box */
.belox-proof--express{
  background: #fff !important;
  border: 1px solid rgba(10,35,61,.12) !important;
  box-shadow: 0 18px 60px rgba(3,12,24,.08) !important;
  color: #0a223d !important;
}

/* Wichtig: globale "weiß/grau" Regeln neutralisieren */
.belox-proof--express *{
  color: inherit !important;
  opacity: 1 !important;
  filter: none !important;
}

/* Kicker */
.belox-proof--express .belox-proof-kicker{
  color: rgba(10,35,61,.60) !important;
  border: 1px solid rgba(10,35,61,.14) !important;
  background: rgba(10,35,61,.04) !important;
}

/* Headline & Text */
.belox-proof--express h3{
  color: #0a223d !important;
}

.belox-proof--express p{
  color: rgba(10,35,61,.82) !important;
}

/* Liste */
.belox-proof--express li{
  color: rgba(10,35,61,.90) !important;
  border-top: 1px solid rgba(10,35,61,.12) !important;
}

/* Buttons */
.belox-proof--express .btn-belox-primary{
  box-shadow: none !important; /* falls du keinen Schatten willst */
}

.belox-proof--express .btn-belox-outline{
  color: #0a223d !important;
  border: 1px solid rgba(10,35,61,.28) !important;
  background: #fff !important;
  box-shadow: none !important;
}

.belox-proof--express .btn-belox-outline:hover{
  background: rgba(10,35,61,.06) !important;
  border-color: rgba(10,35,61,.38) !important;
}






.belox-proof--light {
  background: #fff;
  color: #081b33;
}

.belox-proof--light .belox-proof-title {
  color: #081b33;
}

.belox-proof--light .belox-proof-text,
.belox-proof--light li {
  color: rgba(8, 27, 51, 0.85);
}

.belox-proof--light .btn-belox-outline {
  color: #081b33;
  border-color: rgba(8, 27, 51, 0.25);
}


.belox-contact-line{
  display:flex;
  align-items:center;
  gap:10px;
}

.belox-contact-ico{
  display:inline-flex;
  width:18px;
  height:18px;
  opacity:.9;
}

.belox-contact-link{
  display:inline-block;
}


.belox-contact-line{
  display:flex;
  align-items:flex-start;
  gap:10px;
}

.belox-contact-ico{
  display:inline-flex;
  width:18px;
  height:18px;
  margin-top: 2px;
  opacity:.9;
}

.belox-contact-stack{
  display:flex;
  flex-direction:column;
  gap:6px;
}

.belox-contact-link{
  display:inline-block;
}


/* Footer Kontakt – Kacheln */
.belox-footer-contact--tiles{
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.belox-contact-tile{
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  border-radius: 12px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.12);
  text-decoration: none;
  color: inherit;
  transition: background .2s ease, border-color .2s ease;
}

.belox-contact-tile:hover{
  background: rgba(255,255,255,0.10);
  border-color: rgba(255,255,255,0.25);
}

.belox-contact-ico{
  display: inline-flex;
  color: var(--belox-accent);
  min-width: 22px;
  justify-content: center;
}

/* CTA Panel – Outline Button immer sichtbar (nur hier!) */
.belox-cta-panel--clean .btn.btn-belox-outline{
  color: #fff !important;
  border-color: rgba(255,255,255,.75) !important;
  background: transparent !important;
  box-shadow: none !important;
}

.belox-cta-panel--clean .btn.btn-belox-outline:hover,
.belox-cta-panel--clean .btn.btn-belox-outline:focus{
  color: #fff !important;
  border-color: #fff !important;
  background: rgba(255,255,255,.10) !important;
}

/* =========================
   Legierung Seite – Module
   ========================= */

/* Modul 1: Dark-Proof etwas ruhiger */
.belox-legierung-proof {
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03));
  border: 1px solid rgba(255,255,255,.12);
}

/* Modul 1: Media Card mit Device + Blueprint */
.belox-legierung-media{
  position: relative;
  overflow: hidden;
}
.belox-legierung-blueprint{
  position: absolute;
  top: -10px;
  right: -10px;
  width: min(320px, 55%);
  opacity: .22;
  pointer-events: none;
  filter: grayscale(1);
}
.belox-legierung-devicewrap{
  display: grid;
  place-items: center;
  padding: 14px 0 6px;
}
.belox-legierung-device{
  width: min(340px, 85%);
  height: auto;
  display: block;
  filter: drop-shadow(0 18px 40px rgba(0,0,0,.25));
}

/* Modul 2: Bildgrid wie Screenshot */
.belox-legierung-grid{
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: auto auto;
  gap: 16px;
  height: 100%;
}
.belox-legierung-figure{
  margin: 0;
  border-radius: 18px;
  overflow: hidden;
  border: 1px solid rgba(10,35,61,.12);
  box-shadow: 0 18px 60px rgba(3,12,24,.08);
  background: #fff;
}
.belox-legierung-figure img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.belox-legierung-figure--top{
  grid-column: 2 / 3;
  grid-row: 1 / 2;
  min-height: 260px;
}
.belox-legierung-figure--bottom{
  grid-column: 1 / 2;
  grid-row: 2 / 3;
  min-height: 260px;
}

/* Responsive: auf Mobile untereinander */
@media (max-width: 991.98px){
  .belox-legierung-grid{
    grid-template-columns: 1fr;
    grid-template-rows: auto auto;
  }
  .belox-legierung-figure--top,
  .belox-legierung-figure--bottom{
    grid-column: 1 / 2;
  }
}



/* =========================================
   LEGIERUNGSEITE – scoped styling (Modul 1–3)
   ========================================= */

.belox-alloy .belox-card{
  border: 1px solid rgba(8,27,51,.10);
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 18px 60px rgba(3,12,24,.06);
}

.belox-alloy .belox-muted{
  color: rgba(8,27,51,.72);
}

/* ---------- Modul 1: Intro + Bilder ---------- */
.belox-alloy-intro__grid{
  display: grid;
  grid-template-columns: 1fr;
  gap: 18px;
}
@media (min-width: 992px){
  .belox-alloy-intro__grid{
    grid-template-columns: 1.05fr .95fr;
    gap: 26px;
    align-items: stretch;
  }
}

.belox-alloy-figure{
  border-radius: 18px;
  overflow: hidden;
  border: 1px solid rgba(8,27,51,.10);
  background: #f7f8fb;
  min-height: 240px;
}

.belox-alloy-figure img{
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

/* Bild-Stack rechts */
.belox-alloy-figure-stack{
  display: grid;
  gap: 16px;
}
@media (min-width: 992px){
  .belox-alloy-figure-stack{
    grid-template-rows: 1fr 1fr;
    height: 100%;
  }
}

/* ---------- Modul 2: Präzision (Dark) ---------- */
.belox-alloy-precision{
  background: radial-gradient(900px 420px at 20% 0%, rgba(255,255,255,.08), transparent 60%),
              linear-gradient(180deg, #061426, #0a223d);
  border-radius: 22px;
  padding: 28px 18px;
  color: rgba(255,255,255,.92);
  border: 1px solid rgba(255,255,255,.10);
}

@media (min-width: 992px){
  .belox-alloy-precision{
    padding: 34px 28px;
  }
}

.belox-alloy-precision__title{
  margin: 0 0 6px;
  color: #fff;
  font-weight: 900;
}

.belox-alloy-precision__lead{
  margin: 0;
  max-width: 80ch;
  color: rgba(255,255,255,.78);
}

.belox-alloy-precision__grid{
  display: grid;
  grid-template-columns: 1fr;
  gap: 18px;
  margin-top: 18px;
}

@media (min-width: 992px){
  .belox-alloy-precision__grid{
    grid-template-columns: 1fr 1fr;
    gap: 22px;
    align-items: stretch;
  }
}

.belox-alloy-precision .belox-card{
  background: rgba(255,255,255,.96);
  box-shadow: 0 16px 60px rgba(0,0,0,.25);
}

.belox-alloy-precision .belox-card h3,
.belox-alloy-precision .belox-card p,
.belox-alloy-precision .belox-card li{
  color: rgba(8,27,51,.88) !important;
}

.belox-alloy-precision__media{
  position: relative;
  border-radius: 18px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(0,0,0,.18);
  min-height: 360px;
}

.belox-alloy-precision__media img.drawing{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 14px;
  opacity: .95;
}

/* Messgerät als "Overlay" unten links */
.belox-alloy-precision__media img.device{
  position: absolute;
  left: 12px;
  bottom: 12px;
  width: min(320px, 62%);
  height: auto;
  filter: drop-shadow(0 16px 40px rgba(0,0,0,.35));
}

@media (max-width: 991px){
  .belox-alloy-precision__media{
    min-height: 320px;
  }
  .belox-alloy-precision__media img.device{
    width: min(280px, 72%);
  }
}

/* ---------- Modul 3: Tabelle + Legende ---------- */
.belox-alloy-table__head{
  margin-bottom: 12px;
}
.belox-alloy-table__title{
  margin: 0 0 6px;
}
.belox-alloy-table__subtitle{
  margin: 0;
  color: rgba(8,27,51,.72);
  max-width: 90ch;
}

.belox-alloy-legend{
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
  margin: 16px 0 14px;
}
@media (min-width: 992px){
  .belox-alloy-legend{
    grid-template-columns: 1.25fr .75fr;
    align-items: start;
  }
}

.belox-alloy-legend .belox-chip{
  background: rgba(250,99,24,.10);
  border: 1px solid rgba(250,99,24,.28);
  color: rgba(8,27,51,.86);
}

/* Row highlight (die 8 Legierungen) */
.belox-alloy .is-highlight{
  background: #f4f6f9 !important;
}

.belox-alloy .is-highlight td{
  font-weight: 700;
}

/* Tabelle: sorgt dafür, dass Überschrift sichtbar bleibt */
.belox-alloy .belox-legal-tablewrap{
  margin-top: 0;
}



/* =========================================
   Header Logo – Größe steuern
   ========================================= */

.belox-header .belox-brand-logo {
  height: 58px;        /* ← HIER Größe ändern */
  width: auto;
  max-height: none;
  display: block;
}





/* =========================================================
   LEGIERUNGSEITE – scoped Styles (überschreibt nichts global)
   ========================================================= */

.belox-leg-page .belox-leg-h2{
  line-height: 1.05;
  letter-spacing: -0.02em;
}

.belox-leg-page .belox-leg-card{
  border: 1px solid rgba(10, 35, 61, .10);
}

.belox-leg-page .belox-leg-check li{
  position: relative;
  padding-left: 22px;
}
.belox-leg-page .belox-leg-check li::before{
  content: "✓";
  position: absolute;
  left: 0;
  top: 0;
  font-weight: 800;
  color: var(--belox-accent);
}

.belox-leg-page .belox-leg-lines li{
  padding: 10px 0;
  border-top: 1px solid rgba(10,35,61,.10);
}
.belox-leg-page .belox-leg-lines li:first-child{
  border-top: 0;
  padding-top: 0;
}

/* Modul 1 – Galerie */
.belox-leg-gallery{
  display: grid;
  grid-template-rows: 1fr 1fr;
  gap: 16px;
  height: 100%;
}
.belox-leg-figure{
  margin: 0;
  background: #fff;
  border: 1px solid rgba(10, 35, 61, .10);
  border-radius: var(--belox-radius-lg);
  overflow: hidden;
  box-shadow: 0 18px 60px rgba(3,12,24,.08);
}
.belox-leg-img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Modul 2 – Visual Card */
.belox-leg-visuals{
  height: 100%;
}
.belox-leg-visual-card{
  height: 100%;
  padding: 18px;
  border: 1px solid rgba(10, 35, 61, .10);
}
.belox-leg-visual-grid{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  align-items: stretch;
}
.belox-leg-visual{
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid rgba(10, 35, 61, .10);
  background: #fff;
  min-height: 260px;
  display:flex;
  align-items:center;
  justify-content:center;
}
.belox-leg-visual img{
  width: 100%;
  height: 100%;
  object-fit: contain; /* wichtig: Zeichnung & Gerät sauber */
  display:block;
  padding: 10px;
}
.belox-leg-visual-caption{
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid rgba(10,35,61,.10);
  font-size: .98rem;
  opacity: .92;
}

/* Responsive: Visuals untereinander */
@media (max-width: 991.98px){
  .belox-leg-visual-grid{
    grid-template-columns: 1fr;
  }
  .belox-leg-gallery{
    grid-template-rows: auto;
  }
}

/* Tabelle: Überschrift sichtbar + Clicksort Hint */
.belox-leg-page table.belox-sortable thead th[data-dir="asc"]::after{
  content:" ▲";
  font-size: .85em;
  opacity: .8;
}
.belox-leg-page table.belox-sortable thead th[data-dir="desc"]::after{
  content:" ▼";
  font-size: .85em;
  opacity: .8;
}

/* Highlight häufige EN-AW Legierungen */
.belox-leg-page table.belox-legal-table tbody tr.is-highlight{
  background: rgba(10,35,61,.06);
}
.belox-leg-page table.belox-legal-table tbody tr.is-highlight td{
  font-weight: 600;
}

/* Chip oben (Legend) */
.belox-leg-chip-highlight{
  background: rgba(10,35,61,.06);
  border-color: rgba(10,35,61,.14);
}


/* =========================================
   LEGIERUNGSSEITE – Dark-Fix (scoped)
   Betrifft NUR Elemente innerhalb .belox-leg-dark
   + den Intro-Header .belox-leg-intro
========================================= */

/* Modul 2/Allgemein: wenn Bereich dunkel ist -> Text sauber hell */
.belox-leg-dark,
.belox-leg-dark *{
  color: rgba(255,255,255,.92);
}

/* Überschriften im Dark-Bereich */
.belox-leg-dark h1,
.belox-leg-dark h2,
.belox-leg-dark h3{
  color: #fff;
}

/* Fließtext im Dark-Bereich */
.belox-leg-dark p,
.belox-leg-dark li{
  color: rgba(255,255,255,.82);
}

/* Kleine „Kicker“ / Eyebrow */
.belox-leg-dark .belox-eyebrow,
.belox-leg-dark .belox-proof-kicker,
.belox-leg-dark .belox-kicker{
  color: rgba(255,255,255,.70);
}

/* Links im Dark-Bereich */
.belox-leg-dark a{
  color: rgba(255,255,255,.92);
}
.belox-leg-dark a:hover{
  color: #fff;
}

/* Buttons im Dark-Bereich: Outline muss sichtbar bleiben */
.belox-leg-dark .btn-belox-outline{
  border-color: rgba(255,255,255,.35);
  color: rgba(255,255,255,.92);
}
.belox-leg-dark .btn-belox-outline:hover{
  border-color: rgba(255,255,255,.55);
  color: #fff;
}

/* Modul 3: Intro-Card ist dunkel, daher Text explizit */
.belox-leg-intro{
  background: linear-gradient(180deg, #0a223d 0%, #061426 100%);
  border: 1px solid rgba(255,255,255,.10);
}
.belox-leg-intro h2{
  color: #fff;
}
.belox-leg-intro p{
  color: rgba(255,255,255,.80);
}
.belox-leg-intro .btn-belox-outline{
  border-color: rgba(255,255,255,.35);
  color: rgba(255,255,255,.92);
}


/* =========================================
   Modul 1 – Legierung: Bild-Spalte sauber
   ========================================= */
.belox-leg-photos{
  display: grid;
  gap: 14px;
}

.belox-leg-photo{
  margin: 0;
  border-radius: var(--belox-radius-md, 18px);
  overflow: hidden;
  border: 1px solid rgba(10,35,61,.10);
  box-shadow: 0 18px 60px rgba(3,12,24,.08);
  background: #fff;
}

/* Einheitliche, kleinere Kacheln */
.belox-leg-photo img{
  width: 100%;
  height: 320px;           /* <- macht sie bewusst kleiner */
  object-fit: cover;
  object-position: center;
  display: block;
}

@media (max-width: 991.98px){
  .belox-leg-photo img{
    height: 240px;
  }
}


/* =========================================
   Modul 2 – Präzision: eigener Dark-Header + Lesbarkeit
   ========================================= */
.belox-precision-panel{
  border-radius: var(--belox-radius-lg, 22px);
  padding: 22px 22px;
  background: linear-gradient(180deg, #0a223d 0%, #061426 100%);
  box-shadow: 0 18px 60px rgba(3,12,24,.18);
  border: 1px solid rgba(255,255,255,.08);
}

.belox-precision-title{
  margin: 0 0 6px;
  color: rgba(255,255,255,.94);
}

.belox-precision-sub{
  margin: 0;
  max-width: 90ch;
  color: rgba(255,255,255,.78);
}

/* WICHTIG: Texte in der Anspruch-Card wieder dunkel (gegen Dark-Overrides) */
.belox-precision .belox-precision-card,
.belox-precision .belox-precision-card *{
  color: #0a223d !important;
}

.belox-precision .belox-precision-card p{
  opacity: .9;
}

.belox-precision .belox-precision-card .belox-proof-kicker{
  opacity: .7;
  letter-spacing: .08em;
  text-transform: uppercase;
  font-size: .78rem;
}

/* Media rechts: 2 Kacheln nebeneinander, sauber zentriert */
.belox-precision-media{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  height: 100%;
}

.belox-precision-media__item{
  border-radius: var(--belox-radius-md, 18px);
  overflow: hidden;
  border: 1px solid rgba(10,35,61,.10);
  background: #fff;
  box-shadow: 0 18px 60px rgba(3,12,24,.08);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px;
}

.belox-precision-media__item img{
  width: 100%;
  height: 260px;
  object-fit: contain; /* Zeichnung + Freisteller bleiben komplett sichtbar */
  display: block;
}

@media (max-width: 991.98px){
  .belox-precision-media{
    grid-template-columns: 1fr;
  }
  .belox-precision-media__item img{
    height: 240px;
  }
}


/* ===== Legierung Modul 1 (scoped) ===== */
.belox-legierung-m1 .belox-legierung-m1__media{
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* Bilder als saubere "Karten" */
.belox-legierung-m1 .belox-legierung-m1__img{
  margin: 0;
  border-radius: 18px;
  overflow: hidden;
  border: 1px solid rgba(10, 35, 61, 0.12);
  box-shadow: 0 18px 60px rgba(3, 12, 24, 0.08);
  background: #fff;
  /* sorgt für gleichmäßige Höhe */
  flex: 1 1 0;
  min-height: 220px;
}

.belox-legierung-m1 .belox-legierung-m1__img img{
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;      /* sauberer Zuschnitt */
  object-position: center;
}

/* Text-Card etwas "stärker" wirken lassen */
.belox-legierung-m1 .belox-legierung-m1__text .belox-kicker{
  font-size: .78rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  opacity: .72;
}

/* Liste mit Check-Icon */
.belox-legierung-m1 .belox-legierung-m1__list{
  list-style: none;
  padding: 0;
  margin: 14px 0 0;
  display: grid;
  gap: 10px;
}

.belox-legierung-m1 .belox-legierung-m1__list li{
  display: flex;
  gap: 10px;
  align-items: flex-start;
  color: #0a223d;
}

.belox-legierung-m1 .belox-legierung-m1__list .check{
  color: var(--belox-accent);
  font-weight: 800;
  line-height: 1;
  margin-top: 2px;
}

/* Mobile: Bilder dürfen etwas höher wirken */
@media (max-width: 991.98px){
  .belox-legierung-m1 .belox-legierung-m1__img{
    min-height: 240px;
  }
}


/* Modul 1 – Bildcontainer */
.belox-legierung-images {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}

@media (min-width: 992px) {
  .belox-legierung-images {
    grid-template-columns: 1fr 1fr;
  }
}

/* Bilder kontrolliert darstellen */
.belox-legierung-images img {
  width: 100%;
  height: 220px;              /* 👈 WICHTIG: feste Höhe */
  object-fit: contain;        /* 👈 kein aggressives Cropping */
  background: #f6f7f9;        /* neutraler Rahmen */
  border-radius: 14px;
  padding: 12px;              /* Luft um das Objekt */
  box-shadow: 0 10px 24px rgba(0,0,0,0.08);
}


/* ==============================
   Kontakt Hero – Logo statt Video
   ============================== */

.belox-hero-logo {
  background-color: #000;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 360px;
  border-radius: 0.75rem;
}

/* Logo selbst */
.belox-hero-logo-img {
  width: 100%;
  max-width: 320px;
  height: auto;
}

/* Größer auf Desktop */
@media (min-width: 992px) {
  .belox-hero-logo {
    min-height: 420px;
  }

  .belox-hero-logo-img {
    max-width: 380px;
  }
}

/* AGB Hero: niemals Text abschneiden */
.belox-hero h1 {
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
  word-break: normal;
  overflow-wrap: anywhere;
}


.belox-hero-logo {
  min-height: 320px;
}

@media (min-width: 992px) {
  .belox-hero-logo {
    min-height: 360px;
  }

  .belox-hero-logo-img {
    max-width: 300px;
  }
}

/* ----------------------------------
   Hero Logo Box – kompakter
   ---------------------------------- */

.belox-hero-logo {
  min-height: 230px;          /* vorher größer */
  padding: 2.5rem 2rem;
  background-color: #000;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Logo etwas kleiner */
.belox-hero-logo-img {
  max-width: 260px;
  width: 100%;
  height: auto;
}

/* Desktop Feintuning */
@media (min-width: 992px) {
  .belox-hero-logo {
    min-height: 320px;
  }

  .belox-hero-logo-img {
    max-width: 300px;
  }
}



/* =========================================
   Compact Hero (Kontakt/AGB/DSGVO/Impressum)
   ========================================= */

.belox-hero.belox-hero--compact .belox-hero-media.belox-hero-logo {
  background-color: #000;
  display: flex;
  align-items: center;
  justify-content: center;

  /* hier stellst du "den Kasten kleiner" ein */
  min-height: 240px;
  padding: 1.75rem;
  border-radius: 0.75rem;
}

.belox-hero.belox-hero--compact .belox-hero-logo-img {
  width: 100%;
  max-width: 240px;
  height: auto;
}

/* Desktop */
@media (min-width: 992px) {
  .belox-hero.belox-hero--compact .belox-hero-media.belox-hero-logo {
    min-height: 300px;
  }

  .belox-hero.belox-hero--compact .belox-hero-logo-img {
    max-width: 300px;
  }
}


/* =========================================
   Express-Anfrage Highlight
   ========================================= */

.belox-check {
  position: relative;
  padding: 1.25rem 1.25rem 1.25rem 3rem;
  border-radius: 0.75rem;
  background: rgba(250, 99, 24, 0.08); /* BELOX Orange, sehr dezent */
  border: 1px solid rgba(250, 99, 24, 0.35);
}

/* Checkbox größer & besser sichtbar */
.belox-check input[type="checkbox"] {
  position: absolute;
  left: 1.25rem;
  top: 1.35rem;
  transform: scale(1.2);
  accent-color: var(--belox-accent);
  cursor: pointer;
}

/* Label optisch kräftiger */
.belox-check label {
  cursor: pointer;
  font-size: 1rem;
}

/* Optional: kleine Badge */
.belox-check label strong::after {
  content: " Priorisiert";
  margin-left: 0.5rem;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #fa6318;
  background: rgba(250, 99, 24, 0.12);
  padding: 0.15rem 0.4rem;
  border-radius: 999px;
}

/* Hover-Effekt für bessere Entdeckbarkeit */
.belox-check:hover {
  background: rgba(250, 99, 24, 0.12);
}

/* Legierungen Intro: Buttons sicher sichtbar */
.belox-leg-intro {
  position: relative;
  overflow: visible;
}

.belox-leg-intro .btn {
  position: relative;
  z-index: 3;
}

/* Falls ein Overlay die Buttons überdeckt */
.belox-leg-intro::before,
.belox-leg-intro::after {
  z-index: 0;
}

.belox-leg-intro > * {
  position: relative;
  z-index: 1;
}

.belox-leg-intro .btn-belox-outline {
  border-color: rgba(255,255,255,.35);
  color: rgba(255,255,255,.92);
}

.belox-leg-intro .btn-belox-outline:hover {
  border-color: rgba(255,255,255,.6);
  color: #fff;
}


/* Legierungen Intro: Outline-Buttons sichtbar (überschreibt globale !important-Regel) */
.belox-leg-page .belox-leg-intro .btn-belox-outline {
  color: rgba(255, 255, 255, .92) !important;
  border-color: rgba(255, 255, 255, .35) !important;
  background: rgba(255, 255, 255, .06) !important;
  backdrop-filter: blur(6px);
}

.belox-leg-page .belox-leg-intro .btn-belox-outline:hover {
  background: rgba(255, 255, 255, .10) !important;
  border-color: rgba(255, 255, 255, .55) !important;
  transform: translateY(-1px);
}

/* PROFILFOTO – FINAL OVERRIDE (muss als letztes in custom.css stehen) */
.belox-profile .belox-profile__photo.belox-profile__photo--clean {
  width: 200px !important;   /* TEST: bewusst deutlich größer */
  height: 240px !important;  /* TEST: bewusst deutlich größer */
  overflow: hidden !important;
  border-radius: 14px !important;
  flex: 0 0 auto !important;
}

.belox-profile .belox-profile__photo.belox-profile__photo--clean img {
  width: 100% !important;
  height: 100% !important;
  transform: scale(1.00);
  transform-origin: center top;
  object-fit: cover !important;
  object-position: center top !important;
  display: block !important;
}

/* BELOX: Basic Media Hardening */
img, video {
  -webkit-user-select: none;
  user-select: none;
}


/* =========================================
   HERO MEDIA – Video Zoom System (global)
   ========================================= */

/* Basis: Media-Rahmen */
.belox-hero-media {
  position: relative;
  overflow: hidden;                 /* 🔥 EXTREM WICHTIG */
  border-radius: var(--belox-radius-lg);
}

/* Basis: Video korrekt einpassen */
.belox-hero-media video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transform-origin: center center;
  transition: transform 0.6s ease;
}

/* ==============================
   ZOOM-STUFEN (Modifier Klassen)
   ============================== */

/* leichtes Zoom */
.belox-hero-media--zoom-sm video {
  transform: scale(1.08);
}

/* Standard Zoom (empfohlen) */
.belox-hero-media--zoom-md video {
  transform: scale(1.18);
}

/* starkes Zoom */
.belox-hero-media--zoom-lg video {
  transform: scale(1.3);
}

/* optional: Fokus nach oben (Maschinenteile etc.) */
.belox-hero-media--focus-top video {
  object-position: center top;
}

/* optional: Fokus mittig */
.belox-hero-media--focus-center video {
  object-position: center center;
}

/* =========================================
   HERO VIDEO – GLOBAL FIX (clip + fit)
   ========================================= */

/* Der Media-Kasten muss clippen */
.belox-hero .belox-hero-media {
  position: relative;
  overflow: hidden !important;
  border-radius: var(--belox-radius-lg);
}

/* Video muss den Kasten wirklich füllen */
.belox-hero .belox-hero-media > video.belox-hero-video {
  position: absolute;
  inset: 0;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block;
}

/* Wenn du Zoom nutzt: bleibt trotzdem sauber im Kasten */
.belox-hero .belox-hero-media > video.belox-hero-video {
  transform: scale(var(--hero-video-zoom, 1));
  transform-origin: var(--hero-video-origin, 50% 50%);
  transition: transform .45s ease;
}

/* Verfahren: Zoom-Vorgaben */
.belox-hero-media--eloxieren { --hero-video-zoom: 1.40; --hero-video-origin: 50% 50%; }
.belox-hero-media--hardcoat  { --hero-video-zoom: 1.16; --hero-video-origin: 50% 45%; }
.belox-hero-media--pulver    { --hero-video-zoom: 1.10; --hero-video-origin: 50% 50%; }
.belox-hero-media--strahlen  { --hero-video-zoom: 1.12; --hero-video-origin: 50% 55%; }
.belox-hero-media--gleit     { --hero-video-zoom: 1.10; --hero-video-origin: 50% 50%; }
.belox-hero-media--abbeizen  { --hero-video-zoom: 1.40; --hero-video-origin: 50% 50%; }



/* =========================================
   Mobile Lesbarkeit – Desktop bleibt unverändert
   ========================================= */
@media (max-width: 991.98px) {

  /* Grundschrift größer */
  body.belox {
    font-size: 17px;
    line-height: 1.7;
  }

  /* Überschriften skalieren sauber (nur Mobile) */
  body.belox h1 { font-size: clamp(30px, 7vw, 40px); line-height: 1.15; }
  body.belox h2 { font-size: clamp(24px, 5.8vw, 32px); line-height: 1.2; }
  body.belox h3 { font-size: clamp(19px, 4.8vw, 24px); line-height: 1.25; }

  /* Hero/Intro Text größer */
  .belox-hero-text,
  .belox-intro,
  .belox-hero-panel__text {
    font-size: 1.05rem;
  }

  /* Buttons fingerfreundlich */
  .belox .btn {
    padding: .9rem 1.15rem;
    font-size: 1rem;
  }

  /* Cards: mehr Luft */
  .belox-card {
    padding: 1.25rem;
  }

  /* Sections: angenehme Abstände */
  .belox-section {
    padding-top: 54px;
    padding-bottom: 54px;
  }
}
@media (max-width: 991.98px) {
  #beloxOffcanvasNav .offcanvas-body {
    font-size: 1.05rem;
  }

  #beloxOffcanvasNav a {
    padding: .65rem 0;
    display: block;
  }
}


/* =========================================
   Mobile Offcanvas Menü: Links untereinander
   ========================================= */
@media (max-width: 991.98px) {

  /* Joomla-Menü im Offcanvas immer als Liste untereinander */
  #beloxOffcanvasNav .offcanvas-body ul,
  #beloxOffcanvasNav .offcanvas-body .nav,
  #beloxOffcanvasNav .offcanvas-body .mod-menu,
  #beloxOffcanvasNav .offcanvas-body .menu {
    display: block !important;
    padding-left: 0 !important;
    margin: 0 !important;
    list-style: none !important;
  }

  #beloxOffcanvasNav .offcanvas-body li {
    display: block !important;
    width: 100% !important;
    margin: 0 !important;
  }

  #beloxOffcanvasNav .offcanvas-body a {
    display: block !important;
    width: 100% !important;
    padding: .85rem .25rem !important;
    border-bottom: 1px solid rgba(0,0,0,.08);
    text-decoration: none !important;
  }

  /* optional: letzter Eintrag ohne Linie */
  #beloxOffcanvasNav .offcanvas-body li:last-child > a {
    border-bottom: 0;
  }

  /* Falls das Menü irgendwo als Flex kommt */
  #beloxOffcanvasNav .offcanvas-body ul,
  #beloxOffcanvasNav .offcanvas-body li,
  #beloxOffcanvasNav .offcanvas-body a {
    flex: none !important;
  }
}

@media (max-width: 991.98px) {
  #beloxOffcanvasNav .offcanvas-body li.active > a,
  #beloxOffcanvasNav .offcanvas-body a[aria-current="page"] {
    font-weight: 800;
    color: var(--belox-accent) !important;
  }
}

/* Kontakt-Seite: Joomla-Komponentenüberschrift "Kontaktformular" entfernen */
body.view-contact .com-contact.contact > h2,
body.view-contact .com-contact.contact > .page-header {
  display: none !important;
}

/* Abstand oben ebenfalls weg, damit dein Formular direkt an den Hero anschließt */
body.view-contact .com-contact.contact {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

/* =========================
   Mobile: bessere Lesbarkeit
   ========================= */

/* Wichtig: verhindert "zu kleine" Basis-Typo auf manchen Geräten */
@media (max-width: 576px) {
  html {
    font-size: 18px; /* Basis hoch: alles skaliert angenehmer */
  }

  body.belox {
    font-size: 1rem;        /* ~18px */
    line-height: 1.75;
  }

  /* Container etwas „luftiger“ */
  .container {
    padding-left: 18px;
    padding-right: 18px;
  }

  /* Hero / Headlines etwas größer */
  .belox-hero h1 {
    font-size: clamp(2rem, 7vw, 2.6rem);
    line-height: 1.05;
  }

  .belox-hero .belox-hero-text,
  .belox-intro,
  p {
    font-size: 1.05rem;
  }

  /* Buttons: besser klickbar */
  .btn,
  .btn-belox-primary,
  .btn-belox-outline {
    padding: 0.85rem 1.1rem;
    font-size: 1rem;
  }

  /* Menü-Button / Header etwas besser bedienbar */
  .belox-header .btn {
    padding: 0.65rem 1rem;
  }
}
@media (max-width: 576px) {
  /* Lesbarkeit: Zeilen nicht zu breit */
  .belox-main,
  .belox-section {
    max-width: 560px;
    margin-left: auto;
    margin-right: auto;
  }
}


/* =========================
   MOBILE: Text wird abgeschnitten (Technische Eckdaten)
   ========================= */
@media (max-width: 991.98px){

  /* Wichtig: nichts abschneiden */
  .belox-section,
  .belox-card,
  .belox-proc-card,
  .belox-proc-item,
  .belox-proc-text,
  .belox-proc-content,
  .belox-proc-body,
  .belox-technik,
  .belox-eckdaten,
  .belox-eckdaten * {
    overflow: visible !important;
    height: auto !important;
    max-height: none !important;
  }

  /* Sauberer Zeilenumbruch, auch bei langen Wörtern */
  .belox-section,
  .belox-card,
  .belox-proc-card,
  .belox-proc-item,
  .belox-proc-text,
  .belox-proc-content,
  .belox-proc-body,
  .belox-technik,
  .belox-eckdaten {
    white-space: normal !important;
    overflow-wrap: anywhere;
    word-break: break-word;
  }
}

/* =========================
   MOBILE OFFCANVAS: Menüpunkte immer sichtbar (Dark Mode Fix)
   ========================= */
#beloxOffcanvasNav {
  background: #0b1f33; /* dunkles Blau passend zum Theme */
  color: #fff;
}

#beloxOffcanvasNav .offcanvas-title,
#beloxOffcanvasNav a,
#beloxOffcanvasNav .nav-link,
#beloxOffcanvasNav .mod-menu a {
  color: #fff !important;
}

#beloxOffcanvasNav a:hover,
#beloxOffcanvasNav a:focus {
  opacity: .85;
  text-decoration: none;
}

#beloxOffcanvasNav .btn-close {
  filter: invert(1); /* Close-Icon in weiß */
}

/* Falls dein Menü UL/LI Bootstrap-Klassen nutzt */
#beloxOffcanvasNav .nav,
#beloxOffcanvasNav ul {
  padding-left: 0;
  margin: 0;
  list-style: none;
}

#beloxOffcanvasNav li + li {
  margin-top: 10px;
}