/* ================= Unterseiten: Leistungen, Leistung, Case Study, Über Kiraki ================= */

/* ---------- Leistungen: Kopf mit Plattenreihe ---------- */
.lh { padding: calc(var(--tb) + clamp(3rem, 6vw, 5rem)) 0 clamp(2rem, 4vw, 3rem); }
.lh-grid { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); gap: 2rem 4rem; align-items: center; }
.lh .h1 { margin-top: 1rem; }
.lh .lead { margin-top: 1.4rem; }
.stapel { position: relative; height: 380px; }
.stapel a { position: absolute; width: 170px; text-decoration: none; transition: transform .45s var(--ease); }
.stapel a .mslab-svg { width: 170px; height: 170px; }
.stapel a .stapel-t { position: absolute; left: 50%; top: -1.4rem; translate: -50% 0; white-space: nowrap; font-family: var(--mono); font-size: 11px; letter-spacing: 0.08em; color: var(--ink-2); opacity: 0; transition: opacity .25s; background: var(--paper); padding: 2px 6px; border-radius: 3px; }
.stapel a:hover, .stapel a:focus-visible { transform: translateY(-14px); }
.stapel a:hover .stapel-t, .stapel a:focus-visible .stapel-t { opacity: 1; color: var(--cobalt); }
.stapel a:nth-child(1) { left: 0%; top: 150px; z-index: 5; }
.stapel a:nth-child(2) { left: 18%; top: 112px; z-index: 4; }
.stapel a:nth-child(3) { left: 36%; top: 74px; z-index: 3; }
.stapel a:nth-child(4) { left: 54%; top: 36px; z-index: 2; }
.stapel a:nth-child(5) { left: 72%; top: -2px; z-index: 1; }
@media (max-width: 980px) { .lh-grid { grid-template-columns: 1fr; } .stapel { height: 300px; transform: scale(.8); transform-origin: left top; } }

