:root{
  --bg:#fefdfa;          /* sehr helles Vanilla */
  --card:#fff;
  --fg:#111;
  --muted:#6b7280;
  --primary:#0f766e;
  --primary-600:#0d9488;
  --border:#e5e7eb;
  --shadow:0 2px 6px rgba(0,0,0,.08);
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font:16px/1.55 system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  color:var(--fg);
  background:var(--bg);
}

/* Container – etwas breiter, damit die Navi einzeilig bleibt */
.container{
  max-width:1280px;
  margin:0 auto;
  padding:0 20px;
}

/* Sektionen/Kacheln kompakt */
.section{padding:18px 0}
.card{
  background:var(--card);
  border:1px solid var(--border);
  border-radius:14px;
  padding:14px;
  box-shadow:var(--shadow);
  margin-bottom:8px;
}
.stack>*+*{margin-top:8px}

/* ===== Header als „eigene Kachel“ – jetzt größer ===== */
.site-header{
  position:sticky;top:0;z-index:1000;
  background:#fff;border-bottom:1px solid var(--border);
  box-shadow:var(--shadow);
  border-radius:0 0 14px 14px;
  margin-bottom:20px;
}
.header-inner{
  display:flex;align-items:center;gap:22px;
  min-height:88px;            /* ↑ vorher 68px */
  padding:10px 0;             /* ↑ etwas mehr vertikales Padding */
}

/* Brand – klickbar, aber wie Text aussehen */
.brand{
  display:flex;align-items:center;gap:14px;
  text-decoration:none;color:var(--fg);
  flex-shrink:0;
}
.brand:hover{color:var(--fg);text-decoration:none}
.brand .logo{height:60px;width:auto}        /* ↑ vorher 48px */
.brand-text{display:flex;flex-direction:column;line-height:1.1;white-space:nowrap}
.brand-text strong{font-size:20px;font-weight:700}   /* ↑ */
.brand-text small{font-size:15px;color:var(--muted)} /* ↑ */

/* Navigation – EINZEILIG erzwingen */
.main-nav{
  display:flex;align-items:center;justify-content:flex-end;gap:18px;
  flex:1;flex-wrap:nowrap;white-space:nowrap;overflow-x:auto;
  -webkit-overflow-scrolling:touch;
}
.main-nav a{
  color:var(--fg);text-decoration:none;padding:10px 0; /* leicht höher */
  border-bottom:2px solid transparent;
}
.main-nav a:hover,.main-nav a.active{border-color:var(--primary)}

/* Hamburger-Button */
.nav-toggle{
  display:none;border:0;background:transparent;cursor:pointer;padding:10px;margin-left:auto;
  position:relative;z-index:1101; /* sicher klickbar */
}
.nav-toggle span{display:block;width:26px;height:2px;background:#222;margin:5px 0}

/* Sauberes Scrollen unter Sticky-Header */
.anchor-offset::before{content:"";display:block;height:28px;margin-top:-28px;visibility:hidden}

/* Öffnungszeiten-Grid (Blocksatz) */
.opening-times{
  display:grid;grid-template-columns:3.2em 1fr;column-gap:12px;row-gap:6px;
  font-variant-numeric:tabular-nums;
}
.opening-times .day{text-align:left}
.opening-times .hours{white-space:nowrap}

/* Buttons */
.btn{display:inline-block;margin-top:.5em;padding:10px 16px;border-radius:999px;background:var(--primary);color:#fff;border:1px solid transparent;cursor:pointer;font-weight:600}
.btn:hover{background:var(--primary-600)}

/* Footer */
.site-footer{border-top:1px solid var(--border);padding:14px 0;background:#fff;text-align:center}
.site-footer a{color:var(--primary);text-decoration:none}

/* ===== Mobile-Menü ab 900px aktiv ===== */
@media (max-width:900px){
  .nav-toggle{display:block}
  .main-nav{
    position:fixed;
    inset:88px 0 auto 0;   /* ↑ gleicht der höheren Header-Höhe */
    background:#fff;
    border-bottom:1px solid var(--border);
    padding:12px 16px;
    flex-direction:column;
    gap:10px;
    display:none;          /* per JS auf .open -> display:flex */
    overflow:auto;
    z-index:1100;
  }
  .main-nav.open{display:flex}
  .opening-times .hours{white-space:normal}
}