/* =========================================================
   Material 3 Design Tokens — Sturm und Gewitterjagd Tirol
   Marken-Seed: Storm-Blau (Primary) · Lime (Tertiary) · Paper-Cream (Surface)
   Schema: --md-sys-color-* / --md-sys-typescale-* / --md-sys-shape-* / --md-sys-elevation-*
   Themes: light (default) · dark · prefers-color-scheme: dark
   ========================================================= */

:root {
  /* ============ COLOR – LIGHT ============ */

  /* Primary (Storm-Blau Tonal Palette) */
  --md-sys-color-primary:                #1B3A5B;
  --md-sys-color-on-primary:             #FFFFFF;
  --md-sys-color-primary-container:      #D2E4FF;
  --md-sys-color-on-primary-container:   #001D36;
  --md-sys-color-inverse-primary:        #A4C9FF;

  /* Secondary (warmes Blaugrau, abgeleitet) */
  --md-sys-color-secondary:              #535F70;
  --md-sys-color-on-secondary:           #FFFFFF;
  --md-sys-color-secondary-container:    #D7E3F8;
  --md-sys-color-on-secondary-container: #101C2B;

  /* Tertiary (Lime-Akzent) */
  --md-sys-color-tertiary:               #4F6B17;
  --md-sys-color-on-tertiary:            #FFFFFF;
  --md-sys-color-tertiary-container:     #D1EE92;
  --md-sys-color-on-tertiary-container:  #151F00;

  /* Error */
  --md-sys-color-error:                  #BA1A1A;
  --md-sys-color-on-error:               #FFFFFF;
  --md-sys-color-error-container:        #FFDAD6;
  --md-sys-color-on-error-container:     #410002;

  /* Surface – warmer Cream (paper) */
  --md-sys-color-background:             #FAF5EB;
  --md-sys-color-on-background:          #1A1C1F;
  --md-sys-color-surface:                #FAF5EB;
  --md-sys-color-surface-dim:            #DBD7CD;
  --md-sys-color-surface-bright:         #FBF9F3;
  --md-sys-color-surface-container-lowest:#FFFFFF;
  --md-sys-color-surface-container-low:  #F4EFE4;
  --md-sys-color-surface-container:      #EEE9DD;
  --md-sys-color-surface-container-high: #E8E3D7;
  --md-sys-color-surface-container-highest:#E3DDD1;
  --md-sys-color-on-surface:             #1A1C1F;
  --md-sys-color-on-surface-variant:     #44474E;
  --md-sys-color-outline:                #74777F;
  --md-sys-color-outline-variant:        #C4C6CF;

  --md-sys-color-inverse-surface:        #2F3033;
  --md-sys-color-inverse-on-surface:     #F1F0F4;
  --md-sys-color-surface-tint:           var(--md-sys-color-primary);
  --md-sys-color-scrim:                  #000000;
  --md-sys-color-shadow:                 #000000;

  /* Warn-Ampel (Domain-spezifisch, M3-konform getontet) */
  --md-sys-color-warn-1: #2F8F4A;  --md-sys-color-warn-1-container: #DCF1E0;  --md-sys-color-on-warn-1-container: #0F4F23;
  --md-sys-color-warn-2: #B4880E;  --md-sys-color-warn-2-container: #FAEBC0;  --md-sys-color-on-warn-2-container: #5C4406;
  --md-sys-color-warn-3: #B85F0C;  --md-sys-color-warn-3-container: #FBDCB8;  --md-sys-color-on-warn-3-container: #5E2F03;
  --md-sys-color-warn-4: #BA1A1A;  --md-sys-color-warn-4-container: #FFDAD6;  --md-sys-color-on-warn-4-container: #410002;
  --md-sys-color-warn-5: #6B2D8F;  --md-sys-color-warn-5-container: #E1CFEC;  --md-sys-color-on-warn-5-container: #371053;

  /* ============ TYPOGRAPHY ============ */
  --md-ref-typeface-brand:   "Bricolage Grotesque", "Roboto Flex", system-ui, sans-serif;
  --md-ref-typeface-plain:   "Roboto", "Roboto Flex", system-ui, sans-serif;
  --md-ref-typeface-mono:    "JetBrains Mono", "Roboto Mono", ui-monospace, Menlo, monospace;

  /* Display – Bricolage */
  --md-sys-typescale-display-large-font:        var(--md-ref-typeface-brand);
  --md-sys-typescale-display-large-size:        57px;
  --md-sys-typescale-display-large-line-height: 64px;
  --md-sys-typescale-display-large-tracking:    -0.25px;
  --md-sys-typescale-display-large-weight:      700;

  --md-sys-typescale-display-medium-font:        var(--md-ref-typeface-brand);
  --md-sys-typescale-display-medium-size:        45px;
  --md-sys-typescale-display-medium-line-height: 52px;
  --md-sys-typescale-display-medium-tracking:    0;
  --md-sys-typescale-display-medium-weight:      700;

  --md-sys-typescale-display-small-font:        var(--md-ref-typeface-brand);
  --md-sys-typescale-display-small-size:        36px;
  --md-sys-typescale-display-small-line-height: 44px;
  --md-sys-typescale-display-small-tracking:    0;
  --md-sys-typescale-display-small-weight:      700;

  /* Headline – Bricolage */
  --md-sys-typescale-headline-large-font:        var(--md-ref-typeface-brand);
  --md-sys-typescale-headline-large-size:        32px;
  --md-sys-typescale-headline-large-line-height: 40px;
  --md-sys-typescale-headline-large-weight:      700;

  --md-sys-typescale-headline-medium-font:        var(--md-ref-typeface-brand);
  --md-sys-typescale-headline-medium-size:        28px;
  --md-sys-typescale-headline-medium-line-height: 36px;
  --md-sys-typescale-headline-medium-weight:      700;

  --md-sys-typescale-headline-small-font:        var(--md-ref-typeface-brand);
  --md-sys-typescale-headline-small-size:        24px;
  --md-sys-typescale-headline-small-line-height: 32px;
  --md-sys-typescale-headline-small-weight:      600;

  /* Title – Roboto */
  --md-sys-typescale-title-large-font:          var(--md-ref-typeface-plain);
  --md-sys-typescale-title-large-size:          22px;
  --md-sys-typescale-title-large-line-height:   28px;
  --md-sys-typescale-title-large-weight:        500;

  --md-sys-typescale-title-medium-font:         var(--md-ref-typeface-plain);
  --md-sys-typescale-title-medium-size:         16px;
  --md-sys-typescale-title-medium-line-height:  24px;
  --md-sys-typescale-title-medium-tracking:     0.15px;
  --md-sys-typescale-title-medium-weight:       500;

  --md-sys-typescale-title-small-font:          var(--md-ref-typeface-plain);
  --md-sys-typescale-title-small-size:          14px;
  --md-sys-typescale-title-small-line-height:   20px;
  --md-sys-typescale-title-small-tracking:      0.1px;
  --md-sys-typescale-title-small-weight:        500;

  /* Body – Roboto */
  --md-sys-typescale-body-large-font:           var(--md-ref-typeface-plain);
  --md-sys-typescale-body-large-size:           16px;
  --md-sys-typescale-body-large-line-height:    24px;
  --md-sys-typescale-body-large-tracking:       0.5px;
  --md-sys-typescale-body-large-weight:         400;

  --md-sys-typescale-body-medium-font:          var(--md-ref-typeface-plain);
  --md-sys-typescale-body-medium-size:          14px;
  --md-sys-typescale-body-medium-line-height:   20px;
  --md-sys-typescale-body-medium-tracking:      0.25px;
  --md-sys-typescale-body-medium-weight:        400;

  --md-sys-typescale-body-small-font:           var(--md-ref-typeface-plain);
  --md-sys-typescale-body-small-size:           12px;
  --md-sys-typescale-body-small-line-height:    16px;
  --md-sys-typescale-body-small-tracking:       0.4px;
  --md-sys-typescale-body-small-weight:         400;

  /* Label – Roboto */
  --md-sys-typescale-label-large-font:          var(--md-ref-typeface-plain);
  --md-sys-typescale-label-large-size:          14px;
  --md-sys-typescale-label-large-line-height:   20px;
  --md-sys-typescale-label-large-tracking:      0.1px;
  --md-sys-typescale-label-large-weight:        500;

  --md-sys-typescale-label-medium-font:         var(--md-ref-typeface-plain);
  --md-sys-typescale-label-medium-size:         12px;
  --md-sys-typescale-label-medium-line-height:  16px;
  --md-sys-typescale-label-medium-tracking:     0.5px;
  --md-sys-typescale-label-medium-weight:       500;

  --md-sys-typescale-label-small-font:          var(--md-ref-typeface-plain);
  --md-sys-typescale-label-small-size:          11px;
  --md-sys-typescale-label-small-line-height:   16px;
  --md-sys-typescale-label-small-tracking:      0.5px;
  --md-sys-typescale-label-small-weight:        500;

  /* ============ SHAPE ============ */
  --md-sys-shape-corner-none:        0;
  --md-sys-shape-corner-extra-small: 4px;
  --md-sys-shape-corner-small:       8px;
  --md-sys-shape-corner-medium:      12px;   /* cards */
  --md-sys-shape-corner-large:       16px;
  --md-sys-shape-corner-extra-large: 28px;
  --md-sys-shape-corner-full:        9999px;

  /* ============ ELEVATION (shadow + tint) ============ */
  --md-sys-elevation-level0: none;
  --md-sys-elevation-level1: 0 1px 2px 0 rgba(0,0,0,.30), 0 1px 3px 1px rgba(0,0,0,.15);
  --md-sys-elevation-level2: 0 1px 2px 0 rgba(0,0,0,.30), 0 2px 6px 2px rgba(0,0,0,.15);
  --md-sys-elevation-level3: 0 1px 3px 0 rgba(0,0,0,.30), 0 4px 8px 3px rgba(0,0,0,.15);
  --md-sys-elevation-level4: 0 2px 3px 0 rgba(0,0,0,.30), 0 6px 10px 4px rgba(0,0,0,.15);
  --md-sys-elevation-level5: 0 4px 4px 0 rgba(0,0,0,.30), 0 8px 12px 6px rgba(0,0,0,.15);

  /* ============ STATE LAYER OPACITY ============ */
  --md-sys-state-hover-opacity:    0.08;
  --md-sys-state-focus-opacity:    0.10;
  --md-sys-state-pressed-opacity:  0.10;
  --md-sys-state-dragged-opacity:  0.16;

  /* ============ MOTION ============ */
  --md-sys-motion-easing-standard:        cubic-bezier(0.2, 0, 0, 1);
  --md-sys-motion-easing-emphasized:      cubic-bezier(0.2, 0, 0, 1);
  --md-sys-motion-easing-emphasized-decel:cubic-bezier(0.05, 0.7, 0.1, 1);
  --md-sys-motion-easing-emphasized-accel:cubic-bezier(0.3, 0, 0.8, 0.15);
  --md-sys-motion-duration-short1:  50ms;
  --md-sys-motion-duration-short2:  100ms;
  --md-sys-motion-duration-short3:  150ms;
  --md-sys-motion-duration-short4:  200ms;
  --md-sys-motion-duration-medium1: 250ms;
  --md-sys-motion-duration-medium2: 300ms;
  --md-sys-motion-duration-medium3: 350ms;
  --md-sys-motion-duration-medium4: 400ms;
  --md-sys-motion-duration-long1:   450ms;
  --md-sys-motion-duration-long2:   500ms;
}

