/* Katharina Größbacher – One-Pager, Bildschirm-Abschnitte */

:root {
  --ink: #2c3840;
  --muted: #5a656c;
  --paper: #ffffff;
  --paper-soft: #f9f5ee;
  --card: #dccfbb;
  --line: #ebe4da;
  --green: #3f5f6b;
  --green-deep: #2a4450;
  --terra: #b8945c;
  --terra-ink: #8a6d3d;
  --terra-soft: #f3eee6;
  --gold: #b8945c;
  --shadow: 0 8px 28px rgba(42, 68, 80, .07);
  --edge: 1.25rem;
  --header-h: 3.25rem;
  --screen-min: calc(100svh - var(--header-h));
  --font-body: "Nunito Sans", "Segoe UI", system-ui, sans-serif;
  --font-display: "Cormorant Garamond", Georgia, serif;
  --font-heading-weight: 500;
}

* { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: var(--header-h);
  overflow-x: hidden;
  overflow-x: clip;
  width: 100%;
  max-width: 100%;
}

body {
  margin: 0;
  overflow-x: hidden;
  overflow-x: clip;
  width: 100%;
  max-width: 100%;
  position: relative;
  font-family: var(--font-body);
  font-size: 1.05rem;
  font-weight: 400;
  line-height: 1.7;
  color: var(--ink);
  background: var(--paper);
  text-rendering: optimizeLegibility;
  font-synthesis: none;
}

h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: 500;
  line-height: 1.25;
  color: var(--green-deep);
  letter-spacing: -.015em;
}

a { color: var(--green); }
a:hover { color: var(--green-deep); }

.wrap {
  width: min(1080px, calc(100% - 2 * var(--edge)));
  margin-left: auto;
  margin-right: auto;
}

.skip-link {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.skip-link:focus {
  width: auto;
  height: auto;
  margin: 0;
  clip: auto;
  left: .5rem;
  top: .5rem;
  padding: .6rem 1rem;
  background: var(--green-deep);
  color: #fff;
  z-index: 100;
}

/* —— Kopf —— */
.top {
  position: sticky;
  left: 0;
  right: 0;
  top: 0;
  z-index: 50;
  background: #fff;
  border-bottom: 1px solid transparent;
}
.top.is-scrolled,
.top.nav-open {
  background: rgba(255, 255, 255, .97);
  border-bottom-color: var(--line);
}
.top .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding: .48rem 0;
  min-height: 3.1rem;
}
.brand {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: .12rem;
  flex: 0 1 auto;
  min-width: 0;
  font-size: 1.08rem;
  font-weight: 600;
  color: var(--green-deep);
  text-decoration: none;
  line-height: 1.2;
}
.brand small {
  display: block;
  font-size: .7rem;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--terra-ink);
  margin: 0;
  white-space: nowrap;
}
.brand-short { display: none; }
.top nav {
  display: flex;
  flex-wrap: nowrap;
  gap: 0 .72rem;
  font-size: .8rem;
  font-weight: 500;
  align-items: center;
  justify-content: flex-end;
  min-width: 0;
}
.top nav a { text-decoration: none; color: var(--ink); white-space: nowrap; }
.top nav a:hover { color: var(--green-deep); }
.top nav a.nav-edit {
  color: var(--terra-ink);
  font-weight: 600;
  letter-spacing: .04em;
}

.nav-toggle {
  display: none;
  width: 2.35rem;
  height: 2.35rem;
  margin: 0;
  padding: 0;
  border: 1px solid transparent;
  border-radius: 8px;
  background: transparent;
  cursor: pointer;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
}
.top.is-scrolled .nav-toggle,
.top.nav-open .nav-toggle {
  border-color: var(--line);
  background: #fff;
}
.nav-toggle-bars,
.nav-toggle-bars::before,
.nav-toggle-bars::after {
  display: block;
  width: 1.15rem;
  height: 2px;
  background: var(--green-deep);
  border-radius: 1px;
  position: relative;
}
.nav-toggle-bars::before,
.nav-toggle-bars::after {
  content: "";
  position: absolute;
  left: 0;
}
.nav-toggle-bars::before { top: -.35rem; }
.nav-toggle-bars::after { top: .35rem; }
.nav-open .nav-toggle-bars { background: transparent; }
.nav-open .nav-toggle-bars::before { top: 0; transform: rotate(45deg); }
.nav-open .nav-toggle-bars::after { top: 0; transform: rotate(-45deg); }
body.nav-lock { overflow: hidden; }
body.nav-lock::before {
  content: "";
  position: fixed;
  inset: 0;
  background: rgba(63, 90, 102, .28);
  z-index: 40;
}

/* —— Buttons —— */
.btn {
  display: inline-block;
  background: var(--terra);
  color: #fff !important;
  text-decoration: none;
  border-radius: 4px;
  padding: .65rem 1.35rem;
  font-size: .92rem;
  font-weight: 600;
  letter-spacing: .02em;
  border: 1px solid var(--terra);
}
.top nav .btn { padding: .38rem .95rem; font-size: .78rem; }
.top-cta { display: none; } /* nur Handy-Kopfzeile */
.btn:hover { background: var(--green); border-color: var(--green); }
.btn.ghost {
  background: transparent;
  color: var(--green-deep) !important;
  border-color: var(--green);
}
.btn.ghost:hover {
  background: var(--green);
  color: #fff !important;
}

