/* ============================================================
   MWE — Business (Landingpage)
   Seitenspezifische Styles für /business/.
   Kein @import — design-system.css wird per <link> in index.html geladen.
   ============================================================ */

/* ---- Business-Akzentfarbe ---- */
:root {
  --bus-accent: var(--blue-standard);
  --container-max: 1360px; /* gleiche Breite wie .site-header .container */
}

#szenarien,
#situation {
  --bfarbe: var(--blue-standard);
  --bfarbe-light: var(--blue-light);
  --bfarbe-dark: var(--blue-dark);
}

#szenarien .manufaktur-headline {
  margin-bottom: var(--space-lg);
}

/* ============================================================
   ZITAT — analog Dachseite
   ============================================================ */

#zitat {
  position: relative;
  z-index: 0;
  padding: 9rem 0;
  color: var(--white);
  overflow: hidden;
}
#zitat::after {
  content: "";
  position: absolute;
  inset: -12px;
  background-image:
    linear-gradient(color-mix(in srgb, var(--blue-standard) 60%, transparent), color-mix(in srgb, var(--blue-standard) 60%, transparent)),
    linear-gradient(var(--blue-standard), var(--blue-standard)),
    url('../assets/grafiken/graphik-gruen-blau.png');
  background-size: auto, auto, cover;
  background-position: center;
  background-repeat: no-repeat;
  background-blend-mode: normal, color, normal;
  filter: blur(6px);
  z-index: -1;
}

.quote-block {
  position: relative;
  z-index: 1;
  max-width: 800px;
  margin: 0 auto;
  padding: 0.5rem 0;
}

.quote-block p {
  font-family: var(--font-headline);
  font-size: clamp(1.5rem, 2.8vw, 2.2rem);
  font-weight: 700;
  font-style: italic;
  line-height: 1.45;
  color: var(--white);
  margin-bottom: var(--space-md);
}

.quote-attribution {
  font-family: var(--font-body);
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--white);
  letter-spacing: 0.06em;
}

/* ============================================================
   TEST — HERO 2, luftig, kleines Bild rechts
   ============================================================ */

.hero2 {
  padding: 5rem 0;
  background: var(--white);
}

@media (min-width: 769px) {
  /* Gleiche Höhe/Innenabstand wie .hero (Dachseite/Soziales) —
     einheitliches Hero-Erscheinungsbild auf allen drei Seiten. */
  .hero2 {
    padding: calc(3.5rem + 50px) 0 var(--space-xl);
    min-height: calc(78vh - var(--header-height));
    display: flex;
    align-items: center;
  }

  /* Stacking-Scroll: nur das Zitat bleibt sticky unter dem Header stehen und
     wird von der nächsten Section (#szenarien, eigener deckender Hintergrund)
     überlagert. Alle anderen Sections scrollen normal weg — kein z-index
     nötig, da spätere Sections durch die DOM-Reihenfolge automatisch über
     den früheren liegen. Weitere Sections werden nur auf ausdrücklichen
     Wunsch ebenfalls sticky gemacht.

     Wichtig: .section braucht trotzdem "position: relative" (ohne top/sticky).
     Sonst ist #zitat als einziges positioniertes Element automatisch in einer
     eigenen Stacking-Ebene, die IMMER nach allen unpositionierten Elementen
     gemalt wird — dadurch würde das Zitat alle folgenden Sections überdecken,
     statt umgekehrt (DOM-Reihenfolge greift nur innerhalb derselben Ebene). */
  .section {
    position: relative;
  }
  #zitat {
    position: sticky;
    top: var(--header-height);
  }

  /* Szenarien: Inhalt vertikal in der vollen Section-Höhe zentrieren */
  #szenarien {
    min-height: calc(100vh - var(--header-height));
    display: flex;
    align-items: center;
  }

  /* #zitat bleibt sticky bis zum Seitenende — alle Sections ab #szenarien
     tragen bereits "section--contact" (Weiß) direkt im Markup, daher ist
     hier kein zusätzlicher deckender Hintergrund mehr nötig. */
}

.hero2-inner {
  display: grid;
  grid-template-columns: 65fr 35fr;
  /* Bild fluchtet oben mit der Eyebrow (erste Zeile "top"), gleiche
     Technik wie .hero-inner in design-system.css. */
  grid-template-areas:
    "top   photo"
    "bot   photo";
  column-gap: var(--space-xl);
  row-gap: 0;
}

