/* ============================================================
   masteringonline.de — Nachbau der Wix-Seite als statische Site
   Schriften liegen lokal (kein Google-CDN, DSGVO-konform).
   Body-Schrift umstellen: --font-body unten auf 'Nunito Sans' setzen.
   ============================================================ */

/* ---------- Schriften ---------- */
@font-face { font-family:'Mulish'; font-style:normal; font-weight:300; font-display:swap;
  src:url('fonts/mulish-300-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family:'Mulish'; font-style:normal; font-weight:300; font-display:swap;
  src:url('fonts/mulish-300-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-024F,U+0259,U+1E00-1EFF,U+2020,U+20A0-20AB,U+20AD-20CF,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family:'Mulish'; font-style:normal; font-weight:400; font-display:swap;
  src:url('fonts/mulish-400-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family:'Mulish'; font-style:normal; font-weight:400; font-display:swap;
  src:url('fonts/mulish-400-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-024F,U+0259,U+1E00-1EFF,U+2020,U+20A0-20AB,U+20AD-20CF,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family:'Mulish'; font-style:normal; font-weight:700; font-display:swap;
  src:url('fonts/mulish-700-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family:'Mulish'; font-style:normal; font-weight:700; font-display:swap;
  src:url('fonts/mulish-700-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-024F,U+0259,U+1E00-1EFF,U+2020,U+20A0-20AB,U+20AD-20CF,U+2113,U+2C60-2C7F,U+A720-A7FF; }

@font-face { font-family:'Nunito Sans'; font-style:normal; font-weight:300; font-display:swap;
  src:url('fonts/nunito-sans-300-latin.woff2') format('woff2'); }
@font-face { font-family:'Nunito Sans'; font-style:normal; font-weight:400; font-display:swap;
  src:url('fonts/nunito-sans-400-latin.woff2') format('woff2'); }
@font-face { font-family:'Nunito Sans'; font-style:normal; font-weight:700; font-display:swap;
  src:url('fonts/nunito-sans-700-latin.woff2') format('woff2'); }

/* ---------- Design-Tokens (aus der Wix-Seite ausgelesen) ---------- */
:root {
  --gold:#F8BD26;
  --dark:#33343F;
  --near-black:#242323;
  /* aus dem Original ausgemessen: Karte #BEBEC2 auf Grund #33343F → 68% Weiß */
  --card:rgba(255,255,255,0.68);
  --panel:rgba(255,255,255,0.90);
  --card-solid:#F2F2F3;
  --text:#33343F;
  --white:#FFFFFF;

  --font-body:'Mulish', 'Avenir', 'Helvetica Neue', Arial, sans-serif;
  --font-head:'Helvetica Neue', Helvetica, Arial, sans-serif;

  --wrap:980px;
  --header-h:76px;
}

/* ---------- Grundlagen ---------- */
*,*::before,*::after { box-sizing:border-box; }
html { scroll-behavior:smooth; scroll-padding-top:var(--header-h); }
body {
  margin:0; background:var(--white); color:var(--text);
  font-family:var(--font-body); font-weight:300;
  font-size:15px; line-height:1.62;
  -webkit-font-smoothing:antialiased;
}
img { max-width:100%; display:block; }
a { color:inherit; }

.wrap { width:100%; max-width:var(--wrap); margin:0 auto; padding:0 20px; }

h1,h2,h3 { font-family:var(--font-head); font-weight:400; margin:0; letter-spacing:.01em; }

/* Sektionsüberschrift (56px im Original) */
.section-title { font-size:56px; line-height:1.2; text-align:center; color:var(--text); }

/* Gold-Button */
.btn {
  display:inline-block; background:var(--gold); color:var(--white);
  font-family:var(--font-body); font-weight:400;
  font-size:16px; letter-spacing:.14em; text-transform:uppercase;
  padding:17px 50px; text-decoration:none; border:0; cursor:pointer;
  transition:background .18s ease;
}
.btn:hover { background:#e0a916; }

/* ---------- Kopfzeile ---------- */
/* Oben gold — sobald gescrollt wird, wechselt der Balken auf durchscheinendes
   Weiß (wie im Original). */
.site-header {
  position:sticky; top:0; z-index:100;
  background:var(--gold); height:var(--header-h);
  transition:background .28s ease;
}
.site-header.is-scrolled {
  background:rgba(255,255,255,.75);
  -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
}
.site-header .wrap { display:flex; align-items:center; gap:24px; height:100%; max-width:1280px; }
.site-header .logo img { height:45px; width:auto; }
.main-nav { margin:0 auto; display:flex; gap:26px; }
.main-nav a {
  font-family:var(--font-body); font-weight:700; font-size:19px;
  color:var(--text); text-decoration:none; letter-spacing:.03em;
  padding:4px 0; border-bottom:2px solid transparent;
}
.main-nav a:hover { border-bottom-color:var(--text); }
.lang-switch {
  font-family:var(--font-body); font-weight:700; font-size:17px;
  background:var(--white); border:1px solid rgba(0,0,0,.18);
  padding:9px 16px; color:var(--text); cursor:pointer;
  text-decoration:none; line-height:1;
}
.lang-switch:hover { background:var(--near-black); color:var(--white); border-color:var(--near-black); }
.nav-toggle { display:none; }

/* ---------- Hero ---------- */
/* Wie beim Holzbild: kein flächiger Schleier, der die Lichter platt macht.
   Stattdessen das Foto in voller Kraft + ein weicher Verlauf hinter dem Text. */
.hero {
  position:relative; min-height:690px; overflow:hidden;
  display:flex; align-items:center; justify-content:center; text-align:center;
  background:#1B1512;
}
.hero::before {
  content:''; position:absolute; inset:0; z-index:0;
  background:url('assets/hero-studio.jpg') center/cover no-repeat;
  filter:saturate(1.12) brightness(1.42) contrast(1.04);
}
.hero::after {
  content:''; position:absolute; inset:0; z-index:1;
  background:radial-gradient(ellipse 62% 58% at 50% 46%, rgba(0,0,0,.42), rgba(0,0,0,.10) 70%, transparent);
}
.hero .wrap { position:relative; z-index:2; }
.hero h1 {
  color:var(--white); font-size:72px; line-height:1.08; margin-bottom:28px;
  text-shadow:0 2px 18px rgba(0,0,0,.35);
}
/* Der helle Kasten hellt den Untergrund auf — weiße Schrift darauf kommt nur auf
   ~6,5:1. Ein dezenter Schatten fängt die hellsten Stellen ab, ohne die Optik
   zu verändern. */
.hero-sub {
  max-width:640px; margin:0 auto 28px; padding:20px 26px;
  background:rgba(255,255,255,.28);
  color:var(--white); font-size:19px; line-height:1.68;
  text-shadow:0 1px 6px rgba(0,0,0,.75);
}
.hero-contact {
  color:var(--white); font-size:18px; margin-bottom:32px;
  text-shadow:0 1px 5px rgba(0,0,0,.65);
}
.hero a { color:var(--white); }

/* ---------- Leistungen ---------- */
.gold-band { background:var(--gold); padding:22px 0; }
.gold-band .section-title { color:var(--near-black); }

/* Im Original ist das KEIN Foto, sondern glattes Dunkelgrau (ausgemessen: #33343F) */
.leistungen { position:relative; padding:0 0 90px; background:var(--dark); }
.leistungen .wrap { position:relative; }
.cards { display:grid; grid-template-columns:repeat(3,1fr); gap:40px; padding-top:70px; }
.card { display:flex; flex-direction:column; align-items:center; }
.card-img {
  width:230px; height:230px; border-radius:50%; object-fit:cover;
  margin-bottom:-40px; position:relative; z-index:2;
}
.card-body {
  background:var(--card); color:var(--text);
  padding:64px 24px 30px; width:100%; flex:1;
}
.card-body h3 { font-size:20px; margin-bottom:16px; letter-spacing:.04em; }
.card-body p { margin:0 0 14px; }
.card-body .claim { font-style:italic; margin-top:20px; }

/* ---------- Über uns ---------- */
.ueber-uns {
  position:relative; padding:80px 0;
  background:url('assets/ueber-uns-bg.jpg') center/cover no-repeat;
}
.ueber-uns .panel {
  position:relative; max-width:620px; margin:0 auto;
  background:var(--panel); padding:44px 54px 40px; text-align:center;
}
.ueber-uns .section-title { margin-bottom:26px; }
.ueber-uns p { text-align:left; margin:0 0 20px; font-size:18px; line-height:1.7; }
.portrait {
  width:146px; height:146px; border-radius:50%; object-fit:cover;
  margin:30px auto 26px; border:6.4px solid var(--white);
}

/* ---------- So geht's ---------- */
.so-gehts {
  position:relative; padding:70px 0 80px;
  background:url('assets/so-gehts-bg.jpg') center/cover no-repeat;
}
.so-gehts::before { content:''; position:absolute; inset:0; background:rgba(0,0,0,.38); }
.so-gehts .wrap { position:relative; }
.so-gehts .section-title { color:var(--gold); }
.so-gehts .subtitle {
  text-align:center; color:var(--white); font-size:15px;
  letter-spacing:.1em; text-transform:uppercase; margin:6px 0 44px;
}
.steps { display:grid; grid-template-columns:repeat(4,1fr); gap:26px; }
.step { background:rgba(51,52,63,.9); padding:28px 24px 32px; text-align:center; }
.step h3 { color:var(--gold); font-size:21px; margin-bottom:16px; letter-spacing:.03em; }
.step p { color:var(--white); margin:0; font-size:17px; line-height:1.65; }
.step a { color:var(--white); }

/* ---------- music featured ---------- */
.featured {
  position:relative; padding:60px 0 70px;
  background:url('assets/music-featured-bg.jpg') center/cover no-repeat;
}
.featured::before { content:''; position:absolute; inset:0; background:rgba(0,0,0,.30); }
.featured .wrap { position:relative; }
.featured h2 {
  text-align:center; color:var(--white); font-size:30px;
  font-weight:300; font-family:var(--font-body); margin-bottom:34px;
}
/* Durchlaufende Logo-Leiste (statt der Einzelbild-Diashow von Wix) */
.logo-band {
  background:var(--white); padding:26px 0; overflow:hidden;
  /* an den Rändern sanft ausblenden, damit nichts hart abreißt */
  -webkit-mask-image:linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent);
          mask-image:linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent);
}
.logo-track {
  display:flex; align-items:center; width:max-content;
  animation:logo-lauf 26s linear infinite;
}
.logo-track:hover { animation-play-state:paused; }
/* max-width bremst die sehr breiten Logos (Handelsblatt, RTL), damit alle
   optisch ähnlich groß wirken statt nach Seitenverhältnis auseinanderzulaufen */
.logo-track img {
  height:44px; width:auto; max-width:180px; margin:0 46px;
  object-fit:contain; flex:0 0 auto;
}
@keyframes logo-lauf {
  from { transform:translateX(0); }
  to   { transform:translateX(-50%); }
}
/* Wer Bewegung im System abgeschaltet hat, sieht die Logos ruhend */
@media (prefers-reduced-motion:reduce) {
  .logo-track { animation:none; justify-content:center; width:100%; flex-wrap:wrap; gap:16px 0; }
}

/* ---------- Anfrage / Formular ---------- */
/* Holzbild kräftig und warm halten: kein grauer Schleier, dafür etwas mehr
   Sättigung — im Original ist das Holz deutlich satter (gemessen #421819). */
.anfrage { position:relative; padding:70px 0 80px; background:#150A06; }
.anfrage::before {
  content:''; position:absolute; inset:0; z-index:0;
  background:url('assets/anfrage-bg.jpg') center/cover no-repeat;
  filter:saturate(1.2) brightness(1.05);
}
.anfrage::after { content:''; position:absolute; inset:0; z-index:1; background:rgba(0,0,0,.06); }
.anfrage .wrap { position:relative; z-index:2; }
.anfrage .section-title { color:var(--white); }
.anfrage .intro { text-align:center; color:var(--white); margin:14px 0 40px; }
.anfrage .intro a { color:var(--gold); }

.form-grid { max-width:640px; margin:0 auto; }
.row-2 { display:grid; grid-template-columns:1fr 1fr; gap:20px; }
.field { margin-bottom:18px; }
.field label {
  display:block; color:var(--white); font-size:13px; margin-bottom:6px; letter-spacing:.02em;
}
.field input, .field textarea {
  width:100%; background:var(--card-solid); border:0; padding:10px 12px;
  font-family:var(--font-body); font-size:14px; color:var(--text);
}
.field textarea { min-height:96px; resize:vertical; }
.field input:focus, .field textarea:focus { outline:2px solid var(--gold); }
.checks { margin:26px 0 8px; border:0; padding:0; min-width:0; }
.checks > span { display:block; color:var(--white); font-size:17px; margin-bottom:16px; }
.check { display:flex; gap:12px; align-items:flex-start; color:var(--white); font-size:17px; line-height:1.5; margin-bottom:13px; }
.check input { margin-top:4px; width:17px; height:17px; accent-color:var(--gold); flex:0 0 auto; }
.form-actions { text-align:center; margin-top:26px; }
.form-actions .btn { width:100%; padding:15px; font-size:14px; }
.form-note { margin-top:16px; font-size:13px; text-align:center; min-height:20px; }
.form-note.ok { color:var(--gold); }
.form-note.err { color:#ff9a9a; }

/* ---------- Fakten ---------- */
.fakten { padding:70px 0 0; }
.fakten .section-title { text-align:left; margin:0 auto 34px; max-width:var(--wrap); padding:0 20px; }
.fakt { padding:28px 0; }
.fakt p { max-width:var(--wrap); margin:0 auto; padding:0 20px; font-size:18px; line-height:1.65; }

/* Streifenfolge wie im Original: erster Streifen dunkel, dann abwechselnd.
   (Die Überschrift zählt als erstes Kind mit, daher even/odd andersherum.) */
.fakt:nth-child(even) { background:var(--near-black); }
.fakt:nth-child(odd)  { background:var(--gold); }

/* Wix setzt auf ALLEN Streifen fast-weißen Text (#FBFBFB) — auf Gold ist das
   kaum lesbar. Bewusste Abweichung vom Original: goldene Streifen dunkel. */
.fakt { color:#FBFBFB; }
.fakt:nth-child(odd) { color:var(--near-black); }

/* ---------- Fußzeile ---------- */
.site-footer {
  background:var(--near-black); color:rgba(255,255,255,.7);
  text-align:center; padding:26px 0; font-size:13px;
}
.site-footer a { color:rgba(255,255,255,.7); }
.site-footer .links { margin-bottom:6px; }

/* ---------- Responsive ---------- */
@media (max-width:900px) {
  .cards { grid-template-columns:1fr; gap:60px; max-width:420px; margin:0 auto; }
  .steps { grid-template-columns:1fr 1fr; }
  .hero h1 { font-size:44px; }
  .section-title { font-size:36px; }
  .leistungen { background-attachment:scroll; }
  .slide-prev { left:-6px; }
  .slide-next { right:-6px; }
}
@media (max-width:640px) {
  .steps { grid-template-columns:1fr; }
  .row-2 { grid-template-columns:1fr; gap:0; }
  .hero h1 { font-size:30px; }
  .hero { min-height:520px; }
  .hero-sub { padding:16px 18px; font-size:17px; }
  .hero-contact { font-size:16px; }
  .btn { font-size:15px; padding:15px 34px; }
  .section-title { font-size:28px; }
  .ueber-uns .panel { padding:30px 24px; }
  .card-body { padding:60px 20px 26px; }

  /* Mobile Navigation */
  .nav-toggle {
    display:block; margin-left:auto; background:none; border:0;
    font-size:26px; line-height:1; cursor:pointer; color:var(--text); padding:4px 8px;
  }
  .main-nav {
    display:none; position:absolute; top:var(--header-h); left:0; right:0;
    background:var(--gold); flex-direction:column; gap:0; padding:8px 20px 16px;
    border-top:1px solid rgba(0,0,0,.12);
  }
  .main-nav.is-open { display:flex; }
  .main-nav a { padding:11px 0; }
  .lang-switch { order:3; }
}