/* —— Bildschirm-Abschnitte —— */
.screen {
  position: relative;
  z-index: 1;
  min-height: var(--screen-min);
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 2.6rem 0 2.8rem;
}
/* Abschnitte abwechselnd: weiß (Start) · creme · weiß · creme … */
.screen.alt { background: var(--paper-soft); }
.screen-head { margin: 0 0 1.6rem; }
.screen-head h2 {
  font-size: clamp(1.65rem, 3.2vw, 2.2rem);
  font-weight: var(--font-heading-weight);
  margin: 0 0 .7rem;
  max-width: 36rem;
}
.screen-head .lead { margin: 0; }
.section-kicker {
  font-size: .74rem;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--terra-ink);
  margin: 0 0 .55rem;
}
.lead {
  max-width: 40rem;
  color: var(--ink);
  font-size: 1.05rem;
}
.lead p { margin: 0 0 1rem; color: var(--ink); }
.lead p:last-child { margin-bottom: 0; }
.lead strong { font-weight: 600; color: var(--green-deep); }
#schwerpunkte .lead-note {
  margin-top: .65rem;
  font-weight: 600;
  color: var(--green-deep);
}
.small { font-size: .85rem; color: var(--muted); }
.screen-note { margin: 1rem 0 0; }
.todo {
  background: #f7f0e4;
  border: 1px dashed var(--gold);
  border-radius: 4px;
  padding: .12rem .45rem;
  font-size: .88em;
  color: #7a6230;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}

/* —— Hero —— */
.hero {
  isolation: isolate;
  overflow: hidden;
  contain: paint;
  background: #fff;
  padding: 3.2rem 0 3.6rem;
  align-items: center;
}
.hero-bleed {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}
.hero-bleed picture,
.hero-bleed img {
  display: block;
  width: 118%;
  height: 118%;
  max-width: none;
  object-fit: cover;
  object-position: 68% 42%;
  transform: translate(-6%, -4%);
  filter: saturate(1.08) contrast(1.04);
}
.hero-sun {
  position: absolute;
  left: 61%;
  top: 40%;
  width: min(42vw, 28rem);
  height: min(42vw, 28rem);
  transform: translate(-50%, -50%);
  background: radial-gradient(circle, rgba(255, 248, 220, .72) 0%, rgba(255, 236, 196, .28) 34%, rgba(255, 255, 255, 0) 70%);
  mix-blend-mode: screen;
  pointer-events: none;
}
.hero-bleed::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(96deg, rgba(255, 255, 255, .7) 0%, rgba(255, 255, 255, .22) 26%, rgba(255, 255, 255, 0) 46%),
    linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0) 78%, #ffffff 100%);
}
.hero-content {
  position: relative;
  z-index: 2;
  display: grid;
  gap: 1.1rem;
  max-width: none;
}
.hero-name {
  margin: 0 0 .2rem;
  font-family: var(--font-display);
  font-size: clamp(1.35rem, 2.4vw, 1.7rem);
  font-weight: 600;
  letter-spacing: -.01em;
  color: var(--green-deep);
  line-height: 1.2;
}
.hero-brand {
  margin: 0 0 .75rem;
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--terra-ink);
  line-height: 1.3;
}
.status-line {
  display: block;
  font-size: clamp(1rem, 1.8vw, 1.12rem);
  font-weight: 500;
  letter-spacing: .01em;
  text-transform: none;
  color: var(--terra-ink);
  margin: 0 0 .85rem;
  line-height: 1.35;
  max-width: 28rem;
}
.hero h1 {
  font-size: clamp(2.15rem, 4.8vw, 3.35rem);
  font-weight: var(--font-heading-weight);
  margin: 0;
  color: var(--green-deep);
  letter-spacing: -.02em;
}
.hero .sub {
  font-size: 1.12rem;
  font-weight: 500;
  color: var(--ink);
  max-width: 34rem;
  margin: 0 0 1.4rem;
  line-height: 1.65;
}
.hero .cta-row {
  display: flex;
  flex-wrap: wrap;
  gap: .75rem;
  align-items: center;
}
.hero .cta-note {
  font-size: .85rem;
  color: var(--muted);
  width: 100%;
  margin: .2rem 0 0;
  font-weight: 500;
}

/* —— Zielgruppen & Karten (Schwerpunkte) —— */
#schwerpunkte,
#faq {
  --postit-ink: color-mix(in srgb, var(--ink) 92%, var(--green-deep));
  --postit-muted: color-mix(in srgb, var(--muted) 88%, var(--ink));
  /* Töne aus dem Startbild – etwas blasser / dezenter */
  --postit-cream: #f7f3ee;
  --postit-sand: #f3eee7;
  --postit-sage: #eef1ee;
  --postit-mist: #e9eeea;
  --postit-blush: #faf0e8;
  /* Akut/Krisen: helleres Post-it-Gelb */
  --postit-alert: #fff0a8;
  --accent: transparent;
}
/* Auf Creme-Hintergrund: hellstes Post-it fast weiß, sonst verschwimmt es */
#schwerpunkte.alt,
#faq.alt {
  --postit-cream: #fffdf9;
}
#schwerpunkte.screen {
  justify-content: flex-start;
}
.audience {
  margin: 0;
}
.audience-title {
  margin: 0 0 .85rem;
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--terra-ink);
}

/* Themenfelder & FAQ: einheitliches Kartenraster */
.postit-board {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(12.2rem, 1fr));
  gap: .75rem 1rem;
  align-items: stretch;
  justify-content: center;
}
.postit-board .audience-items,
.postit-board .cards,
.postit-board .cards.three,
.postit-board .faq-list {
  display: contents !important;
}

.cards {
  display: flex;
  flex-wrap: wrap;
  gap: .75rem 1rem;
}
.card {
  background: transparent;
  padding: 0;
  min-height: 0;
  display: block;
  border: 0;
  border-radius: 0;
}
.card h3 {
  margin: 0 0 .25rem;
  font-size: 1rem;
  font-weight: 500;
  letter-spacing: -.01em;
  color: var(--green-deep);
}
.card p {
  margin: 0;
  font-size: .86rem;
  color: var(--muted);
  line-height: 1.4;
}
.card-extra { margin-top: .45rem; }

.praxis-cards {
  display: grid;
  gap: 1.35rem 2.75rem;
  align-items: start;
}
.praxis-cards .card {
  padding: 0;
  background: none;
  border: 0;
  max-width: none;
  transform: none;
  box-shadow: none;
  width: auto;
  min-height: 0;
}
.praxis-address {
  margin: 0;
}
.praxis-copy-btn {
  margin-top: .7rem;
  padding: .42rem .9rem;
  font-size: .78rem;
  font-weight: 500;
  border-radius: .45rem;
  cursor: pointer;
}
.praxis-copy-btn.is-copied {
  border-color: var(--green);
  color: var(--green-deep);
}
.praxis-layout {
  display: grid;
  gap: 1.75rem;
  align-items: start;
}
.praxis-info .screen-note {
  margin-top: 1.15rem;
}

.accent-green,
.accent-deep,
.accent-terra,
.accent-gold,
.accent-sage,
.accent-moss,
.accent-clay,
.accent-slate { --accent: transparent; }

