/* ==========================================================================
   Yuminest – style.css (Cosy Explorer, clean)
   Version: 2.0 · Konsolidiert am 18.10.2025 (Europe/Berlin)
   Hinweise:
   - Nach Vendor CSS laden (z.B. Bootstrap), damit Cosy-Overrides greifen.
   - Struktur:
     1) Design Tokens, Reset & Utilities
     2) Komponenten (Buttons, Forms, Cards/Modals, Header/Nav, Globe, Swipe, usw.)
     3) App-spezifisches (Haushalt, QR, Passport, Upload, Recipe Detail, Rating, Toasts, FAB)
     4) Kompat-Layer (mappt Legacy-Klassen auf Cosy)
     5) Responsive Tweaks
   ========================================================================== */

/* ==========================================================================
   Yuminest – style.css (Cosy Explorer, clean)
   Version: 2.0 · Konsolidiert am 18.10.2025 (Europe/Berlin)
   Hinweise:
   - Nach Vendor CSS laden (z.B. Bootstrap), damit Cosy-Overrides greifen.
   - Struktur:
     1) Design Tokens, Reset & Utilities
     2) Komponenten (Buttons, Forms, Cards/Modals, Header/Nav, Globe, Swipe, usw.)
     3) App-spezifisches (Haushalt, QR, Passport, Upload, Recipe Detail, Rating, Toasts, FAB)
     4) Kompat-Layer (mappt Legacy-Klassen auf Cosy)
     5) Responsive Tweaks
   ========================================================================== */

