/* ==========================================================================
   MKS Design System — CSS Custom Properties
   Musikschule St. Poelten
   ========================================================================== */

:root {
  /* ---- Farben / Colors ---- */
  --mks-primary: #d11317;
  --mks-primary-hover: #b01115;
  --mks-text: #333333;
  --mks-text-dark: #0f262b;
  --mks-bg: #fdfdfd;
  --mks-bg-light: #f5f5f5;
  --mks-bg-medium: #f1f1f1;
  --mks-overlay-dark: rgba(0, 0, 0, 0.8);
  --mks-white: #fdfdfd;

  /* Grautöne / Grays */
  --mks-gray-light: #f5f5f5;
  --mks-gray-medium: #e0e0e0;
  --mks-gray-dark: #555555;

  /* Borders */
  --mks-border-light: #f1f1f1;
  --mks-border-input: #22252854;
  --mks-border-event: #e9e9ea;
  --mks-border-text: rgba(51, 51, 51, 0.14);

  /* Schatten / Shadows */
  --mks-shadow: 3px 3px 2px rgba(15, 38, 43, 0.2);
  --mks-shadow-light: 0 4px 6px rgba(0, 0, 0, 0.1);
  --mks-shadow-medium: 0 2px 8px rgba(0, 0, 0, 0.1);
  --mks-shadow-heavy: 6px 7px 17px -2px rgba(0, 0, 0, 0.32);
  --mks-shadow-large: 0 12px 40px rgba(0, 0, 0, 0.15);

  /* Akzentfarben / Accent Colors */
  --mks-accent-yellow: #fed700;
  --mks-accent-pink: #ba1a63;
  --mks-accent-blue: #2082a8;
  --mks-success: #10b981;
  --mks-warning: #f59e0b;
  --mks-danger: #dc2626;
  --mks-danger-hover: #b91c1c;

  /* Transparente Hintergründe / Transparent Backgrounds */
  --mks-nav-bg: rgba(255, 255, 255, 0.94);
  --mks-table-row-even: #c6c6cd40;
  --mks-table-row-hover: #c6c6cd;

  /* ---- Typografie / Typography ---- */
  --mks-font: 'jaf-bernina-sans-condensed', sans-serif;

  /* Font Sizes — Headings */
  --mks-font-size-h1: 2.3rem;
  --mks-font-size-h2: 2.1rem;
  --mks-font-size-h3: 2rem;
  --mks-font-size-h4: 1.5rem;

  /* Font Sizes — Body / UI */
  --mks-font-size-body: 1.3rem;
  --mks-font-size-nav: 1.6rem;
  --mks-font-size-nav-link: 1.3rem;
  --mks-font-size-small: 1.1rem;
  --mks-font-size-staff: 0.9rem;
  --mks-font-size-staff-small: 0.8rem;
  --mks-font-size-staff-tiny: 0.75rem;
  --mks-font-size-input: 18px;
  --mks-font-size-overlay: 25px;

  /* Responsive Font Overrides (reference values) */
  --mks-font-size-h1-mobile: 1.7rem;
  --mks-font-size-body-mobile: 1.1rem;
  --mks-font-size-overlay-mobile: 22px;
  --mks-font-size-h1-tablet: 28px;
  --mks-font-size-body-tablet: 20px;

  /* Line Heights */
  --mks-line-height-heading: 1.15;
  --mks-line-height-heading-compact: 1.2;
  --mks-line-height: 1.8rem;
  --mks-line-height-mobile: 1.5rem;
  --mks-line-height-tablet: 30px;
  --mks-line-height-table: 34px;

  /* Font Weights */
  --mks-font-weight-light: 300;
  --mks-font-weight-normal: 400;
  --mks-font-weight-medium: 500;
  --mks-font-weight-bold: 600;

  /* ---- Spacing ---- */
  --mks-container-width: 90%;
  --mks-container-width-mobile: 93%;
  --mks-container-padding: 15px;
  --mks-text-padding: 5%;
  --mks-footer-margin: 5rem;
  --mks-footer-margin-mobile: 2rem;
  --mks-footer-accent-size: 0.25rem;
  --mks-footer-section-padding: 2rem;
  --mks-footer-section-padding-large: 3.5rem;
  --mks-footer-section-gap: 2rem;
  --mks-footer-info-gap: 3rem;
  --mks-footer-social-icon-size: 2.4rem;
  --mks-footer-social-hit-size: 3.4rem;
  --mks-footer-button-width: 18rem;
  --mks-footer-logo-width: 7.8125rem;
  --mks-footer-brand-bar-height: 3.25rem;
  --mks-footer-city-logo-height: 2.5rem;
  --mks-footer-region-logo-height: 3.3rem;
  --mks-faq-content-width: 58rem;
  --mks-faq-answer-width: 52rem;
  --mks-faq-item-space: 1.2rem;
  --mks-faq-answer-space: 1rem;
  --mks-teacher-page-width: 75rem;
  --mks-teacher-intro-width: 40rem;
  --mks-teacher-card-min: 18rem;
  --mks-teacher-card-min-mobile: 14rem;
  --mks-teacher-card-gap: 1.75rem;
  --mks-teacher-card-padding: 1.4rem;
  --mks-teacher-page-padding: 2rem;
  --mks-teacher-page-padding-mobile: 1rem;
  --mks-teacher-section-gap: 2rem;
  --mks-teacher-section-gap-large: 3.5rem;
  --mks-teacher-nav-gap: 0.45rem;
  --mks-teacher-nav-padding: 0.75rem;
  --mks-teacher-nav-padding-mobile: 0.55rem;
  --mks-teacher-nav-button-y: 0.42rem;
  --mks-teacher-nav-button-x: 0.9rem;
  --mks-teacher-nav-button-y-mobile: 0.38rem;
  --mks-teacher-nav-button-x-mobile: 0.65rem;
  --mks-teacher-link-padding: 0.25rem;

  /* ---- Navigation ---- */
  --mks-nav-height: 5.8rem;
  --mks-nav-height-mobile: 4rem;
  --mks-nav-height-mobile-compact: 3.35rem;
  --mks-mobile-header-offset: var(--mks-nav-height-mobile);
  --mks-nav-height-scrolled: 4rem;
  --mks-logo-height: 3.3rem;
  --mks-logo-height-mobile: 3rem;
  --mks-logo-height-mobile-compact: 2.25rem;
  --mks-logo-height-scrolled: 2.4rem;
  --mks-logo-max-width: 16rem;
  --mks-logo-max-width-compact: 13.5rem;
  --mks-mobile-nav-border-width: 1px;
  --mks-mobile-nav-button-size: 2.6rem;
  --mks-mobile-nav-button-size-compact: 2.25rem;
  --mks-mobile-nav-icon-width: 1.35rem;
  --mks-mobile-nav-icon-stroke: 2px;
  --mks-mobile-nav-padding: 0.65rem;
  --mks-mobile-nav-padding-compact: 0.45rem;
  --mks-mobile-nav-gap: 0.65rem;
  --mks-mobile-nav-gap-compact: 0.45rem;
  --mks-mobile-menu-width: min(92vw, 28rem);
  --mks-mobile-menu-header-height: 4.1rem;
  --mks-mobile-menu-header-height-compact: 3.45rem;
  --mks-mobile-menu-padding: 0.75rem;
  --mks-mobile-menu-gap: 0.55rem;
  --mks-mobile-menu-indent: 1.25rem;
  --mks-mobile-menu-touch-target: 2.55rem;
  --mks-mobile-menu-icon-size: 1.25rem;
  --mks-mobile-menu-backdrop: var(--mks-bg-light);
  --mks-mobile-menu-section-shadow: 0 2px 10px rgba(0, 0, 0, 0.06);

  /* ---- Layout ---- */
  --mks-max-width: 1800px;
  --mks-banner-height: 400px;
  --mks-banner-height-mobile: 240px;
  --mks-banner-height-mobile-fluid: clamp(9.5rem, 42vw, var(--mks-banner-height-mobile));
  --mks-banner-height-mobile-compact: clamp(8rem, 40vw, 10.75rem);
  --mks-banner-border-radius: 0 0 12px 12px;

  /* ---- Transitions ---- */
  --mks-transition: all 0.3s ease;
  --mks-transition-fast: all 0.2s ease;
  --mks-transition-slow: all 0.5s ease;

  /* ---- Border Radius ---- */
  --mks-border-radius: 8px;
  --mks-border-radius-large: 12px;

  /* ---- Z-Index Scale ---- */
  --mks-z-header: 2;
  --mks-z-nav: 100;
  --mks-z-overlay: 101;
  --mks-z-dropdown: 111;
  --mks-z-modal: 999;
  --mks-z-navbar-fixed: 1000;

  /* ---- Breakpoints (reference only, not usable in var()) ---- */
  /* Desktop full:      > 1340px */
  /* Desktop compact:   > 1200px */
  /* Tablet:            > 1120px */
  /* Tablet/Mobile Nav: 820px    */
  /* Mobile Layout:     771px    */
  /* Small Mobile:      700px    */
  /* Mini-Logo:         545px    */
  /* Extra-small:       480px    */
}