/* ========================================================== HEADER / NAVIGATION ========================================================== */ .site-header{position:fixed;top:0;left:0;right:0;z-index:1000;background:var(--header-bg,var(--color-black));border-bottom:1px solid var(--color-gray-dark);transition:var(--transition);}.admin-bar .site-header{top:32px;}@media screen and (max-width:782px){.admin-bar .site-header{top:46px;}}.site-header.is-scrolled{backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);background:rgba(10,10,10,0.92);}.site-header.is-hidden{transform:translateY(-100%);}.nav{display:flex;align-items:center;justify-content:space-between;height:115px;gap:32px;}.nav__logo{display:flex;align-items:center;flex-shrink:0;}.nav__logo-img{height:52px;width:auto;}.nav__logo-text{font-size:1.75rem;font-family:var(--font-display);letter-spacing:0.1em;color:var(--color-pure-white);text-transform:uppercase;}.nav__menu{display:flex;align-items:center;gap:2px;flex:1;justify-content:flex-end;}.nav__link{display:inline-flex;align-items:center;gap:6px;padding:10px 16px;font-family:var(--font-heading);font-size:0.875rem;font-weight:500;letter-spacing:0.03em;color:var(--color-gray-light);border-radius:var(--border-radius);transition:var(--transition);white-space:nowrap;position:relative;}.nav__link::after{content:'';position:absolute;bottom:4px;left:16px;right:16px;height:2px;background:var(--color-accent);transform:scaleX(0);transition:transform 0.25s ease;transform-origin:left;}.nav__link:hover::after,.nav__link.active::after{transform:scaleX(1);}.nav__link:hover,.nav__link.active{color:var(--color-accent);}.nav__link--cta{margin-left:12px;}.nav__link--cta::after{display:none;}.nav__link--cta.btn-primary{background:#068b8b !important;color:#ffffff !important;border:2px solid #068b8b !important;padding:12px 24px !important;}.nav__link--cta.btn-primary:hover{background:#0a9f9f !important;border-color:#0a9f9f !important;color:#ffffff !important;}/* The trigger item must NOT be relative — the mega panel is positioned relative to .site-header instead */ .nav__item--mega{position:static;}.mega-menu{position:absolute;top:100%;left:0;right:0;width:100%;background:var(--color-dark-2);border-top:1px solid var(--color-gray-dark);border-bottom:1px solid var(--color-gray-dark);box-shadow:0 24px 64px rgba(0,0,0,0.7);opacity:0;pointer-events:none;transform:translateY(-12px);transition:opacity 0.25s ease,transform 0.25s ease;z-index:999;}.mega-menu.is-open{opacity:1;pointer-events:all;transform:translateY(0);}.mega-menu__inner{display:grid;grid-template-columns:repeat(5,1fr);gap:0;max-width:1600px;margin:0 auto;width:100%;}.mega-col{padding:32px 22px;border-right:1px solid var(--color-gray-dark);min-width:0;}.mega-col:last-child{border-right:none;}.mega-col__label{display:block;font-family:var(--font-mono);font-size:0.65rem;letter-spacing:0.2em;text-transform:uppercase;color:var(--color-gray-mid);margin-bottom:20px;padding-bottom:12px;border-bottom:1px solid var(--color-gray-dark);}.mega-link{display:flex;align-items:center;gap:14px;padding:12px 14px;margin:0 -14px;border-radius:var(--border-radius);color:var(--color-gray-light);transition:var(--transition);text-decoration:none;}.mega-link:hover{background:rgba(6,139,139,0.1);color:var(--color-accent);}.mega-link:hover .mega-link__icon{border-color:var(--color-accent);color:var(--color-accent);}.mega-link__icon{width:40px;height:40px;background:var(--color-dark-3);border:1px solid var(--color-gray-dark);border-radius:var(--border-radius);display:flex;align-items:center;justify-content:center;flex-shrink:0;color:var(--color-gray-light);transition:var(--transition);}.mega-link__body{flex:1;min-width:0;}.mega-link__title{display:block;font-family:var(--font-heading);font-size:0.875rem;font-weight:600;color:inherit;margin-bottom:2px;white-space:nowrap;}.mega-link__desc{display:block;font-size:0.75rem;color:var(--color-gray-mid);line-height:1.4;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}.mega-link__arrow{opacity:0;transform:translateX(-4px);transition:opacity 0.2s,transform 0.2s;color:var(--color-gray-mid);flex-shrink:0;}.mega-link:hover .mega-link__arrow{opacity:1;transform:translateX(0);}.mega-link--featured{background:linear-gradient(135deg,rgba(6,139,139,0.08) 0%,rgba(6,139,139,0.03) 100%);border:1px solid var(--color-accent);border-radius:8px;margin-bottom:8px;}.mega-link--featured:hover{background:linear-gradient(135deg,rgba(6,139,139,0.12) 0%,rgba(6,139,139,0.05) 100%);}.mega-link__badge{display:inline-block;background:var(--color-accent);color:#fff;font-size:0.6rem;font-weight:700;padding:2px 6px;border-radius:3px;text-transform:uppercase;letter-spacing:0.05em;margin-left:6px;vertical-align:middle;}.mega-col--featured{background:var(--color-dark-3);padding:32px 22px;display:flex;flex-direction:column;}.mega-featured__eyebrow{font-family:var(--font-mono);font-size:0.65rem;letter-spacing:0.2em;text-transform:uppercase;color:var(--color-gray-mid);margin-bottom:16px;}.mega-featured__title{font-family:var(--font-heading);font-size:1.1rem;font-weight:700;color:var(--color-pure-white);margin-bottom:12px;line-height:1.3;}.mega-featured__text{font-size:0.825rem;color:var(--color-gray-mid);line-height:1.7;margin-bottom:24px;flex:1;}.mega-featured__stats{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:28px;padding:16px;background:rgba(255,255,255,0.03);border:1px solid var(--color-gray-dark);border-radius:var(--border-radius);}.mega-stat__num{display:block;font-family:var(--font-display);font-size:1.6rem;letter-spacing:0.04em;color:var(--color-pure-white);line-height:1;}.mega-stat__label{display:block;font-size:0.65rem;font-family:var(--font-heading);letter-spacing:0.1em;text-transform:uppercase;color:var(--color-gray-mid);margin-top:3px;}.nav__item--dropdown{position:relative;}.nav__dropdown{position:absolute;top:calc(100% + 8px);left:50%;transform:translateX(-50%) translateY(-8px);min-width:280px;background:var(--color-dark-2);border:1px solid var(--color-gray-dark);border-radius:var(--border-radius-lg);padding:8px;opacity:0;pointer-events:none;transition:opacity 0.2s ease,transform 0.2s ease;box-shadow:var(--shadow-lg);}.nav__dropdown.is-open{opacity:1;pointer-events:all;transform:translateX(-50%) translateY(0);}.nav__dropdown-link{display:flex;align-items:center;gap:14px;padding:12px 14px;border-radius:var(--border-radius);color:var(--color-gray-light);transition:var(--transition);}.nav__dropdown-link:hover{background:var(--color-dark-3);color:var(--color-pure-white);}.nav__dropdown-link strong{display:block;font-size:0.875rem;font-weight:600;}.nav__dropdown-link small{display:block;font-size:0.75rem;color:var(--color-gray-mid);margin-top:1px;}.nav__dropdown-icon{width:36px;height:36px;background:var(--color-dark-3);border:1px solid var(--color-gray-dark);border-radius:var(--border-radius);display:flex;align-items:center;justify-content:center;flex-shrink:0;color:var(--color-gray-light);}.nav__burger{display:none;flex-direction:column;justify-content:center;gap:5px;width:44px;height:44px;padding:10px;border-radius:var(--border-radius);cursor:pointer;transition:var(--transition);flex-shrink:0;z-index:100001 !important;position:relative;}.nav__burger:hover{background:var(--color-dark-2);}.burger-line{display:block;width:100%;height:2px;background:var(--color-pure-white);border-radius:2px;transition:transform 0.3s ease,opacity 0.3s ease;transform-origin:center;}.nav__burger.is-open .burger-line:nth-child(1){transform:translateY(7px) rotate(45deg);}.nav__burger.is-open .burger-line:nth-child(2){opacity:0;transform:scaleX(0);}.nav__burger.is-open .burger-line:nth-child(3){transform:translateY(-7px) rotate(-45deg);}.nav__mobile-overlay{position:fixed !important;top:0 !important;left:0 !important;right:0 !important;bottom:0 !important;width:100vw !important;height:100vh !important;height:100dvh !important;background:#0a0a0a !important;z-index:99999 !important;opacity:0;visibility:hidden;pointer-events:none;transform:translateX(100%);transition:opacity 0.35s ease,transform 0.35s ease,visibility 0.35s ease;overflow-y:auto;overflow-x:hidden;padding:24px;-webkit-overflow-scrolling:touch;display:none;}@media (max-width:1024px){.nav__mobile-overlay{display:block !important;}}.nav__mobile-overlay.is-open{opacity:1 !important;visibility:visible !important;pointer-events:all !important;transform:translateX(0) !important;}body.menu-open{overflow:hidden !important;position:fixed;width:100%;height:100%;}.nav__mobile ul{list-style:none;}.nav__mobile > ul > li{border-bottom:1px solid var(--color-gray-dark);}.nav__mobile > ul > li > a,.nav__mobile-sub > span{display:block;padding:18px 0;font-family:var(--font-heading);font-size:1.25rem;font-weight:600;color:var(--color-off-white);transition:var(--transition);}.nav__mobile > ul > li > a:hover{color:var(--color-pure-white);padding-left:8px;}.nav__mobile-sub > span{color:var(--color-gray-mid);font-size:0.75rem;font-weight:500;letter-spacing:0.15em;text-transform:uppercase;padding-bottom:8px;}.nav__mobile-sub ul{padding-bottom:12px;}.nav__mobile-sub ul li a{display:block;padding:8px 0;font-size:1rem;font-weight:400;color:var(--color-gray-light);}.nav__mobile-sub ul li a:hover{color:var(--color-pure-white);}.nav__mobile-header{display:flex;align-items:center;justify-content:space-between;padding-bottom:32px;margin-bottom:24px;border-bottom:1px solid var(--color-gray-dark);}.nav__mobile-logo{display:flex;align-items:center;}.nav__mobile-logo img{height:40px;width:auto;}.nav__mobile-logo span{font-family:var(--font-display);font-size:1.5rem;letter-spacing:0.1em;color:var(--color-pure-white);text-transform:uppercase;}.nav__mobile-cta{border-bottom:none !important;padding-top:24px;}.nav__mobile .btn,.nav__mobile-btn{display:flex !important;align-items:center;justify-content:center;width:100%;margin-top:8px;padding:18px 32px !important;background:var(--color-pure-white) !important;color:var(--color-black) !important;border:2px solid var(--color-pure-white) !important;font-size:1rem !important;font-weight:700 !important;text-align:center;border-radius:var(--border-radius);text-transform:uppercase;letter-spacing:0.05em;}.nav__mobile .btn:hover,.nav__mobile-btn:hover{background:transparent !important;color:var(--color-pure-white) !important;border-color:var(--color-pure-white) !important;}.topbar{position:relative;z-index:1001;padding:10px 0;border-bottom:1px solid rgba(255,255,255,0.06);}.topbar .container{display:flex;align-items:center;justify-content:center;position:relative;}.topbar__text{display:inline-flex;align-items:center;gap:8px;font-family:var(--font-heading);font-size:0.8rem;font-weight:500;letter-spacing:0.04em;color:var(--color-off-white);transition:var(--transition);}.topbar__text:hover{color:var(--color-pure-white);}.topbar__arrow{display:flex;transition:transform 0.2s ease;}.topbar__text:hover .topbar__arrow{transform:translateX(3px);}.topbar__close{position:absolute;right:40px;display:flex;align-items:center;justify-content:center;width:28px;height:28px;color:var(--color-gray-mid);border-radius:var(--border-radius);transition:var(--transition);}.topbar__close:hover{color:var(--color-off-white);background:rgba(255,255,255,0.05);}/* ========================================================== HERO ========================================================== */ .hero{position:relative;min-height:100vh;display:flex;flex-direction:column;justify-content:center;padding:175px 0 80px;background:var(--color-black);overflow:hidden;}.hero.has-bg-image{background-size:cover;background-position:center top;background-repeat:no-repeat;}.hero__overlay{position:absolute;inset:0;z-index:1;background:linear-gradient( 90deg,rgba(10,10,10,0.98) 0%,rgba(10,10,10,0.85) 55%,rgba(10,10,10,0.20) 100% );}.hero__grid-bg{position:absolute;inset:0;background-image:linear-gradient(var(--color-gray-dark) 1px,transparent 1px),linear-gradient(90deg,var(--color-gray-dark) 1px,transparent 1px);background-size:64px 64px;opacity:0.12;z-index:1;mask-image:radial-gradient(ellipse 55% 80% at 25% 50%,black 10%,transparent 80%);}.hero.has-bg-image .hero__grid-bg{display:none;}.hero > .container,.hero .hero__outer{position:relative;z-index:2;}.hero__container{display:grid;grid-template-columns:1fr;align-items:center;justify-items:start;}.hero.has-banner .hero__container{grid-template-columns:55fr 45fr;gap:64px;}/* ══════════════════════════════════ TEXT-SPALTE — LINKS,max 50% Breite damit Hintergrundbild sichtbar bleibt ══════════════════════════════════ */ .hero__content{max-width:560px;text-align:left;}.hero__label{display:inline-flex;align-items:center;font-family:var(--font-mono);font-size:0.68rem;letter-spacing:0.18em;text-transform:uppercase;color:var(--color-accent);margin-bottom:20px;padding:5px 12px;border:1px solid var(--color-accent);border-radius:2px;text-align:left;background:rgba(6,139,139,0.1);}.hero__title{margin-bottom:20px;text-align:left;}.hero__title-line{display:block;text-align:left;}.hero__title-line--sm{font-size:clamp(1rem,1.8vw,1.6rem);font-weight:400;color:var(--color-gray-light);}.hero__title-line--display{font-size:clamp(3rem,7.5vw,7rem);line-height:0.88;letter-spacing:-0.02em;color:var(--color-pure-white);margin:4px 0;}.hero__subtitle{font-size:0.95rem;color:var(--color-gray-mid);max-width:440px;margin-bottom:32px;line-height:1.8;text-align:left;}.hero__actions{display:flex;justify-content:flex-start;gap:14px;flex-wrap:wrap;margin-bottom:44px;}.hero__actions .btn-primary{background:#068b8b !important;color:#ffffff !important;border:2px solid #068b8b !important;}.hero__actions .btn-primary:hover{background:#0a9f9f !important;border-color:#0a9f9f !important;}.hero__actions .btn-outline{background:rgba(0,0,0,0.75) !important;color:#ffffff !important;border:2px solid rgba(255,255,255,0.5) !important;}.hero__actions .btn-outline:hover{background:rgba(6,139,139,0.25) !important;border-color:#068b8b !important;color:#068b8b !important;}.hero__stats{display:inline-grid;grid-template-columns:repeat(4,auto);background:var(--color-dark-2);border:1px solid var(--color-gray-dark);border-radius:var(--border-radius-lg);}.hero__stat{text-align:center;padding:20px 28px;border-right:1px solid var(--color-gray-dark);}.hero__stat:nth-child(4){border-right:none;}.hero__stat-num{display:block;font-family:var(--font-display);font-size:2.4rem;letter-spacing:0.04em;color:var(--color-accent);line-height:1;}.hero__stat-text{display:block;font-size:0.68rem;font-family:var(--font-heading);letter-spacing:0.1em;text-transform:uppercase;color:var(--color-gray-mid);margin-top:5px;white-space:nowrap;}.hero__banner-col{display:none;}.hero.has-banner .hero__banner-col{display:flex;align-items:center;justify-content:center;}.hero__banner-image{position:relative;width:100%;height:540px;border-radius:var(--border-radius-lg);overflow:hidden;border:1px solid rgba(255,255,255,0.08);box-shadow:0 40px 80px rgba(0,0,0,0.6);}.hero__banner-img{width:100%;height:100%;object-fit:cover;display:block;}.hero__scroll{position:absolute;bottom:40px;left:50%;transform:translateX(-50%);z-index:2;}.hero__scroll-line{width:1px;height:60px;background:linear-gradient(to bottom,var(--color-gray-dark),transparent);margin:0 auto;animation:scrollPulse 2s ease infinite;}@keyframes scrollPulse{0%{transform:scaleY(1);opacity:1;}50%{transform:scaleY(0.5);opacity:0.3;}100%{transform:scaleY(1);opacity:1;}}@media (max-width:1024px){.hero.has-banner .hero__container{grid-template-columns:1fr;}.hero.has-banner .hero__banner-col{display:none;}.hero__title-line--display{font-size:clamp(3.5rem,14vw,7rem);}}@media (max-width:768px){.hero{padding:140px 0 60px;}.hero__stats{display:grid;grid-template-columns:1fr 1fr;width:100%;}.hero__stat{padding:18px 16px;border-left:none !important;border-top:none;}.hero__stat:nth-child(2),.hero__stat:nth-child(4){border-left:1px solid var(--color-gray-dark) !important;}.hero__stat:nth-child(3),.hero__stat:nth-child(4){border-top:1px solid var(--color-gray-dark) !important;}.hero__stat-num{font-size:1.9rem;}}/* ========================================================== SERVICES OVERVIEW ========================================================== */ .service-card{cursor:default;}.service-card__tags{display:flex;flex-wrap:wrap;gap:6px;margin:16px 0;}.service-card__tag{padding:3px 8px;font-family:var(--font-mono);font-size:0.7rem;background:var(--color-dark-3);border:1px solid var(--color-gray-dark);border-radius:2px;color:var(--color-gray-mid);}.service-card__link{display:inline-flex;align-items:center;gap:6px;font-family:var(--font-heading);font-size:0.8rem;font-weight:600;letter-spacing:0.05em;text-transform:uppercase;color:var(--color-gray-mid);margin-top:8px;transition:var(--transition);}.service-card__link:hover{color:var(--color-accent);gap:10px;}/* ========================================================== ABOUT TEASER ========================================================== */ .about-teaser__grid{display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:center;}.about-teaser__visual{position:relative;}.about-teaser__img{width:100%;border-radius:var(--border-radius-lg);border:1px solid var(--color-gray-dark);}.about-teaser__placeholder{background:var(--color-dark-2);border:1px solid var(--color-gray-dark);border-radius:var(--border-radius-lg);overflow:hidden;}.code-block__header{display:flex;align-items:center;gap:8px;padding:12px 16px;background:var(--color-dark-3);border-bottom:1px solid var(--color-gray-dark);}.code-dot{width:12px;height:12px;border-radius:50%;}.code-dot--red{background:#ff5f57;}.code-dot--yellow{background:#ffbd2e;}.code-dot--green{background:#068b8b;}.code-block__title{font-family:var(--font-mono);font-size:0.75rem;color:var(--color-gray-mid);margin-left:8px;}.code-block__body{padding:24px;font-family:var(--font-mono);font-size:0.8rem;line-height:1.8;overflow-x:auto;}.code-keyword{color:#c792ea;}.code-comment{color:#546e7a;font-style:italic;}.code-string{color:#c3e88d;}.code-class{color:#82aaff;}.code-fn{color:#82aaff;}.about-teaser__badge{position:absolute;bottom:-24px;right:-24px;background:var(--color-pure-white);color:var(--color-black);padding:16px 24px;border-radius:var(--border-radius-lg);text-align:center;box-shadow:var(--shadow-lg);}.about-teaser__badge-num{display:block;font-family:var(--font-display);font-size:2rem;line-height:1;color:var(--color-black);}.about-teaser__badge-text{display:block;font-size:0.7rem;font-family:var(--font-heading);font-weight:600;letter-spacing:0.05em;text-transform:uppercase;color:var(--color-gray);margin-top:4px;}.about-teaser__content h2{margin-bottom:20px;}.about-teaser__values{display:flex;flex-direction:column;gap:16px;margin:32px 0;}.about-value{display:flex;align-items:flex-start;gap:14px;}.about-value__icon{width:36px;height:36px;background:rgba(6,139,139,0.1);border:1px solid var(--color-accent);border-radius:var(--border-radius);display:flex;align-items:center;justify-content:center;flex-shrink:0;color:var(--color-accent);}.about-value strong{display:block;font-family:var(--font-heading);font-size:0.9rem;font-weight:600;color:var(--color-pure-white);margin-bottom:2px;}.about-value small{font-size:0.8rem;color:var(--color-gray-mid);}/* ========================================================== PROCESS ========================================================== */ .process__steps{display:grid;grid-template-columns:repeat(3,1fr);gap:0;position:relative;}.process__step{padding:32px 24px;position:relative;border:1px solid var(--color-gray-dark);border-right:none;border-bottom:none;background:var(--color-dark-2);transition:var(--transition);}.process__step:nth-child(3n){border-right:1px solid var(--color-gray-dark);}.process__step:nth-last-child(-n+3){border-bottom:1px solid var(--color-gray-dark);}.process__step:first-child{border-radius:var(--border-radius-lg) 0 0 0;}.process__step:nth-child(3){border-radius:0 var(--border-radius-lg) 0 0;}.process__step:nth-last-child(3){border-radius:0 0 0 var(--border-radius-lg);}.process__step:last-child{border-radius:0 0 var(--border-radius-lg) 0;}.process__step:hover{background:var(--color-dark-3);}.process__step-num{font-family:var(--font-display);font-size:3.5rem;line-height:1;color:var(--color-gray-dark);margin-bottom:16px;letter-spacing:0.04em;transition:var(--transition);}.process__step:hover .process__step-num{color:var(--color-accent);}.process__step h3{font-size:1.1rem;margin-bottom:10px;}.process__step p{font-size:0.875rem;margin:0;}/* ========================================================== TESTIMONIALS ========================================================== */ .testimonial-card__stars{display:flex;gap:4px;color:#d4af37;margin-bottom:16px;}.testimonial-card__quote{font-size:0.95rem;font-style:italic;color:var(--color-gray-light);line-height:1.7;margin-bottom:20px;}.testimonial-card__author{display:flex;align-items:center;gap:12px;padding-top:16px;border-top:1px solid var(--color-gray-dark);}.testimonial-card__avatar{width:44px;height:44px;border-radius:50%;object-fit:cover;}.testimonial-card__avatar-placeholder{width:44px;height:44px;border-radius:50%;background:var(--color-dark-3);border:1px solid var(--color-gray-dark);display:flex;align-items:center;justify-content:center;font-family:var(--font-heading);font-weight:700;font-size:0.8rem;color:var(--color-gray-mid);}.testimonial-card__author strong{display:block;font-size:0.875rem;color:var(--color-pure-white);}.testimonial-card__author small{font-size:0.75rem;color:var(--color-gray-mid);}/* ========================================================== PROJECT CARDS ========================================================== */ .project-card{background:var(--color-dark-2);border:1px solid var(--color-gray-dark);border-radius:var(--border-radius-lg);overflow:hidden;transition:var(--transition);}.project-card:hover{transform:translateY(-4px);box-shadow:var(--shadow);}.project-card__img-wrap{display:block;position:relative;overflow:hidden;aspect-ratio:16/9;background:var(--color-dark-3);}.project-card__img-wrap--placeholder{display:flex;align-items:center;justify-content:center;}.project-card__placeholder-text{font-family:var(--font-display);font-size:4rem;color:var(--color-gray-dark);letter-spacing:0.1em;}.project-card__img{width:100%;height:100%;object-fit:cover;transition:transform 0.5s ease;}.project-card:hover .project-card__img{transform:scale(1.05);}.project-card__overlay{position:absolute;inset:0;background:rgba(10,10,10,0.7);display:flex;align-items:center;justify-content:center;opacity:0;transition:var(--transition);color:var(--color-pure-white);}.project-card:hover .project-card__overlay{opacity:1;}.project-card__content{padding:24px;}.project-card__content .badge{margin-bottom:10px;}.project-card__content h3{font-size:1.1rem;margin-bottom:8px;}.project-card__content h3 a{transition:var(--transition);}.project-card__content h3 a:hover{color:var(--color-off-white);}.project-card__content p{font-size:0.875rem;margin:0;}/* ========================================================== CTA BANNER ========================================================== */ .cta-banner{position:relative;padding:120px 0;background:var(--color-dark-2);border-top:1px solid var(--color-gray-dark);border-bottom:1px solid var(--color-gray-dark);overflow:hidden;}.cta-banner.has-bg-image{background-size:cover;background-position:center;}.cta-banner__overlay{position:absolute;inset:0;background:linear-gradient(135deg,rgba(10,10,10,0.9) 0%,rgba(10,10,10,0.7) 100%);}.cta-banner__content{position:relative;z-index:1;text-align:center;max-width:700px;margin:0 auto;}.cta-banner__title{font-size:clamp(2rem,4vw,3.5rem);margin:16px 0 20px;}.cta-banner__subtitle{font-size:1.1rem;color:var(--color-gray-mid);margin-bottom:40px;}.cta-banner__actions{display:flex;gap:16px;justify-content:center;flex-wrap:wrap;}/* ========================================================== FOOTER ========================================================== */ .site-footer{border-top:1px solid var(--color-gray-dark);}.footer__main{padding:80px 0;}.footer__grid{display:grid;grid-template-columns:2fr 1fr 1fr 1fr 1.5fr;gap:40px;}.footer__brand{padding-right:32px;}.footer__logo-text{font-size:1.8rem;font-family:var(--font-display);letter-spacing:0.08em;color:var(--color-pure-white);text-transform:uppercase;display:block;margin-bottom:16px;}.footer__logo{height:40px;width:auto;margin-bottom:16px;}.footer__logo-link{display:inline-block;margin-bottom:16px;}.footer__desc{font-size:0.875rem;color:var(--color-gray-mid);line-height:1.7;margin-bottom:24px;}.footer__social{display:flex;flex-wrap:wrap;gap:10px;}.footer__social-link{width:36px;height:36px;background:var(--color-dark-3);border:1px solid var(--color-gray-dark);border-radius:var(--border-radius);display:flex;align-items:center;justify-content:center;color:var(--color-gray-mid);transition:var(--transition);}.footer__social-link:hover{color:var(--color-accent);border-color:var(--color-accent);background:rgba(6,139,139,0.1);}.footer__col-title{font-family:var(--font-heading);font-size:0.75rem;font-weight:600;letter-spacing:0.15em;text-transform:uppercase;color:var(--color-gray-mid);margin-bottom:20px;}.footer__links{display:flex;flex-direction:column;gap:10px;}.footer__links a{font-size:0.875rem;color:var(--color-gray-light);transition:var(--transition);}.footer__links a:hover{color:var(--color-accent);padding-left:4px;}.footer__contact{display:flex;flex-direction:column;gap:14px;}.footer__contact li{display:flex;align-items:flex-start;gap:10px;font-size:0.875rem;color:var(--color-gray-light);}.footer__contact li svg{flex-shrink:0;margin-top:2px;color:var(--color-accent);}.footer__contact li a{color:inherit;transition:var(--transition);}.footer__contact li a:hover{color:var(--color-accent);}.footer__hours{color:var(--color-gray-mid) !important;}.footer__bottom{padding:20px 0;border-top:1px solid var(--color-gray-dark);}.footer__bottom-inner{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:12px;}.footer__copyright{font-size:0.8rem;color:var(--color-gray-mid);margin:0;}.footer__bottom-nav{display:flex;align-items:center;gap:12px;font-size:0.8rem;color:var(--color-gray-mid);}.footer__bottom-nav a{transition:var(--transition);}.footer__bottom-nav a:hover{color:var(--color-pure-white);}/* ========================================================== PAGE HERO (inner pages) ========================================================== */ .page-hero{padding:185px 0 80px;background:var(--color-black);position:relative;overflow:hidden;border-bottom:1px solid var(--color-gray-dark);}.page-hero__bg{position:absolute;inset:0;background-image:linear-gradient(var(--color-gray-dark) 1px,transparent 1px),linear-gradient(90deg,var(--color-gray-dark) 1px,transparent 1px);background-size:48px 48px;opacity:0.1;mask-image:radial-gradient(ellipse 100% 100% at 50% 0%,black 0%,transparent 70%);}.page-hero__content{position:relative;z-index:1;max-width:900px;}.page-hero__content p{max-width:560px;hyphens:none;-webkit-hyphens:none;}.page-hero__breadcrumb{display:flex;align-items:center;gap:8px;margin-bottom:20px;font-family:var(--font-mono);font-size:0.75rem;color:var(--color-gray-mid);}.page-hero__breadcrumb a{transition:var(--transition);}.page-hero__breadcrumb a:hover{color:var(--color-off-white);}/* ========================================================== CONTACT PAGE ========================================================== */ .contact-grid{display:grid;grid-template-columns:1fr 1.5fr;gap:64px;align-items:start;}.contact-info__item{display:flex;align-items:flex-start;gap:16px;padding:20px 0;border-bottom:1px solid var(--color-gray-dark);}.contact-info__item:last-child{border-bottom:none;}.contact-info__icon{width:44px;height:44px;background:var(--color-dark-2);border:1px solid var(--color-gray-dark);border-radius:var(--border-radius);display:flex;align-items:center;justify-content:center;flex-shrink:0;color:var(--color-gray-light);}.contact-info__label{display:block;font-family:var(--font-mono);font-size:0.7rem;letter-spacing:0.12em;text-transform:uppercase;color:var(--color-gray-mid);margin-bottom:4px;}.contact-info__value{font-size:0.95rem;color:var(--color-off-white);font-weight:500;}.contact-info__value a{transition:var(--transition);}.contact-info__value a:hover{color:var(--color-pure-white);}/* ========================================================== CONTACT FORM ========================================================== */ .contact-form{display:flex;flex-direction:column;gap:20px;}.form-row{display:grid;grid-template-columns:1fr 1fr;gap:16px;}.form-group{display:flex;flex-direction:column;gap:8px;}.form-label{font-family:var(--font-heading);font-size:0.8rem;font-weight:600;letter-spacing:0.05em;text-transform:uppercase;color:var(--color-gray-mid);}.form-label .required{color:#888;margin-left:3px;}.form-input,.form-textarea,.form-select{background:var(--color-dark-2);border:1px solid var(--color-gray-dark);border-radius:var(--border-radius);padding:14px 16px;font-size:0.95rem;color:var(--color-off-white);transition:var(--transition);width:100%;outline:none;-webkit-appearance:none;}.form-input:focus,.form-textarea:focus,.form-select:focus{border-color:var(--color-accent);background:var(--color-dark-3);box-shadow:0 0 0 3px rgba(6,139,139,0.1);}.form-input.error,.form-textarea.error,.form-select.error{border-color:#e57373;}.form-input::placeholder,.form-textarea::placeholder{color:var(--color-gray);}.form-textarea{resize:vertical;min-height:140px;}.form-select{cursor:pointer;}.form-select option{background:var(--color-dark-2);}.form-feedback{padding:14px 16px;border-radius:var(--border-radius);font-size:0.9rem;display:none;}.form-feedback--success{background:rgba(6,139,139,0.1);border:1px solid rgba(6,139,139,0.3);color:var(--color-accent);}.form-feedback--error{background:rgba(229,115,115,0.1);border:1px solid rgba(229,115,115,0.3);color:#e57373;}/* ========================================================== PRICING / PACKAGES ========================================================== */ .pricing-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;align-items:stretch;}.pricing-grid--4{grid-template-columns:repeat(4,1fr);gap:20px;max-width:1400px;margin:0 auto;}.pricing-grid--4 .pricing-card{padding:32px 24px;}.pricing-grid--4 .pricing-card__price{font-size:2.2rem;white-space:nowrap;}.pricing-grid--4 .pricing-card__features li{font-size:0.8rem;padding:6px 0;}@media (max-width:1400px){.pricing-grid--4{grid-template-columns:repeat(2,1fr);gap:24px;}.pricing-grid--4 .pricing-card{padding:40px;}.pricing-grid--4 .pricing-card__price{font-size:3rem;}.pricing-grid--4 .pricing-card__features li{font-size:0.875rem;padding:8px 0;}}@media (max-width:768px){.pricing-grid--4{grid-template-columns:1fr;}}.pricing-card{background:var(--color-dark-2);border:1px solid var(--color-gray-dark);border-radius:var(--border-radius-lg);padding:40px;position:relative;transition:var(--transition);display:flex;flex-direction:column;height:100%;}.pricing-card--featured{border-color:var(--color-accent);background:var(--color-dark-3);}.pricing-card__badge{position:absolute;top:-12px;left:50%;transform:translateX(-50%);background:var(--color-accent);color:var(--color-pure-white);padding:4px 16px;border-radius:20px;font-family:var(--font-heading);font-size:0.7rem;font-weight:700;letter-spacing:0.08em;text-transform:uppercase;white-space:nowrap;}.pricing-card__name{font-family:var(--font-heading);font-size:0.75rem;font-weight:600;letter-spacing:0.15em;text-transform:uppercase;color:var(--color-gray-mid);margin-bottom:12px;}.pricing-card__price{font-family:var(--font-display);font-size:3rem;letter-spacing:0.02em;color:var(--color-pure-white);margin-bottom:4px;line-height:1;}.pricing-card__period{font-size:0.8rem;color:var(--color-gray-mid);margin-bottom:4px;}.pricing-card__mwst{font-size:0.7rem;color:var(--color-gray-mid);margin-bottom:24px;opacity:0.8;}.pricing-card__divider{height:1px;background:var(--color-gray-dark);margin-bottom:24px;}.pricing-card__features{list-style:none;margin-bottom:32px;flex:1;}.pricing-card__features li{display:flex;align-items:flex-start;gap:10px;padding:8px 0;font-size:0.875rem;color:var(--color-gray-light);border-bottom:1px solid rgba(255,255,255,0.04);}.pricing-card__features li:last-child{border-bottom:none;}.pricing-card__features .check-icon{color:var(--color-accent);flex-shrink:0;margin-top:2px;}.pricing-card .btn{width:100%;justify-content:center;margin-top:auto;}/* ========================================================== FAQ ACCORDION ========================================================== */ .faq-list{display:flex;flex-direction:column;gap:0;}.faq-item{border-bottom:1px solid var(--color-gray-dark);}.faq-item:first-child{border-top:1px solid var(--color-gray-dark);}.faq-question{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:20px 0;width:100%;text-align:left;color:var(--color-off-white);font-family:var(--font-heading);font-size:1rem;font-weight:600;cursor:pointer;transition:var(--transition);}.faq-question:hover{color:var(--color-pure-white);}.faq-question__icon{width:24px;height:24px;flex-shrink:0;border:1px solid var(--color-gray-dark);border-radius:50%;display:flex;align-items:center;justify-content:center;transition:transform 0.3s ease,border-color 0.3s ease;color:var(--color-gray-mid);}.faq-item.is-open .faq-question__icon{transform:rotate(45deg);border-color:var(--color-gray-mid);}.faq-answer{max-height:0;overflow:hidden;transition:max-height 0.4s ease;}.faq-answer__inner{padding-bottom:20px;font-size:0.9rem;color:var(--color-gray-mid);line-height:1.8;}/* ========================================================== SERVICE PAGE SECTIONS ========================================================== */ .service-features__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;}.feature-item{padding:28px;background:var(--color-dark-2);border:1px solid var(--color-gray-dark);border-radius:var(--border-radius-lg);transition:var(--transition);}.feature-item:hover{border-color:var(--color-gray-mid);transform:translateY(-2px);}.feature-item__icon{width:44px;height:44px;background:var(--color-dark-3);border:1px solid var(--color-gray-dark);border-radius:var(--border-radius);display:flex;align-items:center;justify-content:center;margin-bottom:16px;color:var(--color-gray-light);}.feature-item h4{font-size:1rem;margin-bottom:8px;}.feature-item p{font-size:0.875rem;margin:0;}/* ========================================================== TECH STACK TAGS ========================================================== */ .tech-stack{display:flex;flex-wrap:wrap;gap:10px;margin-top:20px;}.tech-tag{display:inline-flex;align-items:center;gap:6px;padding:6px 14px;background:var(--color-dark-2);border:1px solid var(--color-gray-dark);border-radius:var(--border-radius);font-family:var(--font-mono);font-size:0.75rem;color:var(--color-gray-light);transition:var(--transition);}.tech-tag:hover{border-color:var(--color-gray-mid);color:var(--color-pure-white);}/* ========================================================== WIDGET TITLE ========================================================== */ .widget-title{font-family:var(--font-heading);font-size:0.75rem;font-weight:600;letter-spacing:0.15em;text-transform:uppercase;color:var(--color-gray-mid);margin-bottom:16px;}/* ========================================================== PAGE TEMPLATE GENERIC ========================================================== */ .page-content{padding:80px 0;}.page-content__inner{max-width:800px;}.page-content .container{display:grid;grid-template-columns:1fr 280px;gap:64px;align-items:start;}.page-content.no-sidebar .container{grid-template-columns:1fr;}.page-content.no-sidebar .page-content__inner{max-width:none;}/* ========================================================== RESPONSIVE ADDITIONS ========================================================== */ @media (max-width:1200px){.container{padding-left:24px;padding-right:24px;}.service-features__grid{grid-template-columns:repeat(2,1fr);}.about-teaser__grid{gap:48px;}.two-col-grid,[style*="grid-template-columns:1fr 1fr"],[style*="grid-template-columns:1fr 1fr"]{gap:32px !important;}}@media (max-width:1024px){.about-teaser__grid{grid-template-columns:1fr;gap:60px;}.about-teaser__badge{right:0;}.process__steps{grid-template-columns:repeat(2,1fr);}.process__step{border-right:none;border-bottom:none;}.process__step:nth-child(2n){border-right:1px solid var(--color-gray-dark);}.process__step:nth-last-child(-n+2){border-bottom:1px solid var(--color-gray-dark);}.process__step:first-child{border-radius:var(--border-radius-lg) 0 0 0;}.process__step:nth-child(2){border-radius:0 var(--border-radius-lg) 0 0;}.process__step:nth-child(3),.process__step:nth-child(4),.process__step:nth-child(5){border-radius:0;}.process__step:nth-last-child(2){border-radius:0 0 0 var(--border-radius-lg);}.process__step:last-child{border-radius:0 0 var(--border-radius-lg) 0;}.footer__grid{grid-template-columns:1fr 1fr;gap:40px;}.footer__brand{grid-column:1 / -1;padding-right:0;}.contact-grid{grid-template-columns:1fr;gap:40px;}.pricing-grid{grid-template-columns:1fr;}.nav__menu{display:none;}.nav__burger{display:flex;}.nav__mobile-overlay{display:block;}.mega-menu{display:none !important;}.service-features__grid{grid-template-columns:repeat(2,1fr);gap:16px;}.page-content .container,.two-col-layout,[style*="grid-template-columns:1fr 320px"],[style*="grid-template-columns:1fr 320px"],[style*="grid-template-columns:1fr 300px"],[style*="grid-template-columns:1fr 300px"],[style*="grid-template-columns:1fr 280px"],[style*="grid-template-columns:1fr 280px"]{grid-template-columns:1fr !important;gap:32px !important;}aside,.sidebar,[class*="sidebar"]{position:static !important;}.projekt-detail-grid,.lib-single-grid{grid-template-columns:1fr !important;gap:32px !important;}.projekt-sidebar,.lib-single-sidebar{position:static !important;}.projekt-sidebar .card,.lib-single-sidebar .card{position:static !important;}[style*="position:sticky"],[style*="position:sticky"]{position:static !important;}}@media (max-width:768px){.nav{height:72px;}.nav__burger{display:flex;}.nav__mobile-overlay{display:block;}.hero__container,.hero.has-banner .hero__container{grid-template-columns:1fr;gap:40px;}.hero__banner-col{display:none !important;}.hero__actions{gap:12px;}.process__steps{grid-template-columns:1fr;}.process__step{border:1px solid var(--color-gray-dark) !important;border-radius:var(--border-radius-lg) !important;margin-bottom:8px;}.process__step:last-child{margin-bottom:0;}.footer__grid{grid-template-columns:1fr;}.footer__bottom-inner{flex-direction:column;align-items:flex-start;gap:16px;}.footer__bottom-nav{flex-wrap:wrap;gap:8px 16px;justify-content:flex-start;}.footer__bottom-nav a{white-space:nowrap;}.footer__bottom-nav span[aria-hidden="true"]{display:none;}.form-row{grid-template-columns:1fr;}.page-content .container{grid-template-columns:1fr;}.service-features__grid{grid-template-columns:1fr;}.pricing-grid{grid-template-columns:1fr;}.topbar__close{right:16px;}.section{padding:60px 0;}.page-hero{padding:140px 0 60px;}.page-hero--compact{padding:130px 0 50px;}.page-hero h1,.hero__title{font-size:clamp(1.5rem,6vw,2.5rem) !important;}.card{padding:20px !important;}.btn{padding:12px 20px;font-size:0.8rem;}.hero__actions{flex-direction:column;width:100%;}.hero__actions .btn{width:100%;justify-content:center;}[style*="gap:64px"],[style*="gap:64px"]{gap:32px !important;}[style*="gap:48px"],[style*="gap:48px"]{gap:24px !important;}[style*="gap:40px"],[style*="gap:40px"]{gap:24px !important;}[style*="grid-template-columns:repeat"],[style*="grid-template-columns:repeat"]{grid-template-columns:1fr !important;}.feature-item{padding:20px;}.entry-content{font-size:0.9rem;}.entry-content h2{font-size:1.3rem;}.entry-content h3{font-size:1.1rem;}.contact-info{padding:24px !important;}.page-hero__breadcrumb{font-size:0.75rem;flex-wrap:wrap;}}@media (max-width:480px){.container{padding-left:16px;padding-right:16px;}.page-hero{padding:120px 0 48px;}.page-hero--compact{padding:110px 0 40px;}.page-hero h1{font-size:1.4rem !important;line-height:1.3;}.section-label{font-size:0.6rem;}.card{padding:16px !important;}.tech-stack{gap:6px;}.tech-tag{padding:4px 10px;font-size:0.65rem;}.btn{padding:10px 16px;font-size:0.75rem;}.btn-outline{padding:8px 14px;}.footer__main{padding:48px 0 32px;}.footer__col-title{font-size:0.7rem;}.footer__links a{font-size:0.85rem;}.entry-content,.mrwhite-legal-content,.mrwhite-lib-content{font-size:0.85rem;}.hero__stat-num{font-size:1.5rem;}.hero__stat-label{font-size:0.65rem;}}/* ========================================================== MEGA MENU – extra utility ========================================================== */ .mega-col__all-link{display:inline-flex;align-items:center;gap:6px;margin-top:20px;padding-top:16px;border-top:1px solid var(--color-gray-dark);font-family:var(--font-heading);font-size:0.75rem;font-weight:600;letter-spacing:0.08em;text-transform:uppercase;color:var(--color-gray-mid);transition:var(--transition);}.mega-col__all-link:hover{color:var(--color-pure-white);gap:10px;}/* ========================================================== WORDPRESS ADMIN BAR – Seiten-Padding-Korrektur ========================================================== */ .admin-bar .hero{padding-top:207px;}.admin-bar .page-hero{padding-top:217px;}@media screen and (max-width:782px){.admin-bar .hero{padding-top:221px;}.admin-bar .page-hero{padding-top:231px;}}.mega-col--featured .btn{font-size:0.75rem;padding:14px 20px;justify-content:center;width:100%;letter-spacing:0.08em;}.page-content__inner h1{font-size:1.8rem;margin-bottom:8px;}.page-content__inner h2{font-size:1.25rem;margin-top:40px;margin-bottom:8px;}.page-content__inner h3{font-size:1rem;margin-top:24px;margin-bottom:6px;}.page-content__inner h4{font-size:0.95rem;margin-top:16px;margin-bottom:4px;}.page-content__inner p{font-size:0.95rem;color:var(--color-gray-mid);line-height:1.8;margin-bottom:12px;}.page-content__inner ul,.page-content__inner ol{font-size:0.95rem;color:var(--color-gray-mid);line-height:1.8;padding-left:20px;margin-bottom:12px;}/* ============================================================ LIBRARY — RESPONSIVE ============================================================ */ .lib-archive-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;}@media (max-width:1024px){.lib-archive-grid{grid-template-columns:repeat(2,1fr);}}@media (max-width:600px){.lib-archive-grid{grid-template-columns:1fr;}}.lib-single-grid{display:grid;grid-template-columns:1fr 320px;gap:48px;align-items:start;}.lib-single-sidebar{position:sticky;top:120px;}@media (max-width:900px){.lib-single-grid{grid-template-columns:1fr;gap:32px;}.lib-single-sidebar{position:static;}}@media (max-width:600px){.lib-filter-bar{gap:8px !important;flex-wrap:wrap;}.lib-filter-bar .btn{font-size:0.7rem !important;padding:8px 14px !important;}}/* ============================================================ PROJEKT — RESPONSIVE ============================================================ */ .projekt-detail-grid{display:grid;grid-template-columns:1fr 320px;gap:64px;align-items:start;}.projekt-sidebar .card{position:sticky;top:100px;}@media (max-width:1024px){.projekt-detail-grid{grid-template-columns:1fr;gap:40px;}.projekt-sidebar{}.projekt-sidebar .card{position:static;}}@media (max-width:768px){.projekt-detail-grid{gap:32px;}.projekt-sidebar .card{padding:24px !important;}}/* ============================================================ OVERFLOW & TEXT WRAPPING FIXES ============================================================ */ html,body{overflow-x:hidden;max-width:100vw;}.container,.section,main,article,.entry-content,.page-content__inner,.mrwhite-legal-content,.mrwhite-lib-content{overflow-wrap:break-word;word-wrap:break-word;word-break:break-word;hyphens:auto;}pre,code{max-width:100%;overflow-x:auto;white-space:pre-wrap;word-wrap:break-word;}pre{padding:16px;border-radius:var(--border-radius);background:var(--color-dark-2);border:1px solid var(--color-gray-dark);}.tech-stack{max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch;}@media (max-width:768px){.tech-stack{flex-wrap:wrap;}.tech-tag{white-space:nowrap;flex-shrink:0;}}h1,h2,h3,h4,h5,h6,.page-hero h1,.hero__title{overflow-wrap:break-word;word-wrap:break-word;hyphens:auto;}table{max-width:100%;overflow-x:auto;display:block;}img{max-width:100%;height:auto;}iframe,video,embed,object{max-width:100%;}@media (max-width:1024px){.nav__mobile-overlay{display:block;}.site-header{z-index:10001;}.nav__burger{z-index:10002;}.nav__mobile-overlay{z-index:10000;}}.page-hero__content{max-width:100%;overflow:hidden;}.card{max-width:100%;overflow:hidden;}@media (max-width:480px){.service-features__grid{grid-template-columns:1fr !important;}.feature-item{padding:16px;}.feature-item h4{font-size:0.95rem;}.feature-item p{font-size:0.8rem;}}/* ============================================================ MOBILE MENU CLOSE BUTTON ============================================================ */ .nav__mobile-close{width:44px;height:44px;display:flex;align-items:center;justify-content:center;background:transparent;border:1px solid var(--color-gray-dark);border-radius:var(--border-radius);color:var(--color-gray-light);cursor:pointer;transition:var(--transition);flex-shrink:0;}.nav__mobile-close:hover{background:var(--color-dark-2);color:var(--color-pure-white);border-color:var(--color-gray-mid);}.nav__mobile-close svg{width:20px;height:20px;}/* ============================================================ FOOTER HASHTAGS - Creative Tags (Static - no animations for better CLS) ============================================================ */ .footer__hashtags{display:flex;flex-wrap:wrap;gap:10px;margin:20px 0;}.footer__hashtag{display:inline-block;padding:6px 14px;background:linear-gradient(135deg,var(--color-dark-3),var(--color-dark-2));border:1px solid var(--color-gray-dark);border-radius:20px;font-family:var(--font-mono);font-size:0.75rem;color:var(--color-accent);letter-spacing:0.02em;cursor:default;}.footer__hashtag:hover{border-color:var(--color-gray-mid);color:var(--color-pure-white);}/* ============================================================ LEGAL PAGE BOXES (Widerrufsrecht,AGB,etc.) ============================================================ */ .legal-address-box,.legal-form-box{background:var(--color-dark-2);border:1px solid var(--color-gray-dark);border-radius:var(--border-radius-lg);padding:24px;margin:24px 0;font-size:0.9rem;line-height:1.8;}.legal-form-box{background:var(--color-dark-3);}.legal-address-box strong{color:var(--color-pure-white);}.mrwhite-legal-content ul{list-style:disc;padding-left:24px;margin:16px 0;}.mrwhite-legal-content ul li{margin-bottom:12px;color:var(--color-gray-light);}.pricing-card__price--request{font-size:1.8rem !important;white-space:nowrap;}@media (min-width:1401px){.pricing-grid--4 .pricing-card__price--request{font-size:1.5rem !important;}}/* ========================================================== ACCOUNT SYSTEM ========================================================== */ .auth-container{max-width:520px;margin:0 auto;}.auth-box{background:var(--color-dark-2);border:1px solid var(--color-gray-dark);border-radius:var(--border-radius-lg);padding:48px;}.auth-title{font-family:var(--font-display);font-size:2rem;margin-bottom:24px;text-align:center;}.auth-intro{color:var(--color-gray-light);margin-bottom:24px;text-align:center;}.auth-form .form-group{margin-bottom:20px;}.auth-form .form-row{display:flex;gap:16px;margin-bottom:20px;}.auth-form .form-row .form-group{flex:1;margin-bottom:0;}.auth-message{display:flex;align-items:flex-start;gap:12px;padding:16px;border-radius:var(--border-radius);margin-bottom:24px;}.auth-message--error{background:rgba(239,68,68,0.1);border:1px solid rgba(239,68,68,0.3);color:#f87171;}.auth-message--success{background:rgba(34,197,94,0.1);border:1px solid rgba(34,197,94,0.3);color:#4ade80;}.auth-message ul{margin:0;padding-left:16px;}.auth-message svg{flex-shrink:0;margin-top:2px;}.auth-footer{text-align:center;margin-top:24px;padding-top:24px;border-top:1px solid var(--color-gray-dark);color:var(--color-gray-mid);}.auth-footer a{color:var(--color-pure-white);}.auth-link{font-size:0.85rem;color:var(--color-gray-light);}.account-layout{display:grid;grid-template-columns:280px 1fr;gap:48px;align-items:start;}.account-sidebar{position:sticky;top:120px;}.account-nav{background:var(--color-dark-2);border:1px solid var(--color-gray-dark);border-radius:var(--border-radius-lg);padding:8px;}.account-nav__link{display:flex;align-items:center;gap:12px;padding:14px 16px;border-radius:var(--border-radius);color:var(--color-gray-light);font-size:0.9rem;transition:var(--transition);}.account-nav__link:hover{background:var(--color-dark-3);color:var(--color-pure-white);}.account-nav__link.is-active{background:var(--color-pure-white);color:var(--color-black);}.account-nav__link.is-active svg{stroke:var(--color-black);}.account-nav__link svg{flex-shrink:0;}.account-nav__divider{height:1px;background:var(--color-gray-dark);margin:8px 0;}.account-nav__link--logout{color:#f87171;}.account-nav__link--logout:hover{background:rgba(239,68,68,0.1);color:#f87171;}.account-content{min-width:0;}.account-section{margin-bottom:32px;}.account-section h2{font-family:var(--font-display);font-size:1.75rem;margin-bottom:8px;}.account-section h3{font-size:1.1rem;margin-bottom:16px;color:var(--color-pure-white);}.account-section p{color:var(--color-gray-light);}.account-stats{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;margin-bottom:40px;}.account-stat-card{display:flex;align-items:center;gap:16px;background:var(--color-dark-2);border:1px solid var(--color-gray-dark);border-radius:var(--border-radius-lg);padding:24px;}.account-stat-card__icon{width:48px;height:48px;display:flex;align-items:center;justify-content:center;background:var(--color-dark-3);border-radius:var(--border-radius);}.account-stat-card__icon svg{width:24px;height:24px;}.account-stat-card__num{display:block;font-family:var(--font-display);font-size:2rem;line-height:1;color:var(--color-pure-white);}.account-stat-card__label{font-size:0.85rem;color:var(--color-gray-mid);text-transform:uppercase;letter-spacing:0.05em;}.account-table-wrap{background:var(--color-dark-2);border:1px solid var(--color-gray-dark);border-radius:var(--border-radius-lg);overflow:hidden;margin-bottom:16px;}.account-table{width:100%;border-collapse:collapse;}.account-table th,.account-table td{padding:16px 20px;text-align:left;}.account-table th{background:var(--color-dark-3);font-size:0.75rem;font-weight:600;text-transform:uppercase;letter-spacing:0.08em;color:var(--color-gray-mid);}.account-table td{border-top:1px solid var(--color-gray-dark);font-size:0.9rem;}.account-table .text-right{text-align:right;}.account-link{display:inline-flex;align-items:center;gap:8px;font-size:0.9rem;color:var(--color-gray-light);}.account-link:hover{color:var(--color-pure-white);}.account-empty{text-align:center;padding:64px 24px;background:var(--color-dark-2);border:1px solid var(--color-gray-dark);border-radius:var(--border-radius-lg);}.account-empty__icon{width:64px;height:64px;margin:0 auto 24px;display:flex;align-items:center;justify-content:center;background:var(--color-dark-3);border-radius:50%;}.account-empty__icon svg{width:32px;height:32px;opacity:0.5;}.account-empty h3{margin-bottom:8px;}.account-empty p{color:var(--color-gray-mid);margin-bottom:24px;}.status-badge{display:inline-block;padding:4px 12px;border-radius:20px;font-size:0.75rem;font-weight:600;text-transform:uppercase;letter-spacing:0.05em;}.status-badge--paid{background:rgba(34,197,94,0.15);color:#4ade80;}.status-badge--pending{background:rgba(250,204,21,0.15);color:#fbbf24;}.account-form{background:var(--color-dark-2);border:1px solid var(--color-gray-dark);border-radius:var(--border-radius-lg);padding:32px;}.form-section{margin-bottom:32px;padding-bottom:32px;border-bottom:1px solid var(--color-gray-dark);}.form-section:last-of-type{margin-bottom:24px;padding-bottom:0;border-bottom:none;}.form-section__title{font-size:1rem;font-weight:600;margin-bottom:20px;color:var(--color-pure-white);}.form-section__desc{font-size:0.85rem;color:var(--color-gray-mid);margin-top:-12px;margin-bottom:20px;}.form-hint{display:block;font-size:0.75rem;color:var(--color-gray-mid);margin-top:6px;}.form-checkbox{display:flex;align-items:flex-start;gap:10px;cursor:pointer;font-size:0.9rem;color:var(--color-gray-light);}.form-checkbox input{margin-top:3px;accent-color:var(--color-pure-white);}.form-checkbox a{color:var(--color-pure-white);text-decoration:underline;}.required{color:#f87171;}.optional{color:var(--color-gray-mid);font-size:0.85em;}.btn-block{width:100%;}.btn-sm{padding:8px 16px;font-size:0.8rem;}.page-hero--compact{padding:160px 0 60px;}.page-hero--compact .page-hero__content h1{font-size:2.5rem;}@media (max-width:1024px){.account-layout{grid-template-columns:1fr;gap:32px;}.account-sidebar{position:static;}.account-nav{display:flex;flex-wrap:wrap;gap:8px;padding:12px;}.account-nav__link{flex:1 1 auto;justify-content:center;padding:12px 16px;}.account-nav__link span{display:none;}.account-nav__divider{display:none;}}@media (max-width:768px){.auth-box{padding:32px 24px;}.auth-form .form-row{flex-direction:column;gap:0;}.auth-form .form-row .form-group{margin-bottom:20px;}.account-stats{grid-template-columns:1fr;}.account-form{padding:24px 20px;}.account-table-wrap{overflow-x:auto;}.account-table{min-width:500px;}}.nav__link--icon{display:flex;align-items:center;justify-content:center;width:40px;height:40px;padding:0 !important;border-radius:50%;background:var(--color-dark-3);transition:var(--transition);}.nav__link--icon:hover{background:var(--color-gray-dark);}.nav__link--icon svg{width:20px;height:20px;}.library-tabs{display:flex;gap:8px;margin-bottom:40px;padding:8px;background:var(--color-dark-2);border:1px solid var(--color-gray-dark);border-radius:var(--border-radius-lg);width:fit-content;}.library-tab{display:flex;align-items:center;gap:10px;padding:14px 24px;border-radius:var(--border-radius);font-size:0.9rem;font-weight:500;color:var(--color-gray-light);transition:var(--transition);position:relative;}.library-tab:hover{color:var(--color-pure-white);background:var(--color-dark-3);}.library-tab.is-active{background:var(--color-pure-white);color:var(--color-black);}.library-tab.is-active svg{stroke:var(--color-black);}.library-tab svg{width:18px;height:18px;flex-shrink:0;}.library-tab__badge{display:flex;align-items:center;justify-content:center;width:18px;height:18px;background:#068b8b;border-radius:50%;margin-left:4px;}.library-tab__badge svg{width:12px;height:12px;stroke:#fff;}.library-tab.is-active .library-tab__badge{background:#068b8b;}.library-tab.is-active .library-tab__badge svg{stroke:#fff;}@media (max-width:768px){.library-tabs{width:100%;}.library-tab{flex:1;justify-content:center;padding:12px 16px;}.library-tab span:not(.library-tab__badge){display:none;}}/* ========================================================== AUTH PAGE LAYOUT (Login/Register with Benefits) ========================================================== */ .auth-page-layout{display:grid;grid-template-columns:1fr 480px;gap:64px;align-items:start;}.auth-benefits h2{font-family:var(--font-display);font-size:1.75rem;margin-bottom:12px;}.auth-benefits__intro{color:var(--color-gray-light);font-size:1rem;line-height:1.7;margin-bottom:32px;}.auth-benefits__list{display:flex;flex-direction:column;gap:24px;}.auth-benefit{display:flex;gap:16px;padding:20px;background:var(--color-dark-2);border:1px solid var(--color-gray-dark);border-radius:var(--border-radius-lg);transition:var(--transition);}.auth-benefit:hover{border-color:var(--color-gray-mid);background:var(--color-dark-3);}.auth-benefit__icon{flex-shrink:0;width:44px;height:44px;display:flex;align-items:center;justify-content:center;background:var(--color-dark-3);border-radius:var(--border-radius);}.auth-benefit:hover .auth-benefit__icon{background:var(--color-pure-white);}.auth-benefit:hover .auth-benefit__icon svg{stroke:var(--color-black);}.auth-benefit__icon svg{width:22px;height:22px;}.auth-benefit__content h3{font-size:0.95rem;font-weight:600;margin-bottom:4px;color:var(--color-pure-white);}.auth-benefit__content p{font-size:0.85rem;color:var(--color-gray-mid);line-height:1.6;margin:0;}.auth-forms{position:sticky;top:120px;}.auth-forms .auth-box{padding:0;overflow:hidden;}.auth-tabs{display:flex;border-bottom:1px solid var(--color-gray-dark);}.auth-tab{flex:1;padding:18px 24px;font-size:0.9rem;font-weight:600;color:var(--color-gray-mid);background:var(--color-dark-3);border:none;cursor:pointer;transition:var(--transition);}.auth-tab:first-child{border-radius:var(--border-radius-lg) 0 0 0;}.auth-tab:last-child{border-radius:0 var(--border-radius-lg) 0 0;}.auth-tab:hover{color:var(--color-pure-white);}.auth-tab.is-active{background:var(--color-dark-2);color:var(--color-pure-white);}.auth-panel{display:none;padding:32px;}.auth-panel.is-active{display:block;}@media (max-width:1024px){.auth-page-layout{grid-template-columns:1fr;gap:48px;}.auth-forms{position:static;}.auth-benefits__list{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;}}@media (max-width:768px){.auth-benefits__list{grid-template-columns:1fr;}.auth-panel{padding:24px;}.auth-tab{padding:14px 16px;font-size:0.85rem;}}/* ═══════════════════════════════════════════════════ SPINNER & LOADING STATES ═══════════════════════════════════════════════════ */ .spinner{display:inline-block;width:18px;height:18px;border:2px solid rgba(255,255,255,0.3);border-top-color:currentColor;border-radius:50%;animation:spinner-rotate 0.8s linear infinite;margin-right:8px;vertical-align:middle;}@keyframes spinner-rotate{to{transform:rotate(360deg);}}.contact-success__icon svg{animation:success-check 0.5s ease-out;}@keyframes success-check{0%{transform:scale(0);opacity:0;}50%{transform:scale(1.2);}100%{transform:scale(1);opacity:1;}}