.elementor-60 .elementor-element.elementor-element-38d424f{--display:flex;--min-height:0px;--flex-direction:row;--container-widget-width:initial;--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;}.elementor-60 .elementor-element.elementor-element-38d424f .elementor-background-slideshow__slide__image{background-position:center left;}.elementor-60 .elementor-element.elementor-element-38d424f.e-con{--order:99999 /* order end hack */;--flex-grow:0;--flex-shrink:0;}.elementor-60 .elementor-element.elementor-element-02bee1d{width:100%;max-width:100%;}.elementor-60 .elementor-element.elementor-element-7dc4e84{--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;}.elementor-60 .elementor-element.elementor-element-0890ce7{--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;}.elementor-60 .elementor-element.elementor-element-fed96b1{--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;}.elementor-60 .elementor-element.elementor-element-c9f73b0{--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;}.elementor-60 .elementor-element.elementor-element-b16b473{--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;}.elementor-60 .elementor-element.elementor-element-c8a33c3{--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;}.elementor-60 .elementor-element.elementor-element-150885f{width:100%;max-width:100%;}@media(max-width:1024px){.elementor-60 .elementor-element.elementor-element-38d424f.e-con{--align-self:flex-end;--order:99999 /* order end hack */;--flex-grow:1;--flex-shrink:0;}}@media(min-width:768px){.elementor-60 .elementor-element.elementor-element-38d424f{--width:100%;}}/* Start custom CSS *//* =========================================================
   3DDRUCK-MAGDEBURG • STARTSEITE CSS (v5, Full-Bleed Hero)
   Struktur:
   1) Variablen (Farben/Abstände)
   2) Utilities / Glass / Container
   3) Hero (inkl. Full-Bleed-Patch)
   4) Buttons
   5) Schritte / Beispiele aus der Praxis (Cards + Bilder)
   6) Material-Übersicht (Accordion + Tabellen)
   7) Globale Bild-Abrundung (nur Startseite)
   8) Kadence/Elementor Top-Gap Fix + Safety
   ========================================================= */


/* ========================
   1) VARIABLEN (global)
   ======================== */
:root{
  /* CI-Farben */
  --e3d-blue:      #2563eb;   /* Brandblau */
  --e3d-blue-dark: #1e3a8a;   /* Hover-Dunkelblau */
  --e3d-green:     #22c55e;   /* sekundärer Akzent */

  /* Text + Focus-Ringe */
  --e3d-ink:       #0b1226;
  --e3d-ring-blue: rgba(37,99,235,.35);
  --e3d-ring-gray: rgba(11,18,38,.20);

  /* Oberflächen & Rahmen */
  --e3d-surface:   #ffffff;
  --e3d-border:    #E5E7EB;
  --e3d-bg:        #F4F7FB;

  /* Glass-Card / Schatten / Radien */
  --e3d-glass-bg:   rgba(255,255,255,.60);
  --e3d-glass-bd:   rgba(255,255,255,.42);
  --e3d-glass-blur: 12px;

  --e3d-radius:      20px;    /* Karten-Radius */
  --e3d-radius-img:  16px;    /* Bild-Radius */
  --e3d-shadow-1:    0 10px 26px rgba(2,6,23,.08);
  --e3d-shadow-2:    0 20px 60px rgba(2,6,23,.12);
}


/* ========================
   2) UTILITIES / GLASS / CONTAINER
   ======================== */

/* Leicht transparentes "Fenster" */
.e3d-glass{
  background: var(--e3d-glass-bg);
  border: 1px solid var(--e3d-glass-bd);
  backdrop-filter: blur(var(--e3d-glass-blur));
  -webkit-backdrop-filter: blur(var(--e3d-glass-blur));
  border-radius: var(--e3d-radius);
  box-shadow: var(--e3d-shadow-2);
}

/* Hilfs-Container für max. Breite */
.e3d-container{
  max-width: min(1200px, 92vw);
  margin: 0 auto;
}


/* ========================
   3) HERO (Full-Bleed)
   ======================== */
