:root {
  --yellow: #fbcf61;
  --coral: #ff6f6f;
  --green: #a8d164;
  --charcoal: #343434;
  --black: #242424;
  --muted: #c9c9c9;
  --max-width: 1100px;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  overflow-x: hidden;
  font-family: "Raleway", sans-serif;
  font-weight: 300;
  color: var(--muted);
  background: #fff;
  font-size: 16px;
  line-height: 1.5;
}

p {
  margin: 0 0 25px;
}

a {
  color: var(--black);
  text-decoration: none;
}

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

h1, h2, h3, h4, h5, h6 {
  font-family: "Raleway", sans-serif;
  font-weight: 300;
  color: var(--charcoal);
  line-height: 1.2;
  margin: 0 0 0.6em;
}

h3, h4, h5, h6 {
  font-weight: 700;
}

h2 {
  font-size: 30px;
  text-align: center;
}

.block-header {
  font-size: 60px;
  text-transform: uppercase;
  margin-bottom: 22px;
}

.wrap {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 20px;
}

/* Header */
.site-header {
  position: sticky;
  top: 0;
  z-index: 10;
  background: #fff;
}

.site-header .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-block: 20px;
  flex-wrap: wrap;
  gap: 12px;
}

.brand img {
  display: block;
  height: 32px;
}

.nav {
  display: flex;
  gap: 24px;
}

.nav a {
  color: var(--charcoal);
  font-size: 13px;
  font-weight: 300;
}

.nav a:hover {
  color: var(--coral);
}

/* DE/EN language switcher, sitting at the end of the nav row (or below
   the links when the mobile menu stacks vertically). The ::before is a
   thin divider between the nav links and the switcher — a vertical bar
   on the desktop row, flipped to a short horizontal bar above it once
   the mobile menu stacks everything vertically. */
.lang-switch {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding-left: 16px;
  position: relative;
}

.lang-switch::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 1px;
  height: 14px;
  background: currentColor;
  opacity: 0.2;
}

.lang-switch a {
  font-size: 12px;
  font-weight: 700;
  color: var(--charcoal);
  opacity: 0.4;
}

.lang-switch a.is-active {
  opacity: 1;
}

.lang-switch a:hover {
  opacity: 1;
}

.nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: space-between;
  width: 26px;
  height: 18px;
  padding: 0;
  background: none;
  border: none;
  cursor: pointer;
}

.nav-toggle span {
  display: block;
  height: 2px;
  background: var(--charcoal);
  border-radius: 1px;
}

/* Buttons */
.btn {
  display: inline-block;
  margin-top: 24px;
  padding: 16px 28px;
  background: transparent;
  border: 4px solid #fff;
  color: var(--charcoal);
  text-decoration: none;
  font-weight: 700;
  font-size: 12px;
  text-transform: uppercase;
  line-height: 1;
  transition: all 0.2s ease-in-out;
}

.btn:hover {
  background: #fff;
  color: var(--charcoal);
  border-color: #fff;
}

/* Sections */
.section {
  padding: 80px 0;
  text-align: center;
}

/* Jumping to a nav anchor (native hash jump or JS scrollIntoView)
   would otherwise land the section flush with the viewport top, right
   under the sticky header — this reserves space so the header never
   covers the top of the section. */
#services,
#philosophy,
#erfahrung,
#contact {
  scroll-margin-top: 90px;
}

.section-charcoal {
  background: var(--charcoal);
  color: var(--muted);
}

.section-charcoal h2, .section-charcoal h3, .section-charcoal h4,
.section-charcoal h5, .section-charcoal h6 {
  color: #fff;
}

.section-charcoal a {
  color: #fff;
}

.section-charcoal a:hover {
  color: var(--coral);
}

.section-black {
  background: var(--black);
  color: var(--muted);
}

.section-black h2, .section-black h3, .section-black h4,
.section-black h5, .section-black h6 {
  color: #fff;
}

.section-black a {
  color: #fff;
}

.section-black a:hover {
  color: var(--coral);
}

