/* ==========================================================
   SAND-BÄNDER · Vorschau Relaunch 2027
   Additiv zu styles.css. Eine .band-Klasse definiert die
   bestehenden Tokens lokal um; alle Komponenten darin
   (Titel, Meta, Service-Zeilen, Formular) folgen automatisch.
   Das neuronale Netz liegt fixiert hinter der Seite und läuft
   über dunkle und helle Abschnitte (auf Sand in Waldgrün).
   ========================================================== */

.band {
  position: relative;
  color: var(--text-2);

  --text-1:      #0E1217;                    /* Tinte · 15,4:1 auf Sand */
  --text-2:      #3A424E;
  --text-3:      #5B6470;                    /* 4,9:1 auf Sand */
  --accent:      #3D5A47;                    /* Waldgrün als Akzenttext · 6,3:1 */
  --accent-soft: #2F4A39;
  --accent-tint: rgba(61, 90, 71, 0.08);
  --accent-glow: rgba(61, 90, 71, 0.20);
}

/* Die Sandfläche liegt als eigene Ebene HINTER dem fixierten Netz-Canvas
   (Canvas: z-index -1, Fläche: z-index -2). So läuft dasselbe Netz über
   Dunkel und Sand; script.js zeichnet es auf .band in Waldgrün.
   Voraussetzung: kein Vorfahre der .band bildet einen Stacking-Context
   (deshalb entfällt auf Sand-Seiten der Fade auf <main>). */
.band::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  background: var(--bg);
  pointer-events: none;
}

.band--sand {
  --bg:         #EFE8DC;
  --bg-elev:    #F7F3EA;
  --surface:    #F7F3EA;
  --surface-2:  #FCFAF4;
  --hairline:   #DCD0BA;
  --hairline-2: #C9BBA1;
}

.band--paper {
  --bg:         #F7F3EA;
  --bg-elev:    #FCFAF4;
  --surface:    #FCFAF4;
  --surface-2:  #FFFFFF;
  --hairline:   #E3D9C6;
  --hairline-2: #CFC2AA;
}

/* Haarlinien-Trenner entfallen an jeder Bandkante: die Farbfläche trennt selbst.
   Zwischen zwei dunklen Abschnitten bleibt der Trenner wie bisher. */
.band + .divider,
.divider:has(+ .band) {
  display: none;
}

/* Zwei helle Bänder direkt hintereinander: feine Linie in Inhaltsbreite */
.band + .band::after,
.band + .divider + .band::after {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  width: var(--wrap);
  height: 1px;
  transform: translateX(-50%);
  background: var(--hairline-2);
  pointer-events: none;
}

/* Primär-Button behält das helle Markengrün mit dunkler Schrift (7,6:1) */
.band .cta-primary {
  --accent-glow: rgba(93, 182, 125, 0.30);
  background: #5DB67D;
  color: #0E1217;
}
.band .cta-primary:hover {
  background: #4FA86F;
  box-shadow: 0 8px 28px -10px rgba(61, 90, 71, 0.45);
}

/* ----------------------------------------------------------
   Sand-Hero: Seite beginnt hell.
   Das Logo ist hell auf dunkel angelegt, deshalb bleibt der Header
   von Anfang an ein dunkler Balken (sonst wäre er oben transparent).
   Der Seiten-Fade entfällt, damit vor dem Sand kein Dunkel aufblitzt.
   ---------------------------------------------------------- */
body.sand-top .header {
  background: rgba(14, 14, 15, 0.94);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom-color: #232A33;
}
body.sand-top main {
  animation: none;
}

/* Nebel im Hero: auf Sand als sehr leichter grüner Schleier statt Leuchten */
.band.s-hero .fog--1 { background: radial-gradient(circle, rgba(93, 182, 125, 0.16), transparent 70%); }
.band.s-hero .fog--2 { background: radial-gradient(circle, rgba(61, 90, 71, 0.07), transparent 70%); }
.band.s-hero .fog--3 { background: radial-gradient(circle, rgba(93, 182, 125, 0.09), transparent 70%); }

/* Bänder brauchen eigene Luft oben und unten, weil die Haarlinien-Trenner entfallen */
.band.s-intro {
  padding: 6.5rem 0 6rem;
}
.band.s-intro .sec-kicker,
.band-stage.s-intro .sec-kicker {
  margin-bottom: 0;
}
.band-stage.s-intro {
  padding: 8rem 0 7.5rem;
}
.band.s-contact {
  padding: 7rem 0 6rem;
}

/* Dunkles Zitat-Band zwischen zwei hellen Flächen: etwas mehr Bühne für das Netz */
.band-stage.s-quote {
  padding: 9rem 0;
}