#schwerpunkte .card.postit,
#faq .postit {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  width: 100%;
  max-width: none;
  min-height: 7.6rem;
  height: 100%;
  margin: 0;
  padding: 1.05rem .95rem 1.1rem;
  border: 0;
  border-radius: .85rem;
  background-color: var(--postit-cream);
  box-shadow:
    0 1px 0 color-mix(in srgb, var(--ink) 5%, transparent),
    1px 4px 12px -4px color-mix(in srgb, var(--ink) 18%, transparent);
  transform: none;
  animation: none;
  transition: box-shadow .2s ease, opacity .28s ease;
  box-sizing: border-box;
}
/* Themenfelder: einfache Grafik oben (Fotos bleiben in assets/themen/*.webp) */
#schwerpunkte .card.postit.has-photo {
  padding: 0;
  overflow: hidden;
  justify-content: flex-start;
  align-items: stretch;
  min-height: 0;
  height: 100%;
  transform: none;
}
#schwerpunkte .card.postit.has-photo .postit-photo {
  display: block;
  position: relative;
  flex: 0 0 auto;
  width: calc(100% - .55rem);
  align-self: center;
  margin: .28rem .28rem 0;
  aspect-ratio: 2.15 / 1;
  max-height: 4.6rem;
  overflow: hidden;
  border-radius: .5rem;
  background:
    linear-gradient(165deg,
      color-mix(in srgb, var(--postit-sage) 70%, #fff) 0%,
      color-mix(in srgb, var(--postit-cream) 85%, var(--line)) 100%);
}
#schwerpunkte .card.postit.has-photo .postit-photo::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: var(--postit-icon);
  background-size: 42% auto;
  background-position: center;
  background-repeat: no-repeat;
  transform: scale3d(1, 1, 1);
  transition: transform .45s ease, opacity .45s ease;
  opacity: .92;
}
/* Optional: Fotos wieder aktivieren via images.themenUsePhotos */
#schwerpunkte.themen-use-photos .card.postit.has-photo .postit-photo {
  aspect-ratio: 5 / 4;
  max-height: none;
  background-color: color-mix(in srgb, var(--postit-cream) 70%, var(--line));
  background-image: none;
}
#schwerpunkte.themen-use-photos .card.postit.has-photo .postit-photo::after {
  background-image:
    linear-gradient(180deg, rgba(255, 255, 255, .28) 0%, rgba(255, 255, 255, .16) 45%, rgba(255, 255, 255, .32) 100%),
    var(--postit-photo);
  background-size: cover, cover;
  background-position: center, center;
  background-repeat: no-repeat, no-repeat;
  filter: saturate(.9) brightness(1.05);
  transition: transform 1s ease, opacity 1s ease, filter 1s ease;
  opacity: .92;
}
#schwerpunkte .card.postit.has-photo h3,
#schwerpunkte .card.postit.has-photo .sp-teaser {
  position: relative;
  z-index: 1;
  text-shadow: none;
  padding-left: .85rem;
  padding-right: .85rem;
}
#schwerpunkte .card.postit.has-photo h3 {
  margin: .45rem 0 .1rem;
  min-height: 2.1em;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--green-deep);
  font-weight: 600;
  font-size: .92rem;
}
#schwerpunkte .card.postit.has-photo .sp-teaser {
  margin: 0 0 .55rem;
  min-height: 1.2em;
  font-size: .78rem;
  color: color-mix(in srgb, var(--ink) 78%, var(--green-deep));
  font-weight: 500;
}
#schwerpunkte .card.postit[data-photo="erwachsene"] {
  --postit-icon: url("assets/themen/icons/erwachsene.svg");
  --postit-photo: url("assets/themen/tf-erwachsene.webp?v=pos1");
}
#schwerpunkte .card.postit[data-photo="jugendliche"] {
  --postit-icon: url("assets/themen/icons/jugendliche.svg");
  --postit-photo: url("assets/themen/tf-jugendliche.webp?v=youth1");
}
#schwerpunkte .card.postit[data-photo="gruppen"] {
  --postit-icon: url("assets/themen/icons/gruppen.svg");
  --postit-photo: url("assets/themen/tf-gruppen.webp?v=pos1");
}
#schwerpunkte .card.postit[data-photo="familie"] {
  --postit-icon: url("assets/themen/icons/familie.svg");
  --postit-photo: url("assets/themen/tf-familie.webp?v=pos1");
}
#schwerpunkte .card.postit[data-photo="verbindung"] {
  --postit-icon: url("assets/themen/icons/verbindung.svg");
  --postit-photo: url("assets/themen/tf-verbindung.webp?v=gemein1");
}
#schwerpunkte .card.postit[data-photo="frauen"] {
  --postit-icon: url("assets/themen/icons/frauen.svg");
  --postit-photo: url("assets/themen/tf-frauen.webp?v=pos1");
}
#schwerpunkte .card.postit[data-photo="erschoepfung"] {
  --postit-icon: url("assets/themen/icons/erschoepfung.svg");
  --postit-photo: url("assets/themen/tf-erschoepfung.webp?v=pflanze1");
}
#schwerpunkte .card.postit[data-photo="aengste"] {
  --postit-icon: url("assets/themen/icons/aengste.svg");
  --postit-photo: url("assets/themen/tf-aengste.webp?v=sky1");
}
#schwerpunkte .card.postit[data-photo="selbstwert"] {
  --postit-icon: url("assets/themen/icons/selbstwert.svg");
  --postit-photo: url("assets/themen/tf-selbstwert.webp?v=pos1");
}
#schwerpunkte .card.postit[data-photo="selbsterfahrung"] {
  --postit-icon: url("assets/themen/icons/selbsterfahrung.svg");
  --postit-photo: url("assets/themen/tf-selbsterfahrung.webp?v=berg1");
}
#schwerpunkte .postit-board {
  isolation: isolate;
  padding-top: 0;
}
#schwerpunkte .card.postit {
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
  touch-action: manipulation;
  overflow: hidden;
  transition: width .28s ease, min-height .28s ease, padding .28s ease, opacity .28s ease, flex-basis .28s ease, margin .28s ease, box-shadow .2s ease;
}
/* Aufgeklappt: volle Breite oben – Karten bleiben im Raster */
#schwerpunkte .postit-focus,
#faq .postit-focus {
  grid-column: 1 / -1;
  order: -1;
  width: 100%;
  max-width: none;
  margin: 0 0 1.1rem;
  padding: 1.25rem 1.2rem 1.4rem;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
  border: 0;
  border-radius: .85rem;
  background: var(--postit-cream);
  box-shadow:
    0 1px 0 color-mix(in srgb, var(--ink) 5%, transparent),
    2px 12px 22px -6px color-mix(in srgb, var(--ink) 24%, transparent);
  transform: none;
  animation: none;
  z-index: 4;
}
#schwerpunkte .postit-focus[hidden],
#faq .postit-focus[hidden] {
  display: none !important;
}
#schwerpunkte .postit-focus-close,
#faq .postit-focus-close {
  position: absolute;
  top: .7rem;
  right: .75rem;
  width: 1.6rem;
  height: 1.6rem;
  border: 0;
  padding: 0;
  background: transparent;
  cursor: pointer;
  color: var(--postit-ink);
  opacity: .55;
}
#schwerpunkte .postit-focus-close::before,
#faq .postit-focus-close::before {
  content: "×";
  font-size: 1.35rem;
  line-height: 1;
}
#schwerpunkte .postit-focus-close:hover,
#faq .postit-focus-close:hover {
  opacity: 1;
}
#schwerpunkte .postit-focus-title,
#faq .postit-focus-title {
  margin: 0 1.6rem .35rem 0;
  font-family: var(--font-body);
  font-size: 1.08rem;
  font-weight: 600;
  color: var(--postit-ink);
  text-align: left;
  width: auto;
}
#faq .postit-focus-title {
  font-family: var(--font-display);
  font-size: 1.22rem;
  font-weight: 500;
  letter-spacing: .01em;
  line-height: 1.28;
}
#schwerpunkte .postit-focus-teaser {
  display: none;
}
#schwerpunkte .postit-focus-body,
#faq .postit-focus-body {
  margin: 0;
  font-size: .95rem;
  line-height: 1.55;
  color: var(--postit-muted);
  text-align: left;
  width: 100%;
}
#schwerpunkte .postit-focus-body p,
#faq .postit-focus-body p {
  margin: 0;
  font-size: inherit;
  line-height: inherit;
  color: inherit;
  text-align: left;
}
#faq .postit-focus-body ul {
  margin: .45rem 0 0;
  padding-left: 1.1rem;
  text-align: left;
  list-style-position: outside;
}
#faq .postit-focus-body li {
  margin: 0 0 .35rem;
  font-size: inherit;
  line-height: inherit;
  color: inherit;
  text-align: left;
}
#faq .postit-focus.is-crisis {
  background:
    linear-gradient(165deg, #fff9c4 0%, var(--postit-alert) 42%, #f7e48a 100%);
}
#faq .postit-focus.is-crisis .postit-focus-title,
#faq .postit-focus.is-crisis .postit-focus-body,
#faq .postit-focus.is-crisis .postit-focus-body p,
#faq .postit-focus.is-crisis .postit-focus-body li {
  color: #2a2418;
}
@media (min-width: 880px) {
  #faq .postit-focus.is-crisis {
    padding: 1.35rem 1.45rem 1.5rem;
  }
  #faq .postit-focus.is-crisis .postit-focus-body ul {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: .4rem 1.75rem;
    margin-top: .65rem;
    padding-left: 1.05rem;
  }
  #faq .postit-focus.is-crisis .postit-focus-body li {
    margin: 0;
  }
  /* Notruf/Polizei: volle Breite, klar abgesetzt */
  #faq .postit-focus.is-crisis .postit-focus-body li:last-child {
    grid-column: 1 / -1;
    margin-top: .35rem;
    padding-top: .45rem;
    border-top: 1px solid color-mix(in srgb, #2a2418 14%, transparent);
  }
}
#schwerpunkte .card.postit.is-active,
#faq .postit.is-active {
  outline: 1.5px solid color-mix(in srgb, var(--terra) 55%, transparent);
  outline-offset: 2px;
  opacity: 1;
  z-index: 2;
}

