.elementor-62 .elementor-element.elementor-element-cb5555a{--display:flex;--min-height:634px;--flex-direction:row-reverse;--container-widget-width:initial;--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap-reverse;--justify-content:space-between;}.elementor-62 .elementor-element.elementor-element-cb5555a.e-con{--flex-grow:0;--flex-shrink:0;}.elementor-62 .elementor-element.elementor-element-e8c142a{width:100%;max-width:100%;}.elementor-62 .elementor-element.elementor-element-e8c142a.elementor-element{--align-self:center;}.elementor-62 .elementor-element.elementor-element-0250299{--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-62 .elementor-element.elementor-element-0250299.e-con{--align-self:center;}.elementor-62 .elementor-element.elementor-element-1116663{--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-62 .elementor-element.elementor-element-adba456{--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-62 .elementor-element.elementor-element-989df4f{--display:flex;}@media(min-width:768px){.elementor-62 .elementor-element.elementor-element-cb5555a{--width:100%;}}@media(max-width:1024px){.elementor-62 .elementor-element.elementor-element-cb5555a{--min-height:415px;}}@media(max-width:767px){.elementor-62 .elementor-element.elementor-element-cb5555a{--min-height:290px;}}/* Start custom CSS *//* =========================================================
   3D-Druck Magdeburg • /materialien (v9 clean)
   - CI-Variablen
   - Full-Bleed Hero (BG auf 1./2. Ebene)
   - Schwebende Glas-Karten + Schatten
   - Katalog / Farben / FAQ / Preise
   - Robuste Buttons + Chips
   ========================================================= */

/* =============== 0) BASIS =============== */
:root{
  /* CI */
  --e3d-blue:      #2563eb;
  --e3d-blue-dark: #1e3a8a;
  --e3d-green:     #22c55e;

  --e3d-ink:       #0b1226;
  --e3d-border:    #E5E7EB;
  --e3d-bg:        #F6F9FF;

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

  /* Radien + Schatten */
  --e3d-radius:     20px;
  --e3d-radius-img: 16px;
  --e3d-shadow-1:   0 10px 26px rgba(2,6,23,.08);
  --e3d-shadow-2:   0 20px 60px rgba(2,6,23,.12);

  /* Fokusringe */
  --e3d-ring-blue:  rgba(37,99,235,.30);
  --e3d-ring-gray:  rgba(11,18,38,.18);
}

html, body{ overflow-x:hidden; }

.section       { padding: clamp(36px, 6vw, 84px) 16px; }
.mat-container { max-width:min(1200px,92vw); margin:0 auto; }
.eyebrow       { letter-spacing:.08em; text-transform:uppercase; font-weight:700; font-size:12px; color:#6B7280; margin:0 0 6px; }
.sub           { opacity:.95; margin:0; }
.nowrap        { white-space:nowrap; }

/* Schwebende Glas-Fenster (allgemein) */
.e3d-glass-float{
  background: var(--e3d-glass-bg);
  border: 1px solid var(--e3d-glass-bd);
  backdrop-filter: blur(var(--e3d-glass-blur)) saturate(130%);
  -webkit-backdrop-filter: blur(var(--e3d-glass-blur)) saturate(130%);
  border-radius: var(--e3d-radius);
  box-shadow: var(--e3d-shadow-2);
}

/* =============== 1) HERO (Full-Bleed, höher, Card mittig) =============== */
/* ÄUSSERSTER Hero-Container (ID muss hier sitzen) */
#mat-hero{
  /* Full-bleed aus „boxed“ Layouts ziehen */
  position: relative;
  width: 100vw; max-width: 100vw !important;
  left: 50%; margin-left: -50vw; margin-right: -50vw;

  /* Steuerwerte */
  --hero-min: clamp(880px, 66vh, 1000px); /* etwas höher als zuvor */
  --hero-y:   38%;                       /* Bild-Ausschnitt (0% oben, 50% Mitte) */
}

/* Träger mit Hintergrundbild – robust (1. oder 2. Ebene) */
#mat-hero > .e-con,
#mat-hero > .elementor-container,
#mat-hero > .e-con > .e-con,
#mat-hero > .elementor-container > .e-con{
  min-height: var(--hero-min);
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: clamp(40px, 7vw, 120px) clamp(16px, 4vw, 24px);

  width: 100%;
  max-width: none !important;
  border-radius: 0 !important;
  overflow: visible !important;

  background-size: cover !important;
  background-position: 50% var(--hero-y) !important;
  background-repeat: no-repeat !important;

  position: relative; z-index: 0;
}

/* Lesbarkeits-Overlay (unter Card) */
#mat-hero > .e-con::after,
#mat-hero > .elementor-container::after,
#mat-hero > .e-con > .e-con::after,
#mat-hero > .elementor-container > .e-con::after{
  content:""; position:absolute; inset:0; pointer-events:none; z-index:-1;
  background:
    radial-gradient(60% 80% at 50% 8%, rgba(11,18,38,.25), transparent 55%),
    linear-gradient(180deg, rgba(11,18,38,.45), rgba(11,18,38,.15) 55%, rgba(11,18,38,.45));
}

/* Inhalt im Hero */
#mat-hero .mat-hero__card{
  margin: 0 auto !important;
  max-width: min(980px, 92vw);
  width: auto;
  text-align: center;
  padding: clamp(18px, 3vw, 34px);
  position: relative; z-index: 1;

  /* transparente Glas-Card erzwingen (auch ohne Zusatzklasse) */
  background: var(--e3d-glass-bg);
  border: 1px solid var(--e3d-glass-bd);
  backdrop-filter: blur(var(--e3d-glass-blur)) saturate(130%);
  -webkit-backdrop-filter: blur(var(--e3d-glass-blur)) saturate(130%);
  border-radius: var(--e3d-radius);
  box-shadow: var(--e3d-shadow-2);

  /* evtl. Builder-Werte neutralisieren */
  left:auto !important; right:auto !important; transform:none !important;
}
#mat-hero h1{ margin:.2em 0 .25em; font-size: clamp(28px,4.2vw,48px); line-height:1.1; color:var(--e3d-ink); }
#mat-hero .lead{ margin:0 0 10px; }
#mat-hero .mat-hero__ctas{ display:flex; gap:12px; justify-content:center; flex-wrap:wrap; margin:8px 0 10px; }
#mat-hero .mat-hero__nav{ display:flex; flex-wrap:wrap; gap:8px; justify-content:center; margin-top:6px; }

