/* Mein NAMMERT, angemeldete Ansicht (06.11.2026).
 *
 * Aufbau wie in Desktop\Design-Vorschau\mein-nammert: am Schreibtisch eine
 * feste Leiste links, auf dem Telefon eine Leiste unten wie in einer App.
 * Klassen statt style-Attributen, weil offen.css jedem Absatz mit
 * "border: 1px solid" im style-Attribut Rahmen und Grund nimmt; ein Hinweis
 * stand dann als blosser Satz zwischen zwei Linien.
 *
 * Nur Tokens aus look.css, damit hell und dunkel von selbst stimmen. Ecken
 * eckig (bin/pruefe-ecken.py), rund nur echte Kreise.
 */

/* Angemeldet: Seitenkopf weg, Inhalt breiter. */
body:has(#nm-konto[data-schritt="konto"]) .nm-konto-kopf,
body:has(#nm-konto[data-schritt="konto"]) .nm-vor-anmeldung { display: none; }
body:has(#nm-konto[data-schritt="konto"]) main[data-screen-label] { max-width: 1240px !important; padding-bottom: 40px !important; }
body:has(#nm-konto[data-schritt="konto"]) main[data-screen-label] > section:first-of-type + section { padding-top: 28px !important; }

.nk { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 52px; align-items: start; color: var(--color-text); }
.nk-leiste { position: sticky; top: 96px; display: flex; flex-direction: column; gap: 0; }
.nk-wer { padding: 0 0 18px; margin: 0 0 10px; border-bottom: 1px solid var(--color-divider); }
.nk-wer strong { display: block; font-size: 18px; line-height: 25px; font-weight: 700; overflow-wrap: anywhere; }
.nk-wer span { display: block; font-size: 14.5px; line-height: 22px; color: color-mix(in srgb, var(--color-text) 72%, transparent); overflow-wrap: anywhere; }
.nk-nav { list-style: none; margin: 0; padding: 0; }
.nk-nav a { display: flex; align-items: center; gap: 12px; min-height: 48px; padding: 0 12px; color: var(--color-text); text-decoration: none; font-size: 16.5px; border-left: 4px solid transparent; }
.nk-nav a:hover { background: color-mix(in srgb, var(--color-accent) 8%, transparent); }
.nk-nav a[aria-current="page"] { border-left-color: var(--color-accent); background: color-mix(in srgb, var(--color-accent) 12%, transparent); font-weight: 700; }
.nk-nav svg, .nk-unten svg { width: 22px; height: 22px; flex: none; }
.nk-zahl { margin-left: auto; min-width: 22px; padding: 0 6px; font-size: 13px; line-height: 21px; text-align: center; font-weight: 700; background: var(--color-accent-2); color: var(--nm-auf-akzent); }
.nk-leiste-fuss { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--color-divider); font-size: 15px; line-height: 23px; }
.nk-leiste-fuss a { display: block; color: var(--color-text); }
.nk-abmelden { margin-top: 10px; background: none; border: 0; padding: 6px 0; font: inherit; font-size: 15px; color: color-mix(in srgb, var(--color-text) 72%, transparent); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }

.nk-inhalt { min-width: 0; }
.nk-ueber { margin: 0 0 8px; font-size: 15px; letter-spacing: .08em; text-transform: uppercase; font-weight: 700; color: var(--color-accent-2); }
.nk h1 { margin: 0; }
.nk-vorspann { margin: 14px 0 0; font-size: 18px; line-height: 28px; max-width: 46rem; color: color-mix(in srgb, var(--color-text) 84%, transparent); }
.nk-abschnitt { margin: 48px 0 0; }
.nk-abschnitt > h2, .nk-h2 { font-family: var(--font-heading); font-weight: 800; font-size: clamp(22px, 2.4vw, 27px); line-height: 1.2; margin: 0 0 16px; }
.nk h3 { font-family: var(--font-heading); font-weight: 800; font-size: 20px; line-height: 1.25; margin: 0; }
.nk-leise { color: color-mix(in srgb, var(--color-text) 72%, transparent); }
.nk-klein { font-size: 15px; line-height: 23px; }
.nk-betrag { font-family: var(--font-heading); font-weight: 600; white-space: nowrap; }

/* Lage: ein Satz, ob alles in Ordnung ist */
.nk-lage { display: flex; gap: 14px; align-items: flex-start; margin: 26px 0 0; padding: 16px 20px; border-left: 5px solid var(--color-accent); background: color-mix(in srgb, var(--color-accent) 11%, transparent); }
.nk-lage.offen { border-left-color: var(--color-accent-2); background: color-mix(in srgb, var(--color-accent-2) 11%, transparent); }
.nk-lage strong { display: block; font-size: 18.5px; line-height: 26px; }
.nk-lage svg { width: 26px; height: 26px; flex: none; margin-top: 1px; color: var(--color-accent); }
.nk-lage.offen svg { color: var(--color-accent-2); }

/* Hinweise und Warnungen: getoentes Band mit Strich, kein Kasten */
.nk-hinweis, .nk-warnung { margin: 0 0 12px; padding: 11px 15px; border-left: 4px solid var(--color-accent); background: color-mix(in srgb, var(--color-accent) 12%, transparent); font-size: 15.5px; line-height: 24px; }
.nk-warnung { border-left-color: var(--color-accent-2); background: color-mix(in srgb, var(--color-accent-2) 12%, transparent); }

/* Aufgaben */
.nk-aufgaben { list-style: none; margin: 0; padding: 0; counter-reset: auf; }
.nk-aufgaben li { display: grid; grid-template-columns: 30px minmax(0, 1fr) auto; gap: 6px 16px; align-items: center; padding: 15px 0; border-top: 1px solid var(--color-divider); counter-increment: auf; }
.nk-aufgaben li:last-child { border-bottom: 1px solid var(--color-divider); }
.nk-aufgaben li::before { content: counter(auf, decimal-leading-zero); font-size: 15px; font-weight: 700; color: var(--color-accent-2); }
.nk-aufgaben li span { font-size: 17px; line-height: 25px; }

/* Knoepfe */
.nk-knopf { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 0 16px; font: inherit; font-size: 15.5px; font-weight: 700; text-decoration: none; white-space: nowrap; cursor: pointer; border: 2px solid var(--color-text); background: transparent; color: var(--color-text); }
.nk-knopf.voll { border-color: var(--color-accent); background: var(--color-accent); color: var(--nm-auf-akzent); }
.nk-knopf.schaden { border-color: var(--color-accent-2); background: var(--color-accent-2); color: var(--nm-auf-akzent); }
.nk-knopf.leicht { border-width: 1px; border-color: var(--color-divider); font-weight: 600; }
.nk-knopf[disabled] { opacity: .6; cursor: default; }
.nk-knopf.klein { min-height: 38px; padding: 0 12px; font-size: 15px; }
/* Weg ins Kundenportal mitten im Text (customer-konto.js, portalKnopf): ein
   Knopf, weil die Adresse erst beim Klick entsteht, aber aussehen wie ein
   Verweis. Farbe wie a in look.css, damit der Kontrast in beiden Ansichten
   dem der Verweise gleicht. */
.nk-verweisknopf { display: inline; padding: 0; margin: 0; border: 0; background: none; font: inherit; color: var(--color-accent); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; text-align: left; }
.nk-verweisknopf[disabled] { opacity: .65; cursor: default; }
.nk-verweisknopf:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
.nk-leiste-knoepfe { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin: 16px 0 0; }

/* Boote */
.nk-boote { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 21rem), 1fr)); gap: 0 40px; }
.nk-boot { padding: 22px 0 28px; border-top: 3px solid var(--color-text); }
.nk-boot-art { font-size: 14px; letter-spacing: .06em; text-transform: uppercase; font-weight: 600; color: color-mix(in srgb, var(--color-text) 72%, transparent); }
.nk-boot-name { font-family: var(--font-heading); font-stretch: 74%; font-weight: 900; text-transform: uppercase; font-size: clamp(28px, 3vw, 36px); line-height: 1.05; margin: 4px 0 4px; overflow-wrap: normal; }
.nk-schutz { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0 0; }
.nk-schutz span { font-size: 14px; line-height: 22px; padding: 2px 10px; font-weight: 600; background: color-mix(in srgb, var(--color-accent) 13%, transparent); }
.nk-schutz span::before { content: "✓ "; color: var(--color-accent); }
.nk-paare { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 4px 18px; margin: 14px 0 0; font-size: 16px; line-height: 25px; }
.nk-paare dt { color: color-mix(in srgb, var(--color-text) 72%, transparent); }
.nk-paare dd { margin: 0; }
.nk-paare .fehlt { color: var(--color-accent-2); font-weight: 700; }
.nk-aktionen { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 20px 0 0; }
.nk-aktion { display: flex; align-items: center; gap: 10px; min-height: 54px; padding: 8px 14px; text-decoration: none; color: var(--color-text); font: inherit; font-weight: 700; font-size: 15.5px; line-height: 20px; text-align: left; border: 0; cursor: pointer; background: color-mix(in srgb, var(--color-accent) 10%, var(--color-bg)); }
.nk-aktion:hover { background: color-mix(in srgb, var(--color-accent) 20%, var(--color-bg)); }
.nk-aktion svg { width: 22px; height: 22px; flex: none; color: var(--color-accent); }
.nk-aktion.schaden { background: var(--color-accent-2); color: var(--nm-auf-akzent); }
.nk-aktion.schaden svg { color: var(--nm-auf-akzent); }
.nk-mehr { display: inline-block; margin: 14px 0 0; font-size: 15px; }

