/* BpNexT.NET — marketing theme. Dark, purple→cyan, Inter. Self-contained (no framework). */
:root {
  --bg: #070A12;
  --bg-2: #08111c;
  --surface: rgba(255, 255, 255, .045);
  --surface-strong: rgba(255, 255, 255, .07);
  --line: rgba(255, 255, 255, .10);
  --line-soft: rgba(255, 255, 255, .06);
  --text: #f6f9fd;
  --muted: #a8b4c5;
  --muted-2: #718095;
  --violet: #512BD4;
  --violet-soft: #9B88FF;
  --accent: #8fa7ff;
  --cyan: #00D4EA;
  --cyan-2: #56d8dd;
  --success: #66dda0;
  --max: 1200px;
  --header-h: 92px;

  /* Kantenrundung: eine Skala statt gewachsener Einzelwerte. */
  --r-sm: 5px;   /* Buttons, Eingaben, Chips, Bildrahmen */
  --r-md: 8px;   /* Karten, Zeilen, Panels */
  --r-lg: 10px;  /* grosse Flaechen: Code-Fenster, Tabellen, Modal */
  --r-pill: 999px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: var(--header-h); }
body {
  margin: 0;
  min-width: 320px;
  color: var(--text);
  background: var(--bg);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  line-height: 1.5;
}
body::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1000px;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(circle at 16% -70px, rgba(81, 43, 212, .28), transparent 36rem),
    radial-gradient(circle at 88% 20px, rgba(0, 212, 234, .14), transparent 32rem);
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; cursor: pointer; }

.container { width: min(calc(100% - 40px), var(--max)); margin-inline: auto; }
.section { padding: 104px 0; }
.section-soft { background: rgba(255, 255, 255, .02); border-block: 1px solid var(--line-soft); }
.narrow { max-width: 820px; }