@media (max-width: 720px) {
  .band.s-intro { padding: 4rem 0 3.5rem; }
  .band-stage.s-intro { padding: 5rem 0 4.5rem; }
  .band.s-contact { padding: 4.5rem 0 4rem; }
  .band-stage.s-quote { padding: 6rem 0; }
}

/* ==========================================================
   INHALTLICHE NEUAUSRICHTUNG · neue Abschnitts-Bausteine
   Alle Farben über Tokens, damit jeder Baustein auf Sand
   und auf Dunkel funktioniert.
   ========================================================== */

.sec {
  padding: 7.5rem 0;
}

.sec-body {
  max-width: 56ch;
  margin: 0 0 2rem;
  color: var(--text-2);
}

.sec-statement {
  font-family: var(--font-d);
  font-weight: 600;
  font-size: clamp(1.3rem, 2.3vw, 1.8rem);
  line-height: 1.35;
  letter-spacing: -0.015em;
  color: var(--text-1);
  max-width: 34ch;
  margin: 4rem 0 0;
}
.sec-statement em {
  font-style: normal;
  color: var(--accent);
}

/* --- Zweispalter Text + Grafik --- */
.split {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: clamp(2.5rem, 6vw, 6rem);
  align-items: center;
}
.split .sec-kicker {
  margin-bottom: 1.5rem;
}
.split .sec-body:last-child {
  margin-bottom: 0;
}
.split--person {
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
}

/* --- Grafik-Grundlagen --- */
.viz {
  margin: 0;
}
.viz svg {
  display: block;
  width: 100%;
  height: auto;
  max-width: 460px;
  margin-inline: auto;
  overflow: visible;
}
.viz-caption {
  font-family: var(--font-m);
  font-size: 11px;
  letter-spacing: 0.04em;
  color: var(--text-3);
  margin-top: 1.25rem;
}

/* --- Grafik 1: Eisberg --- */
.viz-tip {
  fill: none;
  stroke: var(--text-2);
  stroke-width: 1.5;
  stroke-linejoin: round;
}
.viz-mass {
  fill: var(--accent-tint);
  stroke: var(--accent);
  stroke-width: 1.5;
  stroke-linejoin: round;
}
.viz-water {
  stroke: var(--hairline-2);
  stroke-width: 1;
  stroke-dasharray: 4 6;
}
.viz-label {
  font-family: var(--font-d);
  font-weight: 600;
  font-size: 14px;
  fill: var(--text-1);
}
.viz-label--mute {
  font-weight: 500;
  font-size: 13px;
  fill: var(--text-2);
}
.viz-meta {
  font-family: var(--font-m);
  font-weight: 700;
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  fill: var(--text-2);
}
.viz-meta--accent {
  fill: var(--accent);
}

/* --- Grafik 2: Arbeitswoche bisher / mit AI --- */
.week {
  margin-top: 1rem;
  max-width: 60rem;
}
.week-row + .week-row {
  margin-top: 1.75rem;
}
.week-label {
  display: block;
  font-family: var(--font-m);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-3);
  margin-bottom: 0.6rem;
}
.week-bar {
  display: flex;
  gap: 4px;
}
.week-seg {
  flex: var(--n) 1 0;
  min-width: 0;
  min-height: 68px;
  display: flex;
  align-items: center;
  padding: 0.75rem 0.9rem;
  font-family: var(--font-d);
  font-weight: 600;
  font-size: 13px;
  line-height: 1.25;
  color: var(--text-1);
  background: var(--surface);
  border: 1px solid var(--hairline-2);
  border-radius: 2px;
}
.week-seg--routine {
  background: var(--hairline);
}
.week-seg--new {
  border: 1px dashed var(--accent);
  color: var(--accent);
}
.week-seg--free {
  background: #5DB67D;
  border-color: #5DB67D;
  color: #0E1217;
}
.week-question {
  font-family: var(--font-d);
  font-weight: 600;
  font-size: 15px;
  color: var(--accent);
  text-align: right;
  margin: 0.9rem 0 0;
}

/* --- Grafik 3: Aufgaben stapeln vs. Freiheit und Vertrauen --- */
.lead-compare {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.5rem;
  max-width: 60rem;
  margin-top: 1rem;
}
.lead-col {
  margin: 0;
  padding: 2rem;
  background: var(--bg-elev);
  border: 1px solid var(--hairline);
  border-radius: 4px;
}
.lead-col--new {
  border-color: var(--accent);
}
.lead-stack {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 6px;
  height: 210px;
  margin-bottom: 1.75rem;
}
.lead-block {
  flex: none;
  height: 28px;
  background: var(--surface-2);
  border: 1px solid var(--hairline-2);
  border-radius: 2px;
}
.lead-block--next {
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border-style: dashed;
  font-family: var(--font-d);
  font-weight: 600;
  font-size: 15px;
  color: var(--text-2);
}
.lead-open {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-d);
  font-weight: 600;
  font-size: 14px;
  color: var(--accent);
  background: var(--accent-tint);
  border: 1px dashed var(--accent);
  border-radius: 2px;
}
.lead-col figcaption strong {
  display: block;
  font-family: var(--font-d);
  font-weight: 700;
  font-size: 1.15rem;
  letter-spacing: -0.01em;
  color: var(--text-1);
  margin-bottom: 0.4rem;
}
.lead-col figcaption span {
  font-size: 15px;
  color: var(--text-2);
}

