/* node64.de – Node64-Look: Orange als Markenfarbe, dunkel als Standard, Open Sans. */

@font-face {
	font-family: "Open Sans";
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url("../fonts/open-sans-v34-latin-regular.woff2") format("woff2");
}

:root, [data-bs-theme="light"] {
	--n64-orange: #f59c1a;
	--n64-orange-600: #e08a0b;
	--n64-orange-soft: rgba(245, 156, 26, .12);
	--n64-ink: #272828;
	--n64-surface: #ffffff;
	--n64-surface-2: #f6f7f9;
	--n64-line: #e3e6ea;
	--n64-code-bg: #1b1f24;
	--n64-code-fg: #e6e8eb;
	--bs-body-font-family: "Open Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
	--bs-link-color: #c46f00;
	--bs-link-color-rgb: 196, 111, 0;
	--bs-link-hover-color: #9c5800;
	--bs-link-hover-color-rgb: 156, 88, 0;
	--bs-body-bg: #ffffff;
}
[data-bs-theme="dark"] {
	--bs-body-bg: #121417;
	--bs-body-color: #dfe3e8;
	--bs-tertiary-bg: #1b1f24;
	--bs-secondary-bg: #23282e;
	--bs-border-color: #2f353c;
	--bs-link-color: #f7ae45;
	--bs-link-color-rgb: 247, 174, 69;
	--bs-link-hover-color: #ffc777;
	--bs-link-hover-color-rgb: 255, 199, 119;
	--n64-surface: #171a1e;
	--n64-surface-2: #1b1f24;
	--n64-line: #2a3037;
	--n64-code-bg: #0d0f12;
}

