/* Gemeinsames Stylesheet der generierten Seiten (build/build.js) */
:root {
  --bg:#080808;--card:#0f0f0f;--brd:#1a1a1a;--txt:#e8e8e8;--mut:#888;
  --accent:#ff5f1f;--gold:#C9A84C;--win:#22c55e;--lose:#444;
}
* { box-sizing:border-box; margin:0; padding:0; }
body {
  font-family:'Outfit',system-ui,-apple-system,sans-serif;
  background:var(--bg); color:var(--txt);
  line-height:1.6; -webkit-font-smoothing:antialiased;
}
a { color:var(--accent); text-decoration:none; }
a:hover { text-decoration:underline; }
.wrap { max-width:1100px; margin:0 auto; padding:0 1.25rem; }

/* Header */
header {
  border-bottom:1px solid var(--brd);
  padding:1rem 0; background:rgba(8,8,8,0.95);
  position:sticky; top:0; z-index:10; backdrop-filter:blur(8px);
}
.hd { display:flex; justify-content:space-between; align-items:center; }
.logo {
  font-family:'Syne',sans-serif; font-weight:800; font-size:1.4rem;
  color:#fff; text-decoration:none;
}
.logo span { color:var(--accent); }
nav a { color:var(--mut); margin-left:1.5rem; font-size:.9rem; }
nav a:hover { color:#fff; }

/* Breadcrumb */
.bc { padding:1rem 0; font-size:.85rem; color:var(--mut); }
.bc a { color:var(--mut); }
.bc a:hover { color:var(--accent); }

/* Hero */
.hero { padding:1rem 0 2.5rem; text-align:center; }
h1 {
  font-family:'Syne',sans-serif; font-weight:800;
  font-size:clamp(1.8rem,4.5vw,3rem); line-height:1.15;
  margin-bottom:1rem; color:#fff;
}
h1 .vs { color:var(--accent); }
.lede {
  max-width:720px; margin:0 auto; color:var(--mut);
  font-size:1.05rem;
}

/* Verdict Box */
.verdict {
  background:linear-gradient(135deg, #1a1a1a, #0f0f0f);
  border:1px solid var(--brd); border-left:4px solid var(--accent);
  border-radius:12px; padding:1.5rem 1.75rem; margin:2rem 0;
}
.verdict h2 {
  font-family:'Syne',sans-serif; font-size:1.2rem;
  margin-bottom:.6rem; color:var(--accent);
}
.verdict p { color:#ccc; font-size:1rem; }

/* Vergleichs-Tabelle */
.cmp {
  display:grid; grid-template-columns:1fr 1fr; gap:1rem;
  margin:2rem 0;
}
@media(max-width:640px) { .cmp { grid-template-columns:1fr; } }
.card {
  background:var(--card); border:1px solid var(--brd);
  border-radius:14px; padding:1.5rem; position:relative;
}
.card.winner { border-color:var(--win); box-shadow:0 0 0 1px var(--win); }
.card-badge {
  position:absolute; top:-10px; right:14px;
  background:var(--win); color:#fff; font-size:.7rem;
  font-weight:600; padding:3px 10px; border-radius:99px;
  letter-spacing:.5px;
}
.card-name {
  font-family:'Syne',sans-serif; font-size:1.5rem; font-weight:700;
  color:#fff;
}
.card-prov { color:var(--mut); font-size:.85rem; margin-bottom:1rem; }
.card-score {
  display:inline-block; background:var(--gold); color:#000;
  font-weight:700; font-size:.85rem; padding:3px 10px;
  border-radius:6px; margin-bottom:1rem;
}
.spec {
  display:flex; justify-content:space-between; padding:.55rem 0;
  border-bottom:1px solid var(--brd); font-size:.92rem;
}
.spec:last-child { border:0; }
.spec b { color:#fff; font-weight:500; }
.spec span { color:var(--mut); }
.cta {
  display:block; text-align:center; margin-top:1.25rem;
  padding:.75rem 1rem; background:var(--accent); color:#fff;
  font-weight:600; border-radius:8px; text-decoration:none;
  transition:background .2s;
}
.cta:hover { background:#ff7a3f; text-decoration:none; }
.cta-sec {
  background:transparent; color:var(--accent);
  border:1px solid var(--accent);
}
.cta-sec:hover { background:rgba(255,95,31,.1); }

/* Benchmark-Tabelle */
.bench { margin:2.5rem 0; }
.bench h2 {
  font-family:'Syne',sans-serif; font-size:1.4rem; margin-bottom:1rem;
  color:#fff;
}
.btab {
  background:var(--card); border:1px solid var(--brd);
  border-radius:12px; overflow:hidden;
}
.brow {
  display:grid; grid-template-columns:1.4fr 1fr 1fr;
  padding:.85rem 1.25rem; border-bottom:1px solid var(--brd);
  align-items:center;
}
.brow:last-child { border:0; }
.brow.head {
  background:#0a0a0a; font-weight:600; font-size:.85rem;
  color:var(--mut); text-transform:uppercase; letter-spacing:.5px;
}
.bcat { font-weight:500; }
.bcat small { display:block; color:var(--mut); font-size:.75rem; margin-top:2px; }
.bval {
  text-align:center; font-weight:600; font-family:monospace;
  font-size:1.05rem;
}
.bval.win { color:var(--win); }
.bval.lose { color:var(--mut); }

/* Pros/Cons */
.prcon {
  display:grid; grid-template-columns:1fr 1fr; gap:1rem;
  margin:2rem 0;
}
@media(max-width:640px) { .prcon { grid-template-columns:1fr; } }
.pclist {
  background:var(--card); border:1px solid var(--brd);
  border-radius:12px; padding:1.5rem;
}
.pclist h3 {
  font-family:'Syne',sans-serif; font-size:1.1rem; margin-bottom:1rem;
  color:#fff;
}
.pcitem {
  display:flex; gap:.6rem; padding:.4rem 0; font-size:.92rem;
  color:#ccc;
}
.pcitem::before {
  content:"✓"; color:var(--win); font-weight:bold; flex-shrink:0;
}
.pclist.cons .pcitem::before { content:"✗"; color:#ef4444; }

/* FAQ */
.faq { margin:2.5rem 0; }
.faq h2 {
  font-family:'Syne',sans-serif; font-size:1.4rem; margin-bottom:1rem;
  color:#fff;
}
.faqitem {
  background:var(--card); border:1px solid var(--brd);
  border-radius:10px; padding:1.25rem; margin-bottom:.75rem;
}
.faqitem h3 {
  font-size:1.05rem; color:#fff; margin-bottom:.5rem; font-weight:600;
}
.faqitem p { color:#bbb; font-size:.95rem; }

/* Related */
.rel { margin:2.5rem 0 3rem; }
.rel h2 {
  font-family:'Syne',sans-serif; font-size:1.4rem; margin-bottom:1rem;
  color:#fff;
}
.relgrid {
  display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr));
  gap:.75rem;
}
.relcard {
  background:var(--card); border:1px solid var(--brd);
  border-radius:10px; padding:1rem 1.25rem; transition:border .2s;
}
.relcard:hover { border-color:var(--accent); }
.relcard a {
  color:#fff; font-weight:500; font-size:.95rem;
  display:block; text-decoration:none;
}
.relcard small { color:var(--mut); font-size:.8rem; display:block; margin-top:3px; }

/* Footer */
footer {
  border-top:1px solid var(--brd); padding:2rem 0; margin-top:3rem;
  text-align:center; color:var(--mut); font-size:.85rem;
}
footer a { color:var(--mut); margin:0 .75rem; }

.note {
  background:rgba(255,95,31,0.05); border-left:3px solid var(--accent);
  padding:.85rem 1.15rem; border-radius:6px; margin:1.5rem 0;
  font-size:.88rem; color:#aaa;
}
.note b { color:#ccc; }

/* ===== Ergänzungen für generierte Seiten (Modellprofile, Verzeichnis, Rechtliches) ===== */
.hero h1, .mhero h1 { font-family:'Syne',sans-serif; }
.lede-left { margin:0 0 1.25rem; max-width:none; }
.mhero { display:flex; gap:1.1rem; align-items:center; padding:.5rem 0 1rem; }
.mhero h1 { text-align:left; margin:0 0 .2rem; font-size:clamp(1.7rem,4vw,2.6rem); }
.mprov { color:var(--mut); font-size:.95rem; }
.mbadge { display:inline-block; vertical-align:middle; font-family:'Outfit',sans-serif; font-size:.75rem; font-weight:600; padding:3px 10px; border-radius:99px; background:#1b1b1b; border:1px solid var(--brd); color:#fff; }
.mlogo { width:72px; height:72px; border-radius:16px; overflow:hidden; flex-shrink:0; display:flex; align-items:center; justify-content:center; font-family:'Syne',sans-serif; font-weight:800; font-size:30px; }
.mlogo img { width:100%; height:100%; object-fit:contain; background:#fff; padding:6px; }
.mlogo.sm { width:40px; height:40px; border-radius:10px; font-size:17px; }
.mlogo.sm img { padding:3px; }
.stats { display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:.75rem; margin:.5rem 0 1.25rem; }
.stat { background:var(--card); border:1px solid var(--brd); border-radius:12px; padding:.9rem 1rem; }
.stat b { display:block; font-family:'Syne',sans-serif; font-size:1.45rem; color:#fff; line-height:1.2; }
.stat b.sm { font-family:'Outfit',sans-serif; font-size:1rem; font-weight:600; }
.stat b small { font-size:.8rem; color:var(--mut); font-weight:500; }
.stat span { color:var(--mut); font-size:.8rem; }
.yes { color:var(--win) !important; } .no { color:#8a8a8a !important; }
.ctarow { display:flex; gap:.75rem; flex-wrap:wrap; margin:1rem 0 .25rem; }
.ctarow .cta { display:inline-block; margin:0; padding:.7rem 1.2rem; }
.aff { font-size:.8rem; color:var(--mut); margin:.35rem 0 0; }
.sec { margin:2rem 0; }
.sec h2 { font-family:'Syne',sans-serif; font-size:1.35rem; color:#fff; margin-bottom:.85rem; }
.kv { background:var(--card); border:1px solid var(--brd); border-radius:12px; padding:.2rem 1.25rem; }
.kv .spec span { text-align:right; max-width:65%; }
.facts { list-style:none; display:grid; gap:.5rem; }
.facts li { background:var(--card); border:1px solid var(--brd); border-radius:10px; padding:.65rem 1rem; color:#ddd; }
.bars { background:var(--card); border:1px solid var(--brd); border-radius:12px; padding:.6rem 1.25rem; }
.bar { display:grid; grid-template-columns:190px 1fr 40px; gap:.9rem; align-items:center; padding:.45rem 0; }
.bl { font-weight:500; font-size:.92rem; } .bl small { display:block; color:var(--mut); font-size:.72rem; }
.track { height:8px; background:#1d1d1d; border-radius:99px; overflow:hidden; }
.fill { height:100%; background:linear-gradient(90deg,var(--accent),#ffb08a); border-radius:99px; }
.val { font-family:monospace; text-align:right; color:#fff; font-weight:600; }
.cap { color:var(--mut); font-size:.8rem; margin-top:.5rem; }
@media(max-width:560px){ .bar { grid-template-columns:118px 1fr 34px; gap:.6rem; } }
.feat { display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); gap:.5rem; }
.feat div { background:var(--card); border:1px solid var(--brd); border-radius:10px; padding:.6rem .9rem; font-size:.92rem; }
.pcitem.none::before { content:"–"; color:var(--mut); }
.alts { display:grid; gap:.6rem; }
.alt { display:flex; gap:.9rem; align-items:center; background:var(--card); border:1px solid var(--brd); border-radius:12px; padding:.75rem 1rem; }
.alt .mlogo { width:44px; height:44px; border-radius:10px; font-size:18px; }
.alt .mlogo img { padding:3px; }
.ab { flex:1; min-width:0; }
.an { color:#fff; font-weight:600; }
.ar { color:var(--mut); font-size:.85rem; }
.avs { font-size:.82rem; }
.as { font-family:monospace; color:var(--gold); font-weight:700; font-size:1.1rem; }
.catnav { display:flex; flex-wrap:wrap; gap:.5rem; margin:0 0 1rem; justify-content:center; }
.catnav a { background:var(--card); border:1px solid var(--brd); border-radius:99px; padding:.35rem .85rem; color:#ddd; font-size:.88rem; }
.catnav a small { color:var(--mut); }
.catsec { margin:2rem 0; scroll-margin-top:80px; }
.catsec h2 { font-family:'Syne',sans-serif; font-size:1.35rem; color:#fff; margin-bottom:.8rem; }
.catsec h2 small { font-family:'Outfit',sans-serif; font-size:.85rem; color:var(--mut); font-weight:400; margin-left:.4rem; }
.grid-models { display:grid; grid-template-columns:repeat(auto-fill,minmax(270px,1fr)); gap:.6rem; }
.mcard { display:flex; gap:.75rem; align-items:center; background:var(--card); border:1px solid var(--brd); border-radius:12px; padding:.65rem .85rem; text-decoration:none !important; transition:border .2s; }
.mcard:hover { border-color:var(--accent); }
.mc-b { flex:1; min-width:0; display:flex; flex-direction:column; }
.mc-n { color:#fff; font-weight:600; font-size:.95rem; }
.mc-p { color:var(--mut); font-size:.8rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.mc-p em { color:var(--win); font-style:normal; }
.mc-s { font-family:monospace; color:var(--gold); font-weight:700; }
.foot-aff { font-size:.78rem; margin-top:.5rem; opacity:.85; }
.legal { max-width:780px; margin:1rem auto 2rem; }
.legal h1 { text-align:left; font-size:clamp(1.6rem,4vw,2.2rem); }
.legal h1 small { font-size:.55em; color:var(--mut); font-family:'Outfit',sans-serif; font-weight:400; }
.legal h2 { font-family:'Syne',sans-serif; font-size:1.1rem; color:#fff; margin:1.6rem 0 .5rem; }
.legal p, .legal li { color:#ccc; font-size:.95rem; margin-bottom:.6rem; }
.legal ul { padding-left:1.2rem; }
.legal code { background:#1a1a1a; padding:1px 5px; border-radius:4px; }
nav a { white-space:nowrap; }
@media(max-width:520px){ nav a { margin-left:.75rem; font-size:.84rem; } .logo { font-size:1.15rem; } .hd { gap:.5rem; } }
/* ===== "Alternatives to X" ===== */
.tablewrap { overflow-x:auto; -webkit-overflow-scrolling:touch; background:var(--card); border:1px solid var(--brd); border-radius:12px; }
.atab { width:100%; min-width:560px; border-collapse:collapse; font-size:.9rem; }
.atab th { text-align:left; background:#0a0a0a; color:var(--mut); font-size:.75rem; font-weight:600; text-transform:uppercase; letter-spacing:.5px; padding:.7rem .9rem; border-bottom:1px solid var(--brd); white-space:nowrap; }
.atab td { padding:.7rem .9rem; border-bottom:1px solid var(--brd); color:#ccc; vertical-align:top; }
.atab tr:last-child td { border-bottom:0; }
.atab td:first-child a { color:#fff; font-weight:600; }
.atab td:last-child { font-family:monospace; color:var(--gold); font-weight:700; }
.toollist { margin:2rem 0; }
.toollist h2 { font-family:'Syne',sans-serif; font-size:1.35rem; color:#fff; margin-bottom:.85rem; }
.altcard { position:relative; display:flex; gap:1rem; align-items:flex-start; background:var(--card); border:1px solid var(--brd); border-radius:12px; padding:1.1rem 1.25rem; margin-bottom:.75rem; }
.altcard .mlogo { width:52px; height:52px; border-radius:12px; font-size:22px; }
.altcard .mlogo img { padding:4px; }
.altcard h3 { font-size:1.1rem; color:#fff; margin-bottom:.2rem; padding-right:2.4rem; }
.altcard h3 .mbadge { margin-left:.35rem; font-size:.7rem; }
.altcard .card-prov { margin-bottom:.5rem; }
.altcard p { color:#ccc; font-size:.93rem; }
.altcard .ctarow { margin-top:.8rem; }
.altrank { position:absolute; top:.75rem; right:1rem; font-family:'Syne',sans-serif; font-weight:800; color:var(--gold); }
.verdict p a { text-decoration:underline; }
@media(max-width:520px){ .altcard { flex-direction:column; gap:.6rem; padding:1rem; } .altcard h3 .mbadge { display:table; margin:.35rem 0 0; } }