/* de.restaurant — Gestaltung "Emailleschild".
   Formensprache aus der Sache selbst: das blaue Emailleschild mit weisser
   Konturlinie, das an jeder deutschen Gaststaette haengt, dazu Messing von
   Tuergriff und Handlauf. Kondensierte Versalien wie auf dem Schild, dazu eine
   ruhige Grotesk fuer den Text und eine Schreibmaschinenschrift fuer alles,
   was Zahl ist: Noten, Zeiten, Zaehlungen.
   Schriften self-hosted (selfhost-google-fonts). */

@font-face{font-family:Schild;src:url(/assets/bc700.woff2)format('woff2');
  font-weight:700;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+2000-206F,U+20AC}
@font-face{font-family:Schild;src:url(/assets/bc700e.woff2)format('woff2');
  font-weight:700;font-display:swap;unicode-range:U+0100-024F,U+1E00-1EFF,U+2020-2C7F}
@font-face{font-family:Schild;src:url(/assets/bc600.woff2)format('woff2');
  font-weight:600;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+2000-206F,U+20AC}
@font-face{font-family:Schild;src:url(/assets/bc600e.woff2)format('woff2');
  font-weight:600;font-display:swap;unicode-range:U+0100-024F,U+1E00-1EFF,U+2020-2C7F}
@font-face{font-family:Text;src:url(/assets/it.woff2)format('woff2');
  font-weight:100 900;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+2000-206F,U+20AC}
@font-face{font-family:Text;src:url(/assets/ite.woff2)format('woff2');
  font-weight:100 900;font-display:swap;unicode-range:U+0100-024F,U+1E00-1EFF,U+2020-2C7F}
@font-face{font-family:Zahl;src:url(/assets/jb.woff2)format('woff2');
  font-weight:400;font-display:swap;unicode-range:U+0000-00FF,U+2000-206F,U+20AC}

:root{
  --emaille:#123449; --emaille-tief:#0B2233; --emaille-hell:#1D4A66;
  --kachel:#E9ECEA; --papier:#F5F6F4; --weiss:#FFF;
  --messing:#A87C3D; --messing-hell:#CBA467;
  --tinte:#14181B; --grau:#5B6360; --linie:#D7DBD8;
  --signal:#B3392B;
  --schrift-display:Schild,'Arial Narrow',sans-serif;
  --schrift-text:Text,system-ui,-apple-system,sans-serif;
  --schrift-zahl:Zahl,ui-monospace,monospace;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}}
body{margin:0;background:var(--kachel);color:var(--tinte);
  font:400 16px/1.65 var(--schrift-text);-webkit-text-size-adjust:100%}
.wrap{max-width:1140px;margin:0 auto;padding:0 22px}
a{color:var(--emaille);text-decoration:none}
a:hover{text-decoration:underline;text-underline-offset:3px}
:focus-visible{outline:3px solid var(--messing);outline-offset:2px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---- Das Schild: die eine Form, die die Seite traegt --------------------- */
.schild{position:relative;background:var(--emaille);color:#fff;border-radius:3px;
  padding:10px 18px;display:inline-block;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.14)}
.schild::after{content:"";position:absolute;inset:4px;border:1px solid rgba(255,255,255,.55);
  border-radius:1px;pointer-events:none}

/* ---- Kopfleiste ---------------------------------------------------------- */
.kopf{background:var(--emaille-tief);color:#fff;position:sticky;top:0;z-index:40;
  border-bottom:1px solid rgba(255,255,255,.1)}
.kopf .wrap{display:flex;flex-wrap:wrap;align-items:center;gap:6px 24px;
  padding-top:11px;padding-bottom:11px}
.marke{font-family:var(--schrift-display);font-weight:700;font-size:1.3rem;
  letter-spacing:.04em;text-transform:uppercase;color:#fff;line-height:1}
.marke span{display:block;font-family:var(--schrift-zahl);font-size:.62rem;font-weight:400;
  letter-spacing:.22em;color:var(--messing-hell);margin-top:4px;text-transform:uppercase}
.kopf nav{display:flex;flex-wrap:wrap;gap:2px 20px;margin-left:auto}
.kopf nav a{color:rgba(255,255,255,.72);font-family:var(--schrift-display);font-weight:600;
  font-size:1rem;letter-spacing:.03em;text-transform:uppercase}
.kopf nav a:hover{color:#fff;text-decoration:none}
.kopf nav a.aktiv{color:var(--messing-hell)}

/* ---- Kopfband mit Bild --------------------------------------------------- */
.band{position:relative;background:var(--emaille-tief);overflow:hidden}
.band img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  opacity:.42;filter:saturate(.85)}
.band::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(11,34,51,.55),rgba(11,34,51,.88))}
.band .wrap{position:relative;z-index:2;padding-top:52px;padding-bottom:44px;color:#fff}
.brot{font-family:var(--schrift-zahl);font-size:.72rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--messing-hell);margin:0 0 14px}
.brot a{color:var(--messing-hell)}
.band h1{font-family:var(--schrift-display);font-weight:700;text-transform:uppercase;
  letter-spacing:.005em;line-height:.92;margin:0 0 18px;
  font-size:clamp(2.6rem,7.5vw,5.6rem);text-wrap:balance}
