/* ORIELA Natur, Startseite ab 21.10.2026 (dritter Neubau): „Morgenlicht auf Stein“.
   Oben ein ruhiger Film aus dem Morgenlicht mit Kurkuma, Löwenmähne und Zitrone auf Travertin, darunter das
   Vitrine: die drei Dosen aus den echten Fotos auf Sockeln aus Travertin, mit Maus oder Finger drehbar (ab 21.10.2026 abends).
   Danach Vanillepapier zum Lesen, das Angebot im waldgrünen Feld. Handy zuerst. */

:root{
  --stein:#DFCDB6;
  --stein-hell:#EADDCB;
  --stein-tief:#CDB89C;
  --nacht:#06261A;
  --auf-nacht:rgba(240,227,200,.9);
  --auf-nacht-leise:rgba(240,227,200,.68);
  --auf-nacht-rand:rgba(240,227,200,.34);
  --ease-out:cubic-bezier(.23,1,.32,1);
  --schatten-karte:0 1px 0 rgba(255,255,255,.55) inset,0 30px 60px -34px rgba(70,48,22,.45),0 8px 18px -12px rgba(70,48,22,.3);
}

/* Weiches Scrollen (Lenis) */
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}
.lenis.lenis-stopped{overflow:clip}

/* ---------- Kopf: über dem Bild oben ohne Steinleiste, nur Logo und Felder ---------- */
.kopf--buehne.ist-auf-buehne:not(.menue-offen)::before{opacity:0}

/* ---------- Ursprung ---------- */
.ursprung{position:relative;min-height:100svh;display:grid;align-items:start;overflow:hidden;background:var(--stein);isolation:isolate}
.ursprung__bild{position:absolute;inset:0;z-index:-1;transform-origin:62% 70%;will-change:transform}
.ursprung__bild img,.ursprung__bild video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:62% 60%}
.ursprung__bild video{opacity:0;transition:opacity 1.2s var(--ease-out)}
.ursprung.film-laeuft .ursprung__bild video{opacity:1}
.ursprung__text{padding:calc(var(--kopf) + 2.2rem) var(--rand) 0;max-width:40rem;will-change:transform,opacity}
.ursprung h1{font-size:clamp(2.6rem,11.6vw,5rem);line-height:.9;letter-spacing:-.035em;overflow-wrap:normal;hyphens:none;text-wrap:balance}
.ursprung__unter{margin:1.1rem 0 0;font-size:var(--t-18);line-height:1.5;color:var(--wald-80);max-width:30ch;text-wrap:pretty}
.ursprung .knoepfe{display:flex;flex-wrap:wrap;gap:.6rem;margin-top:1.6rem}
.ursprung .knopf--rahmen{background-color:rgba(246,237,218,.5)}
@media (min-width:900px){
  .ursprung{align-items:center}
  .ursprung__text{padding:var(--kopf) var(--rand) 0;max-width:min(44rem,46vw)}
  .ursprung h1{font-size:clamp(4.2rem,7vw,8.4rem)}
  .ursprung__unter{font-size:var(--t-21);max-width:28ch}
  .ursprung__bild img,.ursprung__bild video{object-position:70% 50%}
}

/* ---------- Vitrine: drei Dosen auf Sockeln aus Travertin ----------
   Handy: Reihe zum Wischen, eine Dose je Bildschirm, die nächste schaut herein. Computer: alle drei nebeneinander.
   Die Dose steht mit ihrem Fuß auf der Oberkante des Sockels (49,78 % / 49,46 % im Sockelbild 1792 × 2390).
   Das Sockelbild ist um 30 % näher herangeholt, damit Sockel und Dose groß stehen. */
