/* Gusto – globale Stile (Logo-Animation aus dem Design) + responsives Layout */
html{-webkit-text-size-adjust:100%}
body{margin:0;background:#F5EFE3;font-family:'Figtree',system-ui,sans-serif;color:#1E2A22;overflow-x:hidden}
a{color:#962C19}a:hover{color:#6E1F11}
button,select,input{font-family:inherit}
button:disabled{cursor:not-allowed}
button:focus-visible,select:focus-visible,input:focus-visible,a:focus-visible{outline:3px solid #2F5D3A;outline-offset:2px}
.gusto-title{font-family:'Outfit','Plus Jakarta Sans',system-ui,-apple-system,sans-serif;font-size:34px;font-weight:700;fill:#2D5A27;letter-spacing:0.12em}
.gusto-tagline{font-family:'Plus Jakarta Sans',system-ui,-apple-system,sans-serif;font-size:25px;fill:#70A95A}

/* Logo-Animation: G öffnet den unteren rechten Bogen wie einen Mund, frisst „usto“ und kehrt zurück (7 s je Durchlauf) */
@keyframes gustoGMove{0%,14%{transform:translateX(0)}24%{transform:translateX(14px)}70%{transform:translateX(114px)}76%{transform:translateX(114px)}90%,100%{transform:translateX(0)}}
@keyframes gustoGJaw{0%,12%{transform:rotate(0deg)}20%{transform:rotate(34deg)}30%{transform:rotate(10deg)}36%{transform:rotate(34deg)}42%{transform:rotate(10deg)}48%{transform:rotate(34deg)}54%{transform:rotate(10deg)}60%{transform:rotate(34deg)}66%{transform:rotate(12deg)}70%{transform:rotate(30deg)}78%,100%{transform:rotate(0deg)}}
@keyframes gustoUstoEat{0%,24%{clip-path:inset(0 0 0 0);opacity:1}70%{clip-path:inset(0 0 0 100%);opacity:1}86%{clip-path:inset(0 0 0 100%);opacity:0}87%{clip-path:inset(0 0 0 0);opacity:0}100%{clip-path:inset(0 0 0 0);opacity:1}}
.gusto-g-move{animation:gustoGMove 7s linear infinite}
.gusto-g-jaw{transform-box:fill-box;transform-origin:0% 75%;animation:gustoGJaw 7s ease-in-out infinite}
.gusto-usto{animation:gustoUstoEat 7s linear infinite}

/* Ladeanzeige und Hinweis-Toast */
@keyframes gustoSpin{to{transform:rotate(360deg)}}
.gusto-spinner{width:36px;height:36px;border-radius:50%;border:4px solid #E2D7C3;border-top-color:#B8412A;animation:gustoSpin 0.9s linear infinite}
.gusto-toast{position:fixed;left:50%;bottom:calc(24px + env(safe-area-inset-bottom));transform:translateX(-50%);z-index:50;max-width:min(560px,calc(100vw - 32px));box-sizing:border-box;display:flex;align-items:center;gap:12px;padding:12px 8px 12px 18px;border-radius:14px;background:#1E2A22;color:#FFFDF8;font-size:14px;line-height:1.45;box-shadow:0 12px 40px rgba(30,42,34,0.3)}

@media (prefers-reduced-motion: reduce){.gusto-g-move,.gusto-g-jaw,.gusto-usto,.gusto-spinner{animation:none}}

/* Grundlayout: Inhalt zentriert, Hauptspalte flexibel */
.gusto-root{width:100%;max-width:1440px;margin:0 auto;padding-bottom:env(safe-area-inset-bottom)}
.g-header{position:sticky;top:0;z-index:15;padding-top:env(safe-area-inset-top)!important;height:auto!important;min-height:80px}
.g-main{width:auto!important;flex:1 1 956px!important;min-width:0}
.g-aside{flex:0 1 380px!important;min-width:300px}
.g-overlay{position:fixed!important}
.g-dialog{max-width:100%;max-height:calc(100vh - 80px);overflow-y:auto}
.g-diff{flex-wrap:wrap}

/* Tablet / kleines Notebook: Seitenleiste unter den Inhalt */
@media (max-width:1100px){
  .g-planrow{flex-direction:column!important;align-items:stretch!important}
  .g-aside{flex:1 1 auto!important;min-width:0;width:100%}
  .g-main{flex:1 1 auto!important;width:100%!important}
  .g-recipes{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .g-scroll{max-height:none!important;overflow:visible!important;margin:0!important;padding:0!important}
  .g-favrow{flex-direction:column!important;align-items:stretch!important}
  .g-favlist{width:100%!important}
  .g-header{flex-wrap:wrap;row-gap:10px;padding-top:10px!important;padding-bottom:10px!important}
  .g-nav{order:3;flex-basis:100%}
}

/* Smartphone */
@media (max-width:720px){
  .g-header{padding-left:16px!important;padding-right:16px!important;gap:10px!important}
  .g-hsub,.g-hleft>span:not(.g-hsub),.g-acct,.g-private,.g-hright>span[title]{display:none!important}
  .g-hleft svg{height:46px;width:122px}
  .g-hright{margin-left:auto}
  .g-nav{gap:6px!important}
  .g-nav>div{padding:0 10px 0 6px!important;font-size:13px!important;gap:6px!important}
  .g-page{padding:20px 16px 32px!important;gap:20px!important}
  .g-center{padding:24px 16px!important}
  .g-card{width:100%!important;padding:24px!important}
  .gusto-root h1{font-size:30px!important}
  .gusto-root section{padding:20px!important}
  .g-row{flex-direction:column!important}
  .g-portions{width:auto!important}
  .g-cuisines{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .g-recipes{grid-template-columns:minmax(0,1fr)!important}
  .g-days{gap:4px!important}
  .g-days button{min-height:48px!important;padding:0!important}
  .g-slotrow{flex-wrap:wrap;gap:10px!important}
  .g-slotlabel{width:auto!important;flex-basis:100%}
  .g-slotrow .g-days{flex-basis:100%}
  .g-shop,.g-2col{grid-template-columns:minmax(0,1fr)!important}
  .g-wrap{flex-wrap:wrap}
  .g-favdetail{padding:20px!important}
  .g-overlay{padding:16px!important;align-items:center!important}
  .g-dialog{width:100%!important;padding:22px!important}
}