/*
Theme Name: Lala's Cuisine Dark
Theme URI: https://lalas-cuisine.com
Author: Lala
Author URI: https://lalas-cuisine.com
Description: Dunkles Foodblog-Theme mit Lavendel-Akzenten, Kategorien-Kacheln, Login/Registrierung und Merkliste (Wishlist). Übersetzer-Plugins wie TranslatePress/Weglot werden unterstützt.
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: lalas-cuisine-dark
Tags: blog, food, dark, responsive, custom-logo, translation-ready
*/

:root{ --bg:#121212; --bg-elev:#1b1b1b; --text:#EDEDED; --muted:#cfcfcf; --lav:#C8A2C8; --lav-strong:#b488b4; --border:#2a2a2a; }
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{ background:var(--bg); color:var(--text); font-family: system-ui, -apple-system, "Segoe UI", Roboto, Ubuntu, "Helvetica Neue", Arial; line-height:1.6; }
a{color:var(--lav); text-decoration:none}
a:hover{color:var(--lav-strong); text-decoration:underline}
.container{max-width:1200px;margin:0 auto;padding:0 1rem}
.site-header{ position:sticky;top:0;z-index:60;background:rgba(18,18,18,0.9); backdrop-filter: blur(6px); border-bottom:1px solid var(--border); }
.site-header .inner{display:flex;align-items:center;justify-content:space-between;padding:0.75rem 0}
.branding{display:flex;align-items:center;gap:.75rem}
.branding .site-title{font-weight:700;font-size:1.15rem;margin:0;color:#fff}
.branding .site-description{margin:0;color:var(--muted);font-size:.85rem}
.primary-nav ul{list-style:none;margin:0;padding:0;display:flex;gap:1rem;flex-wrap:wrap}
.primary-nav a{padding:.5rem .5rem;border-radius:10px}
.primary-nav a:hover{background:var(--bg-elev);text-decoration:none}
.header-cta{display:flex;align-items:center;gap:.75rem}
.header-cta .btn{padding:.5rem .9rem;border-radius:999px;background:var(--lav);color:#1b1b1b;font-weight:700}
.header-cta .btn.alt{background:transparent;border:1px solid var(--lav);color:var(--lav)}
.hero{ background: linear-gradient( to bottom, rgba(0,0,0,.45), rgba(0,0,0,.5) ), url('<?php echo get_template_directory_uri(); ?>/assets/images/hero.jpg') center/cover no-repeat; color:#fff; text-align:center; padding:7rem 1rem 5rem; border-bottom:1px solid var(--border); }
.hero h1{font-size:2.6rem;margin:0 0 .5rem}
.hero p{margin:0 auto 1.25rem; max-width:42rem; color:#eaeaea}
.btn{display:inline-block;background:var(--lav);color:#1b1b1b;padding:.8rem 1.1rem;border-radius:14px;font-weight:700}
.btn:hover{filter:brightness(.95);text-decoration:none}
.section{padding:2rem 0}
.section h2{margin:0 0 1rem 0;font-size:1.6rem}
.kacheln{display:grid;gap:1rem;grid-template-columns:repeat(4,1fr)}
.kachel{background:var(--bg-elev); padding:1rem; border-radius:16px; border:1px solid var(--border); text-align:center}
.kachel a{display:block; color:var(--text)}
.kachel a:hover{color:#fff}
.kachel .pill{display:inline-block;background:rgba(200,162,200,.15);border:1px solid var(--lav);color:var(--lav);padding:.3rem .6rem;border-radius:999px;margin-top:.5rem;font-size:.85rem}
.grid{display:grid;gap:1.25rem;grid-template-columns:repeat(3,1fr)}
.card{background:var(--bg-elev); border:1px solid var(--border); border-radius:16px; overflow:hidden; display:flex; flex-direction:column}
.card img{width:100%;height:220px;object-fit:cover;display:block}
.card .content{padding:1rem;flex:1}
.card .meta{font-size:.85rem;color:#bdbdbd}
.card .actions{display:flex;justify-content:space-between;align-items:center;margin-top:.5rem}
.heart{cursor:pointer;user-select:none}
.heart.saved{color:var(--lav)}
.site-footer{margin-top:3rem;border-top:1px solid var(--border);background:#0f0f0f;padding:2rem 0;color:var(--muted)}
.searchbar{margin:1rem 0; display:flex; gap:.5rem}
.searchbar input[type="search"]{flex:1; padding:.7rem .8rem; border:1px solid var(--border); border-radius:10px; background:#0f0f0f; color:var(--text)}
.searchbar button{padding:.7rem .9rem; border:none; border-radius:10px; background:var(--lav); color:#1b1b1b; font-weight:700}
.lang-switcher{display:flex;gap:.5rem;align-items:center}
.lang-switcher .pill{background:transparent;border:1px solid var(--lav);color:var(--lav);padding:.2rem .6rem;border-radius:999px}
.notice{padding:1rem;border:1px dashed var(--lav);border-radius:12px;background:rgba(200,162,200,.06)}
@media (max-width: 1100px){ .grid{grid-template-columns:1fr 1fr} .kacheln{grid-template-columns:1fr 1fr} }
@media (max-width: 680px){ .grid{grid-template-columns:1fr} .kacheln{grid-template-columns:1fr} .hero{padding:4rem 1rem 3rem} .hero h1{font-size:2rem} }