/* modernhosting: ausschliesslich die drei oeffentlichen Bestellrouten. */ @font-face { font-family: 'Rajdhani'; font-style: normal; font-weight: 600; font-display: swap; src: url('../fonts/rajdhani-600-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Rajdhani'; font-style: normal; font-weight: 600; font-display: swap; src: url('../fonts/rajdhani-600-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: 'Rajdhani'; font-style: normal; font-weight: 700; font-display: swap; src: url('../fonts/rajdhani-700-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Rajdhani'; font-style: normal; font-weight: 700; font-display: swap; src: url('../fonts/rajdhani-700-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } /* Scope bewusst ausgeschrieben: keine Auswirkungen auf Login oder Admin-Bestellungen. !important wird nur zum Ueberschreiben vorhandener Layout-Resets verwendet. */ :root body:is([data-route="order"], [data-route="order-success"], [data-route="order-cancel"]) { color-scheme: dark; --bg: #070a13; --surface: #0d1322; --surface-2: #121b2d; --text: #eef3ff; --text-dim: #a6b2ca; --border: #54627d; --hairline: #ffffff2e; --accent: #69e1f5; --accent-strong: #9af5d4; --success: #9af5d4; --warning: #f4d28b; --danger: #ffb2c0; --pending: #c4b7ff; --info: #69e1f5; --neutral-status: #a6b2ca; --order-violet: #a492ff; --order-indigo: #6550db; --order-gradient: linear-gradient(105deg, #a492ff, #69e1f5 65%, #9af5d4); --radius: 16px; padding: 40px 24px; font-family: 'Inter', sans-serif; line-height: 1.65; background: #070a13 !important; background-image: radial-gradient(1px 1px at 24px 44px, #a6b2ca 90%, transparent), radial-gradient(1px 1px at 96px 128px, #69e1f580 90%, transparent), radial-gradient(ellipse at 5% 8%, #6550db30, transparent 48%), radial-gradient(ellipse at 96% 32%, #47ceeb18, transparent 48%) !important; background-size: 177px 213px, 263px 307px, 100% 100%, 100% 100%; } :root body:is([data-route="order"], [data-route="order-success"], [data-route="order-cancel"]) .auth-shell { width: min(100%, 980px); min-width: 0; perspective: none; } :root body:is([data-route="order"], [data-route="order-success"], [data-route="order-cancel"]) .auth-card { padding: clamp(20px, 4vw, 48px); overflow: visible; border: 1px solid #a492ff52 !important; border-radius: 24px !important; background: var(--surface) !important; box-shadow: 0 24px 90px #00000055, 0 0 80px #6550db12 !important; transform: none; } @supports (backdrop-filter: blur(16px)) { :root body:is([data-route="order"], [data-route="order-success"], [data-route="order-cancel"]) .auth-card { background: #111a2be8 !important; backdrop-filter: blur(16px) !important; -webkit-backdrop-filter: blur(16px) !important; } } :root body:is([data-route="order"], [data-route="order-success"], [data-route="order-cancel"]) .auth-brand { display: none; } :root body:is([data-route="order"], [data-route="order-success"], [data-route="order-cancel"]) .order-brand { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; } :root body:is([data-route="order"], [data-route="order-success"], [data-route="order-cancel"]) .order-brand img { flex: 0 0 36px; width: 36px; height: auto; } :root body:is([data-route="order"], [data-route="order-success"], [data-route="order-cancel"]) .order-brand strong { display: block; font: 700 28px/1.1 'Rajdhani', sans-serif; letter-spacing: -.035em; color: var(--text); } :root body:is([data-route="order"], [data-route="order-success"], [data-route="order-cancel"]) .order-brand span { display: block; margin-top: 5px; color: var(--text-dim); font-size: 12px; } :root body:is([data-route="order"], [data-route="order-success"], [data-route="order-cancel"]) .order-hero { display: grid; grid-template-columns: minmax(0, 1fr) 250px; align-items: center; gap: 24px; margin: 16px 0 24px; } :root body:is([data-route="order"], [data-route="order-success"], [data-route="order-cancel"]) .order-hero-copy { grid-column: 1; grid-row: 1; min-width: 0; } :root body:is([data-route="order"], [data-route="order-success"], [data-route="order-cancel"]) .order-eyebrow { margin: 0 0 10px; font: 500 11px/1.8 'JetBrains Mono', monospace; letter-spacing: .1em; text-transform: uppercase; color: var(--accent); } :root body:is([data-route="order"], [data-route="order-success"], [data-route="order-cancel"]) .auth-card h1 { margin: 0 0 16px; font: 700 clamp(36px, 4.8vw, 54px)/1.05 'Rajdhani', sans-serif; letter-spacing: -.035em; color: var(--text) !important; text-shadow: none; } @supports (background-clip: text) { :root body:is([data-route="order"], [data-route="order-success"], [data-route="order-cancel"]) .auth-card h1 { background: var(--order-gradient); background-clip: text; color: transparent !important; } } :root body:is([data-route="order"], [data-route="order-success"], [data-route="order-cancel"]) .auth-card h2 { margin-top: 28px; font: 600 28px/1.2 'Rajdhani', sans-serif; color: var(--text); } :root body:is([data-route="order"], [data-route="order-success"], [data-route="order-cancel"]) .order-intro { margin: 0; color: var(--text-dim); font-size: 14px; max-width: 52ch; } :root body:is([data-route="order"], [data-route="order-success"], [data-route="order-cancel"]) .order-brand-note { margin: 0 0 8px; font-size: 12px; font-weight: 500; color: var(--text-dim); } :root body:is([data-route="order"], [data-route="order-success"], [data-route="order-cancel"]) .auth-note { margin: 0 0 28px; padding-bottom: 24px; border-bottom: 1px solid var(--hairline); font-size: 14px; font-weight: 400; color: var(--text-dim); } :root body:is([data-route="order"], [data-route="order-success"], [data-route="order-cancel"]) .order-form { gap: 20px; } :root body:is([data-route="order"], [data-route="order-success"], [data-route="order-cancel"]) .plan-choice { grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr)); gap: 14px; margin-bottom: 0; } :root body:is([data-route="order"], [data-route="order-success"], [data-route="order-cancel"]) .plan-choice legend { margin-bottom: 12px; font: 600 23px/1.3 'Rajdhani', sans-serif; color: var(--text); } :root body:is([data-route="order"], [data-route="order-success"], [data-route="order-cancel"]) .plan-card { align-content: start; padding: 20px 18px 20px 48px; border-color: #54627d; border-radius: 16px; background: #0d1322; transition: border-color .2s, box-shadow .2s; } :root body:is([data-route="order"], [data-route="order-success"], [data-route="order-cancel"]) .plan-card:hover { border-color: var(--order-violet); } :root body:is([data-route="order"], [data-route="order-success"], [data-route="order-cancel"]) .plan-card:has(input:checked) { border-color: var(--accent); background: linear-gradient(135deg, #6550db24, #69e1f509), #0d1322; box-shadow: inset 0 0 0 1px #69e1f54d, 0 0 26px #6550db30; } :root body:is([data-route="order"], [data-route="order-success"], [data-route="order-cancel"]) .form .plan-card input[type="radio"] { top: 24px; min-height: 18px; accent-color: var(--accent); box-shadow: none; } :root body:is([data-route="order"], [data-route="order-success"], [data-route="order-cancel"]) .plan-name { font-size: 16px; color: var(--text); } :root body:is([data-route="order"], [data-route="order-success"], [data-route="order-cancel"]) .plan-desc { line-height: 1.65; color: #bdc8dc; } :root body:is([data-route="order"], [data-route="order-success"], [data-route="order-cancel"]) .plan-price { color: var(--text); } :root body:is([data-route="order"], [data-route="order-success"], [data-route="order-cancel"]) .plan-price-year { color: var(--accent-strong); } /* Schriftgroessen der Monats-/Jahrespreise bleiben in workspace.css gesteuert. */ :root body:is([data-route="order"], [data-route="order-success"], [data-route="order-cancel"]) .order-form > label { font-size: 14px; color: var(--text); } :root body:is([data-route="order"], [data-route="order-success"], [data-route="order-cancel"]) .order-form input:not([type="radio"]):not([type="checkbox"]):not([type="hidden"]) { min-height: 48px; padding: 12px 14px; background: #090f1c; border: 1px solid #54627d; border-radius: 9px; color: var(--text); } :root body:is([data-route="order"], [data-route="order-success"], [data-route="order-cancel"]) .order-form input::placeholder { color: var(--text-dim); opacity: 1; } :root body:is([data-route="order"], [data-route="order-success"], [data-route="order-cancel"]) .field-help { color: #bdc8dc; font-size: 13px; line-height: 1.65; } :root body:is([data-route="order"], [data-route="order-success"], [data-route="order-cancel"]) .checkbox-row { align-items: start; line-height: 1.65; } :root body:is([data-route="order"], [data-route="order-success"], [data-route="order-cancel"]) .checkbox-row input { min-height: 18px; width: 18px; height: 18px; margin-top: 3px; accent-color: var(--accent); } :root body:is([data-route="order"], [data-route="order-success"], [data-route="order-cancel"]) a { color: var(--accent); text-underline-offset: 4px; } :root body:is([data-route="order"], [data-route="order-success"], [data-route="order-cancel"]) .checkbox-row a { text-decoration: underline; } :root body:is([data-route="order"], [data-route="order-success"], [data-route="order-cancel"]) .button-primary { min-height: 52px; padding: 14px 24px; border: 1px solid transparent; border-radius: 9px; background: var(--order-gradient); color: #04070e; font-size: 15px; font-weight: 700; text-decoration: none; transition: box-shadow .2s; } :root body:is([data-route="order"], [data-route="order-success"], [data-route="order-cancel"]) .button-primary:hover { background: var(--order-gradient); border-color: var(--accent); color: #04070e; box-shadow: 0 0 32px #69e1f529; } :root body:is([data-route="order"], [data-route="order-success"], [data-route="order-cancel"]) .button-primary:disabled { opacity: .6; cursor: not-allowed; } :root body:is([data-route="order"], [data-route="order-success"], [data-route="order-cancel"]) :is(a, button, input, progress):focus-visible { outline: 3px solid var(--accent); outline-offset: 4px; } :root body:is([data-route="order"], [data-route="order-success"], [data-route="order-cancel"]) .plan-card:has(input:focus-visible) { outline: 3px solid var(--accent); outline-offset: 4px; } :root body:is([data-route="order"], [data-route="order-success"], [data-route="order-cancel"]) .form-link { display: block; padding: 8px; text-align: center; } :root body:is([data-route="order"], [data-route="order-success"], [data-route="order-cancel"]) .flash { background: #241526; color: #ffccd5; border: 1px solid #bc7182; border-radius: 12px; } :root body:is([data-route="order"], [data-route="order-success"], [data-route="order-cancel"]) .order-status { --order-state: #f4d28b; } :root body:is([data-route="order"], [data-route="order-success"], [data-route="order-cancel"]) .order-status-success { --order-state: #9af5d4; } :root body:is([data-route="order"], [data-route="order-success"], [data-route="order-cancel"]) .order-status-stopped { --order-state: #ffb2c0; } :root body:is([data-route="order"], [data-route="order-success"], [data-route="order-cancel"]) .order-state { display: flex; align-items: center; gap: 10px; margin: 0 0 16px; color: var(--order-state); font-size: 13px; font-weight: 600; } :root body:is([data-route="order"], [data-route="order-success"], [data-route="order-cancel"]) .order-state > span { display: grid; place-items: center; flex: 0 0 30px; height: 30px; border: 1px solid currentColor; border-radius: 50%; font-size: 19px; } :root body:is([data-route="order"], [data-route="order-success"], [data-route="order-cancel"]) .order-summary { padding: 24px; border: 1px solid var(--hairline); border-left: 3px solid var(--order-state); border-radius: 12px; background: #090f1c; gap: 14px 24px; font-size: 14px; } :root body:is([data-route="order"], [data-route="order-success"], [data-route="order-cancel"]) .order-summary .badge { color: var(--order-state); background: #ffffff08; border: 1px solid currentColor; white-space: normal; } :root body:is([data-route="order"], [data-route="order-success"], [data-route="order-cancel"]) .order-status > p { color: #bdc8dc; overflow-wrap: anywhere; } :root body:is([data-route="order"], [data-route="order-success"], [data-route="order-cancel"]) .order-status strong { color: var(--text); } :root body:is([data-route="order"], [data-route="order-success"], [data-route="order-cancel"]) .table-wrap { margin: 18px 0; border: 1px solid var(--hairline); border-radius: 10px; background: #090f1c; } :root body:is([data-route="order"], [data-route="order-success"], [data-route="order-cancel"]) table { width: 100%; min-width: 0; table-layout: fixed; } :root body:is([data-route="order"], [data-route="order-success"], [data-route="order-cancel"]) :is(td, th) { padding: 12px 14px; overflow-wrap: anywhere; color: var(--text); } :root body:is([data-route="order"], [data-route="order-success"], [data-route="order-cancel"]) th { color: var(--text-dim); background: var(--surface-2); } :root body:is([data-route="order"], [data-route="order-success"], [data-route="order-cancel"]) code { color: var(--accent); white-space: normal; overflow-wrap: anywhere; } :root body:is([data-route="order"], [data-route="order-success"], [data-route="order-cancel"]) .order-progress { display: grid; gap: 12px; margin: 24px 0 16px; font-size: 14px; } :root body:is([data-route="order"], [data-route="order-success"], [data-route="order-cancel"]) .order-progress progress { appearance: none; width: 100%; height: 7px; border: 0; border-radius: 10px; overflow: hidden; background: #25314b; accent-color: var(--accent); } :root body:is([data-route="order"], [data-route="order-success"], [data-route="order-cancel"]) .order-progress progress::-webkit-progress-bar { background: #25314b; } :root body:is([data-route="order"], [data-route="order-success"], [data-route="order-cancel"]) .order-progress progress::-webkit-progress-value { background: var(--order-gradient); } :root body:is([data-route="order"], [data-route="order-success"], [data-route="order-cancel"]) .order-progress progress::-moz-progress-bar { background: var(--order-gradient); } /* Originalrakete der Website, mit lokalen IDs und ausschliesslich CSS-Animation. */ :root body:is([data-route="order"], [data-route="order-success"], [data-route="order-cancel"]) .order-rocket-scene { position: relative; grid-column: 2; grid-row: 1; width: 250px; height: 230px; isolation: isolate; pointer-events: none; } :root body:is([data-route="order"], [data-route="order-success"], [data-route="order-cancel"]) .order-rocket-art { position: relative; display: block; width: 100%; height: 100%; overflow: visible; } :root body:is([data-route="order"], [data-route="order-success"], [data-route="order-cancel"]) .order-orbit { position: absolute; inset: 20px 8px; border: 1px solid #a492ff52; border-radius: 50%; transform: rotate(-28deg) scaleY(.5); } :root body:is([data-route="order"], [data-route="order-success"], [data-route="order-cancel"]) .order-orbit-one::before { content: ''; position: absolute; top: 23px; left: 29px; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 16px var(--accent); } :root body:is([data-route="order"], [data-route="order-success"], [data-route="order-cancel"]) .order-orbit-two { inset: 4px; transform: rotate(48deg) scaleY(.6); border-color: #69e1f526; } :root body:is([data-route="order"], [data-route="order-success"], [data-route="order-cancel"]) .order-rocket-float { animation: order-hover 6s ease-in-out infinite; } :root body:is([data-route="order"], [data-route="order-success"], [data-route="order-cancel"]) .order-stop-hull-dark { stop-color: #526584; } :root body:is([data-route="order"], [data-route="order-success"], [data-route="order-cancel"]) .order-stop-hull-light { stop-color: #eff8ff; } :root body:is([data-route="order"], [data-route="order-success"], [data-route="order-cancel"]) .order-stop-hull-mid { stop-color: #b6c8dc; } :root body:is([data-route="order"], [data-route="order-success"], [data-route="order-cancel"]) .order-stop-violet { stop-color: var(--order-violet); } :root body:is([data-route="order"], [data-route="order-success"], [data-route="order-cancel"]) .order-stop-indigo { stop-color: var(--order-indigo); } :root body:is([data-route="order"], [data-route="order-success"], [data-route="order-cancel"]) .order-stop-white { stop-color: #ffffff; } :root body:is([data-route="order"], [data-route="order-success"], [data-route="order-cancel"]) .order-stop-cyan { stop-color: var(--accent); } :root body:is([data-route="order"], [data-route="order-success"], [data-route="order-cancel"]) .order-stop-transparent { stop-color: var(--order-violet); stop-opacity: 0; } :root body:is([data-route="order"], [data-route="order-success"], [data-route="order-cancel"]) .order-stop-window { stop-color: #102d4d; } :root body:is([data-route="order"], [data-route="order-success"], [data-route="order-cancel"]) .order-rocket-body { fill: url(#order-hull); } :root body:is([data-route="order"], [data-route="order-success"], [data-route="order-cancel"]) :is(.order-rocket-fin, .order-rocket-nose) { fill: url(#order-fin); } :root body:is([data-route="order"], [data-route="order-success"], [data-route="order-cancel"]) .order-rocket-seam { fill: none; stroke: #526584; stroke-width: 2; } :root body:is([data-route="order"], [data-route="order-success"], [data-route="order-cancel"]) .order-rocket-window { fill: url(#order-window); } :root body:is([data-route="order"], [data-route="order-success"], [data-route="order-cancel"]) .order-window-frame { fill: #526584; stroke: #eff8ff; stroke-width: 3; } :root body:is([data-route="order"], [data-route="order-success"], [data-route="order-cancel"]) .order-window-glint { fill: none; stroke: #fff; stroke-width: 3; stroke-linecap: round; opacity: .65; } :root body:is([data-route="order"], [data-route="order-success"], [data-route="order-cancel"]) .order-rocket-center-fin { fill: var(--order-indigo); } :root body:is([data-route="order"], [data-route="order-success"], [data-route="order-cancel"]) .order-rocket-nozzle { fill: #526584; } :root body:is([data-route="order"], [data-route="order-success"], [data-route="order-cancel"]) .order-rocket-mark { stroke: #526584; stroke-width: 2; } :root body:is([data-route="order"], [data-route="order-success"], [data-route="order-cancel"]) :is(.order-exhaust-halo, .order-exhaust-core) { fill: url(#order-exhaust); transform-origin: 300px 350px; animation: order-flame 1.2s ease-in-out infinite alternate; } :root body:is([data-route="order"], [data-route="order-success"], [data-route="order-cancel"]) .order-exhaust-halo { opacity: .35; filter: blur(3px); } :root body:is([data-route="order"], [data-route="order-success"], [data-route="order-cancel"]) .order-exhaust-core { opacity: .8; } :root body:is([data-route="order"], [data-route="order-success"], [data-route="order-cancel"]) .order-rocket-clouds { fill: var(--order-violet); opacity: .09; filter: blur(3px); } :root body:is([data-route="order"], [data-route="order-success"], [data-route="order-cancel"]) .order-space-particles { stroke: var(--accent); fill: var(--accent); opacity: .65; } :root body:is([data-route="order"], [data-route="order-success"], [data-route="order-cancel"]) .order-status-stopped :is(.order-rocket-float, .order-exhaust-halo, .order-exhaust-core) { animation: none; } :root body:is([data-route="order"], [data-route="order-success"], [data-route="order-cancel"]) .order-status-stopped :is(.order-exhaust-halo, .order-exhaust-core) { opacity: .15; } /* Stripe-Abbruch kann weiterhin pending_payment sein: auf der Cancel-Route steht die Rakete unabhaengig vom unveraenderten Zahlungsstatus still. */ :root body[data-route="order-cancel"] :is(.order-rocket-float, .order-exhaust-halo, .order-exhaust-core) { animation: none; } @keyframes order-hover { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-12px); } } @keyframes order-flame { from { transform: scaleY(.88); } to { transform: scaleY(1.06); } } @media (max-width: 600px) { :root body:is([data-route="order"], [data-route="order-success"], [data-route="order-cancel"]) { padding: 16px 12px; } :root body:is([data-route="order"], [data-route="order-success"], [data-route="order-cancel"]) .auth-card { padding: 22px 18px; border-radius: 18px !important; } :root body:is([data-route="order"], [data-route="order-success"], [data-route="order-cancel"]) .order-hero { grid-template-columns: minmax(0, 1fr); gap: 8px; margin-top: 0; } :root body:is([data-route="order"], [data-route="order-success"], [data-route="order-cancel"]) .order-rocket-scene { grid-column: 1; grid-row: 1; justify-self: center; width: 160px; height: 145px; } :root body:is([data-route="order"], [data-route="order-success"], [data-route="order-cancel"]) .order-hero-copy { grid-column: 1; grid-row: 2; } :root body:is([data-route="order"], [data-route="order-success"], [data-route="order-cancel"]) .auth-card h1 { font-size: 38px; } :root body:is([data-route="order"], [data-route="order-success"], [data-route="order-cancel"]) .order-summary { grid-template-columns: minmax(0, 1fr); padding: 18px; gap: 4px; } :root body:is([data-route="order"], [data-route="order-success"], [data-route="order-cancel"]) .order-summary dd { margin-bottom: 12px; } :root body:is([data-route="order"], [data-route="order-success"], [data-route="order-cancel"]) .order-summary dd:last-child { margin-bottom: 0; } :root body:is([data-route="order"], [data-route="order-success"], [data-route="order-cancel"]) :is(td, th) { padding: 10px 8px; font-size: 12px; } } @media (prefers-reduced-motion: reduce) { :root body:is([data-route="order"], [data-route="order-success"], [data-route="order-cancel"]) *, :root body:is([data-route="order"], [data-route="order-success"], [data-route="order-cancel"]) *::before, :root body:is([data-route="order"], [data-route="order-success"], [data-route="order-cancel"]) *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; } } @media (forced-colors: active) { :root body:is([data-route="order"], [data-route="order-success"], [data-route="order-cancel"]) .auth-card h1 { background: none; color: CanvasText !important; } :root body:is([data-route="order"], [data-route="order-success"], [data-route="order-cancel"]) .plan-card:has(input:checked) { outline: 2px solid Highlight; } } /* Seitenhintergrund ebenfalls dunkel - sonst blitzt beim Ueber-das-Ende- Scrollen (Mobil) und vor dem ersten Zeichnen der helle html-Hintergrund des Panels auf. */ html:has(body:is([data-route="order"], [data-route="order-success"], [data-route="order-cancel"])) { background: #070a13; }