/* © Gerald Pögl – hunter-id.com */
/* ==========================================================================
   KI-Workshop Platform — styles.css
   "Natur Editorial" Theme - Mobile-First

   LAYER ORDER:
   1. tokens.css    → design tokens (single source of truth)
   2. components.css → reusable patterns (section, card, btn, grid)
   3. styles.css     → legacy / page-specific styles
   ========================================================================== */

/* ==========================================================================
   TABLE OF CONTENTS
   ==========================================================================

   GROUP A: FOUNDATION
   01. Reset & Base Styles .............. L70
   02. Layout Containers ................ L115
   03. Typography ....................... L156

   GROUP B: COMPONENTS
   04. Cards & Surfaces ................. L236
   05. Buttons .......................... L504
   06. Grid Helpers ..................... L541

   GROUP C: PAGE SECTIONS
   07. Hero Section ..................... L617
   08. Navigation Styles ................ L775
   09. Pills & Badges ................... L961
   10. Quotes & Testimonials ............ L1022
   11. Form Elements .................... L1143
   12. Footer ........................... L1227
   13. Logo Bar ......................... L1358

   GROUP D: FEATURES
   14. Methodology Steps ................ L1426
   15. Events ........................... L1603
   16. Resources ........................ L1675
   17. Photo Grid ....................... L1734
   18. Final CTA Section ................ L1776
   19. Gamification UI .................. L1817
   20. Check List & Benefits ............ L1987
   21. Underline Link Animation ......... L2368
   22. Dashboard Layout ................. L2398
   23. Sidebar Navigation ............... L2476
   24. Content Gating ................... L2637
   25. Hunter-ID Card Categories ........ L2743

   GROUP E: CONTENT TYPES
   26. Utility Classes .................. L2964
   27. Legal Pages ...................... L3011
   27b. Blog Article Styles ............. L3337

   GROUP F: UTILITIES & STATES
   28. Accessibility .................... L3509
   29. Tagline Animation ................ L3570
   30. Print Styles ..................... L3667
   ========================================================================== */

@import url("tokens.css");
@import url("components.css");



/* ==========================================================================
   GROUP A: FOUNDATION (Reset, Layout, Typography)
   ========================================================================== */

/* ==========================================================================
   SECTION: 01. RESET & BASE STYLES
   Description: CSS reset and foundational body styles
   Lines: ~40
   ========================================================================== */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

html,
body {
  height: 100%;
}

body {
  margin: 0;
  font-family: var(--font-sans);
  color: var(--color-text);
  background: var(--color-bg);
  line-height: 1.6;
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img {
  max-width: 100%;
  display: block;
}

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

button {
  font-family: inherit;
}

/* ==========================================================================
   SECTION: 02. LAYOUT CONTAINERS
   Description: Container widths and section spacing utilities
   Lines: ~35
   ========================================================================== */
/* .container defined in components.css */

.container-sm {
  max-width: 720px;
  margin-inline: auto;
  padding-inline: var(--space-4);
}

.container-lg {
  max-width: 1400px;
  margin-inline: auto;
  padding-inline: var(--space-4);
}

/* Global section padding removed — use .section class (defined in components.css) */

.section-alt {
  /* Einheitlicher Hintergrund - keine Farbwechsel */
}

/* .section-header defined in components.css */

.section-intro {
  font-size: var(--text-base);
  color: var(--color-text-muted);
  margin: var(--space-2) auto 0;
  max-width: 60ch;
  line-height: var(--leading-normal);
}

@media (min-width: 768px) {
  .section-intro {
    font-size: var(--text-md);
  }
}

/* ==========================================================================
   SECTION: 03. TYPOGRAPHY
   Description: Headings, text utilities, and font styles
   Lines: ~70
   ========================================================================== */

/* Hero Headline (legacy pages) */
.h-hero {
  font-family: var(--font-serif);
  font-weight: 700;
  letter-spacing: var(--tracking-tight);
  line-height: 1.08;
  font-size: 36px;
  margin: 0;
}

@media (min-width: 768px) {
  .h-hero { font-size: 60px; }
}

@media (min-width: 1024px) {
  .h-hero { font-size: 72px; }
}

.h-hero .highlight {
  color: var(--color-primary);
}

/* .h-section, .kicker defined in components.css */

/* Subhero Text */
.subhero {
  font-size: var(--text-lg);
  color: color-mix(in oklab, var(--color-text) 75%, #fff);
  margin: var(--space-2) 0 0;
  max-width: 64ch;
}

@media (min-width: 768px) {
  .subhero {
    font-size: var(--text-xl);
  }
}

/* --- Utility Typography Classes --- */
.muted {
  color: color-mix(in oklab, var(--color-text) 65%, #fff);
}

.small {
  font-size: 14px;
}

.mono {
  font-family: var(--font-mono);
}

.italic {
  font-style: italic;
}

/* DUPLICATE: .text-center also defined in components.css L492 */
/* Override: extends components.css base - kept for specificity in legacy pages */
.text-center {
  text-align: center;
}

.text-left {
  text-align: left;
}

.text-right {
  text-align: right;
}


/* ==========================================================================
   GROUP B: COMPONENTS (Cards, Buttons, Grids, Pills, Badges)
   ========================================================================== */

/* ==========================================================================
   SECTION: 04. CARDS & SURFACES
   Description: Card variants, topic lists, testimonial cards, stats, and prices
   Lines: ~260
   ========================================================================== */

/* .card, .card-link, .lead, .check-list defined in components.css */

.card.pad {
  padding: var(--space-3);
}

@media (min-width: 768px) {
  .card.pad {
    padding: calc(var(--space-3) + 4px);
  }
}

/* --- Topic List --- */
.topic-list {
  list-style: none;
  padding: 0;
  margin: 16px 0;
}

.topic-list li {
  position: relative;
  padding-left: 20px;
  margin-bottom: 14px;
  font-size: 15px;
  line-height: 1.55;
}

.topic-list li::before {
  content: "→";
  position: absolute;
  left: 0;
  top: 0;
  color: var(--color-accent);
  font-weight: 600;
}

.topic-list li strong {
  color: var(--color-text);
  font-weight: 600;
}

/* --- Icon Card --- */
.iconCard {
  padding: 24px;
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-border);
  background: rgba(255, 255, 255, 0.55);
  box-shadow: var(--shadow);
  transition: transform var(--duration-normal) var(--ease), box-shadow var(--duration-normal) var(--ease);
}

.iconCard:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-hover);
}

.icon {
  width: 48px;
  height: 48px;
  border-radius: 14px;
  border: 1px solid var(--color-border);
  background: color-mix(in oklab, var(--color-secondary) 70%, #fff);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 13px;
  color: color-mix(in oklab, var(--color-text) 75%, var(--color-primary));
}

.iconCard h4 {
  margin: 16px 0 8px;
  font-size: 17px;
  font-weight: 600;
}

.iconCard p {
  margin: 0;
  font-size: 14px;
  line-height: 1.55;
  color: color-mix(in oklab, var(--color-text) 70%, #fff);
}

/* --- Testimonial Card --- */
.tCard {
  padding: 18px;
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-border);
  background: rgba(255, 255, 255, 0.55);
  box-shadow: var(--shadow);
  transition: transform var(--duration-normal) var(--ease), box-shadow var(--duration-normal) var(--ease);
}

.tCard:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-hover);
}

.tQuote {
  margin: 0;
  font-size: 15px;
}

.tMeta {
  display: flex;
  gap: 12px;
  align-items: center;
  margin-top: 14px;
}

.tAvatar {
  width: 48px;
  height: 48px;
  border-radius: var(--radius-full);
  border: 1px solid var(--color-border);
  background: linear-gradient(135deg, rgba(204, 122, 51, 0.18), rgba(61, 122, 74, 0.16)), rgba(255, 255, 255, 0.65);
  flex-shrink: 0;
}

.tName {
  font-weight: 600;
  font-size: 13px;
}

.tRole {
  font-size: 12px;
  color: color-mix(in oklab, var(--color-text) 65%, #fff);
}

/* --- Stat Card --- */
.stat {
  padding: 16px;
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-border);
  background: rgba(255, 255, 255, 0.55);
  box-shadow: var(--shadow);
  transition: transform var(--duration-normal) var(--ease), box-shadow var(--duration-normal) var(--ease);
}

.stat:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-hover);
}

.statN {
  font-family: var(--font-serif);
  font-weight: 700;
  font-size: 34px;
  line-height: 1.1;
  margin: 0;
}

.statL {
  margin-top: 6px;
  font-size: 13px;
  color: color-mix(in oklab, var(--color-text) 65%, #fff);
}

/* --- Price Card --- */
.priceCard {
  background: var(--color-primary);
  color: var(--color-primary-fg);
  border-color: color-mix(in oklab, var(--color-primary), #000 10%);
  overflow: hidden;
  position: relative;
}

.priceCard::before {
  content: "";
  position: absolute;
  inset: -60px -60px auto auto;
  width: 240px;
  height: 240px;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.25), transparent 60%);
  transform: rotate(12deg);
}

.priceCard .pad {
  position: relative;
  z-index: 1;
}

.price {
  font-family: var(--font-serif);
  font-weight: 700;
  font-size: 42px;
  line-height: 1.1;
  margin: 10px 0 0;
}

