:root{ --bg:#fff7ed; --paper:#fffaf0; --card:rgba(255,255,255,0.86); --text:#26352a; --muted:#6f756b; --green:#36583b; --green-dark:#263f2b; --green-soft:#ecfccb; --orange:#e56f22; --orange-dark:#b94713; --terracotta:#c85b24; --orange-soft:#ffedd5; --cream:#fffaf0; --border:rgba(214,157,85,0.32); --shadow:0 22px 58px rgba(67,43,24,0.13); --shadow-soft:0 12px 30px rgba(67,43,24,0.1); --radius:30px; --nav-height:76px; --theme-bg-a:rgba(229,111,34,0.18); --theme-bg-b:rgba(54,88,59,0.13); --theme-gradient-start:#fff7ed; --theme-gradient-mid:#fffaf0; --theme-gradient-end:#fff4df; --theme-card:rgba(255,255,255,0.86); --theme-card-strong:rgba(255,255,255,0.93); --theme-soft:#fff7ed; --theme-soft-2:#ecfccb; --theme-accent:#e56f22; --theme-accent-dark:#b94713; --theme-deep:#263f2b; --theme-button:linear-gradient(135deg,#c85b24,#e56f22); --theme-button-alt:linear-gradient(135deg,#36583b,#263f2b); --title-font:"Segoe Script","Segoe Print","Comic Sans MS",cursive; --body-font:Arial,Helvetica,sans-serif} body[data-theme="fruehling"]{ --theme-bg-a:rgba(126,211,33,0.18); --theme-bg-b:rgba(255,179,209,0.2); --theme-gradient-start:#f7ffe9; --theme-gradient-mid:#fffaf2; --theme-gradient-end:#f2ffe7; --theme-soft:#f7fee7; --theme-soft-2:#ffe4ef; --theme-accent:#7bbf45; --theme-accent-dark:#47752b; --theme-deep:#254b2c; --theme-button:linear-gradient(135deg,#75a843,#9bcc5a); --theme-button-alt:linear-gradient(135deg,#ff8fb5,#e76592)} body[data-theme="ostern"]{ --theme-bg-a:rgba(255,201,87,0.2); --theme-bg-b:rgba(186,230,253,0.35); --theme-gradient-start:#fff8df; --theme-gradient-mid:#f9fff1; --theme-gradient-end:#eaf7ff; --theme-soft:#fff7d6; --theme-soft-2:#dff6ff; --theme-accent:#f2a93b; --theme-accent-dark:#b87315; --theme-deep:#4a6233; --theme-button:linear-gradient(135deg,#f2a93b,#f6c65f); --theme-button-alt:linear-gradient(135deg,#7dbf7a,#4f8f52)} body[data-theme="sommer"]{ --theme-bg-a:rgba(255,189,89,0.28); --theme-bg-b:rgba(56,189,248,0.22); --theme-gradient-start:#fff3c7; --theme-gradient-mid:#fff9e6; --theme-gradient-end:#dcf8ff; --theme-soft:#fff2bf; --theme-soft-2:#d7f7ff; --theme-accent:#f59e0b; --theme-accent-dark:#b45309; --theme-deep:#1f5f68; --theme-button:linear-gradient(135deg,#f59e0b,#fbbf24); --theme-button-alt:linear-gradient(135deg,#0ea5e9,#0284c7)} body[data-theme="herbst"]{ --theme-bg-a:rgba(180,83,9,0.22); --theme-bg-b:rgba(120,53,15,0.16); --theme-gradient-start:#fff3dc; --theme-gradient-mid:#fff8ec; --theme-gradient-end:#f5dfc2; --theme-soft:#ffedd5; --theme-soft-2:#fef3c7; --theme-accent:#c26a21; --theme-accent-dark:#7c2d12; --theme-deep:#3f2b1d; --theme-button:linear-gradient(135deg,#9a3412,#d97706); --theme-button-alt:linear-gradient(135deg,#6b3f23,#3f2b1d)} body[data-theme="halloween"]{ --text:#f8efe1; --muted:#d8c8b4; --card:rgba(45,31,55,0.82); --theme-card:rgba(45,31,55,0.82); --theme-card-strong:rgba(59,40,72,0.92); --border:rgba(255,170,66,0.32); --theme-bg-a:rgba(249,115,22,0.25); --theme-bg-b:rgba(124,58,237,0.2); --theme-gradient-start:#211827; --theme-gradient-mid:#2b1d35; --theme-gradient-end:#3b2336; --theme-soft:#3b2848; --theme-soft-2:#4a2f22; --theme-accent:#f97316; --theme-accent-dark:#ffb266; --theme-deep:#fff3df; --theme-button:linear-gradient(135deg,#f97316,#c2410c); --theme-button-alt:linear-gradient(135deg,#7c3aed,#4c1d95)} body[data-theme="weihnachten"]{ --theme-bg-a:rgba(220,38,38,0.18); --theme-bg-b:rgba(22,101,52,0.18); --theme-gradient-start:#fff7f1; --theme-gradient-mid:#fffaf5; --theme-gradient-end:#eaf7ef; --theme-soft:#fee2e2; --theme-soft-2:#dcfce7; --theme-accent:#c0392b; --theme-accent-dark:#7f1d1d; --theme-deep:#17442a; --theme-button:linear-gradient(135deg,#b91c1c,#dc2626); --theme-button-alt:linear-gradient(135deg,#166534,#14532d)} *{box-sizing:border-box} html{scroll-behavior:smooth;overflow-x:hidden} body{margin:0;min-height:100vh;max-width:100vw;overflow-x:hidden;color:var(--text);font-family:var(--body-font);background:radial-gradient(circle at 8% 3%,var(--theme-bg-a),transparent 30%),radial-gradient(circle at 92% 18%,var(--theme-bg-b),transparent 28%),linear-gradient(180deg,var(--theme-gradient-start) 0%,var(--theme-gradient-mid) 52%,var(--theme-gradient-end) 100%);padding-bottom:calc(var(--nav-height) + 26px)} body::before{content:"";position:fixed;inset:0;pointer-events:none;background-image:linear-gradient(rgba(38,53,42,0.025) 1px,transparent 1px),linear-gradient(90deg,rgba(38,53,42,0.018) 1px,transparent 1px);background-size:32px 32px;mask-image:linear-gradient(to bottom,rgba(0,0,0,0.42),transparent 75%)} body[data-theme="halloween"]::before{background-image:linear-gradient(rgba(255,255,255,0.035) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,0.026) 1px,transparent 1px)} button,input{font:inherit} button{border:none;cursor:pointer} button:disabled{cursor:not-allowed;opacity:0.55} a{color:inherit} img{max-width:100%} .app{width:min(100%,920px);max-width:100vw;margin:0 auto;padding:22px 14px 42px} #start,#recipes,#about,#moodSection,#decisionSection{scroll-margin-top:18px} .mascot-image,.section-mascot,.footer-mascot,.buddy-mascot{display:block;object-fit:contain;user-select:none; -webkit-user-drag:none;filter:drop-shadow(0 16px 22px rgba(97,49,17,0.16))} body[data-theme="halloween"] .mascot-image,body[data-theme="halloween"] .section-mascot,body[data-theme="halloween"] .footer-mascot,body[data-theme="halloween"] .buddy-mascot{filter:drop-shadow(0 16px 26px rgba(0,0,0,0.32))} .welcome-mascot{position:relative;z-index:2;width:min(220px,56vw);height:auto;margin:0 auto;transform:translateY(4px)} .hero-mascot{width:clamp(76px,16vw,112px);height:auto;flex:0 0 auto} .section-mascot{width:clamp(58px,13vw,86px);height:auto;flex:0 0 auto} .mood-mascot{transform:rotate(2deg)} .decision-mascot{transform:rotate(4deg)} .idea-mascot{transform:rotate(3deg)} .rescue-mascot{transform:rotate(-3deg)} .footer-mascot{width:clamp(64px,13vw,88px);height:auto;flex:0 0 auto} .buddy-mascot{width:48px;height:auto;flex:0 0 auto} .welcome-screen{position:fixed;inset:0;z-index:100;display:grid;place-items:center;padding:18px 14px;background:radial-gradient(circle at top left,var(--theme-bg-a),transparent 34%),radial-gradient(circle at bottom right,var(--theme-bg-b),transparent 30%),linear-gradient(180deg,var(--theme-gradient-start),var(--theme-gradient-mid));overflow-y:auto;overflow-x:hidden} .welcome-screen.hidden{display:none} .welcome-card{position:relative;width:min(100%,720px);max-width:calc(100vw - 28px);overflow:hidden;border-radius:40px;padding:26px;text-align:center;background:radial-gradient(circle at 15% 4%,rgba(255,255,255,0.88),transparent 36%),radial-gradient(circle at 86% 16%,var(--theme-bg-a),transparent 34%),linear-gradient(145deg,var(--theme-card-strong),rgba(255,247,237,0.82));border:1px solid var(--border);box-shadow:0 34px 90px rgba(67,43,24,0.18),inset 0 1px 0 rgba(255,255,255,0.62)} body[data-theme="halloween"] .welcome-card{background:radial-gradient(circle at 15% 4%,rgba(255,255,255,0.08),transparent 36%),radial-gradient(circle at 86% 16%,rgba(249,115,22,0.18),transparent 34%),linear-gradient(145deg,rgba(59,40,72,0.96),rgba(34,24,43,0.94))} .welcome-card::before{content:"";position:absolute;inset:14px;border-radius:30px;border:1px solid rgba(245,214,166,0.44);pointer-events:none} .welcome-background-deco{position:absolute;border-radius:999px;pointer-events:none;z-index:0} .welcome-deco-one{width:210px;height:210px;right: -72px;top: -80px;background:radial-gradient(circle,var(--theme-bg-a),transparent 70%)} .welcome-deco-two{width:180px;height:180px;left: -72px;bottom:120px;background:radial-gradient(circle,var(--theme-bg-b),transparent 70%)} .welcome-header,.theme-preview-card,.theme-picker,.welcome-actions{position:relative;z-index:2} .eyebrow{margin:0 0 7px;font-size:0.74rem;font-weight:900;letter-spacing:0.1em;text-transform:uppercase;color:var(--theme-accent-dark)} body[data-theme="halloween"] .eyebrow{color:#ffb266} h1{width:100%;max-width:100%;margin:0 auto;color:var(--theme-deep);font-family:var(--title-font);font-size:clamp(2.25rem,6.4vw,4rem);line-height:1.05;letter-spacing: -0.04em;white-space:nowrap;overflow:visible} .welcome-headline{margin:14px 0 0;color:var(--theme-deep);font-size:clamp(1.2rem,3vw,1.7rem);font-weight:900;letter-spacing: -0.03em} .welcome-text{margin:10px auto 0;max-width:520px;color:var(--muted);line-height:1.55;font-size:0.98rem} .theme-preview-card{display:grid;grid-template-columns:1.1fr 0.9fr;align-items:center;gap:18px;margin:22px auto 18px;padding:18px;border-radius:32px;text-align:left;background:radial-gradient(circle at top right,var(--theme-bg-a),transparent 42%),linear-gradient(145deg,rgba(255,255,255,0.78),rgba(255,250,240,0.56));border:1px solid var(--border);box-shadow:0 20px 46px rgba(67,43,24,0.12),inset 0 1px 0 rgba(255,255,255,0.68);overflow:hidden} body[data-theme="halloween"] .theme-preview-card{background:radial-gradient(circle at top right,rgba(249,115,22,0.22),transparent 42%),linear-gradient(145deg,rgba(255,255,255,0.08),rgba(255,255,255,0.04))} .theme-preview-copy{min-width:0;padding:4px 0 4px 4px} .theme-badge{display:inline-flex;align-items:center;gap:7px;width:fit-content;margin-bottom:10px;padding:8px 12px;border-radius:999px;background:var(--theme-soft);color:var(--theme-accent-dark);border:1px solid var(--border);font-size:0.82rem;font-weight:900} body[data-theme="halloween"] .theme-badge{background:rgba(249,115,22,0.16);color:#ffedd5} .theme-preview-copy h2{margin:0 0 8px;color:var(--theme-deep);font-size:clamp(1.28rem,3.8vw,2.15rem);line-height:1.08;letter-spacing: -0.04em} .theme-preview-copy p{margin:0;max-width:360px;color:var(--muted);line-height:1.48;font-size:0.96rem} .theme-preview-mascot-wrap{position:relative;min-height:210px;display:grid;place-items:center} .theme-preview-glow{position:absolute;width:190px;height:150px;border-radius:50%;background:radial-gradient(circle,rgba(255,218,166,0.72),rgba(255,237,213,0.24),transparent 70%);filter:blur(4px)} body[data-theme="halloween"] .theme-preview-glow{background:radial-gradient(circle,rgba(249,115,22,0.42),rgba(124,58,237,0.18),transparent 70%)} .theme-picker{margin:0 auto 20px;padding:16px;border-radius:30px;background:rgba(255,250,240,0.56);border:1px solid var(--border)} body[data-theme="halloween"] .theme-picker{background:rgba(255,255,255,0.06)} .theme-picker-heading{display:flex;justify-content:space-between;align-items:flex-end;gap:14px;margin-bottom:13px;text-align:left} .theme-picker-heading h2{margin:0 0 3px;color:var(--theme-deep);font-size:1.12rem;letter-spacing: -0.03em} .theme-picker-heading p{margin:0;color:var(--muted);font-size:0.88rem;line-height:1.35} .theme-options{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px} .theme-option{min-height:76px;padding:10px;border-radius:22px;background:linear-gradient(145deg,rgba(255,255,255,0.74),rgba(255,250,240,0.5));border:1px solid rgba(214,157,85,0.28);color:var(--text);display:grid;grid-template-columns:auto 1fr;align-items:center;gap:10px;text-align:left;transition:transform 0.16s ease,box-shadow 0.16s ease,border-color 0.16s ease,background 0.16s ease} body[data-theme="halloween"] .theme-option{background:rgba(255,255,255,0.08);color:#f8efe1} .theme-option:hover{transform:translateY(-1px)} .theme-option.active{border-color:var(--theme-accent);box-shadow:0 14px 28px rgba(67,43,24,0.13);outline:3px solid rgba(229,111,34,0.13);background:radial-gradient(circle at top right,var(--theme-bg-a),transparent 48%),linear-gradient(145deg,rgba(255,255,255,0.9),rgba(255,247,237,0.66))} body[data-theme="halloween"] .theme-option.active{background:radial-gradient(circle at top right,rgba(249,115,22,0.22),transparent 48%),rgba(255,255,255,0.1)} .theme-option-wide{grid-column:1 / -1} .theme-option-icon{width:46px;height:46px;display:grid;place-items:center;border-radius:16px;background:var(--theme-soft);font-size:1.3rem;box-shadow:inset 0 0 0 1px rgba(214,157,85,0.2)} body[data-theme="halloween"] .theme-option-icon{background:rgba(249,115,22,0.16)} .theme-option-copy{min-width:0;display:grid;gap:3px} .theme-option-copy strong{color:var(--theme-deep);font-size:0.94rem;line-height:1.1} .theme-option-copy small{color:var(--muted);font-size:0.78rem;line-height:1.1} .welcome-actions{display:grid;gap:15px;justify-items:center} .welcome-options{display:grid;grid-template-columns:repeat(2,minmax(0,auto));justify-content:center;gap:10px 14px} .toggle-option{display:inline-flex;align-items:center;gap:9px;color:var(--muted);font-size:0.86rem;font-weight:800;cursor:pointer} .toggle-option input{position:absolute;opacity:0;pointer-events:none} .fake-toggle{position:relative;width:42px;height:24px;flex:0 0 auto;border-radius:999px;background:rgba(111,117,107,0.18);box-shadow:inset 0 0 0 1px rgba(111,117,107,0.16);transition:background 0.16s ease} .fake-toggle::after{content:"";position:absolute;left:3px;top:3px;width:18px;height:18px;border-radius:50%;background:#ffffff;box-shadow:0 3px 8px rgba(67,43,24,0.2);transition:transform 0.16s ease} .toggle-option input:checked + .fake-toggle{background:var(--theme-accent)} .toggle-option input:checked + .fake-toggle::after{transform:translateX(18px)} .update-flyer{position:fixed;inset:0;z-index:180;display:block;padding:18px;overflow-y:auto;overflow-x:hidden} .update-flyer.hidden{display:none} .update-flyer-backdrop{position:fixed;inset:0;background:radial-gradient(circle at 18% 10%,var(--theme-bg-a),transparent 34%),radial-gradient(circle at 84% 88%,var(--theme-bg-b),transparent 34%),rgba(38,53,42,0.5);backdrop-filter:blur(11px)} body[data-theme="halloween"] .update-flyer-backdrop{background:radial-gradient(circle at 18% 10%,rgba(249,115,22,0.28),transparent 34%),radial-gradient(circle at 84% 88%,rgba(124,58,237,0.24),transparent 34%),rgba(15,10,20,0.74)} .update-pinup-card{position:relative;z-index:1;width:min(100%,610px);margin:0 auto;border-radius:34px;padding:30px 34px 28px;overflow:hidden;background:radial-gradient(circle at 12% 8%,rgba(255,255,255,0.95),transparent 38%),radial-gradient(circle at 84% 14%,rgba(255,164,76,0.12),transparent 32%),linear-gradient(145deg,#fffdf7,#fff8ea);border:8px solid rgba(255,255,255,0.96);box-shadow:0 34px 92px rgba(67,43,24,0.26),0 0 0 1px rgba(214,157,85,0.28),inset 0 1px 0 rgba(255,255,255,0.72)} body[data-theme="halloween"] .update-pinup-card{background:radial-gradient(circle at 12% 8%,rgba(255,255,255,0.09),transparent 38%),radial-gradient(circle at 84% 14%,rgba(249,115,22,0.16),transparent 32%),linear-gradient(145deg,rgba(59,40,72,0.98),rgba(34,24,43,0.94));border-color:rgba(255,255,255,0.08)} .update-pinup-card::before{content:"";position:absolute;inset:13px;border-radius:24px;border:1px solid rgba(245,214,166,0.42);pointer-events:none} .update-close-button{position:absolute;z-index:5;right:16px;top:16px;width:38px;height:38px;display:grid;place-items:center;border-radius:999px;background:rgba(255,250,240,0.94);border:1px solid rgba(214,157,85,0.34);color:var(--theme-accent-dark);font-size:1.35rem;font-weight:900;line-height:1;box-shadow:0 10px 22px rgba(67,43,24,0.12)} body[data-theme="halloween"] .update-close-button{background:rgba(255,255,255,0.08);color:#ffedd5;border-color:rgba(249,115,22,0.32)} .update-pinup-decoration{position:absolute;z-index:1;pointer-events:none;opacity:0.75} .update-leaf-one{top:24px;left:26px;font-size:3rem;transform:rotate(-18deg);opacity:0.34} .update-heart-one{top:34px;left:48%;font-size:1.65rem} .update-sparkle-one{right:36px;bottom:122px;font-size:1.6rem;opacity:0.65} .update-pinup-header,.update-pinup-list,.update-pinup-footer{position:relative;z-index:2} .update-pinup-header{display:block;min-height:0;padding-top:150px;margin-bottom:8px} .update-pinup-title-area{min-width:0} .update-badge{width:fit-content;display:inline-flex;align-items:center;gap:8px;margin-bottom:14px;padding:8px 12px;border-radius:999px;background:#fff3dd;border:1px solid rgba(214,157,85,0.34);color:#b94713;font-size:0.76rem;font-weight:900;letter-spacing:0.09em;text-transform:uppercase} body[data-theme="halloween"] .update-badge{background:rgba(249,115,22,0.16);color:#ffedd5;border-color:rgba(249,115,22,0.32)} .update-pinup-title-area h2{max-width:100%;margin:0 0 16px;color:#0f3a22;font-family:Georgia,"Times New Roman",serif;font-size:clamp(2.15rem,5.2vw,3.08rem);line-height:0.96;letter-spacing: -0.055em;text-shadow:0 3px 0 rgba(15,58,34,0.08);overflow-wrap:normal} body[data-theme="halloween"] .update-pinup-title-area h2{color:#fff3df} .update-pinup-title-area p{max-width:320px;margin:0;color:#0f3a22;font-size:clamp(1.02rem,2.8vw,1.38rem);font-weight:900;line-height:1.32} body[data-theme="halloween"] .update-pinup-title-area p{color:#f8efe1} .update-pinup-mascot-box{position:absolute;top:58px;right:54px;z-index:3;display:grid;justify-items:end;align-items:start;width:128px;pointer-events:none} .update-pinup-kumpel{width:128px;height:auto;object-fit:contain;border-radius:0;box-shadow:none;transform:rotate(2deg);filter:drop-shadow(0 18px 18px rgba(161,86,31,0.2))} body[data-theme="halloween"] .update-pinup-kumpel{box-shadow:none;filter:drop-shadow(0 18px 18px rgba(0,0,0,0.34))} .update-pinup-list{display:grid;gap:9px;margin:12px 0 20px} .update-pinup-item{display:grid;grid-template-columns:58px minmax(0,1fr);gap:12px;align-items:center;min-height:72px;padding:10px 16px;border-radius:18px;background:linear-gradient(145deg,rgba(255,255,255,0.9),rgba(255,249,238,0.86));border:1px solid rgba(214,157,85,0.2);box-shadow:0 8px 18px rgba(67,43,24,0.08),inset 0 1px 0 rgba(255,255,255,0.86)} body[data-theme="halloween"] .update-pinup-item{background:rgba(255,255,255,0.07);border-color:rgba(249,115,22,0.24)} .update-pinup-icon{width:48px;height:48px;display:grid;place-items:center;border-radius:999px;background:#fff8e8;border:2px solid rgba(239,207,158,0.74);color:#b94713;font-size:1.35rem;box-shadow:inset 0 1px 0 rgba(255,255,255,0.92)} body[data-theme="halloween"] .update-pinup-icon{background:rgba(249,115,22,0.16);color:#ffedd5;border-color:rgba(249,115,22,0.32)} .update-pinup-item strong{display:block;margin:0 0 3px;color:#0f3a22;font-size:clamp(0.98rem,2.6vw,1.24rem);font-weight:900;line-height:1.16} body[data-theme="halloween"] .update-pinup-item strong{color:#fff3df} .update-pinup-item p{margin:0;color:#64705f;font-size:0.88rem;line-height:1.38} body[data-theme="halloween"] .update-pinup-item p{color:#d8c8b4} .update-pinup-footer{display:grid;gap:16px;text-align:center} .update-pinup-footer p{margin:0;color:#0f3a22;font-size:clamp(0.96rem,2.7vw,1.18rem);line-height:1.32} body[data-theme="halloween"] .update-pinup-footer p{color:#f8efe1} .update-pinup-footer strong{display:block;margin-top:3px;color:#f26b1d;font-weight:900} .update-flyer-actions{display:grid;gap:10px} .update-real-image-button,.update-main-button{width:100%;min-height:64px;border-radius:22px;background:linear-gradient(180deg,#ff841f,#ff6d00);color:#ffffff;font-size:clamp(1.32rem,4.5vw,1.9rem);font-weight:900;box-shadow:0 12px 24px rgba(214,83,0,0.3),inset 0 2px 0 rgba(255,255,255,0.36),inset 0 -3px 0 rgba(172,66,0,0.22)} .update-real-image-button:hover,.update-main-button:hover{transform:translateY(-1px)} .update-later-button{min-height:38px;border-radius:999px;background:transparent;color:rgba(15,58,34,0.55);font-weight:800} body[data-theme="halloween"] .update-later-button{color:#d8c8b4} .update-later-button:hover{background:rgba(255,250,240,0.58)} body[data-theme="halloween"] .update-later-button:hover{background:rgba(255,255,255,0.08)} .primary-button,.input-row button{min-height:48px;background:var(--theme-button);color:#ffffff;border-radius:999px;padding:0 20px;font-weight:900;box-shadow:0 14px 26px rgba(185,75,22,0.19),inset 0 1px 0 rgba(255,255,255,0.26);transition:transform 0.18s ease,box-shadow 0.18s ease} .primary-button:hover,.input-row button:hover{transform:translateY(-1px);box-shadow:0 18px 32px rgba(185,75,22,0.22),inset 0 1px 0 rgba(255,255,255,0.26)} .large-button{min-height:56px;width:min(100%,380px);font-size:1.04rem} .hero-section{position:relative;overflow:hidden;background:radial-gradient(circle at top right,var(--theme-bg-a),transparent 34%),linear-gradient(145deg,var(--theme-card),rgba(255,247,237,0.72));border:1px solid var(--border);border-radius:36px;padding:22px;box-shadow:var(--shadow)} body[data-theme="halloween"] .hero-section{background:radial-gradient(circle at top right,rgba(249,115,22,0.15),transparent 35%),linear-gradient(145deg,rgba(59,40,72,0.88),rgba(34,24,43,0.84))} .hero-section::after{content:"";position:absolute;right: -60px;top: -70px;width:180px;height:180px;border-radius:50%;background:var(--theme-bg-a);pointer-events:none} .hero-section::before{content:"";position:absolute;inset:auto 18px 14px auto;width:84px;height:84px;pointer-events:none;opacity:0.2;background:radial-gradient(circle,var(--theme-accent),transparent 60%);border-radius:999px} .hero-top{position:relative;z-index:1;display:flex;justify-content:space-between;gap:18px;align-items:center} .hero-copy{min-width:0} .hero-top h2{max-width:100%;margin:0 0 8px;color:var(--theme-deep);font-family:var(--title-font);font-size:clamp(2rem,5.8vw,3.25rem);line-height:1.12;letter-spacing: -0.03em;white-space:nowrap} .hero-top p:last-child{max-width:560px;margin-bottom:0;color:var(--muted);line-height:1.52} .buddy-message{position:relative;z-index:1;display:flex;align-items:center;gap:12px;margin-top:18px;padding:14px 15px;background:linear-gradient(145deg,var(--theme-soft-2),rgba(247,254,231,0.82));border:1px solid rgba(132,204,22,0.35);border-radius:24px;color:#365314;line-height:1.45} body[data-theme="halloween"] .buddy-message{background:linear-gradient(145deg,rgba(249,115,22,0.18),rgba(124,58,237,0.14));border-color:rgba(249,115,22,0.32);color:#ffedd5} .buddy-message::before{content:"";position:absolute;left:32px;top: -8px;width:18px;height:18px;transform:rotate(45deg);background:var(--theme-soft-2);border-left:1px solid rgba(132,204,22,0.28);border-top:1px solid rgba(132,204,22,0.28)} body[data-theme="halloween"] .buddy-message::before{background:rgba(249,115,22,0.16);border-color:rgba(249,115,22,0.22)} .buddy-message strong{display:block;margin-bottom:4px} .buddy-message span{display:block} .card,.recommendation-section,.results-section{margin-top:16px;background:var(--theme-card);border:1px solid var(--border);border-radius:var(--radius);padding:18px;box-shadow:var(--shadow-soft);backdrop-filter:blur(10px)} body[data-theme="halloween"] .card,body[data-theme="halloween"] .recommendation-section,body[data-theme="halloween"] .results-section{background:rgba(45,31,55,0.82)} .ingredient-card{background:linear-gradient(145deg,var(--theme-card-strong),rgba(255,250,240,0.78))} body[data-theme="halloween"] .ingredient-card{background:linear-gradient(145deg,rgba(59,40,72,0.9),rgba(34,24,43,0.82))} .card-title,.section-heading{display:flex;justify-content:space-between;align-items:flex-end;gap:14px;margin-bottom:14px} .card-title-with-image,.section-heading-with-image{align-items:center} .card-title h3,.section-heading h3,.rescue-card h3,.mood-header h3,.decision-header h3{margin:0;color:var(--theme-deep);font-size:1.34rem;letter-spacing: -0.02em} .card-title p,.rescue-card p,.section-heading p,.mood-header p,.decision-header p{margin-bottom:0;color:var(--muted);line-height:1.45} .mood-card{position:relative;overflow:hidden;background:radial-gradient(circle at top right,var(--theme-bg-a),transparent 34%),linear-gradient(145deg,var(--theme-card-strong),rgba(255,250,240,0.78))} body[data-theme="halloween"] .mood-card{background:radial-gradient(circle at top right,rgba(249,115,22,0.16),transparent 36%),linear-gradient(145deg,rgba(59,40,72,0.9),rgba(34,24,43,0.82))} .mood-card::before{content:"";position:absolute;right: -60px;top: -64px;width:180px;height:180px;border-radius:999px;background:var(--theme-bg-a);pointer-events:none} .mood-card::after{content:"";position:absolute;left: -70px;bottom: -80px;width:180px;height:180px;border-radius:999px;background:var(--theme-bg-b);pointer-events:none} .mood-header,.mood-options,.mood-insight{position:relative;z-index:1} .mood-header{display:flex;justify-content:space-between;gap:14px;align-items:center;margin-bottom:15px} .mood-header>div{min-width:0} .mood-options{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px} .mood-option{min-height:78px;width:100%;padding:12px;border-radius:23px;display:grid;grid-template-columns:auto 1fr;align-items:center;gap:11px;text-align:left;color:var(--text);background:linear-gradient(145deg,rgba(255,255,255,0.78),rgba(255,247,237,0.64));border:1px solid rgba(214,157,85,0.28);box-shadow:inset 0 1px 0 rgba(255,255,255,0.72),0 8px 18px rgba(67,43,24,0.05);transition:transform 0.16s ease,box-shadow 0.16s ease,border-color 0.16s ease,background 0.16s ease} body[data-theme="halloween"] .mood-option{background:rgba(255,255,255,0.08);color:#f8efe1} .mood-option:hover{transform:translateY(-1px)} .mood-option.active{border-color:var(--theme-accent);outline:3px solid rgba(229,111,34,0.13);box-shadow:0 16px 32px rgba(67,43,24,0.13),inset 0 1px 0 rgba(255,255,255,0.72);background:radial-gradient(circle at top right,var(--theme-bg-a),transparent 46%),linear-gradient(145deg,rgba(255,255,255,0.92),rgba(255,247,237,0.72))} body[data-theme="halloween"] .mood-option.active{background:radial-gradient(circle at top right,rgba(249,115,22,0.22),transparent 46%),rgba(255,255,255,0.1)} .mood-option-wide{grid-column:1 / -1} .mood-icon{width:48px;height:48px;display:grid;place-items:center;flex:0 0 auto;border-radius:17px;background:var(--theme-soft);font-size:1.35rem;box-shadow:inset 0 0 0 1px rgba(214,157,85,0.2),0 8px 18px rgba(67,43,24,0.06)} body[data-theme="halloween"] .mood-icon{background:rgba(249,115,22,0.16)} .mood-copy{min-width:0;display:grid;gap:4px} .mood-copy strong{color:var(--theme-deep);font-size:0.95rem;line-height:1.1} .mood-copy small{color:var(--muted);font-size:0.78rem;line-height:1.16} .mood-insight{display:flex;align-items:flex-start;gap:8px;margin-top:14px;padding:13px 14px;border-radius:22px;background:linear-gradient(145deg,var(--theme-soft-2),rgba(255,247,237,0.84));border:1px solid var(--border);color:var(--theme-deep);line-height:1.45;font-size:0.92rem} body[data-theme="halloween"] .mood-insight{background:linear-gradient(145deg,rgba(249,115,22,0.18),rgba(124,58,237,0.12));color:#ffedd5} .mood-insight strong{flex:0 0 auto;white-space:nowrap} .mood-insight span{color:var(--muted)} body[data-theme="halloween"] .mood-insight span{color:#f8efe1} .decision-card{position:relative;overflow:hidden;background:radial-gradient(circle at top right,var(--theme-bg-a),transparent 36%),radial-gradient(circle at bottom left,var(--theme-bg-b),transparent 34%),linear-gradient(145deg,var(--theme-card-strong),rgba(255,250,240,0.78))} body[data-theme="halloween"] .decision-card{background:radial-gradient(circle at top right,rgba(249,115,22,0.18),transparent 38%),radial-gradient(circle at bottom left,rgba(124,58,237,0.18),transparent 36%),linear-gradient(145deg,rgba(59,40,72,0.92),rgba(34,24,43,0.84))} .decision-card::before{content:"";position:absolute;right: -54px;bottom: -70px;width:190px;height:190px;border-radius:999px;background:radial-gradient(circle,var(--theme-bg-a),transparent 68%);pointer-events:none} .decision-header,.decision-result,.decision-actions{position:relative;z-index:1} .decision-header{display:flex;justify-content:space-between;align-items:center;gap:14px;margin-bottom:15px} .decision-header>div{min-width:0} .decision-result{display:grid;gap:14px;padding:16px;border-radius:26px;border:1px solid var(--border);background:linear-gradient(145deg,rgba(255,255,255,0.78),rgba(255,247,237,0.64));box-shadow:inset 0 1px 0 rgba(255,255,255,0.68),0 10px 24px rgba(67,43,24,0.07)} body[data-theme="halloween"] .decision-result{background:rgba(255,255,255,0.08)} .empty-decision strong{color:var(--theme-deep);font-size:1rem} .empty-decision span{color:var(--muted);line-height:1.45} .has-decision{background:radial-gradient(circle at top right,var(--theme-bg-a),transparent 46%),linear-gradient(145deg,rgba(255,255,255,0.92),rgba(255,247,237,0.78))} body[data-theme="halloween"] .has-decision{background:radial-gradient(circle at top right,rgba(249,115,22,0.18),transparent 46%),rgba(255,255,255,0.08)} .decision-picked{display:grid;gap:7px} .decision-kicker{margin:0;color:var(--theme-accent-dark);font-size:0.78rem;font-weight:900;letter-spacing:0.08em;text-transform:uppercase} body[data-theme="halloween"] .decision-kicker{color:#ffb266} .decision-picked h4{margin:0;color:var(--theme-deep);font-size:clamp(1.28rem,4vw,1.78rem);line-height:1.12;letter-spacing: -0.035em;overflow-wrap:anywhere} .decision-picked p{margin:0;color:var(--muted);line-height:1.5} .decision-shopping{display:grid;gap:10px;padding:13px;border-radius:20px;background:linear-gradient(145deg,var(--theme-soft),rgba(255,250,240,0.76));border:1px solid var(--border)} body[data-theme="halloween"] .decision-shopping{background:rgba(255,255,255,0.08)} .decision-shopping strong{color:var(--theme-deep)} .decision-shopping span{color:var(--muted);line-height:1.45} .decision-shopping-list{display:flex;flex-wrap:wrap;gap:8px} .decision-shopping-list span{display:inline-flex;padding:7px 10px;border-radius:999px;background:var(--theme-soft-2);border:1px solid rgba(214,157,85,0.22);color:var(--theme-deep);font-size:0.82rem;font-weight:900} body[data-theme="halloween"] .decision-shopping-list span{background:rgba(249,115,22,0.16);color:#ffedd5} .decision-shopping-good{background:linear-gradient(145deg,var(--theme-soft-2),rgba(247,254,231,0.76))} body[data-theme="halloween"] .decision-shopping-good{background:rgba(34,197,94,0.1)} .decision-result-actions{display:flex;gap:9px;flex-wrap:wrap} .decision-actions{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px;margin-top:14px} .decision-button{min-height:52px} .decision-secondary-button{min-height:52px;white-space:nowrap} .input-row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px} .input-row input{width:100%;min-width:0;padding:15px 16px;border-radius:999px;border:1px solid var(--border);background:rgba(255,250,240,0.92);outline:none;color:#26352a} body[data-theme="halloween"] .input-row input{background:rgba(255,255,255,0.1);color:#f8efe1} .input-row input:focus{border-color:var(--theme-accent);box-shadow:0 0 0 4px rgba(229,111,34,0.13)} .quick-ingredients{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:9px;margin-top:16px} .quick-button{min-height:58px;width:100%;min-width:0;padding:10px 8px;border-radius:20px;background:linear-gradient(145deg,rgba(255,247,237,0.92),rgba(255,250,240,0.98));color:var(--theme-deep);border:1px solid var(--border);font-weight:800;overflow-wrap:anywhere;box-shadow:inset 0 1px 0 rgba(255,255,255,0.75),0 8px 18px rgba(67,43,24,0.05)} body[data-theme="halloween"] .quick-button{background:rgba(255,255,255,0.08);color:#f8efe1} .quick-button.selected{background:linear-gradient(145deg,var(--theme-soft-2),rgba(247,254,231,0.88));border-color:rgba(132,204,22,0.42);color:#365314} body[data-theme="halloween"] .quick-button.selected{background:rgba(249,115,22,0.22);color:#ffedd5;border-color:rgba(249,115,22,0.42)} .selected-area{margin-top:18px} .selected-heading{margin-bottom:10px} .selected-heading h4{margin:0 0 4px;color:var(--theme-deep)} .selected-heading p{margin:0;color:var(--muted);font-size:0.9rem;line-height:1.35} .selected-ingredients{min-height:48px;display:flex;flex-wrap:wrap;gap:9px} .empty-small{color:var(--muted);padding:12px 0} .ingredient-chip{display:inline-flex;align-items:center;gap:10px;max-width:100%;padding:9px 10px 9px 14px;border-radius:999px;background:#fff0d9;border:1px solid #fdba74;color:#7c2d12;font-size:0.92rem;font-weight:800} body[data-theme="halloween"] .ingredient-chip{background:rgba(249,115,22,0.18);border-color:rgba(249,115,22,0.4);color:#ffedd5} .ingredient-chip span{max-width:160px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .ingredient-chip.urgent{background:#fef3c7;border-color:#f59e0b;box-shadow:inset 0 0 0 1px rgba(245,158,11,0.14)} body[data-theme="halloween"] .ingredient-chip.urgent{background:rgba(251,191,36,0.18)} .chip-button,.clock-button{flex:0 0 auto;width:34px;height:34px;padding:0;display:inline-flex;align-items:center;justify-content:center;border-radius:999px;background:rgba(255,255,255,0.92);border:1px solid rgba(214,157,85,0.25);color:#9a3412;font-weight:900;line-height:1;box-shadow:0 4px 10px rgba(67,43,24,0.05)} .clock-button{font-size:1rem} .clock-button.active{background:linear-gradient(145deg,#fef3c7,#fde68a);border-color:rgba(245,158,11,0.45);color:#9a3412} .chip-button{font-size:1.08rem} .chip-button:hover,.clock-button:hover{transform:translateY(-1px)} .rescue-card{background:radial-gradient(circle at top right,var(--theme-bg-a),transparent 35%),linear-gradient(135deg,rgba(255,247,237,0.93),var(--theme-soft-2))} body[data-theme="halloween"] .rescue-card{background:radial-gradient(circle at top right,rgba(249,115,22,0.16),transparent 38%),linear-gradient(135deg,rgba(59,40,72,0.9),rgba(34,24,43,0.85))} .rescue-content{display:flex;justify-content:space-between;gap:14px;align-items:center} .secondary-button{min-height:48px;background:var(--theme-button-alt);color:#ffffff;border-radius:999px;padding:13px 18px;font-weight:900;box-shadow:0 14px 26px rgba(38,63,43,0.15)} .secondary-button.active{background:var(--theme-button)} .full-button{width:100%;margin-top:14px} .filters{display:flex;gap:9px;overflow-x:auto;max-width:100%;padding:16px 2px 2px;scrollbar-width:none} .filters::-webkit-scrollbar{display:none} .filter-button{flex:0 0 auto;padding:11px 15px;border-radius:999px;color:var(--theme-deep);background:rgba(255,255,255,0.78);border:1px solid var(--border);font-weight:900;white-space:nowrap} body[data-theme="halloween"] .filter-button{background:rgba(255,255,255,0.08);color:#f8efe1} .filter-button.active{background:var(--theme-deep);color:#ffffff;border-color:var(--theme-deep)} body[data-theme="halloween"] .filter-button.active{background:#f97316;color:#241527;border-color:#f97316} .counter-text{text-align:right;font-size:0.9rem} .recipe-grid{display:grid;gap:14px} .recommendation-card,.recipe-card{overflow:hidden;padding:0;transition:transform 0.18s ease,box-shadow 0.18s ease} .recommendation-card{position:relative;border-radius:30px;background:radial-gradient(circle at top right,var(--theme-bg-a),transparent 32%),linear-gradient(135deg,var(--theme-deep),var(--green-dark));color:#ffffff;box-shadow:0 20px 42px rgba(38,63,43,0.22)} body[data-theme="halloween"] .recommendation-card{background:radial-gradient(circle at top right,rgba(249,115,22,0.3),transparent 32%),linear-gradient(135deg,#3b2848,#241527)} .recipe-card{border-radius:28px;background:linear-gradient(145deg,var(--theme-card-strong),rgba(255,250,240,0.76));border:1px solid var(--border);box-shadow:0 12px 28px rgba(67,43,24,0.08)} .recipe-card:hover{transform:translateY(-2px);box-shadow:0 18px 36px rgba(67,43,24,0.12)} body[data-theme="halloween"] .recipe-card{background:linear-gradient(145deg,rgba(59,40,72,0.82),rgba(34,24,43,0.78))} .recipe-card-content{padding:18px} .recommendation-card .recipe-card-content{padding:22px} .recipe-card-image{position:relative;width:100%;aspect-ratio:16 / 10;overflow:hidden;background:radial-gradient(circle at top left,var(--theme-bg-a),transparent 42%),linear-gradient(145deg,var(--theme-soft),var(--theme-soft-2));border-bottom:1px solid rgba(214,157,85,0.24)} .recipe-card-image.large{aspect-ratio:16 / 9} .recipe-card-image img{width:100%;height:100%;display:block;object-fit:cover;transform:scale(1.01)} .recipe-card-image::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,transparent 45%,rgba(0,0,0,0.16) 100%)} .recipe-card-image-fallback{display:grid;place-items:center} .recipe-card-image-fallback span,.recipe-card-image-fallback::before{content:"🥘";position:relative;z-index:1;font-size:clamp(2.6rem,8vw,4.6rem);filter:drop-shadow(0 10px 18px rgba(67,43,24,0.14))} .recipe-card-image-fallback span{display:none} .recipe-card-topline{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px} .recipe-card-badge{display:inline-flex;width:fit-content;padding:7px 11px;border-radius:999px;background:var(--theme-soft);color:var(--theme-accent-dark);border:1px solid var(--border);font-size:0.76rem;font-weight:900;letter-spacing:0.03em} body[data-theme="halloween"] .recipe-card-badge{background:rgba(249,115,22,0.18);color:#ffedd5} .recommendation-card .recipe-card-badge{background:rgba(255,237,213,0.16);border-color:rgba(255,237,213,0.24);color:#ffedd5} .recommendation-card .recipe-card-image{border-bottom-color:rgba(255,237,213,0.18)} body[data-theme="halloween"] .recipe-card-image{background:radial-gradient(circle at top left,rgba(249,115,22,0.2),transparent 42%),linear-gradient(145deg,rgba(124,58,237,0.22),rgba(34,24,43,0.72));border-bottom-color:rgba(249,115,22,0.24)} .recipe-card h4,.recommendation-card h4{margin:0 0 8px;overflow-wrap:anywhere} .recipe-card h4{font-size:1.2rem;line-height:1.16} .recommendation-card h4{font-size:clamp(1.35rem,4vw,1.85rem);line-height:1.12} .recipe-saying{margin-bottom:13px;color:var(--muted);line-height:1.45} .recommendation-card .recipe-saying{color:#ffedd5} .recipe-card .recipe-saying,.recommendation-card .recipe-saying{display: -webkit-box; -webkit-box-orient:vertical;overflow:hidden} .recipe-card .recipe-saying{ -webkit-line-clamp:2;line-clamp:2} .recommendation-card .recipe-saying{ -webkit-line-clamp:3;line-clamp:3} .recipe-meta{display:flex;flex-wrap:wrap;gap:8px;margin:12px 0} .meta-pill{display:inline-flex;gap:5px;align-items:center;max-width:100%;padding:7px 10px;border-radius:999px;background:var(--theme-soft);color:var(--theme-accent-dark);border:1px solid var(--border);font-size:0.82rem;font-weight:900;overflow-wrap:anywhere} body[data-theme="halloween"] .meta-pill{background:rgba(255,255,255,0.08);color:#ffedd5} .recommendation-card .meta-pill{background:rgba(255,255,255,0.13);color:#ffffff;border-color:rgba(255,255,255,0.17)} .recipe-card .meta-pill:nth-child(n + 4){display:none} .match-info{display:grid;gap:8px;margin:14px 0} .match-line,.missing-line{padding:10px 12px;border-radius:17px;font-size:0.92rem;line-height:1.45;overflow-wrap:anywhere} .match-line strong,.missing-line strong{display:inline-block;margin-right:4px} .match-line{background:#f7fee7;color:#365314} body[data-theme="halloween"] .match-line{background:rgba(34,197,94,0.12);color:#dcfce7} .missing-line{background:#fff7ed;color:#9a3412} body[data-theme="halloween"] .missing-line{background:rgba(249,115,22,0.14);color:#fed7aa} .recipe-actions{display:flex;gap:9px;margin-top:13px} .small-button,.ghost-button{min-height:44px;padding:11px 14px;border-radius:999px;font-weight:900} .small-button{background:var(--theme-button);color:#ffffff} .ghost-button{background:rgba(255,247,237,0.85);border:1px solid var(--border);color:var(--theme-accent-dark)} body[data-theme="halloween"] .ghost-button{background:rgba(255,255,255,0.08);color:#ffedd5} .empty-state{padding:28px 16px;border:1px dashed #fdba74;border-radius:24px;text-align:center;color:var(--muted);background:rgba(255,247,237,0.72);line-height:1.5} body[data-theme="halloween"] .empty-state{background:rgba(255,255,255,0.06);border-color:rgba(249,115,22,0.42)} .app-footer{margin-top:32px;padding:14px 0 28px} .footer-inner{position:relative;max-width:680px;margin:0 auto;padding:28px 20px 30px;border-radius:36px;background:radial-gradient(circle at top left,var(--theme-bg-a),transparent 40%),linear-gradient(145deg,var(--theme-card-strong),rgba(255,247,237,0.78));border:1px solid var(--border);box-shadow:0 24px 60px rgba(67,43,24,0.13),inset 0 1px 0 rgba(255,255,255,0.46);overflow:hidden} body[data-theme="halloween"] .footer-inner{background:radial-gradient(circle at top left,rgba(249,115,22,0.16),transparent 40%),linear-gradient(145deg,rgba(59,40,72,0.88),rgba(34,24,43,0.82))} .footer-inner::before{content:"";position:absolute;inset:14px;border-radius:28px;border:1px solid rgba(214,157,85,0.22);pointer-events:none} .footer-brand{position:relative;z-index:1;display:grid;grid-template-columns:auto 1fr;gap:14px;align-items:center;text-align:left} .footer-kicker{margin:0;color:var(--theme-accent-dark);font-size:0.78rem;font-weight:900;letter-spacing:0.1em;text-transform:uppercase} .footer-claim{margin:3px 0 0;color:var(--theme-deep);font-weight:900;font-size:clamp(1.18rem,3.8vw,1.62rem);line-height:1.16;letter-spacing: -0.025em} .footer-divider{position:relative;z-index:1;height:1px;margin:22px 0 18px;background:linear-gradient(90deg,transparent,rgba(185,75,22,0.2),rgba(54,88,59,0.18),transparent)} .footer-signature{position:relative;z-index:1;text-align:center} .footer-signature p{margin:0;color:var(--muted);font-size:0.9rem} .footer-signature strong{display:block;margin-top:4px;color:var(--theme-deep);font-size:clamp(1.25rem,3.8vw,1.58rem);line-height:1.16} .footer-actions{position:relative;z-index:1;display:grid;justify-items:center;gap:10px;margin-top:20px} .footer-link{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:13px 22px;border-radius:999px;background:var(--theme-button);color:#ffffff;font-weight:900;text-decoration:none;font-size:clamp(0.95rem,3vw,1.08rem);line-height:1.2;box-shadow:0 16px 30px rgba(185,75,22,0.18)} .footer-reset-button{min-height:40px;padding:9px 15px;border-radius:999px;background:rgba(255,250,240,0.78);border:1px solid var(--border);color:var(--muted);font-weight:800} body[data-theme="halloween"] .footer-reset-button{background:rgba(255,255,255,0.08)} .bottom-nav{position:fixed;left:50%;bottom:max(12px,env(safe-area-inset-bottom));z-index:50;width:min(calc(100% - 24px),520px);height:var(--nav-height);transform:translateX(-50%);display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:7px;padding:8px;border:1px solid var(--border);border-radius:28px;background:rgba(255,255,255,0.88);box-shadow:var(--shadow);backdrop-filter:blur(16px)} body[data-theme="halloween"] .bottom-nav{background:rgba(34,24,43,0.86)} .nav-link{display:grid;place-items:center;gap:2px;min-width:0;border-radius:20px;text-decoration:none;color:var(--muted);font-size:0.76rem;font-weight:900;transition:background 0.18s ease,color 0.18s ease,transform 0.18s ease} .nav-icon{width:21px;height:21px;display:grid;place-items:center;border-radius:999px;font-size:0.88rem;line-height:1;border:1px solid rgba(111,117,107,0.18)} .nav-link.active{background:rgba(243,230,207,0.92);color:var(--theme-accent-dark);transform:translateY(-1px)} body[data-theme="halloween"] .nav-link.active{background:rgba(249,115,22,0.18);color:#ffedd5} .nav-link.active .nav-icon{border-color:rgba(185,75,22,0.28);background:rgba(255,255,255,0.56)} .modal{position:fixed;inset:0;z-index:200;display:grid;place-items:end center;padding:16px} .modal.hidden{display:none} .modal-backdrop{position:absolute;inset:0;background:rgba(38,53,42,0.46)} body[data-theme="halloween"] .modal-backdrop{background:rgba(15,10,20,0.72)} .modal-card{position:relative;width:min(100%,760px);max-width:calc(100vw - 32px);max-height:min(88vh,820px);overflow:auto;z-index:1;background:#ffffff;border-radius:30px;padding:22px;box-shadow:var(--shadow)} body[data-theme="halloween"] .modal-card{background:#241527;color:#f8efe1;border:1px solid rgba(249,115,22,0.32)} .close-button{position:sticky;top:0;float:right;width:38px;height:38px;display:grid;place-items:center;border-radius:50%;background:#fff7ed;color:#7c2d12;font-size:1.4rem;font-weight:900;z-index:3} body[data-theme="halloween"] .close-button{background:rgba(249,115,22,0.18);color:#ffedd5} .modal-card h3{margin-bottom:8px;color:var(--theme-deep);font-size:1.55rem;overflow-wrap:anywhere} .modal-card ol{padding-left:22px;line-height:1.58} .modal-card li{margin-bottom:8px} .detail-box{margin-top:14px;padding:13px 14px;border-radius:18px;background:var(--theme-soft);color:var(--muted);line-height:1.45;overflow-wrap:anywhere} body[data-theme="halloween"] .detail-box{background:rgba(255,255,255,0.08)} .modal-recipe-hero{display:grid;grid-template-columns:minmax(0,240px) minmax(0,1fr);gap:18px;align-items:center;margin-bottom:18px} .modal-recipe-image-wrap{width:100%;aspect-ratio:4 / 3;overflow:hidden;border-radius:24px;background:radial-gradient(circle at top left,var(--theme-bg-a),transparent 40%),linear-gradient(145deg,var(--theme-soft),var(--theme-soft-2));border:1px solid var(--border);box-shadow:0 14px 28px rgba(67,43,24,0.1)} .modal-recipe-image-wrap img{width:100%;height:100%;object-fit:cover;display:block} .modal-recipe-image-wrap.image-missing{display:grid;place-items:center} .modal-recipe-image-wrap.image-missing::before{content:"🥘";font-size:3rem} .modal-title-area{min-width:0} .modal-title-area h3{margin:0 0 8px} .modal-category{display:inline-flex;width:fit-content;margin-bottom:9px;padding:7px 10px;border-radius:999px;background:var(--theme-soft-2);color:var(--theme-deep);font-size:0.78rem;font-weight:900} .modal-description{margin:10px 0 0;color:var(--muted);line-height:1.55} .portion-panel{display:flex;justify-content:space-between;align-items:center;gap:14px;margin-top:16px;padding:14px;border-radius:22px;background:linear-gradient(145deg,var(--theme-soft-2),rgba(255,247,237,0.86));border:1px solid var(--border)} body[data-theme="halloween"] .portion-panel{background:linear-gradient(145deg,rgba(249,115,22,0.18),rgba(124,58,237,0.12))} .portion-panel p{margin:0;color:var(--theme-deep);font-weight:900} .portion-controls{display:inline-flex;align-items:center;gap:8px;padding:7px;border-radius:999px;background:rgba(255,255,255,0.82);border:1px solid var(--border)} body[data-theme="halloween"] .portion-controls{background:rgba(255,255,255,0.08)} .portion-button{width:38px;height:38px;display:grid;place-items:center;border-radius:999px;background:var(--theme-button);color:#ffffff;font-size:1.25rem;font-weight:900} .portion-count{min-width:34px;text-align:center;color:var(--theme-deep);font-size:1.08rem;font-weight:900} .modal-section-title{margin:22px 0 10px;color:var(--theme-deep);font-size:1.12rem} .ingredient-list{display:grid;gap:8px;margin:0;padding:0;list-style:none} .ingredient-list li{display:flex;justify-content:space-between;gap:12px;padding:11px 12px;border-radius:16px;background:var(--theme-soft);border:1px solid var(--border);color:var(--muted);line-height:1.35} body[data-theme="halloween"] .ingredient-list li{background:rgba(255,255,255,0.08)} .ingredient-list strong{color:var(--theme-deep);text-align:right;white-space:nowrap} .recipe-tip-box{margin-top:16px;padding:14px;border-radius:20px;background:linear-gradient(145deg,var(--theme-soft),rgba(255,250,240,0.9));border:1px solid var(--border);color:var(--theme-accent-dark);line-height:1.5} body[data-theme="halloween"] .recipe-tip-box{background:linear-gradient(145deg,rgba(249,115,22,0.18),rgba(255,255,255,0.06));color:#ffedd5} .recipe-tip-box strong{display:block;margin-bottom:5px;color:var(--theme-accent-dark)} .alternative-list{display:grid;gap:8px;margin:0;padding:0;list-style:none} .alternative-list li{padding:11px 12px;border-radius:16px;background:var(--theme-soft-2);border:1px solid var(--border);color:#365314;line-height:1.45} body[data-theme="halloween"] .alternative-list li{background:rgba(34,197,94,0.1);color:#dcfce7} @media (min-width:760px){.recommendation-card{display:grid;grid-template-columns:minmax(260px,0.95fr) minmax(0,1.05fr);align-items:stretch} .recommendation-card .recipe-card-image{height:100%;min-height:330px;aspect-ratio:auto;border-bottom:none;border-right:1px solid rgba(255,237,213,0.16)} .recommendation-card .recipe-card-content{display:flex;flex-direction:column;justify-content:center}} @media (min-width:921px){.recipe-grid{grid-template-columns:repeat(2,minmax(0,1fr))} .recommendation-card{padding:0}} @media (max-width:820px){.app{padding:18px 12px 40px} .quick-ingredients{grid-template-columns:repeat(3,minmax(0,1fr))} .hero-section,.card,.recommendation-section,.results-section{border-radius:28px}} @media (max-width:620px){:root{ --radius:24px} body{padding-bottom:calc(var(--nav-height) + 18px)} .welcome-screen{padding:10px} .welcome-card{width:min(100%,440px);max-width:calc(100vw - 20px);padding:22px 14px 20px;border-radius:34px} .welcome-card::before{inset:10px;border-radius:26px} h1{font-size:clamp(2rem,10vw,3rem);letter-spacing: -0.035em} .welcome-headline{font-size:1.18rem} .welcome-text{font-size:0.92rem} .theme-preview-card{grid-template-columns:1fr;gap:8px;margin-top:18px;padding:15px;text-align:center} .theme-preview-copy{padding:0;display:grid;justify-items:center} .theme-preview-copy p{max-width:310px} .theme-preview-mascot-wrap{min-height:170px;order: -1} .welcome-mascot{width:min(170px,50vw)} .theme-preview-glow{width:150px;height:120px} .theme-picker{padding:13px} .theme-picker-heading{display:block;text-align:center} .theme-picker-heading p{margin-top:4px} .theme-options{grid-template-columns:1fr} .theme-option,.theme-option-wide{grid-column:auto;min-height:62px} .theme-option-icon{width:42px;height:42px} .welcome-options{grid-template-columns:1fr;justify-items:start;width:min(100%,330px)} .hero-top{align-items:flex-start} .hero-top h2{font-size:clamp(1.8rem,8.2vw,2.8rem);letter-spacing: -0.02em;white-space:normal} .hero-mascot{width:78px} .buddy-message{align-items:flex-start} .buddy-mascot{width:42px} .mood-header,.decision-header{align-items:flex-start} .mood-options{grid-template-columns:1fr} .mood-option,.mood-option-wide{grid-column:auto;min-height:66px} .mood-icon{width:44px;height:44px} .mood-insight{display:grid;gap:4px} .mood-insight strong{white-space:normal} .decision-actions{grid-template-columns:1fr} .decision-secondary-button{width:100%} .decision-result-actions{display:grid;grid-template-columns:1fr} .input-row{grid-template-columns:1fr} .input-row button{min-height:50px} .quick-ingredients{grid-template-columns:repeat(2,minmax(0,1fr))} .card-title,.section-heading{display:block} .card-title-with-image,.section-heading-with-image,.rescue-content{display:flex} .counter-text{text-align:left;margin-top:6px} .recipe-card-content{padding:16px} .recommendation-card .recipe-card-content{padding:18px} .recipe-card-image{aspect-ratio:16 / 11} .recipe-card-image.large{aspect-ratio:16 / 10} .recipe-actions{display:grid;grid-template-columns:1fr} .small-button,.ghost-button{width:100%} .footer-brand{grid-template-columns:1fr;justify-items:center;text-align:center} .footer-inner{padding:28px 16px 30px} .footer-link,.footer-reset-button{width:min(100%,340px)} .modal{padding:10px} .modal-card{max-width:calc(100vw - 20px);padding:16px;border-radius:26px} .modal-recipe-hero{grid-template-columns:1fr} .modal-recipe-image-wrap{border-radius:20px} .portion-panel{align-items:stretch;flex-direction:column} .portion-controls{justify-content:space-between;width:100%} .ingredient-list li{flex-direction:column;gap:5px} .ingredient-list strong{text-align:left;white-space:normal}} @media (max-width:390px){.app{padding-left:10px;padding-right:10px} .welcome-card{padding:20px 12px 18px} h1{font-size:clamp(1.75rem,9vw,2.45rem)} .theme-preview-card{padding:13px} .welcome-mascot{width:min(150px,48vw)} .theme-option{min-height:58px} .hero-top h2{font-size:clamp(1.6rem,8vw,2.3rem)} .hero-mascot{width:64px} .section-mascot{width:58px} .quick-button{font-size:0.9rem} .mood-option{padding:10px} .mood-copy strong{font-size:0.9rem} .mood-copy small{font-size:0.74rem} .decision-result{padding:14px} .decision-picked h4{font-size:1.24rem} .bottom-nav{width:min(calc(100% - 16px),500px);gap:6px;padding:8px} .nav-link{font-size:0.72rem}} @media (max-height:560px) and (orientation:landscape){:root{ --nav-height:64px} body{padding-bottom:calc(var(--nav-height) + 14px)} .welcome-screen{align-items:start;padding:10px} .welcome-card{width:min(100%,860px);max-width:calc(100vw - 20px);padding:14px;border-radius:26px} .welcome-header{display:none} .theme-preview-card{grid-template-columns:1.1fr 0.8fr;margin:0 0 10px;min-height:190px} .theme-preview-mascot-wrap{min-height:150px} .welcome-mascot{width:150px} .theme-options{grid-template-columns:repeat(4,minmax(0,1fr))} .theme-option,.theme-option-wide{grid-column:auto;min-height:50px;padding:8px} .theme-option-icon{width:34px;height:34px;font-size:1rem} .theme-option-copy small{display:none} .welcome-options{grid-template-columns:repeat(2,minmax(0,auto))} .large-button{min-height:46px} .app{width:min(100%,980px);padding:12px 12px 28px} .hero-section{padding:15px} .hero-top h2{font-size:clamp(2rem,5vw,3rem)} .mood-options{grid-template-columns:repeat(4,minmax(0,1fr))} .mood-option,.mood-option-wide{grid-column:auto;min-height:56px;padding:8px} .mood-icon{width:36px;height:36px;font-size:1.05rem} .mood-copy small{display:none} .decision-actions{grid-template-columns:minmax(0,1fr) auto} .quick-ingredients{grid-template-columns:repeat(4,minmax(0,1fr))} .card,.recommendation-section,.results-section{padding:15px} .recommendation-card,.recipe-card{padding:0} .bottom-nav{height:var(--nav-height);bottom:8px} .nav-link{font-size:0.72rem}} #updateFlyer .update-pinup-decoration{display:none !important;opacity:0 !important;visibility:hidden !important} #updateFlyer .update-pinup-header{position:relative !important;z-index:3 !important;display:grid !important;grid-template-columns:minmax(0,1fr) 190px !important;gap:8px !important;align-items:start !important;padding-top:86px !important;margin:0 0 18px !important} #updateFlyer .update-pinup-title-area{position:relative !important;z-index:3 !important;min-width:0 !important;padding-right:0 !important} #updateFlyer .update-pinup-mascot-box{position:relative !important;z-index:4 !important;top:auto !important;right:auto !important;bottom:auto !important;left:auto !important;justify-self:end !important;align-self:start !important;width:170px !important;height:170px !important;margin-top:112px !important;display:grid !important;place-items:center !important;transform:none !important;pointer-events:none !important} #updateFlyer .update-pinup-kumpel{display:block !important;width:154px !important;height:auto !important;max-width:none !important;object-fit:contain !important;transform:none !important} @media (max-width:820px){#updateFlyer .update-pinup-header{grid-template-columns:minmax(0,1fr) 165px !important;gap:6px !important;padding-top:86px !important} #updateFlyer .update-pinup-mascot-box{width:145px !important;height:145px !important;margin-top:106px !important} #updateFlyer .update-pinup-kumpel{width:132px !important}} @media (max-width:620px){#updateFlyer .update-pinup-header{display:block !important;position:relative !important;padding-top:132px !important;margin-bottom:16px !important} #updateFlyer .update-pinup-title-area{position:relative !important;z-index:3 !important;padding-right:0 !important} #updateFlyer .update-pinup-mascot-box{position:absolute !important;top:18px !important;right:72px !important;width:108px !important;height:108px !important;margin-top:0 !important;display:grid !important;place-items:center !important;pointer-events:none !important} #updateFlyer .update-pinup-kumpel{width:96px !important;height:auto !important;max-width:none !important}} @media (max-width:390px){#updateFlyer .update-pinup-header{padding-top:124px !important} #updateFlyer .update-pinup-mascot-box{top:18px !important;right:58px !important;width:98px !important;height:98px !important} #updateFlyer .update-pinup-kumpel{width:88px !important}} @media (max-width:340px){#updateFlyer .update-pinup-header{padding-top:116px !important} #updateFlyer .update-pinup-mascot-box{top:16px !important;right:48px !important;width:90px !important;height:90px !important} #updateFlyer .update-pinup-kumpel{width:80px !important}}

/* Küchenkumpel empfiehlt */
#dailyRecommendationSection{position:relative;overflow:hidden;background:radial-gradient(circle at 96% 10%,var(--theme-bg-a),transparent 34%),linear-gradient(145deg,var(--theme-card-strong),var(--theme-card))}#dailyRecommendationSection::before{content:"";position:absolute;right:-90px;top:-110px;width:240px;height:240px;border-radius:999px;background:radial-gradient(circle,var(--theme-bg-a),transparent 68%);pointer-events:none}#dailyRecommendationSection .daily-recommendation-header{position:relative;z-index:2;display:flex;justify-content:space-between;align-items:flex-start;gap:16px;margin-bottom:16px}#dailyRecommendationSection .daily-recommendation-header h3{margin:0 0 7px;color:var(--theme-deep);font-size:clamp(1.28rem,4vw,2rem);letter-spacing:-.04em;line-height:1.08}#dailyRecommendationSection .daily-recommendation-header p:not(.eyebrow){margin:0;max-width:560px;color:var(--muted);line-height:1.48}#dailyRecommendationSection .daily-recommendation-mascot{transform:rotate(3deg)}#dailyRecommendationSection .daily-recommendation-result{position:relative;z-index:2;margin:0 0 14px;padding:14px;border-radius:24px;background:rgba(255,255,255,.58);border:1px solid var(--border);box-shadow:inset 0 1px 0 rgba(255,255,255,.55)}body[data-theme="halloween"] #dailyRecommendationSection .daily-recommendation-result{background:rgba(255,255,255,.07)}#dailyRecommendationSection .empty-daily-recommendation{display:grid;gap:4px}#dailyRecommendationSection .daily-recommendation-result strong{display:block;color:var(--theme-deep);margin-bottom:4px}#dailyRecommendationSection .daily-recommendation-result span,#dailyRecommendationSection .daily-recommendation-result p{display:block;color:var(--muted);line-height:1.45;margin:0}#dailyRecommendationSection .daily-recommendation-recipe{display:grid;grid-template-columns:96px minmax(0,1fr);gap:14px;align-items:center}#dailyRecommendationSection .daily-recommendation-image{width:96px;height:96px;border-radius:22px;object-fit:cover;background:var(--theme-soft);border:1px solid var(--border);box-shadow:0 12px 26px rgba(67,43,24,.12)}#dailyRecommendationSection .daily-recommendation-copy{min-width:0}#dailyRecommendationSection .daily-recommendation-copy h4{margin:0 0 7px;color:var(--theme-deep);font-size:1.22rem;line-height:1.12;letter-spacing:-.03em}#dailyRecommendationSection .daily-recommendation-copy p{margin:0 0 10px;color:var(--muted);line-height:1.45}#dailyRecommendationSection .daily-recommendation-meta{display:flex;flex-wrap:wrap;gap:7px;margin:0 0 12px}#dailyRecommendationSection .daily-recommendation-meta span{display:inline-flex;align-items:center;width:auto;padding:6px 9px;border-radius:999px;background:var(--theme-soft);border:1px solid var(--border);color:var(--theme-accent-dark);font-size:.76rem;font-weight:900;line-height:1.1}body[data-theme="halloween"] #dailyRecommendationSection .daily-recommendation-meta span{background:rgba(249,115,22,.16);color:#ffedd5}#dailyRecommendationSection .daily-recommendation-open-button{width:auto;margin-top:0;padding:10px 14px;min-height:40px}#dailyRecommendationSection .daily-recommendation-actions{position:relative;z-index:2;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px;align-items:center}#dailyRecommendationSection .daily-recommendation-button,#dailyRecommendationSection .daily-recommendation-secondary-button{min-height:50px}#dailyRecommendationSection .daily-recommendation-secondary-button:disabled{opacity:.48}@media (max-width:620px){#dailyRecommendationSection .daily-recommendation-header{align-items:flex-start}#dailyRecommendationSection .daily-recommendation-recipe{grid-template-columns:82px minmax(0,1fr);gap:11px}#dailyRecommendationSection .daily-recommendation-image{width:82px;height:82px;border-radius:19px}#dailyRecommendationSection .daily-recommendation-copy h4{font-size:1.08rem}#dailyRecommendationSection .daily-recommendation-copy p{font-size:.92rem}#dailyRecommendationSection .daily-recommendation-actions{grid-template-columns:1fr}#dailyRecommendationSection .daily-recommendation-secondary-button{width:100%}}@media (max-width:390px){#dailyRecommendationSection .daily-recommendation-header{gap:10px}#dailyRecommendationSection .daily-recommendation-header .section-mascot{width:58px}#dailyRecommendationSection .daily-recommendation-recipe{grid-template-columns:1fr}#dailyRecommendationSection .daily-recommendation-image{width:100%;height:150px;border-radius:20px}#dailyRecommendationSection .daily-recommendation-meta span{font-size:.72rem}}

/* =========================================================
   KÜCHENKUMPEL 1.5.0
   Weniger Chaos, mehr Kochen
   Finale Layout-Anpassungen für die neue, ruhigere Struktur
   ========================================================= */

:root{
  --compact-gap:14px;
  --compact-radius:26px;
}

/* Allgemeiner Seitenfluss */
.app{
  padding-bottom:calc(var(--nav-height) + 52px) !important;
}

#home,
#start,
#moodSection,
#dailyRecommendationSection,
#recommendationSection,
#recipes,
#favoritePreviewSection,
#favorites,
#about{
  scroll-margin-top:18px;
}

