/* Gilroy — LightsOn corporate typeface. Wird bereits global über das
   Sitepackage von lights-on.io geladen, deshalb hier KEINE eigene @font-face-
   Deklaration und KEIN fonts/-Ordner in diesem Paket. Voraussetzung: Die
   global geladene Gilroy deckt die hier genutzten Schnitte 300/400/600/800 ab. */

#header-wrapper { display: none !important; }
main {top: 0 !important; padding-bottom: 0 !important;  }
#footer-wrapper .row.container { display: none !important; }
#footer-wrapper { padding-top: 0 !important; }
button { margin-top: 0 !important; }

:root{
/* ---- Brand core ---------------------------------------------------------- */
--lo-purple:#5939B7;          /* THE brand colour. Sampled from the master artwork. */
--lo-black:#000000;
--lo-white:#FFFFFF;

/* ---- Purple ramp (derived from --lo-purple in OKLCH) --------------------- */
--purple-50:#F2EFFB;
--purple-100:#E3DCF6;
--purple-200:#C7BAEC;
--purple-300:#A897E0;
--purple-400:#8570CE;
--purple-500:#5939B7;
--purple-600:#4A2E9C;
--purple-700:#3A247B;
--purple-800:#291A57;
--purple-900:#180F34;

/* ---- Neutral ramp (greys of the signet sheet: E6E6E6 / C6C6C6 are exact) -- */
--grey-0:#FFFFFF;
--grey-25:#FAFAFA;
--grey-50:#F4F4F4;
--grey-100:#E6E6E6;
--grey-200:#C6C6C6;
--grey-300:#A5A5A5;
--grey-400:#8A8A8A;
--grey-500:#6E6E6E;
--grey-600:#525252;
--grey-700:#3A3A3A;
--grey-800:#1F1F1F;
--grey-900:#111111;
--grey-1000:#000000;

/* ---- Semantic status ----------------------------------------------------- */
/* Not defined in the supplied brand artwork — chosen to sit beside the purple
   without competing. Confirm against the CI guide before production use. */
--status-success:#1F8A5B;
--status-success-surface:#E7F4ED;
--status-warning:#B87514;
--status-warning-surface:#FCF1E1;
--status-error:#C22C2C;
--status-error-surface:#FBEAEA;
--status-info:var(--purple-500);
--status-info-surface:var(--purple-50);

/* ---- Semantic aliases ---------------------------------------------------- */
--text-strong:var(--lo-black);
--text-body:var(--grey-700);
--text-muted:var(--grey-500);
--text-accent:var(--purple-500);
--text-on-accent:var(--lo-white);
--text-on-dark:var(--lo-white);
--text-on-dark-muted:rgb(255 255 255 / .70);

--surface-page:var(--lo-white);
--surface-subtle:var(--grey-50);
--surface-card:var(--lo-white);
--surface-inverse:var(--lo-black);
--surface-accent:var(--purple-500);
--surface-accent-subtle:var(--purple-50);

--border-subtle:var(--grey-100);
--border-default:var(--grey-200);
--border-strong:var(--lo-black);
--border-accent:var(--purple-500);

--action-primary-bg:var(--purple-500);
--action-primary-bg-hover:var(--purple-600);
--action-primary-bg-active:var(--purple-700);
--action-primary-fg:var(--lo-white);
--action-secondary-fg:var(--lo-black);
--action-secondary-border:var(--lo-black);
--action-ghost-fg:var(--purple-500);
--action-disabled-bg:var(--grey-100);
--action-disabled-fg:var(--grey-300);

--focus-ring:var(--purple-500);

/* ---- Overlays / protection --------------------------------------------- */
--overlay-scrim:rgb(0 0 0 / .55);
--overlay-purple:rgb(89 57 183 / .88);
--overlay-protect-bottom:linear-gradient(to top,rgb(0 0 0 / .72) 0%,rgb(0 0 0 / .35) 45%,rgb(0 0 0 / 0) 100%); /* @kind other */
}

/* Dark / purple-flood section scope. Apply to a <section> or wrapper. */
.lo-on-dark{
--text-strong:var(--lo-white);
--text-body:rgb(255 255 255 / .78);
--text-muted:rgb(255 255 255 / .58);
--text-accent:var(--purple-200);
--surface-page:var(--lo-black);
--surface-subtle:var(--grey-900);
--surface-card:rgb(255 255 255 / .06);
--border-subtle:rgb(255 255 255 / .16);
--border-default:rgb(255 255 255 / .28);
--border-strong:var(--lo-white);
--action-secondary-fg:var(--lo-white);
--action-secondary-border:var(--lo-white);
--action-ghost-fg:var(--lo-white);
}

