/* ==========================================================================
   TARAMISU — components
   ========================================================================== */

/* ============================================================ split rows */
.split {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: center;
  gap: clamp(2.25rem, 6vw, 5rem);
}
.split--wide-media { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); }
.split__media { position: relative; }
.split__media img {
  width: 100%; aspect-ratio: 4 / 3; object-fit: cover;
  border-radius: var(--radius-lg); background: var(--paper-3);
}
.split__media--tall img { aspect-ratio: 3 / 4; }
.split__media--arch img { border-radius: 999px 999px var(--radius-lg) var(--radius-lg); }
.split--reverse .split__media { order: 2; }

.media-note {
  position: absolute; right: clamp(-.5rem, 1vw, 1rem); bottom: -1.25rem;
  max-width: min(72%, 20rem);
  padding: 1rem 1.25rem;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: 0 20px 40px -26px rgba(60, 30, 40, .45);
  font-size: .86rem; line-height: 1.5; color: var(--ink-2);
}
.media-note b { display: block; font-family: var(--display); font-size: 1.15rem; color: var(--ink); }

@media (max-width: 800px) {
  .split, .split--wide-media { grid-template-columns: 1fr; }
  .split--reverse .split__media { order: 0; }
  .split__media--tall img { aspect-ratio: 4 / 3; }
  .media-note { position: static; max-width: none; margin-top: 1rem; box-shadow: none; }
}

/* ========================================================== SPEISEKARTE */
.menu-tabs {
  display: flex; gap: .5rem;
  margin-bottom: clamp(2rem, 4vw, 3rem);
  padding-bottom: 0;
  border-bottom: 1px solid var(--line);
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: x proximity;
}
.menu-tabs::-webkit-scrollbar { display: none; }
/* Underline tabs, not pills — closer to a printed card's index. */
.menu-tab {
  flex: none; scroll-snap-align: start;
  min-height: 2.9rem; padding: .65rem .2rem;
  margin-right: 1.75rem;
  border: 0; border-bottom: 2px solid transparent;
  background: transparent;
  font-family: var(--display);
  font-size: clamp(1.05rem, 3vw, 1.3rem);
  color: var(--muted); white-space: nowrap;
  transition: color .3s var(--ease), border-color .3s var(--ease);
}
.menu-tab:last-child { margin-right: 0; }
.menu-tab:hover { color: var(--ink); }
.menu-tab[aria-selected='true'] { color: var(--ink); border-bottom-color: var(--blossom-500); }

.menu-panel[hidden] { display: none; }
.menu-panel__title { margin-bottom: 1.75rem; font-size: clamp(1.9rem, 6vw, 3.1rem); }

.menu-cols { columns: 2; column-gap: clamp(2rem, 5vw, 4.5rem); }
@media (max-width: 760px) { .menu-cols { columns: 1; } }

.menu-group { break-inside: avoid; margin-bottom: clamp(2rem, 4vw, 2.75rem); }
.menu-group__title {
  font-size: clamp(1.25rem, 3.4vw, 1.65rem);
  text-transform: uppercase; letter-spacing: .06em;
  padding-bottom: .5rem; margin-bottom: .9rem;
  border-bottom: 1px solid var(--line);
}
.menu-group__note { margin: -.4rem 0 .9rem; font-size: .88rem; color: var(--accent-text); }
.menu-group__cols {
  display: flex; justify-content: flex-end; gap: 1.5rem;
  margin-bottom: .5rem;
  font-size: .82rem; color: var(--muted);
}
.menu-group__cols span { width: 3.9rem; text-align: right; }