/* Bottom Nav bleibt sauber mit 4 Punkten */
.bottom-nav{
  grid-template-columns:repeat(4,minmax(0,1fr)) !important;
  height:var(--nav-height) !important;
}

.nav-link{
  min-width:0 !important;
  overflow:hidden !important;
}

/* Welcome Screen kompakter */
.compact-welcome-card{
  width:min(100%,680px) !important;
  padding:22px !important;
}

.compact-welcome-header{
  margin-bottom:14px !important;
}

.compact-welcome-header h1{
  margin-bottom:6px !important;
}

.compact-welcome-header .welcome-headline{
  margin-top:8px !important;
}

.compact-welcome-header .welcome-text{
  margin-top:6px !important;
}

.compact-theme-preview-card{
  grid-template-columns:minmax(0,1fr) auto !important;
  min-height:0 !important;
  padding:14px 16px !important;
  margin:16px auto 14px !important;
}

.compact-theme-mascot-wrap{
  min-height:128px !important;
  width:150px !important;
}

.compact-theme-mascot-wrap .welcome-mascot{
  width:130px !important;
}

.compact-theme-picker{
  padding:13px !important;
  margin-bottom:14px !important;
}

.compact-theme-picker .theme-picker-heading{
  margin-bottom:10px !important;
}