.lo-on-purple{
--text-strong:var(--lo-white);
--text-body:rgb(255 255 255 / .84);
--text-muted:rgb(255 255 255 / .64);
--text-accent:var(--lo-white);
--surface-page:var(--purple-500);
--surface-subtle:var(--purple-600);
--surface-card:rgb(255 255 255 / .10);
--border-subtle:rgb(255 255 255 / .20);
--border-default:rgb(255 255 255 / .34);
--border-strong:var(--lo-white);
--action-primary-bg:var(--lo-white);
--action-primary-bg-hover:var(--purple-50);
--action-primary-bg-active:var(--purple-100);
--action-primary-fg:var(--purple-500);
--action-secondary-fg:var(--lo-white);
--action-secondary-border:var(--lo-white);
--action-ghost-fg:var(--lo-white);
--focus-ring:var(--lo-white);
}

:root{
--font-core:"Gilroy","Helvetica Neue",Arial,sans-serif; /* @kind font */
--font-mono:ui-monospace,"SF Mono",Menlo,Consolas,monospace; /* @kind font */

--fw-light:300; /* @kind font */
--fw-regular:400; /* @kind font */
--fw-semibold:600; /* @kind font */
--fw-extrabold:800; /* @kind font */

/* Fluid display sizes — LightsOn headlines are large and set in ExtraBold caps */
--fs-display-1:clamp(2.75rem,5.4vw,4.5rem);   /* @kind font */ /* 44 → 72 */
--fs-display-2:clamp(2.25rem,4vw,3.5rem);     /* @kind font */ /* 36 → 56 */
--fs-h1:clamp(2rem,3.2vw,2.75rem);            /* @kind font */ /* 32 → 44 */
--fs-h2:clamp(1.625rem,2.4vw,2.125rem);       /* @kind font */ /* 26 → 34 */
--fs-h3:1.375rem;                             /* @kind font */ /* 22 */
--fs-h4:1.125rem;                             /* @kind font */ /* 18 */
--fs-body-lg:1.125rem;                        /* @kind font */ /* 18 */
--fs-body:1rem;                               /* @kind font */ /* 16 */
--fs-body-sm:.875rem;                         /* @kind font */ /* 14 */
--fs-caption:.75rem;                          /* @kind font */ /* 12 */
--fs-eyebrow:.8125rem;                        /* @kind font */ /* 13 */

--lh-tight:1.04; /* @kind font */
--lh-display:1.08; /* @kind font */
--lh-heading:1.18; /* @kind font */
--lh-body:1.6; /* @kind font */
--lh-relaxed:1.75; /* @kind font */

--ls-display:-.02em; /* @kind font */
--ls-heading:-.01em; /* @kind font */
--ls-body:0; /* @kind font */
--ls-eyebrow:.14em; /* @kind font */
--ls-caps:.06em; /* @kind font */

/* Semantic type roles */
--type-display-family:var(--font-core); /* @kind font */
--type-display-weight:var(--fw-extrabold); /* @kind font */
--type-display-transform:uppercase; /* @kind font */
--type-eyebrow-weight:var(--fw-semibold); /* @kind font */
--type-body-weight:var(--fw-regular); /* @kind font */
--type-lead-weight:var(--fw-light); /* @kind font */
}

:root{
/* 4px base scale */
--space-0:0;
--space-1:4px;
--space-2:8px;
--space-3:12px;
--space-4:16px;
--space-5:20px;
--space-6:24px;
--space-8:32px;
--space-10:40px;
--space-12:48px;
--space-16:64px;
--space-20:80px;
--space-24:96px;
--space-32:128px;
--space-40:160px;

/* Layout */
--container-max:1320px;
--container-narrow:840px;
--container-text:68ch; /* @kind other */
--gutter:clamp(20px,5vw,64px); /* @kind spacing */
--section-y:clamp(64px,8vw,128px); /* @kind spacing */
--grid-columns:12; /* @kind other */
--grid-gap:24px;

/* Control sizing */
--control-h-sm:36px;
--control-h-md:44px;
--control-h-lg:56px;
--control-px-sm:16px;
--control-px-md:24px;
--control-px-lg:32px;
--icon-sm:16px;
--icon-md:20px;
--icon-lg:24px;
--icon-xl:32px;
}

