/* =============================================
   STYLE.CSS — fr.collective OG Website
   Breakpoints: 480px / 768px / 1200px
   ============================================= */

/* ── 1. GOOGLE FONTS ─────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Poppins:wght@400;500;700&display=swap');


/* ── 2. DESIGN TOKENS ────────────────────────── */
:root {
  /* Brand colours */
  --color-bg:         #f9f1e8;  /* warm cream */
  --color-primary:    #547b79;  /* teal */
  --color-highlight:  #cf855e;  /* terracotta */
  --color-cta:        #754645;  /* deep burgundy */
  --color-teal-light: #90aaab;  /* lighter teal */
  --color-text:       #2a2a2a;  /* near-black */
  --color-white:      #ffffff;

  /* Typography */
  --font-display: 'Bebas Neue', 'Impact', sans-serif;
  --font-body:    'Poppins', system-ui, sans-serif;

  /* Spacing scale */
  --space-xs:  0.5rem;
  --space-sm:  1rem;
  --space-md:  2rem;
  --space-lg:  4rem;
  --space-xl:  8rem;

  /* Border radius */
  --radius-sm:   4px;
  --radius-md:   10px;
  --radius-lg:   18px;
  --radius-full: 999px;

  /* Shadows */
  --shadow-sm: 0 2px 10px rgba(42, 42, 42, 0.06);
  --shadow-md: 0 6px 28px rgba(42, 42, 42, 0.10);
  --shadow-lg: 0 12px 48px rgba(42, 42, 42, 0.14);

  /* Motion */
  --transition: 0.25s ease;
  --transition-slow: 0.5s ease;

  /* Layout */
  --max-width: 1200px;
  --nav-height: 100px;
}


/* ── 3. BASE ─────────────────────────────────── */
html {
  color: var(--color-text);
  background-color: var(--color-bg);
  font-family: var(--font-body);
  line-height: 1.65;
  overflow-x: hidden;
}

body {
  font-size: 1rem;
  overflow-x: hidden;
}

/* All interactive elements get a visible focus ring */
:focus-visible {
  outline: 3px solid var(--color-highlight);
  outline-offset: 3px;
}


/* ── 4. TYPOGRAPHY ───────────────────────────── */

/* Display headlines — Moontime only, weight 400 */
.display-text {
  font-family: var(--font-display);
  font-weight: 400;
  line-height: 1.15;
  color: var(--color-primary);
}

/* Section headings */
.section-title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(2.2rem, 5vw, 3.6rem);
  line-height: 1.15;
  color: var(--color-primary);
  margin-bottom: var(--space-sm);
}

.section-title--white {
  color: var(--color-white);
}

.section-subtitle {
  font-family: var(--font-body);
  font-size: 1.05rem;
  color: var(--color-text);
  max-width: 560px;
  margin-bottom: var(--space-md);
}

.section-subtitle--white {
  color: var(--color-bg);
  opacity: 0.9;
}

/* Body copy */
p {
  font-family: var(--font-body);
  font-size: 0.975rem;
  line-height: 1.75;
  color: var(--color-text);
}


/* ── 5. LAYOUT UTILITIES ─────────────────────── */

/* Centred container */
.container {
  width: 100%;
  max-width: var(--max-width);
  margin-inline: auto;
  padding-inline: 1.5rem;
}

/* Generic section padding */
.section {
  padding-block: 5rem;
}

@media (min-width: 768px) {
  .section {
    padding-block: 7rem;
  }
}

/* Alternating section background */
.section--alt {
  background-color: var(--color-white);
}

.section--dark {
  background-color: var(--color-primary);
}

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

/* Pill / tag chips */
.tag {
  display: inline-block;
  padding: 0.3rem 0.9rem;
  border-radius: var(--radius-full);
  font-family: var(--font-body);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  background: var(--color-bg);
  color: var(--color-primary);
  border: 1.5px solid var(--color-teal-light);
}

.tag--highlight {
  background: transparent;
  border-color: var(--color-highlight);
  color: var(--color-highlight);
}


/* ── 6. BUTTONS ──────────────────────────────── */

.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.85rem 2rem;
  border-radius: var(--radius-full);
  font-family: var(--font-body);
  font-size: 0.9rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  position: relative;
  overflow: hidden;
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.35s cubic-bezier(0.16, 1, 0.3, 1), background var(--transition), color var(--transition), border-color var(--transition);
  cursor: pointer;
  white-space: nowrap;
}

.btn:hover {
  transform: translateY(-2px) scale(1.02);
  box-shadow: var(--shadow-md);
}

.btn:active {
  transform: translateY(0) scale(0.98);
}

/* Primary CTA — deep burgundy */
.btn--cta {
  background: var(--color-cta);
  color: var(--color-white);
  border: 2px solid var(--color-cta);
}

.btn--cta:hover {
  background: #5e3534;
  border-color: #5e3534;
}

/* Magnetic glow — follows the cursor, position set via JS as --mx/--my */
.btn--cta::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(120px circle at var(--mx, 50%) var(--my, 50%), rgba(255, 255, 255, 0.28), transparent 70%);
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
}

.btn--cta:hover::before {
  opacity: 1;
}

/* Outlined — teal */
.btn--outline {
  background: transparent;
  color: var(--color-primary);
  border: 2px solid var(--color-primary);
}

.btn--outline:hover {
  background: var(--color-primary);
  color: var(--color-white);
}

/* Outlined white (for dark backgrounds) */
.btn--outline-white {
  background: transparent;
  color: var(--color-white);
  border: 2px solid var(--color-white);
}

.btn--outline-white:hover {
  background: var(--color-white);
  color: var(--color-primary);
}

/* Small button variant */
.btn--sm {
  padding: 0.55rem 1.3rem;
  font-size: 0.8rem;
}


/* ── 7. INLINE SVG ICON HELPER CLASSES ───────── */
/* Used to apply brand colours to inline SVG elements via CSS */

.icon-fill-primary    { fill:   var(--color-primary); }
.icon-fill-highlight  { fill:   var(--color-highlight); }
.icon-fill-white      { fill:   var(--color-white); }
.icon-fill-cta        { fill:   var(--color-cta); }

