/* ================================================
   GRK GEREKE — Design Tokens
   Source: source/grk-gereke-homepage.html (institutional refresh layer)
   ================================================ */

/* Schriften DSGVO-konform über Bunny Fonts (EU, kein Tracking, kein Consent nötig) —
   identische Familien wie Google Fonts, daher unveränderte Optik. */
@import url('/fonts/fonts.css');

:root {
  /* ---------- Brand colours ---------- */
  --grk-navy:       #0d1b2e;   /* deep institutional navy — headlines, dark surface */
  --grk-navy-2:     #1a2d45;   /* navy lift — hover, second-stage CTA */
  --grk-blue:       #2c4f8a;   /* mid blue — links, brand accent */
  --grk-blue-mid:   #4a7bc8;   /* signature blue — primary CTA, hover marker */
  --grk-blue-muted: #6b8ebf;   /* muted blue — Gold-tier card stripe */
  --grk-blue-pale:  #dce8f5;   /* pale blue — eyebrow chips, focus rings */
  --grk-blue-light: #9cbce6;   /* light steel blue — accents on dark surfaces (replaces gold) */

  /* Editorial accent — used sparingly on the dark "warum" surface */
  --grk-gold:       #c4a96a;   /* muted antique gold (not bright #ffd700) */
  --grk-gold-bright:#ffd700;   /* legacy bright gold — only for "bonus" callouts */

  /* ---------- Neutrals ---------- */
  --grk-gray-900: #0d1b2e;
  --grk-gray-700: #2d3d52;
  --grk-gray-500: #5a6a7e;
  --grk-gray-400: #8494a8;
  --grk-gray-200: #dde4ec;
  --grk-gray-100: #eef2f7;
  --grk-off-white:#f5f7fa;
  --grk-white:    #ffffff;

  /* ---------- Semantic mapping ---------- */
  --grk-fg-1:     var(--grk-navy);        /* high-emphasis text, h1/h2 */
  --grk-fg-2:     var(--grk-gray-700);    /* body */
  --grk-fg-3:     var(--grk-gray-500);    /* secondary copy */
  --grk-fg-4:     var(--grk-gray-400);    /* meta / legal */
  --grk-on-dark:  rgba(255,255,255,0.95);
  --grk-on-dark-2:rgba(255,255,255,0.62);
  --grk-on-dark-3:rgba(255,255,255,0.30);

  --grk-bg-page:    var(--grk-white);
  --grk-bg-subtle:  var(--grk-off-white);
  --grk-bg-muted:   var(--grk-gray-100);
  --grk-bg-dark:    var(--grk-navy);
  --grk-bg-dark-2:  var(--grk-navy-2);

  --grk-border:        var(--grk-gray-200);
  --grk-border-strong: var(--grk-gray-400);
  --grk-border-on-dark:rgba(255,255,255,0.10);

  --grk-link:        var(--grk-blue);
  --grk-link-hover:  var(--grk-blue-mid);

  /* ---------- Spacing scale (8-pt) ---------- */
  --grk-s-1: 8px;
  --grk-s-2: 16px;
  --grk-s-3: 24px;
  --grk-s-4: 32px;
  --grk-s-5: 48px;
  --grk-s-6: 64px;
  --grk-s-7: 96px;
  --grk-s-8: 128px;

  /* ---------- Radius ---------- */
  --grk-r-xs: 2px;   /* primary buttons, CTAs — institutional sharpness */
  --grk-r-sm: 4px;   /* secondary buttons, chips */
  --grk-r-md: 8px;   /* form inputs, small cards */
  --grk-r-lg: 12px;  /* product cards, glass panels */
  --grk-r-xl: 20px;  /* large editorial containers */

  /* ---------- Shadows ---------- */
  --grk-sh-1: 0 1px 3px rgba(13,27,46,0.05);
  --grk-sh-2: 0 2px 12px rgba(13,27,46,0.06);
  --grk-sh-3: 0 4px 24px rgba(13,27,46,0.07);
  --grk-sh-4: 0 16px 48px rgba(13,27,46,0.12), 0 4px 12px rgba(13,27,46,0.06);

  /* ---------- Typography ---------- */
  --grk-font-sans:    'Urbanist', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --grk-font-display: 'Urbanist', 'Inter', sans-serif;           /* headlines */
  --grk-font-serif:   'Playfair Display', 'Didot', Georgia, serif; /* footer tagline only */

  /* ---------- Layout ---------- */
  --grk-container:        1200px;
  --grk-container-narrow: 720px;
  --grk-gutter:           48px; /* @kind spacing */

  /* ---------- Motion ---------- */
  --grk-ease:       cubic-bezier(0.4, 0, 0.2, 1); /* @kind other */
  --grk-dur-fast:   200ms; /* @kind other */
  --grk-dur-base:   300ms; /* @kind other */
  --grk-dur-slow:   400ms; /* @kind other */
}

