/* SEL Coaching und Consulting — sel-cc.space
   Ein Stylesheet, kein Framework. Zilla Slab selbst gehostet. */

/* ---------- Schrift ---------- */

@font-face {
  font-family: "Zilla Slab";
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url("../fonts/zilla-slab-300.woff2") format("woff2");
}
@font-face {
  font-family: "Zilla Slab";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/zilla-slab-400.woff2") format("woff2");
}
@font-face {
  font-family: "Zilla Slab";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/zilla-slab-500.woff2") format("woff2");
}
@font-face {
  font-family: "Zilla Slab";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../fonts/zilla-slab-600.woff2") format("woff2");
}

/* ---------- Farben: Logo (Dunkelmarine, Türkis) + warme Naturtöne ---------- */

:root {
  --marine: #1c3448;
  --marine-tief: #122435;
  --tuerkis: #6d9078;
  --tuerkis-dunkel: #3e7565;   /* Links/Akzente auf hellem Grund (Kontrast) */
  --sand: #fdfdf9;
  --sand-tief: #e3e9d4;
  --gruen-grau: #eef1e2;
  --tinte: #33403a;
  --tinte-leise: #68746c;
  --linie: #c9cfba;
  --weiss: #ffffff;
}

/* ---------- Grundlagen ---------- */

* { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: 5rem;
}

body {
  margin: 0;
  font-family: "Zilla Slab", "Iowan Old Style", Georgia, serif;
  font-weight: 400;
  font-size: 1.125rem;
  line-height: 1.65;
  color: var(--tinte);
  background: var(--sand);
}

h1, h2, h3 {
  font-weight: 600;
  line-height: 1.2;
  color: var(--marine);
  margin: 0 0 0.75em;
}

h2 { font-size: 1.9rem; }
h3 { font-size: 1.25rem; }

p { margin: 0 0 1em; }

a { color: var(--tuerkis-dunkel); }
a:hover { color: var(--marine); }

img { max-width: 100%; height: auto; display: block; }

.wrap {
  max-width: 62rem;
  margin: 0 auto;
  padding: 0 1.25rem;
}

.narrow { max-width: 44rem; }

section { padding: 4.5rem 0; }

/* ---------- Kopf ---------- */

.site-head {
  position: sticky;
  top: 0;
  z-index: 10;
  background: var(--weiss);
  border-bottom: 1px solid var(--linie);
}

.head-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding-top: 0.6rem;
  padding-bottom: 0.6rem;
}

.brand {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  text-decoration: none;
}

.brand-name {
  color: var(--marine);
  font-weight: 500;
  font-size: 1.05rem;
  line-height: 1.15;
  display: flex;
  flex-direction: column;
}

.brand-name small {
  font-weight: 300;
  font-size: 0.78rem;
  color: var(--tinte-leise);
  letter-spacing: 0.04em;
}

.site-nav {
  display: flex;
  align-items: center;
  gap: 1.1rem;
  flex-wrap: wrap;
}

.site-nav a {
  text-decoration: none;
  color: var(--tinte);
  font-weight: 500;
  font-size: 1rem;
}

.site-nav a:hover { color: var(--tuerkis-dunkel); }

.nav-cta {
  background: var(--marine);
  color: var(--sand) !important;
  padding: 0.4rem 0.9rem;
  border-radius: 4px;
}

.nav-cta:hover { background: var(--marine-tief); }

/* ---------- Hero ---------- */

.hero {
  background:
    linear-gradient(100deg, rgba(250, 252, 246, 0.94) 0%, rgba(250, 252, 246, 0.94) 34%, rgba(250, 252, 246, 0.65) 58%, rgba(255,255,255,0) 82%),
    url("../img/hero-landzunge.webp") center / cover no-repeat;
  padding: 7.5rem 0 7rem;
  border-bottom: 1px solid var(--linie);
}

.hero h1 {
  font-size: clamp(2rem, 5vw, 3.1rem);
  font-weight: 600;
  max-width: 20ch;
}

.hero-sub {
  max-width: 46ch;
  font-size: 1.2rem;
  font-weight: 300;
  color: var(--tinte);
}

.hero-cta {
  margin-top: 2rem;
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
}

.btn {
  display: inline-block;
  background: var(--marine);
  color: var(--sand);
  text-decoration: none;
  font-weight: 500;
  font-size: 1.05rem;
  padding: 0.75rem 1.4rem;
  border-radius: 4px;
}

.btn:hover { background: var(--marine-tief); color: var(--weiss); }

.btn-note {
  color: var(--tinte-leise);
  font-size: 0.95rem;
}

/* ---------- Intro ---------- */

.intro { background: var(--sand); }

.zitat {
  margin: 0 0 3rem;
  padding: 0;
  text-align: center;
}

.zitat p {
  font-size: 1.55rem;
  font-weight: 300;
  font-style: italic;
  line-height: 1.4;
  color: var(--marine);
  margin: 0 0 0.6rem;
}

.zitat cite {
  font-style: normal;
  font-size: 0.95rem;
  color: var(--tinte-leise);
}

