/* ============================================================
   Kolibri – Pizzeria & Restaurant, Horn
   Farben aus dem Logo-Schild (Bordeaux) und der Speisekarte (Creme).
   ============================================================ */

:root{
  --wine:        #6a1f28;   /* Bordeaux aus dem Logo-Schild */
  --wine-deep:   #571a21;   /* dunkler für Bänder/Footer   */
  --wine-soft:   #7d2a33;   /* aufgehellt für Akzente      */
  --cream:       #ece7df;   /* warmes Off-White wie Menü-Hintergrund */
  --paper:       #f3efe7;   /* Menü-Papier, minimal heller */
  --cream-warm:  #e7dcc6;   /* warme Creme (Schrift auf Wein) */
  --ink:         #3a2723;   /* dunkles Warmbraun für Fließtext */
  --gold:        #b0894c;   /* sehr sparsamer gedämpfter Akzent */
  --line:        rgba(106,31,40,.30);

  --font-display: "IM Fell English", Georgia, serif;
  --font-caps:    "IM Fell English SC", Georgia, serif;
  --font-body:    "EB Garamond", Georgia, serif;

  --wrap: 46rem;
}

*{ box-sizing:border-box; }

html{ scroll-behavior:smooth; }

body{
  margin:0;
  background:var(--cream);
  color:var(--ink);
  font-family:var(--font-body);
  font-size:clamp(1.02rem, 0.95rem + 0.35vw, 1.18rem);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

/* dezente Papier-Anmutung statt Farbverlauf */
body::before{
  content:"";
  position:fixed; inset:0;
  pointer-events:none; z-index:-1;
  background:
    radial-gradient(circle at 18% 12%, rgba(106,31,40,.035), transparent 42%),
    radial-gradient(circle at 82% 88%, rgba(106,31,40,.03), transparent 46%);
}

a{ color:var(--wine); }

.skip-link{
  position:absolute; left:-9999px; top:0;
  background:var(--wine); color:var(--cream-warm);
  padding:.6rem 1rem; z-index:50; border-radius:0 0 4px 0;
}
.skip-link:focus{ left:0; }

:focus-visible{ outline:2px solid var(--gold); outline-offset:3px; }

/* ---------- Hero ---------- */
.hero{
  background:var(--wine);
  color:var(--cream-warm);
  text-align:center;
  padding:clamp(3rem,7vw,5.5rem) 1.25rem clamp(2.4rem,5vw,3.6rem);
  border-bottom:6px solid var(--wine-deep);
  position:relative;
}
.hero-inner{ max-width:44rem; margin:0 auto; }

.hero-eyebrow{
  font-family:var(--font-caps);
  letter-spacing:.28em;
  text-transform:uppercase;
  font-size:.82rem;
  margin:0 0 .8rem;
  color:var(--cream-warm);
  opacity:.85;
}

.wordmark{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:.15em;
  margin:0;
  line-height:1;
}
.wordmark-text{
  font-family:var(--font-display);
  font-weight:400;
  font-size:clamp(4.2rem, 14vw, 9rem);
  color:var(--cream-warm);
  letter-spacing:.01em;
  /* leichte Unregelmäßigkeit – nicht perfekt gerade */
  transform:rotate(-1.2deg);
}
.wordmark-bird{
  width:clamp(3rem,9vw,5.5rem);
  height:auto;
  color:var(--cream-warm);
  margin-bottom:clamp(1.4rem,4vw,3rem);
  flex:0 0 auto;
}

.hero-sub{
  font-style:italic;
  font-size:clamp(1.05rem,2.4vw,1.35rem);
  margin:.7rem auto 1.7rem;
  max-width:32rem;
  color:var(--cream-warm);
  opacity:.9;
}

.hero-nav{
  font-family:var(--font-caps);
  font-size:.86rem;
  letter-spacing:.12em;
  text-transform:uppercase;
}
.hero-nav a{
  color:var(--cream-warm);
  text-decoration:none;
  padding-bottom:2px;
  border-bottom:1px solid transparent;
  transition:border-color .2s;
}
.hero-nav a:hover{ border-color:var(--cream-warm); }
.hero-nav .sep{ margin:0 .55rem; opacity:.5; }

/* ---------- gemeinsame Section-Bausteine ---------- */
.section-title{
  font-family:var(--font-display);
  font-weight:400;
  font-size:clamp(1.9rem,5vw,2.9rem);
  color:var(--wine);
  text-align:center;
  margin:0 0 1.2rem;
  line-height:1.1;
}
.section-title.light{ color:var(--cream-warm); }

/* kleine Zierlinie mit Kolibri in der Mitte */
.rule-bird{
  display:flex; align-items:center; justify-content:center;
  gap:1rem; margin:0 auto 1.6rem; max-width:26rem;
}
.rule-bird .rule{
  height:1px; flex:1 1 auto;
  background:linear-gradient(90deg,transparent,var(--wine));
}
.rule-bird .rule:last-child{
  background:linear-gradient(90deg,var(--wine),transparent);
}
.rule-bird.light .rule{ background:linear-gradient(90deg,transparent,var(--cream-warm)); }
.rule-bird.light .rule:last-child{ background:linear-gradient(90deg,var(--cream-warm),transparent); }
.mini-bird{ width:2.4rem; height:auto; color:var(--wine); flex:0 0 auto; }
.rule-bird.light .mini-bird{ color:var(--cream-warm); }

/* ---------- Willkommen ---------- */
.welcome{
  max-width:38rem;
  margin:0 auto;
  padding:clamp(3rem,7vw,4.5rem) 1.5rem clamp(2rem,4vw,3rem);
  text-align:center;
}
.welcome-text{
  font-size:clamp(1.12rem,2.6vw,1.32rem);
  line-height:1.75;
  margin:0 auto;
  max-width:34rem;
}
.welcome-note{
  font-style:italic;
  color:var(--wine);
  margin-top:1.4rem;
  font-size:1.02rem;
}

/* ---------- Speisekarte ---------- */
.menu{
  padding:clamp(1rem,3vw,2.5rem) 1rem clamp(3rem,6vw,4.5rem);
}
.menu-paper{
  max-width:var(--wrap);
  margin:0 auto;
  background:var(--paper);
  border:1px solid var(--line);
  box-shadow:0 1px 0 rgba(255,255,255,.5) inset;
  padding:clamp(1.6rem,5vw,3.4rem) clamp(1.2rem,5vw,3.4rem);
}

.menu-masthead{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:1rem;
  border-bottom:3px double var(--wine);
  padding-bottom:.7rem;
  margin-bottom:1.6rem;
}
.menu-masthead.second{
  margin-top:3rem;
  justify-content:center;
  text-align:center;
}
.menu-title{
  font-family:var(--font-display);
  font-weight:400;
  color:var(--wine);
  font-size:clamp(2.1rem,6vw,3.2rem);
  line-height:1;
  margin:0;
  display:flex; align-items:center; gap:.4rem;
}
.masthead-bird{ width:clamp(1.8rem,5vw,2.6rem); height:auto; color:var(--wine); }

.price-legend{
  display:flex; gap:0; flex:0 0 auto;
  font-family:var(--font-caps);
  text-transform:uppercase;
  letter-spacing:.06em;
  font-size:.9rem;
  color:var(--wine);
}
.price-legend span{ width:4.6rem; text-align:right; }

/* Gerichte */
.dishlist{ list-style:none; margin:0; padding:0; }
.dish{ margin:0 0 1.15rem; }

.dish-line{
  display:flex;
  align-items:baseline;
  gap:.4rem;
}
.dish-name{
  flex:0 1 auto;
  font-weight:600;
  font-size:1.12rem;
  color:var(--ink);
}
.num{ color:var(--wine); font-weight:600; }
.allergens{
  font-weight:400;
  font-size:.74em;
  color:var(--wine-soft);
  letter-spacing:.02em;
  white-space:nowrap;
}
.dots{
  flex:1 1 auto;
  border-bottom:2px dotted var(--line);
  transform:translateY(-.28em);
  min-width:1.5rem;
}
.p{
  flex:0 0 4.6rem;
  text-align:right;
  font-variant-numeric:tabular-nums;
  white-space:nowrap;
  color:var(--wine);
  font-weight:500;
}
.p.klein{ color:var(--ink); opacity:.8; }

.dish-desc{
  margin:.15rem 0 0;
  font-style:italic;
  font-size:.98rem;
  color:var(--ink);
  opacity:.82;
  max-width:40ch;
  line-height:1.45;
}
.surcharge{ font-style:normal; color:var(--wine); white-space:nowrap; }

.pizza-hint{
  text-align:center;
  font-style:italic;
  color:var(--wine);
  margin:1.6rem 0 0;
  font-size:1.02rem;
}

/* Band (Extras) auf Wein */
.band{
  background:var(--wine);
  color:var(--cream-warm);
  margin:2.4rem -0.4rem 0;
  padding:1.4rem clamp(1.2rem,4vw,2.2rem) 1.6rem;
}
.band-title{
  font-family:var(--font-caps);
  text-transform:uppercase;
  letter-spacing:.14em;
  text-align:center;
  font-size:1.15rem;
  margin:0 0 1rem;
  color:var(--cream-warm);
  font-weight:400;
}
.extras{ list-style:none; margin:0; padding:0; max-width:36rem; margin-inline:auto; }
.extras li{
  display:flex; align-items:baseline; gap:.4rem;
  margin:.5rem 0;
}
.ex-name{ flex:0 1 auto; }
.extras .dots{ border-bottom-color:rgba(231,220,198,.4); }
.extras .p{ color:var(--cream-warm); opacity:1; flex-basis:auto; }

/* Speisen-Liste: mehr Luft für lange Beschreibungen */
.speisenlist .dish-desc{ max-width:52ch; }
.note-row{ text-align:center; margin:.3rem 0 1.3rem; }
.wurstel-note{
  font-style:italic;
  color:var(--wine);
  font-size:.95rem;
  margin:0;
}

/* Saucen */
.sauces{ text-align:center; margin-top:2.8rem; }
.band-title.dark{ color:var(--wine); letter-spacing:.12em; }
.sauce-list{
  list-style:none; padding:0; margin:0 0 .4rem;
  font-size:1.1rem;
}
.sauce-list li{ margin:.35rem 0; font-style:italic; }
.sauce-allergens{
  font-size:.78rem; letter-spacing:.06em;
  color:var(--wine-soft); margin:.2rem 0 0;
}

.last-order{
  text-align:center;
  margin:2.4rem 0 0;
  padding-top:1.4rem;
  border-top:1px solid var(--line);
  font-style:italic;
  color:var(--wine);
}

/* ---------- Kontakt ---------- */
.contact{
  background:var(--wine);
  color:var(--cream-warm);
  padding:clamp(3rem,7vw,4.8rem) 1.25rem clamp(3rem,6vw,4.2rem);
  border-top:6px solid var(--wine-deep);
}
.contact-grid{
  max-width:44rem;
  margin:0 auto;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:clamp(1.6rem,5vw,3.4rem);
}
.contact-block h3{
  font-family:var(--font-caps);
  text-transform:uppercase;
  letter-spacing:.14em;
  font-size:1rem;
  font-weight:400;
  margin:0 0 1rem;
  padding-bottom:.5rem;
  border-bottom:1px solid rgba(231,220,198,.3);
  color:var(--cream-warm);
}

.hours{ width:100%; border-collapse:collapse; }
.hours th, .hours td{
  text-align:left; padding:.42rem 0; vertical-align:top;
  border-bottom:1px dotted rgba(231,220,198,.22);
}
.hours th{ font-weight:600; padding-right:1rem; white-space:nowrap; }
.hours td{ text-align:right; font-variant-numeric:tabular-nums; }
.hours-note{
  margin:.9rem 0 0; font-style:italic; font-size:.92rem; opacity:.8;
}

address{ font-style:normal; display:flex; flex-direction:column; gap:.55rem; }
.addr-name{ font-weight:600; }
.addr-line{
  color:var(--cream-warm); text-decoration:none; line-height:1.4;
  border-bottom:1px solid transparent; width:max-content;
}
.addr-line:hover{ border-color:var(--cream-warm); }
.phone{
  font-family:var(--font-display);
  font-size:1.5rem;
  color:var(--cream-warm);
  text-decoration:none;
  width:max-content;
}
.phone:hover{ text-decoration:underline; }
.pay-note{ font-style:italic; font-size:.92rem; opacity:.82; }
.maps-link{
  display:inline-block; margin-top:1rem;
  color:var(--cream-warm); text-decoration:none;
  border-bottom:1px solid rgba(231,220,198,.5);
  padding-bottom:2px; width:max-content;
  font-size:.95rem;
}
.maps-link:hover{ border-color:var(--cream-warm); }

/* ---------- Footer ---------- */
.site-footer{
  background:var(--wine-deep);
  color:var(--cream-warm);
  text-align:center;
  padding:2.6rem 1.25rem 2.8rem;
}
.footer-bird{ width:2.8rem; height:auto; color:var(--cream-warm); opacity:.9; }
.footer-word{
  font-family:var(--font-display);
  font-size:2.2rem;
  margin:.2rem 0 .4rem;
  color:var(--cream-warm);
  transform:rotate(-1deg);
}
.footer-line{ margin:.2rem 0; font-size:.95rem; opacity:.85; }
.footer-legal{
  margin:1.1rem 0 .2rem;
  font-family:var(--font-caps);
  font-size:.82rem;
  letter-spacing:.1em;
  text-transform:uppercase;
}
.footer-legal a{
  color:var(--cream-warm);
  text-decoration:none;
  border-bottom:1px solid transparent;
  padding-bottom:1px;
  transition:border-color .2s;
}
.footer-legal a:hover{ border-color:var(--cream-warm); }
.footer-legal .sep{ margin:0 .5rem; opacity:.5; }
.footer-copy{ margin:.8rem 0 0; font-size:.82rem; opacity:.6; }

/* ---------- Rechtsseiten (Impressum / Datenschutz) ---------- */
.legal-top{
  background:var(--wine);
  color:var(--cream-warm);
  text-align:center;
  padding:clamp(2rem,5vw,3rem) 1.25rem clamp(1.6rem,3vw,2.2rem);
  border-bottom:6px solid var(--wine-deep);
}
.legal-top .back-link{
  display:inline-block;
  font-family:var(--font-caps);
  text-transform:uppercase;
  letter-spacing:.14em;
  font-size:.8rem;
  color:var(--cream-warm);
  text-decoration:none;
  opacity:.85;
  margin-bottom:1rem;
  border-bottom:1px solid transparent;
  padding-bottom:2px;
}
.legal-top .back-link:hover{ border-color:var(--cream-warm); opacity:1; }
.legal-top .wordmark{ justify-content:center; }
.legal-top .wordmark-text{ font-size:clamp(2.6rem,8vw,4.2rem); }
.legal-top .wordmark-bird{ width:clamp(2rem,5vw,3rem); margin-bottom:clamp(.8rem,2vw,1.4rem); }

.legal{
  max-width:44rem;
  margin:0 auto;
  padding:clamp(2.4rem,6vw,4rem) 1.5rem clamp(3rem,6vw,4.5rem);
}
.legal h1{
  font-family:var(--font-display);
  font-weight:400;
  color:var(--wine);
  font-size:clamp(2rem,6vw,2.9rem);
  margin:0 0 .4rem;
  line-height:1.1;
}
.legal .legal-intro{
  font-style:italic;
  color:var(--wine);
  margin:0 0 2.2rem;
}
.legal h2{
  font-family:var(--font-caps);
  text-transform:uppercase;
  letter-spacing:.1em;
  font-size:1.02rem;
  color:var(--wine);
  margin:2rem 0 .6rem;
  padding-bottom:.4rem;
  border-bottom:1px solid var(--line);
}
.legal p{ margin:.3rem 0; }
.legal dl{ margin:.4rem 0 1rem; }
.legal dt{
  font-weight:600;
  color:var(--ink);
  margin-top:.7rem;
}
.legal dd{
  margin:.1rem 0 0;
  color:var(--ink);
}
/* Platzhalter für leere Demo-Felder */
.legal .blank{
  display:inline-block;
  min-width:12rem;
  border-bottom:1px dotted var(--line);
  color:transparent;
}
.legal .placeholder{
  font-style:italic;
  opacity:.55;
}

/* ---------- Responsive ---------- */
@media (max-width:640px){
  .menu-masthead{ align-items:center; }
  .price-legend span{ width:3.6rem; }
  .p{ flex-basis:3.6rem; }
  .contact-grid{ grid-template-columns:1fr; }
  .dish-name{ font-size:1.06rem; }
  .band{ margin-inline:-1rem; }
}

@media (max-width:380px){
  .price-legend span{ width:3rem; }
  .p{ flex-basis:3rem; font-size:.95rem; }
  .allergens{ display:block; margin-top:.1rem; }
}

/* sanftes Einblenden – respektiert reduzierte Bewegung */
@media (prefers-reduced-motion:no-preference){
  .reveal{ opacity:0; transform:translateY(14px); transition:opacity .7s ease, transform .7s ease; }
  .reveal.is-visible{ opacity:1; transform:none; }
}