.vitrine{position:relative;background:var(--stein);padding:calc(var(--luft) * .45) 0 calc(var(--luft) * .8);isolation:isolate}
.vitrine__innen{max-width:88rem;margin:0 auto}
.vitrine__reihe{
  display:grid;grid-auto-flow:column;grid-auto-columns:min(80vw,23rem);gap:.9rem;
  overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scrollbar-width:none;
  padding:.5rem var(--rand) 1rem;scroll-padding-inline:var(--rand);
}
.vitrine__reihe::-webkit-scrollbar{display:none}
.vitrine__stueck{scroll-snap-align:center;display:grid;grid-template-rows:auto 1fr;align-content:start;min-width:0}
.vitrine__bild{position:relative;aspect-ratio:4/5;overflow:hidden;border-radius:3px;background:#D8C6A6;
  box-shadow:0 34px 44px -34px rgba(74,50,22,.5),inset 0 1px 0 rgba(255,251,242,.5)}
.vitrine__buehne{position:absolute;left:-15%;width:130%;top:-12%;aspect-ratio:1792/2390}
.vitrine__sockel{position:absolute;inset:0;width:100%;height:100%;display:block}
.vitrine__dose{position:absolute;left:49.78%;top:49.46%;height:calc(var(--gross) * 100%);aspect-ratio:var(--seite);
  transform:translate(-50%,calc(var(--fuss) * -1));touch-action:pan-y;-webkit-user-select:none;user-select:none}
.vitrine__foto,.vitrine__leinwand{position:absolute;inset:0;width:100%;height:100%;display:block;-webkit-user-drag:none}
.vitrine__dose.ist-drehbar .vitrine__foto{visibility:hidden}
/* Schatten am Fuß: dicht unter der Dose, nach rechts weich auslaufend wie das Licht von links */
.vitrine__schatten{position:absolute;left:-4%;right:-4%;top:calc(var(--fuss) - 3.2%);height:5.5%;border-radius:50%;
  background:radial-gradient(closest-side,rgba(52,34,16,.55),rgba(52,34,16,0));filter:blur(2px)}
.vitrine__schatten::after{content:"";position:absolute;left:48%;right:-38%;top:8%;bottom:-6%;border-radius:50%;
  background:radial-gradient(closest-side,rgba(52,34,16,.26),rgba(52,34,16,0));filter:blur(4px)}
.vitrine__stueck .schild{margin:-3.4rem .55rem 0;z-index:1}
.vitrine .schild--alle{margin:1.6rem var(--rand) 0}

/* Schilder: Steintafel mit Name, Herkunft und Fakten */
.schild{position:relative;color:var(--wald);padding:.9rem .95rem .8rem}
.schild h2{font-size:clamp(2.1rem,8.6vw,3.2rem);line-height:.95;letter-spacing:-.02em}
.schild__latein{margin:.35rem 0 0;font-size:var(--t-14);color:var(--wald-80)}
.schild__latein i{font-style:italic}
.schild__fakten{display:grid;grid-template-columns:1fr 1fr;gap:.55rem 1rem;margin:.9rem 0 0;padding:.8rem 0 0;border-top:1px solid rgba(11,58,37,.2)}
.schild__fakten div{min-width:0}
.schild__fakten dt{font-size:.8125rem;line-height:1.2;color:var(--wald-80)}
.schild__fakten dd{margin:.1rem 0 0;font-size:var(--t-16);line-height:1.3;font-weight:500}
.schild__fakten div:first-child{grid-column:1/-1}
.schild__aussage{margin:.8rem 0 0;font-size:.8125rem;line-height:1.45;color:var(--wald-80)}
.schild .knoepfe{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:1rem}
.schild .knopf{--h:2.85rem;padding:.55rem 1.05rem;font-size:.9375rem;flex:1 1 auto}
.schild__mehr{margin:.85rem 0 0;font-size:var(--t-14);color:var(--wald-80)}
.schild__mehr a{display:inline-block;margin-right:.35rem;padding:.12rem .7rem;border-radius:999px;color:var(--wald);font-weight:500;text-decoration:none;
  background:rgba(62,40,18,.07);box-shadow:inset 0 1px 2px rgba(62,40,18,.28),0 1px 0 rgba(255,251,242,.8);transition:background-color .2s var(--ease-out),color .2s var(--ease-out)}