/* ============ DARK MODE — manual ============ */
:root[data-theme="dark"] {
  --md-sys-color-primary:                #A4C9FF;
  --md-sys-color-on-primary:             #00325A;
  --md-sys-color-primary-container:      #194A7E;
  --md-sys-color-on-primary-container:   #D2E4FF;
  --md-sys-color-inverse-primary:        #1B3A5B;

  --md-sys-color-secondary:              #BBC7DB;
  --md-sys-color-on-secondary:           #253140;
  --md-sys-color-secondary-container:    #3B4858;
  --md-sys-color-on-secondary-container: #D7E3F8;

  --md-sys-color-tertiary:               #B6D478;
  --md-sys-color-on-tertiary:            #263500;
  --md-sys-color-tertiary-container:     #394D00;
  --md-sys-color-on-tertiary-container:  #D1EE92;

  --md-sys-color-error:                  #FFB4AB;
  --md-sys-color-on-error:               #690005;
  --md-sys-color-error-container:        #93000A;
  --md-sys-color-on-error-container:     #FFDAD6;

  --md-sys-color-background:             #111418;
  --md-sys-color-on-background:          #E2E2E5;
  --md-sys-color-surface:                #111418;
  --md-sys-color-surface-dim:            #111418;
  --md-sys-color-surface-bright:         #37393D;
  --md-sys-color-surface-container-lowest:#0C0E11;
  --md-sys-color-surface-container-low:  #191C20;
  --md-sys-color-surface-container:      #1D2024;
  --md-sys-color-surface-container-high: #282A2E;
  --md-sys-color-surface-container-highest:#323539;
  --md-sys-color-on-surface:             #E2E2E5;
  --md-sys-color-on-surface-variant:     #C4C6CF;
  --md-sys-color-outline:                #8E9099;
  --md-sys-color-outline-variant:        #44474E;

  --md-sys-color-inverse-surface:        #E2E2E5;
  --md-sys-color-inverse-on-surface:     #2F3033;

  --md-sys-elevation-level1: 0 1px 2px 0 rgba(0,0,0,.40), 0 1px 3px 1px rgba(0,0,0,.30);
  --md-sys-elevation-level2: 0 1px 2px 0 rgba(0,0,0,.40), 0 2px 6px 2px rgba(0,0,0,.30);
  --md-sys-elevation-level3: 0 1px 3px 0 rgba(0,0,0,.40), 0 4px 8px 3px rgba(0,0,0,.30);
  --md-sys-elevation-level4: 0 2px 3px 0 rgba(0,0,0,.40), 0 6px 10px 4px rgba(0,0,0,.30);
  --md-sys-elevation-level5: 0 4px 4px 0 rgba(0,0,0,.40), 0 8px 12px 6px rgba(0,0,0,.30);

  --md-sys-color-warn-1: #8BD89D;  --md-sys-color-warn-1-container: #194B26;  --md-sys-color-on-warn-1-container: #B7F2C4;
  --md-sys-color-warn-2: #F3D173;  --md-sys-color-warn-2-container: #4B380A;  --md-sys-color-on-warn-2-container: #FBE9B7;
  --md-sys-color-warn-3: #F3A464;  --md-sys-color-warn-3-container: #50260A;  --md-sys-color-on-warn-3-container: #FBD6B6;
  --md-sys-color-warn-4: #FFB4AB;  --md-sys-color-warn-4-container: #93000A;  --md-sys-color-on-warn-4-container: #FFDAD6;
  --md-sys-color-warn-5: #C2A4D6;  --md-sys-color-warn-5-container: #4A2069;  --md-sys-color-on-warn-5-container: #E9D4F4;
}