/* ---------- Typography ---------- */
h1, h2, h3, h4, p { margin-top: 0; }
h1 {
  margin-bottom: 24px;
  max-width: 900px;
  font-size: clamp(44px, 6.4vw, 78px);
  line-height: 1.0;
  letter-spacing: -.05em;
  font-weight: 900;
}
h2 {
  margin-bottom: 18px;
  max-width: 780px;
  font-size: clamp(33px, 4.6vw, 54px);
  line-height: 1.05;
  letter-spacing: -.04em;
  font-weight: 850;
}
h3 { font-size: 20px; letter-spacing: -.02em; font-weight: 800; margin-bottom: 8px; }
.eyebrow {
  margin-bottom: 16px;
  color: var(--cyan-2);
  font-size: 13px;
  font-weight: 850;
  letter-spacing: .06em;
}
.container-center { text-align: center; }
.container-center h2,
.container-center .lead { margin-left: auto; margin-right: auto; }
.card .eyebrow {
  font-size: 12px;
  letter-spacing: .06em;
}
.lead { max-width: 730px; color: #cbd5e2; font-size: clamp(17px, 2vw, 21px); line-height: 1.65; }
.copy { color: var(--muted); line-height: 1.75; }
.copy p { margin: 0 0 16px; }
/* Kein Verlauf zwischen den beiden Markenfarben: Lila steht fuer .NET, Tuerkis fuer
   microtech. Vermischt sagt der Hero weder das eine noch das andere. Ein Hero waehlt
   eine Farbe — die des Themas, um das es auf der Seite geht. */
.highlight { color: var(--violet-soft); }
.highlight-teal { color: var(--cyan-2); }
/* Verlauf laeuft von microtech-Tuerkis nach .NET-Lila — beide Marken in der Reihenfolge,
   in der die Ueberschrift sie nennt. oklab haelt die Mitte farbig statt graublau. */
.highlight-gradient {
  background: linear-gradient(100deg, var(--violet-soft), var(--cyan));
  background: linear-gradient(100deg in oklab, var(--violet-soft), var(--cyan));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.kbd {
  border: 1px solid var(--line);
  background: var(--surface);
  border-radius: .4rem;
  padding: .08rem .4rem;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: .88em;
}

/* ---------- Header / nav ---------- */
.topbar {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(7, 10, 18, .72);
  backdrop-filter: blur(18px);
  border-bottom: 1px solid transparent;
  transition: .2s ease;
}
.topbar.scrolled { background: rgba(7, 10, 18, .95); border-color: var(--line); }
.nav { min-height: 76px; display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.brand { display: flex; align-items: center; gap: 11px; font-weight: 900; letter-spacing: -.03em; font-size: 17px; color: #fff; }
.brand-mark { width: 34px; height: 34px; display: block; object-fit: contain; }
.nav-links { display: flex; align-items: center; gap: 6px; }
.nav-item { position: relative; }
.nav-item > a, .nav-item > .nav-parent {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 9px 13px; border-radius: var(--r-sm);
  color: var(--muted); font-size: 14px; font-weight: 700;
  transition: .15s ease;
}
.nav-item > .nav-parent { cursor: default; user-select: none; }
.nav-item > a:hover, .nav-item.active > a,
.nav-item:hover > .nav-parent, .nav-item:focus-within > .nav-parent { color: #fff; background: var(--surface); }
.nav-item .caret { width: 12px; height: 12px; opacity: .6; }
.dropdown {
  position: absolute; top: calc(100% + 8px); left: 0;
  min-width: 240px; padding: 8px;
  border: 1px solid var(--line); border-radius: var(--r-md);
  background: #0b1220; box-shadow: 0 26px 70px rgba(0, 0, 0, .5);
  opacity: 0; visibility: hidden; transform: translateY(6px);
  transition: .16s ease;
}
.nav-item:hover .dropdown, .nav-item:focus-within .dropdown { opacity: 1; visibility: visible; transform: translateY(0); }
.dropdown a { display: block; padding: 9px 12px; border-radius: var(--r-sm); color: var(--muted); font-size: 14px; font-weight: 650; }
.dropdown a:hover { color: #fff; background: var(--surface); }
.nav-cta { display: flex; align-items: center; gap: 10px; }
.mobile-toggle { display: none; width: 44px; height: 44px; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--surface); color: #fff; }
.mobile-menu { display: none; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; min-height: 48px; align-items: center; justify-content: center; gap: 8px;
  padding: 0 22px; border: 1px solid transparent; border-radius: var(--r-sm);
  font-size: 14px; font-weight: 850; transition: .16s ease; white-space: nowrap;
}
.btn:hover { transform: translateY(-1px); }
.btn-primary { background: var(--violet); color: #fff; }
.btn-primary:hover { background: #5e39e6; }
.btn-secondary { border-color: var(--line); background: var(--surface); color: #fff; }
.btn-secondary:hover { border-color: rgba(255, 255, 255, .2); background: var(--surface-strong); }
.btn-ghost { color: var(--cyan-2); font-weight: 750; }
.btn-ghost:hover { color: #fff; }

/* ---------- Hero ---------- */
.hero { padding: 84px 0 104px; position: relative; }
.hero-grid { display: grid; grid-template-columns: .95fr 1.05fr; gap: 48px; align-items: center; }
.hero-grid .hero-wrap { min-width: 0; }
.hero-grid .hero-wrap h1 { max-width: 620px; }
.hero-grid .code-window { min-width: 0; }
.hero-badge {
  display: inline-flex; align-items: center; gap: 9px; margin-bottom: 24px;
  padding: 8px 13px; border: 1px solid rgba(102, 221, 160, .22); border-radius: var(--r-pill);
  background: rgba(102, 221, 160, .07); color: #b9f0d0; font-size: 12px; font-weight: 800;
}
.dot { width: 7px; height: 7px; border-radius: 50%; background: var(--success); box-shadow: 0 0 0 6px rgba(102, 221, 160, .09); }
.actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }
.hero-note { margin-top: 24px; color: var(--muted-2); font-size: 13px; }

/* ---------- Cards / grids ---------- */
/* Cards keep their column width; a short last row is centered instead of stretched. */
.grid { display: flex; flex-wrap: wrap; justify-content: center; gap: 20px; --grid-cols: 3; }
.grid > * {
  flex: 0 1 calc((100% - (var(--grid-cols) - 1) * 20px) / var(--grid-cols));
  min-width: min(260px, 100%);
}
.grid-2 { --grid-cols: 2; }
.grid-3 { --grid-cols: 3; }
.split { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; }
.split-wide { grid-template-columns: .9fr 1.1fr; }
.card {
  padding: 24px; border: 1px solid var(--line); border-radius: var(--r-lg);
  background: var(--surface); transition: .16s ease;
}
.card:hover { border-color: rgba(255, 255, 255, .18); background: var(--surface-strong); transform: translateY(-2px); }
.card { position: relative; }
.card-linked { cursor: pointer; }
.card-stretch { position: absolute; inset: 0; z-index: 1; border-radius: var(--r-lg); }
.card h3 { color: #fff; }
.card p { margin: 0; color: var(--muted); line-height: 1.7; font-size: 14px; }
.stat { font-size: clamp(28px, 3vw, 34px); font-weight: 900; color: #fff; letter-spacing: -.03em; }
.panel {
  border: 1px solid var(--line); border-radius: var(--r-lg);
  background: linear-gradient(160deg, rgba(20, 37, 59, .8), rgba(9, 20, 34, .92));
  box-shadow: 0 30px 90px rgba(0, 0, 0, .3);
}

/* Numbered / labelled list rows */
/* One shared grid for all rows so the marker column is as wide as the widest marker
   (numbers stay compact, text labels get the room they need) and stays aligned across rows. */
.rows { display: grid; grid-template-columns: minmax(44px, max-content) 1fr; border-top: 1px solid var(--line); }
.row-item { display: contents; }
.row-item > * { padding: 24px 0; border-bottom: 1px solid var(--line); }
.row-item > :first-child { padding-right: 22px; }
.row-num { color: var(--accent); font-size: 12px; font-weight: 900; white-space: nowrap; }
.row-label { color: var(--cyan-2); font-size: 11px; font-weight: 900; letter-spacing: .14em; text-transform: uppercase; white-space: nowrap; }
.row-item p { margin: 0; color: var(--muted); line-height: 1.7; }

/* Chips */
.chips { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 24px; }
.chip { padding: 8px 12px; border: 1px solid var(--line); border-radius: var(--r-sm); color: #c8d3e0; background: rgba(255, 255, 255, .025); font-size: 12px; font-weight: 700; }

/* Checklists */
.checks { display: grid; gap: 12px; margin-top: 20px; }
.check { display: flex; gap: 11px; color: var(--muted); line-height: 1.65; align-items: baseline; }
.check .tick { color: var(--success); font-weight: 900; }

/* ---------- Code window ---------- */
.code-window {
  overflow: hidden; border: 1px solid var(--line); border-radius: var(--r-lg);
  background: linear-gradient(160deg, rgba(17, 31, 52, .96), rgba(7, 15, 27, .98));
  box-shadow: 0 30px 80px rgba(0, 0, 0, .32);
}
.code-head { display: flex; align-items: center; justify-content: space-between; padding: 13px 18px; border-bottom: 1px solid var(--line); color: var(--muted-2); font-size: 12px; font-weight: 700; }
.code-dots { display: flex; gap: 7px; }
.code-dots span { width: 11px; height: 11px; border-radius: 50%; }
.code-dots span:nth-child(1) { background: rgba(248, 113, 113, .85); }
.code-dots span:nth-child(2) { background: rgba(250, 204, 21, .85); }
.code-dots span:nth-child(3) { background: rgba(52, 211, 153, .85); }
.code-window pre { margin: 0; padding: 24px; overflow-x: auto; color: #dce6f3; font: 13px/1.75 ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace; }
.code-window .foot { border-top: 1px solid var(--line); padding: 14px 18px; color: var(--muted); font-size: 13px; }
.tok-key { color: #b9a9ff; }
.tok-type { color: #73dce2; }
.tok-attr { color: #a9e5bf; }
.tok-str { color: #f0ca8a; }
.tok-com { color: #6b7a90; font-style: italic; }

/* ---------- Prism syntax highlighting (brand-tuned, transparent bg) ---------- */
pre[class*="language-"], code[class*="language-"] {
  background: transparent !important;
  text-shadow: none !important;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace !important;
  font-size: 13px; line-height: 1.75;
}
/* Prism adds the language class to <pre> too; keep padding from .code-window / .code-modal-body. */
pre[class*="language-"] { margin: 0; overflow-x: auto; }
.token.comment, .token.prolog, .token.doctype, .token.cdata { color: #6b7a90; font-style: italic; }
.token.punctuation { color: #9fb0c3; }
.token.keyword, .token.boolean, .token.operator, .token.keyword.control { color: #b9a9ff; }
.token.class-name, .token.type-expression, .token.namespace, .token.builtin { color: #73dce2; }
.token.function, .token.method, .token.attribute, .token.annotation { color: #a9e5bf; }
.token.string, .token.char, .token.number, .token.constant { color: #f0ca8a; }
.token.property, .token.tag, .token.symbol { color: #93c5fd; }

/* ---------- Code modal ---------- */
.code-modal { position: fixed; inset: 0; z-index: 100; display: none; align-items: center; justify-content: center; padding: 20px; background: rgba(3, 6, 14, .72); backdrop-filter: blur(5px); }
.code-modal[data-open="true"] { display: flex; }
.code-modal-box { width: 100%; max-width: 940px; max-height: 86vh; display: flex; flex-direction: column; overflow: hidden; border: 1px solid var(--line); border-radius: var(--r-lg); background: linear-gradient(160deg, rgba(17, 31, 52, .98), rgba(7, 15, 27, .99)); box-shadow: 0 40px 120px rgba(0, 0, 0, .6); }
.code-modal-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 15px 20px; border-bottom: 1px solid var(--line); }
.code-modal-head h3 { margin: 0; font-size: 15px; }
.code-modal-head .eyebrow { margin: 0 0 3px; }
.code-modal-close { width: 40px; height: 40px; border-radius: var(--r-pill); border: 1px solid var(--line); background: var(--surface); color: #fff; font-size: 20px; line-height: 1; }
.code-modal-close:hover { background: var(--surface-strong); }
.code-modal-body { margin: 0; padding: 22px; overflow: auto; }
.bench-code { min-height: 30px; padding: 0 12px; border-radius: var(--r-sm); }

/* ---------- Tables (pricing / compare) ---------- */
.table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--r-lg); background: rgba(255, 255, 255, .018); }
table.compare { width: 100%; min-width: 760px; border-collapse: collapse; }
table.compare th, table.compare td { padding: 18px 22px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: middle; }
table.compare tr:last-child td { border-bottom: 0; }
table.compare thead th { background: rgba(255, 255, 255, .025); padding-block: 22px; }
table.compare thead th:nth-child(3) { background: rgba(143, 167, 255, .08); }
table.compare th:first-child, table.compare td:first-child { width: 30%; color: var(--muted); font-size: 12px; font-weight: 750; }
.th-title { display: block; color: #fff; font-size: 18px; font-weight: 900; }
.th-sub { color: var(--muted-2); font-size: 10px; font-weight: 650; }
.price { color: #fff; font-size: 24px; font-weight: 900; letter-spacing: -.03em; }
.price small { display: block; margin-top: 5px; color: var(--muted-2); font-size: 10px; font-weight: 650; letter-spacing: 0; }
.val { color: #eaf0f7; font-size: 13px; font-weight: 750; }
.val.on { color: #b7efce; }

/* Pricing rows */
/* Editable pricing-block cards */
.pricing-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 16px; }
.pricing-card { display: flex; flex-direction: column; padding: 24px; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface); }
.pricing-card.featured { border-color: rgba(139, 114, 255, .35); background: rgba(139, 114, 255, .06); }
.pricing-card .name { font-size: 18px; font-weight: 900; color: #fff; letter-spacing: -.02em; }
.pricing-card .badge { margin-top: 4px; color: var(--muted-2); font-size: 12px; }
.pricing-card .price { margin: 16px 0 0; font-size: 30px; font-weight: 900; letter-spacing: -.03em; color: #fff; }
.pricing-card .price small { display: block; margin-top: 4px; color: var(--muted-2); font-size: 11px; font-weight: 650; }
.pricing-card ul { list-style: none; padding: 0; margin: 16px 0 0; display: grid; gap: 9px; }
.pricing-card li { position: relative; padding-left: 22px; color: var(--muted); font-size: 13px; line-height: 1.5; }
.pricing-card li::before { content: "\2713"; position: absolute; left: 0; color: var(--success); font-weight: 900; }
.pricing-card .desc { margin-top: 14px; color: var(--muted); font-size: 13px; line-height: 1.6; }
.pricing-card .btn { margin-top: auto; width: 100%; }
.pricing-card > :has(+ .btn) { margin-bottom: 22px; }
.pricing-card > .btn:first-child { margin-top: 20px; }

.price-table { overflow: hidden; border: 1px solid var(--line); border-radius: var(--r-lg); background: rgba(255, 255, 255, .018); }
.price-row { display: grid; grid-template-columns: 1.05fr .75fr 1.4fr auto; gap: 22px; align-items: start; padding: 24px 26px; border-bottom: 1px solid var(--line); }
.price-row:last-child { border-bottom: 0; }
.price-row.featured { background: rgba(143, 167, 255, .055); }
.price-name b { display: block; font-size: 18px; color: #fff; }
.price-name span { display: block; margin-top: 6px; color: var(--muted-2); font-size: 11px; }
.price-val { font-size: 26px; font-weight: 900; letter-spacing: -.03em; color: #fff; }
.price-val small { display: block; margin-top: 5px; color: var(--muted-2); font-size: 10px; font-weight: 650; }
.price-desc { color: var(--muted); font-size: 12px; line-height: 1.6; }
.price-desc p { margin: 0; }
.price-feats { list-style: none; padding: 0; margin: 8px 0 0; display: grid; gap: 6px; }
.price-feats li { position: relative; padding-left: 20px; font-size: 12px; color: var(--muted); line-height: 1.45; }
.price-feats li::before { content: "\2713"; position: absolute; left: 0; color: var(--success); font-weight: 900; }
.note { margin-top: 18px; color: var(--muted); font-size: 12px; line-height: 1.7; }
.note strong { color: #dce5ef; }

/* ---------- FAQ ---------- */
.faq { display: grid; gap: 12px; }
.faq details { border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface); }
.faq summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 18px 22px; cursor: pointer; font-weight: 800; color: #fff; list-style: none; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; color: var(--cyan-2); font-size: 20px; font-weight: 400; }
.faq details[open] summary::after { content: "\2013"; }
.faq p { margin: 0; padding: 0 22px 20px; color: var(--muted); line-height: 1.7; font-size: 14px; }

/* ---------- Benchmark ---------- */
.bench-card { border: 1px solid var(--line); border-radius: var(--r-lg); background: rgba(11, 16, 32, .75); padding: 24px; box-shadow: 0 30px 90px rgba(0, 0, 0, .3); }
.bench-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 22px; }
.bench-head h3 { margin: 0; }
.bench-head span { font-size: 12px; color: var(--muted-2); }
.bench-row { padding: 16px; border: 1px solid var(--line); border-radius: var(--r-md); background: rgba(255, 255, 255, .03); margin-bottom: 12px; }
.bench-row.hi { border-color: rgba(139, 114, 255, .2); background: rgba(139, 114, 255, .05); }
.bench-row.ok { border-color: rgba(52, 211, 153, .2); background: rgba(52, 211, 153, .05); }
.bench-row .top { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 10px; font-size: 14px; font-weight: 700; }
.bench-row .mono { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; color: #eef2f8; }
.bench-row .desc { margin: 8px 0 0; font-size: 12px; color: var(--muted-2); line-height: 1.55; }
.bar { height: .72rem; border-radius: var(--r-pill); }
.bar-com { background: linear-gradient(90deg, rgba(148, 163, 184, .55), rgba(203, 213, 225, .4)); box-shadow: 0 0 24px rgba(148, 163, 184, .12); }
.bar-query { background: linear-gradient(90deg, rgba(81, 43, 212, .9), rgba(139, 114, 255, .7)); box-shadow: 0 0 28px rgba(124, 92, 255, .2); }
.bar-read { background: linear-gradient(90deg, rgba(16, 185, 129, .9), rgba(52, 211, 153, .7)); box-shadow: 0 0 32px rgba(16, 185, 129, .22); }
.bench-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 22px; }
.bench-stats .box { border-radius: var(--r-md); background: rgba(255, 255, 255, .045); padding: 16px; }
.bench-stats .box b { display: block; margin: 4px 0 2px; font-size: clamp(20px, 2.4vw, 26px); font-weight: 900; color: #fff; letter-spacing: -.03em; }
.bench-stats .box span { color: var(--muted-2); font-size: 12px; }
.reveal { display: grid; gap: 12px; margin-top: 26px; }
.reveal details { border: 1px solid var(--line); border-radius: var(--r-md); overflow: hidden; background: var(--surface); }
.reveal summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px 18px; cursor: pointer; font-weight: 800; color: #fff; list-style: none; }
.reveal summary::-webkit-details-marker { display: none; }
.reveal summary::after { content: "Code anzeigen"; color: var(--cyan-2); font-size: 12px; font-weight: 750; }
.reveal details[open] summary::after { content: "Schließen"; }
.reveal .code-window { border: 0; border-top: 1px solid var(--line); border-radius: 0; box-shadow: none; }

/* ---------- CTA band ---------- */
.cta-band {
  border: 1px solid var(--line); border-radius: var(--r-lg); padding: 48px;
  background: rgba(81, 43, 212, .14);
  text-align: center;
}
.cta-band h2, .cta-band .lead { margin-inline: auto; }
.cta-band .actions { justify-content: center; }

/* ---------- Page header (CMS pages) ---------- */
.page-hero { padding: 96px 0 40px; }
.page-hero .eyebrow { color: var(--cyan-2); }

/* ---------- Footer ---------- */
footer { border-top: 1px solid var(--line); margin-top: 40px; }
.footer-inner { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 34px 0; color: var(--muted-2); font-size: 12px; }
.footer-links { display: flex; flex-wrap: wrap; gap: 20px; }
.footer-links a:hover { color: #cbd5e2; }

/* ---------- Block spacing (CMS body) ---------- */
.blocks > .block { padding-block: 20px; }
.blocks h2 { margin-top: 8px; }
.blocks .lead { margin-bottom: 16px; }

/* ---------- Logos ---------- */
.logos { display: grid; grid-template-columns: repeat(6, 1fr); gap: 16px; align-items: start; margin-top: 30px; }
.logo-cell { position: relative; display: flex; flex-direction: column; gap: 8px; text-align: center; }
.logo { display: grid; place-items: center; height: 58px; padding: 0 10px; border: 1px solid var(--line); border-radius: var(--r-md); background: rgba(255, 255, 255, .02); color: var(--muted-2); font-weight: 900; letter-spacing: -.02em; font-size: 14px; text-align: center; opacity: .72; transition: .16s ease; }
.logo-cell:hover .logo { opacity: 1; color: #cbd5e2; border-color: rgba(255, 255, 255, .18); }
.logo img { max-height: 66%; max-width: 86%; width: auto; height: auto; object-fit: contain; }
.logo-name { font-size: 12px; font-weight: 800; color: #cbd5e2; letter-spacing: -.01em; }
.logo-cap { font-size: 11px; color: var(--muted-2); line-height: 1.45; }
.logo-link { position: absolute; inset: 0; z-index: 1; border-radius: var(--r-md); }
/* Wider tiles for horizontal wordmark logos */
.logos.logos-lg { grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 18px; }
.logos-lg .logo { height: 96px; }
.logos-lg .logo img { max-width: 90%; max-height: 68%; }
/* Centered logo wall: flex so a few logos sit in the middle instead of the left grid columns */
.logos.logos-center { display: flex; flex-wrap: wrap; justify-content: center; }
.logos-center .logo-cell { flex: 0 1 170px; }
.logos-center.logos-lg .logo-cell { flex: 0 1 240px; }

/* One CTA per pricing table, anchored to the section header (replaces the per-plan buttons) */
.pricing-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.pricing-head h2 { margin-bottom: 0; }
.pricing-head-cta { margin-bottom: 6px; white-space: nowrap; }

/* ---------- Contact form ---------- */
/* The form sits beside its heading so the block fills the same width as the hero
   above it instead of shrinking to a narrow, off-centre column. */
.contact-layout { display: grid; grid-template-columns: .82fr 1.18fr; gap: 64px; align-items: start; }
.contact-intro h2 { margin-bottom: 16px; }
.contact-intro .lead { font-size: clamp(16px, 1.7vw, 18px); }
.contact-panel {
  padding: 32px; border: 1px solid var(--line); border-radius: var(--r-lg);
  background: linear-gradient(160deg, rgba(20, 37, 59, .55), rgba(9, 20, 34, .8));
  box-shadow: 0 30px 90px rgba(0, 0, 0, .28);
}
/* A hero already carries its own bottom padding — don't stack a full section pad on top of it. */
.hero + .contact-section { padding-top: 16px; }
.contact-form { margin-top: 0; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.form-field { display: flex; flex-direction: column; gap: 7px; }
.form-field-full { grid-column: 1 / -1; }
.form-field label { font-size: 13px; font-weight: 750; color: #cbd5e2; letter-spacing: -.01em; }
.form-field input,
.form-field select,
.form-field textarea {
  font: inherit;
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  padding: 12px 14px;
  outline: none;
  transition: border-color .16s ease, background .16s ease;
}
.form-field textarea { resize: vertical; min-height: 140px; }
.form-field select { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%), linear-gradient(135deg, var(--muted) 50%, transparent 50%); background-position: calc(100% - 20px) 50%, calc(100% - 14px) 50%; background-size: 6px 6px; background-repeat: no-repeat; }
.form-field select option { background: var(--bg-2); color: var(--text); }
.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus { border-color: var(--cyan-2); background: var(--surface-strong); }
.form-consent { display: flex; gap: 11px; align-items: flex-start; margin-top: 20px; font-size: 13px; color: var(--muted); line-height: 1.6; cursor: pointer; }
.form-consent input { margin-top: 3px; accent-color: var(--cyan); }
.form-consent a { color: var(--cyan-2); }
.form-consent a:hover { color: #fff; }
.form-note { margin-top: 18px; font-size: 12px; color: var(--muted-2); }
.form-hp { position: absolute; left: -9999px; opacity: 0; height: 0; overflow: hidden; }
.form-alert { margin-top: 30px; border-radius: var(--r-md); border: 1px solid var(--line); padding: 18px 20px; line-height: 1.65; }
.contact-panel > .form-alert { margin-top: 0; }
.contact-panel .form-alert + .contact-form { margin-top: 24px; }
.form-alert-success { border-color: rgba(102, 221, 160, .35); background: rgba(102, 221, 160, .08); color: var(--success); }
.form-alert-error { border-color: rgba(255, 120, 120, .35); background: rgba(255, 120, 120, .07); color: #ff9d9d; }
@media (max-width: 960px) {
  .contact-layout { grid-template-columns: 1fr; gap: 32px; }
  .hero + .contact-section { padding-top: 32px; }
}
@media (max-width: 620px) {
  .form-grid { grid-template-columns: 1fr; }
  .contact-panel { padding: 24px 20px; border-radius: var(--r-md); }
}

/* ---------- Blog ---------- */
.post-meta { color: var(--muted-2); font-size: 12px; }
.prose h2, .prose h3 { margin: 30px 0 10px; color: #fff; font-size: 22px; }
.prose p { margin: 0 0 16px; color: var(--muted); line-height: 1.8; }
.prose ul { color: var(--muted); line-height: 1.8; padding-left: 20px; }
.prose a { color: var(--cyan-2); }
.mobile-parent { display: block; padding: 14px 12px 4px; color: var(--muted-2); font-size: 11px; font-weight: 900; letter-spacing: .12em; text-transform: uppercase; }


/* ---------- Screenshots / product showcase ---------- */
/* Screenshots rarely carry a section on their own — the block always pairs them
   with copy, either beside them (default) or in a header above. */
.showcase .showcase-intro-top { margin-bottom: 40px; max-width: 820px; }
.showcase-flip { direction: rtl; }
.showcase-flip > * { direction: ltr; }

.shots { display: grid; gap: 28px; min-width: 0; }
/* Codebeispiel in der Textspalte: gleiche Kantenrundung wie der Screenshot daneben.
   Mehrere Beispiele liegen wie die Bilder uebereinander, damit die Spalte nicht springt. */
.showcase-codes { display: grid; margin-top: 28px; }
.showcase-code { grid-row: 1; grid-column: 1; border-radius: var(--r-sm); }
.showcase-codes .showcase-code { opacity: 0; pointer-events: none; }
.showcase-codes .showcase-code.is-active { opacity: 1; pointer-events: auto; }
.showcase-code pre { padding: 20px; font-size: 12.5px; }
.shots-grid { grid-template-columns: repeat(auto-fit, minmax(min(340px, 100%), 1fr)); }
.shot { margin: 0; display: grid; gap: 12px; min-width: 0; }

/* Nüchterner Rahmen statt Fenster-Attrappe: der Screenshot bringt seine eigene
   Titelleiste mit, eine zweite gefakte darüber wäre doppelt und falsch. */
.shot-frame {
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--bg-2);
  box-shadow: 0 18px 50px rgba(0, 0, 0, .35);
}
.shot-frame-bare { border: 0; background: none; box-shadow: none; border-radius: 0; }

.shot-img { width: 100%; height: auto; display: block; cursor: zoom-in; }
.shot-cap { color: var(--muted); font-size: 13px; line-height: 1.65; }
.content-image { width: 100%; height: auto; border: 1px solid var(--line); border-radius: var(--r-sm); }

/* Tabs — mehrere Ansichten desselben Produkts ohne endlose Bildspalte.
   Alle Panels liegen in derselben Grid-Zelle, auch die inaktiven. Damit ist die Höhe
   der Sektion konstant und der Inhalt darunter springt beim Umschalten nicht. */
.shots-tabs { grid-template-rows: auto 1fr; }
.shots-tabs .shot-tabs { grid-row: 1; }
.shots-tabs .shot { grid-row: 2; grid-column: 1; opacity: 0; pointer-events: none; }
.shots-tabs .shot.is-active { opacity: 1; pointer-events: auto; }
.shot-tabs { display: flex; flex-wrap: wrap; gap: 0 26px; border-bottom: 1px solid var(--line); }
.shot-tab {
  position: relative; padding: 0 0 13px; border: 0; background: none;
  color: var(--muted-2); font-size: 12px; font-weight: 800; letter-spacing: .04em;
  transition: color .16s ease;
}
.shot-tab::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px;
  background: transparent; transition: background .16s ease;
}
.shot-tab:hover { color: #cbd5e2; }
.shot-tab.is-active { color: #fff; }
.shot-tab.is-active::after { background: var(--cyan); }
/* Unterschiedlich lange Bildunterschriften duerfen die Hoehe ebenfalls nicht veraendern. */
.shots-tabs .shot-cap { min-height: 2.6em; }

/* Lightbox — Studio screenshots are too dense to read at half width */
.shot-modal {
  position: fixed; inset: 0; z-index: 100; display: none;
  align-items: center; justify-content: center; padding: 24px;
  background: rgba(3, 6, 14, .82); backdrop-filter: blur(5px);
}
.shot-modal[data-open="true"] { display: flex; }
.shot-modal img {
  max-width: min(1400px, 100%); max-height: 92vh; width: auto; height: auto;
  border: 1px solid var(--line); border-radius: var(--r-sm); box-shadow: 0 40px 120px rgba(0, 0, 0, .6);
}
.shot-modal-close {
  position: absolute; top: 20px; right: 20px; width: 42px; height: 42px;
  border-radius: var(--r-pill); border: 1px solid var(--line); background: var(--surface);
  color: #fff; font-size: 22px; line-height: 1;
}
.shot-modal-close:hover { background: var(--surface-strong); }


/* ---------- Leistungsumfang ---------- */
/* Datenblatt statt Kachelwand: dicht, gruppiert, in zehn Sekunden ueberfliegbar. */
.specs .lead { margin-bottom: 8px; }
.spec-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
  gap: 0 48px;
  margin-top: 40px;
}
.spec-group { padding: 26px 0; border-top: 1px solid var(--line); }
.spec-title {
  margin: 0 0 14px; color: var(--cyan-2); font-size: 11px; font-weight: 900;
  letter-spacing: .14em; text-transform: uppercase;
}
.spec-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.spec-list li { color: var(--muted); font-size: 14px; line-height: 1.55; }
.spec-tag {
  margin-left: 8px; padding: 2px 7px; border: 1px solid var(--line);
  border-radius: var(--r-sm); color: var(--muted-2); font-size: 10px; font-weight: 800;
  letter-spacing: .06em; text-transform: uppercase; white-space: nowrap;
}

/* ---------- Responsive ---------- */
@media (max-width: 960px) {
  .nav-links, .nav-cta .btn { display: none; }
  .mobile-toggle { display: grid; place-items: center; }
  .mobile-menu {
    position: absolute; top: 70px; left: 20px; right: 20px; padding: 12px;
    border: 1px solid var(--line); border-radius: var(--r-md); background: #0b1220;
    box-shadow: 0 26px 70px rgba(0, 0, 0, .5); z-index: 60;
  }
  .mobile-menu.open { display: grid; gap: 2px; }
  .mobile-menu a { padding: 12px; border-radius: var(--r-sm); color: var(--muted); font-size: 14px; font-weight: 700; }
  .mobile-menu a.sub { padding-left: 24px; font-size: 13px; color: var(--muted-2); }
  .mobile-menu .btn { margin-top: 8px; }
  .split, .split-wide, .hero-grid { grid-template-columns: 1fr; }
  .grid-2, .grid-3 { --grid-cols: 1; }
  .split, .split-wide { gap: 40px; }
  .hero-grid { gap: 36px; }
  .price-row { grid-template-columns: 1fr 1fr; }
  .logos { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 620px) {
  .container { width: min(calc(100% - 28px), var(--max)); }
  .section { padding: 76px 0; }
  .hero { padding: 60px 0 84px; }
  .actions .btn { width: 100%; }
  .price-row { grid-template-columns: 1fr; gap: 12px; }
  .cta-band { padding: 32px 22px; }
  .footer-inner { flex-direction: column; text-align: center; }
}

/* ---------- Rechtliche Seiten (Impressum, Datenschutz) ---------- */
/* Lange Fliesstexte: schmale Spalte, ruhige Hierarchie, kein Dekor. */
.legal-page { padding-top: calc(var(--header-h) + 48px); }
.legal-inner { max-width: 820px; }
.legal-title { margin-bottom: 40px; font-size: clamp(34px, 4.6vw, 54px); line-height: 1.05; }
.legal-section { margin-bottom: 40px; }
.legal-section h2 {
  margin-bottom: 12px;
  max-width: none;
  color: #fff;
  font-size: 22px;
  line-height: 1.3;
  letter-spacing: -.02em;
  font-weight: 800;
}
.legal-copy { color: var(--muted); line-height: 1.8; }
.legal-copy p { margin: 0 0 16px; }
.legal-copy p:last-child { margin-bottom: 0; }
.legal-copy ul { margin: 12px 0 16px; padding-left: 20px; }
.legal-copy li { margin-bottom: 6px; }
.legal-copy strong { color: var(--text); }
.legal-copy a { color: var(--cyan-2); }
.legal-copy a:hover { text-decoration: underline; }
.legal-date { color: var(--muted-2); font-size: 14px; }