.hero2-text-top    { grid-area: top; align-self: start; }
.hero2-image       { grid-area: photo; align-self: start; }
.hero2-text-bottom { grid-area: bot; align-self: start; }

.hero2-text-top .hero-eyebrow {
  color: var(--green-standard);
}

.hero2-image .portrait-photo {
  width: 100%;
  border-radius: 0;
}

/* Header- und Hero-Buttons eckig (nur Business-Seite) */
.site-header .btn,
.hero2 .btn {
  border-radius: 0;
}

/* Szenario-Kästen eckig (Flip-Effekt kommt aus design-system.css) */
.scenario-card-face {
  border-radius: 0;
}

/* Klarheit-Kästen eckig und ohne Rand, Button eckig */
.klarheit-themen li {
  border: none;
  border-radius: 0;
}

#klarheit .btn {
  border-radius: 0;
}

/* Klarheit: weniger Weißraum um die Kästen, Lead-Text schmaler */
#klarheit .klarheit-grid {
  margin: var(--space-md) 0;
}

#klarheit .klarheit-lead {
  max-width: 66.6667%;
}

/* Leistungen-Kästen ca. 20px flacher (bei üblicher Container-Breite) */
.leistungen-stage {
  aspect-ratio: 2.07 / 1;
}

/* Expandierte Leistungen-Ansicht: Kästen eckig und ohne Rand, Button eckig */
.leistungen-expanded-text,
.leistungen-expanded-themen {
  border: none;
  border-radius: 0;
}

.leistungen-expanded-cta .btn {
  border-radius: 0;
}

/* Pfeil-Pill nimmt trotz opacity:0 im Ruhezustand noch Platz ein (fehlendes
   max-height wie bei .leistungen-short/-subline) — dadurch sitzt die
   Überschrift höher als beabsichtigt. Nur Desktop, Mobil hat eigene Regeln. */
@media (min-width: 769px) {
  .leistungen-arrow {
    max-height: 0;
    margin-top: 0;
    overflow: hidden;
    transition: opacity 0.25s ease, transform 0.25s ease, background 0.2s ease, color 0.2s ease,
                max-height 0.45s cubic-bezier(0.4, 0, 0.2, 1), margin-top 0.45s cubic-bezier(0.4, 0, 0.2, 1);
  }
  .leistungen-card:hover .leistungen-arrow {
    max-height: 40px;
    margin-top: calc(0.5rem + 10px);
  }
}

/* "Warum die Manufaktur zu Dir passt" — 2x3 Begriffs-Reihen, grün/blau,
   konsequent eckig (kein border-radius). */
.warum-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-md);
  text-align: left;
  margin: var(--space-lg) 0;
}
.warum-grid + .warum-divider,
.warum-divider + .warum-grid { margin-top: 0; }
.warum-col {
  position: relative;
  background: var(--white);
  border: 1px solid var(--gray-standard);
  border-left: none;
  padding: var(--space-lg) var(--space-md) var(--space-lg) calc(var(--space-md) + 7px);
  overflow: hidden;
  transition: background 0.2s ease;
}
.warum-col:hover {
  background: var(--gray-light);
}
.warum-bar {
  position: absolute;
  top: 0;
  left: 0;
  width: 7px;
  height: 100%;
  overflow: hidden;
  line-height: 0;
}
.warum-bar img {
  position: absolute;
  top: 50%;
  left: 50%;
  height: 7px;
  width: auto;
  max-width: none;
  transform: translate(-50%, -50%) rotate(90deg);
}
.warum-marker {
  display: block;
  width: 24px;
  height: 2px;
  background: var(--green-standard);
  margin-bottom: 0.6rem;
}
.warum-term {
  font-size: clamp(1.4rem, 2.2vw, 1.75rem);
  font-weight: 700;
  color: var(--anthracite);
  margin-bottom: 0.4rem;
}
.warum-col p {
  font-size: 0.95rem;
  line-height: 1.6;
  color: var(--anthracite);
  margin: 0;
}
.warum-divider {
  width: 40px;
  height: 3px;
  margin: 2.5rem auto;
  background: linear-gradient(to right, var(--green-standard) 50%, var(--blue-standard) 50%);
}