/* Wichtig:
   – Hintergrundbild in Elementor direkt auf DIESE Section legen
     (ID: hero-startseite-v3), nicht auf Spalten/inneren Container.
*/
#hero-startseite-v3{
  /* Layout-Variablen */
  --hero-min-h: clamp(560px, 72vh, 860px);
  --pad-hero:   clamp(40px, 8vw, 120px);
  --pad-card:   clamp(20px, 2.6vw, 34px);
  --hero-img:   none; /* Alternativ nutzen, wenn du das Bild nicht in Elementor setzt */

  position: relative;
  display: grid;
  place-items: center;
  min-height: var(--hero-min-h);
  padding: var(--pad-hero) 16px;

  /* Hintergrund via CSS-Variable (Fallback, wenn kein Elementor-BG) */
  background-image: var(--hero-img);
  background-size: cover;
  background-position: center;

  /* === FULL-BLEED Patch: bricht aus Theme-Containern === */
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  background-size: cover !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  /* Optional für echtes "Fullscreen":
     min-height: 100svh;
  */
}

/* Innerer Wrap + Karte */
#hero-startseite-v3 .e3d-hero__wrap{
  position: relative;
  z-index: 1;
  width: 100%;
  display: grid;
  place-items: center;
}
#hero-startseite-v3 .e3d-hero__card{
  max-width: min(980px, 92vw);
  padding: var(--pad-card);
  text-align: center;
  color: var(--e3d-ink);
  border-radius: var(--e3d-radius); /* Fallback, falls .e3d-glass fehlt */
}

/* Typografie im Hero */
#hero-startseite-v3 .e3d-hero__heading{
  font-size: clamp(28px, 4.8vw, 54px);
  line-height: 1.1;
  margin: 0 0 10px;
}
#hero-startseite-v3 .e3d-hero__sub{
  font-size: clamp(16px, 1.6vw, 20px);
  opacity: .95;
  margin: 0 0 18px;
}
#hero-startseite-v3 .e3d-hero__note{
  margin: 12px 0 0;
  font-size: 14.5px;
  opacity: .9;
}
#hero-startseite-v3 .e3d-hero__ctas{
  display:flex; gap:12px; justify-content:center; flex-wrap:wrap;
  margin-bottom: 4px;
}

/* Video-Hintergrund (optional) */
#hero-startseite-v3 .e3d-hero__bg{ position:absolute; inset:0; z-index:0; }
#hero-startseite-v3 .e3d-hero__video{
  width:100%; height:100%;
  object-fit:cover; object-position:center;
  background:#0b1226;
}
#hero-startseite-v3 .e3d-hero__overlay{
  position:absolute; inset:0;
  background: linear-gradient(180deg, rgba(11,18,38,.55), rgba(11,18,38,.25) 55%, rgba(11,18,38,.55));
}

/* Elementor "Boxed"-Container aufbrechen (nur falls nötig) */
#hero-startseite-v3.elementor-section.elementor-section-boxed > .elementor-container{
  max-width: 100% !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* Keine ungewollten Rundungen/Clippings an der Full-Bleed-Section */
#hero-startseite-v3,
#hero-startseite-v3 > .elementor-container,
#hero-startseite-v3 .elementor-column,
#hero-startseite-v3 .elementor-widget-wrap{
  border-radius: 0 !important;
  overflow: visible;
}


/* ========================
   4) BUTTONS
   ======================== */
.e3d-btn{
  appearance:none; border:0; cursor:pointer; text-decoration:none;
  display:inline-flex; align-items:center; justify-content:center;
  padding:12px 18px; border-radius:14px; font-weight:700;
  color: var(--e3d-ink);
  box-shadow: 0 8px 20px rgba(2,6,23,.08);
  transition:
    background-color .25s ease,
    color .25s ease,
    border-color .25s ease,
    transform .06s ease,
    box-shadow .25s ease;
}
.e3d-btn--action{
  background: rgba(37,99,235,.10);
  color: var(--e3d-blue);
  border: 2px solid rgba(37,99,235,.45);
}
.e3d-btn--action:hover,
.e3d-btn--action:focus-visible{
  background: var(--e3d-blue-dark);
  color: #fff;
  border-color: var(--e3d-blue-dark);
  box-shadow: 0 10px 28px rgba(30,58,138,.28), 0 0 0 3px var(--e3d-ring-blue);
  transform: translateY(-1px);
}
.e3d-btn--neutral{
  background: rgba(11,18,38,.06);
  border: 1px solid rgba(11,18,38,.18);
  color: var(--e3d-ink);
}
.e3d-btn--neutral:hover,
.e3d-btn--neutral:focus-visible{
  background: rgba(11,18,38,.16);
  border-color: rgba(11,18,38,.35);
  box-shadow: 0 10px 28px rgba(2,6,23,.12), 0 0 0 3px var(--e3d-ring-gray);
  transform: translateY(-1px);
}
.e3d-btn[disabled], .e3d-btn.is-disabled{
  opacity:.55; pointer-events:none; filter: grayscale(12%);
}
@media (max-width: 480px){
  .e3d-hero__ctas .e3d-btn{ width:100%; }
}


