/* ============================================================================
   KRANZ INNOVATIVE RÄUME — Design Tokens & Foundation
   "Warm Noir Editorial" — Cormorant Garamond × Inter × DM Mono
   ============================================================================ */

:root {
    /* ---- Color: warm neutral ramp ---- */
    --ink:        #141414;   /* neutral near-black — primary text & dark sections */
    --noir:       #0B0B0B;   /* deepest — cinematic full-bleed sections           */
    --char:       #1E1E1E;   /* charcoal surface on dark                          */
    --bone:       #F5F5F4;   /* cool near-white — default background / on-dark text */
    --surface:    #FFFFFF;   /* lifted surface / cards                            */
    --surface-2:  #ECECEA;   /* sunken surface                                    */
    --line:       #E4E4E2;   /* hairline on light                                 */
    --line-dark:  rgba(245,245,244,.14); /* hairline on dark                      */

    --text:       #131313;
    --text-soft:  #474747;
    --muted:      #6B6B6B;   /* tertiary / captions — WCAG AA (~4.8:1 on bg)      */
    --muted-dark: #9D9D9B;   /* muted on dark                                     */

    /* ---- Accent: cold-aligned (kranz-buero.de DNA). Brass survives only as a
       whisper on micro-marks (rails, progress fills, ✦, focus ring, monogram);
       the prominent label/emphasis tones are neutral grey so the canvas reads
       monochrome. ---- */
    --brass:      #9C8862;   /* muted brass — micro accents only                */
    --brass-soft: #8C8C8A;   /* neutral grey — eyebrows / labels / italics      */
    --brass-deep: #5A5A5A;   /* neutral dark grey — small labels & links (AA)   */
    --brass-glow: rgba(20,20,20,.16);

    /* ---- White-label accent alias (CodLab standard) ----
       Components read --accent; a tenant overrides --brand-accent at runtime. */
    --accent:      var(--brand-accent, #A8895C);
    --accent-deep: var(--brand-accent-deep, #7A5E36);

    /* ---- Semantic status tokens (single source for success/danger/…) ---- */
    --success: #2F6B4A; --success-bg: #E7F0E7;
    --danger:  #9B3F2C; --danger-bg:  #FBEAE7;
    --warning: #7A5E36; --warning-bg: rgba(168,137,92,.16);
    --info:    #3B5563; --info-bg:    #E7EDF0;

    /* ---- Typography ---- */
    --serif: 'Cormorant Garamond', 'Times New Roman', Georgia, serif;
    --sans:  'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
    --mono:  'DM Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;

    /* fluid type scale */
    --t-eyebrow: clamp(.68rem, .64rem + .2vw, .78rem);
    --t-body:    clamp(1rem, .97rem + .15vw, 1.075rem);
    --t-lead:    clamp(1.15rem, 1.05rem + .55vw, 1.5rem);
    --t-h4:      clamp(1.1rem, 1rem + .6vw, 1.45rem);
    --t-h3:      clamp(1.6rem, 1.25rem + 1.6vw, 2.4rem);
    --t-h2:      clamp(2.2rem, 1.5rem + 3.4vw, 4.25rem);
    --t-h1:      clamp(2.9rem, 1.6rem + 6vw, 7rem);
    --t-mega:    clamp(3.6rem, 1.2rem + 11vw, 12rem);

    /* ---- Spacing scale (4px base) ---- */
    --s1: .25rem;  --s2: .5rem;  --s3: .75rem; --s4: 1rem;  --s5: 1.5rem;
    --s6: 2rem;    --s7: 3rem;   --s8: 4rem;   --s9: 6rem;  --s10: 8rem;
    --section: clamp(4.5rem, 3rem + 7vw, 11rem);   /* vertical section rhythm  */
    --gutter:  clamp(1.25rem, .6rem + 2.6vw, 3.5rem);

    /* ---- Layout ---- */
    --content: 1320px;
    --measure: 64ch;
    --nav-h: 84px;

    /* ---- Radius / depth ---- */
    --r-sm: 3px; --r-md: 6px; --r-lg: 12px; --r-xl: 20px;
    --shadow-sm: 0 1px 2px rgba(22,20,18,.05), 0 4px 14px rgba(22,20,18,.05);
    --shadow-md: 0 10px 30px -12px rgba(22,20,18,.22);
    --shadow-lg: 0 40px 80px -28px rgba(22,20,18,.42);

    /* ---- Motion ---- */
    --ease: cubic-bezier(.22,.61,.36,1);
    --ease-out: cubic-bezier(.16,1,.3,1);
    --dur: .55s;
    --dur-fast: .25s;

    --z-nav: 200; --z-overlay: 300; --z-splash: 400;
}

/* ============================ Reset ============================ */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
    font-family: var(--sans);
    font-size: var(--t-body);
    line-height: 1.6;
    color: var(--text);
    background: var(--bone);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    font-feature-settings: "kern" 1, "liga" 1;
    overflow-x: hidden;
}

img, picture, video, svg { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: none; cursor: pointer; }
ul, ol { list-style: none; padding: 0; }
::selection { background: var(--ink); color: var(--bone); }

:focus-visible { outline: 2px solid var(--brass); outline-offset: 3px; border-radius: 2px; }

/* ============================ Typography ============================ */
.serif { font-family: var(--serif); }
.display {
    font-family: var(--serif);
    font-weight: 500;
    line-height: 1.04;
    letter-spacing: -.012em;
    font-feature-settings: "kern" 1, "liga" 1, "swsh" 1;
}
.display em, .accent-italic { font-style: italic; font-weight: 500; color: var(--brass-deep); }

h1, .h1 { font-family: var(--serif); font-weight: 500; font-size: var(--t-h1); line-height: 1.02; letter-spacing: -.015em; }
h2, .h2 { font-family: var(--serif); font-weight: 500; font-size: var(--t-h2); line-height: 1.05; letter-spacing: -.012em; }
h3, .h3 { font-family: var(--serif); font-weight: 500; font-size: var(--t-h3); line-height: 1.1; letter-spacing: -.01em; }
h4, .h4 { font-family: var(--sans); font-weight: 600; font-size: var(--t-h4); line-height: 1.25; letter-spacing: -.01em; }

.lead { font-size: var(--t-lead); line-height: 1.5; color: var(--text-soft); font-weight: 300; }
.body-prose { max-width: var(--measure); color: var(--text-soft); }
.body-prose p + p { margin-top: var(--s4); }

/* Eyebrow — DM Mono technical label */
.eyebrow {
    font-family: var(--mono);
    font-size: var(--t-eyebrow);
    font-weight: 400;
    letter-spacing: .26em;
    text-transform: uppercase;
    color: var(--brass-deep);
    display: inline-flex;
    align-items: center;
    gap: .75rem;
}
.eyebrow::before {
    content: "";
    width: clamp(20px, 3vw, 42px);
    height: 1px;
    background: currentColor;
    opacity: .6;
}
.eyebrow.no-rule::before { display: none; }
.on-dark .eyebrow, .eyebrow.on-dark { color: var(--brass-soft); }

.index-num { font-family: var(--mono); font-size: var(--t-eyebrow); letter-spacing: .12em; color: var(--brass-deep); }

/* ============================ Layout primitives ============================ */
.wrap { width: min(100% - calc(var(--gutter) * 2), var(--content)); margin-inline: auto; }
.wrap-narrow { width: min(100% - calc(var(--gutter) * 2), 900px); margin-inline: auto; }
.section { padding-block: var(--section); position: relative; }
.section-sm { padding-block: clamp(3rem, 2rem + 4vw, 6rem); }
.dark { background: var(--noir); color: var(--bone); }
.dark .lead, .dark .body-prose { color: var(--muted-dark); }
.dark h1, .dark h2, .dark h3 { color: var(--bone); }
.ink { background: var(--ink); color: var(--bone); }
.tone { background: var(--surface-2); }

.grid { display: grid; gap: var(--gutter); }
.cols-2 { grid-template-columns: repeat(2, 1fr); }
.cols-3 { grid-template-columns: repeat(3, 1fr); }
.cols-12 { grid-template-columns: repeat(12, 1fr); }
@media (max-width: 900px) { .cols-2, .cols-3 { grid-template-columns: 1fr; } }

.stack > * + * { margin-top: var(--s5); }
.hairline { height: 1px; background: var(--line); border: 0; }
.dark .hairline { background: var(--line-dark); }

/* ============================ Buttons ============================ */
.btn {
    --btn-fg: var(--bone); --btn-bg: var(--ink); --btn-bd: var(--ink);
    display: inline-flex; align-items: center; justify-content: center; gap: .7rem;
    font-family: var(--sans); font-weight: 500; font-size: .9rem; letter-spacing: .02em;
    padding: 1.05rem 1.9rem; border: 1px solid var(--btn-bd); background: var(--btn-bg);
    color: var(--btn-fg); border-radius: 999px; cursor: pointer;
    transition: transform var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease),
                color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease),
                box-shadow var(--dur-fast) var(--ease);
    will-change: transform; min-height: 52px;
}
.btn .ar { transition: transform var(--dur-fast) var(--ease-out); }
.btn:hover { transform: translateY(-2px); box-shadow: 0 14px 30px -12px var(--brass-glow); }
.btn:hover .ar { transform: translateX(4px); }
.btn:active { transform: translateY(0); }

