/* BG-BAU-Förderung für Mafell-Werkzeuge - Kampagnen-CSS, eingegrenzt auf .bgb-wrap
   Erzeugt aus 03 KI/Mafell-Herstellerseite/bg-bau.html @ 05d1fa2 (ADR 25: Quelle-first).
   Kein globaler Reset, keine nackten html/body-Selektoren, keine externen Requests. */

/* --- Neutralisierung global geladener Regeln -------------------------------
   Das System laedt auf jeder Seite bootstrap.min.css, main.min.css, navbar,
   elementor-frontend, animate und font-awesome. Deren Element- und Klassenregeln
   greifen ueberall dort in den Kampagnenbereich hinein, wo die Seite die jeweilige
   Eigenschaft nicht selbst setzt - das Eingrenzen allein schuetzt davor nicht.
   Uebernommen aus der Mafell-Partnerseite (dort per Knotenvergleich gemessen). */

/* main.min.css setzt h1..h6 auf Versalien und Grau */
.bgb-wrap h1,.bgb-wrap h2,.bgb-wrap h3,.bgb-wrap h4,.bgb-wrap h5,.bgb-wrap h6{text-transform:none;color:inherit}
/* main.min.css setzt zusaetzlich h1{300}, h3{400} und h1..h6{500}. Die Quellen
   verlassen sich bei den Ueberschriften auf den Browser-Standard (bold) - ohne
   diese Zeile rendern H1 und H3 live duenner als gestaltet. Gemessen im Vergleich
   Quelle <-> Lieferung: h1 700 -> 300, h3 700 -> 400. */
.bgb-wrap h1,.bgb-wrap h2,.bgb-wrap h3,.bgb-wrap h4,.bgb-wrap h5,.bgb-wrap h6{font-weight:bold}
/* main.min.css setzt "body, td, p{font-size:18px}" - td wird damit DIREKT
   angesprochen und ignoriert die font-size der eigenen table-Regel. Gemessen:
   15,2px in der Quelle gegen 18px in der Lieferung. */
.bgb-wrap td,.bgb-wrap th{font-size:inherit}
/* Zeilenhoehe der Ueberschriften: das System setzt eine eigene, deutlich groessere
   (h3 gemessen 54px statt 27,6px) - dadurch reisst der Abstand zwischen einer
   Kachelueberschrift und ihrem Text auf. Die Quellen erben die Zeilenhoehe vom
   Textkoerper; h1/h2 setzen ihre eigene und gewinnen ueber die Regel darunter. */
.bgb-wrap h1,.bgb-wrap h2,.bgb-wrap h3,.bgb-wrap h4,.bgb-wrap h5,.bgb-wrap h6{line-height:inherit}
/* bootstrap: .lead{line-height:1.4} staucht den Einleitungstext (24,2px statt 27,6px) */
.bgb-wrap .lead{line-height:inherit}
/* bootstrap: blockquote bekommt Rahmen, Innenabstand und eigene Schriftgroesse */
.bgb-wrap blockquote{border:0;padding:0;margin:0;font-size:inherit}
/* bootstrap: .mark/mark faerbt den Hintergrund gelb (#fcf8e3) */
.bgb-wrap .mark,.bgb-wrap mark{background:transparent;padding:0;color:inherit}
/* bootstrap: .btn/.badge zentrieren den Text und setzen eigene Groessen */
.bgb-wrap .btn,.bgb-wrap .badge{text-align:inherit}
/* bootstrap: .btn bekommt "border:1px solid transparent" - unsichtbar, macht den
   Knopf aber 2px groesser als in der Quelle. Gemessen im Knotenvergleich. */