/* ======= 1) DESIGN TOKENS ================================================= */
:root{
  /* Farben */
  --bg:#fffaf7;               /* Warmer Hintergrund */
  --surface:#ffffff;          /* Karten/Modals */
  --border:rgba(15,23,42,.08);
  --ink:#0f172a;
  --muted:#6b7280;

  --accent:#6b6bf5;           /* Lila */
  --accent-2:#ff9b54;         /* Peach */
  --accent-gradient:linear-gradient(135deg,#7a7af9 0%,#ffb47a 100%);
  --accent-gradient-hover:linear-gradient(135deg,#6b6bf5 0%,#ff9b54 100%);
  --accent-soft:rgba(107,107,245,.10);
  --accent-2-soft:rgba(255,155,84,.15);

  --success:#22C55E;
  --danger:#e11d48;
  --danger-2:#f43f5e;
  --danger-gradient:linear-gradient(145deg,var(--danger-2),var(--danger));
  --warning:#F59E0B;
  --gold:#FFD580;

  --content-max:1200px;
  --overlay:rgba(35,31,32,.45);

  /* Radien & Schatten */
  --radius:20px;
  --radius-lg:16px;
  --radius-pill:28px;
  --shadow-sm:0 6px 16px rgba(17,24,39,.08);
  --shadow:0 14px 44px rgba(17,24,39,.12);
  --shadow-lg:0 18px 48px rgba(17,24,39,.25);
  --shadow-focus:0 0 0 4px rgba(107,107,245,.28);

  /* Z-Schichten */
  --z-drawer:2000; --z-modal:2100; --z-toast:3000;
}



/* ======= RESET & BASE ===================================================== */
*{box-sizing:border-box;}


html,body{margin:0;padding:0;height:100%;}


body{
  color:var(--ink);
  font-family:"Nunito","Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,"Apple Color Emoji","Segoe UI","sans-serif";
  font-size:16px; line-height:1.62;
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
  background:
    radial-gradient(1200px 400px at 50% -250px, rgba(107,107,245,.10), transparent 60%),
    radial-gradient(1200px 500px at 100% -200px, rgba(255,155,84,.10), transparent 60%),
    linear-gradient(180deg,#fffaf7,#fffaf7);
}


img{max-width:100%;display:block;}



/* Utilities */
.container{width:100%;max-width:var(--content-max);margin:0 auto;padding:0 24px;}


.content{padding:24px;}


.muted{color:var(--muted);}


.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;}


.focus-ring,:where(a,button,input,select,textarea,[tabindex]):focus-visible{outline:none;box-shadow:var(--shadow-focus);}



/* Helpers */
.w-full{width:100%;}


.text-center{text-align:center;}


.stack-s{display:grid;gap:.5rem;}


.stack-m{display:grid;gap:1rem;}


.stack-l{display:grid;gap:1.5rem;}


.flex-row-gap{display:flex;align-items:stretch;gap:.5rem;}


.flex-center-wrap{display:flex;justify-content:center;align-items:center;flex-wrap:wrap;gap:1rem;}


.mono{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;}


.accent-title{
  font-weight:900;letter-spacing:.2px;
  background:linear-gradient(90deg,#3b3bf0 0%,#ff8c5c 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 2px 10px rgba(107,107,245,.15));
}


.notice{padding:10px 12px;border-radius:12px;font-weight:600;border:1px solid transparent;margin-top:1rem;}


.notice.ok{background:#ecfdf5;color:#065f46;border-color:#a7f3d0;}


.notice.err{background:#fef2f2;color:#991b1b;border-color:#fecaca;}



/* Grids */
.grid-responsive-form{display:grid;gap:1rem;align-items:flex-end;}


.grid-responsive-qr{display:grid;gap:1rem;align-items:center;}


@media (min-width:600px){
  .grid-responsive-form{grid-template-columns:1fr auto;}
  .grid-responsive-qr{grid-template-columns:minmax(160px,200px) 1fr;}
}



/* Animations */
@keyframes fadeInUp{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}


@keyframes fadeIn{from{opacity:0;transform:scale(.98)}to{opacity:1;transform:scale(1)}}


@keyframes modalIn{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}


@keyframes logoShineSoft{to{transform:translateX(120%)}}


@keyframes fadeDown{from{opacity:0;transform:translateY(-24px)}to{opacity:1;transform:none}}


@keyframes shake{0%{transform:rotate(0)}25%{transform:rotate(8deg)}50%{transform:rotate(-8deg)}75%{transform:rotate(6deg)}100%{transform:rotate(0)}}


@keyframes shuffle{0%{transform:translateX(0) rotate(0)}20%{translate:-12px rotate(-2deg)}40%{translate:12px rotate(2deg)}60%{translate:-8px rotate(-1deg)}80%{translate:8px rotate(1)}100%{transform:translateX(0) rotate(0)}}


@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}



/* ======= 2) BUTTONS ======================================================= */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.55rem;
  font-weight:800;padding:14px 22px;border-radius:var(--radius-pill);border:none;
  cursor:pointer;user-select:none;line-height:1;text-decoration:none;
  transition:all .18s ease;box-shadow:var(--shadow-sm);
}


.btn:hover{transform:translateY(-2px);box-shadow:var(--shadow);}


.btn:active{transform:translateY(0);box-shadow:var(--shadow-sm);}


.btn:focus-visible{box-shadow:var(--shadow-focus);}


.btn[disabled],.btn:disabled{opacity:.55;cursor:not-allowed;}



.btn.primary{color:#fff;background:var(--accent-gradient);box-shadow:0 8px 24px rgba(107,107,245,.25);}


.btn.primary:hover{background:var(--accent-gradient-hover);box-shadow:0 10px 28px rgba(107,107,245,.30);}


.btn.secondary{background:var(--surface);color:var(--ink);border:1px solid var(--border);}


.btn.ghost{background:linear-gradient(145deg,var(--accent-soft),var(--accent-2-soft));color:var(--accent);border:1px solid rgba(255,155,84,.22);}


.btn.danger{color:#fff;background:var(--danger-gradient);box-shadow:0 8px 20px rgba(239,68,68,.22);}


.btn.small{padding:9px 14px;font-size:.93rem;border-radius:18px;}



/* Zurück */
.btn-back{
  align-self:flex-start;display:inline-flex;align-items:center;gap:8px;
  padding:6px 12px;border-radius:9999px;background:rgba(255,255,255,.7);
  backdrop-filter:none;-webkit-backdrop-filter:none;
  border:1px solid var(--border);box-shadow:var(--shadow-sm);
  color:var(--ink);font-size:14.5px;font-weight:700;line-height:1;cursor:pointer;
  transition:all .2s ease;text-decoration:none;z-index:50;
}


.btn-back:hover{background:rgba(255,255,255,.95);transform:translateY(-1px) scale(1.02);box-shadow:var(--shadow);border-color:var(--accent);}


.btn-back.hide{opacity:0;transform:translateY(8px);pointer-events:none;}


.btn-back .ico{font-size:18px;line-height:1;opacity:.9;}


.btn-back .ico-globe{font-size:16px;line-height:1;opacity:.9;}



/* Mobile Button-Back */
@media (max-width:768px){
  .btn-back{
    position:fixed!important;bottom:16px;right:16px;top:auto;left:auto;
    background:var(--accent-gradient);color:#fff;border:none;padding:12px;
    border-radius:50%;width:56px;height:56px;justify-content:center;
    box-shadow:0 10px 24px rgba(107,107,245,.35),var(--shadow-sm);
  }
  .btn-back:hover{background:var(--accent-gradient-hover);transform:translateY(-2px) scale(1.05);box-shadow:0 14px 32px rgba(107,107,245,.40),var(--shadow);}
  .btn-back .label,.btn-back .ico-globe{display:none;}
  .btn-back .ico{font-size:22px;}
}



/* ======= 3) FORMS ========================================================= */
.form-field-group{display:flex;flex-direction:column;}


.form-field-group label{margin-bottom:6px;font-weight:900;font-size:14px;color:#4A4F5C;}


input[type="text"],input[type="email"],input[type="password"],input[type="file"],input[type="search"],textarea,select{
  width:100%;padding:12px 14px;border:1px solid var(--border);border-radius:var(--radius-lg);
  font-family:inherit;font-size:16px;background:var(--surface);
  transition:border-color .2s ease,box-shadow .2s ease;
}


input[type="text"]:focus,input[type="email"]:focus,input[type="password"]:focus,
input[type="file"]:focus,input[type="search"]:focus,textarea:focus,select:focus{
  outline:none;border-color:var(--accent);box-shadow:var(--shadow-focus);
}


textarea{min-height:120px;resize:vertical;}



/* Filter-Pills */
.diet-filters label{
  display:inline-block;background:var(--accent-2-soft);border:1px solid rgba(255,155,84,.22);
  border-radius:999px;padding:6px 14px;margin:2px;font-size:14px;font-weight:700;color:var(--accent-2);
  cursor:pointer;transition:all .2s ease;user-select:none;
}


.diet-filters input[type="checkbox"]{display:none;}


.diet-filters span{display:inline-block;}


.diet-filters input[type="checkbox"]:checked+span{background:var(--accent);color:#fff;border-color:var(--accent);}



/* Aufwand-Löffel */
.spoon{filter:grayscale(1) opacity(.65);transition:transform .12s ease,filter .12s ease;cursor:pointer;}


.spoon.active{filter:grayscale(0) opacity(1);text-shadow:0 0 .35px rgba(0,0,0,.2),0 0 .35px rgba(0,0,0,.2);}



/* ======= 4) HEADER / NAV / FOOTER ======================================== */
.main-header{
  display:flex;justify-content:center;align-items:center;height:110px;padding:0 60px;
  position:relative;background:linear-gradient(135deg,#6C63FF 10%,#8E7BFF 45%,#FF8C42 115%);
  color:#fff;box-shadow:var(--shadow-sm);
}


.main-header .brand{position:absolute;left:30px;top:50%;transform:translateY(-50%);}


.main-header .brand-logo{width:80px;height:auto;display:block;filter:drop-shadow(0 3px 8px rgba(0,0,0,.25));transition:transform .3s ease;}


.main-header .brand-logo:hover{transform:scale(1.06);}


.main-header .icon-btn{
  position:absolute;right:30px;top:50%;transform:translateY(-50%);
  background:rgba(255,255,255,.1);backdrop-filter:none;-webkit-backdrop-filter:none;
  border-radius:50%;padding:10px;width:44px;height:44px;display:inline-flex;align-items:center;justify-content:center;border:0;cursor:pointer;transition:all .3s ease;
}


.main-header .icon-btn:hover{background:rgba(255,255,255,.18);}



/* Logo-Schriftzug */
.display-name.logo-wow{
  font-family:'Poppins',sans-serif;font-size:clamp(48px,5.4vw,78px);font-weight:800;text-transform:lowercase;letter-spacing:-.35px;line-height:1.05;
  background:linear-gradient(100deg,#6b6bf5 0%,#b072ff 40%,#ff9b54 100%);
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;
  text-shadow:0 2px 4px rgba(0,0,0,.25),0 4px 10px rgba(255,165,120,.25);
  -webkit-text-stroke:.4px rgba(255,255,255,.15);position:relative;transition:all .3s ease;
}


.display-name.logo-wow::after{
  content:"";position:absolute;inset:0 -30%;
  background:linear-gradient(110deg,transparent 45%,rgba(255,255,255,.12) 50%,transparent 55%);
  transform:translateX(-120%);animation:logoShineSoft 6s ease-in-out infinite;opacity:.5;pointer-events:none;
}



/* Drawer */
.drawer{
  position:fixed;top:0;right:0;height:100vh;width:320px;max-width:86%;
  background:#2E2A3B;color:#EDEAF5;transform:translateX(100%);transition:transform .28s ease;
  display:flex;flex-direction:column;z-index:var(--z-drawer);box-shadow:var(--shadow-lg);border-left:1px solid rgba(255,255,255,.10);
}


.drawer.open{transform:translateX(0);}


.drawer-header{display:flex;align-items:center;justify-content:space-between;padding:16px;border-bottom:1px solid rgba(255,255,255,.10);}


.drawer-header h2{margin:0;font-size:18px;color:#fff;}


.drawer-nav{display:flex;flex-direction:column;gap:8px;padding:12px 12px 24px;}


.drawer-nav a{display:block;padding:12px 14px;border-radius:var(--radius-lg);text-decoration:none;color:#EDEAF5;background:transparent;transition:background .2s ease,transform .2s ease;}


.drawer-nav a:hover{background:rgba(255,255,255,.08);transform:translateX(2px);}


.drawer-section{margin:12px 6px 4px;color:#C8C3DE;font-size:12px;text-transform:uppercase;letter-spacing:.08em;}


.drawer-footer{margin-top:auto;padding:12px 16px;border-top:1px solid rgba(255,255,255,.10);color:#C8C3DE;}


.drawer-overlay{position:fixed;display:none;inset:0;background: rgba(0,0,0,.40);backdrop-filter:none;z-index: calc(var(--z-drawer) - 1);animation:fadeIn .25s ease;}



.site-footer{
  background:var(--surface);border-top:1px solid var(--border);padding:28px;margin-top:60px;
  display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:16px;animation:fadeInUp .6s ease;box-shadow:var(--shadow);
}


.site-footer p{margin:0;color:var(--muted);font-size:14px;}


.footer-nav{display:flex;gap:24px;}


.footer-nav a{color:var(--ink);text-decoration:none;font-weight:800;font-size:14px;transition:color .2s ease;}


.footer-nav a:hover{color:var(--accent);}



/* ======= 5) CARDS & MODALS =============================================== */
.card,.recipe-card,.plan-card,.modal,.box,.auth-card,.start-card{
  background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow);overflow:hidden;
}


.card:hover,.recipe-card:hover,.plan-card:hover{transform:translateY(-6px);box-shadow:0 18px 48px rgba(17,24,39,.15);filter:saturate(1.02);}



.auth-card,.start-card{padding:2.5rem 2rem;width:100%;max-width:640px;text-align:center;}


.start-card img,.auth-card img{display:block;margin:0 auto 1.2rem;max-width:160px;height:auto;filter:drop-shadow(0 6px 14px rgba(107,107,245,.18));}


.start-card h1,.auth-card h1{margin-bottom:1.5rem;font-size:1.9rem;font-weight:900;letter-spacing:.2px;}


.start-card p,.auth-card p{margin-top:1.2rem;font-size:.95rem;color:var(--muted);}


.auth-card form{display:flex;flex-direction:column;gap:1rem;}



/* Modals */
.modal-backdrop{position:fixed;inset:0;background:rgba(0,0,0,.45);display:none;align-items:center;justify-content:center;padding:20px;z-index:var(--z-modal);animation:fadeIn .2s ease-out;}


.modal-backdrop.is-open{display:flex;}


.modal{width:100%;max-width:760px;padding:24px;text-align:left;max-height:90vh;overflow-y:auto;animation:modalIn .25s ease-out;}


.modal h3{margin:0 0 8px;font-weight:900;}


.modal .actions{display:flex;justify-content:flex-end;gap:8px;margin-top:20px;}


.modal .actions .btn{width:auto!important;}



/* ======= 6) LAYOUT SPEZIFISCHES ========================================== */
/* Hero Avatar */
.hero-avatar{width:160px;height:160px;margin:8px auto 24px;position:relative;display:block;}


.hero-avatar .avatar-img,.hero-avatar canvas{display:block;width:100%;height:100%;border-radius:50%;object-fit:cover;box-shadow:0 12px 26px rgba(107,107,245,.18);border:2px solid var(--accent-soft);}


.avatar-remove{position:absolute;left:50%;bottom:-6px;transform:translate(-50%,6px);opacity:0;pointer-events:none;transition:opacity .18s ease,transform .18s ease;}


.hero-avatar:hover .avatar-remove{opacity:1;transform:translate(-50%,0);pointer-events:auto;}



/* Globus */
#globe-container{
  width:100%;height:clamp(360px,55vh,520px);position:relative;margin-bottom:26px;
  border-radius:var(--radius);overflow:hidden;
  background:radial-gradient(120% 80% at 50% 0%, #EDE8FF 0%, #C7D6FF 55%, #BFE6FF 100%);
  box-shadow:var(--shadow-sm);animation:fadeInUp .6s ease;position:relative;
}


#label-container{position:absolute;inset:0;pointer-events:none;}


canvas{display:block;}



/* Globus Pin-Styles */
.pin-label{background:rgba(45,37,66,.92);color:#fff;padding:10px 12px;border-radius:12px;font-size:13px;line-height:1.45;max-width:240px;box-shadow:0 6px 18px rgba(0,0,0,.35);pointer-events:none;}


.pin-label h4{margin:0 0 6px;font-size:14px;font-weight:800;border-bottom:1px solid rgba(255,255,255,.18);padding-bottom:4px;}


.pin-label p{margin:2px 0;font-size:12px;color:#F7F2FF;}


.pin-dot{width:14px;height:14px;background:var(--accent-2);border-radius:50%;border:2px solid #fff;box-shadow:0 0 8px rgba(255,140,66,.65);cursor:pointer;transform:translate(-50%,-50%);}


.pin-dot.cooked{background:var(--success);box-shadow:0 0 8px rgba(34,197,94,.65);}



/* Rezept-Grid */
.recipe-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:20px;margin-top:20px;}


.recipe-card{display:flex;flex-direction:column;cursor:pointer;}


.recipe-card img{width:100%;aspect-ratio:16/9;object-fit:cover;display:block;}


.recipe-card-content{padding:14px 16px 18px;}


.recipe-card-content h3{margin:4px 0 6px;font-size:1.1rem;color:var(--ink);font-weight:900;}


.recipe-card-content p{margin:0;font-size:.96rem;color:var(--muted);}



/* Wochenplan */
.day-section{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow-sm);padding:1rem 1.5rem;}


.day-section h3{margin-bottom:1rem;font-size:1.2rem;color:var(--ink);border-left:5px solid var(--accent);padding-left:.6rem;border-radius:2px;}


.day-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:1rem;}


.plan-card{background:var(--bg);border:1px solid var(--border);}


.plan-card img{width:100%;height:140px;object-fit:contain;display:block;}


.plan-card h4{margin:.6rem 1rem 0;font-size:1.1rem;font-weight:800;}


.plan-card p{margin:.25rem 1rem .85rem;font-size:.92rem;color:var(--muted);}



/* ======= 7) SWIPE ========================================================= */
#swipe-container{display:none;justify-content:center;align-items:center;min-height:clamp(360px,50vh,520px);padding:0;flex-direction:column;margin-top:8px;}


#swipe-deck{position:relative;width:min(92vw,380px);height:clamp(420px,65vh,520px);perspective:1000px;margin:0 auto;z-index:100;}


.swipe-card{
  position:absolute;inset:0;background:var(--surface);border:1px solid var(--border);
  border-radius:var(--radius);box-shadow:var(--shadow);overflow:hidden;user-select:none;touch-action:none;cursor:grab;transition:transform .35s cubic-bezier(.22,.61,.36,1);
}


.swipe-card:active{cursor:grabbing;}


.swipe-card img{width:100%;height:70%;object-fit:cover;display:block;background:var(--bg);pointer-events:none;}


.swipe-meta{padding:12px 16px 18px;}


.swipe-meta h4{margin:4px 0 2px;font-size:1.2rem;color:var(--ink);font-weight:900;}


.swipe-meta p{margin:0;color:var(--muted);font-size:.96rem;}


#swipe-deck .swipe-card:nth-last-child(1){transform:translateY(0) scale(1);opacity:1;}


#swipe-deck .swipe-card:nth-last-child(2){transform:translateY(-14px) scale(.98);opacity:.98;filter:saturate(.98);}


#swipe-deck .swipe-card:nth-last-child(3){transform:translateY(-28px) scale(.96);opacity:.95;filter:saturate(.95);}


#swipe-deck .swipe-card:nth-last-child(n+4){opacity:0;}


.badge{position:absolute;top:14px;padding:8px 12px;font-weight:800;font-size:.95rem;letter-spacing:.08em;border-radius:10px;opacity:0;transform:scale(.9);transition:opacity .15s ease,transform .15s ease;pointer-events:none;}


.badge.like{left:14px;background:rgba(34,197,94,.12);color:#065f46;border:2px solid #10b981;}


.badge.nope{right:14px;background:rgba(239,68,68,.12);color:#7f1d1d;border:2px solid #ef4444;}


.swipe-card.swipe-like .badge.like,.swipe-card.swipe-nope .badge.nope{opacity:1;transform:scale(1);}



/* Swipe-Action Buttons (SVG) */
#swipe-actions{display:flex;justify-content:center;align-items:center;gap:48px;margin-top:24px;}


#swipe-actions button{background:none!important;border:0!important;padding:0!important;box-shadow:none!important;cursor:pointer;}


#swipe-actions button img{width:84px;height:84px;display:block;transition:transform .25s ease,filter .35s ease,opacity .25s ease;opacity:0;transform:scale(.9);animation:fadeInSwipe .6s ease forwards;}


#swipe-actions button:nth-child(1) img{animation-delay:.1s;}


#swipe-actions button:nth-child(2) img{animation-delay:.25s;}


#swipe-actions button:hover img{transform:scale(1.1);filter:drop-shadow(0 0 10px rgba(249,115,22,.8)) drop-shadow(0 0 20px rgba(249,115,22,.5));}


@keyframes fadeInSwipe{to{opacity:1;transform:scale(1);}}



/* ======= 8) UPLOAD & DROPZONE ============================================ */
.upload-dropzone,#dropzone{
  border:2px dashed var(--border);border-radius:var(--radius-lg);background:var(--bg);padding:1.5rem;
  transition:border-color .2s ease,background .2s ease,box-shadow .2s ease,transform .08s ease;
  cursor:pointer;text-align:center;
}


.upload-dropzone:hover,#dropzone:hover{transform:translateY(-1px);border-color:var(--accent-2);}


.upload-dropzone.dragover,#dropzone.dragover{border-color:var(--accent);background:var(--accent-soft);box-shadow:var(--shadow);}


#dropzone p{margin:0;font-size:15px;color:var(--muted);}


#dropzone img{display:block;max-width:100%;margin-top:12px;border-radius:12px;}


#upload-backdrop{display:none;position:fixed;inset:0;background:rgba(0,0,0,.5);backdrop-filter:none;z-index:2099;justify-content:center;align-items:center;}


#upload-modal{
  background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow-lg);
  padding:24px;width:100%;max-width:560px;animation:modalIn .28s ease;
}


#upload-modal h3{margin:0 0 16px;color:var(--accent);font-size:20px;font-weight:900;}



/* ======= 9) RECIPE DETAIL / RATING ======================================= */
#recipe-detail-modal{text-align:left;max-width:780px;padding:0;}


.close-btn{position:absolute;top:10px;right:15px;background:none;border:none;font-size:32px;color:#aaa;cursor:pointer;line-height:1;}


.close-btn:hover{color:#333;}


#detail-content img{width:100%;height:260px;object-fit:contain;border-radius:16px 16px 0 0;background:#FFFAF2;}


.detail-body{padding:24px;}


.detail-body h3{margin:0 0 8px;font-size:28px;font-weight:900;}


.detail-meta{display:flex;align-items:center;gap:16px;margin-bottom:16px;padding-bottom:16px;border-bottom:1px solid var(--border);font-size:14px;color:var(--muted);}


.detail-difficulty{display:flex;gap:2px;}


.detail-difficulty img{width:18px!important;height:18px!important;}


.detail-tags-container{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:16px;}


.detail-tag{background:var(--accent-2-soft);border:1px solid rgba(255,155,84,.22);padding:6px 12px;border-radius:16px;font-size:12px;font-weight:900;color:var(--accent-2);}


.detail-instructions h4{margin-bottom:8px;font-weight:900;}


.detail-instructions p{line-height:1.7;white-space:pre-wrap;}



#rating-backdrop{position:fixed;inset:0;background:rgba(0,0,0,.55);display:none;justify-content:center;align-items:center;z-index:2200;}


#rating-backdrop .modal{background:var(--surface);padding:20px;border-radius:var(--radius);text-align:center;max-width:320px;box-shadow:var(--shadow);}


#rating-stars{display:flex;justify-content:center;gap:8px;margin:12px 0;font-size:24px;}


#rating-stars .star{cursor:pointer;color:#ccc;transition:color .2s ease,transform .2s ease;}


#rating-stars .star.active{color:var(--gold);}


.stars{font-size:1.2rem;line-height:1.2;color:var(--gold);letter-spacing:2px;}


.stars .empty{color:#ccc;}



/* ======= 10) HAUSHALT / VERWALTUNG ======================================= */
#household-members-list{list-style:none;padding:0;margin:16px 0;display:flex;flex-direction:column;gap:12px;}


#household-members-list li{
  display:flex;justify-content:space-between;align-items:center;background:var(--surface);border:1px solid var(--border);
  border-radius:var(--radius-lg);padding:14px 16px;box-shadow:var(--shadow-sm);
  transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease;
}


#household-members-list li:hover{transform:translateY(-2px);box-shadow:var(--shadow);border-color:var(--accent-soft);}


.member-info{display:flex;align-items:center;gap:10px;}


.member-name{font-weight:800;}


.badge{display:inline-block;padding:3px 8px;border-radius:8px;font-size:.8rem;font-weight:800;}


.badge.admin{background:var(--accent-soft);color:var(--accent);}


.badge.member{background:var(--accent-2-soft);color:var(--accent-2);}


#household-name-title{font-size:1.3rem;font-weight:900;color:var(--accent);margin:1rem 0;}



#invite-qr-wrapper{
  display:none;padding:18px 18px 22px;border:1px dashed var(--accent-soft);background:var(--surface);
  border-radius:var(--radius);box-shadow:var(--shadow);margin-top:1rem;
}


#invite-qr-wrapper .qr-wrap{display:grid;gap:16px;grid-template-columns:minmax(160px,200px) 1fr;align-items:center;}


.qrcode-box{
  width:180px;height:180px;padding:8px;justify-self:center;border:2px solid var(--border);border-radius:var(--radius-lg);background:#fff;
  box-shadow:var(--shadow-sm),inset 0 1px 0 rgba(255,255,255,.5);display:grid;place-items:center;
}


.qrcode-box canvas,.qrcode-box svg,.qrcode-box img{width:100%;height:100%;object-fit:contain;display:block;}


#invite-link{background:var(--bg);border:1px solid var(--border);border-radius:var(--radius-lg);}



/* ======= 11) PASSPORT ===================================================== */
.passport-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(80px,1fr));gap:12px;margin-top:20px;max-height:40vh;overflow-y:auto;}


.passport-stamp{position:relative;width:100%;aspect-ratio:8/5;border:2px dashed #EBC7A0;border-radius:10px;overflow:hidden;background:#FFF6EA;display:grid;place-items:center;color:var(--ink);font-weight:900;transition:transform .2s ease,box-shadow .2s ease,background .2s ease;}


.passport-stamp:hover{transform:scale(1.04) rotate(-.5deg);box-shadow:var(--shadow-sm);background:#FFFAF2;}


.passport-stamp img{width:100%;height:100%;object-fit:cover;}



/* ======= 12) TOASTS ======================================================= */
#toast-container{position:fixed;bottom:20px;right:20px;display:flex;flex-direction:column;gap:10px;z-index:var(--z-toast);}


.toast{
  background:var(--surface);color:var(--ink);border-radius:10px;box-shadow:var(--shadow);
  padding:12px 16px;min-width:220px;max-width:320px;font-weight:800;display:flex;align-items:center;gap:10px;
  animation:fadeIn .3s ease, fadeOut .5s ease 3.5s forwards;border-left:6px solid var(--accent);
}


.toast.success{border-left-color:var(--success);}


.toast.error{border-left-color:var(--danger);}


.toast.info{border-left-color:var(--accent);}


@keyframes fadeOut{to{opacity:0;transform:translateY(20px);}}



/* ======= 13) FAB – Galaxy Orb =========================================== */
.orb-anchor{position:relative;}


.orb-anchor>.fab.fab-orb{position:absolute!important;bottom:20px;right:20px;z-index:120;}


@media (max-width:480px){.orb-anchor>.fab.fab-orb{bottom:14px;right:14px;}}



.fab.fab-orb{
  position:fixed!important;bottom:20px;right:20px;height:56px;width:56px;border-radius:50%;
  border:1px solid rgba(255,255,255,.35);background:rgba(17,24,39,.22);backdrop-filter:none;-webkit-backdrop-filter:none;
  color:#fff;display:inline-flex;align-items:center;justify-content:center;gap:10px;padding:0 14px;cursor:pointer;overflow:visible;
  box-shadow:0 8px 24px rgba(0,0,0,.35);z-index:100;transition:width .25s ease,border-radius .25s ease,transform .18s ease,box-shadow .2s ease;
}


.fab.fab-orb::before{
  content:"";position:absolute;inset:-2px;border-radius:inherit;background:conic-gradient(from 0deg,#6C63FF,#A78BFA,#FF8C42,#6C63FF);
  -webkit-mask:radial-gradient(circle at center,transparent 63%,#000 64%);mask:radial-gradient(circle at center,transparent 63%,#000 64%);
  opacity:.75;animation:orbSpin 12s linear infinite;pointer-events:none;
}


.fab.fab-orb::after{
  content:"";position:absolute;width:8px;height:8px;border-radius:50%;background:var(--gold);box-shadow:0 0 8px rgba(255,213,128,.85);
  top:50%;left:50%;transform-origin:-26px 0;animation:orbSatellite 6s linear infinite;pointer-events:none;opacity:.95;
}


.fab.fab-orb .orb-icon{font-size:22px;transform-origin:center;transition:transform .25s ease;}


.fab.fab-orb .orb-label{font-weight:800;letter-spacing:.2px;white-space:nowrap;opacity:0;transform:translateX(6px);transition:opacity .2s ease,transform .2s ease;}


.fab.fab-orb:hover,.fab.fab-orb:focus-visible{width:148px;border-radius:9999px;transform:translateY(-1px);box-shadow:0 14px 36px rgba(0,0,0,.45);}


.fab.fab-orb:hover .orb-label,.fab.fab-orb:focus-visible .orb-label{opacity:1;transform:translateX(0);}


.fab.fab-orb:hover .orb-icon,.fab.fab-orb:focus-visible .orb-icon{transform:rotate(90deg);}


@keyframes orbSpin{to{transform:rotate(360deg);}}


@keyframes orbSatellite{to{transform:rotate(360deg);}}


@media (max-width:480px){
  .fab.fab-orb{width:52px;height:52px;bottom:14px;right:14px;}
  .fab.fab-orb:hover,.fab.fab-orb:focus-visible{width:132px;}
}



/* Sternschnuppe (optional via JS) */
.shooting-star{
  position:absolute;left:0;top:0;width:10px;height:2px;border-radius:999px;
  background:linear-gradient(90deg,rgba(255,255,255,0) 0%,rgba(167,139,250,1) 40%,rgba(99,102,241,1) 100%);
  filter:drop-shadow(0 0 6px rgba(167,139,250,.8));pointer-events:none;opacity:0;animation:starTrail var(--dur,900ms) ease-out forwards;z-index:120;
}


@keyframes starTrail{
  0%{opacity:0;transform:translate(var(--sx),var(--sy)) rotate(var(--rot)) scaleX(.7);}
  10%{opacity:1;}
  100%{opacity:0;transform:translate(calc(var(--sx)+var(--dx)),calc(var(--sy)+var(--dy))) rotate(var(--rot)) scaleX(1);}
}


@media (prefers-reduced-motion:reduce){.fab.fab-orb::before,.fab.fab-orb::after,.shooting-star{animation:none;} .shooting-star{display:none;}}



/* ======= 14) APP VIEW / FILTERS / TABS =================================== */
.app-view{padding:1rem 0;}


.filters{
  display:flex;flex-wrap:wrap;gap:1rem;margin-bottom:1.5rem;padding:1rem;background:var(--surface);
  border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow-sm);
}


.diet-filters{display:flex;flex-wrap:wrap;gap:.5rem;}


.effort-filters{display:flex;align-items:center;gap:.75rem;margin-left:auto;}


.effort-filters span:first-child{font-weight:700;color:var(--muted);}


.effort-spoons{display:flex;gap:.25rem;}



.wp-tabs{display:flex;gap:.5rem;margin-bottom:1rem;flex-wrap:wrap;}


.tab-btn{
  padding:.6rem 1rem;border-radius:var(--radius-lg);border:1px solid var(--border);background:var(--surface);
  color:var(--ink);font-weight:800;cursor:pointer;transition:all .2s ease;
}


.tab-btn:hover{background:var(--bg);border-color:var(--accent-soft);}


.tab-btn.active{background:var(--accent);color:#fff;border-color:var(--accent);box-shadow:0 4px 12px rgba(107,107,245,.20);}


.plan-toolbar{margin-left:auto;}



#cheat-hint{
  margin:10px auto 0;max-width:var(--content-max);padding:10px 14px;border-radius:var(--radius-lg);
  background:var(--accent-soft);box-shadow:var(--shadow-sm);text-align:center;border:1px solid var(--accent);color:var(--accent);font-weight:700;
}



/* ======= 15) GLOBE-STACK & SWIPE-START BUTTON ============================ */
/* Globus-Block reserviert unten Platz für den Button */
.globe-stack{position:relative;width:100%;padding-bottom:96px;display:flex;flex-direction:column;align-items:center;gap:14px;}



/* Glow-Band unter dem Globus (Header-Effekt) */
.globe-stack::after{
  content:"";position:absolute;left:24px;right:24px;bottom:18px;height:72px;border-radius:24px;pointer-events:none;z-index:1;
  background:
    radial-gradient(120% 100% at 50% 0%, rgba(17,24,39,.10) 0%, rgba(17,24,39,0) 60%),
    linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(255,241,230,.85) 100%);
  filter:blur(8px);
}



@media (max-width:640px){
  .globe-stack{padding-bottom:88px;}
  .globe-stack::after{left:12px;right:12px;height:64px;bottom:14px;}
  #start-swipe-btn{bottom:22px;}
}



/* ======= 16) REZEPTKARTEN – kompakt & einheitlich ======================== */
:where(.recipe-card,.card.recipe,.card--recipe){
  position:relative;display:flex;flex-direction:column;min-height:390px;padding:0 20px 80px 20px;overflow:hidden;box-sizing:border-box;
}


:where(.recipe-card,.card.recipe,.card--recipe) .media,
:where(.recipe-card,.card.recipe,.card--recipe) img.recipe-cover{
  width:calc(100% + 40px);margin-left:-20px;margin-right:-20px;display:block;aspect-ratio:16/9;object-fit:cover;
}


:where(.recipe-card,.card.recipe,.card--recipe) .title{margin-top:14px;margin-bottom:6px;font-weight:900;line-height:1.2;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}


:where(.recipe-card,.card.recipe,.card--recipe) .meta{color:var(--muted);margin-bottom:10px;}


:where(.recipe-card,.card.recipe,.card--recipe) .chip-row{gap:8px;flex-wrap:wrap;margin-bottom:0;}


:where(.recipe-card,.card.recipe,.card--recipe) :where(.btn-recipe,.btn.primary,.btn.btn-primary,.open-recipe){
  position:absolute;left:24px;bottom:20px;margin:0;
}


@media (max-width:640px){
  :where(.recipe-card,.card.recipe,.card--recipe){min-height:360px;padding-bottom:72px;}
  :where(.recipe-card,.card.recipe,.card--recipe) :where(.btn-recipe,.btn.primary,.btn.btn-primary,.open-recipe){left:16px;bottom:16px;}
  :where(.recipe-card,.card.recipe,.card--recipe) .title{margin:12px 16px 6px;}
  :where(.recipe-card,.card.recipe,.card--recipe) .meta{margin:0 16px 8px;}
  :where(.recipe-card,.card.recipe,.card--recipe) .chip-row{margin:0 16px 0;}
}



/* ======= 20) RESPONSIVE =================================================== */
@media (min-width:992px){html{font-size:15px;}}


@media (max-width:900px){.container{padding:0 18px;}}


@media (max-width:700px){.center-hero{min-height:28vh;}}


@media (max-width:600px){
  .modal-backdrop{padding:10px;}
  .modal{padding:16px;width:95%;}
  .modal h3{font-size:20px;}
  .modal .actions{flex-direction:column;gap:10px;}
  .modal .actions .btn{width:100%!important;text-align:center;}
  .main-header .brand-logo{width:60px;}
  .main-header .icon-btn{width:40px;height:40px;right:20px;}
  .display-name.logo-wow{font-size:clamp(32px,7vw,48px);}
  #invite-qr-wrapper .qr-wrap{grid-template-columns:1fr;}
  body.auth-page{padding:.5rem;}
  .auth-card{padding:1rem;}
  .styled-table th:nth-child(2),.styled-table td:nth-child(2){display:none;}
}


@media (max-width:560px){.auth-card{max-width:480px;padding:20px;}}


@media (max-width:380px){.auth-card h1{font-size:22px;}}



.drawer-overlay.overlay--visible{display:block}



/* ---- Cosy Explorer: Chips nicht markierbar ---- */
.filters-toolbar,
.filters-toolbar * {
  -webkit-user-select: none !important;
  -moz-user-select: none !important;
  -ms-user-select: none !important;
  user-select: none !important;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
  caret-color: transparent; /* blinkenden Cursor verhindern */
}



/* Falls der Browser trotzdem selektiert: Auswahl unsichtbar machen */
.filters-toolbar ::selection { background: transparent; color: inherit; }


.filters-toolbar ::-moz-selection { background: transparent; color: inherit; }



/* dezentes Klick-Feedback */
.filters-toolbar .chip:active { transform: translateY(1px); }


.filters-toolbar .chip:focus { outline: none; }


.filters-toolbar .chip:focus-visible {
  outline: 2px solid var(--accent-500);
  outline-offset: 2px;
  border-radius: 999px;
}



/* === Cosy Explorer: Chip-Bar Anti-Selection === */
.filters-toolbar,
.filters-toolbar * ,
button.chip,
a.chip,
.pill,
.tag,
.filter-chip {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent; /* kein iOS-Tap-Highlight */
}



/* Klick-Feedback (dezent) */
button.chip:active,
a.chip:active,
.filter-chip:active {
  transform: translateY(1px);
}



/* Tastaturzugänglichkeit erhalten */
button.chip:focus { outline: none; }


button.chip:focus-visible {
  outline: 2px solid var(--accent-500);
  outline-offset: 2px;
  border-radius: 999px;
}


/* === Cosy Explorer Filter-Chips === */
.filters-toolbar .chip {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.4rem 0.9rem;
  border-radius: 999px;
  border: 2px solid transparent;
  background: #fff7f2;
  color: #ff914d;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.25s ease;
  box-shadow: 0 0 0 0 rgba(255,145,77,0);
}



.filters-toolbar .chip:hover {
  border-color: #ffd5b8;
  box-shadow: 0 0 6px 1px rgba(255,180,120,0.35);
}



.filters-toolbar .chip.active,
.filters-toolbar .chip:focus-visible {
  border-color: var(--accent-500, #ff914d);
  box-shadow: 0 0 10px 2px rgba(255,145,77,0.55);
  background: #fff7f2;
  color: #ff7b00;
}



/* Kein Text markierbar */
.filters-toolbar,
.filters-toolbar * {
  user-select: none !important;
  -webkit-user-select: none !important;
  -moz-user-select: none !important;
  -ms-user-select: none !important;
  -webkit-tap-highlight-color: transparent;
}



/* Optional dezentes Klick-Feedback */
.filters-toolbar .chip:active {
  transform: scale(0.97);
}



.filters-toolbar .chip.active {
  border-color: var(--accent-500, #ff914d);
  box-shadow: 0 0 10px 2px rgba(255,145,77,0.55);
  background: #fff7f2;
  color: #ff7b00;
}



.filters-toolbar .chip.active,
.filters-toolbar .chip:focus-visible {
  border-color: var(--accent-500, #ff914d);
  box-shadow: 0 0 10px 2px rgba(255,145,77,0.55);
  background: #fff7f2;
  color: #ff7b00;
  outline: none;
}





/* === Cosy Explorer: Gold-Orange Double-Ring Effekt für aktive Filter === */
.diet-filters input[type="checkbox"] + span {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  padding: .35rem .9rem;
  border-radius: 999px;
  background: transparent;
  border: 2px solid var(--chip-border, #eadccd);
  color: var(--chip-text, #ff914d);
  transition: all .25s ease;
  box-shadow: none;
  user-select: none;
  position: relative;
  overflow: hidden;
}



/* Hover: leichter goldener Schimmer */
.diet-filters input[type="checkbox"] + span:hover {
  border-color: #ffd9b0;
  box-shadow: 0 0 6px 1px rgba(255, 195, 125, 0.25);
}



/* === AUSGEWÄHLT: warmer Verlauf + goldener Glow === */
.diet-filters input[type="checkbox"]:checked + span {
  color: #ff8800;
  border-color: #ffb347; /* gold-orange */
  background: radial-gradient(circle at center,
    rgba(255, 170, 90, 0.35) 0%,
    rgba(255, 190, 120, 0.22) 60%,
    rgba(255, 210, 160, 0.1) 100%);
  box-shadow:
    0 0 0 2px rgba(255, 175, 100, 0.25),
    0 0 14px 3px rgba(255, 180, 90, 0.55),
    inset 0 0 10px 3px rgba(255, 160, 70, 0.2);
  backdrop-filter: blur(1px);
}



/* Fokus: klarer, leicht goldener Rand */
.diet-filters input[type="checkbox"]:focus-visible + span {
  outline: 2px solid rgba(255, 170, 90, 0.9);
  outline-offset: 3px;
  border-radius: 999px;
}


/* === Cosy Explorer: Abstand zwischen Swipe-Deck und Button === */
.swipe-deck,
#swipeDeck {
  margin-bottom: 4rem;   /* Luft nach unten */
  transition: margin .3s ease;
}



/* Bei kleineren Screens etwas kompakter */
@media (max-width: 768px) {
  .swipe-deck,
  #swipeDeck {
    margin-bottom: 3rem;
  }
}


/* === Cosy Explorer: harmonischer Abstand zwischen Button & Swipe-Deck === */
#swipe-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3rem; /* Hauptabstand zwischen Button und Deck */
  margin-top: 2rem;
  margin-bottom: 5rem;
  transition: all 0.3s ease;
}



#explore-btn {
   display: inline-flex;
  align-items: center;
  gap: .6rem;
  padding: .7rem 1.2rem;
  border: none;
  border-radius: 16px;
  font-weight: 800;
  letter-spacing: .2px;

  /* Warmes Cosy-Gradient */
  background: linear-gradient(135deg, #ffb347, #ff914d);
  color: #fff;

  /* softer Glow */
  box-shadow:
    0 8px 24px rgba(255,145,77,.35),
    0 0 0 1px rgba(255,255,255,.15) inset;

  transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
}



#explore-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(255,145,77,0.35);
}



#swipe-deck {
  width: 100%;
  max-width: 500px;
  margin-top: 1rem; /* kleine Sicherheitsluft */
  transition: margin 0.3s ease;
}



#swipe-deck .swipe-card {
  border-radius: 18px;
  box-shadow: 0 8px 26px rgba(0,0,0,.08);
  transition: transform .3s ease, box-shadow .3s ease;
}



#swipe-deck .swipe-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 32px rgba(0,0,0,.12);
}



/* Mobile leicht kompakter */
@media (max-width: 768px) {
  #swipe-container {
    gap: 2rem;
    margin-bottom: 3rem;
  }
}


/* Button nur im Swipe-Modus anzeigen */
#explore-btn { display: none; }



/* Button unter dem Globus, zentriert */
#start-swipe-btn {
  position: static;                /* wichtig: nicht overlayen */
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  margin: 1.25rem auto 0;          /* Abstand NACH dem Globus */
  padding: .6rem 1.1rem;
  border-radius: 14px;
  border: none;
  background: #0f172a;             /* dein dunkler Cosy-Button */
  color: #fff;
  box-shadow: 0 12px 28px rgba(15,23,42,.35);
}



/* optional: schicker Hover */
#start-swipe-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 16px 34px rgba(15,23,42,.45);
}



/* Globus-Container darf ruhig overflow:hidden behalten,
   weil der Button nun außerhalb liegt */
/* === Cosy Explorer: Weltreise-Layout & Start-Button === */

/* Stack: Globus oben, Button darunter */
.globe-stack {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.25rem;                 /* Abstand zwischen Globus und Button */
  margin-block: 0 2.5rem;       /* Luft nach unten */
}



/* Button explizit ausserhalb des Globus zentriert halten */
.globe-stack #start-swipe-btn {
  position: static;             /* wichtig: kein Overlay im Canvas */
  margin: 0 auto;
}



/* Cosy Explorer Style (höhere Spezifität, damit es alles überschreibt) */
#start-swipe-btn.btn.primary {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  padding: .7rem 1.2rem;
  border: none;
  border-radius: 16px;
  font-weight: 800;
  letter-spacing: .2px;

  /* Warmes Cosy-Gradient */
  background: linear-gradient(135deg, #ffb347, #ff914d);
  color: #fff;

  /* softer Glow */
  box-shadow:
    0 8px 24px rgba(255,145,77,.35),
    0 0 0 1px rgba(255,255,255,.15) inset;

  transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
}



/* Hover/Fokus */
#start-swipe-btn.btn.primary:hover {
  transform: translateY(-1px);
  box-shadow:
    0 12px 30px rgba(255,145,77,.45),
    0 0 0 1px rgba(255,255,255,.2) inset;
}


#start-swipe-btn.btn.primary:focus-visible {
  outline: 2px solid rgba(255,163,94,.9);
  outline-offset: 3px;
}



/* Active */
#start-swipe-btn.btn.primary:active {
  transform: translateY(0);
  filter: brightness(.98);
}



/* Mobile: etwas kompakter */
@media (max-width: 768px) {
  .globe-stack { gap: 1rem; margin-block-end: 2rem; }
  #start-swipe-btn.btn.primary { padding: .65rem 1.05rem; border-radius: 14px; }
}




/* =========================================================
   Cosy Explorer – Swipe Stack Hotfix (cards not visible / not stacked)
   - Force absolute stacking (overrides previous flow rules)
   - Enable drag on top card only (pointer-events)
   - Keep next 2 cards peeking; rest hidden by opacity
   ========================================================= */

#swipe-deck{
  position: relative !important;
  width: min(92vw, 380px) !important;
  height: clamp(420px, 65vh, 520px) !important;
  margin: 0 auto 1.5rem !important;
  perspective: 1200px !important;
  transform-style: preserve-3d !important;
  display: block !important;
  overflow: visible !important;
}



#swipe-deck .swipe-card{
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  border-radius: 20px !important;
  overflow: hidden !important;
  box-shadow: 0 12px 30px rgba(17,24,39,.14) !important;
  transform-origin: 50% 70% !important;
  transition: transform .28s ease, box-shadow .28s ease, opacity .24s ease !important;
  pointer-events: none !important;       /* Top-Karte aktiviert unten */
  touch-action: none !important;
  opacity: 1 !important;
}



/* Top = letztes Element */
#swipe-deck .swipe-card:nth-last-child(1){
  z-index: 3 !important;
  /* transform entfernt, JS steuert die Position */
  pointer-events: auto !important;
}


