/* Entwurf B · Kintsugi: Der Bruch wird nicht versteckt, er wird das Wertvollste am Gefäß.
   Frage links, Schale rechts. Eine goldene Linie führt vom Knopf durch die Wege bis zum Gespräch. */
.bild{background-image:url(bilder/hell.jpg);background-image:image-set(url(bilder/hell.webp) type("image/webp"),url(bilder/hell.jpg) type("image/jpeg"))}
:root[data-thema="dunkel"] .bild{background-image:url(bilder/dunkel.jpg);background-image:image-set(url(bilder/dunkel.webp) type("image/webp"),url(bilder/dunkel.jpg) type("image/jpeg"))}
.schleier{background:linear-gradient(90deg,color-mix(in srgb,var(--bg) 94%,transparent) 0%,color-mix(in srgb,var(--bg) 78%,transparent) 34%,transparent 60%)}
:root[data-thema="dunkel"] .schleier{background:linear-gradient(90deg,color-mix(in srgb,var(--bg) 97%,transparent) 0%,color-mix(in srgb,var(--bg) 90%,transparent) 46%,transparent 70%)}
.hero .wrap{position:relative}
.hero-main{max-width:620px;padding-left:64px;padding-bottom:96px;gap:18px}
h1{font-size:clamp(44px,5.7vw,76px)}

/* Die goldene Linie: beginnt unter dem Knopf, läuft am linken Rand durch den nächsten Abschnitt und endet am Gespräch. */
.goldweg{position:absolute;left:max(22px,env(safe-area-inset-left,0px));bottom:0;width:60px;height:170px;color:var(--glint);overflow:visible}
.goldweg path{fill:none;stroke:currentColor;stroke-width:1.5;stroke-linejoin:round;stroke-linecap:round;vector-effect:non-scaling-stroke}
.wege .wrap,.stage .wrap{position:relative;padding-left:calc(max(22px,env(safe-area-inset-left,0px)) + 64px)}
.stage .wrap{max-width:1160px}
.wege .wrap::before{content:"";position:absolute;left:calc(max(22px,env(safe-area-inset-left,0px)) + 30px);top:-104px;bottom:-72px;width:1.5px;background:var(--glint)}
.stage .wrap::before{content:"";position:absolute;left:calc(max(22px,env(safe-area-inset-left,0px)) + 30px);top:-96px;height:106px;width:1.5px;background:var(--glint)}
.stage .wrap::after{content:"";position:absolute;left:calc(max(22px,env(safe-area-inset-left,0px)) + 24px);top:4px;width:13px;height:13px;border-radius:50%;background:var(--glint)}
.stage #wg-gespraech{max-width:800px}

@media (max-width:820px){
  .bild{background-image:url(bilder/hell-m.jpg);background-image:image-set(url(bilder/hell-m.webp) type("image/webp"),url(bilder/hell-m.jpg) type("image/jpeg"));background-position:center top;inset:0 0 46% 0}
  :root[data-thema="dunkel"] .bild{background-image:url(bilder/dunkel-m.jpg);background-image:image-set(url(bilder/dunkel-m.webp) type("image/webp"),url(bilder/dunkel-m.jpg) type("image/jpeg"))}
  .schleier,:root[data-thema="dunkel"] .schleier{background:linear-gradient(0deg,var(--bg) 0%,var(--bg) 54%,color-mix(in srgb,var(--bg) 80%,transparent) 64%,transparent 84%)}
  .hero-main{padding-left:30px;padding-bottom:26px}
  .goldweg{width:30px;height:110px;left:max(8px,env(safe-area-inset-left,0px))}
  .wege .wrap,.stage .wrap{padding-left:calc(max(22px,env(safe-area-inset-left,0px)) + 30px)}
  .wege .wrap::before{left:calc(max(8px,env(safe-area-inset-left,0px)) + 15px);top:-64px;bottom:-44px}
  .stage .wrap::before{left:calc(max(8px,env(safe-area-inset-left,0px)) + 15px);top:-60px;height:70px}
  .stage .wrap::after{left:calc(max(8px,env(safe-area-inset-left,0px)) + 9px)}
}