.compact-theme-picker .theme-option{
  min-height:60px !important;
  border-radius:18px !important;
  padding:8px 10px !important;
}

.compact-theme-picker .theme-option-icon{
  width:38px !important;
  height:38px !important;
  border-radius:14px !important;
  font-size:1.08rem !important;
}

.compact-welcome-actions{
  gap:11px !important;
}

/* Hero ruhiger */
.hero-section{
  margin-bottom:16px !important;
}

.hero-top h2{
  white-space:normal !important;
}

.hero-copy p:last-child{
  max-width:520px !important;
}

.buddy-message{
  margin-top:14px !important;
}

/* Neue Hauptkarte */
.main-cooking-card{
  position:relative;
  overflow:hidden;
  background:
    radial-gradient(circle at 92% 8%,var(--theme-bg-a),transparent 34%),
    linear-gradient(145deg,var(--theme-card-strong),rgba(255,250,240,0.8)) !important;
}

body[data-theme="halloween"] .main-cooking-card{
  background:
    radial-gradient(circle at 92% 8%,rgba(249,115,22,0.18),transparent 36%),
    linear-gradient(145deg,rgba(59,40,72,0.92),rgba(34,24,43,0.84)) !important;
}

.main-cooking-card::before{
  content:"";
  position:absolute;
  right:-70px;
  top:-70px;
  width:190px;
  height:190px;
  border-radius:999px;
  background:radial-gradient(circle,var(--theme-bg-a),transparent 68%);
  pointer-events:none;
}

