*{box-sizing:border-box}
:root{--blue:#00528c;--dark:#072f55;--green:#3e8927;--magenta:#b10345;--yellow:#d9a400;--orange:#e27a22;--red:#b51f2a;--turquoise:#169b95;--text:#202428;--muted:#66707a;--light:#f4f5f6;--max:1240px}
html{scroll-behavior:smooth}
body{margin:0;font-family:Aptos,"Segoe UI",Arial,sans-serif;font-size:18px;line-height:1.55;color:var(--text);background:#fff}
img{display:block;max-width:100%;height:auto}
a{color:inherit}
.inhalt{width:min(var(--max),calc(100% - 48px));margin:0 auto}
.sprunglink{position:fixed;left:12px;top:12px;transform:translateY(-150%);z-index:1000;background:#fff;color:var(--blue);padding:9px 14px;text-decoration:none;font-weight:700}
.sprunglink:focus{transform:none}
.kopfbereich{position:absolute;top:0;left:0;width:100%;z-index:20;color:#fff}
.kopfbereich-fest{position:relative;background:var(--blue)}
.navigation-inhalt{min-height:82px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #ffffff44}
.schulmarke img{width:210px}
.hauptnavigation{display:flex;gap:30px;align-items:center}
.hauptnavigation a{text-decoration:none;font-weight:700;padding:8px 0;position:relative}
.hauptnavigation a:after{content:"";position:absolute;left:0;right:100%;bottom:1px;height:2px;background:#fff;transition:right .2s ease}
.hauptnavigation a:hover:after,.hauptnavigation a:focus-visible:after{right:0}
.menue-check{position:absolute;opacity:0;pointer-events:none}
.menue-schalter{display:none}

/* Startseite */
.hero{background:var(--blue);color:#fff;padding-bottom:85px}
.hero-bild{height:min(56vw,600px);min-height:360px;position:relative;overflow:hidden}
.hero-bild img{width:100%;height:100%;object-fit:cover;object-position:center 48%}
.hero-bild:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,30,60,.25),rgba(0,30,60,.05) 45%,rgba(7,47,85,.35))}
.hero-inhalt{position:relative;margin-top:-105px;z-index:2}
.hero-text{max-width:none;width:100%;background:var(--blue);padding:42px 0 40px}
.vorspann{font-size:.82rem;text-transform:uppercase;letter-spacing:.12em;font-weight:800;margin:0 0 8px}
.hero h1{font-size:clamp(42px,5.6vw,76px);line-height:1.02;letter-spacing:-.03em;margin:8px 0 22px}
.hero-text>p:not(.vorspann){font-size:1.1rem;max-width:none}
.schaltflaeche{display:inline-block;margin-top:24px;padding:12px 21px;background:#fff;color:var(--blue);border:2px solid #fff;text-decoration:none;font-weight:800}
.schaltflaeche:hover,.schaltflaeche:focus-visible{background:#eaf1f7}

.bereich{padding:105px 0}
.bereich-ueberschrift{max-width:820px;margin-bottom:50px}
.bereich-ueberschrift h2,.abschluss h2{font-size:clamp(36px,4.5vw,62px);line-height:1.05;letter-spacing:-.03em;margin:0 0 18px}
.bereich-ueberschrift p:last-child{color:var(--muted)}
.vorspann-blau{color:var(--blue)}
.veranstaltungen{display:grid;grid-template-columns:repeat(3,1fr);gap:28px}
.veranstaltung{display:block;text-decoration:none;background:#fff;border:1px solid #e1e3e5}
.veranstaltung img{width:100%}
.veranstaltung span{display:block;padding:16px 20px;font-weight:800}
.veranstaltung.green span{color:var(--green)}
.veranstaltung.magenta span{color:var(--magenta)}
.veranstaltung.blue span{color:var(--blue)}

.blue-bg{background:var(--blue);color:#fff}
.light p:last-child{color:#ffffffd0}
.zeitstrahl{display:grid;grid-template-columns:repeat(5,1fr);gap:20px;position:relative;margin:70px 0 50px}
.zeitstrahl-linie{position:absolute;left:5%;right:5%;top:42px;height:3px;background:#ffffff55}
.zeitstrahl-station{position:relative;z-index:1;text-align:center}
.zeitstrahl-jahr{display:block;font-weight:800}
.zeitstrahl-punkt{display:block;width:18px;height:18px;border-radius:50%;background:#fff;margin:14px auto 25px}
.zeitstrahl-inhalt{background:#ffffff12;padding:22px;min-height:145px}
.zeitstrahl-inhalt h3{margin-top:0}
.future{border-top:1px solid #ffffff44;padding-top:25px}
.future strong{font-size:clamp(24px,3vw,40px)}

.openhouse-teaser{display:grid;grid-template-columns:1.15fr .85fr;gap:70px;align-items:center}
.openhouse-bild img{width:100%;height:auto;max-height:none}
.lead{font-size:1.16rem}
.themen-teaser{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin:38px 0 25px}
.themenfeld{padding:24px 24px 22px;background:#fff;border:1px solid #e2e4e6;border-top:7px solid var(--blue)}
.themenfeld.blau{border-top-color:var(--blue)}
.themenfeld.gruen{border-top-color:var(--green)}
.themenfeld.rot{border-top-color:var(--red)}
.themenfeld h3{margin:0 0 8px;font-size:1.2rem}
.themenfeld p{margin:0;color:var(--muted);font-size:.94rem}

.abschluss{max-width:none}
.abschluss p{max-width:700px;color:#ffffffd0;font-size:1.1rem}

.fussbereich{background:var(--dark);color:#fff;padding:65px 0 0}
.fussbereich-inhalt{display:grid;grid-template-columns:1.2fr 1fr .7fr;gap:45px;padding-bottom:45px}
.fussbereich h2{font-size:20px;margin-top:0}
.fussbereich a{text-decoration:none}
.fussbereich a:hover,.fussbereich a:focus-visible{text-decoration:underline}
.fussbereich-unten{border-top:1px solid #ffffff2e;padding:20px 0;color:#ffffffb5;font-size:.85rem;display:flex;justify-content:space-between;gap:20px}

/* Open House */
.veranstaltungsseite{padding:75px 0 95px}
.openhouse-kopf{display:grid;grid-template-columns:1fr 1fr;gap:70px;align-items:center}
.openhouse-kopf h1{font-size:clamp(48px,6vw,78px);line-height:1;margin:8px 0 18px;color:var(--magenta)}
.veranstaltungsdatum{font-size:1.3rem;font-weight:800;margin:0 0 20px}
.openhouse-kopf-bild img{width:100%;box-shadow:0 15px 35px rgba(0,0,0,.12)}
.aktionsliste{padding:30px 0 90px}
.kategorie{margin-bottom:65px}
.kategorie-kopf{display:flex;align-items:center;gap:15px;border-bottom:3px solid currentColor;padding-bottom:12px;margin-bottom:22px}
.kategorie-kopf h2{margin:0;font-size:clamp(28px,3vw,42px)}
.kategorie-punkt{width:17px;height:17px;border-radius:50%;background:currentColor;flex:0 0 auto}
.kategorie.schwarz{color:#222}
.kategorie.tuerkis{color:var(--turquoise)}
.kategorie.magenta{color:var(--magenta)}
.kategorie.blau{color:var(--blue)}
.kategorie.rot{color:var(--red)}
.kategorie.gruen{color:var(--green)}
.kategorie.orange{color:var(--orange)}
.kategorie.gelb{color:var(--yellow)}
.aktionen{display:grid;grid-template-columns:repeat(2,1fr);gap:18px}
.aktion{border:1px solid #e0e2e4;padding:21px 23px;background:#fff;color:var(--text);border-left:6px solid currentColor}
.aktion h3{margin:0 0 8px;font-size:1.08rem;color:var(--text)}
.aktion-meta{margin:0 0 9px;color:var(--muted);font-size:.88rem;font-weight:700}
.aktion p{margin:0;font-size:.95rem}
.openhouse-hinweis{background:var(--light);padding:25px;margin:0 0 30px}
.gebaeudeplan{margin:0 0 32px}
.gebaeudeplan img{display:block;width:100%;height:auto}

.sub-header{background:var(--blue);color:#fff;padding:25px 0}
.sub-header a{font-weight:700;text-decoration:none}
.detail{background:var(--blue);color:#fff;padding:70px 0 100px;min-height:70vh}
.detail-grid{display:grid;grid-template-columns:1fr .9fr;gap:70px;align-items:center}
.detail-grid>img{width:100%}
.detail h1{font-size:clamp(42px,6vw,75px);line-height:1.02}
.detail .lead{font-size:1.15rem}
.placeholder{background:#ffffff12;padding:20px}
.legal{padding:90px 0;min-height:65vh}

@media(max-width:900px){
 .hero-bild{height:52vw;min-height:300px}
 .hero-inhalt{margin-top:-60px}
 .hero-text{padding:34px 0}
 .veranstaltungen,.themen-teaser,.openhouse-kopf{grid-template-columns:1fr 1fr}
 .openhouse-kopf{gap:35px}
 .zeitstrahl{grid-template-columns:1fr 1fr}
 .zeitstrahl-linie{display:none}
 .openhouse-teaser{grid-template-columns:1fr;gap:40px}
 .aktionen{grid-template-columns:1fr}
 .fussbereich-inhalt{grid-template-columns:1fr 1fr}
 .detail-grid{grid-template-columns:1fr}
}
@media(max-width:680px){
 .openhouse-kopf-bild{display:none}
 body{font-size:17px}
 .inhalt{width:calc(100% - 32px)}
 .navigation-inhalt{min-height:72px}
 .schulmarke img{width:165px}
 .menue-schalter{display:flex;width:42px;height:42px;align-items:center;justify-content:center;gap:5px;border:0;background:transparent;color:#fff;cursor:pointer}
 .menue-schalter span{display:block;width:25px;height:2px;background:#fff}
 .hauptnavigation{display:none;position:absolute;top:72px;left:16px;right:16px;padding:18px;background:var(--blue);flex-direction:column;gap:10px;border:1px solid #ffffff33}
 .menue-check:checked ~ .hauptnavigation{display:flex}
 .hero-bild{height:68vw;min-height:250px}
 .hero-inhalt{margin-top:0}
 .hero-text{padding:32px 0 0;background:transparent}
 .hero{padding:0 0 55px}
 .hero h1{font-size:clamp(40px,12vw,58px)}
 .veranstaltungen,.themen-teaser,.openhouse-kopf{grid-template-columns:1fr}
 .bereich{padding:75px 0}
 .zeitstrahl{grid-template-columns:1fr;gap:15px;margin-top:45px}
 .zeitstrahl-station{text-align:left}
 .zeitstrahl-punkt{margin:10px 0 15px}
 .zeitstrahl-inhalt{min-height:0}
 .aktionsliste{padding:30px 0 65px}
 .kategorie{margin-bottom:50px}
 .aktionen{grid-template-columns:1fr}
 .fussbereich-inhalt{grid-template-columns:1fr}
 .fussbereich-unten{flex-direction:column}
}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.hauptnavigation a:after{transition:none}}

/* Jubiläumstexte */
.hero-intro h1{font-size:clamp(38px,4.8vw,68px);line-height:1.04}
.hero-intro>p{max-width:none}
.hero-signatur{margin:28px 0 0;padding-top:0;font-size:.98rem;line-height:1.45}
.hero-signatur strong{font-size:1.08rem}
.hero-signatur em{font-style:normal}
.openhouse-claim{font-size:1.25rem;font-weight:800;line-height:1.25}
.openhouse-highlights{margin:24px 0;padding:20px 0;border-top:1px solid #ddd;border-bottom:1px solid #ddd;line-height:1.7}
.openhouse-time{font-size:1.05rem}
.aktionsbereich{display:grid;grid-template-columns:minmax(0,1fr) 280px;gap:45px;align-items:start}
.aktionsbereich-bild{position:sticky;top:28px}
.aktionsbereich-bild img{width:100%;height:auto;box-shadow:0 14px 30px rgba(0,0,0,.12)}
.veranstaltungsseite-inhalt{display:grid;grid-template-columns:1fr .9fr;gap:70px;align-items:center}
.veranstaltungsseite-text h1{font-size:clamp(48px,6vw,78px);line-height:1;margin:8px 0 18px}
.veranstaltungsseite-bild img{width:82%;margin-left:auto;box-shadow:0 15px 35px rgba(0,0,0,.12)}
@media(max-width:900px){
 .veranstaltungsseite-bild img{width:100%}
 .aktionsbereich{grid-template-columns:1fr}
 .aktionsbereich-bild{position:static;max-width:360px;order:-1}
 .veranstaltungsseite-inhalt{grid-template-columns:1fr;gap:40px}
}
@media(max-width:680px){
 .hero-intro h1{font-size:clamp(36px,11vw,54px)}
 .openhouse-highlights{font-size:.95rem}
}

/* Hero: blaue Textflaeche ueber die gesamte Breite */
.hero-text{width:100vw;margin-left:calc(50% - 50vw);padding-left:max(24px,calc((100vw - var(--max)) / 2));padding-right:max(24px,calc((100vw - var(--max)) / 2))}
@media(max-width:680px){
 .hero-text{padding-left:16px;padding-right:16px;background:var(--blue)}
}