/* ============================================================
   MARKENFARBEN – HAMPELKAMMER
   ============================================================ */

:root {

  /* Primärfarben */
  --hk-pink:        #BD0993;
  --hk-gold:        #F8B418;

  /* Abgeleitete Töne (aus Logo-Gradient) */
  --hk-pink-dark:   #8C0670;
  --hk-pink-light:  #E040B0;
  --hk-gold-dark:   #D4940E;
  --hk-gold-light:  #FBCC5A;

  /* Gradient (wie im Logo) */
  --hk-gradient:    linear-gradient(135deg, #F8B418 0%, #BD0993 100%);
  --hk-gradient-v:  linear-gradient(180deg, #F8B418 0%, #BD0993 100%);

  /* Neutrale Töne */
  --hk-black:       #1A1A1A;
  --hk-dark:        #2D2D2D;
  --hk-gray:        #6B6B6B;
  --hk-gray-light:  #F2F0ED;
  --hk-white:       #FFFFFF;

  /* Semantische Farben */
  --hk-success:     #2D9E5F;
  --hk-error:       #D93025;
  --hk-warning:     #F59E0B;

  /* Typografie */
  --hk-font-heading: 'Rubik', sans-serif;
  --hk-font-body:    'DM Sans', sans-serif;
  --hk-font-hero:    'Rubik Moonrocks', cursive;
  --hk-font-display: var(--hk-font-hero);

  --hk-text-xs:     0.75rem;
  --hk-text-sm:     0.875rem;
  --hk-text-base:   1rem;
  --hk-text-lg:     1.125rem;
  --hk-text-xl:     1.25rem;
  --hk-text-2xl:    1.5rem;
  --hk-text-3xl:    1.875rem;
  --hk-text-4xl:    2.25rem;
  --hk-text-5xl:    3rem;
  --hk-text-hero:   4rem;

  --hk-leading-tight:  1.2;
  --hk-leading-normal: 1.6;
  --hk-leading-loose:  1.8;

  /* Abstände & Layout */
  --hk-space-xs:    0.5rem;
  --hk-space-sm:    1rem;
  --hk-space-md:    1.5rem;
  --hk-space-lg:    2.5rem;
  --hk-space-xl:    4rem;
  --hk-space-2xl:   6rem;
  --hk-space-3xl:   8rem;

  --hk-section-padding-y: 5rem;
  --hk-section-padding-x: 1.5rem;

  --hk-max-width:        1200px;
  --hk-max-width-text:    720px;
  --hk-max-width-narrow:  560px;

  /* Formen & Effekte */
  --hk-radius-sm:   4px;
  --hk-radius-md:   8px;
  --hk-radius-lg:   16px;
  --hk-radius-xl:   24px;
  --hk-radius-full: 9999px;

  --hk-shadow-sm:   0 1px 3px rgba(0,0,0,0.12);
  --hk-shadow-md:   0 4px 16px rgba(0,0,0,0.10);
  --hk-shadow-lg:   0 8px 32px rgba(0,0,0,0.12);
  --hk-shadow-pink: 0 4px 20px rgba(189, 9, 147, 0.25);
  --hk-shadow-gold: 0 4px 20px rgba(248, 180, 24, 0.30);

  --hk-transition:      all 0.2s ease;
  --hk-transition-slow: all 0.4s ease;

  /* Aliase */
  --hk-magenta: var(--hk-pink);
  --hk-yellow:  var(--hk-gold);
}

@media (max-width: 768px) {
  :root {
    --hk-text-hero: 2.5rem;
    --hk-text-4xl:  1.75rem;
    --hk-text-3xl:  1.5rem;
    --hk-section-padding-y: 3rem;
  }
}

@media (max-width: 480px) {
  :root {
    --hk-text-hero: 2rem;
    --hk-section-padding-y: 2rem;
  }
}


/* ============================================================
   FONTS – lokal gehostet, kein externer Request
   ============================================================ */

@font-face {
  font-family: 'Rubik';
  src: url('../../fonts/Rubik-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Rubik';
  src: url('../../fonts/Rubik-Medium.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Rubik';
  src: url('../../fonts/Rubik-Bold.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* latin-ext */
@font-face {
  font-family: 'DM Sans';
  src: url('../../fonts/DMSans-Regular-ext.woff2') format('woff2');
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
  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;
}
/* latin */
@font-face {
  font-family: 'DM Sans';
  src: url('../../fonts/DMSans-Regular.woff2') format('woff2');
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
  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;
}
/* latin-ext italic */
@font-face {
  font-family: 'DM Sans';
  src: url('../../fonts/DMSans-Italic-ext.woff2') format('woff2');
  font-weight: 400;
  font-style: italic;
  font-display: swap;
  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;
}
/* latin italic */
@font-face {
  font-family: 'DM Sans';
  src: url('../../fonts/DMSans-Italic.woff2') format('woff2');
  font-weight: 400;
  font-style: italic;
  font-display: swap;
  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;
}

/* latin-ext (DE-Umlaute + Sonderzeichen) */
@font-face {
  font-family: 'Rubik Moonrocks';
  src: url('../../fonts/rubik-moonrocks-latin-ext.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  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;
}
/* latin */
@font-face {
  font-family: 'Rubik Moonrocks';
  src: url('../../fonts/rubik-moonrocks-latin.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  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;
}