.section-yellow {
  background: var(--yellow);
  color: var(--charcoal);
}

.section-coral {
  background: var(--coral);
  color: var(--charcoal);
}

.section-green {
  background: var(--green);
  color: var(--charcoal);
}

.section-yellow a, .section-coral a, .section-green a {
  color: var(--charcoal);
}

.section-yellow h2, .section-coral h2, .section-green h2 {
  color: #fff;
}

/* Quote bands (not the hero, which already has its own two-tone +
   tail): same paper effect and pointed "nose" as the rest of the
   bg-colorN sections in the original. Scoped to the actual <section>
   element so it doesn't also match .hero-slide, which reuses these
   same color classes and already has its own version of this. */
section.section-coral,
section.section-green {
  position: relative;
}

section.section-coral::before,
section.section-green::before {
  content: "";
  position: absolute;
  inset: 0 0 0 50%;
  background: rgba(0, 0, 0, 0.02);
  pointer-events: none;
}

/* The tail is split down the middle too, echoing the two-tone body
   above it — a plain border-triangle can only take one color, so this
   draws the triangle as a clipped shape with a hard-stop gradient
   instead. The right half uses the same 2%-black-mix darkening as the
   body's ::before overlay, kept in sync via color-mix() rather than a
   hardcoded second color. The shape's top edge sits 2px above the
   section's own bottom edge (extra height, same `bottom` offset) so it
   overlaps the section's background instead of exactly touching it —
   without that overlap, the clip-path's anti-aliased edge leaves a
   hairline seam where the two meet. */
section.section-coral::after,
section.section-green::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -26px;
  margin-left: -38px;
  width: 76px;
  height: 28px;
  clip-path: polygon(0 0, 100% 0, 100% 2px, 50% 100%, 0 2px);
  pointer-events: none;
}

section.section-coral::after {
  background: linear-gradient(
    to right,
    var(--coral) 50%,
    color-mix(in srgb, var(--coral) 98%, black) 50%
  );
}

section.section-green::after {
  background: linear-gradient(
    to right,
    var(--green) 50%,
    color-mix(in srgb, var(--green) 98%, black) 50%
  );
}

.lead {
  max-width: 720px;
  margin: 0 auto 60px;
  font-size: 20px;
  line-height: 30px;
}

/* small centered divider under the intro paragraph, matching the
   original's .block-header + p:after */
.block-header + .lead {
  position: relative;
}

.block-header + .lead::after {
  content: "";
  position: absolute;
  bottom: -32px;
  left: 50%;
  width: 170px;
  height: 1px;
  margin-left: -85px;
  background-color: rgba(160, 160, 160, 0.5);
}

/* #services and #philosophy both have two .lead paragraphs — a
   subheadline followed by copy — styled identically: the subheadline
   is larger and undecorated, the copy is smaller and carries the
   divider at the end of the text (not right after the first
   paragraph). */
#services .lead:first-of-type,
#philosophy .lead:first-of-type {
  font-size: 22px;
  line-height: 32px;
  margin-bottom: 24px;
}

#services .lead:first-of-type::after,
#philosophy .lead:first-of-type::after {
  content: none;
}

#services .lead:last-of-type,
#philosophy .lead:last-of-type {
  position: relative;
  font-size: 17px;
  line-height: 27px;
}

#services .lead:last-of-type::after,
#philosophy .lead:last-of-type::after {
  content: "";
  position: absolute;
  bottom: -32px;
  left: 50%;
  width: 170px;
  height: 1px;
  margin-left: -85px;
  background-color: rgba(160, 160, 160, 0.5);
}

.section-yellow .lead::after,
.section-coral .lead::after,
.section-green .lead::after {
  background-color: #fff;
}

/* Hero — its height tracks the active slide's own content height (see
   main.js), smoothly animating between slides of different lengths,
   the same way the original's flexslider "smoothHeight" option works.
   A min-height is just a fallback for the instant before JS measures. */
.hero {
  position: relative;
  z-index: 0;
  min-height: 420px;
  transition: height 0.4s ease;
}