/* ============ DARK MODE — auto via system ============ */
@media (prefers-color-scheme: dark) {
  :root[data-theme="auto"] {
    --md-sys-color-primary:                #A4C9FF;
    --md-sys-color-on-primary:             #00325A;
    --md-sys-color-primary-container:      #194A7E;
    --md-sys-color-on-primary-container:   #D2E4FF;
    --md-sys-color-inverse-primary:        #1B3A5B;

    --md-sys-color-secondary:              #BBC7DB;
    --md-sys-color-on-secondary:           #253140;
    --md-sys-color-secondary-container:    #3B4858;
    --md-sys-color-on-secondary-container: #D7E3F8;

    --md-sys-color-tertiary:               #B6D478;
    --md-sys-color-on-tertiary:            #263500;
    --md-sys-color-tertiary-container:     #394D00;
    --md-sys-color-on-tertiary-container:  #D1EE92;

    --md-sys-color-error:                  #FFB4AB;
    --md-sys-color-on-error:               #690005;
    --md-sys-color-error-container:        #93000A;
    --md-sys-color-on-error-container:     #FFDAD6;

    --md-sys-color-background:             #111418;
    --md-sys-color-on-background:          #E2E2E5;
    --md-sys-color-surface:                #111418;
    --md-sys-color-surface-dim:            #111418;
    --md-sys-color-surface-bright:         #37393D;
    --md-sys-color-surface-container-lowest:#0C0E11;
    --md-sys-color-surface-container-low:  #191C20;
    --md-sys-color-surface-container:      #1D2024;
    --md-sys-color-surface-container-high: #282A2E;
    --md-sys-color-surface-container-highest:#323539;
    --md-sys-color-on-surface:             #E2E2E5;
    --md-sys-color-on-surface-variant:     #C4C6CF;
    --md-sys-color-outline:                #8E9099;
    --md-sys-color-outline-variant:        #44474E;

    --md-sys-color-inverse-surface:        #E2E2E5;
    --md-sys-color-inverse-on-surface:     #2F3033;

    --md-sys-color-warn-1: #8BD89D;  --md-sys-color-warn-1-container: #194B26;  --md-sys-color-on-warn-1-container: #B7F2C4;
    --md-sys-color-warn-2: #F3D173;  --md-sys-color-warn-2-container: #4B380A;  --md-sys-color-on-warn-2-container: #FBE9B7;
    --md-sys-color-warn-3: #F3A464;  --md-sys-color-warn-3-container: #50260A;  --md-sys-color-on-warn-3-container: #FBD6B6;
    --md-sys-color-warn-4: #FFB4AB;  --md-sys-color-warn-4-container: #93000A;  --md-sys-color-on-warn-4-container: #FFDAD6;
    --md-sys-color-warn-5: #C2A4D6;  --md-sys-color-warn-5-container: #4A2069;  --md-sys-color-on-warn-5-container: #E9D4F4;
  }
}

