/* Kuzey Balık, QR-Karte für die Tische (qr.html). Eigene Datei, unabhängig von styles.css.
   Handy zuerst. Alle Größen in rem, damit die Textgröße des Systems wirkt. */

@font-face{font-family:"Cormorant Garamond";font-style:normal;font-weight:300 700;font-display:swap;src:url(fonts/cormorant-garamond-latin-ext-wght-normal.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:"Cormorant Garamond";font-style:normal;font-weight:300 700;font-display:swap;src:url(fonts/cormorant-garamond-latin-wght-normal.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:"Jost";font-style:normal;font-weight:300 600;font-display:swap;src:url(fonts/jost-latin-ext-wght-normal.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:"Jost";font-style:normal;font-weight:300 600;font-display:swap;src:url(fonts/jost-latin-wght-normal.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}

:root{
  color-scheme:light;
  --krem:#f7f1e6; --kagit:#fffdf8; --kum:#efe5d3;
  --lacivert:#11275c; --metin:#2a3557; --metin-acik:#4f5878;
  --pirinc:#a8843f; --pirinc-koyu:#6d511e; --cizgi:#dccaa3; --cizgi-acik:#e8dcc0;
  --turkuaz:#61b3c5; --turkuaz-koyu:#1f6272;
  --serif:"Cormorant Garamond","Iowan Old Style","Palatino Linotype",Georgia,serif;
  --sans:"Jost","Avenir Next","Segoe UI",system-ui,sans-serif;
  --cubuk-y:3.625rem;
  --kenar-sol:max(1rem,env(safe-area-inset-left));
  --kenar-sag:max(1rem,env(safe-area-inset-right));
}
*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-behavior:smooth;background:var(--krem)}
body{margin:0;background:var(--krem);color:var(--metin);font:400 1rem/1.55 var(--sans);font-variant-numeric:lining-nums;-webkit-font-smoothing:antialiased;-webkit-tap-highlight-color:rgba(97,179,197,.22)}
h1,h2,h3,p,ul{margin:0;padding:0}
ul{list-style:none}
svg{fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;flex:none}
a{color:inherit}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer;-webkit-appearance:none;appearance:none}
:focus-visible{outline:2px solid var(--turkuaz-koyu);outline-offset:2px}
.gizli{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}

.sayfa{width:100%;max-width:35rem;margin-inline:auto;min-height:100vh;min-height:100dvh;display:flex;flex-direction:column}

/* ---------- Kopf: kompakt, der Gast will sofort die Karte sehen ---------- */
.bas{padding:calc(.875rem + env(safe-area-inset-top)) var(--kenar-sag) .625rem var(--kenar-sol);text-align:center}
.bas__logo{display:block;width:auto;height:4.25rem;margin-inline:auto}
.bas__h{display:flex;align-items:center;justify-content:center;gap:.875rem;margin-top:.5rem;font:500 .8125rem/1 var(--sans);letter-spacing:.34em;text-transform:uppercase;color:var(--lacivert)}
.bas__h span{padding-left:.34em}
.bas__h::before,.bas__h::after{content:"";width:2.75rem;height:1px;background:var(--pirinc)}
.bas__alt{margin-top:.4375rem;font-size:.8125rem;line-height:1.3;color:var(--metin-acik)}

/* ---------- Suche (erscheint nur mit JavaScript) ---------- */
.ara{position:relative;margin:.25rem var(--kenar-sag) .625rem var(--kenar-sol)}
.ara__ikon{position:absolute;left:.9375rem;top:50%;margin-top:-.625rem;width:1.25rem;height:1.25rem;color:var(--pirinc-koyu);pointer-events:none}
.ara__kutu{display:block;width:100%;height:3rem;margin:0;padding:0 3rem 0 2.875rem;border:1px solid var(--cizgi);border-radius:1.5rem;background:var(--kagit);color:var(--lacivert);font:400 1.0625rem/1.2 var(--sans);-webkit-appearance:none;appearance:none;outline:0;transition:border-color .2s,box-shadow .2s}
.ara__kutu::placeholder{color:var(--metin-acik);opacity:1}
.ara__kutu::-webkit-search-cancel-button,.ara__kutu::-webkit-search-decoration{-webkit-appearance:none;display:none}
.ara__kutu:focus{border-color:var(--turkuaz-koyu);box-shadow:0 0 0 3px rgba(97,179,197,.28)}
.ara__sil{position:absolute;right:.125rem;top:.125rem;width:2.75rem;height:2.75rem;display:flex;align-items:center;justify-content:center;border-radius:50%;color:var(--lacivert)}

/* ---------- Klebende Kategorien-Leiste ---------- */
.cubuk{position:-webkit-sticky;position:sticky;top:0;z-index:20;padding-top:env(safe-area-inset-top);background:rgba(247,241,230,.95);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-bottom:1px solid transparent;transition:border-color .2s,box-shadow .2s}
.cubuk.yapisik{border-bottom-color:var(--cizgi);box-shadow:0 .75rem 1.25rem -1.125rem rgba(17,39,92,.5)}
.cubuk__ic{display:flex;gap:.375rem;overflow-x:auto;overflow-y:hidden;padding:.4375rem var(--kenar-sag) .4375rem var(--kenar-sol);scroll-padding-inline:1rem;scrollbar-width:none;-webkit-overflow-scrolling:touch;overscroll-behavior-x:contain}
.cubuk__ic::-webkit-scrollbar{display:none}
.cubuk__ic::after{content:"";flex:0 0 .625rem}
.js .cubuk__ic::after{flex-basis:3rem}
/* weiches Ausblenden an den Rändern: Hinweis, dass man wischen kann */
.cubuk::before,.cubuk::after{content:"";position:absolute;z-index:1;bottom:0;height:var(--cubuk-y);width:2.25rem;pointer-events:none;opacity:0;transition:opacity .2s}
.cubuk::before{left:0;background:linear-gradient(90deg,var(--krem) 15%,rgba(247,241,230,0))}
.cubuk::after{right:0;width:3rem;background:linear-gradient(270deg,var(--krem) 15%,rgba(247,241,230,0));opacity:1}
.cubuk.yapisik::after{width:4.875rem;background:linear-gradient(270deg,var(--krem) 3.375rem,rgba(247,241,230,0))}
.cubuk.sol::before{opacity:1}
.cubuk.son::after{opacity:0}
.p{flex:none;display:flex;align-items:center;min-height:2.75rem;padding:0 1.0625rem .0625rem;border:1px solid var(--cizgi);border-radius:1.375rem;background:var(--kagit);color:var(--lacivert);font:600 1.1875rem/1 var(--serif);letter-spacing:.01em;text-decoration:none;white-space:nowrap;transition:background-color .2s,color .2s,border-color .2s}
.p.aktif{background:var(--lacivert);border-color:var(--lacivert);color:var(--kagit)}
.cubuk__ara{position:absolute;z-index:2;right:calc(var(--kenar-sag) - .25rem);bottom:.4375rem;width:2.75rem;height:2.75rem;display:flex;align-items:center;justify-content:center;border:1px solid var(--cizgi);border-radius:50%;background:var(--kagit);color:var(--lacivert);opacity:0;visibility:hidden;transform:scale(.85);transition:opacity .2s,transform .2s,visibility 0s .2s}
.cubuk.yapisik .cubuk__ara{opacity:1;visibility:visible;transform:none;transition:opacity .2s,transform .2s}

/* ---------- Liste ---------- */
.liste{flex:1;padding:0 var(--kenar-sag) 1rem var(--kenar-sol)}
.durum{padding-top:1rem;font-size:.875rem;color:var(--metin-acik);text-align:center}
.k{padding-top:1.625rem;scroll-margin-top:calc(var(--cubuk-y) + env(safe-area-inset-top))}
.durum + .k,.k:first-of-type{padding-top:1.125rem}
.k__bas{display:flex;align-items:baseline;gap:.875rem;padding-bottom:.25rem}
.k__bas h2{font:600 2rem/1.1 var(--serif);letter-spacing:.005em;color:var(--lacivert);outline:0}
.k__bas::after{content:"";order:2;flex:1;min-width:1rem;height:1px;background:var(--pirinc);opacity:.7}
.k__bas h2{order:1}
.k__sayi{order:3;font:500 .75rem/1 var(--sans);letter-spacing:.16em;text-transform:uppercase;color:var(--pirinc-koyu);white-space:nowrap}
.k__not{padding:.375rem 0 .25rem;font-size:.9375rem;line-height:1.45;color:var(--metin-acik)}
/* während der Suche: Zähler und Hinweis ausblenden, sie gelten für die ganze Kategorie */
.ariyor .k__sayi,.ariyor .k__not{display:none}

.u{display:flex;align-items:baseline;justify-content:space-between;gap:1.125rem;padding:.8125rem 0;border-bottom:1px solid var(--cizgi-acik)}
.u__ad,.s__ad{min-width:0;font:600 1.3125rem/1.25 var(--serif);color:var(--lacivert);overflow-wrap:break-word}
.u__f,.s__f{flex:none;font:700 1.3125rem/1.25 var(--serif);font-variant-numeric:lining-nums tabular-nums;color:var(--lacivert);white-space:nowrap}

/* Flaschen: je Marke ein Block, Größen als Kacheln. Nur vorhandene Größen, keine leeren Kacheln. */
.s{padding:.9375rem 0 1.0625rem;border-bottom:1px solid var(--cizgi-acik)}
.s__boy{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.5rem;margin-top:.625rem}
@media (max-width:29.99em){
  .s__boy{grid-template-columns:repeat(6,minmax(0,1fr))}
  /* Kacheln fuellen jede Zeile ganz aus (keine Luecke): 6er-Raster, Kachel = 2 Spalten; bei 5 Groessen sind die letzten zwei breiter, bei 4 und 2 stehen je zwei nebeneinander */
  .s__boy li{grid-column:span 2}
  .s__boy li:first-child:nth-last-child(5) ~ li:nth-child(n+4),
  .s__boy li:first-child:nth-last-child(4),.s__boy li:first-child:nth-last-child(4) ~ li,
  .s__boy li:first-child:nth-last-child(2),.s__boy li:first-child:nth-last-child(2) ~ li{grid-column:span 3}
  .s__boy li:only-child{grid-column:span 6}
}
.s__boy li{display:flex;flex-direction:column;align-items:center;gap:.125rem;padding:.5rem .25rem .5625rem;border:1px solid var(--cizgi);border-radius:.625rem;background:var(--kagit);text-align:center}
.s__cl{font:500 .8125rem/1.2 var(--sans);letter-spacing:.08em;color:var(--metin-acik)}
.s__f{font-size:1.25rem}
.ul + .siseler,.siseler + .ul{margin-top:0}

/* ---------- Suche ohne Treffer ---------- */
.yok{padding:3rem 0 2rem;text-align:center}
.yok__b{font:600 1.625rem/1.2 var(--serif);color:var(--lacivert)}
.yok__a{max-width:19rem;margin:.5rem auto 1.25rem;font-size:.9375rem;color:var(--metin-acik)}
.yok__d,.alt__d{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;min-height:2.75rem;padding:0 1.25rem;border:1px solid var(--lacivert);border-radius:1.375rem;font:500 .8125rem/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;text-decoration:none;color:var(--lacivert)}

/* ---------- Fuß ---------- */
.alt{margin-top:1.5rem;padding:1.5rem var(--kenar-sag) calc(1.5rem + env(safe-area-inset-bottom)) var(--kenar-sol);border-top:1px solid var(--cizgi);background:var(--kagit);text-align:center;font-size:.9375rem;color:var(--metin)}
.alt__not{max-width:26rem;margin-inline:auto}
.alt__tarih{margin-top:.5rem;font-size:.875rem;color:var(--metin-acik)}
.alt__dugmeler{display:flex;flex-wrap:wrap;justify-content:center;gap:.625rem;margin-top:1.125rem}
/* beide Knöpfe nebeneinander, auch bei 320 px: gleiche Breite, gleiche Unterkante */
.alt__d{flex:1 1 7.5rem;max-width:12rem;padding-inline:.5rem;letter-spacing:.11em}
.alt__orri{margin-top:1.25rem;font-size:.8125rem;color:var(--metin-acik)}
.alt__orri a{display:inline-block;padding:.75rem .25rem;margin:-.75rem 0;color:var(--lacivert);text-decoration-color:var(--pirinc);text-underline-offset:3px}

/* ---------- breitere Bildschirme ---------- */
@media (min-width:30em){
  .s__boy{grid-template-columns:repeat(5,minmax(0,1fr))}
}
@media (min-width:40em){
  body{background:var(--kum)}
  html{background:var(--kum)}
  .sayfa{margin-block:2rem;min-height:0;background:var(--krem);border:1px solid var(--cizgi);border-radius:1rem;box-shadow:0 2.5rem 4rem -3rem rgba(17,39,92,.45)}
  .bas{padding-top:1.75rem}
  .bas__logo{height:5.5rem}
  .cubuk{border-radius:0}
  .alt{border-radius:0 0 1rem 1rem}
  :root{--kenar-sol:1.75rem;--kenar-sag:1.75rem}
}
@media (hover:hover){
  .p:hover{border-color:var(--pirinc)}
  .p.aktif:hover{border-color:var(--lacivert)}
  .yok__d:hover,.alt__d:hover{background:var(--lacivert);color:var(--kagit)}
  .cubuk__ara:hover{border-color:var(--pirinc)}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{transition:none!important;animation:none!important}
}
@media print{
  .ara,.cubuk,.alt__dugmeler,.durum{display:none!important}
  body,html,.alt{background:#fff}
  .k{break-inside:avoid-page}
}