/* =========================================================================
   Bannenberger Partnerkarte – Farbwelt „Malzhell"
   Alles ist unter .bnb-karte gekapselt und mit bnb- praefixiert. Keine Regel
   greift ausserhalb des Widgets, insbesondere nicht auf html, body oder
   allgemeine Elementselektoren.

   Farben anpassen: nur die Variablen im ersten Block aendern. Alle Paare sind
   gegen WCAG AA geprueft, das schwaechste liegt bei 4,64:1.
   ========================================================================= */


.bnb-karte{
  --bnb-papier:#FBF8F1; --bnb-flaeche:#FFFFFF; --bnb-flaeche-2:#F6F1E6;
  --bnb-linie:#E6DCCA; --bnb-linie-stark:#D3C4A9;
  --bnb-text:#22302B; --bnb-gedaempft:#66736B;
  --bnb-akzent:#9C6B12; --bnb-akzent-hell:#F4E9D2;
  --bnb-gastro:#A84E1C; --bnb-gastro-hell:#FBEDE4;
  --bnb-handel:#4F6E2C; --bnb-handel-hell:#EDF3E4;
}

.bnb-karte{
  --bnb-f-display:"Oswald","Bebas Neue","Arial Narrow","Roboto Condensed",ui-sans-serif,system-ui,sans-serif;
  --bnb-f-body:ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --bnb-f-daten:ui-monospace,SFMono-Regular,Menlo,Consolas,"Liberation Mono",monospace;
  --bnb-r:10px;
  --bnb-schatten:0 1px 2px rgba(34,48,43,.04), 0 6px 18px rgba(34,48,43,.06);

  font-family:var(--bnb-f-body); font-size:15px; line-height:1.55;
  color:var(--bnb-text); background:var(--bnb-papier);
  -webkit-font-smoothing:antialiased;
  padding:clamp(18px,3.2vw,38px);
  max-width:1320px; margin:0 auto; text-align:left;
}
.bnb-karte,.bnb-karte *,.bnb-karte *::before,.bnb-karte *::after{box-sizing:border-box}
.bnb-karte p,.bnb-karte h2,.bnb-karte h3,.bnb-karte ul,.bnb-karte li{margin:0;padding:0;font-weight:400}
.bnb-karte ul{list-style:none}
.bnb-karte button{font:inherit;color:inherit;background:none;border:0;margin:0;line-height:normal}
.bnb-karte a{text-decoration:none}
.bnb-karte :focus-visible{outline:2px solid var(--bnb-akzent);outline-offset:2px}

/* ---------- Kopf ---------- */
.bnb-kopf{margin-bottom:22px}
.bnb-eyebrow{
  font-family:var(--bnb-f-daten);font-size:11px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--bnb-akzent);margin-bottom:10px !important;display:flex;align-items:center;gap:10px
}
.bnb-eyebrow::after{content:"";flex:1;height:1px;background:var(--bnb-linie-stark);max-width:180px}
.bnb-karte .bnb-kopf h2{
  font-family:var(--bnb-f-display);font-weight:700;color:var(--bnb-text);
  font-size:clamp(30px,5vw,52px);line-height:1;letter-spacing:.005em;
  text-transform:uppercase;margin-bottom:12px !important
}
.bnb-intro{max-width:62ch;color:var(--bnb-gedaempft);font-size:15.5px}

/* ---------- Karten-Panels: klare Abgrenzung der Rubriken ---------- */
.bnb-panel{
  background:var(--bnb-flaeche);border:1px solid var(--bnb-linie);
  border-radius:var(--bnb-r);box-shadow:var(--bnb-schatten)
}
.bnb-panel-kopf{
  display:flex;justify-content:space-between;align-items:center;gap:12px;
  padding:12px 18px;border-bottom:1px solid var(--bnb-linie);background:var(--bnb-flaeche-2);
  border-radius:var(--bnb-r) var(--bnb-r) 0 0
}
.bnb-panel-titel{
  font-family:var(--bnb-f-daten);font-size:10.5px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--bnb-gedaempft)
}

/* ---------- Filterblock ---------- */
.bnb-steuerung{margin-bottom:22px;overflow:hidden}
.bnb-filter{display:flex;flex-wrap:wrap;padding:4px 0}
.bnb-fgruppe{padding:14px 22px;flex:0 1 auto;border-right:1px solid var(--bnb-linie)}
.bnb-fgruppe:last-child{border-right:0}
@media (max-width:760px){
  .bnb-fgruppe{flex:1 1 100%;border-right:0;border-bottom:1px solid var(--bnb-linie);padding:14px 18px}
  .bnb-fgruppe:last-child{border-bottom:0}
}
.bnb-flabel{
  display:block;font-family:var(--bnb-f-daten);font-size:10px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--bnb-gedaempft);margin-bottom:9px
}
.bnb-chips{display:flex;flex-wrap:wrap;gap:7px}

