/* =========================================================
   vogelzucht-bathe.de – Design-System (Entwurf v2 – Prototyp)
   Farben: Waldgrün, Sandbeige, gedecktes Amber
   Responsive: Mobile-First
   ========================================================= */

:root{
  --gruen-900:#16301f;
  --gruen-700:#23523c;
  --gruen-500:#3a7855;
  --gruen-100:#e5f0e7;
  --sand-50:#faf7f0;
  --sand-100:#f3eee2;
  --sand-200:#e6dcc8;
  --amber-500:#c98a2c;
  --amber-600:#a86f1f;
  --text:#22302a;
  --muted:#5d6b63;
  --white:#ffffff;
  --radius:14px;
  --shadow:0 6px 24px rgba(22,48,31,.10);
  --font:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:var(--font);color:var(--text);background:var(--sand-50);line-height:1.6;-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{color:var(--gruen-700);text-decoration:none}
a:hover{text-decoration:underline}
h1,h2,h3{line-height:1.2;color:var(--gruen-900);font-weight:700}
h2{font-size:clamp(1.5rem,3vw,2.25rem);margin-bottom:.6rem}
.section{padding:clamp(2.5rem,6vw,5rem) clamp(1rem,4vw,2rem)}
.wrap{max-width:1180px;margin:0 auto}
.eyebrow{font-size:.8rem;letter-spacing:.12em;text-transform:uppercase;color:var(--amber-600);font-weight:700}

/* ---------- Buttons ---------- */
.btn{display:inline-flex;align-items:center;gap:.5rem;padding:.8rem 1.4rem;border-radius:999px;font-weight:600;font-size:1rem;min-height:44px;cursor:pointer;border:2px solid transparent;transition:.2s}
.btn-primary{background:var(--amber-500);color:#fff}
.btn-primary:hover{background:var(--amber-600);text-decoration:none}
.btn-ghost{background:transparent;color:var(--gruen-700);border-color:var(--gruen-700)}
.btn-ghost:hover{background:var(--gruen-100);text-decoration:none}
.btn-sm{padding:.5rem 1rem;font-size:.9rem}

/* ---------- Header ---------- */
.site-header{position:sticky;top:0;z-index:50;background:rgba(250,247,240,.92);backdrop-filter:blur(8px);border-bottom:1px solid var(--sand-200)}
.header-inner{display:flex;align-items:center;justify-content:space-between;gap:1rem;max-width:1180px;margin:0 auto;padding:.7rem 1rem}
.brand{display:flex;align-items:center;gap:.6rem;font-weight:800;font-size:1.15rem;color:var(--gruen-900)}
.brand .mark{width:38px;height:38px;border-radius:10px;background:linear-gradient(135deg,var(--gruen-500),var(--gruen-900));color:#fff;display:grid;place-items:center;flex-shrink:0}
.nav{display:none;align-items:center;gap:1.4rem}
.nav a{color:var(--gruen-900);font-weight:600;font-size:.95rem}
.nav a:hover{color:var(--amber-600);text-decoration:none}
.nav-toggle{display:inline-flex;background:none;border:1px solid var(--sand-200);border-radius:10px;padding:.5rem .65rem;cursor:pointer;color:var(--gruen-900);min-height:44px}
.nav-toggle svg{width:26px;height:26px}
@media(min-width:860px){.nav{display:flex}.nav-toggle{display:none}}
.mobile-panel{display:none;background:var(--white);border-top:1px solid var(--sand-200);padding:.5rem 1rem 1rem}
.mobile-panel.open{display:block}
.mobile-panel a{display:block;padding:.8rem 0;font-weight:600;color:var(--gruen-900);border-bottom:1px solid var(--sand-100)}
.mobile-panel a:last-child{border-bottom:none}
@media(min-width:860px){.mobile-panel.open{display:none!important}}

/* ---------- Hero ---------- */
.hero{position:relative;color:#fff;overflow:hidden}
.hero-bg{position:absolute;inset:0;background:linear-gradient(160deg,var(--gruen-900) 0%,var(--gruen-500) 70%,var(--amber-500) 130%)}
.hero-bg::after{content:"";position:absolute;inset:0;background:radial-gradient(circle at 75% 30%,rgba(255,255,255,.10),transparent 45%)}
.hero-content{position:relative;z-index:2;padding:clamp(3rem,9vw,6.5rem) clamp(1rem,4vw,2rem);max-width:1180px;margin:0 auto}
.hero h1{font-size:clamp(2rem,5.5vw,3.6rem);color:#fff;margin:.4rem 0 1rem;max-width:18ch}
.hero p{font-size:clamp(1rem,2vw,1.2rem);max-width:52ch;opacity:.95}
.hero .actions{display:flex;flex-wrap:wrap;gap:.8rem;margin-top:1.6rem}
.hero .btn-ghost{border-color:#fff;color:#fff}
.hero .btn-ghost:hover{background:rgba(255,255,255,.15)}
.badge-live{display:inline-flex;align-items:center;gap:.5rem;background:rgba(255,255,255,.15);border:1px solid rgba(255,255,255,.35);padding:.4rem .9rem;border-radius:999px;font-size:.8rem}

/* ---------- Feature-Module ---------- */
.features{display:grid;grid-template-columns:1fr;gap:1rem;margin-top:2.5rem}
@media(min-width:720px){.features{grid-template-columns:repeat(3,1fr)}}
.feat{background:var(--white);border:1px solid var(--sand-200);border-radius:var(--radius);padding:1.5rem;box-shadow:var(--shadow)}
.feat .ic{width:52px;height:52px;border-radius:14px;background:var(--gruen-100);color:var(--gruen-700);display:grid;place-items:center;font-size:1.5rem;margin-bottom:1rem}
.feat h3{font-size:1.1rem;margin-bottom:.4rem}

/* ---------- Kacheln / Karten ---------- */
.grid{display:grid;grid-template-columns:1fr;gap:1.25rem;margin-top:1.5rem}
@media(min-width:520px){.grid{grid-template-columns:repeat(2,1fr)}}
@media(min-width:880px){.grid.cols-3{grid-template-columns:repeat(3,1fr)}}
@media(min-width:980px){.grid.cols-4{grid-template-columns:repeat(4,1fr)}}

.card{background:var(--white);border:1px solid var(--sand-200);border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow);display:flex;flex-direction:column;transition:transform .2s}
.card:hover{transform:translateY(-4px)}
.card-img{position:relative;aspect-ratio:4/3;background:var(--gruen-100);display:grid;place-items:center;color:var(--muted);font-size:.85rem}
.card-img img{width:100%;height:100%;object-fit:cover}
.card-body{padding:1.1rem 1.2rem;display:flex;flex-direction:column;gap:.5rem;flex:1}
.card-body h3{font-size:1.05rem}
.meta{color:var(--muted);font-size:.85rem;font-style:italic}
.card-body p{font-size:.92rem;color:var(--muted)}
.price{font-weight:800;color:var(--gruen-700);font-size:1.15rem}
.price.muted{color:var(--muted);font-weight:600}
.badge{position:absolute;top:.6rem;left:.6rem;background:var(--amber-500);color:#fff;font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.05em;padding:.25rem .6rem;border-radius:999px}
.card.reserved{opacity:.65;filter:saturate(.6)}
.card.reserved .badge{background:var(--gruen-700)}
.card .btn{margin-top:auto;align-self:flex-start}

/* ---------- Galerie ---------- */
.gallery{display:grid;grid-template-columns:repeat(2,1fr);gap:.6rem;margin-top:1.5rem}
@media(min-width:640px){.gallery{grid-template-columns:repeat(3,1fr);gap:.9rem}}
@media(min-width:980px){.gallery{grid-template-columns:repeat(4,1fr)}}
.gallery .gitem{position:relative;aspect-ratio:1;border-radius:12px;overflow:hidden;background:var(--gruen-100);display:grid;place-items:center;color:var(--muted);font-size:.8rem}

/* ---------- Formulare ---------- */
.form-card{background:var(--white);border:1px solid var(--sand-200);border-radius:var(--radius);padding:clamp(1.2rem,4vw,2rem);box-shadow:var(--shadow);max-width:680px}
.form-card .row{display:grid;grid-template-columns:1fr;gap:1rem}
@media(min-width:560px){.form-card .row.two{grid-template-columns:1fr 1fr}}
.field{margin-bottom:1rem}
.field label{display:block;font-weight:600;font-size:.9rem;margin-bottom:.35rem}
.field small{color:var(--muted)}
input[type=text],input[type=email],input[type=number],textarea{width:100%;padding:.75rem .9rem;border:1px solid var(--sand-200);border-radius:10px;font:inherit;background:var(--sand-50);min-height:44px}
textarea{min-height:120px;resize:vertical}
input:focus,textarea:focus{outline:2px solid var(--amber-500);outline-offset:1px;background:#fff}
.check{display:flex;gap:.6rem;align-items:flex-start;font-size:.85rem;margin-bottom:1.2rem}
.check input{width:20px;height:20px;margin-top:.1rem;accent-color:var(--gruen-700)}
.hint-info{background:var(--gruen-100);border-left:4px solid var(--gruen-700);padding:.8rem 1rem;border-radius:8px;font-size:.9rem;margin-bottom:1.2rem}

/* ---------- Gästebuch ---------- */
.gb-list{display:flex;flex-direction:column;gap:1rem;margin:1.5rem 0}
.gb-entry{background:var(--white);border:1px solid var(--sand-200);border-radius:var(--radius);padding:1.2rem 1.4rem;box-shadow:var(--shadow)}
.gb-head{display:flex;justify-content:space-between;align-items:baseline;gap:.5rem;flex-wrap:wrap}
.gb-head .name{font-weight:700;color:var(--gruen-900)}
.gb-head .date{font-size:.8rem;color:var(--muted)}
.gb-entry p{margin-top:.5rem;font-size:.95rem}

/* ---------- Footer ---------- */
.site-footer{background:var(--gruen-900);color:#cfe0d4;padding:3rem clamp(1rem,4vw,2rem) 1.5rem}
.footer-grid{display:grid;grid-template-columns:1fr;gap:2rem;max-width:1180px;margin:0 auto}
@media(min-width:720px){.footer-grid{grid-template-columns:2fr 1fr 1fr}}
.site-footer h4{color:#fff;margin-bottom:.7rem}
.site-footer a{color:#cfe0d4}
.site-footer .legal{max-width:1180px;margin:2rem auto 0;border-top:1px solid rgba(255,255,255,.15);padding-top:1rem;font-size:.8rem;text-align:center}

/* ---------- Seitenkopf ---------- */
.page-head{background:linear-gradient(150deg,var(--gruen-900),var(--gruen-500));color:#fff;padding:clamp(2rem,6vw,4rem) 1rem}
.page-head .wrap{max-width:1180px;margin:0 auto}
.page-head h1{color:#fff;font-size:clamp(1.7rem,4vw,2.6rem)}
.page-head p{opacity:.92;max-width:60ch;margin-top:.5rem}

/* ---------- Filter ---------- */
.filters{display:flex;flex-wrap:wrap;gap:.5rem;margin:1.2rem 0}
.chip{border:1px solid var(--sand-200);background:var(--white);border-radius:999px;padding:.5rem 1rem;font-size:.85rem;font-weight:600;cursor:pointer;min-height:40px;color:var(--gruen-900);border:1px solid var(--sand-200)}
.chip.active{background:var(--gruen-700);color:#fff;border-color:var(--gruen-700)}

/* ---------- Admin ---------- */
.admin-body{background:var(--sand-100)}
.admin-shell{display:flex;flex-direction:column;min-height:100vh}
@media(min-width:860px){.admin-shell{flex-direction:row}}
.admin-aside{background:var(--gruen-900);color:#cfe0d4;padding:1.2rem}
@media(min-width:860px){.admin-aside{width:260px;min-height:100vh;padding:1.6rem 1.2rem;flex-shrink:0}}
.admin-aside .logo{color:#fff;font-weight:800;font-size:1.1rem;display:flex;align-items:center;gap:.6rem;margin-bottom:1.6rem}
.admin-aside .logo .mark{width:34px;height:34px;border-radius:9px;background:var(--amber-500);display:grid;place-items:center;color:#fff;flex-shrink:0}
.admin-nav{display:flex;flex-wrap:wrap;gap:.3rem}
@media(min-width:860px){.admin-nav{flex-direction:column}}
.admin-nav a{color:#cfe0d4;padding:.65rem .9rem;border-radius:9px;font-weight:600;font-size:.95rem}
.admin-nav a:hover{background:rgba(255,255,255,.1);text-decoration:none}
.admin-nav a.active{background:var(--amber-500);color:#fff}
.admin-main{flex:1;padding:1.2rem}
@media(min-width:860px){.admin-main{padding:2rem}}
.admin-main h1{font-size:1.6rem;margin-bottom:1.2rem}
.stat-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:1rem;margin-bottom:2rem}
.stat{background:var(--white);border:1px solid var(--sand-200);border-radius:var(--radius);padding:1.1rem 1.2rem;box-shadow:var(--shadow)}
.stat .num{font-size:1.9rem;font-weight:800;color:var(--gruen-700)}
.stat .lbl{color:var(--muted);font-size:.85rem}
.panel{background:var(--white);border:1px solid var(--sand-200);border-radius:var(--radius);box-shadow:var(--shadow);overflow:hidden;margin-bottom:1.5rem}
.panel-head{display:flex;justify-content:space-between;align-items:center;gap:.8rem;flex-wrap:wrap;padding:1rem 1.2rem;border-bottom:1px solid var(--sand-100)}
.panel-head h2{font-size:1.1rem;margin:0}
.panel-body{padding:1.2rem}
.table-wrap{overflow-x:auto}
table{width:100%;border-collapse:collapse;min-width:560px}
th,td{padding:.75rem .9rem;text-align:left;border-bottom:1px solid var(--sand-100);vertical-align:middle}
th{font-size:.78rem;text-transform:uppercase;letter-spacing:.06em;color:var(--muted)}
td{font-size:.9rem}
.status-pill{display:inline-block;padding:.2rem .6rem;border-radius:999px;font-size:.72rem;font-weight:700}
.st-active{background:var(--gruen-100);color:var(--gruen-700)}
.st-reserved{background:#fdeed8;color:var(--amber-600)}
.st-pending{background:#fdf0f0;color:#b23b3b}
.st-published{background:var(--gruen-100);color:var(--gruen-700)}
.admin-actions{display:flex;gap:.5rem;flex-wrap:wrap}
.mini-btn{display:inline-block;padding:.45rem .8rem;border-radius:9px;font-size:.82rem;font-weight:600;background:var(--sand-100);color:var(--gruen-900)}
.mini-btn:hover{text-decoration:none;background:var(--sand-200)}
.mini-btn.primary{background:var(--amber-500);color:#fff}
.mini-btn.danger{background:#f6dddd;color:#b23b3b}
.upload-zone{border:2px dashed var(--sand-200);border-radius:var(--radius);padding:2rem;text-align:center;color:var(--muted);background:var(--sand-50);margin-bottom:1rem}
.upload-zone strong{color:var(--gruen-700)}
.thumb-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:.8rem}
@media(min-width:560px){.thumb-grid{grid-template-columns:repeat(3,1fr)}}
@media(min-width:880px){.thumb-grid{grid-template-columns:repeat(4,1fr)}}
.thumb{position:relative;aspect-ratio:1;border-radius:10px;overflow:hidden;background:var(--gruen-100);display:grid;place-items:center;color:var(--muted);font-size:.75rem;border:1px solid var(--sand-200)}
.thumb img{width:100%;height:100%;object-fit:cover}
.thumb .overlay{position:absolute;inset:0;background:rgba(22,48,31,.55);color:#fff;display:flex;align-items:center;justify-content:center;gap:.4rem;opacity:0;transition:.2s}
.thumb:hover .overlay{opacity:1}
.overlay button{background:rgba(255,255,255,.9);border:none;border-radius:8px;padding:.4rem .7rem;font-size:.75rem;cursor:pointer}
.ph{color:var(--muted);font-size:.85rem;text-align:center;padding:1rem}

/* ---------- Accessibility-Helfer ---------- */
.skip-link{position:absolute;left:-9999px;top:0;z-index:100;background:var(--gruen-900);color:#fff;padding:.8rem 1.2rem;border-radius:0 0 10px 0}
.skip-link:focus{left:0;color:#fff}
.visually-hidden{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}


/* ---------- Admin: funktionaler Bild-Upload ---------- */
.thumb .thumb-cat{position:absolute;left:0;right:0;bottom:0;width:100%;font-size:.72rem;padding:.28rem .4rem;border:none;background:rgba(22,48,31,.8);color:#fff;cursor:pointer;z-index:3}
.thumb .thumb-cat:focus{outline:2px solid var(--amber-500)}
.thumb .thumb-dl{position:absolute;top:.35rem;right:.35rem;display:flex;gap:.3rem;z-index:4}
.thumb .thumb-dl button{background:rgba(255,255,255,.92);border:none;border-radius:8px;padding:.3rem .5rem;font-size:.72rem;cursor:pointer;min-height:32px;min-width:32px}
.thumb .thumb-dl button.exit{background:#f6dddd;color:#b23b3b}
.thumb .thumb-dl button:hover{filter:brightness(.96)}
.thumb-cat option{color:#22302a}
.statusbar{position:fixed;bottom:1rem;right:1rem;background:var(--gruen-900);color:#fff;padding:.7rem 1.1rem;border-radius:10px;font-size:.85rem;z-index:60;box-shadow:var(--shadow)}


/* ---------- Admin: zusätzliche Status-Pille ---------- */
.st-inactive{background:#e9e9e4;color:#6b6b66}
.alert{border-radius:10px;padding:.9rem 1.1rem;margin-bottom:1rem;font-size:.95rem}
.alert.ok{background:var(--gruen-100);border-left:4px solid var(--gruen-700);color:var(--gruen-900)}
.alert.err{background:#fdf0f0;border-left:4px solid #b23b3b;color:#b23b3b}
.statusbar{position:fixed;bottom:1rem;right:1rem;background:var(--gruen-900);color:#fff;padding:.7rem 1.1rem;border-radius:10px;font-size:.85rem;z-index:60;box-shadow:var(--shadow)}