/* ==========================================================================
   iKAUF – Autonomer Supermarkt
   Shared Stylesheet (/assets/css/site.css)
   Pure CSS, no build step, no CDN, no external dependencies
   ========================================================================== */

/* --------------------------------------------------------------------------
   Typography: Self-hosted Fonts (Marcellus for headings, Inter for body)
   With reliable local/system font fallbacks
   -------------------------------------------------------------------------- */
@font-face {
  font-family: 'Marcellus';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/Marcellus-Regular.woff2') format('woff2'),
       url('../fonts/Marcellus-Regular.woff') format('woff');
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/Inter-Regular.woff2') format('woff2'),
       url('../fonts/Inter-Regular.woff') format('woff');
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../fonts/Inter-Medium.woff2') format('woff2'),
       url('../fonts/Inter-Medium.woff') format('woff');
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../fonts/Inter-SemiBold.woff2') format('woff2'),
       url('../fonts/Inter-SemiBold.woff') format('woff');
}

/* --------------------------------------------------------------------------
   CSS Custom Properties & Color Tokens
   -------------------------------------------------------------------------- */
:root {
  /* Brand Palette */
  --color-night-green: #0C2B28;
  --color-deep: #071D1B;
  --color-cream: #F7F6F1;
  --color-teal: #5FB3A8;
  --color-gold: #B8862B;

  /* Semantic Variables */
  --color-bg: #F7F6F1;
  --color-surface: #ffffff;
  --color-surface-subtle: #f0efe8;
  --color-border: #dedcd2;
  --color-border-hover: #c7c4b6;

  --color-text: #071D1B;
  --color-text-muted: #3d5350;
  --color-text-subtle: #617370;

  --color-primary: #0C2B28;
  --color-primary-hover: #071D1B;
  --color-accent-teal: #5FB3A8;
  --color-accent-gold: #B8862B;
  --color-focus: #5FB3A8;

  /* Typography */
  --font-family-headings: 'Marcellus', Georgia, 'Times New Roman', serif;
  --font-family-body: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-size-base: 1.0625rem; /* 17px baseline for calm readability */
  --line-height-base: 1.65;

  /* Spacing & Layout */
  --container-max-width: 1200px;
  --spacing-xs: 0.25rem;
  --spacing-sm: 0.5rem;
  --spacing-md: 1rem;
  --spacing-lg: 1.75rem;
  --spacing-xl: 3rem;
  --spacing-2xl: 5rem;

  /* Radii */
  --radius-sm: 6px;
  --radius-md: 12px;
  --radius-img: 24px; /* Images with 24px rounded corners, never cropped */
}

/* --------------------------------------------------------------------------
   CSS Reset & Accessibility Foundation
   -------------------------------------------------------------------------- */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-size: 100%;
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background-color: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-family-body);
  font-size: var(--font-size-base);
  line-height: var(--line-height-base);
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-family-headings);
  font-weight: 400;
  color: var(--color-night-green);
  line-height: 1.25;
  letter-spacing: 0.01em;
}

/* Images: 24px rounded corners, never cropped: show every image completely */
img, picture {
  display: block;
  max-width: 100%;
  height: auto;
  border-radius: var(--radius-img);
  object-fit: contain; /* never cropped */
}

/* Dedicated unrounded class only for inline logos and vectors */
img.site-logo-img {
  border-radius: 0;
  max-height: 42px;
  width: auto;
  object-fit: contain;
}

a {
  color: var(--color-night-green);
  text-decoration: underline;
  text-underline-offset: 4px;
  transition: color 0.15s ease-in-out;
}

a:hover {
  color: var(--color-teal);
}

/* --------------------------------------------------------------------------
   Accessible Focus States & Skip Link
   -------------------------------------------------------------------------- */
:focus-visible {
  outline: 3px solid var(--color-focus);
  outline-offset: 3px;
}

.skip-link {
  position: absolute;
  top: -100px;
  left: 1.5rem;
  background: var(--color-night-green);
  color: var(--color-cream);
  padding: 0.85rem 1.5rem;
  z-index: 1000;
  text-decoration: none;
  font-weight: 600;
  border-radius: var(--radius-sm);
  transition: top 0.2s ease-out;
}

.skip-link:focus {
  top: 1.5rem;
}

/* --------------------------------------------------------------------------
   Layout Containers
   -------------------------------------------------------------------------- */
.site-container {
  width: 100%;
  max-width: var(--container-max-width);
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--spacing-lg);
  padding-right: var(--spacing-lg);
}

/* --------------------------------------------------------------------------
   Site Header & Navigation (Light Background -> Logo Dark)
   -------------------------------------------------------------------------- */
.site-header {
  background-color: var(--color-cream);
  border-bottom: 1px solid var(--color-border);
  position: sticky;
  top: 0;
  z-index: 100;
}

.site-header .site-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 5.5rem;
}

.site-brand {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
}

.site-brand .brand-line-text {
  font-family: var(--font-family-body);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  color: var(--color-text-subtle);
  margin-left: var(--spacing-md);
  padding-left: var(--spacing-md);
  border-left: 1px solid var(--color-border);
  text-transform: uppercase;
}

.site-nav {
  display: flex;
  align-items: center;
}

.nav-list {
  display: flex;
  list-style: none;
  gap: var(--spacing-lg);
  align-items: center;
}

.nav-link {
  display: inline-block;
  padding: 0.5rem 0.75rem;
  font-size: 0.95rem;
  font-weight: 500;
  color: var(--color-text-muted);
  text-decoration: none;
  border-radius: var(--radius-sm);
  transition: color 0.15s ease, background-color 0.15s ease;
}

.nav-link:hover {
  color: var(--color-night-green);
  background-color: var(--color-surface-subtle);
}

.nav-link[aria-current="page"] {
  color: var(--color-night-green);
  font-weight: 600;
  border-bottom: 2px solid var(--color-gold);
  border-radius: 0;
}

/* --------------------------------------------------------------------------
   Main Content Skeleton Area
   -------------------------------------------------------------------------- */
.site-main {
  flex: 1 0 auto;
  padding-top: var(--spacing-2xl);
  padding-bottom: var(--spacing-2xl);
}

.skeleton-hero {
  padding: var(--spacing-xl) 0;
  border-bottom: 1px dashed var(--color-border);
  margin-bottom: var(--spacing-xl);
}

.skeleton-title {
  font-size: 2.5rem;
  line-height: 1.2;
  font-weight: 400;
  color: var(--color-night-green);
  margin-bottom: var(--spacing-sm);
}

.skeleton-subtitle {
  font-size: 1.15rem;
  color: var(--color-text-muted);
}

.skeleton-content-slot {
  min-height: 240px;
  background-color: var(--color-surface);
  border: 1px dashed var(--color-border-hover);
  border-radius: var(--radius-md);
  padding: var(--spacing-xl);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  color: var(--color-text-subtle);
}

/* --------------------------------------------------------------------------
   Site Footer (Dark Background -> Logo Light)
   -------------------------------------------------------------------------- */
.site-footer {
  margin-top: auto;
  background-color: var(--color-deep);
  border-top: 1px solid #143531;
  padding-top: var(--spacing-2xl);
  padding-bottom: var(--spacing-xl);
  color: #a4b8b5;
  font-size: 0.9rem;
}

.site-footer .footer-inner {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xl);
}

.site-footer .footer-top {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-lg);
  padding-bottom: var(--spacing-lg);
  border-bottom: 1px solid #143531;
}

.site-footer .footer-brand-wrap {
  display: flex;
  align-items: center;
  gap: var(--spacing-md);
}

.site-footer .footer-brand-line {
  font-size: 0.75rem;
  letter-spacing: 0.12em;
  color: var(--color-teal);
  text-transform: uppercase;
  font-weight: 600;
}

.site-footer .footer-legal-notice {
  font-size: 0.85rem;
  color: #7b9491;
  line-height: 1.5;
}

.footer-nav {
  display: flex;
  list-style: none;
  gap: var(--spacing-lg);
}

.footer-nav a {
  color: #c9d8d6;
  text-decoration: none;
}

.footer-nav a:hover {
  color: var(--color-cream);
  text-decoration: underline;
}

.footer-nav a[aria-current="page"] {
  color: var(--color-teal);
  font-weight: 600;
}

.site-footer .footer-bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-md);
  font-size: 0.825rem;
  color: #7b9491;
}

/* --------------------------------------------------------------------------
   Mobile Navigation Toggle (Vanilla JS)
   -------------------------------------------------------------------------- */
.nav-toggle {
  display: none;
  background: transparent;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: 0.5rem 0.85rem;
  font-size: 0.9rem;
  cursor: pointer;
  color: var(--color-night-green);
  font-family: var(--font-family-body);
}

@media (max-width: 820px) {
  .site-brand .brand-line-text {
    display: none;
  }

  .nav-toggle {
    display: inline-flex;
    align-items: center;
  }

  .nav-list {
    display: none;
    position: absolute;
    top: 5.5rem;
    left: 0;
    right: 0;
    background-color: var(--color-cream);
    flex-direction: column;
    padding: var(--spacing-md) var(--spacing-lg);
    border-bottom: 1px solid var(--color-border);
    gap: var(--spacing-sm);
  }

  .nav-list.is-open {
    display: flex;
  }

  .nav-link {
    width: 100%;
    padding: 0.75rem;
  }

  .site-footer .footer-top,
  .site-footer .footer-bottom {
    flex-direction: column;
    align-items: flex-start;
  }
}

/* --------------------------------------------------------------------------
   Full-Screen Landing Gate (/index.html)
   -------------------------------------------------------------------------- */
.landing-body {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background-color: var(--color-deep);
  color: var(--color-cream);
  position: relative;
  overflow-x: hidden;
}

.landing-container {
  width: 100%;
  max-width: 1280px;
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--spacing-lg);
  padding-right: var(--spacing-lg);
}

/* Background Photo & Dark Green Overlay */
.landing-bg-layer {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100vw;
  height: 100vh;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}

.landing-bg-image {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  height: 100%;
  max-width: none;
  border-radius: 0; /* Background layer fills full-bleed */
  object-fit: contain; /* Show the whole image, centred */
  background-color: var(--color-deep);
}

.landing-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  /* Dark green overlay (#071D1B at about 70 % opacity) */
  background-color: rgba(7, 29, 27, 0.72);
  backdrop-filter: blur(1px);
}

/* Landing Header: Berlin Live Clock at Top Right */
.landing-header {
  position: relative;
  z-index: 10;
  padding-top: var(--spacing-lg);
  padding-bottom: var(--spacing-md);
}

.landing-header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.berlin-clock-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--font-family-body);
  font-size: 0.875rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: #cde2de;
  background-color: rgba(12, 43, 40, 0.7);
  border: 1px solid rgba(95, 179, 168, 0.3);
  padding: 0.45rem 0.95rem;
  border-radius: 9999px;
  backdrop-filter: blur(6px);
}

.berlin-clock-badge::before {
  content: '';
  display: inline-block;
  width: 7px;
  height: 7px;
  background-color: var(--color-teal);
  border-radius: 50%;
  box-shadow: 0 0 8px var(--color-teal);
}

/* Landing Main Layout */
.landing-main {
  position: relative;
  z-index: 10;
  flex: 1 0 auto;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding-top: var(--spacing-lg);
  padding-bottom: var(--spacing-xl);
}

.landing-content {
  flex: 1 0 auto;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  min-height: calc(100vh - 160px);
  gap: var(--spacing-2xl);
}

/* Center Hero: Large Logo, Gold Brandline, Meta */
.landing-hero {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding-top: var(--spacing-md);
}

.landing-logo-wrap {
  margin-bottom: var(--spacing-md);
}