@media (hover:hover) and (pointer:fine){ .schild__mehr a:hover{background:var(--wald);color:var(--papier);text-shadow:none} }
.schild__mehr a:focus-visible{outline:2px solid var(--wald);outline-offset:2px}
.schild--alle{margin-top:1rem}
.schild__gross{margin:.9rem 0 0;display:flex;align-items:baseline;gap:.5rem}
.schild__gross .ziffer{font-family:var(--serif);font-size:clamp(2.6rem,11vw,3.6rem);line-height:1}
.schild__einheit{color:var(--wald-80)}
.schild__spar{margin:.5rem 0 0;font-size:var(--t-16);line-height:1.45}
.schild__tag{margin:.25rem 0 0;font-size:var(--t-14);color:var(--wald-80)}

/* ---------- Computer: alle drei nebeneinander, das Angebot darunter in der Mitte ---------- */
@media (min-width:900px){
  .vitrine__reihe{grid-auto-flow:row;grid-template-columns:repeat(3,minmax(0,1fr));overflow:visible;gap:clamp(1.25rem,2.4vw,2.5rem);padding:.5rem var(--rand) 0}
  .vitrine__stueck .schild{margin:-4.2rem 1rem 0;padding:1.4rem 1.45rem 1.25rem}
  .vitrine .schild--alle{max-width:36rem;margin:3.5rem auto 0;padding:1.8rem 1.6rem 1.5rem}
}

/* ---------- Versand und Abo ---------- */
.vertrauen{background:var(--stein-hell);color:var(--wald-80);padding:1.6rem var(--rand);border-top:1px solid rgba(11,58,37,.1);border-bottom:1px solid rgba(11,58,37,.1)}
.vertrauen__liste{list-style:none;margin:0 auto;padding:0;max-width:96rem;display:grid;grid-template-columns:1fr 1fr;gap:1rem 1.5rem;font-size:var(--t-14);line-height:1.4}
.vertrauen__liste strong{display:block;color:var(--wald);font-weight:500;font-size:var(--t-16)}
.vertrauen__liste li:last-child:nth-child(odd){grid-column:1/-1}
@media (min-width:900px){ .vertrauen__liste{grid-template-columns:repeat(3,auto);justify-content:space-between} .vertrauen__liste li:last-child:nth-child(odd){grid-column:auto} }

/* ---------- Unten auf Stein: Inhalt, Ablauf und Fragen liegen auf demselben Grund wie das Studio ---------- */
.offen,.weg,.fragen-abschnitt{background:var(--stein)}
.steintafel h2{font-size:clamp(2.3rem,9vw,3.6rem);line-height:.98;letter-spacing:-.02em}


/* ---------- Alles, was drin ist: eine große Tafel wie ein Schild im Museum ---------- */
.steintafel--inhalt{max-width:72rem;margin:0 auto;padding:clamp(1.3rem,5vw,3.4rem) clamp(1.1rem,4.6vw,3.6rem) clamp(.6rem,3vw,2.4rem)}
.offen__kopf{margin:0 0 1.6rem}
.offen__kopf p{margin-top:.9rem;color:var(--wald-80);font-size:var(--t-18);max-width:34ch}
.steintafel .reiter{grid-template-columns:repeat(3,auto);background:rgba(62,40,18,.07);box-shadow:inset 0 1px 2px rgba(62,40,18,.28),0 1px 0 rgba(255,251,242,.8);margin:0 0 1.2rem}
.steintafel .reiter button{padding:.6rem .55rem;hyphens:none;white-space:nowrap;font-size:.9375rem}
@media (min-width:600px){ .steintafel .reiter button{padding:.6rem 1rem} }
.steintafel .reiter button[aria-selected="true"]{background:var(--wald);color:var(--papier);box-shadow:0 1px 0 rgba(255,255,255,.18) inset,0 4px 10px -6px rgba(11,58,37,.7)}
.steintafel .reiter button[aria-selected="false"]:hover{color:var(--wald)}
.steintafel .inhalt__zeile+.inhalt__zeile{border-top:0;background:var(--fuge)}
.steintafel .inhalt dl{max-width:none}
.steintafel .inhalt dt{color:var(--wald-80)}
@media (min-width:900px){
  .steintafel--inhalt{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);grid-template-rows:auto 1fr;column-gap:clamp(2.5rem,5vw,5rem);align-items:start}
  .steintafel--inhalt .inhalt{display:contents}
  .steintafel--inhalt .offen__kopf{grid-column:1;grid-row:1;margin:0 0 1.6rem}
  .steintafel--inhalt .reiter{grid-column:1;grid-row:2;align-self:start}
  .steintafel--inhalt dl{grid-column:2;grid-row:1 / span 2;margin:0}
  .steintafel--inhalt .inhalt__zeile:first-child{padding-top:.4rem}
  .steintafel--inhalt .inhalt__zeile{grid-template-columns:10.5rem 1fr;gap:1.5rem}
}