/* =========================================================
   5) SCHRITTE / BEISPIELE AUS DER PRAXIS
   ========================================================= */
#steps-startseite{
  --pad-section: clamp(36px, 6vw, 80px);
  --pad-card:    clamp(16px, 2.2vw, 24px);
  background: transparent;
  padding: var(--pad-section) 16px;
}
#steps-startseite .e3d-steps__wrap{
  max-width: min(1200px, 92vw);
  margin: 0 auto;
}

/* Kopf */
#steps-startseite .e3d-steps__head{
  text-align:center;
  padding: var(--pad-card);
  margin-bottom: clamp(18px, 3vw, 28px);
}
#steps-startseite .e3d-steps__h2{
  margin:0 0 8px;
  font-size: clamp(22px, 3.2vw, 32px);
}
#steps-startseite .e3d-steps__lead{ margin:0; opacity:.95; }

/* Grid */
#steps-startseite .e3d-steps__grid{
  display:grid; gap: clamp(14px, 2vw, 22px);
  grid-template-columns: repeat(4, 1fr);
}
@media (max-width: 980px){
  #steps-startseite .e3d-steps__grid{ grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px){
  #steps-startseite .e3d-steps__grid{ grid-template-columns: 1fr; }
}

/* Karte */
#steps-startseite .e3d-step{
  background: var(--e3d-surface);
  border: 1px solid var(--e3d-border);
  border-radius: var(--e3d-radius);
  box-shadow: var(--e3d-shadow-1);
  padding: var(--pad-card);
  text-align: left;
  transition: transform .16s ease, box-shadow .16s ease;
}
#steps-startseite .e3d-step:hover{
  transform: translateY(-2px);
  box-shadow: var(--e3d-shadow-2);
}

/* Bild innerhalb der Card – immer abgerundet & vollflächig */
#steps-startseite .e3d-step :is(img, .elementor-image img, figure img){
  width:100%; height:auto; display:block;
  border-radius: var(--e3d-radius-img);
  box-shadow: var(--e3d-shadow-1);
  margin: 0 0 10px 0;
}

/* Titel & Text */
#steps-startseite .e3d-step__title{
  margin:0 0 6px;
  font-size: clamp(16px, 2vw, 18px);
  line-height:1.35;
}
#steps-startseite .e3d-step__text{ margin:0; opacity:.95; }
#steps-startseite .e3d-step a{
  color: var(--e3d-blue);
  text-decoration: none;
}
#steps-startseite .e3d-step a:hover{ text-decoration: underline; }

/* CTA-Zeile unter dem Grid */
#steps-startseite .e3d-steps__cta{
  display:flex; gap:12px; justify-content:center; flex-wrap:wrap;
  margin-top: clamp(18px, 3vw, 28px);
}
@media (max-width: 540px){
  #steps-startseite .e3d-steps__cta .e3d-btn{ width:100%; }
}


/* =========================================================
   6) MATERIAL-ÜBERSICHT – ACCORDION (untereinander)
   ========================================================= */
.mat-uebersicht{
  background: var(--e3d-bg);
  padding: clamp(16px, 3vw, 40px) 16px;
}
.mat-uebersicht .mat-wrap{
  max-width: min(1200px, 92vw);
  margin: 0 auto;
  background: rgba(255,255,255,.75);
  border: 1px solid rgba(255,255,255,.5);
  backdrop-filter: blur(6px);
  border-radius: var(--e3d-radius);
  box-shadow: var(--e3d-shadow-2);
  padding: clamp(12px, 2vw, 24px);
}

/* Accordion-Container */
.mat-accordion{ display:block; }

/* Einzel-Item */
.mat-item{
  background: var(--e3d-surface);
  border: 1px solid var(--e3d-border);
  border-radius: var(--e3d-radius);
  box-shadow: var(--e3d-shadow-1);
  margin: 10px 0;
  overflow: hidden;
}

