/* Unterseite /mentoring – eigenes Design (Leitidee „Dein nächstes Kapitel").
   Markenfarben und Schriften der Website (Petrol, Baskerville, Source Sans, Allura), dazu ein warmer Cremeton.
   Alles unter .m, damit nichts in Header/Footer (Webflow-CSS) hineinwirkt. */
.m{--petrol:#256a6b;--petrol-dunkel:#1c5556;--salbei:#719e9f;--salbei-hell:#a9c8c9;--nebel:#e7f0f0;--creme:#f7f3ec;
  --sand:#e6dccb;--tinte:#2d2d2b;--oliv:#615d4a;--serif:Baskerville,Georgia,serif;--sans:"Sourcesans 3 Variable REAL",Arial,sans-serif;
  --ease:cubic-bezier(.2,.7,.2,1);width:100%;color:var(--tinte);font-family:var(--sans);font-size:17px;line-height:1.6;
  -webkit-font-smoothing:antialiased}
.m *,.m *::before,.m *::after{box-sizing:border-box}
.m p,.m h1,.m h2,.m h3,.m ul,.m ol{margin:0}
.m ul,.m ol{padding:0;list-style:none}
.m img{display:block;max-width:100%}
.m section[id]{scroll-margin-top:84px}
.m-wrap{width:100%;max-width:1240px;margin:0 auto;padding:0 clamp(20px,5vw,60px)}
.m [hidden]{display:none!important}
.m-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}

