/* Münchner Kinderkonzerte. Siehe DESIGN.md */
@font-face { font-family: "Bricolage"; src: url(/assets/fonts/bricolage.woff2) format("woff2"); font-weight: 200 800; font-display: swap; }
@font-face { font-family: "Figtree"; src: url(/assets/fonts/figtree.woff2) format("woff2"); font-weight: 300 900; font-display: swap; }
:root { color-scheme: light only; --tinte: #241b47; --violett: #3a2a86; --blau: #004eb4; --pink: #d81f6f; --gold: #ffc83d; --gruen: #1b7f55; --tuerkis: #0b7f85; --flaeche: #f1eefb; --linie: #cfc9e8; --grau: #57516f; --kopf: "Bricolage", system-ui, sans-serif; --text: "Figtree", system-ui, sans-serif; }
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body { margin: 0; background: #fff; color: var(--tinte); font: 400 1.0938rem/1.6 var(--text); overflow-x: hidden; }
img { display: block; max-width: 100%; height: auto; }
a { color: var(--blau); text-underline-offset: 3px; }
:focus-visible { outline: 3px solid var(--pink); outline-offset: 2px; }
h1, h2, h3 { font-family: var(--kopf); font-weight: 800; line-height: 1.04; margin: 0; letter-spacing: -.02em; overflow-wrap: anywhere; hyphens: auto; }
h1 { font-size: clamp(2.7rem, 1.6rem + 5.2vw, 6.4rem); }
h2 { font-size: clamp(2rem, 1.5rem + 2.4vw, 3.6rem); margin-bottom: 24px; }
h3 { font-size: 1.5rem; }
p { margin: 0 0 16px; }
.wrap { max-width: 1240px; margin: 0 auto; padding: 0 24px; }
.skip { position: absolute; left: -999px; top: 8px; background: #fff; padding: 8px 16px; z-index: 50; } .skip:focus { left: 8px; }
.kopf { position: sticky; top: 0; z-index: 20; background: #fff; border-bottom: 3px solid var(--tinte); }
.kopf .wrap { display: flex; align-items: center; justify-content: space-between; gap: 24px; min-height: 76px; }
.marke img { width: 188px; height: auto; }
.nav { display: flex; gap: 20px; align-items: center; }
.nav a { color: var(--tinte); text-decoration: none; font-weight: 600; padding: 8px 0; border-bottom: 3px solid transparent; }
.nav a:hover { border-bottom-color: var(--gold); }
.nav a[aria-current] { border-bottom-color: var(--pink); }
.nav .ig { display: inline-flex; align-items: center; gap: 6px; color: var(--pink); } .nav .ig span { font-size: .9rem; }
.menu-knopf { display: none; width: 44px; height: 44px; background: none; border: 0; padding: 10px; cursor: pointer; }
.menu-knopf span { display: block; height: 3px; background: var(--tinte); margin: 7px 0; transition: transform .2s; }
.menu-offen .menu-knopf span:first-child { transform: translateY(5px) rotate(45deg); } .menu-offen .menu-knopf span:last-child { transform: translateY(-5px) rotate(-45deg); }
/* Hero */
.hero { padding: 72px 0 32px; }
.hero-raster { display: grid; grid-template-columns: 1fr 400px; gap: 56px; align-items: center; }
.hero h1 { color: var(--violett); }
.intro { margin-top: 24px; font-size: 1.15rem; max-width: 56ch; }
.intro p { margin-bottom: 12px; }
.hero-plakat { margin: 0; transform: rotate(2.2deg); box-shadow: 10px 10px 0 var(--gold); border: 3px solid var(--tinte); border-radius: 10px; overflow: hidden; }
/* Notenband */
.notenband { position: relative; height: 90px; margin: 16px 0 40px; }
.notenband svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.nt { position: absolute; width: 20px; height: 15px; border-radius: 50%; transform: rotate(-18deg); }
.nt::after { content: ""; position: absolute; right: 0; bottom: 8px; width: 2.5px; height: 34px; background: inherit; }
.n1 { left: 9%; top: 25px; background: var(--pink); } .n2 { left: 28%; top: 44px; background: var(--blau); } .n3 { left: 49%; top: 37px; background: var(--gruen); } .n4 { left: 70%; top: 18px; background: #e08a00; } .n5 { left: 88%; top: 32px; background: var(--violett); }
/* Farbbänder */
.farbe-pink { --f: var(--pink); --ft: #fff; } .farbe-gruen { --f: var(--gruen); --ft: #fff; } .farbe-gold { --f: var(--gold); --ft: var(--tinte); } .farbe-tuerkis { --f: var(--tuerkis); --ft: #fff; } .farbe-blau { --f: var(--blau); --ft: #fff; } .farbe-violett { --f: var(--violett); --ft: #fff; }
.band { background: var(--f); color: var(--ft); padding: 72px 0; }
.band a { color: inherit; }
.band-raster { display: grid; grid-template-columns: 380px 1fr; gap: 64px; align-items: center; }
.band:nth-of-type(even) .band-raster { grid-template-columns: 1fr 380px; } .band:nth-of-type(even) .plakat { order: 2; }
.plakat { display: block; margin: 0; border: 3px solid var(--tinte); border-radius: 10px; overflow: hidden; background: #fff; box-shadow: 8px 8px 0 var(--tinte); transition: transform .2s; }
a.plakat:hover { transform: translate(-3px, -3px); }
.plakat.klein { max-width: 320px; }
.band-text { max-width: 620px; }
.band h2 a, .band h1 { text-decoration: none; }
.band h2 a:hover { text-decoration: underline; }
.marke-zeile { font-weight: 700; font-size: .95rem; margin-bottom: 12px; }
.unter-b { font-size: 1.25rem; font-weight: 500; line-height: 1.35; }
.mitw { font-weight: 500; }
.knopf { display: inline-flex; align-items: center; gap: 8px; background: var(--violett); color: #fff; border: 3px solid var(--tinte); border-radius: 10px; padding: 11px 20px; font: 700 1.02rem var(--text); cursor: pointer; text-decoration: none; min-height: 48px; box-shadow: 4px 4px 0 var(--tinte); transition: transform .12s, box-shadow .12s; }
.knopf:hover { transform: translate(-2px, -2px); box-shadow: 6px 6px 0 var(--tinte); }
.knopf:active { transform: translate(2px, 2px); box-shadow: 2px 2px 0 var(--tinte); }
.knopf.hell { background: #fff; color: var(--tinte); }
.knopf.gelb { background: var(--gold); color: var(--tinte); }
.knoepfe { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 24px; }
/* Abschnitte */
.abschnitt { padding: 72px 0; } .abschnitt.kurz { padding: 32px 0 72px; }
.flaeche { background: var(--flaeche); }
.seitenkopf { padding: 56px 0 24px; } .seitenkopf h1 { color: var(--violett); }
.unter { font-size: 1.3rem; margin-top: 16px; font-weight: 500; }
.krume { font-size: .9rem; display: flex; flex-wrap: wrap; gap: 8px; padding-top: 24px; }
.projekt-kopf { padding-top: 16px; } .projekt-kopf .krume { padding-bottom: 32px; padding-top: 8px; }
.mehr { font-weight: 700; text-decoration: none; } .mehr:hover { text-decoration: underline; }
.leer { font-size: 1.15rem; max-width: 60ch; }
.instagram { background: #fff; border-top: 3px solid var(--tinte); padding: 48px 0; } .instagram h2 { color: var(--pink); margin-bottom: 16px; }
.buchen { background: var(--violett); color: #fff; padding: 72px 0; }
.buchen h2 { color: var(--gold); max-width: 18ch; }
.buchen .knopf.hell { box-shadow: 4px 4px 0 var(--gold); overflow-wrap: anywhere; }
/* Konzertkarten */
.ticket { display: grid; grid-template-columns: 124px 1fr; background: #fff; border: 3px solid var(--tinte); border-radius: 12px; margin-bottom: 16px; position: relative; overflow: hidden; }
.abriss { background: var(--f); color: var(--ft); padding: 16px 8px; text-align: center; border-right: 3px dashed var(--tinte); display: flex; flex-direction: column; justify-content: center; }
.abriss .tag { font: 800 2.4rem/1 var(--kopf); } .abriss .mon { font-weight: 700; font-size: .9rem; }
.ticket-text { padding: 16px 20px; }
.ticket-text h3 a { color: var(--tinte); text-decoration: none; } .ticket-text h3 a:hover { text-decoration: underline; }
.ticket-text p { margin: 6px 0 0; } .ticket .mit { font-size: .95rem; color: var(--grau); }
.ticket.alt .abriss { background: #ece9f5; color: var(--tinte); }
/* Projekt */
.projekt-raster { display: grid; grid-template-columns: 1fr 340px; gap: 64px; align-items: start; }
.fliess { max-width: 66ch; } .fliess.breit { max-width: 72ch; }
.fliess h2 { font-size: 1.75rem; margin: 28px 0 12px; } .fliess ul { margin: 0 0 16px; padding-left: 20px; } .fliess li { margin-bottom: 4px; }
.recht h2 { font-size: 1.5rem; }
.klein-h { font-size: 1.25rem; margin: 20px 0 8px; letter-spacing: 0; }
.kasten { background: var(--flaeche); border: 3px solid var(--tinte); border-radius: 12px; padding: 16px 20px; overflow-wrap: anywhere; }
.kasten p:last-child { margin-bottom: 0; }
.seite .knopf { width: 100%; justify-content: center; margin-bottom: 16px; }
.linkliste { list-style: none; padding: 0 !important; }
.archiv-raster { display: grid; grid-template-columns: repeat(4, 1fr); gap: 32px; }
.archiv-karte { color: inherit; text-decoration: none; } .archiv-karte img { border: 3px solid var(--tinte); border-radius: 10px; margin-bottom: 12px; aspect-ratio: 2/3; object-fit: cover; width: 100%; }
.archiv-karte:hover h3 { color: var(--pink); } .archiv-karte h3 { font-size: 1.3rem; } .archiv-karte p { margin: 4px 0 0; }
.termin-raster { display: grid; grid-template-columns: 1fr 320px; gap: 48px; align-items: start; }
/* Galerie */
.galerie { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 16px; }
.galerie a { display: block; aspect-ratio: 4/5; overflow: hidden; border: 3px solid var(--tinte); border-radius: 10px; }
.galerie img { width: 100%; height: 100%; object-fit: cover; transition: transform .25s; }
.galerie a:hover img { transform: scale(1.03); }
dialog.gross { border: 0; padding: 0; background: rgba(20, 14, 50, .94); width: 100vw; height: 100dvh; max-width: none; max-height: none; color: #fff; }
dialog.gross img { width: 100%; height: calc(100dvh - 72px); object-fit: contain; }
.gross-nav { display: flex; justify-content: center; gap: 12px; padding: 12px; }
.gross-nav button { min-height: 48px; min-width: 48px; background: #fff; color: var(--tinte); border: 0; border-radius: 8px; padding: 0 16px; font: 700 1rem var(--text); cursor: pointer; }
/* Team */
.team { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; }
.person .foto { aspect-ratio: 1; background: var(--f); color: var(--ft); border: 3px solid var(--tinte); border-radius: 12px; overflow: hidden; display: flex; align-items: center; justify-content: center; font: 800 4.5rem var(--kopf); margin-bottom: 12px; }
.person .foto img { width: 100%; height: 100%; object-fit: cover; object-position: top; }
.person h2 { font-size: 1.5rem; margin-bottom: 4px; } .person h2 a { color: inherit; }
/* Über */
.leitung { display: grid; grid-template-columns: 340px 1fr; gap: 56px; align-items: start; } .leitung figure, .presse figure { margin: 0; }
.leitung img, .presse img { border: 3px solid var(--tinte); border-radius: 12px; }
.presse { display: grid; grid-template-columns: 240px 1fr; gap: 48px; align-items: center; }
.presse blockquote { margin: 0; font-size: 1.15rem; } .presse h2 { font-size: 2rem; margin-bottom: 8px; } .presse footer { font-weight: 700; }
/* Formular */
.zwei { display: grid; grid-template-columns: 1fr 1.6fr; gap: 56px; }
.formular { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.ganz { grid-column: 1 / -1; }
.feld label { display: block; font-size: .95rem; font-weight: 600; margin-bottom: 4px; }
.feld input, .feld select, .feld textarea { width: 100%; font: inherit; padding: 12px; border: 2px solid var(--tinte); border-radius: 8px; background: #fff; color: inherit; min-height: 48px; }
.feld textarea { min-height: 140px; resize: vertical; }
.feld.haken label { display: flex; gap: 8px; align-items: flex-start; font-weight: 400; }
.feld.haken input { width: 20px; height: 20px; min-height: 0; margin-top: 3px; flex: none; }
.feld.ungueltig input, .feld.ungueltig textarea { border-color: var(--pink); border-width: 3px; }
.hk { position: absolute; left: -9999px; height: 0; overflow: hidden; }
.form-status { margin-top: 12px; } .form-status.fehler { color: #b3134f; }
.formular-erfolg { background: var(--flaeche); border-radius: 12px; padding: 16px; }
/* Fuß */
.fuss { background: var(--tinte); color: #fff; padding: 56px 0 32px; }
.fuss a { color: #fff; } .fuss a:hover { color: var(--gold); }
.fuss-raster { display: grid; grid-template-columns: 1.5fr 1.4fr 1fr 1fr; gap: 32px; margin-bottom: 32px; }
.fuss p { margin: 0 0 4px; overflow-wrap: anywhere; }
.fuss-name { font: 800 1.6rem/1.1 var(--kopf); color: var(--gold); margin-bottom: 8px !important; }
.klein { font-size: .875rem; opacity: .85; }
@media (max-width: 1040px) { .nav { gap: 14px; } .nav .ig span { display: none; } .band-raster, .band:nth-of-type(even) .band-raster { grid-template-columns: 300px 1fr; gap: 40px; } .band:nth-of-type(even) .band-raster { grid-template-columns: 1fr 300px; } .hero-raster { grid-template-columns: 1fr 320px; gap: 40px; } }
@media (max-width: 900px) {
  .menu-knopf { display: block; }
  .nav { display: none; position: absolute; left: 0; right: 0; top: 100%; background: #fff; flex-direction: column; align-items: stretch; gap: 0; padding: 8px 24px 24px; border-bottom: 3px solid var(--tinte); }
  .menu-offen .nav { display: flex; } .nav a { padding: 12px 0; font-size: 1.15rem; border-bottom: 1px solid var(--linie); } .nav .ig span { display: inline; }
}
@media (max-width: 760px) {
  .wrap { padding: 0 16px; } .hero { padding: 40px 0 16px; } .abschnitt { padding: 48px 0; } .abschnitt.kurz { padding: 16px 0 48px; } .band { padding: 48px 0; } .buchen { padding: 48px 0; }
  .marke img { width: 150px; }
  .hero-raster, .band-raster, .band:nth-of-type(even) .band-raster, .projekt-raster, .zwei, .termin-raster, .leitung, .presse, .team { grid-template-columns: 1fr; gap: 32px; }
  .team { grid-template-columns: 1fr 1fr; gap: 20px; } .person .foto { font-size: 3rem; } .person h2 { font-size: 1.2rem; }
  .band:nth-of-type(even) .plakat { order: 0; }
  .plakat, .hero-plakat { max-width: 78%; } .hero-plakat { margin: 8px auto 8px 4px; }
  .archiv-raster { grid-template-columns: 1fr 1fr; gap: 16px; }
  .galerie { grid-template-columns: 1fr 1fr; gap: 8px; }
  .formular { grid-template-columns: 1fr; }
  .ticket { grid-template-columns: 92px 1fr; } .abriss .tag { font-size: 1.9rem; } .abriss .mon { font-size: .8rem; } .ticket-text { padding: 12px 14px; }
  .fuss-raster { grid-template-columns: 1fr 1fr; } .fuss-raster > div:first-child, .fuss-raster > div:nth-child(2) { grid-column: 1 / -1; }
  .notenband { height: 64px; margin: 8px 0 24px; } .nt { display: none; }
  .knoepfe .knopf { max-width: 100%; }
}