/* ============================================================
   Psychotherapie Melcher — style.css
   ============================================================ */

/* --- Local Fonts (kein Google Fonts / DSGVO-konform) --- */
@font-face {
  font-family: 'Cormorant Garamond';
  src: url('../fonts/cormorant-garamond.woff2') format('woff2');
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Inter';
  src: url('../fonts/inter.woff2') format('woff2');
  font-weight: 400 600;
  font-style: normal;
  font-display: swap;
}

/* --- Custom Properties --- */
:root {
  --primary:      #4A7C6F;
  --primary-dark: #2F5C52;
  --accent:       #C9956A;
  --bg:           #FAFAF7;
  --bg-2:         #EDE9DF;
  --text:         #2C2C2C;
  --muted:        #6B6B6B;
  --line:         #DDD8D0;
  --white:        #ffffff;
  --shadow-card:  0 2px 16px rgba(0,0,0,0.07);
  --radius:       8px;
  --radius-btn:   4px;
  --max-w:        1100px;
  --transition:   0.25s ease;

  /* --- Themeable design tokens (verwaltet über Admin → Farben & Design) ---
     Diese Werte werden per Default hier gesetzt und in assets/css/theme.css
     überschrieben, sobald im Admin-Bereich Änderungen gespeichert wurden.
     Die Defaults hier entsprechen exakt dem bisherigen fest codierten Design. */
  /* Höhe der Kopfzeile — wird für die volle Hero-Höhe gebraucht. */
  --header-h: 90px;
  --header-bg:            #EDE9DF;
  --header-border:        #DDD8D0;
  --nav-link-color:       #8a8880;
  --nav-link-hover-color: #4A7C6F;
  --nav-divider-color:    #ccc9c0;
  --triangle-outer-color: rgba(74,124,111,0.55);
  --triangle-inner-color: #EDE9DF;
  --hero-overlay-color:   rgba(237,233,223,0.94);
  --scroll-arrow-color:   #2F5C52;
  --footer-bg:            #2F5C52;
  --footer-text-color:    rgba(255,255,255,0.8);
}

/* --- Reset & Base --- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; font-size: 16px; }

body {
  font-family: 'Inter', sans-serif;
  font-size: 1.05rem;
  line-height: 1.75;
  color: var(--text);
  background: var(--bg);
}

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

a { color: inherit; text-decoration: none; }

ul { list-style: none; }

/* --- Typography --- */
h1, h2, h3, h4 {
  font-family: 'Cormorant Garamond', Georgia, serif;
  line-height: 1.2;
  color: var(--text);
}
h1 { font-size: 3rem; font-weight: 600; }
h2 { font-size: 2rem; font-weight: 600; }
h3 { font-size: 1.4rem; font-weight: 500; }

p { margin-bottom: 1rem; }
p:last-child { margin-bottom: 0; }

/* --- Container --- */
.container {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0 1.5rem;
}

/* --- Buttons --- */
.btn {
  display: inline-block;
  padding: 0.8rem 2rem;
  border-radius: var(--radius-btn);
  font-family: 'Inter', sans-serif;
  font-size: 0.95rem;
  font-weight: 500;
  cursor: pointer;
  transition: background var(--transition), color var(--transition), box-shadow var(--transition), transform var(--transition);
  border: 2px solid transparent;
  text-align: center;
}

.btn-primary {
  background: var(--primary);
  color: var(--white);
  border-color: var(--primary);
}
.btn-primary:hover {
  background: var(--primary-dark);
  border-color: var(--primary-dark);
  box-shadow: 0 4px 12px rgba(74,124,111,0.3);
}

.btn-outline {
  background: transparent;
  color: var(--primary);
  border-color: var(--primary);
}
.btn-outline:hover {
  background: var(--primary);
  color: var(--white);
  box-shadow: 0 4px 12px rgba(74,124,111,0.3);
}

.btn-white {
  background: var(--white);
  color: var(--primary);
  border-color: var(--white);
}
.btn-white:hover {
  background: transparent;
  color: var(--white);
  border-color: var(--white);
}

.btn-outline-white {
  background: transparent;
  color: var(--white);
  border-color: var(--white);
}
.btn-outline-white:hover {
  background: var(--white);
  color: var(--primary);
}

/* --- Header / Nav --- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--white);
  transition: box-shadow var(--transition);
}
.site-header.scrolled {
  box-shadow: 0 2px 16px rgba(0,0,0,0.1);
}

.nav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 72px;
}

.nav-logo img {
  height: 48px;
  width: auto;
}

.nav-links {
  display: flex;
  align-items: center;
  gap: 2rem;
}
.nav-links a {
  font-size: 0.95rem;
  font-weight: 500;
  color: var(--text);
  transition: color var(--transition);
}
.nav-links a:hover,
.nav-links a.active {
  color: var(--primary);
}
.nav-links .nav-cta {
  background: var(--primary);
  color: var(--white);
  padding: 0.5rem 1.25rem;
  border-radius: var(--radius-btn);
  font-weight: 500;
}
.nav-links .nav-cta:hover {
  background: var(--primary-dark);
  color: var(--white);
}

/* Hamburger */
.hamburger {
  display: none;
  flex-direction: column;
  gap: 5px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px;
}
.hamburger span {
  display: block;
  width: 24px;
  height: 2px;
  background: var(--text);
  transition: transform var(--transition), opacity var(--transition);
}
.hamburger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.hamburger.open span:nth-child(2) { opacity: 0; }
.hamburger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* --- Sections --- */
section { padding: 5rem 0; }

.section-bg2 { background: var(--bg-2); }

/* --- Page Hero (inner pages) --- */
.page-hero {
  background: var(--bg-2);
  padding: 4rem 0 3rem;
  border-bottom: 1px solid var(--line);
}
.page-hero h1 { font-size: 2.8rem; margin-bottom: 0.5rem; }
.page-hero p { color: var(--muted); font-size: 1.1rem; }

/* --- Hero (index) --- */
/* Der Hero füllt immer exakt den sichtbaren Rest des Viewports unter dem
   Header — auf Handys, Tablets und Desktops. dvh berücksichtigt die
   ein-/ausblendenden Browserleisten auf Mobilgeräten. */
.hero {
  position: relative;
  min-height: calc(100vh - var(--header-h));
  min-height: calc(100dvh - var(--header-h));
  display: flex;
  align-items: center;
  background: url('../images/room.webp') center center / cover no-repeat;
  padding: 5rem 0 6rem;
}
.hero-overlay {
  position: absolute;
  inset: 0;
  /* Heller Schleier links (Textlesbarkeit), nach rechts ausgeblendet
     damit das Startbild dort ungetrübt sichtbar bleibt. */
  background: linear-gradient(to right, var(--hero-overlay-color) 0%, var(--hero-overlay-color) 52%, transparent 78%);
}

/* --- Scroll-Pfeil (nur Startseiten-Hero) --- */
.scroll-arrow {
  position: absolute;
  left: 50%;
  bottom: 28px;
  transform: translateX(-50%);
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  color: var(--scroll-arrow-color);
  text-decoration: none;
  border-radius: 50%;
  animation: scrollArrowBob 2.2s ease-in-out infinite;
}
.scroll-arrow svg {
  width: 26px;
  height: 26px;
  display: block;
}
.scroll-arrow:focus-visible {
  outline: 3px solid rgba(255,255,255,0.9);
  outline-offset: 2px;
  box-shadow: 0 0 0 3px rgba(0,0,0,0.25);
}

@keyframes scrollArrowBob {
  0%, 100% { transform: translateX(-50%) translateY(0); }
  50%      { transform: translateX(-50%) translateY(8px); }
}

@media (prefers-reduced-motion: reduce) {
  .scroll-arrow { animation: none; }
}

@media (max-width: 768px) {
  .scroll-arrow { bottom: 14px; }
}
.hero-content {
  position: relative;
  z-index: 1;
  color: var(--text);
  max-width: 620px;
}

/* --- Hero zweispaltig: Text links, Portrait rechts --- */
.hero-grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.8fr);
  align-items: center;
  gap: 3rem;
}
.hero-grid .hero-content { max-width: 100%; }
.hero-portrait {
  justify-self: end;
  width: 100%;
  max-width: 360px;
}
.hero-portrait img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 10px;
  box-shadow: 0 18px 44px rgba(0,0,0,0.22);
}
@media (max-width: 900px) {
  .hero-grid { grid-template-columns: 1fr; gap: 2rem; }
  .hero-portrait { justify-self: center; max-width: 260px; }
}
.section-kicker.hero-kicker {
  color: var(--accent);
}
.hero-content h1 {
  color: var(--text);
  font-size: 3.5rem;
  margin-bottom: 1rem;
}
.hero-content p {
  font-size: 1.2rem;
  color: var(--muted);
  margin-bottom: 2rem;
  letter-spacing: 0.02em;
}
.hero-buttons {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
}
.hero-buttons .btn {
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 0.85rem;
}

