/* ============================================================
   OCHSEN – Stylesheet der oeffentlichen Seiten
   Setzt assets/css/tokens.css voraus.

   Ziel: gleiches Erscheinungsbild wie ochsen-dietikon.ch.
   Die Masse (Schriftgroessen, Gewichte, Farben, Containerbreite)
   sind am Original abgenommen – siehe Kommentar in tokens.css.

   Keine style-Attribute im HTML: die .htaccess setzt eine strenge
   Content-Security-Policy ohne 'unsafe-inline'.
   ============================================================ */

*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  font-family: var(--ochsen-font-body);
  font-size: 1rem;                 /* 16px wie im Original */
  line-height: 1.7;
  color: var(--ochsen-text);
  background: var(--ochsen-bg);
  -webkit-text-size-adjust: 100%;
}

/* Titel: PT Serif, im Original mit leichten Gewichten */
h1, h2, h3, h4 {
  font-family: var(--ochsen-font-head);
  color: var(--ochsen-heading);
  line-height: 1.2;
  margin: 0 0 .6em;
  font-weight: 400;
}
h1 { font-size: clamp(2.4rem, 6vw, 4.625rem); font-weight: 300; }  /* 74px */
h2 { font-size: clamp(1.6rem, 3.4vw, 2.25rem); }
h3 { font-size: 1.75rem; }                                          /* 28px */
h4 { font-size: 1.25rem; }

/* Fliesstext ist im Original 20px und leicht */
p {
  margin: 0 0 1.1em;
  font-size: 1.25rem;
  font-weight: 300;
}
.klein { font-size: 1rem; }

img { max-width: 100%; height: auto; }

a { color: var(--ochsen-gold); text-decoration: none; transition: color var(--ochsen-transition); }
a:hover { color: var(--ochsen-gold-hover); text-decoration: underline; }

a:focus-visible, button:focus-visible, input:focus-visible,
textarea:focus-visible, select:focus-visible {
  outline: 3px solid var(--ochsen-gold);
  outline-offset: 2px;
}

.container { max-width: var(--ochsen-container); margin: 0 auto; padding: 0 20px; }
.container--narrow { max-width: 760px; }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--ochsen-dark); color: #fff; padding: 12px 20px;
}
.skip-link:focus { left: 0; }

/* ============================================================ KOPF
   Wie im Original: nur Logo links und Navigation rechts auf Weiss.
   Keine Leiste mit Adresse darueber. */
.kopf {
  background: var(--ochsen-bg);
  position: sticky; top: 0; z-index: 40;
  box-shadow: 0 1px 6px rgba(0, 0, 0, .07);
}
.kopf .container {
  display: flex; align-items: center; justify-content: space-between;
  gap: 20px; padding-top: 14px; padding-bottom: 14px;
}
.logo { display: inline-flex; align-items: center; }
.logo img { height: 46px; width: auto; }

.nav-liste { display: flex; align-items: center; gap: 2px; list-style: none; margin: 0; padding: 0; }
.nav-liste a {
  display: block; padding: 10px 13px;
  font-family: var(--ochsen-font-body);
  font-size: .875rem; font-weight: 400;
  text-transform: uppercase; letter-spacing: .03em;
  color: var(--ochsen-text);
}
.nav-liste a:hover { color: var(--ochsen-gold); text-decoration: none; }
.nav-liste a[aria-current="page"] { color: var(--ochsen-gold); }

.nav-schalter {
  display: none; background: none; border: 1px solid var(--ochsen-border);
  border-radius: var(--ochsen-radius); padding: 8px 10px; cursor: pointer;
  color: var(--ochsen-text);
}