/* Summary-Kopf (Klickfläche) */
.mat-item > summary{
  display:flex; align-items:center; justify-content:space-between;
  gap: 12px;
  padding: clamp(12px, 1.6vw, 16px);
  cursor: pointer;
  list-style: none;
  background: #fff;
}
.mat-item > summary::-webkit-details-marker{ display:none; }

/* Linke Seite: Name + Tags */
.mat-headline{
  display:flex; flex-direction:column; gap:8px; min-width:0;
}
.mat-name{
  margin:0; font-size: clamp(16px, 1.8vw, 20px); color:#0F172A;
}
.mat-tags{ display:flex; flex-wrap:wrap; gap:8px; }

/* Rechte Seite: Sterne + Chevron */
.mat-meta{ display:flex; align-items:center; gap:8px; white-space:nowrap; }
.mat-meta .chev{
  width: 12px; height: 12px; display:inline-block;
  border-right: 2px solid #6B7280; border-bottom: 2px solid #6B7280;
  transform: rotate(-45deg); transition: transform .18s ease;
}
.mat-item[open] > summary .chev{ transform: rotate(135deg); }

/* Body-Bereich */
.mat-body{
  padding: 0 clamp(12px, 1.6vw, 16px) clamp(12px, 1.6vw, 16px);
  background:#fff;
}

