/* ============================================================
   Gasthof Adler Billafingen — „Es gibt ihn noch."
   Sommer/Winter-Dualität über CSS-Custom-Properties
   ============================================================ */

:root{
  --font-serif: "Fraunces", Georgia, serif;
  --font-sans: "Karla", "Helvetica Neue", Arial, sans-serif;
  --font-hand: "Caveat", cursive;

  --max: 1180px;
  --pad-x: clamp(1.25rem, 4vw, 3rem);
  --radius: 18px;
  --ease: cubic-bezier(.22,.75,.28,1);
}

/* ---------- Saisonale Paletten ---------- */
body[data-season="sommer"]{
  --bg: #f8f1e1;
  --bg-2: #efe3cb;
  --card: #fffaef;
  --ink: #34291b;
  --ink-soft: #70614a;
  --green: #3d5a3a;
  --green-deep: #2b4229;
  --green-board: #253a27;
  --accent: #cf9636;
  --accent-deep: #a87622;
  --line: rgba(52,41,27,.16);
  --shadow: 0 24px 60px -28px rgba(52,41,27,.35);
  --header-bg: rgba(248,241,225,.82);
}

body[data-season="winter"]{
  --bg: #221a12;
  --bg-2: #2a2117;
  --card: #2e2417;
  --ink: #f0e5cd;
  --ink-soft: #b8a886;
  --green: #c98f43;
  --green-deep: #1d1610;
  --green-board: #253a27;
  --accent: #b0563e;
  --accent-deep: #d99a55;
  --line: rgba(240,229,205,.16);
  --shadow: 0 24px 60px -28px rgba(0,0,0,.6);
  --header-bg: rgba(34,26,18,.82);
}

/* ---------- Basis ---------- */
*,*::before,*::after{ box-sizing: border-box; margin: 0; padding: 0; }

html{ scroll-behavior: smooth; }

body{
  font-family: var(--font-sans);
  background: var(--bg);
  color: var(--ink);
  line-height: 1.7;
  font-size: 1.05rem;
  transition: background .8s var(--ease), color .8s var(--ease);
  overflow-x: hidden;
}

img{ display: block; max-width: 100%; }
a{ color: inherit; }
em{ font-style: italic; }

.hand{
  font-family: var(--font-hand);
  font-weight: 600;
  font-size: 1.35em;
  line-height: 1.2;
}

.kicker{
  font-size: .78rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--accent-deep);
  margin-bottom: 1.1rem;
}

h2{
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: clamp(2rem, 4.6vw, 3.3rem);
  line-height: 1.12;
  letter-spacing: -.015em;
}

section{ padding: clamp(4rem, 9vw, 7.5rem) var(--pad-x); }

.section-head{
  max-width: var(--max);
  margin: 0 auto clamp(2.5rem, 5vw, 4rem);
}
.section-sub{ margin-top: 1rem; color: var(--ink-soft); max-width: 44ch; }
.section-head--light{ color: #f0e5cd; }
.section-head--light .kicker{ color: var(--accent); }

/* ---------- Reveal-Animation ---------- */
.reveal{
  opacity: 0;
  transform: translateY(26px);
  transition: opacity .9s var(--ease), transform .9s var(--ease);
}
.reveal.in{ opacity: 1; transform: none; }

/* ============================================================
   HEADER
   ============================================================ */
.site-header{
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 50;
  display: flex;
  align-items: center;
  gap: 1.5rem;
  padding: .7rem var(--pad-x);
  background: var(--header-bg);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line);
  transition: background .8s var(--ease);
}

.brand{
  display: flex;
  align-items: center;
  gap: .7rem;
  text-decoration: none;
}
.brand-eagle{ width: 44px; height: auto; }
.brand-name{
  font-family: var(--font-serif);
  font-size: 1.25rem;
  font-weight: 600;
  line-height: 1.1;
  display: flex;
  flex-direction: column;
}
.brand-name em{ color: var(--accent-deep); font-style: normal; }
.brand-name small{
  font-family: var(--font-sans);
  font-size: .66rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-soft);
  font-weight: 600;
}

.main-nav{
  margin-left: auto;
  display: flex;
  gap: 1.6rem;
}
.main-nav a{
  text-decoration: none;
  font-size: .92rem;
  font-weight: 600;
  color: var(--ink-soft);
  position: relative;
  padding: .2rem 0;
  transition: color .25s;
}
.main-nav a::after{
  content: "";
  position: absolute;
  left: 0; bottom: -2px;
  width: 0; height: 2px;
  background: var(--accent-deep);
  transition: width .3s var(--ease);
}
.main-nav a:hover{ color: var(--ink); }
.main-nav a:hover::after{ width: 100%; }

