/* =====================================================================
   Riedler – base.css
   Design-Tokens, Reset, Typografie, Buttons.
   Reihenfolge: base → layout → blocks → footer → responsive (immer zuletzt!)
   ===================================================================== */

/* --------------- DM Sans (self-hosted, latin, woff2) --------------- */
@font-face {
    font-family: 'DM Sans';
    font-style: normal;
    font-weight: 200;
    font-display: swap;
    src: url('/files/theme/fonts/dm-sans-v17-latin-200.woff2') format('woff2');
}
@font-face {
    font-family: 'DM Sans';
    font-style: normal;
    font-weight: 300;
    font-display: swap;
    src: url('/files/theme/fonts/dm-sans-v17-latin-300.woff2') format('woff2');
}
@font-face {
    font-family: 'DM Sans';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('/files/theme/fonts/dm-sans-v17-latin-regular.woff2') format('woff2');
}
@font-face {
    font-family: 'DM Sans';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url('/files/theme/fonts/dm-sans-v17-latin-500.woff2') format('woff2');
}
@font-face {
    font-family: 'DM Sans';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url('/files/theme/fonts/dm-sans-v17-latin-600.woff2') format('woff2');
}
@font-face {
    font-family: 'DM Sans';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('/files/theme/fonts/dm-sans-v17-latin-700.woff2') format('woff2');
}

:root {
    /* Schrift — DM Sans für Body + Display (geometric sans, Bold-Weights für Hero/Headlines) */
    --font-sans:    'DM Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --font-display: 'DM Sans', system-ui, sans-serif;

    /* Markenfarben (aus Figma-Variablen) */
    --riedler-dark:        #313d47;   /* Primärfarbe Riedler */
    --riedler-mid:         #5a7183;   /* Primärfarbe Riedler hell */
    --riedler-light:       #aebcc5;   /* Blugrey light final */
    --riedler-text:        #1a1a1a;
    --riedler-black:       #000000;
    --riedler-white:       #ffffff;
    --riedler-border:      rgba(174, 188, 197, .35);

    /* Backgrounds */
    --bg-light:    #f5f6f7;
    --bg-dark:     #0c1117;
    --bg-mid:      var(--riedler-dark);

    /* Text */
    --text-primary:   #1a1a1a;
    --text-secondary: #4a5560;
    --text-on-dark:   #ffffff;
    --text-on-dark-mute: #aebcc5;

    /* Layout – fluid */
    --container:     1480px;
    --container-pad: clamp(20px, 3vw, 60px);
    --section-pad-y: clamp(36px, 4vw, 80px);
    --header-h:      88px;

    /* Motion */
    --ease-out: cubic-bezier(.2,.8,.2,1);
    --dur:      .25s;

    /* Type scale */
    --fs-display:   clamp(3.5rem, 8.5vw, 9.5rem);
    --fs-h1:        clamp(2.75rem, 5.9vw, 5.5rem);
    --fs-h2:        clamp(2rem, 4.2vw, 3.5rem);
    --fs-h3:        clamp(1.5rem, 2.4vw, 2rem);
    --fs-body:      clamp(1rem, 1.1vw, 1.125rem);
    --fs-body-lg:   1.5rem;          /* 24 px Fließtext, siehe Briefing §15 */
    --fs-small:     .9375rem;
    --fs-eyebrow:   .8125rem;
}

/* --------------- Reset --------------- */

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

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth;}

body {
    margin: 0;
    font-family: var(--font-sans);
    font-size: var(--fs-body);
    line-height: 1.6;
    color: var(--text-primary);
    background:
        radial-gradient(1200px 900px at 0% 0%, rgba(115,138,153,.28), transparent 65%),
        radial-gradient(900px 600px at 70% 40%, rgba(115,138,153,.10), transparent 60%),
        linear-gradient(135deg, #1a2128 0%, #0b0c0e 55%, #0b0c0e 100%);
    background-attachment: fixed;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

/* --------------- Keyvisual Canvas (fixed full-viewport background) --------------- */
.keyvisual {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    display: block;
    pointer-events: none;
}

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

a {
    color: inherit;
    text-decoration: none;
    transition: color var(--dur) var(--ease-out), opacity var(--dur) var(--ease-out);
}
a:hover { opacity: .8; }

h1, h2, h3, h4, h5, h6 {
    margin: 0 0 .5em;
    font-weight: 600;
    line-height: 1.1;
    letter-spacing: -.01em;
}

p { margin: 0 0 1em; }
ul, ol { margin: 0 0 1em; padding-left: 1.25em; }

/* --------------- Focus --------------- */

:focus { outline: none; }
:focus-visible {
    outline: 2px solid var(--riedler-light);
    outline-offset: 3px;
}

/* --------------- Typografie-Klassen --------------- */

.eyebrow {
    display: inline-block;
    font-family: var(--font-sans);
    font-size: var(--fs-eyebrow);
    font-weight: 500;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--riedler-mid);
    margin: 0 0 1.25em;
}
.eyebrow--on-dark { color: var(--riedler-light); }

.display-h1 {
    font-family: var(--font-display);
    font-style: normal;
    font-weight: 300;
    font-size: var(--fs-h1);
    line-height: 1.05;
    letter-spacing: -.02em;
    color: var(--text-primary);
}

.section-headline {
    font-family: var(--font-display);
    font-style: normal;
    font-weight: 300;
    font-size: var(--fs-h2);
    line-height: 1.08;
    color: var(--text-primary);
}
.section-headline em {
    font-family: var(--font-display);
    font-style: normal;
    font-weight: 300;
    display: block;
    letter-spacing: -.02em;
    color: var(--riedler-mid);
}

.lead {
    font-size: var(--fs-body-lg);
    line-height: 1.55;
    color: var(--text-secondary);
    max-width: 56ch;
}

/* --------------- Buttons --------------- */

/* Schlichter Button im Stil der Section-CTAs (.kamine__cta) – ohne Pfeil-::after */
.btn {
    display: inline-block;
    padding: 18px 40px;
    border: 1px solid var(--riedler-text);
    background: transparent;
    color: var(--riedler-text);
    font-family: var(--font-sans);
    font-size: .9375rem;
    font-weight: 500;
    letter-spacing: .14em;
    text-transform: uppercase;
    text-decoration: none;
    cursor: pointer;
    transition: background var(--dur) var(--ease-out), color var(--dur) var(--ease-out);
}
.btn:hover { background: var(--riedler-text); color: var(--riedler-white); }

.btn--on-dark {
    border-color: var(--riedler-light);
    color: var(--riedler-light);
}
.btn--on-dark:hover {
    background: var(--riedler-light);
    color: var(--riedler-dark);
}

.btn--ghost {
    border: 0;
    padding-inline: 0;
    background: transparent;
    color: var(--riedler-dark);
}
.btn--ghost:hover { background: transparent; color: var(--riedler-mid); }

/* --------------- Utility --------------- */

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

/* Text-Markierung / Selection */
::selection { background: var(--riedler-dark); color: var(--riedler-white); }
::-moz-selection { background: var(--riedler-dark); color: var(--riedler-white); }