/* --- Intro Section --- */
.intro-section {
  text-align: center;
  scroll-margin-top: 90px; /* Ausgleich für sticky Header beim Anker-Scroll */
}
.themes-section {
  scroll-margin-top: 90px; /* Ausgleich für sticky Header beim Anker-Scroll (#themen) */
}
@media (max-width: 768px) {
  .intro-section,
  .themes-section { scroll-margin-top: 64px; }
}
.intro-section h2 {
  margin-bottom: 1.25rem;
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
}
.intro-section p {
  max-width: 780px;
  margin: 0 auto 2rem;
  color: var(--muted);
  font-size: 1.1rem;
}

.section-kicker {
  display: block;
  margin-bottom: 0.8rem;
  color: var(--primary);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}
.section-kicker-light { color: rgba(255,255,255,0.72); }

/* Abschnittsüberschrift, die wie eine echte Überschrift wirkt
   (statt der kleinen, gesperrten Abschnittsmarke) */
.section-heading {
  display: block;
  font-family: var(--font-display, inherit);
  font-size: 2rem;
  line-height: 1.2;
  color: var(--text);
  letter-spacing: 0.01em;
  text-transform: none;
  margin-bottom: 1.2rem;
}
@media (max-width: 768px) {
  .section-heading { font-size: 1.6rem; }
}
.split-text .section-kicker { margin-bottom: 0.8rem; }

.depth-section {
  background: var(--primary-dark);
  color: rgba(255,255,255,0.86);
}
.depth-layout {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: 5rem;
  align-items: start;
}
.depth-heading h2 {
  color: var(--white);
  font-size: 2.75rem;
}
.depth-copy {
  padding-top: 1.8rem;
  font-size: 1.08rem;
}
.depth-copy p { color: rgba(255,255,255,0.78); }

.narrow-copy { max-width: 820px; }
.narrow-copy h2 { margin-bottom: 1.5rem; }
.narrow-copy p { color: var(--muted); }
.lead-copy { font-size: 1.15rem; color: var(--text) !important; }

.info-pair {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.5rem;
}
.info-panel {
  padding: 2.5rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--white);
}
.info-panel-accent { border-top: 4px solid var(--accent); }
.info-panel h2 { margin-bottom: 1.25rem; }
.info-panel p { color: var(--muted); }

.text-link {
  display: inline-block;
  color: var(--primary);
  font-size: 0.92rem;
  font-weight: 600;
  border-bottom: 1px solid currentColor;
  padding-bottom: 2px;
  transition: opacity var(--transition);
}
.text-link:hover { opacity: 0.65; }

.first-step {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 4rem;
  align-items: center;
}
.first-step h2 { margin-bottom: 1rem; }
.first-step p { max-width: 720px; color: var(--muted); }

.section-heading-centered {
  text-align: center;
  margin-bottom: 2.5rem;
}
.framework-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
}
.framework-item {
  padding: 1.6rem 1.4rem;
  border-top: 2px solid var(--primary);
  background: var(--bg-2);
}
.framework-item strong {
  display: block;
  margin-bottom: 0.65rem;
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 1.35rem;
  font-weight: 600;
}
.framework-item span {
  display: block;
  color: var(--muted);
  font-size: 0.9rem;
  line-height: 1.6;
}
.framework-note {
  max-width: 760px;
  margin: 2rem auto 0;
  color: var(--muted);
  font-size: 0.9rem;
  text-align: center;
}
.centered-link { margin-top: 1.25rem; text-align: center; }

/* --- 2-column split --- */
.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4rem;
  align-items: center;
}
.split img {
  width: 100%;
  height: 400px;
  object-fit: cover;
  border-radius: var(--radius);
}
.split-text h2 { margin-bottom: 1.25rem; }
.split-text p { color: var(--muted); }

/* --- Themes Grid --- */
.themes-section { text-align: center; }
.themes-section h2 { margin-bottom: 3rem; }

.themes-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
  margin-bottom: 3rem;
}

.theme-card {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1.75rem 1.5rem;
  text-align: center;
  box-shadow: var(--shadow-card);
  transition: transform var(--transition), box-shadow var(--transition);
}
.theme-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 6px 24px rgba(0,0,0,0.1);
}
.theme-icon {
  width: 44px;
  height: 44px;
  background: var(--bg-2);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 1rem;
  color: var(--primary);
}
.theme-icon svg {
  width: 22px;
  height: 22px;
  display: block;
}
.theme-card h3 {
  font-size: 1.05rem;
  font-family: 'Inter', sans-serif;
  font-weight: 600;
  color: var(--text);
}

/* --- CTA Banner --- */
.cta-banner {
  background: var(--primary);
  color: var(--white);
  text-align: center;
  padding: 4rem 0;
}
.cta-banner h2 {
  color: var(--white);
  margin-bottom: 0.75rem;
}
.cta-banner p {
  color: rgba(255,255,255,0.85);
  margin-bottom: 2rem;
  font-size: 1.1rem;
}

/* --- About Page --- */
.about-intro {
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  gap: 4rem;
  align-items: start;
}
.about-intro img {
  width: 100%;
  height: 480px;
  object-fit: cover;
  border-radius: var(--radius);
}
.about-intro-text h2 { margin-bottom: 1.25rem; }
.about-intro-text p { color: var(--muted); margin-bottom: 1rem; }

.bg-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
}
.bg-card {
  background: var(--white);
  border-radius: var(--radius);
  padding: 2rem 1.75rem;
  box-shadow: var(--shadow-card);
  transition: transform var(--transition), box-shadow var(--transition);
}
.bg-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 6px 24px rgba(0,0,0,0.1);
}
.bg-card-icon {
  width: 48px;
  height: 48px;
  background: var(--bg-2);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1.25rem;
  color: var(--primary);
}
.bg-card h3 { margin-bottom: 0.75rem; }
.bg-card p { color: var(--muted); font-size: 0.98rem; }

.about-cta { text-align: center; }

/* Mid-page CTA — schmaler Banner zwischen Sektionen */
.mid-cta {
  text-align: center;
  padding: 2.5rem 1.5rem;
  background: var(--bg-2);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.mid-cta p {
  font-size: 1rem;
  color: var(--muted);
  margin-bottom: 1rem;
}

/* Schlichter Text-Link als CTA (Themen-Sektion) */
.themes-cta-link {
  display: inline-block;
  margin-top: 2rem;
  color: var(--primary);
  font-family: 'Inter', sans-serif;
  font-size: 0.9rem;
  font-weight: 500;
  letter-spacing: 0.05em;
  border-bottom: 1px solid var(--primary);
  padding-bottom: 2px;
  transition: opacity 0.2s;
}
.themes-cta-link:hover { opacity: 0.65; }

/* --- Zusammenarbeit --- */
.steps-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
}
.step-card {
  background: var(--white);
  border-radius: var(--radius);
  padding: 2rem 1.75rem;
  box-shadow: var(--shadow-card);
  transition: transform var(--transition), box-shadow var(--transition);
}
.step-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 6px 24px rgba(0,0,0,0.1);
}
.step-number {
  font-family: 'Cormorant Garamond', serif;
  font-size: 3rem;
  font-weight: 700;
  color: var(--primary);
  line-height: 1;
  margin-bottom: 1rem;
  opacity: 0.5;
}
.step-card h3 { margin-bottom: 0.75rem; }
.step-card p { color: var(--muted); font-size: 0.98rem; }

.honorar-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.25rem;
  margin-bottom: 2rem;
}
.honorar-card {
  background: var(--white);
  border-radius: var(--radius);
  padding: 1.5rem 1.75rem;
  box-shadow: var(--shadow-card);
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}
.honorar-card .label {
  font-size: 0.9rem;
  color: var(--muted);
  font-weight: 500;
}
.honorar-card .price {
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.8rem;
  font-weight: 600;
  color: var(--primary);
}
.honorar-card .duration {
  font-size: 0.88rem;
  color: var(--muted);
}
.honorar-card.social .price {
  font-size: 1.2rem;
  color: var(--accent);
}

.honorar-note {
  background: var(--white);
  border-left: 3px solid var(--primary);
  border-radius: 0 var(--radius) var(--radius) 0;
  padding: 1.25rem 1.5rem;
  color: var(--muted);
  font-size: 0.95rem;
  margin-top: 0.5rem;
}

