/* ============================================================
   GUMAGA KONONO — Main Stylesheet
   Color system: color-mix() based on 3 base colors
   Naming: camelCase component_element
   ============================================================ */


:root {
  --colorBase: oklch(32% 0.06 55);
  --colorWarm: oklch(72% 0.09 70);
  --colorAccent: oklch(48% 0.12 45);

  --colorPrimary: var(--colorBase);
  --colorPrimaryLight: color-mix(in oklch, var(--colorBase), white 55%);
  --colorPrimaryLighter: color-mix(in oklch, var(--colorBase), white 80%);
  --colorPrimaryDark: color-mix(in oklch, var(--colorBase), black 20%);

  --colorWarmMid: var(--colorWarm);
  --colorWarmLight: color-mix(in oklch, var(--colorWarm), white 50%);
  --colorWarmLighter: color-mix(in oklch, var(--colorWarm), white 78%);
  --colorWarmDark: color-mix(in oklch, var(--colorWarm), black 30%);

  --colorAccentMid: var(--colorAccent);
  --colorAccentLight: color-mix(in oklch, var(--colorAccent), white 55%);
  --colorAccentLighter: color-mix(in oklch, var(--colorAccent), white 82%);
  --colorAccentDark: color-mix(in oklch, var(--colorAccent), black 20%);

  --colorSurface: color-mix(in oklch, var(--colorWarm), white 90%);
  --colorSurfaceAlt: color-mix(in oklch, var(--colorWarm), white 82%);
  --colorSurfaceDark: color-mix(in oklch, var(--colorBase), white 10%);

  --colorText: color-mix(in oklch, var(--colorBase), black 30%);
  --colorTextMuted: color-mix(in oklch, var(--colorBase), white 35%);
  --colorTextLight: color-mix(in oklch, var(--colorBase), white 62%);
  --colorTextOnDark: color-mix(in oklch, var(--colorWarm), white 75%);

  --colorBorder: color-mix(in oklch, var(--colorWarm), white 60%);
  --colorBorderDark: color-mix(in oklch, var(--colorWarm), black 15%);

  
  --sp1: 0.5rem;
  --sp2: 1rem;
  --sp3: 1.5rem;
  --sp4: 2rem;
  --sp5: 3rem;
  --sp6: 4rem;
  --sp7: 6rem;
  --sp8: 8rem;

  
  --r1: 4px;
  --r2: 8px;
  --r3: 12px;
  --r4: 20px;
  --r5: 32px;
  --rFull: 9999px;

  
  --shadowSm: 0 1px 3px color-mix(in oklch, var(--colorBase), transparent 85%), 0 1px 2px color-mix(in oklch, var(--colorBase), transparent 90%);
  --shadowMd: 0 4px 6px color-mix(in oklch, var(--colorBase), transparent 85%), 0 2px 4px color-mix(in oklch, var(--colorBase), transparent 88%);
  --shadowLg: 0 10px 25px color-mix(in oklch, var(--colorBase), transparent 80%), 0 4px 10px color-mix(in oklch, var(--colorBase), transparent 85%);
  --shadowXl: 0 20px 40px color-mix(in oklch, var(--colorBase), transparent 75%), 0 8px 16px color-mix(in oklch, var(--colorBase), transparent 82%);

  
  --transBase: 220ms ease-out;
  --transSlow: 400ms ease-out;
  --transSnap: 140ms ease-out;
}


*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; font-size: 16px; overflow-x: hidden; }

body {
  font-family: 'Lexend', sans-serif;
  font-weight: 400;
  color: var(--colorText);
  background: var(--colorSurface);
  line-height: 1.7;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; transition: color var(--transBase); }
ul { list-style: none; }
button { font-family: inherit; cursor: pointer; border: none; background: none; }
input, textarea, select { font-family: inherit; }


.container {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 var(--sp4);
}


h1, h2, h3, h4, h5, h6 {
  font-family: 'Lexend', sans-serif;
  line-height: 1.2;
  color: var(--colorPrimary);
}

.sectionLabel {
  display: inline-block;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--colorAccentMid);
  margin-bottom: var(--sp2);
}

.sectionHeading {
  font-size: clamp(1.8rem, 3.5vw, 2.8rem);
  font-weight: 700;
  line-height: 1.15;
  color: var(--colorPrimary);
  margin-bottom: var(--sp3);
}

.sectionIntro {
  font-size: 1.1rem;
  color: var(--colorTextMuted);
  max-width: 640px;
  line-height: 1.75;
}


.btn {
  display: inline-flex;
  align-items: center;
  gap: var(--sp1);
  padding: 0.75rem 1.75rem;
  border-radius: var(--rFull);
  font-size: 0.9rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  transition: background var(--transBase), color var(--transBase), transform var(--transSnap), box-shadow var(--transBase), border-color var(--transBase);
  cursor: pointer;
  text-decoration: none;
  min-height: 44px;
}

.btn--primary {
  background: var(--colorAccentMid);
  color: var(--colorSurface);
  box-shadow: var(--shadowMd);
}
.btn--primary:hover {
  background: var(--colorAccentDark);
  transform: translateY(-2px);
  box-shadow: var(--shadowLg);
}
.btn--primary:active { transform: translateY(0); }

.btn--ghost {
  background: color-mix(in oklch, white, transparent 15%);
  color: var(--colorSurface);
  border: 2px solid color-mix(in oklch, white, transparent 40%);
  backdrop-filter: blur(8px);
}
.btn--ghost:hover {
  background: color-mix(in oklch, white, transparent 5%);
  border-color: white;
  transform: translateY(-2px);
}

.btn--outline {
  background: transparent;
  color: var(--colorAccentMid);
  border: 2px solid var(--colorAccentMid);
}
.btn--outline:hover {
  background: var(--colorAccentMid);
  color: var(--colorSurface);
  transform: translateY(-2px);
}

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

.btn--thanksOutline {
  display: inline-flex;
  align-items: center;
  padding: 0.9rem 2.5rem;
  border-radius: var(--rFull);
  font-size: 1rem;
  font-weight: 600;
  border: 2px solid white;
  color: white;
  transition: background var(--transBase), color var(--transBase), transform var(--transSnap);
  min-height: 44px;
}
.btn--thanksOutline:hover {
  background: white;
  color: var(--colorAccentMid);
  transform: translateY(-2px);
}

/* ============================================================
   COOKIE BAR
   ============================================================ */