/* Karten selbst bleiben kompakt – Detail nur im Fokus-Feld oben */
#schwerpunkte .card.postit .sp-detail {
  display: none;
}
#schwerpunkte .card.postit .sp-teaser {
  margin: 0;
}
#faq details.postit > *:not(summary) {
  display: none;
}
#schwerpunkte .card.postit h3 {
  margin: 0 0 .4rem;
  font-family: var(--font-body);
  font-size: .96rem;
  font-weight: 600;
  letter-spacing: -.01em;
  color: var(--postit-ink);
  line-height: 1.25;
  text-align: center;
  width: 100%;
}
#faq .postit h3,
#faq .postit summary,
#faq details.postit summary {
  margin: 0;
  font-family: var(--font-display);
  font-size: 1.08rem;
  font-weight: 300;
  font-synthesis: none;
  letter-spacing: .01em;
  color: var(--postit-ink);
  line-height: 1.28;
  text-align: center;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  overflow-wrap: normal;
  word-break: normal;
  hyphens: none;
  -webkit-hyphens: none;
}
#schwerpunkte .card.postit p,
#faq .postit p,
#faq .postit li {
  margin: 0;
  font-family: var(--font-body);
  font-size: .8rem;
  line-height: 1.35;
  color: var(--postit-muted);
  text-align: center;
}

/* dezente Papierfarben – gleiche Kartengröße */
#schwerpunkte .card.postit:nth-child(5n+1),
#faq .faq-list .postit:nth-child(5n+1) {
  background-color: var(--postit-cream);
}
#schwerpunkte .card.postit:nth-child(5n+2),
#faq .faq-list .postit:nth-child(5n+2) {
  background-color: var(--postit-sand);
}
#schwerpunkte .card.postit:nth-child(5n+3),
#faq .faq-list .postit:nth-child(5n+3) {
  background-color: var(--postit-sage);
}
#schwerpunkte .card.postit:nth-child(5n+4),
#faq .faq-list .postit:nth-child(5n+4) {
  background-color: var(--postit-mist);
}
#schwerpunkte .card.postit:nth-child(5n+5),
#faq .faq-list .postit:nth-child(5n+5) {
  background-color: var(--postit-blush);
}
@media (hover: hover) and (pointer: fine) {
  #schwerpunkte .card.postit:hover:not(.is-active),
  #faq .postit:hover:not(.is-active) {
    box-shadow:
      0 1px 0 color-mix(in srgb, var(--ink) 4%, transparent),
      2px 10px 18px -6px color-mix(in srgb, var(--ink) 20%, transparent);
    z-index: 1;
  }
  /* Icon leicht betonen / Foto-Zoom nur im Foto-Modus */
  #schwerpunkte .card.postit.has-photo:hover:not(.is-active) .postit-photo::after {
    transform: scale3d(1.04, 1.04, 1);
    opacity: 1;
  }
  #schwerpunkte.themen-use-photos .card.postit.has-photo:hover:not(.is-active) .postit-photo::after,
  .photo-frame:hover img,
  .about-portrait.has-photo:hover img,
  .portrait-placeholder.has-photo:hover img {
    transform: scale3d(1.1, 1.1, 1);
    opacity: .95;
  }
}
#schwerpunkte .card.postit.has-photo.is-active .postit-photo::after,
#schwerpunkte .card.postit.has-photo.is-zoomed .postit-photo::after {
  transform: scale3d(1.04, 1.04, 1);
  opacity: 1;
}
#schwerpunkte.themen-use-photos .card.postit.has-photo.is-active .postit-photo::after,
#schwerpunkte.themen-use-photos .card.postit.has-photo.is-zoomed .postit-photo::after,
.photo-frame.is-zoomed img,
.about-portrait.has-photo.is-zoomed img,
.portrait-placeholder.has-photo.is-zoomed img {
  transform: scale3d(1.1, 1.1, 1);
  opacity: .95;
}
@media (hover: none) {
  .photo-frame:active:not(.is-zoomed) img,
  .about-portrait.has-photo:active:not(.is-zoomed) img,
  .portrait-placeholder.has-photo:active:not(.is-zoomed) img {
    transform: scale3d(1.1, 1.1, 1);
    opacity: .95;
  }
  #schwerpunkte .card.postit.has-photo:active:not(.is-active):not(.is-zoomed) .postit-photo::after {
    transform: scale3d(1.04, 1.04, 1);
    opacity: 1;
  }
  #schwerpunkte.themen-use-photos .card.postit.has-photo:active:not(.is-active):not(.is-zoomed) .postit-photo::after {
    transform: scale3d(1.1, 1.1, 1);
    opacity: .95;
  }
}
.photo-frame,
.about-portrait.has-photo,
.portrait-placeholder.has-photo,
#schwerpunkte .card.postit.has-photo {
  -webkit-tap-highlight-color: transparent;
}
.photo-frame,
.about-portrait.has-photo,
.portrait-placeholder.has-photo {
  cursor: zoom-in;
  touch-action: manipulation;
}
.photo-frame.is-zoomed,
.about-portrait.has-photo.is-zoomed,
.portrait-placeholder.has-photo.is-zoomed {
  cursor: zoom-out;
}
#schwerpunkte .card.postit:active:not(.is-active) {
  box-shadow:
    0 1px 0 color-mix(in srgb, var(--ink) 5%, transparent),
    1px 3px 8px -4px color-mix(in srgb, var(--ink) 16%, transparent);
}
#schwerpunkte .screen-note {
  margin-top: 1.1rem;
}

/* —— Methode / Über mich —— */
.methode-split {
  display: grid;
  gap: 2rem;
  align-items: center;
}
.methode-copy .screen-head {
  margin-bottom: 1.15rem;
}
.methode-copy .screen-head h2 {
  max-width: none;
}
.photo-frame {
  margin: 0;
  overflow: hidden;
  border-radius: .85rem;
  background: var(--paper-soft);
  aspect-ratio: 4 / 5;
  width: min(100%, 22.2rem);
  max-height: 27.6rem;
}
.photo-frame picture,
.photo-frame img {
  display: block;
  width: 100%;
  height: 100%;
}
.photo-frame img {
  object-fit: cover;
  object-position: 50% 22%;
  transform: scale3d(1, 1, 1);
  transition: transform 1s ease, opacity 1s ease;
  opacity: 1;
}
.photo-frame.praxis-photo {
  aspect-ratio: 4 / 3;
  width: 100%;
  max-width: none;
  max-height: none;
}
.photo-frame.praxis-photo img {
  object-position: 50% 45%;
}

