/* ===========================================================================
   Branchenkompass Sylt

   Palette: Rot, Schwarz, Weiß.

   Zwei Rottöne, und das aus einem Grund: Ein Rot, das auf Weiß als Fläche
   gut aussieht, ist als Fließtext zu hell. #E31E24 trägt weiße Schrift mit
   4,7:1 und taugt damit für Knöpfe; für Links und Textakzente steht das
   tiefere #B3121B bereit, das auf Weiß auf 7,0:1 kommt. Beides erfüllt
   WCAG AA, ohne dass die Marke blass wird.

   Sonst nur Schwarz und Grauwerte — kein zweiter Buntton. Das Rot wirkt
   dadurch stärker, weil es nichts neben sich hat.

   Alles hängt an Custom Properties. Ein anderer Rotton? Die drei Zeilen
   --sbk-rot, --sbk-rot-d und --sbk-rot-s ändern, der Rest zieht nach. Der dunkle Modus
   leitet sich mit ab.
   ======================================================================== */

.sbk-scope,
.sbk-suche, .sbk-liste, .sbk-grid, .sbk-details, .sbk-hero, .sbk-index {
  /* --- Grundtöne ------------------------------------------------------- */
  --sbk-sand:      #F7F7F8;   /* Seitengrund, ein Hauch von Weiß abgesetzt */
  --sbk-sand-2:    #EFEFF1;   /* leicht abgesetzte Fläche */
  --sbk-surface:   #FFFFFF;   /* Karten */
  --sbk-line:      #E2E2E6;   /* Linien */
  --sbk-line-soft: #EFEFF1;   /* sehr zurückgenommene Linien */

  /* --- Text ------------------------------------------------------------ */
  --sbk-ink:       #0E0E10;   /* Überschriften, 19:1 auf Weiß */
  --sbk-ink-2:     #3A3A3F;   /* Fließtext, 11:1 */
  --sbk-ink-3:     #6B6B73;   /* Beiwerk, 5,3:1 */

  /* --- Rot -------------------------------------------------------------- */
  --sbk-rot:       #E31E24;   /* Flächen und Knöpfe */
  --sbk-rot-d:     #B3121B;   /* Links, Text, Hover */
  --sbk-rot-s:     #FDECEC;   /* zarte Hinterlegung */

  /* Zweitfarbe: bewusst kein Buntton, sondern Schwarz auf Hellgrau. */
  --sbk-sea:       #2A2A30;
  --sbk-sea-s:     #EFEFF1;
  --sbk-dune:      #8A8A93;

  /* --- Form ------------------------------------------------------------ */
  --sbk-r-sm:      10px;
  --sbk-r:         14px;
  --sbk-r-lg:      20px;
  --sbk-r-full:    999px;

  --sbk-shadow:    0 1px 2px rgba(14,14,16,.05), 0 6px 18px -10px rgba(14,14,16,.18);
  --sbk-shadow-lg: 0 2px 4px rgba(14,14,16,.06), 0 22px 44px -22px rgba(14,14,16,.32);
  --sbk-ring:      0 0 0 4px rgba(227,30,36,.16);

  /* --- Schrift --------------------------------------------------------- */
  --sbk-font: -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue",
             Helvetica, Arial, sans-serif;

  color: var(--sbk-ink);
  font-family: var(--sbk-font);
  box-sizing: border-box;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.sbk-scope *, .sbk-suche *, .sbk-liste *, .sbk-grid *,
.sbk-details *, .sbk-hero *, .sbk-index * { box-sizing: border-box; }

/* --- Dunkler Modus -------------------------------------------------------
   Folgt der Systemeinstellung. Das Rot wird aufgehellt, sonst verschwindet
   es im Schwarz; die Knöpfe bekommen dafür dunkle statt weißer Schrift —
   weiß auf hellem Rot käme nur auf 3,3:1.                                  */
@media (prefers-color-scheme: dark) {
  .sbk-scope,
  .sbk-suche, .sbk-liste, .sbk-grid, .sbk-details, .sbk-hero, .sbk-index {
    --sbk-sand:      #0F0F12;
    --sbk-sand-2:    #16161A;
    --sbk-surface:   #17171C;
    --sbk-line:      #2C2C33;
    --sbk-line-soft: #232329;

    --sbk-ink:       #F4F4F5;
    --sbk-ink-2:     #C4C4CC;
    --sbk-ink-3:     #8E8E99;

    --sbk-rot:       #FF4D5A;
    --sbk-rot-d:     #FF7A85;
    --sbk-rot-s:     #2A1519;

    --sbk-sea:       #C4C4CC;
    --sbk-sea-s:     rgba(255,255,255,.06);
    --sbk-dune:      #8E8E99;

    --sbk-shadow:    0 1px 2px rgba(0,0,0,.4), 0 6px 18px -10px rgba(0,0,0,.7);
    --sbk-shadow-lg: 0 2px 4px rgba(0,0,0,.45), 0 22px 44px -22px rgba(0,0,0,.8);
    --sbk-ring:      0 0 0 4px rgba(255,77,90,.22);
  }

  /* Heller Knopf braucht dunkle Schrift. */
  .sbk-btn,
  .sbk-zeiten__heute,
  .sbk-karte__sponsor { color: #14141A; }
  .sbk-btn:hover { color: #14141A; }
}

/* ===========================================================================
   Abschirmung gegen das Theme
   ------------------------------------------------------------------------
   Das Verzeichnis lebt mitten in einer fremden Seite. Deren Theme setzt
   Regeln wie `h1, h2, h3 { font-family: Georgia }` — die schlagen die
   Vererbung vom Container und lassen die Kacheln plötzlich in Serifen
   erscheinen.

   Abgeschirmt wird nur, was Themes erfahrungsgemäß global setzen und was
   das Layout wirklich stört: Schriftart, Laufweite, Überschriftenfarbe.

   Für die Zurücksetzer darunter steht :where(), das keine Spezifität
   beisteuert — sonst schlägt `.sbk-scope button` die eigene Regel `.sbk-btn`
   und der Suchknopf verliert seine Fläche. Genau das ist hier einmal
   passiert.

   Kein !important: Wer bewusst überschreiben will, soll das können.
   ======================================================================== */

.sbk-scope h1, .sbk-scope h2, .sbk-scope h3, .sbk-scope h4,
.sbk-scope p, .sbk-scope a, .sbk-scope span, .sbk-scope div,
.sbk-scope button, .sbk-scope input, .sbk-scope select,
.sbk-scope dt, .sbk-scope dd, .sbk-scope li {
  font-family: var(--sbk-font);
}

/* text-transform und letter-spacing NUR auf Überschriften zurücksetzen.
   Auf der breiten Auswahl hätten sie die Versalien der eigenen Labels
   erschlagen — .sbk-scope span ist spezifischer als .sbk-sektion__label. */
.sbk-scope h1, .sbk-scope h2, .sbk-scope h3, .sbk-scope h4 {
  color: var(--sbk-ink);
  margin-top: 0;
  text-transform: none;
  letter-spacing: -.025em;
}

/* Zurücksetzer ohne Spezifität — die Komponenten weiter unten gewinnen. */
.sbk-scope :where(ul, ol) { list-style: none; margin: 0; padding: 0; }
.sbk-scope :where(button) { border: 0; background: none; cursor: pointer; }
.sbk-scope :where(svg)    { max-width: none; }
.sbk-scope :where(img)    { max-width: 100%; height: auto; }

/* ===========================================================================
   Bausteine
   ======================================================================== */

/* Strichführung der Oberflächen-Icons.
   Stand früher als Attributliste an jedem einzelnen <svg> — bei vier Icons
   pro Karte und 560 Karten ist das gut ein halbes Megabyte an immer
   gleichem Text. Hier steht es einmal. */
.sbk-icon {
  flex: none; display: block;
  fill: none; stroke: currentColor; stroke-width: 2;
  stroke-linecap: round; stroke-linejoin: round;
}

/* --- Schaltflächen ------------------------------------------------------ */
.sbk-btn {
  display: inline-flex; align-items: center; gap: 8px;
  border: 0; cursor: pointer; text-decoration: none;
  font: inherit; font-weight: 600; font-size: 15px; line-height: 1;
  background: var(--sbk-rot); color: #fff;
  padding: 13px 24px; border-radius: var(--sbk-r-full); white-space: nowrap;
  transition: background .16s ease, transform .16s ease, box-shadow .16s ease;
}
.sbk-btn:hover  { background: var(--sbk-rot-d); color: #fff; }
.sbk-btn:active { transform: translateY(1px); }
.sbk-btn--sekundaer {
  background: transparent; color: var(--sbk-ink);
  box-shadow: inset 0 0 0 1px var(--sbk-line);
}
.sbk-btn--sekundaer:hover {
  background: var(--sbk-rot-s); color: var(--sbk-rot-d);
  box-shadow: inset 0 0 0 1px var(--sbk-rot);
}

/* --- Abschnittstitel ----------------------------------------------------
   Kleine Überzeile mit Strich davor. Gibt langen Seiten Rhythmus, ohne
   dass jede Überschrift schreien muss.                                    */
.sbk-sektion { margin: 0 0 22px; }
.sbk-sektion__label {
  display: flex; align-items: center; gap: 10px;
  font-size: 12px; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: var(--sbk-ink-3); margin-bottom: 10px;
}
.sbk-sektion__label::before {
  content: ""; width: 22px; height: 1.5px; background: var(--sbk-rot);
  flex: none; border-radius: 2px;
}
.sbk-sektion h2 {
  margin: 0; font-size: clamp(22px, 3vw, 29px);
  letter-spacing: -.025em; font-weight: 700; line-height: 1.15;
}
.sbk-sektion p { margin: 7px 0 0; color: var(--sbk-ink-3); font-size: 15.5px; }

/* ===========================================================================
   Hero
   ======================================================================== */

.sbk-hero {
  position: relative; overflow: hidden; isolation: isolate;
  padding: 52px 44px 108px;
  border: 1px solid var(--sbk-line);
  border-radius: 26px;
  background:
    radial-gradient(900px 340px at 88% -14%, var(--sbk-rot-s), transparent 60%),
    radial-gradient(700px 300px at 2% 108%,  var(--sbk-sea-s),   transparent 64%),
    linear-gradient(180deg, var(--sbk-surface) 0%, var(--sbk-sand) 78%);
}
.sbk-hero__inhalt { position: relative; z-index: 2; }

/* Horizontlinie: Dünenkamm als flache SVG-Welle am unteren Rand.
   Rein dekorativ, deshalb aria-hidden im Markup.                          */
.sbk-hero__horizont {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 1;
  width: 100%; height: 124px; pointer-events: none;
  color: var(--sbk-sand-2);
}
.sbk-hero__horizont svg { width: 100%; height: 100%; display: block; }

.sbk-hero__marke {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--sbk-rot-s); color: var(--sbk-rot-d);
  font-size: 12.5px; font-weight: 650; letter-spacing: .06em;
  text-transform: uppercase; padding: 7px 14px;
  border-radius: var(--sbk-r-full); margin-bottom: 22px;
}
.sbk-hero__punkt {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--sbk-rot); flex: none;
}
.sbk-hero h1 {
  font-size: clamp(33px, 5.4vw, 56px); line-height: 1.04;
  letter-spacing: -.035em; margin: 0 0 16px; font-weight: 750;
  max-width: 17ch; color: var(--sbk-ink);
}
.sbk-hero h1 em { font-style: normal; color: var(--sbk-rot); }
.sbk-hero__lead {
  font-size: clamp(16.5px, 2vw, 19px); color: var(--sbk-ink-2);
  max-width: 54ch; margin: 0 0 30px; line-height: 1.55;
}

/* --- Zahlenleiste ------------------------------------------------------- */
.sbk-zahlen {
  display: flex; gap: 40px; flex-wrap: wrap; margin-top: 40px;
  padding-top: 26px; border-top: 1px solid var(--sbk-line);
}
.sbk-zahl__wert {
  font-size: 27px; font-weight: 700; letter-spacing: -.025em;
  line-height: 1; font-variant-numeric: tabular-nums;
}
.sbk-zahl__label { font-size: 13.5px; color: var(--sbk-ink-3); margin-top: 6px; }

/* ===========================================================================
   Suche
   ======================================================================== */

.sbk-suche__form {
  display: flex; gap: 8px; align-items: center;
  background: var(--sbk-surface); border: 1px solid var(--sbk-line);
  border-radius: var(--sbk-r-full); padding: 6px 6px 6px 20px;
  box-shadow: var(--sbk-shadow); max-width: 620px;
  transition: box-shadow .18s ease, border-color .18s ease;
}
.sbk-suche__form:focus-within {
  border-color: var(--sbk-rot);
  box-shadow: var(--sbk-ring), var(--sbk-shadow-lg);
}
.sbk-suche__icon { color: var(--sbk-ink-3); }
.sbk-suche__feld {
  border: 0; outline: 0; flex: 1; min-width: 0; background: transparent;
  font: inherit; font-size: 16.5px; color: var(--sbk-ink); padding: 11px 0;
  -webkit-appearance: none;
}
.sbk-suche__feld::placeholder { color: var(--sbk-ink-3); }
.sbk-suche__feld::-webkit-search-cancel-button { display: none; }

/* --- Vorschläge --------------------------------------------------------- */
.sbk-vorschlaege {
  display: flex; gap: 8px; flex-wrap: wrap; align-items: center;
  margin-top: 16px; font-size: 14px; color: var(--sbk-ink-3);
}
.sbk-vorschlaege a {
  text-decoration: none; background: var(--sbk-surface);
  border: 1px solid var(--sbk-line); padding: 6px 14px;
  border-radius: var(--sbk-r-full); color: var(--sbk-ink-2); transition: .15s ease;
}
.sbk-vorschlaege a:hover {
  border-color: var(--sbk-rot); color: var(--sbk-rot-d);
  background: var(--sbk-rot-s);
}

/* --- Ortschips ---------------------------------------------------------- */
.sbk-orte {
  display: flex; gap: 8px; overflow-x: auto; margin-top: 18px;
  padding-bottom: 4px; scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.sbk-orte::-webkit-scrollbar { display: none; }
.sbk-chip {
  flex: none; border: 1px solid var(--sbk-line); background: var(--sbk-surface);
  border-radius: var(--sbk-r-full); padding: 8px 16px; font: inherit;
  font-size: 14px; color: var(--sbk-ink-2); cursor: pointer;
  white-space: nowrap; transition: .15s ease;
}
.sbk-chip:hover { border-color: var(--sbk-ink-3); color: var(--sbk-ink); }
.sbk-chip.is-on {
  background: var(--sbk-ink); border-color: var(--sbk-ink);
  color: var(--sbk-sand); font-weight: 600;
}

/* ===========================================================================
   Branchenkacheln
   ======================================================================== */

.sbk-grid {
  display: grid; gap: 14px;
  grid-template-columns: repeat(auto-fill, minmax(228px, 1fr));
}
.sbk-kachel {
  background: var(--sbk-surface); border: 1px solid var(--sbk-line);
  border-radius: var(--sbk-r-lg); padding: 22px 20px 18px;
  text-decoration: none; color: inherit;
  display: flex; flex-direction: column; gap: 16px;
  position: relative; overflow: hidden; isolation: isolate;
  transition: transform .2s cubic-bezier(.2,.7,.3,1),
              box-shadow .2s ease, border-color .2s ease;
}
/* Sanfter Schimmer beim Überfahren, kein harter Farbwechsel. */
.sbk-kachel::before {
  content: ""; position: absolute; z-index: -1;
  inset: auto -40% -70% auto; width: 190px; height: 190px;
  border-radius: 50%; background: var(--sbk-rot-s);
  opacity: 0; transition: opacity .24s ease;
}
.sbk-kachel:hover {
  transform: translateY(-3px); box-shadow: var(--sbk-shadow-lg);
  border-color: color-mix(in srgb, var(--sbk-rot) 34%, var(--sbk-line));
}
.sbk-kachel:hover::before { opacity: 1; }

.sbk-kachel__ico {
  width: 46px; height: 46px; border-radius: var(--sbk-r); display: grid;
  place-items: center; background: var(--sbk-sea-s); color: var(--sbk-sea);
  transition: background .2s ease, color .2s ease, transform .2s ease;
}
.sbk-kachel:hover .sbk-kachel__ico {
  background: var(--sbk-rot); color: #fff; transform: rotate(-4deg) scale(1.04);
}
.sbk-kachel__titel {
  margin: 0; font-size: 17px; font-weight: 650;
  letter-spacing: -.014em; line-height: 1.28;
}
.sbk-kachel__meta {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px; margin-top: auto; padding-top: 6px;
}
.sbk-kachel__zahl { font-size: 13.5px; color: var(--sbk-ink-3); }
.sbk-kachel__zahl b {
  color: var(--sbk-ink); font-weight: 700; font-variant-numeric: tabular-nums;
}
.sbk-kachel__pfeil { color: var(--sbk-ink-3); transition: .2s ease; }
.sbk-kachel:hover .sbk-kachel__pfeil {
  transform: translateX(4px); color: var(--sbk-rot);
}

/* ===========================================================================
   Werkzeugleiste
   ======================================================================== */

.sbk-toolbar {
  display: flex; gap: 10px; align-items: center; flex-wrap: wrap;
  background: var(--sbk-surface); border: 1px solid var(--sbk-line);
  border-radius: var(--sbk-r-full); padding: 7px 8px 7px 18px;
  box-shadow: var(--sbk-shadow); margin-bottom: 16px;
}
.sbk-toolbar:focus-within { border-color: var(--sbk-rot); box-shadow: var(--sbk-ring); }
.sbk-toolbar__icon { color: var(--sbk-ink-3); }
.sbk-toolbar__feld {
  border: 0; outline: 0; flex: 1; min-width: 140px; background: transparent;
  font: inherit; font-size: 15.5px; color: var(--sbk-ink);
  padding: 9px 0; -webkit-appearance: none;
}
.sbk-toolbar__feld::placeholder { color: var(--sbk-ink-3); }
.sbk-toolbar__feld::-webkit-search-cancel-button { display: none; }
.sbk-toolbar__select {
  border: 1px solid var(--sbk-line); border-radius: var(--sbk-r-full);
  padding: 9px 34px 9px 15px; font: inherit; font-size: 14.5px;
  background-color: var(--sbk-surface); color: var(--sbk-ink-2);
  cursor: pointer; outline: 0; -webkit-appearance: none; appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%2371818D' stroke-width='2.4' 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 13px center;
}
.sbk-toolbar__select:hover { border-color: var(--sbk-ink-3); }
.sbk-toolbar__select:focus { border-color: var(--sbk-rot); }

.sbk-ergebnis {
  font-size: 14.5px; color: var(--sbk-ink-3); margin: 0 0 18px;
  font-variant-numeric: tabular-nums;
}
.sbk-ergebnis b { color: var(--sbk-ink); font-weight: 650; }

/* --- Buchstabenleiste ----------------------------------------------------
   Erst ab vielen Einträgen sinnvoll — bei 295 Shops ist Scrollen sonst
   die einzige Möglichkeit, nach hinten zu kommen.                         */
.sbk-index {
  display: flex; flex-wrap: wrap; gap: 4px; margin: 0 0 20px;
}
.sbk-index__taste {
  min-width: 30px; height: 30px; padding: 0 6px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--sbk-line); background: var(--sbk-surface);
  border-radius: var(--sbk-r-sm); font: inherit; font-size: 13px;
  font-weight: 600; color: var(--sbk-ink-2); cursor: pointer;
  transition: .14s ease;
}
.sbk-index__taste:hover:not(:disabled) {
  border-color: var(--sbk-rot); color: var(--sbk-rot-d);
  background: var(--sbk-rot-s);
}
.sbk-index__taste.is-on {
  background: var(--sbk-ink); border-color: var(--sbk-ink); color: var(--sbk-sand);
}
.sbk-index__taste:disabled { opacity: .3; cursor: default; }

/* ===========================================================================
   Betriebskarten
   ======================================================================== */

.sbk-karten {
  display: grid; gap: 14px;
  grid-template-columns: repeat(auto-fill, minmax(288px, 1fr));
}
.sbk-karte {
  background: var(--sbk-surface); border: 1px solid var(--sbk-line);
  border-radius: var(--sbk-r); padding: 18px 18px 14px;
  display: flex; flex-direction: column; gap: 8px; position: relative;
  transition: transform .17s ease, box-shadow .17s ease, border-color .17s ease;

  /* Westerland hat 560 Einträge. Ohne diese beiden Zeilen berechnet der
     Browser Layout und Anstrich für alle 560 Karten auf einmal, auch für
     die neunhundert Pixel weit unterhalb des Bildschirms — auf schwächeren
     Geräten dauert das so lange, dass die Seite steht.

     content-visibility überspringt alles, was gerade nicht sichtbar ist.
     contain-intrinsic-size gibt dem Übersprungenen eine geschätzte Höhe,
     damit die Scrollleiste trotzdem stimmt und beim Scrollen nicht springt.
     Browser ohne Unterstützung ignorieren beides und verhalten sich wie
     bisher. */
  content-visibility: auto;
  contain-intrinsic-size: auto 190px;
}
.sbk-karte:hover {
  transform: translateY(-2px); box-shadow: var(--sbk-shadow-lg);
  border-color: color-mix(in srgb, var(--sbk-rot) 30%, var(--sbk-line));
}
.sbk-karte--sponsor {
  border-color: var(--sbk-rot);
  box-shadow: 0 0 0 3px var(--sbk-rot-s);
}
.sbk-karte__sponsor {
  position: absolute; top: -10px; left: 16px;
  background: var(--sbk-rot); color: #fff; font-size: 10.5px;
  font-weight: 700; letter-spacing: .07em; text-transform: uppercase;
  padding: 4px 10px; border-radius: 6px;
}
.sbk-karte__kopf {
  display: flex; justify-content: space-between; gap: 12px;
  align-items: flex-start;
}
.sbk-karte__titel {
  margin: 0; font-size: 16.5px; font-weight: 650;
  letter-spacing: -.014em; line-height: 1.3;
}
.sbk-karte__titel a {
  color: inherit; text-decoration: none;
  /* Die ganze Karte klickbar machen, ohne verschachtelte Links */
}
.sbk-karte__titel a::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit;
}
.sbk-karte__titel a:hover { color: var(--sbk-rot-d); }
.sbk-karte__ort {
  flex: none; font-size: 11px; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; background: var(--sbk-sea-s); color: var(--sbk-sea);
  padding: 5px 10px; border-radius: 6px; white-space: nowrap;
}
.sbk-karte__adresse {
  margin: 0; font-size: 14px; color: var(--sbk-ink-2);
  display: flex; gap: 7px; align-items: flex-start; line-height: 1.45;
}
.sbk-karte__adresse .sbk-icon { margin-top: 2px; color: var(--sbk-ink-3); }

.sbk-karte__aktionen {
  display: flex; gap: 7px; flex-wrap: wrap; margin-top: auto;
  padding-top: 12px; border-top: 1px solid var(--sbk-line-soft);
  position: relative; z-index: 1;   /* über dem Karten-Overlay */
}
.sbk-aktion {
  font-size: 13.5px; font-weight: 600; text-decoration: none;
  color: var(--sbk-ink-2); border: 1px solid var(--sbk-line);
  border-radius: var(--sbk-r-full); padding: 7px 13px;
  display: inline-flex; align-items: center; gap: 6px; transition: .15s ease;
  background: var(--sbk-surface);
}
.sbk-aktion .sbk-icon { color: var(--sbk-ink-3); transition: color .15s ease; }
.sbk-aktion:hover {
  border-color: var(--sbk-rot); color: var(--sbk-rot-d);
  background: var(--sbk-rot-s);
}
.sbk-aktion:hover .sbk-icon { color: var(--sbk-rot); }
.sbk-aktion--primaer {
  background: var(--sbk-ink); border-color: var(--sbk-ink); color: var(--sbk-sand);
}
.sbk-aktion--primaer:hover {
  background: var(--sbk-rot); border-color: var(--sbk-rot); color: #fff;
}

/* --- Leerzustand -------------------------------------------------------- */
.sbk-leer {
  padding: 54px 24px; text-align: center; color: var(--sbk-ink-3);
  border: 1px dashed var(--sbk-line); border-radius: var(--sbk-r-lg);
  background: var(--sbk-sand-2);
}
.sbk-leer strong { display: block; color: var(--sbk-ink); font-size: 16.5px; margin-bottom: 6px; }
.sbk-leer--versteckt { display: none; }
.sbk-karte[hidden] { display: none; }

/* ===========================================================================
   Eintragsseite
   ======================================================================== */

.sbk-details {
  background: var(--sbk-surface); border: 1px solid var(--sbk-line);
  border-radius: var(--sbk-r-lg); padding: 8px 26px 24px;
}
.sbk-details__liste { margin: 0; }
.sbk-details__zeile {
  display: grid; grid-template-columns: 148px 1fr; gap: 16px;
  padding: 14px 0; border-bottom: 1px solid var(--sbk-line-soft);
  align-items: start;
}
.sbk-details__zeile:last-child { border-bottom: 0; }
.sbk-details__zeile dt {
  font-weight: 600; color: var(--sbk-ink-3); font-size: 13px;
  letter-spacing: .05em; text-transform: uppercase; padding-top: 2px;
}
.sbk-details__zeile dd { margin: 0; font-size: 16px; line-height: 1.5; }
.sbk-details__zeile dd a { color: var(--sbk-rot-d); text-underline-offset: 3px; }
.sbk-details__aktionen {
  display: flex; gap: 10px; flex-wrap: wrap; margin-top: 22px;
  padding-top: 22px; border-top: 1px solid var(--sbk-line-soft);
}

/* --- Brotkrumen --------------------------------------------------------- */
.sbk-krumen {
  font-size: 13.5px; color: var(--sbk-ink-3); margin: 0 0 20px;
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
}
.sbk-krumen a { color: inherit; text-decoration: none; }
.sbk-krumen a:hover { color: var(--sbk-rot-d); }
.sbk-krumen__trenner { opacity: .45; }

/* ===========================================================================
   Mobil
   ======================================================================== */

@media (max-width: 640px) {
  .sbk-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .sbk-kachel { padding: 15px 13px 12px; gap: 11px; border-radius: var(--sbk-r); }
  .sbk-kachel__ico { width: 38px; height: 38px; border-radius: 11px; }
  .sbk-kachel__ico .sbk-icon { width: 21px; height: 21px; }
  .sbk-kachel__titel { font-size: 14.5px; }
  .sbk-kachel__zahl { font-size: 12.5px; }
  .sbk-kachel__pfeil { display: none; }

  .sbk-karten { grid-template-columns: 1fr; }
  .sbk-toolbar { border-radius: var(--sbk-r); padding: 11px 14px; }
  .sbk-toolbar__select { flex: 1 1 auto; }

  .sbk-zahlen { gap: 24px; }
  .sbk-zahl__wert { font-size: 23px; }

  .sbk-details { padding: 4px 18px 20px; }
  .sbk-details__zeile { grid-template-columns: 1fr; gap: 3px; padding: 12px 0; }

  .sbk-hero { padding: 30px 20px 74px; border-radius: 18px; }
  .sbk-hero__horizont { height: 82px; }
}

/* ===========================================================================
   Barrierefreiheit und Druck
   ======================================================================== */

@media (prefers-reduced-motion: reduce) {
  .sbk-kachel, .sbk-karte, .sbk-btn, .sbk-aktion,
  .sbk-kachel__pfeil, .sbk-kachel__ico, .sbk-chip { transition: none; }
  .sbk-kachel:hover, .sbk-karte:hover { transform: none; }
  .sbk-kachel:hover .sbk-kachel__ico { transform: none; }
}

.sbk-chip:focus-visible, .sbk-aktion:focus-visible, .sbk-btn:focus-visible,
.sbk-kachel:focus-visible, .sbk-index__taste:focus-visible,
.sbk-karte__titel a:focus-visible {
  outline: 2px solid var(--sbk-rot); outline-offset: 3px;
  border-radius: var(--sbk-r-sm);
}

/* Für Screenreader, optisch verborgen */
.sbk-sr {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

@media print {
  .sbk-toolbar, .sbk-orte, .sbk-index, .sbk-suche__form,
  .sbk-karte__aktionen, .sbk-details__aktionen { display: none !important; }
  .sbk-karte, .sbk-kachel, .sbk-details {
    break-inside: avoid; box-shadow: none; border-color: #ccc;
  }
  .sbk-karten { grid-template-columns: repeat(2, 1fr); }
}

/* ===========================================================================
   Eintragsseite
   ------------------------------------------------------------------------
   Drei Zonen: Kopfpanel, zwei Spalten für Zeiten und Kontakt, darunter die
   Nachbarn. Der frühere Aufbau war eine einzige Definitionsliste — korrekt,
   aber alles gleich wichtig.
   ======================================================================== */

.sbk-kopf {
  position: relative; overflow: hidden; isolation: isolate;
  border: 1px solid var(--sbk-line); border-radius: 24px;
  padding: 32px 36px 34px; margin-bottom: 20px;
  background:
    radial-gradient(680px 260px at 92% -30%, var(--sbk-rot-s), transparent 62%),
    linear-gradient(180deg, var(--sbk-surface) 0%, var(--sbk-sand) 100%);
}

/* Angedeuteter Dünenbogen unten rechts — dasselbe Motiv wie im Hero,
   nur als stille Wiederholung. */
.sbk-kopf__zier {
  position: absolute; z-index: -1; right: -90px; bottom: -130px;
  width: 320px; height: 320px; border-radius: 50%;
  background: var(--sbk-sea-s); opacity: .5;
}

.sbk-kopf__zeile {
  display: flex; align-items: center; gap: 14px;
  margin-bottom: 18px; flex-wrap: wrap;
}
.sbk-kopf__ico {
  width: 52px; height: 52px; flex: none; border-radius: 15px;
  display: grid; place-items: center;
  background: var(--sbk-sea-s); color: var(--sbk-sea);
}
.sbk-kopf__marken { display: flex; gap: 8px; flex-wrap: wrap; }
.sbk-marke-chip {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 13px; font-weight: 600; text-decoration: none;
  color: var(--sbk-ink-2); background: var(--sbk-surface);
  border: 1px solid var(--sbk-line); padding: 6px 13px;
  border-radius: var(--sbk-r-full); transition: .15s ease;
}
.sbk-marke-chip:hover {
  border-color: var(--sbk-rot); color: var(--sbk-rot-d);
  background: var(--sbk-rot-s);
}
.sbk-marke-chip--ort { color: var(--sbk-sea); }
.sbk-marke-chip--ort .sbk-icon { opacity: .75; }

.sbk-kopf__titel {
  margin: 0 0 12px; font-size: clamp(28px, 4.4vw, 42px);
  line-height: 1.08; letter-spacing: -.033em; font-weight: 750;
}
.sbk-kopf__lead {
  margin: 0 0 26px; font-size: 17.5px; line-height: 1.62;
  color: var(--sbk-ink-2); max-width: 60ch;
}
.sbk-kopf__aktionen { display: flex; gap: 10px; flex-wrap: wrap; }

/* --- Zwei Spalten ------------------------------------------------------- */
.sbk-spalten {
  display: grid; gap: 16px; margin-bottom: 52px;
  grid-template-columns: 1fr 1fr;
  /* Panels an der Oberkante ausrichten — sonst zieht das längere das
     kürzere auf seine Höhe und hinterlässt eine leere Fläche. */
  align-items: start;
}
.sbk-panel {
  background: var(--sbk-surface); border: 1px solid var(--sbk-line);
  border-radius: var(--sbk-r-lg); padding: 22px 24px 20px;
}
.sbk-panel__titel {
  display: flex; align-items: center; gap: 9px;
  margin: 0 0 16px; font-size: 13px; font-weight: 700;
  letter-spacing: .09em; text-transform: uppercase; color: var(--sbk-ink-3);
}
.sbk-panel__titel .sbk-icon { color: var(--sbk-rot); }
.sbk-panel__fuss {
  margin: 16px 0 0; padding-top: 14px; font-size: 13.5px;
  color: var(--sbk-ink-3); border-top: 1px solid var(--sbk-line-soft);
}
.sbk-panel__fuss a { color: var(--sbk-rot-d); }
.sbk-panel__leer { margin: 0; color: var(--sbk-ink-3); font-size: 15px; line-height: 1.6; }
.sbk-panel__leer a { color: var(--sbk-rot-d); white-space: nowrap; }

/* --- Öffnungszeiten ----------------------------------------------------- */
.sbk-zeiten { list-style: none; margin: 0; padding: 0; }
.sbk-zeiten__zeile {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; padding: 9px 12px; border-radius: var(--sbk-r-sm);
  font-size: 15.5px; color: var(--sbk-ink-2);
  font-variant-numeric: tabular-nums;
}
.sbk-zeiten__zeile.is-heute {
  background: var(--sbk-rot-s); color: var(--sbk-ink); font-weight: 600;
}
.sbk-zeiten__heute {
  flex: none; font-size: 10.5px; font-weight: 700; letter-spacing: .07em;
  text-transform: uppercase; background: var(--sbk-rot); color: #fff;
  padding: 3px 8px; border-radius: 5px;
}

/* --- Kontakt ------------------------------------------------------------ */
.sbk-kontakt { margin: 0; }
.sbk-kontakt__zeile {
  display: grid; grid-template-columns: 92px 1fr; gap: 14px;
  padding: 11px 0; border-bottom: 1px solid var(--sbk-line-soft);
  align-items: start;
}
.sbk-kontakt__zeile:last-child { border-bottom: 0; }
.sbk-kontakt__zeile dt {
  font-size: 12.5px; font-weight: 600; letter-spacing: .05em;
  text-transform: uppercase; color: var(--sbk-ink-3); padding-top: 3px;
}
.sbk-kontakt__zeile dd { margin: 0; font-size: 15.5px; line-height: 1.5; }
.sbk-kontakt__zeile dd a { color: var(--sbk-rot-d); text-underline-offset: 3px; }

@media (max-width: 780px) {
  .sbk-spalten { grid-template-columns: 1fr; }
  .sbk-kopf { padding: 24px 20px 26px; border-radius: 18px; }
  .sbk-kopf__ico { width: 44px; height: 44px; border-radius: 13px; }
  .sbk-kopf__aktionen .sbk-btn { flex: 1 1 auto; justify-content: center; }
  .sbk-kontakt__zeile { grid-template-columns: 1fr; gap: 2px; }
}

/* ===========================================================================
   Durchsetzung gegenüber ID-basierten Themes
   ------------------------------------------------------------------------
   Auf sylt1.tv läuft das Zox-News-Theme. Es formatiert Überschriften über
   ID-Selektoren:

     #mvp-content-main h3 { font-size: 1.6rem }
     #mvp-content-main h1,…,h6 { font-family: Oswald; font-weight: 700 }

   Ein ID-Selektor schlägt jede Klasse — egal wie viele man stapelt. Die
   Kachelüberschriften kamen dadurch in Oswald und 25,6px statt in der
   eigenen Schrift mit 17px.

   Deshalb hier, und nur hier, !important: eng begrenzt auf die eigenen
   Überschriftenklassen und ausschließlich auf Typografie. Kein Abstand,
   keine Farbe, keine Position — wer daran etwas ändern möchte, kann das
   weiterhin ohne Kampf tun.

   Kein .sbk-scope davor: Bei .sbk-hero und .sbk-kopf sitzt sbk-scope auf
   DEMSELBEN Element, ein Nachfahren-Selektor ginge dort ins Leere. Die
   Klassennamen sind ohnehin eindeutig genug.
   ======================================================================== */

.sbk-hero h1 {
  font-family: var(--sbk-font) !important;
  font-size: clamp(33px, 5.4vw, 56px) !important;
  font-weight: 750 !important;
  line-height: 1.04 !important;
  letter-spacing: -.035em !important;
  text-transform: none !important;
}

.sbk-kopf__titel {
  font-family: var(--sbk-font) !important;
  font-size: clamp(28px, 4.4vw, 42px) !important;
  font-weight: 750 !important;
  line-height: 1.08 !important;
  letter-spacing: -.033em !important;
  text-transform: none !important;
}

.sbk-sektion h2,
.sbk-suche__titel {
  font-family: var(--sbk-font) !important;
  font-size: clamp(22px, 3vw, 29px) !important;
  font-weight: 700 !important;
  line-height: 1.15 !important;
  letter-spacing: -.025em !important;
  text-transform: none !important;
}

.sbk-kachel__titel,
.sbk-karte__titel {
  font-family: var(--sbk-font) !important;
  font-size: 17px !important;
  font-weight: 650 !important;
  line-height: 1.3 !important;
  letter-spacing: -.013em !important;
  text-transform: none !important;
}

.sbk-panel__titel {
  font-family: var(--sbk-font) !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  line-height: 1.3 !important;
  letter-spacing: .09em !important;
  text-transform: uppercase !important;
}

/* Auf schmalen Spalten dürfen die Kacheltitel kleiner werden. */
@media (max-width: 640px) {
  .sbk-kachel__titel { font-size: 14.5px !important; }
}

/* ------------------------------------------------------------------
   Videos und Links

   Der Player wird erst auf Klick geladen. Bis dahin steht hier eine
   eigene Fläche in Rot und Schwarz — kein Vorschaubild von YouTube,
   also auch kein Aufruf dorthin, bevor jemand ihn wirklich will.
   ------------------------------------------------------------------ */

.sbk-medien { margin-bottom: 52px; }

.sbk-video { margin: 0 0 14px; }
.sbk-video:last-child { margin-bottom: 0; }

.sbk-video__start {
  position: relative; display: flex; flex-direction: column;
  align-items: flex-start; justify-content: flex-end; gap: 6px;
  width: 100%; min-height: 210px; margin: 0; padding: 22px 22px 20px;
  font: inherit; text-align: left; cursor: pointer;
  color: #fff; border: 0; border-radius: var(--sbk-r);
  background:
    radial-gradient(120% 130% at 78% 12%, rgba(227, 30, 36, .55), transparent 62%),
    linear-gradient(160deg, #241f1f 0%, #100d0d 100%);
  transition: transform .16s ease, box-shadow .16s ease;
}
.sbk-video__start:hover { transform: translateY(-2px); box-shadow: var(--sbk-shadow-lg); }
.sbk-video__start:focus-visible { outline: 3px solid var(--sbk-rot); outline-offset: 3px; }

.sbk-video__play {
  display: grid; place-items: center;
  width: 62px; height: 62px; margin-bottom: 10px;
  border-radius: var(--sbk-r-full); background: var(--sbk-rot);
  box-shadow: 0 10px 26px rgba(0, 0, 0, .35);
}
.sbk-video__play .sbk-icon { color: #fff; margin-left: 3px; }

.sbk-video__titel {
  font-size: 19px; font-weight: 700; line-height: 1.3; letter-spacing: -.01em;
}
.sbk-video__hinweis { font-size: 13px; color: rgba(255, 255, 255, .72); }

.sbk-video__rahmen {
  position: relative; width: 100%; aspect-ratio: 16 / 9;
  border-radius: var(--sbk-r); overflow: hidden; background: #000;
}
.sbk-video__rahmen iframe {
  position: absolute; inset: 0; width: 100%; height: 100%; border: 0;
}

.sbk-medien__links { margin: 16px 0 0; padding: 0; list-style: none; }
.sbk-medien__links li + li { margin-top: 2px; }
.sbk-medien__links a {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px; margin: 0 -12px; border-radius: var(--sbk-r-sm);
  font-size: 15.5px; color: var(--sbk-rot-d); text-decoration: none;
}
.sbk-medien__links a:hover { background: var(--sbk-sand-2); text-decoration: underline; }
.sbk-medien__links .sbk-icon { flex: none; color: var(--sbk-rot); }

@media (max-width: 560px) {
  .sbk-video__start { min-height: 180px; padding: 18px; }
  .sbk-video__titel { font-size: 17px; }
}

/* Vorschaubild.

   Es liegt auf dem eigenen Server, nicht bei YouTube: Beim Aufbau der
   Seite geht dadurch kein Aufruf dorthin, erst der Klick auf die Fläche
   holt den Player. Der Verlauf darüber hält die Schrift lesbar, egal wie
   hell das Bild unten ist. */

.sbk-video__start { overflow: hidden; }
.sbk-video__start.hat-bild { min-height: 0; aspect-ratio: 16 / 9; }

.sbk-video__bild {
  position: absolute; inset: 0; display: block; border: 0;
  width: 100%; height: 100%; object-fit: cover; z-index: 1;
  transition: transform .35s ease;
}
.sbk-video__start.hat-bild::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  z-index: 2;
  background: linear-gradient(to top,
    rgba(9, 7, 7, .90) 0%, rgba(9, 7, 7, .48) 40%, rgba(9, 7, 7, .04) 72%);
}
.sbk-video__start.hat-bild:hover .sbk-video__bild { transform: scale(1.035); }

.sbk-video__play, .sbk-video__titel, .sbk-video__hinweis { position: relative; z-index: 3; }

.sbk-video__start.hat-bild .sbk-video__play {
  position: absolute; top: 50%; left: 50%; margin: 0;
  transform: translate(-50%, -50%);
  transition: transform .16s ease;
}
.sbk-video__start.hat-bild:hover .sbk-video__play { transform: translate(-50%, -50%) scale(1.07); }

@media (max-width: 560px) {
  .sbk-video__start.hat-bild .sbk-video__play { width: 52px; height: 52px; }
}