#swipe-deck .swipe-card:nth-last-child(2){
  z-index: 2 !important;
  opacity: .98 !important;
}


#swipe-deck .swipe-card:nth-last-child(3){
  z-index: 1 !important;
  opacity: .95 !important;
}


#swipe-deck .swipe-card:nth-last-child(n+4){
  opacity: 0 !important;  /* im Stapel, aber unsichtbar */
  pointer-events: none !important;
}



/* Medien & Text (robust) */
#swipe-deck .swipe-card img,
#swipe-deck .swipe-card .media{
  width: 100% !important; height: 60% !important; object-fit: cover !important; display: block !important;
  border-bottom: 1px solid rgba(17,24,39,.07) !important;
}


#swipe-deck .swipe-card .swipe-meta{ padding: 14px 16px 18px !important; text-align: left !important; }



/* Like/Nope Badges sichtbar beim Drag (Klassen setzt swipe.js) */
.badge{ position:absolute; top:14px; padding:8px 12px; font-weight:800; font-size:.95rem; letter-spacing:.08em; border-radius:10px; opacity:0; transform:scale(.9); transition:opacity .15s ease, transform .15s ease; pointer-events:none; }


.badge.like{ left:14px;  background:rgba(34,197,94,.12); color:#065f46; border:8px solid #10b981; }


.badge.nope{ right:14px; background:rgba(239,68,68,.12); color:#7f1d1d; border:8px solid #ef4444; }


.swipe-card.swipe-like .badge.like,
.swipe-card.swipe-nope .badge.nope{ opacity:1; transform:scale(1); }



/* Actions unter dem Deck (falls im DOM vorhanden) */
#swipe-actions{ display:flex; justify-content:center; align-items:center; gap:48px; margin-top:18px; }


#swipe-actions button{ appearance:none; border:0; background:#fff; width:64px; height:64px; border-radius:50%; box-shadow:0 10px 26px rgba(0,0,0,.12), 0 0 0 1px rgba(0,0,0,.04) inset; display:grid; place-items:center; cursor:pointer; transition: transform .2s ease, box-shadow .2s ease, filter .25s ease; }


#swipe-actions button:hover{ transform:translateY(-2px); box-shadow:0 14px 36px rgba(0,0,0,.16), 0 0 0 1px rgba(0,0,0,.04) inset; }


#swipe-actions button img, #swipe-actions button svg{ width:32px; height:32px; display:block; }


#dislike-btn{ background:#fff5f5; }

 #dislike-btn svg{ fill:#ef4444; }


#like-btn{ background:#f0fdf4; }

 #like-btn svg{ fill:#10b981; }


/* ==== Weißraum unter dem Header endgültig entfernen ==== */
/* ==== Cosy Explorer – Karten-Look für #globe-recipes ===================== */
#globe-recipes{
  display:grid !important;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 20px;
  margin-top: 16px;
}



/* Karte */
#globe-recipes .recipe-card{
  position:relative;
  display:flex; flex-direction:column;
  background: linear-gradient(180deg, #ffffff, #fffaf7);
  border: 1px solid var(--border);
  border-radius: 20px;
  overflow:hidden;
  box-shadow: 0 10px 28px rgba(17,24,39,.10);
  transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
}


#globe-recipes .recipe-card:hover{
  transform: translateY(-4px);
  box-shadow: 0 18px 42px rgba(17,24,39,.16);
  filter: saturate(1.02);
}