/* Tabellen – festes Layout + Wrap + Zebra + klare Köpfe */
.mat-table{
  width:100%;
  border:1px solid var(--e3d-border);
  border-radius: 10px;
  overflow:hidden;
  border-collapse: separate;
  border-spacing: 0;
  table-layout: fixed;
  font-size: 14px;
  margin-top: 10px;
}
.mat-table th, .mat-table td{
  padding: 9px 12px; vertical-align: top; text-align:left;
  word-wrap: break-word; overflow-wrap: anywhere;
  border-bottom: 1px solid #EEF2F7; background:#fff;
}
.mat-table th{
  width:38%; color:#334155; background:#F8FAFC;
}
.mat-table tr:nth-child(even) td{ background:#FCFEFF; }
.mat-table tr:last-child td{ border-bottom:none; }

/* Mobile: Tabelle stapeln */
@media (max-width: 640px){
  .mat-table, .mat-table tbody, .mat-table tr,
  .mat-table th, .mat-table td{
    display:block; width:100%;
  }
  .mat-table tr{ padding:8px 0; border-bottom:1px solid #EEF2F7; }
  .mat-table th{ margin-top:6px; border-bottom:none; }
}

/* Badges & Statuschips */
.badge{
  font-size:12px; font-weight:600; color:#0F172A;
  background:#EEF2FF; border:1px solid #E0E7FF;
  padding:3px 8px; border-radius:6px;
}
.badge.warn{   background:#FEF3C7; border-color:#FDE68A; color:#92400E }
.badge.danger{ background:#FEE2E2; border-color:#FECACA; color:#991B1B }
.badge.ok{     background:#DCFCE7; border-color:#BBF7D0; color:#065F46 }

/* Sterne (per --score von 0..5 steuerbar) */
.stars{
  position:relative;
  width: calc(18px * 5 + 4px * 4);
  display:flex; gap:4px;
}
.stars::after{
  content:"";
  position:absolute; inset:0;
  background: linear-gradient(90deg, #16A34A calc((var(--score,0)/5)*100%), transparent 0);
  -webkit-mask: radial-gradient(circle at 9px 50%,#000 99%,#0000 101%) left / calc(18px + 4px) 100% repeat-x;
          mask: radial-gradient(circle at 9px 50%,#000 99%,#0000 101%) left / calc(18px + 4px) 100% repeat-x;
}
.stars-label{ font-size:12px; color:#6B7280; }


/* =========================================================
   7) GLOBALE BILD-ABRUNDUNG (nur Startseite-Sektionen)
   ========================================================= */
:where(#hero-startseite-v3, #steps-startseite, .mat-uebersicht)
  :is(img, .elementor-image img, .elementor-widget-image img, figure img){
  border-radius: var(--e3d-radius-img) !important;
  height:auto; display:block;
}


/* =========================================================
   8) OPTIONAL: Header-Abstand Fix + Safety
   ========================================================= */

/* Header → Ersten Abschnitt bündig anschließen (Kadence/Elementor) */
.home .site-main,
.home .content-area,
.home .content-wrap,
.home .entry-content{
  padding-top:0 !important;
  margin-top:0 !important;
}
.home .entry-content > .elementor:first-child,
.home .entry-content > .elementor > .elementor-section-wrap > .elementor-section:first-child{
  margin-top:0 !important;
}

/* Safety: horizontales Scrollen verhindern (wg. 100vw) */
html, body{ overflow-x: hidden; }

/* Optional, falls minimaler Restabstand bleibt:
.home #hero-startseite-v3{ margin-top:-12px; }
*/









/* ===== HERO FULL-BLEED – FINAL HARD OVERRIDE ===== */
/* 1) Für Container-Layout (Elementor Flexbox) */
#hero-startseite-v3.e-con{
  width: 100vw !important;
  max-width: 100vw !important;
  margin-left: calc(50% - 50vw) !important;
  margin-right: calc(50% - 50vw) !important;
}
#hero-startseite-v3.e-con > .e-con-inner{
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* 2) Für ältere Section-Layouts (falls die Seite doch Sections nutzt) */
#hero-startseite-v3{
  width: 100vw !important;
  margin-left: calc(50% - 50vw) !important;
  margin-right: calc(50% - 50vw) !important;
  background-size: cover !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
}

/* 3) Boxed-Container aufbrechen (beide Modi) */
#hero-startseite-v3.elementor-section.elementor-section-boxed > .elementor-container,
#hero-startseite-v3.e-con.e-con-boxed{
  max-width: 100% !important;
}

/* 4) Sicherheitsnetz gegen horizontales Scrollen durchs 100vw */
html, body{ overflow-x: hidden; }



/* =========================================================
   STARTSEITE • MATERIAL-SNIPPET (Stile)
   Fügt sich in deine Foundation v5 ein (nutzt Variablen/Buttons)
   ========================================================= */
#mat-teaser .mat-teaser__card{
  padding: clamp(18px, 3vw, 34px);
  border-radius: var(--e3d-radius);
}

/* Eyebrow, Headline, Lead */
#mat-teaser .eyebrow{
  letter-spacing:.08em; text-transform:uppercase;
  font-weight:700; font-size:12px; color:#6B7280; margin:0 0 6px;
}
#mat-teaser h2{
  margin:.1em 0 .35em; font-size: clamp(22px, 3.2vw, 32px); line-height:1.2;
  color: var(--e3d-ink);
}
#mat-teaser .lead{
  margin:0; opacity:.95; max-width: 70ch;
}

/* Bullets */
#mat-teaser .mat-teaser__bullets{
  margin: clamp(12px, 2vw, 18px) 0 0; padding:0; list-style:none;
  display:grid; gap:10px;
}
#mat-teaser .mat-teaser__bullets li{
  background:#fff; border:1px solid var(--e3d-border);
  border-radius: 12px; padding:10px 12px;
  box-shadow: var(--e3d-shadow-1);
}

/* Chips */
#mat-teaser .mat-teaser__chips{
  display:flex; flex-wrap:wrap; gap:8px; margin: clamp(14px, 2vw, 18px) 0 0;
}
#mat-teaser .chip{
  font-size:12.5px; font-weight:600; color:#0F172A;
  background:#EEF2FF; border:1px solid #E0E7FF;
  padding:6px 10px; border-radius:999px;
}

/* CTA-Gruppe */
#mat-teaser .mat-teaser__ctas{
  display:flex; flex-wrap:wrap; gap:12px; margin-top: clamp(16px, 2.4vw, 22px);
}
@media (max-width:540px){
  #mat-teaser .mat-teaser__ctas .e3d-btn{ width:100%; }
}










/* =========================================================
   STARTSEITE • ANWENDUNGSFÄLLE – Styling
   Struktur:
   1) Section & Head
   2) Grid
   3) Case Card (Glas + Hover)
   4) Media (Bild + Tag-Overlay)
   5) Chips & CTA
   ========================================================= */