.bnb-karte .bnb-chip{
  font-family:var(--bnb-f-display);text-transform:uppercase;letter-spacing:.05em;
  font-size:13.5px;font-weight:600;
  background:var(--bnb-flaeche);color:var(--bnb-text);
  border:1.5px solid var(--bnb-linie-stark);border-radius:99px;
  padding:7px 15px;cursor:pointer;
  transition:background .15s ease,border-color .15s ease,color .15s ease
}
.bnb-karte .bnb-chip:hover{border-color:var(--bnb-akzent);color:var(--bnb-akzent)}
.bnb-karte .bnb-chip[aria-pressed="true"]{
  background:var(--bnb-text);border-color:var(--bnb-text);color:var(--bnb-flaeche)
}
.bnb-chip--bier{position:relative;padding-left:32px !important}
.bnb-chip--bier::before{
  content:"";position:absolute;left:12px;top:50%;transform:translateY(-50%);
  width:11px;height:11px;border-radius:50%;
  background:var(--bnb-korken,var(--bnb-akzent));
  box-shadow:0 0 0 2px var(--bnb-flaeche),0 0 0 3.5px var(--bnb-korken,var(--bnb-akzent))
}
.bnb-karte .bnb-chip--bier[aria-pressed="true"]::before{
  box-shadow:0 0 0 2px var(--bnb-text),0 0 0 3.5px var(--bnb-korken,var(--bnb-akzent))
}

.bnb-werkzeuge{
  display:flex;gap:10px;flex-wrap:wrap;align-items:center;
  padding:14px 22px;border-top:1px solid var(--bnb-linie);background:var(--bnb-flaeche-2);
  border-radius:0 0 var(--bnb-r) var(--bnb-r)
}
@media (max-width:760px){.bnb-werkzeuge{padding:14px 18px}}
.bnb-karte .bnb-suche{
  flex:1 1 220px;min-width:180px;font-family:var(--bnb-f-body);font-size:14.5px;
  background:var(--bnb-flaeche);border:1.5px solid var(--bnb-linie-stark);color:var(--bnb-text);
  padding:10px 14px;border-radius:8px
}
.bnb-karte .bnb-suche::placeholder{color:var(--bnb-gedaempft)}
.bnb-karte .bnb-btn{
  font-family:var(--bnb-f-display);text-transform:uppercase;letter-spacing:.05em;
  font-size:13.5px;font-weight:600;cursor:pointer;border-radius:8px;
  background:var(--bnb-flaeche);color:var(--bnb-text);
  border:1.5px solid var(--bnb-linie-stark);padding:10px 16px
}
.bnb-karte .bnb-btn:hover{border-color:var(--bnb-akzent);color:var(--bnb-akzent)}
.bnb-karte .bnb-btn--primaer{background:var(--bnb-akzent);border-color:var(--bnb-akzent);color:#fff}
.bnb-karte .bnb-btn--primaer:hover{filter:brightness(1.08);color:#fff}

/* ---------- Bühne ---------- */
.bnb-buehne{display:grid;grid-template-columns:minmax(300px,390px) 1fr;gap:20px;align-items:start}
@media (max-width:900px){.bnb-buehne{grid-template-columns:1fr}}

/* ---------- Liste ---------- */
.bnb-karte .bnb-liste{overflow-y:auto;scrollbar-width:thin}
@media (max-width:900px){.bnb-karte .bnb-liste{max-height:none !important}}

.bnb-karte .bnb-eintrag{
  width:100%;text-align:left;display:block;cursor:pointer;
  padding:15px 18px 15px 18px;border-bottom:1px solid var(--bnb-linie);
  position:relative;transition:background .14s ease
}
.bnb-liste li:last-child .bnb-eintrag{border-bottom:0}
.bnb-karte .bnb-eintrag:hover{background:var(--bnb-flaeche-2)}
.bnb-karte .bnb-eintrag.bnb-aktiv{background:var(--bnb-akzent-hell)}
.bnb-karte .bnb-eintrag.bnb-aktiv::before{
  content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--bnb-akzent)
}
.bnb-eintrag-name{
  font-family:var(--bnb-f-display);text-transform:uppercase;letter-spacing:.02em;
  font-size:17.5px;font-weight:600;line-height:1.2;margin-bottom:3px;display:block;color:var(--bnb-text)
}
.bnb-eintrag-meta{font-size:13.5px;color:var(--bnb-gedaempft);display:block}
.bnb-eintrag-dist{font-family:var(--bnb-f-daten);font-size:12px;color:var(--bnb-akzent);font-weight:600}
.bnb-marken{display:flex;flex-wrap:wrap;gap:6px;margin-top:9px}
.bnb-marke{
  font-family:var(--bnb-f-daten);font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;
  padding:4px 9px;border-radius:5px;border:1px solid
}
.bnb-marke--fass{color:var(--bnb-gastro);border-color:var(--bnb-gastro);background:var(--bnb-gastro-hell)}
.bnb-marke--flasche{color:var(--bnb-handel);border-color:var(--bnb-handel);background:var(--bnb-handel-hell)}
.bnb-leer{padding:30px 18px;color:var(--bnb-gedaempft);font-size:14.5px}

/* ---------- Kartenfeld ---------- */
.bnb-kartenfeld{position:relative;overflow:hidden}
.bnb-leaflet{width:100%;background:var(--bnb-flaeche-2)}
@media (max-width:900px){.bnb-leaflet{height:min(62vh,470px) !important}}

.bnb-schleuse{
  position:absolute;inset:0;z-index:500;
  display:flex;flex-direction:column;justify-content:center;align-items:center;
  gap:15px;text-align:center;padding:30px;background:var(--bnb-flaeche-2)
}
.bnb-karte .bnb-schleuse h3{
  font-family:var(--bnb-f-display);text-transform:uppercase;letter-spacing:.03em;
  font-size:23px;color:var(--bnb-text)
}
.bnb-karte .bnb-schleuse p{max-width:50ch;font-size:14px;color:var(--bnb-gedaempft)}
.bnb-karte .bnb-schleuse a{color:var(--bnb-akzent);text-decoration:underline}
.bnb-merken{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--bnb-gedaempft)}
.bnb-schleuse-symbol{
  width:46px;height:46px;border-radius:50%;background:var(--bnb-akzent-hell);
  display:flex;align-items:center;justify-content:center
}

