/* ═══════════════════════════════════════════════════════════════════════════
   modal.css  —  eigener Dialograhmen des News-Portals

   Neu geschrieben für dieses Projekt. Im Quellprojekt bedienen sich die vier
   News-Modals am .systematik-*-Rahmen der Vergleichssystematik, der zu einer
   ganz anderen Ansicht gehört. Dieser Rahmen hier ist eigenständig und trägt
   das Präfix .nsmodal-, damit er kollisionsfrei bleibt.

   Verwendet von: Redaktion, Newsletter bestellen, Impressum, Datenschutz.
   ═══════════════════════════════════════════════════════════════════════════ */

.nsmodal-overlay {
    position: fixed;
    inset: 0;
    z-index: 9000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    box-sizing: border-box;
    background: rgba(10, 25, 50, 0.45);
    opacity: 0;
    transition: opacity 0.2s ease;
}

.nsmodal-overlay.is-visible {
    opacity: 1;
}

.nsmodal-dialog {
    width: 100%;
    max-width: 580px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: var(--bg-card);
    border-radius: 16px;
    box-shadow: 0 24px 60px rgba(10, 25, 50, 0.18), 0 4px 16px rgba(10, 25, 50, 0.08);
    opacity: 0;
    transform: translateY(12px);
    transition: transform 0.22s ease, opacity 0.22s ease;
}

.nsmodal-overlay.is-visible .nsmodal-dialog {
    opacity: 1;
    transform: translateY(0);
}

.nsmodal-dialog--wide {
    max-width: 700px;
}

/* Farben laufen über sechs Tokens, die css/seite.css bereitstellt:
   --bg-card, --bg-page, --border, --navy-700, --navy-900, --text-body.
   Früher kamen sie aus css/riat-format.css, das es hier nicht mehr gibt. */

/* ---- Kopfzeile ---------------------------------------------------- */

.nsmodal-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 20px 24px 16px;
    border-bottom: 1px solid var(--border);
    background: linear-gradient(180deg, var(--bg-page) 0%, var(--bg-card) 100%);
}

.nsmodal-icon {
    width: 32px;
    height: 32px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--navy-700);
}

.nsmodal-icon svg {
    width: 22px;
    height: 22px;
}

.nsmodal-title {
    flex: 1;
    margin: 0;
    font-size: 17px;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--navy-900);
}

.nsmodal-close {
    width: 32px;
    height: 32px;
    padding: 0;
    border: none;
    border-radius: 8px;
    background: transparent;
    color: var(--text-body);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s, color 0.15s;
}

.nsmodal-close:hover {
    background: var(--bg-page);
    color: var(--navy-900);
}

.nsmodal-close svg {
    width: 16px;
    height: 16px;
}

/* ---- Inhalt ------------------------------------------------------- */

