/*
Theme Name:  Eichmeister Dashboard
Theme URI:   https://eichmeister.com
Description: Kunden-Dashboard für die Eichmeister Kreativagentur. Zeigt Kampagnen-Metriken (Spend, Reach, Klicks, CPC) pro Kunde – Dark Mode, Mobile-First.
Version:     1.1.0
Author:      Eichmeister Kreativagentur
Author URI:  https://eichmeister.com
Text Domain: eichmeister-dashboard
Domain Path: /languages
Requires at least: 6.4
Requires PHP: 8.1
License:     Proprietary
*/

/* ============================================================
   @font-face – Sequel Sans (Body-Schnitt)
   Alle Dateien liegen in assets/fonts/webFonts/<Schnitt>/font.woff2
   7 Gewichtsstufen + Oblique-Varianten eingebunden.
   ============================================================ */

/* Light 300 */
@font-face {
    font-family: 'Sequel Sans';
    src: url('assets/fonts/webFonts/SequelSans-LightBody/font_light.woff2') format('woff2'),
         url('assets/fonts/webFonts/SequelSans-LightBody/font_light.woff') format('woff');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Sequel Sans';
    src: url('assets/fonts/webFonts/SequelSans-LightOblBody/font.woff2') format('woff2'),
         url('assets/fonts/webFonts/SequelSans-LightOblBody/font.woff') format('woff');
    font-weight: 300;
    font-style: oblique;
    font-display: swap;
}

/* Book 350 – als 350 deklariert, greift zwischen Light und Regular */
@font-face {
    font-family: 'Sequel Sans';
    src: url('assets/fonts/webFonts/SequelSans-BookBody/font_book.woff2') format('woff2'),
         url('assets/fonts/webFonts/SequelSans-BookBody/font_book.woff') format('woff');
    font-weight: 350;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Sequel Sans';
    src: url('assets/fonts/webFonts/SequelSans-BookOblBody/font.woff2') format('woff2'),
         url('assets/fonts/webFonts/SequelSans-BookOblBody/font.woff') format('woff');
    font-weight: 350;
    font-style: oblique;
    font-display: swap;
}

/* Roman / Regular 400 */
@font-face {
    font-family: 'Sequel Sans';
    src: url('assets/fonts/webFonts/SequelSans-RomanBody/font.woff2') format('woff2'),
         url('assets/fonts/webFonts/SequelSans-RomanBody/font.woff') format('woff');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Sequel Sans';
    src: url('assets/fonts/webFonts/SequelSans-ObliqueBody/font.woff2') format('woff2'),
         url('assets/fonts/webFonts/SequelSans-ObliqueBody/font.woff') format('woff');
    font-weight: 400;
    font-style: oblique;
    font-display: swap;
}

/* Medium 500 */
@font-face {
    font-family: 'Sequel Sans';
    src: url('assets/fonts/webFonts/SequelSans-MediumBody/font_medium.woff2') format('woff2'),
         url('assets/fonts/webFonts/SequelSans-MediumBody/font_medium.woff') format('woff');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Sequel Sans';
    src: url('assets/fonts/webFonts/SequelSans-MediumOblBody/font.woff2') format('woff2'),
         url('assets/fonts/webFonts/SequelSans-MediumOblBody/font.woff') format('woff');
    font-weight: 500;
    font-style: oblique;
    font-display: swap;
}

/* SemiBold 600 */
@font-face {
    font-family: 'Sequel Sans';
    src: url('assets/fonts/webFonts/SequelSans-SemiBoldBody/font_semibold.woff2') format('woff2'),
         url('assets/fonts/webFonts/SequelSans-SemiBoldBody/font_semibold.woff') format('woff');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Sequel Sans';
    src: url('assets/fonts/webFonts/SequelSans-SemiBoldOblBody/font.woff2') format('woff2'),
         url('assets/fonts/webFonts/SequelSans-SemiBoldOblBody/font.woff') format('woff');
    font-weight: 600;
    font-style: oblique;
    font-display: swap;
}