.cookieBar {
  background: var(--colorPrimary);
  color: var(--colorTextOnDark);
  overflow: hidden;
  max-height: 80px;
  transition: max-height 0.4s ease-out, padding 0.4s ease-out;
}
.cookieBar.cookieBar--hidden {
  max-height: 0;
}
.cookieBar_inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp3);
  padding: 0.6rem var(--sp4);
  flex-wrap: wrap;
}
.cookieBar_text {
  font-size: 0.82rem;
  flex: 1;
  min-width: 200px;
}
.cookieBar_text a {
  color: var(--colorWarmLight);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.cookieBar_text a:hover { color: white; }
.cookieBar_actions {
  display: flex;
  gap: var(--sp1);
  flex-shrink: 0;
}
.cookieBar_btn {
  padding: 0.35rem 1rem;
  border-radius: var(--rFull);
  font-size: 0.8rem;
  font-weight: 600;
  min-height: 36px;
  transition: background var(--transBase), color var(--transBase), transform var(--transSnap);
}
.cookieBar_btn--accept {
  background: var(--colorAccentMid);
  color: white;
}
.cookieBar_btn--accept:hover { background: var(--colorAccentDark); transform: translateY(-1px); }
.cookieBar_btn--decline {
  background: transparent;
  color: var(--colorTextOnDark);
  border: 1px solid color-mix(in oklch, white, transparent 55%);
}
.cookieBar_btn--decline:hover { border-color: white; transform: translateY(-1px); }

/* ============================================================
   SITE HEADER — Glassmorphism, hidden until scroll
   ============================================================ */
.siteHeader {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 900;
  transform: translateY(-100%);
  transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1);
  background: color-mix(in oklch, var(--colorPrimary), transparent 18%);
  backdrop-filter: blur(16px) saturate(1.4);
  -webkit-backdrop-filter: blur(16px) saturate(1.4);
  border-bottom: 1px solid color-mix(in oklch, white, transparent 80%);
  box-shadow: 0 2px 20px color-mix(in oklch, var(--colorBase), transparent 75%);
}

.siteHeader--visible {
  transform: translateY(0) !important;
}

.siteHeader_inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--sp2) var(--sp4);
  max-width: 1200px;
  margin: 0 auto;
  min-height: 64px;
}

.siteHeader_logo {
  display: flex;
  align-items: center;
  gap: var(--sp2);
  text-decoration: none;
}
.siteHeader_logoImg { width: 36px; height: 36px; flex-shrink: 0; }
.siteHeader_logoText {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--colorTextOnDark);
  letter-spacing: -0.01em;
}

.siteHeader_nav {
  display: none;
  align-items: center;
  gap: var(--sp3);
}

.siteHeader_navLink {
  font-size: 0.88rem;
  font-weight: 500;
  color: color-mix(in oklch, white, transparent 20%);
  padding: 0.4rem 0;
  position: relative;
  transition: color var(--transBase);
}
.siteHeader_navLink::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--colorWarmLight);
  transform: scaleX(0);
  transition: transform var(--transBase);
  border-radius: var(--rFull);
}
.siteHeader_navLink:hover { color: white; }
.siteHeader_navLink:hover::after { transform: scaleX(1); }
.siteHeader_navLink--active { color: white; }
.siteHeader_navLink--active::after { transform: scaleX(1); }

.siteHeader_menuToggle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: var(--r2);
  background: color-mix(in oklch, white, transparent 85%);
  transition: background var(--transBase);
}
.siteHeader_menuToggle:hover { background: color-mix(in oklch, white, transparent 75%); }

.siteHeader_menuIcon,
.siteHeader_menuIcon::before,
.siteHeader_menuIcon::after {
  display: block;
  width: 20px;
  height: 2px;
  background: white;
  border-radius: var(--rFull);
  transition: transform var(--transBase), opacity var(--transBase);
}
.siteHeader_menuIcon { position: relative; }
.siteHeader_menuIcon::before {
  content: '';
  position: absolute;
  top: -6px;
}
.siteHeader_menuIcon::after {
  content: '';
  position: absolute;
  top: 6px;
}

.siteHeader_menuToggle[aria-expanded="true"] .siteHeader_menuIcon { background: transparent; }
.siteHeader_menuToggle[aria-expanded="true"] .siteHeader_menuIcon::before { transform: rotate(45deg) translate(4px, 4px); }
.siteHeader_menuToggle[aria-expanded="true"] .siteHeader_menuIcon::after { transform: rotate(-45deg) translate(4px, -4px); }

.siteHeader_mobileMenu {
  display: flex;
  flex-direction: column;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  background: color-mix(in oklch, var(--colorPrimary), transparent 8%);
  border-top: 1px solid color-mix(in oklch, white, transparent 85%);
}
.siteHeader_mobileMenu--open { max-height: 400px; }

.siteHeader_mobileLink {
  padding: 0.9rem var(--sp4);
  font-size: 0.95rem;
  font-weight: 500;
  color: color-mix(in oklch, white, transparent 20%);
  border-bottom: 1px solid color-mix(in oklch, white, transparent 88%);
  transition: color var(--transBase), background var(--transBase), padding-left var(--transBase);
}
.siteHeader_mobileLink:hover {
  color: white;
  background: color-mix(in oklch, white, transparent 92%);
  padding-left: calc(var(--sp4) + 8px);
}
.siteHeader_mobileLink--active { color: white; }

@media (min-width: 768px) {
  .siteHeader_nav { display: flex; }
  .siteHeader_menuToggle { display: none; }
  .siteHeader_mobileMenu { display: none !important; }
}

/* ============================================================
   HERO SECTION
   ============================================================ */
.mainHero {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  overflow: hidden;
}

.mainHero_bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  transform: scale(1.05);
  transition: transform 8s ease-out;
}

.mainHero_overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    135deg,
    color-mix(in oklch, var(--colorPrimary), transparent 15%) 0%,
    color-mix(in oklch, var(--colorPrimary), transparent 40%) 50%,
    color-mix(in oklch, var(--colorAccentMid), transparent 55%) 100%
  );
}

.mainHero_content {
  position: relative;
  z-index: 2;
  padding: var(--sp8) var(--sp4) var(--sp7);
  max-width: 1200px;
  margin: 0 auto;
  width: 100%;
}

.mainHero_eyebrow {
  font-size: 0.8rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--colorWarmLight);
  margin-bottom: var(--sp3);
}

.mainHero_title {
  font-size: clamp(3rem, 9vw, 8rem);
  font-weight: 700;
  line-height: 1.0;
  letter-spacing: -0.03em;
  margin-bottom: var(--sp4);
  color: transparent;
  -webkit-text-stroke: 2px color-mix(in oklch, white, transparent 30%);
}

.mainHero_title--clip {
  background-size: cover;
  background-position: center;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-stroke: 0;
  filter: brightness(1.3) contrast(1.1);
}

.mainHero_sub {
  font-size: clamp(1rem, 2vw, 1.2rem);
  color: color-mix(in oklch, white, transparent 15%);
  max-width: 560px;
  line-height: 1.75;
  margin-bottom: var(--sp5);
  font-weight: 300;
}

.mainHero_ctas {
  display: flex;
  gap: var(--sp2);
  flex-wrap: wrap;
}

.mainHero_scroll {
  position: absolute;
  bottom: var(--sp4);
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp1);
  color: color-mix(in oklch, white, transparent 35%);
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  animation: heroScroll 2s ease-in-out infinite;
}

@keyframes heroScroll {
  0%, 100% { transform: translateX(-50%) translateY(0); opacity: 0.6; }
  50% { transform: translateX(-50%) translateY(6px); opacity: 1; }
}

.heroEnd_sentinel { position: absolute; bottom: 0; height: 1px; width: 100%; }

/* ============================================================
   INTRO SECTION
   ============================================================ */
