/* ==========================================================================
   Sabine Müller — Design-Tokens
   1:1 aus dem echten WordPress-Export (WXR/XML) und dem CSS-Inspector-Export
   von sabinemueller.org übernommen: Farben (ast-global-color-*), Schriftgrößen-
   Presets, Spacing-Presets, Blockstruktur. Wo der Nutzer bewusst vom Original
   abweichende Wünsche geäußert hat (z. B. Menüpunkte ohne Unterstreichung,
   Button-Rahmen, Partner statt Team), bleibt das erhalten.
   ========================================================================== */

/* Lokal gehostete Schrift (statt Google Fonts CDN) - keine Drittanbieter-
   Verbindung, keine IP-Uebertragung an Google beim Seitenaufruf. */
@font-face {
  font-family: 'Nunito Sans';
  src: url('fonts/nunito-sans-variable.ttf') format('truetype-variations');
  font-weight: 200 1000;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Nunito Sans';
  src: url('fonts/nunito-sans-italic-variable.ttf') format('truetype-variations');
  font-weight: 200 1000;
  font-style: italic;
  font-display: swap;
}

:root {
  --color-bg: #F6F9F5;            /* ast-global-color-1 / -4 */
  --color-accent: #E0FD2C;        /* ast-global-color-0 / -5 */
  --color-accent-hover: #CBE827;
  --color-text: #000000;          /* ast-global-color-2 / -3 */
  --color-text-muted: #1A1A1A;    /* body,h1-h6 { color: ast-global-color-3 } = #000000, dunkel statt grau */
  --color-line: #000000;
  --color-border-subtle: #D1D5DB; /* ast-border-color / -7 */

  --font-display: "Nunito Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-body: "Nunito Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  /* echte WordPress-Schriftgrößen-Presets */
  --fs-small: 0.8125rem;   /* 13px */
  --fs-normal: 1rem;       /* 16px */
  --fs-medium: 1.25rem;    /* 20px */
  --fs-large: 2.25rem;     /* 36px */
  --fs-x-large: 2.625rem;  /* 42px */
  --fs-body: 1.3rem;       /* 20.8px – Fliesstext, vergroessert fuer bessere Lesbarkeit */
  --fs-subhead: 1.5rem;    /* 24px – Unterzeilen wie "Konflikte klären..." */

  /* echte WordPress-Spacing-Presets */
  --sp-20: 0.44rem;
  --sp-30: 0.67rem;
  --sp-40: 1rem;
  --sp-50: 1.5rem;
  --sp-60: 2.25rem;
  --sp-70: 3.38rem;
  --sp-80: 5.06rem;

  --max-width: 1120px;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-text-muted);
  font-family: var(--font-body);
  font-weight: 300; /* Fliesstext kraeftiger fuer bessere Lesbarkeit (Ueberschriften bleiben bei 200) */
  line-height: 1.657;
  font-size: var(--fs-normal);
  -webkit-font-smoothing: antialiased;
}

.wrap {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 1.5rem;
}

h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: 300;
  letter-spacing: -0.01em;
  margin: 0 0 1rem;
  color: var(--color-text);
}

h1 { font-size: var(--fs-x-large); }
h2 { font-size: var(--fs-subhead); font-weight: 300; }
h3 { font-size: var(--fs-subhead); }

p { margin: 0 0 1rem; color: var(--color-text-muted); font-size: var(--fs-body); }

a { color: inherit; }

blockquote { font-style: italic; margin: 0; color: var(--color-text-muted); }

/* ---------- Header / Navigation ---------- */

.site-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  padding: 20px 0;
  flex-wrap: wrap;
  background: var(--color-bg);
  position: sticky;
  top: 0;
  z-index: 10;
}

/* Damit Sprungmarken-Links (z. B. der Curriculum-Vitae-Button) die
   Ziel-Ueberschrift nicht unter der fixierten Kopfzeile verstecken */
#cv { scroll-margin-top: 140px; }