.etikett{text-align:center}
.etikett__logo{display:block;height:2.4rem;width:auto;margin:0 auto}
.etikett__linie{display:block;width:3.2rem;height:1px;background:rgba(11,58,37,.42);margin:1rem auto 1.15rem}
.etikett .schild__gross,.etikett .baukasten__preis{justify-content:center}
.etikett .knoepfe{justify-content:center}

/* ---------- Baukasten: Zutaten auf Stein, Preis auf dem Etikett ---------- */
.baukasten{background:var(--stein);padding:var(--luft) var(--rand)}
.baukasten__innen{max-width:96rem;margin:0 auto;display:grid;gap:2.2rem}
.baukasten h2{color:var(--wald);font-size:clamp(2.4rem,9.4vw,4.8rem);line-height:.95;letter-spacing:-.025em}
.baukasten__kopf p{margin-top:1rem;color:var(--wald-80);font-size:var(--t-18);max-width:34ch}
.baukasten__wahl{display:grid;gap:1.5rem}
.baukasten fieldset{border:0;margin:0;padding:0;min-width:0}
.wahl-produkte__reihe{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.7rem}
.wahl{position:relative;display:grid;align-content:start;gap:.1rem;cursor:pointer;-webkit-tap-highlight-color:transparent}
.wahl input{position:absolute;opacity:0;pointer-events:none}
.wahl__bild{position:relative;display:block;aspect-ratio:4/5;border-radius:3px;overflow:hidden;margin-bottom:.6rem;background:var(--stein-tief);
  box-shadow:0 26px 40px -30px rgba(74,50,22,.7)}
.wahl__bild img{display:block;width:100%;height:100%;object-fit:cover;transition:opacity .3s var(--ease-out),filter .3s var(--ease-out),transform .5s var(--ease-out)}
.wahl__haken{position:absolute;top:.5rem;right:.5rem;width:1.55rem;height:1.55rem;border-radius:50%;
  border:1.5px solid rgba(246,237,218,.95);background:rgba(11,58,37,.18);transition:background-color .2s var(--ease-out),border-color .2s var(--ease-out)}
