/* Fiedler & Rieß — bundled stylesheet (tokens + components + base) */

/* ===== fonts.css ===== */
/* ============================================
   FIEDLER & RIESS — WEBFONTS
   Self-hosted Open Sans (variable weight 100–900).
   Originally shipped without Google Fonts; kept self-hosted here.
   ============================================ */

@font-face {
    font-family: 'Open Sans';
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url('../fonts/open-sans-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7,
                   U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF,
                   U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB,
                   U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
    font-family: 'Open Sans';
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url('../fonts/open-sans-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
                   U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F,
                   U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215,
                   U+FEFF, U+FFFD;
}

/* ===== colors.css ===== */
/* ============================================
   FIEDLER & RIESS — COLOR TOKENS
   Olive-green primary on a clean light-grey canvas,
   with a charcoal navigation rail. Restrained,
   professional, low-saturation — a law-firm palette.
   ============================================ */

:root {
    /* ---- Brand: olive green ---- */
    --green:           #6b9c27;  /* primary brand green */
    --green-dark:      #5a8420;  /* hover / pressed */
    --green-darker:    #4a6c1a;  /* deep accent, focus rings */
    --green-tint:      #eef3e4;  /* faint green wash for fills */

    /* ---- Charcoal: navigation & headers ---- */
    --charcoal:        #1f2326;  /* nav rail, page headers */
    --charcoal-soft:   #2c3135;  /* raised charcoal surfaces */

    /* ---- Crimson: Fragebogen accent (forms / call-to-action page) ---- */
    --crimson:         #a30026;  /* Fragebogen title & buttons */
    --crimson-dark:    #850020;  /* hover */

    /* ---- Neutrals ---- */
    --white:           #ffffff;
    --light:           #f5f5f3;  /* page section background */
    --border:          #e0e0e0;  /* hairline dividers, card edges */
    --border-strong:   #c8c8c4;

    /* ---- Text ---- */
    --text:            #333333;  /* body copy */
    --text-light:      #666666;  /* secondary / meta */
    --text-faint:      #999999;  /* placeholders, initials */
    --text-on-dark:    #ffffff;
    --text-on-dark-dim: rgba(255, 255, 255, 0.65);

    /* ============================================
       SEMANTIC ALIASES
       Use these in components, not the raw values.
       ============================================ */

    /* Surfaces */
    --surface-page:    var(--white);
    --surface-muted:   var(--light);
    --surface-card:    var(--white);
    --surface-nav:     var(--charcoal);
    --surface-header:  var(--charcoal);
    --surface-accent:  var(--green);

    /* Text roles */
    --text-body:       var(--text);
    --text-heading:    var(--text);
    --text-muted:      var(--text-light);
    --text-brand:      var(--green);
    --text-link:       var(--green);

    /* Lines */
    --rule-hairline:   var(--border);
    --rule-accent:     var(--green);

    /* Interactive */
    --action-bg:       var(--green);
    --action-bg-hover: var(--green-dark);
    --action-fg:       var(--white);
    --focus-ring:      var(--green-darker);
}

/* ===== typography.css ===== */
/* ============================================
   FIEDLER & RIESS — TYPOGRAPHY TOKENS
   One family: Open Sans. Light weights (300) for
   large headings, bold (700) for brand & labels,
   semibold (600) for nav. Uppercase + letterspacing
   is the signature for navigation and section labels.
   ============================================ */

:root {
    /* ---- Family ---- */
    --font-sans:   'Open Sans', Arial, Helvetica, sans-serif;
    --font-body:   var(--font-sans);
    --font-head:   var(--font-sans);

    /* ---- Weights ---- */
    --fw-light:    300;  /* @kind font */
    --fw-regular:  400;  /* @kind font */
    --fw-semibold: 600;  /* @kind font */
    --fw-bold:     700;  /* @kind font */

    /* ---- Type scale (px, matches the live site) ---- */
    --fs-logo:     32px;  /* brand wordmark */
    --fs-h1:       30px;  /* hero tagline / intro */
    --fs-h2:       26px;  /* page-header title (light) */
    --fs-h3:       17px;  /* content section heading */
    --fs-lead:     15px;  /* lead paragraph */
    --fs-body:     14px;  /* body copy */
    --fs-sm:       13px;  /* card body, meta */
    --fs-xs:       12.5px; /* nav, labels, fine print */
    --fs-xxs:      11.5px; /* partner title, captions */

    /* ---- Line heights ---- */
    --lh-tight:    1.25;  /* @kind font */
    --lh-snug:     1.55;  /* @kind font */
    --lh-body:     1.75;  /* @kind font */

    /* ---- Letter spacing ---- */
    --ls-nav:      0.08em;  /* uppercase nav */
    --ls-label:    0.03em;  /* card headers */
    --ls-wide:     0.12em;  /* eyebrows */

    /* ---- Semantic aliases ---- */
    --text-display: var(--fw-light) var(--fs-h1)/var(--lh-tight) var(--font-head);
    --text-title:   var(--fw-light) var(--fs-h2)/var(--lh-tight) var(--font-head);
    --text-section: var(--fw-bold) var(--fs-h3)/1.3 var(--font-head);
}

/* ===== spacing.css ===== */
/* ============================================
   FIEDLER & RIESS — SPACING & LAYOUT TOKENS
   A calm, generous rhythm. Sections breathe with
   30–50px vertical padding; cards use 14–22px insets.
   ============================================ */

:root {
    /* ---- Spacing scale ---- */
    --space-1:   4px;
    --space-2:   8px;
    --space-3:   12px;
    --space-4:   16px;
    --space-5:   20px;
    --space-6:   24px;
    --space-8:   32px;
    --space-10:  40px;
    --space-12:  50px;

    /* ---- Layout ---- */
    --max-w:        1400px;   /* content container */
    --max-w-text:   780px;    /* legal / long-form measure */
    --nav-w:        165px;    /* fixed charcoal nav rail width */
    --gutter:       20px;     /* container side padding */

    /* ---- Section rhythm ---- */
    --section-y:    38px;     /* vertical padding inside sections */
    --card-pad:     16px;     /* default card inset */

    /* ---- Radii — the brand is square. Corners are sharp. ---- */
    --radius-none:  0;
    --radius-pill:  50%;      /* only the round partner photo */

    /* ---- Semantic aliases ---- */
    --inset-card:   14px 16px;
    --inset-page:   0 var(--gutter);
}

/* ===== effects.css ===== */
/* ============================================
   FIEDLER & RIESS — EFFECTS TOKENS
   Minimal. Borders do the work, not shadows. The only
   shadow on the live site is the cookie banner lift.
   Transitions are quick (0.18s ease) on background/color.
   ============================================ */

:root {
    /* ---- Borders ---- */
    --border-hairline: 1px solid var(--border);
    --border-card:     1px solid var(--border);
    --accent-bar:      3px solid var(--green);  /* left-accent on boxes */
    --accent-bar-r:    3px solid var(--green);  /* right-accent on active nav */

    /* ---- Shadows (used sparingly) ---- */
    --shadow-none:     none;
    --shadow-lift:     0 -3px 12px rgba(0, 0, 0, 0.09); /* cookie banner */
    --shadow-soft:     0 2px 8px rgba(0, 0, 0, 0.06);   /* optional hover lift */

    /* ---- Motion ---- */
    --ease:        0.18s ease;          /* @kind other */
    --ease-slow:   1.1s ease;           /* @kind other */
    --easing:      cubic-bezier(0.4, 0, 0.2, 1); /* @kind other */

    /* ---- Focus ---- */
    --focus-outline: 2px solid var(--green-darker);
    --focus-offset:  2px;
}

/* ===== components.css ===== */
/* ============================================
   FIEDLER & RIESS — COMPONENT INTERACTION STATES
   The JSX primitives render base styles inline from tokens.
   Hover / focus / active states live here so they ship to
   consumers and apply by className. Keep this purely about
   state — base appearance stays in the components.
   ============================================ */

/* ---- Button ---- */
.fr-btn { -webkit-tap-highlight-color: transparent; }
.fr-btn--primary:hover   { background: var(--green-dark) !important; border-color: var(--green-dark) !important; color: var(--white) !important; text-decoration: none; }
.fr-btn--primary:active  { background: var(--green-darker) !important; border-color: var(--green-darker) !important; }
.fr-btn--secondary:hover { border-color: var(--green) !important; color: var(--green) !important; text-decoration: none; }
.fr-btn--text:hover      { text-decoration: underline; }
.fr-btn:disabled, .fr-btn[aria-disabled="true"] { opacity: .5; cursor: not-allowed; pointer-events: none; }

/* ---- Contact icon ---- */
.fr-contact-icon { transition: background var(--ease), color var(--ease); }
.fr-contact-icon:hover { background: var(--green) !important; color: var(--white) !important; text-decoration: none; }

/* ---- Links ---- */
.fr-morelink:hover { text-decoration: underline; }

/* ---- Nav rail ---- */
.fr-nav-item:hover { background: rgba(255,255,255,.10) !important; text-decoration: none; }
.fr-nav-sub:hover  { background: rgba(255,255,255,.10) !important; color: var(--white) !important; text-decoration: none; }

/* Transparent variant (live-site header): green text, white text on a green fill on hover */
.fr-nav-item--t:hover { color: var(--white) !important; background: var(--green) !important; text-decoration: none; }
.fr-nav-sub--t        { color: var(--green) !important; }
.fr-nav-sub--t:hover  { background: var(--green) !important; color: var(--white) !important; text-decoration: none; }

/* ---- Cards with hover affordance ---- */
.fr-card--interactive { transition: border-color var(--ease); }
.fr-card--interactive:hover { border-color: var(--green) !important; }

/* ===== base.css ===== */
/* ============================================
   FIEDLER & RIESS — BASE
   Light reset + element defaults wired to tokens.
   ============================================ */

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

html { font-size: 16px; scroll-behavior: smooth; }

body {
    font-family: var(--font-body);
    color: var(--text-body);
    background: var(--surface-page);
    line-height: var(--lh-snug);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

a { color: var(--text-link); text-decoration: none; }
a:hover { text-decoration: underline; }

ul { list-style: none; }

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

:focus-visible {
    outline: var(--focus-outline);
    outline-offset: var(--focus-offset);
}

/* Shared container */
.fr-container {
    max-width: var(--max-w);
    margin: 0 auto;
    padding: var(--inset-page);
}