/* A crossfade where the OUTGOING layer stays fully opaque and the
   INCOMING one simply fades in on top of it (JS gives the incoming one
   a higher z-index and only resets the old one — invisibly, once it's
   fully covered — so it's ready to fade in again next time). That
   guarantees a fully opaque layer at every instant, so nothing behind
   it (the white page background here, the dark section for the tail
   below) can ever peek through mid-fade — while still reading as a
   soft overlapping dissolve, same as the original FlexSlider "fade". */
.hero-slide {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  padding: 130px 0 140px;
  opacity: 0;
  transition: opacity 2.5s ease-in-out;
  pointer-events: none;
}

.hero-slide.is-active {
  opacity: 1;
  pointer-events: auto;
}

/* two-tone paper effect: a faint tint over the right half */
.hero-slide::before {
  content: "";
  position: absolute;
  inset: 0 0 0 50%;
  background: rgba(0, 0, 0, 0.02);
  pointer-events: none;
}

/* pointed "nose" marking the transition into the next section.
   One stacked tail per color, using the exact same crossfade mechanism
   as the rectangle above (see main.js) so the two can never drift out
   of sync, and the tail — sitting directly against the dark section —
   never lets it peek through mid-fade either. */
.hero-tail {
  position: absolute;
  left: 50%;
  bottom: -26px;
  margin-left: -38px;
  width: 0;
  height: 0;
  border-left: 38px solid transparent;
  border-right: 38px solid transparent;
  border-top: 26px solid transparent;
  opacity: 0;
  transition: opacity 2.5s ease-in-out;
  pointer-events: none;
}

.hero-tail.is-active {
  opacity: 1;
}

.hero-tail[data-color="yellow"] {
  border-top-color: var(--yellow);
}

.hero-tail[data-color="coral"] {
  border-top-color: var(--coral);
}

.hero-tail[data-color="green"] {
  border-top-color: var(--green);
}

/* continue the two-tone split through the tip: tint its right half.
   A separate element (not a pseudo-element of .hero-tail) because
   .hero-tail's own border-box is a 0×0 point — percentages and
   "left" on a pseudo inside it can't reliably target its right half. */
.hero-tail-tint {
  position: absolute;
  left: 50%;
  bottom: -26px;
  width: 39px;
  height: 26px;
  border-top: 26px solid rgba(0, 0, 0, 0.02);
  border-right: 36px solid transparent;
  z-index: 999999;
  pointer-events: none;
}

.hero-slide .wrap {
  display: flex;
  align-items: center;
  gap: 40px;
  text-align: left;
  width: 100%;
}

/* The text rides the slide's own opacity fade (no opacity of its own —
   giving it one multiplies against the parent's and causes a visible
   "pop" right at the end, which is the exact bug this replaced). A
   soft, slightly-delayed settle-into-place on TRANSFORM instead gives
   the text a gentle offset feel relative to the background crossfade
   without touching opacity at all. */
.hero-copy {
  flex: 1 1 380px;
  min-width: 0;
  margin-left: -15px;
  transform: translateY(16px);
  transition: transform 1.6s ease-out;
}

.hero-slide.is-active .hero-copy {
  transform: translateY(0);
  transition-delay: 0.3s;
}

.hero-image {
  flex: 1.3 1 320px;
  min-width: 0;
  text-align: center;
}

.hero-image img {
  max-width: 100%;
  max-height: 560px;
}

.hero-dots {
  position: absolute;
  left: 50%;
  bottom: 80px;
  transform: translateX(-50%);
  display: flex;
  gap: 10px;
  z-index: 999999;
}

.hero-dot {
  width: 18px;
  height: 18px;
  padding: 0;
  border-radius: 50%;
  border: 3px solid #fff;
  background: transparent;
  cursor: pointer;
}

.hero-dot:hover,
.hero-dot.is-active {
  border-color: var(--charcoal);
}

.hero-title {
  font-size: clamp(2.2rem, 6vw, 5rem);
  font-weight: 500;
  line-height: 0.9;
  margin-bottom: 20px;
  text-transform: uppercase;
  color: #fff;
  overflow-wrap: break-word;
}