.landing-logo-img {
  width: clamp(200px, 30vw, 320px);
  height: auto;
  max-height: 90px;
  border-radius: 0; /* Logo retains pristine aspect */
  object-fit: contain;
}

.landing-brandline {
  font-family: var(--font-family-body);
  font-size: clamp(0.75rem, 1.6vw, 0.9rem);
  font-weight: 600;
  letter-spacing: 0.22em; /* wide letter spacing */
  color: var(--color-gold); /* gold capitals */
  text-transform: uppercase;
  margin-bottom: var(--spacing-xs);
}

.landing-meta {
  font-family: var(--font-family-headings);
  font-size: clamp(1.05rem, 2vw, 1.35rem);
  font-weight: 400;
  letter-spacing: 0.04em;
  color: #e4eee9;
}

/* Bottom Area: Three Large Doors */
.doors-nav {
  width: 100%;
  margin-top: auto;
}

.doors-group {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--spacing-lg);
  width: 100%;
}

/* Base Door Card */
.door-card {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 220px;
  padding: var(--spacing-xl) var(--spacing-lg) var(--spacing-lg);
  background: rgba(12, 43, 40, 0.72);
  border: 1px solid rgba(222, 220, 210, 0.18);
  border-radius: 20px;
  text-decoration: none;
  color: var(--color-cream);
  backdrop-filter: blur(8px);
  position: relative;
  transition: transform 0.3s cubic-bezier(0.2, 0, 0, 1),
              opacity 0.3s ease,
              border-color 0.3s ease,
              background-color 0.3s ease,
              box-shadow 0.3s ease;
  will-change: transform, opacity;
}

.door-eyebrow {
  font-family: var(--font-family-body);
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.15em;
  color: var(--color-teal);
  margin-bottom: var(--spacing-sm);
}

.door-title {
  font-family: var(--font-family-headings);
  font-size: 1.75rem;
  line-height: 1.2;
  font-weight: 400;
  color: var(--color-cream);
  margin-bottom: var(--spacing-sm);
}

.door-desc {
  font-family: var(--font-family-body);
  font-size: 0.95rem;
  line-height: 1.55;
  color: #c5d7d3;
  margin-bottom: var(--spacing-lg);
  flex-grow: 1;
}

.door-action {
  font-family: var(--font-family-body);
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  color: var(--color-gold);
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  transition: color 0.2s ease, transform 0.2s ease;
}

/* Door Hover Interaction: Hovering one enlarges it slightly and fades the other two */
.doors-group:hover .door-card {
  opacity: 0.45;
  transform: scale(0.98);
}

.doors-group .door-card:hover {
  opacity: 1;
  transform: scale(1.035);
  background: rgba(12, 43, 40, 0.92);
  border-color: rgba(95, 179, 168, 0.55);
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.35);
}

.doors-group .door-card:hover .door-action {
  color: #e5b054;
  transform: translateX(4px);
}

/* Focus State for accessibility */
.door-card:focus-visible {
  outline: 3px solid var(--color-teal);
  outline-offset: 4px;
  opacity: 1;
  transform: scale(1.02);
}

/* Landing Footer */
.landing-footer {
  position: relative;
  z-index: 10;
  padding-top: var(--spacing-lg);
  padding-bottom: var(--spacing-lg);
  border-top: 1px solid rgba(222, 220, 210, 0.12);
  font-size: 0.85rem;
  color: #8fa7a2;
}

.landing-footer-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-md);
}

.landing-company-name {
  color: #8fa7a2;
}

.landing-legal-links {
  display: flex;
  align-items: center;
  list-style: none;
  gap: var(--spacing-sm);
}

.landing-legal-links a {
  color: #b7cbcd;
  text-decoration: none;
  transition: color 0.15s ease;
}

.landing-legal-links a:hover {
  color: var(--color-cream);
  text-decoration: underline;
}

.footer-separator {
  color: #4a635f;
}

/* Responsive Styles for Mobile / Tablets */
@media (max-width: 900px) {
  .doors-group {
    grid-template-columns: 1fr;
    gap: var(--spacing-md);
  }

  .door-card {
    min-height: auto;
    padding: var(--spacing-lg);
  }

  .doors-group:hover .door-card {
    opacity: 1;
    transform: none;
  }

  .doors-group .door-card:hover {
    transform: translateY(-2px);
  }

  .landing-content {
    min-height: auto;
    gap: var(--spacing-xl);
  }

  .landing-footer-inner {
    flex-direction: column;
    align-items: flex-start;
  }
}

/* --------------------------------------------------------------------------
   Prefers-Reduced-Motion Support
   -------------------------------------------------------------------------- */
@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;
    scroll-behavior: auto !important;
  }

  .doors-group:hover .door-card,
  .doors-group .door-card:hover {
    transform: none !important;
  }
}

/* --------------------------------------------------------------------------
   General Utilities & Buttons
   -------------------------------------------------------------------------- */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.95rem 1.85rem;
  font-family: var(--font-family-body);
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-decoration: none;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease, transform 0.15s ease;
  line-height: 1.2;
  border: 1px solid transparent;
}

.btn:active {
  transform: translateY(1px);
}

.btn-primary {
  background-color: var(--color-night-green);
  color: var(--color-cream);
  border-color: var(--color-night-green);
}

.btn-primary:hover {
  background-color: var(--color-deep);
  color: #ffffff;
  border-color: var(--color-deep);
}

.btn-secondary {
  background-color: transparent;
  color: var(--color-night-green);
  border-color: var(--color-border-hover);
}

.btn-secondary:hover {
  background-color: var(--color-surface);
  border-color: var(--color-night-green);
  color: var(--color-night-green);
}

.btn-block {
  width: 100%;
}

.section-header-centered {
  text-align: center;
  margin-bottom: var(--spacing-2xl);
}

.section-title {
  font-size: clamp(2rem, 3.5vw, 2.75rem);
  color: var(--color-night-green);
}

/* --------------------------------------------------------------------------
   Section 1: Erleben Hero
   -------------------------------------------------------------------------- */
.erleben-hero-section {
  padding-top: var(--spacing-xl);
  padding-bottom: var(--spacing-2xl);
}

.erleben-hero-media {
  width: 100%;
  display: flex;
  justify-content: center;
  margin-bottom: var(--spacing-2xl);
}

.erleben-hero-img {
  width: 100%;
  max-width: 1200px;
  height: auto;
  border-radius: var(--radius-img);
  object-fit: contain; /* show completely, 24px corners */
}

.erleben-hero-content {
  max-width: 860px;
  margin: 0 auto;
  text-align: center;
}

.erleben-hero-title {
  font-size: clamp(2.2rem, 4.2vw, 3.4rem);
  line-height: 1.18;
  color: var(--color-night-green);
  margin-bottom: var(--spacing-xl);
}

.erleben-hero-actions {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--spacing-md);
}

/* --------------------------------------------------------------------------
   Section 2: Statement (Large and Centred)
   -------------------------------------------------------------------------- */
.erleben-statement-section {
  background-color: var(--color-night-green);
  color: var(--color-cream);
  padding: var(--spacing-2xl) 0;
  margin: var(--spacing-2xl) 0;
  text-align: center;
}

.erleben-statement-text {
  font-family: var(--font-family-headings);
  font-size: clamp(1.8rem, 3.2vw, 2.8rem);
  line-height: 1.35;
  color: var(--color-cream);
  max-width: 960px;
  margin: 0 auto;
  padding: 0 var(--spacing-md);
}

/* --------------------------------------------------------------------------
   Section 3: How it works (Full width image, completely shown)
   -------------------------------------------------------------------------- */
.erleben-guide-section {
  padding-top: var(--spacing-2xl);
  padding-bottom: var(--spacing-2xl);
}

.erleben-fullwidth-media {
  width: 100%;
  display: flex;
  justify-content: center;
}

.erleben-guide-img {
  width: 100%;
  max-width: 1200px;
  height: auto;
  border-radius: var(--radius-img);
  object-fit: contain; /* show completely, full width */
}

/* --------------------------------------------------------------------------
   Section 4: Ein Tag bei iKAUF (Timeline)
   -------------------------------------------------------------------------- */
.erleben-timeline-section {
  padding: var(--spacing-2xl) 0;
}

.erleben-timeline {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: var(--spacing-lg);
  position: relative;
}

.timeline-item {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--spacing-lg);
  display: flex;
  flex-direction: column;
  transition: border-color 0.2s ease;
}

.timeline-item:hover {
  border-color: var(--color-teal);
}

.timeline-time {
  font-family: var(--font-family-headings);
  font-size: 1.85rem;
  color: var(--color-night-green);
  line-height: 1;
  margin-bottom: var(--spacing-md);
  padding-bottom: var(--spacing-sm);
  border-bottom: 2px solid var(--color-teal);
  display: inline-block;
}

.timeline-heading {
  font-size: 1.15rem;
  color: var(--color-night-green);
  margin-bottom: var(--spacing-xs);
  font-family: var(--font-family-body);
  font-weight: 600;
}

.timeline-text {
  font-size: 0.95rem;
  line-height: 1.6;
  color: var(--color-text-muted);
}

/* --------------------------------------------------------------------------
   Section 5: NightSmart Section
   -------------------------------------------------------------------------- */
.erleben-nightsmart-section {
  padding: var(--spacing-2xl) 0;
  background-color: var(--color-surface-subtle);
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
  margin: var(--spacing-2xl) 0;
}

.nightsmart-layout {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  align-items: center;
  gap: var(--spacing-2xl);
}

.nightsmart-media {
  display: flex;
  justify-content: center;
}

.nightsmart-img {
  width: 100%;
  max-width: 600px;
  height: auto;
  border-radius: var(--radius-img);
  object-fit: contain; /* shown completely, 24px corners */
}

.nightsmart-badge {
  display: inline-block;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-gold);
  background: var(--color-night-green);
  padding: 0.35rem 0.85rem;
  border-radius: var(--radius-sm);
  margin-bottom: var(--spacing-md);
}

.nightsmart-title {
  font-size: clamp(2rem, 3.2vw, 2.75rem);
  line-height: 1.2;
  color: var(--color-night-green);
  margin-bottom: var(--spacing-md);
}

.nightsmart-text {
  font-size: 1.0625rem;
  line-height: 1.65;
  color: var(--color-text-muted);
  margin-bottom: var(--spacing-xl);
}

.nightsmart-facts {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-md);
}

.fact-item {
  display: flex;
  align-items: flex-start;
  gap: var(--spacing-sm);
  font-size: 1.05rem;
  color: var(--color-night-green);
}

.fact-marker {
  color: var(--color-teal);
  font-size: 1.4rem;
  line-height: 1;
}

.fact-detail strong {
  font-weight: 600;
}

/* --------------------------------------------------------------------------
   Section 6: Pre-Registration Form
   -------------------------------------------------------------------------- */
.erleben-form-section {
  padding: var(--spacing-2xl) 0 var(--spacing-2xl);
}

.form-wrapper {
  max-width: 620px;
  margin: 0 auto;
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--spacing-2xl) var(--spacing-xl);
  box-shadow: 0 4px 20px rgba(7, 29, 27, 0.04);
}

.form-header {
  text-align: center;
  margin-bottom: var(--spacing-xl);
}

.form-title {
  font-size: 2.25rem;
  color: var(--color-night-green);
  margin-bottom: var(--spacing-xs);
}

.form-subtitle {
  font-size: 1.05rem;
  color: var(--color-text-muted);
}

/* Empty status box with data-status attribute above form */
.form-status-box {
  display: none;
  padding: var(--spacing-md);
  margin-bottom: var(--spacing-lg);
  border-radius: var(--radius-sm);
  font-size: 0.95rem;
}

.form-status-box:not(:empty) {
  display: block;
  background-color: var(--color-surface-subtle);
  border: 1px solid var(--color-teal);
  color: var(--color-night-green);
}

