/* ──────────────────────────────────────────────────────────────────────────
   Werbung am Objekt (/werbung), Neubau 11.10.2026 nach KONZEPT-2026-10-11.md.
   Eigene Datei, damit parallele Arbeiten an stil.css nicht kollidieren. Präfix .wb-.
   Phil: „Am Objekt Bilder cool anordnen", also kein Raster aus vier gleichen
   Kacheln. Die vier Werbemittel stehen im Zickzack: groß links und klein rechts
   unten, dann klein links versetzt und groß rechts.
   Farben nur aus stil.css: --tinte, --akzent, --band, --leise, --linie, --weiss.
   ────────────────────────────────────────────────────────────────────────── */

.wb-teil { position: relative; padding-block: var(--abschnitt); background: var(--weiss); }
.wb-teil--band { background: var(--band); }
.wb-titel { margin-top: clamp(14px, 1.4vw, 24px); }
.wb-satz { margin-top: clamp(16px, 1.6vw, 28px); }
.wb-satz--eng { margin-top: 14px; color: var(--leise); }
.wb-knoepfe { display: flex; flex-wrap: wrap; gap: 12px; margin-top: clamp(20px, 2.2vw, 36px); }
.wb-kopf figure, .wb-teil figure { margin: 0; }
.wb-kopf img, .wb-teil img { display: block; width: 100%; height: auto; }

/* ── 1. Auftakt ──────────────────────────────────────────────────────────── */
.wb-kopf { padding: calc(var(--kopf) + clamp(36px, 5vw, 100px)) 0 var(--abschnitt); background: var(--weiss); }
.wb-kopf__innen {
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: clamp(20px, 2.4vw, 48px);
  row-gap: 24px; align-items: end;
}
.wb-kopf__text { grid-column: 1 / span 7; }
.wb-kopf .t-aussage { max-width: 24em; }
.wb-kopf__knopf { grid-column: 9 / -1; padding-top: 18px; border-top: 1px solid var(--linie); }
.wb-kopf__knopf .t-text { color: var(--text); max-width: 24em; }

/* Das Feld der vier Werbemittel */
.wb-feld {
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: clamp(20px, 2.4vw, 48px);
  row-gap: clamp(48px, 5.6vw, 112px); margin-top: clamp(44px, 5vw, 96px);
}
.wb-mittel img { border-radius: 4px; box-shadow: 0 40px 70px -54px rgba(16, 24, 32, .45); background: var(--band-hell); }
.wb-mittel--fenster { grid-column: 1 / span 7; grid-row: 1; }
.wb-mittel--bauschild { grid-column: 9 / -1; grid-row: 1; align-self: end; }
.wb-mittel--banner { grid-column: 5 / -1; grid-row: 2 / span 2; }
.wb-mittel--tafel { grid-column: 1 / span 3; grid-row: 2; align-self: start; margin-top: clamp(40px, 9vw, 180px); }

/* Bildunterschrift als Maßzeile: Haarlinie, blauer Anfang, Titel, zwei Sätze */
.wb-mittel figcaption { position: relative; margin-top: clamp(14px, 1.4vw, 22px); padding-top: 14px; border-top: 1px solid var(--linie); }
.wb-mittel figcaption::before { content: ""; position: absolute; left: 0; top: -1px; width: 34px; height: 1px; background: var(--akzent); }
.wb-mittel__titel { color: var(--tinte); font-weight: 500; letter-spacing: -.02em; line-height: 1.2; font-size: clamp(1.125rem, 1.25vw, 1.5rem); }
.wb-mittel figcaption p { margin-top: 8px; font-size: .9375rem; line-height: 1.5; color: var(--text); text-wrap: pretty; max-width: 30em; }

/* Satz zum Musterobjekt und Herkunft: unten links neben dem Banner, dort, wo sonst Leere bliebe */
.wb-hinweis { grid-column: 1 / span 4; grid-row: 3; align-self: end; padding-top: 18px; border-top: 1px solid var(--linie); }
.wb-hinweis .t-aussage { max-width: 18em; font-size: clamp(1.125rem, 1.2vw, 1.5rem); }
.wb-hinweis .t-klein { margin-top: 14px; }

