@font-face{font-family:"EB Garamond";src:url("/fonts/ebgaramond.woff2") format("woff2");font-weight:400 700;font-style:normal;font-display:swap}
@font-face{font-family:"Literata";src:url("/fonts/literata.woff2") format("woff2");font-weight:300 700;font-style:normal;font-display:swap}

:root{
  --parchment:#fff9ed;
  --parchment-low:#fcf3d8;
  --parchment-mid:#f7eed2;
  --parchment-high:#f1e8cd;
  --parchment-dim:#e2dabf;
  --ink:#1f1c0b;
  --ink-soft:#444842;
  --ink-faint:#747872;
  --rule:#c4c8c0;
  --forest:#182519;
  --forest-mid:#2d3b2d;
  --leather:#77574d;
  --leather-dark:#5d4037;
  --gold:#8a6a1e;
  --gold-bright:#c09c55;
  --wax:#93000a;
  --table:#2a2517;
  --shadow-warm:0 2px 4px rgba(62,39,35,.14), 0 14px 34px -18px rgba(62,39,35,.5);
  --serif:"EB Garamond","Iowan Old Style",Palatino,Georgia,serif;
  --body:"Literata",Georgia,"Times New Roman",serif;
  --paper:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/><feColorMatrix type='saturate' values='0'/></filter><rect width='180' height='180' filter='url(%23n)' opacity='.045'/></svg>");
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; background-color:var(--table);
  background-image:
    radial-gradient(ellipse at 20% 0%, rgba(96,80,44,.5), transparent 60%),
    radial-gradient(ellipse at 90% 40%, rgba(60,50,30,.6), transparent 55%);
  color:var(--ink); font-family:var(--body); font-size:16px; line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%; display:block}
a{color:var(--leather)}
:focus-visible{outline:2px solid var(--gold-bright); outline-offset:2px}
@media (prefers-reduced-motion:reduce){*{transition:none!important; scroll-behavior:auto}}

.sheet{
  max-width:1320px; margin:0 auto; background:var(--parchment); background-image:var(--paper);
  box-shadow:0 0 0 1px rgba(31,28,11,.18), 0 24px 60px -24px rgba(0,0,0,.75); min-height:100vh;
}

/* ---------- header ---------- */
.topbar{
  display:flex; align-items:center; gap:20px; flex-wrap:wrap;
  padding:14px 32px; border-bottom:2px solid var(--leather); background:var(--parchment-low);
}
.mark{font-family:var(--serif); font-style:italic; font-weight:700; font-size:1.5rem; margin:0}
.topnav{display:flex; gap:20px; margin-left:auto; flex-wrap:wrap}
.topnav a{font-family:var(--serif); font-size:1.1rem; color:var(--ink-soft); text-decoration:none; border-bottom:2px solid transparent}
.topnav a:hover{color:var(--forest); border-bottom-color:var(--gold-bright)}

