/*
 * Styles for the dynamic homepage blocks.
 *
 * Values are measured from the approved HTML export, not eyeballed. The palette
 * is written as literals rather than Elementor globals so the blocks render
 * identically outside Elementor (shortcode in a theme template, classic editor).
 *
 *   navy-deep #081025   navy #121E39     gold #CD9C34   gold-light #E1AF3B
 *   cream     #FAF3E5   foreground #0D1528
 *   muted-fg  #454D5E   border #E3DDD1   secondary #F3EEE3   card #fff
 */

.sb-blocks-scope,
.sb-stats,
.sb-cards,
.sb-recent,
.sb-searchband,
.sb-results,
.sb-hero {
  --sb-navy: #081025;
  --sb-gold: #CD9C34;
  --sb-gold-light: #E1AF3B;
  --sb-cream: #FAF3E5;
  --sb-fg: #0D1528;
  --sb-muted-fg: #454D5E;
  --sb-border: #E3DDD1;
  --sb-card: #fff;
  /* The export's radii, measured: rounded-md 12, rounded-xl 18, rounded-2xl 22.
   * This token was 14, which put every form control, button and 'Neu
   * eingetragen' row 2px off the design. */
  --sb-radius: 12px;
  --sb-radius-lg: 22px;
  --sb-secondary: #F3EEE3;
  /* Tailwind's shadow-sm / shadow-md as this export compiles them. */
  --sb-shadow-sm: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1);
  --sb-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
  font-family: Inter, ui-sans-serif, system-ui, sans-serif;
  /* Inherited, not just declared per rule: the child theme sets 16.5px/1.62 and
   * a warm-grey ink on body.sb-app, which reached every block value that was
   * not explicitly set. */
  font-size: 16px;
  line-height: 24px;
  color: var(--sb-fg);
}

/* ---------------------------------------------------------------------------
 * Stats bar — design section 2
 * section: 1px border top+bottom, bg secondary/40
 * grid:    max 1280, padding 96/24, 4 equal columns, 1px dividers between cells
 * value:   Cormorant Garamond 36/600 line-height 40, navy
 * label:   14/20, muted, margin-top 4
 * ------------------------------------------------------------------------- */

.sb-stats {
  border-top: 1px solid var(--sb-border);
  border-bottom: 1px solid var(--sb-border);
  background: rgba(243, 238, 227, 0.4);
}

.sb-stats__grid {
  max-width: 1280px;
  margin-inline: auto;
  padding: 96px 24px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}

.sb-stats__cell {
  padding-inline: 24px;
  text-align: center;
}

/* Dividers sit BETWEEN cells only (the export uses divide-x, not a border on
   every child), so the first cell in each row must not carry one. */
.sb-stats__cell + .sb-stats__cell {
  border-left: 1px solid var(--sb-border);
}

.sb-stats__value {
  font-family: "Cormorant Garamond", ui-serif, Georgia, serif;
  font-size: 36px;
  font-weight: 600;
  line-height: 40px;
  color: var(--sb-navy);
}

.sb-stats__label {
  margin-top: 4px;
  font-size: 14px;
  line-height: 20px;
  color: var(--sb-muted-fg);
}

@media (max-width: 767.98px) {
  .sb-stats__grid {
    grid-template-columns: repeat(2, 1fr);
    padding-block: 80px;
    padding-inline: 16px;
  }
  /* The export below md is `grid-cols-2 divide-y divide-x-0` with `px-4` cells.
     Tailwind v4's divide-y is a BOTTOM rule on every child but the last — so
     cells 1-3 carry one, cell 4 none, no vertical dividers, no extra spacing.
     Measured 24 Sep in the export at 390px; ours was 63px taller. */
  .sb-stats__cell {
    padding-inline: 16px;
  }
  .sb-stats__cell + .sb-stats__cell {
    border-left: 0;
  }
  .sb-stats__cell:not(:last-child) {
    border-bottom: 1px solid var(--sb-border);
  }
  .sb-stats__value {
    font-size: 30px;
    line-height: 36px;
  }
  .sb-stats__label {
    font-size: 12px;
    line-height: 16px;
  }
}

/* ---------------------------------------------------------------------------
 * Stable cards — design sections 5 and 6, and the search page's result grid.
 * The card is one component: :is(.sb-cards, .sb-results) is the list of
 * containers that hold it. Add to that list rather than restyling a copy.
 * section 96/24 padding, 1280 max; head margin-bottom 24, items-end
 * eyebrow 14/600 uppercase .7px; title Cormorant 30/600 line-height 36, mt 4
 * grid 4 cols, gap 24; card radius 22, 1px border, shadow-sm
 * media 4/3 on #F4F0E7; badge pill at 12/12, 4px 10px, 12px/500
 * body padding 16, children 8 apart; name Cormorant 18/600 lh 22.5
 * ------------------------------------------------------------------------- */

