/* PROBE-Portal: Seitengeruest (Kopf, Fuss, Spalten). Praefix l-. */

.l-body { min-height: 100vh; display: flex; flex-direction: column; }
.l-main { flex: 1 0 auto; padding: var(--sp-5) 0 var(--sp-7); }
.l-wrap { width: 100%; max-width: var(--w-page); margin-inline: auto; padding-inline: var(--gutter); }
.l-col { width: 100%; max-width: var(--w-form); margin-inline: auto; padding-inline: var(--gutter); }
.l-col--wide { max-width: var(--w-page); }
.l-stack > * + * { margin-top: var(--sp-4); }
.l-cluster { display: flex; flex-wrap: wrap; gap: var(--sp-3); align-items: center; }
.l-grid-2 { display: grid; gap: var(--sp-4); }
@media (min-width: 48em) { .l-grid-2 { grid-template-columns: 1fr 1fr; } }

/* Skip-Link: erstes Element der Seite */
.c-skip {
  position: absolute; left: var(--sp-2); top: -4rem; z-index: 100; background: var(--c-text-strong); color: var(--c-text-inverse);
  padding: var(--sp-2) var(--sp-4); border-radius: var(--r-sm); font-weight: var(--fw-bold);
}
.c-skip:focus { top: var(--sp-2); color: var(--c-text-inverse); }

/* Umgebungsleiste */
.c-envbanner { background: var(--c-info-bg); color: var(--c-text); font-size: var(--fs-xs); border-bottom: var(--bw-strong) solid var(--c-info-line); }
.c-envbanner--staging, .c-envbanner--local { background: var(--c-staging-bg); border-bottom-color: var(--c-brand-orange); }
.c-envbanner__inner { display: flex; flex-wrap: wrap; gap: var(--sp-1) var(--sp-4); align-items: center; padding-block: var(--sp-1); }
.c-envbanner__text { font-weight: var(--fw-bold); letter-spacing: 0.04em; }
.c-envbanner__ip.is-warning { background: var(--c-warning); color: var(--c-text-inverse); padding: 0 var(--sp-2); border-radius: var(--r-sm); font-weight: var(--fw-bold); }

/* Wortmarke und Dachzeile */
.c-eyebrow {
  margin: 0; font-family: var(--font-mono); font-weight: 500; font-size: var(--fs-xs); text-transform: uppercase;
  letter-spacing: var(--tracking-eyebrow); color: var(--c-text-strong);
}
.c-wordmark {
  margin: 0; font-size: 1.375rem; font-weight: var(--fw-bold); letter-spacing: var(--tracking-wordmark);
  line-height: 1; color: var(--c-text-strong);
}
.c-wordmark a { color: inherit; text-decoration: none; }
.c-wordmark a:hover { text-decoration: underline; }
/* Logo S2 "Ping im O" (components/wordmark.html): das O ist Ring und Punkt in Schriftstaerke. Aussendurchmesser 0.7em, also
   Versalhoehe der Frutiger Bold (0.704em) mit leichtem Ueberhang wie ein rundes O; Mitte auf halber Versalhoehe; Ring in
   currentColor. Die Sperrung, die die Schrift einem O gaebe, traegt der rechte Rand (Sperrung wirkt nicht auf das SVG);
   --tracking-wordmark folgt der Sperrung der jeweiligen Wortmarke. */
.c-wordmark__o { display: inline-block; width: 0.7em; height: 0.7em; vertical-align: 0.002em; margin: 0 calc(0.04em + var(--tracking-wordmark)) 0 0.04em; overflow: visible; }
.c-wordmark__sub { display: block; margin-top: var(--sp-1); font-size: var(--fs-xs); font-weight: var(--fw-regular); letter-spacing: 0; color: var(--c-text-muted); }

.c-logo { display: block; height: 28px; width: auto; }
@media (min-width: 48em) { .c-logo { height: 32px; } }
@media (min-width: 64em) { .c-logo { height: 36px; } }
.c-logo-link { display: block; line-height: 0; }

/* Kopf Band: auf allen oeffentlichen Seiten derselbe wie auf der Startseite (Entscheidung PL 13.10.2026) */
.l-header--band {
  position: relative; color: var(--c-text-inverse); min-height: 8.5rem;
  background: var(--g-band-mobile);
  border-bottom: 6px solid transparent; border-image: var(--g-line) 1;
}
.l-header--band .l-header__inner { position: relative; display: flex; justify-content: space-between; align-items: flex-start; gap: var(--sp-4); padding-block: var(--sp-4); min-height: inherit; }
/* Dachzeile im Band wie im Flyer (.eyebrow): Frutiger fett statt Monospace, Sperrung etwa 1.5px wie dort; die Dachzeilen im
   Inhalt (Schrittzaehler, Teilnahmeunterlagen) bleiben Monospace */