/* Bootswahl unter "Meine Boote" */
.nk-wahl { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 24px; }
.nk-wahl a { display: inline-flex; align-items: center; min-height: 42px; padding: 0 14px; border: 1px solid var(--color-divider); color: var(--color-text); text-decoration: none; font-size: 15.5px; }
.nk-wahl a[aria-current="true"] { border-color: var(--color-accent); background: color-mix(in srgb, var(--color-accent) 12%, transparent); font-weight: 700; }

/* Listen */
.nk-liste { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--color-divider); }
.nk-liste > li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 18px; align-items: center; padding: 13px 0; border-bottom: 1px solid var(--color-divider); font-size: 16.5px; line-height: 25px; }
.nk-liste small { display: block; font-size: 14.5px; line-height: 22px; color: color-mix(in srgb, var(--color-text) 72%, transparent); }
.nk-liste .rechts { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; justify-content: flex-end; }
.nk-marke { font-size: 13.5px; line-height: 20px; padding: 2px 9px; font-weight: 700; white-space: nowrap; background: color-mix(in srgb, var(--color-accent) 13%, transparent); }
.nk-marke.offen { background: color-mix(in srgb, var(--color-accent-2) 14%, transparent); color: var(--color-accent-2); }
/* Ganze Zeile antippbar statt Knopf "Oeffnen" (Unterlagen, Postfach) */
.nk-liste > li.klick { display: block; padding: 0; }
.nk-liste .nk-klick { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 14px; align-items: center; width: 100%; padding: 13px 0 !important; background: none; border: 0; font: inherit; color: inherit; text-align: left; cursor: pointer; }
.nk-klick:hover > span:first-child { text-decoration: underline; text-underline-offset: 3px; }
.nk-klick:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
.nk-pfeil { color: var(--color-accent); font-weight: 700; font-size: 15px; white-space: nowrap; }
.nk-wichtig > li { font-weight: 700; font-size: 17.5px; }
.nk-wichtig small { font-weight: 400; }
.nk-mehr { margin-top: 10px; }
.nk-mehr summary { cursor: pointer; min-height: 40px; display: flex; align-items: center; font-size: 15px; font-weight: 600; color: color-mix(in srgb, var(--color-text) 78%, transparent); }
.nk-mehr[open] summary { margin-bottom: 4px; }
.nk-mehr summary::-webkit-details-marker { display: none; }
.nk-mehr summary::before { content: "▸"; margin-right: 8px; color: var(--color-accent); }
.nk-mehr[open] summary::before { content: "▾"; }
.nk-liste.klein > li, .nk-liste.klein .nk-klick { font-size: 15px; line-height: 22px; }
.nk-liste.klein .nk-klick, .nk-liste.klein > li:not(.klick) { padding: 9px 0 !important; }