/* Bold 700 */
@font-face {
    font-family: 'Sequel Sans';
    src: url('assets/fonts/webFonts/SequelSans-BoldBody/font.woff2') format('woff2'),
         url('assets/fonts/webFonts/SequelSans-BoldBody/font.woff') format('woff');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Sequel Sans';
    src: url('assets/fonts/webFonts/SequelSans-BoldOblBody/font.woff2') format('woff2'),
         url('assets/fonts/webFonts/SequelSans-BoldOblBody/font.woff') format('woff');
    font-weight: 700;
    font-style: oblique;
    font-display: swap;
}

/* Heavy 800 */
@font-face {
    font-family: 'Sequel Sans';
    src: url('assets/fonts/webFonts/SequelSans-HeavyBody/font.woff2') format('woff2'),
         url('assets/fonts/webFonts/SequelSans-HeavyBody/font.woff') format('woff');
    font-weight: 800;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Sequel Sans';
    src: url('assets/fonts/webFonts/SequelSans-HeavyOblBody/font.woff2') format('woff2'),
         url('assets/fonts/webFonts/SequelSans-HeavyOblBody/font.woff') format('woff');
    font-weight: 800;
    font-style: oblique;
    font-display: swap;
}

/* ============================================================
   Design Tokens – CSS Custom Properties
   ============================================================ */
:root {
    /* --- Hintergrund-Ebenen --- */
    --color-bg-base:      #141414;
    --color-bg-surface:   #1e1e1e;
    --color-bg-elevated:  #282828;
    --color-bg-highlight: #333333;

    /* --- Ränder --- */
    --color-border:       #2d2d2d;
    --color-border-light: #3a3a3a;

    /* --- Text --- */
    --color-text-primary:   #f5f5f5;
    --color-text-secondary: #a3a3a3;
    --color-text-muted:     #666666;

    /* --- Akzentfarbe (CI) – Fallback, pro Kunde überschrieben --- */
    --color-ci:            #6366f1;
    --color-ci-rgb:        99, 102, 241;
    --color-ci-muted:      rgba(var(--color-ci-rgb), 0.12);
    --color-ci-border:     rgba(var(--color-ci-rgb), 0.35);

    /* --- Status-Farben --- */
    --color-success:       #22c55e;
    --color-success-muted: rgba(34, 197, 94, 0.12);
    --color-warning:       #f59e0b;
    --color-warning-muted: rgba(245, 158, 11, 0.12);
    --color-danger:        #ef4444;
    --color-danger-muted:  rgba(239, 68, 68, 0.12);

    /* --- Typografie --- */
    --font-sans: 'Sequel Sans', system-ui, -apple-system, 'Segoe UI', Helvetica, Arial, sans-serif;
    --font-mono: 'Fira Code', 'Cascadia Code', 'Courier New', monospace;

    --font-size-xs:   0.75rem;     /* 12px */
    --font-size-sm:   0.875rem;    /* 14px */
    --font-size-base: 1rem;        /* 16px */
    --font-size-lg:   1.125rem;    /* 18px */
    --font-size-xl:   1.25rem;     /* 20px */
    --font-size-2xl:  1.5rem;      /* 24px */
    --font-size-3xl:  1.875rem;    /* 30px */
    --font-size-4xl:  2.25rem;     /* 36px */

    --font-weight-normal:   400;
    --font-weight-medium:   500;
    --font-weight-semibold: 600;
    --font-weight-bold:     700;

    --line-height-tight:  1.2;
    --line-height-normal: 1.5;
    --line-height-loose:  1.75;

    /* --- Abstände (8px-Raster) --- */
    --space-1:  0.25rem;   /* 4px  */
    --space-2:  0.5rem;    /* 8px  */
    --space-3:  0.75rem;   /* 12px */
    --space-4:  1rem;      /* 16px */
    --space-5:  1.25rem;   /* 20px */
    --space-6:  1.5rem;    /* 24px */
    --space-8:  2rem;      /* 32px */
    --space-10: 2.5rem;    /* 40px */
    --space-12: 3rem;      /* 48px */
    --space-16: 4rem;      /* 64px */
    --space-20: 5rem;      /* 80px */

    /* --- Radien --- */
    --radius-sm: 0.375rem;
    --radius-md: 0.625rem;
    --radius-lg: 1rem;
    --radius-xl: 1.5rem;

    /* --- Schatten --- */
    --shadow-sm:  0 1px 3px rgba(0, 0, 0, 0.5);
    --shadow-md:  0 4px 16px rgba(0, 0, 0, 0.55);
    --shadow-lg:  0 8px 32px rgba(0, 0, 0, 0.65);
    --shadow-glow: 0 0 24px rgba(var(--color-ci-rgb), 0.2);

    /* --- Übergänge --- */
    --transition-fast:   150ms ease;
    --transition-normal: 250ms ease;
    --transition-slow:   400ms ease;

    /* --- Layout --- */
    --container-max: 1280px;
    --header-height: 64px;
}