:is(.sb-cards, .sb-results) .sb-cards__inner {
  max-width: 1280px;
  margin-inline: auto;
  padding: 96px 24px;
}

:is(.sb-cards, .sb-results) .sb-cards__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  margin-bottom: 24px;
}

:is(.sb-cards, .sb-results) .sb-cards__eyebrow {
  margin: 0;
  font-size: 14px;
  font-weight: 600;
  line-height: 20px;
  text-transform: uppercase;
  letter-spacing: 0.7px;
  color: var(--sb-navy);
}

:is(.sb-cards, .sb-results) .sb-cards__title {
  margin: 4px 0 0;
  font-family: "Cormorant Garamond", ui-serif, Georgia, serif;
  font-size: 30px;
  font-weight: 600;
  line-height: 36px;
  color: var(--sb-fg);
}

:is(.sb-cards, .sb-results) .sb-cards__grid {
  display: grid;
  grid-template-columns: repeat(var(--sb-cols, 4), 1fr);
  gap: 24px;
}

:is(.sb-cards, .sb-results) .sb-cards__empty {
  margin: 0;
  font-size: 14px;
  color: var(--sb-muted-fg);
}

:is(.sb-cards, .sb-results) .sb-card {
  display: block;
  overflow: hidden;
  border: 1px solid var(--sb-border);
  border-radius: var(--sb-radius-lg);
  background: var(--sb-card);
  box-shadow: var(--sb-shadow-sm);
  color: inherit;
  text-decoration: none;
  transition: transform 0.15s, box-shadow 0.15s;
}

:is(.sb-cards, .sb-results) .sb-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
}

:is(.sb-cards, .sb-results) .sb-card:focus-visible {
  outline: 2px solid var(--sb-gold);
  outline-offset: 2px;
}

:is(.sb-cards, .sb-results) .sb-card__media {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: #F4F0E7;
}

:is(.sb-cards, .sb-results) .sb-card__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.5s;
}

:is(.sb-cards, .sb-results) .sb-card:hover .sb-card__img {
  transform: scale(1.05);
}

/* No photo: a branded tile rather than an empty frame. Most stables will land
   here until the media gap is resolved. */
:is(.sb-cards, .sb-results) .sb-card__ph {
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, #F4F0E7, #E3DDD1);
  color: rgba(8, 16, 37, 0.25);
}

:is(.sb-cards, .sb-results) .sb-card__ph svg {
  width: 40px;
  height: 40px;
}

:is(.sb-cards, .sb-results) .sb-card__badge {
  position: absolute;
  left: 12px;
  top: 12px;
  border-radius: 9999px;
  background: rgba(254, 250, 241, 0.9);
  backdrop-filter: blur(4px);
  padding: 4px 10px;
  font-size: 12px;
  font-weight: 500;
  line-height: 16px;
  color: var(--sb-fg);
}

:is(.sb-cards, .sb-results) .sb-card__body {
  padding: 16px;
}

/* space-y-2. Both of these are (0,2,0); zeroing every child FIRST and adding
 * the gap after is what makes the pair work, rather than each component
 * carrying its own `margin: 0` and silently winning on source order. */
:is(.sb-cards, .sb-results) .sb-card__body > * {
  margin: 0;
}

:is(.sb-cards, .sb-results) .sb-card__body > * + * {
  margin-top: 8px;
}

:is(.sb-cards, .sb-results) .sb-card__name {
  font-family: "Cormorant Garamond", ui-serif, Georgia, serif;
  font-size: 18px;
  font-weight: 600;
  line-height: 22.5px;
  letter-spacing: -0.005em;
  color: var(--sb-fg);
}

:is(.sb-cards, .sb-results) .sb-card__loc {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 14px;
  line-height: 20px;
  color: var(--sb-muted-fg);
}

:is(.sb-cards, .sb-results) .sb-card__pin {
  width: 16px;
  height: 16px;
  flex: 0 0 auto;
}

:is(.sb-cards, .sb-results) .sb-card__rating {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  /* The row is 20px tall in the export. Its own font-size stays 16 (only the
   * avg and count children set their own); it is the LINE-HEIGHT that matters,
   * and without it the children take the 24px off the block scope and the card
   * body grows 4px. */
  line-height: 20px;
}

:is(.sb-cards, .sb-results) .sb-card__rating--none {
  font-size: 12px;
  color: var(--sb-muted-fg);
}

:is(.sb-cards, .sb-results) .sb-card__avg {
  font-size: 14px;
  font-weight: 600;
  color: var(--sb-fg);
}

