/* silentscout.io — Lander. Randlose Bänder: Vulkan (Kopf, Hero, Datenschutz, Footer) im Wechsel mit Papier.
   Farben und Stil folgen der Etikett-Richtlinie von affiliate-marketing.de (bewusst nur hell).
   Schriften liegen selbst gehostet unter /assets/fonts — keine Anfrage an Dritte. */
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 100 900; font-display: swap; src: url('/assets/fonts/inter-latin-wght.woff2') format('woff2'); }
@font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 400; font-display: swap; src: url('/assets/fonts/ibm-plex-mono-latin-400.woff2') format('woff2'); }
@font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 500; font-display: swap; src: url('/assets/fonts/ibm-plex-mono-latin-500.woff2') format('woff2'); }

:root {
  color-scheme: light;
  --bergsee: #128068; --bergsee-tief: #0e6a56; --vulkan: #2a3242; --vulkan-tief: #1f2633;
  --bernstein: #f4b740; --merkzettel: #fff3c4; --merkzettel-tinte: #b45309; --rot: #b3232b;
  --canvas: #fbfaf6; --papier: #fffefa; --papiergrund: #f7f3e8; --kante: #e4dfd0; --linie: #ece7d9;
  --text: #4b5563; --label: #6b7280; --leise: #9ca3af; --nacht-text: #c9ccd1; --nacht-linie: #3a4356;
  --sans: 'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --mono: 'IBM Plex Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
  --gutter-l: max(16px, env(safe-area-inset-left, 0px));
  --gutter-r: max(16px, env(safe-area-inset-right, 0px));
  padding-top: env(safe-area-inset-top, 0px);
  padding-bottom: env(safe-area-inset-bottom, 0px);
  background: var(--vulkan-tief);
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--canvas); color: var(--text); font-family: var(--sans); font-size: 16px; line-height: 1.6; -webkit-text-size-adjust: 100%; }
img, svg { max-width: 100%; }
[hidden] { display: none !important; }
h1, h2, h3, p { margin: 0; }
h1, h2, h3 { color: var(--vulkan); text-wrap: balance; letter-spacing: -0.02em; line-height: 1.08; }
button, input { font: inherit; }
:focus-visible { outline: 2px solid var(--bernstein); outline-offset: 2px; }
.w { max-width: 1120px; margin-inline: auto; padding-left: var(--gutter-l); padding-right: var(--gutter-r); }
.band { padding-block: 72px; }
.kap { font-size: 12px; font-weight: 600; letter-spacing: .09em; text-transform: uppercase; color: var(--label); }
.num { font-variant-numeric: tabular-nums; }
.lead { font-size: 19px; line-height: 1.55; max-width: 58ch; }
.h2 { font-size: clamp(28px, 4vw, 40px); font-weight: 800; margin-top: 8px; }
.fine { font-size: 13px; color: var(--label); }
.fine a { color: inherit; }
.ok { font-size: 14px; font-weight: 600; color: var(--bergsee-tief); }
section[id] { scroll-margin-top: 16px; }