.introSection {
  padding: var(--sp7) 0;
  background: var(--colorSurface);
}

.introSection_grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp6);
  align-items: center;
}

.introSection_text h2 { margin-bottom: var(--sp3); }
.introSection_text p {
  color: var(--colorTextMuted);
  margin-bottom: var(--sp3);
  font-size: 1.05rem;
  line-height: 1.8;
}
.introSection_text p:last-child { margin-bottom: 0; }

.introSection_image {
  position: relative;
  border-radius: var(--r4);
  overflow: hidden;
  box-shadow: var(--shadowXl);
}
.introSection_img {
  width: 100%;
  aspect-ratio: 4/3;
  object-fit: cover;
  transition: transform var(--transSlow);
}
.introSection_image:hover .introSection_img { transform: scale(1.03); }

.introSection_imageBadge {
  position: absolute;
  top: var(--sp2);
  left: var(--sp2);
  background: var(--colorAccentMid);
  color: white;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 0.3rem 0.8rem;
  border-radius: var(--rFull);
}

@media (min-width: 768px) {
  .introSection_grid { grid-template-columns: 1fr 1fr; }
}

/* ============================================================
   THEMEN SECTION
   ============================================================ */
.themenSection {
  padding: var(--sp7) 0;
  background: var(--colorSurfaceAlt);
}

.themenSection_header {
  text-align: center;
  margin-bottom: var(--sp6);
}
.themenSection_header .sectionIntro { margin: 0 auto; }

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

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

.themenCard {
  background: var(--colorSurface);
  border-radius: var(--r4);
  padding: var(--sp4);
  box-shadow: var(--shadowSm);
  border: 1px solid var(--colorBorder);
  transition: transform var(--transBase), box-shadow var(--transBase), border-color var(--transBase);
}
.themenCard:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadowLg);
  border-color: var(--colorAccentLight);
}

.themenCard_icon {
  width: 52px;
  height: 52px;
  border-radius: var(--r3);
  background: var(--colorAccentLighter);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.3rem;
  color: var(--colorAccentMid);
  margin-bottom: var(--sp3);
  transition: background var(--transBase), color var(--transBase);
}
.themenCard:hover .themenCard_icon {
  background: var(--colorAccentMid);
  color: white;
}

.themenCard_title {
  font-size: 1.05rem;
  font-weight: 700;
  margin-bottom: var(--sp2);
  color: var(--colorPrimary);
}
.themenCard_text {
  font-size: 0.9rem;
  color: var(--colorTextMuted);
  line-height: 1.7;
  margin-bottom: var(--sp3);
}
.themenCard_link {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--colorAccentMid);
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  transition: gap var(--transBase), color var(--transBase);
}
.themenCard_link:hover { gap: 0.7rem; color: var(--colorAccentDark); }

/* ============================================================
   BENEFITS SECTION
   ============================================================ */
.benefitsSection {
  padding: var(--sp7) 0;
  background: var(--colorSurface);
}

.benefitsSection_inner {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp6);
  align-items: start;
}

@media (min-width: 768px) {
  .benefitsSection_inner { grid-template-columns: 1fr 1.4fr; }
}

.benefitsSection_text p {
  color: var(--colorTextMuted);
  font-size: 1.05rem;
  line-height: 1.8;
}

.benefitsSection_list {
  display: flex;
  flex-direction: column;
  gap: var(--sp3);
}

.benefitItem {
  display: flex;
  gap: var(--sp3);
  align-items: flex-start;
  padding: var(--sp3);
  border-radius: var(--r3);
  background: var(--colorSurfaceAlt);
  border: 1px solid transparent;
  transition: border-color var(--transBase), box-shadow var(--transBase), background var(--transBase);
}
.benefitItem:hover {
  border-color: var(--colorAccentLight);
  box-shadow: var(--shadowSm);
  background: var(--colorSurface);
}

.benefitItem_check {
  width: 36px;
  height: 36px;
  border-radius: var(--r2);
  background: var(--colorAccentLighter);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.85rem;
  color: var(--colorAccentMid);
  flex-shrink: 0;
  transition: background var(--transBase), color var(--transBase);
}
.benefitItem:hover .benefitItem_check {
  background: var(--colorAccentMid);
  color: white;
}

.benefitItem_title {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--colorPrimary);
  margin-bottom: 0.3rem;
}
.benefitItem_content p {
  font-size: 0.88rem;
  color: var(--colorTextMuted);
  line-height: 1.65;
}

/* ============================================================
   PROJEKT SECTION
   ============================================================ */
.projektSection {
  padding: var(--sp7) 0;
  background: var(--colorSurfaceDark);
}

.projektSection_header {
  text-align: center;
  margin-bottom: var(--sp6);
}
.projektSection_header .sectionHeading { color: var(--colorTextOnDark); }
.projektSection_header .sectionLabel { color: var(--colorWarmLight); }
.projektSection_header .sectionIntro { color: color-mix(in oklch, white, transparent 35%); margin: 0 auto; }

.projektSection_grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp4);
}
@media (min-width: 768px) { .projektSection_grid { grid-template-columns: 1fr 1fr; } }

.projektCard {
  background: color-mix(in oklch, var(--colorSurface), transparent 5%);
  border-radius: var(--r4);
  overflow: hidden;
  box-shadow: var(--shadowLg);
  border: 1px solid color-mix(in oklch, white, transparent 88%);
  transition: transform var(--transBase), box-shadow var(--transBase);
}
.projektCard:hover { transform: translateY(-6px); box-shadow: var(--shadowXl); }

.projektCard_images {
  display: grid;
  grid-template-columns: 1fr 1fr;
}
.projektCard_imgWrap { position: relative; overflow: hidden; }
.projektCard_img {
  width: 100%;
  aspect-ratio: 4/3;
  object-fit: cover;
  transition: transform var(--transSlow);
}
.projektCard:hover .projektCard_img { transform: scale(1.05); }

.projektCard_label {
  position: absolute;
  bottom: var(--sp1);
  left: var(--sp1);
  background: color-mix(in oklch, var(--colorPrimary), transparent 15%);
  color: white;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 0.25rem 0.6rem;
  border-radius: var(--rFull);
  backdrop-filter: blur(4px);
}
.projektCard_label--after {
  background: color-mix(in oklch, var(--colorAccentMid), transparent 15%);
}

.projektCard_content { padding: var(--sp3) var(--sp4); }
.projektCard_tag {
  display: inline-block;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--colorAccentMid);
  background: var(--colorAccentLighter);
  padding: 0.25rem 0.75rem;
  border-radius: var(--rFull);
  margin-bottom: var(--sp2);
}
.projektCard_title {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--colorPrimary);
  margin-bottom: var(--sp2);
}
.projektCard_text {
  font-size: 0.9rem;
  color: var(--colorTextMuted);
  line-height: 1.7;
}

/* ============================================================
   WISSENS SECTION
   ============================================================ */
.wissensSection {
  padding: var(--sp7) 0;
  background: var(--colorSurface);
}

.wissensSection_header {
  margin-bottom: var(--sp6);
}

