/* Getränke Hnyk – Variante „Nachbau“: originalgetreu nach dem bisherigen Layout, zusätzlich mobil nutzbar */
:root {
  --orange: #e85f32;
  --gelb: #ffb854;
  --grau: #646264;
  --grau-dunkel: #6d6d6d;
  --text: #303030;
  --breite: 960px;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; overflow-x: clip; }
body { font-family: Arial, Helvetica, sans-serif; font-size: 18px; line-height: 1.25; color: var(--text); background: #fff; hyphens: auto; -webkit-hyphens: auto; overflow-x: clip; }
img { border: 0; max-width: 100%; height: auto; display: block; }
a, a:visited { outline: none; font-weight: bold; color: var(--orange); text-decoration: none; }
a:hover, a:active, a:focus { color: var(--text); }
:focus-visible { outline: 3px solid var(--gelb); outline-offset: 2px; }
p, address, h1, h2, h3, h4, ul, table { margin-bottom: 16px; }
address { font-style: normal; }
hr { height: 2px; background: var(--orange); border: 0; margin-bottom: 20px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: -9999px; top: 0; background: var(--orange); color: #fff; padding: 8px 14px; z-index: 100; }
.skip:focus { left: 16px; color: #fff; }
.clear { clear: both; }
.center { text-align: center; }
.space { margin-top: 40px; }

.wrap { max-width: var(--breite); margin: 0 auto; }
@media (max-width: 1024px) { .wrap { padding-left: 24px; padding-right: 24px; } }
@media (max-width: 600px) { .wrap { padding-left: 16px; padding-right: 16px; } }

/* ---------- Kopf (wie Original #header) ---------- */
#header { position: relative; display: grid; grid-template-columns: 1fr auto; grid-template-areas: "logo info" "nav nav"; align-items: start; }
#header .logo { grid-area: logo; padding-top: 4px; }
#header .logo img { width: 300px; }
#header .info { grid-area: info; display: grid; grid-template-columns: 220px 179px; margin-right: 8px; }
#header .info > div { border-left: 1px solid var(--grau-dunkel); display: flex; flex-direction: column; align-items: center; }
#header .info > div:last-child { border-right: 1px solid var(--grau-dunkel); }
#header .service { display: flex; align-items: center; gap: 6px; height: 64px; color: var(--grau-dunkel); font-size: 20px; line-height: 1; }
#header .service img { width: 60px; }
#header .service strong { display: block; font-style: italic; font-size: 20px; }
#header .service a { color: var(--grau-dunkel); font-weight: bold; }
#header .fb { height: 64px; display: flex; align-items: center; }
#header .fb img { width: 179px; }
#header .partner-dhl img { height: 52px; width: auto; }
#header .partner-lotto img { height: 52px; width: auto; }

#navigation { grid-area: nav; justify-self: end; margin-right: 8px; }
#navigation > ul { list-style: none; margin: 0; display: flex; flex-wrap: wrap; justify-content: flex-end; }
#navigation li { position: relative; font-size: 16px; }
#navigation a { display: block; padding: 0 8px; margin-left: 2px; line-height: 46px; color: var(--grau); }
#navigation a:hover, #navigation a:focus, #navigation a[aria-current="page"], #navigation li.aktiv > a { background: var(--orange); color: #fff; }
#navigation ul ul { list-style: none; margin: 0; position: absolute; left: 2px; top: 46px; width: 200px; z-index: 20; display: none; }
#navigation li:hover > ul, #navigation li:focus-within > ul { display: block; }
#navigation ul ul a, #navigation ul ul a:visited { background: #fff; color: var(--grau); margin: 0; }
#navigation ul ul a:hover, #navigation ul ul a:focus, #navigation ul ul a[aria-current="page"] { background: var(--orange); color: #fff; }
.menu-btn { display: none; }

@media (max-width: 900px) {
  #header { grid-template-columns: 1fr auto; grid-template-areas: "logo btn" "nav nav"; align-items: center; }
  #header .logo img { width: 210px; }
  #header .info { display: none; }
  .menu-btn { grid-area: btn; display: inline-block; background: var(--orange); color: #fff; border: 0; padding: 10px 14px; font: bold 16px Arial, sans-serif; cursor: pointer; }
  .menu-btn span { display: inline-block; width: 18px; height: 2px; background: #fff; position: relative; vertical-align: middle; margin-right: 8px; }
  .menu-btn span::before, .menu-btn span::after { content: ""; position: absolute; left: 0; width: 18px; height: 2px; background: #fff; }
  .menu-btn span::before { top: -6px; } .menu-btn span::after { top: 6px; }
  #navigation { display: none; justify-self: stretch; margin: 8px 0 12px; }
  #navigation.offen { display: block; }
  #navigation > ul { flex-direction: column; }
  #navigation a { margin: 0; border-bottom: 1px solid #eee; line-height: 44px; }
  #navigation ul ul { position: static; display: block; width: auto; }
  #navigation ul ul a { padding-left: 28px; }
  .mobil-kontakt { display: block !important; }
}
.mobil-kontakt { display: none; background: var(--orange); color: #fff; text-align: center; padding: 8px 16px; font-size: 16px; }
.mobil-kontakt a { color: #fff; }

/* ---------- Startseite: Begrüßung (wie Original #entry) ---------- */
#entry-band { background: url("../img/layout/willkommen-hintergrund.jpg") center top / auto 100% no-repeat; }
#entry { display: grid; grid-template-columns: 480px 480px; height: 402px; }
#entry .links { display: flex; flex-direction: column; }
#entry .big { background: #fff; color: var(--orange); font-size: 52px; height: 77px; line-height: 77px; text-align: center; margin: 0; font-weight: normal; }
#entry .desc { background: var(--orange); color: #fff; width: 480px; flex: 1; padding: 20px 20px 0; font-size: 20px; line-height: normal; }
#entry .desc h2 { color: #fff; font-weight: normal; font-size: 24px; line-height: 30px; margin-bottom: 16px; }
#entry .bild { background: #fff; }
#entry .bild img { width: 480px; height: 402px; object-fit: cover; }
@media (max-width: 1000px) {
  #entry-band { background: none; }
  #entry { grid-template-columns: 1fr; height: auto; }
  #entry .bild { order: -1; }
  #entry .bild img { width: 100%; height: auto; }
  #entry .desc { width: auto; padding-bottom: 16px; }
  #entry .big { font-size: 40px; height: auto; line-height: 1.15; padding: 10px 0; }
}

/* ---------- Teaserbox ---------- */
.teaserbox { padding-top: 14px; padding-bottom: 14px; }
.teaserbox h3, .leitsatz { color: var(--orange); font-size: 24px; font-weight: bold; text-align: center; line-height: 32px; margin-bottom: 16px; }
.obox { background: var(--orange); color: #fff; text-align: center; font-size: 24px; padding: 8px; margin-bottom: 20px; }
.obox a, .obox a:visited { color: #fff; }
.obox a:hover, .obox a:focus { color: #fff; text-decoration: underline; }
.obox h3, .obox h4 { color: #fff !important; }
.obox p { color: #fff; font-size: 19px; line-height: normal; margin-bottom: 0; }
.teaser-reihe { display: grid; grid-template-columns: repeat(4, 220px); justify-content: space-between; padding: 0 10px; }
.teaser img { width: 220px; border: 1px solid var(--gelb); }
.teaser h2 { margin: 2px 0 0; }
.teaser h2 a, .teaser h2 a:visited { display: block; background: var(--orange); color: #fff; text-align: center; font-size: 20px; height: 54px; line-height: 54px; }
.teaser h2 a:hover, .teaser h2 a:focus { background: var(--grau-dunkel); color: #fff; }
@media (max-width: 1000px) { .teaser-reihe { grid-template-columns: repeat(2, 1fr); gap: 16px; padding: 0; } .teaser img { width: 100%; } }
@media (max-width: 380px) { .teaser h2 a { font-size: 17px; } }

.medium { margin-top: 0; }
.medium h3 { color: #fff; font-size: 24px; font-weight: bold; margin: 4px 0 16px; line-height: 32px; }
.medium .extern { max-width: 560px; margin: 0 auto 8px; }
.medium.rundgang .extern { max-width: 600px; aspect-ratio: 4 / 3; }

/* Klick-zum-Laden (YouTube / Google Maps) */
.extern { position: relative; aspect-ratio: 16 / 9; background: #fff; color: var(--text); overflow: hidden; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; padding: 20px; text-align: center; }
.extern p { font-size: 14px; color: #444; max-width: 46ch; margin: 0; line-height: 1.35; }
.extern a { color: var(--orange); }
.extern iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; z-index: 3; }
.extern .play { width: 68px; height: 48px; border-radius: 12px; background: #f00; position: relative; }
.extern .play::after { content: ""; position: absolute; left: 27px; top: 14px; border-left: 18px solid #fff; border-top: 10px solid transparent; border-bottom: 10px solid transparent; }
.extern.mit-bild { background: #222; color: #fff; }
.extern-bild { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; }
.extern.mit-bild::before { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(0deg, rgba(0, 0, 0, .75) 0%, rgba(0, 0, 0, .3) 55%, rgba(0, 0, 0, .1) 100%); }
.extern.mit-bild > *:not(.extern-bild) { position: relative; z-index: 2; }
.extern.mit-bild p { color: #fff; text-shadow: 0 1px 3px rgba(0, 0, 0, .6); }
.obox .extern.mit-bild a, .extern.mit-bild a { color: #ffd29b; }
.btn, .btn:visited { display: inline-block; background: var(--orange); color: #fff; border: 0; padding: 8px 18px; font: bold 18px Arial, sans-serif; cursor: pointer; }
.btn:hover, .btn:focus { background: var(--grau-dunkel); color: #fff; }

/* ---------- Inhaltsseiten (wie Original #content) ---------- */
#content { max-width: 940px; margin: 0 auto; padding-top: 10px; }
@media (max-width: 1004px) { #content { padding-left: 24px; padding-right: 24px; } }
@media (max-width: 600px) { #content { padding-left: 16px; padding-right: 16px; } }
#content h2, #content h3, #content h4 { color: var(--orange); font-weight: normal; line-height: 32px; }
#content h1.titel { font-size: 32px; color: #fff; background: var(--orange); padding: 7px; text-align: center; font-weight: bold; line-height: 32px; margin-bottom: 16px; }
#content h3 { font-size: 30px; }
#content h2 { font-size: 24px; margin-bottom: 0; }
#content h4 { font-size: 24px; margin-bottom: 0; }
#content ul { margin-left: 18px; }
#content li { color: #000; }
#content li::marker { color: var(--orange); }
#content .obox h2, #content .obox h3, #content .obox h4 { color: #fff; }
#content .obox .oeffnung { font-size: 32px; font-weight: bold; margin: 7px 0; line-height: 32px; }
p.big { font-size: 20px; }
a.zurueck { display: block; text-align: center; font-size: 24px; font-weight: normal; margin: 20px 0 30px; }

.spalten { display: grid; grid-template-columns: 620px 300px; gap: 20px; align-items: start; }
.spalten .bild-spalte img { margin-bottom: 20px; }
@media (max-width: 980px) { .spalten { grid-template-columns: 1fr; } .spalten .bild-spalte { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; } .spalten .bild-spalte img { margin: 0; } }
@media (max-width: 480px) { .spalten .bild-spalte { grid-template-columns: 1fr 1fr; } }
.seite-bild { margin-bottom: 20px; }

/* Lightbox */
.lightbox { position: fixed; inset: 0; background: rgba(0, 0, 0, .85); display: none; align-items: center; justify-content: center; padding: 20px; z-index: 200; }
.lightbox.offen { display: flex; }
.lightbox img { max-width: 100%; max-height: 90vh; width: auto; border: 10px solid #fff; }
.lightbox button { position: absolute; top: 14px; right: 14px; width: 44px; height: 44px; border-radius: 50%; border: 0; background: #fff; font-size: 26px; cursor: pointer; }

/* Angebote (wie Original .specialAngebot) */
.angebote { display: grid; grid-template-columns: 460px 460px; justify-content: space-between; row-gap: 30px; margin: 10px 0 30px; }
.angebot { border: 20px solid var(--orange); background: var(--orange); color: #fff; text-align: center; }
.angebot.quer { grid-column: 1 / -1; } /* Querformat-Flyer (z. B. Veranstaltungen) über die volle Breite, wie .fullcol im Original */
.start-flyer { margin-top: 20px; } /* Flyer auf der Startseite: unter dem Liefer-Banner, über den Zeichnungen */
.start-flyer .angebot + .angebot { margin-top: 20px; }
.angebot span { display: block; padding-top: 20px; font-weight: 600; }
@media (max-width: 980px) { .angebote { grid-template-columns: 1fr; gap: 24px; } }

/* Referenzen / Produkte (wie Original .threeBox) */
.three { display: grid; grid-template-columns: repeat(3, 300px); justify-content: space-between; row-gap: 20px; margin-bottom: 20px; }
.three a { display: block; color: #fff; }
.three a img { width: 300px; height: 200px; object-fit: cover; }
.three a span { display: flex; align-items: center; justify-content: center; text-align: center; background: var(--orange); color: #fff; font-size: 24px; font-weight: bold; min-height: 66px; padding: 4px 8px; line-height: 1; }
.three a:hover span, .three a:focus span { background: var(--grau-dunkel); }
.three button { background: var(--orange); color: #fff; border: 0; font: bold 24px Arial, sans-serif; min-height: 66px; cursor: pointer; }
.three button:hover, .three button[aria-pressed="true"] { background: var(--grau-dunkel); }
@media (max-width: 980px) { .three { grid-template-columns: repeat(2, 1fr); gap: 16px; } .three a img { width: 100%; height: auto; aspect-ratio: 3 / 2; } .three a span, .three button { font-size: 19px; } }
@media (max-width: 420px) { .three { grid-template-columns: 1fr; } }

/* Tabellen (wie Original table.fullWidth) */
.tabelle-wrap { overflow-x: auto; margin-bottom: 20px; }
table.fullWidth { width: 100%; border-collapse: collapse; font-size: 16px; }
table.fullWidth th, table.fullWidth td { text-align: left; vertical-align: top; border-bottom: 1px solid #000; padding: 2px 4px; width: 10%; }
table.fullWidth tr:first-child th, table.fullWidth thead th { background: var(--orange) !important; color: #000; font-weight: normal; }
table.fullWidth tr:first-child th:first-child { font-weight: bold; }
table.fullWidth tr:last-child td, table.fullWidth tr:last-child th { border-bottom: 0; }
table.fullWidth th:first-child, table.fullWidth td:first-child { width: 30%; }
table.fullWidth td:nth-child(2n), table.fullWidth th:nth-child(2n) { background: #e7e7e7; }
.produkt-tabelle { max-height: 70vh; overflow: auto; border: 1px solid #ddd; }
#produktliste td { width: auto; }
.suche { display: flex; margin-bottom: 8px; }
.suche input { flex: 1; min-width: 0; border: 1px solid var(--gelb); padding: 5px 8px; font: 18px Arial, sans-serif; }
.suche button { width: 140px; border: 0; background: var(--orange); color: #fff; font: bold 18px Arial, sans-serif; cursor: pointer; }
.treffer { font-size: 15px; color: #555; }
.wiss-link { text-align: center; margin-bottom: 50px; }
.wiss-link img { margin: 8px auto; }

/* Kontakt (wie Original #kontakt-form) */
fieldset { padding: 20px; margin-bottom: 20px; border: 1px solid var(--gelb); }
legend { font-weight: bold; padding: 0 2px; }
.formular { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 40px; }
.formular .voll { grid-column: 1 / -1; }
.formular .plz-ort { grid-column: 1 / -1; display: grid; grid-template-columns: 30% 1fr; gap: 0 32px; }
.formular label { display: block; }
.formular input, .formular textarea { width: 100%; border: 1px solid var(--gelb); font: 18px Arial, sans-serif; padding: 1px 3px; }
.formular textarea { resize: vertical; height: 176px; }
.aktionen { display: flex; gap: 20px; flex-wrap: wrap; margin: 10px 0 20px; }
.aktionen button { width: 300px; max-width: 100%; padding: 8px; background: var(--orange); color: #fff; border: 0; font: bold 18px Arial, sans-serif; cursor: pointer; }
.aktionen button:hover { background: var(--grau-dunkel); }
.form-success { display: none; color: #5b9b50; margin-bottom: 20px; }
.form-success.is-visible { display: block; }
@media (max-width: 560px) { .formular { grid-template-columns: 1fr; } .formular .plz-ort { grid-template-columns: 1fr; } }

/* Impressum (wie Original .impressum-table) */
table.impressum { width: 100%; margin-bottom: 10px; border-collapse: collapse; }
table.impressum td { padding-bottom: 5px; vertical-align: top; }
table.impressum td:first-child { font-weight: bold; width: 260px; }
@media (max-width: 560px) { table.impressum td { display: block; width: auto !important; } }
.rechtstext h2 { margin-top: 20px; }

/* ---------- Fuß (wie Original #footer) ---------- */
#footer { background: var(--gelb); margin-top: 20px; }
#footer .inhalt { max-width: 940px; margin: 0 auto; padding: 13px 0; position: relative; min-height: 73px; }
#footer p, #footer address { margin: 0; }
#footer address { font-size: 15px; padding-right: 115px; }
#footer hr { height: 1px; width: 415px; max-width: 100%; background: #fff; margin: 5px 0; }
#footer .fb { position: absolute; right: 0; top: 31px; }
#footer .fb img { width: 103px; }
@media (max-width: 980px) { #footer .inhalt { padding: 13px 16px; } #footer .fb { position: static; margin-top: 8px; } }
@media (max-width: 980px) { #footer address { padding-right: 0; } }
.spalten .bild-spalte img { aspect-ratio: 3 / 2; object-fit: cover; width: 100%; }