/* ===================================================
   MALISAN GmbH – Stylesheet
   Farben aus Logo: Blau #315D9A | Orange #F69139
   =================================================== */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600&display=swap');

:root {
  --blue:        #315D9A;
  --blue-dark:   #1A3660;
  --blue-mid:    #264880;
  --blue-light:  #EEF3FA;
  --blue-border: #C5D5EA;
  --orange:      #F69139;
  --orange-dark: #C4701C;
  --orange-light:#FEF3E8;
  --orange-border:#F0C99A;
  --white:       #FFFFFF;
  --bg:          #F7FAFD;
  --text:        #1C2B3A;
  --muted:       #5A6472;
  --border:      #DDE6F0;
  --font: 'Inter', system-ui, -apple-system, sans-serif;
  --r-sm: 6px;
  --r-md: 10px;
  --r-lg: 16px;
  --max: 1060px;
}

/* ── Reset ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body { font-family: var(--font); color: var(--text); background: var(--white); font-size: 16px; line-height: 1.6; -webkit-font-smoothing: antialiased; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; }
button { font-family: var(--font); cursor: pointer; border: none; }

/* ── Container ── */
.container { max-width: var(--max); margin: 0 auto; padding: 0 24px; }

/* ── Typography ── */
h1 { font-size: clamp(26px, 4vw, 38px); font-weight: 500; line-height: 1.18; letter-spacing: -0.03em; }
h2 { font-size: clamp(22px, 3vw, 28px); font-weight: 500; line-height: 1.25; letter-spacing: -0.02em; }
h3 { font-size: 18px; font-weight: 500; line-height: 1.35; }
h4 { font-size: 15px; font-weight: 500; }
p  { line-height: 1.7; color: var(--muted); }