.priceNote {
  opacity: 0.9;
  font-size: 13px;
  margin-top: 8px;
}

.priceCard .btn {
  background: var(--color-bg);
  color: var(--color-primary);
  border-color: rgba(255, 255, 255, 0.35);
}

/* --- Problem Grid & Cards --- */
/* TODO: Potentially unused — verify before removing */
.problem-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
}

@media (min-width: 768px) {
  .problem-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 28px;
  }
}

/* TODO: Potentially unused — verify before removing */
.problem-card {
  padding: 24px;
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-border);
  background: rgba(255, 255, 255, 0.55);
  box-shadow: var(--shadow);
  transition: transform var(--duration-normal) var(--ease), box-shadow var(--duration-normal) var(--ease);
  display: flex;
  flex-direction: column;
}

.problem-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-hover);
}

/* TODO: Potentially unused — verify before removing */
.problem-icon {
  width: 48px;
  height: 48px;
  border-radius: 14px;
  border: 1px solid var(--color-border);
  background: color-mix(in oklab, var(--color-secondary) 70%, #fff);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-mono);
  font-weight: 700;
  color: color-mix(in oklab, var(--color-text) 75%, var(--color-primary));
}

.problem-card h4 {
  margin: 16px 0 8px;
  font-size: 18px;
}

.problem-card p {
  margin: 0;
  font-size: 14px;
  color: color-mix(in oklab, var(--color-text) 70%, #fff);
  flex: 1;
}

/* ==========================================================================
   SECTION: 05. BUTTONS
   Description: Button variants and states beyond components.css base
   Lines: ~35
   ========================================================================== */
/* .btn, .btn.primary, .btn.lg defined in components.css */

.btn.secondary {
  background: var(--color-secondary);
  border-color: var(--color-border);
  color: var(--color-text);
}

.btn.accent {
  background: var(--color-accent);
  border-color: color-mix(in oklab, var(--color-accent), #000 10%);
  color: #fff;
}

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

.btn.sm {
  padding: 10px 14px;
  min-height: 40px;
  font-size: var(--text-sm);
}

.btn:disabled,
.btn.disabled {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}

/* ==========================================================================
   SECTION: 06. GRID HELPERS
   Description: Grid layouts and flex utilities
   Lines: ~70
   ========================================================================== */
/* .grid-2, .grid-3 defined in components.css */

.grid {
  display: grid;
  gap: var(--space-3);
}

.grid-4 {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--grid-gap);
}

@media (min-width: 768px) {
  .grid-4 {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1024px) {
  .grid-4 {
    grid-template-columns: repeat(4, 1fr);
  }
}

/* --- Flex Helpers --- */
.flex {
  display: flex;
}

.flex-col {
  flex-direction: column;
}

.flex-wrap {
  flex-wrap: wrap;
}

.items-center {
  align-items: center;
}

.items-start {
  align-items: flex-start;
}

.justify-between {
  justify-content: space-between;
}

.justify-center {
  justify-content: center;
}

.gap-sm {
  gap: 8px;
}

.gap-md {
  gap: 16px;
}

.gap-lg {
  gap: 24px;
}


/* ==========================================================================
   GROUP C: PAGE SECTIONS (Hero, Navigation, Footer, CTA)
   ========================================================================== */

/* ==========================================================================
   SECTION: 07. HERO SECTION
   Description: Hero layouts, profiles, avatars, and CTA patterns
   Lines: ~155
   ========================================================================== */
/* Hero base padding (legacy pages without --editorial) */
.hero {
  padding-top: clamp(6rem, 9vw, 8rem);
  padding-bottom: var(--space-5);
}

.heroWrap,
.hero-wrap {
  display: grid;
  grid-template-columns: 1fr;
  gap: 32px;
  align-items: center;
}

@media (min-width: 960px) {
  .heroWrap,
  .hero-wrap {
    grid-template-columns: 1.05fr 0.95fr;
    gap: 40px;
  }
}

.hero-wrap--single {
  display: block;
}

.hero-image {
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow);
}

.hero-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.heroCard,
.hero-card {
  border-radius: var(--radius-lg);
  padding: 20px;
  background: color-mix(in oklab, var(--color-surface) 85%, var(--color-secondary));
  border: 1px solid var(--color-border);
  box-shadow: var(--shadow);
}

@media (min-width: 768px) {
  .heroCard,
  .hero-card {
    padding: 24px;
  }
}

.heroMeta {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 14px;
}

/* --- Profile (legacy hero pattern) --- */
.profile {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

@media (min-width: 600px) {
  .profile {
    flex-direction: row;
    align-items: flex-start;
    gap: var(--space-4);
  }
}

/* --- Avatar --- */
.avatar {
  width: 80px;
  height: 80px;
  border-radius: var(--radius-full);
  border: 3px solid var(--color-surface);
  background:
    radial-gradient(circle at 30% 30%, rgba(204, 122, 51, 0.30), transparent 55%),
    radial-gradient(circle at 70% 60%, rgba(61, 122, 74, 0.25), transparent 58%),
    var(--color-secondary);
  box-shadow: var(--shadow-md);
  overflow: hidden;
  flex-shrink: 0;
}

.avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

@media (min-width: 768px) {
  .avatar {
    width: 100px;
    height: 100px;
  }
}

.avatar-lg {
  width: 150px;
  height: 150px;
}

@media (min-width: 768px) {
  .avatar-lg {
    width: 200px;
    height: 200px;
  }
}

.avatarNote {
  font-size: 12px;
  color: color-mix(in oklab, var(--color-text) 60%, #fff);
  margin-top: 10px;
}

/* --- Hero CTA --- */
.hero-cta {
  margin-top: var(--space-4);
  display: flex;
  gap: var(--space-2);
  flex-wrap: wrap;
}

/* --- Controlled Linebreak Hero Title --- */
.hero-title {
  font-family: var(--font-serif);
  font-weight: 700;
  margin: 0;
  line-height: 0.95;
  letter-spacing: var(--tracking-tight);
  font-size: clamp(2.2rem, 4.2vw, 4.6rem);
}

.hero-title span {
  display: block;
}

.hero-title .l3 {
  color: var(--color-primary);
  font-weight: 700;
}

/* .hero--editorial, .hero-editorial, .hero-eyebrow,
   .hero-title--single, .hero-micro defined in components.css */

/* ==========================================================================
   SECTION: 08. NAVIGATION STYLES
   Description: Main nav, mobile menu, and nav CTA button
   Lines: ~180
   ========================================================================== */

/* --- Main Navigation --- */
.nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  background: rgba(247, 244, 239, 0.75);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid color-mix(in oklab, var(--color-border) 70%, transparent);
  transition: transform var(--duration-normal) var(--ease);
}

.nav.hidden {
  transform: translateY(-100%);
}

.nav-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: var(--header-height);
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--space-4);
}

.nav-logo {
  font-family: var(--font-serif);
  font-weight: 700;
  font-size: 18px;
  text-decoration: none;
  color: var(--color-text);
  display: flex;
  align-items: center;
  gap: 6px;
}

.nav-links {
  display: none;
  gap: 24px;
  list-style: none;
  margin: 0;
  padding: 0;
}

@media (min-width: 768px) {
  .nav-links {
    display: flex;
  }
}

.nav-links a {
  text-decoration: none;
  font-weight: 500;
  font-size: 14px;
  color: color-mix(in oklab, var(--color-text) 75%, #fff);
  transition: color var(--duration-fast) var(--ease);
}

.nav-links a:hover,
.nav-links a.active {
  color: var(--color-primary);
}

.nav-toggle {
  display: flex;
  flex-direction: column;
  gap: 5px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 8px;
  z-index: 1001;
}

@media (min-width: 768px) {
  .nav-toggle {
    display: none;
  }
}

.nav-toggle span {
  display: block;
  width: 24px;
  height: 2px;
  background: var(--color-text);
  border-radius: 2px;
  transition: transform var(--duration-fast) var(--ease);
}

.nav-toggle[aria-expanded="true"] span:nth-child(1) {
  transform: rotate(45deg) translateY(7px);
}

.nav-toggle[aria-expanded="true"] span:nth-child(2) {
  opacity: 0;
}

.nav-toggle[aria-expanded="true"] span:nth-child(3) {
  transform: rotate(-45deg) translateY(-7px);
}

/* --- Mobile Menu --- */
.nav-menu,
.mobile-menu {
  position: fixed;
  top: 0;
  right: 0;
  width: 100%;
  max-width: 320px;
  height: 100vh;
  background: var(--color-bg);
  border-left: 1px solid var(--color-border);
  padding: 80px 24px 24px;
  list-style: none;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
  transform: translateX(100%);
  transition: transform var(--duration-normal) var(--ease);
  box-shadow: -8px 0 32px rgba(61, 53, 45, 0.1);
  z-index: 999;
}

.nav-menu.open,
.mobile-menu.open {
  transform: translateX(0);
}

.nav-menu li a,
.mobile-menu a {
  display: block;
  padding: 14px 16px;
  font-weight: 500;
  border-radius: 12px;
  transition: background var(--duration-normal) var(--ease);
  text-decoration: none;
}

.nav-menu li a:hover,
.mobile-menu a:hover {
  background: var(--color-secondary);
}

@media (min-width: 768px) {
  .nav-menu {
    position: static;
    width: auto;
    max-width: none;
    height: auto;
    background: transparent;
    border: none;
    padding: 0;
    flex-direction: row;
    align-items: center;
    gap: 4px;
    transform: none;
    box-shadow: none;
  }

  .nav-menu li a {
    padding: 10px 14px;
  }
}

/* --- Nav CTA Button --- */
.btn-nav {
  background: var(--color-primary) !important;
  color: var(--color-primary-fg) !important;
  border-color: color-mix(in oklab, var(--color-primary), #000 10%) !important;
  padding: 10px 18px !important;
}

.btn-nav:hover {
  box-shadow: 0 8px 20px rgba(61, 122, 74, 0.20);
}

/* ==========================================================================
   SECTION: 09. PILLS & BADGES
   Description: Small visual indicators and badge components
   Lines: ~60
   ========================================================================== */
.pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border-radius: var(--radius-full);
  padding: 8px 12px;
  border: 1px solid var(--color-border);
  background: rgba(255, 255, 255, 0.5);
  font-size: 13px;
}

.dot {
  width: 8px;
  height: 8px;
  border-radius: var(--radius-full);
  background: var(--color-primary);
  box-shadow: 0 0 0 6px rgba(61, 122, 74, 0.12);
}

.badge {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  padding: 12px;
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-border);
  background: rgba(255, 255, 255, 0.55);
  box-shadow: var(--shadow);
}

.badge .seal {
  width: 44px;
  height: 44px;
  border-radius: var(--radius-full);
  border: 1px solid var(--color-border);
  background: color-mix(in oklab, var(--color-accent) 18%, #fff);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-mono);
  font-weight: 700;
  color: color-mix(in oklab, var(--color-accent) 85%, var(--color-text));
  flex: 0 0 auto;
}

.badge h5 {
  margin: 0;
  font-size: 14px;
}

.badge p {
  margin: 6px 0 0;
  font-size: 13px;
  color: color-mix(in oklab, var(--color-text) 65%, #fff);
}

/* ==========================================================================
   SECTION: 10. QUOTES & TESTIMONIALS
   Description: Quote boxes and testimonial grids
   Lines: ~120
   ========================================================================== */
.quote {
  background: color-mix(in oklab, var(--color-secondary) 60%, transparent);
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
}

.quoteBox {
  padding: 26px 18px;
  border-radius: var(--radius-lg);
  background: rgba(255, 255, 255, 0.55);
  border: 1px solid var(--color-border);
  box-shadow: var(--shadow);
  position: relative;
}

.quoteText {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 600;
  font-size: 24px;
  line-height: 1.25;
  margin: 0;
}

@media (min-width: 768px) {
  .quoteText {
    font-size: 34px;
  }
}

.quoteMark {
  font-family: var(--font-serif);
  font-size: 56px;
  line-height: 1;
  color: color-mix(in oklab, var(--color-accent) 65%, var(--color-text));
  opacity: 0.25;
  position: absolute;
  top: 10px;
  left: 16px;
  user-select: none;
}

.quoteBy {
  margin-top: 14px;
  font-size: 13px;
  color: color-mix(in oklab, var(--color-text) 65%, #fff);
}

/* --- Testimonial Grid --- */
.testimonial-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
}

@media (min-width: 768px) {
  .testimonial-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

.testimonial-card {
  padding: 24px;
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-border);
  background: rgba(255, 255, 255, 0.55);
  box-shadow: var(--shadow);
  transition: transform var(--duration-normal) var(--ease), box-shadow var(--duration-normal) var(--ease);
}

.testimonial-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-hover);
}

.testimonial-quote {
  margin: 0;
  font-size: 15px;
  line-height: 1.6;
  font-style: italic;
}

.testimonial-author {
  display: flex;
  gap: 14px;
  align-items: center;
  margin-top: 20px;
}

.testimonial-avatar {
  width: 48px;
  height: 48px;
  border-radius: var(--radius-full);
  border: 1px solid var(--color-border);
  background: linear-gradient(135deg, rgba(204, 122, 51, 0.18), rgba(61, 122, 74, 0.16)), rgba(255, 255, 255, 0.65);
  flex-shrink: 0;
  overflow: hidden;
}

.testimonial-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.testimonial-name {
  font-weight: 600;
  font-size: 14px;
}

.testimonial-role {
  font-size: 12px;
  color: color-mix(in oklab, var(--color-text) 65%, #fff);
  margin-top: 2px;
}

/* ==========================================================================
   SECTION: 11. FORM ELEMENTS
   Description: Form inputs, labels, checkboxes, and error states
   Lines: ~80
   ========================================================================== */
.form-group {
  margin-bottom: 16px;
}

.form-label {
  display: block;
  font-weight: 500;
  font-size: 14px;
  margin-bottom: 6px;
  color: var(--color-text);
}

.form-input,
.form-textarea,
.form-select {
  width: 100%;
  padding: 12px 16px;
  font-family: var(--font-sans);
  font-size: 16px;
  border: 1px solid var(--color-border);
  border-radius: 12px;
  background: var(--color-surface);
  color: var(--color-text);
  transition: border-color var(--duration-fast) var(--ease), box-shadow var(--duration-fast) var(--ease);
}

.form-input:focus,
.form-textarea:focus,
.form-select:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(61, 122, 74, 0.15);
}

.form-input::placeholder,
.form-textarea::placeholder {
  color: color-mix(in oklab, var(--color-text) 50%, #fff);
}

.form-textarea {
  min-height: 120px;
  resize: vertical;
}

.form-select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%233D352D' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  padding-right: 40px;
}

.form-checkbox,
.form-radio {
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
}

.form-checkbox input,
.form-radio input {
  width: 20px;
  height: 20px;
  accent-color: var(--color-primary);
}

.form-error {
  color: var(--color-error);
  font-size: 13px;
  margin-top: 4px;
}

.form-hint {
  color: color-mix(in oklab, var(--color-text) 60%, #fff);
  font-size: 13px;
  margin-top: 4px;
}

/* ==========================================================================
   SECTION: 12. FOOTER
   Description: Footer grid, columns, bottom bar, and language switch
   Lines: ~130
   ========================================================================== */
footer,
.footer {
  padding: 48px 0 0;
  border-top: 1px solid var(--color-border);
  background: var(--color-text);
  color: white;
}

/* --- Footer Grid --- */
.footer-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 32px;
  padding-bottom: 40px;
}

@media (min-width: 768px) {
  .footer-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 48px;
  }
}