.intro h2 { font-size: 1.35rem; }

.intro-close {
  font-weight: 500;
  color: var(--marine);
}

/* ---------- Leistungen ---------- */

.leistungen {
  background:
    linear-gradient(100deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.95) 44%, rgba(255, 255, 255, 0.72) 64%, rgba(255, 255, 255, 0.35) 100%),
    url("../img/leistungen-leuchtturm.webp") center 30% / cover no-repeat;
  border-top: 1px solid var(--linie);
  border-bottom: 1px solid var(--linie);
}

.leistung {
  max-width: 44rem;
  padding: 1.75rem 0;
}

.leistung + .leistung { border-top: 1px solid var(--linie); }

.leistung h3 { font-size: 1.4rem; margin-bottom: 0.25em; }

.leistung-lead {
  color: var(--tuerkis-dunkel);
  font-weight: 500;
  margin-bottom: 0.75em;
}

.leistung ul {
  margin: 0 0 1em;
  padding-left: 1.2rem;
}

.leistung li { margin-bottom: 0.35em; }

.leistungen-format {
  max-width: 44rem;
  border-top: 1px solid var(--linie);
  padding-top: 1.75rem;
  font-weight: 500;
  color: var(--marine);
}

.hinweis {
  font-size: 0.95rem;
  color: var(--tinte-leise);
  border-left: 3px solid var(--tuerkis);
  padding-left: 0.75rem;
}

/* ---------- Für wen ---------- */

.fuer-wen { background: var(--gruen-grau); }

.fuer-wen h2 { max-width: 30ch; }

.passt {
  margin-top: 2rem;
  max-width: 46rem;
}

.passt ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.passt li {
  margin-bottom: 0.9em;
  padding-left: 1rem;
  border-left: 3px solid var(--tuerkis);
}

/* ---------- Ablauf ---------- */

.ablauf { background: var(--sand); }

.schritte {
  list-style: none;
  counter-reset: schritt;
  margin: 2rem 0 0;
  padding: 0;
  max-width: 44rem;
}

.schritte li {
  counter-increment: schritt;
  position: relative;
  padding: 0 0 1.75rem 4rem;
}

.schritte li::before {
  content: counter(schritt);
  position: absolute;
  left: 0;
  top: -0.35rem;
  font-size: 2.6rem;
  font-weight: 300;
  color: var(--tuerkis-dunkel);
  width: 2.75rem;
  text-align: center;
}

.schritte li:not(:last-child)::after {
  content: "";
  position: absolute;
  left: 1.35rem;
  top: 2.6rem;
  bottom: 0.4rem;
  width: 1px;
  background: var(--linie);
}

.schritte h3 { margin-bottom: 0.25em; }

/* ---------- Über mich ---------- */

.ueber-mich {
  background: var(--weiss);
  border-top: 1px solid var(--linie);
  border-bottom: 1px solid var(--linie);
}

.ueber-grid {
  display: grid;
  grid-template-columns: 3fr 2fr;
  gap: 3rem;
  align-items: start;
}

.ueber-lead {
  font-size: 1.3rem;
  font-weight: 500;
  color: var(--marine);
}

.ueber-bild img { border-radius: 4px; }

.erfahrung {
  margin-top: 1.5rem;
  border-bottom: none;  /* Trennlinie der FAQ-Aufklapper hier nicht */
}

.erfahrung ul {
  margin: 1rem 0 0;
  padding-left: 1.2rem;
}

.erfahrung li { margin-bottom: 0.75em; }

/* ---------- FAQ + Aufklapper ---------- */

.faq { background: var(--sand); }

details {
  border-bottom: 1px solid var(--linie);
  padding: 0.9rem 0;
}

details summary {
  cursor: pointer;
  font-weight: 500;
  color: var(--marine);
  font-size: 1.1rem;
  list-style-position: outside;
}

details summary:hover { color: var(--tuerkis-dunkel); }

details[open] summary { margin-bottom: 0.6rem; }

details p { margin-bottom: 0.4em; }

/* ---------- Kontakt ---------- */

.kontakt {
  background: var(--sand-tief);
  border-top: 1px solid var(--linie);
}

.kontakt-grid {
  display: grid;
  grid-template-columns: 3fr 2fr;
  gap: 3rem;
  align-items: center;
}

.kontakt-cta { margin: 1.75rem 0 1rem; }

.kontakt-wege {
  list-style: none;
  margin: 0;
  padding: 0;
  color: var(--tinte-leise);
}

.kontakt-wege a {
  color: var(--marine);
  text-decoration: none;
}

.kontakt-wege a:hover { color: var(--tuerkis-dunkel); }

.kontakt-bild img { border-radius: 4px; }

/* ---------- Fuß ---------- */

.site-foot {
  background: var(--marine);
  color: var(--sand);
  padding: 1.5rem 0;
  font-size: 0.95rem;
}

.foot-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  flex-wrap: wrap;
}

.foot-row p { margin: 0; }

.site-foot a {
  color: var(--sand);
  margin-left: 1rem;
}

.site-foot a:hover { color: var(--weiss); }

/* ---------- Klein ---------- */

