/* blog-brand.css - Marken-Auftritt der Blogseiten (Brudi 01.10.2026: "Unterseiten sind scheisse, Design passt nicht, Logo falsch").
   Schriften und Farben sind die der Startseite. Wird NACH dem Inline-Stylesheet jeder Blogseite geladen und
   ueberschreibt dessen violette Variablen. Eingebunden und gepflegt von tools/blog/marke.py. */
@font-face{font-family:Space Grotesk;font-style:normal;font-weight:300 700;font-display:swap;src:url(/_next/static/media/e1aab0933260df4d-s.woff2) format("woff2");unicode-range:u+0102-0103,u+0110-0111,u+0128-0129,u+0168-0169,u+01a0-01a1,u+01af-01b0,u+0300-0301,u+0303-0304,u+0308-0309,u+0323,u+0329,u+1ea0-1ef9,u+20ab}
@font-face{font-family:Space Grotesk;font-style:normal;font-weight:300 700;font-display:swap;src:url(/_next/static/media/b7387a63dd068245-s.woff2) format("woff2");unicode-range:u+0100-02ba,u+02bd-02c5,u+02c7-02cc,u+02ce-02d7,u+02dd-02ff,u+0304,u+0308,u+0329,u+1d00-1dbf,u+1e00-1e9f,u+1ef2-1eff,u+2020,u+20a0-20ab,u+20ad-20c0,u+2113,u+2c60-2c7f,u+a720-a7ff}
@font-face{font-family:Space Grotesk;font-style:normal;font-weight:300 700;font-display:swap;src:url(/_next/static/media/36966cca54120369-s.p.woff2) format("woff2");unicode-range:u+00??,u+0131,u+0152-0153,u+02bb-02bc,u+02c6,u+02da,u+02dc,u+0304,u+0308,u+0329,u+2000-206f,u+20ac,u+2122,u+2191,u+2193,u+2212,u+2215,u+feff,u+fffd}
@font-face{font-family:Space Grotesk Fallback;src:local("Arial");ascent-override:89.71%;descent-override:26.62%;line-gap-override:0.00%;size-adjust:109.69%}
@font-face{font-family:Outfit;font-style:normal;font-weight:100 900;font-display:swap;src:url(/_next/static/media/98848575513c9742-s.woff2) format("woff2");unicode-range:u+0100-02ba,u+02bd-02c5,u+02c7-02cc,u+02ce-02d7,u+02dd-02ff,u+0304,u+0308,u+0329,u+1d00-1dbf,u+1e00-1e9f,u+1ef2-1eff,u+2020,u+20a0-20ab,u+20ad-20c0,u+2113,u+2c60-2c7f,u+a720-a7ff}
@font-face{font-family:Outfit;font-style:normal;font-weight:100 900;font-display:swap;src:url(/_next/static/media/7b0b24f36b1a6d0b-s.p.woff2) format("woff2");unicode-range:u+00??,u+0131,u+0152-0153,u+02bb-02bc,u+02c6,u+02da,u+02dc,u+0304,u+0308,u+0329,u+2000-206f,u+20ac,u+2122,u+2191,u+2193,u+2212,u+2215,u+feff,u+fffd}
@font-face{font-family:Outfit Fallback;src:local("Arial");ascent-override:100.18%;descent-override:26.05%;line-gap-override:0.00%;size-adjust:99.82%}

/* ---------------------------------------------------------------------------------------------
   Marken-Tokens: dieselben Werte wie die Startseite (_next CSS: --color-base/surface/elevated/ink/
   muted/accent/hairline). Ueberschreibt die violetten Variablen, die jede Blogseite noch inline
   traegt (--accent, --accent-light ...). Danach nur noch Regeln, die diese Variablen NICHT erreichen.
   --------------------------------------------------------------------------------------------- */