.icon-stroke-primary  { fill: none; stroke: var(--color-primary);   stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.icon-stroke-highlight{ fill: none; stroke: var(--color-highlight); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.icon-stroke-white    { fill: none; stroke: var(--color-white);     stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.icon-stroke-teal     { fill: none; stroke: var(--color-teal-light);stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }


/* ── 8. NAVIGATION ───────────────────────────── */

.nav {
  position: sticky;
  top: 0;
  z-index: 1000;
  background: var(--color-bg);
  transition: background var(--transition), box-shadow var(--transition);
}

/* White background + shadow once user scrolls down */
.nav--scrolled {
  background: var(--color-white);
  box-shadow: var(--shadow-sm);
}

.nav__inner {
  max-width: var(--max-width);
  margin-inline: auto;
  padding-inline: 1.5rem;
  height: var(--nav-height);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* Logo */
.nav__logo {
  flex-shrink: 0;
}

.nav__logo img {
  height: 80px;
  width: auto;
}

/* Desktop link list */
.nav__links {
  display: none;
  align-items: center;
  gap: 2rem;
}

.nav__links a {
  font-family: var(--font-body);
  font-size: 0.88rem;
  font-weight: 500;
  color: var(--color-text);
  transition: color var(--transition);
  position: relative;
}

.nav__links a::after {
  content: '';
  position: absolute;
  bottom: -3px;
  left: 0;
  width: 0;
  height: 2px;
  background: var(--color-highlight);
  transition: width var(--transition);
  border-radius: var(--radius-full);
}

.nav__links a:hover {
  color: var(--color-primary);
}

.nav__links a:hover::after {
  width: 100%;
}

/* The CTA in the nav gets no underline animation, and its text stays
   white like the rest of the CTA buttons on the page — needs the
   extra `a` in the selector to beat ".nav__links a" above, which
   otherwise overrides it to the dark nav text colour. */
.nav__links a.nav__cta-link {
  text-decoration: none;
  color: var(--color-white);
}

.nav__cta-link::after {
  display: none !important;
}

/* Hamburger button — visible on mobile only */
.nav__hamburger {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  width: 28px;
  height: 19px;
  padding: 0;
  background: none;
  border: none;
  cursor: pointer;
  flex-shrink: 0;
}

.hamburger-bar {
  display: block;
  width: 100%;
  height: 2px;
  background: var(--color-text);
  border-radius: var(--radius-full);
  transition: transform var(--transition), opacity var(--transition);
}

/* Hamburger → X animation when menu is open */
.nav--open .hamburger-bar:nth-child(1) {
  transform: translateY(8.5px) rotate(45deg);
}
.nav--open .hamburger-bar:nth-child(2) {
  opacity: 0;
  transform: scaleX(0);
}
.nav--open .hamburger-bar:nth-child(3) {
  transform: translateY(-8.5px) rotate(-45deg);
}

/* Mobile dropdown panel */
.nav__mobile {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: var(--color-white);
  box-shadow: var(--shadow-md);
  padding: 1.5rem;
  border-top: 1px solid rgba(84, 123, 121, 0.12);
}

.nav--open .nav__mobile {
  display: block;
}

.nav__mobile ul {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.nav__mobile ul a {
  display: block;
  padding: 0.75rem 0;
  font-family: var(--font-body);
  font-size: 1.05rem;
  font-weight: 500;
  color: var(--color-text);
  border-bottom: 1px solid rgba(84, 123, 121, 0.1);
  transition: color var(--transition), padding-left var(--transition);
}

.nav__mobile ul a:hover {
  color: var(--color-primary);
  padding-left: 0.5rem;
}

.nav__mobile .btn--cta {
  margin-top: 1rem;
  width: 100%;
  justify-content: center;
}

/* Show desktop links from 1024px */
@media (min-width: 1024px) {
  .nav__links {
    display: flex;
  }
  .nav__hamburger {
    display: none;
  }
}


/* ── 9. HERO SECTION ─────────────────────────── */

.hero {
  /* Slightly less than full viewport height so the marquee band right
     below it peeks into view on first load, without scrolling */
  min-height: calc(86svh - var(--nav-height));
  display: flex;
  align-items: center;
  background-color: var(--color-bg);
  overflow: hidden;
  position: relative;
  padding-block: 3rem;
}

.hero__inner {
  max-width: var(--max-width);
  margin-inline: auto;
  padding-inline: 1.5rem;
  width: 100%;
}

.hero__content {
  width: 100%;
}

/* Sizing pushed bigger and bolder so it reads as a statement, not a
   polite intro line. */
.hero__headline {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(3.4rem, 12vw, 8.2rem);
  line-height: 0.98;
  letter-spacing: -0.01em;
  color: var(--color-primary);
  margin-bottom: 1.25rem;
}

.hero__headline-accent {
  color: var(--color-highlight);
}

.hero__subheadline {
  font-family: var(--font-body);
  font-size: clamp(0.95rem, 1.8vw, 1.1rem);
  color: var(--color-text);
  line-height: 1.6;
  max-width: 460px;
  margin-bottom: 2.5rem;
  opacity: 0.85;
}

.hero__ctas {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}



/* ── 9b. MARQUEE / SCHRIFTBAND ───────────────── */

/* Endless running text strip used as a rhythm-break between sections,
   slightly rotated so it reads as energy rather than a static banner. */
.marquee {
  background: var(--color-cta);
  overflow: hidden;
  transform: rotate(-1.2deg) scale(1.03);
  margin-block: -0.6rem;
  position: relative;
  z-index: 2;
}

.marquee__track {
  display: flex;
  width: max-content;
  white-space: nowrap;
  padding-block: 0.9rem;
  animation: marquee-scroll 28s linear infinite;
}

.marquee__item {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.1rem, 2.6vw, 1.6rem);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-bg);
  padding-inline: 1.5rem;
}

.marquee__item::after {
  content: '—';
  margin-left: 1.5rem;
  color: var(--color-highlight);
}

@keyframes marquee-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

@media (prefers-reduced-motion: reduce) {
  .marquee__track {
    animation: none;
  }
}


/* ── 10. SERVICES SECTION ────────────────────── */

.services {
  background-color: var(--color-white);
  padding-block: 6rem;
}

.services__header {
  text-align: center;
  margin-bottom: 3.5rem;
}

.services__header .section-subtitle {
  margin-inline: auto;
  text-align: center;
}

/* 2×2 card grid */
.services__grid {
  display: grid;
  grid-template-columns: 1fr;
  align-items: start;
  gap: 1.5rem;
  margin-bottom: 3rem;
}

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

/* Individual service card */
.service-card {
  background: var(--color-bg);
  border-radius: var(--radius-lg);
  padding: 2rem 1.75rem;
  border: 1.5px solid transparent;
  transition: border-color var(--transition), box-shadow var(--transition), transform var(--transition);
}

.service-card:hover {
  border-color: var(--color-teal-light);
  box-shadow: var(--shadow-md);
  transform: translateY(-3px);
}

/* Mobile: only icon + title visible, rest expands on tap */
.service-card__summary {
  display: flex;
  align-items: center;
  gap: 1rem;
  cursor: pointer;
  list-style: none;
}

.service-card__summary::-webkit-details-marker {
  display: none;
}

/* "Mehr erfahren" hint + chevron — makes the tap target obvious */
.service-card__hint {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 0.35rem;
  flex-shrink: 0;
  font-family: var(--font-body);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--color-highlight);
  white-space: nowrap;
}

.service-card__hint svg {
  width: 11px;
  height: 11px;
  transition: transform var(--transition);
  flex-shrink: 0;
}

.service-card[open] .service-card__hint svg {
  transform: rotate(180deg);
}

.service-card__hint-text--open {
  display: none;
}

.service-card[open] .service-card__hint-text--closed {
  display: none;
}

.service-card[open] .service-card__hint-text--open {
  display: inline;
}

/* Desktop gets the fuller "Zeig mir mehr" wording; mobile keeps the
   terser "Mehr" since space is tighter there. */
@media (min-width: 768px) {
  .service-card__hint-text--closed::before {
    content: 'Zeig mir ';
  }
}

.service-card__body {
  padding-top: 1.25rem;
}

.service-card__icon {
  width: 48px;
  height: 48px;
  margin-bottom: 0;
  color: var(--color-primary);
  flex-shrink: 0;
}

.service-card__name {
  font-family: var(--font-body);
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--color-text);
  margin-bottom: 0;
}

/* Pain line — what client feels before */
.service-card__pain {
  font-style: italic;
  font-size: 0.88rem;
  color: var(--color-highlight);
  margin-bottom: 0.35rem;
}

/* Win line — what changes after */
.service-card__win {
  font-family: var(--font-body);
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--color-primary);
  margin-bottom: 0.9rem;
}

