/*
 * bausteine.css
 * ─────────────────────────────────────────────────────────────────
 * Wiederverwendbare Design-Elemente, die auf mehreren Seiten vorkommen.
 * Mobile First – alle Elemente wachsen mit dem Bildschirm mit.
 *
 * Enthält:
 *   1. Sektions-Container (Hintergründe, Abstände)
 *   2. Handschrift-Seitentitel
 *   3. Kategorie-Labels
 *   4. Buttons und CTAs
 *   5. Hero-Bereiche (Vollbreite mit Hintergrundbild)
 *   6. Zweispaltiges Layout
 *   7. Coaching-Karten
 *   8. Karten-Raster
 *   9. Statement-Banner
 *  10. Seiten-Intro (Seitentitel + Untertitel)
 *  11. Bild-Overlay-Sektion (ARE YOU READY-Banner)
 *  12. Dunkle CTA-Sektion (schwarzer Hintergrund)
 * ─────────────────────────────────────────────────────────────────
 */


/* ════════════════════════════════════════
   1. SEKTIONS-CONTAINER
════════════════════════════════════════ */

/* Basis-Sektion: Innenabstand oben/unten + seitliche Begrenzung */
.nc-sektion {
  padding-top: var(--sektion-y-s);     /* Mobil: 40px */
  padding-bottom: var(--sektion-y-s);
  padding-left: var(--aussen-mobil);
  padding-right: var(--aussen-mobil);
}

.nc-sektion > .nc-sektion-innen {
  max-width: var(--max-breite);
  margin: 0 auto;
}

/* Hintergrundfarben */
.nc-sektion--weiss  { background-color: var(--weiss); }
.nc-sektion--grau   { background-color: var(--hellgrau); }
.nc-sektion--dunkel {
  background-color: var(--schwarz);
  color: var(--weiss);
}
.nc-sektion--dunkel h1,
.nc-sektion--dunkel h2,
.nc-sektion--dunkel h3 {
  color: var(--weiss);
}

@media (min-width: 768px) {
  .nc-sektion {
    padding-top: var(--sektion-y-m);     /* 70px */
    padding-bottom: var(--sektion-y-m);
    padding-left: var(--aussen-tablet);
    padding-right: var(--aussen-tablet);
  }
}

@media (min-width: 1024px) {
  .nc-sektion {
    padding-top: var(--sektion-y-l);     /* 100px */
    padding-bottom: var(--sektion-y-l);
    padding-left: var(--aussen-desktop);
    padding-right: var(--aussen-desktop);
  }
}

/* Gutenberg: Gruppe-Block als nc-sektion nutzen */
.wp-block-group.nc-sektion,
.wp-block-group.nc-sektion--weiss,
.wp-block-group.nc-sektion--grau,
.wp-block-group.nc-sektion--dunkel {
  padding-top: var(--sektion-y-s);
  padding-bottom: var(--sektion-y-s);
  padding-left: var(--aussen-mobil);
  padding-right: var(--aussen-mobil);
}

@media (min-width: 768px) {
  .wp-block-group.nc-sektion,
  .wp-block-group.nc-sektion--weiss,
  .wp-block-group.nc-sektion--grau,
  .wp-block-group.nc-sektion--dunkel {
    padding-top: var(--sektion-y-m);
    padding-bottom: var(--sektion-y-m);
    padding-left: var(--aussen-tablet);
    padding-right: var(--aussen-tablet);
  }
}

@media (min-width: 1024px) {
  .wp-block-group.nc-sektion,
  .wp-block-group.nc-sektion--weiss,
  .wp-block-group.nc-sektion--grau,
  .wp-block-group.nc-sektion--dunkel {
    padding-top: var(--sektion-y-l);
    padding-bottom: var(--sektion-y-l);
    padding-left: var(--aussen-desktop);
    padding-right: var(--aussen-desktop);
  }
}


