@charset "UTF-8";
/* OPEN SENSES. Vorschlag 2 (20.10.2026, Christina: "weich, sinnlich, wertig,
   mit Uebergaengen und Fading"). Dunkler Grund aus tokens.css, jedes Foto
   laeuft oben und unten in die Tiefe aus, kein harter Schnitt, Glas-Gold-Knoepfe,
   sanftes Einblenden beim Scrollen. Werte aus tokens.css (Kopie aus
   assets/design-guideline, bei Aenderungen dort neu kopieren). */

html { scroll-behavior: smooth; }
body { overflow-x: hidden; background: var(--tiefe); }
a { color: var(--text); text-underline-offset: 0.2em; text-decoration-color: rgb(200 186 166 / 50%); }
.schmal { max-width: 720px; }
.mitte { text-align: center; }
.gross { font-family: var(--font-head); font-size: clamp(1.6rem, 1.3rem + 1.4vw, 2.3rem); line-height: 1.3; color: var(--text); }
.leise { color: var(--text-leise); font-size: var(--fs-mini); }
.einleitung { color: var(--text-leise); }
h2 { margin-bottom: 0.7em; font-weight: var(--fw-leicht); }
h3 { margin: 1.8em 0 0.5em; }
p { color: var(--text-ruhig); }
.sektion { padding-block: var(--raum-xl); }

/* Sanftes Einblenden. Nur wenn JavaScript laeuft (html.js), sonst alles sichtbar. */
.js .auf { opacity: 0; transform: translateY(22px); transition: opacity 1.2s cubic-bezier(.2,.6,.2,1), transform 1.2s cubic-bezier(.2,.6,.2,1); }
.js .auf.da { opacity: 1; transform: none; }

/* Weiche Raender fuer jedes Foto: oben und unten in die Tiefe */
.foto { position: relative; overflow: hidden; }
.foto img { display: block; width: 100%; height: 100%; object-fit: cover; }
.foto::before, .foto::after { content: ""; position: absolute; left: 0; right: 0; pointer-events: none; }
.foto::before { top: 0; height: 28%; background: linear-gradient(to bottom, var(--tiefe), rgb(var(--scrim) / 40%) 50%, transparent); }
.foto::after { bottom: 0; height: 55%; background: linear-gradient(to top, var(--tiefe) 8%, rgb(var(--scrim) / 60%) 45%, transparent); }

/* Kopfzeile */
.kopfzeile { position: absolute; inset: 0 0 auto; z-index: 3; padding: 20px var(--rand-seite); }
.marke { display: inline-flex; align-items: center; gap: 10px; color: var(--text); text-decoration: none;
  font-family: var(--font-head); letter-spacing: var(--ls-marke); font-size: 1.05rem; opacity: .9; }
.marke img { width: var(--zeichen-kopf-web); height: auto; }

/* 1 Hero: Foto atmet, Text wartet unten, wo das Bild in die Tiefe geht */
.hero { position: relative; background: var(--tiefe); }
.hero__bild { position: relative; display: block; height: 86svh; overflow: hidden; }
.hero__bild img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 28%; animation: atmen 22s ease-in-out infinite alternate; transform-origin: 50% 40%; }
@keyframes atmen { from { transform: scale(1); } to { transform: scale(1.07); } }
.hero__bild::before { content: ""; position: absolute; inset: 0 0 auto; height: 22%; background: linear-gradient(to bottom, rgb(var(--scrim) / 45%), transparent); }
.hero__bild::after { content: ""; position: absolute; inset: auto 0 0; height: 58%; pointer-events: none;
  background: linear-gradient(to bottom, transparent, rgb(var(--scrim) / 35%) 35%, rgb(var(--scrim) / 80%) 70%, var(--tiefe) 100%); }
.hero__inhalt { position: relative; z-index: 2; margin-top: -30svh; padding-bottom: var(--raum-l); }
.hero .label { color: var(--akzent); }
.hero h1 { max-width: 13ch; margin: 0.3em 0 0.5em; font-size: clamp(2.5rem, 1.4rem + 4.2vw, 5.2rem); }
.hero h1 em { font-style: italic; font-weight: var(--fw-normal); color: var(--lehm); }
.hero__text { max-width: 46ch; color: var(--text); font-size: clamp(1.05rem, 1rem + 0.4vw, 1.25rem); }
.fakten { color: var(--text-leise); letter-spacing: 0.08em; font-size: var(--fs-mini); margin-bottom: 1.4em; }