/* 1) Section & Head */
#cases{ padding: clamp(36px, 6vw, 84px) 16px; }
#cases .cases-head{ text-align:left; margin-bottom: clamp(18px, 3vw, 28px); }
#cases .cases-head .eyebrow{
  letter-spacing:.08em; text-transform:uppercase; font-weight:700;
  font-size:12px; color:#6B7280; margin:0 0 6px;
}
#cases .cases-head h2{
  margin:.1em 0 .3em; font-size:clamp(22px,3.2vw,32px); line-height:1.2; color:var(--e3d-ink);
}
#cases .cases-head .lead{ margin:0; opacity:.95; max-width:70ch; }

/* 2) Grid */
#cases .cases-grid{
  display:grid;
  gap: clamp(14px, 2.2vw, 22px);
  grid-template-columns: repeat(3, 1fr);
  align-items: stretch;
}
@media (max-width: 980px){ #cases .cases-grid{ grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px){ #cases .cases-grid{ grid-template-columns: 1fr; } }

/* 3) Case Card */
#cases .case{
  display:flex; flex-direction:column;
  border-radius: var(--e3d-radius);
  overflow:hidden;
  transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}
#cases .case:hover{ transform: translateY(-3px); box-shadow: var(--e3d-shadow-2); }

/* 4) Media */
#cases .case__media{
  position:relative; overflow:hidden;
  border-radius: calc(var(--e3d-radius) - 6px);
  margin: 12px 12px 0 12px;
  aspect-ratio: 16 / 10;               /* einheitliche Bildhöhe */
  background:#0b1226;
}
#cases .case__media img{
  width:100%; height:100%; object-fit:cover; display:block;
  filter: saturate(1.05) contrast(1.02);
}
/* Tag-Overlay oben links */
#cases .case__tag{
  position:absolute; top:10px; left:10px;
  background: rgba(255,255,255,.85);
  border:1px solid var(--e3d-border);
  padding:6px 10px; border-radius:999px;
  font-size:12px; font-weight:700; color:#0F172A;
  box-shadow: var(--e3d-shadow-1);
}

/* Inhalt */
#cases .case__title{
  margin:12px 12px 6px; font-size: clamp(16px, 2.2vw, 20px); line-height:1.25; color:var(--e3d-ink);
}
#cases .case__text{
  margin:0 12px 10px; opacity:.95;
}

/* 5) Chips & CTA */
#cases .case__chips{
  display:flex; flex-wrap:wrap; gap:8px; margin: 0 12px 12px;
}
#cases .chip{
  font-size:12px; font-weight:600; color:#0F172A;
  background:#EEF2FF; border:1px solid #E0E7FF;
  padding:5px 9px; border-radius:999px;
}
#cases .case__cta{
  margin: auto 12px 12px; display:flex; gap:10px; flex-wrap:wrap;
}
@media (max-width:540px){
  #cases .case__cta .e3d-btn{ width:100%; }
}





/* =========================================================
   STARTSEITE • BEISPIELE AUS DER PRAXIS
   Gilt für: <section id="beispiele" class="section-bleed">…</section>
   Struktur:
   1) Section (Full-Bleed + Grundabstände)
   2) Head-Card (.e3d-head)
   3) Grid (.e3d-grid.grid-4)
   4) Karten (.e3d-card + .e3d-card--img)
   5) Bilder (Figure/Img, Aspect-Ratio, Hover)
   6) CTA unter dem Grid (Button-Zeile)
   ========================================================= */

/* 1) SECTION – Full-Bleed + angenehme Vertikalen */
#beispiele.section-bleed{
  /* bricht aus Theme-Containern für vollen Hintergrund */
  width:100vw; margin-left:calc(50% - 50vw); margin-right:calc(50% - 50vw);
  padding: clamp(36px, 6vw, 84px) 16px;

  /* dezenter Hintergrund (anpassbar oder via Elementor-BG setzen) */
  background:
    radial-gradient(1100px 380px at 15% -10%, rgba(37,99,235,.08), transparent 60%),
    radial-gradient(900px 320px at 85% 110%, rgba(11,18,38,.06), transparent 60%),
    #F7FAFF; /* sehr helles Blau-Grau */
}

/* 2) HEAD-CARD – Glas-Look + Typo */
#beispiele .e3d-head{
  background: var(--e3d-glass-bg);
  border: 1px solid var(--e3d-glass-bd);
  backdrop-filter: blur(var(--e3d-glass-blur));
  -webkit-backdrop-filter: blur(var(--e3d-glass-blur));
  border-radius: var(--e3d-radius);
  box-shadow: var(--e3d-shadow-2);
  margin: 0 auto clamp(16px, 3vw, 28px);
}
#beispiele .e3d-head h2{
  margin:.2em 0 .25em; font-size:clamp(22px,3.2vw,32px); line-height:1.2; color:var(--e3d-ink);
}
#beispiele .e3d-head p{ margin:0; opacity:.95 }

