/*
  Die oeffentliche Seite von NCS-Facility.

  Jede Farbe, jeder Abstand und jeder Radius hier ist an den GERENDERTEN Stilen von
  nc-solution.com gemessen (02.11.2026), nicht aus einem Styleguide abgeschrieben. Die Werte
  stehen als Variablen an einer Stelle, damit der Tag, an dem die Firmenseite ihre Farben
  aendert, eine Aenderung hier ist und nicht zwanzig.

  Die gemessenen Werte:
    Hero-Flaeche  #31465D   (Tailwind-Klasse bg-brand-700 der Firmenseite)
    Abschluss     #2B3B4D
    Fusszeile     #232D3A, Text #E1E7EE
    Akzent        #FD7800   (28 Flaechen, 219 Textfarben - der tragende Akzent)
    Primaerbutton #E56800   (Radius 8px, Innenabstand 14/28px, Gewicht 600)
    Akzent hell   #FFAB6A   (auf dunklem Grund, z. B. die Kicker-Pille)
    Text          #232D3A, zweite Stufe #31465D
    Linien        #E1E7EE   Flaechen #F2F5F8
    Schrift       Inter 400-800, H1 700 mit -0.025em
    Raster        Container 1200px, Textspalte 672px, Sektion 64px, Karte 16px/28px

  ALLES ist mit .ncs praefixiert und haengt unter .ncs-public. Der Grund ist Bootstrap: der
  Webclient laedt es global in App.razor, und ein nicht praefixierter Selektor hier wuerde je
  nach Ladereihenfolge gewinnen oder verlieren. Mit eigenen Klassennamen stellt sich die Frage
  nicht.
*/

.ncs-public {
    /* Farben */
    --ncs-ink: #232D3A;
    --ncs-ink-soft: #31465D;
    --ncs-ink-dim: #395370;
    --ncs-brand: #31465D;
    --ncs-brand-dark: #2B3B4D;
    --ncs-accent: #FD7800;
    --ncs-accent-strong: #E56800;
    --ncs-accent-light: #FFAB6A;
    --ncs-line: #E1E7EE;
    --ncs-surface: #F2F5F8;
    --ncs-paper: #FFFFFF;

    /* Raster */
    --ncs-container: 1200px;
    --ncs-prose: 672px;
    --ncs-gutter: 16px;
    --ncs-section: 64px;
    --ncs-radius: 8px;
    --ncs-radius-card: 16px;

    font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    font-size: 16px;
    line-height: 1.6;
    color: var(--ncs-ink);
    background-color: var(--ncs-paper);
    -webkit-font-smoothing: antialiased;
}

/* ------------------------------------------------------------------ Grundgeruest */

.ncs-public *,
.ncs-public *::before,
.ncs-public *::after {
    box-sizing: border-box;
}

.ncs-public h1,
.ncs-public h2,
.ncs-public h3,
.ncs-public h4 {
    margin: 0 0 0.5em;
    font-weight: 700;
    letter-spacing: -0.025em;
    line-height: 1.25;
    color: inherit;
}

.ncs-public h1 {
    /* clamp statt Medienabfrage: eine Zeile statt dreier Bruchpunkte, und auf einem schmalen
       Telefon bleibt die Zeile lesbar statt in vier Silben zu brechen. */
    font-size: clamp(1.9rem, 4.2vw, 2.75rem);
}

.ncs-public h2 {
    font-size: clamp(1.5rem, 3vw, 1.875rem);
}

.ncs-public h3 {
    font-size: 1.125rem;
    letter-spacing: -0.01em;
}

.ncs-public p {
    margin: 0 0 1rem;
}

.ncs-public a {
    color: var(--ncs-accent);
    text-decoration: none;
}

.ncs-public a:hover,
.ncs-public a:focus-visible {
    text-decoration: underline;
}

.ncs-public :focus-visible {
    /* Sichtbar und zwei Pixel abgesetzt: ein Fokusring, der auf der Kante des Elements sitzt,
       verschwindet auf farbigen Flaechen. */
    outline: 2px solid var(--ncs-accent);
    outline-offset: 2px;
}

.ncs-public ul.ncs-points {
    margin: 0;
    padding: 0;
    list-style: none;
}

.ncs-public ul.ncs-points li {
    position: relative;
    padding-left: 1.5rem;
    margin-bottom: 0.5rem;
    color: var(--ncs-ink-soft);
}

