/* =========================================================
   LANDINGPAGES CSS – FULL BLOCK (Copy & Paste)
   Aktiv pro Seite: body class = lp-bg-all

   Pro Landingpage im HTML:
   :root{
     --lp-bg: url('...');
     --lp-overlay: .55;
     --lp-accent: #3498db;
     --lp-max: 1600px;
   }
   ========================================================= */

/* ---------- Variablen ---------- */
:root{
  --lp-bg: none;
  --lp-overlay: .55;
  --lp-accent: #3498db;
  --lp-max: 1600px;
  --lp-pad: 36px;     /* Desktop */
  --lp-pad-m: 3px;    /* Mobile: sehr breit */
}

/* ---------- Background hinter allem ---------- */
body.lp-bg-all{ background:#0b1220; }

body.lp-bg-all #page{
  position: relative;
  min-height: 100vh;

  /* Footer immer unten */
  display: flex;
  flex-direction: column;
}

body.lp-bg-all #page::before{
  content:"";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image: var(--lp-bg, none);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  transform: translateZ(0);
}

body.lp-bg-all #page::after{
  content:"";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(1200px 700px at 18% 18%, rgba(0,0,0,.35), transparent 60%),
    linear-gradient(180deg,
      rgba(0,0,0,var(--lp-overlay, .55)) 0%,
      rgba(0,0,0,.26) 55%,
      rgba(0,0,0,.52) 100%);
}

body.lp-bg-all #page > *{
  position: relative;
  z-index: 1;
}

/* Footer wirklich unten: Content wächst */
body.lp-bg-all #content{ flex: 1 0 auto; }
body.lp-bg-all #c7n-footer{ margin-top: auto !important; }

/* ---------- Navbar: transparent + keine Linien ---------- */
body.lp-bg-all header{
  position: sticky;
  top: 0;
  z-index: 2000;
  background: transparent !important;
}

body.lp-bg-all header,
body.lp-bg-all header a{
  color: rgba(255,255,255,.96) !important;
  text-shadow: 0 1px 10px rgba(0,0,0,.35);
}

body.lp-bg-all header *,
body.lp-bg-all header nav *,
body.lp-bg-all header ul *,
body.lp-bg-all header li *,
body.lp-bg-all header a{
  border: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
}

body.lp-bg-all header li::before,
body.lp-bg-all header li::after,
body.lp-bg-all header a::before,
body.lp-bg-all header a::after{
  content: none !important;
}

body.lp-bg-all header a:hover,
body.lp-bg-all header a:focus{
  background: rgba(255,255,255,.10) !important;
  border-radius: 10px;
  text-shadow: none;
}

/* Dropdowns KOMPLETT deaktivieren */
body.lp-bg-all header .dropdown-menu,
body.lp-bg-all header ul ul,
body.lp-bg-all header nav ul ul,
body.lp-bg-all #navbar2 ul ul,
body.lp-bg-all nav#sub ul ul{
  display: none !important;
}
body.lp-bg-all header li:hover > ul,
body.lp-bg-all header li:focus-within > ul{
  display: none !important;
}

/* Placeholder off */
body.lp-bg-all #placeholder{ display:none; }

/* ---------- Footer: links/rechts gleiche Höhe (eine Zeile) ---------- */
body.lp-bg-all #c7n-footer{
  background: transparent !important;
  color: rgba(255,255,255,.92) !important;
  border-top: 1px solid rgba(255,255,255,.18);
  padding: 22px 0 28px !important;
}
body.lp-bg-all #c7n-footer a{
  color: rgba(255,255,255,.92) !important;
}

/* Die beiden Footer-Spalten nebeneinander */
body.lp-bg-all #c7n-footer .grid-elm.grid-align-1-2.grid-offset.small{
  float: left !important;
  width: 50% !important;
  margin: 0 !important;
}
body.lp-bg-all #c7n-footer .grid-elm.grid-align-1-2.grid-offset.small:last-of-type{
  float: right !important;
  text-align: right !important;
}

/* Clear floats */
body.lp-bg-all #c7n-footer .container::after{
  content:"";
  display:block;
  clear:both;
}

