/*
Theme Name:  DSGVO Glass Editorial
Theme URI:   https://company-marketing.de
Author:      Company Marketing
Author URI:  https://company-marketing.de
Description: Futuristisches Editorial-Blog-Theme mit Dual-Background-Bildschirm-Layout. Server-Rack-Bilder links und rechts, Glasmorphismus-Inhaltsbereich in der Mitte, DSGVO-konforme AI-Bildsprache, dunkles Theme mit Neon-Akzenten.
Version:     1.0.0
License:     GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: dsgvo-glass-editorial
Tags:        blog, editorial, dark, glass, ai, technology, dual-background, glassmorphism, custom-colors, featured-images
*/

/* ============================================================
   DESIGN TOKENS
   ============================================================ */
:root {
    /* Core palette */
    --clr-bg:             #060810;
    --clr-glass-bg:       rgba(8, 12, 22, 0.80);
    --clr-glass-bg-card:  rgba(10, 14, 26, 0.80);
    --clr-glass-border:   rgba(255, 255, 255, 0.20);
    --clr-glass-glow:     rgba(255, 255, 255, 0.20);
    --clr-accent:         #38bdf8;
    --clr-accent-dim:     #0ea5e9;
    --clr-accent-glow:    rgba(56, 189, 248, 0.25);
    --clr-text:           #e2e8f4;
    --clr-text-soft:      #a8b4cc;
    --clr-muted:          #5a6a86;
    --clr-border:         #1a2236;

    /* Layout */
    --sidebar-w:          20vw;  /* image strip width each side */
    --sidebar-w-portrait: 20vw; /* same on portrait / mobile */
    --content-max:        900px;

    /* Glass effect */
    --glass-blur:         18px;
    --glass-radius:       16px;
    --glass-shadow:       0 0 0 1px var(--clr-glass-border),
                          0 0 30px rgba(255,255,255,0.06),
                          0 8px 40px rgba(0,0,0,0.5);
    --glass-shadow-hover: 0 0 0 1px rgba(255,255,255,0.32),
                          0 0 50px rgba(56,189,248,0.15),
                          0 8px 60px rgba(0,0,0,0.6);

    /* Typography */
    --font-display: 'Playfair Display', Georgia, serif;
    --font-body:    'DM Sans', 'Helvetica Neue', sans-serif;
    --font-mono:    'JetBrains Mono', 'Fira Code', monospace;

    /* Spacing */
    --sp-xs:  4px;
    --sp-sm:  8px;
    --sp-md:  16px;
    --sp-lg:  24px;
    --sp-xl:  40px;
    --sp-2xl: 64px;

    /* Transitions */
    --ease:    cubic-bezier(0.4, 0, 0.2, 1);
    --dur-sm:  180ms;
    --dur-md:  300ms;
    --dur-lg:  500ms;
}

/* ============================================================
   RESET
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
img, video { max-width: 100%; height: auto; display: block; }
ul, ol { list-style: none; }
a { color: var(--clr-accent); text-decoration: none; transition: color var(--dur-sm) var(--ease); }
a:hover { color: #7dd3fc; }

/* Screen reader only */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