/* ════════════════════════════════════════
   2. HANDSCHRIFT-SEITENTITEL
════════════════════════════════════════ */

.nc-schreibschrift {
  font-family: var(--font-schreibschrift);
  font-weight: 400;
  font-style: normal;
  line-height: 1;
  color: var(--schwarz);
  display: block;
  margin-bottom: 16px;

  /* Mobil: 52px */
  font-size: var(--fs-script);
}

@media (min-width: 768px) {
  .nc-schreibschrift {
    font-size: 64px;
    margin-bottom: 20px;
  }
}

@media (min-width: 1024px) {
  .nc-schreibschrift {
    font-size: 76px;
    margin-bottom: 24px;
  }
}


/* ════════════════════════════════════════
   3. KATEGORIE-LABELS
════════════════════════════════════════ */

.nc-label {
  display: block;
  font-family: var(--font-sans);
  font-size: var(--fs-label);     /* 10px */
  font-weight: 500;
  letter-spacing: var(--ls-label); /* 0.20em */
  text-transform: uppercase;
  color: var(--textgrau);
  margin-bottom: 12px;
}

/* Label auf dunklem Hintergrund */
.nc-sektion--dunkel .nc-label,
.nc-hero .nc-label,
.nc-karte .nc-label {
  color: var(--weiss-60);
}


/* ════════════════════════════════════════
   4. BUTTONS UND CTAs
════════════════════════════════════════ */

/* ── Stil 1: Nur Text mit Unterstrich (Hauptstil) ── */
.nc-btn-text {
  display: inline-block;
  font-family: var(--font-sans);
  font-size: var(--fs-button);    /* 11px */
  font-weight: 400;
  letter-spacing: var(--ls-button); /* 0.12em */
  text-transform: uppercase;
  color: var(--schwarz);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 2px 0;
  transition: opacity var(--transition-standard);
}

.nc-btn-text:hover,
.nc-btn-text:focus {
  opacity: 0.55;
  text-decoration: underline;
}

/* Auf dunklem Hintergrund */
.nc-sektion--dunkel .nc-btn-text,
.nc-hero .nc-btn-text,
.nc-karte .nc-btn-text,
.nc-btn-text--hell {
  color: var(--weiss);
}

/* ── Stil 2: Rahmen-Button (Ghost) ── */
.nc-btn-rahmen {
  display: inline-block;
  font-family: var(--font-sans);
  font-size: var(--fs-button);
  font-weight: 400;
  letter-spacing: var(--ls-button);
  text-transform: uppercase;
  color: var(--weiss);
  border: 1px solid var(--weiss);
  padding: 12px 28px;
  text-decoration: none;
  background: transparent;
  cursor: pointer;
  transition:
    background var(--transition-standard),
    color var(--transition-standard);
}

.nc-btn-rahmen:hover,
.nc-btn-rahmen:focus {
  background: var(--weiss);
  color: var(--schwarz);
  opacity: 1;
}

/* Dunkle Variante (auf hellem Hintergrund) */
.nc-btn-rahmen--dunkel {
  color: var(--schwarz);
  border-color: var(--schwarz);
}
.nc-btn-rahmen--dunkel:hover,
.nc-btn-rahmen--dunkel:focus {
  background: var(--schwarz);
  color: var(--weiss);
}

/* ── Gutenberg Buttons-Block anpassen ── */
.wp-block-buttons.nc-btns {
  margin-top: 24px;
}
.wp-block-buttons.nc-btns .wp-block-button__link {
  font-family: var(--font-sans);
  font-size: var(--fs-button);
  letter-spacing: var(--ls-button);
  text-transform: uppercase;
  border-radius: 0;
  padding: 12px 28px;
}


/* ════════════════════════════════════════
   5. HERO-BEREICHE
════════════════════════════════════════ */

.nc-hero {
  position: relative;
  width: 100%;
  min-height: 420px;
  display: flex;
  align-items: center;
  overflow: hidden;
}

