@font-face{font-family:'Alegreya Sans';font-style:normal;font-weight:400;font-display:swap;src:url(schrift/AlegreyaSans-400-greek.woff2) format('woff2');unicode-range:U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF}
@font-face{font-family:'Alegreya Sans';font-style:normal;font-weight:400;font-display:swap;src:url(schrift/AlegreyaSans-400-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Alegreya Sans';font-style:normal;font-weight:400;font-display:swap;src:url(schrift/AlegreyaSans-400-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Alegreya Sans';font-style:normal;font-weight:500;font-display:swap;src:url(schrift/AlegreyaSans-500-greek.woff2) format('woff2');unicode-range:U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF}
@font-face{font-family:'Alegreya Sans';font-style:normal;font-weight:500;font-display:swap;src:url(schrift/AlegreyaSans-500-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Alegreya Sans';font-style:normal;font-weight:500;font-display:swap;src:url(schrift/AlegreyaSans-500-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Alegreya Sans';font-style:normal;font-weight:700;font-display:swap;src:url(schrift/AlegreyaSans-700-greek.woff2) format('woff2');unicode-range:U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF}
@font-face{font-family:'Alegreya Sans';font-style:normal;font-weight:700;font-display:swap;src:url(schrift/AlegreyaSans-700-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Alegreya Sans';font-style:normal;font-weight:700;font-display:swap;src:url(schrift/AlegreyaSans-700-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Alegreya Sans';font-style:normal;font-weight:800;font-display:swap;src:url(schrift/AlegreyaSans-800-greek.woff2) format('woff2');unicode-range:U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF}
@font-face{font-family:'Alegreya Sans';font-style:normal;font-weight:800;font-display:swap;src:url(schrift/AlegreyaSans-800-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Alegreya Sans';font-style:normal;font-weight:800;font-display:swap;src:url(schrift/AlegreyaSans-800-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Alegreya';font-style:normal;font-weight:700;font-display:swap;src:url(schrift/Alegreya-700-greek.woff2) format('woff2');unicode-range:U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF}
@font-face{font-family:'Alegreya';font-style:normal;font-weight:700;font-display:swap;src:url(schrift/Alegreya-700-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Alegreya';font-style:normal;font-weight:700;font-display:swap;src:url(schrift/Alegreya-700-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Alegreya';font-style:normal;font-weight:800;font-display:swap;src:url(schrift/Alegreya-800-greek.woff2) format('woff2');unicode-range:U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF}
@font-face{font-family:'Alegreya';font-style:normal;font-weight:800;font-display:swap;src:url(schrift/Alegreya-800-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Alegreya';font-style:normal;font-weight:800;font-display:swap;src:url(schrift/Alegreya-800-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}

/* ============================================================
   KALK & LICHT
   Die ganze Marke steckt schon im Schild: Schiefer-Tinte auf
   Kalkweiss, Maeanderecken, Handschrift. Die Seite setzt dieses
   Schild ins Tageslicht fort. Farbe kommt aus der Fotografie,
   nicht aus der Oberflaeche.
   ============================================================ */

:root{
  /* Aus dem Logo gemessen */
  --paper:      #F4F1E8;
  --paper-warm: #EFEADC;
  --ink:        #333C3E;   /* Ueberschriften */
  --ink-2:      #4E5759;   /* Logo-Schiefer, Fliesstext */
  --ink-3:      #5D6566;   /* Sekundaer — 5,28:1 auf Papier */
  --ink-num:    #666E6F;   /* Gerichtnummern — 4,62:1, echter Inhalt */
  --ink-4:      #8C9291;   /* nur Linien und Punktfuehrung, kein Text */
  --olive:      #55672F;   /* Zustand: geoeffnet */
  --amber:      #B4762A;   /* Zustand: oeffnet gleich, Betriebsferien */
  --rule:       rgba(78,87,89,.20);

  --f: 'Alegreya Sans', ui-sans-serif, system-ui, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  /* Auszeichnung: Strichkontrast und keilige Abstriche wie in der
     Handzeichnung des Logos, nicht derselbe Sans in fett. */
  --fd: 'Alegreya', 'Alegreya Sans', Georgia, serif;

  --gap:   clamp(3.6rem, 8vw, 7rem);
  --pad:   clamp(1.15rem, 4.5vw, 3rem);
  --head-h: 4.25rem;      /* die Kopfzeile selbst */
  --kopf:   4.25rem;      /* Kopfzeile plus Hinweisstreifen; JS misst nach */
}

*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } }

body{
  margin:0;
  background:var(--paper);
  color:var(--ink-2);
  font-family:var(--f);
  font-size:clamp(1.06rem, 1rem + .34vw, 1.2rem);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}

.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}
.wrap{ width:min(1240px, 100% - var(--pad)*2); margin-inline:auto; }
#top{ scroll-margin-top:var(--kopf); }

h1,h2,h3{
  font-family:var(--fd);
  color:var(--ink); font-weight:700; letter-spacing:-.008em; line-height:1.12; margin:0;
}

/* Das Ornament ist aus dem Logo entnommen, nicht erfunden: dort steht ein
   Schluesselmaeander an den Rahmenecken und neben der Unterzeile. Hier
   arbeitet er als Abschnittstrenner — Motiv links, Haarlinie nach rechts. */

a{ color:inherit; }
a:focus-visible, button:focus-visible{
  outline:2.5px solid var(--ink); outline-offset:3px; border-radius:2px;
}

.skip{
  position:absolute; left:-9999px; top:0; z-index:90;
  background:var(--ink); color:var(--paper); padding:.85rem 1.25rem; text-decoration:none;
}
.skip:focus{ left:.6rem; top:.6rem; }

/* ---------- Kopfleiste: immer sichtbar, immer mit Nummer ------ */

.top{
  position:sticky; top:0; z-index:50;
  background:rgba(244,241,232,.94);
  backdrop-filter:saturate(1.2) blur(10px);
  border-bottom:1px solid var(--rule);
}
.top__in{
  display:flex; align-items:center; gap:1rem;
  min-height:var(--head-h);
}
.top__logo{ display:flex; align-items:center; flex:none; min-height:2.75rem; }
/* Das Logo ist freigestellt und in der Schiefer-Tinte eingefaerbt,
   damit es direkt auf dem Papier der Seite sitzt. */
.top__logo img{ display:block; height:2.9rem; width:auto; }
.top__nav{
  margin-left:auto; display:flex; align-items:center; gap:.2rem;
}
.top__nav a{
  display:inline-flex; align-items:center; min-height:2.75rem;
  padding:0 .85rem; text-decoration:none;
  font-size:.95rem; font-weight:500; color:var(--ink-2);
  border-radius:3px;
}
/* Der Rufknopf steht INNERHALB von .top__nav — ohne diese Zeile gewinnt
   die Regel fuer Navigationslinks und faerbt hellen Text auf dunklem Grund
   dunkelgrau. */
.top__nav a.btn{ color:var(--paper); }
/* Beruehrbildschirme lassen :hover nach dem Antippen haengen. Ohne diese
   Klammer blieb der Rufknopf nach dem Anruf dauerhaft cremefarben auf
   cremefarben — also unsichtbar. Und weil `.top__nav a:hover` (0-2-1) die
   Regel `.btn:hover` (0-2-0) schlaegt, galt das auch mit der Maus. */
@media (hover:hover){
  .top__nav a:not(.btn):hover{ color:var(--ink); background:var(--paper-warm); }
}

/* Die Beschriftung heisst genauso wie die Ueberschrift, auf die sie zeigt —
   „Karte" und „Zeiten" versprachen weniger, als dort steht. Wo der Platz nicht
   reicht, wird das Wort kuerzer, aber kein Link verschwindet: eine Navigation,
   die je nach Geraet andere Ziele hat, ist keine Navigation.
   Unter 620 px traegt der Knopf nur die Nummer — „Reservieren" neben einer
   sichtbaren Telefonnummer ist redundant. */
.nurSchmal{ display:none; }
@media (max-width:700px){
  .top__nav .nurBreit{ display:none; }
  .top__nav .nurSchmal{ display:inline; }
}
@media (max-width:620px){
  .top__nav a{ padding:0 .6rem; font-size:.9rem; }
  .top__nav .lang{ display:none; }
  .top .btn{ padding:.5rem .8rem; }
  .top .btn__lbl{ display:none; }
  .top .btn__nr{ font-size:.98rem; }
}
@media (max-width:400px){
  .top__logo img{ height:2.3rem; }
  .top__in{ gap:.5rem; }
  .top__nav a{ padding:0 .45rem; font-size:.86rem; }
}

.btn{
  display:inline-flex; flex-direction:column; justify-content:center;
  padding:.5rem 1.1rem; border-radius:3px; text-decoration:none;
  background:var(--ink); color:var(--paper);
  min-height:2.75rem;
  transition:background .16s ease, transform .16s ease;
}
@media (hover:hover){ .btn:hover{ background:#232B2D; } }
.btn:active{ transform:translateY(1px); }
.btn__lbl{ font-size:.72rem; letter-spacing:.14em; text-transform:uppercase; opacity:.78; }
.btn__nr{ font-size:1.02rem; font-weight:700; letter-spacing:.01em; font-variant-numeric:tabular-nums; }
.btn--ghost{
  background:transparent; color:var(--ink);
  /* 1.4.11: Rand eines Bedienelements braucht 3:1 — ink-3 liefert 5,3:1 */
  box-shadow:inset 0 0 0 1.5px var(--ink-3);
  justify-content:center;
}
@media (hover:hover){
  .btn--ghost:hover{ background:var(--paper-warm); box-shadow:inset 0 0 0 1.5px var(--ink); }
}
.top .btn{ flex:none; }
@media (max-width:479px){
  .top .btn__lbl{ display:none; }
  .top__logo img{ height:2.5rem; }
}

/* Betriebsferien. Kein Overlay: ein Kasten, den man wegklickt, wird
   reflexhaft weggeklickt. Das Band steht im Fluss, direkt unter der
   Kopfleiste, und ist auf jeder Seite die erste Information. */
.hinweis{
  background:var(--paper-warm);
  border-bottom:1px solid var(--rule);
  border-top:3px solid var(--amber);
}
.hinweis__in{
  display:flex; flex-wrap:wrap; align-items:baseline; gap:.25rem .8rem;
  padding-block:.9rem;
}
.hinweis__t{ font-weight:700; color:var(--ink); }
.hinweis__x{ color:var(--ink-2); }
@media print{ .hinweis{ border-top-width:1px; } }

/* Das Band steht ganz oben und ist nach 150 px weggescrollt. Wer ueber
   „Karte" direkt in die Speisekarte springt, saehe den Urlaub sonst nie.
   Also uebernimmt ein schmaler Streifen in der Kopfzeile — aber erst dann,
   damit oben nichts doppelt steht und der Platz nicht dauerhaft weg ist. */
.hinweisMini{ display:none; margin:0; border-top:1px solid var(--rule);
  background:var(--paper-warm); }
.hinweisMini.is-da{ display:block; }
.hinweisMini__in{ display:flex; align-items:center; gap:.5rem;
  padding-block:.42rem; font-size:.82rem; color:var(--ink-2); }
.hinweisMini__p{ flex:none; width:.5rem; height:.5rem; border-radius:50%;
  background:var(--amber); }
@media print{ .hinweisMini{ display:none !important; } }

/* ---------- Erster Blick ------------------------------------- */

.hero{ padding-block:clamp(2.4rem,6vw,4.5rem) 0; }

.hero__claim{
  font-size:clamp(2.2rem,6.4vw,4rem); font-weight:800;
  letter-spacing:-.016em; margin:0 0 1.1rem; text-wrap:balance;
  max-width:18ch;
}
.hero__claim em{ font-style:normal; color:var(--ink-2); }
.hero__sub{
  font-size:clamp(1.1rem,2.4vw,1.28rem); color:var(--ink-2);
  margin:0 0 clamp(1.6rem,3.5vw,2.2rem); max-width:52ch;
}
/* Statuszeile und Adresse stehen nebeneinander, sobald Platz ist —
   die zwei Fragen des Erstbesuchers in einer Zeile. */
.hero__fakten{ display:grid; gap:.9rem; max-width:52ch; margin-bottom:1.3rem; }
@media (min-width:720px){
  .hero__fakten{ grid-template-columns:minmax(0,22rem) minmax(0,18rem); align-items:stretch; max-width:none; }
}
.hero__ort{
  display:flex; flex-direction:column; justify-content:center;
  padding:1rem 1.2rem; border:1px solid var(--rule); border-radius:3px;
  font-size:1rem; line-height:1.4; color:var(--ink-2);
}
.hero__ort b{ display:block; color:var(--ink); font-weight:700; }
.hero__ort span{ display:block; }
.hero__ort a{ display:inline-flex; align-items:center; min-height:2.75rem; text-underline-offset:3px; }

/* Die wichtigste Auskunft der Seite — nicht die kleinste Schrift. */
.state{
  display:flex; align-items:flex-start; gap:.8rem;
  padding:1rem 1.2rem; margin:0;
  border:1px solid var(--rule); border-radius:3px;
  background:var(--paper-warm);
  font-size:1.08rem; line-height:1.4;
}
.state__lamp{
  flex:none; width:12px; height:12px; border-radius:50%; margin-top:.45rem;
  background:var(--ink-4); box-shadow:0 0 0 4px rgba(140,146,145,.16);
}
.state.is-open  .state__lamp{ background:var(--olive); box-shadow:0 0 0 4px rgba(85,103,47,.16); }
.state.is-soon  .state__lamp,
.state.is-urlaub .state__lamp{ background:var(--amber); box-shadow:0 0 0 4px rgba(180,118,42,.18); }
.state__now{ display:block; font-weight:700; color:var(--ink); }
.state__sub{ display:block; color:var(--ink-3); font-size:1rem; }
.state__sub b{ color:var(--ink); font-weight:700; }

.hero__do{ display:flex; flex-wrap:wrap; gap:.65rem; }
.hero__do .btn{ padding:.7rem 1.4rem; }


/* ---------- Abschnitte --------------------------------------- */

.sect{ padding-block:var(--gap);
  /* Sonst landet die angesprungene Ueberschrift hinter der Kopfzeile. */
  scroll-margin-top:calc(var(--kopf) + 1.2rem); }
/* Zwei aneinanderstossende Polster ergeben eine tote Strecke, keinen Atem. */
.sect + .sect{ padding-block-start:0; }
.sectHead{ margin:0 0 clamp(1.7rem,3.5vw,2.6rem); }
.sectHead h2{ font-size:clamp(1.6rem,4vw,2.35rem); margin-bottom:0; }

/* Der Umzug */
.story{ display:grid; gap:clamp(1.6rem,4vw,3.2rem); align-items:start; }
@media (min-width:940px){ .story{ grid-template-columns:1.25fr .75fr; } }
.story p{ margin:0 0 1.1em; max-width:64ch; }
.story__lede{
  font-size:clamp(1.24rem,2.9vw,1.5rem); color:var(--ink);
  font-weight:500; line-height:1.4;
}
.story__sign{ margin-top:2rem; padding-top:1.4rem; border-top:1px solid var(--rule); }
.story__greek{ font-size:1.14rem; color:var(--ink); margin:0 0 .2em; font-weight:500; }
.story__translit{ font-size:.95rem; color:var(--ink-3); margin:0 0 .8em; }
.story__names{
  margin:0; font-size:.9rem; font-weight:700;
  letter-spacing:.18em; text-transform:uppercase; color:var(--ink-2);
}
.story__shot{
  display:block; width:100%; height:clamp(15rem,40vw,26rem);
  object-fit:cover; object-position:center 42%;
  border-radius:3px; background:var(--paper-warm);
}
.shotCap{
  margin:.6rem 0 0; font-size:.84rem; color:var(--ink-3); line-height:1.45;
}

/* Fotobaender in der Karte */
.bandFig{ margin:clamp(2.4rem,5vw,3.6rem) 0; }
.band{
  display:block; width:100%; height:clamp(11rem,26vw,17rem);
  object-fit:cover; border-radius:3px; background:var(--paper-warm);
}
.band--oliven{ object-position:center 60%; }
.band--treppe{ object-position:center 45%; }

/* ---------- Speisekarte -------------------------------------- */

.rail{
  position:sticky; top:var(--kopf); z-index:40;
  background:rgba(244,241,232,.95);
  backdrop-filter:saturate(1.2) blur(10px);
  border-bottom:1px solid var(--rule);
  margin-bottom:clamp(1.8rem,4vw,2.6rem);
}
/* Randlos statt in der Spalte: die Leiste laeuft ueber die Bildschirmkante
   hinaus, das ist der Standardhinweis „hier geht es weiter". Vorher wurde
   ein Wort mitten drin abgeschnitten, mit leerem Papier daneben. */
.rail__in{
  display:flex; gap:.1rem; overflow-x:auto; scrollbar-width:none;
  scroll-snap-type:x proximity;
  width:100%; max-width:none; margin:0;
  padding-inline:var(--pad);
  /* Ausblendende Kante als Affordanz, kein Ornament */
  -webkit-mask-image:linear-gradient(to right, var(--ink) 0 88%, transparent);
  mask-image:linear-gradient(to right, var(--ink) 0 88%, transparent);
}
.rail__in::-webkit-scrollbar{ display:none; }
@media (min-width:1000px){
  .rail__in{ -webkit-mask-image:none; mask-image:none; }
}
.rail__link{
  flex:none; scroll-snap-align:start;
  display:inline-flex; align-items:center; min-height:2.9rem;
  padding:0 .8rem; text-decoration:none; white-space:nowrap;
  font-size:.84rem; font-weight:500; letter-spacing:.02em;
  color:var(--ink-3);
  border-bottom:2.5px solid transparent;
}
@media (hover:hover){ .rail__link:hover{ color:var(--ink); } }
.rail__link.is-here{ color:var(--ink); border-bottom-color:var(--ink); font-weight:700; }

.karteTop{
  display:flex; flex-wrap:wrap; gap:.5rem 1.6rem; align-items:baseline;
  margin:0 0 1.1rem; font-size:.95rem; color:var(--ink-3);
}
.karteTop a{ display:inline-flex; align-items:center; min-height:2.75rem; color:var(--ink); text-underline-offset:3px; }


/* Die Karte ist eine Liste, keine Flaeche: bei 1240 px lagen 640 px Leere
   zwischen Beschreibung und Preis. */
.karteBody{ width:min(940px, 100%); }
.kat{ margin-bottom:clamp(2.8rem,6vw,4.4rem); scroll-margin-top:calc(var(--kopf) + 3.6rem); }
/* Die letzte Kategorie stapelt ihren Rand sonst auf das Abschnittspolster. */
.kat:last-of-type{ margin-bottom:0; }
.katTitle{
  display:flex; flex-wrap:wrap; align-items:baseline; gap:.35rem .9rem;
  padding-bottom:.75rem; margin-bottom:1.2rem;
  border-bottom:2px solid var(--ink);
}
.katTitle__de{ font-family:var(--fd); font-size:clamp(1.2rem,3vw,1.56rem); font-weight:700; letter-spacing:-.005em; }
/* Sekundaertext: eigene Familie setzen, sonst erbt er die Auszeichnungs-
   schrift, von der es nur 700 und 800 gibt — und rendert faelschlich fett. */
.katTitle__en{ font-family:var(--f); font-size:.9rem; color:var(--ink-3); font-weight:400; }
/* Die Anzahl steht jetzt hier statt in einem zweiten Verzeichnis oben. */
.katTitle__n{ margin-left:auto; font-size:.82rem; color:var(--ink-num);
  font-family:var(--f); font-weight:400; letter-spacing:.01em;
  font-variant-numeric:tabular-nums; white-space:nowrap; }

.dishes{ list-style:none; margin:0; padding:0; }
.dish{
  display:grid; grid-template-columns:2.2rem 1fr; gap:0 .7rem;
  padding:.9rem 0; border-bottom:1px solid var(--rule);
}
.dish:last-child{ border-bottom:0; }
@media (min-width:640px){ .dish{ grid-template-columns:2.8rem 1fr; gap:0 1rem; padding:1rem 0; } }

.dish__nr{
  font-variant-numeric:tabular-nums; font-size:.9rem;
  color:var(--ink-num); padding-top:.28em; font-weight:500;
}
.dish__head{ display:flex; align-items:baseline; gap:.5rem; margin:0 0 .12rem; }
.dish__name{ font-size:clamp(1.06rem,2.6vw,1.12rem); font-weight:700; color:var(--ink); }
.dish__lead{
  flex:1 1 auto; min-width:1rem; height:0; transform:translateY(-.22em);
  border-bottom:1px dotted var(--ink-4); opacity:.7;
}
.dish__price{
  flex:none; font-variant-numeric:tabular-nums;
  font-size:clamp(1.04rem,2.5vw,1.12rem); font-weight:700; color:var(--ink);
}
.dish__eur{ color:var(--ink-3); font-weight:400; }
.dish__de{ margin:0; color:var(--ink-2); font-size:1rem; line-height:1.46; max-width:64ch; }
.dish__en{ margin:.1rem 0 0; color:var(--ink-3); font-size:.9rem; line-height:1.42; max-width:64ch; }

.katNote{
  padding:1.2rem 1.4rem; border-radius:3px;
  background:var(--paper-warm); border:1px solid var(--rule);
}
.katNote p{ margin:0; max-width:62ch; }
.katNote__en{ margin-top:.4rem !important; color:var(--ink-3); font-size:.95rem; }
.katFoot{ margin:1.1rem 0 0; font-size:.95rem; color:var(--ink-3); }
.katFoot__en{ display:block; font-size:.87rem; color:var(--ink-3); }

/* ---------- Zeiten & Weg ------------------------------------- */

.two{ display:grid; gap:clamp(1.6rem,4vw,2.8rem); align-items:start; }
@media (min-width:880px){ .two{ grid-template-columns:1fr 1fr; } }
.panel{
  padding:clamp(1.5rem,3.5vw,2.2rem);
  border:1px solid var(--rule); border-radius:3px; background:var(--paper-warm);
}
.panel h3{ font-size:1.2rem; margin-bottom:1.2rem; }

.hours{ width:100%; border-collapse:collapse; }
.hours th, .hours td{
  padding:.66rem .3rem; text-align:left; vertical-align:baseline;
  border-bottom:1px solid var(--rule); font-size:1rem;
}
.hours tr:last-child th, .hours tr:last-child td{ border-bottom:0; }
.hours th{ font-weight:400; color:var(--ink-3); width:6.2rem; }
.hours td{ color:var(--ink-2); font-variant-numeric:tabular-nums; }
.hours .closed{ color:var(--ink-3); }
.hours tr.is-today th, .hours tr.is-today td{ color:var(--ink); font-weight:700; }
.hoursNote{
  margin:1.2rem 0 0; padding-top:1rem; border-top:1px solid var(--rule);
  font-size:.95rem; color:var(--ink-3); max-width:48ch;
}

.facts{ list-style:none; margin:0; padding:0; }
.facts li{ padding:.85rem 0; border-bottom:1px solid var(--rule); }
.facts li:last-child{ border-bottom:0; }
.facts b{
  display:block; font-size:.72rem; letter-spacing:.16em; text-transform:uppercase;
  color:var(--ink-3); font-weight:700; margin-bottom:.28rem;
}
.facts a{
  display:inline-block; padding-block:.4rem; min-height:2.75rem;
  text-underline-offset:3px;
}
.facts address{ font-style:normal; }

/* ---------- Impressum, Datenschutz, Fehlerseite --------------- */

.rechtstext{ max-width:68ch; }
.rechtstext h2{
  font-size:clamp(1.2rem,3vw,1.56rem); margin:2rem 0 .5rem;
}
.rechtstext h2:first-child{ margin-top:0; }
.rechtstext p{ margin:0 0 1rem; }
.rechtstext a{ text-underline-offset:3px; }

/* Zurueck nach oben. Erscheint erst, wenn Scrollen ueberhaupt ein Thema ist.
   Haarlinie und warmes Papier wie jede andere Flaeche — kein neuer Schatten,
   kein neues Ornament. Beschriftet, weil ein Teil der Gaeste aelter ist. */
.toTop{
  position:fixed; z-index:55;
  right:var(--pad);
  bottom:calc(var(--pad) + env(safe-area-inset-bottom));
  display:inline-flex; align-items:center; gap:.45rem;
  min-height:2.9rem; padding:0 .95rem;
  background:var(--paper-warm); color:var(--ink);
  border:1px solid var(--ink-3); border-radius:3px;
  font-size:.9rem; font-weight:500; text-decoration:none;
  /* Er schwebt ueber Fliesstext — ohne Schatten schneidet er Woerter mitten
     durch, statt darueber zu liegen. */
  box-shadow:0 2px 10px rgba(51,60,62,.16);
  opacity:0; visibility:hidden; transform:translateY(6px);
  transition:opacity .25s ease, transform .25s ease, visibility .25s;
}
.toTop.is-da{ opacity:1; visibility:visible; transform:none; }
/* Bei iOS ist der Bezugsrahmen fuer position:fixed das GROSSE Sichtfeld —
   `bottom:18px` liegt damit hinter der schwebenden Safari-Leiste, und der
   Fingertipp trifft den Browser statt den Knopf. dvh misst das Sichtfeld
   ohne diese Leiste und schrumpft mit, wenn sie eingeblendet wird. */
@supports (height:100dvh){
  .toTop{
    bottom:auto;
    top:calc(100dvh - 2.9rem - var(--pad) - env(safe-area-inset-bottom));
  }
}
@media (hover:hover){ .toTop:hover{ background:var(--paper); border-color:var(--ink); } }
.toTop svg{ flex:none; }
@media (prefers-reduced-motion: reduce){
  .toTop{ transition:none; transform:none; }
}
@media print{ .toTop{ display:none !important; } }

/* ---------- Fuss --------------------------------------------- */

/* Kein eigener Aussenabstand — der letzte Abschnitt bringt seinen schon mit. */
.foot{
  border-top:1px solid var(--rule);
  padding-block:clamp(2.6rem,5vw,3.6rem);
  font-size:.95rem; color:var(--ink-3);
}
/* Das Logo tritt hier gross auf und fuehrt den Fuss an — die Handzeichnung
   selbst ist das Motiv, keine Schrift kann sie ersetzen. */
/* Kleiner als vorher: der Fuss braucht kein drittes grosses Logo,
   der Name steht ohnehin in der Rechtszeile. */
.foot__logo{
  display:block; width:min(220px, 60%); height:auto;
  margin:0 0 1.2rem; opacity:.85;
}
/* Das Seitenende ist bei einer Seite, deren Ziel ein Anruf ist,
   der letzte Moment, um danach zu fragen. */
.foot__ruf{ margin:0 0 1.6rem; }
.foot__ruf .btn{ padding:.7rem 1.4rem; }
.foot__grid{
  display:grid; gap:1.6rem 3rem;
  align-items:end; justify-content:start;
}
@media (min-width:720px){ .foot__grid{ grid-template-columns:auto auto; } }
.foot__grid p{ margin:0 0 .25rem; }
.foot strong{ color:var(--ink); font-weight:700; }
.foot__links{ display:flex; flex-wrap:wrap; gap:0 1.5rem; }
.foot__links a{ display:inline-flex; align-items:center; min-height:2.75rem; padding-inline:.1rem; }
.foot__note{ margin:1.6rem 0 0; font-size:.84rem; color:var(--ink-3); max-width:74ch; line-height:1.55; }

/* Der eine Bewegungsmoment: die Fotografien kommen ins Licht.
   Ausschliesslich Bilder — Text haengt nie an einer Animation. */
@media (prefers-reduced-motion: no-preference){
  /* Das Hero-Bild steht ueber der Falz und hat nichts zu enthuellen. */
  .js .band, .js .story__shot{
    opacity:0; transform:scale(1.012);
    transition:opacity 1s cubic-bezier(.2,.85,.3,1), transform 1.2s cubic-bezier(.2,.85,.3,1);
  }
  .js .is-lit{ opacity:1; transform:none; }
}

/* Die Karte wird ausgedruckt — dafuer ist sie da. */
@media print{
  .top, .rail, .skip, .story__shot, .band, .bandFig,
  .shotCap, .foot__links, .btn--ghost, .state{ display:none !important; }
  body{ background:#fff; color:#000; font-size:10.5pt; padding:0; }
  .sect{ padding-block:0; }
  .kat{ break-inside:avoid; margin-bottom:1.2rem; }
  .dish{ break-inside:avoid; padding:.3rem 0; }
  .dish__en, .katNote__en, .katFoot__en{ display:none; }
  .katTitle{ break-after:avoid; }
  a{ text-decoration:none; }
}