/* ============================================================
   AlphaBridge MCP — alphabridge-mcp.com
   Helles Swiss-Design · Stand 2026-07
   Akzent: AlphaBridge-Blau (#2F63E8 / #1E4FD6)
   ============================================================ */

:root{
  --ink:        #16181B;
  --ink-soft:   #4B4F55;
  --ink-faint:  #8A8F96;
  --paper:      #FFFFFF;
  --paper-cool: #F7F8FB;   /* abgesetzte Flächen, kühler Hauch */
  --line:       #E6E8EE;
  --acc:        #2F63E8;   /* Marke, dekorativ / grosse Typo */
  --acc-deep:   #1E4FD6;   /* Links, Buttons */
  --acc-dark:   #163CA8;   /* Hover */
  --acc-tint:   #EBF0FE;   /* zarte Akzentfläche */
  --ok:         #1F9D61;

  --sans: "Helvetica Neue", Helvetica, Arial, "Segoe UI", system-ui, sans-serif;
  --serif: "Palatino Linotype", Palatino, "Book Antiqua", "URW Palladio L", Georgia, serif;
  --mono: ui-monospace, "SF Mono", "Cascadia Code", Menlo, Consolas, monospace;

  --wrap: 1160px;
  --pad: 24px;
  --label-col: 210px;
}

