/* Lebensmittelkarte auf wie-schmeckt.de.
   Eingebettet per Shortcode, laeuft also INNERHALB des Themes. Newspaper hat
   eigenen Anspruch auf .card, .btn, .bar, .tabs und weitere Allerweltsnamen —
   deshalb steht jede Regel unter .wsa und alle eigenen Namen tragen wsa-.
   Kein Dunkelmodus: die Seite hat keinen, ein dunkler Block auf weissem Grund
   wirkt wie ein Fehler. */

@font-face{
  font-family:'WsaDisplay';font-style:normal;font-weight:400 800;font-display:swap;
  src:url(fonts/archivo-var-latin.woff2) format('woff2');
}
@font-face{
  font-family:'WsaText';font-style:normal;font-weight:400 700;font-display:swap;
  src:url(fonts/opensans-var-latin.woff2) format('woff2');
}

.wsa{
  --ink:#1a1817; --muted:#55504a; --line:#ded6c9;
  --paper:#fbf7f1; --surface:#ffffff;
  --land:#efe4d4; --land-line:#b6a68d; --ocean:#cbdcda;
  --accent:#e1523d; --accent-dark:#b93a28; --accent-ink:#ffffff;
  --truth:#1e8e5a; --truth-dark:#166b45;
  --radius:18px;

  position:relative;
  /* Der Umbruch auf zwei Spalten haengt an der Breite DIESES Blocks, nicht am
     Fenster: bei 1280px Fenster ist die Inhaltsspalte des Themes nur 744px
     breit, und eine Fensterabfrage schaltete dort zwei Spalten zu je 356px und
     270px ein — die Karte war winzig. Deshalb @container. */
  container-type:inline-size;
  max-width:680px;
  margin:34px auto;
  background:var(--paper);
  border:1px solid var(--line);
  border-radius:var(--radius);
  overflow:hidden;
  color:var(--ink);
  font-family:'WsaText','Open Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  font-size:16px;
  line-height:1.55;
  box-shadow:0 10px 30px rgba(29,27,26,.07);
  -webkit-text-size-adjust:100%;
}
/* --- Zuruecksetzen, was das Theme mitbringt --- */
.wsa *, .wsa *::before, .wsa *::after{box-sizing:border-box}
.wsa p, .wsa h2, .wsa h3, .wsa ul, .wsa ol, .wsa li{margin:0;padding:0}
.wsa ul, .wsa ol{list-style:none}
.wsa h2, .wsa h3{font-family:'WsaDisplay',system-ui,sans-serif;text-transform:none;letter-spacing:normal}
.wsa button{
  font:inherit;color:inherit;cursor:pointer;border:0;background:none;
  margin:0;padding:0;text-transform:none;letter-spacing:normal;box-shadow:none;
}
.wsa input{font:inherit;margin:0}
.wsa img{max-width:100%;height:auto;display:block;margin:0;border-radius:0}
.wsa a{box-shadow:none;text-decoration:none}
.wsa :focus-visible{outline:3px solid var(--accent);outline-offset:2px;border-radius:5px}
.wsa [hidden]{display:none !important}
.wsa-sr{
  position:absolute;width:1px;height:1px;overflow:hidden;
  clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;
}

/* --- Kopf --- */
.wsa-head{padding:26px 22px 0}
.wsa-kicker{
  font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:var(--accent);margin:0 0 6px !important;
}
.wsa-titel{
  font-weight:800;font-size:clamp(27px,6.4vw,36px);line-height:1.04;letter-spacing:-.03em;
  margin:0 0 10px !important;color:var(--ink);
}
.wsa-titel i{color:var(--accent);font-style:normal}
.wsa-lede{margin:0 !important;font-size:15px;color:var(--muted);max-width:52ch}