/* ============ BASE RESET ============ */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--md-ref-typeface-plain);
  font-size: var(--md-sys-typescale-body-large-size);
  line-height: var(--md-sys-typescale-body-large-line-height);
  letter-spacing: var(--md-sys-typescale-body-large-tracking);
  color: var(--md-sys-color-on-background);
  background: var(--md-sys-color-background);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; border: none; background: transparent; color: inherit; }
img, svg { display: block; max-width: 100%; }
h1, h2, h3, h4, h5, h6 { margin: 0; font-family: var(--md-ref-typeface-brand); font-weight: 700; letter-spacing: -0.01em; }

/* Material Symbols defaults */
.material-symbols-outlined {
  font-variation-settings:
    'FILL' 0,
    'wght' 400,
    'GRAD' 0,
    'opsz' 24;
  font-size: 24px;
  line-height: 1;
  user-select: none;
}
.material-symbols-outlined.fill { font-variation-settings: 'FILL' 1, 'wght' 500, 'GRAD' 0, 'opsz' 24; }

/* Typography utility classes */
.md-display-large   { font: var(--md-sys-typescale-display-large-weight) var(--md-sys-typescale-display-large-size)/var(--md-sys-typescale-display-large-line-height) var(--md-sys-typescale-display-large-font); letter-spacing: var(--md-sys-typescale-display-large-tracking); }
.md-display-medium  { font: var(--md-sys-typescale-display-medium-weight) var(--md-sys-typescale-display-medium-size)/var(--md-sys-typescale-display-medium-line-height) var(--md-sys-typescale-display-medium-font); }
.md-display-small   { font: var(--md-sys-typescale-display-small-weight) var(--md-sys-typescale-display-small-size)/var(--md-sys-typescale-display-small-line-height) var(--md-sys-typescale-display-small-font); }
.md-headline-large  { font: var(--md-sys-typescale-headline-large-weight) var(--md-sys-typescale-headline-large-size)/var(--md-sys-typescale-headline-large-line-height) var(--md-sys-typescale-headline-large-font); }
.md-headline-medium { font: var(--md-sys-typescale-headline-medium-weight) var(--md-sys-typescale-headline-medium-size)/var(--md-sys-typescale-headline-medium-line-height) var(--md-sys-typescale-headline-medium-font); }
.md-headline-small  { font: var(--md-sys-typescale-headline-small-weight) var(--md-sys-typescale-headline-small-size)/var(--md-sys-typescale-headline-small-line-height) var(--md-sys-typescale-headline-small-font); }
.md-title-large     { font: var(--md-sys-typescale-title-large-weight) var(--md-sys-typescale-title-large-size)/var(--md-sys-typescale-title-large-line-height) var(--md-sys-typescale-title-large-font); }
.md-title-medium    { font: var(--md-sys-typescale-title-medium-weight) var(--md-sys-typescale-title-medium-size)/var(--md-sys-typescale-title-medium-line-height) var(--md-sys-typescale-title-medium-font); letter-spacing: var(--md-sys-typescale-title-medium-tracking); }
.md-title-small     { font: var(--md-sys-typescale-title-small-weight) var(--md-sys-typescale-title-small-size)/var(--md-sys-typescale-title-small-line-height) var(--md-sys-typescale-title-small-font); letter-spacing: var(--md-sys-typescale-title-small-tracking); }
.md-body-large      { font: var(--md-sys-typescale-body-large-weight) var(--md-sys-typescale-body-large-size)/var(--md-sys-typescale-body-large-line-height) var(--md-sys-typescale-body-large-font); letter-spacing: var(--md-sys-typescale-body-large-tracking); }
.md-body-medium     { font: var(--md-sys-typescale-body-medium-weight) var(--md-sys-typescale-body-medium-size)/var(--md-sys-typescale-body-medium-line-height) var(--md-sys-typescale-body-medium-font); letter-spacing: var(--md-sys-typescale-body-medium-tracking); }
.md-body-small      { font: var(--md-sys-typescale-body-small-weight) var(--md-sys-typescale-body-small-size)/var(--md-sys-typescale-body-small-line-height) var(--md-sys-typescale-body-small-font); letter-spacing: var(--md-sys-typescale-body-small-tracking); }
.md-label-large     { font: var(--md-sys-typescale-label-large-weight) var(--md-sys-typescale-label-large-size)/var(--md-sys-typescale-label-large-line-height) var(--md-sys-typescale-label-large-font); letter-spacing: var(--md-sys-typescale-label-large-tracking); }
.md-label-medium    { font: var(--md-sys-typescale-label-medium-weight) var(--md-sys-typescale-label-medium-size)/var(--md-sys-typescale-label-medium-line-height) var(--md-sys-typescale-label-medium-font); letter-spacing: var(--md-sys-typescale-label-medium-tracking); }
.md-label-small     { font: var(--md-sys-typescale-label-small-weight) var(--md-sys-typescale-label-small-size)/var(--md-sys-typescale-label-small-line-height) var(--md-sys-typescale-label-small-font); letter-spacing: var(--md-sys-typescale-label-small-tracking); }