/* Globale Gestaltung: Farben, Schrift, Rahmen, Navigation und wiederverwendbare Elemente. */
@font-face{font-family:"Afacad Flux";font-style:normal;font-weight:300;font-display:swap;src:url("../fonts/afacad-flux-v4-latin-300.woff2") format("woff2")}
@font-face{font-family:"Afacad Flux";font-style:normal;font-weight:400;font-display:swap;src:url("../fonts/afacad-flux-v4-latin-regular.woff2") format("woff2")}
@font-face{font-family:"Afacad Flux";font-style:normal;font-weight:700;font-display:swap;src:url("../fonts/afacad-flux-v4-latin-700.woff2") format("woff2")}
:root{
  --farbe-weiss:#ffffff;
  --farbe-schwarz:#000000;
  --farbe-navigation:#432f28;
  --farbe-dunkel:#351e16;
  --farbe-inhalt:#efeae4;
  --farbe-ueberschrift:#ba6d07;
  --farbe-hover:#ba6d07;
  --farbe-schmuck:#e9d596;
  --farbe-aussen:#432f28;
  --farbe-footer:#341e16;
  --farbe-text-dezent:#6b5a52;
  --farbe-linie:rgba(67,47,40,.2);
  --farbe-rahmen-dezent:rgba(67,47,40,.14);
  --farbe-verlauf-transparent:rgba(67,47,40,0);
  --farbe-verlauf-dezent:rgba(67,47,40,.1);
  --farbe-overlay-navigation:rgba(67,47,40,.5);
  --farbe-menue-hover:rgba(233,213,150,.09);
  --farbe-menue-aktiv:rgba(233,213,150,.13);
  --farbe-menue-gold-transparent:rgba(233,213,150,0);
  --farbe-menue-ruhe:rgba(0,0,0,.1);
  --farbe-menue-ruhe-transparent:rgba(0,0,0,0);
  --farbe-menue-balken:rgba(255,255,255,.3);
  --schrift:"Afacad Flux",Arial,sans-serif;
  --seitenbreite:1500px;
  --navigation-breite:33%;
  --textbreite:760px;
  --header-height:96px;
  --abschnitt-abstand:40px;
  --inhalt-seitenabstand:50px;
  --element-abstand:20px;
  --ueberschrift-abstand:18px;
  --gruppen-abstand:48px;
  --h1-linie-breite:72px;
  --h1-linie-staerke:2px;
  --schrift-h1:42px;
  --schrift-h2:32px;
  --schrift-h3:25px;
  --schrift-h4:21px;
  --schrift-h5:18px;
  --schrift-text:20px;
  --schrift-klein:18px;
  --schrift-sehr-klein:16px;
  --uebergang:400ms ease;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;color:var(--farbe-dunkel);background:var(--farbe-aussen);font-family:var(--schrift);font-size:var(--schrift-text);line-height:1.35}
a{color:var(--farbe-navigation);text-decoration:none;transition:color var(--uebergang);text-underline-offset:4px}
a:hover{color:var(--farbe-ueberschrift);text-decoration:underline}
a:focus-visible,button:focus-visible,[tabindex]:focus-visible{outline:2px solid currentColor;outline-offset:5px}
.location-map-link{display:inline-flex;align-items:center;gap:8px;margin-top:12px;text-decoration:underline}
.location-map-link svg{width:20px;height:20px;flex:0 0 20px}
button{font:inherit;cursor:pointer}
.button{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:10px 18px;border:1px solid currentColor;font-weight:400;line-height:1.25;text-align:center;transition:transform var(--uebergang)}
.button:hover,.button:focus-visible{text-decoration:none}
.button:hover{transform:scale(1.025)}
.button-primary{border-color:var(--farbe-navigation);background:var(--farbe-navigation);color:var(--farbe-weiss)}
.button-primary:hover,.button-primary:focus-visible{border-color:var(--farbe-hover);background:var(--farbe-hover);color:var(--farbe-weiss)}
.button-secondary{border-color:var(--farbe-footer);background:transparent;color:var(--farbe-footer)}
.button-secondary:hover,.button-secondary:focus-visible{border-color:var(--farbe-hover);background:transparent;color:var(--farbe-hover)}
.appointment-action{margin-top:32px}
.appointment-button{gap:10px}
.appointment-button svg{width:20px;height:20px;flex:0 0 20px}
@media(max-width:767px){
  .appointment-action{margin-top:28px}
  .appointment-button{width:100%}
}

