/* ============================================================================
   Ringmeldung - Erscheinungsbild seit dem 30.10.2026 (Phase 2 der Überarbeitung).

   Ersetzt Style.css und Mobile.css. Wiedererkennung bleibt: der blaue Schriftzug, die
   durchgehende blaue Menüleiste, die blau betitelten Abschnitte. Neu: Karten statt harter
   Balken, größere Schrift, Felder mit Luft, klare Knöpfe; das Handy-Layout über
   Medienabfragen statt über eine zweite Kopie von Kopf und Menü in der MasterPage.
   Am Rechner kompakt (30.10.2026, Augustin: mehr Inhalt auf den Bildschirm); auf dem
   Handy bleiben Felder und Knöpfe fingergerecht, mindestens 40 px.

   Die Menüleiste ist dunkler als früher (#04a3ed): Weiß darauf erreichte nur etwa 2,6:1.
   Schrift: Open Sans wurde nie geladen (gezeigt wurde die Systemschrift) - sie steht
   weiter vorn in der Liste, falls sie installiert ist; Google Fonts bindet die Seite
   bewusst nicht ein.
   ============================================================================ */

:root {
    --rm-blau: #287da8;
    --rm-blau-dunkel: #1d5f82;
    --rm-leiste: #0d76b3;
    /* Ein Blau für alles Klickbare: Knöpfe wie Menüleiste und Dialogkopf (30.10.2026). Der
       Schriftzug bleibt --rm-blau, wegen der Wiedererkennung. */
    --rm-knopf: #0d76b3;
    --rm-knopf-dunkel: #0a5f91;
    --rm-leiste-hell: rgba(255, 255, 255, 0.14);
    --rm-tint: #e7f2f9;
    --rm-grund: #f4f7fa;
    --rm-rand: #dbe4ea;
    --rm-feldrand: #c3d0d9;
    --rm-text: #1f2a33;
    --rm-text2: #3d4b55;
    --rm-leise: #5b6b77;
    --rm-pflicht: #b4441c;
    --rm-radius: 10px;
    --rm-breite: 1280px;
}

/* ---------------------------------------------------------------- Grundlagen */

html { -webkit-text-size-adjust: 100%; }

body {
    margin: 0;
    padding: 0;
    background: var(--rm-grund);
    color: var(--rm-text);
    font-family: 'Open Sans', 'Segoe UI', system-ui, -apple-system, Roboto, Arial, sans-serif;
    font-size: 14px;
    line-height: 1.45;
    text-align: left;
}

