/* ============================================================
   MINE OF BEAUTY — geteiltes Stylesheet
   Wird von allen Seiten eingebunden (index.html hat zusätzlich
   eigene, hero-spezifische Styles inline, weil nur diese Seite
   das Foto-Intro zeigt).
   ============================================================ */

:root{
  --paper:#faf7f1;
  --cream:#efe6d6;
  --ink:#15130f;
  --ink-soft:#4a453c;
  --gold:#b8935c;
  --gold-light:#e6d3ab;

  --font-display:"Didot","Bodoni MT","Big Caslon","Iowan Old Style",Georgia,serif;
  --font-sans:"Futura","Avenir Next","Helvetica Neue",Arial,sans-serif;

  --ease-luxe:cubic-bezier(.16,1,.3,1);
  --container:1200px;
}

/* ============================================================
   SEITENÜBERGÄNGE (View Transitions)
   Weicher Crossfade beim Wechsel zwischen den Unterseiten, statt
   des harten Sprungs bei normaler Mehrseiten-Navigation. Native
   Browser-API (kein JS nötig) — Browser ohne Unterstützung
   navigieren einfach wie bisher, ganz ohne Fallback-Aufwand.
   Gilt gleichermaßen für Handy und Desktop, da beide dasselbe
   Stylesheet nutzen.
   ============================================================ */
@view-transition{
  navigation:auto;
}
::view-transition-old(root),
::view-transition-new(root){
  animation-duration:.5s;
  animation-timing-function:var(--ease-luxe);
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--font-sans);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
ul{ list-style:none; margin:0; padding:0; }
h1,h2,h3,p{ margin:0; }

.visually-hidden{
  position:absolute; width:1px; height:1px; overflow:hidden;
  clip:rect(0,0,0,0); white-space:nowrap;
}

.skip-link{
  position:absolute; top:-100%; left:1rem; z-index:200;
  background:var(--ink); color:var(--paper); padding:.8em 1.4em;
  transition:top .2s var(--ease-luxe);
}
.skip-link:focus{ top:1rem; }

:focus-visible{ outline:2px solid var(--gold); outline-offset:3px; }

.container{
  width:100%; max-width:var(--container); margin:0 auto;
  padding-left:clamp(1.25rem,4vw,3rem); padding-right:clamp(1.25rem,4vw,3rem);
}

/* ============================================================
   HEADER / NAVIGATION
   Kein dauerhafter Hintergrundbalken — Logo und Reiter liegen
   anfangs direkt, frei auf dem Foto bzw. der Seite. Sobald aber
   gescrollt wird (.is-scrolled), bekommt der fixierte Header einen
   blickdichten, weichgezeichneten Hintergrund, damit der darunter
   scrollende Seitentext nicht mit der Navigation verschmilzt.
   Logo oben links in guter Größe, Reiter oben rechts, rechtsbündig,
   Schrift in Schwarz.
   ============================================================ */
.site-header{
  position:fixed; inset:0 0 auto 0; z-index:40;
  padding:clamp(1rem,2.5vw,1.8rem) 0;
  opacity:0; transform:translateY(-14px);
  transition:opacity .8s var(--ease-luxe), transform .8s var(--ease-luxe),
             background-color .35s ease, box-shadow .35s ease;
}
body.is-revealed .site-header{ opacity:1; transform:translateY(0); }
.site-header--static{ opacity:1; transform:none; }

.site-header.is-scrolled{
  background:rgba(250,247,241,.92);
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  box-shadow:0 1px 0 rgba(21,19,15,.08);
}

.site-header .container{
  max-width:none;
  padding-left:clamp(.9rem,2.2vw,1.6rem); padding-right:clamp(.6rem,2vw,1.4rem);
}
.nav-inner{ display:flex; align-items:center; justify-content:space-between; }

.logo-img{
  height:clamp(62px,9vw,92px); width:auto; display:block;
}

.nav-links{ display:none; align-items:center; justify-content:flex-end; gap:clamp(.9rem,1.7vw,1.5rem); }
.nav-links a{
  font-size:.76rem; letter-spacing:.12em; text-transform:uppercase;
  color:var(--ink); padding:.3em 0; position:relative;
  transition:color .3s ease;
}
.nav-links a::after{
  content:""; position:absolute; left:0; right:100%; bottom:-2px; height:1px;
  background:var(--gold); transition:right .3s var(--ease-luxe);
}
.nav-links a:hover::after,
.nav-links a:focus-visible::after,
.nav-links a[aria-current="page"]::after{ right:0; }
.nav-links a[aria-current="page"]{ color:var(--gold) !important; }