.footer-col h4 {
  font-family: var(--font-serif);
  font-size: 16px;
  font-weight: 600;
  margin-bottom: 16px;
  color: white;
}

.footer-col ul {
  list-style: disc;
  padding-left: 20px;
  margin: 0;
}

.footer-col li {
  margin-bottom: 8px;
}

.footer-col a {
  font-size: 14px;
  color: rgba(255, 255, 255, 0.85);
  text-decoration: none;
  transition: color var(--duration-fast) var(--ease);
}

.footer-col a:hover {
  color: white;
}

.footer-col p {
  font-size: 14px;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.85);
  margin: 0;
}

/* --- Footer Bottom Bar --- */
.footer-bottom {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 20px 0;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  font-size: 14px;
  color: rgba(255, 255, 255, 0.75);
  text-align: center;
}

@media (min-width: 992px) {
  .footer-bottom {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    text-align: left;
  }
}

.footer-copy {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.7);
  margin: 0;
}

.footer-brands {
  display: flex;
  gap: 16px;
  align-items: center;
  justify-content: center;
}

.footer-brands span {
  font-size: 14px;
  color: rgba(255, 255, 255, 0.7);
}

.footer-brands .brand-highlight {
  font-weight: 700;
  color: var(--color-accent);
}

.footer-tagline {
  font-size: 14px;
  color: rgba(255, 255, 255, 0.85);
  margin: 0;
}

.footer .lang-switch {
  display: flex;
  gap: 8px;
}

.footer .lang-switch a {
  font-size: 14px;
  color: rgba(255, 255, 255, 0.6);
  text-decoration: none;
  transition: color var(--duration-fast) var(--ease);
}

.footer .lang-switch a:hover,
.footer .lang-switch a.active {
  color: white;
}

/* ==========================================================================
   SECTION: 13. LOGO BAR
   Description: Client/partner logo scrolling bar
   Lines: ~60
   ========================================================================== */
.logoBar,
.logo-bar {
  padding: 24px 0;
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
  background: color-mix(in oklab, var(--color-secondary) 55%, transparent);
}

.logos {
  display: flex;
  gap: 14px;
  overflow-x: auto;
  padding: 12px 0;
  -webkit-overflow-scrolling: touch;
  -ms-overflow-style: none;
  scrollbar-width: none;
}

.logos::-webkit-scrollbar {
  display: none;
}

