/* ══ Angebotsseiten (Template `angebot`, siehe DEC-001) ══
   Gemeinsame Bausteine (Hero, Intro, Logo-Band, coaching-approaches, About,
   Kontakt) kommen aus index.css (DEC-002). Hier stehen nur die neuen Module. */

/* ── Logo-Name ausblenden (Name steht im Kopf) ── */
.logo-name {
  display: none;
}

/* ── Kopf: Name über der Rolle (H1), gestaltet wie der Untertitel der Startseite.
   Name und Rolle skalieren gemeinsam im Verhältnis 1:2 wie auf der Startseite. ── */
.angebot-hero .angebot-hero-name {
  font-size: min(1.78rem, 4.7cqi);
  line-height: 1.3;
  margin-bottom: 0.25rem;
}

.angebot-hero .home-hero-text {
  container-type: inline-size;
  align-self: stretch;
}

/* Rolle (H1) skaliert mit der Breite der Textspalte, damit „PRODUKTMANAGER“
   nie mitten im Wort umbricht; höchstens so groß wie auf der Startseite. */
.angebot-hero .home-hero-name {
  font-size: min(3.55rem, 9.4cqi);
  line-height: 1.05;
  hyphens: manual;
}

/* ── Dachzeile + Headline (eine H2, zwei Zeilen) ── */
.section-head {
  margin: 0 0 3rem;
  max-width: 860px;
  color: inherit;
}

.section-preline {
  display: block;
  font-family: var(--font-family-heading);
  font-weight: 800;
  font-size: 14px;
  line-height: 1.4;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  opacity: 0.72;
  margin-bottom: 0.5rem;
}

.section-headline {
  display: block;
  font-family: var(--font-family-heading);
  font-weight: 800;
  font-size: 32px;
  line-height: 1.2;
  letter-spacing: normal;
  text-transform: uppercase;
  text-wrap: balance;
  hyphens: auto;
  overflow-wrap: break-word;
}

.home-about .section-head,
.home-contact .section-head {
  margin-bottom: 1.5rem;
}

