/* Lösungen-Seiten (/loesungen und Unterseiten, EN /en/solutions): gleiche Gestaltung wie die Startseite.
   Grundlagen (Farben, Kopfzeile, Knöpfe, Karten, fünf Stufen, Personenkarten, Fusszeile) sind aus index.html übernommen;
   wer dort etwas ändert, zieht es hier nach. Darunter die Bausteine nur für diese Seiten. */
:root{
  --ink:#14171a; --text:#3a4046; --muted:#6b737b; --line:#e4e7eb;
  --navy:#004884; --navy-2:#00365f; --sky:#eef4fa; --bg2:#f5f7f9; --link:#0b6bcb;
  --radius:4px; --shadow:0 18px 40px rgba(0,72,132,.10);
  --sans:-apple-system,BlinkMacSystemFont,"Helvetica Neue",Helvetica,Arial,sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{font-family:var(--sans);color:var(--text);background:#fff;line-height:1.6;-webkit-font-smoothing:antialiased}
a{color:var(--link)}
img{max-width:100%;height:auto;display:block}
.wrap{max-width:1400px;margin:0 auto;padding:0 56px}
@media(max-width:900px){.wrap{padding:0 28px}}
@media(max-width:620px){.wrap{padding:0 22px}}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
:focus-visible{outline:3px solid #7fb0e0;outline-offset:2px;border-radius:4px}

/* Wortmarke und Kopfzeile */
.wm{font-weight:800;letter-spacing:-.04em;color:var(--ink);text-decoration:none;font-size:1.45rem;line-height:1;white-space:nowrap}
.wm span{font-weight:300;color:var(--navy)}
.top{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.88);backdrop-filter:saturate(180%) blur(12px);-webkit-backdrop-filter:saturate(180%) blur(12px);border-bottom:1px solid transparent;transition:border-color .2s}
.top.scrolled{border-bottom-color:var(--line)}
.top .wrap{display:flex;align-items:center;gap:28px;height:72px}
.nav{display:flex;gap:26px;margin-left:auto}
.nav a{color:var(--ink);text-decoration:none;font-size:.92rem;font-weight:600}
.nav a:hover,.nav a[aria-current]{color:var(--navy)}
.nav a[aria-current]{box-shadow:inset 0 -2px 0 var(--navy);padding-bottom:4px}
.top .dp{height:34px;width:auto;position:relative;top:-8px}
.menu-btn{display:none;margin-left:auto;background:var(--ink);color:#fff;border:0;border-radius:4px;padding:9px 13px;font:inherit;font-size:.78rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;cursor:pointer}
.mnav{display:none}
.lang{display:flex;align-items:center;gap:2px;font-size:.76rem;font-weight:800;letter-spacing:.06em}
.lang b,.lang a{padding:6px 8px;border-radius:3px;line-height:1}
.lang b{background:var(--sky);color:var(--navy)}
.lang a{color:var(--muted);text-decoration:none}
.lang a:hover{color:var(--navy)}
@media(max-width:420px){.top .wrap{gap:12px}}
@media(max-width:359px){.lang b{display:none}}
@media(max-width:400px){.lang b,.lang a{padding:6px 5px}.top .wrap{gap:10px}} /* drei Sprachen seit 12.10. */
@media(max-width:359px){.wm{font-size:1.28rem}}
@media(max-width:860px){
  .nav,.top .dp{display:none}
  .menu-btn{display:inline-block;margin-left:0}
  .lang{margin-left:auto}
  .mnav:not([hidden]){display:grid;position:absolute;top:72px;left:0;right:0;background:#fff;border-bottom:1px solid var(--line);box-shadow:0 16px 30px rgba(0,0,0,.08);padding:6px 0}
  .mnav a{padding:14px 24px;color:var(--ink);text-decoration:none;font-weight:600;border-top:1px solid var(--line)}
  .mnav a:first-child{border-top:0}
  .mnav a[aria-current]{color:var(--navy)}
}

/* Schrift und Knöpfe */
.eyebrow{font-size:.72rem;font-weight:800;letter-spacing:.26em;text-transform:uppercase;color:var(--navy)}
.bar{display:block;width:44px;height:3px;background:var(--navy);margin:20px 0 44px}
h1{font-size:clamp(2.2rem,4.4vw,3.6rem);line-height:1.05;letter-spacing:-.035em;color:var(--ink);font-weight:800}
h1 em{font-style:normal;font-weight:300;color:var(--navy)}
h2{font-size:clamp(1.8rem,3.4vw,2.6rem);line-height:1.12;letter-spacing:-.03em;color:var(--ink);font-weight:800}
.lead{font-size:clamp(1.05rem,1.45vw,1.22rem);color:var(--text);max-width:34em;margin-top:26px}
.ctas{display:flex;flex-wrap:wrap;gap:14px;margin-top:36px}
.btn{display:inline-flex;align-items:center;gap:10px;border-radius:4px;padding:14px 22px;font-weight:700;font-size:.95rem;text-decoration:none;border:2px solid var(--navy);transition:transform .15s,box-shadow .15s,background .15s}
.btn-solid{background:var(--navy);color:#fff}
.btn-solid:hover{background:var(--navy-2);transform:translateY(-1px);box-shadow:var(--shadow)}
.btn-ghost{background:transparent;color:var(--navy)}
.btn-ghost:hover{background:#fff;transform:translateY(-1px)}
.tag{display:inline-block;align-self:flex-start;font-size:.66rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--navy);background:var(--sky);border-radius:3px;padding:5px 10px;margin-bottom:12px}

/* Abschnitte und Karten */
section{scroll-margin-top:80px}
.sec{padding:96px 0}
.sec-sky{background:var(--sky)}
.sec-head{max-width:760px;margin-bottom:46px}
.sec-head p{font-size:1.08rem;margin-top:14px}
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.grid-2{grid-template-columns:repeat(2,1fr)}
@media(max-width:980px){.grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:620px){.grid,.grid-2{grid-template-columns:1fr}.sec{padding:72px 0}}
.card{display:flex;flex-direction:column;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;background:#fff;transition:transform .18s,box-shadow .18s,border-color .18s}
.card:hover{transform:translateY(-3px);box-shadow:var(--shadow);border-color:#d6dde4}
.card .img{position:relative;aspect-ratio:16/10;background:var(--bg2);overflow:hidden}
.card .img img{position:absolute;top:16px;left:16px;width:calc(100% - 32px);height:calc(100% - 32px);object-fit:contain;filter:drop-shadow(0 6px 14px rgba(0,0,0,.10))}
.card .body{padding:22px 22px 24px;display:flex;flex-direction:column;flex:1}
.card p{font-size:.94rem;margin-top:10px}
.card .links{margin-top:auto;padding-top:16px;font-size:.84rem;line-height:1.55;color:var(--muted);overflow-wrap:break-word}
.card .links b{color:var(--ink);font-weight:700}
.card .links a{color:var(--navy);font-weight:600;text-decoration:none;border-bottom:1.5px solid rgba(0,72,132,.35)}
.card .links a:hover{border-bottom-color:var(--navy)}
.ext::after{content:" ↗"}

/* Angebotskarten (wie Startseite) */
.offer h3{font-size:1.15rem;line-height:1.3;letter-spacing:-.01em;color:var(--ink)}
.offer h3 a{color:inherit;text-decoration:none}
.offer h3 a::after{content:"";position:absolute;inset:0}  /* ganze Karte klickbar */
.offer{position:relative}
.offer .links a{position:relative;z-index:1}
.feat{list-style:none;margin:14px 0 20px;display:grid;gap:7px;font-size:.9rem}
.feat li{position:relative;padding-left:22px}
.feat li::before{content:"";position:absolute;left:2px;top:.42em;width:10px;height:5px;border-left:2px solid var(--navy);border-bottom:2px solid var(--navy);transform:rotate(-45deg)}
.offer .price{margin-top:auto;padding-top:16px;border-top:1px solid var(--line);display:grid;gap:2px}
.offer .price b{font-size:1.02rem;font-weight:800;letter-spacing:-.01em;color:var(--navy)}
.offer .price span{font-size:.84rem;color:var(--muted)}
.offer .links{margin-top:0;padding-top:12px}
.more-link{display:inline-block;margin-top:16px;font-weight:700;font-size:.92rem;color:var(--navy);text-decoration:none}
a.more-link:hover{text-decoration:underline}
.more-link::after{content:" →"}

/* Fünf Stufen (wie Startseite) */
.process h3,.team h3{margin-top:12px;font-size:clamp(1.4rem,2.2vw,1.8rem);line-height:1.2;letter-spacing:-.02em;color:var(--ink)}
.steps{list-style:none;display:grid;grid-template-columns:repeat(5,1fr);gap:14px;margin-top:34px;counter-reset:step}
.steps li{position:relative;padding:76px 22px 26px;border-radius:var(--radius);border:1px solid rgba(0,72,132,.09);
  background:linear-gradient(135deg,var(--s1),var(--s2));font-size:.9rem;counter-increment:step}
.steps li:nth-child(1){--s1:#f8fafd;--s2:#eff4fa}
.steps li:nth-child(2){--s1:#f3f7fc;--s2:#e8f0f9}
.steps li:nth-child(3){--s1:#eef4fb;--s2:#e1ecf8}
.steps li:nth-child(4){--s1:#e8f1fa;--s2:#d9e7f6}
.steps li:nth-child(5){--s1:#e2edf9;--s2:#d0e2f4;border-color:rgba(0,72,132,.16)}
.steps li::before{content:counter(step);position:absolute;left:22px;top:22px;font-size:2.4rem;font-weight:300;line-height:1;color:var(--navy)}
.steps li b{display:block;color:var(--ink);font-size:1rem;letter-spacing:-.01em}
.steps li span{display:block;margin-top:6px}
.sec-sky .steps li:nth-child(1){--s1:#fff;--s2:#f6f9fd}
@media(max-width:1100px){.steps{grid-template-columns:repeat(3,1fr)}}
@media(max-width:700px){.steps{grid-template-columns:1fr;gap:10px}.steps li{padding:22px 20px 22px 76px}.steps li::before{top:20px}}

/* Wer dahinter steht (wie Startseite) */
.people{display:grid;grid-template-columns:repeat(2,1fr);gap:24px;margin-top:30px}
.person{display:grid;grid-template-columns:112px 1fr;gap:26px;align-items:start;padding:30px;background:#fff;border:1px solid var(--line);border-radius:var(--radius)}
.person img{width:112px;height:112px;border-radius:50%;object-fit:cover;filter:grayscale(1)}
.person h4{font-size:1.15rem;line-height:1.3;letter-spacing:-.01em;color:var(--ink)}
.person .role{margin-top:4px;font-size:.92rem;color:var(--muted)}
.person .focus-h{margin-top:16px;font-size:.68rem;font-weight:800;letter-spacing:.2em;text-transform:uppercase;color:var(--muted)}
.person ul{margin-top:6px;padding-left:18px;font-size:.94rem}
.person .links{margin-top:14px;font-size:.88rem;overflow-wrap:anywhere}
.person .links a{color:var(--navy);font-weight:600;text-decoration:none;border-bottom:1.5px solid rgba(0,72,132,.35)}
.person .links a:hover{border-bottom-color:var(--navy)}
@media(max-width:900px){.people{grid-template-columns:1fr}}
@media(max-width:520px){.person{grid-template-columns:1fr;gap:16px;padding:24px}.person img{width:96px;height:96px}}

/* Anfrage (wie Startseite) */
.offer-cta{background:var(--sky);border-radius:var(--radius);padding:30px 34px;display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:22px 40px}
.sec-sky .offer-cta{background:#fff;border:1px solid rgba(0,72,132,.12)}
.offer-cta h3{font-size:1.25rem;letter-spacing:-.02em;color:var(--ink)}
.offer-cta p{margin-top:6px;max-width:40em}
.offer-note{margin-top:14px;font-size:.8rem;color:var(--muted)}
@media(max-width:700px){.offer-cta{padding:24px}}

/* Fusszeile */
footer{border-top:1px solid var(--line);padding:40px 0 48px;font-size:.88rem;color:var(--muted)}
footer .wrap{display:flex;flex-wrap:wrap;gap:18px 40px;align-items:center;justify-content:space-between}
footer .who{display:grid;gap:4px}
footer .who strong{color:var(--ink)}
footer nav{display:flex;flex-wrap:wrap;gap:8px 22px}
footer a{color:var(--navy);text-decoration:none}
footer a:hover{text-decoration:underline}

/* ---------- Bausteine nur für die Lösungen-Seiten ---------- */

/* Seitenkopf: helles Blau mit leichtem Verlauf wie der Toolbox-Hintergrund, Text links, Screenshot rechts */
.phero{background:linear-gradient(115deg,#fcfdff 0%,#f6f9fd 48%,#ecf2fa 100%);border-bottom:1px solid #e6edf5}
.phero .wrap{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:36px 72px;align-items:center;padding-top:40px;padding-bottom:96px}
.phero .ptext{padding-top:12px}
.phero h1{margin-top:6px}
.phero .ctas{margin-top:34px}
.crumbs{grid-column:1/-1;font-size:.82rem;color:var(--muted)}
.crumbs ol{list-style:none;display:flex;flex-wrap:wrap;gap:6px}
.crumbs li+li::before{content:"›";margin-right:6px;color:#9aa3ab}
.crumbs a{color:var(--muted);text-decoration:none}
.crumbs a:hover{color:var(--navy);text-decoration:underline}
.pline{display:flex;flex-wrap:wrap;gap:6px 22px;margin-top:28px;padding-top:20px;border-top:1px solid #dbe4ee;font-size:.9rem;color:var(--muted)}
.pline b{color:var(--navy);font-weight:800}
@media(max-width:1100px){.phero .wrap{grid-template-columns:1fr;gap:44px;padding-bottom:72px}.phero .ptext{padding-top:20px}}

/* Screenshot im Browserrahmen */
.shot{position:relative;background:#fff;border:1px solid #d9e2ec;border-radius:8px;overflow:hidden;box-shadow:0 30px 70px rgba(0,40,80,.16),0 4px 12px rgba(0,40,80,.06)}
.shot-bar{display:flex;align-items:center;gap:6px;height:34px;padding:0 12px;background:#f3f6f9;border-bottom:1px solid #e3e9ef}
.shot-bar i{width:9px;height:9px;border-radius:50%;background:#d3dae1}
.shot-bar span{margin-left:10px;flex:1;min-width:0;max-width:340px;height:20px;border-radius:4px;background:#fff;border:1px solid #e3e9ef;font-size:.7rem;line-height:18px;padding:0 9px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.shot img{width:100%}
figure > figcaption{font-size:.82rem;line-height:1.5;color:var(--muted);margin-top:14px}
figure{margin:0}

/* Übersicht: drei Fenster leicht versetzt übereinander (Anlehnung an die erste Toolbox-Gestaltung) */
.stack{position:relative;aspect-ratio:16/12.4}
.stack .shot{position:absolute;width:74%}
.stack .s1{left:0;top:0;z-index:1}
.stack .s2{left:13%;top:19%;z-index:2}
.stack .s3{left:26%;top:38%;z-index:3}
@media(max-width:620px){.stack{aspect-ratio:16/13.6}.stack .shot{width:82%}.stack .s2{left:9%}.stack .s3{left:18%}}

/* So funktioniert es */
.how{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;counter-reset:how}
.how.three{grid-template-columns:repeat(3,1fr)}
.how li{list-style:none;padding:26px 24px 28px;background:#fff;border:1px solid var(--line);border-radius:var(--radius)}
.how .ic{width:44px;height:44px;border-radius:50%;background:var(--sky);color:var(--navy);display:grid;place-items:center}
.how .ic svg{width:22px;height:22px}
.how h3{margin-top:18px;font-size:1.05rem;line-height:1.3;letter-spacing:-.01em;color:var(--ink)}
.how p{margin-top:8px;font-size:.93rem}
@media(max-width:1100px){.how{grid-template-columns:repeat(2,1fr)}}
@media(max-width:620px){.how,.how.three{grid-template-columns:1fr}}
@media(min-width:621px) and (max-width:1100px){.how.three{grid-template-columns:repeat(3,1fr)}}
@media(min-width:621px) and (max-width:860px){.how.three{grid-template-columns:1fr}}

/* Live-Beispiel: Bild links, Kennzahlen rechts */
.live{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr);gap:64px;align-items:center}
.live h3{font-size:clamp(1.4rem,2.2vw,1.8rem);line-height:1.2;letter-spacing:-.02em;color:var(--ink);margin-top:12px}
.live .ltext p{margin-top:14px}
.kpis{list-style:none;display:grid;grid-template-columns:repeat(2,1fr);gap:18px 24px;margin-top:26px;padding-top:22px;border-top:1px solid #d6e1ec}
.kpis b{display:block;font-size:1.6rem;letter-spacing:-.03em;line-height:1.1;color:var(--ink);font-variant-numeric:tabular-nums}
.kpis span{font-size:.84rem;color:var(--muted)}
.live .btn{margin-top:28px}
.live-imgs{display:grid;gap:20px}
@media(max-width:1000px){.live{grid-template-columns:1fr;gap:40px}}

/* Lieferumfang: Einrichtung, Betrieb, auf Wunsch */
.scope{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.scope article{display:flex;flex-direction:column;padding:28px 26px;border:1px solid var(--line);border-radius:var(--radius);background:#fff}
.scope article.main{border-color:var(--navy);box-shadow:0 0 0 1px var(--navy)}
.scope .kind{font-size:.7rem;font-weight:800;letter-spacing:.18em;text-transform:uppercase;color:var(--muted)}
.scope .amount{margin-top:8px;font-size:1.5rem;font-weight:800;letter-spacing:-.03em;line-height:1.15;color:var(--navy)}
.scope .amount small{display:block;font-size:.84rem;font-weight:600;letter-spacing:0;color:var(--muted);margin-top:2px}
.scope .feat{margin:20px 0 0}
.scope .opt li::before{border:0;width:8px;height:2px;top:.72em;background:var(--navy);transform:none}
@media(max-width:980px){.scope{grid-template-columns:1fr}}

/* Vergleich auf der Übersicht */
.compare{width:100%;border-collapse:collapse;font-size:.93rem;background:#fff;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden}
.compare th,.compare td{padding:16px 18px;text-align:left;vertical-align:top;border-top:1px solid var(--line)}
.compare thead th{border-top:0;background:#f8fafc;font-size:.8rem;font-weight:800;color:var(--ink)}
.compare thead th:first-child{background:#fff}
.compare tbody th{font-size:.72rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);width:17%}
.compare thead a{color:var(--navy);text-decoration:none;font-size:1rem;letter-spacing:-.01em}
.compare thead a::after{content:" →"}
.compare .num{font-weight:800;color:var(--navy)}
@media(max-width:860px){
  .compare,.compare tbody,.compare tr,.compare td,.compare th{display:block;width:auto}
  .compare thead{display:none}
  .compare tr{padding:6px 0;border-top:1px solid var(--line)}
  .compare tr:first-child{border-top:0}
  .compare tbody th{padding:16px 18px 2px;border:0;width:auto}
  .compare td{padding:6px 18px;border:0}
  .compare td::before{content:attr(data-p);display:block;font-size:.76rem;font-weight:700;color:var(--ink)}
}

/* Was alle drei gemeinsam haben */
.pillars{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;margin-top:8px}
.pillars div{padding-top:20px;border-top:2px solid var(--navy)}
.pillars h3{font-size:1.02rem;letter-spacing:-.01em;color:var(--ink)}
.pillars p{margin-top:8px;font-size:.93rem}
@media(max-width:1000px){.pillars{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.pillars{grid-template-columns:1fr}}

/* Häufige Fragen: aufklappbar */
.faq{max-width:900px;border-top:1px solid #d6e1ec}
.faq details{border-bottom:1px solid #d6e1ec}
.faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;gap:24px;align-items:baseline;padding:20px 8px 20px 2px;font-weight:700;font-size:1.02rem;color:var(--ink)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";flex:none;font-size:1.4rem;font-weight:300;line-height:1;color:var(--navy);transition:transform .2s}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq summary:hover{color:var(--navy)}
.faq details p{padding:0 40px 22px 2px;font-size:.96rem}

/* Weitere Lösungen am Seitenende */
.others{display:grid;grid-template-columns:repeat(2,1fr);gap:24px}
.other{position:relative;display:grid;grid-template-columns:200px 1fr;gap:22px;align-items:center;padding:18px;border:1px solid var(--line);border-radius:var(--radius);background:#fff;transition:transform .18s,box-shadow .18s,border-color .18s}
.other:hover{transform:translateY(-3px);box-shadow:var(--shadow);border-color:#d6dde4}
.other .thumb{aspect-ratio:16/10;background:var(--bg2);border-radius:3px;overflow:hidden;padding:10px}
.other .thumb img{width:100%;height:100%;object-fit:contain}
.other h3{font-size:1.05rem;letter-spacing:-.01em;color:var(--ink)}
.other h3 a{color:inherit;text-decoration:none}
.other h3 a::after{content:"";position:absolute;inset:0}
.other p{margin-top:6px;font-size:.9rem}
.other .more-link{margin-top:10px}
@media(max-width:1000px){.others{grid-template-columns:1fr}}
@media(max-width:520px){.other{grid-template-columns:1fr}}

/* Reifegrad-Check: Beispielauswertung als Netzdiagramm */
.radar{background:#fff;border:1px solid #d9e2ec;border-radius:8px;box-shadow:0 30px 70px rgba(0,40,80,.16),0 4px 12px rgba(0,40,80,.06);padding:26px 26px 22px}
.radar-head{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;flex-wrap:wrap}
.radar-head small{display:block;font-size:.66rem;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.radar-head b{display:block;margin-top:4px;font-size:1.25rem;letter-spacing:-.02em;color:var(--ink)}
.radar-head .lvl{font-size:.78rem;font-weight:800;color:#fff;background:#2f6fb5;border-radius:3px;padding:6px 10px;white-space:nowrap}
.radar svg{display:block;width:100%;height:auto;margin-top:6px}
.radar svg text{font-family:var(--sans);font-size:13px;fill:#3a4046}
.radar .levels{list-style:none;display:grid;grid-template-columns:repeat(4,1fr);gap:6px;margin-top:10px;font-size:.74rem;color:var(--muted)}
.radar .levels li{padding-top:7px;border-top:3px solid var(--c)}
.radar .levels b{display:block;color:var(--ink);font-size:.8rem}
.radar .levels li.on{color:var(--ink);border-top-width:5px;padding-top:5px}
.radar .levels li.on b{color:var(--ink)}
@media(max-width:520px){.radar{padding:18px 16px}.radar svg text{font-size:15px}.radar .levels{grid-template-columns:repeat(2,1fr)}}