.ncs-public ul.ncs-points li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.6em;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background-color: var(--ncs-accent);
}

/* ------------------------------------------------------------------ Breiten */

.ncs-container {
    width: 100%;
    max-width: var(--ncs-container);
    margin: 0 auto;
    padding: 0 var(--ncs-gutter);
}

.ncs-prose {
    max-width: var(--ncs-prose);
}

.ncs-prose-center {
    max-width: var(--ncs-prose);
    margin-left: auto;
    margin-right: auto;
}

/* ------------------------------------------------------------------ Sektionen */

.ncs-section {
    padding: var(--ncs-section) 0;
    background-color: var(--ncs-paper);
}

.ncs-section--tint {
    background-color: var(--ncs-surface);
}

.ncs-section--dark {
    background-color: var(--ncs-brand-dark);
    color: #FFFFFF;
}

.ncs-section--dark h2,
.ncs-section--dark p {
    color: #FFFFFF;
}

.ncs-label {
    display: block;
    margin-bottom: 0.75rem;
    font-size: 0.8125rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ncs-accent);
}

.ncs-section--dark .ncs-label {
    color: var(--ncs-accent-light);
}

.ncs-lead {
    font-size: 1.0625rem;
    color: var(--ncs-ink-soft);
}

.ncs-section--dark .ncs-lead {
    color: #C5D2DF;
}

/* ------------------------------------------------------------------ Kopf und Fuss */

.ncs-header {
    position: sticky;
    top: 0;
    z-index: 30;
    background-color: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(8px);
    border-bottom: 1px solid var(--ncs-line);
}

.ncs-header__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    min-height: 65px;
}

.ncs-brand {
    font-size: 1.0625rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--ncs-ink);
}

.ncs-brand:hover {
    text-decoration: none;
}

.ncs-brand__accent {
    color: var(--ncs-accent);
}

.ncs-nav {
    display: flex;
    align-items: center;
    gap: 1.5rem;
}

.ncs-nav a {
    font-size: 0.9375rem;
    font-weight: 500;
    color: var(--ncs-ink-soft);
}

.ncs-nav a:hover {
    color: var(--ncs-accent);
    text-decoration: none;
}

.ncs-nav a.active {
    color: var(--ncs-accent);
}

.ncs-footer {
    background-color: var(--ncs-ink);
    color: #E1E7EE;
    padding: 3rem 0 2rem;
}

.ncs-footer a {
    color: #E1E7EE;
}

.ncs-footer a:hover {
    color: var(--ncs-accent-light);
}

.ncs-footer__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: 2rem;
}

.ncs-footer h3 {
    font-size: 0.8125rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #9DB1C5;
}

.ncs-footer ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

.ncs-footer li {
    margin-bottom: 0.4rem;
    font-size: 0.9375rem;
}

.ncs-footer__bottom {
    margin-top: 2.5rem;
    padding-top: 1.5rem;
    border-top: 1px solid rgba(197, 210, 223, 0.2);
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 1.5rem;
    justify-content: space-between;
    font-size: 0.875rem;
    color: #9DB1C5;
}

/* ------------------------------------------------------------------ Hero */

.ncs-hero {
    background-color: var(--ncs-brand);
    color: #FFFFFF;
    padding: 5rem 0;
}

.ncs-hero h1 {
    color: #FFFFFF;
    max-width: 56rem;
}

.ncs-hero p {
    color: #C5D2DF;
    font-size: 1.0625rem;
    max-width: 44rem;
}

.ncs-pill {
    display: inline-block;
    padding: 0.3rem 0.85rem;
    margin-bottom: 1.5rem;
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 9999px;
    background-color: rgba(255, 255, 255, 0.05);
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--ncs-accent-light);
}

/* ------------------------------------------------------------------ Schaltflaechen */

.ncs-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-top: 1.75rem;
}

.ncs-btn {
    display: inline-block;
    padding: 14px 28px;
    border: 0;
    border-radius: var(--ncs-radius);
    font-size: 1rem;
    font-weight: 600;
    font-family: inherit;
    line-height: 1.2;
    cursor: pointer;
    text-align: center;
}

.ncs-btn:hover {
    text-decoration: none;
}

.ncs-btn--primary {
    background-color: var(--ncs-accent-strong);
    color: #FFFFFF;
}