.wissensSection_grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp4);
}
@media (min-width: 768px) { .wissensSection_grid { grid-template-columns: 1fr 1fr; } }

.wissensCard {
  border-radius: var(--r4);
  overflow: hidden;
  box-shadow: var(--shadowMd);
  border: 1px solid var(--colorBorder);
  background: var(--colorSurface);
  transition: box-shadow var(--transBase), transform var(--transBase);
}
.wissensCard:hover { box-shadow: var(--shadowLg); transform: translateY(-3px); }

.wissensCard_img {
  width: 100%;
  aspect-ratio: 16/9;
  object-fit: cover;
}
.wissensCard_content { padding: var(--sp4); }
.wissensCard_title {
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--colorPrimary);
  margin-bottom: var(--sp2);
}
.wissensCard_content p {
  font-size: 0.92rem;
  color: var(--colorTextMuted);
  line-height: 1.75;
  margin-bottom: var(--sp2);
}
.wissensCard_content p:last-child { margin-bottom: 0; }

/* ============================================================
   CTA SECTION
   ============================================================ */
.ctaSection {
  padding: var(--sp7) 0;
  background: var(--colorSurfaceAlt);
}

.ctaSection_grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp4);
}
@media (min-width: 768px) { .ctaSection_grid { grid-template-columns: 1fr 1fr; } }

.ctaCard {
  padding: var(--sp5);
  border-radius: var(--r4);
  box-shadow: var(--shadowMd);
  transition: transform var(--transBase), box-shadow var(--transBase);
}
.ctaCard:hover { transform: translateY(-4px); box-shadow: var(--shadowXl); }

.ctaCard--primary {
  background: var(--colorPrimary);
  color: var(--colorTextOnDark);
}
.ctaCard--secondary {
  background: var(--colorSurface);
  border: 2px solid var(--colorBorder);
}

.ctaCard_icon {
  font-size: 2rem;
  margin-bottom: var(--sp3);
  color: var(--colorWarmLight);
}
.ctaCard--secondary .ctaCard_icon { color: var(--colorAccentMid); }

.ctaCard_title {
  font-size: 1.4rem;
  font-weight: 700;
  margin-bottom: var(--sp2);
  color: var(--colorTextOnDark);
}
.ctaCard--secondary .ctaCard_title { color: var(--colorPrimary); }

.ctaCard_text {
  font-size: 0.95rem;
  line-height: 1.75;
  margin-bottom: var(--sp4);
  color: color-mix(in oklch, white, transparent 25%);
}
.ctaCard--secondary .ctaCard_text { color: var(--colorTextMuted); }

/* ============================================================
   KREIDE SECTION
   ============================================================ */
.kreideSection {
  padding: var(--sp7) 0;
  background: var(--colorSurface);
}

.kreideSection_inner {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp6);
  align-items: center;
}
@media (min-width: 768px) { .kreideSection_inner { grid-template-columns: 1fr 1.2fr; } }

.kreideSection_image {
  border-radius: var(--r4);
  overflow: hidden;
  box-shadow: var(--shadowXl);
}
.kreideSection_img {
  width: 100%;
  aspect-ratio: 3/4;
  object-fit: cover;
  transition: transform var(--transSlow);
}
.kreideSection_image:hover .kreideSection_img { transform: scale(1.03); }

.kreideSection_content p {
  color: var(--colorTextMuted);
  font-size: 1rem;
  line-height: 1.8;
  margin-bottom: var(--sp3);
}

.kreideSection_reasons {
  display: flex;
  flex-direction: column;
  gap: var(--sp3);
  margin-top: var(--sp4);
}

.kreideReason {
  display: flex;
  gap: var(--sp3);
  align-items: flex-start;
}
.kreideReason_num {
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--colorAccentLight);
  flex-shrink: 0;
  line-height: 1;
  width: 40px;
}
.kreideReason strong {
  display: block;
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--colorPrimary);
  margin-bottom: 0.3rem;
}
.kreideReason p {
  font-size: 0.88rem;
  color: var(--colorTextMuted);
  line-height: 1.65;
  margin-bottom: 0 !important;
}

/* ============================================================
   PAGE HERO (Inner pages)
   ============================================================ */
.innerPage { padding-top: 64px; }

.pageHero--inner {
  padding: var(--sp7) 0 var(--sp6);
  background: linear-gradient(135deg, var(--colorPrimary) 0%, var(--colorAccentMid) 100%);
}

.pageHero_content { max-width: 720px; }
.pageHero_content .sectionLabel { color: var(--colorWarmLight); }

.pageHero_title {
  font-size: clamp(2.2rem, 5vw, 4rem);
  font-weight: 700;
  color: white;
  line-height: 1.1;
  margin-bottom: var(--sp3);
}

.pageHero_sub {
  font-size: 1.1rem;
  color: color-mix(in oklch, white, transparent 25%);
  line-height: 1.75;
  font-weight: 300;
}

/* ============================================================
   STORY SECTION
   ============================================================ */
.storySection {
  padding: var(--sp7) 0;
  background: var(--colorSurface);
}

.storySection_grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp6);
}
@media (min-width: 1024px) { .storySection_grid { grid-template-columns: 1.5fr 1fr; } }

.storyBlock { margin-bottom: var(--sp5); }
.storyBlock:last-child { margin-bottom: 0; }

.storyBlock_heading {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--colorPrimary);
  margin-bottom: var(--sp3);
  padding-bottom: var(--sp2);
  border-bottom: 2px solid var(--colorBorder);
}
.storyBlock p {
  color: var(--colorTextMuted);
  font-size: 1rem;
  line-height: 1.85;
  margin-bottom: var(--sp3);
}
.storyBlock p:last-child { margin-bottom: 0; }

.storySection_aside {
  display: flex;
  flex-direction: column;
  gap: var(--sp3);
}

.storyAside_card {
  border-radius: var(--r4);
  overflow: hidden;
  box-shadow: var(--shadowMd);
  border: 1px solid var(--colorBorder);
}
.storyAside_img { width: 100%; aspect-ratio: 16/10; object-fit: cover; }
.storyAside_content { padding: var(--sp3); }
.storyAside_content h4 { font-size: 1rem; font-weight: 700; margin-bottom: var(--sp1); }
.storyAside_content p { font-size: 0.88rem; color: var(--colorTextMuted); line-height: 1.65; }

.storyAside_infoBox {
  padding: var(--sp3);
  border-radius: var(--r3);
  background: var(--colorSurfaceAlt);
  border-left: 4px solid var(--colorBorder);
}
.storyAside_infoBox--accent { border-left-color: var(--colorAccentMid); }
.storyAside_infoBox h4 { font-size: 0.95rem; font-weight: 700; margin-bottom: var(--sp1); }
.storyAside_infoBox p { font-size: 0.87rem; color: var(--colorTextMuted); line-height: 1.65; }

/* ============================================================
   PHILOSOPHY SECTION
   ============================================================ */
.philosophySection {
  padding: var(--sp7) 0;
  background: var(--colorSurfaceAlt);
}

.philosophySection_inner { margin-bottom: var(--sp6); }

