/* prorender – Abschnitte: Layout der hellen und dunklen Inhaltsbereiche */
img, video, canvas, svg { display: block; max-width: 100%; }
h1, h2, h3, p, ul, ol, dl, dd, figure { margin: 0; padding: 0; }
ul, ol { list-style: none; }
button, input, select, textarea { font: inherit; color: inherit; }
h1, h2 { font-family: var(--serif); font-weight: 400; letter-spacing: -.02em; }
.btn-light { background: #fff; color: var(--ink); }
.btn-light:hover { box-shadow: 0 14px 34px -14px rgba(124,140,255,.8); }
.btn-line { border-color: rgba(255,255,255,.4); color: #fff; background: rgba(255,255,255,.04); backdrop-filter: blur(8px); }
.btn-line:hover { border-color: #fff; background: rgba(255,255,255,.12); }
.btn-glow { color: var(--ink); background: var(--g); font-weight: 700; }
.btn-glow:hover { box-shadow: 0 12px 32px -10px rgba(111,227,240,.7); }
.btn-outline-d { border-color: var(--ink); color: var(--ink); background: transparent; }
.btn-outline-d:hover { background: var(--ink); color: #fff; }
.light { background: var(--paper); padding: clamp(70px, 9vw, 130px) 0; position: relative; }
.light.tint { background: var(--paper-2); }
#bereiche { border-radius: clamp(24px, 3.4vw, 48px) clamp(24px, 3.4vw, 48px) 0 0; margin-top: calc(-1 * clamp(24px, 3.4vw, 48px)); z-index: 2; }
.split { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: clamp(20px, 4vw, 64px); }
.side { position: sticky; top: 104px; align-self: start; display: grid; gap: 6px; }
.idx { color: var(--v-l) !important; font-weight: 500; font-size: .9rem; }
.body h2, .head h2, .infra h2, .contact h2 { font-size: clamp(2.2rem, 4.6vw, 4.4rem); line-height: 1; color: var(--ink); max-width: 17ch; }
.dark h2 { color: #fff; }
.intro { max-width: 60ch; margin-top: 22px; color: var(--mute); font-size: 1.1rem; }
.dark .intro { color: var(--mute-d); }
.ledger { margin-top: clamp(36px, 5vw, 60px); border-top: 1px solid var(--ink); }
.ledger li { border-bottom: 1px solid var(--line); }
.ledger a { display: grid; grid-template-columns: 48px minmax(0, 1.15fr) minmax(0, 1.5fr) 40px; gap: 8px 28px; padding: 30px 0; align-items: start; position: relative; transition: padding .3s, background .3s; }
.ledger a::before { content: ""; position: absolute; left: -16px; top: 0; bottom: 0; width: 3px; background: var(--g-l); transform: scaleY(0); transform-origin: top; transition: transform .35s; }
.ledger a:hover::before { transform: scaleY(1); }
.ledger a:hover { padding-left: 14px; background: linear-gradient(90deg, rgba(75,63,224,.06), transparent 60%); }
.ledger .n { padding-top: 10px; color: var(--v-l); }
.ledger .t { font-family: var(--serif); font-size: clamp(1.8rem, 3vw, 2.8rem); line-height: 1.02; letter-spacing: -.015em; color: var(--ink); }
.ledger .d { color: var(--text); }
.ledger .k { grid-column: 3; font-size: .68rem; margin-top: 4px; }
.ledger .go { grid-column: 4; grid-row: 1; font-size: 1.4rem; color: var(--mute); justify-self: end; transition: transform .3s, color .3s; }
.ledger a:hover .go { transform: translateX(6px); color: var(--v-l); }
.process { position: relative; margin-top: clamp(36px, 5vw, 60px); display: grid; grid-template-columns: repeat(4, 1fr); }
.pline { position: absolute; left: 0; right: 0; top: 17px; height: 1px; background: var(--line); }
.pline i { position: absolute; left: 0; top: -1px; height: 3px; width: 0; background: var(--g-l); transition: width .3s linear; }
.process li { padding: 0 26px 0 0; }
.pn { display: inline-grid; place-items: center; width: 35px; height: 35px; background: var(--paper-2); border: 1px solid var(--ink); color: var(--ink); position: relative; font-size: .8rem; letter-spacing: 0; }
.process h3 { font-family: var(--serif); font-weight: 400; font-size: 1.7rem; line-height: 1.05; color: var(--ink); margin: 22px 0 10px; }
.process p { font-size: .98rem; color: var(--mute); }
.checks { margin-top: 44px; display: flex; flex-wrap: wrap; gap: 8px; }
.checks li { padding: 9px 16px; border: 1px solid var(--line); border-radius: 99px; font-size: .92rem; color: var(--text); background: rgba(255,255,255,.5); }
.dark { background: var(--night); color: #cfd5e4; position: relative; }
.infra { padding: clamp(70px, 9vw, 130px) 0; border-radius: clamp(24px, 3.4vw, 48px); margin-top: calc(-1 * clamp(24px, 3.4vw, 48px)); z-index: 2; background: radial-gradient(800px 500px at 100% 0%, rgba(124,140,255,.16), transparent 60%), var(--night); }
.infra-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: clamp(32px, 5vw, 90px); align-items: center; }
.infra h2 { margin-top: 18px; }
.prov { margin-top: 34px; border-top: 1px solid var(--line-d); }
.prov li { display: grid; grid-template-columns: 220px 1fr; gap: 20px; padding: 16px 0; border-bottom: 1px solid var(--line-d); }
.prov b { font-weight: 500; color: #fff; }
.prov span { color: var(--mute-d); font-size: .96rem; }
.diagram { background: rgba(255,255,255,.035); border: 1px solid var(--line-d); border-radius: 18px; padding: clamp(14px, 2vw, 26px); }
.diagram figcaption { margin-top: 10px; }
.diagram svg { width: 100%; height: auto; }
.wires path { stroke: rgba(255,255,255,.6); stroke-width: 1.4; stroke-dasharray: 600; stroke-dashoffset: 600; }
.box rect { fill: rgba(255,255,255,.04); stroke: rgba(255,255,255,.4); stroke-width: 1.2; rx: 6; }
.box.core rect { fill: url(#gg); stroke: none; }
.box.core .t { fill: #0b0e17; }
.box.core .m { fill: rgba(11,14,23,.7); }
.box.mon rect { stroke-dasharray: 5 4; stroke: var(--c); }
.box .m { font: 400 10px var(--mono); letter-spacing: .08em; text-transform: uppercase; fill: #98a2b8; }
.box .t { font: 500 12px var(--sans); fill: #fff; }
.nodes rect { fill: rgba(255,255,255,.1); stroke: rgba(255,255,255,.4); stroke-width: .8; rx: 2; }
.drawn .nodes rect { animation: node 2.4s ease-in-out infinite; }
.nodes rect:nth-child(2) { animation-delay: .3s !important; }
.nodes rect:nth-child(3) { animation-delay: .6s !important; }
.nodes rect:nth-child(4) { animation-delay: .9s !important; }
.nodes rect:nth-child(5) { animation-delay: 1.2s !important; }
.nodes rect:nth-child(6) { animation-delay: 1.5s !important; }
.packet { fill: var(--c); filter: drop-shadow(0 0 4px var(--c)); }
.soft { padding: clamp(80px, 11vw, 160px) 0; margin-top: calc(-1 * clamp(24px, 3.4vw, 48px)); border-radius: clamp(24px, 3.4vw, 48px); z-index: 3; background: radial-gradient(800px 600px at 0% 100%, rgba(111,227,240,.1), transparent 60%), var(--night-2); }
.head { max-width: 900px; margin-bottom: clamp(36px, 5vw, 70px); }
.head h2 { margin-top: 18px; max-width: 18ch; }
.mosaic { display: grid; grid-template-columns: repeat(12, 1fr); gap: 18px; perspective: 1400px; }
.m { position: relative; overflow: hidden; border-radius: 18px; background: var(--night-3); border: 1px solid var(--line-d); display: flex; flex-direction: column; transform-style: preserve-3d; transition: border-color .3s, box-shadow .4s; }
.m:hover { border-color: rgba(111,227,240,.5); box-shadow: 0 30px 60px -28px rgba(111,227,240,.35); }
.m img, .m video { width: 100%; flex: 1; min-height: 0; object-fit: cover; object-position: top left; background: #070912; transition: transform 1.2s; }
.m:hover img, .m:hover video { transform: scale(1.04); }
.cap { padding: 16px 20px 20px; background: linear-gradient(180deg, rgba(24,29,46,0), var(--night-3) 30%); position: relative; }
.cap .mono { color: var(--c) !important; font-size: .66rem; }
.cap h3 { font-family: var(--serif); font-weight: 400; font-size: 1.8rem; color: #fff; line-height: 1.05; margin: 8px 0 6px; }
.cap p { font-size: .92rem; color: var(--mute-d); }
.m1 { grid-column: span 7; height: 460px; }
.m2 { grid-column: span 5; height: 460px; }
.m3 { grid-column: span 6; height: 400px; }
.m4 { grid-column: span 6; height: 400px; }
.m5 { grid-column: span 4; height: 380px; }
.mini { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); margin-top: 34px; border-top: 1px solid var(--line-d); }
.mini li { padding: 18px 20px 4px 0; display: grid; gap: 4px; align-content: start; }
.mini li + li { padding-left: 20px; border-left: 1px solid var(--line-d); }
.mini b { font-weight: 500; color: #fff; }
.mini span { font-size: .9rem; color: var(--mute-d); line-height: 1.45; }
.figures { display: grid; grid-template-columns: repeat(4, 1fr); margin-top: clamp(34px, 5vw, 56px); border-top: 1px solid var(--ink); }
.figures div { padding: 26px 22px 24px 0; }
.figures div + div { padding-left: 22px; border-left: 1px solid var(--line); }
.figures dt { font-family: var(--serif); font-size: clamp(3rem, 5.4vw, 5rem); line-height: .95; color: var(--ink); letter-spacing: -.03em; }
.figures dd { margin-top: 14px; font-size: .94rem; color: var(--mute); line-height: 1.45; max-width: 22ch; }
.refs { margin-top: 24px; padding-top: 18px; border-top: 1px solid var(--line); line-height: 1.8; }
.cols3 { display: grid; grid-template-columns: repeat(3, 1fr); margin-top: clamp(30px, 4vw, 50px); border-top: 1px solid var(--ink); }
.cols3 article { padding: 24px 26px 6px 0; }
.cols3 article + article { padding-left: 26px; border-left: 1px solid var(--line); }
.cols3 h3 { font-family: var(--serif); font-weight: 400; font-size: 1.7rem; color: var(--ink); margin-bottom: 14px; line-height: 1.05; }
.cols3 li a { display: block; padding: 9px 0; border-bottom: 1px solid var(--line); font-size: .98rem; transition: color .2s, padding .2s; }
.cols3 li a:hover { color: var(--v-l); padding-left: 6px; }
.onsite { margin-top: 36px; display: grid; grid-template-columns: 100px minmax(0, 1fr) auto; gap: 28px; align-items: center; padding: 26px 28px; border-radius: 18px; background: #fff; border: 1px solid transparent; background-image: linear-gradient(#fff, #fff), var(--g-l); background-origin: border-box; background-clip: padding-box, border-box; }
.onsite h3 { font-family: var(--serif); font-weight: 400; font-size: 1.9rem; color: var(--ink); margin-bottom: 6px; line-height: 1; }
.onsite p { font-size: .96rem; color: var(--mute); max-width: 68ch; }
.onsite .mono { color: var(--v-l); }
.contact { padding: clamp(80px, 11vw, 160px) 0; margin-top: calc(-1 * clamp(24px, 3.4vw, 48px)); border-radius: clamp(24px, 3.4vw, 48px) clamp(24px, 3.4vw, 48px) 0 0; z-index: 4; background: radial-gradient(900px 500px at 100% 0%, rgba(124,140,255,.2), transparent 60%), var(--night); }
.contact-grid { display: grid; grid-template-columns: 1.05fr 1fr; gap: clamp(36px, 6vw, 100px); align-items: start; }
.contact h2 { margin-top: 18px; }
@media (max-width: 1060px) {
  .split { grid-template-columns: 1fr; gap: 18px; }
  .side { position: static; display: flex; gap: 14px; align-items: baseline; }
  .infra-grid, .contact-grid { grid-template-columns: 1fr; }
}
@media (max-width: 860px) {
  .figures div:nth-child(n+3) { border-top-color: var(--line); }
  .process { row-gap: 30px; }
  .pline { display: none; }
  .cols3 { grid-template-columns: 1fr; }
  .cols3 article + article { padding-left: 0; border-left: 0; border-top: 1px solid var(--line); padding-top: 22px; }
  .ledger a { grid-template-columns: 36px 1fr 28px; }
  .ledger .d, .ledger .k { grid-column: 2 / 3; }
  .ledger .go { grid-column: 3; }
  .mosaic { grid-template-columns: 1fr; }
  .m1, .m2, .m3, .m4, .m5 { grid-column: auto; height: 360px; }
  .onsite { grid-template-columns: 1fr; gap: 14px; }
  .prov li { grid-template-columns: 1fr; gap: 2px; }
}
@media (max-width: 560px) {
  .figures div + div { border-top: 1px solid var(--line); }
}
@media (prefers-reduced-motion: reduce) {
  .wires path { stroke-dashoffset: 0 !important; transition: none !important; }
  .wires .dash, .nodes rect,   .packet { display: none; }
}

/* ===== Unterseiten (Bereichsseiten) ===== */
.page-hero { position: relative; background: var(--night); color: #fff; padding: clamp(130px, 14vw, 190px) 0 clamp(80px, 9vw, 130px); overflow: hidden; isolation: isolate; }
.page-hero-bg { position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(7,9,18,.96) 0, rgba(7,9,18,.74) 38%, rgba(7,9,18,.12) 78%), linear-gradient(0deg, rgba(7,9,18,.9) 0, rgba(7,9,18,0) 36%), var(--img) 62% 50% / cover no-repeat, var(--night); }
.page-hero-in .kicker { color: var(--mute-d); }
.page-hero h1 { font-family: var(--serif); font-weight: 400; font-size: clamp(2.7rem, 6.4vw, 6rem); line-height: .98; letter-spacing: -.02em; max-width: 15ch; margin: 22px 0 26px; color: #fff; }
.page-hero em { background-image: var(--g); }
.page-hero .lede { max-width: 58ch; }
.sub #leistungen { border-radius: clamp(24px, 3.4vw, 48px) clamp(24px, 3.4vw, 48px) 0 0; margin-top: calc(-1 * clamp(24px, 3.4vw, 48px)); z-index: 2; }
.cards2 { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: clamp(30px, 4vw, 50px); }
.rcard { display: grid; grid-template-rows: auto auto auto 1fr; background: #fff; border: 1px solid var(--line); border-radius: 18px; overflow: hidden; transition: transform .35s, box-shadow .35s, border-color .35s; }
.rcard:hover { transform: translateY(-4px); box-shadow: 0 30px 60px -34px rgba(13,16,25,.5); border-color: transparent; }
.rcard img { width: 100%; height: auto; aspect-ratio: 21 / 9; object-fit: cover; background: var(--night); }
.rcard .mono { padding: 18px 22px 0; color: var(--v-l); }
.rcard h3 { font-family: var(--serif); font-weight: 400; font-size: 1.9rem; line-height: 1.05; color: var(--ink); padding: 6px 22px 0; }
.rcard p { padding: 8px 22px 24px; font-size: .96rem; color: var(--mute); }
.more-link { margin-top: 34px; }
.dev-note { margin-top: 18px; padding: 12px 16px; border: 1px dashed rgba(255,179,107,.6); border-radius: 12px; color: #ffcf9b; font-size: .94rem; }
.dev-note code { font-family: var(--mono); }
@media (max-width: 860px) { .cards2 { grid-template-columns: 1fr; } .rcard img { aspect-ratio: 16 / 9; } .page-hero-bg { background: linear-gradient(0deg, rgba(7,9,18,.96) 0, rgba(7,9,18,.7) 55%, rgba(7,9,18,.55) 100%), var(--img) 64% 50% / cover no-repeat, var(--night); } }

/* ===== Detailseiten (Leistungsseiten) ===== */
/* Brotkrumen im dunklen Kopfbereich */
.crumbs { margin-bottom: 22px; }
.crumbs ol { display: flex; flex-wrap: wrap; gap: 4px 10px; font: 400 .74rem/1.4 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--mute-d); }
.crumbs li + li::before { content: "/"; margin-right: 10px; opacity: .5; }
.crumbs a:hover { color: #fff; } .crumbs [aria-current] { color: #fff; }
.lp-first { border-radius: clamp(24px, 3.4vw, 48px) clamp(24px, 3.4vw, 48px) 0 0; margin-top: calc(-1 * clamp(24px, 3.4vw, 48px)); z-index: 2; padding-top: clamp(80px, 10vw, 150px); }
.lp-first .cols3 article h3 { margin-bottom: 8px; }
.lp-first .cols3 article p { color: var(--mute); }
.scope { display: grid; grid-template-columns: 1fr 1fr; gap: 0 36px; margin-top: clamp(28px, 4vw, 48px); border-top: 1px solid var(--ink); }
.scope li { padding: 16px 0 16px 34px; border-bottom: 1px solid var(--line); position: relative; font-size: 1.04rem; }
.scope li::before { content: ""; position: absolute; left: 2px; top: 24px; width: 13px; height: 7px; border-left: 2px solid var(--v-l); border-bottom: 2px solid var(--v-l); transform: rotate(-45deg); }
.tech { padding: clamp(70px, 9vw, 130px) 0; border-radius: clamp(24px, 3.4vw, 48px); background: radial-gradient(800px 500px at 100% 0%, rgba(124,140,255,.16), transparent 60%), var(--night); }
.tech h2 { font-size: clamp(2.2rem, 4.2vw, 4rem); line-height: 1; color: #fff; margin-top: 18px; max-width: 16ch; }
.tech-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: clamp(32px, 5vw, 90px); align-items: center; }
.tech-media { position: relative; border-radius: 18px; background: var(--night-3); box-shadow: 0 0 0 1px rgba(111,227,240,.10), 0 0 36px rgba(111,227,240,.28), 0 0 110px rgba(124,140,255,.30); transition: box-shadow .6s; }
.tech-media:hover { box-shadow: 0 0 0 1px rgba(111,227,240,.16), 0 0 48px rgba(111,227,240,.40), 0 0 140px rgba(124,140,255,.42); }
.tech-media img, .tech-media video { border-radius: inherit; }
.tech-media img, .tech-media video { width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; }
.tech-media { overflow: hidden; }
.tech-media img[style*="--zoom"] { transform: scale(var(--zoom)); transform-origin: var(--ox, 100%) 50%; }
.faq { margin-top: clamp(28px, 4vw, 48px); border-top: 1px solid var(--ink); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary { cursor: pointer; list-style: none; padding: 20px 40px 20px 0; position: relative; font-family: var(--serif); font-size: clamp(1.3rem, 2.2vw, 1.8rem); line-height: 1.15; color: var(--ink); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; position: absolute; right: 4px; top: 50%; transform: translateY(-50%); font: 300 1.8rem/1 var(--sans); color: var(--v-l); transition: transform .3s; }
.faq details[open] summary::after { transform: translateY(-50%) rotate(45deg); }
.faq details p { padding: 0 0 22px; max-width: 64ch; color: var(--mute); }
.draft-bar { margin: 0 auto; padding: 10px var(--pad); background: #fff7e8; border-bottom: 1px solid #f0d9ab; color: #7a5a14; font-size: .88rem; position: relative; z-index: 3; max-width: none; }
.draft-bar code { font-family: var(--mono); }
@media (max-width: 860px) { .scope { grid-template-columns: 1fr; } .tech-grid { grid-template-columns: 1fr; } }

.ledger li { position: relative; }
.draft-link { display: inline-block; margin: -8px 0 18px 76px; padding: 5px 12px; border-radius: 99px; background: #fff7e8; border: 1px solid #f0d9ab; color: #7a5a14; font: 400 .72rem/1.3 var(--mono); letter-spacing: .06em; text-transform: uppercase; }
.draft-link:hover { background: #ffefcd; }
@media (max-width: 860px) { .draft-link { margin-left: 52px; } }
.tech .prov li { display: block; } .tech .prov b { display: block; }

.tech-media img.contain { aspect-ratio: auto; object-fit: contain; background: #0d1119; }

/* Softwareliste (Detailseiten mit 'liste') */
.sw-groups { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: 34px 40px; margin-top: clamp(28px, 4vw, 48px); padding-top: 28px; border-top: 1px solid var(--ink); }
.sw-groups h3 { font-family: var(--serif); font-weight: 400; font-size: 1.5rem; line-height: 1.1; color: var(--ink); margin-bottom: 14px; }
.sw-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.sw-chips li { padding: 6px 13px; border: 1px solid var(--line); border-radius: 17px; background: #fff; font-size: .92rem; line-height: 1.3; color: var(--ink); }
.sw-note { margin-top: 34px; font-size: .74rem; letter-spacing: .04em; line-height: 1.7; color: var(--mute); max-width: 70ch; }
.faq a.more { color: var(--v-l); white-space: nowrap; }
.sw-hints { display: grid; grid-template-columns: 1fr 1fr; gap: 0 40px; margin-top: clamp(30px, 4vw, 46px); border-top: 1px solid var(--line); }
.sw-hints article { padding-top: 24px; }
.sw-hints h3 { font-family: var(--serif); font-weight: 400; font-size: 1.5rem; line-height: 1.1; color: var(--ink); margin-bottom: 10px; }
.sw-hints p { color: var(--mute); }
@media (max-width: 860px) { .sw-hints { grid-template-columns: 1fr; } }
.sw-needs { margin-top: 12px; }
.sw-needs li { position: relative; padding: 5px 0 5px 24px; color: var(--ink); font-size: .98rem; }
.sw-needs li::before { content: ""; position: absolute; left: 2px; top: 13px; width: 10px; height: 6px; border-left: 2px solid var(--v-l); border-bottom: 2px solid var(--v-l); transform: rotate(-45deg); }

/* Demo-Videos (Detailseiten mit 'demo') */
.demo h2 { max-width: 22ch; }
.demo .intro { color: var(--mute-d); max-width: 62ch; margin-top: 18px; }
.demo-grid { display: grid; gap: clamp(28px, 4vw, 56px); margin-top: clamp(34px, 5vw, 64px); }
.demo-grid.n2, .demo-grid.n3, .demo-grid.n4 { grid-template-columns: 1fr 1fr; }
.demo-v video { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: contain; background: #000; border-radius: inherit; }
.demo-v figcaption { display: grid; gap: 6px; margin-top: 22px; }
.demo-v figcaption b { font-family: var(--serif); font-weight: 400; font-size: 1.5rem; line-height: 1.15; color: #fff; }
.demo-v figcaption span { color: var(--mute-d); font-size: .96rem; line-height: 1.5; }
.demo-v figcaption .mono { font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; }
@media (max-width: 860px) { .demo-grid.n2, .demo-grid.n3, .demo-grid.n4 { grid-template-columns: 1fr; } }

/* Zwei gleichwertige Wege (Detailseiten mit 'wege') */
.ways { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-top: clamp(28px, 4vw, 48px); }
.way { background: #fff; border: 1px solid var(--line); border-radius: 18px; padding: clamp(22px, 2.6vw, 34px); display: grid; gap: 12px; align-content: start; }
.way .mono { font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; color: var(--v-l); }
.way h3 { font-family: var(--serif); font-weight: 400; font-size: clamp(1.5rem, 2.2vw, 2rem); line-height: 1.1; color: var(--ink); }
.way > p:not(.mono) { color: var(--mute); }
.way ul { margin-top: 6px; border-top: 1px solid var(--line); }
.way li { position: relative; padding: 11px 0 11px 26px; border-bottom: 1px solid var(--line); font-size: .98rem; color: var(--ink); }
.way li::before { content: ""; position: absolute; left: 2px; top: 19px; width: 11px; height: 6px; border-left: 2px solid var(--v-l); border-bottom: 2px solid var(--v-l); transform: rotate(-45deg); }
.ways-note { margin-top: 26px; padding-top: 22px; border-top: 1px solid var(--ink); font-size: 1.05rem; color: var(--ink); max-width: 64ch; }
.ways:has(> :nth-child(3):last-child), .ways:has(> :nth-child(6):last-child) { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 860px) { .ways, .ways:has(> :nth-child(3):last-child), .ways:has(> :nth-child(6):last-child) { grid-template-columns: 1fr; } }
.demo-v figcaption a.more { color: var(--c); }

.sw-figure { margin-top: clamp(30px, 4vw, 46px); border-radius: 18px; overflow: hidden; box-shadow: 0 18px 50px -24px rgba(11,14,23,.45); }
.sw-figure img { display: block; width: 100%; height: auto; aspect-ratio: 21 / 9; object-fit: cover; object-position: 50% 45%; }
@media (max-width: 860px) { .sw-figure img { aspect-ratio: 3 / 2; } }

/* Begriffe kurz erklärt */
.glossar { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0 40px; margin-top: clamp(28px, 4vw, 48px); border-top: 1px solid var(--ink); }
.glossar > div { padding: 18px 0; border-bottom: 1px solid var(--line); }
.glossar dt { font-family: var(--serif); font-size: 1.35rem; line-height: 1.1; color: var(--ink); }
.glossar dd { margin: 6px 0 0; font-size: .98rem; color: var(--mute); }
@media (max-width: 860px) { .glossar { grid-template-columns: 1fr; } }

/* Kundenliste: Namen als Links */
.kundenliste { margin-top: clamp(24px, 3vw, 40px); }
.kundenliste li a { color: inherit; text-decoration: none; }
.kundenliste li:hover { border-color: var(--v-l); }
.kundenliste li a:focus-visible { outline: 2px solid var(--v-l); outline-offset: 3px; border-radius: 999px; }

/* Rufnummern und E-Mail-Adressen nicht umbrechen */
a[href^="tel:"] { white-space: nowrap; }

/* Rechtsseiten */
.legal-hero { min-height: 0; padding-bottom: clamp(28px, 4vw, 56px); }
.legal-body { max-width: 860px; padding-block: clamp(40px, 6vw, 88px); }
.legal-sec + .legal-sec { margin-top: clamp(28px, 4vw, 44px); }
.legal-sec h2 { font-family: var(--serif); font-weight: 400; font-size: clamp(1.5rem, 2.4vw, 2rem); line-height: 1.1; color: var(--ink); margin-bottom: 10px; }
.legal-sec p { color: var(--mute); margin-top: 10px; max-width: 70ch; }
.legal-sec ul { margin: 12px 0 0 1.1em; color: var(--mute); max-width: 70ch; }
.legal-sec li { margin-top: 6px; }
.legal-sec a { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }