/* Local fonts */

@font-face {
    font-family: "Montserrat";
    src: url("./fonts/Montserrat-VariableFont_wght.woff2") format("woff2");
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
}

@font-face {
    font-family: "Playfair Display";
    src: url("./fonts/PlayfairDisplay-VariableFont_wght.woff2") format("woff2");
    font-style: normal;
    font-weight: 400 900;
    font-display: swap;
}

@font-face {
    font-family: "Playfair Display";
    src: url("./fonts/PlayfairDisplay-Italic-VariableFont_wght.woff2") format("woff2");
    font-style: italic;
    font-weight: 400 900;
    font-display: swap;
}

@font-face {
    font-family: "Playfair Display SC";
    src: url("./fonts/PlayfairDisplaySC-Regular.woff2") format("woff2");
    font-style: normal;
    font-weight: 400;
    font-display: swap;
}

@font-face {
    font-family: "Playfair Display SC";
    src: url("./fonts/PlayfairDisplaySC-Bold.woff2") format("woff2");
    font-style: normal;
    font-weight: 700;
    font-display: swap;
}

:root {
  --bg: #F5F1E9;
  --bg2: #EDE6D9;
  --paper: #FBF9F4;
  --line: #DCD3C6;
  --ink: #3B352F;
  --muted: #6F6458;
  --moss: #5E6A52;
  --moss-d: #3F4837;
  --on-moss: #F3ECDE;
  --on-moss-muted: #D6CDB9;
  --gold: #B8975A;
  --gold-soft: rgba(184, 151, 90, .45);
  --taupe: #A89A8A;
  --serif: "Playfair Display", Georgia, "Times New Roman", serif;
  --sc: "Playfair Display SC", "Playfair Display", Georgia, serif;
  --sans: "Montserrat", "Helvetica Neue", Arial, sans-serif;
  color-scheme: light;
  box-sizing: border-box;
  padding-top: env(safe-area-inset-top, 0px);
  padding-bottom: env(safe-area-inset-bottom, 0px);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #1F1A16;
    --bg2: #29221D;
    --paper: #2E2620;
    --line: #4A4038;
    --ink: #EFE7D8;
    --muted: #BDB1A2;
    --moss: #3D4830;
    --moss-d: #20271A;
    --on-moss: #F1EADC;
    --on-moss-muted: #C9C0AC;
    --gold: #C9A96B;
    --gold-soft: rgba(201, 169, 107, .4);
    color-scheme: dark;
  }
}

:root[data-theme="dark"] {
  --bg: #1F1A16;
  --bg2: #29221D;
  --paper: #2E2620;
  --line: #4A4038;
  --ink: #EFE7D8;
  --muted: #BDB1A2;
  --moss: #3D4830;
  --moss-d: #20271A;
  --on-moss: #F1EADC;
  --on-moss-muted: #C9C0AC;
  --gold: #C9A96B;
  --gold-soft: rgba(201, 169, 107, .4);
  color-scheme: dark;
}

*,
*::before,
*::after {
  box-sizing: border-box
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(env(safe-area-inset-top, 0px) + 76px)
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto
  }
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  font-weight: 400;
  font-size: 16px;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased
}

body::before {
  content: "";
  position: fixed;
  inset: 0 0 auto;
  height: env(safe-area-inset-top, 0px);
  z-index: 60;
  background: var(--bg)
}

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

a {
  color: inherit
}

:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px
}

.wrap {
  width: min(1120px, 100% - 40px);
  margin-inline: auto
}

h1,
h2,
h3 {
  font-family: var(--sc);
  font-weight: 400;
  margin: 0;
  line-height: 1.15;
  letter-spacing: .01em
}

p {
  margin: 0 0 1em
}

.lead {
  font-family: var(--serif);
  font-size: 1.22rem;
  line-height: 1.65
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5em;
  padding: .95em 1.6em;
  border-radius: 999px;
  font-family: var(--sans);
  font-weight: 500;
  font-size: .92rem;
  letter-spacing: .04em;
  text-decoration: none;
  border: 1px solid var(--moss);
  background: var(--moss);
  color: var(--on-moss);
  cursor: pointer;
  transition: background .2s, color .2s
}

.btn:hover {
  background: var(--moss-d)
}

.btn.ghost {
  background: transparent;
  color: var(--ink);
  border-color: var(--gold)
}

.btn.ghost:hover {
  background: var(--paper)
}

.btn.gold {
  background: var(--gold);
  border-color: var(--gold);
  color: #2B231D
}

.btn.gold:hover {
  filter: brightness(1.06)
}

/* Brand line: FREI • VERKÖRPERT • WAHR */
.brandline {
  display: flex;
  align-items: center;
  gap: 14px;
  font-family: var(--sc);
  letter-spacing: .32em;
  font-size: .78rem;
  color: var(--gold)
}

.brandline::before,
.brandline::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--gold-soft)
}

/* Header */
header.site {
  position: relative;
  z-index: 50;
  background: var(--bg);
  border-bottom: 1px solid var(--line)
}

.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 80px;
  gap: 16px
}

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

.brand img {
  height: 46px;
  width: auto
}

.brand span {
  font-family: var(--sc);
  font-size: 1.1rem;
  letter-spacing: .06em;
  line-height: 1.2
}

.brand small {
  display: block;
  font-family: var(--sans);
  font-size: .76rem;
  letter-spacing: .04em;
  color: var(--muted);
  margin-top: 2px
}

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

.links a {
  text-decoration: none;
  font-size: .86rem;
  letter-spacing: .05em
}

.links a:not(.btn):hover {
  color: var(--gold)
}

.links .btn {
  padding: .6em 1.2em;
  font-size: .82rem
}

