/* content.css — geteiltes Stylesheet für die /learn-Ressourcenseiten (Glossar/Definitionen).
   Erbt Marken-Tokens + Chrome aus index.html (self-hosted Fonts, Dark + Grün-Akzent), plus
   Artikel-/Prosa-Typografie. Answer-first, zitierbar. Stand 2026-07-03. */
:root{
  --bg:#0b0c0e; --bg-2:#101216; --bg-3:#15181d;
  --ink:#ECE9E1; --ink-dim:#9b988f; --ink-faint:#6a685f;
  --line:rgba(236,233,225,.10); --line-2:rgba(236,233,225,.18);
  --accent:#C6F24E; --accent-deep:#9ed11f; --accent-ink:#10160a;
  --ghost:rgba(236,233,225,.26);
  --maxw:1160px; --readw:748px;
  --font-display:"Fraunces",Georgia,serif;
  --font-body:"Hanken Grotesk",-apple-system,sans-serif;
  --font-mono:"JetBrains Mono",ui-monospace,monospace;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{background:var(--bg); color:var(--ink); font-family:var(--font-body); font-size:17px; line-height:1.6; -webkit-font-smoothing:antialiased; overflow-x:hidden}
body::before{content:""; position:fixed; inset:0; z-index:1; pointer-events:none; opacity:.035;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
.wrap{max-width:var(--maxw); margin:0 auto; padding:0 28px; position:relative; z-index:2}
a{color:inherit; text-decoration:none}
h1,h2,h3{font-family:var(--font-display); font-weight:500; line-height:1.08; letter-spacing:-.02em}
.mono{font-family:var(--font-mono)}
.accent{color:var(--accent)}
.dim{color:var(--ink-dim)}
.eyebrow{font-family:var(--font-mono); font-size:12px; letter-spacing:.22em; text-transform:uppercase; color:var(--accent-deep)}

/* buttons */
.btn{display:inline-flex; align-items:center; gap:9px; font-weight:500; font-size:15px; padding:13px 22px; border-radius:2px; border:1px solid var(--line-2); transition:.18s ease}
.btn-primary{background:var(--accent); color:var(--accent-ink); border-color:var(--accent)}
.btn-primary:hover{transform:translateY(-2px); box-shadow:0 10px 30px -12px rgba(198,242,78,.5)}
.btn-ghost:hover{background:var(--bg-3); border-color:var(--ink-dim)}
.btn .arr{transition:transform .2s ease}
.btn:hover .arr{transform:translateX(4px)}

/* nav */
header{position:sticky; top:0; z-index:30; backdrop-filter:blur(10px); background:rgba(11,12,14,.72); border-bottom:1px solid var(--line)}
.nav{display:flex; align-items:center; justify-content:space-between; height:66px}
.brand{font-family:var(--font-display); font-size:21px; font-weight:600; letter-spacing:-.02em; display:flex; align-items:center; gap:9px}
.brand .dot{width:9px; height:9px; background:var(--accent); border-radius:50%; box-shadow:0 0 14px var(--accent)}
.nav-links{display:flex; gap:30px; align-items:center; font-size:14.5px; color:var(--ink-dim)}
.nav-links a:hover{color:var(--ink)}
.nav-links a[aria-current="page"]{color:var(--ink)}
.nav-links .btn{padding:9px 16px; font-size:14px}
@media(max-width:760px){ .nav-links a:not(.btn){display:none} }

/* article */
.article{padding:52px 0 30px}
.breadcrumb{font-family:var(--font-mono); font-size:12.5px; letter-spacing:.04em; color:var(--ink-faint); margin-bottom:26px}
.breadcrumb a:hover{color:var(--accent-deep)}
.breadcrumb span{margin:0 8px; color:var(--line-2)}
.article h1{font-size:clamp(34px,5vw,54px); margin:14px 0 0; max-width:16em}
.article h1 em{font-style:italic; color:var(--accent)}

/* answer-first callout — die zitierbare Kern-Definition */
.answer-box{margin:30px 0 12px; padding:24px 26px; background:linear-gradient(180deg,rgba(198,242,78,.05),var(--bg-2)); border:1px solid var(--line-2); border-left:3px solid var(--accent); border-radius:8px}
.answer-box .lbl{font-family:var(--font-mono); font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--accent-deep); display:block; margin-bottom:10px}
.answer-box p{font-family:var(--font-display); font-size:clamp(19px,2.2vw,23px); line-height:1.42; color:var(--ink); letter-spacing:-.01em}

/* prose */
.prose{max-width:var(--readw); margin-top:34px}
.prose > *{max-width:var(--readw)}
.prose p{color:var(--ink-dim); margin:0 0 20px; font-size:17px; line-height:1.72}
.prose h2{font-size:clamp(24px,3.4vw,32px); margin:44px 0 14px; color:var(--ink)}
.prose h3{font-size:20px; margin:30px 0 10px; color:var(--ink)}
.prose strong{color:var(--ink); font-weight:600}
.prose a{color:var(--accent); border-bottom:1px solid rgba(198,242,78,.32); transition:.15s}
.prose a:hover{border-bottom-color:var(--accent)}
.prose ul,.prose ol{list-style:none; margin:0 0 22px; display:flex; flex-direction:column; gap:11px}
.prose li{position:relative; padding-left:26px; color:var(--ink-dim); font-size:16.5px; line-height:1.6}
.prose ul li::before{content:"→"; position:absolute; left:0; color:var(--accent-deep)}
.prose ol{counter-reset:c}
.prose ol li{counter-increment:c}
.prose ol li::before{content:counter(c); position:absolute; left:0; top:1px; width:20px; height:20px; border-radius:3px; background:rgba(198,242,78,.12); color:var(--accent); display:grid; place-items:center; font-size:11px; font-family:var(--font-mono); border:1px solid rgba(198,242,78,.3)}
.prose blockquote{margin:26px 0; padding:4px 0 4px 22px; border-left:2px solid var(--accent); font-family:var(--font-display); font-size:20px; line-height:1.4; color:var(--ink)}
.prose .src{font-family:var(--font-mono); font-size:12.5px; color:var(--ink-faint)}
.prose .src a{color:var(--ink-faint); border-bottom-color:var(--line-2)}

/* comparison table (GEO vs SEO) */
.tbl-wrap{overflow-x:auto; margin:24px 0 26px; border:1px solid var(--line); border-radius:8px}
table.cmp{width:100%; border-collapse:collapse; font-size:15px; min-width:520px}
table.cmp th,table.cmp td{text-align:left; padding:14px 18px; border-bottom:1px solid var(--line); vertical-align:top}
table.cmp thead th{font-family:var(--font-mono); font-size:11.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--accent-deep); background:var(--bg-2)}
table.cmp tbody th{font-weight:500; color:var(--ink); width:26%}
table.cmp td{color:var(--ink-dim)}
table.cmp tr:last-child th,table.cmp tr:last-child td{border-bottom:none}

