/* =========================================================
   NEXURION SYSTEMS — Page components
   ========================================================= */

/* ── Leistungen: alternating feature rows ────────────────── */
.svc { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(40px, 6vw, 96px); align-items: center; scroll-margin-top: calc(var(--nav-h) + 24px); }
.svc + .svc { margin-top: clamp(96px, 12vw, 160px); }
.svc.flip .svc-text { order: 2; }
.svc-text .lead { margin-top: 1rem; }
.svc-list { margin-top: 1.8rem; display: grid; gap: .7rem; }
.svc-list li { display: flex; gap: .7rem; align-items: baseline; color: var(--text); }
.svc-list li::before { content: ''; flex-shrink: 0; width: 8px; height: 8px; border-radius: 2px; background: var(--sign); transform: translateY(-2px); }
.svc-text .actions { margin-top: 2rem; }
.svc-vis { background: var(--tile-2); box-shadow: inset 0 8px 0 var(--tc, var(--sign)); border: 0; border-radius: var(--radius-lg); padding: clamp(28px, 4vw, 56px); min-height: 380px; display: flex; align-items: center; justify-content: center; }

/* ── Preise ──────────────────────────────────────────────── */
.price-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; align-items: stretch; }
.price-card { background: var(--tile); border-radius: var(--radius-lg); padding: 36px 32px; display: flex; flex-direction: column; position: relative; }
.price-card.featured { background: var(--sign); color: var(--on-sign); border-color: transparent; box-shadow: inset 0 0 0 4px var(--sign), inset 0 0 0 6px var(--on-sign); --text: var(--on-sign); --text-2: rgba(17,18,16,.78); --text-3: rgba(17,18,16,.66); --line: rgba(17,18,16,.2); --tile-2: rgba(17,18,16,.08); }
.price-card.featured .btn-primary { background: var(--on-sign); color: var(--sign); }
.price-card.featured .price-list li svg { stroke: var(--on-sign); }
.price-card.featured .pill.accent { background: var(--on-sign); color: var(--sign); }
.price-tag { position: absolute; top: 20px; right: 20px; }
.price-tier { font-family: var(--font-display); font-size: 1.7rem; font-weight: 800; }
.price-desc { color: var(--text-2); margin-top: .5rem; min-height: 4.5em; }
.price-amount { display: flex; align-items: baseline; gap: .35rem; margin: 1.8rem 0 .3rem; }
.price-amount small { color: var(--text-2); font-size: 1rem; }
.price-amount b { font-family: var(--font-display); font-size: 3.2rem; font-weight: 800; line-height: 1; }
.price-amount span { font-size: 1.5rem; font-weight: 600; }
.price-note { font-size: .95rem; color: var(--text-3); margin-bottom: 1.6rem; }
.price-card .btn { margin-bottom: 1.8rem; }
.price-list { display: grid; gap: .75rem; font-size: .98rem; border-top: 1px solid var(--line); padding-top: 1.6rem; }
.price-list li { display: flex; gap: .7rem; align-items: flex-start; }
.price-list li svg { width: 18px; height: 18px; flex-shrink: 0; margin-top: 4px; fill: none; stroke: var(--sign); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.price-list li.off { color: var(--text-3); }
.price-list li.off svg { stroke: var(--text-3); }
.addons { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 16px; }
.addon { background: var(--tile); border-radius: var(--radius); padding: 24px; }
.addon .icon { margin-bottom: 1rem; }
.addon b { display: block; font-size: 1.05rem; letter-spacing: -.015em; }
.addon span { color: var(--text-2); font-size: .95rem; }
.fineprint { text-align: center; color: var(--text-3); font-size: .875rem; margin-top: 28px; }

/* ── Portfolio ───────────────────────────────────────────── */
.filter-wrap { display: flex; justify-content: center; margin-bottom: 40px; }
.work-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }
.work { background: var(--tile); border-radius: var(--radius-lg); overflow: hidden; display: flex; flex-direction: column; transition: transform .5s var(--ease-out); }