/* ── Buttons ── */
.btn { display: inline-flex; align-items: center; gap: 8px; padding: 12px 24px; border-radius: var(--r-md); font-size: 15px; font-weight: 500; transition: opacity .15s, transform .1s; }
.btn:hover { opacity: .88; }
.btn:active { transform: scale(.98); }
.btn-orange { background: var(--orange); color: #fff; }
.btn-outline-white { background: transparent; color: rgba(255,255,255,.85); border: 1px solid rgba(255,255,255,.3); }
.btn-outline-blue  { background: transparent; color: var(--blue); border: 1px solid var(--blue-border); }
.btn-blue  { background: var(--blue); color: #fff; }
.btn-sm { padding: 9px 18px; font-size: 14px; }

/* ── Labels / Eyebrows ── */
.eyebrow { display: inline-block; font-size: 11px; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; color: var(--orange); background: var(--orange-light); border: 1px solid var(--orange-border); padding: 4px 12px; border-radius: 20px; margin-bottom: 14px; }
.eyebrow-blue { color: var(--blue); background: var(--blue-light); border-color: var(--blue-border); }
.section-label { font-size: 11px; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; color: var(--blue); margin-bottom: 10px; }

/* ── Sections ── */
.section      { padding: 64px 0; }
.section-sm   { padding: 40px 0; }
.section-blue { background: var(--blue-light); border-top: 1px solid var(--blue-border); border-bottom: 1px solid var(--blue-border); }
.section-dark { background: var(--blue-dark); color: #fff; }
.section-dark h2, .section-dark h3 { color: #fff; }
.section-dark p { color: rgba(255,255,255,.65); }

/* ── Feature strip ── */
.feature-strip { background: var(--blue); padding: 11px 0; }
.feature-strip .container { display: flex; gap: 28px; align-items: center; flex-wrap: wrap; }
.feat-item { display: flex; align-items: center; gap: 7px; font-size: 13px; color: rgba(255,255,255,.85); }
.feat-item svg { color: var(--orange); flex-shrink: 0; }

/* ── Cards ── */
.card { background: var(--white); border: 1px solid var(--border); border-radius: var(--r-lg); padding: 24px; }
.card-blue-top { border-top: 3px solid var(--blue); }
.card-orange-top { border-top: 3px solid var(--orange); }

/* ── Check grid ── */
.check-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 1px; background: var(--border); border: 1px solid var(--border); border-radius: var(--r-lg); overflow: hidden; }
.check-cell { background: var(--white); padding: 22px; }
.check-icon { width: 32px; height: 32px; background: var(--blue-light); border-radius: 8px; display: flex; align-items: center; justify-content: center; color: var(--blue); margin-bottom: 12px; }
.check-icon svg { width: 18px; height: 18px; stroke-width: 1.8; }
.check-cell h4 { margin-bottom: 6px; }
.check-cell p { font-size: 13px; }

/* ── Steps ── */
.steps-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; }
.step-card { background: var(--white); border: 1px solid var(--border); border-top: 2px solid var(--blue); border-radius: var(--r-lg); padding: 20px; display: flex; gap: 16px; }
.step-num { font-size: 32px; font-weight: 500; color: var(--blue); opacity: .2; line-height: 1; flex-shrink: 0; width: 36px; }
.step-card h4 { margin-bottom: 5px; }
.step-card p { font-size: 13px; }

/* ── List deliverables ── */
.deliv-list { border: 1px solid var(--border); border-radius: var(--r-lg); overflow: hidden; }
.deliv-row  { display: flex; align-items: flex-start; gap: 14px; padding: 16px 20px; border-bottom: 1px solid var(--border); background: var(--white); }
.deliv-row:last-child { border-bottom: none; }
.deliv-row svg { color: var(--orange); flex-shrink: 0; margin-top: 2px; }
.deliv-row h4  { margin-bottom: 2px; }
.deliv-row p   { font-size: 13px; }

/* ── Warning box ── */
.warn-box { background: var(--orange-light); border-left: 3px solid var(--orange); border-radius: 0 var(--r-md) var(--r-md) 0; padding: 18px 22px; display: flex; gap: 16px; align-items: flex-start; }
.warn-box svg { color: var(--orange-dark); flex-shrink: 0; margin-top: 2px; }
.warn-box h4 { color: #7A3A0A; margin-bottom: 5px; }
.warn-box p  { color: #8C4A1A; font-size: 13px; }

/* ── Info box ── */
.info-box { background: var(--blue-light); border-left: 3px solid var(--blue); border-radius: 0 var(--r-md) var(--r-md) 0; padding: 18px 22px; }
.info-box h4 { color: var(--blue-dark); margin-bottom: 5px; }
.info-box p  { font-size: 13px; color: #2a4a7a; }

/* ── Pricing card ── */
.pricing-card { border: 1px solid var(--border); border-radius: var(--r-lg); overflow: hidden; }
.pricing-head { background: var(--blue-dark); padding: 28px; }
.pricing-head .badge { display: inline-block; background: rgba(246,145,57,.2); color: var(--orange); font-size: 12px; font-weight: 500; padding: 3px 12px; border-radius: 20px; margin-bottom: 14px; letter-spacing: .03em; }
.pricing-head h3 { color: #fff; margin-bottom: 6px; }
.pricing-head .desc { color: rgba(255,255,255,.6); font-size: 14px; margin-bottom: 20px; }
.price-amount { font-size: 42px; font-weight: 500; color: #fff; letter-spacing: -.04em; line-height: 1; }
.price-amount span { font-size: 16px; font-weight: 400; color: rgba(255,255,255,.5); margin-left: 6px; }
.price-note { font-size: 12px; color: rgba(255,255,255,.4); margin-top: 6px; }
.pricing-body { background: var(--white); padding: 24px 28px; }
.price-includes { display: flex; flex-direction: column; gap: 10px; margin-bottom: 22px; }
.pi { display: flex; align-items: flex-start; gap: 10px; font-size: 14px; color: var(--muted); }
.pi svg { color: var(--orange); flex-shrink: 0; margin-top: 2px; }
.pi-note { text-align: center; font-size: 12px; color: var(--muted); margin-top: 10px; }

/* ── FAQ ── */
.faq-list { border: 1px solid var(--border); border-radius: var(--r-lg); overflow: hidden; }
.faq-item { border-bottom: 1px solid var(--border); background: var(--white); }
.faq-item:last-child { border-bottom: none; }
.faq-q { display: flex; align-items: flex-start; gap: 10px; padding: 18px 20px; cursor: pointer; }
.faq-q .q-badge { font-size: 10px; font-weight: 500; color: var(--blue); background: var(--blue-light); padding: 3px 7px; border-radius: 5px; flex-shrink: 0; margin-top: 2px; letter-spacing: .03em; }
.faq-q span { font-size: 15px; font-weight: 500; color: var(--text); }
.faq-a { padding: 0 20px 18px 40px; font-size: 14px; color: var(--muted); line-height: 1.7; }

/* ── Cross-sell strip ── */
.cross-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 14px; }
.cross-card { background: var(--white); border: 1px solid var(--blue-border); border-top: 2px solid var(--blue); border-radius: var(--r-lg); padding: 18px; }
.cross-card h4 { margin-bottom: 6px; }
.cross-card p  { font-size: 13px; margin-bottom: 12px; }
.cross-card a  { font-size: 13px; color: var(--blue); font-weight: 500; display: flex; align-items: center; gap: 4px; }

/* ── Services overview (homepage) ── */
.services-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 20px; }
.service-card { background: var(--white); border: 1px solid var(--border); border-radius: var(--r-lg); padding: 28px 24px; display: flex; flex-direction: column; gap: 14px; transition: border-color .2s; }
.service-card:hover { border-color: var(--blue); }
.service-icon { width: 48px; height: 48px; background: var(--blue-light); border-radius: 12px; display: flex; align-items: center; justify-content: center; color: var(--blue); }
.service-icon svg { width: 24px; height: 24px; stroke-width: 1.6; }
.service-card h3 { margin-bottom: 4px; }
.service-card p { font-size: 14px; }
.service-card .card-link { margin-top: auto; font-size: 14px; color: var(--blue); font-weight: 500; display: flex; align-items: center; gap: 5px; }

/* ── Benefits (why us) ── */
.benefits-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 20px; }
.benefit { display: flex; flex-direction: column; gap: 8px; }
.benefit-num { font-size: 36px; font-weight: 500; color: var(--orange); letter-spacing: -.03em; line-height: 1; }
.benefit h4 { font-size: 15px; }
.benefit p  { font-size: 13px; }

/* ── Trust bar ── */
.trust-bar { display: flex; gap: 0; border: 1px solid var(--border); border-radius: var(--r-lg); overflow: hidden; margin-top: 40px; }
.trust-item { flex: 1; padding: 16px 20px; border-right: 1px solid var(--border); }
.trust-item:last-child { border-right: none; }
.trust-val { font-size: 17px; font-weight: 500; color: var(--blue); margin-bottom: 2px; }
.trust-lbl { font-size: 12px; color: var(--muted); }

/* ── Contact form ── */
.form-group { display: flex; flex-direction: column; gap: 6px; margin-bottom: 16px; }
.form-group label { font-size: 14px; font-weight: 500; color: var(--text); }
.form-group input,
.form-group textarea,
.form-group select { font-family: var(--font); font-size: 15px; color: var(--text); background: var(--white); border: 1px solid var(--border); border-radius: var(--r-md); padding: 11px 14px; width: 100%; outline: none; transition: border-color .15s; }
.form-group input:focus,
.form-group textarea:focus,
.form-group select:focus { border-color: var(--blue); box-shadow: 0 0 0 3px rgba(49,93,154,.12); }
.form-group textarea { resize: vertical; min-height: 120px; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.form-note { font-size: 12px; color: var(--muted); margin-top: 10px; }

/* ── Contact info cards ── */
.contact-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.contact-card { background: var(--white); border: 1px solid var(--border); border-top: 2px solid var(--blue); border-radius: var(--r-lg); padding: 22px; }
.contact-card h4 { margin-bottom: 12px; color: var(--blue); }
.contact-row { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; font-size: 14px; }
.contact-row svg { color: var(--blue); flex-shrink: 0; }
.contact-row a { color: var(--text); font-weight: 500; }
.contact-row a:hover { color: var(--blue); }

/* ── Material cards (Einblasdämmung) ── */
.material-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 20px; }
.material-card { background: var(--white); border: 1px solid var(--border); border-radius: var(--r-lg); padding: 24px; }
.material-card h3 { margin-bottom: 8px; }
.material-card p { font-size: 14px; margin-bottom: 14px; }
.material-card ul { display: flex; flex-direction: column; gap: 6px; }
.material-card li { font-size: 13px; color: var(--muted); display: flex; gap: 8px; align-items: flex-start; }
.material-card li::before { content: '✓'; color: var(--orange); font-weight: 500; flex-shrink: 0; }

/* ── Process steps (numbered list) ── */
.process-list { display: flex; flex-direction: column; gap: 0; }
.process-item { display: flex; gap: 20px; padding: 20px 0; border-bottom: 1px solid var(--border); }
.process-item:last-child { border-bottom: none; }
.process-n { width: 36px; height: 36px; background: var(--blue); color: #fff; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 14px; font-weight: 500; flex-shrink: 0; margin-top: 2px; }
.process-item h4 { margin-bottom: 4px; }
.process-item p { font-size: 14px; }

/* ── Team / Über uns ── */
.team-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 24px; }
.team-card { background: var(--white); border: 1px solid var(--border); border-radius: var(--r-lg); overflow: hidden; }
.team-photo { background: var(--blue-light); height: 200px; display: flex; align-items: center; justify-content: center; }
.team-photo-placeholder { width: 80px; height: 80px; border-radius: 50%; background: var(--blue); display: flex; align-items: center; justify-content: center; color: #fff; font-size: 28px; font-weight: 500; }
.team-info { padding: 20px; }
.team-info h3 { margin-bottom: 4px; }
.team-info .role { font-size: 13px; color: var(--orange); font-weight: 500; margin-bottom: 10px; }
.team-info p { font-size: 13px; }
.cert-badges { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.cert-badge { background: var(--blue-light); color: var(--blue); font-size: 11px; font-weight: 500; padding: 3px 10px; border-radius: 20px; }

/* ─── TOPBAR ─── */
.topbar { background: var(--blue-dark); padding: 8px 0; }
.topbar .container { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 8px; }
.topbar-item { display: flex; align-items: center; gap: 6px; color: rgba(255,255,255,.7); font-size: 12.5px; }
.topbar-item svg { width: 14px; height: 14px; }
.topbar-item a { color: rgba(255,255,255,.85); }
.topbar-item a:hover { color: #fff; }
.topbar-sep { color: rgba(255,255,255,.25); margin: 0 4px; }

/* ─── HEADER / NAV ─── */
.site-header { background: var(--white); border-bottom: 1px solid var(--border); position: sticky; top: 0; z-index: 100; }
.nav-inner { display: flex; align-items: center; justify-content: space-between; height: 64px; }
.logo-link { display: flex; align-items: center; gap: 10px; }
.logo-img { height: 40px; width: auto; }
.logo-text { display: flex; flex-direction: column; gap: 0; }
.logo-text .name { font-size: 17px; font-weight: 600; color: var(--text); letter-spacing: -.01em; }
.logo-text .sub  { font-size: 10px; color: var(--muted); letter-spacing: .04em; text-transform: uppercase; }
.nav-links { display: flex; align-items: center; gap: 6px; }
.nav-links a { font-size: 14px; color: var(--muted); padding: 6px 10px; border-radius: var(--r-sm); transition: background .15s, color .15s; }
.nav-links a:hover { background: var(--blue-light); color: var(--blue); }
.nav-links a.active { color: var(--blue); font-weight: 500; }
.nav-links a.nav-cta { background: var(--orange); color: #fff; padding: 8px 16px; font-weight: 500; margin-left: 6px; }
.nav-links a.nav-cta:hover { background: var(--orange-dark); }

/* Hamburger */
.hamburger { display: none; flex-direction: column; gap: 5px; background: none; padding: 4px; }
.hamburger span { display: block; width: 22px; height: 2px; background: var(--text); border-radius: 2px; transition: .2s; }
.hamburger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.hamburger.open span:nth-child(2) { opacity: 0; }
.hamburger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
.mobile-menu { display: none; background: var(--white); border-top: 1px solid var(--border); }
.mobile-menu.open { display: block; }
.mobile-menu a { display: block; padding: 14px 24px; font-size: 15px; color: var(--text); border-bottom: 1px solid var(--border); }
.mobile-menu a:last-child { border-bottom: none; }
.mobile-menu a.nav-cta { background: var(--orange); color: #fff; font-weight: 500; border-bottom: none; margin: 16px; border-radius: var(--r-md); text-align: center; }

/* ─── HERO ─── */
.hero { background: var(--blue-dark); padding: 64px 0 56px; }
.hero-inner { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center; }
.hero-text .eyebrow { background: rgba(246,145,57,.18); border-color: rgba(246,145,57,.4); color: var(--orange); }
.hero-text h1 { color: #fff; margin-bottom: 16px; }
.hero-text h1 em { font-style: normal; color: var(--orange); }
.hero-text p  { color: rgba(255,255,255,.68); font-size: 16px; margin-bottom: 28px; }
.hero-btns { display: flex; gap: 12px; flex-wrap: wrap; }
.hero-card { background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.14); border-radius: var(--r-lg); padding: 24px; }
.hero-card-title { font-size: 14px; font-weight: 500; color: rgba(255,255,255,.6); margin-bottom: 16px; text-transform: uppercase; letter-spacing: .06em; font-size: 11px; }
.hero-list { display: flex; flex-direction: column; gap: 12px; }
.hero-list-item { display: flex; align-items: flex-start; gap: 12px; }
.hero-list-item svg { color: var(--orange); flex-shrink: 0; margin-top: 2px; }
.hero-list-item .hl-title { font-size: 14px; font-weight: 500; color: #fff; margin-bottom: 2px; }
.hero-list-item .hl-sub   { font-size: 13px; color: rgba(255,255,255,.55); }

/* Full-width hero (subpages) */
.hero-full { background: var(--blue-dark); padding: 52px 0; }
.hero-full .eyebrow { background: rgba(246,145,57,.18); border-color: rgba(246,145,57,.4); color: var(--orange); }
.hero-full h1 { color: #fff; max-width: 600px; margin-bottom: 14px; }
.hero-full .lead { color: rgba(255,255,255,.68); font-size: 16px; max-width: 560px; margin-bottom: 28px; }
.hero-full .trust-bar { margin-top: 36px; background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.12); }
.hero-full .trust-item { border-color: rgba(255,255,255,.1); }
.hero-full .trust-val   { color: #fff; }
.hero-full .trust-lbl   { color: rgba(255,255,255,.5); }

/* ─── FOOTER ─── */
.site-footer { background: var(--blue-dark); color: rgba(255,255,255,.7); }
.footer-main { padding: 56px 0 40px; display: grid; grid-template-columns: 2fr 1fr 1fr 1.5fr; gap: 40px; }
.footer-brand .logo-img { height: 36px; margin-bottom: 14px; }
.footer-brand p { font-size: 13px; line-height: 1.7; max-width: 260px; }
.footer-col h5 { font-size: 12px; font-weight: 500; letter-spacing: .07em; text-transform: uppercase; color: rgba(255,255,255,.45); margin-bottom: 14px; }
.footer-col a { display: block; font-size: 14px; color: rgba(255,255,255,.65); margin-bottom: 8px; transition: color .15s; }
.footer-col a:hover { color: #fff; }
.footer-address { font-size: 13px; line-height: 1.8; }
.footer-address strong { color: #fff; display: block; margin-bottom: 2px; }
.footer-bottom { border-top: 1px solid rgba(255,255,255,.1); padding: 18px 0; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 12px; }
.footer-bottom p { font-size: 12px; }
.footer-bottom a { color: rgba(255,255,255,.55); font-size: 12px; }
.footer-bottom a:hover { color: #fff; }
.wa-float { position: fixed; bottom: 24px; right: 24px; z-index: 200; width: 52px; height: 52px; background: #25D366; border-radius: 50%; display: flex; align-items: center; justify-content: center; box-shadow: 0 4px 16px rgba(0,0,0,.2); transition: transform .15s; }
.wa-float:hover { transform: scale(1.07); }
.wa-float svg { width: 28px; height: 28px; color: #fff; }

/* ─── RESPONSIVE ─── */

/* Nav: tighten spacing on medium screens so all items fit */
@media (min-width: 861px) and (max-width: 1080px) {
  .nav-links { gap: 2px; }
  .nav-links a { font-size: 13px; padding: 6px 7px; }
  .nav-links a.nav-cta { padding: 8px 13px; }
}

@media (max-width: 860px) {
  .hero-inner { grid-template-columns: 1fr; }
  .hero-card { display: none; }
  .footer-main { grid-template-columns: 1fr 1fr; }
  .form-row { grid-template-columns: 1fr; }
  .contact-cards { grid-template-columns: 1fr; }
}

@media (max-width: 640px) {
  h1 { font-size: 26px; }
  h2 { font-size: 22px; }
  .section { padding: 48px 0; }
  .nav-links { display: none; }
  .hamburger { display: flex; }
  .trust-bar { flex-direction: column; }
  .trust-item { border-right: none; border-bottom: 1px solid var(--border); }
  .trust-item:last-child { border-bottom: none; }
  .hero-full .trust-bar { border-color: rgba(255,255,255,.12); }
  .footer-main { grid-template-columns: 1fr; gap: 28px; }
  .steps-grid { grid-template-columns: 1fr; }
  .benefits-grid { grid-template-columns: 1fr 1fr; }
  .topbar .container { justify-content: center; }
  .topbar-item:not(:first-child) { display: none; }
}

/* ─── Materialfotos ─── */
.material-photo { width:100%; aspect-ratio:4/3; overflow:hidden; border-radius:var(--r-md) var(--r-md) 0 0; background:var(--blue-light); }
.material-photo img { width:100%; height:100%; object-fit:cover; display:block; }
.material-card { background:var(--white); border:1px solid var(--border); border-radius:var(--r-lg); overflow:hidden; display:flex; flex-direction:column; }
.material-card .material-content { padding:20px; flex:1; }
.material-card h3 { margin-bottom:8px; }
.material-card p  { font-size:13px; margin-bottom:12px; }
.material-card ul { display:flex; flex-direction:column; gap:5px; }
.material-card li { font-size:13px; color:var(--muted); display:flex; gap:7px; align-items:flex-start; }
.material-card li::before { content:'✓'; color:var(--orange); font-weight:500; flex-shrink:0; margin-top:1px; }

/* ─── Arbeitsfotos-Galerie ─── */
.work-gallery { display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:4px; border-radius:var(--r-lg); overflow:hidden; }
.work-gallery img { width:100%; aspect-ratio:4/3; object-fit:cover; display:block; transition:transform .25s; }
.work-gallery img:hover { transform:scale(1.02); }
.work-gallery-item { overflow:hidden; position:relative; }
.work-gallery-item .caption { position:absolute; bottom:0; left:0; right:0; background:linear-gradient(0deg,rgba(26,54,96,.85),transparent); color:#fff; font-size:12px; padding:20px 12px 10px; }

/* ─── SEO-Stadtliste ─── */
.city-list { display:flex; flex-wrap:wrap; gap:8px; margin-top:16px; }
.city-pill { background:var(--blue-light); color:var(--blue); font-size:12px; padding:4px 10px; border-radius:20px; border:1px solid var(--blue-border); }

@media (max-width:640px) {
  .work-gallery { grid-template-columns:1fr 1fr; }
}

/* ─── Kundenstimmen / Testimonials ─── */
.testimonials-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(270px,1fr));gap:20px}
.t-card{background:var(--white);border:1px solid var(--border);border-radius:var(--r-lg);padding:24px;display:flex;flex-direction:column;gap:12px}
.t-stars{color:var(--orange);font-size:18px;letter-spacing:2px}
.t-text{font-size:14px;color:var(--text);font-style:italic;line-height:1.7;flex:1}
.t-text::before{content:'\201E'}
.t-text::after{content:'\201C'}
.t-author{font-size:13px;font-weight:500;color:var(--text)}
.t-service{font-size:12px;color:var(--muted)}
.google-strip{display:flex;align-items:center;gap:16px;background:var(--blue-light);border:1px solid var(--blue-border);border-radius:var(--r-lg);padding:16px 20px;margin-top:24px;flex-wrap:wrap}
.google-stars{font-size:22px;color:var(--orange);letter-spacing:2px}
.google-text{font-size:14px;color:var(--text)}
.google-text strong{color:var(--blue)}
.google-cta{margin-left:auto;font-size:13px;font-weight:500;color:var(--blue);border:1px solid var(--blue-border);padding:8px 16px;border-radius:var(--r-md);white-space:nowrap}

/* ─── Preisinfo-Karten ─── */
.price-range-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:16px;margin-bottom:24px}
.price-r-card{background:var(--white);border:1px solid var(--border);border-top:2px solid var(--blue);border-radius:var(--r-lg);padding:20px}
.price-r-card .pr-type{font-size:11px;font-weight:500;letter-spacing:.06em;text-transform:uppercase;color:var(--blue);margin-bottom:8px}
.price-r-card .pr-from{font-size:28px;font-weight:500;color:var(--text);letter-spacing:-.03em;line-height:1;margin-bottom:4px}
.price-r-card .pr-unit{font-size:13px;color:var(--muted)}
.price-r-card .pr-note{font-size:12px;color:var(--muted);margin-top:8px;padding-top:8px;border-top:1px solid var(--border)}
.bafa-highlight{background:var(--orange-light);border:1px solid var(--orange-border);border-radius:var(--r-lg);padding:16px 20px;display:flex;gap:14px;align-items:center;margin-top:16px}
.bafa-highlight .bh-icon{font-size:28px;color:var(--orange);flex-shrink:0}
.bafa-highlight h4{color:var(--orange-dark);margin-bottom:4px}
.bafa-highlight p{font-size:13px;color:#8C4A1A}

/* ─── Hero Micro-Text ─── */
.hero-micro{font-size:12.5px;color:rgba(255,255,255,.5);margin-top:14px;display:flex;gap:16px;flex-wrap:wrap}
.hero-micro span::before{content:'✓ ';color:var(--orange)}

/* ─── Zertifikat-Streifen ─── */
.cert-strip{display:flex;gap:12px;flex-wrap:wrap;align-items:center;margin-top:24px}
.cert-badge-lg{background:var(--white);border:1px solid var(--border);border-radius:var(--r-md);padding:10px 16px;display:flex;align-items:center;gap:8px;font-size:13px;font-weight:500;color:var(--text)}
.cert-badge-lg i{color:var(--blue);font-size:18px}

/* ─── Hover-Verbesserungen ─── */
.service-card{transition:border-color .2s,box-shadow .2s}
.service-card:hover{border-color:var(--blue);box-shadow:0 4px 16px rgba(49,93,154,.1)}
.check-cell{transition:background .15s}
.check-cell:hover{background:var(--blue-light)}
.t-card{transition:border-color .2s}
.t-card:hover{border-color:var(--blue-border)}

/* ─── FAQ Abstand ─── */
.faq-item+.faq-item{border-top:1px solid var(--border)}

/* ─── WhatsApp-Abschnitt ─── */
.wa-section{background:var(--blue-dark);padding:28px 0;text-align:center}
.wa-badge{display:inline-flex;align-items:center;gap:10px;background:rgba(37,211,102,.15);border:1px solid rgba(37,211,102,.3);border-radius:50px;padding:10px 22px;color:#fff;font-size:14px;font-weight:500}
.wa-badge i{color:#25D366;font-size:20px}

/* ─── Mobile Sticky Call Bar ─── */
.mobile-cta-bar{display:none;position:fixed;bottom:0;left:0;right:0;background:#fff;border-top:1px solid var(--border);padding:8px 12px;gap:8px;z-index:150;box-shadow:0 -2px 12px rgba(0,0,0,.08)}
.mobile-cta-bar a{flex:1;display:flex;align-items:center;justify-content:center;gap:6px;padding:12px;border-radius:var(--r-md);font-size:14px;font-weight:500;text-decoration:none}
.mcb-call{background:var(--blue);color:#fff}
.mcb-wa{background:#25D366;color:#fff}
.mobile-cta-bar svg{flex-shrink:0}

@media (max-width:640px){
  .mobile-cta-bar{display:flex}
  .wa-float{bottom:78px}
  body{padding-bottom:64px}
  .cert-strip{flex-direction:column}
  .cert-badge-lg{width:100%}
  .price-range-grid{grid-template-columns:1fr}
  .google-strip{flex-direction:column;align-items:flex-start}
  .google-cta{margin-left:0;margin-top:8px}
  .testimonials-grid{grid-template-columns:1fr}
  .hero-micro{flex-direction:column;gap:6px}
}

/* Tablet: 2-col testimonials */
@media (min-width:641px) and (max-width:980px){
  .testimonials-grid{grid-template-columns:1fr 1fr}
  .check-grid{grid-template-columns:1fr 1fr}
}

/* ─── Bild-Feature (Energieberatung) ─── */
.img-feature{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:center}
.img-feature.reverse .img-feature-text{order:2}
.img-feature-img{border-radius:var(--r-lg);overflow:hidden;box-shadow:0 6px 24px rgba(26,54,96,.12)}
.img-feature-img img{width:100%;height:100%;object-fit:cover;display:block;aspect-ratio:4/3}
.img-feature-text h3{margin-bottom:12px}
.img-banner{width:100%;border-radius:var(--r-lg);overflow:hidden;margin-bottom:0;box-shadow:0 4px 16px rgba(26,54,96,.1)}
.img-banner img{width:100%;height:240px;object-fit:cover;display:block}
.thermo-duo{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.thermo-duo img{width:100%;height:220px;object-fit:cover;border-radius:var(--r-md);display:block}

@media (max-width:760px){
  .img-feature{grid-template-columns:1fr;gap:24px}
  .img-feature.reverse .img-feature-text{order:0}
  .thermo-duo{grid-template-columns:1fr}
}

/* ─── Prozesskette / Alles aus einer Hand ─── */
.chain-section{background:linear-gradient(180deg,var(--blue-dark) 0%,#15243f 100%)}
.chain-intro{max-width:640px;margin-bottom:36px}
.chain-intro .section-label{color:var(--orange)}
.chain-intro h2{color:#fff;margin-bottom:14px}
.chain-intro p{color:rgba(255,255,255,.7)}
.chain-flow{display:grid;grid-template-columns:repeat(4,1fr);gap:0;position:relative;margin-bottom:32px}
.chain-step{position:relative;padding:0 16px}
.chain-step-num{width:44px;height:44px;border-radius:50%;background:rgba(246,145,57,.15);border:1.5px solid var(--orange);color:var(--orange);display:flex;align-items:center;justify-content:center;font-size:17px;font-weight:600;margin-bottom:16px}
.chain-step h4{color:#fff;font-size:15px;margin-bottom:6px}
.chain-step p{color:rgba(255,255,255,.6);font-size:13px;line-height:1.6}
.chain-step:not(:last-child)::after{content:'';position:absolute;top:22px;left:calc(50% + 30px);right:calc(-50% + 30px);height:1.5px;background:linear-gradient(90deg,var(--orange),rgba(246,145,57,.2))}
.chain-payoff{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);border-left:3px solid var(--orange);border-radius:0 var(--r-md) var(--r-md) 0;padding:20px 24px;display:flex;gap:16px;align-items:flex-start}
.chain-payoff svg{color:var(--orange);flex-shrink:0;margin-top:2px}
.chain-payoff h4{color:#fff;font-size:15px;margin-bottom:4px}
.chain-payoff p{color:rgba(255,255,255,.7);font-size:14px;margin:0}

@media (max-width:760px){
  .chain-flow{grid-template-columns:1fr;gap:24px}
  .chain-step{padding:0 0 0 4px}
  .chain-step:not(:last-child)::after{display:none}
  .chain-payoff{flex-direction:column;gap:10px}
}

/* ─── Komplettlösung-Band (Unterseiten) ─── */
.combo-band{background:var(--blue-light);border:1px solid var(--blue-border);border-radius:var(--r-lg);padding:28px 28px 24px;margin-top:8px}
.combo-band-head{display:flex;align-items:center;gap:10px;margin-bottom:18px}
.combo-band-head svg{color:var(--blue);flex-shrink:0}
.combo-band-head h3{font-size:17px;margin:0}
.combo-chain{display:flex;align-items:stretch;gap:0;flex-wrap:wrap}
.combo-node{flex:1;min-width:130px;display:flex;flex-direction:column;align-items:center;text-align:center;padding:0 12px;position:relative}
.combo-node:not(:last-child)::after{content:'→';position:absolute;right:-7px;top:14px;color:var(--blue-border);font-size:18px;font-weight:400}
.combo-node-ico{width:40px;height:40px;border-radius:10px;background:#fff;border:1px solid var(--border);display:flex;align-items:center;justify-content:center;color:var(--blue);margin-bottom:10px}
.combo-node.active .combo-node-ico{background:var(--orange);border-color:var(--orange);color:#fff}
.combo-node-label{font-size:13px;font-weight:500;color:var(--text);margin-bottom:2px;line-height:1.3}
.combo-node.active .combo-node-label{color:var(--orange-dark)}
.combo-node-sub{font-size:11px;color:var(--muted);line-height:1.4}
.combo-band-foot{font-size:13px;color:var(--blue-dark);margin-top:18px;padding-top:16px;border-top:1px solid var(--blue-border);display:flex;align-items:center;gap:8px}
.combo-band-foot strong{font-weight:600}
.combo-band-foot a{color:var(--blue);font-weight:500;text-decoration:none}

@media (max-width:680px){
  .combo-chain{flex-direction:column;gap:14px}
  .combo-node{flex-direction:row;text-align:left;min-width:0;gap:12px;padding:0}
  .combo-node-ico{margin-bottom:0;flex-shrink:0}
  .combo-node:not(:last-child)::after{display:none}
  .combo-node-text{display:flex;flex-direction:column}
}


/* ─── Hauskauf → Folgeschritte ─── */
.next-steps-grid{display:grid;grid-template-columns:2fr 1fr 1fr;gap:16px;margin-top:28px}
.next-step-card{background:var(--white);border:1px solid var(--border);border-radius:var(--r-lg);padding:22px;display:flex;flex-direction:column;gap:12px;text-decoration:none;color:var(--text);transition:border-color .2s,box-shadow .2s}
.next-step-card:hover{border-color:var(--blue);box-shadow:0 4px 16px rgba(49,93,154,.1)}
.next-step-card.primary{border-top:3px solid var(--orange);background:linear-gradient(160deg,var(--orange-light) 0%,var(--white) 40%)}
.next-step-card.primary .ns-badge{background:var(--orange);color:#fff;font-size:11px;font-weight:500;padding:3px 10px;border-radius:20px;display:inline-block;margin-bottom:4px}
.next-step-card h3{font-size:17px;margin-bottom:0}
.next-step-card.primary h3{font-size:20px}
.next-step-card p{font-size:13px;color:var(--muted);flex:1}
.next-step-card .ns-link{font-size:13px;font-weight:500;color:var(--blue);margin-top:auto}
.next-step-card.primary .ns-link{color:var(--orange-dark)}
.ns-savings{background:var(--blue-light);border:1px solid var(--blue-border);border-radius:var(--r-md);padding:12px 16px;font-size:13px;color:var(--blue-dark);display:flex;align-items:center;gap:10px;margin-top:4px}

@media (max-width:760px){
  .next-steps-grid{grid-template-columns:1fr}
}

/* ─── Ratgeber / Blog ─── */
.article-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:24px;margin-top:32px}
.article-card{background:var(--white);border:1px solid var(--border);border-radius:var(--r-lg);overflow:hidden;display:flex;flex-direction:column;text-decoration:none;color:var(--text);transition:border-color .2s,box-shadow .2s,transform .2s}
.article-card:hover{border-color:var(--blue);box-shadow:0 6px 20px rgba(49,93,154,.1);transform:translateY(-2px)}
.article-card-img{height:160px;background:linear-gradient(135deg,var(--blue),var(--blue-dark));display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden}
.article-card-img svg{color:rgba(255,255,255,.85);width:48px;height:48px;position:relative;z-index:1}
.article-card-img.orange{background:linear-gradient(135deg,var(--orange),var(--orange-dark))}
.article-card-img.green{background:linear-gradient(135deg,#3F7E5A,#2A5840)}
.article-card-img::after{content:'';position:absolute;inset:0;background:radial-gradient(circle at 70% 30%,rgba(255,255,255,.12),transparent 60%)}
.article-card-body{padding:22px;display:flex;flex-direction:column;flex:1}
.article-tag{font-size:11px;font-weight:500;letter-spacing:.04em;text-transform:uppercase;color:var(--blue);margin-bottom:8px}
.article-card-body h3{font-size:17px;line-height:1.3;margin-bottom:8px}
.article-card-body p{font-size:14px;color:var(--muted);flex:1;margin-bottom:14px}
.article-meta{font-size:12px;color:var(--muted);display:flex;align-items:center;gap:8px}
.article-readmore{font-size:13px;font-weight:500;color:var(--blue);display:flex;align-items:center;gap:5px;margin-top:auto}

/* ─── Artikel-Layout (Einzelseite) ─── */
.article-hero{background:var(--blue-dark);padding:48px 0 40px}
.article-hero .article-tag{color:var(--orange)}
.article-hero h1{color:#fff;max-width:800px;margin-bottom:14px}
.article-hero .article-intro{color:rgba(255,255,255,.72);font-size:17px;max-width:720px;line-height:1.6}
.article-hero .article-meta-bar{display:flex;gap:16px;margin-top:20px;color:rgba(255,255,255,.55);font-size:13px;flex-wrap:wrap}
.article-body{max-width:760px;margin:0 auto;padding:48px 20px}
.article-body h2{font-size:24px;margin:36px 0 14px;letter-spacing:-.02em}
.article-body h2:first-child{margin-top:0}
.article-body h3{font-size:19px;margin:28px 0 10px}
.article-body p{font-size:16px;line-height:1.75;color:var(--text);margin-bottom:16px}
.article-body ul,.article-body ol{margin:0 0 18px 0;padding-left:4px;display:flex;flex-direction:column;gap:10px}
.article-body li{font-size:16px;line-height:1.7;color:var(--text);display:flex;gap:10px;align-items:flex-start;list-style:none}
.article-body ul li::before{content:'';width:7px;height:7px;border-radius:50%;background:var(--orange);flex-shrink:0;margin-top:9px}
.article-body ol{counter-reset:art-counter}
.article-body ol li{counter-increment:art-counter}
.article-body ol li::before{content:counter(art-counter);background:var(--blue);color:#fff;width:24px;height:24px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:600;flex-shrink:0;margin-top:0}
.article-body strong{font-weight:600;color:var(--text)}
.article-callout{background:var(--orange-light);border-left:4px solid var(--orange);border-radius:0 var(--r-md) var(--r-md) 0;padding:20px 24px;margin:24px 0}
.article-callout h4{color:var(--orange-dark);margin-bottom:8px;font-size:16px;display:flex;align-items:center;gap:8px}
.article-callout p{font-size:15px;margin-bottom:0;color:#7A3D12}
.article-callout.blue{background:var(--blue-light);border-color:var(--blue)}
.article-callout.blue h4{color:var(--blue-dark)}
.article-callout.blue p{color:#1d3a5f}
.article-law{background:#F7F9FC;border:1px solid var(--border);border-radius:var(--r-md);padding:18px 22px;margin:24px 0;font-size:14px}
.article-law .law-ref{font-weight:600;color:var(--blue);font-size:13px;text-transform:uppercase;letter-spacing:.03em;margin-bottom:6px}
.article-cta-box{background:var(--blue-dark);border-radius:var(--r-lg);padding:32px;margin:40px 0 0;text-align:center}
.article-cta-box h3{color:#fff;margin-bottom:10px}
.article-cta-box p{color:rgba(255,255,255,.7);font-size:15px;margin-bottom:20px;max-width:480px;margin-left:auto;margin-right:auto}
.article-toc{background:var(--blue-light);border:1px solid var(--blue-border);border-radius:var(--r-md);padding:20px 24px;margin-bottom:32px}
.article-toc h4{font-size:13px;text-transform:uppercase;letter-spacing:.04em;color:var(--blue);margin-bottom:12px}
.article-toc ol{counter-reset:toc;display:flex;flex-direction:column;gap:8px;padding:0;margin:0}
.article-toc li{font-size:14px;list-style:none}
.article-toc li::before{display:none}
.article-toc a{color:var(--blue-dark);text-decoration:none}
.article-toc a:hover{text-decoration:underline}
.article-related{border-top:1px solid var(--border);margin-top:40px;padding-top:32px}
.article-author{display:flex;align-items:center;gap:14px;padding:20px 0;border-top:1px solid var(--border);border-bottom:1px solid var(--border);margin:32px 0}
.article-author-avatar{width:48px;height:48px;border-radius:50%;background:var(--blue);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:600;flex-shrink:0}
.article-author-info h4{font-size:14px;margin-bottom:2px}
.article-author-info p{font-size:13px;color:var(--muted);margin-bottom:0}

@media (max-width:640px){
  .article-body h2{font-size:21px}
  .article-hero h1{font-size:26px}
  .article-hero .article-intro{font-size:15px}
}

/* ─── Schimmel-Prozess-Schritte ─── */
.mold-process{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;margin-top:32px;counter-reset:mold}
.mold-step{position:relative;padding-top:8px}
.mold-step-num{width:44px;height:44px;border-radius:12px;background:var(--blue);color:#fff;display:flex;align-items:center;justify-content:center;font-size:18px;font-weight:600;margin-bottom:14px}
.mold-step.accent .mold-step-num{background:var(--orange)}
.mold-step h4{font-size:15px;margin-bottom:6px}
.mold-step p{font-size:13px;color:var(--muted);line-height:1.55}
@media (max-width:760px){
  .mold-process{grid-template-columns:1fr 1fr;gap:18px}
}
@media (max-width:440px){
  .mold-process{grid-template-columns:1fr}
}

/* ─── Startseite: 5 Service-Karten in 3+2 Layout ─── */
.services-grid-home { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 880px) {
  .services-grid-home { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
  .services-grid-home { grid-template-columns: 1fr; }
}