/* --- Werkzeugleiste --- */
.wsa-tools{
  display:flex;flex-wrap:wrap;gap:10px;align-items:center;
  padding:18px 22px 16px;
}
.wsa-such{position:relative;flex:1 1 210px;min-width:0}
.wsa-such input{
  /* box-sizing muss hier noch einmal stehen. Der Normalize-Satz des Themes
     enthaelt input[type="search"]{box-sizing:content-box} — eine Attribut-
     auswahl, die meinen Reset .wsa * schlaegt. Folge war ein Suchfeld, das
     seinen Behaelter um die 72px Innenabstand ueberragte. */
  box-sizing:border-box;
  display:block;
  width:100%;padding:10px 34px 10px 38px;border-radius:12px;
  border:1px solid var(--line);background:var(--surface);color:var(--ink);
  font-size:15px;line-height:1.3;-webkit-appearance:none;appearance:none;
}
.wsa-such input::-webkit-search-cancel-button{display:none}
.wsa-such input:focus{outline:0;border-color:var(--accent);box-shadow:0 0 0 3px rgba(225,82,61,.16)}
.wsa-lupe{
  position:absolute;left:12px;top:50%;transform:translateY(-50%);
  width:17px;height:17px;fill:var(--muted);pointer-events:none;
}
.wsa-clear{
  position:absolute;right:6px;top:50%;transform:translateY(-50%);
  width:26px;height:26px;border-radius:50%;font-size:19px;line-height:1;
  color:var(--muted);
}
.wsa-clear:hover{background:var(--line);color:var(--ink)}

/* Die Chips brechen um. Erster Versuch war eine seitlich rollende Bahn mit
   ausgeblendeter Rollleiste — das war falsch: mit der Maus laesst sich so etwas
   nur mit Umschalt+Rad bewegen, und dass rechts noch Gruppen stehen, sieht
   niemand. Abgeschnittene Begriffe sind schlimmer als eine zweite Zeile. */
.wsa-chipbahn{flex:1 1 100%;min-width:0}
.wsa-chips{display:flex;flex-wrap:wrap;gap:6px}
.wsa-chips button{
  padding:7px 12px;border-radius:999px;border:1px solid var(--line);
  background:var(--surface);font-size:13.5px;font-weight:600;color:var(--muted);
  white-space:nowrap;
}
.wsa-chips button small{font-size:11.5px;font-weight:600;opacity:.6;margin-left:3px}
.wsa-chips button:hover{border-color:var(--land-line);color:var(--ink)}
.wsa-chips button[aria-pressed="true"]{
  background:var(--ink);border-color:var(--ink);color:#fff;
}
.wsa-chips button[aria-pressed="true"] small{opacity:.65}
.wsa-chip--aus{display:none}
.wsa-mehrchips{
  padding:7px 12px;border-radius:999px;
  border:1px dashed var(--land-line);background:transparent;
  font-size:13px;font-weight:700;color:var(--muted);white-space:nowrap;
}
.wsa-mehrchips:hover{border-color:var(--accent);color:var(--accent)}

/* --- Karte und Tafel --- */
.wsa-grid{padding:0 22px;display:grid;gap:16px}

.wsa-stage{
  position:relative;
  /* width MUSS mit stehen. Ohne sie leitet aspect-ratio im Raster die Breite
     aus der gestreckten Hoehe ab — die Karte wurde dadurch 711px breit in
     einer 618px-Spalte und schob sich ueber die Tafel. */
  width:100%;
  aspect-ratio:2000/1287;
  border:1px solid var(--line);border-radius:14px;
  background:var(--ocean);
  overflow:hidden;
  touch-action:none;           /* sonst schluckt der Browser Wisch und Zwei-Finger-Zoom */
  /* Bei ganzer Welt setzt das Skript .wsa-stage--frei, siehe setzeGriff(). */
  cursor:grab;
  -webkit-user-select:none;user-select:none;
}
.wsa-stage--frei{touch-action:pan-y}
.wsa-stage:active{cursor:grabbing}
.wsa-stage.wsa-zeig{cursor:pointer}
.wsa-stage svg{display:block;width:100%;height:100%}
#wsa-cam{transform-origin:0 0}
#wsa-land path{fill:var(--land);stroke:var(--land-line);stroke-width:.7;vector-effect:non-scaling-stroke}