.ncs-btn--primary:hover {
    background-color: #CC5C00;
    color: #FFFFFF;
}

.ncs-btn--ghost {
    background-color: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: #FFFFFF;
}

.ncs-btn--ghost:hover {
    background-color: rgba(255, 255, 255, 0.12);
    color: #FFFFFF;
}

.ncs-btn--outline {
    background-color: var(--ncs-paper);
    border: 1px solid var(--ncs-line);
    color: var(--ncs-ink);
}

.ncs-btn--outline:hover {
    border-color: var(--ncs-accent);
    color: var(--ncs-accent);
}

.ncs-btn--small {
    padding: 10px 20px;
    font-size: 0.9375rem;
}

/* ------------------------------------------------------------------ Karten */

.ncs-grid {
    display: grid;
    gap: 1.5rem;
    grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
}

.ncs-grid--two {
    grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
}

.ncs-card {
    background-color: var(--ncs-paper);
    border: 1px solid var(--ncs-line);
    border-radius: var(--ncs-radius-card);
    padding: 28px;
}

.ncs-card__code {
    display: block;
    margin-bottom: 0.4rem;
    font-size: 0.8125rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--ncs-accent);
}

.ncs-card h3 {
    margin-bottom: 0.6rem;
}

.ncs-card p {
    color: var(--ncs-ink-soft);
    margin-bottom: 1rem;
}

.ncs-card--highlight {
    border-color: var(--ncs-accent);
    box-shadow: 0 1px 2px rgba(35, 45, 58, 0.04);
}

/* ------------------------------------------------------------------ Statusmarkierung */

/*
  Das Muster ist von der Firmenseite uebernommen, wo NCS-Banking ein Abzeichen
  "IN VORBEREITUNG" traegt. Es ist hier nicht Zierde: die Fachmodule sind laut
  docs/architektur.md nicht umgesetzt, und eine Seite, die das verschweigt, verkauft etwas,
  das niemand ausliefern kann.
*/
.ncs-badge {
    display: inline-block;
    padding: 0.2rem 0.6rem;
    border-radius: 9999px;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    vertical-align: middle;
}

.ncs-badge--soon {
    background-color: #FFE8D1;
    color: #8A4200;
}

.ncs-badge--ready {
    background-color: #E1E7EE;
    color: var(--ncs-ink-soft);
}

.ncs-notice {
    border: 1px solid var(--ncs-line);
    border-left: 4px solid var(--ncs-accent);
    border-radius: var(--ncs-radius);
    background-color: var(--ncs-surface);
    padding: 1.25rem 1.5rem;
    margin: 0 0 2rem;
}

.ncs-notice p:last-child {
    margin-bottom: 0;
}

.ncs-notice--dark {
    background-color: rgba(255, 255, 255, 0.06);
    border-color: rgba(255, 255, 255, 0.15);
    border-left-color: var(--ncs-accent-light);
}

/* ------------------------------------------------------------------ Preistafel */

.ncs-price {
    display: flex;
    align-items: baseline;
    gap: 0.4rem;
    margin: 0.75rem 0 1.25rem;
}

.ncs-price__value {
    font-size: 1.75rem;
    font-weight: 700;
    letter-spacing: -0.02em;
}

.ncs-price__unit {
    font-size: 0.9375rem;
    color: var(--ncs-ink-dim);
}

/*
  Der Platzhalter ist ABSICHTLICH als solcher zu erkennen und nicht als Zahl verkleidet.
  Es ist kein Preis entschieden (docs/lizenzmodell.md), und eine gestrichelte Flaeche sagt das
  einem Besucher in einem Blick, waehrend "0,00 EUR" oder "ab 9 EUR" ihn anluegen wuerde.
*/
.ncs-price__placeholder {
    display: inline-block;
    padding: 0.35rem 0.75rem;
    border: 1px dashed var(--ncs-accent);
    border-radius: var(--ncs-radius);
    background-color: #FFF6EE;
    font-size: 0.9375rem;
    font-weight: 600;
    color: #8A4200;
}

/* ------------------------------------------------------------------ Formular */

.ncs-form {
    max-width: var(--ncs-prose);
}

.ncs-field {
    margin-bottom: 1.25rem;
}

.ncs-field > label {
    display: block;
    margin-bottom: 0.35rem;
    font-size: 0.9375rem;
    font-weight: 600;
}