@media (max-width: 768px) {
  .warum-grid {
    grid-template-columns: 1fr;
    gap: var(--space-md);
  }
}

/* ============================================================
   WIRKUNG — drei Boxen untereinander, Stil analog .warum-col
   (Farbstreifen links + grauer Rahmen, s. "in guten Händen")
   ============================================================ */

#wirkung {
  padding: 9rem 0;
}

.wirkung-columns {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-md);
  margin-top: var(--space-lg);
  text-align: left;
}

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

.wirkung-col {
  position: relative;
  background: var(--white);
  border: 1px solid var(--gray-standard);
  border-left: none;
  padding: var(--space-lg) var(--space-md) var(--space-lg) calc(var(--space-md) + 7px);
  overflow: hidden;
  transition: background 0.2s ease;
}
.wirkung-col:hover {
  background: var(--gray-light);
}
.wirkung-bar {
  position: absolute;
  top: 0;
  left: 0;
  width: 7px;
  height: 100%;
  overflow: hidden;
  line-height: 0;
}
.wirkung-bar img {
  position: absolute;
  top: 50%;
  left: 50%;
  height: 7px;
  width: auto;
  max-width: none;
  transform: translate(-50%, -50%) rotate(90deg);
}

.wirkung-kicker {
  font-family: var(--font-body);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--bus-accent);
  margin-bottom: 0.75rem;
}

.wirkung-punchline {
  font-family: var(--font-headline);
  font-size: clamp(1.5rem, 2vw, 1.9rem);
  font-weight: 700;
  color: var(--anthracite);
  line-height: 1.3;
  margin-bottom: 0.75rem;
}

.wirkung-subline {
  font-size: 1rem;
  color: var(--anthracite);
  line-height: 1.6;
}

@media (max-width: 1024px) {
  .hero2-inner {
    column-gap: var(--space-lg);
  }
}

@media (max-width: 768px) {
  .hero2-inner {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto auto;
    grid-template-areas:
      "top"
      "photo"
      "bot";
    row-gap: 0.75rem;
  }

  .hero2-text-bottom {
    margin-top: var(--space-md);
  }
}

/* ============================================================
   BRUSH-UNDERLINE — blaue Variante des Pinselstrichs
   ============================================================ */

.brush-underline {
  background-image: url("data:image/svg+xml,%3Csvg preserveAspectRatio='none' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 230 20'%3E%3Cpath d='M2 12 C10 9.5,28 8,48 9 C62 10,78 7,100 8.5 C118 10,138 7.5,162 9 C180 10,200 8,220 9.5 C225 10,228 10.5,229 11 L229 12.5 C222 14,208 15,185 14.5 C160 14,135 15.5,108 14.5 C82 13.5,60 15,38 14 C22 13.5,10 13.5,2 13.5 Z' fill='%23547B96'/%3E%3C/svg%3E");
}

/* Hero-Headline-Unterstreichung bleibt grün */
.brush-underline--brand {
  background-image: url("data:image/svg+xml,%3Csvg preserveAspectRatio='none' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 230 20'%3E%3Cpath d='M2 12 C10 9.5,28 8,48 9 C62 10,78 7,100 8.5 C118 10,138 7.5,162 9 C180 10,200 8,220 9.5 C225 10,228 10.5,229 11 L229 12.5 C222 14,208 15,185 14.5 C160 14,135 15.5,108 14.5 C82 13.5,60 15,38 14 C22 13.5,10 13.5,2 13.5 Z' fill='%23699756'/%3E%3C/svg%3E");
}

/* ============================================================
   BUTTONS — alle auf Blau, außer .header-cta (bleibt grün)
   ============================================================ */

.btn-primary {
  background: var(--blue-standard);
  border-color: var(--blue-standard);
}

.btn-primary:hover {
  background: var(--blue-dark);
  border-color: var(--blue-dark);
}

/* Ausnahme: Haupt-CTA im Header bleibt grün */
.header-cta {
  background: var(--green-standard);
  border-color: var(--green-standard);
  color: var(--white);
}

.header-cta:hover {
  background: var(--green-dark);
  border-color: var(--green-dark);
}