.service-card__desc {
  font-size: 0.9rem;
  color: var(--color-text);
  line-height: 1.7;
}

/* Additional-service pill row */
.services__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  justify-content: center;
}

.services__cta {
  display: flex;
  justify-content: center;
  margin-top: 2.5rem;
}


/* ── 11. WHY US (WARUM) SECTION ──────────────── */

.warum {
  background-color: var(--color-primary);
  padding-block: 6rem;
  position: relative;
  overflow: hidden;
}

/* Subtle decorative background circle */
.warum::before {
  content: '';
  position: absolute;
  width: 500px;
  height: 500px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.03);
  top: -150px;
  right: -150px;
  pointer-events: none;
}

.warum__header {
  text-align: center;
  margin-bottom: 4rem;
}

/* Bolder, bigger statement-style typography for this title specifically */
.warum__header .section-title {
  font-size: clamp(3.2rem, 9vw, 6.4rem);
  line-height: 1.02;
}

/* Mobile: swipeable horizontal carousel */
.warum__grid {
  display: flex;
  gap: 1.25rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding-bottom: 0.5rem;
  margin-inline: -1.5rem;
  padding-inline: 1.5rem;
  scrollbar-width: none;
}

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

@media (min-width: 768px) {
  .warum__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2.5rem;
    overflow-x: visible;
    margin-inline: 0;
    padding-inline: 0;
  }
}

.warum__block {
  flex: 0 0 85%;
  scroll-snap-align: center;
  padding: 2.5rem 2rem;
  border-radius: var(--radius-lg);
  border: 1px solid rgba(255, 255, 255, 0.12);
  position: relative;
  cursor: pointer;
  transition: border-color var(--transition), background-color var(--transition);
}

@media (min-width: 768px) {
  .warum__block {
    flex: initial;
  }
}

/* Active block — set on the currently centred/clicked card via JS */
.warum__block.is-active {
  border-color: var(--color-highlight);
  background: rgba(207, 133, 94, 0.06);
}

.warum__block.is-active::before {
  content: '';
  position: absolute;
  top: 0;
  left: 2rem;
  right: 2rem;
  height: 3px;
  background: var(--color-highlight);
  border-radius: 0 0 var(--radius-sm) var(--radius-sm);
}

/* Desktop: hover highlights only the card under the mouse (real pointer
   devices only, so swiping on touch screens doesn't trigger this).
   While the mouse is anywhere over the grid, the default .is-active
   highlight is suppressed — only the actually-hovered card lights up. */
@media (hover: hover) and (pointer: fine) {
  .warum__grid:hover .warum__block.is-active:not(:hover) {
    border-color: rgba(255, 255, 255, 0.12);
    background: transparent;
  }
  .warum__grid:hover .warum__block.is-active:not(:hover)::before {
    display: none;
  }
  .warum__block:hover {
    border-color: var(--color-highlight);
    background: rgba(207, 133, 94, 0.06);
  }
  .warum__block:hover::before {
    content: '';
    position: absolute;
    top: 0;
    left: 2rem;
    right: 2rem;
    height: 3px;
    background: var(--color-highlight);
    border-radius: 0 0 var(--radius-sm) var(--radius-sm);
  }
}

.warum__number {
  font-family: var(--font-body);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-highlight);
  margin-bottom: 1rem;
}

.warum__title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.6rem, 3.5vw, 2.4rem);
  line-height: 1.2;
  color: var(--color-white);
  margin-bottom: 1.2rem;
}

.warum__text {
  font-family: var(--font-body);
  font-size: 0.93rem;
  color: var(--color-bg);
  line-height: 1.8;
  opacity: 0.88;
}


/* ── 12. PORTFOLIO PREVIEW ───────────────────── */

.portfolio-preview {
  background-color: var(--color-bg);
  padding-block: 6rem;
  overflow: hidden;
}

.portfolio-preview__header {
  margin-bottom: 3rem;
}

/* Mobile: swipeable carousel. From 600px: grid, collapses to 2 then 3 cols */
.portfolio-preview__grid {
  display: flex;
  gap: 1.25rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding-bottom: 0.5rem;
  margin-inline: -1.5rem;
  padding-inline: 1.5rem;
  margin-bottom: 2rem;
  scrollbar-width: none;
}

.portfolio-preview__grid::-webkit-scrollbar {
  display: none;
}

.portfolio-preview__grid .case-card {
  flex: 0 0 82%;
  scroll-snap-align: center;
}

@media (min-width: 600px) {
  .portfolio-preview__grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    overflow-x: visible;
    margin-inline: 0;
    padding-inline: 0;
    margin-bottom: 3rem;
  }
  .portfolio-preview__grid .case-card {
    flex: initial;
  }
}

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

/* Shared case card style (used on index and portfolio page) */
.case-card {
  background: var(--color-white);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition: transform var(--transition), box-shadow var(--transition);
  display: flex;
  flex-direction: column;
}

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

/* Coloured placeholder image block — kept slim until real case
   photography/footage replaces it, so it reads as an accent strip
   rather than empty space */
.case-card__image {
  height: 110px;
  background: linear-gradient(135deg, var(--color-primary), var(--color-teal-light));
  position: relative;
  display: flex;
  align-items: flex-end;
  padding: 1.25rem;
  overflow: hidden;
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.case-card:hover .case-card__image {
  transform: scale(1.06);
}

/* Diagonal shimmer sweep — runs once on hover to suggest motion/footage
   until real case video or photography replaces these gradient blocks */
.case-card__image::after {
  content: '';
  position: absolute;
  top: 0;
  left: -150%;
  width: 60%;
  height: 100%;
  background: linear-gradient(115deg, transparent, rgba(255, 255, 255, 0.35), transparent);
  transition: left 0.9s ease;
}

.case-card:hover .case-card__image::after {
  left: 150%;
}

/* Branche-Label — permanently visible (not hidden behind hover),
   since the coloured block alone looked too empty without it */
.case-card__brand {
  font-family: var(--font-body);
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--color-white);
  opacity: 0.92;
}

.case-card__image--2 {
  background: linear-gradient(135deg, var(--color-highlight), var(--color-cta));
}

