/* Bundle-Format: 3 | name=public-base | sources=7 */ /* ============================================================ HostingPlus — Design Tokens -------------------------------------------------------------- Alle Werte wurden 1:1 aus den Prototypen extrahiert. Diese Datei ist die Single Source of Truth für Farben,Radien,Schatten,Typo-Stack. Bei Abweichungen zwischen dieser Datei und den HTML-Prototypen gilt DIESE Datei. -------------------------------------------------------------- Einbindung in der neuen App:oder als Tailwind-Preset (siehe README § Tailwind-Mapping). ============================================================ */:root{/* ---------- Brand:Red (Primary CTA / Akzent) ---------- */ --red:#D81818;--red-soft:#FCEAEA;--red-hover:#B91313;/* ---------- Brand:Teal (Primary / Headlines / Dark UI) ---------- */ --teal:#075858;--teal-soft:#E6F0F0;--teal-hover:#053F3F;/* ---------- Ink (Text-Stufen) ---------- */ --ink:#0D3838;/* Default body text,H1–H3 */ --ink-2:#194848;/* Secondary body */ --ink-3:#3F5858;/* Captions,metadata */ --mid:#6B6B72;/* Muted labels */ /* ---------- Dark-Surfaces (Portal-Dark-Header,Footer) ---------- */ --surface-dark:#0A4747;--surface-dark-2:#0D5454;/* ---------- Lines (Borders,Dividers) ---------- */ --line:#E7E5E0;--line-2:#D7D5CF;/* ---------- Paper (App-BG,subtle panels) ---------- */ --paper:#FAFAF8;--paper-2:#F2F0EA;/* ---------- Cream (warm section BG) ---------- */ --cream:#F2E8D5;--cream-2:#EADFC6;/* ---------- White ---------- */ --white:#FFFFFF;/* ---------- Semantic:Success / Amber / Mustard ---------- */ --green:#15803D;/* WCAG-AA tauglich auf weissem BG (Kontrast 4.79) */ --green-bg:#1F8A4C;/* Hellere Variante fuer farbige Backgrounds/Pills */ --green-soft:#E6F4EC;--amber:#C58B1B;/* warning state */ --amber-soft:#FAF1DE;/* ---------- Mustard (Highlight:„Beliebteste Wahl",Sterne) ---------- */ --mustard:#D9A42E;--mustard-soft:#FBF2D9;--mustard-ink:#8A6410;/* ---------- Radius ---------- */ --radius:10px;/* Buttons,Inputs,kleine Cards */ --radius-lg:14px;/* große Cards,Modals */ /* ---------- Schatten ---------- */ --shadow-sm:0 1px 0 rgba(11,11,12,.04),0 1px 2px rgba(11,11,12,.04);--shadow-md:0 1px 0 rgba(11,11,12,.04),0 6px 20px -8px rgba(11,11,12,.12);--shadow-lg:0 2px 0 rgba(11,11,12,.04),0 30px 60px -30px rgba(11,11,12,.25);/* ---------- Typo-Stacks ---------- */ --font-sans:'Inter Tight',system-ui,-apple-system,BlinkMacSystemFont,sans-serif;--font-serif:'Instrument Serif',Georgia,'Times New Roman',serif;--font-mono:'JetBrains Mono',ui-monospace,'SF Mono',Menlo,monospace;/* ---------- Spacing (Verwendung als Referenz,NICHT im CSS verwendet) ---------- */ /* Siehe README § Spacing-System für die Scale. */}/* ============================================================ Dark Mode — wird über [data-theme="dark"] auf oder aktiviert. Nur im Kundenportal relevant. ============================================================ */ [data-theme="dark"]{--ink:#F5F5F2;--ink-2:#E4E4DF;--ink-3:#B8B8B2;--mid:#8A8A84;--surface-dark:#0A3838;--surface-dark-2:#0D4747;--line:#262629;--line-2:#35353A;--paper:#0B0B0D;--paper-2:#131316;--cream:#1A1612;--cream-2:#221C14;--white:#17171A;--red-soft:#2A0F11;--teal-soft:#0F2424;--green-soft:#0F2418;--amber-soft:#2A2010;--mustard-soft:#2A2210;--shadow-sm:0 1px 0 rgba(0,0,0,.3);--shadow-md:0 8px 24px -10px rgba(0,0,0,.6);--shadow-lg:0 30px 60px -30px rgba(0,0,0,.8)}/* ============================================================ Globaler Reset+Typografie-Basis Diese 3 Regeln sind verpflichtend zu übernehmen. ============================================================ */ *,*::before,*::after{box-sizing:border-box}html,body{margin:0;padding:0;background:var(--paper);color:var(--ink);font-family:var(--font-sans);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility}h1,h2,h3{font-family:var(--font-serif);color:var(--teal);letter-spacing:-0.015em;line-height:1.05;font-weight:400;/* Instrument Serif wirkt schon kräftig bei 400 */}h1 em,h2 em,h3 em{font-style:italic;color:var(--red)}code,kbd,pre,.mono{font-family:var(--font-mono)}/* ============================================================ Accessibility — Skip-Link (WCAG 2.2 / BFSG) Wird beim Tab-Fokus sichtbar oben links eingeblendet. ============================================================ */ .skip-link{position:absolute;left:-10000px;top:auto;width:1px;height:1px;overflow:hidden;z-index:10000}.skip-link:focus{position:fixed;top:12px;left:12px;width:auto;height:auto;padding:12px 20px;background:var(--paper,#fff);color:var(--ink,#111);border:2px solid var(--red,#e21b23);border-radius:8px;font:600 14px/1.2 var(--font-sans,system-ui,sans-serif);text-decoration:none;box-shadow:0 6px 24px rgba(0,0,0,.18);outline:none}/* Visually-hidden helper:Inhalt fuer Screenreader,optisch unsichtbar. Auf Fokus sichtbar machen,falls auf Interaktiv-Element angewendet. */ .visually-hidden,.sr-only{position:absolute !important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.visually-hidden:focus,.sr-only:focus{position:static !important;width:auto;height:auto;margin:0;overflow:visible;clip:auto;white-space:normal}/* ============================================================ HostingPlus Modern — Marketing Shell Topbar · Header · Mega-Menu · Buttons · Footer · Status-Chip Werte 1:1 aus prototypes/site_01_Home.html uebernommen. Laedt NACH 50-public.css und ueberschreibt dessen Shell-Styles mit hoeherer Spezifitaet (body+Klassen). ============================================================ */ body.public-body,body{font-family:'Inter Tight',system-ui,-apple-system,sans-serif !important;background:var(--paper);color:var(--ink);font-size:16px;line-height:1.5;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-feature-settings:"ss01","cv11";transition:background .3s ease,color .3s ease}/* Klassen von 50-public.css neutralisieren,die mit Modern-Shell kollidieren */ body.public-body .top-bar{all:unset}body.public-body .site-header{all:unset}body.public-body .site-footer{all:unset}.serif{font-family:'Instrument Serif',Georgia,serif;font-weight:400;letter-spacing:-0.01em}.mono{font-family:'JetBrains Mono',ui-monospace,monospace}a{color:inherit;text-decoration:none}button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit}.container{max-width:1240px;margin:0 auto;padding:0 28px}/* ============ PAGE-HERO (Modern,shared) ============ * Wird von /cart,/status,/umzug,/cookie-einstellungen,legal/avv,* legal/subprozessoren genutzt. Vorher nur in 50-public.css (Classic) — * dort fehlte die Containment-Logik,Modern-Pages bekamen den Text ohne * Padding/max-width an den linken Bildschirmrand geklebt. */ .page-hero{padding:48px 0 36px;background:linear-gradient(180deg,var(--paper-2,#F5F2EA) 0%,transparent 100%)}.page-hero-inner{max-width:1240px;margin:0 auto;padding:0 28px}.page-hero .badge-pill,.badge-pill{display:inline-block;font-size:11px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--red,#e21b23);background:rgba(229,36,43,.08);padding:5px 11px;border-radius:999px}.page-hero h1,.page-title{font-family:'Instrument Serif',Georgia,serif;font-weight:400;font-size:48px;line-height:1.05;letter-spacing:-0.02em;color:var(--ink,#1a1a1a);margin:12px 0 10px}.page-hero h1 em,.page-title em{font-style:italic;color:var(--red,#e21b23)}.page-hero p{font-size:16px;color:var(--mid,#666);max-width:640px;line-height:1.55}@media (max-width:720px){.page-hero{padding:32px 0 24px}.page-hero h1,.page-title{font-size:34px}.page-hero p{font-size:15px}}/* ============ TOPBAR ============ */ .topbar{background:var(--surface-dark);color:#DADAD6;font-size:13px;padding:9px 0;border-bottom:1px solid #1F1F22}[data-theme="dark"] .topbar{background:var(--surface-dark)}.topbar .row{display:flex;justify-content:space-between;align-items:center;gap:24px}.topbar .claim{display:flex;align-items:center;gap:8px;opacity:.92}.topbar .claim::before{content:"";width:6px;height:6px;background:var(--red);border-radius:50%;box-shadow:0 0 0 3px rgba(229,36,43,.18)}.topbar .right{display:flex;gap:22px;align-items:center}.topbar .right a{display:flex;align-items:center;gap:6px;opacity:.9;padding:6px 4px;min-height:24px}.topbar .right a:hover{opacity:1;color:#fff}/* ============ HEADER ============ */ .header{position:sticky;top:0;z-index:50;background:color-mix(in srgb,var(--paper) 88%,transparent);backdrop-filter:saturate(1.4) blur(10px);-webkit-backdrop-filter:saturate(1.4) blur(10px);border-bottom:1px solid var(--line)}.header .row{display:flex;align-items:center;justify-content:space-between;padding:14px 0}.brand{display:flex;align-items:baseline;gap:2px}.brand .hosting{font-weight:700;font-size:22px;letter-spacing:-0.02em;color:var(--red)}.brand .plus{color:var(--teal);font-weight:700;font-size:22px;letter-spacing:-0.02em}.brand .tag{color:var(--mid);font-size:11px;margin-left:8px;letter-spacing:.04em;text-transform:uppercase}nav.main{display:flex;gap:30px}nav.main a{font-size:15px;font-weight:500;color:var(--ink-2);padding:8px 2px;position:relative}nav.main a.active{color:var(--ink)}nav.main a.active::after{content:"";position:absolute;left:0;right:0;bottom:-15px;height:2px;background:var(--red)}nav.main a:hover{color:var(--ink)}/* Mega menu — JS-gesteuert (Hover mit Close-Delay+Klick-Toggle) */ .nav-item{position:relative}.nav-has-mega>.nav-toggle{display:inline-flex;align-items:center;gap:4px;cursor:pointer}.nav-caret{transition:transform .2s;opacity:.7}.nav-has-mega.open .nav-caret{transform:rotate(180deg);opacity:1}/* Modern-Theme nutzt dieselben .mega-menu-Klassen wie Legacy 50-public.css. Mit höherer Spezifität via header neutralisieren wir pointer-events:none und translateX(-50%) aus der alten Regel. */ header .nav-has-mega .mega-menu{position:absolute;top:100%;left:-24px;padding:18px 0 0 0;margin:0;min-width:0;width:620px;background:transparent;border:none;box-shadow:none;opacity:0;visibility:hidden;transform:translateY(-6px);transition:opacity .15s,transform .15s,visibility .15s;pointer-events:none;z-index:200}header .nav-has-mega .mega-menu::before{display:none}header .nav-has-mega.open .mega-menu{opacity:1;visibility:visible;transform:translateY(0);pointer-events:auto}.mega-menu-inner{padding:18px;background:var(--white);color:var(--ink);border:1px solid var(--line);border-radius:16px;box-shadow:0 24px 60px -12px rgba(15,15,14,.14),0 6px 18px -8px rgba(15,15,14,.08);pointer-events:auto}.mega-grid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:6px}@media (max-width:980px){.mega-grid{grid-template-columns:1fr 1fr}}.mega-item{display:flex;gap:14px;align-items:flex-start;padding:14px 14px;border-radius:10px;color:var(--ink) !important;transition:background .15s}.mega-item:hover{background:var(--paper-2)}.mega-item::after{display:none !important}.mega-ico{width:36px;height:36px;border-radius:8px;display:grid;place-items:center;flex-shrink:0}.mega-ico-web{background:rgba(37,99,235,.08);color:#2563EB}.mega-ico-biz{background:rgba(7,88,88,.10);color:var(--teal,#075858)}.mega-ico-wp{background:rgba(227,27,35,.08);color:var(--red)}.mega-ico-res{background:rgba(180,83,9,.08);color:#B45309}.mega-ico-srv{background:rgba(55,65,81,.08);color:#374151}.mega-body{display:flex;flex-direction:column;gap:3px;min-width:0}.mega-title{font-size:15px;font-weight:700;letter-spacing:-0.01em;color:var(--ink)}.mega-desc{font-size:12.5px;color:var(--ink-3);line-height:1.4}.mega-foot{display:flex;align-items:center;justify-content:center;gap:6px;margin-top:8px;padding:12px;border-top:1px solid var(--line);font-size:13px;font-weight:600;color:var(--ink) !important;border-radius:0 0 10px 10px;transition:background .15s}.mega-foot:hover{background:var(--paper-2)}.mega-foot span{color:var(--red)}.mega-foot::after{display:none !important}[data-theme="dark"] .mega-menu{background:var(--white);border-color:var(--line)}[data-theme="dark"] .mega-ico-web{background:rgba(96,165,250,.14);color:#93C5FD}[data-theme="dark"] .mega-ico-wp{background:rgba(239,68,68,.14);color:#FCA5A5}[data-theme="dark"] .mega-ico-res{background:rgba(251,146,60,.14);color:#FDBA74}[data-theme="dark"] .mega-ico-srv{background:rgba(156,163,175,.14);color:#D1D5DB}.header .cta{display:flex;gap:10px;align-items:center}.login-btn{display:inline-flex;align-items:center;gap:8px;padding:9px 14px;border:1px solid var(--line-2);border-radius:8px;font-size:14px;font-weight:500;color:var(--ink-2);background:var(--white);transition:border-color .15s}.login-btn:hover{border-color:var(--ink-3)}/* ============ BUTTONS ============ */ .btn{display:inline-flex;align-items:center;gap:8px;padding:13px 20px;border-radius:10px;font-weight:600;font-size:15px;letter-spacing:-0.005em;transition:transform .1s,background .15s,border-color .15s,box-shadow .15s;white-space:nowrap}.btn:active{transform:translateY(1px)}.btn-primary{background:var(--red);color:#fff;box-shadow:0 1px 0 rgba(0,0,0,.12),inset 0 1px 0 rgba(255,255,255,.18)}.btn-primary:hover{background:var(--red-hover);color:#fff}.btn-ghost{background:var(--white);color:var(--ink);border:1px solid var(--line-2)}.btn-ghost:hover{border-color:var(--ink-3);color:var(--ink)}.btn-link{color:var(--ink);font-weight:600;font-size:14px;display:inline-flex;align-items:center;gap:6px}.btn-link .arrow{transition:transform .2s}.btn-link:hover .arrow{transform:translateX(3px)}/* ============ FOOTER ============ */ .footer{padding:60px 0 30px;background:var(--paper);border-top:1px solid var(--line)}.footer-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr 1fr;gap:40px;margin-bottom:40px}.footer h4,.footer .footer-col-title{font-size:12px;text-transform:uppercase;letter-spacing:.12em;color:var(--mid);margin:0 0 14px;font-weight:600;font-family:inherit;line-height:1.4}.footer ul{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:9px}.footer ul a{font-size:14px;color:var(--ink-2)}.footer ul a:hover{color:var(--red)}.footer .about p{color:var(--ink-3);font-size:13.5px;max-width:32ch;margin:12px 0 0}.footer-bottom{padding-top:26px;border-top:1px solid var(--line);display:flex;justify-content:space-between;align-items:center;gap:20px;font-size:12.5px;color:var(--mid);flex-wrap:wrap}.footer-bottom .legal-links{display:flex;gap:20px;align-items:center}/* ============ STATUS-CHIP ============ */ .status-chip{display:inline-flex;align-items:center;gap:7px;padding:5px 11px;border-radius:999px;background:rgba(31,138,76,.08);font-size:12.5px;font-weight:500;color:var(--ink-2);font-family:'Inter Tight',sans-serif;text-decoration:none;transition:background .15s}.status-chip:hover{background:rgba(31,138,76,.14)}.status-chip .status-dot{position:relative;width:7px;height:7px;border-radius:50%;background:var(--green);flex-shrink:0}/* Halo via Pseudo-Element+transform — GPU-composed (Lighthouse:"Nicht zusammengesetzte Animationen vermeiden") */ .status-chip .status-dot::after{content:'';position:absolute;inset:0;border-radius:50%;background:rgba(31,138,76,.55);animation:statusPulseGpu 2.2s ease-out infinite;pointer-events:none;will-change:transform,opacity}@keyframes statusPulseGpu{0%{transform:scale(1);opacity:.55}70%{transform:scale(2.7);opacity:0}100%{transform:scale(2.7);opacity:0}}/* ============ MOBILE NAV (Burger+Drawer) ============ */ .nav-burger{display:none;width:40px;height:40px;border:1px solid var(--line);border-radius:8px;background:var(--white);padding:0;cursor:pointer;flex-direction:column;align-items:center;justify-content:center;gap:4px;margin-left:6px}.nav-burger span{display:block;width:18px;height:2px;background:var(--ink);border-radius:2px}.nav-burger:hover{border-color:var(--ink-3)}.mobile-nav{position:fixed;inset:0;z-index:120;display:none}.mobile-nav.open{display:block}.mn-backdrop{position:absolute;inset:0;background:rgba(10,15,15,.45);backdrop-filter:blur(3px)}.mn-panel{position:absolute;top:0;right:0;width:min(360px,88vw);height:100%;background:var(--paper);display:flex;flex-direction:column;transform:translateX(100%);transition:transform .28s cubic-bezier(.2,.8,.2,1);box-shadow:-20px 0 60px -20px rgba(0,0,0,.25)}.mobile-nav.open .mn-panel{transform:translateX(0)}.mn-head{padding:18px 22px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line);flex-shrink:0}.mn-brand{font-family:'Instrument Serif',serif;font-size:24px;letter-spacing:-0.02em;color:var(--ink);text-decoration:none}.mn-brand .hosting{color:var(--ink)}.mn-brand .plus{color:var(--red);font-weight:700}.mn-close{width:36px;height:36px;border:none;background:transparent;cursor:pointer;color:var(--ink-2);display:grid;place-items:center;border-radius:8px}.mn-close:hover{background:var(--paper-2);color:var(--ink)}.mn-nav{flex:1;overflow-y:auto;padding:12px 14px 18px}.mn-group{font-size:11px;letter-spacing:0.14em;text-transform:uppercase;color:var(--mid);font-weight:600;padding:14px 10px 6px}.mn-item{display:flex;align-items:center;gap:14px;padding:12px 10px;border-radius:10px;color:var(--ink);text-decoration:none;transition:background .15s}.mn-item:hover,.mn-item.active{background:var(--white)}.mn-item svg{color:var(--red);flex-shrink:0}.mn-item .mn-item-name{display:block;font-size:15px;font-weight:600;color:var(--ink)}.mn-item span{display:block;font-size:12.5px;color:var(--mid)}.mn-link{display:block;padding:11px 10px;border-radius:8px;font-size:15px;color:var(--ink-2);text-decoration:none;transition:background .15s,color .15s}.mn-link:hover,.mn-link.active{background:var(--white);color:var(--ink)}.mn-foot{padding:16px 20px;border-top:1px solid var(--line);display:grid;grid-template-columns:auto 1fr;gap:10px;flex-shrink:0;background:var(--white)}.mn-btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;padding:11px 16px;border-radius:10px;font-size:14px;font-weight:600;text-decoration:none}.mn-btn-ghost{border:1px solid var(--line-2);color:var(--ink);background:var(--white)}.mn-btn-ghost:hover{border-color:var(--ink-3)}.mn-btn-primary{background:var(--red);color:#fff}.mn-btn-primary:hover{background:var(--red-hover)}/* ============ RESPONSIVE SHELL ============ */ /* Breakpoint 980 (nicht 900),damit er synchron zur marketing-pages.css ist — dort greift das 1-Spalten-Layout ab 980 und das Hauptmenue wird auch dort versteckt. Ohne das war ein 80px-Fenster (901-980) ohne Menue UND ohne Burger. */ @media (max-width:980px){.container{padding:0 20px}.topbar{display:none}.header .row{padding:12px 0}nav.main{display:none}.header .cta .login-btn{padding:8px 10px;font-size:13px}.header .cta .btn-primary{display:none}.nav-burger{display:flex}.footer-grid{grid-template-columns:1fr 1fr;gap:28px}.footer .about{grid-column:1 / -1}.footer-bottom{flex-direction:column;align-items:flex-start}}@media (max-width:560px){.header .cta .login-btn span{display:none}.header .cta .login-btn{padding:9px}.header .cta .login-btn svg{width:18px;height:18px}}/* ============================================================ Lifetime-Preisgarantie — pill / inline / banner USP:Aktionspreis bleibt Dauerpreis,in /preisgarantie erklaert. ============================================================ */ .lpg-pill{display:inline-flex;align-items:center;gap:6px;padding:4px 10px;background:linear-gradient(135deg,#16a34a 0%,#059669 100%);color:#fff !important;border-radius:999px;font-size:12px;font-weight:700;letter-spacing:0.2px;line-height:1.1;text-decoration:none;box-shadow:0 2px 8px rgba(22,163,74,.25);transition:transform .15s ease,box-shadow .15s ease}.lpg-pill:hover{transform:translateY(-1px);box-shadow:0 4px 14px rgba(22,163,74,.35)}.lpg-pill svg{stroke:#fff;flex-shrink:0}.lpg-inline{display:inline-flex;align-items:center;gap:4px;color:#16a34a !important;font-weight:600;font-size:12.5px;text-decoration:none;line-height:1.2}.lpg-inline:hover{text-decoration:underline}.lpg-inline svg{stroke:#16a34a;flex-shrink:0}.lpg-banner{display:flex;gap:14px;align-items:flex-start;padding:14px 18px;margin:16px 0;background:#f0fdf4;border:1px solid #bbf7d0;border-left:4px solid #16a34a;border-radius:10px;color:#14532d}.lpg-banner strong{display:block;font-size:14.5px;margin-bottom:4px}.lpg-banner span{display:block;font-size:13px;color:#166534}.lpg-banner span a{color:#16a34a;font-weight:600}.lpg-banner svg{stroke:#16a34a;flex-shrink:0;margin-top:2px}/* ============================================================ Consent-Manager — DSGVO-konformer Cookie-Banner Pre-Consent:keine Tracking-Cookies,keine externen Scripts. ============================================================ */ .consent-backdrop{position:fixed;inset:0;background:rgba(13,56,56,0.55);z-index:99998;opacity:0;visibility:hidden;transition:opacity .25s ease,visibility .25s}.consent-backdrop.open{opacity:1;visibility:visible}.consent-banner{position:fixed;left:50%;bottom:24px;transform:translateX(-50%) translateY(40px);width:min(720px,calc(100vw - 32px));max-height:calc(100vh - 48px);overflow-y:auto;z-index:99999;background:#fff;border-radius:16px;box-shadow:0 20px 50px rgba(13,56,56,.25);opacity:0;visibility:hidden;transition:opacity .3s ease,transform .3s ease,visibility .3s}.consent-banner.open{transform:translateX(-50%) translateY(0);opacity:1;visibility:visible}.consent-inner{padding:28px}.consent-title{margin:0 0 6px;font-size:20px;font-weight:700;color:var(--ink,#0d3838)}.consent-lead{margin:0 0 20px;font-size:14px;line-height:1.55;color:var(--ink-2,#194848)}.consent-lead a{color:var(--red,#d81818);font-weight:600}.consent-categories{display:grid;gap:12px;margin-bottom:20px}.consent-cat{border:1px solid var(--line,#e7e5e0);border-radius:10px;padding:14px 16px;transition:border-color .15s,background .15s}.consent-cat:has(input[type="checkbox"]:checked){border-color:var(--ink,#0d3838);background:var(--paper-2,#f2f0ea)}.consent-cat-head{display:flex;align-items:center;gap:10px;cursor:pointer;margin-bottom:4px;font-weight:600}.consent-cat-head input[type="checkbox"]{width:18px;height:18px;cursor:pointer;accent-color:var(--red,#d81818)}.consent-cat-head input[type="checkbox"]:disabled{cursor:not-allowed;opacity:.6}.consent-cat-title{flex:1;font-size:15px;color:var(--ink,#0d3838)}.consent-cat-pill{padding:2px 8px;background:var(--ink,#0d3838);color:#fff;border-radius:999px;font-size:11px;font-weight:700;letter-spacing:0.3px;text-transform:uppercase}.consent-cat-desc{margin:0;padding-left:28px;font-size:13px;line-height:1.5;color:var(--ink-3,#3f5858)}.consent-actions{display:flex;gap:12px;flex-wrap:wrap;align-items:center;justify-content:flex-end;border-top:1px solid var(--line,#e7e5e0);margin-top:4px;padding-top:18px}.consent-btn{padding:11px 22px;border-radius:8px;border:1px solid var(--line-2,#d7d5cf);background:#fff;color:var(--ink,#0d3838);font-weight:600;font-size:14px;cursor:pointer;transition:background .15s,border-color .15s,transform .1s}.consent-btn:hover{background:var(--paper-2,#f2f0ea);border-color:var(--ink-3,#3f5858)}.consent-btn:active{transform:translateY(1px)}.consent-btn--primary{background:var(--red,#d81818);border-color:var(--red,#d81818);color:#fff;box-shadow:0 6px 16px -4px rgba(216,24,24,.35)}.consent-btn--primary:hover{background:var(--red-hover,#b91313);border-color:var(--red-hover,#b91313)}.consent-btn--big{padding:14px 28px;font-size:15px;order:3;/* visuell ganz rechts (Hauptaktion) */}/* Reject als unauffaelligen Text-Link statt Button — User kann ablehnen aber die Hauptaktion ist klar 'Akzeptieren'. */ .consent-link{color:var(--mid,#6b6b72);text-decoration:underline;font-size:13px;padding:8px 4px;cursor:pointer;background:transparent;border:0;order:1;margin-right:auto;/* schiebt es nach links — die anderen rechts */}.consent-link:hover{color:var(--ink-2,#194848)}@media (max-width:600px){.consent-banner{bottom:0;border-radius:16px 16px 0 0;width:100vw}.consent-inner{padding:22px 18px}.consent-title{font-size:18px}.consent-actions{flex-direction:column-reverse}.consent-actions .consent-link{order:99;margin:8px auto 0}.consent-btn{width:100%;text-align:center}}/* ============================================================ HostingPlus Modern — Conversion UI (global) Mobile-Sticky-CTA · Back-to-Top · Chat-Bubble mit Tooltip 1:1 aus prototypes/site_00_Full_Landing.html (Zeilen 2173-2392) ============================================================ */ /* ============ MOBILE STICKY CTA ============ */ .mobile-cta{display:none;position:fixed;bottom:16px;left:16px;right:16px;background:var(--red);color:#fff;padding:14px 18px;border-radius:12px;font-size:15px;font-weight:600;box-shadow:0 10px 30px -10px rgba(216,24,24,.55),0 2px 6px rgba(0,0,0,.15);z-index:90;align-items:center;justify-content:space-between;gap:10px;transform:translateY(120%);transition:transform .3s cubic-bezier(.2,.8,.2,1);text-decoration:none}.mobile-cta.show{transform:translateY(0)}.mobile-cta .arrow{transition:transform .2s}.mobile-cta:active .arrow{transform:translateX(4px)}@media (max-width:768px){.mobile-cta{display:flex}}/* ============ BACK TO TOP ============ */ /* Desktop:über der Chat-Bubble (60+24+8 Lücke = 92) */ .back-to-top{position:fixed;bottom:96px;right:32px;width:44px;height:44px;border-radius:50%;background:var(--white);color:var(--ink);border:1px solid var(--line-2);display:grid;place-items:center;cursor:pointer;z-index:85;box-shadow:var(--shadow-md);opacity:0;transform:translateY(10px) scale(.9);transition:opacity .2s,transform .2s,border-color .15s;pointer-events:none}.back-to-top.show{opacity:1;transform:translateY(0) scale(1);pointer-events:auto}.back-to-top:hover{border-color:var(--ink-3)}@media (max-width:768px){/* Mobile:über Chat-Bubble,das wiederum über Sticky-CTA sitzt */ .back-to-top{bottom:152px;right:20px}}/* ============ CHAT BUBBLE ============ */ .chat-bubble{position:fixed;bottom:24px;right:24px;width:60px;height:60px;border-radius:50%;background:var(--teal);display:grid;place-items:center;cursor:pointer;box-shadow:0 12px 30px -8px rgba(7,88,88,.45),0 3px 8px rgba(0,0,0,.12);z-index:86;color:#fff;transition:transform .2s,box-shadow .2s;border:none}.chat-bubble:hover{transform:translateY(-2px);box-shadow:0 16px 36px -8px rgba(7,88,88,.55),0 4px 10px rgba(0,0,0,.14)}.chat-bubble svg{color:#fff;width:24px;height:24px}.chat-bubble .chat-ping{position:absolute;top:6px;right:6px;width:12px;height:12px;border-radius:50%;background:var(--green);border:2px solid var(--teal)}.chat-bubble .chat-ping::after{content:"";position:absolute;inset:-2px;border-radius:50%;background:var(--green);opacity:.45;animation:chatPing 1.8s ease-out infinite}@keyframes chatPing{0%{transform:scale(1);opacity:.45}70%{transform:scale(2);opacity:0}100%{opacity:0}}.chat-tooltip{position:fixed;bottom:26px;right:96px;background:var(--white);color:var(--ink);border:1px solid var(--line);padding:12px 14px;border-radius:12px;box-shadow:var(--shadow-md);font-size:13px;max-width:240px;z-index:86;opacity:0;transform:translateX(8px);transition:opacity .22s,transform .22s;pointer-events:none}.chat-tooltip.show{opacity:1;transform:translateX(0);pointer-events:auto}.chat-tooltip b{display:block;margin-bottom:2px;font-weight:600}.chat-tooltip .ct-meta{color:var(--mid);font-size:11.5px;margin-top:4px;display:inline-flex;align-items:center;gap:5px}.chat-tooltip .ct-dot{width:6px;height:6px;border-radius:50%;background:var(--green)}.chat-tooltip::after{content:"";position:absolute;right:-6px;bottom:20px;width:10px;height:10px;background:var(--white);border-right:1px solid var(--line);border-top:1px solid var(--line);transform:rotate(45deg)}@media (max-width:768px){.chat-bubble{bottom:88px;right:16px;width:52px;height:52px}.chat-tooltip{right:78px;bottom:94px;max-width:200px}}/* ============ CHAT WINDOW (Popup) ============ */ .chat-window{position:fixed;bottom:100px;right:24px;width:360px;max-width:calc(100vw - 40px);max-height:min(560px,calc(100vh - 140px));background:var(--white);border:1px solid var(--line);border-radius:18px;box-shadow:0 20px 60px -10px rgba(7,88,88,.25),0 8px 20px -6px rgba(0,0,0,.12);z-index:87;opacity:0;transform:translateY(16px) scale(.96);pointer-events:none;transition:opacity .22s,transform .22s;display:flex;flex-direction:column;overflow:hidden}.chat-window.open{opacity:1;transform:translateY(0) scale(1);pointer-events:auto}.chat-window .cw-head{background:var(--teal);color:#fff;padding:18px 20px 16px;position:relative}.chat-window .cw-title{font-family:'Instrument Serif',serif;font-size:22px;letter-spacing:-0.01em;margin:0;color:#fff}.chat-window .cw-title em{font-style:italic;color:rgba(255,255,255,.85)}.chat-window .cw-sub{font-size:12.5px;opacity:.85;margin-top:4px;display:flex;align-items:center;gap:6px}.chat-window .cw-sub .dot{width:8px;height:8px;border-radius:50%;background:#7FEC9B;box-shadow:0 0 0 3px rgba(127,236,155,.25)}.chat-window .cw-close{position:absolute;top:14px;right:14px;width:30px;height:30px;border-radius:50%;background:rgba(255,255,255,.12);color:#fff;border:none;cursor:pointer;display:grid;place-items:center;transition:background .15s}.chat-window .cw-close:hover{background:rgba(255,255,255,.22)}.chat-window .cw-body{padding:18px 20px 14px;overflow-y:auto;flex:1;display:flex;flex-direction:column;gap:10px}.chat-window .cw-intro{background:var(--cream);padding:12px 14px;border-radius:10px;font-size:13px;color:var(--ink-2);line-height:1.5;margin-bottom:8px}/* Chat-History:Nachrichten-Bubbles */ .chat-window .cw-bubble{max-width:82%;padding:10px 13px;border-radius:12px;font-size:13.5px;line-height:1.45;word-break:break-word;white-space:pre-wrap;position:relative}.chat-window .cw-bubble .cw-time{display:block;font-size:10.5px;margin-top:4px;opacity:.65;font-variant-numeric:tabular-nums}.chat-window .cw-bubble.inbound{background:var(--teal);color:#fff;align-self:flex-end;border-bottom-right-radius:4px}.chat-window .cw-bubble.outbound{background:var(--paper-2);color:var(--ink);align-self:flex-start;border-bottom-left-radius:4px}.chat-window .cw-bubble.outbound .cw-from{display:block;font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:0.05em;color:var(--teal);margin-bottom:3px}/* Form-Bereich bleibt immer unten */ .chat-window .cw-form-wrap{border-top:1px solid var(--line);padding:12px 20px 14px;background:var(--white)}.chat-window .cw-form-wrap label{margin-top:6px}.chat-window .cw-form-wrap label:first-child{margin-top:0}/* Unread-Badge auf der Chat-Bubble */ .chat-bubble .cw-unread{position:absolute;top:-4px;right:-4px;min-width:22px;height:22px;padding:0 6px;background:var(--red);color:#fff;border:2px solid var(--paper);border-radius:11px;font-size:11px;font-weight:700;display:none;align-items:center;justify-content:center;font-variant-numeric:tabular-nums}.chat-bubble .cw-unread.show{display:flex}.chat-window label{display:block;font-size:12px;font-weight:600;color:var(--ink-2);margin:10px 0 5px;letter-spacing:0.02em}.chat-window input,.chat-window textarea{width:100%;padding:10px 12px;border:1px solid var(--line);border-radius:8px;font-size:14px;background:var(--paper);color:var(--ink);outline:none;font-family:inherit;transition:border-color .15s,background .15s}.chat-window input:focus,.chat-window textarea:focus{border-color:var(--teal);background:var(--white);box-shadow:0 0 0 3px var(--teal-soft)}.chat-window textarea{min-height:90px;resize:vertical}.chat-window .cw-foot{padding:12px 20px 16px;border-top:1px solid var(--line);background:var(--paper)}.chat-window .cw-submit{display:flex;width:100%;align-items:center;justify-content:center;gap:8px;padding:12px 16px;border:none;border-radius:10px;background:var(--teal);color:#fff;font-size:14.5px;font-weight:600;cursor:pointer;transition:background .15s}.chat-window .cw-submit:hover:not(:disabled){background:var(--teal-hover)}.chat-window .cw-submit:disabled{opacity:.6;cursor:not-allowed}.chat-window .cw-legal{font-size:11px;color:var(--mid);text-align:center;margin:8px 0 0;line-height:1.4}.chat-window .cw-legal a{color:var(--teal)}.chat-window .cw-msg{padding:10px 12px;border-radius:8px;font-size:13px;margin-bottom:10px}.chat-window .cw-msg.ok{background:var(--green-soft);color:var(--green)}.chat-window .cw-msg.err{background:var(--red-soft);color:var(--red)}.chat-window .cw-msg.hidden{display:none}.chat-window .cw-contact{padding:14px 20px 16px;border-top:1px solid var(--line);display:flex;flex-direction:column;gap:6px;font-size:12.5px;color:var(--mid)}.chat-window .cw-contact a{color:var(--ink);font-weight:600}@media (max-width:768px){.chat-window{bottom:92px;right:12px;left:12px;width:auto;max-height:calc(100vh - 160px)}}/* ============ PRINT:alles ausblenden ============ */ @media print{.mobile-cta,.back-to-top,.chat-bubble,.chat-tooltip,.chat-window{display:none !important}}/* Cart-Icon im Header — Reusable für Public+Portal+Admin. */ .cart-icon{position:relative;display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:8px;color:var(--ink-2,#333);transition:background 0.15s,color 0.15s;text-decoration:none}.cart-icon:hover{background:var(--paper-2,#f4f4f4);color:var(--red,#e21b23)}.cart-icon-badge{position:absolute;top:2px;right:0;min-width:18px;height:18px;padding:0 5px;border-radius:10px;background:var(--red,#e21b23);color:#fff;font-size:11px;font-weight:700;line-height:18px;text-align:center;box-shadow:0 0 0 2px var(--bg,#fff);pointer-events:none}.cart-icon-badge[hidden]{display:none}/* Subtle pulse-Animation beim Hinzufügen — wird per JS via .cart-bump-Klasse getriggert */ .cart-icon.cart-bump .cart-icon-badge{animation:cart-bump 0.4s ease}@keyframes cart-bump{0%,100%{transform:scale(1)}50%{transform:scale(1.4)}}/* Toast für 'Domain zum Warenkorb hinzugefügt' Bestätigung */ .cart-toast{position:fixed;bottom:24px;right:24px;background:#16a34a;color:#fff;padding:12px 18px;border-radius:8px;font-size:14px;font-weight:600;box-shadow:0 6px 24px rgba(0,0,0,0.15);opacity:0;transform:translateY(20px);transition:opacity 0.2s,transform 0.2s;z-index:9999;pointer-events:none}.cart-toast.show{opacity:1;transform:translateY(0)}.cart-toast.error{background:#dc2626}/* Modus-Buttons in der /cart-Übersicht */ .cart-mode-btn{padding:9px 14px;border-radius:8px;font-size:13px;font-weight:600;cursor:pointer;transition:all 0.15s;flex:1;text-align:center;background:#fff;color:#333;border:1px solid #d1d5db}.cart-mode-btn:hover{background:#f9fafb;border-color:#9ca3af}.cart-mode-btn.active{background:var(--red,#e21b23);color:#fff;border-color:var(--red,#e21b23)}/* AGB-Flash-Highlight:2× Puls in rot,wenn Submit ohne AGB-Akzeptierung versucht wurde. Layout-stabil:padding wird mit negativem margin kompensiert,margin-bottom bleibt 20px damit der nachfolgende Submit-Button nicht 8px hochspringt. */ @keyframes agb-flash-pulse{0%{box-shadow:0 0 0 0 rgba(226,27,35,0.45);background-color:rgba(226,27,35,0.08)}60%{box-shadow:0 0 0 10px rgba(226,27,35,0);background-color:rgba(226,27,35,0.04)}100%{box-shadow:0 0 0 0 rgba(226,27,35,0);background-color:transparent}}#agbBox.agb-flash{border-radius:8px;padding:10px 12px;margin:-10px -12px 20px;/* margin-bottom = 20px,identisch zu Inline-Style — kein Vertical-Shift */ animation:agb-flash-pulse 0.8s ease-out 2}/* ============================================================ * Domain-Check Result Panel — Shared Component * * Verwendet von:* - Home-Hero (#domainResults) ueber home/index.php * - /domains-Hero (#domDomainResults) ueber home/domains.php * - kuenftig:ueberall wo .dom-results steht * * Wird IMMER ueber das public-base-Bundle geladen — die Domain-Check-Komponente * ist nicht seitenspezifisch (Marketing vs. Home),sondern uebergreifend. * Verhindert das bekannte Problem,dass auf der Startseite das Result-Panel * als ungestaltete Text-Wand erschien (marketing-pages.css wurde dort nicht * geladen). * ============================================================ */ .dom-results{max-width:720px;margin:12px auto 0;background:var(--white);border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow-md);overflow:hidden;display:none;text-align:left}.dom-results.show{display:block;animation:slideDown .25s ease}.dom-results .dr-head{padding:16px 22px;background:var(--paper-2);border-bottom:1px solid var(--line);font-size:13px;color:var(--ink-3);display:flex;justify-content:space-between;align-items:center;gap:12px}.dom-results .dr-head b{color:var(--ink)}.dom-results .dr-row{padding:14px 22px;display:flex;align-items:center;justify-content:space-between;gap:14px;border-bottom:1px solid var(--line)}.dom-results .dr-row:last-child{border-bottom:none}.dom-results .dr-row.featured{background:linear-gradient(to right,rgba(229,36,43,.04),transparent)}.dom-results .dr-name{font-family:'JetBrains Mono',monospace;font-size:17px;font-weight:500;letter-spacing:-0.01em;flex:1 1 auto;min-width:0}.dom-results .dr-name .tld-part{color:var(--red);font-weight:600}.dom-results .dr-status{font-size:12.5px;font-weight:600;display:inline-flex;align-items:center;gap:6px;white-space:nowrap}.dom-results .dr-status.free{color:var(--green)}.dom-results .dr-status.taken{color:var(--mid)}.dom-results .dr-price{font-size:14px;color:var(--ink-2);font-weight:600;text-align:right;white-space:nowrap}.dom-results .dr-price .yr{font-size:11px;color:var(--mid);font-weight:500;display:block}.dom-results .dr-action{padding:9px 16px;border-radius:8px;font-size:13px;font-weight:600;background:var(--red);color:#fff;display:inline-flex;align-items:center;gap:6px;white-space:nowrap;border:none;cursor:pointer;text-decoration:none}.dom-results .dr-action:hover{background:var(--red-hover)}.dom-results .dr-action:disabled{background:var(--line-2);color:var(--mid);cursor:not-allowed}.dom-results .dr-action.whois{background:var(--paper-2);color:var(--ink-2);border:1px solid var(--line)}.dom-results .dr-action.whois:hover{background:var(--paper)}/* Eingeloggte Kunden:drei Aktionen pro Domain-Zeile (in bestehendes Paket / neues Paket / externe IP). dr-actions ist der Spalten-Wrapper. */ .dom-results .dr-actions{display:inline-flex;flex-direction:column;gap:6px;align-items:stretch}.dom-results .dr-actions .dr-action{justify-content:center;white-space:nowrap}.dom-results .dr-action.dr-action-secondary{background:var(--paper-2);color:var(--ink-2);border:1px solid var(--line);font-weight:500;font-size:12.5px;padding:7px 14px}.dom-results .dr-action.dr-action-secondary:hover{background:var(--paper)}/* Mobile:Spalten umbrechen lassen,Action volle Breite */ @media (max-width:640px){.dom-results .dr-row{flex-wrap:wrap;gap:8px 14px;padding:14px 18px}.dom-results .dr-name{flex:1 1 100%;order:1}.dom-results .dr-status{order:2}.dom-results .dr-price{order:3}.dom-results .dr-action,.dom-results .dr-actions{flex:1 1 100%;order:4}.dom-results .dr-action{justify-content:center}}