/* Regel 11 (Ebenen) auf KOYO, seit 03.09.2026 (Vergleichs-Test mit Till, freigegeben).
   Reiner Zusatz zu styles.css. Story-Regeln sind auf #ueber (Startseite) begrenzt,
   ueber.html nutzt dasselbe Grid ohne die HTML-Aenderung. */

/* Elevation: drei Stufen, getoent auf Ink */
:root{
  --e1:0 1px 2px rgba(42,37,33,.10),0 2px 6px -1px rgba(42,37,33,.08);
  --e2:0 2px 4px rgba(42,37,33,.08),0 12px 24px -8px rgba(42,37,33,.20);
  --e3:0 4px 8px rgba(42,37,33,.08),0 24px 48px -16px rgba(42,37,33,.28),0 56px 96px -32px rgba(42,37,33,.18);
  --kante:inset 0 1px 0 rgba(255,255,255,.85);
}

/* ---- 1. Story: Portraet rechts, ragt ueber die Sektionskante nach unten ----
   Die Magazin-Ueberlappung (Headline ins Bild) wurde am Portraet verworfen: die
   Headline landete im Haar und auf der dunklen Wand (Vamora-Regel: nie ins
   Gesicht). Stattdessen kreuzt das Bild selbst die Kante zur naechsten Sektion. */
#ueber{padding-bottom:0;overflow:visible}
#ueber .story__grid{align-items:start}
#ueber .story__media{grid-column:7 / -1;grid-row:1;position:relative;z-index:3;margin-bottom:-96px}   /* 6 Spalten: Bild ist hoeher als der Text und traegt die Sektion */
#ueber .story__body{grid-column:1 / 6;grid-row:1;padding-bottom:0}
#ueber .story__portrait{box-shadow:var(--e3);border-radius:2px}
#ueber .story__hi.story__hi--ueber{grid-column:1 / 6;grid-row:1;margin:0 0 1.8rem}
/* Headline steht wieder ueber dem Body: beide in Zeile 1, Body rueckt per Grid-Zeile 2 */
#ueber .story__grid{grid-template-rows:auto auto}
#ueber .story__hi.story__hi--ueber{grid-row:1;align-self:start}
#ueber .story__body{grid-row:2}
#ueber .story__media{grid-row:1 / span 2;align-self:start}
#behandlungen .section-head{position:relative;z-index:1}
@media (max-width:820px){
  #ueber{padding-bottom:0}
  /* Mobil (Till, 03.09.2026): Headline, dann sofort das Bild, dann der Text.
     Kein Ueberhang mobil, sonst steht ein ganzer Bildschirm nur Text. */
  #ueber .story__grid{grid-template-rows:auto auto auto}
  #ueber .story__hi.story__hi--ueber{grid-column:1 / -1;grid-row:1;margin-bottom:1.2rem}
  #ueber .story__media{grid-column:1 / -1;grid-row:2;max-width:420px;margin:0 0 1.6rem}
  #ueber .story__body{grid-column:1 / -1;grid-row:3;padding-bottom:clamp(3rem,7vw,5rem)}
}

/* ---- 2. Deko-Ueberhang: Hangul haengt ueber die Kante Behandlungen -> Wirkstoffe ---- */
.ueberhang{position:relative;height:0;z-index:8;pointer-events:none}
.ueberhang__feld{position:absolute;left:0;right:0;top:-360px;height:720px;overflow:hidden;pointer-events:none}
.ueberhang__feld>*{position:absolute;top:50%;transform:translateY(-50%);pointer-events:none}
.ueberhang--rechts .ueberhang__feld>*{right:-2%}
.hangul-deko{
  font-family:var(--font-head);font-weight:500;line-height:.8;white-space:nowrap;
  font-size:clamp(6rem,12vw,11rem);color:var(--taupe);opacity:.22;user-select:none;
}

/* ---- 3. Wirkstoffe (dunkel): Bild ueberlappt Bild (nur Desktop), Dunkel-Ausgleich ---- */
@media (min-width:821px){
  .wirkstoffe__media{position:relative;gap:0}
  .wirkstoffe__media > figure:first-child{width:78%;z-index:1}
  .wirkstoffe__media > figure:last-child{width:70%;margin-left:auto;margin-top:-22%;z-index:2}
}
.wirkstoffe__media > figure:first-child .wirkstoffe__img{box-shadow:var(--e2)}
.wirkstoffe__media > figure:last-child .wirkstoffe__img{box-shadow:var(--e3);border-color:rgba(237,229,216,.28)}
@media (min-width:821px){.wirkstoffe__media > figure:last-child .wirkstoffe__cap{text-align:right}}
.section--ink p,.kontakt p,.kontakt dd,.wirkstoffe__text p,.beh-signature__desc{
  line-height:1.9;letter-spacing:.012em;font-weight:500;
}
.section--ink .wirkstoffe__text p{color:#CFC4B4}   /* eine Stufe heller als paper-mute, satter */

/* ---- 4. Studio: Bild ragt ueber den Sektionswechsel nach unten ---- */
#studio{overflow:visible;padding-bottom:0}
#studio .studio__grid{align-items:stretch}
#studio .studio__media{position:relative;z-index:3;margin-bottom:-88px;display:flex}
#studio .studio__ph{box-shadow:var(--e3);min-height:420px;height:auto;flex:1}
#studio .studio__text{padding-bottom:clamp(2.5rem,5vw,4rem)}
#studio + .section{padding-top:calc(88px + clamp(3rem,6vw,5rem))}
@media (max-width:820px){
  #studio .studio__media{margin-bottom:-56px}
  #studio .studio__ph{min-height:300px}
  #studio + .section{padding-top:calc(56px + 3rem)}
}