/* Schriften liegen im Ordner schriften/, keine Verbindung zu Google nötig */
@font-face{font-family:"Libre Caslon Display";font-style:normal;font-weight:400;font-display:swap;src:url(schriften/libre-caslon-display-400.woff2) format("woff2")}
@font-face{font-family:"Instrument Sans";font-style:normal;font-weight:400;font-display:swap;src:url(schriften/instrument-sans-400.woff2) format("woff2")}
@font-face{font-family:"Instrument Sans";font-style:normal;font-weight:500;font-display:swap;src:url(schriften/instrument-sans-500.woff2) format("woff2")}
@font-face{font-family:"Instrument Sans";font-style:normal;font-weight:600;font-display:swap;src:url(schriften/instrument-sans-600.woff2) format("woff2")}

:root{
  /* ---------- Firmenpalette Klavierunterricht Kim ---------- */
  --ink:#15171A;        /* Flügelschwarz, Schrift, dunkle Flächen */
  --graphite:#4A4F57;   /* Graphit, Nebentext */
  --studio:#DADADB;     /* Studiograu, aus dem Hintergrund des Porträts gemessen */
  --paper:#F2F2F3;      /* Papier, helle Wechselflächen */
  --white:#FFFFFF;      /* Tastenweiß */
  --line:#CDCFD3;       /* Haarlinie */
  --felt:#6B1F2A;       /* Weinrot, einzige Akzentfarbe, sparsam */
  --felt-dark:#541722;
  --blue:#2F4E73;       /* Notenblau, nur im Schülerbereich */

  --display:"Libre Caslon Display","Noto Serif KR","Apple SD Gothic Neo","Malgun Gothic",Georgia,serif;
  --sans:"Instrument Sans","Apple SD Gothic Neo","Malgun Gothic",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;

  --maxw:1180px;
  --gutter:clamp(20px,5vw,64px);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth;scrollbar-color:var(--graphite) var(--paper)}
body{
  margin:0;background:var(--white);color:var(--ink);
  font-family:var(--sans);font-weight:400;font-size:17px;line-height:1.6;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}