/* ============================================================ BUTTONS
   Original: «MENU» weiss mit orangem Text, «Tisch reservieren» orange
   mit weissem Text. Beide rechteckig, Grossbuchstaben, Open Sans. */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-family: var(--ochsen-font-body);
  font-size: .875rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: .04em;
  padding: 14px 30px; border: 1px solid transparent;
  border-radius: var(--ochsen-radius); cursor: pointer;
  transition: background var(--ochsen-transition), color var(--ochsen-transition),
              border-color var(--ochsen-transition);
  text-decoration: none;
}
.btn:hover { text-decoration: none; }
.btn--gold  { background: var(--ochsen-gold); color: #fff; }
.btn--gold:hover { background: var(--ochsen-gold-hover); color: #fff; }
.btn--weiss { background: #fff; color: var(--ochsen-gold); }
.btn--weiss:hover { background: #F2F2F2; color: var(--ochsen-gold-hover); }
.btn--rand  { border-color: #fff; color: #fff; background: transparent; }
.btn--rand:hover { background: #fff; color: var(--ochsen-dark); }
.btn--rand-dunkel { border-color: var(--ochsen-gold); color: var(--ochsen-gold-text); background: transparent; }
.btn--rand-dunkel:hover { background: var(--ochsen-gold); color: #fff; }

/* ============================================================ HERO
   Vollflaechiges Bild mit dunklem Overlay, mittig: kleiner Claim
   ueber grossem Namen, darunter zwei Knoepfe. */
.hero {
  position: relative;
  min-height: min(78vh, 660px);
  display: flex; align-items: center;
  background-color: var(--ochsen-dark);
  background-image: linear-gradient(rgba(0, 0, 0, .42), rgba(0, 0, 0, .42)),
                    url('../bilder/hero-ochsen.jpg');
  background-size: cover;
  background-position: center;
  text-align: center;
  padding: 80px 0;
}
.hero-inhalt { width: 100%; }
/* Claim: kleine Sans-Zeile ueber dem Namen */
.hero-claim {
  font-family: var(--ochsen-font-body);
  font-size: 1.25rem; font-weight: 400;
  color: #fff; margin: 0 0 .2em;
}
.hero h1 {
  color: #fff; margin-bottom: .5em;
  text-shadow: 0 2px 20px rgba(0, 0, 0, .35);
}
.hero-knoepfe { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; }

/* Kleinerer Kopfbereich für die Unterseiten */
.seitenkopf {
  background: var(--ochsen-bg-soft);
  border-bottom: 1px solid var(--ochsen-border);
  padding: 48px 0 40px;
  text-align: center;
}
.seitenkopf h1 { font-size: clamp(2rem, 4.5vw, 3rem); margin-bottom: .2em; color: var(--ochsen-heading); }
.seitenkopf p { color: var(--ochsen-muted); margin: 0; }

/* ============================================================ ABSCHNITTE */
.abschnitt { padding: 60px 0; }
.abschnitt--soft { background: var(--ochsen-bg-soft); }
.abschnitt-kopf { text-align: center; max-width: 760px; margin: 0 auto 40px; }
.abschnitt-kopf p { color: var(--ochsen-muted); }

/* ============================================================ RASTER
   Bootstrap-artig wie das Original: drei Spalten auf Desktop. */
.raster { display: grid; gap: 30px; }
.raster--2 { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.raster--3 { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.raster--4 { grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); }

.karte {
  background: var(--ochsen-bg);
  border: 1px solid var(--ochsen-border);
  border-radius: var(--ochsen-radius-lg);
  overflow: hidden;
  transition: box-shadow var(--ochsen-transition), transform var(--ochsen-transition);
}
.karte-inhalt { padding: 20px; }
.karte h3 { margin-bottom: .25em; font-size: 1.375rem; }
.karte-notiz { color: var(--ochsen-muted); font-size: 1rem; font-weight: 400; margin: 0; }

/* ── Karten (Speisekarten) ── */
.kartenliste a.karte { display: block; color: inherit; }
.kartenliste a.karte:hover { transform: translateY(-3px); box-shadow: var(--ochsen-shadow); text-decoration: none; }
.karte-vorschau {
  display: block; width: 100%; aspect-ratio: 1 / 1.4; object-fit: cover; object-position: top;
  background: var(--ochsen-bg-soft); border-bottom: 1px solid var(--ochsen-border);
}
.karte-mehr { color: var(--ochsen-gold-text); font-weight: 600; font-size: .95rem; margin: 0; }

/* ── Oeffnungszeiten ── */
.zeiten { width: 100%; border-collapse: collapse; font-size: 1.125rem; font-weight: 300; }
.zeiten caption { text-align: left; }
.zeiten th { text-align: left; font-family: var(--ochsen-font-head); font-weight: 400; padding: 0 0 10px; }
.zeiten td { padding: 7px 0; vertical-align: top; }
.zeiten tbody tr + tr td { border-top: 1px solid var(--ochsen-border); }
.zeiten td:first-child { width: 38%; }
.zeiten .ruhetag { color: var(--ochsen-muted); font-style: italic; }
.zeiten-hinweis { font-size: 1.125rem; font-weight: 300; margin-top: 1em; }
.zeiten-hinweis strong { font-weight: 600; }

.infobox h3 { margin-top: 0; }

/* Auszeichnungen (Swiss Guest Award) */
.awards { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; margin-top: 8px; }
.awards img { height: 58px; width: auto; }

/* ── Agenda ── */
.agenda-eintrag {
  display: grid; grid-template-columns: 200px 1fr; gap: 30px;
  align-items: start;
  padding: 32px 0; border-top: 1px solid var(--ochsen-border);
}
.agenda-eintrag:first-child { border-top: 0; padding-top: 8px; }
.agenda-flyer img {
  display: block; width: 100%; border: 1px solid var(--ochsen-border);
}
.agenda-zeit {
  display: block;
  font-family: var(--ochsen-font-body); font-weight: 600; font-size: 1rem;
  color: var(--ochsen-gold-text); margin-bottom: 6px;
}
.agenda-eintrag h2 { font-size: 1.75rem; margin-bottom: .3em; }
.agenda-eintrag p:last-child { margin-bottom: 0; }
.agenda-flyer-link { font-size: 1rem; }

/* ── Team ── */
.team-person { text-align: center; }
.team-person img {
  display: block; width: 100%; aspect-ratio: 1; object-fit: cover;
  border-radius: 50%; border: 4px solid var(--ochsen-bg-soft);
  background: var(--ochsen-bg-soft);
}
.team-person h3 { margin: 16px 0 .1em; font-size: 1.375rem; }
.team-person p { color: var(--ochsen-muted); font-size: 1rem; font-weight: 400; margin: 0; }

/* ============================================================ FORMULARE */
.feld { margin-bottom: 18px; }
.feld label { display: block; font-weight: 600; color: var(--ochsen-heading); margin-bottom: 6px; }
.feld .pflicht { color: var(--ochsen-error); }
.feld input, .feld textarea, .feld select {
  width: 100%; font-family: var(--ochsen-font-body); font-size: 1rem;
  color: var(--ochsen-text);
  padding: 11px 13px;
  border: 1px solid var(--ochsen-border); border-radius: var(--ochsen-radius);
  background: var(--ochsen-bg);
}
.feld input:focus, .feld textarea:focus { border-color: var(--ochsen-gold); }
.feld textarea { min-height: 120px; resize: vertical; }
.feld-hinweis { font-size: .9rem; color: var(--ochsen-muted); margin: 5px 0 0; font-weight: 400; }
.feld-reihe { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 0 18px; }

.meldung {
  padding: 15px 18px; border-radius: var(--ochsen-radius);
  border: 1px solid; margin-bottom: 24px;
}
.meldung p { font-size: 1rem; }
.meldung--ok    { background: #EAF6EF; border-color: #B8DEC8; color: #14603A; }
.meldung--fehler{ background: #FDECEE; border-color: #F3C2C8; color: #8C0018; }

.datenschutz-satz { font-size: .9rem; color: var(--ochsen-muted); font-weight: 400; }

/* ============================================================ FUSS
   Original: dunkler Balken #242424 mit drei Spalten
   (Informationen · Kontakt · Öffnungszeiten). */
.fuss {
  background: var(--ochsen-dark);
  color: rgba(255, 255, 255, .75);
  padding: 46px 0 0;
  font-size: 1rem;
}
.fuss h3 {
  color: #fff; font-family: var(--ochsen-font-head);
  font-size: 1.375rem; font-weight: 400; margin-bottom: .7em;
}
.fuss p { font-size: 1rem; font-weight: 400; }
.fuss a { color: var(--ochsen-gold); }
.fuss a:hover { color: #fff; }
.fuss-raster { display: grid; gap: 34px; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.fuss-liste { list-style: none; margin: 0; padding: 0; }
.fuss-liste li { margin-bottom: 8px; }
.fuss-liste-icons li { display: flex; align-items: flex-start; gap: 10px; }
.fuss-liste-icons svg { flex: none; margin-top: 4px; opacity: .6; }
.fuss .zeiten { font-size: 1rem; }
.fuss .zeiten td { border-color: rgba(255, 255, 255, .12); }
.fuss-unten {
  margin-top: 40px; padding: 18px 0;
  border-top: 1px solid rgba(255, 255, 255, .12);
  font-size: .875rem; color: rgba(255, 255, 255, .55);
}
.fuss-unten .container { display: flex; flex-wrap: wrap; gap: 8px 20px; justify-content: space-between; }

/* ============================================================ MOBIL */
@media (max-width: 900px) {
  .nav-schalter { display: inline-flex; }
  .nav {
    display: none;
    position: absolute; left: 0; right: 0; top: 100%;
    background: var(--ochsen-bg);
    border-bottom: 1px solid var(--ochsen-border);
    box-shadow: var(--ochsen-shadow);
  }
  .nav.ist-offen { display: block; }
  .nav-liste { flex-direction: column; align-items: stretch; gap: 0; padding: 8px 20px 16px; }
  .nav-liste a { padding: 13px 4px; }
  .kopf .container { position: relative; }
  .agenda-eintrag { grid-template-columns: 1fr; gap: 16px; }
  .agenda-flyer { max-width: 260px; }
  .abschnitt { padding: 44px 0; }
  p { font-size: 1.125rem; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
  .kartenliste a.karte:hover { transform: none; }
}

/* ============================================================ DRUCK */
@media print {
  .kopf, .fuss, .hero-knoepfe, .nav-schalter { display: none; }
  body { color: #000; }
  a { color: #000; text-decoration: underline; }
}

/* ============================================================ BEZAHLWAHL
   Auswahl des Bezahlwegs im Gutscheinformular. Ganze Flaeche klickbar,
   damit die Wahl auf dem Handy nicht am kleinen Radiopunkt haengt. */
.feld--wahl {
  border: 0;
  padding: 0;
  margin: 0 0 22px;
}

.feld--wahl legend {
  padding: 0;
  margin-bottom: 10px;
  font-weight: 600;
  color: var(--ochsen-heading);
}

.wahl {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 14px 16px;
  margin-bottom: 10px;
  background: var(--ochsen-bg);
  border: 1px solid var(--ochsen-border);
  border-radius: var(--ochsen-radius);
  cursor: pointer;
  transition: border-color var(--ochsen-transition), background var(--ochsen-transition);
}

.wahl:hover { border-color: var(--ochsen-gold); }

/* :has wird von allen aktuellen Browsern unterstuetzt. Wo nicht, bleibt
   die Auswahl trotzdem bedienbar – nur ohne hervorgehobene Umrandung. */
.wahl:has(input:checked) {
  border-color: var(--ochsen-gold);
  background: var(--ochsen-bg-soft);
}

.wahl:has(input:focus-visible) {
  outline: 3px solid var(--ochsen-gold);
  outline-offset: 2px;
}

.wahl input { margin-top: 4px; flex: none; }

.wahl span { display: block; line-height: 1.5; }

.wahl strong {
  display: block;
  color: var(--ochsen-heading);
  margin-bottom: 2px;
}

.wahl span { font-size: .93rem; color: var(--ochsen-text); }