.wahl:has(input:checked) .wahl__haken{background:var(--wald) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 8.4l3 3 6-6.4' fill='none' stroke='%23F6EDDA' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/72% no-repeat;border-color:var(--wald)}
.wahl:not(:has(input:checked)) .wahl__bild img{opacity:.4;filter:saturate(.35)}
.wahl__name{font-family:var(--serif);font-size:clamp(1rem,4.1vw,1.75rem);line-height:1.05;color:var(--wald)}
.wahl__menge{font-size:.8125rem;line-height:1.3;color:var(--wald-80)}
.wahl:not(:has(input:checked)) .wahl__name,.wahl:not(:has(input:checked)) .wahl__menge{opacity:.55}
.wahl:has(input:focus-visible) .wahl__bild{outline:2px solid var(--wald);outline-offset:3px}
@media (hover:hover) and (pointer:fine){ .wahl:hover .wahl__bild img{transform:scale(1.035)} }

.kaufart--stein{
  position:relative;display:inline-grid;grid-template-columns:1fr 1fr;padding:4px;
  border:1.5px solid rgba(11,58,37,.3);border-radius:999px;width:min(100%,22rem);background:rgba(246,237,218,.45);
}
.kaufart--stein::before{content:"";position:absolute;top:4px;bottom:4px;left:4px;width:calc(50% - 4px);border-radius:999px;background:var(--wald);transition:transform .26s var(--ease-out)}
.kaufart--stein:has(input[value="einmal"]:checked)::before{transform:translateX(100%)}
.kaufart--stein .kaufart__wahl{position:relative;z-index:1;display:flex;justify-content:center;padding:.65rem 1rem;border-radius:999px;cursor:pointer;color:var(--wald-80);font-weight:500;transition:color .2s var(--ease-out)}
.kaufart--stein .kaufart__wahl input{position:absolute;opacity:0;pointer-events:none}
.kaufart--stein .kaufart__wahl:has(input:checked){color:var(--papier)}
.kaufart--stein .kaufart__wahl:has(input:focus-visible){outline:2px solid var(--wald);outline-offset:3px}

.baukasten__ergebnis{padding:clamp(1.4rem,5vw,2.4rem) clamp(1rem,4vw,2rem) clamp(1.2rem,4vw,1.9rem)}
.baukasten__preis{margin:0;display:flex;align-items:baseline;flex-wrap:wrap;gap:.3rem .6rem;color:var(--wald-80)}
.baukasten__preis .ziffer{font-family:var(--serif);font-size:clamp(3.2rem,15vw,5.2rem);line-height:1;color:var(--wald);letter-spacing:-.02em}
.baukasten__zeile{margin:.8rem auto 0;color:var(--wald);font-size:var(--t-16);max-width:30ch}
.baukasten__zeile--leise{margin-top:.25rem;color:var(--wald-80);font-size:var(--t-14)}
.lieferplan{list-style:none;margin:1.5rem 0 1.6rem;padding:0;display:grid;text-align:left}
.lieferplan li{display:grid;grid-template-columns:auto 1fr;gap:.2rem 1rem;padding:.65rem 0;border-top:1px dotted rgba(11,58,37,.28);font-size:var(--t-14)}
.lieferplan li:last-child{border-bottom:1px dotted rgba(11,58,37,.28)}
.lieferplan strong{font-weight:500;color:var(--wald);white-space:nowrap}
.lieferplan span{color:var(--wald-80);text-align:right}
@media (min-width:900px){
  .baukasten__innen{grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);column-gap:clamp(3rem,6vw,7rem);align-items:start}
  .baukasten__kopf,.baukasten__wahl{grid-column:1}
  .baukasten__ergebnis{grid-column:2;grid-row:1 / span 2;position:sticky;top:calc(var(--kopf) + 1.5rem)}
  .wahl-produkte__reihe{gap:1.1rem}
}

/* Leiste am Handy: zeigt im Baukasten den Preis der Auswahl, tritt beim Etikett zurück */
.leiste.ist-verdeckt{transform:translateY(160%);visibility:hidden;transition:transform .4s var(--ease-out),visibility 0s linear .4s}