/* Terminwahl: Glas-Pillen, die gewaehlte glimmt in Gold */
.termine { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 26px; }
.termine--mitte { justify-content: center; }
.termin { position: relative; display: inline-flex; align-items: center; cursor: pointer; padding: 0.75em 1.4em;
  border: 1px solid var(--rand); border-radius: var(--radius-pill); background: var(--glas-leise);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  color: var(--text); font: inherit; font-size: var(--fs-mini); letter-spacing: 0.05em;
  transition: border-color .5s ease, background .5s ease, box-shadow .5s ease; }
.termin:hover { border-color: var(--rand-stark); }
.termin[aria-pressed="true"], .termin:has(input:checked) { border-color: var(--glas-gold-rand-hover); background: var(--glas-gold); box-shadow: 0 0 32px var(--gold-schatten); }
.termin input { position: absolute; opacity: 0; pointer-events: none; }
.termin:has(input:focus-visible), .termin:focus-visible { outline: 2px solid var(--fokus); outline-offset: 3px; }

/* Der Knopf: Glas mit Gold, weicher Schein, ganz langsamer Wechsel */
.cta { box-shadow: 0 10px 40px var(--gold-schatten), inset 0 1px 0 rgb(242 237 232 / 10%); transition: background .6s ease, border-color .6s ease, box-shadow .6s ease; }
.cta:hover { box-shadow: 0 14px 48px rgb(92 73 41 / 45%), inset 0 1px 0 rgb(242 237 232 / 14%); }
.unterzeile { color: var(--text-leise); }

/* 2 Der Weg: fuenf Schritte, dann ein Band aus Bildern mit weichen Raendern */
.weg { padding-bottom: 0; }
.schritte { list-style: none; counter-reset: s; padding: 0; margin: var(--raum-m) 0 0; }
.schritte li { counter-increment: s; position: relative; padding: 1.1em 0 1.1em 3.2em; border-top: 1px solid var(--linie); color: var(--text-ruhig); }
.schritte li:last-child { border-bottom: 1px solid var(--linie); }
.schritte li::before { content: counter(s, decimal-leading-zero); position: absolute; left: 0; top: 1.1em; font-family: var(--font-head); font-style: italic; color: var(--akzent); font-size: 1.3rem; }
.schritte strong { font-family: var(--font-head); font-size: 1.5rem; font-weight: var(--fw-normal); margin-right: 0.35em; color: var(--text); }

.band { position: relative; display: flex; gap: 8px; margin-top: var(--raum-l); padding: 0; overflow: hidden; }
.band img { flex: 1 1 0; min-width: 0; height: clamp(200px, 38vw, 460px); object-fit: cover; display: block; opacity: .92;
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 18%, #000 82%, transparent); mask-image: linear-gradient(to bottom, transparent, #000 18%, #000 82%, transparent);
  transition: opacity 1s ease, transform 1.4s ease; }
.band img:nth-child(even) { transform: translateY(16px); }
.band img:hover { opacity: 1; transform: scale(1.015); }
.band img:nth-child(even):hover { transform: translateY(16px) scale(1.015); }
.band::before, .band::after { content: ""; position: absolute; top: 0; bottom: 0; width: 14%; z-index: 1; pointer-events: none; }
.band::before { left: 0; background: linear-gradient(to right, var(--tiefe), transparent); }
.band::after { right: 0; background: linear-gradient(to left, var(--tiefe), transparent); }

/* 3 Was Du bekommst: etwas hellere Flaeche, weich eingeblendet */
.bekommen { background: linear-gradient(to bottom, var(--tiefe), var(--tiefe-flaeche) 25%, var(--tiefe-flaeche) 75%, var(--tiefe)); padding-top: calc(var(--raum-xl) + 10px); }
.bekommen p { font-size: clamp(1.1rem, 1rem + 0.5vw, 1.3rem); }
.bekommen .gross { margin-bottom: 0.8em; }
.bekommen .akzent { font-family: var(--font-head); font-style: italic; font-size: clamp(1.4rem, 1.2rem + 0.9vw, 2rem); line-height: 1.3; margin-top: 1.4em; color: var(--lehm); }