.pullQuote {
  max-width: 780px;
  margin: 0 auto;
  padding: var(--sp4) var(--sp5);
  border-left: 5px solid var(--colorAccentMid);
  background: var(--colorSurface);
  border-radius: 0 var(--r3) var(--r3) 0;
  box-shadow: var(--shadowMd);
}
.pullQuote p {
  font-size: clamp(1.1rem, 2.2vw, 1.4rem);
  font-weight: 500;
  color: var(--colorPrimary);
  line-height: 1.6;
  font-style: italic;
}

.philosophySection_grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp4);
}
@media (min-width: 768px) { .philosophySection_grid { grid-template-columns: repeat(4, 1fr); } }

.philosophyCard {
  padding: var(--sp4);
  background: var(--colorSurface);
  border-radius: var(--r3);
  box-shadow: var(--shadowSm);
  border: 1px solid var(--colorBorder);
  text-align: center;
  transition: transform var(--transBase), box-shadow var(--transBase);
}
.philosophyCard:hover { transform: translateY(-4px); box-shadow: var(--shadowLg); }
.philosophyCard_icon {
  font-size: 1.8rem;
  color: var(--colorAccentMid);
  margin-bottom: var(--sp2);
}
.philosophyCard h3 {
  font-size: 0.95rem;
  font-weight: 700;
  margin-bottom: var(--sp2);
  color: var(--colorPrimary);
}
.philosophyCard p { font-size: 0.85rem; color: var(--colorTextMuted); line-height: 1.65; }

/* ============================================================
   GLOSSAR
   ============================================================ */
.glossarNav {
  background: var(--colorPrimary);
  padding: var(--sp2) 0;
  position: sticky;
  top: 64px;
  z-index: 100;
}
.glossarNav_inner {
  display: flex;
  gap: var(--sp2);
  flex-wrap: wrap;
  overflow-x: auto;
  padding: 0 var(--sp4);
  max-width: 1200px;
  margin: 0 auto;
}
.glossarNav_link {
  font-size: 0.8rem;
  font-weight: 600;
  color: color-mix(in oklch, white, transparent 30%);
  padding: 0.4rem 0.9rem;
  border-radius: var(--rFull);
  white-space: nowrap;
  transition: background var(--transBase), color var(--transBase);
}
.glossarNav_link:hover {
  background: color-mix(in oklch, white, transparent 85%);
  color: white;
}

.glossarSection { padding: var(--sp7) 0; background: var(--colorSurface); }
.glossarSection--alt { background: var(--colorSurfaceAlt); }

.glossarSection_header { margin-bottom: var(--sp5); }
.glossarSection_header p { color: var(--colorTextMuted); font-size: 1rem; line-height: 1.75; }

.glossarGrid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp3);
}
@media (min-width: 600px) { .glossarGrid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1024px) { .glossarGrid { grid-template-columns: 1fr 1fr 1fr; } }

.glossarEntry {
  padding: var(--sp4);
  background: var(--colorSurface);
  border-radius: var(--r3);
  border: 1px solid var(--colorBorder);
  box-shadow: var(--shadowSm);
  transition: border-color var(--transBase), box-shadow var(--transBase), transform var(--transBase);
}
.glossarSection--alt .glossarEntry { background: var(--colorSurface); }
.glossarEntry:hover {
  border-color: var(--colorAccentLight);
  box-shadow: var(--shadowMd);
  transform: translateY(-2px);
}

.glossarEntry_term {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--colorPrimary);
  margin-bottom: var(--sp2);
}
.glossarEntry_def {
  font-size: 0.88rem;
  color: var(--colorTextMuted);
  line-height: 1.75;
  margin-bottom: var(--sp2);
}
.glossarEntry_tag {
  display: inline-block;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--colorAccentMid);
  background: var(--colorAccentLighter);
  padding: 0.2rem 0.6rem;
  border-radius: var(--rFull);
}

/* ============================================================
   QUELLEN PAGE
   ============================================================ */
.quellenSection { padding: var(--sp7) 0; }

.quellenSection_intro {
  margin-bottom: var(--sp5);
  padding: var(--sp3) var(--sp4);
  background: var(--colorSurfaceAlt);
  border-radius: var(--r3);
  border-left: 4px solid var(--colorAccentMid);
}
.quellenSection_intro p { color: var(--colorTextMuted); font-size: 0.95rem; line-height: 1.75; }

.quellenKategorie { margin-bottom: var(--sp6); }
.quellenKategorie_title {
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--colorPrimary);
  margin-bottom: var(--sp4);
  display: flex;
  align-items: center;
  gap: var(--sp2);
  padding-bottom: var(--sp2);
  border-bottom: 2px solid var(--colorBorder);
}
.quellenKategorie_title i { color: var(--colorAccentMid); }

.quellenGrid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp3);
}
@media (min-width: 600px) { .quellenGrid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1024px) { .quellenGrid { grid-template-columns: 1fr 1fr 1fr; } }

.quellenCard {
  padding: var(--sp4);
  background: var(--colorSurface);
  border-radius: var(--r3);
  border: 1px solid var(--colorBorder);
  box-shadow: var(--shadowSm);
  transition: transform var(--transBase), box-shadow var(--transBase), border-color var(--transBase);
}
.quellenCard:hover { transform: translateY(-3px); box-shadow: var(--shadowMd); border-color: var(--colorAccentLight); }

.quellenCard_header { display: flex; align-items: center; gap: var(--sp2); margin-bottom: var(--sp2); }
.quellenCard_kuerzel {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--colorAccentMid);
  background: var(--colorAccentLighter);
  padding: 0.2rem 0.6rem;
  border-radius: var(--rFull);
  flex-shrink: 0;
}
.quellenCard_title { font-size: 0.95rem; font-weight: 700; color: var(--colorPrimary); }
.quellenCard_text { font-size: 0.87rem; color: var(--colorTextMuted); line-height: 1.7; margin-bottom: var(--sp2); }
.quellenCard_url { font-size: 0.78rem; color: var(--colorAccentMid); font-weight: 500; }

.quellenHinweis {
  display: flex;
  gap: var(--sp3);
  align-items: flex-start;
  padding: var(--sp3) var(--sp4);
  background: var(--colorPrimaryLighter);
  border-radius: var(--r3);
  border: 1px solid var(--colorBorder);
  margin-top: var(--sp5);
}
.quellenHinweis i { color: var(--colorAccentMid); font-size: 1.1rem; flex-shrink: 0; margin-top: 0.2rem; }
.quellenHinweis p { font-size: 0.88rem; color: var(--colorTextMuted); line-height: 1.7; }

/* ============================================================
   CONTACT PAGE
   ============================================================ */
.contactSection { padding: var(--sp7) 0; }

.contactSection_grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp6);
}
@media (min-width: 768px) { .contactSection_grid { grid-template-columns: 1.4fr 1fr; } }

.contactSection_heading {
  font-size: 1.6rem;
  font-weight: 700;
  color: var(--colorPrimary);
  margin-bottom: var(--sp4);
}


.accordionForm { display: flex; flex-direction: column; gap: var(--sp2); }