.absage-box {
  background: var(--white);
  border: 1px solid var(--line);
  border-left: 4px solid var(--accent);
  border-radius: 0 var(--radius) var(--radius) 0;
  padding: 1.5rem 1.75rem;
  color: var(--muted);
  font-size: 0.95rem;
}
.absage-box strong { color: var(--text); }

.zielgruppe-text {
  text-align: center;
  color: var(--muted);
  max-width: 640px;
  margin: 0 auto 2.5rem;
}

.zusammenarbeit-cta { text-align: center; }

/* --- Kontakt --- */
.kontakt-grid {
  display: grid;
  grid-template-columns: 1fr 1.5fr;
  gap: 4rem;
  align-items: start;
}

.kontakt-info h2 { margin-bottom: 1.5rem; }
.kontakt-info h3 {
  font-size: 1.3rem;
  margin-bottom: 0.25rem;
}
.kontakt-info .subtitle {
  color: var(--muted);
  font-size: 0.95rem;
  margin-bottom: 1.5rem;
}
.kontakt-detail {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  margin-bottom: 1rem;
}
.kontakt-detail svg {
  flex-shrink: 0;
  margin-top: 2px;
  color: var(--primary);
}
.kontakt-detail a:hover { color: var(--primary); }
.kontakt-hint {
  margin-top: 1.5rem;
  padding: 1rem 1.25rem;
  background: var(--bg-2);
  border-radius: var(--radius);
  color: var(--muted);
  font-size: 0.93rem;
}

/* Contact Form */
.contact-form {
  background: var(--white);
  border-radius: var(--radius);
  padding: 2.5rem;
  box-shadow: var(--shadow-card);
}
.contact-form h2 { margin-bottom: 1.75rem; }

.form-group { margin-bottom: 1.25rem; }
.form-group label {
  display: block;
  font-size: 0.9rem;
  font-weight: 500;
  margin-bottom: 0.4rem;
  color: var(--text);
}
.form-group input,
.form-group textarea {
  width: 100%;
  padding: 0.75rem 1rem;
  border: 1.5px solid var(--line);
  border-radius: var(--radius-btn);
  font-family: 'Inter', sans-serif;
  font-size: 1rem;
  color: var(--text);
  background: var(--bg);
  transition: border-color var(--transition);
  resize: vertical;
}
.form-group input:focus,
.form-group textarea:focus {
  outline: none;
  border-color: var(--primary);
}
.form-group textarea { min-height: 140px; }

.honeypot { display: none !important; }

.form-msg {
  margin-top: 1rem;
  padding: 0.85rem 1rem;
  border-radius: var(--radius-btn);
  font-size: 0.95rem;
  display: none;
}
.form-msg.success {
  background: #e8f5e9;
  color: #2e7d32;
  display: block;
}
.form-msg.error {
  background: #fdecea;
  color: #c62828;
  display: block;
}

/* --- Footer --- */
.site-footer {
  background: var(--footer-bg);
  color: var(--footer-text-color);
  padding: 3rem 0 2rem;
}
.footer-inner {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr;
  gap: 3rem;
  padding-bottom: 2rem;
  border-bottom: 1px solid rgba(255,255,255,0.15);
  margin-bottom: 1.5rem;
}
.footer-brand img { height: 40px; margin-bottom: 1rem; filter: brightness(0) invert(1); }
.footer-brand p { font-size: 0.9rem; max-width: 260px; }
.footer-col h4 {
  color: var(--white);
  font-size: 0.9rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 1rem;
  font-family: 'Inter', sans-serif;
}
.footer-col ul li { margin-bottom: 0.5rem; }
.footer-col ul a {
  font-size: 0.9rem;
  transition: color var(--transition);
}
.footer-col ul a:hover { color: var(--white); }
.footer-col address { font-style: normal; font-size: 0.9rem; }
.footer-col address a:hover { color: var(--white); }

.footer-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.85rem;
  color: rgba(255,255,255,0.5);
}
.footer-bottom a { color: rgba(255,255,255,0.6); text-decoration: none; }
.footer-bottom a:hover { color: var(--white); }

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width: 768px) {
  h1 { font-size: 2.2rem; }
  h2 { font-size: 1.6rem; }
  .hero-content h1 { font-size: 2.4rem; }
  .hero { padding: 3rem 0 5rem; background-position: center; }
  .hero-overlay { background: linear-gradient(180deg, var(--hero-overlay-color) 72%, transparent 100%); }
  .hero-content { max-width: 100%; }

  /* Header */
  .nav-links { display: none; flex-direction: column; gap: 0; position: absolute;
    top: 72px; left: 0; right: 0; background: var(--white);
    border-top: 1px solid var(--line); padding: 1rem 1.5rem;
    box-shadow: 0 8px 24px rgba(0,0,0,0.08); }
  .nav-links.open { display: flex; }
  .nav-links a { padding: 0.75rem 0; border-bottom: 1px solid var(--line); width: 100%; }
  .nav-links a:last-child { border-bottom: none; }
  .nav-links .nav-cta { margin-top: 0.5rem; text-align: center; border-radius: var(--radius-btn); }
  .hamburger { display: flex; }
  .site-header { position: sticky; }
  .nav-inner { position: relative; }

  /* Grids */
  .split { grid-template-columns: 1fr; gap: 2rem; }
  .split img { height: 260px; }
  .split.reverse .split-img { order: -1; }
  .themes-grid { grid-template-columns: 1fr 1fr; }
  .bg-cards { grid-template-columns: 1fr; }
  .steps-grid { grid-template-columns: 1fr; }
  .honorar-grid { grid-template-columns: 1fr; }
  .about-intro { grid-template-columns: 1fr; gap: 2rem; }
  .about-intro img { height: 300px; }
  .kontakt-grid { grid-template-columns: 1fr; gap: 2.5rem; }
  .depth-layout { grid-template-columns: 1fr; gap: 1.5rem; }
  .depth-heading h2 { font-size: 2.2rem; }
  .depth-copy { padding-top: 0; }
  .info-pair { grid-template-columns: 1fr; }
  .first-step { grid-template-columns: 1fr; gap: 1.5rem; }
  .first-step .btn { justify-self: start; }
  .framework-grid { grid-template-columns: 1fr 1fr; }
  .footer-inner { grid-template-columns: 1fr; gap: 2rem; }
  .footer-bottom { flex-direction: column; gap: 0.5rem; text-align: center; }

  /* Keine section-Abstände hier — die Redesign-Ebene weiter unten
     setzt sie zentral über --section-pad-y (clamp deckt Handy mit ab).
     Eine Regel an dieser Stelle hätte keine Wirkung mehr. */
  .contact-form { padding: 1.75rem; }
}

@media (max-width: 480px) {
  .themes-grid { grid-template-columns: 1fr; }
  .hero-content h1 { font-size: 2rem; }
  .framework-grid { grid-template-columns: 1fr; }
  .info-panel { padding: 1.75rem; }
}


/* ============================================================
   HEADER — Doppeltes Dreieck-Design (Original-Style)
   ============================================================ */

/* Geometrie des Kopf-Dreiecks an einer Stelle. Die mobilen Stufen
   weiter unten ändern nur diese Werte — Form, Rahmen und Logo
   skalieren dann gemeinsam, und der Hero-Abstand rechnet die Höhe
   selbst mit. */
:root {
  --tri-w:        240px;  /* Breite des äußeren Dreiecks */
  --tri-h:        148px;  /* Höhe   des äußeren Dreiecks */
  --tri-frame:     14px;  /* Rahmenbreite bis zum inneren Dreieck */
  --tri-logo-w:    82px;
  --tri-logo-top:  12px;
}

.site-header {
  position: sticky;
  top: 0;
  z-index: 500;
  background: var(--header-bg);
  overflow: visible;
}
.site-header.scrolled {
  box-shadow: 0 1px 8px rgba(0,0,0,0.07);
}

.header-inner {
  display: flex;
  align-items: center;
  height: 90px;
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 2.5rem;
  position: relative;
  border-bottom: 1px solid var(--header-border);
}

/* Nav links — jede Seite bekommt eine gleich breite Hälfte neben dem
   Dreieck und zentriert ihre Links darin. Dadurch sind die Abstände
   links und rechts spiegelgleich, unabhängig davon, wie lang die
   einzelnen Menüpunkte sind. */
