/* Letzte Cleaning Prüfung: 03.10.2026 */ /* Letztes Cleaning: - */ .factory-upgrade-view{display:grid;grid-template-columns:minmax(0,1fr);gap:16px;max-width:1180px;margin:0 auto;padding:2px 0 28px}.factory-upgrade-ad{position:relative;min-height:220px;overflow:hidden;border:1px solid #3b2935;border-radius:16px;background:#11131b url("../../images/contentfactory-upgrade-ad.png") center/cover no-repeat;box-shadow:0 18px 42px rgba(0,0,0,.2)}.factory-upgrade-ad:after{position:absolute;inset:0;background:linear-gradient(90deg,#101119 0%,rgba(16,17,25,.94) 27%,rgba(16,17,25,.32) 63%,rgba(16,17,25,.08));content:""}.factory-upgrade-ad-copy{position:relative;z-index:1;display:grid;align-content:center;max-width:460px;min-height:220px;padding:26px 32px}.factory-upgrade-ad-copy small,.factory-upgrade-pricing-head small,.factory-upgrade-credit-head small{color:#ff4965;font-size:9px;font-weight:850;letter-spacing:.15em}.factory-upgrade-ad-copy h3{margin:8px 0 8px;color:#fff;font-size:30px;line-height:1.04}.factory-upgrade-ad-copy h3 em{color:#ff4965;font-style:normal}.factory-upgrade-ad-copy p{max-width:420px;margin:0 0 12px;color:#c2c8d6;font-size:12px;line-height:1.45}.factory-upgrade-ad-copy>span{color:#62e3a2;font-size:11px;font-weight:700}.factory-upgrade-ad-copy>span i{margin-right:5px}.factory-upgrade-pricing{padding:18px;border:1px solid #2b3040;border-radius:16px;background:#11131b}.factory-upgrade-pricing-head{display:flex;align-items:center;justify-content:space-between;gap:18px;margin-bottom:14px}.factory-upgrade-pricing-head h3,.factory-upgrade-credit-head h3{margin:5px 0 0;color:#f4f5f8;font-size:19px}.factory-upgrade-cycle{display:grid;grid-template-columns:1fr 1fr;gap:3px;padding:3px;border-radius:9px;background:#0b0d13}.factory-upgrade-cycle button{position:relative;min-width:104px;padding:8px 9px;border:1px solid transparent;border-radius:7px;background:transparent;color:#929aaa;font:inherit;font-size:10px;font-weight:800;cursor:pointer}.factory-upgrade-cycle button.active{border-color:#377ff5;background:#1d2433;color:#fff}.factory-upgrade-cycle em{display:block;margin-top:2px;color:#62e3a2;font-size:8px;font-style:normal}.factory-upgrade-plans{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}.factory-upgrade-plan{display:grid;align-content:start;gap:6px;padding:14px;border:1px solid #303646;border-radius:12px;background:#171a23;color:#fff;text-align:left;cursor:pointer}.factory-upgrade-plan.active{border-color:#377ff5;box-shadow:0 0 0 1px rgba(55,127,245,.24)}.factory-upgrade-plan.featured{background:linear-gradient(160deg,rgba(255,48,79,.14),#171a23 52%)}.factory-upgrade-plan-top{display:flex;align-items:center;justify-content:space-between;gap:6px}.factory-upgrade-plan-top i{color:#ff4965;font-size:19px}.factory-upgrade-plan-top em{padding:3px 6px;border-radius:99px;background:rgba(255,48,79,.12);color:#ff7188;font-size:8px;font-style:normal;font-weight:800}.factory-upgrade-plan strong{font-size:15px}.factory-upgrade-plan p{min-height:27px;margin:0;color:#9199aa;font-size:10px;line-height:1.3}.factory-upgrade-plan>b{margin-top:2px;font-size:22px}.factory-upgrade-plan>b small{margin-left:3px;color:#929aaa;font-size:9px;font-weight:500}.factory-upgrade-plan ul{display:grid;gap:5px;margin:4px 0 0;padding:8px 0 0;border-top:1px solid #2b3040;list-style:none}.factory-upgrade-plan li{color:#b8c0cf;font-size:10px;line-height:1.2}.factory-upgrade-plan li i{margin-right:5px;color:#62e3a2}.factory-upgrade-summary{display:flex;align-items:center;justify-content:space-between;gap:18px;margin-top:14px;padding-top:14px;border-top:1px solid #2b3040}.factory-upgrade-summary>div{display:grid;gap:3px}.factory-upgrade-summary small{color:#8f98aa;font-size:9px;line-height:1.35}.factory-upgrade-summary small:first-child{color:#ff4965;font-weight:800;letter-spacing:.1em}.factory-upgrade-summary strong{font-size:13px}.factory-upgrade-summary span{color:#a4adbd;font-size:10px}.factory-upgrade-summary>b{white-space:nowrap;font-size:17px}.factory-upgrade-summary>b small{font-weight:500}.factory-upgrade-summary-note{color:#62e3a2!important;font-size:9px!important}.factory-upgrade-submit{display:flex;align-items:center;justify-content:center;gap:6px;padding:10px 14px;border:0;border-radius:9px;background:#ff304f;color:#fff;font:inherit;font-size:11px;font-weight:850;white-space:nowrap;cursor:pointer}.factory-upgrade-submit:disabled{opacity:.6;cursor:wait}.factory-upgrade-disclaimer{max-width:190px;color:#7f8799!important;text-align:center}.factory-upgrade-credit-box{padding:16px 18px;border:1px solid #2b3040;border-radius:16px;background:#11131b}.factory-upgrade-credit-head{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:11px}.factory-upgrade-credit-head>span{color:#a4adbd;font-size:10px}.factory-upgrade-credit-head>span i{color:#ffcf4a}.factory-upgrade-topups{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}.factory-upgrade-topup{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:4px 9px;padding:11px 12px;border:1px solid #2d3241;border-radius:10px;background:#171a23}.factory-upgrade-topup>div{display:grid;gap:3px}.factory-upgrade-topup strong{color:#f4f5f8;font-size:11px}.factory-upgrade-topup small{color:#8f98aa;font-size:9px;line-height:1.2}.factory-upgrade-topup>b{color:#f4f5f8;font-size:13px;white-space:nowrap}.factory-upgrade-topup>b small{font-size:8px}.factory-upgrade-topup button{grid-column:1/-1;padding:7px;border:1px solid #3a4050;border-radius:7px;background:#202430;color:#fff;font:inherit;font-size:10px;font-weight:800;cursor:pointer}.factory-upgrade-topup button:hover,.factory-upgrade-topup button.sent{border-color:#62e3a2;color:#62e3a2}.factory-upgrade-muted{margin:0;color:#8f98aa;font-size:10px}.factory-upgrade-loading,.factory-upgrade-error{display:grid;place-items:center;gap:10px;min-height:280px;color:#9da6b7;text-align:center}.factory-upgrade-loading i,.factory-upgrade-error>i{color:#ff4965;font-size:28px}.factory-upgrade-error h3{margin:0;color:#f4f5f8}.factory-upgrade-error p{margin:0}.factory-upgrade-success{display:grid;gap:5px;text-align:center}.factory-upgrade-success i{color:#62e3a2;font-size:25px}.factory-upgrade-success strong{color:#f4f5f8;font-size:13px}.factory-upgrade-success span{color:#9da6b7;font-size:10px}.factory-account-menu{position:fixed;z-index:150;top:70px;right:22px;display:grid;min-width:220px;padding:8px;border:1px solid #343949;border-radius:13px;background:#171a23;box-shadow:0 18px 45px rgba(0,0,0,.48)}.factory-account-head{display:grid;gap:3px;padding:10px 11px 12px;border-bottom:1px solid #2b3040}.factory-account-head span{color:#f1f3f8;font-size:12px;font-weight:800}.factory-account-head small{overflow:hidden;color:#9199aa;font-size:10px;text-overflow:ellipsis;white-space:nowrap}.factory-account-menu a,.factory-account-menu button{display:flex;align-items:center;gap:9px;padding:10px 11px;border:0;border-radius:8px;background:transparent;color:#cbd1dd;font:inherit;font-size:11px;text-align:left;text-decoration:none;cursor:pointer}.factory-account-menu a:hover,.factory-account-menu button:hover{background:rgba(255,48,79,.1);color:#fff}.factory-account-menu i{width:16px;color:#ff4965;text-align:center}@media(max-width:760px){.factory-upgrade-plans{grid-template-columns:1fr}.factory-upgrade-plan p{min-height:0}.factory-upgrade-pricing-head,.factory-upgrade-credit-head{align-items:flex-start;flex-direction:column}.factory-upgrade-cycle{width:100%}.factory-upgrade-cycle button{width:100%}.factory-upgrade-topups{grid-template-columns:1fr}.factory-upgrade-summary{align-items:stretch;flex-direction:column}.factory-upgrade-disclaimer{max-width:none}.factory-upgrade-submit{width:100%}}@media(max-width:520px){.factory-upgrade-ad-copy{padding:22px}.factory-upgrade-ad-copy h3{font-size:25px}.factory-upgrade-pricing,.factory-upgrade-credit-box{padding:14px}.factory-account-menu{top:58px;right:12px}} body.factory-upgrade-focus .factory-shell{filter:blur(6px);opacity:.42;transform:scale(1.008);transition:filter .28s ease,opacity .28s ease,transform .28s ease}body.factory-upgrade-focus .factory-workspace{background:rgba(3,5,10,.46)}body.factory-upgrade-focus .workspace-panel{box-shadow:0 28px 90px rgba(0,0,0,.62)}@media(max-width:700px){body.factory-upgrade-focus .factory-shell{filter:blur(4px);opacity:.3}} body.factory-upgrade-focus .factory-shell{filter:blur(7px);opacity:.32;transform:scale(1.006);transition:filter .28s ease,opacity .28s ease,transform .28s ease} body.factory-upgrade-focus .workspace-backdrop{background:rgba(3,5,10,.58);backdrop-filter:blur(5px)} body.factory-upgrade-focus .workspace-panel{width:min(1020px,calc(100vw - 42px));max-width:none;max-height:calc(100vh - 42px);overflow:auto;border:1px solid #353949;border-radius:24px;background:#151821;box-shadow:0 30px 100px rgba(0,0,0,.7)} body.factory-upgrade-focus .workspace-header{display:none} body.factory-upgrade-focus .workspace-body{padding:0} .factory-upgrade-view{grid-template-columns:minmax(0,1fr) minmax(390px,450px);gap:0;max-width:none;padding:0;background:#151821} .factory-upgrade-ad{min-height:700px;border:0;border-radius:24px 0 0 24px;background-position:center;background-size:cover} .factory-upgrade-ad:after{background:linear-gradient(180deg,rgba(8,10,15,.08),rgba(8,10,15,.25) 35%,#0b0d13 72%),linear-gradient(90deg,rgba(8,10,15,.08),transparent)} .factory-upgrade-ad-copy{align-content:end;max-width:440px;min-height:700px;padding:34px} .factory-upgrade-ad-copy h3{font-size:31px} .factory-upgrade-benefits{display:grid;gap:8px;margin-top:15px;color:#e3e7ef;font-size:11px;font-weight:700} .factory-upgrade-benefits i{margin-right:6px;color:#62e3a2} .factory-upgrade-checkout{align-self:stretch;padding:28px 26px;border:0;border-left:1px solid #292e3c;border-radius:0 24px 24px 0;background:#171a23;box-shadow:none} .factory-upgrade-checkout header{margin-bottom:20px} .factory-upgrade-checkout header h3{font-size:19px} .factory-upgrade-cycle{margin-bottom:16px} .factory-upgrade-cycle button{padding:11px 8px} .factory-upgrade-plans{grid-template-columns:1fr;gap:7px} .factory-upgrade-plan{grid-template-columns:minmax(0,1fr) auto;gap:3px 10px;padding:11px 12px} .factory-upgrade-plan-top{grid-column:1/-1} .factory-upgrade-plan strong{font-size:13px} .factory-upgrade-plan p{grid-column:1/-1;min-height:0;font-size:9px} .factory-upgrade-plan>b{grid-column:2;grid-row:2;font-size:17px} .factory-upgrade-plan ul{display:none} .factory-upgrade-summary{display:grid;grid-template-columns:1fr auto;gap:10px 12px;margin-top:16px;padding-top:16px} .factory-upgrade-summary>div:first-child{display:grid} .factory-upgrade-summary-note{grid-column:1/-1} .factory-upgrade-promo{display:flex;align-items:center;gap:7px;grid-column:1/-1;padding:9px 0;border-top:1px solid #2b3040;color:#4d91ff;font-size:10px} .factory-upgrade-promo i{font-size:15px} .factory-upgrade-due{display:flex;align-items:center;justify-content:space-between;grid-column:1/-1;color:#f4f5f8;font-size:12px} .factory-upgrade-due b{font-size:16px} .factory-payment-panel{display:grid;gap:7px;grid-column:1/-1;margin-top:2px} .factory-payment-title{color:#f4f5f8;font-size:11px;font-weight:800} /* Zahlungsart als Radiofelder (25.09.2026): gewaehlt = blauer Rahmen wie vorher die feste Kartenzeile; nicht freigeschaltet = ausgegraut. */ .factory-payment-choice{display:grid;grid-template-columns:auto auto 1fr;align-items:center;gap:9px;padding:9px 11px;border:1px solid #303646;border-radius:8px;background:#1a1d27;color:#dfe3ec;font-size:11px;cursor:pointer;transition:border-color .15s ease,background .15s ease} .factory-payment-choice:hover{border-color:#4a5368} .factory-payment-choice:has(input:checked){border-color:#377ff5;background:#1d2433;color:#fff} .factory-payment-choice:has(input:focus-visible){outline:2px solid #77a9ff;outline-offset:2px} .factory-payment-choice input{width:15px;height:15px;margin:0;accent-color:#377ff5;cursor:inherit} .factory-payment-choice i{color:#77a9ff;font-size:17px} .factory-payment-choice span{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:2px 10px;min-width:0} .factory-payment-choice b{font-weight:700} .factory-payment-choice em{color:#929aaa;font-size:9px;font-style:normal} .factory-payment-choice.is-unavailable{cursor:not-allowed;opacity:.55} .factory-payment-choice.is-unavailable i{color:#8b93a4} .factory-payment-note{grid-column:1/-1;color:#7f8799;font-size:9px;line-height:1.35} .factory-upgrade-submit{grid-column:1/-1;width:100%;padding:12px} .factory-upgrade-disclaimer{grid-column:1/-1;max-width:none} .factory-upgrade-credit-box{grid-column:1/-1;border:0;border-top:1px solid #2b3040;border-radius:0;padding:14px 26px;background:#11131b} @media(max-width:760px){body.factory-upgrade-focus .workspace-panel{width:calc(100vw - 20px);max-height:calc(100vh - 20px)}.factory-upgrade-view{grid-template-columns:1fr}.factory-upgrade-ad{min-height:230px;border-radius:20px 20px 0 0}.factory-upgrade-ad-copy{min-height:230px;padding:24px}.factory-upgrade-checkout{border-left:0;border-top:1px solid #292e3c;border-radius:0 0 20px 20px;padding:20px}.factory-upgrade-credit-box{padding:14px 20px}} .factory-nav a[data-factory-upgrade] .factory-upgrade-rocket{width:19px;height:19px;flex:none;fill:currentColor} /* "Upgrade" in Gold (AL-20261001-37): hebt sich als einziger Eintrag der Seitenleiste ab. Nur Schrift und Rakete sind gold - ohne Kasten (Betreiber 02.10.2026: "die goldene Box da weg"); Ueberfahren wie bei den anderen Eintraegen, kein Blinken. !important, weil Hover/Aktiv-Regeln mehrerer Dateien die Farbe setzen. Seit 03.10.2026 Metallic-Gold statt Gelb (AL-20261001-76, Betreiber: "zu gelb, soll mehr nach gold aussehen"): Glanz -> Altgold, Rakete #d4af37. */ .factory-sidebar .factory-nav a[data-factory-upgrade]{color:#d4af37!important} .factory-sidebar .factory-nav a[data-factory-upgrade] span{background:linear-gradient(90deg,#f3dfa2,#c9a24a 55%,#a8812e);-webkit-background-clip:text;background-clip:text;color:transparent!important;font-weight:700} .factory-sidebar .factory-nav a[data-factory-upgrade] .factory-upgrade-rocket{fill:#d4af37;filter:drop-shadow(0 0 5px rgba(212,175,55,.35))} .factory-sidebar .factory-nav a[data-factory-upgrade].active::before{background:#c9a24a!important;box-shadow:0 0 12px rgba(201,162,74,.5)!important} body.factory-upgrade-focus .workspace-panel{left:50%!important;right:auto!important;top:50%!important;bottom:auto!important;width:min(1020px,calc(100vw - 36px))!important;height:min(760px,calc(100vh - 30px))!important;transform:translate(-50%,-50%)!important} body.factory-upgrade-focus .factory-upgrade-view{height:100%;overflow:auto} body.factory-upgrade-focus .factory-upgrade-ad{min-height:480px} body.factory-upgrade-focus .factory-upgrade-ad-copy{min-height:480px;padding:26px} body.factory-upgrade-focus .factory-upgrade-ad-copy h3{font-size:27px} body.factory-upgrade-focus .factory-upgrade-checkout{padding:20px 18px} body.factory-upgrade-focus .factory-upgrade-checkout header{margin-bottom:12px} body.factory-upgrade-focus .factory-upgrade-cycle{margin-bottom:10px} body.factory-upgrade-focus .factory-upgrade-plan{padding:9px 10px} body.factory-upgrade-focus .factory-upgrade-plan-top i{font-size:16px} body.factory-upgrade-focus .factory-upgrade-plan strong{font-size:12px} body.factory-upgrade-focus .factory-upgrade-plan>b{font-size:15px} body.factory-upgrade-focus .factory-upgrade-summary{margin-top:10px;padding-top:10px;gap:7px 10px} body.factory-upgrade-focus .factory-upgrade-promo{padding:6px 0} body.factory-upgrade-focus .factory-payment-choice{padding:8px 9px} body.factory-upgrade-focus .factory-payment-note{font-size:8px} body.factory-upgrade-focus .factory-upgrade-submit{padding:10px} body.factory-upgrade-focus .factory-upgrade-credit-box{padding:11px 18px} body.factory-upgrade-focus .factory-upgrade-credit-head{margin-bottom:7px} body.factory-upgrade-focus .factory-upgrade-credit-head h3{font-size:15px} body.factory-upgrade-focus .factory-upgrade-topup{padding:8px 9px} body.factory-upgrade-focus .factory-upgrade-topup button{padding:5px} @media(max-width:760px){body.factory-upgrade-focus .workspace-panel{width:calc(100vw - 18px)!important;height:calc(100vh - 18px)!important}.factory-upgrade-ad,.factory-upgrade-ad-copy{min-height:210px!important}.factory-upgrade-view{height:auto}.factory-upgrade-checkout{padding:18px}.factory-upgrade-credit-box{padding:12px 18px!important}} body.factory-upgrade-focus .workspace-panel{width:min(960px,calc(100vw - 34px))!important;height:min(700px,calc(100vh - 26px))!important} body.factory-upgrade-focus .factory-upgrade-ad,body.factory-upgrade-focus .factory-upgrade-ad-copy{min-height:460px} body.factory-upgrade-focus .factory-upgrade-checkout{padding:18px 17px} body.factory-upgrade-focus .factory-upgrade-credit-box{display:none} /* Der Inhalt darf nicht höher werden als das Fenster: sonst wird die Zahlungsspalte abgeschnitten statt zu scrollen (vier Tarife, AL-20260929-22). */ body.factory-upgrade-focus .factory-workspace.open .workspace-panel .workspace-body{height:100%;min-height:0;overflow:hidden} /* Der gemeinsame Innenabstand (alignment.css, mit ID) lässt unten 76 px; hier sind 34 px gleichmäßig zum oberen Rand. */ body.factory-upgrade-focus.factory-page-active #workspace-body{padding-bottom:34px!important} .factory-upgrade-promo button{padding:0;border:0;background:transparent;color:#4d91ff;font:inherit;font-size:10px;cursor:pointer}.factory-promo-form{display:grid;grid-column:1/-1;gap:5px}.factory-promo-form>div{display:flex;gap:6px}.factory-promo-form input{min-width:0;flex:1;padding:8px 9px;border:1px solid #303646;border-radius:7px;background:#0f1219;color:#fff;font:inherit;font-size:10px;outline:none}.factory-promo-form input:focus{border-color:#377ff5}.factory-promo-form button{padding:8px 10px;border:1px solid #377ff5;border-radius:7px;background:#1d2433;color:#fff;font:inherit;font-size:10px;font-weight:800;cursor:pointer}.factory-promo-form small{color:#7f8799;font-size:8px}.factory-promo-form small.promo-error{color:#ff7188}.factory-promo-form small.promo-success{color:#62e3a2}.factory-upgrade-summary>b{display:flex;align-items:baseline;gap:5px}.factory-upgrade-summary>b del{color:#7f8799;font-size:10px;font-weight:500} body.factory-upgrade-focus .factory-workspace.open .workspace-panel{position:fixed!important;inset:50% auto auto 50%!important;width:min(980px,calc(100vw - 28px))!important;height:min(832px,calc(100vh - 24px))!important;max-width:none!important;max-height:none!important;transform:translate(-50%,-50%)!important;overflow:hidden!important;border:1px solid #303646!important;border-radius:22px!important} body.factory-upgrade-focus .factory-upgrade-view{grid-template-columns:1.06fr .94fr;grid-template-rows:minmax(0,1fr);height:100%;overflow:hidden} body.factory-upgrade-focus .factory-upgrade-ad{min-height:0;height:100%;border-radius:21px 0 0 21px;background-image:url("../../images/contentfactory-upgrade-ad.png");background-position:center;background-size:cover} body.factory-upgrade-focus .factory-upgrade-ad-copy{min-height:0;height:100%;padding:28px} body.factory-upgrade-focus .factory-upgrade-checkout{min-width:0;height:100%;overflow:auto;border-radius:0 21px 21px 0;padding:18px 16px} body.factory-upgrade-focus .factory-upgrade-credit-box{display:none} @media(max-width:760px){body.factory-upgrade-focus .factory-workspace.open .workspace-panel{width:calc(100vw - 16px)!important;height:calc(100vh - 16px)!important}.factory-upgrade-view{grid-template-columns:1fr!important;height:auto!important;overflow:auto!important}.factory-upgrade-ad{height:220px!important;min-height:220px!important;border-radius:20px 20px 0 0!important}.factory-upgrade-ad-copy{height:220px!important}.factory-upgrade-checkout{height:auto!important;border-radius:0 0 20px 20px!important}} body.factory-upgrade-focus .factory-upgrade-ad{position:relative;display:block;background-size:100% 54%;background-position:center top;background-repeat:no-repeat;background-color:#0b0d13} body.factory-upgrade-focus .factory-upgrade-ad:after{background:linear-gradient(180deg,rgba(8,10,15,.06) 0%,rgba(8,10,15,.08) 43%,#0b0d13 57%,#0b0d13 100%)} body.factory-upgrade-focus .factory-upgrade-ad-copy{position:absolute;inset:54% 0 0;display:grid;align-content:center;height:auto;min-height:0;padding:24px 28px} body.factory-upgrade-focus .factory-upgrade-ad-copy h3{margin:6px 0 8px;font-size:25px} body.factory-upgrade-focus .factory-upgrade-ad-copy p{max-width:390px;margin-bottom:10px;font-size:10px} body.factory-upgrade-focus .factory-upgrade-benefits{gap:6px;margin-top:8px;font-size:10px} body.factory-upgrade-focus .factory-upgrade-checkout{padding-top:16px} @media(max-width:760px){body.factory-upgrade-focus .factory-upgrade-ad{background-size:100% auto;background-position:center top}.factory-upgrade-ad:after{background:linear-gradient(180deg,rgba(8,10,15,.08),#0b0d13 72%)}body.factory-upgrade-focus .factory-upgrade-ad-copy{inset:48% 0 0;padding:20px}.factory-upgrade-ad-copy h3{font-size:23px}} body.factory-upgrade-focus .factory-upgrade-checkout{padding:13px 14px} body.factory-upgrade-focus .factory-upgrade-checkout>header{margin-bottom:8px} body.factory-upgrade-focus .factory-upgrade-checkout>header h3{margin-top:3px;font-size:17px} body.factory-upgrade-focus .factory-upgrade-cycle{margin-bottom:8px} body.factory-upgrade-focus .factory-upgrade-plan{gap:4px;padding:9px 10px} body.factory-upgrade-focus .factory-upgrade-plan p{min-height:0;font-size:9px} body.factory-upgrade-focus .factory-upgrade-summary{margin-top:8px;padding-top:8px} body.factory-upgrade-focus .factory-payment-note,body.factory-upgrade-focus .factory-upgrade-disclaimer{display:none} body.factory-upgrade-focus .factory-workspace.open .workspace-panel{ border:0!important; background:#151821!important; box-shadow:0 28px 90px rgba(0,0,0,.72),inset 0 2px 0 rgba(255,48,79,.78)!important } body.factory-upgrade-focus .factory-upgrade-ad{ background-size:100% auto!important; background-position:center top!important; background-repeat:no-repeat!important } body.factory-upgrade-focus .factory-upgrade-checkout{ position:relative; background:linear-gradient(180deg,rgba(255,48,79,.09),transparent 24%),#151821 } body.factory-upgrade-focus .factory-workspace.open .workspace-panel{ padding:0!important; background:linear-gradient(180deg,rgba(255,48,79,.05),transparent 22%),#0d1017!important } body.factory-upgrade-focus .workspace-backdrop{z-index:90!important;pointer-events:auto} body.factory-upgrade-focus .factory-workspace.open .workspace-panel{z-index:91!important} body.factory-upgrade-focus .factory-shell{pointer-events:none!important} body.factory-upgrade-focus .factory-workspace{pointer-events:auto!important} body.factory-upgrade-focus .factory-workspace.open .workspace-body, body.factory-upgrade-focus #workspace-body{ width:100%!important; max-width:none!important; margin:0!important; padding:0!important } body.factory-upgrade-focus .factory-upgrade-view{ width:100%!important; min-height:100%; margin:0!important; padding:0!important; gap:0!important; overflow:hidden!important; border-radius:22px; background:#0d1017 } body.factory-upgrade-focus .factory-upgrade-ad{border-radius:22px 0 0 22px!important} body.factory-upgrade-focus .factory-upgrade-checkout{ border-left:1px solid rgba(255,48,79,.2); border-radius:0 22px 22px 0!important } body.factory-upgrade-focus .factory-upgrade-checkout header small, body.factory-upgrade-focus .factory-upgrade-summary small:first-child{color:#ff4965} body.factory-credit-focus .factory-shell{filter:blur(7px);opacity:.32;transform:scale(1.006);transition:filter .28s ease,opacity .28s ease,transform .28s ease} body.factory-credit-focus .workspace-backdrop{z-index:90!important;background:rgba(3,5,10,.58);backdrop-filter:blur(6px);pointer-events:auto} body.factory-credit-focus .factory-shell{pointer-events:none!important} body.factory-credit-focus .factory-workspace{pointer-events:auto!important} body.factory-credit-focus .factory-workspace.open .workspace-panel{position:fixed!important;inset:50% auto auto 50%!important;width:min(500px,calc(100vw - 28px))!important;height:auto!important;max-height:calc(100vh - 28px)!important;overflow:auto!important;transform:translate(-50%,-50%)!important;border:1px solid rgba(255,48,79,.42)!important;border-radius:18px!important;background:#151821!important;box-shadow:0 28px 90px rgba(0,0,0,.72),inset 0 2px 0 rgba(255,48,79,.8)!important} body.factory-credit-focus .workspace-header{padding:18px 20px;background:linear-gradient(180deg,rgba(255,48,79,.1),rgba(21,24,33,.94));border-bottom:1px solid #2b3040} body.factory-credit-focus .workspace-header h2{font-size:21px} body.factory-credit-focus .workspace-body{padding:18px 20px 20px} .credit-purchase-view{display:grid;gap:14px}.credit-purchase-intro{display:grid;gap:4px}.credit-purchase-intro small{color:#ff4965;font-size:9px;font-weight:850;letter-spacing:.14em}.credit-purchase-intro h3{margin:0;color:#f4f5f8;font-size:18px}.credit-purchase-intro p{margin:0;color:#9da6b7;font-size:11px;line-height:1.4}.credit-purchase-balance{display:flex;align-items:center;justify-content:space-between;padding:10px 12px;border:1px solid #303646;border-radius:10px;background:#10131b}.credit-purchase-balance>span{color:#aeb6c5;font-size:10px}.credit-purchase-balance strong{color:#ffd15a;font-size:14px}.credit-purchase-grid{display:grid;gap:8px}.credit-purchase-pack{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:4px 12px;padding:12px;border:1px solid #303646;border-radius:11px;background:#191c26;text-align:left}.credit-purchase-pack.featured{border-color:#ff4965;background:linear-gradient(145deg,rgba(255,48,79,.13),#191c26 58%)}.credit-purchase-pack strong{color:#f4f5f8;font-size:13px}.credit-purchase-pack>b{color:#fff;font-size:15px;white-space:nowrap}.credit-purchase-pack p{grid-column:1/-1;margin:0;color:#9099aa;font-size:10px;line-height:1.35}.credit-purchase-pack button{grid-column:1/-1;margin-top:4px;padding:8px 10px;border:1px solid #3a4050;border-radius:8px;background:#202430;color:#fff;font:inherit;font-size:10px;font-weight:800;cursor:pointer}.credit-purchase-pack button:hover,.credit-purchase-pack button.sent{border-color:#ff4965;background:#ff304f;color:#fff}.credit-purchase-pack button:disabled{opacity:.65;cursor:wait}.credit-purchase-note{margin:0;color:#7f8799;font-size:9px;line-height:1.35}@media(max-width:520px){body.factory-credit-focus .workspace-header{padding:16px}.credit-purchase-view{gap:11px}.credit-purchase-pack{padding:10px}.credit-purchase-balance{padding:9px 10px}} .factory-sidebar-tool.active,.factory-sidebar-control.active{ position:relative; background:linear-gradient(90deg,rgba(255,35,71,.2),rgba(255,35,71,.03))!important; color:#fff!important; box-shadow:none!important } .factory-sidebar-tool.active::before,.factory-sidebar-control.active::before{ content:""; position:absolute; left:0; top:5px; bottom:5px; width:2px; border-radius:0 3px 3px 0; background:#ff2347 } .factory-sidebar-tool.active i,.factory-sidebar-control.active i{color:#ff304f!important} /* Credit package savings badge */ .credit-purchase-pack-title{display:flex;align-items:center;gap:7px;min-width:0} .credit-purchase-pack-title em{padding:3px 6px;border-radius:999px;background:rgba(98,227,162,.14);color:#62e3a2;font-size:9px;font-style:normal;font-weight:800;white-space:nowrap} .credit-purchase-pricing-note{display:flex;align-items:center;gap:11px;padding:11px 13px;border:1px solid rgba(255,48,79,.46);border-radius:12px;background:radial-gradient(circle at 8% 30%,rgba(255,48,79,.3),transparent 34%),linear-gradient(125deg,#241321,#171b27 70%);color:#b9c1d0;font-size:10px;line-height:1.4;box-shadow:0 10px 26px rgba(0,0,0,.2);transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease}.credit-purchase-pricing-note.is-free{cursor:pointer}.credit-purchase-pricing-note.is-free:hover,.credit-purchase-pricing-note.is-free:focus-visible{transform:translateY(-1px);border-color:#ff4965;box-shadow:0 12px 30px rgba(255,48,79,.18);outline:none}.credit-purchase-pricing-art{position:relative;display:grid;place-items:center;flex:0 0 48px;width:48px;height:48px;border-radius:14px;background:linear-gradient(145deg,#ff4965,#a8123a);color:#fff;box-shadow:0 7px 16px rgba(255,48,79,.28)}.credit-purchase-pricing-art i{font-size:22px}.credit-purchase-pricing-art b{position:absolute;right:-8px;top:-7px;padding:3px 5px;border-radius:6px;background:#ffd15a;color:#241a08;font-size:9px;line-height:1}.credit-purchase-pricing-note>span:last-child{display:grid;gap:2px;min-width:0}.credit-purchase-pricing-note strong{color:#fff;font-size:11px;letter-spacing:.01em}.credit-purchase-pricing-note small{color:#b9c1d0;font-size:10px}.credit-purchase-pricing-note em{color:#ff6b80;font-size:9px;font-style:normal;font-weight:800}.credit-purchase-pricing-note em i{font-size:10px} .credit-purchase-layout{display:grid;grid-template-columns:minmax(0,1fr) 230px;gap:16px;align-items:start}.credit-purchase-layout>.credit-purchase-pricing-note{margin-top:128px;align-self:start}.credit-purchase-layout>.credit-purchase-view{min-width:0}.credit-purchase-layout>.credit-purchase-pricing-note .credit-purchase-pricing-art{flex-basis:42px;width:42px;height:42px;border-radius:12px}.credit-purchase-layout>.credit-purchase-pricing-note{padding:12px}.credit-purchase-layout>.credit-purchase-pricing-note small{display:block;line-height:1.35}@media(max-width:760px){.credit-purchase-layout{grid-template-columns:1fr;gap:10px}.credit-purchase-layout>.credit-purchase-pricing-note{order:-1;margin-top:0}.credit-purchase-layout>.credit-purchase-view{order:1}} body.factory-credit-focus .credit-purchase-layout{display:block!important;position:relative!important}.credit-purchase-layout>.credit-purchase-pricing-note{position:absolute;z-index:20;right:-246px;top:178px;width:220px;margin:0!important;box-sizing:border-box}.credit-purchase-layout>.credit-purchase-view{display:grid!important}@media(max-width:1050px){.credit-purchase-layout>.credit-purchase-pricing-note{right:14px;top:84px;width:210px}}@media(max-width:760px){body.factory-credit-focus .credit-purchase-layout>.credit-purchase-pricing-note{position:relative;right:auto;top:auto;width:auto;margin:12px 16px 0!important}.credit-purchase-layout>.credit-purchase-view{display:grid!important}} body.factory-credit-focus .credit-purchase-layout>.credit-purchase-pricing-note{top:218px;width:238px;padding:14px;border-radius:14px;background:linear-gradient(145deg,#321427 0%,#1a1f2c 62%,#141821 100%);border-color:rgba(255,72,101,.82);box-shadow:0 16px 34px rgba(0,0,0,.34),inset 0 1px rgba(255,255,255,.06)}body.factory-credit-focus .credit-purchase-layout>.credit-purchase-pricing-note::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;background:linear-gradient(115deg,rgba(255,48,79,.14),transparent 42%)}body.factory-credit-focus .credit-purchase-layout>.credit-purchase-pricing-note .credit-purchase-pricing-art{flex-basis:46px;width:46px;height:46px;border-radius:13px;box-shadow:0 8px 20px rgba(255,48,79,.3)}body.factory-credit-focus .credit-purchase-layout>.credit-purchase-pricing-note>span:last-child{gap:3px;position:relative;z-index:1}.credit-purchase-pricing-kicker{color:#ff7188!important;font-size:8px!important;font-weight:850!important;letter-spacing:.13em;text-transform:uppercase}.credit-purchase-layout>.credit-purchase-pricing-note strong{font-size:12px;line-height:1.2}.credit-purchase-layout>.credit-purchase-pricing-note em{display:inline-flex;align-items:center;gap:3px;margin-top:3px;color:#fff;font-size:10px;padding:5px 8px;border-radius:7px;background:#ff304f;width:max-content;box-shadow:0 5px 12px rgba(255,48,79,.2)}@media(max-width:1050px){body.factory-credit-focus .credit-purchase-layout>.credit-purchase-pricing-note{top:128px}}@media(max-width:760px){body.factory-credit-focus .credit-purchase-layout>.credit-purchase-pricing-note{top:auto;width:auto}.credit-purchase-layout>.credit-purchase-pricing-note em{width:auto;justify-content:center}} @media(min-width:761px){body.factory-credit-focus .credit-purchase-layout>.credit-purchase-pricing-note{top:218px}} /* The subscription upsell should sit beside the package list as a compact, wide callout. */ @media(min-width:761px){ body.factory-credit-focus .credit-purchase-layout>.credit-purchase-pricing-note{ top:170px; right:-286px; width:280px; min-height:64px; box-sizing:border-box; padding:9px 12px; gap:10px; } body.factory-credit-focus .credit-purchase-layout>.credit-purchase-pricing-note .credit-purchase-pricing-art{ flex-basis:38px; width:38px; height:38px; border-radius:11px; } body.factory-credit-focus .credit-purchase-layout>.credit-purchase-pricing-note .credit-purchase-pricing-art i{font-size:18px} body.factory-credit-focus .credit-purchase-layout>.credit-purchase-pricing-note strong{font-size:11px;line-height:1.15} body.factory-credit-focus .credit-purchase-layout>.credit-purchase-pricing-note small{font-size:9px;line-height:1.25} body.factory-credit-focus .credit-purchase-layout>.credit-purchase-pricing-note em{margin-top:2px;padding:4px 7px;font-size:9px} } /* -------------------------------------------------------------------------- Abo-Werbebanner (.credit-upsell-ad) neben dem Credit-Checkout. Die Regeln oberhalb formen die alte kompakte Hinweiskarte und gelten weiter fuer den frueheren Status-Hinweis. Die Werbevariante ".is-free" wird hier komplett ueberschrieben: durchgaengige Markenflaeche, Rabatt-Sticker, Nutzenliste und eine echte CTA-Flaeche statt einer Formularzeile. Platzierung: Das Checkout-Panel ist fest auf min(980px, 100vw-28px) breit und min(720px, 100vh-24px) hoch, hat "overflow:visible" und traegt einen transform - "absolute" wirkt hier also gegen das Panel, nicht gegen den Viewport. Die Anzeige steht im freien Bereich rechts daneben. Der ist nur breit genug, wenn (100vw - 980) / 2 >= 14 + 300 + 14 gilt, also ab 1636px. Darunter wird die Anzeige ausgeblendet statt abgeschnitten: in die Checkout-Spalte kann sie nicht ausweichen, die ist per "overflow:hidden" bewusst nicht scrollbar. -------------------------------------------------------------------------- */ body.factory-credit-focus .credit-purchase-layout>.credit-purchase-pricing-note.credit-upsell-ad{ display:none; } @media(min-width:1660px){ body.factory-credit-focus .credit-purchase-layout>.credit-purchase-pricing-note.credit-upsell-ad{ position:absolute; top:50%; left:calc(100% + 14px); right:auto; z-index:2; display:grid; align-items:stretch; align-content:start; gap:0; width:300px; min-height:0; margin:0!important; padding:22px 20px 18px; box-sizing:border-box; border:0; border-radius:20px; font:inherit; font-size:12px; line-height:1.45; color:#fff; text-align:left; transform:translateY(-50%); background: radial-gradient(128% 62% at 14% -6%,rgba(255,255,255,.26),rgba(255,255,255,0) 60%), linear-gradient(157deg,#ff3f5c 0%,#e2103a 46%,#78091f 100%); box-shadow:0 28px 62px rgba(0,0,0,.48),0 16px 38px rgba(255,48,79,.24),inset 0 0 0 1px rgba(255,255,255,.12); -webkit-appearance:none; appearance:none; -webkit-tap-highlight-color:transparent; cursor:pointer; transition:transform .2s ease,box-shadow .2s ease; } body.factory-credit-focus .credit-purchase-layout>.credit-purchase-pricing-note.credit-upsell-ad::after{ content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none; background:linear-gradient(116deg,rgba(255,255,255,.18) 0%,rgba(255,255,255,0) 40%); } body.factory-credit-focus .credit-purchase-layout>.credit-purchase-pricing-note.credit-upsell-ad:hover, body.factory-credit-focus .credit-purchase-layout>.credit-purchase-pricing-note.credit-upsell-ad:focus-visible{ transform:translateY(-50%) translateY(-3px); box-shadow:0 34px 70px rgba(0,0,0,.52),0 20px 44px rgba(255,48,79,.34),inset 0 0 0 1px rgba(255,255,255,.22); outline:none; } } /* Grundzustand aller Bausteine; die spezifischen Regeln folgen darunter. */ .credit-upsell-ad .cu-slug, .credit-upsell-ad .cu-head, .credit-upsell-ad .cu-claim, .credit-upsell-ad .cu-list, .credit-upsell-ad .cu-cta, .credit-upsell-ad .cu-foot{position:relative;z-index:1;display:block;margin:0;font-style:normal} .credit-upsell-ad .cu-sticker{ position:absolute; top:-14px; right:-12px; z-index:3; display:grid; place-items:center; width:62px; height:62px; border-radius:50%; transform:rotate(-12deg); background:radial-gradient(circle at 34% 26%,#ffeaa3,#ffc93c 58%,#eda512); color:#3b2405; line-height:1; box-shadow:0 12px 22px rgba(0,0,0,.36); } .credit-upsell-ad .cu-sticker b{font-size:18px;font-weight:900;letter-spacing:-.02em;white-space:nowrap} .credit-upsell-ad .cu-sticker i{margin-top:3px;font-size:8px;font-style:normal;font-weight:800;letter-spacing:.14em;text-transform:uppercase;opacity:.82} .credit-upsell-ad .cu-slug{margin-bottom:14px;padding-right:56px;color:rgba(255,255,255,.72);font-size:9px;font-weight:800;letter-spacing:.2em;text-transform:uppercase} .credit-upsell-ad .cu-head{margin-bottom:10px;color:#fff;font-size:23px;font-weight:900;line-height:1.06;letter-spacing:-.02em} .credit-upsell-ad .cu-claim{margin-bottom:16px;color:rgba(255,255,255,.86);font-size:11px;line-height:1.5} .credit-upsell-ad .cu-list{display:grid;gap:7px;margin-bottom:18px} .credit-upsell-ad .cu-list>span{display:flex;align-items:flex-start;gap:7px;color:rgba(255,255,255,.94);font-size:10.5px;line-height:1.35} .credit-upsell-ad .cu-list i{flex:0 0 15px;display:grid;place-items:center;width:15px;height:15px;margin-top:1px;border-radius:50%;background:rgba(255,255,255,.2);color:#fff;font-size:9px} .credit-upsell-ad .cu-cta{ display:flex; align-items:center; justify-content:center; gap:7px; height:42px; border-radius:11px; background:#fff; color:#c40f33; font-size:12px; font-weight:900; box-shadow:0 10px 22px rgba(0,0,0,.26); } .credit-upsell-ad .cu-cta i{font-size:15px;transition:transform .2s ease} .credit-upsell-ad:hover .cu-cta i, .credit-upsell-ad:focus-visible .cu-cta i{transform:translateX(3px)} .credit-upsell-ad .cu-foot{margin-top:9px;color:rgba(255,255,255,.68);font-size:9.5px;text-align:center} @media(prefers-reduced-motion:reduce){ body.factory-credit-focus .credit-purchase-layout>.credit-purchase-pricing-note.credit-upsell-ad, .credit-upsell-ad .cu-cta i{transition:none} body.factory-credit-focus .credit-purchase-layout>.credit-purchase-pricing-note.credit-upsell-ad:hover{transform:translateY(-50%)} } /* Letzte Cleaning Prüfung: 03.10.2026 */ /* Letztes Cleaning: - */ /* Nur die innere Karte (Betreiber 30.09.2026): der äußere Rahmen des Fensters entfällt. Die Karte trägt jetzt selbst Rand, Rundung und Schatten; das Fenster ist so breit wie die Karte. */ body.factory-upgrade-focus .factory-workspace.open .workspace-panel{width:min(830px,calc(100vw - 28px))!important;height:min(830px,calc(100vh - 24px))!important;border:0!important;border-radius:0!important;background:transparent!important;box-shadow:none!important;overflow:visible!important} body.factory-upgrade-focus.factory-page-active #workspace-body{padding:0!important} body.factory-upgrade-focus .factory-workspace.open .workspace-panel .workspace-body{padding:0!important} body.factory-upgrade-focus .factory-upgrade-view{border:1px solid #303646;border-radius:22px;box-shadow:0 30px 100px rgba(0,0,0,.7)} body.factory-upgrade-focus .factory-upgrade-ad{border-radius:21px 0 0 21px} /* Jahresabo: durchgestrichener 12-Monats-Preis in der Tarifkarte und die Ersparnis unter der Auswahl (30.09.2026). */ .factory-upgrade-plan>b del{margin-right:6px;color:#8c94a6;font-size:11px;font-weight:500;text-decoration-thickness:1px} /* Statt der gruenen Sparbox eine ruhige Zeile unter "Deine Auswahl", in jeder Zahlweise vorhanden - die Hoehe springt beim Umschalten nicht (AL-20261001-52). */ .factory-upgrade-summary .factory-upgrade-hinweis{display:block;margin-top:3px;color:#8f98aa;font-size:11px;font-weight:500;line-height:1.4;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .factory-upgrade-summary .factory-upgrade-hinweis.ist-vorteil{color:#5adc96;font-weight:600} /* Abo-Fenster mit Tarifkarten in confacAI-Farben (01.10.2026, AL-20261001-02/-03/-05). Ersetzt die zweizeiligen Tarifzeilen vom 30.09.2026 (AL-20260929-40). Am PC: links die Bildspalte, rechts Kopf und Zahlweise, vier Karten nebeneinander (Studio und Studio Max als eine Karte mit Regler), darunter Zusammenfassung und Zahlung nebeneinander - ohne Scrollbalken. Tablet: ohne Bildspalte, Karten 2 x 2. Handy: alles untereinander, das ganze Fenster rollt bis zum Bestellknopf (vorher lag der Knopf unerreichbar unter dem Bildschirmrand). */ body.factory-upgrade-focus .abo-karten{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin:0} /* Alle Karten teilen ihre sieben Zeilen (Kopf, Text, Credit-Kasten, Preis, Knopf, Ersparnis, Vorteile) - Preise, Knoepfe und Listen fluchten. */ body.factory-upgrade-focus .abo-karte{position:relative;display:grid;grid-row:span 7;grid-template-rows:subgrid;align-content:start;gap:7px;min-width:0;padding:12px 13px 8px;border:1px solid #2b3040;border-radius:16px;background:linear-gradient(180deg,#1b1e28 0%,#111319 100%);color:#fff;cursor:pointer;transition:border-color .2s ease,box-shadow .2s ease} body.factory-upgrade-focus .abo-karte-basic{background:linear-gradient(180deg,rgba(255,73,101,.09) 0%,#12141b 62%)} body.factory-upgrade-focus .abo-karte-creator{border-color:rgba(255,48,79,.42);background:linear-gradient(180deg,rgba(255,48,79,.24) 0%,#16121a 66%)} body.factory-upgrade-focus .abo-karte-studio{border-color:rgba(255,48,79,.3);background:linear-gradient(180deg,rgba(150,22,66,.48) 0%,#170f17 70%)} body.factory-upgrade-focus .abo-karte:hover{border-color:rgba(255,73,101,.55)} body.factory-upgrade-focus .abo-karte.is-gewaehlt{border-color:#ff304f;box-shadow:0 0 0 1px #ff304f,0 12px 30px rgba(255,48,79,.18)} body.factory-upgrade-focus .abo-karte>header{display:flex;align-items:center;gap:6px;min-width:0} body.factory-upgrade-focus .abo-karte>header strong{flex:0 0 auto;font-size:15px;font-weight:900;line-height:1.1;letter-spacing:-.01em;text-transform:uppercase} body.factory-upgrade-focus .abo-karte>header em{min-width:0;overflow:hidden;padding:3px 7px;border-radius:99px;background:rgba(255,48,79,.16);color:#ff7d92;font-size:8.5px;font-style:normal;font-weight:800;text-overflow:ellipsis;white-space:nowrap} body.factory-upgrade-focus .abo-karte-creator>header em{background:#ff304f;color:#fff} body.factory-upgrade-focus .abo-karte-text{min-height:2.7em;margin:-3px 0 0;color:#9aa2b3;font-size:10px;line-height:1.35} body.factory-upgrade-focus .abo-karte-kasten{display:grid;align-content:start;gap:6px;padding:9px 10px;border:1px solid rgba(255,255,255,.06);border-radius:12px;background:rgba(255,255,255,.04)} body.factory-upgrade-focus .abo-karte-credits{display:flex;align-items:center;gap:6px;font-size:11.5px} body.factory-upgrade-focus .abo-karte-credits i{color:#ff4965;font-size:14px} body.factory-upgrade-focus .abo-karte-reichweite{display:grid;gap:2px;margin-top:-4px;padding-left:20px} body.factory-upgrade-focus .abo-karte-reichweite small{color:#9aa2b3;font-size:9.5px;line-height:1.35} body.factory-upgrade-focus .abo-karte-reichweite b{color:#e8ebf2;font-weight:700} body.factory-upgrade-focus .abo-karte-preis{display:flex;flex-wrap:wrap;align-items:baseline;align-self:end;gap:2px 6px;font-size:21px;font-weight:900;letter-spacing:-.02em;line-height:1.1} /* Jaehrlich bricht ein langer Preis (Streichpreis + Preis + "/Jahr") in zwei Zeilen um. Die Hoehe dafuer ist immer reserviert, der Preis sitzt unten - so springt das Fenster beim Umschalten nicht (AL-20261001-52). */ /* 38 px: Platz auch für den umbrechenden Jahrespreis (Studio Max: der durchgestrichene Preis steht in eigener Zeile) - sonst wurde das Fenster beim Wechsel auf Studio 50K ein Stück höher (WL16-15, 16.10.2026). */ body.factory-upgrade-focus .abo-karte-preis{min-height:38px;align-content:flex-end} body.factory-upgrade-focus .abo-karte-preis del{color:#ff4965;font-size:11px;font-weight:700;text-decoration-thickness:2px} body.factory-upgrade-focus .abo-karte-preis small{color:#8f98aa;font-size:9px;font-weight:500;letter-spacing:0} body.factory-upgrade-focus .abo-karte-knopf{display:flex;align-items:center;justify-content:center;gap:6px;width:100%;min-height:38px;padding:0 10px;border:0;border-radius:10px;background:#f4f5f8;color:#11131b;font:inherit;font-size:12px;font-weight:800;cursor:pointer;transition:background .2s ease,color .2s ease} body.factory-upgrade-focus .abo-karte.is-gewaehlt .abo-karte-knopf{background:linear-gradient(180deg,#ff4965,#ff304f);color:#fff;box-shadow:0 8px 20px rgba(255,48,79,.28)} body.factory-upgrade-focus .abo-karte-spar{min-height:1.4em;color:#9aa2b3;font-size:10px;text-align:center} /* Vorteilsliste unter Knopf und Ersparnis (AL-20261001-15). */ body.factory-upgrade-focus .abo-karte-vorteile{display:grid;align-content:start;gap:7px;margin:4px 0 2px;padding:10px 2px 0;border-top:1px solid rgba(255,255,255,.08);list-style:none} body.factory-upgrade-focus .abo-karte-vorteile li{display:flex;align-items:flex-start;gap:7px;color:#d3d8e3;font-size:10px;line-height:1.35} body.factory-upgrade-focus .abo-karte-vorteile i{flex:0 0 auto;margin-top:1px;color:#62e3a2;font-size:13px;line-height:1} /* Credit-Preis-Vorteil der Studio-Karte mit Schild (AL-20261001-17). */ body.factory-upgrade-focus .abo-karte-vorteile li.abo-vorteil-preis{flex-wrap:wrap;color:#fff;font-weight:700} /* Text neben dem Haken, das Schild darunter eingerueckt (Betreiber 01.10.2026: Text rutschte unter das Symbol). */ body.factory-upgrade-focus .abo-karte-vorteile li.abo-vorteil-preis>span{flex:1 1 calc(100% - 20px);min-width:0} body.factory-upgrade-focus .abo-karte-vorteile li.abo-vorteil-preis>em{margin-left:20px} body.factory-upgrade-focus .abo-karte-vorteile li.abo-vorteil-preis em{padding:2px 7px;border-radius:99px;background:#62e3a2;color:#0b1a12;font-size:9px;font-style:normal;font-weight:800;white-space:nowrap} /* Stufenregler der Studio-Karte: Schiene mit Griff, darunter die beiden Credit-Mengen. Der Griff gleitet. */ body.factory-upgrade-focus .abo-stufen{position:relative;display:block;height:34px} /* Ziehen (AL-20261001-53): der Griff folgt dem Zeiger ohne Nachlauf; waagrechtes Wischen bleibt beim Regler (senkrecht rollt die Seite weiter). */ body.factory-upgrade-focus .abo-stufen{cursor:grab;touch-action:pan-y;user-select:none} body.factory-upgrade-focus .abo-stufen.ist-gezogen{cursor:grabbing} body.factory-upgrade-focus .abo-stufen.ist-gezogen .abo-stufen-schiene>span,body.factory-upgrade-focus .abo-stufen.ist-gezogen .abo-stufen-schiene>i{transition:none} body.factory-upgrade-focus .abo-stufen-schiene{position:absolute;top:5px;left:8px;right:8px;height:4px;border-radius:99px;background:rgba(255,255,255,.16);pointer-events:none} body.factory-upgrade-focus .abo-stufen-schiene>span{position:absolute;inset:0 auto 0 0;width:calc(var(--abo-anteil,0) * 100%);border-radius:inherit;background:#ff304f;transition:width .25s cubic-bezier(.22,.61,.36,1)} body.factory-upgrade-focus .abo-stufen-schiene>i{position:absolute;top:50%;left:calc(var(--abo-anteil,0) * 100%);width:16px;height:16px;margin:-8px 0 0 -8px;border:3px solid #ff304f;border-radius:50%;background:#fff;box-shadow:0 2px 6px rgba(0,0,0,.45);transition:left .25s cubic-bezier(.22,.61,.36,1)} body.factory-upgrade-focus .abo-stufen>button{position:absolute;top:0;left:calc(8px + (100% - 16px) * var(--abo-pos, 0));transform:translateX(-50%);display:flex;align-items:center;gap:2px;margin:0;padding:16px 2px 2px;border:0;background:transparent;color:#8f98aa;font:inherit;font-size:13px;font-weight:800;white-space:nowrap;cursor:pointer} /* Beschriftung genau unter dem Haltepunkt; die aeusseren buendig mit dem Rand. */ body.factory-upgrade-focus .abo-stufen>button:first-of-type{left:0;transform:none} body.factory-upgrade-focus .abo-stufen>button:last-of-type{left:auto;right:0;transform:none} body.factory-upgrade-focus .abo-stufen>button[aria-checked="true"]{color:#fff} body.factory-upgrade-focus .abo-stufen>button i{font-size:14px} @media (prefers-reduced-motion: reduce){ body.factory-upgrade-focus .abo-stufen-schiene>span,body.factory-upgrade-focus .abo-stufen-schiene>i{transition:none} } /* Zusammenfassung und Zahlung nebeneinander unter den Karten. */ body.factory-upgrade-focus [data-upgrade-summary]{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-auto-flow:row dense;align-items:start;gap:6px 22px;padding-top:12px;border-top:1px solid #262a35} body.factory-upgrade-focus [data-upgrade-summary]>*{grid-column:1;min-width:0} body.factory-upgrade-focus [data-upgrade-summary]>.factory-upgrade-summary{margin:0!important;padding:0!important;border:0!important} /* Zahlungsart ueber den oberen zwei Zeilen, der Bestellknopf direkt darunter auf Hoehe von "Heute zu zahlen" (AL-20261001-51, Betreiber 02.10.2026: "der button unten rechts wieso hat der so einen grossen abstand oben"). Vorher spannte die Zahlungsart vier Zeilen und der Knopf rutschte in die fuenfte. */ body.factory-upgrade-focus [data-upgrade-summary]>.factory-payment-panel{grid-column:2;grid-row:1/span 2;margin:0} body.factory-upgrade-focus [data-upgrade-summary]>.factory-upgrade-submit{grid-column:2} body.factory-upgrade-focus [data-upgrade-summary]:has(>.factory-payment-panel)>.factory-upgrade-submit{grid-row:3;align-self:start} body.factory-upgrade-focus [data-upgrade-summary]>[hidden]{display:none!important} /* Free: Zahlweise-Umschalter und Zahlungsart bleiben als unsichtbare Platzhalter stehen, damit die Fensterhoehe beim Wechsel nicht springt (AL-20261003-18). Am Handy rollt das Fenster ohnehin - dort entfaellt der Platzhalter der Zahlungsart (Regel im Handy-Block). */ .factory-upgrade-cycle.ist-platzhalter,.factory-payment-panel.ist-platzhalter,.factory-kauf-recht.ist-platzhalter{visibility:hidden;pointer-events:none} /* PC: Bildspalte schmaler, Fenster breiter, Kopf und Zahlweise in einer Zeile. */ @media(min-width:1101px){ body.factory-upgrade-focus .factory-workspace.open .workspace-panel{width:min(1220px,calc(100vw - 28px))!important;height:auto!important;max-height:calc(100vh - 24px)!important} /* So hoch wie der Inhalt, hoechstens bildschirmhoch (Betreiber 01.10.2026: "so viel Hoehe muss es nicht benutzen, unten ist viel Platz"). */ body.factory-upgrade-focus .factory-workspace.open .workspace-panel .workspace-body,body.factory-upgrade-focus .factory-upgrade-view{height:auto!important;max-height:calc(100vh - 26px)} body.factory-upgrade-focus .factory-upgrade-checkout{height:auto!important;max-height:calc(100vh - 26px);overflow:auto} body.factory-upgrade-focus .factory-upgrade-view{grid-template-columns:300px minmax(0,1fr)!important} body.factory-upgrade-focus .factory-upgrade-ad-copy{inset:auto 0 0;align-content:end;padding:0 22px 24px} body.factory-upgrade-focus .factory-upgrade-ad-copy h3{font-size:23px} body.factory-upgrade-focus .factory-upgrade-checkout{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-auto-rows:min-content;align-content:start;gap:12px 16px;padding:14px 20px!important} body.factory-upgrade-focus .factory-upgrade-checkout>header{margin:0!important} body.factory-upgrade-focus .factory-upgrade-checkout>.factory-upgrade-cycle{align-self:center;margin:0!important;min-width:280px} body.factory-upgrade-focus .factory-upgrade-checkout>.abo-karten,body.factory-upgrade-focus .factory-upgrade-checkout>[data-upgrade-summary]{grid-column:1/-1} } /* Handy und Tablet: alles untereinander, das Fenster selbst rollt. */ @media(max-width:1100px){ body.factory-upgrade-focus .factory-workspace.open .workspace-panel{overflow-y:auto!important;overscroll-behavior:contain} body.factory-upgrade-focus .factory-workspace.open .workspace-panel .workspace-body{height:auto!important;min-height:0!important;overflow:visible!important} body.factory-upgrade-focus .factory-upgrade-view{display:block!important;height:auto!important;overflow:visible!important} body.factory-upgrade-focus .factory-upgrade-ad{height:auto!important;min-height:0!important;border-radius:20px 20px 0 0!important} body.factory-upgrade-focus .factory-upgrade-ad-copy{position:relative!important;inset:auto!important;height:auto!important;min-height:0!important;padding:170px 20px 20px!important} body.factory-upgrade-focus .factory-upgrade-checkout{height:auto!important;overflow:visible!important;padding:16px!important;border-radius:0 0 20px 20px!important} body.factory-upgrade-focus .abo-karten{grid-template-columns:minmax(0,1fr);margin:12px 0} body.factory-upgrade-focus .abo-karte-text,body.factory-upgrade-focus .abo-karte-kasten{min-height:0} body.factory-upgrade-focus [data-upgrade-summary]{grid-template-columns:minmax(0,1fr)} body.factory-upgrade-focus [data-upgrade-summary]>.factory-payment-panel,body.factory-upgrade-focus [data-upgrade-summary]>.factory-upgrade-submit{grid-column:1;grid-row:auto} /* Handy: Bestellknopf zuletzt, unter Zahlungsart (AL-20261003-08, Betreiber 03.10.2026: "Am Handy muesste der button ganz nach unten"). Die PC-Regel :has(>.factory-payment-panel) mit grid-row:3 war spezifischer als die Zeile darueber und setzte den Knopf zwischen "Heute zu zahlen" und Zahlungsart. */ body.factory-upgrade-focus [data-upgrade-summary]:has(>.factory-payment-panel)>.factory-upgrade-submit{grid-row:auto} /* "Heute zu zahlen" direkt ueber dem Knopf, die Zahlungsart davor - Betrag und Knopf stehen beieinander (Button-Loesung, § 312j BGB). */ body.factory-upgrade-focus [data-upgrade-summary]:has(>.factory-payment-panel)>.factory-upgrade-due{order:1} body.factory-upgrade-focus [data-upgrade-summary]:has(>.factory-payment-panel)>:is(.factory-upgrade-submit,.factory-upgrade-disclaimer){order:2} /* Ersparnis-Zeile bricht um statt "du sparst 258,0..." (AL-20261003-09). */ body.factory-upgrade-focus .factory-upgrade-summary .factory-upgrade-hinweis{white-space:normal;overflow:visible;text-overflow:clip} body.factory-upgrade-focus [data-upgrade-summary]>:is(.factory-payment-panel,.factory-kauf-recht).ist-platzhalter{display:none} } body.factory-upgrade-focus .factory-upgrade-ad-note{display:flex;align-items:flex-start;gap:6px;max-width:390px;margin:14px 0 0;color:#8f98aa;font-size:10px;line-height:1.45} body.factory-upgrade-focus .factory-upgrade-ad-note i{color:#62e3a2;font-size:13px;line-height:1} /* Mobile Karten bleiben von der Tarifauswahl unabh?ngig: Wischen bestellt nichts. */ .abo-seiten{display:none} @media(max-width:1100px){ body.factory-upgrade-focus .abo-karten{display:flex;gap:12px;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;scroll-padding-inline:7.5%;overscroll-behavior-x:contain;padding:2px 7.5% 10px;margin:12px -16px 0;scrollbar-width:none} body.factory-upgrade-focus .abo-karten::-webkit-scrollbar{display:none} body.factory-upgrade-focus .abo-karten>.abo-karte{flex:0 0 100%;min-width:0;grid-row:auto;grid-template-rows:repeat(7,auto);scroll-snap-align:center;scroll-snap-stop:always} body.factory-upgrade-focus .abo-stufen{touch-action:pan-y} body.factory-upgrade-focus .abo-seiten{display:flex;justify-content:center;gap:4px;margin:2px 0 12px} .abo-seiten button{display:grid;place-items:center;width:32px;height:32px;border:0;background:transparent;cursor:pointer} .abo-seiten button::after{content:"";width:8px;height:8px;border-radius:50%;background:#687080} .abo-seiten button[aria-current="true"]::after{background:#ff4965} .abo-seiten button:focus-visible,.abo-karten:focus-visible{outline:2px solid #ff4965;outline-offset:2px} } /* Tablet (MOB19-34, Betreiber 19.10.2026, iPad 6 quer: „da fehlt das bild oben. die angebote sind nebeneinander bzw. untereinander. und kann gar nicht geswiped werden"): wie am Handy – Bild oben, alles untereinander, Tarife als Wischreihe mit Punkten (die Handy-Blöcke darüber gelten bis 1100 px). Hier stehen zwei Karten nebeneinander, die dritte schaut an; das Bild steht rechts, der Text links davor. Löst die 2 × 2-Fassung aus MOB19-12 ab. */ @media(min-width:761px) and (max-width:1100px){ body.factory-upgrade-focus .factory-workspace.open .workspace-panel{width:calc(100vw - 28px)!important} body.factory-upgrade-focus #factory-workspace .factory-upgrade-view>.factory-upgrade-ad{background-size:auto 100%!important;background-position:right center!important;min-height:0!important} body.factory-upgrade-focus .factory-upgrade-view>.factory-upgrade-ad:after{background:linear-gradient(90deg,#0b0d13 0%,#0b0d13 38%,rgba(11,13,19,.55) 62%,rgba(11,13,19,.1) 100%)!important} body.factory-upgrade-focus .factory-upgrade-ad-copy{padding:28px 24px!important;max-width:520px} body.factory-upgrade-focus .abo-karten>.abo-karte{flex:0 0 calc(50% - 6px)} body.factory-upgrade-focus .abo-karten{scroll-padding-inline:16px;padding:2px 16px 10px} } /* Absicherung AL-20261003-17: Tarifansicht und Credit-Kauf sind ohne ihre Fokusklasse ungestaltet (Fliesstext, graue Standardknoepfe). Bleibt ihr Inhalt nach Zurueck, Kreuz oder Werkzeugwechsel im Fenster stehen, wird er ausgeblendet statt ungestaltet gezeigt. Die Ladeanzeige teilen sich beide. */ body:not(.factory-upgrade-focus) #workspace-body .factory-upgrade-view, body:not(.factory-credit-focus) #workspace-body .credit-purchase-view, body:not(.factory-upgrade-focus):not(.factory-credit-focus) #workspace-body .factory-upgrade-loading{display:none!important} /* Pflichtangaben vor dem Bestellknopf (AL-20261012-02): Steuerhinweis, Zustimmung zum sofortigen Beginn und Verweis auf Bedingungen. Steht unmittelbar über dem Knopf. */ .factory-kauf-recht{display:grid;gap:6px;margin:4px 0 2px} .factory-kauf-steuer,.factory-kauf-bedingungen{margin:0;color:#8f98aa;font-size:10px;line-height:1.45} .factory-kauf-bedingungen a{color:#c9cfdb;text-decoration:underline} /* WL-03 (12.10.2026): ohne eigenen Rahmen - der Kasten sprengte die Aufteilung der Karte. Der Wortlaut bleibt vollständig sichtbar (ausdrückliche Zustimmung). */ .factory-kauf-zustimmung{display:flex;align-items:flex-start;gap:8px;padding:0;border:0;border-radius:0;background:none;color:#c3c9d5;font-size:10px;font-weight:400;line-height:1.45;cursor:pointer} .factory-kauf-zustimmung input{flex:0 0 auto;width:15px;height:15px;margin:1px 0 0;accent-color:#ff3154;cursor:pointer} .factory-kauf-zustimmung.ist-markiert{color:#ff8a9c} .factory-kauf-zustimmung.ist-markiert input{outline:2px solid #ff3154;outline-offset:2px} [data-upgrade-submit][disabled],[data-credit-checkout-submit][disabled]{opacity:.45;cursor:not-allowed} /* Am PC steht der Block links unter "Heute zu zahlen", auf gleicher Höhe wie der Bestellknopf rechts - dort war bisher freie Fläche, rechts wuchs die Spalte. */ body.factory-upgrade-focus [data-upgrade-summary]>.factory-kauf-recht{grid-column:1;grid-row:3;margin-top:6px} body.factory-upgrade-focus [data-upgrade-summary]:has(>.factory-kauf-recht)>.factory-upgrade-submit{grid-row:3;align-self:end} @media(max-width:1100px){ body.factory-upgrade-focus [data-upgrade-summary]>.factory-kauf-recht{grid-column:1;grid-row:auto;order:1} body.factory-upgrade-focus [data-upgrade-summary]:has(>.factory-kauf-recht)>.factory-upgrade-submit{grid-row:auto} } /* Abo-Kasse am PC: Bild links größer, damit unter ihm keine große Fläche bleibt (WL16-15, Betreiber 16.10.2026: „unter dem Bild ist zu viel Abstand, bitte das Bild größer machen“). Das quadratische Bild füllt 58 % der Spaltenhöhe bis kurz über „Mehr schaffen.“ – als Ausschnitt (seitlich beschnitten), nicht gestreckt; der Übergang ins Dunkle rückt mit. */ @media (min-width: 761px) { body.factory-upgrade-focus .factory-upgrade-view > .factory-upgrade-ad { background-position: center top !important; background-size: auto 58% !important; } body.factory-upgrade-focus .factory-upgrade-view > .factory-upgrade-ad:after { background: linear-gradient(180deg, rgba(8,10,15,.06) 0%, rgba(8,10,15,.08) 46%, #0b0d13 59%, #0b0d13 100%); } } /* MOB20-01: Am Tablet steht der gemeinsame Checkout-Kopf vor dem Bild. */ @media(min-width:761px) and (max-width:1100px){ body.factory-upgrade-focus .factory-upgrade-view>.factory-upgrade-kopf{display:block;margin:0;padding:16px 24px;background:#17131c;border-bottom:1px solid #352936;border-radius:20px 20px 0 0} body.factory-upgrade-focus .factory-upgrade-view>.factory-upgrade-kopf small{color:#ff4965;font-size:10px} body.factory-upgrade-focus .factory-upgrade-view>.factory-upgrade-kopf h3{margin:5px 0 0;color:#f4f5f8;font-size:19px} body.factory-upgrade-focus .factory-upgrade-view>.factory-upgrade-ad{border-radius:0!important} } /* MOB19-34, Nachtrag 20.10.: Drei vollstaendige Tarife im Tablet-Querformat. */ @media(min-width:761px) and (max-width:1100px) and (orientation:landscape){ body.factory-upgrade-focus .abo-karten>.abo-karte{flex-basis:calc((100% - 24px) / 3)} }