/* Neue Abschnitte der Startseite: Fälle, Leistungen, Kosten, Branchen, Ratgeber, Fragen, Prüfungen. Karten aus bauen/start-teile.mjs. */
.land { position: relative; min-height: 100vh; display: flex; align-items: center; padding: 14vh var(--pad); }
.land--r { justify-content: flex-end; }
.land-in { position: relative; isolation: isolate; width: min(680px, 100%); }
.land--r .land-in { width: min(820px, 100%); }
@media (min-width: 900px) { .land--r .land-in { width: min(760px, 52vw); } .land--l .land-in { width: min(720px, 58vw); } }
.land-in--breit { width: 100%; max-width: 1280px; } .land-in--schmal { width: min(860px, 100%); margin-inline: auto; }
.land .land-in::before { content: ""; position: absolute; inset: -10% -10%; z-index: -1; pointer-events: none; background: radial-gradient(closest-side, rgba(243, 246, 245, 0.96) 60%, rgba(243, 246, 245, 0.75) 84%, rgba(243, 246, 245, 0) 100%); }
@media (max-width: 899px) { .land { min-height: 0; padding: 11vh var(--pad); } .land .land-in::before { inset: -4% -8%; } }

.lgrid { display: grid; gap: 16px; margin-top: 36px; }
.lgrid.l2 { grid-template-columns: repeat(2, 1fr); } .lgrid.l3 { grid-template-columns: repeat(3, 1fr); } .lgrid.l4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 1100px) { .lgrid.l4 { grid-template-columns: repeat(2, 1fr); } .lgrid.l3 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .lgrid.l2, .lgrid.l3, .lgrid.l4 { grid-template-columns: 1fr; } }
.lcard { min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 10px; padding: 24px 24px 22px; border-radius: 22px; transition: transform 0.3s, box-shadow 0.3s; }
a.lcard:hover { transform: translateY(-3px); box-shadow: inset 0 1px 0 #fff, 0 1px 0 rgba(10, 20, 22, 0.05), 0 36px 60px -28px color-mix(in oklab, var(--a1) 55%, transparent); }
.lcard h3 { font: 600 clamp(18px, 1.5vw, 22px)/1.2 var(--f-display); letter-spacing: -0.02em; }
.lcard p { font-size: 15px; color: var(--ink-2); }
.lcard-k { font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--hi); font-weight: 600; }
.lcard-z { font: 600 clamp(19px, 1.7vw, 25px)/1.2 var(--f-display); letter-spacing: -0.02em; color: var(--hi) !important; }
.lcard .mehr { margin-top: auto; padding-top: 8px; }
.lcard--s { padding: 20px; } .lcard--s p { font-size: 14px; }
.lcard--rest { background: color-mix(in oklab, var(--a1) 9%, transparent); border: 1px dashed color-mix(in oklab, var(--a1) 45%, transparent); }

.lpreis { margin-top: 34px; padding: 30px 32px; }
.lpreis-z { font: 700 clamp(40px, 5.4vw, 84px)/1 var(--f-display); letter-spacing: -0.04em; background: linear-gradient(100deg, var(--a1), var(--a2)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.lpreis-s { margin: 10px 0 8px; font-size: clamp(16px, 1.4vw, 20px); font-weight: 600; }
.lzus { margin-top: 26px; display: flex; flex-direction: column; gap: 14px; }
.lzus li { display: flex; gap: 16px; align-items: flex-start; }
.lzus h3 { font: 600 18px/1.3 var(--f-display); } .lzus p { font-size: 15px; color: var(--ink-2); }

.check-mehr { position: relative; z-index: 2; max-width: 1280px; margin-top: 6vh; }
.check { flex-direction: column; justify-content: center; }
.check-in { align-items: center; }

.lcard--bild { padding: 0; overflow: hidden; gap: 8px; }
.lcard--bild img { width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; object-position: top; }
.lcard--bild > :not(img) { margin-inline: 22px; } .lcard--bild .mehr { margin-bottom: 20px; }
.lcard--bild .lcard-k { margin-top: 10px; }

/* Aufbau: das Beispiel entsteht, während das Terminal läuft (js/main.js schaltet .on) */
.build-pin { grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr); }
.build-left { display: flex; flex-direction: column; gap: 3vh; min-width: 0; }
.build-left .term-body { min-height: 250px; }
.build-right { position: relative; min-width: 0; display: flex; flex-direction: column; gap: 10px; }
.build-right .bf { transform: perspective(1400px) rotateY(-5deg); transform-origin: right center; box-shadow: 0 50px 80px -36px rgba(10, 40, 50, 0.55); }
.js .build [data-b] { opacity: 0; transform: translateY(14px) scale(0.98); transition: opacity 0.5s ease, transform 0.6s cubic-bezier(0.2, 0.8, 0.2, 1); }
.js .build [data-b].on { opacity: 1; transform: none; }
.live-badge { position: absolute; right: 14px; top: 52px; padding: 7px 14px; border-radius: 999px; background: var(--ink); color: #b8f23a; font-size: 12px; font-weight: 700; letter-spacing: 0.18em; opacity: 0; transform: scale(0.8); transition: opacity 0.4s, transform 0.5s cubic-bezier(0.3, 1.6, 0.4, 1); }
.live-badge.on { opacity: 1; transform: none; }
@media (max-width: 899px) { .build-right .bf { transform: none; } .live-badge { top: 48px; } }