.logo,
.logo-placeholder {
  min-width: 140px;
  height: 48px;
  border-radius: 14px;
  border: 1px solid var(--color-border);
  background: rgba(255, 255, 255, 0.55);
  display: flex;
  align-items: center;
  justify-content: center;
  color: color-mix(in oklab, var(--color-text) 60%, #fff);
  font-size: 12px;
  filter: grayscale(0.3);
  transition: filter var(--duration-normal) var(--ease), transform var(--duration-normal) var(--ease);
  flex-shrink: 0;
  padding: 8px 16px;
  overflow: hidden;
}

.logo img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

.logo-placeholder {
  border-style: dashed;
  border-color: color-mix(in oklab, var(--color-border), var(--color-text) 12%);
}

.logo:hover,
.logo-placeholder:hover {
  filter: grayscale(0);
  transform: translateY(-2px);
}


/* ==========================================================================
   GROUP D: FEATURES (Dashboard, Sidebar, Content Gating, Gamification)
   ========================================================================== */

/* ==========================================================================
   SECTION: 14. METHODOLOGY STEPS
   Description: Method step cards with visuals and numbering
   Lines: ~175
   ========================================================================== */

/* --- Container for method steps --- */
.method-steps {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.step,
.method-step {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: auto auto;
  gap: 20px;
  padding: 24px;
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-border);
  background: rgba(255, 255, 255, 0.55);
  box-shadow: var(--shadow);
  position: relative;
  overflow: hidden;
}

@media (min-width: 768px) {
  .step,
  .method-step {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto;
    align-items: center;
    padding: 32px 32px 32px 40px;
    gap: 32px;
  }
}

.stepNum,
.step-number {
  font-family: var(--font-serif);
  font-weight: 700;
  font-size: 48px;
  line-height: 1;
  color: color-mix(in oklab, var(--color-primary) 50%, var(--color-text));
  opacity: 0.12;
  position: absolute;
  top: 12px;
  right: 16px;
  user-select: none;
  pointer-events: none;
}

@media (min-width: 768px) {
  .stepNum,
  .step-number {
    font-size: 64px;
    top: 16px;
    right: 20px;
  }
}

.step-content {
  position: relative;
  z-index: 1;
}

.step h4,
.step-content h4 {
  margin: 0;
  font-family: var(--font-serif);
  font-weight: 700;
  font-size: 18px;
  line-height: 1.3;
}

@media (min-width: 768px) {
  .step h4,
  .step-content h4 {
    font-size: 20px;
  }
}

.step p,
.step-content p {
  margin: 10px 0 0;
  font-size: 14px;
  line-height: 1.6;
  color: color-mix(in oklab, var(--color-text) 75%, #fff);
}

@media (min-width: 768px) {
  .step p,
  .step-content p {
    font-size: 15px;
  }
}

.media,
.step-visual {
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-border);
  aspect-ratio: 16/9;
  width: 100%;
  max-width: 100%;
  margin: 0;
  background:
    linear-gradient(135deg, rgba(61, 122, 74, 0.12), rgba(204, 122, 51, 0.10)),
    rgba(255, 255, 255, 0.65);
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.step-visual img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  position: absolute;
  inset: 0;
}

.problem-card-image {
  width: 100%;
  height: 200px;
  border-radius: var(--radius-md);
  overflow: hidden;
  margin: 0 0 20px 0;
  padding: 0;
  display: block;
}

@media (min-width: 768px) {
  .problem-card-image {
    height: 180px;
  }
}

.problem-card-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
}

.section-hero-image {
  width: 100%;
  max-width: 350px;
  margin: 0 auto 32px;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow);
}

.section-hero-image img {
  width: 100%;
  height: auto;
  display: block;
}

.media span,
.step-visual span {
  position: absolute;
  bottom: 12px;
  left: 12px;
  font-size: 12px;
  background: rgba(255, 255, 255, 0.75);
  border: 1px solid var(--color-border);
  padding: 6px 10px;
  border-radius: var(--radius-full);
  color: color-mix(in oklab, var(--color-text) 70%, #fff);
  font-family: var(--font-mono);
}

/* ==========================================================================
   SECTION: 15. EVENTS
   Description: Event cards with date and info layout
   Lines: ~70
   ========================================================================== */
.event {
  display: flex;
  gap: 14px;
  align-items: stretch;
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-border);
  background: rgba(255, 255, 255, 0.55);
  box-shadow: var(--shadow);
  overflow: hidden;
  transition: transform var(--duration-normal) var(--ease), box-shadow var(--duration-normal) var(--ease);
}

.event:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-hover);
}

.event .date {
  background: color-mix(in oklab, var(--color-secondary) 75%, #fff);
  padding: 14px;
  min-width: 110px;
  border-right: 1px solid var(--color-border);
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: center;
}

.event .date .d {
  font-family: var(--font-serif);
  font-weight: 700;
  font-size: 20px;
  line-height: 1;
}

.event .date .m {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-top: 8px;
  color: color-mix(in oklab, var(--color-text) 60%, #fff);
}

.event .info {
  padding: 14px 14px 14px 0;
  flex: 1;
}

.event .info h4 {
  margin: 12px 14px 6px;
  font-size: 16px;
}

.event .info p {
  margin: 0 14px 14px;
  font-size: 13px;
  color: color-mix(in oklab, var(--color-text) 65%, #fff);
}

.event .info a {
  margin: 0 14px 14px;
  display: inline-block;
  font-weight: 600;
  color: color-mix(in oklab, var(--color-primary) 85%, var(--color-text));
}

/* ==========================================================================
   SECTION: 16. RESOURCES
   Description: Resource cards with cover images
   Lines: ~55
   ========================================================================== */
.resource {
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-border);
  background: rgba(255, 255, 255, 0.55);
  box-shadow: var(--shadow);
  overflow: hidden;
  transition: transform var(--duration-normal) var(--ease), box-shadow var(--duration-normal) var(--ease);
}

.resource:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-hover);
}

.resource .cover {
  aspect-ratio: 3/4;
  background:
    linear-gradient(135deg, rgba(61, 122, 74, 0.12), rgba(204, 122, 51, 0.12)),
    rgba(255, 255, 255, 0.75);
  position: relative;
}

.resource .cover span {
  position: absolute;
  left: 12px;
  bottom: 12px;
  font-family: var(--font-mono);
  font-size: 12px;
  background: rgba(255, 255, 255, 0.65);
  border: 1px solid var(--color-border);
  padding: 6px 10px;
  border-radius: var(--radius-full);
  color: color-mix(in oklab, var(--color-text) 65%, #fff);
}

.resource .body {
  padding: 14px;
}

.resource .body h4 {
  margin: 0;
  font-size: 15px;
}

.resource .body p {
  margin: 6px 0 10px;
  font-size: 13px;
  color: color-mix(in oklab, var(--color-text) 65%, #fff);
}

.resource .body .btn {
  width: 100%;
}

/* ==========================================================================
   SECTION: 17. PHOTO GRID
   Description: Photo gallery grid layout
   Lines: ~40
   ========================================================================== */
.photoGrid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  margin-top: 16px;
}

@media (min-width: 768px) {
  .photoGrid {
    grid-template-columns: repeat(3, 1fr);
  }
}

.photo {
  aspect-ratio: 4/3;
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-border);
  background:
    linear-gradient(135deg, rgba(61, 122, 74, 0.14), rgba(204, 122, 51, 0.10)),
    rgba(255, 255, 255, 0.55);
  box-shadow: var(--shadow);
  position: relative;
  overflow: hidden;
}

.photo span {
  position: absolute;
  bottom: 12px;
  left: 12px;
  font-size: 12px;
  color: color-mix(in oklab, var(--color-text) 62%, #fff);
  background: rgba(255, 255, 255, 0.55);
  border: 1px solid var(--color-border);
  padding: 6px 10px;
  border-radius: var(--radius-full);
}

/* ==========================================================================
   SECTION: 18. FINAL CTA SECTION
   Description: Full-width CTA with inverted colors
   Lines: ~40
   ========================================================================== */
/* .section-cta defined in components.css */

.final {
  background: var(--color-primary);
  color: var(--color-primary-fg);
  padding-block: var(--section-pad-y);
}

.final .h-section,
.cta-title {
  color: var(--color-primary-fg);
}

.final p {
  opacity: 0.92;
}

.final .btn {
  background: var(--color-bg);
  color: var(--color-primary);
  border-color: rgba(255, 255, 255, 0.35);
}

/* .cta-content, .section-cta overrides defined in components.css */

.cta-kicker {
  color: rgba(247, 244, 239, 0.85);
}

.cta-intro {
  color: rgba(247, 244, 239, 0.9);
  font-size: 18px;
  margin: 16px auto 0;
  max-width: 60ch;
}

/* ==========================================================================
   SECTION: 19. GAMIFICATION UI (HUD, QUESTS, KPIs)
   Description: Dashboard HUD, progress bars, KPIs, and quest cards
   Lines: ~170
   ========================================================================== */
.miniUI,
.mini-dashboard {
  display: grid;
  gap: 12px;
  margin-top: 20px;
}

.hud {
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-border);
  background: rgba(255, 255, 255, 0.55);
  box-shadow: var(--shadow);
  padding: 14px;
}

.hudTop,
.dashboard-row {
  display: flex;
  gap: 10px;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
}

.progressWrap,
.readiness-score {
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
}

.bar,
.progress-bar {
  width: min(420px, 100%);
  height: 10px;
  border-radius: var(--radius-full);
  border: 1px solid var(--color-border);
  background: rgba(255, 255, 255, 0.65);
  overflow: hidden;
}

.bar > div,
.progress-fill {
  height: 100%;
  background: linear-gradient(90deg, rgba(61, 122, 74, 0.90), rgba(204, 122, 51, 0.75));
  transition: width 0.35s var(--ease);
}

