/* LernBasis — Musikschule Nürnberg. Warm-klassisch, handgeschrieben. */
:root{
  --tinte:#241c20; --creme:#f8f3ee; --warm:#ece0d8; --strich:#ddcabd;
  --bordeaux:#9c3b46; --bordtief:#6d2530; --gold:#b08a3e;
  --serif:"Spectral",Georgia,serif;
  --sans:"Karla",system-ui,-apple-system,sans-serif;
  --radius:16px; --weit:1140px;
  --schatten:0 3px 8px rgba(36,28,32,.06),0 16px 44px rgba(36,28,32,.09);
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--creme);color:var(--tinte);
  font-family:var(--sans);font-size:17px;line-height:1.66;-webkit-font-smoothing:antialiased}
img{max-width:100%;height:auto;display:block}
a{color:var(--bordtief)}
h1,h2,h3{font-family:var(--serif);font-weight:600;line-height:1.14;margin:0 0 .4em}
h1{font-size:clamp(2.3rem,6vw,3.9rem);font-weight:600}
h2{font-size:clamp(1.7rem,3.6vw,2.5rem)}
h3{font-size:1.3rem}
p{margin:0 0 1rem}
.reihe{width:100%;max-width:var(--weit);margin-inline:auto;padding-inline:clamp(1.1rem,4vw,2.2rem)}
.satz{padding-block:clamp(3rem,7vw,5.5rem)}
.satz--warm{background:var(--warm)}
.vorzeichen{font-family:var(--sans);font-weight:700;font-size:.76rem;letter-spacing:.2em;text-transform:uppercase;color:var(--gold);margin:0 0 1rem}
.anriss{font-size:1.18rem;color:color-mix(in srgb,var(--tinte) 80%,transparent)}
.still{color:color-mix(in srgb,var(--tinte) 60%,transparent)}
.goldlinie{width:54px;height:3px;background:var(--gold);border:0;margin:0 0 1.4rem}

/* Tasten */
.taste{display:inline-flex;align-items:center;gap:.5rem;font-family:var(--sans);font-weight:700;font-size:1rem;
  border-radius:8px;padding:.8rem 1.6rem;border:1.5px solid transparent;cursor:pointer;text-decoration:none;transition:.15s}
.taste--voll{background:var(--bordeaux);color:var(--creme)}
.taste--voll:hover{background:var(--bordtief);transform:translateY(-2px)}
.taste--linie{background:transparent;color:var(--tinte);border-color:var(--tinte)}
.taste--linie:hover{background:var(--tinte);color:var(--creme)}

/* Kopf / podium */
.podium{position:sticky;top:0;z-index:50;background:color-mix(in srgb,var(--creme) 86%,transparent);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-bottom:1px solid var(--strich)}
.podium-reihe{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding-block:1rem}
.wortmarke{display:flex;align-items:center;gap:.55rem;font-family:var(--serif);font-weight:600;font-size:1.5rem;color:var(--tinte);text-decoration:none}
.wortmarke img{width:34px;height:34px}
.schalter{display:inline-flex;flex-direction:column;gap:5px;background:none;border:0;cursor:pointer;padding:.4rem}
.schalter span{width:24px;height:2px;background:var(--tinte);border-radius:2px}
.register{list-style:none;display:none;margin:0;padding:0}
.registerlink{display:block;text-decoration:none;color:var(--tinte);font-weight:600;padding:.55rem 0;border-bottom:1px solid var(--strich)}
.registerlink.klingt,.registerlink:hover{color:var(--bordtief)}
.podium-reihe.ausgeklappt .register{display:block;position:absolute;left:0;right:0;top:100%;background:var(--creme);border-bottom:1px solid var(--strich);padding:.4rem clamp(1.1rem,4vw,2.2rem) 1rem}
.podium-reihe .register-cta{display:none}

