/* Bundle-Format: 3 | name=public-base-legacy | sources=8 */ /* ============================================================ 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}}/* ══════════════════════════════════════════════════ HostingPlus.de — Mockup-aligned production layout ══════════════════════════════════════════════════ */ *{margin:0;padding:0;box-sizing:border-box}body.public-body{font-family:'Inter',-apple-system,BlinkMacSystemFont,sans-serif;color:#1a1a1a;line-height:1.5;background:#fff}.public-body a{text-decoration:none;color:inherit}/* Top Bar */ .top-bar{background:#05060a;color:rgba(255,255,255,0.78);font-size:12px;padding:7px 0;border-bottom:1px solid rgba(255,255,255,0.05)}.top-bar-inner{max-width:1240px;margin:0 auto;padding:0 24px;display:flex;justify-content:space-between;align-items:center}.top-bar-left{display:flex;gap:24px}.top-bar-item{display:flex;align-items:center;gap:6px}.top-bar-item .dot{width:6px;height:6px;background:#e21b23;border-radius:50%;box-shadow:0 0 8px rgba(226,27,35,0.6)}.top-bar-right{display:flex;gap:20px}.top-bar-right span{display:inline-flex;align-items:center;gap:4px}/* Header — dark,sticky,backdrop-blur */ .site-header{background:rgba(11,18,32,0.92);backdrop-filter:saturate(180%) blur(14px);-webkit-backdrop-filter:saturate(180%) blur(14px);padding:14px 0;border-bottom:1px solid rgba(255,255,255,0.06);position:sticky;top:0;z-index:900;transition:padding 0.2s ease,background 0.2s ease,border-color 0.2s ease}.site-header.is-scrolled{padding:10px 0;background:rgba(8,12,22,0.86);border-bottom-color:rgba(255,255,255,0.09);box-shadow:0 8px 24px rgba(0,0,0,0.3)}.header-inner{max-width:1240px;margin:0 auto;padding:0 24px;display:flex;justify-content:space-between;align-items:center;gap:24px}.logo{display:flex;flex-direction:column;flex-shrink:0}.logo-main{font-size:22px;font-weight:800;color:#fff;line-height:1;letter-spacing:-0.02em}.logo-main span{color:#e21b23}.logo-tagline{font-size:10px;color:rgba(255,255,255,0.55);margin-top:4px;letter-spacing:0.02em}.public-body nav{display:flex;gap:4px;align-items:center}.public-body nav .nav-item{position:relative;font-size:14px;font-weight:500;color:rgba(255,255,255,0.82);padding:8px 14px;border-radius:8px;transition:color 0.15s ease,background 0.15s ease;cursor:pointer;display:inline-flex;align-items:center;gap:4px}.public-body nav .nav-item:hover,.public-body nav .nav-item.active,.public-body nav .nav-item.mega-open{color:#fff;background:rgba(255,255,255,0.06)}.public-body nav .nav-item.active::after{content:'';position:absolute;left:14px;right:14px;bottom:2px;height:2px;background:#e21b23;border-radius:2px}.public-body nav .nav-trigger{display:inline-flex;align-items:center;gap:4px;color:inherit}.public-body nav .nav-trigger .caret{font-size:10px;transition:transform 0.2s ease}.nav-item.mega-open .nav-trigger .caret,.nav-item.has-mega:hover .nav-trigger .caret{transform:rotate(180deg)}/* Mega Menu */ .mega-menu{position:absolute;top:100%;left:50%;transform:translateX(-50%) translateY(-8px);min-width:720px;background:#0f1729;border:1px solid rgba(255,255,255,0.08);border-radius:16px;box-shadow:0 24px 60px rgba(0,0,0,0.5);padding:20px;margin-top:12px;opacity:0;visibility:hidden;pointer-events:none;transition:opacity 0.2s ease,transform 0.2s ease,visibility 0.2s;z-index:1000}/* Unsichtbare Hover-Bruecke zwischen Trigger und Menue */ .mega-menu::before{content:'';position:absolute;top:-12px;left:0;right:0;height:12px;background:transparent}.nav-item.has-mega:hover .mega-menu,.nav-item.mega-open .mega-menu{opacity:1;visibility:visible;pointer-events:auto;transform:translateX(-50%) translateY(0)}.mega-inner{display:grid;grid-template-columns:repeat(2,1fr);gap:8px}.mega-card{display:block;padding:16px;border-radius:12px;transition:background 0.15s ease,transform 0.15s ease;color:#fff}.mega-card:hover{background:rgba(226,27,35,0.08);transform:translateY(-1px)}.mega-icon{font-size:22px;margin-bottom:8px}.mega-title{font-size:15px;font-weight:700;color:#fff;margin-bottom:4px}.mega-sub{font-size:13px;color:rgba(255,255,255,0.6);line-height:1.4}.mega-footer{margin-top:12px;padding-top:12px;border-top:1px solid rgba(255,255,255,0.08);text-align:center}.mega-all{font-size:13px;font-weight:600;color:#e21b23}.mega-all:hover{color:#ff4d52}.header-actions{display:flex;gap:10px;align-items:center;flex-shrink:0}.btn-icon{width:38px;height:38px;display:inline-flex;align-items:center;justify-content:center;border-radius:8px;background:rgba(255,255,255,0.06);color:#fff;font-size:15px;transition:background 0.15s ease,color 0.15s ease}.btn-icon:hover{background:rgba(226,27,35,0.2);color:#fff}.btn{padding:10px 20px;border-radius:6px;font-size:14px;font-weight:600;cursor:pointer;border:none;display:inline-flex;align-items:center;gap:6px;transition:all 0.2s;font-family:inherit;text-decoration:none}.btn-outline{background:#fff;border:2px solid #e21b23;color:#e21b23}.btn-outline:hover{background:#fef2f2}.btn-primary{background:#e21b23;color:#fff}.btn-primary:hover{background:#c91920;color:#fff}.btn-white{background:#fff;color:#1a1a1a;border:1px solid #ddd}.btn-white:hover{background:#f5f5f5;color:#1a1a1a}.btn-ghost-link{background:transparent;color:#555;border:none;padding:10px 14px;font-weight:600}.btn-ghost-link:hover{color:#e21b23;background:#fef2f2}/* Hero */ .hero{background:linear-gradient(135deg,#f8f8f8 0%,#f0f0f0 100%);padding:40px 0 30px;position:relative;overflow:hidden}.hero-inner{max-width:1200px;margin:0 auto;padding:0 20px;display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:center}.hero-badge{font-size:11px;font-weight:600;color:#e21b23;text-transform:uppercase;letter-spacing:1px;margin-bottom:16px;display:inline-block;background:#fef2f2;padding:6px 12px;border-radius:4px}.hero h1{font-size:48px;font-weight:800;line-height:1.1;margin-bottom:20px;color:#1a1a1a}.hero h1 em{color:#e21b23;font-style:normal}.hero-text{font-size:16px;color:#555;margin-bottom:28px;max-width:400px}.hero-buttons{display:flex;gap:12px;margin-bottom:32px}.hero-features{display:flex;gap:24px;flex-wrap:wrap}.hero-feature{display:flex;align-items:center;gap:8px;font-size:13px;color:#333}.hero-feature .check{color:#e21b23;font-weight:bold}.hero-image{position:relative;text-align:center}.hero-image img{width:100%;max-width:550px;border-radius:12px}/* Services */ .services{padding:24px 0;background:#fff}.services-inner{max-width:1200px;margin:0 auto;padding:0 20px}.services-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}.service-card{background:#fff;border:1px solid #eee;border-radius:12px;padding:28px;display:flex;gap:20px;transition:box-shadow 0.2s}.service-card:hover{box-shadow:0 8px 30px rgba(0,0,0,0.08)}.service-icon{width:60px;height:60px;flex-shrink:0}.service-icon img,.service-icon svg{width:100%;height:100%;object-fit:contain}.service-card h3{font-size:18px;font-weight:700;margin-bottom:8px;color:#1a1a1a}.service-card p{font-size:14px;color:#666;margin-bottom:12px}.service-link{font-size:14px;font-weight:600;color:#e21b23;display:inline-flex;align-items:center;gap:4px}/* Why Stay */ .why-stay{padding:36px 0;background:#fafafa}.why-stay-inner{max-width:1200px;margin:0 auto;padding:0 20px;display:grid;grid-template-columns:280px 1fr;gap:60px}.why-stay-left .badge{font-size:11px;font-weight:600;color:#e21b23;text-transform:uppercase;letter-spacing:1px;margin-bottom:12px;display:block}.why-stay-left h2{font-size:32px;font-weight:800;line-height:1.2;margin-bottom:16px;color:#1a1a1a}.why-stay-left p{font-size:14px;color:#666;margin-bottom:20px}.why-stay-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}.why-card{background:#fff;border:1px solid #eee;border-radius:10px;padding:20px}.why-card-header{display:flex;align-items:center;gap:10px;margin-bottom:10px}.why-card-icon{width:20px;height:20px;color:#e21b23;flex-shrink:0}.why-card h4{font-size:14px;font-weight:700;color:#1a1a1a}.why-card p{font-size:13px;color:#666;line-height:1.5}/* Packages */ .packages{padding:36px 0;background:#fff}.packages-inner{max-width:1200px;margin:0 auto;padding:0 20px}.packages-header{display:grid;grid-template-columns:280px 1fr;gap:40px;align-items:start}.packages-left .badge{font-size:11px;font-weight:600;color:#e21b23;text-transform:uppercase;letter-spacing:1px;margin-bottom:12px;display:block}.packages-left h2{font-size:32px;font-weight:800;line-height:1.2;margin-bottom:16px;color:#1a1a1a}.packages-left p{font-size:14px;color:#666}.packages-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}.package-card{background:#fff;border:1px solid #eee;border-radius:12px;padding:24px;position:relative}.package-card.featured{border-color:#e21b23;box-shadow:0 4px 20px rgba(226,27,35,0.15)}.package-badge{position:absolute;top:-10px;right:16px;background:#e21b23;color:#fff;font-size:10px;font-weight:600;padding:4px 10px;border-radius:4px;text-transform:uppercase}.package-icon{width:32px;height:32px;margin-bottom:12px}.package-card h3{font-size:18px;font-weight:700;margin-bottom:8px;color:#1a1a1a}.package-card>p{font-size:13px;color:#666;margin-bottom:16px}.package-features{list-style:none;margin-bottom:20px}.package-features li{font-size:13px;color:#444;padding:4px 0;padding-left:18px;position:relative}.package-features li::before{content:"\2713";position:absolute;left:0;color:#e21b23;font-weight:bold;font-size:12px}.package-link{font-size:14px;font-weight:600;color:#e21b23;display:inline-flex;align-items:center;gap:4px}/* Promo Banner */ .promo-banner{background:linear-gradient(135deg,#fff5f5 0%,#ffecec 100%);border:1px solid #fecaca;border-radius:12px;margin:16px auto 24px;max-width:1160px;padding:18px 30px;display:flex;align-items:center;justify-content:space-between}.promo-left{display:flex;align-items:center;gap:16px}.promo-icon{width:40px;height:40px;background:#e21b23;border-radius:8px;display:flex;align-items:center;justify-content:center;color:#fff;font-size:20px}.promo-text strong{color:#e21b23;font-weight:700}.promo-text{font-size:15px;color:#333}.promo-right{display:flex;align-items:center;gap:20px}.promo-link{font-size:14px;font-weight:600;color:#e21b23;display:flex;align-items:center;gap:4px}/* Testimonials */ .testimonials{background:#e21b23;padding:36px 0}.testimonials-inner{max-width:1200px;margin:0 auto;padding:0 20px}.testimonials-header{color:#fff;margin-bottom:30px}.testimonials-header .badge{font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:1px;opacity:0.8;margin-bottom:8px;display:block}.testimonials-header h2{font-size:28px;font-weight:800;color:#fff}.testimonials-header p{font-size:14px;opacity:0.9}.testimonials-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-bottom:30px}.testimonial-card{background:#fff;border-radius:12px;padding:24px}.testimonial-stars{color:#e21b23;font-size:14px;margin-bottom:12px;letter-spacing:2px}.testimonial-text{font-size:14px;color:#444;font-style:italic;margin-bottom:16px;line-height:1.6}.testimonial-author{font-size:13px;color:#666}.testimonials-features{display:flex;justify-content:center;gap:40px;color:#fff;flex-wrap:wrap}.testimonials-feature{display:flex;align-items:center;gap:8px;font-size:14px}.testimonials-feature .check{width:18px;height:18px;background:rgba(255,255,255,0.2);border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:10px}/* Domain Search */ .domain-search{padding:36px 0;background:#fff}.domain-search-inner{max-width:1200px;margin:0 auto;padding:0 20px;display:grid;grid-template-columns:1fr 1.5fr;gap:40px;align-items:center}.domain-left{display:flex;gap:20px;align-items:flex-start}.domain-icon{width:60px;height:60px;background:#fef2f2;border-radius:12px;display:flex;align-items:center;justify-content:center;flex-shrink:0}.domain-icon svg{width:32px;height:32px;color:#e21b23}.domain-left h2{font-size:24px;font-weight:800;margin-bottom:8px;color:#1a1a1a}.domain-left p{font-size:14px;color:#666}.domain-right{text-align:center}.domain-form{display:flex;gap:8px;margin-bottom:16px}.domain-input{flex:1;padding:14px 18px;border:1px solid #ddd;border-radius:8px;font-size:15px;font-family:inherit}.domain-select{padding:14px 16px;border:1px solid #ddd;border-radius:8px;font-size:15px;background:#fff;cursor:pointer;font-family:inherit}.domain-tlds{display:flex;justify-content:center;gap:16px}.domain-tld{font-size:14px;color:#666;padding:6px 12px;border-radius:4px;cursor:pointer}.domain-tld:hover{background:#f5f5f5}/* About Section */ .about-section{background:#f8f8f8}.about-inner{max-width:1200px;margin:0 auto;display:grid;grid-template-columns:1fr 1fr}.about-left{padding:36px 40px}.about-left h2{font-size:28px;font-weight:800;margin-bottom:16px;color:#1a1a1a}.about-left p{font-size:14px;color:#666;margin-bottom:20px}.about-image{background:url('/assets/img/icons/placeholder-team-photo.png') center / cover;min-height:250px}/* CTA Section */ .cta-section{background:linear-gradient(135deg,#1a1a1a 0%,#2a2a2a 100%);color:#fff}.cta-inner{max-width:1200px;margin:0 auto;display:grid;grid-template-columns:1fr 1fr}.cta-image{background:url('/assets/img/hero-server-visual.png') center / cover;min-height:220px}.cta-content{padding:36px 40px;background:#e21b23}.cta-content h2{font-size:26px;font-weight:800;margin-bottom:12px;color:#fff}.cta-content p{font-size:14px;opacity:0.9;margin-bottom:24px}.cta-buttons{display:flex;gap:12px}.btn-cta-outline{background:transparent;border:2px solid #fff;color:#fff}.btn-cta-outline:hover{background:rgba(255,255,255,0.1);color:#fff}.btn-cta-white{background:#fff;color:#1a1a1a;border:none}.btn-cta-white:hover{background:#f5f5f5;color:#1a1a1a}/* Blog Section */ .blog-section{padding:36px 0;background:#fff;border-top:1px solid #eee}.blog-inner{max-width:1200px;margin:0 auto;padding:0 20px;display:grid;grid-template-columns:250px 1fr;gap:40px}.blog-header .badge{font-size:11px;font-weight:600;color:#666;text-transform:uppercase;letter-spacing:1px;margin-bottom:12px;display:block}.blog-header h2{font-size:24px;font-weight:800;margin-bottom:8px;color:#1a1a1a}.blog-header p{font-size:14px;color:#666;margin-bottom:16px}.blog-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:24px}.blog-card{display:flex;gap:16px;background:#fff;border:1px solid #eee;border-radius:10px;overflow:hidden}.blog-card-image{width:140px;height:120px;flex-shrink:0;background:#f0f0f0;display:flex;align-items:center;justify-content:center}.blog-card-content{padding:16px 16px 16px 0;display:flex;flex-direction:column}.blog-card-meta{display:flex;gap:12px;font-size:11px;margin-bottom:8px}.blog-card-meta .tag{background:#fef2f2;color:#e21b23;padding:2px 8px;border-radius:3px;font-weight:600}.blog-card-meta .date{color:#999}.blog-card h3{font-size:14px;font-weight:700;margin-bottom:6px;line-height:1.4;color:#1a1a1a}.blog-card p{font-size:12px;color:#666;margin-bottom:8px}.blog-link{font-size:13px;font-weight:600;color:#e21b23;display:inline-flex;align-items:center;gap:4px;margin-top:auto}/* Footer */ .site-footer{background:#1a1a1a;color:#fff;padding:50px 0 30px}.footer-inner{max-width:1200px;margin:0 auto;padding:0 20px}.footer-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr 1fr;gap:40px;margin-bottom:40px}.footer-logo{font-size:22px;font-weight:800;margin-bottom:8px;color:#fff}.footer-logo span{color:#e21b23}.footer-tagline{font-size:11px;color:#888;margin-bottom:16px}.footer-info{font-size:12px;color:#888;line-height:1.8}.footer-col h4{font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:0.5px;margin-bottom:16px;color:#888}.footer-col ul{list-style:none}.footer-col li{margin-bottom:10px}.footer-col a{font-size:13px;color:#ccc;transition:color 0.2s}.footer-col a:hover{color:#fff}.footer-social{display:flex;gap:12px;margin-top:8px}.footer-social a{width:32px;height:32px;background:#333;border-radius:50%;display:flex;align-items:center;justify-content:center;color:#fff;font-size:14px;transition:background 0.2s}.footer-social a:hover{background:#e21b23}.footer-social img{width:16px;height:16px;filter:brightness(0) invert(1)}.footer-bottom{border-top:1px solid #333;padding-top:20px;display:flex;justify-content:space-between;font-size:12px;color:#888}.footer-links{display:flex;gap:20px}.footer-links a{color:#888}.footer-links a:hover{color:#fff}/* ════ Subpage Components ════ */ .btn-lg{padding:14px 28px;font-size:15px}/* Page Hero (small hero for info/product pages) */ .page-hero{background:linear-gradient(135deg,#f8f8f8 0%,#f0f0f0 100%);padding:50px 0 50px;text-align:center}.page-hero-inner{max-width:1200px;margin:0 auto;padding:0 20px}.page-hero .badge-pill{display:inline-block;font-size:11px;font-weight:600;color:#e21b23;text-transform:uppercase;letter-spacing:1px;margin-bottom:14px;background:#fef2f2;padding:6px 14px;border-radius:4px}.page-hero h1{font-size:42px;font-weight:800;line-height:1.1;margin-bottom:14px;color:#1a1a1a}.page-hero p{font-size:16px;color:#555;max-width:640px;margin:0 auto}/* Content Block (for info pages) */ .content-block{padding:50px 0;background:#fff}.content-block-inner{max-width:820px;margin:0 auto;padding:0 20px}.content-block h2{font-size:28px;font-weight:800;color:#1a1a1a;margin:0 0 16px}.content-block h3{font-size:20px;font-weight:700;color:#1a1a1a;margin:28px 0 10px}.content-block h4{font-size:16px;font-weight:700;color:#1a1a1a;margin:20px 0 8px}.content-block p{font-size:15px;color:#555;line-height:1.7;margin-bottom:14px}.content-block ul{padding-left:20px;margin-bottom:16px}.content-block li{font-size:15px;color:#555;line-height:1.9}.content-block a{color:#e21b23;font-weight:600}.content-grid-2{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:start}/* Contact Form */ .contact-card{background:#fff;border:1px solid #e8e8e8;border-radius:16px;padding:32px;box-shadow:0 4px 24px rgba(0,0,0,0.06)}.contact-card-header{display:flex;align-items:center;gap:12px;margin-bottom:28px;padding-bottom:20px;border-bottom:1px solid #f0f0f0}.contact-card-header h3{margin:0;font-size:20px;font-weight:700;color:#111}.contact-form{margin:0}.contact-row{display:grid;grid-template-columns:1fr 1fr;gap:16px}.contact-form-group{margin-bottom:20px}.contact-form-group label{display:block;font-size:13px;font-weight:600;color:#444;margin-bottom:8px;letter-spacing:0.02em}.contact-input{width:100%;padding:14px 18px;border:2px solid #eaeaea;border-radius:10px;font-size:15px;font-family:inherit;color:#222;background:#fafafa;transition:all 0.2s ease;box-sizing:border-box}.contact-input::placeholder{color:#aaa}.contact-input:hover{border-color:#ccc;background:#fff}.contact-input:focus{outline:none;border-color:#e21b23;background:#fff;box-shadow:0 0 0 4px rgba(226,27,35,0.08)}textarea.contact-input{resize:vertical;min-height:140px}.contact-hint{font-size:12px;color:#999;margin-top:14px;text-align:center}/* Contact Info Cards */ .contact-info-card{display:flex;gap:16px;align-items:flex-start;padding:20px;background:#fff;border:1px solid #eee;border-radius:12px;margin-bottom:12px;transition:box-shadow 0.2s}.contact-info-card:hover{box-shadow:0 2px 12px rgba(0,0,0,0.06)}.contact-info-icon{width:44px;height:44px;min-width:44px;max-width:44px;border-radius:10px;background:#fef2f2;color:#e21b23;display:flex;align-items:center;justify-content:center;overflow:hidden;flex-shrink:0}.contact-info-icon svg{width:20px;height:20px;min-width:20px;min-height:20px;max-width:20px;max-height:20px}.contact-info-card h4{margin:0 0 4px;font-size:14px;font-weight:700;color:#222}.contact-info-card p{margin:0;font-size:14px;color:#666;line-height:1.5}.contact-kunde-card{margin-top:24px;padding:24px;background:linear-gradient(135deg,#1a1a1a,#2a2a2a);border-radius:16px;color:#fff}.contact-kunde-card h4{margin:0 0 8px;font-size:16px;font-weight:700}.contact-kunde-card p{margin:0 0 18px;font-size:14px;color:#aaa;line-height:1.5}/* Contact Alerts */ .contact-alert{padding:16px 24px;border-radius:12px;margin-bottom:28px;font-size:14px;font-weight:500}.contact-alert-success{background:#f0fdf4;border:1px solid #86efac;color:#166534}.contact-alert-error{background:#fefce8;border:1px solid #fde68a;color:#854d0e}@media (max-width:768px){.page-hero{padding:36px 0}.page-hero h1{font-size:30px}.content-grid-2{grid-template-columns:1fr;gap:24px}.content-block{padding:36px 0}.contact-card{padding:24px 20px}.contact-row{grid-template-columns:1fr}}.section-inner{max-width:1200px;margin:0 auto;padding:0 20px}.section-header{text-align:center;margin-bottom:40px}.section-badge{font-size:11px;font-weight:600;color:#e21b23;text-transform:uppercase;letter-spacing:1px;margin-bottom:12px;display:block}.section-title{font-size:36px;font-weight:800;margin-bottom:16px;color:#1a1a1a}.section-subtitle{font-size:16px;color:#666;max-width:600px;margin:0 auto}.hero h1 em{color:#e21b23;font-style:italic}.hero-server-icon{width:320px;height:280px;max-width:100%}/* Sub Pricing Cards */ .pricing-section{background:#fff;padding:36px 0}.sub-pricing-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}.sub-pricing-card{background:#fff;border:1px solid #e5e5e5;border-radius:16px;padding:32px;position:relative;transition:all 0.3s;display:flex;flex-direction:column}.sub-pricing-card:hover{box-shadow:0 12px 40px rgba(0,0,0,0.1);transform:translateY(-4px)}.sub-pricing-card.featured{border-color:#e21b23;box-shadow:0 8px 30px rgba(226,27,35,0.15)}.sub-pricing-badge{position:absolute;top:-12px;right:24px;background:#e21b23;color:#fff;font-size:11px;font-weight:700;padding:6px 14px;border-radius:6px;text-transform:uppercase;letter-spacing:0.5px}.sub-pricing-header{margin-bottom:24px;padding-bottom:24px;border-bottom:1px solid #eee}.sub-pricing-icon{width:48px;height:48px;margin-bottom:16px}.sub-pricing-name{font-size:22px;font-weight:700;margin-bottom:8px;color:#1a1a1a}.sub-pricing-desc{font-size:14px;color:#666;margin-bottom:20px}.sub-pricing-price{display:flex;align-items:baseline;gap:4px}.sub-pricing-currency{font-size:20px;font-weight:700;color:#1a1a1a}.sub-pricing-amount{font-size:48px;font-weight:800;color:#1a1a1a;line-height:1}.sub-pricing-period{font-size:14px;color:#888}.sub-pricing-original{font-size:14px;color:#999;text-decoration:line-through;margin-top:6px}.sub-pricing-features{list-style:none;margin-bottom:28px;padding:0;flex:1}.sub-pricing-features li{font-size:14px;color:#444;padding:10px 0;padding-left:28px;position:relative;border-bottom:1px solid #f5f5f5}.sub-pricing-features li:last-child{border-bottom:none}.sub-pricing-features li::before{content:"\2713";position:absolute;left:0;color:#e21b23;font-weight:bold;font-size:14px}.sub-pricing-features li.highlight{font-weight:600;color:#1a1a1a}.sub-pricing-cta{width:100%;justify-content:center}/* Features Grid Sub */ .features-section{background:#fafafa;padding:36px 0}.features-grid-sub{display:grid;grid-template-columns:repeat(4,1fr);gap:24px}.feature-card-sub{background:#fff;border:1px solid #eee;border-radius:12px;padding:28px;text-align:center;transition:all 0.2s}.feature-card-sub:hover{box-shadow:0 8px 30px rgba(0,0,0,0.06)}.feature-icon-sub{width:48px;height:48px;margin:0 auto 16px;color:#e21b23;display:block}.feature-card-sub h3{font-size:16px;font-weight:700;margin-bottom:8px;color:#1a1a1a}.feature-card-sub p{font-size:13px;color:#666;line-height:1.6}/* Comparison Table */ .comparison-section{background:#fff;padding:36px 0}.comparison-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}.comparison-table{width:100%;border-collapse:collapse;background:#fff;border-radius:12px;overflow:hidden;box-shadow:0 2px 12px rgba(0,0,0,0.06);min-width:640px}.comparison-table th,.comparison-table td{padding:16px 20px;text-align:left;border-bottom:1px solid #eee}.comparison-table th{background:#1a1a1a;color:#fff;font-size:14px;font-weight:600}.comparison-table th:not(:first-child),.comparison-table td:not(:first-child){text-align:center}.comparison-table td{font-size:14px;color:#444}.comparison-table tr:hover td{background:#fafafa}.comparison-table .check-icon{color:#e21b23;font-weight:bold}.comparison-table .feature-name{font-weight:500}.comparison-table .featured-col{background:#fef2f2}.comparison-table th.featured-col{background:#e21b23}/* FAQ Section */ .faq-section{background:#fafafa;padding:36px 0}.faq-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:24px}.faq-item{background:#fff;border:1px solid #eee;border-radius:12px;padding:24px}.faq-question{font-size:16px;font-weight:700;margin-bottom:12px;display:flex;align-items:flex-start;gap:12px;color:#1a1a1a}.faq-question::before{content:"?";display:flex;align-items:center;justify-content:center;width:24px;height:24px;background:#e21b23;color:#fff;border-radius:50%;font-size:14px;font-weight:700;flex-shrink:0}.faq-answer{font-size:14px;color:#666;line-height:1.7;padding-left:36px}/* CTA Strip (subpage CTA) */ .cta-strip{background:#e21b23;color:#fff;padding:50px 0}.cta-strip-inner{max-width:1200px;margin:0 auto;padding:0 20px;display:flex;align-items:center;justify-content:space-between;gap:40px;flex-wrap:wrap}.cta-strip-content h2{font-size:30px;font-weight:800;margin-bottom:10px;color:#fff}.cta-strip-content p{font-size:15px;opacity:0.9;max-width:540px}.cta-strip-buttons{display:flex;gap:14px;flex-wrap:wrap}.cta-strip .btn-cta-white{background:#fff;color:#e21b23;border:none}.cta-strip .btn-cta-white:hover{background:#f5f5f5;color:#e21b23}.cta-strip .btn-cta-outline{background:transparent;border:2px solid #fff;color:#fff}.cta-strip .btn-cta-outline:hover{background:rgba(255,255,255,0.15);color:#fff}/* ════ Mobile Navigation Toggle ════ */ .mobile-nav-toggle{display:none;background:rgba(255,255,255,0.06);border:1px solid rgba(255,255,255,0.12);border-radius:8px;padding:8px 12px;cursor:pointer;font-size:20px;color:#fff;margin-left:auto}.mobile-nav-actions{display:none}/* ════ Responsive Breakpoints ════ */ /* Tablet Landscape (1100px) */ @media (max-width:1100px){.footer-grid{grid-template-columns:1.5fr 1fr 1fr 1fr;gap:30px}.why-stay-inner,.packages-header{gap:30px}.hero h1{font-size:40px}.section-title{font-size:30px}}/* Tablet (991px) */ @media (max-width:991px){.top-bar-left{flex-wrap:wrap;gap:12px}.top-bar-left .top-bar-item:last-child{display:none}.header-inner{flex-wrap:wrap;gap:12px}.public-body nav{order:3;width:100%;flex-wrap:wrap;gap:8px;padding-top:12px;border-top:1px solid rgba(255,255,255,0.08);justify-content:center}.mega-menu{position:static;transform:none;min-width:0;width:100%;box-shadow:none;background:rgba(255,255,255,0.04);border:1px solid rgba(255,255,255,0.06);margin-top:8px;padding:12px}.nav-item.has-mega:hover .mega-menu{opacity:0;visibility:hidden;pointer-events:none}.nav-item.mega-open .mega-menu{opacity:1;visibility:visible;pointer-events:auto;transform:none}.mega-inner{grid-template-columns:1fr 1fr}.header-actions{gap:8px}.header-actions .btn{padding:8px 14px;font-size:13px}.hero-inner,.why-stay-inner,.packages-header,.domain-search-inner,.about-inner,.cta-inner,.blog-inner{grid-template-columns:1fr;gap:30px}.services-grid,.why-stay-grid,.packages-grid,.testimonials-grid,.blog-grid{grid-template-columns:1fr 1fr}.sub-pricing-grid{grid-template-columns:1fr 1fr}.features-grid-sub{grid-template-columns:1fr 1fr}.footer-grid{grid-template-columns:1fr 1fr 1fr;gap:30px}.footer-col:first-child{grid-column:1 / -1}.hero{padding:30px 0 24px}.hero h1{font-size:36px}.about-inner,.cta-inner{grid-template-columns:1fr}.about-image,.cta-image{min-height:200px}.cta-strip-inner{flex-direction:column;text-align:center;align-items:center}.cta-strip-content p{margin:0 auto}}/* Mobile (768px) */ @media (max-width:768px){.top-bar{font-size:11px;padding:6px 0}.top-bar-inner{flex-direction:column;gap:6px}.top-bar-left,.top-bar-right{gap:12px;justify-content:center;flex-wrap:wrap}.top-bar-left .top-bar-item:nth-child(3),.top-bar-right span:first-child{display:none}.site-header{padding:12px 0}.header-inner{flex-wrap:wrap}.mobile-nav-toggle{display:block}.public-body nav{display:none;position:absolute;top:100%;left:0;right:0;background:#0b1220;flex-direction:column;padding:16px 20px;box-shadow:0 12px 32px rgba(0,0,0,0.5);border-top:1px solid rgba(255,255,255,0.08);gap:0;z-index:1000}.public-body nav.nav-open{display:flex}.public-body nav .nav-item{padding:12px 4px;border-bottom:1px solid rgba(255,255,255,0.06);border-radius:0;font-size:15px;width:100%;justify-content:flex-start}.public-body nav .nav-item.active::after{left:4px;right:auto;width:3px;top:12px;bottom:12px;height:auto}.public-body nav .nav-item:last-of-type{border-bottom:none}.mega-menu{margin-top:0;border-radius:0 0 8px 8px}.mobile-nav-actions{display:flex;flex-direction:column;gap:8px;padding-top:12px;margin-top:8px;border-top:1px solid rgba(255,255,255,0.08);width:100%}.mobile-nav-actions .btn-ghost-link{color:#fff}.header-actions{display:none}.header-inner{position:relative}.hero{padding:24px 0 20px}.hero h1{font-size:30px}.hero-text{font-size:15px}.hero-buttons{flex-direction:column;align-items:stretch}.hero-buttons .btn{justify-content:center}.hero-features{gap:14px}.section-title{font-size:26px}.services-grid,.why-stay-grid,.packages-grid,.testimonials-grid,.blog-grid,.footer-grid,.sub-pricing-grid,.features-grid-sub,.faq-grid{grid-template-columns:1fr}.promo-banner{flex-direction:column;gap:14px;text-align:center;padding:18px 20px}.testimonials-features{gap:16px;flex-direction:column;align-items:flex-start}.domain-form{flex-direction:column}.domain-form .btn{width:100%;justify-content:center}.about-left,.cta-content{padding:28px 24px}.cta-strip{padding:36px 0}.cta-strip-content h2{font-size:24px}.footer-col{text-align:center}.footer-social{justify-content:center}.footer-bottom{flex-direction:column;gap:12px;text-align:center}.footer-links{justify-content:center}}/* Small Mobile (480px) */ @media (max-width:480px){.hero h1{font-size:26px}.section-title{font-size:22px}.top-bar-left .top-bar-item:nth-child(2){display:none}.top-bar-right span:nth-child(2){display:none}.public-body nav{gap:10px;font-size:12px}.header-actions .btn{padding:7px 10px;font-size:12px}.pricing-card,.sub-pricing-card{padding:24px 20px}.testimonial-card{padding:20px}.why-card,.package-card,.blog-card{padding:18px}.blog-card{flex-direction:column}.blog-card-image{width:100%;height:120px}.blog-card-content{padding:16px}.promo-banner{margin:16px 16px 24px}.sub-pricing-amount{font-size:36px}.feature-card-sub{padding:22px 18px}.faq-question{font-size:15px}.faq-answer{padding-left:0}.cta-strip-buttons{flex-direction:column;width:100%}.cta-strip-buttons .btn{justify-content:center}}