/* Saison-Verweise */
.nk-verweise { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr)); gap: 0 32px; }
.nk-verweise a { display: block; padding: 14px 0; border-top: 1px solid var(--color-divider); color: var(--color-text); text-decoration: none; }
.nk-verweise strong { display: block; font-size: 17px; line-height: 25px; }
.nk-verweise strong::after { content: " →"; color: var(--color-accent); }
.nk-verweise span { font-size: 15px; line-height: 22px; color: color-mix(in srgb, var(--color-text) 72%, transparent); }
.nk-verweise a:hover strong { text-decoration: underline; text-underline-offset: 3px; }

/* Kontakt */
.nk-kontakt { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr)); gap: 0 32px; border-top: 1px solid var(--color-divider); }
.nk-kontakt > div { padding: 18px 0; border-bottom: 1px solid var(--color-divider); }
.nk-kontakt a.gross { display: block; margin: 3px 0; font-family: 'IBM Plex Mono', ui-monospace, monospace; font-size: 21px; line-height: 30px; color: var(--color-text); text-decoration: none; white-space: nowrap; }
.nk-kontakt a.wort { font-family: var(--font-heading); font-weight: 700; }

/* Bootsakte */
.nk-voll { height: 8px; max-width: 28rem; margin: 8px 0 6px; background: var(--color-divider); }
.nk-voll span { display: block; height: 100%; background: var(--color-accent); }
.nk-fotos { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 9.5rem), 1fr)); gap: 10px; margin: 14px 0 0; }
.nk-fotos figure { margin: 0; position: relative; }
.nk-fotos img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; background: var(--color-divider); }
.nk-fotos figcaption { display: flex; justify-content: space-between; gap: 6px; font-size: 13.5px; line-height: 20px; margin-top: 4px; color: color-mix(in srgb, var(--color-text) 72%, transparent); }
.nk-fotos figcaption button { background: none; border: 0; padding: 0; font: inherit; color: inherit; text-decoration: underline; cursor: pointer; }
.nk-foto-neu { display: grid; place-items: center; aspect-ratio: 4 / 3; border: 2px dashed var(--color-divider); color: var(--color-accent); font-weight: 700; font-size: 15px; cursor: pointer; text-align: center; padding: 6px; }
.nk-foto-neu:focus-within { outline: 2px solid var(--color-accent); outline-offset: 2px; }
.nk-foto-neu input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.nk-form { display: grid; gap: 14px; max-width: 44rem; }
.nk-form label { display: block; margin: 0 0 6px; font-size: 15px; font-weight: 600; }
.nk-form input { width: 100%; box-sizing: border-box; min-height: 46px; padding: 0 12px; font: inherit; font-size: 16.5px; color: var(--color-text); background: var(--color-bg); border: 1px solid color-mix(in srgb, var(--color-text) 35%, transparent); }
.nk-form input:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 1px; }
.nk-zeile { display: grid; gap: 10px; align-items: end; }
.nk-zeile.nummer { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto; }
.nk-zeile.eintrag { grid-template-columns: 9.5rem minmax(0, 1fr) 7rem auto; }
.nk-zeile > div, .nk-datei-felder > div { min-width: 0; }
.nk-form input[type="date"] { -webkit-appearance: none; appearance: none; display: block; min-width: 0; max-width: 100%; }
.nk-form input[type="date"]::-webkit-date-and-time-value { text-align: left; }
.nk-weg { width: 44px; height: 46px; border: 1px solid var(--color-divider); background: none; color: inherit; font-size: 20px; cursor: pointer; }
/* Angaben aus Antrag oder Vertrag (10.11.2026): lesbar, aber sichtbar
   gesperrt. Im Nummernraster steht nur das Schloss in der Spalte, in der
   sonst das Entfernen-Kreuz steht; neben der Rumpfnummer auch der Text. */