.case-card__image--3 {
  background: linear-gradient(135deg, var(--color-primary), var(--color-highlight));
}

.case-card__image--4 {
  background: linear-gradient(135deg, var(--color-cta), var(--color-highlight));
}

.case-card__image--5 {
  background: linear-gradient(135deg, var(--color-teal-light), var(--color-primary));
}

.case-card__image--6 {
  background: linear-gradient(135deg, var(--color-highlight), var(--color-teal-light));
}

.case-card__body {
  padding: 1.5rem;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.case-card__label {
  font-family: var(--font-body);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-teal-light);
}

.case-card__tag {
  align-self: flex-start;
  padding: 0.25rem 0.75rem;
  border-radius: var(--radius-full);
  font-size: 0.72rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  background: var(--color-bg);
  color: var(--color-primary);
  border: 1px solid var(--color-teal-light);
}

.case-card__metric {
  font-family: var(--font-body);
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--color-primary);
  line-height: 1.2;
  margin-top: 0.25rem;
}

.case-card__desc {
  font-size: 0.88rem;
  color: var(--color-text);
  line-height: 1.7;
  flex: 1;
}

.case-card__link {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  font-family: var(--font-body);
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--color-highlight);
  margin-top: 0.75rem;
  transition: gap var(--transition), color var(--transition);
}

.case-card__link:hover {
  gap: 0.6rem;
  color: var(--color-cta);
}

.portfolio-preview__cta {
  text-align: center;
}


/* ── 12b. TRUST: TESTIMONIALS + LOGOS ────────── */

.trust {
  background-color: var(--color-white);
  padding-block: 5rem;
}

.trust__header {
  text-align: center;
  margin-bottom: 3rem;
}

/* "Glass sphere" carousel: slides are arranged in a shallow 3D arc.
   The active slide sits front-and-center; neighbours recede in depth
   and rotate away to the sides, as if the whole thing were a sphere
   being turned — the one before/after is always visible at the edges. */
.trust__carousel {
  max-width: 720px;
  margin: 0 auto 2rem;
  touch-action: pan-y;
  perspective: 1600px;
}

.trust__track {
  position: relative;
  height: 420px;
  transform-style: preserve-3d;
}

.testimonial-slide {
  position: absolute;
  inset: 0;
  margin: auto;
  width: 100%;
  max-width: 520px;
  background: var(--color-bg);
  border-radius: var(--radius-lg);
  padding: 2.25rem 2rem;
  text-align: center;
  transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.6s ease;
  cursor: pointer;
}

.testimonial-slide.is-active {
  cursor: default;
}

/* Textual stand-in for a client logo — replace with an <img> once real
   logo files are supplied (assets/images/logos/...) */
.testimonial-slide__logo {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 1.3rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-teal-light);
  margin-bottom: 1rem;
}

.testimonial-slide__quote {
  font-size: 1rem;
  line-height: 1.7;
  color: var(--color-text);
  margin-bottom: 1.25rem;
  font-style: italic;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 7;
  overflow: hidden;
}

@media (max-width: 480px) {
  .trust__track {
    height: 480px;
  }
}

.testimonial-slide__author {
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--color-highlight);
}

.trust__dots {
  display: flex;
  justify-content: center;
  gap: 0.6rem;
  margin-top: 1.5rem;
}

.trust__dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--color-teal-light);
  opacity: 0.35;
  padding: 0;
  border: none;
  cursor: pointer;
  transition: opacity var(--transition), transform var(--transition), background var(--transition);
}

.trust__dot:hover {
  opacity: 0.6;
}

.trust__dot.is-active {
  background: var(--color-highlight);
  opacity: 1;
  transform: scale(1.25);
}


/* ── 12c. MANIFESTO (full-bleed statement) ───── */

.manifesto {
  background-color: var(--color-cta);
  padding-block: 5rem;
}

/* Second manifesto-style break further down the page — different
   background so the two don't read as identical repeats */
.manifesto--alt {
  background-color: var(--color-primary);
}

.manifesto__label {
  font-family: var(--font-body);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-highlight);
  margin-bottom: 1rem;
}

.manifesto__statement {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(2rem, 6vw, 4rem);
  line-height: 1.12;
  color: var(--color-white);
  max-width: 880px;
}


/* ── 13. TEAM SECTION ────────────────────────── */

.team {
  background-color: var(--color-white);
  padding-block: 6rem;
}

.team__header {
  margin-bottom: 3rem;
}

.team__intro {
  font-size: 1rem;
  max-width: 600px;
  margin-bottom: 2.5rem;
}

/* 5 cards in a row on desktop, 2 cols on mobile */
.team__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 2rem;
}

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

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

.team-card {
  text-align: center;
}

.team-card__summary {
  cursor: pointer;
  list-style: none;
}

.team-card__summary::-webkit-details-marker {
  display: none;
}

.team-card__contact {
  margin-top: 0.75rem;
  animation: team-contact-in 0.25s ease;
}

@keyframes team-contact-in {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}

.team-card__contact a {
  display: inline-flex;
  align-items: center;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--color-highlight);
  padding: 0.4rem 0.9rem;
  border-radius: var(--radius-full);
  background: rgba(207, 133, 94, 0.1);
  transition: background var(--transition);
}

.team-card__contact a:hover {
  background: rgba(207, 133, 94, 0.2);
}

/* Circular photo — supports both img and letter fallback */
.team-card__avatar {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  background: var(--color-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 1.1rem;
  font-family: var(--font-display);
  font-size: 2.6rem;
  color: var(--color-white);
  font-weight: 400;
  overflow: hidden;
  transition: transform var(--transition), box-shadow var(--transition);
}

.team-card__avatar img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
}

.team-card__avatar-letter {
  position: relative;
  z-index: 0;
}

/* When photo loads successfully, it sits on top of the letter */
.team-card__avatar {
  position: relative;
}

.team-card:hover .team-card__avatar {
  transform: scale(1.04);
  box-shadow: 0 0 0 4px var(--color-highlight);
}

.team-card__name {
  font-family: var(--font-body);
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--color-text);
  margin-bottom: 0.3rem;
}

.team-card__role {
  font-family: var(--font-body);
  font-size: 0.8rem;
  color: var(--color-teal-light);
  line-height: 1.5;
}


/* ── 14. FÖRDERUNGEN PREVIEW (on index) ──────── */

.foerderungen-preview {
  background-color: var(--color-bg);
  padding-block: 6rem;
}

.foerderungen-preview__header {
  margin-bottom: 3rem;
}

.foerderungen__intro-text {
  font-size: 1rem;
  margin-bottom: 2.5rem;
}

/* Mobile: hidden — title, intro text and CTA are enough. From tablet up: full grid */
.foerderungen__grid {
  display: none;
}

@media (min-width: 600px) {
  .foerderungen__grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
    margin-bottom: 3rem;
  }
}

.foerderung-card {
  display: block;
  background: var(--color-white);
  border-radius: var(--radius-md);
  padding: 1.75rem 1.5rem;
  border-left: 4px solid var(--color-teal-light);
  transition: border-color var(--transition), box-shadow var(--transition);
  text-decoration: none;
}