.ikauf-form {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-lg);
}

.form-group {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
}

.form-label {
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--color-night-green);
}

.form-required {
  color: #b91c1c;
}

.form-input {
  width: 100%;
  padding: 0.85rem 1rem;
  font-family: var(--font-family-body);
  font-size: 1rem;
  color: var(--color-text);
  background-color: #ffffff;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.form-input:focus {
  border-color: var(--color-teal);
  outline: 3px solid rgba(95, 179, 168, 0.25);
}

/* Hidden spam honeypot field */
.form-spam-protection {
  position: absolute;
  left: -9999px;
  top: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
}

.form-group-checkbox {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  margin-top: var(--spacing-xs);
}

.form-checkbox {
  width: 1.25rem;
  height: 1.25rem;
  margin-top: 0.2rem;
  flex-shrink: 0;
  accent-color: var(--color-night-green);
  cursor: pointer;
}

.form-checkbox-label {
  font-size: 0.9rem;
  line-height: 1.55;
  color: var(--color-text-muted);
  cursor: pointer;
}

.form-actions {
  margin-top: var(--spacing-md);
}

/* Responsive adjustments for Erleben */
@media (max-width: 860px) {
  .nightsmart-layout {
    grid-template-columns: 1fr;
    gap: var(--spacing-xl);
  }

  .form-wrapper {
    padding: var(--spacing-xl) var(--spacing-lg);
  }

  .erleben-hero-actions {
    flex-direction: column;
    width: 100%;
  }

  .erleben-hero-actions .btn {
    width: 100%;
  }
}

/* --------------------------------------------------------------------------
   Karriere Page (/karriere.html)
   -------------------------------------------------------------------------- */
.karriere-hero-section {
  padding-top: var(--spacing-xl);
  padding-bottom: var(--spacing-2xl);
}

.karriere-media {
  width: 100%;
  display: flex;
  justify-content: center;
  margin-bottom: var(--spacing-2xl);
}

.karriere-img {
  width: 100%;
  max-width: 1200px;
  height: auto;
  border-radius: var(--radius-img);
  object-fit: contain; /* shown completely, 24px corners */
}

.karriere-intro-content {
  max-width: 820px;
  margin: 0 auto;
  text-align: center;
}

.karriere-title {
  font-size: clamp(2.2rem, 4vw, 3.2rem);
  line-height: 1.18;
  color: var(--color-night-green);
  margin-bottom: var(--spacing-md);
}

.karriere-lead {
  font-size: 1.125rem;
  line-height: 1.65;
  color: var(--color-text-muted);
}

.karriere-jobs-section {
  padding-top: var(--spacing-xl);
  padding-bottom: var(--spacing-2xl);
}

.karriere-badge {
  display: inline-block;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-gold);
  background: var(--color-night-green);
  padding: 0.35rem 0.85rem;
  border-radius: var(--radius-sm);
  margin-bottom: var(--spacing-sm);
}

/* Job Card */
.job-card {
  max-width: 1000px;
  margin: 0 auto;
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--spacing-2xl);
  box-shadow: 0 4px 24px rgba(7, 29, 27, 0.04);
}

.job-card-header {
  margin-bottom: var(--spacing-xl);
}

.job-card-meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-xs);
  margin-bottom: var(--spacing-md);
}

.job-tag {
  display: inline-flex;
  align-items: center;
  font-size: 0.825rem;
  font-weight: 600;
  color: var(--color-night-green);
  background-color: var(--color-surface-subtle);
  border: 1px solid var(--color-border);
  padding: 0.3rem 0.75rem;
  border-radius: var(--radius-sm);
}

.job-card-title {
  font-size: clamp(1.6rem, 2.5vw, 2.2rem);
  color: var(--color-night-green);
  line-height: 1.25;
}

/* Three Pillars */
.job-pillars {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--spacing-md);
  margin-bottom: var(--spacing-2xl);
}

.pillar-card {
  background-color: #ffffff;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: var(--spacing-lg);
  display: flex;
  flex-direction: column;
}

.pillar-marker {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--color-teal);
  text-transform: uppercase;
  margin-bottom: var(--spacing-xs);
}

.pillar-title {
  font-size: 1.25rem;
  color: var(--color-night-green);
  margin-bottom: var(--spacing-xs);
  letter-spacing: 0.04em;
}

.pillar-text {
  font-size: 0.925rem;
  line-height: 1.55;
  color: var(--color-text-muted);
}

/* Details Grid: Tasks & Profile */
.job-details-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--spacing-2xl);
  padding-top: var(--spacing-xl);
  border-top: 1px solid var(--color-border);
  margin-bottom: var(--spacing-2xl);
}

.job-detail-title {
  font-size: 1.25rem;
  color: var(--color-night-green);
  margin-bottom: var(--spacing-md);
}

.job-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm);
}

.job-list li {
  position: relative;
  padding-left: 1.35rem;
  font-size: 0.95rem;
  line-height: 1.6;
  color: var(--color-text);
}

.job-list li::before {
  content: "•";
  position: absolute;
  left: 0;
  top: 0;
  color: var(--color-teal);
  font-size: 1.25rem;
  line-height: 1.4;
}

/* Card Footer & Application */
.job-card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-xl);
  padding-top: var(--spacing-xl);
  border-top: 1px solid var(--color-border);
  background-color: var(--color-surface-subtle);
  margin: 0 calc(-1 * var(--spacing-2xl)) calc(-1 * var(--spacing-2xl));
  padding-left: var(--spacing-2xl);
  padding-right: var(--spacing-2xl);
  padding-bottom: var(--spacing-2xl);
  border-bottom-left-radius: var(--radius-md);
  border-bottom-right-radius: var(--radius-md);
}

.apply-heading {
  font-size: 1.15rem;
  color: var(--color-night-green);
  margin-bottom: var(--spacing-2xs);
}

.apply-text {
  font-size: 0.95rem;
  color: var(--color-text);
  margin-bottom: var(--spacing-2xs);
}

.apply-email-link {
  color: var(--color-night-green);
  font-weight: 600;
  text-decoration: underline;
}

.apply-email-link:hover {
  color: var(--color-teal);
}

.apply-note {
  font-size: 0.85rem;
  color: var(--color-text-muted);
  line-height: 1.5;
}

.job-apply-action {
  flex-shrink: 0;
}

/* Talent Netzwerk Section */
.talent-netzwerk-section {
  padding-top: var(--spacing-xl);
  padding-bottom: var(--spacing-2xl);
}

.talent-box {
  max-width: 1000px;
  margin: 0 auto;
  background-color: var(--color-night-green);
  color: var(--color-cream);
  border-radius: var(--radius-md);
  padding: var(--spacing-2xl);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-xl);
}

.talent-badge {
  display: inline-block;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-teal);
  margin-bottom: var(--spacing-xs);
}

.talent-title {
  font-size: clamp(1.6rem, 2.5vw, 2.2rem);
  color: var(--color-cream);
  margin-bottom: var(--spacing-xs);
}

.talent-desc {
  font-size: 1rem;
  line-height: 1.6;
  color: #c5d7d3;
  margin-bottom: var(--spacing-xs);
  max-width: 650px;
}

.talent-note {
  font-size: 0.875rem;
  line-height: 1.5;
  color: #9bb3ae;
}

.talent-note a {
  color: var(--color-gold);
  text-decoration: underline;
}

.talent-note a:hover {
  color: #ffffff;
}

.talent-box .btn-secondary {
  background-color: transparent;
  color: var(--color-cream);
  border-color: rgba(222, 220, 210, 0.35);
  white-space: nowrap;
}

.talent-box .btn-secondary:hover {
  background-color: rgba(255, 255, 255, 0.1);
  border-color: var(--color-cream);
  color: #ffffff;
}

/* Responsive Styles for Karriere */
@media (max-width: 860px) {
  .job-pillars {
    grid-template-columns: 1fr;
  }

  .job-details-grid {
    grid-template-columns: 1fr;
    gap: var(--spacing-lg);
  }

  .job-card {
    padding: var(--spacing-lg);
  }

  .job-card-footer {
    flex-direction: column;
    align-items: flex-start;
    margin: 0 calc(-1 * var(--spacing-lg)) calc(-1 * var(--spacing-lg));
    padding: var(--spacing-lg);
  }

  .job-apply-action {
    width: 100%;
  }

  .job-apply-action .btn {
    width: 100%;
  }

  .talent-box {
    flex-direction: column;
    align-items: flex-start;
    padding: var(--spacing-xl) var(--spacing-lg);
  }

  .talent-action {
    width: 100%;
  }

  .talent-box .btn-secondary {
    width: 100%;
  }
}

/* --------------------------------------------------------------------------
   Investor Content Page (/investoren-inhalt.html)
   -------------------------------------------------------------------------- */
.investor-section {
  padding-top: var(--spacing-2xl);
  padding-bottom: var(--spacing-2xl);
}

.investor-hero-section {
  padding-top: var(--spacing-2xl);
  padding-bottom: var(--spacing-2xl);
}

.investor-hero-content {
  max-width: 920px;
  margin: 0 auto;
  text-align: center;
}

.investor-badge {
  display: inline-block;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-gold);
  background-color: var(--color-night-green);
  padding: 0.4rem 0.95rem;
  border-radius: var(--radius-sm);
  margin-bottom: var(--spacing-md);
}

.investor-badge-light {
  display: inline-block;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-teal);
  margin-bottom: var(--spacing-sm);
}

.investor-hero-title {
  font-size: clamp(2.2rem, 4vw, 3.4rem);
  line-height: 1.18;
  color: var(--color-night-green);
  margin-bottom: var(--spacing-lg);
}

.investor-hero-lead {
  font-size: 1.125rem;
  line-height: 1.7;
  color: var(--color-text-muted);
}

/* Section 2: Die Lücke ist wirtschaftlich, nicht rechtlich */
.investor-gap-section {
  background-color: var(--color-surface-subtle);
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
}

.investor-text-card {
  max-width: 860px;
  margin: 0 auto;
  text-align: center;
  padding: var(--spacing-lg) 0;
}

.investor-section-title {
  font-size: clamp(1.8rem, 3vw, 2.4rem);
  color: var(--color-night-green);
  margin-bottom: var(--spacing-md);
  line-height: 1.25;
}

.investor-body-text {
  font-size: 1.0625rem;
  line-height: 1.7;
  color: var(--color-text-muted);
  margin-bottom: var(--spacing-md);
}

.investor-body-text:last-child {
  margin-bottom: 0;
}

/* Section 3: Shopping Flow (Three Steps) */
.investor-flow-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--spacing-lg);
  max-width: 1040px;
  margin: 0 auto;
}

.flow-step-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--spacing-xl) var(--spacing-lg);
  display: flex;
  flex-direction: column;
  position: relative;
  transition: border-color 0.2s ease;
}

.flow-step-card:hover {
  border-color: var(--color-teal);
}

.flow-step-number {
  font-family: var(--font-family-headings);
  font-size: 2.25rem;
  line-height: 1;
  color: var(--color-teal);
  margin-bottom: var(--spacing-md);
}

.flow-step-title {
  font-size: 1.25rem;
  color: var(--color-night-green);
  margin-bottom: var(--spacing-xs);
  font-family: var(--font-family-body);
  font-weight: 600;
}

.flow-step-desc {
  font-size: 0.95rem;
  line-height: 1.6;
  color: var(--color-text-muted);
}

/* Section 4: KPI / Four Numbers */
.investor-kpi-section {
  background-color: var(--color-surface);
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
}

.kpi-disclaimer-note {
  font-size: 0.925rem;
  color: var(--color-text-muted);
  font-style: italic;
  margin-top: var(--spacing-2xs);
}

