:root{
  --bg:#fafafa;
  --text:#2F2F2F;
  --heading:#222222;
  --muted:#555555;
  --border:#dedede;
  --active-bg:#f3fafe;
  --interaction-blue:#0877A6;
  --button-bg:#36A9E1;
  --button-hover:#2D9CCF;
  --button-text:#ffffff;
  --klavier:#93C01F;
  --gitarre:#F9CB0D;
  --gesang:#F29100;
  --schlagzeug:#BD1622;
  --wide:66rem;
  --nav-width:46rem;
  --reading-measure:38rem;
  --form-width:39rem;
  --radius:.35rem;
}

/* 1. Grundlayout */
*,*::before,*::after{box-sizing:border-box;}

html{scroll-behavior:smooth;}

body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:Arial,Helvetica,sans-serif;
  font-size:16px;
  line-height:1.62;
  text-rendering:optimizeLegibility;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

img{
  max-width:100%;
  height:auto;
}

main{display:block;}

/* 2. Links und Fokus */
a[href^="mailto:"],
a[href^="tel:"],
.site-footer a{
  color:var(--interaction-blue);
  text-decoration:none;
}

a[href^="mailto:"]:hover,
a[href^="tel:"]:hover,
.site-footer a:hover,
.site-footer a:focus-visible{
  color:var(--button-hover);
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible{
  outline:3px solid rgba(54,169,225,.5);
  outline-offset:3px;
}

.skip-link{
  position:absolute;
  left:.75rem;
  top:-5rem;
  z-index:200;
  padding:.65rem .9rem;
  background:#111;
  color:#fff;
}

.skip-link:focus{top:.75rem;}

/* 3. Header und Navigation */
.masthead-shell{
  background:rgba(255,255,255,.98);
  border-bottom:1px solid var(--border);
}

.site-header{
  width:min(calc(100% - 2rem),var(--wide));
  margin-inline:auto;
  padding:.65rem 0 .08rem;
}

.brand-row{
  display:flex;
  align-items:center;
  justify-content:center;
}

.brand{
  display:inline-block;
  line-height:0;
}

.brand-logo{
  display:block;
  width:11.6rem;
  max-width:48vw;
  margin-inline:auto;
}

.nav-wrap{position:relative;}

.nav-bar{
  width:min(calc(100% - 2rem),var(--nav-width));
  min-height:2.8rem;
  margin-inline:auto;
  display:flex;
  align-items:center;
  justify-content:center;
}

.nav-toggle{
  display:none;
  min-height:2.7rem;
  padding:.4rem .78rem;
  border:1px solid #d7d7d7;
  border-radius:var(--radius);
  background:#fff;
  color:#2F2F2F;
  font:inherit;
  cursor:pointer;
}

.main-nav ul{
  list-style:none;
  margin:0;
  padding:0;
  display:flex;
  align-items:center;
  justify-content:center;
  flex-wrap:wrap;
  gap:.12rem;
}

.main-nav li{
  margin:0;
  padding:0;
}

.main-nav a{
  display:block;
  padding:.38rem .52rem;
  border-radius:.28rem;
  color:#2E2E2E;
  text-decoration:none;
  font-size:1rem;
  font-weight:400;
  line-height:1.35;
}

.main-nav a:hover,
.main-nav a:focus-visible{
  color:var(--interaction-blue);
  background:transparent;
}

.main-nav a[aria-current="page"]{
  color:#26343a;
  background:var(--active-bg);
}

/* 4. Typografie und gemeinsame Lesespalte */
h1,h2,h3{
  color:var(--heading);
  font-weight:400;
  line-height:1.22;
}

h1{
  margin:0 0 1rem;
  font-size:clamp(1.85rem,3vw,2.35rem);
  text-align:center;
}

h2{
  margin:2rem 0 .7rem;
  font-size:1.42rem;
  text-align:center;
}

h3{font-size:1.28rem;}

p{margin:.75rem 0;}

.page-header,
.content-section{
  width:min(calc(100% - 2.4rem),var(--reading-measure));
  margin-inline:auto;
}

.page-header{
  padding-top:2rem;
  text-align:left;
}

.page-header h1{text-align:center;}

.page-header .lead{
  width:100%;
  margin:.45rem 0 0;
  text-align:left;
  line-height:1.62;
}

.content-section{margin-top:1.45rem;}

.content-section p{
  max-width:none;
  text-align:left;
}

.lesson-page{
  width:100%;
  margin-inline:auto;
  padding-bottom:2rem;
}

.lesson-page .content-section h2{margin-top:2.05rem;}

.lesson-page .content-section p{line-height:1.66;}

/* 5. Buttons */
.button,
button[type="submit"]{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:2.7rem;
  padding:.65rem 1rem;
  border:1px solid var(--button-bg);
  border-radius:var(--radius);
  background:var(--button-bg);
  color:var(--button-text);
  font:inherit;
  font-weight:700;
  line-height:1.2;
  text-decoration:none;
  cursor:pointer;
}

.button:hover,
.button:focus-visible,
button[type="submit"]:hover,
button[type="submit"]:focus-visible{
  background:var(--button-hover);
  border-color:var(--button-hover);
  color:var(--button-text);
  text-decoration:none;
}

.hero-button-row,
.cta-row,
.content-section>p:has(.button){
  display:flex;
  justify-content:center;
  width:100%;
  margin-top:1.3rem;
}

/* 6. Startseite */
.hero{
  padding:1.5rem 0 .8rem;
  text-align:center;
}

.hero>header{
  width:min(calc(100% - 2rem),var(--nav-width));
  margin-inline:auto;
}

.hero h1{
  font-size:clamp(1.9rem,3vw,2.3rem);
  margin-bottom:1.2rem;
}

.home-intro-photo{
  display:block;
  width:9.1rem;
  aspect-ratio:1;
  margin:0 auto 1.25rem;
}

.home-intro-photo a{
  display:block;
  border-radius:50%;
  line-height:0;
}

.home-intro-photo img{
  display:block;
  width:100%;
  aspect-ratio:1;
  object-fit:cover;
  border-radius:50%;
}

.home-intro-photo a:focus-visible{
  outline:3px solid rgba(54,169,225,.5);
  outline-offset:4px;
}

.hero .lead{
  max-width:39rem;
  margin:.8rem auto;
  text-align:center;
  font-size:1rem;
}

.home-intro{
  padding:.85rem 0 2.3rem;
}

.home-intro .content{
  width:min(calc(100% - 2.4rem),var(--reading-measure));
  margin-inline:auto;
  text-align:left;
  font-size:1rem;
  line-height:1.68;
}

.home-intro .content p{
  width:100%;
  max-width:none;
  margin-left:0;
  margin-right:0;
  text-align:left;
}

/* 7. Instrumente */
.instrument-overview{
  padding:1.2rem 0 2.7rem;
}

.instrument-grid{
  width:min(calc(100% - 2rem),44rem);
  margin-inline:auto;
  padding:0;
  list-style:none;
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:2.8rem 3rem;
}

.instrument-grid>li{
  margin:0;
  padding:0;
}

.instrument-card{text-align:center;}

.instrument-card h3{
  margin:0 0 .9rem;
  font-size:1.9rem;
  font-weight:400;
  text-align:center;
}

.instrument-card h3 a{
  color:inherit;
  text-decoration:none;
}

.instrument-card h3 a:hover,
.instrument-card h3 a:focus-visible{
  color:var(--interaction-blue);
  text-decoration:none;
}

.instrument-image-link{
  position:relative;
  display:inline-block;
  width:9rem;
  height:9rem;
  border-radius:50%;
  line-height:0;
  vertical-align:middle;
  text-decoration:none;
  background:#fff;
}

.instrument-image-link::before{
  content:"";
  position:absolute;
  inset:0;
  border-radius:50%;
  border:4px solid currentColor;
  box-sizing:border-box;
}

.instrument-image-link img{
  position:absolute;
  inset:4px;
  display:block;
  width:calc(100% - 8px);
  height:calc(100% - 8px);
  object-fit:cover;
  border:0;
  border-radius:50%;
  transform:translateZ(0);
}

.instrument-card p{
  max-width:19rem;
  margin:.8rem auto 0;
  text-align:center;
  line-height:1.48;
}

.instrument-card.klavier .instrument-image-link{color:var(--klavier);}
.instrument-card.gitarre .instrument-image-link{color:var(--gitarre);}
.instrument-card.gesang .instrument-image-link{color:var(--gesang);}
.instrument-card.schlagzeug .instrument-image-link{color:var(--schlagzeug);}

/* 8. Kontaktformular und Anfahrt */
.home-contact{
  padding:2.6rem 0 2.4rem;
}

.contact{
  width:min(calc(100% - 2.4rem),var(--reading-measure));
  margin-inline:auto;
}

.contact>header{text-align:center;}

.contact>header h1,
.contact>header h2{
  margin-bottom:.6rem;
}

.contact>header .lead,
.contact>header p{
  max-width:34rem;
  margin-inline:auto;
  text-align:center;
}

.contact-details{
  margin:1.2rem auto 1.3rem;
  text-align:center;
  font-style:normal;
}

.contact-details p{
  margin:.35rem 0;
  text-align:center;
}

.contact-form{width:100%;}

.contact-form p{
  margin:0 0 1rem;
}

.contact-form label,
.contact-form legend{
  display:block;
  margin-bottom:.38rem;
  font-weight:600;
}

.contact-form input:not([type="checkbox"]),
.contact-form textarea{
  width:100%;
  padding:.68rem .72rem;
  border:1px solid #cfcfcf;
  border-radius:.25rem;
  background:#fff;
  color:var(--text);
  font:inherit;
}

.contact-form textarea{
  min-height:9rem;
  resize:vertical;
}

.contact-form fieldset{
  margin:0 0 1rem;
  padding:0;
  border:0;
}

.instrument-checkboxes{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:.45rem 1.5rem;
}

.instrument-checkboxes label,
.contact-form fieldset label{
  display:flex;
  gap:.48rem;
  align-items:flex-start;
  font-weight:400;
}

.instrument-checkboxes .wide{grid-column:1/-1;}

.form-note{
  padding:.75rem .9rem;
  border-left:3px solid #b7b7b7;
  background:#fafafa;
  color:#555;
  font-size:.94rem;
}

.contact-form>button{
  display:flex;
  margin:1.15rem auto 0;
}

.directions{
  padding:1.8rem 0 1.4rem;
}

.directions .content{
  width:min(calc(100% - 2.4rem),var(--reading-measure));
  margin-inline:auto;
  text-align:center;
}

.directions h2{margin-top:0;}

.directions p,
.directions address{
  text-align:center;
}

.directions address{font-style:normal;}

/* Sprungziel Kontakt & Probestunde */
#probestunde{scroll-margin-top:6.2rem;}
#probestunde.home-contact{padding-top:1.35rem;}
#probestunde .contact{padding-top:0;}

/* 9. Preise */
.price-page{
  padding:2rem 0 2.5rem;
}

.page-preise .price-content{
  width:min(calc(100% - 2.4rem),var(--reading-measure));
  margin-inline:auto;
  transform:translateX(.12rem);
}

.page-preise .price-list{
  display:block;
  max-width:24rem;
  margin-inline:auto;
  padding:0 0 0 1rem;
  border:0;
}

.page-preise .price-content h1{
  margin:0 0 1.5rem;
  text-align:center;
  font-size:clamp(1.75rem,2.7vw,2rem);
  font-weight:400;
}

.page-preise .price-entry{
  text-align:left;
  padding:0;
  margin:0 0 1.25rem;
  border:0;
}

.page-preise .price-entry+.price-entry{
  margin-top:1.1rem;
}

.page-preise .price-entry h2{
  margin:0 0 .35rem;
  font-size:1rem;
  line-height:1.4;
  font-weight:700;
  text-align:left;
}

.page-preise .price-entry p{
  margin:.12rem 0;
  font-size:1rem;
  line-height:1.55;
  text-align:left;
}

.page-preise .price-entry p strong{font-weight:600;}

.page-preise .price-notes{
  margin-top:1.35rem;
}

.page-preise .price-notes p{
  margin:.75rem 0;
  font-size:1rem;
  line-height:1.62;
  text-align:left;
}

.page-preise .price-content .cta-row{
  margin:1.75rem 0 0;
}

/* 10. Über mich */
.page-ueber-mich article{
  padding-bottom:1rem;
}

.page-ueber-mich .about-photo{
  width:min(calc(100% - 2.4rem),var(--reading-measure));
  margin-inline:auto;
}

.page-ueber-mich .content-section{
  margin-top:1.15rem;
}

.page-ueber-mich .content-section p{
  width:100%;
  max-width:none;
  margin:.75rem 0 1.25rem;
  color:var(--text);
  line-height:1.66;
  text-align:left;
}

.about-photo{
  margin-top:1.7rem;
  margin-bottom:1.2rem;
}

.about-photo img{
  display:block;
  width:100%;
  height:auto;
}

/* 11. Impressum / AGB / Datenschutz */
.page-rechtliches .legal{
  width:100%;
  padding-bottom:1rem;
}

.page-rechtliches .content-section{
  margin-top:1.15rem;
  line-height:1.67;
}

.page-rechtliches .content-section p{
  width:100%;
  max-width:none;
}

.page-impressum .content-section{
  max-width:24rem;
  margin-inline:auto;
  padding-left:.10rem;
  text-align:left;
}

.page-impressum .content-section p{
  margin:.85rem 0;
  text-align:left;
}

.page-datenschutz #hauptinhalt{
  width:min(calc(100% - 4rem),var(--reading-measure));
  margin-inline:auto;
}