.header-phone{
  text-decoration: none;
  text-align: right;
  line-height: 1.25;
  padding: .45rem 1rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  transition: background .25s, border-color .25s;
}
.header-phone:hover{ background: var(--card); border-color: var(--accent-deep); }
.phone-label{
  display: block;
  font-size: .62rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--ink-soft);
  font-weight: 700;
}
.phone-number{
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: 1rem;
}

.nav-toggle{
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  padding: .5rem;
  flex-direction: column;
  gap: 5px;
}
.nav-toggle span{
  width: 24px; height: 2px;
  background: var(--ink);
  transition: transform .3s var(--ease), opacity .3s;
}
body.nav-open .nav-toggle span:nth-child(1){ transform: translateY(7px) rotate(45deg); }
body.nav-open .nav-toggle span:nth-child(2){ opacity: 0; }
body.nav-open .nav-toggle span:nth-child(3){ transform: translateY(-7px) rotate(-45deg); }

/* ============================================================
   HERO
   ============================================================ */
.hero{
  position: relative;
  min-height: 100svh;
  display: flex;
  align-items: flex-end;
  padding: 0 var(--pad-x) clamp(4.5rem, 9vh, 7rem);
  color: #fdf6e7;
}

.hero-media, .hero-img, .hero-scrim{
  position: absolute;
  inset: 0;
}
.hero-media{ z-index: -1; overflow: hidden; }
.hero-img{
  width: 100%; height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 1.2s var(--ease), transform 8s var(--ease);
  transform: scale(1.04);
}
body[data-season="sommer"] .hero-img--sommer{ opacity: 1; transform: scale(1); }
body[data-season="winter"] .hero-img--winter{ opacity: 1; transform: scale(1); }

.hero-scrim{
  background: linear-gradient(to top, rgba(20,14,8,.78) 0%, rgba(20,14,8,.28) 45%, rgba(20,14,8,.18) 100%);
}

.hero-inner{
  position: relative;
  max-width: var(--max);
  margin: 0 auto;
  width: 100%;
}
.hero-eyebrow .hand{
  color: var(--accent);
  text-shadow: 0 2px 18px rgba(0,0,0,.5);
  font-size: clamp(1.5rem, 3vw, 2rem);
}
.hero-title{
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: clamp(3.2rem, 9vw, 6.8rem);
  line-height: 1.02;
  letter-spacing: -.02em;
  margin: .4rem 0 1.1rem;
  text-shadow: 0 4px 40px rgba(0,0,0,.45);
}
.hero-title em{ font-style: italic; color: var(--accent); }
.hero-sub{
  max-width: 46ch;
  font-size: clamp(1rem, 1.6vw, 1.2rem);
  color: rgba(253,246,231,.92);
  text-shadow: 0 2px 16px rgba(0,0,0,.5);
  min-height: 3.4em;
}
.season-line{ display: none; }
body[data-season="sommer"] .season-line--sommer{ display: block; }
body[data-season="winter"] .season-line--winter{ display: block; }

.hero-actions{
  display: flex;
  gap: .9rem;
  margin-top: 1.8rem;
  flex-wrap: wrap;
}