.kpi-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--spacing-md);
  max-width: 1100px;
  margin: 0 auto;
}

.kpi-card {
  background: #ffffff;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: var(--spacing-xl) var(--spacing-md);
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.kpi-value {
  font-family: var(--font-family-headings);
  font-size: clamp(1.85rem, 2.5vw, 2.35rem);
  font-weight: 400;
  line-height: 1.1;
  color: var(--color-night-green);
  margin-bottom: var(--spacing-xs);
}

.kpi-label {
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  color: var(--color-text-muted);
}

/* Section 5: Was bereits steht (Readiness Grid) */
.readiness-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--spacing-lg);
  max-width: 960px;
  margin: 0 auto;
}

.readiness-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--spacing-lg);
  display: flex;
  align-items: flex-start;
  gap: var(--spacing-md);
}

.readiness-icon {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--color-night-green);
  color: var(--color-teal);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.15rem;
  flex-shrink: 0;
}

.readiness-content {
  flex-grow: 1;
}

.readiness-heading {
  font-size: 1.125rem;
  color: var(--color-night-green);
  margin-bottom: var(--spacing-2xs);
  font-weight: 600;
}

.readiness-text {
  font-size: 0.925rem;
  line-height: 1.55;
  color: var(--color-text-muted);
}

/* Section 6: Eight Functional Families (A-H, names only) */
.investor-families-section {
  background-color: var(--color-surface-subtle);
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
}

.families-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--spacing-md);
  max-width: 1040px;
  margin: 0 auto;
}

.family-card {
  background: #ffffff;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: var(--spacing-lg) var(--spacing-md);
  display: flex;
  align-items: center;
  gap: var(--spacing-md);
  transition: border-color 0.2s ease, transform 0.15s ease;
}

.family-card:hover {
  border-color: var(--color-teal);
  transform: translateY(-2px);
}

.family-letter {
  font-family: var(--font-family-headings);
  font-size: 1.5rem;
  line-height: 1;
  color: var(--color-teal);
  font-weight: 600;
  width: 32px;
  flex-shrink: 0;
}

.family-name {
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--color-night-green);
  line-height: 1.35;
}

/* Section 7: Erst beweisen, dann wachsen (Growth Steps) */
.growth-card {
  max-width: 1040px;
  margin: 0 auto;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--spacing-2xl);
}

.growth-steps {
  display: flex;
  align-items: stretch;
  justify-content: space-between;
  gap: var(--spacing-md);
  margin-top: var(--spacing-xl);
}

.growth-step {
  flex: 1;
  background: #ffffff;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: var(--spacing-lg);
  display: flex;
  flex-direction: column;
}

.growth-phase-badge {
  display: inline-block;
  align-self: flex-start;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-teal);
  margin-bottom: var(--spacing-xs);
}

.growth-step-title {
  font-size: 1.15rem;
  color: var(--color-night-green);
  margin-bottom: var(--spacing-xs);
}

.growth-step-text {
  font-size: 0.925rem;
  line-height: 1.55;
  color: var(--color-text-muted);
}

.growth-arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-teal);
  font-size: 1.75rem;
  font-weight: 300;
}

/* Section 8: Team */
.team-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--spacing-lg);
  max-width: 1040px;
  margin: 0 auto;
}

.team-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.team-card-primary {
  padding: var(--spacing-md);
}

.team-media {
  width: 100%;
  display: flex;
  justify-content: center;
  margin-bottom: var(--spacing-md);
}

.founder-img {
  width: 100%;
  height: auto;
  max-height: 380px;
  border-radius: var(--radius-img);
  object-fit: contain; /* shown completely, 24px corners */
}

.team-info {
  padding: var(--spacing-sm);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.team-name {
  font-size: 1.25rem;
  color: var(--color-night-green);
  margin-bottom: 0.25rem;
}

.team-role {
  font-size: 0.925rem;
  color: var(--color-text-muted);
  line-height: 1.4;
}

.team-card-loi {
  padding: var(--spacing-xl) var(--spacing-lg);
  justify-content: center;
  background: #ffffff;
  border-style: dashed;
}

.team-placeholder-icon {
  color: var(--color-teal);
  font-size: 2rem;
  margin-bottom: var(--spacing-md);
  line-height: 1;
}

.loi-tag {
  display: inline-block;
  margin-top: var(--spacing-md);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--color-night-green);
  background-color: var(--color-surface-subtle);
  border: 1px solid var(--color-border);
  padding: 0.25rem 0.65rem;
  border-radius: var(--radius-sm);
}

/* Section 9: Financing Round */
.investor-round-box {
  max-width: 860px;
  margin: 0 auto;
  background-color: var(--color-night-green);
  color: var(--color-cream);
  border-radius: var(--radius-md);
  padding: var(--spacing-2xl);
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.round-title {
  font-size: clamp(2rem, 3.5vw, 2.75rem);
  color: var(--color-cream);
  margin-bottom: var(--spacing-sm);
  line-height: 1.2;
}

.round-desc {
  font-size: 1.125rem;
  line-height: 1.65;
  color: #c5d7d3;
  max-width: 620px;
  margin-bottom: var(--spacing-xl);
}

.round-action {
  margin-bottom: var(--spacing-xl);
}

.round-action .btn-primary {
  background-color: var(--color-gold);
  color: var(--color-night-green);
  border-color: var(--color-gold);
  font-size: 1.05rem;
  padding: 1rem 2.25rem;
}

.round-action .btn-primary:hover {
  background-color: #e5b054;
  border-color: #e5b054;
  color: var(--color-night-green);
}

.round-disclaimer {
  font-size: 0.8rem;
  line-height: 1.55;
  color: #8fa7a2;
  max-width: 680px;
  border-top: 1px solid rgba(222, 220, 210, 0.15);
  padding-top: var(--spacing-md);
}

/* Responsive adjustments for Investor content */
@media (max-width: 960px) {
  .investor-flow-grid {
    grid-template-columns: 1fr;
  }

  .kpi-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .readiness-grid {
    grid-template-columns: 1fr;
  }

  .families-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .growth-steps {
    flex-direction: column;
  }

  .growth-arrow {
    transform: rotate(90deg);
    padding: var(--spacing-xs) 0;
  }

  .team-grid {
    grid-template-columns: 1fr;
  }

  .investor-round-box {
    padding: var(--spacing-xl) var(--spacing-lg);
  }
}

@media (max-width: 600px) {
  .kpi-grid {
    grid-template-columns: 1fr;
  }

  .families-grid {
    grid-template-columns: 1fr;
  }
}


/* --------------------------------------------------------------------------
   Home Page (/home.html)
   -------------------------------------------------------------------------- */
.home-hero-section {
  padding-top: var(--spacing-xl);
  padding-bottom: var(--spacing-2xl);
}

.home-hero-media {
  margin-bottom: var(--spacing-xl);
  text-align: center;
}

.home-hero-img {
  width: 100%;
  max-width: 1100px;
  height: auto;
  margin: 0 auto;
  display: block;
}

.home-hero-content {
  max-width: 860px;
  margin: 0 auto;
  text-align: center;
}

.home-brandline {
  display: inline-block;
  font-family: var(--font-family-headings);
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  color: var(--color-teal);
  text-transform: uppercase;
  margin-bottom: var(--spacing-sm);
}

.home-hero-title {
  font-size: clamp(2rem, 3.8vw, 3.2rem);
  line-height: 1.25;
  color: var(--color-night-green);
  margin-bottom: var(--spacing-xl);
}

.home-hero-actions {
  display: flex;
  justify-content: center;
  gap: var(--spacing-md);
  flex-wrap: wrap;
}

/* 2. Glance Section */
.home-glance-section {
  padding-top: var(--spacing-lg);
  padding-bottom: var(--spacing-2xl);
}

.glance-panel {
  background-color: var(--color-night-green);
  color: var(--color-cream);
  border-radius: var(--radius-md);
  padding: var(--spacing-xl) var(--spacing-2xl);
  max-width: 1040px;
  margin: 0 auto;
  text-align: center;
}

.glance-title {
  font-size: clamp(1.4rem, 2.2vw, 1.85rem);
  color: var(--color-gold);
  margin-bottom: var(--spacing-lg);
}

.glance-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--spacing-md) var(--spacing-lg);
  text-align: center;
}

.glance-item {
  font-size: 1.05rem;
  font-weight: 500;
  color: var(--color-cream);
  padding: var(--spacing-sm);
  border-bottom: 1px solid rgba(247, 246, 241, 0.15);
}

/* 3. Four Pillars Section */
.home-pillars-section {
  padding-top: var(--spacing-xl);
  padding-bottom: var(--spacing-2xl);
  background-color: var(--color-surface-subtle);
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
}

.home-pillars-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--spacing-md);
  max-width: 1040px;
  margin: var(--spacing-xl) auto 0;
}

.home-pillar-card {
  background: #ffffff;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: var(--spacing-xl) var(--spacing-md);
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: border-color 0.2s ease, transform 0.15s ease;
}

.home-pillar-card:hover {
  border-color: var(--color-teal);
  transform: translateY(-2px);
}

.home-pillar-text {
  font-family: var(--font-family-headings);
  font-size: 1.25rem;
  color: var(--color-night-green);
  font-weight: 400;
}

/* 4. Three Doors Section */
.home-doors-section {
  padding-top: var(--spacing-2xl);
  padding-bottom: var(--spacing-2xl);
}

.home-doors-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--spacing-lg);
  max-width: 1100px;
  margin: var(--spacing-xl) auto 0;
}

.home-door-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  transition: border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

.home-door-card:hover {
  border-color: var(--color-teal);
  transform: translateY(-4px);
  box-shadow: 0 12px 24px -10px rgba(12, 43, 40, 0.15);
}

.home-door-media {
  padding: var(--spacing-md) var(--spacing-md) 0;
}

.home-door-img {
  width: 100%;
  height: auto;
  display: block;
}

.home-door-body {
  padding: var(--spacing-lg);
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}

.home-door-tag {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-teal);
  margin-bottom: var(--spacing-2xs);
}

.home-door-title {
  font-size: 1.4rem;
  color: var(--color-night-green);
  margin-bottom: var(--spacing-xs);
  letter-spacing: 0.05em;
}

.home-door-desc {
  font-size: 0.95rem;
  line-height: 1.55;
  color: var(--color-text-muted);
  margin-bottom: var(--spacing-md);
  flex-grow: 1;
}

.home-door-link {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--color-night-green);
  transition: color 0.15s ease;
}

.home-door-card:hover .home-door-link {
  color: var(--color-teal);
}

/* Responsive adjustments for Home page */
@media (max-width: 960px) {
  .glance-list {
    grid-template-columns: repeat(2, 1fr);
  }

  .home-pillars-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .home-doors-grid {
    grid-template-columns: 1fr;
    max-width: 520px;
  }
}

@media (max-width: 600px) {
  .glance-panel {
    padding: var(--spacing-lg) var(--spacing-md);
  }

  .glance-list {
    grid-template-columns: 1fr;
  }

  .home-pillars-grid {
    grid-template-columns: 1fr;
  }
}


.content-rounded-img {
  border-radius: var(--radius-img);
  object-fit: contain;
}


/* --------------------------------------------------------------------------
   Erleben: Eigenmarken & Stammkund:innen Sections
   -------------------------------------------------------------------------- */
.erleben-eigenmarken-section {
  padding: var(--spacing-2xl) 0;
}

.eigenmarken-layout {
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  align-items: center;
  gap: var(--spacing-2xl);
}

.eigenmarken-media {
  display: flex;
  justify-content: center;
}

.eigenmarken-img {
  width: 100%;
  max-width: 600px;
  height: auto;
  border-radius: var(--radius-img);
  object-fit: contain;
}