*{ box-sizing:border-box; margin:0; padding:0 }
html{ scroll-behavior:smooth }
body{
  font-family:var(--sans); font-size:16px; line-height:1.6;
  color:var(--ink); background:var(--paper);
  -webkit-font-smoothing:antialiased;
}
::selection{ background:var(--acc); color:#fff }
img{ max-width:100%; display:block }
a{ color:var(--acc-deep); text-decoration:none }
a:hover{ color:var(--acc-dark) }
.wrap{ max-width:var(--wrap); margin:0 auto; padding:0 var(--pad) }
.skip{ position:absolute; left:-9999px; top:0; background:var(--ink); color:#fff; padding:10px 16px; z-index:99 }
.skip:focus{ left:0 }

/* ---------------- Header ---------------- */
header{
  position:sticky; top:0; z-index:50;
  background:rgba(255,255,255,.94); backdrop-filter:blur(8px);
  border-bottom:1px solid var(--line);
}
.nav{ display:flex; align-items:center; gap:28px; height:68px }
.brand{ display:flex; align-items:center; gap:11px; color:var(--ink); font-weight:700; letter-spacing:-.01em; font-size:17px }
.brand img{ width:30px; height:30px; border-radius:7px }
.brand small{ display:block; font-weight:400; font-size:10.5px; letter-spacing:.11em; text-transform:uppercase; color:var(--ink-faint) }
.nav-links{ display:flex; gap:22px; margin-left:auto; align-items:center }
.nav-links a{ color:var(--ink-soft); font-size:14.5px; font-weight:500 }
.nav-links a:hover{ color:var(--ink) }
.nav-cta{ border:1px solid var(--ink); color:var(--ink)!important; padding:9px 18px; font-weight:600 }
.nav-cta:hover{ background:var(--ink); color:#fff!important }
.lang-btn{ background:none; border:1px solid var(--line); padding:7px 12px; font:inherit; font-size:13px; font-weight:600; cursor:pointer; color:var(--ink-soft) }
.lang-btn:hover{ border-color:var(--ink); color:var(--ink) }
.menu-btn{ display:none; margin-left:auto; background:none; border:1px solid var(--line); padding:8px 12px; font:inherit; cursor:pointer }

/* ---------------- Typo-Bausteine ---------------- */
.label{ font-size:11px; font-weight:600; letter-spacing:.16em; text-transform:uppercase; color:var(--acc-deep) }
h1{ font-size:clamp(40px,6vw,74px); line-height:1.02; letter-spacing:-.03em; font-weight:700 }
h2{ font-size:clamp(26px,3.4vw,40px); line-height:1.12; letter-spacing:-.02em; font-weight:700 }
h3{ font-size:19px; letter-spacing:-.01em }
.lead{ font-family:var(--serif); font-size:clamp(18px,2vw,21px); line-height:1.6; color:var(--ink-soft); max-width:58ch }
.small{ font-size:13.5px; color:var(--ink-faint) }
.mono{ font-family:var(--mono); font-size:12.5px }

section{ padding:84px 0 }
.section-head{ margin-bottom:44px; display:grid; grid-template-columns:var(--label-col) 1fr; gap:24px; align-items:baseline }
.section-head h2{ max-width:24ch }
.section-head .sub{ color:var(--ink-soft); margin-top:10px; max-width:60ch }
.section-grid{ display:grid; grid-template-columns:var(--label-col) 1fr; gap:24px }
.section-grid > *, .section-head > *{ min-width:0 } /* Grid-Items dürfen unter Inhaltsbreite schrumpfen — verhindert, dass <pre>/lange URLs die Seite auf Mobile sprengen */

/* ---------------- Hero ---------------- */
.hero{ padding:104px 0 84px }
.hero .label{ margin-bottom:22px; display:block }
.hero h1{ max-width:16ch; margin-bottom:26px }
.hero h1 em{ font-style:normal; color:var(--acc) }
.hero .lead{ margin-bottom:36px }
.hero-actions{ display:flex; gap:14px; flex-wrap:wrap; align-items:center }
.hero .micro{ margin-top:16px; font-size:13px; color:var(--ink-faint) }

.btn{ display:inline-block; padding:14px 26px; font-weight:600; font-size:15px; border:1px solid transparent; cursor:pointer; text-align:center }
.btn-primary{ background:var(--acc-deep); color:#fff }
.btn-primary:hover{ background:var(--acc-dark); color:#fff }
.btn-ghost{ border-color:var(--ink); color:var(--ink) }
.btn-ghost:hover{ background:var(--ink); color:#fff }

/* Fakten */
.facts{ border-top:1px solid var(--line); border-bottom:1px solid var(--line); background:var(--paper-cool) }
.facts .wrap{ display:grid; grid-template-columns:repeat(4,1fr) }
.fact{ padding:26px 20px 26px 0 }
.fact + .fact{ border-left:1px solid var(--line); padding-left:24px }
.fact b{ display:block; font-size:24px; letter-spacing:-.02em }
.fact span{ font-size:13px; color:var(--ink-faint) }

/* ---------------- Chat-Demo ---------------- */
.chat{ border:1px solid var(--line); background:var(--paper); max-width:760px }
.chat-head{ display:flex; align-items:center; gap:10px; padding:14px 18px; border-bottom:1px solid var(--line); font-size:13px; color:var(--ink-soft) }
.chat-head .dot{ width:8px; height:8px; border-radius:50%; background:var(--ok); flex:none }
.chat-head b{ color:var(--ink) }
.chat-body{ padding:22px 18px; display:flex; flex-direction:column; gap:14px }
.msg{ max-width:78%; padding:11px 15px; font-size:14.5px; line-height:1.5 }
.msg.user{ align-self:flex-end; background:var(--acc-tint); color:var(--ink) }
.msg.ai{ align-self:flex-start; background:var(--paper-cool); border:1px solid var(--line) }
.msg .tool{ display:block; font-family:var(--mono); font-size:11px; color:var(--acc-deep); margin-bottom:6px }
.msg .okmark{ color:var(--ok); font-weight:700 }

/* ---------------- Karten ---------------- */
.cards{ display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--line); border:1px solid var(--line) }
.card{ background:var(--paper); padding:30px 26px; position:relative }
.card .num{ font-family:var(--mono); font-size:12px; color:var(--acc-deep); display:block; margin-bottom:14px }
.card h3{ margin-bottom:9px; font-size:17px }
.card p{ color:var(--ink-soft); font-size:14.5px }
.badge{ display:inline-block; vertical-align:2px; margin-left:8px; font-size:10px; font-weight:700; letter-spacing:.08em; padding:2px 7px; border:1px solid var(--line); color:var(--ink-soft); background:var(--paper-cool) }
.badge.agency{ color:var(--acc-deep); border-color:var(--acc-deep); background:var(--acc-tint) }

/* ---------------- Vergleich ---------------- */
.compare{ width:100%; border-collapse:collapse; font-size:14.5px }
.compare th, .compare td{ padding:12px 14px; border-bottom:1px solid var(--line); text-align:left }
.compare thead th{ font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-faint); font-weight:600 }
.compare td:nth-child(2){ font-weight:700 }
.compare .yes{ color:var(--ok); font-weight:700 }
.compare .no{ color:var(--ink-faint) }

/* ---------------- Steps ---------------- */
.steps{ counter-reset:step; display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--line); border:1px solid var(--line) }
.step{ background:var(--paper); padding:28px 24px }
.step::before{ counter-increment:step; content:counter(step,decimal-leading-zero); font-family:var(--mono); font-size:12px; color:var(--acc-deep); display:block; margin-bottom:14px }
.step h3{ font-size:16px; margin-bottom:8px }
.step p{ font-size:14px; color:var(--ink-soft) }
.step code{ font-family:var(--mono); font-size:11.5px; background:var(--paper-cool); padding:2px 5px; word-break:break-all }

/* ---------------- Security ---------------- */
.sec-list{ list-style:none; display:grid; grid-template-columns:1fr 1fr; gap:0 40px }
.sec-list li{ padding:13px 0; border-top:1px solid var(--line); font-size:15px; color:var(--ink-soft) }
.sec-list li::before{ content:"—"; color:var(--acc); margin-right:12px }
.sec-list b{ color:var(--ink) }

/* ---------------- Setup ---------------- */
.setup{ background:var(--paper-cool); border-top:1px solid var(--line); border-bottom:1px solid var(--line) }
.setup-box{ background:var(--paper); border:1px solid var(--line); padding:24px; margin-bottom:16px }
.setup-box h3{ font-size:15px; margin-bottom:10px }
.setup-box .rec{ font-size:10px; font-weight:700; letter-spacing:.08em; color:var(--acc-deep); border:1px solid var(--acc-deep); padding:2px 7px; margin-left:8px; vertical-align:2px; background:var(--acc-tint) }
pre{ max-width:100%; font-family:var(--mono); font-size:12.5px; line-height:1.55; background:var(--ink); color:#E8ECF4; padding:16px 18px; overflow-x:auto }
.endpoint{ font-family:var(--mono); font-size:13.5px; background:var(--paper); border:1px solid var(--line); padding:12px 16px; word-break:break-all }

/* ---------------- Pricing ---------------- */
.pricing-toggle{ display:flex; justify-content:center; margin-bottom:38px }
.pricing-toggle button{ border:1px solid var(--line); background:var(--paper); color:var(--ink-soft); font-weight:600; padding:10px 22px; cursor:pointer; font-size:14px }
.pricing-toggle button.on{ background:var(--acc-deep); border-color:var(--acc-deep); color:#fff }
.pricing-toggle .save{ font-size:11px; opacity:.85; font-weight:400 }
body.billing-m .only-y{ display:none }
body.billing-y .only-m{ display:none }

.plans{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px; align-items:stretch }
.plan{ border:1px solid var(--line); padding:32px 28px; display:flex; flex-direction:column; background:var(--paper) }
.plan.hot{ border-color:var(--acc-deep); box-shadow:0 0 0 1px var(--acc-deep) }
.plan .flag{ font-size:10.5px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--acc-deep); margin-bottom:12px; min-height:14px }
.plan h3{ font-size:21px; margin-bottom:6px }
.price{ font-size:44px; font-weight:700; letter-spacing:-.03em; margin:10px 0 2px }
.price small{ font-size:15px; font-weight:400; color:var(--ink-faint); letter-spacing:0 }
.per{ font-size:13px; color:var(--ink-faint); min-height:20px; margin-bottom:18px }
.plan ul{ list-style:none; margin:0 0 26px; flex:1 }
.plan li{ padding:9px 0; border-top:1px solid var(--line); font-size:14.5px; color:var(--ink-soft) }
.plan li::before{ content:"✓"; color:var(--ok); font-weight:700; margin-right:10px }
.plan .btn{ width:100% }
.plan .micro{ text-align:center; margin-top:10px; font-size:12.5px; color:var(--ink-faint) }
.pricing-note{ text-align:center; margin-top:30px; font-size:13px; color:var(--ink-faint); max-width:64ch; margin-left:auto; margin-right:auto }

/* ---------------- FAQ ---------------- */
.faq details{ border-top:1px solid var(--line) }
.faq details:last-child{ border-bottom:1px solid var(--line) }
.faq summary{ cursor:pointer; padding:20px 0; font-weight:600; font-size:16.5px; list-style:none; display:flex; justify-content:space-between; gap:18px }
.faq summary::after{ content:"+"; color:var(--acc-deep); font-size:22px; font-weight:400; line-height:1 }
.faq details[open] summary::after{ content:"–" }
.faq .a{ padding:0 0 22px; color:var(--ink-soft); max-width:70ch }

/* ---------------- CTA-Band ---------------- */
.cta-band{ background:var(--ink); color:#fff; padding:78px 0 }
.cta-band h2{ color:#fff; max-width:22ch; margin-bottom:14px }
.cta-band p{ color:#B9BDC3; max-width:54ch; margin-bottom:30px; font-family:var(--serif); font-size:18px }
.cta-band .btn-primary{ background:var(--acc); color:#fff }
.cta-band .btn-primary:hover{ background:#4E7BF0 }
.cta-band a.sub{ color:#fff; font-weight:600; margin-left:18px }

/* ---------------- Footer ---------------- */
footer{ border-top:1px solid var(--line); background:var(--paper-cool); padding:56px 0 40px }
.foot{ display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:36px }
.foot .brand{ margin-bottom:14px }
.foot p{ font-size:13.5px; color:var(--ink-soft); max-width:32ch }
.foot h4{ font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-faint); margin-bottom:14px; font-weight:600 }
.foot ul{ list-style:none }
.foot li{ margin-bottom:9px }
.foot a{ color:var(--ink-soft); font-size:14px }
.foot a:hover{ color:var(--ink) }
.foot-base{ margin-top:44px; padding-top:20px; border-top:1px solid var(--line); display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap; font-size:12.5px; color:var(--ink-faint) }
.foot-base a{ color:var(--ink-faint) }
.foot-base a:hover{ color:var(--ink) }

/* ---------------- Unterseiten (Recht) ---------------- */
.page-head{ padding:90px 0 56px; border-bottom:1px solid var(--line) }
.page-head .label{ display:block; margin-bottom:18px }
.page-head h1{ font-size:clamp(34px,4.6vw,56px); max-width:20ch; margin-bottom:18px }
.prose{ max-width:70ch }
.prose p{ margin-bottom:16px; color:var(--ink-soft) }
.prose h2{ font-size:22px; margin:40px 0 12px }
.prose ul{ margin:0 0 16px 20px; color:var(--ink-soft) }

/* ---------------- Responsive ---------------- */
@media (max-width:960px){
  .section-head, .section-grid{ grid-template-columns:1fr }
  .cards{ grid-template-columns:1fr 1fr }
  .facts .wrap{ grid-template-columns:1fr 1fr }
  .fact + .fact{ border-left:0; padding-left:0 }
  .fact:nth-child(even){ border-left:1px solid var(--line); padding-left:20px }
  .steps{ grid-template-columns:1fr 1fr }
  .plans{ grid-template-columns:1fr; max-width:480px; margin:0 auto }
  .sec-list{ grid-template-columns:1fr }
  .foot{ grid-template-columns:1fr 1fr }
}
@media (max-width:760px){
  .nav-links{
    display:none; position:absolute; top:68px; left:0; right:0;
    background:var(--paper); border-bottom:1px solid var(--line);
    flex-direction:column; padding:18px var(--pad) 24px; gap:16px; align-items:flex-start;
  }
  .nav-links.open{ display:flex }
  .menu-btn{ display:block }
  section{ padding:60px 0 }
  .hero{ padding:66px 0 56px }
  .steps, .cards{ grid-template-columns:1fr }
  .compare-scroll{ overflow-x:auto; -webkit-overflow-scrolling:touch }
  .foot{ grid-template-columns:1fr }
  /* Code-Snippet auf dem Handy umbrechen statt abschneiden/scrollen — alles sichtbar */
  pre{ white-space:pre-wrap; word-break:break-word; font-size:12px; padding:14px }
}
@media (prefers-reduced-motion:reduce){ html{ scroll-behavior:auto } }
@media print{ header, .cta-band, .menu-btn{ display:none } }