/* ── 2. Vom Code zum Exposé ──────────────────────────────────────────────── */
.wb-code { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: clamp(20px, 2.4vw, 48px); row-gap: 40px; align-items: center; }
.wb-code__text { grid-column: 1 / span 4; }
.wb-code__bild {
  grid-column: 6 / -1; display: grid; grid-template-columns: clamp(140px, 12vw, 232px) minmax(0, 1fr);
  column-gap: clamp(36px, 4.4vw, 96px); align-items: center;
}
.wb-qr { position: relative; padding: clamp(12px, 1.2vw, 20px); background: var(--weiss); border: 1px solid var(--linie); border-radius: 4px; }
.wb-qr img { image-rendering: pixelated; }
.wb-qr figcaption { margin-top: 10px; font-size: .6875rem; line-height: 1.35; color: var(--leise); text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* Die blaue Linie vom Code zum Bildschirm */
.wb-qr::after {
  content: ""; position: absolute; left: 100%; top: 50%; width: clamp(36px, 4.4vw, 96px); height: 1px; background: var(--akzent);
}
.wb-qr::before {
  content: ""; position: absolute; left: calc(100% + clamp(36px, 4.4vw, 96px) - 4px); top: 50%; width: 7px; height: 7px; margin-top: -3px;
  border-radius: 50%; background: var(--akzent); z-index: 1;
}
.wb-schirm a { display: block; border-radius: 6px; }
.wb-schirm img { border: 1px solid var(--linie-fein); border-radius: 6px; box-shadow: 0 46px 80px -50px rgba(16, 24, 32, .4); transition: transform .4s var(--weich); }
.wb-schirm a:hover img { transform: translateY(-3px); }

/* ── 3. Schluss ──────────────────────────────────────────────────────────── */
.wb-schluss__innen { display: flex; flex-direction: column; align-items: center; text-align: center; }
.wb-schluss .t-aussage { max-width: 26em; }
.wb-schluss .wb-knoepfe { justify-content: center; }

/* ── Schmalere Fenster ──────────────────────────────────────────────────── */
@media (max-width: 1240px) {
  .wb-kopf__text { grid-column: 1 / span 7; }
  .wb-kopf__knopf { grid-column: 8 / -1; }
  .wb-mittel--fenster { grid-column: 1 / span 7; }
  .wb-mittel--bauschild { grid-column: 8 / -1; }
  .wb-mittel--banner { grid-column: 5 / -1; }
  .wb-mittel--tafel { grid-column: 1 / span 4; }
  .wb-code__text { grid-column: 1 / span 5; }
  .wb-code__bild { grid-column: 6 / -1; }
}
@media (max-width: 900px) {
  .wb-kopf__text, .wb-kopf__knopf, .wb-code__text, .wb-code__bild { grid-column: 1 / -1; }
  .wb-feld { grid-template-columns: minmax(0, 1fr); row-gap: 44px; }
  .wb-mittel--fenster, .wb-mittel--bauschild, .wb-mittel--banner, .wb-mittel--tafel, .wb-hinweis { grid-column: 1; grid-row: auto; margin-top: 0; }
  /* Am Handy bleibt der Wechsel: die beiden kleinen Werbemittel etwas schmaler, einmal rechts, einmal links. */
  .wb-mittel--bauschild { width: 86%; margin-left: auto; }
  .wb-mittel--tafel { width: 86%; }
  .wb-code__bild { grid-template-columns: 112px minmax(0, 1fr); column-gap: 32px; }
  .wb-qr::after { width: 32px; }
  .wb-qr::before { left: calc(100% + 28px); }
}
@media (max-width: 560px) {
  .wb-code__bild { grid-template-columns: 92px minmax(0, 1fr); column-gap: 26px; }
  .wb-qr { padding: 8px; }
  .wb-qr figcaption { display: none; }
  .wb-qr::after { width: 26px; }
  .wb-qr::before { left: calc(100% + 22px); }
}
/* Handy, 11.10.2026: alle vier Werbemittel gleich breit im Querformat 4:3, kein Versatz. */
@media (max-width: 900px) {
  .wb-mittel--bauschild, .wb-mittel--tafel { width: 100%; margin-left: 0; }
  .wb-mittel img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
  .wb-feld { row-gap: 40px; margin-top: 36px; }
  .wb-mittel__titel { font-size: 1.25rem; }
  .wb-mittel figcaption p { font-size: 1rem; }
  .wb-schluss__innen { align-items: stretch; }
}