/* ================================================
   Base type
   ================================================ */

html { font-size: 100%; }

body {
  font-family: var(--grk-font-sans);
  font-weight: 400;
  font-size: 16px;
  line-height: 1.65;
  color: var(--grk-fg-2);
  background: var(--grk-bg-page);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ---------- Type scale ----------
   Display weights are LIGHT (300) — editorial restraint, not bold marketing.
   Headlines tighten letter-spacing for institutional rhythm.
*/
.grk-display, h1 {
  font-family: var(--grk-font-display);
  font-size: clamp(46px, 6.2vw, 76px);
  font-weight: 300;
  line-height: 1.06;
  letter-spacing: -0.038em;
  color: var(--grk-fg-1);
}

.grk-h2, h2 {
  font-family: var(--grk-font-display);
  font-size: clamp(28px, 3.2vw, 48px);
  font-weight: 300;
  line-height: 1.14;
  letter-spacing: -0.028em;
  color: var(--grk-fg-1);
}

.grk-h3, h3 {
  font-family: var(--grk-font-display);
  font-size: clamp(18px, 1.8vw, 24px);
  font-weight: 500;
  line-height: 1.35;
  letter-spacing: -0.012em;
  color: var(--grk-fg-1);
}

.grk-h4, h4 {
  font-family: var(--grk-font-display);
  font-size: 17px;
  font-weight: 500;
  line-height: 1.45;
  color: var(--grk-fg-1);
}

.grk-h5, h5 {
  font-family: var(--grk-font-display);
  font-size: 15px;
  font-weight: 600;
  line-height: 1.45;
  color: var(--grk-fg-1);
}

/* Eyebrow / label — wide tracking, micro-size, all caps */
.grk-eyebrow {
  font-family: var(--grk-font-sans);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--grk-blue-mid);
}

/* Sub-eyebrow on dark hero — even tighter, even quieter */
.grk-eyebrow-dark {
  font-family: var(--grk-font-sans);
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--grk-on-dark-3);
}

p, .grk-body {
  font-family: var(--grk-font-sans);
  font-size: 16px;
  line-height: 1.90;
  color: var(--grk-fg-2);
}

.grk-body-sm {
  font-size: 14px;
  line-height: 1.7;
  color: var(--grk-fg-3);
}

.grk-meta {
  font-size: 13px;
  line-height: 1.5;
  color: var(--grk-fg-4);
  letter-spacing: 0.01em;
}

/* Footer brand tagline — the ONE place serif appears */
.grk-tagline {
  font-family: var(--grk-font-serif);
  font-size: 22px;
  font-weight: 400;
  letter-spacing: 0.05em;
  color: var(--grk-navy);
}

a {
  color: var(--grk-link);
  text-decoration: none;
  transition: color var(--grk-dur-fast) var(--grk-ease);
}
a:hover { color: var(--grk-link-hover); }

strong { color: var(--grk-fg-1); font-weight: 600; }

/* ---------- Shared button interaction (GRK marketing) ---------- */
@media (hover: hover) {
  .grk-btn:hover { transform: translateY(-2px); }
  .grk-btn-primary:hover {
    background-color: var(--grk-blue) !important;
    border-color: var(--grk-blue) !important;
    box-shadow: 0 8px 20px rgba(44,79,138,0.28);
  }
  .grk-btn-primaryStrong:hover {
    background-color: var(--grk-blue) !important;
    border-color: var(--grk-blue) !important;
    box-shadow: 0 10px 24px rgba(44,79,138,0.30);
  }
  .grk-btn-ghostDark:hover {
    background-color: rgba(255,255,255,0.12) !important;
    border-color: rgba(255,255,255,0.55) !important;
    color: #fff !important;
    box-shadow: 0 8px 20px rgba(0,0,0,0.18);
  }
  .grk-btn-ghostLight:hover {
    background-color: rgba(44,79,138,0.06) !important;
    border-color: rgba(44,79,138,0.5) !important;
  }
  /* Solid accent CTAs that aren't the shared Button (Depot eröffnen, Produktübersicht, Jetzt Depot eröffnen) */
  .grk-cta-solid { transition: transform 220ms var(--grk-ease), box-shadow 220ms var(--grk-ease), filter 220ms; }
  .grk-cta-solid:hover { transform: translateY(-2px); box-shadow: 0 12px 26px rgba(13,27,46,0.20); filter: brightness(1.05); }
  .grk-cta-solid:hover .grk-cta-arrow { transform: translateX(4px); }
  .grk-cta-arrow { transition: transform 220ms var(--grk-ease); display: inline-flex; }
}