.logo { display: flex; align-items: center; text-decoration: none; }
.logo img { height: 92px; width: auto; display: block; }

nav.main-nav { display: flex; gap: 2rem; flex-wrap: wrap; }

nav.main-nav a {
  text-decoration: none;
  font-size: var(--fs-normal);
  color: var(--color-text);
}

nav.main-nav a:hover { opacity: 0.6; }

.site-shell {
  padding: 0 4.5em;
}

@media (max-width: 1000px) {
  .site-shell { padding: 0 3em; }
}

@media (max-width: 600px) {
  .site-shell { padding: 0 1.8em; }
}

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

.hero {
  background: var(--color-accent);
  padding-top: 0;
  padding-bottom: 0;
}

.hero .wrap { padding-bottom: 0; padding-top: 3.3rem; }

.hero h1 {
  white-space: nowrap;
  font-size: var(--fs-large);
  margin: 0 0 1rem;
}

.hero p {
  font-size: var(--fs-body);
  color: var(--color-text-muted);
  max-width: none;
  margin-bottom: 1.657rem;
}

.hero-image-wrap {
  padding: 0;
}

.hero-image {
  width: 100%;
  height: auto;
  display: block;
  margin-top: 1.5rem;
}

@media (max-width: 800px) {
  .hero h1 { white-space: normal; }
}

/* ---------- Sections ---------- */

section { padding: 3.5rem 0; }

section:first-of-type { padding-top: 0; }

.section-accent { background: var(--color-accent); }

/* dünne Trennlinien zwischen den Bereichen, in Akzentfarbe (wie im Original) */
.section-sep {
  height: 3px;
  background: var(--color-accent);
  border: none;
  width: 100%;
  margin: 0;
}

.section-sep.section-sep-light {
  background: var(--color-bg);
  margin-top: 7rem;
  margin-bottom: 7rem;
}

.section-sep.section-sep-flush {
  margin-bottom: 0;
}

/* Helle Trennlinie in Hintergrundfarbe, fuer Seiten/Bereiche mit
   Akzentfarbe als Hintergrund (z. B. Beratungsansatz) - dort waere
   eine gelbe Linie unsichtbar. */
.section-sep.section-sep-white {
  background: var(--color-bg);
}

.eyebrow-heading {
  font-family: var(--font-display);
  font-size: var(--fs-large);
  font-weight: 300;
  color: var(--color-text);
  margin: 3.3rem 0 1rem;
}

.subhead {
  font-size: var(--fs-subhead);
  font-weight: 300;
  color: var(--color-text);
  margin: 0 0 1rem;
}

/* ---------- Pills / Buttons ---------- */

.pill {
  display: inline-block;
  background: var(--color-accent);
  border: none;
  border-radius: 999px;
  padding: 0.9rem 2rem;
  font-size: var(--fs-body);
  margin-bottom: 1rem;
  text-decoration: none;
  color: var(--color-text);
}

.btn {
  display: inline-block;
  border: none;
  border-radius: 999px;
  padding: 0.8rem 1.8rem;
  text-decoration: none;
  color: var(--color-text);
  font-size: 1.1rem;
  font-weight: 400;
  background: var(--color-accent);
  transition: background 0.15s ease, color 0.15s ease;
}

.btn:hover { background: var(--color-accent-hover); }

.btn.btn-accent { background: var(--color-accent); }

.btn.btn-accent:hover { background: var(--color-accent-hover); }

/* ---------- Listen ---------- */

ul.plain { margin: 0 0 1rem; padding-left: 1.3rem; }

ul.plain li {
  padding: 0.2rem 0;
  font-size: var(--fs-body);
  color: var(--color-text-muted);
}

.legal-content a { color: var(--color-text); text-decoration: underline; }

/* ---------- Curriculum Vitae (aufklappbar) ---------- */

.cv-details {
  margin-top: 1.5rem;
  padding-left: 1.6rem; /* Ein einziger Wert: Ueberschrift und Fliesstext
                           beginnen dadurch garantiert auf derselben Linie */
}