/* faq */
.faq{border-top:1px solid var(--line); max-width:var(--readw); margin:52px 0 0}
.faq h2{font-family:var(--font-display); font-weight:500; font-size:26px; letter-spacing:-.01em; margin:34px 0 6px}
.qa{border-bottom:1px solid var(--line)}
.qa summary{cursor:pointer; list-style:none; padding:20px 2px; font-size:17.5px; color:var(--ink); display:flex; justify-content:space-between; align-items:center; gap:24px; font-family:var(--font-display); font-weight:500; letter-spacing:-.01em}
.qa summary::-webkit-details-marker{display:none}
.qa summary::after{content:"+"; color:var(--accent); font-family:var(--font-mono); font-size:23px; line-height:1; transition:transform .2s ease}
.qa[open] summary::after{transform:rotate(45deg)}
.qa p{color:var(--ink-dim); font-size:16px; padding:0 2px 22px; line-height:1.65}

/* related terms + hub grid */
.related{max-width:var(--readw); margin:52px 0 0}
.related .lbl{font-family:var(--font-mono); font-size:12px; letter-spacing:.18em; text-transform:uppercase; color:var(--accent-deep); margin-bottom:18px; display:flex; align-items:center; gap:14px}
.related .lbl::after{content:""; flex:1; height:1px; background:var(--line)}
.cards{display:grid; grid-template-columns:1fr 1fr; gap:1px; background:var(--line); border:1px solid var(--line); border-radius:8px; overflow:hidden}
@media(max-width:620px){ .cards{grid-template-columns:1fr} }
.card{background:var(--bg); padding:22px 22px; transition:background .18s; display:block}
.card:hover{background:var(--bg-2)}
.card .k{font-family:var(--font-mono); font-size:11.5px; color:var(--accent-deep); letter-spacing:.08em}
.card h3{font-size:18px; margin:9px 0 7px; color:var(--ink)}
.card p{font-size:14.5px; color:var(--ink-dim); line-height:1.5}
.card .go{font-family:var(--font-mono); font-size:12.5px; color:var(--accent); margin-top:12px; display:inline-block}