/* Bild */
#globe-recipes .recipe-card img{
  width:100%; aspect-ratio: 16/9; object-fit: cover; display:block;
  border-bottom: 1px solid rgba(17,24,39,.06);
}



/* Inhalt */
#globe-recipes .recipe-card-content{
  padding: 14px 16px 72px; /* Platz für Button */
}


#globe-recipes .recipe-card-content .title{
  margin: 6px 0 6px;
  font-weight: 900; line-height:1.2; font-size:1.05rem;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}


#globe-recipes .recipe-card-content .meta{
  color: var(--muted); font-size:.95rem; display:flex; gap:10px; margin-bottom:8px;
}



/* Chips */
#globe-recipes .chip-row .chip{
  display:inline-flex; align-items:center; gap:.35rem;
  padding:.35rem .7rem; border-radius:999px;
  background: var(--accent-2-soft);
  color: var(--accent-2);
  border:1px solid rgba(255,155,84,.22);
  font-weight:800; font-size:.85rem;
}



/* Button „Zum Rezept“ fest am Boden links */
#globe-recipes .open-recipe.btn{
  position:absolute; left:16px; bottom:16px; margin:0;
  border-radius:14px;
  padding:.55rem .9rem;
  box-shadow: 0 8px 24px rgba(255,145,77,.28);
}