.cv-details summary {
  list-style: none;
  cursor: pointer;
  width: fit-content;
  font-size: var(--fs-subhead);
  color: var(--color-text);
  position: relative;
}

.cv-details summary::-webkit-details-marker { display: none; }
.cv-details summary::marker { content: ""; }

.cv-details summary::before {
  content: "▶";
  position: absolute;
  left: -1.6rem;
  top: 0.15em;
  width: 1rem;
  text-align: center;
  font-size: 0.7em;
  transition: transform 0.15s ease;
}

.cv-details[open] summary::before {
  transform: rotate(90deg);
}

.cv-content { margin-top: 1.5rem; margin-left: 0; }
.cv-content p { font-size: var(--fs-body); }
.cv-content p strong { color: var(--color-text); }

/* Nummerierte Akkordeon-Ueberschriften ("01 · Titel", "Modul 01 · Titel"):
   Die Nummer/Kennung bekommt eine feste Breite, damit der eigentliche
   Titel (und damit auch der bündig ausgerichtete Fliesstext darunter)
   bei allen Eintraegen an derselben Stelle beginnt. */
.cv-num { display: inline-block; width: 2.9rem; }
.cv-content--num { margin-left: 2.9rem; }

.cv-num--modul { width: 7.5rem; }
.cv-content--modul { margin-left: 7.5rem; }

/* "Ziel:"-Satz je Modul: umgebrochene Zeilen beginnen linksbuendig
   auf Hoehe des "Z" von "Ziel" (kein haengender Einzug). */
.cv-content p.ziel-satz {
  padding-left: 0;
  text-indent: 0;
}

/* Kurze Ein-Satz-Orientierung direkt unter dem Modultitel, noch vor
   Unterzeile und Leitfrage - fuer schnelles Erfassen beim Scannen. */
.cv-content p.modul-frage {
  font-weight: 600;
  color: var(--color-text);
  margin-bottom: 0.8rem;
}

/* ---------- Kontakt-Bereich (Startseite) ---------- */

#kontakt-section p:not(.eyebrow-heading) { margin: 0 0 0.1rem; font-size: var(--fs-body); }
.phone-icon { font-size: 1.3em; vertical-align: -0.05em; }
.mail-icon { font-size: 1.3em; vertical-align: -0.08em; }
.li-icon {
  display: inline-block;
  width: 1.05em;
  height: 1.05em;
  line-height: 1.05em;
  text-align: center;
  font-size: 0.95em;
  font-weight: 700;
  background: var(--color-text);
  color: var(--color-bg);
  border-radius: 3px;
  vertical-align: -0.1em;
}
#kontakt-section a { text-decoration: none; }

/* ---------- Footer ---------- */

footer {
  padding: var(--sp-40) 0;
  font-size: var(--fs-normal);
  color: var(--color-text-muted);
}

/* Direkte p-Regel (Fliesstext, 1.3rem) hat sonst Vorrang vor der
   geerbten, kleineren Footer-Schriftgroesse - hier explizit erzwungen. */
footer p { font-size: var(--fs-normal); }

footer p:first-child { margin: var(--sp-60) 0 var(--sp-60); }

footer a { color: var(--color-text-muted); text-decoration: underline; }

/* ---------- Legal-Seiten (Impressum / Datenschutz) ---------- */

.legal-content h1.legal-title { font-size: var(--fs-large); font-weight: 300; }
.legal-content h3 { font-size: var(--fs-medium); font-weight: 300; margin-top: 1.5rem; }
.legal-content p, .legal-content li { font-size: var(--fs-small); color: var(--color-text-muted); }
.legal-content ul.plain li { font-size: var(--fs-small); }
.legal-content a { color: var(--color-text); text-decoration: underline; }

/* ---------- Kontaktformular ---------- */

