/* ORIELA Natur, Startseite ab 20.10.2026: Ursprung und Packung.
   Große Wörter mit ihrer Zutat, je Produkt eine Fläche, die Morgenroutine in Waldgrün. */

:root{
  --schatten-zutat:drop-shadow(1.4rem 1.8rem 1.6rem rgba(70,48,18,.26)) drop-shadow(.25rem .35rem .3rem rgba(70,48,18,.22));
  --ease-out:cubic-bezier(.23,1,.32,1);
}

/* ---------- Ursprung (oben) ---------- */
.ursprung{
  position:relative;overflow:hidden;
  padding:calc(var(--kopf) + clamp(1.5rem,5vh,3.5rem)) var(--rand) clamp(3.5rem,9vh,6rem);
}
.ursprung__schatten{
  position:absolute;top:-6%;left:-12%;width:min(88rem,96vw);aspect-ratio:800/764;
  background:url("../bilder/blattschatten.webp") no-repeat 0 0/contain;
  mix-blend-mode:multiply;opacity:.62;pointer-events:none;z-index:3;
  transform-origin:12% 8%;
}
.ursprung__film{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity 1.2s var(--ease-out);
  -webkit-mask-image:radial-gradient(ellipse 95% 95% at 0% 0%,#000 35%,transparent 82%);mask-image:radial-gradient(ellipse 95% 95% at 0% 0%,#000 35%,transparent 82%)}
.ursprung__schatten.mit-film{background:none;opacity:.9;animation:none}
.ursprung__schatten.mit-film .ursprung__film{opacity:1}
@media (prefers-reduced-motion:no-preference){
  .ursprung__schatten{animation:blaetter 16s ease-in-out infinite alternate}
}
@keyframes blaetter{
  from{rotate:0deg;scale:1}
  to{rotate:1.6deg;scale:1.025}
}

.ursprung__titel{
  position:relative;z-index:1;margin:0;max-width:96rem;margin-inline:auto;
  font-size:clamp(4.4rem,22.5vw,15.5rem);line-height:.84;letter-spacing:-.035em;
  text-wrap:nowrap;
}
.zeile{position:relative;display:block;min-height:1.62em}
.zeile + .zeile{margin-top:.08em}
.zeile__wort{position:relative;z-index:2;display:inline-block}
.zeile__name{
  position:relative;z-index:2;display:block;margin-top:.55rem;
  font-family:var(--sans);font-size:var(--t-16);line-height:1.2;letter-spacing:.02em;color:var(--wald-80);
}
.zeile__zutat{
  position:absolute;z-index:1;height:auto;pointer-events:none;
  filter:var(--schatten-zutat);
  will-change:transform;
}

/* Handy: Wort links oder rechts, Zutat gegenüber */
.zeile--wurzel .zeile__zutat{width:min(58vw,30rem);right:-7vw;top:-.12em;rotate:-7deg}
.zeile--pilz{text-align:right}
.zeile--pilz .zeile__zutat{width:min(46vw,27rem);left:-3vw;top:-.28em;rotate:3deg}
.zeile--kultur .zeile__zutat{width:min(52vw,31rem);right:-10vw;top:.78em;rotate:-4deg}

.ursprung__fuss{
  position:relative;z-index:2;max-width:96rem;margin:clamp(5rem,22vw,7rem) auto 0;
  display:grid;gap:1.4rem;
}
.ursprung__fuss p{margin:0;max-width:30ch;font-size:var(--t-18);line-height:1.5}
.knoepfe{display:flex;flex-wrap:wrap;gap:.75rem}

@media (min-width:900px){
  .ursprung{min-height:100svh;display:flex;flex-direction:column;justify-content:center}
  .ursprung__titel{font-size:clamp(5.5rem,12.4vw,14rem);width:100%}
  .zeile{min-height:1.02em}
  .zeile__name{position:absolute;left:.06em;top:100%;margin-top:.35rem}
  .zeile--pilz .zeile__name{left:auto;right:.04em}
  .zeile--wurzel .zeile__zutat{width:clamp(18rem,27vw,30rem);right:auto;left:49%;top:-.32em}
  .zeile--pilz{padding-right:2vw}
  .zeile--pilz .zeile__zutat{width:clamp(16rem,22vw,26rem);left:22%;top:-.62em}
  .zeile--kultur .zeile__zutat{width:clamp(18rem,27vw,30rem);right:auto;left:55%;top:-.18em}
  .ursprung__fuss{grid-template-columns:1fr auto;align-items:end;margin-top:clamp(2.5rem,7vh,5rem)}
}

/* ---------- Die drei ---------- */
.drei .abschnitt__kopf{max-width:96rem}
.flaechen{max-width:96rem;margin:0 auto;display:grid;gap:clamp(5rem,14vh,9rem)}
.flaeche{display:grid;gap:clamp(1.5rem,4vw,3rem);align-items:center}
.flaeche__bild{position:relative;display:block;width:100%;aspect-ratio:4/5;overflow:hidden}
.flaeche__foto{position:absolute;inset:-6% 0;width:100%;height:112%;object-fit:cover;will-change:transform;
  -webkit-mask-image:radial-gradient(ellipse 50% 50% at 50% 50%,#000 62%,transparent 100%);
          mask-image:radial-gradient(ellipse 50% 50% at 50% 50%,#000 62%,transparent 100%)}

.flaeche__name{font-size:clamp(3rem,11vw,5.2rem);line-height:.92;letter-spacing:-.025em}
.flaeche__name a{color:inherit;text-decoration:none}
.flaeche__herkunft{margin:.9rem 0 0;font-size:var(--t-18)}
.flaeche__kurz{margin:.6rem 0 0;max-width:34ch;font-size:var(--t-18);line-height:1.5;color:var(--wald-80)}
.preise{display:flex;flex-wrap:wrap;align-items:baseline;gap:.4rem 1.4rem;margin:1.6rem 0 0}
.preise__einmal{font-size:var(--t-24);font-weight:500}
.preise__abo{font-size:var(--t-18);color:var(--wald-80)}
.preise__abo .ziffer{color:var(--wald);font-weight:500}
.flaeche__knoepfe,.karte__knoepfe{display:flex;flex-wrap:wrap;gap:.75rem;margin-top:1.6rem}

@media (min-width:900px){
  .flaeche{grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:4vw}
  .flaeche--rechts{grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr)}
  .flaeche--rechts .flaeche__bild{order:2}
  .flaeche__text{padding-block:2rem}
}

/* ---------- Die Morgenroutine ---------- */
.routine{
  position:relative;background:var(--wald);color:var(--papier);
  padding:var(--luft) var(--rand);overflow:hidden;
}
.routine ::selection{background:var(--papier);color:var(--wald)}
.routine__innen{max-width:96rem;margin:0 auto;display:grid;gap:clamp(2rem,5vw,3.5rem)}
.routine h2{font-size:clamp(2.3rem,10.2vw,7.5rem);line-height:.92;letter-spacing:-.025em}
.routine__foto{margin:0;position:relative}
.routine__foto img{display:block;width:100%;height:auto;box-shadow:0 40px 80px -40px rgba(2,22,13,.7),0 2px 0 rgba(2,22,13,.2);will-change:transform}
.routine__angebot{max-width:40rem}
.routine__angebot p{margin:0 0 1rem;font-size:var(--t-18);line-height:1.55;color:rgba(240,227,200,.86)}
.routine__preis{display:flex;align-items:baseline;gap:.8rem;margin-bottom:1.4rem!important}
.routine__preis .ziffer{font-family:var(--serif);font-size:clamp(3.4rem,10vw,5.5rem);line-height:1;color:var(--papier)}
.routine__monat{font-size:var(--t-18);color:rgba(240,227,200,.8)}
.routine .knoepfe{margin-top:1.8rem}

.knopf--hell{background-color:var(--papier);color:var(--wald);border-color:var(--papier)}
.knopf--hell{background-image:radial-gradient(circle 6rem at var(--mx,50%) var(--my,50%),rgba(11,58,37,calc(.1 * var(--licht))),rgba(11,58,37,0))}
.knopf--rahmen-hell{background-color:transparent;color:var(--papier);border-color:rgba(240,227,200,.5)}
.knopf--rahmen-hell::before{background:radial-gradient(circle 6rem at var(--mx,50%) var(--my,50%),rgba(11,58,37,.1),rgba(11,58,37,0)),var(--papier)}
/* Auf Waldgrün ein dunklerer Schatten, sonst ist das Abheben nicht zu sehen */
.knopf--hell::after,.knopf--rahmen-hell::after{box-shadow:0 12px 24px -12px rgba(0,0,0,.6),0 3px 6px -3px rgba(0,0,0,.4),inset 0 1px 0 rgba(255,251,242,.5)}
@media (hover:hover) and (pointer:fine){
  .knopf--rahmen-hell:hover{border-color:var(--papier);color:var(--wald)}
}
.routine .knopf:focus-visible{outline:2px solid var(--papier);outline-offset:3px}

.routine__sonne{color:var(--papier);padding-top:1rem}
.routine__sonne h3{font-size:clamp(2rem,6vw,3rem)}
.routine__sonne .sonne__anleitung,.routine__sonne .sonne__hinweis{color:rgba(240,227,200,.8)}
.routine .sonne__ring circle{stroke:var(--papier)}
.routine .o-scheibe,.routine .o-bogen path{fill:var(--papier)}
.routine .sonne__mengen{color:var(--papier)}

@media (min-width:900px){
  .routine__innen{grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr);grid-template-areas:"kopf kopf" "angebot buehne" "sonne buehne";align-items:start;column-gap:4vw;row-gap:2.5rem}
  .routine h2{font-size:clamp(4rem,7.6vw,8rem);text-wrap:nowrap}
  .routine__kopf{grid-area:kopf}
  .routine__foto{grid-area:buehne;align-self:center}
  .routine__angebot{grid-area:angebot}
  .routine__sonne{grid-area:sonne;justify-items:start;text-align:left}
}

/* ---------- Ablauf, ohne Linien ---------- */
.startseite .horizont{display:none}

/* ---------- Karten (Produktübersicht) ---------- */
.karte{display:grid;gap:1.2rem}
.karte__bild{position:relative;display:block;aspect-ratio:4/5;overflow:hidden}
.karte__foto{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  -webkit-mask-image:radial-gradient(ellipse 50% 50% at 50% 50%,#000 62%,transparent 100%);
          mask-image:radial-gradient(ellipse 50% 50% at 50% 50%,#000 62%,transparent 100%)}
.karte__name{font-size:clamp(2.4rem,8vw,3.6rem);line-height:.95;letter-spacing:-.02em}
.karte__name a{color:inherit;text-decoration:none}
.karte__herkunft{margin:.6rem 0 0}
.karte__kurz{margin:.4rem 0 0;color:var(--wald-80);max-width:34ch}

/* Mini-Bilder im Korb: Packungen statt Tafeln */
.posten__bild img{object-fit:contain}
.posten__abo{color:var(--wald);font-weight:500}

@media (prefers-reduced-motion:reduce){
  .zeile__zutat,.flaeche__zutat,.flaeche__packung{will-change:auto}
}

/* Absätze ohne einzelnes Wort in der letzten Zeile, Sprünge weich */
.ursprung p,.flaeche p,.routine p,.karte p,.produkt__text p,.ablauf p,.frage__antwort p{text-wrap:pretty}
@media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}