.main-cooking-header,
.main-input-row,
.quick-ingredient-area,
.selected-area,
.main-actions{
  position:relative;
  z-index:1;
}

.main-cooking-header{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:16px;
  margin-bottom:15px;
}

.main-cooking-header h3{
  margin:0 0 7px;
  color:var(--theme-deep);
  font-size:clamp(1.45rem,4.2vw,2.15rem);
  line-height:1.08;
  letter-spacing:-0.04em;
}

.main-cooking-header p:not(.eyebrow){
  margin:0;
  max-width:540px;
  color:var(--muted);
  line-height:1.48;
}

.main-cooking-mascot{
  transform:rotate(2deg);
}

.main-input-row{
  margin:0 0 14px !important;
}

.quick-ingredient-area{
  display:grid;
  gap:10px;
}

.quick-ingredient-heading{
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  gap:12px;
  color:var(--muted);
  font-size:0.88rem;
  line-height:1.35;
}

.quick-ingredient-heading strong{
  color:var(--theme-deep);
  font-size:0.98rem;
}

.quick-ingredient-heading span{
  text-align:right;
}

.compact-quick-ingredients{
  margin-top:0 !important;
}

.compact-quick-ingredients.collapsed .quick-button:nth-child(n+9){
  display:none;
}

.soft-wide-button{
  width:100%;
  min-height:48px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding:12px 16px;
  border-radius:999px;
  background:linear-gradient(145deg,rgba(255,250,240,0.92),rgba(255,237,213,0.72));
  border:1px solid var(--border);
  color:var(--theme-accent-dark);
  font-weight:900;
  box-shadow:0 10px 22px rgba(67,43,24,0.08),inset 0 1px 0 rgba(255,255,255,0.7);
  transition:transform 0.16s ease,box-shadow 0.16s ease,background 0.16s ease;
}