.menu-item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: baseline;
  gap: .25rem .75rem;
  padding-block: .42rem;
}
.menu-item + .menu-item { border-top: 1px dotted var(--paper-3); }
.menu-item__name { font-weight: 350; hyphens: none; }
.menu-item__sub {
  grid-column: 1 / -1;
  margin-top: -.15rem;
  font-size: .84rem; line-height: 1.45; color: var(--muted);
}
.menu-item__prices { display: flex; gap: 1.5rem; flex: none; font-variant-numeric: tabular-nums; }
.menu-item__prices span { width: 3.9rem; text-align: right; color: var(--ink-2); }
.menu-item__price { font-variant-numeric: tabular-nums; color: var(--ink-2); white-space: nowrap; }
.menu-item__unit { font-size: .8rem; color: var(--muted); margin-right: .4rem; }
.menu-item__variants { grid-column: 1 / -1; display: grid; gap: .15rem; margin-top: .1rem; }
.menu-item__variant {
  display: flex; justify-content: flex-end; gap: .75rem;
  font-size: .86rem; color: var(--muted);
}
.menu-item__variant b { font-weight: 400; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.menu-subhead {
  margin: 1.1rem 0 .35rem;
  font-size: .74rem; font-weight: 550;
  letter-spacing: .2em; text-transform: uppercase; color: var(--accent-text);
}
.menu-item:first-child .menu-subhead,
.menu-subhead:first-child { margin-top: 0; }

.menu-foot {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 1.25rem;
  margin-top: clamp(2rem, 4vw, 3rem); padding-top: 1.75rem;
  border-top: 1px solid var(--line);
}
.menu-foot p { max-width: 46ch; font-size: .9rem; color: var(--muted); font-style: italic; }

/* ============================================================== carousel */
.carousel { position: relative; }
.carousel__track {
  display: flex; gap: clamp(.75rem, 2vw, 1.25rem);
  overflow-x: auto; overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding-bottom: .5rem;
}
.carousel__track::-webkit-scrollbar { display: none; }
.carousel__item {
  flex: 0 0 clamp(210px, 62vw, 320px);
  scroll-snap-align: center;
}
@media (min-width: 700px) { .carousel__item { flex-basis: 300px; scroll-snap-align: start; } }

.ig-card {
  display: block; position: relative;
  aspect-ratio: 1; overflow: hidden;
  border-radius: var(--radius-lg);
  background: var(--blossom-100);
  border: 1px solid var(--blossom-200);
}
.ig-card img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease-out); }
.ig-card:hover img { transform: scale(1.05); }
.ig-card__empty {
  position: absolute; inset: 0;
  display: grid; place-content: center; justify-items: center; gap: .75rem;
  padding: 1.5rem; text-align: center;
  font-size: .82rem; color: var(--blossom-700);
}
.ig-card__empty img { width: 84px; height: auto; opacity: .75; }
.ig-card__cap {
  position: absolute; inset: auto 0 0 0;
  padding: 2.5rem 1rem .9rem;
  background: linear-gradient(transparent, rgba(27, 22, 19, .8));
  color: #fff; font-size: .82rem;
  opacity: 0; transition: opacity .4s var(--ease);
}
.ig-card:hover .ig-card__cap, .ig-card:focus-visible .ig-card__cap { opacity: 1; }

