/* Metzger Gareiß – site styles */
:root {
  --red: #a41b25;
  --dark: #35080f;
  --text: #555;
  --muted: #85868c;
  --light: #ebebeb;
  --white: #fff;
  --script: "Caveat Brush", "Comic Sans MS", cursive;
  --sans: "Roboto", Helvetica, Arial, sans-serif;
  --wrap: 1200px;
  --slant: 6vw;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 80px; }
body { margin: 0; font: 16px/1.6 var(--sans); color: var(--text); background: var(--white); overflow-x: hidden; }
img { max-width: 100%; height: auto; display: block; }
a { color: var(--dark); }
h1, h2, h3 { margin: 0 0 .5em; line-height: 1.2; }
.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 24px; }
.center { text-align: center; }
.script { font-family: var(--script); }
.i { width: 1em; height: 1em; fill: currentColor; vertical-align: -.15em; margin-right: .4em; }
.skip { position: absolute; left: -999px; }
.skip:focus { left: 8px; top: 8px; z-index: 100; background: var(--white); padding: 8px 12px; }

/* Section titles with bar underneath */
.title { font: 400 2.4rem/1.2 var(--script); color: var(--dark); text-align: center; margin: 0 0 1.6em; }
.title::after { content: ""; display: block; width: 200px; height: 3px; margin: .5em auto 0; background: var(--dark); }
.title-light { color: var(--white); }
.title-left { text-align: left; }
.title-left::after { margin-left: 0; }

/* Buttons */
.btn { display: inline-block; padding: .7em 1.6em; border: 0; border-radius: 4px; background: var(--red); color: var(--white); font: 600 1rem var(--sans); text-decoration: none; cursor: pointer; }
.btn:hover { background: var(--dark); }
.btn-dark { background: var(--dark); font-family: var(--script); font-size: 1.1rem; }
.btn-dark:hover { background: #000; }
.btn-light { background: var(--white); color: var(--dark); }
.btn-light:hover { background: var(--light); }

/* ---------- Notice bar (data/hinweis.json, slides in above the page; main.js sets the heights) ---------- */
.notice { height: 0; overflow: hidden; background: var(--white); }
.notice-text { margin: 0; min-height: 70px; padding: 10px 16px; display: flex; align-items: center; justify-content: center; text-align: center; font: 400 25px/1.2 var(--script); color: var(--red); white-space: pre-line; }

/* ---------- Navigation ---------- */
.topbar { position: absolute; top: calc(120px + var(--notice-h, 0px)); left: 0; right: 0; z-index: 50; transition: background .2s; }
.topbar-inner { max-width: 1400px; margin: 0 auto; padding: 0 40px; display: flex; align-items: center; }
.topbar-logo { display: none; flex: none; }
.topbar-logo img { width: 50px; height: 50px; }
.menu { flex: 1; display: flex; justify-content: center; }
.menu a { color: var(--white); text-decoration: none; font: 400 1.5rem Arial, Helvetica, sans-serif; padding: 6px 0; }
.menu a:hover { color: rgba(255,255,255,.75); }
.menu a + a { margin-left: 20px; padding-left: 20px; border-left: 1px solid rgba(255,255,255,.25); }
.menu-toggle { display: none; }
.topbar.stuck { position: fixed; top: 0; background: rgba(255,255,255,.96); box-shadow: 0 1px 8px rgba(0,0,0,.15); }
.topbar.stuck .topbar-inner { padding-top: 6px; padding-bottom: 6px; }
.topbar.stuck .topbar-logo { display: block; margin-right: 40px; }
.topbar.stuck .menu a { color: #333; font-size: 1.3rem; }
.topbar.stuck .menu a:hover { color: var(--red); }
.topbar.stuck .menu a + a { border-left-color: rgba(0,0,0,.15); }

/* ---------- Hero ---------- */
.hero { position: relative; color: var(--white); background: #222 center top/cover no-repeat; background-image: linear-gradient(rgba(0,0,0,.5), rgba(0,0,0,.5)), url(../img/hero-theke.jpg); }
.hero-home { min-height: 780px; padding-bottom: calc(var(--slant) + 40px); clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--slant)), 0 100%); }
.hero-sub { height: 320px; clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--slant)), 0 100%); }
.brand { position: relative; text-align: center; }
.brand-name { margin: 0; font: inherit; }
.brand-logo { display: inline-block; }
.brand-contact { position: absolute; top: 48px; right: 50px; margin: 0; font-size: .8125rem; }
.brand-contact a { color: var(--white); text-decoration: none; margin-left: 20px; }
.brand-contact .i { width: 1.25em; height: 1.25em; vertical-align: -.3em; }
.brand-contact a:hover { color: rgba(255,255,255,.75); }
.hero-content { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: center; padding-top: 140px; }
.claim { font: 400 clamp(3.5rem, 7vw, 6.2rem)/1.1 var(--script); color: var(--white); margin: 0; }
.claim span { display: block; padding-left: 1.4em; }