/* Leaflet auf hell */
.bnb-karte .leaflet-container{font-family:var(--bnb-f-body);background:var(--bnb-flaeche-2)}
.bnb-karte .leaflet-div-icon{background:transparent;border:0}
.bnb-karte .bnb-pin svg{display:block;filter:drop-shadow(0 2px 4px rgba(34,48,43,.35))}
.bnb-karte .leaflet-popup-content-wrapper{
  background:var(--bnb-flaeche);color:var(--bnb-text);border-radius:var(--bnb-r);
  border:1px solid var(--bnb-linie-stark);box-shadow:0 8px 28px rgba(34,48,43,.16)
}
.bnb-karte .leaflet-popup-tip{background:var(--bnb-flaeche);border:1px solid var(--bnb-linie-stark)}
.bnb-karte .leaflet-popup-content{margin:16px 18px;width:252px !important;font-size:14px}
.bnb-karte .leaflet-popup-scrolled{
  border-top:1px solid var(--bnb-linie);border-bottom:1px solid var(--bnb-linie);
  scrollbar-width:thin;overscroll-behavior:contain
}
.bnb-karte .leaflet-popup-close-button{color:var(--bnb-gedaempft) !important}
.bnb-karte .leaflet-control-attribution{
  background:rgba(255,255,255,.88);color:var(--bnb-gedaempft);font-size:10.5px
}
.bnb-karte .leaflet-control-attribution a{color:var(--bnb-akzent)}
.bnb-karte .leaflet-bar a{background:var(--bnb-flaeche);color:var(--bnb-text);border-color:var(--bnb-linie)}
.bnb-karte .leaflet-bar a:hover{background:var(--bnb-flaeche-2);color:var(--bnb-akzent)}