/* Chips (Hero-Filter) */
#mat-hero .chip{
  display:inline-flex; align-items:center; gap:.4em; font-weight:700;
  padding:6px 10px; border-radius:999px; border:1px solid #E0E7FF;
  background:#EEF2FF; color:#0F172A; text-decoration:none;
  transition: transform .06s ease, box-shadow .25s ease, background-color .25s ease;
}
#mat-hero .chip:hover, #mat-hero .chip:focus-visible{
  transform: translateY(-1px);
  background:#E6ECFF;
  box-shadow: 0 0 0 3px var(--e3d-ring-blue), 0 14px 34px rgba(2,6,23,.10);
  outline: none;
}

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

/* =============== 2) BUTTONS (robust, CI bleibt) =============== */
.e3d-btn{
  appearance:none; border:0; cursor:pointer; text-decoration:none !important;
  display:inline-flex; align-items:center; justify-content:center; gap:.5em;
  padding:12px 18px; border-radius:14px; font-weight:700; color:var(--e3d-ink);
  box-shadow: var(--e3d-shadow-1);
  transition: background-color .25s, color .25s, border-color .25s, box-shadow .25s, transform .06s;
}
.e3d-btn--action{
  background: var(--e3d-blue); color:#fff; border:1px solid transparent;
}
.e3d-btn--action:hover, .e3d-btn--action:focus-visible{
  background: var(--e3d-blue-dark); transform: translateY(-1px);
  box-shadow: 0 20px 60px rgba(30,58,138,.28), 0 0 0 3px var(--e3d-ring-blue);
  color:#fff;
}
.e3d-btn--neutral{
  background:#fff; color: var(--e3d-ink); border:1px solid var(--e3d-border);
}
.e3d-btn--neutral:hover, .e3d-btn--neutral:focus-visible{
  background:#f8fafc; transform: translateY(-1px);
  box-shadow: 0 20px 60px rgba(2,6,23,.12), 0 0 0 3px var(--e3d-ring-gray);
}
@media (max-width:540px){
  #mat-hero .e3d-btn,
  #mat-preis .e3d-btn{ width:100%; text-align:center; }
}

/* Auto-Buttonize für Upload & Rückruf (ohne „composes“) */
:is(#mat-hero, #mat-preis) a[href*="/upload-angebot/"],
:is(#mat-hero, #mat-preis) a[href*="/kontakt/"]{
  display:inline-flex; align-items:center; justify-content:center; gap:.5em;
  padding:12px 18px; border-radius:14px; font-weight:700; text-decoration:none !important;
  box-shadow: var(--e3d-shadow-1); transition: background-color .25s, color .25s, border-color .25s, box-shadow .25s, transform .06s;
}
:is(#mat-hero, #mat-preis) a[href*="/upload-angebot/"]{
  background: var(--e3d-blue); color:#fff; border:1px solid transparent;
}
:is(#mat-hero, #mat-preis) a[href*="/upload-angebot/"]:hover,
:is(#mat-hero, #mat-preis) a[href*="/upload-angebot/"]:focus-visible{
  background: var(--e3d-blue-dark); transform: translateY(-1px);
  box-shadow: 0 20px 60px rgba(30,58,138,.28), 0 0 0 3px var(--e3d-ring-blue);
}
:is(#mat-hero, #mat-preis) a[href*="/kontakt/"]{
  background:#fff; color: var(--e3d-ink); border:1px solid var(--e3d-border);
}
:is(#mat-hero, #mat-preis) a[href*="/kontakt/"]:hover,
:is(#mat-hero, #mat-preis) a[href*="/kontakt/"]:focus-visible{
  background:#f8fafc; transform: translateY(-1px);
  box-shadow: 0 20px 60px rgba(2,6,23,.12), 0 0 0 3px var(--e3d-ring-gray);
}

/* =============== 3) MATERIAL-KATALOG =============== */
#mat-katalog .mat-head{ text-align:left; margin-bottom: clamp(16px, 3vw, 24px); }
#mat-katalog .mat-head h2{ margin:.1em 0 .25em; font-size:clamp(22px,3.2vw,32px); line-height:1.2; color:var(--e3d-ink); }

#mat-katalog .mat-grid{
  display:grid; gap: clamp(14px, 2.2vw, 22px);
  grid-template-columns: repeat(3, 1fr);
}
@media (max-width:980px){ #mat-katalog .mat-grid{ grid-template-columns: repeat(2, 1fr); } }
@media (max-width:620px){ #mat-katalog .mat-grid{ grid-template-columns: 1fr; } }

/* Karten */
#mat-katalog .mat-card{
  padding: clamp(14px, 2vw, 18px);
  border-radius: var(--e3d-radius);
  background: var(--e3d-glass-bg);
  border: 1px solid var(--e3d-glass-bd);
  backdrop-filter: blur(var(--e3d-glass-blur)) saturate(130%);
  -webkit-backdrop-filter: blur(var(--e3d-glass-blur)) saturate(130%);
  box-shadow: var(--e3d-shadow-2);
  transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}
#mat-katalog .mat-card:hover{ transform: translateY(-3px); box-shadow: 0 26px 72px rgba(2,6,23,.16); }
#mat-katalog .mat-card__top{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-bottom:6px; }
#mat-katalog .mat-card h3{ font-size:clamp(16px,2vw,20px); margin:0; line-height:1.25; color:var(--e3d-ink); }
#mat-katalog .mat-card__lead{ margin:6px 0 8px; opacity:.95; }
#mat-katalog .mat-card__bullets{ margin:0; padding-left:18px; }

/* Badges */
.badge{
  font-size:12px; font-weight:700; color:#0F172A;
  background:#EEF2FF; border:1px solid #E0E7FF;
  padding:4px 8px; border-radius:999px;
}
.badge.ok{ background:#DCFCE7; border-color:#BBF7D0; color:#065F46 }
.badge.warn{ background:#FEF3C7; border-color:#FDE68A; color:#92400E }

/* Details/Specs */
#mat-katalog .mat-details{ margin-top:8px; }
#mat-katalog .mat-details > summary{
  cursor:pointer; list-style:none; user-select:none;
  padding:10px 12px; border:1px solid var(--e3d-border); border-radius:12px; background:#fff; font-weight:700;
}
#mat-katalog .mat-details > summary::-webkit-details-marker{ display:none; }
#mat-katalog .mat-details[open] > summary{ border-bottom-left-radius:0; border-bottom-right-radius:0; }
#mat-katalog .mat-details__body{
  border:1px solid var(--e3d-border); border-top:none; border-bottom-left-radius:12px; border-bottom-right-radius:12px;
  padding:12px; background:#fff;
}

.mat-spec{
  width:100%; border-collapse:separate; border-spacing:0; table-layout:fixed;
  border:1px solid var(--e3d-border); border-radius:10px; overflow:hidden; margin: 6px 0 10px;
  font-size:14px;
}
.mat-spec th, .mat-spec td{
  padding:9px 12px; text-align:left; vertical-align:top; background:#fff; border-bottom:1px solid #EEF2F7;
}
.mat-spec th{ width:36%; color:#334155; background:#F8FAFC; }
.mat-spec tr:last-child td{ border-bottom:none; }

/* =============== 4) FARBEN, OBERFLÄCHEN & TOLERANZEN =============== */
#mat-farben .color-grid{
  display:flex; flex-wrap:wrap; gap:10px; padding:12px; border-radius: var(--e3d-radius);
  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));
  box-shadow: var(--e3d-shadow-2);
}
#mat-farben .chip{
  font-size:12.5px; font-weight:700; color:#0F172A;
  background:#EEF2FF; border:1px solid #E0E7FF; padding:6px 10px; border-radius:999px;
}
#mat-farben .chip--swatch{
  background: var(--c); border-color: rgba(17,24,39,.14);
  color:#fff; text-shadow:0 1px 0 rgba(0,0,0,.15);
}
#mat-farben .hint{ margin:8px 0 16px; color:#6B7280; }

