/*
Theme Name: LUNOX Landing
Theme URI: https://lunoxofficial.com/
Author: LUNOX
Description: Schlanke One-Page-Wartelisten-Website für LUNOX. Newsletter über The Newsletter Plugin.
Version: 0.8.6
Requires at least: 6.3
Requires PHP: 7.4
Text Domain: lunox-landing
*/
:root{--bg:#080808;--bg2:#101112;--fg:#f9f9f7;--muted:#9b9e9f;--line:#353637;--max:1120px}*{box-sizing:border-box}html{scroll-behavior:smooth}body{background:var(--bg);color:var(--fg);margin:0;font-family:Arial,Helvetica,sans-serif;-webkit-font-smoothing:antialiased}a{color:inherit;text-decoration:none}a:focus-visible,button:focus-visible,input:focus-visible{outline:2px solid white;outline-offset:4px}.wrap{max-width:var(--max);margin:0 auto;padding:0 42px}.screen{min-height:100svh;display:grid;grid-template-rows:auto 1fr auto;background:#050505}.topbar{padding:29px 0;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid rgba(255,255,255,.11)}.mini-logo{height:30px;width:auto;display:block}.topbar-links{display:flex;gap:32px;align-items:center}.topbar-links a{font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:#d9dbdb;transition:color .2s}.topbar-links a:hover{color:#fff}.hero-main{display:flex;align-items:center;justify-content:center;padding:46px 0 25px}.hero-lockup{text-align:center;width:100%;max-width:850px;margin:auto}.hero-eyebrow{font-size:11px;letter-spacing:.47em;color:var(--muted);margin:0 0 55px}.hero-logo{display:block;width:min(100%,780px);height:auto;margin:0 auto}.hero-desc{font-size:14px;font-weight:300;letter-spacing:.035em;line-height:1.8;color:#9a9c9d;max-width:560px;margin:54px auto 0}.hero-bottom{text-align:center;padding-bottom:39px}.hero-tagline{font-weight:700;font-size:clamp(13px,1.6vw,18px);letter-spacing:.34em;margin:0 0 23px}.scroll-link{font-size:10px;letter-spacing:.28em;color:#919597;display:inline-flex;flex-direction:column;gap:9px;align-items:center;text-transform:uppercase}.scroll-link:after{content:"";width:1px;height:27px;background:#858888}.line{height:1px;background:var(--line)}.content-section{padding:115px 0}.kicker{font-size:11px;letter-spacing:.36em;color:#b5b8b8;text-transform:uppercase;margin:0 0 27px}.display{font-weight:600;font-size:clamp(42px,6vw,78px);line-height:1.02;letter-spacing:-.06em;margin:0}.body-copy{color:#aaacad;font-size:16px;line-height:1.86;max-width:585px;margin:32px 0 0}.intro-grid{display:grid;grid-template-columns:1fr .8fr;gap:70px;align-items:end}.intro-aside{padding:30px 0 5px;border-top:1px solid var(--line);color:#969999;font-size:14px;line-height:1.8}.feature{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--line);border-bottom:1px solid var(--line);margin-top:90px}.feature-item{padding:28px 25px 29px 0;border-right:1px solid var(--line);margin-right:24px}.feature-item:last-child{border:0;margin-right:0}.feature-num{font-size:11px;letter-spacing:.12em;color:#969a9b}.feature-title{font-size:16px;margin:34px 0 10px}.feature-text{font-size:13px;color:#999d9e;line-height:1.65;margin:0}.signup{background:var(--bg2);padding:105px 0 115px}.signup-grid{display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:center}.signup p{color:#aaacad;line-height:1.8}.newsletter-area{border:1px solid #464646;padding:35px;background:#151617}.newsletter-area label{font-size:11px;letter-spacing:.12em;color:#c5c6c6;display:block;margin-bottom:13px}.newsletter-area input[type=email],.newsletter-area input[type=text],.newsletter-area .tnp-email{width:100%;background:#0a0a0a;border:1px solid #525354;padding:17px;color:#fff;font-size:15px;min-height:54px;border-radius:0}.newsletter-area button,.newsletter-area input[type=submit],.newsletter-area .tnp-submit{background:#f4f4f1;border:1px solid #f4f4f1;color:#070707;font-weight:700;letter-spacing:.13em;font-size:11px;padding:18px 20px;text-transform:uppercase;cursor:pointer;border-radius:0;width:100%;margin-top:14px}.newsletter-area button[disabled]{opacity:.6;cursor:not-allowed}.signup-note{font-size:11px;line-height:1.7!important;color:#8c9092!important;margin:20px 0 0}.signup-note a{text-decoration:underline}.newsletter-area .tnp-field{margin-bottom:12px}.newsletter-area .tnp-field label{font-size:11px}.newsletter-area .tnp-field-button{margin-bottom:0}.newsletter-area .tnp-field input[type=submit]{margin:3px 0 0}.footer{padding:34px 0 42px;background:#050505}.footer-inner{display:flex;align-items:center;justify-content:space-between;gap:25px}.footer-logo{height:26px;width:auto}.footer-meta,.footer-links a{font-size:11px;color:#969a9b;letter-spacing:.06em}.footer-links{display:flex;gap:27px}.page-main{padding:90px 0 120px;min-height:68vh}.page-main h1{font-size:clamp(34px,5vw,68px);letter-spacing:-.04em}.page-main p,.page-main li{max-width:800px;line-height:1.8;color:#bbb}.page-main a{text-decoration:underline}@media(max-width:760px){.wrap{padding:0 22px}.topbar{padding:22px 0}.mini-logo{height:20px}.topbar-links{gap:17px}.topbar-links a{font-size:9px;letter-spacing:.11em}.hero-main{padding:28px 0}.hero-eyebrow{font-size:9px;letter-spacing:.32em;margin-bottom:36px}.hero-logo{max-width:95%}.hero-desc{font-size:13px;margin:37px auto 0;max-width:330px}.hero-bottom{padding-bottom:26px}.hero-tagline{font-size:12px;letter-spacing:.25em;margin-bottom:22px}.content-section{padding:80px 0}.intro-grid,.signup-grid{grid-template-columns:1fr;gap:35px}.feature{grid-template-columns:1fr;margin-top:56px}.feature-item{margin:0;border-right:0;border-bottom:1px solid var(--line);padding:22px 0}.feature-item:last-child{border-bottom:0}.feature-title{margin:14px 0 8px}.signup{padding:76px 0}.newsletter-area{padding:23px}.footer-inner{flex-direction:column;align-items:start}.footer-links{gap:18px;flex-wrap:wrap}}

/* V0.2 — tighter editorial hero, no top navigation */
.screen{min-height:74svh;grid-template-rows:1fr auto}
.hero-main{padding:46px 0 18px}
.hero-eyebrow{margin-bottom:22px}
.hero-desc{margin:23px auto 0}
.hero-bottom{padding-bottom:28px}
.hero-tagline{margin-bottom:14px}
.content-section{padding:76px 0 86px}
.feature{margin-top:58px}
.signup{padding:82px 0 92px}
@media(max-width:760px){
 .screen{min-height:72svh}
 .hero-main{padding:30px 0 18px}
 .hero-eyebrow{margin-bottom:19px}
 .hero-desc{margin:23px auto 0}
 .hero-bottom{padding-bottom:24px}
 .content-section{padding:60px 0}
 .feature{margin-top:43px}
 .signup{padding:62px 0}
}


/* v0.3: robust scaling for desktop, tablets, phones and landscape phones.
   Breakpoints are based on CSS viewport width/height, not on a specific device. */
html,body{max-width:100%}
body{overflow-x:clip}
img,svg,video,iframe{max-width:100%}
.hero-lockup,.intro-grid>*,.signup-grid>*,.newsletter-area,.tnp,.tnp-subscription{min-width:0}
.display,.hero-eyebrow,.hero-tagline,.feature-title{overflow-wrap:normal}
.body-copy,.intro-aside,.feature-text,.signup p,.signup-note,.page-main{overflow-wrap:break-word}
.newsletter-area .tnp-subscription,.newsletter-area .tnp-subscription form,.newsletter-area .tnp-subscription .tnp-field{max-width:100%;min-width:0}
.newsletter-area .tnp-subscription input:not([type=checkbox]):not([type=radio]),
.newsletter-area .tnp-subscription select,
.newsletter-area .tnp-subscription textarea{max-width:100%;width:100%;min-width:0}
.newsletter-area .tnp-subscription input[type=checkbox]{width:auto;height:auto;min-height:0;margin:0 9px 0 0;vertical-align:middle;accent-color:#f4f4f1}
.newsletter-area .tnp-subscription .tnp-field-privacy label,
.newsletter-area .tnp-subscription .tnp-privacy-field{font-size:12px;letter-spacing:0;line-height:1.6;overflow-wrap:break-word}
.newsletter-area .tnp-subscription .tnp-field-button input{white-space:normal}
.newsletter-pending-title{font-weight:600;margin:0 0 12px!important;color:#f6f6f6!important}
.newsletter-pending-copy{margin:0}
/* Desktop sizes that approach tablets (including tablet landscape). */
@media (min-width:761px) and (max-width:1100px){
 .wrap{padding-left:34px;padding-right:34px}
 .intro-grid{gap:clamp(26px,4vw,52px)}
 .signup-grid{gap:clamp(28px,4vw,52px)}
 .hero-logo{max-width:690px}
 .hero-eyebrow{letter-spacing:.35em}
 .feature-item{padding-right:14px;margin-right:14px}
 .feature-title{font-size:15px}
 .newsletter-area{padding:28px}
}
/* iPads and similar tablets held in portrait: avoid narrow columns. */
@media (min-width:761px) and (max-width:1024px) and (orientation:portrait){
 .screen{min-height:70svh}
 .hero-main{padding-top:34px}
 .hero-logo{max-width:660px}
 .intro-grid,.signup-grid{grid-template-columns:minmax(0,1fr);gap:30px}
 .intro-aside{max-width:680px}
 .signup-grid>div:first-child{max-width:760px}
 .newsletter-area{max-width:670px;width:100%}
 .content-section{padding:76px 0}
 .feature{margin-top:48px}
 .signup{padding:68px 0 78px}
}
/* Phones portrait: 100% widths, comfortable touch targets and safe spacing. */
@media (max-width:760px) and (orientation:portrait){
 .screen{min-height:74svh}
 .hero-main{padding-top:34px}
 .hero-logo{width:95%;max-width:100%}
 .hero-eyebrow{letter-spacing:.22em}
 .hero-tagline{letter-spacing:.18em}
 .newsletter-area{max-width:100%}
 .signup-grid,.intro-grid{gap:28px}
 .footer-links{row-gap:12px}
}
/* Landscape phones are WIDE but very SHORT; width-only mobile rules miss them. */
@media (orientation:landscape) and (max-height:560px) and (max-width:1100px){
 .wrap{padding-left:max(24px,env(safe-area-inset-left));padding-right:max(24px,env(safe-area-inset-right))}
 .screen{min-height:100svh;grid-template-rows:1fr auto}
 .hero-main{padding:12px 0 7px}
 .hero-lockup{max-width:700px}
 .hero-eyebrow{font-size:10px;letter-spacing:.22em;margin:0 0 8px}
 .hero-logo{width:min(76%,520px);max-height:31svh;object-fit:contain}
 .hero-desc{font-size:12px;line-height:1.5;margin:8px auto 0;max-width:560px}
 .hero-bottom{padding-bottom:9px}
 .hero-tagline{font-size:11px;letter-spacing:.17em;margin-bottom:6px}
 .scroll-link{font-size:9px;letter-spacing:.12em;gap:3px}
 .scroll-link:after{height:10px}
 .content-section{padding:46px 0 55px}
 .display{font-size:clamp(37px,5.5vw,63px)}
 .intro-grid,.signup-grid{grid-template-columns:minmax(0,1fr);gap:22px}
 .feature{grid-template-columns:repeat(3,minmax(0,1fr));margin-top:28px}
 .feature-item{border-right:1px solid var(--line);border-bottom:0;margin-right:12px;padding:15px 10px 12px 0}
 .feature-item:last-child{border-right:0;margin-right:0}
 .feature-title{font-size:13px;margin:10px 0 7px}
 .feature-text{font-size:12px}
 .signup{padding:48px 0 55px}
 .newsletter-area{max-width:690px;width:100%;padding:24px}
 .footer-inner{flex-direction:row;flex-wrap:wrap;align-items:center}
 .footer-links{flex-wrap:wrap}
}
/* Very short landscape displays: prioritize legibility over a fixed-screen hero. */
@media (orientation:landscape) and (max-height:375px) and (max-width:1100px){
 .screen{min-height:0}
 .hero-main{padding:9px 0 7px}
 .hero-logo{max-height:28svh}
 .hero-eyebrow{margin-bottom:4px}
 .hero-desc{margin-top:5px}
 .hero-bottom{padding-bottom:7px}
}
/* Respect browser font scaling and motion preferences. */
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}


/* v0.4: centered post-newsletter/footer content with subtle social links */
.footer-inner{flex-direction:column;justify-content:center;align-items:center;text-align:center;gap:16px}
.footer-logo{display:block;height:28px;margin:0 auto}
.social-links{display:flex;align-items:center;justify-content:center;gap:14px;flex-wrap:wrap}
.social-link{display:inline-flex;align-items:center;justify-content:center;gap:8px;color:#e8e8e3;font-size:10px;letter-spacing:.16em;text-transform:uppercase;opacity:.88;transition:opacity .2s ease, transform .2s ease}
.social-link:hover{opacity:1;transform:translateY(-1px)}
.social-link svg{width:16px;height:16px;display:block;flex:0 0 16px;color:currentColor}
.footer-meta,.footer-links a{font-size:11px;color:#969a9b;letter-spacing:.06em}
.footer-links{display:flex;gap:20px;justify-content:center;flex-wrap:wrap}
@media (max-width:760px){
 .footer-inner{gap:14px;align-items:center}
 .footer-logo{height:24px}
 .social-links{gap:10px 14px}
 .social-link{font-size:9px;letter-spacing:.12em}
 .social-link svg{width:15px;height:15px;flex-basis:15px}
 .footer-links{gap:16px;justify-content:center}
}
@media (orientation:landscape) and (max-height:560px) and (max-width:1100px){
 .footer-inner{gap:12px}
 .footer-logo{height:22px}
 .social-link{font-size:9px;letter-spacing:.1em}
 .social-link svg{width:14px;height:14px;flex-basis:14px}
}

/* v0.7: wider desktop, fluid devices, compact hero spacing. */
@media(min-width:1101px){
 :root{--max:1440px}
 .hero-lockup{max-width:1080px}
 .hero-logo{width:min(100%,960px)}
 .hero-desc{max-width:650px;font-size:16px}
}
/* Keep the opening position; remove half of the flexible gap below the copy. */
.screen{position:relative}
.hero-bottom{transform:translateY(calc(-1 * var(--lunox-gap-half,0px)))}

.page-main h2{font-size:clamp(23px,3vw,34px);margin-top:2em;max-width:850px;overflow-wrap:anywhere}.page-main h3{font-size:20px;margin-top:1.7em;max-width:850px}.page-main h4{font-size:17px}.page-main p{white-space:normal}.legal-back{display:inline-block;margin-bottom:24px}

/* v0.8.1: clear paired anchor buttons with a centered scroll line. */
.hero-actions{display:flex;justify-content:center;align-items:center;gap:12px;flex-wrap:wrap;padding:0 22px}
.hero-action{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:12px 20px;border:1px solid #777;color:#e6e6e3;font-size:10px;letter-spacing:.17em;text-transform:uppercase;transition:background .18s,color .18s,border-color .18s}
.hero-action:hover,.hero-action:focus-visible{background:#f4f4f1;color:#080808;border-color:#f4f4f1}
.hero-action:active{background:#ccc;color:#080808}
.hero-scroll-line{display:block;width:1px;height:27px;background:#858888;margin:12px auto 0}
@media(max-width:760px){.hero-actions{gap:10px}.hero-action{padding:11px 15px;font-size:10px;letter-spacing:.12em}}
@media(orientation:landscape) and (max-height:560px) and (max-width:1100px){.hero-action{padding:8px 16px}.hero-scroll-line{height:10px;margin-top:6px}}
@media(prefers-reduced-motion:reduce){.hero-action{transition:none}}

/* Keep the raised story and following sections above the positioned hero. */
body>main{position:relative;z-index:1}

/* v0.8.6: equal anchor buttons and a shared center axis. */
.hero-actions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));width:max-content;max-width:100%;margin-inline:auto}
.hero-action{min-width:0}
.hero-scroll-line{position:relative;left:50%;margin-left:0;margin-right:0;transform:translateX(-50%)}