/* Kompakt auf kleineren Screens */
@media (max-width: 520px){
  #globe-recipes{ grid-template-columns: 1fr; gap:16px; }
  #globe-recipes .recipe-card-content{ padding: 12px 14px 64px; }
}


/* ==== Cosy Fix: Hamburger- / Icon-Buttons Größe stabil halten ==== */

/* Header-Hamburger (Menü öffnen) */
.main-header #open-drawer.icon-btn{
  width: 44px; height: 44px;
  padding: 10px !important;          /* überschreibt globale Button-Padding */
  border-radius: 50%;
  display: inline-grid; place-items: center;
  line-height: 0; font-size: 0;      /* keine Text-Einflüsse */
  box-shadow: none !important;
  transform: none !important;
  flex: 0 0 44px;
}


.main-header #open-drawer.icon-btn svg{
  width: 22px; height: 22px; display: block;
}



/* Drawer-Schließen-Button konsistent */
.drawer .icon-btn{
  width: 36px; height: 36px;
  padding: 6px !important;
  display: inline-grid; place-items: center;
  line-height: 0; font-size: 0;
  box-shadow: none !important;
}


.drawer .icon-btn svg{ width: 20px; height: 20px; display:block; }



/* Keine Größenänderung bei Hover/Active/Focus */
.icon-btn:hover,
.icon-btn:active,
.icon-btn:focus,
.icon-btn:focus-visible{
  transform: none !important;
  box-shadow: none !important;
}



/* Sicherheitsnetz: globale 'button' Defaults nicht auf .icon-btn anwenden */
button.icon-btn{ padding: 0 !important; }

  /* falls ein anderes CSS später greift */

/* Optional: auf Mobile gleiche Größe beibehalten */
@media (max-width: 768px){
  .main-header #open-drawer.icon-btn{
    width: 44px; height: 44px; padding: 10px !important;
  }
}



/* ========== Cosy Explorer – Header Layout Fix (center hamburger vertically & horizontally aligned) ==========
   We switch the header to a 3-column grid. Brand (left), title/center (auto),
   hamburger icon button (right). Removes absolute positioning so it's always centered.
   This is an override block placed at the end of the CSS for higher specificity.
*/
.main-header{
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  height: 110px;
  padding: 0 30px;
}



.main-header .brand{
  position: static !important;
  left: auto !important;
  top: auto !important;
  transform: none !important;
  justify-self: start;
}



.main-header .icon-btn{
  position: static !important;
  top: auto !important;
  right: auto !important;
  transform: none !important;
  justify-self: end;
  /* keep shape stable */
  width: 44px;
  height: 44px;
  display: inline-grid;
  place-items: center;
  border-radius: 50%;
}



/* Mobile: keep smaller size and paddings consistent */
@media (max-width: 600px){
  .main-header{ padding: 0 20px; }
  .main-header .icon-btn{ width: 40px; height: 40px; }
}



/* ==== Cosy Explorer – Header Text mittig zentrieren ==== */

/* Das Grid bekommt explizit 3 Spalten:
   - auto (Logo)
   - 1fr (Text)
   - auto (Hamburger)
   Die mittlere Spalte wird mit justify-self:center ausbalanciert.
*/
.main-header {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  justify-items: center;
  text-align: center;
  height: 110px;
  padding: 0 40px;
}



/* Brand links fixieren */
.main-header .brand {
  justify-self: start;
}



/* Titel exakt zentrieren, unabhängig von Logobreite */
.main-header .display-name.logo-wow {
  justify-self: center;
  margin: 0 auto;
}



/* Hamburger-Icon stabil rechts */
.main-header .icon-btn {
  justify-self: end;
  width: 44px;
  height: 44px;
  display: inline-grid;
  place-items: center;
  border-radius: 50%;
  padding: 10px !important;
}



/* Mobile: leicht engerer Abstand */
@media (max-width: 600px) {
  .main-header {
    padding: 0 24px;
  }
  .main-header .icon-btn {
    width: 40px;
    height: 40px;
  }
}


/* ========= Verwaltung: Container & Abstände ========= */
.content-narrow{
  max-width: 1024px;
  margin: 0 auto;
  padding-inline: 22px;            /* verhindert Randkleben – Überschriften wirken nicht mehr zu weit rechts */
}



/* Karten-Look konsistent */
.cosy-card, .card{
  background: linear-gradient(180deg, #fff, rgba(255,255,255,.94));
  border: 1px solid rgba(17,24,39,.06);
  border-radius: 18px;
  box-shadow: 0 10px 28px rgba(17,24,39,.10);
  padding: 16px;
}



/* Sektionstitel */
.page-title{
  font-size: clamp(22px, 3vw, 34px);
  font-weight: 900;
  letter-spacing: .2px;
  margin: 2px 0 12px;
}


.card-title{
  font-size: clamp(18px, 2.2vw, 22px);
  font-weight: 800;
  margin: 2px 0 12px;
}



/* Hilfsklassen */
.stack-xs > * + *{ margin-top: 6px; }


.stack-s  > * + *{ margin-top: 10px; }


.stack-m  > * + *{ margin-top: 16px; }


.stack-l  > * + *{ margin-top: 22px; }



.grid-2{
  display:grid; grid-template-columns: 1fr 1fr; gap: 16px;
}


@media (max-width: 800px){ .grid-2{ grid-template-columns: 1fr; } }



.grid-responsive-form{
  display:grid; grid-template-columns: 1fr auto; gap: 12px;
}


@media (max-width: 560px){ .grid-responsive-form{ grid-template-columns: 1fr; } }



/* ========= Buttons – Cosy-Farben ========= */
:root{
  --yn-accent: var(--ce-accent, #f97316);         /* Cosy Orange */
  --yn-accent-2: color-mix(in oklab, var(--yn-accent) 78%, #000);
}



.btn{
  border-radius: 14px;
  border: 1px solid rgba(17,24,39,.08);
  padding: .6rem .9rem;
  font-weight: 700;
  transition: transform .15s ease, box-shadow .15s ease, filter .2s ease, background .2s ease;
}


.btn.small{ padding: .5rem .75rem; font-size: .92rem; border-radius: 12px; }


.btn.w-full{ width: 100%; }



.btn.primary{
  background: var(--yn-accent);
  border-color: var(--yn-accent);
  color: #fff;
  box-shadow: 0 8px 24px color-mix(in oklab, var(--yn-accent) 35%, transparent);
}


.btn.primary:hover{ transform: translateY(-1px); filter: brightness(1.05); }


.btn.primary:active{ transform: translateY(0); filter: brightness(.98); }



.btn.secondary{
  background: #fff;
  color: color-mix(in oklab, var(--yn-accent) 35%, #111827);
  border-color: color-mix(in oklab, var(--yn-accent) 22%, #e5e7eb);
  box-shadow: 0 4px 14px rgba(17,24,39,.06);
}


.btn.secondary:hover{ transform: translateY(-1px); }



.btn.ghost{
  background: transparent;
  color: var(--yn-accent);
  border-color: color-mix(in oklab, var(--yn-accent) 24%, transparent);
}


.btn.ghost:hover{
  background: color-mix(in oklab, var(--yn-accent) 10%, transparent);
}



.btn.danger{
  background: color-mix(in oklab, #ef4444 92%, white 8%);
  border-color: #ef4444;
  color:#fff;
  box-shadow: 0 8px 22px rgba(239,68,68,.22);
}


.btn.danger:hover{ filter: brightness(1.03); }



/* ========= QR-Bereich ========= */
.qrcode-box{
  display:grid; place-items:center;
  width: 220px; height: 220px;
  background: #fff;
  border: 1px dashed color-mix(in oklab, var(--yn-accent) 35%, #e5e7eb);
  border-radius: 16px;
  box-shadow: 0 10px 24px rgba(17,24,39,.08);
}


.grid-responsive-qr{
  display:grid; grid-template-columns: 220px 1fr; gap: 16px; align-items: start;
}


@media (max-width: 700px){ .grid-responsive-qr{ grid-template-columns: 1fr; } }




/* ========= Listen ========= */
.list-stacked{ list-style:none; margin:0; padding:0; }


.list-stacked > li{
  background:#fff;
  border: 1px solid rgba(17,24,39,.06);
  border-radius: 14px;
  padding: 10px 12px;
  box-shadow: 0 6px 18px rgba(17,24,39,.06);
}


.list-stacked > li + li{ margin-top:10px; }



/* Verwaltung: Avatar-Karte wirklich mittig (gilt nur für die 1. Karte im Main) */
main.content > section.card.cosy-card.stack-m:first-of-type .grid-2{
  display: grid !important;
  grid-template-columns: 1fr !important; /* 1 Spalte statt 2 */
  justify-items: center !important;
  align-items: center !important;
  text-align: center !important;
  gap: 8px !important;
}



/* Avatar-Block & Bild sauber zentrieren */
main.content > section.card.cosy-card.stack-m:first-of-type #household-avatar-hero{
  display: grid !important;
  justify-items: center !important;
  gap: 6px;
}


main.content > section.card.cosy-card.stack-m:first-of-type #household-avatar-img{
  display: block !important;
  margin: 0 auto !important;
}


main.content > section.card.cosy-card.stack-m:first-of-type #household-avatar-hero .btn{
  margin-left: auto !important;
  margin-right: auto !important;
}



/* Titel neben/unter dem Bild mittig */
main.content > section.card.cosy-card.stack-m:first-of-type #household-name-title{
  text-align: center !important;
  margin-top: 0 !important;
}


/* ==== Verwaltung: Avatar-Karte neu anordnen (Titel oben, Bild mittig darunter, Button darunter) ==== */
section.card.cosy-card.stack-m {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 0;
}



/* Haushaltsname ganz oben mittig */
#household-name-title {
  order: 1;
  font-weight: 800;
  font-size: 1.3rem;
  margin-bottom: 12px;
  text-align: center;
}



/* Avatar mittig darunter */
#household-avatar-hero {
  order: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
}



#household-avatar-img {
  display: block;
  margin: 0 auto;
  border-radius: 18px;
  box-shadow: 0 10px 24px rgba(17,24,39,.1);
}



/* Button unter dem Bild */
#household-avatar-hero .btn {
  order: 3;
  margin: 4px auto 0;
}



/* Das alte Grid-Layout innerhalb der Karte neutralisieren */
section.card.cosy-card.stack-m .grid-2 {
  display: contents;
}


/* --- Verwaltung: Avatar-Block Feinschliff --- */
#household-avatar-hero{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap: 0;
  padding-inline:8px; /* Abstand zum Kartenrand */
}



#household-avatar-img{
  display:block;
  width:100%;
  max-width:340px;            /* Bild wird nie zu breit */
  border-radius:18px;
  box-shadow:0 10px 24px rgba(17,24,39,.10);
  margin:0 auto;              /* sicher mittig */
}



/* Button unter dem Bild */
#btn-remove-avatar{
  display:inline-flex;        /* sicher sichtbar */
  margin-top:6px;
  align-self:center;
}