.hero-title strong {
  font-weight: 700;
  color: var(--charcoal);
}

.hero-text {
  max-width: 480px;
  font-size: 16px;
  color: var(--charcoal);
  margin-bottom: 30px;
}

/* Cards */
.cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
  margin-top: 40px;
}

.card img {
  height: 64px;
  margin-bottom: 20px;
}

.card h3 {
  font-size: 24px;
}

.card h4 {
  font-size: 18px;
}

/* Service cards: interactive on hover, like the original */
#services .card {
  display: flex;
  flex-direction: column;
  padding: 48px 20px 32px;
  background: rgba(255, 255, 255, 0.05);
  border-bottom: 8px solid var(--yellow);
  text-align: left;
  transition: background-color 0.2s ease;
}

/* Text goes left-aligned, but the icon stays centered above it —
   override the img's own alignment since it would otherwise follow
   the card's text-align like any other inline content. */
#services .card img {
  display: block;
  margin: 0 auto 20px;
}

#services .card:hover {
  background: rgba(255, 255, 255, 0.1);
}

#services .card:nth-child(2) {
  border-bottom-color: var(--coral);
}

#services .card:nth-child(3) {
  border-bottom-color: var(--green);
}

#services .card img {
  transition: transform 0.4s ease-in-out;
}

#services .card:hover img {
  transform: rotate(360deg);
}

/* small uppercase accent line under each card's text, colored to
   match that card's border-bottom accent */
.card-tag {
  margin: 0;
  margin-top: auto;
  padding-top: 20px;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--yellow);
}

#services .card:nth-child(2) .card-tag {
  color: var(--coral);
}

#services .card:nth-child(3) .card-tag {
  color: var(--green);
}

/* Positioning band — a single centered statement, no interaction */
.band-statement {
  max-width: 900px;
  margin: 0 auto 28px;
  font-size: clamp(30px, 4.4vw, 52px);
  font-weight: 700;
  line-height: 1.1;
  color: var(--charcoal);
}

.band-text {
  max-width: 900px;
  margin: 0 auto;
  font-size: 20px;
  line-height: 30px;
  color: var(--charcoal);
}

/* Profil "Hälften"-Grafik: two panels meeting with no gap (the seam
   is the point), each with a large translucent "½" watermark bottom
   right, clipped by the panel's own overflow:hidden. */
.halves {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0;
  margin-top: 40px;
}

.halves-panel {
  position: relative;
  overflow: hidden;
  padding: 40px 36px 44px;
  text-align: left;
}

.halves-panel:first-child {
  background: rgba(255, 255, 255, 0.04);
}

.halves-panel:last-child {
  background: rgba(255, 255, 255, 0.08);
}

.halves-watermark {
  position: absolute;
  right: 14px;
  bottom: -34px;
  font-size: 190px;
  line-height: 1;
  font-weight: 700;
  pointer-events: none;
}

.halves-panel:first-child .halves-watermark {
  color: rgba(251, 207, 97, 0.13);
}

.halves-panel:last-child .halves-watermark {
  color: rgba(255, 111, 111, 0.16);
}

.halves-kicker {
  position: relative;
  margin: 0 0 14px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.halves-panel:first-child .halves-kicker {
  color: var(--yellow);
}

.halves-panel:last-child .halves-kicker {
  color: var(--coral);
}

.halves-panel h4 {
  position: relative;
  color: #fff;
  margin: 0 0 14px;
  font-size: 26px;
  line-height: 1.15;
}

.halves-panel p {
  position: relative;
  margin: 0;
  font-size: 17px;
  line-height: 27px;
}

/* Bridges the two halves: full-width band directly under the panels */
.workflow-band {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 10px 32px;
  padding: 32px 36px 36px;
  background: var(--green);
  color: var(--charcoal);
  text-align: left;
}

.workflow-band .kicker {
  margin: 0 0 6px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.workflow-band h4 {
  margin: 0;
  font-size: 26px;
  line-height: 1.15;
  color: var(--charcoal);
}

.workflow-band p {
  flex: 1 1 340px;
  margin: 0;
  font-size: 17px;
  line-height: 27px;
}

/* Erfahrung: industry chips instead of client logos */
.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
  margin: 0 auto 50px;
}

.chip {
  border: 3px solid #fff;
  padding: 10px 18px;
  font-size: 14px;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--charcoal);
}