.menu-btn {
  display: none;
  background: none;
  border: 1px solid var(--gold-soft);
  color: var(--ink);
  border-radius: 999px;
  padding: .5em 1em;
  font: inherit;
  font-size: .82rem;
  letter-spacing: .06em;
  cursor: pointer
}

.logo-dark {
  display: block
}

.logo-cream {
  display: none
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .logo-dark {
    display: none
  }

  :root:not([data-theme="light"]) .logo-cream {
    display: block
  }
}

:root[data-theme="dark"] .logo-dark {
  display: none
}

:root[data-theme="dark"] .logo-cream {
  display: block
}

@media (max-width:1024px) {
  .menu-btn {
    display: inline-block
  }

  .links {
    position: absolute;
    left: 0;
    right: 0;
    top: 80px;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background: var(--bg);
    border-bottom: 1px solid var(--gold-soft);
    padding: 8px 20px 20px;
    display: none
  }

  .links.open {
    display: flex
  }

  .links a:not(.btn) {
    padding: .8em 0;
    border-bottom: 1px solid var(--gold-soft)
  }

  .links .btn {
    margin-top: 14px
  }

  .brand small {
    display: none
  }
}

/* Header in Moosgrün */
body::before {
  background: var(--moss)
}

header.site {
  background: var(--moss);
  color: var(--on-moss);
  border-bottom: 1px solid var(--gold)
}

header.site .brand span {
  color: #1A1714
}

header.site .brand small {
  color: #2B231D;
  opacity: .8
}

header.site .links a:not(.btn) {
  color: var(--on-moss)
}

header.site .links a:not(.btn):hover {
  color: #E2CC98
}

header.site .links .btn {
  background: var(--gold);
  border-color: var(--gold);
  color: #2B231D
}

header.site .links .btn:hover {
  filter: brightness(1.06)
}

header.site .menu-btn {
  color: var(--on-moss);
  border-color: var(--gold)
}

@media (max-width:1024px) {
  header.site .links {
    background: var(--moss);
    border-bottom: 1px solid var(--gold)
  }

  header.site .links a:not(.btn) {
    border-bottom-color: rgba(243, 236, 222, .22)
  }
}

/* Hero */
.hero {
  padding: 64px 0 72px
}

.hero .grid {
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  gap: 64px;
  align-items: center
}

.hero h1 {
  font-size: clamp(2.3rem, 4.6vw, 3.9rem);
  line-height: 1.08
}

.hero h1 .second {
  display: block;
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  font-size: .8em;
  margin-top: .3em;
  color: var(--moss)
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .hero h1 .second {
    color: var(--gold)
  }
}

:root[data-theme="dark"] .hero h1 .second {
  color: var(--gold)
}

.hero .intro {
  margin: 28px 0 34px;
  max-width: 34em;
  color: var(--muted);
  font-size: 1.02rem
}

.hero .actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px
}

.hero .meta {
  margin-top: 30px;
  font-size: .84rem;
  color: var(--muted)
}

.arch {
  position: relative
}

.arch img {
  width: 100%;
  aspect-ratio: 4/5;
  object-fit: cover;
  border-radius: 999px 999px 6px 6px
}

.arch::after {
  content: "";
  position: absolute;
  inset: -12px -12px 12px 12px;
  border: 1px solid var(--gold);
  border-radius: 999px 999px 6px 6px;
  pointer-events: none;
  z-index: -1
}

.hero .arch {
  max-width: 440px;
  justify-self: end;
  width: 100%
}

.hero .arch img {
  object-position: 50% 35%
}

@media (max-width:860px) {
  .hero {
    padding: 36px 0 56px
  }

  .hero .grid {
    grid-template-columns: 1fr;
    gap: 44px
  }

  .hero .arch {
    order: -1;
    justify-self: center;
    max-width: 340px
  }
}

/* Statement band */
.band {
  background: var(--moss);
  color: var(--on-moss);
  padding: 72px 0;
  text-align: center
}

.band blockquote {
  margin: 0 auto;
  max-width: 22em;
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(1.8rem, 4vw, 2.9rem);
  line-height: 1.25
}

.band .brandline {
  max-width: 420px;
  margin: 30px auto 0
}

/* Generic section */
section.block {
  padding: 96px 0
}

.head {
  max-width: 40em;
  margin-bottom: 48px
}

.head h2 {
  font-size: clamp(1.9rem, 3.4vw, 2.7rem);
  margin-bottom: 18px
}

.head p {
  color: var(--muted)
}

.rule {
  width: 64px;
  height: 1px;
  background: var(--gold);
  margin: 0 0 22px
}

@media (max-width:700px) {
  section.block {
    padding: 68px 0
  }
}

/* Recognition */
.recognize .grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 56px;
  align-items: start
}

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

.recognize li {
  padding: 18px 0 18px 30px;
  border-bottom: 1px solid var(--gold-soft);
  position: relative;
  font-family: var(--serif);
  font-size: 1.12rem;
  line-height: 1.5
}

.recognize li::before {
  content: "";
  position: absolute;
  left: 4px;
  top: 1.55em;
  width: 12px;
  height: 1px;
  background: var(--gold)
}

@media (max-width:800px) {
  .recognize .grid {
    grid-template-columns: 1fr;
    gap: 28px
  }
}

/* Method / gates */
.method {
  background: var(--moss-d);
  color: var(--on-moss)
}

.method .head p {
  color: var(--on-moss-muted)
}

.method .rule {
  background: var(--gold)
}

.method-intro {
  display: grid;
  grid-template-columns: 1.1fr .9fr;
  gap: 56px;
  align-items: end;
  margin-bottom: 64px
}

.method-intro .lead {
  color: var(--on-moss)
}

.method-intro .side {
  color: var(--on-moss-muted);
  border-left: 1px solid var(--gold-soft);
  padding-left: 28px
}

.gates {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
  position: relative
}

