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

   Der Rahmen 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. */

/* ---- 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);
}


/* ───────────────────────────────────────────────────────────────────────────
   Die frueheren style-Attribute in den Dialogen, seit dem 11.10.2026 als
   Klassen. .nsmodal-body p zaehlt (0,1,1). Jede Regel hier traegt die
   Klasse doppelt und ueberbietet damit auch Regeln mit Pseudoklasse, wie
   es vorher das Attribut tat. Die Links behalten ihre Farbe in jedem
   Zustand, auch das war mit dem Attribut so.
   ─────────────────────────────────────────────────────────────────────────── */
.nsmodal-body p.nsmodal-kleingedruckt.nsmodal-kleingedruckt { font-size: 13px; color: #6878a0; line-height: 1.65; }
.nsmodal-body p.nsmodal-anschrift.nsmodal-anschrift { font-size: 12px; color: #8899bb; }
.nsmodal-body p.nsmodal-anschrift.nsmodal-anschrift--eng.nsmodal-anschrift--eng { margin-bottom: 2px; }
.nsmodal-body p.nsmodal-fussnote.nsmodal-fussnote { font-size: 11px; color: #b0bfcf; margin: 0; }
.nsmodal-body a.nsmodal-post.nsmodal-post,
.nsmodal-body a.nsmodal-post.nsmodal-post:hover,
.nsmodal-body a.nsmodal-post.nsmodal-post:focus,
.nsmodal-body a.nsmodal-post.nsmodal-post:active,
.nsmodal-body a.nsmodal-post.nsmodal-post:visited { color: #333366; }