.contact-form { max-width: 560px; }
.contact-form label {
  display: block;
  margin-bottom: 1.2rem;
  font-size: var(--fs-body);
  color: var(--color-text);
}
.contact-form input,
.contact-form textarea {
  display: block;
  width: 100%;
  margin-top: 0.4rem;
  padding: 0.7rem 0.9rem;
  border: 1.5px solid var(--color-line);
  border-radius: 8px;
  font-family: var(--font-body);
  font-size: var(--fs-normal);
  background: #fff;
}
.contact-form textarea { min-height: 140px; resize: vertical; }

/* ---------- Team-Seite (Nutzer-Ergänzung, nicht im Original enthalten) ---------- */

.team-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 2rem;
  margin-top: 2rem;
}

.team-card {
  background: #fff;
  border: 1px solid var(--color-border-subtle);
  border-radius: 18px;
  padding: 2rem;
  text-align: left;
}

.team-card .photo-placeholder {
  width: 100%;
  aspect-ratio: 1 / 1;
  border-radius: 14px;
  background: var(--color-accent);
  margin-bottom: 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.85rem;
  color: var(--color-text-muted);
  text-align: center;
  padding: 1rem;
}

.team-card .role { color: var(--color-text-muted); font-size: 0.9rem; margin-bottom: 0.5rem; }

/* ---------- Landingpage-Vorlage ---------- */

.lp-hero { text-align: center; padding: 3rem 0; }
.lp-hero p { margin: 0 auto 1rem; }

.back-link {
  display: inline-block;
  margin-bottom: 1.5rem;
  font-size: 0.9rem;
  text-decoration: underline;
  color: var(--color-text-muted);
}

.benefits-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 2rem;
  margin-top: 2rem;
}

.benefit {
  border: 1px solid var(--color-border-subtle);
  border-radius: 16px;
  padding: 2rem;
  background: #fff;
  display: flex;
  flex-direction: column;
}

.lp-cta {
  background: var(--color-text);
  color: var(--color-bg);
  border-radius: 24px;
  padding: 3rem;
  text-align: center;
  margin: 3rem 0;
}

.lp-cta h2 { color: var(--color-bg); }


/* ---------- Responsive Feintuning (Ergaenzung fuer Mehrseiten-Struktur) ---------- */

@media (max-width: 700px) {
  .site-header { justify-content: center; text-align: center; }
  nav.main-nav { justify-content: center; gap: 1.2rem 1.6rem; }
  .logo img { height: 72px; }
  .hero .wrap { padding-top: 2rem; }
  .hero-image-wrap { padding: 0; }
  .benefits-grid { grid-template-columns: 1fr; }
}

@media (max-width: 420px) {
  nav.main-nav { gap: 0.8rem 1.2rem; font-size: 0.95rem; }
}

.benefit .btn { margin-top: auto; align-self: flex-start; }
.benefit h3 { margin-bottom: 0.8rem; }

.benefit-photo {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: 12px;
  margin-bottom: 1.2rem;
  display: block;
}


/* ---------- Anpassungen Startseite (Layout-Feedback) ---------- */

/* Beratungsfelder-Kacheln: jeweils zwei nebeneinander (ab Tablet-Breite) */
.benefits-grid--fields { grid-template-columns: repeat(2, 1fr); }

/* Kooperationen-Kacheln: untereinander statt nebeneinander, aber
   Kachel-Optik (Rahmen, Padding) bleibt erhalten. Das Foto ist
   linksbuendig eingebunden ("float") - der Fliesstext laeuft daneben
   nur auf Hoehe des Fotos schmal mit und danach ueber die volle
   Breite weiter, statt in einer durchgehend schmalen Spalte zu stehen. */
.benefits-grid--stack { grid-template-columns: 1fr; }

.benefits-grid--stack .benefit { display: block; }

.benefits-grid--stack .benefit-photo,
.benefits-grid--stack .benefit-photo-placeholder {
  float: left;
  width: 220px;
  aspect-ratio: 4 / 5;
  margin: 0 2rem 1rem 0;
}

.benefit-photo-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  border-radius: 12px;
  background: var(--color-bg);
  border: 1.5px dashed var(--color-border-subtle);
  color: var(--color-text-muted);
  font-size: 0.9rem;
  padding: 1rem;
}