#mat-farben .features-grid{
  display:grid; gap: clamp(14px, 2.2vw, 22px); grid-template-columns: repeat(4, 1fr);
}
@media (max-width:980px){ #mat-farben .features-grid{ grid-template-columns: repeat(2, 1fr); } }
@media (max-width:620px){ #mat-farben .features-grid{ grid-template-columns: 1fr; } }
#mat-farben .feat{
  padding:16px 18px; border-radius: var(--e3d-radius);
  background:#fff; border:1px solid var(--e3d-border); box-shadow: var(--e3d-shadow-1);
}

/* =============== 5) FAQ =============== */
#mat-faq .faq{
  display:grid; gap:10px; padding:12px; border-radius: var(--e3d-radius);
  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));
  box-shadow: var(--e3d-shadow-2);
}
#mat-faq details{ background:#fff; border:1px solid var(--e3d-border); border-radius:12px; box-shadow: var(--e3d-shadow-1); }
#mat-faq summary{ padding:12px; cursor:pointer; font-weight:700; list-style:none; }
#mat-faq summary::-webkit-details-marker{ display:none; }
#mat-faq details[open] summary{ border-bottom:1px solid #EEF2F7; }
#mat-faq details p{ margin:0; padding:12px; }

/* =============== 6) PREIS & QUALITÄT + Abschluss-CTA =============== */
#mat-preis .pricing-grid{
  display:grid; gap: clamp(14px, 2.2vw, 22px); grid-template-columns: repeat(3, 1fr);
}
@media (max-width:900px){ #mat-preis .pricing-grid{ grid-template-columns: 1fr 1fr; } }
@media (max-width:620px){ #mat-preis .pricing-grid{ grid-template-columns: 1fr; } }

#mat-preis .pricecard{
  padding:16px 18px; border-radius: var(--e3d-radius);
  background:#fff; border:1px solid var(--e3d-border); box-shadow: var(--e3d-shadow-1);
}

#mat-preis .mat-final{
  margin-top: clamp(16px, 3vw, 24px);
  padding: clamp(16px, 2.4vw, 22px);
  text-align:center; border-radius: var(--e3d-radius);
  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));
  box-shadow: var(--e3d-shadow-2);
}
#mat-preis .mat-final__ctas{ display:flex; gap:12px; justify-content:center; flex-wrap:wrap; margin-top:10px; }
#mat-preis .mat-final:hover{ transform: translateY(-1px); box-shadow: 0 28px 70px rgba(2,6,23,.16); }

/* =============== 7) Bilder rund (lokal) =============== */
:where(#mat-hero, #mat-katalog, #mat-farben, #mat-faq, #mat-preis)
  :is(img, .elementor-image img, .elementor-widget-image img, figure img){
  border-radius: var(--e3d-radius-img) !important;
  height:auto; display:block;
}


/* =========================================================
   MATERIALIEN – KLASSISCHES LAYOUT (Sektionen, 2-Spalten)
   Kollisionen vermeiden: eigene Klassen (.fil-*)
   ========================================================= */
:root{
  --fil-gap: clamp(16px, 2.2vw, 28px);
  --fil-radius: 18px;
  --fil-border: #E5E7EB;
  --fil-shadow: 0 14px 40px rgba(2,6,23,.10);
  --fil-shadow-hover: 0 22px 60px rgba(2,6,23,.14);
  --fil-bg: #fff;
}

/* Gesamt-Grid: zwei Spalten auf Desktop, auto-stacking mobil */
.filament-list{
  max-width: min(1200px, 92vw);
  margin: 0 auto;
  padding: clamp(28px, 4vw, 48px) 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--fil-gap);
}
@media (max-width: 900px){
  .filament-list{
    grid-template-columns: 1fr;
  }
}