.subnav { position: sticky; top: var(--tb); z-index: 20; background: rgba(241, 238, 228, .94); backdrop-filter: blur(8px); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.subnav ul { list-style: none; margin: 0 auto; padding: 0 var(--pad); max-width: var(--wrap); display: flex; gap: 0; overflow-x: auto; scrollbar-width: none; }
.subnav a { display: flex; align-items: center; gap: 0.6rem; height: 56px; padding: 0 1.2rem; white-space: nowrap; text-decoration: none; font-size: 14.5px; font-weight: 550; border-bottom: 2px solid transparent; }
.subnav li:first-child a { padding-left: 0; }
.subnav a .nr { font-size: 11px; }
.subnav a.is-on { border-bottom-color: var(--cobalt); color: var(--cobalt); }

.lsec { padding: clamp(4rem, 8vw, 7rem) 0; border-bottom: 1px solid var(--line); scroll-margin-top: calc(var(--tb) + 56px); }
.lsec:nth-of-type(even) { background: var(--paper-2); }
.lsec-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 3rem clamp(2rem, 5vw, 5.5rem); align-items: start; }
.lsec-head { position: sticky; top: calc(var(--tb) + 90px); }
.lsec-head .mslab-svg { width: 150px; height: 150px; margin-left: -0.6rem; }
.lsec-head .nr { display: block; margin-top: 0.4rem; }
.lsec-head h2 { margin: 0.4rem 0 0; font-stretch: 112%; font-weight: 800; font-size: clamp(2rem, 3.2vw, 3.2rem); letter-spacing: -0.035em; line-height: 1; }
.lsec-head .claim { margin: 1.1rem 0 0; font-size: clamp(1.1rem, 1.4vw, 1.3rem); font-weight: 600; line-height: 1.35; max-width: 22em; }
.lsec-head p:not(.claim) { margin: 0.8rem 0 0; color: var(--ink-2); max-width: 30em; }
.bauen { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
.bauen li { background: var(--panel); padding: 1.4rem 1.4rem 1.5rem; }
.bauen b { display: block; font-size: 17px; font-weight: 700; letter-spacing: -0.01em; }
.bauen span { display: block; margin-top: 0.45rem; font-size: 14.5px; color: var(--ink-2); line-height: 1.5; }
.blk { margin-top: 1.8rem; }
.blk > .mlabel { margin-bottom: 0.8rem; }
.chips { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.chips span { font-size: 13.5px; padding: 0.35rem 0.7rem; border: 1px solid var(--line-2); border-radius: 6px; background: var(--panel); }
.teilreihe { display: flex; flex-wrap: wrap; gap: 0.3rem 0.1rem; }
.teilreihe figure { margin: 0; width: 70px; text-align: center; }
.teilreihe .mslab-svg { width: 62px; height: 62px; margin: 0 auto; }
.teilreihe figcaption { font-family: var(--mono); font-size: 10px; color: var(--ink-3); line-height: 1.3; margin-top: 0.2rem; }
.teilreihe figure.is-hot figcaption { color: var(--cobalt); }
.teilreihe figure:not(.is-hot) .mslab-svg { opacity: .45; }
.beleg-box { display: grid; grid-template-columns: auto 1fr; gap: 0.3rem 1rem; align-items: center; margin-top: 1.8rem; padding: 1.1rem 1.2rem; border: 1px solid var(--ink); border-radius: 10px; background: var(--panel); text-decoration: none; transition: background .2s; }
.beleg-box:hover { background: #fff; }
.beleg-box img { width: 150px; grid-row: span 2; }
.beleg-box b { font-size: 15px; }
.beleg-box span { font-size: 14px; color: var(--ink-2); }
.lsec-more { display: inline-block; margin-top: 1.6rem; font-weight: 650; color: var(--cobalt); text-decoration: none; }
.lsec-more:hover { text-decoration: underline; }
@media (max-width: 980px) {
  .lsec-grid { grid-template-columns: 1fr; }
  .lsec-head { position: static; }
  .bauen { grid-template-columns: 1fr; }
  .beleg-box { grid-template-columns: 1fr; } .beleg-box img { grid-row: auto; }
}

.indi-band { background: var(--ink); color: var(--paper); }
.indi-band .mlabel { color: rgba(241, 238, 228, .6); }
.indi-band-in { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 2rem 4rem; align-items: end; }
.indi-band p:not(.mlabel) { color: rgba(241, 238, 228, .75); font-size: 18px; margin: 1.2rem 0 0; max-width: 32em; }
.indi-band .btn--line { border-color: rgba(241, 238, 228, .6); color: var(--paper); }
.indi-band .btn--line:hover { background: var(--paper); color: var(--ink); }
@media (max-width: 900px) { .indi-band-in { grid-template-columns: 1fr; } }

/* ---------- Leistungs-Unterseite ---------- */
.ph { padding: calc(var(--tb) + clamp(2.5rem, 6vw, 5rem)) 0 clamp(3rem, 6vw, 5rem); }
.ph-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 3rem clamp(2rem, 5vw, 5rem); align-items: center; }
.ph-icon .mslab-svg { width: 120px; height: 120px; margin: -0.6rem 0 0.4rem -0.8rem; }
.ph .lead { margin-top: 1.4rem; }
.ph-points { list-style: none; margin: 1.8rem 0 0; padding: 1.2rem 0 0; border-top: 1px solid var(--line-2); display: grid; gap: 0.5rem; }
.ph-points li { display: flex; gap: 0.7rem; font-weight: 550; }
.ph-points li::before { content: "→"; font-family: var(--mono); color: var(--cobalt); }
.ph-ctas { display: flex; flex-wrap: wrap; gap: 1rem 1.4rem; align-items: center; margin-top: 2rem; }
@media (max-width: 980px) { .ph-grid { grid-template-columns: 1fr; } }

.praxis { background: var(--night); color: var(--night-text); }
.praxis .mlabel { color: var(--night-text-2); }
.praxis-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 3rem 5rem; align-items: center; }
.praxis h2 { margin: 1rem 0 0; font-stretch: 112%; font-weight: 800; font-size: clamp(2rem, 3.2vw, 3.2rem); letter-spacing: -0.03em; line-height: 1.02; }
.praxis p:not(.mlabel) { color: var(--night-text-2); margin: 1.2rem 0 1.6rem; }
.praxis dl { display: grid; grid-template-columns: repeat(3, 1fr); margin: 0; }
.praxis dl div { border-top: 1px solid var(--night-line); padding: 1.2rem 1rem 0 0; }
.praxis dt { font-stretch: 112%; font-weight: 800; font-size: clamp(2rem, 3vw, 3rem); letter-spacing: -0.03em; line-height: 1; }
.praxis dd { margin: 0.4rem 0 0; font-size: 13.5px; color: var(--night-text-2); }
@media (max-width: 900px) { .praxis-grid { grid-template-columns: 1fr; } }
@media (max-width: 600px) { .praxis dl { grid-template-columns: minmax(0, 1fr); } .praxis dl div { padding-bottom: 1rem; } }

/* ---------- Case Study ---------- */
.ch { background: var(--night); color: var(--night-text); padding: calc(var(--tb) + clamp(3rem, 6vw, 5rem)) 0 0; overflow: hidden; }
.ch .mlabel { color: var(--night-text-2); }
.ch-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 2rem 3rem; align-items: center; padding-bottom: clamp(2rem, 4vw, 3rem); }
.ch .h1 { margin-top: 1.2rem; font-size: clamp(2.5rem, 4.3vw, 4.9rem); }
.ch .h1 .hl { color: #7d8dff; }
.ch-lead { margin: 1.4rem 0 0; font-size: clamp(1.05rem, 1.35vw, 1.3rem); color: var(--night-text-2); max-width: 34em; }
.ch-facts { margin: 2.2rem 0 0; display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid var(--night-line); }
.ch-facts div { padding: 1rem 1rem 1rem 0; border-bottom: 1px solid var(--night-line); }
.ch-facts dt { font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--night-text-2); }
.ch-facts dd { margin: 0.3rem 0 0; font-size: 15px; }
.ch-facts .live { display: inline-flex; align-items: center; gap: 0.45rem; }
.ch-facts .live::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: #3ddc84; box-shadow: 0 0 0 4px rgba(61, 220, 132, .18); }
.ch-ctas { display: flex; flex-wrap: wrap; gap: 0.8rem; margin-top: 1.6rem; }
.ch-ctas .btn--line { border-color: rgba(237, 235, 224, .55); color: var(--night-text); }
.ch-ctas .btn--line:hover { background: var(--night-text); color: var(--night); }
.ch-stage { position: relative; }
.ch-stage img { width: 100%; height: auto; max-height: calc(100vh - var(--tb) - 140px); object-fit: contain; }
.ch-data { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 0; padding: 0 0 clamp(3rem, 6vw, 5rem); }
.ch-data div { border-top: 1px solid var(--night-line); padding: 1.3rem 1rem 0 0; }
.ch-data dt { font-stretch: 112%; font-weight: 800; font-size: clamp(2.2rem, 4vw, 4rem); letter-spacing: -0.035em; line-height: 1; }
.ch-data dd { margin: 0.5rem 0 0; font-size: 14px; color: var(--night-text-2); }
@media (max-width: 900px) { .ch-grid { grid-template-columns: 1fr; } .ch-stage { margin-right: 0; } .ch-stage img { width: 100%; margin: 0; } .ch-data { grid-template-columns: 1fr 1fr; row-gap: 1.2rem; } }

