/* ==========================================================================
   ich·du·wir — Redesign V2
   Farb- und Formensprache lt. Mockup „ich-du-wir Redesign“ (Claude Design)
   ========================================================================== */

:root {
  /* Grundfarben */
  --grund: #F5F2EC;
  --grund-hell: #FBF9F3;
  --karte: #FFFEFA;
  --text: #1A1A18;
  --text-soft: #3D3B34;
  --muted: #55524A;
  --faint: #8A8577;
  --linie: rgba(26, 26, 24, .12);
  --kartenrand: rgba(26, 26, 24, .07);

  /* ich / du / wir — identisch mit den Formen im Hero-Banner */
  --ich: #E8B84B;
  --ich-label: var(--ich);
  --ich-pastell: #F3E3BB;
  --ich-hover: #FBF3E0;
  --du: #D96B4E;
  --du-dunkel: #C55A3E;
  --du-pastell: #F4D9CE;
  --du-hover: #FAE7DF;
  --wir: #2E7C7B;
  --wir-dunkel: #256867;
  --wir-pastell: #CBE0DF;
  --wir-hover: #E4EFEE;

  /* Podcast-Sektion (petrol) */
  --petrol-tief: #286F6E;
  --petrol-hell: #347F7E;
  --petrol-text: #DCEBEA;
  --petrol-muted: #A9CECD;
  --petrol-soft: #BFDCDB;

  --serif: 'Fraunces', Georgia, serif;
  --sans: 'Source Sans 3', 'Helvetica Neue', Arial, sans-serif;

  --pad-x: 72px;
  --misch-modus: multiply;

  /* Maximale Inhaltsbreite — Inhalt wird zentriert,
     Sektions-Hintergründe bleiben vollflächig */
  --content-max: 1296px;
  --shell-pad: max(var(--pad-x), calc((100% - var(--content-max)) / 2));
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--grund);
  color: var(--text);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 { font-family: var(--serif); font-weight: 600; margin: 0; }
h2 { font-size: clamp(34px, 4vw, 48px); line-height: 1.15; }
h3 { font-size: clamp(21px, 2.2vw, 28px); }
a { color: inherit; }

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--text);
  color: var(--grund);
  padding: 10px 18px;
  z-index: 100;
}
.skip-link:focus { left: 12px; top: 12px; }

/* ---------- Formen (Blobs) — keine zwei gleich ---------- */

.blob { border-radius: 46% 54% 41% 59% / 57% 41% 59% 43%; }
.blob.b1 { border-radius: 46% 54% 41% 59% / 57% 41% 59% 43%; }
.blob.b2 { border-radius: 58% 42% 52% 48% / 44% 62% 38% 56%; }
.blob.b3 { border-radius: 40% 60% 55% 45% / 55% 40% 60% 45%; }
.blob.b4 { border-radius: 63% 37% 55% 45% / 42% 58% 42% 58%; }
.blob.b5 { border-radius: 39% 61% 47% 53% / 61% 44% 56% 39%; }
.blob.b6 { border-radius: 55% 45% 62% 38% / 48% 58% 42% 52%; }
.blob.b7 { border-radius: 50% 50% 38% 62% / 55% 62% 38% 45%; }
.blob.b8 { border-radius: 61% 39% 45% 55% / 40% 55% 45% 60%; }

.blob-gelb    { background: var(--ich); }
.blob-koralle { background: var(--du); }
.blob-petrol  { background: var(--wir); }

@keyframes blobfloat {
  0%   { transform: translate(0, 0) scale(1); }
  100% { transform: translate(8px, -12px) scale(1.04); }
}
.blob-animated { animation: blobfloat 9s ease-in-out infinite alternate; }

@media (prefers-reduced-motion: reduce) {
  .blob-animated { animation: none; }
  html { scroll-behavior: auto; }
}

.placeholder-label {
  font-family: ui-monospace, Menlo, monospace;
  font-size: 12.5px;
  color: var(--faint);
  text-align: center;
  line-height: 1.6;
}

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

.site-header { position: relative; z-index: 20; }

.nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 24px var(--pad-x) 8px;
}

.logo {
  font-family: var(--serif);
  font-weight: 600;
  font-size: 25px;
  text-decoration: none;
}
.logo-ich { color: var(--ich-label); }
.logo-du { color: var(--du); }
.logo-wir { color: var(--wir); }
.logo-dot { color: var(--text); opacity: .35; padding: 0 3px; }

.nav-links {
  display: flex;
  gap: 38px;
  font-size: 16.5px;
  font-weight: 500;
}
.nav-links a { text-decoration: none; transition: color .2s; }
.nav-links a:hover { color: var(--du); }

.burger {
  display: none;
  flex-direction: column;
  gap: 5px;
  padding: 12px 4px;
  background: none;
  border: none;
  cursor: pointer;
}
.burger span {
  display: block;
  width: 24px;
  height: 2.5px;
  background: var(--text);
  border-radius: 2px;
  transition: transform .25s, opacity .25s, width .25s;
}
.burger span:nth-child(3) { width: 16px; }
.burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7.5px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.burger[aria-expanded="true"] span:nth-child(3) { width: 24px; transform: translateY(-7.5px) rotate(-45deg); }

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

.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 16px;
  font-weight: 600;
  padding: 15px 28px;
  text-decoration: none;
  transition: all .2s;
  border: none;
  cursor: pointer;
}
.btn-wir {
  background: var(--wir);
  color: var(--grund);
  border-radius: 16px 20px 15px 22px;
}
.btn-wir:hover { background: var(--wir-dunkel); transform: translateY(-2px); }
.btn-du {
  background: var(--du);
  color: var(--grund);
  border-radius: 14px 18px 15px 20px;
}
.btn-du:hover { background: var(--du-dunkel); transform: translateY(-2px); }

.eyebrow {
  font-size: 13.5px;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  margin-bottom: 14px;
}
.eyebrow-gelb { color: var(--ich); }
.eyebrow-koralle { color: var(--du); }

.link-arrow {
  display: inline-block;
  font-size: 16px;
  font-weight: 600;
  color: var(--text);
  text-decoration: none;
  border-bottom: 2px solid var(--du);
  padding-bottom: 2px;
  transition: color .2s;
}
.link-arrow:hover { color: var(--du); }

/* Sektions-Überschriften (h2 auf der Startseite, h1 auf Unterseiten) */
.angebote-headline,
.termine-headline,
.ueber-headline {
  font-size: clamp(34px, 4vw, 48px);
  line-height: 1.15;
  margin: 0 0 12px;
}

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

