@charset "UTF-8";
/* Startseite (pages/home.php): im Aufbau der Startseite von Lehrerpult. Oben die gemeinsame Kopfzeile der öffentlichen
   Seiten (lsKopfzeile(), Aussehen in style.css), darunter auf einer hellen Fläche mit sanftem Verlauf (ohne Formen)
   Motto, Badges, Knöpfe und Bilder aus Lernspiegel, die unten von der Fläche abgeschnitten werden; dann die Funktionen
   mit Bildern (abwechselnd links und rechts), Datenschutz und Preise (Dunkelblau von Lernspiegel), weitere Funktionen
   und zum Schluss nochmals die Knöpfe. Wie die übrigen öffentlichen Seiten immer hell; die Bilder entstehen mit
   docs/startseite/bilder.mjs. Farben der Flächen über die Tokens aus style.css. */

.sn {
  /* so breit und mit demselben Rand wie die Kopfzeile */
  --sn-max: var(--pub-max);
  --sn-pad: var(--pub-pad);
  --sn-marke: #1E3A5F;
  --sn-kopf: linear-gradient(170deg, var(--bg-app) 0%, #EAF1FA 45%, #D8E5F6 100%);
  --sn-akzent: #2563EB;
  --sn-akzent-weich: #DBEAFE;
  --sn-pro: linear-gradient(135deg, #3B82F6, #8B5CF6); /* «Pro» wie auf /features (--pro-bg) */
  --sn-buehne: #E3EBF5;
  --sn-rahmen: #E2E8F0;
  --sn-punkt: #CBD5E1;
  --sn-linie: rgba(15, 23, 42, .09);
  --sn-schatten: 0 24px 60px rgba(15, 23, 42, .16);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--bg-app);
  color: var(--text-primary);
  font-family: var(--font);
}
.sn *, .sn *::before, .sn *::after { box-sizing: border-box; }
.sn svg.sn-ic { width: 20px; height: 20px; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.sn svg.sn-ic-klein { width: 16px; height: 16px; }

/* ── Kopf: hell mit sanftem Verlauf, oben in der Farbe der Kopfzeile ───────── */
.sn-hero { position: relative; overflow: hidden; padding: clamp(40px, 6vw, 72px) var(--sn-pad) 0; color: var(--text-primary); background: var(--sn-kopf); }
.sn-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 42px; padding: 0 16px; border: 1.5px solid transparent; border-radius: 12px;
  font: inherit; font-size: .95rem; font-weight: 700; line-height: 1.2; text-decoration: none; white-space: nowrap; cursor: pointer; transition: background-color .2s, border-color .2s; }
/* im hellen Kopf */
.sn-btn-haupt { background: var(--primary-strong); color: #fff; box-shadow: 0 8px 22px rgba(30, 58, 95, .22); }
.sn-btn-haupt:hover { background: var(--primary-light); color: #fff; }
.sn-btn-linie { border-color: var(--border); background: var(--bg-card); color: var(--text-primary); }
.sn-btn-linie:hover { border-color: var(--sn-akzent); color: var(--sn-akzent); }
/* auf der dunkelblauen Fläche */
.sn-btn-hell { background: #fff; color: #1E3A5F; box-shadow: 0 8px 22px rgba(15, 23, 42, .22); }
.sn-btn-hell:hover { background: #E3EBF5; color: #1E3A5F; }
.sn-btn-rand { border-color: rgba(255, 255, 255, .4); background: rgba(255, 255, 255, .08); color: #fff; }
.sn-btn-rand:hover { background: rgba(255, 255, 255, .16); color: #fff; }

.sn-hero-inner { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; max-width: 880px; margin: 0 auto; text-align: center; }
.sn-hero h1 { margin: 0 0 18px; color: var(--text-primary); font-size: clamp(2rem, 6vw, 4.1rem); hyphens: manual; font-weight: 800; line-height: 1.1; letter-spacing: -.04em; text-wrap: balance; }
.sn-akzent { color: var(--sn-akzent); }
.sn-schluss-karte .sn-akzent { color: #93C5FD; }
.sn-lead { max-width: 700px; margin: 0 0 24px; color: var(--text-secondary); font-size: clamp(1.02rem, 1.6vw, 1.2rem); line-height: 1.55; }
/* Badges wie auf der früheren Startseite */
.sn-badges { display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem; margin: 0 0 28px; padding: 0; list-style: none; }
.sn-badges li { padding: .3rem .85rem; border-radius: 999px; background: var(--accent-light); color: var(--sn-akzent); font-size: .78rem; font-weight: 700; letter-spacing: .05em; }
.sn-cta { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.sn-cta .sn-btn { min-height: 52px; padding: 0 22px; font-size: 1.05rem; }

/* Bild der App im Browser, daneben die Ansicht der Kinder auf dem Handy; die Fläche schneidet beide unten ab */
.sn-hero-bilder { position: relative; z-index: 1; max-width: 1060px; height: clamp(240px, 36vw, 480px); margin: clamp(40px, 6vw, 64px) auto 0; }
.sn-fenster { overflow: hidden; border-radius: 14px; background: var(--sn-rahmen); }
.sn-hero-bilder .sn-fenster { position: absolute; inset: 0 0 auto 0; border-radius: 14px 14px 0 0;
  box-shadow: 0 2px 8px rgba(15, 23, 42, .08), 0 20px 50px rgba(15, 23, 42, .2), 0 44px 110px rgba(15, 23, 42, .28), 0 0 0 1px var(--border); }
.sn-fenster-leiste { display: flex; align-items: center; gap: 7px; height: 36px; padding: 0 14px; }
.sn-fenster-leiste i { width: 11px; height: 11px; border-radius: 50%; background: var(--sn-punkt); }
.sn-fenster-leiste span { display: inline-flex; align-items: center; gap: 6px; margin: 0 auto; padding: 3px 14px; border-radius: 999px; background: var(--bg-card);
  color: var(--text-muted); font-size: .78rem; font-weight: 600; transform: translateX(-27px); }
.sn-handy { padding: 8px; border-radius: 40px; background: #0B1220; box-shadow: 0 30px 70px rgba(8, 15, 40, .5), inset 0 0 0 1px rgba(255, 255, 255, .12); }
.sn-handy .sn-bild { aspect-ratio: 390 / 844; border-radius: 32px; }
.sn-hero-bilder .sn-handy { position: absolute; top: 64px; right: -36px; width: clamp(170px, 20vw, 236px); }

/* Bilder aus Lernspiegel */
.sn-bild { display: block; overflow: hidden; background: var(--bg-card); }
.sn-bild img { display: block; width: 100%; height: auto; }

/* ── Inhalt ───────────────────────────────────────────────────────────────── */

.sn-abschnitt { width: 100%; max-width: calc(var(--sn-max) + 2 * var(--sn-pad)); margin: 0 auto; padding: clamp(64px, 9vw, 112px) var(--sn-pad) 0; }
.sn-kopf { max-width: 760px; margin: 0 auto clamp(24px, 4vw, 40px); text-align: center; }
.sn-kopf h2, .sn-funktion h2, .sn-panel h2 { margin: 0 0 14px; color: var(--text-primary); font-size: clamp(1.75rem, 3.6vw, 2.6rem); font-weight: 800; line-height: 1.1; letter-spacing: -.03em; text-wrap: balance; }
.sn-kopf p { margin: 0; color: var(--text-secondary); font-size: clamp(1rem, 1.5vw, 1.12rem); line-height: 1.6; }
.sn .sn-eyebrow { display: inline-flex; align-items: center; gap: 7px; margin: 0 0 12px; color: var(--sn-akzent); font-size: .78rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
/* «Pro» wie auf /features (.feat-chip-pro): Pille im Verlauf von Blau zu Violett */
.sn-pro { display: inline-flex; align-items: center; padding: .16rem .5rem; border-radius: 999px; background: var(--sn-pro); color: #fff; font-size: .68rem;
  font-weight: 700; letter-spacing: .02em; line-height: 1.4; white-space: nowrap; }
/* in den Punkten hinter dem letzten Wort: inline, damit der geschützte Leerschlag davor es dort hält; mit etwas mehr
   Innenabstand gleich hoch wie die Pille */
.sn-checks .sn-pro { display: inline; padding-block: .2rem; vertical-align: 1px; }
.sn-sprung { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 24px 0 0; padding: 0; list-style: none; }
.sn-sprung a { display: inline-flex; align-items: center; gap: 7px; min-height: 40px; padding: 0 15px; border: 1px solid var(--border); border-radius: 999px; background: var(--bg-card);
  color: var(--text-primary); font-size: .9rem; font-weight: 600; text-decoration: none; box-shadow: var(--shadow-sm); }
.sn-sprung a .sn-ic { color: var(--sn-akzent); }
.sn-sprung a:hover { border-color: var(--sn-akzent); color: var(--sn-akzent); }

/* eine Funktion: Text und Bild nebeneinander, jede zweite gespiegelt; auf schmalen Bildschirmen das Bild unter dem Text */
.sn-funktion { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: center; gap: clamp(28px, 5vw, 72px); padding: clamp(28px, 4vw, 52px) 0;
  /* Sprungmarken landen unter der mitlaufenden Kopfzeile (und einer Ankündigung) */
  scroll-margin-top: calc(var(--pub-oben, 0px) + 72px); }
.sn-funktion.rev { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
.sn-funktion.rev .sn-funktion-text { order: 2; }
.sn-funktion-text > p, .sn-panel > p { margin: 0 0 20px; color: var(--text-secondary); font-size: 1.05rem; line-height: 1.6; }
.sn-checks { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.sn-checks li { display: flex; align-items: flex-start; gap: 10px; color: var(--text-primary); font-size: .97rem; line-height: 1.45; }
.sn-checks .sn-ic { margin-top: 1px; color: var(--sn-akzent); }
/* Link zur Feature-Seite des Bereichs; lange Links brechen um, der Pfeil bleibt beim letzten Wort */
.sn-link { display: inline-block; margin-top: 22px; color: var(--sn-akzent); font-weight: 700; text-decoration: none; }
.sn-link .sn-ic { display: inline-block; margin-left: 4px; vertical-align: -3px; }
.sn-nobr { white-space: nowrap; }
.sn-link:hover { text-decoration: underline; }
/* Fläche um das Bild: am Computer oben links mit Rand, das Bild läuft rechts und unten hinaus (links stehen Titel und Namen);
   bei den Online-Übungen steht das Handy der Kinder davor, das 3D-Modell ist ganz zu sehen */
.sn-buehne { position: relative; overflow: hidden; aspect-ratio: 5 / 4; border: 1px solid var(--sn-linie); border-radius: 28px; background: var(--sn-buehne); }
.sn-buehne > .sn-bild { position: absolute; top: 9%; left: 8%; width: 112%; border: 1px solid var(--sn-linie); border-radius: 14px; box-shadow: var(--sn-schatten); }
.sn-buehne > .sn-handy { position: absolute; top: 24%; right: 6%; width: min(34%, 210px); box-shadow: var(--sn-schatten); }
.sn-buehne.is-modell { display: grid; place-items: center; }
.sn-display { width: 90%; padding: 6px; border-radius: 16px; background: #0B1220; box-shadow: var(--sn-schatten); }
.sn-display .sn-bild { aspect-ratio: 16 / 9; border-radius: 11px; }
/* ohne aspect-ratio (z. B. iOS 14) hätte die Fläche keine Höhe, die Bilder stehen ja frei darin */
@supports not (aspect-ratio: 1 / 1) {
  .sn-buehne { height: 0; padding-bottom: 80%; }
  .sn-buehne.is-modell { height: auto; padding: 24px 0; }
}

/* Datenschutz (auf der Farbfläche) und Preise nebeneinander, die Preise etwas breiter (mehr Inhalt) */
.sn-duo { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 5fr); gap: 20px; }
.sn-panel { position: relative; overflow: hidden; padding: clamp(26px, 4vw, 44px); border: 1px solid var(--border); border-radius: 28px; background: var(--bg-card); box-shadow: var(--shadow); }
.sn-panel h2 { font-size: clamp(1.5rem, 2.8vw, 2rem); }
.sn-datenschutz { border: 0; color: #fff; background: var(--sn-marke); }
.sn-datenschutz > * { position: relative; }
.sn-datenschutz h2, .sn-datenschutz .sn-checks li, .sn-datenschutz .sn-link { color: #fff; }
.sn-datenschutz > p { color: rgba(255, 255, 255, .86); }
.sn-datenschutz .sn-eyebrow, .sn-datenschutz .sn-checks .sn-ic { color: #93C5FD; }
/* so hoch wie die Preise daneben: der Link steht unten wie dort */
.sn-datenschutz { display: flex; flex-direction: column; align-items: flex-start; }
.sn-datenschutz .sn-checks { margin-bottom: 22px; }
.sn-datenschutz > .sn-link { margin-top: auto; }
/* Preise (snPreisKarte()): je Plan links Name und eine Zeile, rechts der Betrag gross; Pro hervorgehoben */
.sn-plaene { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.sn-plan { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 16px 18px; border: 1px solid var(--border); border-radius: 18px; background: var(--bg-app-soft); }
.sn-plan-name { min-width: 0; }
.sn-plan h3 { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; margin: 0; color: var(--text-primary); font-size: 1.1rem; font-weight: 800; line-height: 1.25; }
.sn-plan-name p { margin: 3px 0 0; color: var(--text-secondary); font-size: .9rem; line-height: 1.4; }
.sn-plan-preis { flex: none; margin: 0; color: var(--text-primary); text-align: right; }
.sn-plan-betrag { display: block; font-size: 1.9rem; font-weight: 800; line-height: 1; letter-spacing: -.03em; white-space: nowrap; }
.sn-plan-betrag small { color: var(--text-muted); font-size: .78rem; font-weight: 700; letter-spacing: .02em; vertical-align: .62em; }
.sn-plan-zeit { display: block; margin-top: 5px; color: var(--text-muted); font-size: .8rem; font-weight: 600; }
.sn-plan-pro { padding: 15px 17px; border: 2px solid var(--sn-akzent); background: var(--sn-akzent-weich); box-shadow: 0 12px 30px rgba(37, 99, 235, .14); }
.sn-preis-aktionen { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 22px; margin-top: 24px; }
.sn-preis-aktionen .sn-link { margin-top: 0; }

/* weitere Funktionen: vier, zwei oder eine Spalte; «Mehr dazu» unten in der Karte deckt die ganze Karte ab */
.sn-mehr { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin: 0; padding: 0; list-style: none; }
.sn-mehr li { position: relative; display: flex; flex-direction: column; padding: 22px; border: 1px solid var(--border); border-radius: 20px; background: var(--bg-card);
  box-shadow: var(--shadow-sm); transition: border-color .2s, box-shadow .2s; }
.sn-mehr li:hover, .sn-mehr li:focus-within { border-color: var(--sn-akzent); box-shadow: var(--shadow); }
.sn-mehr-ic { display: grid; place-items: center; width: 42px; height: 42px; margin-bottom: 14px; border-radius: 12px; background: var(--sn-akzent-weich); color: var(--sn-akzent); }
.sn-mehr h3 { margin: 0 0 6px; color: var(--text-primary); font-size: 1.02rem; }
.sn-mehr p { margin: 0; color: var(--text-secondary); font-size: .92rem; line-height: 1.5; }
.sn-mehr .sn-link { margin-top: auto; padding-top: 14px; font-size: .9rem; }
.sn-mehr .sn-link::after { content: ""; position: absolute; inset: 0; }
/* Karte einer Pro-Funktion: «Pro» als schräge Banderole oben rechts wie auf den Karten von /features */
.sn-mehr-pro { overflow: hidden; }
.sn-mehr-pro .sn-pro { position: absolute; top: 15px; right: -33px; z-index: 3; width: 130px; justify-content: center; padding: .2rem 0; border-radius: 0;
  font-size: .62rem; transform: rotate(45deg); box-shadow: 0 1px 3px rgba(0, 0, 0, .18); pointer-events: none; }

/* zum Schluss: Motto und Knöpfe auf der Farbfläche */
.sn-schluss-karte { position: relative; overflow: hidden; padding: clamp(40px, 7vw, 76px) clamp(20px, 5vw, 64px); border-radius: 32px; color: #fff; text-align: center; background: var(--sn-marke); }
.sn-schluss-karte h2 { margin: 0 0 14px; color: #fff; font-size: clamp(2rem, 5vw, 3.2rem); font-weight: 800; line-height: 1.1; letter-spacing: -.035em; }
.sn-schluss-karte > p { max-width: 560px; margin: 0 auto 26px; color: rgba(255, 255, 255, .86); font-size: 1.05rem; line-height: 1.55; }
.sn > footer { margin-top: clamp(48px, 7vw, 80px) !important; }

/* ── Bewegung (nur .sn[data-bewegung]): der Kopf baut sich beim Laden auf, das Handy schwebt leicht;
   weiter unten erscheinen die Teile beim Scrollen (.sn-zeigen, dann .ist-da, gesetzt von snSkript()), die Bilder der
   Funktionen von der Seite her; Knöpfe, Links und Karten heben sich beim Darüberfahren. Mit «Bewegung reduzieren» und
   beim Drucken steht alles still. Verschoben wird mit translate/scale, damit transform der Elemente bleibt. ── */
@keyframes sn-auftauchen { from { opacity: 0; translate: 0 18px; } }
@keyframes sn-heben { from { opacity: 0; translate: 0 56px; } }
@keyframes sn-schweben { 50% { translate: 0 -7px; } }
@media screen and (prefers-reduced-motion: no-preference) {
  .sn[data-bewegung] .sn-hero-inner > * { animation: sn-auftauchen .9s cubic-bezier(.16, 1, .3, 1) both; }
  .sn[data-bewegung] .sn-hero-inner > :nth-child(2) { animation-delay: .08s; }
  .sn[data-bewegung] .sn-hero-inner > :nth-child(3) { animation-delay: .16s; }
  .sn[data-bewegung] .sn-hero-inner > :nth-child(4) { animation-delay: .24s; }
  .sn[data-bewegung] .sn-hero-bilder .sn-fenster { animation: sn-heben 1.2s .3s cubic-bezier(.16, 1, .3, 1) both; }
  .sn[data-bewegung] .sn-hero-bilder .sn-handy { animation: sn-heben 1.2s .5s cubic-bezier(.16, 1, .3, 1) both, sn-schweben 7s 1.8s ease-in-out infinite; }

  /* Erscheinen: verborgen ohne Übergang, sichtbar mit Übergang (--sn-verz: nacheinander) */
  .sn[data-bewegung] .sn-zeigen { opacity: 0; translate: 0 28px; }
  /* Bilder neben dem Text kommen von ihrer Seite (untereinander auf schmalen Bildschirmen von unten) */
  @media (min-width: 861px) {
    .sn[data-bewegung] .sn-funktion .sn-zeigen.sn-buehne { translate: 32px 0; }
    .sn[data-bewegung] .sn-funktion.rev .sn-zeigen.sn-buehne { translate: -32px 0; }
  }
  .sn[data-bewegung] .sn-zeigen.sn-schluss-karte { scale: .97; }
  .sn[data-bewegung] .sn-zeigen > .sn-bild { translate: 24px 16px; }
  .sn[data-bewegung] .sn-zeigen > .sn-handy { opacity: 0; translate: 0 40px; }
  .sn[data-bewegung] .sn-zeigen .sn-display { scale: .94; }
  .sn[data-bewegung] .sn-zeigen.ist-da, .sn[data-bewegung] .sn-funktion .sn-zeigen.ist-da.sn-buehne { opacity: 1; translate: none; scale: none;
    transition: opacity .65s ease, translate .9s cubic-bezier(.16, 1, .3, 1), scale .9s cubic-bezier(.16, 1, .3, 1); transition-delay: var(--sn-verz, 0s); }
  .sn[data-bewegung] .sn-zeigen.ist-da > .sn-bild, .sn[data-bewegung] .sn-zeigen.ist-da .sn-display { translate: none; scale: none;
    transition: translate 1.1s cubic-bezier(.16, 1, .3, 1), scale 1.1s cubic-bezier(.16, 1, .3, 1); transition-delay: calc(var(--sn-verz, 0s) + .05s); }
  .sn[data-bewegung] .sn-zeigen.ist-da > .sn-handy { opacity: 1; translate: none;
    transition: opacity .65s ease, translate 1.1s cubic-bezier(.16, 1, .3, 1); transition-delay: calc(var(--sn-verz, 0s) + .3s); }

  /* beim Darüberfahren */
  .sn[data-bewegung] .sn-btn { transition: background-color .2s, border-color .2s, translate .25s ease; }
  .sn[data-bewegung] .sn-btn:hover { translate: 0 -2px; }
  .sn[data-bewegung] .sn-link .sn-ic { transition: translate .25s ease; }
  .sn[data-bewegung] .sn-link:hover .sn-ic { translate: 3px 0; }
  .sn[data-bewegung] .sn-sprung a { transition: border-color .2s, color .2s, translate .25s ease; }
  .sn[data-bewegung] .sn-sprung a:hover { translate: 0 -2px; }
  .sn[data-bewegung] .sn-mehr li { transition: border-color .2s, box-shadow .2s, translate .3s cubic-bezier(.16, 1, .3, 1); }
  .sn[data-bewegung] .sn-mehr li:hover { translate: 0 -4px; }
}

@media (max-width: 1100px) {
  .sn-mehr { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 860px) {
  .sn-funktion, .sn-funktion.rev { grid-template-columns: minmax(0, 1fr); }
  .sn-funktion.rev .sn-funktion-text { order: 0; }
  .sn-duo { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 700px) {
  .sn-hero-bilder { max-width: 290px; height: 330px; }
  .sn-hero-bilder .sn-fenster { display: none; }
  .sn-hero-bilder .sn-handy { top: 0; right: auto; left: 50%; width: 250px; transform: translateX(-50%); }
  .sn-buehne > .sn-bild { width: 140%; }
  .sn-buehne > .sn-handy { top: 30%; right: 5%; width: 38%; }
}
/* Handy: alles etwas enger und kleiner; «Kompetenzorientierte» passt auf eine Zeile (rund 11 Schriftgrössen breit,
   der Inhalt 90 % der Breite) */
@media (max-width: 640px) {
  .sn-hero { padding-top: 32px; }
  .sn-hero h1 { margin-bottom: 14px; font-size: min(2.3rem, 8vw); line-height: 1.16; }
  .sn-lead { margin-bottom: 18px; font-size: 1rem; }
  .sn-badges { margin-bottom: 22px; }
  .sn-cta .sn-btn { flex: 1 1 100%; }
  .sn-hero-bilder { margin-top: 32px; }
  .sn-abschnitt { padding-top: 56px; }
  .sn-kopf h2 { font-size: 1.65rem; }
  .sn-kopf p { font-size: 1rem; }
  /* Sprungmarken in einer Zeile zum Wischen statt in vielen Zeilen */
  .sn-sprung { flex-wrap: nowrap; justify-content: flex-start; overflow-x: auto; margin: 20px calc(-1 * var(--sn-pad)) 0; padding: 2px var(--sn-pad) 10px;
    scroll-padding-inline: var(--sn-pad); scroll-snap-type: x proximity; scrollbar-width: none; }
  .sn-sprung::-webkit-scrollbar { display: none; }
  .sn-sprung li { flex: none; scroll-snap-align: start; }
  .sn-funktion { gap: 22px; padding: 22px 0; }
  .sn-funktion h2, .sn-panel h2 { font-size: 1.5rem; }
  .sn-funktion-text > p, .sn-panel > p { margin-bottom: 16px; font-size: 1rem; }
  .sn-buehne { border-radius: 22px; }
  .sn-panel { padding: 24px 20px; border-radius: 22px; }
  .sn-plan { gap: 12px; padding: 14px 15px; }
  .sn-plan-pro { padding: 13px 14px; }
  .sn-plan-betrag { font-size: 1.6rem; }
  .sn-preis-aktionen .sn-btn { flex: 1 1 100%; min-height: 48px; }
  /* weitere Funktionen als kurze Liste: Symbol links, Titel, Text und Link rechts */
  .sn-mehr { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .sn-mehr li { display: grid; grid-template-columns: 42px minmax(0, 1fr); align-content: start; column-gap: 14px; padding: 16px; border-radius: 16px; }
  .sn-mehr-ic { grid-row: span 3; margin-bottom: 0; }
  .sn-mehr h3 { margin-bottom: 2px; }
  .sn-mehr-pro h3 { padding-right: 2.5rem; } /* der Titel steht hier oben und hält Abstand zur Banderole */
  .sn-mehr .sn-link { justify-self: start; margin-top: 0; padding-top: 8px; }
  .sn-schluss-karte { padding: 36px 20px; border-radius: 24px; }
  .sn-schluss-karte h2 { font-size: min(2.2rem, calc((90vw - 40px) / 11.3)); line-height: 1.16; }
  .sn-schluss-karte > p { margin-bottom: 22px; font-size: 1rem; }
}