/* 4 Christina */
.christina__bild { height: min(88svh, 860px); }
.christina__bild img { object-position: 30% 42%; animation: atmen 26s ease-in-out infinite alternate; }
.christina__text { position: relative; z-index: 2; margin-top: -4svh; padding-bottom: var(--raum-xl); }
.werdegang { margin: var(--raum-m) 0; }
.werdegang div { padding: 1em 0; border-top: 1px solid var(--linie); }
.werdegang dt { font-family: var(--font-head); font-size: 1.4rem; color: var(--text); }
.werdegang dd { margin: 0.2em 0 0; color: var(--text-ruhig); }
.stimme { margin: var(--raum-l) 0; padding: 0 0 0 1.3em; border-left: 1px solid var(--akzent);
  font-family: var(--font-head); font-style: italic; font-size: clamp(1.35rem, 1.15rem + 0.8vw, 1.8rem); line-height: 1.45; color: var(--text); }

/* 5 Dein Erfahrungsraum: Wasserfall, Text taucht aus dem Bild auf */
.raum { position: relative; padding: 0; background: var(--tiefe); }
.raum__bild { height: 66svh; }
.raum__bild img { object-position: 50% 30%; }
.raum .container { position: relative; z-index: 2; margin-top: -10svh; padding-bottom: var(--raum-xl); }
.raum p { max-width: 42ch; }

/* 6 Dein Sonntag */
.zeiten { width: 100%; border-collapse: collapse; margin-top: var(--raum-m); }
.zeiten th, .zeiten td { text-align: left; padding: 0.95em 0; border-top: 1px solid var(--linie); vertical-align: top; }
.zeiten tr:last-child th, .zeiten tr:last-child td { border-bottom: 1px solid var(--linie); }
.zeiten th { width: 7.5em; font-family: var(--font-head); font-weight: var(--fw-normal); font-size: 1.3rem; color: var(--akzent); }
.zeiten td { color: var(--text-ruhig); }

/* 7 Fragen */
.fragen { background: linear-gradient(to bottom, var(--tiefe), var(--tiefe-flaeche) 30%, var(--tiefe-flaeche) 70%, var(--tiefe)); }
.faq details { border-top: 1px solid var(--linie); }
.faq details:last-child { border-bottom: 1px solid var(--linie); }
.faq summary { cursor: pointer; list-style: none; padding: 1.1em 2em 1.1em 0; position: relative; color: var(--text); transition: color .4s; }
.faq summary:hover { color: var(--lehm); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; position: absolute; right: 0.2em; top: 0.85em; font-family: var(--font-head); font-size: 1.6rem; color: var(--akzent); transition: transform .4s ease; }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details p { padding-bottom: 1em; }
/* Platzhalter aus dem Textentwurf, nur bis zur Freigabe sichtbar */
.offen { color: var(--lehm); border-bottom: 1px dashed var(--lehm); font-size: 0.9em; }

/* 8 Lust bekommen: Lachen im Wald, darauf das Glas mit der Buchung */
.schluss { position: relative; padding: 0; background: var(--tiefe); }
.schluss__bild { height: 72svh; }
.schluss__bild::after { height: 62%; }
.schluss__bild img { object-position: 50% 28%; animation: atmen 24s ease-in-out infinite alternate; }
.schluss .container { position: relative; z-index: 2; margin-top: -9svh; padding-bottom: var(--raum-xl); }
.kauf { margin: var(--raum-m) auto 0; display: grid; gap: 20px; justify-items: center; max-width: 620px;
  padding: clamp(24px, 3.4vw, 44px); background: var(--glas); border: 1px solid var(--rand); border-radius: var(--radius-karte);
  backdrop-filter: blur(var(--glas-unschaerfe)); -webkit-backdrop-filter: blur(var(--glas-unschaerfe)); box-shadow: 0 30px 80px rgb(0 0 0 / 35%); }