/* Globale Instrumentenangebote: Übersichtskarte und hervorgehobene Preisbox. */
.instrument-overview-list{display:grid;gap:20px;margin-top:34px}
.instrument-overview-card{display:grid;grid-template-columns:clamp(190px,29%,260px) minmax(0,1fr);min-height:230px;border:1px solid var(--farbe-linie);background:rgba(255,255,255,.28)}
.instrument-overview-card--sold{position:relative;overflow:hidden}
.instrument-sold-ribbon{position:absolute;z-index:3;top:27px;right:-48px;width:190px;padding:8px 12px;background:var(--farbe-ueberschrift);color:var(--farbe-weiss);font-size:var(--schrift-klein);font-weight:400;line-height:1;text-align:center;text-transform:uppercase;transform:rotate(45deg);pointer-events:none}
.instrument-overview-media{min-width:0;overflow:hidden}
.instrument-overview-media img{width:100%;height:100%;object-fit:cover;transition:transform var(--uebergang)}
.instrument-overview-card:hover .instrument-overview-media img{transform:scale(1.025)}
.instrument-overview-content{display:flex;flex-direction:column;align-items:flex-start;padding:26px 30px}
.instrument-overview-card h2,.instrument-overview-card h3{margin-bottom:12px;font-size:var(--schrift-h3)}
.instrument-overview-price{margin:0 0 22px;color:var(--farbe-text-dezent);font-size:var(--schrift-klein);line-height:1.35}
.instrument-overview-price strong{display:block;margin-top:3px;color:var(--farbe-navigation);font-size:24px;font-weight:400}
.instrument-overview-card .button{gap:8px;margin-top:auto}
.instrument-overview-card .button svg{width:18px;height:18px;flex:0 0 18px}
.instrument-price-box{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:22px;margin-top:32px;padding:24px 26px;border-left:4px solid var(--farbe-ueberschrift);background:rgba(233,213,150,.28)}
.instrument-price-box--sold{position:relative;overflow:hidden;padding-right:132px}
.instrument-price-label{display:block;margin-bottom:3px;color:var(--farbe-text-dezent);font-size:var(--schrift-sehr-klein);letter-spacing:.08em;text-transform:uppercase}
.instrument-price-current{display:block;color:var(--farbe-navigation);font-size:30px;font-weight:400;line-height:1.1}
.instrument-price-history{margin:8px 0 0;color:var(--farbe-text-dezent);font-size:var(--schrift-klein);line-height:1.4}
.instrument-price-history span+span::before{content:"·";padding-inline:8px}
.instrument-price-tax{white-space:nowrap}
@media(max-width:767px){
  .instrument-overview-list{margin-top:28px}
  .instrument-overview-card{grid-template-columns:1fr}
  .instrument-overview-media{aspect-ratio:16/9}
  .instrument-overview-content{padding:22px}
  .instrument-overview-card h2,.instrument-overview-card h3{font-size:var(--schrift-h4)}
  .instrument-overview-price strong{font-size:23px}
  .instrument-price-box{grid-template-columns:1fr;padding:22px}
  .instrument-price-box--sold{padding-right:100px}
  .instrument-price-current{font-size:27px}
  .instrument-price-tax{white-space:normal}
}
@media(prefers-reduced-motion:reduce){.instrument-overview-card:hover .instrument-overview-media img{transform:none}}
img{display:block;max-width:100%;height:auto}
picture{display:block}
h1,h2,h3,h4,h5{margin:0 0 var(--ueberschrift-abstand);font-weight:400;overflow-wrap:break-word}
h1{font-size:var(--schrift-h1);line-height:1.08;color:var(--farbe-ueberschrift)}
h1::after{content:"";display:block;width:var(--h1-linie-breite);height:var(--h1-linie-staerke);margin-top:22px;background:currentColor}
h2{font-size:var(--schrift-h2);line-height:1.15;color:var(--farbe-ueberschrift)}
h3{font-size:var(--schrift-h3);line-height:1.2;color:var(--farbe-ueberschrift)}
h4{font-size:var(--schrift-h4);line-height:1.25;color:var(--farbe-ueberschrift)}
h5{font-size:var(--schrift-h5);line-height:1.3;color:var(--farbe-ueberschrift)}
p{margin:0 0 var(--element-abstand)}
strong{font-weight:700}
small,.text-small{font-size:var(--schrift-klein);line-height:1.4}
.text-sehr-klein{font-size:var(--schrift-sehr-klein);line-height:1.4}
.page-frame{width:100%;max-width:var(--seitenbreite);margin-inline:auto}
.content-column{min-width:0;background:var(--farbe-inhalt)}
.site-section{position:relative;width:100%;padding:var(--abschnitt-abstand) var(--inhalt-seitenabstand)}
.site-section+.site-section::before{content:"";position:absolute;top:0;right:var(--inhalt-seitenabstand);left:var(--inhalt-seitenabstand);height:1px;background:var(--farbe-linie)}
.section-inner{width:100%;max-width:1280px;margin-inline:auto}
.text-content{max-width:var(--textbreite)}
.text-content>:last-child{margin-bottom:0}
.text-content p+h2,.text-content p+h3,.text-content p+h4,.text-content p+h5{margin-top:var(--gruppen-abstand)}
[id]{scroll-margin-top:var(--header-height)}
.skip-link{position:fixed;z-index:50;top:12px;left:12px;padding:12px 20px;background:var(--farbe-inhalt);color:var(--farbe-dunkel);transform:translateY(-160%)}
.skip-link:focus{transform:translateY(0)}
.sidebar{position:sticky;top:0;z-index:20;font-weight:300;color:var(--farbe-weiss);background-color:var(--farbe-navigation)}
.sidebar-inner{display:flex;flex-direction:column;min-height:100%;padding:36px}
.brand-row{display:flex;align-items:center;justify-content:space-between;gap:20px;flex-shrink:0}
.brand{display:block;width:100%;max-width:340px;flex-shrink:1}
.brand img{width:100%;height:auto}
.brand:hover{text-decoration:none}
.main-navigation{margin-top:clamp(60px,14vh,180px)}
.nav-group{list-style:none;padding:0;margin:0}
.nav-group+.nav-group{margin-top:24px}
.nav-group li+li{margin-top:3px}
.nav-group a{display:flex;align-items:center;gap:9px;width:100%;max-width:100%;padding:5px 12px;border-left:2px solid var(--farbe-menue-balken);background:linear-gradient(90deg,var(--farbe-menue-ruhe),var(--farbe-menue-ruhe-transparent));color:var(--farbe-weiss);font-size:18px;line-height:1.35;letter-spacing:.1em;text-transform:uppercase;transition:color var(--uebergang),border-color var(--uebergang)}
.nav-group a::before{content:"";width:16px;height:16px;flex:0 0 16px;background:currentColor;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M5 12h14m-7-7 7 7-7 7'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M5 12h14m-7-7 7 7-7 7'/%3E%3C/svg%3E") center/contain no-repeat}
.nav-group a:hover,.nav-group a:focus-visible{border-left-color:var(--farbe-schmuck);background:linear-gradient(90deg,var(--farbe-menue-hover),var(--farbe-menue-gold-transparent));color:var(--farbe-schmuck);text-decoration:none}
.nav-group a.active{border-left-color:var(--farbe-schmuck);background:linear-gradient(90deg,var(--farbe-menue-aktiv),var(--farbe-menue-gold-transparent));color:var(--farbe-schmuck);text-decoration:none}
.menu-toggle{display:none;align-items:center;justify-content:center;gap:9px;min-width:48px;min-height:48px;padding:8px 12px;border:1px solid var(--farbe-schmuck);color:var(--farbe-schmuck);background:transparent;transition:color var(--uebergang),background var(--uebergang),transform var(--uebergang)}
.menu-toggle:hover{transform:scale(1.025)}
.close-icon{display:none}
.menu-toggle[aria-expanded="true"] .menu-icon{display:none}
.menu-toggle[aria-expanded="true"] .close-icon{display:block}
.home-contact-bar{width:100%;min-height:122px;padding:14px var(--inhalt-seitenabstand);border-bottom:1px solid var(--farbe-rahmen-dezent);background-color:var(--farbe-inhalt);background-image:linear-gradient(90deg,var(--farbe-verlauf-transparent) 0%,var(--farbe-verlauf-dezent) 100%),url("../images/struktur-hintergrund-inhalt.webp");background-position:center;background-size:auto,100% auto}
.home-contact-bar-inner{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"details portrait";align-items:center;gap:24px;width:100%;max-width:1280px;min-height:94px;margin-inline:auto}
.home-contact-details{grid-area:details;display:flex;flex-direction:column;align-items:flex-end;gap:9px;min-width:0}
.home-contact-links{display:flex;justify-content:flex-end;gap:28px}
.home-contact-link{display:inline-flex;align-items:center;gap:12px;color:var(--farbe-dunkel);font-size:var(--schrift-text);font-weight:700;line-height:1.2;white-space:nowrap}
.home-contact-link:hover,.home-contact-link:focus-visible{color:var(--farbe-dunkel);text-decoration:none}
.home-contact-icon-box{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;flex:0 0 44px;border:1px solid var(--farbe-navigation);background:var(--farbe-navigation);color:var(--farbe-schmuck);transition:transform var(--uebergang),background-color var(--uebergang),border-color var(--uebergang),color var(--uebergang)}
.home-contact-link:hover .home-contact-icon-box,.home-contact-link:focus-visible .home-contact-icon-box{border-color:var(--farbe-hover);background:var(--farbe-hover);color:var(--farbe-weiss);transform:scale(1.08)}
.home-contact-area{margin:0;color:var(--farbe-dunkel);font-size:var(--schrift-sehr-klein);line-height:1.25;letter-spacing:.08em;text-align:right;text-transform:uppercase}
.home-contact-portrait-link{grid-area:portrait;display:block;border-radius:50%}
.home-contact-portrait{width:94px;height:94px;object-fit:cover;border-radius:50%;transition:transform var(--uebergang)}
.home-contact-portrait-link:hover .home-contact-portrait{transform:scale(1.05)}

@media(min-width:1100px){
  :root{--header-height:0px}
  .page-frame{display:grid;grid-template-columns:var(--navigation-breite) minmax(0,1fr)}
  .sidebar{height:100dvh;align-self:start;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:var(--farbe-schmuck) var(--farbe-navigation);background-image:url("../images/klavierstimmer-johannes-hinrichsmeyer-navigation.webp?v=20260908-2");background-size:cover;background-position:center}
  .brand{max-width:none}
}
@media(min-width:1100px) and (max-height:800px){
  .sidebar-inner{padding-block:26px}
  .main-navigation{margin-top:60px}
  .nav-group+.nav-group{margin-top:18px}
  .nav-group a{font-size:17px;line-height:1.3}
}
@media(max-width:1099px){
  :root{--abschnitt-abstand:40px;--inhalt-seitenabstand:50px;--schrift-h1:38px;--schrift-h2:29px}
  .sidebar{background-color:var(--farbe-navigation);background-image:linear-gradient(var(--farbe-overlay-navigation),var(--farbe-overlay-navigation)),url("../images/klavierstimmer-johannes-hinrichsmeyer-navigation.webp?v=20260908-2");background-size:cover;background-position:center top}
  .sidebar-inner{padding:24px 35px}
  .brand-row{min-height:48px}
  .brand{max-width:330px}
  .menu-toggle{display:inline-flex;flex-shrink:0}
  .main-navigation{display:block;position:absolute;inset:100% 0 auto;margin:0;padding:14px 35px 30px;background-color:var(--farbe-navigation);background-image:linear-gradient(var(--farbe-overlay-navigation),var(--farbe-overlay-navigation)),url("../images/klavierstimmer-johannes-hinrichsmeyer-navigation.webp?v=20260908-2");background-size:cover;background-position:center;height:calc(100dvh - var(--header-height));overflow-y:auto;overscroll-behavior:contain;visibility:hidden;opacity:0;clip-path:inset(0 0 100% 0);pointer-events:none;transition:clip-path 420ms cubic-bezier(.4,0,.2,1),opacity 180ms ease,visibility 0s linear 420ms}
  .main-navigation.is-open{visibility:visible;opacity:1;clip-path:inset(0);pointer-events:auto;transition:clip-path 420ms cubic-bezier(.4,0,.2,1),opacity 180ms ease,visibility 0s}
  .nav-group a{display:flex;align-items:center;width:100%;min-height:44px;padding:6px 12px;font-size:18px;line-height:1.3}
  .nav-group+.nav-group{margin-top:20px}
  .home-contact-bar{min-height:106px;padding:12px 35px}
  .home-contact-bar-inner{min-height:88px}
  .home-contact-portrait{width:82px;height:82px}
  body.menu-open{overflow:hidden}
}
@media(max-width:767px){
  :root{--header-height:80px;--abschnitt-abstand:30px;--inhalt-seitenabstand:24px;--gruppen-abstand:36px;--schrift-h1:32px;--schrift-h2:26px;--schrift-h3:23px;--schrift-h4:20px}
  .sidebar-inner{padding:16px 25px}
  .brand-row{gap:16px}
  .brand{max-width:310px}
  .menu-toggle{padding:8px;min-width:44px}
  .menu-toggle-label{display:none}
  .main-navigation{padding-inline:25px}
  .home-contact-bar{min-height:0;padding:12px 25px}
  .home-contact-bar-inner{display:flex;justify-content:center;gap:14px;min-height:0}
  .home-contact-details{display:block}
  .home-contact-links{gap:14px}
  .home-contact-link{gap:0}
  .home-contact-link>span:last-child,.home-contact-area{display:none}
  .home-contact-icon-box{width:52px;height:52px;flex-basis:52px}
  .home-contact-portrait{width:52px;height:52px}
  
}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{transition:none!important;animation:none!important}
  .menu-toggle:hover{transform:none}
  .button:hover{transform:none}
}