/* Weekly offer board */
.offer { background: var(--dark); border: 2px dashed var(--white); color: var(--white); }
.offer-head { display: flex; justify-content: space-between; align-items: baseline; flex-wrap: wrap; gap: 0 1em; background: var(--red); padding: 8px 18px; }
.offer-head h2 { font: 400 2.3rem var(--script); margin: 0; }
.offer-dates { margin: 0; font-size: 1rem; }
.offer-list { width: 100%; border-collapse: collapse; }
.offer-list td { padding: 0 14px 0 0; line-height: 40px; vertical-align: middle; }
.offer-list td.name { padding-left: 4px; font: 400 clamp(1.5rem, 2.75vw, 2.2rem)/40px "Raleway", var(--sans); }
.offer-list td.qty { font-size: .75rem; white-space: nowrap; }
.offer-list td.price { font-size: 1.9rem; text-align: right; white-space: nowrap; }
.offer-empty { padding: 20px; margin: 0; font: 1.6rem var(--script); }

/* ---------- Sections ---------- */
.section { padding: 70px 0; }
.days { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; text-align: center; margin-bottom: 80px; }
.round { width: 200px; height: 200px; object-fit: cover; border-radius: 50%; margin: 0 auto 16px; }
.day h3 { font: 400 2rem var(--script); color: var(--dark); margin: 0; }
.day p { font: 400 1.7rem var(--script); color: var(--red); margin: 0; }

