/*
Theme Name: MB Dachkonzepte – Trust & Authority
Theme URI: https://mb-dachkonzepte-gmbh-1.lead.bummeltech.com/
Author: MB Dachkonzepte GmbH
Description: Individuelles Trust-&-Authority-Theme für den Dachdecker-Meisterbetrieb MB Dachkonzepte GmbH. Zertifikate/Badges, Kennzahlen, 3D-Effekte, Mobile-First. Alle Inhalte im wp-admin pflegbar.
Version: 1.0.0
Requires at least: 6.0
Requires PHP: 7.4
License: GPL-2.0-or-later
Text Domain: mbdach
*/

/* ============================================================
   1. DESIGN TOKENS  (Trust & Authority · Slate + Copper)
   ============================================================ */
:root{
  /* Palette — natürlich/branchengerecht: Schiefer-Slate + Kupfer-Gold */
  --trust:        #1F4A5F;   /* tiefes Schieferblau (Primär/Trust) */
  --trust-600:    #173A4C;
  --trust-800:    #0F2A37;
  --secondary:    #2E6F86;   /* helleres Slate */
  --accent:       #A9762F;   /* Kupfer/Bronze-Gold (CTA/Akzent) */
  --accent-600:   #8A5E22;   /* dunkler f. Text-Kontrast */
  --accent-hi:    #C79A3D;   /* Badge-Gold-Highlight */
  --security-green:#2F7D5B;  /* gedämpftes Vertrauens-Grün */

  --bg:           #F6F8FA;   /* Off-White Basis */
  --surface:      #FFFFFF;
  --surface-2:    #FBFCFD;
  --muted:        #EDF1F4;
  --fg:           #16242C;   /* Near-Black Slate Text */
  --fg-soft:      #48606C;
  --fg-mute:      #6B808B;
  --border:       #DCE5EB;
  --border-strong:#C4D2DB;

  /* Design-System-Variablen (aus Auftrag) */
  --badge-height: 48px;
  --card-shadow:  0 4px 6px rgba(15,42,55,.08), 0 18px 40px rgba(15,42,55,.07);
  --card-shadow-hi:0 10px 20px rgba(15,42,55,.12), 0 30px 60px rgba(15,42,55,.14);
  --metric-highlight:#B47B2B;

  --radius:   16px;
  --radius-sm:10px;
  --radius-lg:26px;
  --maxw: 1200px;
  --gutter: clamp(1.1rem, 4vw, 2.5rem);
  --sp-section: clamp(3.5rem, 8vw, 7rem);

  --ff-base: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --ease: cubic-bezier(.22,.61,.36,1);
  --dur: 220ms;
}

/* ============================================================
   2. RESET & BASE
   ============================================================ */
