/* =========================================================
   meditationgongs.de · Startseite, untere Hälfte „Der Raum"
   Lädt nach design.css und home.css. Unterhalb des Heros gibt es
   keine Cremefläche mehr: Dunkel, Weinrot und Bilder tragen die Seite.
   ========================================================= */
:root{
  --r-satz:clamp(2.3rem,4.4vw,4.6rem);
  --r-name:clamp(2.6rem,6vw,6rem);
}
main{background:var(--dunkel)}
.raumteil{background:var(--dunkel);color:var(--creme)}
.raumteil h2{color:var(--creme)}
.r-kicker{display:inline-flex;align-items:center;gap:.7em;font-size:var(--fs-kicker);font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--creme);margin:0 0 34px}
.r-kicker::before{content:"";width:44px;height:1px;background:var(--creme-70)}

/* ---------- Auftakt ---------- */
.auftakt{position:relative;overflow:hidden;padding:clamp(186px,22vh,300px) 0 clamp(92px,11vh,150px)}
.auftakt__schimmer{position:absolute;top:clamp(60px,7vh,110px);right:0;bottom:0;width:min(54%,780px);z-index:0}
.auftakt__schimmer img{width:100%;height:100%;object-fit:cover;object-position:55% 50%;opacity:1}
.auftakt__schimmer::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,#303030 0%,rgba(48,48,48,.75) 22%,rgba(48,48,48,.1) 55%,rgba(48,48,48,0) 100%),linear-gradient(180deg,#303030 0%,rgba(48,48,48,0) 16%,rgba(48,48,48,0) 84%,#303030 100%)}
.auftakt__inhalt{position:relative;z-index:2;max-width:min(100%,980px)}
.auftakt__satz{font-family:var(--f-display);font-weight:400;font-size:clamp(2.6rem,5.4vw,5.6rem);line-height:1.03;letter-spacing:-.014em;color:var(--creme);margin:0 0 44px;max-width:min(100%,900px)}
.auftakt__satz em{font-style:italic}
.auftakt__unten{display:flex;flex-wrap:wrap;gap:32px 88px;align-items:baseline;border-top:1px solid var(--creme-30);padding-top:44px;max-width:min(100%,860px)}
.auftakt__unten p{color:var(--creme);font-size:var(--fs-body);max-width:min(100%,470px)}
/* Punkt 3 (Alexander 05.09.2026): „Mit dem Gong seit 2005" stand zu eng.
   Mehr Laufweite, mehr Wortabstand, mehr Luft. Gleiche Schrift wie vorher.
   .jahrzeile ist die wiederverwendbare Klasse fuer denselben Satz an
   jeder weiteren Stelle, damit er nirgends wieder eng gesetzt wird. */
/* Ursache des zu engen Satzes: .auftakt__unten p (Spezifitaet 0,1,1) hat die
   Klassenregel ueberstimmt, die Zeile lief deshalb in Fliesstextgroesse.
   Deshalb hier mit Elternselektor. */
.auftakt__unten .auftakt__jahr,.jahrzeile{font-family:var(--f-display);font-size:clamp(1.75rem,2.5vw,2.5rem);line-height:1.35;letter-spacing:.07em;word-spacing:.16em;color:var(--creme);white-space:nowrap;max-width:none}