.page-datenschutz #hauptinhalt p{
  width:100%;
  margin:.75rem 0 1.25rem;
  line-height:1.67;
  text-align:left;
}

.page-datenschutz #hauptinhalt h1,
.page-datenschutz #hauptinhalt h2{
  text-align:center;
}

/* Kontakt-Unterseite bleibt aus Gründen bestehender URLs erhalten. */
.page-kontakt .contact-form{
  margin-top:1.4rem;
}

/* 12. Footer */
.site-footer{
  width:min(calc(100% - 2rem),var(--form-width));
  margin:2rem auto 0;
  padding:1.2rem 0 1.5rem;
  border-top:1px solid var(--border);
  text-align:center;
  color:var(--muted);
  font-size:.92rem;
}

.site-footer p{
  max-width:none;
  margin:.45rem 0;
  text-align:center;
}

.site-footer ul{
  list-style:none;
  margin:.6rem 0;
  padding:0;
  display:flex;
  justify-content:center;
  flex-wrap:wrap;
  gap:.45rem .9rem;
}

/* 13. Nach-oben-Button */
.scroll-top{
  position:fixed;
  right:1rem;
  bottom:1rem;
  z-index:75;
  width:2.78rem;
  height:2.78rem;
  padding:0;
  border:0;
  border-radius:.46rem;
  background:var(--button-bg);
  box-shadow:0 .12rem .38rem rgba(0,0,0,.12);
  cursor:pointer;
  opacity:0;
  visibility:hidden;
  transform:translateY(.35rem);
  transition:
    opacity .18s ease,
    transform .18s ease,
    visibility .18s ease,
    background-color .18s ease;
}

