/* =====================================================================================================
   MOBIL-STARTSEITE (02.11.2026, Gründer: "Mobilversion komplett neu, von 0, gleicher Inhalt, full Fokus auf Mobil, keine Animation").
   Eigenes Markup (kern2/mobil-start/mobil-start.html: #s2-mobil und #s2-mobil-faq), Desktop-Sektionen bleiben im HTML (SEO), sind mobil nur ausgeblendet.
   Preise und Fuß bleiben die vorhandenen Abschnitte (Preise: vorhandene Tarif-Reiter per reinem CSS).
   Keine Animation, keine Transition, kein Marquee, kein Scroll-Effekt. Einziges sticky: die schlichte Kopfleiste.

   ===== SCHALTER: Standard für alle Handys =====
   Jetzt (Test): Mobil-Fassung nur mit html.mobil-v2 (?mobil=v2, merkt sich localStorage "mobilV2", ?mobil=alt schaltet zurück).
   Zum STANDARD für alle Handys (bis 760 px): im Block "SCHALTER-BLOCK" unten JEDES "html.mobil-v2" durch "html" ersetzen
   (Suchen und Ersetzen nur in diesem Block, 12 Stellen) UND in kern/index.basis.html + unterseiten.py nichts weiter ändern.
   Alles außerhalb des Blocks gilt nur innerhalb von .s2m und braucht keinen Schalter.
   ===================================================================================================== */

/* Auf Desktop und ohne Schalter: Mobil-Markup weg, es lädt dann auch keine Bilder (display:none, loading="lazy"). */
.s2m{display:none}

