:root{
    --bg:#ffffff;
    --text:#231f20;
    --muted:#6b6b6b;
    /* Farben aus dem Logo angelehnt */
    --primary:#7b1f1f;        /* Weinrot */
    --primary-ink:#5e1616;    /* dunkleres Weinrot */
    --accent:#f6edee;         /* zarter Rot-Tint */
    --border:#e8e2e3;
    --soft:#faf7f8;
    --success:#1c7c54;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body { font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
    color:var(--text); background:var(--bg); line-height:1.6
}
img{max-width:100%; display:block}
.container{width:min(1100px, 92%); margin-inline:auto}

@font-face {
  font-family: "Inter";
  src: url("/fonts/Inter/Inter-VariableFont_slnt,wght.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

.site-header{
    position:sticky; top:0; z-index:50; background:#fff; border-bottom:1px solid var(--border)
}
.nav-wrap{display:flex; align-items:center; justify-content:space-between; padding:.8rem 0}
.brand{display:flex; align-items:center; gap:.7rem; text-decoration:none; color:var(--text)}
.brand-logo {
    height: 80px;         /* deutlich höher, Logo bleibt erkennbar */
    width: auto;          /* Breite automatisch */
    object-fit: contain;  /* Bild nicht verzerren */
    border-radius: 0;     /* keine Rundung für Logo */
    box-shadow: none;     /* kein Rahmen/Schatten */
}
.brand-text{display:flex; flex-direction:column; line-height:1}
.brand-text strong{letter-spacing:.3px; color:var(--primary); font-size:1.05rem}
.brand-text small{color:var(--muted); font-weight:600; font-size:.8rem}
.nav{display:flex; gap:1rem; align-items:center}
.nav a{color:var(--text); text-decoration:none; font-weight:600}
.nav a:hover{color:var(--primary)}
.nav-toggle{display:none; font-size:1.4rem; background:none; border:none}
.nav .btn--primary {
    color: #fff;                /* immer weißer Text */
    background: var(--primary); /* roter Hintergrund */
    border-color: var(--primary);
}

.nav .btn--primary:hover {
    background: var(--primary-ink); /* dunkleres Rot beim Hover */
    color: #fff;                    /* bleibt weiß */
}


.btn{
    display:inline-flex; align-items:center; justify-content:center;
    padding:.7rem 1rem;
    line-height:1;           /* wichtig: gleicht <button> vs <a> an */
    font-size:1rem;
    border:1px solid var(--primary);
    border-radius:.6rem;
    font-weight:700;
    cursor:pointer;
    min-height:44px;         /* gleiche Höhe */
}
.btn--whatsapp{
    background:#25D366;      /* WhatsApp-Grün */
    border-color:#25D366;
    color:#fff;
}
.btn--whatsapp:hover{
    background:#1DA851;      /* dunkleres Grün beim Hover */
    border-color:#1DA851;
}
.btn--primary{background:var(--primary); color:#fff; border-color:var(--primary)}
.btn--primary:hover{background:var(--primary-ink)}
.btn--ghost {
    background: var(--primary); /* gleicher roter Hintergrund wie Primary */
    color: #fff;                /* weißer Text */
    border-color: var(--primary);
}

.btn--ghost:hover {
    background: var(--primary-ink); /* dunkleres Rot beim Hover */
}

.hero{padding: clamp(2rem, 4vw, 4rem) 0; background:linear-gradient(180deg, var(--accent), #fff)}
.hero-inner{display:grid; grid-template-columns:1.2fr .8fr; gap:2rem; align-items:center}
.hero-copy h1 .accent{color:var(--primary)}
.hero-cta{display:flex; gap:.8rem; margin-top:1rem}
.badge{display:inline-block; margin-top:1rem; padding:.35rem .6rem; border-radius:.5rem; font-weight:700}
.badge--matchday{background:#ffeaa7; color:#7a5500}

.section{padding: clamp(2rem, 4vw, 4rem) 0}
.section--soft{background:var(--soft)}
.section--accent{background:var(--accent)}

.grid-2{display:grid; grid-template-columns: 1fr 1fr; gap:2rem}
.card{border:1px solid var(--border); border-radius:.8rem; padding:1rem; background:#fff}
.card--accent{background:#f4f8ff}

.checklist{padding-left:1.2rem}
.checklist li{margin:.4rem 0}
.bullets{padding-left:1.2rem}
.bullets li{margin:.3rem 0}

.menu-cards{display:grid; grid-template-columns: repeat(3,1fr); gap:1rem; margin-top:1rem}
.menu-card{border:1px solid var(--border); border-radius:.8rem; padding:1rem; background:#fff}
.menu-actions{margin-top:1rem}

.hours{border-collapse:collapse; width:100%; margin-top:.5rem}
.hours th,.hours td{padding:.5rem .6rem; border-bottom:1px solid var(--border); text-align:left}
.hours th{width:40%}

.map-embed iframe{width:100%; height:320px; border:0; border-radius:.8rem}

.form-row{display:flex; flex-direction:column; margin-bottom:.8rem}
.form-row.two{display:grid; grid-template-columns:1fr 1fr; gap:.8rem}
input, textarea{
    width:100%; padding:.7rem .8rem; border:1px solid var(--border); border-radius:.6rem; font:inherit
}
input:focus, textarea:focus{outline:2px solid var(--primary); border-color:var(--primary)}
.error{color:#b00020; font-size:.85rem}
.alert{padding:.8rem; border-radius:.6rem; margin-top:.8rem}
.alert--success{background:#ebf7f1; color:var(--success); border:1px solid #cbe9dc}

.site-footer{border-top:1px solid var(--border); background:#fff}
.footer-grid{display:grid; grid-template-columns: 1.2fr .8fr .8fr; gap:1rem; padding:2rem 0}
.footer-links{list-style:none; padding:0; margin:0}
.footer-links li{margin:.3rem 0}
.footer-bottom{border-top:1px solid var(--border); padding:1rem 0; color:var(--muted); font-size:.95rem}

.tiny{font-size:.9rem; color:var(--muted)}
.note{font-size:.95rem; color:var(--muted); margin-top:.4rem}

/* Responsive */
@media (max-width: 900px){
    .hero-inner, .grid-2{grid-template-columns:1fr}
    .menu-cards{grid-template-columns:1fr 1fr}
}
@media (max-width: 640px){
    .nav{display:none}
    .nav[aria-expanded="true"]{display:flex; flex-direction:column; gap:.6rem; position:absolute; top:56px; right:4%; background:#fff; padding:1rem; border:1px solid var(--border); border-radius:.6rem}
    .nav-toggle{display:block}
    .menu-cards{grid-template-columns:1fr}
    .form-row.two{grid-template-columns:1fr}
}
/* Sticky-Header Offset für Anker-Ziele */
:root { --header-offset: 84px; }           /* Desktop-Headerhöhe + etwas Luft */
@media (max-width: 768px){
  :root { --header-offset: 64px; }         /* ggf. kleiner auf Mobile */
}
html { scroll-behavior: smooth; }          /* sanftes Scrollen */
[id] { scroll-margin-top: var(--header-offset); }  /* für #about, #menu, #hours, #reserve, #contact etc. */

/* === Language flags === */
.lang-flags {
  display: inline-flex;
  gap: .5rem;
  align-items: center;
  margin-left: .75rem;
}

.lang-flag {
  width: 36px;           /* größer & klar sichtbar */
  height: 24px;
  padding: 0;
  border: 1px solid rgba(0,0,0,.18);
  border-radius: 4px;
  background: #fff no-repeat center/cover; /* Flagge als Hintergrund */
  cursor: pointer;
  transition: transform .08s ease, box-shadow .15s ease, border-color .15s ease, filter .15s ease;
  filter: grayscale(35%) contrast(.95) opacity(.95);
}

.lang-flag:hover { transform: translateY(-1px); filter: none; }
.lang-flag:focus-visible {
  outline: 2px solid transparent;
  box-shadow: 0 0 0 3px rgba(180, 50, 50, .35);
}
.lang-flag.is-active { border-color: rgba(180, 50, 50, .6); filter: none; }

/* >>> HIER stellst du die Dateinamen/Wege ein <<< */
.lang-flag[data-lang="de"] { background-image: url("assets/flags/de.svg"); }
.lang-flag[data-lang="en"] { background-image: url("assets/flags/gb.svg"); }
.lang-flag[data-lang="bs"] { background-image: url("assets/flags/ba.svg"); }