.nk-form input.nk-fest { background: color-mix(in srgb, var(--color-text) 6%, var(--color-bg)); border-style: dashed; color: color-mix(in srgb, var(--color-text) 80%, transparent); cursor: default; }
.nk-fest-marke { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; color: color-mix(in srgb, var(--color-text) 65%, transparent); white-space: nowrap; }
.nk-fest-marke svg { width: 18px; height: 18px; flex: none; }
.nk-zeile .nk-fest-marke { width: 44px; height: 46px; justify-content: center; }
.nk-zeile .nk-fest-marke span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.nk-fest-reihe { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.nk-fest-reihe input { max-width: 22rem; text-transform: uppercase; }
.nk-fotos figcaption .nk-fest-marke { font-size: 13px; }
@media (max-width: 640px) {
  .nk-fotos figcaption .nk-fest-marke span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}
.nk-fotos figcaption .nk-fest-marke svg { width: 15px; height: 15px; }
.nk-fest-foto .nk-foto-knopf { outline: 1px dashed color-mix(in srgb, var(--color-text) 35%, transparent); outline-offset: 2px; }
.nk-fest-liste { margin: 0 0 12px; }
.nk-fest-liste li { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; }
.nk-fest-liste li .nk-fest-marke { margin-left: auto; }
.nk-fest-hinweis { border-left: 3px solid var(--color-accent); padding: 4px 0 4px 14px; max-width: 46rem; }
.nk-fest-hinweis p { margin: 0 0 8px; }
.nk-plus { justify-self: start; background: none; border: 0; padding: 4px 0; font: inherit; font-size: 15.5px; font-weight: 700; color: var(--color-accent); cursor: pointer; }
.nk-form fieldset { border: 0; margin: 0; padding: 0; display: grid; gap: 10px; }
.nk-form legend { padding: 0; margin: 0 0 4px; font-family: var(--font-heading); font-weight: 800; font-size: 18px; }

/* Nur auf dem Telefon: Leiste unten, Liste "Weitere Bereiche" */
.nk-unten, .nk-nur-handy { display: none; }

@media (max-width: 900px) {
  .nk { grid-template-columns: 1fr; gap: 0; }
  .nk-leiste { display: none; }
  .nk-nur-handy { display: block; }
  /* minmax(0, 1fr) statt 1fr, als Vorsorge: ein 1fr waechst auf die
     kleinste Wortbreite seiner Spalte, die Leiste kann also breiter werden
     als das Fenster. Ein waagerechter Ueberlauf vergroessert den Bezug, an
     dem position: fixed haengt, und dann sitzt die Leiste nicht mehr dort,
     wo sie sitzen soll. Beobachtet am 11.11.2026 bei 320 Punkten Breite in
     der spanischen Fassung: die Kopfleiste (lib/partials/kopf/nav-es.php,
     .esn-rechts mit min-width: min-content) lief 9 Punkte ueber, und die
     Reiterleiste wurde mitgezogen. Mit minmax(0, 1fr) bleibt sie in jedem
     Fall im Fenster, lange Woerter brechen um (zwei Zeilen passen in die
     60px) statt die Spalte zu sprengen. Der Ueberlauf der spanischen
     Kopfleiste selbst ist damit NICHT behoben, er faellt unter
     overflow-x: clip nur nicht auf. */
  .nk-unten { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); position: fixed; left: 0; right: 0; bottom: 0; z-index: 90; max-width: 100%; background: var(--color-bg); border-top: 1px solid var(--color-divider); padding-bottom: env(safe-area-inset-bottom); }
  .nk-unten a { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; min-width: 0; min-height: 60px; padding: 4px 2px; color: color-mix(in srgb, var(--color-text) 72%, transparent); text-decoration: none; font-size: clamp(10.5px, 3.1vw, 12.5px); line-height: 1.15; font-weight: 600; text-align: center; overflow-wrap: anywhere; hyphens: auto; border-top: 3px solid transparent; }
  .nk-unten a[aria-current="page"] { color: var(--color-accent); border-top-color: var(--color-accent); }
  .nk-unten .nk-zahl { position: absolute; top: 5px; left: calc(50% + 5px); margin: 0; min-width: 18px; padding: 0 4px; font-size: 11px; line-height: 17px; }
  body:has(#nm-konto[data-schritt="konto"]) { padding-bottom: 72px; }
  .nk-aufgaben li { grid-template-columns: 26px minmax(0, 1fr); }
  .nk-aufgaben li .nk-knopf { grid-column: 2; justify-self: start; }
  .nk-liste > li { grid-template-columns: 1fr; }
  .nk-liste .rechts { justify-content: flex-start; }
  .nk-zeile.eintrag { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto; }
  .nk-zeile.eintrag > :nth-child(1) { grid-column: 1; grid-row: 2; }
  .nk-zeile.eintrag > :nth-child(2) { grid-column: 1 / -1; grid-row: 1; }
  .nk-zeile.eintrag > :nth-child(3) { grid-column: 2; grid-row: 2; }
  .nk-zeile.eintrag > :nth-child(4) { grid-column: 3; grid-row: 2; }
}
@media (max-width: 340px) {
  .nk-aktionen { grid-template-columns: 1fr; }
}
@media (max-width: 420px) {
  .nk-zeile.nummer { grid-template-columns: minmax(0, 1fr) auto; }
  .nk-zeile.nummer > :nth-child(1) { grid-column: 1 / -1; }
}
.nk-abschnitt, .nk-inhalt { scroll-margin-top: 96px; }

/* Die Seite setzt Links im Text als unterstrichene inline-block und
   Ueberschriften am Telefon auf feste Groessen (look.css, site-nav.php).
   Knoepfe und Bootsnamen hier sind keine Textlinks und keine Fliesstext-
   Ueberschriften. */
.nk :is(.nk-aktion, .nk-knopf, .nk-klick, .nk-nav a, .nk-unten a, .nk-verweise a, .nk-wahl a, .nk-kontakt a.gross) { text-decoration: none !important; }
.nk .nk-boot-name { font-size: clamp(28px, 3vw, 36px) !important; line-height: 1.05 !important; }
.nk .nk-lage strong { font-size: 18.5px !important; }

/* Telefon: Sprachblase und Chat ueber die Leiste unten heben. */
@media (max-width: 900px) {
  body:has(#nm-konto[data-schritt="konto"]) #nm-sprachblase { bottom: 84px !important; }
  body:has(#nm-konto[data-schritt="konto"]) .nmc-knopf { bottom: 142px !important; }
  body:has(#nm-konto[data-schritt="konto"]) .nmc { bottom: 84px !important; }
}

/* Bordakte mit Dateien (06.11.2026 abends) */
.nk-teil { margin: 30px 0 0; padding: 22px 0 0; border-top: 1px solid var(--color-divider); }
.nk-teil > h3 { margin: 0 0 6px; }
.nk-datei-knopf { position: relative; }
.nk-datei-knopf input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.nk-datei-knopf:focus-within { outline: 2px solid var(--color-accent); outline-offset: 2px; }
.nk-dateien { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--color-divider); }
.nk-datei { display: grid; grid-template-columns: 76px minmax(0, 1fr); gap: 10px 16px; align-items: start; padding: 14px 0; border-bottom: 1px solid var(--color-divider); }
/* Seit dem 10.11.2026 ein Knopf statt eines Verweises: die Ablage am Vertrag
   gibt keine dauerhafte Adresse heraus, die Datei wird beim Klick geholt.
   Deshalb die Formular-Vorgaben des Browsers zuruecknehmen. */
.nk-datei-bild, .nk-foto-knopf { border: 0; padding: 0; margin: 0; font: inherit; background: none; cursor: pointer; }
.nk-datei-bild[disabled], .nk-foto-knopf[disabled] { cursor: default; opacity: .6; }
.nk-foto-knopf { display: block; width: 100%; }
.nk-foto-knopf img { display: block; width: 100%; height: 100%; object-fit: cover; }
.nk-datei-bild { display: grid; place-items: center; width: 76px; height: 76px; background: color-mix(in srgb, var(--color-accent) 10%, var(--color-bg)); color: var(--color-accent); font-weight: 800; text-decoration: none !important; overflow: hidden; }
.nk-datei-bild img { width: 100%; height: 100%; object-fit: cover; }
.nk-datei-felder { display: grid; grid-template-columns: minmax(0, 1fr) 10rem; gap: 10px; max-width: none; }
.nk-datei-felder.mit-betrag { grid-template-columns: minmax(0, 1fr) 10rem 8rem; }
.nk-datei-knoepfe { grid-column: 2; display: flex; flex-wrap: wrap; gap: 8px; }
.nk-fotos figure a, .nk-fotos figure .nk-foto-knopf { display: block; text-decoration: none !important; }
/* Ohne Vorschaubild (PDF, oder der Server rechnet noch) braucht die Kachel
   eine Hoehe, sonst faellt sie auf null zusammen. */
.nk-fotos .nk-foto-knopf:not(:has(img)) { display: grid; place-items: center; aspect-ratio: 4 / 3; background: var(--color-divider); }
@media (max-width: 640px) {
  .nk-datei { grid-template-columns: 60px minmax(0, 1fr); }
  .nk-datei-bild { width: 60px; height: 60px; }
  .nk-datei-felder, .nk-datei-felder.mit-betrag { grid-template-columns: 1fr 1fr; }
  .nk-datei-felder > :first-child { grid-column: 1 / -1; }
  .nk-datei-knoepfe { grid-column: 1 / -1; }
}

/* Gemeinschaft (06.11.2026) */
.nk-gm-wahl { display: flex; flex-wrap: wrap; gap: 8px; margin: 22px 0 0; }
.nk-gm-wahl .nk-knopf[aria-pressed="true"] { border-color: var(--color-accent); background: color-mix(in srgb, var(--color-accent) 12%, transparent); }
.nk-gm-anfrage { margin: 10px 0 0; }
.nk-gm-details summary { cursor: pointer; font-weight: 700; color: var(--color-accent); min-height: 40px; display: flex; align-items: center; }
.nk-gm-details .nk-form { margin-top: 10px; max-width: 34rem; }
.nk-gm-ich { display: flex; flex-wrap: wrap; gap: 14px 28px; align-items: flex-end; margin: 18px 0 0; padding: 16px 18px; background: color-mix(in srgb, var(--color-accent) 8%, var(--color-bg)); }
.nk-gm-ich > div:first-child { flex: 1 1 18rem; }
.nk-gm-ich-form { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-end; max-width: none; }
.nk-gm-spalten { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: 0 44px; }
.nk-gm-termin { display: grid; grid-template-columns: 62px minmax(0, 1fr); gap: 4px 16px; padding: 15px 0; border-top: 1px solid var(--color-divider); }
.nk-gm-tag { background: var(--color-accent); color: var(--nm-auf-akzent); text-align: center; padding: 6px 0; line-height: 1.1; align-self: start; }
.nk-gm-tag b { display: block; font-family: 'IBM Plex Mono', ui-monospace, monospace; font-size: 22px; font-weight: 500; }
.nk-gm-tag span { font-size: 12.5px; text-transform: uppercase; letter-spacing: .06em; }
.nk-gm-titel { display: block; font-family: var(--font-heading); font-weight: 800; font-size: 17.5px; line-height: 1.3; color: var(--color-text); text-decoration: none !important; }
a.nk-gm-titel:hover { color: var(--color-accent); }
.nk-gm-quelle { display: block; font-size: 12.5px; letter-spacing: .06em; text-transform: uppercase; font-weight: 700; color: var(--color-accent-2); margin-bottom: 3px; }
.nk-gm-eintrag { display: block; padding: 14px 0; border-top: 1px solid var(--color-divider); color: var(--color-text); text-decoration: none !important; }
.nk-gm-eintrag strong { display: block; font-size: 16.5px; line-height: 24px; }
.nk-gm-eintrag:hover strong { color: var(--color-accent); }
.nk-gm-frage { padding: 14px 0; border-top: 1px solid var(--color-divider); }
.nk-gm-frage p { margin: 6px 0 4px; font-size: 16px; line-height: 25px; }
.nk-gm-umfrage { padding: 16px 18px; border-left: 5px solid var(--color-accent-2); background: color-mix(in srgb, var(--color-accent-2) 10%, transparent); display: grid; gap: 8px; }
.nk-gm-umfrage strong { font-size: 17.5px; margin-bottom: 4px; }
.nk-gm-umfrage .nk-knopf { justify-content: flex-start; white-space: normal; text-align: left; }
.nk-gm-ergebnis .nk-voll span { background: var(--color-accent-2); }
.nk-gm-welt { width: 100%; height: auto; background: color-mix(in srgb, var(--color-accent) 8%, var(--color-bg)); }
.nk-gm-welt line { stroke: var(--color-divider); stroke-width: .6; }
.nk-gm-welt circle { fill: var(--color-accent-2); }
.nk-gm-vorschlag { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.nk-gm-vorschlag > :first-child, .nk-gm-vorschlag > :nth-child(4), .nk-gm-vorschlag > :last-child { grid-column: 1 / -1; }
.nk-gm-regel { margin-top: 30px; padding-top: 14px; border-top: 1px solid var(--color-divider); }
@media (max-width: 900px) { .nk-gm-spalten { grid-template-columns: 1fr; } }

.nk-gm-antworten { margin: 10px 0 0 14px; padding-left: 12px; border-left: 3px solid var(--color-divider); display: grid; gap: 6px; }
.nk-gm-antwort p { margin: 0; font-size: 15.5px; line-height: 24px; }
.nk-gm-melden { background: none; border: 0; padding: 0; font: inherit; color: inherit; text-decoration: underline; cursor: pointer; }

/* Meine Boote in vier Teilen (07.11.2026): Reiterzeile unter dem Bootskopf,
   darunter ein Satz, wofuer der offene Teil da ist. */
.nk-wahl.nk-teile { gap: 0; margin: 30px 0 0; border-bottom: 1px solid var(--color-divider); flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
.nk-wahl.nk-teile::-webkit-scrollbar { display: none; }
.nk-wahl.nk-teile a { border: 0; border-bottom: 3px solid transparent; margin-bottom: -1px; padding: 0 16px; min-height: 48px; white-space: nowrap; font-weight: 600; background: none; }
.nk-wahl.nk-teile a[aria-current="true"] { border-bottom-color: var(--color-accent); background: none; font-weight: 800; }
.nk-teil-hilfe { margin: 14px 0 0; font-size: 15.5px; line-height: 24px; max-width: 46rem; }

/* Aenderung melden: Grund als Auswahlzeilen */
.nk-form label.nk-wahlfeld { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 14px; margin: 0; align-items: start; padding: 12px 0; border-bottom: 1px solid var(--color-divider); cursor: pointer; font-weight: 400 !important; }
.nk-wahlfeld input { width: 20px !important; min-height: 20px !important; height: 20px; margin: 2px 0 0; accent-color: var(--color-accent); }
.nk-wahlfeld small { display: block; margin-top: 2px; font-size: 14.5px; line-height: 22px; color: color-mix(in srgb, var(--color-text) 72%, transparent); }
.nk-feldtitel { margin: 0 0 6px; font-size: 15px; font-weight: 600; }
.nk-form textarea { display: block; resize: vertical; }
@media (max-width: 640px) {
  .nk-wahl.nk-teile { display: grid; grid-template-columns: 1fr 1fr; overflow: visible; border-bottom: 0; }
  .nk-wahl.nk-teile a { justify-content: center; border-bottom: 1px solid var(--color-divider); margin: 0; padding: 0 8px; white-space: normal; text-align: center; }
  .nk-wahl.nk-teile a[aria-current="true"] { border-bottom: 3px solid var(--color-accent); }
}

/* Spitznamen in der Gemeinschaft: antippbar fuer die Kontaktanfrage */
.nk-gm-person { background: none; border: 0; padding: 0; font: inherit; color: var(--color-accent); text-decoration: underline; text-underline-offset: 2px; cursor: pointer; }
.nk-gm-person:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }

/* Hilfe & Kontakt: erste Schritte und haeufige Fragen */
.nk-schritte { margin: 0; padding-left: 1.4em; display: grid; gap: 8px; max-width: 46rem; font-size: 16px; line-height: 25px; }
.nk-faq { border-bottom: 1px solid var(--color-divider); padding: 12px 0; max-width: 46rem; }
.nk-faq:first-child { border-top: 1px solid var(--color-divider); }
.nk-faq summary { cursor: pointer; font-weight: 600; }
.nk-faq p { margin: 8px 0 0; font-size: 15.5px; line-height: 24px; }

/* Mein NAMMERT auf den Startbildschirm (07.11.2026, startbild() in customer-konto.js):
   eine Zeile am Telefon, kein eigener Abschnitt. */
.nk-startbild { position: relative; margin: 26px 0 0; padding: 14px 44px 14px 18px; border-left: 5px solid var(--color-accent); background: color-mix(in srgb, var(--color-accent) 11%, transparent); font-size: 16px; line-height: 25px; }
.nk-startbild-zeile { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; }
.nk-startbild-zeile strong { flex-basis: 100%; }
.nk-startbild-zeile [hidden] { display: none; }
.nk-startbild svg { width: 20px; height: 20px; vertical-align: -4px; color: var(--color-accent); }
.nk-startbild-aus { position: absolute; top: 6px; right: 6px; width: 36px; height: 36px; border: 0; background: transparent; color: inherit; font-size: 24px; line-height: 1; cursor: pointer; }
.nk-startbild-fertig { display: none; }
.nk-startbild[data-fertig] .nk-startbild-fertig { display: block; }
.nk-startbild[data-fertig] .nk-startbild-zeile { display: none; }

/* Benachrichtigungen der Gemeinschaft (07.11.2026): Schalter untereinander. */
#nk-gm-post .nk-wahlfeld { display: flex; gap: 12px; align-items: center; padding: 8px 0; cursor: pointer; }
#nk-gm-post .nk-wahlfeld input { width: 20px; height: 20px; flex: none; margin: 0; accent-color: var(--color-accent); }
#nk-gm-post .nk-wahlfeld strong { font-weight: 600; }
.nk-gm-neu > li { grid-template-columns: minmax(0, 1fr) auto; }

/* Profilkopf der Uebersicht (07.11.2026, profilKopf() in customer-konto.js). */
.nk-profil-bild { position: relative; margin: 0 0 22px; aspect-ratio: 16 / 6; overflow: hidden; background: color-mix(in srgb, var(--color-accent) 11%, transparent); }
.nk-profil-bild img { display: block; width: 100%; height: 100%; object-fit: cover; }
.nk-profil-bild figcaption { position: absolute; left: 0; right: 0; bottom: 0; display: flex; justify-content: space-between; align-items: end; gap: 12px; padding: 40px 18px 12px; background: linear-gradient(transparent, rgba(6, 20, 31, .78)); color: #fff; }
.nk-profil-bild figcaption strong { font-family: var(--font-heading); font-size: clamp(20px, 2.6vw, 28px); line-height: 1.15; }
.nk-profil-bild figcaption a { color: #fff; white-space: nowrap; }
.nk-profil-bild.leer { display: flex; flex-direction: column; justify-content: center; align-items: flex-start; gap: 12px; padding: 18px 22px; aspect-ratio: auto; min-height: 140px; border-left: 5px solid var(--color-accent); font-size: 16px; line-height: 25px; }
.nk-profil-zahlen { display: flex; flex-wrap: wrap; gap: 10px 36px; margin: 18px 0 0; }
.nk-profil-zahlen div { display: flex; align-items: baseline; gap: 8px; }
.nk-profil-zahlen strong { font-family: var(--font-heading); font-size: 28px; line-height: 1; }
.nk-profil-zahlen span { font-size: 15.5px; color: color-mix(in srgb, var(--color-text) 72%, transparent); }
@media (max-width: 640px) { .nk-profil-bild { aspect-ratio: 16 / 9; } }

/* Eckdaten des Boots (07.11.2026): Bordakte und Profilkopf. */
.nk-eckdaten { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 640px) { .nk-eckdaten { grid-template-columns: 1fr; } }
.nk-profil-boot { margin: 14px 0 0; max-width: 61ch; font-size: 16px; line-height: 25px; color: color-mix(in srgb, var(--color-text) 84%, transparent); }
.nk-profil-boot q { display: block; margin-top: 4px; font-style: italic; }

/* Maklervollmacht fehlt (07.11.2026): Hinweis ueber die ganze Seite. */
.nk-vollmacht { position: fixed; inset: 0; z-index: 1000; display: flex; align-items: center; justify-content: center; padding: 16px; background: rgba(6, 20, 31, .82); }
.nk-vollmacht-kasten { width: 100%; max-width: 34rem; max-height: calc(100vh - 32px); overflow: auto; padding: 28px 26px; background: var(--color-bg, #fff); color: var(--color-text); border-top: 5px solid var(--color-accent); }
.nk-vollmacht-kasten h2 { margin: 0 0 12px; font-family: var(--font-heading); font-weight: 800; font-size: clamp(22px, 3vw, 28px); line-height: 1.2; }
.nk-vollmacht-kasten p { margin: 0 0 22px; font-size: 16.5px; line-height: 26px; }
.nk-vollmacht-knoepfe { display: flex; flex-wrap: wrap; gap: 10px; }

/* Unterlagen zum Vertrag (Client 1.9.0): Vorschaubilder hoechstens 100 px */
.nk-ud-fotos { display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0 0; }
.nk-ud-foto { width: 100px; height: 100px; padding: 0; border: 1px solid var(--color-divider); background: var(--color-divider); cursor: pointer; display: flex; align-items: center; justify-content: center; overflow: hidden; font: inherit; font-size: 13px; }
.nk-ud-foto img { display: block; max-width: 100%; max-height: 100%; object-fit: contain; }
.nk-ud-foto:disabled { opacity: .6; cursor: progress; }

/* Mobil aufgeraeumt (10.11.2026, Norman: "viel zu viel Text, man sieht da
   gar nicht durch"). Aufgaben als antippbare Zeilen mit Symbol, vier
   Kacheln fuer die haeufigsten Wege, Kontakt als drei Kacheln, Saison und
   spaete Termine eingeklappt. Ecken eckig, Kreise nur als echte Kreise. */
.nk-zutun h2 { display: flex; align-items: center; gap: 10px; }
.nk-zutun h2 .nk-zahl { margin: 0; font-size: 14px; line-height: 24px; min-width: 26px; }
.nk-aufgaben-neu { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.nk-auf { display: grid; grid-template-columns: 44px minmax(0, 1fr) 20px; gap: 14px; align-items: center; min-height: 64px; padding: 10px 14px; text-decoration: none !important; color: var(--color-text); background: color-mix(in srgb, var(--color-accent) 9%, var(--color-bg)); border-left: 4px solid var(--color-accent); }
.nk-auf.warn { border-left-color: var(--color-accent-2); background: color-mix(in srgb, var(--color-accent-2) 9%, var(--color-bg)); }
.nk-auf:hover { background: color-mix(in srgb, var(--color-accent) 16%, var(--color-bg)); }
.nk-auf-bild { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--color-accent); color: var(--nm-auf-akzent); }
.nk-auf.warn .nk-auf-bild { background: var(--color-accent-2); }
.nk-auf-bild svg { width: 22px; height: 22px; }
.nk-auf-text strong { display: block; font-size: 17px; line-height: 23px; }
.nk-auf-text small { display: block; margin-top: 2px; font-size: 14px; line-height: 20px; color: color-mix(in srgb, var(--color-text) 72%, transparent); }
.nk-auf-pfeil svg { width: 20px; height: 20px; color: var(--color-accent); }
.nk-auf:focus-visible, .nk-kachel:focus-visible, .nk-kk:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }

.nk-kacheln { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin: 32px 0 0; }
.nk-kachel { position: relative; display: flex; flex-direction: column; align-items: flex-start; justify-content: space-between; gap: 14px; min-height: 104px; padding: 14px; font: inherit; font-size: 16px; line-height: 21px; font-weight: 700; text-align: left; text-decoration: none !important; color: var(--color-text); border: 0; cursor: pointer; background: color-mix(in srgb, var(--color-accent) 10%, var(--color-bg)); }
.nk-kachel:hover { background: color-mix(in srgb, var(--color-accent) 18%, var(--color-bg)); }
.nk-kachel svg { width: 28px; height: 28px; color: var(--color-accent); }
.nk-kachel.schaden { background: var(--color-accent-2); color: var(--nm-auf-akzent); }
.nk-kachel.schaden svg { color: var(--nm-auf-akzent); }
.nk-kachel .nk-zahl { position: absolute; top: 12px; right: 12px; margin: 0; }
.nk-kachel[disabled] { opacity: .65; cursor: default; }

.nk-kontakt-kacheln { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.nk-kk { display: grid; grid-template-columns: 26px minmax(0, 1fr); gap: 2px 12px; align-items: center; padding: 14px; text-decoration: none !important; color: var(--color-text); background: color-mix(in srgb, var(--color-accent) 10%, var(--color-bg)); }
.nk-kk svg { grid-row: span 2; width: 24px; height: 24px; color: var(--color-accent); }
.nk-kk.schaden svg { color: var(--color-accent-2); }
.nk-kk strong { font-size: 15.5px; line-height: 21px; }
.nk-kk span { font-family: 'IBM Plex Mono', ui-monospace, monospace; font-size: 15px; line-height: 21px; color: color-mix(in srgb, var(--color-text) 80%, transparent); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nk-kk:last-child span { font-family: inherit; white-space: normal; }

.nk-klapp { border-top: 1px solid var(--color-divider); border-bottom: 1px solid var(--color-divider); }
.nk-klapp > summary { display: flex; align-items: center; gap: 10px; min-height: 56px; cursor: pointer; list-style: none; font-family: var(--font-heading); font-weight: 800; font-size: clamp(19px, 2.2vw, 23px); }
.nk-klapp > summary::-webkit-details-marker { display: none; }
.nk-klapp > summary::after { content: "+"; margin-left: auto; font-size: 26px; font-weight: 400; color: var(--color-accent); }
.nk-klapp[open] > summary::after { content: "–"; }
.nk-klapp[open] > summary { margin-bottom: 4px; }
.nk-klapp-innen { margin: 0; border-bottom: 0; }
.nk-klapp-innen > summary { font-family: inherit; font-size: 16px; font-weight: 700; color: var(--color-accent); }

.nk-akte-stand { display: flex; align-items: center; gap: 10px; }
.nk-akte-stand .nk-voll { flex: 1 1 auto; max-width: 9rem; margin: 0; }
.nk-akte-stand.fehlt .nk-voll span { background: var(--color-accent-2); }

/* Angemeldet: Kopfbild der Anmeldung aus. */
body:has(#nm-konto[data-schritt="konto"]) .nm-header-image { display: none; }

@media (max-width: 900px) {
  .nk-kacheln { grid-template-columns: 1fr 1fr; margin-top: 24px; }
  .nk-kachel { min-height: 92px; }
  .nk-kontakt-kacheln { grid-template-columns: 1fr; }
  .nk-abschnitt { margin-top: 36px; }
  /* Angemeldet ist die Seite eine App: vom grossen Website-Fuss bleibt am
     Telefon nur die Zeile Rechtliches (Impressum, Datenschutz, KI-Zeichen). */
  body:has(#nm-konto[data-schritt="konto"]) .nm-fuss > :not(.fo-recht) { display: none !important; }
  body:has(#nm-konto[data-schritt="konto"]) .nm-fuss .fo-recht { padding-top: 18px !important; }
}

/* Abmelden-Ansicht: drei Schritte statt eines Absatzes. */
.nm-anm-schritte { list-style: none; margin: 26px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; counter-reset: anm; max-width: 46rem; }
.nm-anm-schritte li { counter-increment: anm; display: grid; grid-template-columns: 36px minmax(0, 1fr); gap: 12px; align-items: center; padding: 12px 14px; font-size: 15.5px; line-height: 21px; font-weight: 600; background: color-mix(in srgb, var(--color-accent) 10%, var(--color-bg)); }
.nm-anm-schritte li::before { content: counter(anm); display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: var(--color-accent); color: var(--nm-auf-akzent); font-weight: 800; }
.nm-anm-unten { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 40px 0 0; max-width: 46rem; }
.nm-anm-unten a { display: grid; grid-template-columns: 26px minmax(0, 1fr); gap: 2px 12px; align-items: center; padding: 14px; color: var(--color-text); text-decoration: none !important; background: color-mix(in srgb, var(--color-accent) 10%, var(--color-bg)); }
.nm-anm-unten a.schaden { background: var(--color-accent-2); color: var(--nm-auf-akzent); }
.nm-anm-unten i { grid-row: span 2; font-size: 24px; }
.nm-anm-unten strong { font-size: 16px; line-height: 21px; }
.nm-anm-unten span { font-size: 14px; line-height: 20px; opacity: .85; }
@media (max-width: 640px) {
  .nm-anm-schritte { grid-template-columns: 1fr; }
  .nm-anm-unten { grid-template-columns: 1fr; }
}
.nk .nk-kk strong { color: var(--color-text); }

/* Wert und Versicherungssumme (10.11.2026): auch am Telefon Bezeichnung
   links, Betrag rechts in einer Zeile; Gesamtsumme mit Strich darueber. */
.nk-liste.nk-summen > li { grid-template-columns: minmax(0, 1fr) auto !important; }
.nk-liste.nk-summen .nk-betrag { text-align: right; }
.nk-liste.nk-summen > li.nk-gesamt { border-top: 2px solid var(--color-text); }
.nk-liste.nk-summen .nk-pauschal { grid-column: 1 / -1; margin-top: -2px; }
.nk-liste.nk-summen .nk-betrag { white-space: nowrap; }