.elementor-76 .elementor-element.elementor-element-f7388eb{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}/* Start custom CSS *//************************************************************
  elbe3D • Rechtliches (seitenlokal)
  – Scope: nur innerhalb .legal-scope
  – Hero mit Glass-Card, 2-Spalten-Grid (Desktop), 1 Spalte (mobil)
  – CI-Buttons, Chips, Fokus-Styles, Print-Fallback
************************************************************/

/* ===== CI-Variablen lokal ===== */
.legal-scope{
  --brand:#1A56FF;
  --brand-600:#184EE6;
  --ink:#0B1324;
  --muted:#334155;
  --line:#E5E7EB;
  --glass:rgba(255,255,255,.72);
  --glass-strong:rgba(255,255,255,.84);
  --radius:22px;
  --chip-radius:999px;
  --shadow:0 24px 60px rgba(2,6,23,.14);
}

.legal-scope .wrap{
  max-width:1200px;
  margin-inline:auto;
  padding-inline:clamp(16px,3vw,24px);
}

/* ----------------------------------------------------------
   HERO (Full-bleed Bild + schwebende Glass-Card)
---------------------------------------------------------- */

/* Overlay/Maske der Section sicher entfernen, Bild bleibt sichtbar */
#legal-hero.hero--overlay::after{ content:none !important; display:none !important; }
#legal-hero.hero--overlay{ background:transparent !important; box-shadow:none !important; }
#legal-hero,
#legal-hero > .e-con,
#legal-hero > .elementor-container,
#legal-hero > .e-con > .e-con{ background:transparent !important; }

/* Full-bleed + Positionierung; Bild bitte in Elementor als Hintergrund setzen */
#legal-hero{
  position:relative;
  width:100vw; max-width:100vw !important;
  left:50%; margin-left:-50vw; margin-right:-50vw;
  min-height:clamp(420px, 62vh, 820px);
  display:flex; align-items:center;
  padding: clamp(32px, 7vw, 110px) clamp(16px, 3vw, 24px);
  background-size:cover !important;
  background-position: 50% var(--hero-y, 38%) !important;
  background-repeat:no-repeat !important;
  isolation:isolate;
}

/* Glass-Card im Hero */
#legal-hero .card{
  position:relative; z-index:1;
  max-width:min(980px, 94vw);
  margin-inline:auto;
  padding: clamp(18px, 3vw, 34px);
  background: var(--glass);
  border:1px solid rgba(255,255,255,.45);
  border-radius: var(--radius);
  backdrop-filter: saturate(140%) blur(10px);
  -webkit-backdrop-filter: saturate(140%) blur(10px);
  box-shadow: var(--shadow);
}

/* Schattenfahne */
#legal-hero .card::after{
  content:"";
  position:absolute; left:10%; right:10%; bottom:-12px; height:22px;
  border-radius:999px; pointer-events:none;
  background: radial-gradient(60% 120% at 50% 50%, rgba(2,6,23,.20), rgba(2,6,23,0) 70%);
  filter: blur(8px);
}

/* Hero-Typo */
#legal-hero .eyebrow{
  margin:0 0 6px; letter-spacing:.08em; text-transform:uppercase;
  font-weight:800; font-size:12px; color:#6B7280;
}
#legal-hero .title{
  margin:.12em 0 .38em; color:var(--ink);
  line-height:1.12; font-weight:800;
  font-size: clamp(28px, 4.2vw, 44px);
}
#legal-hero .lead{
  color:var(--muted);
  max-width:70ch; margin:0;
}

/* Hero-Chips (z. B. Datenschutz / AGB / Widerspruch) */
#legal-hero .chip-row{ display:flex; flex-wrap:wrap; gap:8px; margin-top:10px }
#legal-hero .chip{
  display:inline-flex; align-items:center; justify-content:center;
  padding:7px 12px; border-radius:var(--chip-radius);
  background:rgba(238,242,255,.92);
  border:1px solid #E0E7FF; color:#0F172A;
  font-weight:800; font-size:.94rem; text-decoration:none;
  transition: transform .06s ease, box-shadow .25s ease, background-color .25s ease;
}
#legal-hero .chip:hover{
  transform:translateY(-1px); background:#E6ECFF;
  box-shadow:0 0 0 3px rgba(37,99,235,.22);
}