/* ---------- SCHALTER-BLOCK ---------- */
@media (max-width:760px){
  html.mobil-v2 .s2m{display:block}
  html.mobil-v2 #leiste,
  html.mobil-v2 .hero-wrap,
  html.mobil-v2 .ladeschleier{display:none!important}
  html.mobil-v2 main.s2>section:not(#s2-preise):not(#s2-fuss){display:none!important}
  html.mobil-v2 body{background:#fff}
  html.mobil-v2 #s2-preise{padding:56px 20px 0!important}
  html.mobil-v2 #s2-preise .s2-rahmen{padding-inline:0!important}
  html.mobil-v2 #s2-preise .s2-pv-tabelle tbody td b{white-space:nowrap!important;font-size:15px}
  html.mobil-v2 #s2-preise .s2-pv-tabelle tbody td{min-width:96px}
  html.mobil-v2 #s2-fuss{padding:56px 20px 32px!important;margin:0!important}
  html.mobil-v2 #s2-fuss .s2-rahmen{padding-inline:0!important}
  html.mobil-v2 #s2-fuss .s2-fuss-spalten{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:28px 20px!important}
  html.mobil-v2 #s2-fuss .s2-fuss-wort{margin-top:36px}
}
/* ---------- Ende SCHALTER-BLOCK ---------- */

/* ===== Alles unter .s2m ===== */
.s2m,.s2m *,.s2m *::before,.s2m *::after{box-sizing:border-box;animation:none!important;transition:none!important;scroll-behavior:auto!important}
.s2m{--sw:#0d0d10;--gr:#6b6b73;--ka:#f6f6f8;--li:#e6e6ea;background:#fff;color:var(--sw);font:400 16px/1.55 "Instrument Sans",system-ui,-apple-system,sans-serif;overflow-x:clip;-webkit-text-size-adjust:100%}
.s2m img,.s2m video,.s2m svg{max-width:100%}
.s2m h1,.s2m h2,.s2m h3,.s2m p,.s2m ul,.s2m ol{margin:0;padding:0}
.s2m ul,.s2m ol{list-style:none}
.s2m a{color:inherit;text-decoration:none}
.s2m em{font-style:italic}

/* Kopfleiste */
.s2m-leiste{position:sticky;top:0;z-index:50;height:60px;padding:0 20px;display:flex;align-items:center;justify-content:space-between;background:#fff;border-bottom:1px solid var(--li)}
.s2m-logo{display:flex;align-items:center}
.s2m-logo img{height:24px;width:auto;display:block}

/* Knöpfe */
.s2m-btn{display:flex;align-items:center;justify-content:center;width:100%;height:52px;border-radius:14px;background:var(--sw);color:#fff!important;font:600 16px/1 "Instrument Sans",system-ui,sans-serif;text-align:center}
.s2m-btn.hell{background:var(--ka);color:var(--sw)!important;margin-top:12px}
.s2m-btn.klein{width:auto;height:40px;padding:0 16px;font-size:14px;border-radius:12px}
.s2m-start .s2m-btn+.s2m-btn{margin-top:12px}

/* Überschriften, Text */
.s2m h1,.s2m h2{font-family:"Instrument Serif",Georgia,serif;font-weight:400;color:var(--sw);text-align:center;line-height:1.15;text-wrap:balance}
.s2m h1{font-size:36px;line-height:1.1}
.s2m h2{font-size:30px}
.s2m h3{font:600 18px/1.3 "Instrument Sans",system-ui,sans-serif;color:var(--sw)}
.s2m-text{font-size:16px;line-height:1.55;color:var(--gr);text-align:center;margin-top:16px}
.s2m-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* Sektionen: Rand 20, Abstand 56 */
.s2m-sek,.s2m-start{padding:0 20px;margin-top:56px;scroll-margin-top:76px}
.s2m-sek>.s2m-btn{margin-top:24px}
.s2m-start{margin-top:0;padding-top:32px;text-align:center}
.s2m-start .s2m-text{margin:16px 0 24px}
.s2m-pille{display:inline-flex;align-items:center;gap:10px;font-size:14px;line-height:1.3;color:var(--gr);margin-bottom:16px;text-align:left}
.s2m-pille b{color:var(--sw);font-weight:600}
.s2m-gesichter{display:flex}
.s2m-gesichter img{width:30px;height:30px;border-radius:50%;object-fit:cover;border:2px solid #fff;margin-left:-8px}
.s2m-gesichter img:first-child{margin-left:0}
.s2m-startbild{display:block;width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;border-radius:20px;margin-top:28px}

/* Karten */
.s2m-karte{background:var(--ka);border-radius:20px;padding:20px;margin-top:16px}
.s2m-sek>h2+.s2m-karte,.s2m-sek>.s2m-text+.s2m-karte{margin-top:24px}
.s2m-sek>h2+.s2m-schritte{margin-top:24px}
.s2m-schritte .s2m-karte{text-align:center;margin-top:0}
.s2m-schritte{display:grid;gap:16px}
.s2m-schritte li{display:flex;flex-direction:column;align-items:center;gap:14px}
.s2m-nr{width:36px;height:36px;border-radius:50%;background:var(--sw);color:#fff;font:600 16px/36px "Instrument Sans",sans-serif;text-align:center;flex:none}
.s2m-schritte .s2m-btn{margin-top:4px}
.s2m-url{display:flex;align-items:center;gap:10px;width:100%;height:48px;padding:0 14px;border-radius:12px;background:#fff;box-shadow:0 0 0 1px var(--li);color:var(--gr);font-size:16px}
.s2m-url svg,.s2m-chip svg{width:18px;height:18px;fill:currentColor;flex:none}
.s2m-chips{display:flex;flex-wrap:wrap;justify-content:center;gap:8px}
.s2m-chip{display:inline-flex;align-items:center;gap:6px;height:34px;padding:0 12px;border-radius:17px;background:#fff;box-shadow:0 0 0 1px var(--li);font-size:14px;font-weight:500;color:var(--sw)}
.s2m-chip.dunkel{background:var(--sw);color:#fff;box-shadow:none}
.s2m-chip .farbe{width:12px;height:12px;border-radius:50%;background:#f08ec6;display:block}
.s2m-haken{display:grid;gap:8px;width:100%}
.s2m-haken li{display:flex!important;flex-direction:row!important;align-items:center;gap:10px!important;justify-content:flex-start;height:44px;padding:0 14px;border-radius:12px;background:#fff;box-shadow:0 0 0 1px var(--li);font-size:15px}
.s2m-haken svg{width:18px;height:18px;fill:#2c7a4b;flex:none}
.s2m-blase{width:100%;text-align:left;background:#fff;border-radius:14px;padding:14px 16px;box-shadow:0 0 0 1px var(--li);display:grid;gap:4px}
.s2m-blase b{font-weight:600}
.s2m-blase span{color:var(--gr);font-size:15px}
.s2m-status{display:inline-flex;align-items:center;height:30px;padding:0 12px;border-radius:15px;background:#e6f4ea;color:#2c7a4b;font-size:14px;font-weight:600}

/* Newsletter-Beispiel */
.s2m-wa{background:#efeae2}
.s2m-wa-blase{background:#fff;border-radius:4px 16px 16px 16px;padding:14px 14px 10px;text-align:left;font-size:15px;line-height:1.5;color:var(--sw);box-shadow:0 1px 1px rgba(13,13,16,.12)}
.s2m-wa-blase p{margin:0 0 10px;font-size:15px;line-height:1.5;color:var(--sw)}
.s2m-wa-knopf{display:flex;align-items:center;justify-content:center;gap:8px;margin-top:6px;padding-top:10px;border-top:1px solid var(--li);color:#0a7cff;font-weight:600;font-size:15px}
.s2m-wa-knopf svg{width:18px;height:18px}
.s2m-erklaer{margin-top:24px;display:grid;gap:20px;text-align:center}
.s2m-erklaer b{display:block;font-weight:600;font-size:16px;color:var(--sw)}
.s2m-erklaer p{color:var(--gr);font-size:16px;margin-top:2px}

/* Video */
.s2m-video{position:relative;aspect-ratio:16/10;border-radius:20px;overflow:hidden;background:#d9d9de}
.s2m-video img,.s2m-video video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;border-radius:20px}
.s2m-play{position:absolute;left:50%;top:50%;width:72px;height:72px;margin:-36px 0 0 -36px;border:0;border-radius:50%;background:rgba(13,13,16,.82);color:#fff;display:grid;place-items:center;padding:0;cursor:pointer}
.s2m-play svg{width:30px;height:30px}

/* ALL IN ONE */
.s2m-allin{font:800 clamp(64px,21vw,104px)/.95 "Instrument Sans",system-ui,sans-serif!important;letter-spacing:-.03em;text-transform:uppercase;text-wrap:initial!important}
.s2m-reiter{margin-top:16px}
#s2m-allinone .s2m-allin+.s2m-sr+.s2m-reiter{margin-top:28px}
.s2m-label{display:inline-block;height:28px;padding:0 12px;border-radius:14px;background:#fff;box-shadow:0 0 0 1px var(--li);font:600 13px/28px "Instrument Sans",sans-serif;color:var(--sw);margin-bottom:12px}
.s2m-reiter{text-align:left}
.s2m-reiter h3{font:400 24px/1.2 "Instrument Serif",Georgia,serif}
.s2m-punkte{display:grid;gap:14px;margin-top:16px;text-align:left}
.s2m-punkte b{display:block;font-weight:600;font-size:16px}
.s2m-punkte p{color:var(--gr);font-size:15px;line-height:1.5;margin-top:2px}
.s2m-app{display:block;width:100%;height:auto;border-radius:14px;margin-top:18px;box-shadow:0 0 0 1px var(--li)}

/* Drei Wege */
.s2m-weg{text-align:center}
.s2m-weg h3{font:400 24px/1.2 "Instrument Serif",Georgia,serif}
.s2m-weg>p{color:var(--gr);margin-top:8px}
.s2m-weg .s2-hy-handy{--hb:min(70vw,280px);width:var(--hb);margin:22px auto 0!important;transform:none!important}
.s2m-weg .s2-hy-meldung{position:static!important;margin-top:16px;left:auto;right:auto;opacity:1!important;transform:none!important;text-align:left}
.s2m-weg .s2-hy-handy .s2-hy-meldung{width:100%}
.s2m-weg .s2-hy-qr{width:100%;height:100%}
.s2m-weg .s2-hy-sucher .e{opacity:1!important}
.s2m-weg .s2-hy-scan{opacity:1!important}

/* Branchen */
.s2m-branchen{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-top:24px}
.s2m-branchen li{position:relative;aspect-ratio:3/2;border-radius:16px;overflow:hidden;background:#d9d9de}
.s2m-branchen a{display:block;width:100%;height:100%}
.s2m-branchen img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.s2m-branchen a::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,0) 45%,rgba(0,0,0,.62))}
.s2m-branchen span{position:absolute;left:12px;right:10px;bottom:10px;z-index:1;color:#fff;font:600 15px/1.2 "Instrument Sans",sans-serif;text-align:left}

/* Siegel */
.s2m-siegel{margin-top:16px;text-align:left}
.s2m-sek>.s2m-text+.s2m-siegel{margin-top:24px}
.s2m-siegel-kopf{display:flex;align-items:center;gap:12px}
.s2m-sym{width:40px;height:40px;border-radius:12px;background:#fff;box-shadow:0 0 0 1px var(--li);display:grid;place-items:center;flex:none}
.s2m-sym svg{width:20px;height:20px;fill:var(--sw)}
.s2m-siegel>p{color:var(--gr);margin-top:12px}
.s2m-siegel .s2-ds-mini{display:block!important;position:static!important;opacity:1!important;transform:none!important;width:100%!important;max-width:100%;height:auto!important;margin:16px 0 0!important}
.s2m-siegel .s2-ds-bild{width:100%!important;max-width:100%;position:static!important;opacity:1!important;transform:none!important}

/* Integrationen */
.s2m-logos{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-top:24px}
.s2m-logos .s2-int-k{width:100%!important;height:auto!important;aspect-ratio:1;border-radius:16px!important;margin:0!important;background:#fff;box-shadow:0 0 0 1px var(--li)!important;display:grid;place-items:center}
.s2m-logos .s2-int-k i{width:42%!important;height:42%!important}

/* FAQ */
.s2m-fragen{margin-top:24px;border-top:1px solid var(--li);text-align:left}
.s2m-frage{border-bottom:1px solid var(--li)}
.s2m-frage summary{list-style:none;display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:60px;padding:14px 0;cursor:pointer;font:600 16px/1.35 "Instrument Sans",sans-serif;color:var(--sw)}
.s2m-frage summary::-webkit-details-marker{display:none}
.s2m-frage summary::after{content:"+";flex:none;font:400 26px/1 "Instrument Sans",sans-serif;color:var(--sw)}
.s2m-frage[open] summary::after{content:"\2212"}
.s2m-frage p{padding:0 0 18px;color:var(--gr);font-size:16px;line-height:1.55;text-align:left}
.s2m-link{display:block;margin-top:24px;text-align:center;font-weight:600;font-size:16px;color:var(--sw);text-decoration:underline!important;text-underline-offset:4px}

@media (min-width:480px){.s2m h1{font-size:40px}.s2m h2{font-size:32px}}

/* Meldung "Neuer Kontakt" unter dem Handy, überdeckt den Rahmen nicht */
.s2m-weg .s2-hy-handy{margin-bottom:96px!important}
.s2m-weg .s2-hy-meldung{position:absolute!important;left:0!important;right:0!important;top:calc(100% + 14px)!important;bottom:auto!important;background:#fff;border-radius:14px;box-shadow:0 0 0 1px var(--li);padding:10px 12px}

/* Ursache des blassen Hero (02.11.): .s2-ds-mini::after (weißer Schleier, absolut) lag über der ganzen Seite, weil .s2-ds-mini static war */
.s2m{isolation:isolate}
.s2m-siegel .s2-ds-mini{position:relative!important}
.s2m-siegel .s2-ds-mini::after{display:none!important}