:root {
  /* GIMA Türkis/Teal Branding Colors
     Farbton 187 = der von --primary. Nicht abweichen: bei Farbton 174 kippen
     die dunklen Stufen sichtbar ins Grüne, und Grün kommt sonst nirgends vor. */
  --gima-teal: hsl(187, 58%, 39%);
  --gima-teal-light: hsl(187, 45%, 55%);
  --gima-teal-dark: hsl(187, 65%, 28%);
  --gima-warm: hsl(35, 25%, 96%);
  --gima-earth: hsl(30, 15%, 45%);

  --background: hsl(0, 0%, 100%);
  --foreground: hsl(210, 20%, 20%);

  --card: hsl(0, 0%, 100%);
  --card-foreground: hsl(210, 20%, 20%);

  --popover: hsl(0, 0%, 100%);
  --popover-foreground: hsl(210, 20%, 20%);

  /* Primary: GIMA Teal */
  --primary: hsl(187, 100%, 40%);
  --primary-foreground: hsl(0, 0%, 100%);

  /* Secondary: Warm neutral */
  --secondary: hsl(35, 25%, 96%);
  --secondary-foreground: hsl(210, 20%, 20%);

  --muted: hsl(210, 15%, 96%);
  --muted-foreground: hsl(210, 10%, 45%);

  /* Accent: Lighter Teal */
  --accent: hsl(174, 45%, 92%);
  --accent-foreground: hsl(187, 100%, 40%);

  --destructive: hsl(0, 72%, 51%);
  --destructive-foreground: hsl(0, 0%, 100%);

  --border: hsl(210, 15%, 89%);
  --input: hsl(210, 15%, 89%);
  --ring: hsl(187, 100%, 40%);

  --radius: 0.5rem;

  /* Typography */
  --font-heading: 'Source Sans 3', 'Source Sans Pro', system-ui, sans-serif;
  --font-body: 'Source Sans 3', 'Source Sans Pro', system-ui, sans-serif;

  /* Shadows */
  --shadow-sm: 0 1px 2px 0 hsl(210 15% 20% / 0.05);
  --shadow-md: 0 4px 6px -1px hsl(210 15% 20% / 0.08), 0 2px 4px -2px hsl(210 15% 20% / 0.04);
  --shadow-lg: 0 10px 15px -3px hsl(210 15% 20% / 0.08), 0 4px 6px -4px hsl(210 15% 20% / 0.04);
}

/* Dark Mode */
.dark {
  --background: hsl(210, 20%, 10%);
  --foreground: hsl(210, 15%, 95%);

  --card: hsl(210, 20%, 12%);
  --card-foreground: hsl(210, 15%, 95%);

  --popover: hsl(210, 20%, 12%);
  --popover-foreground: hsl(210, 15%, 95%);

  --primary: hsl(174, 50%, 50%);
  --primary-foreground: hsl(210, 20%, 10%);

  --secondary: hsl(210, 15%, 18%);
  --secondary-foreground: hsl(210, 15%, 95%);

  --muted: hsl(210, 15%, 18%);
  --muted-foreground: hsl(210, 10%, 60%);

  --accent: hsl(174, 40%, 20%);
  --accent-foreground: hsl(174, 45%, 70%);

  --destructive: hsl(0, 62%, 40%);
  --destructive-foreground: hsl(0, 0%, 100%);

  --border: hsl(210, 15%, 22%);
  --input: hsl(210, 15%, 22%);
  --ring: hsl(174, 50%, 50%);
}

/* ========================================
   BASE STYLES
   ======================================== */

*, *::before, *::after {
  box-sizing: border-box;
  border-color: var(--border);
}

