:root{
  --bg:#f6f3ec;
  --surface:#ffffff;
  --surface-soft:#fbf8f2;
  --text:#18244b;
  --muted:#66728f;
  --line:#e9e3d8;
  --blue:#245bff;
  --blue-dark:#1627b8;
  --yellow:#f5c928;
  --yellow-soft:#fff2b5;
  --green:#2eb872;
  --purple:#8854d0;
  --teal:#11b8b0;
  --orange:#f38b2a;
  --pink:#ee5d9f;
  --shadow:0 14px 40px rgba(23,38,79,.08);
  --radius:28px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
  color:var(--text);
  background:linear-gradient(180deg,#fbf9f4 0%,#f5f2ea 100%);
  line-height:1.55;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
.container{width:min(1180px,calc(100% - 32px));margin:0 auto}
.skip-link{position:absolute;left:-9999px;top:auto}
.skip-link:focus{left:12px;top:12px;background:#fff;padding:10px 14px;border-radius:12px;z-index:999}

.site-header{
  position:sticky;top:0;z-index:50;
  background:rgba(255,255,255,.92);
  backdrop-filter:blur(10px);
  border-bottom:1px solid rgba(233,227,216,.85);
}
.header-inner{
  display:grid;
  grid-template-columns:auto 1fr auto;
  align-items:center;
  gap:20px;
  min-height:88px;
}
.brand{display:flex;align-items:center;gap:12px;min-width:0}
.brand-mark{font-size:2rem;color:#d7b144;line-height:1}
.brand-copy strong{display:block;font-size:1.85rem;line-height:1.05;letter-spacing:-.04em;font-weight:900;color:#1d2b68}
.brand-copy strong span{color:#47a5ff}
.brand-copy small{display:block;font-size:.9rem;color:#7c869d;margin-top:4px}
.main-nav{
  display:flex;justify-content:center;align-items:center;gap:10px;
  flex-wrap:nowrap;min-width:0;
}
.main-nav a{
  padding:10px 14px;border-radius:999px;font-weight:700;font-size:1rem;
  white-space:nowrap;color:#223056;
}
.main-nav a:hover{background:#f4efe3}
.main-nav a.active{background:#f5e7ab;box-shadow:inset 0 0 0 1px rgba(197,160,35,.24)}
.header-actions{display:flex;align-items:center;gap:12px}
.search-button{
  width:46px;height:46px;border-radius:50%;border:1px solid var(--line);background:#fff;
  font-size:1.2rem;color:#354061;cursor:pointer
}
.teacher-button{
  display:inline-flex;align-items:center;gap:8px;padding:13px 18px;border-radius:999px;
  background:#ebc629;color:#24304f;font-weight:800;white-space:nowrap;box-shadow:0 8px 18px rgba(235,198,41,.28)
}
.menu-toggle{display:none;width:46px;height:46px;border-radius:12px;border:1px solid var(--line);background:#fff;cursor:pointer}
.menu-toggle span{display:block;width:20px;height:2px;background:#223056;margin:4px auto;border-radius:3px}
.search-panel{border-top:1px solid var(--line);background:#fff;padding:14px 0}
.site-search label{display:block;font-weight:700;margin-bottom:10px}
.search-row{display:flex;gap:10px}
.search-row input{flex:1;border:1px solid var(--line);border-radius:14px;padding:14px 16px;font-size:1rem}
.search-row button{border:none;background:var(--blue);color:#fff;border-radius:14px;padding:14px 18px;font-weight:800;cursor:pointer}
.search-status{margin:8px 0 0;color:var(--muted)}

.section{padding:32px 0}
.section.soft{background:linear-gradient(180deg,rgba(255,255,255,.55),rgba(255,255,255,.35))}
.page-hero{padding:26px 0 18px}
.hero-box,.content-card,.teacher-card,.download-card,.instrument-card,.topic-card,.era-card,.card,.cta-box,.feature,.info-band,.hero-note{
  background:rgba(255,255,255,.95);
  border:1px solid rgba(233,227,216,.9);
  box-shadow:var(--shadow);
}
.hero-box{
  display:grid;grid-template-columns:1.1fr .9fr;gap:28px;align-items:center;
  border-radius:32px;padding:36px;overflow:hidden
}
.page-hero.alt-blue .hero-box{background:linear-gradient(135deg,#f7fbff,#eef6ff)}
.eyebrow{margin:0 0 8px;font-size:.88rem;font-weight:900;letter-spacing:.08em;text-transform:uppercase;color:#7084b9}
h1,h2,h3,h4{margin:0 0 12px;line-height:1.1;letter-spacing:-.03em}
h1{font-size:clamp(2.5rem,4vw,4.2rem)}
h2{font-size:clamp(1.7rem,3vw,2.4rem)}
h3{font-size:1.45rem}
h4{font-size:1.1rem}
p{margin:0 0 14px;color:#32415f}
.lead{font-size:1.18rem;color:#435170;max-width:62ch}
.back-link{display:inline-flex;align-items:center;gap:6px;font-weight:800;color:#3858bf;margin-bottom:12px}
.topic-hero-image{display:grid;gap:16px;justify-items:end}
.topic-hero-image img:first-child{width:min(100%,420px);border-radius:24px;border:1px solid var(--line);background:#fff;padding:10px}
.topic-hero-image img:last-child{width:120px}
.hero-note{display:grid;grid-template-columns:94px 1fr;gap:16px;padding:20px;border-radius:24px;align-items:center;background:#fffaf0}
.hero-note img{width:94px}
.hero-note h3{margin-bottom:6px}
.button-row{display:flex;flex-wrap:wrap;gap:12px;margin-top:18px}
.button,.pill-link{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;font-weight:800;border-radius:999px;
}
.button{padding:14px 20px;border:1px solid transparent}
.button.primary{background:var(--yellow);color:#173073}
.button.dark{background:#183cbb;color:#fff}
.button.outline{background:#fff;border-color:#c9d4f0;color:#1d2b68}
.hero-badges{display:flex;gap:18px;flex-wrap:wrap;margin-top:18px;color:#edf1ff;font-weight:700;font-size:.98rem}

.hero-home{padding:20px 0 10px}
.hero-shell{
  position:relative;
  display:grid;grid-template-columns:1fr 1.05fr 1fr;align-items:stretch;
  min-height:430px;border-radius:34px;overflow:hidden;
  background:linear-gradient(135deg,#07165e 0%, #192cff 40%, #420f8d 100%);
  border:1px solid rgba(17,31,102,.18);box-shadow:0 24px 50px rgba(21,38,110,.18)
}
.hero-left,.hero-right{height:100%;min-height:430px;background:#07165e}
.hero-left img,.hero-right img{width:100%;height:100%;object-fit:cover;display:block}
.hero-copy{
  position:relative;z-index:2;
  margin:0;display:flex;flex-direction:column;justify-content:center;
  padding:38px 28px;color:#fff;
  background:linear-gradient(180deg,rgba(32,69,255,.96),rgba(10,20,175,.96));
  box-shadow:0 0 0 1px rgba(255,255,255,.06),0 16px 30px rgba(4,11,73,.3);
}
.hero-copy h1{font-size:clamp(2.6rem,4vw,4.6rem);margin-bottom:18px;color:#fff}
.hero-copy h1 span{color:#ffd83d}
.hero-copy p{color:#f3f5ff;font-size:1.12rem}
.hero-copy .button.primary{align-self:flex-start}

.home-grid,.download-grid,.teacher-grid,.instrument-grid,.era-grid{display:grid;gap:22px}
.home-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
.card{
  position:relative;border-radius:26px;padding:24px 22px 22px;min-height:260px;overflow:hidden;
}
.card h3{font-size:2rem;margin:14px 0 8px}
.card p{max-width:245px;margin-bottom:18px}
.card .visual{position:absolute;right:14px;bottom:0;width:165px;max-height:78%;object-fit:contain}
.round,.value-badge,.tag{
  display:inline-flex;align-items:center;justify-content:center;font-weight:800
}
.round{width:42px;height:42px;border-radius:50%;font-size:1rem;background:#eaf0ff}
.value-badge{width:48px;height:48px;border-radius:16px;font-size:1.15rem}
.values{padding:12px 0 40px}
.values-row{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px}
.values-row article{display:flex;gap:14px;align-items:flex-start;background:#eff5ff;border:1px solid #dbe7ff;border-radius:24px;padding:22px}
.values-row p{margin-bottom:0}

.pill-link{padding:12px 18px;color:#fff;font-size:.96rem}
.pill-link.blue,.value-badge.blue,.tag.blue{background:#2864ea;color:#fff}
.pill-link.green,.value-badge.green,.tag.green{background:#31bf73;color:#fff}
.pill-link.purple,.value-badge.purple,.tag.purple{background:#9252e7;color:#fff}
.pill-link.teal,.value-badge.teal,.tag.teal{background:#16b8b1;color:#fff}
.pill-link.yellow,.value-badge.yellow,.tag.yellow{background:#f0c624;color:#283458}
.tag.orange{background:#f4973a;color:#fff}
.tag.pink{background:#ef6aa5;color:#fff}
.tag{padding:8px 12px;border-radius:999px;font-size:.88rem}

.feature{
  display:grid;grid-template-columns:minmax(280px,420px) 1fr;gap:28px;align-items:center;
  padding:28px;border-radius:30px
}
.feature > img{width:100%;border-radius:22px;border:1px solid var(--line);background:#fff;padding:10px}
.feature .mini-facts{margin:14px 0 18px}
.mini-facts{display:flex;flex-wrap:wrap;gap:10px}
.mini-facts span{background:#eff4ff;color:#27408d;border-radius:999px;padding:9px 12px;font-weight:700;font-size:.95rem}
.two-col{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px}
.content-card,.teacher-card,.download-card,.instrument-card,.topic-card,.era-card,.cta-box,.info-band{border-radius:26px;padding:24px}
.teacher-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
.download-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
.instrument-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
.era-grid{grid-template-columns:repeat(4,minmax(0,1fr))}
.teacher-card p:last-child,.content-card p:last-child,.download-card p:last-child,.instrument-card p:last-child{margin-bottom:0}
.list-check{padding:0;margin:0;list-style:none;display:grid;gap:10px}
.list-check li{padding-left:26px;position:relative;color:#31415e}
.list-check li::before{content:'✓';position:absolute;left:0;top:0;color:#28b167;font-weight:900}
.pill-row{display:flex;flex-wrap:wrap;gap:10px;margin-top:18px}
.pill-row a{background:#eff4ff;padding:10px 14px;border-radius:999px;font-weight:700;color:#29408b}
.info-band{display:grid;grid-template-columns:1.2fr .8fr;gap:24px;align-items:center;background:linear-gradient(120deg,#1c39d0,#6126c4);color:#fff}
.info-band p,.info-band li{color:#eff4ff}
.cta-box{display:grid;grid-template-columns:140px 1fr;gap:22px;align-items:center;background:linear-gradient(135deg,#1b38d2 0%, #5414b1 100%);color:#fff}
.cta-box p,.cta-box h2{color:#fff}
.cta-box img{width:140px}
.section-title{margin-bottom:18px}
.timeline{display:grid;grid-template-columns:repeat(9,minmax(100px,1fr));gap:10px}
.timeline a,.timeline div{display:block;padding:14px 12px;border-radius:18px;color:#fff;font-weight:900;min-height:84px}
.timeline a small,.timeline div small{display:block;font-size:.78rem;opacity:.85;margin-bottom:6px;font-weight:700}
.timeline .green{background:#63b64c}.timeline .yellow{background:#efc443;color:#32415f}.timeline .orange{background:#ef8f3a}.timeline .purple{background:#9957db}.timeline .blue{background:#2e8ce7}.timeline .teal{background:#18b8b1}.timeline .pink{background:#eb5d9a}
.topic-card,.era-card,.download-card,.instrument-card{display:flex;flex-direction:column;gap:12px}
.topic-card img,.era-card img,.download-card img,.instrument-card img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:18px;border:1px solid var(--line);background:#fff}
.instrument-card .button,.download-card .button,.topic-card .button,.era-card .button{margin-top:auto;align-self:flex-start}
.audio-demo{pointer-events:none;opacity:.7}
.question-row{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.question-row article{background:#fff;border:1px solid var(--line);border-radius:22px;padding:22px;display:flex;gap:14px;align-items:center;box-shadow:var(--shadow)}
.question-row b{width:40px;height:40px;border-radius:14px;background:#eff4ff;color:#26408d;display:inline-flex;align-items:center;justify-content:center;font-size:1.2rem}

.site-footer{margin-top:34px;padding:28px 0 36px;border-top:1px solid var(--line);background:rgba(255,255,255,.75)}
.footer-grid{display:grid;gap:12px}
.footer-grid strong{font-size:1.3rem}
.footer-grid span{display:block;color:#75809a;margin-top:4px}
.footer-grid nav{display:flex;flex-wrap:wrap;gap:16px 18px;font-weight:700}
.footer-grid p{margin-bottom:0;color:#54617e}

mark.search-hit{background:#fff2a8;color:inherit;padding:0 .1em;border-radius:.2em}

@media (max-width: 1160px){
  .header-inner{grid-template-columns:auto auto;align-items:start;padding:14px 0}
  .main-nav{grid-column:1/-1;justify-content:flex-start;flex-wrap:wrap}
  .header-actions{justify-self:end}
}
@media (max-width: 980px){
  .hero-shell{grid-template-columns:1fr;min-height:unset}
  .hero-left,.hero-right{min-height:220px}
  .hero-copy{order:2}
  .hero-left{order:1}.hero-right{order:3}
  .home-grid,.download-grid,.teacher-grid,.instrument-grid,.era-grid,.values-row,.question-row,.timeline,.two-col,.feature,.hero-box,.info-band,.cta-box{grid-template-columns:1fr}
  .feature{padding:22px}
  .hero-box{padding:26px}
  .cta-box{grid-template-columns:1fr;text-align:left}
  .cta-box img{width:120px}
}
@media (max-width: 760px){
  .container{width:min(100% - 24px,1180px)}
  .header-inner{grid-template-columns:1fr auto auto;gap:12px;min-height:78px}
  .brand-copy strong{font-size:1.45rem}
  .brand-copy small{font-size:.78rem}
  .menu-toggle{display:inline-block}
  .main-nav{display:none;grid-column:1/-1;flex-direction:column;align-items:stretch;padding-top:8px}
  .main-nav.open{display:flex}
  .main-nav a{padding:12px 14px}
  .header-actions .teacher-button{padding:11px 14px;font-size:.92rem}
  .search-button{width:42px;height:42px}
  .hero-copy{padding:26px 20px}
  .card{min-height:240px}
  .card h3{font-size:1.6rem}
  .card .visual{width:130px}
  .topic-hero-image{justify-items:center}
}

/* Feinschliff Startseite 24.08.2026 */
@media (min-width:1041px){
  .header-inner{grid-template-columns:255px minmax(0,1fr) auto;gap:12px;min-height:84px}
  .brand-copy strong{font-size:1.58rem}
  .brand-copy small{font-size:.8rem}
  .main-nav{gap:2px}
  .main-nav a{padding:9px 9px;font-size:.91rem}
  .header-actions{gap:9px}
  .search-button{width:42px;height:42px}
  .teacher-button{padding:11px 15px;font-size:.92rem}
}
.hero-home{padding:24px 0 16px}
.hero-shell{
  display:grid;
  grid-template-columns:38% 62%;
  min-height:430px;
  background:#fff8e9;
  border-radius:30px;
  overflow:hidden;
  border:1px solid #efe3c9;
  box-shadow:0 20px 48px rgba(45,54,93,.13);
}
.hero-copy{
  margin:0;
  padding:42px 34px;
  justify-content:center;
  background:linear-gradient(135deg,#fffdf7 0%,#fff5da 100%);
  color:var(--text);
  box-shadow:none;
  z-index:3;
}
.hero-kicker{margin:0 0 10px;color:#dc6651;font-size:.85rem;text-transform:uppercase;letter-spacing:.1em;font-weight:900}
.hero-copy h1{font-size:clamp(2.75rem,4.1vw,4.45rem);line-height:1.02;color:#0d4b86;margin:0 0 18px}
.hero-copy h1 br:nth-of-type(1){display:block}
.hero-copy h1 span{color:#ef5a48}
.hero-copy p{color:#2d3854;font-size:1.05rem;max-width:38ch}
.hero-copy .button.primary{background:#ef5a48;color:#fff;box-shadow:0 10px 24px rgba(239,90,72,.24)}
.hero-copy .button.outline{background:#fff;color:#21345e;border-color:#9fa9bd}
.hero-badges{color:#5e6880;margin-top:20px;font-size:.9rem}
.hero-scene{position:relative;min-width:0;min-height:430px;overflow:hidden;background:#eaf4ff}
.hero-montage{width:100%;height:100%;object-fit:cover;object-position:center;display:block}
.hero-mascot{position:absolute;right:14px;bottom:8px;width:126px;height:auto;object-fit:contain;filter:drop-shadow(0 12px 14px rgba(31,45,80,.16))}
.home-grid{align-items:stretch}
.card{min-height:275px;padding:24px 22px}
.card h3{font-size:1.8rem;max-width:62%}
.card p{max-width:58%;font-size:.98rem}
.card .visual{width:150px;right:8px;bottom:4px;max-height:72%}
.card:nth-child(2) .visual{width:175px;right:-3px;bottom:10px}
.card:nth-child(4) .visual{width:165px;right:0;bottom:0;border-radius:20px}
.values-row{gap:14px}
.values-row article{padding:18px}
.values-row h4{font-size:1.02rem}
.values-row p{font-size:.9rem}
@media (max-width:1040px){
  .hero-shell{grid-template-columns:1fr}
  .hero-copy{order:1;padding:34px 28px}
  .hero-scene{order:2;min-height:360px}
  .hero-copy p{max-width:55ch}
  .hero-mascot{width:110px}
}
@media (max-width:680px){
  .hero-copy{padding:26px 20px}
  .hero-copy h1{font-size:2.45rem}
  .hero-scene{min-height:260px}
  .hero-mascot{width:88px;right:8px;bottom:4px}
  .card h3,.card p{max-width:100%}
  .card{padding-bottom:142px}
  .card .visual{width:130px;max-height:130px;right:14px;bottom:8px}
}

/* Feinschliff Runde 2: globale Navigation, Startseite und Karten */
@media (min-width:1081px){
  .header-inner{
    grid-template-columns:245px minmax(0,1fr) auto;
    gap:10px;
    min-height:84px;
    padding:0;
  }
  .main-nav{
    grid-column:auto;
    justify-content:center;
    flex-wrap:nowrap;
    gap:2px;
  }
  .main-nav a{padding:9px 8px;font-size:.89rem}
  .header-actions{justify-self:end;gap:8px}
  .teacher-button{padding:11px 14px;font-size:.9rem}
}

/* Auf schmaleren Notebook-Breiten lieber ein klares Menü als eine zweite Navigationszeile. */
@media (min-width:761px) and (max-width:1080px){
  .header-inner{
    grid-template-columns:1fr auto auto;
    align-items:center;
    gap:12px;
    min-height:82px;
    padding:0;
  }
  .menu-toggle{display:inline-block}
  .main-nav{
    display:none;
    position:absolute;
    top:76px;
    left:50%;
    transform:translateX(-50%);
    width:min(760px,calc(100% - 32px));
    padding:12px;
    background:#fff;
    border:1px solid var(--line);
    border-radius:20px;
    box-shadow:var(--shadow);
    flex-direction:column;
    align-items:stretch;
    gap:4px;
  }
  .main-nav.open{display:flex}
  .main-nav a{padding:12px 14px;font-size:.98rem}
  .header-actions{justify-self:end}
}

/* Hero-Bild: keine sichtbaren Bildartefakte, ruhigerer Zuschnitt. */
.hero-scene{background:linear-gradient(135deg,#eaf5ff,#f2eaff)}
.hero-montage{object-position:center center}
.hero-mascot{width:112px;right:12px;bottom:8px}

/* Karten: Bild und Text dürfen sich nicht überlagern. */
@media (min-width:981px){
  .home-grid .card{padding-right:158px;min-height:286px}
  .home-grid .card h3,.home-grid .card p{max-width:none}
  .home-grid .card .visual{width:138px;right:10px;bottom:8px;max-height:72%}
  .home-grid .card:nth-child(2) .visual{width:148px;right:4px;bottom:10px}
  .home-grid .card:nth-child(4) .visual{width:146px;right:8px;bottom:8px}
}

/* Footer bewusst vom letzten Inhaltsblock absetzen. */
.site-footer{margin-top:46px}
.footer-grid nav a:hover{text-decoration:underline;text-underline-offset:3px}

/* ===== Mediengeschichte ===== */
.media-history-hero{padding:28px 0 18px}.media-history-hero-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:28px;align-items:center;background:linear-gradient(135deg,#f8fbff,#fff8e8);border:1px solid #e7e1d7;border-radius:30px;padding:34px;box-shadow:0 14px 40px rgba(20,40,80,.08)}.media-history-hero-grid>img{width:100%;border-radius:24px;box-shadow:0 18px 38px rgba(20,40,100,.16)}.media-outline{border-color:#c9d5f0;color:#183466;background:#fff}.media-timeline{padding:10px 0 20px}.media-timeline-row{display:flex;align-items:center;gap:10px;overflow-x:auto;padding:12px 6px 18px;scrollbar-width:thin}.media-timeline-row a{flex:0 0 auto;min-width:118px;background:#fff;border:1px solid #e6e1d8;border-radius:18px;padding:12px 14px;text-align:center;color:#294171;box-shadow:0 8px 20px rgba(20,40,80,.06)}.media-timeline-row span{font-size:1.35rem;color:#9ba6ba}.media-history-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px}.media-card{position:relative;background:#fff;border:1px solid #e9e4db;border-radius:26px;overflow:hidden;box-shadow:0 14px 32px rgba(20,40,80,.07);scroll-margin-top:110px}.media-card>img{width:100%;aspect-ratio:3/2;object-fit:cover;background:#f5f7fb;border-bottom:1px solid #eee8df}.media-number{position:absolute;top:14px;left:14px;z-index:2;width:48px;height:48px;border-radius:16px;display:grid;place-items:center;background:#173fbd;color:#fff;font-weight:900;box-shadow:0 8px 16px rgba(23,63,189,.22)}.media-card-body{padding:20px}.media-period{display:inline-block;padding:7px 11px;border-radius:999px;background:#fff2bb;color:#6e5800;font-size:.8rem;font-weight:900;margin-bottom:10px}.media-card h2{font-size:1.55rem;margin:0 0 5px;color:#17295e}.media-card h3{font-size:1rem;margin:0 0 12px;color:#65718b;font-weight:750}.media-card p{color:#46536e}.media-fact{margin-top:16px;padding:13px 14px;border-radius:16px;background:#f1f6ff;color:#2a416d}.media-fact strong{display:block;margin-bottom:3px;color:#183f9d}.media-fact span{display:block;font-size:.93rem}.media-history-promo{margin-top:24px}.media-history-promo>img{object-fit:cover;max-height:310px}.media-history-link{display:inline-flex;margin-top:8px}.media-wissen-feature{margin-top:22px}
@media(max-width:1050px){.media-history-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.media-history-hero-grid{grid-template-columns:1fr}}
@media(max-width:700px){.media-history-grid{grid-template-columns:1fr}.media-history-hero-grid{padding:22px}.media-card h2{font-size:1.4rem}}

/* Mediengeschichte: die 16 Lernkarten vollständig und unbeschnitten anzeigen */
.media-card>.media-sheet-link{display:block;background:#f7f8fb;border-bottom:1px solid #eee8df;padding:14px}
.media-card>.media-sheet-link>img{width:100%;aspect-ratio:5/6;object-fit:contain;background:#fff;border-radius:16px;box-shadow:0 8px 22px rgba(20,40,80,.08)}
.media-card>.media-sheet-link:hover>img{transform:translateY(-2px);box-shadow:0 12px 28px rgba(20,40,80,.14)}
.media-card>.media-sheet-link>img{transition:transform .2s ease,box-shadow .2s ease}
.media-worksheets .download-card img{aspect-ratio:5/6;object-fit:contain;background:#fff;padding:8px}
.media-worksheets .download-card{align-self:stretch}

/* Musik-Zeitreise: Swing & Rock n Roll */
.timeline a span{display:block;font-size:.74rem;opacity:.88;margin-bottom:5px;font-weight:750}
.timeline a strong{display:block;line-height:1.15}
@media (max-width:1100px) and (min-width:981px){.timeline{grid-template-columns:repeat(5,minmax(120px,1fr))}}

@media (max-width:980px) and (min-width:601px){.timeline{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:600px){.timeline{grid-template-columns:1fr}}

/* ===== Komponistinnen ===== */
.women-hero .hero-box{background:linear-gradient(135deg,#fff7fb,#f5f1ff)}
.women-composer-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px}
.women-composer-card{background:#fff;border:1px solid #ebe3ef;border-radius:24px;padding:22px;box-shadow:0 12px 30px rgba(55,35,90,.07);display:flex;flex-direction:column;align-items:flex-start;min-height:320px}
.women-composer-card h3{font-size:1.45rem;margin:12px 0 8px;color:#252650}.women-composer-card p{color:#4d5670;flex:1}.women-avatar{width:72px;height:72px;border-radius:22px;display:grid;place-items:center;background:linear-gradient(135deg,#7c5bd3,#ef7fa6);color:#fff;font-weight:900;font-size:1.35rem;box-shadow:0 10px 20px rgba(108,77,180,.2);margin-bottom:14px}.women-fact{margin-top:12px;padding:12px 13px;border-radius:15px;background:#f6f2ff;color:#3d3f67;font-size:.91rem;line-height:1.45;width:100%}.women-fact strong{color:#6c4cbc}.women-era-strip{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:12px;margin:24px 0}.women-era-strip article{background:#fff;border:1px solid #e8e0ee;border-radius:20px;padding:16px 14px;box-shadow:0 8px 20px rgba(35,40,75,.06)}.women-era-strip span{display:block;font-weight:900;color:#8b5bc4;font-size:.85rem}.women-era-strip strong{display:block;color:#222c55;margin:5px 0;line-height:1.2}.women-era-strip small{color:#68738c}.women-center{justify-content:center}.composer-women-feature{background:linear-gradient(135deg,#fff8fc,#f1f4ff)}.women-feature-art{min-height:280px;border-radius:24px;background:linear-gradient(145deg,#7455c5,#ef7299 55%,#f3ba43);display:grid;grid-template-columns:1fr 1fr;gap:10px;padding:24px;align-content:center}.women-feature-art span{display:grid;place-items:center;aspect-ratio:1;border-radius:50%;background:rgba(255,255,255,.92);color:#5e46a9;font-size:2.4rem;font-weight:900;box-shadow:0 8px 18px rgba(30,20,60,.18)}
@media(max-width:1050px){.women-composer-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.women-era-strip{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:680px){.women-composer-grid{grid-template-columns:1fr}.women-era-strip{grid-template-columns:1fr 1fr}.women-composer-card{min-height:0}.women-feature-art{min-height:220px}}

/* Einzelporträts Komponistinnen & neue Arbeitsblätter */
.composer-profile-visual{display:grid;grid-template-columns:1fr auto;align-items:end;gap:18px;min-height:260px}.composer-profile-visual>img{width:150px;max-height:190px;object-fit:contain;align-self:end}.composer-profile-mark{width:min(330px,100%);aspect-ratio:1/1;border-radius:42% 58% 55% 45%/45% 42% 58% 55%;display:grid;place-items:center;font-size:clamp(4rem,8vw,7.2rem);font-weight:950;color:#fff;box-shadow:0 18px 40px rgba(31,45,80,.16);background:linear-gradient(135deg,#667eea,#764ba2)}.composer-profile-mark.green{background:linear-gradient(135deg,#4b9b5b,#92c95f)}.composer-profile-mark.purple{background:linear-gradient(135deg,#7f59bd,#bd7bc9)}.composer-profile-mark.blue{background:linear-gradient(135deg,#2768bd,#6aa5e8)}.women-card-link{display:inline-flex;margin-top:14px;font-weight:850;color:#174ea6;text-decoration:none}.women-card-link:hover{text-decoration:underline;text-underline-offset:3px}.women-era-strip strong a{color:inherit;text-decoration:none}.women-era-strip strong a:hover{text-decoration:underline}.worksheet-monogram{width:100%;aspect-ratio:16/9;border-radius:20px;display:grid;place-items:center;font-size:3.6rem;font-weight:950;color:#fff;margin:10px 0 16px;background:linear-gradient(135deg,#667eea,#764ba2)}.worksheet-monogram.green{background:linear-gradient(135deg,#4b9b5b,#92c95f)}.worksheet-monogram.purple{background:linear-gradient(135deg,#7f59bd,#bd7bc9)}.worksheet-monogram.blue{background:linear-gradient(135deg,#2768bd,#6aa5e8)}
@media(max-width:760px){.composer-profile-visual{grid-template-columns:1fr;justify-items:center}.composer-profile-mark{width:230px}.composer-profile-visual>img{width:110px}}


/* Hauptaktion für Pädagoginnen und Pädagogen */
.teacher-button.current{box-shadow:0 0 0 3px rgba(18,58,115,.16),0 10px 24px rgba(235,188,13,.22)}


/* Footer wie bei Radio Küken: keine doppelte Hauptnavigation */
.footer-simple{
  display:grid;
  grid-template-columns:minmax(240px,1fr) auto;
  gap:18px 34px;
  align-items:start;
}
.footer-simple .footer-brand{
  display:flex;
  flex-direction:column;
  gap:4px;
}
.footer-simple .footer-brand strong{
  font-size:1.05rem;
  color:#17295e;
}
.footer-simple .footer-brand span{
  color:#6b7280;
  font-size:.9rem;
}
.footer-radio-link{
  display:inline-flex;
  width:max-content;
  margin-top:7px;
  font-weight:800;
  color:#174e9e;
}
.footer-service-nav{
  display:flex;
  flex-wrap:wrap;
  justify-content:flex-end;
  gap:10px 18px;
}
.footer-service-nav a{
  font-weight:750;
  color:#273550;
}
.footer-simple>p{
  grid-column:1/-1;
  margin:2px 0 0;
  padding-top:14px;
  border-top:1px solid #e1e5ec;
  color:#737b8c;
  font-size:.85rem;
}
@media(max-width:760px){
  .footer-simple{grid-template-columns:1fr;gap:16px}
  .footer-service-nav{justify-content:flex-start}
}


/* Kontaktseite */
.contact-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:22px;
}
.contact-card{
  position:relative;
  background:#fff;
  border:1px solid #e5e8ef;
  border-radius:24px;
  padding:26px;
  box-shadow:0 12px 30px rgba(35,45,80,.07);
  min-height:250px;
}
.contact-card h2{margin:6px 0 10px;color:#17295e}
.contact-card p{color:#4f5b73}
.contact-card address{
  font-style:normal;
  line-height:1.75;
  color:#303a50;
  font-weight:650;
}
.contact-icon{
  width:52px;
  height:52px;
  border-radius:17px;
  display:grid;
  place-items:center;
  margin-bottom:14px;
  background:#eef4ff;
  color:#174e9e;
  font-size:1.45rem;
  font-weight:900;
}
.contact-mail{background:linear-gradient(145deg,#ffffff,#f4f8ff)}
.contact-main-link{
  display:block;
  margin:12px 0 18px;
  color:#174e9e;
  font-size:1.25rem;
  font-weight:900;
  overflow-wrap:anywhere;
}
.contact-hero-note img{max-width:120px}
.footer-service-nav a.active{
  color:#174e9e;
  text-decoration:underline;
  text-underline-offset:4px;
}
@media(max-width:760px){
  .contact-grid{grid-template-columns:1fr}
  .contact-card{min-height:0}
}


/* ===== Interaktive Musik-Zeitschiene 2.0 ===== */
.music-time-machine{
  padding:18px 0 8px;
}
.time-machine-heading{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:24px;
  align-items:end;
  margin-bottom:18px;
}
.time-machine-heading h2{
  margin:4px 0 8px;
  color:#17295e;
  font-size:clamp(1.65rem,3vw,2.45rem);
}
.time-machine-heading p:last-child{
  max-width:74ch;
  color:#5d6880;
  margin-bottom:0;
}
.time-machine-help{
  display:grid;
  grid-template-columns:auto 1fr;
  grid-template-rows:auto auto;
  column-gap:10px;
  align-items:center;
  padding:12px 15px;
  border:1px solid #dde4ef;
  border-radius:18px;
  background:#fff;
  box-shadow:0 8px 20px rgba(31,45,80,.06);
  color:#33415f;
}
.time-machine-help>span{
  grid-row:1/3;
  width:38px;
  height:38px;
  border-radius:13px;
  display:grid;
  place-items:center;
  background:#edf4ff;
  color:#2458a8;
  font-size:1.25rem;
  font-weight:900;
}
.time-machine-help strong{font-size:.88rem}
.time-machine-help small{color:#788298;font-size:.76rem}

.music-timeline-wrap{
  border:1px solid #e3e7ee;
  border-radius:26px;
  padding:18px 18px 20px;
  background:linear-gradient(180deg,#fff,#f9fbff);
  box-shadow:0 16px 38px rgba(31,45,80,.08);
}
.music-timeline-scroll{
  overflow-x:auto;
  overflow-y:hidden;
  scrollbar-width:thin;
  scrollbar-color:#bdc7d8 transparent;
  padding:8px 8px 2px;
  scroll-snap-type:x proximity;
  outline:none;
}
.music-timeline-scroll:focus-visible{
  box-shadow:0 0 0 3px rgba(36,88,168,.18);
  border-radius:18px;
}
.music-timeline-line{
  position:relative;
  display:grid;
  grid-template-columns:repeat(10,minmax(105px,1fr));
  min-width:1050px;
  height:180px;
  align-items:center;
  padding:0 28px;
}
.music-timeline-line::before{
  content:"";
  position:absolute;
  left:48px;
  right:48px;
  top:50%;
  height:4px;
  transform:translateY(-50%);
  border-radius:999px;
  background:linear-gradient(90deg,#78945a 0%,#79bf45 13%,#e4b321 25%,#ef8534 38%,#8d66cf 50%,#43a85a 61%,#ef6c35 70%,#2b8fd0 80%,#25aeb7 89%,#df5c8e 100%);
  box-shadow:0 2px 8px rgba(45,55,85,.13);
}
.music-time-point{
  --era:#2458a8;
  position:relative;
  height:170px;
  min-width:0;
  border:0;
  padding:0;
  background:transparent;
  color:#2f3b55;
  cursor:pointer;
  font:inherit;
  text-align:center;
  scroll-snap-align:center;
}
.music-time-point .time-dot{
  position:absolute;
  left:50%;
  top:50%;
  width:18px;
  height:18px;
  transform:translate(-50%,-50%);
  border-radius:50%;
  background:#fff;
  border:5px solid var(--era);
  box-shadow:0 0 0 4px #fff,0 5px 14px rgba(35,45,80,.2);
  transition:transform .18s ease,box-shadow .18s ease,background .18s ease;
  z-index:2;
}
.music-time-point::after{
  content:"";
  position:absolute;
  left:50%;
  top:50%;
  width:2px;
  height:42px;
  background:color-mix(in srgb,var(--era) 56%,#fff);
  transform:translateX(-50%);
  z-index:0;
  opacity:.7;
}
.music-time-point:nth-child(odd)::after{
  top:calc(50% - 42px);
}
.music-time-point .top,
.music-time-point .bottom{
  position:absolute;
  left:50%;
  width:118px;
  transform:translateX(-50%);
  line-height:1.15;
  transition:transform .18s ease,color .18s ease;
}
.music-time-point .top{bottom:calc(50% + 33px)}
.music-time-point .bottom{top:calc(50% + 34px)}
.time-year{
  font-size:.78rem;
  font-weight:800;
  color:#778197;
  letter-spacing:.01em;
}
.time-name{
  font-size:.9rem;
  font-weight:900;
  color:#25324e;
}
.music-time-point:hover .time-dot,
.music-time-point:focus-visible .time-dot,
.music-time-point.is-active .time-dot{
  background:var(--era);
  transform:translate(-50%,-50%) scale(1.18);
  box-shadow:0 0 0 5px #fff,0 7px 18px color-mix(in srgb,var(--era) 35%,transparent);
}
.music-time-point:hover .time-name,
.music-time-point:focus-visible .time-name,
.music-time-point.is-active .time-name{
  color:var(--era);
  transform:translateX(-50%) scale(1.04);
}
.music-time-point:focus-visible{
  outline:2px solid var(--era);
  outline-offset:3px;
  border-radius:14px;
}
.time-era-panel{
  --panel-era:#6c8d52;
  display:grid;
  grid-template-columns:auto minmax(0,1fr) auto;
  gap:18px;
  align-items:center;
  margin:10px 8px 0;
  padding:17px 18px;
  border-radius:20px;
  border:1px solid color-mix(in srgb,var(--panel-era) 28%,#e1e6ef);
  background:linear-gradient(110deg,color-mix(in srgb,var(--panel-era) 10%,#fff),#fff 58%);
  box-shadow:0 8px 22px rgba(31,45,80,.05);
}
.time-era-period{
  min-width:104px;
  padding:12px 14px;
  border-radius:15px;
  background:var(--panel-era);
  color:#fff;
  text-align:center;
  font-size:.82rem;
  font-weight:900;
}
.time-era-copy .time-era-label{
  display:block;
  color:var(--panel-era);
  font-size:.72rem;
  font-weight:900;
  text-transform:uppercase;
  letter-spacing:.08em;
  margin-bottom:2px;
}
.time-era-copy h3{
  margin:0 0 4px;
  color:#17295e;
  font-size:1.25rem;
}
.time-era-copy p{
  margin:0;
  color:#566178;
  font-size:.92rem;
}
.time-era-jump{
  white-space:nowrap;
  padding:11px 14px;
  border-radius:14px;
  background:#17295e;
  color:#fff;
  font-weight:850;
  font-size:.88rem;
}
.time-era-jump:hover{transform:translateY(-1px)}
.era-monogram{
  width:100%;
  aspect-ratio:4/3;
  border-radius:18px;
  display:grid;
  place-items:center;
  font-size:4.2rem;
  font-weight:950;
  color:#fff;
  border:1px solid var(--line);
}
.era-monogram.medieval{
  background:radial-gradient(circle at 32% 28%,#d9bf78 0 11%,transparent 12%),linear-gradient(135deg,#657b49,#9e7c43);
}
@media(max-width:900px){
  .time-machine-heading{grid-template-columns:1fr}
  .time-machine-help{width:max-content;max-width:100%}
  .time-era-panel{grid-template-columns:auto 1fr}
  .time-era-jump{grid-column:1/-1;justify-self:start}
}
@media(max-width:620px){
  .music-timeline-wrap{padding:14px 8px 16px;border-radius:22px}
  .music-timeline-line{grid-template-columns:repeat(10,100px);min-width:1000px;height:166px;padding:0 24px}
  .music-timeline-line::before{left:42px;right:42px}
  .music-time-point{height:156px}
  .music-time-point .top,.music-time-point .bottom{width:108px}
  .time-era-panel{grid-template-columns:1fr;gap:10px;margin:9px 5px 0;padding:15px}
  .time-era-period{justify-self:start;min-width:0}
  .time-era-jump{grid-column:auto}
}
@media(prefers-reduced-motion:reduce){
  .music-time-point .time-dot,.music-time-point .top,.music-time-point .bottom,.time-era-jump{transition:none}
}


/* ===== Interaktive Medien-Zeitschiene ===== */
.media-time-machine{padding:18px 0 10px}
.media-time-heading{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:24px;
  align-items:end;
  margin-bottom:18px;
}
.media-time-heading h2{
  margin:4px 0 8px;
  color:#17295e;
  font-size:clamp(1.65rem,3vw,2.45rem);
}
.media-time-heading p:last-child{
  max-width:76ch;
  color:#5d6880;
  margin-bottom:0;
}
.media-time-wrap{
  border:1px solid #e3e7ee;
  border-radius:26px;
  padding:18px 18px 20px;
  background:linear-gradient(180deg,#fff,#f9fbff);
  box-shadow:0 16px 38px rgba(31,45,80,.08);
}
.media-time-scroll{
  overflow-x:auto;
  overflow-y:hidden;
  scrollbar-width:thin;
  scrollbar-color:#bdc7d8 transparent;
  padding:8px 8px 2px;
  scroll-snap-type:x proximity;
  outline:none;
}
.media-time-scroll:focus-visible{
  box-shadow:0 0 0 3px rgba(36,88,168,.18);
  border-radius:18px;
}
.media-time-line{
  position:relative;
  display:grid;
  grid-template-columns:repeat(16,108px);
  min-width:1728px;
  height:188px;
  align-items:center;
  padding:0 34px;
}
.media-time-line::before{
  content:"";
  position:absolute;
  left:54px;
  right:54px;
  top:50%;
  height:4px;
  transform:translateY(-50%);
  border-radius:999px;
  background:linear-gradient(90deg,
    #315ab8 0%,#2f72bd 7%,#d9782e 14%,#9a4ea1 21%,#285aa6 28%,
    #4e9b58 35%,#668c3d 42%,#6d963f 49%,#ee7a22 56%,#9d4da5 63%,
    #eb7025 70%,#255bb2 77%,#2d63b4 84%,#7955b8 89%,#3178c5 95%,#db5a8a 100%);
  box-shadow:0 2px 8px rgba(45,55,85,.13);
}
.media-time-point{
  --media-era:#315ab8;
  position:relative;
  height:178px;
  border:0;
  padding:0;
  background:transparent;
  color:#2f3b55;
  cursor:pointer;
  font:inherit;
  text-align:center;
  scroll-snap-align:center;
}
.media-time-dot{
  position:absolute;
  left:50%;
  top:50%;
  width:17px;
  height:17px;
  transform:translate(-50%,-50%);
  border-radius:50%;
  background:#fff;
  border:5px solid var(--media-era);
  box-shadow:0 0 0 4px #fff,0 5px 14px rgba(35,45,80,.2);
  transition:transform .18s ease,box-shadow .18s ease,background .18s ease;
  z-index:2;
}
.media-time-point::after{
  content:"";
  position:absolute;
  left:50%;
  top:50%;
  width:2px;
  height:43px;
  background:color-mix(in srgb,var(--media-era) 56%,#fff);
  transform:translateX(-50%);
  opacity:.72;
}
.media-time-point:nth-child(odd)::after{top:calc(50% - 43px)}
.media-time-point .top,
.media-time-point .bottom{
  position:absolute;
  left:50%;
  width:116px;
  transform:translateX(-50%);
  line-height:1.15;
  transition:transform .18s ease,color .18s ease;
}
.media-time-point .top{bottom:calc(50% + 34px)}
.media-time-point .bottom{top:calc(50% + 35px)}
.media-time-year{
  font-size:.75rem;
  font-weight:800;
  color:#778197;
}
.media-time-name{
  font-size:.82rem;
  font-weight:900;
  color:#25324e;
}
.media-time-point:hover .media-time-dot,
.media-time-point:focus-visible .media-time-dot,
.media-time-point.is-active .media-time-dot{
  background:var(--media-era);
  transform:translate(-50%,-50%) scale(1.18);
  box-shadow:0 0 0 5px #fff,0 7px 18px color-mix(in srgb,var(--media-era) 35%,transparent);
}
.media-time-point:hover .media-time-name,
.media-time-point:focus-visible .media-time-name,
.media-time-point.is-active .media-time-name{
  color:var(--media-era);
  transform:translateX(-50%) scale(1.04);
}
.media-time-point:focus-visible{
  outline:2px solid var(--media-era);
  outline-offset:3px;
  border-radius:14px;
}
.media-time-panel{
  --media-panel:#315ab8;
  display:grid;
  grid-template-columns:86px auto minmax(0,1fr) auto;
  gap:16px;
  align-items:center;
  margin:10px 8px 0;
  padding:15px 17px;
  border-radius:20px;
  border:1px solid color-mix(in srgb,var(--media-panel) 28%,#e1e6ef);
  background:linear-gradient(110deg,color-mix(in srgb,var(--media-panel) 9%,#fff),#fff 62%);
  box-shadow:0 8px 22px rgba(31,45,80,.05);
}
.media-time-preview{
  width:86px;
  height:104px;
  object-fit:contain;
  border-radius:14px;
  background:#fff;
  border:1px solid #e4e7ee;
  padding:5px;
  box-shadow:0 6px 14px rgba(31,45,80,.08);
}
.media-time-period{
  min-width:92px;
  padding:11px 12px;
  border-radius:15px;
  background:var(--media-panel);
  color:#fff;
  text-align:center;
  font-size:.8rem;
  font-weight:900;
}
.media-time-label{
  display:block;
  color:var(--media-panel);
  font-size:.72rem;
  font-weight:900;
  text-transform:uppercase;
  letter-spacing:.08em;
  margin-bottom:2px;
}
.media-time-copy h3{
  margin:0 0 4px;
  color:#17295e;
  font-size:1.22rem;
}
.media-time-copy p{
  margin:0;
  color:#566178;
  font-size:.91rem;
}
.media-time-jump{
  white-space:nowrap;
  padding:11px 14px;
  border-radius:14px;
  background:#17295e;
  color:#fff;
  font-weight:850;
  font-size:.86rem;
}
.media-time-jump:hover{transform:translateY(-1px)}
@media(max-width:980px){
  .media-time-heading{grid-template-columns:1fr}
  .media-time-heading .time-machine-help{width:max-content;max-width:100%}
  .media-time-panel{grid-template-columns:74px auto 1fr}
  .media-time-preview{width:74px;height:90px}
  .media-time-jump{grid-column:2/-1;justify-self:start}
}
@media(max-width:650px){
  .media-time-wrap{padding:14px 8px 16px;border-radius:22px}
  .media-time-line{grid-template-columns:repeat(16,100px);min-width:1600px;height:170px;padding:0 28px}
  .media-time-line::before{left:46px;right:46px}
  .media-time-point{height:162px}
  .media-time-point .top,.media-time-point .bottom{width:106px}
  .media-time-panel{grid-template-columns:68px 1fr;gap:10px;margin:9px 5px 0;padding:14px}
  .media-time-preview{width:68px;height:82px;grid-row:1/3}
  .media-time-period{justify-self:start;min-width:0}
  .media-time-copy{grid-column:1/-1}
  .media-time-jump{grid-column:1/-1}
}
@media(prefers-reduced-motion:reduce){
  .media-time-dot,.media-time-point .top,.media-time-point .bottom,.media-time-jump{transition:none}
}