/* ============================================================
   Creative Mind Lab · startseite.css – nur fuer src/index.html
   Feinschliff nach dem Startseiten-Review (Auftrag Franz/GPT, 30.10.2026, Claude).
   Baut auf ruhig.css auf und aendert dort nichts: gleiche Tokens, Knoepfe,
   Flaechen und Radien. Keine Daueranimation, kein Blur, keine fremde Schrift.
   ============================================================ */

/* ---------- 1. Einstieg: Claim ruhig, Text konkret, eine Hauptaktion ---------- */
.hero-claim { color: #fff; font-weight: 600; letter-spacing: .005em; }
.hero-text { max-width: 520px; }
.hero-aktionen .textlink { min-height: 48px; padding: 0 4px; }
@media (min-width: 900px) {
  .hero { padding: var(--a8) 0; }
  .portraet { max-width: 460px; }
}
@media (max-width: 600px) {
  .hero-aktionen { gap: 2px; }
  .hero-aktionen .textlink { justify-content: center; }
}

/* ---------- 2. Vertrauensband: Logos, Partner, Belege ---------- */
.kooperationen .kennzahlen {
  flex-direction: row; flex-wrap: wrap; justify-content: center; gap: 8px 30px;
  max-width: none; margin: var(--a4) auto 0; padding: 0; border-top: 0;
  font-size: inherit; color: inherit; text-align: left;
}
.kooperationen .kennzahlen li { display: flex; align-items: baseline; min-height: 32px; }
.kooperationen .kennzahlen li > svg { align-self: center; margin: 0 10px 0 0; flex: none; }
.kooperationen .kennzahlen b { font-size: 15px; }
@media (max-width: 899px) { .kooperationen .kennzahlen { width: auto; } }
@media (max-width: 599px) {
  /* Handy: Belege untereinander, als Block mittig, Zeilen linksbuendig */
  .kooperationen .kennzahlen { flex-direction: column; align-items: flex-start; width: fit-content; max-width: 100%; gap: 6px; }
  .kooperationen .kennzahlen li { display: grid; grid-template-columns: 18px minmax(0, 1fr); column-gap: 10px; align-items: start; }
  .kooperationen .kennzahlen li > svg { margin: 3px 0 0; align-self: start; }
  .kooperationen .kennzahlen li > b, .kooperationen .kennzahlen li > span { grid-column: 2; }
}

/* ---------- 3. Angebotsflaeche: Leistungen zuerst, Ablauf als kurze Folge ---------- */
.ablauf-kurz { margin-top: var(--a5); }
.ablauf-kurz .ablauf-titel { font-size: 13px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--text-3); margin-bottom: 8px; }
.ablauf-kurz ol { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 0; }
.ablauf-kurz li { padding-left: 0; min-height: 0; font-size: 15.5px; color: #fff; font-weight: 500; }
.ablauf-kurz li::before { content: none; }
.ablauf-kurz li:not(:last-child)::after { content: "→"; color: var(--mint); margin: 0 10px; font-weight: 400; }

/* Feste Teilnehmerstimme an der Angebotsflaeche */
.weg-stimme { margin: var(--a6) 0 0; padding: 2px 0 2px 18px; border-left: 2px solid var(--violett); }
.weg-stimme blockquote { margin: 0; }
.weg-stimme p { font-size: 17px; line-height: 1.5; font-weight: 500; color: #fff; }
.weg-stimme figcaption { margin-top: 10px; font-size: 14.5px; line-height: 1.45; color: var(--text-3); }
.weg-stimme figcaption b { display: block; color: var(--text-2); font-weight: 600; }

@media (min-width: 900px) {
  .weg-fortbildung {
    grid-template-areas: "kopf formate" "titel formate" "text formate" "ablauf formate" "stimme formate" "fuss formate";
    grid-template-rows: auto auto auto auto auto 1fr;
  }
  .weg-fortbildung > .weg-stimme { grid-area: stimme; }
  .weg-fortbildung > p { font-size: 17px; }
}

/* Abgestufte Tiefe: Hauptangebot behaelt Lichtkante und vollen Schatten,
   Tools und Buch treten mit flacherem Schatten etwas zurueck. */
.wege .weg.flaeche { box-shadow: inset 0 1px 0 rgba(255,255,255,0.05), 0 1px 2px rgba(0,0,0,0.22), 0 14px 28px -20px rgba(0,0,0,0.55); }
.weg-fortbildung.flaeche-hoch { box-shadow: inset 0 1px 0 rgba(255,255,255,0.09), 0 2px 4px rgba(0,0,0,0.3), 0 34px 64px -28px rgba(0,0,0,0.8); }

/* ---------- 4. Stimmen: eine wechselnde, eine feste ---------- */
@media (min-width: 900px) {
  .stimmen { grid-template-columns: 1.45fr 1fr; align-items: stretch; }
  .stimme-gross { grid-row: auto; }
  .stimmen > .stimme:not(.stimme-gross) { display: flex; flex-direction: column; justify-content: center; padding: var(--a6); }
}

/* ---------- 4a. Leitsatz: Farben wie im Creative Mind Tool (Franz, 30.10.2026):
   Creative Koralle, Mind Violett, Lab Mint ---------- */
.wort.mind { --farbe: var(--violett); }

/* ---------- 5. Ueber mich: zwei Merkmale nebeneinander ab Tablet ---------- */
@media (min-width: 600px) and (max-width: 899px), (min-width: 1100px) {
  .merkmale { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--a5) var(--a6); }
}

/* ---------- 6. Aktuell: Kopfzeile mit Link zu allen Einblicken ---------- */
.kopfzeile-mit-link { max-width: none; display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px 24px; }

/* ---------- 7. Persoenlicher Kontaktabschluss vor dem Newsletter ---------- */
.kontakt-abschluss { text-align: center;
  background: radial-gradient(640px 320px at 50% 0%, rgba(168,147,255,0.10), transparent 70%); }
.kontakt-abschluss .huelle { max-width: 760px; }
.kontakt-bild { width: 88px; height: 88px; border-radius: 50%; object-fit: cover; margin: 0 auto var(--a5); border: 2px solid rgba(61,217,164,0.5); }
.kontakt-abschluss p { color: var(--text-2); font-size: var(--fs-gross); line-height: 1.6; max-width: 580px; margin: var(--a4) auto 0; }
.kontakt-abschluss .knopf { margin-top: var(--a6); }
@media (max-width: 600px) { .kontakt-abschluss .knopf { width: 100%; } .kontakt-abschluss p { font-size: 16.5px; } }

/* Newsletter als ergaenzende Moeglichkeit: ruhige Flaeche, Abstand nach oben enger */
#newsletter { padding-top: var(--a7); }

/* ---------- 9. Runde 2 (30.10.2026, Franz) ---------- */
/* 9a. Handy: Einstieg und Vertrauensband kompakter, damit die Logozeile
   ueber der eingeblendeten Safari-Leiste steht. Nur bis 600 px; Desktop unveraendert. */
@media (max-width: 600px) {
  .hero { padding-top: 24px; padding-bottom: 16px; }
  .person-zeile { margin-top: 16px; }
  .hero-claim { margin-top: 16px; }
  .hero-text { margin-top: 6px; }
  .hero-aktionen { margin-top: 20px; }
  .kooperationen .huelle { padding-top: 14px; padding-bottom: 24px; }
  .kooperationen .etikett { margin-bottom: 8px; }
  .logoleiste { margin-bottom: 14px !important; }
  .partnerzeile { gap: 0 16px !important; padding-top: 10px !important; }
  .partnerzeile li { min-height: 30px; }
  /* Belege: mittig wie die Partnerzeile, Text laeuft hinter dem Symbol weiter statt in zwei Zeilen */
  .kooperationen .kennzahlen { margin-top: 10px; gap: 6px; width: auto; align-items: center; }
  .kooperationen .kennzahlen li { display: block; text-align: center; line-height: 1.45; min-height: 0; }
  .kooperationen .kennzahlen li > svg { display: inline-block; vertical-align: -3px; margin: 0 7px 0 0; }
  .kooperationen .kennzahlen b { margin-right: 6px; white-space: nowrap; }
  .kooperationen .kennzahlen b + span::before { content: "\200B"; }   /* Umbruchstelle zwischen Fett- und Normaltext (im HTML ohne Leerzeichen) */
}

/* 9b. Angebote: automatische Hervorhebung leiser als Zeiger/Fokus, damit sie
   nicht wie eine getroffene Auswahl wirkt; sanfte Uebergaenge ohne Bewegung */
.formate[data-startseite] a { transition: background-color .8s ease, background-image .8s ease; }
.formate[data-startseite] a::before { transition: opacity .9s ease; }
.formate[data-startseite] a.an:not(:hover):not(:focus-visible) { background: linear-gradient(100deg, rgba(125,211,252,0.06), rgba(168,147,255,0.05) 55%, rgba(245,163,230,0.03)); }
.formate[data-startseite] a.an:not(:hover):not(:focus-visible) .f-pfeil { color: var(--mint); border-color: rgba(61,217,164,0.3); }

/* 9c. Stimmen: sanftere Blende */
#stimme-fokus .stimme-inhalt { transition: opacity .5s ease; }
.stimme-steuerung button[hidden] { display: none; }

/* 9d. „Nach oben“: seitenweit in js/cml-nach-oben.js (Stil dort eingebettet) */

/* 9e. Spark am Handy erst nach dem ersten Scrollen, damit er die Logoleiste nicht verdeckt */
@media (max-width: 600px) {
  html:not(.start-weiter) .lotse-knopf.da { opacity: 0; visibility: hidden; pointer-events: none; }
}

/* ---------- 8. Bewegung reduzieren ---------- */
@media (prefers-reduced-motion: reduce) {
  .kontakt-abschluss .knopf:hover svg { transform: none !important; }
}