/* Ausschließlich die neue Funktion; vorhandene Regeln bleiben unberührt. */
[data-campaign-tone="beige"] { --campaign-bg: #fbf6ea; --campaign-fg: #09484e; }
[data-campaign-tone="terracotta"] { --campaign-bg: #ea6d3c; --campaign-fg: #09484e; }
[data-campaign-tone="yellow"] { --campaign-bg: #fee270; --campaign-fg: #09484e; }
[data-campaign-tone="petrol"] { --campaign-bg: #09484e; --campaign-fg: #fbf6ea; }
[data-campaign-tone="pink"] { --campaign-bg: var(--pink); --campaign-fg: var(--petrol); }
.campaign-bar {
  display: flex; align-items: center; justify-content: center; width: 100%;
  min-height: 4.25rem; padding: 1rem 1.5rem; text-align: center;
  background: var(--campaign-bg); color: var(--campaign-fg);
  font-size: clamp(1.125rem, 1.4vw, 1.25rem); font-weight: 700;
  letter-spacing: .035em; line-height: 1.35; text-decoration: none; text-wrap: balance;
}
.campaign-bar:hover { text-decoration: underline; text-underline-offset: .25em; }
.campaign-bar__desktop, .campaign-bar__mobile { text-wrap: balance; }
.campaign-bar__mobile { display: none; }
.campaign-section { background: var(--cream); color: var(--petrol); padding-block: clamp(2rem, 6vw, 6rem) clamp(4rem, 7vw, 7rem); }
.campaign-panel { --campaign-button-bg: var(--petrol); --campaign-button-hover: var(--petrol-hover); --campaign-button-fg: var(--cream); background: var(--campaign-bg); color: var(--campaign-fg); border: 2px solid var(--petrol); border-radius: .35rem; padding: clamp(1rem, 2.5vw, 2.5rem); }
.campaign-panel[data-campaign-tone="petrol"] { --campaign-button-bg: var(--yellow); --campaign-button-hover: var(--yellow-hover); --campaign-button-fg: var(--petrol); }
/* Der helle Marken-Terrakottaton hat mit heller Schrift zu wenig Kontrast.
   Für diese feste Variante verwenden wir die vorhandene dunkle Abstufung. */
.campaign-panel[data-campaign-tone="terracotta"] { --campaign-bg: var(--terracotta-dark); --campaign-fg: var(--cream); --campaign-button-bg: var(--cream); --campaign-button-hover: var(--cream-contrast); --campaign-button-fg: var(--petrol); }
.campaign-label { display: flex; flex-wrap: wrap; align-items: baseline; gap: .3em; color: inherit; font-family: "League Spartan", Arial, sans-serif; font-size: clamp(1.5rem, 2.7vw, 2.25rem); font-weight: 750; line-height: 1.15; letter-spacing: .035em; text-transform: uppercase; margin: 0 0 1rem; overflow-wrap: normal; word-break: normal; }
.campaign-label__text { min-width: 0; max-width: 100%; }
.campaign-label__normal { color: #09484E; }
.campaign-label__special { color: #BD542C; font-style: italic; font-weight: 700; white-space: nowrap; }
.campaign-label__date { display: flex; align-items: center; gap: .65rem; width: max-content; max-width: 100%; margin: 0 0 .875rem; color: #09484E; font-family: "League Spartan", Arial, sans-serif; font-size: clamp(1rem, 1.25vw, 1.125rem); font-weight: 750; line-height: 1.2; letter-spacing: .06em; white-space: nowrap; }
.campaign-label__date::before { content: ""; width: 1.5rem; height: 2px; flex-shrink: 0; background: #EA6D3C; }
.campaign-grid { display: grid; grid-template-columns: 1fr 1fr; grid-template-areas: "picture ." "picture heading" "picture copy" "picture ."; grid-template-rows: 1fr auto auto 1fr; column-gap: clamp(2rem, 6vw, 6rem); align-items: center; }
.campaign-title, .campaign-copy { padding-inline: clamp(1rem, 2vw, 2rem); color: inherit; }
.campaign-picture { grid-area: picture; margin: 0; overflow: hidden; aspect-ratio: 4 / 5; border-radius: .35rem; }
.campaign-picture img { width: 100%; height: 100%; object-fit: cover; }
.campaign-copy { grid-area: copy; min-width: 0; }
.campaign-title { grid-area: heading; min-width: 0; margin: 0; font-size: clamp(2rem, 4.2vw, 4rem); line-height: .95; letter-spacing: -.04em; white-space: pre-line; hyphens: none; }
.home-page .campaign-title { overflow-wrap: normal; word-break: normal; }
.campaign-copy .lead, .campaign-button__text { overflow-wrap: normal; word-break: normal; hyphens: none; }
.campaign-button__text { min-width: 0; }
.campaign-copy .lead { margin-block: 1rem 1.25rem; font-weight: 500; }
.campaign-panel .button { background: var(--campaign-button-bg); border-color: var(--campaign-button-bg); color: var(--campaign-button-fg); }
.campaign-panel .button:hover { background: var(--campaign-button-hover); border-color: var(--campaign-button-hover); }
@media (max-width: 47.999rem) {
  .campaign-bar { min-height: 3.5rem; padding: .5rem 1rem; font-size: clamp(.875rem, 2.6vw, 1rem); letter-spacing: .025em; }
  .campaign-bar__desktop { display: none; }
  .campaign-bar__mobile { display: block; }
  .campaign-label { flex-direction: column; align-items: flex-start; gap: .5rem; }
  .campaign-label__date { font-size: clamp(.8125rem, 3.6vw, .9375rem); gap: .5rem; margin-bottom: .5rem; }
  .campaign-label__date::before { width: 1.125rem; }
  .campaign-grid { grid-template-columns: 1fr; grid-template-areas: "heading" "picture" "copy"; grid-template-rows: auto auto auto; gap: 1rem; }
  .campaign-picture { aspect-ratio: 4 / 3; }
  .campaign-title, .campaign-copy { padding: .5rem 1rem; }
  .campaign-title { font-size: clamp(1.9rem, 9.5vw, 3.5rem); }
  .campaign-copy .lead { margin-top: 0; }
  .campaign-copy .button { width: 100%; }
}
@media (prefers-reduced-motion: reduce) { html:has(.campaign-bar) { scroll-behavior: auto; } }