/* Buttons (falls im Hero genutzt) */
#legal-hero .btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.5em;
  padding:.9em 1.2em; border-radius:14px; font-weight:800;
  background:var(--brand); color:#fff; border:1px solid transparent;
  box-shadow:0 16px 40px rgba(26,86,255,.20);
  text-decoration:none; transition:transform .08s ease, background .2s ease;
}
#legal-hero .btn:hover{ background:var(--brand-600); transform:translateY(-1px) }
#legal-hero .btn--glass{
  background:var(--glass-strong); color:var(--ink);
  border:1px solid rgba(255,255,255,.55);
}
#legal-hero .btn--glass:hover{ background:#fff }

/* Responsiv */
@media (max-width:980px){
  #legal-hero{ min-height:clamp(380px, 58vh, 700px); padding-block: clamp(28px, 7vw, 72px) }
  #legal-hero .card{ padding: clamp(16px, 4vw, 24px) }
}
@media (max-width:540px){
  #legal-hero .btn{ width:100% }
}

/* Fallback ohne Blur */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))){
  #legal-hero .card{ background:#fff !important; border-color:#fff !important; }
}

/* ----------------------------------------------------------
   GRID der Karten (Inhalte)
   Desktop: 2 Spalten, mobil: 1 Spalte
---------------------------------------------------------- */

.legal-scope .legal-grid{
  display:grid;
  grid-template-columns:1fr;                /* Standard: 1 Spalte */
  gap: clamp(16px, 2.4vw, 24px);
  align-items:start;
  max-width:1100px;
  margin: clamp(18px,4vw,28px) auto;
  padding-inline: clamp(16px,3vw,24px);
}

@media (min-width:1024px){
  .legal-scope .legal-grid{
    grid-template-columns: 1fr 1fr;         /* 2 Spalten auf Desktop */
  }
}

/* Karte – Glass + Shadow, konsistente Innenabstände */
.legal-scope .card{
  position:relative;
  background:var(--glass);
  border:1px solid rgba(255,255,255,.48);
  border-radius:var(--radius);
  backdrop-filter:saturate(140%) blur(10px);
  -webkit-backdrop-filter:saturate(140%) blur(10px);
  box-shadow:var(--shadow);
  overflow:hidden;
  padding:clamp(18px,3vw,28px);
}

/* Schattenfahne */
.legal-scope .card::after{
  content:""; position:absolute; left:12%; right:12%; bottom:-12px; height:20px;
  border-radius:999px; filter:blur(7px);
  background:radial-gradient(60% 120% at 50% 50%, rgba(2,6,23,.18), rgba(2,6,23,0) 70%);
  pointer-events:none;
}

/* Optional: Karte über gesamte Breite ziehen */
@media (min-width:1024px){
  .legal-scope .card.span-2{ grid-column:1 / -1; }
}

/* ----------------------------------------------------------
   Typografie & Links in Karten
---------------------------------------------------------- */

.legal-scope .card h2{
  margin:.1em 0 .45em; color:var(--ink);
  line-height:1.18; font-size:clamp(20px,2.4vw,24px);
}
.legal-scope .card h3{
  margin:.6em 0 .25em; color:var(--ink);
  font-size:clamp(16px,1.9vw,18px);
}
.legal-scope .card p,
.legal-scope .card li{ color:var(--muted); margin:.35em 0; }
.legal-scope .legal-list{ margin:.4rem 0 0; padding-left:18px }

.legal-scope a{
  color:var(--brand); text-decoration:none;
  border-bottom:1px solid rgba(26,86,255,.25);
  transition: color .2s ease, border-color .2s ease;
}
.legal-scope a:hover{ color:var(--brand-600); border-bottom-color:rgba(26,86,255,.5) }

