: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);
}

.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 {
  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;
  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);
}

/* Quotes */
.quote-group {
  position: relative;
  overflow: hidden;
}

.quote {
  position: relative;
  margin: 0 auto;
  max-width: 950px;
  font-size: 60px;
  font-weight: 700;
  line-height: 1;
  color: var(--charcoal);
}

/* big decorative quotation marks flanking the text, like the
   original's fontello glyphs either side of .carousel-introtext.
   Sitting inline on the <p> (rather than absolutely on the box) means
   the opening mark always lands a few pixels before the first
   character and the closing mark the same few pixels after the last
   character — wrapping naturally onto the last line with the text —
   instead of being pinned to the fixed corners of a centered, variable-
   length line. */
.quote p::before,
.quote p::after {
  font-size: 1.8em;
  font-weight: 700;
  color: #fff;
}

/* The mark is much taller than the text, so its line grows well beyond
   the text's own line-height. Anchoring the opening mark to the BOTTOM
   of its line lets that extra height grow upward — harmless, since
   it's the first line and nothing sits above it. Anchoring the closing
   mark to the TOP of its line lets its extra height grow downward
   instead, so it never bleeds up into the line above it. */
.quote p::before {
  content: "\201C";
  margin-right: 6px;
  vertical-align: bottom;
}

.quote p::after {
  content: "\201D";
  margin-left: 6px;
  vertical-align: top;
}

/* All quotes stay in the layout (position:absolute, stacked) instead of
   display:none, so their natural heights are always measurable — JS
   uses that to pin .quote-group to the tallest one's height, so the
   band never resizes/jumps as you click through different-length
   quotes, matching the original's fixed-height Bootstrap carousel. */
.quote-group .quote {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  opacity: 0;
  visibility: hidden;
  transform: translateX(0);
}

.quote-group .quote.is-active {
  opacity: 1;
  visibility: visible;
}

/* Only applied while JS is actively driving a slide, so the resting
   0%/off-screen positions set between transitions never animate into
   view on their own. */
.quote-group .quote.is-sliding {
  transition: transform 0.6s ease;
}

.quote cite {
  display: block;
  margin-top: 40px;
  font-size: 40px;
  font-style: normal;
  font-weight: 300;
  color: #fff;
}

/* prev/next controls for the rotating quote-group */
.quote-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  padding: 8px;
  font-size: 40px;
  line-height: 1;
  color: #fff;
  opacity: 0.8;
  cursor: pointer;
  z-index: 1;
}

.quote-nav:hover {
  opacity: 1;
}

.quote-prev {
  left: 0;
}

.quote-next {
  right: 0;
}

/* 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);
}

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

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

  .quote {
    font-size: 35px;
  }
}

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

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

  #services,
  #philosophy,
  #erfahrung,
  #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;
  }

  .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;
  }

  /* Text ran edge-to-edge into the prev/next arrows once the .wrap
     padding shrank on mobile — give the quote its own side padding so
     centered lines never reach as far as the arrows sitting at the
     quote-group's left:0/right:0. */
  .quote {
    padding: 0 40px;
  }

  .quote-nav {
    font-size: 28px;
    padding: 6px;
  }
}