/* ==========================================================================
   CSS Variables & Base Styles - Ikonenschmiede
   (P1-Cleanup 2026-05-04: Welle-1-Token-Restbestand entfernt — Mona-Sans-
   und Plus-Jakarta-Sans-Dummy-@font-face raus, --font auf Switzer migriert,
   --font-size-base von 15px auf 16px gehoben. Switzer + Cabinet kommen via
   tokens.css aus Brand-System.)
   ========================================================================== */

:root {
    /* Colors */
    --bg: #FFFFFF;
    --bg-off: #FAFAFA;
    --text: #000000;
    --text-muted: #1A1A1A;
    --accent: #000000;
    --border: #E8E8E8;
    --success: #10B981;
    --warning: #F59E0B;
    --error: #EF4444;
    
    /* Typography */
    --font: 'Switzer', -apple-system, BlinkMacSystemFont, sans-serif;
    --font-size-base: 16px;
    --line-height: 1.6;
    
    /* Spacing */
    --spacing-xs: 8px;
    --spacing-sm: 16px;
    --spacing-md: 24px;
    --spacing-lg: 40px;
    --spacing-xl: 80px;
    
    /* Layout */
    --max-width: 1400px;
    --header-height: 80px;

    /* Neues Design-System (Frontpage Redesign 2026-04) */
    --ik-black:          #0A0A0A;
    --ik-white:          #FAFAFA;
    --ik-gray:           #F6F5F3;
    --ik-gray-border:    #E8E6E1;
    --ik-text-secondary: #555555;
    --ik-text-tertiary:  #999999;
    --ik-red:            #B5453A;
    --ik-red-dark:       #6B251F;
    --ik-red-darkest:    #3D1714;

    /* Metallic-Gradient Venezianisch x Burgund (2026-04-20) */
    --ik-red-metal-hi:   #B5453A;
    --ik-red-metal-core: #9A3231;
    --ik-red-metal-deep: #7A1420;
    --ik-red-metal:      linear-gradient(135deg, #B5453A 0%, #B5453A 35%, #9A3231 75%, #7A1420 100%);
    --ik-red-metal-hover:linear-gradient(135deg, #9A3231 0%, #9A3231 35%, #7A1420 75%, #51000B 100%);

    /* Dark warm surface */
    --ik-dark-warm:      #3D1714;

    --font-display:      'Cabinet Grotesk', 'Inter', system-ui, sans-serif;
    --font-body:         'Switzer', 'Inter', system-ui, sans-serif;
    --ease:              cubic-bezier(0.4, 0.0, 0.2, 1);
}

/* Reset */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
    font-family: var(--font-body, var(--font)) !important;
    font-size: var(--font-size-base);
    font-weight: 400 !important;
    line-height: var(--line-height);
    color: var(--text);
    background: var(--bg);
}

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

/* ═══════ Global 1400px Override ═══════ */
.page-header,
.kartei-section,
.kartei-grid,
.werke-section,
.werke-grid,
.header-inner,
.content,
.founder-section .founder-inner,
.links-section {
    max-width: 1400px !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

/* Override Ollie theme content-size */
:root {
    --wp--style--global--content-size: 1400px !important;
    --wp--style--global--wide-size: 1400px !important;
}
body .is-layout-constrained > :where(:not(.alignleft):not(.alignright):not(.alignfull)) {
    max-width: 1400px !important;
}

/* ==========================================================================
   Globale Button-Klassen (Button-Sweep 2026-04-22)
   Zwei semantische Kategorien nach Niko-Feedback:
   — Interactive: interne User-Actions in eingeloggten Bereichen (schwarz mit Hover-Akzent)
   — Conversion: öffentliche Besucher-CTAs (Venetian Red Metallic)
   Dashboards laden diese Klassen via eigenem <style>-Block (kein wp_head).
   Öffentliche Seiten: via wp_enqueue (base.css Dependency).
   ========================================================================== */

/* Interactive: schwarz, Hover wärmt auf Venetian-Red-Akzent */
.btn-primary-interactive {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 10px 20px;
    background: #0A0A0A;
    color: #FFFFFF;
    border: 1px solid #0A0A0A;
    border-radius: 8px;
    font-family: var(--font-body, 'Switzer', 'Inter', system-ui, sans-serif);
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 0.02em;
    line-height: 1;
    text-decoration: none;
    cursor: pointer;
    transition: background 280ms cubic-bezier(0.4,0,0.2,1),
                border-color 280ms cubic-bezier(0.4,0,0.2,1),
                transform 120ms cubic-bezier(0.4,0,0.2,1);
    white-space: nowrap;
}
.btn-primary-interactive:hover,
.btn-primary-interactive:focus-visible {
    background: linear-gradient(135deg, #0A0A0A 0%, #2D1A18 60%, #B5453A 100%);
    border-color: #7A1420;
    color: #FFFFFF;
}
.btn-primary-interactive:active { transform: translateY(1px); }

/* Conversion: Venetian Red Metallic für öffentliche CTAs */
.btn-primary-conversion {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 10px 20px;
    background: var(--ik-red-metal, linear-gradient(135deg, #B5453A 0%, #B5453A 35%, #9A3231 75%, #7A1420 100%));
    color: #FFFFFF;
    border: 1px solid #7A1420;
    border-radius: 8px;
    font-family: var(--font-body, 'Switzer', 'Inter', system-ui, sans-serif);
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 0.02em;
    line-height: 1;
    text-decoration: none;
    cursor: pointer;
    transition: background 280ms cubic-bezier(0.4,0,0.2,1),
                border-color 280ms cubic-bezier(0.4,0,0.2,1),
                transform 120ms cubic-bezier(0.4,0,0.2,1);
    white-space: nowrap;
}
.btn-primary-conversion:hover,
.btn-primary-conversion:focus-visible {
    background: var(--ik-red-metal-hover, linear-gradient(135deg, #9A3231 0%, #9A3231 35%, #7A1420 75%, #51000B 100%));
    border-color: #51000B;
    color: #FFFFFF;
}
.btn-primary-conversion:active { transform: translateY(1px); }