.hero { position: relative; overflow: hidden; }

/* Desktop: Hero füllt immer den ganzen ersten Screen (100vh),
   der Header liegt dazu als Overlay über dem Hero */
@media (min-width: 701px) {
  .template-home .site-header {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
  }
  .hero {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    padding-top: 90px;
  }
  .hero-grid { flex: 1; }
}

.hero-grid {
  display: grid;
  grid-template-columns: 1fr 640px;
  gap: 40px;
  align-items: center;
  padding: 60px var(--pad-x) 30px;
}

.hero-title {
  font-size: clamp(36px, 4.5vw, 64px);
  line-height: 1.12;
  letter-spacing: -0.01em;
  margin: 0 0 24px;
}
.accent-du { color: var(--du); }
.accent-wir { color: var(--wir); }

.hero-sub {
  font-size: 19px;
  line-height: 1.6;
  color: var(--muted);
  margin: 0 0 40px;
  max-width: 480px;
}

.hero-quote {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  max-width: 520px;
}
.quote-blob { width: 22px; height: 20px; flex: none; margin-top: 8px; }
.quote-text {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 500;
  font-size: clamp(17.5px, 1.8vw, 25px);
  line-height: 1.45;
  margin: 0;
}

.hero-blobs {
  position: relative;
  height: 600px;
  isolation: isolate;
}
.hero-blob { position: absolute; mix-blend-mode: var(--misch-modus); }
.hero-blob-ich { left: 10px; top: 50px; transform: rotate(-8deg); }
.hero-blob-ich .blob { width: 350px; height: 325px; }
.hero-blob-du { left: 250px; top: 0; transform: rotate(7deg); }
.hero-blob-du .blob { width: 330px; height: 305px; }
.hero-blob-wir { left: 130px; top: 230px; transform: rotate(-3deg); }
.hero-blob-wir .blob { width: 380px; height: 345px; }

.scroll-hint {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding-bottom: 28px;
}
.scroll-label {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--faint);
}
.scroll-dot { width: 14px; height: 22px; opacity: .7; }

/* ---------- Ich Du Wir Statements ---------- */

.statements {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 28px;
  align-items: start;
  padding: 110px var(--pad-x) 100px;
  overflow: hidden;
}

.statement { position: relative; padding: 60px 52px 56px; }

/* Der Blob wächst mit dem Inhalt mit — Text kann nicht mehr herauslaufen */
.statement-bg {
  position: absolute;
  inset: 0;
}
.statement-ich .statement-bg { background: var(--ich-pastell); transform: rotate(-2.5deg); }
.statement-du .statement-bg { background: var(--du-pastell); transform: rotate(2deg); margin-top: 18px; }
.statement-wir .statement-bg { background: var(--wir-pastell); transform: rotate(-1.5deg); margin-top: 8px; }
.statement-du .statement-body { padding-top: 18px; }
.statement-wir .statement-body { padding-top: 8px; }

.statement-body { position: relative; }
.statement-word {
  font-family: var(--serif);
  font-weight: 700;
  font-size: clamp(64px, 7vw, 96px);
  line-height: 1;
  margin-bottom: 26px;
}
.statement-ich .statement-word { color: var(--ich-label); transform: rotate(-3deg); }
.statement-du .statement-word { color: var(--du); transform: rotate(2deg); }
.statement-wir .statement-word { color: var(--wir); transform: rotate(-2deg); }

.statement p {
  font-size: 17.5px;
  line-height: 1.65;
  color: var(--text-soft);
  margin: 0;
  max-width: 300px;
}

/* ---------- Angebote ---------- */

.angebote {
  padding: 100px var(--pad-x);
  background: var(--grund-hell);
}
.angebote h2 { margin-bottom: 12px; }

.section-sub {
  font-size: 18px;
  color: var(--muted);
  margin: 0 0 56px;
  max-width: 560px;
}

.group-title {
  display: flex;
  align-items: baseline;
  gap: 14px;
  margin-bottom: 24px;
}
.group-dot { width: 16px; height: 14px; flex: none; }

.card-grid {
  display: grid;
  gap: 24px;
  margin-bottom: 64px;
}
.card-grid-4 { grid-template-columns: repeat(4, 1fr); }
.card-grid-3 { grid-template-columns: repeat(3, 1fr); }
.card-grid:last-child { margin-bottom: 0; }

.card {
  position: relative;
  overflow: hidden;
  display: block;
  background: var(--karte);
  border: 1px solid var(--kartenrand);
  border-radius: 20px;
  padding: 30px 26px;
  text-decoration: none;
  transition: all .25s;
}
.card:hover {
  transform: translateY(-6px);
  box-shadow: 0 18px 40px rgba(26, 26, 24, .12);
}
.card-ich:hover { background: var(--ich-hover); }
.card-du:hover { background: var(--du-hover); }
.card-wir:hover { background: var(--wir-hover); }

.card-blob {
  position: absolute;
  right: -40px;
  top: -40px;
  width: 130px;
  height: 120px;
}
.card-ich .card-blob { background: var(--ich-pastell); border-radius: 46% 54% 41% 59% / 57% 41% 59% 43%; }
.card-du .card-blob { background: var(--du-pastell); border-radius: 58% 42% 52% 48% / 44% 62% 38% 56%; }
.card-wir .card-blob { background: var(--wir-pastell); border-radius: 40% 60% 55% 45% / 55% 40% 60% 45%; }

.card-body { position: relative; }

.card-label {
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  margin-bottom: 14px;
}
.card-ich .card-label, .card-label-ich { color: var(--ich-label); }
.card-du .card-label, .card-label-du { color: var(--du); }
.card-wir .card-label, .card-label-wir { color: var(--wir); }

.card-title {
  font-family: var(--serif);
  font-weight: 600;
  font-size: 23px;
  margin: 0 0 10px;
  line-height: 1.25;
}
.card-text {
  font-size: 15px;
  line-height: 1.55;
  color: var(--muted);
  margin: 0 0 20px;
}
.card-more { font-size: 14.5px; font-weight: 600; color: var(--text); }

/* ---------- Termine ---------- */

.termine { padding: 100px var(--pad-x); }

.termine-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 32px;
  margin-bottom: 48px;
}
.termine-head h2 { margin-bottom: 12px; }
.termine-head .section-sub { margin-bottom: 0; }