.btn{
  display: inline-block;
  text-decoration: none;
  font-weight: 700;
  font-size: .95rem;
  padding: .85rem 1.9rem;
  border-radius: 999px;
  transition: transform .25s var(--ease), background .25s, color .25s, border-color .25s;
}
.btn:hover{ transform: translateY(-2px); }
.btn--solid{
  background: var(--accent);
  color: #241a0c;
}
.btn--solid:hover{ background: var(--accent-deep); color: #fff6e0; }
.btn--ghost{
  border: 1px solid rgba(253,246,231,.55);
  color: #fdf6e7;
}
.btn--ghost:hover{ background: rgba(253,246,231,.14); }
.btn--big{ font-size: 1.05rem; padding: 1.05rem 2.6rem; }

/* Jahreszeiten-Schalter */
.season-switch{
  position: absolute;
  right: var(--pad-x);
  bottom: clamp(4.5rem, 9vh, 7rem);
  display: flex;
  background: rgba(20,14,8,.5);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(253,246,231,.25);
  border-radius: 999px;
  padding: 4px;
  gap: 4px;
}
.season-btn{
  display: flex;
  align-items: center;
  gap: .45rem;
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: .85rem;
  color: rgba(253,246,231,.75);
  background: transparent;
  border: none;
  border-radius: 999px;
  padding: .5rem 1.1rem;
  cursor: pointer;
  transition: background .3s var(--ease), color .3s;
}
.season-btn.is-active{
  background: var(--accent);
  color: #241a0c;
}

.scroll-hint{
  position: absolute;
  left: 50%;
  bottom: 1.4rem;
  transform: translateX(-50%);
  width: 26px; height: 42px;
  border: 2px solid rgba(253,246,231,.5);
  border-radius: 999px;
}
.scroll-hint span{
  position: absolute;
  left: 50%; top: 7px;
  width: 4px; height: 8px;
  margin-left: -2px;
  border-radius: 4px;
  background: rgba(253,246,231,.8);
  animation: hint 2s infinite;
}
@keyframes hint{
  0%{ transform: translateY(0); opacity: 1; }
  70%{ transform: translateY(12px); opacity: 0; }
  100%{ transform: translateY(0); opacity: 0; }
}

/* ============================================================
   INTRO
   ============================================================ */
.intro{ background: var(--bg); }
.intro-inner{
  max-width: 56rem;
  margin: 0 auto;
  text-align: center;
}
.intro-lede{
  font-family: var(--font-serif);
  font-size: clamp(1.35rem, 2.6vw, 1.9rem);
  line-height: 1.5;
  font-weight: 400;
}
.intro-lede strong{ color: var(--accent-deep); font-weight: 600; }

/* ============================================================
   ZWEI SEELEN
   ============================================================ */
.seelen{ background: var(--bg-2); transition: background .8s var(--ease); }
.seelen-grid{
  max-width: var(--max);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(1.5rem, 3vw, 2.5rem);
}
.seele-card{
  background: var(--card);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow);
  cursor: pointer;
  transition: transform .4s var(--ease), background .8s var(--ease);
}
.seele-card:hover{ transform: translateY(-6px); }
.seele-card figure{ overflow: hidden; aspect-ratio: 16/9; }
.seele-card img{
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform .8s var(--ease);
}
.seele-card:hover img{ transform: scale(1.05); }
.seele-body{ padding: 1.6rem 1.8rem 2rem; }
.seele-body h3 .hand{ color: var(--accent-deep); font-size: 1.7rem; }
.seele-body p{ margin-top: .6rem; color: var(--ink-soft); }

/* Adler-Trenner */
.eagle-divider{
  text-align: center;
  padding: clamp(2.5rem, 5vw, 4rem) var(--pad-x);
  background: var(--bg);
  transition: background .8s var(--ease);
}
.eagle-divider img{
  width: clamp(70px, 9vw, 110px);
  margin: 0 auto;
  transform: rotate(-4deg);
  filter: drop-shadow(0 8px 18px rgba(52,41,27,.25));
}
body[data-season="winter"] .eagle-divider img{
  filter: drop-shadow(0 8px 18px rgba(0,0,0,.6)) brightness(1.08);
}

/* ============================================================
   KÜCHE
   ============================================================ */
.split{
  max-width: var(--max);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
}
.split-text p{ margin-top: 1.2rem; color: var(--ink-soft); }
.split-text p:first-of-type{ margin-top: 1.6rem; }
.split-text strong{ color: var(--ink); }

.trust-badges{
  list-style: none;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: .9rem;
  margin-top: 2.2rem;
}
.trust-badges li{
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 1rem 1.1rem;
  transition: background .8s var(--ease);
}
.trust-badges strong{
  display: block;
  font-family: var(--font-serif);
  font-size: .98rem;
  color: var(--accent-deep);
}
.trust-badges span{ font-size: .82rem; color: var(--ink-soft); }

.split-media{
  position: relative;
  border-radius: var(--radius);
  overflow: visible;
}
.split-media img{
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  aspect-ratio: 4/3.4;
  object-fit: cover;
  width: 100%;
}
.split-media figcaption{
  position: absolute;
  left: -1rem;
  bottom: -1.4rem;
  background: var(--accent);
  color: #241a0c;
  padding: .35rem 1.2rem;
  border-radius: 999px;
  transform: rotate(-2.5deg);
  box-shadow: 0 10px 24px -8px rgba(0,0,0,.35);
}