/* Hintergrundbild (als <img> oder als CSS background) */
.nc-hero__bild {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  filter: grayscale(100%) !important;  /* Bild immer schwarz-weiß */
}

/* Dunkles Overlay über dem Foto */
.nc-hero__overlay {
  position: absolute;
  inset: 0;
  background-color: var(--overlay-dunkel);  /* 55% dunkel */
}

/* Text-Inhalt liegt über Bild und Overlay */
.nc-hero__inhalt {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: var(--max-breite);
  margin: 0 auto;
  padding: 60px var(--aussen-mobil);
  color: var(--weiss);
}

.nc-hero__inhalt h1,
.nc-hero__inhalt h2,
.nc-hero__inhalt h3 {
  color: var(--weiss);
}

/* Gutenberg Cover-Block als Hero */
.wp-block-cover.nc-hero,
.wp-block-cover.nc-hero .wp-block-cover__background {
  min-height: 420px;
}

.wp-block-cover.nc-hero .wp-block-cover__image-background,
.wp-block-cover.nc-hero .wp-block-cover__video-background {
  filter: grayscale(100%) !important;
}

@media (min-width: 768px) {
  .nc-hero        { min-height: 520px; }
  .nc-hero__inhalt { padding: 80px var(--aussen-tablet); }

  .wp-block-cover.nc-hero { min-height: 520px; }
}

@media (min-width: 1024px) {
  .nc-hero        { min-height: 600px; }
  .nc-hero__inhalt { padding: 100px var(--aussen-desktop); }

  .wp-block-cover.nc-hero { min-height: 600px; }
}


/* ════════════════════════════════════════
   6. ZWEISPALTIGES LAYOUT
════════════════════════════════════════ */

.nc-zwei-spalten {
  display: flex;
  flex-direction: column;   /* MOBIL: untereinander */
  gap: var(--gap-l);        /* 48px */
}

.nc-zwei-spalten > * {
  min-width: 0;   /* verhindert Überlaufen */
}

/* TABLET+: nebeneinander */
@media (min-width: 768px) {
  .nc-zwei-spalten {
    flex-direction: row;
    align-items: flex-start;
    gap: var(--gap-xl);   /* 64px */
  }

  .nc-zwei-spalten > * {
    flex: 1;
  }
}

/* Variante: linke Spalte breiter (60/40) */
@media (min-width: 768px) {
  .nc-zwei-spalten--links-breit > *:first-child {
    flex: 1.5;
  }
}

/* Variante: rechte Spalte breiter (40/60) */
@media (min-width: 768px) {
  .nc-zwei-spalten--rechts-breit > *:last-child {
    flex: 1.5;
  }
}

/* Gutenberg Columns-Block anpassen */
.wp-block-columns.nc-zwei-spalten {
  flex-wrap: wrap;
  gap: var(--gap-l) !important;
}

@media (min-width: 768px) {
  .wp-block-columns.nc-zwei-spalten {
    flex-wrap: nowrap;
    gap: var(--gap-xl) !important;
  }
}


/* ════════════════════════════════════════
   7. COACHING-KARTEN
════════════════════════════════════════ */

.nc-karte {
  background-color: var(--schwarz);
  color: var(--weiss);
  padding: 36px 28px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-height: 260px;
  position: relative;
  overflow: hidden;
}

/* Optionales Hintergrundbild auf der Karte */
.nc-karte__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(100%);
  opacity: 0.25;
}

.nc-karte__label {
  font-family: var(--font-sans);
  font-size: var(--fs-label);
  font-weight: 500;
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--weiss-60);
  position: relative;
}

.nc-karte__titel {
  font-family: var(--font-serif);
  font-size: 26px;
  font-weight: 400;
  color: var(--weiss);
  line-height: 1.1;
  text-transform: uppercase;
  margin-bottom: 4px;
  position: relative;
}

.nc-karte__untertitel {
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 300;
  color: var(--weiss-60);
  position: relative;
}