.nav-left,
.nav-right {
  display: flex;
  align-items: center;
  gap: 1.6rem;
  position: absolute;
  z-index: 2;
}
/* Beide Gruppen ruecken an das Dreieck heran: die linke endet dort, die
   rechte beginnt dort — gleiche Luft zum Dreieck auf beiden Seiten. */
.nav-left  { justify-content: flex-end; }
.nav-right { justify-content: flex-start; }
/* Die Links bleiben innerhalb der Inhaltsbreite (--max-w), damit das
   Menü mit dem Seiteninhalt fluchtet und nicht am Fensterrand klebt.
   1100px Inhalt - 2x1.5rem Padding => aussen bei 50% - 526px. */
.nav-left {
  left: max(2.5rem, calc(50% - 526px));
  right: calc(50% + 140px);   /* halbe Dreiecksbreite + 20px Luft */
}
.nav-right {
  left: calc(50% + 140px);
  right: max(2.5rem, calc(50% - 526px));
}

.nav-link {
  font-family: 'Inter', sans-serif;
  font-size: 0.88rem;
  font-weight: 400;
  letter-spacing: 0.02em;
  color: var(--nav-link-color);
  padding: 0.3rem 0.6rem;
  transition: color 0.2s;
  text-decoration: none;
  white-space: nowrap;
}
.nav-link:hover { color: var(--nav-link-hover-color); }

.nav-divider {
  display: inline-block;
  width: 1px;
  height: 14px;
  background: var(--nav-divider-color);
  margin: 0 0.25rem;
}

/* ══════════════════════════════════════════════════════════
   Doppeltes Dreieck:
   - Äußeres (hinteres): größer, wärmeres Beige (#D9D0C0)
   - Inneres (vorderes): kleiner, helleres Creme, mit Logo
   ══════════════════════════════════════════════════════════ */
.header-logo-wrap {
  position: absolute;
  left: 50%;
  top: 0;
  transform: translateX(-50%);
  z-index: 600;
  text-decoration: none;
  display: block;
  /* Breite = äußeres Dreieck */
  width: var(--tri-w);
  height: var(--tri-h);
}

/* Äußeres Dreieck — hintere, wärmere Farbe */
.header-logo-wrap::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--triangle-outer-color); /* Petrol, zurückgenommen */
  clip-path: polygon(0 0, 100% 0, 50% 100%);
  z-index: 1;
}

/* Inneres Dreieck — vorderes, helleres Creme */
.header-logo-wrap::after {
  content: '';
  position: absolute;
  /* Rahmen: --tri-frame links/rechts, 0 oben, --tri-frame unten */
  left: var(--tri-frame);
  right: var(--tri-frame);
  top: 0;
  bottom: var(--tri-frame);
  background: var(--triangle-inner-color);    /* helles Creme */
  clip-path: polygon(0 0, 100% 0, 50% 100%);
  z-index: 2;
}

/* Logo im inneren Dreieck */
.header-logo-wrap img {
  position: absolute;
  /* Optischer Schwerpunkt des Dreiecks liegt bei 1/3 der Höhe */
  top: var(--tri-logo-top);
  left: 50%;
  transform: translateX(-50%);
  width: var(--tri-logo-w);
  height: auto;
  z-index: 3;
}

/* ── Hamburger ── */
.hamburger {
  display: none;
  flex-direction: column;
  gap: 5px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0.4rem;
  position: absolute;
  right: 1rem;
  z-index: 3;
}
.hamburger span {
  display: block; width: 24px; height: 2px;
  background: var(--text); border-radius: 2px;
  transition: all 0.25s;
}
.hamburger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.hamburger.open span:nth-child(2) { opacity: 0; }
.hamburger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.mobile-menu {
  display: none;
  flex-direction: column;
  background: var(--header-bg);
  border-top: 1px solid var(--header-border);
  padding: 1rem 2rem 1.5rem;
}
.mobile-menu .nav-link {
  padding: 0.75rem 0;
  border-bottom: 1px solid var(--line);
  font-size: 0.95rem;
  display: block; color: var(--text);
}
.mobile-menu .nav-link:last-child { border-bottom: none; }
.mobile-menu.open { display: flex; }

/* Zwischen 769 und 1000 px wird es neben dem Dreieck eng —
   Schrift und Reserve leicht zurücknehmen, damit die Abstände
   links und rechts gleich bleiben. */
@media (max-width: 1000px) {
  .nav-link { font-size: 0.8rem; }
  .nav-left  { right: calc(50% + 125px); }
  .nav-right { left:  calc(50% + 125px); }
}

/* Unter 900 px wird es neben dem Dreieck zu eng für vier Menüpunkte —
   ab hier übernimmt das Hamburger-Menü. */
@media (max-width: 900px) {
  .nav-left, .nav-right { display: none; }
  .hamburger { display: flex; }
}

@media (max-width: 768px) {
  .nav-left, .nav-right { display: none; }
  .hamburger { display: flex; }
  .header-inner { height: 64px; }
  /* Am Handy war das Doppeldreieck zu auffällig: es ragte 61px unter
     die Kopfzeile in den Hero. Rund ein Viertel kleiner in jeder
     Richtung, Seitenverhältnis bleibt (180/125 ≈ 132/92). */
  :root {
    --header-h:      64px;
    --tri-w:        132px;
    --tri-h:         92px;
    --tri-frame:      9px;
    --tri-logo-w:    48px;
    --tri-logo-top:   8px;
  }
}

/* Sehr schmale Geräte: noch eine Stufe kleiner, damit das Dreieck
   nicht die halbe Bildschirmbreite einnimmt. */
@media (max-width: 420px) {
  :root {
    --tri-w:        116px;
    --tri-h:         81px;
    --tri-frame:      8px;
    --tri-logo-w:    42px;
    --tri-logo-top:   7px;
  }
}

.nav-inner { display: none !important; }
.header-triangle { display: none !important; }

.intro-cta {
  margin-top: 2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.25rem;
  flex-wrap: wrap;
}

/* ============================================================
   Aufklappbare Textblöcke (Akkordeon)
   ------------------------------------------------------------
   Umsetzung mit nativem <details>/<summary>: funktioniert ohne
   JavaScript, ist per Tastatur bedienbar und für Screenreader
   zugänglich. Markup-Muster:

     <div class="accordion-group">
       <details class="accordion">
         <summary data-editable="...">Titel</summary>
         <div class="accordion-body">
           <p data-editable="...">Fließtext</p>
         </div>
       </details>
     </div>

   Hinweis fürs Admin-Panel: data-editable gehört auf <summary>
   und auf den Absatz im Body — nicht auf <details> selbst,
   da das Dashboard den textContent des Elements ausliest.
   ============================================================ */

/* Einleitungstext oberhalb einer Akkordeon-Gruppe */
.accordion-intro {
  max-width: 820px;
  margin: 0 auto 2.5rem;
}
.accordion-intro p {
  color: var(--muted);
}

.accordion-group {
  max-width: 820px;
  margin: 0 auto;
  text-align: left;
  border-top: 1px solid var(--line);
}

.accordion {
  border-bottom: 1px solid var(--line);
  background: transparent;
}

/* Titelzeile: Flex, damit das Plus-Zeichen rechts sitzt */
.accordion > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  cursor: pointer;
  list-style: none;
  padding: 1.15rem 0.25rem;
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--text);
  transition: color var(--transition);
}
/* Standard-Dreieck der Browser entfernen */
.accordion > summary::-webkit-details-marker { display: none; }
.accordion > summary::marker { content: ''; }

.accordion > summary:hover { color: var(--primary); }

.accordion > summary:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 3px;
  border-radius: var(--radius-btn);
}

/* Symbol vor dem Thementitel.
   Liegt bewusst AUSSERHALB des data-editable-Bereichs, damit das
   Admin-Panel es beim Speichern nicht entfernt. */
.accordion-icon {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  margin-right: 0.85rem;
  color: var(--accent);
}
.accordion-icon svg {
  width: 26px;
  height: 26px;
  display: block;
}
.accordion-title {
  flex: 1 1 auto;
  min-width: 0;
}
.accordion[open] > summary .accordion-icon { color: var(--primary); }

@media (max-width: 768px) {
  .accordion-icon { width: 24px; height: 24px; margin-right: 0.6rem; }
  .accordion-icon svg { width: 21px; height: 21px; }
}

/* Plus/Minus-Indikator */
.accordion > summary::after {
  content: '';
  flex: 0 0 auto;
  width: 14px;
  height: 14px;
  background:
    linear-gradient(var(--primary), var(--primary)) center/14px 2px no-repeat,
    linear-gradient(var(--primary), var(--primary)) center/2px 14px no-repeat;
  transition: transform var(--transition);
}
.accordion[open] > summary::after {
  /* senkrechten Strich ausblenden → Minus */
  background: linear-gradient(var(--primary), var(--primary)) center/14px 2px no-repeat;
}
.accordion[open] > summary { color: var(--primary); }