.gate {
  border: 1px solid var(--gold-soft);
  border-radius: 999px 999px 4px 4px;
  padding: 76px 30px 38px;
  text-align: center;
  position: relative;
  background: linear-gradient(180deg, rgba(255, 255, 255, .035), transparent 60%)
}

.gate .num {
  font-family: var(--sc);
  color: var(--gold);
  font-size: 1.5rem;
  letter-spacing: .1em
}

.gate h3 {
  font-size: 1.65rem;
  margin: 12px 0 6px
}

.gate .short {
  font-family: var(--serif);
  font-style: italic;
  color: var(--gold);
  margin-bottom: 16px
}

.gate p {
  color: var(--on-moss-muted);
  font-size: .95rem
}

.method .after {
  margin-top: 56px;
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  align-items: center;
  justify-content: space-between;
  border-top: 1px solid var(--gold-soft);
  padding-top: 32px
}

.method .after p {
  margin: 0;
  font-family: var(--serif);
  font-size: 1.15rem;
  max-width: 32em
}

@media (max-width:900px) {
  .method-intro {
    grid-template-columns: 1fr;
    gap: 28px
  }

  .gates {
    grid-template-columns: 1fr;
    gap: 22px;
    max-width: 420px;
    margin-inline: auto
  }

  .gate {
    padding: 64px 26px 32px
  }
}

/* Quote with image */
.quote-img {
  display: grid;
  grid-template-columns: .9fr 1.1fr;
  gap: 64px;
  align-items: center
}

.quote-img .arch {
  max-width: 400px
}

.quote-img .arch img {
  object-position: 60% 50%
}

.quote-img blockquote {
  margin: 0;
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(1.7rem, 3.2vw, 2.5rem);
  line-height: 1.3
}

.quote-img .who {
  margin-top: 20px;
  font-size: .86rem;
  letter-spacing: .06em;
  color: var(--muted)
}

.quote-img .copy {
  margin-top: 30px;
  color: var(--muted);
  max-width: 30em
}

@media (max-width:800px) {
  .quote-img {
    grid-template-columns: 1fr;
    gap: 44px
  }

  .quote-img .arch {
    max-width: 320px;
    margin-inline: auto
  }
}

/* Offers */
.offers {
  background: var(--bg2)
}

.feature {
  background: var(--moss);
  color: var(--on-moss);
  border-radius: 4px;
  padding: 44px;
  display: grid;
  grid-template-columns: 1.3fr .7fr;
  gap: 40px;
  align-items: center;
  margin-bottom: 56px;
  position: relative;
  overflow: hidden
}

.feature::before {
  content: "";
  position: absolute;
  right: -60px;
  top: -60px;
  width: 260px;
  height: 320px;
  border: 1px solid var(--gold-soft);
  border-radius: 999px 999px 0 0;
  opacity: .8
}

.feature h3 {
  font-size: clamp(1.6rem, 2.8vw, 2.1rem);
  margin: 6px 0 14px
}

.feature .tag {
  font-family: var(--serif);
  font-style: italic;
  color: var(--gold)
}

.feature p {
  color: var(--on-moss-muted);
  margin: 0
}

.feature .price {
  text-align: right;
  position: relative
}

.feature .price strong {
  display: block;
  font-family: var(--serif);
  font-weight: 400;
  font-size: 2.6rem;
  line-height: 1
}

.feature .price span {
  font-size: .85rem;
  color: var(--on-moss-muted)
}

.feature .price .btn {
  margin-top: 20px
}

@media (max-width:760px) {
  .feature {
    grid-template-columns: 1fr;
    padding: 32px 26px;
    gap: 24px
  }

  .feature .price {
    text-align: left
  }
}

.lists {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px 64px
}

.list h3 {
  font-size: 1.35rem;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--gold);
  margin-bottom: 6px
}

.list .note {
  font-size: .84rem;
  color: var(--muted);
  margin: 8px 0 4px
}

.row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 8px 20px;
  padding: 16px 0;
  border-bottom: 1px solid var(--gold-soft);
  align-items: baseline
}

.row .name {
  font-weight: 500
}

.row .desc {
  grid-column: 1/-1;
  font-size: .86rem;
  color: var(--muted);
  margin-top: -6px;
  line-height: 1.55
}

.row .val {
  font-family: var(--serif);
  font-size: 1.12rem;
  white-space: nowrap;
  text-align: right
}

.row .val small {
  display: block;
  font-family: var(--sans);
  font-size: .76rem;
  color: var(--muted)
}

@media (max-width:800px) {
  .lists {
    grid-template-columns: 1fr;
    gap: 44px
  }
}

.terms {
  margin-top: 56px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
  font-size: .88rem;
  color: var(--muted);
  border-top: 1px solid var(--gold-soft);
  padding-top: 32px
}

.terms h4 {
  font-family: var(--sc);
  font-weight: 400;
  font-size: 1.05rem;
  color: var(--ink);
  margin: 0 0 8px
}

@media (max-width:800px) {
  .terms {
    grid-template-columns: 1fr;
    gap: 22px
  }
}

/* Talks */
.talks .grid {
  display: grid;
  grid-template-columns: 1.1fr .9fr;
  gap: 64px;
  align-items: center
}

.talks .arch {
  max-width: 400px;
  justify-self: end;
  width: 100%
}

.talks .arch img {
  object-position: 50% 40%
}

.partner {
  margin-top: 30px;
  padding: 24px 26px;
  border: 1px solid var(--gold-soft);
  border-radius: 4px;
  background: var(--paper)
}

.partner strong {
  font-family: var(--sc);
  font-weight: 400;
  font-size: 1.15rem;
  display: block;
  margin-bottom: 4px
}

.partner p {
  margin: 0;
  color: var(--muted);
  font-size: .94rem
}

.next {
  margin-top: 22px;
  display: flex;
  gap: 18px;
  align-items: center;
  flex-wrap: wrap
}