/* Über mich: Zitat als Eyecatcher, Name als Untertitel */
#ueber-mich.screen {
  justify-content: flex-start;
  min-height: 0;
}
.about-head {
  margin-bottom: 1.5rem;
  max-width: 48rem;
}
/* Zitat + Autor als ein Block: Autor sitzt am rechten Rand der Zitatzeile */
.about-quote-block {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  width: fit-content;
  max-width: 100%;
  margin: .2rem 0 0;
}
.section-quote {
  margin: .55rem 0 0;
  padding: 0;
  border: 0;
  max-width: 36rem;
}
.section-quote p {
  margin: 0;
  font-size: 1.08rem;
  font-weight: 500;
  font-style: italic;
  color: var(--green-deep);
  letter-spacing: -.01em;
  line-height: 1.45;
}
.section-quote cite,
.section-quote-author {
  display: block;
  margin-top: .35rem;
  font-family: var(--font-body);
  font-size: .9rem;
  font-style: normal;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  text-align: right;
  color: #000;
}
.section-quote--hero {
  margin: 0;
  width: fit-content;
  max-width: 100%;
  font-size: inherit;
  font-weight: inherit;
  line-height: inherit;
}
.about-head .section-quote--hero {
  margin: 0;
}
.about-head .section-quote-author {
  margin-top: .45rem;
  margin-bottom: 0;
  align-self: flex-end;
  width: auto;
  max-width: 100%;
}
.section-quote--hero span {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(1.55rem, 3.6vw, 2.4rem);
  font-weight: var(--font-heading-weight);
  font-style: italic;
  line-height: 1.22;
  letter-spacing: -.025em;
  color: var(--green-deep);
  text-align: left;
}
.about-media {
  margin: 0 0 1.25rem;
  max-width: 16rem;
}
.about-subtitle {
  margin: .85rem 0 0;
  font-family: var(--font-display);
  font-size: clamp(1.25rem, 2.4vw, 1.55rem);
  font-weight: 500;
  color: var(--green-deep);
  letter-spacing: -.015em;
  line-height: 1.25;
}
.about {
  display: flow-root;
}
.about-portrait,
.portrait-placeholder {
  margin: 0;
  width: 100%;
  max-width: none;
  aspect-ratio: 3 / 4;
  background: var(--paper-soft);
  display: grid;
  place-items: center;
  text-align: center;
  color: var(--muted);
  font-size: .9rem;
  padding: 1.2rem;
  overflow: hidden;
  border-radius: .85rem;
}
.portrait-placeholder.has-photo,
.about-portrait.has-photo { padding: 0; }
.portrait-placeholder.has-photo img,
.about-portrait.has-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 22% 78%;
  display: block;
  transform: scale3d(1, 1, 1);
  transition: transform 1s ease, opacity 1s ease;
  opacity: 1;
}
.about-copy {
  width: auto;
  min-width: 0;
}
.about-copy p {
  color: var(--ink);
  margin: 0 0 1rem;
}
.about-copy p:last-child { margin-bottom: 0; }
.about-copy ul {
  padding-left: 1.1rem;
  color: var(--ink);
  margin: 0 0 1rem;
}
.about-copy li { margin-bottom: .45rem; }
.about-copy h3 {
  font-weight: 600;
  margin: 1.6rem 0 .65rem;
  clear: both;
}

/* —— Ablauf —— */
.steps {
  counter-reset: step;
  list-style: none;
  padding: 0;
  margin: 0 0 1.5rem;
  display: grid;
  gap: .85rem;
}
.steps li {
  counter-increment: step;
  background: var(--paper-soft);
  padding: 1.2rem 1.2rem 1.15rem;
}
.screen.alt .steps li { background: #fff; }
.steps li::before {
  content: counter(step);
  display: block;
  font-size: .8rem;
  font-weight: 600;
  letter-spacing: .12em;
  color: var(--terra-ink);
  margin-bottom: .45rem;
}
.steps h3 { margin: 0 0 .35rem; font-size: 1.08rem; font-weight: 600; }
.steps p { margin: 0; font-size: .94rem; color: var(--ink); }

.fees {
  display: grid;
  gap: 0;
  border-top: 1px solid var(--line);
}
.fee-box {
  padding: 1.15rem 0 1.05rem;
  border-bottom: 1px solid var(--line);
}
.fee-box h3 {
  margin: 0 0 .35rem;
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--green-deep);
}
.fee-box p { margin: 0; font-size: .95rem; color: var(--ink); }

#faq .faq-board {
  padding-top: 0;
}
#faq .screen-head {
  margin: 0 0 1.2rem;
}
#faq .screen-head h2 {
  max-width: none; /* einzeilig wenn der Abschnitt breit genug ist */
}
#faq details.postit {
  overflow: hidden;
  transition: width .28s ease, min-height .28s ease, padding .28s ease, opacity .28s ease, flex-basis .28s ease;
}
#faq details.postit summary {
  cursor: pointer;
  list-style: none;
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 1.15rem;
  position: relative;
  margin: 0;
  width: 100%;
  box-sizing: border-box;
  text-align: center;
  font-weight: 300;
  font-synthesis: none;
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
  outline: none;
  background: transparent;
  border-radius: inherit;
  appearance: none;
  -webkit-appearance: none;
}
#faq details.postit summary:focus,
#faq details.postit summary:active {
  outline: none;
  background: transparent;
  box-shadow: none;
  -webkit-tap-highlight-color: transparent;
}
#faq details.postit summary:focus-visible {
  outline: 1.5px solid color-mix(in srgb, var(--terra) 55%, transparent);
  outline-offset: 2px;
}
#faq details.postit,
#faq .postit {
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
  touch-action: manipulation;
}
#faq details.postit summary::selection,
#faq .postit summary::selection {
  background: transparent;
  color: inherit;
}
#faq details.postit summary::-webkit-details-marker { display: none; }
#faq details.postit summary::after {
  content: "";
  position: absolute;
  right: 0;
  top: .2rem;
  width: .38rem;
  height: .38rem;
  border-right: 1.5px solid color-mix(in srgb, var(--terra-ink) 45%, transparent);
  border-bottom: 1.5px solid color-mix(in srgb, var(--terra-ink) 45%, transparent);
  transform: rotate(45deg);
}
#faq details.postit.is-active summary::after {
  transform: translateY(.15rem) rotate(225deg);
}
#faq details.postit p {
  margin: .45rem 0 0;
  padding: 0;
  text-align: center;
  width: 100%;
}
#faq .faq-list .postit:nth-child(5n+1) {
  background: var(--postit-cream);
}
#faq .faq-list .postit:nth-child(5n+2) {
  background: var(--postit-sand);
}
#faq .faq-list .postit:nth-child(5n+3) {
  background: var(--postit-sage);
}
#faq .faq-list .postit:nth-child(5n+4) {
  background: var(--postit-mist);
}
#faq .faq-list .postit:nth-child(5n+5) {
  background: var(--postit-blush);
}
#faq .postit {
  width: 100%;
  min-height: 7.6rem;
  animation: none;
  transform: none;
}
#faq .crisis.postit {
  background:
    linear-gradient(165deg, #fff9c4 0%, var(--postit-alert) 42%, #f7e48a 100%);
  box-shadow:
    0 1px 0 color-mix(in srgb, #fff 55%, transparent) inset,
    0 1px 0 color-mix(in srgb, #c9a82e 16%, transparent),
    2px 7px 16px -5px color-mix(in srgb, var(--ink) 18%, transparent);
  width: 100%;
  min-height: 7.6rem;
  margin-top: 0;
  animation: none;
  transform: none;
}
#faq .crisis.postit summary {
  color: #2a2418;
}
#faq .crisis.postit summary::after {
  border-color: #2a2418;
}
#faq .crisis.postit p,
#faq .crisis.postit li {
  color: #3d3428;
}
#faq .crisis.postit p {
  margin: .45rem 0 .45rem;
}
#faq .crisis.postit ul {
  margin: 0;
  padding-left: 0;
  list-style-position: inside;
  text-align: center;
  width: 100%;
}
#faq .crisis.postit li {
  margin-bottom: .2rem;
}
#faq .crisis.postit li:last-child { margin-bottom: 0; }

