/* Aktionstage Osterstraße – Stylesheet für aktionstage.html
   Alle Regeln gelten nur innerhalb von <main class="ost-page">, damit Kopf und Fuß
   der bestehenden Website unverändert bleiben.
   Farben: Blau #2992C2 · Gelb #F9C512 · Grün #74C932 · Pink #F688B5 · Orange #F57953 · Creme #FBF7EC · Text #15201A
   Weiß auf Blau = 3,6:1 → nur große, fette Schrift. */
@font-face { font-family: "Rubik"; src: url("../fonts/rubik-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Rubik"; src: url("../fonts/rubik-latin-500-normal.woff2") format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Rubik"; src: url("../fonts/rubik-latin-700-normal.woff2") format("woff2"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Rubik"; src: url("../fonts/rubik-latin-800-normal.woff2") format("woff2"); font-weight: 800; font-display: swap; }
@font-face { font-family: "Rubik"; src: url("../fonts/rubik-latin-ext-900-normal.woff2") format("woff2"); font-weight: 900; font-display: swap; unicode-range: U+1E9E; }
@font-face { font-family: "Rubik"; src: url("../fonts/rubik-latin-900-normal.woff2") format("woff2"); font-weight: 900; font-display: swap; }
.ost-page {
  --blue: #2992C2; 
  --blue-text: #0B6C9C;
  --yellow: #F9C512;
  --green: #74C932;
  --pink: #F688B5;
  --orange: #F57953;
  --cream: #FBF7EC;
  --ink: #15201A;
  --radius: 0.75rem;
  --focus: 3px solid #15201A;
}
.ost-page, .ost-page *, .ost-page::before, .ost-page *::before, .ost-page::after, .ost-page *::after { box-sizing: border-box; }
.ost-page {
  margin: 0;
  background: var(--cream);
  color: var(--ink);
  font-family: "Rubik", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  font-size: 1.125rem;
  line-height: 1.55;
}
.ost-page h1, .ost-page h2, .ost-page h3 { line-height: 1.1; margin: 0 0 0.5em; }
.ost-page h2 { font-size: clamp(1.75rem, 1.3rem + 2vw, 2.5rem); font-weight: 900; }
.ost-page h3 { font-size: 1.25rem; font-weight: 800; }
.ost-page a { color: inherit; text-underline-offset: 0.2em; }
.ost-page a:focus-visible, .ost-page .cta:focus-visible { outline: var(--focus); outline-offset: 4px; }
.ost-page .wrap { width: min(1028px, 100% - 2rem); margin-inline: auto; }
.ost-page .visually-hidden {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.ost-page .hero { position: relative; background: var(--blue); color: #fff; padding: clamp(1.5rem, 4vw, 3.5rem) 0 clamp(4.5rem, 9vw, 7rem); }
.ost-page .hero::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: clamp(1.5rem, 3vw, 2.5rem); background: var(--cream);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 10' preserveAspectRatio='none'%3E%3Cpath d='M0,4 C20,2 35,1.5 55,3 S85,4.5 100,2.5 L100,10 L0,10 Z'/%3E%3C/svg%3E") 0 0 / 100% 100% no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 10' preserveAspectRatio='none'%3E%3Cpath d='M0,4 C20,2 35,1.5 55,3 S85,4.5 100,2.5 L100,10 L0,10 Z'/%3E%3C/svg%3E") 0 0 / 100% 100% no-repeat;
}
.ost-page .facts {
  list-style: none; margin: 0 0 clamp(1.25rem, 3vw, 2rem); padding: 0;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(15rem, 100%), 1fr)); gap: 1rem;
}
.ost-page .fact {
  display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center;
  padding: 1.75rem 1.25rem; min-height: 11.5rem;
  font-weight: 900; text-transform: uppercase; letter-spacing: 0.01em; line-height: 1.02;
}
.ost-page .fact--date { --shape-fill: var(--cream); color: var(--blue); }
.ost-page .fact--outline { --shape-line: #fff; --shape-fill: var(--blue); color: #fff; }
.ost-page .fact__big { font-size: clamp(3.25rem, 2.2rem + 3.5vw, 5rem); line-height: 0.95; }
.ost-page .fact__small { font-size: clamp(1.4rem, 1.2rem + 0.7vw, 1.75rem); }
.ost-page .fact__medium { font-size: clamp(1.6rem, 1.3rem + 1vw, 2rem); }
.ost-page .shape { position: relative; isolation: isolate; }
.ost-page :where(.shape) { --shape-fill: transparent; --shape-line: var(--shape-fill); }
.ost-page .shape::before, .ost-page .shape::after { content: ""; position: absolute; z-index: -1;
  -webkit-mask: var(--mask) 0 0 / 100% 100% no-repeat; mask: var(--mask) 0 0 / 100% 100% no-repeat; }
.ost-page .shape::before { inset: 0; background: var(--shape-line); }
.ost-page .shape::after { inset: 3px; background: var(--shape-fill); }
.ost-page .shape--a { --mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpath d='M2.5,4 Q2,1.8 4.5,2 C20,2.6 30,1 50,2.2 S80,1.2 96,0.8 Q98.8,0.8 98.6,3.5 C98,25 100,45 99.3,70 S98.5,90 98.6,96.5 Q98.6,99.2 95.8,99 C80,98 60,97.6 40,98.6 S12,99.6 3.5,99.4 Q0.8,99.3 1,96.5 C1.6,80 2.8,65 1.4,45 S0.6,20 2.5,4 Z'/%3E%3C/svg%3E"); }
.ost-page .shape--b { --mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpath d='M1,3 Q0.8,0.8 3.5,1 C20,2.2 40,3.2 60,2 S88,0.8 97,2 Q99.4,2.3 99.2,5 C98.4,25 98.6,50 99.4,72 S99,92 98.4,96 Q98,98.8 95.2,99 C75,99.8 55,98 35,98.6 S10,99.6 4,99.2 Q1.4,99 1.4,96.4 C1.6,80 0.4,60 1.2,40 S1.8,15 1,3 Z'/%3E%3C/svg%3E"); }
.ost-page .shape--c { --mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpath d='M2,2.6 Q2.2,0.6 4.6,0.8 C25,2.4 45,1 65,1.6 S90,3 96.5,3.2 Q99.2,3.4 99.2,6 C99.4,25 98.2,45 98.8,65 S99.8,92 99.4,96.6 Q99.2,99.2 96.4,99 C75,97.4 55,99.6 35,99 S8,98 3.4,98.4 Q0.8,98.6 0.8,96 C0.6,80 1.6,60 0.8,40 S1.6,12 2,2.6 Z'/%3E%3C/svg%3E"); }
.ost-page .shape--d { --mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpath d='M1.2,4 Q1,1.2 3.8,1.4 C18,0.8 35,2.4 55,1.6 S85,0.6 97,1.8 Q99.6,2 99.4,4.8 C98.6,22 99.6,45 99.2,65 S99,90 98.8,96.4 Q98.6,99 96,99 C80,99.6 60,97.6 42,98.4 S14,99.8 3.6,99.2 Q1,99 1.2,96.4 C1.8,82 0.8,60 1.4,42 S0.6,18 1.2,4 Z'/%3E%3C/svg%3E"); }
.ost-page .claim {
  --shape-fill: var(--yellow); color: var(--ink);
  padding: clamp(1.75rem, 5vw, 3.75rem) clamp(1.75rem, 5vw, 3.75rem) clamp(2rem, 5vw, 3.5rem);
  padding-right: clamp(1.75rem, 30%, 20rem);
}
.ost-page .claim h1 {
  font-size: clamp(2.75rem, 1.2rem + 6.5vw, 6rem); font-weight: 900; line-height: 0.95;
  text-transform: uppercase; letter-spacing: -0.01em; margin: 0 0 0.35em;
}
.ost-page .claim__sub { margin: 0; font-size: clamp(1.25rem, 1rem + 1.2vw, 2rem); font-weight: 900; }
.ost-page .cta {
  position: absolute; right: 5%; bottom: clamp(-4.5rem, -6vw, -2rem); z-index: 2;
  display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center;
  width: clamp(11rem, 20vw, 15rem); aspect-ratio: 218 / 227; padding: 1.5rem;
  font-size: clamp(2rem, 1.4rem + 2vw, 3.1rem); font-weight: 900; line-height: 0.95;
  text-decoration: none; color: var(--ink);
}
.ost-page .cta__shape { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -1; overflow: visible; }
.ost-page .cta__shape path { fill: var(--cream); stroke: var(--blue); stroke-width: 7; vector-effect: non-scaling-stroke; }
.ost-page .cta:hover .cta__shape path { fill: #fff; }
.ost-page .cta:hover .cta__text { text-decoration: underline; text-decoration-thickness: 3px; text-underline-offset: 0.15em; }
.ost-page .cta__text { display: block; }
.ost-page .cta__arrow { display: block; width: 0.9em; height: 1.1em; margin-top: 0.3em; }
.ost-page .cta__arrow path { fill: none; stroke: currentColor; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.ost-page .cta:focus-visible { outline: 3px solid var(--ink); outline-offset: 6px; border-radius: 50%; }
@media (max-width: 40rem) {
  .ost-page .hero { padding-bottom: 3.5rem; }
  .ost-page .fact { min-height: 0; padding: 1.25rem 1rem; }
  .ost-page .claim { padding-right: clamp(1.75rem, 5vw, 3.75rem); }
  .ost-page .cta { position: relative; right: auto; bottom: auto; margin-top: 1.5rem; width: 9.5rem; padding: 1rem; font-size: 1.6rem; }
}
.ost-page .section { padding: clamp(2.5rem, 6vw, 4.5rem) 0; }
.ost-page .section h2 { text-align: left; }
.ost-page .days {
  list-style: none; margin: 1.5rem 0 0; padding: 0;
  display: grid; grid-template-columns: 1fr; gap: 1rem;
}
@media (min-width: 48rem) {
  .ost-page .days { grid-template-columns: repeat(3, 1fr); }
  .ost-page .days > li:last-child { grid-column: 1 / -1; }
}
.ost-page .day { padding: 1.75rem 1.6rem; }
.ost-page .day ul { margin: 0; padding-left: 1.2em; }
.ost-page .day li + li { margin-top: 0.5em; }
.ost-page .day--green { --shape-fill: var(--green); }
.ost-page .day--blue { --shape-fill: var(--blue); }
.ost-page .day--yellow { --shape-fill: var(--yellow); }
.ost-page .day--orange { --shape-fill: var(--orange); }
.ost-page .section--info { border-top: 2px solid #E4E0D4; }
.ost-page .two-col { display: grid; grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr)); gap: 2rem 3rem; }
.ost-page .section--info h2 { font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2rem); }
.ost-page .checklist { margin: 0; padding-left: 1.2em; }
.ost-page .checklist li + li { margin-top: 0.4em; }
.ost-page .footer { background: var(--ink); color: var(--cream); padding: 2rem 0; font-size: 1rem; }
.ost-page .footer__inner p { margin: 0 0 0.5rem; }
.ost-page .footer__links { list-style: none; margin: 1rem 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.5rem 1.5rem; }
.ost-page .footer a:focus-visible { outline-color: var(--yellow); }
@media (forced-colors: active) {
  .ost-page .shape::before, .ost-page .shape::after { display: none; }
  .ost-page .shape, .ost-page .cta { border: 2px solid CanvasText; }
  .ost-page .cta__shape { display: none; }
}
.ost-page .lead { margin: 0 0 1.5rem; font-size: 1.25rem; }
.ost-page .ways {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(11.5rem, 1fr)); gap: 1rem;
}
.ost-page .way { padding: 1.4rem 1.4rem 1.6rem; min-height: 11rem; display: flex; flex-direction: column; justify-content: flex-start; }
.ost-page .way__icon { position: absolute; top: 0.9rem; right: 0.9rem; width: 4rem; height: 4rem; }
.ost-page .way__icon-bg { fill: var(--cream); }
.ost-page .way__icon-fg { fill: var(--ink); }
.ost-page .way h3 { font-size: 1.6rem; font-weight: 900; margin: 3.25rem 0 0.25rem; }
.ost-page .way p { margin: 0; font-size: 1.25rem; line-height: 1.3; }
.ost-page .way--green { --shape-fill: var(--green); }
.ost-page .way--pink { --shape-fill: var(--pink); }
.ost-page .way--blue { --shape-fill: var(--blue); }
.ost-page .way--orange { --shape-fill: var(--orange); }
.ost-page .way--yellow { --shape-fill: var(--yellow); }
@media (forced-colors: active) {
  .ost-page .way__icon-bg { fill: Canvas; }
  .ost-page .way__icon-fg { fill: CanvasText; }
}
.ost-page .info-strip { padding: clamp(1.5rem, 4vw, 2.5rem) 0; }
.ost-page .info {
  list-style: none; margin: 0; padding: clamp(1.5rem, 3vw, 2.25rem) 0;
  border-top: 3px solid #E4E0D4; border-bottom: 3px solid #E4E0D4;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(17rem, 100%), 1fr)); gap: 2rem 2.5rem;
}
.ost-page .info__item { display: grid; grid-template-columns: 4.5rem 1fr; gap: 1.25rem; align-items: start; }
.ost-page .info__icon { width: 4.5rem; height: auto; max-height: 4.5rem; margin-top: 0.2rem; overflow: visible; }
.ost-page .info__item h3 { font-size: 1.15rem; font-weight: 900; text-transform: uppercase; letter-spacing: 0.03em; margin: 0 0 0.35rem; }
.ost-page .info__item p { margin: 0; font-size: 1.15rem; line-height: 1.4; }
.ost-page .info__item a { overflow-wrap: anywhere; }
@media (max-width: 24rem) {
  .ost-page .info__item { grid-template-columns: 3.25rem 1fr; gap: 1rem; }
  .ost-page .info__icon { width: 3.25rem; }
}
.ost-page .info-strip + .section--info { border-top: 0; padding-top: 1rem; }

/* Schutz gegen Element-Regeln des Website-Stylesheets */
.ost-page h1, .ost-page h2, .ost-page h3, .ost-page p, .ost-page ul, .ost-page ol, .ost-page li {
  font-family: inherit; text-shadow: none; background: none; border: 0; }
.ost-page h2, .ost-page h3 { color: inherit !important; }
.ost-page p, .ost-page li, .ost-page time { color: inherit; }
.ost-page .hero h1, .ost-page .claim h1 { color: var(--ink); }
.ost-page { display: block; width: 100%; overflow-x: clip; }
.ost-page .colophon { padding: 1.5rem 0 2.5rem; font-size: 1rem; }
.ost-page .colophon p { margin: 0 0 0.35rem; }

/* Sprunglink zum Inhalt (vor der Navigation) */
.ost-skip { position: absolute; left: 1rem; top: -5rem; z-index: 1000; background: #15201A; color: #FBF7EC;
  padding: 0.75rem 1rem; border-radius: 0.5rem; font: 700 1rem/1.2 system-ui, sans-serif; text-decoration: none; }
.ost-skip:focus { top: 1rem; outline: 3px solid #F9C512; outline-offset: 2px; }
.ost-page .day ul { list-style-type: disc; }