.date {
  font-family: var(--serif);
  font-size: 1rem;
  border-left: 2px solid var(--gold);
  padding-left: 14px;
  line-height: 1.4
}

.date small {
  display: block;
  font-family: var(--sans);
  font-size: .8rem;
  color: var(--muted)
}

@media (max-width:860px) {
  .talks .grid {
    grid-template-columns: 1fr;
    gap: 44px
  }

  .talks .arch {
    order: -1;
    justify-self: center;
    max-width: 320px
  }
}

/* Kern */
.core {
  max-width: 46em;
  margin: 0 auto 72px;
  text-align: center;
  padding-bottom: 56px;
  border-bottom: 1px solid var(--gold-soft)
}

.core-lead {
  margin: 0 0 22px;
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(1.6rem, 3.4vw, 2.4rem);
  line-height: 1.3;
  color: var(--on-moss)
}

.core-text {
  margin: 0;
  color: var(--on-moss-muted);
  font-size: 1.05rem;
  line-height: 1.8
}

@media (max-width:600px) {
  .core {
    margin-bottom: 52px;
    padding-bottom: 40px
  }
}

/* Stimmen */
.voices {
  background: var(--paper)
}

.voices .voice {
  background: var(--moss);
  border-top-color: var(--gold)
}

.voices .voice blockquote {
  color: var(--on-moss)
}

.voices .voice figcaption {
  color: #E2CC98
}

.voice-hl {
  margin: 0 0 18px;
  padding-bottom: 16px;
  border-bottom: 1px solid rgba(201, 169, 107, .45);
  font-family: var(--serif);
  font-size: 1.35rem;
  line-height: 1.4;
  color: #E2CC98
}

.voices .voice blockquote {
  font-size: 1rem
}

.voices-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 28px
}

.voice {
  max-width: 820px
}

.voices-grid:empty {
  display: none
}

.voice {
  margin: 0;
  padding: 32px 28px;
  border-top: 2px solid var(--gold);
  background: var(--bg);
  border-radius: 0 0 4px 4px
}

.voice blockquote {
  margin: 0 0 18px;
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.1rem;
  line-height: 1.6;
  color: var(--ink)
}

.voice figcaption {
  font-size: .84rem;
  letter-spacing: .04em;
  color: var(--muted)
}

.voices-invite {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  border: 1px solid var(--gold-soft);
  border-radius: 4px;
  padding: 28px 30px;
  margin-top: 8px
}

.voices-grid:has(.voice)+.voices-invite {
  margin-top: 40px
}

.voices-invite p {
  margin: 0;
  max-width: 36em;
  color: var(--muted)
}

.voices-invite b {
  display: block;
  font-family: var(--serif);
  font-weight: 400;
  font-size: 1.15rem;
  color: var(--ink);
  margin-bottom: 4px
}

@media (max-width:860px) {
  .voices-grid {
    grid-template-columns: 1fr
  }

  .voices-invite {
    padding: 24px 22px
  }
}

/* Frage */
.pause {
  background: var(--paper);
  padding: 88px 0;
  text-align: center;
  border-top: 1px solid var(--gold-soft);
  border-bottom: 1px solid var(--gold-soft)
}

.pause-kicker {
  margin: 0 0 18px;
  font-family: var(--serif);
  font-style: italic;
  color: var(--gold)
}

.pause-q {
  margin: 0 auto;
  max-width: 20em;
  font-family: var(--serif);
  font-size: clamp(1.7rem, 3.6vw, 2.6rem);
  line-height: 1.3;
  color: var(--ink)
}

.pause-rule {
  width: 64px;
  height: 1px;
  background: var(--gold);
  margin: 32px auto 24px
}

.pause-note {
  margin: 0 auto;
  max-width: 34em;
  color: var(--muted)
}

@media (max-width:600px) {
  .pause {
    padding: 64px 0
  }
}

/* Ablauf */
.step-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px
}

.step {
  border: 1px solid var(--gold-soft);
  border-radius: 999px 999px 4px 4px;
  padding: 64px 28px 34px;
  text-align: center;
  background: var(--paper)
}

.step-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid var(--gold);
  font-family: var(--serif);
  font-size: 1.2rem;
  color: var(--gold)
}

.step h3 {
  font-size: 1.45rem;
  margin: 16px 0 10px
}

.step p {
  color: var(--muted);
  font-size: .95rem;
  margin: 0
}

.steps-cta {
  margin-top: 40px;
  text-align: center
}

@media (max-width:860px) {
  .step-list {
    grid-template-columns: 1fr;
    max-width: 420px;
    margin-inline: auto
  }

  .step {
    padding: 52px 24px 28px
  }
}

/* Für wen */
.fit-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 28px
}

.fit-col {
  border: 1px solid var(--gold-soft);
  border-radius: 4px;
  padding: 32px 30px;
  background: var(--paper)
}

.fit-col.yes {
  border-top: 3px solid var(--moss)
}

.fit-col.no {
  border-top: 3px solid var(--gold)
}

.fit-col h3 {
  font-size: 1.4rem;
  margin-bottom: 14px
}

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

.fit-col li {
  position: relative;
  padding: 10px 0 10px 24px;
  border-bottom: 1px solid var(--gold-soft);
  line-height: 1.55
}

.fit-col li:last-child {
  border-bottom: 0
}

.fit-col li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 1.15em;
  width: 10px;
  height: 1px;
  background: var(--gold)
}

.fit-note {
  margin: 18px 0 0;
  font-size: .86rem;
  color: var(--muted)
}

@media (max-width:800px) {
  .fit-grid {
    grid-template-columns: 1fr
  }

  .fit-col {
    padding: 26px 22px
  }
}

/* FAQ */
.faq {
  background: var(--bg2)
}