.home-contact .section-head {
  color: var(--color-dark);
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* ── Abschnitt mit Hintergrund-Schalter ──
   Farben pro Abschnitt als Variablen; Text-Orange ist für 4,5:1 Kontrast
   je Hintergrund angepasst, Striche und Buttons bleiben im Marken-Orange. */
.module {
  --m-bg: #252F37;
  --m-fg: #F0F0F1;
  --m-muted: #a0a8b0;
  --m-card: #2e3b47;
  --m-line: #3d4c5b;
  --m-card-line: #4a5a6a;
  --m-result: #fae3c3;
  --m-accent-text: #F58A62;
  --m-btn: var(--color-accent);
  --m-btn-on-card: #F58A62;
  --m-link: #fae3c3;
  width: 100vw;
  margin-left: calc(50% - 50vw);
  padding: 120px 0 4rem;
  background: var(--m-bg);
  color: var(--m-fg);
}

.module--light {
  --m-bg: #F0F0F1;
  --m-fg: #252F37;
  --m-muted: #5d6873;
  --m-card: #fff;
  --m-line: #dfe2e5;
  --m-card-line: #c9ced3;
  --m-result: #252F37;
  --m-accent-text: #B8461F;
  --m-btn: #252F37;
  --m-btn-on-card: #252F37;
  --m-link: #252F37;
}

/* Links in Modulen folgen dem Hintergrund (global ist Beige, auf Hell unlesbar) */
.module a:not(.home-btn) {
  color: var(--m-link);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.module-inner {
  max-width: 1120px;
  margin: 0 auto;
  padding: 0 var(--padding);
}

.module-intro {
  max-width: 720px;
  font-family: var(--font-family-text);
  font-size: 1rem;
  line-height: 1.8;
  margin: -1.5rem 0 3rem;
}

.module .home-btn {
  color: var(--m-btn);
  border-color: var(--m-btn);
}

.module .home-btn::after {
  border-top-color: var(--m-btn);
  background-image: repeating-linear-gradient(45deg, var(--m-btn), var(--m-btn) 1px, transparent 2px, transparent 5px);
}

.module .home-btn:hover {
  background: var(--color-accent);
  border-color: var(--color-accent);
  color: #252F37;
}

/* Kennzeile (Schritte, Perspektiven) */
.kicker {
  font-family: var(--font-family-heading);
  font-weight: 800;
  font-size: 13px;
  line-height: 1.4;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--m-muted);
  margin: 0 0 0.5rem;
}

.kicker b {
  font-weight: 800;
  color: var(--m-accent-text);
}

/* ── CTA-Fläche (Ablauf „Vor dem Start“, Zwischen-CTA) ── */
.cta-box {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem 2.5rem;
  background: var(--m-card);
  border-radius: 6px;
  padding: 1.75rem 2rem;
}

/* Text nimmt den Platz, der Button rutscht unter den Text, sobald es eng wird */
.cta-box-text,
.cta-box-lead {
  flex: 1 1 22rem;
  min-width: 0;
}

.cta-box .home-btn {
  flex: 0 1 auto;
  max-width: 100%;
}

/* Auf der Kartenfläche erreicht Marken-Orange nur 3,8:1, daher Text-Orange */
.module .cta-box .home-btn {
  color: var(--m-btn-on-card);
  border-color: var(--m-btn-on-card);
}

.module .cta-box .home-btn::after {
  border-top-color: var(--m-btn-on-card);
  background-image: repeating-linear-gradient(45deg, var(--m-btn-on-card), var(--m-btn-on-card) 1px, transparent 2px, transparent 5px);
}

.module .cta-box .home-btn:hover {
  color: #252F37;
  border-color: var(--color-accent);
}

.module .cta-box .home-btn:hover::after {
  border-top-color: #252F37;
  background-image: repeating-linear-gradient(45deg, #252F37, #252F37 1px, transparent 2px, transparent 5px);
}

.cta-box-title {
  font-family: var(--font-family-heading);
  font-weight: 800;
  font-size: 22px;
  text-transform: uppercase;
  margin: 0 0 0.5rem;
}

.cta-box p {
  font-family: var(--font-family-text);
  font-size: 1rem;
  line-height: 1.7;
  margin: 0;
}

.cta-box .cta-box-lead {
  font-size: 1.15rem;
  line-height: 1.6;
}


.module .cta-box:not(.cta-box--after-cards) {
  margin-bottom: 4rem;
}

.cta-box--after-cards {
  margin-top: 1.5rem;
}

/* ── Ablauf ── */
.steps {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 3rem;
  margin: 0;
  padding: 0;
}

.step {
  list-style: none;
  border-top: 2px solid currentColor;
  padding-top: 1.25rem;
}

.step-title {
  font-family: var(--font-family-heading);
  font-weight: 800;
  font-size: 22px;
  line-height: 1.25;
  text-transform: uppercase;
  hyphens: auto;
  margin: 0 0 0.75rem;
}

.step-text {
  font-family: var(--font-family-text);
  font-size: 1rem;
  line-height: 1.7;
  margin: 0;
}

/* ── Karten (Anlässe, Mandate, Vergleich) ──
   Subgrid: Jede Karte belegt alle Zeilen des Rasters, damit Titel, Listen
   und Trennlinien über die Karten auf einer Höhe stehen. */
.cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-template-rows: repeat(var(--card-rows), auto);
  gap: 1.5rem;
}

/* Lange Wörter dürfen die Karte nicht sprengen; Silbentrennung nur in Titel und Kennzeilen */
.card {
  min-width: 0;
  overflow-wrap: break-word;
  display: grid;
  grid-row: span var(--card-rows);
  grid-template-rows: subgrid;
  row-gap: 0;
  align-content: start;
  background: var(--m-card);
  border-top: 3px solid var(--m-card-line);
  border-radius: 6px;
  padding: 1.75rem 1.75rem 2rem;
}

.card--highlight {
  border-top-color: var(--color-accent);
}

.card-tag,
.card-meta {
  hyphens: auto;
}

.card-tag {
  font-family: var(--font-family-heading);
  font-weight: 800;
  font-size: 13px;
  line-height: 1.4;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--m-accent-text);
  margin: 0 0 0.35rem;
}

.card-title {
  font-family: var(--font-family-heading);
  font-weight: 800;
  font-size: 22px;
  line-height: 1.25;
  text-transform: uppercase;
  hyphens: auto;
  overflow-wrap: break-word;
  margin: 0 0 0.75rem;
}

.card-title + .card-meta {
  margin-top: -0.3rem;
}

.card-meta {
  font-family: var(--font-family-heading);
  font-weight: 800;
  font-size: 12px;
  line-height: 1.4;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--m-muted);
  margin: 0 0 1.1rem;
}