.soft-wide-button:hover{
  transform:translateY(-1px);
  box-shadow:0 14px 28px rgba(67,43,24,0.1),inset 0 1px 0 rgba(255,255,255,0.74);
}

body[data-theme="halloween"] .soft-wide-button{
  background:rgba(255,255,255,0.08);
  color:#ffedd5;
  border-color:rgba(249,115,22,0.28);
}

#selectedArea.hidden{
  display:none !important;
}

.main-cooking-card .selected-area{
  margin-top:15px !important;
  padding:12px;
  border-radius:22px;
  background:rgba(255,255,255,0.48);
  border:1px solid var(--border);
}

body[data-theme="halloween"] .main-cooking-card .selected-area{
  background:rgba(255,255,255,0.06);
}

.main-actions{
  display:grid;
  margin-top:15px;
}

.main-recommendation-button{
  min-height:54px !important;
  font-size:1.04rem;
}

/* Küchenlage als Chips */
.compact-mood-card{
  padding:16px !important;
}

.compact-section-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  margin-bottom:8px;
  position:relative;
  z-index:1;
}

.compact-section-header h3{
  margin:0;
  color:var(--theme-deep);
  font-size:clamp(1.16rem,3.2vw,1.46rem);
  letter-spacing:-0.03em;
}

.compact-mood-description{
  position:relative;
  z-index:1;
  margin:0 0 12px !important;
  color:var(--muted);
  line-height:1.45;
}