.work-thumb { aspect-ratio: 16 / 10; background: var(--tile-2) center / cover no-repeat; display: grid; place-items: center; }
.work-thumb .mini { width: 72%; border-radius: 10px; overflow: hidden; background: var(--bg); box-shadow: var(--shadow-sm); }
.work-thumb .mini .bar { height: 18px; background: var(--tile-2); border-bottom: 1px solid var(--line); }
.work-thumb .mini .body { padding: 14px; display: grid; gap: 8px; }
.work-thumb .mini i { display: block; height: 8px; border-radius: 4px; background: var(--tile-2); }
.work-thumb .mini i.h { height: 36px; border-radius: 8px; background: color-mix(in srgb, var(--wc, var(--accent)) 45%, var(--tile-2)); }
.work-thumb .mini i.w6 { width: 60%; }
.work-body { padding: 26px 28px 30px; }
.work-cat { font-size: .85rem; font-weight: 600; color: var(--text-2); margin-bottom: .35rem; }
.work-body h3 { font-size: 1.5rem; letter-spacing: -.022em; line-height: 1.2; }
.work-body p { color: var(--text-2); margin-top: .5rem; }
.work-body .link { margin-top: 1rem; }
.empty { background: var(--tile); border-radius: var(--radius-lg); padding: clamp(40px, 6vw, 72px) 28px; text-align: center; grid-column: 1 / -1; }
.empty .icon { margin: 0 auto 1.2rem; }
.empty h3 { font-size: 1.5rem; letter-spacing: -.02em; }
.empty p { color: var(--text-2); max-width: 520px; margin: .6rem auto 1.6rem; }

/* ── Ratgeber ────────────────────────────────────────────── */
.post-featured { display: grid; grid-template-columns: 1.1fr 1fr; background: var(--tile); border-radius: var(--radius-lg); overflow: hidden; margin-bottom: 20px; transition: transform .5s var(--ease-out); }

.post-featured .post-thumb { aspect-ratio: auto; min-height: 340px; font-size: clamp(2rem, 4vw, 3rem); }
.post-featured-body { padding: clamp(28px, 4vw, 48px); display: flex; flex-direction: column; justify-content: center; }
.post-featured-body h2 { font-size: clamp(1.6rem, 2.6vw, 2.2rem); letter-spacing: -.028em; line-height: 1.12; margin: .5rem 0 .8rem; }
.post-featured-body p { color: var(--text-2); }
.post-featured-body .link { margin-top: 1.4rem; }
.post-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.post { background: var(--tile); border-radius: var(--radius); overflow: hidden; display: flex; flex-direction: column; transition: transform .5s var(--ease-out); }

.post.soon { opacity: .6; }
.post-thumb {
  aspect-ratio: 16 / 10; display: grid; place-items: center; text-align: center; padding: 1.2rem;
  font-family: var(--font-display); font-weight: 700; font-size: 1.6rem; letter-spacing: -.035em; line-height: 1.05;
  background: var(--tile-2); color: var(--text);
}
.post-thumb.c1 { background: var(--sign); color: var(--on-sign); }
.post-body { padding: 22px 24px 26px; display: flex; flex-direction: column; flex: 1; }
.post-meta { font-size: .8rem; color: var(--text-3); display: flex; gap: .8rem; margin-bottom: .5rem; flex-wrap: wrap; }
.post-meta b { color: var(--text-2); font-weight: 600; }
.post-body h3 { font-size: 1.18rem; letter-spacing: -.018em; line-height: 1.3; }
.post-body p { color: var(--text-2); font-size: .95rem; margin-top: .45rem; flex: 1; }
.post-body .link, .post-body .soon-label { margin-top: 1rem; font-size: .95rem; }
.soon-label { color: var(--text-3); }