html {
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Anker-Sprungziele unter dem sticky Header (5.5rem) freistellen,
   sonst verdeckt er die Abschnittsueberschrift. */
[id] {
  scroll-margin-top: 7rem;
}

body {
  margin: 0;
  background-color: var(--background);
  color: var(--foreground);
  font-family: var(--font-body);
  line-height: 1.6;
}

/* ========================================
   TYPOGRAPHY
   ======================================== */

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
  font-weight: 600;
  letter-spacing: -0.025em;
  line-height: 1.2;
  margin-top: 0;
}

h1 { font-size: 2.25rem; }
h2 { font-size: 1.875rem; }
h3 { font-size: 1.5rem; }
h4 { font-size: 1.25rem; }

@media (min-width: 768px) {
  h1 { font-size: 3rem; }
  h2 { font-size: 2.25rem; }
  h3 { font-size: 1.875rem; }
  h4 { font-size: 1.5rem; }
}

@media (min-width: 1024px) {
  h1 { font-size: 3.75rem; }
}

a {
  color: inherit;
  text-decoration: none;
}

/* ========================================
   LAYOUT
   ======================================== */

.container-wide {
  max-width: 80rem;
  margin-left: auto;
  margin-right: auto;
  padding-left: 1rem;
  padding-right: 1rem;
}

.container-narrow {
  max-width: 56rem;
  margin-left: auto;
  margin-right: auto;
  padding-left: 1rem;
  padding-right: 1rem;
}

@media (min-width: 640px) {
  .container-wide,
  .container-narrow {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
  }
}

@media (min-width: 1024px) {
  .container-wide,
  .container-narrow {
    padding-left: 2rem;
    padding-right: 2rem;
  }
}

/* ========================================
   BUTTONS
   ======================================== */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  border-radius: var(--radius);
  font-size: 0.875rem;
  font-weight: 500;
  padding: 0.625rem 1.25rem;
  transition: all 0.2s;
  cursor: pointer;
  border: none;
  text-decoration: none;
}

.btn-primary {
  background-color: var(--primary);
  color: var(--primary-foreground);
}

.btn-primary:hover {
  opacity: 0.9;
}

.btn-outline {
  background-color: transparent;
  border: 1px solid var(--border);
  color: var(--foreground);
}

.btn-outline:hover {
  background-color: var(--accent);
  color: var(--accent-foreground);
}

.btn-ghost {
  background-color: transparent;
  color: var(--foreground);
}

.btn-ghost:hover {
  background-color: var(--accent);
  color: var(--accent-foreground);
}

/* ========================================
   CARDS
   ======================================== */

.card {
  background-color: var(--card);
  color: var(--card-foreground);
  border-radius: var(--radius);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-sm);
}

.card-hover:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
  transition: all 0.2s;
}

/* ========================================
   FOCUS STYLES
   ======================================== */

:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px var(--background), 0 0 0 4px var(--ring);
}

/* ========================================
   ANIMATIONS
   ======================================== */

@keyframes fade-in {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes fade-in-up {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes slide-in-right {
  from { opacity: 0; transform: translateX(20px); }
  to { opacity: 1; transform: translateX(0); }
}

@keyframes accordion-down {
  from { height: 0; }
  to { height: var(--accordion-height); }
}

@keyframes accordion-up {
  from { height: var(--accordion-height); }
  to { height: 0; }
}

.animate-fade-in { animation: fade-in 0.5s ease-out forwards; }
.animate-fade-in-up { animation: fade-in-up 0.6s ease-out forwards; }
.animate-slide-in-right { animation: slide-in-right 0.5s ease-out forwards; }

/* ========================================
   UTILITIES
   ======================================== */

.text-balance { text-wrap: balance; }
.text-primary-color { color: var(--primary); }
.bg-primary-color { background-color: var(--primary); }
.bg-muted-color { background-color: var(--muted); }
.text-muted-fg { color: var(--muted-foreground); }
.border-color { border-color: var(--border); }

/* WordPress specific: hide admin bar gap */
.admin-bar .site-header {
  top: 32px;
}

@media (max-width: 782px) {
  .admin-bar .site-header {
    top: 46px;
  }
}