/* Seitenstruktur 05.10.2026: Bausteine fuer Funktionen, Preise, FAQ, Manifest, Blog.
   Aus den abgenommenen Prototypen (_plan/prototyp/seiten), Klassenpraefix sx-. */
.sx-hero-seite{padding-block:clamp(56px,9vw,128px) clamp(32px,5vw,64px)}
.sx-hero-seite .lead{max-width:56ch;margin-top:22px}
.sx-actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:32px}
.sx-chips{display:flex;gap:8px;flex-wrap:wrap}
.sx-chip{font:600 14px/1 var(--font-display);padding:11px 16px;border-radius:999px;border:1px solid var(--glas-kante-an);
  background:var(--glas-flaeche);color:var(--ink);cursor:pointer;transition:background var(--t-state),color var(--t-state),border-color var(--t-state);text-decoration:none}
.sx-chip:hover{border-color:var(--ink)}
.sx-chip[aria-pressed="true"],.sx-chip.on{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.sx-eyebrow{font:500 12px/1 var(--font-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3)}
.sx-num{font:500 12px/1 var(--font-mono);letter-spacing:.14em;color:var(--signal-tx)}
.sx-card{background:var(--glas-flaeche);border:1px solid var(--glas-kante);border-radius:var(--r-panel);
  box-shadow:inset 0 1px 0 var(--glas-licht-innen),var(--glas-schatten);backdrop-filter:var(--glas-trueb);-webkit-backdrop-filter:var(--glas-trueb)}
.sx-sub{position:sticky;top:calc(var(--h-head-site) + 8px);z-index:20;margin-block:0 clamp(32px,5vw,72px)}
.sx-sub .sx-card{display:inline-flex;gap:4px;padding:6px;border-radius:999px;max-width:100%;overflow:auto;scrollbar-width:none}
.sx-sub a{white-space:nowrap;font:600 14px/1 var(--font-display);padding:11px 16px;border-radius:999px;color:var(--ink-2);text-decoration:none;border:0}
.sx-sub a:hover{color:var(--ink);background:var(--box)}
.sx-sub a.on{background:var(--ink);color:var(--paper)}
/* 25.10.2026 · SEG (components.css, motion.js 10): der Marker folgt dem Scroll von Bereich zu Bereich. */
.sx-sub .sx-card.gleiter{--gleit-pad:6px}
.sx-sub .sx-card.gleiter-mit a.on{background:none}
.sx-bereich{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:clamp(32px,6vw,96px);align-items:center;padding-block:clamp(48px,7vw,104px);scroll-margin-top:140px}
.sx-bereich + .sx-bereich{border-top:1px solid var(--hair)}
.sx-bereich.rev .sx-txt{order:2}
.sx-txt h2{margin:14px 0 18px;max-width:16ch}
.sx-txt p{max-width:46ch}
.sx-facts{list-style:none;margin:26px 0 0;padding:0;display:grid;gap:12px}
.sx-facts li{display:grid;grid-template-columns:18px 1fr;gap:12px;font-size:16px;line-height:1.45;color:var(--ink-2)}
.sx-facts li::before{content:"";width:8px;height:8px;margin-top:7px;border-radius:2px;background:var(--signal);outline:1px solid color-mix(in srgb,var(--ink) 25%,transparent)}
.sx-vis{padding:clamp(18px,2.4vw,32px);min-height:380px;display:grid;place-items:center;position:relative;overflow:hidden}
.sx-tag{display:inline-block;font:500 11px/1 var(--font-mono);letter-spacing:.1em;text-transform:uppercase;padding:6px 9px;border-radius:6px;background:var(--box);color:var(--ink-2);border:1px solid var(--hair)}
.sx-tag.sig{background:var(--signal);color:var(--on-signal);border-color:transparent}
.v-ed{display:grid;grid-template-columns:120px 1fr;gap:14px;width:100%}
.v-ed .ly{display:grid;gap:6px;align-content:start}
.v-ed .ly i{display:block;height:26px;border-radius:7px;background:var(--box);border:1px solid var(--hair)}
.v-ed .ly i.a{background:color-mix(in srgb,var(--signal) 40%,var(--box));border-color:var(--signal-tx)}
.v-slide{aspect-ratio:4/5;border-radius:12px;background:var(--ink);color:var(--paper);padding:20px;display:flex;flex-direction:column;justify-content:flex-end;gap:8px;position:relative;max-height:340px;margin:auto}
.v-slide b{font:900 28px/.95 var(--font-display);letter-spacing:-.04em}
.v-slide span{height:6px;border-radius:3px;background:color-mix(in srgb,var(--paper) 40%,transparent);width:70%}
.v-slide em{position:absolute;inset:14px;border:1.5px dashed color-mix(in srgb,var(--signal) 85%,transparent);border-radius:6px;pointer-events:none}
.v-slide .sg{position:absolute;right:14px;top:14px;width:26px;height:26px;border-radius:7px;background:var(--signal)}
.v-brand{display:grid;gap:16px;width:100%}
.v-brand .sw{display:flex;gap:10px}
.v-brand .sw i{flex:1;height:64px;border-radius:12px;border:1px solid var(--hair)}
.v-brand .ty{font:900 64px/.9 var(--font-display);letter-spacing:-.05em;color:var(--ink)}
.v-brand .ty small{display:block;font:500 12px/1.4 var(--font-mono);letter-spacing:.08em;color:var(--ink-3);margin-top:8px;text-transform:uppercase}
.v-brand .lg{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.v-brand .lg i{aspect-ratio:2/1;border-radius:8px;border:1px dashed var(--edge);position:relative}
.v-brand .lg i.a{border-style:solid;border-color:var(--signal-tx);background:color-mix(in srgb,var(--signal) 22%,transparent)}
.v-brand .lg i.a::after{content:"";position:absolute;left:10px;top:50%;width:16px;height:16px;border-radius:5px;background:var(--ink);transform:translateY(-50%)}
.v-phone{width:230px;border-radius:34px;padding:10px;background:var(--ink);box-shadow:0 30px 60px -20px rgba(0,0,0,.45)}
.v-phone .sc{border-radius:25px;background:var(--panel);overflow:hidden;color:var(--ink)}
.v-phone .tp{display:flex;gap:8px;align-items:center;padding:12px 12px 8px;font:700 12px/1 var(--font-display)}
.v-phone .tp i{width:22px;height:22px;border-radius:50%;background:var(--signal);border:1px solid var(--hair)}
.v-phone .im{aspect-ratio:4/5;background:linear-gradient(160deg,var(--ink),color-mix(in srgb,var(--ink) 55%,var(--signal)));position:relative}
.v-phone .im b{position:absolute;left:14px;bottom:16px;right:14px;color:var(--paper);font:900 22px/.95 var(--font-display);letter-spacing:-.04em}
.v-phone .dots{display:flex;gap:4px;justify-content:center;padding:10px}
.v-phone .dots i{width:5px;height:5px;border-radius:50%;background:var(--edge)}
.v-phone .dots i:first-child{background:var(--ink)}
.v-pin{position:absolute;width:30px;height:30px;border-radius:50% 50% 50% 4px;background:var(--daten);color:#131313;display:grid;place-items:center;font:700 12px/1 var(--font-mono);box-shadow:0 8px 18px -6px rgba(0,0,0,.4)}
.v-note{position:absolute;padding:10px 12px;border-radius:10px;background:var(--panel);border:1px solid var(--hair);font:600 12px/1.3 var(--font-display);color:var(--ink);max-width:150px;box-shadow:var(--glas-schatten)}
.v-cal{width:100%}
.v-cal .hd{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px;font:800 20px/1 var(--font-display);letter-spacing:-.03em}
.v-cal .gr{display:grid;grid-template-columns:repeat(7,1fr);gap:6px}
.v-cal .gr span{font:500 10px/1 var(--font-mono);letter-spacing:.1em;color:var(--ink-3);text-align:center;text-transform:uppercase}
.v-cal .gr i{display:block;aspect-ratio:1;border-radius:8px;background:var(--box);border:1px solid var(--hair);position:relative}
.v-cal .gr i.p::after{content:"";position:absolute;left:5px;right:5px;bottom:5px;height:7px;border-radius:3px;background:var(--signal)}
.v-cal .gr i.d::after{content:"";position:absolute;left:5px;right:5px;bottom:5px;height:7px;border-radius:3px;background:var(--daten)}
.v-cal .gr i.z::before,.v-cal .gr i.z::after{content:"";position:absolute;left:5px;right:5px;height:7px;border-radius:3px}
.v-cal .gr i.z::before{bottom:5px;background:var(--signal)}
.v-cal .gr i.z::after{bottom:15px;background:var(--daten)}
.v-board{position:relative;width:100%;height:340px}
.v-board i{position:absolute;display:block;border-radius:10px;border:1px solid var(--hair);box-shadow:var(--glas-schatten)}
.v-team{display:grid;gap:10px;width:100%}
.v-team .rw{display:grid;grid-template-columns:36px 1fr auto;gap:12px;align-items:center;padding:12px 14px;border-radius:14px;background:var(--box);border:1px solid var(--hair)}
.v-team .av{width:36px;height:36px;border-radius:50%;display:grid;place-items:center;font:700 13px/1 var(--font-display);background:var(--ink);color:var(--paper)}
.v-team .rw b{font:700 15px/1.2 var(--font-display)}
.v-team .rw small{display:block;font:400 12px/1.3 var(--font-display);color:var(--ink-3)}
.sx-tut{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,7fr);gap:clamp(24px,4vw,64px);align-items:start}
.sx-tut ol{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.sx-tut li button{all:unset;box-sizing:border-box;cursor:pointer;display:grid;grid-template-columns:34px 1fr;gap:6px 14px;width:100%;padding:18px 20px;border-radius:16px;border:1px solid transparent;transition:background var(--t-state),border-color var(--t-state)}
.sx-tut li button:hover{background:var(--box)}
.sx-tut li button[aria-selected="true"]{background:var(--glas-flaeche);border-color:var(--glas-kante-an);box-shadow:inset 0 1px 0 var(--glas-licht-innen)}
.sx-tut li .n{font:500 12px/1.9 var(--font-mono);letter-spacing:.1em;color:var(--ink-3)}
.sx-tut li button[aria-selected="true"] .n{color:var(--signal-tx)}
.sx-tut li strong{font:700 19px/1.2 var(--font-display);letter-spacing:-.02em;color:var(--ink)}
.sx-tut li p{grid-column:2;margin:0;font-size:15px;line-height:1.5;color:var(--ink-2);display:none}
.sx-tut li button[aria-selected="true"] p{display:block}
.sx-film{padding:10px;position:sticky;top:110px}
.sx-film img{display:block;width:100%;height:auto;border-radius:12px}
.sx-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin-top:28px}
.sx-det{padding:22px;display:grid;gap:8px;align-content:start;transition:transform var(--t-state)}
.sx-det:hover{transform:translateY(-3px)}
.sx-det[hidden]{display:none}
.sx-det h3{font:700 18px/1.2 var(--font-display);letter-spacing:-.02em;margin:0}
.sx-det p{margin:0;font-size:14.5px;line-height:1.5;color:var(--ink-2)}
.sx-det .sx-tag{justify-self:start}
.sx-end2{position:relative;overflow:hidden;border-radius:28px;padding:clamp(28px,5vw,72px);min-height:340px;display:flex;flex-direction:column;justify-content:space-between;gap:48px;
  background:var(--ink);color:var(--paper);border:1px solid color-mix(in srgb,var(--paper) 14%,transparent)}
.sx-end2::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:.5;
  background-image:linear-gradient(color-mix(in srgb,var(--paper) 9%,transparent) 1px,transparent 1px),linear-gradient(90deg,color-mix(in srgb,var(--paper) 9%,transparent) 1px,transparent 1px);
  background-size:64px 64px;mask-image:linear-gradient(100deg,transparent 30%,#000 100%);-webkit-mask-image:linear-gradient(100deg,transparent 30%,#000 100%)}
.sx-end2 > *{position:relative}
.sx-end2-top{display:flex;justify-content:space-between;align-items:center}
.sx-end2 .sx-eyebrow{color:color-mix(in srgb,var(--paper) 62%,transparent)}
.sx-end2-arrow{width:56px;height:56px;border-radius:50%;display:grid;place-items:center;font:500 24px/1 var(--font-mono);background:var(--signal);color:var(--on-signal)}
.sx-end2 h2{margin:0;font:900 clamp(40px,6.4vw,96px)/.94 var(--font-display);letter-spacing:-.045em;max-width:15ch;color:var(--paper)}
.sx-end2 .sx-actions{margin-top:0;align-items:center}
.sx-ghost{display:inline-flex;align-items:center;min-height:48px;padding:0 22px;border-radius:999px;font:600 16px/1 var(--font-display);color:var(--paper);border:1px solid color-mix(in srgb,var(--paper) 36%,transparent);text-decoration:none;transition:background var(--t-state),border-color var(--t-state)}
.sx-ghost:hover{background:color-mix(in srgb,var(--paper) 12%,transparent);border-color:var(--paper)}
.sx-end{margin-block:clamp(48px,8vw,128px);padding:clamp(36px,6vw,88px);text-align:left;position:relative;overflow:hidden}
.sx-end h2{max-width:20ch}
.sx-end::before{content:"";position:absolute;right:-8%;top:-40%;width:55%;aspect-ratio:1;border-radius:50%;background:radial-gradient(closest-side,color-mix(in srgb,var(--signal) 34%,transparent),transparent);pointer-events:none}
.sx-cyc{display:inline-flex;padding:5px;border-radius:999px;margin-top:30px}
.sx-cyc button{all:unset;cursor:pointer;padding:11px 18px;border-radius:999px;font:600 14px/1 var(--font-display);color:var(--ink-2);display:flex;gap:8px;align-items:center}
.sx-cyc button[aria-pressed="true"]{background:var(--ink);color:var(--paper)}
/* 25.10.2026 · SEG: Monatlich/Jaehrlich mit gleitendem Marker. */
.sx-cyc.gleiter{--gleit-pad:5px}
.sx-cyc.gleiter-mit button[aria-pressed="true"]{background:none}
.sx-cyc .sv{font:500 10px/1 var(--font-mono);letter-spacing:.08em;text-transform:uppercase;padding:4px 6px;border-radius:5px;background:var(--signal);color:var(--on-signal)}
.sx-plans{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin-top:40px;align-items:stretch}
.sx-plan{padding:28px 24px 24px;display:flex;flex-direction:column;gap:6px;position:relative}
.sx-plan.feat{border-color:var(--signal-tx);box-shadow:inset 0 1px 0 var(--glas-licht-innen),0 0 0 1px var(--signal-tx),var(--glas-schatten)}
.sx-plan .nm{font:800 22px/1 var(--font-display);letter-spacing:-.03em}
.sx-plan .why{font-size:14px;line-height:1.4;color:var(--ink-3);min-height:40px}
.sx-plan .pr{font:900 52px/1 var(--font-display);letter-spacing:-.05em;margin-top:14px}
.sx-plan .pr small{font:500 14px/1 var(--font-display);letter-spacing:0;color:var(--ink-3)}
.sx-plan ul{list-style:none;margin:20px 0;padding:18px 0 0;border-top:1px solid var(--hair);display:grid;gap:11px;flex:1;align-content:start}
.sx-plan li{font-size:14.5px;line-height:1.4;color:var(--ink-2);display:grid;grid-template-columns:16px 1fr;gap:10px}
.sx-plan li::before{content:"";width:6px;height:6px;margin-top:7px;border-radius:2px;background:var(--signal-tx)}
.sx-plan .badge{position:absolute;top:-11px;left:24px;font:600 10px/1 var(--font-mono);letter-spacing:.1em;text-transform:uppercase;padding:6px 9px;border-radius:6px;background:var(--signal);color:var(--on-signal)}
.sx-plan .pill{justify-content:center;width:100%}
/* 25.10.2026 · Nur am Handy sichtbar (assets/mobil.css): "Alle Leistungen" an den Preiskarten und die Tarif-Auswahl im Vergleich. */
.sx-mehr, .sx-tblm{display:none}
.sx-trust{display:flex;gap:10px 28px;flex-wrap:wrap;list-style:none;margin:28px 0 0;padding:0;font:500 12px/1 var(--font-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3)}
.sx-trust li::before{content:"";display:inline-block;width:7px;height:7px;border-radius:2px;background:var(--signal);margin-right:9px}
.sx-tbl{width:100%;border-collapse:separate;border-spacing:0;margin-top:32px}
.sx-tbl th,.sx-tbl td{padding:15px 14px;text-align:left;border-bottom:1px solid var(--hair);font-size:14.5px;line-height:1.35;vertical-align:top}
.sx-tbl thead th{position:sticky;top:var(--h-head-site);background:var(--paper);z-index:5;font:800 17px/1 var(--font-display);letter-spacing:-.02em;padding-block:18px}
.sx-tbl thead th.feat{color:var(--signal-tx)}
.sx-tbl tbody th{font-weight:600;color:var(--ink);width:26%}
.sx-tbl tr.grp th{font:500 11px/1 var(--font-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3);padding-top:34px;border-bottom-color:var(--ink)}
.sx-tbl td{color:var(--ink-2)}
.sx-tbl td.y{color:var(--ink)}
.sx-tbl td.y::before{content:"";display:inline-block;width:9px;height:9px;border-radius:3px;background:var(--signal);outline:1px solid color-mix(in srgb,var(--ink) 25%,transparent);margin-right:9px}
.sx-tbl td.n{color:var(--ink-3)}
.sx-tblwrap{overflow-x:auto}
.sx-faqgrid{display:grid;grid-template-columns:260px minmax(0,1fr);gap:clamp(24px,5vw,80px);align-items:start}
.sx-faqgrid aside{position:sticky;top:110px;display:grid;gap:18px}
.sx-faqgrid .cats{display:grid;gap:4px}
.sx-faqgrid .cats button{all:unset;cursor:pointer;display:flex;justify-content:space-between;padding:12px 14px;border-radius:12px;font:600 15px/1 var(--font-display);color:var(--ink-2)}
.sx-faqgrid .cats button:hover{background:var(--box);color:var(--ink)}
.sx-faqgrid .cats button[aria-pressed="true"]{background:var(--ink);color:var(--paper)}
.sx-faqgrid .cats button span{font:500 11px/1.2 var(--font-mono);opacity:.7}
.sx-search{position:relative}
.sx-search input{width:100%;box-sizing:border-box;font:500 16px/1 var(--font-display);padding:18px 20px 18px 50px;border-radius:999px;color:var(--ink);background:var(--glas-flaeche);border:1px solid var(--glas-kante-an);outline:0}
.sx-search input:focus{border-color:var(--ink)}
.sx-search svg{position:absolute;left:19px;top:50%;transform:translateY(-50%);width:18px;height:18px;stroke:var(--ink-3);fill:none;stroke-width:2}
.sx-q{border-bottom:1px solid var(--hair)}
.sx-q[hidden]{display:none}
.sx-q > button{all:unset;box-sizing:border-box;cursor:pointer;width:100%;display:grid;grid-template-columns:1fr 28px;gap:16px;padding:24px 0;font:700 clamp(18px,1.7vw,22px)/1.25 var(--font-display);letter-spacing:-.02em;color:var(--ink)}
.sx-q > button::after{content:"+";justify-self:end;width:28px;height:28px;border-radius:50%;border:1px solid var(--edge);display:grid;place-items:center;font:500 16px/1 var(--font-mono);color:var(--ink-2);transition:transform var(--t-state),background var(--t-state)}
.sx-q > button[aria-expanded="true"]::after{content:"–";background:var(--signal);color:var(--on-signal);border-color:transparent}
.sx-q .a{display:none;padding:0 44px 26px 0;max-width:68ch;color:var(--ink-2);font-size:16.5px;line-height:1.6}
.sx-q > button[aria-expanded="true"] + .a{display:block}
.sx-q .a a{color:var(--ink)}
.sx-help{padding:22px;display:grid;gap:10px}
.sx-help b{font:800 18px/1.15 var(--font-display);letter-spacing:-.02em}
.sx-help p{margin:0;font-size:14.5px;line-height:1.5;color:var(--ink-2)}
.sx-mani h1{max-width:12ch}
.sx-quote{padding:clamp(40px,6vw,88px);position:relative;overflow:hidden}
.sx-quote blockquote{margin:0;font:800 clamp(30px,4.3vw,62px)/1.1 var(--font-display);letter-spacing:-.037em;color:var(--ink);max-width:30ch}
.sx-quote blockquote mark{background:var(--signal);color:var(--on-signal);padding:0 .15em;border-radius:6px;-webkit-box-decoration-break:clone;box-decoration-break:clone}
.sx-quote cite{display:flex;align-items:center;gap:14px;margin-top:44px;font:500 14px/1.4 var(--font-mono);letter-spacing:.12em;text-transform:uppercase;font-style:normal;color:var(--ink-2)}
.sx-quote cite i{width:54px;height:54px;border-radius:50%;background:var(--ink);display:block;position:relative}
.sx-quote cite i::after{content:"";position:absolute;inset:17px;border-radius:4px;background:var(--signal)}
.sx-pr{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin-top:40px}
.sx-pr .sx-card{padding:30px 26px;display:grid;gap:14px;align-content:start;min-height:280px}
.sx-pr h3{font:800 clamp(22px,2vw,28px)/1.05 var(--font-display);letter-spacing:-.035em;margin:0}
.sx-pr p{margin:0;color:var(--ink-2);font-size:16px;line-height:1.55}
.sx-reise{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:clamp(32px,6vw,96px);align-items:start}
.sx-steps{list-style:none;margin:0;padding:0;display:grid}
.sx-steps li{display:grid;grid-template-columns:64px 1fr;gap:18px;padding:26px 0;border-top:1px solid var(--hair)}
.sx-steps li:last-child{border-bottom:1px solid var(--hair)}
.sx-steps .y{font:800 22px/1 var(--font-display);letter-spacing:-.03em}
.sx-steps b{display:block;font:700 18px/1.2 var(--font-display);letter-spacing:-.02em;margin-bottom:6px}
.sx-steps p{margin:0;font-size:15.5px;line-height:1.55;color:var(--ink-2)}
.sx-feat{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,5fr);overflow:hidden;text-decoration:none;color:inherit;border-bottom:0;margin-top:40px}
.sx-feat .tx{padding:clamp(28px,4vw,56px);display:grid;gap:18px;align-content:center}
.sx-feat h2{font:900 clamp(30px,3.6vw,52px)/.98 var(--font-display);letter-spacing:-.04em;margin:0}
.sx-feat p{margin:0;font-size:17px;line-height:1.55;color:var(--ink-2);max-width:48ch}
.sx-feat .im{min-height:340px;background:var(--ink);position:relative;overflow:hidden}
.sx-feat .im b{position:absolute;left:28px;bottom:26px;font:900 clamp(36px,4.4vw,66px)/.9 var(--font-display);letter-spacing:-.05em;color:var(--paper);max-width:8ch}
.sx-feat .im::before{content:"";position:absolute;right:-12%;top:-12%;width:70%;aspect-ratio:1;border-radius:50%;background:var(--signal)}
.sx-more{font:600 15px/1 var(--font-display);display:inline-flex;gap:8px;align-items:center;color:var(--ink);border-bottom:0}
.sx-art{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin-top:28px}
.sx-a{display:grid;grid-template-rows:auto 1fr;overflow:hidden;text-decoration:none;color:inherit;border-bottom:0;transition:transform var(--t-state)}
.sx-a:hover{transform:translateY(-4px)}
.sx-a[hidden]{display:none}
.sx-a .th{height:130px;position:relative;overflow:hidden;background:var(--box);border-bottom:1px solid var(--hair)}
.sx-a .th i{position:absolute;display:block}
.sx-a .bd{padding:22px 22px 24px;display:grid;gap:10px;align-content:start}
.sx-a h3{font:700 19px/1.2 var(--font-display);letter-spacing:-.02em;margin:0}
.sx-a p{margin:0;font-size:14.5px;line-height:1.5;color:var(--ink-2);display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.sx-dots{display:none}
@media (max-width:760px){
.sx-plans{display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;margin-inline:-16px;padding:14px 16px 6px;scroll-padding-inline:16px;-webkit-overflow-scrolling:touch}
.sx-plans::-webkit-scrollbar{display:none}
.sx-plans .sx-plan{flex:0 0 82%;scroll-snap-align:center}
.sx-dots{display:flex;gap:7px;justify-content:center;margin-top:14px}
.sx-dots i{width:7px;height:7px;border-radius:50%;background:var(--edge);transition:background .2s,width .2s}
.sx-dots i.on{background:var(--ink);width:20px;border-radius:4px}
}
@media (max-width:1100px){
.sx-plans{grid-template-columns:repeat(2,minmax(0,1fr))}
.sx-grid,.sx-art,.sx-pr{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:860px){
.sx-bereich,.sx-tut,.sx-faqgrid,.sx-reise,.sx-feat{grid-template-columns:1fr}
.sx-bereich.rev .sx-txt{order:0}
.sx-faqgrid aside,.sx-film{position:static}
.sx-faqgrid .cats{grid-auto-flow:column;overflow:auto;scrollbar-width:none}
.sx-faqgrid .cats button{white-space:nowrap;gap:8px}
}
@media (max-width:640px){
.sx-plans,.sx-grid,.sx-art,.sx-pr{grid-template-columns:1fr}
.sx-tbl{min-width:640px}
.sx-sub{top:calc(var(--h-head-site) + 4px)}
}
.sx-tbl thead th{background:var(--bone)}
.sx-cyc[hidden]{display:none}
.sx-split{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,7fr);gap:clamp(24px,5vw,80px);align-items:start}
@media (max-width:860px){.sx-split{grid-template-columns:1fr}}
/* FAQ-Zeilen: das Echt-Markup (.qa, assets/motion.js macht das exklusive Aufklappen), nur anders gezeichnet */
.sx-faq .qa{border-bottom:1px solid var(--hair)}
.sx-faq .qa[hidden]{display:none}
.sx-faq .qa > button{padding:24px 0;gap:16px;font:700 clamp(18px,1.7vw,22px)/1.25 var(--font-display);letter-spacing:-.02em;color:var(--ink)}
.sx-faq .qa > button::after{width:28px;height:28px;border-radius:50%;border:1px solid var(--edge);display:grid;place-items:center;font:500 16px/1 var(--font-mono);color:var(--ink-2);margin-left:auto;transition:background var(--t-state),color var(--t-state)}
.sx-faq .qa > button[aria-expanded="true"]::after{background:var(--signal);color:var(--on-signal);border-color:transparent}
.sx-faq .qa .a > div{padding:0 44px 26px 0;max-width:68ch}
.sx-faq .qa .a p{font-size:16.5px;line-height:1.6;color:var(--ink-2)}
.sx-faq .qa .a a{color:var(--ink)}
.sx-hero-seite[data-abschnitt]{display:block}

/* ══ Tarif-Farben auf der Preisseite (24.10.2026) ═══════════════════════════
   Dieselben Farben wie die Tarif-Plakette im Kontomenue der App: Free leise,
   Pro Limette-gruen, Studio dunkelgruen, Enterprise Titan-Grau. Sie sind ein
   AKZENT, keine neue Flaeche: die Karten bleiben Glas, der Tarif traegt Name
   als Plakette, Rand, Aufhellung oben, Aufzaehlungspunkte, Knopf und seine
   Spalte im Vergleich. Gesetzt wird alles ueber data-p am Element
   (free, pro, studio, enterprise), nichts haengt an der Reihenfolge.
   Dunkel ist der Standard (tokens.css), Hell kippt unten. Lichtstreifen und
   Heben nur bei Zeiger, mit prefers-reduced-motion nur die Farbe. */
.sx-plan[data-p],.sx-tbl [data-p]{
  --pl-bg:transparent;--pl-tx:var(--ink-2);--pl-ring:var(--hair);--pl-dot:var(--ink-3);--pl-glow:transparent;
  --pl-bul:var(--ink-3);--pl-wash:transparent;--pl-edge:var(--glas-kante);--pl-label:var(--ink-2);--pl-sweep:.6;--pl-bar:var(--hair)
}
.sx-plan[data-p="pro"],.sx-tbl [data-p="pro"]{
  --pl-bg:color-mix(in srgb,var(--signal) 34%,transparent);--pl-tx:var(--ink);--pl-ring:color-mix(in srgb,var(--signal) 80%,transparent);
  --pl-dot:color-mix(in srgb,var(--signal) 70%,#2c6a00);--pl-glow:color-mix(in srgb,var(--signal) 70%,transparent);
  --pl-bul:var(--signal-tx);--pl-wash:color-mix(in srgb,var(--signal) 13%,transparent);--pl-edge:var(--signal-tx);--pl-label:var(--signal-tx);--pl-sweep:.7;--pl-bar:var(--signal)
}
.sx-plan[data-p="studio"],.sx-tbl [data-p="studio"]{
  --pl-bg:linear-gradient(135deg,#113424 0%,#0c2a1e 55%,#09221a 100%);--pl-tx:#c9dec7;--pl-ring:rgba(130,190,155,.24);
  --pl-dot:#6dae84;--pl-glow:rgba(18,92,58,.38);--pl-bul:#5fa079;--pl-wash:rgba(20,90,55,.14);--pl-edge:rgba(130,190,155,.24);--pl-label:#7cb893;--pl-sweep:.2;--pl-bar:#2a6b49
}
.sx-plan[data-p="enterprise"],.sx-tbl [data-p="enterprise"]{
  --pl-bg:linear-gradient(115deg,#eef0f3 0%,#c3c7cd 18%,#8c9199 38%,#dfe2e6 52%,#a9aeb5 70%,#f1f3f5 86%,#b6bac0 100%);--pl-tx:#101216;--pl-ring:rgba(255,255,255,.55);
  --pl-dot:#2a2d31;--pl-glow:rgba(190,196,205,.5);--pl-bul:#aab0b8;--pl-wash:rgba(200,206,215,.07);--pl-edge:rgba(205,210,218,.34);--pl-label:#d5d9de;--pl-sweep:.85;--pl-bar:#c3c7cd
}
:root[data-theme="light"] .sx-plan[data-p="studio"],:root[data-theme="light"] .sx-tbl [data-p="studio"]{
  --pl-wash:rgba(15,64,40,.07);--pl-edge:rgba(18,56,38,.45);--pl-label:#123826;--pl-bul:#3f8a62
}
:root[data-theme="light"] .sx-plan[data-p="enterprise"],:root[data-theme="light"] .sx-tbl [data-p="enterprise"]{
  --pl-wash:rgba(120,126,134,.08);--pl-edge:rgba(120,126,134,.5);--pl-label:#4a4f57;--pl-bul:#7d838b
}

/* Karte */
.sx-plan[data-p]{
  border-color:var(--pl-edge);
  background-image:linear-gradient(180deg,var(--pl-wash),transparent 42%);
  transition:transform .28s cubic-bezier(.2,.8,.2,1),box-shadow .28s ease,border-color .28s ease
}
.sx-plan[data-p]:hover{
  transform:translateY(-3px);
  box-shadow:inset 0 1px 0 var(--glas-licht-innen),0 22px 44px -18px var(--pl-glow),0 0 0 1px var(--pl-edge)
}
.sx-plan.feat[data-p]{box-shadow:inset 0 1px 0 var(--glas-licht-innen),0 0 0 1px var(--signal-tx),0 18px 40px -22px var(--pl-glow)}
.sx-plan.feat[data-p]:hover{box-shadow:inset 0 1px 0 var(--glas-licht-innen),0 0 0 1px var(--signal-tx),0 26px 50px -18px var(--pl-glow)}

/* Name als Plakette (derselbe Text, nur gezeichnet) */
.sx-plan[data-p] .nm{
  align-self:flex-start;display:inline-flex;align-items:center;gap:7px;
  font:800 12px/1 var(--font-display);letter-spacing:.1em;text-transform:uppercase;
  padding:7px 12px 7px 10px;border-radius:999px;color:var(--pl-tx);background:var(--pl-bg);
  box-shadow:inset 0 0 0 1px var(--pl-ring),0 0 14px -4px var(--pl-glow)
}
.sx-plan[data-p] .nm::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--pl-dot)}
.sx-plan[data-p] .why{margin-top:8px}
.sx-plan[data-p] li::before{background:var(--pl-bul)}

/* "oder 69 € im Jahr": die Regel .plan .save in site.css greift hier nicht (die Karten heissen sx-plan) */
.sx-plan .save{
  display:block;width:100%;margin-top:6px;padding:0;border:0;background:none;
  font-family:inherit;font-size:13px;font-weight:600;line-height:1.4;color:var(--pl-label);text-align:left;cursor:pointer;
  text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px;
  text-decoration-color:color-mix(in srgb,var(--pl-label) 40%,transparent)
}
.sx-plan .save:hover{text-decoration-color:var(--pl-label)}
.sx-plan .save:focus-visible{outline:2px solid var(--pl-label);outline-offset:2px;border-radius:4px}
.sx-plan .save[disabled]{cursor:default;opacity:1;text-decoration:none}
.sx-plan .save[hidden],.sx-plan .save:empty{display:none}

/* Knoepfe (25.10.2026, Stefan): dieselbe Animation wie der Hero-Knopf, also Glaszustand mit Zeigerlicht, Prismenkante, Neigung und die Kante, die in
   der Ruhe um den Knopf laeuft. Sie kommt aus components.css, site.css und motion.js; hier steht nur der TON je Tarif, ueber Variablen auf dem Knopf (Liste bei
   den Pillen in components.css). Pro: Limette wie im Hero. Studio: tiefes Gruen mit Minzlicht. Enterprise: Platin, am edelsten, also duenner, langsamer und
   leiser, die gebuerstete Struktur bleibt auch im Glas. Der frueher hier liegende Lichtstreifen (::before) ist weg: zwei Bewegungen uebereinander waeren Unruhe.
   Die Ruhe-Regeln darunter (Farbe, Verlauf, Kante je Tarif) bleiben, nur der Zeigezustand kommt aus der gemeinsamen Quelle. */
.sx-plan[data-p] .pill{
  position:relative;isolation:isolate;
  transition:color 420ms cubic-bezier(.4,0,.2,1),border-color 420ms cubic-bezier(.4,0,.2,1),transform 350ms cubic-bezier(.2,.8,.2,1)
}
.sx-plan[data-p]:not([data-p="free"]) .pill:active{transform:scale(.98);transition-duration:.08s}
.sx-plan[data-p="pro"] .pill{
  color:#131313;border-color:transparent;
  background:linear-gradient(180deg,color-mix(in srgb,var(--signal) 82%,#fff) 0%,var(--signal) 55%,color-mix(in srgb,var(--signal) 88%,#3a8a00) 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.55),inset 0 0 0 1px color-mix(in srgb,#131313 16%,transparent),0 1px 2px rgba(19,19,19,.18)
}
.sx-plan[data-p="studio"] .pill{
  color:#0b251b;border-color:transparent;
  background:linear-gradient(180deg,#d5e6d1 0%,#b9d2b4 55%,#a2c19d 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.55),inset 0 0 0 1px rgba(5,33,26,.2),0 1px 2px rgba(0,0,0,.25)
}
/* Studio im Dunkel: die ganze Karte ist tiefes Gruen (sonst verschwindet der Akzent auf Anthrazit), im Hellen bleibt sie Glas mit gruenem Hauch */
.sx-plan[data-p="studio"]{
  background-image:linear-gradient(160deg,#0e2b1f 0%,#0b251b 55%,#091f18 100%)
}
:root[data-theme="light"] .sx-plan[data-p="studio"]{background-image:linear-gradient(180deg,var(--pl-wash),transparent 42%)}
/* Hell: das tiefe Gruen traegt den Knopf, im Dunkel traegt es die Karte und der Knopf ist hell */
:root[data-theme="light"] .sx-plan[data-p="studio"] .pill{
  color:#c9dec7;background:var(--pl-bg);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08),inset 0 0 0 1px rgba(130,190,155,.24),0 1px 2px rgba(0,0,0,.25)
}
.sx-plan[data-p="enterprise"] .pill{
  color:#101216;border-color:transparent;background:var(--pl-brush),var(--pl-bg);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.85),inset 0 -1px 0 rgba(0,0,0,.16),inset 0 0 0 1px rgba(255,255,255,.4),0 1px 2px rgba(0,0,0,.25)
}
/* Zeigezustand: Schrift, Kante und Schein kommen aus den Variablen des Knopfes (Standard wie im Hero). Die Kennung der Karte hebt die Spezifitaet ueber die Ruhe-Regeln. */
.sx-plan[data-p="pro"] .pill:hover,.sx-plan[data-p="studio"] .pill:hover,.sx-plan[data-p="enterprise"] .pill:hover,
:root[data-theme="light"] .sx-plan[data-p="studio"] .pill:hover{
  color:var(--pill-tx,var(--ink));
  border-color:color-mix(in srgb,var(--pill-farbe,var(--loud)) 70%,#fff);
  box-shadow:var(--pill-schein)
}
/* Pro: kein eigener Ton, es ist der Hero-Knopf in der Karte. */
/* Studio: tiefes Gruen als Glas, Minzlicht, die Kante zieht gruen-weiss-gelbgruen auf. */
.sx-plan[data-p="studio"] .pill{
  --pill-glas:color-mix(in srgb,#0b251b 78%,transparent);--pill-farbe:#74c39a;--pill-tx:#dcefdc;
  --ring-kuehl:rgba(130,220,180,.55);--ring-kern:rgba(236,252,240,.92);--ring-warm:rgba(205,238,150,.42)
}
.sx-plan[data-p="studio"] .pill::before{
  background:radial-gradient(110px circle at var(--licht-x,50%) var(--licht-y,50%),rgba(255,255,255,var(--pill-spot,.34)) 0%,rgba(255,255,255,.10) 42%,transparent 72%),var(--pill-glas)
}
/* Enterprise: Platin. Rauchiges Titanglas mit gebuersteter Struktur, ein leises Zeigerlicht, eine feine Kante (1 px statt 1,5), die doppelt so langsam laeuft,
   ein kuehles Silberlicht statt Farbschein und die helle Oberkante des Metalls bleibt auch beim Zeigen stehen. */
.sx-plan[data-p="enterprise"] .pill{
  --pill-glas:color-mix(in srgb,#14171b 82%,transparent);--pill-spot:.2;--pill-farbe:#cfd5dd;--pill-tx:#f4f6f8;
  --pill-schein:inset 0 1px 0 rgba(255,255,255,.4),
    calc(var(--rand-x) * 10px) calc(var(--rand-y) * 10px) 26px -6px color-mix(in srgb,var(--pill-farbe) 50%,transparent),
    0 0 12px color-mix(in srgb,var(--pill-farbe) 20%,transparent);
  --ring-dicke:1px;--ring-lauf:9s;
  --ring-kuehl:rgba(196,214,240,.7);--ring-kern:rgba(255,255,255,.98);--ring-warm:rgba(244,230,208,.55)
}
.sx-plan[data-p="enterprise"] .pill::before{
  background:repeating-linear-gradient(90deg,rgba(255,255,255,.05) 0 1px,transparent 1px 3px),radial-gradient(110px circle at var(--licht-x,50%) var(--licht-y,50%),rgba(255,255,255,var(--pill-spot)) 0%,rgba(255,255,255,.07) 42%,transparent 72%),var(--pill-glas)
}
/* Enterprise im Hellmodus: dunkles Titan auf der hellen Karte waere ein Bruch. Dort bleibt es helles, mattes Platin, mit dunkler Schrift, kuehler Kante und weichem Grauschein. */
:root[data-theme="light"] .sx-plan[data-p="enterprise"] .pill{
  --pill-glas:color-mix(in srgb,#d9dde2 78%,transparent);--pill-spot:.9;--pill-farbe:#7d848d;--pill-tx:#101216;
  --pill-schein:inset 0 1px 0 rgba(255,255,255,.9),
    calc(var(--rand-x) * 10px) calc(var(--rand-y) * 10px) 24px -6px color-mix(in srgb,var(--pill-farbe) 45%,transparent),
    0 0 10px color-mix(in srgb,var(--pill-farbe) 18%,transparent);
  --ring-kuehl:rgba(60,100,170,.5);--ring-kern:rgba(19,19,19,.38);--ring-warm:rgba(160,110,60,.4)
}
:root[data-theme="light"] .sx-plan[data-p="enterprise"] .pill::before{
  background:repeating-linear-gradient(90deg,rgba(0,0,0,.04) 0 1px,transparent 1px 3px),radial-gradient(110px circle at var(--licht-x,50%) var(--licht-y,50%),rgba(255,255,255,var(--pill-spot)) 0%,rgba(255,255,255,.35) 42%,transparent 74%),var(--pill-glas)
}
.sx-plan[data-p="free"] .pill:hover{background:color-mix(in srgb,var(--ink) 6%,transparent)}
.sx-plan[data-p] .pill:focus-visible{outline:2px solid var(--ink);outline-offset:3px}

/* Vergleich: Kopf mit Farbstrich und Punkt, Haken und Spaltenton je Tarif */
.sx-tbl thead th[data-p]{
  font:800 12px/1 var(--font-display);letter-spacing:.1em;text-transform:uppercase;color:var(--pl-label);
  box-shadow:inset 0 3px 0 var(--pl-bar)
}
.sx-tbl thead th[data-p]::before{content:"";display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--pl-dot);margin-right:8px;vertical-align:1px}
.sx-tbl td:nth-child(3){background:color-mix(in srgb,var(--signal) 5%,transparent)}
.sx-tbl td:nth-child(4){background:rgba(30,90,60,.06)}
.sx-tbl td:nth-child(5){background:rgba(150,155,162,.09)}
.sx-tbl tr.grp th{background:none}
.sx-tbl td.y:nth-child(2)::before{background:var(--ink-3)}
.sx-tbl td.y:nth-child(4)::before{background:#2a6b49;outline-color:rgba(130,190,155,.35)}
.sx-tbl td.y:nth-child(5)::before{background:linear-gradient(135deg,#f1f3f5,#9ea3aa)}
/* ══ Enterprise edel (24.10.2026) ═══════════════════════════════════════════
   Titan und Platin wie gebuerstetes Metall: feine senkrechte Striche, ein
   mehrstufiger Verlauf mit hellem Spiegelband, dazu ein Schimmer, der in
   Abstaenden ueber Plakette und Karte laeuft, und ein Preis in Metallschrift.
   Alles langsam und leise; mit prefers-reduced-motion steht es still. */
.sx-plan[data-p="enterprise"],.sx-tbl [data-p="enterprise"]{--pl-brush:repeating-linear-gradient(90deg,rgba(255,255,255,.12) 0 1px,transparent 1px 3px)}
@keyframes pl-schimmer{0%,55%{transform:translateX(-140%)}100%{transform:translateX(140%)}}
@keyframes pl-metall{0%,100%{background-position:100% 0}50%{background-position:0 0}}
.sx-plan[data-p="enterprise"]{
  position:relative;overflow:hidden;border-color:var(--pl-edge);
  background-image:linear-gradient(115deg,transparent 38%,rgba(255,255,255,.07) 50%,transparent 62%),linear-gradient(160deg,#272a2f 0%,#1b1d21 50%,#24272b 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.22),inset 0 0 0 1px rgba(255,255,255,.04),var(--glas-schatten)
}
:root[data-theme="light"] .sx-plan[data-p="enterprise"]{
  background-image:linear-gradient(115deg,transparent 36%,rgba(255,255,255,.9) 50%,transparent 64%),linear-gradient(160deg,#eceef1 0%,#dde0e4 48%,#eef0f2 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.95),inset 0 0 0 1px rgba(255,255,255,.5),var(--glas-schatten)
}
.sx-plan[data-p="enterprise"]:hover{box-shadow:inset 0 1px 0 rgba(255,255,255,.3),0 22px 46px -18px rgba(190,196,205,.45),0 0 0 1px var(--pl-edge)}
:root[data-theme="light"] .sx-plan[data-p="enterprise"]:hover{box-shadow:inset 0 1px 0 rgba(255,255,255,.95),0 22px 46px -18px rgba(90,96,106,.4),0 0 0 1px var(--pl-edge)}
.sx-plan[data-p="enterprise"]::after{
  content:"";position:absolute;inset:0;pointer-events:none;border-radius:inherit;
  background:linear-gradient(105deg,transparent 35%,rgba(255,255,255,.1) 50%,transparent 65%);
  transform:translateX(-140%);animation:pl-schimmer 8s ease-in-out infinite
}
:root[data-theme="light"] .sx-plan[data-p="enterprise"]::after{background:linear-gradient(105deg,transparent 35%,rgba(255,255,255,.7) 50%,transparent 65%)}
.sx-plan[data-p="enterprise"] .nm{
  position:relative;overflow:hidden;color:#101216;background:var(--pl-brush),var(--pl-bg);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.85),inset 0 -1px 0 rgba(0,0,0,.18),inset 0 0 0 1px rgba(255,255,255,.4),0 0 18px -4px rgba(190,196,205,.6)
}
.sx-plan[data-p="enterprise"] .nm::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(105deg,transparent 30%,rgba(255,255,255,.9) 50%,transparent 70%);
  transform:translateX(-140%);animation:pl-schimmer 5s ease-in-out infinite
}
.sx-plan[data-p="enterprise"] .pr{
  background:linear-gradient(100deg,#9aa0a8 0%,#eceef1 38%,#fff 50%,#c9cdd3 62%,#8f959d 100%);background-size:220% 100%;
  -webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent;animation:pl-metall 9s ease-in-out infinite
}
:root[data-theme="light"] .sx-plan[data-p="enterprise"] .pr{
  background-image:linear-gradient(100deg,#23262b 0%,#5a5f67 38%,#a0a6ae 50%,#4a4f57 62%,#23262b 100%)
}
@media (prefers-reduced-motion:reduce){
  .sx-plan[data-p],.sx-plan[data-p] .pill{transition:none}
  .sx-plan[data-p]:hover,.sx-plan[data-p]:not([data-p="free"]) .pill:active{transform:none}
  .sx-plan[data-p="enterprise"]::after,.sx-plan[data-p="enterprise"] .nm::after{animation:none;opacity:0}
  .sx-plan[data-p="enterprise"] .pr{animation:none;background-position:50% 0}
}