/* ============================================================
   Hopferei Wirtshaus – Design im Stil der Altseite
   Dunkle Nav mit mittigem Logo, randlose Foto-Kacheln,
   Großbuchstaben-Typografie, heller Band, dunkler Footer.
   ============================================================ */

:root {
  --dark:      #262220;   /* Nav / Footer */
  --dark-2:    #1e1b19;
  --tan:       #c9a878;   /* Logo-Kreis / Akzent */
  --tan-2:     #b8946a;
  --tan-btn:   #8a6a3e;   /* Buttons: dunkleres Braun für Kontrast (WCAG AA mit weißem Text) */
  --tan-btn-2: #74562f;
  --cream:     #efeccb;   /* heller Band */
  --text:      #3b3b3b;
  --muted:     #8c8c8c;
  --line:      #e7e3dd;
  --bg:        #ffffff;
  --bg-soft:   #faf9f6;

  --maxw: 1200px;
  --font: 'Raleway', -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;
  --shadow: 0 8px 30px rgba(0,0,0,.08);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin:0; font-family:var(--font); color:var(--text); background:var(--bg); line-height:1.7; font-weight:400; -webkit-font-smoothing:antialiased; }
img { max-width:100%; display:block; }

h1,h2,h3,h4 { font-family:var(--font); font-weight:500; color:#2c2c2c; margin:0 0 .5em; letter-spacing:.04em; }

a { color:var(--tan-2); text-decoration:none; transition:color .2s, background .2s, opacity .2s; }
a:hover { color:var(--dark); }

.container { max-width:var(--maxw); margin:0 auto; padding:0 24px; }

/* Überschrift im Alt-Stil: uppercase, gesperrt, dünn */
.eyebrow { text-transform:uppercase; letter-spacing:.28em; font-size:.72rem; color:var(--tan-2); font-weight:600; }
.heading { text-transform:uppercase; letter-spacing:.18em; font-weight:500; font-size:1.7rem; color:#4a4a4a; }
.divider { width:56px; height:1px; background:var(--tan); margin:20px auto 26px; border:0; }

/* ---------- Buttons (Alt-Stil: dünne Outline, uppercase) ---------- */
.btn {
  display:inline-flex; align-items:center; justify-content:center; gap:.5em;
  padding:14px 34px; font-size:.72rem; font-weight:600;
  text-transform:uppercase; letter-spacing:.18em;
  border:1px solid transparent; cursor:pointer; background:none;
  transition:all .25s;
}
.btn--light  { border-color:#fff; color:#fff; }
.btn--light:hover { background:#fff; color:var(--dark); }
.btn--dark   { border-color:#333; color:#333; }
.btn--dark:hover { background:#333; color:#fff; }
.btn--tan    { background:var(--tan-btn); border-color:var(--tan-btn); color:#fff; }
.btn--tan:hover { background:var(--tan-btn-2); border-color:var(--tan-btn-2); color:#fff; }
.btn--sm { padding:10px 22px; font-size:.66rem; }
.btn--block { display:flex; width:100%; }
/* Kompatibilität zu bestehenden Seiten */
.btn--primary { background:var(--tan-btn); border-color:var(--tan-btn); color:#fff; }
.btn--primary:hover { background:var(--tan-btn-2); border-color:var(--tan-btn-2); color:#fff; }
.btn--outline { border-color:var(--tan-btn); color:var(--tan-btn); }
.btn--outline:hover { background:var(--tan-btn); border-color:var(--tan-btn); color:#fff; }
.btn--ghost { border-color:rgba(255,255,255,.7); color:#fff; }
.btn--ghost:hover { background:rgba(255,255,255,.15); }

/* ============================================================
   Header / Navigation – dunkel, Logo mittig
   ============================================================ */
.site-header { position:sticky; top:0; z-index:100; background:var(--dark); }
.nav { display:grid; grid-template-columns:1fr auto 1fr; align-items:center; min-height:92px; }
.nav__group { display:flex; align-items:center; gap:34px; }
.nav__group--left  { justify-content:flex-end; }
.nav__group--right { justify-content:flex-start; }
.nav__group a {
  color:#eee; text-transform:uppercase; letter-spacing:.16em;
  font-size:.72rem; font-weight:600; padding:6px 0; position:relative;
}
.nav__group a:hover, .nav__group a.is-active { color:#fff; }
.nav__group a.is-active::after {
  content:""; position:absolute; left:0; right:0; bottom:-4px; height:1px; background:var(--tan);
}
.brand-mid { display:flex; align-items:center; justify-content:center; margin:0 40px; }
.brand-mid img { height:52px; width:auto; }

/* Sprach-/Menü-Steuerung */
.nav__meta { display:none; } /* wird auf Mobil genutzt */
.lang { position:absolute; top:34px; right:24px; display:inline-flex; gap:2px; z-index:110; }
.lang a { color:#cbb998; font-size:.7rem; font-weight:700; letter-spacing:.1em; padding:2px 6px; }
.lang a.is-active { color:#fff; border-bottom:1px solid var(--tan); }
.nav__toggle { display:none; position:absolute; left:20px; top:30px; background:none; border:0; cursor:pointer; z-index:110; }
.nav__toggle span { display:block; width:26px; height:2px; background:#fff; margin:6px 0; }

/* ============================================================
   Hero-Slider (Vollbreite Foto + heller Titel)
   ============================================================ */
.hero-slider { position:relative; height:calc(100vh - 92px); height:calc(100dvh - 92px); min-height:520px; overflow:hidden; background:#1e1b19; }
.slide { position:absolute; inset:0; opacity:0; transition:opacity 1.2s ease; background-size:cover; background-position:center; }
.slide.is-active { opacity:1; }
.slide::after { content:""; position:absolute; inset:0; background:rgba(30,25,22,.32); }
.slide__caption { position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; color:#fff; z-index:2; padding:0 20px; }
.slide__caption h1 { color:#fff; font-weight:300; font-size:clamp(1.8rem,4.4vw,3.2rem); letter-spacing:.1em; text-transform:none; text-shadow:0 2px 20px rgba(0,0,0,.4); }
.slide__caption .divider { background:rgba(255,255,255,.8); }
.slider-dots { position:absolute; bottom:26px; left:0; right:0; display:flex; gap:12px; justify-content:center; z-index:3; }
.slider-dots { gap:6px; }
.slider-dots button { width:28px; height:28px; border-radius:50%; border:0; background:transparent; cursor:pointer; padding:0; position:relative; }
.slider-dots button::before { content:""; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:10px; height:10px; border-radius:50%; background:rgba(255,255,255,.5); transition:background .2s; }
.slider-dots button.is-active::before { background:#fff; }

/* Foto-Platzhalter im Warmton (bis echte Bilder da sind) */
.ph-wood { background:linear-gradient(120deg,#a9855c,#6f4f33); }
.ph-room { background:linear-gradient(120deg,#cbb79c,#8a765c); }
.ph-food { background:linear-gradient(135deg,#7a4a2c,#3f2417); }
.ph-kids { background:linear-gradient(135deg,#d8b57e,#a97c44); }
.ph-bar  { background:linear-gradient(135deg,#5f6a3a,#39421f); }
.ph-dark { background:linear-gradient(135deg,#3a332e,#241f1b); }

/* ============================================================
   Drei randlose Foto-Kacheln (FOOD / KINDERKARTE / BARFOOD)
   ============================================================ */
.tiles { display:grid; grid-template-columns:repeat(3,1fr); }
.tile { position:relative; min-height:430px; display:grid; place-items:center; background-size:cover; background-position:center; overflow:hidden; }
.tile::before { content:""; position:absolute; inset:0; background:rgba(20,16,14,.42); transition:background .3s; }
.tile:hover::before { background:rgba(20,16,14,.55); }
.tile__inner { position:relative; z-index:2; text-align:center; color:#fff; padding:20px; }
.tile__title { text-transform:uppercase; letter-spacing:.16em; font-size:1.55rem; font-weight:500; margin-bottom:20px; color:#fff; }

/* ============================================================
   Über uns
   ============================================================ */
.about { text-align:center; padding:100px 0; background:#fff; }
.about p { max-width:640px; margin:0 auto; color:var(--muted); font-size:1.02rem; line-height:1.95; }

/* ============================================================
   Galerie "FROM OUR PUB"
   ============================================================ */
.gallery2 { display:grid; grid-template-columns:repeat(3,1fr); grid-auto-rows:230px; }
.gallery2__item { background-size:cover; background-position:center; position:relative; }
.gallery2__box { background:var(--dark); color:#fff; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; padding:20px; }
.gallery2__box .eyebrow { color:var(--tan); font-size:.7rem; margin-bottom:12px; }
.gallery2__box h2 { color:#fff; text-transform:uppercase; letter-spacing:.2em; font-weight:500; font-size:1.5rem; margin-bottom:20px; }

/* ============================================================
   Heller Band + TOP
   ============================================================ */
.band { background:var(--cream); text-align:center; padding:70px 0; }

/* ============================================================
   Footer – dunkel, zentriert, uppercase
   ============================================================ */
.foot { background:var(--dark); color:#c8c0b6; text-align:center; padding:70px 0 30px; }
.foot a { color:#d7cbb9; }
.foot a:hover { color:#fff; }
.foot__links { display:flex; flex-direction:column; gap:12px; align-items:center; margin-bottom:34px; }
.foot__links a { text-transform:uppercase; letter-spacing:.12em; font-size:.8rem; }
.foot__mail { width:40px; height:40px; margin:0 auto 14px; color:var(--tan); }
.foot__news h4, .foot__news h2 { color:#fff; text-transform:uppercase; letter-spacing:.2em; font-weight:500; font-size:.95rem; margin-bottom:20px; }
.foot__news form { max-width:420px; margin:0 auto; }
.foot__news input { width:100%; background:transparent; border:1px solid #4a443e; color:#fff; padding:14px 16px; text-align:center; text-transform:uppercase; letter-spacing:.1em; font-size:.72rem; margin-bottom:14px; }
.foot__news input::placeholder { color:#8a8178; }
.foot__brand { margin:44px 0 10px; }
.foot__brand img { height:66px; width:auto; margin:0 auto 18px; }
.foot__brand p { text-transform:uppercase; letter-spacing:.14em; font-size:.72rem; color:#b4a99c; max-width:560px; margin:0 auto; line-height:2; }
.foot__social { display:flex; gap:14px; justify-content:center; margin:24px 0; }
.foot__social a { width:38px; height:38px; border-radius:50%; border:1px solid #4a443e; display:grid; place-items:center; }
.foot__social a:hover { background:var(--tan); border-color:var(--tan); }
.foot__social svg { width:16px; height:16px; }
.foot__bottom { border-top:1px solid #3a342e; padding-top:22px; margin-top:20px; text-transform:uppercase; letter-spacing:.14em; font-size:.7rem; color:#a89b8c; }
.foot__brand p { color:#b7ac9e; }

/* ============================================================
   Unterseiten (Speisekarte/Kontakt/Reservation) – Alt-Stil
   ============================================================ */
.section { padding:90px 0; }
.section--warm { background:var(--bg-soft); }
.section__head { text-align:center; max-width:680px; margin:0 auto 46px; }
.section__head p { color:var(--muted); }
.page-hero { background:var(--dark); color:#fff; text-align:center; padding:90px 0; }
.page-hero h1 { color:#fff; font-weight:300; letter-spacing:.08em; }
.page-hero .eyebrow { color:var(--tan); }
.page-hero p { color:rgba(255,255,255,.8); }
/* alte .hero-Verwendung auf Unterseiten abfangen */
.hero { background:var(--dark); color:#fff; text-align:center; padding:90px 0; }
.hero h1 { color:#fff; font-weight:300; }
.hero .eyebrow { color:var(--tan); }
.hero .lead, .hero p.lead { color:rgba(255,255,255,.82); max-width:620px; margin:14px auto 0; }

.split { display:grid; grid-template-columns:1fr 1fr; gap:50px; align-items:center; }
.split__media { min-height:340px; background:linear-gradient(135deg,#3a332e,#241f1b); }

.grid { display:grid; gap:24px; }
.grid--4 { grid-template-columns:repeat(4,1fr); }
.grid--3 { grid-template-columns:repeat(3,1fr); }
.grid--2 { grid-template-columns:repeat(2,1fr); }

.card { background:#fff; border:1px solid var(--line); overflow:hidden; display:flex; flex-direction:column; }
.card__media { height:160px; }
.card__body { padding:22px; display:flex; flex-direction:column; gap:10px; flex:1; }
.card__body h3 { text-transform:uppercase; letter-spacing:.12em; font-size:1rem; }
.card__body p { color:var(--muted); font-size:.92rem; flex:1; margin:0; }

/* Speisekarte */
.menu-cat { margin-bottom:44px; }
.menu-cat > h3 { text-transform:uppercase; letter-spacing:.16em; font-weight:500; font-size:1.3rem; border-bottom:1px solid var(--tan); padding-bottom:12px; margin-bottom:20px; }
.menu-item { display:flex; justify-content:space-between; gap:16px; padding:12px 0; border-bottom:1px solid var(--line); }
.menu-item__info h4 { margin:0 0 3px; text-transform:none; letter-spacing:0; font-size:1.02rem; font-weight:600; }
.menu-item__info p { margin:0; color:var(--muted); font-size:.88rem; }
.menu-item__price { font-weight:700; color:var(--tan-2); white-space:nowrap; }

/* Formulare */
.form-card { background:#fff; border:1px solid var(--line); padding:34px; }
.field { margin-bottom:18px; }
.field label { display:block; text-transform:uppercase; letter-spacing:.1em; font-size:.72rem; font-weight:600; margin-bottom:8px; color:#555; }
.field input, .field select, .field textarea { width:100%; padding:13px 14px; border:1px solid var(--line); background:#fdfdfc; font-size:1rem; font-family:inherit; }
.field input:focus, .field select:focus, .field textarea:focus { outline:none; border-color:var(--tan); }
.help { font-size:.82rem; color:#6a6a6a; }
.help a { color:var(--tan-2); text-decoration:underline; }
.dish { border:1px solid var(--line); padding:16px 18px; margin-bottom:12px; background:#fff; cursor:pointer; display:block; }
.dish:hover { border-color:var(--tan); }
.dish input { margin-right:10px; accent-color:var(--tan); }
.dish .desc { color:var(--muted); font-size:.9rem; margin:4px 0 0 26px; font-style:italic; }
.notice { background:#fff; border:1px solid var(--line); padding:50px; text-align:center; max-width:600px; margin:0 auto; }
.notice__icon { width:70px; height:70px; margin:0 auto 20px; background:var(--tan); border-radius:50%; display:grid; place-items:center; color:#fff; }
.notice__icon svg { width:34px; height:34px; }
.pill { display:inline-block; padding:4px 12px; border-radius:999px; font-size:.72rem; font-weight:600; text-transform:uppercase; letter-spacing:.08em; }
.pill--green { background:#e3efd8; color:#4c6b2a; }
.pill--braun { background:#efe7db; color:var(--tan-2); }
.hours { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
.hours__col { background:#fff; border:1px solid var(--line); padding:24px; }
.hours__col h3 { text-transform:uppercase; letter-spacing:.12em; font-size:.9rem; color:var(--tan-2); }
.hours__col ul { list-style:none; margin:12px 0 0; padding:0; }
.hours__col li { display:flex; justify-content:space-between; padding:6px 0; border-bottom:1px solid var(--line); font-size:.92rem; }
.script { font-family:var(--font); font-weight:300; font-style:italic; color:var(--tan-2); }
.text-center { text-align:center; }
.newsletter { background:var(--dark); color:#fff; padding:54px; text-align:center; }
.newsletter h2 { color:#fff; }
.newsletter__form { display:flex; gap:12px; max-width:480px; margin:0 auto; flex-wrap:wrap; }
.newsletter__form input { flex:1; min-width:200px; padding:13px 16px; border:1px solid #4a443e; background:transparent; color:#fff; }

/* ============================================================
   Backoffice (unverändert nutzbar)
   ============================================================ */
.admin { display:grid; grid-template-columns:250px 1fr; min-height:100vh; }
.admin__side { background:var(--dark); color:#cbbfb4; padding:24px 16px; }
.admin__brand { display:flex; align-items:center; gap:10px; padding:0 8px 22px; border-bottom:1px solid rgba(255,255,255,.1); margin-bottom:18px; }
.admin__brand .brand__name { color:#fff; font-size:1rem; font-weight:600; }
.admin__nav { list-style:none; margin:0; padding:0; }
.admin__nav li > span.group { display:block; font-size:.68rem; text-transform:uppercase; letter-spacing:.16em; color:#7d7268; margin:18px 8px 6px; }
.admin__nav a { display:flex; align-items:center; gap:11px; color:#cbbfb4; padding:10px 12px; border-radius:6px; font-size:.92rem; }
.admin__nav a:hover { background:rgba(255,255,255,.07); color:#fff; }
.admin__nav a.is-active { background:var(--tan); color:#fff; }
.admin__main { background:var(--bg-soft); }
.admin__topbar { background:#fff; border-bottom:1px solid var(--line); padding:16px 30px; display:flex; align-items:center; justify-content:space-between; position:sticky; top:0; z-index:5; }
.admin__topbar h1 { font-size:1.4rem; margin:0; }
.admin__user { display:flex; align-items:center; gap:10px; font-size:.9rem; }
.admin__avatar { width:36px; height:36px; border-radius:50%; background:var(--tan); color:#fff; display:grid; place-items:center; font-weight:700; }
.admin__content { padding:30px; }
.stat-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:20px; margin-bottom:28px; }
.stat { background:#fff; border:1px solid var(--line); padding:22px; }
.stat__label { font-size:.8rem; text-transform:uppercase; letter-spacing:.1em; color:var(--muted); }
.stat__value { font-size:2rem; font-weight:600; color:#2c2c2c; margin-top:6px; }
.panel { background:#fff; border:1px solid var(--line); margin-bottom:24px; }
.panel__head { padding:18px 22px; border-bottom:1px solid var(--line); display:flex; justify-content:space-between; align-items:center; }
.panel__head h3 { margin:0; font-size:1.05rem; }
.panel__body { padding:6px 22px 18px; }
table.data { width:100%; border-collapse:collapse; }
table.data th { text-align:left; font-size:.72rem; text-transform:uppercase; letter-spacing:.08em; color:var(--muted); padding:12px 10px; border-bottom:2px solid var(--line); }
table.data td { padding:13px 10px; border-bottom:1px solid var(--line); font-size:.92rem; }
.bar { height:10px; border-radius:999px; background:var(--bg-soft); overflow:hidden; }
.bar > span { display:block; height:100%; background:var(--tan); }

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width: 900px) {
  .nav { display:flex; flex-direction:column; align-items:stretch; min-height:64px; }
  .brand-mid { order:-1; align-self:center; margin:0; padding:10px 0 6px; }
  .brand-mid img { height:40px; width:auto; }
  .nav__group { display:none; width:100%; background:var(--dark); flex-direction:column; gap:0; padding:2px 0 6px; }
  .nav__group.open { display:flex; }
  .nav__group--left, .nav__group--right { justify-content:center; }
  .nav__group a { padding:13px; text-align:center; width:100%; }
  .nav__toggle { display:block; }
  .tiles { grid-template-columns:1fr; }
  .gallery2 { grid-template-columns:repeat(2,1fr); }
  .split { grid-template-columns:1fr; gap:30px; }
  .grid--4,.grid--3,.grid--2,.hours,.stat-grid { grid-template-columns:1fr; }
  .admin { grid-template-columns:1fr; }
  .admin__side { display:none; }
  .hero-slider { height:100vh; height:100dvh; min-height:100svh; }
}

/* ============================================================
   Modernisierung: Bild-Ebenen, Zoom, Ken-Burns, Scroll-Reveal
   ============================================================ */
.slide__bg, .tile__bg, .gallery2__bg {
  position:absolute; inset:0; background-size:cover; background-position:center; z-index:0;
}
.slide__caption { z-index:2; }
.slide::after { z-index:1; }
.slide.is-active .slide__bg { animation:kenburns 8s ease-out both; }

/* Hero-Bilder: großes Motiv (Desktop). WebP wird per .htaccess automatisch ausgeliefert. */
.slide__bg--h1 { background-image:url('/img/hero1.jpg'); }
.slide__bg--h2 { background-image:url('/img/hero2.jpg'); }
.slide__bg--h3 { background-image:url('/img/hero3.jpg'); }
/* Kleinere Hero-Version fürs Handy → schnellerer LCP */
@media (max-width:820px) {
  .slide__bg--h1 { background-image:url('/img/hero1-m.jpg'); }
  .slide__bg--h2 { background-image:url('/img/hero2-m.jpg'); }
  .slide__bg--h3 { background-image:url('/img/hero3-m.jpg'); }
}
@keyframes kenburns { from { transform:scale(1.001); } to { transform:scale(1.09); } }

.tile { overflow:hidden; }
.tile::before { z-index:1; }
.tile__inner { z-index:2; }
.tile__bg { transition:transform .8s ease; }
.tile:hover .tile__bg { transform:scale(1.08); }

.gallery2__item { overflow:hidden; }
.gallery2__bg { transition:transform .8s ease; }
.gallery2__item:hover .gallery2__bg { transform:scale(1.07); }
.gallery2__box { position:relative; z-index:2; }

/* Scroll-Reveal (sanftes Einblenden) */
.reveal { opacity:0; transform:translateY(28px); transition:opacity .8s ease, transform .8s ease; }
.reveal.in { opacity:1; transform:none; }

/* dezente Hover-Verfeinerung an Karten/Buttons */
.btn { transition:all .25s ease; }
.card { transition:transform .25s ease, box-shadow .25s ease; }
.card:hover { transform:translateY(-4px); box-shadow:var(--shadow); }

@media (prefers-reduced-motion: reduce) {
  .reveal { opacity:1; transform:none; transition:none; }
  .slide.is-active .slide__bg { animation:none; }
  .tile__bg, .gallery2__bg { transition:none; }
}

/* ============================================================
   Speisekarte – moderner & übersichtlicher
   ============================================================ */
.menu-intro { text-align:center; max-width:640px; margin:0 auto 40px; }
.menu-cat { background:#fff; border:1px solid var(--line); padding:26px 30px; margin-bottom:26px; box-shadow:var(--shadow); }
.menu-cat > h3 { border-bottom:1px solid var(--tan); }
.menu-item { align-items:baseline; }
.menu-item:last-child { border-bottom:none; }
.menu-item__info { flex:1; }
.menu-item__lead { flex:1; height:1px; border-bottom:1px dotted #d9d2c8; margin:0 10px; transform:translateY(-4px); }
.menu-pdfs { display:grid; grid-template-columns:repeat(4,1fr); gap:14px; }
@media (max-width:760px){ .menu-pdfs{ grid-template-columns:1fr; } }
.pdf-card { display:flex; align-items:center; gap:12px; background:#fff; border:1px solid var(--line); padding:16px 18px; transition:border .2s, box-shadow .2s; }
.pdf-card:hover { border-color:var(--tan); box-shadow:var(--shadow); }
.pdf-card svg { width:26px; height:26px; color:var(--tan-2); flex:none; }
.pdf-card span { text-transform:uppercase; letter-spacing:.08em; font-size:.74rem; font-weight:600; color:#444; }

/* Hero-CTA-Buttons (Anrufen / Reservieren / Speisekarte) */
.hero-cta { display:flex; gap:14px; flex-wrap:wrap; justify-content:center; margin-bottom:14px; }
.hero-menu-btn { }
.slide__caption .btn { backdrop-filter:blur(2px); }
/* nur der sichtbare Slide ist klickbar */
.slide { pointer-events:none; }
.slide.is-active { pointer-events:auto; }
.slider-dots, .hero-cta a, .hero-menu-btn { pointer-events:auto; }
@media (max-width:600px){
  .hero-cta { gap:10px; }
  .slide__caption .btn { padding:11px 22px; font-size:.66rem; }
}

/* ============================================================
   Pop-up / Ankündigung
   ============================================================ */
.popup-overlay {
  position:fixed; inset:0; z-index:2000; display:flex; align-items:center; justify-content:center;
  background:rgba(20,16,14,.55); padding:20px; opacity:0; visibility:hidden; transition:opacity .3s;
}
.popup-overlay.show { opacity:1; visibility:visible; }
.popup {
  background:#fff; max-width:440px; width:100%; border-radius:4px; padding:38px 32px 32px;
  text-align:center; position:relative; box-shadow:0 20px 60px rgba(0,0,0,.35);
  transform:translateY(14px); transition:transform .3s; border-top:4px solid var(--tan);
}
.popup-overlay.show .popup { transform:translateY(0); }
.popup__close {
  position:absolute; top:10px; right:14px; background:none; border:0; cursor:pointer;
  font-size:1.8rem; line-height:1; color:var(--muted);
}
.popup__close:hover { color:var(--dark); }
.popup__title { text-transform:uppercase; letter-spacing:.12em; font-size:1.15rem; font-weight:600; color:#2c2c2c; margin-bottom:12px; }
.popup__body { color:var(--text); font-size:1rem; line-height:1.7; margin-bottom:22px; }
.popup .btn { margin-top:4px; }
.popup__timer { position:absolute; left:0; right:0; bottom:0; height:3px; background:rgba(0,0,0,.06); overflow:hidden; }
.popup__timer span { display:block; height:100%; width:100%; background:var(--tan); }
.popup-overlay.show .popup__timer span { animation:popupbar 12s linear forwards; }
@keyframes popupbar { from { width:100%; } to { width:0%; } }
@media (max-width:600px) {
  .popup-overlay { padding:14px; }
  .popup { padding:34px 22px 26px; max-height:88vh; overflow-y:auto; }
  .popup__title { font-size:1.05rem; }
}

/* ============================================================
   Cookie-Banner (Consent)
   ============================================================ */
.cookie-banner {
  position:fixed; left:0; right:0; bottom:0; z-index:1500;
  background:var(--dark); color:#e6ddd2;
  transform:translateY(100%); transition:transform .35s ease;
  box-shadow:0 -6px 24px rgba(0,0,0,.25);
}
.cookie-banner.show { transform:translateY(0); }
.cookie-banner__inner {
  max-width:1100px; margin:0 auto; padding:16px 22px;
  display:flex; align-items:center; gap:18px; flex-wrap:wrap; justify-content:center;
}
.cookie-banner p { margin:0; font-size:.86rem; line-height:1.6; flex:1; min-width:240px; }
.cookie-banner a { color:var(--tan); text-decoration:underline; }
.cookie-banner a:hover { color:#fff; }
.cookie-banner .btn { flex:none; }
@media (max-width:600px) {
  .cookie-banner__inner { padding:14px 16px; gap:12px; }
  .cookie-banner p { font-size:.8rem; }
}