html {
  scrollbar-gutter: stable;
}

/*
=================================================================
3SAITER – GEMEINSAMES STYLESHEET
=================================================================

Diese Datei steuert das Aussehen ALLER Seiten:
- index.html
- impressum.html
- datenschutz.html
- 404.html

Eine ausführliche Orientierung steht in:
  CSS-README.txt

Wichtige Grundregel:
Änderungen an Farben, Typografie, Links oder gemeinsamen
Bedienelementen werden hier nur EINMAL vorgenommen.

Die Startseite verwendet <body class="home">.
Impressum/Datenschutz verwenden <body class="legal">.
Die Fehlerseite verwendet <body class="error-page">.
=================================================================
*/

/* =========================================================
       3SAITER – WEBSITE
       Pflegeprinzip:
       - Inhalte nur EINMAL im HTML pflegen.
       - Desktop/Mobil werden ausschliesslich per CSS angepasst.
       - Bilder liegen relativ unter img/.
       - Fonts liegen relativ unter fonts/.
       - Keine absoluten Serverpfade.
       ========================================================= */

    @font-face { font-family:'Montserrat'; font-style:normal; font-weight:400; font-display:swap; src:url('../fonts/montserrat-v31-latin-regular.woff2') format('woff2'); }
    @font-face { font-family:'Montserrat'; font-style:normal; font-weight:700; font-display:swap; src:url('../fonts/montserrat-v31-latin-700.woff2') format('woff2'); }
    @font-face { font-family:'Donegal One'; font-style:normal; font-weight:400; font-display:swap; src:url('../fonts/donegal-one-v22-latin-regular.woff2') format('woff2'); }

    :root {
      --bg:#090909; --text:#f2f0eb; --muted:#aaa69e; --line:#282828; --accent:#b49a61; --interactive:#f0d52f;
      --sans:'Montserrat',Arial,sans-serif; --serif:'Donegal One',Georgia,serif;
      --content:1180px; --wide:1540px; --pad:clamp(22px,4vw,64px);
      --space-xl:clamp(90px,11vw,180px); --space-lg:clamp(64px,8vw,130px); --space-md:clamp(36px,5vw,72px);
      --body:clamp(16px,1.05vw,19px); --small:clamp(11px,.72vw,13px);
      --h1:clamp(46px,5.8vw,96px); --h2:clamp(38px,4.2vw,68px); --h3:clamp(28px,3vw,48px);
    }
    *{box-sizing:border-box} html{scroll-behavior:smooth} body{margin:0;background:var(--bg);color:var(--text);font-family:var(--sans);font-size:var(--body);line-height:1.62}
    img{display:block;width:100%;height:auto}
    a{color:inherit;text-decoration:none;transition:color .18s ease}
    a:hover{color:var(--interactive);text-decoration:none}
    a:focus-visible{color:var(--interactive);outline:2px solid var(--interactive);outline-offset:4px}
    h1,h2,h3{font-family:var(--serif);font-weight:400;line-height:1.08;margin:0 0 .65em} h1{font-size:var(--h1)} h2{font-size:var(--h2)} h3{font-size:var(--h3)} p{margin:0 0 1.35em}
    .wrap{width:min(calc(100% - 2*var(--pad)),var(--content));margin-inline:auto}.wide{width:min(calc(100% - 2*var(--pad)),var(--wide));margin-inline:auto}
    .eyebrow{font-size:var(--small);font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--accent);margin-bottom:18px}
    .section{padding-block:var(--space-xl)}

/* Kompakter Rhythmus für die zentrale Bild-/Text-Strecke.
   Halbiert nur dort den normalen vertikalen Section-Abstand.
   Gilt auf Desktop UND Mobilgeräten. */