.mood-chip-list{
  display:flex !important;
  flex-wrap:wrap;
  gap:8px !important;
  margin:0 0 12px !important;
}

.mood-chip{
  width:auto !important;
  min-height:44px !important;
  display:inline-flex !important;
  grid-template-columns:none !important;
  align-items:center !important;
  gap:7px !important;
  padding:8px 10px !important;
  border-radius:999px !important;
}

.mood-chip .mood-icon{
  width:30px !important;
  height:30px !important;
  border-radius:999px !important;
  font-size:0.98rem !important;
}

.mood-chip .mood-copy{
  display:block !important;
}

.mood-chip .mood-copy strong{
  display:block;
  font-size:0.86rem !important;
  line-height:1.05;
}

.mood-chip .mood-copy small{
  display:block;
  font-size:0.68rem !important;
  line-height:1.05;
}

.mood-chip-featured{
  border-color:var(--theme-accent) !important;
  box-shadow:0 10px 22px rgba(201,91,36,0.13),inset 0 1px 0 rgba(255,255,255,0.72) !important;
}

.mood-chip-featured:not(.active){
  background:linear-gradient(145deg,var(--theme-soft),rgba(255,237,213,0.74)) !important;
}

.compact-mood-insight{
  margin-top:0 !important;
  padding:10px 12px !important;
  border-radius:18px !important;
  font-size:0.86rem !important;
}