/* dezente Trennung für Meta-Zeilen */
.legal-scope .meta{
  display:flex; flex-wrap:wrap; gap:12px; margin:.25rem 0 .5rem;
  color:var(--muted); font-size:.95rem;
}

/* ----------------------------------------------------------
   Buttons (allgemein, z. B. in einer Abschluss-Box)
---------------------------------------------------------- */

.legal-scope .btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.5em;
  padding:.88em 1.2em; border-radius:14px;
  font-weight:800; line-height:1; text-decoration:none !important;
  border:1px solid transparent;
  background:var(--brand); color:#fff;
  box-shadow:0 16px 40px rgba(26,86,255,.20);
  transition: transform .08s ease, background .2s ease, color .2s ease, border-color .2s ease;
}
.legal-scope .btn:hover{ background:var(--brand-600); transform:translateY(-1px) }

.legal-scope .btn--glass{
  background:var(--glass-strong); color:var(--ink);
  border:1px solid rgba(255,255,255,.55);
  box-shadow:0 12px 28px rgba(2,6,23,.08);
}
.legal-scope .btn--glass:hover{
  background:#fff; box-shadow:0 16px 40px rgba(2,6,23,.12);
}

/* Fokus-Styles (Zugänglichkeit) */
.legal-scope a:focus-visible,
.legal-scope .btn:focus-visible,
#legal-hero .chip:focus-visible{
  outline:2px solid var(--brand);
  outline-offset:2px;
  box-shadow:0 0 0 3px rgba(26,86,255,.25);
}

/* ----------------------------------------------------------
   Print-Fallback (keine Glas-Effekte)
---------------------------------------------------------- */
@media print{
  #legal-hero{ min-height:auto; padding:0; background:none !important }
  #legal-hero .card,
  .legal-scope .card{
    background:#fff !important; border:1px solid #ddd !important;
    box-shadow:none !important; -webkit-backdrop-filter:none !important; backdrop-filter:none !important;
  }
  .legal-scope a{ border-bottom:1px solid #999 }
}

/* ===== Zusatz: Tabelle im Legal-Glass-Stil ===== */
.legal-scope .legal-table{
  width:100%;
  border-collapse:separate;
  border-spacing:0;
  margin:.6rem 0 1rem;
  background:rgba(255,255,255,.86);
  border:1px solid rgba(255,255,255,.55);
  border-radius:16px;
  overflow:hidden;
  box-shadow:0 8px 24px rgba(2,6,23,.08);
}
.legal-scope .legal-table caption{
  caption-side:bottom;
  padding:.5em 0 .2em;
  color:var(--muted);
  font-size:.9rem;
}
.legal-scope .legal-table thead th{
  background:rgba(238,242,255,.8);
  font-weight:800;
  color:var(--ink);
}
.legal-scope .legal-table th,
.legal-scope .legal-table td{
  padding:.9em 1em;
  font-size:.98rem;
  color:var(--ink);
  vertical-align:top;
  border-bottom:1px solid rgba(0,0,0,.06);
}
.legal-scope .legal-table tbody tr:nth-child(odd) td{ background:rgba(255,255,255,.92) }
.legal-scope .legal-table tbody tr:last-child td{ border-bottom:0 }

/* mobil scrollbar + sticky header */
@media (max-width:800px){
  .legal-scope .legal-table{ display:block; max-width:100%; overflow-x:auto; -webkit-overflow-scrolling:touch; white-space:nowrap }
  .legal-scope .legal-table thead th{ position:sticky; top:0; z-index:1 }
}




/******** Hero-Button Size Fix (Match Impressum/Datenschutz) ********/
:root{
  --btn-radius:14px;
  --btn-pad-y: .9em;
  --btn-pad-x: 1.2em;
  --btn-fs: 1rem;          /* 16px Basis wie auf Impressum */
  --btn-gap: .5em;
}

/* 1) Einheitliche Button-Basis im Hero */
#legal-hero a.btn,
#legal-hero .btn,
#legal-hero .elementor-button,
#legal-hero .elementor-button-link{
  border-radius: var(--btn-radius) !important;
  padding: var(--btn-pad-y) var(--btn-pad-x) !important;
  font-size: var(--btn-fs) !important;
  line-height: 1 !important;
  font-weight: 800 !important;
  gap: var(--btn-gap) !important;
  min-height: auto !important;         /* Elementor-PreSets neutralisieren */
  letter-spacing: 0 !important;
  box-shadow: 0 16px 40px rgba(26,86,255,.20) !important;
  background: var(--brand) !important;
  color:#fff !important;
  border:1px solid transparent !important;
}