/* Gemeinsamer Footer: Kontakt, Menü mit Netzwerken und Anschriften. */
.site-footer{padding:70px var(--inhalt-seitenabstand);background-color:var(--farbe-footer);background-image:url("../images/klaviermechanik-footer-hintergrund.webp");background-size:cover;background-position:center;background-repeat:no-repeat;color:var(--farbe-weiss);font-weight:300;font-size:var(--schrift-text);line-height:1.55}
.footer-grid{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,.9fr) minmax(0,1.2fr);gap:36px}
.footer-column{min-width:0}
.site-footer .footer-heading{margin:0 0 28px;color:var(--farbe-schmuck);font-size:21px;line-height:1.25;font-weight:400;text-transform:none}
.site-footer a{color:var(--farbe-weiss)}
.site-footer a:hover,.site-footer a:focus-visible{color:var(--farbe-schmuck)}
.footer-contact-list,.footer-menu{list-style:none;margin:0;padding:0}
.footer-contact-list li+li{margin-top:5px}
.footer-contact-list a{display:flex;align-items:center;gap:14px;min-height:30px;line-height:1.3}
.footer-icon{width:22px;height:22px;flex:0 0 22px}
.footer-email-text{min-width:0;overflow-wrap:anywhere}
.footer-membership{display:flex;align-items:center;gap:18px;margin-top:40px}
.footer-membership picture{flex:0 0 58px}
.footer-membership img{width:58px;height:auto}
.footer-membership p{margin:0;font-size:var(--schrift-text);line-height:1.35}
.footer-chamber{margin:28px 0 0;font-size:var(--schrift-text);line-height:1.6}
.footer-menu li+li{margin-top:3px}
.footer-menu a{display:inline-block;padding:1px 0;line-height:1.3;overflow-wrap:anywhere}
.site-footer address{font-style:normal}
.site-footer address p{margin-bottom:0}
.footer-subsection{margin-top:38px}
.footer-socials{display:flex;gap:16px}
.site-footer .footer-social{display:inline-flex;justify-content:center;align-items:center;width:44px;height:44px;border:1px solid var(--farbe-schmuck);border-radius:0;background:transparent;color:var(--farbe-schmuck);transition:transform var(--uebergang)}
.site-footer .footer-social:hover,.site-footer .footer-social:focus-visible{border-color:var(--farbe-schmuck);background:transparent;color:var(--farbe-schmuck);text-decoration:none}
.site-footer .footer-social:hover{transform:scale(1.08)}
.site-footer .footer-map-link{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:46px;margin-top:24px;padding:9px 14px;border:1px solid var(--farbe-schmuck);color:var(--farbe-schmuck);font-weight:400;transition:background var(--uebergang),color var(--uebergang),transform var(--uebergang)}
.site-footer .footer-map-link:hover,.site-footer .footer-map-link:focus-visible{background:transparent;color:var(--farbe-schmuck);text-decoration:none}
.site-footer .footer-map-link:hover{transform:scale(1.025)}
@media(min-width:1100px) and (max-width:1279px){.footer-grid{gap:24px}.footer-contact-list a{gap:10px}}
@media(min-width:768px){.footer-column:last-child address p:first-child{white-space:nowrap}}
@media(min-width:768px) and (max-width:1099px){.site-footer{padding-block:50px}.footer-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:40px 30px}.footer-column:last-child{grid-column:1/-1;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:30px}.footer-column:last-child .footer-subsection{margin-top:0}}
@media(max-width:767px){.site-footer{padding-block:40px}.footer-grid{grid-template-columns:1fr;gap:40px}.site-footer .footer-heading{margin-bottom:22px;font-size:20px}.footer-contact-list a,.footer-menu a{min-height:36px}.footer-membership{margin-top:30px}.footer-subsection{margin-top:30px}}
@media(prefers-reduced-motion:reduce){.site-footer .footer-map-link:hover,.site-footer .footer-social:hover{transform:none}}