/* ---------- Breite: alles breiter ---------- */
body.lp-bg-all .grid-container.grid-offset,
body.lp-bg-all .grid-container{
  max-width: var(--lp-max) !important;
  width: min(var(--lp-max), calc(100% - (var(--lp-pad) * 2))) !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

body.lp-bg-all .grid-elm.grid-align-3-4.grid-offset{
  width: 100% !important;
  max-width: var(--lp-max) !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: var(--lp-pad) !important;
  padding-right: var(--lp-pad) !important;
}

/* ---------- Sidebars/Subnav/Anzeige ausblenden ---------- */
body.lp-bg-all #sub,
body.lp-bg-all .advertising,
body.lp-bg-all .sidebar,
body.lp-bg-all aside.grid-elm.grid-align-1-4{
  display:none !important;
}

/* ---------- Weiße CMS-Wrapper transparent ---------- */
body.lp-bg-all .text,
body.lp-bg-all .text.grid-elm,
body.lp-bg-all .grid-elm,
body.lp-bg-all .content-tpl,
body.lp-bg-all .content-tpl-left,
body.lp-bg-all .content-tpl-right,
body.lp-bg-all .container,
body.lp-bg-all .container-fluid,
body.lp-bg-all .row,
body.lp-bg-all .content,
body.lp-bg-all .content-area,
body.lp-bg-all .content-wrapper,
body.lp-bg-all #content,
body.lp-bg-all #main,
body.lp-bg-all #main-content{
  background: transparent !important;
}

/* CMS-Seitentitel ausblenden, aber NICHT lp-title */
body.lp-bg-all .text h1:not(.lp-title){
  display:none !important;
}

/* Weniger Scroll durch Theme-Padding */
body.lp-bg-all #content.grid-offset-top{ padding-top: 0 !important; }
body.lp-bg-all #content.grid-offset-bottom{ padding-bottom: 0 !important; }

/* ---------- Labels nicht 33% ---------- */
@media only screen and (min-width: 768px){
  body.lp-bg-all form label{
    width: auto !important;
    padding: 0 0 6px 0 !important;
    display: block !important;
  }
}

/* =========================================================
   HERO: links Text / rechts Glass Form
   ========================================================= */
body.lp-bg-all .lp-hero{
  width: 100%;
  padding: clamp(64px, 9vh, 110px) 0 26px;
}

body.lp-bg-all .lp-hero__inner{
  width: min(var(--lp-max), calc(100% - (var(--lp-pad) * 2)));
  margin: 0 auto;
}

body.lp-bg-all .lp-hero__grid{
  display:grid;
  grid-template-columns: 1.18fr 0.82fr;
  gap: clamp(14px, 2.4vw, 30px);
  align-items:start;
}
@media (max-width: 980px){
  body.lp-bg-all .lp-hero__grid{ grid-template-columns: 1fr; }
}

/* lp-title sichtbar/lesbar */
body.lp-bg-all .lp-title{
  margin:0 0 10px;
  color:#fff !important;
  line-height:1.06;
  letter-spacing:-0.02em;
  font-size: clamp(28px, 3.0vw, 48px);
}

body.lp-bg-all .lp-lead{
  margin:0 0 12px;
  color: rgba(255,255,255,.90);
  font-size: clamp(15px, 1.08vw, 18px);
  max-width: 56ch;
}

body.lp-bg-all .lp-link{
  display:inline-block;
  color:#fff;
  text-decoration:none;
  font-weight:850;
  border-bottom: 2px solid rgba(255,255,255,.55);
  padding-bottom:2px;
}
body.lp-bg-all .lp-link:hover{ border-bottom-color: rgba(255,255,255,.95); }

/* Glass Card */
body.lp-bg-all .lp-card{
  max-width: 520px;
  margin-left: auto;
  background: rgba(255,255,255,.14) !important;
  border: 1px solid rgba(255,255,255,.22) !important;
  border-radius: 16px;
  box-shadow: 0 18px 45px rgba(0,0,0,.30);
  padding: 16px;
  color: rgba(255,255,255,.95);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))){
  body.lp-bg-all .lp-card{
    background: rgba(17,24,39,.70) !important;
  }
}

@media (min-width: 981px){
  body.lp-bg-all .lp-card{ position: sticky; top: 16px; }
}