/* ---------- Der Raum: festes Bild, Tafeln ziehen darüber ---------- */
.raum{position:relative;background:var(--dunkel)}
.raum__grund{position:sticky;top:0;height:min(100svh,980px);overflow:hidden;z-index:0}
.raum__grund img,.raum__grund .raum__wein{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:58% 50%;opacity:0;transform:scale(1.07);transition:opacity 1.3s var(--ease),transform 2.4s var(--ease)}
.raum__grund .raum__wein{background:var(--wein);transform:none}
.raum__grund .an{opacity:1;transform:scale(1)}
.raum__grund::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,#303030 0%,rgba(48,48,48,0) 18%,rgba(48,48,48,0) 80%,#303030 100%)}
.raum__lauf{position:relative;z-index:2;margin-top:calc(-1 * min(100svh,980px))}
.tafel{min-height:min(100svh,980px);display:grid;align-items:center;position:relative}
.tafel > .wrap{width:100%}
.tafel::before{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(90deg,rgba(48,48,48,.97) 0%,rgba(48,48,48,.92) 32%,rgba(48,48,48,.66) 52%,rgba(48,48,48,.16) 76%,rgba(48,48,48,0) 94%)}
.tafel--rechts::before{background:linear-gradient(270deg,rgba(48,48,48,.96) 0%,rgba(48,48,48,.91) 34%,rgba(48,48,48,.6) 54%,rgba(48,48,48,.12) 78%,rgba(48,48,48,0) 94%)}
.tafel--wein::before{background:none}
.tafel__inhalt{position:relative;z-index:2;max-width:min(100%,780px)}
.tafel--rechts .tafel__inhalt{margin-left:auto;text-align:right}
.tafel--rechts .tafel__satz{margin-left:auto}
.tafel--rechts .r-kicker{flex-direction:row-reverse}
.tafel__satz{font-family:var(--f-display);font-weight:400;font-size:var(--r-satz);line-height:1.04;letter-spacing:-.013em;color:var(--creme);margin:0 0 38px;max-width:min(100%,760px)}
.tafel__satz em{font-style:italic}
.tafel p{color:var(--creme);font-size:clamp(1.15rem,1.4vw,1.35rem);line-height:1.55;max-width:min(100%,560px)}
.tafel--rechts p{margin-left:auto}
.tafel__mobilbild{display:none}
.klartext{margin-top:46px;border-top:1px solid var(--creme-30);max-width:min(100%,680px)}
.klartext p{padding:22px 0;border-bottom:1px solid var(--creme-30);font-size:var(--fs-body);color:var(--creme);max-width:none;line-height:1.5;display:flex;gap:14px;align-items:flex-start}
.klartext .ring{flex:none;color:var(--creme);margin-top:.28em}
.tafel--wein .klartext{border-color:var(--creme-30)}

/* ---------- Was zum Gong gehört ---------- */
.set{padding:clamp(104px,12.5vh,172px) 0 0}
.set__kopf{display:flex;justify-content:space-between;align-items:baseline;gap:28px;flex-wrap:wrap;margin-bottom:clamp(40px,5vw,72px)}
.set__satz{font-family:var(--f-display);font-weight:400;font-size:var(--r-satz);line-height:1.04;letter-spacing:-.013em;color:var(--creme);margin:0;max-width:16ch}
.set__bild{margin:clamp(84px,10vh,140px) 0 0;position:relative;overflow:hidden;aspect-ratio:1672/941;background:var(--dunkel)}
.set__bild img{width:100%;height:100%;object-fit:cover}
/* Das Bild laeuft jetzt ueber die ganze Breite und stiesse oben hart gegen
   den dunklen Grund. Es loest sich nach denselben Werten auf wie das
   Speculo-Bild im Auftakt und das Buehnenbild, Anmerkung 7 vom 11.09.2026. */
.set__bild::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,#303030 0%,rgba(48,48,48,0) 22%)}
.set__bild figcaption{position:absolute;left:24px;bottom:20px;font-size:var(--fs-small);color:var(--creme);background:rgba(48,48,48,.72);padding:8px 14px;border-radius:999px}
.set__reihe{list-style:none;margin:clamp(66px,7.6vw,118px) 0 0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-top:1px solid var(--creme-30)}
.set__reihe li a{display:flex;flex-direction:column;gap:8px;padding:34px 30px 34px 0;color:var(--creme);text-decoration:none;border-bottom:1px solid var(--creme-30);transition:transform .4s var(--ease)}
.set__reihe li + li a{padding-left:30px;border-left:1px solid var(--creme-30)}
.set__reihe li a:hover{transform:translateX(10px);text-decoration:none}
.set__reihe b{font-family:var(--f-display);font-weight:400;font-size:clamp(1.7rem,2.6vw,2.6rem);line-height:1.05;letter-spacing:-.01em;}
.set__reihe span{font-size:var(--fs-body);color:var(--creme)}

/* ---------- Klartext, schmales Band ---------- */
/* Vier gleichrangige Zusagen seit 09.09.2026 (mg-de7). Vorher stand der
   erste Satz bewusst groesser und ohne Ring, in eigener Schrift, das hat
   Alexander ausdruecklich abgelehnt: "nicht bewusst groesser lassen." Alle
   vier Eintraege tragen seither dieselbe Schrift, Groesse und das Ring-
   Symbol, siehe Site/vorlagen/start.php. */