/* Eine Farbe fuer alle Punkte. Zwoelf Warengruppen einzufaerben waere auf
   einer Weltkarte mit 201 Punkten nicht lesbar; wer eine Gruppe sehen will,
   filtert sie — dann steht ihre Verteilung allein auf der Karte, und das
   zeigt mehr als jede Legende. */
.wsa-dot{
  fill:var(--accent);
  stroke:#fff;stroke-width:1.6;vector-effect:non-scaling-stroke;
  cursor:pointer;
}
.wsa-dot--aus{display:none}
.wsa-dot--an{stroke:#fff;stroke-width:2.4}
.wsa-ring{
  fill:none;stroke:var(--ink);stroke-width:1.6;opacity:.5;
  vector-effect:non-scaling-stroke;pointer-events:none;
}

.wsa-hint{
  position:absolute;left:10px;bottom:10px;margin:0 !important;
  padding:5px 10px;border-radius:999px;
  background:rgba(26,24,23,.76);color:#fff;
  font-size:12px;font-weight:600;pointer-events:none;
}
.wsa-tip{
  position:absolute;transform:translate(14px,-130%);
  padding:4px 9px;border-radius:8px;
  background:var(--ink);color:#fff;
  font-size:12.5px;font-weight:600;white-space:nowrap;
  pointer-events:none;z-index:3;
}
.wsa-tip--links{transform:translate(calc(-100% - 14px),-130%)}
.wsa-tip--unten{transform:translate(14px,30%)}
.wsa-tip--links.wsa-tip--unten{transform:translate(calc(-100% - 14px),30%)}

.wsa-zoom{position:absolute;right:10px;top:10px;display:flex;flex-direction:column;gap:5px;z-index:3}
.wsa-zoom button{
  width:33px;height:33px;border-radius:9px;
  background:rgba(255,255,255,.94);border:1px solid var(--line);
  font-size:19px;font-weight:600;line-height:1;color:var(--ink);
  display:flex;align-items:center;justify-content:center;
}
.wsa-zoom button:hover{background:#fff;border-color:var(--land-line)}
.wsa-zoom svg{width:17px;height:17px;fill:currentColor}

/* --- Tafel --- */
.wsa-panel{
  border:1px solid var(--line);border-radius:14px;background:var(--surface);
  overflow:hidden;min-height:150px;display:flex;flex-direction:column;
}
.wsa-inhalt{display:contents}
.wsa-leerpanel{padding:24px 20px;text-align:center;color:var(--muted);margin:auto}
.wsa-leerpanel svg{width:30px;height:30px;fill:var(--line);margin:0 auto 10px}
.wsa-leerpanel p{margin:0 0 4px !important;font-size:13.5px}
.wsa-leerpanel p:last-child{margin:0 !important}
.wsa-leerpanel strong{color:var(--ink);font-weight:700}

.wsa-karte{display:flex;flex-direction:column;height:100%}
.wsa-bild{width:100%;aspect-ratio:16/10;object-fit:cover;flex:0 0 auto}
.wsa-body{padding:16px 18px 18px;display:flex;flex-direction:column;gap:7px;flex:1 1 auto}
.wsa-art{
  margin:0 !important;font-size:10.5px;font-weight:700;letter-spacing:.12em;
  text-transform:uppercase;color:var(--accent);
}
.wsa-name{
  font-weight:800;font-size:22px;line-height:1.14;letter-spacing:-.02em;
  margin:0 !important;color:var(--ink);
}
.wsa-ort{
  margin:0 !important;display:flex;align-items:flex-start;gap:5px;
  font-size:13.5px;font-weight:600;color:var(--muted);
}
.wsa-ort svg{width:14px;height:14px;fill:var(--land-line);flex:0 0 auto;margin-top:2px}
.wsa-fakt{margin:2px 0 0 !important;font-size:14px;line-height:1.5;color:var(--ink)}
.wsa-mehr{
  margin-top:auto;padding-top:12px;align-self:flex-start;
  font-size:14px;font-weight:700;color:var(--accent);
}
.wsa-mehr:hover{color:var(--accent-dark);text-decoration:underline}

/* --- Mehrere Punkte an derselben Stelle --- */
.wsa-mehrere{padding:16px 18px}
.wsa-mehrkopf{
  margin:0 0 10px !important;font-family:'WsaDisplay',system-ui,sans-serif;
  font-size:15px;font-weight:700;
}
.wsa-wahl{max-height:250px;overflow-y:auto;-webkit-overflow-scrolling:touch}
.wsa-wahl li+li{border-top:1px solid var(--line)}
.wsa-wahl button{display:flex;align-items:center;gap:10px;width:100%;padding:8px 0;text-align:left}
.wsa-wahl img, .wsa-wahl .wsa-noimg{width:40px;height:40px;border-radius:8px;object-fit:cover;flex:0 0 auto}
.wsa-wahl b{display:block;font-size:14px;font-weight:700;line-height:1.3}
.wsa-wahl small{display:block;font-size:12px;color:var(--muted);line-height:1.3}
.wsa-wahl button:hover b{color:var(--accent)}
.wsa-mehrfuss{margin:10px 0 0 !important;font-size:12px;color:var(--muted)}

/* --- Liste --- */
.wsa-listenwrap{padding:18px 22px 6px}
.wsa-listenkopf{
  margin:0 0 8px !important;font-family:'WsaDisplay',system-ui,sans-serif;
  font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:var(--muted);display:flex;align-items:center;gap:8px;
}
.wsa-zahl{
  padding:1px 8px;border-radius:999px;background:var(--line);color:var(--ink);
  font-size:11.5px;letter-spacing:0;
}
.wsa-liste{
  max-height:min(56vh,430px);overflow-y:auto;-webkit-overflow-scrolling:touch;
  border:1px solid var(--line);border-radius:14px;background:var(--surface);
  overscroll-behavior:contain;
}
.wsa-liste li{display:flex;align-items:center;gap:4px;padding:0 8px 0 0}
.wsa-liste li+li{border-top:1px solid var(--line)}
.wsa-liste li.wsa-li--an{background:#fff5f2}
.wsa-liste a{
  display:flex;align-items:center;gap:11px;padding:8px 4px 8px 10px;
  flex:1 1 auto;min-width:0;color:var(--ink);
}
.wsa-liste img, .wsa-noimg{
  width:44px;height:44px;border-radius:9px;object-fit:cover;flex:0 0 auto;
  background:var(--land);
}
.wsa-noimg{display:block}
.wsa-txt{min-width:0}
.wsa-n{display:block;font-size:14.5px;font-weight:700;line-height:1.3}
.wsa-o{
  display:block;font-size:12.5px;color:var(--muted);line-height:1.3;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.wsa-liste a:hover .wsa-n{color:var(--accent)}
.wsa-pin{
  width:32px;height:32px;border-radius:9px;flex:0 0 auto;
  display:flex;align-items:center;justify-content:center;
  border:1px solid transparent;
}
.wsa-pin svg{width:16px;height:16px;fill:var(--land-line)}
.wsa-pin:hover{background:var(--paper);border-color:var(--line)}
.wsa-pin:hover svg{fill:var(--accent)}
.wsa-li--an .wsa-pin svg{fill:var(--accent)}
.wsa-nix{margin:12px 0 0 !important;font-size:13.5px;color:var(--muted);text-align:center}

/* --- Fuss --- */
/* Ueber die ganze Blockbreite standen hier rund 200 Zeichen in einer Zeile.
   Die Trennlinie setzt den Hinweis zugleich von der Liste ab, an der er sonst
   klebte. */
.wsa-fuss{
  margin:16px 22px 0 !important;padding:14px 0 20px;
  border-top:1px solid var(--line);
  max-width:72ch;
  font-size:12.5px;line-height:1.6;color:var(--muted);
}
.wsa-fuss em{font-style:normal;font-weight:700;color:var(--ink)}

/* --- Ab 1019px liegen Karte und Tafel nebeneinander. Untereinander wird der
       Block sonst ueber 1000px hoch und man scrollt am Schreibtisch dauernd. --- */
/* Unter 560px Blockbreite braucht es 13 Chips in vier bis fuenf Zeilen. Etwas
   kleiner gesetzt passen sie in drei und schieben die Karte nicht so weit
   nach unten. */
@container (max-width:559px){
  .wsa-chips{gap:5px}
  .wsa-chips button, .wsa-mehrchips{padding:6px 10px;font-size:12.5px}
  .wsa-chips button small{font-size:11px;margin-left:2px}
}

/* Die Breite des Blocks selbst darf nicht vom Container abhaengen, das waere
   zirkulaer — sie bleibt am Fenster. */
@media (min-width:1019px){
  .wsa{max-width:none}
  .wsa-titel{font-size:38px}
}

/* Ab hier ist Platz fuer Karte und Tafel nebeneinander. Untereinander wird der
   Block sonst ueber 1000px hoch und man scrollt am Schreibtisch dauernd.
   780px, weil die Tafel unter 290px unleserlich wird und die Karte mindestens
   460px braucht, damit die Punktwolke in Europa auseinanderfaellt. */
@container (min-width:780px){
  .wsa-head, .wsa-tools, .wsa-grid, .wsa-listenwrap{padding-left:26px;padding-right:26px}
  .wsa-fuss{margin-left:26px;margin-right:26px}
  /* align-items:start, damit die Karte ihr Seitenverhaeltnis behaelt und nicht
     auf die Zeilenhoehe gestreckt wird; die Tafel holt sich die Hoehe selbst.
     Mit align-items:stretch leitete aspect-ratio die Breite aus der Hoehe ab
     und die Karte schob sich ueber die Tafel. */
  .wsa-grid{grid-template-columns:minmax(0,1.6fr) minmax(290px,1fr);align-items:start}
  .wsa-panel{align-self:stretch;min-height:0}
  .wsa-liste{max-height:340px}
}


/* --- Vor dem Start des Skripts gibt es keine Punkte. Dann ist der Hinweis
       "Tippe auf einen Punkt" eine Luege, also erst danach zeigen. --- */
.wsa .wsa-hint{display:none}
.wsa--bereit .wsa-hint{display:block}

@media (prefers-reduced-motion:reduce){
  .wsa #wsa-cam{transition:none !important}
  .wsa-dot{transition:none}
}

/* --- Farben, zweiter Durchgang. Dieselbe Falle wie bei den Groessen, nur
       uebersehen: das Theme liefert
         .td-page-content, .td-page-content p { color: #222 }
       Eine Auswahl mit 0,1,1 — sie schlaegt jede eigene Regel, die nur an einer
       Klasse haengt (0,1,0). Folge war, dass JEDER Absatz im Block auf #222
       stand: der Kicker grau statt rot, und der Hinweis auf der Karte
       dunkelgrau auf dunklem Grund, also unlesbar.
       Deshalb steht hier jede Textfarbe ein zweites Mal, ueber zwei Klassen
       und mit !important. Sichtbar wird so ein Fehler nur im Theme, nicht in
       einer eigenen Vorschau — nach jedem neuen Baustein die berechneten
       Farben gegen die gewollten pruefen. --- */
div.wsa, div.wsa p, div.wsa li, div.wsa h2, div.wsa h3{color:var(--ink) !important}
.wsa .wsa-kicker{color:var(--accent) !important}
.wsa .wsa-titel{color:var(--ink) !important}
.wsa .wsa-titel i{color:var(--accent) !important}
.wsa .wsa-lede{color:var(--muted) !important}
.wsa .wsa-hint{color:#fff !important}
.wsa .wsa-tip{color:#fff !important}
.wsa .wsa-leerpanel p{color:var(--muted) !important}
.wsa .wsa-leerpanel strong{color:var(--ink) !important}
.wsa .wsa-art{color:var(--accent) !important}
.wsa .wsa-name{color:var(--ink) !important}
.wsa .wsa-ort{color:var(--muted) !important}
.wsa .wsa-fakt{color:var(--ink) !important}
.wsa .wsa-mehr{color:var(--accent) !important}
.wsa .wsa-mehr:hover{color:var(--accent-dark) !important}
.wsa .wsa-mehrfuss{color:var(--muted) !important}
.wsa .wsa-wahl small{color:var(--muted) !important}
.wsa .wsa-listenkopf{color:var(--muted) !important}
.wsa .wsa-zahl{color:var(--ink) !important}
.wsa .wsa-liste a{color:var(--ink) !important}
.wsa .wsa-liste .wsa-o{color:var(--muted) !important}
.wsa .wsa-liste a:hover .wsa-n{color:var(--accent) !important}
.wsa .wsa-nix{color:var(--muted) !important}
.wsa .wsa-fuss{color:var(--muted) !important}
.wsa .wsa-fuss em{color:var(--ink) !important}
.wsa .wsa-chips button{color:var(--muted) !important}
.wsa .wsa-chips button:hover{color:var(--ink) !important}
.wsa .wsa-chips button[aria-pressed="true"]{color:#fff !important}
.wsa .wsa-mehrchips{color:var(--muted) !important}
.wsa .wsa-mehrchips:hover{color:var(--accent) !important}
.wsa .wsa-zoom button{color:var(--ink) !important}
.wsa .wsa-such input{color:var(--ink) !important}
.wsa .wsa-clear{color:var(--muted) !important}

/* --- Das Mobil-Theme von tagDiv liefert inline
       @media (max-width:768px){ .td-post-content p, .td-page-content p, … {font-size:17px !important} }
       und traf damit jeden Absatz im Block — beim Quiz und bei Zungo standen
       deshalb Kicker, Hinweise und sogar die Endpunktzahl alle auf 17px.
       Die Theme-Regel steht inline im Head, Reihenfolge hilft also nicht,
       Spezifitaet schon: die Grundregel laeuft ueber div.wsa, jede Klassenregel
       darunter schlaegt sie mit !important. --- */
div.wsa{font-size:16px !important;line-height:1.55 !important}
div.wsa p, div.wsa li{
  font-family:'WsaText','Open Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif !important;
  font-size:16px !important;line-height:1.55 !important;
}
.wsa .wsa-kicker{font-size:11px !important;line-height:1.4 !important}
.wsa .wsa-titel{
  font-family:'WsaDisplay',system-ui,sans-serif !important;
  font-size:clamp(27px,6.4vw,36px) !important;line-height:1.04 !important;
}
.wsa .wsa-lede{font-size:15px !important;line-height:1.55 !important}
.wsa .wsa-hint{font-size:12px !important;line-height:1.4 !important}
.wsa .wsa-leerpanel p{font-size:13.5px !important;line-height:1.5 !important}
.wsa .wsa-art{font-size:10.5px !important;line-height:1.4 !important}
.wsa .wsa-name{
  font-family:'WsaDisplay',system-ui,sans-serif !important;
  font-size:22px !important;line-height:1.14 !important;
}
.wsa .wsa-ort{font-size:13.5px !important;line-height:1.45 !important}
.wsa .wsa-fakt{font-size:14px !important;line-height:1.5 !important}
.wsa .wsa-listenkopf{
  font-family:'WsaDisplay',system-ui,sans-serif !important;
  font-size:12px !important;line-height:1.4 !important;
}
.wsa .wsa-liste li{font-size:14.5px !important;line-height:1.3 !important}
.wsa .wsa-nix{font-size:13.5px !important;line-height:1.5 !important}
.wsa .wsa-mehrkopf{
  font-family:'WsaDisplay',system-ui,sans-serif !important;
  font-size:15px !important;line-height:1.35 !important;
}
.wsa .wsa-mehrfuss{font-size:12px !important;line-height:1.45 !important}
.wsa .wsa-fuss{font-size:12.5px !important;line-height:1.55 !important}