/* 2) Hover/Fokus identisch halten */
#legal-hero a.btn:hover,
#legal-hero .btn:hover,
#legal-hero .elementor-button:hover{
  background: var(--brand-600) !important;
  transform: translateY(-1px);
  box-shadow: 0 18px 46px rgba(26,86,255,.24) !important;
}
#legal-hero a.btn:focus-visible,
#legal-hero .btn:focus-visible,
#legal-hero .elementor-button:focus-visible{
  outline:2px solid var(--brand); outline-offset:2px;
  box-shadow:0 0 0 3px rgba(26,86,255,.25) !important;
}

/* 3) Elementor-Größen-Varianten (sm/md/lg/xl) hart neutralisieren */
#legal-hero .elementor-button.elementor-size-sm,
#legal-hero .elementor-button.elementor-size-md,
#legal-hero .elementor-button.elementor-size-lg,
#legal-hero .elementor-button.elementor-size-xl{
  padding: var(--btn-pad-y) var(--btn-pad-x) !important;
  font-size: var(--btn-fs) !important;
  min-height: auto !important;
  border-radius: var(--btn-radius) !important;
}

/* 4) Innenwrapper/Icon-Abstand anpassen (verhindert „Aufblähen“) */
#legal-hero .elementor-button .elementor-button-content-wrapper{
  border-radius: var(--btn-radius) !important;
  padding: 0 !important;              /* keine Zusatz-Polster */
}
#legal-hero .elementor-button .elementor-align-icon-right{
  margin-left: .45em !important;
}
#legal-hero .elementor-button .elementor-align-icon-left{
  margin-right: .45em !important;
}

/* 5) Mobile: volle Breite, aber gleiche Höhe */
@media (max-width:540px){
  #legal-hero .btn,
  #legal-hero .elementor-button{ width:100% }
}

/* 6) Optional: Wenn du überall (auch Inhalt) exakt gleich willst: */
.legal-scope .btn,
.legal-scope .elementor-button{
  border-radius: var(--btn-radius) !important;
  padding: var(--btn-pad-y) var(--btn-pad-x) !important;
  font-size: var(--btn-fs) !important;
  line-height: 1 !important;
  font-weight: 800 !important;
  gap: var(--btn-gap) !important;
  min-height: auto !important;
}

/******** Hero-Chips: echte Pille (runde Ecken erzwingen) ********/
#legal-hero .chip,
#legal-hero .chip:link,
#legal-hero .chip:visited{
  display:inline-flex !important;
  align-items:center; justify-content:center;
  padding:10px 16px !important;          /* etwas mehr vertikal für die Pille */
  border-radius:999px !important;
  -webkit-border-radius:999px !important;
  background:rgba(238,242,255,.92) !important;
  border:1px solid #E0E7FF !important;
  line-height:1 !important;
  overflow:hidden;                        /* falls innerer Wrapper eckig ist */
}

/* Falls Elementor innen noch eckig rendert */
#legal-hero .chip *:is(span,div,a){
  border-radius:999px !important;
}

/* Optional: Hover wie im Impressum beibehalten */
#legal-hero .chip:hover{
  transform:translateY(-1px);
  background:#E6ECFF !important;
  box-shadow:0 0 0 3px rgba(37,99,235,.22);
}/* End custom CSS */