/* Clearfix: der Kachel-Rahmen/Hintergrund soll das Foto vollstaendig
   umschliessen, auch wenn der Text kuerzer als das Foto ist */
.benefits-grid--stack .benefit::after { content: ""; display: table; clear: both; }

/* Ueberschrift und Namens-/Rollenzeile in den Kooperationen-Kacheln
   enger zusammenruecken (weniger Abstand als bei den Beratungsfelder-
   Kacheln, die die allgemeine .benefit h3-Regel nutzen). */
.benefits-grid--stack .benefit h3 { margin-bottom: 0.2rem; }
.benefits-grid--stack .benefit-text > p:first-of-type { margin-top: 0; }

@media (max-width: 500px) {
  .benefits-grid--stack .benefit-photo,
  .benefits-grid--stack .benefit-photo-placeholder { width: 140px; margin: 0 1.2rem 1rem 0; }
}

/* Symmetrischer Abstand vor/nach der gelben Trennlinie: Eyebrow-Heading
   verliert seinen zusaetzlichen Top-Margin, wenn es direkt nach der
   Trennlinie folgt - der section-Innenabstand allein reicht dann aus. */
.eyebrow-heading.flush { margin-top: 1rem; }

@media (max-width: 700px) {
  .benefits-grid--fields { grid-template-columns: 1fr; }
}


/* ---------- Anpassungen Startseite, Runde 2 ---------- */

/* 1) Hero: groessere, engere Zeile unter der Hauptueberschrift */
.hero h1 { margin-bottom: 0; line-height: 1.15; font-weight: 700; }

.hero .hero-tagline {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: var(--fs-subhead);
  line-height: 1.25;
  color: var(--color-text);
  margin: 0 0 1rem;
  letter-spacing: -0.01em;
}

/* 4) Curriculum-Vitae-Button auf der Startseite verlinkt auf das
   CV-Akkordeon auf der Unterseite und oeffnet es beim Ansprung - das
   Akkordeon selbst bleibt fuer normale Besucher:innen der Seite
   eingeklappt (kein "open"-Attribut), nur beim Sprung per Link wird
   es zwangsweise sichtbar und der Pfeil mitgedreht. */
.cv-details:target .cv-content { display: block !important; }
.cv-details:target summary::before { transform: rotate(90deg); }


/* ---------- Anpassungen Startseite, Runde 3 ---------- */

/* 4) Leerzeile oberhalb der gelben Trennlinien (nicht bei der hellen
   Variante auf der Ueber-mich-Seite, die bereits einen groesseren,
   bewusst gesetzten Abstand hat) */
hr.section-sep:not(.section-sep-light) { margin-top: 1rem; }


/* ---------- Anpassungen Startseite, Runde 4 ---------- */

/* 2) "Beratungsfelder" explizit auf dieselbe Groesse wie "Beratungsansatz"
   (beide sind .eyebrow-heading, hier zusaetzlich per ID abgesichert) */
#beratungsfelder { font-size: var(--fs-large); }

/* 9) Leerzeile unterhalb der Beratungsfelder-Kacheln */
.benefits-grid--fields { margin-bottom: 2rem; }


/* ---------- Anpassungen Runde 5: Navigation zurueck zur Startseite / nach oben ---------- */

.back-to-top {
  position: fixed;
  right: 0.4rem;
  bottom: 1.5rem;
  width: 3rem;
  height: 3rem;
  border-radius: 50%;
  background: var(--color-accent);
  color: var(--color-text);
  border: 2px solid var(--color-text);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.4rem;
  text-decoration: none;
  box-shadow: 0 2px 10px rgba(0,0,0,0.25);
  z-index: 50;
}

.back-to-top:hover { background: var(--color-accent-hover); }

@media (max-width: 700px) {
  .back-to-top { right: 0.3rem; bottom: 1rem; width: 2.6rem; height: 2.6rem; font-size: 1.2rem; }
}