.specials { display: grid; grid-template-columns: repeat(4, 1fr); gap: 50px; margin-bottom: 30px; }
/* Specialty cards turn over on hover (tap on touch screens, see main.js), like the old site's hover boxes */
.special { perspective: 1000px; border-radius: 10px; }
.special:focus-visible { outline: 3px solid var(--dark); outline-offset: 4px; }
.flip { position: relative; aspect-ratio: 25 / 26; transform-style: preserve-3d; transition: transform .7s ease; }
.flip-front, .flip-back { position: absolute; inset: 0; width: 100%; height: 100%; border-radius: 10px; backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.flip-front { object-fit: cover; }
.flip-front.contain { object-fit: contain; }
.flip-back { transform: rotateY(180deg); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; padding: 20px; background: var(--red); text-align: center; hyphens: manual; pointer-events: none; }
.flip-back h3 { font: 400 1.9rem/1.15 var(--script); color: var(--white); margin: 0; }
.flip-back img { width: 100%; height: auto; border-radius: 4px; }
.special.flipped .flip, .special:focus-visible .flip, .special:has(:focus-visible) .flip { transform: rotateY(180deg); }
.special.flipped .flip-back, .special:focus-visible .flip-back, .special:has(:focus-visible) .flip-back { pointer-events: auto; }
@media (hover: hover) {
  .special:hover .flip { transform: rotateY(180deg); }
  .special:hover .flip-back { pointer-events: auto; }
}
.section .btn + .title, .center + .title { margin-top: 90px; }

.dishes { list-style: none; padding: 0; margin: 0 0 30px; display: grid; grid-template-columns: repeat(6, 1fr); gap: 20px; text-align: center; font: 400 1.8rem/1.2 var(--script); color: var(--red); }
.pickup { display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: 40px; }
.pickup > * { min-width: 0; }
.pickup img { width: 100%; max-width: 520px; }
.link-doc { font-size: 1.1rem; color: var(--red); text-decoration: none; }
.link-doc:hover { text-decoration: underline; }

/* History */
.history { background: #333 center/cover no-repeat; background-image: linear-gradient(rgba(0,0,0,.6), rgba(0,0,0,.6)), url(../img/damals.jpg); }
.history-head { padding: 170px 0 10px; }
.history-body { padding: 30px 24px 160px; text-align: center; color: var(--white); }
.history-body .script { max-width: 1120px; margin: 50px auto 0; font-size: 1.3rem; }
.counter { font: 400 2.6rem var(--script); margin: 0; color: var(--white); }
.counter strong { font-weight: 400; font-size: 3.2rem; }
.counter span { font-size: 1.4rem; }

/* Today */
.today { background: #222 center/cover no-repeat; background-image: linear-gradient(rgba(158,158,158,.2), rgba(158,158,158,.2)), url(../img/heute.jpg); }
.today-head { padding: 120px 0 10px; }
.today-head .title, .today-body .counter, .today-cols h3 { text-shadow: 0 1px 3px rgba(0,0,0,.6); }
.today-body { padding: 30px 0 calc(var(--slant) + 60px); text-align: center; color: var(--white); font: 1.3rem/1.5 var(--script); }
.today-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; margin: 40px 0; }
.today-cols h3 { font: 400 2.6rem var(--script); }
.today-body p { max-width: 1120px; margin: 0 auto 1em; text-shadow: 0 1px 3px rgba(0,0,0,.6); }
.slant-bottom { clip-path: polygon(0 0, 100% 0, 100% 100%, 0 calc(100% - var(--slant))); }

/* Contact form */
.form-section { background: var(--red); margin-top: calc(-1 * var(--slant)); padding: calc(var(--slant) + 80px) 0 calc(var(--slant) + 80px); clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--slant)), 0 100%); }
.form-box { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; padding: 50px 56px; border: 6px double rgba(255,255,255,.45); }
.form-intro .script { color: var(--white); font-size: 1.7rem; }
.form label { display: block; color: rgba(255,255,255,.8); margin-bottom: 18px; }
.form input[type=text], .form input[type=email], .form input[type=tel], .form textarea { display: block; width: 100%; margin-top: 4px; padding: 10px; border: 0; font: inherit; color: #333; background: var(--white); }
.form .check { display: flex; gap: 8px; align-items: flex-start; }
.form .check input { margin-top: 6px; }
.form .check a { color: var(--dark); }
.form .hp { position: absolute; left: -9999px; }
.form-status { padding: 12px 16px; background: var(--white); color: var(--dark); font-weight: 600; }
.form-status.error { color: var(--red); }

/* Gifts */
.gifts { display: grid; grid-template-columns: 1fr 1fr; gap: 50px; }
.gift { display: grid; grid-template-columns: 210px 1fr; gap: 50px; margin-bottom: 25px; align-items: start; }
.gift img { width: 210px; aspect-ratio: 3 / 2; object-fit: cover; }
.gift-feature img { aspect-ratio: 3 / 4; }
.gift h3 { font: 400 1.7rem/1.25 var(--script); color: var(--dark); margin-bottom: .3em; }
.gift p { font: 400 1.1rem/1.6 var(--script); color: var(--red); margin: 0; }

/* Contact block */
.contact { background: var(--red); color: var(--white); padding: calc(var(--slant) + 70px) 0 0; clip-path: polygon(0 var(--slant), 100% 0, 100% 100%, 0 100%); }
.contact-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 40px; padding-bottom: 50px; max-width: 1400px; }
.contact-intro .title { color: var(--white); font-size: 3rem; }
.contact-intro .title::after { background: var(--dark); }
.contact-intro .script { font-size: 1.9rem; margin: 0; }
.contact-item { text-align: center; font: 400 1.5rem/1.5 var(--script); margin-bottom: 30px; }
.contact-item h3 { font: 400 1.6rem var(--script); margin: 6px 0 4px; }
.contact-item p { margin: 0; }
.contact-item a { color: var(--white); text-decoration: none; }
.ci { display: inline-flex; width: 36px; height: 36px; border-radius: 50%; background: var(--dark); align-items: center; justify-content: center; }
.ci svg { width: 20px; height: 20px; fill: var(--white); }