.termin {
  display: grid;
  grid-template-columns: 170px 26px 1fr auto;
  gap: 20px;
  align-items: center;
  padding: 26px 8px;
  border-top: 1px solid var(--linie);
  text-decoration: none;
  cursor: pointer;
  transition: background .2s;
}
.termin:last-child { border-bottom: 1px solid var(--linie); }
.termin:hover { background: #EFEBE1; }

.termin-datum {
  font-family: var(--serif);
  font-weight: 600;
  font-size: 23px;
  line-height: 1.2;
}
.termin-gelb .termin-datum { color: var(--ich-label); }
.termin-koralle .termin-datum { color: var(--du); }
.termin-petrol .termin-datum { color: var(--wir); }

.termin-ort { font-size: 14px; color: var(--faint); }

.termin-dot { width: 18px; height: 16px; }
.termin-gelb .termin-dot { background: var(--ich); border-radius: 46% 54% 41% 59% / 57% 41% 59% 43%; }
.termin-koralle .termin-dot { background: var(--du); border-radius: 58% 42% 52% 48% / 44% 62% 38% 56%; }
.termin-petrol .termin-dot { background: var(--wir); border-radius: 40% 60% 55% 45% / 55% 40% 60% 45%; }

.termin-titel { font-size: 19px; font-weight: 600; }
.termin-untertitel { font-size: 15px; color: var(--muted); }

/* ---------- Podcast ---------- */

.podcast {
  position: relative;
  overflow: hidden;
  background: var(--wir);
  color: var(--grund);
  padding: 100px var(--pad-x);
}

.podcast-bg { position: absolute; }
.podcast-bg-1 {
  right: -180px;
  top: -120px;
  width: 720px;
  height: 640px;
  background: var(--petrol-tief);
  transform: rotate(8deg);
}
.podcast-bg-2 {
  left: -140px;
  bottom: -180px;
  width: 520px;
  height: 470px;
  background: var(--petrol-hell);
  transform: rotate(-6deg);
}

.podcast-inner { position: relative; }
.podcast .podcast-headline {
  font-size: clamp(34px, 4vw, 48px);
  line-height: 1.15;
  margin: 0 0 56px;
}

/* Unterseiten: Rücklink-Zeile */
.page-back {
  padding: 24px var(--pad-x) 20px;
}
.podcast-page .podcast-intro {
  font-size: 17.5px;
  line-height: 1.65;
  color: var(--petrol-text);
  max-width: 720px;
  margin: -36px 0 56px;
}
.podcast-all { padding-top: 26px; }
.podcast-all-link {
  display: inline-block;
  font-size: 15.5px;
  font-weight: 600;
  color: var(--grund);
  background: rgba(245, 242, 236, .14);
  padding: 12px 24px;
  border-radius: 14px 18px 15px 20px;
  text-decoration: none;
  transition: background .2s, transform .2s;
}
.podcast-all-link:hover {
  background: rgba(245, 242, 236, .24);
  transform: translateY(-2px);
}

.podcast-feature {
  display: grid;
  grid-template-columns: 320px 1fr;
  gap: 64px;
  align-items: center;
  margin-bottom: 64px;
}

.podcast-cover {
  width: 320px;
  height: 300px;
  overflow: hidden;
  background: repeating-linear-gradient(45deg, #3B8B8A 0 14px, var(--petrol-hell) 14px 28px);
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
}
.podcast-cover img { width: 100%; height: 100%; object-fit: cover; }
.podcast-cover .placeholder-label { color: var(--petrol-soft); }

.podcast-eyebrow {
  font-size: 14.5px;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--petrol-soft);
  margin-bottom: 12px;
}
.podcast-episode-title {
  font-size: clamp(26px, 3vw, 38px);
  line-height: 1.2;
  margin-bottom: 16px;
}
.podcast-episode-desc {
  font-size: 17.5px;
  line-height: 1.6;
  color: var(--petrol-text);
  margin: 0 0 14px;
  max-width: 600px;
}
.podcast-episode-meta {
  font-size: 15px;
  color: var(--petrol-muted);
  margin-bottom: 30px;
}

/* Player */

.player { display: flex; align-items: center; gap: 26px; }

.play-btn {
  cursor: pointer;
  width: 90px;
  height: 84px;
  background: var(--ich);
  border-radius: 52% 48% 44% 56% / 46% 58% 42% 54%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  border: none;
  transition: transform .2s, border-radius .2s;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .18);
}
.play-btn:hover { transform: scale(1.07) rotate(-3deg); }
.player.playing .play-btn { border-radius: 44% 56% 52% 48% / 58% 46% 54% 42%; }

.icon-play {
  width: 0;
  height: 0;
  border-left: 26px solid var(--text);
  border-top: 16px solid transparent;
  border-bottom: 16px solid transparent;
  margin-left: 6px;
}
.icon-pause { display: none; gap: 8px; }
.icon-pause span {
  width: 9px;
  height: 30px;
  background: var(--text);
  border-radius: 4px 5px 4px 6px;
}
.icon-pause span:last-child { border-radius: 5px 4px 6px 4px; }
.player.playing .icon-play { display: none; }
.player.playing .icon-pause { display: flex; }

.player-progress { flex: 1; max-width: 520px; }

.progress-track {
  position: relative;
  height: 10px;
  background: rgba(245, 242, 236, .22);
  border-radius: 6px 8px 6px 9px;
  overflow: hidden;
  margin-bottom: 10px;
  cursor: pointer;
}
.progress-fill {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 0%;
  background: var(--grund);
  border-radius: 6px 8px 6px 9px;
  transition: width .4s linear;
}
.player-times {
  display: flex;
  justify-content: space-between;
  font-size: 13.5px;
  color: var(--petrol-muted);
  font-variant-numeric: tabular-nums;
}

/* Episodenliste */

.podcast-list { max-width: 860px; }

.podcast-row {
  display: grid;
  grid-template-columns: auto 1fr auto auto;
  gap: 20px;
  align-items: center;
  padding: 18px 8px;
  border-top: 1px solid rgba(245, 242, 236, .18);
  cursor: pointer;
  transition: background .2s;
}
.podcast-row:last-of-type { border-bottom: 1px solid rgba(245, 242, 236, .18); }
.podcast-row:hover { background: rgba(245, 242, 236, .06); }

.row-play {
  width: 34px;
  height: 32px;
  background: rgba(245, 242, 236, .14);
  display: flex;
  align-items: center;
  justify-content: center;
}
.row-play-icon {
  width: 0;
  height: 0;
  border-left: 10px solid var(--grund);
  border-top: 6px solid transparent;
  border-bottom: 6px solid transparent;
  margin-left: 2px;
}
.row-title { font-size: 17px; font-weight: 600; }
.row-date, .row-duration { font-size: 14.5px; color: var(--petrol-muted); }
.row-duration { font-variant-numeric: tabular-nums; }