.nav-toggle{
  display:inline-flex; flex-direction:column; justify-content:center; gap:5px;
  width:34px; height:34px; background:none; border:0; cursor:pointer; padding:0;
}
.nav-toggle span{
  display:block; width:100%; height:1px; background:var(--ink);
  transition:transform .3s var(--ease-luxe), opacity .3s ease;
}
.nav-toggle[aria-expanded="true"] span:nth-child(1){ transform:translateY(6px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3){ transform:translateY(-6px) rotate(-45deg); }

.mobile-menu{
  position:fixed; inset:0; z-index:39;
  background:var(--paper);
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2.2rem;
  opacity:0; visibility:hidden; transform:translateY(-8px);
  transition:opacity .35s var(--ease-luxe), transform .35s var(--ease-luxe), visibility .35s;
}
.mobile-menu.is-open{ opacity:1; visibility:visible; transform:translateY(0); }
.mobile-menu a{
  font-family:var(--font-display); font-size:1.6rem; color:var(--ink);
}

@media (min-width:860px){
  .nav-links{ display:flex; }
  .nav-toggle{ display:none; }
}

/* ============================================================
   PAPER MASTHEAD (nicht-Hero-Seiten)
   Ersetzt das Foto: derselbe Papierton, dieselbe Typografie —
   die Zeitung "geht weiter", auch ohne Foto im Hintergrund.
   ============================================================ */
.paper-masthead{
  padding:clamp(7rem,16vh,9rem) 0 clamp(2.5rem,6vh,3.5rem);
  background:var(--paper);
  text-align:center;
  border-bottom:1px solid rgba(21,19,15,.1);
}
.paper-masthead .eyebrow{ margin-bottom:.6em; }
.paper-masthead h1{
  font-family:var(--font-display); font-weight:400;
  font-size:clamp(2.2rem,5vw,3.4rem); text-wrap:balance;
}
.paper-masthead p{
  margin-top:.9em; max-width:44ch; margin-inline:auto;
  color:var(--ink-soft); line-height:1.7; font-size:clamp(.95rem,1.2vw,1.05rem);
}

.btn{
  font-family:var(--font-sans); font-size:.78rem; letter-spacing:.16em; text-transform:uppercase;
  padding:1em 2.2em; border:1px solid var(--paper); cursor:pointer;
  transition:background-color .35s ease, color .35s ease, border-color .35s ease;
  display:inline-block;
}
.btn--primary{ background:var(--paper); color:var(--ink); }
.btn--primary:hover,.btn--primary:focus-visible{ background:var(--gold); border-color:var(--gold); color:var(--ink); }
.btn--ghost{ background:transparent; color:var(--paper); }
.btn--ghost:hover,.btn--ghost:focus-visible{ background:rgba(250,247,241,.14); }
.btn--dark{ background:var(--ink); color:var(--paper); border-color:var(--ink); }
.btn--dark:hover,.btn--dark:focus-visible{ background:var(--gold); border-color:var(--gold); color:var(--ink); }

.cta-group{ display:flex; flex-wrap:wrap; gap:1rem; justify-content:center; }

/* ============================================================
   CONTENT SECTIONS
   ============================================================ */
section{ padding:clamp(4.5rem,10vh,8rem) 0; }

.section-head{
  max-width:48ch; margin:0 auto clamp(2.5rem,6vh,4rem); text-align:center;
}
.eyebrow{
  display:block; font-size:.72rem; letter-spacing:.28em; text-transform:uppercase;
  color:var(--gold); margin-bottom:.9em;
}
.section-head h2{
  font-family:var(--font-display); font-weight:400;
  font-size:clamp(1.8rem,3.6vw,2.6rem); text-wrap:balance;
}
.section-head p{
  margin-top:.9em; color:var(--ink-soft); line-height:1.7;
  font-size:clamp(.95rem,1.2vw,1.05rem);
}

.reveal-on-scroll{
  opacity:0; transform:translateY(24px);
  transition:opacity .8s var(--ease-luxe), transform .8s var(--ease-luxe);
}
.reveal-on-scroll.is-visible{ opacity:1; transform:translateY(0); }

/* ---- Karten-Raster (Schulung) ---- */
.services{ background:var(--cream); }
.services + .services{ border-top:1px solid rgba(21,19,15,.08); }
.service-grid{
  display:grid; gap:clamp(1.5rem,3vw,2.5rem);
  grid-template-columns:1fr;
}
@media (min-width:760px){
  .service-grid{ grid-template-columns:repeat(2,1fr); }
}
.service-card{
  background:var(--paper); padding:clamp(2rem,4vw,2.6rem) clamp(1.6rem,3vw,2rem);
  border-top:1px solid var(--gold);
}
.service-card .num{
  font-family:var(--font-display); color:var(--gold); font-size:.9rem; letter-spacing:.08em;
}
.service-card h3{
  font-family:var(--font-display); font-weight:400; font-size:1.35rem; margin:.7em 0 .5em;
}
.service-card p{ color:var(--ink-soft); line-height:1.7; font-size:.95rem; }

/* ---- Kontakt ---- */
.contact{ background:var(--ink); color:var(--paper); text-align:center; }
.contact .eyebrow{ color:var(--gold-light); }
.contact h2{
  font-family:var(--font-display); font-weight:400;
  font-size:clamp(1.9rem,4vw,2.8rem); max-width:20ch; margin:0 auto .6em; text-wrap:balance;
}
.contact p{ color:var(--cream); max-width:42ch; margin:0 auto 2.2em; line-height:1.7; }
.contact-details{
  display:flex; flex-wrap:wrap; justify-content:center; gap:clamp(1.5rem,4vw,3rem);
  margin-top:2.4rem; font-size:.85rem; letter-spacing:.04em; color:var(--cream);
}
.contact-details a{ border-bottom:1px solid transparent; transition:border-color .3s ease; }
.contact-details a:hover,.contact-details a:focus-visible{ border-color:var(--gold); }

/* ---- Anfrage-Formular (Leistungen, Preise, Schulung, Kontakt) ----
   Zweistufig: erst ein Button "Anfrage starten", der ein kleines
   Formular einblendet. Beim Absenden wird daraus eine WhatsApp-
   Nachricht gebaut (wa.me-Link); alternativ eine vorausgefüllte
   E-Mail als Fallback. Kein Server nötig. */
.anfrage{ text-align:center; }
.anfrage-cta{ margin-top:clamp(1.5rem,4vw,2.5rem); }
.anfrage-form{
  display:none; max-width:460px; margin:clamp(2.2rem,5vw,3.2rem) auto 0; text-align:left;
  opacity:0; transform:translateY(10px);
}
.anfrage-form.is-open{ display:block; animation:anfrage-in .5s var(--ease-luxe) forwards; }
@keyframes anfrage-in{ from{ opacity:0; transform:translateY(10px); } to{ opacity:1; transform:translateY(0); } }

.form-field{ margin-bottom:1.4rem; }
.form-field label{
  display:block; font-size:.7rem; letter-spacing:.18em; text-transform:uppercase;
  margin-bottom:.6em; color:var(--gold);
}
.form-field input,
.form-field select,
.form-field textarea{
  width:100%; padding:.9em 1.1em; font-size:.95rem; font-family:var(--font-sans);
  color:var(--ink); background:var(--paper); border:1px solid rgba(21,19,15,.16); border-radius:3px;
  transition:border-color .3s ease, box-shadow .3s ease;
}
.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus{
  outline:none; border-color:var(--gold); box-shadow:0 0 0 3px rgba(184,147,92,.16);
}
.form-field textarea{ resize:vertical; min-height:100px; }
.form-submit-wrap{ text-align:center; margin-top:1.8rem; }
.form-fallback{ margin-top:.9em; font-size:.8rem; }
.form-fallback a{ border-bottom:1px solid currentColor; transition:border-color .3s ease; }
.form-fallback a:hover,.form-fallback a:focus-visible{ border-color:var(--gold); }

/* ============================================================
   FOOTER
   ============================================================ */
.site-footer{
  background:var(--ink); color:var(--cream);
  padding:2.4rem 0; border-top:1px solid rgba(250,247,241,.12);
}
.footer-inner{
  display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:1rem;
}
.footer-links{
  display:flex; align-items:center; justify-content:center; flex-wrap:wrap;
  gap:clamp(1.2rem,2.8vw,2.2rem);
  font-size:.75rem; letter-spacing:.1em; text-transform:uppercase;
}
.footer-webdesign{ display:inline-flex; align-items:center; gap:.55em; }
.mj-logo-img{ height:26px; width:auto; display:block; }

/* ============================================================
   ACCESSIBILITY: reduced motion
   ============================================================ */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms !important; animation-iteration-count:1 !important;
    transition-duration:.01ms !important; scroll-behavior:auto !important;
  }
  ::view-transition-group(*),
  ::view-transition-old(*),
  ::view-transition-new(*){
    animation:none !important;
  }
}