.foerderung-card:hover {
  border-color: var(--color-highlight);
  background: rgba(207, 133, 94, 0.06);
  box-shadow: var(--shadow-sm);
}

/* Personal certification — same white resting state as the other
   cards, just a stronger border accent so it still stands out. */
.foerderung-card--highlight {
  border-left-color: var(--color-highlight);
}

.foerderung-card--highlight:hover {
  border-color: var(--color-highlight);
}

.foerderung-card__name {
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 700;
  color: var(--color-primary);
  margin-bottom: 0.5rem;
}

.foerderung-card__desc {
  font-size: 0.88rem;
  color: var(--color-text);
  line-height: 1.7;
}


/* ── 14b. KURSE & WORKSHOPS (on index) ───────── */

.kurse {
  background-color: var(--color-white);
  padding-block: 6rem;
}

.kurse__header {
  margin-bottom: 3rem;
}

.kurse__grid {
  display: grid;
  grid-template-columns: 1fr;
  align-items: start;
  gap: 1.5rem;
}

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

@media (min-width: 1024px) {
  .kurse__grid {
    /* 6 cards total → two clean rows of 3, instead of 4+orphan */
    grid-template-columns: repeat(3, 1fr);
  }
}

/* From 768px the cards are always force-opened (see main.js), so it's
   safe to stretch them to equal height — below that, cards can be in
   mixed open/closed accordion states and stretching would leave a
   blank gap under the closed ones. */
@media (min-width: 768px) {
  .kurse__grid {
    align-items: stretch;
  }
}

.kurs-card {
  background: var(--color-bg);
  border-radius: var(--radius-lg);
  padding: 1.75rem 1.5rem;
  border: 1.5px solid transparent;
  transition: border-color var(--transition), box-shadow var(--transition);
  display: flex;
  flex-direction: column;
}

.kurs-card:hover {
  border-color: var(--color-teal-light);
  box-shadow: var(--shadow-md);
}

/* The "custom workshop" card has no accordion — content is always
   shown, so it gets a dashed accent border to read as an open invite
   rather than another fixed course offering */
.kurs-card--custom {
  border-style: dashed;
  border-color: var(--color-highlight);
  background: rgba(207, 133, 94, 0.05);
}

.kurs-card--custom .kurs-card__name {
  font-size: 1.05rem;
}

.kurs-card--custom .kurs-card__body {
  padding-top: 0.75rem;
}

/* Accordion summary: meta + title stacked in col 1, hint pinned in col 2 */
.kurs-card__summary {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 0.25rem 1rem;
  cursor: pointer;
  list-style: none;
}

.kurs-card__summary::-webkit-details-marker {
  display: none;
}

.kurs-card__hint {
  grid-column: 2;
  grid-row: 1 / 3;
  display: flex;
  align-items: center;
  gap: 0.35rem;
  flex-shrink: 0;
  font-family: var(--font-body);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--color-highlight);
  white-space: nowrap;
}

.kurs-card__hint svg {
  width: 11px;
  height: 11px;
  transition: transform var(--transition);
  flex-shrink: 0;
}

.kurs-card[open] .kurs-card__hint svg {
  transform: rotate(180deg);
}

.kurs-card__hint-text--open {
  display: none;
}

.kurs-card[open] .kurs-card__hint-text--closed {
  display: none;
}

.kurs-card[open] .kurs-card__hint-text--open {
  display: inline;
}

.kurs-card__meta {
  grid-column: 1;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--color-highlight);
}

.kurs-card__name {
  grid-column: 1;
  font-family: var(--font-body);
  font-size: 1.02rem;
  font-weight: 700;
  color: var(--color-text);
  margin-bottom: 0;
}

.kurs-card__body {
  padding-top: 1rem;
  display: flex;
  flex-direction: column;
  flex: 1;
}

.kurs-card__body .case-card__link {
  margin-top: auto;
}

.kurs-card__desc {
  font-size: 0.88rem;
  color: var(--color-text);
  line-height: 1.65;
  margin-bottom: 0.75rem;
}

.kurse__cta {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  margin-top: 3rem;
  text-align: center;
}

.kurse__cta-text {
  font-size: 0.95rem;
  color: var(--color-text);
}

/* Desktop: show the full description always — accordion is a mobile-only space-saver */
@media (min-width: 768px) {
  .kurs-card__summary {
    cursor: default;
  }
  .kurs-card__hint {
    display: none;
  }
  .kurs-card > *:not(summary):not(.kurs-card__body) {
    display: block !important;
  }
  .kurs-card__body {
    display: flex !important;
    flex-direction: column;
    flex: 1;
    padding-top: 0.75rem;
  }
}


/* ── 15. PODCAST SECTION ─────────────────────── */

.podcast {
  background-color: var(--color-white);
  padding-block: 6rem;
}

.podcast__top {
  display: flex;
  flex-direction: column;
  gap: 2rem;
  margin-bottom: 3rem;
}

.podcast__header {
  margin-bottom: 0;
}

/* Illustration hidden on mobile to avoid crowding; shown next to the
   text on desktop, where the column would otherwise look empty */
.podcast__visual {
  display: none;
}

.podcast__illustration {
  width: 100%;
  height: auto;
}

@media (min-width: 1024px) {
  .podcast__top {
    flex-direction: row;
    align-items: center;
    gap: 3rem;
  }
  .podcast__header {
    flex: 1 1 55%;
  }
  .podcast__visual {
    display: block;
    flex: 0 0 280px;
  }
}

.podcast__value {
  font-size: 0.97rem;
  line-height: 1.75;
  color: var(--color-text);
  max-width: 640px;
  margin-top: 1rem;
}

.podcast__cta {
  margin-top: 1.75rem;
}

.podcast__episodes {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.25rem;
  margin-bottom: 2.5rem;
}

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

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

.podcast__embed iframe {
  display: block;
  border: none;
}

.episode-card {
  background: var(--color-bg);
  border-radius: var(--radius-md);
  padding: 1.75rem 1.5rem;
  border: 1.5px solid transparent;
  transition: border-color var(--transition), box-shadow var(--transition);
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.episode-card:hover {
  border-color: var(--color-teal-light);
  box-shadow: var(--shadow-sm);
}

.episode-card__number {
  font-family: var(--font-body);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-highlight);
}

.episode-card__title {
  font-family: var(--font-body);
  font-size: 0.97rem;
  font-weight: 700;
  color: var(--color-text);
  line-height: 1.45;
  flex: 1;
}

.episode-card__duration {
  font-size: 0.82rem;
  color: var(--color-teal-light);
  margin-top: 0.25rem;
}

/* Podcast availability footnote */
.podcast__availability {
  font-size: 0.88rem;
  color: var(--color-teal-light);
  margin-top: 1.5rem;
}

.podcast__availability span,
.podcast__availability a {
  font-weight: 500;
  color: var(--color-primary);
}

.podcast__availability a {
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color var(--transition);
}

.podcast__availability a:hover {
  border-color: var(--color-primary);
}