.podcast-links {
  padding-top: 22px;
  font-size: 15px;
  color: var(--petrol-muted);
}
.podcast-links a { color: var(--petrol-text); }

/* ---------- Über Benno + Buch ---------- */

.ueber { padding: 110px var(--pad-x) 90px; }

.ueber-grid {
  display: grid;
  grid-template-columns: 1fr 440px;
  gap: 80px;
  align-items: center;
  margin-bottom: 80px;
}
.ueber-copy .ueber-headline { margin-bottom: 26px; }
.ueber-copy p {
  font-size: 18px;
  line-height: 1.7;
  color: var(--text-soft);
  margin: 0 0 18px;
  max-width: 560px;
}
.ueber-copy p:last-child { margin-bottom: 0; }
.ueber-copy .link-arrow { margin-top: 26px; }

.ueber-portrait { position: relative; height: 440px; }
.portrait-bg {
  position: absolute;
  right: 10px;
  top: 30px;
  width: 400px;
  height: 380px;
  background: var(--ich-pastell);
  transform: rotate(6deg);
}
.portrait-frame {
  position: absolute;
  right: 40px;
  top: 0;
  width: 390px;
  height: 400px;
  overflow: hidden;
  background: repeating-linear-gradient(45deg, #E7E1D2 0 14px, #EFEAE0 14px 28px);
  display: flex;
  align-items: center;
  justify-content: center;
}
.portrait-frame img { width: 100%; height: 100%; object-fit: cover; }

.buch {
  display: flex;
  gap: 44px;
  align-items: center;
  background: var(--karte);
  border: 1px solid var(--kartenrand);
  border-radius: 24px;
  padding: 40px 48px;
  max-width: 900px;
}
.buch-cover {
  width: 130px;
  height: 184px;
  border-radius: 14px 18px 14px 20px;
  flex: none;
  background: repeating-linear-gradient(45deg, #D9C9A2 0 12px, #E2D4B2 12px 24px);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 10px 26px rgba(26, 26, 24, .14);
  transform: rotate(-2deg);
  overflow: hidden;
}
.buch-cover img { width: 100%; height: 100%; object-fit: cover; }
.buch-cover .placeholder-label { color: #6E6650; font-size: 11.5px; }

.buch-info h3 { font-size: clamp(24px, 2.5vw, 30px); margin-bottom: 10px; }
.buch-info p {
  font-size: 16.5px;
  line-height: 1.6;
  color: var(--muted);
  margin: 0 0 18px;
}

/* ---------- Philosophie ---------- */

.philosophie { overflow: hidden; }

.philosophie-hero {
  display: grid;
  grid-template-columns: 1fr 420px;
  gap: 60px;
  align-items: center;
  padding: 30px var(--pad-x) 40px;
}
.philosophie-hero-copy h1 {
  font-size: clamp(36px, 4.5vw, 56px);
  line-height: 1.12;
  margin: 8px 0 22px;
}
.philosophie-intro {
  font-size: 19px;
  line-height: 1.65;
  color: var(--muted);
  margin: 0;
  max-width: 560px;
}

.philosophie-hero-blobs {
  position: relative;
  height: 340px;
  isolation: isolate;
}
.philosophie-blob { position: absolute; mix-blend-mode: multiply; }
.philosophie-blob-1 { width: 200px; height: 185px; left: 20px; top: 30px; transform: rotate(-7deg); }
.philosophie-blob-2 { width: 190px; height: 175px; left: 160px; top: 0; transform: rotate(6deg); }
.philosophie-blob-3 { width: 215px; height: 195px; left: 90px; top: 140px; transform: rotate(-3deg); }
.philosophie-bild {
  width: 100%;
  height: 340px;
  overflow: hidden;
}
.philosophie-bild img { width: 100%; height: 100%; object-fit: cover; }

.philosophie-zitat {
  display: flex;
  gap: 18px;
  align-items: flex-start;
  background: var(--grund-hell);
  border-radius: 24px;
  padding: 40px 44px;
  margin: 20px var(--pad-x) 56px;
  max-width: 860px;
}
.philosophie-zitat .quote-blob { margin-top: 10px; }
.quote-quelle {
  margin-top: 12px;
  font-size: 15px;
  font-weight: 600;
  color: var(--faint);
}

.philosophie-text {
  padding: 0 var(--pad-x);
}
.philosophie-text > * { max-width: 720px; }
.philosophie-text h2 {
  font-size: clamp(24px, 2.6vw, 32px);
  margin: 44px 0 16px;
}
.philosophie-text h2:first-child { margin-top: 0; }

.philosophie-cta {
  display: flex;
  align-items: center;
  gap: 32px;
  flex-wrap: wrap;
  padding: 48px var(--pad-x) 100px;
}

@media (max-width: 900px) {
  .philosophie-hero { grid-template-columns: 1fr; gap: 24px; }
  .philosophie-hero-blobs { max-width: 360px; margin: 0 auto; width: 100%; }
  .philosophie-zitat { padding: 28px 24px; }
}

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

.footer {
  position: relative;
  overflow: hidden;
  background: var(--text);
  color: var(--grund);
  padding: 80px var(--pad-x) 40px;
}

.footer-blobs {
  position: absolute;
  right: 60px;
  top: 50px;
  display: flex;
  gap: 14px;
}
.footer-blobs .b1 { width: 26px; height: 24px; transform: rotate(-8deg); }
.footer-blobs .b2 { width: 24px; height: 22px; transform: rotate(10deg); margin-top: 14px; }
.footer-blobs .b3 { width: 28px; height: 25px; transform: rotate(-4deg); }

.footer-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  margin-bottom: 64px;
}

.footer-logo {
  font-family: var(--serif);
  font-weight: 600;
  font-size: 26px;
  margin-bottom: 28px;
}
.footer-logo .logo-ich { color: var(--ich); }
.footer-logo .logo-dot { color: var(--grund); opacity: .4; }
.footer-wir { color: var(--wir); }

.footer-addresses {
  display: flex;
  flex-direction: column;
  gap: 14px;
  font-size: 16.5px;
  line-height: 1.5;
  color: #C9C5BA;
}
.footer-addresses strong { color: var(--grund); font-weight: 600; }
.footer-addresses a { color: #C9C5BA; text-decoration: none; }
.footer-addresses a:hover { color: var(--grund); }

.footer-nav-cols { display: flex; gap: 80px; }

.footer-nav {
  display: flex;
  flex-direction: column;
  gap: 12px;
  font-size: 16.5px;
}
.footer-nav a {
  color: #C9C5BA;
  text-decoration: none;
  transition: color .2s;
}
.footer-nav a:hover { color: var(--grund); }
.footer-nav-title {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--faint);
  margin-bottom: 6px;
}

.footer-bottom {
  display: flex;
  justify-content: space-between;
  gap: 24px;
  border-top: 1px solid rgba(245, 242, 236, .14);
  padding-top: 24px;
  font-size: 14px;
  color: var(--faint);
}
.footer-legal { display: flex; gap: 24px; }
.footer-legal a { color: var(--faint); text-decoration: none; }
.footer-legal a:hover { color: var(--grund); }

/* ---------- Detailseiten (Angebot, Impressum, Datenschutz) ---------- */

.detail {
  position: relative;
  overflow: hidden;
  padding: 60px var(--pad-x) 110px;
  min-height: 45vh;
}
.detail-blob {
  position: absolute;
  right: -120px;
  top: -60px;
  width: 420px;
  height: 380px;
  opacity: .25;
}
.detail-inner {
  position: relative;
  max-width: 720px;
}
.detail h1 {
  font-size: clamp(36px, 4.5vw, 56px);
  line-height: 1.12;
  margin: 8px 0 28px;
}
.detail-text {
  font-size: 18px;
  line-height: 1.7;
  color: var(--text-soft);
}
.detail-text p { margin: 0 0 18px; }
.detail-cta { margin-top: 40px; }

.back-link {
  display: inline-block;
  font-size: 15px;
  font-weight: 600;
  color: var(--muted);
  text-decoration: none;
  margin-bottom: 32px;
  transition: color .2s;
}
.back-link:hover { color: var(--du); }

/* ==========================================================================
   Zentrierter Inhalt: ab --content-max wächst nur noch der Rand
   ========================================================================== */

.nav,
.hero-grid,
.statements,
.angebote,
.termine,
.podcast,
.ueber,
.footer,
.detail,
.page-back,
.philosophie-hero,
.philosophie-text,
.philosophie-cta {
  padding-left: var(--shell-pad);
  padding-right: var(--shell-pad);
}

.philosophie-zitat {
  margin-left: var(--shell-pad);
  margin-right: var(--shell-pad);
}

.footer-blobs {
  right: max(60px, calc((100% - var(--content-max)) / 2));
}

/* ==========================================================================
   Responsive
   ========================================================================== */

@media (max-width: 1200px) {
  :root { --pad-x: 40px; }

  .hero-grid { grid-template-columns: 1fr 480px; }
  .hero-blobs { height: 460px; transform: scale(.78); transform-origin: left center; }

  .card-grid-4 { grid-template-columns: repeat(2, 1fr); }
  .card-grid-3 { grid-template-columns: repeat(2, 1fr); }

  .ueber-grid { grid-template-columns: 1fr 380px; gap: 48px; }
  .portrait-bg, .portrait-frame { transform-origin: right top; }
}

@media (max-width: 900px) {
  .statements {
    grid-template-columns: 1fr;
    gap: 40px;
    padding-top: 80px;
    padding-bottom: 60px;
  }
  .statement { padding: 44px 36px 40px; }
  .statement-du .statement-bg,
  .statement-wir .statement-bg { margin-top: 0; }
  .statement-du .statement-body,
  .statement-wir .statement-body { padding-top: 0; }

  .podcast-feature {
    grid-template-columns: 1fr;
    gap: 36px;
  }
  .podcast-cover { margin: 0 auto; }

  .ueber-grid { grid-template-columns: 1fr; gap: 48px; }
  .ueber-portrait { max-width: 440px; margin: 0 auto; width: 100%; }

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

  .footer-grid { grid-template-columns: 1fr; gap: 48px; }
}

@media (max-width: 700px) {
  :root { --pad-x: 24px; }

  .nav { padding-top: 22px; }
  .logo { font-size: 20px; }

  .nav-links {
    display: none;
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    margin-top: 16px;
    flex-direction: column;
    gap: 0;
    background: var(--karte);
    border-top: 1px solid var(--linie);
    border-bottom: 1px solid var(--linie);
    box-shadow: 0 18px 40px rgba(26, 26, 24, .12);
    padding: 8px 0;
    z-index: 30;
  }
  .nav-links.open { display: flex; }
  .nav-links a { padding: 14px var(--pad-x); font-size: 18px; }
  .nav { position: relative; }
  .site-header { position: sticky; top: 0; background: var(--grund); padding-bottom: 12px; z-index: 40; }

  .burger { display: flex; }

  .hero-grid {
    grid-template-columns: 1fr;
    gap: 0;
    padding-top: 8px;
  }
  .hero-copy { order: 2; padding-bottom: 24px; }
  .hero-blobs {
    order: 1;
    height: 300px;
    transform: none;
    margin: 12px auto 20px;
    width: 340px;
  }
  .hero-blob-ich { left: 30px; top: 44px; }
  .hero-blob-ich .blob { width: 160px; height: 150px; }
  .hero-blob-du { left: 146px; top: 20px; }
  .hero-blob-du .blob { width: 150px; height: 140px; }
  .hero-blob-wir { left: 86px; top: 126px; }
  .hero-blob-wir .blob { width: 172px; height: 156px; }

  .hero-sub { font-size: 15.5px; margin-bottom: 20px; }
  .quote-text { font-size: 17.5px; }
  .quote-blob { width: 16px; height: 14px; margin-top: 5px; }

  .statement-word { font-size: 64px; }

  .angebote, .termine, .podcast, .ueber { padding-top: 64px; padding-bottom: 64px; }

  .card-grid-4, .card-grid-3 { grid-template-columns: 1fr; gap: 14px; margin-bottom: 40px; }
  .card { border-radius: 18px; padding: 20px; }
  .card-title { font-size: 19px; }
  .card-text { font-size: 14px; margin-bottom: 12px; }

  .termin {
    grid-template-columns: 18px 1fr auto;
    grid-template-areas:
      "dot date arrow"
      "dot info arrow";
    gap: 6px 14px;
    padding: 18px 4px;
  }
  .termin-dot { grid-area: dot; margin-top: 6px; }
  .termin-date { grid-area: date; display: flex; align-items: baseline; gap: 10px; }
  .termin-datum { font-size: 19px; }
  .termin-info { grid-area: info; }
  .termin-titel { font-size: 16px; }
  .termin-untertitel { font-size: 14px; }

  .podcast-cover { width: 200px; height: 188px; }
  .podcast-episode-title { text-align: center; }
  .podcast-current { text-align: center; }
  .player { text-align: left; gap: 18px; }
  .play-btn { width: 64px; height: 60px; }
  .icon-play { border-left-width: 19px; border-top-width: 12px; border-bottom-width: 12px; margin-left: 4px; }
  .icon-pause span { width: 7px; height: 22px; }

  .podcast-row {
    grid-template-columns: auto 1fr auto;
    gap: 12px;
    padding: 13px 4px;
  }
  .row-date { display: none; }
  .row-title { font-size: 14.5px; }
  .row-duration { font-size: 12.5px; }

  .ueber-portrait { height: 340px; max-width: 320px; }
  .portrait-bg { width: 290px; height: 275px; right: 0; }
  .portrait-frame { width: 285px; height: 292px; right: 16px; }

  .buch {
    flex-direction: column;
    align-items: flex-start;
    gap: 28px;
    padding: 28px 24px;
  }

  .footer { padding-top: 56px; }
  .footer-blobs { right: 24px; top: 28px; }
  .footer-nav-cols { flex-direction: column; gap: 36px; }
  .footer-bottom { flex-direction: column; gap: 12px; }
}

/* ---------- Sticky Header: folgt der Scrollrichtung ----------
   Der Header bleibt oben fixiert und wird beim Runterscrollen per
   transform ausgeblendet, beim Hochscrollen wieder eingeblendet.
   Die Klassen .header-hidden / .header-scrolled setzt main.js. */

.site-header {
  position: sticky;
  top: 0;
  transition: transform .32s ease;
  will-change: transform;
}

/* Desktop-Home: Header bleibt wie bisher Overlay über dem Hero,
   nur fixed statt absolute, damit er beim Scrollen oben bleibt */
@media (min-width: 701px) {
  .template-home .site-header { position: fixed; }
}

/* Sobald gescrollt wurde, bekommt der Header den Seitenhintergrund,
   damit kein Inhalt durch ihn durchscheint */
.site-header.header-scrolled { background: var(--grund); }

.site-header.header-hidden { transform: translateY(-100%); }

@media (prefers-reduced-motion: reduce) {
  .site-header { transition: none; }
}

/* ---------- CTA-Buttons auf Angebots-Karten & Terminen ----------
   Die Karte ist jetzt ein <div> mit unsichtbarem Flächen-Link
   (.card-stretch), damit der CTA-Button ein eigenes Ziel haben kann,
   die Karte selbst aber wie bisher komplett klickbar bleibt. */

.card-stretch { position: absolute; inset: 0; z-index: 1; }
.card-blob { pointer-events: none; }
.card-body { pointer-events: none; }
.card-body a { pointer-events: auto; }

.card-cta {
  position: relative;
  z-index: 2;
  margin-top: 16px;
  padding: 10px 20px;
  font-size: 14.5px;
}

/* Termin-Zeile: kompakter Button ersetzt den Pfeil rechts */
.termin-cta {
  padding: 10px 20px;
  font-size: 14.5px;
  white-space: nowrap;
}
.termin:hover .termin-cta { background: var(--wir-dunkel); }

@media (max-width: 700px) {
  .termin-cta {
    grid-area: arrow;
    align-self: center;
    padding: 8px 14px;
    font-size: 13.5px;
  }
}

/* ---------- Kontaktseite ---------- */

.kontakt {
  overflow: hidden;
  padding: 30px var(--shell-pad) 90px;
}

.kontakt-head { max-width: 720px; }
.kontakt h1 {
  font-size: clamp(36px, 4.5vw, 56px);
  line-height: 1.12;
  margin: 8px 0 20px;
}
.kontakt-intro {
  font-size: 18.5px;
  line-height: 1.7;
  color: var(--text-soft);
  margin: 0 0 52px;
}

.kontakt-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}

.kontakt-karte {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  background: var(--karte);
  border: 1px solid var(--kartenrand);
  border-radius: 20px;
  padding: 30px 26px;
}

.kontakt-blob {
  position: absolute;
  top: -34px;
  right: -34px;
  width: 110px;
  height: 100px;
  opacity: .3;
  pointer-events: none;
}

.kontakt-label {
  font-size: 13.5px;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--muted);
}