.l-header--band .c-eyebrow { font-family: var(--font-sans); font-weight: var(--fw-bold); color: var(--c-eyebrow-inverse); }
.l-header--band .c-wordmark { color: var(--c-text-inverse); font-size: 2rem; margin-top: var(--sp-2); }
.l-header--band .c-wordmark a { color: inherit; }
.c-acronym { display: none; margin: var(--sp-2) 0 0; font-size: var(--fs-sm); color: var(--c-text-inverse); max-width: 34rem; }
.c-acronym b { color: var(--c-accent-inverse); font-weight: var(--fw-bold); }
.c-logo-plate { background: #fff; padding: 6px 9px; border-radius: 2px; line-height: 0; flex: none; }
.c-logo-plate .c-logo { height: 28px; }
@media (min-width: 30em) { .c-acronym { display: block; } }
@media (min-width: 48em) {
  .l-header--band {
    min-height: 10rem;
    background: url("../img/band-scan.00c306b9255b.svg") right center / cover no-repeat, var(--g-band-veil), var(--g-band);
    /* schraege Horizontkante des Flyers; der Farbfaden folgt ihr als schmaler Streifen (::after) */
    border-bottom: 0; border-image: none;
    clip-path: polygon(0 0, 100% 0, 100% 88%, 0 100%);
  }
  .l-header--band::after {
    content: ""; position: absolute; inset: auto 0 0 0; height: 12%; pointer-events: none;
    background: var(--g-line);
    clip-path: polygon(0 calc(100% - 6px), 100% 0, 100% 6px, 0 100%);
  }
  .l-header--band .c-wordmark { font-size: 2.5rem; }
  .c-logo-plate .c-logo { height: 36px; }
}
@media (min-width: 64em) {
  .l-header--band { min-height: 12rem; }
  .l-header--band .c-wordmark { font-size: var(--fs-2xl); }
  .c-logo-plate .c-logo { height: 40px; }
  .c-logo-plate { padding: 10px 16px; }
}
/* Tablet (48-64em): with "cover" the hit marker of the motif sits right below the logo and against the slanted edge.
   A fixed motif width (still wider than the band up to 64em) shifted 14rem to the right puts the marker beyond the
   right edge; rings and lines keep covering the band (E2E-28) */
@media (min-width: 48em) and (max-width: 63.99em) {
  .l-header--band { background-position: right -14rem top 0, 0 0, 0 0; background-size: 80rem auto, auto, auto; }
}

@media (forced-colors: active) {
  .l-header--band { background: Canvas; color: CanvasText; border-bottom: 4px solid CanvasText; clip-path: none; }
  .l-header--band::after { display: none; }
  .c-logo-plate { forced-color-adjust: none; }
}

/* Fuss */
.l-footer { background: var(--c-footer-bg); color: var(--c-text-inverse-muted); font-size: var(--fs-sm); margin-top: auto; }
.l-footer a { color: var(--c-text-inverse); }
.l-footer__inner { padding-block: var(--sp-5); display: grid; gap: var(--sp-5); }
.l-footer__cols { display: grid; gap: var(--sp-5); }
@media (min-width: 48em) {
  .l-footer__cols { grid-template-columns: 1fr auto; align-items: end; }
  .l-footer__contact { grid-column: 2; }  /* "Fragen?" steht auf jeder Seite rechts, auch ohne ACS-Block (WCAG 3.2.6) */
}
/* ACS-Block wie im Fuss des Flyers: Logo 36 mm breit bei 8 pt Text (rund das 12,8-Fache der Schrift), Platte mit 2 x 3 mm
   Innenabstand und 1,4 mm Rundung, die Zeile zur Initiative vierzeilig daneben (so hoch wie die Platte). Im Web bei 13 px Text:
   Logo 168 px, Platte 9 x 14 px. Reicht der Platz nicht (schmal), steht die Zeile unter der Platte. */
.c-partner__label { margin: 0 0 var(--sp-2); font-size: var(--fs-xs); }
.c-partner__row { display: flex; flex-wrap: wrap; gap: var(--sp-3) var(--sp-4); align-items: center; }
.c-partner__plate { background: #fff; padding: 9px 14px; border-radius: var(--r-md); line-height: 0; display: block; }
.c-partner__plate img { width: 168px; height: auto; }
.c-partner__note { margin: 0; font-size: var(--fs-xs); }
.l-footer__links { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--sp-1) var(--sp-4); }
.l-footer__links li { margin: 0; }
.l-footer__contact { margin: 0; }
.l-footer__org { margin: 0; font-size: var(--fs-xs); }
@media (forced-colors: active) { .c-partner__plate { forced-color-adjust: none; } }