/* —— Kontakt —— */
.contact-grid {
  display: grid;
  gap: 1rem;
}
.contact-card {
  background: var(--card);
  padding: 1.5rem 1.4rem;
  border-radius: .85rem;
}
.contact-card h3 {
  margin: 0 0 .65rem;
  font-weight: 600;
  color: var(--green-deep);
}
.contact-card p { margin: .3rem 0; color: var(--ink); }
.contact-card strong { color: var(--green-deep); font-weight: 600; }
.contact-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: .55rem 1.75rem;
  margin-top: 1.35rem;
  padding-top: 1rem;
  border-top: 1px solid var(--line);
  font-size: .8rem;
  line-height: 1.35;
}
.contact-foot-end {
  display: contents;
}
.contact-foot a,
footer a {
  color: var(--green-deep);
  text-decoration: none;
  font-weight: 500;
}
.contact-foot a:hover,
footer a:hover { color: var(--green); }
.footer-brand {
  flex: 1 1 16rem;
  min-width: 0;
}
.footer-brand h3 {
  color: var(--green-deep);
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 500;
  margin: 0 0 .15rem;
  line-height: 1.2;
}
.footer-brand p {
  margin: 0;
  color: var(--muted);
  font-size: .78rem;
}
.footer-brand p + p { margin-top: .12rem; }
.footer-nav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .2rem .85rem;
  flex: 0 1 auto;
}
.footer-nav a {
  white-space: nowrap;
  font-size: .78rem;
  font-weight: 500;
}
.footer-sep {
  display: inline-block;
  width: 1px;
  height: .85em;
  background: var(--line);
  margin: 0 .15rem;
}

/* Rechtliche Unterseiten – schmaler Fuß */
footer {
  background: var(--paper);
  color: var(--ink);
  padding: .95rem 0 1.05rem;
  font-size: .8rem;
  border-top: 1px solid var(--line);
  line-height: 1.35;
}

/* Rechtliche Unterseiten: eine ruhige volle Fläche */
.legal-main {
  min-height: var(--screen-min);
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 3rem 0;
}

/* —— Desktop —— */
@media (min-width: 880px) {
  :root { --edge: clamp(1.5rem, 4vw, 2.5rem); }
  html { scroll-snap-type: y proximity; }
  .screen { scroll-snap-align: start; }
  #kontakt { scroll-snap-align: end; }

  .brand { min-width: max-content; }
  .wrap,
  .hero-content,
  .top .wrap {
    margin-left: auto;
    margin-right: auto;
  }
  .hero-content {
    grid-template-columns: minmax(22rem, 40rem) 1fr;
    column-gap: 2rem;
    align-items: end;
  }
  .hero-copy,
  .hero-rest { grid-column: 1; max-width: 40rem; }
  .hero-bleed img { object-position: 78% 42%; }

  .cards { gap: .75rem 1rem; }
  #schwerpunkte .screen-head { margin-bottom: 1.15rem; }
  #schwerpunkte .screen-head .lead { font-size: 1.02rem; max-width: 38rem; }
  #schwerpunkte .audience-title { margin-bottom: .75rem; }
  #schwerpunkte .postit-board,
  #faq .faq-board {
    gap: .85rem 1.15rem;
    justify-content: center;
  }
  #schwerpunkte .postit-board .audience-items,
  #schwerpunkte .postit-board .cards,
  #schwerpunkte .postit-board .cards.three,
  #faq .postit-board .faq-list {
    display: contents !important;
  }
  #schwerpunkte .card.postit,
  #faq .postit {
    padding: .95rem .9rem 1rem;
    min-height: 7.4rem;
  }
  #schwerpunkte .screen-note { margin-top: 1.1rem; }
  .praxis-layout {
    grid-template-columns: 1.15fr .85fr;
    gap: 2.5rem;
    align-items: center;
  }
  .praxis-cards {
    grid-template-columns: 1fr;
  }
  .steps { grid-template-columns: 1fr 1fr 1fr; }
  .fees { grid-template-columns: 1fr 1fr; }
  .fee-box:nth-child(odd) { padding-right: 1.4rem; }
  .fee-box:nth-child(even) { padding-left: 1.4rem; border-left: 1px solid var(--line); }
  .methode-split {
    grid-template-columns: 1.05fr .85fr;
    gap: 2.5rem;
    align-items: center;
  }
  .methode-split .lead { max-width: none; }
  .methode-split .photo-frame {
    width: min(100%, 22.8rem);
    max-height: 28.2rem;
    margin-top: 0;
    justify-self: end;
  }
  .about {
    display: flow-root;
  }
  .about-media {
    float: left;
    max-width: none;
    width: min(19rem, 38%);
    margin: 0 2.5rem 1.1rem 0;
  }
  .about-portrait,
  .portrait-placeholder {
    float: none;
    width: 100%;
    max-width: none;
    margin: 0;
  }
  .about-copy { max-width: none; width: auto; }
  .about-copy h3 { clear: both; }
  .contact-grid { grid-template-columns: 1fr 1fr; }
}

@media (min-width: 880px) and (max-width: 1180px) {
  .brand { font-size: 1.02rem; }
  .brand small { font-size: .66rem; letter-spacing: .08em; }
  .top nav { gap: 0 .52rem; font-size: .74rem; }
  .top nav .btn { padding: .32rem .75rem; font-size: .72rem; }
  .postit-board {
    grid-template-columns: repeat(auto-fill, minmax(10.8rem, 1fr));
  }
}

@media (min-width: 560px) and (max-width: 879px) {
  #schwerpunkte .postit-board .audience-items,
  #schwerpunkte .postit-board .cards,
  #schwerpunkte .postit-board .cards.three,
  #faq .postit-board .faq-list {
    display: contents !important;
  }
  .postit-board {
    grid-template-columns: repeat(2, 1fr);
    gap: .75rem .85rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; scroll-snap-type: none; }
  #schwerpunkte .card.postit,
  #schwerpunkte .card.postit:hover,
  #schwerpunkte .card.postit:active,
  #faq .postit,
  #faq .postit:hover {
    animation: none;
    transform: none;
    transition: none;
  }
  /* Idle-Fotos ohne Dauer-Animation; bewusster Zoom (Tippen/Aktiv) bleibt erlaubt */
  #schwerpunkte .card.postit.has-photo .postit-photo::after,
  #schwerpunkte .card.postit.has-photo:hover .postit-photo::after,
  .photo-frame img,
  .photo-frame:hover img,
  .about-portrait.has-photo img,
  .about-portrait.has-photo:hover img,
  .portrait-placeholder.has-photo img,
  .portrait-placeholder.has-photo:hover img {
    transform: scale3d(1, 1, 1);
    opacity: 1;
    transition: transform .35s ease, opacity .35s ease;
  }
  #schwerpunkte .card.postit.has-photo.is-active .postit-photo::after,
  #schwerpunkte .card.postit.has-photo.is-zoomed .postit-photo::after,
  .photo-frame.is-zoomed img,
  .about-portrait.has-photo.is-zoomed img,
  .portrait-placeholder.has-photo.is-zoomed img {
    transform: scale3d(1.1, 1.1, 1);
    opacity: .95;
  }
}

