/* scorza · Grundstil für Startseite und Shop. Formensprache: Kreis, Segment, Farbfläche. */
@import url(fonts/fonts.css?v=c9044040);
:root{--ink:#214126;--stage:#f8b96b;--paper:#fffaf0;--orange:#e9740d;
--disp:'Bricolage Grotesque','Arial Black',sans-serif;--sans:'DM Sans',Arial,sans-serif;
--rand:clamp(20px,4vw,58px);--kopf:92px}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:110px;-webkit-text-size-adjust:100%}
body{margin:0;font:400 16px/1.55 var(--sans);color:var(--ink);background:var(--paper);-webkit-font-smoothing:antialiased;overflow-x:hidden}
h1,h2,h3,h4,p,ul,ol,dl,dd,figure{margin:0}
ul,ol{padding:0;list-style:none}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
img{display:block;max-width:100%}
[hidden]{display:none!important}
:focus-visible{outline:3px solid currentColor;outline-offset:4px;border-radius:6px}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.skip{position:absolute;left:12px;top:-60px;z-index:100;background:var(--ink);color:var(--paper);padding:12px 18px;border-radius:30px}
.skip:focus{top:44px}

/* Überschriften: klein geschrieben, eng, fett */
.disp{font-family:var(--disp);font-weight:800;letter-spacing:-.045em;line-height:.93;text-transform:lowercase}
.kick{font-size:13px;font-weight:600;display:inline-flex;align-items:center;gap:9px}
.kick::before{content:"";width:9px;height:9px;border-radius:50%;background:currentColor;flex:none}

/* Demo-Leiste */
.demobar{min-height:34px;background:var(--ink);color:var(--paper);display:flex;align-items:center;justify-content:space-between;gap:16px;padding:6px var(--rand);font-size:12px;font-weight:500;position:relative;z-index:40}
.demobar span i{font-style:normal;white-space:nowrap}
.demobar a{white-space:nowrap;text-decoration:underline;text-underline-offset:3px}