.card-role {
  font-family: var(--font-family-text);
  font-weight: 700;
  font-size: 1rem;
  line-height: 1.65;
  margin: 0 0 1.25rem;
}

.card-text p {
  font-family: var(--font-family-text);
  font-size: 1rem;
  line-height: 1.67;
  margin: 0;
}

.card-text p + p {
  margin-top: 1rem;
}

.card-list {
  display: grid;
  gap: 0.55rem;
  align-content: start;
  margin: 0;
  padding: 0;
}

.card-list li {
  list-style: none;
  position: relative;
  padding-left: 1.4rem;
  font-family: var(--font-family-text);
  font-size: 1rem;
  line-height: 1.6;
}

.card-list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.78em;
  width: 0.7rem;
  height: 2px;
  background: var(--color-accent);
}

.card-result {
  font-family: var(--font-family-text);
  font-style: italic;
  font-size: 1rem;
  line-height: 1.67;
  color: var(--m-result);
  border-top: 1px solid var(--m-line);
  margin: 1.5rem 0 0;
  padding-top: 1.25rem;
}

.card-rows {
  display: contents;
}

.card-rows dt {
  font-family: var(--font-family-heading);
  font-weight: 800;
  font-size: 12px;
  line-height: 1.4;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--m-muted);
  border-top: 1px solid var(--m-line);
  padding-top: 1rem;
  margin-bottom: 0.35rem;
}

.card-rows dd {
  font-family: var(--font-family-text);
  font-size: 1rem;
  line-height: 1.6;
  margin: 0;
  padding-bottom: 1rem;
}

/* ── Perspektiven (coaching-approaches aus index.css) ── */
.perspectives {
  margin-bottom: 0;
  gap: 3.5rem 4rem;
}

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

.perspectives--3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 3rem 4rem;
}

.module .coaching-approach-title,
.module .coaching-approach-text,
.module .coaching-approach-text a {
  color: var(--m-fg);
}

.perspectives--3 .coaching-approach-title {
  font-size: 20px;
  margin-bottom: 0.5rem;
}

/* ── Häufige Fragen ── */
.faq {
  display: grid;
  gap: 0.75rem;
  max-width: 820px;
}

.faq-item {
  background: var(--m-card);
  border-radius: 6px;
}

.faq-item[open] {
  box-shadow: inset 0 3px 0 var(--color-accent);
}

.faq-item summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1.5rem;
  padding: 1.35rem 1.75rem;
  font-family: var(--font-family-heading);
  font-weight: 800;
  font-size: 18px;
  line-height: 1.35;
  text-transform: uppercase;
}

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

.faq-item summary::after {
  content: '+';
  flex-shrink: 0;
  font-family: var(--font-family-heading);
  font-weight: 800;
  font-size: 28px;
  line-height: 1;
  color: var(--m-accent-text);
}

.faq-item[open] summary::after {
  content: '–';
}

.faq-item summary:focus-visible {
  outline: 2px solid var(--m-result);
  outline-offset: 3px;
  border-radius: 6px;
}

.faq-answer {
  padding: 0 1.75rem 1.5rem;
  max-width: 68ch;
}

.faq-answer p {
  font-family: var(--font-family-text);
  font-size: 1rem;
  line-height: 1.7;
  margin: 0;
}

.faq-answer p + p {
  margin-top: 1rem;
}

/* ── Responsive: Tablet (≤960px) ── */
@media screen and (max-width: 960px) {
  .steps {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 2.5rem 2rem;
  }

  .cards {
    grid-template-columns: 1fr;
    grid-template-rows: none;
    max-width: 640px;
  }

  .card {
    grid-row: auto;
    grid-template-rows: none;
  }

  .perspectives--2 {
    grid-template-columns: 1fr;
    gap: 2.5rem;
  }

  .perspectives--3 {
    gap: 2rem;
  }
}

/* ── Responsive: Mobile (≤600px) ── */
@media screen and (max-width: 600px) {
  .module {
    padding-top: 4rem;
  }

  .section-headline {
    font-size: 26px;
  }

  .section-head {
    margin-bottom: 2rem;
  }

  .steps,
  .perspectives--3 {
    grid-template-columns: 1fr;
    gap: 2rem;
  }

  .cta-box {
    padding: 1.5rem;
  }

  .faq-item summary {
    padding: 1.2rem 1.25rem;
    font-size: 16px;
  }

  .faq-answer {
    padding: 0 1.25rem 1.25rem;
  }
}