.faq-wrap {
  display: grid;
  grid-template-columns: .8fr 1.2fr;
  gap: 56px;
  align-items: start
}

.faq-list details {
  border-bottom: 1px solid var(--gold-soft)
}

.faq-list details:first-child {
  border-top: 1px solid var(--gold-soft)
}

.faq-list summary {
  cursor: pointer;
  list-style: none;
  padding: 20px 36px 20px 0;
  position: relative;
  font-family: var(--serif);
  font-size: 1.1rem
}

.faq-list summary::-webkit-details-marker {
  display: none
}

.faq-list summary::after {
  content: "+";
  position: absolute;
  right: 4px;
  top: 50%;
  transform: translateY(-50%);
  font-family: var(--sans);
  font-weight: 300;
  font-size: 1.4rem;
  color: var(--gold)
}

.faq-list details[open] summary::after {
  content: "–"
}

.faq-list details p {
  margin: 0 0 22px;
  color: var(--muted);
  max-width: 40em
}

@media (max-width:860px) {
  .faq-wrap {
    grid-template-columns: 1fr;
    gap: 20px
  }
}

/* Termine */
.events {
  margin-top: 36px
}

.events h3 {
  font-size: 1.4rem;
  margin-bottom: 6px
}

.ev {
  display: grid;
  grid-template-columns: 64px 1fr;
  gap: 18px;
  padding: 18px 0;
  border-bottom: 1px solid var(--gold-soft)
}

.ev-date {
  text-align: center;
  border: 1px solid var(--gold);
  border-radius: 4px;
  padding: 8px 0;
  align-self: start
}

.ev-date b {
  display: block;
  font-family: var(--serif);
  font-weight: 400;
  font-size: 1.5rem;
  line-height: 1;
  color: var(--ink)
}

.ev-date span {
  font-size: .72rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--gold)
}

.ev-title {
  display: block;
  font-family: var(--sc);
  font-weight: 400;
  font-size: 1.15rem;
  line-height: 1.3
}

.ev-meta {
  display: block;
  font-size: .84rem;
  color: var(--muted);
  margin: 2px 0 8px
}

.ev p {
  margin: 0;
  font-size: .92rem;
  color: var(--muted)
}

.ev-info {
  margin-top: 20px;
  padding: 18px 20px;
  background: var(--paper);
  border: 1px solid var(--gold-soft);
  border-radius: 4px;
  font-size: .88rem;
  color: var(--muted)
}

.ev-info p {
  margin: 0 0 8px
}

.ev-info p:last-child {
  margin: 0
}

.ev-info b {
  color: var(--ink);
  font-weight: 500
}

/* Workshop */
.ws {
  margin-top: 22px;
  background: var(--moss);
  color: var(--on-moss);
  border-top: 1px solid var(--gold);
  border-bottom: 1px solid var(--gold);
  padding: 30px 28px;
  border-radius: 4px
}

.ws-kind {
  margin: 0 0 6px;
  font-family: var(--serif);
  font-style: italic;
  color: #E2CC98
}

.ws h3 {
  font-size: clamp(1.5rem, 2.6vw, 1.9rem);
  margin: 0
}

.ws-sub {
  margin: 6px 0 16px;
  font-size: 1rem;
  letter-spacing: .04em;
  color: var(--on-moss)
}

.ws p {
  color: var(--on-moss-muted);
  font-size: .95rem
}

.ws-example {
  background: var(--paper);
  color: var(--ink);
  border-radius: 18px;
  padding: 16px 20px;
  margin: 18px 0 22px;
  font-size: .92rem
}

.ws-example b {
  display: block;
  font-family: var(--sc);
  font-weight: 400;
  font-size: 1.1rem;
  margin-bottom: 4px
}

.ws-facts {
  margin: 0 0 20px;
  display: grid;
  gap: 10px;
  border-left: 1px solid var(--gold);
  padding-left: 16px
}

.ws-facts div {
  display: grid;
  grid-template-columns: 78px 1fr;
  gap: 12px
}

.ws-facts dt {
  font-family: var(--sc);
  color: #E2CC98
}

.ws-facts dd {
  margin: 0;
  font-size: .94rem
}

.ws-reg {
  display: grid;
  gap: 4px;
  font-size: .92rem;
  border-top: 1px solid rgba(243, 236, 222, .25);
  padding-top: 16px
}

.ws-reg b {
  font-family: var(--sc);
  font-weight: 400;
  font-size: 1.05rem
}

.ws-reg a {
  color: var(--on-moss)
}

.ws-reg .ws-or {
  margin-top: 12px
}

@media (max-width:500px) {
  .ws {
    padding: 24px 20px
  }

  .ws-facts div {
    grid-template-columns: 1fr;
    gap: 0
  }
}

/* Book */
.book {
  background: var(--moss-d);
  color: var(--on-moss)
}

.book .grid {
  display: grid;
  grid-template-columns: .8fr 1.2fr;
  gap: 72px;
  align-items: center
}

.cover {
  aspect-ratio: 2/3;
  max-width: 330px;
  width: 100%;
  margin-inline: auto;
  background: #F3ECDE;
  color: #3B2F28;
  border-radius: 2px 6px 6px 2px;
  box-shadow: 16px 22px 40px rgba(0, 0, 0, .35), inset 6px 0 0 rgba(0, 0, 0, .06);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  padding: 46px 26px 28px;
  text-align: center;
  position: relative
}

.cover::before {
  content: "";
  position: absolute;
  inset: 12px;
  border: 1px solid rgba(184, 151, 90, .7);
  pointer-events: none
}

.cover .t {
  font-family: "Playfair Display SC", Georgia, serif;
  font-size: 1.65rem;
  line-height: 1.25;
  letter-spacing: .06em
}

.cover .t span {
  display: block
}