/* 3) GRID – 4/2/1 Spalten, gleichmäßige Kachelhöhen */
#beispiele .e3d-grid{
  display:grid; gap: clamp(14px, 2.2vw, 22px);
}
#beispiele .grid-4{ grid-template-columns: repeat(4, 1fr); }
@media (max-width: 1100px){ #beispiele .grid-4{ grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 900px){  #beispiele .grid-4{ grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px){  #beispiele .grid-4{ grid-template-columns: 1fr; } }

/* 4) KARTEN – Glasig, soft, mit Lift-Hover */
#beispiele .e3d-card{
  background:#fff; /* bewusst etwas fester als Glass, wirkt ruhiger bei Fotos */
  border:1px solid var(--e3d-border);
  border-radius: var(--e3d-radius);
  box-shadow: var(--e3d-shadow-1);
  display:flex; flex-direction:column;
  transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}
#beispiele .e3d-card:hover{
  transform: translateY(-3px);
  box-shadow: var(--e3d-shadow-2);
  border-color: rgba(2,6,23,.12);
}
#beispiele .e3d-card h3{
  font-size: clamp(16px, 2.1vw, 20px);
  line-height:1.25; color:var(--e3d-ink);
}

/* 5) BILDER – einheitliche Höhe + sanfter Zoom auf Hover */
#beispiele .e3d-card figure{
  margin:0; border-radius: calc(var(--e3d-radius) - 6px);
  overflow:hidden; background:#0b1226;
  aspect-ratio: 16 / 10;             /* harmonische Bannerhöhe je Karte */
}
#beispiele .e3d-card figure img{
  width:100%; height:100%; object-fit:cover; display:block;
  filter: saturate(1.03) contrast(1.02);
  transform: scale(1); transition: transform .4s ease;
}
#beispiele .e3d-card:hover figure img{ transform: scale(1.03); }

/* Textblöcke in den Karten */
#beispiele .e3d-card p{ opacity:.95 }

/* 6) CTA unter dem Grid – Button mittig */
#beispiele .cta-wrap{
  max-width:min(1100px,92vw); margin:12px auto 0; text-align:center;
}









/* ========================
   STARTSEITE • HERO (v5.1 kompakt)
   Nur Höhe/Bildwirkung reduziert – Rest unverändert
   ======================== */

#hero-startseite-v3{
  /* ↓ vorher: clamp(560px, 72vh, 860px)  */
  --hero-min-h: clamp(420px, 56vh, 700px);
  /* etwas weniger vertikales Padding */
  --pad-hero:   clamp(28px, 6vw, 90px);
  --pad-card:   clamp(18px, 2.2vw, 30px);

  position: relative;
  display: grid; place-items: center;
  min-height: var(--hero-min-h);
  padding: var(--pad-hero) 16px;

  /* Full-bleed bleibt erhalten */
  width: 100vw; max-width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);

  background-size: cover !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
}

/* Card bleibt mittig, Buttons/Texte unverändert */
#hero-startseite-v3 .e3d-hero__wrap{ position:relative; z-index:1; width:100%; display:grid; place-items:center; }
#hero-startseite-v3 .e3d-hero__card{ max-width:min(980px,92vw); padding:var(--pad-card); text-align:center; }

/* Boxed/Section-Fallbacks */
#hero-startseite-v3.elementor-section.elementor-section-boxed > .elementor-container{
  max-width:100% !important; padding-left:0 !important; padding-right:0 !important;
}

/* Falls der Hero ein Elementor-Container (.e-con) ist */
#hero-startseite-v3.e-con{
  width:100vw !important; max-width:100vw !important;
  margin-left: calc(50% - 50vw) !important; margin-right: calc(50% - 50vw) !important;
}
#hero-startseite-v3.e-con,
#hero-startseite-v3.e-con > .e-con-inner{
  min-height: var(--hero-min-h) !important;
  padding-left:0 !important; padding-right:0 !important;
}/* End custom CSS */