[lang="ko"] p,[lang="ko"] h1,[lang="ko"] h2,[lang="ko"] h3{word-break:keep-all}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
::selection{background:var(--felt);color:#fff}
:focus-visible{outline:3px solid var(--felt);outline-offset:3px}
.on-dark :focus-visible,.on-red :focus-visible{outline-color:#fff}

.wrap{max-width:var(--maxw);margin:0 auto;padding-left:var(--gutter);padding-right:var(--gutter)}

h1,h2,h3{font-family:var(--display);margin:0;text-wrap:balance}
h2{font-weight:400;font-size:clamp(2rem,3.8vw,3rem);line-height:1.12;letter-spacing:-.005em}
h2 em{font-style:normal}
h1 em{font-style:normal;color:var(--felt)}
h3{font-weight:400;font-size:1.45rem;line-height:1.2}
p{margin:0 0 1.1rem}
.muted{color:var(--graphite)}
.lead{font-size:clamp(1.15rem,1.9vw,1.35rem);line-height:1.5}

/* ---------- Buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.6rem;min-height:50px;
  font-family:var(--sans);font-weight:500;font-size:.97rem;letter-spacing:.02em;padding:0 1.7rem;border-radius:3px;
  border:1px solid transparent;cursor:pointer;transition:background .4s ease,color .4s ease,border-color .4s ease}
.btn-solid{background:var(--ink);color:#fff}
.btn-solid:hover{background:var(--felt)}
.btn-ghost{border-color:var(--ink);color:var(--ink)}
.btn-ghost:hover{background:var(--ink);color:#fff}
.btn-white{background:#fff;color:var(--ink)}
.btn-white:hover{background:var(--felt);color:#fff}
.ic{width:14px;height:14px;flex:0 0 14px}

/* ---------- Header ---------- */
header{position:sticky;top:0;z-index:50;background:#fff;border-bottom:1px solid var(--line)}
.nav{display:flex;align-items:center;justify-content:space-between;gap:1rem 2rem;flex-wrap:wrap;padding-top:10px;padding-bottom:10px}
.brand{display:flex;align-items:center;gap:.8rem;min-height:44px}
.bname{display:block;font-family:var(--display);font-weight:400;font-size:1.4rem;line-height:1.1}
.btag{display:block;font-size:.82rem;color:var(--graphite)}
.nav-right{display:flex;align-items:center;gap:1.4rem;min-width:0}
nav.links{display:flex;gap:1.8rem;font-size:.97rem;font-weight:500}
nav.links a{padding:.75rem 0;border-bottom:2px solid transparent;white-space:nowrap;transition:border-color .4s ease}
nav.links a:hover{border-bottom-color:var(--felt)}
.lang-btn{font:inherit;font-size:.9rem;font-weight:600;border:1px solid var(--ink);background:#fff;color:var(--ink);
  min-height:44px;padding:0 .9rem;border-radius:3px;cursor:pointer}
.lang-btn:hover{background:var(--ink);color:#fff}
.login{width:44px;height:44px;flex:0 0 44px;border:1px solid var(--line);border-radius:50%;
  display:flex;align-items:center;justify-content:center;transition:border-color .4s ease}
.login:hover{border-color:var(--ink)}

/* ---------- Hero: Studiograu aus dem Foto, darunter der Flügel ---------- */
.hero{background:var(--studio)}
.hero-grid{display:grid;grid-template-columns:1.35fr .65fr;gap:clamp(24px,5vw,72px);align-items:end}
.hero-copy{padding:clamp(48px,8vw,104px) 0 clamp(40px,6vw,80px)}
.han{font-size:1rem;letter-spacing:.3em;color:var(--graphite);margin:0 0 1.6rem}
h1{font-weight:400;font-size:clamp(2.8rem,6.6vw,5.6rem);line-height:1.02;letter-spacing:-.01em}
@media (min-width:480px){h1 em{white-space:nowrap}}
.sub{max-width:32em;margin:1.8rem 0 0;font-size:clamp(1.1rem,1.7vw,1.3rem);line-height:1.5}
.hero-cta{display:flex;gap:.8rem;flex-wrap:wrap;margin-top:2.2rem}
.portrait{margin:0;justify-self:end;width:100%;max-width:440px;aspect-ratio:2/3;overflow:hidden;
  -webkit-mask-image:linear-gradient(to right,transparent 0,#000 16%,#000 84%,transparent 100%),linear-gradient(to bottom,transparent 0,#000 14%);
  -webkit-mask-composite:source-in;
  mask-image:linear-gradient(to right,transparent 0,#000 16%,#000 84%,transparent 100%),linear-gradient(to bottom,transparent 0,#000 14%);
  mask-composite:intersect}
.portrait img{width:100%;height:100%;object-fit:cover;object-position:center top}

.piano{background:var(--ink);color:#fff}
.piano .lid{height:16px}
.piano .felt{height:5px;background:#8E2B38}
.kb-actions{display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap;padding:1rem 0 1.4rem}
.kb-hint{margin:0;color:#C9CDD2;font-size:.97rem}
.btn-melody{display:inline-flex;align-items:center;gap:.6rem;min-height:44px;font:inherit;font-weight:500;font-size:.97rem;letter-spacing:.02em;
  border:1px solid #6B7079;background:transparent;color:#fff;padding:0 1.1rem;border-radius:3px;cursor:pointer;
  transition:background .4s ease,border-color .4s ease}
.btn-melody:hover{background:var(--felt);border-color:var(--felt)}
.btn-melody[disabled]{opacity:.5;cursor:default}

/* ---------- Klaviatur ---------- */
.keyboard{position:relative;width:100%;display:flex;height:var(--kh,46px);overflow:hidden;background:var(--white);
  border-radius:0 0 4px 4px}
.keyboard .wkey{flex:1;border-right:1px solid #9FA3A9;position:relative;background:var(--white);
  transition:background .35s ease,transform .18s ease;transform-origin:top;cursor:pointer;touch-action:none}
.keyboard .wkey:last-child{border-right:none}
.keyboard .wkey:hover{background:#ECECEE}
.keyboard .wkey.played{background:#E9D5D8;box-shadow:inset 0 -4px 0 #8E2B38}
.keyboard .wkey.pressed{transform:scaleY(.965);background:#DFC3C7}
.keyboard .blacks{position:absolute;inset:0;pointer-events:none}
.keyboard .bkey{position:absolute;top:0;height:62%;width:calc(100%/52*0.62);
  background:var(--ink);border-radius:0 0 3px 3px;transform:translateX(-50%);
  transition:transform .22s ease,background .55s ease;
  pointer-events:auto;cursor:pointer;transform-origin:top;touch-action:none}
.keyboard .bkey.played,.keyboard .bkey.pressed{transform:translateX(-50%) scaleY(.93);background:#9A3A47;
  transition:transform .1s ease,background .06s ease}
.keyboard.static .wkey,.keyboard.static .bkey{pointer-events:none;cursor:default}
.keyboard.framed{border:1px solid var(--ink);border-top:5px solid #8E2B38;border-radius:0 0 4px 4px}

/* ---------- Abschnitte ---------- */
.section{padding:clamp(88px,11vw,160px) 0}
.section--paper{background:var(--paper)}
.section--dark{background:var(--ink);color:#fff}
.section--red{background:var(--felt);color:#fff}
.section--dark .muted{color:#C9CDD2}
.section--red .muted{color:#F6D9DB}

.phil-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(36px,6vw,90px)}
.phil-grid h2{margin-bottom:1.6rem}
.section--partner{padding-top:0}
.section--partner .wrap{border-top:1px solid var(--line);padding-top:clamp(64px,8vw,110px)}
.tenet{padding:1.4rem 0;border-top:1px solid var(--line)}
.tenet:first-child{border-top:1px solid var(--ink)}
.tenet:last-child{border-bottom:1px solid var(--line)}
.tenet h3{margin-bottom:.35rem}
.tenet p{margin:0;color:var(--graphite)}

.levels-intro{display:flex;justify-content:space-between;align-items:flex-end;gap:1.5rem 3rem;flex-wrap:wrap;margin-bottom:2.4rem}
.levels-intro p{max-width:34ch;margin:0;color:var(--graphite)}
.levels-kb{margin-bottom:2.2rem}
.levels{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(20px,3vw,40px)}
.level .reg{font-size:.92rem;color:var(--graphite);margin:0 0 .5rem;padding-top:1rem;border-top:1px solid var(--ink)}
.level h3{margin-bottom:.5rem}
.level p{color:var(--graphite);margin:0}

.focus{margin-top:2.6rem}
.focus-row{display:grid;grid-template-columns:.8fr 1.2fr;gap:.6rem clamp(24px,5vw,72px);padding:1.8rem 0;border-top:1px solid #3B4048}
.focus-row:last-child{border-bottom:1px solid #3B4048}
.focus-row h3{font-size:clamp(1.5rem,2.4vw,2rem)}
.focus-row p{margin:0;color:#C9CDD2;max-width:58ch}

.about-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(36px,6vw,90px);align-items:start}
.about-grid h2{font-size:clamp(1.8rem,3.2vw,2.5rem)}
.concert{margin:0}
.concert .ph{display:block;aspect-ratio:3/2;overflow:hidden;border-radius:2px}
.concert img{width:100%;height:100%;object-fit:cover}
.concert figcaption{font-size:.92rem;color:var(--graphite);margin-top:.8rem}
.cv{margin-top:1.8rem}
.cv-row{display:grid;grid-template-columns:124px 1fr;gap:1.2rem;padding:.9rem 0;border-top:1px solid var(--line);align-items:baseline}
.cv-row:last-child{border-bottom:1px solid var(--line)}
.cv-row .yr{font-size:.92rem;color:var(--graphite);font-variant-numeric:tabular-nums}
.cv-row .what{font-weight:500}
.cv-row small{display:block;color:var(--graphite);font-size:.92rem;font-weight:400;margin-top:.1rem}

.steps{list-style:none;margin:2.4rem 0 0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(20px,3vw,40px);counter-reset:step}
.step{counter-increment:step}
.step::before{content:counter(step);display:block;font-family:var(--display);font-weight:400;font-size:3.2rem;line-height:1;color:var(--ink);margin-bottom:.8rem;padding-top:1rem;border-top:1px solid var(--ink)}
.step h3{margin-bottom:.4rem}
.step p{color:var(--graphite);margin:0}

.invest-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(36px,6vw,90px);align-items:center}
.invest-grid h2{margin-bottom:1.4rem}
.price-note{font-family:var(--display);font-weight:400;font-size:clamp(1.5rem,2.6vw,2.1rem);line-height:1.3;margin:0}
.price-note span{color:var(--felt)}

.faq{max-width:820px;margin-top:2rem}
.faq details{border-top:1px solid var(--line)}
.faq details:first-child{border-top:1px solid var(--ink)}
.faq details:last-child{border-bottom:1px solid var(--line)}
.faq summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:center;
  padding:1.1rem 0;min-height:44px;font-family:var(--display);font-weight:400;font-size:1.4rem;gap:1rem}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";flex:0 0 16px;width:16px;height:16px;transition:transform .3s ease;
  background:linear-gradient(var(--felt),var(--felt)) center/100% 2px no-repeat,linear-gradient(var(--felt),var(--felt)) center/2px 100% no-repeat}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq details p{color:var(--graphite);padding-bottom:1.3rem;margin:0;max-width:62ch}

.contact-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(36px,6vw,90px);align-items:center}
.contact-grid h2{margin-bottom:1.2rem}
.crow{display:flex;justify-content:space-between;gap:1rem;padding:.95rem 0;border-top:1px solid #3B4048}
.crow:last-child{border-bottom:1px solid #3B4048}
.crow .k{color:#C9CDD2}
.crow a{text-decoration:underline;text-underline-offset:3px;display:inline-flex;align-items:center;min-height:44px;margin:-12px 0} /* 44 px Tippfläche, Zeilenhöhe bleibt */

footer{background:var(--ink);color:#C9CDD2;padding:2rem 0 2.4rem;border-top:1px solid #3B4048}
.foot{display:flex;justify-content:space-between;align-items:center;gap:.5rem 1.5rem;flex-wrap:wrap;font-size:.95rem}
.foot a{display:inline-flex;align-items:center;min-height:44px;text-decoration:underline;text-underline-offset:3px}
.foot a:hover{color:#fff}
.seo-line{font-size:.85rem;color:#9FA4AB;margin:.9rem 0 0}

@media (max-width:900px){
  .hero-grid{grid-template-columns:1fr;gap:0}
  .hero-copy{padding-bottom:32px}
  .portrait{max-width:300px;justify-self:center}
  .phil-grid,.about-grid,.invest-grid,.contact-grid,.focus-row{grid-template-columns:1fr}
  .phil-grid,.about-grid,.invest-grid,.contact-grid{gap:40px}
  .levels,.steps{grid-template-columns:1fr 1fr}
  .nav-right{width:100%;justify-content:space-between}
  nav.links{overflow-x:auto;gap:1.4rem;scrollbar-width:none}
  nav.links::-webkit-scrollbar{display:none}
}
@media (max-width:640px){
  .crow{flex-direction:column;gap:.1rem}
  .levels,.steps{grid-template-columns:1fr}
  .hero-cta .btn{flex:1 1 100%}
  header{position:static}
  .nav{position:relative}
  .nav-right{flex:1 1 100%}
  nav.links{flex-wrap:wrap;overflow:visible;gap:0 1.3rem;font-size:.95rem}
  nav.links a{padding:.55rem 0}
  .login{position:absolute;top:10px;right:var(--gutter)}
}
/* Mobil: Klaviatur scrollbar mit tippbaren Tasten */
@media (max-width:700px){
  .kb-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none;
    margin-left:calc(-1*var(--gutter));margin-right:calc(-1*var(--gutter))}
  .kb-scroll::-webkit-scrollbar{display:none}
  .kb-scroll .keyboard{min-width:1460px}
  #kb-hero{height:110px}
  #kb-levels{height:64px}
  .keyboard .wkey,.keyboard .bkey{touch-action:pan-x}
  .kb-actions{flex-direction:column;align-items:stretch;text-align:center}
  .btn-melody{justify-content:center;min-height:52px}
}

/* ---------- Abschnitt „Alles digital" ---------- */
.digital-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(36px,6vw,90px);align-items:center}
.dig-list{margin-top:1.8rem}
.dig-row{display:grid;grid-template-columns:.8fr 1.2fr;gap:.3rem 1.5rem;padding:1.1rem 0;border-top:1px solid var(--line)}
.dig-row:first-child{border-top:1px solid var(--ink)}
.dig-row:last-child{border-bottom:1px solid var(--line)}
.dig-row h3{font-size:1.25rem}
.dig-row p{margin:0;color:var(--graphite)}
.preview{margin:0;justify-self:center;width:100%;max-width:360px}
.preview figcaption{font-size:.92rem;color:var(--graphite);margin-top:1rem;text-align:center}
.pv{background:#EDF0F3;border:1px solid var(--line);border-radius:14px;padding:14px;display:flex;flex-direction:column;gap:10px;
  box-shadow:0 22px 44px -22px rgba(21,23,26,.4);font-size:.9rem;line-height:1.4;color:#18202B}
.pv-next{background:#18202B;color:#fff;border-radius:10px;padding:16px;display:flex;flex-direction:column;gap:2px}
.pv-next span{color:#C9D1DA;font-size:.82rem}
.pv-next strong{font-size:1.25rem;font-weight:600}
.pv-box{background:#fff;border:1px solid #D5DBE2;border-radius:10px;padding:14px;display:flex;flex-direction:column;gap:8px}
.pv-l{font-weight:600;font-size:.82rem;color:#556170}
.pv-keys{display:flex;gap:2px;align-items:flex-start;height:34px}
.pv-keys i{flex:1;height:34px;background:#fff;border:1px solid #18202B;border-radius:0 0 3px 3px}
.pv-keys i.t{height:22px;background:#18202B}
.pv-week{display:grid;grid-template-columns:repeat(7,1fr);gap:3px;text-align:center;font-size:.78rem}
.pv-week span{border:1px solid #D5DBE2;border-radius:5px;padding:5px 0 4px;line-height:1.25}
.pv-week .l{background:#2F4E73;color:#fff;border-color:#2F4E73}
.pv-week .a{background:#F1D9DA;color:#7A161C;border-color:#F1D9DA}
.pv-actions{display:flex;gap:8px}
.pv-btn{flex:1;text-align:center;border:1px solid #18202B;border-radius:6px;padding:9px 0;font-weight:600;background:#fff}
.pv-btn.r{border-color:#A8232B;color:#A8232B}
@media (max-width:900px){.digital-grid{grid-template-columns:1fr;gap:40px}}
@media (max-width:640px){.dig-row{grid-template-columns:1fr}}
@media (prefers-reduced-motion:reduce){
  *{scroll-behavior:auto !important;transition:none !important;animation:none !important}
}

/* Früher Inline-Stile im HTML: als Klassen, damit die Richtlinie der Seite ohne 'unsafe-inline' auskommt */
#kb-hero{--kh:104px}
#kb-levels{--kh:56px}
.mt-1{margin-top:1rem}
.mt-13{margin-top:1.3rem}
.mt-2{margin-top:2rem}
.m-0{margin:0}