.accordionForm_section {
  border: 1px solid var(--colorBorder);
  border-radius: var(--r3);
  overflow: hidden;
  background: var(--colorSurface);
  box-shadow: var(--shadowSm);
  transition: box-shadow var(--transBase);
}
.accordionForm_section:hover { box-shadow: var(--shadowMd); }

.accordionForm_trigger {
  width: 100%;
  display: flex;
  align-items: center;
  gap: var(--sp2);
  padding: var(--sp3) var(--sp3);
  background: transparent;
  cursor: pointer;
  transition: background var(--transBase);
  min-height: 56px;
}
.accordionForm_trigger:hover { background: var(--colorSurfaceAlt); }

.accordionForm_num {
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--colorAccentMid);
  background: var(--colorAccentLighter);
  width: 28px;
  height: 28px;
  border-radius: var(--r2);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.accordionForm_label {
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--colorPrimary);
  flex: 1;
  text-align: left;
}
.accordionForm_arrow {
  font-size: 0.8rem;
  color: var(--colorTextMuted);
  transition: transform var(--transBase);
}
.accordionForm_section--open .accordionForm_arrow { transform: rotate(180deg); }

.accordionForm_body {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
.accordionForm_section--open .accordionForm_body { max-height: 600px; }

.accordionForm_body > * { padding: 0 var(--sp3) var(--sp3); }
.accordionForm_body .formField:first-child { padding-top: var(--sp2); }


.formField { margin-bottom: var(--sp3); }
.formField:last-child { margin-bottom: 0; }

.formField_label {
  display: block;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--colorPrimary);
  margin-bottom: 0.4rem;
}
.formField_req { color: var(--colorAccentMid); }

.formField_input,
.formField_textarea {
  width: 100%;
  padding: 0.75rem 1rem;
  border: 1.5px solid var(--colorBorder);
  border-radius: var(--r2);
  font-size: 0.95rem;
  font-family: inherit;
  color: var(--colorText);
  background: var(--colorSurface);
  transition: border-color var(--transBase), box-shadow var(--transBase), background var(--transBase);
  min-height: 44px;
}
.formField_input:focus,
.formField_textarea:focus {
  outline: none;
  border-color: var(--colorAccentMid);
  box-shadow: 0 0 0 3px var(--colorAccentLighter);
  background: white;
}
.formField_textarea { resize: vertical; min-height: 120px; }

.formField--checkbox {
  display: flex;
  gap: var(--sp2);
  align-items: flex-start;
  margin-bottom: var(--sp3);
}
.formField_checkbox {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  margin-top: 2px;
  accent-color: var(--colorAccentMid);
  cursor: pointer;
}
.formField_checkLabel {
  font-size: 0.85rem;
  color: var(--colorTextMuted);
  line-height: 1.6;
  cursor: pointer;
}
.formField_checkLabel a {
  color: var(--colorAccentMid);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.formField_checkLabel a:hover { color: var(--colorAccentDark); }


.contactInfo_card {
  background: var(--colorSurfaceAlt);
  border-radius: var(--r4);
  padding: var(--sp4);
  border: 1px solid var(--colorBorder);
  box-shadow: var(--shadowSm);
  height: fit-content;
}
.contactInfo_heading {
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--colorPrimary);
  margin-bottom: var(--sp4);
  padding-bottom: var(--sp2);
  border-bottom: 2px solid var(--colorBorder);
}
.contactInfo_list { display: flex; flex-direction: column; gap: var(--sp3); }
.contactInfo_item { display: flex; gap: var(--sp2); align-items: flex-start; }
.contactInfo_icon {
  width: 36px;
  height: 36px;
  border-radius: var(--r2);
  background: var(--colorAccentLighter);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.9rem;
  color: var(--colorAccentMid);
  flex-shrink: 0;
  transition: background var(--transBase), color var(--transBase);
}
.contactInfo_item:hover .contactInfo_icon {
  background: var(--colorAccentMid);
  color: white;
}
.contactInfo_text strong {
  display: block;
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--colorTextLight);
  margin-bottom: 0.2rem;
}
.contactInfo_text span,
.contactInfo_text a {
  font-size: 0.9rem;
  color: var(--colorText);
  line-height: 1.5;
  transition: color var(--transBase);
}
.contactInfo_text a:hover { color: var(--colorAccentMid); }

.contactInfo_note {
  display: flex;
  gap: var(--sp2);
  align-items: flex-start;
  margin-top: var(--sp4);
  padding: var(--sp2) var(--sp3);
  background: var(--colorPrimaryLighter);
  border-radius: var(--r2);
  border: 1px solid var(--colorBorder);
}
.contactInfo_note i { color: var(--colorAccentMid); font-size: 0.9rem; margin-top: 3px; flex-shrink: 0; }
.contactInfo_note p { font-size: 0.82rem; color: var(--colorTextMuted); line-height: 1.6; }


.teamSection {
  padding: var(--sp7) 0;
  background: var(--colorSurfaceAlt);
}
.teamSection_inner {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp6);
  align-items: center;
}
@media (min-width: 768px) { .teamSection_inner { grid-template-columns: 1fr 1.4fr; } }

.teamSection_image {
  border-radius: var(--r4);
  overflow: hidden;
  box-shadow: var(--shadowXl);
}
.teamSection_img {
  width: 100%;
  aspect-ratio: 4/5;
  object-fit: cover;
  transition: transform var(--transSlow);
}
.teamSection_image:hover .teamSection_img { transform: scale(1.03); }

.teamSection_content p {
  color: var(--colorTextMuted);
  font-size: 1rem;
  line-height: 1.85;
  margin-bottom: var(--sp3);
}
.teamSection_content p:last-of-type { margin-bottom: var(--sp4); }

.teamSection_details {
  display: flex;
  gap: var(--sp4);
  flex-wrap: wrap;
}
.teamSection_details span {
  display: flex;
  align-items: center;
  gap: var(--sp1);
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--colorAccentMid);
}


.mapSection { padding: var(--sp5) 0 var(--sp7); }
.mapSection_title {
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--colorPrimary);
  margin-bottom: var(--sp3);
}
.mapSection_map {
  border-radius: var(--r4);
  overflow: hidden;
  box-shadow: var(--shadowLg);
  border: 1px solid var(--colorBorder);
}
.mapSection_map iframe { display: block; }

/* ============================================================
   THANKS PAGE
   ============================================================ */