/* ============================================================
   WOCHENKARTE — Kreidetafel
   ============================================================ */
.wochenkarte-section{
  background: var(--green-deep);
  transition: background .8s var(--ease);
}
.chalkboard{
  max-width: 720px;
  margin: 0 auto;
  background: var(--green-board);
  color: #f2ead4;
  border-radius: 10px;
  padding: clamp(2rem, 5vw, 3.5rem) clamp(1.6rem, 5vw, 3.2rem);
  transform: rotate(-.7deg);
  box-shadow:
    inset 0 0 0 2px rgba(242,234,212,.22),
    inset 0 0 60px rgba(0,0,0,.35),
    0 30px 60px -20px rgba(0,0,0,.5);
  border: 10px solid #6b4a2b;
}
.chalk-date{
  text-align: center;
  color: var(--accent);
  font-size: 1.6rem;
  margin-bottom: 1.4rem;
}
.chalk-list{ list-style: none; }
.chalk-list li{
  display: flex;
  align-items: baseline;
  gap: .8rem;
  padding: .75rem 0;
  border-bottom: 1px dashed rgba(242,234,212,.25);
}
.chalk-list li:last-child{ border-bottom: none; }
.chalk-dish{
  font-family: var(--font-hand);
  font-size: clamp(1.25rem, 2.6vw, 1.55rem);
  font-weight: 600;
  flex: 1;
}
.chalk-dish em{
  font-family: var(--font-sans);
  font-size: .68rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--accent);
  font-style: normal;
  vertical-align: middle;
}
.chalk-price{
  font-family: var(--font-serif);
  font-size: 1.05rem;
  white-space: nowrap;
}
.chalk-note{
  text-align: right;
  margin-top: 1.2rem;
  color: rgba(242,234,212,.65);
}

/* ============================================================
   SPEISEKARTE
   ============================================================ */
.menu-grid{
  max-width: var(--max);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.25fr .75fr;
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: start;
}
.menu-item{ padding: 1.3rem 0; border-bottom: 1px solid var(--line); }
.menu-item:last-child{ border-bottom: none; }
.menu-item-head{
  display: flex;
  align-items: baseline;
  gap: .8rem;
}
.menu-item-head h3{
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: clamp(1.15rem, 2vw, 1.4rem);
  white-space: nowrap;
}
.leader{
  flex: 1;
  border-bottom: 2px dotted var(--line);
  transform: translateY(-4px);
  min-width: 2rem;
}
.price{
  font-family: var(--font-serif);
  font-weight: 600;
  color: var(--accent-deep);
  font-size: 1.1rem;
}
.menu-item p{ margin-top: .3rem; color: var(--ink-soft); font-size: .95rem; }
.menu-item p em{
  font-style: normal;
  font-size: .68rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--accent-deep);
}

.menu-aside figure{
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow);
}
.menu-aside img{ aspect-ratio: 3/2.6; object-fit: cover; width: 100%; }
.menu-aside blockquote{
  margin-top: 1.6rem;
  font-family: var(--font-serif);
  font-style: italic;
  font-size: clamp(1.2rem, 2vw, 1.45rem);
  line-height: 1.45;
  padding-left: 1.2rem;
  border-left: 3px solid var(--accent);
}
.menu-aside cite{
  display: block;
  margin-top: .6rem;
  font-family: var(--font-sans);
  font-style: normal;
  font-size: .8rem;
  color: var(--ink-soft);
  letter-spacing: .06em;
}
.menu-foot{
  max-width: var(--max);
  margin: 2.5rem auto 0;
  font-size: .88rem;
  color: var(--ink-soft);
}

/* ============================================================
   RÄUME
   ============================================================ */
.raeume{ background: var(--bg-2); transition: background .8s var(--ease); }
.raeume-grid{
  max-width: var(--max);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(1.5rem, 3vw, 2.5rem);
}
.raum-card{
  background: var(--card);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow);
  transition: background .8s var(--ease), transform .4s var(--ease);
}
.raum-card:hover{ transform: translateY(-5px); }
.raum-card--wide{ grid-row: span 2; display: flex; flex-direction: column; }
.raum-card--wide figure{ flex: 1; }
.raum-card--wide img{
  width: 100%; height: 100%;
  min-height: 320px;
  object-fit: cover;
}
.raum-body{ padding: 1.5rem 1.8rem 1.9rem; }
.raum-body h3{
  font-family: var(--font-serif);
  font-size: 1.35rem;
  font-weight: 600;
  margin-bottom: .5rem;
}
.raum-body p{ color: var(--ink-soft); font-size: .97rem; }
.raeume-hint{
  text-align: center;
  margin-top: 2.5rem;
  color: var(--accent-deep);
  font-size: 1.6rem;
}

