:root{
  --rose:#a8616b; --rose-d:#8c4f58; --rose-l:#c98b94;
  --gold:#c2a36b; --gold-d:#a98948;
  --cream:#faf6f1; --sand:#f3e9e1; --blush:#f4e4e5;
  --card:#ffffff; --ink:#3c3438; --muted:#8c7f84;
  --border:rgba(120,80,90,.14); --shadow:0 6px 26px rgba(120,70,80,.10);
  --radius:18px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; color:var(--ink); background:var(--cream);
  font-family:'Inter',system-ui,-apple-system,sans-serif; font-size:16px; line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3{font-family:'Cormorant Garamond',Georgia,serif; font-weight:600; line-height:1.12; margin:.1em 0 .35em; letter-spacing:.2px}
a{color:inherit}
img{max-width:100%}
.wrap{max-width:1120px; margin:0 auto; padding:0 22px}
.muted{color:var(--muted)}
.eyebrow{font-size:.72rem; font-weight:600; letter-spacing:.28em; text-transform:uppercase; color:var(--gold-d)}

/* ── Topbar ── */
.topbar{background:rgba(250,246,241,.9); backdrop-filter:blur(10px);
  border-bottom:1px solid var(--border); position:sticky; top:0; z-index:30}
.topbar-inner{display:flex; align-items:center; gap:18px; padding:13px 22px; flex-wrap:wrap}
.logo{font-family:'Cormorant Garamond',serif; font-weight:700; font-size:1.6rem; text-decoration:none; color:var(--ink); letter-spacing:.4px; white-space:nowrap}
.logo span{color:var(--rose); font-style:italic}
.topsearch{margin-left:auto; display:flex; gap:8px; flex:1; max-width:420px; min-width:180px}
.topsearch input{flex:1; padding:9px 15px; border:1px solid var(--border); border-radius:999px; background:#fff; font:inherit; color:var(--ink)}
.topsearch button{border:0; border-radius:999px; padding:9px 20px; font:inherit; font-weight:600; color:#fff; cursor:pointer;
  background:linear-gradient(135deg,var(--rose),var(--rose-d))}

/* ── Hero ── */
.hero{position:relative; min-height:64vh; display:flex; align-items:center; justify-content:center; text-align:center;
  padding:80px 22px; color:#fff; overflow:hidden;
  background:linear-gradient(180deg,rgba(60,40,46,.42),rgba(60,40,46,.58)), url('img/hero.jpg') center/cover no-repeat;}
.hero-inner{position:relative; max-width:760px; width:100%}
.hero .eyebrow{color:#f3dcc9}
.hero h1{font-size:clamp(2.4rem,6vw,4rem); font-weight:600; color:#fff; text-shadow:0 2px 24px rgba(0,0,0,.28); margin-bottom:.2em}
.hero p{font-size:1.18rem; color:rgba(255,255,255,.92); max-width:600px; margin:0 auto 26px; text-shadow:0 1px 12px rgba(0,0,0,.3)}

/* ── Such-Karte (Gelbe-Seiten-Stil) ── */
.searchcard{display:flex; gap:8px; align-items:center; background:#fff; border-radius:999px; padding:8px; box-shadow:0 12px 40px rgba(60,30,40,.28); max-width:780px; margin:0 auto; flex-wrap:wrap}
.searchcard .field{flex:1; display:flex; align-items:center; gap:9px; padding:6px 16px; min-width:160px}
.searchcard .field + .field{border-left:1px solid var(--border)}
.searchcard .field label{font-size:.66rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--muted)}
.searchcard .field input{border:0; outline:0; font:inherit; font-size:1rem; width:100%; color:var(--ink); background:transparent}
.searchcard .field .lbl{display:flex; flex-direction:column; align-items:flex-start; width:100%}
.searchcard button{border:0; border-radius:999px; padding:0 30px; min-height:50px; font:inherit; font-weight:600; font-size:1rem; cursor:pointer; color:#fff;
  background:linear-gradient(135deg,var(--gold),var(--gold-d)); white-space:nowrap}
.searchcard button:hover{filter:brightness(1.05)}

/* ── Sektionen ── */
.section{padding:54px 0}
.section-head{text-align:center; max-width:640px; margin:0 auto 30px}
.section-head h2{font-size:2.4rem; color:var(--rose-d)}
.section-head p{color:var(--muted); margin:.2em 0 0}

/* ── Kategorie-Kacheln (mit Bild) ── */
.grid{display:grid; gap:20px; grid-template-columns:repeat(auto-fill,minmax(250px,1fr))}
.cat-card{display:block; background:var(--card); border:1px solid var(--border); border-radius:var(--radius); overflow:hidden;
  text-decoration:none; color:inherit; box-shadow:var(--shadow); transition:transform .16s, box-shadow .16s}
.cat-card:hover{transform:translateY(-4px); box-shadow:0 16px 36px rgba(120,70,80,.18)}
.cat-img{position:relative; aspect-ratio:16/10; background:var(--sand) center/cover no-repeat}
.cat-img::after{content:''; position:absolute; inset:0; background:linear-gradient(180deg,rgba(60,40,46,0) 40%,rgba(60,40,46,.5))}
.cat-card:hover .cat-img{filter:brightness(1.03)}
.cat-emoji{position:absolute; top:12px; left:14px; font-size:1.5rem; z-index:1; filter:drop-shadow(0 2px 4px rgba(0,0,0,.3))}
.cat-body{padding:16px 18px}
.cat-body h3{font-size:1.45rem; margin:0 0 3px; color:var(--ink)}
.cat-body p{margin:0; font-size:.88rem; color:var(--muted); display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden}
.cat-count{display:inline-block; margin-top:11px; font-size:.82rem; font-weight:600; color:var(--rose)}

/* ── Listing ── */
.crumbs{font-size:.88rem; color:var(--muted); margin:22px 0 8px}
.crumbs a{color:var(--rose); text-decoration:none}
.kat-banner{position:relative; height:200px; border-radius:var(--radius); overflow:hidden; margin:14px 0 8px;
  background:var(--sand) center/cover no-repeat; display:flex; align-items:flex-end}
.kat-banner::after{content:''; position:absolute; inset:0; background:linear-gradient(180deg,rgba(60,40,46,.1),rgba(60,40,46,.6))}
.kat-banner .kb-title{position:relative; color:#fff; padding:20px 24px; z-index:1}
.kat-banner h1{color:#fff; margin:0; font-size:2.4rem; text-shadow:0 2px 16px rgba(0,0,0,.4)}
.list{display:grid; gap:16px; grid-template-columns:repeat(auto-fill,minmax(310px,1fr)); margin:22px 0}
.item{position:relative; background:var(--card); border:1px solid var(--border); border-radius:14px; padding:18px 20px; padding-right:84px; box-shadow:var(--shadow); text-decoration:none; color:inherit; display:block; transition:box-shadow .14s, transform .14s}
.item:hover{box-shadow:0 12px 26px rgba(120,70,80,.16); transform:translateY(-2px)}
.item h3{margin:0 0 4px; font-size:1.35rem; color:var(--rose-d); display:flex; align-items:center; gap:8px}
.item-ico{flex:0 0 auto; width:44px; height:44px; border-radius:50%;
  background:radial-gradient(circle at 35% 30%, #fff, var(--blush));
  border:1.5px solid var(--rose-l); box-shadow:0 2px 9px rgba(120,70,80,.14);
  display:inline-flex; align-items:center; justify-content:center; font-size:1.6rem; line-height:1}
.item .meta{font-size:.9rem; color:var(--muted)}
.dist-badge{position:absolute; top:16px; right:16px; background:var(--rose); color:#fff; font-weight:600; font-size:.76rem; padding:4px 11px; border-radius:999px; white-space:nowrap}
.item .tags{margin-top:9px; display:flex; gap:6px; flex-wrap:wrap}
.tag{font-size:.72rem; padding:3px 10px; border-radius:999px; background:var(--blush); color:var(--rose-d)}

.filterbar{display:flex; gap:10px; margin:16px 0; flex-wrap:wrap}
.filterbar input{padding:10px 16px; border:1px solid var(--border); border-radius:999px; font:inherit; background:#fff}
.btn{border:0; border-radius:999px; padding:10px 22px; font:inherit; font-weight:600; cursor:pointer; color:#fff;
  background:linear-gradient(135deg,var(--rose),var(--rose-d)); text-decoration:none; display:inline-block}
.btn.gold{background:linear-gradient(135deg,var(--gold),var(--gold-d))}
.btn.ghost{background:#fff; color:var(--rose-d); border:1px solid var(--border)}
.pager{display:flex; gap:10px; justify-content:center; align-items:center; margin:26px 0}

/* ── Detail ── */
.detail{background:var(--card); border:1px solid var(--border); border-radius:var(--radius); padding:30px 32px; box-shadow:var(--shadow); margin:14px 0 30px; max-width:700px}
.detail h1{font-size:2.3rem; color:var(--rose-d)}
.detail .kv{margin:16px 0; display:grid; grid-template-columns:auto 1fr; gap:7px 18px; font-size:1rem}
.detail .kv dt{color:var(--muted)}
.detail .actions{margin-top:20px; display:flex; gap:10px; flex-wrap:wrap}

/* ── Footer ── */
.footer{margin-top:50px; border-top:1px solid var(--border); background:var(--sand)}
.footer-inner{padding:26px 22px; display:flex; gap:14px; justify-content:space-between; flex-wrap:wrap; font-size:.9rem}
.footer-inner a{color:var(--rose-d); text-decoration:none}
.footer-nav{display:flex; gap:18px}
.attrib{flex-basis:100%; font-size:.8rem; color:var(--muted)}
.empty{text-align:center; color:var(--muted); padding:50px 0}
.empty h1{font-size:3rem; color:var(--rose-l)}

/* ── Admin (funktional, schlicht) ── */
.card{background:var(--card); border:1px solid var(--border); border-radius:var(--radius); padding:24px 26px; box-shadow:var(--shadow); margin:16px 0}
.card h1,.card h3{color:var(--rose-d)}
.admintable{width:100%; border-collapse:collapse; background:var(--card); border-radius:14px; overflow:hidden; box-shadow:var(--shadow); font-size:.92rem}
.admintable th,.admintable td{padding:9px 12px; text-align:left; border-bottom:1px solid var(--border); vertical-align:top}
.admintable th{background:var(--blush); font-family:'Cormorant Garamond',serif; font-size:1.05rem}
.adminbar{display:flex; gap:10px; flex-wrap:wrap; align-items:center; margin:14px 0}
.adminbar select,.adminbar input{padding:8px 12px; border:1px solid var(--border); border-radius:8px; font:inherit}
.formgrid{display:grid; grid-template-columns:repeat(auto-fill,minmax(180px,1fr)); gap:10px; margin:10px 0}
.formgrid input,.formgrid select,.formgrid textarea{padding:9px 12px; border:1px solid var(--border); border-radius:8px; font:inherit; width:100%}
.section-head.left{text-align:left; margin-left:0}

@media(max-width:600px){
  .hero{min-height:auto; padding:60px 18px}
  .searchcard{border-radius:18px}
  .searchcard .field + .field{border-left:0; border-top:1px solid var(--border)}
  .searchcard button{width:100%}
  .detail .kv{grid-template-columns:1fr}
}