.accordion-body {
  padding: 0 0.25rem 1.4rem;
}
.accordion-body p {
  color: var(--muted);
  margin-bottom: 0;
}

@media (max-width: 768px) {
  .accordion > summary { font-size: 1.1rem; padding: 1rem 0.25rem; }
}


/* ============================================================
   REDESIGN 2026 — Warmes Creme · Salbei · Terrakotta
   ------------------------------------------------------------
   Diese Ebene liegt bewusst am Ende der Datei und überschreibt
   die älteren Regeln. Die Kopfzeilen-Geometrie (Doppeldreieck)
   bleibt unberührt — hier werden nur Farben und Abstände
   nachgezogen.

   Farbwerte kommen weiterhin aus den über Admin → Farben &
   Design verwalteten Variablen. Die zusätzlichen Töne hier
   werden mit color-mix() daraus abgeleitet, damit eine
   Farbänderung im Admin die ganze Seite mitnimmt.
   ============================================================ */

:root {
  --font-display: 'Cormorant Garamond', Georgia, serif;
  --font-body:    'Inter', system-ui, -apple-system, sans-serif;

  /* Abgeleitete Flächentöne */
  --tone-page:  color-mix(in srgb, var(--bg) 52%, var(--bg-2));
  --tone-soft:  color-mix(in srgb, var(--white) 70%, var(--bg-2));
  --tone-warm:  var(--bg-2);
  --tone-deep:  color-mix(in srgb, var(--bg-2) 78%, var(--primary));

  /* Salbei- und Terrakotta-Abstufungen */
  --sage-tint:  color-mix(in srgb, var(--primary) 11%, var(--white));
  --sage-ring:  color-mix(in srgb, var(--primary) 24%, transparent);
  --sage-ghost: color-mix(in srgb, var(--primary) 7%, transparent);
  --terra-line: color-mix(in srgb, var(--accent) 85%, transparent);
  --terra-soft: color-mix(in srgb, var(--accent) 18%, transparent);

  /* --- Vertikale Rhythmik ------------------------------------------
     EIN zentraler Stellhebel für die Abstände zwischen den
     Abschnitten — gilt für alle Seiten (index, ueber-mich,
     zusammenarbeit, kontakt, impressum, datenschutz). clamp() geht
     mit der Fensterbreite mit, deshalb deckt ein Wert Desktop und
     Handy ab: der erste Wert ist das Handy-Minimum, der letzte die
     Desktop-Obergrenze.
     Wer die Seite luftiger oder dichter will, ändert hier — nicht
     in den einzelnen Abschnittsregeln.                               */
  --section-pad-y:        clamp(2rem, 4.6vw, 3.9rem);
  --page-hero-pad-top:    clamp(2.1rem, 4.6vw, 3.6rem);
  --page-hero-pad-bottom: clamp(2.4rem, 5.2vw, 3.9rem);

  /* Weiche Sektionskurve — der Bogen zählt zum Abstand zwischen zwei
     Abschnitten, deshalb hängt er an derselben Rhythmik. */
  --curve-h: clamp(34px, 4.8vw, 68px);

  /* Pfeil für Schaltflächen — als Maske, damit er die Textfarbe erbt.
     Inline-Daten-URI, kein externer Anbieter. */
  --arrow-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 28 12' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'><path d='M1 6h25M21 1l5 5-5 5'/></svg>");

  /* Zarter Blattzweig als Hintergrunddekor — ebenfalls Inline-Daten-URI. */
  --leaf-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 430' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'><path d='M252 412C230 300 190 190 112 24'/><path d='M0 0C13-12 36-10 46 2 34 16 11 14 0 0Z' transform='translate(242 365) rotate(-46)'/><path d='M0 0C13-12 36-10 46 2 34 16 11 14 0 0Z' transform='translate(233 331) rotate(-164) scale(0.9)'/><path d='M0 0C13-12 36-10 46 2 34 16 11 14 0 0Z' transform='translate(220 289) rotate(-50) scale(1.12)'/><path d='M0 0C13-12 36-10 46 2 34 16 11 14 0 0Z' transform='translate(207 249) rotate(-167)'/><path d='M0 0C13-12 36-10 46 2 34 16 11 14 0 0Z' transform='translate(192 208) rotate(-53) scale(1.05)'/><path d='M0 0C13-12 36-10 46 2 34 16 11 14 0 0Z' transform='translate(174 164) rotate(-170) scale(0.92)'/><path d='M0 0C13-12 36-10 46 2 34 16 11 14 0 0Z' transform='translate(154 117) rotate(-56) scale(0.88)'/><path d='M0 0C13-12 36-10 46 2 34 16 11 14 0 0Z' transform='translate(134 72) rotate(-172) scale(0.78)'/></svg>");

  --shadow-soft: 0 14px 40px -18px rgba(47, 92, 82, 0.30);
  --shadow-lift: 0 22px 54px -22px rgba(47, 92, 82, 0.38);
  --radius:      14px;
  --radius-btn:  3px;
  --max-w:       1120px;
}

body {
  background: var(--tone-page);
  font-size: 1.02rem;
  line-height: 1.78;
  -webkit-font-smoothing: antialiased;
}

/* Kein horizontaler Überlauf durch Dekor-Grafiken.
   clip statt hidden, damit die klebende Kopfzeile weiter klebt. */
html { overflow-x: clip; }

/* --- Typografie --- */
h1, h2, h3, h4 { font-family: var(--font-display); letter-spacing: 0.005em; }
h1 { font-size: clamp(2.3rem, 5.2vw, 3.6rem); font-weight: 500; line-height: 1.08; }
h2 { font-size: clamp(1.8rem, 3.4vw, 2.6rem); font-weight: 500; line-height: 1.14; }
h3 { font-size: 1.32rem; font-weight: 600; }

.section-kicker {
  color: var(--accent);
  font-family: var(--font-body);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  margin-bottom: 1rem;
}
.section-kicker-light { color: rgba(255,255,255,0.75); }

/* Zarte Terrakotta-Linie unter Überschriften.
   Eigenes Element, liegt nie in einem data-editable-Bereich. */
.accent-rule {
  display: block;
  width: 58px;
  height: 2px;
  margin: 1.35rem 0 1.6rem;
  background: var(--terra-line);
  border-radius: 2px;
}
.accent-rule.is-centered { margin-left: auto; margin-right: auto; }

/* --- Schaltflächen --- */
.btn {
  padding: 0.95rem 2.1rem;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  border-width: 1.5px;
  border-radius: var(--radius-btn);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.btn-primary:hover { box-shadow: var(--shadow-soft); transform: translateY(-1px); }
.btn-outline:hover { box-shadow: none; }

/* Pfeil im Knopf — Pseudo-Element, damit admin/save.php ihn beim
   Speichern nicht entfernen kann (SVG wäre dort weg). */
.btn-arrow::after {
  content: '';
  display: inline-block;
  flex: 0 0 auto;
  width: 1.7em;
  height: 0.75em;
  margin-left: 0.85em;
  background-color: currentColor;
  -webkit-mask: var(--arrow-mask) no-repeat center / contain;
          mask: var(--arrow-mask) no-repeat center / contain;
  transition: transform var(--transition);
}
.btn-arrow:hover::after { transform: translateX(3px); }

.text-link { font-weight: 500; letter-spacing: 0.01em; border-bottom-color: var(--terra-line); }

/* --- Flächen & weiche Sektionstrenner --------------------------------
   .curve-up zieht die eigene Hintergrundfarbe als flachen, leicht
   asymmetrischen Bogen in den Abschnitt darüber. Der Bogen bleibt
   vollständig innerhalb der Elementbreite — keine waagrechte
   Bildlaufleiste.                                                      */
section { padding: var(--section-pad-y) 0; position: relative; }

.tone-soft { background: var(--tone-soft); }
.tone-warm { background: var(--tone-warm); }
.section-bg2 { background: var(--tone-warm); }

/* .curve-top zieht die Farbe des DARÜBERLIEGENDEN Abschnitts als
   flachen, leicht asymmetrischen Bogen in den oberen Rand dieses
   Abschnitts hinein. Der Bogen liegt vollständig innerhalb des
   eigenen Kastens: keine negativen Positionen, keine Überlappung mit
   dem Abschnitt darüber und keine waagrechte Bildlaufleiste.
   Die Herkunftsfarbe kommt aus einer .from-*-Klasse. */
.curve-top { position: relative; padding-top: calc(var(--section-pad-y) + var(--curve-h)); }
.curve-top::before {
  content: '';
  position: absolute;
  left: 0; right: 0; top: -1px;
  height: var(--curve-h);
  background: var(--curve-from, transparent);
  border-radius: 0 0 36% 64% / 0 0 100% 100%;
  pointer-events: none;
}
.curve-top.curve-mirror::before { border-radius: 0 0 64% 36% / 0 0 100% 100%; }
.curve-top > .container { position: relative; z-index: 1; }

.from-page  { --curve-from: var(--tone-page); }
.from-soft  { --curve-from: var(--tone-soft); }
.from-warm  { --curve-from: var(--tone-warm); }
.from-white { --curve-from: var(--white); }
.from-dark  { --curve-from: var(--primary-dark); }

/* ============================================================
   HERO — zweispaltig, Portrait organisch beschnitten
   ============================================================ */
.hero {
  background: linear-gradient(176deg, var(--header-bg) 0%, var(--tone-soft) 42%, var(--tone-page) 100%);
  min-height: min(740px, calc(100dvh - var(--header-h)));
  padding: clamp(2.5rem, 6vw, 5rem) 0 clamp(5rem, 9vw, 8rem);
  overflow: hidden;
  align-items: center;
}
/* Botanische Ebene: Blattschatten und Zweige rechts, darueber ein
   Creme-Verlauf von links, damit Text und Button auf ruhigem Grund
   stehen. Liegt hinter allen Hero-Inhalten. */
.hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to right,
      var(--header-bg) 0%,
      rgba(237,233,223,0.92) 32%,
      rgba(237,233,223,0.55) 58%,
      rgba(237,233,223,0.15) 100%),
    url('../images/hero-bg-botanik.webp') right center / cover no-repeat;
  z-index: 0;
  pointer-events: none;
}
.hero > * { position: relative; z-index: 1; }
.hero-overlay { display: none; }

