/* Mischbar / Mixbar — Themenseiten (Lehm, Kalk, Gips) und Stoff-Lexikon */
.article{max-width:820px; margin:0 auto}
.crumb{display:inline-flex; align-items:center; gap:7px; font-family:var(--mono); font-size:12px; color:var(--fg-muted); margin:26px 0 0}
.crumb:hover{color:var(--accent)}
.art-head{padding:14px 0 6px}
.art-head h1{font-size:clamp(30px,5vw,46px)}
.lead{font-size:clamp(17px,2vw,20px); color:#3a352e; margin:14px 0 0; max-width:62ch}
[data-theme="dark"] .lead{color:#cfc8bb}
.sec{margin:34px 0}
.sec h2{font-size:24px; border-top:1.5px solid var(--ink); padding-top:14px}
.sec p{margin:12px 0 0; font-size:16px; line-height:1.62; max-width:70ch}
.sec ul.pl{margin:12px 0 0; padding-inline-start:20px; max-width:70ch}
.sec ul.pl li{margin:6px 0; line-height:1.55}
.eq{font-family:var(--mono); font-size:17px; background:var(--surface-2); border:1px solid var(--line); border-radius:var(--r-s); padding:12px 16px; display:inline-block; margin-top:12px; letter-spacing:.02em}
.danger-box{margin:26px 0; padding:20px 22px; border-radius:var(--r-l); border:1.5px solid var(--danger); background:color-mix(in srgb,var(--danger) 12%, var(--surface))}
.danger-box h3{font-size:17px; color:var(--danger); margin-bottom:6px}
.danger-box p{margin:0; font-size:15px; line-height:1.55}
.disc-note{margin:30px 0 10px; padding:14px 16px; border-inline-start:3px solid var(--accent-warm); background:var(--surface-2); border-radius:0 var(--r-s) var(--r-s) 0; font-size:13.5px; color:var(--fg-muted)}
.topic[hidden]{display:none !important}

/* Lexikon-Karten */
.lex-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(250px,1fr)); gap:14px; margin-top:16px}
.lex{padding:16px 18px; display:flex; flex-direction:column; gap:6px; scroll-margin-top:90px}
.lex .top{display:flex; align-items:center; gap:10px}
.lex .dot{width:12px; height:12px; border-radius:4px; flex:0 0 auto}
.lex h3{font-size:16.5px; line-height:1.25}
.lex .id{font-family:var(--mono); font-size:11px; color:var(--fg-muted); margin-inline-start:auto}
.lex .syn{font-size:12.5px; color:var(--fg-muted); font-family:var(--mono)}
.lex .erk{font-size:14px; line-height:1.5; color:var(--fg)}
.lex .foot{display:flex; flex-wrap:wrap; gap:8px; align-items:center; margin-top:4px}
.lex .haz{font-family:var(--mono); font-size:11px; color:var(--danger); border:1px solid color-mix(in srgb,var(--danger) 45%, transparent); border-radius:999px; padding:3px 8px}
.lex a.rl{font-family:var(--mono); font-size:11.5px; color:var(--accent); text-decoration:none; margin-inline-start:auto}
.lex a.rl:hover{text-decoration:underline}
.lex:target{border-color:var(--accent); box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 25%, transparent)}

/* Lexikon-Seite */
.lex-tools{display:flex; flex-wrap:wrap; gap:10px; align-items:center; margin:18px 0 6px}
.lex-tools .search{flex:1 1 260px; display:flex; align-items:center; gap:8px; background:var(--surface); border:1px solid var(--line-strong); border-radius:10px; padding:0 12px; height:42px}
.lex-tools .search input{flex:1; border:0; background:transparent; font:inherit; color:var(--fg); outline:none; min-width:0}
.rolle-chips{display:flex; flex-wrap:wrap; gap:6px}
.rolle-chips button{font-family:var(--mono); font-size:11.5px; padding:7px 10px; border-radius:999px; border:1px solid var(--line-strong); background:var(--surface); color:var(--fg-muted); cursor:pointer}
.rolle-chips button[aria-pressed="true"]{background:var(--ink); color:var(--bg); border-color:var(--ink)}
.rolle-head{display:flex; align-items:baseline; gap:10px; margin:28px 0 0}
.rolle-head h2{font-size:22px}
.rolle-head .n{font-family:var(--mono); font-size:12px; color:var(--fg-muted)}

/* Rezeptliste auf Themenseiten */
.rec-list{list-style:none; margin:14px 0 0; padding:0; display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); gap:8px}
.rec-list li a{display:flex; justify-content:space-between; gap:10px; padding:10px 12px; border:1px solid var(--line); border-radius:var(--r-s); background:var(--surface); color:inherit; text-decoration:none; font-size:14px}
.rec-list li a:hover{border-color:var(--accent)}
.rec-list .meta{font-family:var(--mono); font-size:11px; color:var(--fg-muted); white-space:nowrap}
.more-link{display:inline-block; margin-top:14px; font-family:var(--mono); font-size:12.5px; color:var(--accent)}
.haz-list{display:flex; flex-direction:column; gap:10px; margin-top:12px}
.haz-list .h{padding:12px 14px; border:1px solid color-mix(in srgb,var(--danger) 35%, var(--line)); border-radius:var(--r-s); background:var(--surface); font-size:14px; line-height:1.5}
.haz-list .h b{display:block; margin-bottom:2px}
.haz-list .h .ghs{font-family:var(--mono); font-size:11px; color:var(--danger)}
.prin-list{margin:12px 0 0; padding:0; list-style:none; display:flex; flex-direction:column; gap:8px}
.prin-list li{padding:10px 14px; border-inline-start:3px solid var(--accent); background:var(--surface-2); border-radius:0 var(--r-s) var(--r-s) 0; font-size:14.5px}
.prin-list li b{display:block}
.src{margin:12px 0 0; padding-inline-start:18px; font-size:14px; line-height:1.55}
.src li{margin:5px 0}
.topic-nav{display:flex; flex-wrap:wrap; gap:8px; margin-top:16px}
.topic-nav a{font-family:var(--mono); font-size:12px; padding:7px 11px; border:1px solid var(--line-strong); border-radius:999px; color:var(--fg-muted); text-decoration:none}
.topic-nav a[aria-current]{background:var(--ink); color:var(--bg); border-color:var(--ink)}