body.lp-bg-all .lp-card h3{
  margin:0 0 4px;
  font-size: 1.12rem;
  letter-spacing:-0.01em;
  color: rgba(255,255,255,.98);
}
body.lp-bg-all .lp-card p{
  margin:0 0 12px;
  color: rgba(255,255,255,.82);
  font-size: .95rem;
}

body.lp-bg-all .lp-label{
  display:block;
  font-weight:700;
  margin:0 0 6px;
  font-size:.95rem;
  color: rgba(255,255,255,.92);
}

body.lp-bg-all .lp-input{
  width:100%;
  padding: 11px 12px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.22);
  background: rgba(255,255,255,.10);
  color: rgba(255,255,255,.96);
  outline: none;
}
body.lp-bg-all .lp-input::placeholder{ color: rgba(255,255,255,.70); }
body.lp-bg-all .lp-input:focus{
  border-color: rgba(255,255,255,.40);
  box-shadow: 0 0 0 4px rgba(255,255,255,.12);
}

body.lp-bg-all .lp-help{
  margin-top:6px;
  color: rgba(255,255,255,.80);
  font-size:.9rem;
}

body.lp-bg-all .lp-btn{
  width:100%;
  border:0;
  border-radius: 999px;
  padding: 12px 14px;
  background: var(--lp-accent);
  color:#fff;
  font-weight:900;
  cursor:pointer;
}

body.lp-bg-all .lp-legal{
  margin:10px 0 0;
  color: rgba(255,255,255,.78);
  font-size:.88rem;
}
body.lp-bg-all .lp-legal a{
  color: rgba(255,255,255,.92);
  text-decoration: underline;
}

/* ---------- Mobile: sehr breit + Footer untereinander ---------- */
@media (max-width: 700px){
  /* Mobile padding deutlich kleiner -> Inhalt wirkt breiter */
  body.lp-bg-all .grid-container.grid-offset,
  body.lp-bg-all .grid-container{
    width: calc(100% - (var(--lp-pad-m) * 2)) !important;
  }

  body.lp-bg-all .grid-elm.grid-align-3-4.grid-offset{
    padding-left: var(--lp-pad-m) !important;
    padding-right: var(--lp-pad-m) !important;
  }

  body.lp-bg-all .lp-hero__inner{
    width: calc(100% - (var(--lp-pad-m) * 2));
  }

  body.lp-bg-all .lp-hero{
    padding: 40px 0 18px;
  }

  /* Footer mobile: untereinander */
  body.lp-bg-all #c7n-footer .grid-elm.grid-align-1-2.grid-offset.small{
    float: none !important;
    width: 100% !important;
    text-align: left !important;
    margin-top: 6px !important;
  }

  body.lp-bg-all #c7n-footer{
    padding: 18px 0 24px !important;
    margin-top: 16px !important;
  }
}


/* Mobile: lp-lead ohne Abstand unten, Abstand nach lp-link */
@media (max-width: 700px){
  body.lp-bg-all .lp-lead{
    margin: 0 !important;
    margin-bottom: 6px !important;
    padding: 0 !important;
  }

  body.lp-bg-all .lp-link{
    display: inline-block !important;
    margin-bottom: 40px !important; /* Abstand nach dem Link */
  }
}



body.lp-bg-all .lp-card form label{
  display:block !important;
  font-weight:700 !important;
  margin:0 0 6px !important;
  font-size:.95rem !important;
  color: rgba(255,255,255,.92) !important;
}

/* Text/Email/Tel/etc. + textarea/select im Formular */
body.lp-bg-all .lp-card form input:not([type=submit]):not([type=reset]):not([type=checkbox]):not([type=radio]),
body.lp-bg-all .lp-card form textarea,
body.lp-bg-all .lp-card form select{
  width:100% !important;
  padding: 11px 12px !important;
  border-radius: 12px !important;
  border: 1px solid rgba(255,255,255,.22) !important;
  background: rgba(255,255,255,.10) !important;
  color: rgba(255,255,255,.96) !important;
  outline: none !important;
}

body.lp-bg-all .lp-card form input:focus,
body.lp-bg-all .lp-card form textarea:focus,
body.lp-bg-all .lp-card form select:focus{
  border-color: rgba(255,255,255,.40) !important;
  box-shadow: 0 0 0 4px rgba(255,255,255,.12) !important;
}