/* Kopf */
.head{height:var(--kopf);padding:0 var(--rand);display:flex;align-items:center;justify-content:space-between;position:sticky;top:0;z-index:30;background:var(--seite,var(--paper));transition:background .8s}
.head.linie{border-bottom:1.5px solid #2141261f}
.brand{font:800 38px/1 var(--disp);letter-spacing:-.04em;display:flex;align-items:center;gap:6px}
.brand i{width:15px;height:15px;border-radius:50%;background:var(--orange);display:block;margin-top:12px}
.head nav{display:flex;gap:6px;background:#2141260f;padding:5px;border-radius:40px;font-size:14px;font-weight:500}
.head nav a{padding:10px 20px;border-radius:30px;transition:background .2s}
.head nav a:hover{background:#21412614}
.head nav a[aria-current]{background:var(--ink);color:var(--paper)}
.cart{font-size:14px;font-weight:600;display:flex;align-items:center;gap:8px;min-height:44px}
.cart b{min-width:32px;height:32px;padding:0 6px;border-radius:16px;background:var(--ink);color:var(--paper);display:grid;place-items:center;font-size:13px}

/* Knöpfe */
.btn{display:inline-flex;align-items:center;justify-content:space-between;gap:22px;min-height:62px;padding:0 10px 0 28px;border-radius:40px;background:var(--ink);color:var(--paper);font-size:15px;font-weight:500;text-transform:lowercase;transition:transform .25s,background .25s}
.pfeil{width:.85em;height:.85em;display:inline-block;vertical-align:-.08em;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;flex:none}
.btn i .pfeil{width:1.05em;height:1.05em;vertical-align:0}
.btn i{width:42px;height:42px;border-radius:50%;background:var(--stage);color:var(--ink);display:grid;place-items:center;font-style:normal;font-size:19px;transition:transform .25s;flex:none}
.btn:hover{transform:translateY(-2px)}.btn:hover i{transform:rotate(45deg)}
.btn.hell{background:var(--paper);color:var(--ink)}
.btn.rand{background:transparent;color:inherit;border:1.5px solid currentColor;padding:0 28px}
.btn.breit{width:100%}
.btn[disabled]{opacity:.45;pointer-events:none}

/* Anschnitt: die aufgeschnittene Frucht, nur CSS. --f Fleisch links, --f2 Fleisch rechts, --r Schale, --t Anteil links */
.cut{--s:36deg;--t:50%;display:block;aspect-ratio:1;border-radius:50%;
 background:radial-gradient(circle,#fffaf0 0 5%,transparent 5.5%),
 repeating-conic-gradient(from 0deg,#fffaf0 0 2.2deg,transparent 2.2deg var(--s)),
 radial-gradient(circle,transparent 0 58%,#fffaf0 58.5% 64%,var(--r) 64.5%),
 linear-gradient(90deg,var(--f) 0 var(--t),var(--f2,var(--f)) var(--t) 100%);
 box-shadow:14px 20px 30px #0000002b}
.cut.flach{box-shadow:none}
/* Gibt es ein Foto, ersetzt es die Zeichnung. Der Kreis schneidet genau an der Schale. */
.cut[style*="--bild"]{background:var(--bild) var(--bild-l)/var(--bild-g) no-repeat}
/* Zwei Fotos in einem Kreis (halb & halb): rechts die Zitrone, links die Orange bis zum Anteil --t, dazwischen eine helle Linie. */
.cut[style*="--bild2"]{position:relative;overflow:hidden;background-image:var(--bild2)}
.cut[style*="--bild2"]::before{content:"";position:absolute;inset:0;background:var(--bild) var(--bild-l)/var(--bild-g) no-repeat;clip-path:inset(0 calc(100% - var(--t)) 0 0);transition:clip-path .25s}
.cut[style*="--bild2"]::after{content:"";position:absolute;top:0;bottom:0;left:calc(var(--t) - 2px);width:4px;background:var(--paper);transition:left .25s}

/* Wahlfelder (Größe, Woche, Rhythmus) */
.wahl{display:grid;gap:10px;grid-template-columns:repeat(var(--n,3),1fr)}
.wahl button{display:grid;justify-items:center;align-content:center;gap:4px;min-height:64px;padding:12px 8px;border-radius:30px;border:1.5px solid #21412633;font:800 18px/1.2 var(--disp);letter-spacing:-.03em;text-transform:lowercase;transition:background .2s,color .2s,border-color .2s}
.wahl button small{font:500 12px/1.35 var(--sans);letter-spacing:0;opacity:.78;text-transform:none}
.wahl button:hover{border-color:var(--ink)}
.wahl button[aria-pressed=true]{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.wahl.frucht button{border-radius:22px;align-content:end;padding:14px 4px 12px;gap:6px}
.wahl.frucht u{width:var(--d);height:var(--d);border-radius:50%;background:var(--punkt,#f5922a);display:block;box-shadow:inset -6px -7px 12px #0000002a;transition:transform .35s cubic-bezier(.16,1,.3,1)}
.wahl.frucht button[aria-pressed=true] u{transform:scale(1.12)}

/* Fuß */
.fuss{background:var(--ink);color:var(--paper);padding:80px var(--rand) 30px;overflow:hidden}
.fuss-oben{display:flex;justify-content:space-between;align-items:end;gap:30px;flex-wrap:wrap}
.fuss-oben p{font:800 clamp(30px,4vw,54px)/1 var(--disp);letter-spacing:-.04em;text-transform:lowercase;max-width:640px}
.fuss-wort{font:800 clamp(90px,25vw,400px)/.8 var(--disp);letter-spacing:-.06em;margin:50px 0 40px -.04em;display:flex;align-items:baseline;gap:.04em;user-select:none}
.fuss-wort i{width:.2em;height:.2em;border-radius:50%;background:var(--orange);display:block}
.fuss-unten{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;font-size:13px;border-top:1.5px solid #fffaf033;padding-top:22px}
.fuss-unten nav{display:flex;gap:24px;flex-wrap:wrap}
.fuss-unten a{text-decoration:underline;text-underline-offset:3px}

@media(max-width:820px){
 :root{--kopf:70px}
 .brand{font-size:30px}.brand i{width:12px;height:12px;margin-top:9px}
 .head nav{position:fixed;left:12px;right:12px;bottom:calc(12px + env(safe-area-inset-bottom));z-index:50;justify-content:space-between;background:var(--ink);color:var(--paper);box-shadow:0 10px 30px #0004;font-size:13px}
 .head nav a{padding:12px 6px;flex:1 1 auto;text-align:center;white-space:nowrap}
 .head nav a[aria-current]{background:var(--paper);color:var(--ink)}
 .demobar{font-size:11px}
 .demobar span b{display:none}
 .fuss{padding-bottom:100px}
}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important;scroll-behavior:auto!important}}