/* Jede Sektion ist eine eigenständige Card im klassischen Look */
.fil-section{
  background: var(--fil-bg);
  border: 1px solid var(--fil-border);
  border-radius: var(--fil-radius);
  box-shadow: var(--fil-shadow);
  overflow: hidden;                 /* runde Ecken auch für Bilder */
  display: flex;
  flex-direction: column;
  transition: box-shadow .2s ease, transform .06s ease;
}
.fil-section:hover{
  box-shadow: var(--fil-shadow-hover);
  transform: translateY(-1px);
}

/* Inhaltsabstände – „Text atmet vom Rahmen weg“ */
.fil-inner{
  padding: clamp(16px, 2.2vw, 22px);
}

/* Bildkopf */
.fil-media{
  display: block;
  line-height: 0;
}
.fil-media img{
  width: 100%;
  height: auto;
  display: block;
}

/* Titel + Badges */
.fil-head{
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  margin: 0 0 6px 0;
}
.fil-head h2{
  margin: 0; line-height: 1.15;
  font-size: clamp(18px, 2.6vw, 24px);
  color: var(--e3d-ink, #0b1226);
}
.fil-badge{
  font-size: 12px; font-weight: 700;
  border: 1px solid #E0E7FF; background:#EEF2FF; color:#0F172A;
  padding: 4px 8px; border-radius: 999px;
}
.fil-badge.ok{ background:#DCFCE7; border-color:#BBF7D0; color:#065F46 }
.fil-badge.warn{ background:#FEF3C7; border-color:#FDE68A; color:#92400E }

/* Einleitung */
.fil-lead{ margin: 6px 0 10px; opacity:.95 }

/* Bullets */
.fil-bullets{ margin: 0 0 8px 0; padding-left: 18px }

/* Details (klassischer Stil; kompatibel mit deinen Tabellenklassen) */
.fil-details{ margin-top: 8px }
.fil-details > summary{
  cursor: pointer; list-style: none; user-select: none;
  padding: 12px; font-weight: 700;
  border: 1px solid var(--fil-border);
  border-radius: 12px; background: #fff;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
}
.fil-details > summary::-webkit-details-marker{ display:none }
.fil-details > summary::after{ content:"▾"; opacity:.7; transition: transform .2s }
.fil-details[open] > summary::after{ transform: rotate(-180deg) }
.fil-details__body{
  border: 1px solid var(--fil-border);
  border-top: none; border-bottom-left-radius: 12px; border-bottom-right-radius: 12px;
  padding: 12px; background: #fff;
}

/* Spezifikationstabelle – klassisch lesbar */
.fil-spec{
  width: 100%; border-collapse: separate; border-spacing: 0; table-layout: auto;
  border: 1px solid var(--fil-border); border-radius: 10px; overflow: hidden;
  font-size: 14px; margin: 6px 0 10px;
}
.fil-spec th, .fil-spec td{
  padding: 9px 12px; text-align: left; vertical-align: top; background: #fff; border-bottom: 1px solid #EEF2F7;
  line-height: 1.35;
}
.fil-spec th{ width: 36%; color:#334155; background:#F8FAFC }
.fil-spec tr:last-child td{ border-bottom: none }

/* Wirtschaftlichkeit + Preis (Richtwert) */
.fil-meta{ display:flex; align-items:center; gap:8px; flex-wrap:wrap }
.fil-euros{ font-weight:800; letter-spacing:1px }
.fil-euros .off{ opacity:.35 }
.fil-price{ font-weight:700; background:#F1F5FF; border:1px solid #E0E7FF; border-radius:10px; padding:2px 8px }
.fil-note{ color:#64748B; font-size:.92em }

/* CTA-Zeile unten optional */
.fil-ctas{ display:flex; gap:10px; flex-wrap:wrap; margin-top: 6px }
.fil-btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.5em;
  padding:12px 16px; border-radius:14px; font-weight:700; text-decoration:none !important;
  border:1px solid var(--e3d-border,#E5E7EB); background:#fff; color:#0b1226;
  box-shadow: 0 10px 26px rgba(2,6,23,.08); transition: transform .06s, box-shadow .25s, background-color .25s;
}
.fil-btn:hover{ transform: translateY(-1px); box-shadow: 0 20px 60px rgba(2,6,23,.12); background:#f8fafc }
.fil-btn--primary{ background: var(--e3d-blue,#2563eb); color:#fff; border-color:transparent }
.fil-btn--primary:hover{ background: var(--e3d-blue-dark,#1e3a8a) }




/* =========================================================
   3D-Druck Magdeburg • /materialien (v9 clean, single-page)
   - CI-Variablen + Glas
   - Hero (optional)
   - Kartenraster (ALLE Materialien)
   - Fixes: Wirtschaftlichkeit/Preis sichtbar, Tabellen gut lesbar
   ========================================================= */

/* ---------- 0) BASIS / VARIABLEN ---------- */
:root{
  --e3d-blue:#2563eb; --e3d-blue-dark:#1e3a8a; --e3d-green:#22c55e;
  --e3d-ink:#0b1226; --e3d-border:#E5E7EB; --e3d-bg:#F6F9FF;
  --e3d-glass-bg:rgba(255,255,255,.60); --e3d-glass-bd:rgba(255,255,255,.42); --e3d-glass-blur:12px;
  --e3d-radius:20px; --e3d-radius-img:16px;
  --e3d-shadow-1:0 10px 26px rgba(2,6,23,.08);
  --e3d-shadow-2:0 20px 60px rgba(2,6,23,.12);
}
html,body{overflow-x:hidden}
.section{padding:clamp(36px,6vw,84px) 16px}
.mat-container{max-width:min(1200px,92vw);margin:0 auto}
.sub{opacity:.95;margin:0}

/* ---------- 1) BADGES / CHIPS ---------- */
.badge{
  font-size:12px;font-weight:700;color:#0F172A;
  background:#EEF2FF;border:1px solid #E0E7FF;
  padding:4px 8px;border-radius:999px
}
.badge.ok{background:#DCFCE7;border-color:#BBF7D0;color:#065F46}
.badge.warn{background:#FEF3C7;border-color:#FDE68A;color:#92400E}

/* ---------- 2) GRID + KARTEN ---------- */
#mat-katalog .mat-head{margin-bottom:clamp(16px,3vw,24px)}
#mat-katalog .mat-head h2{margin:.1em 0 .25em;font-size:clamp(22px,3.2vw,32px);line-height:1.2;color:var(--e3d-ink)}

#mat-katalog .mat-grid{
  display:grid;gap:clamp(14px,2.2vw,22px);
  grid-template-columns:repeat(3,1fr)
}
@media (max-width:980px){#mat-katalog .mat-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:620px){#mat-katalog .mat-grid{grid-template-columns:1fr}}

#mat-katalog .mat-card{
  display:flex;flex-direction:column; /* verhindert Überlappungen */
  padding:clamp(14px,2vw,18px);
  border-radius:var(--e3d-radius);
  background:var(--e3d-glass-bg);
  border:1px solid var(--e3d-glass-bd);
  backdrop-filter:blur(var(--e3d-glass-blur)) saturate(130%);
  -webkit-backdrop-filter:blur(var(--e3d-glass-blur)) saturate(130%);
  box-shadow:var(--e3d-shadow-2);
  transition:transform .16s ease, box-shadow .16s ease, border-color .16s ease
}
#mat-katalog .mat-card:hover{transform:translateY(-3px);box-shadow:0 26px 72px rgba(2,6,23,.16)}
#mat-katalog .mat-card__media{margin:0 0 10px;overflow:hidden;border-radius:var(--e3d-radius-img)}
#mat-katalog .mat-card__media img{display:block;width:100%;height:auto}
#mat-katalog .mat-card__top{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:6px}
#mat-katalog .mat-card h3{font-size:clamp(16px,2vw,20px);margin:0;line-height:1.25;color:var(--e3d-ink)}
#mat-katalog .mat-card__lead{margin:6px 0 8px;opacity:.95}
#mat-katalog .mat-card__bullets{margin:0;padding-left:18px}

/* ---------- 3) DETAILS / SPECS ---------- */
#mat-katalog .mat-details{margin-top:8px}
#mat-katalog .mat-details>summary{
  cursor:pointer;list-style:none;user-select:none;
  padding:10px 12px;border:1px solid var(--e3d-border);border-radius:12px;background:#fff;font-weight:700;
  display:flex;align-items:center;justify-content:space-between;gap:12px
}
#mat-katalog .mat-details>summary::-webkit-details-marker{display:none}
#mat-katalog .mat-details>summary::after{content:"▾";opacity:.7;transition:transform .2s ease}
#mat-katalog .mat-details[open]>summary{border-bottom-left-radius:0;border-bottom-right-radius:0}
#mat-katalog .mat-details[open]>summary::after{transform:rotate(-180deg)}
#mat-katalog .mat-details__body{
  border:1px solid var(--e3d-border);border-top:none;border-bottom-left-radius:12px;border-bottom-right-radius:12px;
  padding:12px;background:#fff;overflow:visible /* nichts abschneiden */
}

.mat-spec{
  width:100%;border-collapse:separate;border-spacing:0;
  border:1px solid var(--e3d-border);border-radius:10px;overflow:hidden;margin:6px 0 10px;
  font-size:14px;table-layout:auto;word-wrap:anywhere /* lange Begriffe umbrechen */
}
.mat-spec th,.mat-spec td{padding:9px 12px;text-align:left;vertical-align:top;background:#fff;border-bottom:1px solid #EEF2F7;line-height:1.35}
.mat-spec th{width:36%;color:#334155;background:#F8FAFC}
.mat-spec tr:last-child td{border-bottom:none}
@media (max-width:540px){.mat-spec th{width:42%}}

/* ---------- 4) ECONOMY / PRICE CHIPS ---------- */
.spec-meta{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.euros{font-weight:800;letter-spacing:1px}
.euros .off{opacity:.35}
.price-range{font-weight:700;background:#F1F5FF;border:1px solid #E0E7FF;border-radius:10px;padding:2px 8px}
.note{color:#64748B;font-size:.92em}

/* ---------- 5) Bilder immer rund in dieser Sektion ---------- */
:where(#mat-katalog) img{border-radius:var(--e3d-radius-img)!important}







/************************************************************
  MATERIAL-KATALOG • Laien-Skala (Ampel + Balken, 1–5)
  - Ampel-Gesamteindruck (.ampel)
  - Meters: Verarbeitung/Robustheit/UV/Preis (.rating-row)
  - Legende oben in der Sektion (.mat-legend)
************************************************************/

/* ---------- Legende oben in der Sektion ---------- */
#mat-katalog .mat-legend{
  display:flex; flex-wrap:wrap; gap:10px; align-items:center;
  margin: 8px 0 16px;
}
.legend-chip{
  display:inline-flex; align-items:center; gap:8px;
  padding:6px 10px; border-radius:999px; font-weight:700; font-size:12.5px;
  border:1px solid #E5E7EB; background:#fff; box-shadow: var(--e3d-shadow-1);
}
.legend-dot{ width:12px; height:12px; border-radius:999px; display:inline-block; }
.dot-red{ background:#ef4444 } .dot-amber{ background:#f59e0b } .dot-green{ background:#22c55e }

/* ---------- Ampel-Headline je Karte ---------- */
.ampel{
  display:flex; align-items:center; gap:8px; margin: 2px 0 6px;
}
.ampel .dot{ width:12px; height:12px; border-radius:999px; background:#e5e7eb; }
.ampel[data-state="bad"]   .dot:nth-child(1){ background:#ef4444 }
.ampel[data-state="ok"]    .dot:nth-child(-n+2){ background:#f59e0b }
.ampel[data-state="good"]  .dot{ background:#22c55e }
.ampel label{ font-weight:800; letter-spacing:.02em; color:#0b1226; margin-left:2px; }

/* ---------- Rating-Block (Tabelle bleibt, Block kommt davor) ---------- */
.rating-block{
  background:#fff; border:1px solid var(--e3d-border);
  border-radius:12px; box-shadow: var(--e3d-shadow-1);
  padding:12px; display:grid; gap:10px;
}

/* Zeile: Label + Meter + Wert */
.rating-row{
  display:grid; grid-template-columns: 140px 1fr max-content;
  align-items:center; gap:10px;
}
.rating-row .label{ font-weight:700; color:#0f172a }
.rating-row .value{ font-variant-numeric: tabular-nums; color:#0b1226; font-weight:700 }

/* Balken-Meter (1–5), CSS-only: Track + Farbfüllung (rot→gelb→grün) */
.meter{
  --max:5;                 /* NIE ändern */
  --v:3;                   /* 1..5 (pro Karte/Zeile setzen) */
  position:relative; height:12px; border-radius:999px; overflow:hidden;
  background:#eef2f7; box-shadow: inset 0 0 0 1px rgba(0,0,0,.04);
}
.meter::before{
  /* dezente Farbreferenz über ganze Breite */
  content:""; position:absolute; inset:0; opacity:.20;
  background: linear-gradient(90deg,#ef4444 0%, #f59e0b 50%, #22c55e 100%);
}
.meter::after{
  /* gefüllter Anteil entsprechend --v */
  content:""; position:absolute; inset:0; right:auto;
  width: calc((var(--v) / var(--max)) * 100%);
  background: linear-gradient(90deg,#ef4444 0%, #f59e0b 50%, #22c55e 100%);
}

/* Endkappen-Labels unterhalb der Meter (schwierig/einfach, teuer/günstig) */
.scale-hint{
  display:flex; justify-content:space-between; font-size:12px; color:#6b7280;
  margin-top:4px;
}

/* Mobile Tweaks */
@media (max-width:620px){
  .rating-row{ grid-template-columns: 1fr; gap:6px }
  .rating-row .value{ justify-self:end }
}

/* ---------- Optional: Preis-Badge in der Spec-Tabelle ---------- */
.price-range{ background:#ECFDF5; border:1px solid #BBF7D0; color:#065F46 }





/* ===========================================
   Farbchips: Swatch, transparente Tints, Effekte
   =========================================== */

/* Basis-Chip (habt ihr bereits, hier nur sicherstellen) */
#mat-farben .chip{
  display:inline-flex; align-items:center; gap:.5em;
  font-size:12.5px; font-weight:700; line-height:1;
  padding:8px 12px; border-radius:999px;
  border:1px solid #E0E7FF; background:#fff; color:#0F172A;
  box-shadow: var(--e3d-shadow-1);
  position:relative; overflow:hidden;
}

/* 1) Vollflächige Swatch (satte Farbe) */
#mat-farben .chip--swatch{
  /* Erwartet: --c als volle Farbe */
  background: var(--c);
  border-color: rgba(17,24,39,.14);
  color:#fff;
}
#mat-farben .chip--swatch.chip--darktext{ color:#0F172A }  /* z.B. bei sehr hellen Farben */
#mat-farben .chip--swatch.chip--outline{
  background:#fff; color: var(--c);
  border-color: currentColor;
}

/* 2) Transparente Tints (Glas-Look in der jeweiligen Farbe) */
#mat-farben .chip--tint{
  /* Fallback ohne color-mix: leichte Tönung mit Pseudo-Ebene */
  background:#fff; color:#0F172A; border-color: rgba(17,24,39,.14);
}
#mat-farben .chip--tint::before{
  content:""; position:absolute; inset:0; border-radius:inherit;
  background: var(--c); opacity:.22; pointer-events:none;
}

/* Modernere Darstellung mit color-mix (wenn verfügbar) */
@supports (background: color-mix(in srgb, red 50%, white)){
  #mat-farben .chip--tint{
    background: color-mix(in srgb, var(--c) 22%, white);
  }
  #mat-farben .chip--tint::before{ display:none; }
}

/* 3) Perlmutt / Seide mit dezentem Schimmer */
#mat-farben .chip--pearl{
  background:
    linear-gradient(135deg, rgba(255,255,255,.9), rgba(255,255,255,.5) 45%, rgba(255,255,255,.9)),
    linear-gradient(90deg, rgba(180,180,200,.25), rgba(160,180,220,.25));
  border-color: rgba(17,24,39,.14); color:#0F172A;
}
#mat-farben .chip--silk{
  background:
    linear-gradient(135deg, rgba(255,255,255,.8), rgba(255,255,255,.4)),
    color-mix(in srgb, var(--c, #9ca3af) 20%, white);
  border-color: rgba(17,24,39,.14);
  color:#0F172A;
}

/* 4) Kleine Helfer-Klassen */
#mat-farben .chip--lighttext{ color:#fff }
#mat-farben .chip--darktext{ color:#0F172A }





/* =========================================================
   /materialien • FARBEN, OBERFLÄCHEN & TOLERANZEN (clean)
   - Scoped auf #mat-farben
   - Einheitliche Chips (Swatch, Tint, Effekte, Outline)
   - Vollständige Farb-Utilities (.c-*)
   ========================================================= */

/* --- Fallback-Variablen (nutzt vorhandene, hat Defaults) --- */
:root{
  --e3d-radius: var(--e3d-radius, 20px);
  --e3d-glass-bg: var(--e3d-glass-bg, rgba(255,255,255,.60));
  --e3d-glass-bd: var(--e3d-glass-bd, rgba(255,255,255,.42));
  --e3d-glass-blur: var(--e3d-glass-blur, 12px);
  --e3d-shadow-1: var(--e3d-shadow-1, 0 10px 26px rgba(2,6,23,.08));
  --e3d-shadow-2: var(--e3d-shadow-2, 0 20px 60px rgba(2,6,23,.12));
}

/* --- Container / Grid --- */
#mat-farben .color-grid{
  display:flex; flex-wrap:wrap; gap:10px; padding:12px;
  border-radius:var(--e3d-radius);
  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));
  box-shadow:var(--e3d-shadow-2);
}
#mat-farben .hint{ margin:8px 0 16px; color:#6B7280; }

/* --- Basis-Chip --- */
#mat-farben .chip{
  position:relative; overflow:hidden;
  display:inline-flex; align-items:center; gap:.5em;
  padding:8px 12px; border-radius:999px; line-height:1;
  font-size:12.5px; font-weight:700;
  border:1px solid #E0E7FF; background:#fff; color:#0F172A;
  box-shadow:var(--e3d-shadow-1);
  white-space:nowrap;
}

/* --- 1) Swatch: volle Farbe --- */
#mat-farben .chip--swatch{
  /* Erwartet --c oder .c-* Utility; Fallback grau */
  background:var(--c, #9CA3AF);
  border-color:rgba(17,24,39,.14);
  color:#fff; text-shadow:0 1px 0 rgba(0,0,0,.15);
}
/* Lesbarkeit auf hellen Swatches */
#mat-farben .chip--swatch.is-light{ color:#0F172A; text-shadow:none }

/* --- 2) Tint: transparente/glasige Varianten --- */
#mat-farben .chip--tint{
  border-color:rgba(17,24,39,.14); color:#0F172A; background:#fff;
}
#mat-farben .chip--tint::before{
  content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none;
  background:var(--c, #9CA3AF); opacity:.22;
}
@supports (background: color-mix(in srgb, white 50%, black 50%)){
  #mat-farben .chip--tint{ background:color-mix(in srgb, var(--c, #9CA3AF) 22%, white) }
  #mat-farben .chip--tint::before{ display:none }
}

/* --- 3) Effekte --- */
#mat-farben .chip--pearl{
  background:
    linear-gradient(135deg, rgba(255,255,255,.9), rgba(255,255,255,.55) 45%, rgba(255,255,255,.9)),
    linear-gradient(90deg, rgba(180,180,200,.25), rgba(160,180,220,.25));
  border-color:rgba(17,24,39,.14); color:#0F172A;
}
#mat-farben .chip--silk{
  background:
    linear-gradient(135deg, rgba(255,255,255,.8), rgba(255,255,255,.4)),
    color-mix(in srgb, var(--c, #D1D5DB) 20%, white);
  border-color:rgba(17,24,39,.14); color:#0F172A;
}

/* --- 4) Outline (z. B. RAL-Näherung) --- */
#mat-farben .chip--outline{
  background:#fff; color:var(--c, #111827); border-color:currentColor; text-shadow:none;
}

/* --- 5) Vollständige Farb-Utilities (kein Chip bleibt leer) --- */
/* Standardfarben */
#mat-farben .c-black   { --c:#111827 }  /* schwarz   */
#mat-farben .c-white   { --c:#ffffff }  /* weiß      */
#mat-farben .c-gray    { --c:#9CA3AF }  /* grau      */
#mat-farben .c-blue    { --c:#2563EB }  /* blau      */
#mat-farben .c-royal   { --c:#1D4ED8 }  /* königsblau*/
#mat-farben .c-green   { --c:#10B981 }  /* grün      */
#mat-farben .c-red     { --c:#EF4444 }  /* rot       */
#mat-farben .c-yellow  { --c:#F59E0B }  /* gelb      */
#mat-farben .c-orange  { --c:#D97706 }  /* orange    */
#mat-farben .c-violet  { --c:#7C3AED }  /* violett   */
#mat-farben .c-teal    { --c:#14B8A6 }  /* türkis    */
#mat-farben .c-cyan    { --c:#0EA5E9 }  /* cyan      */
#mat-farben .c-gold    { --c:#EAB308 }  /* gold      */
#mat-farben .c-silver  { --c:#C0C6CF }  /* silber    */

/* Transparente Varianten (verwenden chip--tint) */
#mat-farben .c-clear   { --c:#9CA3AF }  /* transparent/klar */
#mat-farben .c-blue-t  { --c:#60A5FA }  /* transparent-blau */

/* Finishes / Effekte (als Swatch farblich angedeutet) */
#mat-farben .c-matt       { --c:#9AA0A6 }  /* matt */
#mat-farben .c-neon       { --c:#22D3EE }  /* neon */
#mat-farben .c-glow       { --c:#A7F3D0 }  /* Glow-in-the-Dark (mint) */
#mat-farben .c-woodstone  { --c:#C2B59B }  /* Wood/Stone-Fill */
#mat-farben .c-carbon     { --c:#111827 }  /* Carbon-Look */
#mat-farben .c-ral        { --c:#111827 }  /* RAL-Näherung (Outline nutzt Textfarbe) */

/* Automatischer Kontrast für helle Swatches */
#mat-farben .chip--swatch.c-white,
#mat-farben .chip--swatch.c-yellow,
#mat-farben .chip--swatch.c-silver{ color:#0F172A; text-shadow:none }

/* Barrierearme Hover-Fokusse (ohne Bewegung) */
@media (hover:hover){
  #mat-farben .chip:hover{ box-shadow:0 14px 34px rgba(2,6,23,.10) }
}
#mat-farben .chip:focus-visible{
  outline:none; box-shadow:0 0 0 3px rgba(37,99,235,.30), var(--e3d-shadow-1);
}


/* ===== FAQ • Akkordeon-Styles & Animation ===== */
#mat-faq .faq { display:grid; gap:10px; padding:12px; border-radius: var(--e3d-radius,20px);
  background: var(--e3d-glass-bg,rgba(255,255,255,.60)); border:1px solid var(--e3d-glass-bd,rgba(255,255,255,.42));
  backdrop-filter: blur(var(--e3d-glass-blur,12px)); -webkit-backdrop-filter: blur(var(--e3d-glass-blur,12px));
  box-shadow: var(--e3d-shadow-2,0 20px 60px rgba(2,6,23,.12));
}

#mat-faq details{
  background:#fff; border:1px solid var(--e3d-border,#E5E7EB); border-radius:12px;
  box-shadow: var(--e3d-shadow-1,0 10px 26px rgba(2,6,23,.08));
  overflow:hidden; /* für runde Ecken während der Animation */
}

#mat-faq summary{
  cursor:pointer; list-style:none; padding:12px 14px; font-weight:700;
  display:flex; align-items:center; justify-content:space-between; gap:12px;
}
#mat-faq summary::-webkit-details-marker{ display:none }
#mat-faq summary::after{
  content:"▾"; opacity:.7; transition: transform .22s ease;
}
#mat-faq details[open] > summary{ border-bottom:1px solid #EEF2F7; }
#mat-faq details[open] > summary::after{ transform: rotate(-180deg); }

/* Animierbarer Antwort-Container (alles außer summary) */
#mat-faq details > :not(summary){
  /* Wir animieren Höhe & Transparenz */
  height:0; opacity:0; overflow:hidden;
  transition: height .28s ease, opacity .22s ease;
  padding:0 14px; /* horizontaler Innenabstand bleibt */
}
#mat-faq details[open] > :not(summary){
  /* Höhe wird per JS dynamisch gesetzt, hier nur Sichtbarkeit */
  opacity:1; padding-bottom:12px; /* Unterkante erst sichtbar, wenn offen */
}
#mat-faq details p{ margin:0; }







/************** HERO • SAFE PATCH (nur Optik, keine Funktionen) **************/

/* 1) Full-bleed Wrapper bleibt – aber Layering wird fixiert */
#mat-hero{
  position: relative;
  width: 100vw; max-width: 100vw !important;
  left: 50%; margin-left: -50vw; margin-right: -50vw;
  --hero-min: clamp(720px, 64vh, 980px);
  --hero-y: 38%;
}

/* 2) Hintergrundträger (1./2. Ebene) – keine weißen Hintergründe mehr */
#mat-hero :is(.e-con, .elementor-container){
  min-height: var(--hero-min);
  display:flex !important; align-items:center !important; justify-content:center !important;
  padding: clamp(40px, 7vw, 120px) clamp(16px, 4vw, 24px);
  background-size: cover !important;
  background-position: 50% var(--hero-y) !important;
  background-repeat: no-repeat !important;
  position: relative;            /* nötig für Overlay-Layer */
  border-radius: 0 !important; overflow: visible !important;
  isolation: isolate;            /* saubere Ebenen für Overlay/Card */
  z-index: 0;
}

/* 3) Lesbarkeits-Overlay liegt ZWISCHEN Bild & Inhalt (z-index:0) */
#mat-hero :is(.e-con, .elementor-container)::before{
  content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
  background:
    radial-gradient(60% 80% at 50% 8%, rgba(11,18,38,.25), transparent 55%),
    linear-gradient(180deg, rgba(11,18,38,.40), rgba(11,18,38,.14) 55%, rgba(11,18,38,.42));
}

/* 4) Alle inneren Builder-Elemente im Hero transparent machen (nur hier!) */
#mat-hero :is(.e-con, .elementor-container, .elementor-column, .elementor-widget){
  background: transparent !important;
  box-shadow: none !important; border: 0 !important;
}

/* 5) Die glasige Card in der Mitte (sichtbar über dem Overlay) */
#mat-hero .mat-hero__card{
  position: relative; z-index: 1;           /* über dem ::before-Overlay */
  margin: 0 auto !important;
  max-width: min(980px, 92vw);
  text-align: center;
  padding: clamp(18px, 3vw, 34px);

  /* Glas-Look – robust mit WebKit-Fallback */
  background: rgba(255,255,255,.58);
  border: 1px solid rgba(255,255,255,.42);
  backdrop-filter: blur(12px) saturate(130%);
  -webkit-backdrop-filter: blur(12px) saturate(130%);
  border-radius: 20px;
  box-shadow: 0 20px 60px rgba(2,6,23,.12);
}

/* 6) Typo & CTAs im Hero (Farben bleiben CI) */
#mat-hero h1{ margin:.2em 0 .25em; font-size: clamp(28px,4.2vw,48px); line-height:1.1; color:#0b1226; }
#mat-hero .lead{ margin:0 0 10px; opacity:.95 }
#mat-hero .mat-hero__ctas{ display:flex; gap:12px; justify-content:center; flex-wrap:wrap; margin:8px 0 10px }
#mat-hero .mat-hero__nav{ display:flex; flex-wrap:wrap; gap:8px; justify-content:center; margin-top:6px }

/* 7) Chips im Hero (unverändert, aber etwas kräftigerer Fokus) */
#mat-hero .chip{
  display:inline-flex; align-items:center; gap:.4em; font-weight:700;
  padding:6px 10px; border-radius:999px; border:1px solid #E0E7FF;
  background:#EEF2FF; color:#0F172A; text-decoration:none;
  transition: transform .06s ease, box-shadow .25s ease, background-color .25s ease;
}
#mat-hero .chip:hover, #mat-hero .chip:focus-visible{
  transform: translateY(-1px);
  background:#E6ECFF;
  box-shadow: 0 0 0 3px rgba(37,99,235,.30), 0 14px 34px rgba(2,6,23,.10);
  outline: none;
}

/* 8) Mobile: Buttons stapeln */
@media (max-width:540px){
  #mat-hero .e3d-btn{ width:100%; text-align:center }
}/* End custom CSS */