:is(.sb-cards, .sb-results) .sb-card__count {
  font-size: 12px;
  color: var(--sb-muted-fg);
}

/* Two lines, then ellipsis — the design's line-clamp-2. */
:is(.sb-cards, .sb-results) .sb-card__desc {
  margin: 0;
  padding-top: 4px;
  font-size: 14px;
  line-height: 20px;
  color: var(--sb-muted-fg);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Star row: a grey glyph with a gold one clipped over it, so halves are exact. */
:is(.sb-cards, .sb-results) .sb-stars {
  display: inline-flex;
  gap: 2px;
}

:is(.sb-cards, .sb-results) .sb-star {
  position: relative;
  display: inline-block;
  width: 16px;
  height: 16px;
  line-height: 0;
}

:is(.sb-cards, .sb-results) .sb-star svg {
  width: 16px;
  height: 16px;
  display: block;
}

:is(.sb-cards, .sb-results) .sb-star__bg {
  fill: var(--sb-border);
}

:is(.sb-cards, .sb-results) .sb-star__fill {
  position: absolute;
  inset: 0;
  overflow: hidden;
}

:is(.sb-cards, .sb-results) .sb-star__fg {
  fill: var(--sb-gold);
}

/* The export's card grid is `grid gap-6 sm:grid-cols-2 lg:grid-cols-4`, so the
 * boundaries are Tailwind's sm (640) and lg (1024) — NOT 575 and 1024. Written
 * as .98 so a fractional viewport width cannot fall between two rules. At
 * exactly 1024 the old `max-width: 1024px` gave two columns where the design
 * gives four. */
@media (max-width: 1023.98px) {
  :is(.sb-cards, .sb-results) .sb-cards__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 767.98px) {
  :is(.sb-cards, .sb-results) .sb-cards__inner {
    padding-block: 80px;
    padding-inline: 16px;
  }
  /* `text-3xl md:text-3xl` on the head is 24px below md in the export. */
  :is(.sb-cards, .sb-results) .sb-cards__title {
    font-size: 24px;
    line-height: 32px;
  }
}

@media (max-width: 639.98px) {
  :is(.sb-cards, .sb-results) .sb-cards__grid {
    grid-template-columns: 1fr;
  }
}

/* ---------------------------------------------------------------------------
 * Recently added / recently rated — design section 7
 * two panels, gap 24; panel radius 22, 1px border, padding 24, shadow-sm
 * head margin-bottom 16, icon + Cormorant 20/600
 * rows split by 1px rules, 8/12 padding, negative 8 inset so the hover
 * highlight bleeds to the panel padding edge exactly as in the export
 * Selectors are scoped under .sb-recent: the active theme styles bare h2/a and
 * would otherwise win on specificity.
 * ------------------------------------------------------------------------- */

.sb-recent .sb-recent__inner {
  max-width: 1280px;
  margin-inline: auto;
  padding: 96px 24px;
}

.sb-recent .sb-recent__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
}

.sb-recent .sb-recent__panel {
  border: 1px solid var(--sb-border);
  border-radius: var(--sb-radius-lg);
  background: var(--sb-card);
  padding: 24px;
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
}

.sb-recent .sb-recent__head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 16px;
}

.sb-recent .sb-recent__icon {
  width: 20px;
  height: 20px;
  flex: 0 0 auto;
  color: var(--sb-navy);
}

.sb-recent .sb-recent__title {
  margin: 0;
  font-family: "Cormorant Garamond", ui-serif, Georgia, serif;
  font-size: 20px;
  font-weight: 600;
  line-height: 28px;
  color: var(--sb-fg);
}

.sb-recent .sb-recent__list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.sb-recent .sb-recent__list li + li {
  border-top: 1px solid var(--sb-border);
}

.sb-recent .sb-recent__item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-inline: -8px;
  padding: 12px 8px;
  border-radius: var(--sb-radius);
  color: inherit;
  text-decoration: none;
  transition: color 0.15s, background-color 0.15s;
}

.sb-recent .sb-recent__item:hover {
  color: var(--sb-navy);
  background: rgba(8, 16, 37, 0.04);
}

.sb-recent .sb-recent__item:focus-visible {
  outline: 2px solid var(--sb-gold);
  outline-offset: 2px;
}

.sb-recent .sb-recent__main {
  display: block;
  min-width: 0;
}

.sb-recent .sb-recent__name {
  display: block;
  font-size: 16px;
  font-weight: 500;
  line-height: 24px;
  color: var(--sb-fg);
}

.sb-recent .sb-recent__city {
  display: block;
  font-size: 12px;
  line-height: 16px;
  color: var(--sb-muted-fg);
}

.sb-recent .sb-recent__meta {
  flex: 0 0 auto;
  font-size: 12px;
  line-height: 16px;
  color: var(--sb-muted-fg);
}