.klarband{background:var(--wein);color:var(--creme);padding:clamp(40px,5vw,72px) 0}
.klarband__grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(24px,3vw,52px);align-items:flex-start}
.klarband p{margin:0;font-size:var(--fs-small);color:var(--creme);display:flex;gap:12px;align-items:flex-start;line-height:1.45}
.klarband .ring{flex:none;width:1.1em;height:1.1em;margin-top:.2em;color:var(--creme)}

/* ---------- Werkstätten: Namen groß, Bild erscheint hinter dem Namen ---------- */
.werk{position:relative;padding:clamp(104px,12.5vh,172px) 0 clamp(92px,11vh,150px);overflow:hidden}
.werk__kopf{display:flex;justify-content:space-between;align-items:baseline;gap:28px;flex-wrap:wrap;margin-bottom:clamp(36px,4vw,60px)}
.werk__kopf p{font-size:var(--fs-body);color:var(--creme);max-width:44ch}
.werk__liste{list-style:none;margin:0;padding:0;border-top:1px solid var(--creme-30)}
.werk__zeile{position:relative;display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:28px;padding:clamp(30px,3.8vw,58px) 0;border-bottom:1px solid var(--creme-30);color:var(--creme);text-decoration:none;isolation:isolate}
.werk__zeile:hover{text-decoration:none}
.werk__bild{position:absolute;inset:0;z-index:-1;opacity:0;transition:opacity .6s var(--ease);pointer-events:none}
.werk__bild img{width:100%;height:100%;object-fit:cover;object-position:50% 50%}
.werk__bild::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(48,48,48,.88) 0%,rgba(48,48,48,.5) 40%,rgba(48,48,48,.72) 62%,rgba(48,48,48,.92) 100%)}
.werk__zeile:hover .werk__bild,.werk__zeile:focus-visible .werk__bild{opacity:1}
.werk__name{font-family:var(--f-display);font-weight:400;font-size:var(--r-name);line-height:1;letter-spacing:-.014em;color:var(--creme);transition:transform .5s var(--ease)}
.werk__zeile:hover .werk__name{transform:translateX(14px)}
.werk__was{font-size:var(--fs-body);color:var(--creme);text-align:right;max-width:26ch;display:inline-flex;align-items:center;gap:14px}
.werk__was svg{width:24px;height:24px;flex:none;transition:transform .5s var(--ease)}
.werk__zeile:hover .werk__was svg{transform:translateX(8px)}
.werk__rand{margin-top:42px;display:flex;flex-wrap:wrap;align-items:baseline;gap:14px 28px;font-size:var(--fs-body);color:var(--creme)}
.werk__rand b{font-family:var(--f-display);font-weight:400;font-size:1.6rem;letter-spacing:0}
.werk__rand b a{color:var(--creme);text-decoration:underline;text-decoration-color:var(--creme-70);text-underline-offset:.18em}
.werk__rand b a:hover{text-decoration-color:var(--creme)}
.werk__rand span.trenn{width:1px;height:1.2em;background:var(--creme-30);align-self:center}

/* ---------- Einladung ---------- */
.einladung{position:relative;min-height:min(88svh,820px);display:grid;align-items:end;overflow:hidden}
.einladung > .wrap{width:100%}
.einladung__bild{position:absolute;inset:0;z-index:0}
.einladung__bild img{width:100%;height:100%;object-fit:cover;object-position:62% 46%}
.einladung__bild::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,#303030 0%,rgba(48,48,48,.42) 26%,rgba(48,48,48,.9) 100%),linear-gradient(90deg,rgba(48,48,48,.85) 0%,rgba(48,48,48,.25) 58%,rgba(48,48,48,0) 100%)}
.einladung__inhalt{position:relative;z-index:2;padding:clamp(96px,13vh,168px) 0 clamp(84px,10vh,132px);max-width:min(100%,760px)}
.einladung h2{font-family:var(--f-display);font-size:var(--r-satz);line-height:1.04;letter-spacing:-.013em;color:var(--creme);margin:0 0 32px;max-width:min(100%,720px)}
.einladung p{color:var(--creme);font-size:clamp(1.15rem,1.4vw,1.35rem);line-height:1.55;max-width:min(100%,600px);margin:0 0 44px}
.einladung .btn--hell{background:var(--creme);color:var(--wein)}
.einladung .btn--hell:hover{background:var(--weiss)}
/* Punkt 4 (Alexander 05.09.2026): Abstand zwischen Knopf und Strich war zu gering */
.einladung .einladung__signatur{margin-top:clamp(46px,5vw,76px);padding-top:26px;border-top:1px solid var(--creme-30);max-width:min(100%,560px);font-size:var(--fs-small);color:var(--creme)}

