:root{--bg:#f3ebe0;--card:#fcf9f4;--ink:#3b2a20;--muted:#7a6552;--brown:#6b4630;--dark:#4a2f20;--caramel:#b9772f;--sand:#eadfce;--line:#e0d3c1;--ok:#4f7a4a;--no:#a5503a;--teal:var(--brown);--sun:var(--caramel);--plum:var(--dark)}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--ink);font:16px/1.55 "Segoe UI",Roboto,Helvetica,Arial,sans-serif}
h1,h2,h3{font-family:Georgia,"Times New Roman",serif;color:var(--dark);line-height:1.2}
a{color:var(--brown)}
.wrap{max-width:1100px;margin:0 auto;padding:0 1rem}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
/* Kopf */
header{background:var(--card);border-bottom:1px solid var(--line);padding:.6rem 0}
header .wrap{display:flex;flex-wrap:wrap;gap:.5rem 1.5rem;align-items:center;justify-content:space-between}
.brand img{height:64px;width:auto;display:block}
.nav{display:flex;gap:1.4rem;font-weight:600}
.nav a{color:var(--brown);text-decoration:none}.nav a:hover{color:var(--caramel)}
.hero{background:radial-gradient(circle at 85% 20%,#8a5a3c 0,transparent 45%),linear-gradient(135deg,#6b4630,#4a2f20);color:#f6ecdc;padding:3rem 0 3.2rem}
.hero h1{color:#fbf1e0;margin:0 0 .6rem;font-size:clamp(1.9rem,5vw,3rem)}
.hero p{margin:0;max-width:36rem;font-size:1.1rem;opacity:.92}
.hero b{color:#f0c98a}
/* Zufallsrad */
.roulette{display:flex;flex-wrap:wrap;gap:1.4rem;align-items:center;background:linear-gradient(135deg,#efe1cc,#e5d2b6);border:1px solid var(--line);border-radius:24px;padding:1.5rem;margin:-1.6rem 0 1.5rem;box-shadow:0 10px 28px rgba(74,47,32,.14)}
.wheel{width:120px;height:120px;filter:drop-shadow(0 4px 6px rgba(74,47,32,.3));transition:transform 2.4s cubic-bezier(.15,.7,.2,1)}
.rbody{flex:1 1 260px;display:grid;gap:.6rem}
.rbody h2{margin:0}
.rform,.rrow{display:flex;flex-wrap:wrap;gap:.6rem;align-items:center}
.rform input,.rform select{flex:1 1 160px}.rform label{flex:1 1 100%}
.result{background:var(--card);border-left:5px solid var(--caramel);border-radius:10px;padding:.8rem 1rem;display:grid;gap:.3rem;justify-items:start}
/* Werkzeugleiste und Filter */
.bar{position:relative;padding:1rem 0 .4rem}
.toolbar{display:flex;flex-wrap:wrap;gap:.7rem;align-items:center}
input,select,textarea{font:inherit;color:var(--ink);padding:.6rem .9rem;border:1px solid var(--line);border-radius:12px;background:#fff;min-width:0}
input[type=search]{flex:1 1 220px;border-radius:99px;padding-left:1.2rem}
.filters{position:relative}
.filters summary{list-style:none;cursor:pointer;padding:.6rem 1.3rem;border-radius:99px;background:var(--brown);color:#fff;font-weight:600;user-select:none}
.filters summary::-webkit-details-marker{display:none}
.filters summary::after{content:" ▾"}
.filters[open] summary::after{content:" ▴"}
.fpanel{position:absolute;right:0;top:calc(100% + .5rem);width:min(430px,92vw);background:var(--card);border:1px solid var(--line);border-radius:18px;padding:1.1rem;box-shadow:0 16px 36px rgba(74,47,32,.22);z-index:20;display:grid;gap:1rem}
.fgroup h3{margin:0 0 .4rem;font-size:.95rem}
.fpanel label{display:grid;gap:.25rem;font-size:.9rem}
.fpanel label.avail{display:flex;gap:.5rem;align-items:center}
.chips{display:flex;flex-wrap:wrap;gap:.4rem}
.chip{border:1px solid var(--line);background:var(--sand);color:var(--dark);border-radius:99px;padding:.3rem .85rem;cursor:pointer;font:inherit;font-size:.88rem}
.chip[aria-pressed=true]{background:var(--brown);border-color:var(--brown);color:#fff}
.count{color:var(--muted);margin:.6rem 0 1.1rem;font-size:.92rem}
/* Kacheln */
main{padding:0 0 3rem}
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.6rem}
.card{background:var(--card);border:1px solid var(--line);border-radius:22px;overflow:hidden;display:flex;flex-direction:column;box-shadow:0 4px 14px rgba(74,47,32,.08);transition:transform .2s,box-shadow .2s}
.card:hover{transform:translateY(-4px);box-shadow:0 14px 30px rgba(74,47,32,.18)}
.media{position:relative;aspect-ratio:4/3;display:grid;place-items:center}
.media::before{content:"🧩";font-size:3.2rem;opacity:.4}
.media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.state{position:absolute;top:.8rem;left:.8rem;padding:.25rem .8rem;border-radius:99px;font-size:.8rem;font-weight:700;color:#fff;box-shadow:0 2px 6px rgba(0,0,0,.25)}
.state.ok{background:var(--ok)}.state.no{background:var(--no)}
.body{padding:1.1rem 1.2rem 1.3rem;display:flex;flex-direction:column;gap:.55rem;flex:1}
.body h3{margin:0;font-size:1.25rem}
.pills{display:flex;flex-wrap:wrap;gap:.4rem}
.pill{background:var(--sand);color:var(--dark);border-radius:99px;padding:.15rem .75rem;font-size:.82rem;font-weight:600}
.sub{margin:0;color:var(--muted);font-size:.9rem}
.empty{grid-column:1/-1;padding:2rem;text-align:center;color:var(--muted)}
/* Buttons und Dialog */
.btn{margin-top:auto;border:0;border-radius:99px;padding:.7rem 1.3rem;font:inherit;font-weight:600;cursor:pointer;background:var(--brown);color:#fff;transition:background .15s}
.btn:hover{background:var(--caramel)}
.btn:disabled{background:var(--sand);color:var(--muted);cursor:default}
.btn.sec{background:transparent;border:1px solid var(--line);color:var(--ink)}
.btn.sec:hover{background:var(--sand)}
button:focus-visible,input:focus-visible,select:focus-visible,summary:focus-visible{outline:3px solid var(--caramel);outline-offset:2px}
dialog{border:0;border-radius:22px;padding:1.6rem;max-width:min(460px,92vw);width:100%;background:var(--card);color:var(--ink)}
dialog::backdrop{background:rgba(59,42,32,.6)}
dialog form{display:grid;gap:.75rem}
dialog label{display:grid;gap:.25rem;font-size:.9rem}
.row{display:flex;gap:.6rem;justify-content:flex-end}
/* Fuß und Unterseiten */
footer{background:var(--dark);color:#e8dccb;padding:1.5rem 0;font-size:.92rem}
footer a{color:#f0c98a;margin-right:1.2rem}
.page{max-width:720px;margin:2rem auto 3rem;padding:2rem 1.5rem;background:var(--card);border:1px solid var(--line);border-radius:22px}
.page h2{margin-top:2rem}
.todo{background:#f7e3a4;padding:0 .3rem;border-radius:4px}
.note{background:var(--card);border:1px solid var(--line);border-left:5px solid var(--caramel);padding:.8rem 1rem;border-radius:10px}
.meta{font-size:.9rem;color:var(--muted)}
@media (max-width:900px){.grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:640px){.grid{grid-template-columns:1fr}.filters{position:static}.fpanel{left:1rem;right:1rem;width:auto}.hero{padding:2rem 0 2.6rem}}
@media (prefers-reduced-motion:reduce){.wheel,.card{transition:none}}