.nc-karte__liste {
  list-style: none;
  padding: 0;
  margin: 0;
  margin-top: auto;
  display: flex;
  flex-direction: column;
  gap: 5px;
  position: relative;
}

.nc-karte__liste li {
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 300;
  color: var(--weiss-60);
  padding-left: 14px;
  position: relative;
  margin-bottom: 0;
}
.nc-karte__liste li::before {
  content: '+';
  position: absolute;
  left: 0;
  color: var(--weiss-60);
}

.nc-karte__cta {
  margin-top: auto;
  position: relative;
}

@media (min-width: 768px) {
  .nc-karte__titel {
    font-size: 30px;
  }
}


/* ════════════════════════════════════════
   8. KARTEN-RASTER
════════════════════════════════════════ */

/* 6 Karten: 1 → 2 → 3 Spalten */
.nc-karten-raster {
  display: grid;
  grid-template-columns: 1fr;          /* MOBIL: 1 Spalte  */
  gap: var(--gap-m);                   /* 24px             */
}

@media (min-width: 600px) {
  .nc-karten-raster {
    grid-template-columns: 1fr 1fr;    /* TABLET: 2 Spalten */
  }
}

@media (min-width: 1024px) {
  .nc-karten-raster {
    grid-template-columns: 1fr 1fr 1fr;  /* DESKTOP: 3 Spalten */
  }
}

/* 4 Karten: 1 → 2 Spalten (für Startseite) */
.nc-karten-raster-2x2 {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--gap-m);
}

@media (min-width: 600px) {
  .nc-karten-raster-2x2 {
    grid-template-columns: 1fr 1fr;
  }
}


/* ════════════════════════════════════════
   9. STATEMENT-BANNER (großes Zitat)
════════════════════════════════════════ */

.nc-statement {
  text-align: center;
  padding: var(--sektion-y-s) var(--aussen-mobil);
}

.nc-statement__text {
  font-family: var(--font-serif);
  font-weight: 300;
  color: var(--schwarz);
  line-height: 1.25;
  max-width: 820px;
  margin: 0 auto var(--gap-l);

  /* Mobil: 28px */
  font-size: 28px;
}

.nc-statement__sub {
  font-family: var(--font-sans);
  font-size: var(--fs-klein);
  color: var(--textgrau);
  max-width: 600px;
  margin: 0 auto var(--gap-m);
}

@media (min-width: 768px) {
  .nc-statement {
    padding: var(--sektion-y-m) var(--aussen-tablet);
  }
  .nc-statement__text {
    font-size: 38px;
  }
}

@media (min-width: 1024px) {
  .nc-statement {
    padding: var(--sektion-y-l) var(--aussen-desktop);
  }
  .nc-statement__text {
    font-size: 50px;
  }
}


/* ════════════════════════════════════════
   10. SEITEN-INTRO (Seitentitel-Bereich)
════════════════════════════════════════ */

.nc-seiten-intro {
  padding: var(--sektion-y-s) var(--aussen-mobil) calc(var(--sektion-y-s) * 0.75);
  background-color: var(--weiss);
}

.nc-seiten-intro__untertitel {
  font-family: var(--font-serif);
  font-size: var(--fs-h2);
  font-weight: 400;
  color: var(--schwarz);
  max-width: 720px;
  line-height: 1.25;
  margin-bottom: var(--gap-m);
}

@media (min-width: 768px) {
  .nc-seiten-intro {
    padding: var(--sektion-y-m) var(--aussen-tablet) calc(var(--sektion-y-m) * 0.75);
  }
  .nc-seiten-intro__untertitel {
    font-size: 34px;
  }
}

@media (min-width: 1024px) {
  .nc-seiten-intro {
    padding: var(--sektion-y-l) var(--aussen-desktop) calc(var(--sektion-y-l) * 0.75);
  }
  .nc-seiten-intro__untertitel {
    font-size: 40px;
  }
}