.eigenmarken-content {
  display: flex;
  flex-direction: column;
}

.eigenmarken-badge {
  display: inline-block;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-night-green);
  background: var(--color-teal);
  padding: 0.35rem 0.85rem;
  border-radius: var(--radius-sm);
  margin-bottom: var(--spacing-md);
  align-self: flex-start;
}

.eigenmarken-title {
  font-size: clamp(2rem, 3.2vw, 2.75rem);
  line-height: 1.2;
  color: var(--color-night-green);
  margin-bottom: var(--spacing-md);
}

.eigenmarken-text {
  font-size: 1.0625rem;
  line-height: 1.65;
  color: var(--color-text-muted);
}

/* Stammkund:innen Section */
.erleben-loyalty-section {
  padding: var(--spacing-xl) 0;
  background-color: var(--color-surface-subtle);
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
  text-align: center;
}

.loyalty-card {
  max-width: 780px;
  margin: 0 auto;
  padding: var(--spacing-lg) var(--spacing-md);
}

.loyalty-title {
  font-size: clamp(1.6rem, 2.5vw, 2.2rem);
  color: var(--color-night-green);
  margin-bottom: var(--spacing-sm);
}

.loyalty-text {
  font-size: 1.1rem;
  line-height: 1.6;
  color: var(--color-text-muted);
}

@media (max-width: 900px) {
  .eigenmarken-layout {
    grid-template-columns: 1fr;
  }
}


/* --------------------------------------------------------------------------
   Karriere: Roles in progress & Academy Sections
   -------------------------------------------------------------------------- */
.team-expansion-section {
  padding: var(--spacing-2xl) 0;
}

.roles-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--spacing-xl);
  max-width: 1040px;
  margin: var(--spacing-xl) auto 0;
}

.role-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--spacing-xl);
  display: flex;
  flex-direction: column;
}

.role-meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-xs);
  margin-bottom: var(--spacing-sm);
}

.role-card-title {
  font-size: 1.5rem;
  color: var(--color-night-green);
  margin-bottom: var(--spacing-xs);
}

.role-desc {
  font-size: 1rem;
  line-height: 1.6;
  color: var(--color-text-muted);
  margin-bottom: var(--spacing-md);
}

.role-responsibilities {
  margin-bottom: var(--spacing-lg);
  flex-grow: 1;
}

.role-resp-title {
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--color-night-green);
  margin-bottom: var(--spacing-xs);
}

.role-action {
  padding-top: var(--spacing-md);
  border-top: 1px solid var(--color-border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--spacing-sm);
}

.role-action-text {
  font-weight: 500;
  color: var(--color-night-green);
  font-size: 0.95rem;
}

/* iKAUF Academy */
.academy-section {
  padding: var(--spacing-2xl) 0;
  background-color: var(--color-surface-subtle);
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
}

.academy-card {
  max-width: 860px;
  margin: 0 auto;
  text-align: center;
  padding: var(--spacing-xl) var(--spacing-md);
}

.academy-badge {
  display: inline-block;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-cream);
  background: var(--color-night-green);
  padding: 0.35rem 0.85rem;
  border-radius: var(--radius-sm);
  margin-bottom: var(--spacing-md);
}

.academy-title {
  font-size: clamp(2rem, 3.2vw, 2.75rem);
  color: var(--color-night-green);
  margin-bottom: var(--spacing-md);
}

.academy-text {
  font-size: 1.0625rem;
  line-height: 1.65;
  color: var(--color-text-muted);
  margin: 0 auto var(--spacing-md);
}

@media (max-width: 860px) {
  .roles-grid {
    grid-template-columns: 1fr;
  }
}


/* --------------------------------------------------------------------------
   Investoren Teaser Page (/investoren-teaser.html)
   -------------------------------------------------------------------------- */
.teaser-hero-section {
  padding-top: var(--spacing-xl);
  padding-bottom: var(--spacing-2xl);
  text-align: center;
}

.teaser-hero-content {
  max-width: 860px;
  margin: 0 auto;
}

.teaser-eyebrow {
  display: inline-block;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-teal);
  margin-bottom: var(--spacing-sm);
}

.teaser-hero-title {
  font-size: clamp(2.2rem, 4vw, 3.4rem);
  line-height: 1.2;
  color: var(--color-night-green);
  margin-bottom: var(--spacing-lg);
}

.teaser-hero-lead {
  font-size: clamp(1.05rem, 1.8vw, 1.2rem);
  line-height: 1.65;
  color: var(--color-text-muted);
}

/* Warum jetzt Section */
.why-now-section {
  padding: var(--spacing-2xl) 0;
  background-color: var(--color-surface-subtle);
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
}

.why-now-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--spacing-lg);
  max-width: 1080px;
  margin: var(--spacing-xl) auto 0;
}

.why-now-card {
  background: #ffffff;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: var(--spacing-xl) var(--spacing-lg);
  display: flex;
  flex-direction: column;
  transition: border-color 0.2s ease, transform 0.15s ease;
}

.why-now-card:hover {
  border-color: var(--color-teal);
  transform: translateY(-2px);
}

.why-now-number {
  font-family: var(--font-family-headings);
  font-size: 1.25rem;
  color: var(--color-teal);
  margin-bottom: var(--spacing-xs);
  display: block;
}

.why-now-text {
  font-size: 0.975rem;
  line-height: 1.55;
  color: var(--color-night-green);
  font-weight: 500;
}

/* Regions Section */
.teaser-regions-section {
  padding: var(--spacing-2xl) 0;
  text-align: center;
}

.regions-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--spacing-lg);
  max-width: 900px;
  margin: var(--spacing-xl) auto 0;
}

.region-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--spacing-xl) var(--spacing-md);
  text-align: center;
}

.region-letter {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  background-color: var(--color-surface-subtle);
  color: var(--color-teal);
  border-radius: 50%;
  font-family: var(--font-family-headings);
  font-size: 1.4rem;
  font-weight: 600;
  margin-bottom: var(--spacing-sm);
}

.region-name {
  font-size: 1.25rem;
  color: var(--color-night-green);
  margin-bottom: var(--spacing-2xs);
}

.region-status {
  font-size: 0.85rem;
  color: var(--color-text-subtle);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* Investor Contact Section */
.teaser-contact-section {
  padding: var(--spacing-2xl) 0;
  background-color: var(--color-surface-subtle);
  border-top: 1px solid var(--color-border);
}

.teaser-form-wrapper {
  max-width: 680px;
  margin: 0 auto;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--spacing-2xl);
}

.form-grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--spacing-md);
}

.teaser-form-note {
  margin-top: var(--spacing-lg);
  padding-top: var(--spacing-md);
  border-top: 1px solid var(--color-border);
  font-size: 0.9rem;
  color: var(--color-text-subtle);
  text-align: center;
}

@media (max-width: 900px) {
  .why-now-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .regions-grid {
    grid-template-columns: 1fr;
    max-width: 360px;
  }
}

@media (max-width: 600px) {
  .why-now-grid {
    grid-template-columns: 1fr;
  }

  .form-grid-2 {
    grid-template-columns: 1fr;
  }

  .teaser-form-wrapper {
    padding: var(--spacing-xl) var(--spacing-md);
  }
}


/* --------------------------------------------------------------------------
   Cinematic Entry Screen (/index.html)
   -------------------------------------------------------------------------- */
.cinematic-entry-body {
  margin: 0;
  padding: 0;
  width: 100vw;
  height: 100vh;
  min-height: 100vh;
  overflow: hidden;
  background-color: #071D1B;
  color: #F7F6F1;
  font-family: var(--font-family-body);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  position: relative;
  user-select: none;
  -webkit-user-select: none;
}

/* Fullscreen Background & Blended Dual Worlds */
.cinematic-viewport {
  position: absolute;
  inset: -16px; /* allows 8px parallax without showing edges */
  overflow: hidden;
  pointer-events: none;
  z-index: 1;
}

.cinematic-layer {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 60%;
  will-change: transform;
  transition: transform 0.15s cubic-bezier(0.25, 1, 0.5, 1);
}

.cinematic-left {
  left: 0;
  mask-image: linear-gradient(to right, rgba(0,0,0,1) 50%, rgba(0,0,0,0) 100%);
  -webkit-mask-image: linear-gradient(to right, rgba(0,0,0,1) 50%, rgba(0,0,0,0) 100%);
}

.cinematic-right {
  right: 0;
  mask-image: linear-gradient(to left, rgba(0,0,0,1) 50%, rgba(0,0,0,0) 100%);
  -webkit-mask-image: linear-gradient(to left, rgba(0,0,0,1) 50%, rgba(0,0,0,0) 100%);
}

.cinematic-img {
  width: 100%;
  height: 100%;
  object-fit: cover !important;
  border-radius: 0 !important;
  filter: brightness(0.68) contrast(1.05);
}

/* Dark Green Overlay #071D1B strongest in center */
.cinematic-overlay {
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 50% 50%, rgba(7, 29, 27, 0.94) 0%, rgba(7, 29, 27, 0.82) 40%, rgba(7, 29, 27, 0.72) 75%, rgba(7, 29, 27, 0.88) 100%);
  z-index: 2;
  pointer-events: none;
}

/* Drifting streams of soft light converging from left and right towards center */
.cinematic-stream {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 50%;
  pointer-events: none;
  z-index: 3;
  opacity: 0.55;
  mix-blend-mode: screen;
}

.stream-left {
  left: 0;
  background: linear-gradient(90deg, rgba(95, 179, 168, 0.12) 0%, rgba(95, 179, 168, 0.05) 50%, rgba(95, 179, 168, 0) 100%);
  background-size: 200% 100%;
  animation: streamLeftFlow 11s ease-in-out infinite alternate;
}

.stream-right {
  right: 0;
  background: linear-gradient(-90deg, rgba(200, 155, 60, 0.14) 0%, rgba(200, 155, 60, 0.05) 50%, rgba(200, 155, 60, 0) 100%);
  background-size: 200% 100%;
  animation: streamRightFlow 9s ease-in-out infinite alternate;
}

@keyframes streamLeftFlow {
  0% {
    background-position: 100% 0;
    opacity: 0.25;
  }
  50% {
    opacity: 0.6;
  }
  100% {
    background-position: 0% 0;
    opacity: 0.4;
  }
}

@keyframes streamRightFlow {
  0% {
    background-position: 100% 0;
    opacity: 0.3;
  }
  50% {
    opacity: 0.65;
  }
  100% {
    background-position: 0% 0;
    opacity: 0.35;
  }
}

/* Center Stage Content */
.cinematic-main {
  position: relative;
  z-index: 10;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex: 1;
  text-align: center;
  width: 100%;
  max-width: 800px;
  padding: var(--spacing-xl);
}

.cinematic-brand-group {
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
}

/* Logo container with relative positioning for interactive dot */
.cinematic-logo-container {
  position: relative;
  display: inline-block;
  margin-bottom: var(--spacing-lg);
}

.cinematic-logo {
  display: block;
  max-width: min(340px, 78vw);
  height: auto;
  border-radius: 0 !important;
  object-fit: contain !important;
}

