/* A.0.98.0 — die Werbung als Agentur Placebo (tafeln/werbung.js, daten/agentur.js): Adressleiste wie bei Shoppital und Zweitbefund,
   oben der Kopf der Agentur, links Werbeträger, Spruch und Dauer, rechts die Vorschau deiner Werbung (gemaltes Bild, darauf dein Spruch:
   Kreide, Plakat, Sprechblase, Beitrag) mit dem Preis. Farben der Agentur: Tinte, Koralle, Creme. */

.tafel.wb-tafel {
  --wb-tinte: #23233a; --wb-tinte2: #3a3a58; --wb-koralle: #ff6150; --wb-koralle2: #d9453a; --wb-creme: #fbf8f3; --wb-sand: #f1ebe2;
  --wb-linie: #e3dccf; --wb-leise: #6b6a7e; --wb-gut: #2c7a4b; --wb-rot: #b33b28; --wb-petrol: #0e5b6a; --wb-mint: #1fa595;
  width: min(98%, 64em); height: min(100%, 46em); background: var(--wb-creme); color: var(--wb-tinte); border: 1px solid #b4ab9f; border-radius: .55em;
}
.wb-tafel .tafel-kopf { background: linear-gradient(#f1ece6, #e2dad1); color: var(--wb-tinte); padding: .3em .35em .3em .6em; border-bottom: 1px solid var(--wb-linie); }
.wb-tafel .tafel-kopf h2 { flex: 1; min-width: 0; font-family: var(--schrift); font-weight: 700; font-size: .8em; letter-spacing: 0; padding: .22em .85em;
  border-radius: 999px; background: #fff; border: 1px solid var(--wb-linie); color: var(--wb-leise); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wb-tafel .tafel-kopf h2::before { content: '🔒 '; font-size: .9em; }
.wb-tafel .tafel-zu { color: var(--wb-tinte); width: 1.9em; height: 1.6em; border-radius: .35em; display: grid; place-items: center; background: transparent; }
.wb-tafel .tafel-zu:hover, .wb-tafel .tafel-zu:focus-visible { background: #d93a3a; color: #fff; outline: none; }
.wb-tafel .tafel-inhalt { padding: 0; overflow: hidden; display: flex; flex-direction: column; }
.wb-tafel .tafel-fuss { background: var(--wb-sand); border-top: 1px solid var(--wb-linie); }
.wb { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; }
.wb .knopf:focus-visible { outline: 2px solid var(--wb-koralle); outline-offset: 2px; }

/* Kopf der Agentur */
.wb-kopf { flex: none; display: flex; align-items: center; gap: .9em; padding: .45em 1em; background: var(--wb-tinte); color: #fff; }
.wb-logo { display: flex; align-items: center; gap: .3em; }
.wb-pille { width: 2.1em; height: 2.1em; flex: none; }
.wb-logo b { font: 700 1.45em/1 var(--zier); letter-spacing: -.01em; color: #fff; }
.wb-logo b::after { content: '.'; color: var(--wb-koralle); }
.wb-claim { color: #cfcde0; font-weight: 700; font-size: .88em; }
.wb-claim i { color: #fff; font-style: italic; }
.wb-kunde { margin-left: auto; display: flex; align-items: center; gap: .35em; padding: .2em .7em .2em .5em; border-radius: 999px; background: rgba(255, 255, 255, .1);
  font-size: .85em; white-space: nowrap; }
.wb-kunde small { color: #cfcde0; font-weight: 700; margin-right: .15em; }
.wb-kunde .logo { width: 1.5em; height: 1.5em; flex: none; }

/* Seite: links die Wahl, rechts die Vorschau (bleibt beim Rollen stehen) */
.wb-haupt, .wb-laeuft { flex: 1 1 auto; min-height: 0; overflow: auto; overscroll-behavior: contain; display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: 1.2em; padding: .9em 1em 1.1em; align-items: start; }
.wb-wahl section + section { margin-top: .95em; }
.wb h3 { display: flex; align-items: center; gap: .45em; margin: 0 0 .5em; font: 700 1.08em/1.2 var(--zier); color: var(--wb-tinte); }
.wb-nr { display: inline-grid; place-items: center; width: 1.45em; height: 1.45em; border-radius: 50%; background: var(--wb-koralle); color: #fff; font: 700 .85em/1 var(--schrift); flex: none; }

/* 1 · Werbeträger als Karten mit ihrem Bild */
.wb-arten { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .5em; }
.wb .wb-art { display: flex; flex-direction: column; align-items: stretch; gap: .12em; padding: .3em .3em .45em; text-align: center; color: var(--wb-tinte);
  background: #fff; border: 2px solid var(--wb-linie); border-radius: .65em; box-shadow: 0 .1em .25em rgba(35, 35, 58, .08); cursor: pointer; font: inherit; }
.wb .wb-art:hover:not(:disabled) { border-color: #f3b3aa; background: #fff; }
.wb .wb-art.an { border-color: var(--wb-koralle); background: #fff4f1; box-shadow: 0 .15em .5em rgba(255, 97, 80, .25); }
.wb-art-bild { display: block; aspect-ratio: 3 / 2; border-radius: .45em; overflow: hidden; background: var(--wb-sand); margin-bottom: .2em; }
.wb-art-bild img { display: block; width: 100%; height: 100%; object-fit: cover; }
.wb-art-bild .emoji { display: grid; place-items: center; height: 100%; font-size: 1.6em; }
.wb-art b { font-weight: 800; font-size: .92em; line-height: 1.15; }
.wb-art small { font-weight: 700; font-size: .78em; color: var(--wb-leise); }
.wb-punkte { font-size: .7em; letter-spacing: .15em; color: var(--wb-koralle); }

/* 2 · Sprüche: das Lob der Agentur darunter, der Stempel des Stadtkuriers in der Ecke */
.wb-lob-hinweis { margin: -.15em 0 .55em !important; font-size: .82em; color: var(--wb-leise); font-weight: 600; }
.wb-sprueche { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5em; }
.wb .wb-spruch { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: .15em; padding: .4em .6em .45em; text-align: left;
  color: var(--wb-tinte); background: #fff; border: 2px solid var(--wb-linie); border-radius: .6em; cursor: pointer; font: inherit; }
.wb .wb-spruch:hover:not(:disabled) { border-color: #f3b3aa; background: #fff; }
.wb .wb-spruch.an { border-color: var(--wb-koralle); background: #fff4f1; }
.wb-spruch-text { font: 600 .93em/1.22 var(--zier); }
.wb-lob { font-size: .74em; font-style: italic; font-weight: 600; color: var(--wb-leise); line-height: 1.28; }
.wb-stempel { position: absolute; top: -.55em; right: .45em; padding: .08em .45em; transform: rotate(3deg); background: #fff; border: 1.5px solid currentColor;
  border-radius: .2em; font: 700 .66em/1.3 'PT Serif', serif; text-transform: uppercase; letter-spacing: .04em; white-space: nowrap; }
.wb-stempel.top { color: var(--wb-gut); } .wb-stempel.mau { color: var(--wb-leise); } .wb-stempel.flop { color: var(--wb-rot); }


/* Die Vorschau */
.wb-seite { position: sticky; top: 0; display: flex; flex-direction: column; gap: .55em; }
.wb-titel { margin: 0 !important; font: 700 .8em/1.2 var(--schrift); text-transform: uppercase; letter-spacing: .1em; color: var(--wb-leise); }
/* overflow: clip statt hidden — hidden macht die Vorschau zum Rollbereich, und das Raster gab ihrer Zeile schmal 0 px Höhe (A.0.98.0) */
.wb-buehne { position: relative; container-type: inline-size; aspect-ratio: 3 / 2; border-radius: .7em; overflow: clip; background: var(--wb-sand);
  box-shadow: 0 .45em 1.1em rgba(35, 35, 58, .25); }
.wb-zoom { position: absolute; inset: 0; transform: scale(1.2); }
.wb-zoom > img { display: block; width: 100%; height: 100%; object-fit: cover; }
.wb-auf { position: absolute; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; box-sizing: border-box; }
.wb-auf p { margin: 0; }

/* Kreide auf dem Aufsteller */
.wb-kreide { padding: 2.6cqw 2cqw; gap: 1.1cqw; color: rgba(248, 247, 240, .93); transform: rotate(-1.2deg); }
.wb-kreide-spruch { font-family: var(--zier); font-weight: 600; line-height: 1.12; text-wrap: balance;
  text-shadow: 0 0 .3cqw rgba(255, 255, 255, .5), .1cqw .1cqw 0 rgba(255, 255, 255, .18); }
.wb-kreide-strich { width: 72%; height: 1.3cqw; overflow: visible; }
.wb-kreide-strich path { fill: none; stroke: rgba(248, 247, 240, .82); stroke-width: 1.6px; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.wb-kreide-klinik { font: 600 1.85cqw/1.2 var(--zier); color: #ffe27a; text-shadow: 0 0 .3cqw rgba(255, 226, 122, .45); }

/* Plakat in der Haltestelle (hinterleuchtet) */
.wb-poster { padding: 2.2cqw 1.6cqw 1.8cqw; justify-content: space-between; gap: 1cqw; color: #fff;
  background: radial-gradient(circle at 30% 18%, rgba(255, 255, 255, .25), transparent 45%), linear-gradient(165deg, var(--wb-petrol), var(--wb-mint) 72%, #6fd3c3);
  box-shadow: inset 0 0 1.6cqw rgba(255, 255, 255, .35); }
.wb-poster-zeichen { display: grid; place-items: center; width: 6.4cqw; height: 6.4cqw; border-radius: 50%; background: #fff; box-shadow: 0 .3cqw .8cqw rgba(0, 0, 0, .2); }
.wb-poster-zeichen .logo { width: 4.8cqw; height: 4.8cqw; }
.wb-poster-spruch { font-family: var(--zier); font-weight: 700; line-height: 1.08; text-wrap: balance; text-shadow: 0 .2cqw .5cqw rgba(0, 0, 0, .18); }
.wb-poster-klinik { font: 800 1.35cqw/1.2 var(--schrift); letter-spacing: .05em; text-transform: uppercase; padding: .5cqw 1cqw; border-radius: .6cqw; background: rgba(255, 255, 255, .2); }

/* Sprechblase über dem Radio */
.wb-blase { padding: 1.5cqw 2.6cqw; gap: .5cqw; color: var(--wb-tinte); background: #fff; border: 2px solid var(--wb-tinte); border-radius: 3cqw;
  box-shadow: 0 .5cqw 0 rgba(35, 35, 58, .12); }
.wb-blase small { font: italic 700 1.85cqw/1.2 var(--schrift); color: var(--wb-leise); }
.wb-blase-spruch { font-family: var(--zier); font-weight: 700; line-height: 1.1; text-wrap: balance; }
.wb-blase-klinik { font: 800 2.1cqw/1.2 var(--schrift); }
.wb-jingle { color: var(--wb-koralle); white-space: nowrap; }
.wb-zipfel { position: absolute; overflow: visible; }
.wb-zipfel .fuell { fill: #fff; }
.wb-zipfel .rand { fill: none; stroke: var(--wb-tinte); stroke-width: 2px; stroke-linejoin: round; vector-effect: non-scaling-stroke; }

/* Beitrag auf dem Handy */
.wb-handy { justify-content: flex-start; padding: 1.2cqw 1.1cqw 1cqw; gap: .8cqw; background: #f2f3f7; border-radius: 3.4cqw; overflow: hidden; }
.wb-handy-leiste { display: flex; justify-content: space-between; width: 100%; padding: 0 1.4cqw; font: 800 1.15cqw/1 var(--schrift); color: var(--wb-tinte); }
.wb-handy-leiste span { letter-spacing: .05em; font-size: .9em; }
.wb-post { width: 100%; background: #fff; border-radius: 1.4cqw; box-shadow: 0 .2cqw .7cqw rgba(0, 0, 0, .12); overflow: hidden; text-align: left; }
.wb-post-kopf { display: flex; align-items: center; gap: .8cqw; padding: 1cqw 1.1cqw; }
.wb-post-kopf .logo { width: 3.4cqw; height: 3.4cqw; flex: none; }
.wb-post-kopf span { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.wb-post-kopf b { font: 800 1.3cqw/1.15 var(--schrift); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wb-post-kopf small { font: 700 1.05cqw/1.2 var(--schrift); color: #8a8a9a; }
.wb-post-kopf i { font-style: normal; color: #8a8a9a; font-size: 1.6cqw; }
.wb-post-bild { aspect-ratio: 1; display: grid; place-items: center; padding: 2cqw; color: #fff;
  background: radial-gradient(circle at 25% 20%, rgba(255, 255, 255, .25), transparent 50%), linear-gradient(150deg, var(--wb-petrol), var(--wb-mint)); }
.wb-post-bild p { font-family: var(--zier); font-weight: 700; line-height: 1.1; text-align: center; text-wrap: balance; }
.wb-post-leiste { display: flex; gap: 1.8cqw; padding: .9cqw 1.3cqw .3cqw; font: 800 1.2cqw/1.2 var(--schrift); color: var(--wb-tinte); }
.wb-post-knopf { margin: .7cqw 1.3cqw 1.3cqw; padding: 1cqw; border-radius: 999px; background: var(--wb-koralle); color: #fff; text-align: center; font: 800 1.25cqw/1 var(--schrift); }

/* Unter der Vorschau: was es ist, was es kostet, das Kleingedruckte */
.wb-was { margin: 0 !important; font-size: .9em; line-height: 1.35; }
/* 3 · Dauer und Preis in einem Kasten unter der Vorschau, mit dem Zeitstrahl: hell wirkt sie (tagsüber), dunkel schläft die Stadt */
.wb-rechnung { display: flex; flex-direction: column; gap: .45em; padding: .55em .8em .6em; border-radius: .7em; background: #fff; border: 1px solid var(--wb-linie); }
.wb-dauer { display: flex; align-items: center; flex-wrap: wrap; gap: .4em .8em; }
.wb-dauer h3 { margin: 0; }
.wb-preis { margin: 0 0 0 auto !important; font-size: 1.05em; font-weight: 700; white-space: nowrap; }
.wb-preis b { font-size: 1.15em; color: var(--wb-koralle2); }
.wb-info { margin: 0 !important; font-size: .8em; font-weight: 600; color: var(--wb-leise); line-height: 1.35; }
.wb-info b { color: var(--wb-tinte); }
.wb-info .wb-zu-wenig { color: var(--wb-rot); font-weight: 800; }
.wb-strahl-band { position: relative; display: flex; height: .95em; border-radius: 999px; overflow: hidden; border: 1px solid var(--wb-linie); }
.wb-strahl-band i { display: block; height: 100%; }
.wb-strahl-band i.tag { background: linear-gradient(#ffe3a3, #ffc970); }
.wb-strahl-band i.nacht { background: linear-gradient(#3a3a58, #23233a); }
.wb-strahl-band i + i { box-shadow: inset 1px 0 0 rgba(255, 255, 255, .6); }
.wb-vorbei { position: absolute; left: 0; top: 0; bottom: 0; background: repeating-linear-gradient(135deg, rgba(255, 255, 255, .55) 0 .25em, rgba(255, 255, 255, .2) .25em .5em);
  border-right: 2px solid var(--wb-koralle); }
.wb-strahl-uhr { display: flex; justify-content: space-between; gap: .6em; margin-top: .2em; font-size: .72em; font-weight: 700; color: var(--wb-leise); }
.wb-klein { margin: 0 !important; font-size: .78em; color: var(--wb-leise); line-height: 1.4; font-weight: 600; }
.wb-wahl .wb-klein { margin-top: .9em !important; }

/* Läuft eine Kampagne: die Vorschau mit Band in der Ecke, daneben der Stand */
.wb-band { position: absolute; z-index: 2; top: 6.5cqw; left: -10cqw; width: 42cqw; padding: 1cqw 0; transform: rotate(-35deg); text-align: center;
  background: var(--wb-gut); color: #fff; font: 800 2.7cqw/1 var(--schrift); letter-spacing: .14em; text-transform: uppercase; box-shadow: 0 .3cqw .8cqw rgba(0, 0, 0, .3); }
.wb-band.nachts { background: var(--wb-tinte2); font-size: 2cqw; letter-spacing: .06em; }
.wb-band.panne { background: var(--wb-rot); }
.wb-status { display: flex; flex-direction: column; gap: .55em; }
.wb-status h3 { margin: 0; }
.wb-status p { margin: 0 !important; }
.wb-laeuft { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); }
.wb-zeit { padding: .5em .7em .55em; border-radius: .6em; background: #fff; border: 1px solid var(--wb-linie); }
.wb-presse { margin-top: .4em; padding-top: .6em; border-top: 1px dashed var(--wb-linie); }
.wb-presse h4 { margin: 0 0 .4em; font: 700 .95em/1.2 var(--zier); color: var(--wb-tinte); }
.wb-presse p { margin: 0 0 .3em !important; font: 600 .9em/1.35 var(--zier); }
.wb-presse p.wb-klein { font: 600 .78em/1.4 var(--schrift); }
.wb-presse .wb-stempel { position: static; display: inline-block; transform: rotate(-2deg); margin-right: .4em; vertical-align: .1em; }

/* Schmal (Handy): die Vorschau oben, halb so breit neben Preis und Kleingedrucktem; Karten zu zweit, Sprüche untereinander */
@container (max-width: 760px) {
  .wb-haupt, .wb-laeuft { grid-template-columns: minmax(0, 1fr); padding: .7em .8em 1em; }
  /* Reihenfolge schmal: Vorschau (kleiner), 1 und 2, dann 3 mit dem Preis */
  .wb-seite { display: contents; }
  .wb-titel, .wb-seite > .wb-buehne, .wb-was { order: -1; }
  .wb-seite > .wb-buehne, .wb-laeuft > .wb-buehne { width: 22em; max-width: 100%; justify-self: center; }
  .wb-rechnung { order: 1; }
  .wb-arten { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .35em; }
  .wb-sprueche { grid-template-columns: minmax(0, 1fr); }
  .wb-claim { display: none; }
}
@container (max-width: 480px) {
  .wb-arten { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .wb-kunde small { display: none; }
}