.section--compact{
  padding-block:calc(var(--space-xl) * .5);
}
 .copy{max-width:620px}.copy p:last-child{margin-bottom:0}

    /* HEADER / NAVIGATION
       Schwarze Markenflaeche mit vollstaendigem Logo und Unterzeile.
       Navigation und Burger bleiben bewusst zurueckhaltend. */
    .site-header{position:relative;z-index:30;background:#090909;border-bottom:1px solid rgba(255,255,255,.10)}
    .header-inner{min-height:158px;padding:18px var(--pad) 16px;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:28px;position:relative}
    .brand{grid-column:2;display:flex;align-items:center;justify-content:center;z-index:32;text-align:center}
    .logo{display:flex;align-items:center;justify-content:center;line-height:0}.logo img{width:122px;height:auto;max-height:98px;object-fit:contain;margin:0 auto}
    .nav{grid-column:3;justify-self:end;display:flex;gap:clamp(18px,2.4vw,36px);font-size:clamp(12px,.9vw,15px)}
    .menu-burger{grid-column:1;justify-self:start;width:32px;height:32px;border:0;padding:0;background:transparent url('../img/burger.svg') center/contain no-repeat;cursor:pointer;z-index:32;transition:transform .3s ease;transform-origin:center}
    .menu-burger:hover{transform:rotate(90deg)}
    .menu-burger:focus-visible{outline:2px solid var(--interactive);outline-offset:5px}
    .menu-burger[aria-expanded="true"]{background-image:url('../img/close.svg')}
    .overlay-menu{position:fixed;inset:0;background:rgba(15,15,15,.96);display:flex;justify-content:center;align-items:flex-start;opacity:0;visibility:hidden;transition:opacity .4s ease,visibility .4s ease;z-index:29}
    .overlay-menu.show{opacity:1;visibility:visible}
    .overlay-content{display:flex;flex-direction:column;gap:28px;align-items:center;text-align:center;margin-top:170px;padding:40px var(--pad)}
    .overlay-content a{font-size:clamp(20px,2vw,28px)}
    body.menu-open{overflow:hidden}

    /* HERO – Verlauf bewusst nur im unteren/seitlichen Bereich */
    .hero{min-height:calc(100svh - 158px);position:relative;display:flex;align-items:flex-end;overflow:hidden;background:#050505}
    .hero-media{position:absolute;inset:0}.hero-media img{height:100%;object-fit:cover;object-position:58% 55%}
    .hero-media:after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(0,0,0,.72) 0%,rgba(0,0,0,.38) 28%,transparent 54%),linear-gradient(90deg,rgba(0,0,0,.48) 0%,transparent 58%)}
    .hero-content{position:relative;z-index:2;width:min(calc(100% - 2*var(--pad)),var(--content));margin-inline:auto;padding:160px 0 clamp(58px,8vw,110px)}
    .hero h1{max-width:980px;text-shadow:0 2px 12px rgba(0,0,0,.65)}.hero-sub{max-width:760px;font-size:clamp(18px,1.45vw,24px);line-height:1.55;color:#dedbd4;margin:28px 0 0;text-shadow:0 2px 10px rgba(0,0,0,.82)}

    /* HUBCAP INTRO */
    .intro-grid{display:grid;grid-template-columns:.82fr 1.18fr;gap:clamp(50px,8vw,130px);align-items:center}
    .portrait img{aspect-ratio:3/4;object-fit:cover}

    /* FAMILY – echte Vollbreite, keine Captions */
    .family{padding:0 0 var(--space-xl)}.family img{width:100%;max-height:78svh;object-fit:cover;object-position:center 48%}

    /* DETAILS – bewusst konservativer und semantisch eindeutig */
    .detail-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(26px,4vw,60px);align-items:start}
    .detail-card img{aspect-ratio:4/3;object-fit:cover}.detail-copy{margin-top:28px;max-width:560px}

    /* BUEHNENBILD */
    .stage-image{padding-block:var(--space-lg)}.stage-image img{width:100%;max-height:72svh;object-fit:cover;object-position:center 53%}

    /* GITARRENBAU */
    .craft-grid{display:grid;grid-template-columns:1fr .78fr;gap:clamp(50px,8vw,130px);align-items:center}.craft-grid img{aspect-ratio:4/5;object-fit:cover;object-position:center}

    /* ZWEI BILDER – asymmetrisch, aber klar an einem gemeinsamen Raster */
    .instrument-pair{display:grid;grid-template-columns:.7fr 1.3fr;gap:clamp(28px,5vw,76px);align-items:center}.instrument-pair .small{width:78%;justify-self:end}.instrument-pair img{object-fit:cover}.instrument-pair .small img{aspect-ratio:4/5}.instrument-pair .large img{aspect-ratio:4/5}

    /* OPTIONAL NEWS – ganzer Block kann entfernt/auskommentiert werden */
    .news{border-block:1px solid var(--line)}.news-grid{display:grid;grid-template-columns:.7fr 1.3fr;gap:clamp(40px,7vw,110px);align-items:center}.news img{aspect-ratio:16/9;object-fit:cover}.news .button{margin-top:8px}

    /* KONTAKT / ANFRAGE */
    .commission-grid{display:grid;grid-template-columns:.65fr 1.35fr;gap:clamp(50px,9vw,150px);align-items:start}.form{margin-top:48px;max-width:720px}.field{margin-bottom:24px}.field label{display:block;font-size:var(--small);letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin-bottom:9px}.field input,.field textarea{width:100%;border:1px solid #3a3a3a;background:#0b0b0b;color:var(--text);font:inherit;padding:13px 14px;border-radius:0;outline:none;transition:border-color .18s ease,box-shadow .18s ease}.field input:focus,.field textarea:focus{border-color:var(--interactive);box-shadow:0 0 0 1px var(--interactive)}.field textarea{min-height:150px;resize:vertical}.required{color:var(--interactive)}.required-note{font-size:var(--small);color:var(--muted);margin:-8px 0 22px}.privacy-check{display:grid;grid-template-columns:auto 1fr;gap:11px;align-items:start;margin:4px 0 28px;font-size:var(--small);color:#c8c4bc}.privacy-check input{width:18px;height:18px;margin:3px 0 0;accent-color:var(--interactive)}.privacy-check a{text-decoration:underline;text-underline-offset:3px}.button{display:inline-block;border:1px solid #777;background:transparent;color:var(--text);padding:12px 18px;font:inherit;cursor:pointer;transition:border-color .18s ease,color .18s ease,background .18s ease}.button:hover,.button:focus-visible{border-color:var(--interactive);color:var(--interactive);background:transparent;text-decoration:none}.form-note{font-size:var(--small);color:var(--muted);margin-top:14px}

    /* REFERENZEN – gleiches Grundraster; Bildformat darf spaeter motivbedingt variieren */
    .refs-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(28px,4vw,60px);align-items:start;margin-top:48px}.ref img{aspect-ratio:3/4;object-fit:cover}.ref h3{font-family:var(--serif);font-size:clamp(22px,2vw,30px);margin:18px 0 4px}.ref a{font-size:var(--small);color:#bdb8ae}.ref a:hover,.ref a:focus-visible{color:var(--interactive)}

    /* FOOTER */
    footer{border-top:1px solid var(--line);padding:34px var(--pad)}.footer-inner{display:flex;justify-content:space-between;gap:30px;align-items:center;font-size:14px;color:#bbb}.footer-links{display:flex;flex-wrap:wrap;gap:24px}

    /* RESPONSIVE: Inhalt bleibt identisch; nur Layout wechselt. */
    @media (max-width:900px){
      .intro-grid,.craft-grid,.commission-grid,.news-grid{grid-template-columns:1fr;gap:44px}.detail-grid{gap:24px}.instrument-pair{gap:24px}.commission-grid .copy{max-width:720px}.refs-grid{gap:24px}
    }
    @media (max-width:680px){
      :root{--pad:20px;--space-xl:88px;--space-lg:64px}
      .header-inner{min-height:132px;padding-top:12px;padding-bottom:12px}.brand{}.logo img{width:96px;max-height:78px}.nav{display:none;}.menu-burger{width:30px;height:30px;align-self:start;margin-top:12px}.overlay-content{margin-top:140px}
      .hero{min-height:calc(100svh - 132px)}.hero-content{padding-top:92px}.hero-media img{object-position:60% 50%}.hero-media:after{background:linear-gradient(0deg,rgba(0,0,0,.82) 0%,rgba(0,0,0,.54) 42%,rgba(0,0,0,.10) 68%,transparent 78%)}.hero h1{ text-shadow:0 2px 10px rgba(0,0,0,.9)}.hero-sub{text-shadow:0 2px 8px rgba(0,0,0,.95)}
      .detail-grid,.instrument-pair,.refs-grid{grid-template-columns:1fr}.instrument-pair .small{width:78%;justify-self:start}
      .family img{height:62svh;min-height:430px;max-height:none;object-fit:cover;object-position:50% 55%}
      .stage-image img{height:60svh;min-height:420px;max-height:none;object-fit:cover;object-position:50% 54%}
      .footer-inner{align-items:flex-start;flex-direction:column}.footer-links{gap:16px 22px}
    }
  
    .contact-trap{position:absolute!important;left:-10000px!important;top:auto!important;width:1px!important;height:1px!important;overflow:hidden!important}
    .form-note.is-success{color:#d8d5ce}.form-note.is-error{color:#f0d52f}
    .to-top{position:fixed;right:clamp(16px,2vw,28px);bottom:clamp(16px,2vw,28px);z-index:40;width:46px;height:46px;border:1px solid #555;background:rgba(9,9,9,.88);color:var(--text);display:grid;place-items:center;font-size:22px;line-height:1;cursor:pointer;opacity:0;visibility:hidden;transform:translateY(8px);transition:opacity .2s ease,visibility .2s ease,transform .2s ease,color .18s ease,border-color .18s ease}
    .to-top.show{opacity:1;visibility:visible;transform:none}.to-top:hover,.to-top:focus-visible{color:var(--interactive);border-color:var(--interactive)}
/* =========================================================
   RECHTSEITEN: Impressum und Datenschutz
   ========================================================= */
body.legal{
  line-height:1.7;
}
/* Rechtseiten: gemeinsamer Header wie Startseite */

body.legal main{
  width:min(920px,calc(100% - 40px));
  margin:0 auto;
  padding:72px 0 110px;
}
body.legal h1,
body.legal h2,
body.legal h3{
  font-family:var(--serif);
  font-weight:400;
  line-height:1.18;
}
body.legal h1{
  font-size:clamp(42px,7vw,76px);
  margin:0 0 48px;
}
body.legal h2{
  font-size:clamp(25px,3vw,36px);
  margin:58px 0 16px;
}
body.legal h3{
  font-size:21px;
  margin:34px 0 10px;
}
body.legal p,
body.legal li{
  color:#d7d3cb;
}
body.legal .back{
  display:inline-block;
  margin-bottom:32px;
  color:var(--muted);
}
/* Footer auf Rechtseiten: gemeinsamer Footer wie auf der Startseite */

/* =========================================================
   404-SEITE
   ========================================================= */
body.error-page{
  line-height:1.7;
}
/* 404: gemeinsamer Header wie Startseite */

body.error-page main{
  width:min(920px,calc(100% - 40px));
  margin:0 auto;
  padding:72px 0 110px;
  min-height:62vh;
}
body.error-page h1{
  font-family:var(--serif);
  font-weight:400;
  line-height:1.18;
  font-size:clamp(42px,7vw,76px);
  margin:0 0 28px;
}
body.error-page p{
  color:#d7d3cb;
}
body.error-page .back{
  display:inline-block;
  margin-top:20px;
  color:var(--muted);
}
/* Footer auf 404: gemeinsamer Footer wie auf der Startseite */


/* Navigation sichtbar halten; finale Override-Regel nach dem CSS-Umbau. */
header nav{
  display:flex;
}
@media (max-width:700px){
  header nav{
    display:flex;
  }
}

/* Referenzen: nur den oberen Abstand zum Kontakt halbieren. */
#referenzen{
  padding-top:calc(var(--space-xl) * .5);
}


/* Sichtbare Rückmeldung nach Versand des Kontaktformulars */
.form-note.is-success,
.form-note.is-error{
  margin-top:18px;
  padding:14px 16px;
  border:1px solid var(--line);
  line-height:1.5;
}
.form-note.is-success{
  border-color:#74746e;
}
.form-note.is-error{
  border-color:var(--interactive);
}

#form-status{scroll-margin-top:24px;}