:root { --cream:#faf6ec; --paper:#fffdf7; --forest:#304635; --ink:#2d352c; --muted:#626958; --gold:#9e752f; --line:#dedbc9; --rose:#a94e3c; --serif:Georgia,'Times New Roman',serif; --sans:'Segoe UI',system-ui,sans-serif; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; scroll-padding-top:2rem; }
body { margin:0; color:var(--ink); background:var(--cream); font-family:var(--sans); line-height:1.65; }
button,input,select { font:inherit; }
button,a { -webkit-tap-highlight-color:transparent; }
a { color:inherit; }
button { cursor:pointer; }
img { max-width:100%; display:block; }
button:focus-visible,a:focus-visible,summary:focus-visible,input:focus-visible,select:focus-visible { outline:3px solid var(--rose); outline-offset:5px; }
h1,h2,h3,p { margin:0; }
h1,h2,h3 { font-family:var(--serif); font-weight:400; line-height:1.12; }
h2 { font-size:clamp(2rem,3.4vw,3.1rem); letter-spacing:-.035em; }
h3 { font-size:1.8rem; }
p + p { margin-top:1rem; }
.skip-link { position:absolute; left:1rem; top:-8rem; z-index:5; background:white; padding:1rem; }
.skip-link:focus { top:1rem; }
.site-header { max-width:1280px; padding:1.5rem 2.5rem; margin:auto; display:flex; justify-content:space-between; align-items:center; gap:2rem; border-bottom:1px solid var(--line); }
.wordmark { font-family:var(--serif); font-size:2.15rem; letter-spacing:-.04em; color:var(--forest); text-decoration:none; line-height:1; }
.wordmark span { display:block; font-family:var(--sans); font-size:.55rem; font-weight:600; letter-spacing:.15em; margin-top:.7rem; }
.site-header nav { display:flex; gap:1.7rem; align-items:center; font-size:.86rem; }
.site-header nav a { text-decoration:none; }
.site-header nav a:hover,.footer a:hover { text-decoration:underline; text-underline-offset:5px; }
.nav-youtube { border:1px solid var(--line); border-radius:5px; padding:.5rem .9rem; }
.hero { max-width:1280px; margin:auto; display:grid; grid-template-columns:1.12fr 1fr; padding:4.5rem 2.5rem 4rem; gap:3rem; align-items:center; }
.eyebrow { color:var(--gold); font-size:.69rem; font-weight:700; letter-spacing:.17em; margin-bottom:1rem; }
.hero h1 { font-size:clamp(2.6rem,4.4vw,4.4rem); letter-spacing:-.055em; line-height:1.1; }
.hero h1 em { color:var(--forest); }
.hero-intro { font-size:1.02rem; max-width:460px; margin-top:1.7rem; color:var(--muted); }
.actions { display:flex; align-items:center; gap:1.5rem; flex-wrap:wrap; margin-top:1.9rem; }
.button { display:inline-flex; justify-content:center; align-items:center; gap:1rem; border-radius:5px; padding:.8rem 1.25rem; text-decoration:none; font-size:.86rem; font-weight:600; border:1px solid transparent; }
.primary { background:var(--forest); color:var(--paper); }
.primary:hover { background:#223426; }
.text-link { font-size:.87rem; font-weight:600; text-decoration:underline; text-underline-offset:5px; }
.hero-note { font-size:.7rem; color:var(--muted); margin-top:1.5rem; }
.hero-art { position:relative; background:#f1eddf; border:1px solid var(--line); border-radius:48% 48% 6px 6px; padding:2rem 1rem 1.5rem; }
.art-label { display:block; text-align:center; text-transform:uppercase; color:var(--gold); font-size:.6rem; letter-spacing:.18em; }
.witch-window { height:335px; overflow:hidden; }
.witch-window img { width:100%; height:100%; object-fit:cover; object-position:center; mix-blend-mode:multiply; }
.witch-quote { position:relative; margin:0 auto; width:90%; background:var(--paper); border:1px solid var(--line); padding:1rem; text-align:center; border-radius:4px; box-shadow:0 5px 15px #303d3010; }
.witch-quote span { position:absolute; top:-.9rem; left:1rem; font-family:var(--serif); font-size:2rem; color:var(--gold); }
.witch-quote p { font-family:var(--serif); font-style:italic; font-size:1.15rem; line-height:1.4; }
.chapter-strip { background:var(--forest); color:#efead9; display:flex; justify-content:center; gap:3rem; padding:1rem; font-size:.65rem; letter-spacing:.2em; }
.chapter-strip i { color:#d8b06a; }
.section { max-width:1180px; margin:auto; padding:4.5rem 2rem; }
.section-heading { display:flex; justify-content:space-between; align-items:flex-end; gap:3rem; margin-bottom:2.5rem; }
.section-heading > p { max-width:330px; color:var(--muted); font-size:.9rem; }
.collection-card { border:1px solid var(--line); background:var(--paper); display:grid; grid-template-columns:.9fr 1fr; border-radius:8px; overflow:hidden; width:100%; text-align:left; padding:0; color:var(--ink); }
.collection-card:hover { border-color:var(--gold); }
.collection-card[aria-pressed=true] { box-shadow:0 0 0 2px var(--forest); }
.collection-cover { height:310px; overflow:hidden; }
.collection-cover img { width:100%; height:100%; object-fit:cover; }
.collection-copy { display:flex; flex-direction:column; justify-content:center; align-items:flex-start; padding:2rem 3rem; }
.tag { color:var(--rose); font-size:.7rem; letter-spacing:.08em; text-transform:uppercase; font-weight:600; }
.collection-copy h3 { font-size:2.75rem; margin:1rem 0; }
.collection-copy p { color:var(--muted); font-size:.93rem; max-width:340px; }
.collection-link { margin-top:1.5rem; font-weight:600; font-size:.85rem; }
.collection-heading { display:flex; justify-content:space-between; gap:2rem; margin:2.8rem 0 1.5rem; align-items:center; }
.collection-heading p:not(.eyebrow) { color:var(--muted); font-size:.9rem; margin-top:.6rem; }
.card-count { white-space:nowrap; border:1px solid var(--line); border-radius:30px; padding:.3rem .8rem; font-size:.75rem; }
.recipe-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:1.4rem; }
.recipe-card { display:flex; flex-direction:column; background:var(--paper); border:1px solid var(--line); border-radius:6px; overflow:hidden; padding:0; color:inherit; text-align:left; }
.recipe-card:hover { transform:translateY(-3px); border-color:var(--gold); }
.recipe-card img { height:220px; width:100%; object-fit:cover; background:#eee4cc; }
.recipe-card .recipe-copy { padding:1.2rem; }
.recipe-card h4 { font-family:var(--serif); font-size:1.35rem; font-weight:400; margin:.35rem 0 .6rem; }
.recipe-card p { font-size:.83rem; color:var(--muted); }
.recipe-card .collection-link { display:block; margin-top:1rem; }
.empty-collection,.load-state { grid-column:1/-1; background:var(--paper); border:1px dashed var(--line); border-radius:6px; padding:1.8rem; color:var(--muted); }
.workshop { max-width:1116px; border-top:1px solid var(--line); border-bottom:1px solid var(--line); display:grid; grid-template-columns:1fr 1fr; gap:5rem; }
.workshop-copy { font-family:var(--serif); font-size:1.22rem; }
.workshop-copy .text-link { display:inline-block; margin-top:1.5rem; font-family:var(--sans); }
.small-note { font-family:var(--sans); color:var(--muted); font-size:.75rem; }
.workshop-copy .small-note { margin-top:.8rem; }
.abc-navigation,.beschwerden-grid { display:flex; flex-wrap:wrap; gap:.45rem; }
.abc-buchstabe,.beschwerde-btn { border:1px solid var(--line); background:transparent; color:var(--ink); border-radius:4px; min-height:44px; padding:.45rem .75rem; font-size:.82rem; }
.abc-buchstabe[aria-pressed=true],.beschwerde-btn[aria-pressed=true] { background:var(--forest); color:white; border-color:var(--forest); }
.abc-buchstabe:disabled { opacity:.28; cursor:default; }
.filter-result { margin:1rem 0; color:var(--muted); font-size:.8rem; }
.pflanzen-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:.8rem; }
.pflanzen-card { position:relative; padding:1.4rem 1.2rem; border:1px solid var(--line); border-radius:5px; background:var(--paper); text-align:left; color:var(--ink); min-height:112px; }
.pflanzen-card:hover { border-color:var(--gold); background:#f4eddb; }
.pflanzen-card .name { display:block; font-family:var(--serif); font-size:1.25rem; }
.pflanzen-card .latein { font-size:.7rem; font-style:italic; color:var(--muted); display:block; margin-top:.4rem; }
.pflanzen-card .buchstabe { position:absolute; right:.8rem; top:.6rem; font-family:var(--serif); color:var(--gold); font-size:.7rem; }
.guide { margin-top:2rem; padding:1.2rem; border:1px solid var(--line); border-radius:5px; }
.guide summary { cursor:pointer; font-size:.88rem; font-weight:600; }
.guide p { font-size:.8rem; color:var(--muted); margin:1rem 0; }
.shorts-section { border-top:1px solid var(--line); }
.shorts-galerie { display:grid; grid-template-columns:repeat(3,1fr); gap:1rem; }
.short-card { background:var(--paper); border:1px solid var(--line); border-radius:5px; padding:1.5rem; }
.short-card .video-icon { width:36px; height:36px; display:grid; place-items:center; border-radius:50%; background:var(--forest); color:var(--paper); font-size:.75rem; margin-bottom:1rem; }
.short-card h3 { font-size:1.3rem; }
.short-card p { font-size:.84rem; color:var(--muted); margin:.7rem 0 1.1rem; }
.newsletter { background:var(--forest); color:var(--paper); text-align:center; max-width:none; }
.newsletter .eyebrow { color:#e1c78e; }
.newsletter p:not(.eyebrow) { max-width:520px; margin:1.3rem auto; color:#dddccd; }
.newsletter .button { margin-top:.6rem; color:var(--forest); background:#f5edda; }
.about { display:grid; grid-template-columns:1fr 1fr; column-gap:4rem; }
.about .eyebrow { grid-column:1/-1; }
.about p:not(.eyebrow) { color:var(--muted); }
.footer { padding:2.5rem 2rem; border-top:1px solid var(--line); text-align:center; }
.footer > p { font-size:.85rem; margin:.7rem 0; }
.footer nav { display:flex; flex-wrap:wrap; justify-content:center; gap:.7rem 1.5rem; margin:1.3rem 0; font-size:.8rem; }
.footer nav a { text-decoration:none; }
.detail-dialog { border:1px solid var(--line); border-radius:8px; max-width:880px; width:calc(100% - 2rem); max-height:90dvh; padding:0; background:var(--paper); color:var(--ink); }
.detail-dialog::backdrop { background:#18221bd9; }
.dialog-top { position:sticky; top:0; display:flex; align-items:center; justify-content:space-between; padding:.7rem 1.5rem; background:var(--paper); border-bottom:1px solid var(--line); z-index:1; font-size:.65rem; letter-spacing:.12em; }
.dialog-top button { width:44px; height:44px; background:none; border:0; color:var(--ink); font-size:2rem; }
#modal-inhalt { padding:1.5rem 2rem 2rem; }
#modal-inhalt h2 { margin-bottom:.8rem; }
#modal-inhalt .latein { color:var(--muted); font-style:italic; }
.hook-zitat { font-family:var(--serif); font-size:1.25rem; margin:1.4rem 0; }
.modal-spalten { display:grid; grid-template-columns:1fr 1fr; gap:2rem; margin-top:1.7rem; }
.modal-spalten h3 { font-size:1.4rem; }
.modal-spalten ul { padding-left:1.2rem; font-size:.9rem; }
.modal-merksatz { background:#f1ead8; padding:1rem; margin-top:1rem; }
.recipe-photo { width:100%; height:250px; object-fit:cover; border-radius:5px; margin:1.5rem 0; }
.recipe-meta { display:flex; flex-wrap:wrap; gap:.4rem .9rem; font-size:.76rem; color:var(--muted); margin-top:1rem; }
.recipe-controls { display:flex; gap:1rem; align-items:center; flex-wrap:wrap; }
.batch-label { font-size:.85rem; }
.batch-label select { color:var(--ink); background:var(--paper); border:1px solid var(--line); border-radius:4px; padding:.5rem; max-width:100%; }
.recipe-text { display:grid; grid-template-columns:1fr 2fr; gap:2rem; margin:1.5rem 0; border-top:1px solid var(--line); padding-top:.5rem; font-size:.88rem; }
.recipe-text h3 { margin:1.2rem 0 .5rem; font-size:1.4rem; }
.ingredient-list { list-style:none; padding:0; }
.ingredient-list li { border-bottom:1px solid var(--line); }
.ingredient-list label { display:flex; align-items:flex-start; gap:.6rem; padding:.55rem 0; cursor:pointer; }
.ingredient-list input { accent-color:var(--forest); flex-shrink:0; width:18px; height:18px; margin-top:.2rem; }
.ingredient-list input:checked + span { text-decoration:line-through; color:var(--muted); }
.recipe-steps { padding-left:1.4rem; }
.recipe-steps li { padding-left:.3rem; margin-bottom:1rem; }
.recipe-steps li::marker { color:var(--gold); font-weight:700; }
.recipe-steps h4 { margin:0 0 .3rem; font-size:.94rem; }
.recipe-storage { margin-top:1.5rem; font-size:.88rem; }
.recipe-storage h3 { font-size:1.4rem; margin-bottom:.5rem; }
.print-batch { display:none; }
[hidden] { display:none !important; }
.legal-page { max-width:900px; }
.legal-page h1 { font-size:clamp(2.5rem,5vw,3.5rem); }
.legal-page section { margin:2.5rem 0; }
.legal-page h2 { font-size:1.6rem; margin-bottom:1rem; }
.legal-page a { overflow-wrap:anywhere; }
@media (max-width:900px) {
 .hero { padding:3rem 2rem; gap:2rem; } .hero h1 { font-size:3rem; } .witch-window { height:290px; }
 .hero-art { padding:2rem .5rem 1rem; } .site-header { padding:1.3rem 2rem; } .site-header nav { gap:1rem; }
 .nav-youtube { display:none; } .recipe-grid { grid-template-columns:repeat(2,1fr); }
 .pflanzen-grid { grid-template-columns:repeat(3,1fr); } .collection-copy { padding:2rem; }
 .workshop { margin:0 2rem; width:calc(100% - 4rem); gap:2rem; } .section-heading { gap:1.5rem; }
}
@media (max-width:640px) {
 .site-header { padding:1rem 1.2rem; flex-wrap:wrap; gap:1.2rem; } .wordmark { font-size:1.9rem; }
 .site-header nav { width:100%; justify-content:space-between; font-size:.77rem; }
 .hero { padding:2.6rem 1.2rem 2rem; grid-template-columns:1fr; gap:2.3rem; }
 .hero h1 { font-size:clamp(2.6rem,9vw,3.5rem); } .hero-art { max-width:420px; width:100%; margin:auto; }
 .witch-window { height:320px; } .hero-note { line-height:1.6; } .actions { gap:1rem; }
 .chapter-strip { gap:1rem; font-size:.49rem; letter-spacing:.08em; } .section { padding:3rem 1.2rem; }
 .section-heading { display:block; } .section-heading > p,.section-heading > a { display:block; margin-top:1rem; }
 .collection-card { grid-template-columns:1fr; } .collection-cover { height:220px; } .collection-copy { padding:1.5rem; }
 .collection-copy h3 { font-size:2.2rem; margin:.7rem 0; } .collection-heading { gap:1rem; align-items:flex-start; }
 .collection-heading h3 { font-size:1.6rem; } .recipe-grid { grid-template-columns:1fr; } .recipe-card img { height:250px; }
 .workshop { grid-template-columns:1fr; margin:0 1.2rem; width:calc(100% - 2.4rem); padding:2.5rem 0; gap:1.5rem; }
 .workshop-copy { font-size:1.12rem; } .pflanzen-grid { grid-template-columns:repeat(2,1fr); }
 .pflanzen-card { padding:1.4rem .8rem; } .pflanzen-card .name { font-size:1.08rem; }
 .shorts-galerie { grid-template-columns:1fr; } .about { grid-template-columns:1fr; gap:1.2rem; }
 #modal-inhalt { padding:1rem; } .dialog-top { padding:.5rem 1rem; } .modal-spalten { grid-template-columns:1fr; gap:.5rem; }
 .recipe-text { grid-template-columns:1fr; gap:0; } .recipe-photo { height:190px; }
 .recipe-controls .button { width:100%; font-size:.79rem; }
}
@media (prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } .recipe-card:hover { transform:none; } }
@media print {
 @page { margin:16mm; }
 body { background:white; color:#222; font-size:10pt; overflow:visible !important; }
 body:has(dialog[open]) > :not(dialog) { display:none !important; }
 .detail-dialog[open] { position:static; inset:auto; margin:0; width:100%; max-width:none; max-height:none; overflow:visible; border:0; border-radius:0; background:white; }
 .detail-dialog::backdrop { display:none; }
 .dialog-top { position:static; padding:0 0 .5rem; background:white; }
 .dialog-top button,.recipe-controls { display:none; }
 #modal-inhalt { padding:1rem 0 0; }
 #modal-inhalt h2 { font-size:25pt; }
 .recipe-photo { height:45mm; margin:1rem 0; }
 .print-batch { display:block; font-size:9pt; }
 .recipe-text { display:block; margin:.7rem 0; padding:0; }
 .ingredient-list { columns:2; column-gap:1.5rem; }
 .ingredient-list li,.recipe-steps li,.recipe-storage { break-inside:avoid; }
 .ingredient-list input { display:none; }
 .ingredient-list input:checked + span { text-decoration:none; color:inherit; }
 .recipe-text h3,.recipe-storage h3 { break-after:avoid; }
 .recipe-steps h4 { break-after:avoid; }
 .modal-merksatz { border:1px solid #aaa; background:white; padding:.7rem; break-inside:avoid; }
}