/* ============================================================
   Reset & Basis
   ============================================================ */
*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    font-size: 16px;
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
    height: 100%;
}

body {
    font-family: var(--font-sans);
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-normal);
    line-height: var(--line-height-normal);
    color: var(--color-text-primary);
    background-color: var(--color-bg-base);
    min-height: 100%;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

img,
svg {
    display: block;
    max-width: 100%;
}

ul,
ol {
    list-style: none;
}

button,
input,
select,
textarea {
    font: inherit;
}

/* ============================================================
   Barrierefreiheit – Fokus & Skip-Link
   ============================================================ */
:focus-visible {
    outline: 2px solid var(--color-ci);
    outline-offset: 3px;
    border-radius: var(--radius-sm);
}

.skip-to-content {
    position: absolute;
    top: -100%;
    left: var(--space-4);
    z-index: 9999;
    padding: var(--space-3) var(--space-6);
    background-color: var(--color-ci);
    color: #fff;
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    border-radius: var(--radius-md);
    text-decoration: none;
    transition: top var(--transition-fast);
    white-space: nowrap;
}

.skip-to-content:focus {
    top: var(--space-4);
}

/* ============================================================
   Typografie – Basis
   ============================================================ */
h1,
h2,
h3,
h4,
h5,
h6 {
    font-weight: var(--font-weight-semibold);
    line-height: var(--line-height-tight);
    color: var(--color-text-primary);
}

h1 { font-size: var(--font-size-3xl); }
h2 { font-size: var(--font-size-2xl); }
h3 { font-size: var(--font-size-xl); }
h4 { font-size: var(--font-size-lg); }
h5 { font-size: var(--font-size-base); }
h6 { font-size: var(--font-size-sm); }

p {
    color: var(--color-text-secondary);
    line-height: var(--line-height-loose);
}

a {
    color: var(--color-ci);
    text-decoration: none;
    transition: opacity var(--transition-fast);
}

a:hover {
    opacity: 0.78;
}

/* ============================================================
   Layout – Site-Wrapper
   ============================================================ */
.site-wrapper {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

.site-header {
    height: var(--header-height);
    display: flex;
    align-items: center;
    padding-inline: var(--space-6);
    background-color: var(--color-bg-surface);
    border-bottom: 1px solid var(--color-border);
    position: sticky;
    top: 0;
    z-index: 100;
}

.site-header__brand {
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-primary);
    letter-spacing: 0.03em;
}

.site-main {
    flex: 1;
    padding: var(--space-8) var(--space-4);
}

/* Dashboard bringt eigenes Layout – kein äußeres Padding */
.site-main:has(.dashboard) {
    padding: 0;
}

@media (min-width: 768px) {
    .site-main {
        padding: var(--space-10) var(--space-8);
    }

    .site-main:has(.dashboard) {
        padding: 0;
    }
}

@media (min-width: 1024px) {
    .site-main {
        padding: var(--space-12) var(--space-10);
    }

    .site-main:has(.dashboard) {
        padding: 0;
    }
}

.site-footer {
    padding: var(--space-6) var(--space-6);
    background-color: var(--color-bg-surface);
    border-top: 1px solid var(--color-border);
    text-align: center;
}

.site-footer__copy {
    font-size: var(--font-size-xs);
    color: var(--color-text-muted);
}

.container {
    width: 100%;
    max-width: var(--container-max);
    margin-inline: auto;
    padding-inline: var(--space-4); /* Mobile Gutter */
}

@media (min-width: 768px) {
    .container {
        padding-inline: var(--space-8); /* Desktop/Tablet Gutter */
    }
}

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

/* ============================================================
   Animationen – respektiert prefers-reduced-motion
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}