/* ---------- Weg der Bestellung: drei kleine Tafeln wie Trittsteine, sie erscheinen nacheinander ---------- */
.weg h2{max-width:72rem;margin:0 auto 2.4rem}
.weg__liste{list-style:none;margin:0 auto;padding:0;max-width:72rem;display:grid;gap:1.1rem;counter-reset:weg}
.weg__liste li{counter-increment:weg;width:min(88%,26rem);padding:1.15rem 1.3rem 1.25rem;color:var(--wald);transform:rotate(-.5deg)}
.weg__liste li:nth-child(even){justify-self:end;transform:rotate(.6deg)}
.weg__liste li::before{content:counter(weg);display:block;font-family:var(--serif);font-size:3.1rem;line-height:.9;margin-bottom:.5rem;color:var(--wald)}
.weg__liste h3{font-size:clamp(1.45rem,5.6vw,1.9rem);line-height:1.12}
.weg__liste p{margin:.5rem 0 0;color:var(--wald-80);font-size:var(--t-16)}
.weg__liste.ist-bereit li{transition:opacity .6s var(--ease-out) var(--verz,0s),translate .6s var(--ease-out) var(--verz,0s),scale .6s var(--ease-out) var(--verz,0s)}
.weg__liste.ist-bereit li:not(.ist-da){opacity:0;translate:0 22px;scale:.97}
@media (min-width:900px){
  .weg__liste{max-width:66rem;grid-template-columns:repeat(3,minmax(0,1fr));gap:1.8rem;align-items:start;padding-bottom:4.4rem}
  .weg h2{max-width:66rem}
  .weg__liste li{width:auto;min-height:15.5rem;padding:1.5rem 1.5rem 1.6rem}
  .weg__liste h3{font-size:1.6rem}
  .weg__liste li:nth-child(2){margin-top:2.2rem}
  .weg__liste li:nth-child(3){margin-top:4.4rem}
}

/* ---------- Fragen: auf einer hellen Tafel ---------- */
.steintafel--fragen{max-width:72rem;margin:0 auto;padding:clamp(1.3rem,5vw,3.4rem) clamp(1.1rem,4.6vw,3.6rem) clamp(.8rem,3vw,2.4rem)}
.steintafel--fragen .abschnitt__kopf{margin:0 0 1rem}
.steintafel--fragen .fragen>.frage{max-width:none}
.steintafel .frage{border:0;background:var(--fuge)}
.steintafel .frage:first-child{background:none}
.steintafel .frage:last-child{border:0}
.steintafel .frage summary{font-size:clamp(1.2rem,4.6vw,1.55rem);padding:1.15rem 0}
.steintafel .frage__zeichen{border-color:rgba(62,40,18,.32);box-shadow:inset 0 1px 2px rgba(62,40,18,.25),0 1px 0 rgba(255,251,242,.8)}
.steintafel .frage[open] .frage__zeichen{border-color:var(--wald)}
.steintafel .frage__antwort{padding-bottom:1.3rem}
@media (min-width:900px){
  .steintafel--fragen{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);column-gap:clamp(2.5rem,5vw,5rem);align-items:start}
  .steintafel--fragen .abschnitt__kopf{margin:0;padding-top:.6rem}
}

/* ---------- Schluss: zurück zum Morgenlicht vom Anfang, Schild darauf ---------- */
.schluss-schild{position:relative;padding:var(--luft) var(--rand);display:grid;place-items:center;isolation:isolate;
  background:var(--stein) url("../bilder/ursprung-hoch-900.webp") center 70%/cover no-repeat}
@media (orientation:landscape){ .schluss-schild{background-image:url("../bilder/ursprung-quer-1600.webp");background-position:70% 50%;min-height:80vh} }
.schluss-schild__karte{color:var(--wald);
  padding:clamp(1.6rem,6vw,3.2rem);max-width:40rem;width:100%;text-align:center;display:grid;justify-items:center}
.schluss-schild__logo{height:2.6rem;width:auto;margin-bottom:1.4rem}
.schluss-schild h2{font-size:clamp(2.4rem,9.6vw,3.7rem);overflow-wrap:normal;hyphens:none}
.schluss-schild p{margin:1rem 0 0;color:var(--wald-80)}
.schluss-schild .knoepfe{display:flex;flex-wrap:wrap;justify-content:center;gap:.6rem;margin-top:1.6rem}

/* Absätze ohne einzelnes Wort in der letzten Zeile */
.ursprung p,.schild p,.baukasten p,.weg p,.offen p,.frage__antwort p{text-wrap:pretty}
@media (prefers-reduced-motion:no-preference){html:not(.lenis){scroll-behavior:smooth}}
@media (prefers-reduced-motion:reduce){
  .ursprung__bild video,.wahl,.wahl img,.kaufart--hell::before,.weg__liste li{transition:none}
}