/* ── Kontakt ─────────────────────────────────────────────── */
.contact-options { display: grid; grid-template-columns: 1.3fr 1fr; gap: 20px; }
.contact-options .tile h3 { font-size: 1.75rem; letter-spacing: -.025em; }
.contact-options .tile .actions { margin-top: auto; padding-top: 2rem; }
.contact-options .tile.primary { background: var(--sign); color: var(--on-sign); border-color: transparent; box-shadow: inset 0 0 0 4px var(--sign), inset 0 0 0 6px var(--on-sign); --text: var(--on-sign); --text-2: rgba(17,18,16,.78); --line-strong: rgba(17,18,16,.4); }
.contact-options .tile.primary .btn-primary { background: var(--on-sign); color: var(--sign); }
.contact-options .tile.primary .check-list svg { stroke: var(--on-sign); }
.contact-mail { font-size: clamp(1.2rem, 2vw, 1.5rem); font-weight: 600; color: var(--text); text-decoration: underline; text-decoration-color: var(--sign); text-underline-offset: 4px; word-break: break-all; }
.check-list { display: grid; gap: .6rem; margin-top: 1.4rem; }
.check-list li { display: flex; gap: .6rem; align-items: flex-start; }
.check-list svg { width: 18px; height: 18px; flex-shrink: 0; margin-top: 4px; fill: none; stroke: var(--sign); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }

/* ── Über uns ────────────────────────────────────────────── */
.story { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(40px, 6vw, 96px); align-items: center; }
.story p + p { margin-top: 1rem; }
.story-card { background: var(--tile); border-radius: var(--radius-lg); padding: clamp(32px, 5vw, 56px); display: flex; flex-direction: column; align-items: center; text-align: center; gap: 1rem; }
.story-card img { width: 96px; height: 96px; }
.story-card blockquote { font-size: 1.25rem; line-height: 1.45; letter-spacing: -.015em; font-weight: 500; max-width: 420px; }
.story-card cite { font-style: normal; color: var(--text-2); font-size: .9rem; }
.tech-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 16px; }
.tech { background: var(--tile); border-radius: var(--radius); padding: 24px 12px; display: flex; flex-direction: column; align-items: center; gap: .8rem; font-size: .92rem; font-weight: 500; }
.tech img { width: 44px; height: 44px; object-fit: contain; }

/* ── 404 ─────────────────────────────────────────────────── */
.notfound { min-height: calc(100vh - 200px); display: flex; align-items: center; justify-content: center; text-align: center; padding: calc(var(--nav-h) + 60px) 0 80px; }
.notfound-code { font-family: var(--font-display); font-size: clamp(6rem, 20vw, 12rem); font-weight: 700; letter-spacing: -.06em; line-height: .9; color: var(--text-3); }
.notfound .lead { max-width: 520px; margin: 1rem auto 2rem; }
.notfound-links { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; margin-top: 2.5rem; }

