/* =====================================================================
   Wesenlesen — eigenständige Gestaltung, bewusst NICHT im Farbsystem
   der übrigen Institutsseiten ("Weiße Wand, bunte Menschen"), sondern
   in der Formensprache von Waldorfpädagogik / Anthroposophie / Goetheanum:
   warme Erdfarben statt weißer Wand, organische Wellenlinien statt
   scharfer Kanten, ein Blüten-Motiv (zitiert Goethes "Das Wesen zeigt
   sich am meisten in der Blüte"), Farbstimmungen im Wechsel wie in
   einem Waldorf-Klassenzimmer.

   Eigenständige Seite, eigenes Stylesheet — absichtlich ohne Bezug zu
   produkt-landingpage.css. Eingebunden ausschließlich auf Seiten mit
   der Vorlage "Landingpage Wesenlesen" (siehe functions.php).
   ===================================================================== */

@font-face {
  font-family: 'Karla'; font-style: normal; font-weight: 400; font-display: swap;
  src: url('fonts/Karla-400-normal-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Karla'; font-style: normal; font-weight: 400; font-display: swap;
  src: url('fonts/Karla-400-normal-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Karla'; font-style: normal; font-weight: 700; font-display: swap;
  src: url('fonts/Karla-700-normal-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Karla'; font-style: normal; font-weight: 700; font-display: swap;
  src: url('fonts/Karla-700-normal-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Karla'; font-style: italic; font-weight: 400; font-display: swap;
  src: url('fonts/Karla-400-italic-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Karla'; font-style: italic; font-weight: 400; font-display: swap;
  src: url('fonts/Karla-400-italic-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Faustina'; font-style: normal; font-weight: 600; font-display: swap;
  src: url('fonts/Faustina-600-normal-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Faustina'; font-style: normal; font-weight: 600; font-display: swap;
  src: url('fonts/Faustina-600-normal-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

.wesen {
  /* ---------- Farbstimmungen (angelehnt an Steiners Seelenkalender-
     Aquarelle und die Wandfarben im Waldorf-Klassenzimmer) ---------- */
  --creme:        #f7f1e3;
  --creme-tief:   #efe4c9;
  --salbei:       #e7ede1;
  --gold:         #c8963c;
  --gold-hell:    #e6c98b;
  --wein:         #7c2e2b;
  --wein-hell:    #a5453a;
  --flieder:      #e9e4f1;
  --indigo:       #423f6b;
  --tinte:        #2e2619;
  --tinte-leise:  #6d5f4c;

  --font:        'Karla', 'Helvetica Neue', Arial, sans-serif;
  --font-titel:  'Faustina', Georgia, serif;

  --weit: 56px;
  --raum: 100px;
  --breite: 980px;
  --rand: 24px;

  background: var(--creme);
  color: var(--tinte);
  font-family: var(--font);
  font-size: clamp(1.0625rem, 1rem + .25vw, 1.1875rem);
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

.wesen *, .wesen *::before, .wesen *::after { box-sizing: border-box; }
.wesen p, .wesen h1, .wesen h2, .wesen h3, .wesen ul, .wesen figure { margin: 0; }
.wesen img { display: block; max-width: 100%; height: auto; }
.wesen ::selection { background: var(--gold); color: var(--tinte); }

.wesen a { color: var(--wein); text-decoration-thickness: 1.5px; text-underline-offset: 3px; }
.wesen a:hover { color: var(--gold); }
.wesen a:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }

.huelle { max-width: var(--breite); margin: 0 auto; padding-inline: var(--rand); }

.wesen h1 {
  font-family: var(--font-titel);
  font-weight: 600;
  font-size: clamp(2.75rem, 1.9rem + 4vw, 4.75rem);
  line-height: 1;
  letter-spacing: 0.005em;
  color: var(--wein);
}
.wesen h2 {
  font-family: var(--font-titel);
  font-weight: 600;
  font-size: clamp(1.625rem, 1.3rem + 1.4vw, 2.25rem);
  line-height: 1.2;
  color: var(--wein);
  max-width: 18ch;
}
.wesen h3 {
  font-family: var(--font-titel);
  font-weight: 600;
  font-size: 1.3rem;
  color: var(--tinte);
}
.wesen .lead {
  font-family: 'Karla', sans-serif;
  font-style: italic;
  font-size: clamp(1.1875rem, 1.05rem + .6vw, 1.5rem);
  line-height: 1.5;
  color: var(--tinte-leise);
  max-width: 46ch;
}
.wesen .text { max-width: 62ch; text-wrap: pretty; }

/* ---------- Knopf: wie ein Siegel, keine Hochglanz-Schaltfläche ---------- */
.wesen .knopf {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 46px; padding: 0.8em 1.8em;
  background: var(--wein); color: var(--creme);
  font-family: var(--font); font-weight: 700; font-size: 1.0625rem;
  border: 1px solid var(--wein); border-radius: 999px 999px 999px 4px;
  text-decoration: none; cursor: pointer;
  transition: background-color .2s ease, transform .2s ease;
}
.wesen .knopf:hover { background: var(--wein-hell); color: var(--creme); transform: translateY(-1px); }
.wesen .knopf-leise {
  background: transparent; color: var(--wein); border: 1px solid var(--wein);
}
.wesen .knopf-leise:hover { background: color-mix(in srgb, var(--wein) 8%, transparent); color: var(--wein); }
.wesen .knopfreihe { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }

/* ---------- Kopf ---------- */
.kopf {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--rand); padding-block: 22px;
}
.kopf .marke { display: inline-flex; align-items: center; gap: 12px; text-decoration: none; color: var(--tinte-leise); font-size: 0.9rem; }
.kopf .marke img { width: 46px; height: auto; }

/* ---------- Wellen-Übergänge zwischen den Farbstimmungen ---------- */
.welle { width: 100%; overflow: hidden; line-height: 0; }
.welle svg { width: 100%; height: 64px; display: block; }

/* ---------- Bänder ---------- */
.band { padding-block: var(--raum); }
.band-creme    { background: var(--creme); }
.band-salbei   { background: var(--salbei); }
.band-gold     { background: var(--creme-tief); }
.band-flieder  { background: var(--flieder); }
.band-wein     { background: var(--wein); color: var(--creme); }
.band-wein h2, .band-wein h3 { color: var(--creme); }
.band-wein a { color: var(--gold-hell); }
.band-wein a:hover { color: var(--creme); }

/* ---------- Anschlag ---------- */
.anschlag {
  padding-top: 12px;
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: var(--weit);
  align-items: center;
}
.anschlag .lead { margin-top: 20px; }
.anschlag .knopfreihe { margin-top: var(--weit); }

.blob-rahmen {
  position: relative;
  border-radius: 62% 38% 55% 45% / 44% 40% 60% 56%;
  overflow: hidden;
  box-shadow: 0 30px 60px -30px rgba(124, 46, 43, .35);
  border: 6px solid var(--creme);
  outline: 2px solid var(--gold-hell);
}
.blob-rahmen img { filter: sepia(.12) saturate(1.08) contrast(1.02); }

/* ---------- Zweispaltiger Absatz ---------- */
.paar {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  gap: var(--weit);
  align-items: start;
}

/* ---------- Blüten-Motiv ----------
   Zitiert Goethes "Das Wesen zeigt sich am meisten in der Blüte" —
   sechs Blütenblätter aus Ellipsen um eine Mitte, statt eines Fotos
   oder Icons. Erscheint an mehreren Stellen in wechselnder Farbe. */
.bluete { display: block; }
.bluete .blatt-gold  { fill: var(--gold); }
.bluete .blatt-wein  { fill: var(--wein-hell); }
.bluete .blatt-indigo{ fill: var(--indigo); }
.bluete .blatt-creme { fill: var(--creme); }
.bluete .mitte-wein  { fill: var(--wein); }
.bluete .mitte-gold  { fill: var(--gold); }
.bluete .mitte-creme { fill: var(--creme); }

.bluete-kopf { display: flex; align-items: flex-start; gap: var(--weit); }
.bluete-kopf svg { flex: none; width: 96px; height: 96px; }

/* ---------- Liste als Perlenschnur ---------- */
.wesen .liste { list-style: none; padding: 0; margin-top: 28px; max-width: 62ch; }
.wesen .liste li {
  position: relative;
  padding: 14px 0 14px 30px;
}
.wesen .liste li::before {
  content: "";
  position: absolute; left: 0; top: 22px;
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--gold);
}
.band-wein .liste li::before { background: var(--gold-hell); }

/* ---------- Stimmen / Zitate — wie handschriftliche Kärtchen ---------- */
.stimmen {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--weit);
  margin-top: var(--weit);
}
.zitat {
  background: var(--creme);
  border-radius: 26px 26px 26px 4px;
  padding: 32px 34px;
  box-shadow: 0 18px 34px -22px rgba(46, 38, 25, .35);
}
.zitat p {
  font-family: var(--font-titel);
  font-size: 1.3rem;
  font-weight: 600;
  line-height: 1.4;
  color: var(--tinte);
}
.zitat cite {
  display: block; margin-top: 18px;
  font-style: italic; font-size: 0.9rem; color: var(--tinte-leise);
}

/* ---------- Erfahrungsberichte ---------- */
.berichte { list-style: none; padding: 0; margin-top: 28px; max-width: 62ch; }
.berichte li { padding: 16px 0; border-top: 1px solid rgba(124,46,43,.18); }
.berichte li:last-child { border-bottom: 1px solid rgba(124,46,43,.18); }
.berichte b { font-family: var(--font-titel); color: var(--wein); font-weight: 600; }

/* ---------- Schluss ---------- */
.schluss { text-align: center; max-width: 620px; margin-inline: auto; }
.schluss .bluete-kopf { justify-content: center; flex-direction: column; align-items: center; gap: 20px; }
.schluss .knopf { margin-top: var(--weit); background: var(--gold); border-color: var(--gold); color: var(--wein); }
.schluss .knopf:hover { background: var(--gold-hell); border-color: var(--gold-hell); }
.schluss .adresse { margin-top: 18px; font-size: 0.95rem; opacity: .85; }

/* ---------- Fuß ---------- */
.fuss {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 14px var(--weit);
  padding-block: 32px;
  font-size: 0.875rem; color: var(--tinte-leise);
}
.fuss nav { display: flex; gap: var(--weit); }
.fuss a { color: var(--tinte-leise); text-decoration: none; }
.fuss a:hover { color: var(--wein); }

/* ---------- Schmale Geräte ---------- */
@media (max-width: 860px) {
  .wesen { --raum: 64px; --weit: 32px; }
  .anschlag, .paar, .stimmen { grid-template-columns: minmax(0, 1fr); }
  .wesen h1, .wesen h2 { max-width: none; }
  .bluete-kopf { flex-direction: column; gap: 20px; }
  .blob-rahmen { border-radius: 46% 54% 40% 60% / 50% 46% 54% 50%; }
}

@media (prefers-reduced-motion: reduce) {
  .wesen *, .wesen *::before, .wesen *::after { transition-duration: .01ms !important; }
}