/* ============================================================================
   Storefront — Grundgeruest

   Gemeinsame Struktur fuer alle Vorlagen. Die Handschrift kommt aus
   theme-*.css: Farben, Schriften, Rundungen, Schatten.

   Grundsaetze:
     weiche Rundungen, mehrstufige Schatten, Farbverlaeufe als Flaeche,
     Bewegung nur dort, wo sie etwas beantwortet
   ============================================================================ */

:root{
  /* Von den Vorlagen gesetzt */
  --pri:#FF5B37;
  --pri-dark:#E8431F;
  --acc:#1FA35B;

  --bg:#FFFFFF;
  --fg:#22252A;
  --muted:#6B7280;
  --line:#EDE7E3;
  --card:#FFFFFF;
  --soft:#FFF6F2;
  --tint:#FFF1EC;

  --ok:#1FA35B;
  --warn:#C2740A;
  --no:#DC2626;

  --script:var(--sans);
  --display:var(--sans);
  --sans:system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --tracking:-0.02em;

  --r:14px;
  --r-sm:10px;
  --r-lg:22px;
  --r-pill:999px;

  --sh-1:0 1px 2px rgba(24,20,37,.06), 0 2px 8px rgba(24,20,37,.05);
  --sh-2:0 4px 10px rgba(24,20,37,.07), 0 12px 28px rgba(24,20,37,.09);
  --sh-3:0 10px 24px rgba(24,20,37,.10), 0 28px 64px rgba(24,20,37,.14);
  --sh-pri:0 8px 20px hsl(from var(--pri) h s l / .32);

  --max:1280px;
  --gap:20px;
  --pad:18px;
  --ease:cubic-bezier(.2,.7,.3,1);
}

@media (prefers-color-scheme:dark){
  :root{
    --bg:#14121A; --fg:#F2EEF6; --muted:#A29DAE;
    --line:#2A2634; --card:#1C1926; --soft:#1A1723; --tint:#221D2C;
    --sh-1:0 1px 2px rgba(0,0,0,.5);
    --sh-2:0 6px 16px rgba(0,0,0,.45);
    --sh-3:0 16px 44px rgba(0,0,0,.55);
  }
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{animation-duration:.001ms !important;transition-duration:.001ms !important}
}

body{
  margin:0;background:var(--bg);color:var(--fg);
  font:16px/1.6 var(--sans);-webkit-font-smoothing:antialiased
}
img,svg{max-width:100%;display:block}
a{color:var(--pri);text-decoration:none}
a:hover{color:var(--pri-dark)}
:focus-visible{outline:2px solid var(--pri);outline-offset:3px;border-radius:4px}

h1,h2,h3{font-family:var(--display);letter-spacing:var(--tracking);line-height:1.12;margin:0;font-weight:800}
h1{font-size:clamp(32px,5.4vw,58px)}
h2{font-size:clamp(22px,3vw,34px)}
h3{font-size:16px;line-height:1.3;font-weight:700}
p{margin:0 0 14px}

.mono{font-family:var(--mono);font-variant-numeric:tabular-nums}
.sf-eyebrow{
  font-family:var(--script);font-size:clamp(17px,2vw,22px);color:var(--pri);
  margin:0 0 4px;font-weight:600
}
.skip{position:absolute;left:-9999px}
.skip:focus{left:12px;top:12px;background:var(--pri);color:#fff;padding:10px 16px;
  border-radius:var(--r-sm);z-index:80}

main{max-width:var(--max);margin:0 auto;padding:0 var(--pad) 72px}

/* ============================ Kopf ============================ */
.sf-top{position:sticky;top:0;z-index:40;background:var(--bg);box-shadow:var(--sh-1)}
.sf-topinner{max-width:var(--max);margin:0 auto}
.sf-bar{display:flex;align-items:center;gap:14px;max-width:var(--max);margin:0 auto;padding:14px var(--pad)}

.sf-brand{font-family:var(--display);font-weight:800;font-size:20px;letter-spacing:-.03em;
  color:var(--fg);margin-right:auto}
.sf-brand:hover{color:var(--fg)}

.sf-searchtop{display:none}
@media (min-width:1000px){
  .sf-searchtop{
    display:flex;flex:1;max-width:520px;margin-right:auto;background:var(--soft);
    border-radius:var(--r-pill);padding:4px 4px 4px 18px;align-items:center;gap:8px
  }
  .sf-searchtop input{flex:1;border:0;background:transparent;color:var(--fg);font-size:15px;padding:9px 0}
  .sf-searchtop input:focus{outline:none}
  .sf-searchtop button{
    border:0;background:var(--pri);color:#fff;width:38px;height:38px;border-radius:var(--r-pill);
    display:grid;place-items:center;cursor:pointer;transition:transform .15s var(--ease)
  }
  .sf-searchtop button:hover{transform:scale(1.06)}
  .sf-brand{margin-right:24px}
}

.sf-actions{display:flex;align-items:center;gap:6px}
.sf-actions a{
  display:inline-flex;align-items:center;gap:7px;color:var(--fg);font-size:14px;font-weight:500;
  padding:9px 11px;border-radius:var(--r-pill);transition:background .15s var(--ease)
}
.sf-actions a:hover{background:var(--soft);color:var(--fg)}
.sf-actions .lbl{display:none}
@media (min-width:820px){.sf-actions .lbl{display:inline}}

.sf-cartlink{position:relative}
.sf-dot{
  position:absolute;top:2px;right:2px;min-width:18px;height:18px;line-height:18px;padding:0 5px;
  background:var(--pri);color:#fff;font-size:11px;font-weight:700;text-align:center;
  border-radius:var(--r-pill);box-shadow:0 0 0 2px var(--bg)
}

.sf-burger{
  order:-1;width:42px;height:42px;border:0;background:var(--soft);border-radius:var(--r-sm);
  display:grid;place-items:center;cursor:pointer;color:var(--fg)
}

/* Sprachwahl */
.sf-lang{position:relative}
.sf-langbtn{
  display:inline-flex;align-items:center;gap:6px;background:0;border:0;padding:9px 11px;
  color:var(--fg);font:inherit;font-size:14px;font-weight:600;cursor:pointer;border-radius:var(--r-pill)
}
.sf-langbtn:hover{background:var(--soft)}
.sf-langlist{
  position:absolute;right:0;top:calc(100% + 8px);min-width:180px;list-style:none;margin:0;
  padding:8px;background:var(--card);border-radius:var(--r);box-shadow:var(--sh-2);z-index:60
}
.sf-langlist a{display:block;padding:10px 12px;color:var(--fg);font-size:14px;border-radius:var(--r-sm)}
.sf-langlist a:hover{background:var(--soft)}
.sf-langlist a.on{background:var(--tint);color:var(--pri);font-weight:700}