/* ── Responsive ──────────────────────────────────────────── */
@media (max-width: 1024px) {
  .price-desc { min-height: 0; }
  .price-grid { grid-template-columns: 1fr; max-width: 520px; margin: 0 auto; }
  .post-grid { grid-template-columns: repeat(2, 1fr); }
  .tech-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 768px) {
  .svc, .story, .contact-options, .post-featured, .work-grid { grid-template-columns: 1fr; }
  .svc.flip .svc-text { order: 0; }
  .svc-vis { min-height: 0; }
  .post-grid { grid-template-columns: 1fr; }
  .post-featured .post-thumb { min-height: 200px; }
  .tech-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ── Service visuals (shared by Startseite & Leistungen) ── */
.v-card, .vd, .v-app, .v-prod, .v-phone, .v-host div, .v-game {
  background: #fff; color: #111210;
  border: 0;
  box-shadow: inset 0 0 0 2px rgba(17,18,16,.14);
}
.v-devices { display: flex; align-items: flex-end; gap: 18px; }
.vd { border-radius: 14px; padding: 10px; display: grid; gap: 7px; align-content: start; }
.vd i { display: block; height: 7px; border-radius: 4px; background: #e8e5dc; }
.vd i.h { height: 34px; border-radius: 8px; background: var(--tc, var(--accent));  }
.vd i.w6 { width: 60%; } .vd i.w8 { width: 82%; }
.vd-desk { width: min(420px, 52vw); height: 240px; border-radius: 16px; }
.vd-tab  { width: 150px; height: 200px; }
.vd-ph   { width: 88px; height: 170px; border-radius: 20px; }
.vd-row  { display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px; }
.vd-row i { height: 42px; }
.vd-row i:nth-child(1) { background: var(--pink); } .vd-row i:nth-child(2) { background: var(--yellow); } .vd-row i:nth-child(3) { background: var(--sky); }

.v-app { width: 100%; max-width: 420px; border-radius: 18px; padding: 16px; text-align: left; }
.v-app-kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 14px; }
.v-app-kpis div { background: #f3f1ea; border-radius: 10px; padding: 10px; }
.v-app-kpis div:first-child { background: var(--tc, var(--accent)); }
.v-app-kpis small { display: block; font-size: .65rem; color: #55534c; }
.v-app-kpis b { font-family: var(--font-display); font-size: 1.3rem; letter-spacing: -.03em; }
.v-bars { display: flex; align-items: flex-end; gap: 6px; height: 110px; }
.v-bars i { flex: 1; border-radius: 6px 6px 3px 3px; background: #0b0b0a; transform-origin: bottom; transition: transform 1s var(--ease-out); }
.v-bars i:nth-child(3n) { background: var(--tc, var(--accent));  }

.v-shop { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; width: 100%; max-width: 420px; }
.v-prod { border-radius: 16px; padding: 10px; text-align: left; transition: transform .4s var(--spring); }
.v-prod:nth-child(2) { transform: translateY(-12px); }
.v-prod div { aspect-ratio: 1; border-radius: 10px; background: #f3f1ea; display: grid; place-items: center; margin-bottom: 8px; overflow: hidden; }
.v-prod div .illu { width: 90%; }
.v-prod div i { width: 50%; aspect-ratio: 1; border-radius: 50%; background: var(--tc, var(--accent));  }
.v-prod b { display: block; font-size: .75rem; }
.v-prod small { font-family: var(--mono); font-size: .7rem; color: #55534c; }

.v-phones { display: flex; gap: 16px; align-items: flex-end; }
.v-phone { width: 120px; height: 240px; border-radius: 26px; padding: 22px 10px 10px; display: grid; gap: 8px; align-content: start; }
.v-phone:nth-child(2) { height: 270px; }
.v-phone i { display: block; height: 7px; border-radius: 4px; background: #e8e5dc; }
.v-phone i.c { height: 60px; border-radius: 12px; background: #f3f1ea; }
.v-phone i.a { background: var(--tc, var(--accent));  }
.v-phone i.w6 { width: 60%; }

.v-game { width: 100%; max-width: 440px; border-radius: 18px; overflow: hidden; background: #0b0b0a; color: #f4f3ee; text-align: left; }
.v-game-hero { padding: 20px; display: flex; justify-content: space-between; align-items: center; gap: 12px; background: var(--tc, var(--pink)); color: #0b0b0a;  }
.v-game-hero small { display: inline-flex; align-items: center; gap: 6px; font-family: var(--mono); font-size: .68rem; font-weight: 500; }
.v-game-hero small::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: #0b0b0a;  }
.v-game-hero b { display: block; font-family: var(--font-display); font-size: 1.5rem; letter-spacing: -.04em; margin-top: 4px; text-transform: uppercase; }
.v-game-hero .illu { width: 74px; flex-shrink: 0; }
.v-game-rows { padding: 14px 20px 18px; display: grid; gap: 10px; font-size: .78rem; color: #a9a79f; }
.v-game-rows div { display: grid; grid-template-columns: 1fr auto; gap: 4px 12px; align-items: center; }
.v-game-rows span:last-child { font-family: var(--mono); color: #f4f3ee; }
.v-game-rows .bar { grid-column: 1 / -1; height: 8px; border-radius: 4px; background: #262624; overflow: hidden; }
.v-game-rows .bar i { display: block; height: 100%; background: var(--tc, var(--pink)); }

.v-host { width: 100%; max-width: 760px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; text-align: left; }
.v-host div { border-radius: 16px; padding: 16px 18px; }
.v-host small { display: block; font-family: var(--mono); font-size: .7rem; color: #55534c; margin-bottom: .35rem; text-transform: uppercase; letter-spacing: .06em; }
.v-host b { display: flex; align-items: center; gap: .5rem; font-family: var(--font-display); font-size: 1.1rem; letter-spacing: -.02em; }
.v-host b::before { content: ''; width: 10px; height: 10px; border-radius: 50%; background: #1fbf6b;  }
.v-host div:nth-child(2) b::before { background: var(--yellow); }
.v-host div:nth-child(3) b::before { background: var(--sky); }

@media (max-width: 768px) {
  .v-devices { width: 100%; justify-content: center; }
  .v-devices .vd-tab { display: none; }
  .vd-desk { flex: 1 1 auto; width: auto; min-width: 0; max-width: 300px; height: 180px; }
  .vd-ph { flex-shrink: 0; width: 70px; height: 140px; }
  .v-host { grid-template-columns: 1fr; }
  .v-phone { width: 96px; height: 200px; } .v-phone:nth-child(2) { height: 224px; }
  .v-phones .v-phone:nth-child(3) { display: none; }
}

/* ── Preise: Einstieg, Wartung, Inklusive ──────────────── */
.entry { display: grid; grid-template-columns: 1.2fr 1fr; gap: 16px; margin-bottom: 16px; }
.entry-sign { padding: clamp(28px, 4vw, 48px); display: grid; gap: 14px; align-content: start; }
.entry-sign .price-amount { margin: .4rem 0 0; }
.entry-sign .price-list li svg { stroke: var(--on-sign); }
.entry-incl { gap: 12px; }
.plan-row { display: grid; grid-template-columns: 1.4fr 1fr; gap: 16px; margin-top: 16px; }
.plan { flex-direction: row; gap: 32px; align-items: stretch; scroll-margin-top: calc(var(--nav-h) + 24px); }
.plan > div:first-child { flex: 1; }
.plan .price-list { margin-top: 1.4rem; }
.plan-price { display: flex; flex-direction: column; justify-content: flex-end; min-width: 200px; }
.plan-price .btn { margin-top: 1rem; }
.plan-custom { flex-direction: column; gap: 12px; }
.plan-custom .btn { margin-top: auto; align-self: flex-start; }
.cta-tile { padding: clamp(40px, 7vw, 88px) clamp(28px, 6vw, 80px); display: grid; gap: 1.1rem; justify-items: start; }
.cta-tile p { max-width: 52ch; font-size: 1.15rem; }
@media (max-width: 900px) {
  .entry, .plan-row { grid-template-columns: 1fr; }
  .plan { flex-direction: column; }
  .plan-price { min-width: 0; }
}

/* ── Leistungen: Sprungmarken & Visuals ──────────────────── */
.jump { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 2rem; }
.jump .route { min-height: 44px; padding: .5rem .9rem .5rem .7rem; font-size: 1.05rem; }
.way-h::before { content: ''; display: block; width: 44px; height: 8px; border-radius: 2px; background: var(--rc); margin-bottom: 16px; }
.v-stack { width: 100%; max-width: 420px; display: grid; gap: 12px; }
.v-stack div { background: #fff; color: #111210; border-radius: var(--radius); padding: 16px 18px; box-shadow: inset 0 0 0 2px rgba(17,18,16,.14); }
.v-stack div:nth-child(2) { margin-left: 24px; }
.v-stack div:nth-child(3) { margin-left: 48px; }
.v-stack small, .v-local small { display: block; color: #4c4a41; font-size: .9rem; }
.v-stack b { font-family: var(--font-display); font-size: 1.15rem; overflow-wrap: anywhere; }
.v-local { width: 100%; max-width: 340px; background: #fff; color: #111210; border-radius: var(--radius-lg); padding: 24px; box-shadow: inset 0 0 0 2px rgba(17,18,16,.14); display: grid; gap: 6px; }
.v-local > b { font-family: var(--font-display); font-size: 1.6rem; }
.v-local dl { display: grid; grid-template-columns: auto 1fr; gap: 6px 18px; margin: 12px 0; padding: 12px 0; border-top: 1px solid rgba(17,18,16,.15); border-bottom: 1px solid rgba(17,18,16,.15); }
.v-local dd { text-align: right; font-variant-numeric: tabular-nums; }
.v-local > span { justify-self: start; background: var(--route-local); color: #fff; font-weight: 700; padding: 8px 16px; border-radius: var(--radius-sm); }
@media (max-width: 768px) { .v-stack div:nth-child(2), .v-stack div:nth-child(3) { margin-left: 0; } }