.thanksSection {
  min-height: 100vh;
  background: linear-gradient(135deg, var(--colorAccentMid) 0%, var(--colorPrimary) 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: var(--sp7) var(--sp4);
}
.thanksSection_inner { max-width: 560px; }
.thanksSection_icon {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: color-mix(in oklch, white, transparent 80%);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2rem;
  color: white;
  margin: 0 auto var(--sp4);
  border: 2px solid color-mix(in oklch, white, transparent 55%);
}
.thanksSection_heading {
  font-size: clamp(1.8rem, 4vw, 3rem);
  font-weight: 700;
  color: white;
  margin-bottom: var(--sp3);
}
.thanksSection_text {
  font-size: 1.1rem;
  color: color-mix(in oklch, white, transparent 25%);
  line-height: 1.75;
  margin-bottom: var(--sp5);
}

/* ============================================================
   LEGAL PAGES
   ============================================================ */
.legalPage { background: var(--colorSurface); }


.legalTimeline { padding: var(--sp6) 0 var(--sp7); }

.legalTimeline_header { margin-bottom: var(--sp6); }
.legalTimeline_title {
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: 700;
  color: var(--colorPrimary);
  margin-bottom: var(--sp2);
}
.legalTimeline_meta {
  font-size: 0.85rem;
  color: var(--colorTextMuted);
  line-height: 1.6;
}

.legalTimeline_body {
  position: relative;
  padding-left: 2.5rem;
}
.legalTimeline_body::before {
  content: '';
  position: absolute;
  left: 10px;
  top: 0;
  bottom: 0;
  width: 2px;
  background: linear-gradient(to bottom, var(--colorAccentMid), var(--colorBorder));
  border-radius: var(--rFull);
}

.legalTimeline_item {
  position: relative;
  margin-bottom: var(--sp5);
}
.legalTimeline_item:last-child { margin-bottom: 0; }

.legalTimeline_dot {
  position: absolute;
  left: -2.5rem;
  top: 0.3rem;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--colorAccentMid);
  border: 3px solid var(--colorSurface);
  box-shadow: 0 0 0 2px var(--colorAccentLight);
  transition: transform var(--transBase), box-shadow var(--transBase);
}
.legalTimeline_item:hover .legalTimeline_dot {
  transform: scale(1.2);
  box-shadow: 0 0 0 3px var(--colorAccentLight);
}

.legalTimeline_content {
  background: var(--colorSurface);
  border: 1px solid var(--colorBorder);
  border-radius: var(--r3);
  padding: var(--sp4);
  box-shadow: var(--shadowSm);
  transition: box-shadow var(--transBase);
}
.legalTimeline_content:hover { box-shadow: var(--shadowMd); }

.legalTimeline_content h2 {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--colorPrimary);
  margin-bottom: var(--sp2);
}
.legalTimeline_content p {
  font-size: 0.9rem;
  color: var(--colorTextMuted);
  line-height: 1.8;
  margin-bottom: var(--sp2);
}
.legalTimeline_content p:last-child { margin-bottom: 0; }
.legalTimeline_content ul {
  list-style: disc;
  padding-left: var(--sp4);
  margin-bottom: var(--sp2);
}
.legalTimeline_content ul li {
  font-size: 0.9rem;
  color: var(--colorTextMuted);
  line-height: 1.75;
  margin-bottom: 0.3rem;
}
.legalTimeline_content strong { color: var(--colorPrimary); }
.legalTimeline_content a {
  color: var(--colorAccentMid);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.legalTimeline_content a:hover { color: var(--colorAccentDark); }


.legalAccordion { padding: var(--sp6) 0 var(--sp7); }

.legalAccordion_header { margin-bottom: var(--sp6); }
.legalAccordion_title {
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: 700;
  color: var(--colorPrimary);
  margin-bottom: var(--sp2);
}
.legalAccordion_meta {
  font-size: 0.85rem;
  color: var(--colorTextMuted);
}

.legalAccordion_body { display: flex; flex-direction: column; gap: var(--sp4); }

.legalAccordion_section {
  background: var(--colorSurface);
  border: 1px solid var(--colorBorder);
  border-radius: var(--r3);
  padding: var(--sp4);
  box-shadow: var(--shadowSm);
  transition: box-shadow var(--transBase), border-color var(--transBase);
}
.legalAccordion_section:hover { box-shadow: var(--shadowMd); border-color: var(--colorAccentLight); }

.legalAccordion_section h2 {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--colorPrimary);
  margin-bottom: var(--sp3);
  padding-bottom: var(--sp2);
  border-bottom: 1px solid var(--colorBorder);
}
.legalAccordion_section p {
  font-size: 0.9rem;
  color: var(--colorTextMuted);
  line-height: 1.8;
  margin-bottom: var(--sp2);
}
.legalAccordion_section p:last-child { margin-bottom: 0; }
.legalAccordion_section a {
  color: var(--colorAccentMid);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.legalAccordion_section a:hover { color: var(--colorAccentDark); }


.legalCompact { padding: var(--sp6) 0 var(--sp7); }

.legalCompact_header { margin-bottom: var(--sp5); }
.legalCompact_title {
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: 700;
  color: var(--colorPrimary);
  margin-bottom: var(--sp1);
}
.legalCompact_meta {
  font-size: 0.82rem;
  color: var(--colorTextMuted);
  margin-bottom: var(--sp3);
}
.legalCompact_intro {
  font-size: 0.95rem;
  color: var(--colorTextMuted);
  line-height: 1.75;
  max-width: 720px;
}
.legalCompact_intro a {
  color: var(--colorAccentMid);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.cookieTable_wrap { margin-bottom: var(--sp5); }
.cookieTable_heading {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--colorPrimary);
  margin-bottom: var(--sp3);
}
.cookieTable {
  width: 100%;
  border-collapse: collapse;
  border-radius: var(--r3);
  overflow: hidden;
  box-shadow: var(--shadowSm);
  font-size: 0.88rem;
}
.cookieTable thead {
  background: var(--colorPrimary);
  color: white;
}
.cookieTable th {
  padding: 0.75rem 1rem;
  text-align: left;
  font-weight: 600;
  font-size: 0.82rem;
  letter-spacing: 0.04em;
}
.cookieTable td {
  padding: 0.75rem 1rem;
  border-bottom: 1px solid var(--colorBorder);
  color: var(--colorTextMuted);
  vertical-align: top;
}
.cookieTable tbody tr { background: var(--colorSurface); transition: background var(--transBase); }
.cookieTable tbody tr:hover { background: var(--colorSurfaceAlt); }
.cookieTable code {
  background: var(--colorAccentLighter);
  color: var(--colorAccentDark);
  padding: 0.15rem 0.4rem;
  border-radius: var(--r1);
  font-size: 0.82rem;
  font-family: 'Courier New', monospace;
}

.legalCompact_sections { display: flex; flex-direction: column; gap: var(--sp4); }

.legalCompact_section {
  padding: var(--sp4);
  background: var(--colorSurface);
  border: 1px solid var(--colorBorder);
  border-radius: var(--r3);
  box-shadow: var(--shadowSm);
}
.legalCompact_section h2 {
  font-size: 1rem;
  font-weight: 700;
  color: var(--colorPrimary);
  margin-bottom: var(--sp2);
}
.legalCompact_section p {
  font-size: 0.88rem;
  color: var(--colorTextMuted);
  line-height: 1.8;
  margin-bottom: var(--sp2);
}
.legalCompact_section p:last-child { margin-bottom: 0; }
.legalCompact_section ul {
  list-style: disc;
  padding-left: var(--sp4);
  margin-bottom: var(--sp2);
}
.legalCompact_section ul li {
  font-size: 0.88rem;
  color: var(--colorTextMuted);
  line-height: 1.75;
  margin-bottom: 0.3rem;
}

/* ============================================================
   IMPRESSUM PAGE
   ============================================================ */
.impressumPage { padding: var(--sp6) 0 var(--sp7); }

.impressumPage_title {
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: 700;
  color: var(--colorPrimary);
  margin-bottom: var(--sp1);
}
.impressumPage_date {
  font-size: 0.85rem;
  color: var(--colorTextMuted);
  margin-bottom: var(--sp6);
}

.impressumSection {
  margin-bottom: var(--sp5);
  padding: var(--sp4);
  background: var(--colorSurface);
  border: 1px solid var(--colorBorder);
  border-radius: var(--r3);
  box-shadow: var(--shadowSm);
}
.impressumSection h2 {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--colorPrimary);
  margin-bottom: var(--sp3);
  padding-bottom: var(--sp1);
  border-bottom: 2px solid var(--colorBorder);
}
.impressumSection p {
  font-size: 0.9rem;
  color: var(--colorTextMuted);
  line-height: 1.8;
  margin-bottom: var(--sp2);
}
.impressumSection p:last-child { margin-bottom: 0; }
.impressumSection ul {
  list-style: disc;
  padding-left: var(--sp4);
}
.impressumSection ul li {
  font-size: 0.9rem;
  color: var(--colorTextMuted);
  line-height: 1.75;
  margin-bottom: 0.3rem;
}
.impressumSection a {
  color: var(--colorAccentMid);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.impressumSection a:hover { color: var(--colorAccentDark); }

.impressumTable {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.88rem;
  margin-bottom: var(--sp2);
}
.impressumTable tr { border-bottom: 1px solid var(--colorBorder); }
.impressumTable tr:last-child { border-bottom: none; }
.impressumTable th {
  width: 40%;
  padding: 0.6rem 0.8rem 0.6rem 0;
  text-align: left;
  font-weight: 600;
  color: var(--colorPrimary);
  vertical-align: top;
}
.impressumTable td {
  padding: 0.6rem 0;
  color: var(--colorTextMuted);
  vertical-align: top;
}
.impressumTable a {
  color: var(--colorAccentMid);
}

/* ============================================================
   FOOTER
   ============================================================ */
.pageFooter {
  background: var(--colorPrimary);
  color: var(--colorTextOnDark);
  margin-top: auto;
}

.pageFooter_newsletter {
  background: color-mix(in oklch, var(--colorAccentMid), var(--colorPrimary) 40%);
  padding: var(--sp5) 0;
  border-bottom: 1px solid color-mix(in oklch, white, transparent 85%);
}
.pageFooter_newsletterInner {
  display: flex;
  gap: var(--sp4);
  align-items: center;
  flex-wrap: wrap;
  justify-content: space-between;
}
.pageFooter_newsletterText h3 {
  font-size: 1.2rem;
  font-weight: 700;
  color: white;
  margin-bottom: 0.3rem;
}
.pageFooter_newsletterText p {
  font-size: 0.88rem;
  color: color-mix(in oklch, white, transparent 30%);
}
.pageFooter_newsletterForm {
  display: flex;
  gap: var(--sp2);
  flex-wrap: wrap;
  flex: 1;
  max-width: 480px;
  min-width: 280px;
}
.pageFooter_newsletterInput {
  flex: 1;
  padding: 0.7rem 1rem;
  border-radius: var(--rFull);
  border: 1.5px solid color-mix(in oklch, white, transparent 65%);
  background: color-mix(in oklch, white, transparent 88%);
  color: white;
  font-size: 0.9rem;
  font-family: inherit;
  min-height: 44px;
  transition: border-color var(--transBase), background var(--transBase);
}
.pageFooter_newsletterInput::placeholder { color: color-mix(in oklch, white, transparent 45%); }
.pageFooter_newsletterInput:focus {
  outline: none;
  border-color: white;
  background: color-mix(in oklch, white, transparent 80%);
}

.pageFooter_main { padding: var(--sp6) 0; }

.pageFooter_grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp5);
}
@media (min-width: 600px) { .pageFooter_grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1024px) { .pageFooter_grid { grid-template-columns: 2fr 1fr 1fr 1.5fr; } }

