/* ==========================================================
   Heinrich-Böll-Gesamtschule Düren – Stylesheet
   Farben aus dem Logo: Petrol #2497AE · Orange #FC8300
   ========================================================== */

:root {
  --petrol: #2497ae;
  --petrol-600: #1a7f95;
  --petrol-700: #11667a;
  --petrol-900: #0b3c48;
  --petrol-50: #eef8fa;
  --petrol-100: #d6eff4;
  --orange: #fc8300;
  --orange-600: #e06f00;
  --orange-50: #fff4e8;
  --orange-100: #ffe3c4;
  --ink: #102a31;
  --ink-soft: #3e5a62;
  --muted: #6a8289;
  --line: #dbe8eb;
  --bg: #fbfcfc;
  --white: #ffffff;
  --radius: 22px;
  --radius-sm: 14px;
  --shadow: 0 1px 2px rgba(16, 42, 49, .06), 0 10px 30px -12px rgba(16, 42, 49, .18);
  --shadow-lg: 0 30px 60px -25px rgba(11, 60, 72, .35);
  --font: "Avenir Next", "Segoe UI Variable Text", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Roboto, Arial, sans-serif;
  --font-display: "Avenir Next", "Century Gothic", "Segoe UI Variable Display", "Segoe UI", system-ui, -apple-system, Roboto, Arial, sans-serif;
  --wrap: 1180px;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--font);
  font-size: 1.0625rem;
  line-height: 1.65;
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--petrol-700); text-decoration-thickness: 2px; text-underline-offset: 3px; }
a:hover { color: var(--orange-600); }
h1, h2, h3, h4 { font-family: var(--font-display); line-height: 1.12; margin: 0 0 .6em; letter-spacing: -.02em; color: var(--ink); }
h1 { font-size: clamp(2.4rem, 5.6vw, 4.4rem); font-weight: 800; }
h2 { font-size: clamp(1.9rem, 3.6vw, 2.9rem); font-weight: 800; }
h3 { font-size: 1.3rem; font-weight: 700; letter-spacing: -.01em; }
p { margin: 0 0 1em; }
ul { padding-left: 1.2em; }
:focus-visible { outline: 3px solid var(--orange); outline-offset: 3px; border-radius: 6px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: 1rem; top: -4rem; background: var(--ink); color: #fff; padding: .6rem 1rem; border-radius: 10px; z-index: 100; }
.skip:focus { top: 1rem; color: #fff; }

.wrap { width: min(var(--wrap), 100% - 2.5rem); margin-inline: auto; }
.section { padding: clamp(4rem, 9vw, 7.5rem) 0; position: relative; }
.section--tint { background: var(--petrol-50); }
.section--warm { background: var(--orange-50); }
.section--dark { background: var(--petrol-900); color: #d9eef2; }
.section--dark h2, .section--dark h3 { color: #fff; }

.eyebrow {
  display: inline-flex; align-items: center; gap: .5rem;
  font-size: .8rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  color: var(--petrol-700); margin-bottom: 1rem;
}
.eyebrow::before { content: ""; width: 26px; height: 3px; border-radius: 3px; background: var(--orange); }
.section--dark .eyebrow { color: var(--orange-100); }
.lead { font-size: clamp(1.1rem, 1.6vw, 1.3rem); color: var(--ink-soft); max-width: 62ch; }
.section--dark .lead { color: #b8dbe2; }
.section-head { max-width: 760px; margin-bottom: clamp(2.2rem, 4vw, 3.5rem); }
.section-head.center { text-align: center; margin-inline: auto; }
.section-head.center .lead { margin-inline: auto; }
.hl { color: var(--petrol); }
.hl-o { color: var(--orange); }
.mark {
  background: linear-gradient(transparent 62%, var(--orange-100) 62%);
  padding: 0 .1em;
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; gap: .6rem;
  padding: .95rem 1.5rem; border-radius: 999px;
  font-weight: 700; font-size: 1rem; text-decoration: none; line-height: 1.2;
  border: 2px solid transparent; cursor: pointer;
  transition: transform .2s ease, box-shadow .2s ease, background .2s ease, color .2s ease;
}
.btn svg { width: 1.15em; height: 1.15em; flex: none; }
.btn:hover { transform: translateY(-2px); }
.btn--primary { background: var(--orange); color: var(--ink); box-shadow: 0 10px 24px -10px rgba(252, 131, 0, .8); }
.btn--primary:hover { background: #ff9426; color: var(--ink); }
.btn--petrol { background: var(--petrol-700); color: #fff; }
.btn--petrol:hover { background: var(--petrol-900); color: #fff; }
.btn--ghost { border-color: currentColor; color: var(--petrol-700); background: transparent; }
.btn--ghost:hover { background: var(--petrol-700); border-color: var(--petrol-700); color: #fff; }
.btn--light { background: #fff; color: var(--petrol-900); }
.btn--light:hover { color: var(--petrol-900); background: var(--orange-100); }
.btn-row { display: flex; flex-wrap: wrap; gap: .8rem; }

/* ---------- Header ---------- */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(255, 255, 255, .86);
  backdrop-filter: saturate(160%) blur(14px);
  -webkit-backdrop-filter: saturate(160%) blur(14px);
  border-bottom: 1px solid transparent;
  transition: border-color .2s, box-shadow .2s;
}
.site-header.scrolled { border-color: var(--line); box-shadow: 0 6px 24px -18px rgba(16, 42, 49, .4); }
.header-inner { display: flex; align-items: center; gap: 1.5rem; height: 78px; }
.brand { display: flex; align-items: center; gap: .75rem; text-decoration: none; color: var(--ink); flex: none; }
.brand img { height: 50px; width: auto; }
.brand span { font-family: var(--font-display); font-weight: 700; font-size: .82rem; line-height: 1.2; color: var(--ink-soft); max-width: 11ch; }
.main-nav { margin-left: auto; }
.main-nav ul { list-style: none; display: flex; gap: .2rem; margin: 0; padding: 0; }
.main-nav a {
  display: block; padding: .55rem .85rem; border-radius: 999px;
  text-decoration: none; color: var(--ink); font-weight: 600; font-size: .97rem;
}
.main-nav a:hover { background: var(--petrol-50); color: var(--petrol-700); }
.main-nav a[aria-current="page"] { background: var(--petrol-100); color: var(--petrol-900); }
.header-cta { flex: none; padding: .7rem 1.15rem; font-size: .95rem; }
.nav-toggle {
  display: none; margin-left: auto; width: 48px; height: 48px; border-radius: 14px;
  border: 0; background: var(--petrol-50); color: var(--petrol-900); cursor: pointer;
  align-items: center; justify-content: center;
}
.nav-toggle svg { width: 24px; height: 24px; }

@media (max-width: 1180px) {
  .nav-toggle { display: inline-flex; }
  .header-cta { display: none; }
  .main-nav {
    position: fixed; inset: 78px 0 auto 0; background: #fff;
    border-bottom: 1px solid var(--line); box-shadow: 0 30px 40px -30px rgba(0, 0, 0, .3);
    padding: 1rem 1.25rem 1.5rem; display: none; max-height: calc(100vh - 78px); overflow: auto;
  }
  .main-nav.open { display: block; }
  .main-nav ul { flex-direction: column; gap: .25rem; }
  .main-nav a { padding: .9rem 1rem; font-size: 1.1rem; border-radius: 14px; }
  .main-nav .mobile-cta { display: block; margin-top: .8rem; }
  .main-nav .mobile-cta a { background: var(--orange); text-align: center; }
}
@media (min-width: 1181px) { .main-nav .mobile-cta { display: none; } }

/* ---------- Hero ---------- */
.hero { position: relative; overflow: hidden; padding: clamp(3rem, 7vw, 6rem) 0 clamp(4rem, 8vw, 7rem); }
.hero::before {
  content: ""; position: absolute; inset: 0;
  background:
    radial-gradient(700px 420px at 85% 20%, rgba(36, 151, 174, .16), transparent 70%),
    radial-gradient(560px 380px at 8% 95%, rgba(252, 131, 0, .13), transparent 70%);
  pointer-events: none;
}
.hero-grid { display: grid; grid-template-columns: 1.1fr .9fr; gap: clamp(2rem, 5vw, 4rem); align-items: center; position: relative; }
.hero h1 .line { display: block; }
.hero .lead { margin-bottom: 2rem; }
.pill {
  display: inline-flex; align-items: center; gap: .55rem;
  background: #fff; border: 1px solid var(--line); border-radius: 999px;
  padding: .4rem .9rem .4rem .45rem; font-size: .9rem; font-weight: 600; color: var(--ink-soft);
  box-shadow: var(--shadow); margin-bottom: 1.6rem; text-decoration: none;
}
.pill b { background: var(--orange); color: var(--ink); border-radius: 999px; padding: .15rem .6rem; font-size: .78rem; letter-spacing: .03em; }
.pill:hover { color: var(--petrol-700); }
.hero-visual { position: relative; aspect-ratio: 1 / 1; max-width: 520px; margin-left: auto; width: 100%; }
.hero-visual .globe {
  position: absolute; inset: 8%; width: 84%; height: 84%; object-fit: contain;
  animation: spin 80s linear infinite; filter: drop-shadow(0 30px 40px rgba(17, 102, 122, .25));
}
.hero-visual .ring { position: absolute; inset: 0; border-radius: 50%; border: 2px dashed rgba(36, 151, 174, .35); animation: spin 120s linear infinite reverse; }
@keyframes spin { to { transform: rotate(360deg); } }
.float-card {
  position: absolute; background: #fff; border-radius: 18px; padding: .85rem 1.05rem;
  box-shadow: var(--shadow-lg); display: flex; align-items: center; gap: .75rem;
  font-size: .9rem; line-height: 1.3; max-width: 245px; animation: bob 6s ease-in-out infinite;
}
.float-card strong { display: block; font-family: var(--font-display); font-size: 1rem; color: var(--ink); }
.float-card span { color: var(--muted); }
.float-card .ic { width: 42px; height: 42px; flex: none; border-radius: 12px; display: grid; place-items: center; }
.float-card .ic svg { width: 22px; height: 22px; }
.float-card.fc1 { top: 6%; left: -6%; }
.float-card.fc2 { top: 46%; right: -4%; animation-delay: -2s; }
.float-card.fc3 { bottom: 4%; left: 4%; animation-delay: -4s; }
@keyframes bob { 50% { transform: translateY(-10px); } }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  html { scroll-behavior: auto; }
}
@media (max-width: 900px) {
  .hero-grid { grid-template-columns: 1fr; }
  .hero-visual { max-width: 420px; margin: 1rem auto 0; }
  .float-card.fc1 { left: 0; }
  .float-card.fc2 { right: 0; }
}
@media (max-width: 480px) {
  .float-card { font-size: .8rem; padding: .6rem .75rem; max-width: 200px; }
  .float-card .ic { width: 34px; height: 34px; }
}

/* ---------- Page hero (Unterseiten) ---------- */
.page-hero {
  position: relative; overflow: hidden;
  background: linear-gradient(135deg, var(--petrol-900) 0%, var(--petrol-700) 60%, var(--petrol) 100%);
  color: #e4f4f7; padding: clamp(3.5rem, 8vw, 6rem) 0 clamp(3.5rem, 7vw, 5.5rem);
}
.page-hero::after {
  content: ""; position: absolute; right: -120px; top: -120px; width: 460px; height: 460px;
  background: url("../img/globus.png") center/contain no-repeat; opacity: .12;
}
.page-hero h1 { color: #fff; max-width: 18ch; }
.page-hero .lead { color: #c7e7ee; }
.page-hero .eyebrow { color: var(--orange-100); }
.crumbs { font-size: .88rem; margin-bottom: 1.2rem; color: #a9d6df; }
.crumbs a { color: #fff; text-decoration: none; }
.crumbs a:hover { text-decoration: underline; color: #fff; }
.page-hero.orange { background: linear-gradient(135deg, #b85600 0%, var(--orange-600) 55%, var(--orange) 100%); }
.page-hero.orange .lead, .page-hero.orange .crumbs { color: #fff2e2; }

/* ---------- Audience Switch ---------- */
.switch {
  display: inline-flex; background: #fff; border: 1px solid var(--line); border-radius: 999px; padding: .35rem;
  box-shadow: var(--shadow); margin-bottom: 2.2rem; flex-wrap: wrap;
}
.switch button {
  border: 0; background: transparent; font: inherit; font-weight: 700; color: var(--ink-soft);
  padding: .75rem 1.4rem; border-radius: 999px; cursor: pointer; display: inline-flex; align-items: center; gap: .5rem;
}
.switch button svg { width: 20px; height: 20px; }
.switch button[aria-selected="true"] { background: var(--petrol-700); color: #fff; }
.audience-panel { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1.5rem, 4vw, 3.5rem); align-items: start; }
.audience-panel[hidden] { display: none; }
.audience-panel .greeting { font-family: var(--font-display); font-size: clamp(1.5rem, 2.6vw, 2.1rem); font-weight: 800; line-height: 1.2; margin-bottom: 1rem; }
.check-list { list-style: none; padding: 0; margin: 0; display: grid; gap: .9rem; }
.check-list li { display: flex; gap: .85rem; align-items: flex-start; background: #fff; border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 1rem 1.1rem; }
.check-list li svg { width: 24px; height: 24px; flex: none; color: var(--orange); margin-top: .1rem; }
.check-list li strong { display: block; }
.check-list li span { color: var(--ink-soft); font-size: .97rem; }
@media (max-width: 820px) { .audience-panel { grid-template-columns: 1fr; } }

/* ---------- Cards ---------- */
.grid { display: grid; gap: clamp(1rem, 2vw, 1.5rem); }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 980px) { .grid-3, .grid-4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; } }

.card {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  padding: clamp(1.4rem, 2.5vw, 2rem); position: relative; transition: transform .25s ease, box-shadow .25s ease, border-color .25s;
}
.card p:last-child { margin-bottom: 0; }
.card p { color: var(--ink-soft); }
a.card { text-decoration: none; color: inherit; display: block; }
a.card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); border-color: transparent; }
.card .icon {
  width: 56px; height: 56px; border-radius: 16px; display: grid; place-items: center; margin-bottom: 1.2rem;
  background: var(--petrol-50); color: var(--petrol-700);
}
.card .icon svg { width: 28px; height: 28px; }
.card .icon.o { background: var(--orange-50); color: var(--orange-600); }
.card .more { display: inline-flex; align-items: center; gap: .4rem; font-weight: 700; color: var(--petrol-700); margin-top: .6rem; }
.card .more svg { width: 18px; height: 18px; transition: transform .2s; }
a.card:hover .more svg { transform: translateX(4px); }
.card .tag { position: absolute; top: 1.2rem; right: 1.2rem; font-size: .72rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; padding: .3rem .65rem; border-radius: 999px; background: var(--orange); color: var(--ink); }

.card--feature { grid-column: span 2; background: linear-gradient(140deg, var(--petrol-700), var(--petrol)); color: #e8f7fa; border: 0; overflow: hidden; }
.card--feature h3 { color: #fff; font-size: clamp(1.5rem, 2.4vw, 2rem); }
.card--feature p { color: #d4eef3; max-width: 46ch; }
.card--feature .icon { background: rgba(255, 255, 255, .15); color: #fff; }
.card--feature .more { color: #fff; }
.card--feature::after {
  content: ""; position: absolute; right: -60px; bottom: -80px; width: 280px; height: 280px;
  background: url("../img/globus.png") center/contain no-repeat; opacity: .16; filter: brightness(3);
}
.card--orange { background: linear-gradient(140deg, var(--orange-600), var(--orange)); border: 0; }
.card--orange h3, .card--orange p, .card--orange .more { color: var(--ink); }
.card--orange .icon { background: rgba(255, 255, 255, .35); color: var(--ink); }
@media (max-width: 640px) { .card--feature { grid-column: auto; } }

/* ---------- Stats ---------- */
.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; }
.stat { padding: 1.5rem; border-radius: var(--radius); background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .12); }
.stat b { display: block; font-family: var(--font-display); font-size: clamp(2.2rem, 4vw, 3.2rem); color: var(--orange); line-height: 1; margin-bottom: .5rem; letter-spacing: -.03em; }
.stat span { color: #c3e3ea; font-size: .97rem; }
@media (max-width: 860px) { .stats { grid-template-columns: repeat(2, 1fr); } }

/* ---------- Termine ---------- */
.events { display: grid; gap: .8rem; }
.event {
  display: grid; grid-template-columns: 92px 1fr auto; gap: 1.2rem; align-items: center;
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 1rem 1.2rem 1rem 1rem;
}
.event .date { background: var(--petrol-50); border-radius: 12px; text-align: center; padding: .55rem .3rem; line-height: 1.1; }
.event .date b { display: block; font-family: var(--font-display); font-size: 1.6rem; color: var(--petrol-700); }
.event .date span { font-size: .78rem; font-weight: 700; text-transform: uppercase; color: var(--ink-soft); letter-spacing: .05em; }
.event h3 { font-size: 1.08rem; margin: 0 0 .15rem; }
.event p { margin: 0; color: var(--muted); font-size: .93rem; }
.event .badge { font-size: .75rem; font-weight: 800; padding: .3rem .7rem; border-radius: 999px; background: var(--orange-100); color: #8a4200; white-space: nowrap; }
.event.highlight { border: 2px solid var(--orange); background: var(--orange-50); }
.event.highlight .date { background: var(--orange); }
.event.highlight .date b, .event.highlight .date span { color: var(--ink); }
.event.past { display: none; }
@media (max-width: 560px) { .event { grid-template-columns: 74px 1fr; } .event .badge { grid-column: 2; justify-self: start; } }

/* ---------- Countdown ---------- */
.countdown { display: flex; gap: .6rem; margin: 1.4rem 0 1.8rem; flex-wrap: wrap; }
.countdown div { background: rgba(255, 255, 255, .1); border: 1px solid rgba(255, 255, 255, .2); border-radius: 14px; padding: .7rem .9rem; min-width: 78px; text-align: center; }
.countdown b { display: block; font-family: var(--font-display); font-size: 1.9rem; color: #fff; line-height: 1; }
.countdown span { font-size: .75rem; letter-spacing: .08em; text-transform: uppercase; color: #a9d6df; }

/* ---------- Werte / Statement ---------- */
.statement { font-family: var(--font-display); font-weight: 800; font-size: clamp(1.8rem, 4.2vw, 3.4rem); line-height: 1.15; letter-spacing: -.025em; max-width: 22ch; }
.values { display: flex; flex-wrap: wrap; gap: .7rem; margin-top: 2rem; }
.values span { background: #fff; border-radius: 999px; padding: .65rem 1.15rem; font-weight: 700; color: var(--petrol-900); box-shadow: var(--shadow); }
.values span:nth-child(even) { background: var(--orange); color: var(--ink); }

/* ---------- Split / Media ---------- */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 5vw, 4.5rem); align-items: center; }
.split.top { align-items: start; }
@media (max-width: 860px) { .split { grid-template-columns: 1fr; } }
.panel { background: #fff; border-radius: var(--radius); padding: clamp(1.5rem, 3vw, 2.4rem); box-shadow: var(--shadow); border: 1px solid var(--line); }
.panel--petrol { background: var(--petrol-700); color: #e2f4f7; border: 0; }
.panel--petrol h3 { color: #fff; }

/* Zitat */
.quote { position: relative; background: #fff; border-radius: var(--radius); padding: clamp(1.8rem, 4vw, 3rem); box-shadow: var(--shadow); border: 1px solid var(--line); }
.quote::before { content: "“"; position: absolute; top: -.2em; left: .3em; font-family: Georgia, serif; font-size: 7rem; color: var(--orange); line-height: 1; }
.quote p { font-size: clamp(1.1rem, 1.7vw, 1.3rem); color: var(--ink); }
.quote footer { display: flex; align-items: center; gap: .9rem; margin-top: 1.4rem; }
.avatar { width: 56px; height: 56px; border-radius: 50%; background: linear-gradient(135deg, var(--petrol), var(--petrol-700)); color: #fff; display: grid; place-items: center; font-family: var(--font-display); font-weight: 800; font-size: 1.1rem; flex: none; }
.avatar.o { background: linear-gradient(135deg, var(--orange), var(--orange-600)); color: var(--ink); }
.quote footer b { display: block; }
.quote footer span { color: var(--muted); font-size: .92rem; }

/* ---------- Team ---------- */
.person { display: flex; flex-direction: column; gap: .2rem; }
.person .avatar { width: 64px; height: 64px; font-size: 1.25rem; margin-bottom: .9rem; }
.person h3 { margin-bottom: .1rem; }
.person .role { font-weight: 700; color: var(--orange-600); font-size: .92rem; margin-bottom: .8rem; }
.person p { font-size: .97rem; }

/* ---------- Steps / Timeline ---------- */
.steps { counter-reset: step; display: grid; grid-template-columns: repeat(5, 1fr); gap: 1rem; }
.step { background: #fff; border-radius: var(--radius-sm); padding: 1.4rem 1.2rem; border: 1px solid var(--line); position: relative; }
.step::before { counter-increment: step; content: counter(step); display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--orange); color: var(--ink); font-weight: 800; font-family: var(--font-display); margin-bottom: .9rem; }
.step h3 { font-size: 1.05rem; margin-bottom: .3rem; }
.step p { font-size: .93rem; color: var(--ink-soft); margin: 0; }
@media (max-width: 980px) { .steps { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .steps { grid-template-columns: 1fr; } }

.timeline { list-style: none; margin: 0; padding: 0; position: relative; }
.timeline::before { content: ""; position: absolute; left: 19px; top: 8px; bottom: 8px; width: 3px; border-radius: 3px; background: linear-gradient(var(--petrol), var(--orange)); }
.timeline li { position: relative; padding: 0 0 1.6rem 3.4rem; }
.timeline li::before { content: ""; position: absolute; left: 10px; top: 4px; width: 21px; height: 21px; border-radius: 50%; background: #fff; border: 4px solid var(--petrol); }
.timeline li:last-child { padding-bottom: 0; }
.timeline time { font-weight: 800; color: var(--petrol-700); font-family: var(--font-display); font-size: 1.15rem; }
.timeline h3 { font-size: 1.1rem; margin: .1rem 0 .25rem; }
.timeline p { color: var(--ink-soft); margin: 0; font-size: .97rem; }

/* ---------- Chips / Partner ---------- */
.chips { display: flex; flex-wrap: wrap; gap: .6rem; }
.chip { display: inline-flex; align-items: center; gap: .5rem; padding: .55rem 1rem; border-radius: 999px; background: #fff; border: 1px solid var(--line); font-weight: 600; font-size: .95rem; color: var(--ink); }
.chip svg { width: 18px; height: 18px; color: var(--petrol); }
.chip--o { background: var(--orange-50); border-color: var(--orange-100); }
.partner-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 1rem; }
.partner { background: #fff; border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 1.2rem; }
.partner b { display: block; font-family: var(--font-display); margin-bottom: .2rem; }
.partner span { color: var(--muted); font-size: .9rem; }
a.chip, a.partner { text-decoration: none; transition: border-color .2s, box-shadow .2s, transform .2s; }
a.partner { display: block; color: var(--ink); }
a.chip:hover, a.chip:focus-visible, a.partner:hover, a.partner:focus-visible { border-color: var(--petrol); box-shadow: 0 6px 18px rgba(16, 70, 82, .12); transform: translateY(-2px); }
a.partner b::after { content: " ↗"; color: var(--petrol); font-weight: 400; }

/* ---------- Accordion ---------- */
.accordion { display: grid; gap: .7rem; }
.accordion details { background: #fff; border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 0 1.3rem; }
.accordion summary { cursor: pointer; list-style: none; padding: 1.15rem 0; font-weight: 700; display: flex; justify-content: space-between; gap: 1rem; align-items: center; font-size: 1.05rem; }
.accordion summary::-webkit-details-marker { display: none; }
.accordion summary::after { content: "+"; font-size: 1.6rem; font-weight: 400; color: var(--orange-600); line-height: 1; transition: transform .2s; }
.accordion details[open] summary::after { transform: rotate(45deg); }
.accordion details > div { padding: 0 0 1.2rem; color: var(--ink-soft); }

/* ---------- Schedule ---------- */
.schedule { display: grid; gap: .6rem; }
.slot { display: grid; grid-template-columns: 120px 1fr; gap: 1rem; align-items: center; background: #fff; border-radius: var(--radius-sm); padding: .95rem 1.2rem; border: 1px solid var(--line); }
.slot time { font-family: var(--font-display); font-weight: 800; color: var(--petrol-700); }
.slot.accent { background: var(--orange-50); border-color: var(--orange-100); }
.slot.accent time { color: var(--orange-600); }
@media (max-width: 480px) { .slot { grid-template-columns: 1fr; gap: .2rem; } }

/* ---------- Docs / Downloads ---------- */
.doc { display: flex; align-items: center; gap: 1rem; background: #fff; border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 1rem 1.2rem; text-decoration: none; color: var(--ink); }
.doc svg { width: 28px; height: 28px; color: var(--orange-600); flex: none; }
.doc b { display: block; }
.doc span { color: var(--muted); font-size: .9rem; }
a.doc:hover { border-color: var(--petrol); color: var(--ink); }

/* ---------- Contact ---------- */
.contact-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 1.1rem; }
.contact-list li { display: flex; gap: 1rem; align-items: flex-start; }
.contact-list .ic { width: 46px; height: 46px; border-radius: 14px; background: var(--petrol-50); color: var(--petrol-700); display: grid; place-items: center; flex: none; }
.contact-list .ic svg { width: 22px; height: 22px; }
.contact-list b { display: block; }
.contact-list a { font-weight: 600; }

/* ---------- CTA Band ---------- */
.cta-band {
  position: relative; overflow: hidden; border-radius: calc(var(--radius) + 8px);
  background: linear-gradient(120deg, var(--orange-600), var(--orange) 60%, #ffa640);
  padding: clamp(2.2rem, 5vw, 4rem); display: grid; grid-template-columns: 1.4fr auto; gap: 2rem; align-items: center;
}
.cta-band h2 { color: var(--ink); margin-bottom: .4rem; }
.cta-band p { color: #3a2100; margin: 0; font-size: 1.1rem; max-width: 52ch; }
.cta-band::after { content: ""; position: absolute; right: -60px; top: -70px; width: 260px; height: 260px; border-radius: 50%; border: 40px solid rgba(255, 255, 255, .18); }
.cta-band .btn-row { position: relative; z-index: 1; }
@media (max-width: 820px) { .cta-band { grid-template-columns: 1fr; } }

/* ---------- Notice ---------- */
.notice { display: flex; gap: 1rem; align-items: flex-start; background: var(--orange-50); border: 1px solid var(--orange-100); border-left: 5px solid var(--orange); border-radius: var(--radius-sm); padding: 1.1rem 1.3rem; }
.notice svg { width: 24px; height: 24px; color: var(--orange-600); flex: none; margin-top: .1rem; }
.notice p { margin: 0; }
.notice.info { background: var(--petrol-50); border-color: var(--petrol-100); border-left-color: var(--petrol); }
.notice.info svg { color: var(--petrol-700); }

/* ---------- Prose (Impressum etc.) ---------- */
.prose { max-width: 760px; }
.prose h2 { font-size: 1.6rem; margin-top: 2.2rem; }
.prose h3 { margin-top: 1.6rem; }

/* ---------- Footer ---------- */
.site-footer { background: var(--petrol-900); color: #b6d9e0; padding: clamp(3.5rem, 7vw, 5rem) 0 2rem; margin-top: 0; }
.footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 2rem; }
.footer-logo { background: #fff; border-radius: 18px; padding: .9rem 1.1rem; display: inline-block; margin-bottom: 1.2rem; }
.footer-logo img { height: 54px; width: auto; }
.site-footer h4 { color: #fff; font-size: 1rem; margin-bottom: 1rem; letter-spacing: 0; }
.site-footer ul { list-style: none; padding: 0; margin: 0; display: grid; gap: .55rem; }
.site-footer a { color: #e2f3f6; text-decoration: none; }
.site-footer a:hover { color: var(--orange); }
.footer-bottom { border-top: 1px solid rgba(255, 255, 255, .12); margin-top: 3rem; padding-top: 1.5rem; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1rem; font-size: .9rem; }
.social { display: inline-flex; align-items: center; gap: .5rem; background: rgba(255, 255, 255, .08); padding: .55rem 1rem; border-radius: 999px; margin-top: .6rem; }
.social svg { width: 20px; height: 20px; }
@media (max-width: 900px) { .footer-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .footer-grid { grid-template-columns: 1fr; } }

/* ---------- To top ---------- */
.to-top { position: fixed; right: 1.2rem; bottom: 1.2rem; width: 50px; height: 50px; border-radius: 50%; border: 0; background: var(--petrol-700); color: #fff; display: grid; place-items: center; cursor: pointer; box-shadow: var(--shadow-lg); opacity: 0; pointer-events: none; transform: translateY(10px); transition: .25s; z-index: 40; }
.to-top.show { opacity: 1; pointer-events: auto; transform: none; }
.to-top svg { width: 22px; height: 22px; }

/* ---------- Reveal ---------- */
.reveal { opacity: 0; transform: translateY(24px); transition: opacity .7s ease, transform .7s ease; }
.reveal.in { opacity: 1; transform: none; }
.no-js .reveal { opacity: 1; transform: none; }

/* Hilfsklassen */
.mt-0 { margin-top: 0; } .mt-1 { margin-top: 1rem; } .mt-2 { margin-top: 2rem; } .mt-3 { margin-top: 3rem; }
.mb-0 { margin-bottom: 0; }
.center { text-align: center; }
.small { font-size: .9rem; color: var(--muted); }

@media print {
  .site-header, .site-footer, .to-top, .cta-band { display: none; }
  .reveal { opacity: 1; transform: none; }
}
@media (max-width: 480px) {
  .switch { display: flex; flex-wrap: nowrap; width: 100%; }
  .switch button { flex: 1; justify-content: center; padding: .7rem .5rem; font-size: .92rem; }
}

/* ==========================================================
   Fotos
   ========================================================== */
.photo { position: relative; border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-lg); background: var(--petrol-100); margin: 0; }
.photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.photo figcaption { position: absolute; left: 0; right: 0; bottom: 0; padding: 2.2rem 1.2rem 1rem; color: #fff; font-weight: 600; font-size: .95rem; background: linear-gradient(transparent, rgba(11, 60, 72, .85)); }
.photo.tall { aspect-ratio: 4 / 5; }
.photo.wide { aspect-ratio: 16 / 10; }
.photo.cine { aspect-ratio: 21 / 9; }
@media (max-width: 640px) { .photo.cine { aspect-ratio: 4 / 3; } }

/* Hero-Collage */
.hero-collage { position: relative; aspect-ratio: 1 / 1; max-width: 560px; width: 100%; margin-left: auto; }
.hero-collage .main { position: absolute; inset: 0 12% 14% 0; border-radius: 28px; }
.hero-collage .side { position: absolute; right: 0; bottom: 0; width: 40%; aspect-ratio: 3 / 4; border-radius: 22px; border: 6px solid #fff; }
.hero-collage .deco-globe { position: absolute; width: 34%; right: 2%; top: -6%; opacity: .9; animation: spin 80s linear infinite; z-index: -1; }
.hero-collage .float-card { z-index: 3; }
.hero-collage .fc1 { top: 6%; left: -8%; }
.hero-collage .fc2 { top: 40%; right: -4%; }
.hero-collage .fc3 { bottom: 2%; left: 6%; }
@media (max-width: 900px) { .hero-collage { margin: 1.5rem auto 0; max-width: 460px; } .hero-collage .fc1 { left: 0; } .hero-collage .fc2 { right: 0; } }

/* Karten mit Bild */
.card-img { margin: calc(-1 * clamp(1.4rem, 2.5vw, 2rem)) calc(-1 * clamp(1.4rem, 2.5vw, 2rem)) 1.3rem; height: 190px; overflow: hidden; border-radius: var(--radius) var(--radius) 0 0; }
.card-img img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s ease; }
a.card:hover .card-img img { transform: scale(1.05); }
.card .card-img + .icon { margin-top: -3.2rem; position: relative; border: 4px solid #fff; background: #fff; }
.card--feature.with-photo { padding: 0; display: grid; grid-template-columns: 1fr 1fr; }
.card--feature.with-photo .fp-text { padding: clamp(1.4rem, 2.5vw, 2rem); position: relative; z-index: 1; }
.card--feature.with-photo .fp-img { position: relative; min-height: 260px; }
.card--feature.with-photo .fp-img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.card--feature.with-photo::after { display: none; }
@media (max-width: 760px) { .card--feature.with-photo { grid-template-columns: 1fr; } .card--feature.with-photo .fp-img { min-height: 200px; order: -1; } }

/* Porträts */
.portrait { width: 96px; height: 96px; border-radius: 50%; overflow: hidden; margin-bottom: 1rem; border: 4px solid var(--petrol-100); flex: none; }
.portrait img { width: 100%; height: 100%; object-fit: cover; object-position: center 20%; }
.portrait.lg { width: 84px; height: 84px; margin: 0; }
.quote footer .portrait { width: 64px; height: 64px; margin: 0; border-width: 3px; }

/* Galerie */
.gallery { display: grid; grid-template-columns: 2fr 1fr; grid-template-rows: 1fr 1fr; gap: 1rem; }
.gallery .photo:first-child { grid-row: span 2; min-height: 380px; }
.gallery .photo { min-height: 180px; }
@media (max-width: 700px) { .gallery { grid-template-columns: 1fr; grid-template-rows: none; } .gallery .photo:first-child { grid-row: auto; min-height: 260px; } }

/* Foto-Band */
.photo-band { position: relative; border-radius: calc(var(--radius) + 8px); overflow: hidden; min-height: 420px; display: flex; align-items: flex-end; box-shadow: var(--shadow-lg); }
.photo-band img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.photo-band .band-text { position: relative; padding: clamp(1.6rem, 4vw, 3rem); color: #fff; width: 100%; background: linear-gradient(transparent, rgba(11, 60, 72, .92) 55%); padding-top: 6rem; }
.photo-band h2 { color: #fff; margin-bottom: .4rem; }
.photo-band p { color: #d8eff4; max-width: 60ch; margin: 0; font-size: 1.1rem; }

/* Unterseiten-Hero mit Foto */
.page-hero.has-photo { background-size: cover; background-position: center; }
.page-hero.has-photo::before { content: ""; position: absolute; inset: 0; background: linear-gradient(100deg, rgba(11, 60, 72, .95) 0%, rgba(17, 102, 122, .82) 45%, rgba(17, 102, 122, .35) 100%); }
.page-hero.orange.has-photo::before { background: linear-gradient(100deg, rgba(150, 70, 0, .95) 0%, rgba(224, 111, 0, .85) 45%, rgba(252, 131, 0, .3) 100%); }
.page-hero.has-photo .wrap { position: relative; z-index: 1; }
.page-hero.has-photo { padding-top: clamp(4.5rem, 10vw, 8rem); padding-bottom: clamp(4.5rem, 9vw, 7rem); }
@media (max-width: 600px) {
  .hero-collage .fc2 { display: none; }
  .hero-collage .fc1 { top: -4%; left: -2%; }
  .hero-collage .side img { object-position: center 20%; }
}

/* Bildleiste unter dem Hero */
.photo-strip { padding: 0 0 clamp(3.5rem, 7vw, 5.5rem); margin-top: calc(-1 * clamp(1rem, 3vw, 2.5rem)); position: relative; }
.strip-grid { display: grid; grid-template-columns: 1.6fr 0.9fr 1.2fr 1.2fr; gap: 1rem; height: 300px; }
.strip-grid .photo { height: 100%; box-shadow: var(--shadow); }
.strip-grid .photo:nth-child(even) { transform: translateY(24px); }
@media (max-width: 900px) {
  .strip-grid { grid-template-columns: 1fr 1fr; height: auto; }
  .strip-grid .photo { aspect-ratio: 4 / 3; height: auto; }
  .strip-grid .photo:nth-child(even) { transform: none; }
}
.strip-grid .photo figcaption { font-size: .9rem; }
@media (max-width: 600px) { .strip-grid .photo figcaption { font-size: .78rem; padding: 1.6rem .8rem .6rem; line-height: 1.3; } }

/* Feinschliff kleine Bildschirme */
.stat { min-width: 0; }
@media (max-width: 420px) {
  .stats { gap: .7rem; }
  .stat { padding: 1.1rem; }
  .stat b { font-size: 2rem; }
  .stat span { font-size: .88rem; }
}
.accordion details > div a { display: inline-block; padding: .35rem 0; }
h1, h2, .statement { overflow-wrap: break-word; hyphens: auto; -webkit-hyphens: auto; }
.split > *, .hero-grid > *, .grid > * { min-width: 0; }
@media (max-width: 360px) {
  h1 { font-size: 2.1rem; }
  .statement { font-size: 1.6rem; }
  .values span { font-size: .9rem; padding: .55rem .9rem; }
}

/* ==========================================================
   Oberstufe
   ========================================================== */
.ob-facts { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; margin-top: calc(-1 * clamp(4rem, 9vw, 6.5rem)); position: relative; z-index: 2; }
.ob-facts > div { background: #fff; border-radius: var(--radius); padding: 1.4rem 1.5rem; box-shadow: var(--shadow-lg); border: 1px solid var(--line); }
.ob-facts b { display: block; font-family: var(--font-display); font-size: clamp(1.8rem, 3.2vw, 2.5rem); line-height: 1; color: var(--orange-600); letter-spacing: -.02em; margin-bottom: .45rem; }
.ob-facts span { color: var(--ink-soft); font-size: .95rem; line-height: 1.4; display: block; }
@media (max-width: 860px) { .ob-facts { grid-template-columns: 1fr 1fr; } }
@media (max-width: 420px) { .ob-facts > div { padding: 1.1rem; } .ob-facts span { font-size: .86rem; } }

.phases { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; position: relative; }
.phases::before { content: ""; position: absolute; left: 4%; right: 4%; top: 22px; height: 3px; background: linear-gradient(90deg, rgba(255,255,255,.2), var(--orange)); border-radius: 3px; }
.phases li { position: relative; background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .14); border-radius: var(--radius); padding: 3.6rem 1.4rem 1.5rem; }
.phases .ph-tag { position: absolute; top: 0; left: 1.4rem; transform: translateY(0); background: var(--petrol); color: #fff; font-weight: 800; font-size: .85rem; padding: .55rem .95rem; border-radius: 999px; border: 3px solid var(--petrol-900); }
.phases li.goal { background: linear-gradient(140deg, var(--orange-600), var(--orange)); border: 0; }
.phases li.goal .ph-tag { background: #fff; color: var(--ink); }
.phases li.goal h3, .phases li.goal p { color: var(--ink); }
.phases h3 { font-size: 1.15rem; margin-bottom: .4rem; }
.phases p { color: #c3e3ea; font-size: .97rem; margin: 0; }
@media (max-width: 900px) { .phases { grid-template-columns: 1fr 1fr; } .phases::before { display: none; } }
@media (max-width: 520px) { .phases { grid-template-columns: 1fr; } }

.field { padding-top: 2.4rem; }
.field-no { position: absolute; top: 1.1rem; right: 1.3rem; font-family: var(--font-display); font-weight: 800; font-size: 2.6rem; color: var(--petrol-100); line-height: 1; }
.field h3 { padding-right: 2.5rem; }
.field .chip { font-size: .9rem; padding: .45rem .85rem; }
.lk-chips .chip { background: var(--orange); border-color: var(--orange); color: var(--ink); font-weight: 700; }

.ef-list { list-style: none; padding: 0; margin: 1rem 0; display: grid; gap: .55rem; }
.ef-list li { display: flex; gap: .6rem; align-items: flex-start; font-size: .98rem; }
.ef-list svg { width: 20px; height: 20px; color: var(--orange-600); flex: none; margin-top: .15rem; }
.ef-list em { font-style: normal; color: var(--muted); }

.abi-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: .7rem; margin-top: 1.5rem; }
.abi { border-radius: var(--radius-sm); padding: 1rem .8rem; text-align: center; background: #fff; border: 1px solid var(--line); }
.abi b { display: grid; place-items: center; width: 38px; height: 38px; margin: 0 auto .5rem; border-radius: 50%; font-family: var(--font-display); }
.abi span { display: block; font-weight: 700; font-size: .95rem; }
.abi em { font-style: normal; font-size: .82rem; color: var(--muted); }
.abi.a1 b { background: var(--orange); color: var(--ink); }
.abi.a2 b { background: var(--petrol); color: #fff; }
.abi.a3 b { background: var(--petrol-100); color: var(--petrol-900); }
@media (max-width: 520px) { .abi-grid { grid-template-columns: 1fr 1fr; } }

.ob-mini { display: grid; grid-template-columns: repeat(3, 1fr); gap: .7rem; }
.ob-mini div { background: #fff; border-radius: var(--radius-sm); padding: .9rem 1rem; border: 1px solid var(--line); }
.ob-mini b { display: block; font-family: var(--font-display); font-size: 1.7rem; color: var(--petrol-700); line-height: 1.1; }
.ob-mini span { font-size: .82rem; color: var(--muted); line-height: 1.3; display: block; }

.ob-gallery { display: grid; grid-template-columns: 1.3fr 1fr 1fr; grid-template-rows: 230px 230px; gap: 1rem; }
.ob-gallery .photo { height: 100%; }
.ob-gallery .g-rom { grid-row: span 2; }
.ob-gallery .g-abi { grid-column: span 2; }
@media (max-width: 760px) {
  .ob-gallery { grid-template-columns: 1fr 1fr; grid-template-rows: auto; }
  .ob-gallery .photo { aspect-ratio: 4 / 3; height: auto; }
  .ob-gallery .g-rom, .ob-gallery .g-abi { grid-row: auto; grid-column: span 2; }
}

.theater-row { display: grid; grid-template-columns: 220px 220px 1fr; gap: 1rem; align-items: stretch; }
.theater-row .photo { aspect-ratio: 2 / 3; background: #111; }
.theater-row .panel { display: flex; flex-direction: column; justify-content: center; }
@media (max-width: 760px) { .theater-row { grid-template-columns: 1fr 1fr; } .theater-row .panel { grid-column: span 2; } }

.person-row { display: flex; gap: 1rem; align-items: center; }
a.photo-band.ob-teaser { text-decoration: none; display: flex; }
a.photo-band.ob-teaser img { transition: transform .8s ease; }
a.photo-band.ob-teaser:hover img { transform: scale(1.03); }
.page-hero .btn--light { color: var(--petrol-900); }
.panel--petrol .eyebrow { color: var(--orange-100); }
.field h3 { font-size: 1.12rem; overflow-wrap: break-word; hyphens: auto; }
.theater-row .photo img { object-fit: contain; background: #111; }

/* Kopfzeile mit 8 Menüpunkten: CTA-Knopf früher ausblenden, Abstände enger */
@media (min-width: 1081px) and (max-width: 1260px) {
  .header-cta { display: none; }
  .main-nav a { padding: .55rem .7rem; font-size: .95rem; }
}
@media (min-width: 1261px) and (max-width: 1340px) {
  .main-nav a { padding: .55rem .6rem; font-size: .94rem; }
  .header-inner { gap: 1rem; }
}
/* Oberstufen-Kennzahlen auf sehr kleinen Handys */
.ob-facts > div { min-width: 0; }
@media (max-width: 380px) {
  .ob-facts { gap: .6rem; }
  .ob-facts > div { padding: .9rem; }
  .ob-facts b { font-size: 1.45rem; }
  .ob-facts span { font-size: .8rem; }
}
.ob-mini div { min-width: 0; }
@media (max-width: 420px) {
  .ob-mini { gap: .5rem; }
  .ob-mini div { padding: .7rem .6rem; }
  .ob-mini b { font-size: 1.35rem; }
  .ob-mini span { font-size: .74rem; }
}
.ob-teaser .band-text { background: linear-gradient(90deg, rgba(11,60,72,.94) 0%, rgba(11,60,72,.75) 40%, rgba(11,60,72,.1) 75%, transparent 100%); padding-top: clamp(2rem, 5vw, 3rem); align-self: stretch; display: flex; flex-direction: column; justify-content: flex-end; }
.ob-teaser .band-text > * { max-width: 560px; }
@media (max-width: 700px) { .ob-teaser .band-text { background: linear-gradient(transparent 10%, rgba(11,60,72,.92) 55%); padding-top: 8rem; } }
.ob-teaser .band-text > .btn { align-self: flex-start; }

/* Broschüren-Download */
.brochure { display: grid; grid-template-columns: 150px 1fr; gap: clamp(1.2rem, 3vw, 2.2rem); align-items: center; margin-top: 2rem; padding: clamp(1.2rem, 2.5vw, 1.8rem); background: var(--orange-50); border: 1px solid var(--orange-100); border-radius: var(--radius); text-decoration: none; color: var(--ink); transition: transform .25s, box-shadow .25s; }
.brochure:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); color: var(--ink); }
.brochure img { width: 150px; height: auto; border-radius: 8px; box-shadow: 0 12px 28px -10px rgba(16, 42, 49, .45); transform: rotate(-3deg); transition: transform .3s; }
.brochure:hover img { transform: rotate(0); }
.brochure h3 { margin-bottom: .4rem; }
.brochure p { color: var(--ink-soft); margin-bottom: 1rem; max-width: 62ch; }
.brochure .eyebrow { margin-bottom: .5rem; }
@media (max-width: 560px) { .brochure { grid-template-columns: 90px 1fr; align-items: start; } .brochure img { width: 90px; } .brochure .btn { padding: .8rem 1.1rem; font-size: .92rem; } }
.brochure > div { min-width: 0; }
@media (max-width: 560px) {
  .brochure { grid-template-columns: 1fr; text-align: left; }
  .brochure img { width: 110px; }
  .brochure .btn { white-space: normal; }
}

/* Schulmotto */
.motto { text-transform: uppercase; font-size: clamp(2.2rem, 4.6vw, 3.9rem); letter-spacing: -.01em; line-height: 1.04; }
.motto .line { display: block; }
.motto-sm { text-transform: uppercase; font-size: 1.25rem; letter-spacing: .01em; line-height: 1.25; color: var(--petrol-700); }
@media (max-width: 380px) { .motto { font-size: 1.95rem; } }

/* ==========================================================
   Pop-up: Tag der offenen Tür
   ========================================================== */
.tdot { position: fixed; inset: 0; z-index: 200; display: grid; place-items: center; padding: 1rem; }
.tdot[hidden] { display: none; }
.tdot-backdrop { position: absolute; inset: 0; background: rgba(11, 60, 72, .62); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); opacity: 0; transition: opacity .35s ease; }
.tdot-dialog { position: relative; width: min(880px, 100%); max-height: calc(100vh - 2rem); overflow: auto; background: #fff; border-radius: 28px; box-shadow: 0 40px 80px -20px rgba(0, 0, 0, .45); display: grid; grid-template-columns: .95fr 1.05fr; opacity: 0; transform: translateY(30px) scale(.96); transition: opacity .4s ease, transform .5s cubic-bezier(.2, .9, .25, 1.2); outline: none; }
.tdot.show .tdot-backdrop { opacity: 1; }
.tdot.show .tdot-dialog { opacity: 1; transform: none; }
.tdot-media { position: relative; min-height: 100%; background: var(--petrol-700); overflow: hidden; }
.tdot-media > img:first-child { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.tdot-media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(160deg, rgba(17, 102, 122, .15), rgba(11, 60, 72, .55)); }
.tdot-date { position: absolute; left: 1.4rem; top: 1.4rem; z-index: 2; background: var(--orange); color: var(--ink); border-radius: 20px; padding: .7rem 1.1rem .8rem; text-align: center; line-height: 1; box-shadow: 0 14px 30px -10px rgba(252, 131, 0, .8); animation: tdot-bob 3.5s ease-in-out infinite; }
.tdot-date b { display: block; font-family: var(--font-display); font-size: 3rem; letter-spacing: -.03em; margin: .15rem 0; }
.tdot-date span { font-weight: 800; font-size: .85rem; text-transform: uppercase; letter-spacing: .1em; }
.tdot-globe { position: absolute; right: -40px; bottom: -40px; width: 170px; z-index: 2; opacity: .95; animation: spin 60s linear infinite; filter: drop-shadow(0 10px 20px rgba(0,0,0,.25)); }
@keyframes tdot-bob { 50% { transform: translateY(-6px) rotate(-2deg); } }
.tdot-body { padding: clamp(1.6rem, 3.5vw, 2.6rem); }
.tdot-body h2 { font-size: clamp(1.8rem, 3.4vw, 2.5rem); margin-bottom: .5rem; }
.tdot-body .eyebrow { margin-bottom: .6rem; }
.tdot-when { display: flex; align-items: center; gap: .5rem; font-weight: 800; color: var(--petrol-700); margin-bottom: .9rem; }
.tdot-when svg { width: 20px; height: 20px; color: var(--orange-600); flex: none; }
.tdot-body > p { color: var(--ink-soft); }
.tdot-list { list-style: none; padding: 0; margin: 0 0 1.1rem; display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; }
.tdot-list li { display: flex; align-items: center; gap: .5rem; font-size: .92rem; font-weight: 600; background: var(--petrol-50); border-radius: 12px; padding: .55rem .7rem; line-height: 1.25; }
.tdot-list svg { width: 18px; height: 18px; color: var(--petrol-700); flex: none; }
.tdot-cd { margin: 0 0 1.3rem; }
.tdot-cd div { background: var(--petrol-900); border-color: var(--petrol-900); min-width: 70px; padding: .55rem .7rem; }
.tdot-cd b { font-size: 1.6rem; }
.tdot-x { position: absolute; right: .9rem; top: .9rem; z-index: 3; width: 44px; height: 44px; border-radius: 50%; border: 0; background: rgba(255, 255, 255, .92); color: var(--ink); font-size: 1.7rem; line-height: 1; cursor: pointer; box-shadow: var(--shadow); }
.tdot-x:hover { background: var(--orange); }
.tdot-later { margin-top: .9rem; background: none; border: 0; padding: .4rem 0; color: var(--muted); font: inherit; font-size: .9rem; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.tdot-later:hover { color: var(--ink); }
body.tdot-open { overflow: hidden; }
@media (max-width: 760px) {
  .tdot { padding: .6rem; align-items: end; }
  .tdot-dialog { grid-template-columns: 1fr; border-radius: 24px; max-height: calc(100vh - 1.2rem); }
  .tdot-media { min-height: 170px; height: 170px; }
  .tdot-date { left: 1rem; top: 1rem; padding: .5rem .8rem .55rem; border-radius: 16px; }
  .tdot-date b { font-size: 2.1rem; }
  .tdot-globe { width: 120px; right: -28px; bottom: -36px; }
  .tdot-list { grid-template-columns: 1fr; }
  .tdot-body .btn-row .btn { flex: 1 1 auto; justify-content: center; }
}
@media (max-width: 380px) { .tdot-cd div { min-width: 0; flex: 1; } }
@media (max-width: 760px) {
  .tdot-media { min-height: 130px; height: 130px; }
  .tdot-date { padding: .4rem .7rem .45rem; }
  .tdot-date b { font-size: 1.8rem; }
  .tdot-date span { font-size: .72rem; }
  .tdot-globe { width: 100px; }
  .tdot-x { width: 40px; height: 40px; font-size: 1.5rem; right: .7rem; top: .7rem; }
  .tdot-body { padding: 1.2rem 1.2rem 1rem; }
  .tdot-body .eyebrow { font-size: .72rem; margin-bottom: .35rem; }
  .tdot-body h2 { font-size: 1.6rem; margin-bottom: .35rem; }
  .tdot-when { font-size: .92rem; margin-bottom: .6rem; align-items: flex-start; }
  .tdot-body > p { font-size: .93rem; line-height: 1.5; margin-bottom: .8rem; }
  .tdot-list { grid-template-columns: 1fr 1fr; gap: .4rem; margin-bottom: .8rem; }
  .tdot-list li { font-size: .8rem; padding: .45rem .55rem; gap: .4rem; }
  .tdot-list svg { width: 16px; height: 16px; }
  .tdot-cd { margin-bottom: .9rem; gap: .45rem; }
  .tdot-cd div { min-width: 0; flex: 1; padding: .4rem .5rem; border-radius: 12px; }
  .tdot-cd b { font-size: 1.3rem; }
  .tdot-cd span { font-size: .65rem; }
  .tdot-body .btn-row { gap: .5rem; }
  .tdot-body .btn-row .btn { padding: .75rem 1rem; font-size: .92rem; }
  .tdot-later { margin-top: .5rem; }
}
@media (max-width: 360px) { .tdot-body > p { display: none; } }

/* Pop-up: eigene Illustration statt Foto */
.tdot-media { background: #1a8aa1; }
.tdot-media::after { display: none; }
.tdot-art { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.tdot-art .bl { animation: art-float 5s ease-in-out infinite; transform-box: fill-box; transform-origin: 50% 100%; }
.tdot-art .b2 { animation-delay: -1.7s; animation-duration: 6s; }
.tdot-art .b3 { animation-delay: -3.1s; animation-duration: 5.5s; }
.tdot-art .b4 { animation-delay: -.8s; }
.tdot-art .cf { animation: art-twinkle 3.2s ease-in-out infinite; }
.tdot-art .cf:nth-of-type(3n) { animation-delay: -1s; }
.tdot-art .cf:nth-of-type(3n+1) { animation-delay: -2.1s; }
.tdot-art .art-globe { transform-box: fill-box; transform-origin: center; animation: spin 50s linear infinite; }
.tdot-art .art-glow { animation: art-glow 3.5s ease-in-out infinite; }
@keyframes art-float { 50% { transform: translateY(-9px) rotate(1.5deg); } }
@keyframes art-twinkle { 50% { opacity: .25; } }
@keyframes art-glow { 50% { opacity: .55; } }
@media (max-width: 760px) { .tdot-media { min-height: 165px; height: 165px; } }
@media (prefers-reduced-motion: reduce) { .tdot-art * { animation: none !important; } }

/* ==========================================================
   Terminplan
   ========================================================== */
:root { --c-eltern: #f58200; --c-eltern-bg: #fff6eb; --c-unterricht: #2298ab; --c-unterricht-bg: #f1f8f9; --c-frei: #9fbcc1; --c-frei-bg: #f3f6f6; }
.tp-top { padding-bottom: 1.5rem; }
.tp-next-wrap { display: grid; grid-template-columns: 240px 1fr; gap: 1.5rem; align-items: start; margin-top: calc(-1 * clamp(3.5rem, 8vw, 5.5rem)); position: relative; z-index: 2; background: #fff; border-radius: var(--radius); box-shadow: var(--shadow-lg); border: 1px solid var(--line); padding: clamp(1.2rem, 3vw, 2rem); }
.tp-next-head h2 { font-size: clamp(1.5rem, 2.4vw, 1.9rem); margin: 0; }
.tp-next { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: .8rem; }
.tp-next .tp-item { margin: 0; }
@media (max-width: 980px) { .tp-next-wrap { grid-template-columns: 1fr; } .tp-next { grid-template-columns: 1fr; } }

.tp-ferien { margin-top: 1.5rem; display: grid; grid-template-columns: 240px 1fr; gap: 1.5rem; align-items: center; background: var(--c-frei-bg); border: 1px solid #dfe8e9; border-radius: var(--radius); padding: 1.2rem 1.5rem; }
.tp-ferien-head { display: flex; gap: .8rem; align-items: center; }
.tp-ferien-head svg { width: 30px; height: 30px; color: var(--orange-600); flex: none; }
.tp-ferien-head b { display: block; font-family: var(--font-display); }
.tp-ferien-head span { font-size: .88rem; color: var(--muted); }
.tp-ferien ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .5rem; }
.tp-ferien li { background: #fff; border-radius: 12px; padding: .45rem .8rem; border: 1px solid #dfe8e9; line-height: 1.25; }
.tp-ferien li b { display: block; font-size: .88rem; }
.tp-ferien li span { font-size: .82rem; color: var(--muted); }
.tp-ferien li.past { opacity: .45; }
@media (max-width: 980px) { .tp-ferien { grid-template-columns: 1fr; } }

.tp-toolbar { position: sticky; top: 78px; z-index: 30; background: rgba(251, 252, 252, .94); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-bottom: 1px solid var(--line); padding: .8rem 0 .6rem; }
.tp-tools { display: flex; flex-wrap: wrap; gap: .7rem 1rem; align-items: center; }
.tp-filters { display: flex; flex-wrap: wrap; gap: .4rem; }
.tp-filter { display: inline-flex; align-items: center; gap: .45rem; font: inherit; font-size: .9rem; font-weight: 700; padding: .5rem .9rem; border-radius: 999px; border: 1px solid var(--line); background: #fff; color: var(--ink-soft); cursor: pointer; }
.tp-filter:hover { border-color: var(--petrol); }
.tp-filter.active { background: var(--petrol-900); border-color: var(--petrol-900); color: #fff; }
.dot { width: 11px; height: 11px; border-radius: 50%; display: inline-block; flex: none; }
.dot-eltern { background: var(--c-eltern); } .dot-unterricht { background: var(--c-unterricht); } .dot-frei { background: var(--c-frei); }
.tp-search { flex: 1 1 260px; display: flex; align-items: center; gap: .5rem; background: #fff; border: 1px solid var(--line); border-radius: 999px; padding: 0 .9rem; min-width: 0; }
.tp-search svg { width: 18px; height: 18px; color: var(--muted); flex: none; }
.tp-search input { border: 0; outline: 0; font: inherit; font-size: .95rem; padding: .55rem 0; width: 100%; background: transparent; min-width: 0; }
.tp-search:focus-within { border-color: var(--petrol); box-shadow: 0 0 0 3px var(--petrol-100); }
.tp-past { display: inline-flex; align-items: center; gap: .45rem; font-size: .9rem; font-weight: 600; color: var(--ink-soft); cursor: pointer; white-space: nowrap; }
.tp-past input { width: 18px; height: 18px; accent-color: var(--petrol-700); }
.tp-months { display: flex; gap: .35rem; overflow-x: auto; margin-top: .65rem; padding-bottom: .2rem; scrollbar-width: thin; }
.tp-months a { flex: none; text-decoration: none; font-weight: 700; font-size: .85rem; color: var(--petrol-700); background: var(--petrol-50); padding: .35rem .7rem; border-radius: 999px; }
.tp-months a small { font-weight: 600; opacity: .6; margin-left: .15rem; }
.tp-months a:hover, .tp-months a.cur { background: var(--petrol-700); color: #fff; }
.tp-months a.empty { opacity: .35; }
@media (max-width: 1080px) { .tp-toolbar { top: 78px; } }
@media (max-width: 640px) { .tp-filter { font-size: .82rem; padding: .45rem .7rem; } .tp-tools { gap: .55rem; } }

.tp-cal { padding-top: 2.2rem; }
.tp-month { display: grid; grid-template-columns: 200px 1fr; gap: 1.5rem; padding: 1.6rem 0; border-top: 1px solid var(--line); scroll-margin-top: 220px; }
.tp-month:first-of-type { border-top: 0; }
.tp-mhead { position: sticky; top: 230px; align-self: start; }
.tp-mhead h2 { font-size: clamp(1.6rem, 2.6vw, 2.2rem); margin: 0; color: var(--petrol-900); }
.tp-mhead span { font-family: var(--font-display); font-weight: 800; color: var(--orange-600); font-size: 1.1rem; }
.tp-list { list-style: none; margin: 0; padding: 0; display: grid; gap: .6rem; }
.tp-item { display: grid; grid-template-columns: 86px 1fr; gap: 1rem; align-items: start; background: #fff; border: 1px solid var(--line); border-left: 5px solid #cfdcdf; border-radius: var(--radius-sm); padding: .85rem 1rem .85rem .85rem; transition: opacity .2s; }
.tp-item.cat-eltern { border-left-color: var(--c-eltern); background: var(--c-eltern-bg); }
.tp-item.cat-unterricht { border-left-color: var(--c-unterricht); background: var(--c-unterricht-bg); }
.tp-item.cat-frei { border-left-color: var(--c-frei); background: var(--c-frei-bg); }
.tp-item.tp-hl { border: 2px solid var(--orange); border-left-width: 5px; box-shadow: 0 10px 24px -14px rgba(252,131,0,.7); }
.tp-date { text-align: center; background: #fff; border-radius: 12px; padding: .45rem .3rem; border: 1px solid var(--line); line-height: 1.1; }
.tp-date .wd { display: block; font-size: .72rem; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
.tp-date b { display: block; font-family: var(--font-display); font-size: 1.55rem; color: var(--petrol-900); margin: .1rem 0; }
.tp-date.range b { font-size: 1.05rem; line-height: 1.15; margin: .2rem 0; }
.tp-date .mo { display: block; font-size: .72rem; font-weight: 800; text-transform: uppercase; color: var(--petrol-700); }
.cat-eltern .tp-date { border-color: #ffd9ad; } .cat-eltern .tp-date b { color: #a85700; }
.tp-text h3 { font-size: 1.05rem; margin: .1rem 0 .2rem; letter-spacing: 0; }
.tp-when { display: block; font-size: .78rem; font-weight: 700; color: var(--muted); }
.tp-text p { margin: 0; color: var(--ink-soft); font-size: .93rem; }
.tp-badges { display: flex; flex-wrap: wrap; gap: .35rem; margin-top: .45rem; }
.tp-badge { display: inline-flex; align-items: center; gap: .3rem; font-size: .76rem; font-weight: 800; padding: .25rem .6rem; border-radius: 999px; background: var(--petrol-900); color: #fff; }
.tp-badge svg { width: 13px; height: 13px; }
.tp-badge.hl { background: var(--orange); color: var(--ink); }
.tp-item.past { opacity: .5; }
.tp-item.today { box-shadow: 0 0 0 3px var(--orange-100); }
.tp-item.hidden, .tp-month.hidden { display: none; }
.tp-empty { text-align: center; color: var(--muted); padding: 2rem 0; }
@media (max-width: 760px) {
  .tp-month { grid-template-columns: 1fr; gap: .8rem; scroll-margin-top: 250px; }
  .tp-mhead { position: static; display: flex; align-items: baseline; gap: .5rem; }
  .tp-item { grid-template-columns: 70px 1fr; gap: .75rem; padding: .75rem .8rem .75rem .7rem; }
  .tp-date b { font-size: 1.35rem; } .tp-date.range b { font-size: .92rem; }
}

.tp-notes { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; margin-top: 2.5rem; padding: clamp(1.4rem, 3vw, 2.2rem); background: #fff; border: 1px solid var(--line); border-radius: var(--radius); }
.tp-abbr { display: grid; grid-template-columns: auto 1fr; gap: .45rem 1rem; margin: 1rem 0 0; }
.tp-abbr dt { font-weight: 800; color: var(--petrol-700); }
.tp-abbr dd { margin: 0; color: var(--ink-soft); }
@media (max-width: 760px) { .tp-notes { grid-template-columns: 1fr; } }

/* Startseite: Terminliste farbig nach Kategorie */
.event.ev-eltern { border-left: 4px solid var(--c-eltern); }
.event.ev-unterricht { border-left: 4px solid var(--c-unterricht); }
.event.ev-frei { border-left: 4px solid var(--c-frei); }
.event.limit-hidden { display: none; }

@media print {
  .tp-toolbar, .tp-next-wrap, .page-hero .btn-row, .to-top, .tdot { display: none !important; }
  .page-hero { background: none !important; color: #000; padding: 1rem 0; }
  .page-hero h1, .page-hero .lead, .page-hero .eyebrow, .crumbs { color: #000 !important; }
  .page-hero::after, .page-hero::before { display: none; }
  .tp-item.hidden, .tp-month.hidden { display: grid !important; }
  .tp-item.past { opacity: 1; }
  .tp-month { break-inside: avoid-page; grid-template-columns: 140px 1fr; padding: .6rem 0; }
  .tp-item { break-inside: avoid; padding: .35rem .6rem; }
  .tp-mhead { position: static; }
}

/* Kopfzeile mit 9 Menüpunkten */
.main-nav a { white-space: nowrap; }
@media (min-width: 1181px) and (max-width: 1480px) {
  .header-cta { display: none; }
  .main-nav a { padding: .55rem .62rem; font-size: .94rem; }
  .header-inner { gap: 1rem; }
}
@media (min-width: 1481px) and (max-width: 1600px) { .main-nav a { padding: .55rem .62rem; } }
@media (max-width: 760px) {
  .tp-toolbar { position: static; background: transparent; backdrop-filter: none; -webkit-backdrop-filter: none; border-bottom: 0; padding-top: 0; }
  .tp-filters { flex-wrap: nowrap; overflow-x: auto; width: 100%; padding-bottom: .2rem; scrollbar-width: none; }
  .tp-filters::-webkit-scrollbar { display: none; }
  .tp-filter { flex: none; }
  .tp-month { scroll-margin-top: 90px; }
  .tp-ferien ul { gap: .4rem; }
  .tp-ferien li { padding: .35rem .65rem; }
}
.tp-month > *, .tp-list, .tp-item, .tp-text { min-width: 0; }
.tp-text h3, .tp-text p { overflow-wrap: break-word; hyphens: auto; -webkit-hyphens: auto; }
@media (max-width: 360px) { .tp-item { grid-template-columns: 62px 1fr; gap: .6rem; } .tp-text h3 { font-size: .98rem; } }
.event .date.rng b { font-size: 1.05rem; white-space: nowrap; letter-spacing: -.02em; padding-top: .25rem; }
.tdot-ef { display: flex; gap: .6rem; align-items: flex-start; background: var(--orange-50); border: 1px solid var(--orange-100); border-left: 4px solid var(--orange); border-radius: 12px; padding: .6rem .8rem; margin: -.3rem 0 1rem; font-size: .9rem; line-height: 1.45; color: var(--ink-soft); }
.tdot-ef svg { width: 20px; height: 20px; color: var(--orange-600); flex: none; margin-top: .1rem; }
.tdot-ef strong { color: var(--ink); }
.tdot-ef a { font-weight: 700; white-space: nowrap; }
@media (max-width: 760px) { .tdot-ef { font-size: .8rem; padding: .5rem .65rem; margin: -.2rem 0 .8rem; gap: .45rem; } .tdot-ef svg { width: 17px; height: 17px; } }
@media (max-width: 760px) and (max-height: 780px) {
  .tdot-list { display: none; }
  .tdot-media { min-height: 120px; height: 120px; }
}

/* ==========================================================
   Oberstufe: Themenübersicht, Zurück-Links, Themen-Knopf
   ========================================================== */
main section[id] { scroll-margin-top: 84px; }
.toc-sec { padding-top: 0; padding-bottom: clamp(2.5rem, 6vw, 4rem); }
.toc-head { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: .4rem 2rem; margin-bottom: 1.4rem; }
.toc-head h2 { margin: 0; font-size: clamp(1.6rem, 2.8vw, 2.2rem); width: 100%; }
.toc-head .eyebrow { margin-bottom: .4rem; }
.toc-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: .75rem; counter-reset: toc; }
.toc-tile { position: relative; display: flex; align-items: center; gap: .8rem; padding: .9rem 1rem; background: #fff; border: 1px solid var(--line); border-radius: var(--radius-sm); text-decoration: none; color: var(--ink); transition: transform .2s, box-shadow .2s, border-color .2s, background .2s; min-width: 0; }
.toc-tile:hover, .toc-tile:focus-visible { transform: translateY(-2px); box-shadow: var(--shadow); border-color: var(--petrol); background: var(--petrol-50); color: var(--ink); }
.toc-ic { width: 42px; height: 42px; flex: none; border-radius: 12px; display: grid; place-items: center; background: var(--petrol-50); color: var(--petrol-700); }
.toc-tile:nth-child(odd) .toc-ic { background: var(--orange-50); color: var(--orange-600); }
.toc-ic svg { width: 22px; height: 22px; }
.toc-tile b { display: block; font-size: .98rem; line-height: 1.25; }
.toc-tile small { display: block; font-size: .8rem; color: var(--muted); line-height: 1.3; margin-top: .1rem; }
.toc-tile::after { content: "↓"; position: absolute; right: .8rem; top: .55rem; font-size: .85rem; color: var(--muted); opacity: 0; transition: opacity .2s; }
.toc-tile:hover::after { opacity: 1; }
@media (max-width: 1080px) { .toc-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 760px) { .toc-grid { grid-template-columns: 1fr 1fr; gap: .5rem; } .toc-tile { padding: .65rem .7rem; gap: .55rem; } .toc-ic { width: 34px; height: 34px; border-radius: 10px; } .toc-ic svg { width: 18px; height: 18px; } .toc-tile b { font-size: .86rem; } .toc-tile small { display: none; } }
@media (max-width: 340px) { .toc-grid { grid-template-columns: 1fr; } }

.to-toc { display: inline-flex; align-items: center; gap: .4rem; margin-top: clamp(1.6rem, 3vw, 2.4rem); padding: .5rem 1rem; border-radius: 999px; font-size: .9rem; font-weight: 700; text-decoration: none; color: var(--petrol-700); background: rgba(255,255,255,.7); border: 1px solid var(--line); transition: background .2s, color .2s; }
.to-toc svg { width: 16px; height: 16px; }
.to-toc:hover { background: var(--petrol-700); color: #fff; border-color: var(--petrol-700); }
.section--dark .to-toc { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.2); color: #fff; }
.section--dark .to-toc:hover { background: #fff; color: var(--petrol-900); }

.toc-float { position: fixed; left: 1.2rem; bottom: 1.2rem; z-index: 40; display: inline-flex; align-items: center; gap: .45rem; padding: .7rem 1.1rem; border-radius: 999px; background: var(--orange); color: var(--ink); font-weight: 800; font-size: .95rem; text-decoration: none; box-shadow: var(--shadow-lg); opacity: 0; pointer-events: none; transform: translateY(10px); transition: .25s; }
.toc-float svg { width: 18px; height: 18px; }
.toc-float.show { opacity: 1; pointer-events: auto; transform: none; }
.toc-float:hover { background: #ff9426; color: var(--ink); }
@media print { .to-toc, .toc-float, .toc-sec { display: none !important; } }

/* Kurzes Aufleuchten des angesprungenen Themas */
main section.toc-target .section-head h2, main section.toc-target h2:first-of-type { animation: toc-flash 1.6s ease; }
@keyframes toc-flash { 0%, 100% { background: transparent; } 25% { background: var(--orange-100); box-shadow: 0 0 0 8px var(--orange-100); border-radius: 8px; } }
@media (prefers-reduced-motion: reduce) { main section.toc-target h2 { animation: none !important; } }

/* ===== Themenübersicht auf allen Seiten ===== */
.toc-sec.toc-sec--top { padding-top: clamp(2.5rem, 6vw, 4rem); }
.toc-grid[style*="--toc-cols"] { grid-template-columns: repeat(var(--toc-cols), 1fr); }
@media (max-width: 1080px) { .toc-grid[style*="--toc-cols"] { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 760px) { .toc-grid[style*="--toc-cols"] { grid-template-columns: 1fr 1fr; } }
@media (max-width: 340px) { .toc-grid[style*="--toc-cols"] { grid-template-columns: 1fr; } }
main div[id] { scroll-margin-top: 84px; }
main div.toc-target > h2:first-of-type, main div.toc-target > h3:first-of-type { animation: toc-flash 1.6s ease; }
@media (prefers-reduced-motion: reduce) { main div.toc-target > h2, main div.toc-target > h3 { animation: none !important; } }
.toc-tile > span:last-child { min-width: 0; } .toc-tile b { hyphens: manual; overflow-wrap: break-word; }

/* ---------- Aktuelle Mitteilungen (Startseite, gepflegt über aktuelles/verwaltung.php) ---------- */
.news { --rot: #c4302b; --rot-50: #fdeeed; padding: clamp(1.2rem, 3vw, 2rem) 0 .4rem; position: relative; z-index: 1; }
.news-head { display: flex; align-items: baseline; flex-wrap: wrap; gap: .3rem .7rem; margin-bottom: .9rem; }
.news-head h2 { font-size: clamp(1.15rem, 2vw, 1.4rem); margin: 0; letter-spacing: -.01em; }
.news-sub { color: var(--muted); font-size: .95rem; }
.news-live { position: relative; width: 12px; height: 12px; border-radius: 50%; background: var(--orange); align-self: center; flex: none; }
.news-live::after { content: ""; position: absolute; inset: -5px; border-radius: 50%; border: 2px solid var(--orange); opacity: 0; animation: news-pulse 2s ease-out infinite; }
.news.has-dringend .news-live, .news.has-dringend .news-live::after { background: var(--rot); border-color: var(--rot); }
.news.has-dringend .news-live::after { background: none; }
@keyframes news-pulse { 0% { transform: scale(.6); opacity: .9; } 100% { transform: scale(1.5); opacity: 0; } }
.news-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); gap: 1rem; }
.news-item {
  position: relative; display: grid; grid-template-columns: auto 1fr; align-content: start; gap: .2rem 1rem;
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius-sm);
  padding: 1.1rem 1.2rem 1.1rem 1rem; box-shadow: var(--shadow); overflow: hidden;
}
.news-item::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 6px; background: var(--petrol); }
.news-item > :not(.news-ic) { grid-column: 2; }
.news-ic { grid-column: 1; grid-row: 1 / span 4; width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; background: var(--petrol-50); color: var(--petrol-700); margin-left: .3rem; }
.news-ic svg { width: 24px; height: 24px; }
.news-meta { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; font-size: .82rem; color: var(--muted); }
.news-tag { font-size: .7rem; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; padding: .12rem .55rem; border-radius: 999px; background: var(--petrol-700); color: #fff; }
.news-item h3 { font-size: 1.12rem; margin: .15rem 0 0; }
.news-text { margin: .25rem 0 0; color: var(--ink-soft); line-height: 1.55; white-space: pre-line; overflow-wrap: anywhere; }
.news-link { justify-self: start; margin-top: .55rem; font-weight: 700; display: inline-flex; align-items: center; gap: .35rem; }
.news-link svg { width: 18px; height: 18px; }
.news-item--dringend { background: var(--rot-50); border-color: #f2c9c6; }
.news-item--dringend::before { background: var(--rot); }
.news-item--dringend .news-ic { background: var(--rot); color: #fff; }
.news-item--dringend .news-tag { background: var(--rot); }
.news-item--dringend .news-link { color: #9b231f; }
.news-item--wichtig { background: var(--orange-50); border-color: var(--orange-100); }
.news-item--wichtig::before { background: var(--orange); }
.news-item--wichtig .news-ic { background: var(--orange); color: var(--ink); }
.news-item--wichtig .news-tag { background: var(--orange); color: var(--ink); }
.news-more { margin-top: .9rem; font: inherit; font-weight: 700; color: var(--petrol-700); background: none; border: 0; padding: .3rem 0; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 2px; }
.news-item[data-extra][hidden] { display: none; }
.news + .hero { padding-top: clamp(2rem, 4vw, 3.5rem); }
@media (prefers-reduced-motion: reduce) { .news-live::after { animation: none; } }
@media print { .news-live { display: none; } .news-item { box-shadow: none; } }

/* ---------- Arbeiten bei uns (karriere.html) ---------- */
.job-hero h1 { max-width: 16ch; }
.job-hero .btn-row { position: relative; z-index: 1; }
.job-ghost { color: #fff; border-color: rgba(255, 255, 255, .7); }
.job-ghost:hover { background: #fff; color: var(--petrol-900); border-color: #fff; }
.job-gallery { display: grid; grid-template-columns: 2fr 1fr 1fr; grid-template-rows: 230px 230px; gap: 1rem; }
.job-gallery .photo:first-child { grid-row: span 2; }
.job-gallery .photo { height: 100%; }
@media (max-width: 900px) {
  .job-gallery { grid-template-columns: 1fr 1fr; grid-template-rows: none; }
  .job-gallery .photo { aspect-ratio: 4 / 3; height: auto; }
  .job-gallery .photo:first-child { grid-column: span 2; grid-row: auto; aspect-ratio: 16 / 9; }
}
#vertretung .panel--petrol p { color: #d4eef3; }
#vertretung .panel--petrol .btn { display: inline-flex; align-items: center; gap: .5rem; margin-top: .4rem; }
#vertretung .panel--petrol .btn svg { width: 18px; height: 18px; }
#warum .statement { font-size: clamp(1.7rem, 3.2vw, 2.6rem); }
.job-hands { aspect-ratio: 4 / 3; }
.job-contact { display: grid; grid-template-columns: 240px 1fr; gap: clamp(1.5rem, 4vw, 3rem); align-items: center; max-width: 920px; margin: 0 auto; background: #fff; border-radius: calc(var(--radius) + 8px); padding: clamp(1.5rem, 4vw, 2.8rem); box-shadow: var(--shadow-lg); position: relative; overflow: hidden; }
.job-contact::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 6px; background: linear-gradient(var(--orange), var(--petrol)); }
.job-contact-photo { aspect-ratio: 3 / 4; border-radius: var(--radius); overflow: hidden; border: 5px solid var(--orange-100); box-shadow: var(--shadow); }
.job-contact-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.job-contact h3 { font-size: clamp(1.5rem, 2.6vw, 2rem); margin: .2rem 0 .1rem; }
.job-contact .role { color: var(--orange-600); font-weight: 700; margin-bottom: 1rem; }
.job-contact .btn { display: inline-flex; align-items: center; gap: .55rem; }
.job-contact .btn svg { width: 20px; height: 20px; }
@media (max-width: 680px) { .job-contact { grid-template-columns: 1fr; text-align: center; } .job-contact-photo { width: 170px; margin: 0 auto; } .job-contact .btn-row { justify-content: center; } .job-contact .eyebrow { justify-content: center; } }

/* ---------- Suche (Startseite) ---------- */
.suche { position: relative; margin-top: 2rem; max-width: 560px; z-index: 20; }
.suche-label { display: block; font-weight: 700; font-size: .95rem; color: var(--ink); margin-bottom: .5rem; }
.suche-feld { display: flex; align-items: center; gap: .5rem; background: #fff; border: 2px solid var(--line); border-radius: 999px; padding: .35rem .35rem .35rem 1.1rem; box-shadow: var(--shadow); transition: border-color .2s, box-shadow .2s; }
.suche-feld:focus-within { border-color: var(--petrol); box-shadow: 0 0 0 4px rgba(36, 151, 174, .18), var(--shadow); }
.suche-feld > svg { width: 22px; height: 22px; color: var(--petrol-700); flex: none; }
.suche-feld input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; font: inherit; font-size: 1.05rem; color: var(--ink); padding: .6rem 0; }
.suche-feld input::-webkit-search-cancel-button { cursor: pointer; }
.suche-los { flex: none; border: 0; border-radius: 999px; background: var(--petrol-700); color: #fff; font: inherit; font-weight: 700; padding: .7rem 1.2rem; cursor: pointer; }
.suche-los:hover { background: var(--petrol-900); }
.suche-chips { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; margin-top: .8rem; font-size: .88rem; color: var(--muted); }
.suche-chips button { font: inherit; font-weight: 600; font-size: .86rem; color: var(--petrol-700); background: var(--petrol-50); border: 1px solid var(--petrol-100); border-radius: 999px; padding: .3rem .75rem; cursor: pointer; }
.suche-chips button:hover { background: var(--petrol-100); }
.suche-ergebnisse { position: absolute; left: 0; right: 0; margin-top: .5rem; background: #fff; border: 1px solid var(--line); border-radius: 18px; box-shadow: var(--shadow-lg); max-height: min(70vh, 520px); overflow: auto; padding: .5rem; }
.suche-ergebnisse ul { list-style: none; margin: 0; padding: 0; }
.suche-anzahl { margin: .3rem .7rem .4rem; font-size: .8rem; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; }
.suche-treffer { display: flex; gap: .8rem; align-items: flex-start; padding: .7rem; border-radius: 12px; text-decoration: none; color: var(--ink); }
.suche-treffer:hover, .suche-treffer.aktiv, .suche-treffer:focus-visible { background: var(--petrol-50); color: var(--ink); outline: 0; }
.suche-ic { width: 36px; height: 36px; flex: none; border-radius: 10px; display: grid; place-items: center; background: var(--petrol-50); color: var(--petrol-700); }
.suche-ic svg { width: 19px; height: 19px; }
.suche-ic.ic-tipp, .suche-ic.ic-termin { background: var(--orange-50); color: var(--orange-600); }
.suche-txt { min-width: 0; }
.suche-ort { display: block; font-size: .75rem; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .05em; }
.suche-txt b { display: block; font-size: 1rem; margin: .1rem 0; }
.suche-aus { display: block; font-size: .88rem; color: var(--ink-soft); line-height: 1.45; }
.suche-aus mark { background: var(--orange-100); color: inherit; border-radius: 3px; padding: 0 .1em; }
.suche-mehr { display: block; width: calc(100% - 1rem); margin: .3rem .5rem .5rem; padding: .7rem; border: 1px dashed var(--petrol-100); border-radius: 12px; background: transparent; font: inherit; font-weight: 700; color: var(--petrol-700); cursor: pointer; }
.suche-mehr:hover { background: var(--petrol-50); }
.suche-leer { margin: .6rem .8rem; color: var(--ink-soft); }
@media (max-width: 600px) {
  .suche-feld { padding-left: .85rem; }
  .suche-los { padding: .65rem .9rem; }
  .suche-ergebnisse { max-height: 65vh; }
}

/* ---------- Blog ---------- */
.b-hero h1 { max-width: 26ch; font-size: clamp(1.9rem, 4.2vw, 3.1rem); }
.b-meta { font-size: .85rem; font-weight: 700; color: var(--muted); margin: 0 0 .5rem; letter-spacing: .01em; }
.b-meta--hero { color: var(--orange-100); font-size: .95rem; }
.b-meta--hero a { color: #fff; text-decoration: none; }
.b-meta--hero a:hover { color: #fff; text-decoration: underline; }

.b-filter { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 2rem; scroll-margin-top: 110px; }
.b-chip {
  font: inherit; font-weight: 700; font-size: .9rem; cursor: pointer; border: 1px solid var(--line); background: #fff; color: var(--ink-soft);
  padding: .5rem .95rem; border-radius: 999px; display: inline-flex; align-items: center; gap: .45rem; transition: background .15s, color .15s, border-color .15s;
}
.b-chip span { font-size: .75rem; background: var(--petrol-50); color: var(--petrol-700); border-radius: 999px; padding: .1rem .5rem; }
.b-chip:hover { border-color: var(--petrol); color: var(--petrol-700); }
.b-chip[aria-pressed="true"] { background: var(--petrol-700); border-color: var(--petrol-700); color: #fff; }
.b-chip[aria-pressed="true"] span { background: rgba(255, 255, 255, .2); color: #fff; }
.b-filter-titel { font-size: clamp(1.4rem, 2.4vw, 1.9rem); margin-bottom: 1.4rem; }

.b-raster { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1rem, 2vw, 1.6rem); }
.b-karte {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; display: flex; flex-direction: column;
  box-shadow: var(--shadow); transition: transform .2s, box-shadow .2s;
}
.b-karte[hidden] { display: none; }
.b-karte:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); }
.b-karte-bild { display: block; aspect-ratio: 16 / 10; overflow: hidden; background: var(--petrol-50); }
.b-karte-bild img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s; }
.b-karte:hover .b-karte-bild img { transform: scale(1.04); }
.b-karte-ohne { display: grid; place-items: center; width: 100%; height: 100%; background: linear-gradient(135deg, var(--petrol-50), var(--orange-50)); }
.b-karte-ohne img { width: 46% !important; height: auto !important; object-fit: contain !important; opacity: .55; }
.b-karte-txt { padding: 1.2rem 1.3rem 1.3rem; display: flex; flex-direction: column; flex: 1; }
.b-karte h3 { font-size: 1.12rem; margin-bottom: .55rem; }
.b-karte h3 a { color: var(--ink); text-decoration: none; }
.b-karte h3 a:hover { color: var(--petrol-700); }
.b-teaser { color: var(--ink-soft); font-size: .95rem; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; margin-bottom: .9rem; }
.b-weiter { margin-top: auto; font-weight: 700; text-decoration: none; display: inline-flex; align-items: center; gap: .35rem; }
.b-weiter svg { width: 18px; height: 18px; transition: transform .2s; }
.b-karte:hover .b-weiter svg { transform: translateX(3px); }
.b-karte--gross { grid-column: 1 / -1; flex-direction: row; }
.b-karte--gross .b-karte-bild { flex: 0 0 56%; aspect-ratio: auto; min-height: 340px; }
.b-karte--gross .b-karte-txt { padding: clamp(1.4rem, 3vw, 2.4rem); justify-content: center; }
.b-karte--gross h3 { font-size: clamp(1.4rem, 2.4vw, 2rem); }
.b-karte--gross .b-teaser { -webkit-line-clamp: 5; font-size: 1.02rem; }
.b-mehr-zeile { text-align: center; margin: 2.2rem 0 0; }

/* Beitrag */
.b-artikel-sec { padding-top: clamp(2rem, 5vw, 3.5rem); }
.b-artikel { max-width: 780px; margin: 0 auto; font-size: 1.06rem; line-height: 1.7; color: var(--ink); overflow-wrap: break-word; }
.b-artikel > * + * { margin-top: 1.1rem; }
.b-artikel p { margin: 0 0 1rem; }
.b-artikel h2 { font-size: clamp(1.35rem, 2.4vw, 1.75rem); margin: 2rem 0 .8rem; }
.b-artikel h3, .b-artikel h4 { font-size: 1.2rem; margin: 1.6rem 0 .6rem; }
.b-artikel ul, .b-artikel ol { padding-left: 1.3rem; margin: 0 0 1rem; }
.b-artikel li { margin-bottom: .35rem; }
.b-artikel blockquote { margin: 1.4rem 0; padding: .4rem 0 .4rem 1.2rem; border-left: 4px solid var(--orange); color: var(--ink-soft); font-style: italic; }
.b-artikel table { border-collapse: collapse; width: 100%; font-size: .95rem; display: block; overflow-x: auto; }
.b-artikel td, .b-artikel th { border: 1px solid var(--line); padding: .45rem .6rem; vertical-align: top; }
.b-artikel hr { border: 0; border-top: 2px solid var(--line); margin: 2rem 0; }
.b-fig { margin: 1.6rem 0; }
.b-fig img { width: auto; max-width: 100%; height: auto; border-radius: var(--radius-sm); display: block; margin: 0 auto; box-shadow: var(--shadow); }
.b-fig figcaption { font-size: .88rem; color: var(--muted); text-align: center; margin-top: .55rem; }
.b-titelbild img { max-height: 70vh; width: auto; }
.b-mit-bild { display: flow-root; }
.b-fig--seite { float: left; width: min(42%, 340px); margin: .3rem 1.6rem 1rem 0; }
.b-galerie { display: grid; grid-template-columns: repeat(3, 1fr); gap: .6rem; margin: 1.6rem 0; }
.b-galerie--2 { grid-template-columns: repeat(2, 1fr); }
.b-galerie--1 { grid-template-columns: 1fr; }
.b-galerie a { display: block; aspect-ratio: 4 / 3; overflow: hidden; border-radius: 12px; background: var(--petrol-50); }
.b-galerie--1 a { aspect-ratio: auto; }
.b-galerie img { width: 100%; height: 100%; object-fit: cover; transition: transform .35s; }
.b-galerie a:hover img { transform: scale(1.05); }
.b-zoom { cursor: zoom-in; }
.b-spalten { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1.4rem; align-items: start; }
.b-spalten .b-fig { margin-top: 0; }
.b-download { background: var(--petrol-50); border-radius: var(--radius-sm); padding: 1.2rem 1.3rem; margin: 1.6rem 0; }
.b-download small { font-weight: 400; }
.b-video { margin: 1.4rem 0; }
.b-tags { margin-top: 2rem !important; font-size: .9rem; color: var(--muted); }
.b-tags span { display: inline-block; background: var(--petrol-50); color: var(--petrol-700); border-radius: 999px; padding: .15rem .7rem; margin: .15rem .2rem; font-weight: 700; }
.b-blaettern { max-width: 780px; margin: 3rem auto 0; display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.b-blaettern a { display: block; border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 1rem 1.2rem; text-decoration: none; color: var(--ink); font-weight: 700; background: #fff; transition: border-color .15s; }
.b-blaettern a:hover { border-color: var(--petrol); color: var(--petrol-700); }
.b-blaettern small { display: flex; align-items: center; gap: .3rem; font-size: .8rem; color: var(--muted); font-weight: 700; margin-bottom: .3rem; }
.b-blaettern small svg { width: 16px; height: 16px; }
.b-next { text-align: right; }
.b-next small { justify-content: flex-end; }
.b-zurueck { max-width: 780px; margin: 1.6rem auto 0; text-align: center; }
.b-zurueck .btn svg { width: 18px; height: 18px; }

.b-lightbox { position: fixed; inset: 0; z-index: 200; background: rgba(6, 26, 32, .92); display: flex; align-items: center; justify-content: center; padding: 3.5rem 4rem; }
.b-lightbox[hidden] { display: none; }
.b-lightbox figure { margin: 0; max-width: 100%; max-height: 100%; display: flex; flex-direction: column; align-items: center; }
.b-lightbox img { max-width: 100%; max-height: calc(100vh - 9rem); border-radius: 10px; object-fit: contain; }
.b-lightbox figcaption { color: #d9eef2; margin-top: .8rem; text-align: center; font-size: .95rem; }
.b-lightbox button { position: absolute; border: 0; background: rgba(255, 255, 255, .12); color: #fff; font-size: 2rem; line-height: 1; width: 52px; height: 52px; border-radius: 50%; cursor: pointer; }
.b-lightbox button:hover { background: var(--orange); }
.b-lb-zu { top: 1rem; right: 1rem; }
.b-lb-zurueck { left: 1rem; top: 50%; transform: translateY(-50%); }
.b-lb-vor { right: 1rem; top: 50%; transform: translateY(-50%); }
.b-lightbox button[hidden] { display: none; }

@media (max-width: 960px) {
  .b-raster { grid-template-columns: repeat(2, 1fr); }
  .b-karte--gross { flex-direction: column; }
  .b-karte--gross .b-karte-bild { flex: none; min-height: 0; aspect-ratio: 16 / 9; }
}
@media (max-width: 620px) {
  .b-raster { grid-template-columns: 1fr; }
  .b-filter { flex-wrap: nowrap; overflow-x: auto; margin-inline: -1.25rem; padding: 0 1.25rem .4rem; scrollbar-width: none; }
  .b-filter::-webkit-scrollbar { display: none; }
  .b-chip { flex: none; }
  .b-fig--seite { float: none; width: auto; margin: 1rem 0; }
  .b-galerie { grid-template-columns: repeat(2, 1fr); }
  .b-blaettern { grid-template-columns: 1fr; }
  .b-next { text-align: left; }
  .b-next small { justify-content: flex-start; }
  .b-artikel { font-size: 1rem; }
  .b-lightbox { padding: 3.5rem .5rem; }
  .b-lb-zurueck, .b-lb-vor { top: auto; bottom: 1rem; transform: none; }
}

/* Kopfzeile mit 11 Menüpunkten (inkl. Blog): auf schmaleren Bildschirmen enger setzen */
@media (min-width: 1181px) and (max-width: 1340px) {
  .main-nav a { padding: .5rem .48rem; font-size: .9rem; }
  .header-inner { gap: .7rem; }
  .brand span { display: none; }
}

/* Vierte Karte am Globus: Schulbücherei */
.float-card.fc4 { top: -2%; right: 2%; animation-delay: -6s; }
@media (max-width: 900px) { .float-card.fc4 { right: 0; } }
@media (max-width: 900px) {
  .hero-visual .float-card { max-width: 210px; }
  .hero-visual .float-card.fc1 { top: 0; left: 0; right: auto; bottom: auto; }
  .hero-visual .float-card.fc4 { top: 25%; right: 0; left: auto; bottom: auto; }
  .hero-visual .float-card.fc3 { top: 50%; left: 0; right: auto; bottom: auto; }
  .hero-visual .float-card.fc2 { top: 75%; right: 0; left: auto; bottom: auto; }
}

/* Karten am Globus sind Links */
a.float-card { text-decoration: none; color: inherit; transition: box-shadow .2s, outline-color .2s; outline: 2px solid transparent; }
a.float-card:hover { outline-color: var(--orange); box-shadow: 0 30px 60px -20px rgba(11, 60, 72, .45); }
a.float-card:hover strong { color: var(--petrol-700); }
a.float-card strong::after { content: " →"; color: var(--orange); }

/* ---------- Cookie-Hinweis ---------- */
.cookie-box { position: fixed; left: 1rem; right: 1rem; bottom: 1rem; z-index: 300; display: flex; justify-content: center; pointer-events: none; }
.cookie-box[hidden] { display: none; }
.cookie-inner {
  pointer-events: auto; width: min(760px, 100%); background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: 0 30px 70px -20px rgba(11, 60, 72, .45); padding: 1.4rem 1.5rem 1.3rem; max-height: calc(100vh - 2rem); overflow: auto;
}
.cookie-inner h2 { font-size: 1.25rem; margin-bottom: .5rem; }
.cookie-inner p { color: var(--ink-soft); font-size: .95rem; margin: 0 0 1rem; }
.cookie-knoepfe { display: flex; flex-wrap: wrap; gap: .6rem; }
.cookie-knoepfe .btn { padding: .7rem 1.2rem; font-size: .95rem; }
.cookie-knoepfe .btn[hidden] { display: none; }
.cookie-einst { display: grid; gap: .6rem; margin: 0 0 1rem; }
.cookie-einst[hidden] { display: none; }
.cookie-opt { display: flex; gap: .7rem; align-items: flex-start; background: var(--petrol-50); border-radius: var(--radius-sm); padding: .8rem 1rem; font-size: .92rem; color: var(--ink-soft); cursor: pointer; }
.cookie-opt input { width: 20px; height: 20px; margin-top: .1rem; accent-color: var(--petrol-700); flex: none; }
.cookie-opt b { color: var(--ink); }
.cookie-link { background: none; border: 0; padding: 0; font: inherit; color: inherit; cursor: pointer; text-decoration: underline; }
.extern-inhalt { position: relative; aspect-ratio: 16 / 9; border-radius: var(--radius-sm); overflow: hidden; background: var(--petrol-50); margin: 1.4rem 0; }
.extern-inhalt iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.extern-sperre { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; padding: 1.5rem; gap: .4rem; }
.extern-sperre p { max-width: 44ch; color: var(--ink-soft); margin: 0 auto .6rem; }
@media (max-width: 620px) {
  .cookie-box { left: .5rem; right: .5rem; bottom: .5rem; }
  .cookie-inner { padding: 1.1rem 1.1rem 1rem; }
  .cookie-knoepfe .btn { flex: 1 1 100%; justify-content: center; }
}

/* Förderverein: Ansprechpartnerin */
.fv-kontakt { display: flex; gap: .8rem; align-items: center; background: #fff; border: 1px solid var(--line); border-radius: var(--radius-sm); padding: .9rem 1.1rem; margin-bottom: 0; }
.fv-kontakt svg { width: 26px; height: 26px; color: var(--orange); flex: none; }
.fv-kontakt a { font-weight: 700; overflow-wrap: anywhere; }

/* Oberstufe: Illustration Facharbeit */
.fa-bild { display: block; width: 100%; height: auto; border-radius: var(--radius); box-shadow: var(--shadow-lg); }

/* Erasmus+-Europakarte (lernen.html#erasmus, Daten in js/erasmus-karte.js) */
.eu-wrap { margin-top: clamp(2.5rem, 5vw, 4rem); }
.eu-kopf h3 { font-size: clamp(1.35rem, 2.6vw, 1.8rem); margin-bottom: .4rem; }
.eu-kopf p { color: #b8dbe2; margin: 0; max-width: 62ch; }
.eu-zahlen { display: flex; flex-wrap: wrap; gap: .5rem; list-style: none; margin: 1rem 0 0; padding: 0; }
.eu-zahlen li { border: 1px solid rgba(255,255,255,.2); background: rgba(255,255,255,.06); border-radius: 99px; padding: .3rem .9rem; font-size: .92rem; color: #d9eef2; }
.eu-zahlen b { color: #fff; margin-right: .25rem; font-variant-numeric: tabular-nums; }
.eu-buehne { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: clamp(1.2rem, 3vw, 2rem); margin-top: 1.6rem; align-items: start; }
@media (max-width: 900px) { .eu-buehne { grid-template-columns: 1fr; } }
.eu-karte { background: #f3f9fa; border-radius: var(--radius); overflow: hidden; position: relative; }
.eu-karte svg { display: block; width: 100%; height: auto; }
.eu-route { fill: none; stroke: var(--petrol); stroke-width: 2; stroke-dasharray: 2 7; stroke-linecap: round; opacity: .55; }
.eu-route.an { stroke: var(--orange); opacity: 1; stroke-width: 3; stroke-dasharray: 3 8; animation: eu-fliegen 1.2s linear infinite; }
@keyframes eu-fliegen { to { stroke-dashoffset: -22; } }
.eu-punkt { cursor: pointer; outline: none; }
.eu-punkt .ring { fill: var(--orange); opacity: 0; transform-box: fill-box; transform-origin: center; }
.eu-punkt.an .ring { animation: eu-puls 1.8s ease-out infinite; }
@keyframes eu-puls { from { transform: scale(.6); opacity: .45; } to { transform: scale(1.9); opacity: 0; } }
.eu-punkt .kern { fill: var(--petrol-600); stroke: #fff; stroke-width: 3.5; transition: fill .2s; }
.eu-punkt.heim .kern { fill: var(--petrol-900); }
.eu-punkt.an .kern, .eu-punkt:hover .kern { fill: var(--orange); }
.eu-punkt:focus-visible .kern { stroke: var(--ink); stroke-width: 4; }
.eu-punkt text { font-family: var(--font-display); font-size: 21px; font-weight: 700; fill: var(--ink); paint-order: stroke; stroke: #f3f9fa; stroke-width: 6px; stroke-linejoin: round; pointer-events: none; }
.eu-punkt.heim text { font-size: 24px; }
@media (max-width: 600px) { .eu-punkt text { display: none; } .eu-punkt.heim text { display: block; font-size: 30px; } }
.eu-legende { position: absolute; left: 14px; bottom: 12px; display: flex; flex-wrap: wrap; gap: .4rem .9rem; font-size: .78rem; color: var(--ink-soft); background: rgba(255,255,255,.85); padding: .35rem .7rem; border-radius: 10px; }
.eu-legende span { display: inline-flex; align-items: center; gap: .35rem; }
.eu-legende i { width: 12px; height: 12px; border-radius: 3px; }
.eu-legende i.de { background: var(--orange-100); }
.eu-legende i.p { background: var(--petrol-100); }
@media (max-width: 600px) { .eu-legende { position: static; border-radius: 0; background: #fff; } }
.eu-orte { display: flex; flex-wrap: wrap; gap: .45rem; margin-top: 1rem; }
.eu-chip { font: inherit; font-size: .88rem; font-weight: 600; color: #fff; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.22); border-radius: 99px; padding: .4rem .85rem; cursor: pointer; }
.eu-chip small { color: #b8dbe2; font-weight: 500; margin-left: .3rem; }
.eu-chip:hover { background: rgba(255,255,255,.16); }
.eu-chip[aria-pressed="true"] { background: var(--orange); border-color: var(--orange); }
.eu-chip[aria-pressed="true"] small { color: #fff4e8; }
.eu-chip:focus-visible { outline: 3px solid var(--orange-100); outline-offset: 2px; }
.eu-steckbrief { background: #fff; color: var(--ink); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-lg); }
.eu-steckbrief figure { margin: 0; position: relative; }
.eu-steckbrief img { display: block; width: 100%; aspect-ratio: 16 / 10; object-fit: cover; background: var(--petrol-50); }
.eu-steckbrief figcaption { position: absolute; left: 12px; bottom: 10px; font-size: .78rem; color: #fff; background: rgba(11, 60, 72, .72); padding: .2rem .6rem; border-radius: 8px; }
.eu-sb-text { padding: 1.3rem 1.4rem 1.5rem; display: grid; gap: .8rem; }
.eu-land { font-size: .76rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--orange-600); }
.eu-steckbrief h4 { font-family: var(--font-display); font-size: 1.45rem; line-height: 1.15; margin: 0; color: var(--ink); }
.eu-schule { margin: -.4rem 0 0; color: var(--petrol-700); font-weight: 600; }
.eu-text { margin: 0; color: var(--ink-soft); }
.eu-termine { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.eu-termine li { border-bottom: 1px solid var(--line); }
.eu-termine a { display: grid; grid-template-columns: 5.6rem minmax(0, 1fr) auto; gap: .7rem; align-items: baseline; padding: .65rem 0; color: var(--ink); text-decoration: none; }
.eu-termine a:hover b, .eu-termine a:focus-visible b { color: var(--petrol-700); text-decoration: underline; }
.eu-termine time { font-size: .84rem; font-weight: 700; color: var(--petrol-700); font-variant-numeric: tabular-nums; }
.eu-termine b { font-weight: 600; }
.eu-termine span { color: var(--orange-600); font-size: .84rem; font-weight: 700; white-space: nowrap; }
@media (max-width: 480px) { .eu-termine a { grid-template-columns: minmax(0, 1fr) auto; gap: .1rem .7rem; } .eu-termine time { grid-column: 1 / -1; } }
@media (prefers-reduced-motion: reduce) { .eu-route.an, .eu-punkt.an .ring { animation: none; } }

/* Fünfte Karte am Globus: Erasmus+ (führt zur Europakarte) */
.float-card.fc5 { bottom: -3%; right: -2%; animation-delay: -3s; }
@media (max-width: 900px) {
  /* fünf Karten abwechselnd links/rechts untereinander; die letzte ragt unter die Kugel */
  .hero-visual { margin-bottom: 7rem; }
  .hero-visual .float-card.fc1 { top: 0; }
  .hero-visual .float-card.fc4 { top: 86px; }
  .hero-visual .float-card.fc3 { top: 172px; }
  .hero-visual .float-card.fc2 { top: 272px; }
  .hero-visual .float-card.fc5 { top: 394px; left: 0; right: auto; bottom: auto; }
}

/* Ganztag: Wochenplan „Offene Angebote“ (ganztag.html#angebote, js/angebote.js) */
.oa-kopf { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 1.6rem; }
.oa-zeit { display: inline-flex; align-items: center; gap: .7rem; margin: 0; background: var(--petrol-900); color: #d9eef2; padding: .65rem 1.1rem; border-radius: 99px; font-size: .98rem; }
.oa-zeit svg { width: 22px; height: 22px; flex: none; color: var(--orange); }
.oa-zeit b { color: #fff; }
.oa-legende { display: flex; flex-wrap: wrap; gap: .4rem 1rem; list-style: none; margin: 0; padding: 0; font-size: .86rem; color: var(--ink-soft); }
.oa-legende li { display: inline-flex; align-items: center; gap: .4rem; }
.oa-legende i { width: 12px; height: 12px; border-radius: 4px; background: var(--oa-farbe); }
.art-b { --oa-farbe: var(--orange); --oa-hell: var(--orange-50); --oa-dunkel: var(--orange-600); }
.art-k { --oa-farbe: var(--petrol); --oa-hell: var(--petrol-50); --oa-dunkel: var(--petrol-700); }
.art-t { --oa-farbe: #7a6bc4; --oa-hell: #f1effb; --oa-dunkel: #5a4ba8; }
.oa-liste { list-style: none; margin: 0; padding: 0; display: grid; gap: .6rem; }
.oa-item { display: flex; gap: .8rem; align-items: flex-start; background: #fff; border: 1px solid var(--line); border-left: 4px solid var(--oa-farbe); border-radius: var(--radius-sm); padding: .8rem .9rem; }
.oa-ic { width: 38px; height: 38px; flex: none; border-radius: 11px; display: grid; place-items: center; background: var(--oa-hell); color: var(--oa-dunkel); }
.oa-ic svg { width: 21px; height: 21px; }
.oa-item > div { min-width: 0; }
.oa-item h4 { font-size: 1rem; margin: 0 0 .15rem; line-height: 1.25; letter-spacing: -.01em; }
.oa-tag { display: inline-block; font-size: .74rem; font-weight: 700; color: var(--oa-dunkel); background: var(--oa-hell); border-radius: 99px; padding: .05rem .55rem; margin: .1rem 0 .25rem; }
.oa-ort, .oa-wer { margin: 0; font-size: .86rem; color: var(--ink-soft); line-height: 1.4; }
.oa-ort { display: flex; gap: .3rem; align-items: flex-start; }
.oa-ort svg { width: 14px; height: 14px; flex: none; margin-top: .15rem; color: var(--muted); }
.oa-wer { color: var(--muted); padding-left: 1.05rem; }
.oa-immer { background: #fff; border-radius: var(--radius); padding: clamp(1rem, 2.5vw, 1.4rem); box-shadow: var(--shadow); margin-bottom: 1.6rem; }
.oa-immer h3 { font-size: 1.1rem; margin: 0 0 .9rem; }
.oa-immer .oa-liste { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.oa-immer .oa-item { background: var(--bg); }
.oa-tabs { display: none; }
.oa-tage { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.2rem; align-items: start; }
.oa-tag-spalte h3 { display: flex; align-items: baseline; justify-content: space-between; gap: .5rem; font-size: 1.15rem; margin: 0 0 .8rem; padding: .7rem 1rem; border-radius: var(--radius-sm); color: #fff; background: var(--petrol-700); }
.oa-tag-spalte.tag-mi h3 { background: var(--orange-600); }
.oa-tag-spalte.tag-do h3 { background: var(--petrol-900); }
.oa-tag-spalte h3 small { font-size: .78rem; font-weight: 600; opacity: .85; }
.oa-fuss { margin: 1.2rem 0 0; font-size: .86rem; color: var(--muted); }
.oa-fuss a { display: inline-flex; align-items: center; gap: .3rem; font-weight: 700; color: var(--petrol-700); }
.oa-fuss svg { width: 16px; height: 16px; }
@media (max-width: 1000px) {
  .oa-immer .oa-liste { grid-template-columns: 1fr; }
  .oa-tabs { display: flex; gap: .4rem; margin-bottom: .9rem; }
  .oa-tabs button { flex: 1; font: inherit; font-weight: 700; font-size: .95rem; padding: .65rem .5rem; border-radius: 12px; border: 1px solid var(--line); background: #fff; color: var(--ink); cursor: pointer; }
  .oa-tabs button[aria-selected="true"] { background: var(--petrol-900); border-color: var(--petrol-900); color: #fff; }
  .oa-tabs button:focus-visible { outline: 3px solid var(--orange); outline-offset: 2px; }
  .oa-tage { grid-template-columns: 1fr; }
  .oa-tag-spalte { display: none; }
  .oa-tag-spalte.aktiv { display: block; }
  .oa-tag-spalte h3 { display: none; }
}

/* ---------- Hauptnavigation: Untermenüs (js/main.js, UNTER) ---------- */
.main-nav li.hat-sub { position: relative; }
.main-nav .nav-haupt { display: flex; align-items: center; gap: .25rem; }
.main-nav .nav-pfeil { width: 12px; height: 12px; flex: none; opacity: .6; transition: transform .2s; }
.main-nav .sub-offen > .nav-haupt { background: var(--petrol-50); color: var(--petrol-700); }
.main-nav .sub-offen > .nav-haupt .nav-pfeil { transform: rotate(180deg); opacity: 1; }
.main-nav ul.nav-sub { display: none; list-style: none; margin: 0; padding: 0; }
.main-nav .sub-offen > ul.nav-sub { display: block; }
.main-nav .nav-sub a { white-space: normal; font-weight: 500; }
.main-nav .nav-sub-alle a { font-weight: 700; color: var(--petrol-700); }
@media (min-width: 1181px) {
  .main-nav ul.nav-sub {
    position: absolute; top: calc(100% + .45rem); left: 50%; transform: translateX(-50%);
    min-width: 250px; max-width: 320px; padding: .45rem; background: #fff;
    border: 1px solid var(--line); border-radius: 18px; box-shadow: var(--shadow-lg); z-index: 60;
  }
  .main-nav ul.nav-sub::before { content: ""; position: absolute; top: -.5rem; left: 0; right: 0; height: .5rem; }
  .main-nav .nav-sub a { padding: .55rem .8rem; border-radius: 12px; font-size: .93rem; line-height: 1.3; }
  .main-nav .nav-sub-alle { border-bottom: 1px solid var(--line); margin-bottom: .3rem; padding-bottom: .3rem; }
  .main-nav li.hat-sub:last-child ul.nav-sub, .main-nav li.hat-sub:nth-last-child(-n+4) ul.nav-sub { left: auto; right: 0; transform: none; }
}
@media (min-width: 1181px) {
  .main-nav .nav-pfeil { width: 9px; height: 9px; }
  .main-nav .nav-haupt { gap: .15rem; }
}
/* Mit den Pfeilen wird die Leiste breiter: Knopf „Tag der offenen Tür“ erst ab 1900 px, Abstände etwas enger */
@media (min-width: 1181px) and (max-width: 1900px) { .header-cta { display: none; } }
@media (min-width: 1341px) and (max-width: 1480px) { .main-nav a { padding: .55rem .55rem; } }
@media (min-width: 1601px) { .main-nav a { padding: .55rem .7rem; } }
@media (max-width: 1180px) {
  .main-nav .nav-haupt { justify-content: space-between; }
  .main-nav .nav-pfeil { width: 18px; height: 18px; }
  .main-nav ul.nav-sub { margin: .15rem 0 .5rem .9rem; padding-left: .7rem; border-left: 3px solid var(--petrol-100); }
  .main-nav .nav-sub a { padding: .6rem .9rem; font-size: 1rem; }
}

/* Blog: kleine Fotos (unter 600 px) in Originalgröße statt aufgeblasen (blog_nachtrag.py) */
.b-karte-bild--klein { position: relative; }
.b-karte-hg { position: absolute; inset: -24px; background: center / cover no-repeat; filter: blur(22px) saturate(1.15); opacity: .6; }
.b-karte-bild--klein img { position: absolute; inset: 0; margin: auto; width: auto; height: auto; max-width: min(300px, 88%); max-height: 88%; aspect-ratio: auto; object-fit: contain; border-radius: 10px; box-shadow: 0 6px 22px rgba(0,0,0,.18); }

/* ==========================================================
   Anmelde-Banner Terminland (Startseite + Anmeldung #termin-buchen)
   ========================================================== */
.tl-sec { padding-top: clamp(1.5rem, 4vw, 3rem); }
.page-hero + .tl-sec { padding-top: clamp(2rem, 5vw, 3.5rem); }
.tl-karte { background: #fff; border-radius: var(--radius); box-shadow: var(--shadow-lg); overflow: hidden; border: 1px solid var(--line); }
.tl-bild { display: block; line-height: 0; background: #fff; }
.tl-bild img { width: 100%; height: auto; display: block; transition: transform .5s ease; }
.tl-bild:hover img { transform: scale(1.015); }
.tl-text { display: grid; grid-template-columns: 1.25fr 1fr; gap: clamp(1.25rem, 3vw, 2.5rem); padding: clamp(1.25rem, 3vw, 2.25rem) clamp(1.25rem, 3.5vw, 2.75rem); border-top: 4px solid var(--orange); background: linear-gradient(180deg, #fff, var(--petrol-50)); }
.tl-text h2 { margin: 0 0 .6rem; font-size: clamp(1.45rem, 2.6vw, 2rem); }
.tl-text p { margin: 0 0 1rem; color: var(--ink-soft); }
.tl-text .btn-row { margin-top: .25rem; }
.tl-text .btn svg { width: 20px; height: 20px; flex: none; }
.tl-klein { font-size: .85rem; color: var(--muted) !important; margin: .6rem 0 0 !important; }
.tl-hinweise { list-style: none; margin: 0; padding: 1rem 1.15rem; background: #fff; border: 1px solid var(--petrol-100); border-radius: var(--radius-sm); align-self: start; }
.tl-hinweise li { position: relative; padding-left: 1.6rem; margin: .45rem 0; color: var(--ink-soft); font-size: .97rem; }
.tl-hinweise li::before { content: ""; position: absolute; left: .2rem; top: .55em; width: .6rem; height: .6rem; border-radius: 50%; background: var(--petrol); }
.tl-hinweise li:first-child::before { background: var(--orange); }
.tl-hinweise b { color: var(--petrol-900); }
@media (max-width: 860px) { .tl-text { grid-template-columns: 1fr; } }
@media (max-width: 560px) {
  .tl-karte { border-radius: var(--radius-sm); }
  .tl-text .btn-row .btn { flex: 1 1 100%; justify-content: center; }
}

/* Kompakte Variante (Startseite) + pulsierender Hinweis */
.tl-sec--kompakt { padding-top: clamp(.5rem, 2vw, 1.25rem); padding-bottom: clamp(1.5rem, 4vw, 2.5rem); }
.tl-kompakt { display: grid; grid-template-columns: minmax(0, 420px) 1fr; align-items: center; gap: clamp(1rem, 3vw, 2rem); background: #fff; border: 2px solid var(--orange-100); border-left: 6px solid var(--orange); border-radius: var(--radius); box-shadow: var(--shadow); padding: clamp(.75rem, 2vw, 1rem); }
.tl-kompakt-bild { display: block; line-height: 0; border-radius: var(--radius-sm); overflow: hidden; border: 1px solid var(--line); }
.tl-kompakt-bild img { width: 100%; height: auto; display: block; transition: transform .4s ease; }
.tl-kompakt-bild:hover img { transform: scale(1.03); }
.tl-kompakt-text { padding-right: clamp(0rem, 2vw, 1rem); }
.tl-kompakt-text h2 { margin: .35rem 0 .35rem; font-size: clamp(1.25rem, 2.2vw, 1.6rem); }
.tl-kompakt-text p { margin: 0 0 .9rem; color: var(--ink-soft); font-size: .98rem; }
.tl-kompakt-text .btn-row { align-items: center; gap: .6rem 1.25rem; }
.tl-mehr { font-weight: 600; font-size: .95rem; }
.tl-signal { display: inline-flex; align-items: center; gap: .5rem; background: var(--orange-50); color: var(--orange-600); font-weight: 700; font-size: .8rem; letter-spacing: .06em; text-transform: uppercase; padding: .3rem .75rem .3rem .6rem; border-radius: 999px; }
.tl-signal i { position: relative; width: .6rem; height: .6rem; border-radius: 50%; background: var(--orange); animation: tl-blink 1.2s ease-in-out infinite; }
.tl-signal i::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: var(--orange); animation: tl-ring 1.6s ease-out infinite; }
.tl-puls { animation: tl-glow 2s ease-in-out infinite; }
.tl-puls:hover, .tl-puls:focus-visible { animation: none; }
@keyframes tl-blink { 0%, 100% { opacity: 1; } 50% { opacity: .25; } }
@keyframes tl-ring { 0% { transform: scale(1); opacity: .7; } 100% { transform: scale(3); opacity: 0; } }
@keyframes tl-glow { 0%, 100% { box-shadow: 0 0 0 0 rgba(252, 131, 0, .55), 0 10px 24px -10px rgba(252, 131, 0, .8); } 50% { box-shadow: 0 0 0 10px rgba(252, 131, 0, 0), 0 10px 24px -10px rgba(252, 131, 0, .8); } }
@media (prefers-reduced-motion: reduce) { .tl-signal i, .tl-signal i::after, .tl-puls { animation: none; } }
@media (max-width: 760px) {
  .tl-kompakt { grid-template-columns: 1fr; border-left: 2px solid var(--orange-100); border-top: 6px solid var(--orange); }
  .tl-kompakt-text { padding: 0 .35rem .35rem; }
  .tl-kompakt-text .btn-row .btn { flex: 1 1 100%; justify-content: center; }
  .tl-mehr { margin: 0 auto; }
}