/* hero mit Lagerfoto */
.hero{
  position:relative; isolation:isolate; display:flex; align-items:flex-end;
  min-height:clamp(400px,44vw,580px); background:#1b2216; overflow:hidden;
  border-bottom:2px solid var(--leather);
}
.heroimg{position:absolute; inset:0; z-index:0}
.heroimg img{
  width:100%; height:100%; object-fit:cover; object-position:50% 58%;
  filter:sepia(.24) saturate(.9) contrast(1.04) brightness(.98);
}
.hero::after{
  content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:
    linear-gradient(102deg, rgba(17,23,14,.90) 0%, rgba(17,23,14,.78) 34%, rgba(17,23,14,.40) 66%, rgba(17,23,14,.12) 100%),
    linear-gradient(to top, rgba(17,23,14,.72) 0%, rgba(17,23,14,.10) 46%, rgba(17,23,14,0) 70%);
}
.herotext{position:relative; z-index:2; padding:40px 32px 34px; max-width:820px}
.kicker{font-weight:700; font-size:.78rem; letter-spacing:.12em; text-transform:uppercase; color:#e3cb93; margin:0 0 14px; text-shadow:0 1px 6px rgba(0,0,0,.7)}
h1{
  font-family:var(--serif); font-weight:700; font-size:clamp(2.3rem,5.2vw,3.7rem);
  line-height:1.03; letter-spacing:-.02em; margin:0 0 16px; color:#fdf8ea;
  text-wrap:balance; text-shadow:0 2px 18px rgba(0,0,0,.62), 0 1px 3px rgba(0,0,0,.5);
}
h1 em{font-style:italic; color:#eccb7c}
.lede{max-width:64ch; font-size:1.03rem; color:#eee6d2; margin:0; text-shadow:0 1px 7px rgba(0,0,0,.72)}
.lede + .lede{margin-top:11px}
.lede strong{color:#fff9ea; font-weight:600}

.ledgerwrap{padding:26px 32px 4px}
.introtext:not(:empty){padding:18px 18px 0}
.introtext .lede{color:var(--ink-soft); text-shadow:none; max-width:66ch}
.introtext .lede strong{color:var(--ink)}
.ledger{display:flex; flex-wrap:wrap; border:1px solid var(--rule); background:var(--parchment-low)}
.ledger div{padding:11px 22px; border-right:1px solid var(--rule); flex:1 1 auto; min-width:118px}
.ledger div:last-child{border-right:0}
.ledger b{display:block; font-family:var(--serif); font-size:1.65rem; line-height:1.1; color:var(--forest); font-variant-numeric:tabular-nums}
.ledger span{display:block; font-size:.7rem; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-faint); font-weight:700; margin-top:2px}

/* ---------- kompass ---------- */
.compass{
  position:sticky; top:0; z-index:30;
  background:var(--parchment-low); background-image:var(--paper);
  border-top:1px solid var(--rule); border-bottom:2px solid var(--leather);
  padding:12px 32px 14px;
}
.crow{display:flex; align-items:center; gap:10px 14px; flex-wrap:wrap; padding:5px 0}
.crow + .crow{border-top:1px dotted var(--rule)}
.crow-head{gap:12px; padding-bottom:9px}
.cico{color:var(--leather); display:flex}
.compass h2{font-family:var(--serif); font-size:1.25rem; margin:0; color:var(--forest); white-space:nowrap}
.clab{
  font-size:.68rem; letter-spacing:.12em; text-transform:uppercase; font-weight:700;
  color:var(--leather); min-width:74px;
}
.chips{display:flex; gap:7px; flex-wrap:wrap}

#q{
  flex:1 1 240px; min-width:180px; background:var(--parchment); color:var(--ink);
  border:1px solid var(--rule); border-bottom:1px solid var(--leather); border-radius:2px;
  padding:8px 12px; font-family:var(--body); font-size:.95rem;
}
#q::placeholder{color:var(--ink-faint)}

.chip{
  font-family:var(--body); font-size:.84rem; line-height:1.2; color:var(--ink-soft);
  background:var(--parchment); border:1px solid var(--rule); border-radius:2px;
  padding:7px 13px; cursor:pointer; white-space:nowrap;
  transition:background .12s, color .12s, border-color .12s;
  display:inline-flex; align-items:center; gap:7px;
}
.chip:hover{border-color:var(--leather); color:var(--ink)}
.chip .n{
  font-size:.7rem; font-variant-numeric:tabular-nums; color:var(--ink-faint);
  background:var(--parchment-high); border-radius:9px; padding:0 6px;
}
.chip[aria-pressed="true"]{background:var(--forest-mid); border-color:var(--forest); color:#f6f1de}
.chip[aria-pressed="true"] .n{background:rgba(255,255,255,.18); color:#e9e2c8}
.chip[aria-pressed="true"]:hover{background:var(--forest)}
.chip.c-top[aria-pressed="true"]{background:#3d6b45; border-color:#2c5232}
.chip.c-gut[aria-pressed="true"]{background:#7c6420; border-color:#5f4c14}
.chip.c-check[aria-pressed="true"]{background:#8a5f22; border-color:#6d4a17}
.chip.c-raus[aria-pressed="true"]{background:#8e3529; border-color:#70271d}
.chip.c-frei[aria-pressed="true"]{background:#2f6b3c; border-color:#22512c}
.chip.c-teils[aria-pressed="true"]{background:#7c6420; border-color:#5f4c14}
.chip.c-offen[aria-pressed="true"]{background:#5c6157; border-color:#464b43}
.chip.c-belegt[aria-pressed="true"]{background:#8e3529; border-color:#70271d}
.chip[disabled]{opacity:.38; cursor:default}
.chip[disabled]:hover{border-color:var(--rule); color:var(--ink-soft)}

.ghost{
  background:none; border:1px solid var(--rule); border-radius:2px; cursor:pointer;
  font-family:var(--body); font-size:.8rem; color:var(--ink-soft); padding:7px 12px;
}
.ghost:hover{border-color:var(--leather); color:var(--ink)}
.ghost.danger{color:var(--wax); border-color:#d9bfb8}
.ghost.danger:hover{background:var(--wax); color:#fff6ee; border-color:var(--wax)}
.count{margin-left:auto; font-size:.82rem; color:var(--ink-faint); font-variant-numeric:tabular-nums; white-space:nowrap}
#cbody[hidden]{display:none}

/* ---------- main ---------- */
.main{padding:30px 32px 10px}
.mainhead h2{font-family:var(--serif); font-size:2rem; margin:0; color:var(--forest); line-height:1}
.mainsub{color:var(--ink-soft); font-style:italic; margin:6px 0 0}
.divider{height:1px; background:var(--rule); margin:14px 0 22px}

.ranking{border:1px solid var(--rule); background:var(--parchment-low); padding:18px 20px; margin-bottom:26px}
.ranking h3{font-family:var(--serif); font-size:1.35rem; margin:0 0 10px; color:var(--forest)}
.ranking ol{margin:0; padding-left:22px}
.ranking li{padding:3px 0; color:var(--ink-soft)}
.ranking li b{color:var(--ink); font-weight:600}
.ranking .v{color:var(--leather); font-weight:700}

/* ---------- cards ---------- */
.grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(288px,1fr)); gap:24px}
.card{
  background:#fffdf6; border:2px solid #33332c; display:flex; flex-direction:column;
  box-shadow:var(--shadow-warm); position:relative; cursor:pointer;
  transition:transform .12s, box-shadow .12s;
}
.card:hover{transform:translateY(-2px); box-shadow:0 4px 8px rgba(62,39,35,.16), 0 20px 40px -18px rgba(62,39,35,.6)}
.card .thumb{aspect-ratio:16/10; background:var(--parchment-dim); overflow:hidden; border-bottom:1px solid #33332c; position:relative}
.card .thumb img{width:100%; height:100%; object-fit:cover}
.noimg{
  width:100%; height:100%; display:grid; place-items:center; text-align:center;
  font-family:var(--serif); font-size:1rem; color:var(--ink-faint); padding:14px;
  background:repeating-linear-gradient(45deg,#e8e0c4,#e8e0c4 10px,#e2dabf 10px,#e2dabf 20px);
}
.imgcredit{position:absolute; left:0; bottom:0; font-size:.62rem; letter-spacing:.03em; background:rgba(24,37,25,.74); color:#f4eeda; padding:2px 8px}
.seal{
  position:absolute; top:-12px; right:-12px; width:44px; height:44px; border-radius:50%;
  background:radial-gradient(circle at 35% 30%, #c4373c, var(--wax) 70%); color:#ffeede;
  display:grid; place-items:center; font-family:var(--serif); font-size:.62rem; font-weight:700;
  line-height:1.05; text-align:center; box-shadow:0 2px 5px rgba(0,0,0,.35); border:1px solid #6d0007; z-index:2;
}
.cbody{padding:15px 16px 14px; display:flex; flex-direction:column; gap:9px; flex:1}
.cbody h3{font-family:var(--serif); font-size:1.32rem; line-height:1.15; margin:0; color:var(--forest)}
.cbody h3 .nr{font-family:var(--body); font-size:.6rem; font-weight:700; letter-spacing:.08em; color:var(--leather); border:1px solid var(--leather); padding:1px 5px; vertical-align:4px; margin-right:7px}
.where{font-size:.84rem; color:var(--ink-faint); margin:-3px 0 0}
.tags{display:flex; flex-wrap:wrap; gap:6px}
.tag{font-size:.69rem; letter-spacing:.04em; padding:3px 9px; border:1px solid var(--rule); background:var(--parchment-high); color:var(--ink-soft); white-space:nowrap}
.tag.t-top{background:#dfe8da; border-color:var(--forest-mid); color:var(--forest)}
.tag.t-gut{background:#eee9d0; border-color:var(--gold); color:var(--gold)}
.tag.t-check{background:#f1e4d2; border-color:#a2762c; color:#7a5714}
.tag.t-raus{background:#f3ded9; border-color:#a33f34; color:#8e3529}
.tag.bel{font-weight:700}
.tag.bel-frei{background:#d8e8d6; border-color:#2f6b3c; color:#22512c}
.tag.bel-teilweise{background:#f0e7cd; border-color:#8a6a1e; color:#6b5013}
.tag.bel-belegt{background:#f0d9d4; border-color:#8e3529; color:#7a2b21}
.tag.bel-nicht_buchbar{background:#f0d9d4; border-color:#8e3529; color:#7a2b21}
.tag.bel-kein_kalender{background:var(--parchment-high); border-color:var(--rule); color:var(--ink-faint); font-weight:400}
.why{font-size:.9rem; color:var(--ink-soft); margin:0; line-height:1.5}
.cfoot{margin-top:auto; padding-top:12px; border-top:1px dashed var(--rule); display:flex; flex-direction:column; gap:11px}
.cactions{display:flex; align-items:center; gap:12px; flex-wrap:wrap}
.price{font-size:.88rem; color:var(--ink); font-variant-numeric:tabular-nums; margin:0; line-height:1.4}
.price .plabel{display:block; font-size:.63rem; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-faint); font-weight:700; margin-bottom:1px}
.price b{font-family:var(--serif); font-size:1.06rem; font-weight:600}
.openbtn{margin-left:auto; background:none; border:0; color:var(--leather); font-family:var(--body); font-weight:700; font-size:.84rem; cursor:pointer; padding:4px 0; border-bottom:1px solid transparent}
.card:hover .openbtn{border-bottom-color:var(--leather)}

.vote{
  display:inline-flex; align-items:center; gap:8px; background:var(--parchment-high);
  border:1px solid var(--leather); color:var(--leather); font-family:var(--body);
  font-weight:700; font-size:.84rem; padding:6px 12px; cursor:pointer;
  transition:background .12s, color .12s, transform .06s;
}
.vote .cnt{font-variant-numeric:tabular-nums; min-width:1.1em; text-align:right}
.vote:hover{background:#fed3c7}
.vote:active{transform:translateY(1px)}
.vote[aria-pressed="true"]{background:var(--leather); color:#fff9ed; border-color:var(--leather-dark)}
.vote .ico{width:13px; height:13px; flex:none}

.empty{grid-column:1/-1; text-align:center; padding:50px 20px; color:var(--ink-soft)}
.empty p{font-style:italic; margin:0 0 14px}

/* ---------- akte ---------- */
.scrim{position:fixed; inset:0; background:rgba(26,20,10,.74); z-index:60; display:grid; place-items:start center; padding:34px 16px; overflow:auto}
.scrim[hidden]{display:none}
.scroll-doc{
  max-width:940px; width:100%; background:var(--parchment); background-image:var(--paper);
  border:1px solid #b7ab86; box-shadow:0 30px 70px -20px rgba(0,0,0,.7); padding:32px; position:relative;
}
.closebtn{position:absolute; top:12px; right:16px; background:none; border:0; cursor:pointer; font-family:var(--serif); font-size:1.7rem; line-height:1; color:var(--ink-faint)}
.closebtn:hover{color:var(--wax)}
.scroll-doc h2{font-family:var(--serif); font-size:2.2rem; margin:0 0 4px; color:var(--forest); text-align:center; line-height:1.05}
.scroll-doc .sub{text-align:center; font-style:italic; color:var(--ink-soft); margin:0 0 20px}
.shots{display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:14px; margin-bottom:6px}
.shot figure{margin:0}
.shot img{width:100%; aspect-ratio:16/10; object-fit:cover; border:1px solid #b7ab86; background:var(--parchment-dim)}
.shot figcaption{font-size:.72rem; color:var(--ink-faint); margin-top:4px; letter-spacing:.03em}
.shot figcaption a{color:var(--leather)}
.dgrid{display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:18px 26px; margin-top:20px}
.dfull{grid-column:1/-1}
.dblock h4{font-size:.7rem; letter-spacing:.12em; text-transform:uppercase; font-weight:700; color:var(--leather); margin:0 0 5px}
.dblock p{margin:0; font-size:.93rem; color:var(--ink-soft); line-height:1.55}
.dblock strong{color:var(--ink)}
.callout{border-left:4px solid var(--gold); background:var(--parchment-high); padding:12px 16px; font-size:.95rem}
.avail{border-left:4px solid var(--ink-faint); background:var(--parchment-high); padding:12px 16px; font-size:.93rem}
.avail.a-frei{border-left-color:#2f6b3c}
.avail.a-belegt,.avail.a-nicht_buchbar{border-left-color:#8e3529}
.avail.a-teilweise{border-left-color:var(--gold)}
.avail b{display:block; margin-bottom:3px; font-family:var(--serif); font-size:1.05rem}
.amen{display:flex; flex-wrap:wrap; gap:8px}
.amen span{font-size:.77rem; padding:4px 10px; border:1px solid var(--rule); background:var(--parchment-high)}
.amen span.off{opacity:.4; text-decoration:line-through}
.srcline{word-break:break-word; font-size:.88rem}
.dactions{display:flex; gap:12px; flex-wrap:wrap; align-items:center; margin-top:4px}
.linkbtn{
  display:inline-flex; align-items:center; gap:7px; text-decoration:none;
  background:var(--parchment-high); border:1px solid var(--leather); color:var(--leather);
  font-weight:700; font-size:.84rem; padding:6px 12px;
}
.linkbtn:hover{background:#fed3c7}

footer{background:var(--parchment-low); border-top:2px solid var(--leather); padding:22px 32px; font-size:.85rem; color:var(--ink-faint); margin-top:34px}
footer p{margin:0 0 6px; max-width:80ch}
.toast{position:fixed; left:50%; bottom:26px; transform:translateX(-50%); background:var(--forest); color:#f2eeda; padding:10px 18px; font-size:.9rem; box-shadow:var(--shadow-warm); z-index:80}
.toast[hidden]{display:none}

@media (max-width:820px){
  .topbar,.compass,.main,footer,.ledgerwrap{padding-left:18px; padding-right:18px}
  .hero{padding-left:0; padding-right:0; min-height:clamp(290px,64vw,400px)}
  .herotext{padding:24px 18px 22px}
  .hero::after{
    background:
      linear-gradient(to top, rgba(17,23,14,.93) 0%, rgba(17,23,14,.82) 42%, rgba(17,23,14,.42) 72%, rgba(17,23,14,.16) 100%);
  }
  .clab{min-width:100%; margin-bottom:-2px}
  .count{margin-left:0}
  .compass{position:static}
  .scroll-doc{padding:22px 18px}
}