/* ── 15b. FAQ SECTION ───────────── */

.faq {
  padding-block: 6rem;
}

.faq__header {
  margin-bottom: 2.5rem;
}

.faq__list {
  max-width: 760px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

/* Top-level FAQ categories — collapsible groups, each containing nested faq-items */
.faq-category {
  background: var(--color-white);
  border: 1.5px solid transparent;
  border-radius: var(--radius-md);
  transition: border-color var(--transition), box-shadow var(--transition);
}

.faq-category:hover {
  border-color: var(--color-teal-light);
  box-shadow: var(--shadow-sm);
}

.faq-category__title {
  font-family: var(--font-body);
  font-size: 1.08rem;
  font-weight: 700;
  color: var(--color-primary);
  padding: 1.4rem 2.25rem 1.4rem 1.5rem;
  cursor: pointer;
  list-style: none;
  position: relative;
}

.faq-category__title::-webkit-details-marker {
  display: none;
}

.faq-category__title::after {
  content: '+';
  position: absolute;
  right: 1.5rem;
  top: 50%;
  transform: translateY(-50%);
  font-family: var(--font-body);
  font-size: 1.6rem;
  font-weight: 400;
  color: var(--color-highlight);
  transition: transform var(--transition);
}

.faq-category[open] > .faq-category__title::after {
  transform: translateY(-50%) rotate(45deg);
}

.faq-category__items {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  padding: 0 1rem 1.25rem;
}

/* Nested faq-items sit on a slightly tinted background to read as "inside" the category */
.faq-category__items .faq-item {
  background: var(--color-bg);
  border-radius: var(--radius-sm);
}

.faq-category__items .faq-item:hover {
  border-color: var(--color-teal-light);
  box-shadow: none;
}

.faq-category__items .faq-item__question {
  font-size: 0.95rem;
  padding: 1rem 1.75rem 1rem 0.25rem;
}

.faq-category__items .faq-item__answer {
  padding: 0 0.25rem 1.1rem;
}

.faq-item {
  background: var(--color-white);
  border: 1.5px solid transparent;
  border-radius: var(--radius-md);
  padding: 0.25rem 1.5rem;
  transition: border-color var(--transition), box-shadow var(--transition);
}

.faq-item:hover {
  border-color: var(--color-teal-light);
  box-shadow: var(--shadow-sm);
}

.faq-item__question {
  font-family: var(--font-body);
  font-size: 1.02rem;
  font-weight: 700;
  color: var(--color-text);
  padding: 1.25rem 1.75rem 1.25rem 0;
  cursor: pointer;
  list-style: none;
  position: relative;
}

.faq-item__question::-webkit-details-marker {
  display: none;
}

.faq-item__question::after {
  content: '+';
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  font-family: var(--font-body);
  font-size: 1.4rem;
  font-weight: 400;
  color: var(--color-highlight);
  transition: transform var(--transition);
}

.faq-item[open] .faq-item__question::after {
  transform: translateY(-50%) rotate(45deg);
}

.faq-item__answer {
  padding-bottom: 1.5rem;
}

.faq-item__answer p {
  font-size: 0.95rem;
  line-height: 1.65;
  color: var(--color-text-muted, #555);
}

.faq-item__answer a {
  color: var(--color-highlight);
  font-weight: 600;
}


/* ── 16. CONTACT (KONTAKT) SECTION ───────────── */

.kontakt {
  background-color: var(--color-bg);
  padding-block: 6rem;
}

.kontakt__header {
  margin-bottom: 3rem;
}

.kontakt__booking-cta {
  margin-top: 1.5rem;
}

.kontakt__inner {
  display: grid;
  grid-template-columns: 1fr;
  gap: 3rem;
}

@media (min-width: 768px) {
  .kontakt__inner {
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
    align-items: start;
  }
}

/* Contact form */
.contact-form {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

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

.form-group label {
  font-family: var(--font-body);
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-primary);
}

.form-group input,
.form-group textarea {
  padding: 0.85rem 1rem;
  border: 1.5px solid var(--color-teal-light);
  border-radius: var(--radius-md);
  background: var(--color-white);
  font-family: var(--font-body);
  font-size: 0.95rem;
  color: var(--color-text);
  transition: border-color var(--transition), box-shadow var(--transition);
  resize: vertical;
}

.form-group input::placeholder,
.form-group textarea::placeholder {
  color: var(--color-teal-light);
  opacity: 0.7;
}

.form-group input:focus,
.form-group textarea:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(84, 123, 121, 0.12);
}

.form-group--consent {
  flex-direction: row;
  align-items: flex-start;
  gap: 0;
}

.form-group--consent .consent-label {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  cursor: pointer;
  font-size: 0.82rem;
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
  color: var(--color-teal-light);
  line-height: 1.5;
}

.consent-label input[type="checkbox"] {
  margin-top: 0.15rem;
  flex-shrink: 0;
  width: 1rem;
  height: 1rem;
  accent-color: var(--color-primary);
  cursor: pointer;
}

.consent-label a {
  color: var(--color-primary);
  text-decoration: underline;
}

.consent-label a:hover {
  opacity: 0.8;
}

.form-success {
  background: rgba(84, 123, 121, 0.1);
  border: 1.5px solid var(--color-primary);
  border-radius: var(--radius-md);
  padding: 2rem;
  text-align: center;
}

.form-success p {
  color: var(--color-primary);
  font-weight: 500;
  font-size: 1rem;
}

/* Contact info column */
.contact-info {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.contact-info__item {
  display: flex;
  align-items: center;
  gap: 0.9rem;
}

.contact-info__item svg {
  flex-shrink: 0;
  color: var(--color-primary);
}

.contact-info__item a {
  font-family: var(--font-body);
  font-size: 0.97rem;
  color: var(--color-text);
  font-weight: 500;
  transition: color var(--transition);
}

.contact-info__item a:hover {
  color: var(--color-primary);
}

.contact-info__locations {
  font-family: var(--font-body);
  font-size: 0.97rem;
  color: var(--color-teal-light);
  font-weight: 500;
  padding-top: 0.5rem;
  border-top: 1px solid rgba(144, 170, 171, 0.3);
}

.contact-info__locations span {
  color: var(--color-primary);
}


/* ── 17. FOOTER ──────────────────────────────── */

.footer {
  background-color: var(--color-primary);
  color: var(--color-white);
  padding-top: 4rem;
}

.footer__main {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2.5rem;
  padding-bottom: 3rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}

@media (min-width: 768px) {
  .footer__main {
    grid-template-columns: 1.5fr 1fr 1fr;
    gap: 3rem;
  }
}

.footer__brand {
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
}

/* Uses a pre-recoloured beige variant of the logo (logo-clean-beige.svg,
   fills swapped to --color-bg) instead of a CSS mask — the mask approach
   was unreliable (luminance-mode masking on the mid-tone teal source
   fills made the logo render invisible in some browsers/contexts) and
   the footer's teal background means the logo's own teal would
   otherwise disappear into it anyway. */
.footer__logo {
  display: inline-block;
  width: 94px;
  height: auto;
}

.footer__tagline {
  font-size: 0.9rem;
  color: var(--color-bg);
  opacity: 0.8;
}

.footer__col-title {
  font-family: var(--font-body);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-teal-light);
  margin-bottom: 1rem;
}

.footer__nav-list {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.footer__nav-list a {
  font-size: 0.9rem;
  color: var(--color-bg);
  opacity: 0.8;
  transition: opacity var(--transition), color var(--transition);
}

.footer__nav-list a:hover {
  opacity: 1;
  color: var(--color-white);
}

/* Social icon links */
.footer__social {
  display: flex;
  gap: 1rem;
  align-items: center;
}

.footer__social a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1.5px solid rgba(255, 255, 255, 0.25);
  color: var(--color-white);
  transition: background var(--transition), border-color var(--transition);
}

.footer__social a:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: var(--color-white);
}