.ncs-field__hint {
    display: block;
    margin-top: 0.35rem;
    font-size: 0.875rem;
    color: var(--ncs-ink-dim);
}

/* Die Meldung steht UNTER ihrem Feld, nicht in einer Liste ueber dem Formular: bei vier
   Eingaben muesste der Besucher sonst raten, welche gemeint ist. */
.ncs-field__error {
    display: block;
    margin-top: 0.35rem;
    font-size: 0.875rem;
    font-weight: 600;
    color: #B32121;
}

.ncs-public .ncs-input {
    display: block;
    width: 100%;
    padding: 11px 14px;
    border: 1px solid var(--ncs-line);
    border-radius: var(--ncs-radius);
    background-color: var(--ncs-paper);
    font-family: inherit;
    font-size: 1rem;
    color: var(--ncs-ink);
}

.ncs-public .ncs-input:focus {
    border-color: var(--ncs-accent);
    outline: 2px solid rgba(253, 120, 0, 0.25);
    outline-offset: 0;
}

.ncs-host-preview {
    display: flex;
    align-items: center;
    gap: 0;
}

.ncs-host-preview .ncs-input {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

.ncs-host-preview__suffix {
    flex: 0 0 auto;
    padding: 11px 14px;
    border: 1px solid var(--ncs-line);
    border-left: 0;
    border-top-right-radius: var(--ncs-radius);
    border-bottom-right-radius: var(--ncs-radius);
    background-color: var(--ncs-surface);
    font-size: 1rem;
    color: var(--ncs-ink-dim);
    white-space: nowrap;
}

.ncs-choice {
    display: block;
    border: 1px solid var(--ncs-line);
    border-radius: var(--ncs-radius-card);
    padding: 1.25rem;
    margin-bottom: 0.75rem;
    cursor: pointer;
}

.ncs-choice:hover {
    border-color: var(--ncs-accent);
}

.ncs-choice__head {
    display: flex;
    align-items: baseline;
    gap: 0.6rem;
    font-weight: 600;
}

.ncs-choice__modules {
    display: block;
    margin-top: 0.4rem;
    font-size: 0.875rem;
    color: var(--ncs-ink-dim);
}

.ncs-error {
    border: 1px solid #E4A3A3;
    border-left: 4px solid #B32121;
    border-radius: var(--ncs-radius);
    background-color: #FDF2F2;
    padding: 1rem 1.25rem;
    margin-bottom: 1.5rem;
    color: #7A1B1B;
}

.ncs-success {
    border: 1px solid #A9D5B5;
    border-left: 4px solid #1E7B3C;
    border-radius: var(--ncs-radius);
    background-color: #F1F9F3;
    padding: 1.25rem 1.5rem;
    margin-bottom: 1.5rem;
}

/* ------------------------------------------------------------------ Rechtstexte */

.ncs-legal h2 {
    margin-top: 2.5rem;
    font-size: 1.25rem;
}

.ncs-legal h2:first-of-type {
    margin-top: 0;
}

.ncs-legal address {
    font-style: normal;
    color: var(--ncs-ink-soft);
}

.ncs-legal ul {
    color: var(--ncs-ink-soft);
    padding-left: 1.25rem;
}

.ncs-legal li {
    margin-bottom: 0.4rem;
}

/* ------------------------------------------------------------------ Schmale Geraete */

@media (max-width: 720px) {
    .ncs-public {
        --ncs-section: 44px;
    }

    .ncs-hero {
        padding: 3rem 0;
    }

    .ncs-nav {
        gap: 0.9rem;
    }

    /* Die Zweitnavigation weicht, die Anmeldung bleibt: auf einem Telefon ist der Platz fuer
       sechs Punkte nicht da, und der Weg zur Registrierung ist der Zweck der Seite. */
    .ncs-nav .ncs-nav__secondary {
        display: none;
    }

    .ncs-actions .ncs-btn {
        width: 100%;
    }

    .ncs-host-preview {
        flex-wrap: wrap;
    }

    .ncs-host-preview .ncs-input {
        border-radius: var(--ncs-radius);
    }

    .ncs-host-preview__suffix {
        border-left: 1px solid var(--ncs-line);
        border-radius: var(--ncs-radius);
        margin-top: 0.4rem;
    }
}