/* --- Vier Bedingungen --- */
.need-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 2rem;
  margin-top: 1rem;
}
.need {
  padding-top: 1.5rem;
  border-top: 1px solid var(--hairline-2);
}
.need-num {
  display: block;
  font-family: var(--font-m);
  font-size: 11px;
  letter-spacing: 0.15em;
  color: var(--accent);
  margin-bottom: 1rem;
}
.need h3 {
  font-family: var(--font-d);
  font-weight: 700;
  font-size: 1.15rem;
  line-height: 1.25;
  letter-spacing: -0.01em;
  color: var(--text-1);
  margin-bottom: 0.7rem;
}
.need p {
  font-size: 15px;
  line-height: 1.6;
}

/* --- Person --- */
.person-photo {
  margin: 0;
}
.person-photo img {
  display: block;
  width: 100%;
  max-width: 400px;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: 4px;
  border: 1px solid var(--hairline);
}

.contact-note {
  margin: -1.25rem 0 2.5rem;
}

@media (max-width: 1000px) {
  .need-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 820px) {
  .split,
  .split--person { grid-template-columns: minmax(0, 1fr); }
  .person-photo img { max-width: 300px; }
}

@media (max-width: 720px) {
  .sec { padding: 4.5rem 0; }
  .sec-statement { margin-top: 2.75rem; }
  .week-bar { flex-direction: column; }
  .week-seg {
    flex: none;
    min-height: calc(var(--n) * 13px + 22px);
  }
  .week-question { text-align: left; }
  .lead-compare { grid-template-columns: minmax(0, 1fr); }
  .lead-col { padding: 1.5rem; }
  .need-grid { grid-template-columns: minmax(0, 1fr); gap: 1.5rem; }
}

/* ==========================================================
   UNTERSEITEN · Nachzüge für Bausteine, die auf Sand
   eigene Farben mitbringen
   ========================================================== */

/* Robin: Schild auf dem Porträt bleibt eine dunkle Pille mit heller Schrift */
.band .robin-portrait-tag {
  color: #F2F4F7;
}
.band .robin-portrait-tag .dot {
  background: #5DB67D;
}

/* Robin: PDF-Button wie der Primär-Button, helles Markengrün mit Tinte */
.band .pdf-form .pdf-form-submit {
  background: #5DB67D;
}
.band .pdf-form .pdf-form-submit:hover:not(:disabled) {
  background: #4FA86F;
}

/* Robin: Fünf Fragen ohne eigene Fläche, damit Sand und Netz durchlaufen */
.band.s-fivequestions {
  background: transparent;
  border-top: 0;
  border-bottom: 0;
}

/* Langdock: weißes Partnerlogo auf Sand in Tinte */
.band .ld-hero-card-logo {
  filter: brightness(0);
  opacity: 0.86;
}

/* Langdock: der Header ist auf Sand-Seiten ein fester Balken, der Hero braucht mehr Abstand */
@media (min-width: 901px) {
  .band.ld-hero {
    padding-top: 10.5rem;
  }
}

/* Ablauf-Abschnitt hat im Bestand keinen Abstand nach oben (er hing am Trenner).
   Als eigenes Band braucht er ihn. */
.process-section.band,
.process-section.band-stage {
  padding-top: 6rem;
}

/* Standortbestimmung: der Fragebogen beginnt als dunkles Band unter dem Sand-Hero */
.s-diagnose.band-stage {
  padding-top: 4rem;
}

@media (max-width: 720px) {
  .process-section.band,
  .process-section.band-stage { padding-top: 4rem; }
  .s-diagnose.band-stage { padding-top: 2.5rem; }
}

/* Der Hero der Standortbestimmung ist kurz; als Sandband etwas mehr Luft nach unten */
.diagnose-hero.band {
  padding-bottom: 4rem;
}

/* Schmale Displays: sehr lange Wörter in Titeln ragten bisher unbemerkt über den Rand.
   Mit Sandbändern würde daneben ein dunkler Streifen sichtbar. Die zwei betroffenen
   Titel tragen ein weiches Trennzeichen im HTML; das hier ist nur das Sicherheitsnetz. */
@media (max-width: 480px) {
  body.sand-top .sub-hero-title,
  body.sand-top .sec-title {
    overflow-wrap: anywhere;
  }
}