/* Seitenkopf der Unterseiten: dieselbe Botanik, sehr zurueckhaltend */
.page-hero { position: relative; }
.page-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to right,
      var(--header-bg) 0%,
      rgba(237,233,223,0.95) 45%,
      rgba(237,233,223,0.72) 100%),
    url('../images/hero-bg-botanik.webp') right center / cover no-repeat;
  z-index: 0;
  pointer-events: none;
}
.page-hero > * { position: relative; z-index: 1; }

@media (max-width: 768px) {
  /* Auf dem Handy nur ein blasser Schimmer, damit der Text ruhig bleibt */
  .hero::before,
  .page-hero::before {
    background:
      linear-gradient(to bottom,
        rgba(237,233,223,0.88) 0%,
        rgba(237,233,223,0.96) 55%,
        var(--tone-page) 100%),
      url('../images/hero-bg-botanik.webp') right top / cover no-repeat;
  }
}

.hero-grid {
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
}

.hero-content h1 {
  font-size: clamp(2.5rem, 5.6vw, 4rem);
  font-weight: 500;
  color: var(--primary-dark);
  margin-bottom: 0;
  letter-spacing: -0.005em;
}
.hero-content .accent-rule { margin: 1.5rem 0 1.7rem; }
.hero-content p {
  font-size: 1.06rem;
  line-height: 1.8;
  color: var(--muted);
  letter-spacing: 0;
  margin-bottom: 2.2rem;
  max-width: 34em;
}

/* Die fett gesetzte Eingangszeile wird zum Zitat in Serifenkursiv.
   <strong> überlebt den Admin-Filter, die Anführungszeichen kommen
   aus CSS und stehen nicht im Text. */
.quote-lead strong {
  display: block;
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 500;
  font-size: clamp(1.45rem, 2.5vw, 1.95rem);
  line-height: 1.3;
  color: var(--primary-dark);
  margin-bottom: 0.9rem;
}
.quote-lead strong::before { content: '\201E'; }
.quote-lead strong::after  { content: '\201C'; }
.quote-lead strong + br { display: none; }

/* Portrait: runder Zuschnitt, dahinter ein versetzter Salbeikreis
   und die Blattgrafik. */
.hero-portrait {
  position: relative;
  justify-self: center;
  max-width: 400px;
  isolation: isolate;
}
.hero-portrait::before {
  content: '';
  position: absolute;
  inset: -7% -9% -3% -5%;
  background: var(--sage-ghost);
  border-radius: 58% 42% 47% 53% / 52% 46% 54% 48%;
  z-index: -1;
}
.hero-portrait img {
  width: 100%;
  border-radius: 50%;
  box-shadow: 0 26px 60px -26px rgba(47,92,82,0.45);
  background: var(--white);
}

/* Blattgrafik hinter dem Portrait */
.hero-decor {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}
/* Der Blattzweig ist eine Maske, kein <svg> im Markup: so steht er
   nirgends in einem data-editable-Bereich, taucht nur einmal in der
   CSS-Datei auf und nimmt trotzdem die Themenfarbe an. */
/* Gezeichnete Zweig-Grafik abgeschaltet — die fotografische
   Botanik im Hero-Hintergrund uebernimmt die Rolle. */
.leaf-spray { display: none !important; }

.leaf-spray {
  position: absolute;
  display: block;
  aspect-ratio: 300 / 430;
  color: var(--primary);
  background-color: currentColor;
  -webkit-mask: var(--leaf-mask) no-repeat center / contain;
          mask: var(--leaf-mask) no-repeat center / contain;
  pointer-events: none;
}
.leaf-spray.is-hero-right {
  right: -60px;
  top: 2%;
  width: clamp(200px, 26vw, 330px);
  opacity: 0.17;
  transform: scaleX(-1) rotate(4deg);
}
.leaf-spray.is-hero-left {
  left: -90px;
  bottom: -40px;
  width: clamp(150px, 18vw, 230px);
  opacity: 0.1;
  transform: rotate(-12deg);
}
.hero .container { position: relative; z-index: 1; }

.scroll-arrow { color: var(--primary); opacity: 0.6; }
.scroll-arrow:hover { opacity: 1; }

@media (max-width: 900px) {
  .hero { min-height: 0; padding-bottom: clamp(4rem, 12vw, 6rem); }
  .hero-grid { grid-template-columns: 1fr; gap: 1.1rem; justify-items: center; text-align: center; }
  /* Reihenfolge auf dem Handy: Kicker -> Portrait -> restlicher Text.
     display:contents loest .hero-content auf, damit die Kinder
     einzeln im Raster sortiert werden koennen. */
  .hero-content { display: contents; }
  .hero-kicker { order: 1; }
  .hero-content h1 { order: 3; margin-top: 0.9rem; }
  .hero-content .accent-rule { order: 4; }
  .hero-content .quote-lead { order: 5; }
  .hero-buttons { order: 6; }
  /* Portrait muss unter dem Dreieck durchlaufen, nicht hineinragen.
     Der Überhang des Dreiecks unter die Kopfzeile ist
     --tri-h minus --header-h; darauf kommen 40px Luft. So zieht ein
     kleineres Dreieck den Hero-Abstand automatisch mit nach oben
     (769–900px: 148-90+40 = 98px wie bisher; ≤768px: 92-64+40 = 68px;
     ≤420px: 81-64+40 = 57px). */
  .hero { padding-top: calc(var(--tri-h) - var(--header-h) + 40px); }
  .hero-portrait { order: 2; max-width: 240px; }
  .hero-content .accent-rule,
  .hero-content p { margin-left: auto; margin-right: auto; }
  .hero-buttons { justify-content: center; }
  .leaf-spray.is-hero-right { right: -80px; top: -20px; width: 210px; opacity: 0.12; }
  .leaf-spray.is-hero-left  { left: -70px; bottom: 10px; width: 150px; opacity: 0.08; }
}

/* ============================================================
   DREIER-REIHE mit Kreis-Icons und dünnen Trennlinien
   ============================================================ */
.pillar-row {
  display: grid;
  grid-template-columns: repeat(var(--pillar-cols, 3), 1fr);
  gap: 0;
  max-width: 940px;
  margin: 0 auto;
}
.pillar-row.is-four { --pillar-cols: 4; }
.pillar {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 0 clamp(0.6rem, 2vw, 1.6rem);
  border-left: 1px solid var(--line);
}
.pillar:first-child { border-left: 0; }