.kontakt-wert {
  font-family: var(--serif);
  font-size: 21px;
  font-weight: 600;
  color: var(--text);
  text-decoration: none;
  word-break: break-word;
  transition: color .2s;
}
.kontakt-wert:hover { color: var(--du); }

.kontakt-btn {
  margin-top: auto;
  padding-top: 10px;
  padding-bottom: 10px;
  font-size: 14.5px;
}
.kontakt-karte .kontakt-btn { margin-top: 18px; }

.kontakt-adressen {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.kontakt-adresse {
  font-size: 15.5px;
  line-height: 1.55;
  color: var(--muted);
}
.kontakt-adresse strong { color: var(--text); }

.kontakt-text {
  max-width: 720px;
  margin-top: 56px;
}

@media (max-width: 900px) {
  .kontakt-grid { grid-template-columns: 1fr; }
}
@media (max-width: 700px) {
  .kontakt { padding-top: 16px; padding-bottom: 64px; }
  .kontakt-intro { margin-bottom: 36px; }
}

/* ---------- Newsletter (Brevo-Formular) ---------- */

.newsletter {
  overflow: hidden;
  padding: 30px var(--shell-pad) 90px;
}

.newsletter-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 540px);
  gap: 56px;
  align-items: start;
}

.newsletter h1 {
  font-size: clamp(36px, 4.5vw, 56px);
  line-height: 1.12;
  margin: 8px 0 20px;
}
.newsletter-intro {
  font-size: 18.5px;
  line-height: 1.7;
  color: var(--text-soft);
  margin: 0 0 32px;
}