/* ============================================================
   BESUCH
   ============================================================ */
.besuch{
  background: var(--green-deep);
  color: #f0e5cd;
  transition: background .8s var(--ease);
}
.besuch .section-sub{ color: rgba(240,229,205,.7); }
.besuch-grid{
  max-width: var(--max);
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1.2rem, 2.5vw, 2rem);
}
.info-card{
  background: rgba(240,229,205,.06);
  border: 1px solid rgba(240,229,205,.18);
  border-radius: var(--radius);
  padding: 1.8rem 1.7rem;
}
.info-card h3{
  font-family: var(--font-serif);
  font-size: 1.3rem;
  font-weight: 600;
  color: var(--accent);
  margin-bottom: 1rem;
}
.hours{ width: 100%; border-collapse: collapse; }
.hours th, .hours td{
  text-align: left;
  padding: .55rem 0;
  border-bottom: 1px dashed rgba(240,229,205,.2);
  vertical-align: top;
  font-size: .95rem;
}
.hours tr:last-child th, .hours tr:last-child td{ border-bottom: none; }
.hours th{ font-weight: 600; padding-right: 1rem; }
.hours td{ color: rgba(240,229,205,.85); text-align: right; }
.info-note{
  margin-top: 1rem;
  font-size: .88rem;
  color: rgba(240,229,205,.65);
}
.info-big a{
  font-family: var(--font-serif);
  font-size: clamp(1.4rem, 2.4vw, 1.8rem);
  font-weight: 600;
  color: var(--accent);
  text-decoration: none;
}
.info-big a:hover{ text-decoration: underline; }
.info-card p{ font-size: .95rem; color: rgba(240,229,205,.85); }
.info-card p a{ color: var(--accent); }
.info-address{ margin-top: 1rem; line-height: 1.6; }
.besuch-cta{ text-align: center; margin-top: 3rem; }

/* ============================================================
   FOOTER
   ============================================================ */
.site-footer{
  background: var(--bg);
  text-align: center;
  padding: clamp(3rem, 6vw, 5rem) var(--pad-x) 3rem;
  transition: background .8s var(--ease);
}
.footer-eagle{ width: 90px; margin: 0 auto 1rem; }
.footer-motto{
  font-size: 2rem;
  color: var(--accent-deep);
  margin-bottom: 1rem;
}
.footer-line{ color: var(--ink-soft); font-size: .95rem; }
.footer-line a{ color: var(--accent-deep); text-decoration: none; }
.footer-line a:hover{ text-decoration: underline; }
.footer-small{
  margin-top: 1.4rem;
  font-size: .78rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink-soft);
  opacity: .75;
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 1020px){
  .main-nav{ display: none; }
  .header-phone{ margin-left: auto; }
  .nav-toggle{ display: flex; }
  body.nav-open .main-nav{
    display: flex;
    position: absolute;
    top: 100%; left: 0; right: 0;
    flex-direction: column;
    background: var(--bg);
    border-bottom: 1px solid var(--line);
    padding: 1rem var(--pad-x) 1.4rem;
    gap: .9rem;
    box-shadow: var(--shadow);
  }
  .split, .menu-grid{ grid-template-columns: 1fr; }
  .menu-aside{ max-width: 520px; }
  .besuch-grid{ grid-template-columns: 1fr; max-width: 560px; }
  .seelen-grid, .raeume-grid{ grid-template-columns: 1fr; }
  .raum-card--wide{ grid-row: auto; }
}

@media (max-width: 640px){
  .brand-name small{ display: none; }
  .header-phone{ padding: .4rem .8rem; }
  .phone-label{ display: none; }
  .phone-number{ font-size: .9rem; }
  .season-switch{
    right: 50%;
    transform: translateX(50%);
    bottom: 4.2rem;
  }
  .hero{ padding-bottom: 7.5rem; }
  .trust-badges{ grid-template-columns: 1fr; }
  .menu-item-head h3{ white-space: normal; }
  .chalkboard{ transform: none; border-width: 7px; }
}

@media (prefers-reduced-motion: reduce){
  *{ animation: none !important; transition: none !important; }
  .reveal{ opacity: 1; transform: none; }
}