:root{
  --bg:#f7f3ec; --card:#fffdf9; --ink:#2c2723; --muted:#8c8378; --line:#e7e0d5;
  --accent:#c05f3c; --accent-soft:#f0e2d8; --shadow:0 6px 24px rgba(60,45,30,.08);
  --radius:16px;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:var(--bg); color:var(--ink);
  font-family:"Inter",system-ui,-apple-system,sans-serif;
  font-size:16px; line-height:1.55; -webkit-font-smoothing:antialiased;
}
h1,h2,h3{font-family:"Fraunces","Georgia",serif; font-weight:500; line-height:1.15; margin:0}
a{color:inherit; text-decoration:none}
main{max-width:1080px; margin:0 auto; padding:0 22px 60px}

/* header */
header.site{
  max-width:1080px; margin:0 auto; padding:22px; display:flex;
  align-items:center; justify-content:space-between; gap:16px;
}
.brand{font-family:"Fraunces",serif; font-size:1.5rem; font-weight:600; letter-spacing:.2px; display:flex; align-items:center; gap:8px}
.brand-mark{color:var(--accent)}
header nav{display:flex; gap:10px; align-items:center}
.btn,.btn-ghost{
  font:inherit; font-weight:500; border-radius:999px; padding:10px 18px; cursor:pointer;
  border:1px solid transparent; transition:.15s; display:inline-flex; align-items:center; gap:6px; white-space:nowrap;
}
.btn{background:var(--accent); color:#fff}
.btn:hover{background:#a94e2f}
.btn-ghost{background:transparent; border-color:var(--line); color:var(--ink)}
.btn-ghost:hover{background:var(--card); border-color:var(--muted)}
.btn-ghost.danger{color:#b23b2e; border-color:#e7c6c1}
.btn-ghost.danger:hover{background:#fbeeec}

/* home search */
.hero-search{padding:26px 0 18px; text-align:center}
.page-title{font-size:2.5rem; margin-bottom:18px; letter-spacing:-.5px}
.search{max-width:520px; margin:0 auto}
.search input{
  width:100%; font:inherit; padding:14px 20px; border-radius:999px; border:1px solid var(--line);
  background:var(--card); box-shadow:var(--shadow);
}
.search input:focus{outline:none; border-color:var(--accent)}
.tagbar{display:flex; flex-wrap:wrap; gap:8px; justify-content:center; margin-top:18px}
.chip{
  font-size:.85rem; padding:6px 14px; border-radius:999px; background:var(--card);
  border:1px solid var(--line); color:var(--muted); transition:.15s;
}
.chip:hover{border-color:var(--accent); color:var(--ink)}
.chip.on{background:var(--accent); color:#fff; border-color:var(--accent)}
.chip.sm{font-size:.78rem; padding:3px 10px; background:var(--accent-soft); color:#8a4a30; border:none}

/* grid */
.grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); gap:24px; margin-top:24px}
.card{
  background:var(--card); border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow);
  transition:.2s; border:1px solid rgba(0,0,0,.02);
}
.card:hover{transform:translateY(-3px); box-shadow:0 14px 34px rgba(60,45,30,.14)}
.card-img{aspect-ratio:16/11; background:var(--accent-soft); overflow:hidden; position:relative}
.cookbadge{position:absolute; top:10px; left:10px; z-index:1; background:rgba(111,143,94,.95); color:#fff;
  font-size:.74rem; font-weight:600; padding:4px 10px; border-radius:999px; box-shadow:0 2px 8px rgba(0,0,0,.15)}
.card-img img{width:100%; height:100%; object-fit:cover; display:block}
.noimg{width:100%; height:100%; display:grid; place-items:center; font-size:2.6rem; opacity:.5}
.card-body{padding:14px 16px 18px}
.card-body h3{font-size:1.22rem; margin-bottom:6px}
.card-meta{display:flex; gap:12px; flex-wrap:wrap; color:var(--muted); font-size:.85rem}

/* empty */
.empty{text-align:center; padding:80px 20px; color:var(--muted)}
.empty-mark{font-size:3.4rem; margin-bottom:10px}
.empty h2{color:var(--ink); font-size:1.8rem; margin-bottom:8px}
.empty p{margin:0 0 22px}

/* recipe detail */
.recipe{max-width:960px; margin:0 auto}
.recipe-hero{border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow); margin-top:8px; aspect-ratio:16/8}
.recipe-hero img{width:100%; height:100%; object-fit:cover; display:block}
.back{color:var(--muted); font-size:.9rem}
.back:hover{color:var(--accent)}
.recipe-head{padding:26px 0 6px}
.recipe-head h1{font-size:2.6rem; margin:10px 0 12px; letter-spacing:-.5px}
.recipe-meta{display:flex; flex-wrap:wrap; gap:14px; align-items:center; color:var(--muted); font-size:.95rem}
.src{display:inline-block; margin-top:10px; color:var(--accent); font-size:.9rem}
.recipe-actions{display:flex; gap:10px; margin-top:18px}
.recipe-actions form{margin:0}

.recipe-body{display:grid; grid-template-columns:320px 1fr; gap:44px; margin-top:30px; align-items:start}
.ingredients{position:sticky; top:20px; background:var(--card); border-radius:var(--radius); padding:22px; box-shadow:var(--shadow)}
.ing-head{display:flex; justify-content:space-between; align-items:center; margin-bottom:14px; gap:10px}
.ing-head h2{font-size:1.4rem}
.stepper{display:flex; align-items:center; gap:10px; font-size:.9rem; color:var(--muted)}
.stepper button{width:28px; height:28px; border-radius:50%; border:1px solid var(--line); background:var(--bg); cursor:pointer; font-size:1rem; line-height:1; color:var(--ink)}
.stepper button:hover{border-color:var(--accent); color:var(--accent)}
.ingredients ul{list-style:none; margin:0; padding:0}
.ingredients li{padding:9px 0; border-bottom:1px dashed var(--line); display:flex; gap:6px; flex-wrap:wrap; align-items:baseline}
.ingredients li:last-child{border-bottom:none}
.amt{font-weight:600; color:var(--accent)}
.unit{color:var(--muted)}
.iname{flex:1}
.inote{width:100%; font-size:.82rem; color:var(--muted); font-style:italic}

.steps h2{font-size:1.5rem; margin-bottom:16px}
.steps ol{list-style:none; margin:0; padding:0}
.steps li{display:flex; gap:16px; margin-bottom:20px}
.stepno{flex:none; width:32px; height:32px; border-radius:50%; background:var(--accent-soft); color:#8a4a30;
  display:grid; place-items:center; font-family:"Fraunces",serif; font-weight:600}
.steps li p{margin:3px 0 0}
.notes{margin-top:24px; background:var(--accent-soft); border-radius:var(--radius); padding:18px 20px}
.notes h3{font-size:1.1rem; margin-bottom:6px}
.notes p{margin:0}

/* editor */
.editor{max-width:960px; margin:0 auto}
.editor-head{display:flex; align-items:center; gap:16px; padding:20px 0; position:sticky; top:0; background:var(--bg); z-index:5}
.editor-head h1{flex:1; font-size:1.7rem}
.editor-grid{display:grid; grid-template-columns:1fr 300px; gap:34px; align-items:start}
.fld{display:block; margin-bottom:16px}
.fld>span{display:block; font-size:.82rem; color:var(--muted); margin-bottom:6px; font-weight:500}
.fld input,.fld textarea{width:100%; font:inherit; padding:11px 13px; border:1px solid var(--line); border-radius:10px; background:var(--card)}
.fld input:focus,.fld textarea:focus{outline:none; border-color:var(--accent)}
.block{background:var(--card); border-radius:var(--radius); padding:18px 20px; margin-bottom:20px; box-shadow:var(--shadow)}
.block-head{display:flex; justify-content:space-between; align-items:center; margin-bottom:14px}
.block-head h2{font-size:1.3rem}
.add{font:inherit; font-size:.85rem; color:var(--accent); background:var(--accent-soft); border:none; padding:6px 12px; border-radius:999px; cursor:pointer}
.add:hover{background:#e8d3c6}
.rows{display:flex; flex-direction:column; gap:8px}
.irow{display:grid; grid-template-columns:80px 90px 1fr 1fr 32px; gap:8px}
.irow input{width:100%; font:inherit; padding:9px 10px; border:1px solid var(--line); border-radius:9px; background:#fff}
.srow{display:grid; grid-template-columns:32px 1fr 32px; gap:10px; align-items:start}
.srow .sno{width:30px; height:30px; border-radius:50%; background:var(--accent-soft); color:#8a4a30; display:grid; place-items:center; font-family:"Fraunces",serif; margin-top:4px}
.srow textarea{width:100%; font:inherit; padding:9px 11px; border:1px solid var(--line); border-radius:9px; background:#fff; resize:vertical}
.del{border:none; background:none; color:var(--muted); cursor:pointer; font-size:1rem; align-self:center}
.del:hover{color:#b23b2e}
.imgdrop{position:relative; aspect-ratio:4/3; border:2px dashed var(--line); border-radius:12px; overflow:hidden; background:var(--card); display:grid; place-items:center}
.imgdrop img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover}
.imgph{color:var(--muted); font-size:.9rem}
.imgdrop input[type=file]{position:absolute; inset:0; opacity:0; cursor:pointer}
.rmimg{display:flex; align-items:center; gap:6px; font-size:.82rem; color:var(--muted); margin-top:8px}
.row2{}

.site-foot{text-align:center; color:var(--muted); font-size:.82rem; padding:30px 0 40px; opacity:.8}

/* Zutaten-Gruppen (Ansicht) */
.ingredients li.ing-group{border-bottom:none; padding:14px 0 4px; font-family:"Fraunces",serif; font-weight:600; color:var(--accent); font-size:1.02rem; display:block}
.ingredients li.ing-group:first-child{padding-top:0}

/* Schritt-Bilder (Ansicht) */
.steps .stepcontent{flex:1}
.steps .stepcontent p{margin:3px 0 0}
.stepimg{display:block; margin-top:10px; width:100%; max-width:420px; border-radius:12px; box-shadow:var(--shadow)}

/* Editor: Abschnitt-/Gruppen-Zeile */
.addbtns{display:flex; gap:8px}
.add.ghost{background:transparent; border:1px solid var(--line); color:var(--muted)}
.add.ghost:hover{border-color:var(--accent); color:var(--accent); background:transparent}
.hrow{display:grid; grid-template-columns:auto 1fr 32px; gap:10px; align-items:center; background:var(--accent-soft); border-radius:9px; padding:6px 10px}
.hlabel{font-size:.72rem; text-transform:uppercase; letter-spacing:.5px; color:#8a4a30; font-weight:600}
.hrow .h-name{font:inherit; font-weight:600; padding:8px 10px; border:1px solid var(--line); border-radius:8px; background:#fff}

/* Editor: Schritt-Bild */
.srow .scol{display:flex; flex-direction:column; gap:8px}
.s-imgline{display:flex; align-items:center; gap:10px}
.s-prev{width:56px; height:56px; object-fit:cover; border-radius:8px; border:1px solid var(--line)}
.s-imgbtn{font-size:.82rem; color:var(--accent); background:var(--accent-soft); padding:6px 12px; border-radius:999px; cursor:pointer; display:inline-flex; align-items:center; gap:5px; white-space:nowrap}
.s-imgbtn input[type=file]{display:none}

/* Koch-Tracker + persönliche Notizen */
.recipe-actions{align-items:center; flex-wrap:wrap}
.btn.cook{background:#6f8f5e}
.btn.cook:hover{background:#5f7d50}
.cookstat{display:inline-flex; align-items:center; gap:8px; font-size:.9rem; color:var(--muted)}
.cookstat form{margin:0}
.undo{border:1px solid var(--line); background:var(--card); color:var(--muted); width:26px; height:26px;
  border-radius:50%; cursor:pointer; font-size:.95rem; line-height:1; display:grid; place-items:center}
.undo:hover{border-color:var(--accent); color:var(--accent)}
.mynotes{margin-top:24px; background:var(--card); border:1px solid var(--line); border-radius:var(--radius); padding:18px 20px; box-shadow:var(--shadow)}
.mynotes h3{font-size:1.1rem; margin-bottom:10px}
.mynotes textarea{width:100%; font:inherit; padding:12px 14px; border:1px solid var(--line); border-radius:12px;
  background:var(--bg); resize:vertical; margin-bottom:10px}
.mynotes textarea:focus{outline:none; border-color:var(--accent)}

/* Mehrbenutzer: Login, Kopf, Filter, Badges */
.hh-name{font-size:.9rem; color:var(--muted); padding:0 4px; display:inline-flex; align-items:center; gap:4px}
.btn-ghost.on{background:#eef3e9; border-color:#c3d4b4; color:#5f7d50}
.filterbar{margin-top:22px}
.filterbar .chip.on{background:var(--accent); color:#fff; border-color:var(--accent)}
.sharebadge{position:absolute; top:10px; right:10px; z-index:1; background:rgba(192,95,60,.95); color:#fff;
  font-size:.74rem; font-weight:600; padding:4px 10px; border-radius:999px; box-shadow:0 2px 8px rgba(0,0,0,.15)}
.foreign-note{font-size:.9rem; color:var(--accent); display:inline-flex; align-items:center}
.login-wrap{display:grid; place-items:center; padding:60px 16px}
.login-card{background:var(--card); border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow);
  padding:36px 34px; width:100%; max-width:400px}
.login-card h1{font-size:2rem; margin-bottom:4px}
.login-sub{color:var(--muted); margin:0 0 22px}
.login-err{background:#fbeeec; color:#b23b2e; border:1px solid #e7c6c1; border-radius:10px; padding:10px 14px; margin-bottom:16px; font-size:.9rem}
.login-btn{width:100%; justify-content:center; margin-top:8px}

@media(max-width:760px){
  .recipe-body{grid-template-columns:1fr; gap:26px}
  .ingredients{position:static}
  .editor-grid{grid-template-columns:1fr}
  .page-title{font-size:2rem}
  .recipe-head h1{font-size:2rem}
  .irow{grid-template-columns:70px 1fr 28px; }
  .irow .i-unit{grid-column:1; } .irow .i-note{grid-column:1 / -1}
  .recipe-hero{aspect-ratio:16/10}
}