:root{
  --curry:#f2b705; --curry-soft:#fde9a8; --paprika:#c8341f; --ketchup:#8f2414;
  --cream:#fff8ec; --paper:#ffffff; --ink:#2a1a12; --muted:#7a6656; --line:#efe2cf;
  --radius:18px; --shadow:0 6px 24px rgba(90,40,10,.10);
  --font:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --display:ui-rounded,"SF Pro Rounded",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;font:17px/1.55 var(--font);color:var(--ink);background:var(--cream);}
a{color:var(--paprika);text-decoration-thickness:2px;text-underline-offset:3px}
img{max-width:100%;height:auto;display:block}
h1,h2,h3{font-family:var(--display);line-height:1.15;letter-spacing:-.01em;margin:.2em 0 .4em}
h1{font-size:clamp(1.9rem,6vw,3rem);font-weight:900}
h2{font-size:1.45rem;font-weight:800}
h3{font-size:1.1rem;font-weight:750}
main{max-width:1080px;margin:0 auto;padding:0 16px 48px}
.muted{color:var(--muted)} .small{font-size:.88rem} .center{text-align:center}

/* Kopf */
.top{position:sticky;top:0;z-index:10;display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:10px 16px;padding-top:max(10px,env(safe-area-inset-top));background:var(--paprika);color:#fff;box-shadow:0 2px 12px rgba(0,0,0,.15)}
.brand{display:flex;align-items:center;gap:8px;color:#fff;text-decoration:none;font:800 1.15rem var(--display)}
.brand b{color:var(--curry);font-weight:900}
.brand-mark{width:34px;height:34px}
.nav{display:flex;gap:4px;align-items:center}
.nav a{color:#fff;text-decoration:none;padding:8px 10px;border-radius:999px;font-weight:600;font-size:.95rem}
.nav a:hover{background:rgba(255,255,255,.15)}
.nav-me{background:var(--curry);color:var(--ink)!important}
@media (max-width:440px){.brand span{display:none}}
@media (max-width:420px){.nav a{padding:8px 7px}.brand{font-size:1rem}}

/* Hero */
.hero{margin:0 -16px;padding:40px 20px 36px;text-align:center;
  background:radial-gradient(circle at 20% 0,var(--curry-soft),transparent 60%),radial-gradient(circle at 90% 30%,#ffd9cc,transparent 55%),var(--cream)}
.hl{background:linear-gradient(transparent 60%,var(--curry) 60%);padding:0 .1em}
.lead{max-width:640px;margin:0 auto 20px;font-size:1.08rem;color:#4a3426}
.search{display:flex;gap:8px;max-width:520px;margin:12px auto}
.search input{flex:1;min-width:0;font:inherit;padding:14px 18px;border:2px solid var(--line);border-radius:999px;background:#fff}
.search input:focus{outline:none;border-color:var(--curry)}
.search button,.btn{font:700 1rem var(--font);border:0;border-radius:999px;padding:14px 22px;background:var(--paprika);color:#fff;cursor:pointer;text-decoration:none;display:inline-block}
.search button:hover,.btn:hover{background:var(--ketchup)}
.btn-ghost{font:600 .95rem var(--font);border:2px solid var(--paprika);border-radius:999px;padding:10px 18px;background:transparent;color:var(--paprika);cursor:pointer;text-decoration:none;display:inline-block}
.btn-ghost.small{padding:6px 12px;font-size:.85rem}
.btn-danger{font:700 1rem var(--font);border:0;border-radius:999px;padding:12px 20px;background:#7d1010;color:#fff;cursor:pointer}
.link-danger{background:none;border:0;color:#7d1010;text-decoration:underline;cursor:pointer;font:inherit;padding:8px 0}
.nearby{max-width:640px;margin:12px auto 0;text-align:left}
.nearby a{display:flex;justify-content:space-between;gap:8px;padding:10px 14px;background:#fff;border-radius:12px;margin-top:6px;text-decoration:none;color:var(--ink);box-shadow:var(--shadow)}

/* Blöcke & Karten */
.block{margin:32px 0}
.block.narrow{max-width:560px;margin-left:auto;margin-right:auto}
.block-head{display:flex;justify-content:space-between;align-items:baseline;gap:12px}
.block-head a{font-weight:600;text-decoration:none}
.grid{display:grid;gap:16px;grid-template-columns:repeat(auto-fill,minmax(250px,1fr))}
.card{display:flex;flex-direction:column;background:var(--paper);border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow);text-decoration:none;color:var(--ink);transition:transform .15s}
.card:hover{transform:translateY(-3px)}
.card-img{aspect-ratio:4/3;background:var(--curry-soft);overflow:hidden}
.card-img img{width:100%;height:100%;object-fit:cover}
.card-ph{width:100%;height:100%;background:repeating-linear-gradient(45deg,var(--curry-soft),var(--curry-soft) 14px,#fbe0a0 14px,#fbe0a0 28px)}
.card-body{padding:14px 16px 16px}
.card-body p{margin:0 0 10px}
.card-scores{display:flex;align-items:center;gap:6px}
.card-scores small{color:var(--muted);margin-right:10px}
.closed{color:#7d1010;font-weight:600}

/* Note als Ring */
.badge{--p:0;--size:42px;width:var(--size);height:var(--size);border-radius:50%;flex:none;display:inline-grid;place-items:center;
  background:conic-gradient(var(--paprika) calc(var(--p)*1%),var(--line) 0);font:800 .9rem var(--display)}
.badge>span{width:calc(100% - 8px);height:calc(100% - 8px);border-radius:50%;background:#fff;display:grid;place-items:center}
.badge-big{--size:76px;font-size:1.35rem}
.badge-empty{background:var(--line);color:var(--muted)}

/* Spot */
.spot-head{display:grid;gap:16px;margin-top:20px}
.spot-img,.post-img{border-radius:var(--radius);width:100%;max-height:440px;object-fit:cover;box-shadow:var(--shadow)}
.score-row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media (max-width:440px){.score-box{flex-direction:column;text-align:center;padding:12px;font-size:.9rem}}
.score-box{display:flex;align-items:center;gap:12px;background:#fff;border-radius:var(--radius);padding:12px 18px 12px 12px;box-shadow:var(--shadow);font-weight:600}
.bars{display:grid;gap:8px;margin:12px 0}
.bar{display:grid;grid-template-columns:110px 1fr;align-items:center;gap:10px}
.bar dt{font-weight:600;font-size:.95rem}
.bar dd{margin:0;display:flex;align-items:center;gap:10px}
.bar-track{flex:1;height:10px;background:var(--line);border-radius:99px;overflow:hidden}
.bar-fill{display:block;height:100%;width:calc(var(--p)*1%);background:linear-gradient(90deg,var(--curry),var(--paprika));border-radius:99px}
.bar b{width:2.2em;text-align:right;font-variant-numeric:tabular-nums}
.verdict{display:flex;gap:20px;align-items:center;background:#fff;border-radius:var(--radius);padding:16px;box-shadow:var(--shadow);margin:16px 0}
.verdict .bars{flex:1}
@media (max-width:520px){.verdict{flex-direction:column;align-items:stretch}.verdict .badge{align-self:center}}

/* Bewertungsformular: Sterne als Würstchen-Punkte */
.rate{display:grid;gap:12px}
.stars{border:0;padding:0;margin:0}
.stars legend{font-weight:700;margin-bottom:4px}
.stars-row{display:inline-flex;flex-direction:row-reverse;gap:6px}
.stars input{position:absolute;opacity:0;width:1px;height:1px}
.stars label{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;background:#fff;border:2px solid var(--line);font-weight:800;cursor:pointer;color:var(--muted)}
.stars input:checked~label,.stars label:hover,.stars label:hover~label{background:var(--curry);border-color:var(--curry);color:var(--ink)}
.stars input:focus-visible+label{outline:3px solid var(--paprika);outline-offset:2px}
.field{display:grid;gap:6px;font-weight:600}
.field input,.field textarea{font:inherit;font-weight:400;padding:12px 14px;border:2px solid var(--line);border-radius:12px;background:#fff}
.field input:focus,.field textarea:focus{outline:none;border-color:var(--curry)}
.code{font-size:1.6rem!important;letter-spacing:.4em;text-align:center}
.stack{display:grid;gap:14px;margin:16px 0}
.alert{background:#ffe1dc;border-left:4px solid var(--paprika);padding:10px 14px;border-radius:8px}
.ok{background:#e6f6df;border-left:4px solid #3c8d2f;padding:10px 14px;border-radius:8px}
.danger-zone{border-top:2px dashed var(--line);padding-top:16px}

/* Bewertungen */
.review{background:#fff;border-radius:14px;padding:14px 16px;margin:10px 0;box-shadow:var(--shadow);display:block;color:var(--ink);text-decoration:none}
.review-head{display:flex;gap:12px;align-items:center}
.review p{margin:10px 0 0}

/* Artikel */
.post{max-width:720px;margin:24px auto}
.prose{font-size:1.06rem}
.prose img{border-radius:12px;margin:16px 0}
.prose figure{margin:16px 0}
.tags a{display:inline-block;margin:4px 6px 0 0;padding:4px 10px;border-radius:99px;background:var(--curry-soft);color:var(--ink);text-decoration:none;font-size:.9rem}
.pager{display:flex;justify-content:center;align-items:center;gap:16px;margin:24px 0}

.cta{margin:40px -16px 0;padding:32px 20px;text-align:center;background:var(--ink);color:#fff;border-radius:var(--radius)}
.cta .btn{background:var(--curry);color:var(--ink)}
.foot{text-align:center;padding:24px 16px calc(24px + env(safe-area-inset-bottom));color:var(--muted);font-size:.9rem;border-top:1px solid var(--line)}
.foot a{color:var(--muted)}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}

/* Noten → Prozent (generiert: sc-N = N/10 von 5) */
.sc-0{--p:0}.sc-1{--p:2}.sc-2{--p:4}.sc-3{--p:6}.sc-4{--p:8}.sc-5{--p:10}.sc-6{--p:12}.sc-7{--p:14}.sc-8{--p:16}.sc-9{--p:18}.sc-10{--p:20}.sc-11{--p:22}.sc-12{--p:24}.sc-13{--p:26}.sc-14{--p:28}.sc-15{--p:30}.sc-16{--p:32}.sc-17{--p:34}.sc-18{--p:36}.sc-19{--p:38}.sc-20{--p:40}.sc-21{--p:42}.sc-22{--p:44}.sc-23{--p:46}.sc-24{--p:48}.sc-25{--p:50}.sc-26{--p:52}.sc-27{--p:54}.sc-28{--p:56}.sc-29{--p:58}.sc-30{--p:60}.sc-31{--p:62}.sc-32{--p:64}.sc-33{--p:66}.sc-34{--p:68}.sc-35{--p:70}.sc-36{--p:72}.sc-37{--p:74}.sc-38{--p:76}.sc-39{--p:78}.sc-40{--p:80}.sc-41{--p:82}.sc-42{--p:84}.sc-43{--p:86}.sc-44{--p:88}.sc-45{--p:90}.sc-46{--p:92}.sc-47{--p:94}.sc-48{--p:96}.sc-49{--p:98}.sc-50{--p:100}