/* Entwurf A · Bambus: er biegt sich und bricht nicht. Große Frage, darunter die zwei Wege als ruhige Tore.
   Bewegung: Der Bambus wiegt sich kaum merklich. */
.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"));transform-origin:84% 100%;animation:wiegen 12s ease-in-out infinite alternate}
: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"))}
@keyframes wiegen{from{transform:rotate(-.45deg) scale(1.035)}to{transform:rotate(.55deg) scale(1.035)}}
.schleier{background:linear-gradient(90deg,color-mix(in srgb,var(--bg) 92%,transparent) 0%,color-mix(in srgb,var(--bg) 72%,transparent) 36%,transparent 64%)}
:root[data-thema="dunkel"] .schleier{background:linear-gradient(90deg,color-mix(in srgb,var(--bg) 96%,transparent) 0%,color-mix(in srgb,var(--bg) 86%,transparent) 46%,transparent 74%)}
.hero-main{max-width:680px;gap:18px;padding-bottom:48px}
h1.lang{font-size:clamp(32px,4.1vw,54px)}

/* Die Tore zeigen immer ihre eigene Tageszeit, gleich in welcher Ansicht die Seite steht. */
.tore{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin-top:6px}
.tor{position:relative;display:flex;flex-direction:column;justify-content:flex-end;gap:8px;min-height:148px;padding:18px 20px 20px;text-decoration:none;border-top:1px solid var(--gold);border-radius:0 0 2px 2px;overflow:hidden;transition:transform .4s ease,box-shadow .4s ease}
.tor.ikigai{background:linear-gradient(180deg,#FBF8F2 0%,#F1E2DD 100%);color:#1C1D1F;box-shadow:inset 0 0 0 1px rgba(28,29,31,.08)}
.tor.schatten{background:linear-gradient(180deg,#27324A 0%,#15171C 100%);color:#F1ECE2;box-shadow:inset 0 0 0 1px rgba(241,236,226,.1)}
.tor small{font-size:11px;letter-spacing:.18em;text-transform:uppercase;font-weight:700;opacity:.72}
.tor b{font-family:var(--display);font-weight:500;font-size:26px;line-height:1.06;text-wrap:balance}
.tor::after{content:"";width:26px;height:1px;background:currentColor;margin-top:4px;transition:width .3s ease}
.tor:hover{transform:translateY(-3px)}
.tor:hover::after{width:44px}
/* Der rote Siegelpunkt sitzt auf dem Tor der Tageszeit, in der die Seite gerade steht. */
:root:not([data-thema="dunkel"]) .tor.ikigai::before,:root[data-thema="dunkel"] .tor.schatten::before{content:"";position:absolute;right:18px;top:18px;width:11px;height:11px;border-radius:50%;background:var(--siegel)}

@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 44% 0;animation:none}
  :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) 58%,color-mix(in srgb,var(--bg) 82%,transparent) 68%,transparent 86%)}
  .hero-main{gap:12px;padding-bottom:22px}
  .tore{gap:10px}
  .tor{min-height:112px;padding:14px 14px 16px}
  .tor b{font-size:19px}
  .tor small{font-size:10px;letter-spacing:.14em}
  :root:not([data-thema="dunkel"]) .tor.ikigai::before,:root[data-thema="dunkel"] .tor.schatten::before{right:12px;top:12px;width:9px;height:9px}
}