.btn-outline {
  color: var(--blue-standard);
  border-color: var(--blue-standard);
}

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

/* ---- Outline-Button auf dunklem Grund ---- */
.btn-outline-light {
  background: transparent;
  border: 2px solid rgba(255, 255, 255, 0.5);
  color: var(--white);
  transition: background 0.2s, border-color 0.2s;
}

.btn-outline-light:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.8);
  color: var(--white);
}

/* ============================================================
   FOOTER — blaue Akzente statt grün
   ============================================================ */

.footer-nav-title,
.footer-contact-title {
  color: var(--blue-light);
}

.footer-nav a:hover {
  color: var(--blue-light);
}

.footer-legal a:hover {
  color: var(--blue-light);
}

/* ============================================================
   HERO
   ============================================================ */

.hero-eyebrow { color: var(--bus-accent); }

/* Eyebrow auf dunklem Abschnitt (CTA) etwas heller */
.section--dark .hero-eyebrow { color: var(--blue-light); }

/* Marken-Eyebrow im Hero (MWE-Zeile) bleibt grün */
.hero-eyebrow--brand { color: var(--green-standard); }

/* ============================================================
   ÜBER-MICH — blauer Trennstrich
   ============================================================ */

.about-divider { background: var(--blue-standard); }

/* ============================================================
   TRUST-KARTEN — blaue Icons und Headlines
   ============================================================ */

.trust-card-icon  { color: var(--bus-accent); }
.trust-card h3    { color: var(--blue-dark); }

/* ============================================================
   SCHRITTE — blauer Hintergrund statt grün, eckig
   ============================================================ */

.step {
  position: relative;
  z-index: 0;
  overflow: hidden;
  background: none;
  border-radius: 0;
}
.step:nth-child(1)::after { background-position: left top; }
.step:nth-child(2)::after { background-position: center; }
.step:nth-child(3)::after { background-position: right bottom; }
.step::after {
  content: "";
  position: absolute;
  inset: -12px;
  background-image:
    linear-gradient(color-mix(in srgb, var(--blue-standard) 60%, transparent), color-mix(in srgb, var(--blue-standard) 60%, transparent)),
    linear-gradient(var(--blue-standard), var(--blue-standard)),
    url('../assets/grafiken/graphik-gruen-blau.png');
  background-size: auto, auto, cover;
  background-repeat: no-repeat;
  background-blend-mode: normal, color, normal;
  filter: blur(6px);
  z-index: -1;
}

.schritte-closing {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 1rem;
  margin-top: var(--space-lg);
}
.schritte-closing .btn {
  border-radius: 0;
}

/* ============================================================
   ANGEBOTS-KARTEN — blaue Akzente
   ============================================================ */

.offer-card-icon  { background: rgba(84, 123, 150, 0.12); color: var(--bus-accent); }
.offer-card-num   { color: var(--bus-accent); }
.offer-card h3    { color: var(--blue-dark); }

/* ============================================================
   TAG-CLOUD — Themenfeld-Pills unter der Checkliste im Hero
   Neue Komponente, ausschließlich aus bestehenden Tokens abgeleitet.
   ============================================================ */

.tag-cloud {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 2rem;
}

.tag-pill {
  font-family: var(--font-body);
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--blue-standard);
  background: rgba(84, 123, 150, 0.1);   /* blue-standard @ 10% */
  border: 1px solid rgba(84, 123, 150, 0.22);
  border-radius: 0;
  padding: 0.28rem 0.75rem;
  line-height: 1.4;
  letter-spacing: 0.02em;
  white-space: nowrap;
}


/* ============================================================
   KUNDENSTIMMEN — Zitat-Karussell
   ============================================================ */