/* ════════════════════════════════════════
   11. BILD-OVERLAY-SEKTION
       "ARE YOU READY FOR A NEW CHAPTER?"
════════════════════════════════════════ */

.nc-banner-bild {
  position: relative;
  min-height: 360px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  text-align: center;
}

.nc-banner-bild__foto {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(100%) !important;
}

.nc-banner-bild__overlay {
  position: absolute;
  inset: 0;
  background-color: var(--overlay-tief);   /* 70% dunkel */
}

.nc-banner-bild__text {
  position: relative;
  z-index: 1;
  padding: 60px var(--aussen-mobil);
}

.nc-banner-bild__text h2 {
  font-family: var(--font-serif);
  font-size: 28px;
  font-weight: 300;
  color: var(--weiss);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  line-height: 1.2;
}

@media (min-width: 768px) {
  .nc-banner-bild { min-height: 440px; }
  .nc-banner-bild__text h2 { font-size: 40px; }
}

@media (min-width: 1024px) {
  .nc-banner-bild { min-height: 500px; }
  .nc-banner-bild__text h2 { font-size: 52px; }
}


/* ════════════════════════════════════════
   12. DUNKLE CTA-SEKTION (schwarzer Hintergrund)
       "Veränderung in der Luft…"
════════════════════════════════════════ */

.nc-cta-dunkel {
  background-color: var(--schwarz);
  padding: var(--sektion-y-s) var(--aussen-mobil);
  text-align: center;
}

.nc-cta-dunkel .nc-label {
  color: var(--weiss-60);
  margin-bottom: 16px;
}

.nc-cta-dunkel h2 {
  font-family: var(--font-serif);
  font-size: var(--fs-h1);   /* 32px mobil */
  font-weight: 300;
  color: var(--weiss);
  max-width: 700px;
  margin: 0 auto var(--gap-l);
  line-height: 1.2;
}

@media (min-width: 768px) {
  .nc-cta-dunkel {
    padding: var(--sektion-y-m) var(--aussen-tablet);
  }
  .nc-cta-dunkel h2 {
    font-size: 40px;
  }
}

@media (min-width: 1024px) {
  .nc-cta-dunkel {
    padding: var(--sektion-y-l) var(--aussen-desktop);
  }
  .nc-cta-dunkel h2 {
    font-size: 50px;
  }
}


/* ===== GETEILTE BAUSTEINE ===== */

.are-you-ready-banner {
  background: #000000;
  color: #ffffff;
  text-align: center;
  padding: 120px 20px;
}

.are-you-ready-banner h2 {
  font-family: 'Montserrat', sans-serif;
  font-size: clamp(32px, 6vw, 72px);
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: #ffffff;
  line-height: 1.1;
}

.cta-dunkel {
  background: #1A1A1A;
  color: #ffffff;
  text-align: center;
  padding: 100px 20px;
}

.cta-label {
  font-family: 'Montserrat', sans-serif;
  font-size: 12px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: #D9D9D9;
  margin-bottom: 24px;
}

.cta-dunkel h2 {
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(28px, 4vw, 52px);
  font-weight: 400;
  color: #ffffff;
  margin-bottom: 40px;
  line-height: 1.2;
}

.btn-primary {
  display: inline-block;
  background: #000000;
  color: #ffffff;
  font-family: 'Montserrat', sans-serif;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  padding: 14px 32px;
  text-decoration: none;
  border: 2px solid #000000;
  transition: all 0.3s ease;
}

.btn-primary:hover {
  background: #ffffff;
  color: #000000;
}

.btn-outline-hell {
  display: inline-block;
  background: transparent;
  color: #ffffff;
  font-family: 'Montserrat', sans-serif;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  padding: 14px 32px;
  text-decoration: none;
  border: 2px solid #ffffff;
  transition: all 0.3s ease;
}

.btn-outline-hell:hover {
  background: #ffffff;
  color: #000000;
}