.pageFooter_logo {
  width: 40px;
  height: 40px;
  margin-bottom: var(--sp2);
  opacity: 0.9;
}
.pageFooter_about {
  font-size: 0.88rem;
  color: color-mix(in oklch, white, transparent 35%);
  line-height: 1.75;
}

.pageFooter_colTitle {
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--colorWarmLight);
  margin-bottom: var(--sp3);
}

.pageFooter_links { display: flex; flex-direction: column; gap: var(--sp1); }
.pageFooter_links a {
  font-size: 0.88rem;
  color: color-mix(in oklch, white, transparent 35%);
  transition: color var(--transBase), padding-left var(--transBase);
  padding: 0.2rem 0;
}
.pageFooter_links a:hover {
  color: white;
  padding-left: 4px;
}

.pageFooter_contactList {
  display: flex;
  flex-direction: column;
  gap: var(--sp2);
}
.pageFooter_contactList li {
  display: flex;
  gap: var(--sp2);
  align-items: flex-start;
  font-size: 0.88rem;
}
.pageFooter_contactList i {
  color: var(--colorWarmLight);
  font-size: 0.85rem;
  margin-top: 0.25rem;
  flex-shrink: 0;
  width: 16px;
}
.pageFooter_contactList span,
.pageFooter_contactList a {
  color: color-mix(in oklch, white, transparent 35%);
  line-height: 1.5;
  transition: color var(--transBase);
}
.pageFooter_contactList a:hover { color: white; }

.pageFooter_bar {
  background: color-mix(in oklch, var(--colorPrimary), black 20%);
  padding: var(--sp2) 0;
  border-top: 1px solid color-mix(in oklch, white, transparent 88%);
}
.pageFooter_bar .container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--sp2);
}
.pageFooter_bar p {
  font-size: 0.78rem;
  color: color-mix(in oklch, white, transparent 50%);
}

/* ============================================================
   RESPONSIVE UTILITIES
   ============================================================ */
@media (max-width: 480px) {
  .container { padding: 0 var(--sp3); }
  .mainHero_ctas { flex-direction: column; }
  .mainHero_ctas .btn { width: 100%; justify-content: center; }
  .pageFooter_newsletterForm { flex-direction: column; }
  .pageFooter_bar .container { flex-direction: column; text-align: center; }
  .philosophySection_grid { grid-template-columns: 1fr; }
  .cookieBar_inner { flex-direction: column; align-items: flex-start; gap: var(--sp1); }
  .legalTimeline_body { padding-left: 1.8rem; }
}

@media (min-width: 481px) and (max-width: 767px) {
  .philosophySection_grid { grid-template-columns: 1fr 1fr; }
}


body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}
main { flex: 1; }


::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-track { background: var(--colorSurfaceAlt); }
::-webkit-scrollbar-thumb {
  background: var(--colorPrimaryLight);
  border-radius: var(--rFull);
}
::-webkit-scrollbar-thumb:hover { background: var(--colorAccentLight); }


:focus-visible {
  outline: 2px solid var(--colorAccentMid);
  outline-offset: 3px;
  border-radius: var(--r1);
}