/* Gemeinsame Formate der Website (formate.css), für die Anmeldeseite als Datei */
/* Handy quer: oberer Bereich passt auf den Bildschirm, Kontaktleiste unten waagerecht */
@media (orientation:landscape) and (max-height:500px){.hero{height:100svh;min-height:340px}.hc .title{font-size:clamp(2.6rem,21svh,5.6rem)}.hmark{width:150px;bottom:10px}
.dock{top:auto;right:clamp(14px,2.4vw,34px);bottom:calc(10px + env(safe-area-inset-bottom,0px));transform:none;grid-auto-flow:column}.dock .sep{width:1px;height:auto;margin:8px 2px}
.dock .totop,.dock .totop-sep{max-height:none;max-width:0;margin-top:0;margin-left:-6px;transition:max-width .35s,opacity .3s,margin .35s}.dock.up .totop{max-width:40px;margin-left:0}.dock.up .totop-sep{max-width:1px;margin-left:0;margin-top:8px}
.dock.nosound #soundBtn,.dock.nosound .snd-sep{max-height:none;max-width:0;margin-top:0;margin-left:-6px;transition:max-width .35s,opacity .3s,margin .35s}}
/* Tablet hochkant: flacherer oberer Bereich statt leerer Fläche */
@media (min-width:761px) and (max-width:1200px) and (orientation:portrait){.hero{height:auto;min-height:0;aspect-ratio:1/1}}
/* sehr kleine Handys: Fächerliste im Fußbereich einspaltig */
@media (max-width:400px){.flist.two{grid-template-columns:1fr}.footer{grid-template-columns:minmax(0,1fr)}}
/* große Bildschirme: Menü, Kontaktleiste und Logo wachsen mit */
@media (min-width:1900px){.nav .wrap,.dock{zoom:1.15}.hmark{width:240px}}
@media (min-width:2300px){.nav .wrap,.dock{zoom:1.3}.hmark{width:280px}}
/* Handy: Tooltips der Kontaktleiste ausblenden (Touch), sonst ragen sie über den Rand */
@media (max-width:760px),(orientation:landscape) and (max-height:500px){.dock .tip{display:none}}
/* sehr kleine Handys: lange Wörter in Überschriften nicht über den Rand */
@media (max-width:400px){html .mt-info h1{font-size:2.05rem}h1,h2{overflow-wrap:break-word;hyphens:auto}}
@media (max-width:400px){html .pg-facts{grid-template-columns:repeat(2,minmax(0,1fr))}html .pg-facts div{padding:14px 14px}html .pg-facts b{hyphens:auto;overflow-wrap:break-word}html .faq-head{grid-template-columns:minmax(0,1fr)}}
/* ---------- Cookie-Banner (eigener, ohne Fremdanbieter) ---------- */
.cc[hidden],.cc [hidden]{display:none!important}
.cc{position:fixed;left:clamp(12px,2.4vw,34px);bottom:calc(clamp(12px,2.4vw,34px) + env(safe-area-inset-bottom,0px));z-index:200;width:min(460px,calc(100% - 24px));background:#fff;color:var(--ink);border:1px solid var(--ink);border-radius:18px;box-shadow:0 30px 60px -30px rgba(28,24,48,.55);opacity:0;transform:translateY(16px);transition:opacity .3s,transform .3s}
.cc.in{opacity:1;transform:none}
.cc-in{padding:20px 22px 18px}
.cc b#cc-h{display:block;font-family:var(--sans);font-weight:800;font-size:1.15rem;letter-spacing:-.02em;margin-bottom:8px}
.cc p{margin:0 0 14px;font-size:.88rem;line-height:1.55;color:#4a4458}
.cc p a{color:var(--ink);text-decoration:underline;text-underline-offset:2px}
.cc-btns{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.cc-b{font:inherit;font-family:var(--sans);font-weight:700;font-size:.9rem;padding:.75em 1em;border-radius:14px;border:1px solid var(--ink);background:#fff;color:var(--ink);cursor:pointer;transition:background .15s,color .15s}
.cc-b:hover,.cc-b:focus-visible{background:var(--ink);color:#fff}
.cc-more,.cc-save{grid-column:1/-1;border-color:transparent;text-decoration:underline;text-underline-offset:3px;font-weight:600}
.cc-save{text-decoration:none;border-color:var(--ink)}
.cc-opt{display:grid;gap:10px;margin:0 0 14px;padding:12px 0;border-block:1px solid #e6e1d8}
.cc-row{display:grid;grid-template-columns:auto 1fr;gap:12px;align-items:start;font-size:.85rem;line-height:1.45;color:#4a4458;cursor:pointer}
.cc-row b{display:block;color:var(--ink);font-family:var(--sans);font-weight:800}
.cc-row input{width:20px;height:20px;margin:2px 0 0;accent-color:#1c1830}
@media (max-width:760px){.cc{left:12px;right:12px;width:auto;bottom:calc(12px + env(safe-area-inset-bottom,0px))}html.cc-open .dock{opacity:0;pointer-events:none}}
/* Karte erst nach Klick */
.kmap-load{position:absolute;inset:0;z-index:3;display:grid;place-content:center;gap:2px;padding-top:56px;border:0;background:transparent;color:#f1eadf;font:inherit;font-family:var(--sans);font-weight:800;font-size:.85rem;cursor:pointer;border-radius:50%}
.kmap-load small{font-family:"DM Mono",ui-monospace,monospace;font-size:.6rem;letter-spacing:.14em;text-transform:uppercase;color:var(--brass-lt);font-weight:500}
.kmap-load:hover,.kmap-load:focus-visible{background:rgba(202,158,103,.12)}
.kmap.live .kmap-load,.kmap.live .ph{display:none}
.kmap:not(.live) .lbl{bottom:14%}
/* Video erst nach Zustimmung */
.kino-go{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:4;display:inline-flex;align-items:center;gap:10px;padding:.85em 1.3em;border-radius:16px;border:1px solid #fff;background:rgba(21,18,28,.55);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);color:#fff;font:inherit;font-family:var(--sans);font-weight:700;font-size:1rem;cursor:pointer;transition:background .15s,color .15s}
.kino-go svg{width:18px;height:18px}
.kino-go small{font-family:"DM Mono",ui-monospace,monospace;font-size:.62rem;letter-spacing:.12em;text-transform:uppercase;opacity:.75;font-weight:500}
.kino-go:hover,.kino-go:focus-visible{background:#fff;color:var(--ink)}
/* Cookie-Symbol unten links (nach der ersten Entscheidung) */
.cc-fab{position:fixed;left:clamp(12px,2.4vw,34px);bottom:calc(clamp(12px,2.4vw,34px) + env(safe-area-inset-bottom,0px));z-index:150;width:46px;height:46px;border-radius:50%;border:1px solid var(--ink);background:#fff;color:var(--ink);display:grid;place-items:center;cursor:pointer;box-shadow:0 14px 30px -18px rgba(28,24,48,.6);transition:background .15s,color .15s,transform .15s}
.cc-fab svg{width:22px;height:22px}
.cc-fab:hover,.cc-fab:focus-visible{background:var(--ink);color:#fff;transform:scale(1.05)}
.cc-fab .tip{position:absolute;left:calc(100% + 10px);top:50%;transform:translateY(-50%);white-space:nowrap;background:var(--ink);color:#fff;font-family:var(--sans);font-weight:700;font-size:.78rem;padding:.45em .8em;border-radius:10px;opacity:0;pointer-events:none;transition:opacity .2s}
.cc-fab:hover .tip,.cc-fab:focus-visible .tip{opacity:1}
html.cc-open .cc-fab{opacity:0;pointer-events:none}
@media (max-width:760px){.cc-fab{left:12px;bottom:calc(18px + env(safe-area-inset-bottom,0px));width:44px;height:44px}.cc-fab .tip{display:none}}
/* „Zum Inhalt springen“ – nur bei Tastaturbedienung sichtbar */
.skip{position:fixed;left:12px;top:12px;z-index:300;padding:.7em 1.1em;border-radius:12px;background:#fff;color:var(--ink);border:2px solid var(--ink);font-family:var(--sans);font-weight:700;text-decoration:none;transform:translateY(-200%);transition:transform .2s}
.skip:focus{transform:none}
main:focus{outline:none}
/* Seitenleiste: Probestunde-Knopf hervorgehoben */
.dock a.dock-pb{background:var(--ink);color:#fff}
.dock a.dock-pb:hover,.dock a.dock-pb:focus-visible{background:var(--brass-lt);color:#1c1208}
/* Symbole in Buttons */
.btn .bi{width:1.15em;height:1.15em;flex:none;margin-left:-.15em}
.rc-cta .bi{width:1.05em;height:1.05em;vertical-align:-.17em;margin-right:.4em}
.sub-cta .btn,.cta .btn,.kcta .btn,.nf-cta .btn,.pg-cta .btn{padding:.78em 1.15em}
/* Startseite: Dreierblock (Probestunde · WhatsApp · Telefon) in jedem Viertel */
.cta3{position:relative;z-index:5;display:flex;flex-wrap:wrap;gap:12px;margin-top:clamp(36px,5vw,60px)}
.cta3 .btn{margin:0;padding:.78em 1.15em}
.cta3 .btn.nav-cta{background:#fff;color:var(--ink);border:1px solid var(--ink)}
.cta3 .btn.nav-cta:hover,.cta3 .btn.nav-cta:focus-visible{background:var(--ink);color:#fff;border-color:#fff}
.cta3 .btn.cta-o{background:transparent;color:inherit;border:1px solid currentColor;box-shadow:none}
.cta3 .btn.cta-o:hover,.cta3 .btn.cta-o:focus-visible{background:#fff;color:var(--ink);border-color:#fff}
/* ME Time: „Für wen“ (Landingpage) */
.mt-for{background:var(--bg);color:var(--ink);padding-block:clamp(70px,9vw,130px)}
.mt-for .wrap{width:min(1240px,calc(100% - 2*clamp(20px,6vw,90px)));margin-inline:auto}
.mt-for .head{display:grid;grid-template-columns:1.1fr .9fr;gap:40px;align-items:end;margin-bottom:clamp(30px,4vw,54px)}
.mt-for .eyebrow{display:flex;align-items:center;gap:.8em;color:var(--brass);font-family:"DM Mono",ui-monospace,monospace;font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;margin-bottom:1.1rem}
.mt-for .eyebrow::before{content:"";width:34px;height:1px;background:var(--brass-lt)}
.mt-for h2{font-family:var(--sans);font-weight:800;font-size:clamp(2rem,4.2vw,3.8rem);letter-spacing:-.035em;line-height:.95;margin:0}
.mt-for h2 em{font-family:var(--serif);font-style:italic;font-weight:500;letter-spacing:-.01em;color:var(--brass-lt)}
.mt-for .lead{margin:0;font-size:1rem;line-height:1.65;color:#4a4458;max-width:46ch;justify-self:end}
.mt-for-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(12px,1.6vw,20px)}
.mt-for-grid>div{border:1px solid var(--ink);border-radius:20px;padding:clamp(20px,2.4vw,30px);background:#fff;display:grid;align-content:start;gap:10px}
.mt-for-grid i{font-style:normal;font-family:"DM Mono",ui-monospace,monospace;font-size:.68rem;letter-spacing:.14em;color:var(--brass)}
.mt-for-grid b{font-family:var(--sans);font-weight:800;font-size:1.2rem;letter-spacing:-.02em}
.mt-for-grid p{margin:0;font-size:.95rem;line-height:1.6;color:#4a4458}
.mt-for .sub-cta{margin-top:clamp(28px,4vw,44px)}
@media (max-width:1000px){.mt-for-grid{grid-template-columns:1fr 1fr}.mt-for .head{grid-template-columns:1fr}.mt-for .lead{justify-self:start}}
@media (max-width:560px){.mt-for-grid{grid-template-columns:1fr}}
/* Startseite: ME-Time-Block „Ideal für“ */
/* Hauptmenü: Einträge nicht umbrechen */
.menu a{white-space:nowrap}
/* Mittlere Breiten: Platz fürs Menü schaffen (Social nur als Symbol, engere Abstände) */
@media (min-width:901px) and (max-width:1280px){.nav .social span{display:none}.nav .social{gap:14px}.menu{gap:clamp(14px,1.6vw,26px)}.nav .wrap>.right{gap:16px}.nav .nav-cta{padding:.7em 1em}}
@media (min-width:901px) and (max-width:1040px){.nav .nav-cta{font-size:.88rem}.menu a{font-size:.92rem}}
/* Fotostreifen „So sieht’s bei uns aus“ (Fachseiten) */
.tour{background:var(--bg);color:var(--ink);padding-block:clamp(60px,8vw,110px)}
.tour .wrap{width:min(1240px,calc(100% - 2*clamp(20px,6vw,90px)));margin-inline:auto}
.tour-top{display:grid;grid-template-columns:1.1fr .9fr;gap:40px;align-items:end;margin-bottom:clamp(24px,3.4vw,40px)}
.tour .eyebrow{display:flex;align-items:center;gap:.8em;color:var(--brass);font-family:"DM Mono",ui-monospace,monospace;font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;margin-bottom:1rem}
.tour .eyebrow::before{content:"";width:34px;height:1px;background:var(--brass-lt)}
.tour h2{font-family:var(--sans);font-weight:800;font-size:clamp(1.9rem,3.8vw,3.4rem);letter-spacing:-.035em;line-height:.95;margin:0}
.tour h2 em{font-family:var(--serif);font-style:italic;font-weight:500;letter-spacing:-.01em;color:var(--brass-lt)}
.tour .lead{margin:0;font-size:1rem;line-height:1.65;color:#4a4458;max-width:46ch;justify-self:end}
.tour-strip{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(8px,1.2vw,14px)}
.tour-strip figure{margin:0;position:relative;aspect-ratio:4/5;border-radius:18px;overflow:hidden;background:#e9e3d8;max-width:100%}
.tour-strip img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .6s cubic-bezier(.2,.8,.2,1)}
.tour-strip figure:hover img{transform:scale(1.04)}
.tour-strip figcaption{position:absolute;left:12px;bottom:12px;padding:5px 10px;border-radius:9px;background:rgba(21,18,28,.72);color:#fff;font-family:"DM Mono",ui-monospace,monospace;font-size:.62rem;letter-spacing:.14em;text-transform:uppercase}
@media (max-width:900px){.tour-top{grid-template-columns:1fr}.tour .lead{justify-self:start}.tour-strip{grid-template-columns:1fr 1fr}}
/* Fachseiten: „Unterricht im Detail“ */
.deep{background:var(--bg);color:var(--ink);padding-block:clamp(60px,8vw,110px)}
.deep .wrap{width:min(1240px,calc(100% - 2*clamp(20px,6vw,90px)));margin-inline:auto}
.deep .eyebrow{display:flex;align-items:center;gap:.8em;color:var(--brass);font-family:"DM Mono",ui-monospace,monospace;font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;margin-bottom:1rem}
.deep .eyebrow::before{content:"";width:34px;height:1px;background:var(--brass-lt)}
.deep h2{font-family:var(--sans);font-weight:800;font-size:clamp(1.9rem,3.8vw,3.4rem);letter-spacing:-.035em;line-height:.95;margin:0 0 clamp(26px,3.6vw,44px);text-wrap:balance}
.deep h2 em{font-family:var(--serif);font-style:italic;font-weight:500;letter-spacing:-.01em;color:var(--brass-lt)}
.deep-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(22px,3vw,40px) clamp(28px,4vw,64px)}
.deep-grid>div{border-top:1px solid var(--ink);padding-top:16px}
.deep-grid h3{font-family:var(--sans);font-weight:800;font-size:1.2rem;letter-spacing:-.02em;margin:0 0 8px}
.deep-grid p{margin:0;font-size:1rem;line-height:1.7;color:#4a4458;max-width:62ch}
.deep-campus{margin-top:clamp(36px,5vw,60px);padding:clamp(20px,2.6vw,30px);border:1px solid var(--line);border-radius:20px;background:#fff;display:grid;grid-template-columns:minmax(0,220px) minmax(0,1fr);gap:16px 32px}
.deep-campus b{font-family:"DM Mono",ui-monospace,monospace;font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;color:var(--brass);font-weight:500;padding-top:4px}
.deep-campus p{margin:0;font-size:.98rem;line-height:1.7;color:#4a4458}
@media (max-width:760px){.deep-grid{grid-template-columns:1fr}.deep-campus{grid-template-columns:1fr}}
/* Menü: „Partner werden“ */
.nav-pw{font-family:var(--sans);font-weight:600;font-size:.95rem;color:var(--ink);text-decoration:none;white-space:nowrap;padding:.4em .2em;border-bottom:1px solid currentColor}
.nav-pw:hover{color:var(--brass)}
@media (max-width:900px){.nav .nav-pw{display:none}}
.mobile .mlabel{display:block;font-family:"DM Mono",ui-monospace,monospace;font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:var(--brass);padding:1.2em 0 .2em}
/* Geige: Griffbrett ohne Bünde */
.gint .stage{padding:clamp(14px,2vw,22px)}
.gi-grid{display:grid;grid-template-columns:minmax(0,1fr) 220px;gap:16px;align-items:stretch}
.gint canvas{height:clamp(260px,30vw,340px);touch-action:none;border-radius:14px}
.gi-tuner{border:1px solid rgba(241,234,223,.12);border-radius:16px;padding:14px;display:grid;gap:8px;align-content:start;text-align:center}
.gi-tuner svg{width:100%;max-width:190px;margin:0 auto;display:block}
.gi-needle{transform-origin:100px 100px;transition:transform .08s}
.gi-note{font-family:var(--sans);font-weight:800;font-size:3rem;letter-spacing:-.04em;line-height:1;color:#f1eadf}
.gi-cents{font-family:"DM Mono",ui-monospace,monospace;font-size:.78rem;color:#c9c2d6}
.gi-target{font-size:.9rem;color:#c9c2d6}.gi-target b{color:var(--brass-lt);font-family:var(--sans);font-size:1.3rem}
.gi-melo{display:flex;flex-wrap:wrap;gap:4px;justify-content:center}
.gi-melo i{width:14px;height:6px;border-radius:3px;background:rgba(241,234,223,.14)}.gi-melo i.done{background:#8cc084}.gi-melo i.cur{background:var(--brass-lt)}
@media (max-width:860px){.gi-grid{grid-template-columns:1fr}.gi-tuner{grid-template-columns:auto 1fr;text-align:left;align-items:center}.gi-tuner svg{max-width:150px}.gi-target,.gi-melo{grid-column:1/-1;justify-content:flex-start}}
/* Gitarre: Schlagmuster mit sechs Saiten */
.uke6 .uke-strings{height:140px}
.uke6 .uke-strings i:nth-child(1){height:3.2px}.uke6 .uke-strings i:nth-child(2){height:2.6px}.uke6 .uke-strings i:nth-child(3){height:2.2px}.uke6 .uke-strings i:nth-child(4){height:1.8px}.uke6 .uke-strings i:nth-child(5){height:1.4px}.uke6 .uke-strings i:nth-child(6){height:1.2px}
/* Klarinette: originalgetreu zum Greifen */
.kl-grid{display:grid;grid-template-columns:minmax(0,1.7fr) minmax(0,1fr);gap:20px;align-items:center}
.kl-svg{display:block;width:100%;height:auto;overflow:visible;user-select:none;-webkit-user-select:none;touch-action:none}
.kl-svg.vert{width:auto;height:min(600px,75vh);margin:0 auto}
.kl-hole,.kl-reg,.kl-mouth{cursor:pointer;outline:none}
.kl-hole .cap{transition:fill .12s,stroke .12s}.kl-hole.closed .cap{fill:#ca9e67;stroke:#ca9e67}.kl-hole:hover .cap,.kl-hole:focus-visible .cap{stroke:#f1eadf}
.kl-reg .cap{transition:fill .12s,stroke .12s}.kl-reg.on .cap{fill:#ca9e67;stroke:#ca9e67}.kl-reg:hover .cap,.kl-reg:focus-visible .cap{stroke:#f1eadf}
.kl-lab{font-family:"DM Mono",ui-monospace,monospace;font-size:13px;letter-spacing:.12em;fill:#8a8398}
.kl-card{border:1px solid rgba(241,234,223,.12);border-radius:18px;padding:18px;display:grid;gap:10px}
.kl-note{font-family:var(--sans);font-weight:800;font-size:3.4rem;letter-spacing:-.04em;line-height:1;color:#f1eadf}
.kl-note small{font-family:"DM Mono",ui-monospace,monospace;font-size:.78rem;font-weight:400;letter-spacing:.1em;color:#8a8398;margin-left:8px}
.kl-staff{width:100%;max-width:240px}
.kl-quest{font-size:.95rem;color:#c9c2d6}.kl-quest b{color:var(--brass-lt);font-family:var(--sans);font-size:1.25rem}
.kl-dots{display:flex;flex-wrap:wrap;gap:4px}.kl-dots i{width:16px;height:6px;border-radius:3px;background:rgba(241,234,223,.14)}.kl-dots i.done{background:#8cc084}.kl-dots i.cur{background:var(--brass-lt)}
.kl-btns{display:flex;flex-wrap:wrap;gap:8px}
html .kl-blow{padding:.95em 1.4em;touch-action:none;user-select:none;-webkit-user-select:none}
html .kl-blow.down{background:var(--brass-lt);border-color:var(--brass-lt);color:#1c1208}
@media (max-width:760px){.kl-grid{grid-template-columns:1fr}.kl-note{font-size:2.8rem}}

/* Blockflöte */
.rf-svg{display:block;width:100%;height:auto;overflow:visible;user-select:none;-webkit-user-select:none;touch-action:none}
.rf-svg.vert{width:auto;height:min(520px,70vh);margin:0 auto}
.rf-hole,.rf-head{cursor:pointer;outline:none}
.rf-hole .cap{transition:fill .12s,stroke .12s}.rf-hole.closed .cap{fill:#ca9e67;stroke:#ca9e67}
.rf-hole:hover .cap,.rf-hole:focus-visible .cap{stroke:#f1eadf}
.rf-hole.tip .ring{stroke:#ca9e67;stroke-width:2.5}
.rf-lab{font-family:"DM Mono",ui-monospace,monospace;font-size:13px;letter-spacing:.12em;fill:#8a8398}
@media (max-width:760px){.rf-svg.vert{height:min(420px,60vh)}}

/* Sprachumschalter */
.nav .lang{display:flex;align-items:center;gap:.15em;margin-right:.9em;font-family:"DM Mono",ui-monospace,monospace;font-size:.72rem;letter-spacing:.12em}
.nav .lang a{color:inherit;opacity:.78;text-decoration:none;padding:.35em .35em;border-radius:6px;transition:opacity .15s}
.nav .lang a:hover{opacity:1}
.nav .lang a[aria-current]{opacity:1;color:var(--brass)}
@media (max-width:900px){.nav .lang{display:none}}
.mobile .mlang{display:flex;gap:.4em;font-family:"DM Mono",ui-monospace,monospace;font-size:.8rem;letter-spacing:.14em;padding:.2em 0 1em}
.mobile .mlang a{padding:.45em .7em;border:1px solid currentColor;border-radius:999px;opacity:.6;text-decoration:none;color:inherit;font-size:inherit}
.mobile .mlang a[aria-current]{opacity:1;color:var(--brass)}
.lang-note{font-size:.9rem;opacity:.75;border-left:2px solid var(--brass);padding-left:.8em;margin:1em 0 1.5em}
.nav.light .nav-pw,.nav.light .lang a{color:#f1eadf}
.nav.light .nav-pw:hover,.nav.light .lang a:hover{color:var(--brass-lt)}
.nav.light .lang a[aria-current]{color:var(--brass-lt)}
/* Tipp-Pfeile auf den Unterseiten: wie auf der Startseite bis kurz vor die Seitenleiste */
.dock-hint .arr svg{overflow:visible;animation-name:hintarr2}
@keyframes hintarr2{0%,100%{opacity:.55}50%{opacity:1}}
/* Kontraste der grauen Hilfstexte (Gold bleibt bewusst wie es ist) */
html body :is(.ds .stand,.pb-card .bar,.tl .hours,.tiles-hint,.tile:not(.on),.pw-vs .lbl,.pw-tbl thead th,.pw-tbl td:nth-child(2),.pw-loc span,.mtf .note,.kbd .wk,.or-kbd .wk){color:#6d6779}
.fl-hint,#galerie .foot p{color:#9a94a8}
.fl-item{opacity:calc(.45 + var(--z) * .45)}
/* Schmale Handys: versteckte Balken-Hinweise nicht mitmessen, lange Knöpfe umbrechen */
@media (max-width:600px){.cb:not(:hover):not(:focus-visible)::after{display:none}}
@media (max-width:380px){.btn{white-space:normal;text-align:center}}
/* Sichtbarer Tastatur-Fokus überall, wo die Seite keinen eigenen zeigt */
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,summary:focus-visible,[tabindex]:focus-visible{outline:2px solid #a67c3d;outline-offset:2px}
html body .gt-go:focus-visible,html body .mtf input:focus-visible,html body form input:focus-visible,html body .fl-strip:focus-visible{outline:2px solid #a67c3d;outline-offset:3px}
/* Ersatzschrift mit Manrope-Breite: kein Springen der Überschriften, während die Schrift lädt */
@font-face{font-family:"Manrope Fallback";src:local("Arial"),local("ArialMT"),local("Liberation Sans");font-weight:100 599;size-adjust:107.4%;ascent-override:99.3%;descent-override:27.9%;line-gap-override:0%}
@font-face{font-family:"Manrope Fallback";src:local("Arial Bold"),local("Arial-BoldMT"),local("Liberation Sans Bold");font-weight:600 900;size-adjust:103.2%;ascent-override:103.3%;descent-override:29.1%;line-gap-override:0%}
:root{--sans:"Manrope","Manrope Fallback","Helvetica Neue",Arial,sans-serif}
@font-face{font-family:"Hanken Fallback";src:local("Arial"),local("ArialMT"),local("Liberation Sans");font-weight:100 549;size-adjust:99.5%;ascent-override:100.5%;descent-override:30.5%;line-gap-override:0%}
@font-face{font-family:"Hanken Fallback";src:local("Arial Bold"),local("Arial-BoldMT"),local("Liberation Sans Bold");font-weight:550 900;size-adjust:93.6%;ascent-override:106.8%;descent-override:32.4%;line-gap-override:0%}
@font-face{font-family:"Bodoni Fallback";src:local("Times New Roman Italic"),local("TimesNewRomanPS-ItalicMT"),local("Liberation Serif Italic");font-style:italic;size-adjust:107.6%;ascent-override:104.6%;descent-override:37.2%;line-gap-override:0%}
:root{--body:"Hanken Grotesk","Hanken Fallback","Helvetica Neue",Arial,sans-serif;--serif:"Bodoni Moda","Bodoni Fallback","Didot",Georgia,serif}
/* Laufband: dunkler, damit es gut lesbar ist (große Schrift 3:1, kleine 4,5:1) */
html .marquee{color:rgba(28,24,48,.5)}
@media (max-width:800px){html .marquee{color:rgba(28,24,48,.62)}}
html .rc-cta{padding-block:4px;min-height:24px;box-sizing:border-box}
/* Karte: Knopf zum Vergrößern im Kreis und Großansicht */
.kmap .kmap-big{position:absolute;top:9%;left:50%;transform:translateX(-50%);z-index:4;width:36px;height:36px;border-radius:50%;border:1px solid rgba(202,158,103,.7);background:rgba(21,18,28,.78);color:#f1eadf;display:grid;place-items:center;cursor:pointer;padding:0;transition:background .2s,transform .2s}
.kmap .kmap-big svg{width:17px;height:17px}
.kmap .kmap-big:hover{background:var(--brass);color:#15121c;transform:translateX(-50%) scale(1.08)}
.kmap-lb{position:fixed;inset:0;z-index:300;background:rgba(14,11,20,.78);backdrop-filter:blur(4px);display:grid;place-items:center;padding:clamp(12px,4vw,48px);opacity:0;transition:opacity .25s}
.kmap-lb[hidden]{display:none}
.kmap-lb.in{opacity:1}
.kmap-lb-in{position:relative;width:min(1100px,100%);height:min(78vh,760px);border-radius:22px;overflow:hidden;border:1px solid rgba(202,158,103,.6);background:#1d1828;box-shadow:0 40px 90px -30px #000;transform:scale(.96);transition:transform .25s}
.kmap-lb.in .kmap-lb-in{transform:none}
.kmap-lb iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.kmap-lb-x{position:absolute;top:12px;right:12px;width:44px;height:44px;border-radius:50%;border:0;background:#fff;color:#15121c;display:grid;place-items:center;cursor:pointer;box-shadow:0 8px 24px -8px rgba(0,0,0,.6)}
.kmap-lb-x svg{width:20px;height:20px}
html.kmap-open{overflow:hidden}

/* Kontrast auf hellem Grund (WCAG AA, 12.10.2026): Gold dort eine Stufe dunkler.
   Große Schrift: #a67c3d (mind. 3:1), kleine Schrift: #866431 (mind. 4,5:1). Dunkle Flächen behalten ihr Gold. */
:is(.nav,.finder,.locals,.metime,.hfaq,.probe,.sub-hero,.deep,.probe-cta,.tour,.faq,.dk,.legal.ds,.pg-more,.mt-for,.mt,.pw,.pb,.tb-hero){--brass:#866431;--brass-lt:#a67c3d}
:is(.f-desk,.f-panel,.f-ch,.win,.blk,.pw-ic,.ck,.mc-k,.pb-way.on){--brass:#a67c3d;--brass-lt:#ca9e67}
.win .txt,.win.txt{--brass:#866431;--brass-lt:#a67c3d}

/* Mehr Abwechslung (12.10.2026): auf den Unterseiten Infoblock und Raumfotos rein weiß */
.deep,.tour{--bg:#fff;background:#fff}
/* ME Time: Konfigurator weiß; Partner werden: Abschnitt vor dem Kostenblock und Anfrageformular weiß */
#konfigurator.mt,.pw[aria-labelledby="pw-focus"],#anfrage.pw-form{background:#fff}

/* Einheitliche Buttons (Wunsch Rene, 12.10.2026): Probestunde, WhatsApp und Anruf auf hellem Grund immer weiß mit dunkler Schrift, wie der Button in der Kopfzeile.
   Auf dunklem Grund bleiben die Buttons wie gestaltet. */
a.btn:is([href*="probestunde"],[href*="trial-lesson"],[href*="deneme-dersi"],[href^="tel:"],[href*="wa.me"]):not(:is(.buehne,.spiel,.mod,.rv,.kontakt,.pg-hero,.mt-info,.pw-hero,.pw-dark,.rad,.galerie,.mobile,.legal-foot,footer) a){background:#fff!important;color:var(--ink)!important;border:1px solid var(--ink)!important;box-shadow:none!important;backdrop-filter:none!important}
a.btn:is([href*="probestunde"],[href*="trial-lesson"],[href*="deneme-dersi"],[href^="tel:"],[href*="wa.me"]):not(:is(.buehne,.spiel,.mod,.rv,.kontakt,.pg-hero,.mt-info,.pw-hero,.pw-dark,.rad,.galerie,.mobile,.legal-foot,footer) a):hover{background:var(--ink)!important;color:#fff!important}
/* ME Time: die vier „Für wen“-Karten als weiße Felder (wie die Karten der ME-Time-Sektion auf der Startseite) */
.mt-for-grid>div{background:#fff}
/* ME Time, Konfigurator (Wunsch Rene, 12.10.2026): alle hellen Felder rein weiß, unabhängig vom Abschnittshintergrund.
   Gewählte Felder (dunkel/gold) und die bunten Musik-Check-Tasten bleiben, wie sie sind. */
#konfigurator .tile:not(.on),#konfigurator #segDur button:not([aria-pressed="true"]),#konfigurator #segArt button:not([aria-pressed="true"]){background:#fff}
#konfigurator .mtf,#konfigurator .mtf :is(input[type=text],input[type=email],input[type=tel],textarea),#konfigurator .mc-check{background:#fff}

/* Mobiles Menü offen: Cookie-Knopf und Kontaktleiste ausblenden, damit nichts das Menü verdeckt */
body.menu-open .cc-fab,body.menu-open .dock{opacity:0!important;visibility:hidden;pointer-events:none!important;transition:opacity .2s,visibility 0s .2s}
.mobile{overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;padding-bottom:calc(40px + env(safe-area-inset-bottom,0px))}

/* Barrierefreiheit: Schritt-Nummern bei den Locals im dunkleren Gold, sichtbare Elemente nur per Bewegung einblenden (nie unsichtbar) */
.steps b{color:var(--brass)}
.steps div,.blk.free{opacity:1!important}

/* Sprachumschalter: kleine Fahnen als Kontur vor dem Kürzel */
.lang a,.mlang a{display:inline-flex;align-items:center;gap:.45em}
.flag{width:1.55em;height:1.05em;flex:none;display:block}

/* Gitarren-/Ukulele-Modul: auf schmalen Handys passen alle acht Felder in den Rahmen */
@media (max-width:560px){#uke .uke-grid,#uke .uke-counts{gap:5px}#uke .uke-cell{min-width:0;padding:0}}

/* Kopfzeile: seit den Sprach-Fahnen braucht die Leiste mehr Platz; Instagram/Facebook bis 1680px nur als Symbol */
@media (max-width:1680px){.nav .social span{display:none}.nav .social{gap:14px}}
/* Kopfzeile mit „Toolbox“: bei mittleren Breiten Platz schaffen (Social-Symbole und Fahnen stehen auch im Footer bzw. bleiben als Kürzel) */
@media (min-width:901px) and (max-width:1439px){.nav .social{display:none}.nav .lang .flag{display:none}}
@media (min-width:901px) and (max-width:1279px){.nav .nav-pw{display:none}}
/* Seitenleiste mit Schülerbereich-Link: auf dem Handy etwas schmaler, damit sie den Cookie-Knopf nicht berührt (18.10.2026) */
@media (max-width:760px){.dock{gap:3px;padding:5px}.dock button,.dock a{width:36px;height:36px}.dock .sep{margin:7px 1px}.dock.up .totop{max-width:36px}}
@media (max-width:374px){.dock button,.dock a{width:32px;height:32px}.dock svg{width:18px;height:18px}.dock.up .totop{max-width:32px}}