/* Auftakt / hero */
.auftakt{padding-block:clamp(2rem,5vw,3.5rem)}
.auftakt__gitter{display:grid;gap:clamp(1.5rem,4vw,2.5rem);align-items:center}
.auftakt__bild{position:relative;border-radius:var(--radius);overflow:hidden;box-shadow:var(--schatten)}
.auftakt__bild img{width:100%;height:clamp(280px,42vw,440px);object-fit:cover}
.auftakt__atti{display:flex;flex-wrap:wrap;gap:.8rem;margin-top:1.6rem}

/* Fächer — services */
.faecher{display:grid;gap:clamp(1rem,3vw,1.6rem);margin-top:2.2rem}
.fach{background:var(--creme);border:1px solid var(--strich);border-radius:var(--radius);padding:1.7rem;border-top:3px solid var(--gold);transition:.18s}
.satz--warm .fach{background:var(--creme)}
.fach:hover{transform:translateY(-3px);box-shadow:var(--schatten)}
.fach__note{font-family:var(--serif);font-size:1.7rem;color:var(--bordeaux)}
.fach h3{margin:.3rem 0 .4rem}
.fach p{margin:0;font-size:.96rem;color:color-mix(in srgb,var(--tinte) 76%,transparent)}

/* Stufen — process */
.stufen{display:grid;gap:1.2rem;margin-top:2.2rem;counter-reset:st}
.stufe{background:var(--creme);border:1px solid var(--strich);border-radius:var(--radius);padding:1.5rem;display:flex;gap:1.1rem;align-items:flex-start}
.stufe::before{counter-increment:st;content:counter(st);flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:50%;border:2px solid var(--gold);color:var(--bordtief);font-family:var(--serif);font-size:1.2rem}
.stufe h3{margin:0 0 .2rem}
.stufe p{margin:0;font-size:.95rem;color:color-mix(in srgb,var(--tinte) 74%,transparent)}

/* Klänge — testimonials */
.klaenge{display:grid;gap:1.2rem;margin-top:2.2rem}
.klang{background:var(--creme);border:1px solid var(--strich);border-radius:var(--radius);padding:1.7rem;position:relative}
.klang::before{content:"\201C";position:absolute;top:.2rem;left:1rem;font-family:var(--serif);font-size:3rem;color:var(--gold);opacity:.5}
.klang p{font-family:var(--serif);font-size:1.18rem;line-height:1.4;margin:0;padding-top:.6rem}
.klang cite{display:block;margin-top:1rem;font-style:normal;font-size:.86rem;color:var(--gold)}
.klang cite b{color:var(--tinte);font-family:var(--sans)}

/* nachgefragt — faq */
.nachgefragt{margin-top:1.6rem;max-width:780px}
.nachgefragt details{border-bottom:1px solid var(--strich);padding:1.1rem 0}
.nachgefragt summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;gap:1rem;font-family:var(--serif);font-size:1.2rem}
.nachgefragt summary::-webkit-details-marker{display:none}
.nachgefragt summary::after{content:"+";color:var(--bordeaux)}
.nachgefragt details[open] summary::after{content:"\2013"}
.nachgefragt details p{margin:.7rem 0 0;color:color-mix(in srgb,var(--tinte) 78%,transparent)}