/* Footer bottom bar */
.footer__bottom {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  padding-block: 1.5rem;
  font-size: 0.82rem;
  color: rgba(249, 241, 232, 0.6);
}

@media (min-width: 600px) {
  .footer__bottom {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
  }
}

.footer__legal {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 1.5rem;
}

.footer__legal a {
  color: rgba(249, 241, 232, 0.6);
  transition: color var(--transition);
}

.footer__legal a:hover {
  color: var(--color-white);
}


/* ── 18. PAGE HEADER (subpages) ──────────────── */

.page-header {
  background-color: var(--color-primary);
  padding-block: 5rem 4rem;
  position: relative;
  overflow: hidden;
}

.page-header::after {
  content: '';
  position: absolute;
  width: 360px;
  height: 360px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.08);
  bottom: -120px;
  right: -80px;
  pointer-events: none;
}

.page-header__title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(2.8rem, 6vw, 5rem);
  color: var(--color-white);
  line-height: 1.1;
  margin-bottom: 1rem;
}

.page-header__subtitle {
  font-size: 1rem;
  color: var(--color-bg);
  opacity: 0.85;
  max-width: 500px;
}


/* ── 19. PORTFOLIO PAGE ──────────────────────── */

.portfolio-page {
  padding-block: 5rem;
}

/* Filter row */
.portfolio-filter {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin-bottom: 3rem;
}

.filter-btn {
  padding: 0.55rem 1.3rem;
  border-radius: var(--radius-full);
  font-family: var(--font-body);
  font-size: 0.82rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  border: 1.5px solid var(--color-teal-light);
  color: var(--color-text);
  background: transparent;
  cursor: pointer;
  transition: background var(--transition), color var(--transition), border-color var(--transition);
}

.filter-btn:hover {
  border-color: var(--color-primary);
  color: var(--color-primary);
}

.filter-btn.is-active {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: var(--color-white);
}

/* Portfolio case grid — same structure as preview but 3 cols */
.portfolio-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
}

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

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

/* Hide filtered-out cards (set via JS) */
.case-card[hidden] {
  display: none !important;
}


/* ── 20. FÖRDERUNGEN PAGE ────────────────────── */

.foerderungen-page {
  padding-block: 5rem;
}

.foerderungen-page__body {
  max-width: 760px;
  margin-bottom: 4rem;
}

.foerderungen-page__body p + p {
  margin-top: 1.1rem;
}

.foerderungen-detail-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
  margin-bottom: 4rem;
}

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

/* Larger version of the funding card */
.foerderung-detail-card {
  display: block;
  background: var(--color-white);
  border-radius: var(--radius-lg);
  padding: 2rem 1.75rem;
  border: 1.5px solid var(--color-teal-light);
  transition: border-color var(--transition), box-shadow var(--transition);
  text-decoration: none;
}

.foerderung-detail-card:hover {
  border-color: var(--color-highlight);
  background: rgba(207, 133, 94, 0.06);
  box-shadow: var(--shadow-sm);
}

.foerderung-detail-card--highlight {
  border-color: var(--color-highlight);
}

.foerderung-detail-card--highlight:hover {
  border-color: var(--color-highlight);
}

.foerderung-detail-card__name {
  font-family: var(--font-body);
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--color-primary);
  margin-bottom: 0.75rem;
}

.foerderung-detail-card__desc {
  font-size: 0.92rem;
  line-height: 1.75;
  color: var(--color-text);
}

.foerderung-cta-box {
  background: var(--color-primary);
  border-radius: var(--radius-lg);
  padding: 2.5rem 2rem;
  text-align: center;
  max-width: 600px;
  margin-inline: auto;
}

.foerderung-cta-box p {
  color: var(--color-bg);
  opacity: 0.9;
  margin-bottom: 1.5rem;
}


/* ── 20b. BLOG PAGE (scaffold) ────────────────── */

.blog-page {
  padding-block: 5rem;
}

.blog-page__intro {
  max-width: 640px;
  margin-bottom: 3rem;
}

.blog-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
  margin-bottom: 3rem;
}

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

.blog-card {
  display: block;
  background: var(--color-white);
  border-radius: var(--radius-lg);
  padding: 1.75rem 1.5rem;
  border: 1.5px solid var(--color-teal-light);
  text-decoration: none;
  color: inherit;
  transition: border-color var(--transition), box-shadow var(--transition), transform var(--transition);
}

.blog-card:hover {
  border-color: var(--color-highlight);
  box-shadow: var(--shadow-sm);
  transform: translateY(-3px);
}

/* Not-yet-written article — visually muted, not clickable */
.blog-card--soon {
  opacity: 0.7;
  cursor: default;
}

.blog-card--soon:hover {
  border-color: var(--color-teal-light);
  box-shadow: none;
  transform: none;
}

.blog-card__tag {
  display: inline-block;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-highlight);
  background: rgba(207, 133, 94, 0.1);
  padding: 0.25rem 0.7rem;
  border-radius: var(--radius-full);
  margin-bottom: 0.5rem;
}

.blog-card__date {
  display: block;
  font-size: 0.75rem;
  color: #7a7570;
  margin-bottom: 0.7rem;
}

.blog-article__date {
  display: block;
  font-size: 0.82rem;
  color: #7a7570;
  margin-top: 0.5rem;
  margin-bottom: 0;
}

.blog-card__title {
  font-family: var(--font-body);
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--color-text);
  margin-bottom: 0.5rem;
}

.blog-card__desc {
  font-size: 0.88rem;
  color: var(--color-teal-light);
  line-height: 1.6;
}

.blog-card__readmore {
  display: inline-block;
  margin-top: 0.9rem;
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--color-highlight);
}

.blog-page__cta {
  text-align: center;
  background: var(--color-bg);
  border-radius: var(--radius-lg);
  padding: 2.5rem 2rem;
  max-width: 560px;
  margin-inline: auto;
}

.blog-page__cta p {
  margin-bottom: 1.25rem;
}

/* ── Blog article (single-post) pages ── */

.blog-article__back {
  display: inline-block;
  margin-bottom: 1.5rem;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--color-highlight);
}