/* hub hero */
.hub-hero{padding:56px 0 8px; max-width:34em}
.hub-hero h1{font-size:clamp(36px,5.5vw,58px); margin:16px 0 0}
.hub-hero p{color:var(--ink-dim); font-size:19px; margin-top:20px; line-height:1.6}
.hub-cards{margin:44px 0 0}
.hub-cards .cards{grid-template-columns:1fr 1fr}
@media(max-width:620px){ .hub-cards .cards{grid-template-columns:1fr} }

/* soft CTA band */
.cta-band{max-width:var(--readw); margin:56px 0 0; padding:34px 30px; text-align:center; background:linear-gradient(180deg,var(--bg-2),var(--bg)); border:1px solid var(--line-2); border-radius:12px}
.cta-band h2{font-family:var(--font-display); font-weight:500; font-size:clamp(24px,3.4vw,32px); letter-spacing:-.01em}
.cta-band p{color:var(--ink-dim); font-size:16.5px; margin:12px auto 22px; max-width:32em}
.cta-band .row{display:flex; gap:12px; justify-content:center; flex-wrap:wrap}

/* research stats */
.statrow{display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--line); border:1px solid var(--line); border-radius:8px; overflow:hidden; max-width:var(--readw); margin:32px 0 8px}
@media(max-width:620px){ .statrow{grid-template-columns:1fr 1fr} }
.stat{background:var(--bg); padding:22px 18px}
.stat .big{font-family:var(--font-display); font-size:clamp(30px,5vw,46px); letter-spacing:-.02em; line-height:1; color:var(--accent)}
.stat .lbl2{font-size:13px; color:var(--ink-dim); margin-top:9px; line-height:1.35}
.leader{max-width:var(--readw); margin:16px 0 0; display:flex; flex-direction:column; gap:8px}
.leader .lrow{display:grid; grid-template-columns:1fr auto; gap:12px; align-items:center}
.leader .bar{position:relative; height:32px; background:var(--bg-2); border:1px solid var(--line); border-radius:4px; overflow:hidden; display:flex; align-items:center}
.leader .bar>i{position:absolute; left:0; top:0; bottom:0; background:linear-gradient(90deg,rgba(198,242,78,.22),rgba(198,242,78,.05)); border-right:2px solid var(--accent-deep)}
.leader .bar b{position:relative; z-index:2; font-weight:500; font-size:14px; color:var(--ink); padding-left:13px}
.leader .cnt{font-family:var(--font-mono); font-size:13px; color:var(--accent); white-space:nowrap}
.method{max-width:var(--readw); margin:30px 0 0; padding:22px 24px; background:var(--bg-2); border:1px solid var(--line); border-radius:8px}
.method h3{font-family:var(--font-mono); font-size:12px; letter-spacing:.16em; text-transform:uppercase; color:var(--accent-deep); margin-bottom:12px}
.method p{font-size:14.5px; color:var(--ink-dim); line-height:1.6; margin:0 0 10px}
.method p:last-child{margin-bottom:0}

/* footer */
footer{border-top:1px solid var(--line); padding:40px 0; color:var(--ink-faint); font-size:13.5px; margin-top:64px}
.foot{display:flex; justify-content:space-between; gap:20px; flex-wrap:wrap; align-items:center}
.foot a:hover{color:var(--ink-dim)}
.foot .mono{font-size:12.5px}

@media(prefers-reduced-motion:reduce){ html{scroll-behavior:auto} }