:root{
/* The signet is a hard 90° corner: LightsOn geometry is square-first.
   Radii stay small and are never applied to the signet or logo. */
--radius-0:0px;
--radius-sm:2px;
--radius-md:4px;
--radius-lg:8px;
--radius-xl:16px;
--radius-pill:999px;

--radius-card:var(--radius-md);
--radius-control:var(--radius-0);   /* buttons and inputs are square-edged */
--radius-media:var(--radius-0);
--radius-badge:var(--radius-pill);

--border-w-hair:1px; /* @kind other */
--border-w-md:2px; /* @kind other */
--border-w-accent:4px; /* @kind other */

/* Shadows are used sparingly — elevation is usually signalled by a border or a
   flat surface change. */
--shadow-none:none;
--shadow-xs:0 1px 2px rgb(17 17 17 / .06);
--shadow-sm:0 2px 8px rgb(17 17 17 / .07);
--shadow-md:0 8px 24px rgb(17 17 17 / .09);
--shadow-lg:0 20px 56px rgb(17 17 17 / .13);
--shadow-purple:0 16px 40px rgb(89 57 183 / .26);
--shadow-inset-hair:inset 0 0 0 1px var(--border-subtle);
--shadow-card:var(--shadow-none);
--shadow-card-hover:var(--shadow-md);
--shadow-focus:0 0 0 3px rgb(89 57 183 / .35);
}

:root{
--dur-instant:80ms; /* @kind other */
--dur-fast:160ms; /* @kind other */
--dur-base:240ms; /* @kind other */
--dur-slow:420ms; /* @kind other */
--dur-reveal:640ms; /* @kind other */

/* No bounce, no overshoot. LightsOn motion is calm and decisive. */
--ease-standard:cubic-bezier(.22,.61,.36,1); /* @kind other */
--ease-out:cubic-bezier(.16,1,.3,1); /* @kind other */
--ease-in:cubic-bezier(.55,.06,.68,.19); /* @kind other */
--ease-linear:linear; /* @kind other */

--transition-control:background-color var(--dur-fast) var(--ease-standard),color var(--dur-fast) var(--ease-standard),border-color var(--dur-fast) var(--ease-standard); /* @kind other */
--transition-card:transform var(--dur-base) var(--ease-standard),box-shadow var(--dur-base) var(--ease-standard); /* @kind other */
--transition-reveal:opacity var(--dur-reveal) var(--ease-out),transform var(--dur-reveal) var(--ease-out); /* @kind other */

--lift-card:-4px; /* @kind other */
--press-scale:.98; /* @kind other */
}
@media (prefers-reduced-motion:reduce){
:root{
--dur-fast:0ms; /* @kind other */
--dur-base:0ms; /* @kind other */
--dur-slow:0ms; /* @kind other */
--dur-reveal:0ms; /* @kind other */
--lift-card:0px;
--press-scale:1; /* @kind other */
}
}