a { color: var(--rm-blau-dunkel); }
a:hover { color: #134a66; }

h1, h2, h3 { color: var(--rm-text); line-height: 1.3; }
h1 { font-size: 22px; font-weight: 700; margin: 0 0 10px; }
h2 { font-size: 18px; font-weight: 600; margin: 12px 0 6px; }
h3 { font-size: 15px; font-weight: 600; margin: 10px 0 4px; }

input, select, textarea { box-sizing: border-box; }

/* -------------------------------------------------------------------- Kopf */

.rm-kopf { background: #ffffff; border-bottom: 1px solid var(--rm-rand); }

.rm-kopf-innen {
    box-sizing: border-box;
    max-width: var(--rm-breite);
    margin: 0 auto;
    padding: 8px 24px;
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: space-between;
    gap: 8px 24px;
}

/* Anmeldung und Sprache rechts oben in der Zeile des Schriftzugs (30.10.2026) - der
   Untertitel bricht dafür um; erst auf dem Handy rutschen sie in eine eigene Zeile. */
.rm-marke { display: flex; align-items: center; gap: 12px; text-decoration: none; min-width: 0; flex: 1 1 auto; }
.rm-marke img { flex: 0 0 auto; width: auto; height: 44px; }
.rm-marke-text { display: flex; flex-direction: column; min-width: 0; }
.rm-titel { font-size: 20px; font-weight: 600; letter-spacing: 0.05em; color: var(--rm-blau); line-height: 1.2; }
.rm-untertitel { font-size: 12px; color: var(--rm-leise); line-height: 1.35; }

.rm-konto { display: flex; flex-wrap: nowrap; align-items: center; gap: 6px 12px; font-size: 13px; flex: 0 0 auto; white-space: nowrap; }
.rm-benutzer { color: var(--rm-text2); }

/* Ohne Anmeldung: Registrieren und Anmelden als Knöpfe. Angemeldet: der Name als Menü
   (details/summary, schließt per Skript in der MasterPage bei Klick daneben). */
.rm-konto-knoepfe { display: flex; gap: 6px; }
.rm-benutzermenue-rahmen { position: relative; }
.rm-benutzermenue summary {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 32px;
    padding: 0 10px;
    border: 1px solid var(--rm-rand);
    border-radius: 6px;
    background: #ffffff;
    font-weight: 600;
    cursor: pointer;
    list-style: none;
}
.rm-benutzermenue summary::-webkit-details-marker { display: none; }
.rm-benutzermenue summary::after {
    content: "";
    width: 6px;
    height: 6px;
    border-right: 2px solid var(--rm-blau-dunkel);
    border-bottom: 2px solid var(--rm-blau-dunkel);
    transform: rotate(45deg) translate(-2px, -2px);
}
.rm-benutzermenue[open] summary { border-color: var(--rm-blau); background: var(--rm-tint); }
.rm-benutzermenue summary:focus-visible { outline: 2px solid var(--rm-blau); outline-offset: 1px; }
.rm-benutzermenue-liste {
    position: absolute;
    right: 0;
    top: calc(100% + 4px);
    z-index: 1100;
    min-width: 200px;
    display: flex;
    flex-direction: column;
    padding: 4px 0;
    background: #ffffff;
    border: 1px solid var(--rm-rand);
    border-radius: 8px;
    box-shadow: 0 8px 24px rgba(20, 40, 60, 0.16);
}
.rm-konto .rm-benutzermenue-liste a { padding: 7px 14px; color: var(--rm-text); text-decoration: none; font-weight: 600; }
.rm-konto .rm-benutzermenue-liste a:hover { background: var(--rm-tint); color: var(--rm-blau-dunkel); }
.rm-konto a { font-weight: 600; }

a.rm-knopf-rand, .rm-konto a.rm-knopf-rand {
    display: inline-flex;
    align-items: center;
    min-height: 32px;
    padding: 0 12px;
    border: 1px solid var(--rm-knopf);
    border-radius: 6px;
    color: #ffffff;
    text-decoration: none;
    font-weight: 600;
    background: var(--rm-knopf);
}
a.rm-knopf-rand:hover, .rm-konto a.rm-knopf-rand:hover { background: var(--rm-knopf-dunkel); color: #ffffff; }

/* Sprachwahl als Klappliste (30.10.2026, vorher Knopfgruppe DE/EN/FR/ES): wie das Benutzermenü;
   im Kopf Kürzel und Name der aktiven Sprache, in der Liste jede Sprache in ihr selbst. */
.rm-sprachwahl-rahmen { position: relative; }
.rm-sprachwahl summary {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 32px;
    padding: 0 10px;
    border: 1px solid var(--rm-rand);
    border-radius: 6px;
    background: #ffffff;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    list-style: none;
}
.rm-sprachwahl summary::-webkit-details-marker { display: none; }
.rm-sprachwahl summary::after {
    content: "";
    width: 6px;
    height: 6px;
    border-right: 2px solid var(--rm-blau-dunkel);
    border-bottom: 2px solid var(--rm-blau-dunkel);
    transform: rotate(45deg) translate(-2px, -2px);
}
.rm-sprachwahl[open] summary { border-color: var(--rm-blau); background: var(--rm-tint); }
.rm-sprachwahl summary:focus-visible { outline: 2px solid var(--rm-blau); outline-offset: 1px; }
.rm-sprachwahl-code { display: inline-block; min-width: 22px; color: var(--rm-blau-dunkel); font-weight: 700; font-size: 12px; letter-spacing: 0.03em; }
.rm-sprachwahl-liste {
    position: absolute;
    right: 0;
    top: calc(100% + 4px);
    z-index: 1100;
    min-width: 170px;
    display: flex;
    flex-direction: column;
    padding: 4px 0;
    background: #ffffff;
    border: 1px solid var(--rm-rand);
    border-radius: 8px;
    box-shadow: 0 8px 24px rgba(20, 40, 60, 0.16);
}
.rm-konto .rm-sprachwahl-liste a { display: flex; align-items: center; gap: 8px; padding: 7px 14px; color: var(--rm-text); text-decoration: none; font-weight: 600; }
.rm-konto .rm-sprachwahl-liste a:hover { background: var(--rm-tint); color: var(--rm-blau-dunkel); }
.rm-konto .rm-sprachwahl-liste a.aktiv { background: var(--rm-tint); color: var(--rm-blau-dunkel); }

/* ------------------------------------------------------------- Menüleiste */

.rm-leiste { background: var(--rm-leiste); }

.rm-leiste-innen {
    box-sizing: border-box;
    max-width: var(--rm-breite);
    margin: 0 auto;
    padding: 0 24px;
    display: flex;
    align-items: center;
    min-height: 0;
}

.rm-menu-knopf { display: none; }

/* asp:Menu (RenderingMode List): div.menu > ul > li > a. Das Menü-Skript setzt float
   und position inline - deshalb hier mit !important. */
.rm-leiste div.menu { width: 100%; }
.rm-leiste div.menu ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 2px; }
.rm-leiste div.menu ul li { float: none !important; position: static !important; }
.rm-leiste div.menu ul li a,
.rm-leiste div.menu ul li a:visited {
    display: block;
    padding: 9px 12px 7px;
    color: #ffffff;
    text-decoration: none;
    white-space: nowrap;
    font-size: 15px;
    border-bottom: 3px solid transparent;
}
.rm-leiste div.menu ul li a:hover { background: var(--rm-leiste-hell); }
.rm-leiste div.menu ul li a.selected { border-bottom-color: #ffffff; font-weight: 600; }

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

.contentheadline, .content {
    max-width: var(--rm-breite);
    margin: 0 auto;
    padding: 0 24px;
    box-sizing: border-box;
}
.contentheadline { padding-top: 14px; }
.rm-seitentitel { font-size: 18px; font-weight: 700; margin: 0 0 10px; color: var(--rm-text); }
.rm-seitentitel:empty { display: none; }
.content { padding-bottom: 28px; }

/* Klappbereiche (rm:Klappbereich) - als Karten. klappbereich.js setzt aria-expanded. */
.cpHeader {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    min-height: 0;
    height: auto;
    padding: 7px 14px;
    background: var(--rm-tint);
    color: var(--rm-blau-dunkel);
    border: 1px solid var(--rm-rand);
    border-bottom: 0;
    border-radius: var(--rm-radius) var(--rm-radius) 0 0;
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
}
.cpHeader[data-klapp-inhalt]::after {
    content: "";
    flex: 0 0 auto;
    width: 8px;
    height: 8px;
    border-right: 2px solid var(--rm-blau-dunkel);
    border-bottom: 2px solid var(--rm-blau-dunkel);
    transform: rotate(45deg) translate(-2px, -2px);
    transition: transform 0.15s;
}
.cpHeader[aria-expanded="false"] { border-bottom: 1px solid var(--rm-rand); border-radius: var(--rm-radius); }
.cpHeader[aria-expanded="false"]::after { transform: rotate(-45deg); }
.cpHeader:focus-visible { outline: 3px solid var(--rm-blau); outline-offset: 2px; }

.cpBody {
    background: #ffffff;
    border: 1px solid var(--rm-rand);
    border-top: 0;
    border-radius: 0 0 var(--rm-radius) var(--rm-radius);
    padding: 8px 12px;
    overflow-x: auto;
}
.cpSpace { height: 10px; }

/* Kopf mit Zusatzangabe und Knöpfen (Meldungsliste "Daten suchen", 30.10.2026 wie die Cloud):
   Anzahl und Filterstand klein hinter dem Titel, Knöpfe rechts vor dem Pfeil. */
.cpHeader.rm-kopf-mit-knoepfen { justify-content: flex-start; }
.cpHeader .rm-kopf-info { font-size: 12px; font-weight: 400; color: var(--rm-leise); }
.cpHeader .rm-kopf-info b { font-weight: 600; color: var(--rm-blau-dunkel); }
.cpHeader .rm-kopf-knoepfe { margin-left: auto; display: inline-flex; align-items: center; gap: 2px; }
.cpHeader .rm-kopf-knoepfe .rm-symbol-knopf { width: 26px; height: 26px; }
/* Sortierung im Kopf (List_Data): Beschriftung klein, Auswahl so breit wie ihr Inhalt. */
.cpHeader .rm-kopf-sortierung { gap: 8px; font-size: 13px; font-weight: 600; }
.cpHeader .rm-kopf-sortierung select { width: auto; min-height: 28px; padding-top: 2px; padding-bottom: 2px; font-weight: 400; background-color: #ffffff; }
.cpHeader.rm-kopf-mit-knoepfen[data-klapp-inhalt]::after { margin-left: 6px; }

/* Ausgeliefert, aber ausgeblendet (30.10.2026) - Bereiche, die das Formular im Browser
   umschaltet statt die Seite neu zu laden. Ausgeblendete Abschnittsköpfe zählen nicht mit. */
.rm-ausgeblendet { display: none !important; }

/* Hinweis unter einem Feld, z. B. übliche Biometriewerte der Art (30.10.2026). */
.rm-feldhinweis { display: block; font-size: 12px; color: var(--rm-leise); }
.rm-feldhinweis:empty { display: none; }

/* Lange Formulare (Edit_Data): Abschnitte nummeriert, darüber die Sprungleiste
   (Scripts/schritte.js). Gezählt werden nur Köpfe, die der Server ausliefert. */
.rm-formular { counter-reset: rm-schritt; }
.rm-formular > .cpHeader { counter-increment: rm-schritt; justify-content: flex-start; scroll-margin-top: 8px; }
.rm-formular > .cpHeader::before {
    content: counter(rm-schritt);
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--rm-knopf);
    color: #ffffff;
    font-size: 12px;
    font-weight: 700;
}
.rm-formular > .cpHeader[data-klapp-inhalt]::after { margin-left: auto; }

.rm-schritte { margin: 0 0 10px; }
.rm-schritte ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: nowrap; gap: 4px; }
/* Einzeilig (Augustin, 30.10.2026): Einträge schrumpfen, zu lange Texte enden auf „…“. */
.rm-schritte li { flex: 0 1 auto; min-width: 0; display: flex; }
.rm-schritt-text { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rm-schritte a {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    min-width: 0;
    box-sizing: border-box;
    min-height: 26px;
    padding: 0 8px 0 7px;
    border: 1px solid var(--rm-rand);
    border-radius: 999px;
    background: #ffffff;
    color: var(--rm-text);
    font-size: 12px;
    font-weight: 600;
    text-decoration: none;
}
.rm-schritte a:hover { border-color: var(--rm-blau); color: var(--rm-blau-dunkel); }
.rm-schritt-nr { color: var(--rm-blau); font-weight: 700; }

/* Knopfleiste unter einem Formular: rechtsbündig, der Hauptknopf zuletzt. */
.rm-knopfleiste { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; }
.rm-knopfleiste input[type=submit] { min-height: 36px; padding: 0 18px; }

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

input[type=text], input[type=password], input[type=email], input[type=tel], input[type=number],
input:not([type]), select, textarea {
    font: inherit;
    font-size: 14px;
    min-height: 30px;
    padding: 3px 8px;
    border: 1px solid var(--rm-feldrand);
    border-radius: 6px;
    background: #ffffff;
    color: var(--rm-text);
    max-width: 100%;
}
select { width: 100%; padding-right: 22px; text-overflow: ellipsis; }
textarea { min-height: 56px; line-height: 1.4; }
input::placeholder, textarea::placeholder { color: #7a8a96; }
input:focus, select:focus, textarea:focus { outline: 2px solid var(--rm-blau); outline-offset: 1px; border-color: var(--rm-blau); }
input[type=text]:read-only, textarea:read-only, select[disabled] { background: var(--rm-grund); color: var(--rm-text2); }

/* Nur der Knopf (30.10.2026): Der Text "Keine ausgewählt" sagt nichts - das Foto wird beim Auswählen
   sofort hochgeladen - und erschien abgeschnitten. font-size 0 blendet ihn aus, der Knopf hat seine
   eigene Größe; !important wegen der Inline-Größe am Steuerelement. */
input[type=file] { font: inherit; font-size: 0 !important; color: transparent; max-width: 100%; }
/* Dateifeld hinter dem eigenen Knopf (Scripts/dateiupload.js, 30.10.2026): unsichtbar, aber da. */
input[type=file].rm-upload-versteckt { position: absolute; width: 1px; height: 1px; opacity: 0; overflow: hidden; pointer-events: none; }
button.rm-upload-knopf { width: auto; }
input[type=file]::file-selector-button { margin-right: 0; }
input[type=file]::file-selector-button {
    min-height: 30px;
    margin-right: 10px;
    padding: 0 12px;
    border: 1px solid var(--rm-knopf);
    border-radius: 6px;
    background: var(--rm-knopf);
    color: #ffffff;
    font: inherit;
    font-weight: 600;
    cursor: pointer;
}
input[type=file]::file-selector-button:hover { background: var(--rm-knopf-dunkel); }

input[type=checkbox], input[type=radio] { width: 16px; height: 16px; accent-color: var(--rm-knopf); vertical-align: middle; }

/* Alle Knöpfe blau mit weißer Schrift (Augustin, 30.10.2026). Ausgenommen: die Sprachwahl
   (Umschalter) und der Name im Benutzermenü. */
input[type=submit], input[type=button], button.rm-knopf {
    min-height: 30px;
    padding: 0 14px;
    border: 1px solid var(--rm-knopf);
    border-radius: 6px;
    background: var(--rm-knopf);
    color: #ffffff;
    font: inherit;
    font-weight: 600;
    cursor: pointer;
    max-width: 100%;
}
input[type=submit]:hover, input[type=button]:hover, button.rm-knopf:hover { background: var(--rm-knopf-dunkel); }
input[type=submit]:disabled, input[type=button]:disabled { opacity: 0.5; cursor: default; }
input[type=submit].rm-primaer, input[type=button].rm-primaer {
    background: var(--rm-knopf);
    color: #ffffff;
    font-weight: 600;
}
input[type=submit].rm-primaer:hover, input[type=button].rm-primaer:hover { background: var(--rm-knopf-dunkel); }

.textBoxInput { font-size: 14px; }
.watermark { color: #7a8a96; }

/* Formulartabellen (asp:Table mit tableCellLabel / tableCellContent) */
.table { width: 100%; border-collapse: separate; border-spacing: 0; }
.table td { padding: 2px 6px; vertical-align: middle; }
/* Gleiche Zeilenhöhe in beiden Spalten - auch für Zeilen ohne Feld, etwa die Zwischenüberschrift
   "Farbring am anderen Bein"; sonst rutschte die rechte Spalte aus der Flucht (30.10.2026). */
.table td.tableCellLabel, .table td.tableCellLabelWide, .table td.tableCellContent { height: 34px; box-sizing: border-box; }
/* Anzeigetabellen (Show_Data, Klasse rm-anzeige, 30.10.2026): Zeilen mit reinem Text enger. Zeilen
   mit Feld oder Knopf behalten 34 px - auch im Bearbeitungsmodus, wo hier Felder erscheinen. */
.table.rm-anzeige tr:not(:has(input, select, textarea)) > td.tableCellLabel,
.table.rm-anzeige tr:not(:has(input, select, textarea)) > td.tableCellLabelWide,
.table.rm-anzeige tr:not(:has(input, select, textarea)) > td.tableCellContent { height: 26px; }
.tableCellLabel { width: 170px; font-size: 13px; font-weight: 600; color: #2b3a45; }
.tableCellLabelWide { width: 280px; font-size: 13px; font-weight: 600; color: #2b3a45; }
.tableCellContent { width: auto; }

/* Meldeformular, Ort (30.10.2026): Knöpfe in einer Reihe, die Ortssuche als Feld über der
   Karte mit aufklappender Trefferliste (Scripts/ortssuche.js). */
.rm-knopfreihe { display: flex; flex-wrap: wrap; gap: 6px; }
.rm-ortssuche { position: relative; padding: 2px 6px 6px; }
.rm-ortssuche-feld { display: flex; gap: 6px; }
.rm-ortssuche-feld input[type=text] { flex: 1 1 auto; min-width: 0; }
.rm-ort-treffer {
    position: absolute;
    left: 6px;
    right: 6px;
    top: 100%;
    z-index: 1000;
    max-height: 280px;
    overflow: auto;
    margin-top: -4px;
    background: #ffffff;
    border: 1px solid var(--rm-feldrand);
    border-radius: 6px;
    box-shadow: 0 8px 24px rgba(20, 40, 60, 0.16);
}
.rm-ort-treffer[hidden] { display: none; }
button.rm-ort-eintrag {
    display: block;
    width: 100%;
    padding: 6px 10px;
    border: 0;
    border-bottom: 1px solid var(--rm-rand);
    background: #ffffff;
    color: var(--rm-text);
    font: inherit;
    text-align: left;
    cursor: pointer;
}
button.rm-ort-eintrag:last-child { border-bottom: 0; }
button.rm-ort-eintrag:hover, button.rm-ort-eintrag:focus-visible { background: var(--rm-tint); outline: 0; }
.rm-ort-hinweis { padding: 8px 10px; color: var(--rm-leise); }

/* Listen */
td.withbottomborder { border-bottom: 1px solid var(--rm-rand); vertical-align: middle; padding: 4px 6px; }
tr.tablerow:hover td, tr.withHover:hover td { background: #f7fafc; }

/* Spalten */
.divRow:after { content: ""; display: table; clear: both; }
.divColumn { float: left; width: 50%; box-sizing: border-box; }
.divColumnWide { float: left; width: 100%; box-sizing: border-box; }

/* ----------------------------------------------------------- jQuery UI */

.ui-widget { font-family: inherit; font-size: 14px; }
/* overflow: hidden schneidet Kopf und Fuß in die runden Ecken (30.10.2026). */
.ui-dialog { border-radius: var(--rm-radius); padding: 0; border: 1px solid var(--rm-rand); box-shadow: 0 12px 40px rgba(20, 40, 60, 0.18); overflow: hidden; }
/* Dialogköpfe hell wie die Abschnittsköpfe, mit einer Leiste im Blau der Menüleiste oben
   (30.10.2026 - ganz dunkelblau wirkte zu aggressiv). */
.ui-dialog .ui-dialog-titlebar { text-align: left; background: var(--rm-tint); color: var(--rm-blau-dunkel); border: 0; border-top: 4px solid var(--rm-leiste); border-radius: 0; padding: 8px 14px; }
.ui-dialog .ui-dialog-content { padding: 10px 14px; }
.ui-dialog .ui-dialog-buttonpane { border-top: 1px solid var(--rm-rand); padding: 8px 16px; }
.ui-dialog .ui-dialog-buttonpane button { min-height: 30px; padding: 0 14px; border: 1px solid var(--rm-knopf); border-radius: 6px; background: var(--rm-knopf); color: #ffffff; font-weight: 600; }
.ui-dialog .ui-dialog-buttonpane button:hover { background: var(--rm-knopf-dunkel); }

/* Knöpfe rechts nebeneinander, Schließen-Kreuz schlicht, Auswahllisten in Dialogen so
   breit wie ihr Inhalt (Koordinate bearbeiten: N/S, E/W) - 30.10.2026. */
.ui-dialog .ui-dialog-buttonpane .ui-dialog-buttonset { float: none; display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; }
.ui-dialog .ui-dialog-buttonpane button { margin: 0; }
.ui-dialog .ui-dialog-titlebar-close { border: 0; background: transparent; width: 28px; height: 28px; margin-top: -14px; right: 8px; }
.ui-dialog .ui-dialog-titlebar-close:hover { background: #ffffff; border-radius: 6px; }
.ui-dialog .ui-dialog-content select { width: auto !important; min-width: 64px; }
/* Ausnahme: Auswahl über die ganze Breite (Ortsdaten laden), 30.10.2026. */
.ui-dialog .ui-dialog-content select.rm-volle-breite { width: 100% !important; }

.autocomplete_completionList.ui-menu, .autocomplete_completionList {
    border: 1px solid var(--rm-feldrand);
    border-radius: 8px;
    background: #ffffff;
    max-height: 280px;
    overflow-x: hidden;
    overflow-y: auto;
    box-sizing: border-box;
    box-shadow: 0 8px 24px rgba(20, 40, 60, 0.14);
    text-align: left;
}
.autocomplete_completionList .ui-menu-item-wrapper { padding: 5px 10px; box-sizing: border-box; white-space: normal; overflow-wrap: anywhere; }
/* Ohne Querleiste (30.10.2026): Die Einträge waren mit Innenabstand breiter als die Liste - die
   waagerechte Leiste nahm Höhe weg, und schon bei zwei Treffern kam die senkrechte dazu. */
.autocomplete_completionList .ui-state-active { background: var(--rm-tint); color: var(--rm-text); border: 0; margin: 0; }

.dialogPanel { text-align: left; }
/* Belegfotos im schwebenden Fenster (Meldungsliste, 30.10.2026). */
.rm-fotos { outline: none; display: flex; flex-direction: column; gap: 10px; height: 100%; box-sizing: border-box; }
.rm-fotos-gross { flex: 1 1 auto; min-height: 0; display: flex; align-items: center; justify-content: center; background: var(--rm-grund); border-radius: 8px; overflow: hidden; }
.rm-fotos-gross img { display: block; max-width: 100%; max-height: 100%; object-fit: contain; }
.rm-fotos-leiste { flex: 0 0 auto; display: flex; flex-wrap: wrap; gap: 8px; }
button.rm-fotos-vorschau { padding: 0; border: 2px solid transparent; border-radius: 8px; background: none; cursor: pointer; }
button.rm-fotos-vorschau img { display: block; height: 64px; border-radius: 6px; }
button.rm-fotos-vorschau.aktiv, button.rm-fotos-vorschau:hover { border-color: var(--rm-knopf); }

/* Rückfragen und Hinweise aus Scripts/meldung.js - Zeilenumbrüche im Text bleiben stehen. */
.rm-meldung { white-space: pre-line; padding-top: 6px; }

/* ------------------------------------------------- Symbole und Pillen */

/* Symbole aus App_CodeclsSymbol.vb (Inline-SVG, Farbe über currentColor) - 30.10.2026 statt
   der alten 16-px-Bilder. Symbolknöpfe stehen rechts in der Zeile, ruhig bis zum Darüberfahren. */
.rm-symbol { display: inline-block; flex: 0 0 auto; vertical-align: middle; }
.rm-symbole { display: inline-flex; align-items: center; gap: 2px; white-space: nowrap; }
a.rm-symbol-knopf, .rm-symbol-knopf {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 6px;
    color: var(--rm-leise);
    text-decoration: none;
}
a.rm-symbol-knopf:hover, .rm-symbol-knopf:hover { background: var(--rm-tint); color: var(--rm-knopf); }
a.rm-symbol-loeschen:hover, .rm-symbol-loeschen:hover { background: #fdecea; color: #b42318; }
.rm-symbol-knopf:focus-visible { outline: 2px solid var(--rm-blau); outline-offset: 1px; }
/* Ziehsymbol neben "GUID kopieren" in Show_Data (30.10.2026): zum Anfassen erkennbar. */
/* So hoch wie die Knöpfe; die negative Außenkante nimmt es aus der Zentrierung, damit beide
   Knopfreihen bündig bleiben - das Symbol hängt links daneben. */
.rm-ziehen { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; box-sizing: border-box; vertical-align: middle;
             margin-left: -36px; margin-right: 6px;
             border: 1px dashed var(--rm-knopf); border-radius: 8px; color: var(--rm-knopf); background: var(--rm-tint); cursor: grab; user-select: none; }
.rm-ziehen:hover { background: #ffffff; }
.rm-ziehen:active { cursor: grabbing; }
.rm-symbol-hinweis { color: var(--rm-leise); }
/* Filter in "Daten suchen" (Meldungsliste, 30.10.2026): Beschriftung und Feld paarweise, zwei Paare
   je Zeile; am Handy untereinander. */
.rm-filter { display: grid; grid-template-columns: 170px minmax(0, 1fr) 170px minmax(0, 1fr); gap: 6px 12px; align-items: center; padding: 4px 6px 0; }
.rm-filter > label, .rm-filter > span:not(.rm-filter-knoepfe) > label { font-size: 13px; font-weight: 600; color: #2b3a45; }
.rm-filter select, .rm-filter input[type=text] { width: 100%; }
.rm-filter-fuss { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; margin-top: 4px; }
.rm-filter-knoepfe { display: inline-flex; gap: 8px; margin-left: auto; }
/* Hinweis in einer leeren Liste (30.10.2026). */
.rm-leer { padding: 18px 8px; color: var(--rm-leise); text-align: center; }
/* Foto mit rundem Entfernen-Knopf unten rechts im Bild (Edit_Data, Show_Data - 30.10.2026). */
.rm-foto { position: relative; display: inline-block; margin: 0 14px 8px 0; vertical-align: top; }
.rm-foto img { display: block; border: 1px solid var(--rm-rand); border-radius: 6px; }
.rm-foto-name { display: block; max-width: 160px; font-size: 12px; color: var(--rm-text2); overflow-wrap: anywhere; }
a.rm-foto-entfernen {
    position: absolute;
    right: -8px;
    bottom: -8px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border: 1px solid #f4c3bd;
    border-radius: 50%;
    background: #ffffff;
    color: #a3261a;
    box-shadow: 0 1px 4px rgba(20, 40, 60, 0.2);
}
a.rm-foto-entfernen:hover { background: #a3261a; border-color: #a3261a; color: #ffffff; }
a.rm-foto-entfernen .rm-symbol { width: 14px; height: 14px; }
.rm-symbol-ok { color: #1e6b3a; }
.rm-symbol-aus { color: #b8c2ca; }
.rm-symbol-fehlt { color: #c4553f; }
/* Gesperrter Symbolknopf (LinkButton mit Enabled=False rendert die Klasse aspNetDisabled). */
.rm-symbol-knopf.aspNetDisabled, .rm-symbol-knopf.aspNetDisabled:hover { color: #c3ccd3; background: transparent; cursor: default; }

/* Status als Pille mit Text, wie die Pillen der Cloud. */
.rm-pille {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    height: 22px;
    padding: 0 9px 0 6px;
    border: 1px solid transparent;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
    line-height: 1;
    white-space: nowrap;
}
.rm-pille .rm-symbol { width: 12px; height: 12px; }
.rm-pille-text { padding: 0 9px; }
.rm-pille-grau   { background: #eef1f4; border-color: #d9dee3; color: #4a5865; }
.rm-pille-blau   { background: #e3f0f8; border-color: #b9d8ec; color: #0b5d8f; }
.rm-pille-gruen  { background: #e7f5ec; border-color: #b8e0c6; color: #1e6b3a; }
.rm-pille-orange { background: #fdf1e3; border-color: #f2d2a8; color: #8a4a0b; }
.rm-pille-rot    { background: #fdecea; border-color: #f4c3bd; color: #a3261a; }
.rm-pille-lila   { background: #f1ecfb; border-color: #d9cdf3; color: #5b3a9e; }
.rm-pillen { display: inline-flex; flex-wrap: wrap; gap: 4px; }
/* Statusspalte der Meldungsliste (30.10.2026): Bearbeitung und Ringmodus untereinander, die
   Datenbank daneben - gelb gefüllt, wenn die Meldung übernommen ist, sonst ausgegraut. */
/* Die Datenbank am rechten Rand der Zelle: Alle Zeilen sind gleich breit, die Symbole stehen
   untereinander - direkt hinter den Pillen sprangen sie je nach Statustext. */
.rm-status { display: flex; width: 100%; align-items: center; justify-content: space-between; gap: 8px; }
.rm-pillen-stapel { display: inline-flex; flex-direction: column; align-items: flex-start; gap: 3px; }
.rm-symbol-db-voll { color: #a8780a; fill: #f6cf57; }
td[style*="nowrap"] .rm-pillen { flex-wrap: nowrap; }

/* Übersicht als Kacheln (List_Data_Packages, 30.10.2026) - wie "Beobachtung hinzufügen" in der
   Cloud: Symbol im hellen Kreis, Name daneben, die ganze Kachel ist der Link. */
.rm-kacheln-titel { font-size: 16px; margin: 8px 0 8px; }
.rm-kacheln { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 10px; margin-bottom: 14px; }
a.rm-kachel {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
    border: 1px solid var(--rm-rand);
    border-radius: 10px;
    background: #ffffff;
    color: var(--rm-text);
    font-weight: 600;
    text-decoration: none;
    transition: border-color .15s, background-color .15s, box-shadow .15s;
}
a.rm-kachel:hover { border-color: var(--rm-knopf); background: var(--rm-tint); box-shadow: 0 2px 8px rgba(15, 23, 42, .08); color: var(--rm-blau-dunkel); }
a.rm-kachel:focus-visible { outline: 2px solid var(--rm-blau); outline-offset: 2px; }
.rm-kachel-symbol { flex: 0 0 36px; display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 50%; background: var(--rm-tint); color: var(--rm-knopf); }
a.rm-kachel:hover .rm-kachel-symbol { background: #ffffff; }
.rm-kachel-blau .rm-kachel-symbol  { background: #e3f0f8; color: #0b5d8f; }
.rm-kachel-rot .rm-kachel-symbol   { background: #fdecea; color: #a3261a; }
.rm-kachel-gelb .rm-kachel-symbol  { background: #fdf3d8; color: #8a6a0b; }
.rm-kachel-gruen .rm-kachel-symbol { background: #e7f5ec; color: #1e6b3a; }
.rm-kachel-text { min-width: 0; }
/* Jahr und Woche (List_Data_Packages): Titel groß, Zahlen klein darunter; ganz bearbeitet ruhig. */
.rm-kacheln-zeit { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
.rm-kachel-text { display: flex; flex-direction: column; }
.rm-kachel-titel { font-size: 15px; font-weight: 700; }
.rm-kachel-zeile { font-size: 12px; font-weight: 400; color: var(--rm-leise); }
a.rm-kachel-erledigt { background: var(--rm-grund); }
a.rm-kachel-erledigt .rm-kachel-titel { color: var(--rm-text2); font-weight: 600; }
a.rm-kachel-erledigt .rm-kachel-symbol { background: #e7f5ec; color: #1e6b3a; }
.rm-kachel-zahl { margin-left: auto; padding: 2px 9px; border-radius: 999px; background: var(--rm-knopf); color: #ffffff; font-size: 12px; font-weight: 700; }

/* -------------------------------------------------------- Startseite */

.rm-held {
    display: flex;
    flex-wrap: wrap;
    gap: 24px;
    align-items: center;
    background: #ffffff;
    border: 1px solid var(--rm-rand);
    border-radius: var(--rm-radius);
    padding: 20px 24px;
    margin-bottom: 14px;
}
.rm-held-text { flex: 1 1 440px; min-width: 0; display: flex; flex-direction: column; gap: 10px; }
.rm-held-text h2 { font-size: 24px; font-weight: 700; margin: 0; }
.rm-held-lead { font-size: 15px; color: var(--rm-text2); }
.rm-held-lead p, .rm-held-lead div { margin: 0; }
.rm-held-knoepfe { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 2px; }
.rm-hinweis { font-size: 13px; color: var(--rm-leise); }
.rm-held-bild { flex: 1 1 360px; min-width: 0; text-align: center; }
.rm-held-bild img { width: 100%; max-width: 380px; height: auto; border: 1px solid var(--rm-rand); border-radius: 10px; }

a.rm-knopf-primaer {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 40px;
    padding: 0 20px;
    background: var(--rm-knopf);
    color: #ffffff;
    border-radius: 8px;
    text-decoration: none;
    font-weight: 700;
    font-size: 15px;
}
a.rm-knopf-primaer:hover { background: var(--rm-knopf-dunkel); color: #ffffff; }
a.rm-knopf-gross { min-height: 40px; padding: 0 18px; border-radius: 8px; font-size: 15px; font-weight: 600; }

.rm-karten { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 14px; }
.rm-karte {
    background: #ffffff;
    border: 1px solid var(--rm-rand);
    border-radius: var(--rm-radius);
    overflow: hidden;
    display: flex;
    flex-direction: column;
}
.rm-karte h2 { margin: 0; padding: 7px 14px; background: var(--rm-tint); color: var(--rm-blau-dunkel); font-size: 15px; font-weight: 700; }
.rm-karte-inhalt { padding: 10px 14px; color: var(--rm-text2); display: flex; flex-direction: column; gap: 8px; flex: 1 1 auto; }
.rm-karte-inhalt p { margin: 0; }
.rm-karte-inhalt ul { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 3px; }
.rm-karte-inhalt .rm-knopf-rand { align-self: flex-start; margin-top: 4px; }

/* -------------------------------------------------------- Knopfschrift */

/* Einheitlich auf allen Knöpfen (Augustin, 30.10.2026): 14 px, halbfett (600) - 700 lief weiß auf
   Blau zu und wirkte verwaschen. Hier am Ende, damit es die
   Größen einzelner Knöpfe weiter oben (Startseite 15 px) überschreibt. Die Sprachwahl behält
   ihre 13 px über den spezifischeren Wähler. */
input[type=submit], input[type=button], button.rm-knopf,
a.rm-knopf-rand, a.rm-knopf-primaer, a.rm-knopf-gross, .rm-konto a.rm-knopf-rand,
.ui-dialog .ui-dialog-buttonpane button { font-size: 14px; font-weight: 600; letter-spacing: 0.01em; }
/* Eigene Regel: Kennt ein Browser den Pseudo-Wähler nicht, verwürfe er sonst die ganze Liste. */
input[type=file]::file-selector-button { font-size: 14px; font-weight: 600; letter-spacing: 0.01em; }

/* ------------------------------------------------------------------ Fuß */

.rm-fuss { border-top: 1px solid var(--rm-rand); background: #ffffff; }
.rm-fuss-innen {
    box-sizing: border-box;
    max-width: var(--rm-breite);
    margin: 0 auto;
    padding: 10px 24px;
    display: flex;
    flex-wrap: wrap;
    gap: 6px 24px;
    font-size: 13px;
    color: var(--rm-leise);
}

/* Mittlere Breiten: Angemeldet braucht der rechte Block rund 580 px. Erst fällt der
   Untertitel weg, dann rückt der Block rechtsbündig unter den Schriftzug - vorher wurde
   der Schriftzug auf fünf Zeilen zusammengedrückt (gemessen bei 870 px). */
@media (max-width: 1100px) {
    .rm-untertitel { display: none; }
}
@media (max-width: 1080px) {
    .rm-kopf-innen { flex-wrap: wrap; }
    .rm-konto { margin-left: auto; }
}

/* --------------------------------------------------------------- Handy */

@media (max-width: 860px) {
    .rm-kopf-innen { padding: 10px 16px; flex-wrap: wrap; }
    .rm-titel { font-size: 16px; }
    .rm-untertitel { display: none; }
    .rm-marke img { height: 36px; }
    .rm-konto { width: 100%; flex-wrap: wrap; white-space: normal; gap: 6px 10px; font-size: 13px; }
    .rm-konto a.rm-knopf-rand { min-height: 38px; padding: 0 12px; }
    .rm-sprachwahl-rahmen { margin-left: auto; }
    .rm-sprachwahl summary { min-height: 38px; }
    .rm-sprachwahl-name { display: none; }
    .rm-benutzermenue-liste { right: auto; left: 0; }

    .rm-leiste-innen { padding: 0 12px; min-height: 52px; flex-wrap: wrap; }
    .rm-menu-knopf {
        display: inline-flex;
        align-items: center;
        gap: 10px;
        min-height: 44px;
        padding: 0 8px;
        border: 0;
        background: transparent;
        color: #ffffff;
        font: inherit;
        font-weight: 600;
        cursor: pointer;
    }
    .rm-leiste div.menu { display: none; }
    .rm-leiste.offen div.menu { display: block; padding-bottom: 8px; }
    .rm-leiste div.menu ul { flex-direction: column; }
    .rm-leiste div.menu ul li a { border-bottom: 0; border-left: 3px solid transparent; padding: 12px 12px; }
    .rm-leiste div.menu ul li a.selected { border-left-color: #ffffff; }

    .contentheadline, .content { padding-left: 12px; padding-right: 12px; }
    .contentheadline { padding-top: 18px; }
    .rm-seitentitel { font-size: 22px; margin-bottom: 14px; }
    .cpBody { padding: 14px; }
    .cpHeader { padding: 12px 14px; }
    .rm-schritte ol { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 4px; scrollbar-width: thin; }
    .rm-schritte li { flex: 0 0 auto; }
    .rm-knopfleiste input[type=submit] { flex: 1 1 100%; }

    .divColumn { float: none; width: 100%; }
    .rm-filter { grid-template-columns: minmax(0, 1fr); gap: 2px 0; }
    .rm-filter > label { margin-top: 6px; }

    .rm-held { padding: 20px; gap: 20px; }
    .rm-held-text h2 { font-size: 24px; }
    .rm-held-lead { font-size: 15px; }

    /* Formulartabellen: Beschriftung über dem Feld */
    tr:has(> td.tableCellLabel), tr:has(> td.tableCellLabelWide) { display: block; padding: 4px 0; }
    td.tableCellLabel, td.tableCellLabelWide, td.tableCellContent { display: block; width: auto; padding: 2px 0; height: auto; }
    /* Gleiche Gewichtung wie ".table td.tableCellContent { height: 34px }" oben (30.10.2026): Sonst
       blieb die Höhe fest, als Block wird sie nicht mehr mitgezogen - Textfeld und Karte liefen
       über, und Bemerkung und Ortsinformationen bekamen eine eigene Bildlaufleiste. */
    .table td.tableCellLabel, .table td.tableCellLabelWide, .table td.tableCellContent { height: auto; }
    .rm-ortssuche { padding-left: 0; padding-right: 0; }   /* bündig mit den Zellen, die hier keinen Seitenabstand haben */

    /* Fingergerecht: am Rechner kompakt, hier mindestens 40 px. */
    input[type=text], input[type=password], input[type=email], input[type=tel], input[type=number],
    input:not([type]), select { min-height: 40px; font-size: 16px; }
    input[type=submit], input[type=button] { min-height: 44px; }
    .rm-knopfleiste input[type=submit] { min-height: 44px; }
    .rm-schritte a { min-height: 34px; }
    .rm-leiste div.menu ul li a { font-size: 16px; }
}