/* ══════════════════════════════════════════════════════════════════════
   dp2-loesungen.css · landing-loesungen-1 (27.10.2026)
   Unterseite „Individuelle Lösungen" für Makler, Sachverständige,
   Steuerberater und Finanzierer. Marcel: „Mach mal etwas fertig, was
   richtig einen vom Hocker haut."
   Nur Tokens aus dp2.css (--gd, --gdh, --line, --runway …), kein hartes
   Gold - die Seite muss beim Whitelabel mitfärben (gold-audit).
   ══════════════════════════════════════════════════════════════════════ */

.lz-seite{background:var(--ob)}

/* ── Hero ─────────────────────────────────────────────────────────────── */
.lz-hero{position:relative;overflow:hidden;background:var(--ob);color:var(--txtd);padding:120px 0 96px}
.lz-hero::before{content:'';position:absolute;inset:0;
  background:
    radial-gradient(60% 70% at 85% 10%, color-mix(in srgb, var(--gd) 22%, transparent), transparent 70%),
    radial-gradient(40% 50% at 0% 100%, color-mix(in srgb, var(--gd) 10%, transparent), transparent 70%);
  pointer-events:none}
.lz-raster{position:absolute;inset:0;pointer-events:none;opacity:.35;
  background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px);
  background-size:64px 64px;
  -webkit-mask-image:radial-gradient(70% 80% at 70% 30%,#000,transparent);
  mask-image:radial-gradient(70% 80% at 70% 30%,#000,transparent)}
.lz-hero .wrap{position:relative;z-index:1}
.lz-hero-g{display:grid;grid-template-columns:1.25fr .9fr;gap:56px;align-items:center}
.lz-hero h1{font:600 clamp(36px,5.4vw,66px)/1.04 var(--disp);letter-spacing:-.02em;color:#fff;margin:22px 0 24px}
.lz-hero h1 em{font-style:normal;color:var(--gdh)}
.lz-lead{font-size:clamp(17px,1.6vw,20px);line-height:1.6;color:var(--mdk);max-width:620px;margin:0 0 34px}
.lz-lead b{color:#fff;font-weight:600}
.lz-btns{display:flex;gap:14px;flex-wrap:wrap;align-items:center}
.lz-chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:34px}
.lz-chips span{font:600 10.5px/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--gdh);
  border:1px solid var(--line);border-radius:20px;padding:8px 13px}

/* Prozess-Karte rechts im Hero: ein Ablauf, der „von selbst" läuft */
.lz-flow{border:1px solid var(--line);background:rgba(255,255,255,.03);padding:24px 22px;position:relative}
.lz-flow-k{display:flex;justify-content:space-between;font:700 9.5px/1 var(--mono);letter-spacing:.14em;color:var(--gdh);
  text-transform:uppercase;margin-bottom:18px}
.lz-flow-k{gap:12px}
.lz-flow-k i{font-style:normal;color:var(--grn);white-space:nowrap}
.lz-step{display:grid;grid-template-columns:30px 1fr auto;gap:12px;align-items:center;padding:11px 0;
  border-top:1px solid rgba(255,255,255,.06);opacity:.35;transition:opacity .5s}
.lz-step:first-of-type{border-top:0}
.lz-step.an{opacity:1}
.lz-step .n{width:30px;height:30px;border:1px solid var(--line);display:grid;place-items:center;
  font:700 11px/1 var(--mono);color:var(--gdh)}
.lz-step.an .n{background:var(--runway);color:#14100a;border-color:transparent}
.lz-step b{display:block;font-size:14px;color:#fff;font-weight:600}
.lz-step small{display:block;font-size:12px;color:var(--ddk);margin-top:2px}
.lz-step .ok{font:700 9px/1 var(--mono);letter-spacing:.1em;color:var(--ddk)}
.lz-step.an .ok{color:var(--grn)}
.lz-flow-f{margin-top:16px;padding-top:14px;border-top:1px dashed var(--line);display:flex;justify-content:space-between;
  font:600 11px/1.4 var(--mono);color:var(--mdk)}
.lz-flow-f b{color:var(--gdh)}

/* ── Abschnitte ──────────────────────────────────────────────────────── */
.lz-sec{padding:104px 0}
.lz-dunkel{background:var(--ob);color:var(--txtd)}
.lz-hell{background:var(--cream);color:var(--ink)}
.lz-kopf{max-width:760px;margin:0 auto 52px;text-align:center}
.lz-kopf h2{font:600 clamp(28px,3.6vw,44px)/1.12 var(--disp);letter-spacing:-.015em;margin:16px 0 14px}
.lz-dunkel .lz-kopf h2{color:#fff}
.lz-kopf p{font-size:16.5px;line-height:1.65;margin:0}
.lz-dunkel .lz-kopf p{color:var(--mdk)}
.lz-hell .lz-kopf p{color:var(--mut)}
.lz-kopf .ac,.lz-hero .ac{color:var(--gdh)}
.lz-hell .lz-kopf .ac{color:var(--gdi,var(--gd))}

/* Alltag: drei Sätze, die jeder kennt */
.lz-alltag{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.lz-zitat{border-left:3px solid var(--gd);background:#fff;padding:26px 24px;box-shadow:0 18px 40px -30px rgba(0,0,0,.35)}
.lz-zitat q{display:block;font:500 18px/1.45 var(--disp);color:var(--ink);quotes:none;margin-bottom:14px}
.lz-zitat span{font:700 9.5px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--mut)}
.lz-antwort{margin:42px auto 0;max-width:760px;text-align:center;font:600 clamp(20px,2.4vw,28px)/1.35 var(--disp);color:var(--ink)}
.lz-antwort em{font-style:normal;background:linear-gradient(transparent 62%,color-mix(in srgb,var(--gd) 35%,transparent) 62%)}

/* Zielgruppen: vier Reiter */
.lz-tabs{display:flex;justify-content:center;gap:6px;flex-wrap:wrap;margin-bottom:28px}
.lz-tabs button{font:700 11px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--mdk);background:none;
  border:1px solid var(--line);padding:14px 20px;min-height:44px;cursor:pointer;transition:all .25s}
.lz-tabs button[aria-selected="true"]{background:var(--runway);color:#14100a;border-color:transparent}
.lz-ziel{display:none;grid-template-columns:1fr 1.2fr;border:1px solid var(--line)}
.lz-ziel.an{display:grid}
.lz-ziel-l{padding:40px 36px;border-right:1px solid var(--line);background:rgba(255,255,255,.02)}
.lz-ziel-l h3{font:600 30px/1.15 var(--disp);color:#fff;margin:14px 0 16px}
.lz-ziel-l p{color:var(--mdk);font-size:15px;line-height:1.65;margin:0 0 20px}
.lz-ziel-l .klein{font:700 9.5px/1 var(--mono);letter-spacing:.14em;color:var(--gdh);text-transform:uppercase}
.lz-ziel-l ul{list-style:none;margin:0;padding:0}
.lz-ziel-l li{color:var(--txtd);font-size:14px;line-height:1.5;padding:7px 0 7px 22px;position:relative}
.lz-ziel-l li::before{content:'×';position:absolute;left:0;color:var(--rd);font-weight:700}
.lz-ziel-r{padding:40px 36px}
.lz-ziel-r .klein{font:700 9.5px/1 var(--mono);letter-spacing:.14em;color:var(--gdh);text-transform:uppercase;margin-bottom:18px}
.lz-baut{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.lz-baut div{border:1px solid var(--line);padding:18px 16px}
.lz-baut b{display:block;color:#fff;font-size:14.5px;margin-bottom:6px}
.lz-baut span{display:block;color:var(--mdk);font-size:13px;line-height:1.55}

/* Leistungen: sechs Kacheln */
.lz-leist{display:grid;grid-template-columns:repeat(3,1fr);gap:0;border:1px solid var(--cream-line)}
.lz-l{padding:34px 28px;border-right:1px solid var(--cream-line);border-bottom:1px solid var(--cream-line);background:#fff;
  position:relative;transition:background .3s}
.lz-l:hover{background:var(--karte,#FBF6E9)}
.lz-l:nth-child(3n){border-right:0}
.lz-l .nr{font:700 10px/1 var(--mono);letter-spacing:.14em;color:var(--gdi,var(--gd))}
.lz-l svg{width:30px;height:30px;stroke:var(--gd);fill:none;stroke-width:1.6;margin:18px 0 14px;display:block}
.lz-l h3{font:600 19px/1.25 var(--disp);color:var(--ink);margin:0 0 10px}
.lz-l p{font-size:14px;line-height:1.65;color:var(--mut);margin:0 0 14px}
.lz-l .bsp{font:600 11px/1.5 var(--mono);color:var(--ink);border-top:1px dashed var(--cream-line);padding-top:12px}

/* Referenzen: gebaut und im Betrieb */
.lz-ref{display:grid;grid-template-columns:repeat(6,1fr);gap:16px}
.lz-r{grid-column:span 2;border:1px solid var(--line);padding:28px 24px;background:rgba(255,255,255,.025);display:flex;flex-direction:column}
.lz-r.gross{grid-column:span 3}
.lz-r .tag{font:700 9.5px/1 var(--mono);letter-spacing:.14em;color:var(--gdh);text-transform:uppercase}
.lz-r h3{font:600 21px/1.2 var(--disp);color:#fff;margin:14px 0 10px}
.lz-r p{color:var(--mdk);font-size:14px;line-height:1.6;margin:0 0 18px;flex:1}
.lz-r .zahl{display:flex;gap:22px;flex-wrap:wrap;border-top:1px solid var(--line);padding-top:16px}
.lz-r .zahl div b{display:block;font:700 26px/1 var(--disp);color:var(--gdh)}
.lz-r .zahl div span{font:600 10px/1.4 var(--mono);letter-spacing:.06em;color:var(--ddk);text-transform:uppercase}

/* Ablauf */
.lz-ablauf{display:grid;grid-template-columns:repeat(5,1fr);gap:0;counter-reset:ab;position:relative}
.lz-ablauf::before{content:'';position:absolute;left:10%;right:10%;top:27px;height:2px;
  background:repeating-linear-gradient(90deg,var(--gd) 0 12px,transparent 12px 22px);opacity:.6}
.lz-a{text-align:center;padding:0 12px;position:relative}
.lz-a::before{counter-increment:ab;content:counter(ab,decimal-leading-zero);display:grid;place-items:center;width:56px;height:56px;
  margin:0 auto 18px;background:var(--ob);border:2px solid var(--gd);color:var(--gdh);font:700 15px/1 var(--mono);position:relative}
.lz-a b{display:block;font:600 16px/1.3 var(--disp);color:var(--ink);margin-bottom:8px}
.lz-a span{font-size:13.4px;line-height:1.6;color:var(--mut)}

/* Person */
.lz-person{display:grid;grid-template-columns:300px 1fr;gap:56px;align-items:center}
.lz-bild{aspect-ratio:4/5;border:1px solid var(--line);background:
  linear-gradient(160deg,rgba(255,255,255,.05),transparent 60%),var(--ob);
  display:grid;place-items:center;position:relative}
.lz-bild span{font:600 86px/1 var(--disp);color:var(--gdh);letter-spacing:-.04em}
.lz-bild small{position:absolute;bottom:14px;left:0;right:0;text-align:center;font:700 9.5px/1 var(--mono);letter-spacing:.14em;color:var(--ddk);text-transform:uppercase}
.lz-person h2{font:600 clamp(28px,3.4vw,42px)/1.12 var(--disp);color:#fff;margin:16px 0 18px}
.lz-person p{color:var(--mdk);font-size:16px;line-height:1.7;margin:0 0 18px}
.lz-kompetenz{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin:26px 0 0}
.lz-kompetenz div{border:1px solid var(--line);padding:14px 16px;color:var(--txtd);font-size:14px;display:flex;gap:10px;align-items:center}
.lz-kompetenz div::before{content:'◆';color:var(--gdh);font-size:10px}

/* Drei Wege */
.lz-wege{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.lz-w{background:#fff;border:1px solid var(--cream-line);padding:32px 28px;display:flex;flex-direction:column}
.lz-w.mitte{border:2px solid var(--gd);box-shadow:0 28px 60px -36px rgba(0,0,0,.45)}
.lz-w .tag{font:700 9.5px/1 var(--mono);letter-spacing:.14em;color:var(--gdi,var(--gd));text-transform:uppercase}
.lz-w h3{font:600 23px/1.2 var(--disp);color:var(--ink);margin:14px 0 6px}
.lz-w .preis{font:700 13px/1.4 var(--mono);color:var(--ink);margin-bottom:16px}
.lz-w p{font-size:14px;line-height:1.65;color:var(--mut);margin:0 0 18px;flex:1}
.lz-w a{display:block;text-align:center;padding:14px;min-height:44px;font:700 11px/1.4 var(--mono);letter-spacing:.12em;
  text-transform:uppercase;text-decoration:none;border:1px solid var(--ink);color:var(--ink)}
.lz-w.mitte a{background:var(--runway);border-color:transparent;color:#14100a}

/* Fragen */
.lz-fragen{max-width:820px;margin:0 auto}
.lz-fragen details{border-bottom:1px solid var(--line)}
.lz-fragen summary{cursor:pointer;list-style:none;padding:22px 40px 22px 0;font:600 17px/1.4 var(--disp);color:#fff;position:relative;min-height:44px}
.lz-fragen summary::-webkit-details-marker{display:none}
.lz-fragen summary::after{content:'+';position:absolute;right:4px;top:18px;font:400 26px/1 var(--disp);color:var(--gdh);transition:transform .3s}
.lz-fragen details[open] summary::after{transform:rotate(45deg)}
.lz-fragen p{margin:0 0 22px;color:var(--mdk);font-size:15px;line-height:1.7}

/* Abschluss */
.lz-cta{position:relative;overflow:hidden;background:var(--runway);color:#14100a;padding:88px 0;text-align:center}
.lz-cta h2{font:600 clamp(28px,4vw,50px)/1.1 var(--disp);letter-spacing:-.02em;margin:0 0 16px}
.lz-cta p{font-size:17px;line-height:1.6;max-width:640px;margin:0 auto 30px;color:rgba(20,16,10,.78)}
.lz-cta a.dunkel{display:inline-block;background:var(--ob);color:var(--gdh);padding:18px 34px;min-height:44px;
  font:700 12px/1.4 var(--mono);letter-spacing:.14em;text-transform:uppercase;text-decoration:none}
.lz-cta .mail{display:block;margin-top:16px;font:600 13px/1.4 var(--mono);color:#14100a}

/* ── Handy ───────────────────────────────────────────────────────────── */
@media(max-width:980px){
  .lz-hero-g,.lz-ziel.an,.lz-person{grid-template-columns:1fr}
  .lz-ziel-l{border-right:0;border-bottom:1px solid var(--line)}
  .lz-leist{grid-template-columns:1fr 1fr}
  .lz-l:nth-child(3n){border-right:1px solid var(--cream-line)}
  .lz-l:nth-child(2n){border-right:0}
  .lz-ref{grid-template-columns:1fr 1fr}
  .lz-r,.lz-r.gross{grid-column:span 1}
  .lz-ablauf{grid-template-columns:1fr;gap:26px}
  .lz-ablauf::before{display:none}
  .lz-a{display:grid;grid-template-columns:56px 1fr;gap:4px 16px;text-align:left;padding:0}
  .lz-a::before{grid-row:span 2;margin:0}
  .lz-wege,.lz-alltag{grid-template-columns:1fr}
  .lz-person{gap:32px}
  .lz-bild{max-width:260px}
}
@media(max-width:640px){
  .lz-hero{padding:56px 0 64px}
  .lz-sec{padding:72px 0}
  .lz-leist,.lz-ref,.lz-baut,.lz-kompetenz{grid-template-columns:1fr}
  .lz-l{border-right:0 !important}
  .lz-ziel-l,.lz-ziel-r{padding:28px 20px}
  .lz-tabs button{flex:1 1 calc(50% - 6px);padding:14px 8px}
}
@media(prefers-reduced-motion:reduce){.lz-step{transition:none;opacity:1}}

/* landing-loesungen-1c · nur noch zwei Wege */
.lz-wege.zwei{grid-template-columns:repeat(2,1fr);max-width:860px;margin:0 auto}
@media(max-width:980px){.lz-wege.zwei{grid-template-columns:1fr}}