.sb-recent .sb-recent__rating {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.sb-recent .sb-recent__avg {
  font-size: 14px;
  font-weight: 600;
  color: var(--sb-fg);
}

/* The star row markup is shared with the cards block. */
.sb-recent .sb-stars {
  display: inline-flex;
  gap: 2px;
}

.sb-recent .sb-star {
  position: relative;
  display: inline-block;
  width: 14px;
  height: 14px;
  line-height: 0;
}

.sb-recent .sb-star svg {
  width: 14px;
  height: 14px;
  display: block;
}

.sb-recent .sb-star__bg {
  fill: var(--sb-border);
}

.sb-recent .sb-star__fill {
  position: absolute;
  inset: 0;
  overflow: hidden;
}

.sb-recent .sb-star__fg {
  fill: var(--sb-gold);
}

.sb-recent .sb-recent__empty {
  margin: 0;
  font-size: 14px;
  color: var(--sb-muted-fg);
}

@media (max-width: 767.98px) {
  .sb-recent .sb-recent__grid {
    grid-template-columns: 1fr;
  }
  .sb-recent .sb-recent__inner {
    padding-block: 80px;
    padding-inline: 16px;
  }
}

/* ---------------------------------------------------------------------------
 * Hero with search — design section 1
 * photo layer under a foreground/60 -> /40 -> background gradient
 * content max 1152, padding-top 128 / bottom 64, side 24
 * h1 Cormorant 60/600, line-height 1.05, tracking -0.025em, cream
 * lead 20px white/85, margin-top 20, max 576
 * form card radius 22, padding 20, bg card/95, shadow-md, backdrop blur
 * 12-col grid gap 12: country 3, query 4, radius 2, type 3; controls 44 tall
 * Scoped under .sb-hero — the theme styles bare h1/label/input/select.
 * ------------------------------------------------------------------------- */

.sb-hero {
  position: relative;
  overflow: hidden;
}

/* Explicit stacking: photo at 0, veil above it, content at 1. The export uses a
   -z-10 layer, but a negative z-index inside an Elementor container is fragile —
   the layer ends up behind an ancestor's background and the photo disappears. */
.sb-hero .sb-hero__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.sb-hero .sb-hero__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.sb-hero .sb-hero__veil {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(13, 21, 40, 0.6),
    rgba(13, 21, 40, 0.4),
    #FEFAF1
  );
}

.sb-hero .sb-hero__inner {
  position: relative;
  z-index: 1;
  max-width: 1152px;
  margin-inline: auto;
  padding: 128px 24px 64px;
}

.sb-hero .sb-hero__copy {
  max-width: 768px;
  color: var(--sb-cream);
  text-align: left;
}

.sb-hero .sb-hero__title {
  margin: 0;
  font-family: "Cormorant Garamond", ui-serif, Georgia, serif;
  font-size: 60px;
  font-weight: 600;
  line-height: 1.05;
  letter-spacing: -0.025em;
  color: var(--sb-cream);
}

/* `text-star` in the export — the star gold #CD9C34, not gold-light. */
.sb-hero .sb-hero__title-accent {
  color: #CD9C34;
}

.sb-hero .sb-hero__lead {
  margin: 20px 0 0;
  max-width: 576px;
  font-size: 20px;
  line-height: 28px;
  color: rgba(255, 255, 255, 0.85);
}

.sb-hero .sb-hero__form {
  margin-top: 32px;
  border: 1px solid var(--sb-border);
  border-radius: var(--sb-radius-lg);
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(8px);
  padding: 20px;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
}

.sb-sform .sb-sform__row {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 12px;
}

/* The theme's `.sb-field { margin-bottom: 24px }` (sb-components.css, for its
   own forms) reached these fields too: +24px under every field, measured 24 Sep
   as a form 24px taller on desktop and 104px taller on a phone. The grid gap is
   the only spacing the export has. */
.sb-sform .sb-field { margin: 0; }

.sb-sform .sb-field--country { grid-column: span 3; }
.sb-sform .sb-field--q       { grid-column: span 4; }
.sb-sform .sb-field--radius  { grid-column: span 2; }
.sb-sform .sb-field--type    { grid-column: span 3; }

.sb-sform .sb-field__label {
  display: block;
  margin-bottom: 6px;
  font-size: 12px;
  font-weight: 500;
  line-height: 16px;
  color: var(--sb-muted-fg);
}

.sb-sform .sb-field__wrap {
  position: relative;
}

.sb-sform .sb-field__icon {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  width: 16px;
  height: 16px;
  color: var(--sb-muted-fg);
  pointer-events: none;
}