.bnb-pop-name{
  font-family:var(--bnb-f-display);text-transform:uppercase;letter-spacing:.02em;
  font-size:18px;font-weight:600;line-height:1.15;margin-bottom:4px !important;color:var(--bnb-text)
}
.bnb-pop-adr{color:var(--bnb-gedaempft);margin-bottom:12px !important;font-size:13.5px}
.bnb-pop-block{margin-bottom:11px;padding-left:11px;border-left:3px solid var(--bnb-linie-stark)}
.bnb-pop-block--fass{border-left-color:var(--bnb-gastro)}
.bnb-pop-block--flasche{border-left-color:var(--bnb-handel)}
.bnb-pop-titel{
  font-family:var(--bnb-f-daten);font-size:10px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--bnb-gedaempft);margin-bottom:2px !important
}
.bnb-pop-block li{font-size:13.5px}
.bnb-zeiten{font-family:var(--bnb-f-daten);font-size:12px;color:var(--bnb-text);line-height:1.75}
.bnb-pop-links{
  display:flex;flex-wrap:wrap;gap:7px;margin-top:14px;
  padding-top:13px;border-top:1px solid var(--bnb-linie)
}
.bnb-karte .bnb-pop-links a{
  font-family:var(--bnb-f-display);text-transform:uppercase;font-size:12px;letter-spacing:.05em;
  padding:7px 12px;border-radius:6px;border:1.5px solid var(--bnb-linie-stark);color:var(--bnb-text)
}
.bnb-karte .bnb-pop-links a:hover{border-color:var(--bnb-akzent);color:var(--bnb-akzent)}
.bnb-karte .bnb-pop-links a.bnb-route{background:var(--bnb-akzent);border-color:var(--bnb-akzent);color:#fff}

/* ---------- Legende und Fuß ---------- */
.bnb-legende{
  display:flex;flex-wrap:wrap;gap:10px 26px;margin-top:16px;padding:13px 18px;
  background:var(--bnb-flaeche-2);border:1px solid var(--bnb-linie);border-radius:var(--bnb-r);
  font-family:var(--bnb-f-daten);font-size:11px;letter-spacing:.09em;
  text-transform:uppercase;color:var(--bnb-gedaempft)
}
.bnb-legende span{display:inline-flex;align-items:center;gap:8px}
.bnb-punkt{width:12px;height:12px;border-radius:50% 50% 50% 0;transform:rotate(-45deg);display:inline-block}
.bnb-fuss{margin-top:24px;color:var(--bnb-gedaempft);font-size:13px}
.bnb-karte .bnb-fuss p{margin-bottom:5px !important}
.bnb-hinweis{
  margin-top:16px;padding:13px 16px;font-size:13.5px;border-radius:var(--bnb-r);
  border:1px solid var(--bnb-gastro);background:var(--bnb-gastro-hell);color:var(--bnb-text)
}
.bnb-versteckt{display:none !important}
.bnb-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
@media (prefers-reduced-motion:reduce){.bnb-karte *{transition:none !important}}

/* ---------- Abschirmung gegen das Theme ----------
   Divi setzt grosszuegig Abstaende, Listenpunkte und Button-Optik.
   Innerhalb des Widgets wird das zurueckgenommen. */
.bnb-karte p, .bnb-karte h1, .bnb-karte h2, .bnb-karte h3,
.bnb-karte ul, .bnb-karte li{
  margin:0; padding:0; text-transform:none; font-weight:400; color:inherit;
}
.bnb-karte button{
  text-transform:none; letter-spacing:normal; border-radius:0;
  box-shadow:none; transition:none;
}
.bnb-karte button::after{ content:none !important; }   /* Divi-Button-Pfeil */
.bnb-karte input{ font:inherit; margin:0; box-shadow:none; }
.bnb-karte .bnb-intro{ margin:0 !important; }
.bnb-karte .bnb-schleuse h3, .bnb-karte .bnb-schleuse p{ margin:0 !important; }
.bnb-karte .bnb-pop-block ul{ margin:0 !important; padding:0 !important; list-style:none; }
.bnb-karte .bnb-liste{ list-style:none; margin:0; padding:0; }
.bnb-karte .bnb-eintrag{ border:0; border-bottom:1px solid var(--bnb-linie); background:transparent; }
.bnb-karte .bnb-liste li:last-child .bnb-eintrag{ border-bottom:0; }

/* Legendenpunkte ohne Inline-Styles */
.bnb-punkt--handel{ background:var(--bnb-handel); }
.bnb-punkt--gastro{ background:var(--bnb-gastro); }
.bnb-punkt--beides{ background:linear-gradient(90deg,var(--bnb-handel) 50%,var(--bnb-gastro) 50%); }
.bnb-schleuse-symbol{ color:var(--bnb-akzent); }
.bnb-pop-tel{ color:var(--bnb-akzent); }

/* Runde Ecken des gesamten Widgets */
.bnb-karte{ border-radius:var(--bnb-r); }