/* Base Fonts CSS - Alle Schriftarten als CSS Custom Properties */

:root {
    /* Font Families - Gemäß Regel 011-ui-design-briefing.mdc Regel 007: Font auf der kompletten Website muss einheitlich sein */
    --font-family-primary: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --font-family-heading: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --font-family-mono: "SF Mono", Monaco, "Cascadia Code", "Roboto Mono", Consolas, "Courier New", monospace;
    
    /* Font Sizes */
    --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-size-5xl: 3rem;      /* 48px */
    --font-size-6xl: 3.75rem;   /* 60px */
    
    /* Font Weights */
    --font-weight-light: 300;
    --font-weight-normal: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;
    --font-weight-extrabold: 800;
    
    /* Line Heights */
    --line-height-tight: 1.25;
    --line-height-snug: 1.375;
    --line-height-normal: 1.5;
    --line-height-relaxed: 1.625;
    --line-height-loose: 2;
}

/* Gemäß Regel 032: Es ist verboten allgemeine CSS Definitionen für a,div,body,html etc. */
/* Stattdessen müssen saubere CSS-Klassen in den jeweiligen html-Tags verwendet werden */
/* Die einzige Datei die dies darf ist die fonts.css - daher sind diese Definitionen hier erlaubt */

/* Smooth Scrolling für Anker-Links (Sales Page Navigation) */
html {
    scroll-behavior: smooth;
    scroll-padding-top: 100px; /* Offset für Fixed Header */
}

/* Base Typography Styles - Erlaubt in fonts.css gemäß Regel 032 */
/* Dark Mode Body - Gemäß briefing/design.md Regel 002: Dark Mode ist Standard */
body {
    font-family: var(--font-family-primary);
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-normal);
    line-height: var(--line-height-normal);
    color: var(--color-text-primary);
    background: var(--color-background-primary);
    overflow-x: hidden; /* Verhindert horizontales Scrollen auf Mobile */
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-family-heading);
    font-weight: var(--font-weight-semibold);
    line-height: var(--line-height-tight);
    color: var(--color-text-primary);
    margin: 0;
}

h1 {
    font-size: var(--font-size-4xl);
    font-weight: var(--font-weight-bold);
}

h2 {
    font-size: var(--font-size-3xl);
    font-weight: var(--font-weight-semibold);
}

h3 {
    font-size: var(--font-size-2xl);
    font-weight: var(--font-weight-semibold);
}

h4 {
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-medium);
}

h5 {
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-medium);
}

h6 {
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-medium);
}

p {
    font-family: var(--font-family-primary);
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-normal);
    line-height: var(--line-height-normal);
    color: var(--color-text-primary);
    margin: 0;
}

a {
    font-family: var(--font-family-primary);
    font-size: inherit;
    font-weight: inherit;
    color: var(--color-primary);
    text-decoration: none;
}

a:hover {
    color: var(--color-primary-dark);
    text-decoration: underline;
}

/* Buttons als Links sollen nie unterstrichen werden */
/* Gemäß Regel 014: Nur widget-button-standard und widget-button-delete sind erlaubt */
a.widget-button-standard,
a.widget-button-delete,
a.widget-button-standard:hover,
a.widget-button-delete:hover,
a.widget-button-standard:focus,
a.widget-button-delete:focus,
a.widget-button-standard:active,
a.widget-button-delete:active,
a.widget-button-standard:visited,
a.widget-button-delete:visited {
    text-decoration: none !important;
}

button, input, select, textarea {
    font-family: var(--font-family-primary);
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-normal);
    line-height: var(--line-height-normal);
}

code, pre {
    font-family: var(--font-family-mono);
    font-size: var(--font-size-sm);
}

/* Responsive Typography */
/* Großer Desktop/Widescreen (min-width: 1440px) */
@media (min-width: 1440px) {
    :root {
        --font-size-4xl: 2.5rem;      /* 40px */
        --font-size-3xl: 2rem;        /* 32px */
        --font-size-2xl: 1.625rem;    /* 26px */
    }
}

/* Kleiner Desktop/13-Zoll (1024px–1366px) */
@media (min-width: 1024px) and (max-width: 1366px) {
    :root {
        --font-size-4xl: 2.25rem;     /* 36px */
        --font-size-3xl: 1.875rem;    /* 30px */
        --font-size-2xl: 1.5rem;      /* 24px */
    }
}

/* Tablet/iPad (600px–768px) */
@media (min-width: 600px) and (max-width: 768px) {
    :root {
        --font-size-4xl: 2rem;        /* 32px */
        --font-size-3xl: 1.625rem;    /* 26px */
        --font-size-2xl: 1.375rem;    /* 22px */
    }
}

@media (max-width: 768px) {
    :root {
        --font-size-4xl: 2rem;      /* 32px */
        --font-size-3xl: 1.5rem;    /* 24px */
        --font-size-2xl: 1.25rem;   /* 20px */
    }
}

@media (max-width: 576px) {
    :root {
        --font-size-4xl: 1.75rem;   /* 28px */
        --font-size-3xl: 1.375rem;  /* 22px */
        --font-size-2xl: 1.125rem;  /* 18px */
    }
}