:is(.sb-sform, .sb-results) .sb-control {
  width: 100%;
  height: 44px;
  border: 1px solid #EAE4D7;
  border-radius: var(--sb-radius);
  background: #FEFAF1;
  padding: 0 12px;
  font-family: inherit;
  font-size: 14px;
  line-height: 20px;
  color: var(--sb-fg);
  box-shadow: var(--sb-shadow-sm);
  appearance: none;
}

:is(.sb-sform, .sb-results) select.sb-control {
  /* room for the chevron drawn below */
  padding-right: 34px;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23454D5E' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  background-size: 16px 16px;
}

:is(.sb-sform, .sb-results) input.sb-control {
  background: transparent;
}

:is(.sb-sform, .sb-results) .sb-control--icon {
  padding-left: 36px;
}

:is(.sb-sform, .sb-results) .sb-control:focus-visible {
  outline: 2px solid var(--sb-gold);
  outline-offset: 1px;
}

/* "Use my location" (A7): an icon at the end of the field, a labelled button on phones below. */
.sb-sform .sb-field--q input.sb-control {
  padding-right: 44px;
}
.sb-sform .sb-locate {
  position: absolute;
  right: 4px;
  top: 4px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 36px;
  height: 36px;
  padding: 0;
  border: 0;
  border-radius: var(--sb-radius);
  background: transparent;
  color: var(--sb-muted-fg);
  font: inherit;
  cursor: pointer;
}
.sb-sform .sb-locate[hidden] { display: none; }
.sb-sform .sb-locate:hover { color: var(--sb-fg); background: #F3EEE2; }
.sb-sform .sb-locate:focus-visible { outline: 2px solid var(--sb-gold); outline-offset: 1px; }
.sb-sform .sb-locate:disabled { opacity: .55; cursor: progress; }
.sb-sform .sb-locate svg { width: 18px; height: 18px; flex: none; }
.sb-sform .sb-locate span {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
.sb-sform .sb-locate__hint {
  margin: 6px 0 0;
  font-size: 13px;
  line-height: 18px;
  color: var(--sb-muted-fg);
}
.sb-sform .sb-locate__hint[hidden] { display: none; }
.sb-sform .sb-sform__credit {
  margin: 8px 0 0;
  font-size: 12px;
  line-height: 16px;
  text-align: right;
  color: var(--sb-muted-fg);
}
.sb-results__hint .sb-link-btn {
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  color: inherit;
  text-decoration: underline;
  cursor: pointer;
}

.sb-sform .sb-sform__submit {
  display: flex;
  justify-content: flex-end;
  margin-top: 16px;
}

:is(.sb-hero, .sb-sform, .sb-results) .sb-btn,
.sb-hero .sb-hero__ctas .sb-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 44px;
  min-height: 44px;
  padding: 0 24px;
  border-radius: var(--sb-radius);
  border: 0;
  font-family: inherit;
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
  letter-spacing: normal;
  text-decoration: none;
  box-shadow: var(--sb-shadow-sm);
  cursor: pointer;
  transition: background-color 0.15s, color 0.15s, opacity 0.15s;
}

:is(.sb-hero, .sb-sform, .sb-results) .sb-btn__icon {
  width: 16px;
  height: 16px;
  flex: 0 0 auto;
}

:is(.sb-hero, .sb-sform, .sb-results) .sb-btn.sb-btn--primary {
  background: var(--sb-navy);
  color: var(--sb-cream);
}

:is(.sb-hero, .sb-sform, .sb-results) .sb-btn.sb-btn--primary:hover {
  background: #121E39;
}

:is(.sb-hero, .sb-sform, .sb-results) .sb-btn.sb-btn--ghost {
  background: var(--sb-secondary);
  color: #111C33;
}

:is(.sb-hero, .sb-sform, .sb-results) .sb-btn.sb-btn--ghost:hover {
  background: #EBE4D6;
}

:is(.sb-hero, .sb-sform, .sb-results) .sb-btn.sb-btn--gold {
  background: linear-gradient(135deg, #CD9C34 0%, #E1AF3B 100%);
  color: var(--sb-navy);
  font-weight: 600;
  box-shadow: var(--sb-shadow-md);
}

:is(.sb-hero, .sb-sform, .sb-results) .sb-btn.sb-btn--gold:hover {
  opacity: 0.9;
}

/* The export has two button sizes: the form submit is h-11 px-6 (the base rule
 * above) and the hero CTA row is h-10 px-8. */
.sb-hero .sb-hero__ctas .sb-btn {
  height: 40px;
  min-height: 40px;
  padding: 0 32px;
}

.sb-hero .sb-hero__ctas {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 24px;
}

/* The export changes the hero at ONE breakpoint, Tailwind's `md` (768): the
 * form is `grid gap-3 md:grid-cols-12`, the title `text-4xl md:text-6xl`, the
 * lead `text-lg md:text-xl` and the inner box `px-4 pb-10 pt-20 md:px-6
 * md:pb-16 md:pt-32`. This previously stepped at 900 and 575 with an
 * intermediate two-column form and a 40px title, which is a design decision the
 * client never approved — measured against the export at 390 the title came out
 * 34px where the design says 36. .98 rather than a whole pixel because a
 * fractional viewport width (routine under Windows display scaling) otherwise
 * falls between `max-width: 767px` and the desktop rules and matches neither. */
@media (max-width: 767.98px) {
  .sb-sform .sb-sform__row {
    grid-template-columns: 1fr;
  }
  .sb-sform .sb-field--country,
  .sb-sform .sb-field--q,
  .sb-sform .sb-field--radius,
  .sb-sform .sb-field--type {
    grid-column: span 1;
  }
  .sb-hero .sb-hero__inner {
    padding: 80px 16px 40px;
  }
  /* A7: on a phone the location button is a button with its label, under the field. */
  .sb-sform .sb-field--q input.sb-control { padding-right: 12px; }
  .sb-sform .sb-field__icon { top: 22px; }
  .sb-sform .sb-locate {
    position: static;
    width: 100%;
    height: 44px;
    margin-top: 8px;
    border: 1px solid #EAE4D7;
    background: #FEFAF1;
    color: var(--sb-fg);
    font-size: 14px;
    font-weight: 500;
  }
  .sb-sform .sb-locate span {
    position: static;
    width: auto;
    height: auto;
    overflow: visible;
    clip-path: none;
  }
  /* `p-4 md:p-5` on the form card; inputs `text-base md:text-sm` — 16px below md,
     which is also what keeps iOS from zooming into the field on focus. */
  .sb-hero .sb-hero__form {
    padding: 16px;
  }
  :is(.sb-sform, .sb-results) input.sb-control {
    font-size: 16px;
  }
  .sb-hero .sb-hero__title {
    font-size: 36px;
  }
  .sb-hero .sb-hero__lead {
    font-size: 18px;
  }
  /* The export's `flex flex-wrap` left each button at its text width, so the row
     broke differently per language and per phone (2+1 in one, 1+1+1 in another).
     Lead 18.10.: one fixed layout below md. Client 27.10. (A1): four buttons now —
     a 2 + 2 grid of equal widths, the same in every language. */
  .sb-hero .sb-hero__ctas {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }
  .sb-hero .sb-hero__ctas .sb-btn {
    width: 100%;
    padding: 0 12px;
  }
}

/* ---------------------------------------------------------------------------
 * Search page — suche.html
 *
 * Section 1 is a compact band, `border-b border-border bg-secondary/40 py-10`,
 * holding an h1, a muted result count (`mt-2 text-muted-foreground`) and the
 * same four-field form the hero uses, inside a `rounded-2xl … p-4 md:p-5` card.
 * Section 2 is `px-4 py-16 md:px-6 md:py-20` around a
 * `grid gap-6 sm:grid-cols-2 lg:grid-cols-3` of the same .sb-card the homepage
 * rails use — the export renders the identical component in both places.
 * ------------------------------------------------------------------------- */

.sb-searchband {
  border-bottom: 1px solid var(--sb-border);
  background: rgba(243, 238, 227, 0.4);
  padding-block: 40px;
}

.sb-searchband .sb-searchband__inner {
  max-width: 1280px;
  margin-inline: auto;
  padding-inline: 24px;
}

.sb-searchband .sb-searchband__title {
  margin: 0;
  font-family: "Cormorant Garamond", ui-serif, Georgia, serif;
  font-size: 36px;
  font-weight: 600;
  line-height: 40px;
  /* `tracking-tight` in this export is -0.005em, not the theme's -0.012em. */
  letter-spacing: -0.005em;
  color: var(--sb-fg);
}

/* The count is filled by sb-search.js. The line is reserved even while empty so
 * the form below does not jump down the moment the first response lands. */
.sb-searchband .sb-searchband__count {
  margin: 8px 0 0;
  min-height: 24px;
  font-size: 16px;
  line-height: 24px;
  color: var(--sb-muted-fg);
}

.sb-searchband .sb-searchband__formwrap {
  margin-top: 24px;
}

.sb-searchband .sb-sform {
  border: 1px solid var(--sb-border);
  border-radius: var(--sb-radius-lg);
  background: var(--sb-card);
  padding: 20px;
  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1);
}

.sb-results {
  max-width: 1280px;
  margin-inline: auto;
  padding: 80px 24px;
}

/* Sort + map toggle. The export has neither — it is a static page with no
 * controls — but the map is required by ENT-031 and the sort has been in the
 * build since the search page existed, so they sit in a right-aligned row above
 * the grid rather than being dropped to match a mockup that never had them. */
/* flex-wrap: on a phone the two do not fit one row (200px select + button in
 * 358px), and a flex-end row that overflows spills to the LEFT — off-screen and
 * unscrollable. The 28 Sep walk showed "Relevanz" cut at the left edge at 390px. */
.sb-results .sb-results__tools {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  align-items: center;
  gap: 8px;
  margin-bottom: 24px;
}

.sb-results .sb-results__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

/* The empty / error / loading states sb-search.js renders into #sb-results are
 * single blocks, not cards; let them span the whole row instead of sitting in a
 * third of it. */
.sb-results .sb-results__grid > .sb-state,
.sb-results .sb-results__grid > .sb-alert,
.sb-results .sb-results__grid > .sb-results__hint {
  grid-column: 1 / -1;
}
/* The "place search unavailable" line above the cards (15.10.2026): one full-width
 * line, no card margin. */
.sb-results .sb-results__grid > .sb-results__hint {
  margin: 0;
}

.sb-results .sb-pagination {
  display: flex;
  justify-content: center;
  gap: 6px;
  margin-top: 40px;
}

@media (max-width: 1023.98px) {
  .sb-results .sb-results__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 767.98px) {
  .sb-searchband .sb-searchband__inner {
    padding-inline: 16px;
  }
  .sb-searchband .sb-searchband__title {
    font-size: 30px;
    line-height: 36px;
  }
  .sb-searchband .sb-sform {
    padding: 16px;
  }
  .sb-results {
    padding: 64px 16px;
  }
}

@media (max-width: 639.98px) {
  .sb-results .sb-results__grid {
    grid-template-columns: 1fr;
  }
}

/* The toolbar's sort control is the same .sb-control as the form's selects, but
 * it sits on the page rather than inside the white card, so it needs its own
 * width — a full-width select in a flex row would eat the whole row. */
.sb-results .sb-results__tools .sb-control {
  width: auto;
  min-width: min(200px, 100%);
  max-width: 100%;
}

.sb-results .sb-results__tools .sb-sort {
  display: block;
}

/* The empty / error states are rendered by the theme (sb-search.js -> ui.renderState)
 * and still take their icon colour from the superseded claret palette. The export
 * has no empty state to copy, so this is a judgement: muted, not the old accent.
 * It goes away for good when sb-tokens.css is re-pointed at navy/gold. */
.sb-results .sb-state__icon {
  color: var(--sb-muted-fg);
}

/* Top list (RANK-001, [sb_top_list]) — a ranked list, not cards: rank, name, place, score. */
.sb-toplist { padding: 48px 0; }
.sb-toplist__rule { margin: 8px 0 24px; color: #454D5E; font-size: 14px; }
.sb-toplist__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.sb-toplist__item { display: grid; grid-template-columns: 44px 1fr auto auto; align-items: center; gap: 12px 16px; padding: 12px 16px; background: #fff; border: 1px solid #E3DDD1; border-radius: 12px; }
.sb-toplist__rank { font-family: "Cormorant Garamond", Georgia, serif; font-size: 28px; font-weight: 600; color: #A87B1E; text-align: center; font-variant-numeric: tabular-nums; }
.sb-toplist__main { display: flex; flex-direction: column; min-width: 0; }
.sb-toplist__name { font-weight: 600; color: #0D1528; text-decoration: none; }
.sb-toplist__name:hover, .sb-toplist__name:focus-visible { text-decoration: underline; }
.sb-toplist__place { font-size: 14px; color: #454D5E; }
.sb-toplist__score { font-size: 14px; color: #0D1528; white-space: nowrap; font-variant-numeric: tabular-nums; }
.sb-toplist__tag { font-size: 12px; padding: 2px 8px; border-radius: 999px; background: #F4F0E7; color: #454D5E; }
.sb-toplist__empty, .sb-toplist__off { color: #454D5E; }
@media (max-width: 639.98px) {
  .sb-toplist__item { grid-template-columns: 36px 1fr; }
  .sb-toplist__score, .sb-toplist__tag { grid-column: 2; justify-self: start; }
}

/* ---------------------------------------------------------------------------
 * Top 10 slider (F9, Widgets/TopSlider.php) — the card rail as a sideways list:
 * 4 cards a view on desktop, 2 below 1024, 1 and a peek of the next on phones.
 * Chips: the search form's control height (40), pill, navy when pressed.
 * ------------------------------------------------------------------------- */

/* B5: the TOP 10 mark (theme assets/brand/badge-top10.svg) beside the heading. */
.sb-top .sb-cards__head { justify-content: flex-start; align-items: center; gap: 20px; }
.sb-top .sb-top__badge { width: 72px; height: 72px; flex: none; }
@media (max-width: 767px) {
  .sb-top .sb-cards__head { gap: 14px; }
  .sb-top .sb-top__badge { width: 52px; height: 52px; }
}

.sb-top .sb-top__rule {
  margin: 8px 0 0;
  font-size: 14px;
  line-height: 20px;
  color: var(--sb-muted-fg);
}

.sb-top .sb-top__controls {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 24px;
  margin-bottom: 24px;
}

.sb-top .sb-top__group {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.sb-top .sb-top__chip {
  min-height: 40px;
  padding: 8px 16px;
  border: 1px solid var(--sb-border);
  border-radius: 9999px;
  background: var(--sb-card);
  color: var(--sb-fg);
  font: 500 14px/20px Inter, ui-sans-serif, system-ui, sans-serif;
  cursor: pointer;
  transition: background-color 0.15s, color 0.15s, border-color 0.15s;
}

/* Every state spelled out: Hello Elementor's reset.css paints button:hover AND
 * button:focus pink (#c36, white text) — a clicked chip kept focus and showed it. */
.sb-top .sb-top__chip:hover,
.sb-top .sb-top__chip:focus {
  border-color: var(--sb-navy);
  background: var(--sb-card);
  color: var(--sb-fg);
}

.sb-top .sb-top__chip[aria-pressed="true"],
.sb-top .sb-top__chip[aria-pressed="true"]:hover,
.sb-top .sb-top__chip[aria-pressed="true"]:focus {
  border-color: var(--sb-navy);
  background: var(--sb-navy);
  color: #fff;
}

.sb-top .sb-top__chip:focus-visible,
.sb-top .sb-top__nav:focus-visible,
.sb-top .sb-top__track:focus-visible {
  outline: 2px solid var(--sb-gold);
  outline-offset: 2px;
}

/* A6: every panel names its country ("Top 10 Reitschulen in Deutschland"). */
.sb-top .sb-top__panel-title {
  margin: 0 0 12px;
  font: 600 16px/24px Inter, ui-sans-serif, system-ui, sans-serif;
  color: var(--sb-fg);
}

.sb-top .sb-top__viewport {
  position: relative;
}

.sb-top .sb-top__track {
  --sb-per-view: 4;
  display: flex;
  gap: 24px;
  margin: -8px 0 0;
  padding: 8px 0 12px; /* room for the card's hover lift and shadow inside the scroller */
  list-style: none;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  overscroll-behavior-x: contain;
}

.sb-top .sb-top__track::-webkit-scrollbar {
  display: none;
}

.sb-top .sb-top__slide {
  flex: 0 0 calc((100% - (var(--sb-per-view) - 1) * 24px) / var(--sb-per-view));
  margin: 0;
  scroll-snap-align: start;
}

.sb-top .sb-top__slide > .sb-card {
  height: 100%;
}

.sb-top .sb-card__rank {
  position: absolute;
  right: 12px;
  top: 12px;
  display: grid;
  place-items: center;
  min-width: 32px;
  height: 32px;
  padding: 0 8px;
  border-radius: 9999px;
  background: var(--sb-navy);
  color: var(--sb-gold-light);
  /* Inter, not the display serif: Cormorant's old-style "1" reads as a small "I". */
  font: 700 14px/1 Inter, ui-sans-serif, system-ui, sans-serif;
  font-variant-numeric: lining-nums tabular-nums;
}

.sb-top .sb-top__nav {
  position: absolute;
  top: calc(50% - 26px);
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid var(--sb-border);
  border-radius: 9999px;
  background: var(--sb-card);
  color: var(--sb-fg);
  box-shadow: var(--sb-shadow-md);
  cursor: pointer;
}

.sb-top .sb-top__nav:hover,
.sb-top .sb-top__nav:focus {
  border-color: var(--sb-navy);
  background: var(--sb-card); /* reset.css: button:hover/focus → pink */
  color: var(--sb-fg);
}

.sb-top .sb-top__nav svg {
  width: 20px;
  height: 20px;
}

.sb-top .sb-top__nav--prev { left: -22px; }
.sb-top .sb-top__nav--next { right: -22px; }

@media (max-width: 1023.98px) {
  .sb-top .sb-top__track { --sb-per-view: 2; }
  .sb-top .sb-top__nav--prev { left: -8px; }
  .sb-top .sb-top__nav--next { right: -8px; }
}

@media (max-width: 639.98px) {
  .sb-top .sb-top__track { --sb-per-view: 1.15; gap: 16px; }
  .sb-top .sb-top__slide { flex-basis: calc((100% - 16px) / 1.15); }
  .sb-top .sb-top__nav { display: none; } /* swipe; the peek of the next card says there is more */
}