.hudKpis,
.dashboard-kpis {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  margin-top: 12px;
}

@media (min-width: 500px) {
  .hudKpis,
  .dashboard-kpis {
    grid-template-columns: repeat(4, 1fr);
  }
}

.kpi {
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border);
  background: rgba(255, 255, 255, 0.65);
  padding: 12px 14px;
}

.kpi .n,
.kpi-value {
  font-family: var(--font-serif);
  font-weight: 700;
  font-size: 22px;
  line-height: 1.1;
}

.kpi .l,
.kpi-label {
  font-size: 12px;
  color: color-mix(in oklab, var(--color-text) 65%, #fff);
  margin-top: 4px;
}

.quests {
  display: grid;
  gap: 10px;
  margin-top: 12px;
}

.quest {
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border);
  background: rgba(255, 255, 255, 0.65);
  padding: 12px;
  display: flex;
  gap: 12px;
  align-items: flex-start;
  justify-content: space-between;
}

.qLeft {
  min-width: 0;
}

.qid {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: color-mix(in oklab, var(--color-primary) 70%, var(--color-text));
}

.qTitle {
  margin-top: 4px;
  font-weight: 600;
  font-size: 13px;
}

.qHint {
  margin-top: 6px;
  font-size: 12px;
  color: color-mix(in oklab, var(--color-text) 65%, #fff);
}

.qState {
  font-family: var(--font-mono);
  font-size: 11px;
  padding: 7px 10px;
  border-radius: var(--radius-full);
  border: 1px solid var(--color-border);
  white-space: nowrap;
  background: rgba(255, 255, 255, 0.75);
}

.qState.green {
  color: var(--color-primary);
  border-color: color-mix(in oklab, var(--color-primary), var(--color-border) 70%);
}

.qState.yellow {
  color: color-mix(in oklab, var(--color-accent) 85%, var(--color-text));
  border-color: color-mix(in oklab, var(--color-accent), var(--color-border) 70%);
}

.qState.red {
  color: var(--color-error-dark);
  border-color: color-mix(in oklab, var(--color-error-dark), var(--color-border) 70%);
}

/* TODO: Potentially unused — verify before removing */
/* --- Gate Status --- */
.gate-status {
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border);
  background: rgba(255, 255, 255, 0.55);
  padding: 14px;
}

.gate-status p {
  margin: 10px 0 0;
}

/* ==========================================================================
   SECTION: 20. CHECK LIST ITEMS & BENEFITS
   Description: Check items, benefit cards, workshop packages, and feature matrix
   Lines: ~380
   ========================================================================== */
.check,
.check-item {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  padding: 14px 16px;
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border);
  background: rgba(255, 255, 255, 0.55);
}

.check b,
.check-mark {
  width: 24px;
  height: 24px;
  border-radius: 8px;
  border: 1px solid var(--color-border);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: color-mix(in oklab, var(--color-primary) 18%, #fff);
  color: var(--color-primary);
  font-family: var(--font-mono);
  font-size: 14px;
  font-weight: 700;
  flex-shrink: 0;
}

/* --- Enhanced Benefits with Icons --- */
.benefits-visual {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.benefit-item {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  padding: 20px 24px;
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border);
  border-left: 4px solid var(--color-primary);
  background: rgba(255, 255, 255, 0.65);
  transition: transform var(--duration-fast) var(--ease), box-shadow var(--duration-fast) var(--ease);
}

.benefit-item:hover {
  transform: translateX(6px);
  box-shadow: var(--shadow);
}

.benefit-icon {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  background: color-mix(in oklab, var(--color-primary) 15%, #fff);
  border: 1px solid var(--color-border);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: var(--color-primary);
}

.benefit-icon svg {
  width: 24px;
  height: 24px;
  stroke: currentColor;
  fill: none;
}

.benefit-content {
  flex: 1;
}

.benefit-title {
  font-family: var(--font-serif);
  font-weight: 700;
  font-size: 17px;
  margin: 0 0 6px;
  color: var(--color-text);
}

.benefit-desc {
  font-size: 14px;
  color: color-mix(in oklab, var(--color-text) 70%, #fff);
  margin: 0;
  line-height: 1.5;
}

/* --- Workshop Packages Grid --- */
.packages-section {
  margin-top: 48px;
}

.packages-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
  margin-bottom: 40px;
}

@media (min-width: 640px) {
  .packages-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1024px) {
  .packages-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

.package-card {
  padding: 24px;
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-border);
  background: rgba(255, 255, 255, 0.65);
  box-shadow: var(--shadow-sm);
  display: flex;
  flex-direction: column;
  transition: transform var(--duration-normal) var(--ease), box-shadow var(--duration-normal) var(--ease);
}

.package-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow);
}

.package-card.featured {
  border-color: var(--color-primary);
  border-width: 2px;
  background: rgba(255, 255, 255, 0.85);
  position: relative;
}

.package-card.featured::before {
  content: "Empfohlen";
  position: absolute;
  top: -12px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--color-primary);
  color: white;
  font-size: 11px;
  font-weight: 600;
  padding: 4px 12px;
  border-radius: var(--radius-full);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.package-header {
  text-align: center;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--color-border);
  margin-bottom: 16px;
}

.package-name {
  font-family: var(--font-serif);
  font-weight: 700;
  font-size: 18px;
  margin: 0 0 4px;
  color: var(--color-text);
}

.package-duration {
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--color-primary);
  margin: 0;
}

.package-price {
  text-align: center;
  margin: 16px 0;
}

.package-price .amount {
  font-family: var(--font-serif);
  font-weight: 700;
  font-size: 28px;
  color: var(--color-text);
}