.btn-ghost { --btn-bg: transparent; --btn-fg: var(--ink); --btn-bd: var(--ink); }
.btn-ghost:hover { --btn-bg: var(--ink); --btn-fg: var(--bone); }
.on-dark .btn-ghost, .btn-ghost.on-dark { --btn-fg: var(--bone); --btn-bd: rgba(244,240,233,.5); }
.on-dark .btn-ghost:hover, .btn-ghost.on-dark:hover { --btn-bg: var(--bone); --btn-fg: var(--noir); --btn-bd: var(--bone); }
.btn-lg { padding: 1.2rem 2.4rem; font-size: .95rem; min-height: 58px; }

/* Primary buttons on dark surfaces invert to a light pill (high contrast on
   the cinematic dark sections, like kranz-buero.de's inverted-on-dark CTAs). */
.dark .btn:not(.btn-ghost),
.on-dark .btn:not(.btn-ghost),
.hero .btn:not(.btn-ghost),
.folioh__card--cta .btn:not(.btn-ghost) {
    --btn-bg: var(--bone); --btn-fg: var(--noir); --btn-bd: var(--bone);
}

/* Text link with animated underline */
.link-u { position: relative; font-weight: 500; display: inline-flex; align-items: center; gap: .5rem; padding-bottom: 3px; }
.link-u::after {
    content: ""; position: absolute; left: 0; bottom: 0; width: 100%; height: 1px;
    background: currentColor; transform: scaleX(0); transform-origin: right;
    transition: transform var(--dur) var(--ease-out);
}
.link-u:hover::after { transform: scaleX(1); transform-origin: left; }
.link-u .ar { transition: transform var(--dur-fast) var(--ease-out); }
.link-u:hover .ar { transform: translateX(4px); }

/* ============================ Utilities ============================ */
.u-center { text-align: center; }
.u-mt2 { margin-top: var(--s2); } .u-mt4 { margin-top: var(--s4); } .u-mt6 { margin-top: var(--s6); }
.u-mt8 { margin-top: var(--s8); }
.u-maxw { max-width: var(--measure); }
.u-brass { color: var(--brass-deep); }
.u-nowrap { white-space: nowrap; }
.skip-link {
    position: absolute; left: -9999px; top: 0; z-index: 999;
    background: var(--ink); color: var(--bone); padding: 1rem 1.5rem;
}
.skip-link:focus { left: 1rem; top: 1rem; }