.newsletter-vorteile {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.newsletter-vorteile li {
  position: relative;
  padding-left: 30px;
  color: var(--text-soft);
}
.newsletter-vorteile li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .5em;
  width: 14px;
  height: 12px;
  border-radius: 7px 9px 6px 10px;
  background: var(--ich);
}
.newsletter-vorteile li:nth-child(3n+2)::before { background: var(--du); }
.newsletter-vorteile li:nth-child(3n)::before { background: var(--wir); }

.newsletter-text { margin-top: 32px; }

.newsletter-karte {
  position: relative;
  overflow: hidden;
  background: var(--karte);
  border: 1px solid var(--kartenrand);
  border-radius: 20px 24px 20px 26px;
  padding: 36px 34px;
}

.newsletter-karte form { position: relative; }

.newsletter-karte .feld-checkbox { margin-top: 24px; }
.newsletter-karte .feld-checkbox a { color: var(--wir-dunkel); }
.newsletter-karte .feld-fehler,
.newsletter-karte .feld-checkbox label.feld-fehler {
  display: block;
  margin-bottom: 0;
  font-size: 14.5px;
  color: var(--du-dunkel);
}
.newsletter-karte .feld-fehler:empty { display: none; }

.newsletter-hinweis {
  margin: 18px 0 0;
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--muted);
}
.newsletter-hinweis a { color: var(--muted); }