/* Fermate — cta */
.fermate{background:var(--bordeaux);color:var(--creme);border-radius:var(--radius);padding:clamp(2.2rem,5vw,3.4rem);text-align:center;border:1px solid var(--bordtief)}
.fermate h2{color:var(--creme)}
.fermate p{color:color-mix(in srgb,#fff 86%,transparent);max-width:48ch;margin-inline:auto}
.fermate .taste--voll{background:var(--gold);color:var(--tinte)}
.fermate .taste--voll:hover{background:var(--creme);color:var(--bordtief)}

/* Seitenkopf + Spur */
.seitenkopf{padding-block:clamp(1.8rem,4vw,2.6rem)}
.spur{font-size:.82rem;color:var(--gold)}
.spur a{color:inherit;text-decoration:none}
.leitsatz{font-size:1.15rem;color:color-mix(in srgb,var(--tinte) 80%,transparent);max-width:60ch}

/* Detail (Unterricht) */
.unterricht-detail{display:grid;gap:1rem;padding-block:1.8rem;border-bottom:1px solid var(--strich)}
.unterricht-detail:last-child{border-bottom:0}
.unterricht-detail .vorzeichen{margin-bottom:.3rem;color:var(--bordtief)}

/* Posten — pricing */
.preisliste{display:grid;gap:1.2rem;margin-top:2.2rem}
.posten{background:var(--creme);border:1px solid var(--strich);border-radius:var(--radius);padding:1.8rem;display:flex;flex-direction:column}
.posten--haupt{border-color:var(--bordeaux);box-shadow:var(--schatten)}
.posten__betrag{font-family:var(--serif);font-size:2.3rem;margin:.3rem 0}
.posten__betrag small{font-family:var(--sans);font-size:.85rem;font-weight:600;color:color-mix(in srgb,var(--tinte) 60%,transparent)}
.siegel{align-self:flex-start;font-size:.7rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;background:color-mix(in srgb,var(--gold) 24%,var(--creme));color:var(--bordtief);padding:.25rem .65rem;border-radius:999px;margin-bottom:.5rem}
.posten ul{list-style:none;margin:1rem 0 1.5rem;padding:0;display:grid;gap:.5rem}
.posten li{position:relative;padding-left:1.5rem;font-size:.94rem}
.posten li::before{content:"\266A";position:absolute;left:0;color:var(--gold)}
.posten .taste{margin-top:auto}
.gebuehrentabelle{width:100%;border-collapse:collapse;margin-top:1rem;border:1px solid var(--strich);border-radius:var(--radius);overflow:hidden}
.gebuehrentabelle th,.gebuehrentabelle td{text-align:left;padding:.85rem 1.1rem;border-bottom:1px solid var(--strich)}
.gebuehrentabelle th{background:var(--warm);font-family:var(--serif);font-weight:600}
.gebuehrentabelle td:last-child,.gebuehrentabelle th:last-child{text-align:right;white-space:nowrap}
.gebuehrentabelle tr:last-child td{border-bottom:0}
.kleindruck{font-size:.8rem;color:color-mix(in srgb,var(--tinte) 56%,transparent);margin-top:1rem}

/* Werte — stats */
.werte{display:grid;gap:1.2rem;margin-top:2.2rem}
.wert{text-align:center;background:var(--creme);border:1px solid var(--strich);border-radius:var(--radius);padding:1.6rem}
.wert b{display:block;font-family:var(--serif);font-size:2.1rem;color:var(--bordtief)}
.wert span{font-size:.9rem;color:var(--gold)}

/* Bildnis — about */
.bildnis{display:grid;gap:2rem;align-items:start}
.bildnis img{width:100%;border-radius:var(--radius);box-shadow:var(--schatten)}
.bildnis figcaption{font-size:.86rem;color:var(--gold);margin-top:.6rem}
.werdegang{max-width:62ch}.werdegang p{font-size:1.05rem}

/* Kontakt */
.kontaktspalten{display:grid;gap:2rem}
.kontaktinfo{list-style:none;margin:0;padding:0;display:grid;gap:1.1rem}
.kontaktinfo li{display:grid;gap:.15rem}
.kontaktinfo .k{font-size:.74rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--bordtief)}
.kontaktinfo a{color:var(--tinte);text-decoration:none}
.eingabe{margin-bottom:1.1rem}
.zeile{display:grid;gap:1.1rem}
label{display:block;font-weight:600;font-size:.88rem;margin-bottom:.35rem}
input,textarea{width:100%;font:inherit;font-size:1rem;color:var(--tinte);background:var(--creme);border:1.5px solid var(--strich);border-radius:8px;padding:.7rem .9rem}
input:focus,textarea:focus{outline:none;border-color:var(--bordeaux);box-shadow:0 0 0 3px color-mix(in srgb,var(--bordeaux) 18%,transparent)}
textarea{min-height:130px;resize:vertical}
.zustimmung{display:flex;gap:.6rem;align-items:flex-start;font-size:.9rem}
.zustimmung input{width:auto;margin-top:.25rem}
.meldung{padding:.9rem 1.1rem;border-radius:8px;font-size:.95rem;margin-top:1rem;border:1px solid var(--strich)}
.meldung--ok{background:color-mix(in srgb,var(--gold) 16%,var(--creme));border-color:var(--gold)}
.meldung--bad{background:color-mix(in srgb,#b3392b 12%,var(--creme));border-color:#b3392b}
.verborgen{display:none}

/* Schrift — prose */
.schrift{max-width:70ch}
.schrift h2{margin-top:2.2rem}.schrift h3{margin-top:1.6rem;font-size:1.15rem;font-family:var(--sans);font-weight:700}
.schrift ul{padding-left:1.2rem}.schrift li{margin-bottom:.4rem}
.schrift address{font-style:normal}

/* Sockel — footer */
.sockel{background:var(--tinte);color:color-mix(in srgb,var(--creme) 86%,transparent);padding-block:clamp(2.5rem,5vw,3.5rem) 1.5rem;margin-top:clamp(3rem,6vw,5rem)}
.sockel-gitter{display:grid;gap:1.8rem}
.sockel h4{color:var(--creme);font-family:var(--serif);font-weight:600;font-size:1.05rem;margin:0 0 .7rem}
.sockel a{color:color-mix(in srgb,var(--creme) 86%,transparent);text-decoration:none}
.sockel a:hover{color:var(--creme)}
.sockel ul{list-style:none;margin:0;padding:0;display:grid;gap:.45rem;font-size:.94rem}
.sockel__marke{font-family:var(--serif);font-size:1.5rem;color:var(--creme)}
.sockel__fuss{margin-top:1.8rem;padding-top:1.1rem;border-top:1px solid color-mix(in srgb,var(--gold) 40%,transparent);font-size:.8rem;color:color-mix(in srgb,var(--creme) 60%,transparent);display:flex;flex-wrap:wrap;gap:.4rem 1.4rem;justify-content:space-between}

/* Cookie */
.kekshinweis{position:fixed;left:1rem;right:1rem;bottom:1rem;z-index:80;max-width:540px;margin-inline:auto;background:var(--tinte);color:var(--creme);border-radius:var(--radius);padding:1.3rem 1.4rem;box-shadow:0 14px 40px rgba(0,0,0,.25);transform:translateY(160%);transition:transform .4s ease;visibility:hidden}
.kekshinweis.an{transform:translateY(0);visibility:visible}
.kekshinweis p{margin:0 0 .9rem;font-size:.9rem;color:color-mix(in srgb,var(--creme) 86%,transparent)}
.kekshinweis a{color:var(--creme)}
.kekshinweis__atti{display:flex;flex-wrap:wrap;gap:.6rem}
.kekshinweis .taste{padding:.55rem 1.1rem;font-size:.88rem}
.kekshinweis .taste--linie{color:var(--creme);border-color:color-mix(in srgb,var(--creme) 45%,transparent)}
.kekshinweis .taste--linie:hover{background:var(--creme);color:var(--tinte)}
.kekshinweis .taste--voll{background:var(--gold);color:var(--tinte)}

@media(min-width:780px){
  .schalter{display:none}
  .register{display:flex !important;position:static !important;gap:1.7rem;border:0 !important;padding:0 !important;background:transparent !important}
  .registerlink{border:0;padding:0}
  .podium-reihe .register-cta{display:inline-flex}
  .auftakt__gitter{grid-template-columns:1.02fr .98fr}
  .faecher{grid-template-columns:repeat(3,1fr)}
  .stufen{grid-template-columns:repeat(2,1fr)}
  .klaenge{grid-template-columns:repeat(3,1fr)}
  .preisliste{grid-template-columns:repeat(3,1fr)}
  .werte{grid-template-columns:repeat(4,1fr)}
  .bildnis{grid-template-columns:320px 1fr;gap:3rem}
  .kontaktspalten{grid-template-columns:.85fr 1.15fr}
  .sockel-gitter{grid-template-columns:1.5fr 1fr 1fr 1fr}
  .zeile{grid-template-columns:1fr 1fr}
}
@media(prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto}}