*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body{
  margin:0;
  font-family:var(--ff-base);
  font-size:clamp(1rem,.97rem + .2vw,1.075rem);
  line-height:1.7;
  color:var(--fg);
  background:var(--bg);
  overflow-x:hidden;                 /* letzte Sicherung gg. horizontales Scrollen */
  -webkit-font-smoothing:antialiased;
}
img,video,iframe{ max-width:100%; height:auto; display:block; }
svg{ max-width:100%; height:auto; }
a{ color:var(--trust); text-decoration:none; transition:color var(--dur) var(--ease); }
a:hover{ color:var(--accent-600); }
h1,h2,h3,h4{ font-family:var(--ff-base); line-height:1.15; color:var(--trust-800); margin:0 0 .6em; letter-spacing:-.015em; font-weight:800; }
h1{ font-size:clamp(2.2rem,5vw,3.6rem); }
h2{ font-size:clamp(1.7rem,3.4vw,2.6rem); }
h3{ font-size:clamp(1.2rem,2vw,1.45rem); font-weight:700; }
p{ margin:0 0 1.1rem; }
ul,ol{ margin:0 0 1.1rem; padding-left:1.2rem; }
:focus-visible{ outline:3px solid var(--accent); outline-offset:3px; border-radius:6px; }
::selection{ background:var(--accent); color:#fff; }

/* Layout helpers */
.container{ width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:var(--gutter); }
.section{ padding-block:var(--sp-section); }
.section--muted{ background:var(--muted); }
.section--trust{ background:linear-gradient(160deg,var(--trust-800),var(--trust)); color:#EAF2F6; }
.section--trust h2,.section--trust h3{ color:#fff; }
.eyebrow{
  display:inline-flex; align-items:center; gap:.5rem;
  font-size:.8rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
  color:var(--accent-600); margin-bottom:.9rem;
}
.eyebrow::before{ content:""; width:26px; height:2px; background:var(--accent); border-radius:2px; }
.section-head{ max-width:56ch; margin-bottom:clamp(2rem,4vw,3rem); }
.section-head.center{ margin-inline:auto; text-align:center; }
.section-head p{ color:var(--fg-soft); font-size:1.08rem; }
.lead{ font-size:1.15rem; color:var(--fg-soft); }

/* Icons — dezent, immer klein (CLAUDE.md-Vorgabe) */
.icon{ width:1.4em; height:1.4em; flex:0 0 auto; vertical-align:middle; stroke-width:1.8; }
.icon-24{ width:24px; height:24px; }
.icon-20{ width:20px; height:20px; }

/* Buttons */
.btn{
  --btn-bg:var(--accent); --btn-fg:#fff;
  display:inline-flex; align-items:center; justify-content:center; gap:.55rem;
  padding:.9rem 1.6rem; border-radius:var(--radius-sm);
  font-weight:700; font-size:1rem; line-height:1; cursor:pointer;
  background:var(--btn-bg); color:var(--btn-fg); border:2px solid transparent;
  box-shadow:0 6px 16px rgba(169,118,47,.28);
  transition:transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease), background var(--dur) var(--ease);
}
.btn:hover{ transform:translateY(-3px); box-shadow:0 12px 26px rgba(169,118,47,.36); color:#fff; background:var(--accent-600); }
.btn--ghost{ --btn-bg:transparent; --btn-fg:var(--trust); border-color:var(--border-strong); box-shadow:none; }
.btn--ghost:hover{ --btn-fg:var(--trust-800); background:var(--surface); border-color:var(--trust); color:var(--trust-800); }
.btn--light{ --btn-bg:#fff; --btn-fg:var(--trust-800); box-shadow:0 6px 18px rgba(0,0,0,.18); }
.btn--light:hover{ color:var(--trust-800); background:#fff; }
.btn--lg{ padding:1.05rem 2rem; font-size:1.06rem; }

/* Badge / Pill */
.badge{
  display:inline-flex; align-items:center; gap:.5rem;
  min-height:var(--badge-height); padding:.55rem 1rem;
  background:var(--surface); border:1px solid var(--border);
  border-radius:999px; font-weight:700; font-size:.9rem; color:var(--trust-800);
  box-shadow:var(--card-shadow);
  transition:transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.badge:hover{ transform:translateY(-3px); box-shadow:var(--card-shadow-hi); border-color:var(--accent); }
.badge .icon{ color:var(--accent); }
.badge--green .icon{ color:var(--security-green); }

/* ============================================================
   3. HEADER / NAV
   ============================================================ */
.topbar{
  background:var(--trust-800); color:#CFE0E8;
  font-size:.85rem;
}
.topbar .container{ display:flex; flex-wrap:wrap; gap:.4rem 1.4rem; align-items:center; justify-content:space-between; padding-block:.5rem; }
.topbar a{ color:#EAF2F6; font-weight:600; }
.topbar .tb-group{ display:flex; flex-wrap:wrap; gap:.4rem 1.3rem; align-items:center; }
.topbar .tb-item{ display:inline-flex; align-items:center; gap:.45rem; }
.topbar .icon{ width:16px; height:16px; color:var(--accent-hi); }

.site-header{
  position:sticky; top:0; z-index:60;
  background:rgba(255,255,255,.85);
  backdrop-filter:saturate(160%) blur(14px);
  -webkit-backdrop-filter:saturate(160%) blur(14px);
  border-bottom:1px solid var(--border);
  transition:box-shadow var(--dur) var(--ease);
}
.site-header.is-stuck{ box-shadow:0 6px 24px rgba(15,42,55,.10); }
.nav{ display:flex; align-items:center; justify-content:space-between; gap:1.5rem; padding-block:.7rem; }
.brand{ display:flex; align-items:center; gap:.7rem; font-weight:800; color:var(--trust-800); font-size:1.15rem; letter-spacing:-.01em; }
.brand:hover{ color:var(--trust-800); }
.brand-mark{
  width:44px; height:44px; border-radius:11px; flex:0 0 auto;
  display:grid; place-items:center; color:#fff;
  background:linear-gradient(145deg,var(--trust),var(--secondary));
  box-shadow:0 6px 14px rgba(31,74,95,.35);
}
.brand-mark .icon{ width:26px; height:26px; }
.brand small{ display:block; font-size:.72rem; font-weight:600; color:var(--fg-mute); letter-spacing:.02em; }

.nav-menu{ display:flex; align-items:center; gap:.3rem; list-style:none; margin:0; padding:0; }
.nav-menu a{
  display:block; padding:.6rem .9rem; border-radius:9px;
  color:var(--fg); font-weight:600; font-size:.98rem;
  transition:background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.nav-menu a:hover,.nav-menu .current-menu-item>a{ background:var(--muted); color:var(--trust-800); }
.nav-actions{ display:flex; align-items:center; gap:.7rem; }
.nav-phone{ display:inline-flex; align-items:center; gap:.5rem; font-weight:800; color:var(--trust-800); }
.nav-phone .icon{ color:var(--accent); }

.nav-toggle{
  display:none; width:46px; height:46px; border:1px solid var(--border-strong);
  background:var(--surface); border-radius:11px; cursor:pointer; color:var(--trust-800);
  align-items:center; justify-content:center;
}
.nav-toggle .icon{ width:26px; height:26px; }

/* ============================================================
   4. HERO
   ============================================================ */
.hero{ position:relative; padding-block:clamp(3rem,7vw,5.5rem) clamp(3.5rem,8vw,6rem); overflow:hidden; }
.hero::before{
  content:""; position:absolute; inset:0; z-index:-2;
  background:
    radial-gradient(1100px 500px at 82% -8%, rgba(46,111,134,.16), transparent 60%),
    radial-gradient(900px 520px at -5% 108%, rgba(169,118,47,.12), transparent 55%),
    var(--bg);
}
.hero-grid{ display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(2rem,5vw,4rem); align-items:center; }
.hero-copy h1{ margin-bottom:.5em; }
.hero-copy .lead{ margin-bottom:1.6rem; max-width:52ch; }
.hero-trust{ display:flex; flex-wrap:wrap; gap:.6rem; margin-bottom:1.7rem; }
.hero-cta{ display:flex; flex-wrap:wrap; gap:.8rem; align-items:center; margin-bottom:1.6rem; }
.hero-assurance{ display:flex; flex-wrap:wrap; gap:.5rem 1.3rem; color:var(--fg-soft); font-size:.95rem; font-weight:600; }
.hero-assurance span{ display:inline-flex; align-items:center; gap:.45rem; }
.hero-assurance .icon{ color:var(--security-green); }

/* 3D-Bühne für Hero-Bild */
.hero-media{ position:relative; perspective:1400px; }
.hero-card{
  position:relative; border-radius:var(--radius-lg); overflow:hidden;
  transform-style:preserve-3d; transform:rotateY(-7deg) rotateX(3deg);
  box-shadow:var(--card-shadow-hi);
  transition:transform .5s var(--ease);
  will-change:transform;
}
.hero-media:hover .hero-card{ transform:rotateY(-2deg) rotateX(1deg); }
.hero-card img{ width:100%; height:100%; object-fit:cover; aspect-ratio:4/3.2; }
.hero-card::after{ content:""; position:absolute; inset:0; background:linear-gradient(180deg,transparent 55%,rgba(15,42,55,.35)); }

/* schwebende Metrik-Karte */
.hero-float{
  position:absolute; left:-1.4rem; bottom:1.6rem; z-index:2;
  background:rgba(255,255,255,.9); backdrop-filter:blur(8px);
  border:1px solid var(--border); border-radius:var(--radius);
  padding:1rem 1.15rem; box-shadow:var(--card-shadow-hi);
  transform:translateZ(60px);
  display:flex; align-items:center; gap:.85rem;
  animation:floaty 5s ease-in-out infinite;
}
.hero-float .hf-icon{ width:44px; height:44px; border-radius:12px; display:grid; place-items:center; background:var(--muted); color:var(--accent); flex:0 0 auto; }
.hero-float .hf-icon .icon{ width:24px; height:24px; }
.hero-float b{ display:block; font-size:1.5rem; color:var(--trust-800); line-height:1; }
.hero-float span{ font-size:.82rem; color:var(--fg-soft); font-weight:600; }
@keyframes floaty{ 0%,100%{ transform:translateZ(60px) translateY(0);} 50%{ transform:translateZ(60px) translateY(-9px);} }

/* ============================================================
   5. PARTNER / BADGE-GRID (Zertifizierte Systempartner)
   ============================================================ */
.partners{ padding-block:clamp(2.2rem,4vw,3rem); border-block:1px solid var(--border); background:var(--surface); }
.partners-lead{ text-align:center; color:var(--fg-mute); font-weight:700; font-size:.86rem; letter-spacing:.1em; text-transform:uppercase; margin-bottom:1.4rem; }
.badge-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(140px,1fr)); gap:.9rem; }
.partner{
  display:flex; align-items:center; justify-content:center; gap:.55rem;
  min-height:var(--badge-height); padding:.7rem .9rem; text-align:center;
  background:var(--surface-2); border:1px solid var(--border); border-radius:var(--radius-sm);
  font-weight:700; color:var(--trust-800); font-size:.95rem;
  transition:transform var(--dur) var(--ease), border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.partner:hover{ transform:translateY(-4px); border-color:var(--accent); box-shadow:var(--card-shadow); }
.partner .icon{ color:var(--accent); width:20px; height:20px; }

/* ============================================================
   6. METRIKEN (Stat-Cards mit Puls)
   ============================================================ */
.metrics{ display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(1rem,2vw,1.6rem); }
.metric{
  background:var(--surface); border:1px solid var(--border); border-radius:var(--radius);
  padding:1.6rem 1.4rem; box-shadow:var(--card-shadow); position:relative; overflow:hidden;
  transition:transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.metric:hover{ transform:translateY(-5px); box-shadow:var(--card-shadow-hi); }
.metric::before{ content:""; position:absolute; left:0; top:0; width:100%; height:4px; background:linear-gradient(90deg,var(--accent),var(--accent-hi)); }
.metric-ico{ width:46px; height:46px; border-radius:12px; display:grid; place-items:center; background:var(--muted); color:var(--trust); margin-bottom:.9rem; }
.metric-ico .icon{ width:24px; height:24px; }
.metric b{ display:block; font-size:clamp(2rem,4vw,2.7rem); font-weight:800; color:var(--trust-800); line-height:1; letter-spacing:-.02em; }
.metric b .dot{ color:var(--metric-highlight); }
.metric span{ display:block; margin-top:.4rem; font-weight:700; color:var(--fg); }
.metric small{ display:block; margin-top:.25rem; color:var(--fg-mute); font-size:.82rem; font-weight:600; }
.metrics-source{ margin-top:1rem; text-align:center; color:var(--fg-mute); font-size:.82rem; }
/* Puls am Akzent-Punkt */
.pulse{ position:relative; display:inline-block; }
.pulse::after{ content:""; position:absolute; right:-14px; top:6px; width:9px; height:9px; border-radius:50%; background:var(--security-green); box-shadow:0 0 0 0 rgba(47,125,91,.5); animation:pulse 2.4s infinite; }
@keyframes pulse{ 0%{ box-shadow:0 0 0 0 rgba(47,125,91,.45);} 70%{ box-shadow:0 0 0 12px rgba(47,125,91,0);} 100%{ box-shadow:0 0 0 0 rgba(47,125,91,0);} }

/* ============================================================
   7. LEISTUNGEN (Service-Cards mit 3D-Tilt)
   ============================================================ */
.cards{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(1.2rem,2.4vw,1.8rem); }
.card{
  background:var(--surface); border:1px solid var(--border); border-radius:var(--radius);
  overflow:hidden; box-shadow:var(--card-shadow); display:flex; flex-direction:column;
  transform-style:preserve-3d;
  transition:transform .35s var(--ease), box-shadow .35s var(--ease), border-color var(--dur) var(--ease);
  will-change:transform;
}
.card:hover{ box-shadow:var(--card-shadow-hi); border-color:var(--border-strong); }
.card-media{ position:relative; aspect-ratio:16/11; overflow:hidden; }
.card-media img{ width:100%; height:100%; object-fit:cover; transition:transform .6s var(--ease); }
.card:hover .card-media img{ transform:scale(1.07); }
.card-ico{
  position:absolute; left:1rem; bottom:-22px; width:52px; height:52px; border-radius:14px;
  display:grid; place-items:center; background:var(--surface); color:var(--accent);
  box-shadow:var(--card-shadow); border:1px solid var(--border); transform:translateZ(40px);
}
.card-ico .icon{ width:26px; height:26px; }
.card-body{ padding:2rem 1.5rem 1.6rem; display:flex; flex-direction:column; gap:.2rem; flex:1; }
.card-body h3{ margin-bottom:.4rem; }
.card-body p{ color:var(--fg-soft); font-size:.98rem; margin-bottom:1rem; }
.card-link{ margin-top:auto; display:inline-flex; align-items:center; gap:.45rem; font-weight:700; color:var(--accent-600); }
.card-link .icon{ width:18px; height:18px; transition:transform var(--dur) var(--ease); }
.card:hover .card-link .icon{ transform:translateX(4px); }

/* ============================================================
   8. VIER SÄULEN (Feature / Werte)
   ============================================================ */
.pillars{ display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(1rem,2vw,1.5rem); }
.pillar{
  background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.14);
  border-radius:var(--radius); padding:1.7rem 1.4rem; backdrop-filter:blur(4px);
  transition:transform var(--dur) var(--ease), background var(--dur) var(--ease);
}
.pillar:hover{ transform:translateY(-5px); background:rgba(255,255,255,.11); }
.pillar-ico{ width:52px; height:52px; border-radius:14px; display:grid; place-items:center; background:rgba(199,154,61,.18); color:var(--accent-hi); margin-bottom:1rem; }
.pillar-ico .icon{ width:26px; height:26px; }
.pillar h3{ color:#fff; font-size:1.2rem; }
.pillar p{ color:#CBDBE3; font-size:.96rem; margin:0; }

/* ============================================================
   9. SLIDER (CPT slide) – Projektschau
   ============================================================ */
.slider{ position:relative; }
.slider-track{ display:flex; overflow-x:auto; scroll-snap-type:x mandatory; gap:1.2rem; padding-bottom:.6rem; scrollbar-width:thin; }
.slider-track::-webkit-scrollbar{ height:8px; }
.slider-track::-webkit-scrollbar-thumb{ background:var(--border-strong); border-radius:8px; }
.slide{
  flex:0 0 min(88%,560px); scroll-snap-align:center; position:relative;
  border-radius:var(--radius-lg); overflow:hidden; box-shadow:var(--card-shadow);
  aspect-ratio:16/10; background:var(--muted);
}
.slide img{ width:100%; height:100%; object-fit:cover; }
.slide-cap{ position:absolute; inset:auto 0 0 0; padding:1.4rem; background:linear-gradient(180deg,transparent,rgba(15,42,55,.82)); color:#fff; }
.slide-cap h3{ color:#fff; margin-bottom:.2rem; }
.slide-cap p{ margin:0; color:#DCE7ec; font-size:.95rem; }
.slider-nav{ display:flex; gap:.6rem; justify-content:center; margin-top:1.3rem; }
.slider-btn{
  width:48px; height:48px; border-radius:50%; border:1px solid var(--border-strong);
  background:var(--surface); color:var(--trust-800); cursor:pointer; display:grid; place-items:center;
  transition:background var(--dur) var(--ease), transform var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.slider-btn:hover{ background:var(--trust); color:#fff; border-color:var(--trust); transform:translateY(-2px); }
.slider-btn .icon{ width:22px; height:22px; }

/* ============================================================
   10. CASE STUDY / REFERENZ mit Kennzahlen
   ============================================================ */
.case{ display:grid; grid-template-columns:1.1fr .9fr; gap:clamp(1.6rem,4vw,3rem); align-items:center; }
.case-media{ border-radius:var(--radius-lg); overflow:hidden; box-shadow:var(--card-shadow-hi); position:relative; }
.case-media img{ width:100%; aspect-ratio:4/3; object-fit:cover; }
.case-tag{ position:absolute; left:1rem; top:1rem; }
.case-stats{ display:grid; grid-template-columns:1fr 1fr; gap:1rem; margin-top:1.4rem; }
.case-stat{ background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-sm); padding:1.1rem; box-shadow:var(--card-shadow); }
.case-stat b{ font-size:1.7rem; color:var(--accent-600); display:block; line-height:1; }
.case-stat span{ font-size:.9rem; color:var(--fg-soft); font-weight:600; }

/* ============================================================
   11. TESTIMONIALS
   ============================================================ */
.quotes{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(1.2rem,2.4vw,1.8rem); }
.quote{
  background:var(--surface); border:1px solid var(--border); border-radius:var(--radius);
  padding:1.7rem 1.5rem; box-shadow:var(--card-shadow); display:flex; flex-direction:column; gap:.9rem;
  transition:transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.quote:hover{ transform:translateY(-5px); box-shadow:var(--card-shadow-hi); }
.stars{ display:flex; gap:.15rem; color:var(--accent-hi); }
.stars .icon{ width:20px; height:20px; }
.quote p{ margin:0; color:var(--fg); font-size:1rem; }
.quote-by{ display:flex; align-items:center; gap:.7rem; margin-top:auto; }
.quote-av{ width:42px; height:42px; border-radius:50%; background:linear-gradient(145deg,var(--trust),var(--secondary)); color:#fff; display:grid; place-items:center; font-weight:800; flex:0 0 auto; }
.quote-by b{ color:var(--trust-800); font-size:.95rem; }
.quote-by small{ display:block; color:var(--fg-mute); font-weight:600; }

/* ============================================================
   12. GARANTIE / VERSPRECHEN
   ============================================================ */
.guarantee{
  display:grid; grid-template-columns:auto 1fr auto; gap:clamp(1.2rem,3vw,2.4rem); align-items:center;
  background:linear-gradient(160deg,var(--surface),var(--surface-2));
  border:1px solid var(--border); border-left:6px solid var(--accent);
  border-radius:var(--radius-lg); padding:clamp(1.6rem,4vw,2.6rem); box-shadow:var(--card-shadow);
}
.guarantee-seal{ width:96px; height:96px; border-radius:50%; display:grid; place-items:center; color:#fff;
  background:radial-gradient(circle at 35% 30%,var(--accent-hi),var(--accent) 70%); box-shadow:0 10px 24px rgba(169,118,47,.4); flex:0 0 auto; }
.guarantee-seal .icon{ width:46px; height:46px; }
.guarantee h3{ margin-bottom:.3rem; }
.guarantee p{ margin:0; color:var(--fg-soft); }

/* ============================================================
   13. KONTAKT / CTA
   ============================================================ */
.contact-grid{ display:grid; grid-template-columns:.9fr 1.1fr; gap:clamp(1.6rem,4vw,3rem); align-items:start; }
.contact-list{ list-style:none; margin:1.4rem 0 0; padding:0; display:grid; gap:.9rem; }
/* Kontaktzeile: Icon per Flex NEBEN dem Text, klein & flex-shrink:0 (CLAUDE.md) */
.contact-item{ display:flex; align-items:flex-start; gap:.75rem; }
.contact-item .ci-ico{ width:42px; height:42px; border-radius:11px; background:var(--muted); color:var(--accent); display:grid; place-items:center; flex:0 0 auto; }
.contact-item .ci-ico .icon{ width:22px; height:22px; }
.contact-item b{ display:block; color:var(--trust-800); }
.contact-item a{ color:var(--fg); font-weight:600; }
.contact-item a:hover{ color:var(--accent-600); }
.contact-card{ background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-lg); padding:clamp(1.4rem,3vw,2rem); box-shadow:var(--card-shadow); }
.contact-card .wpcf7{ margin-top:.5rem; }
.contact-card input[type=text],
.contact-card input[type=email],
.contact-card input[type=tel],
.contact-card textarea{
  width:100%; padding:.85rem 1rem; margin-bottom:.9rem; font:inherit; color:var(--fg);
  background:var(--surface-2); border:1px solid var(--border-strong); border-radius:var(--radius-sm);
  transition:border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.contact-card input:focus,.contact-card textarea:focus{ outline:none; border-color:var(--trust); box-shadow:0 0 0 3px rgba(31,74,95,.15); }
.contact-card .wpcf7-submit{ /* fällt auf .btn zurück via functions-Klasse */ }

/* ============================================================
   14. FOOTER
   ============================================================ */
.site-footer{ background:var(--trust-800); color:#B9CBD4; padding-block:clamp(3rem,6vw,4.5rem) 1.5rem; }
.footer-grid{ display:grid; grid-template-columns:1.4fr 1fr 1fr 1.2fr; gap:2rem; }
.site-footer h4{ color:#fff; font-size:1rem; letter-spacing:.02em; margin-bottom:1rem; }
.site-footer a{ color:#C6D6DE; }
.site-footer a:hover{ color:#fff; }
.footer-menu{ list-style:none; margin:0; padding:0; display:grid; gap:.55rem; }
.footer-brand .brand{ color:#fff; margin-bottom:.8rem; }
.footer-brand .brand small{ color:#9FB4BE; }
.footer-brand p{ color:#A7BCC5; font-size:.95rem; }
.footer-contact{ display:grid; gap:.6rem; }
.footer-contact .contact-item .ci-ico{ background:rgba(255,255,255,.08); color:var(--accent-hi); }
.footer-contact b{ color:#fff; }
.footer-contact a{ color:#C6D6DE; }
.footer-bottom{ border-top:1px solid rgba(255,255,255,.12); margin-top:2.4rem; padding-top:1.3rem; display:flex; flex-wrap:wrap; gap:.6rem 1.4rem; justify-content:space-between; font-size:.86rem; color:#8FA6B0; }
.footer-bottom a{ color:#8FA6B0; }

/* ============================================================
   15. GUTENBERG / PAGE CONTENT
   ============================================================ */
.page-hero{ padding-block:clamp(2.6rem,6vw,4rem) clamp(2rem,4vw,3rem); background:linear-gradient(160deg,var(--trust-800),var(--trust)); color:#fff; }
.page-hero h1{ color:#fff; }
.page-hero .crumbs{ color:#BcD3dd; font-size:.9rem; margin-bottom:.6rem; }
.page-hero .crumbs a{ color:#DCEAF0; }
.entry{ padding-block:var(--sp-section); }
.entry .container{ max-width:820px; }
.entry-content h2{ margin-top:2.2rem; }
.entry-content h3{ margin-top:1.6rem; }
.entry-content img{ border-radius:var(--radius); box-shadow:var(--card-shadow); }
.entry-content ul{ list-style:none; padding-left:0; display:grid; gap:.55rem; }
.entry-content ul li{ position:relative; padding-left:1.9rem; }
.entry-content ul li::before{
  content:""; position:absolute; left:0; top:.35em; width:18px; height:18px;
  background:var(--security-green);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='white' d='M9 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='white' d='M9 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z'/%3E%3C/svg%3E") center/contain no-repeat;
}
.entry-content .wp-block-columns{ gap:2rem; }
.entry-content .wp-block-group.has-background{ padding:clamp(1.4rem,3vw,2rem); border-radius:var(--radius); }
.wp-block-separator{ border:none; height:1px; background:var(--border); margin:2.4rem 0; }

/* ============================================================
   16. SCROLL-REVEAL
   ============================================================ */
[data-reveal]{ opacity:0; transform:translateY(26px); transition:opacity .7s var(--ease), transform .7s var(--ease); }
[data-reveal].is-in{ opacity:1; transform:none; }

/* ============================================================
   17. RESPONSIVE
   ============================================================ */
@media (max-width:1024px){
  .metrics{ grid-template-columns:repeat(2,1fr); }
  .cards,.quotes{ grid-template-columns:repeat(2,1fr); }
  .pillars{ grid-template-columns:repeat(2,1fr); }
  .footer-grid{ grid-template-columns:1fr 1fr; }
}
@media (max-width:900px){
  .nav-menu, .nav-phone{ display:none; }
  .nav-toggle{ display:inline-flex; }
  .hero-grid{ grid-template-columns:1fr; }
  .hero-media{ order:-1; max-width:560px; margin-inline:auto; }
  .hero-card{ transform:none; }
  .case{ grid-template-columns:1fr; }
  .contact-grid{ grid-template-columns:1fr; }

  /* Mobile-Drawer */
  .nav-menu.is-open{
    display:flex; position:fixed; inset:0 0 0 auto; width:min(84vw,340px);
    flex-direction:column; align-items:stretch; gap:.2rem;
    background:var(--surface); padding:5rem 1.3rem 2rem; z-index:70;
    box-shadow:-14px 0 40px rgba(15,42,55,.22); animation:drawer .28s var(--ease);
    overflow-y:auto;
  }
  .nav-menu.is-open a{ padding:.9rem 1rem; font-size:1.05rem; border-bottom:1px solid var(--border); }
  .nav-backdrop{ position:fixed; inset:0; background:rgba(15,42,55,.5); z-index:65; }
  .nav-close{ position:fixed; top:1rem; right:1.1rem; z-index:75; }
}
@keyframes drawer{ from{ transform:translateX(100%);} to{ transform:none; } }
@media (max-width:600px){
  :root{ --sp-section:clamp(2.6rem,10vw,3.5rem); }
  .metrics,.cards,.quotes,.pillars,.case-stats,.footer-grid,.contact-list{ grid-template-columns:1fr; }
  .hero-float{ left:.5rem; right:.5rem; bottom:.7rem; }
  .guarantee{ grid-template-columns:1fr; text-align:center; }
  .guarantee-seal{ margin-inline:auto; }
  .topbar .tb-group.secondary{ display:none; }
  .btn{ width:100%; }
  .hero-cta{ flex-direction:column; align-items:stretch; }
}

/* ============================================================
   18. MOTION-PRÄFERENZ
   ============================================================ */
@media (prefers-reduced-motion:reduce){
  *{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; scroll-behavior:auto !important; }
  .hero-card{ transform:none; }
  [data-reveal]{ opacity:1; transform:none; }
}