body { -webkit-font-smoothing: antialiased; }
h1, h2, h3, h4, .fw-bold, strong, b { font-weight: 700; letter-spacing: -.01em; }
.display-hero { font-size: clamp(2.2rem, 5vw, 3.8rem); line-height: 1.08; font-weight: 700; letter-spacing: -.025em; }
.text-orange { color: var(--n64-orange) !important; }
.bg-orange-soft { background: var(--n64-orange-soft); }
.skip { position: absolute; left: 1rem; top: .5rem; z-index: 2000; background: var(--n64-orange); color: #111; padding: .4rem .8rem; border-radius: .4rem; }

/* Logos je Farbschema */
.logo-dark { display: none; }
[data-bs-theme="dark"] .logo-light { display: none; }
[data-bs-theme="dark"] .logo-dark { display: inline; }
.theme-icon-light { display: none; }
[data-bs-theme="dark"] .theme-icon-dark { display: none; }
[data-bs-theme="dark"] .theme-icon-light { display: inline; }

/* Buttons */
.btn-orange { --bs-btn-color: #16181b; --bs-btn-bg: var(--n64-orange); --bs-btn-border-color: var(--n64-orange); --bs-btn-hover-color: #16181b; --bs-btn-hover-bg: #ffad33; --bs-btn-hover-border-color: #ffad33; --bs-btn-active-bg: var(--n64-orange-600); --bs-btn-active-color: #16181b; font-weight: 700; }
.btn-ghost { --bs-btn-color: var(--bs-body-color); --bs-btn-border-color: var(--bs-border-color); --bs-btn-hover-bg: var(--bs-secondary-bg); --bs-btn-hover-border-color: var(--bs-border-color); --bs-btn-hover-color: var(--bs-body-color); }

/* Navigation */
.site-nav { background: color-mix(in srgb, var(--bs-body-bg) 88%, transparent); backdrop-filter: saturate(160%) blur(10px); border-bottom: 1px solid var(--n64-line); }
.site-nav .nav-link { font-weight: 600; color: var(--bs-body-color); opacity: .82; }
.site-nav .nav-link:hover, .site-nav .nav-link.active { opacity: 1; color: var(--bs-body-color); }
.site-nav .nav-link.active { box-shadow: inset 0 -2px 0 var(--n64-orange); }
.site-nav .btn-link { color: var(--bs-body-color); text-decoration: none; opacity: .8; }
.site-nav .btn-link:hover { opacity: 1; }
.site-nav .dropdown-item .bi { color: var(--n64-orange); width: 1.4rem; display: inline-block; }
.navbar-toggler { border: 0; font-size: 1.6rem; color: var(--bs-body-color); }

/* Hero */
.hero { position: relative; overflow: hidden; padding: 5.5rem 0 4rem; }
.hero::before { content: ""; position: absolute; inset: -30% -10% auto auto; width: 70vw; height: 70vw; max-width: 900px; max-height: 900px; background: radial-gradient(closest-side, rgba(245, 156, 26, .22), transparent 70%); pointer-events: none; }
.hero .lead { font-size: 1.2rem; opacity: .9; max-width: 40rem; }
.eyebrow { display: inline-flex; align-items: center; gap: .45rem; font-size: .8rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--n64-orange); background: var(--n64-orange-soft); border: 1px solid rgba(245, 156, 26, .35); border-radius: 2rem; padding: .3rem .8rem; }
.hero-badges { display: flex; flex-wrap: wrap; gap: .5rem 1.2rem; font-size: .9rem; opacity: .85; }
.hero-badges .bi { color: var(--n64-orange); }
.product-logo { height: 46px; width: auto; }

/* Abschnitte */
.section { padding: 4.5rem 0; }
.section-alt { background: var(--n64-surface-2); border-top: 1px solid var(--n64-line); border-bottom: 1px solid var(--n64-line); }
.section-title { font-size: clamp(1.6rem, 3vw, 2.3rem); font-weight: 700; letter-spacing: -.02em; }
.section-sub { opacity: .8; max-width: 46rem; }

/* Karten */
.n64-card { background: var(--n64-surface); border: 1px solid var(--n64-line); border-radius: 1rem; padding: 1.5rem; height: 100%; transition: transform .15s ease, border-color .15s ease; }
a.n64-card { color: inherit; text-decoration: none; display: block; }
a.n64-card:hover { transform: translateY(-3px); border-color: rgba(245, 156, 26, .6); }
.n64-card .ico { width: 2.8rem; height: 2.8rem; border-radius: .75rem; display: inline-flex; align-items: center; justify-content: center; background: var(--n64-orange-soft); color: var(--n64-orange); font-size: 1.35rem; margin-bottom: 1rem; }
.n64-card h3 { font-size: 1.15rem; margin-bottom: .5rem; }
.n64-card p { opacity: .82; margin-bottom: 0; }
.n64-card .more { font-weight: 700; color: var(--n64-orange); display: inline-block; margin-top: .9rem; }
.feature-list { list-style: none; padding: 0; margin: 0; }
.feature-list li { padding: .35rem 0 .35rem 1.8rem; position: relative; }
.feature-list li::before { content: "\F26E"; font-family: "bootstrap-icons"; position: absolute; left: 0; top: .3rem; color: var(--n64-orange); }

/* Kennzahlen */
.stat { text-align: center; }
.stat .num { font-size: 2.2rem; font-weight: 700; color: var(--n64-orange); line-height: 1; }
.stat .lbl { font-size: .9rem; opacity: .75; margin-top: .4rem; }

/* Vergleichstabelle */
.compare { --bs-table-bg: transparent; border-collapse: separate; border-spacing: 0; border: 1px solid var(--n64-line); border-radius: 1rem; overflow: hidden; background: var(--n64-surface); margin-bottom: 0; min-width: 620px; }
.compare th, .compare td { vertical-align: middle; text-align: left; padding: .85rem 1.1rem; border-bottom: 1px solid var(--n64-line); }
.compare tbody tr:last-child td { border-bottom: 0; }
.compare thead th { font-size: .74rem; font-weight: 700; text-transform: uppercase; letter-spacing: .07em; opacity: 1; color: var(--bs-secondary-color); background: var(--n64-surface-2); }
.compare td:first-child { font-weight: 600; width: 40%; color: var(--bs-body-color); }
.compare td:not(:first-child) { color: var(--bs-secondary-color); font-size: .93rem; }
.compare .n64col { background: var(--n64-orange-soft) !important; color: var(--bs-body-color) !important; font-weight: 600; border-left: 1px solid rgba(245, 156, 26, .35); border-right: 1px solid rgba(245, 156, 26, .35); }
.compare thead th.n64col { color: var(--n64-orange) !important; box-shadow: inset 0 3px 0 var(--n64-orange); font-weight: 800; }
.compare tbody tr { transition: background-color .12s ease; }
.compare tbody tr:hover td { background: var(--bs-tertiary-bg); }
.compare tbody tr:hover td.n64col { background: rgba(245, 156, 26, .2) !important; }
.compare td .bi { margin-right: .45rem; font-size: 1.05rem; vertical-align: -.14em; }
.compare .yes { color: #2fb344; }
.compare .no { color: #d63939; opacity: .85; }
.compare .part { color: var(--n64-orange); }
.table-responsive:has(> .compare) { border-radius: 1rem; }

/* Screenshots */
.shot { border-radius: .9rem; border: 1px solid var(--n64-line); box-shadow: 0 30px 60px -25px rgba(0, 0, 0, .55); overflow: hidden; background: var(--n64-surface-2); }
.shot img { display: block; width: 100%; height: auto; }
.shot-bar { display: flex; gap: .35rem; padding: .55rem .8rem; border-bottom: 1px solid var(--n64-line); background: var(--n64-surface); }
.shot-bar span { width: .65rem; height: .65rem; border-radius: 50%; background: var(--n64-line); }
figure figcaption { font-size: .85rem; opacity: .7; margin-top: .6rem; text-align: center; }

/* Code */
pre, .ascii { background: var(--n64-code-bg); color: var(--n64-code-fg); border-radius: .7rem; padding: 1rem 1.1rem; font-size: .86rem; line-height: 1.55; border: 1px solid var(--n64-line); position: relative; overflow-x: auto; }
pre code { color: inherit; font-size: inherit; }
/* Zeilenhoehe 1.15: Rahmenzeichen stossen ohne Luecke aneinander (Consolas, Menlo) */
.ascii { font-family: var(--bs-font-monospace); white-space: pre; line-height: 1.15; font-size: .8rem; font-variant-ligatures: none; }
.ascii .o, pre .o { color: var(--n64-orange); }
.ascii .g, pre .c { color: #8b949e; }
.ascii .ok { color: #3fb950; }
.ascii .tls { color: #79c0ff; }
code { color: #e08a0b; }
[data-bs-theme="dark"] code { color: #ffb44f; }
.code-wrap { position: relative; }
.code-label { position: absolute; top: 0; left: 1rem; transform: translateY(-50%); font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; background: var(--n64-orange); color: #16181b; padding: .1rem .5rem; border-radius: .3rem; z-index: 1; }
.copy-btn { position: absolute; top: .5rem; right: .5rem; z-index: 2; border: 1px solid rgba(255, 255, 255, .15); background: rgba(255, 255, 255, .06); color: #e6e8eb; font-size: .78rem; padding: .2rem .55rem; border-radius: .4rem; opacity: .75; }
.copy-btn:hover, .copy-btn:focus { opacity: 1; background: rgba(245, 156, 26, .25); }
.copy-btn.done { background: #2fb344; border-color: #2fb344; opacity: 1; }

/* Hinweise */
.callout { border-left: 4px solid var(--n64-orange); background: var(--n64-orange-soft); border-radius: .5rem; padding: .9rem 1.1rem; margin: 1.3rem 0; }
.callout.info { border-color: #3b82f6; background: rgba(59, 130, 246, .1); }
.callout.warn { border-color: #d63939; background: rgba(214, 57, 57, .1); }
.callout.ok { border-color: #2fb344; background: rgba(47, 179, 68, .1); }
.callout > :last-child { margin-bottom: 0; }
.callout-title { font-weight: 700; margin-bottom: .3rem; }

/* Schritte */
.steps { counter-reset: step; list-style: none; padding: 0; }
.steps > li { position: relative; padding-left: 3rem; margin-bottom: 1.6rem; }
.steps > li::before { counter-increment: step; content: counter(step); position: absolute; left: 0; top: -.1rem; width: 2rem; height: 2rem; border-radius: 50%; background: var(--n64-orange); color: #16181b; font-weight: 700; display: flex; align-items: center; justify-content: center; }

/* Doku */
.docs-wrap { padding-top: 2rem; padding-bottom: 3rem; }
.docs-side { position: relative; }
.docs-nav { position: sticky; top: 5rem; max-height: calc(100vh - 6rem); overflow-y: auto; scrollbar-width: thin; padding-right: .5rem; }
.docs-group { margin-bottom: 1.2rem; }
.docs-group-title { font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; opacity: .6; margin-bottom: .35rem; }
.docs-link { display: block; padding: .3rem .7rem; border-radius: .4rem; color: var(--bs-body-color); text-decoration: none; font-size: .92rem; border-left: 2px solid transparent; }
.docs-link .bi { opacity: .7; }
.docs-link:hover { background: var(--bs-secondary-bg); color: var(--bs-body-color); }
.docs-link.active { background: var(--n64-orange-soft); border-left-color: var(--n64-orange); font-weight: 700; }
.docs-body { min-width: 0; }
.docs-body h1 { font-size: 2.1rem; margin-bottom: .8rem; }
.docs-body h2 { font-size: 1.45rem; margin-top: 2.6rem; margin-bottom: .9rem; padding-top: .4rem; scroll-margin-top: 5rem; }
.docs-body h3 { font-size: 1.12rem; margin-top: 1.8rem; scroll-margin-top: 5rem; }
.docs-body .lead { opacity: .85; }
.docs-body table { font-size: .9rem; }
.docs-body table code { white-space: nowrap; }
.docs-body .anchor { opacity: 0; margin-left: .4rem; text-decoration: none; font-weight: 400; }
.docs-body h2:hover .anchor, .docs-body h3:hover .anchor { opacity: .5; }
.docs-toc { position: sticky; top: 5rem; align-self: flex-start; font-size: .85rem; }
.docs-toc .toc-title { font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; opacity: .6; margin-bottom: .5rem; }
.docs-toc a { display: block; color: var(--bs-body-color); opacity: .7; text-decoration: none; padding: .2rem 0 .2rem .7rem; border-left: 2px solid var(--n64-line); }
.docs-toc a:hover, .docs-toc a.active { opacity: 1; border-left-color: var(--n64-orange); }
.pager-link { display: flex; flex-direction: column; border: 1px solid var(--n64-line); border-radius: .6rem; padding: .7rem 1rem; text-decoration: none; color: var(--bs-body-color); min-width: 40%; }
.pager-link:hover { border-color: var(--n64-orange); color: var(--bs-body-color); }
.table-n64 { --bs-table-bg: transparent; }
.table-n64 thead th { font-size: .8rem; text-transform: uppercase; letter-spacing: .04em; opacity: .75; }
kbd { background: var(--bs-secondary-bg); color: var(--bs-body-color); border: 1px solid var(--n64-line); }

/* Fusszeile */
.site-footer { border-top: 1px solid var(--n64-line); padding: 3.5rem 0 2rem; background: var(--n64-surface-2); margin-top: 0; }
.site-footer a:not(.d-inline-flex) { display: block; color: var(--bs-body-color); opacity: .75; text-decoration: none; padding: .2rem 0; font-size: .92rem; }
.site-footer a:hover { opacity: 1; color: var(--n64-orange); }
.footer-title { font-weight: 700; font-size: .8rem; text-transform: uppercase; letter-spacing: .08em; margin-bottom: .6rem; }
.footer-bottom { border-top: 1px solid var(--n64-line); margin-top: 2.5rem; padding-top: 1.3rem; }
.footer-bottom a { display: inline !important; padding: 0 !important; }

/* CTA */
.cta { border-radius: 1.2rem; padding: 3rem 2rem; background: linear-gradient(135deg, rgba(245, 156, 26, .22), rgba(245, 156, 26, .05)); border: 1px solid rgba(245, 156, 26, .4); }

/* Tabs fuer Installationsvarianten */
.nav-pills.n64 .nav-link { color: var(--bs-body-color); border: 1px solid var(--n64-line); margin-right: .4rem; font-weight: 600; font-size: .9rem; }
.nav-pills.n64 .nav-link.active { background: var(--n64-orange); color: #16181b; border-color: var(--n64-orange); }

@media (max-width: 991.98px) {
	.docs-nav { position: static; max-height: none; }
	.hero { padding-top: 3.5rem; }
}
@media (prefers-reduced-motion: reduce) {
	a.n64-card { transition: none; }
}

/* Offene Angaben (vor Veroeffentlichung ausfuellen) */
.todo { background: rgba(214, 57, 57, .15); border: 1px dashed #d63939; border-radius: .3rem; padding: 0 .3rem; color: #ff8a8a; font-family: var(--bs-font-monospace); font-size: .9em; }

/* Grosse Abstaende auf dem Handy nicht ueber den Rand */
@media (max-width: 767.98px) {
	.row.g-5, .row.gx-5 { --bs-gutter-x: 1.5rem; }
}
main, .site-footer { overflow-x: clip; }

/* Hinweis auf das offizielle Forum ueber der Fusszeile */
.forum-strip { border-top: 1px solid var(--n64-line); background: var(--n64-orange-soft); padding: 1.6rem 0; }
.forum-strip .ico { width: 2.8rem; height: 2.8rem; flex: 0 0 2.8rem; border-radius: .75rem; display: inline-flex; align-items: center; justify-content: center; background: var(--n64-orange); color: #16181b; font-size: 1.3rem; }
.forum-strip .forum-logo { display: inline-flex; align-items: center; }

/* Wortmarke PROXY64 (Platzhalter bis zum Logo): Schrift wie die Logos, "64" in der orangen Box */
.wordmark { display: inline-flex; align-items: center; font-weight: 800; letter-spacing: .02em; line-height: 1; color: var(--n64-ink); font-size: 2.6rem; }
[data-bs-theme="dark"] .wordmark { color: #fff; }
.wordmark b { background: var(--n64-orange); color: var(--bs-body-bg); border-radius: .18em; padding: .04em .12em .02em; margin-left: .06em; font-weight: 800; }
.wordmark.sm { font-size: 1rem; }

/* Volltextsuche in der Doku */
.docs-results { margin-top: .5rem; border: 1px solid var(--n64-line); border-radius: .6rem; background: var(--n64-surface); max-height: 60vh; overflow-y: auto; scrollbar-width: thin; }
.docs-hit { display: block; padding: .55rem .75rem; border-bottom: 1px solid var(--n64-line); text-decoration: none; color: var(--bs-body-color); }
.docs-hit:last-child { border-bottom: 0; }
.docs-hit:hover, .docs-hit:focus { background: var(--n64-orange-soft); color: var(--bs-body-color); }
.docs-hit-title { display: block; font-weight: 700; font-size: .88rem; }
.docs-hit-page { display: block; font-size: .72rem; text-transform: uppercase; letter-spacing: .05em; opacity: .6; }
.docs-hit-text { display: block; font-size: .8rem; opacity: .8; margin-top: .15rem; }
.docs-hit-text mark { background: rgba(245, 156, 26, .35); color: inherit; padding: 0 .1em; border-radius: .15em; }
.docs-hit-none { padding: .6rem .75rem; font-size: .85rem; }
.shot-phone { max-width: 300px; margin-inline: auto; border-radius: 1.4rem; }
/* Screenshots: helle bzw. dunkle Fassung je nach Modus (siehe themeShots in build.go) */
[data-bs-theme="dark"] .shot-light, [data-bs-theme="light"] .shot-dark { display: none !important; }