.scroll-top::before{
  content:"";
  display:block;
  width:.56rem;
  height:.56rem;
  margin:.2rem auto 0;
  border-left:2px solid #fff;
  border-top:2px solid #fff;
  transform:rotate(45deg);
}

.scroll-top.is-visible{
  opacity:1;
  visibility:visible;
  transform:translateY(0);
}

.scroll-top:hover,
.scroll-top:focus-visible{
  background:var(--button-hover);
}

/* 14. Desktop */
@media (min-width:58rem){
  .masthead-shell{
    position:sticky;
    top:0;
    z-index:80;
  }

  .main-nav[hidden]{display:block;}
}

/* 15. Mobil */
@media (max-width:57.99rem){
  :root{--reading-measure:28rem;}

  body{font-size:16px;}

  .masthead-shell{
    position:static;
    border-bottom:0;
    background:#fff;
  }

  .site-header{
    width:100%;
    min-height:4.15rem;
    padding:.6rem 3.8rem .45rem;
    display:flex;
    align-items:center;
    justify-content:center;
    border-bottom:1px solid var(--border);
  }

  .brand-logo{
    width:11.7rem;
    max-width:62vw;
    margin-inline:auto;
  }

  .nav-wrap{
    position:fixed;
    top:0;
    left:0;
    right:0;
    z-index:90;
    height:4.15rem;
    background:transparent;
    pointer-events:none;
  }

  .nav-bar{
    width:100%;
    height:4.15rem;
    min-height:0;
    padding:0 .75rem;
    justify-content:flex-end;
  }

  .nav-toggle{
    display:inline-flex;
    flex-direction:column;
    gap:.28rem;
    align-items:center;
    justify-content:center;
    width:2.85rem;
    min-height:2.85rem;
    padding:.55rem;
    pointer-events:auto;
    border:0;
    border-radius:.35rem;
    background:rgba(255,255,255,.94);
    box-shadow:none;
  }

  .nav-toggle span{
    display:block;
    width:1.28rem;
    height:2px;
    border-radius:2px;
    background:#333;
  }

  .main-nav{
    position:absolute;
    z-index:100;
    top:4.15rem;
    left:0;
    right:0;
    width:100%;
    padding:1rem 1.25rem 1.2rem;
    border-top:1px solid var(--border);
    border-bottom:1px solid var(--border);
    background:#fff;
    box-shadow:0 .25rem .65rem rgba(0,0,0,.06);
    pointer-events:auto;
  }

  .main-nav[hidden]{display:none;}

  .main-nav ul{
    display:grid;
    justify-items:start;
    gap:.15rem;
    width:min(100%,22rem);
    margin-left:1.25rem;
  }

  .main-nav a{
    min-height:auto;
    display:block;
    padding:.5rem 0;
    text-align:left;
    text-decoration:none;
    font-size:1.08rem;
    line-height:1.4;
  }

  body:has(.main-nav:not([hidden])) main{
    margin-top:23rem;
  }

  h1{font-size:1.9rem;}
  h2{font-size:1.35rem;}

  .hero{padding-top:1.15rem;}

  .hero>header,
  .home-intro .content,
  .contact,
  .directions .content,
  .page-header,
  .content-section,
  .page-ueber-mich .about-photo,
  .page-preise .price-content{
    width:min(calc(100% - 4rem),var(--reading-measure));
    margin-inline:auto;
  }

  .lesson-page{width:100%;}

  .page-header .lead,
  .lesson-page p,
  .lesson-page .content-section p,
  .home-intro .content p{
    text-align:left;
  }

  .home-intro-photo{width:8.7rem;}

  .instrument-grid{
    width:min(calc(100% - 2.4rem),29rem);
    grid-template-columns:1fr;
    gap:2.4rem;
  }

  .instrument-card h3{
    font-size:1.85rem;
    margin-bottom:.9rem;
  }

  .instrument-card p{max-width:24rem;}

  .instrument-checkboxes{grid-template-columns:1fr;}

  .instrument-checkboxes .wide{grid-column:auto;}

  .page-preise .price-content h1,
  .page-ueber-mich .page-header h1,
  .page-kontakt .contact>header h1,
  .page-rechtliches .page-header h1{
    font-size:1.9rem;
    line-height:1.22;
    font-weight:400;
  }

  .page-preise .price-entry{margin-bottom:1.2rem;}

  .page-ueber-mich .content-section p{line-height:1.62;}

  .about-photo{margin-top:1.5rem;}

  #probestunde{scroll-margin-top:1rem;}
  #probestunde.home-contact{padding-top:1rem;}
  #probestunde .contact{padding-top:0;}

  .site-footer{
    width:min(calc(100% - 2.4rem),29rem);
  }

  .scroll-top{
    right:.85rem;
    bottom:.85rem;
  }
}

/* 16. Reduzierte Bewegung */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}

  *,*::before,*::after{
    animation-duration:.01ms!important;
    animation-iteration-count:1!important;
    transition-duration:.01ms!important;
  }
}