.blog-article__lead {
  font-size: 1.08rem;
  font-weight: 600;
  color: var(--color-text);
  line-height: 1.6;
}

.blog-article__cta {
  text-align: center;
  background: var(--color-bg);
  border-radius: var(--radius-lg);
  padding: 3rem 2rem;
  max-width: 640px;
  margin: 1rem auto 0;
}

.blog-article__cta p {
  margin-bottom: 1.25rem;
}

.blog-article__author {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-top: 3rem;
  padding-top: 2rem;
  border-top: 1px solid rgba(42, 42, 42, 0.12);
}

.blog-article__author-img {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  object-fit: cover;
  object-position: top;
  flex-shrink: 0;
}

.blog-article__author-label {
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--color-teal-light);
  margin-bottom: 0.15rem;
}

.blog-article__author-name {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--color-text);
  margin-bottom: 0.1rem;
}

.blog-article__author-role {
  font-size: 0.82rem;
  color: #7a7570;
}


/* ── 21. STATIC PAGES (Impressum / Datenschutz) ── */

.static-page {
  padding-block: 5rem;
}

.static-page__content {
  max-width: 760px;
}

.static-page__content h2 {
  font-family: var(--font-body);
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--color-primary);
  margin-top: 2.5rem;
  margin-bottom: 0.6rem;
}

.static-page__content h3 {
  font-family: var(--font-body);
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--color-text);
  margin-top: 1.5rem;
  margin-bottom: 0.4rem;
}

.static-page__content p {
  font-size: 0.93rem;
  margin-bottom: 0.75rem;
}

.static-page__content p + p {
  margin-top: 0.4rem;
}

.static-page__content ul {
  list-style: disc;
  padding-left: 1.5rem;
  margin-bottom: 0.75rem;
}

.static-page__content ul li {
  font-size: 0.93rem;
  color: var(--color-text);
  line-height: 1.75;
  margin-bottom: 0.25rem;
}

/* Placeholder styling for client-fill fields */
.placeholder-field {
  background: rgba(207, 133, 94, 0.1);
  border: 1.5px dashed var(--color-highlight);
  border-radius: var(--radius-sm);
  padding: 0.2rem 0.5rem;
  color: var(--color-cta);
  font-style: italic;
  font-size: 0.88rem;
}

.static-page__content table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 1.5rem;
}

.static-page__content th,
.static-page__content td {
  text-align: left;
  padding: 0.6rem 0.75rem;
  font-size: 0.9rem;
  border-bottom: 1px solid rgba(144, 170, 171, 0.25);
}

.static-page__content th {
  font-weight: 700;
  color: var(--color-primary);
  background: rgba(84, 123, 121, 0.06);
}

/* Stack label/value pairs on narrow screens instead of squeezing two columns */
@media (max-width: 600px) {
  .static-page__content table,
  .static-page__content tbody,
  .static-page__content tr {
    display: block;
    width: 100%;
  }

  .static-page__content tr {
    margin-bottom: 0.85rem;
    border-bottom: 1px solid rgba(144, 170, 171, 0.25);
    padding-bottom: 0.6rem;
  }

  .static-page__content tr:last-child {
    margin-bottom: 0;
  }

  .static-page__content th,
  .static-page__content td {
    display: block;
    width: 100%;
    padding: 0.15rem 0;
    border-bottom: none;
  }

  .static-page__content th {
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--color-text-muted, #555);
    background: none;
    padding-top: 0;
  }

  .static-page__content td {
    font-size: 0.95rem;
  }
}


/* ── 22. ANIMATIONS ──────────────────────────── */

/* Fade up on scroll — applied via JS IntersectionObserver */
.fade-in-up {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.65s ease, transform 0.65s ease;
}

.fade-in-up.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Staggered children delay — add class to wrapper */
.stagger-children .fade-in-up:nth-child(2) { transition-delay: 0.1s; }
.stagger-children .fade-in-up:nth-child(3) { transition-delay: 0.2s; }
.stagger-children .fade-in-up:nth-child(4) { transition-delay: 0.3s; }
.stagger-children .fade-in-up:nth-child(5) { transition-delay: 0.4s; }

/* Skip animation for users who prefer reduced motion */
@media (prefers-reduced-motion: reduce) {
  .fade-in-up {
    opacity: 1;
    transform: none;
    transition: none;
  }
}


/* ── 21. BACK-TO-TOP ARROW ───────────────────── */

.back-to-top {
  position: fixed;
  bottom: 1.75rem;
  right: 1.75rem;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--color-cta);
  color: var(--color-white);
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: var(--shadow-md);
  opacity: 0;
  pointer-events: none;
  transform: translateY(10px);
  transition: opacity var(--transition), transform var(--transition), background var(--transition);
  z-index: 900;
}

.back-to-top.is-visible {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}

.back-to-top:hover {
  background: #5e3534;
}

.back-to-top svg {
  width: 20px;
  height: 20px;
}

@media (prefers-reduced-motion: reduce) {
  .back-to-top {
    transition: opacity var(--transition);
  }
}


/* ── 22. COOKIE-CONSENT-BANNER ─────────────────── */

.cookie-banner {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1000;
  background: var(--color-primary);
  box-shadow: 0 -4px 20px rgba(42, 42, 42, 0.12);
  transform: translateY(100%);
  transition: transform var(--transition);
}

.cookie-banner.is-visible {
  transform: translateY(0);
}

.cookie-banner__inner {
  max-width: var(--max-width);
  margin-inline: auto;
  padding: 1.25rem 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.cookie-banner__main {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.cookie-banner__text {
  flex: 1 1 320px;
  font-size: 0.88rem;
  line-height: 1.6;
  color: rgba(249, 241, 232, 0.9);
  margin: 0;
}

.cookie-banner__text a {
  color: var(--color-white);
  font-weight: 600;
  text-decoration: underline;
}

.cookie-banner__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  flex-shrink: 0;
}

.cookie-banner__settings {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  padding-top: 1rem;
  border-top: 1px solid rgba(249, 241, 232, 0.2);
}

.cookie-banner__option {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  font-size: 0.85rem;
  line-height: 1.5;
  color: rgba(249, 241, 232, 0.9);
  cursor: pointer;
}

.cookie-banner__option input {
  margin-top: 0.2rem;
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  accent-color: var(--color-cta);
}

.cookie-banner__option input:disabled {
  opacity: 0.6;
}

.cookie-banner__option strong {
  color: var(--color-white);
}

@media (max-width: 600px) {
  .cookie-banner__inner {
    padding: 1.1rem 1.25rem;
  }

  .cookie-banner__actions {
    width: 100%;
  }

  .cookie-banner__actions .btn {
    flex: 1;
    text-align: center;
  }
}

@media (prefers-reduced-motion: reduce) {
  .cookie-banner {
    transition: none;
  }
}

.footer__legal button {
  background: none;
  border: none;
  font: inherit;
  cursor: pointer;
  padding: 0;
  color: rgba(249, 241, 232, 0.6);
  transition: color var(--transition);
}

.footer__legal button:hover {
  color: var(--color-white);
}