/* ---------- Mobil ---------- */
@media (max-width:900px){
  .auftakt{padding:clamp(88px,12vh,132px) 0}
  .auftakt__schimmer{width:100%;opacity:.55}
  .auftakt__schimmer::after{background:linear-gradient(180deg,#303030 0%,rgba(48,48,48,.72) 40%,#303030 100%)}
  .auftakt__inhalt{max-width:none}
  .raum__grund{display:none}
  .raum__lauf{margin-top:0}
  .tafel{min-height:0;padding:74px 0 78px}
  .tafel::before{display:none}
  .tafel--wein{background:var(--wein)}
  .tafel__inhalt,.tafel--rechts .tafel__inhalt{max-width:none;text-align:left;margin-left:0}
  .tafel--rechts .r-kicker{flex-direction:row}
  .tafel--rechts p{margin-left:0}
  .tafel__mobilbild{display:block;margin-bottom:34px;border-radius:var(--radius-l);overflow:hidden;aspect-ratio:4/3;outline:1px solid var(--creme-12)}
  .tafel__mobilbild img{width:100%;height:100%;object-fit:cover}
  .set__reihe{grid-template-columns:1fr}
  .set__reihe b{font-size:1.75rem}
  .set__reihe li a{flex-direction:row;align-items:baseline;justify-content:space-between;gap:18px;padding:24px 0}
  .set__reihe li + li a{padding-left:0;border-left:0}
  .set__reihe span{text-align:right}
  .set__bild figcaption{position:static;display:block;margin-top:12px;background:none;padding:0}
  .klarband__grid{grid-template-columns:1fr;gap:20px}
  .werk__zeile{grid-template-columns:1fr;gap:12px;padding:28px 0 28px 0}
  .werk__bild{opacity:1}
  .werk__bild::after{background:linear-gradient(90deg,rgba(48,48,48,.9) 0%,rgba(48,48,48,.7) 60%,rgba(48,48,48,.5) 100%)}
  .werk__zeile{padding-left:18px;padding-right:18px;margin:0 -18px}
  .werk__was{text-align:left;max-width:none}
  .einladung{min-height:0}
  .einladung__inhalt{padding:clamp(80px,11vh,122px) 0 80px}
}
@media (max-width:560px){
  .einladung .btn{width:100%}
  .auftakt__unten{flex-direction:column;align-items:flex-start}
}
@media (prefers-reduced-motion:reduce){
  .raum__grund img,.raum__grund .raum__wein,.werk__bild,.werk__name{transition:none}
}
.still .raum__grund img,.still .raum__grund .raum__wein{transition:none!important}
html.still{scroll-behavior:auto!important}

/* Bildlage der freigegebenen Bildfolge vom 04.09.2026 (Fassung 5): Auftakt, Raum, Einladung.
   Hellere Bilder brauchen hinter der Schrift eine dichtere Abdunklung. */
.auftakt__schimmer img{object-position:76% 50%}
.raum__grund img[data-szene="1"]{object-position:50% 50%}
.raum__grund img[data-szene="2"]{object-position:50% 50%}
.werk__bild:has(img[data-hell])::after{background:linear-gradient(90deg,rgba(48,48,48,.92) 0%,rgba(48,48,48,.66) 40%,rgba(48,48,48,.8) 62%,rgba(48,48,48,.94) 100%)}
@media (max-width:900px){.werk__bild:has(img[data-hell])::after{background:linear-gradient(90deg,rgba(48,48,48,.92) 0%,rgba(48,48,48,.78) 60%,rgba(48,48,48,.62) 100%)}}
.einladung__bild img{object-position:70% 42%}