.pflicht { font-size: var(--fs-mini); color: var(--text-leise); max-width: 56ch; margin: 0; }
.kauf .einwilligung { text-align: left; max-width: 60ch; }
.kauf .cta { white-space: nowrap; padding-inline: 1.7em; font-size: clamp(0.95rem, 1.4vw, 1.15rem); letter-spacing: 0.12em; }
.meldung { min-height: 1.5em; margin: 0; color: var(--lehm); font-size: var(--fs-mini); }
.vormerken-feld { width: min(100%, 420px); }

/* Fusszeile */
.fuss { padding: 48px 0 64px; font-size: var(--fs-mini); background: linear-gradient(to bottom, var(--tiefe), #1b1d13); }
.fuss nav { display: flex; flex-wrap: wrap; gap: 10px 24px; }
.fuss a { color: var(--text-leise); text-decoration: none; transition: color .4s; }
.fuss a:hover { color: var(--text); }
.fuss .widerrufen { color: var(--text-ruhig); border: 1px solid var(--rand); border-radius: var(--radius-pill); padding: 0.15em 0.9em; }
.fuss__marke { margin: 26px 0 0; letter-spacing: var(--ls-marke); font-family: var(--font-head); color: var(--text-leise); }
.fuss__marke a { text-decoration: none; color: inherit; }

/* Rechtsseiten */
.recht { padding: 110px 0 var(--raum-xl); }
.recht h1 { font-size: var(--fs-h2); margin-bottom: 0.6em; }
.recht h2 { font-size: var(--fs-h3); margin-top: 1.5em; }
.recht table { border-collapse: collapse; width: 100%; font-size: var(--fs-mini); }
.recht td, .recht th { border-top: 1px solid var(--linie); padding: 0.5em 0.6em 0.5em 0; text-align: left; vertical-align: top; }
.recht blockquote { margin: 1em 0; padding-left: 1em; border-left: 1px solid var(--linie); color: var(--text-leise); }
.entwurf { background: var(--glas-gold); border: 1px solid var(--glas-gold-rand); border-radius: var(--radius-karte); padding: 0.8em 1.2em; font-size: var(--fs-mini); margin-bottom: 2em; }

@media (min-width: 900px) {
  .hero { min-height: 100svh; display: flex; align-items: flex-end; }
  .hero__bild { position: absolute; inset: 0; height: auto; }
  .hero__bild img { object-position: 50% 45%; }
  .hero__bild::after { height: 100%; background: linear-gradient(to bottom, transparent 30%, rgb(var(--scrim) / 45%) 60%, rgb(var(--scrim) / 86%) 100%); }
  .hero__inhalt { margin-top: 0; padding-block: 120px 96px; }
  .christina__bild { height: 92svh; }
  .christina__bild img { object-position: 35% 40%; }
  .raum { min-height: 76svh; display: flex; align-items: center; }
  .raum__bild { position: absolute; inset: 0; height: auto; }
  .raum__bild::before { display: none; }
  .raum__bild::after { height: 100%; background: linear-gradient(to right, var(--tiefe) 5%, rgb(var(--scrim) / 55%) 48%, transparent 85%); }
  .raum .container { margin-top: 0; padding-block: var(--raum-xl); }
  .band { gap: 12px; }
}
@media (prefers-reduced-motion: reduce) {
  .hero__bild img, .christina__bild img, .schluss__bild img { animation: none; }
  .js .auf { opacity: 1; transform: none; transition: none; }
}

/* Kaufschalter (Worker setzt data-kauf am Body): 0 = Vormerken, 1 = Kauf */
body[data-kauf="0"] [data-nur-kauf], body[data-kauf="1"] [data-nur-vormerken] { display: none; }
.vormerken { display: grid; gap: 18px; justify-items: center; width: 100%; }
.honig { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.meldung--gut { font-family: var(--font-head); font-size: 1.35rem; color: var(--text); }

/* JOY-Fassung: Hinweis auf das JOYclub-Profil unter dem Hero-Text */
.joyhinweis { color: var(--text-leise); font-size: var(--fs-mini); margin: -0.4em 0 1.2em; }
.joyhinweis a { color: var(--lehm); }