/* gamperlab-core.tokens.css – v2 (Kontrastwerte rechnerisch geprüft, WCAG 2.2)
   Kontrast = Verhältnis zu #ffffff / #f8fafc
   Architektur-Review: Claude Sonnet & Morpheus für Gamperlab
*/

@font-face {
  font-family: 'Gamperlab Font';
  src: url('./assets/fonts/GamperlabFont-Regular.woff') format('woff'),
       url('./assets/fonts/GamperlabFont-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Gamperlab Font';
  src: url('./assets/fonts/GamperlabFont-Semibold.woff') format('woff'),
       url('./assets/fonts/GamperlabFont-Semibold.ttf') format('truetype');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Gamperlab Font';
  src: url('./assets/fonts/GamperlabFont-Bold.woff') format('woff'),
       url('./assets/fonts/GamperlabFont-Bold.ttf') format('truetype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* Metrik-angepasster Fallback gegen Layout-Sprünge (Werte nach Messung der Font angepasst) */
@font-face {
  font-family: 'Gamperlab Fallback';
  src: local('Arial');
  size-adjust: 100%;
  ascent-override: 92%;
  descent-override: 24%;
  line-gap-override: 0%;
}

:root {
  /* Canvas & Flächen (Daylight-First) */
  --gl-bg-canvas: #f8fafc;
  --gl-surface-card: #ffffff;
  --gl-surface-border: rgba(15, 23, 42, 0.10);
  --gl-surface-border-strong: #64748b;           /* Fokus/Hover, ≥ 3:1 */
  --gl-surface-glass: rgba(255, 255, 255, 0.72); /* nur über Visuals/Verläufen */

  /* Typografie (WCAG 2.2 AAA Konformität auf Weiß / #f8fafc) */
  --gl-font-family: 'Gamperlab Font', 'Gamperlab Fallback', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --gl-text-primary:   #0f172a;  /* 17,9 / 17,1  AAA */
  --gl-text-secondary: #334155;  /* 10,4 / 9,9   AAA */
  --gl-text-muted:     #475569;  /*  7,6 / 7,2   AAA (vorher #64748b = nur AA) */
  --gl-text-disabled:  #64748b;  /*  4,8 / 4,6   AA, nur für Deaktiviertes/Metadaten */

  /* Marken: Fläche/Icon/große Schrift (≥ 3:1) vs. Text/Links (AAA) */
  --gl-brand-hospitality:      #0284c7; /* 4,1 / 3,9  nur Flächen, Icons, ≥ 24 px */
  --gl-brand-hospitality-text: #075985; /* 7,6 / 7,2  AAA */
  --gl-brand-cleartap:         #059669; /* 3,8 / 3,6  nur Flächen, Icons, ≥ 24 px */
  --gl-brand-cleartap-text:    #065f46; /* 7,7 / 7,3  AAA */
  --gl-brand-clearlee:         #b45309; /* 5,0 / 4,8  AA (Fläche) */
  --gl-brand-clearlee-text:    #92400e; /* 7,1 / 6,8  AAA */

  /* Typo-Skala (Clamped für monumentalen 5-Sekunden-Hero) */
  --gl-fs-hero: clamp(2.5rem, 6vw, 4.5rem);   /* 40–72 px */
  --gl-fs-h2:   clamp(1.6rem, 3vw, 2.25rem);
  --gl-fs-h3:   clamp(1.15rem, 1.6vw, 1.35rem);
  --gl-fs-body: 1.0625rem;                    /* 17 px */
  --gl-fs-small: 0.9375rem;
  --gl-lh-hero: 1.05;
  --gl-lh-body: 1.55;
  --gl-fs-legal-h1: 1.5rem;
  --gl-fs-legal-h2: 1.15rem;

  /* Form & Elevation */
  --gl-radius-card: 16px;
  --gl-radius-pill: 9999px;
  --gl-space-bento: 16px;

  /* Schatten */
  --gl-shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.05);
  --gl-shadow-md: 0 8px 24px -8px rgba(15, 23, 42, 0.10);

  /* Blur sparsam: nur Sticky-Nav und Floating Cards */
  --gl-backdrop-blur: blur(12px);

  /* Glaskarten-Tokens (Standardisiert für Foto-Bänder & Highlights gem. Gamperlab UX) */
  --glass-bg: rgba(255, 255, 255, 0.78);
  --glass-blur: blur(14px);
  --glass-border: 1px solid rgba(255, 255, 255, 0.45);
  --glass-shadow: 0 8px 32px rgba(15, 23, 42, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.60);
  --glass-r: 16px;
  --glass-t1: #0f172a;
  --glass-t2: #334155;
}

body {
  font-family: var(--gl-font-family);
  font-size: var(--gl-fs-body);
  line-height: var(--gl-lh-body);
  color: var(--gl-text-primary);
  background: var(--gl-bg-canvas);
  font-variant-numeric: tabular-nums; /* Finanzzahlen sauber ausgerichtet */
}

h1.gl-hero { 
  font-size: var(--gl-fs-hero); 
  line-height: var(--gl-lh-hero); 
  letter-spacing: -0.02em; 
  font-weight: 700; 
}

/* Bento-Grid System (12-Spalten-Flexibilität) */
.gl-bento { 
  display: grid; 
  gap: var(--gl-space-bento); 
  grid-template-columns: repeat(12, 1fr); 
}

.gl-tile {
  background: var(--gl-surface-card);
  border: 1px solid var(--gl-surface-border);
  border-radius: var(--gl-radius-card);
  box-shadow: var(--gl-shadow-sm);
  padding: 24px;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.gl-tile--l { grid-column: span 8; }
.gl-tile--m { grid-column: span 4; }
.gl-tile--s { grid-column: span 3; }
.gl-tile--full { grid-column: span 12; }

.gl-tile:is(a, button):hover { 
  border-color: var(--gl-surface-border-strong); 
  box-shadow: var(--gl-shadow-md); 
}

.gl-tile:focus-visible, a:focus-visible, button:focus-visible {
  outline: 3px solid var(--gl-surface-border-strong); 
  outline-offset: 2px;
}

@media (max-width: 800px) { 
  .gl-tile--l, .gl-tile--m, .gl-tile--s { 
    grid-column: span 12; 
  } 
}

/* Glass nur dort, wo etwas dahinter liegt (Sticky Nav, Floating Cards) */
.gl-glass { 
  background: var(--gl-surface-glass); 
  backdrop-filter: var(--gl-backdrop-blur); 
  -webkit-backdrop-filter: var(--gl-backdrop-blur);
  border: 1px solid var(--gl-surface-border); 
}

/* Status-Chip (Text immer in -text-Farbe) */
.gl-chip { 
  display: inline-flex; 
  align-items: center;
  gap: 6px; 
  padding: 4px 12px; 
  border-radius: var(--gl-radius-pill);
  border: 1px solid var(--gl-surface-border); 
  font-size: var(--gl-fs-small); 
  color: var(--gl-text-secondary); 
  background: #ffffff; 
  font-weight: 500;
}

/* Barrierefreiheit & Motion Hygiene */
@media (prefers-reduced-motion: reduce) { 
  *, *::before, *::after { 
    animation: none !important; 
    transition: none !important; 
  } 
  .glass-card {
    transform: none !important;
  }
}

/* Wiederverwendbare Klasse .glass-card (Gamperlab Standard) */
.glass-card {
  background: var(--glass-bg);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border: var(--glass-border);
  box-shadow: var(--glass-shadow);
  border-radius: var(--glass-r);
  color: var(--glass-t1);
  padding: 22px 24px;
  position: relative;
  overflow: hidden;
  max-width: 380px;
  width: 100%;
  flex-shrink: 0;
  transform: translate3d(0, 0, 0);
  will-change: transform;
  cursor: default;
}

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .glass-card {
    background: #ffffff !important;
  }
}

.glass-card:is(a) {
  text-decoration: none;
  cursor: pointer;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.glass-card:is(a):hover {
  border-color: rgba(255, 255, 255, 0.75);
  box-shadow: 0 12px 36px rgba(15, 23, 42, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.80);
}

.glass-card:is(a):focus-visible {
  outline: 3px solid #0284c7;
  outline-offset: 3px;
}