/* =========================================================
   ManniMindset — Coaching / KI mit Claude (coaching.html)
   Eigenes Farbschema: BLAU (Basis) + GELB (Signal-Akzent) + GRAU (Flaeche).
   Bewusst abgesetzt vom reinen PIG-Blau. Basis-Bausteine (.container,
   Typo, .btn, .ms-form) kommen aus app.css; hier eigene Tokens + Overrides,
   nur auf coaching.html geladen. Claude-Clay (#D97757) NUR im Claude-Logo.
   ========================================================= */

:root{
  --mm-blau:#0091C8;  --mm-blau-d:#0077A6;
  --mm-gelb:#FFC400;  --mm-gelb-d:#E6A600;  --mm-gelb-weich:#FFF4D1;
  --mm-tinte:#20252B;                 /* Hero: kuehles Anthrazit-Grau */
  --mm-text:#22272C;  --mm-grau:#5b636b;
  --mm-flaeche:#F1F3F6;               /* helle graue Sektionsflaeche */
  --mm-linie:#e2e6ea;
  --clay:#D97757;                     /* nur Claude-Logo */
}

/* Graue Flaeche statt PIG-Hellblau (nur diese Seite) */
.section-alt{background:linear-gradient(180deg,#fff,var(--mm-flaeche))}

/* ---------- Kopf: Wortmarke + groesserer Startseite-Button ---------- */
.mm-hdr{border-bottom:1px solid var(--mm-linie)}
.mm-hdr .pagehdr-logo{height:32px}
.mm-hdr .back{
  display:inline-flex; align-items:center; gap:.45rem;
  padding:.6rem 1.25rem; border-radius:999px;
  background:var(--mm-blau); color:#fff; font-family:var(--head); font-weight:700;
  font-size:1rem; box-shadow:0 6px 16px rgba(0,145,200,.28); transition:background .15s, transform .15s;
}
.mm-hdr .back:hover{background:var(--mm-blau-d); color:#fff; transform:translateY(-1px)}

/* ---------- Hero (plakativ) ---------- */
.mm-hero{
  position:relative; overflow:hidden; color:#fff; background:var(--mm-tinte);
  padding:6.5rem 0 4.5rem;
}
.mm-hero .glow{position:absolute; border-radius:50%; filter:blur(72px); z-index:0}
.mm-hero .h1{width:44vw; height:44vw; background:var(--mm-blau); top:-14%; left:-8%; opacity:.5}
.mm-hero .h2{width:32vw; height:32vw; background:var(--mm-gelb); bottom:-16%; right:-6%; opacity:.22}
.mm-hero::after{
  content:""; position:absolute; inset:0; z-index:0; opacity:.05;
  background-image:linear-gradient(rgba(255,255,255,.6) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.6) 1px,transparent 1px);
  background-size:52px 52px; mask-image:radial-gradient(circle at 30% 40%,#000,transparent 78%);
}
.mm-hero .container{position:relative; z-index:1}
.mm-hero-grid{display:grid; grid-template-columns:1.15fr .85fr; gap:3rem; align-items:center}
.mm-hero .eyebrow{color:var(--mm-gelb)}
.mm-hero h1{font-size:clamp(2.1rem,5.4vw,4rem); color:#fff; margin-bottom:.5rem}
.mm-hero h1 .b{color:var(--mm-gelb)}
.mm-hero .lead{font-size:clamp(1.02rem,2vw,1.28rem); color:rgba(255,255,255,.82); max-width:44ch; margin:0 0 1.6rem}
.mm-badges{display:flex; flex-wrap:wrap; gap:.6rem; margin-bottom:1.5rem}
.mm-badge{
  display:inline-flex; align-items:center; gap:.5rem; margin-bottom:1.5rem;
  padding:.42rem 1rem; border-radius:999px; font-size:.82rem; font-weight:700; letter-spacing:.3px;
  background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.2); color:#fff;
}
.mm-badges .mm-badge{margin-bottom:0}
.mm-badge .dot{width:8px; height:8px; border-radius:50%; background:var(--mm-gelb); box-shadow:0 0 0 0 rgba(255,196,0,.6); animation:mmpulse 2s infinite}
@keyframes mmpulse{0%{box-shadow:0 0 0 0 rgba(255,196,0,.55)}70%{box-shadow:0 0 0 10px rgba(255,196,0,0)}100%{box-shadow:0 0 0 0 rgba(255,196,0,0)}}
.mm-cta{display:flex; gap:1rem; flex-wrap:wrap}
@media (prefers-reduced-motion:reduce){.mm-badge .dot{animation:none}}

/* Hero-Bild: Foto + Roboter-Chip + Claude-Logo (oben) */
.mm-visual{position:relative; display:flex; justify-content:center; align-items:flex-end}
.mm-visual .photo{width:100%; max-width:330px; filter:drop-shadow(0 24px 44px rgba(0,0,0,.5))}
.mm-chip{
  position:absolute; display:inline-flex; align-items:center; gap:.5rem;
  background:rgba(255,255,255,.96); color:var(--mm-text); border-radius:14px;
  padding:.55rem .8rem; font-family:var(--head); font-weight:700; font-size:.86rem;
  box-shadow:0 12px 30px rgba(0,0,0,.28);
}
.mm-chip svg{width:26px; height:26px; display:block}
.mm-chip.bot{left:-4%; bottom:20%}
/* Claude-Logo prominent oben im Bild */
.mm-claudemark{
  position:absolute; top:-2%; right:-3%; z-index:6; display:inline-flex; align-items:center; gap:.55rem;
  background:#fff; border-radius:16px; padding:.5rem .9rem .5rem .6rem;
  box-shadow:0 14px 34px rgba(0,0,0,.30);
}
.mm-claudemark .cl-logo{width:38px; height:38px; flex:0 0 auto; display:block}
.mm-claudemark .cl-txt{font-family:var(--head); font-weight:800; color:var(--mm-text); font-size:1rem; letter-spacing:.2px}
.mm-claudemark .cl-txt small{display:block; font-weight:600; font-size:.66rem; color:var(--mm-grau); letter-spacing:.4px}

/* ---- App-Jonglage: Logos kreisen animiert ums Foto ---- */
.aj{position:relative; width:100%; max-width:360px; aspect-ratio:1/1; margin:0 auto;
  display:flex; align-items:center; justify-content:center; --r:152px}
.aj-photo{position:relative; z-index:2; width:70%}
.aj-photo img{width:100%; display:block; filter:drop-shadow(0 24px 44px rgba(0,0,0,.5))}
.aj-ring{position:absolute; inset:0; z-index:3; animation:ajspin 28s linear infinite; will-change:transform}
.aj-i{position:absolute; top:50%; left:50%; transform:rotate(var(--a)) translate(var(--r))}
.aj-cc{position:absolute; animation:ajspin 28s linear infinite reverse; will-change:transform}
.aj-b{position:absolute; transform:translate(-50%,-50%) rotate(calc(-1 * var(--a)));
  width:46px; height:46px; border-radius:13px; background:#fff;
  box-shadow:0 8px 22px rgba(0,0,0,.25); display:flex; align-items:center; justify-content:center}
.aj-b svg{width:26px; height:26px; display:block}
.aj-app{width:26px; height:26px; border-radius:6px; display:flex; align-items:center; justify-content:center;
  color:#fff; font-weight:800; font-size:14px; font-family:Arial,sans-serif}
@keyframes ajspin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.aj-ring,.aj-cc{animation:none}}

/* Slogan im Hero */
.mm-slogan{font-family:var(--head); font-weight:800; color:#fff; line-height:1.25;
  font-size:clamp(1.15rem,2.5vw,1.55rem); margin:.1rem 0 1.1rem}
.mm-slogan .g{color:var(--mm-gelb)}

/* Zielgruppen: wir sprechen jeden an */
.mm-ziel{display:flex; flex-wrap:wrap; gap:.55rem; justify-content:center; margin-top:.2rem}
.mm-ziel span{background:#eaf5fb; border:1px solid rgba(0,145,200,.28); color:#16324a;
  border-radius:999px; padding:.42rem .95rem; font-size:.92rem; font-weight:600}

/* ---- Claude im Zentrum: Apps kreisen mit gleich grossen Namens-Pillen ---- */
.ajc-wrap{display:flex; justify-content:center; margin-top:.6rem}
.ajc{position:relative; width:100%; max-width:560px; aspect-ratio:1/1; --r:198px}
.ajc-hub{position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); z-index:4;
  width:122px; height:122px; border-radius:50%; background:#fff;
  box-shadow:0 18px 44px rgba(20,17,10,.16); display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:.1rem}
.ajc-hub svg{width:56px; height:56px}
.ajc-hub b{font-family:var(--head); font-weight:800; font-size:.86rem; color:#20201e}
.ajc-ring{position:absolute; inset:0; z-index:3; animation:ajspin 46s linear infinite; will-change:transform}
.ajc-i{position:absolute; top:50%; left:50%; transform:rotate(var(--a)) translate(var(--r))}
.ajc-cc{position:absolute; animation:ajspin 46s linear infinite reverse; will-change:transform}
.ajc-node{position:absolute; transform:translate(-50%,-50%) rotate(calc(-1 * var(--a)));
  display:flex; flex-direction:column; align-items:center; gap:.4rem}
.ajc-b{width:54px; height:54px; border-radius:15px; background:#fff;
  box-shadow:0 10px 24px rgba(20,17,10,.14); display:flex; align-items:center; justify-content:center}
.ajc-b svg{width:32px; height:32px; display:block}
.ajc-app{width:32px; height:32px; border-radius:8px; display:flex; align-items:center; justify-content:center;
  color:#fff; font-weight:800; font-size:17px; font-family:Arial,sans-serif}
.ajc-lbl{width:106px; text-align:center; font-size:.74rem; font-weight:700; color:#20201e;
  background:#fff; border:1px solid #e2ddd2; border-radius:999px; padding:.2rem .3rem;
  box-shadow:0 5px 14px rgba(20,17,10,.08); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
@media (prefers-reduced-motion:reduce){.ajc-ring,.ajc-cc{animation:none}}

/* ---- App-Liste: alle Anbindungen als Icon + Name ---- */
.applist{display:flex; flex-wrap:wrap; justify-content:center; gap:.8rem; margin-top:.4rem}
.applist .app{display:flex; flex-direction:column; align-items:center; gap:.45rem; width:118px; text-align:center}
.applist .ic{width:100%; height:58px; border-radius:14px; background:#fff; border:1px solid #e7e4dc;
  box-shadow:0 6px 16px rgba(20,17,10,.06); display:flex; align-items:center; justify-content:center; padding:.5rem .85rem}
.applist .ic svg{max-width:100%; max-height:38px; width:auto; height:auto; display:block}
.applist .ic .cs-app{width:34px; height:34px; border-radius:8px; display:flex; align-items:center; justify-content:center;
  color:#fff; font-weight:800; font-size:18px; font-family:Arial,sans-serif}
.applist .ic img{max-width:100%; max-height:42px; width:auto; height:auto; object-fit:contain; display:block}
.applist .nm{font-size:.76rem; font-weight:600; color:#3a3a36; line-height:1.15}

@media (max-width:620px){
  .ajc{max-width:330px; --r:126px}
  .ajc-hub{width:88px; height:88px} .ajc-hub svg{width:40px; height:40px} .ajc-hub b{font-size:.72rem}
  .ajc-b{width:44px; height:44px} .ajc-b svg{width:26px; height:26px}
  .ajc-app{width:26px; height:26px; font-size:14px}
  .ajc-lbl{width:82px; font-size:.64rem}
}

@media (max-width:920px){
  .mm-hero-grid{grid-template-columns:1fr; gap:2rem}
  .mm-visual{order:-1}
  .mm-visual .photo{max-width:240px}
  .mm-chip.bot{left:0; bottom:16%}
  .mm-claudemark{right:0; top:2%}
  .aj{max-width:300px; --r:126px}
}

/* ---------- Zwei Wege ---------- */
.mm-ways{display:grid; grid-template-columns:repeat(2,1fr); gap:1.6rem}
.mm-way{
  position:relative; background:#fff; border:1px solid var(--mm-linie); border-radius:var(--radius);
  padding:2rem 1.8rem; box-shadow:var(--shadow-sm); overflow:hidden;
  transition:transform .2s ease, box-shadow .2s ease;
}
.mm-way::before{content:""; position:absolute; inset:0 0 auto 0; height:4px; background:var(--mm-blau)}
.mm-way:hover{transform:translateY(-6px); box-shadow:var(--shadow)}
.mm-way .ic{width:56px; height:56px; border-radius:16px; background:var(--mm-flaeche);
  display:flex; align-items:center; justify-content:center; margin-bottom:1.1rem}
.mm-way .ic svg{width:30px; height:30px}
.mm-way h3{color:var(--mm-text); margin-bottom:.4rem}
.mm-way p{color:var(--mm-grau); margin-bottom:0}
.mm-ways-foot{text-align:center; margin-top:1.8rem; font-family:var(--head); font-weight:700;
  font-size:1.05rem; color:var(--mm-text)}
.mm-ways-foot .b{background:var(--mm-gelb-weich); color:var(--mm-text); padding:.15rem .55rem;
  border-radius:8px; box-decoration-break:clone; -webkit-box-decoration-break:clone}

/* ---------- Manni + KI als Team ---------- */
.mm-team{display:grid; grid-template-columns:.9fr 1.1fr; gap:2.5rem; align-items:center}
/* Foto auf sauberer heller Karte -> kein weisser Freistell-Rand mehr sichtbar */
.mm-team-photo{display:flex; justify-content:center}
.mm-team-photo .frame{
  width:100%; max-width:300px; background:linear-gradient(160deg,#ffffff,#eef1f4);
  border:1px solid var(--mm-linie); border-radius:22px; padding:14px 14px 0;
  box-shadow:var(--shadow); display:flex; justify-content:center; align-items:flex-end;
}
.mm-team-photo .frame img{width:100%; max-width:260px; display:block}
.mm-facts{list-style:none; margin:1.2rem 0 0; padding:0}
.mm-facts li{position:relative; padding-left:2rem; margin-bottom:.9rem; color:var(--mm-text)}
.mm-facts li svg{position:absolute; left:0; top:.15em; width:20px; height:20px; color:var(--mm-blau)}
.mm-facts b{font-family:var(--head)}
.mm-team-claude{
  margin-top:1.4rem; display:flex; gap:.8rem; align-items:center;
  background:var(--mm-flaeche); border:1px solid var(--mm-linie); border-radius:14px; padding:1rem 1.2rem;
}
.mm-team-claude .spark{flex:0 0 auto}
.mm-team-claude .spark svg{width:34px; height:34px; display:block}
.mm-team-claude p{margin:0; color:var(--mm-text); font-size:.96rem}
@media (max-width:860px){ .mm-team{grid-template-columns:1fr; gap:1.6rem} .mm-team-photo .frame{max-width:240px} }

/* ---------- Abends-Vorteil (Band) ---------- */
.mm-evening{background:var(--mm-tinte); color:#fff; border-radius:var(--radius); padding:2.2rem 2rem;
  display:flex; gap:1.4rem; align-items:center; box-shadow:var(--shadow)}
.mm-evening .ic{flex:0 0 auto; width:60px; height:60px; border-radius:16px;
  background:rgba(255,196,0,.16); display:flex; align-items:center; justify-content:center}
.mm-evening .ic svg{width:32px; height:32px; color:var(--mm-gelb)}
.mm-evening h3{color:#fff; margin-bottom:.25rem}
.mm-evening p{color:rgba(255,255,255,.8); margin:0}
@media (max-width:600px){ .mm-evening{flex-direction:column; text-align:center; padding:1.8rem 1.4rem} }

/* ---------- So laeuft's (3 Schritte) ---------- */
.mm-steps{display:grid; grid-template-columns:repeat(3,1fr); gap:1.6rem}
.mm-step{background:#fff; border:1px solid var(--mm-linie); border-radius:var(--radius);
  padding:1.9rem 1.6rem; box-shadow:var(--shadow-sm); text-align:center}
.mm-step .no{width:46px; height:46px; border-radius:50%; background:var(--mm-blau); color:#fff;
  font-family:var(--head); font-weight:800; font-size:1.15rem; display:flex; align-items:center;
  justify-content:center; margin:0 auto 1rem}
.mm-step h3{font-size:1.12rem; margin-bottom:.35rem}
.mm-step p{color:var(--mm-grau); margin:0; font-size:.95rem}
@media (max-width:760px){
  .mm-steps{grid-template-columns:1fr}
  .mm-ways{grid-template-columns:1fr}
}

/* ---------- Angebote (Preis-Karten) ---------- */
.mm-offers{display:grid; grid-template-columns:repeat(2,1fr); gap:1.8rem; align-items:start}
.mm-offer{position:relative; display:flex; flex-direction:column; background:#fff;
  border:1px solid var(--mm-linie); border-radius:var(--radius); padding:2rem 1.9rem;
  box-shadow:var(--shadow-sm); overflow:hidden}
.mm-offer.feature{border:2px solid var(--mm-blau); box-shadow:var(--shadow)}
.mm-offer::before{content:""; position:absolute; inset:0 0 auto 0; height:5px; background:var(--mm-blau)}
/* Hammer-Juli: kraeftiges gelbes Signal-Badge */
.mm-flag{position:absolute; top:1rem; right:1rem; display:inline-flex; align-items:center; gap:.3rem;
  background:var(--mm-gelb); color:#3a2d00; font-family:var(--head); font-weight:800; font-size:.76rem;
  letter-spacing:.2px; padding:.4rem .8rem; border-radius:999px; box-shadow:0 6px 16px rgba(230,166,0,.4)}
.mm-offer .kicker{font-family:var(--head); font-weight:800; letter-spacing:1px; text-transform:uppercase;
  font-size:.72rem; color:var(--mm-blau); margin-bottom:.5rem}
.mm-offer h3{font-size:1.4rem; margin-bottom:.5rem; padding-right:6.5rem}
.mm-offer .desc{color:var(--mm-grau); margin-bottom:1.1rem}
.mm-feat{list-style:none; margin:0 0 1.3rem; padding:0}
.mm-feat li{position:relative; padding-left:1.7rem; margin-bottom:.55rem; color:var(--mm-text); font-size:.96rem}
.mm-feat li::before{content:""; position:absolute; left:0; top:.55em; width:8px; height:8px;
  border-radius:50%; background:var(--mm-blau)}
.mm-price{font-family:var(--head); margin:.2rem 0 1.2rem}
.mm-price .amount{font-size:2.1rem; font-weight:800; color:var(--mm-text); letter-spacing:-.5px}
.mm-price .unit{color:var(--mm-grau); font-weight:600; font-size:.95rem}
.mm-price .alt{display:block; margin-top:.2rem; color:var(--mm-grau); font-size:.92rem; font-weight:600}
.mm-note-s{margin-top:.4rem; font-size:.8rem; color:var(--mm-grau)}
.mm-offer .buy{margin-top:auto}
@media (max-width:760px){ .mm-offers{grid-template-columns:1fr} }

/* ---------- Digistore Consent-Gate ---------- */
.mm-ds{margin-top:.6rem}
.mm-ds .buy-row{display:flex; flex-wrap:wrap; gap:.7rem}
.mm-gate{border:1px dashed var(--mm-blau); background:rgba(0,145,200,.08); border-radius:12px;
  padding:1rem 1.1rem; font-size:.86rem; color:var(--mm-grau)}
.mm-gate p{margin:0}
.mm-embed{margin-top:1rem}
.mm-embed iframe{width:100%; min-height:640px; border:0; border-radius:12px; background:#fff}

/* ---------- FAQ ---------- */
.mm-faq{max-width:760px; margin:0 auto; display:flex; flex-direction:column; gap:.8rem}
.mm-faq-item{background:#fff; border:1px solid var(--mm-linie); border-radius:14px; padding:0 1.2rem; box-shadow:var(--shadow-sm)}
.mm-faq-item summary{list-style:none; cursor:pointer; font-family:var(--head); font-weight:700; color:var(--mm-text);
  padding:1.05rem 0; display:flex; align-items:center; justify-content:space-between; gap:1rem}
.mm-faq-item summary::-webkit-details-marker{display:none}
.mm-faq-item summary::after{content:"+"; font-size:1.5rem; color:var(--mm-blau); font-weight:800; line-height:1; flex:0 0 auto}
.mm-faq-item[open] summary::after{content:"\2013"}
.mm-faq-item p{margin:0 0 1.1rem; color:var(--mm-grau)}

/* ---------- Kontakt / Fragen ---------- */
.mm-contact{max-width:680px; margin:0 auto}

/* Footer: gruenes Herz, Grau-Linien */
.mm-foot .madeby .heart{color:#14BE05}

/* ---------- Führung / Router: Was passt zu dir? ---------- */
.mm-router{display:grid; grid-template-columns:1fr 1fr; gap:1.4rem}
.mm-choice{position:relative; text-align:left; cursor:pointer; background:#fff; border:2px solid var(--mm-linie);
  border-radius:var(--radius); padding:1.8rem 1.7rem 1.6rem; box-shadow:var(--shadow-sm); display:flex;
  flex-direction:column; gap:.5rem; font:inherit; color:var(--mm-text);
  transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease, opacity .18s ease}
.mm-choice:hover{transform:translateY(-4px); box-shadow:var(--shadow); border-color:var(--mm-blau)}
.mm-choice .mm-choice-ic{width:56px; height:56px; border-radius:16px; background:var(--mm-flaeche);
  display:flex; align-items:center; justify-content:center; margin-bottom:.2rem}
.mm-choice .mm-choice-ic svg{width:30px; height:30px; color:var(--mm-blau)}
.mm-choice-h{font-family:var(--head); font-weight:800; font-size:1.3rem}
.mm-choice-p{color:var(--mm-grau); font-size:.96rem; margin:0}
.mm-choice-cta{margin-top:.5rem; font-family:var(--head); font-weight:800; color:var(--mm-blau)}
.mm-choice[aria-pressed="true"]{border-color:var(--mm-gelb); box-shadow:0 0 0 4px rgba(255,196,0,.28), var(--shadow)}
.mm-choice[aria-pressed="true"]::after{content:"✓"; position:absolute; top:1rem; right:1.1rem; width:30px; height:30px;
  border-radius:50%; background:var(--mm-gelb); color:#3a2d00; font-weight:800; display:flex; align-items:center; justify-content:center}
.mm-router.chosen .mm-choice[aria-pressed="false"]{opacity:.5}
.mm-result{margin-top:1.6rem; background:linear-gradient(135deg,var(--mm-flaeche),#fff); border:1px solid var(--mm-linie);
  border-left:5px solid var(--mm-gelb); border-radius:16px; padding:1.6rem 1.7rem; box-shadow:var(--shadow-sm)}
.mm-result h3{font-size:1.25rem; margin-bottom:.3rem}
.mm-result p{color:var(--mm-grau); margin:0 0 1rem}
.mm-result .mm-result-cta{display:flex; flex-wrap:wrap; gap:.7rem}
@keyframes mmfade{from{opacity:0; transform:translateY(8px)}to{opacity:1; transform:none}}
.mm-result:not([hidden]){animation:mmfade .3s ease}
.mm-offer.highlight{border-color:var(--mm-gelb); box-shadow:0 0 0 4px rgba(255,196,0,.32), var(--shadow)}
@media (max-width:760px){ .mm-router{grid-template-columns:1fr} }

/* ---------- Checkout-Fenster (Digistore eingebettet, verlässt die Seite nicht) ---------- */
.mm-modal{position:fixed; inset:0; z-index:200; display:none; align-items:center; justify-content:center; padding:2vh 2vw}
.mm-modal.open{display:flex}
.mm-modal-back{position:absolute; inset:0; background:rgba(15,20,26,.62)}
.mm-modal-panel{position:relative; z-index:1; width:100%; max-width:640px; height:92vh; background:#fff;
  border-radius:16px; overflow:hidden; box-shadow:0 30px 80px rgba(0,0,0,.45); display:flex; flex-direction:column}
.mm-modal-head{display:flex; align-items:center; gap:1rem; padding:.7rem .5rem .7rem 1.1rem; border-bottom:1px solid var(--mm-linie)}
.mm-modal-head .t{font-family:var(--head); font-weight:800; color:var(--mm-text)}
.mm-modal-head .lock{margin-left:auto; color:#1e8e3e; font-size:.82rem; font-weight:700}
.mm-modal-close{background:none; border:0; font-size:1.7rem; line-height:1; cursor:pointer; color:var(--mm-grau); padding:.1rem .6rem}
.mm-modal-close:hover{color:var(--mm-text)}
.mm-modal-body{flex:1; min-height:0}
.mm-modal-body iframe{width:100%; height:100%; border:0; display:block}
@media (max-width:600px){ .mm-modal{padding:0} .mm-modal-panel{max-width:none; height:100%; border-radius:0} }

/* ---------- Mobil-Feinschliff ---------- */
@media (max-width:600px){
  .mm-hero{padding:5rem 0 3.2rem}
  .mm-hero h1{font-size:clamp(1.9rem,8vw,2.5rem)}
  .mm-cta{gap:.7rem}
  .mm-cta .btn{width:100%; justify-content:center}
  .mm-chip{font-size:.8rem; padding:.45rem .65rem}
  .mm-chip svg{width:22px; height:22px}
  .mm-claudemark{padding:.45rem .7rem .45rem .5rem}
  .mm-claudemark .cl-logo{width:32px; height:32px}
  .mm-offer h3{padding-right:5.5rem}
  .mm-offers{gap:1.2rem}
  .mm-ds .buy-row .btn{width:100%; justify-content:center}
}