/* === KOCHWELT Redesign 2025 === */
:root{--bg:#faf8f3;--surface:#f0ebe0;--card:#fff;--accent:#c8440a;--accent-h:#a83508;--accent2:#e8a020;--text:#1e130a;--text-s:#5c4033;--muted:#9e8070;--border:#e0d5c5;--nav-bg:rgba(250,248,243,.97);--shadow:0 4px 24px rgba(30,19,10,.08);--shadow-h:0 12px 40px rgba(30,19,10,.16);--r:14px}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{background:var(--bg);color:var(--text);font-family:system-ui,-apple-system,'Segoe UI',sans-serif;font-size:1rem;line-height:1.7;min-height:100vh;overflow-x:hidden}
a{color:var(--accent);text-decoration:none}
a:hover{text-decoration:underline}
img{max-width:100%;height:auto;display:block}
ul{list-style:none}
#navbar{position:fixed;top:0;left:0;right:0;height:62px;display:flex;align-items:center;padding:0 5%;background:var(--nav-bg);backdrop-filter:blur(12px);border-bottom:1px solid var(--border);z-index:1000;transition:box-shadow .3s}
#navbar.scrolled{box-shadow:var(--shadow)}
.navbar-logo{display:flex;align-items:center}
.navbar-logo img{height:44px;width:auto;transition:opacity .2s}
.navbar-logo:hover img{opacity:.82}
nav.desktop-nav{display:flex;align-items:center;gap:.15rem;margin-left:auto}
nav.desktop-nav li a{font-size:.875rem;font-weight:500;color:var(--text-s);padding:.45rem .85rem;border-radius:7px;transition:color .2s,background .2s;text-decoration:none;display:block}
nav.desktop-nav li a:hover,nav.desktop-nav li a.current-site{color:var(--accent);background:rgba(200,68,10,.09)}
.mobile-nav{display:none;margin-left:auto;align-items:center}
.burger-btn{background:none;border:1.5px solid var(--border);border-radius:7px;padding:.35rem .55rem;cursor:pointer;font-size:1.3rem;color:var(--text);line-height:1;transition:border-color .2s,color .2s}
.burger-btn:hover{border-color:var(--accent);color:var(--accent)}
#mobile-menu{display:none;position:fixed;top:62px;left:0;right:0;background:var(--nav-bg);backdrop-filter:blur(12px);border-bottom:1px solid var(--border);padding:.75rem 5%;flex-direction:column;gap:.25rem;z-index:999;animation:slideDown .2s ease}
#mobile-menu.open{display:flex}
#mobile-menu li a{display:block;padding:.6rem .75rem;border-radius:7px;color:var(--text);font-weight:500;text-decoration:none;transition:background .15s,color .15s}
#mobile-menu li a:hover,#mobile-menu li a.current-site{color:var(--accent);background:rgba(200,68,10,.09)}
.ticker-bar{position:fixed;top:62px;left:0;right:0;z-index:998;background:var(--accent);color:#fff;font-size:.76rem;font-weight:600;letter-spacing:.04em;overflow:hidden;height:30px;display:flex;align-items:center;user-select:none}
.ticker-label{flex-shrink:0;padding:0 .9rem;background:rgba(0,0,0,.18);height:100%;display:flex;align-items:center;letter-spacing:.08em;text-transform:uppercase;font-size:.68rem;white-space:nowrap}
.ticker-track-wrap{flex:1;overflow:hidden;height:100%;display:flex;align-items:center}
.ticker-track{display:flex;align-items:center;white-space:nowrap;animation:ticker-scroll 60s linear infinite;will-change:transform}
.ticker-track:hover{animation-play-state:paused}
.ticker-sep{margin:0 1.1rem;opacity:.45}
#main-content{margin-top:92px;min-height:calc(100vh - 92px)}
.hero{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:4.5rem 5% 3.5rem;overflow:hidden;background:linear-gradient(150deg,#fff9f0 0%,#faf3e6 60%,#fff0d5 100%)}
.hero::before{content:'';position:absolute;inset:0;background:radial-gradient(ellipse at 75% 40%,rgba(232,160,32,.18) 0%,transparent 65%),radial-gradient(ellipse at 25% 60%,rgba(200,68,10,.10) 0%,transparent 60%);pointer-events:none}
.hero-emoji{font-size:3.5rem;margin-bottom:1.1rem;animation:float 4s ease-in-out infinite;position:relative}
.hero h1{font-size:clamp(2rem,5vw,3.25rem);font-weight:800;color:var(--text);line-height:1.15;margin-bottom:.65rem;position:relative}
.hero p{font-size:1.05rem;color:var(--text-s);max-width:500px;margin:0 auto;position:relative}
.section-label{font-size:.7rem;font-weight:800;letter-spacing:.2em;text-transform:uppercase;color:var(--accent);margin-bottom:.9rem;display:flex;align-items:center;gap:.75rem}
.section-label::after{content:'';flex:1;height:1px;background:var(--border)}
.recipe-of-day{max-width:960px;margin:3rem auto;padding:0 5%}
.rotd-card{display:grid;grid-template-columns:1fr 1fr;background:var(--card);border-radius:var(--r);overflow:hidden;box-shadow:var(--shadow);transition:box-shadow .35s,transform .35s}
.rotd-card:hover{box-shadow:var(--shadow-h);transform:translateY(-4px)}
.rotd-card .card-img{overflow:hidden}
.rotd-card .card-img img{width:100%;height:100%;object-fit:cover;min-height:280px;transition:transform .5s ease}
.rotd-card:hover .card-img img{transform:scale(1.05)}
.rotd-card .card-body{display:flex;flex-direction:column;justify-content:center;padding:2.25rem 2.25rem 2.25rem 2rem;gap:1rem}
.rotd-card .card-body h2{font-size:1.65rem;font-weight:700;color:var(--text);line-height:1.2}
.rotd-card .card-body p{color:var(--text-s);line-height:1.7}
.btn-primary{display:inline-flex;align-items:center;gap:.5rem;background:var(--accent);color:#fff;font-weight:600;font-size:.9rem;padding:.65rem 1.4rem;border-radius:8px;text-decoration:none;transition:background .2s,transform .15s;align-self:flex-start;cursor:pointer;border:none}
.btn-primary:hover{background:var(--accent-h);text-decoration:none;transform:translateY(-1px)}
.btn-outline{display:inline-flex;align-items:center;gap:.4rem;border:1.5px solid var(--accent);color:var(--accent);font-weight:600;font-size:.875rem;padding:.5rem 1.1rem;border-radius:8px;transition:background .2s,color .2s;align-self:flex-start;text-decoration:none;cursor:pointer;background:none}
.btn-outline:hover{background:var(--accent);color:#fff;text-decoration:none}
.neues-section{background:var(--surface);padding:3rem 5%;margin:2rem 0}
.neues-section > h2{font-size:1.45rem;font-weight:700;margin-bottom:1.75rem;text-align:center;color:var(--text)}
.neues-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem;max-width:940px;margin:0 auto}
.neues-card{background:var(--card);border-radius:var(--r);overflow:hidden;box-shadow:var(--shadow);text-decoration:none;display:block;transition:box-shadow .3s,transform .3s}
.neues-card:hover{box-shadow:var(--shadow-h);transform:translateY(-5px);text-decoration:none}
.neues-card .nc-img{overflow:hidden;aspect-ratio:4/3}
.neues-card .nc-img img{width:100%;height:100%;object-fit:cover;transition:transform .45s ease}
.neues-card:hover .nc-img img{transform:scale(1.07)}
.neues-card-body{padding:.9rem 1.1rem 1.1rem}
.neues-card-body p{font-weight:600;color:var(--text);font-size:.95rem}
.neues-card-body small{color:var(--muted);font-size:.78rem}
.artikel-section{max-width:960px;margin:3rem auto;padding:0 5%}
.artikel-card{display:flex;background:var(--card);border-radius:var(--r);overflow:hidden;box-shadow:var(--shadow);transition:box-shadow .3s,transform .3s;cursor:pointer}
.artikel-card:hover{box-shadow:var(--shadow-h);transform:translateY(-4px)}
.artikel-card .ak-img{width:260px;min-width:260px;overflow:hidden}
.artikel-card .ak-img img{width:100%;height:100%;object-fit:cover;transition:transform .45s ease}
.artikel-card:hover .ak-img img{transform:scale(1.05)}
.artikel-card-body{display:flex;flex-direction:column;justify-content:center;padding:2rem;gap:.75rem}
.artikel-card-body h2{font-size:1.3rem;color:var(--text);font-weight:700}
.artikel-card-body p{color:var(--text-s);font-size:.95rem;line-height:1.65}
.rezept-page{max-width:720px;margin:2rem auto;padding:0 5% 4rem}
.rezept-page h1{font-size:clamp(1.5rem,4vw,2.25rem);font-weight:800;color:var(--text);margin-bottom:1.25rem}
.rezept-hero-img{width:100%;aspect-ratio:16/7;object-fit:cover;border-radius:var(--r);margin-bottom:1.25rem}
.rezept-badges{display:flex;gap:.65rem;flex-wrap:wrap;margin-bottom:1.75rem}
.badge{display:inline-flex;align-items:center;gap:.4rem;background:var(--surface);border:1px solid var(--border);border-radius:8px;padding:.38rem .8rem;font-size:.82rem;font-weight:500;color:var(--text-s)}
.portionen-bar{display:flex;align-items:center;gap:.65rem;margin-bottom:1.75rem;padding:.85rem 1.1rem;background:var(--surface);border-radius:10px;border:1px solid var(--border)}
.portionen-bar label{font-weight:500;color:var(--text-s);white-space:nowrap}
.portionen-bar input{width:68px;height:36px;border:1.5px solid var(--border);border-radius:8px 0 0 8px;padding:0 .5rem;text-align:center;font-size:.95rem;background:var(--card);color:var(--text);outline:none;transition:border-color .2s}
.portionen-bar input:focus{border-color:var(--accent)}
.portionen-bar button{height:36px;background:var(--accent);color:#fff;border:none;border-radius:0 8px 8px 0;padding:0 1rem;font-weight:600;font-size:.875rem;cursor:pointer;transition:background .2s}
.portionen-bar button:hover{background:var(--accent-h)}
.zutaten-header{font-size:1rem;font-weight:700;color:var(--text);margin-bottom:.75rem}
#zutaten-list{display:flex;flex-direction:column;margin-bottom:2rem;border-radius:10px;overflow:hidden;border:1px solid var(--border)}
.zutat-item{display:flex;align-items:center;padding:.65rem .9rem;gap:.75rem;font-size:.93rem;border-bottom:1px solid var(--border);transition:background .15s}
.zutat-item:last-child{border-bottom:none}
.zutat-item:nth-child(even){background:var(--surface)}
.zutat-item:hover{background:rgba(200,68,10,.05)}
.zutat-menge{font-weight:700;min-width:90px;color:var(--accent);font-size:.88rem}
.zubereitung-section{margin-bottom:2.5rem}
.zubereitung-section h3{font-size:1rem;font-weight:700;margin-bottom:1rem;color:var(--text)}
.zubereitung-content{color:var(--text-s);line-height:1.8}
.zubereitung-content p{font-weight:700;color:var(--text);margin-top:1rem;margin-bottom:.25rem}
.zubereitung-content p:first-child{margin-top:0}
.zubereitung-content span{display:block;margin-bottom:.5rem}
.autor-card{display:flex;align-items:center;gap:1rem;margin-top:2.5rem;padding:1.1rem 1.25rem;background:var(--surface);border-radius:var(--r);border:1px solid var(--border)}
.autor-card img{width:52px;height:52px;border-radius:50%;object-fit:cover;flex-shrink:0}
.autor-card .autor-info small{font-size:.78rem;color:var(--muted)}
.autor-card .autor-info strong{display:block;font-size:.95rem;color:var(--text)}
.contact-page{max-width:500px;margin:2rem auto;padding:0 5% 4rem}
.contact-page h1{font-size:2rem;font-weight:800;margin-bottom:.4rem}
.contact-page .subtitle{color:var(--text-s);margin-bottom:2rem;font-size:.95rem}
.form-group{display:flex;flex-direction:column;gap:.35rem;margin-bottom:1rem}
.form-group label{font-weight:500;font-size:.88rem;color:var(--text-s)}
.form-group input,.form-group textarea{padding:.65rem .9rem;border:1.5px solid var(--border);border-radius:8px;font-size:.95rem;background:var(--card);color:var(--text);outline:none;transition:border-color .2s,box-shadow .2s;font-family:inherit;width:100%}
.form-group textarea{height:120px;resize:vertical}
.form-group input:focus,.form-group textarea:focus{border-color:var(--accent);box-shadow:0 0 0 3px rgba(200,68,10,.12)}
.btn-submit{width:100%;padding:.8rem;background:var(--accent);color:#fff;border:none;border-radius:8px;font-size:.95rem;font-weight:700;cursor:pointer;transition:background .2s,transform .15s;margin-top:.25rem}
.btn-submit:hover{background:var(--accent-h);transform:translateY(-1px)}
.alert-success{background:#edf7ee;border:1px solid #b8dfc1;color:#1a5c2a;padding:.9rem 1.1rem;border-radius:8px;margin-top:1rem;font-weight:500;display:flex;align-items:center;gap:.5rem}
.article-page{max-width:680px;margin:2rem auto;padding:0 5% 4rem}
.article-page h1{font-size:clamp(1.5rem,4vw,2.1rem);font-weight:800;margin-bottom:1.1rem}
.article-img{width:100%;border-radius:var(--r);margin-bottom:1.75rem;aspect-ratio:16/7;object-fit:cover}
.article-page h2{font-size:1.2rem;font-weight:700;margin:1.75rem 0 .5rem;color:var(--text)}
.article-page h3{font-size:1rem;font-weight:700;margin:1.25rem 0 .35rem;color:var(--text-s)}
.article-page p{margin-bottom:1rem;color:var(--text-s);line-height:1.8}
.article-page ul{padding-left:0;margin-bottom:1rem}
.article-page li{padding:.35rem 0 .35rem 1.25rem;position:relative;color:var(--text-s)}
.article-page li::before{content:'\2192';position:absolute;left:0;color:var(--accent);font-weight:700}
.verdict-box{background:linear-gradient(135deg,#fff9f0,#fdf3e3);border:1px solid var(--border);border-left:4px solid var(--accent);border-radius:0 var(--r) var(--r) 0;padding:1.25rem 1.5rem;margin-top:2rem}
.verdict-box h2{margin-top:0}
.legal-page{max-width:680px;margin:2rem auto;padding:0 5% 4rem}
.legal-page h1{font-size:2rem;font-weight:800;margin-bottom:1.5rem}
.legal-page h2{font-size:1.05rem;font-weight:700;margin:1.5rem 0 .4rem;color:var(--text)}
.legal-page h3{font-size:.95rem;font-weight:700;margin:1.25rem 0 .35rem;color:var(--text-s)}
.legal-page p,.legal-page address{color:var(--text-s);line-height:1.75;margin-bottom:.5rem;font-style:normal}
.legal-page a{color:var(--accent)}
.legal-page span{display:block;color:var(--text-s);margin-bottom:.75rem;line-height:1.75}
footer{background:var(--surface);border-top:1px solid var(--border);padding:1.75rem 5%;text-align:center}
.footer-legal{display:flex;justify-content:center;gap:1.5rem;margin-bottom:.6rem;flex-wrap:wrap}
.footer-legal a{color:var(--muted);font-size:.85rem;font-weight:500;transition:color .2s;text-decoration:none}
.footer-legal a:hover{color:var(--accent)}
.footer-copy{color:var(--muted);font-size:.8rem}
.fade-up{opacity:0;transform:translateY(22px);transition:opacity .6s ease,transform .6s ease}
.fade-up.visible{opacity:1;transform:translateY(0)}
.fade-up.d1{transition-delay:.1s}
.fade-up.d2{transition-delay:.2s}
.fade-up.d3{transition-delay:.3s}
@keyframes float{0%,100%{transform:translateY(0) rotate(0deg)}50%{transform:translateY(-10px) rotate(3deg)}}
@keyframes slideDown{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:translateY(0)}}
@keyframes ticker-scroll{0%{transform:translateX(0)}100%{transform:translateX(-50%)}}
@media(max-width:768px){nav.desktop-nav{display:none}.mobile-nav{display:flex}.rotd-card{grid-template-columns:1fr}.rotd-card .card-img img{min-height:200px;max-height:240px}.rotd-card .card-body{padding:1.5rem}.neues-grid{grid-template-columns:1fr 1fr}.artikel-card{flex-direction:column}.artikel-card .ak-img{width:100%;min-width:0}.artikel-card .ak-img img{max-height:200px}.artikel-card-body{padding:1.25rem}}
@media(max-width:520px){.neues-grid{grid-template-columns:1fr}.hero-emoji{font-size:2.5rem}.hero{padding:3rem 5% 2.5rem}}