.newsletter-submit { margin-top: 26px; }
.newsletter-submit:disabled,
.newsletter-submit.sib-form-block__button-disabled {
  opacity: .6;
  cursor: wait;
  transform: none;
}
.newsletter-submit .progress-indicator__icon {
  width: 18px;
  height: 18px;
  fill: currentColor;
  animation: newsletter-dreh 1s linear infinite;
}
.newsletter-submit .sib-hide-loader-icon { display: none; }
@keyframes newsletter-dreh { to { transform: rotate(360deg); } }

/* Brevo-Honeypot */
.newsletter .input--hidden {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  opacity: 0;
}

/* Meldungen — Brevos main.js schaltet sie per --active-Klasse ein */
.newsletter-meldung {
  display: none;
  border-radius: 16px 20px 16px 22px;
  padding: 20px 22px;
  margin-bottom: 24px;
  font-size: 16px;
  line-height: 1.55;
}
.newsletter-meldung.sib-form-message-panel--active { display: block; }
.newsletter-meldung strong {
  font-family: var(--serif);
  font-size: 19px;
}
.newsletter-meldung--erfolg { background: var(--wir-pastell); }
.newsletter-meldung--fehler {
  background: var(--du-pastell);
  color: var(--du-dunkel);
}

@media (max-width: 900px) {
  .newsletter-grid { grid-template-columns: 1fr; gap: 36px; }
}
@media (max-width: 700px) {
  .newsletter { padding-top: 16px; padding-bottom: 64px; }
  .newsletter-karte { padding: 28px 22px; }
}

/* ---------- Newsletter: Danke-Seite ---------- */

.newsletter-danke {
  overflow: hidden;
  padding: 50px var(--shell-pad) 110px;
}

.newsletter-danke-inner {
  position: relative;
  max-width: 760px;
  background: var(--karte);
  border: 1px solid var(--kartenrand);
  border-radius: 22px 28px 22px 30px;
  padding: 56px 52px;
  overflow: hidden;
}

.newsletter-danke-blobs {
  position: absolute;
  top: 34px;
  right: 40px;
  display: flex;
  gap: 8px;
  pointer-events: none;
}
.newsletter-danke-blobs .blob {
  width: 26px;
  height: 23px;
  opacity: .9;
}

.newsletter-danke h1 {
  font-size: clamp(32px, 4vw, 50px);
  line-height: 1.12;
  margin: 8px 0 20px;
}
.newsletter-danke-intro {
  font-size: 18.5px;
  line-height: 1.7;
  color: var(--text-soft);
  margin: 0;
}
.newsletter-danke-hinweis {
  margin: 18px 0 0;
  font-size: 15px;
  color: var(--muted);
}

.newsletter-danke-links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 18px 28px;
  margin-top: 36px;
}

@media (max-width: 700px) {
  .newsletter-danke { padding-top: 16px; padding-bottom: 64px; }
  .newsletter-danke-inner { padding: 64px 24px 34px; }
  .newsletter-danke-blobs { top: 24px; right: auto; left: 24px; }
}

/* ---------- Terminbuchung ---------- */

.buchung {
  overflow: hidden;
  padding: 30px var(--shell-pad) 90px;
}

.buchung-head { max-width: 720px; }
.buchung h1 {
  font-size: clamp(36px, 4.5vw, 56px);
  line-height: 1.12;
  margin: 8px 0 20px;
}
.buchung-intro {
  font-size: 18.5px;
  line-height: 1.7;
  color: var(--text-soft);
  margin: 0 0 44px;
}

.buchung-danke {
  max-width: 720px;
  background: var(--wir-pastell);
  border-radius: 18px 24px 18px 26px;
  padding: 26px 28px;
  margin-bottom: 44px;
}
.buchung-danke strong {
  font-family: var(--serif);
  font-size: 20px;
}
.buchung-danke p {
  margin: 10px 0 0;
  color: var(--text-soft);
}
.buchung-danke .buchung-danke-slot {
  font-weight: 600;
  color: var(--wir-dunkel);
}

.buchung-leer {
  max-width: 720px;
  background: var(--karte);
  border: 1px solid var(--kartenrand);
  border-radius: 20px;
  padding: 32px 30px;
}
.buchung-leer p { margin: 0 0 20px; }

.buchung-form {
  max-width: 860px;
  display: flex;
  flex-direction: column;
  gap: 48px;
}

.buchung-label {
  display: block;
  font-size: 13.5px;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 18px;
  padding: 0;
}

/* Slot-Auswahl */

.slot-auswahl {
  border: none;
  margin: 0;
  padding: 0;
}

.slot-filter {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 22px;
}
/* Ohne JavaScript bleibt der Filter verborgen (display:flex würde
   das hidden-Attribut sonst aushebeln) */
.slot-filter[hidden] { display: none; }
.slot-filter-btn {
  font: inherit;
  font-size: 14.5px;
  font-weight: 600;
  padding: 8px 16px;
  background: var(--karte);
  color: var(--muted);
  border: 1.5px solid var(--kartenrand);
  border-radius: 999px;
  cursor: pointer;
  transition: all .15s;
}
.slot-filter-btn:hover { border-color: var(--wir); color: var(--wir-dunkel); }
.slot-filter-btn.aktiv {
  background: var(--wir);
  border-color: var(--wir);
  color: var(--grund);
}

/* Kompakte Tageszeilen: Datum links, Slots in einer Reihe daneben */

.slot-tage {
  display: flex;
  flex-direction: column;
}
.slot-tag[hidden], .slot-chip[hidden] { display: none; }

.slot-tag {
  display: grid;
  grid-template-columns: 130px 1fr;
  gap: 8px 18px;
  align-items: center;
  padding: 9px 0;
  border-top: 1px solid var(--linie);
}
.slot-tag:last-child { border-bottom: 1px solid var(--linie); }