/* ---------- Stimmen ---------- */

.stimmen-sektion {
  /* Ausschnitt tief gesetzt: Heide, Felsen und Küste statt Himmel.
     Schleier flacher als im Hero: links duenner (0.88 statt 0.94), damit hinter
     der Textspalte ueberhaupt Heide zu sehen ist, rechts nicht mehr ganz offen
     (Restschleier 0.26), damit das Foto die Kacheln nicht ueberholt.
     Grosszuegiges Padding, damit oben und unten Bild atmet. */
  background:
    linear-gradient(100deg, rgba(253,253,249,0.88) 0%, rgba(253,253,249,0.85) 34%, rgba(253,253,249,0.55) 58%, rgba(253,253,249,0.30) 82%, rgba(253,253,249,0.26) 100%),
    url("../img/stimmen-klippe.webp") center 78% / cover no-repeat;
  padding: 8.5rem 0 8rem;
  border-top: 1px solid var(--linie);
  border-bottom: 1px solid var(--linie);
}

.stimmen {
  display: grid;
  grid-template-columns: 17rem 1fr;
  gap: 3rem;
  align-items: start;
  min-width: 0;
}

.stimmen-seite h2 { margin-bottom: 0; }

/* Bahn: waagerecht, rastet auf jeder Stimme ein. Ohne JavaScript wischbar. */
.stimmen-bahn {
  display: flex;
  gap: 2rem;
  min-width: 0;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  padding: 1rem 0 2rem;
}

.stimmen-bahn::-webkit-scrollbar { display: none; }

.stimme {
  flex: 0 0 auto;
  width: 100%;
  scroll-snap-align: start;
  background: rgba(255,255,255,0.74);
  backdrop-filter: blur(9px);
  -webkit-backdrop-filter: blur(9px);
  box-shadow: 0 14px 34px rgba(18,36,53,0.18);
  padding: 2.4rem 2.6rem 2.15rem;
  color: var(--tinte);
}

.stimme p {
  font-size: 1.06rem;
  font-weight: 300;
  line-height: 1.72;
  margin: 0 0 1.1rem;
}

.stimme p:last-of-type { margin-bottom: 0; }

.stimme-wer {
  display: block;
  font-style: normal;
  font-weight: 500;
  color: var(--tuerkis-dunkel);
  margin-top: 1.25rem;
}

.stimmen-steuerung {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-top: 2.25rem;
  color: var(--marine);
}

.stimmen-pfeil {
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 50%;
  border: 1px solid currentColor;
  background: transparent;
  color: inherit;
  font: inherit;
  font-size: 1.1rem;
  line-height: 1;
  cursor: pointer;
  transition: background 0.18s ease, color 0.18s ease;
}

.stimmen-pfeil:hover { background: var(--marine); color: var(--weiss); }
.stimmen-pfeil[disabled] { opacity: 0.35; cursor: default; }
.stimmen-pfeil[disabled]:hover { background: transparent; color: inherit; }

.stimmen-punkte { display: flex; gap: 0.5rem; margin-left: auto; }

.stimmen-punkt {
  width: 0.6rem;
  height: 0.6rem;
  padding: 0;
  border-radius: 50%;
  border: 1px solid currentColor;
  background: transparent;
  cursor: pointer;
}

.stimmen-punkt[aria-current="true"] { background: currentColor; }

/* Zwischenbreiten: die Textspalte wird sonst zu schmal für die Überschrift */
@media (max-width: 56rem) {
  .stimmen { grid-template-columns: 1fr; gap: 1.5rem; }
  .stimmen-seite h2 { max-width: 22ch; }
}

@media (max-width: 46rem) {
  section { padding: 3rem 0; }

  .hero { padding: 4rem 0 3.5rem; }

  /* Schmale Screens: Text läuft über die volle Breite, darum gleichmäßiger Schleier statt Verlauf */
  .leistungen {
    background:
      linear-gradient(rgba(255, 255, 255, 0.93), rgba(255, 255, 255, 0.93)),
      url("../img/leistungen-leuchtturm.webp") center 30% / cover no-repeat;
  }

  /* Text läuft über die volle Breite: Schleier von oben nach unten,
     damit die Überschrift ruhig steht und die Heide unten sichtbar bleibt */
  .stimmen-sektion {
    background:
      linear-gradient(180deg, rgba(253,253,249,0.94) 0%, rgba(253,253,249,0.86) 34%, rgba(253,253,249,0.55) 72%, rgba(253,253,249,0.30) 100%),
      url("../img/stimmen-klippe.webp") center 78% / cover no-repeat;
    padding: 5rem 0 4.5rem;
  }

  .stimme { padding: 1.9rem 1.7rem; }

  .head-row { flex-direction: column; align-items: flex-start; }

  .site-nav { gap: 0.8rem; }

  .ueber-grid,
  .kontakt-grid { grid-template-columns: 1fr; gap: 1.5rem; }

  .ueber-bild { order: -1; max-width: 22rem; }

  .kontakt-bild { max-width: 22rem; }

  .schritte li { padding-left: 3.25rem; }
}