/* Two-column "Typische Projekte / Typische Rollen" list */
.info-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 32px;
  max-width: 900px;
  margin: 0 auto;
  text-align: left;
}

.info-grid h4 {
  margin: 0 0 8px;
  font-size: 18px;
  color: var(--charcoal);
}

.info-grid p {
  margin: 0;
  color: var(--charcoal);
}

/* Contact */
.contact-email span {
  display: inline-block;
  font-size: clamp(24px, 4vw, 44px);
  border: 4px solid #fff;
  font-weight: 700;
  color: var(--charcoal);
  padding: 18px clamp(20px, 5vw, 60px);
  line-height: 1;
}

.contact-email span a {
  color: var(--charcoal);
}

.contact-email span a:hover {
  color: #fff;
  cursor: pointer;
}

.termin-direct {
  margin: 30px 0 0;
  font-size: 18px;
  color: var(--charcoal);
}

.termin-direct a {
  font-weight: 700;
  color: var(--charcoal);
}

.termin-direct a:hover {
  color: #fff;
}

/* Footer */
.site-footer {
  padding: 40px 0;
  background: var(--charcoal);
  color: var(--muted);
  text-align: center;
}

.impressum {
  text-align: left;
  max-width: 720px;
  margin: 0 auto;
}

.impressum summary {
  cursor: pointer;
  font-weight: 300;
  font-size: 16px;
  color: #fff;
  text-align: center;
  margin-bottom: 16px;
}

.impressum[open] summary {
  color: var(--coral);
}

.impressum-link {
  font-weight: 300;
  font-size: 16px;
  margin-bottom: 16px;
}

.impressum-link a {
  color: #fff;
}

.impressum-link a:hover {
  color: var(--coral);
}

.copyright {
  margin-top: 24px;
  font-size: 14px;
}

@media (max-width: 767px) {
  .block-header {
    font-size: 40px;
  }
}

@media (max-width: 700px) {
  .wrap {
    padding: 0 30px;
  }

  .site-header .wrap {
    padding-block: 14px;
  }

  #services,
  #philosophy,
  #experience,
  #contact {
    scroll-margin-top: 64px;
  }

  .brand img {
    height: 26px;
  }

  .nav-toggle {
    display: flex;
  }

  .nav {
    display: none;
    flex-direction: column;
    align-items: center;
    width: 100%;
    gap: 16px;
    font-size: 0.95rem;
    padding-top: 16px;
  }

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

  .lang-switch {
    padding-left: 0;
    padding-top: 16px;
  }

  .lang-switch::before {
    left: 50%;
    top: 0;
    transform: translateX(-50%);
    width: 24px;
    height: 1px;
  }

  .hero {
    min-height: 300px;
  }

  .hero-slide {
    padding: 70px 0 100px;
  }

  .hero-slide .wrap {
    flex-direction: column;
    gap: 25px;
    text-align: center;
  }

  .hero-copy {
    flex: none;
    margin-left: 0;
    text-align: center;
  }

  .hero-image {
    flex: none;
  }

  .hero-text {
    margin-left: auto;
    margin-right: auto;
  }

  .hero-image img {
    max-height: 320px;
  }

  .hero-dots {
    bottom: 50px;
  }

  .section {
    padding: 56px 0;
  }

  /* The three "Was macht Halbnerd?" cards stay side by side down to
     this breakpoint, then stack 1:1:1 — only here, not at the tablet
     widths in between. */
  .cards {
    grid-template-columns: 1fr;
  }

  .halves,
  .info-grid {
    grid-template-columns: 1fr;
  }
}