.slot-tag-titel {
  font-family: var(--sans);
  font-size: 15px;
  font-weight: 700;
  margin: 0;
  white-space: nowrap;
}

.slot-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.slot-chip {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  background: var(--karte);
  border: 1.5px solid var(--kartenrand);
  border-radius: 11px 14px 12px 15px;
  padding: 6px 13px;
  cursor: pointer;
  transition: border-color .15s, background .15s, color .15s;
}
.slot-chip input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.slot-chip:hover { border-color: var(--wir); background: var(--wir-hover); }
.slot-chip:has(input:checked) {
  background: var(--wir);
  border-color: var(--wir);
  color: var(--grund);
}
.slot-chip:has(input:focus-visible) {
  outline: 2px solid var(--wir-dunkel);
  outline-offset: 2px;
}
.slot-chip-zeit { font-weight: 600; font-size: 15px; }
.slot-chip-ort { font-size: 12px; color: var(--faint); }
.slot-chip:has(input:checked) .slot-chip-ort { color: var(--wir-pastell); }

/* Formularfelder */

.feld-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px 22px;
}
.feld-breit { grid-column: 1 / -1; }

.feld label {
  display: block;
  font-size: 15px;
  font-weight: 600;
  margin-bottom: 6px;
}
.feld-optional {
  font-weight: 400;
  font-size: 13.5px;
  color: var(--faint);
}

.feld input[type="text"],
.feld input[type="email"],
.feld input[type="tel"],
.feld select,
.feld textarea {
  width: 100%;
  font: inherit;
  color: var(--text);
  background: var(--karte);
  border: 1.5px solid var(--kartenrand);
  border-radius: 12px;
  padding: 12px 14px;
}
.feld input:focus-visible,
.feld select:focus-visible,
.feld textarea:focus-visible {
  outline: 2px solid var(--wir);
  outline-offset: 1px;
  border-color: var(--wir);
}
.feld textarea { resize: vertical; }

.feld-fehler {
  color: var(--du-dunkel);
  font-size: 14.5px;
  margin: 6px 0 16px;
}

/* Honeypot: für Menschen unsichtbar */
.feld-website {
  position: absolute;
  left: -9999px;
  top: auto;
}

.feld-checkbox { margin-top: 26px; }
.feld-checkbox label {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-weight: 400;
  font-size: 15px;
  color: var(--text-soft);
}
.feld-checkbox input {
  margin-top: 4px;
  accent-color: var(--wir);
  flex-shrink: 0;
}

.buchung-submit { margin-top: 26px; }
.buchung-hinweis {
  margin: 14px 0 0;
  font-size: 14.5px;
  color: var(--muted);
}

/* Terminart-Auswahl (Schritt 1) */

.terminart-auswahl {
  max-width: 860px;
  margin-bottom: 48px;
}

.terminart-karten {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 14px;
}

.terminart-card {
  display: flex;
  flex-direction: column;
  gap: 6px;
  background: var(--karte);
  border: 1.5px solid var(--kartenrand);
  border-radius: 16px 20px 16px 22px;
  padding: 20px 22px;
  text-decoration: none;
  color: var(--text);
  transition: border-color .15s, background .15s, transform .15s;
}
.terminart-card:hover {
  border-color: var(--wir);
  background: var(--wir-hover);
  transform: translateY(-2px);
}
.terminart-card--frei { border-color: var(--du); }
.terminart-card--frei:hover {
  border-color: var(--du-dunkel);
  background: var(--du-hover);
}

.terminart-card-titel {
  font-family: var(--serif);
  font-size: 19px;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.terminart-card-dauer {
  font-size: 14.5px;
  font-weight: 600;
  color: var(--muted);
}
.terminart-card-text {
  font-size: 14.5px;
  color: var(--text-soft);
  line-height: 1.5;
}

.terminart-badge {
  font-family: var(--sans, inherit);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  background: var(--du);
  color: var(--grund);
  border-radius: 999px;
  padding: 3px 10px;
}

.terminart-gewaehlt {
  display: flex;
  align-items: baseline;
  gap: 8px;
  flex-wrap: wrap;
  background: var(--karte);
  border: 1.5px solid var(--kartenrand);
  border-radius: 14px;
  padding: 14px 18px;
  font-size: 16px;
}
.terminart-gewaehlt strong { font-family: var(--serif); font-size: 18px; }
.terminart-gewaehlt .link-arrow { margin-left: auto; font-size: 14.5px; }

/* Teaser „kostenloses Erstgespräch“ */

.erstgespraech-teaser {
  padding: 70px var(--shell-pad, var(--pad-x)) 70px;
}
.erstgespraech-teaser-inner {
  max-width: 720px;
  background: var(--du-hover);
  border-radius: 22px 28px 22px 30px;
  padding: 44px 40px;
}
.erstgespraech-teaser-titel {
  font-size: clamp(26px, 3vw, 34px);
  margin: 10px 0 14px;
}
.erstgespraech-teaser .section-sub { margin: 0 0 10px; }
.erstgespraech-teaser-meta {
  font-size: 14.5px;
  font-weight: 600;
  color: var(--du-dunkel);
  margin: 0 0 24px;
}

.erstgespraech-teaser--kompakt {
  margin-top: 34px;
  background: var(--du-hover);
  border-radius: 16px 20px 16px 22px;
  padding: 22px 24px;
  padding-top: 18px;
}
.erstgespraech-teaser--kompakt strong {
  font-family: var(--serif);
  font-size: 18px;
}
.erstgespraech-teaser--kompakt p {
  margin: 8px 0 12px;
  font-size: 15px;
  color: var(--text-soft);
  line-height: 1.6;
}
.erstgespraech-teaser--kompakt .link-arrow { font-size: 15px; }

@media (max-width: 700px) {
  .buchung { padding-top: 16px; padding-bottom: 64px; }
  .buchung-intro { margin-bottom: 32px; }
  .buchung-form { gap: 38px; }
  .feld-grid { grid-template-columns: 1fr; }
  .slot-tag { grid-template-columns: 1fr; gap: 6px; padding: 10px 0; }
  .terminart-auswahl { margin-bottom: 38px; }
  .terminart-gewaehlt .link-arrow { margin-left: 0; }
  .erstgespraech-teaser { padding-top: 40px; padding-bottom: 40px; }
  .erstgespraech-teaser-inner { padding: 30px 24px; }
}