.pillar-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 62px;
  height: 62px;
  margin-bottom: 1.1rem;
  border-radius: 50%;
  background: var(--sage-tint);
  color: var(--primary-dark);
  flex: 0 0 auto;
}
.pillar-icon svg { width: 27px; height: 27px; display: block; }
.pillar strong {
  display: block;
  font-family: var(--font-display);
  font-size: 1.22rem;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 0.3rem;
  line-height: 1.25;
}
/* Nur die Beschriftung unter dem Titel — nicht das Icon-Rund davor,
   das ebenfalls ein <span> ist. */
.pillar strong + span {
  display: block;
  font-size: 0.9rem;
  line-height: 1.55;
  color: var(--muted);
}

@media (max-width: 760px) {
  .pillar-row { grid-template-columns: 1fr 1fr; row-gap: 2.2rem; }
  .pillar:nth-child(odd) { border-left: 0; }
  .pillar-icon { width: 54px; height: 54px; }
}
@media (max-width: 420px) {
  .pillar-row { grid-template-columns: 1fr; }
  .pillar { border-left: 0; }
}

/* ============================================================
   INTRO / Fließtextblöcke
   ============================================================ */
.intro-section { text-align: center; }
.intro-section h2 { max-width: 20ch; }
.intro-section .accent-rule { margin: 1.4rem auto 2rem; }
.intro-section p {
  max-width: 68ch;
  font-size: 1.04rem;
  margin-bottom: 1.4rem;
}
.intro-section p:first-of-type {
  font-family: var(--font-display);
  font-size: clamp(1.25rem, 2.2vw, 1.6rem);
  font-style: italic;
  line-height: 1.45;
  color: var(--primary-dark);
  max-width: 44ch;
  margin-bottom: 2rem;
}

.narrow-copy { max-width: 780px; margin-inline: auto; }
.lead-copy {
  font-family: var(--font-display);
  font-size: clamp(1.25rem, 2.2vw, 1.6rem) !important;
  font-style: italic;
  line-height: 1.45;
  color: var(--primary-dark) !important;
  margin-bottom: 1.8rem;
}

/* ============================================================
   SPLIT — Text und organisch beschnittenes Bild
   ============================================================ */
.split { gap: clamp(2.5rem, 6vw, 5rem); align-items: center; }
.split-img { position: relative; }
.split-img img {
  height: clamp(320px, 42vw, 480px);
  width: 100%;
  object-fit: cover;
  border-radius: 56% 44% 48% 52% / 44% 50% 50% 56%;
  box-shadow: var(--shadow-soft);
}
.split-img::after {
  content: '';
  position: absolute;
  inset: 6% -4% -6% 4%;
  border: 1px solid var(--sage-ring);
  border-radius: 48% 52% 56% 44% / 52% 44% 56% 48%;
  z-index: -1;
}
.split-text h2 { margin-bottom: 0; }
.split-text .accent-rule { margin: 1.3rem 0 1.5rem; }
.split-text p { color: var(--muted); }

@media (max-width: 768px) {
  .split-img img { height: 280px; border-radius: 48% 52% 46% 54% / 46% 46% 54% 54%; }
  .split.reverse-mobile .split-img { order: -1; }
}

/* ============================================================
   AKKORDEON (Themen, Qualifikationen)
   ============================================================ */
.themes-section { text-align: left; }
.themes-section > .container > .section-kicker,
.themes-section > .container > h2,
.themes-section .section-heading-centered { text-align: center; }
.themes-section h2 { margin-bottom: 0; }
.themes-section .accent-rule { margin: 1.3rem auto 2rem; }
.accordion-intro { text-align: center; max-width: 64ch; }

/* Themen als Karten im Zweierraster — Stil der Angebotskarten aus
   dem Entwurf: weisse Karte, weicher Schatten, Kreis-Icon oben. */
.accordion-group {
  max-width: 1000px;
  margin: 0 auto;
  border-top: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.4rem;
  align-items: start;
}
.accordion {
  border-bottom: 0;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 1.6rem 1.7rem;
  box-shadow: 0 2px 14px rgba(74,124,111,0.06);
  transition: box-shadow 0.25s, transform 0.25s, border-color 0.25s;
}
.accordion:hover,
.accordion[open] {
  box-shadow: 0 8px 26px rgba(74,124,111,0.12);
  border-color: var(--sage-tint);
}
.accordion > summary {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.9rem;
  padding: 0;
  font-size: 1.22rem;
  font-weight: 500;
  text-align: left;
}
/* Plus/Minus sitzt in der Kartenecke, nicht unter dem Titel */
.accordion { position: relative; }
.accordion > summary::after {
  position: absolute;
  top: 1.7rem;
  right: 1.7rem;
}
.accordion-icon {
  width: 56px;
  height: 56px;
  margin-right: 0;
  border-radius: 50%;
  background: var(--sage-tint);
  color: var(--primary-dark);
}
.accordion-icon svg { width: 26px; height: 26px; }
.accordion[open] > summary .accordion-icon { background: var(--primary); color: var(--white); }
.accordion-body { padding: 0.9rem 0 0; }
.accordion-body p { font-size: 0.99rem; }

@media (max-width: 860px) {
  .accordion-group { grid-template-columns: 1fr; gap: 1.1rem; }
}
@media (max-width: 768px) {
  .accordion { padding: 1.3rem 1.3rem; }
  .accordion-icon { width: 48px; height: 48px; }
  .accordion-icon svg { width: 23px; height: 23px; }
  .accordion > summary { font-size: 1.08rem; }
}

/* ============================================================
   KARTEN (Angebot, Schritte, Hintergrund)
   ============================================================ */
.theme-card,
.bg-card,
.step-card,
.honorar-card {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: none;
  transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);
}
.theme-card:hover,
.bg-card:hover,
.step-card:hover {
  transform: translateY(-4px);
  border-color: var(--sage-ring);
  box-shadow: var(--shadow-soft);
}

.card-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  margin-bottom: 1.3rem;
  border-radius: 50%;
  background: var(--sage-tint);
  color: var(--primary-dark);
}
.card-icon svg { width: 25px; height: 25px; display: block; }

.step-card { padding: 2.2rem 1.9rem; }
.step-number {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  margin-bottom: 1.3rem;
  border-radius: 50%;
  background: var(--sage-tint);
  color: var(--primary-dark);
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 600;
  opacity: 1;
  line-height: 1;
}
.step-card h3 { margin-bottom: 0.6rem; font-family: var(--font-display); font-size: 1.3rem; }
.step-card p { font-size: 0.97rem; }

.bg-card-icon {
  width: 56px; height: 56px;
  background: var(--sage-tint);
  color: var(--primary-dark);
}

/* Honorar */
.honorar-card { padding: 1.7rem 1.9rem; gap: 0.3rem; }
.honorar-card .label {
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent);
  font-weight: 600;
}
.honorar-card .price { font-size: 2rem; font-weight: 500; color: var(--primary-dark); }
.honorar-card.social .price { font-size: 1.45rem; color: var(--accent); }
.honorar-note {
  background: var(--white);
  border: 1px solid var(--line);
  border-left: 3px solid var(--accent);
  border-radius: 0 var(--radius) var(--radius) 0;
}
.absage-box { border-radius: 0 var(--radius) var(--radius) 0; border-left-width: 3px; }

/* ============================================================
   SEITENKOPF der Unterseiten
   ============================================================ */
.page-hero {
  position: relative;
  background: linear-gradient(174deg, var(--header-bg) 0%, var(--tone-soft) 100%);
  border-bottom: 0;
  /* Oben nie weniger Luft als das Dreieck unter die Kopfzeile ragt
     (--tri-h minus --header-h), sonst steht die h1 im Dreieck. Das
     greift vor allem zwischen 769 und 900px, wo das große Dreieck
     noch gilt, die Fensterbreite für clamp() aber schon klein ist. */
  padding: max(var(--page-hero-pad-top),
               calc(var(--tri-h) - var(--header-h) + 0.8rem))
           0 var(--page-hero-pad-bottom);
  overflow: hidden;
  text-align: center;
}
.page-hero h1 { color: var(--primary-dark); margin-bottom: 0; }
.page-hero .accent-rule { margin: 1.4rem auto 1.5rem; }
.page-hero p {
  color: var(--muted);
  font-size: 1.05rem;
  max-width: 58ch;
  margin: 0 auto;
}
.page-hero .leaf-spray {
  right: -70px;
  top: -30px;
  width: clamp(170px, 20vw, 260px);
  opacity: 0.1;
  transform: scaleX(-1);
}
.page-hero .container { position: relative; z-index: 1; }

/* ============================================================
   RAHMENDATEN / „Auf einen Blick"
   ============================================================ */
.framework-grid { gap: 0; }
.framework-note { font-size: 0.93rem; line-height: 1.7; }
.centered-link { margin-top: 2rem; }