.cover .s {
  font-family: "Playfair Display", Georgia, serif;
  font-style: italic;
  font-size: .95rem;
  color: #4F5B3A;
  margin-top: 14px
}

.cover .a {
  font-family: "Montserrat", Arial, sans-serif;
  font-size: .72rem;
  letter-spacing: .22em
}

.cover img {
  width: 58px;
  opacity: .95
}

.book .lead {
  color: var(--on-moss)
}

.book p {
  color: var(--on-moss-muted)
}

.parts {
  list-style: none;
  padding: 0;
  margin: 26px 0 30px;
  display: grid;
  gap: 0
}

.parts li {
  display: grid;
  grid-template-columns: 44px 1fr;
  gap: 12px;
  padding: 14px 0;
  border-bottom: 1px solid var(--gold-soft)
}

.parts li b {
  font-family: var(--sc);
  font-weight: 400;
  color: var(--gold)
}

.parts li span {
  font-family: var(--serif);
  font-size: 1.08rem;
  color: var(--on-moss)
}

.status {
  display: inline-block;
  font-size: .84rem;
  letter-spacing: .04em;
  color: var(--gold);
  border: 1px solid var(--gold-soft);
  border-radius: 999px;
  padding: .35em 1em;
  margin-bottom: 22px
}

.book blockquote {
  margin: 0 0 30px;
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.15rem;
  color: var(--on-moss);
  border-left: 1px solid var(--gold);
  padding-left: 20px
}

@media (max-width:860px) {
  .book .grid {
    grid-template-columns: 1fr;
    gap: 56px
  }
}

.extras-old {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
  margin: 0 0 32px
}

.extras div {
  border: 1px solid var(--gold-soft);
  border-radius: 4px;
  padding: 20px 22px
}

.extras b {
  display: block;
  font-family: var(--sc);
  font-weight: 400;
  font-size: 1.15rem;
  color: var(--on-moss);
  margin-bottom: 6px
}

.extras span {
  font-size: .9rem;
  color: var(--on-moss-muted);
  line-height: 1.6
}

.extras-title {
  font-family: var(--serif);
  font-style: italic;
  color: var(--gold);
  margin: 0 0 12px
}

@media (max-width:600px) {
  .extras {
    grid-template-columns: 1fr
  }
}

.companions {
  margin-top: 88px;
  border-top: 1px solid var(--gold-soft);
  padding-top: 56px
}

.companions h3 {
  font-size: clamp(1.6rem, 2.8vw, 2.1rem);
  margin-bottom: 10px
}

.companions .intro {
  color: var(--on-moss-muted);
  max-width: 40em;
  margin-bottom: 40px
}

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

.comp img {
  width: 100%;
  max-width: 260px;
  aspect-ratio: 1/1.414;
  object-fit: cover;
  border-radius: 2px;
  box-shadow: 10px 14px 30px rgba(0, 0, 0, .3);
  margin-bottom: 22px
}

.comp .ph {
  width: 100%;
  max-width: 260px;
  aspect-ratio: 1/1.414;
  border: 1px solid var(--gold-soft);
  border-radius: 2px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 24px;
  margin-bottom: 22px;
  font-family: var(--sc);
  font-size: 1.3rem;
  line-height: 1.3;
  color: var(--on-moss)
}

.comp .ph small {
  display: block;
  font-family: var(--serif);
  font-style: italic;
  font-size: .9rem;
  color: var(--gold);
  margin-top: 10px
}

.comp b {
  display: block;
  font-family: var(--sc);
  font-weight: 400;
  font-size: 1.2rem;
  color: var(--on-moss)
}

.comp i {
  display: block;
  font-family: var(--serif);
  color: var(--gold);
  margin: 2px 0 10px
}

.comp p {
  font-size: .92rem;
  color: var(--on-moss-muted);
  margin: 0
}

@media (max-width:860px) {
  .comp-grid {
    grid-template-columns: 1fr;
    gap: 48px;
    max-width: 340px;
    margin-inline: auto
  }
}

.cover-img {
  width: 100%;
  max-width: 330px;
  margin-inline: auto;
  border-radius: 2px;
  box-shadow: 16px 22px 40px rgba(0, 0, 0, .35)
}

.book .subtitle {
  font-family: var(--serif);
  font-style: italic;
  color: var(--gold);
  margin: -6px 0 20px;
  font-size: 1.05rem
}

.comp .tag {
  display: inline-block;
  font-size: .74rem;
  letter-spacing: .08em;
  color: #E2CC98;
  border: 1px solid var(--gold-soft);
  border-radius: 999px;
  padding: .25em .9em;
  margin-bottom: 12px
}

.comp .btn {
  margin-top: 18px
}

.btn.ghost-light {
  background: transparent;
  color: var(--on-moss);
  border-color: var(--gold)
}

.btn.ghost-light:hover {
  background: rgba(255, 255, 255, .06)
}

.next-book {
  margin: 48px 0 0;
  padding-top: 24px;
  border-top: 1px solid var(--gold-soft);
  font-family: var(--serif);
  font-size: 1.08rem;
  color: var(--on-moss)
}

.next-book b {
  font-family: var(--sc);
  font-weight: 400;
  color: #E2CC98;
  margin-right: 6px
}

.eb-grid {
  grid-template-columns: repeat(4, 1fr);
  gap: 28px
}

.eb img {
  aspect-ratio: 440/680;
  max-width: 220px
}

.ebooks+.companions {
  margin-top: 72px
}

@media (max-width:1000px) {
  .eb-grid {
    grid-template-columns: repeat(2, 1fr);
    max-width: none
  }
}

@media (max-width:520px) {
  .eb-grid {
    grid-template-columns: 1fr;
    max-width: 340px;
    margin-inline: auto
  }
}

.price-tag {
  display: inline-block;
  margin-left: 8px;
  font-family: var(--serif);
  font-size: 1.05rem;
  color: var(--on-moss)
}