.carousel__nav { display: flex; gap: .5rem; margin-top: 1.5rem; }
.carousel__btn {
  width: 44px; height: 44px; display: grid; place-items: center;
  border: 1px solid var(--line); border-radius: 50%;
  color: var(--ink-2);
  transition: background .3s, color .3s, border-color .3s;
}
.carousel__btn:hover { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.carousel__btn:disabled { opacity: .3; cursor: default; }
.carousel__btn:disabled:hover { background: none; color: var(--ink-2); border-color: var(--line); }
.carousel__btn svg { width: 16px; height: 16px; }

/* ================================================================= steps */
.steps { display: grid; gap: clamp(1rem, 2.5vw, 1.5rem); counter-reset: step; }
@media (min-width: 720px) { .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.step {
  position: relative;
  padding: clamp(1.4rem, 3vw, 1.9rem);
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  transition: border-color .4s var(--ease), transform .4s var(--ease);
}
.step:hover { border-color: var(--blossom-300); }
.step::before {
  counter-increment: step; content: counter(step, decimal-leading-zero);
  display: block; margin-bottom: .75rem;
  font-family: var(--display); font-size: 1.5rem; color: var(--blossom-400);
}
.step h3 { font-family: var(--sans); font-size: 1.05rem; font-weight: 500; margin-bottom: .5rem; }
.step p { font-size: .93rem; color: var(--ink-2); }

.badge-big {
  display: inline-grid; place-items: center; gap: .1rem;
  width: clamp(6.5rem, 18vw, 8.5rem); aspect-ratio: 1;
  border: 1px solid var(--blossom-300); border-radius: 50%;
  background: var(--paper);
  text-align: center;
}
.badge-big b { font-family: var(--display); font-size: clamp(2rem, 6vw, 2.75rem); line-height: 1; color: var(--blossom-600); }
.badge-big span { font-size: .66rem; letter-spacing: .18em; text-transform: uppercase; color: var(--muted); }

/* ================================================================== form */
.form { display: grid; gap: 1rem; }
.form__row { display: grid; gap: 1rem; }
@media (min-width: 620px) { .form__row { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.field { display: grid; gap: .4rem; }
.field label { font-size: .74rem; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.field input, .field textarea, .field select {
  width: 100%; min-height: 3rem;
  padding: .8rem 1rem;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  font-size: 1rem;
  transition: border-color .3s var(--ease), background .3s var(--ease);
}
.field textarea { min-height: 7.5rem; resize: vertical; }
.field input:focus, .field textarea:focus, .field select:focus {
  border-color: var(--blossom-400); background: #fff; outline: none;
}
.field input::placeholder, .field textarea::placeholder { color: #B6ABA3; }
.form__note { font-size: .84rem; color: var(--muted); }
.form__msg { font-size: .9rem; min-height: 1.4em; color: var(--accent-text); }
.form button[type='submit'] { justify-self: start; }
@media (max-width: 619px) { .form button[type='submit'] { justify-self: stretch; } }

/* ================================================================== map */
.map-card {
  position: relative;
  aspect-ratio: 4 / 3;
  min-height: 300px;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--paper-3);
  border: 1px solid var(--line);
}
.map-card iframe { width: 100%; height: 100%; border: 0; display: block; }
.map-consent {
  position: absolute; inset: 0;
  display: grid; place-content: center; justify-items: center; gap: 1rem;
  padding: clamp(1.5rem, 5vw, 2.5rem); text-align: center;
  background:
    linear-gradient(rgba(250,246,242,.92), rgba(250,246,242,.92)),
    repeating-linear-gradient(45deg, var(--paper-2) 0 12px, var(--paper-3) 12px 24px);
}
.map-consent p { max-width: 34ch; font-size: .9rem; color: var(--ink-2); }
@media (max-width: 800px) { .map-card { aspect-ratio: 1; min-height: 260px; } }

/* ================================================================ hours */
.hours { width: 100%; border-collapse: collapse; }
.hours th { text-align: left; font-weight: inherit; }
.hours tr { border-bottom: 1px solid var(--line); }
.hours tr:last-child { border-bottom: 0; }
.hours td, .hours th { padding-block: .8rem; font-size: .97rem; }
.hours td:last-child { text-align: right; font-variant-numeric: tabular-nums; color: var(--ink-2); }
.hours .is-today { color: var(--ink); }
.hours .is-today th { font-weight: 550; position: relative; padding-left: 1.1rem; }
.hours .is-today th::before {
  content: ''; position: absolute; left: 0; top: 50%;
  width: 5px; height: 5px; margin-top: -2.5px;
  border-radius: 50%; background: var(--blossom-400);
}
.hours .is-closed td:last-child { color: var(--muted); }

.info-list { display: grid; gap: 1.1rem; }
.info-list > div { display: grid; grid-template-columns: 1.4rem 1fr; gap: .85rem; align-items: start; }
.info-list svg { width: 1.15rem; height: 1.15rem; margin-top: .2rem; color: var(--blossom-500); }
.info-list a { border-bottom: 1px solid var(--blossom-200); transition: border-color .3s; }
.info-list a:hover { border-color: var(--blossom-500); }

/* ============================================================== gallery */
.gallery { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(.75rem, 2vw, 1.25rem); }
.gallery img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: var(--radius-lg); }
.gallery > *:first-child { grid-column: span 2; }
.gallery > *:first-child img { aspect-ratio: 16 / 10; }
@media (min-width: 760px) {
  .gallery { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .gallery > *:first-child { grid-column: span 2; grid-row: span 2; }
  .gallery > *:first-child img { aspect-ratio: 1; }
}

.tag-cloud { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1.75rem; }

/* ================================================================ events */
.check-list { display: grid; gap: .85rem; margin-top: 1.75rem; }
.check-list li { display: grid; grid-template-columns: 1.15rem 1fr; gap: .8rem; align-items: start; font-size: .97rem; }
.check-list svg { width: 1.15rem; height: 1.15rem; margin-top: .3rem; color: var(--blossom-400); flex: none; }

/* ============================================================ peaks note */
.note-strip {
  display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.5rem;
  padding: clamp(1.1rem, 3vw, 1.5rem) clamp(1.25rem, 3vw, 2rem);
  background: var(--blossom-50);
  border: 1px solid var(--blossom-200);
  border-radius: var(--radius-lg);
  font-size: .93rem; color: var(--ink-2);
}
.note-strip p { flex: 1 1 18rem; }
.note-strip b { color: var(--ink); }

/* ============================================================= pillars
   The three ways into the site. Editorial cards: image, name, one line. */
.pillars {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1.75rem, 4vw, 3rem);
}
.pillar__img { display: block; overflow: hidden; border-radius: var(--radius-lg); background: var(--paper-3); }
.pillar__img img {
  width: 100%; aspect-ratio: 4 / 3; object-fit: cover;
  transition: transform 1s var(--ease-out);
}
.pillar:hover .pillar__img img { transform: scale(1.04); }
.pillar h3 {
  margin: 1.15rem 0 .5rem;
  font-size: clamp(1.4rem, 3.2vw, 1.8rem);
}
.pillar h3 a { transition: color .3s var(--ease); }
.pillar:hover h3 a { color: var(--blossom-700); }
.pillar p { font-size: .97rem; color: var(--ink-2); margin-bottom: .9rem; }
@media (max-width: 860px) {
  .pillars { grid-template-columns: 1fr; gap: 2rem; }
  .pillar__img img { aspect-ratio: 16 / 10; }
  .pillar h3 { margin-top: .9rem; }
}


/* ------------------------------------------- Instagram card additions */
.ig-card { aspect-ratio: 4 / 5; }
.ig-card__play {
  position: absolute; top: .75rem; right: .75rem;
  width: 26px; height: 26px; padding: 5px;
  color: #fff; background: rgba(27, 22, 19, .45);
  border-radius: 50%; backdrop-filter: blur(4px);
}
.ig-card__cap {
  display: grid; gap: .2rem;
  padding: 3.5rem .95rem .95rem;
  opacity: 1;
  background: linear-gradient(transparent, rgba(27, 22, 19, .55) 38%, rgba(27, 22, 19, .88));
}
.ig-card__cap b { font-family: var(--display); font-size: 1.05rem; font-weight: 400; line-height: 1.2; }
.ig-card__cap span { font-size: .82rem; color: rgba(255, 255, 255, .78); line-height: 1.4; }

/* ------------------------------------------------------- page header */
.page-head { padding-block: clamp(8rem, 20vh, 11rem) clamp(2.5rem, 6vw, 4rem); position: relative; }
.page-head__branch {
  position: absolute; top: 2rem; right: -12%;
  width: min(80vw, 640px); max-width: none; opacity: .5; pointer-events: none;
}
.page-head .wrap { position: relative; z-index: 2; }
.page-head h1 { font-size: clamp(2.6rem, 9vw, 4.8rem); }
.page-head p { max-width: 48ch; margin-top: 1.25rem; }
.crumb { font-size: .92rem; color: var(--muted); margin-bottom: 1rem; }
.crumb a { border-bottom: 1px solid var(--line); }
.crumb a:hover { border-color: var(--blossom-400); }

/* one-off numeric callout (used for the 5-piece secondhand rule) */
.rule-num { margin-top: 1.75rem; font-size: 1.02rem; color: var(--ink-2); }
.rule-num b {
  font-family: var(--display); font-size: 2.4rem; font-weight: 400;
  color: var(--blossom-600); margin-right: .5rem; vertical-align: -.12em;
}

/* pull quote (Tara's line on the home page) */
.pull {
  margin: 1.75rem 0 1.25rem;
  padding-left: 1.25rem;
  border-left: 2px solid var(--blossom-300);
  font-family: var(--display); font-style: italic;
  font-size: clamp(1.2rem, 3vw, 1.5rem); line-height: 1.35;
  color: var(--ink);
}

.credit {
  margin-top: .5rem;
  font-size: .78rem; color: var(--muted);
  text-align: right;
}

/* a second, smaller image stacked under a portrait */
.stack-img { margin-top: clamp(.75rem, 2vw, 1.1rem); }
.stack-img img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--radius-lg); }
.stack-img figcaption { margin-top: .5rem; font-size: .82rem; color: var(--muted); }

/* closing image band: the last thing you see before the footer */
.closing { position: relative; }
.closing img {
  width: 100%;
  aspect-ratio: 21 / 9;
  object-fit: cover;
  object-position: center 55%;
}
.closing__cap {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 3rem clamp(1.25rem, 5vw, 3.5rem) clamp(1rem, 3vw, 1.75rem);
  background: linear-gradient(transparent, rgba(27, 22, 19, .75));
  color: #fff; font-size: .88rem;
}
@media (max-width: 700px) { .closing img { aspect-ratio: 4 / 3; } }

/* --------------------------------------------------- Anfahrt, draft 1
   The address, the hours, a "Route planen" button and the Route action in the
   sticky bar already answer "where is it". The embedded map card repeated
   that and cost most of a phone screen, so draft 1 drops it along with the
   section heading. Draft 2 keeps both — see design-b.css. */

/* Honeypot: buiten beeld voor mensen, zichtbaar voor bots. display:none zou
   door sommige bots overgeslagen worden, daarom zo. */
.form__trap {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* ================================================ legal pages
   Impressum en privacy zijn leespagina's: smalle kolom, rustige koppen,
   genoeg lucht tussen de blokken. */
.legal h2 {
  margin-top: clamp(2.25rem, 5vw, 3rem);
  margin-bottom: .85rem;
}
.legal > h2:first-child { margin-top: 0; }
.legal p, .legal ul { color: var(--ink-2); line-height: 1.75; }
.legal p + p { margin-top: 1rem; }
.legal ul { margin-top: 1rem; padding-left: 1.1rem; display: grid; gap: .75rem; }
.legal li { padding-left: .35rem; }
.legal li::marker { color: var(--blossom-400); }
.legal a {
  color: inherit;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: .22em;
  text-decoration-color: var(--line);
  transition: text-decoration-color .3s;
}
.legal a:hover { text-decoration-color: currentColor; }
.legal b { color: var(--ink); font-weight: 500; }

/* ================================================== cookie consent
   Op de telefoon staat de kaart onderaan, binnen duimbereik en boven de
   vaste actiebalk. Op een breed scherm komt hij in het midden te staan,
   met een zachte waas erachter zodat de keuze opvalt zonder te schreeuwen. */
.consent {
  position: fixed;
  z-index: 120;
  inset: auto 0 0 0;
  padding: 0 var(--gutter);
  padding-bottom: calc(3.5rem + env(safe-area-inset-bottom, 0px) + .75rem);
  display: flex;
  justify-content: center;
  pointer-events: none;
}
.consent__box {
  pointer-events: auto;
  width: 100%;
  max-width: 34rem;
  background: var(--paper);
  border: 1px solid var(--line);
  padding: clamp(1.4rem, 5vw, 1.9rem);
  box-shadow: 0 18px 50px rgba(27, 22, 19, .18);
  opacity: 0;
  transform: translateY(14px);
  transition: opacity .32s ease, transform .32s cubic-bezier(.22, .61, .36, 1);
}
.consent.is-in .consent__box { opacity: 1; transform: none; }
.consent__box:focus { outline: none; }

.consent__title { font-size: clamp(1.15rem, 1.05rem + .5vw, 1.35rem); letter-spacing: .01em; }
.consent__text {
  margin-top: .75rem;
  font-size: .95rem;
  line-height: 1.65;
  color: var(--ink-2);
}
.consent__actions { display: grid; gap: .6rem; margin-top: 1.35rem; }
.consent__btn { width: 100%; }
.consent__links {
  display: flex; flex-wrap: wrap; align-items: center; gap: .6rem;
  margin-top: 1.1rem;
  font-size: .82rem;
  color: var(--muted);
}
.consent__links a { color: inherit; border-bottom: 1px solid var(--line); }
.consent__links a:hover { color: var(--ink); }

/* Een knop die als voetnootlink moet lezen. */
.footer__linkbtn {
  background: none; border: 0; padding: 0;
  font: inherit; color: inherit; cursor: pointer;
  transition: color .3s;
}
.footer__linkbtn:hover { color: var(--blossom-300); }

@media (min-width: 761px) {
  .consent {
    inset: 0;
    padding: var(--gutter);
    align-items: center;
    background: rgba(27, 22, 19, 0);
    transition: background .32s ease;
  }
  .consent.is-in { background: rgba(27, 22, 19, .34); pointer-events: auto; }
  .consent__box { transform: translateY(20px) scale(.98); }
  .consent.is-in .consent__box { transform: none; }
  .consent__actions { grid-template-columns: 1fr 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  .consent__box { transition: opacity .01s; transform: none; }
}

/* ============================================================ Neuigkeiten
   Posts Tara writes in the Studio. The section stays hidden while there
   are none. */
.news {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
  gap: clamp(1.75rem, 4vw, 3rem);
}
.news-card__img {
  width: 100%; aspect-ratio: 4 / 3; object-fit: cover;
  border-radius: var(--radius-lg); background: var(--paper-3);
  margin-bottom: 1.15rem;
}
.news-card__date {
  font-size: .72rem; font-weight: 500; letter-spacing: .2em; text-transform: uppercase;
  color: var(--accent-text); margin-bottom: .5rem;
}
.news-card h3 { font-size: clamp(1.4rem, 3.2vw, 1.8rem); margin-bottom: .5rem; }
.news-card__text { font-size: .97rem; color: var(--ink-2); white-space: pre-line; }
.news-card .link-arrow { margin-top: .9rem; }
/* one post alone: photo beside the text instead of a lonely narrow card */
.news--single { grid-template-columns: minmax(0, 1fr); max-width: 52rem; }
@media (min-width: 701px) {
  .news--single .news-card--photo {
    display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
    gap: clamp(1.5rem, 4vw, 2.75rem); align-items: center;
  }
  .news--single .news-card__img { margin-bottom: 0; }
}

/* A notice above the nav on every page (Studio: "Hinweis ganz oben") */
.banner {
  position: fixed; inset: 0 0 auto 0; z-index: 905;
  display: flex; align-items: center; justify-content: center; gap: .75rem;
  padding: .55rem 3rem .55rem var(--gutter);
  background: var(--blossom-700); color: #fff;
  font-size: .9rem; line-height: 1.35; text-align: center;
}
.banner__text { border-bottom: 1px solid rgba(255, 255, 255, .45); }
.banner__close {
  position: absolute; right: .25rem; top: 50%; transform: translateY(-50%);
  width: 2.75rem; height: 2.75rem;
  background: none; border: 0; color: #fff; font-size: 1.4rem; line-height: 1; cursor: pointer;
}
.has-banner .nav { top: var(--banner-h, 0px); }

/* ======================================================= Google-Bewertung
   Reads like the line under a place name on Google Maps: G, score, stars,
   count. The stars use the yellow Google uses, the rest is in our type. */
.grating {
  /* a line of its own, never beside the link above it */
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: .3rem .5rem; margin-top: 1.1rem;
  font-size: .92rem; line-height: 1.2; color: var(--ink-2);
}
.grating[hidden] { display: none; }
.grating--block { justify-content: flex-start; margin-top: clamp(1.5rem, 3vw, 2rem); }
.grating__g { flex: none; }
.grating__score { font-weight: 500; color: var(--ink); font-variant-numeric: tabular-nums; }
.grating__stars { position: relative; display: inline-block; width: 90px; height: 18px; flex: none; }
.grating__stars svg { position: absolute; inset: 0 auto auto 0; }
.grating__off { fill: #DADCE0; }
.grating__on { fill: #FBBC04; }
.grating__fill { position: absolute; inset: 0 auto 0 0; overflow: hidden; }
.grating__count { border-bottom: 1px solid var(--line); transition: border-color .3s var(--ease); }
.grating:hover .grating__count { border-bottom-color: currentColor; }