/* ============================================================
   CTA-Banner
   ============================================================ */
.cta-banner {
  background: var(--primary-dark);
  padding-bottom: var(--section-pad-y);
  overflow: hidden;
}
/* Beim dunklen Banner liegt der helle Bogen im oberen Rand. Oben reicht
   deshalb die Bogenhöhe allein — nicht Bogen PLUS Abstand wie bei
   .curve-top, sonst steht unter dem Bogen noch eine dunkle Leerfläche.
   Mindestens aber der normale Abschnittsabstand, damit die Überschrift
   nicht im Bogen landet. (Ohne diese Regel würde die
   padding-Kurzschreibweise oben das padding-top von .curve-top
   überschreiben.) */
.cta-banner.curve-top { padding-top: max(var(--curve-h), var(--section-pad-y)); }
.cta-banner h2 { color: var(--white); margin-bottom: 0; }
.cta-banner .accent-rule { margin: 1.3rem auto 1.6rem; background: rgba(255,255,255,0.4); }
.cta-banner p { color: rgba(255,255,255,0.84); max-width: 62ch; margin-left: auto; margin-right: auto; }
.cta-banner p:first-of-type {
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(1.3rem, 2.4vw, 1.75rem);
  line-height: 1.4;
  color: var(--white);
  margin-bottom: 1.4rem;
}
.cta-banner .btn { margin-top: 1.4rem; }
.cta-banner .leaf-spray {
  left: -80px;
  bottom: -60px;
  width: clamp(180px, 22vw, 280px);
  color: var(--white);
  opacity: 0.11;
  transform: rotate(-8deg);
}
.cta-banner .container { position: relative; z-index: 1; }

.mid-cta {
  background: var(--tone-warm);
  border-color: var(--terra-soft);
  padding: 3rem 1.5rem;
}
.mid-cta p {
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(1.15rem, 2vw, 1.45rem);
  color: var(--primary-dark);
  margin-bottom: 1.5rem;
}

/* ============================================================
   ÜBER MICH
   ============================================================ */
.about-intro { grid-template-columns: 0.85fr 1.15fr; gap: clamp(2.5rem, 5vw, 4.5rem); align-items: center; }
.about-intro-media { position: relative; }
.about-intro-media img {
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: 50%;
  background: var(--white);
  box-shadow: 0 26px 60px -26px rgba(47,92,82,0.42);
}
.about-intro-media::before {
  content: '';
  position: absolute;
  inset: -6% -8% -2% -4%;
  background: var(--sage-ghost);
  border-radius: 56% 44% 49% 51% / 50% 47% 53% 50%;
  z-index: -1;
}
.about-intro-text p:first-child {
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(1.2rem, 2.1vw, 1.55rem);
  line-height: 1.45;
  color: var(--primary-dark);
  margin-bottom: 1.5rem;
}
@media (max-width: 768px) {
  .about-intro { grid-template-columns: 1fr; }
  .about-intro-media { max-width: 260px; margin: 0 auto; }
}

/* ============================================================
   KONTAKT
   ============================================================ */
.kontakt-grid { gap: clamp(2.5rem, 5vw, 4rem); }
.kontakt-info h2 { margin-bottom: 0; }
.kontakt-info .accent-rule { margin: 1.2rem 0 1.5rem; }
.kontakt-info h3 { font-size: 1.45rem; }
.kontakt-detail svg { color: var(--accent); }
.kontakt-hint {
  background: var(--sage-tint);
  border-radius: var(--radius);
  padding: 1.2rem 1.4rem;
}
.kontakt-media { margin-top: 2rem; position: relative; }
.kontakt-media img {
  width: 100%;
  height: 260px;
  object-fit: cover;
  border-radius: 46% 54% 50% 50% / 26% 22% 26% 30%;
  box-shadow: var(--shadow-soft);
}
.contact-form {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-soft);
  padding: clamp(1.75rem, 3.5vw, 2.75rem);
}
.contact-form h2 { margin-bottom: 0; }
.contact-form .accent-rule { margin: 1.1rem 0 1.6rem; }
.form-group input,
.form-group textarea { border-radius: var(--radius-btn); background: var(--tone-soft); }
.form-group input:focus,
.form-group textarea:focus { background: var(--white); }

/* ============================================================
   RECHTSTEXTE (Impressum, Datenschutz)
   ============================================================ */
.legal-copy { max-width: 760px; }
.legal-copy h2 {
  font-size: 1.5rem;
  margin: 2.6rem 0 0.8rem;
  color: var(--primary-dark);
}
.legal-copy h2:first-child { margin-top: 0; }
.legal-copy p { color: var(--muted); margin-bottom: 1rem; }
.legal-copy a { color: var(--primary); border-bottom: 1px solid var(--terra-line); }

/* ============================================================
   FUSSZEILE
   ============================================================ */
.site-footer { padding: clamp(3rem, 6vw, 4.5rem) 0 2rem; }
.footer-col h4 { letter-spacing: 0.16em; font-size: 0.72rem; }
.footer-brand p { line-height: 1.7; }
.footer-inner { gap: clamp(2rem, 5vw, 3.5rem); }

/* ============================================================
   LESBARKEIT — gemessene Kontraste (WCAG 2.1 AA, 4.5:1)
   ------------------------------------------------------------
   Terrakotta und das helle Grau der Fliesstexte liegen auf dem
   warmen Creme knapp unter 4.5:1. Beide Töne werden deshalb aus
   den im Admin verwalteten Variablen abgeleitet und nur so weit
   abgedunkelt, dass sie die Schwelle sicher überschreiten — der
   Farbton bleibt erhalten und eine Farbänderung im Admin wirkt
   weiterhin durch.
   ============================================================ */
:root {
  --accent-ink: color-mix(in srgb, var(--accent) 60%, #000);   /* ~5.1:1 auf Creme */
  --copy-ink:   color-mix(in srgb, var(--muted)  92%, #000);   /* ~5.0:1 auf Creme */
  --link-ink:   var(--primary-dark);                            /* ~6.1:1 auf Creme */
}

.section-kicker { color: var(--accent-ink); }
.section-kicker-light { color: rgba(255,255,255,0.78); }

.honorar-card .label,
.honorar-card.social .price { color: var(--accent-ink); }

.hero-content p,
.intro-section p,
.accordion-intro p,
.accordion-body p,
.narrow-copy p,
.split-text p,
.about-intro-text p,
.theme-card p,
.bg-card p,
.step-card p,
.info-panel p,
.page-hero p,
.framework-note,
.zielgruppe-text,
.mid-cta p,
.honorar-card .duration,
.honorar-note,
.absage-box,
.kontakt-info .subtitle,
.kontakt-hint,
.legal-copy p,
.legal-copy li,
.pillar strong + span { color: var(--copy-ink); }

.btn-outline { color: var(--link-ink); border-color: var(--link-ink); }
.btn-outline:hover { background: var(--link-ink); color: var(--white); border-color: var(--link-ink); }

.text-link,
.legal-copy a,
.kontakt-detail a { color: var(--link-ink); }

/* Hero-Kicker: die ältere Regel setzt noch das ungedämpfte Terrakotta. */
.section-kicker.hero-kicker { color: var(--accent-ink); }

/* Kopfzeilen-Navigation: #8a8880 auf dem Creme der Kopfzeile ergibt nur
   2,9:1. Geometrie und Aufbau der Kopfzeile bleiben unverändert — nur
   der Farbwert wird aus der verwalteten Variable abgedunkelt (~5,0:1). */
.nav-link { color: color-mix(in srgb, var(--nav-link-color) 72%, #000); }
.nav-link:hover { color: color-mix(in srgb, var(--nav-link-hover-color) 72%, #000); }
.mobile-menu .nav-link { color: var(--text); }

/* Ueber mich: kein Bogen ueber dem Portrait, Bild rueckt naeher an
   den Seitenkopf. Der Bogen wirkte dort wie ein Schlitz. */
/* Desktop: normaler Abschnittsabstand wie im Rest der Seite. */
.about-intro-section {
  padding-top: clamp(1.6rem, 3.2vw, 2.4rem);
}
.about-intro-section .about-intro img { height: 440px; }
@media (max-width: 900px) {
  /* Mobil: halber Abstand — Bild rueckt dicht an den Untertitel. */
  .about-intro-section { padding-top: 0; }
  .about-intro-section .about-intro-media { margin-top: -28px; }
  .about-intro-section .about-intro { gap: 1.9rem; }
  .about-intro-section .about-intro img { height: 300px; }
}