/*
 * Samariter Schweiz Portal - Design Tokens
 * Extrahiert aus portal.samariter.ch (samariter_extranet.css) am 2026-05-07
 *
 * Diese Variablen koennen als Basis fuer das WordPress-Theme verwendet werden.
 * Sie spiegeln das aktuelle Live-Design 1:1 wider.
 */

:root {
    /* ===== Brand-Farben ===== */
    --ssb-red:           #df4034;     /* rgb(223, 64, 52) - Primary brand color (BG-Use, decoratif) */
    --ssb-red-text:      #c5302a;     /* AA-konform fuer Text auf weissem Hintergrund (Ratio 5.4:1) */
    --ssb-red-text-on-gray: #b52a25;  /* AA-konform auf #eaeaea Footer-Hintergrund (Ratio 5.0:1) */
    --ssb-red-hover:     #b53329;     /* darker shade for hover states */

    /* ===== Tile-Box-Farben (von Live-Site verifiziert) =====
     * Pro Variant: Hintergrund (..-light) + Title-Farbe (..-title)  */
    --box-red-light:     #f5e9e9;
    --box-red-title:     #99262b;
    --box-violet-light:  #f2edf3;
    --box-violet-title:  #834c85;
    --box-violet-dark:   #834c85;
    --box-green-light:   #f2f4ea;
    --box-green-title:   #7d9635;
    --box-blue-light:    #edf5f6;
    --box-blue-title:    #549ca5;
    --box-black-border:  #000000;

    /* ===== Text & Background ===== */
    --color-text:        #333333;
    --color-text-muted:  #777777;
    --color-bg:          #ffffff;
    --color-bg-muted:    #f5f5f5;     /* Footer, sektion-trennungen */
    --color-bg-footer:   #eaeaea;
    --color-border:      #dddddd;

    /* ===== Typography ===== */
    --font-base:         "Roboto", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --font-icon:         "FontAwesome";

    --fs-base:           16px;
    --fs-h1:             40px;
    --fs-h2:             32px;
    --fs-h3:             20px;
    --fs-h4:             18px;
    --fs-h5:             16px;
    --fs-h6:             14px;
    --fs-small:          14px;

    --lh-base:           1.43;        /* 22.86px / 16px */
    --lh-heading:        1.1;

    --fw-light:          300;
    --fw-regular:        400;
    --fw-medium:         500;
    --fw-bold:           700;

    /* ===== Layout ===== */
    --container-max:     1170px;      /* Bootstrap 3 default */
    --gutter:            30px;

    --header-height:     150px;
    --footer-height:     auto;

    /* Bootstrap-Grid: Hauptcol .col-md-8 = 887px, Sidebar .col-md-4 = 443px @ 1330px */
    --col-main:          66.66667%;   /* col-md-8 */
    --col-sidebar:       33.33333%;   /* col-md-4 */

    /* ===== Spacing ===== */
    --space-xs:          4px;
    --space-sm:          8px;
    --space-md:          16px;
    --space-lg:          22px;        /* base margin */
    --space-xl:          30px;        /* container-section margin */

    /* ===== Komponenten ===== */
    --tile-aspect:       1 / 1;       /* box-wrapper aspect-ratio:1 */
    --tile-padding:      13px;

    --person-img-w:      300px;
    --person-img-margin: 30px;

    --breadcrumb-sep:    "\2022";     /* • bullet */
}

/* === Basis === */
body {
    font-family: var(--font-base);
    font-size: var(--fs-base);
    color: var(--color-text);
    background-color: var(--color-bg);
    line-height: var(--lh-base);
    font-weight: var(--fw-light);
}

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

h1, .h1 { font-size: var(--fs-h1); font-weight: var(--fw-medium); line-height: 44px; margin: var(--space-lg) 0 11px; }
h2, .h2 { font-size: var(--fs-h2); font-weight: var(--fw-medium); }
h3, .h3 { font-size: var(--fs-h3); font-weight: var(--fw-medium); }