/* optional: dezenter Stil für Entfernen-Button */
#btn-remove-avatar.btn{
  background:#fff;
  color:#d9463e;
  border-color:#f3b0aa;
}


#btn-remove-avatar.btn:hover{
  filter:brightness(1.02);
  box-shadow:0 8px 22px rgba(217,70,62,.18);
}




/* ======================================================================
   Cosy Explorer – Recipe Cards Visual Polish (Symmetric gutters, cleaner look)
   - Exact equal left/right spacing via card padding
   - Remove image drop-shadow (looked like extra margin)
   - Radius math: card 20px -> inner image 18px feels aligned
   - Keep height/aspect as-is
   ====================================================================== */
:root{
  --rc-gutter: 18px;  /* equal left/right gutter */
  --rc-radius: 18px;  /* inner image radius (card is 20px) */
  --rc-top: 14px;
  --rc-bottom: 10px;
}



/* Card content gutters */
:where(.recipe-card,.card.recipe,.card--recipe){
  padding-inline: var(--rc-gutter) !important;
}



/* First media/image gets full content width, no side margins */
:where(.recipe-card,.card.recipe,.card--recipe) > img:first-child,
:where(.recipe-card,.card.recipe,.card--recipe) .media{
  width: 100% !important;
  margin: var(--rc-top) 0 var(--rc-bottom) 0 !important;
  border-radius: var(--rc-radius) !important;
  display: block !important;
  object-fit: cover !important;
  object-position: center var(--recipe-image-focus-y, 50%) !important;
  aspect-ratio: 16 / 9 !important;
  border: 0 !important;
  box-shadow: none !important;         /* remove dark halo that faked uneven spacing */
  background: #f8f5f2;                 /* subtle placeholder only */
}



/* Neutralize earlier "edge-to-edge" style that used negative margins */
:where(.recipe-card,.card.recipe,.card--recipe) img.recipe-cover{
  width: 100% !important;
  margin: var(--rc-top) 0 var(--rc-bottom) 0 !important;
}



/* Globe list adopts the same gutters */
#globe-recipes .recipe-card{ padding-inline: var(--rc-gutter) !important; }


#globe-recipes .recipe-card img{ border-bottom: 0 !important; box-shadow: none !important; border-radius: var(--rc-radius) !important; }


/* === Cosy Explorer – Rezeptkarten kompakter machen === */
#globe-recipes .recipe-card {
  min-height: auto !important;
  padding-bottom: 56px !important;   /* vorher 72px – reduziert Lücke */
}



/* Inhalt etwas dichter */
#globe-recipes .recipe-card-content {
  padding: 12px 14px 56px !important; /* unten Platz für Button, aber weniger als vorher */
}



/* Button leicht nach oben rücken */
#globe-recipes .open-recipe.btn {
  bottom: 12px !important;           /* vorher 16px */
  padding: .5rem .85rem !important;
}



/* Chips enger setzen */
#globe-recipes .chip-row {
  gap: 6px !important;
  margin-bottom: 4px !important;
}


/* === Cosy Explorer: "Zum Rezept" Button – Cosy Look + Hover === */
:where(.open-recipe.btn){
  background: linear-gradient(135deg, #111827, #1f2937);
  color:#fff; font-weight:900;
  border:none; border-radius:14px;
  padding:.55rem .95rem;
  box-shadow:0 10px 26px rgba(17,24,39,.24);
  transition:transform .16s ease, box-shadow .18s ease, filter .16s ease;
}


:where(.open-recipe.btn):hover{ transform:translateY(-1px); box-shadow:0 14px 34px rgba(17,24,39,.30); }


:where(.open-recipe.btn):active{ transform:translateY(0); filter:brightness(.98); }


:where(.open-recipe.btn):focus-visible{ outline:none; box-shadow:0 0 0 4px rgba(107,107,245,.28); }



/* Kompakter Bodenabstand in Karten */
#globe-recipes .open-recipe.btn{ bottom:12px; }



/* === Cosy Explorer: Rating Stars === */
#rating-backdrop .modal {
  border-radius: 18px;
  box-shadow:
    0 10px 24px rgba(0,0,0,.08),
    0 36px 72px rgba(99,102,241,.16);
}



#rating-modal .rating-body { padding: 16px; }


#rating-modal h3 { margin: 0 0 8px; }


#rating-modal .muted { color: #6b7280; margin: 0 0 14px; }



/* Stern-Gruppe */
#rating-modal .stars-picker,
#rating-stars { /* fallback falls alter id-Name irgendwo benutzt wird */
  display: flex;
  gap: 14px;
  align-items: center;
  justify-content: flex-start;
}



/* Stern-Button (idle) */
#rating-modal .star,
#rating-stars .star {
  --ce-accent: var(--ce-accent, #8b5cf6);
  --bg: color-mix(in oklab, var(--ce-accent) 8%, #fff);
  --ring: color-mix(in oklab, var(--ce-accent) 28%, transparent);
  appearance: none;
  border: 0;
  cursor: pointer;
  font-size: 22px;           /* Symbolgröße */
  line-height: 1;
  width: 64px; height: 48px; /* Pillenform */
  border-radius: 9999px;
  display: grid; place-items: center;
  background: radial-gradient(120% 120% at 30% 20%, #fff 0%, var(--bg) 100%);
  box-shadow:
    0 2px 8px rgba(0,0,0,.06),
    0 8px 20px rgba(0,0,0,.06);
  transition: transform .15s ease, box-shadow .2s ease, background .2s ease, scale .15s ease, filter .2s ease;
}



/* Hover/Focus */
#rating-modal .star:hover,
#rating-modal .star:focus-visible,
#rating-stars .star:hover,
#rating-stars .star:focus-visible {
  outline: none;
  transform: translateY(-1px);
  box-shadow:
    0 4px 14px rgba(0,0,0,.08),
    0 14px 30px color-mix(in oklab, var(--ce-accent) 20%, transparent);
}



/* Aktive Sterne (<= gewählter Wert): lila Verlauf + sanfter Glow */
#rating-modal .star.active,
#rating-stars .star.active {
  background:
    linear-gradient(90deg, #6366f1, #8b5cf6 60%, #a78bfa),
    radial-gradient(120% 120% at 30% 20%, #fff 0%, color-mix(in oklab, var(--ce-accent) 14%, #fff) 100%);
  color: #fff;
  text-shadow: 0 0 6px rgba(255,255,255,.5);
  box-shadow:
    0 6px 16px rgba(99,102,241,.22),
    0 18px 42px rgba(139,92,246,.22);
}



/* Der aktuell gewählte Stern (aria-checked=true): Ring/Highlight */
#rating-modal .star[aria-checked="true"],
#rating-stars .star[aria-checked="true"] {
  box-shadow:
    0 0 0 2px #fff inset,
    0 0 0 2px color-mix(in oklab, var(--ce-accent) 60%, transparent),
    0 12px 32px rgba(139,92,246,.28);
  transform: translateY(-1px) scale(1.02);
}



/* Leichtes "pop" beim Aktivieren (wenn JS Klasse toggelt) */
@keyframes cosy-pop {
  0%   { transform: scale(.96); }
  60%  { transform: scale(1.04); }
  100% { transform: scale(1); }
}


#rating-modal .star.active { animation: cosy-pop .18s ease; }



/* Buttons unten (nur kleiner Feinschliff) */
#rating-backdrop .btn.primary[disabled],
#rating-backdrop .btn[disabled] {
  opacity: .6;
  cursor: not-allowed;
  filter: grayscale(.15);
}


/* === Cosy Explorer: kompakte, sichtbare Sterne === */

/* 5 feste Spalten – passt immer */
#rating-modal #stars-picker {
  display: grid;
  grid-template-columns: repeat(5, 44px);
  gap: 10px;
  justify-content: center;
}



/* Basestyle der Stern-Buttons (kompakt) */
#rating-modal #stars-picker .star {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  font-size: 20px;       /* Icon-Größe */
  line-height: 1;
  border: 0;
  cursor: pointer;

  color: #111827;        /* dunkler Stern im Idle */
  background: rgba(139, 92, 246, 0.08);
  box-shadow: 0 2px 8px rgba(0,0,0,.06);
  transition: transform .15s ease, box-shadow .2s ease, background .2s ease, color .2s ease;
}



/* Hover / Focus */
#rating-modal #stars-picker .star:hover,
#rating-modal #stars-picker .star:focus-visible {
  outline: none;
  transform: translateY(-1px);
  box-shadow:
    0 4px 14px rgba(0,0,0,.08),
    0 14px 30px rgba(139,92,246,.18);
}



/* Aktiv (alle Sterne <= Auswahl) – bunter Button, weißes Icon */
#rating-modal #stars-picker .star.active {
  background: linear-gradient(180deg, #7c3aed, #8b5cf6 60%, #a78bfa);
  color: #fff;           /* ★ bleibt sichtbar */
}



/* Der ausgewählte Stern (radio-like Ring) */
#rating-modal #stars-picker .star[aria-checked="true"] {
  box-shadow:
    0 0 0 2px #fff inset,
    0 0 0 2px rgba(124,58,237,.5),
    0 10px 26px rgba(124,58,237,.30);
  transform: translateY(-1px) scale(1.02);
}



/* Kleiner „pop“ bei Aktivierung */
@keyframes cosy-pop { 0%{transform:scale(.96)} 60%{transform:scale(1.04)} 100%{transform:scale(1)} }


#rating-modal #stars-picker .star.active { animation: cosy-pop .16s ease; }


/* === Cosy Explorer Fix: Sterne zentrieren === */
#rating-modal #stars-picker .star {
  display: grid;             /* sorgt für echtes Centering */
  place-items: center;       /* vertikal + horizontal zentriert */
  line-height: 1;            /* kein zusätzlicher Textabstand */
  padding: 0;                /* entfernt evtl. Browser-Defaults */
}


/* ===== Fix: Buttons in Mitgliederliste nicht klickbar ===== */

/* Falls Listeneinträge ein Overlay/Glow haben: keine Pointer-Events darauf */
#household-members-list li::before,
#household-members-list li::after {
  pointer-events: none;
}



/* Buttons sicher über allen Zier-Layern platzieren */
#household-members-list li .btn {
  position: relative;
  z-index: 2;
  pointer-events: auto;
}



/* Falls eine "stretched link" o.ä. die ganze Zeile belegt: deaktivieren */
#household-members-list li a.stretched-link,
#household-members-list li .row-click-overlay {
  pointer-events: none !important;
}



/* Layout der Zeile + Actions rechts stabilisieren */
#household-members-list li {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 18px;
  border-radius: 16px;
}



#household-members-list li .member-actions {
  display: flex;
  gap: 10px;
  flex-shrink: 0;
}



/* Sicherheit: Deko-Layer auf Karten fangen keine Klicks */
.cosy-card::before,
.cosy-card::after {
  pointer-events: none;
}


/* ---- Cosy Nav Sheet (verwaltung.html) ---- */
body.nav-open { overflow: hidden; }



.cosy-nav-sheet[aria-hidden="true"] { display: none; }


.cosy-nav-sheet {
  position: fixed; inset: 0; z-index: 60;
  display: grid; place-items: stretch;
  background: rgba(17,24,39,.28); backdrop-filter: blur(2px);
}


.cosy-nav-panel {
  margin-left: auto;
  width: min(88vw, 360px);
  height: 100dvh;
  border-radius: 0;
  padding: 18px;
  display: grid;
  grid-template-rows: auto 1fr;
  gap: 16px;
  animation: cosy-slide-in .18s ease-out;
}


.cosy-nav-panel .icon-btn { justify-self: end; }


.cosy-nav-panel nav a {
  display: block;
  padding: 10px 12px;
  border-radius: 12px;
  font-weight: 600;
}


.cosy-nav-panel nav a:hover { background: rgba(17,24,39,.06); }


@keyframes cosy-slide-in {
  from { transform: translateX(12px); opacity: 0; }
  to   { transform: translateX(0);    opacity: 1; }
}


.cosy-nav-sheet{
  position: fixed; inset: 0; z-index: 60;
  /* weniger Blur + etwas dunklerer Dimmer für Kontrast */
  background: rgba(17,24,39,.38);
  backdrop-filter: blur(1.5px);
  -webkit-backdrop-filter: blur(1.5px);
  display: grid; place-items: stretch;
}



.cosy-nav-panel{
  margin-left: auto;
  width: min(92vw, 380px);
  height: 100dvh;
  padding: 20px 18px;
  border-radius: 0;
  /* card look */
  background: #fff;
  border: 1px solid rgba(17,24,39,.06);
  box-shadow: 0 22px 50px rgba(17,24,39,.28);
  display: grid; grid-template-rows: auto 1fr;
  gap: 12px;
  animation: cosy-slide-in .16s ease-out;
}