.bgb-wrap .btn{border:0}
.bgb-wrap button{color:inherit}
/* bootstrap: .lead setzt eigene Schriftgroesse und font-weight:300 */
.bgb-wrap .lead{font-weight:inherit}
/* bootstrap: .table/table bekommt eigene Raender und Abstaende */
.bgb-wrap table{background:transparent}
/* Schriftstaerke zurueckholen: main.min.css setzt global body{font-weight:300}.
   Die Quellen arbeiten mit dem Browser-Standard 400 und setzen selbst nie
   font-weight - ohne diese Zeile rendert die GESAMTE Seite duenner. */
.bgb-wrap{font-weight:400}

.bgb-wrap{--rot:#d51030;--rot-tief:#b30d27;--anthrazit:#15181c;--txt:#20242a;--muted:#5f6771;--line:#e4e7ea;--hell:#f5f7f8}
.bgb-wrap *{box-sizing:border-box;margin:0;padding:0}
.bgb-wrap{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;color:var(--txt);line-height:1.6;background:#fff;-webkit-font-smoothing:antialiased}
.bgb-wrap img{max-width:100%;height:auto;display:block}
.bgb-wrap a{color:inherit}
.bgb-wrap .wrap{max-width:1080px;margin:0 auto;padding:0 24px}
.bgb-wrap .back{display:inline-flex;align-items:center;gap:8px;color:#fff;text-decoration:none;font-weight:600;font-size:.95rem;border:1px solid rgba(255,255,255,.28);border-radius:9px;padding:9px 15px}
.bgb-wrap .back svg{width:17px;height:17px}
.bgb-wrap .back:hover{background:rgba(255,255,255,.1)}
.bgb-wrap .hero{background:radial-gradient(120% 120% at 72% 18%,#141922 0%,#0a0d12 70%);color:#fff;padding:52px 0 56px;overflow:hidden}
.bgb-wrap .hero .wrap{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);gap:30px;align-items:center}
.bgb-wrap .eyebrow{font-size:.72rem;font-weight:800;letter-spacing:.13em;text-transform:uppercase;color:var(--rot);display:inline-flex;align-items:center;gap:10px}
.bgb-wrap .eyebrow::before{content:"";width:26px;height:2px;background:var(--rot)}
.bgb-wrap .hero h1{font-size:clamp(1.9rem,4.2vw,2.9rem);line-height:1.08;margin:14px 0 16px;letter-spacing:-.02em}
.bgb-wrap .hero p{color:rgba(255,255,255,.82);font-size:1.08rem}
.bgb-wrap .hero .bb-slider{position:relative;display:grid;place-items:center;min-height:340px}
.bgb-wrap .hero .bbimg{grid-area:1/1;max-height:340px;width:auto;margin:0 auto;filter:drop-shadow(0 18px 40px rgba(0,0,0,.45))}
.bgb-wrap .hero .bb-slide{opacity:0;transition:opacity .9s ease}
.bgb-wrap .hero .bb-slide.is-active{opacity:1}
.bgb-wrap .hero .bb-dots{display:flex;gap:7px;justify-content:center;margin-top:14px}
.bgb-wrap .hero .bb-dots button{width:8px;height:8px;border-radius:50%;border:0;padding:0;background:rgba(255,255,255,.3);cursor:pointer;transition:background .2s}
.bgb-wrap .hero .bb-dots button.on{background:var(--rot)}
.bgb-wrap .sec{padding:52px 0}
.bgb-wrap .sec.grau{background:var(--hell)}
.bgb-wrap h2{font-size:clamp(1.5rem,3vw,2rem);line-height:1.15;letter-spacing:-.01em;margin:16px 0 18px}
.bgb-wrap .lead{font-size:1.08rem;color:var(--muted);max-width:780px;margin-bottom:10px}
.bgb-wrap table{width:100%;border-collapse:collapse;margin-top:22px;font-size:.95rem;background:#fff;border:1px solid var(--line);border-radius:12px;overflow:hidden}
.bgb-wrap th,.bgb-wrap td{text-align:left;padding:14px 18px;border-bottom:1px solid var(--line);vertical-align:top}
.bgb-wrap th{background:var(--anthrazit);color:#fff;font-size:.78rem;letter-spacing:.05em;text-transform:uppercase}
.bgb-wrap tr:last-child td{border-bottom:0}
.bgb-wrap td .praemie{font-family:'Arial Black',Arial,sans-serif;color:var(--rot);white-space:nowrap}
.bgb-wrap .steps{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:26px}
.bgb-wrap .step{background:#fff;border:1px solid var(--line);border-radius:14px;padding:24px}
.bgb-wrap .step .n{width:34px;height:34px;border-radius:50%;background:var(--rot);color:#fff;font-weight:800;display:grid;place-items:center;margin-bottom:12px}
.bgb-wrap .step b{display:block;margin-bottom:4px}
.bgb-wrap .step p{font-size:.92rem;color:var(--muted);margin:0}
.bgb-wrap .note{font-size:.82rem;color:var(--muted);line-height:1.55;margin-top:18px;padding:16px 18px;background:var(--hell);border-left:3px solid var(--rot);border-radius:0 8px 8px 0}
.bgb-wrap .btn{display:inline-flex;align-items:center;gap:9px;background:var(--rot);color:#fff;font-weight:700;padding:15px 26px;border-radius:11px;text-decoration:none;transition:background .2s}
.bgb-wrap .btn:hover{background:var(--rot-tief)}
.bgb-wrap .btn svg{width:19px;height:19px;flex:0 0 auto}
@media(max-width:420px){.bgb-wrap .btn{max-width:100%;padding:14px 18px;font-size:.95rem}}
.bgb-wrap .cta{background:var(--anthrazit);color:#fff;border-radius:18px;padding:36px 40px;margin-top:12px;display:flex;align-items:center;justify-content:space-between;gap:26px;flex-wrap:wrap}
.bgb-wrap .cta b{font-size:1.3rem;display:block}
.bgb-wrap .cta p{color:rgba(255,255,255,.8);margin-top:6px}
@media(max-width:820px){.bgb-wrap .hero .wrap{grid-template-columns:1fr}
.bgb-wrap .hero .bbimg{max-height:280px}
.bgb-wrap .steps{grid-template-columns:1fr}
.bgb-wrap table{font-size:.88rem}}
@media(max-width:900px){.bgb-wrap #foerdertiles{grid-template-columns:repeat(3,minmax(0,1fr))!important}}
@media(max-width:760px){.bgb-wrap .xref{grid-template-columns:1fr!important}}
@media(max-width:620px){.bgb-wrap #foerdertiles{grid-template-columns:repeat(2,minmax(0,1fr))!important}}
.bgb-wrap .ft:hover{box-shadow:0 12px 28px rgba(15,18,22,.14);transform:translateY(-3px)}
@media(max-width:820px){.bgb-wrap .fk-3col{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:26px!important}}
@media(max-width:560px){.bgb-wrap .fk-3col{grid-template-columns:1fr!important}}
@media(max-width:760px){.bgb-wrap #fokus .fk-2col{grid-template-columns:1fr!important}}
.bgb-wrap #fokus .lead{color:rgba(255,255,255,.82)}
.bgb-wrap #fokus h2,.bgb-wrap #fokus h3{color:#fff}
@media(max-width:760px){.bgb-wrap #testtiles{grid-template-columns:repeat(2,minmax(0,1fr))!important}}
@media(max-width:420px){.bgb-wrap #testtiles{grid-template-columns:1fr!important}}
@media(max-width:720px){.bgb-wrap #tutorials .tut-grid{grid-template-columns:1fr!important}}
@media(max-width:900px){.bgb-wrap #bgshopgrid{grid-template-columns:repeat(3,minmax(0,1fr))!important}}
@media(max-width:620px){.bgb-wrap #bgshopgrid{grid-template-columns:repeat(2,minmax(0,1fr))!important}}
.bgb-wrap .shopcard:hover{box-shadow:0 16px 34px rgba(15,18,22,.15);transform:translateY(-3px);border-color:rgba(213,16,48,.45)}