/* ============================================================
   hybridlog Tools – Base Styles
   Adapted from hybridlog.de dark design system
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Source+Sans+3:ital,wght@0,400;0,600;0,700;1,400;1,600&display=swap');

*, *::before, *::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

:root {
    /* Dark Background — aligned with hybridlog.de main site (Konzept 1) */
    --bg:              #0b0c0b;
    --bg-elevated:     #111312;
    --bg-card:         #171915;
    --bg-card-hover:   #1d201b;
    --surface:         #1d201b;

    /* Borders */
    --border:          rgba(255, 255, 255, 0.07);
    --border-solid:    #2a2d27;
    --border-hover:    rgba(255, 255, 255, 0.14);

    /* Text */
    --text:            #f1efe6;
    --text-dim:        #c7c5ba;
    --text-secondary:  #8b8b7e;
    --text-muted:      #6b6f63;

    /* Signal-Gelb Akzent (Hybridlog Farb-Prompt 2026-09-01, Variablenname --gold beibehalten) */
    --gold:            #ffd426;
    --gold-light:      #ffdd52;
    --gold-dark:       #e0b300;
    --gold-glow:       rgba(255, 212, 38, 0.15);
    --gold-glow-strong: rgba(255, 212, 38, 0.25);
    --on-gold:         #5a4a00;

    /* Typografie: eine Schrift Source Sans 3 */
    --font-body:    'Source Sans 3', system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    --font-display: 'Source Sans 3', system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;

    /* Feste Typo-Skala und Abstands-Raster (Prompt 6) */
    --fs-label: 12px; --fs-meta: 13px; --fs-ui: 15px; --fs-read: 17px; --fs-card-title: 18px; --fs-lead: 19px;
    --fs-h2: clamp(23px, 2.7vw, 30px); --fs-h1: clamp(34px, 5vw, 54px);
    --space-box-pad: 22px; --space-inner-gap: 12px; --space-grid-gap: 18px; --space-section: 44px;

    /* Spacing */
    --space-1:  4px;
    --space-2:  8px;
    --space-3:  12px;
    --space-4:  16px;
    --space-5:  20px;
    --space-6:  24px;
    --space-8:  32px;
    --space-10: 40px;
    --space-12: 48px;
    --space-16: 64px;
    --space-20: 80px;
    --space-24: 96px;
    --space-32: 128px;

    /* Radius — aligned with hybridlog.de main site */
    --radius-sm:   6px;
    --radius-md:   10px;
    --radius-lg:   16px;
    --radius-full: 9999px;

    /* Canvas */
    --canvas-line-main:     #c9a84c;
    --canvas-line-sec:      rgba(255, 255, 255, 0.10);
    --canvas-dot:           #f0f0f0;
    --canvas-accessible:    rgba(201, 168, 76, 0.45);
    --canvas-inaccessible:  rgba(255, 255, 255, 0.035);

    /* Animation */
    --ease-out:   cubic-bezier(0.16, 1, 0.3, 1);
    --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
    --duration:   300ms;

    /* Layout */
    --max-width:      1200px;
    --max-width-text: 680px;
}

/* ── Base ── */
html {
    scroll-behavior: smooth;
    font-size: 16px;
}

body {
    font-family: var(--font-body);
    background-color: var(--bg);
    color: var(--text-dim);
    line-height: 1.7;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: hidden;
}

a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }

/* ── Global site nav (Home/Produkte/Wissensraum/Über uns) ── */
.global-nav {
    display: flex;
    align-items: center;
    gap: 2px;
    flex-wrap: wrap;
}
.global-nav a {
    font-family: var(--font-body);
    font-size: 13px;
    font-weight: 500;
    color: var(--text-secondary);
    padding: 6px 12px;
    border-radius: var(--radius-full, 999px);
    transition: background var(--duration), color var(--duration);
}
.global-nav a:hover { color: var(--text); background: var(--bg-card-hover); }
.global-nav a.active { color: var(--gold); }
@media (max-width: 720px) {
    .global-nav { display: none; }
}

/* ── Layout ── */
.container {
    max-width: var(--max-width);
    margin: 0 auto;
    padding: 0 var(--space-8);
}

@media (max-width: 768px) {
    .container { padding: 0 var(--space-4); }
}

/* ── Utility ── */
.caption {
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-secondary);
}
.caption--gold { color: var(--gold); }

hr.divider {
    border: none;
    border-top: 1px solid var(--border);
}

.fact-tag {
    display: inline-flex;
    align-items: flex-start;
    gap: var(--space-2);
    font-size: 12px;
    color: var(--text-muted);
    border: 1px solid var(--border-solid);
    border-radius: var(--radius-sm);
    padding: var(--space-2) var(--space-3);
    line-height: 1.5;
}

/* ── Bottom Tab Bar (mobil, persistent) ── */
.bottom-nav { display: none; }

@media (max-width: 720px) {
    body:has(.bottom-nav) { padding-bottom: 60px; }

    .bottom-nav {
        display: flex;
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        z-index: 900;
        background: var(--bg-elevated);
        border-top: 1px solid var(--border);
        padding: 6px 4px calc(6px + env(safe-area-inset-bottom));
    }
    .bottom-nav-item {
        flex: 1 1 0;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 3px;
        padding: 6px 2px;
        color: var(--text-secondary);
        text-decoration: none;
        background: none;
        border: none;
        font-family: var(--font-body);
        font-size: 11px;
        border-radius: var(--radius-sm);
        transition: color var(--duration);
    }
    .bottom-nav-item.active { color: var(--gold); }

    .mehr-overlay { position: fixed; inset: 0; z-index: 950; }
    .mehr-backdrop { position: absolute; inset: 0; background: rgba(0, 0, 0, 0.55); }
    .mehr-panel {
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        background: var(--bg-elevated);
        border-top: 1px solid var(--border);
        border-radius: var(--radius-lg) var(--radius-lg) 0 0;
        padding: var(--space-6) var(--space-6) calc(var(--space-6) + env(safe-area-inset-bottom));
        display: flex;
        flex-direction: column;
        gap: var(--space-2);
    }
    .mehr-panel .eyebrow {
        font-size: 12px;
        font-weight: 600;
        letter-spacing: 0.08em;
        text-transform: uppercase;
        color: var(--gold);
        margin-bottom: var(--space-2);
    }
    .mehr-panel a {
        padding: var(--space-3) var(--space-2);
        color: var(--text-dim);
        font-size: 16px;
        border-bottom: 1px solid var(--border);
    }
    .mehr-close {
        margin-top: var(--space-3);
        padding: var(--space-3);
        background: var(--bg-card);
        border: 1px solid var(--border-solid);
        border-radius: var(--radius-md);
        color: var(--text-secondary);
        font-family: var(--font-body);
        font-size: 14px;
    }
}