.cosy-nav-panel .icon-btn{
  justify-self: end;
  width: 36px; height: 36px; borde
/* === Cosy Drawer – Feinschliff & Fixes === */
body.nav-open { overflow: hidden; }

#cosy-nav-sheet[aria-hidden="true"] { display: none; }
#cosy-nav-sheet{
  position: fixed; inset: 0; z-index: 100;          /* sicher über Header */
  background: rgba(17,24,39,.32);                   /* etwas dunkler, weniger milchig */
  backdrop-filter: blur(1.2px);
  -webkit-backdrop-filter: blur(1.2px);
  display: grid; place-items: stretch;
}

#cosy-nav-sheet .cosy-nav-panel{
  margin-left: auto;
  width: clamp(280px, 38vw, 360px);                 /* schmaler, responsive */
  height: 100dvh;
  padding: 16px 14px;
  border-radius: 0;
  background: #fff;
  border-left: 1px solid rgba(17,24,39,.06);
  box-shadow: 0 22px 50px rgba(17,24,39,.28);
  display: grid; grid-template-rows: auto 1fr;
  gap: 8px;
  animation: cosy-slide-in .16s ease-out;
}

#cosy-nav-close{
  justify-self: end;
  width: 36px; height: 36px; border-radius: 999px;
  display: grid; place-items: center;
  background: rgba(17,24,39,.04);
}
#cosy-nav-close:hover{ background: rgba(17,24,39,.08); }

#cosy-nav-sheet nav{
  overflow-y: auto;
  padding: 4px 2px;
}
#cosy-nav-sheet nav a{
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px;                               /* kompakter */
  border-radius: 12px;
  font-weight: 700;
  color: #1f2937;
  text-decoration: none;
  line-height: 1.2;
  transition: background .15s ease, transform .05s ease;
}
#cosy-nav-sheet nav a + a{
  box-shadow: inset 0 1px 0 rgba(17,24,39,.05);     /* dezente Trennerlinie */
}
#cosy-nav-sheet nav a:hover{ background: rgba(99,102,241,.08); }
#cosy-nav-sheet nav a:active{ transform: translateY(1px); }

#cosy-nav-sheet nav a.active{
  background: linear-gradient(180deg, rgba(99,102,241,.13), rgba(99,102,241,.08));
  box-shadow: inset 0 0 0 1px rgba(99,102,241,.25), 0 6px 18px rgba(99,102,241,.12);
  color: #4f46e5;
}

@keyframes cosy-slide-in{
  from{ transform: translateX(12px); opacity: .8; }
  to  { transform: translateX(0);    opacity: 1;  }
}

/* iOS/Safari Scroll-Gummiband entschärfen */
#cosy-nav-sheet .cosy-nav-panel, #cosy-nav-sheet nav { -webkit-overflow-scrolling: touch; }
/* Fallback Basics für Drawer/Overlay (nicht style-zerstörend) */
#drawer-overlay, #nav-overlay {
  position: fixed; inset: 0; z-index: 90;
  background: rgba(17,24,39,.32);
  backdrop-filter: blur(1.2px);
}

.app-drawer, #nav-drawer {
  position: fixed; top: 0; right: 0; height: 100dvh;
  width: min(360px, 92vw);
  background: #fff; z-index: 100;
  transform: translateX(100%);
  transition: transform .18s ease;
  will-change: transform;
}

.app-drawer.is-open, #nav-drawer.is-open { transform: translateX(0); }
[aria-hidden="true"].app-drawer, [aria-hidden="true"]#nav-drawer { visibility: visible; } /* nur für Aria-Fall */

.drawer-open { overflow: hidden; }

/* === Rezeptkarten: Bewerten ausblenden, Details nach unten === */
.recipe-card .btn-rate,
.recipe-card .button-rate,
.recipe-card .rate-button {
  display: none !important; /* nur in Kartenansicht */
}

/* Karteninhalt vertikal aufspannen, damit wir den Details-Button nach unten drücken */
.recipe-card .card-body {
  display: flex;
  flex-direction: column;
}