/* Tagesempfehlung ist erst nach Klick sichtbar */
#dailyRecommendationSection.hidden{
  display:none !important;
}

.daily-recommendation-card{
  margin-top:16px !important;
}

.daily-recommendation-actions{
  grid-template-columns:1fr !important;
}

/* Filter kompakter */
.compact-filters{
  margin:12px 0 0 !important;
  padding:10px 2px 2px !important;
}

/* Bester Treffer ruhiger */
.compact-recommendation-section{
  margin-top:16px !important;
}

/* Weitere Rezepte einklappbar */
.compact-results-section{
  margin-top:16px !important;
}

.collapsible-recipe-grid.hidden{
  display:none !important;
}

.more-recipes-button{
  margin:0 0 14px !important;
}

/* Favoriten Vorschau */
.favorite-preview-card{
  margin-top:16px !important;
}

.favorite-preview-card.hidden,
.compact-favorites-section.hidden{
  display:none !important;
}

.favorite-preview-content{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  margin-bottom:13px;
}

.favorite-preview-content h3{
  margin:0 0 7px;
  color:var(--theme-deep);
  font-size:clamp(1.18rem,3.4vw,1.52rem);
  letter-spacing:-0.03em;
}

.favorite-preview-content p:not(.eyebrow){
  margin:0;
  color:var(--muted);
  line-height:1.45;
}

/* Footer schlanker */
.compact-footer{
  margin-top:20px !important;
  padding-bottom:20px !important;
}

.compact-footer .footer-inner{
  max-width:680px !important;
  display:grid !important;
  grid-template-columns:minmax(0,1fr) auto !important;
  align-items:center !important;
  gap:14px !important;
  padding:16px 18px !important;
  border-radius:26px !important;
}

.compact-footer .footer-inner::before{
  display:none !important;
}

.compact-footer-brand{
  display:flex !important;
  align-items:center !important;
  gap:10px !important;
  text-align:left !important;
}

.compact-footer .footer-mascot{
  width:48px !important;
}

.compact-footer .footer-claim{
  margin:0 !important;
  font-size:clamp(1rem,3vw,1.22rem) !important;
}

.compact-footer-actions{
  display:flex !important;
  align-items:center !important;
  justify-content:flex-end !important;
  gap:8px !important;
  margin:0 !important;
}

.compact-footer .footer-link,
.compact-footer .footer-reset-button{
  width:auto !important;
  min-height:40px !important;
  padding:9px 13px !important;
  font-size:0.88rem !important;
}

/* Update-Flyer bleibt stabil mit transparentem Klemmbrett-Kumpel */
#updateFlyer .update-pinup-mascot-box{
  background:transparent !important;
  border:0 !important;
  box-shadow:none !important;
  overflow:visible !important;
}

#updateFlyer .update-pinup-kumpel{
  display:block !important;
  background:transparent !important;
  border:0 !important;
  box-shadow:none !important;
  width:190px !important;
  max-width:190px !important;
  height:auto !important;
  object-fit:contain !important;
}

/* Desktop Feinschliff */
@media (min-width:760px){
  .main-cooking-card{
    padding:20px !important;
  }

  .favorite-preview-card{
    display:grid;
    grid-template-columns:minmax(0,1fr) 220px;
    align-items:center;
    gap:16px;
  }

  .favorite-preview-card .soft-wide-button{
    margin:0;
  }
}

/* Mobile Feinschliff */
@media (max-width:620px){
  .app{
    padding-left:10px !important;
    padding-right:10px !important;
    padding-bottom:calc(var(--nav-height) + 58px) !important;
  }

  .compact-welcome-card{
    width:min(100%,440px) !important;
    max-width:calc(100vw - 20px) !important;
    padding:18px 13px 16px !important;
  }

  .compact-welcome-header{
    margin-bottom:10px !important;
  }

  .compact-welcome-header h1{
    font-size:clamp(1.95rem,10vw,2.75rem) !important;
  }

  .compact-welcome-header .welcome-headline{
    font-size:1.08rem !important;
  }

  .compact-theme-preview-card{
    grid-template-columns:1fr auto !important;
    gap:10px !important;
    padding:12px !important;
    text-align:left !important;
  }

  .compact-theme-mascot-wrap{
    order:0 !important;
    min-height:92px !important;
    width:96px !important;
  }

  .compact-theme-mascot-wrap .welcome-mascot{
    width:86px !important;
  }

  .compact-theme-preview-card .theme-preview-copy{
    text-align:left !important;
    justify-items:start !important;
  }

  .compact-theme-preview-card .theme-preview-copy h2{
    font-size:1.08rem !important;
  }

  .compact-theme-preview-card .theme-preview-copy p{
    font-size:0.84rem !important;
    line-height:1.35 !important;
  }

  .compact-theme-picker .theme-options{
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
  }

  .compact-theme-picker .theme-option{
    min-height:56px !important;
  }

  .compact-theme-picker .theme-option-wide{
    grid-column:1 / -1 !important;
  }

  .main-cooking-card,
  .compact-mood-card,
  .daily-recommendation-card,
  .compact-recommendation-section,
  .compact-results-section,
  .favorite-preview-card{
    border-radius:24px !important;
    padding:15px !important;
  }

  .main-cooking-header{
    align-items:flex-start !important;
    gap:10px !important;
  }

  .main-cooking-header .section-mascot{
    width:62px !important;
  }

  .quick-ingredient-heading{
    display:grid;
    gap:3px;
  }

  .quick-ingredient-heading span{
    text-align:left;
  }

  .compact-quick-ingredients{
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
  }

  .mood-chip-list{
    flex-wrap:nowrap !important;
    overflow-x:auto !important;
    padding-bottom:4px !important;
    scrollbar-width:none;
  }

  .mood-chip-list::-webkit-scrollbar{
    display:none;
  }

  .mood-chip{
    flex:0 0 auto !important;
  }

  .mood-chip .mood-copy small{
    display:none !important;
  }

  .compact-mood-insight{
    display:block !important;
  }

  .favorite-preview-content{
    align-items:flex-start;
  }

  .compact-footer .footer-inner{
    grid-template-columns:1fr !important;
    justify-items:center !important;
    text-align:center !important;
  }

  .compact-footer-brand{
    justify-content:center !important;
    text-align:center !important;
  }

  .compact-footer-actions{
    width:100%;
    justify-content:center !important;
  }

  .compact-footer .footer-link,
  .compact-footer .footer-reset-button{
    flex:1 1 0;
  }

  .bottom-nav{
    grid-template-columns:repeat(4,minmax(0,1fr)) !important;
    width:min(calc(100% - 18px),520px) !important;
  }
}

@media (max-width:390px){
  .compact-theme-picker .theme-options{
    grid-template-columns:1fr !important;
  }

  .compact-theme-picker .theme-option-wide{
    grid-column:auto !important;
  }

  .compact-theme-preview-card{
    grid-template-columns:1fr !important;
    text-align:center !important;
  }

  .compact-theme-mascot-wrap{
    order:-1 !important;
    justify-self:center !important;
    width:118px !important;
    min-height:100px !important;
  }

  .compact-theme-mascot-wrap .welcome-mascot{
    width:100px !important;
  }

  .compact-theme-preview-card .theme-preview-copy{
    text-align:center !important;
    justify-items:center !important;
  }

  .main-cooking-header h3{
    font-size:1.38rem !important;
  }

  .compact-quick-ingredients{
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
  }

  .nav-link{
    font-size:0.68rem !important;
  }

  .nav-icon{
    width:19px !important;
    height:19px !important;
  }
}