/* —— Handy / schmale Ansicht —— */
@media (max-width: 879px), (max-width: 1100px) and (max-height: 540px) {
  :root {
    --edge: 1.25rem;
    --header-h: 3.2rem;
  }

  body .wrap,
  body .top .wrap,
  body .hero-content {
    width: 100%;
    max-width: 100%;
    margin-left: 0;
    margin-right: 0;
    padding-left: max(var(--edge), env(safe-area-inset-left, 0px));
    padding-right: max(var(--edge), env(safe-area-inset-right, 0px));
  }

  /*
   * Kopfzeile am Handy fixiert (sticky bricht bei overflow-x am html/body).
   * So bleiben Menü-Button und CTA beim Scrollen sichtbar.
   */
  .top {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    max-width: 100%;
    padding-top: env(safe-area-inset-top, 0px);
  }
  .top,
  .top.is-scrolled,
  .top.nav-open {
    background: rgba(255, 255, 255, .97);
    border-bottom-color: var(--line);
    box-shadow: 0 1px 12px rgba(63, 90, 102, .07);
  }
  body {
    padding-top: calc(var(--header-h) + env(safe-area-inset-top, 0px));
  }
  .top .wrap {
    flex-wrap: nowrap;
    padding-top: .4rem;
    padding-bottom: .4rem;
    gap: .55rem;
    min-height: 2.6rem;
  }
  .brand { font-size: 1rem; min-width: 0; flex: 1 1 auto; overflow: hidden; }
  .brand > span:first-child {
    display: block;
    max-width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .top-cta {
    display: inline-block;
    flex: 0 0 auto;
    padding: .42rem .8rem;
    font-size: .74rem;
    border-radius: 999px;
    white-space: nowrap;
    line-height: 1.2;
  }
  .top.nav-open .top-cta { display: none; }
  .brand small {
    white-space: nowrap;
    letter-spacing: .08em;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .brand-full { display: none; }
  .brand-short { display: block; }
  .nav-toggle { display: inline-flex; }

  .top:has(.nav-toggle) nav {
    display: none;
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    z-index: 60;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: .35rem var(--edge) 1.25rem;
    background: #fff;
    border-bottom: 1px solid var(--line);
    box-shadow: var(--shadow);
    font-size: 1.05rem;
  }
  .top:has(.nav-toggle).nav-open nav { display: flex; }
  .top:has(.nav-toggle) nav a {
    white-space: normal;
    padding: .9rem .15rem;
    border-bottom: 1px solid var(--line);
  }
  .top:has(.nav-toggle) nav a:last-child { border-bottom: none; }
  .top:has(.nav-toggle) nav .btn {
    margin-top: .65rem;
    text-align: center;
    padding: .9rem 1.2rem;
  }
  .top:not(:has(.nav-toggle)) nav {
    flex-wrap: wrap;
    justify-content: flex-end;
    min-width: 0;
  }
  .top:not(:has(.nav-toggle)) nav a { white-space: normal; }

  .screen {
    justify-content: flex-start;
    min-height: 0;
    padding: 2rem 0 2.1rem;
    max-width: 100%;
    overflow-x: clip;
  }
  .screen-head {
    margin-bottom: 1.1rem;
    text-align: center;
  }
  .screen-head h2 {
    margin-bottom: .55rem;
    margin-left: auto;
    margin-right: auto;
  }
  .screen-head .lead {
    margin-left: auto;
    margin-right: auto;
  }
  .section-kicker {
    text-align: center;
  }
  /* Über mich: Zitatblock zentriert, Autor weiter unter Zeilenende */
  .about-head .about-quote-block {
    margin-left: auto;
    margin-right: auto;
  }
  .about-head .section-quote--hero span {
    text-align: center;
  }
  /* Themenfelder: „Wen ich begleite“ wie die Überschrift zentrieren */
  #schwerpunkte .audience-title {
    text-align: center;
  }

  /*
   * iPhone: kein scroll-snap – sonst springt die Seite beim Scrollen
   * und bei Anker-Links (#kontakt / Erstgespräch) nach.
   */
  html {
    scroll-snap-type: none;
    scroll-behavior: auto;
    scroll-padding-top: calc(var(--header-h) + env(safe-area-inset-top, 0px));
  }
  /* Aufbau: Aquarell oben (füllt), Text greift hinein – svh ohne max-height-Zwang */
  .hero.screen {
    box-sizing: border-box;
    min-height: calc(100svh - var(--header-h) - env(safe-area-inset-top, 0px));
    height: auto;
    max-height: none;
    padding: 0 0 max(.2rem, env(safe-area-inset-bottom, 0px));
    justify-content: flex-end;
    align-items: stretch;
    overflow: hidden;
    scroll-snap-align: none;
    scroll-snap-stop: normal;
  }
  .hero-bleed {
    position: relative;
    inset: auto;
    flex: 1 1 auto;
    min-height: 8.5rem;
    width: 100%;
    max-width: 100%;
    contain: paint;
  }
  .hero-bleed picture {
    position: absolute;
    inset: 0;
  }
  .hero-bleed picture,
  .hero-bleed img {
    width: 100%;
    height: 100%;
    max-width: 100%;
    transform: none;
  }
  .hero-bleed img { object-position: 72% 38%; }
  .hero-sun {
    left: 70%;
    top: 48%;
    width: min(48vw, 14rem);
    height: min(48vw, 14rem);
  }
  .hero-bleed::after {
    background:
      linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0) 28%, rgba(255, 255, 255, .22) 55%, rgba(255, 255, 255, .72) 82%, #ffffff 100%),
      linear-gradient(100deg, rgba(255, 255, 255, .45) 0%, rgba(255, 255, 255, .12) 26%, rgba(255, 255, 255, 0) 48%);
  }
  .hero-content {
    position: relative;
    z-index: 2;
    flex: 0 0 auto;
    gap: clamp(.12rem, .55vh, .28rem);
    max-width: 100%;
    grid-template-columns: 1fr;
    width: 100%;
    margin-top: clamp(-14rem, -36vh, -8rem);
    padding-top: clamp(.55rem, 1.6vh, 1rem);
    padding-bottom: max(.2rem, env(safe-area-inset-bottom, 0px));
    /* Ohne translateY am ganzen Block – sonst Lücke unter den Buttons */
    text-align: center;
    background: linear-gradient(
      180deg,
      rgba(255, 255, 255, 0) 0%,
      rgba(255, 255, 255, .28) 8%,
      rgba(255, 255, 255, .82) 22%,
      #ffffff 36%
    );
  }
  .hero-copy,
  .hero-rest {
    max-width: 100%;
    min-width: 0;
    text-align: center;
  }
  /* Nur der Text wird angehoben (transform) – Bild und Buttons bleiben stehen.
     Gestaffelt: obere Zeilen weiter hoch = größere Abstände dazwischen */
  .hero-content {
    --lift-name: clamp(-6.5rem, -12.3svh, -3.5rem);
    --lift-status: clamp(-5.6rem, -10.6svh, -3rem);
    --lift-title: clamp(-4.6rem, -8.7svh, -2.5rem);
    --lift-sub: clamp(-3.4rem, -6.4svh, -1.8rem);
  }
  .hero-name,
  .hero-brand { transform: translateY(var(--lift-name)); }
  .status-line { transform: translateY(var(--lift-status)); }
  .hero h1 { transform: translateY(var(--lift-title)); }
  .hero .sub { transform: translateY(var(--lift-sub)); }
  .hero-rest {
    margin-top: -.15rem;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: .3rem;
  }
  /* Schrift ohne vh – sonst springt die Größe wenn die Browser-Leiste ein-/ausblendet */
  .hero-name {
    font-size: clamp(1.75rem, 6.8vw, 2.35rem);
    font-weight: 600;
    margin: 0 0 .15rem;
    line-height: 1.1;
    letter-spacing: -.02em;
  }
  .hero-brand {
    font-size: clamp(.95rem, 3.1vw, 1.12rem);
    letter-spacing: .18em;
    margin: 0 0 clamp(.5rem, 1.5vh, .8rem);
    font-weight: 600;
  }
  .status-line {
    display: block;
    white-space: normal;
    text-transform: none;
    letter-spacing: .01em;
    font-size: clamp(.9rem, 2.7vw, 1.02rem);
    font-weight: 500;
    line-height: 1.35;
    margin: 0 auto clamp(.4rem, 1.3vh, .65rem);
    max-width: 22rem;
    overflow-wrap: break-word;
  }
  .hero h1 {
    font-size: clamp(1.4rem, 5.2vw, 1.9rem);
    overflow-wrap: break-word;
    line-height: 1.18;
    margin: 0 auto .05rem;
    text-align: center;
  }
  .hero .sub {
    font-size: clamp(.88rem, 2.5vw, .96rem);
    max-width: 28rem;
    margin: 0 auto;
    line-height: 1.48;
    overflow-wrap: break-word;
    hyphens: auto;
    text-align: center;
  }
  .hero .cta-row {
    flex-direction: column;
    align-items: stretch;
    gap: clamp(.45rem, 1.3vh, .65rem);
    padding-top: .2rem;
    margin: 0;
  }
  .hero .cta-row .btn {
    width: 100%;
    text-align: center;
    font-size: .98rem;
    padding: clamp(.68rem, 1.6vh, .88rem) 1.1rem;
  }

  img, svg, video, iframe { max-width: 100%; }
  .hero-bleed img,
  .portrait-placeholder.has-photo img,
  .photo-frame img { height: 100%; }

  .cards,
  .audience-items,
  .steps,
  .methode-split,
  .praxis-layout,
  .fees,
  .contact-grid {
    grid-template-columns: 1fr;
  }
  /* FAQ: kein Wortumbruch mitten im Wort; etwas kleiner, damit lange Wörter passen */
  #faq details.postit summary,
  #faq .postit summary {
    font-size: .92rem;
    padding-left: .55rem;
    padding-right: .55rem;
    overflow-wrap: normal;
    word-break: normal;
    hyphens: none;
    -webkit-hyphens: none;
    text-align: center;
  }
  /* Letzte Seite: Adressblock + Links als Footer unten */
  #kontakt.screen {
    box-sizing: border-box;
    min-height: calc(100svh - var(--header-h) - env(safe-area-inset-top, 0px));
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    padding-bottom: max(1.25rem, env(safe-area-inset-bottom, 0px));
    scroll-snap-align: none;
  }
  #kontakt .screen-inner {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    width: 100%;
    min-height: 0;
  }
  #kontakt .screen-head,
  #kontakt .screen-body {
    flex: 0 0 auto;
  }
  #kontakt .contact-foot {
    display: block;
    flex: 0 0 auto;
    margin-top: auto;
    padding-top: 1rem;
    border-top: 1px solid var(--line);
  }
  #kontakt .contact-foot-end {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: .55rem;
    width: 100%;
  }
  #kontakt .footer-brand {
    width: 100%;
    margin: 0;
    padding: 0;
    border: 0;
  }
  #kontakt .footer-nav {
    gap: .2rem .7rem;
  }
  #kontakt .footer-nav a {
    color: var(--muted);
    font-weight: 500;
  }
  .fee-box:nth-child(even) {
    padding-left: 0;
    border-left: none;
  }
  .about {
    display: flow-root;
  }
  .about-media {
    float: none;
    max-width: 16rem;
    width: 100%;
    margin: 0 auto 1.25rem;
  }
  .about-portrait,
  .portrait-placeholder {
    float: none;
    max-width: none;
    width: 100%;
    margin: 0;
  }
  .about-subtitle {
    text-align: center;
  }
  .about-copy { max-width: none; }
  .about-copy h3 { clear: none; }
  .section-quote { max-width: none; }
  .photo-frame {
    width: min(100%, 19.2rem);
    max-height: 24rem;
    aspect-ratio: 4 / 5;
    margin: .75rem auto 0;
  }
  .photo-frame.praxis-photo {
    width: 100%;
    max-width: none;
    max-height: none;
    aspect-ratio: 4 / 3;
    margin: 0;
  }
  .section-kicker { letter-spacing: .1em; overflow-wrap: break-word; }

  /* Post-its: gleiche Karten im 2-Spalten-Raster */
  .postit-board,
  #schwerpunkte .postit-board,
  #faq .faq-board {
    grid-template-columns: repeat(2, 1fr);
    gap: .7rem .75rem;
  }
  #schwerpunkte .card.postit,
  #faq .postit,
  #faq .crisis.postit {
    width: 100%;
    max-width: none;
    margin-top: 0;
    margin-left: 0;
    margin-right: 0;
  }

  #schwerpunkte .postit-focus,
  #faq .postit-focus {
    grid-column: 1 / -1;
    width: 100%;
    max-width: none;
    margin: 0 0 1rem;
  }
}