/* Typografie */
.m-eyebrow{display:flex;align-items:center;gap:.9rem;color:#4b8586;font-size:.78rem;font-weight:600;letter-spacing:.22em;text-transform:uppercase}
.m-eyebrow::before{content:"";width:2.25rem;height:1px;background:currentColor}
.m-h2{font-family:var(--serif);font-weight:400;font-size:clamp(2.1rem,1.3rem + 2.4vw,3.4rem);line-height:1.1;letter-spacing:-.01em;color:var(--petrol);hyphens:manual}
.m-h2--hell{color:#fff}
.m-lead{font-size:1.18rem;line-height:1.7;color:#3d3d3a;text-wrap:pretty}
.m-label{margin-bottom:1rem!important;color:var(--salbei);font-size:.78rem;font-weight:600;letter-spacing:.2em;text-transform:uppercase}
.m-signatur{margin-top:1.25rem!important;font-family:"Allura REAL",cursive;font-size:2.4rem;line-height:1;color:var(--salbei);letter-spacing:.02em}

/* Buttons & Links */
.m-btn{display:inline-flex;align-items:center;justify-content:center;min-height:56px;padding:0 2rem;border:0;border-radius:999px;
  background:var(--petrol);color:#fff;font:600 1rem/1.2 var(--sans);text-align:center;text-decoration:none;cursor:pointer;
  box-shadow:0 10px 24px -14px rgba(37,106,107,.8);transition:background .3s,transform .3s var(--ease),box-shadow .3s}
.m-btn:hover{background:var(--petrol-dunkel);transform:translateY(-2px);box-shadow:0 16px 30px -16px rgba(37,106,107,.9)}
.m-btn:focus-visible,.m-link:focus-visible,.m-finanz__karte:focus-visible{outline:2px solid var(--salbei);outline-offset:4px}
.m-btn--hell{background:#fff;color:var(--petrol);box-shadow:none}
.m-btn--hell:hover{background:var(--creme)}
.m-btn[disabled]{opacity:.6;cursor:wait;transform:none}
.m-link{color:var(--petrol);font-weight:600;text-decoration:none;background:linear-gradient(currentColor,currentColor) 0 100%/0 1px no-repeat;
  padding-bottom:2px;transition:background-size .35s var(--ease)}
.m-link:hover{background-size:100% 1px}

/* Hero */
.m-hero{background:var(--creme);padding:clamp(3.5rem,7vw,6.5rem) 0 clamp(4rem,8vw,7.5rem);overflow:hidden}
.m-hero__grid{display:grid;grid-template-columns:1.08fr .92fr;gap:clamp(2.5rem,6vw,6rem);align-items:center}
.m-hero__titel{text-wrap:balance;margin:1.5rem 0 0!important;font-family:var(--serif);font-weight:600;font-size:clamp(3rem,1.4rem + 5.2vw,6rem);
  line-height:1.02;letter-spacing:-.02em;color:var(--petrol);hyphens:manual;text-wrap:balance}
.m-hero__unter{margin-top:1.5rem!important;font-family:var(--serif);font-size:clamp(1.25rem,1rem + .7vw,1.55rem);color:var(--oliv)}
.m-hero__intro{max-width:30rem;margin-top:1rem!important;font-size:1.15rem;line-height:1.65;color:#4a4a46}
.m-hero__cta{display:flex;flex-wrap:wrap;align-items:center;gap:1.25rem 2rem;margin-top:2.5rem}
.m-hero__bild{position:relative;justify-self:end;width:100%;max-width:480px}
.m-bogen{position:relative;aspect-ratio:4/5;border-radius:999px 999px 22px 22px;overflow:hidden;background:var(--sand)}
.m-bogen img{width:100%;height:100%;object-fit:cover;object-position:50% 30%}
.m-hero__bild::before{content:"";position:absolute;inset:-18px 18px 18px -18px;border:1px solid var(--salbei);border-radius:999px 999px 22px 22px;z-index:0}
.m-bogen{z-index:1}
.m-siegel{position:absolute;z-index:2;left:-44px;bottom:14%;display:flex;flex-direction:column;align-items:center;justify-content:center;
  width:128px;height:128px;border-radius:50%;background:var(--petrol);color:#fff;box-shadow:0 18px 40px -18px rgba(28,85,86,.9)}
.m-siegel span{font-family:var(--serif);font-size:2.4rem;line-height:1}
.m-siegel small{margin-top:.35rem;font-size:.66rem;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--salbei-hell)}

/* Fassade: Was ich mitbringe / Was du mitbringst */
.m-fassade{background:#fff;padding:clamp(5rem,9vw,8.5rem) 0}
.m-fassade__grid{display:grid;grid-template-columns:.95fr 1.05fr;gap:clamp(3rem,7vw,7rem);align-items:start}
.m-fassade__links{position:sticky;top:120px}
.m-fassade__bild{max-width:340px;margin-top:2.75rem;border-radius:16px;overflow:hidden;aspect-ratio:3/4}
.m-fassade__bild img{width:100%;height:100%;object-fit:cover;object-position:50% 60%}
.m-fassade__rechts{display:flex;flex-direction:column;gap:3rem;padding-top:.5rem}
.m-block .m-lead+.m-lead{margin-top:1.25rem}
.m-du{position:relative;padding:clamp(2rem,4vw,3rem);border-radius:20px;background:var(--nebel)}
.m-du::before{content:"“";position:absolute;top:-.35em;right:.4em;font-family:var(--serif);font-size:9rem;line-height:1;color:rgba(37,106,107,.12)}
.m-du__text{font-family:var(--serif);font-size:clamp(1.55rem,1.15rem + 1.1vw,2.1rem);line-height:1.3;color:var(--petrol)}

/* Pakete */
.m-pakete{background:var(--creme);padding:clamp(5rem,9vw,8.5rem) 0}
.m-kopf{display:flex;flex-direction:column;align-items:center;gap:1.1rem;text-align:center}
.m-pakete__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem;margin-top:clamp(2.5rem,5vw,4rem);align-items:stretch}
.m-paket{display:flex;flex-direction:column;padding:2.4rem 2.2rem 2.2rem;border:1px solid var(--sand);border-radius:22px;background:#fff;
  transition:transform .45s var(--ease),box-shadow .45s var(--ease)}
.m-paket:hover{transform:translateY(-6px);box-shadow:0 30px 50px -36px rgba(45,45,43,.45)}
.m-paket__kopf{display:flex;align-items:center;justify-content:space-between;gap:1rem}
.m-paket__nr{font-family:var(--serif);font-size:1rem;color:var(--salbei)}
.m-paket__name{padding:.35rem .85rem;border:1px solid currentColor;border-radius:999px;color:var(--petrol);font-size:.66rem;font-weight:600;
  letter-spacing:.16em;text-transform:uppercase;white-space:nowrap}
.m-paket__dauer{margin-top:2.25rem!important;font-family:var(--serif);font-weight:400;font-size:2.35rem;line-height:1.05;color:var(--petrol)}
.m-paket__titel{margin-top:.85rem!important;font-size:1.08rem;font-weight:500;line-height:1.45;color:var(--oliv)}
.m-paket__liste{margin:1.75rem 0 2rem!important;display:flex;flex-direction:column}
.m-paket__liste li{position:relative;padding:.7rem 0 .7rem 1.6rem;border-top:1px solid #efe8dc;font-size:.98rem;line-height:1.45}
.m-paket__liste li::before{content:"";position:absolute;left:0;top:1.15rem;width:.55rem;height:.55rem;border:1.5px solid var(--salbei);border-radius:50%}
.m-paket__fuss{display:flex;flex-direction:column;align-items:flex-start;gap:1rem;margin-top:auto;padding-top:1.5rem;border-top:1px solid var(--sand)}
.m-paket__preis{font-family:var(--serif);font-size:2.4rem;line-height:1;color:var(--tinte)}
.m-paket.is-featured{border-color:var(--petrol);background:var(--petrol);color:#fff}
.m-paket.is-featured .m-paket__nr{color:var(--salbei-hell)}
.m-paket.is-featured .m-paket__name,.m-paket.is-featured .m-paket__dauer,.m-paket.is-featured .m-paket__preis,.m-paket.is-featured .m-link{color:#fff}
.m-paket.is-featured .m-paket__titel{color:#d9e7e7}
.m-paket.is-featured .m-paket__liste li{border-top-color:rgba(255,255,255,.16)}
.m-paket.is-featured .m-paket__liste li::before{border-color:var(--salbei-hell)}
.m-paket.is-featured .m-paket__fuss{border-top-color:rgba(255,255,255,.3)}
.m-hinweis{max-width:44rem;margin:3rem auto 0!important;text-align:center;font-size:.98rem;color:#5d5a50}
/* Einstieg (Einzelangebot unter den Kapiteln) */
.m-einstieg{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.2fr) auto;gap:clamp(1.5rem,4vw,3.5rem);align-items:center;
  margin-top:clamp(2.5rem,5vw,3.5rem);padding:clamp(1.75rem,3.5vw,2.5rem) clamp(1.5rem,4vw,3rem);border:1px solid var(--sand);border-radius:22px;background:#fff}
.m-einstieg__name{margin-top:.85rem!important;font-family:var(--serif);font-weight:400;font-size:clamp(1.9rem,1.4rem + 1vw,2.35rem);line-height:1.1;color:var(--petrol)}
.m-einstieg__liste{margin:0!important}
.m-einstieg__liste li:first-child{border-top:0}
.m-einstieg__fuss{display:flex;flex-direction:column;align-items:flex-start;gap:1.1rem}

/* Wenige Plätze + Ablauf */
.m-plaetze{position:relative;overflow:hidden;background:var(--petrol);color:#fff;padding:clamp(5rem,9vw,8.5rem) 0}
.m-plaetze__bild{position:absolute;inset:0 0 0 45%;background:url(/assets/img/mentoring-tuer.webp) 62% 45%/cover;opacity:.32;
  -webkit-mask-image:linear-gradient(to right,transparent,#000 55%);mask-image:linear-gradient(to right,transparent,#000 55%)}
.m-plaetze .m-wrap{position:relative}
.m-plaetze__kopf{max-width:38rem}
.m-plaetze__text{margin-top:1.5rem!important;font-size:1.18rem;line-height:1.7;color:#dbe8e8}
.m-ablauf{display:grid;grid-template-columns:repeat(3,1fr);gap:2rem;margin:clamp(3rem,6vw,4.5rem) 0!important;counter-reset:none}
.m-schritt{padding-top:1.5rem;border-top:1px solid rgba(255,255,255,.3)}
.m-schritt__nr{font-family:var(--serif);font-size:2.8rem;line-height:1;color:var(--salbei-hell)}
.m-schritt__titel{margin-top:1rem!important;font-family:var(--serif);font-weight:400;font-size:1.5rem;line-height:1.2;color:#fff}
.m-schritt__text{margin-top:.6rem!important;font-size:1rem;line-height:1.6;color:#d3e3e3}

/* Bewerbung */
.m-bewerbung{background:#fff;padding:clamp(5rem,9vw,8.5rem) 0 clamp(4rem,7vw,6rem)}
.m-bewerbung__grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(3rem,6vw,5.5rem);align-items:start}
.m-bewerbung__text{display:flex;flex-direction:column;gap:1.25rem;position:sticky;top:120px}
.m-bewerbung__text .m-h2{font-size:clamp(2.1rem,1.4rem + 1.6vw,2.75rem)}
.m-kontakt{display:flex;flex-direction:column;gap:.75rem;margin-top:.75rem!important}
.m-kontakt a{display:inline-flex;align-items:center;gap:.75rem;color:var(--petrol);font-weight:500;text-decoration:none}
.m-kontakt a:hover{text-decoration:underline}
.m-formular{padding:clamp(1.75rem,4vw,2.75rem);border-radius:24px;background:var(--creme)}
.m-form{display:grid;grid-template-columns:1fr 1fr;gap:1.15rem 1.25rem}
.m-feld{grid-column:1/-1;display:flex;flex-direction:column;gap:.45rem}
.m-feld--halb{grid-column:auto}
.m-feld label{font-size:.88rem;font-weight:600;color:var(--oliv)}
.m-feld input,.m-feld select,.m-feld textarea{width:100%;padding:.9rem 1rem;border:1px solid var(--sand);border-radius:12px;background:#fff;
  color:var(--tinte);font:400 1rem/1.4 var(--sans);transition:border-color .2s,box-shadow .2s;-webkit-appearance:none;appearance:none}
.m-feld select{padding-right:2.75rem;background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23256a6b' stroke-width='1.6'/%3E%3C/svg%3E") no-repeat right 1.1rem center}
.m-feld textarea{resize:vertical;min-height:140px}
.m-feld input:focus,.m-feld select:focus,.m-feld textarea:focus{outline:0;border-color:var(--petrol);box-shadow:0 0 0 3px rgba(37,106,107,.15)}
.m-check{grid-column:1/-1;margin:0;font-weight:400;display:flex;align-items:flex-start;gap:.75rem;font-size:.92rem;line-height:1.5;color:#4a4a46;cursor:pointer}
.m-check input{flex:none;width:18px;height:18px;margin:.15rem 0 0;accent-color:var(--petrol)}
.m-check a{color:var(--petrol)}
.m-btn--voll{grid-column:1/-1;justify-self:start;margin-top:.5rem}
.m-form__fehler{grid-column:1/-1;color:#a23b2a;font-size:.95rem}
.m-danke{display:flex;flex-direction:column;gap:.75rem;font-size:1.1rem;line-height:1.65}
.m-danke__titel{font-family:var(--serif);font-size:2rem;line-height:1.2;color:var(--petrol)}

/* Finanzen-Hinweis */
.m-finanz{background:#fff;padding:0 0 clamp(4.5rem,8vw,7rem)}
.m-finanz__karte{display:flex;align-items:center;justify-content:space-between;gap:2rem;padding:clamp(1.75rem,4vw,2.75rem) clamp(1.5rem,4vw,3.25rem);
  border-radius:22px;background:var(--nebel);color:#4a4a46;text-decoration:none;transition:background .3s}
.m-finanz__karte:hover{background:#dce9e9}
.m-finanz__titel{margin:.75rem 0 .35rem!important;font-family:var(--serif);font-size:1.75rem;line-height:1.2;color:var(--petrol)}
.m-finanz__pfeil{flex:none;display:flex;align-items:center;justify-content:center;width:60px;height:60px;border-radius:50%;background:var(--petrol);
  color:#fff;font-size:1.4rem;transition:transform .35s var(--ease)}
.m-finanz__karte:hover .m-finanz__pfeil{transform:translateX(6px)}

/* Einblendungen (nur mit JS, siehe mentoring.js) */
.m-js .m [data-reveal]{opacity:0;transform:translateY(26px);transition:opacity .9s var(--ease) var(--d,0ms),transform .9s var(--ease) var(--d,0ms)}
.m-js .m [data-reveal="bild"]{transform:scale(.96)}
.m-js .m [data-reveal].is-in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  .m-js .m [data-reveal]{opacity:1;transform:none;transition:none}
  .m-paket,.m-btn,.m-finanz__pfeil{transition:none}
}

/* Tablet */
@media screen and (max-width:991px){
  .m-hero__grid,.m-fassade__grid,.m-bewerbung__grid{grid-template-columns:1fr}
  .m-hero__bild{justify-self:center;max-width:420px;margin:1rem 0 0 18px}
  .m-fassade__links,.m-bewerbung__text{position:static}
  .m-fassade__bild{max-width:300px}
  .m-pakete__grid{grid-template-columns:1fr;max-width:560px;margin-left:auto;margin-right:auto}
  .m-ablauf{grid-template-columns:1fr;gap:1.75rem}
  .m-einstieg{grid-template-columns:1fr;max-width:560px;margin-left:auto;margin-right:auto;align-items:start}
  .m-einstieg__liste li:first-child{border-top:1px solid #efe8dc}
  .m-plaetze__bild{inset:auto 0 0 0;height:55%;-webkit-mask-image:linear-gradient(to bottom,transparent,#000 70%);mask-image:linear-gradient(to bottom,transparent,#000 70%);opacity:.2}
}
@media screen and (min-width:601px) and (max-width:991px){
  .m-fassade__links{display:grid;grid-template-columns:1fr 240px;gap:2.5rem;align-items:end}
  .m-fassade__bild{margin-top:0}
}
/* Handy */
@media screen and (max-width:600px){
  .m{font-size:16px}
  .m-siegel{width:100px;height:100px;left:-14px;bottom:8%}
  .m-siegel span{font-size:1.9rem}
  .m-hero__bild::before{inset:-12px 12px 12px -12px}
  .m-form{grid-template-columns:1fr}
  .m-paket{padding:2rem 1.5rem 1.75rem}
  .m-paket__dauer,.m-paket__preis{font-size:2.05rem}
  .m-finanz__karte{flex-direction:column;align-items:flex-start;gap:1.25rem}
  .m-btn{width:100%}
  .m-hero__cta{gap:1.25rem}
}