/* Formular */
.btn { display: inline-block; border: 0; border-radius: 4px; background: var(--bergsee); color: #fff; font-weight: 700; padding: 13px 20px; cursor: pointer; white-space: nowrap; }
.btn:hover { background: var(--bergsee-tief); }
.lead-form { display: flex; flex-wrap: wrap; gap: 8px; max-width: 480px; }
.lead-form input { flex: 1 1 220px; min-width: 0; padding: 12px 14px; border: 1px solid var(--kante); border-radius: 4px; background: var(--papier); color: var(--vulkan); }
.form-gruppe { display: grid; gap: 6px; }

/* Kopf */
.kopf { background: var(--vulkan-tief); border-bottom: 1px solid var(--nacht-linie); }
.kopf .w { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 8px 20px; padding-block: 9px; }
.marke-l { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 2px 12px; }
.marke-n { display: inline-flex; align-items: center; gap: 8px; color: #fff; font-size: 16px; font-weight: 800; letter-spacing: -.01em; text-decoration: none; }
.marke { width: 22px; height: 22px; flex: none; }
.claim { color: var(--bernstein); font-size: 14px; font-weight: 600; }
.kopf-r { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 8px 18px; }
.powered { display: inline-flex; align-items: center; gap: 7px; color: var(--leise); font-size: 13px; text-decoration: none; }
.powered svg { width: 17px; height: 18px; flex: none; }
.powered b { color: #fff; font-weight: 600; }
.powered:hover b { color: var(--bernstein); }
.lang { display: inline-flex; border: 1px solid var(--nacht-linie); border-radius: 4px; overflow: hidden; }
.lang a { color: var(--nacht-text); font-size: 12px; font-weight: 700; letter-spacing: .06em; padding: 4px 9px; text-decoration: none; }
.lang a + a { border-left: 1px solid var(--nacht-linie); }
.lang a:hover { color: #fff; }
.lang a[aria-current="page"] { background: var(--bernstein); color: var(--vulkan-tief); }

/* Hero und Datenschutz (dunkel) */
.dunkel { background: var(--vulkan); color: var(--nacht-text); }
.dunkel .kap { color: var(--bernstein); }
.dunkel .fine { color: var(--leise); }
.dunkel .ok { color: #8fe0c9; }
.dunkel .lead { color: var(--nacht-text); }
.dunkel .lead-form input { border-color: var(--nacht-linie); }
.dunkel em { font-style: normal; color: var(--bernstein); }
.hero { padding-block: 64px 72px; }
.hero h1 { color: #fff; font-size: clamp(36px, 5vw, 60px); font-weight: 900; letter-spacing: -0.03em; line-height: 1.02; max-width: 16ch; }
.hero-raster { display: grid; grid-template-columns: minmax(0, 1fr) 430px; gap: 48px; align-items: start; }
.hero-raster > div { display: grid; gap: 20px; }
.privat { display: grid; grid-template-columns: 30px 1fr; gap: 12px; padding: 14px 16px; background: var(--bergsee); color: #eafaf5; border-radius: 6px; max-width: 58ch; }
.privat svg { width: 30px; height: 30px; color: #fff; }
.privat strong { display: block; color: #fff; font-size: 17px; font-weight: 800; line-height: 1.25; letter-spacing: -.01em; }
.privat p { font-size: 14.5px; margin-top: 3px; line-height: 1.45; }
.privat a { color: #fff; font-weight: 700; white-space: nowrap; }
.browser { display: grid; gap: 8px; }
.browser-l { display: flex; flex-wrap: wrap; gap: 6px; list-style: none; margin: 0; padding: 0; }
.browser-l li { display: inline-flex; align-items: center; gap: 7px; padding: 7px 11px; border: 1px solid var(--nacht-linie); border-radius: 4px; color: #fff; font-size: 13.5px; font-weight: 600; }
.browser-l svg { width: 17px; height: 17px; flex: none; }
.ende .browser-l li { border-color: var(--kante); background: var(--papier); color: var(--vulkan); }
.shot { margin: 0; display: grid; gap: 8px; color: var(--text); }
.shot .br { box-shadow: 0 18px 44px rgba(10,14,22,.45); }
.shot figcaption { font-size: 12.5px; color: var(--leise); }
.shot .kap { color: var(--label); }
.shot .fine { color: var(--label); }

.ds { padding-block: 72px; }
.ds .w { display: grid; gap: 16px; }
.ds h2 { color: #fff; font-size: clamp(42px, 7.2vw, 84px); font-weight: 900; letter-spacing: -0.035em; line-height: .98; max-width: 13ch; }
.net { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 20px; }
.net-p { border-radius: 6px; overflow: hidden; display: flex; flex-direction: column; border: 1px solid; }
.net-h { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 12px 14px; color: #fff; font-size: 14px; font-weight: 600; }
.net-c { font-family: var(--mono); font-size: 13px; color: #fff; white-space: nowrap; }
.net-b { height: 268px; overflow: hidden; font-family: var(--mono); font-size: 12.5px; line-height: 1.5; }
.net-r { display: grid; grid-template-columns: 38px 1fr; gap: 8px; padding: 5px 14px; border-bottom: 1px solid; }
.net-r b { font-weight: 500; color: #fff; overflow-wrap: anywhere; }
.net-r.neu { animation: rein .35s ease-out; }
@keyframes rein { from { background: #3a4356; } to { background: transparent; } }
.net-f { padding: 9px 14px; border-top: 1px solid; font-size: 12.5px; }
.net-p.theirs { background: #4f171d; border-color: var(--rot); }
.net-p.theirs .net-h { background: var(--rot); }
.net-p.theirs .net-r { border-bottom-color: #6a2a31; color: #f0cfd2; }
.net-p.theirs .net-r span:first-child { color: #f6b8bc; }
.net-p.theirs .net-f { border-top-color: #6a2a31; color: #f0cfd2; }
.net-p.ours { background: #0f4a40; border-color: var(--bergsee); }
.net-p.ours .net-h { background: var(--bergsee); }
.net-p.ours .net-r { border-bottom-color: #1c5c50; color: #bfe3d9; }
.net-p.ours .net-r span:first-child { color: #8fe0c9; }
.net-p.ours .net-f { border-top-color: #1c5c50; color: #bfe3d9; }
.net-leer { padding: 28px 14px; color: #bfe3d9; }
.net-leer strong { display: block; color: #fff; font-family: var(--sans); font-size: 26px; font-weight: 800; letter-spacing: -.02em; line-height: 1.15; margin-bottom: 8px; }

/* Funktionen */
.funk { display: grid; grid-template-columns: 1fr 1fr; gap: 36px; align-items: start; margin-top: 28px; }
.ben { display: grid; grid-template-columns: 1fr 1fr; gap: 24px 28px; }
.ben div { border-top: 2px solid var(--kante); padding-top: 14px; display: grid; gap: 6px; align-content: start; }
.ben h3 { font-size: 18px; font-weight: 700; letter-spacing: -.01em; line-height: 1.25; }
.ben p { font-size: 15px; }
.tarif { display: grid; grid-template-columns: 1fr 1fr; margin-top: 36px; border-block: 2px solid var(--kante); }
.tarif div { padding: 14px 16px 14px 0; display: grid; gap: 4px; align-content: start; }
.tarif div + div { padding-left: 24px; border-left: 1px dashed var(--kante); }
.tarif p { font-size: 15px; }

/* Vergleich */
.cmp-wrap { overflow-x: auto; margin-top: 32px; }
.cmp { border: 1px solid var(--kante); border-radius: 6px; background: var(--papier); }
.cmp-r { display: grid; grid-template-columns: 1.1fr 1fr 1fr; border-bottom: 1px dashed var(--kante); }
.cmp-r:last-child { border-bottom: 0; }
.cmp-r > div { padding: 15px 18px; }
.cmp-r.kopfzeile { border-bottom: 2px solid var(--kante); background: var(--papiergrund); border-radius: 6px 6px 0 0; }
.cmp-r > div:first-child { color: var(--vulkan); font-weight: 600; }
.cmp-r > div:nth-child(2) { background: #f8dcdd; color: #8f1c23; font-weight: 600; }
.cmp-r > div:last-child { background: color-mix(in srgb, var(--bergsee) 13%, var(--papier)); color: var(--bergsee-tief); font-weight: 600; }
.cmp-r.kopfzeile > div:nth-child(2) { background: var(--rot); color: #fff; }
.cmp-r.kopfzeile > div:last-child { background: var(--bergsee); color: #fff; border-radius: 0 6px 0 0; }
.cmp-r:not(.kopfzeile) > div:nth-child(2), .cmp-r:not(.kopfzeile) > div:last-child { display: flex; gap: 10px; align-items: flex-start; }
.cmp-r:not(.kopfzeile) > div:nth-child(2)::before, .cmp-r:not(.kopfzeile) > div:last-child::before { content: ""; flex: none; width: 20px; height: 20px; margin-top: 2px; border-radius: 3px; background-repeat: no-repeat; background-position: center; background-size: 14px; }
.cmp-r:not(.kopfzeile) > div:nth-child(2)::before { background-color: var(--rot); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14' fill='none' stroke='white' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M3 3l8 8M11 3l-8 8'/%3E%3C/svg%3E"); }
.cmp-r:not(.kopfzeile) > div:last-child::before { background-color: var(--bergsee); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14' fill='none' stroke='white' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.5 7.5l3 3 6-7'/%3E%3C/svg%3E"); }
.cmp-hinweis { margin-top: 12px; }

/* Bloom-Filter */
.bloom { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: start; }
.bloom > div { display: grid; gap: 14px; }
.stats { display: grid; grid-template-columns: repeat(3, 1fr); border-block: 2px solid var(--kante); }
.stats div { padding: 16px 12px 16px 0; display: grid; gap: 2px; }
.stats strong { color: var(--vulkan); font-size: clamp(24px, 3.2vw, 34px); font-weight: 800; letter-spacing: -.02em; line-height: 1.1; }

/* Abschluss */
.ende { background: var(--papiergrund); border-top: 1px solid var(--kante); }
.ende .w { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; align-items: center; }
.ende .w > div { display: grid; gap: 14px; }

/* Footer */
.fuss { background: var(--vulkan-tief); color: var(--nacht-text); font-size: 14px; }
.fuss a { color: var(--nacht-text); text-decoration: none; }
.fuss a:hover { color: #fff; text-decoration: underline; }
.fuss-o { display: grid; grid-template-columns: 1.4fr repeat(3, 1fr); gap: 32px; padding-block: 48px 36px; }
.fuss-m { display: grid; gap: 10px; align-content: start; max-width: 34ch; }
.fuss-m .marke-n { font-size: 18px; }
.fuss-m .marke { width: 28px; height: 28px; }
.fuss-m p { color: var(--leise); font-size: 13.5px; line-height: 1.5; }
.fuss-s { display: grid; gap: 8px; align-content: start; }
.fuss-s .kap { color: var(--bernstein); margin-bottom: 2px; }
.fuss-s span:not(.kap) { color: var(--leise); }
.fuss-u { border-top: 1px solid var(--nacht-linie); }
.fuss-u .w { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 10px 20px; padding-block: 14px; font-size: 12.5px; color: var(--leise); }

/* Bildschirmfotos der Extension (statisch, Beispieldaten) */
.br { background: var(--papier); border: 1px solid var(--kante); border-radius: 6px; overflow: hidden; }
.br-bar { display: flex; align-items: center; gap: 10px; padding: 8px 12px; background: #f1ede1; border-bottom: 1px solid var(--kante); }
.br-url { flex: 1; min-width: 0; background: var(--papier); border: 1px solid var(--kante); border-radius: 4px; padding: 4px 10px; font-family: var(--mono); font-size: 12.5px; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ext { width: 26px; height: 26px; flex: none; display: grid; place-items: center; border-radius: 6px; background: var(--vulkan); color: #fff; }
.ext svg { width: 20px; height: 20px; }
.ext:not(.treffer) .dot { display: none; }
.side { background: var(--papier); }
.p-k { padding: 14px 16px; }
.p-hd { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; }
.p-name { color: var(--vulkan); font-weight: 800; font-size: 17px; letter-spacing: -.01em; line-height: 1.2; }
.p-host { font-family: var(--mono); font-size: 12px; color: var(--label); }
.tag { flex: none; font-size: 11px; font-weight: 700; padding: 2px 7px; border-radius: 3px; background: var(--merkzettel); color: var(--merkzettel-tinte); white-space: nowrap; }
.p-links { padding: 0 16px 12px; color: var(--bergsee-tief); font-size: 13.5px; font-weight: 700; }
.modus { padding: 11px 16px; background: var(--papiergrund); border-block: 1px solid var(--kante); display: grid; gap: 5px; }
.modus-z { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.sch { display: inline-flex; align-items: center; gap: 8px; color: var(--vulkan); font-size: 14px; font-weight: 700; }
.sch-k { position: relative; width: 34px; height: 18px; border-radius: 3px; background: var(--bergsee); flex: none; }
.sch-k::after { content: ""; position: absolute; top: 2px; left: 18px; width: 14px; height: 14px; border-radius: 2px; background: var(--papier); }
.sta { font-family: var(--mono); font-size: 12px; color: var(--bergsee-tief); white-space: nowrap; }
.side-sec { padding: 14px 16px; border-bottom: 1px dashed var(--kante); display: grid; gap: 10px; }
.nw { padding: 10px 16px; border-bottom: 1px dashed var(--kante); display: grid; gap: 6px; }
.nw-1 { display: grid; grid-template-columns: 1fr auto 64px; gap: 10px; align-items: baseline; }
.nw-n { color: var(--vulkan); font-weight: 700; font-size: 14.5px; display: inline-flex; align-items: center; gap: 8px; }
.swatch { display: inline-block; width: 18px; height: 0; }
.nw-p { color: var(--bergsee-tief); font-size: 16px; font-weight: 800; }
.nw-d { font-size: 12.5px; font-weight: 600; text-align: right; }
.nw-d.plus { color: var(--bergsee-tief); }
.nw-d.minus { color: var(--rot); }
.nw-2 { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.nw-m { font-size: 12.5px; color: var(--label); }
.anm { flex: none; background: var(--bergsee); color: #fff; font-size: 12.5px; font-weight: 700; padding: 4px 10px; border-radius: 4px; white-space: nowrap; }
.p-fu { padding: 10px 16px; background: var(--papiergrund); font-size: 12.5px; color: var(--label); display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.serp { display: grid; gap: 18px; padding: 22px 24px; }
.res { display: grid; gap: 2px; }
.res .u { font-family: var(--mono); font-size: 12.5px; color: var(--label); overflow-wrap: anywhere; }
.res .t { color: var(--vulkan); font-weight: 600; font-size: 17px; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; line-height: 1.3; }
.res .s { height: 9px; width: 78%; background: var(--linie); border-radius: 2px; margin-top: 5px; }
.chip { font-size: 11.5px; font-weight: 700; padding: 1px 7px; border-radius: 3px; white-space: nowrap; background: var(--bergsee); color: #fff; }

/* Platzhalter bis zum Cut-over: eine dunkle Seite, Bildmarke, ein Satz */
body.ph { min-height: 100vh; min-height: 100dvh; display: grid; grid-template-rows: 1fr auto; background: var(--vulkan); color: var(--nacht-text); padding-left: var(--gutter-l); padding-right: var(--gutter-r); }
.ph-main { display: grid; align-items: center; justify-items: center; padding-block: 64px; }
.ph-inhalt { display: grid; gap: 20px; max-width: 34rem; }
.ph-marke { font-size: 20px; }
.ph-marke .marke { width: 34px; height: 34px; }
.ph h1 { color: #fff; font-size: clamp(40px, 7vw, 72px); font-weight: 900; letter-spacing: -0.035em; line-height: 1; }
.ph h1 em { font-style: normal; color: var(--bernstein); }
.ph-claim { color: var(--leise); font-weight: 600; font-size: 15px; }
/* Footer = untere Leiste des Landers (.fuss-u): Linie über die volle Breite, Inhalt auf der Textspalte */
.ph-fuss { margin-inline: calc(-1 * var(--gutter-l)) calc(-1 * var(--gutter-r)); padding: 14px var(--gutter-r) 14px var(--gutter-l); font-size: 12.5px; color: var(--leise); }
.ph-fuss-i { max-width: 34rem; margin-inline: auto; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 10px 20px; }
.ph-fuss-r { display: inline-flex; align-items: center; gap: 16px; }
.ph-fuss a:not([data-l]) { color: var(--nacht-text); text-decoration: none; }
.ph-fuss a:not([data-l]):hover { color: #fff; text-decoration: underline; }

@media (max-width: 860px) {
  .band, .ds { padding-block: 52px; }
  .hero-raster, .net, .bloom, .ende .w, .funk, .ben, .tarif { grid-template-columns: 1fr; }
  .tarif div + div { padding-left: 0; border-left: 0; border-top: 1px dashed var(--kante); }
  .net-b { height: 200px; }
  .fuss-o { grid-template-columns: 1fr 1fr; }
  .fuss-m { grid-column: 1 / -1; }
}
@media (max-width: 560px) {
  .cmp-r { grid-template-columns: 1fr 1fr; }
  .cmp-r > div:first-child { grid-column: 1 / -1; padding-bottom: 0; }
  .cmp-r.kopfzeile > div:first-child { display: none; }
  .cmp-r.kopfzeile > div:nth-child(2) { border-radius: 6px 0 0 0; }
  .cmp-r > div { padding: 10px 12px; font-size: 14px; }
  .stats div { padding-right: 8px; }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .net-r.neu { animation: none; } }