.bundle {
  margin: 36px 0 0;
  font-size: .95rem;
  color: var(--on-moss-muted)
}

.bundle b {
  font-family: var(--sc);
  font-weight: 400;
  color: #E2CC98;
  margin-right: 6px
}

.reader {
  position: fixed;
  inset: 0;
  z-index: 100;
  background: #2A2520;
  display: flex;
  flex-direction: column
}

.reader[hidden] {
  display: none
}

.reader-bar {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: calc(env(safe-area-inset-top, 0px) + 12px) 20px 12px;
  background: #323828;
  color: #F3ECDE;
  border-bottom: 1px solid #B8975A
}

.reader-title {
  font-family: var(--sc);
  font-size: 1.05rem;
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis
}

.reader-count {
  font-size: .85rem;
  color: #D6CDB9;
  white-space: nowrap
}

.reader-close {
  background: none;
  border: 1px solid #B8975A;
  color: #F3ECDE;
  border-radius: 999px;
  padding: .45em 1.1em;
  font: inherit;
  font-size: .85rem;
  cursor: pointer
}

.reader-pages {
  flex: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 24px 16px calc(env(safe-area-inset-bottom, 0px) + 40px)
}

.reader-pages img {
  width: 100%;
  max-width: 640px;
  height: auto;
  margin: 0 auto 18px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .35);
  border-radius: 2px;
  aspect-ratio: 770/1190;
  background: #F5F2ED
}

.reader-end {
  max-width: 640px;
  margin: 30px auto 0;
  text-align: center;
  color: #F3ECDE;
  font-family: var(--serif);
  font-size: 1.1rem
}

.reader-end .btn {
  margin-top: 10px
}

body.reading {
  overflow: hidden
}

/* Schlank */
.core-h {
  font-size: clamp(1.9rem, 3.4vw, 2.7rem);
  margin-bottom: 24px
}

.core-way {
  margin: 22px 0 0;
  font-family: var(--serif);
  font-style: italic;
  color: #E2CC98
}

.core {
  margin-bottom: 56px
}

.fit-wrap {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  align-items: start
}

.fit-wrap .head {
  margin: 0
}

@media (max-width:860px) {
  .fit-wrap {
    grid-template-columns: 1fr;
    gap: 24px
  }
}

.basics {
  max-width: 640px
}

.more-offers {
  margin-top: 28px;
  border-top: 1px solid var(--gold-soft)
}

.more-offers summary {
  cursor: pointer;
  list-style: none;
  padding: 20px 0;
  font-family: var(--sc);
  font-size: 1.15rem;
  color: var(--ink);
  display: flex;
  align-items: center;
  gap: 12px
}

.more-offers summary::-webkit-details-marker {
  display: none
}

.more-offers summary::after {
  content: "+";
  font-family: var(--sans);
  font-weight: 300;
  font-size: 1.4rem;
  color: var(--gold)
}

.more-offers[open] summary::after {
  content: "–"
}

.more-offers .lists {
  margin-top: 12px
}

.offer-note {
  margin: 28px 0 0;
  font-size: .86rem;
  color: var(--muted)
}

.read-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px
}

.read-card {
  display: grid;
  grid-template-columns: 150px 1fr;
  gap: 24px;
  align-items: start;
  border: 1px solid var(--gold-soft);
  border-radius: 4px;
  padding: 24px;
  background: rgba(255, 255, 255, .03)
}

.read-card img {
  width: 100%;
  border-radius: 2px;
  box-shadow: 8px 12px 26px rgba(0, 0, 0, .3)
}

.read-card .tag {
  display: inline-block;
  font-size: .72rem;
  letter-spacing: .08em;
  color: #E2CC98;
  border: 1px solid var(--gold-soft);
  border-radius: 999px;
  padding: .25em .9em;
  margin-bottom: 10px
}

.read-card b {
  display: block;
  font-family: var(--sc);
  font-weight: 400;
  font-size: 1.25rem;
  color: var(--on-moss)
}

.read-card i {
  display: block;
  font-family: var(--serif);
  color: var(--gold);
  margin: 2px 0 10px
}

.read-card p {
  font-size: .92rem;
  color: var(--on-moss-muted);
  margin: 0 0 16px
}

.shop-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  margin-top: 20px
}

.shop-item {
  display: grid;
  grid-template-columns: 64px 1fr;
  gap: 14px;
  align-items: start;
  border-top: 1px solid var(--gold-soft);
  padding-top: 16px
}

.shop-item img {
  width: 64px;
  border-radius: 2px;
  box-shadow: 4px 6px 14px rgba(0, 0, 0, .3)
}

.shop-item b {
  display: block;
  font-family: var(--sc);
  font-weight: 400;
  font-size: 1rem;
  color: var(--on-moss);
  line-height: 1.3
}

.shop-item i {
  display: block;
  font-family: var(--serif);
  font-size: .85rem;
  color: var(--gold);
  margin: 2px 0 6px;
  line-height: 1.35
}

.shop-price {
  display: block;
  font-family: var(--serif);
  color: var(--on-moss);
  margin-bottom: 4px
}

.shop-link {
  font-size: .8rem;
  color: var(--on-moss-muted)
}

.shop-link:hover {
  color: #E2CC98
}

.reads+.shop {
  margin-top: 64px
}

.shop .bundle {
  margin-top: 28px
}

@media (max-width:1000px) {
  .shop-grid {
    grid-template-columns: 1fr 1fr
  }
}

@media (max-width:860px) {
  .read-grid {
    grid-template-columns: 1fr
  }
}

@media (max-width:520px) {
  .read-card {
    grid-template-columns: 96px 1fr;
    padding: 18px;
    gap: 16px
  }

  .shop-grid {
    grid-template-columns: 1fr
  }
}