/* Hauptmenue */
.sf-menu{display:none;background:var(--soft)}
.sf-menu.open{display:block}
.sf-menu ul{list-style:none;margin:0 auto;padding:8px var(--pad) 14px;max-width:var(--max)}
.sf-menu a{display:block;padding:11px 12px;color:var(--fg);font-weight:600;font-size:15px;border-radius:var(--r-sm)}
.sf-menu a:hover{background:var(--card)}
.sf-menu ul ul{padding:0 0 4px 14px}
.sf-menu ul ul a{font-weight:400;color:var(--muted);font-size:14px;padding:8px 12px}
.sf-highlight a{color:#fff;background:var(--pri);text-align:center}
.sf-highlight a:hover{background:var(--pri-dark)}

@media (min-width:900px){
  .sf-burger{display:none}
  /* Das Menueband bekommt dieselbe Rundung wie die Kacheln und sitzt
     im Raster, nicht ueber die volle Breite geklebt. */
  .sf-menu{display:block;background:transparent;padding:0 var(--pad) 12px}
  .sf-menu ul{
    display:flex;align-items:center;gap:4px;padding:5px 8px;
    background:var(--pri);border-radius:var(--r-pill);box-shadow:var(--sh-1)
  }
  .sf-menu li{position:relative}
  .sf-menu a{color:#fff;padding:10px 18px;border-radius:var(--r-pill);font-size:15px}
  .sf-menu a:hover{background:rgba(255,255,255,.18)}
  .sf-menu ul ul{
    display:none;position:absolute;top:calc(100% + 8px);left:0;min-width:230px;
    background:var(--card);border-radius:var(--r);box-shadow:var(--sh-2);padding:8px;z-index:50
  }
  .sf-menu ul ul a{color:var(--fg);border-radius:var(--r-sm);padding:10px 12px}
  .sf-menu ul ul a:hover{background:var(--soft)}
  .sf-menu li.has-sub:hover ul,.sf-menu li.has-sub:focus-within ul{display:block}
  .sf-highlight{margin-left:auto}
  .sf-highlight a{background:var(--fg);font-weight:700}
  .sf-highlight a:hover{background:#000}
}

/* ============================ Aufmacher ============================ */
.sf-hero{
  position:relative;margin:16px 0 0;padding:28px var(--pad);border-radius:var(--r-lg);
  background:linear-gradient(135deg,var(--tint) 0%,var(--soft) 60%,var(--bg) 100%);
  overflow:hidden
}
.sf-hero::after{
  /* grosser Schriftzug im Hintergrund, wie auf einem Banner */
  content:attr(data-word);position:absolute;right:-4%;top:-16%;font-family:var(--script);
  font-size:clamp(180px,26vw,360px);color:var(--pri);opacity:.07;pointer-events:none;
  line-height:1;white-space:nowrap
}
.sf-hero-in{position:relative;z-index:2;display:grid;gap:28px;align-items:center}
@media (min-width:900px){
  .sf-hero{padding:34px 40px;margin-top:18px}
  .sf-hero-in{grid-template-columns:1.05fr .95fr;gap:36px}
}
.sf-hero h1{margin:2px 0 0}
.sf-hero h1 em{font-style:normal;color:var(--pri);display:block}
.sf-hero-sub{color:var(--muted);font-size:clamp(15px,1.4vw,17px);margin:12px 0 0;max-width:42ch}

/* Rabattcode als Klebeetikett */
.sf-promo{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin:16px 0 0}
.sf-promo-off{font-size:15px;font-weight:700;line-height:1.15}
.sf-promo-off b{display:block;color:var(--pri);font-size:24px}
.sf-code{
  display:inline-flex;align-items:center;gap:8px;background:var(--pri);color:#fff;
  font-family:var(--mono);font-weight:700;font-size:15px;letter-spacing:.06em;
  padding:9px 16px;border-radius:var(--r-sm);border:0;cursor:pointer;box-shadow:var(--sh-pri)
}
.sf-code:hover{background:var(--pri-dark)}
.sf-code.copied{background:var(--ok)}
.sf-promo-note{color:var(--muted);font-size:13px;flex-basis:100%}

.sf-hero-cta{display:flex;flex-wrap:wrap;gap:10px;margin:18px 0 0}

/* Buehne: gestaffelte Produktbilder */
.sf-stagewrap{position:relative;min-height:190px}
@media (min-width:900px){.sf-stagewrap{min-height:270px}}
.sf-stage{position:relative;height:100%}
.sf-stage-item{
  position:absolute;border-radius:var(--r);overflow:hidden;box-shadow:var(--sh-3);
  transition:transform .5s var(--ease)
}
.sf-stage-item .art{width:100%;height:auto}
.sf-stagewrap:hover .sf-stage-item:nth-child(1){transform:rotate(-11deg) scale(.88) translateY(-6px)}
.sf-stagewrap:hover .sf-stage-item:nth-child(2){transform:rotate(10deg) scale(.88) translateY(-6px)}
.sf-stagewrap:hover .sf-stage-item:nth-child(3){transform:rotate(-1deg) scale(1.03)}

/* Zahlenreihe */
/* Zahlenreihe kompakt, direkt unter den Knoepfen. */
.sf-facts-row{
  list-style:none;display:grid;grid-template-columns:repeat(4,1fr);gap:1px;margin:20px 0 0;padding:0;
  background:var(--line);border-radius:var(--r);overflow:hidden
}
.sf-facts-row li{background:var(--bg);padding:11px 12px}
.sf-facts-row strong{display:block;font-size:clamp(15px,1.7vw,19px);font-weight:800;letter-spacing:-.02em}
.sf-facts-row span{color:var(--muted);font-size:11px;line-height:1.3;display:block}

/* ============================ Kategoriestreifen ============================ */
.sf-catstrip{
  display:grid;grid-auto-flow:column;grid-auto-columns:112px;gap:12px;overflow-x:auto;
  padding:4px 0 14px;margin:26px 0 0;scroll-snap-type:x mandatory;
  scrollbar-width:none
}
.sf-catstrip::-webkit-scrollbar{display:none}
@media (min-width:900px){
  .sf-catstrip{grid-auto-flow:row;grid-template-columns:repeat(auto-fit,minmax(132px,1fr));overflow:visible}
}
.sf-cat{
  scroll-snap-align:start;background:var(--card);border-radius:var(--r);padding:18px 12px;
  text-align:center;color:var(--fg);box-shadow:var(--sh-1);
  transition:transform .18s var(--ease),box-shadow .18s var(--ease)
}
.sf-cat:hover{transform:translateY(-4px);box-shadow:var(--sh-2);color:var(--fg)}
.sf-cat .cat-ic{margin:0 auto 10px;color:var(--pri)}
.sf-cat strong{display:block;font-size:13.5px;font-weight:600;line-height:1.3}
.sf-cat span{display:block;color:var(--muted);font-size:11.5px;margin-top:3px}

/* ============================ Abschnitte ============================ */
.sf-section{margin:34px 0 0}
.sf-head{display:flex;align-items:center;justify-content:space-between;gap:16px;margin:0 0 14px}
.sf-head h2{margin:0}
.sf-head a{display:inline-flex;align-items:center;gap:6px;font-size:14px;font-weight:600;white-space:nowrap}
.sf-lead{color:var(--muted);font-size:17px;max-width:60ch}
.sf-count{color:var(--muted);font-size:14px}
.sf-empty{padding:40px 0;color:var(--muted);text-align:center}
.sf-hint{color:var(--muted);font-size:13.5px}
.sf-crumbs{font-size:13px;color:var(--muted);padding:18px 0 0}
.sf-crumbs a{color:var(--muted)}

/* ============================ Knoepfe ============================ */
.sf-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:13px 26px;border:0;border-radius:var(--r-pill);background:var(--pri);color:#fff;
  font-size:15px;font-weight:700;cursor:pointer;box-shadow:var(--sh-pri);
  transition:transform .16s var(--ease),background .16s var(--ease)
}
.sf-btn:hover{background:var(--pri-dark);color:#fff;transform:translateY(-2px)}
.sf-btn:active{transform:translateY(0)}
.sf-btn.lg{padding:16px 32px;font-size:16px}
.sf-btn.sm{padding:9px 16px;font-size:13.5px}
.sf-btn.ghost{background:transparent;color:var(--fg);box-shadow:inset 0 0 0 1.5px var(--line)}
.sf-btn.ghost:hover{background:var(--soft);color:var(--fg);box-shadow:inset 0 0 0 1.5px var(--fg)}
.sf-btn[disabled]{opacity:.45;cursor:not-allowed;box-shadow:none}

/* ============================ Produktkacheln ============================ */
.sf-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--gap);align-items:stretch}
@media (min-width:720px){.sf-grid{grid-template-columns:repeat(3,1fr)}}
@media (min-width:1040px){.sf-grid{grid-template-columns:repeat(4,1fr)}}

.sf-card{
  background:var(--card);border-radius:var(--r);overflow:hidden;display:flex;flex-direction:column;
  height:100%;box-shadow:var(--sh-1);
  transition:transform .2s var(--ease),box-shadow .2s var(--ease)
}
.sf-card .sf-cardfoot{margin-top:auto}
.sf-card:hover{transform:translateY(-5px);box-shadow:var(--sh-2)}
.sf-cardlink{display:block;color:var(--fg)}
.sf-cardlink:hover{color:var(--fg)}
.sf-card h3{margin:14px 15px 5px}

.sf-thumb{position:relative;overflow:hidden;background:var(--soft);aspect-ratio:4/3;flex:0 0 auto}
.sf-thumb .art,.sf-thumb img{
  width:100%;height:100%;object-fit:cover;transition:transform .4s var(--ease)
}
.sf-card:hover .art,.sf-card:hover .sf-thumb img{transform:scale(1.05)}
.sf-kind{
  position:absolute;left:12px;top:12px;font-size:11px;font-weight:700;letter-spacing:.06em;
  text-transform:uppercase;background:rgba(255,255,255,.92);color:#22252A;
  padding:5px 10px;border-radius:var(--r-pill);backdrop-filter:blur(6px)
}
.sf-desc{color:var(--muted);font-size:13px;margin:0 15px 14px;flex:1}

.sf-cardfoot{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:0 15px 15px}
.sf-cardfoot form{margin:0}
.sf-price{font-size:18px;font-weight:800;margin:0;letter-spacing:-.02em}
.sf-price.lg{font-size:36px;margin:16px 0}
.sf-per{font-weight:400;color:var(--muted);font-size:14px}
.sf-save{color:var(--ok);font-weight:700;font-size:14px}
.sf-add{
  display:inline-flex;align-items:center;gap:5px;padding:9px 14px;border:0;
  background:var(--soft);color:var(--pri);font:inherit;font-size:13px;font-weight:700;
  border-radius:var(--r-pill);cursor:pointer;transition:background .16s var(--ease),color .16s var(--ease)
}
.sf-add:hover{background:var(--pri);color:#fff}

/* ============================ Rabattangebot ============================ */
.sf-offer{
  display:grid;gap:28px;padding:36px var(--pad);margin:56px 0 0;border-radius:var(--r-lg);
  background:linear-gradient(135deg,var(--tint),var(--soft))
}
@media (min-width:880px){.sf-offer{grid-template-columns:1.05fr 1fr;gap:48px;padding:44px 48px;align-items:center}}
.sf-offer h2{margin:4px 0 14px}
.sf-offer p{color:var(--muted);max-width:44ch}

.sf-ladder{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.sf-ladder li{
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  background:var(--card);border-radius:var(--r);padding:14px 20px;box-shadow:var(--sh-1)
}
.sf-ladder-n{font-size:14px;color:var(--muted);font-weight:600}
.sf-ladder-d{font-size:clamp(21px,3vw,28px);font-weight:800;letter-spacing:-.03em;color:var(--pri)}

/* ============================ Preistafeln ============================ */
.sf-plans{display:grid;gap:var(--gap);align-items:stretch}
@media (min-width:760px){.sf-plans{grid-template-columns:repeat(auto-fit,minmax(270px,1fr))}}
.sf-plan{background:var(--card);border-radius:var(--r-lg);padding:28px;box-shadow:var(--sh-1);
  display:flex;flex-direction:column;height:100%}
.sf-plan:hover{box-shadow:var(--sh-2)}
.sf-planprice{font-size:38px;font-weight:800;letter-spacing:-.03em;margin:12px 0 2px}
.sf-planprice span{display:block;font-size:13px;font-weight:400;color:var(--muted);letter-spacing:0}
.sf-plan ul{list-style:none;padding:0;margin:20px 0 24px;flex:1;font-size:14.5px}
.sf-plan form{margin-top:auto}
.sf-plan li{display:flex;align-items:center;gap:10px;padding:8px 0;color:var(--muted)}
.sf-plan li .ic{color:var(--ok);flex:0 0 auto}

/* ============================ Portalblock ============================ */
/* Der Portalblock steht im selben Raster wie alles darueber: gerundet,
   nicht randlos. Randlos wirkte er wie ein fremder Fuss. */
.sf-pitch{
  margin:48px 0 0;padding:44px 32px 48px;color:#fff;border-radius:var(--r-lg);
  background:linear-gradient(135deg,#2E1065 0%,var(--pri) 100%);
  position:relative;overflow:hidden;box-shadow:var(--sh-2)
}
.sf-pitch::before{
  content:"";position:absolute;inset:auto -10% -50% auto;width:60vw;height:60vw;
  background:radial-gradient(circle,rgba(255,255,255,.16),transparent 62%);pointer-events:none
}
.sf-pitch-in{max-width:var(--max);margin:0 auto;position:relative}
.sf-pitch h2{color:#fff;max-width:17ch;font-size:clamp(28px,4.4vw,46px)}
.sf-pitch .sf-eyebrow{color:rgba(255,255,255,.82)}
.sf-pitch-sub{max-width:52ch;opacity:.9;font-size:17px;margin:16px 0 28px}
.sf-pitch-list{list-style:none;padding:0;margin:0 0 32px;display:grid;gap:12px}
@media (min-width:720px){.sf-pitch-list{grid-template-columns:1fr 1fr;gap:12px 40px}}
.sf-pitch-list li{display:flex;align-items:center;gap:11px;font-size:15px}
.sf-pitch-list .ic{color:#fff;opacity:.85;flex:0 0 auto}
.sf-pitch-price{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap;margin:0 0 26px}
.sf-pitch-price strong{font-size:44px;font-weight:800;letter-spacing:-.03em}
.sf-pitch-price span{opacity:.82;font-size:14.5px}
.sf-pitch .sf-btn{background:#fff;color:var(--pri);box-shadow:0 10px 26px rgba(0,0,0,.28)}
.sf-pitch .sf-btn:hover{background:#fff;color:var(--pri);transform:translateY(-3px)}

/* ============================ Produktseite ============================ */
.sf-detail{display:grid;gap:30px;margin-top:20px}
@media (min-width:880px){.sf-detail{grid-template-columns:5fr 6fr;gap:52px}}
.sf-detail-media{border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--sh-2);background:var(--soft)}
.sf-detail-media .art,.sf-detail-media img{width:100%;aspect-ratio:4/3;object-fit:cover}
.sf-sku{color:var(--muted);font-size:13px;margin:8px 0 0}
.sf-buy{margin:20px 0}
.sf-facts{list-style:none;padding:0;margin:22px 0 0;font-size:14.5px}
.sf-facts li{display:flex;align-items:center;gap:10px;padding:11px 0;color:var(--muted);
  border-top:1px solid var(--line)}
.sf-text{max-width:68ch;color:var(--muted)}
.sf-files{list-style:none;padding:0;margin:0}
.sf-files li{display:flex;justify-content:space-between;align-items:center;gap:14px;flex-wrap:wrap;
  background:var(--soft);border-radius:var(--r-sm);padding:13px 16px;margin-bottom:9px;font-size:14.5px}
.sf-size{color:var(--muted);font-size:12.5px;font-style:normal;margin-left:10px}
.sf-summary{background:var(--card);border-radius:var(--r);padding:22px;margin:20px 0;box-shadow:var(--sh-1)}

/* ============================ Baukasten ============================ */
.sf-tiers{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(96px,1fr);gap:10px;
  overflow-x:auto;padding:4px 0 10px;margin:22px 0 0;scrollbar-width:none}
.sf-tiers::-webkit-scrollbar{display:none}
.sf-tier{
  background:var(--card);border-radius:var(--r);padding:14px 10px;text-align:center;
  box-shadow:var(--sh-1);transition:transform .18s var(--ease),background .18s var(--ease)
}
.sf-tier strong{display:block;font-size:12px;color:var(--muted);font-weight:600}
.sf-tier span{font-size:22px;font-weight:800;letter-spacing:-.03em}
.sf-tier.on{background:var(--pri);color:#fff;transform:translateY(-3px);box-shadow:var(--sh-pri)}
.sf-tier.on strong{color:rgba(255,255,255,.8)}

.sf-meter{height:8px;background:var(--line);border-radius:var(--r-pill);margin:14px 0 30px;overflow:hidden}
.sf-meter i{display:block;height:100%;width:0;border-radius:var(--r-pill);
  background:linear-gradient(90deg,var(--pri),var(--acc));transition:width .3s var(--ease)}

.sf-pick{padding-bottom:130px}
.sf-pickable{position:relative;cursor:pointer}
.sf-pickable input{position:absolute;opacity:0;width:0;height:0}
.sf-pickable.on{box-shadow:0 0 0 2.5px var(--pri),var(--sh-2)}
.sf-check{
  position:absolute;top:12px;right:12px;width:26px;height:26px;border-radius:var(--r-pill);
  background:rgba(255,255,255,.92);display:grid;place-items:center;box-shadow:var(--sh-1);z-index:3
}
.sf-pickable.on .sf-check{background:var(--pri)}
.sf-pickable.on .sf-check::after{
  content:"";width:6px;height:11px;border:solid #fff;border-width:0 2.5px 2.5px 0;
  transform:rotate(45deg) translate(-1px,-1px)
}
.sf-pickable input:disabled ~ .sf-thumb{opacity:.35}

.sf-sticky{
  position:fixed;left:0;right:0;bottom:0;z-index:50;background:var(--card);
  box-shadow:0 -10px 34px rgba(24,20,37,.16);padding-bottom:env(safe-area-inset-bottom)
}
.sf-sticky-in{max-width:var(--max);margin:0 auto;padding:14px var(--pad);
  display:grid;grid-template-columns:1fr auto;gap:12px;align-items:center}
.sf-sticky .sf-btn{grid-column:1 / -1}
@media (min-width:700px){
  .sf-sticky-in{grid-template-columns:1fr auto auto;gap:24px}
  .sf-sticky .sf-btn{grid-column:auto;min-width:230px}
}
.sf-sticky-price{display:flex;align-items:baseline;gap:12px}
.sf-sticky-price strong{font-size:24px;font-weight:800;letter-spacing:-.02em}
.sf-sticky-price s{color:var(--muted);font-size:14px}
.sf-badge{background:var(--ok);color:#fff;font-size:12px;font-weight:700;padding:3px 9px;
  border-radius:var(--r-pill)}

/* ============================ Warenkorb ============================ */
.sf-cart{margin:22px 0 28px;display:grid;gap:12px}
.sf-line{display:grid;grid-template-columns:70px 1fr;gap:16px;background:var(--card);
  border-radius:var(--r);padding:14px;box-shadow:var(--sh-1)}
.sf-line-media{width:70px;height:70px;border-radius:var(--r-sm);overflow:hidden;background:var(--soft)}
.sf-line-media img,.sf-line-media .art{width:100%;height:100%;object-fit:cover}
.sf-line-body h2{font-size:16px;margin:0 0 3px}
.sf-line-body h2 a{color:var(--fg)}
.sf-line-items{list-style:none;padding:0;margin:8px 0 0;color:var(--muted);font-size:13px}
.sf-line-price{grid-column:1 / -1;display:flex;align-items:center;gap:14px;padding-top:6px}
.sf-line-price strong{font-size:17px;font-weight:800}
.sf-line-price s{color:var(--muted);font-size:13px}
.sf-link{background:0;border:0;padding:0;color:var(--muted);font-size:13px;cursor:pointer;
  text-decoration:underline;margin-left:auto;font-family:inherit}
@media (min-width:700px){
  .sf-line{grid-template-columns:86px 1fr auto;align-items:center;padding:16px}
  .sf-line-media{width:86px;height:86px}
  .sf-line-price{grid-column:auto;flex-direction:column;align-items:flex-end;gap:8px;padding-top:0}
  .sf-link{margin-left:0}
}

.sf-totals{background:var(--card);border-radius:var(--r-lg);padding:24px;max-width:430px;box-shadow:var(--sh-1)}
.sf-totals h2{margin:0 0 12px;font-size:19px}
.sf-totals div{display:flex;justify-content:space-between;gap:16px;padding:9px 0;font-size:15px}
.sf-totals .sf-ok{color:var(--ok)}
.sf-grand{border-top:1px solid var(--line);margin-top:8px;padding-top:15px !important;
  font-size:20px !important;font-weight:800}
.sf-totals .sf-btn{margin-top:18px;width:100%}

/* ============================ Formulare ============================ */
.sf-narrow{max-width:480px;margin:0 auto}
.sf-box{background:var(--card);border-radius:var(--r-lg);padding:26px;margin:0 0 20px;box-shadow:var(--sh-1)}
.sf-box h2{margin:0 0 6px;font-size:19px}
.sf-box label{display:block;font-size:13px;font-weight:600;color:var(--muted);margin:16px 0 6px}
.sf-box input,.sf-box select,.sf-box textarea{
  width:100%;padding:13px 15px;border:1.5px solid var(--line);border-radius:var(--r-sm);
  background:var(--bg);color:var(--fg);font-size:16px;font-family:inherit;
  transition:border-color .15s var(--ease)
}
.sf-box input:focus,.sf-box select:focus,.sf-box textarea:focus{outline:none;border-color:var(--pri)}
.sf-box .sf-btn{margin-top:20px}
.cols{display:grid;gap:14px}
@media (min-width:640px){
  .cols{grid-template-columns:1fr 1fr}
  .cols.three{grid-template-columns:repeat(3,1fr)}
}
.cols label{margin-top:0}

.sf-radio{display:flex;align-items:center;gap:12px;padding:16px;border-radius:var(--r);
  background:var(--soft);margin:10px 0;cursor:pointer;transition:box-shadow .15s var(--ease)}
.sf-radio:has(input:checked){box-shadow:0 0 0 2px var(--pri)}
.sf-radio input{width:auto;accent-color:var(--pri)}
.sf-radio span{font-weight:600}
.sf-radio em{font-style:normal}
.sf-indent{margin:0 0 12px 18px}

.steps{display:flex;gap:8px;margin:0 0 26px}
.steps div{flex:1;padding:12px 10px;text-align:center;font-size:13px;font-weight:600;
  background:var(--soft);color:var(--muted);border-radius:var(--r-pill)}
.steps div.on{background:var(--pri);color:#fff}
.steps div.done{background:var(--tint);color:var(--ok)}

.tabs{display:flex;gap:8px;margin:0 0 20px}
.tabs a{flex:1;text-align:center;padding:13px;background:var(--soft);color:var(--muted);
  font-weight:700;font-size:14.5px;border-radius:var(--r-pill)}
.tabs a.on{background:var(--pri);color:#fff}

.sf-checkout{display:grid;gap:22px}
@media (min-width:920px){.sf-checkout{grid-template-columns:3fr 2fr;align-items:start}}
.sf-checkout-side .sf-totals{max-width:100%;position:sticky;top:96px}

.sf-table{width:100%;border-collapse:collapse}
.sf-table td{padding:13px 0;border-bottom:1px solid var(--line);font-size:15px}
.sf-table td.right{text-align:right;font-weight:600}
.sf-grandrow td{font-weight:800;font-size:18px;border-bottom:0}

/* ============================ Konto ============================ */
.sf-dl{background:var(--card);border-radius:var(--r);padding:20px;margin-bottom:14px;box-shadow:var(--sh-1)}
.sf-dl h3{margin:0 0 4px}
.sf-no{color:var(--no)}
.sf-reflink{background:var(--soft);border-radius:var(--r-sm);padding:15px;word-break:break-all;
  font-family:var(--mono);font-size:14px}

.sf-pager{display:flex;flex-wrap:wrap;gap:8px;margin:32px 0}
.sf-pager a{padding:10px 16px;background:var(--soft);color:var(--fg);border-radius:var(--r-pill);
  font-size:14px;font-weight:600}
.sf-pager a.on{background:var(--pri);color:#fff}
.sf-pager a:hover{background:var(--tint)}

.sf-legal{max-width:68ch}
.sf-chips{display:flex;flex-wrap:wrap;gap:9px;margin:16px 0 24px}
.sf-chips a{padding:9px 17px;background:var(--soft);color:var(--fg);border-radius:var(--r-pill);
  font-size:14px;font-weight:600}
.sf-chips a:hover{background:var(--pri);color:#fff}

.sf-searchbox{display:flex;gap:0;margin:22px 0 0;max-width:540px;background:var(--soft);
  border-radius:var(--r-pill);padding:5px 5px 5px 20px;align-items:center}
.sf-searchbox.wide{max-width:100%}
.sf-searchbox input{flex:1;border:0;background:transparent;color:var(--fg);font-size:16px;padding:11px 0}
.sf-searchbox input:focus{outline:none}
.sf-searchbox button{border:0;background:var(--pri);color:#fff;padding:12px 24px;
  border-radius:var(--r-pill);font-weight:700;cursor:pointer;font-size:15px}

/* ============================ Symbole ============================ */
.ic{flex:0 0 auto}
.cat-ic{display:block}

/* ============================ Fuss ============================ */
.sf-foot{background:var(--soft);padding:40px var(--pad) 52px;margin-top:64px}
.sf-foot nav{max-width:var(--max);margin:0 auto;display:flex;flex-wrap:wrap;gap:24px;font-size:14.5px}
.sf-foot nav a{color:var(--muted);font-weight:500}
.sf-foot nav a:hover{color:var(--pri)}
.sf-copy{max-width:var(--max);margin:22px auto 0;color:var(--muted);font-size:13px}

/* ============================ Meldungen ============================ */
.flash{padding:15px 18px;margin:20px 0;font-size:15px;border-radius:var(--r);
  display:flex;align-items:center;gap:10px}
.flash.ok{background:hsl(150 60% 95%);color:hsl(150 70% 22%)}
.flash.error{background:hsl(0 80% 96%);color:hsl(0 65% 38%)}
.flash.info{background:var(--tint);color:var(--pri-dark)}
@media (prefers-color-scheme:dark){
  .flash.ok{background:hsl(150 40% 14%);color:hsl(150 60% 70%)}
  .flash.error{background:hsl(0 40% 16%);color:hsl(0 70% 74%)}
  .flash.info{background:var(--tint);color:var(--fg)}
}

[hidden]{display:none !important}


/* ============================================================================
   Zwei Abschnitte in einer Zeile

   Kategorien neben Neuheiten, Packs neben dem Baukasten. Das halbiert
   den Weg nach unten, ohne etwas wegzulassen.
   ============================================================================ */
.sf-duo{display:grid;gap:26px;margin:34px 0 0}
@media (min-width:700px){
  .sf-duo{grid-template-columns:minmax(210px,1fr) 2.2fr;gap:28px;align-items:start}
  .sf-duo > .sf-col-narrow{grid-column:1}
  .sf-duo > .sf-col:not(.sf-col-narrow){grid-column:2}

  /* Zwei gleichrangige Spalten, beide gleich hoch. */
  .sf-duo-even{grid-template-columns:1fr 1fr;align-items:stretch}
  .sf-duo-even > .sf-col{grid-column:auto;display:flex;flex-direction:column}
  .sf-duo-even .sf-grid-mini,.sf-duo-even .sf-offer{flex:1}
  .sf-duo-even .sf-grid-mini{grid-template-columns:repeat(2,1fr)}
}
.sf-col{min-width:0}

/* Kategorien als Liste: schmal, jede Zeile eine Kategorie mit Anzahl. */
.sf-catlist{display:grid;gap:8px}
.sf-catlist .sf-cat{
  display:flex;align-items:center;gap:12px;text-align:left;padding:12px 14px;
  background:var(--card);border-radius:var(--r);box-shadow:var(--sh-1);color:var(--fg)
}
.sf-catlist .sf-cat:hover{transform:translateX(3px);box-shadow:var(--sh-2)}
.sf-catlist .cat-ic{margin:0;color:var(--pri)}
.sf-cat-name{flex:1;font-size:14.5px;font-weight:600}
.sf-cat-n{
  font-size:12px;font-weight:700;color:var(--muted);background:var(--soft);
  padding:3px 9px;border-radius:var(--r-pill)
}

/* Kleinere Kacheln in den Spalten. */
.sf-grid-mini{grid-template-columns:repeat(2,1fr);gap:14px}
@media (min-width:700px){.sf-grid-mini{grid-template-columns:repeat(3,1fr)}}
.sf-grid-mini .sf-card h3{margin:10px 12px 3px;font-size:14px}
.sf-grid-mini .sf-desc{display:none}
.sf-grid-mini .sf-cardfoot{padding:0 12px 12px}
.sf-grid-mini .sf-price{font-size:15px}
.sf-grid-mini .sf-add{padding:7px 11px;font-size:12px}
.sf-grid-mini .sf-kind{font-size:10px;padding:4px 8px;left:9px;top:9px}

/* ---------- Pack-Vorschau ----------
   Die enthaltenen Produkte liegen gefaechert uebereinander. Ohne die
   absolute Lage stuenden sie untereinander und die Kachel wuerde
   dreimal so hoch wie die uebrigen. */
.sf-packthumb{
  position:relative;aspect-ratio:4/3;background:var(--soft);
  display:block;overflow:hidden
}
.sf-fan{
  position:absolute;inset:0;display:block;border-radius:8px;overflow:hidden;
  box-shadow:0 6px 16px rgba(24,20,37,.22);transition:transform .3s var(--ease)
}
.sf-fan .art{width:100%;height:100%;object-fit:cover}
.sf-fan-0{transform:translate(-16%,3%) rotate(-9deg) scale(.74);z-index:1}
.sf-fan-1{transform:translate(16%,3%) rotate(9deg) scale(.74);z-index:2}
.sf-fan-2{transform:scale(.82);z-index:3}
.sf-card:hover .sf-fan-0{transform:translate(-23%,0) rotate(-13deg) scale(.74)}
.sf-card:hover .sf-fan-1{transform:translate(23%,0) rotate(13deg) scale(.74)}

/* ---------- Packs in einer Reihe ----------
   Zwei fertige Packs, daneben der Baukasten ueber die doppelte Breite.
   Alle Kacheln stehen auf gleicher Hoehe. */
.sf-packrow{align-items:stretch}
@media (min-width:720px){
  .sf-packrow{grid-template-columns:repeat(4,1fr)}
  .sf-packrow .sf-buildcard{grid-column:span 2}
}

.sf-buildcard{
  border-radius:var(--r);overflow:hidden;display:flex;
  background:linear-gradient(135deg,var(--pri),color-mix(in srgb,var(--pri) 62%,#2E1065));
  background-color:var(--pri);color:#fff;box-shadow:var(--sh-1);
  transition:transform .2s var(--ease),box-shadow .2s var(--ease)
}
.sf-buildcard:hover{transform:translateY(-5px);box-shadow:var(--sh-2)}

.sf-buildcard-in{
  display:flex;flex-direction:column;justify-content:center;gap:14px;
  padding:22px;width:100%
}
@media (min-width:720px){
  .sf-buildcard-in{
    flex-direction:row;align-items:center;justify-content:space-between;gap:20px;padding:24px 28px
  }
}

.sf-buildcard h3{color:#fff;font-size:19px;margin:0}
.sf-buildcard p{color:rgba(255,255,255,.85);font-size:14px;margin:5px 0 0}

.sf-buildmax{margin:0;line-height:1;white-space:nowrap}
.sf-buildmax b{
  display:block;font-size:clamp(34px,4.4vw,46px);font-weight:800;letter-spacing:-.04em;color:#fff
}
.sf-buildcard .sf-buildmax{color:rgba(255,255,255,.8);font-size:12.5px;
  text-transform:uppercase;letter-spacing:.1em}

.sf-buildcard .sf-btn{
  background:#fff;color:var(--pri);box-shadow:0 8px 20px rgba(0,0,0,.22);white-space:nowrap
}
.sf-buildcard .sf-btn:hover{background:#fff;color:var(--pri);transform:translateY(-2px)}

/* ---------- Mitgliedschaft ----------
   Der Preis steht im Knopf. Bei mehreren Plaenen nebeneinander liest
   sich damit jede Karte fuer sich: Leistung, dann Preis und Handlung
   in einem Zug. */
.sf-plan-desc{color:var(--muted);font-size:14px;margin:8px 0 0}
.sf-plan ul{margin:18px 0 20px}
.sf-plan li{padding:6px 0}
.sf-plan form{margin:0}

.sf-planbtn{
  width:100%;display:flex;align-items:center;justify-content:space-between;gap:14px;
  padding:14px 22px;text-align:left
}
.sf-planbtn-label{font-size:15px;font-weight:700}
.sf-planbtn-price{
  font-size:19px;font-weight:800;letter-spacing:-.02em;white-space:nowrap;
  padding-left:14px;border-left:1px solid rgba(255,255,255,.35)
}
.sf-planbtn-price em{font-style:normal;font-size:12.5px;font-weight:500;opacity:.85}

/* ---------- Portalblock zweispaltig ---------- */
@media (max-width:700px){.sf-pitch{padding:32px 20px 36px}}
.sf-pitch-in{display:grid;gap:28px;align-items:center}
@media (min-width:940px){
  .sf-pitch-in{grid-template-columns:1.5fr 1fr;gap:52px}
}
.sf-pitch h2{font-size:clamp(25px,3.4vw,38px);max-width:15ch}
.sf-pitch-sub{margin:12px 0 20px;font-size:16px}
.sf-pitch-list{margin:0;gap:9px}
.sf-pitch-list li{font-size:14.5px}

/* Preis als Karte, damit das Angebot fassbar wird. */
.sf-pricecard{
  background:rgba(255,255,255,.14);backdrop-filter:blur(10px);border-radius:var(--r-lg);
  padding:28px;text-align:center;box-shadow:0 20px 50px rgba(0,0,0,.22)
}
.sf-pricecard-label{font-size:13px;opacity:.8;margin:0 0 6px;letter-spacing:.06em;text-transform:uppercase}
.sf-pricecard-price{font-size:clamp(38px,5vw,52px);font-weight:800;letter-spacing:-.03em;margin:0}
.sf-pricecard-note{font-size:13.5px;opacity:.82;margin:8px 0 20px;line-height:1.5}
.sf-pricecard .sf-btn{width:100%}
.sf-pricecard-fine{font-size:12px;opacity:.7;margin:12px 0 0}

/* ============================================================================
   Nachgetragene Regeln

   Diese Klassen standen in den Vorlagen, hatten aber keine Regel. Der
   Pruefer tools/check_css.py findet solche Luecken kuenftig vor der
   Auslieferung.
   ============================================================================ */

/* Aufmacher: Textspalte neben der Buehne. */
.sf-hero-text{min-width:0}

/* Baukasten-Kachel: Titel und Hinweis links. */
.sf-buildcard-text{min-width:0}

/* Kasse: linke Spalte mit Rechnungsangaben und Zahlungsart. */
.sf-checkout-main{min-width:0;display:grid;gap:20px;align-content:start}

/* Produktseite: Textspalte neben dem Bild. */
.sf-detail-body{min-width:0}

/* Portalblock: Textspalte neben der Preiskarte. */
.sf-pitch-text{min-width:0}

/* Zahlungsangaben einer Offline-Art, mehrzeilig hinterlegt. */
.sf-paydetails{
  background:var(--soft);border-radius:var(--r-sm);padding:16px 18px;margin:14px 0 0;
  white-space:pre-line;font-size:14.5px;color:var(--fg)
}

/* Hinweisstreifen, etwa auf der Packseite. */
.sf-band{
  background:linear-gradient(135deg,var(--tint),var(--soft));border-radius:var(--r-lg);
  padding:28px var(--pad);margin:26px 0;text-align:center
}
.sf-band h2{margin:0 0 10px}
.sf-band p{color:var(--muted);max-width:52ch;margin-inline:auto}
.sf-band .sf-btn{margin-top:6px}

/* ============================================================================
   Lizenzstufen, Cookie-Hinweis, Widerrufswahl
   ============================================================================ */

/* Lizenzmerkmal auf der Kachel. */
.sf-lic-tag{
  position:absolute;right:12px;top:12px;font-size:10.5px;font-weight:700;
  letter-spacing:.04em;text-transform:uppercase;padding:5px 9px;border-radius:var(--r-pill);
  background:rgba(255,255,255,.92);color:#22252A;backdrop-filter:blur(6px)
}
.lic-commercial{background:#DBEAFE;color:#1E40AF}
.lic-resell{background:#DCFCE7;color:#166534}
.lic-master_resell{background:#FEF3C7;color:#92400E}

/* Lizenzhinweis auf der Produktseite. */
.sf-licbox{background:var(--soft);border-radius:var(--r);padding:16px 18px;margin:18px 0 0}
.sf-licbox-head{display:flex;align-items:center;gap:10px;margin-bottom:6px}
.sf-licbox-head .ic{color:var(--pri)}
.sf-licbox-head strong{font-size:15px}
.sf-licbox-head a{margin-left:auto;font-size:13px;font-weight:600}
.sf-licbox p{color:var(--muted);font-size:14px;margin:0}

/* Lizenzseite. */
.sf-narrowish{max-width:60ch;margin:26px 0 0}
.sf-liccards{display:grid;gap:var(--gap);margin:28px 0 0}
@media (min-width:760px){.sf-liccards{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1100px){.sf-liccards{grid-template-columns:repeat(4,1fr)}}
.sf-lic{background:var(--card);border-radius:var(--r-lg);padding:24px;box-shadow:var(--sh-1)}
.sf-lic-head{display:flex;align-items:center;gap:12px;margin-bottom:10px}
.sf-lic-step{
  width:30px;height:30px;border-radius:var(--r-pill);background:var(--pri);color:#fff;
  display:grid;place-items:center;font-weight:800;font-size:14px;flex:0 0 auto
}
.sf-lic h2{font-size:17px;margin:0}
.sf-lic-sum{color:var(--muted);font-size:14px;min-height:3.4em}
.sf-lic-rights{list-style:none;padding:0;margin:14px 0 0;font-size:13.5px}
.sf-lic-rights li{display:flex;align-items:center;gap:9px;padding:7px 0;border-top:1px solid var(--line)}
.sf-lic-rights .yes{color:var(--fg)}
.sf-lic-rights .yes .ic{color:var(--ok)}
.sf-lic-rights .no{color:var(--muted);opacity:.65}
.sf-lic-rights .no .ic{color:var(--muted)}
.sf-licnote{margin-top:30px;max-width:70ch}

/* Widerrufswahl an der Kasse. */
.sf-radio-note{display:block;font-style:normal;font-weight:400;color:var(--muted);
  font-size:13px;margin-top:3px;line-height:1.5}
.sf-radio span{display:block}
.sf-consent{display:flex;gap:11px;align-items:flex-start;margin:16px 0 0;font-size:13.5px;
  color:var(--muted);cursor:pointer}
.sf-consent input{margin-top:3px;accent-color:var(--pri);flex:0 0 auto}

/* Cookie-Hinweis. */
.sf-cookie{
  position:fixed;left:0;right:0;bottom:0;z-index:70;background:var(--card);
  box-shadow:0 -8px 30px rgba(24,20,37,.16);padding-bottom:env(safe-area-inset-bottom)
}
.sf-cookie-in{
  max-width:var(--max);margin:0 auto;padding:16px var(--pad);display:flex;
  align-items:center;gap:18px;flex-wrap:wrap
}
.sf-cookie p{margin:0;font-size:13.5px;color:var(--muted);flex:1;min-width:240px;line-height:1.55}
.sf-cookie strong{color:var(--fg);display:block;margin-bottom:2px;font-size:14px}

/* ============================================================================
   Die beiden Angebote und die Verkaufsseiten
   ============================================================================ */

/* Zwei Angebote in der ersten Zeile, auf dem Telefon untereinander. */
.sf-twin{display:grid;gap:var(--gap);margin:18px 0 0;align-items:stretch}
@media (min-width:900px){.sf-twin{grid-template-columns:1fr 1fr;gap:24px}}

.sf-offer-card{
  background:var(--card);border-radius:var(--r-lg);overflow:hidden;display:flex;
  flex-direction:column;box-shadow:var(--sh-2);
  transition:transform .2s var(--ease),box-shadow .2s var(--ease)
}
.sf-offer-card:hover{transform:translateY(-4px);box-shadow:var(--sh-3)}
.sf-offer-banner{display:block;line-height:0}
.sf-offer-banner svg{width:100%;height:auto;aspect-ratio:8/3}
.sf-offer-body{padding:22px 24px 24px;display:flex;flex-direction:column;flex:1}
.sf-offer-body h2{font-size:clamp(19px,2.2vw,25px);margin:0 0 8px}
.sf-offer-body p{color:var(--muted);font-size:14.5px;flex:1;margin:0 0 16px}
.sf-offer-cta{display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.sf-offer-price{font-size:15px;font-weight:800;line-height:1.2}
.sf-offer-price em{display:block;font-style:normal;font-size:12px;font-weight:400;color:var(--muted)}

/* Kopfbanner einer Verkaufsseite. */
.sf-sell-hero{border-radius:var(--r-lg);overflow:hidden;margin:18px 0 0;box-shadow:var(--sh-2);line-height:0}
.sf-sell-hero svg{width:100%;height:auto;aspect-ratio:8/3}

/* Verkaufsseite: Text links, Kaufkarte rechts. */
.sf-sell{display:grid;gap:32px;margin:34px 0 0;align-items:start}
@media (min-width:960px){.sf-sell{grid-template-columns:1fr 340px;gap:48px}}
.sf-sell-main{min-width:0;max-width:72ch}
.sf-sell-main h1{margin:0 0 16px}
.sf-sell-main h2{margin:40px 0 16px}
.sf-sell-main p{color:var(--muted)}
.sf-sell-side{min-width:0}

/* Bereiche des Pakets. */
.sf-grouplist{display:grid;gap:14px}
@media (min-width:640px){.sf-grouplist{grid-template-columns:1fr 1fr}}
.sf-group{display:flex;gap:14px;background:var(--soft);border-radius:var(--r);padding:16px 18px}
.sf-group .cat-ic{color:var(--pri);flex:0 0 auto;margin-top:2px}
.sf-group h3{margin:0 0 4px;font-size:15px}
.sf-group p{margin:0;font-size:13.5px;line-height:1.55}

/* Rechte: darf und darf nicht. */
.sf-rightsplit{display:grid;gap:16px}
@media (min-width:700px){.sf-rightsplit{grid-template-columns:1fr 1fr}}
.sf-may,.sf-maynot{background:var(--card);border-radius:var(--r);padding:20px;box-shadow:var(--sh-1)}
.sf-may h3,.sf-maynot h3{display:flex;align-items:center;gap:9px;margin:0 0 12px;font-size:15px}
.sf-may h3 .ic{color:var(--ok)}
.sf-maynot h3 .ic{color:var(--no)}
.sf-may ul,.sf-maynot ul{list-style:none;padding:0;margin:0;font-size:14px}
.sf-may li,.sf-maynot li{padding:8px 0;border-top:1px solid var(--line);color:var(--muted)}

/* Ablaufliste und Zeitstrahl. */
.sf-steps-list{list-style:none;counter-reset:st;padding:0;margin:0;display:grid;gap:12px}
.sf-steps-list li{
  counter-increment:st;background:var(--soft);border-radius:var(--r);padding:16px 18px 16px 58px;
  position:relative
}
.sf-steps-list li::before{
  content:counter(st);position:absolute;left:18px;top:16px;width:26px;height:26px;
  border-radius:var(--r-pill);background:var(--pri);color:#fff;display:grid;place-items:center;
  font-size:13px;font-weight:800
}
.sf-steps-list strong{display:block;font-size:15px;margin-bottom:3px}
.sf-steps-list span{color:var(--muted);font-size:14px}

.sf-timeline{list-style:none;padding:0;margin:0;position:relative}
.sf-timeline::before{content:"";position:absolute;left:9px;top:8px;bottom:8px;width:2px;background:var(--line)}
.sf-timeline li{position:relative;padding:0 0 22px 38px}
.sf-timeline li::before{
  content:"";position:absolute;left:2px;top:5px;width:16px;height:16px;border-radius:var(--r-pill);
  background:var(--pri);box-shadow:0 0 0 4px var(--bg)
}
.sf-tl-mark{
  display:inline-block;font-size:11.5px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;
  color:var(--pri);background:var(--tint);padding:3px 9px;border-radius:var(--r-pill);margin-bottom:5px
}
.sf-timeline strong{display:block;font-size:15.5px;margin-bottom:3px}
.sf-timeline span{color:var(--muted);font-size:14px;display:block}

/* Fragen und Antworten. */
.sf-faq{margin:0}
.sf-faq dt{font-weight:700;font-size:15px;margin:18px 0 5px}
.sf-faq dd{margin:0;color:var(--muted);font-size:14.5px}

/* Kaufkarte. */
.sf-buycard{
  background:var(--card);border-radius:var(--r-lg);padding:26px;box-shadow:var(--sh-2);
  position:sticky;top:96px
}
.sf-buycard-label{font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:var(--muted);margin:0 0 6px}
.sf-buycard-price{font-size:44px;font-weight:800;letter-spacing:-.03em;margin:0}
.sf-buycard-note{color:var(--muted);font-size:13.5px;margin:6px 0 0;line-height:1.5}
.sf-buycard-list{list-style:none;padding:0;margin:20px 0;font-size:14px}
.sf-buycard-list li{display:flex;align-items:center;gap:9px;padding:7px 0;color:var(--muted)}
.sf-buycard-list .ic{color:var(--ok);flex:0 0 auto}
.sf-buycard .sf-btn{width:100%}
.sf-buycard-fine{font-size:12.5px;color:var(--muted);margin:14px 0 0;line-height:1.5}

.sf-crosssell{background:var(--soft);border-radius:var(--r-lg);padding:22px;margin:18px 0 0}
.sf-crosssell h3{margin:0 0 6px;font-size:16px}
.sf-crosssell p{color:var(--muted);font-size:14px;margin:0 0 14px}
.sf-crosssell .sf-btn{width:100%}

/* Die beiden Angebote unterscheiden sich in der Akzentkante. */
.sf-offer-bundle{box-shadow:var(--sh-2),inset 0 3px 0 0 #E8C36A}
.sf-offer-shop{box-shadow:var(--sh-2),inset 0 3px 0 0 var(--pri)}
.sf-offer-bundle:hover{box-shadow:var(--sh-3),inset 0 3px 0 0 #E8C36A}
.sf-offer-shop:hover{box-shadow:var(--sh-3),inset 0 3px 0 0 var(--pri)}

/* ============================================================================
   Die Rechnung: warum sich der Shop selbst bezahlt
   ============================================================================ */

/* Hervorgehobener Satz, der den Vorteil benennt. */
.sf-flag{
  display:flex;align-items:flex-start;gap:11px;background:var(--tint);border-radius:var(--r);
  padding:15px 18px;margin:18px 0 0;font-size:15px;color:var(--fg);line-height:1.55
}
.sf-flag .ic{color:var(--ok);flex:0 0 auto;margin-top:2px}
.sf-flag-sm{font-size:13.5px;padding:11px 14px;margin:12px 0 0}

/* Drei Schritte: zahlen, geschenkt bekommen, verdienen. */
.sf-math{list-style:none;padding:0;margin:22px 0 0;display:grid;gap:12px}
@media (min-width:820px){.sf-math{grid-template-columns:repeat(3,1fr)}}
.sf-math li{
  background:var(--card);border-radius:var(--r-lg);padding:22px;box-shadow:var(--sh-1);
  display:flex;flex-direction:column
}
.sf-math-step{
  font-size:11px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;
  color:var(--muted);margin-bottom:8px
}
.sf-math strong{font-size:16px;margin-bottom:12px}
.sf-math-num{font-size:27px;font-weight:800;letter-spacing:-.03em;line-height:1.15}
.sf-math-num s{color:var(--muted);font-weight:400;font-size:17px;margin-right:9px}
.sf-math-num em{font-style:normal;font-size:13px;font-weight:500;color:var(--muted);display:block}
.sf-math-note{color:var(--muted);font-size:13.5px;margin-top:9px;line-height:1.5}

.sf-math-free{box-shadow:var(--sh-1),inset 0 0 0 1.5px var(--ok)}
.sf-math-free .sf-math-num b{color:var(--ok);text-transform:uppercase;letter-spacing:.02em}
.sf-math-win{background:var(--fg);color:var(--bg);box-shadow:var(--sh-2)}
.sf-math-win .sf-math-step,.sf-math-win .sf-math-note{color:rgba(255,255,255,.7)}
.sf-math-win .sf-math-num{color:#fff}
.sf-math-win .sf-math-num em{color:rgba(255,255,255,.7)}
@media (prefers-color-scheme:dark){
  .sf-math-win{background:var(--pri);color:#fff}
}

/* Das Ergebnis der Rechnung. */
.sf-breakeven{
  background:linear-gradient(135deg,var(--tint),var(--soft));border-radius:var(--r-lg);
  padding:20px 24px;margin:16px 0 0;font-size:17px;font-weight:700;line-height:1.5
}

.sf-buycard-win{
  background:var(--tint);border-radius:var(--r-sm);padding:11px 14px;margin:14px 0 0;
  font-size:13.5px;font-weight:700;color:var(--pri-dark);line-height:1.45
}
@media (prefers-color-scheme:dark){.sf-buycard-win{color:var(--fg)}}

/* ============================================================================
   Grosse Bildschirme

   Auf dem Telefon traegt sich das Raster von selbst: eine Spalte, alles
   dicht beieinander. Auf dem Rechner entstehen leere Flaechen und die
   Schrift wirkt zu klein fuer den Abstand. Diese Regeln greifen erst ab
   1100 Pixeln und geben der Seite dort mehr Koerper.
   ============================================================================ */

@media (min-width:1100px){
  :root{--max:1400px;--gap:26px;--pad:32px}

  /* Groessere Schrift, engere Laufweite: wirkt auf Abstand ruhiger. */
  body{font-size:16.5px}
  h1{font-size:clamp(40px,4.2vw,64px);letter-spacing:-.035em}
  h2{font-size:clamp(26px,2.4vw,38px);letter-spacing:-.03em}

  /* Der Aufmacher darf Platz nehmen. */
  .sf-hero{padding:52px 56px}
  .sf-hero-in{gap:52px}
  .sf-stagewrap{min-height:330px}

  /* Abschnittskopf mit Linie: gliedert die Breite. */
  .sf-head{
    align-items:baseline;padding-bottom:14px;
    border-bottom:1px solid var(--line);margin-bottom:22px
  }
  .sf-section{margin-top:56px}
  .sf-duo,.sf-twin{margin-top:44px}

  /* Kacheln duerfen groesser werden, aber nicht mehr als fuenf je Reihe. */
  .sf-grid{grid-template-columns:repeat(auto-fill,minmax(240px,1fr))}
  .sf-grid-mini{grid-template-columns:repeat(auto-fill,minmax(190px,1fr))}

  /* Beim Ueberfahren hebt sich die Kachel deutlicher. */
  .sf-card:hover{transform:translateY(-8px)}
  .sf-card h3{font-size:16px;margin:16px 17px 5px}
  .sf-cardfoot{padding:0 17px 17px}

  /* Die beiden Angebote tragen die Breite. */
  .sf-offer-body{padding:28px 32px 30px}
  .sf-offer-body h2{font-size:28px}
  .sf-offer-body p{font-size:15.5px}
}

/* ---------------------------------------------------------------------------
   Dunkle Produktbilder brauchen andere Kachelfarben.
   Die Kachel wird zur Fassung des Bildes, nicht zum weissen Kasten.
   --------------------------------------------------------------------------- */
.sf-thumb{background:#14111A}
.sf-kind{
  background:rgba(12,10,16,.72);color:#F7F1E8;backdrop-filter:blur(8px);
  box-shadow:inset 0 0 0 1px rgba(232,195,106,.45)
}
.sf-lic-tag{
  background:rgba(12,10,16,.72);color:#F7F1E8;backdrop-filter:blur(8px);
  box-shadow:inset 0 0 0 1px rgba(232,195,106,.45)
}
.lic-commercial{background:rgba(30,64,175,.82);color:#EAF1FF;box-shadow:none}
.lic-resell{background:rgba(22,101,52,.82);color:#E6FBEE;box-shadow:none}
.lic-master_resell{background:rgba(146,64,14,.85);color:#FFF3DF;box-shadow:none}

/* Das Bild sitzt in einer Fassung mit feiner Kante. */
.sf-card .sf-thumb::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  box-shadow:inset 0 -40px 60px -30px rgba(0,0,0,.55)
}
.sf-detail-media{background:#14111A}

/* Die Buehne im Aufmacher wirkt mit dunklen Bildern staerker. */
.sf-stage-item{box-shadow:0 18px 40px rgba(0,0,0,.38),0 4px 12px rgba(0,0,0,.28)}

/* Pack-Vorschau: dunkler Grund, damit die Faecher Kontur bekommen. */
.sf-packthumb{background:#14111A}
.sf-fan{box-shadow:0 8px 20px rgba(0,0,0,.45)}

/* ============================================================================
   Kategorien im Menue

   Frueher stand jede Kategorie einzeln in der Leiste. Bei zwanzig
   Kategorien bricht das um und der Kopf wird unruhig. Jetzt ein Eintrag
   mit Klappliste; die Leiste bleibt bei fuenf festen Zielen.
   ============================================================================ */

.sf-catmenu > a{display:inline-flex;align-items:center;gap:6px}
.sf-catmenu > a .ic{transition:transform .2s var(--ease)}
.sf-catmenu:hover > a .ic,.sf-catmenu:focus-within > a .ic{transform:rotate(180deg)}

@media (min-width:900px){
  /* Zwei Spalten, damit auch zwoelf Kategorien ohne Scrollen passen. */
  .sf-menu .sf-megamenu{
    min-width:460px;display:grid;grid-template-columns:1fr 1fr;gap:2px;padding:12px
  }
  .sf-menu .sf-megamenu a{
    display:flex;align-items:center;gap:11px;padding:9px 11px;border-radius:var(--r-sm)
  }
  .sf-menu .sf-megamenu .cat-ic{color:var(--pri);flex:0 0 auto}
  .sf-menu .sf-megamenu strong{display:block;font-size:14px;font-weight:600;line-height:1.25}
  .sf-menu .sf-megamenu em{
    display:block;font-style:normal;font-size:11.5px;color:var(--muted);margin-top:1px
  }
  .sf-megamore{grid-column:1 / -1;border-top:1px solid var(--line);margin-top:6px;padding-top:6px}
  .sf-megamore a{color:var(--pri) !important;font-weight:700;justify-content:center}
}

/* Auf dem Telefon bleibt es eine einfache Liste. */
@media (max-width:899px){
  .sf-megamenu{padding-left:14px}
  .sf-megamenu a{display:flex;align-items:center;gap:10px}
  .sf-megamenu .cat-ic{color:var(--pri);flex:0 0 auto}
  .sf-megamenu em{font-style:normal;font-size:11.5px;color:var(--muted);margin-left:6px}
  .sf-megamenu strong{font-weight:500;font-size:14px}
}