.band h1 em{display:block;font-style:normal;color:var(--messing-hell);font-size:.52em;
  letter-spacing:.05em;margin-top:.18em}
.kennzahlen{list-style:none;display:flex;flex-wrap:wrap;gap:0;padding:0;margin:0;
  font-family:var(--schrift-zahl);font-size:.82rem;color:rgba(255,255,255,.9)}
.kennzahlen li{padding:0 18px;border-left:1px solid rgba(255,255,255,.22)}
.kennzahlen li:first-child{padding-left:0;border-left:0}
.kennzahlen b{color:#fff;font-weight:400}
.band .intro{max-width:66ch;margin:20px 0 0;color:rgba(255,255,255,.86);font-size:1.02rem}

/* ---- 7 Insider ----------------------------------------------------------- */
/* margin muss "auto" fuer die Seiten behalten, sonst faellt die Zentrierung
   der Spaltenklasse weg und der Block klebt am Bildschirmrand. */
.insider{margin:34px auto 0;position:relative;z-index:5}
.insider__kopf{display:flex;flex-wrap:wrap;align-items:center;gap:12px 20px;margin-bottom:22px}
.insider__kopf h2{margin:0;font-family:var(--schrift-display);font-weight:700;
  text-transform:uppercase;letter-spacing:.05em;font-size:1.5rem;line-height:1}
.insider__kopf .schild{padding:9px 16px}
.insider__kopf p{margin:0;font-size:.88rem;color:var(--grau);max-width:52ch;flex:1 1 260px}
.premium,.weitere{list-style:none;padding:0;margin:0;display:grid;gap:14px}
.premium{grid-template-columns:repeat(auto-fit,minmax(268px,1fr))}
.weitere{grid-template-columns:repeat(auto-fit,minmax(216px,1fr));margin-top:14px}
.ins{position:relative;background:var(--weiss);border:1px solid var(--linie);
  border-radius:4px;padding:18px 18px 16px;display:flex;flex-direction:column;gap:2px}
.ins--gross{border-color:#C6CEC9;box-shadow:0 1px 0 var(--linie),0 10px 30px -22px rgba(18,52,73,.5)}
.platte{position:absolute;top:-11px;left:18px;background:var(--emaille);color:#fff;
  font-family:var(--schrift-display);font-weight:700;font-size:.95rem;letter-spacing:.06em;
  padding:5px 11px 4px;border-radius:2px;line-height:1}
.platte::after{content:"";position:absolute;inset:2px;border:1px solid rgba(255,255,255,.6);
  border-radius:1px}
.ins h3{font-family:var(--schrift-display);font-weight:700;text-transform:uppercase;
  letter-spacing:.02em;font-size:1.18rem;line-height:1.08;margin:10px 0 6px}
.ins--gross h3{font-size:1.42rem}
.warum{margin:0 0 10px;font-size:.88rem;color:var(--grau);line-height:1.5}
.ins .adr{margin:0;font-size:.87rem;color:var(--tinte)}
.ins .kontakt{margin:8px 0 0;font-size:.87rem}
.ins .kontakt a{border-bottom:1px solid var(--linie)}
.werbung{position:absolute;top:10px;right:12px;font-family:var(--schrift-zahl);
  font-size:.58rem;letter-spacing:.14em;text-transform:uppercase;color:var(--grau)}

/* Note als Zahl, nicht als Sternenreihe */
.note{display:flex;align-items:baseline;gap:8px;margin:0 0 8px;font-family:var(--schrift-zahl)}
.note b{font-size:1.15rem;font-weight:400;color:var(--emaille)}
.note .von{font-size:.72rem;color:var(--grau)}
.balken{flex:1;height:3px;background:var(--linie);border-radius:2px;overflow:hidden;
  max-width:96px;align-self:center}
.balken i{display:block;height:100%;background:var(--messing)}

/* ---- Werkzeugleiste ------------------------------------------------------ */
.werkzeug{display:flex;flex-wrap:wrap;align-items:center;gap:10px 12px;
  margin:14px 0 0;padding:12px 14px;background:var(--weiss);
  border:1px solid var(--linie);border-radius:4px;position:sticky;top:58px;z-index:30}
.suche{flex:1 1 230px;display:block;position:relative}
.suche input{width:100%;padding:10px 14px;font:400 .95rem var(--schrift-text);
  border:1px solid var(--linie);border-radius:3px;background:var(--papier);color:var(--tinte)}
.suche input::placeholder{color:var(--grau)}
.filter{display:flex;flex-wrap:wrap;gap:6px}
.filter button{font:600 .84rem var(--schrift-display);letter-spacing:.04em;
  text-transform:uppercase;padding:8px 13px;border-radius:3px;border:1px solid var(--linie);
  background:var(--papier);color:var(--grau);cursor:pointer;transition:.14s}
.filter button:hover{border-color:var(--emaille);color:var(--emaille)}
.filter button.an{background:var(--emaille);border-color:var(--emaille);color:#fff}
.zaehler{margin:0;font-family:var(--schrift-zahl);font-size:.76rem;color:var(--grau);flex:0 0 auto}

/* ---- Liste --------------------------------------------------------------- */
h2.abschnitt{font-family:var(--schrift-display);font-weight:700;text-transform:uppercase;
  letter-spacing:.05em;font-size:1.5rem;margin:46px 0 0}
.liste{list-style:none;padding:0;margin:14px 0 0;display:grid;gap:1px;background:var(--linie);
  border:1px solid var(--linie);border-radius:4px;overflow:hidden}
.eintrag{display:flex;gap:16px;background:var(--weiss);padding:16px 18px;transition:.12s}
.eintrag:hover{background:var(--papier)}
.eintrag[hidden]{display:none}
.rang{font-family:var(--schrift-zahl);font-size:.78rem;color:var(--grau);
  min-width:2.4em;padding-top:3px}
.inhalt{flex:1;min-width:0}
.eintrag h3{font-family:var(--schrift-display);font-weight:600;text-transform:uppercase;
  letter-spacing:.02em;font-size:1.1rem;line-height:1.1;margin:0 0 6px}
.adr{margin:0;font-size:.9rem}
.kontakt{margin:5px 0 0;font-size:.89rem}
.chips{margin:9px 0 0;display:flex;flex-wrap:wrap;gap:5px}
.chips span{font-family:var(--schrift-zahl);font-size:.66rem;letter-spacing:.08em;
  text-transform:uppercase;padding:4px 9px;border-radius:2px;
  background:var(--kachel);color:var(--grau)}
.zeiten{flex:0 0 auto;min-width:178px;font-family:var(--schrift-zahl);font-size:.74rem;
  line-height:1.55;border-left:1px solid var(--linie);padding-left:16px;align-self:flex-start}
.zeiten div{display:flex;justify-content:space-between;gap:10px}
.zeiten b{color:var(--grau);font-weight:400}
.zeiten span{color:var(--tinte);text-align:right}
.zeiten .zu{color:var(--linie)}
.zeiten--leer{display:flex;align-items:center;color:var(--grau)}
.leer{margin:18px 0;padding:18px;border-radius:4px;background:var(--weiss);
  border:1px solid var(--linie);color:var(--grau);font-size:.93rem}

/* ---- Kacheln auf der Stadtseite ------------------------------------------ */
.kacheln{list-style:none;padding:0;margin:26px 0 0;display:grid;
  grid-template-columns:repeat(auto-fill,minmax(268px,1fr));gap:16px}
.kacheln a{display:block;background:var(--weiss);border:1px solid var(--linie);
  border-radius:4px;overflow:hidden;color:inherit;transition:.16s}
.kacheln a:hover{text-decoration:none;border-color:#B9C2BC;
  box-shadow:0 12px 32px -24px rgba(18,52,73,.6)}
.kacheln figure{margin:0;position:relative;background:var(--emaille-tief)}
.kacheln img{width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;display:block;opacity:.92}
.kacheln h2{font-family:var(--schrift-display);font-weight:700;text-transform:uppercase;
  letter-spacing:.03em;font-size:1.2rem;margin:14px 18px 3px}
.kacheln p{margin:0 18px 6px;font-family:var(--schrift-zahl);font-size:.76rem;color:var(--grau)}
.kimark{margin:0 18px 14px!important;font-family:var(--schrift-zahl);font-size:.6rem;
  letter-spacing:.1em;text-transform:uppercase;color:var(--grau);opacity:.75}
.hinweis{margin:26px 0 0;padding:15px 18px;border-radius:4px;background:var(--weiss);
  border-left:3px solid var(--messing);color:var(--grau);font-size:.9rem}
.nachbarn{list-style:none;padding:0;margin:12px 0 0;display:flex;flex-wrap:wrap;gap:7px}
.nachbarn a{display:inline-block;background:var(--weiss);border:1px solid var(--linie);
  border-radius:3px;padding:7px 14px;font-family:var(--schrift-display);font-weight:600;
  font-size:.9rem;letter-spacing:.03em;text-transform:uppercase}
.nachbarn a:hover{border-color:var(--emaille);text-decoration:none}

/* ---- Angebot an Gastronomen ---------------------------------------------- */
.angebot{margin:64px 0 0;background:var(--emaille-tief);color:#fff;border-radius:4px;
  overflow:hidden;display:grid;grid-template-columns:1fr}
.angebot__bild{position:relative;min-height:210px;background:var(--emaille)}
.angebot__bild img{width:100%;height:100%;object-fit:cover;display:block;opacity:.55}
.angebot__text{padding:34px 30px 32px}
.angebot h2{font-family:var(--schrift-display);font-weight:700;text-transform:uppercase;
  letter-spacing:.04em;font-size:clamp(1.6rem,3.4vw,2.3rem);line-height:1;margin:0 0 6px}
.angebot .anriss{font-size:1.06rem;color:rgba(255,255,255,.88);margin:0 0 22px;max-width:52ch}
.angebot dl{margin:0 0 24px;display:grid;gap:14px}
.angebot dt{font-family:var(--schrift-display);font-weight:600;text-transform:uppercase;
  letter-spacing:.05em;font-size:.86rem;color:var(--messing-hell)}
.angebot dd{margin:2px 0 0;font-size:.96rem;color:rgba(255,255,255,.84);max-width:54ch}
.preis{display:flex;flex-wrap:wrap;align-items:baseline;gap:10px 14px;
  padding:16px 0 20px;border-top:1px solid rgba(255,255,255,.18);
  border-bottom:1px solid rgba(255,255,255,.18);margin-bottom:22px}
.preis b{font-family:var(--schrift-display);font-weight:700;font-size:2.5rem;line-height:1}
.preis span{font-family:var(--schrift-zahl);font-size:.78rem;color:rgba(255,255,255,.7)}
.knopf{display:inline-block;background:var(--messing);color:#0B2233;
  font:700 1rem var(--schrift-display);letter-spacing:.06em;text-transform:uppercase;
  padding:14px 26px;border-radius:3px;transition:.16s}
.knopf:hover{background:var(--messing-hell);text-decoration:none}
.ehrlich{margin:20px 0 0;font-size:.87rem;color:rgba(255,255,255,.62);max-width:54ch}
@media(min-width:860px){.angebot{grid-template-columns:1fr 1.15fr}
  .angebot__bild{min-height:100%}}

/* ---- Fusszeile ----------------------------------------------------------- */
.fuss{margin-top:66px;background:var(--emaille-tief);color:rgba(255,255,255,.72);
  padding:34px 0 30px;font-size:.87rem}
.fuss p{margin:0 0 12px;max-width:72ch}
.fuss nav{display:flex;flex-wrap:wrap;gap:20px;margin-top:16px}
.fuss a{color:var(--messing-hell)}
main{padding-bottom:6px}

@media(max-width:760px){
  .eintrag{flex-wrap:wrap}
  .zeiten{border-left:0;border-top:1px solid var(--linie);padding-left:0;padding-top:11px;
    margin-top:11px;width:100%;min-width:0;
    display:grid;grid-template-columns:repeat(auto-fill,minmax(148px,1fr));gap:0 18px}
  .kopf nav{margin-left:0;width:100%}
}
@media(max-width:560px){.werkzeug{position:static}}

/* ---- Foto des Betriebs ---------------------------------------------------
   Direkt von der Quelle verlinkt, wie in den bestehenden member.show-
   Verzeichnissen. Bricht ein Bild weg, entfernt onerror das Element, deshalb
   braucht die Flaeche keine feste Hoehe zu halten. */
.bild{flex:0 0 auto;width:132px;height:99px;object-fit:cover;border-radius:3px;
      background:var(--kachel);display:block}
.bild--leer{background:repeating-linear-gradient(135deg,var(--kachel),var(--kachel) 6px,
            var(--papier) 6px,var(--papier) 12px)}
.insbild{width:calc(100% + 36px);margin:-18px -18px 4px;height:auto;aspect-ratio:16/9;
         object-fit:cover;display:block;border-radius:3px 3px 0 0}
.ins--gross .insbild{margin-bottom:8px}
.insbild--leer{width:calc(100% + 36px);margin:-18px -18px 8px;aspect-ratio:16/9;
               display:block;border-radius:3px 3px 0 0;
               background:repeating-linear-gradient(135deg,var(--kachel),var(--kachel) 8px,
               var(--papier) 8px,var(--papier) 16px)}
.ins--gross .platte{top:calc(56.25% - 11px)}
@media(max-width:760px){.bild{width:96px;height:72px}}