/* Details-Button an den Kartenboden setzen und wie Haupt-CTA stylen */
.recipe-card .btn-details,
.recipe-card .button-details,
.recipe-card .details-button {
  margin-top: auto;                 /* rutscht nach unten */
  align-self: stretch;              /* volle Breite in der Karte */
  text-align: center;
  font-weight: 800;
  padding: 14px 18px;
  border-radius: 16px;
  background: var(--cosy-primary, #1f2a44);
  color: #fff;
  box-shadow: 0 10px 28px rgba(17,24,39,.12);
}
/* === Rezeptkarten Feinanpassung === */
.recipe-card {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 0;
}

/* Innenabstand & optische Balance */
.recipe-card .card-body {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 18px 20px 20px 24px; /* links etwas mehr Luft */
}

/* Titel & Text leicht eingerückt */
.recipe-card h3,
.recipe-card .recipe-title,
.recipe-card .tags,
.recipe-card .rating,
.recipe-card .meta-info {
  margin-left: 4px; /* gleichmäßiger Abstand vom Rand */
}

/* Details-Button unten links fixieren */
.recipe-card .btn-details,
.recipe-card .button-details,
.recipe-card .details-button {
  align-self: flex-start;       /* links ausrichten */
  margin-top: auto;             /* immer unten */
  padding: 10px 18px;
  border-radius: 14px;
  background: var(--cosy-primary, #1f2a44);
  color: #fff;
  font-weight: 700;
  box-shadow: 0 8px 22px rgba(17,24,39,.12);
  transition: all 0.25s ease;
}

/* Hover-Effekt */
.recipe-card .btn-details:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 26px rgba(17,24,39,.18);
}

/* Kartenhöhe angleichen – sorgt für gleiche Button-Höhe */
.recipe-card {
  min-height: 460px; /* ggf. anpassen an dein Design */
}

/* ==== Cosy Explorer – Recipe Card Fix Pack (2025-10-19) ==== */
/* Nur Kartenansicht: "Jetzt bewerten" ausblenden */
.recipe-card .btn-rate,
.recipe-card .button-rate,
.recipe-card .rate-button{
  display:none !important;
}

/* Card Layout für konsistente CTA-Position */
.recipe-card{
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  min-height:460px; /* ggf. anpassen */
}

/* Innenabstand der Card harmonisieren */
.recipe-card .card-body{
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  padding:18px 20px 22px 24px; /* links etwas mehr Luft */
}

/* Titel/Meta leicht vom linken Rand abrücken */
.recipe-card h3,
.recipe-card .recipe-title,
.recipe-card .tags,
.recipe-card .rating,
.recipe-card .meta-info{
  margin-left:4px;
}

/* Details-Button unten links als Primär-CTA */
.recipe-card .btn-details,
.recipe-card .button-details,
.recipe-card .details-button{
  align-self:flex-start;      /* links ausrichten */
  margin-top:auto;            /* nach unten drücken */
  padding:12px 18px;
  border-radius:16px;
  background:var(--cosy-primary,#1f2a44);
  color:#fff;
  font-weight:800;
  text-decoration:none;
  box-shadow:0 10px 28px rgba(17,24,39,.12);
  transition:transform .2s ease, box-shadow .2s ease;
}
.recipe-card .btn-details:hover,
.recipe-card .button-details:hover,
.recipe-card .details-button:hover{
  transform:translateY(-2px);
  box-shadow:0 14px 34px rgba(17,24,39,.18);
}

/* Fallback: alte absolute-CTA-Positionen neutralisieren */
:where(.recipe-card,.card.recipe,.card--recipe) 
  :where(.btn-recipe,.open-recipe,.btn.btn-primary){
  position:static !important;
  left:auto !important; right:auto !important; bottom:auto !important; top:auto !important;
  margin:0 !important;
}
/* ==== End Fix Pack ==== */
/* === Cosy Explorer – Recipe Cards: Layout & CTA Stabilisierung === */

/* 0) Grundlayout: Karte = Spalten-Flex, Bild oben fix, Body füllt Rest */
.recipe-card {
  display: flex !important;
  flex-direction: column !important;
  height: 100% !important;
}

/* 1) Medienbereich angleichen (unabhängig vom HTML-Wrapper) */
.recipe-card .card-media,
.recipe-card .media,
.recipe-card > img,
.recipe-card .card-media img,
.recipe-card .media img {
  width: 100% !important;
  height: 240px !important;              /* einheitliche Bildhöhe */
  object-fit: cover !important;
  display: block !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  overflow: hidden !important;
}

/* 2) Body: mehr Luft + füllt die Höhe */
.recipe-card .card-body,
.recipe-card .content,
.recipe-card .card-content {
  flex: 1 1 auto !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 12px !important;
  padding: 26px 32px 28px 32px !important;  /* rechts/links großzügiger */
}

/* 3) Typo/Meta minimal einrücken (optisch bündig mit Button) */
.recipe-card h3,
.recipe-card .recipe-title,
.recipe-card .tags,
.recipe-card .rating,
.recipe-card .meta-info,
.recipe-card .diet,
.recipe-card .labels {
  margin-left: 4px !important;
}

/* 4) ALTE CTAs neutralisieren (absolute Positionen, Primärbutton etc.) */
.recipe-card :where(.btn-recipe,.open-recipe,.btn.btn-primary,.button-primary) {
  position: static !important;
  inset: auto !important;
  margin: 0 !important;
  background: none !important;
  border: none !important;
  box-shadow: none !important;
  color: inherit !important;
  padding: 0 !important;
}

/* 5) Cosy-CTA "Details": unten links, konsistenter Look */
.recipe-card .btn-details,
.recipe-card .button-details,
.recipe-card .details-button {
  align-self: flex-start !important;      /* linksbündig */
  margin-top: auto !important;            /* immer nach unten */
  margin-left: 4px !important;            /* bündig mit Text */
  padding: 12px 20px !important;
  border-radius: 16px !important;
  border: 1px solid rgba(31,42,68,.15) !important;
  background: var(--cosy-primary, #1f2a44) !important;
  color: #fff !important;
  font-weight: 800 !important;
  line-height: 1 !important;
  text-decoration: none !important;
  box-shadow: 0 10px 28px rgba(17,24,39,.12) !important;
  transition: transform .2s ease, box-shadow .2s ease !important;
}
.recipe-card .btn-details:hover,
.recipe-card .button-details:hover,
.recipe-card .details-button:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 14px 34px rgba(17,24,39,.18) !important;
}

/* 6) "Bewerten" nur in Kartenansicht verstecken */
.recipe-card .btn-rate,
.recipe-card .button-rate,
.recipe-card .rate-button {
  display: none !important;
}
/* === Cosy Explorer – Recipe Card: thumb-Fix ================================= */

/* Karte bleibt Spalten-Flex */
.recipe-card{
  display:flex !important;
  flex-direction:column !important;
  height:100% !important;
}

/* thumb innerhalb der Karte neutralisieren & als Bildrahmen verwenden */
.recipe-card .thumb{
  flex:0 0 240px !important;          /* einheitliche Bildhöhe */
  position:relative !important;
  margin:0 !important;
  padding:0 !important;
  overflow:hidden !important;
  border-top-left-radius:18px !important;
  border-top-right-radius:18px !important;
  background:transparent !important;
}

/* Bild sauber einpassen */
.recipe-card .thumb > img{
  width:100% !important;
  height:100% !important;
  display:block !important;
  object-fit:cover !important;
}

/* Body füllt den Rest und schafft Luft nach innen */
.recipe-card .card-body,
.recipe-card .content,
.recipe-card .card-content{
  flex:1 1 auto !important;
  display:flex !important;
  flex-direction:column !important;
  gap:12px !important;
  padding:26px 32px 28px 32px !important; /* großzügige Ränder */
}

/* Text & Meta etwas vom Rand weg */
.recipe-card h3,
.recipe-card .recipe-title,
.recipe-card .tags,
.recipe-card .rating,
.recipe-card .meta-info,
.recipe-card .diet,
.recipe-card .labels{
  margin-left:6px !important;
  margin-right:6px !important;
}

/* alte absolute CTA/Primärbutton-Regeln aushebeln */
.recipe-card :where(.btn-recipe,.open-recipe,.btn.btn-primary,.button-primary){
  position:static !important;
  inset:auto !important;
  margin:0 !important;
  background:none !important;
  border:none !important;
  box-shadow:none !important;
  color:inherit !important;
  padding:0 !important;
}

/* Cosy-CTA "Details": unten links, konsistent */
.recipe-card .btn-details,
.recipe-card .button-details,
.recipe-card .details-button{
  align-self:flex-start !important;
  margin-top:auto !important;
  margin-left:6px !important;          /* bündig mit Textkante */
  padding:12px 20px !important;
  border-radius:16px !important;
  border:1px solid rgba(31,42,68,.15) !important;
  background:var(--cosy-primary,#1f2a44) !important;
  color:#fff !important;
  font-weight:800 !important;
  line-height:1 !important;
  text-decoration:none !important;
  box-shadow:0 10px 28px rgba(17,24,39,.12) !important;
  transition:transform .2s ease, box-shadow .2s ease !important;
}
.recipe-card .btn-details:hover,
.recipe-card .button-details:hover,
.recipe-card .details-button:hover{
  transform:translateY(-2px) !important;
  box-shadow:0 14px 34px rgba(17,24,39,.18) !important;
}

/* Bewerten-Button in Kartenansicht ausblenden */
.recipe-card .btn-rate,
.recipe-card .button-rate,
.recipe-card .rate-button{
  display:none !important;
}
/* === Ende thumb-Fix ========================================================= */
/* === Anpassung für Rezeptkarten (Version 2) === */

.recipe-card-content {
  /* Grund-Setup bleibt gleich: Einrücken und als Flex-Container definieren */
  padding: 16px 24px 24px;
  display: flex;
  flex-direction: column;
  flex-grow: 1;

  /* NEU: Diese Eigenschaft verteilt den Platz zwischen den Elementen.
     Es schiebt das erste Kind (deinen Textblock) nach oben und
     das letzte Kind (den Button) nach ganz unten. */
  justify-content: space-between;
}
/* === Cosy Explorer · Rezept-Modal: Karten wie in Globus-Ansicht === */

/* Scope: greift im Modal – egal ob #recipesModal, .recipe-modal oder .modal--recipes */
:where(#recipesModal, .recipe-modal, .modal--recipes) .recipe-card{
  display:flex;
  flex-direction:column;
  height:100%;
  background: linear-gradient(180deg,#fff,rgba(255,255,255,.94));
  border:1px solid rgba(17,24,39,.06);
  border-radius:24px;
  box-shadow: 0 16px 48px rgba(17,24,39,.12);
  overflow:hidden;
}

/* Bild wie im Screenshot (runde Ecken, gleiche Höhe) */
:where(#recipesModal, .recipe-modal, .modal--recipes) .recipe-card :where(.thumb,.card-media){
  height:220px;
  padding:20px 20px 0 20px;           /* innenliegend, damit Bild runde Ecken hat */
}
:where(#recipesModal, .recipe-modal, .modal--recipes) .recipe-card :where(.thumb>img,.card-media img){
  width:100%;
  height:100%;
  display:block;
  object-fit: cover;
  border-radius:20px;
}

/* Body: großzügige Abstände, gleich hohe Karten */
:where(#recipesModal, .recipe-modal, .modal--recipes) .recipe-card :where(.card-body,.content,.card-content){
  flex:1 1 auto;
  display:flex;
  flex-direction:column;
  gap:14px;
  padding: 18px 26px 24px 26px;        /* harmonische Ränder */
}

/* Typo & Meta leicht eingerückt */
:where(#recipesModal, .recipe-modal, .modal--recipes) .recipe-card 
:where(h3,.recipe-title,.tags,.rating,.meta-info,.diet,.labels){
  margin-left: 4px;
  margin-right: 4px;
}

/* Alte/absolute CTAs neutralisieren (falls vorhanden) */
:where(#recipesModal, .recipe-modal, .modal--recipes) .recipe-card 
:where(.btn-recipe,.open-recipe,.btn.btn-primary){
  position: static !important;
  inset: auto !important;
  margin: 0 !important;
}

/* Primärer CTA im Modal: dunkle Pille mit Glow – Text: "Zum Rezept" */
:where(#recipesModal, .recipe-modal, .modal--recipes) .recipe-card 
:where(.cta-primary,.btn-details,.button-details,.details-button){
  align-self:flex-start;
  margin-top:auto;                     /* sitzt unten */
  margin-left:4px;
  padding: 14px 22px;
  border-radius: 999px;                /* Pille */
  background: #0f172a;                 /* Cosy dark */
  color:#fff;
  font-weight:800;
  text-decoration:none;
  line-height:1;
  box-shadow: 0 12px 40px rgba(15,23,42,.22);
  border: 1px solid rgba(15,23,42,.35);
  transition: transform .2s ease, box-shadow .2s ease;
}
:where(#recipesModal, .recipe-modal, .modal--recipes) .recipe-card 
:where(.cta-primary,.btn-details,.button-details,.details-button):hover{
  transform: translateY(-2px);
  box-shadow: 0 18px 54px rgba(15,23,42,.28);
}

/* Bewertungs-CTA in der Kartenliste des Modals ausblenden */
:where(#recipesModal, .recipe-modal, .modal--recipes) .recipe-card 
:where(.btn-rate,.button-rate,.rate-button){ display:none; }

/* === Cosy Explorer: Best-of-Familie Hover Glow === */
#view-bestof .recipe-card {
  transition: transform .25s ease, box-shadow .35s ease;
  box-shadow: 0 6px 20px rgba(17,24,39,0.06);
  background: linear-gradient(180deg, #fff, rgba(255,255,255,0.94));
}

#view-bestof .recipe-card:hover {
  transform: translateY(-6px);
  box-shadow:
    0 14px 36px color-mix(in oklab, var(--yn-accent) 20%, transparent),
    0 6px 22px rgba(17,24,39,0.12);
}

/* --- Button Glow (Cosy Style) --- */
#view-bestof .recipe-card .btn.primary {
  position: relative;
  box-shadow:
    0 6px 14px color-mix(in oklab, var(--yn-accent) 28%, transparent),
    0 2px 6px rgba(0,0,0,0.15);
  transition: transform .2s ease, box-shadow .3s ease;
}

#view-bestof .recipe-card .btn.primary:hover {
  transform: translateY(-2px);
  box-shadow:
    0 10px 22px color-mix(in oklab, var(--yn-accent) 45%, transparent),
    0 4px 10px rgba(0,0,0,0.18);
}

/* Sanfter Lichtschein hinter Button (animiert) */
#view-bestof .recipe-card .btn.primary::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(circle at 50% 100%, color-mix(in oklab, var(--yn-accent) 60%, transparent), transparent 70%);
  opacity: 0;
  transform: scale(1.3);
  transition: opacity .3s ease, transform .3s ease;
  z-index: -1;
}

#view-bestof .recipe-card .btn.primary:hover::after {
  opacity: 0.8;
  transform: scale(1.1);
}
/* ==== Cheatday RecipeCard =============================================== */
.swipe-card.cheat-card{
  background: radial-gradient(120% 120% at 10% 0%, #fff6ea 0%, #fff 40%),
              linear-gradient(135deg,#ffb47a 0%,#ff8f6b 100%);
  border: 2px solid rgba(255,153,102,.45);
  box-shadow: 0 18px 44px rgba(255,140,66,.25), 0 0 0 1px rgba(0,0,0,.04) inset;
  color:#7a3516;
}

.cheat-card .cheat-body{
  padding:16px 16px 22px;
}

.cheat-card .cheat-eyebrow{
  display:inline-block;
  font-weight:900; letter-spacing:.08em; font-size:.75rem;
  padding:6px 10px; border-radius:999px;
  background:rgba(255,145,77,.12); color:#c2410c; border:1px solid rgba(255,145,77,.45);
}

.cheat-card h4{
  margin:.6rem 0 .25rem; font-size:1.25rem; font-weight:900; line-height:1.15;
}

.cheat-card p{
  margin:.15rem 0 0; color:#7c3e1d; font-weight:700;
}

.cheat-card .hint{
  margin-top:.5rem; font-size:.9rem; color:#a34d25; opacity:.9;
}

/* fliegende Snacks */
.cheat-sky{
  position:absolute; inset:0; pointer-events:none; overflow:hidden;
}

.cheat-sky .food{
  position:absolute;
  will-change: transform, opacity;
  animation-name: cheat-fly;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  filter: drop-shadow(0 8px 10px rgba(0,0,0,.12));
  opacity:.95;
}

@keyframes cheat-fly{
  0%   { transform: translate3d(var(--x,0), -12%, 0) rotate(0deg) }
  100% { transform: translate3d(calc(var(--x,0) + var(--dx,0)), 115%, 0) rotate(360deg) }
}
#cheatday-hint {
  display: none;
  text-align: center;
  padding: 10px 14px;
  margin: 10px auto;
  border-radius: 14px;
  font-weight: 600;
  max-width: 500px;
  transition: all 0.3s ease;
  background: #f0f0f0;
  color: #333;
}

#cheatday-hint.active {
  background: linear-gradient(135deg, #ff9a4b, #ff6b6b);
  color: #fff;
  box-shadow: 0 2px 10px rgba(255, 100, 60, 0.35);
}
@keyframes floatFood {
  0%   { transform: translateY(0) rotate(0deg); opacity: 1; }
  50%  { transform: translateY(-25px) rotate(10deg); opacity: 0.9; }
  100% { transform: translateY(0) rotate(-10deg); opacity: 1; }
}

.container { max-width: 900px; margin: 0 auto; padding: 16px; }
.controls { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; justify-content: space-between; margin-bottom: 12px; }
.buttons { display: flex; gap: 8px; flex-wrap: wrap; }
.small { font-size: 0.9rem; }
.muted { color: #666; }
.empty { padding: 24px; text-align: center; opacity: 0.8; }

.category { margin: 20px 0; }
.category h3 { margin: 10px 0; }

.shopping-list { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: 1fr; gap: 6px; }
.shopping-item { display: grid; grid-template-columns: 24px 1fr; align-items: center; gap: 8px; padding: 8px 10px; border-radius: 10px; background: var(--card, #f7f7f7); }
.shopping-item.checked { opacity: 0.6; text-decoration: line-through; }
.shopping-item label { display: flex; justify-content: space-between; gap: 12px; align-items: center; }
.shopping-item .qty { opacity: 0.8; }
@media (min-width: 700px) {
  .shopping-list { grid-template-columns: 1fr 1fr; }
}
/* === Cosy Explorer – Header mit Logo-Hintergrund === */
.main-header {
  position: relative;
  background: linear-gradient(135deg, #6C63FF 10%, #8E7BFF 45%, #FF8C42 115%);
  overflow: hidden;
}

/* Logo als dezent transparentes Hintergrundelement */
.main-header::before {
  content: "";
  position: absolute;
  inset: 0;
  background: url("./images/Logo_neu.png") no-repeat center;
  background-size: 180px; /* anpassen: 120–220px wirkt meist gut */
  opacity: 0.12;          /* dezenter Wasserzeichen-Effekt */
  pointer-events: none;
  z-index: 0;
}

/* Inhalt (Text, Buttons etc.) bleibt sichtbar darüber */
.main-header > * {
  position: relative;
  z-index: 1;
}
/* === Cosy Explorer – Neues Header-Logo direkt in der Leiste === */
.main-header .brand-logo.cosy-logo {
  width: 100px;           /* Logo-Größe in der Leiste */
  height: auto;
  display: block;
  border-radius: 12px;    /* leichte Rundung für weichen Look */
  box-shadow: 0 6px 16px rgba(17,24,39,0.15);
  background: rgba(255,255,255,0.85); /* sanfter weisser Fond für Lesbarkeit */
  padding: 6px 10px;      /* etwas Innenabstand */
  transition: transform .3s ease, box-shadow .3s ease;
}

.main-header .brand-logo.cosy-logo:hover {
  transform: scale(1.05);
  box-shadow: 0 10px 26px rgba(17,24,39,0.25);
}
.main-header .brand {
  transform: translateY(4px);
}
/* === Cosy Explorer – Logo direkt in der Header-Leiste (als Background) === */
.main-header.logo-bg{
  position: relative;
  /* Logo + Verlauf als Mehrfach-Hintergrund */
  background:
    url("./assets/Logo_neu.png") left 28px center / 92px auto no-repeat,
    linear-gradient(135deg, #6C63FF 10%, #8E7BFF 45%, #FF8C42 115%);
  padding-left: 150px;                 /* Platz für das Logo in der Leiste */
  overflow: hidden;
}

/* Falls noch ein altes <img> im Brand steckt: ausblenden, um Doppelungen zu vermeiden */
.main-header.logo-bg .brand,
.main-header.logo-bg .brand .brand-logo{ display: none !important; }

/* Responsiv etwas kompakter */
@media (max-width: 600px){
  .main-header.logo-bg{
    background:
      url("./assets/Logo_neu.png") left 18px center / 72px auto no-repeat,
      linear-gradient(135deg, #6C63FF 10%, #8E7BFF 45%, #FF8C42 115%);
    padding-left: 120px;
  }
}

/* === Cosy Explorer – Logo direkt in der Header-Leiste (als Background) === */
.main-header.logo-bg{
  position: relative;
  /* Logo + Verlauf als Mehrfach-Hintergrund */
  background:
    url("./images/Logo_neu.png") left 28px center / 92px auto no-repeat,
    linear-gradient(135deg, #6C63FF 10%, #8E7BFF 45%, #FF8C42 115%);
  padding-left: 150px; /* Platz für das Logo in der Leiste */
  overflow: hidden;
}
/* Doppelungen vermeiden: evtl. eingebettetes <img> im Brand ausblenden */
.main-header.logo-bg .brand,
.main-header.logo-bg .brand .brand-logo{ display: none !important; }

@media (max-width: 600px){
  .main-header.logo-bg{
    background:
      url("./assets/Logo_neu.png") left 18px center / 72px auto no-repeat,
      linear-gradient(135deg, #6C63FF 10%, #8E7BFF 45%, #FF8C42 115%);
    padding-left: 120px;
  }
}