/* =========================================================
   KUECHENKUMPEL 1.5.0 - FEINSCHLIFF
   Footer sauber + Welcome-Screen mobil ohne angeschnittenen Kumpel
   ========================================================= */

.app{
  padding-bottom:calc(var(--nav-height) + 34px) !important;
}

.compact-footer{
  margin-top:18px !important;
  padding-bottom:calc(var(--nav-height) + 10px) !important;
}

.compact-footer .footer-inner{
  width:min(100%,720px) !important;
  margin:0 auto !important;
}

.compact-footer .footer-claim{
  position:relative !important;
  display:block !important;
  width:max-content !important;
  max-width:100% !important;
  min-width:220px !important;
  color:transparent !important;
  font-size:0 !important;
  line-height:1 !important;
  white-space:normal !important;
}

.compact-footer .footer-claim::before{
  content:"Küchenkumpel by\A Christoph Dietrich";
  white-space:pre-line;
  display:block;
  color:var(--theme-deep);
  font-size:clamp(1.08rem,2.4vw,1.34rem);
  font-weight:900;
  line-height:1.12;
  letter-spacing:-0.025em;
}

@media (min-width:760px){
  .compact-footer{
    margin-top:14px !important;
    padding-bottom:calc(var(--nav-height) + 18px) !important;
  }

  .compact-footer .footer-inner{
    grid-template-columns:minmax(0,1fr) auto !important;
    min-height:88px !important;
  }

  .compact-footer-brand{
    align-items:center !important;
  }

  .compact-footer-actions{
    align-self:center !important;
  }
}

.welcome-screen{
  align-items:start !important;
  place-items:start center !important;
  padding-top:max(14px,env(safe-area-inset-top)) !important;
}

.compact-welcome-card{
  margin:0 auto !important;
  overflow:visible !important;
}

.compact-theme-preview-card{
  overflow:hidden !important;
}

.compact-theme-mascot-wrap{
  overflow:visible !important;
}

.compact-theme-mascot-wrap .welcome-mascot{
  transform:none !important;
  margin-top:0 !important;
}

@media (max-width:620px){
  .welcome-screen{
    display:block !important;
    padding:10px 10px calc(22px + env(safe-area-inset-bottom)) !important;
    overflow-y:auto !important;
    overflow-x:hidden !important;
  }

  .compact-welcome-card{
    width:min(100%,430px) !important;
    max-width:calc(100vw - 20px) !important;
    margin:0 auto !important;
    padding:15px 12px 14px !important;
    border-radius:28px !important;
  }

  .compact-welcome-card::before{
    inset:8px !important;
    border-radius:22px !important;
  }

  .compact-welcome-header{
    margin-bottom:8px !important;
  }

  .compact-welcome-header .eyebrow{
    margin-bottom:4px !important;
    font-size:0.66rem !important;
  }

  .compact-welcome-header h1{
    font-size:clamp(1.78rem,8.8vw,2.42rem) !important;
    line-height:1 !important;
    margin:0 !important;
    white-space:normal !important;
  }

  .compact-welcome-header .welcome-headline{
    margin-top:6px !important;
    font-size:1rem !important;
    line-height:1.18 !important;
  }

  .compact-welcome-header .welcome-text{
    margin-top:3px !important;
    font-size:0.84rem !important;
    line-height:1.3 !important;
  }

  .compact-theme-preview-card{
    display:grid !important;
    grid-template-columns:minmax(0,1fr) 82px !important;
    align-items:center !important;
    gap:8px !important;
    min-height:98px !important;
    margin:10px auto 10px !important;
    padding:10px 12px !important;
    border-radius:22px !important;
    text-align:left !important;
  }

  .compact-theme-preview-card .theme-preview-copy{
    padding:0 !important;
    justify-items:start !important;
    text-align:left !important;
  }

  .compact-theme-preview-card .theme-badge{
    margin-bottom:6px !important;
    padding:6px 9px !important;
    font-size:0.74rem !important;
  }

  .compact-theme-preview-card .theme-preview-copy h2{
    margin-bottom:4px !important;
    font-size:1.02rem !important;
    line-height:1.08 !important;
  }

  .compact-theme-preview-card .theme-preview-copy p{
    max-width:100% !important;
    font-size:0.78rem !important;
    line-height:1.26 !important;
  }

  .compact-theme-mascot-wrap{
    order:0 !important;
    width:82px !important;
    min-height:82px !important;
    height:82px !important;
    justify-self:end !important;
    align-self:center !important;
    display:grid !important;
    place-items:center !important;
  }

  .compact-theme-mascot-wrap .theme-preview-glow{
    width:74px !important;
    height:58px !important;
  }

  .compact-theme-mascot-wrap .welcome-mascot{
    width:74px !important;
    max-width:74px !important;
    height:auto !important;
    margin:0 !important;
    transform:none !important;
  }

  .compact-theme-picker{
    padding:11px !important;
    margin:0 auto 10px !important;
    border-radius:24px !important;
  }

  .compact-theme-picker .theme-picker-heading{
    text-align:center !important;
    margin-bottom:9px !important;
  }

  .compact-theme-picker .theme-picker-heading h2{
    font-size:1.02rem !important;
    line-height:1.12 !important;
  }

  .compact-theme-picker .theme-picker-heading p{
    font-size:0.8rem !important;
    line-height:1.24 !important;
    margin-top:3px !important;
  }

  .compact-theme-picker .theme-options{
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    gap:8px !important;
  }

  .compact-theme-picker .theme-option,
  .compact-theme-picker .theme-option-wide{
    grid-column:auto !important;
    min-height:52px !important;
    border-radius:17px !important;
    padding:7px 8px !important;
    gap:7px !important;
  }

  .compact-theme-picker .theme-option-icon{
    width:34px !important;
    height:34px !important;
    border-radius:12px !important;
    font-size:1rem !important;
  }

  .compact-theme-picker .theme-option-copy strong{
    font-size:0.86rem !important;
    line-height:1.05 !important;
  }

  .compact-theme-picker .theme-option-copy small{
    font-size:0.7rem !important;
    line-height:1.05 !important;
  }

  .compact-welcome-actions{
    gap:9px !important;
  }

  .compact-welcome-actions .large-button{
    min-height:48px !important;
    width:min(100%,330px) !important;
    font-size:0.98rem !important;
  }

  .compact-welcome-actions .welcome-options{
    width:min(100%,330px) !important;
    gap:7px !important;
  }

  .compact-welcome-actions .toggle-option{
    font-size:0.76rem !important;
    line-height:1.16 !important;
  }

  .compact-welcome-actions .fake-toggle{
    width:38px !important;
    height:22px !important;
  }

  .compact-welcome-actions .fake-toggle::after{
    width:16px !important;
    height:16px !important;
  }

  .compact-welcome-actions .toggle-option input:checked + .fake-toggle::after{
    transform:translateX(16px) !important;
  }

  .compact-footer{
    margin-top:14px !important;
    padding-bottom:calc(var(--nav-height) + 18px) !important;
  }

  .compact-footer .footer-inner{
    width:min(100%,430px) !important;
    max-width:calc(100vw - 20px) !important;
    padding:14px 14px !important;
    border-radius:24px !important;
  }

  .compact-footer .footer-claim{
    min-width:0 !important;
    width:auto !important;
  }

  .compact-footer .footer-claim::before{
    font-size:1rem !important;
    line-height:1.12 !important;
    text-align:center !important;
  }
}

@media (max-width:390px){
  .compact-welcome-card{
    padding:13px 10px 12px !important;
  }

  .compact-theme-preview-card{
    grid-template-columns:minmax(0,1fr) 72px !important;
    min-height:88px !important;
    padding:9px 10px !important;
  }

  .compact-theme-mascot-wrap{
    width:72px !important;
    min-height:72px !important;
    height:72px !important;
  }

  .compact-theme-mascot-wrap .welcome-mascot{
    width:66px !important;
    max-width:66px !important;
  }

  .compact-theme-picker .theme-options{
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    gap:7px !important;
  }

  .compact-theme-picker .theme-option{
    min-height:48px !important;
    padding:6px 7px !important;
  }

  .compact-theme-picker .theme-option-icon{
    width:31px !important;
    height:31px !important;
    font-size:0.94rem !important;
  }

  .compact-theme-picker .theme-option-copy strong{
    font-size:0.8rem !important;
  }

  .compact-theme-picker .theme-option-copy small{
    font-size:0.66rem !important;
  }
}

@media (max-height:560px) and (orientation:landscape){
  .welcome-screen{
    display:block !important;
    padding:8px 10px 12px !important;
  }

  .compact-welcome-card{
    width:min(100%,900px) !important;
    padding:12px !important;
  }

  .compact-welcome-header{
    display:block !important;
  }

  .compact-welcome-header h1{
    font-size:2rem !important;
  }

  .compact-theme-preview-card{
    grid-template-columns:minmax(0,1fr) 100px !important;
    min-height:88px !important;
    margin:8px 0 !important;
  }

  .compact-theme-mascot-wrap{
    width:96px !important;
    min-height:80px !important;
    height:80px !important;
  }

  .compact-theme-mascot-wrap .welcome-mascot{
    width:78px !important;
  }

  .compact-theme-picker .theme-options{
    grid-template-columns:repeat(4,minmax(0,1fr)) !important;
  }

  .compact-theme-picker .theme-option{
    min-height:46px !important;
  }

  .compact-theme-picker .theme-option-copy small{
    display:none !important;
  }
}

/* =========================================================
   KUECHENKUMPEL 1.5.0 - MOBILE LOSKOCHEN TOUCH FIX
   Fix für Handy: Button liegt garantiert über allen Deko-Ebenen
   ========================================================= */

.welcome-screen{
  pointer-events:auto !important;
}

.welcome-card,
.compact-welcome-card{
  position:relative !important;
  isolation:isolate !important;
}

.welcome-card::before,
.compact-welcome-card::before,
.welcome-background-deco,
.welcome-deco-one,
.welcome-deco-two,
.theme-preview-glow,
.update-pinup-decoration{
  pointer-events:none !important;
}

.welcome-header,
.compact-welcome-header,
.theme-preview-card,
.compact-theme-preview-card,
.theme-picker,
.compact-theme-picker{
  position:relative !important;
  z-index:2 !important;
}

.welcome-actions,
.compact-welcome-actions{
  position:relative !important;
  z-index:50 !important;
  pointer-events:auto !important;
}

#startAppButton{
  position:relative !important;
  z-index:100 !important;
  pointer-events:auto !important;
  touch-action:manipulation !important;
  -webkit-tap-highlight-color:rgba(0,0,0,0) !important;
  user-select:none !important;
}

#startAppButton::before,
#startAppButton::after{
  pointer-events:none !important;
}

.welcome-options,
.welcome-options *,
.toggle-option,
.toggle-option *{
  pointer-events:auto !important;
}

/* Auf Handy bekommt der Startbutton zusätzlich freien Touch-Raum */
@media (max-width:620px){
  .compact-welcome-actions{
    position:relative !important;
    z-index:80 !important;
    padding-top:2px !important;
    padding-bottom:4px !important;
  }

  #startAppButton{
    min-height:52px !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    width:min(100%,340px) !important;
    margin:0 auto !important;
  }

  .compact-theme-picker{
    position:relative !important;
    z-index:2 !important;
  }
}

/* =========================================================
   FINALER FIX: Welcome-Screen wirklich ausblenden
   Muss ganz am Ende stehen, damit mobile display:block-Regeln nicht gewinnen.
   ========================================================= */

#welcomeScreen.hidden,
.welcome-screen.hidden{
  display:none !important;
  visibility:hidden !important;
  opacity:0 !important;
  pointer-events:none !important;
}