/* Interactive Dot (The Dot is the Door) */
.door-dot-button {
  position: absolute;
  top: 15.5%;
  left: 9.8%;
  transform: translate(-50%, -50%);
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: radial-gradient(circle, #FFE082 0%, #C89B3C 60%, #9E741D 100%);
  border: 1px solid rgba(255, 240, 180, 0.4);
  cursor: pointer;
  padding: 0;
  outline: none;
  z-index: 20;
  box-shadow: 0 0 16px rgba(200, 155, 60, 0.6), 0 0 32px rgba(200, 155, 60, 0.3);
  animation: dotPulse 3.8s ease-in-out infinite;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.door-dot-button:hover,
.door-dot-button:focus-visible {
  transform: translate(-50%, -50%) scale(1.2);
  box-shadow: 0 0 24px rgba(255, 224, 130, 0.9), 0 0 48px rgba(200, 155, 60, 0.6);
  outline: 2px solid #FFE082;
  outline-offset: 4px;
}

@keyframes dotPulse {
  0%, 100% {
    box-shadow: 0 0 12px rgba(200, 155, 60, 0.5), 0 0 24px rgba(200, 155, 60, 0.2);
    transform: translate(-50%, -50%) scale(1);
  }
  50% {
    box-shadow: 0 0 24px rgba(255, 224, 130, 0.85), 0 0 42px rgba(200, 155, 60, 0.5);
    transform: translate(-50%, -50%) scale(1.08);
  }
}

/* Expansion transition when dot is activated */
.cinematic-entry-body.is-entering .door-dot-button {
  animation: dotExpand 0.85s cubic-bezier(0.7, 0, 0.3, 1) forwards !important;
}

@keyframes dotExpand {
  0% {
    transform: translate(-50%, -50%) scale(1);
    opacity: 1;
  }
  50% {
    opacity: 0.95;
  }
  100% {
    transform: translate(-50%, -50%) scale(150);
    opacity: 1;
  }
}

/* Brand line in gold, small and wide-spaced */
.cinematic-brandline {
  font-family: var(--font-family-body);
  font-size: clamp(0.75rem, 1.2vw, 0.875rem);
  font-weight: 600;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--color-gold);
  margin-bottom: var(--spacing-md);
  text-indent: 0.32em; /* balances letter-spacing visually */
}

/* Under that, very small instruction */
.cinematic-instruction {
  font-size: clamp(0.6875rem, 1vw, 0.75rem);
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(247, 246, 241, 0.65);
  margin-bottom: var(--spacing-xl);
  text-indent: 0.2em;
}

/* Accessible text link EINTRETEN below */
.cinematic-enter-link {
  display: inline-block;
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--color-cream);
  text-decoration: none;
  padding: 0.65rem 1.6rem;
  border: 1px solid rgba(247, 246, 241, 0.25);
  border-radius: 4px;
  background: rgba(7, 29, 27, 0.45);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  transition: all 0.25s ease;
  text-indent: 0.22em;
}

.cinematic-enter-link:hover,
.cinematic-enter-link:focus-visible {
  border-color: var(--color-gold);
  color: #FFE082;
  background: rgba(12, 43, 40, 0.7);
  box-shadow: 0 0 16px rgba(200, 155, 60, 0.3);
}

/* Subtle footer with legal links */
.cinematic-footer {
  position: relative;
  z-index: 10;
  width: 100%;
  padding: var(--spacing-md) var(--spacing-lg);
  display: flex;
  justify-content: center;
}

.cinematic-legal {
  display: flex;
  gap: var(--spacing-md);
  list-style: none;
  margin: 0;
  padding: 0;
}

.cinematic-legal a {
  font-size: 0.75rem;
  color: rgba(247, 246, 241, 0.5);
  text-decoration: none;
  transition: color 0.15s ease;
}

.cinematic-legal a:hover,
.cinematic-legal a:focus-visible {
  color: var(--color-cream);
  text-decoration: underline;
}

/* Prefers Reduced Motion: strictly disable animations and transitions */
@media (prefers-reduced-motion: reduce) {
  .cinematic-stream {
    animation: none !important;
    opacity: 0.35 !important;
  }
  .door-dot-button {
    animation: none !important;
  }
  .cinematic-layer {
    transition: none !important;
    transform: none !important;
  }
  .cinematic-entry-body.is-entering .door-dot-button {
    animation: none !important;
    opacity: 1 !important;
  }
}

/* =========================================================
   Design update (Claude) – Home: cinematic, not generic
   ========================================================= */
