/* rezept-teilen.de — gemeinsame Gestaltung
   Farbwelt bewusst identisch zu den übrigen Projektunterlagen. */

:root{
  --bg:#faf8f5; --card:#ffffff; --ink:#1f1c19; --muted:#6b635a;
  --line:#e6e0d8; --accent:#9a5b2c; --accent-dunkel:#7c4620;
  --soft:#f3e7dc; --code:#f5f2ed; --warn:#a8741a;
}

*{box-sizing:border-box}

body{
  margin:0; background:var(--bg); color:var(--ink);
  font:16px/1.65 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  -webkit-text-size-adjust:100%;
}

.wrap{max-width:760px;margin:0 auto;padding:40px 22px 80px}
.wrap.schmal{max-width:620px}

/* ---- Kopf ---- */
.marke{display:flex;align-items:baseline;gap:10px;text-decoration:none;color:inherit}
.marke b{font-size:19px;letter-spacing:-.01em}
.marke span{color:var(--muted);font-size:13px}
header.seite{border-bottom:2px solid var(--accent);padding-bottom:20px;margin-bottom:8px}
header.seite h1{font-size:28px;margin:18px 0 6px;letter-spacing:-.015em;line-height:1.25}
header.seite .sub{color:var(--muted);font-size:15px;margin:0}

/* ---- Text ---- */
h2{font-size:20px;margin:40px 0 8px;letter-spacing:-.01em}
h3{font-size:16px;margin:24px 0 6px}
p{margin:10px 0}
a{color:var(--accent-dunkel)}
a:hover{color:var(--accent)}
ul,ol{padding-left:21px}
li{margin:7px 0}
small,.klein{font-size:13.5px;color:var(--muted)}

code{background:var(--code);padding:1px 6px;border-radius:4px;
  font:13.5px/1.5 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace}

/* ---- Bausteine ---- */
.box{background:var(--card);border:1px solid var(--line);border-radius:12px;
  padding:20px 24px;margin:18px 0}
.note{background:#fdf7ed;border:1px solid #ecdcc0;border-radius:10px;
  padding:14px 18px;margin:18px 0;font-size:15px}
.note b{color:var(--warn)}
.key{background:var(--soft);border-left:4px solid var(--accent);
  border-radius:0 10px 10px 0;padding:14px 18px;margin:18px 0;font-size:15px}

.schritte{list-style:none;padding:0;margin:22px 0;counter-reset:s}
.schritte li{counter-increment:s;position:relative;padding-left:46px;margin:20px 0}
.schritte li::before{
  content:counter(s);position:absolute;left:0;top:-2px;
  width:31px;height:31px;border-radius:50%;background:var(--soft);
  color:var(--accent-dunkel);font-weight:700;font-size:15px;
  display:flex;align-items:center;justify-content:center}
.schritte b{display:block;margin-bottom:2px}

/* ---- Knöpfe & Formular ---- */
.knopf{display:inline-block;background:var(--accent);color:#fff;text-decoration:none;
  padding:12px 22px;border-radius:9px;font-size:15.5px;font-weight:600;border:0;
  cursor:pointer;font-family:inherit;line-height:1.4}
.knopf:hover{background:var(--accent-dunkel);color:#fff}
.knopf[disabled]{opacity:.55;cursor:progress}
.knopf.leise{background:transparent;color:var(--accent-dunkel);
  border:1.5px solid var(--line);font-weight:500}
.knopf.leise:hover{background:var(--card);border-color:var(--accent)}

label{display:block;font-size:14px;font-weight:600;margin:18px 0 5px}
label .opt{font-weight:400;color:var(--muted)}
input,textarea,select{
  width:100%;padding:11px 13px;border:1.5px solid var(--line);border-radius:9px;
  background:var(--card);color:var(--ink);font:15.5px/1.55 inherit;font-family:inherit}
input:focus,textarea:focus,select:focus{outline:2px solid var(--accent);outline-offset:1px;border-color:var(--accent)}
textarea{resize:vertical;min-height:120px}
.hinweis{font-size:13px;color:var(--muted);margin:5px 0 0}
.zwei{display:grid;grid-template-columns:1fr 1fr;gap:0 18px}
@media(max-width:520px){.zwei{grid-template-columns:1fr}}
.gross{font:600 19px/1.4 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  letter-spacing:.14em;text-transform:uppercase}
.pflicht{color:var(--accent)}

.meldung{border-radius:10px;padding:14px 18px;margin:18px 0;font-size:15px;display:none}
.meldung.gut{background:#eef6ec;border:1px solid #cfe3c8}
.meldung.schlecht{background:#fdf0ec;border:1px solid #f0d2c6}
.meldung.an{display:block}

/* ---- Fuß ---- */
footer.seite{margin-top:56px;padding-top:20px;border-top:1px solid var(--line);
  color:var(--muted);font-size:13.5px}
footer.seite > a{color:var(--muted);margin-right:14px}
footer.seite > span > a{color:var(--muted);margin-right:14px}
footer.seite p a{color:var(--accent-dunkel);margin-right:0}
footer.seite a:hover{color:var(--accent)}

/* ---- Rezeptseite ---- */
.rezept h1{font-size:31px;margin:6px 0 8px;line-height:1.2}
.rezept .von{color:var(--muted);font-size:15px;margin:0 0 20px}
.rezept .bild{width:100%;border-radius:14px;border:1px solid var(--line);
  display:block;margin:22px 0}
.eckdaten{display:flex;flex-wrap:wrap;gap:10px;margin:20px 0 6px;padding:0;list-style:none}
.eckdaten li{background:var(--card);border:1px solid var(--line);border-radius:999px;
  padding:6px 15px;font-size:14px;margin:0}
.eckdaten li b{color:var(--accent-dunkel)}
.zutaten{list-style:none;padding:0;margin:10px 0}
.zutaten li{display:flex;gap:14px;padding:9px 2px;border-bottom:1px solid var(--line);margin:0}
.zutaten li:last-child{border-bottom:none}
.zutaten .menge{flex:0 0 108px;font-variant-numeric:tabular-nums;color:var(--accent-dunkel);font-weight:600}
.zubereitung{padding-left:0;list-style:none;counter-reset:z}
.zubereitung li{counter-increment:z;position:relative;padding-left:40px;margin:16px 0}
.zubereitung li::before{content:counter(z);position:absolute;left:0;top:0;
  width:27px;height:27px;border-radius:50%;background:var(--soft);
  color:var(--accent-dunkel);font-weight:700;font-size:14px;
  display:flex;align-items:center;justify-content:center}

@media print{
  body{background:#fff}
  .nicht-drucken{display:none}
  .wrap{padding:0}
}