@media (min-width: 360px) and (max-width: 879px) {
  .postit-board,
  #schwerpunkte .postit-board,
  #faq .faq-board {
    grid-template-columns: repeat(2, 1fr);
  }
  #schwerpunkte .card.postit,
  #faq .postit,
  #faq .crisis.postit {
    width: 100%;
    max-width: none;
  }
}

@media (max-width: 480px) {
  :root { --edge: 1rem; }
  body { font-size: 1rem; }
  .brand { font-size: .94rem; }
  .top-cta { padding: .38rem .66rem; font-size: .7rem; }
}

/* Handy im Querformat (sehr niedrig): Startseite kompakt */
@media (max-width: 1100px) and (max-height: 540px) {
  .hero-bleed { min-height: 3.5rem; }
  .hero-content {
    margin-top: clamp(-4.5rem, -16vh, -2rem);
    padding-bottom: max(.15rem, env(safe-area-inset-bottom, 0px));
  }
  .hero-content {
    --lift-name: clamp(-1.5rem, -5vw, -.75rem);
    --lift-status: var(--lift-name);
    --lift-title: var(--lift-name);
    --lift-sub: var(--lift-name);
  }
  .hero-name { font-size: clamp(1.35rem, 4.5vw, 1.7rem); }
  .hero-brand { font-size: .72rem; margin-bottom: .35rem; }
  .status-line { font-size: clamp(.78rem, 2.4vw, .9rem); margin-bottom: .3rem; }
  .hero h1 { font-size: clamp(1.25rem, 4vw, 1.6rem); }
  .hero .sub {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  .hero .cta-row {
    flex-direction: row;
    padding-top: .15rem;
  }
  .hero .cta-row .btn { width: auto; flex: 1 1 0; }
}