.nsmodal-body {
    padding: 22px 24px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.nsmodal-body--scroll {
    max-height: 60vh;
    overflow-y: auto;
}

.nsmodal-body p {
    margin: 0;
    font-size: 14px;
    line-height: 1.65;
    color: var(--text-body);
}

.nsmodal-body h4 {
    margin: 8px 0 2px;
    font-size: 13px;
    font-weight: 700;
    color: var(--navy-900);
}

.nsmodal-body ul {
    margin: 4px 0 4px 18px;
    padding: 0;
    font-size: 13px;
    line-height: 1.65;
    color: var(--text-body);
}

.nsmodal-body a {
    color: var(--navy-900);
}

/* ---- Newsletter-Formulare ----------------------------------------- */

.ns-nl {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.ns-nl__zeile {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

/* Newsletter- und Kontaktfeld sehen gleich aus. Getrennt bleibt nur die
   Groesse: das Newsletterfeld steht neben seinem Knopf in einer Zeile und
   ist deshalb ein Flex-Element, das Kontaktfeld steht unter seiner
   Beschriftung. Ein flex-basis von 200px waere dort die HOEHE, weil die
   Zeile eine Spalte ist, und machte aus dem Eingabefeld einen Kasten. */
.ns-nl__feld,
.ns-kf__feld {
    box-sizing: border-box;
    padding: 10px 12px;
    font-family: inherit;
    font-size: 14px;
    color: var(--navy-900);
    background: #ffffff;
    border: 1px solid var(--border);
    border-radius: 8px;
}

.ns-nl__feld {
    flex: 1 1 200px;
    min-width: 0;
}

.ns-kf__feld {
    width: 100%;
}

.ns-nl__feld:focus,
.ns-kf__feld:focus {
    outline: none;
    border-color: var(--navy-900);
    box-shadow: 0 0 0 3px rgba(18, 57, 92, 0.12);
}

.ns-nl__knopf,
.ns-kf__knopf {
    flex: 0 0 auto;
    padding: 10px 20px;
    font-family: inherit;
    font-size: 14px;
    font-weight: 600;
    color: #ffffff;
    background: var(--navy-900);
    border: 1px solid var(--navy-900);
    border-radius: 8px;
    cursor: pointer;
}

.ns-nl__knopf:hover,
.ns-kf__knopf:hover { background: #0d2d4a; border-color: #0d2d4a; }

.ns-nl__feld:disabled,
.ns-nl__knopf:disabled,
.ns-kf__feld:disabled,
.ns-kf__knopf:disabled { opacity: 0.6; cursor: default; }

/* Der Honigtopf. NICHT display:none und nicht hidden: manche Bots lassen
   genau solche Felder aus. Aus dem Bild geschoben wird es trotzdem von
   jedem Browser, und erreichbar ist es ueber tabindex="-1" auch nicht. */
.ns-nl__topf,
.ns-kf__topf {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

/* MIT .nsmodal-body DAVOR, UND DAS IST KEIN SCHMUCK. Die Meldezeile ist
   ein <p> im Dialogkoerper, und .nsmodal-body p setzt Farbe und
   Schriftgrad. Das zaehlt (0,1,1) und schlaegt eine einzelne Klasse mit
   (0,1,0). Ohne den Vorfahren blieb die Fehlermeldung grau und 14px,
   gemessen am 25.09.2026 in beiden Dialogen: rgb(75,93,108) statt des
   gedachten Rots. Aufgefallen ist es erst am Bildschirmfoto, im
   Stylesheet sah alles richtig aus. */
.nsmodal-body .ns-nl__meldung,
.nsmodal-body .ns-kf__meldung {
    margin: 0;
    font-size: 13px;
    line-height: 1.5;
}

.nsmodal-body .ns-nl__meldung--ok,
.nsmodal-body .ns-kf__meldung--ok     { color: #1f6b43; }
.nsmodal-body .ns-nl__meldung--fehler,
.nsmodal-body .ns-kf__meldung--fehler { color: #a33a2a; }


/* Das Kontaktformular. Drei Felder untereinander, jedes mit sichtbarer
   Beschriftung: anders als beim Newsletter reicht ein Platzhaltertext
   hier nicht, denn er verschwindet beim Tippen, und bei drei Feldern
   weiss man dann nicht mehr, welches welches war.

   Die Beschriftung sitzt in einem <label>, das das Feld umschliesst. Ein
   Klick auf die Beschriftung setzt den Schreibzeiger damit ins Feld,
   ohne dass es dafuer ein id-Attribut braucht. Die Dialoge werden per
   innerHTML gebaut, zweimal geoeffnet gaebe es die id sonst doppelt. */
.ns-kf {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.ns-kf__zeile {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.ns-kf__marke {
    font-size: 13px;
    font-weight: 600;
    color: var(--navy-900);
}

.ns-kf__frei {
    font-weight: 400;
    color: #8899bb;
}

/* resize: vertical und nicht both. Waagerecht gezogen laeuft das Feld
   aus dem Dialog heraus, senkrecht ist es genau das, was jemand mit
   einer laengeren Nachricht braucht. */
.ns-kf__feld--gross {
    min-height: 110px;
    line-height: 1.55;
    resize: vertical;
}

.ns-kf__fuss {
    display: flex;
    justify-content: flex-end;
}

.nsmodal-divider {
    height: 1px;
    margin: 4px 0;
    background: linear-gradient(to right, var(--border), transparent);
}