.hx-wrap{width:min(100% - 2.5rem,1200px);margin-inline:auto}
.hx-label{font:600 .72rem/1 var(--font-family-body,system-ui);letter-spacing:.3em;text-transform:uppercase;color:#5FB3A8;margin:0 0 1.25rem}
.hx-h2{font-family:var(--font-family-headings,Georgia,serif);font-weight:400;font-size:clamp(2rem,4.2vw,3.4rem);line-height:1.1;color:#0C2B28;margin:0 0 3rem;max-width:22ch}

/* hero */
.hx-hero{position:relative;min-height:min(92svh,860px);display:grid;align-items:end;overflow:hidden;background:#071D1B;color:#F7F6F1}
.hx-hero-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 55%;border-radius:0!important;transform:scale(1.04);animation:hx-settle 2.4s cubic-bezier(.2,.7,.2,1) forwards}
@keyframes hx-settle{to{transform:scale(1)}}
.hx-hero-shade{position:absolute;inset:0;background:
 linear-gradient(180deg,rgba(7,29,27,.55) 0%,rgba(7,29,27,.10) 30%,rgba(7,29,27,.35) 58%,rgba(7,29,27,.95) 100%),
 linear-gradient(90deg,rgba(7,29,27,.75) 0%,rgba(7,29,27,.15) 60%,transparent 100%)}
.hx-hero-inner{position:relative;width:min(100% - 2.5rem,1200px);margin:0 auto;padding:0 0 clamp(4rem,9vh,7rem)}
.hx-kicker{font:600 .78rem/1 var(--font-family-body,system-ui);letter-spacing:.34em;color:#D4A548;margin:0 0 1.5rem}
.hx-title{font-family:var(--font-family-headings,Georgia,serif);font-weight:400;font-size:clamp(2.4rem,5.6vw,4.9rem);line-height:1.04;margin:0 0 1.5rem;max-width:16ch;color:#F7F6F1}
.hx-lead{font-size:clamp(1.02rem,1.4vw,1.2rem);line-height:1.6;max-width:44ch;color:rgba(247,246,241,.85);margin:0 0 2.25rem}
.hx-actions{display:flex;flex-wrap:wrap;gap:.9rem}
.hx-btn{display:inline-flex;align-items:center;min-height:3.1rem;padding:0 1.7rem;border-radius:999px;font-weight:600;text-decoration:none;transition:transform .25s,background .25s,color .25s,border-color .25s}
.hx-btn-gold{background:#B8862B;color:#071D1B}
.hx-btn-gold:hover{background:#D4A548;transform:translateY(-2px)}
.hx-btn-ghost{border:1px solid rgba(247,246,241,.45);color:#F7F6F1}
.hx-btn-ghost:hover{border-color:#F7F6F1;transform:translateY(-2px)}
.hx-scroll{position:absolute;left:50%;bottom:1.4rem;width:26px;height:42px;margin-left:-13px;border:1px solid rgba(247,246,241,.4);border-radius:14px}
.hx-scroll span{position:absolute;left:50%;top:9px;width:3px;height:8px;margin-left:-1.5px;border-radius:2px;background:#F7F6F1;animation:hx-wheel 2.2s ease-in-out infinite}
@keyframes hx-wheel{0%{opacity:0;transform:translateY(0)}30%{opacity:1}100%{opacity:0;transform:translateY(12px)}}

/* at a glance */
.hx-glance{background:#0C2B28;color:#F7F6F1;padding:2.6rem 0}
.hx-glance .hx-label{color:#D4A548;margin-bottom:1.2rem}
.hx-glance-list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:.4rem 2rem}
.hx-glance-list li{position:relative;padding:.7rem 0 .7rem 1.1rem;border-top:1px solid rgba(247,246,241,.14);font-size:.98rem;color:rgba(247,246,241,.9)}
.hx-glance-list li::before{content:"";position:absolute;left:0;top:1.2rem;width:5px;height:5px;border-radius:50%;background:#B8862B}

/* four ideas */
.hx-ideas{padding:clamp(5rem,11vw,8.5rem) 0;background:#F7F6F1}
.hx-ideas-row{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:0}
.hx-ideas-row li{padding:2rem 1.6rem 2rem 0;border-top:1px solid rgba(12,43,40,.18);display:flex;flex-direction:column;gap:.7rem}
.hx-ideas-row li+li{padding-left:1.6rem;border-left:1px solid rgba(12,43,40,.10)}
.hx-num{font-family:var(--font-family-headings,Georgia,serif);font-size:2.6rem;line-height:1;color:#B8862B}
.hx-ideas-row strong{font-family:var(--font-family-headings,Georgia,serif);font-weight:400;font-size:1.45rem;color:#0C2B28}
.hx-ideas-row li>span:last-child{color:#4A5F5B;line-height:1.55}
@media (max-width:900px){.hx-ideas-row{grid-template-columns:1fr 1fr}.hx-ideas-row li:nth-child(3){padding-left:0;border-left:0}}
@media (max-width:560px){.hx-ideas-row{grid-template-columns:1fr}.hx-ideas-row li+li{padding-left:0;border-left:0}}

/* doors */
.hx-doors{padding:clamp(5rem,11vw,8rem) 0 clamp(6rem,12vw,9rem);background:#EFEDE6}
.hx-door-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.25rem}
.hx-door{position:relative;display:block;aspect-ratio:3/4;border-radius:22px;overflow:hidden;background:#071D1B;color:#F7F6F1;text-decoration:none;isolation:isolate}
.hx-door img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border-radius:0!important;transition:transform 1.1s cubic-bezier(.2,.7,.2,1)}
.hx-door-shade{position:absolute;inset:0;background:linear-gradient(180deg,rgba(7,29,27,0) 30%,rgba(7,29,27,.55) 58%,rgba(7,29,27,.96) 100%);transition:opacity .5s}
.hx-door-body{position:absolute;left:0;right:0;bottom:0;padding:1.8rem;display:flex;flex-direction:column;gap:.55rem}
.hx-door-tag{font-size:.7rem;letter-spacing:.28em;text-transform:uppercase;color:#D4A548}
.hx-door-title{font-family:var(--font-family-headings,Georgia,serif);font-size:clamp(1.9rem,2.6vw,2.4rem);line-height:1}
.hx-door-text{color:rgba(247,246,241,.82);line-height:1.5;max-width:30ch}
.hx-door-go{margin-top:.6rem;font-weight:600;font-size:.92rem;display:inline-flex;gap:.4rem;align-items:center}
.hx-door-go span{transition:transform .3s}
.hx-door::after{content:"";position:absolute;inset:0;border-radius:22px;border:1px solid rgba(247,246,241,.10);pointer-events:none}
.hx-door:hover img,.hx-door:focus-visible img{transform:scale(1.06)}
.hx-door:hover .hx-door-go span,.hx-door:focus-visible .hx-door-go span{transform:translateX(5px)}
.hx-door:focus-visible{outline:3px solid #B8862B;outline-offset:4px}
@media (max-width:900px){.hx-door-grid{grid-template-columns:1fr}.hx-door{aspect-ratio:4/3}}

@media (prefers-reduced-motion:reduce){.hx-hero-img{animation:none;transform:none}.hx-scroll span{animation:none}.hx-door img,.hx-door-go span{transition:none}}

.site-main.hx-main{padding:0!important;margin:0!important}

/* Design update – Experience */
.hx-hero-page{min-height:min(80svh,760px)}
.erleben-timeline{display:grid!important;grid-template-columns:repeat(5,1fr)!important;gap:1rem!important}
@media (max-width:1000px){.erleben-timeline{grid-template-columns:1fr 1fr!important}}
@media (max-width:560px){.erleben-timeline{grid-template-columns:1fr!important}}
.erleben-eigenmarken-section .eigenmarken-layout,.eigenmarken-layout{display:grid!important;grid-template-columns:1fr!important;gap:2rem!important}
.eigenmarken-img{width:100%!important;aspect-ratio:3/1;object-fit:cover}
.eigenmarken-content{max-width:46rem}
.erleben-statement-section{background:linear-gradient(rgba(7,29,27,.82),rgba(7,29,27,.9)),url("../img/markt-innen.jpg") center/cover!important}
.hx-hero-page .hx-hero-img{object-position:75% 40%}
.hx-hero-page .hx-hero-shade{background:linear-gradient(180deg,rgba(7,29,27,.35) 0%,rgba(7,29,27,.2) 40%,rgba(7,29,27,.92) 100%),linear-gradient(90deg,rgba(7,29,27,.92) 0%,rgba(7,29,27,.7) 38%,rgba(7,29,27,.1) 75%)}
.eigenmarken-media{max-width:none!important;width:100%!important}
.hx-hero-build .hx-hero-img{object-position:62% 30%}
.hx-hero-build .hx-lead{max-width:52ch}
/* Design update – Invest teaser */
.hx-hero-invest .hx-hero-img{object-position:center 60%}
.hx-regions{padding:clamp(5rem,10vw,7.5rem) 0;background:#EFEDE6}
.hx-region-list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid rgba(12,43,40,.2)}
.hx-region-list li{padding:2.2rem 1.5rem 2.2rem 0;display:flex;flex-direction:column;gap:.5rem}
.hx-region-list li+li{padding-left:1.5rem;border-left:1px solid rgba(12,43,40,.12)}
.hx-region-name{font-family:var(--font-family-headings,Georgia,serif);font-size:clamp(1.8rem,3.2vw,2.8rem);color:#0C2B28;line-height:1}
.hx-region-note{font-size:.72rem;letter-spacing:.26em;text-transform:uppercase;color:#B8862B}
@media (max-width:700px){.hx-region-list{grid-template-columns:1fr}.hx-region-list li+li{padding-left:0;border-left:0;border-top:1px solid rgba(12,43,40,.12)}}
.teaser-form-note a{color:#0C2B28;font-weight:600}
.legal-prose{max-width:46rem;padding-block:1rem 3rem}
.legal-prose h2{font-size:1.4rem;margin:2.2rem 0 .8rem}
.legal-prose h3{font-size:1.1rem;margin:1.6rem 0 .4rem}
.legal-prose p{margin:0 0 1em;line-height:1.65}
.form-status-box.is-ok{padding:1rem 1.2rem;border-radius:12px;background:rgba(95,179,168,.15);border-left:3px solid #5FB3A8;margin-bottom:1.2rem}
.form-status-box.is-err{padding:1rem 1.2rem;border-radius:12px;background:rgba(184,134,43,.15);border-left:3px solid #B8862B;margin-bottom:1.2rem}
/* Design update – Investor evidence */
.hx-evidence{padding:clamp(5rem,10vw,7.5rem) 0;background:#F7F6F1}
.hx-ev-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.25rem}
.hx-ev{background:#fff;border:1px solid rgba(12,43,40,.10);border-radius:20px;padding:1.8rem;display:flex;flex-direction:column;gap:.7rem}
.hx-ev h3{font-family:var(--font-family-headings,Georgia,serif);font-weight:400;font-size:1.5rem;line-height:1.15;color:#0C2B28;margin:0}
.hx-ev p,.hx-ev li{color:#4A5F5B;line-height:1.6;margin:0}
.hx-ev ul{margin:.3rem 0 0;padding-left:1.1rem;display:grid;gap:.45rem}
.hx-ev-tag{font-size:.7rem;letter-spacing:.22em;text-transform:uppercase;color:#B8862B}
.hx-ev-lead{grid-column:1/-1;background:#0C2B28;border-color:#0C2B28}
.hx-ev-lead h3{color:#F7F6F1;font-size:clamp(1.8rem,3vw,2.6rem)}
.hx-ev-lead p,.hx-ev-lead li{color:rgba(247,246,241,.85)}
.hx-ev-lead .hx-ev-tag{color:#D4A548}
@media (max-width:900px){.hx-ev-grid{grid-template-columns:1fr}}
.hx-hero-page .hx-hero-inner{padding-top:clamp(6rem,14vh,9rem)}
/* Locked investor teaser block */
.hx-locked{background:#071D1B;color:#F7F6F1;padding:clamp(5rem,10vw,7.5rem) 0;position:relative;overflow:hidden}
.hx-locked::before{content:"";position:absolute;right:-10%;top:-30%;width:60%;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle,rgba(184,134,43,.14),transparent 65%)}
.hx-locked-inner{position:relative;display:grid;grid-template-columns:1.2fr 1fr;gap:clamp(2rem,6vw,5rem);align-items:center}
.hx-locked .hx-label{color:#D4A548}
.hx-locked .hx-h2{color:#F7F6F1;margin-bottom:1.25rem}
.hx-locked-text p{color:rgba(247,246,241,.8);line-height:1.65;max-width:46ch;margin:0 0 2rem}
.hx-btn-line{border:1px solid rgba(247,246,241,.45);color:#F7F6F1}
.hx-btn-line:hover{border-color:#F7F6F1;transform:translateY(-2px)}
.hx-locked-list{list-style:none;margin:0;padding:1.5rem 1.75rem;border:1px solid rgba(247,246,241,.14);border-radius:20px;background:rgba(247,246,241,.03);display:grid;gap:0}
.hx-locked-list li{display:flex;align-items:center;gap:1rem;padding:1rem 0;border-bottom:1px solid rgba(247,246,241,.08);color:rgba(247,246,241,.55);filter:blur(0);position:relative}
.hx-locked-list li:last-child{border-bottom:0}
.hx-locked-list li span{font-family:var(--font-family-headings,Georgia,serif);color:#B8862B;font-size:1.1rem;width:2rem}
.hx-locked-list li::after{content:"🔒";margin-left:auto;font-size:.85rem;opacity:.6}
@media (max-width:860px){.hx-locked-inner{grid-template-columns:1fr}}
/* Curtain CTA (teaser end) */
.hx-curtain{position:relative;overflow:hidden;background:#071D1B;color:#F7F6F1;padding:clamp(6rem,13vw,10rem) 0;text-align:center}
.hx-curtain-glow{position:absolute;left:50%;top:50%;width:min(90vw,60rem);aspect-ratio:1;transform:translate(-50%,-50%);background:radial-gradient(circle,rgba(184,134,43,.22) 0%,rgba(95,179,168,.08) 35%,transparent 65%);animation:hx-curtain 10s ease-in-out infinite}
@keyframes hx-curtain{0%,100%{opacity:.6;transform:translate(-50%,-50%) scale(.95)}50%{opacity:1;transform:translate(-50%,-50%) scale(1.05)}}
.hx-curtain-inner{position:relative}
.hx-curtain .hx-label{color:#D4A548}
.hx-curtain-title{font-family:var(--font-family-headings,Georgia,serif);font-weight:400;font-size:clamp(2.2rem,5vw,4rem);line-height:1.08;margin:0 auto 1.4rem;max-width:18ch;color:#F7F6F1}
.hx-curtain-text{color:rgba(247,246,241,.78);line-height:1.65;max-width:52ch;margin:0 auto 2.4rem}
.hx-curtain-actions{display:flex;flex-wrap:wrap;gap:1rem;justify-content:center}
.hx-btn-lg{min-height:3.5rem;padding:0 2.2rem;font-size:1.05rem}
.hx-curtain-note{margin-top:2rem;font-size:.9rem;color:rgba(247,246,241,.55)}
.hx-curtain-note a{color:#F7F6F1}
@media (prefers-reduced-motion:reduce){.hx-curtain-glow{animation:none}}
.hx-btn{gap:.55rem}
/* =========  Investor deep page  ========= */
.inv .hx-h2{max-width:24ch}
.inv-sec{padding:clamp(4.5rem,9vw,7rem) 0;background:#F7F6F1}
.inv-alt{background:#EFEDE6}
.inv-glance{background:#0C2B28;color:#F7F6F1;padding:2.8rem 0 2.2rem}
.inv-glance .hx-label{color:#D4A548}
.inv-kpis{display:grid;grid-template-columns:repeat(5,1fr);gap:0;margin:0 0 1rem;border-top:1px solid rgba(12,43,40,.15)}
.inv-glance .inv-kpis{border-top-color:rgba(247,246,241,.15)}
.inv-kpis div{padding:1.4rem 1.2rem 1.2rem 0;display:flex;flex-direction:column;gap:.35rem}
.inv-kpis div+div{padding-left:1.2rem;border-left:1px solid rgba(12,43,40,.12)}
.inv-glance .inv-kpis div+div{border-left-color:rgba(247,246,241,.12)}
.inv-kpis strong{font-family:var(--font-family-headings,Georgia,serif);font-weight:400;font-size:clamp(1.5rem,2.4vw,2.2rem);line-height:1.05;color:#B8862B}
.inv-glance .inv-kpis strong{color:#F7F6F1}
.inv-kpis span{font-size:.8rem;letter-spacing:.04em;color:#4A5F5B}
.inv-glance .inv-kpis span{color:rgba(247,246,241,.65)}
.inv-kpis-3{grid-template-columns:repeat(3,1fr);margin-top:2.5rem}
@media (max-width:900px){.inv-kpis{grid-template-columns:1fr 1fr}.inv-kpis div+div{border-left:0;padding-left:0}.inv-kpis-3{grid-template-columns:1fr}}
.inv-fn{font-size:.8rem;color:#6B7D79;margin:.6rem 0 0}
.inv-glance .inv-fn{color:rgba(247,246,241,.5)}
.inv-split{display:grid;grid-template-columns:1fr 1.25fr;gap:clamp(2rem,6vw,5rem);align-items:start}
@media (max-width:900px){.inv-split{grid-template-columns:1fr}}
.inv-prose p,.inv-prose{color:#34504B;line-height:1.7;margin:0 0 1.1rem}
.inv-src{font-size:.78rem;color:#6B7D79!important}
.inv-facts{list-style:none;margin:1.5rem 0;padding:0;display:grid;gap:.9rem}
.inv-facts li{display:grid;grid-template-columns:5.5rem 1fr;gap:1rem;align-items:baseline;color:#34504B;line-height:1.55}
.inv-facts strong{font-family:var(--font-family-headings,Georgia,serif);font-weight:400;font-size:1.8rem;color:#B8862B}
.inv-cards3,.inv-cards4{display:grid;gap:1.1rem;grid-template-columns:repeat(3,1fr)}
.inv-cards4{grid-template-columns:repeat(4,1fr)}
@media (max-width:900px){.inv-cards3,.inv-cards4{grid-template-columns:1fr}}
.inv-cards3 article,.inv-cards4 article{background:#fff;border:1px solid rgba(12,43,40,.10);border-radius:18px;padding:1.6rem}
.inv-cards3 h3,.inv-cards4 h3{font-family:var(--font-family-headings,Georgia,serif);font-weight:400;font-size:1.35rem;color:#0C2B28;margin:.3rem 0 .6rem}
.inv-cards3 p,.inv-cards4 p{color:#4A5F5B;line-height:1.6;margin:0}
.inv-tag{font-size:.68rem;letter-spacing:.2em;text-transform:uppercase;color:#B8862B}
.inv-steps{display:grid;grid-template-columns:repeat(3,1fr);gap:1.1rem;margin-top:2.5rem;padding-top:2rem;border-top:1px solid rgba(12,43,40,.15)}
.inv-steps div{display:grid;grid-template-columns:2.6rem 1fr;gap:.2rem .9rem}
.inv-steps span{grid-row:span 2;width:2.4rem;height:2.4rem;border-radius:50%;background:#0C2B28;color:#D4A548;display:grid;place-items:center;font-family:var(--font-family-headings,Georgia,serif)}
.inv-steps strong{color:#0C2B28;font-size:1.05rem}
.inv-steps p{margin:0;color:#4A5F5B;line-height:1.55}
@media (max-width:900px){.inv-steps{grid-template-columns:1fr}}
.inv-floor{margin-top:2.2rem}
.inv-floor-row{display:flex;gap:.4rem;margin-bottom:.4rem}
.inv-floor-row span{border-radius:10px;padding:1rem;background:#0C2B28;color:#F7F6F1;font-size:.88rem}
.inv-floor-row .ns{background:#B8862B;color:#071D1B}
.inv-floor-row .base{background:#D9D5CB;color:#34504B}
.inv-table-wrap{overflow-x:auto;margin:1.5rem 0}
.inv-table{width:100%;border-collapse:collapse;min-width:520px;background:#fff;border-radius:16px;overflow:hidden}
.inv-table th,.inv-table td{padding:.95rem 1.2rem;text-align:left;border-bottom:1px solid rgba(12,43,40,.08);color:#34504B}
.inv-table thead th{font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;color:#6B7D79;background:#FBFAF6}
.inv-table .r{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.inv-table tfoot td{font-weight:700;color:#0C2B28;background:#F4F1E8;border-bottom:0}
.inv-table tr.sub td{font-weight:600;color:#0C2B28;background:#FBFAF6}
.inv-compare .hl{background:rgba(184,134,43,.10);color:#0C2B28;font-weight:600}
.inv-note{color:#4A5F5B;line-height:1.65;max-width:70ch}
.inv-h3{font-family:var(--font-family-headings,Georgia,serif);font-weight:400;font-size:1.7rem;color:#0C2B28;margin:3rem 0 .8rem}
.inv-risks{margin-top:1.6rem;background:#0C2B28;color:#F7F6F1;border-radius:18px;padding:1.8rem}
.inv-risks strong{display:block;font-family:var(--font-family-headings,Georgia,serif);font-weight:400;font-size:1.3rem;margin-bottom:.8rem}
.inv-risks ul{margin:0;padding-left:1.1rem;display:grid;gap:.55rem;color:rgba(247,246,241,.85);line-height:1.55}
.inv-risks b{color:#D4A548;font-weight:600}
.inv-road{list-style:none;margin:2.5rem 0 0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:1.1rem;counter-reset:r}
.inv-road li{background:#fff;border:1px solid rgba(12,43,40,.10);border-radius:18px;padding:1.5rem;display:flex;flex-direction:column;gap:.5rem;border-top:3px solid #B8862B}
.inv-road span{font-size:.7rem;letter-spacing:.2em;text-transform:uppercase;color:#B8862B}
.inv-road strong{font-family:var(--font-family-headings,Georgia,serif);font-weight:400;font-size:1.5rem;color:#0C2B28}
.inv-road p{margin:0;color:#4A5F5B;line-height:1.55;flex:1}
.inv-road em{font-style:normal;font-size:.82rem;color:#0C2B28;background:#F4F1E8;border-radius:8px;padding:.5rem .7rem}
@media (max-width:1000px){.inv-road{grid-template-columns:1fr 1fr}}
@media (max-width:600px){.inv-road{grid-template-columns:1fr}}
.inv-team{display:grid;grid-template-columns:.8fr 1.4fr;gap:clamp(2rem,5vw,4rem);align-items:start}
.inv-founder img{width:100%;aspect-ratio:4/5;object-fit:cover;border-radius:22px}
@media (max-width:900px){.inv-team{grid-template-columns:1fr}.inv-founder{max-width:360px}}
.inv-ask{display:grid;grid-template-columns:1.2fr 1fr;gap:clamp(1.5rem,4vw,3rem);align-items:start}
@media (max-width:900px){.inv-ask{grid-template-columns:1fr}}
.inv-terms{background:#0C2B28;color:#F7F6F1;border-radius:18px;padding:1.8rem;margin-top:1.5rem}
.inv-terms h3{font-family:var(--font-family-headings,Georgia,serif);font-weight:400;font-size:1.5rem;margin:0 0 .8rem;color:#F7F6F1}
.inv-terms p{color:rgba(247,246,241,.85);line-height:1.6}
.inv-terms .inv-fn{color:rgba(247,246,241,.55)}
.inv-tickets{list-style:none;margin:1.2rem 0;padding:0;border-top:1px solid rgba(247,246,241,.15)}
.inv-tickets li{display:flex;justify-content:space-between;gap:1rem;padding:.85rem 0;border-bottom:1px solid rgba(247,246,241,.12)}
.inv-tickets span{color:rgba(247,246,241,.75)}
.inv-tickets strong{color:#D4A548;font-weight:600}
.inv-legal{margin:2.5rem auto 0;max-width:62ch;font-size:.78rem;color:rgba(247,246,241,.45);line-height:1.6}
.inv .hx-ev-grid{grid-template-columns:repeat(2,1fr)}
@media (max-width:900px){.inv .hx-ev-grid{grid-template-columns:1fr}}
.inv-facts li{grid-template-columns:7rem 1fr}
/* Language switch */
.lang-switch{display:flex;align-items:center}
.lang-link{font-size:.72rem!important;letter-spacing:.18em;border:1px solid rgba(12,43,40,.25);border-radius:999px;padding:.3rem .75rem!important;line-height:1}
.lang-link:hover{border-color:#B8862B;color:#B8862B}
@media (max-width:900px){.lang-switch{margin-top:.5rem}}
/* ===== Career dialogs ===== */
body.kf-lock{overflow:hidden}
.kf-dialog{border:0;padding:0;border-radius:22px;width:min(760px,calc(100vw - 2rem));max-height:calc(100vh - 2rem);background:#F7F6F1;color:#0C2B28;box-shadow:0 30px 80px rgba(7,29,27,.35)}
.kf-dialog.kf-small{width:min(520px,calc(100vw - 2rem))}
.kf-dialog::backdrop{background:rgba(7,29,27,.62);backdrop-filter:blur(3px)}
.kf-dialog[open]{display:flex;flex-direction:column}
.kf-form{display:flex;flex-direction:column;max-height:calc(100vh - 2rem);margin:0}
.kf-head{display:flex;justify-content:space-between;gap:1rem;align-items:flex-start;padding:1.6rem 1.8rem 1.1rem;border-bottom:1px solid rgba(12,43,40,.1);background:#0C2B28;color:#F7F6F1}
.kf-head h2{font-family:var(--font-family-headings,Georgia,serif);font-weight:400;font-size:1.7rem;margin:0 0 .35rem;color:#F7F6F1}
.kf-head p{margin:0;color:rgba(247,246,241,.75);line-height:1.5;font-size:.93rem}
.kf-x{border:0;background:rgba(247,246,241,.1);color:#F7F6F1;width:2.4rem;height:2.4rem;border-radius:50%;font-size:1.5rem;line-height:1;cursor:pointer;flex:none}
.kf-x:hover{background:rgba(247,246,241,.2)}
.kf-body{overflow-y:auto;padding:1.4rem 1.8rem;-webkit-overflow-scrolling:touch}
.kf-foot{padding:1rem 1.8rem 1.4rem;border-top:1px solid rgba(12,43,40,.1);display:flex;justify-content:flex-end;background:#F7F6F1}
.kf-body label{display:block;font-size:.86rem;font-weight:600;margin:.9rem 0 .35rem;color:#0C2B28}
.kf-body input:not([type=checkbox]),.kf-body select,.kf-body textarea{width:100%;box-sizing:border-box;min-height:2.9rem;padding:.65rem .9rem;border:1px solid rgba(12,43,40,.22);border-radius:10px;background:#fff;color:#0C2B28;font:inherit}
.kf-body textarea{min-height:6.5rem;resize:vertical}
.kf-body input[type=file]{padding:.55rem;background:#FBFAF6}
.kf-body input:focus,.kf-body select:focus,.kf-body textarea:focus{outline:2px solid #5FB3A8;outline-offset:1px}
.kf-row{display:grid;grid-template-columns:1fr 1fr;gap:0 1rem}
.kf-lang{grid-template-columns:1.3fr 1fr}
@media (max-width:620px){.kf-row{grid-template-columns:1fr}.kf-head,.kf-body,.kf-foot{padding-left:1.1rem;padding-right:1.1rem}}
.kf-fs{border:0;padding:0;margin:1rem 0 0}
.kf-fs legend{font-size:.86rem;font-weight:600;padding:0;margin-bottom:.45rem}
.kf-hint{font-size:.78rem;color:#5B6E6A;margin:.35rem 0 0;display:flex;justify-content:space-between;gap:1rem;font-weight:400}
.kf-fs legend .kf-hint{display:inline;margin-left:.4rem}
.kf-checks{display:flex;flex-wrap:wrap;gap:.5rem}
.kf-chip{margin:0!important;font-weight:500!important;cursor:pointer}
.kf-chip input{position:absolute;opacity:0}
.kf-chip span{display:inline-block;padding:.55rem 1rem;border:1px solid rgba(12,43,40,.25);border-radius:999px;background:#fff}
.kf-chip em{font-style:normal;color:#6B7D79;font-size:.8rem}
.kf-chip input:checked+span{background:#0C2B28;color:#F7F6F1;border-color:#0C2B28}
.kf-chip input:checked+span em{color:#D4A548}
.kf-chip input:focus-visible+span{outline:2px solid #5FB3A8;outline-offset:2px}
.kf-consents{margin-top:1.4rem;padding-top:1rem;border-top:1px solid rgba(12,43,40,.1);display:grid;gap:.2rem}
.kf-check{display:flex!important;gap:.7rem;align-items:flex-start;font-weight:400!important;font-size:.85rem!important;line-height:1.5;color:#34504B!important;margin:.45rem 0!important;cursor:pointer}
.kf-check input{width:1.1rem;height:1.1rem;margin-top:.15rem;flex:none;accent-color:#0C2B28}
.kf-check a{color:#0C2B28}
.kf-hp{position:absolute;left:-9999px}
.kf-mailactions{display:flex;flex-wrap:wrap;gap:.7rem;margin:1.3rem 0 .6rem}
.hx-btn.is-disabled{opacity:.45;pointer-events:none}
.kf-copy{border:1px solid rgba(12,43,40,.3);background:#fff;color:#0C2B28;cursor:pointer}
.kf-copy:disabled{opacity:.45;cursor:default}
.job-apply-action{display:flex;flex-wrap:wrap;gap:.7rem}
.kf-toast{position:fixed;left:50%;bottom:1.5rem;transform:translateX(-50%);z-index:9999;max-width:min(560px,calc(100vw - 2rem));padding:1rem 1.3rem;border-radius:14px;box-shadow:0 14px 40px rgba(7,29,27,.3);line-height:1.5;font-size:.95rem}
.kf-toast.is-ok{background:#0C2B28;color:#F7F6F1;border-left:4px solid #5FB3A8}
.kf-toast.is-err{background:#fff;color:#0C2B28;border-left:4px solid #B8862B}
.kf-dialog{margin:auto!important;inset:0;position:fixed}
.kf-mailnote{font-size:.82rem;color:#5B6E6A;margin:.4rem 0 0}
.hx-ev-live h3{display:flex;flex-direction:column;gap:.2rem}
.hx-live-num{font-size:clamp(2.4rem,4vw,3.4rem);line-height:1;color:#B8862B;font-weight:400}
.hx-ev-live .hx-ev-tag::before{content:"";display:inline-block;width:.5rem;height:.5rem;border-radius:50%;background:#5FB3A8;margin-right:.45rem;vertical-align:middle;animation:hx-pulse 2s ease-in-out infinite}
@keyframes hx-pulse{0%,100%{opacity:1}50%{opacity:.3}}
@media (prefers-reduced-motion:reduce){.hx-ev-live .hx-ev-tag::before{animation:none}}