.package-price .currency {
  font-size: 16px;
  color: color-mix(in oklab, var(--color-text) 70%, #fff);
}

.package-price .note {
  font-size: 12px;
  color: color-mix(in oklab, var(--color-text) 60%, #fff);
  margin-top: 4px;
}

.package-price .package-savings {
  display: block;
  font-size: 13px;
  color: var(--color-accent);
  text-decoration: line-through;
  margin-top: 4px;
}

/* --- Extras Section --- */
.extras-section {
  margin-top: 48px;
  padding: 24px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}

.extras-title {
  font-family: var(--font-serif);
  font-size: 20px;
  font-weight: 700;
  margin: 0 0 20px;
  text-align: center;
  color: var(--color-text);
}

.extras-grid {
  display: grid;
  gap: 12px;
}

.extra-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 16px;
  background: color-mix(in oklab, var(--color-secondary) 40%, transparent);
  border: 1px solid var(--color-border);
  border-radius: 12px;
  flex-wrap: wrap;
  gap: 8px;
}

.extra-name {
  font-size: 14px;
  color: var(--color-text);
}

.extra-price {
  font-family: var(--font-mono);
  font-size: 14px;
  font-weight: 600;
  color: var(--color-primary);
}

/* --- Logistics Note --- */
.logistics-note {
  margin-top: 32px;
  padding: 20px 24px;
  background: color-mix(in oklab, var(--color-accent) 10%, var(--color-surface));
  border: 1px solid color-mix(in oklab, var(--color-accent) 30%, var(--color-border));
  border-radius: var(--radius-md);
}

.logistics-title {
  font-family: var(--font-serif);
  font-size: 16px;
  font-weight: 700;
  margin: 0 0 12px;
  color: var(--color-text);
}

.logistics-note p {
  font-size: 14px;
  color: color-mix(in oklab, var(--color-text) 85%, #fff);
  margin: 0 0 12px;
}

.logistics-note ul {
  margin: 0 0 12px;
  padding-left: 20px;
}

.logistics-note li {
  font-size: 14px;
  color: color-mix(in oklab, var(--color-text) 85%, #fff);
  padding: 4px 0;
}

.logistics-note p:last-child {
  margin-bottom: 0;
}

.package-features {
  list-style: none;
  padding: 0;
  margin: 0 0 20px;
  flex: 1;
}

.package-features li {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 13px;
  padding: 6px 0;
  color: color-mix(in oklab, var(--color-text) 80%, #fff);
}

.package-features li::before {
  content: "✓";
  color: var(--color-primary);
  font-weight: 700;
  flex-shrink: 0;
}

.package-cta {
  margin-top: auto;
}

.package-cta .btn {
  width: 100%;
  justify-content: center;
}

/* --- Feature Comparison Matrix --- */
.feature-matrix {
  width: 100%;
  overflow-x: auto;
  margin-top: 32px;
}

.matrix-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
  min-width: 600px;
}

.matrix-table th,
.matrix-table td {
  padding: 12px 16px;
  text-align: center;
  border-bottom: 1px solid var(--color-border);
}

.matrix-table th {
  background: color-mix(in oklab, var(--color-secondary) 60%, transparent);
  font-weight: 600;
  font-size: 13px;
}

.matrix-table th:first-child,
.matrix-table td:first-child {
  text-align: left;
  font-weight: 500;
}

.matrix-table td.feature-name {
  font-weight: 500;
  color: var(--color-text);
}

.matrix-table .check-yes {
  color: var(--color-primary);
  font-weight: 700;
}

.matrix-table .check-no {
  color: color-mix(in oklab, var(--color-text) 40%, #fff);
}

.matrix-table tr:hover {
  background: rgba(255, 255, 255, 0.5);
}

/* ==========================================================================
   SECTION: 21. UNDERLINE LINK ANIMATION
   Description: Animated underline effect for links
   Lines: ~25
   ========================================================================== */
.u {
  position: relative;
  text-decoration: none;
  font-weight: 600;
  color: color-mix(in oklab, var(--color-primary) 85%, var(--color-text));
}

.u::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -3px;
  height: 2px;
  background: color-mix(in oklab, var(--color-primary) 80%, var(--color-accent));
  transform: scaleX(0);
  transform-origin: bottom right;
  transition: transform var(--duration-normal) var(--ease);
}

.u:hover::after {
  transform: scaleX(1);
  transform-origin: bottom left;
}

/* ==========================================================================
   SECTION: 22. DASHBOARD LAYOUT
   Description: Dashboard wrapper, header, grid, and sections
   Lines: ~75
   ========================================================================== */

/* --- Dashboard Wrapper --- */
.dashboard {
  display: flex;
  min-height: 100vh;
}

.dashboard-main {
  flex: 1;
  padding: 24px var(--space-4);
  margin-left: 0;
  transition: margin-left var(--duration-normal) var(--ease);
}

@media (min-width: 1024px) {
  .dashboard-main {
    margin-left: var(--sidebar-width);
  }
}

.dashboard-header {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 24px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--color-border);
}

.dashboard-title {
  font-family: var(--font-serif);
  font-weight: 700;
  font-size: 24px;
  margin: 0;
}

@media (min-width: 768px) {
  .dashboard-title {
    font-size: 32px;
  }
}

.dashboard-grid {
  display: grid;
  gap: 20px;
  grid-template-columns: 1fr;
}

@media (min-width: 768px) {
  .dashboard-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1200px) {
  .dashboard-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

.dashboard-section {
  margin-bottom: 32px;
}

.dashboard-section-title {
  font-family: var(--font-serif);
  font-weight: 700;
  font-size: 20px;
  margin: 0 0 16px 0;
}

/* ==========================================================================
   SECTION: 23. SIDEBAR NAVIGATION
   Description: Fixed sidebar, nav links, sections, and overlay
   Lines: ~160
   ========================================================================== */
.sidebar {
  position: fixed;
  top: 0;
  left: 0;
  width: var(--sidebar-width);
  height: 100vh;
  background: var(--color-surface);
  border-right: 1px solid var(--color-border);
  box-shadow: var(--shadow-sm);
  z-index: 200;
  transform: translateX(-100%);
  transition: transform var(--duration-normal) var(--ease);
  overflow-y: auto;
}

.sidebar.open {
  transform: translateX(0);
}

@media (min-width: 1024px) {
  .sidebar {
    transform: translateX(0);
  }
}

.sidebar-header {
  padding: 20px;
  border-bottom: 1px solid var(--color-border);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.sidebar-logo {
  font-family: var(--font-serif);
  font-weight: 700;
  font-size: 18px;
  text-decoration: none;
  color: var(--color-text);
}

.sidebar-close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border: none;
  background: transparent;
  cursor: pointer;
  color: var(--color-text);
}

@media (min-width: 1024px) {
  .sidebar-close {
    display: none;
  }
}

.sidebar-nav {
  padding: 16px 0;
}

.sidebar-section {
  padding: 0 12px;
  margin-bottom: 20px;
}

.sidebar-section-title {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: color-mix(in oklab, var(--color-text) 55%, #fff);
  padding: 0 8px;
  margin-bottom: 8px;
}

.sidebar-link {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border-radius: var(--radius-sm);
  text-decoration: none;
  font-size: 14px;
  font-weight: 500;
  color: color-mix(in oklab, var(--color-text) 80%, #fff);
  transition: background var(--duration-fast) var(--ease), color var(--duration-fast) var(--ease);
}

.sidebar-link:hover {
  background: var(--color-secondary);
  color: var(--color-text);
}

.sidebar-link.active {
  background: color-mix(in oklab, var(--color-primary) 15%, var(--color-bg));
  color: var(--color-primary);
}

.sidebar-link-icon {
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.sidebar-footer {
  padding: 16px 20px;
  border-top: 1px solid var(--color-border);
  margin-top: auto;
}

/* --- Sidebar Overlay --- */
.sidebar-overlay {
  position: fixed;
  inset: 0;
  background: rgba(61, 53, 45, 0.5);
  z-index: 150;
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--duration-normal) var(--ease), visibility var(--duration-normal) var(--ease);
}

.sidebar-overlay.visible {
  opacity: 1;
  visibility: visible;
}

@media (min-width: 1024px) {
  .sidebar-overlay {
    display: none;
  }
}

/* --- Sidebar Toggle Button --- */
.sidebar-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
  cursor: pointer;
}

@media (min-width: 1024px) {
  .sidebar-toggle {
    display: none;
  }
}

/* ==========================================================================
   SECTION: 24. CONTENT GATING
   Description: Locked content overlay, blur effects, and unlock progress
   Lines: ~105
   ========================================================================== */

/* --- Locked Content Container --- */
.content-gated {
  position: relative;
  overflow: hidden;
}

/* --- Locked Overlay --- */
.content-locked-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    transparent 0%,
    rgba(247, 244, 239, 0.7) 30%,
    rgba(247, 244, 239, 0.95) 100%
  );
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  padding: 32px;
  z-index: 10;
}

.content-locked-box {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: 24px;
  text-align: center;
  max-width: 400px;
  box-shadow: var(--shadow);
}

.content-locked-icon {
  width: 48px;
  height: 48px;
  border-radius: var(--radius-full);
  background: color-mix(in oklab, var(--color-accent) 20%, #fff);
  border: 1px solid var(--color-border);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 16px;
  font-size: 24px;
}

.content-locked-title {
  font-family: var(--font-serif);
  font-weight: 700;
  font-size: 20px;
  margin: 0 0 8px;
}

.content-locked-text {
  font-size: 14px;
  color: color-mix(in oklab, var(--color-text) 70%, #fff);
  margin: 0 0 16px;
}

/* --- Blur Effect for Locked Content --- */
.content-blurred {
  filter: blur(6px);
  user-select: none;
  pointer-events: none;
}

/* TODO: Potentially unused — verify before removing */
/* --- Unlock Progress Indicator --- */
.unlock-progress {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  background: color-mix(in oklab, var(--color-secondary) 70%, var(--color-surface));
  border-radius: 12px;
  margin-top: 12px;
}

.unlock-progress-bar {
  flex: 1;
  height: 8px;
  border-radius: var(--radius-full);
  background: var(--color-border);
  overflow: hidden;
}

.unlock-progress-bar-fill {
  height: 100%;
  background: var(--color-primary);
  transition: width var(--duration-normal) var(--ease);
}

.unlock-progress-text {
  font-family: var(--font-mono);
  font-size: 12px;
  color: color-mix(in oklab, var(--color-text) 70%, #fff);
  white-space: nowrap;
}

/* ==========================================================================
   SECTION: 25. HUNTER-ID CARD CATEGORIES
   Description: Category-colored cards for Opening, Killer, Scope, Decision, Memory, Emergency
   Lines: ~215
   ========================================================================== */

/* --- Base Hunter Card --- */
.hunter-card {
  padding: 18px;
  border-radius: var(--radius-lg);
  border: 2px solid var(--color-border);
  background: rgba(255, 255, 255, 0.65);
  box-shadow: var(--shadow);
  transition: transform var(--duration-normal) var(--ease), box-shadow var(--duration-normal) var(--ease);
  position: relative;
  overflow: hidden;
}

.hunter-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-lg);
}

.hunter-card-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}

.hunter-card-badge {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 6px 10px;
  border-radius: var(--radius-full);
  border: 1px solid;
  white-space: nowrap;
}

.hunter-card-id {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.05em;
  color: color-mix(in oklab, var(--color-text) 60%, #fff);
}

.hunter-card-title {
  font-weight: 600;
  font-size: 16px;
  margin: 0 0 8px;
}

.hunter-card-description {
  font-size: 14px;
  color: color-mix(in oklab, var(--color-text) 70%, #fff);
  margin: 0;
}

.hunter-card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 16px;
  padding-top: 12px;
  border-top: 1px solid var(--color-border);
}

/* --- Category: Opening (Blue) --- */
.card-opening {
  border-color: color-mix(in oklab, var(--color-opening) 40%, var(--color-border));
}

.card-opening::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: var(--color-opening);
}

.card-opening .hunter-card-badge {
  background: color-mix(in oklab, var(--color-opening) 15%, #fff);
  color: var(--color-opening);
  border-color: color-mix(in oklab, var(--color-opening) 30%, var(--color-border));
}

/* --- Category: Killer (Red) --- */
.card-killer {
  border-color: color-mix(in oklab, var(--color-killer) 40%, var(--color-border));
}

.card-killer::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: var(--color-killer);
}

.card-killer .hunter-card-badge {
  background: color-mix(in oklab, var(--color-killer) 15%, #fff);
  color: var(--color-killer);
  border-color: color-mix(in oklab, var(--color-killer) 30%, var(--color-border));
}

/* --- Category: Scope (Yellow) --- */
.card-scope {
  border-color: color-mix(in oklab, var(--color-scope) 50%, var(--color-border));
}

.card-scope::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: var(--color-scope);
}

.card-scope .hunter-card-badge {
  background: color-mix(in oklab, var(--color-scope) 20%, #fff);
  color: color-mix(in oklab, var(--color-scope) 80%, #000);
  border-color: color-mix(in oklab, var(--color-scope) 40%, var(--color-border));
}

/* --- Category: Decision (Green) --- */
.card-decision {
  border-color: color-mix(in oklab, var(--color-decision) 40%, var(--color-border));
}

.card-decision::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: var(--color-decision);
}

.card-decision .hunter-card-badge {
  background: color-mix(in oklab, var(--color-decision) 15%, #fff);
  color: color-mix(in oklab, var(--color-decision) 85%, #000);
  border-color: color-mix(in oklab, var(--color-decision) 30%, var(--color-border));
}

/* --- Category: Memory (Violet) --- */
.card-memory {
  border-color: color-mix(in oklab, var(--color-memory) 40%, var(--color-border));
}

.card-memory::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: var(--color-memory);
}

.card-memory .hunter-card-badge {
  background: color-mix(in oklab, var(--color-memory) 15%, #fff);
  color: var(--color-memory);
  border-color: color-mix(in oklab, var(--color-memory) 30%, var(--color-border));
}

/* --- Category: Emergency (Gray) --- */
.card-emergency {
  border-color: color-mix(in oklab, var(--color-emergency) 40%, var(--color-border));
}

.card-emergency::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: var(--color-emergency);
}

.card-emergency .hunter-card-badge {
  background: color-mix(in oklab, var(--color-emergency) 15%, #fff);
  color: var(--color-emergency);
  border-color: color-mix(in oklab, var(--color-emergency) 30%, var(--color-border));
}

/* --- Hunter Card Grid --- */
.hunter-card-grid {
  display: grid;
  gap: 16px;
  grid-template-columns: 1fr;
}

@media (min-width: 640px) {
  .hunter-card-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1024px) {
  .hunter-card-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}


/* ==========================================================================
   GROUP E: CONTENT TYPES (Blog, Legal, Events, Resources)
   ========================================================================== */

/* ==========================================================================
   SECTION: 26. UTILITY CLASSES
   Description: Spacing, display, visibility, and width utilities
   Lines: ~45
   ========================================================================== */

/* --- Spacing --- */
/* DUPLICATE: .mt-1 to .mt-4 also defined in components.css L480-483 with CSS variables */
/* Override: These use fixed pixel values for legacy compatibility */
.mt-0 { margin-top: 0; }
.mt-1 { margin-top: 8px; }
.mt-2 { margin-top: 16px; }
.mt-3 { margin-top: 24px; }
.mt-4 { margin-top: 32px; }

/* DUPLICATE: .mb-1 to .mb-4 also defined in components.css L487-490 with CSS variables */
/* Override: These use fixed pixel values for legacy compatibility */
.mb-0 { margin-bottom: 0; }
.mb-1 { margin-bottom: 8px; }
.mb-2 { margin-bottom: 16px; }
.mb-3 { margin-bottom: 24px; }
.mb-4 { margin-bottom: 32px; }

.p-0 { padding: 0; }
.p-1 { padding: 8px; }
.p-2 { padding: 16px; }
.p-3 { padding: 24px; }
.p-4 { padding: 32px; }

/* --- Display --- */
.hidden { display: none; }
.block { display: block; }
.inline-block { display: inline-block; }
.inline-flex { display: inline-flex; }

/* --- Visibility --- */
.visible { visibility: visible; }
.invisible { visibility: hidden; }

/* --- Overflow --- */
.overflow-hidden { overflow: hidden; }
.overflow-auto { overflow: auto; }

/* --- Width --- */
.w-full { width: 100%; }
.w-auto { width: auto; }

/* ==========================================================================
   SECTION: 27. LEGAL PAGES (IMPRESSUM, DATENSCHUTZ, KONTAKT)
   Description: Legal page layouts, headers, breadcrumbs, and content cards
   Lines: ~385
   ========================================================================== */

/* --- Narrow Container for Legal Pages --- */
.container-narrow {
  max-width: 800px;
  margin: 0 auto;
  padding: 0 var(--space-4);
}

/* --- Page Header for Legal Pages --- */
.page-header {
  padding: 80px 0 40px;
  background: rgba(247, 244, 239, 0.5);
  border-bottom: 1px solid var(--color-border);
}

@media (min-width: 768px) {
  .page-header {
    padding: 100px 0 50px;
  }
}

.page-header .h-section {
  font-size: 28px;
  margin-top: 12px;
}

@media (min-width: 768px) {
  .page-header .h-section {
    font-size: 36px;
  }
}

.page-header .subhero {
  font-size: 16px;
  margin-top: 14px;
  max-width: 65ch;
}

@media (min-width: 768px) {
  .page-header .subhero {
    font-size: 17px;
  }
}

/* --- Breadcrumb --- */
.breadcrumb {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  color: color-mix(in oklab, var(--color-text) 65%, #fff);
  margin-bottom: 16px;
}

.breadcrumb a {
  color: var(--color-primary);
  transition: opacity var(--duration-fast) var(--ease);
}

.breadcrumb a:hover {
  opacity: 0.7;
}

/* --- Legal Card --- */
.legal-card {
  background: rgba(255, 255, 255, 0.75);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: 32px 24px;
  box-shadow: var(--shadow-sm);
  margin-bottom: 32px;
}

@media (min-width: 768px) {
  .legal-card {
    padding: 48px 40px;
  }
}

/* --- Legal Card Typography --- */
.legal-card h2 {
  font-family: var(--font-serif);
  font-size: 20px;
  font-weight: 700;
  margin: 40px 0 16px;
  padding-top: 32px;
  border-top: 1px solid color-mix(in oklab, var(--color-border) 50%, transparent);
  color: var(--color-text);
  line-height: 1.3;
}

.legal-card h2:first-child {
  margin-top: 0;
  padding-top: 0;
  border-top: none;
}

@media (min-width: 768px) {
  .legal-card h2 {
    font-size: 22px;
  }
}

.legal-card h3 {
  font-family: var(--font-sans);
  font-size: 17px;
  font-weight: 600;
  margin: 28px 0 12px;
  color: var(--color-text);
  line-height: 1.4;
}

@media (min-width: 768px) {
  .legal-card h3 {
    font-size: 18px;
  }
}

.legal-card h4 {
  font-family: var(--font-sans);
  font-size: 15px;
  font-weight: 600;
  margin: 20px 0 10px;
  color: var(--color-text);
  line-height: 1.4;
}

.legal-card p {
  font-size: 15px;
  line-height: 1.7;
  margin: 0 0 16px;
  color: color-mix(in oklab, var(--color-text) 85%, #fff);
}

.legal-card p:last-child {
  margin-bottom: 0;
}

.legal-card ul,
.legal-card ol {
  margin: 16px 0;
  padding-left: 24px;
}

.legal-card li {
  font-size: 15px;
  line-height: 1.65;
  margin-bottom: 8px;
  color: color-mix(in oklab, var(--color-text) 85%, #fff);
}

.legal-card a {
  color: var(--color-primary);
  text-decoration: underline;
  text-underline-offset: 2px;
  transition: color var(--duration-fast) var(--ease);
}

.legal-card a:hover {
  color: color-mix(in oklab, var(--color-primary) 80%, var(--color-text));
}

.legal-card strong {
  color: var(--color-text);
  font-weight: 600;
}

/* --- Contact Page Specific --- */
.contact-grid {
  display: grid;
  gap: 32px;
  grid-template-columns: 1fr;
}

@media (min-width: 768px) {
  .contact-grid {
    grid-template-columns: 1.2fr 0.8fr;
    gap: 48px;
  }
}

.contact-form-card {
  background: rgba(255, 255, 255, 0.75);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: 32px 24px;
  box-shadow: var(--shadow-sm);
}

@media (min-width: 768px) {
  .contact-form-card {
    padding: 40px 32px;
  }
}

.contact-info-card {
  background: color-mix(in oklab, var(--color-secondary) 50%, transparent);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: 24px;
}

.contact-info-card h3 {
  font-family: var(--font-serif);
  font-size: 18px;
  font-weight: 700;
  margin: 0 0 16px;
  color: var(--color-text);
}

.contact-info-item {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  margin-bottom: 16px;
}

.contact-info-icon {
  width: 40px;
  height: 40px;
  border-radius: var(--radius-sm);
  background: rgba(255, 255, 255, 0.75);
  border: 1px solid var(--color-border);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: var(--color-primary);
}

.contact-info-text {
  font-size: 14px;
  line-height: 1.5;
  color: color-mix(in oklab, var(--color-text) 80%, #fff);
}

.contact-info-text strong {
  display: block;
  color: var(--color-text);
  font-weight: 600;
  margin-bottom: 2px;
}

/* --- Form group within contact --- */
.form-group label {
  display: block;
  font-weight: 500;
  font-size: 14px;
  margin-bottom: 6px;
  color: var(--color-text);
}

.form-group input,
.form-group select,
.form-group textarea {
  width: 100%;
  padding: 12px 16px;
  font-family: var(--font-sans);
  font-size: 16px;
  border: 1px solid var(--color-border);
  border-radius: 12px;
  background: var(--color-surface);
  color: var(--color-text);
  transition: border-color var(--duration-fast) var(--ease), box-shadow var(--duration-fast) var(--ease);
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--color-primary) 15%, transparent);
}

.form-group textarea {
  min-height: 140px;
  resize: vertical;
  font-family: var(--font-sans);
}

.form-hint {
  font-size: 13px;
  color: color-mix(in oklab, var(--color-text) 60%, #fff);
  margin: 0;
}

/* --- Social Links --- */
.social-links {
  display: flex;
  gap: 12px;
}

.social-link {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--color-border);
  background: rgba(255, 255, 255, 0.75);
  color: var(--color-text);
  transition: background var(--duration-fast) var(--ease), border-color var(--duration-fast) var(--ease);
}

.social-link:hover {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: var(--color-primary-fg);
}

/* --- Map Placeholder --- */
.map-placeholder {
  background: color-mix(in oklab, var(--color-secondary) 40%, transparent);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 48px 24px;
  text-align: center;
  color: color-mix(in oklab, var(--color-text) 70%, #fff);
}

/* ==========================================================================
   SECTION: 27b. BLOG ARTICLE STYLES
   Description: Article headers, content typography, and info boxes
   Lines: ~165
   ========================================================================== */

/* TODO: Potentially unused — verify before removing */
/* --- Article Header Image --- */
.article-header-image {
  width: 100%;
  max-height: 400px;
  overflow: hidden;
  border-radius: var(--radius-lg);
  margin-bottom: 32px;
  box-shadow: var(--shadow);
}

.article-header-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

@media (min-width: 768px) {
  .article-header-image {
    max-height: 480px;
    margin-bottom: 48px;
  }
}

/* --- Article Content --- */
.article-content {
  max-width: 800px;
  margin: 0 auto;
}

.article-content h2 {
  font-family: var(--font-serif);
  font-size: 24px;
  font-weight: 700;
  margin: 24px 0 12px;
  color: var(--color-text);
}

/* Remove top margin when h2 is first child in card */
.article-content .card h2:first-child {
  margin-top: 0;
}

@media (min-width: 768px) {
  .article-content h2 {
    font-size: 28px;
  }
}

.article-content h3 {
  font-size: 18px;
  font-weight: 600;
  margin: 32px 0 12px;
  color: var(--color-text);
}

.article-content p {
  font-size: 16px;
  line-height: 1.75;
  margin-bottom: 20px;
  color: color-mix(in oklab, var(--color-text) 85%, #fff);
}

.article-content ul,
.article-content ol {
  margin: 20px 0;
  padding-left: 24px;
}

.article-content li {
  margin-bottom: 10px;
  line-height: 1.65;
}

.article-content strong {
  color: var(--color-text);
  font-weight: 600;
}

/* TODO: Potentially unused — verify before removing */
/* --- Article Info Box --- */
.article-info-box {
  background: color-mix(in oklab, var(--color-secondary) 50%, transparent);
  border-left: 4px solid var(--color-primary);
  border-radius: 12px;
  padding: 20px 24px;
  margin: 32px 0;
}

.article-info-box h4 {
  font-size: 16px;
  font-weight: 600;
  margin: 0 0 8px;
  color: var(--color-text);
}

.article-info-box p {
  margin: 0;
  font-size: 15px;
}

/* --- Blog Article Compact Layout --- */
/* Reduces spacing between sections in blog articles for better reading flow */

/* When article-content is present, reduce section padding */
.section:has(.article-content) {
  padding-block: var(--space-4); /* 24px */
}

/* First content section after hero needs less top padding */
.section#content {
  padding-top: var(--space-4); /* 24px */
}

/* Reduce section-header margin in article context */
.section:has(.article-content) .section-header {
  margin-bottom: var(--space-3); /* 16px */
}

/* Tighter h3 margins for better flow */
.article-content h3 {
  margin-top: 24px;
  margin-bottom: 8px;
}

/* Reduce paragraph bottom margin slightly */
.article-content p {
  margin-bottom: 16px;
}

/* Cards in article should have less margin */
.article-content .card {
  margin-top: 16px;
  margin-bottom: 16px;
}

/* Highlight cards get a bit more breathing room */
.article-content .card.highlight {
  margin-top: 20px;
  margin-bottom: 20px;
}

/* Grid gaps in articles */
.article-content .grid-2,
.article-content .grid-3 {
  gap: 16px;
  margin-top: 16px;
  margin-bottom: 16px;
}

/* Lists in articles */
.article-content ul,
.article-content ol {
  margin: 12px 0 16px;
}

.article-content li {
  margin-bottom: 6px;
}


/* ==========================================================================
   GROUP F: UTILITIES & STATES (Utilities, Accessibility, Animations, Print)
   ========================================================================== */

/* ==========================================================================
   SECTION: 28. ACCESSIBILITY
   Description: Focus states, skip links, screen reader utilities, reduced motion
   Lines: ~60
   ========================================================================== */

/* --- Focus States --- */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 3px;
}

/* --- Skip Link --- */
.skip-link {
  position: absolute;
  top: -40px;
  left: 0;
  background: var(--color-primary);
  color: var(--color-primary-fg);
  padding: 8px 16px;
  z-index: 1000;
  text-decoration: none;
  transition: top var(--duration-fast) var(--ease);
}

.skip-link:focus {
  top: 0;
}

/* --- Screen Reader Only --- */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* --- Reduced Motion --- */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ==========================================================================
   SECTION: 29. TAGLINE ANIMATION
   Description: Animated tagline and format images for contact page
   Lines: ~95
   ========================================================================== */

.tagline-animated {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.75rem;
  margin-top: 1.5rem;
  font-family: var(--font-mono);
  font-size: 1.1rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  color: var(--color-primary);
}

.tagline-word {
  opacity: 0;
  animation: taglineFadeIn 0.5s ease-out forwards;
  animation-delay: calc(var(--delay) * 0.3s + 0.3s);
}

.tagline-sep {
  opacity: 0;
  color: var(--color-muted);
  animation: taglineFadeIn 0.3s ease-out forwards;
  animation-delay: calc(var(--delay, 0.5) * 0.3s + 0.2s);
}

@keyframes taglineFadeIn {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* --- Format Images (Contact Page) --- */
.format-images {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
  margin-top: 2rem;
  margin-bottom: -1rem;
  max-width: 900px;
  margin-left: auto;
  margin-right: auto;
}

.format-image {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow);
}

.format-image img {
  width: 100%;
  height: 280px;
  object-fit: cover;
  object-position: center top;
  display: block;
}

.format-label {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 0.75rem;
  background: linear-gradient(transparent, rgba(0,0,0,0.7));
  color: #fff;
  font-family: var(--font-mono);
  font-size: 0.875rem;
  font-weight: 600;
  text-align: center;
  letter-spacing: 0.05em;
  margin: 0;
}

@media (max-width: 600px) {
  .format-images {
    grid-template-columns: 1fr;
    gap: 1rem;
  }

  .format-image img {
    height: 220px;
  }
}

/* ==========================================================================
   SECTION: 30. PRINT STYLES
   Description: Print-specific overrides for clean output
   Lines: ~45
   ========================================================================== */
@media print {
  body {
    background: #fff;
    color: #000;
  }

  .nav,
  .sidebar,
  .sidebar-overlay,
  .btn,
  .mobile-menu,
  .nav-menu {
    display: none !important;
  }

  .dashboard-main {
    margin-left: 0;
  }

  .card,
  .hunter-card,
  .hud,
  .quest,
  .iconCard,
  .tCard,
  .stat {
    box-shadow: none;
    border: 1px solid #ccc;
  }

  a {
    text-decoration: underline;
  }

  a[href^="http"]::after {
    content: " (" attr(href) ")";
    font-size: 12px;
    color: #666;
  }
}

/* ==========================================================================
   GLOSSAR-TOOLTIPS (abbr)
   Erklärt Fachbegriffe inline per Hover/Tap.
   Verwendung: <abbr title="Erklärung">Begriff</abbr>
   ========================================================================== */

abbr[title] {
  text-decoration: underline dotted currentColor;
  text-underline-offset: 3px;
  cursor: help;
  font-style: normal;
}

/* ==========================================================================
   DETAILS / AUFKLAPPBAR
   Natives HTML-Accordion ohne JavaScript.
   ========================================================================== */

details.expandable {
  border: 1px solid rgba(0,0,0,0.1);
  border-radius: 12px;
  padding: 0;
  overflow: hidden;
}

details.expandable summary {
  padding: 1.25rem 1.5rem;
  font-weight: 600;
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

details.expandable summary::-webkit-details-marker { display: none; }

details.expandable summary::after {
  content: "+";
  font-size: 1.5rem;
  font-weight: 300;
  flex-shrink: 0;
}

details.expandable[open] summary::after {
  content: "\2212";
}

details.expandable .expandable-content {
  padding: 0 1.5rem 1.5rem;
}

/* ==========================================================================
   EQUAL-HEIGHT CARDS in grid-2 / grid-3
   Alle Cards in einem Grid auf gleiche Höhe bringen.
   ========================================================================== */

.grid-2 > .card,
.grid-3 > .card,
.grid-2 > .card.info-card,
.grid-3 > .card.info-card {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.grid-2 > .card > p:last-of-type,
.grid-3 > .card > p:last-of-type {
  margin-top: auto;
}

/* Force equal columns when grid-2 contains cards */
.grid-2:has(> .card) {
  grid-template-columns: 1fr 1fr;
}