.testimonial-carousel {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: calc(var(--space-md) + 40px);
  margin-top: var(--space-lg);
}
.testimonial-nav {
  width: 38px;
  height: 38px;
  flex-shrink: 0;
  padding: 0;
  line-height: 1;
  border: 1px solid var(--gray-standard);
  background: transparent;
  color: var(--anthracite);
  font-size: 1.2rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: border-color 0.2s, color 0.2s;
}
.testimonial-nav:hover {
  border-color: var(--green-standard);
  color: var(--green-standard);
}
.testimonial-content {
  max-width: 660px;
  min-height: 140px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.testimonial-quote {
  font-family: var(--font-headline);
  font-style: italic;
  font-weight: 700;
  font-size: clamp(1.1rem, 2vw, 1.35rem);
  line-height: 1.6;
  color: var(--anthracite);
  margin-bottom: 1rem;
}
.testimonial-meta {
  color: var(--green-standard);
  font-weight: 700;
  font-size: 0.95rem;
  margin: 0;
}
.testimonial-counter {
  color: var(--anthracite);
  font-size: 0.8rem;
  margin-top: var(--space-sm);
}
@media (max-width: 600px) {
  .testimonial-carousel { gap: var(--space-sm); }
  .testimonial-nav { width: 32px; height: 32px; font-size: 1rem; }
}

/* ============================================================
   KONTAKTFORMULAR — von der Dachseite übernommen (style.css lädt
   die Business-Seite nicht, daher hier dupliziert)
   ============================================================ */

.contact-lead {
  text-align: center;
  font-size: 1rem;
  color: var(--anthracite);
  max-width: 600px;
  margin: 0 auto var(--space-lg);
  line-height: 1.7;
}

.contact-box {
  background: var(--gray-light);
  border-radius: 0;
  padding: var(--space-lg);
}

.contact-inner {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: var(--space-xl);
  align-items: start;
}

.contact-details {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
  gap: var(--space-md);
}

.contact-portrait {
  width: 110px;
  aspect-ratio: 4 / 5;
  height: auto;
  border-radius: 0;
  object-fit: cover;
  object-position: center 15%;
}

.contact-info {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.contact-org {
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--green-standard);
}

.contact-name {
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 700;
  color: var(--anthracite);
}

.contact-info address {
  font-style: normal;
  font-size: 1rem;
  color: var(--anthracite);
  line-height: 1.6;
  display: flex;
  flex-direction: column;
  gap: 0;
}

.contact-link {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--green-dark);
  text-decoration: none;
  font-size: 1rem;
  margin-top: 0.75rem;
}

.contact-link:hover {
  text-decoration: underline;
}

.contact-link + .contact-link {
  margin-top: 0.4rem;
}

.contact-form {
  background: transparent;
  padding: 0;
}

.contact-honeypot {
  opacity: 0;
  position: absolute;
  pointer-events: none;
  height: 0;
}

.required-mark {
  color: var(--green-standard);
  font-weight: 700;
}

.form-privacy {
  margin-top: var(--space-sm);
  font-size: 0.82rem;
  color: var(--anthracite);
  line-height: 1.6;
}

.form-privacy a {
  color: var(--green-dark);
  text-decoration: underline;
}

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

.form-field {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  margin-bottom: var(--space-md);
}

.form-row .form-field {
  margin-bottom: 0;
}

.form-row + .form-field,
.form-row + .form-row {
  margin-top: var(--space-md);
}

.form-field label {
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--anthracite);
  letter-spacing: 0.02em;
}

.form-field input,
.form-field textarea {
  font-family: var(--font-body);
  font-size: 1rem;
  padding: 0.7rem 1rem;
  border: 1.5px solid var(--gray-standard);
  border-radius: 0;
  color: var(--anthracite);
  background: var(--white);
  transition: border-color 0.2s;
  resize: vertical;
}

.form-field input:focus,
.form-field textarea:focus {
  outline: none;
  border-color: var(--green-standard);
  box-shadow: 0 0 0 3px rgba(105, 151, 86, 0.12);
}

.form-field input::placeholder,
.form-field textarea::placeholder {
  color: var(--gray-standard);
}

.form-actions {
  margin-top: var(--space-md);
  display: flex;
  align-items: center;
  gap: var(--space-md);
  flex-wrap: wrap;
}
.form-actions .btn {
  border-radius: 0;
}

.optional {
  font-weight: 400;
  color: var(--anthracite);
}

@media (max-width: 768px) {
  .form-row {
    grid-template-columns: 1fr;
  }

  .form-row + .form-row {
    margin-top: 0;
  }

  .contact-inner {
    grid-template-columns: 1fr;
  }

  .contact-form {
    padding: var(--space-md);
  }

  .form-actions {
    flex-direction: column;
    align-items: flex-start;
  }
}