@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;600;700;800&family=Playfair+Display:wght@700&display=swap');

* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; font-family:'Open Sans',sans-serif; background:#f7f7f7; color:#222; }
img { max-width:100%; }

/* ---- Header ---- */
.site-header { background:#fff; box-shadow:0 2px 10px rgba(0,0,0,.06); position:sticky; top:0; z-index:1000; }
.site-header .inner { max-width:1040px; margin:0 auto; padding:14px 20px;
  display:flex; align-items:center; gap:30px; }
.site-header .brand img { height:56px; display:block; }
.site-nav { display:flex; flex-wrap:wrap; gap:8px 10px; justify-content:flex-end; }
.site-nav a { text-decoration:none; color:#555; font-weight:600; font-size:.9rem;
  padding:7px 14px; border-radius:999px; white-space:nowrap;
  transition:background .15s, color .15s; }
.site-nav a:hover { background:#faf3f2; color:#d85a4f; }
.site-nav a.active { background:#fff3f2; color:#d85a4f; font-weight:700; }
@media(max-width:700px){
  .site-header .brand img { height:44px; }
  .site-header .inner { position:relative; padding:12px 16px; gap:16px; }
  .site-nav { flex-wrap:nowrap; justify-content:flex-start; overflow-x:auto;
    -webkit-overflow-scrolling:touch; scrollbar-width:none; padding-right:40px; }
  .site-nav::-webkit-scrollbar { display:none; }
  .site-header .inner::after { content:""; position:absolute; top:0; right:0; bottom:0;
    width:44px; pointer-events:none;
    background:linear-gradient(90deg, rgba(255,255,255,0), #fff 80%); }
}

/* ---- Main ---- */
main { max-width:900px; margin:0 auto; padding:26px 16px 40px; }
main.wide { max-width:1040px; }
.sr-title { position:absolute; width:1px; height:1px; margin:-1px; padding:0;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }

/* ---- Footer ---- */
.site-footer { background:#fff; margin-top:20px; box-shadow:0 -2px 10px rgba(0,0,0,.05); }
.site-footer .inner { max-width:1040px; margin:0 auto; padding:40px 24px 32px;
  display:flex; flex-wrap:wrap; gap:28px 56px; align-items:flex-start; justify-content:space-between; }
.site-footer .addr { font-weight:600; color:#555; font-size:.92rem; line-height:1.85; }
.site-footer .addr strong { color:#222; }
.site-footer a { color:#d85a4f; font-weight:700; text-decoration:none; }
.site-footer .f-icons { display:flex; gap:18px; align-self:center; }
.site-footer .f-ic { display:inline-flex; align-items:center; justify-content:center;
  width:52px; height:52px; border-radius:50%; color:#fff; background:#d85a4f;
  box-shadow:0 5px 14px rgba(216,90,79,.35);
  transition:background .15s, transform .15s, box-shadow .15s; }
.site-footer .f-ic svg { width:23px; height:23px; }
.site-footer .f-ic:hover { background:#c24b41; transform:translateY(-2px);
  box-shadow:0 8px 18px rgba(216,90,79,.4); }
@media(max-width:700px){
  .site-footer .f-icons { width:100%; justify-content:center; order:3; }
}
@media (prefers-reduced-motion: reduce){
  .site-footer .f-ic, .site-footer .f-ic:hover { transition:none; transform:none; }
}
.site-footer .fine { width:100%; text-align:center; font-size:.8rem; color:#999;
  font-weight:600; border-top:1px dashed #e6e6e6; padding-top:22px; margin-top:6px; }

/* ---- Homepage ---- */
.hero { position:relative; border-radius:18px; overflow:hidden; box-shadow:0 8px 24px rgba(0,0,0,.15); }
.hero img { display:block; width:100%; height:420px; object-fit:cover; }
.hero .veil { position:absolute; inset:0; background:linear-gradient(to top, rgba(20,14,12,.62), rgba(20,14,12,.05) 60%); }
.hero .txt { position:absolute; left:0; right:0; bottom:0; padding:34px 36px; color:#fff;
  text-shadow:0 1px 12px rgba(0,0,0,.35); }
.hero .txt .over { margin:0 0 6px; font-size:.78rem; font-weight:700; letter-spacing:.28em;
  text-transform:uppercase; opacity:.85; }
.hero .txt h1 { margin:0; font-family:'Playfair Display',serif; font-size:2.7rem;
  letter-spacing:.5px; line-height:1.12; font-weight:700; }
.hero .txt .rule { width:64px; height:1px; background:rgba(255,255,255,.75); margin:14px 0 12px; }
.hero .txt .sub { margin:0; font-weight:600; font-size:.95rem; letter-spacing:.08em; opacity:.92; }
@media(max-width:700px){
  .hero img { height:320px; }
  .hero .txt { padding:24px 22px; }
  .hero .txt h1 { font-size:1.85rem; }
  .hero .txt .over { font-size:.68rem; letter-spacing:.22em; }
}

.card { background:#fff; border-radius:16px; padding:28px 26px; box-shadow:0 6px 18px rgba(0,0,0,.08); }
.home-status { margin:18px 0; text-align:center; }
.home-status .big { font-family:'Playfair Display',serif; font-size:1.7rem; }
.home-status .big.open { color:#2e7d32; } .home-status .big.closed { color:#c62828; }
.home-status .sub { margin-top:6px; font-weight:700; color:#555; }
.home-status .ferien-badge { display:inline-block; margin-top:4px; padding:8px 20px;
  border-radius:999px; background:#fdf6ec; border:1px solid rgba(242,197,0,.5);
  color:#a86a00; font-weight:800; font-size:1.08rem;
  animation:ferien-breathe 3s ease-in-out infinite; }
@keyframes ferien-breathe {
  0%, 100% { transform:scale(1); box-shadow:0 0 0 rgba(242,197,0,0); }
  50%      { transform:scale(1.05); box-shadow:0 6px 20px rgba(242,197,0,.4); }
}
@media (prefers-reduced-motion: reduce) {
  .home-status .ferien-badge { animation:none; }
}
.home-status a { color:#d85a4f; }

.teasers { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(250px,100%),1fr)); gap:16px; margin-top:18px; }
.teaser { display:block; text-decoration:none; color:#222; background:#fff; border-radius:16px;
  padding:24px 22px; box-shadow:0 6px 18px rgba(0,0,0,.08);
  transition:transform .2s ease, box-shadow .2s ease; }
.teaser:hover { transform:translateY(-4px); box-shadow:0 12px 26px rgba(0,0,0,.13); }
.teaser .ic { font-size:1.8rem; }
.teaser h3 { margin:8px 0 6px; font-family:'Playfair Display',serif; color:#d85a4f; font-size:1.2rem; letter-spacing:1px; }
.teaser p { margin:0; color:#555; font-weight:600; font-size:.92rem; line-height:1.5; }

.btn { display:inline-block; text-decoration:none; background:#d85a4f; color:#fff; font-weight:800;
  padding:12px 24px; border-radius:999px; }
.btn:hover { background:#c24b41; }
.btn.ghost { background:#fff; color:#d85a4f; border:2px solid #d85a4f; }
.btn.ghost:hover { background:#fff3f2; }

@media (prefers-reduced-motion: reduce){ .teaser, .teaser:hover { transition:none; transform:none; } }