@media (hover: hover) {
  .grk-nav-sub:hover {
    background-color: var(--grk-blue-pale) !important;
    color: var(--grk-blue) !important;
    padding-left: 24px !important;
  }
}

/* Navigations-Dropdown: geschmeidige Einblendung (Fade + sanftes Abrollen von oben) */
@keyframes grkNavDrop {
  0%   { opacity: 0; transform: translateY(-10px) scaleY(0.96); }
  60%  { opacity: 1; }
  100% { opacity: 1; transform: translateY(0) scaleY(1); }
}
.grk-nav-dropdown {
  transform-origin: top center;
  animation: grkNavDrop 260ms cubic-bezier(0.22, 1, 0.36, 1);
  will-change: opacity, transform;
}
@media (prefers-reduced-motion: reduce) {
  .grk-nav-dropdown { animation: none; }
}

::selection {
  background: var(--grk-blue-mid);
  color: #fff;
}

/* Hide native number-input spinners so custom steppers are the only control. */
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  appearance: none;
  margin: 0;
}
input[type="number"] {
  -moz-appearance: textfield;
  appearance: textfield;
}

/* ================================================
   Accessibility (additiv — keine Layoutänderung)
   ================================================ */

/* Sichtbarer Fokusring nur bei Tastaturnavigation */
:focus-visible {
  outline: 2px solid var(--grk-blue-mid);
  outline-offset: 2px;
  border-radius: 2px;
}

/* Skip-Link: unsichtbar bis fokussiert, dann oben links */
.grk-skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 1000;
  background: var(--grk-navy);
  color: #fff;
  padding: 12px 22px;
  border-radius: 0 0 6px 0;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
}
.grk-skip-link:focus {
  left: 0;
}

/* Nutzerwunsch „weniger Bewegung“ respektieren */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

/* ================================================
   Mobile-Härtung: kein horizontaler Overflow
   ================================================ */

/* Lange deutsche Komposita (z. B. „Altersvorsorge“) dürfen umbrechen,
   statt den Viewport zu sprengen. Silbentrennung greift bei lang="de". */
h1, h2, h3, h4, p, li, a, span, strong, small, label, div {
  overflow-wrap: break-word;
}
h1, h2, h3, h4 {
  hyphens: auto;
  -webkit-hyphens: auto;
}

@media (max-width: 900px) {
  /* Schmalerer Außenabstand auf Tablets/Smartphones. !important schlägt die
     pro-Seite gesetzte :root-Variable (--grk-gutter: 48px). */
  :root { --grk-gutter: 24px !important; /* @kind spacing */ }
  /* Sicherheitsnetz gegen versehentliches horizontales Scrollen. Die
     sticky-Inhaltsverzeichnisse sind in diesem Bereich ohnehin ausgeblendet. */
  html, body { overflow-x: hidden; max-width: 100%; }
}

@media (max-width: 560px) {
  :root { --grk-gutter: 18px !important; /* @kind spacing */ }
}

/* Komponenten-Raster, die in ihrer eigenen Datei keinen Umbruchpunkt hatten,
   werden hier zentral mobil gestapelt (className + !important schlägt das Inline-Grid). */
@media (max-width: 900px) {
  .grk-foot-cols { grid-template-columns: 1fr 1fr !important; gap: 32px !important; }
  .lv-why-grid { grid-template-columns: 1fr !important; }
  .lv-steps-grid, .partners-stat-grid { grid-template-columns: 1fr 1fr !important; }
  .lv-steps-grid > div, .partners-stat-grid > div {
    border-right: none !important; padding-left: 0 !important;
  }
  .partners-group-head { grid-template-columns: 1fr !important; gap: 10px !important; }
  /* Footer-Markenblock + Steps-Phasen stapeln */
  .grk-foot-brand { grid-template-columns: 1fr !important; gap: 28px !important; }
  .grk-foot-brand > div:last-child { align-items: flex-start !important; }
  .grk-foot-brand > div:last-child p { text-align: left !important; }
  .grk-foot-brand > div:last-child > div { justify-content: flex-start !important; }
  .steps-phases { grid-template-columns: 1fr !important; }
  .steps-phases > div {
    border-right: none !important; padding-left: 0 !important; padding-right: 0 !important;
    border-top: 1px solid var(--grk-border); padding-top: 28px; margin-top: 28px;
  }
  .steps-phases > div:first-child { border-top: none; padding-top: 0; margin-top: 0; }
}
@media (max-width: 560px) {
  .grk-foot-cols, .lv-vertraege-grid, .lv-steps-grid, .partners-stat-grid {
    grid-template-columns: 1fr !important;
  }
}