/* Map with click-to-load */
.map { border: 5px solid var(--white); height: 360px; background: #d9d4cc linear-gradient(135deg, #e6e1d8 25%, #d9d4cc 25%, #d9d4cc 50%, #e6e1d8 50%, #e6e1d8 75%, #d9d4cc 75%) 0 0/40px 40px; display: flex; align-items: center; justify-content: center; }
.map iframe { width: 100%; height: 100%; border: 0; }
.map-consent { max-width: 640px; margin: 0 16px; padding: 24px 28px; background: rgba(30,30,30,.88); color: var(--white); text-align: center; font-size: .95rem; }
.map-consent a { color: #9cc0ff; }
.map-consent .btn { margin: 6px 0 10px; }
.map-alt { margin: 0; font-size: .85rem; }

/* Footer */
.footer { background: var(--red); color: var(--white); font-size: .85rem; padding: 50px 0 40px; }
.footer-inner { display: flex; justify-content: space-between; align-items: flex-end; gap: 20px; flex-wrap: wrap; }
.footer p { margin: 0; }
.footer-links { list-style: none; margin: 0; padding: 0; text-align: right; line-height: 1.8; }
.footer a { color: var(--white); text-decoration: none; }
.footer a:hover { text-decoration: underline; }

/* ---------- Subpages ---------- */
.page { padding: 30px 0 90px; }
.page h1 { font: 700 2.6rem Georgia, "Times New Roman", serif; color: var(--dark); margin-bottom: .3em; }
.page .lead { font-weight: 700; color: var(--muted); font-size: 1.05rem; margin-bottom: 2.5em; }
.cans { display: grid; grid-template-columns: repeat(2, minmax(0, 420px)); }
.page h2 { font-size: 1rem; font-style: italic; color: #111; margin: 1.5em 0 1em; }
.bullets { list-style: none; padding: 0; margin: 0; }
.bullets li { position: relative; padding-left: 24px; margin-bottom: 1.2em; font-weight: 700; color: var(--dark); font-size: 1.05rem; }
.bullets li::before { content: ""; position: absolute; left: 0; top: .3em; width: 14px; height: 14px; border-radius: 50%; background: var(--dark); clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); }
.bullets li::after { content: ""; position: absolute; left: 4px; top: calc(.3em + 4px); border: 3px solid transparent; border-left: 5px solid var(--white); }
.bullets-2col { display: grid; grid-template-columns: repeat(2, minmax(0, 420px)); }
.page hr { border: 0; border-top: 1px solid #999; max-width: 530px; margin: 1.5em 0; }
.legal { max-width: 900px; margin: 0 auto; }
.legal h2 { font-style: normal; font-size: 1.5rem; margin-top: 1.8em; }
.legal h3 { font-size: 1.2rem; color: var(--dark); margin-top: 1.4em; }
.legal h4 { font-size: 1rem; color: #333; margin: 1.2em 0 .4em; }
.legal p, .legal li { overflow-wrap: anywhere; }

/* ---------- Responsive ---------- */
@media (max-width: 1100px) {
  .menu a { font-size: 1.25rem; }
  .menu a + a { margin-left: 12px; padding-left: 12px; }
  .brand-contact { top: 26px; right: 16px; display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
  .brand-contact a { margin-left: 0; }
  .specials { grid-template-columns: repeat(2, 1fr); }
  .dishes { grid-template-columns: repeat(3, 1fr); }
  .gift { grid-template-columns: 160px 1fr; gap: 24px; }
  .gift img { width: 160px; }
}

@media (max-width: 900px) {
  html { scroll-padding-top: 70px; }
  .topbar, .topbar.stuck { position: fixed; top: var(--notice-offset, 0px); background: rgba(20,20,20,.92); box-shadow: none; }
  .topbar-inner, .topbar.stuck .topbar-inner { padding: 6px 16px; justify-content: space-between; }
  .topbar-logo, .topbar.stuck .topbar-logo { display: block; margin: 0; }
  .menu-toggle { display: flex; flex-direction: column; justify-content: center; gap: 6px; width: 44px; height: 44px; padding: 8px; background: none; border: 0; cursor: pointer; }
  .menu-toggle span { display: block; height: 2px; background: var(--white); }
  .menu { display: none; position: absolute; top: 100%; left: 0; right: 0; flex-direction: column; background: rgba(20,20,20,.96); padding: 8px 16px 16px; }
  .menu.open { display: flex; }
  .menu a, .topbar.stuck .menu a { color: var(--white); font-size: 1.2rem; padding: 10px 0; border-bottom: 1px solid rgba(255,255,255,.12); }
  .menu a + a { margin-left: 0; padding-left: 0; border-left: 0; }
  .brand { padding-top: 62px; }
  .brand-logo img { width: 260px; }
  .brand-contact { position: static; margin-top: 10px; }
  .brand-contact a { margin: 0 8px; }
  .hero-home { min-height: 0; }
  .hero-sub { height: 260px; }
  .hero-content { grid-template-columns: 1fr; padding-top: 30px; gap: 20px; }
  .claim { text-align: center; }
  .claim span { padding-left: 0; }
  .offer-list td { line-height: 1.6; }
  .offer-list td.name { font-size: 1.35rem; line-height: 1.6; }
  .offer-list td.price { font-size: 1.2rem; }
  .offer-head h2 { font-size: 1.7rem; }
  .days, .today-cols, .pickup, .form-box, .gifts, .contact-grid { grid-template-columns: 1fr; }
  .pickup { text-align: center; }
  .pickup img { margin: 0 auto; }
  .form-box { padding: 30px 20px; gap: 20px; }
  .contact-intro { text-align: center; }
  .contact-intro .title-left, .contact-intro .title { text-align: center; }
  .contact-intro .title::after { margin-left: auto; }
  .title { font-size: 2rem; }
}

@media (max-width: 560px) {
  .wrap { padding: 0 16px; }
  .specials { grid-template-columns: 1fr; max-width: 340px; margin-left: auto; margin-right: auto; }
  .dishes { grid-template-columns: repeat(2, 1fr); font-size: 1.5rem; }
  .gift { grid-template-columns: 120px 1fr; gap: 16px; }
  .gift img { width: 120px; }
  .cans, .bullets-2col { grid-template-columns: 1fr; }
  .footer-inner { flex-direction: column; align-items: flex-start; }
  .footer-links { text-align: left; }
  .page h1 { font-size: 2rem; }
}

/* ---------- Scroll effects (only with JS; see main.js) ---------- */
.js .reveal { opacity: 0; transition: opacity .8s ease, transform .8s ease; transition-delay: var(--delay, 0ms); }
.js .reveal-up { transform: translateY(40px); }
.js .reveal-left { transform: translateX(-80px); }
.js .reveal-right { transform: translateX(80px); }
.js .reveal-bounce { transform: translateX(120px); transition-timing-function: ease, cubic-bezier(.34, 1.56, .64, 1); transition-duration: .9s; }
.js .reveal.is-visible { opacity: 1; transform: none; }
.count { font-variant-numeric: tabular-nums; }
.counter .count { display: inline-block; min-width: 1.6em; }
@media (prefers-reduced-motion: reduce) {
  .js .reveal { opacity: 1; transform: none; transition: none; }
  .flip { transition: none; }
}