/* About */
.about .grid {
  display: grid;
  grid-template-columns: .9fr 1.1fr;
  gap: 72px;
  align-items: center
}

.about .arch {
  max-width: 400px
}

.about .arch img {
  object-position: 50% 25%
}

.facts {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px 28px;
  margin-top: 28px;
  font-size: .9rem
}

.facts div {
  border-top: 1px solid var(--gold-soft);
  padding-top: 12px
}

.facts b {
  display: block;
  font-family: var(--sc);
  font-weight: 400;
  font-size: 1rem
}

.facts span {
  color: var(--muted)
}

@media (max-width:860px) {
  .about .grid {
    grid-template-columns: 1fr;
    gap: 44px
  }

  .about .arch {
    max-width: 320px;
    margin-inline: auto
  }

  .facts {
    grid-template-columns: 1fr
  }
}

/* Contact */
.contact {
  background: var(--bg2)
}

.contact .grid {
  display: grid;
  grid-template-columns: .85fr 1.15fr;
  gap: 64px;
  align-items: start
}

.ways {
  display: grid;
  gap: 14px;
  margin-top: 28px
}

.way {
  display: block;
  text-decoration: none;
  padding: 20px 22px;
  border: 1px solid var(--gold-soft);
  border-radius: 4px;
  background: var(--paper)
}

.way:hover {
  border-color: var(--gold)
}

.way b {
  display: block;
  font-family: var(--sc);
  font-weight: 400;
  font-size: 1.1rem
}

.way span {
  font-size: .9rem;
  color: var(--muted);
  word-break: break-word
}

form {
  background: var(--paper);
  border: 1px solid var(--gold-soft);
  border-radius: 4px;
  padding: 36px
}

form h3 {
  font-size: 1.45rem;
  margin-bottom: 6px
}

form .sub {
  color: var(--muted);
  font-size: .9rem;
  margin-bottom: 22px
}

.field {
  margin-bottom: 18px
}

label {
  display: block;
  font-size: .82rem;
  letter-spacing: .04em;
  margin-bottom: 6px;
  color: var(--muted)
}

input,
select,
textarea {
  width: 100%;
  font: inherit;
  font-size: 1rem;
  color: var(--ink);
  background: var(--bg);
  border: 1px solid var(--gold-soft);
  border-radius: 3px;
  padding: .8em .9em
}

input:focus,
select:focus,
textarea:focus {
  outline: none;
  border-color: var(--gold);
  box-shadow: 0 0 0 3px var(--gold-soft)
}

textarea {
  min-height: 140px;
  resize: vertical
}

.two {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px
}

.check {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  font-size: .84rem;
  color: var(--muted);
  margin: 6px 0 22px
}

.check input {
  width: auto;
  margin-top: .35em;
  accent-color: var(--moss)
}

.formmsg {
  margin-top: 14px;
  font-size: .88rem;
  color: var(--moss);
  min-height: 1.2em
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .formmsg {
    color: var(--gold)
  }
}

:root[data-theme="dark"] .formmsg {
  color: var(--gold)
}

@media (max-width:860px) {
  .contact .grid {
    grid-template-columns: 1fr;
    gap: 44px
  }

  form {
    padding: 26px 20px
  }

  .two {
    grid-template-columns: 1fr
  }
}

/* Footer */
footer {
  background: #323828;
  color: var(--on-moss-muted);
  padding: 72px 0 40px;
  font-size: .88rem;
  border-top: 1px solid var(--gold)
}

footer .top {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 22px;
  text-align: center
}

footer .top img {
  width: 110px
}

footer .flinks a {
  color: var(--on-moss);
  font-size: 1.1rem
}

footer .top {
  gap: 32px
}

footer .brandline {
  width: min(640px, 100%);
  font-size: .95rem
}

footer .flinks {
  display: flex;
  flex-wrap: wrap;
  gap: 22px;
  justify-content: center
}

footer .flinks a {
  text-decoration: none
}

footer .flinks a:hover {
  color: var(--gold)
}

footer details {
  max-width: 760px;
  margin: 36px auto 0;
  border-top: 1px solid var(--gold-soft);
  padding-top: 18px
}

footer summary {
  cursor: pointer;
  font-family: var(--sc);
  color: var(--on-moss);
  font-size: 1.02rem
}

footer details p {
  margin: 12px 0 0;
  line-height: 1.7
}

footer .copy {
  text-align: center;
  margin-top: 40px;
  font-size: .78rem;
  opacity: .8
}

/* Styles der ursprünglich direkt formatierten Elemente */
.recognize .head {
  margin: 0;
}

.recognize .head .lead {
  color: var(--ink);
}

.method .core .rule {
  margin: 0 auto 22px;
}

.talks .head {
  margin-bottom: 0;
}

#buch h2 {
  font-size: clamp(1.9rem, 3.4vw, 2.7rem);
  margin-bottom: 18px;
}

.about .head {
  margin-bottom: 0;
}

.about .head .lead {
  color: var(--ink);
}

.contact .head {
  margin-bottom: 0;
}

/* Vorschauseiten des kostenlosen Workbooks */
#reader-ein .reader-pages img {
  aspect-ratio: 911 / 1287;
}


/* Digistore24-Kaufbuttons im E-Book-Bereich */
.shop-item .shop-buy {
  margin-top: 10px;
  padding: .6em 1em;
  font-size: .78rem;
  letter-spacing: .02em;
  white-space: nowrap;
}

.shop .bundle p {
  margin: 0;
}

.shop .bundle .bundle-buy {
  margin: 14px 0;
  padding: .7em 1.3em;
  font-size: .84rem;
}




.shop-item > div {
    align-self: stretch;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.shop-item .shop-price {
    margin-top: auto;
}

.shop-item .shop-link {
    margin-top: 14px;
}