.stufe { display: block; font-family: var(--mono); font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-2); }
.rolle { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0.5rem; margin-top: 2.2rem; }
.rolle div { border: 1px solid var(--cobalt); background: var(--cobalt); color: #fff; border-radius: 8px; padding: 1rem 1rem 1.1rem; }
.rolle b { display: block; font-size: 15px; }
.rolle span { display: block; font-size: 13px; opacity: .8; margin-top: 0.3rem; line-height: 1.4; }
.rolle-note { margin: 1.2rem 0 0; font-size: 14px; color: var(--ink-2); max-width: 56em; }
@media (max-width: 900px) { .rolle { grid-template-columns: 1fr 1fr; } }

.lage { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
.lage div { padding: 1.4rem; border: 1px dashed var(--ink-3); border-radius: 10px; }
.lage b { display: block; font-size: 17px; }
.lage span { display: block; margin-top: 0.4rem; color: var(--ink-2); font-size: 15px; }
.ziel { margin-top: 1rem; padding: 1.4rem 1.6rem; border-radius: 10px; background: var(--cobalt); color: #fff; font-size: clamp(1.1rem, 1.6vw, 1.45rem); font-weight: 650; }
@media (max-width: 900px) { .lage { grid-template-columns: 1fr; } }

.screen-grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 3rem clamp(2rem, 5vw, 5rem); align-items: start; }
.browser { position: relative; border: 1px solid var(--line-2); border-radius: 12px; overflow: hidden; background: #fff; box-shadow: 0 40px 80px -45px rgba(18, 21, 28, .45); }
.browser-bar { display: flex; align-items: center; gap: 6px; height: 34px; padding: 0 12px; background: var(--paper-2); border-bottom: 1px solid var(--line); }
.browser-bar i { width: 9px; height: 9px; border-radius: 50%; background: var(--ink-3); opacity: .5; }
.browser-bar span { margin-left: 10px; font-family: var(--mono); font-size: 11px; color: var(--ink-2); }
.browser img { width: 100%; }
.pin { position: absolute; width: 30px; height: 30px; border-radius: 50%; background: var(--cobalt); color: #fff; display: grid; place-items: center; font-family: var(--mono); font-size: 12px; box-shadow: 0 0 0 6px rgba(18, 51, 238, .18); translate: -50% -50%; }
.notes { list-style: none; margin: 1.6rem 0 0; padding: 0; counter-reset: n; }
.notes li { counter-increment: n; display: grid; grid-template-columns: 2.4rem 1fr; padding: 1rem 0; border-top: 1px solid var(--line); }
.notes li::before { content: counter(n); width: 26px; height: 26px; border-radius: 50%; background: var(--cobalt); color: #fff; display: grid; place-items: center; font-family: var(--mono); font-size: 11.5px; }
.notes b { display: block; font-size: 16px; }
.notes span { display: block; font-size: 14.5px; color: var(--ink-2); margin-top: 0.2rem; }
.sticky-col { position: sticky; top: calc(var(--tb) + 2rem); }
@media (max-width: 980px) { .screen-grid { grid-template-columns: 1fr; } .sticky-col { position: static; } }

.kapitel { margin-top: 1.6rem; display: grid; gap: 1.2rem; }
.kapitel h3 { margin: 0 0 0.4rem; font-family: var(--mono); font-weight: 400; font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--cobalt); }
.kapitel ol { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line-2); }
.kapitel li { display: grid; grid-template-columns: 2.4rem 1fr; padding: 0.55rem 0; border-bottom: 1px solid var(--line); font-size: 15px; }
.kapitel li span { font-family: var(--mono); font-size: 12px; color: var(--ink-3); padding-top: 0.15rem; }

.pipe { background: var(--night); color: var(--night-text); }
.pipe .mlabel { color: var(--night-text-2); }
.pipe .h2 { color: var(--night-text); }
.pipe .lead { color: var(--night-text-2); }
.pipe-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 0.8rem; position: relative; }
.pipe-steps::before { content: ""; position: absolute; left: 0; right: 0; top: 30px; height: 2px; background: var(--night-line); }
.pipe-steps::after { content: ""; position: absolute; left: 0; top: 30px; height: 2px; width: calc(var(--p, 0) * 100%); background: #7d8dff; transition: width .6s var(--ease); }
.pipe-steps li { position: relative; padding-top: 4.2rem; }
.pipe-steps li:not(.is-on) h3 { color: var(--night-text-2); }
.pipe-steps li::before { content: ""; position: absolute; left: 0; top: 19px; width: 24px; height: 24px; border-radius: 50%; background: var(--night); border: 2px solid var(--night-text-2); transition: all .4s; }
.pipe-steps li.is-on::before { background: #7d8dff; border-color: #7d8dff; box-shadow: 0 0 0 7px rgba(125, 141, 255, .18); }
.pipe-steps .tag { display: inline-block; font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.12em; text-transform: uppercase; padding: 0.2rem 0.45rem; border-radius: 4px; border: 1px solid var(--night-line); color: var(--night-text-2); }
.pipe-steps .tag--ki { border-color: rgba(125, 141, 255, .6); color: #aab5ff; }
.pipe-steps .tag--code { border-color: rgba(237, 235, 224, .6); color: var(--night-text); }
.pipe-steps h3 { margin: 0.7rem 0 0; font-size: 18px; font-weight: 700; }
.pipe-steps p { margin: 0.45rem 0 0; font-size: 14px; color: var(--night-text-2); line-height: 1.5; }
.pipe-note { margin-top: 2.6rem; display: flex; flex-wrap: wrap; gap: 0.6rem 2rem; font-family: var(--mono); font-size: 12px; color: var(--night-text-2); }
@media (max-width: 1100px) { .pipe-steps { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 2rem; } .pipe-steps::before, .pipe-steps::after { display: none; } }
@media (max-width: 640px) { .pipe-steps { grid-template-columns: 1fr 1fr; } }

.mi { border: 1px solid var(--line-2); border-radius: 12px; overflow: hidden; background: var(--panel); box-shadow: 0 40px 80px -50px rgba(18, 21, 28, .4); }
.mi-head { display: flex; justify-content: space-between; align-items: center; padding: 0.9rem 1.1rem; border-bottom: 1px solid var(--line); }
.mi-head b { font-size: 14px; }
.mi-tabs { display: flex; gap: 0.3rem; }
.mi-tabs span { font-size: 12px; padding: 0.25rem 0.55rem; border-radius: 5px; color: var(--ink-2); }
.mi-tabs span.on { background: var(--ink); color: var(--paper); }
.mi table { width: 100%; border-collapse: collapse; font-size: 13px; }
.mi th { text-align: left; font-weight: 500; font-size: 11px; color: var(--ink-2); padding: 0.6rem 0.8rem; border-bottom: 1px solid var(--line); background: var(--paper); }
.mi td { padding: 0.65rem 0.8rem; border-bottom: 1px solid var(--line); font-variant-numeric: tabular-nums; }
.mi td:first-child { font-family: var(--mono); font-size: 12px; }
.mi .s { display: inline-block; font-size: 11px; padding: 0.1rem 0.45rem; border-radius: 4px; border: 1px solid var(--line-2); }
.mi .s--a { background: var(--cobalt); color: #fff; border-color: var(--cobalt); }
.mi .s--g { border-color: var(--cobalt); color: var(--cobalt); }
.mi-foot { padding: 0.7rem 1rem; font-family: var(--mono); font-size: 11px; color: var(--ink-3); }
.mi-points { list-style: none; margin: 1.6rem 0 0; padding: 0; display: grid; gap: 0; border-top: 1px solid var(--line-2); }
.mi-points li { padding: 0.9rem 0; border-bottom: 1px solid var(--line); }
.mi-points b { display: block; }
.mi-points span { color: var(--ink-2); font-size: 15px; }

.betrieb-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; }
.betrieb-grid div { padding: 1.4rem; background: var(--panel); border: 1px solid var(--line); border-radius: 10px; }
.betrieb-grid b { display: block; font-size: 16px; }
.betrieb-grid span { display: block; margin-top: 0.4rem; font-size: 14.5px; color: var(--ink-2); }
.grenzen { margin-top: 2.4rem; display: grid; grid-template-columns: auto 1fr; gap: 1rem 3rem; align-items: start; padding-top: 1.6rem; border-top: 1px solid var(--line-2); }
.grenzen ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.5rem; }
.grenzen b { display: block; font-size: 15.5px; }
.grenzen span { display: block; font-size: 14px; color: var(--ink-2); margin-top: 0.2rem; }
@media (max-width: 980px) { .betrieb-grid { grid-template-columns: 1fr 1fr; } .grenzen, .grenzen ul { grid-template-columns: 1fr; } }

.transfer { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; }
.transfer a { display: block; padding: 1.4rem 1.4rem 1.5rem; background: var(--panel); border: 1px solid var(--line); border-radius: 12px; text-decoration: none; transition: border-color .2s, transform .3s var(--ease); }
.transfer a:hover { border-color: var(--ink); transform: translateY(-3px); }
.transfer .mslab-svg { width: 76px; height: 76px; margin: -0.3rem 0 0.4rem -0.4rem; }
.transfer b { display: block; font-size: 17px; }
.transfer span { display: block; margin-top: 0.4rem; font-size: 14.5px; color: var(--ink-2); }
.transfer em { display: block; margin-top: 0.9rem; font-style: normal; font-size: 13.5px; font-weight: 600; color: var(--cobalt); }
@media (max-width: 980px) { .transfer { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .transfer { grid-template-columns: 1fr; } }

/* ---------- Über Kiraki ---------- */
.uh {
  padding: calc(var(--tb) + clamp(4rem, 9vw, 8rem)) 0 clamp(3rem, 6vw, 5rem);
  background-image: linear-gradient(180deg, rgba(241, 238, 228, .2) 0%, rgba(241, 238, 228, .55) 55%, #F1EEE4 97%), url("../img/hero-bg-desktop.webp?v=3ee59dfc");
  background-size: cover; background-position: center;
}
.uh .h1 { margin-top: 1.2rem; font-size: clamp(2.8rem, 6vw, 6.4rem); max-width: 14ch; }
.uh .h1 .hl { color: var(--cobalt); }
.uh .lead { margin-top: 1.6rem; max-width: 36em; }
.fakten { display: flex; flex-wrap: wrap; margin: clamp(2.5rem, 5vw, 4rem) 0 0; padding: 0; list-style: none; border-top: 1px solid var(--line-2); border-bottom: 1px solid var(--line-2); }
.fakten li { flex: 1 1 180px; padding: 1rem 1.2rem 1rem 0; font-family: var(--mono); font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-2); }
.fakten li + li { padding-left: 1.2rem; border-left: 1px solid var(--line); }

.gruender { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); gap: 3rem clamp(2rem, 5vw, 5rem); align-items: center; }
.gruender figure { margin: 0; position: relative; }
.gruender img { width: 100%; border-radius: 14px; aspect-ratio: 3 / 2; object-fit: cover; }
.gruender figcaption { margin-top: 0.8rem; font-family: var(--mono); font-size: 12px; color: var(--ink-2); letter-spacing: 0.04em; }
.gruender p:not(.mlabel) { color: var(--ink-2); font-size: 17px; margin: 1.2rem 0 0; }
.gruender-facts { display: grid; grid-template-columns: repeat(3, 1fr); margin: 2rem 0 0; }
.gruender-facts div { border-top: 1.5px solid var(--ink); padding: 1rem 1rem 0 0; }
.gruender-facts dt { font-stretch: 112%; font-weight: 800; font-size: clamp(1.4rem, 2vw, 1.9rem); letter-spacing: -0.02em; line-height: 1.05; }
.gruender-facts dd { margin: 0.35rem 0 0; font-size: 13.5px; color: var(--ink-2); }
.quote { margin: 2rem 0 0; padding-left: 1.2rem; border-left: 3px solid var(--cobalt); font-size: clamp(1.15rem, 1.6vw, 1.45rem); font-weight: 650; line-height: 1.35; }
@media (max-width: 980px) { .gruender { grid-template-columns: 1fr; } }

.breite { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0.8rem; }
.breite a { display: block; padding: 1.2rem 1.1rem 1.3rem; background: var(--panel); border: 1px solid var(--line); border-radius: 12px; text-decoration: none; transition: border-color .2s, transform .3s var(--ease); }
.breite a:hover { border-color: var(--ink); transform: translateY(-3px); }
.breite .mslab-svg { width: 84px; height: 84px; margin: -0.3rem 0 0.4rem -0.4rem; }
.breite b { display: block; font-size: 16px; line-height: 1.25; }
.breite span { display: block; margin-top: 0.4rem; font-size: 13.5px; color: var(--ink-2); }
@media (max-width: 1100px) { .breite { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 640px) { .breite { grid-template-columns: 1fr 1fr; } }

.netz-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 3rem clamp(2rem, 5vw, 5rem); align-items: center; }
.netz { width: 100%; height: auto; }
.netz .ln { stroke: var(--ink); stroke-opacity: .35; stroke-width: 1.2; fill: none; }
.netz .ln--on { stroke: var(--cobalt); stroke-opacity: 1; stroke-width: 1.8; stroke-dasharray: 6 6; animation: netzfluss 1.6s linear infinite; }
@keyframes netzfluss { to { stroke-dashoffset: -24; } }
.netz .nd { fill: var(--panel); stroke: var(--ink); stroke-width: 1.2; }
.netz .nd--k { fill: var(--cobalt); stroke: var(--cobalt); }
.netz text { font-family: var(--sans); font-size: 15px; font-weight: 650; fill: var(--ink); }
.netz .sub { font-family: var(--mono); font-size: 11px; font-weight: 400; letter-spacing: 0.1em; fill: var(--ink-2); }
.netz .kw { fill: #fff; font-stretch: 125%; font-weight: 800; letter-spacing: 0.12em; font-size: 16px; }
.netz-points { list-style: none; margin: 1.8rem 0 0; padding: 0; border-top: 1px solid var(--line-2); }
.netz-points li { display: flex; gap: 0.7rem; padding: 0.8rem 0; border-bottom: 1px solid var(--line); font-size: 15.5px; }
.netz-points li::before { content: "→"; font-family: var(--mono); color: var(--cobalt); }
@media (max-width: 980px) { .netz-grid { grid-template-columns: 1fr; } }

.prinzip { background: var(--night); color: var(--night-text); }
.prinzip .mlabel { color: var(--night-text-2); }
.prinzip .h2 { color: var(--night-text); }
.prinzip-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; border-top: 1px solid var(--night-line); }
.prinzip-grid div { padding: 1.8rem 1.8rem 2rem 0; border-bottom: 1px solid var(--night-line); }
.prinzip-grid div:not(:nth-child(3n+1)) { padding-left: 1.8rem; border-left: 1px solid var(--night-line); }
.prinzip-grid .nr { color: #7d8dff; }
.prinzip-grid b { display: block; margin-top: 0.7rem; font-size: 20px; font-weight: 700; letter-spacing: -0.015em; line-height: 1.25; }
.prinzip-grid span:not(.nr) { display: block; margin-top: 0.6rem; color: var(--night-text-2); font-size: 15px; }
@media (max-width: 980px) { .prinzip-grid { grid-template-columns: 1fr; } .prinzip-grid div, .prinzip-grid div:not(:nth-child(3n+1)) { padding: 1.4rem 0; border-left: 0; } }

.radius { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 2rem 4rem; align-items: end; }
.radius .big { margin: 0.8rem 0 0; font-stretch: 112%; font-weight: 800; font-size: clamp(2.2rem, 4.2vw, 4.2rem); letter-spacing: -0.035em; line-height: 1; }
.radius p:not(.mlabel):not(.big) { color: var(--ink-2); margin: 0; }
@media (max-width: 900px) { .radius { grid-template-columns: 1fr; } }

/* Beleg-Visual */
.beleg { position: relative; min-height: 470px; }
.beleg-doc {
  position: absolute; left: 0; top: 18px; width: 45%;
  background: #fff; border: 1px solid var(--line); border-radius: 4px;
  padding: 22px 22px 26px; transform: rotate(-2deg);
  box-shadow: 0 30px 60px -30px rgba(18, 21, 28, .35), 0 2px 0 rgba(18, 21, 28, .04);
  font-size: 11.5px; color: #333;
}
.bd-head { display: flex; justify-content: space-between; align-items: start; padding-bottom: 12px; border-bottom: 1px solid #ddd; }
.bd-head b { font-family: var(--mono); font-weight: 400; font-size: 13px; letter-spacing: 0.14em; color: var(--ink); }
.bd-head span { display: block; color: #5f6168; line-height: 1.5; }
.bd-table { width: 100%; border-collapse: collapse; margin-top: 12px; }
.bd-table th { text-align: left; font-weight: 500; color: #62646b; font-size: 10px; padding: 4px 4px; border-bottom: 1px solid #e5e5e5; }
.bd-table td { padding: 5px 4px; border-bottom: 1px solid #f0f0f0; }
.bd-table td:last-child, .bd-table th:last-child { text-align: right; }
.bd-dots td { color: #6b6d74; letter-spacing: 0.2em; }
.bd-sum td { font-weight: 700; color: var(--ink); border-bottom: 0; padding-top: 8px; }
.hl-box { outline: 1.5px solid var(--cobalt); outline-offset: 1px; border-radius: 2px; background: rgba(18, 51, 238, .06); }
.hl-box--warn { outline-color: var(--ink); background: rgba(18, 21, 28, .06); }

.beleg-data {
  position: absolute; right: 0; top: 64px; width: 47%;
  background: var(--panel); border: 1px solid var(--ink); border-radius: 10px;
  box-shadow: 0 30px 60px -34px rgba(18, 21, 28, .45); overflow: hidden;
}
.bdd-head { display: flex; justify-content: space-between; align-items: center; padding: 12px 16px; border-bottom: 1px solid var(--line); }
.bdd-head b { font-size: 14px; font-weight: 650; }
.bdd-head span { font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.1em; color: var(--ink-2); text-transform: uppercase; }
.bdd-row { display: grid; grid-template-columns: minmax(0, 1fr) auto 18px; gap: 10px; align-items: center; padding: 9px 16px; border-bottom: 1px solid var(--line); font-size: 14px; }
.bdd-row:last-child { border-bottom: 0; }
.bdd-row .k { display: block; font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-2); }
.bdd-row .v { font-weight: 600; font-variant-numeric: tabular-nums; }
.bdd-row .f { font-family: var(--mono); font-size: 10.5px; color: var(--ink-2); background: var(--paper-2); padding: 2px 6px; border-radius: 4px; }
.bdd-row .ok { width: 16px; height: 16px; border-radius: 50%; background: var(--cobalt); display: grid; place-items: center; }
.bdd-row .ok svg, .bdd-row .no svg { width: 10px; height: 10px; stroke: #fff; stroke-width: 3; fill: none; }
.bdd-row .no { width: 16px; height: 16px; border-radius: 50%; background: var(--ink); display: grid; place-items: center; }
.bdd-row--warn { background: rgba(18, 21, 28, .045); }
.bdd-flag { display: flex; flex-direction: column; gap: 2px; padding: 12px 16px; background: var(--ink); color: var(--paper); font-size: 13.5px; }
.bdd-flag span { font-family: var(--mono); font-size: 11px; color: rgba(241, 238, 228, .7); }
.beleg-lines { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; }
.beleg-lines path { fill: none; stroke: var(--cobalt); stroke-width: 1.2; stroke-dasharray: 4 4; }
.beleg-lines path.warn { stroke: var(--ink); }
.beleg-lines circle { fill: var(--cobalt); }
.beleg-lines circle.warn { fill: var(--ink); }
.beleg-note { position: absolute; left: 0; bottom: 0; font-family: var(--mono); font-size: 11px; color: var(--ink-3); letter-spacing: 0.06em; }
@media (max-width: 640px) {
  .beleg { min-height: 0; display: grid; gap: 1rem; }
  .beleg-doc, .beleg-data { position: static; width: auto; transform: none; }
  .beleg-lines { display: none; }
  .beleg-note { position: static; }
}

/* Ablauf mit Teilen */
.lauf { background: var(--paper-2); }
.lauf-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 1.25rem; position: relative; }
.lauf-steps::before { content: ""; position: absolute; left: 40px; right: 40px; top: 44px; border-top: 1.5px dashed var(--ink-2); }
.lauf-steps li { position: relative; }
.mslab { width: 88px; height: 88px; display: block; background: var(--paper-2); position: relative; }
.mslab path, .mslab rect, .mslab circle { vector-effect: non-scaling-stroke; }
.lauf-steps .nr { display: block; margin-top: 0.9rem; }
.lauf-steps h3 { margin: 0.25rem 0 0; font-size: 17px; font-weight: 700; }
.lauf-steps p { margin: 0.45rem 0 0; font-size: 14.5px; color: var(--ink-2); line-height: 1.5; }
.lauf-steps li.is-warn h3 { color: var(--ink); }
.lauf-steps li.is-warn p b { color: var(--ink); }
.lauf-foot { margin-top: 2.5rem; font-size: 15px; color: var(--ink-2); }
@media (max-width: 1100px) {
  .lauf-steps { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 2.5rem; }
  .lauf-steps::before { display: none; }
}
@media (max-width: 640px) { .lauf-steps { grid-template-columns: 1fr 1fr; } }

.mslab .mslab-svg { width: 88px; height: 88px; }
.ch-stage img { -webkit-mask-image: radial-gradient(ellipse 70% 70% at 50% 50%, #000 62%, transparent 100%); mask-image: radial-gradient(ellipse 70% 70% at 50% 50%, #000 62%, transparent 100%); }
.screen-grid > *, .lsec-grid > *, .ph-grid > *, .netz-grid > *, .praxis-grid > * { min-width: 0; }
.mi { overflow-x: auto; }
@media (max-width: 600px) { .mi table { font-size: 12px; } .mi th, .mi td { padding: 0.55rem 0.5rem; } }
.rolle, .betrieb-grid, .transfer, .breite { hyphens: auto; hyphenate-limit-chars: 12 5 5; }
@media (max-width: 980px) { .rolle, .betrieb-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .rolle, .betrieb-grid, .ch-facts, .gruender-facts { grid-template-columns: minmax(0, 1fr); } .breite { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* Über Kiraki: Kopf mit aufgefächertem Kiraki-Stapel */
.uh-grid { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: 2rem 3rem; align-items: center; }
.uh .hero-ctas { margin-top: 2rem; }
.kstapel { position: relative; height: 470px; }
.kstapel a { position: absolute; width: 36%; text-decoration: none; left: calc(var(--i) * 12.5%); top: calc(250px - var(--i) * 50px); z-index: calc(10 - var(--i)); animation: atmen 7s ease-in-out infinite; animation-delay: calc(var(--i) * -0.6s); }
.kstapel a .mslab-svg { width: 100%; height: auto; aspect-ratio: 1; transition: transform .45s var(--ease); }
.kstapel a:hover .mslab-svg, .kstapel a:focus-visible .mslab-svg { transform: translateY(-16px); }
.kstapel .stapel-t { position: absolute; left: 50%; top: -0.6rem; translate: -50% 0; white-space: nowrap; font-family: var(--mono); font-size: 11px; letter-spacing: 0.08em; color: var(--cobalt); background: var(--paper); padding: 2px 6px; border-radius: 3px; opacity: 0; transition: opacity .25s; }
.kstapel a:hover .stapel-t, .kstapel a:focus-visible .stapel-t { opacity: 1; }
.kstapel-k .mslab-svg { filter: drop-shadow(0 26px 30px rgba(18, 51, 238, .28)); }
@keyframes atmen { 0%, 100% { transform: translate(0, 0); } 50% { transform: translate(calc(var(--i) * 3px), calc(var(--i) * -1.4px)); } }
@media (max-width: 980px) { .uh-grid { grid-template-columns: 1fr; } .kstapel { height: 360px; max-width: 460px; } .kstapel a { top: calc(190px - var(--i) * 38px); } }
@media (prefers-reduced-motion: reduce) { .kstapel a { animation: none; } }

/* Sechs Leistungen: Stapel, Über-Stapel, Kacheln, Audit-Liste */
.stapel a:nth-child(1) { left: 0%; top: 175px; z-index: 6; }
.stapel a:nth-child(2) { left: 14.5%; top: 140px; z-index: 5; }
.stapel a:nth-child(3) { left: 29%; top: 105px; z-index: 4; }
.stapel a:nth-child(4) { left: 43.5%; top: 70px; z-index: 3; }
.stapel a:nth-child(5) { left: 58%; top: 35px; z-index: 2; }
.stapel a:nth-child(6) { left: 72.5%; top: 0; z-index: 1; }
.stapel a, .stapel a .mslab-svg { width: 150px; }
.stapel a .mslab-svg { height: 150px; }
.kstapel a { width: 32%; left: calc(var(--i) * 11.2%); top: calc(275px - var(--i) * 46px); }
.ki-6 { --i: 6; }
@media (max-width: 980px) { .kstapel a { top: calc(210px - var(--i) * 35px); } }
.breite { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 640px) { .breite { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.audits { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
.audits > div { background: var(--panel); padding: 1.2rem 1.3rem 1.3rem; }
.audits > div:last-child:nth-child(odd) { grid-column: 1 / -1; }
.audits h3 { margin: 0 0 0.7rem; font-family: var(--mono); font-weight: 400; font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--cobalt); }
.audits ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.35rem; }
.audits li { display: grid; grid-template-columns: 2rem 1fr; font-size: 15px; font-weight: 550; }
.audits li span { font-family: var(--mono); font-size: 12px; font-weight: 400; color: var(--ink-3); padding-top: 0.15rem; }
.bauen--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 1.8rem; }
@media (max-width: 980px) { .audits, .bauen--3 { grid-template-columns: 1fr; } }

/* Case Study: Produkt über alle Stufen */
.reise-box { background: var(--night); color: var(--night-text); border-radius: 22px; padding: clamp(1.2rem, 2.6vw, 2.4rem); box-shadow: 0 50px 100px -60px rgba(11, 14, 27, .7); }
.reise-tabs { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 0.5rem; position: relative; margin-bottom: clamp(1.4rem, 3vw, 2.4rem); }
.reise-tabs::before { content: ""; position: absolute; left: 8%; right: 8%; top: 22px; border-top: 1.5px solid var(--night-line); }
.reise-tab { position: relative; background: none; border: 0; color: var(--night-text-2); cursor: pointer; text-align: center; padding: 0 0.3rem 0.4rem; display: flex; flex-direction: column; align-items: center; gap: 0.35rem; }
.reise-dot { width: 44px; height: 44px; border-radius: 50%; background: var(--night); border: 1.5px solid var(--night-line); position: relative; z-index: 1; transition: all .35s var(--ease); }
.reise-tab b { font-size: 15px; color: var(--night-text); font-weight: 650; }
.reise-tab span:not(.reise-dot) { font-size: 12.5px; line-height: 1.35; }
.reise-tab.is-on .reise-dot { background: var(--cobalt); border-color: var(--cobalt); box-shadow: 0 0 0 8px rgba(18, 51, 238, .22); }
.reise-tab.is-on b { color: #aab5ff; }
.reise-tab:hover .reise-dot { border-color: #aab5ff; }
.reise-tab:focus-visible { outline: 2px solid #9fb0ff; outline-offset: 4px; border-radius: 8px; }
.reise-box { display: grid; grid-template-columns: minmax(0, 1fr); }
.reise-panel { grid-row: 2; grid-column: 1; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 2rem clamp(1.5rem, 4vw, 3.5rem); align-items: center; }
.reise-panel:not([hidden]) { animation: reiseIn .45s var(--ease); }
.reise-panel[hidden] { display: grid; visibility: hidden; }
@keyframes reiseIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.reise-shot { position: relative; margin: 0; aspect-ratio: 1224 / 1250; border-radius: 18px; background: radial-gradient(120% 70% at 50% 0%, #15393a 0%, #0e2126 55%, #0b181c 100%); border: 1px solid rgba(237, 235, 224, .07); box-shadow: 0 40px 80px -40px rgba(0, 0, 0, .7); overflow: hidden; }
.reise-shot img { position: absolute; inset: 3%; width: 94%; height: 94%; object-fit: contain; }
.reise-text .mlabel { color: #aab5ff; }
.reise-text h3 { margin: 0.8rem 0 0; font-stretch: 112%; font-weight: 800; font-size: clamp(1.8rem, 3vw, 2.8rem); letter-spacing: -0.03em; line-height: 1.02; color: var(--night-text); }
.reise-text > p:not(.mlabel) { margin: 1rem 0 0; color: var(--night-text-2); font-size: 16.5px; }
.reise-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.6rem; margin: 1.4rem 0 0; }
.reise-stats div { border: 1px solid var(--night-line); border-radius: 12px; padding: 0.8rem 0.9rem; background: rgba(237, 235, 224, .03); }
.reise-stats dt { font-stretch: 112%; font-weight: 800; font-size: clamp(1.3rem, 1.9vw, 1.7rem); letter-spacing: -0.02em; color: var(--night-text); }
.reise-stats dd { margin: 0.2rem 0 0; font-size: 12.5px; color: var(--night-text-2); line-height: 1.35; }
.reise-list { list-style: none; margin: 1.2rem 0 0; padding: 0; display: grid; gap: 0.45rem; }
.reise-list li { display: flex; gap: 0.6rem; font-size: 15px; }
.reise-list li::before { content: "✓"; color: #aab5ff; font-weight: 700; }
@media (max-width: 980px) {
  .reise-panel { grid-template-columns: minmax(0, 1fr); }
  .reise-tabs { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 1.2rem; }
  .reise-tabs::before { display: none; }
}
@media (max-width: 600px) {
  .reise-tabs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .reise-stats { grid-template-columns: minmax(0, 1fr); }
}
.uh, .lh { overflow-x: clip; }