/* Skip link */
.skip-link { position: absolute; top: -100%; left: 0; background: var(--clr-accent); color: #000; padding: 12px 20px; font-family: var(--font-mono); font-size: 12px; z-index: 10000; transition: top 0.2s; }
.skip-link:focus { top: 0; }

/* ============================================================
   GLOBAL BODY & BACKGROUND ARCHITECTURE
   ============================================================ */
body {
    background-color: var(--clr-bg);
    color: var(--clr-text);
    font-family: var(--font-body);
    font-size: 16px;
    line-height: 1.65;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
}

/* Fullscreen background panels – left & right images */
body::before,
body::after {
    content: '';
    position: fixed;
    top: 0;
    width: var(--sidebar-w);
    height: 100vh;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    z-index: 0;
    pointer-events: none;
}

body::before {
    left: 0;
    background-image: url('assets/images/left.jpg');
    /* Fade out towards center */
    -webkit-mask-image: linear-gradient(to right, rgba(0,0,0,1) 0%, rgba(0,0,0,0.6) 70%, rgba(0,0,0,0) 100%);
    mask-image: linear-gradient(to right, rgba(0,0,0,1) 0%, rgba(0,0,0,0.6) 70%, rgba(0,0,0,0) 100%);
}

body::after {
    right: 0;
    background-image: url('assets/images/right.jpg');
    -webkit-mask-image: linear-gradient(to left, rgba(0,0,0,1) 0%, rgba(0,0,0,0.6) 70%, rgba(0,0,0,0) 100%);
    mask-image: linear-gradient(to left, rgba(0,0,0,1) 0%, rgba(0,0,0,0.6) 70%, rgba(0,0,0,0) 100%);
}

/* Center channel: dark base between the two images */
.site-bg-center {
    position: fixed;
    top: 0;
    left: 20vw;
    right: 20vw;
    height: 100vh;
    background: linear-gradient(180deg, #060810 0%, #080c18 100%);
    z-index: 0;
    pointer-events: none;
}

/* ============================================================
   SITE WRAPPER – sits above backgrounds
   ============================================================ */
#page {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

/* ============================================================
   GLASS MIXIN UTILITY
   ============================================================ */
.glass {
    background: var(--clr-glass-bg);
    backdrop-filter: blur(var(--glass-blur)) saturate(1.4);
    -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(1.4);
    border-radius: var(--glass-radius);
    box-shadow: var(--glass-shadow);
    border: 1px solid var(--clr-glass-border);
}

/* ============================================================
   UTILITY
   ============================================================ */
.container {
    width: 100%;
    max-width: var(--content-max);
    margin-inline: auto;
    padding-inline: 0;
}

.mono-label {
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--clr-muted);
}

.accent-line {
    display: block;
    width: 36px;
    height: 3px;
    background: linear-gradient(90deg, var(--clr-accent), transparent);
    margin-bottom: var(--sp-md);
    border-radius: 2px;
}

/* Neon glow pulse on status dot */
.status-dot {
    display: inline-block;
    width: 7px;
    height: 7px;
    background: var(--clr-accent);
    border-radius: 50%;
    box-shadow: 0 0 8px var(--clr-accent), 0 0 20px var(--clr-accent-glow);
    animation: pulse-glow 2.5s ease-in-out infinite;
    flex-shrink: 0;
}

@keyframes pulse-glow {
    0%, 100% { box-shadow: 0 0 6px var(--clr-accent), 0 0 18px var(--clr-accent-glow); }
    50%       { box-shadow: 0 0 14px var(--clr-accent), 0 0 40px var(--clr-accent-glow); }
}

@keyframes fadeUp {
    from { opacity: 0; transform: translateY(24px); }
    to   { opacity: 1; transform: translateY(0); }
}

@keyframes lineExpand {
    from { width: 0; }
    to   { width: 36px; }
}

/* ============================================================
   LAYOUT – FINALE VERSION
   Alle Inhaltsblöcke: identische 60vw, zentriert.
   Kein ToC-Grid – Text ist so breit wie das Bild.
   ============================================================ */

.site-header__inner,
.category-stripe__inner-wrap,
.hero-post__wrap,
.news-ticker__wrap,
.section-header,
.blog-layout,
.post-hero,
.post-hero__glass,
.post-featured-image,
.post-featured-image__inner,
.post-article,
.post-article__inner,
.post-content-glass,
.post-footer__inner,
.related-posts__inner,
.comments-section__inner,
.archive-header__inner,
.page-header__inner,
.page-content__glass,
.error-404-content__glass,
.no-results-content__glass,
.site-footer__inner {
    width: 60vw !important;
    max-width: 60vw !important;
    margin-left: auto !important;
    margin-right: auto !important;
    box-sizing: border-box !important;
}

/* ── Tablet ≤1024px ── */
@media (max-width: 1024px) {
    body::before, body::after { display: none !important; }
    .site-bg-center { left: 0 !important; right: 0 !important; }

    .site-header__inner, .category-stripe__inner-wrap, .hero-post__wrap,
    .news-ticker__wrap, .section-header, .blog-layout,
    .post-hero, .post-hero__glass,
    .post-featured-image, .post-featured-image__inner,
    .post-article, .post-article__inner, .post-content-glass,
    .post-footer__inner, .related-posts__inner, .comments-section__inner,
    .archive-header__inner, .page-header__inner, .page-content__glass,
    .error-404-content__glass, .no-results-content__glass, .site-footer__inner {
        width: calc(100% - 48px) !important;
        max-width: 900px !important;
    }
}

/* ── Mobile ≤600px ── */
@media (max-width: 600px) {
    .site-header__inner, .category-stripe__inner-wrap, .hero-post__wrap,
    .news-ticker__wrap, .section-header, .blog-layout,
    .post-hero, .post-hero__glass,
    .post-featured-image, .post-featured-image__inner,
    .post-article, .post-article__inner, .post-content-glass,
    .post-footer__inner, .related-posts__inner, .comments-section__inner,
    .archive-header__inner, .page-header__inner, .page-content__glass,
    .error-404-content__glass, .no-results-content__glass, .site-footer__inner {
        width: calc(100% - 32px) !important;
        max-width: 100% !important;
    }
}