:root {
  --bg-primary: #0a0a0f;
  --bg-card: #13131b;
  --bg-card-hover: #1b1b26;
  --text-primary: #f4f4f6;
  --text-secondary: #c4c4cf;
  --text-muted: #9a9aa6;
  --accent: #e50914;
  --accent-light: #ff5a63;      /* Akzent als Text auf dunkel: #e50914 erreicht dort nur ~4:1 */
  --accent-glow: rgba(229, 9, 20, 0.14);
  --border: rgba(255, 255, 255, 0.08);
  --border-light: rgba(255, 255, 255, 0.14);
  --font-display: "Space Grotesk", "Space Grotesk Fallback", ui-sans-serif, system-ui, sans-serif;
  --font-body: "Outfit", "Outfit Fallback", ui-sans-serif, system-ui, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
}
body { font-family: var(--font-body); font-size: 1.0625rem; }
h1, h2, h3, .card-title, .logo-word { font-family: var(--font-display); }
::selection { background: var(--accent); color: #fff; }
a:focus-visible, button:focus-visible, summary:focus-visible { outline: 2px solid #fff; outline-offset: 3px; border-radius: 6px; }
.bg-glow { background: radial-gradient(circle, rgba(229, 9, 20, 0.16) 0%, transparent 62%); }

/* ---- Kopfleiste: dieselbe wie auf der Startseite (.tkl in legacy-hero-v2.css) ------------- */
/* Die Zeilen unten sind WOERTLICH aus legacy-hero-v2.css kopiert; tools/blog/test-marke.py bricht ab, wenn sie driften. */
.tkl{position:fixed;inset-block-start:0;inset-inline:0;z-index:9999;height:64px;display:flex;align-items:center;gap:8px;padding-inline:24px 104px;background:linear-gradient(180deg,#101111e6,#101111b3);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-bottom:1px solid #ffffff14;font-family:var(--font-display,system-ui,sans-serif)}
.tkl a{color:var(--color-muted,#9a9aa6);text-decoration:none;font-size:14px;padding:8px 14px;border-radius:999px;transition:color .2s}
.tkl a:hover{color:var(--color-ink,#f4f4f6)}
.tkl .tkl-logo{display:flex;align-items:center;gap:10px;color:var(--color-ink,#f4f4f6);font-weight:700;font-size:18px;letter-spacing:.04em;padding-inline-start:0;margin-inline-end:auto}
.tkl .tkl-logo span{display:grid;place-items:center;height:30px}
.tkl .tkl-logo img{height:30px;width:auto;display:block}
.tkl .tkl-cta{background:var(--color-accent,#e50914);color:#fff;font-weight:600}
.tkl .tkl-cta:hover{color:#fff}
.tkl a:focus-visible{outline:2px solid #fff;outline-offset:2px}
@media(max-width:1100px){.tkl .tkl-link{display:none}.tkl{padding-inline:16px 96px}}
/* nur Blog: aktuelle Seite hervorheben, auf Handy den Blog-Link behalten, Aufruf-Knopf erst ab 480 px */
.tkl a[aria-current="page"]{color:var(--color-ink,#f4f4f6)}
@media(max-width:1100px){.tkl .tkl-link[aria-current="page"]{display:inline-block}}
@media(max-width:480px){.tkl .tkl-cta{display:none}}
/* Platz fuer die feste Leiste: die Seiten starten unter ihr. */
body > main { padding-top: 64px; }

/* ---- Kopf der Seiten ---------------------------------------------------------------------- */
.blog-hero h1, .article-hero h1 {
  background: none; -webkit-background-clip: border-box; background-clip: border-box;
  color: var(--text-primary); letter-spacing: -0.02em;
}
.blog-hero h1 { font-weight: 700; }
.article-hero { border-bottom: 1px solid var(--border); padding-top: 3.5rem; }
.article-hero .meta, .card-meta { font-family: var(--font-mono); font-size: 0.75rem; letter-spacing: 0.08em; }
.article-hero .meta .category, .card-category { color: var(--accent-light); font-weight: 600; }
.article-hero .meta .category::before, .card-category::before { content: "[ "; opacity: .6; }
.article-hero .meta .category::after, .card-category::after { content: " ]"; opacity: .6; }
.article-hero p.lead { font-size: 1.15rem; color: var(--text-secondary); max-width: 640px; }

/* ---- Bilder ------------------------------------------------------------------------------- */
/* Die Beitragsbilder sind violette Illustrationen (Altbestand). Duoton: Graustufen, multipliziert auf Rot -
   Schwarz bleibt Schwarz, Licht wird Markenrot. Sie sitzen als schmales Band, nicht als 1280-px-Quadrat. */
.article-image { max-width: 1000px; margin: 2rem auto; border-radius: 16px; overflow: hidden; border: 1px solid var(--border); background: var(--accent); }
.article-image img { width: 100%; height: clamp(180px, 34vw, 380px); object-fit: cover; object-position: center; filter: grayscale(1) contrast(1.15); mix-blend-mode: multiply; display: block; }

/* ---- Beitragstext ------------------------------------------------------------------------- */
article.post { max-width: 720px; font-size: 1.0625rem; line-height: 1.8; }
article.post h2 { font-size: clamp(1.4rem, 3vw, 1.75rem); letter-spacing: -0.015em; margin-top: 3rem; }
article.post h2::before { content: ""; display: block; width: 28px; height: 3px; background: var(--accent); margin-bottom: 0.9rem; border-radius: 2px; }
article.post h2.related-posts::before { display: none; }
article.post h3 { color: var(--text-primary); }
article.post a { color: var(--accent-light); text-decoration-thickness: 1px; }
article.post a:hover { color: #fff; }
article.post table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; border: 1px solid var(--border); border-radius: 12px; }
article.post th, article.post td { min-width: 9rem; vertical-align: top; }
article.post th { font-family: var(--font-mono); letter-spacing: 0.06em; }
article.post tr:last-child td { border-bottom: 0; }

/* ---- Aufruf am Ende ----------------------------------------------------------------------- */
.cta-box { background: var(--bg-card); border: 1px solid var(--border-light); border-inline-start: 4px solid var(--accent); border-radius: 16px; text-align: start; padding: 2rem; }
.cta-box h3 { color: var(--text-primary) !important; margin-top: 0; }
.cta-box p { color: var(--text-secondary); }
.cta-button { background: var(--accent); color: #fff; border-radius: 999px; padding: 0.8rem 1.75rem; }
.cta-button:hover { background: #ff1a26; }

/* ---- Uebersicht: Karten ------------------------------------------------------------------- */
.blog-card { background: var(--bg-card); border: 1px solid var(--border); border-radius: 16px; }
.blog-card:hover { border-color: var(--accent); box-shadow: 0 12px 40px rgba(229, 9, 20, 0.14); }
.card-image {
  /* Kein Stockbild und keine violette Illustration: ein ruhiges Markenband mit der T-Marke. */
  background: radial-gradient(120% 160% at 0% 50%, rgba(229, 9, 20, 0.26), transparent 62%), url("/assets/brand/telos-t-mark.svg") 20px 50% / 26px no-repeat, #0f0f16 !important;
  aspect-ratio: auto !important; height: 72px; border-bottom: 1px solid var(--border);
}
[dir="rtl"] .card-image { background-position: 0 0, calc(100% - 18px) 50%, 0 0 !important; }
.card-title { font-weight: 600; letter-spacing: -0.01em; }
.card-link { color: var(--accent-light); }

/* ---- Fuss --------------------------------------------------------------------------------- */
footer.site-footer { border-top: 1px solid var(--border); }
.footer-links a:hover { color: var(--accent-light); }

@media (max-width: 640px) {
  article.post { font-size: 1.03rem; }
  .article-hero { padding-top: 2.5rem; }
}