/* ====== LightsOn TYPO3-Landingpage — Seitenstyles ======================== */
.lo-lp *,.lo-lp *::before,.lo-lp *::after{box-sizing:border-box}
.lo-lp{font-family:var(--font-core);font-size:var(--fs-body);font-weight:400;line-height:var(--lh-body);color:var(--text-body);background:var(--surface-page);-webkit-font-smoothing:antialiased;text-wrap:pretty}
.lo-lp h1,.lo-lp h2,.lo-lp h3,.lo-lp h4{font-family:var(--font-core);margin:0}
.lo-lp p{margin:0}
.lo-lp img{max-width:100%}
.lo-lp a{color:var(--text-accent);text-decoration:none;transition:var(--transition-control)}
.lo-lp a:hover{color:var(--purple-600);text-decoration:underline;text-underline-offset:.18em}
.lo-lp :where(button,a,input,select,textarea):focus-visible{outline:2px solid var(--focus-ring);outline-offset:2px}
.lo-lp ::selection{background:var(--purple-500);color:#fff}

/* Theme-Scopes des Design Systems */
.lo-on-dark{--text-strong:#fff;--text-body:rgb(255 255 255 / .78);--text-muted:rgb(255 255 255 / .58);--text-accent:var(--purple-200);--surface-page:#000;--surface-card:rgb(255 255 255 / .06);--border-subtle:rgb(255 255 255 / .16);--border-strong:#fff;--action-secondary-fg:#fff;--action-secondary-border:#fff}
.lo-on-purple{--text-strong:#fff;--text-body:rgb(255 255 255 / .84);--text-muted:rgb(255 255 255 / .64);--text-accent:#fff;--surface-page:var(--purple-500);--surface-card:rgb(255 255 255 / .10);--border-subtle:rgb(255 255 255 / .20);--border-strong:#fff;--action-primary-bg:#fff;--action-primary-bg-hover:var(--purple-50);--action-primary-fg:var(--purple-500);--action-secondary-fg:#fff;--action-secondary-border:#fff;--focus-ring:#fff}

/* Buttons (entspricht Button-Komponente des Design Systems) */
.lo-lp .lo-btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--space-2);font-family:var(--font-core);font-weight:600;letter-spacing:var(--ls-caps);text-transform:uppercase;text-decoration:none;border-radius:var(--radius-control);cursor:pointer;transition:var(--transition-control),transform 80ms cubic-bezier(.22,.61,.36,1)}
.lo-lp .lo-btn:hover{text-decoration:none}
.lo-lp .lo-btn:active{transform:scale(.98)}
.lo-lp .lo-btn--sm{height:var(--control-h-sm);padding:0 var(--control-px-sm);font-size:var(--fs-caption)}
.lo-lp .lo-btn--md{height:var(--control-h-md);padding:0 var(--control-px-md);font-size:var(--fs-body-sm)}
.lo-lp .lo-btn--lg{height:var(--control-h-lg);padding:0 var(--control-px-lg);font-size:var(--fs-body)}
.lo-lp .lo-btn--primary{background:var(--action-primary-bg);color:var(--action-primary-fg);border:2px solid var(--action-primary-bg)}
.lo-lp .lo-btn--primary:hover{background:var(--action-primary-bg-hover);border-color:var(--action-primary-bg-hover);color:var(--action-primary-fg)}
.lo-lp .lo-btn--secondary{background:transparent;color:var(--action-secondary-fg);border:2px solid var(--action-secondary-border)}
.lo-lp .lo-btn--secondary:hover{background:var(--action-secondary-border);color:var(--surface-page)}
.lo-lp .lo-btn[disabled],.lo-lp .lo-btn[aria-busy="true"]{background:var(--action-disabled-bg);border-color:var(--action-disabled-bg);color:var(--action-disabled-fg);cursor:not-allowed}

/* Gelber Header-CTA */
.lo-lp [data-gold]:hover{background:#E6B400;color:#000;text-decoration:none}

/* Versions-Auswahl */
.lo-lp .lo-vbtn{font-family:inherit;font-size:14px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;padding:0 20px;height:48px;border-radius:0;cursor:pointer;background:transparent;color:var(--text-strong);border:2px solid var(--lo-black);transition:background 160ms cubic-bezier(.22,.61,.36,1),color 160ms}
.lo-lp .lo-vbtn:hover{background:var(--grey-50)}
.lo-lp .lo-vbtn.is-active{background:var(--purple-500);border-color:var(--purple-500);color:#fff}

/* Status-Chip */
.lo-lp .lo-chip{font-size:13px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;padding:6px 12px}
.lo-lp .lo-chip--alarm{background:var(--purple-500);color:#fff}
.lo-lp .lo-chip--ok{background:var(--surface-subtle);color:var(--text-strong);border:1px solid var(--border-subtle)}
.lo-lp .lo-chip--neutral{background:var(--grey-100);color:var(--text-muted)}

/* Formular */
.lo-lp .lo-input:focus{outline:none;border-color:var(--purple-500);box-shadow:0 0 0 3px rgb(89 57 183 / .35)}
.lo-lp .lo-input[aria-invalid="true"]{border-color:var(--status-error)}
.lo-lp .lo-formmsg{font-size:14px;line-height:1.6;padding:12px 16px;background:#6a4ebf;border-top:2px solid #ffc900;color:var(--text-body)}
.lo-lp .lo-formmsg.is-ok{border-top-color:var(--purple-500)}

/* Icons */
.lo-lp .material-symbols-outlined{font-variation-settings:"FILL" 0,"wght" 300,"GRAD" 0,"opsz" 24;line-height:1;user-select:none}
.lo-lp .lo-icon-40{font-size:40px;color:var(--purple-500)}

@media (prefers-reduced-motion: reduce){.lo-lp *{transition-duration:0ms !important;animation-duration:0ms !important}}

@media (max-width: 640px){
  /* Header-Zeile nicht umbrechen lassen */
  .lo-lp > header > div{
    flex-wrap:nowrap !important;
    gap:12px !important;
    padding-left:16px !important;
    padding-right:16px !important;
  }
  /* Logo kleiner */
  .lo-lp > header img{
    height:34px !important;
    flex:0 1 auto;
    min-width:0;
  }
  /* Button kompakter, Text nicht brechen */
  .lo-lp > header a[data-gold]{
    height:38px !important;
    padding:0 14px !important;
    font-size:12px !important;
    letter-spacing:.04em !important;
    white-space:nowrap;
    flex:none;
  }
}