/* Einstellungsseiten (Preferences_MapService, Edit_MapServiceLayer, Preferences_Cloud, Preferences_User) und
   Benutzerverwaltung (List_Users, Edit_User, Invite_User) - 27.10.2026.
   Eigenes, aufgeräumtes Erscheinungsbild nur für diesen Bereich: Alles hängt an .ms, damit keine
   andere Seite der Cloud sich verändert. Reiter, Dialoge und Formulare bleiben technisch dieselben
   (Scripts/reiter.js, jQuery UI, asp:Table); hier ändert sich nur, wie sie aussehen.
----------------------------------------------------------*/
/* Akzentfarbe: aus der Kopffarbe der Cloud (clsCloud.DesignVariablen setzt --cloud-akzent*), sonst Blau. Die
   Abstufungen werden hier berechnet, damit eine Kundenfarbe alle Flächen, Schriften und Fokusringe trägt. Gilt
   auch für die jQuery-UI-Dialoge, die außerhalb von .ms am body hängen. */
.ms, .ui-dialog.ms-dialog {
    --ms-akzent: var(--cloud-akzent, #2563eb);
    --ms-akzent-text: var(--cloud-akzent-text, #ffffff);
    --ms-akzent-schrift: var(--cloud-akzent-schrift, #2563eb);
    --ms-akzent-dunkel: color-mix(in srgb, var(--ms-akzent) 84%, #000);
    --ms-akzent-hell: color-mix(in srgb, var(--ms-akzent) 9%, #fff);
    --ms-akzent-ring: color-mix(in srgb, var(--ms-akzent) 25%, transparent);
}


.ms {
    --ms-text: #0f172a;
    --ms-text-2: #334155;
    --ms-leise: #64748b;
    --ms-rand: var(--panel-rand, #e2e8f0);      /* Panelfarben der Cloud (Cloud-Einstellungen > Webseite > Panels), 28.10.2026 */
    --ms-rand-leicht: #eef2f7;
    --ms-flaeche: #f8fafc;
    --ms-kopf: var(--panel-kopf, var(--ms-flaeche));
    --ms-kopf-text: var(--panel-kopf-text, var(--ms-text));
    --ms-kopf-text-leise: var(--panel-kopf-text, var(--ms-leise));
    --ms-gruen: #15803d;
    --ms-gruen-hell: #dcfce7;
    --ms-rot: #b91c1c;
    --ms-rot-hell: #fee2e2;
    --ms-radius: 12px;
    font-family: "Segoe UI", system-ui, -apple-system, Roboto, Arial, sans-serif;
    font-size: 13.5px;
    color: var(--ms-text);
}

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

.ms-kopf {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 4px 2px 18px 2px;
}

.ms-kopf-symbol {
    flex: none;
    width: 40px;
    height: 40px;
    border-radius: 10px;
    background: var(--ms-akzent-hell);
    color: var(--ms-akzent-schrift);
    display: flex;
    align-items: center;
    justify-content: center;
}

.ms-kopf-text {
    flex: 1;
    min-width: 0;
}

.ms .ms-titel {
    margin: 0;
    padding: 0;
    font-size: 20px;
    font-weight: 600;
    line-height: 1.25;
    color: var(--ms-text);
    font-variant: normal;
    text-transform: none;
    letter-spacing: 0;
}

.ms-untertitel {
    margin: 2px 0 0 0;
    color: var(--ms-leise);
    font-size: 13px;
}

.ms-kopf-aktionen {
    display: flex;
    gap: 8px;
    flex: none;
}

/* Knöpfe ---------------------------------------------------------------------------------- */

.ms input[type=submit].ms-knopf,
.ms input[type=button].ms-knopf,
.ms button.ms-knopf,
.ms a.ms-knopf {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 30px;
    padding: 0 16px;
    border-radius: 8px;
    border: 1px solid var(--ms-rand);
    background: #fff;
    color: var(--ms-text-2);
    font: inherit;
    font-weight: 600;
    font-size: 13px;
    cursor: pointer;
    text-decoration: none;
    transition: background-color .15s, border-color .15s, box-shadow .15s;
}

.ms input[type=submit].ms-knopf:hover,
.ms input[type=button].ms-knopf:hover,
.ms button.ms-knopf:hover,
.ms a.ms-knopf:hover {
    background: var(--ms-flaeche);
    border-color: #cbd5e1;
}

.ms input[type=submit].ms-knopf-primaer,
.ms input[type=button].ms-knopf-primaer,
.ms button.ms-knopf-primaer {
    background: var(--ms-akzent);
    border-color: var(--ms-akzent);
    color: var(--ms-akzent-text);
}

.ms input[type=submit].ms-knopf-primaer:hover,
.ms input[type=button].ms-knopf-primaer:hover,
.ms button.ms-knopf-primaer:hover {
    background: var(--ms-akzent-dunkel);
    border-color: var(--ms-akzent-dunkel);
}

.ms input.ms-knopf:focus-visible,
.ms button:focus-visible,
.ms a:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px var(--ms-akzent-ring);
}

/* Kleine Symbolknöpfe in Listen (Bearbeiten, Löschen, Kopieren, Öffnen). Löschen zeigt seit 28.10.2026 das Bild
   der Listen und Kontextmenüs (Images/Menue/loeschen.png) statt eines gezeichneten Papierkorbs - überall
   dasselbe Symbol (Augustin). */
.ms .ms-symbolknopf {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    padding: 0;
    border: 1px solid transparent;
    border-radius: 8px;
    background: transparent;
    color: var(--ms-leise);
    cursor: pointer;
    text-decoration: none;
    transition: background-color .15s, color .15s;
}

.ms .ms-symbolknopf:hover {
    background: var(--ms-flaeche);
    border-color: var(--ms-rand);
    color: var(--ms-akzent-schrift);
}

.ms .ms-symbolknopf.ms-gefahr:hover {
    background: var(--ms-rot-hell);
    border-color: #fecaca;
    color: var(--ms-rot);
}

.ms .ms-symbolknopf svg,
.ms-kopf-symbol svg {
    width: 16px;
    height: 16px;
}

.ms-kopf-symbol svg {
    width: 22px;
    height: 22px;
}

/* Reiter (Scripts/reiter.js) --------------------------------------------------------------- */

.ms .reiter-leiste {
    padding-right: 14px;
    box-sizing: border-box;
}

.ms .reiter-knopf,
.ms .reiter-knopf:link,
.ms .reiter-knopf:visited {
    margin: 0 0 2px 0;
    padding: 9px 12px;
    border: none;
    border-radius: 8px;
    background: none;
    color: var(--ms-text-2);
    font-family: inherit;
    font-size: 13px;
    white-space: nowrap;
    transition: background-color .15s, color .15s;
}

.ms .reiter-knopf:hover {
    background: var(--ms-flaeche);
    color: var(--ms-text);
}

.ms .reiter-knopf.reiter-aktiv {
    background: var(--ms-akzent-hell);
    border: none;
    color: var(--ms-akzent-schrift);
    font-weight: 600;
    box-shadow: inset 3px 0 0 var(--ms-akzent);
}

.ms .reiter-inhalt {
    border: 1px solid var(--ms-rand);
    border-radius: var(--ms-radius);
    background: #fff;
    box-shadow: 0 1px 2px rgba(15, 23, 42, .04);
    overflow: hidden;
}

/* Rechts 40 statt 28 px (28.10.2026, Augustin): Mit Bildlaufleiste standen die Felder zu dicht davor. */
.ms .reiter-seite {
    padding: 22px 40px 24px 28px;
}

/* Zusammengefasste Reiter (Preferences_Cloud, 28.10.2026): die früheren Reiter stehen als Abschnitte untereinander.
   Ihr innerer Bildlaufbereich (asp:Panel Height=100% ScrollBars=Auto) wird zum normalen Block - es rollt nur der
   Reiter als Ganzes. Zwischen den Abschnitten eine Linie. */
.ms .reiter-teil > div {
    height: auto !important;
    overflow: visible !important;
}

/* Referenzlisten (Scripts/referenzsichtbarkeit.js baut eine eigene Tabelle mit 420 px Beschriftung): Spalten wie in
   den übrigen Formularen, damit die Werte überall gleich weit links beginnen (28.10.2026). */
.ms table.referenzsichtbarkeit-tabelle {
    width: 100%;
    border-collapse: collapse;
    border-spacing: 0;
}

.ms table.referenzsichtbarkeit-tabelle td {
    padding: 6px 0;
    vertical-align: middle;
}

.ms table.referenzsichtbarkeit-tabelle td:first-child {
    width: 250px !important;
    padding-right: 24px;
    color: var(--ms-text-2);
    font-weight: 600;
}

.ms .reiter-teil + .reiter-teil {
    margin-top: 20px;      /* wie vor jeder Zwischenüberschrift; keine Linie - der Überschriftenbalken trennt */
}

/* Abschnittsüberschrift je Reiter - ersetzt die Kapitälchen-Überschrift mit Balken aus Site.css */
.ms .reiter-seite h3 {
    margin: 0 0 4px 0;
    padding: 0;
    border: none;
    background: none;
    font-size: 17px;
    font-weight: 600;
    font-variant: normal;
    color: var(--ms-text);
}

/* Titel direkt im Reiter (Benutzer-Einstellungen, Kartendienst, Layer) als Balken wie die Zwischenüberschriften in
   den Formularen - überall gleich (Augustin, 28.10.2026). */
.ms .reiter-seite > h3 {
    margin: 0 0 8px 0;
    padding: 6px 12px;
    border-left: 4px solid var(--ms-akzent);
    border-radius: 0 6px 6px 0;
    background: var(--ms-kopf);
    color: var(--ms-kopf-text);
    font-size: 15px;
}

.ms .ms-beschreibung {
    margin: 0 0 18px 0;
    color: var(--ms-leise);
    font-size: 13px;
    max-width: 760px;
}

.ms .ms-zwischentitel {
    margin: 26px 0 4px 0;
    font-size: 14px;
    font-weight: 600;
    color: var(--ms-text);
}

/* Formulare: die asp:Table-Zeilen als ruhige Liste aus Beschriftung und Feld ---------------- */

.ms table.ms-formular {
    width: 100%;
    border-collapse: collapse;
    border-spacing: 0;
    padding: 0 !important;
}

.ms table.ms-formular > tbody > tr > td {
    padding: 6px 0;
    border-top: 1px solid var(--ms-rand-leicht);
    vertical-align: middle;
}

.ms table.ms-formular > tbody > tr:first-child > td {
    border-top: none;
}

/* Suchfelder über einer Liste (List_Users) brauchen keine Trennlinien - es sind vier kurze Zeilen, keine Gruppe
   von Einstellungen (27.10.2026, Augustin). */
.ms .ms-filter table.ms-formular > tbody > tr > td {
    border-top: none;
    padding: 2px 0;      /* Feldabstand 4 px wie in den Eingaben (Augustin, 28.10.2026) */
}

.ms .ms-filter table.ms-formular > tbody > tr > td:first-child {
    padding-top: 2px;
    vertical-align: middle;
    font-weight: 400;      /* nicht fett wie in den Einstellungen - Suchfelder über Listen (Augustin, 28.10.2026) */
}

/* Zwei Felder je Zeile (List_Users, 28.10.2026 - mehr Höhe für die Liste): Bezeichnung so breit wie in den übrigen
   Suchfeldern, die Felder teilen sich den Rest; die zweite Bezeichnung mit Abstand zum ersten Feld. */
.ms .ms-filter table.ms-formular > tbody > tr > td.ms-filter-bez {
    width: 250px !important;      /* Abstand zum Feld wie in den übrigen Suchfeldern (List_Computers, Augustin 28.10.2026) */
    padding-right: 24px;
    color: var(--ms-text-2);
    font-weight: 400;
    white-space: nowrap;
    vertical-align: middle;
}

.ms .ms-filter table.ms-formular > tbody > tr > td.ms-filter-bez[title] {
    cursor: help;
}

.ms .ms-filter table.ms-formular > tbody > tr > td.ms-filter-bez + td.ms-filter-feld + td.ms-filter-bez {
    padding-left: 24px;
}

.ms .ms-filter table.ms-formular > tbody > tr > td.ms-filter-feld {
    width: 50%;
}

.ms table.ms-formular > tbody > tr > td:first-child {
    /* einheitlich für alle Einstellungsseiten - Preferences_Cloud setzt an den Zellen Width="420px" */
    width: 250px !important;
    padding-right: 24px;
    color: var(--ms-text-2);
    font-weight: 600;      /* fett mit kurzem Hinweis darunter (<i>) wie in den Benutzer-Einstellungen (Augustin, 28.10.2026) */
    vertical-align: top;
    padding-top: 8px;
}

.ms table.ms-formular > tbody > tr > td:first-child i {
    display: block;
    margin-top: 2px;
    font-style: normal;
    font-weight: 400;
    color: var(--ms-leise);
    font-size: 12px;
}

.ms input[type=text],
.ms input[type=number],
.ms input:not([type]),
.ms textarea,
.ms select {
    /* 22 px wie überall (Styles/rahmen.css): die zentrale Eingabe muss mit ihren vielen Feldern auf eine
       Seite passen - bis 27.10.2026 hatten die Einstellungsseiten hier 36 px. */
    box-sizing: border-box;
    max-width: 100%;
    height: 22px;
    padding: 0 8px;
    line-height: 20px;
    border: 1px solid #cfd8e3;
    border-radius: 6px;
    background: #fff;
    color: var(--ms-text);
    font-family: inherit;
    font-size: 13px;
    transition: border-color .15s, box-shadow .15s;
}

.ms textarea {
    height: auto;
    padding: 4px 8px;
    line-height: 1.45;
    resize: vertical;
}

.ms select[size],
.ms select[multiple] {
    height: auto;
    padding: 2px;
}

.ms input[type=text]:focus,
.ms input:not([type]):focus,
.ms textarea:focus,
.ms select:focus {
    outline: none;
    border-color: var(--ms-akzent);
    box-shadow: 0 0 0 3px var(--ms-akzent-ring);
}

.ms input[readonly],
.ms textarea[readonly] {
    background: var(--ms-flaeche);
    color: var(--ms-leise);
}

.ms input[type=checkbox] {
    width: 16px;
    height: 16px;
    margin: 0 8px 0 0;
    vertical-align: -3px;
    accent-color: var(--ms-akzent);
}

.ms label {
    cursor: pointer;
}

/* Farbfelder (HTML-Farbcode): kleines Farbmuster vor dem Eingabefeld (Skript ms-farbe) */
.ms .ms-farbfeld {
    display: flex;
    align-items: center;
    gap: 8px;
}

.ms .ms-farbfeld input[type=color] {
    flex: none;
    width: 30px;
    height: 22px;
    padding: 2px;
    border: 1px solid #cfd8e3;
    border-radius: 8px;
    background: #fff;
    cursor: pointer;
}

/* Fuß mit den Knöpfen der Seite */
.ms .ms-fuss {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    padding: 14px 0 16px 0;      /* unten Luft, sonst klebten die Knöpfe am Ende einer rollenden Seite (Edit_User, 28.10.2026) */
}

/* Aufruf-Adressen ------------------------------------------------------------------------- */

.ms .ms-adressen {
    display: grid;
    grid-template-columns: 170px minmax(0, 1fr) auto;
    border: 1px solid var(--ms-rand);
    border-radius: 10px;
    overflow: hidden;
}

.ms .ms-adressen > * {
    padding: 9px 12px;
    border-top: 1px solid var(--ms-rand-leicht);
    display: flex;
    align-items: center;
    min-width: 0;
}

.ms .ms-adressen > :nth-child(-n+3) {
    border-top: none;
}

.ms .ms-adresse-name {
    color: var(--ms-text-2);
    font-weight: 600;
    background: var(--ms-flaeche);
}

.ms .ms-adresse-wert a {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-family: Consolas, "Cascadia Mono", Menlo, monospace;
    font-size: 12.5px;
    color: var(--ms-text-2);
    text-decoration: none;
}

.ms .ms-adresse-wert a:hover {
    color: var(--ms-akzent-schrift);
    text-decoration: underline;
}

.ms .ms-adresse-aktionen {
    gap: 2px;
    padding: 4px 8px;
}

.ms .ms-hinweisbox {
    display: flex;
    gap: 10px;
    margin: 0 0 14px 0;
    padding: 10px 14px;
    border-radius: 10px;
    background: var(--ms-akzent-hell);
    color: color-mix(in srgb, var(--ms-akzent-schrift) 80%, #000);
    font-size: 13px;
    max-width: 860px;
}

.ms .ms-kopiert {
    color: var(--ms-gruen);
}

/* Layerliste ------------------------------------------------------------------------------ */

.ms table.ms-tabelle {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    border: 1px solid var(--ms-rand);
    border-radius: 10px;
    overflow: hidden;
}

.ms table.ms-tabelle th {
    padding: 10px 12px;
    background: var(--ms-kopf);
    border-bottom: 1px solid var(--ms-rand);
    color: var(--ms-kopf-text-leise);
    font-size: 12px;
    font-weight: 600;
    text-align: left;
    text-transform: uppercase;
    letter-spacing: .03em;
}

.ms table.ms-tabelle td {
    padding: 10px 12px;
    border-bottom: 1px solid var(--ms-rand-leicht);
    vertical-align: middle;
}

.ms table.ms-tabelle tr:last-child td {
    border-bottom: none;
}

.ms table.ms-tabelle tbody tr:hover td {
    background: #fbfdff;
}

.ms .ms-layer-name {
    display: block;
    font-weight: 600;
    color: var(--ms-text);
}

.ms .ms-layer-art {
    display: block;
    margin-top: 1px;
    color: var(--ms-leise);
    font-size: 12.5px;
}

.ms .ms-aktionen {
    white-space: nowrap;
    text-align: right;
}

.ms .ms-legende img {
    display: block;
    width: 18px;
    height: 18px;
}

/* Statusmarken */
.ms .ms-marke {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    height: 22px;
    padding: 0 9px;
    margin-right: 4px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
}

.ms .ms-marke-an {
    background: var(--ms-gruen-hell);
    color: var(--ms-gruen);
}

.ms .ms-marke-aus {
    background: #f1f5f9;
    color: #94a3b8;
}

/* Weitere Marken (28.10.2026): gesperrte Cloud, offene Anfrage/Einladung beim Benutzer, Cloud-Typ. */
.ms .ms-marke-gesperrt {
    background: var(--ms-rot-hell);
    color: var(--ms-rot);
}

.ms .ms-marke-offen {
    background: #fef3c7;
    color: #b45309;
}

.ms .ms-marke-basic {
    background: #f1f5f9;
    color: #475569;
}

.ms .ms-marke-team {
    background: var(--ms-akzent-hell);
    color: var(--ms-akzent);
}

.ms .ms-marke-administrativ {
    background: #f3e8ff;
    color: #7e22ce;
}

/* Eine Marke als Verweis (Status in Alle Clouds, Benutzerverwaltung) ohne Unterstrich */
.ms a:has(> .ms-marke) {
    text-decoration: none;
}

.ms td > .ms-marke:last-child,
.ms td > a:last-child > .ms-marke {
    margin-right: 0;
}

.ms .ms-marke-punkt::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
}

.ms .ms-leer {
    padding: 28px;
    border: 1px dashed var(--ms-rand);
    border-radius: 10px;
    color: var(--ms-leise);
    text-align: center;
}

/* Zeilen über beide Spalten (Preferences_Cloud): Überschriften, Hinweise, Listen, Knöpfe. Sie tragen
   die Regeln der Beschriftungsspalte nicht; eine Überschrift darin trennt Abschnitte. */
.ms table.ms-formular > tbody > tr > td[colspan] {
    width: auto !important;
    padding-right: 0;
    font-weight: 400;
    color: var(--ms-text);
}

.ms table.ms-formular > tbody > tr:first-child > td[colspan] {
    padding-top: 0;
}

.ms table.ms-formular td[colspan] > h3 + br,
.ms table.ms-formular td[colspan] > h4 + br {
    display: none;
}

.ms table.ms-formular td[colspan] > h3 {
    margin-bottom: 8px;
    /* Zwischenüberschriften als Balken wie in den Datenbank-Funktionen, Strich in der Akzentfarbe statt Orange
       (Augustin, 28.10.2026) - in den zusammengefassten Reitern trennen sie die Abschnitte deutlich. */
    padding: 6px 12px;
    border-left: 4px solid var(--ms-akzent);
    border-radius: 0 6px 6px 0;
    background: var(--ms-kopf);
    color: var(--ms-kopf-text);
    font-size: 15px;
}

/* Einheitlich um die Zwischenüberschriften (Augustin, 28.10.2026): davor Luft, keine Linie davor und keine danach. */
.ms table.ms-formular > tbody > tr:has(> td[colspan] > h3) > td {
    border-top: none;
    padding-top: 20px;
}

.ms table.ms-formular > tbody > tr:first-child:has(> td[colspan] > h3) > td {
    padding-top: 0;
}

.ms table.ms-formular > tbody > tr:has(> td[colspan] > h3) + tr > td {
    border-top: none;
}

.ms .reiter-seite h4 {
    margin: 18px 0 2px 0;
    padding: 0;
    border: none;
    background: none;
    font-size: 14px;
    font-weight: 600;
    font-variant: normal;
    color: var(--ms-text);
}

/* Innere Listen (Übersichtskarten, Kartensymbole) und Datei-Auswahl */
.ms table.ms-formular table td {
    border-bottom: 1px solid var(--ms-rand-leicht);
}

/* Rechte als Häkchenliste in einer Zelle (Edit_User: Cloud-Schnittstelle, Synchronisation, Webservice): Linien und
   Abstände wie zwischen den Zeilen der übrigen Rechte, die je Recht eine eigene Zeile haben (Augustin, 29.10.2026). */
.ms table.ms-formular table.ms-rechteliste {
    width: 100%;
    border-collapse: collapse;
}

.ms table.ms-formular table.ms-rechteliste td {
    padding: 6px 0;
    border-bottom: none;
    border-top: 1px solid var(--ms-rand-leicht);
}

.ms table.ms-formular table.ms-rechteliste tr:first-child td {
    padding-top: 0;
    border-top: none;
}

.ms input[type=file] {
    max-width: 100%;
    font-family: inherit;
    font-size: 13px;
}

.ms input[type=file]::file-selector-button {
    margin-right: 10px;
    height: 22px;
    padding: 0 14px;
    border: 1px solid var(--ms-rand);
    border-radius: 8px;
    background: #fff;
    color: var(--ms-text-2);
    font: inherit;
    font-weight: 600;
    cursor: pointer;
}

.ms input[type=file]::file-selector-button:hover {
    background: var(--ms-flaeche);
}

/* Knöpfe ohne eigene Klasse innerhalb der Formulare (z. B. "Neuen WMS-Dienst hinzufügen") */
.ms .reiter-seite input[type=submit]:not(.ms-knopf):not([style*="display"]),
.ms .reiter-seite input[type=button]:not(.ms-knopf) {
    height: 24px;
    padding: 0 16px;
    border: 1px solid var(--ms-rand);
    border-radius: 8px;
    background: #fff;
    color: var(--ms-text-2);
    font-family: inherit;
    font-weight: 600;
    font-size: 13px;
    cursor: pointer;
}

.ms .reiter-seite input[type=submit]:not(.ms-knopf):hover,
.ms .reiter-seite input[type=button]:not(.ms-knopf):hover {
    background: var(--ms-flaeche);
    border-color: #cbd5e1;
}

/* Eingabefelder in Dialogen (jQuery UI hängt sie aus .ms heraus an den body) */
.ms-dialog input[type=text],
.ms-dialog input:not([type]),
.ms-dialog textarea,
.ms-dialog select {
    box-sizing: border-box;
    max-width: 100%;
    height: 22px;
    padding: 0 8px;
    line-height: 20px;
    border: 1px solid #cfd8e3;
    border-radius: 6px;
    background: #fff;
    color: #0f172a;
    font-family: inherit;
    font-size: 13px;
}

.ms-dialog textarea {
    height: auto;
    padding: 4px 8px;
}

.ms-dialog select[size],
.ms-dialog select[multiple] {
    height: auto;
}

.ms-dialog input[type=text]:focus,
.ms-dialog textarea:focus,
.ms-dialog select:focus {
    outline: none;
    border-color: var(--ms-akzent);
    box-shadow: 0 0 0 3px var(--ms-akzent-ring);
}

.ms-dialog table td {
    padding: 5px 4px;
    vertical-align: middle;
}

/* Karte im Reiter "Räumlicher Filter": Zelle über alle Zeilen (rowspan) mit Abstand zu den Feldern */
.ms table.ms-formular > tbody > tr > td[rowspan] {
    width: 260px;
    padding: 10px 0 10px 24px;
    vertical-align: top;
    border-top: none;
}

.ms #map {
    border-radius: 10px;
    overflow: hidden;
}

.ms .panelContent {
    border-color: var(--ms-rand);
    border-radius: 10px;
}

/* Dialoge (jQuery UI) mit dialogClass "ms-dialog" ----------------------------------------- */

.ui-dialog.ms-dialog {
    padding: 0;
    border: none;
    border-radius: 14px;
    box-shadow: 0 24px 60px rgba(15, 23, 42, .28);
    overflow: hidden;
    font-family: "Segoe UI", system-ui, -apple-system, Roboto, Arial, sans-serif;
}

.ui-dialog.ms-dialog .ui-dialog-titlebar {
    padding: 14px 18px;
    border: none;
    border-bottom: 1px solid #e2e8f0;
    border-radius: 0;
    background: #fff;
    color: #0f172a;
    font-size: 15px;
    font-weight: 600;
}

.ui-dialog.ms-dialog .ui-dialog-content {
    padding: 16px 18px;
    color: #334155;
}

.ui-dialog.ms-dialog .ui-dialog-buttonpane {
    margin: 0;
    padding: 10px 14px;
    border-top: 1px solid #e2e8f0;
    background: #f8fafc;
}

.ui-dialog.ms-dialog .ui-dialog-buttonpane button {
    height: 26px;
    padding: 0 16px;
    border-radius: 8px;
    border: 1px solid #e2e8f0;
    background: #fff;
    color: #334155;
    font-weight: 600;
}

.ui-dialog.ms-dialog .ui-dialog-buttonpane button:last-child {
    background: var(--ms-akzent);
    border-color: var(--ms-akzent);
    color: var(--ms-akzent-text);
}

/* Dialoge mit der Hauptaktion zuerst ("Daten speichern", "Abbrechen") */
.ui-dialog.ms-dialog.ms-dialog-erster .ui-dialog-buttonpane button:last-child {
    background: #fff;
    border-color: #e2e8f0;
    color: #334155;
}

.ui-dialog.ms-dialog.ms-dialog-erster .ui-dialog-buttonpane button:first-child {
    background: var(--ms-akzent);
    border-color: var(--ms-akzent);
    color: var(--ms-akzent-text);
}

.ui-dialog.ms-dialog.ms-dialog-gefahr .ui-dialog-buttonpane button:last-child {
    background: #b91c1c;
    border-color: #b91c1c;
}

.ui-dialog.ms-dialog .ui-dialog-titlebar-close {
    border: none;
    background: transparent;
}

/* Layerfenster: der Rahmen (iframe) reicht ohne Innenabstand bis an den Rand */
.ui-dialog.ms-dialog.ms-dialog-rahmen .ui-dialog-content {
    padding: 0;
}

/* Im Fenster (Dialog.master, body.im-fenster): Das Fenster trägt den Titel, Speichern und Zurück
   stehen unten - der Kopf der Seite entfällt, die Reiter rücken nach oben. */
.im-fenster .ms-kopf {
    display: none;
}

.im-fenster .ms .reiter-seite {
    padding: 18px 22px 20px 22px;
}

/* Farbfeld: Wähler und Eingabe nebeneinander, gemeinsam so breit wie die übrigen Felder */
.ms .ms-farbfeld {
    width: 100%;
}

.ms .ms-farbfeld input[type=text],
.ms .ms-farbfeld input:not([type]) {
    flex: 1;
    min-width: 0;
}

@media (max-width: 900px) {
    .ms table.ms-formular > tbody > tr > td:first-child {
        width: 160px !important;
    }
    .ms .ms-adressen {
        grid-template-columns: 1fr;
    }
    .ms .ms-adressen > :nth-child(-n+3) {
        border-top: 1px solid var(--ms-rand-leicht);
    }
}

/* Benutzerverwaltung (List_Users, Edit_User, Invite_User) ----------------------------------- */

/* Karte ohne Reiter: Filter, Kontodaten, Einladung */
.ms .ms-karte {
    margin: 0 0 14px 0;
    padding: 14px 24px;
    border: 1px solid var(--ms-rand);
    border-radius: var(--ms-radius);
    background: #fff;
    box-shadow: 0 1px 2px rgba(15, 23, 42, .04);
}

.ms .ms-karte p {
    margin: 10px 0;
    color: var(--ms-text-2);
    line-height: 1.55;
}

.ms .ms-karte > div > p:first-child {
    margin-top: 6px;
}

.ms .ms-karte input[type=submit]:not(.ms-knopf),
.ms .akkordeon-inhalt input[type=submit]:not(.ms-knopf):not([style*="display"]),
.ms .akkordeon-inhalt input[type=button]:not(.ms-knopf) {
    height: 24px;
    padding: 0 14px;
    border: 1px solid var(--ms-rand);
    border-radius: 8px;
    background: #fff;
    color: var(--ms-text-2);
    font-family: inherit;
    font-weight: 600;
    font-size: 13px;
    cursor: pointer;
}

.ms .akkordeon-inhalt input[type=submit]:not(.ms-knopf):hover,
.ms .akkordeon-inhalt input[type=button]:not(.ms-knopf):hover {
    background: var(--ms-flaeche);
    border-color: #cbd5e1;
}

.ms .ms-knopf:disabled {
    opacity: .5;
    cursor: not-allowed;
}

/* Kleingedrucktes unter Filter und Listen: (*) und (**) */
.ms .ms-fussnote {
    margin: 10px 0 0 0;
    color: var(--ms-leise);
    font-size: 12px;
    line-height: 1.5;
}

/* Rückmeldung nach dem Speichern (Edit_User.lblStatus) - nur sichtbar, wenn sie Text trägt */
.ms .ms-status {
    display: block;
    margin: 0 0 14px 0;
    padding: 10px 14px;
    border-radius: 10px;
    background: var(--ms-rot-hell);
    color: var(--ms-rot);
    font-weight: 600;
}

.ms .ms-status:empty {
    display: none;
}

/* Benutzerlisten: Spaltenköpfe der Rechte mehrzeilig, zentriert und unten bündig */
.ms table.ms-benutzer th {
    vertical-align: bottom !important;
    height: auto;
    text-transform: none;
    letter-spacing: 0;
    line-height: 1.35;
}

.ms table.ms-benutzer th.userRights {
    text-align: center;
}

.ms table.ms-benutzer td {
    padding-top: 7px;
    padding-bottom: 7px;
}

.ms table.ms-benutzer td img {
    vertical-align: middle;
}

/* Blättern (DataPager) unter den Listen - seit 28.10.2026 wie in List_Data (Tabulator, Styles/rahmen.css, nachgemessen):
   links "Seite [Feld] von N Seiten (M …)", rechts « ‹ Seiten › » als kleine Kästchen, die aktuelle in der Akzentfarbe.
   Die Fußzeile liegt grau hinterlegt unter der Liste wie dort. */
.ms .ms-blaettern {
    display: flex;
    align-items: center;
    margin-top: 8px;
    padding: 5px 10px;
    box-sizing: border-box;
    border: 1px solid var(--ms-rand);
    border-radius: 10px;
    background: var(--ms-flaeche);
}

.ms .ms-blaettern > span {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    width: 100%;
    font-size: 0;
}

/* Direkt unter der Liste wie die Fußzeile in List_Data: ein gemeinsamer Rahmen, oben gerundet die Liste, unten das
   Blättern. */
.ms .ms-liste-bereich:has(+ .ms-blaettern) {
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
}

.ms .ms-liste-bereich + .ms-blaettern {
    margin-top: 0;
    border-top: none;
    border-top-left-radius: 0;
    border-top-right-radius: 0;
}

.ms .ms-blaettern .ms-seiteninfo {
    margin-right: auto;
    color: #555;
    font-size: 13.5px;
    font-weight: 400;
}

.ms .ms-blaettern input.ms-seitenfeld {
    width: 5em;
    height: auto;
    margin: 0 2px;
    padding: 1px 3px;
    border: 1px solid #c8c8c8;
    border-radius: 3px;
    font: inherit;
    text-align: right;
}

.ms .ms-blaettern .ms-seitenknopf {
    display: none !important;
}

.ms .ms-blaettern > span > a,
.ms .ms-blaettern > span > span:not(.ms-seiteninfo) {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    min-width: 19px;
    height: 21px;
    margin: 0 2px;
    padding: 2px 5px;
    border: 1px solid #aaa;
    border-radius: 6px;
    background: rgba(255, 255, 255, .2);
    color: #000;
    font-size: 13.3333px;
    font-weight: 400;
    line-height: 1;
    text-decoration: none;
}

.ms .ms-blaettern > span > a:hover {
    background: var(--ms-akzent-hell);
}

.ms .ms-blaettern > span > span:not(.ms-seiteninfo) {
    background: var(--ms-akzent);
    border-color: var(--ms-akzent);
    color: var(--ms-akzent-text);
}

.ms .ms-blaettern > span > a.aspNetDisabled {
    opacity: .3;
    pointer-events: none;
}

/* Akkordeon (Scripts/akkordeon.js) als Folge ruhiger Karten; der Pfeil ersetzt das Plus/Minus-Bild */
.ms .akkordeon-abschnitt {
    margin: 0 0 8px 0;
    border: 1px solid var(--ms-rand);
    border-radius: 10px;
    background: #fff;
    overflow: hidden;
}

.ms .akkordeon-kopf.accordionHeader,
.ms .akkordeon-kopf.accordionHeaderSelected {
    position: relative;
    margin: 0;
    padding: 12px 16px 12px 40px;
    border: none;
    background: #fff none;
    font-weight: 600;
    transition: background-color .15s;
}

.ms .akkordeon-kopf.accordionHeader:hover {
    background: var(--ms-flaeche);
}

.ms .akkordeon-kopf.accordionHeaderSelected {
    background: var(--ms-akzent-hell);
    border-bottom: 1px solid var(--ms-rand);
}

.ms .akkordeon-kopf::before {
    content: "";
    position: absolute;
    left: 18px;
    top: 50%;
    width: 7px;
    height: 7px;
    border-right: 2px solid var(--ms-leise);
    border-bottom: 2px solid var(--ms-leise);
    transform: translateY(-50%) rotate(-45deg);
    transition: transform .15s;
}

.ms .akkordeon-kopf.accordionHeaderSelected::before {
    border-color: var(--ms-akzent);
    transform: translateY(-75%) rotate(45deg);
}

.ms .akkordeon-kopf .accordionLink:link,
.ms .akkordeon-kopf .accordionLink:visited,
.ms .akkordeon-kopf .accordionLink:hover {
    color: var(--ms-text);
    font-weight: 600;
}

.ms .akkordeon-kopf.accordionHeaderSelected .accordionLink {
    color: var(--ms-akzent-schrift) !important;
}

.ms .akkordeon-inhalt.accordionContent {
    padding: 8px 22px 14px 22px;
    border: none;
}

/* Eingabefeld mit "Bearbeiten"-Knopf daneben (FFH-Monitoring) */
.ms input.ms-mit-knopf {
    width: calc(100% - 118px);
    margin-right: 6px;
}
/* Die Listen tragen aus alter Zeit feste <col width>; im schmaleren Inhaltsbereich neben der Reiterleiste
   erzwangen sie einen waagerechten Bildlauf. Die Breiten ergeben sich jetzt aus dem Inhalt. */
.ms table.ms-benutzer col {
    width: auto;
}

/* Benutzerlisten neben der Reiterleiste: knapper, damit auch die Rechtespalten ohne waagerechten Bildlauf passen */
.ms .ms-benutzer-reiter .reiter-seite {
    padding: 0;      /* die Liste füllt den Reiter ganz (Augustin, 28.10.2026) */
}

.ms table.ms-benutzer th,
.ms table.ms-benutzer td {
    padding-left: 8px;
    padding-right: 8px;
}

.ms table.ms-benutzer th {
    font-size: 11.5px;
}

/* Benutzerlisten: die Liste füllt den Reiter und hat ihren eigenen Bildlauf, das Blättern steht fest darunter und ist
   immer zu sehen (28.10.2026, Augustin). Der Rahmen sitzt am Bildlaufbereich, nicht an der Tabelle - sonst liefe er
   mit; die Spaltenköpfe bleiben beim Rollen oben stehen. reiter.js blendet die Seiten über style.display ein und
   aus (leer = sichtbar), deshalb gilt flex hier aus dem Stylesheet. */
.ms .ms-benutzer-reiter .reiter-seite,
.ms .ms-listenkarte {
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.ms .ms-liste-bereich {
    flex: 1 1 auto;
    min-height: 0;
    overflow: auto;
    border: 1px solid var(--ms-rand);
    border-radius: 10px;
}

.ms .ms-liste-bereich > table.ms-tabelle {
    border: none;
    border-radius: 0;
    overflow: visible;
}

.ms .ms-liste-bereich > table.ms-tabelle th {
    position: sticky;
    top: 0;
    z-index: 1;
}

.ms .ms-benutzer-reiter .ms-blaettern,
.ms .ms-listenkarte .ms-blaettern {
    flex: none;
}

/* Listen ohne Reiter (List_Cloud, List_Computers, 28.10.2026): die Karte reicht bis unten (hoeheBisUnten), darin
   rollt nur die Liste, das Blättern steht fest darunter. */
.ms .ms-listenkarte {
    box-sizing: border-box;
    margin-bottom: 0;
    padding: 0;      /* die Liste füllt die Karte ganz */
}

/* Die Liste füllt Reiter bzw. Karte ohne Rand ringsum (Augustin, 28.10.2026): Rahmen und Rundung trägt der Reiter
   bzw. die Karte, die Liste selbst und das Blättern darunter haben keinen eigenen Rahmen mehr - nur eine Linie
   zwischen beiden. */
.ms .ms-benutzer-reiter .ms-liste-bereich,
.ms .ms-listenkarte .ms-liste-bereich {
    border: none;
    border-radius: 0;
}

.ms .ms-benutzer-reiter .ms-blaettern,
.ms .ms-listenkarte .ms-blaettern {
    margin: 0;
    border: none;
    border-top: 1px solid var(--ms-rand);
    border-radius: 0;
}

/* Kopfzeile in allen zwölf Listen der Benutzerverwaltung gleich hoch - ausgelegt auf die vierzeiligen Köpfe der
   Rechte im Cloud-Portal (bei 1920 px gemessen); sonst sprang die Liste beim Reiterwechsel (Augustin, 28.10.2026). Die Köpfe stehen unten bündig. */
.ms .ms-benutzer-reiter table.ms-benutzer tr:first-child > th {
    height: 64px;      /* + 2 × 10 px Innenabstand = 84 px; ohne border-box, sonst schrumpfen die festen Spaltenbreiten */
}

.ms .ms-kopf-anzahl {
    color: var(--ms-leise);
    font-size: 13px;
    font-weight: 600;
    white-space: nowrap;
}

/* Benutzerverwaltung: In allen zwölf Listen stehen vorn Status und Anzeigename, hinten Bearbeiten und Löschen. Mit
   fester Breite springen diese Spalten beim Reiterwechsel nicht mehr (Augustin, 28.10.2026); die Spalten dazwischen
   teilen sich den Rest. Breiten ohne Innenabstand (8 px je Seite). */
.ms .ms-benutzer-reiter table.ms-benutzer {
    table-layout: fixed;
}

/* Symbolspalten in allen Listen dieser Art gleich breit (Augustin, 28.10.2026): vorn Status (und Sync) 40 px, hinten
   die Aktionen 30 px (.ms-symbolknopf) - Benutzerverwaltung, Computerverwaltung, Alle Clouds. */
.ms table.ms-benutzer th:first-child {
    width: 90px;      /* Statusmarke "deaktiviert" / "nicht aktiv" */
}

.ms table.ms-benutzer th.ms-spalte-symbol {
    width: 40px;
}

.ms table.ms-benutzer th.ms-spalte-aktion,
.ms table.ms-benutzer td.ms-spalte-aktion {
    width: 30px;
    text-align: center;
}

/* Kopf der schmalen ersten Spalte (Status) mittig über dem Symbol - in allen Listen dieser Art; die Seiten setzen
   ihn teils links im style-Attribut, deshalb !important (Augustin, 28.10.2026). */
.ms table.ms-benutzer th:first-child {
    text-align: center !important;
}

.ms .ms-benutzer-reiter table.ms-benutzer th:nth-child(2) {
    width: 220px;
}

.ms .ms-benutzer-reiter table.ms-benutzer th:nth-last-child(-n+2) {
    width: 30px;      /* .ms-symbolknopf */
}

.ms .ms-benutzer-reiter table.ms-benutzer td {
    overflow-wrap: anywhere;
}

/* Rechte-Listen (Haken, Verknüpfungssymbol): alle Rechtespalten gleich breit, in jeder Liste (Augustin, 28.10.2026).
   Den Rest nimmt eine leere Spalte vor Bearbeiten und Löschen (List_Users.aspx, ms-spalte-rest) - bei weniger
   Spalten liegt der freie Platz dort. Zuerst nahm ihn die Bearbeiten-Spalte selbst; war keiner übrig, schrumpfte sie
   auf null und die beiden Knöpfe lagen übereinander. 90 px, damit acht Spalten auch bei 1350 px Breite passen.
   Nur Listen mit Kästchen; die FFH-Liste mit Art-, LRT- und Jahreslisten bleibt bei geteilter Breite. */
.ms .ms-benutzer-reiter table.ms-benutzer:has(td input[type=checkbox]) tr:first-child > th.userRights {
    width: 90px;
}

.ms .ms-benutzer-reiter table.ms-benutzer tr:first-child > th.ms-spalte-rest {
    width: auto;
}

/* E-Mail in der Benutzerliste (28.10.2026, Augustin): einzeilig mit "…" statt Umbruch, daneben ein Kopierknopf, der beim
   Überfahren der Zeile erscheint (per Tastatur beim Fokus). Nach dem Kopieren kurz grün. */
.ms .ms-kopierzeile {
    display: flex;
    align-items: center;
    gap: 4px;
    min-width: 0;
}

.ms .ms-kopiertext {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow-wrap: normal;
}

.ms .ms-kopierknopf {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    padding: 0;
    border: 1px solid transparent;
    border-radius: 6px;
    background: transparent;
    color: var(--ms-leise);
    cursor: pointer;
    opacity: 0;
    transition: opacity .15s, background-color .15s, color .15s;
}

.ms tr:hover .ms-kopierknopf,
.ms .ms-kopierknopf:focus-visible,
.ms .ms-kopierknopf.ms-kopiert {
    opacity: 1;
}

.ms .ms-kopierknopf:hover {
    background: var(--ms-flaeche);
    border-color: var(--ms-rand);
    color: var(--ms-akzent-schrift);
}

.ms .ms-kopierknopf.ms-kopiert {
    color: var(--ms-gruen);
}

/* Anmeldung (Login.aspx) - 27.10.2026 ------------------------------------------------------- */

.ms.ms-anmeldung {
    display: flex;
    justify-content: center;
    padding: 40px 16px 24px 16px;
}

.ms .ms-anmelde-karte {
    box-sizing: border-box;
    width: 100%;
    max-width: 420px;
    padding: 28px 32px 22px 32px;
    border: 1px solid var(--ms-rand);
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 10px 30px rgba(15, 23, 42, .08);
}

.ms .ms-anmelde-karte .ms-kopf-symbol {
    margin: 0 0 14px 0;
}

.ms .ms-anmelde-karte .ms-untertitel {
    margin: 4px 0 18px 0;
    line-height: 1.5;
}

.ms .ms-feldname {
    display: block;
    margin: 0 0 4px 0;
    color: var(--ms-text-2);
    font-size: 12.5px;
    font-weight: 600;
    cursor: default;
}

/* Hier steht ein einzelnes Formular im Blick - die Felder dürfen größer sein als in den Listen */
.ms .ms-anmelde-karte input[type=text],
.ms .ms-anmelde-karte input[type=password] {
    width: 100%;
    height: 34px;
    margin: 0 0 14px 0;
    padding: 0 10px;
    line-height: 32px;
    font-size: 14px;
}

.ms .ms-pruefung-text {
    display: block;
    margin: -8px 0 10px 0;
    color: var(--ms-rot);
    font-size: 12.5px;
}

.ms input[type=submit].ms-knopf-breit {
    justify-content: center;
    width: 100%;
    height: 36px;
    margin-top: 4px;
    font-size: 14px;
}

.ms .ms-anmelde-fuss {
    margin: 14px 0 0 0;
    text-align: center;
    font-size: 12.5px;
}

.ms .ms-anmelde-fuss a:link,
.ms .ms-anmelde-fuss a:visited {
    color: var(--ms-akzent-schrift);
    text-decoration: none;
}

.ms .ms-anmelde-fuss a:hover {
    text-decoration: underline;
}

/* Neutraler Hinweis (Login.aspx.vb, Hinweiskasten) - Text mit <br/> und Links, deshalb kein Flex wie .ms-hinweisbox */
.ms .ms-hinweis {
    margin: 0 0 14px 0;
    padding: 12px 14px;
    border-radius: 10px;
    background: var(--ms-akzent-hell);
    color: var(--ms-text);
    font-size: 13px;
    line-height: 1.5;
}

/* Cloud-Auswahl nach der Anmeldung (Login.aspx.vb) */
.ms .ms-cloud-liste {
    display: block;
}

.ms .ms-cloud-wahl {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin: 0 0 8px 0;
    padding: 11px 14px;
    border: 1px solid var(--ms-rand);
    border-radius: 10px;
    background: #fff;
    color: var(--ms-text);
    font-weight: 600;
    text-decoration: none;
    transition: border-color .15s, background-color .15s;
}

.ms a.ms-cloud-wahl::after {
    content: "";
    flex: none;
    width: 7px;
    height: 7px;
    border-top: 2px solid var(--ms-leise);
    border-right: 2px solid var(--ms-leise);
    transform: rotate(45deg);
}

.ms a.ms-cloud-wahl:hover {
    border-color: var(--ms-akzent);
    background: var(--ms-akzent-hell);
    color: var(--ms-akzent-schrift);
}

.ms .ms-cloud-gesperrt {
    color: var(--ms-leise);
    font-weight: 400;
    background: var(--ms-flaeche);
}

.ms .ms-cloud-gesperrt small {
    font-size: 12px;
    text-align: right;
}

/* Link als Hauptknopf (Register.aspx: "Zum MultiBaseCS-Benutzerkonto") */
.ms a.ms-knopf-primaer,
.ms a.ms-knopf-primaer:link,
.ms a.ms-knopf-primaer:visited {
    background: var(--ms-akzent);
    border-color: var(--ms-akzent);
    color: var(--ms-akzent-text);
}

.ms a.ms-knopf-primaer:hover {
    background: var(--ms-akzent-dunkel);
    border-color: var(--ms-akzent-dunkel);
}

/* Pakete (Packages.aspx) - 27.10.2026 ------------------------------------------------------- */

.ms .ms-pakete {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 16px;
    align-items: stretch;
}

.ms .ms-paket {
    display: flex;
    flex-direction: column;
    padding: 20px 22px;
    border: 1px solid var(--ms-rand);
    border-radius: var(--ms-radius);
    background: #fff;
    box-shadow: 0 1px 2px rgba(15, 23, 42, .04);
}

.ms .ms-paket-hervor {
    border-color: var(--ms-akzent);
    box-shadow: 0 0 0 1px var(--ms-akzent), 0 8px 24px rgba(15, 23, 42, .08);
}

.ms .ms-paket-name {
    color: var(--ms-text);
    font-size: 15px;
    font-weight: 600;
}

.ms .ms-paket-preis {
    margin: 8px 0 2px 0;
    color: var(--ms-akzent-schrift);
    font-size: 24px;
    font-weight: 700;
    line-height: 1.2;
}

.ms .ms-paket-preis span {
    color: var(--ms-leise);
    font-size: 13px;
    font-weight: 400;
}

.ms .ms-paket-fuer {
    margin: 0 0 12px 0;
    padding: 0 0 12px 0;
    border-bottom: 1px solid var(--ms-rand-leicht);
    color: var(--ms-leise);
    font-size: 13px;
}

.ms .ms-paket ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

.ms .ms-paket li {
    position: relative;
    margin: 0 0 7px 0;
    padding-left: 22px;
    color: var(--ms-text-2);
    font-size: 13px;
    line-height: 1.45;
}

.ms .ms-paket li::before {
    content: "";
    position: absolute;
    left: 3px;
    top: 4px;
    width: 9px;
    height: 5px;
    border-left: 2px solid var(--ms-akzent);
    border-bottom: 2px solid var(--ms-akzent);
    transform: rotate(-45deg);
}

.ms .ms-verweise {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 24px;
}

.ms .ms-verweise a:link,
.ms .ms-verweise a:visited {
    color: var(--ms-akzent-schrift);
    font-weight: 600;
    text-decoration: none;
}

.ms .ms-verweise a:hover {
    text-decoration: underline;
}

/* Bildkacheln (28.10.2026, Augustin): Logos und Bildwechsel-Bilder in den Cloud-Einstellungen nebeneinander statt
   einer Zeile je Bild, Löschknopf in der oberen rechten Ecke, das verwendete Logo mit Akzentrahmen und Marke.
   Bilder stehen vollständig in der Kachel (contain) - Logos haben jedes Seitenverhältnis. */
.ms .ms-bildkacheln {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.ms .ms-bildkachel {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 150px;
    height: 90px;
    padding: 6px;
    box-sizing: border-box;
    border: 1px solid var(--ms-rand);
    border-radius: 8px;
    background: var(--ms-flaeche);
    overflow: hidden;
}

.ms .ms-bildkacheln-breit .ms-bildkachel {
    width: 200px;
    height: 100px;
    padding: 0;
}

.ms .ms-bildkachel.ms-aktiv {
    border-color: var(--ms-akzent);
    box-shadow: 0 0 0 2px var(--ms-akzent-ring);
}

.ms .ms-bildkachel-wahl {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    cursor: pointer;
}

.ms .ms-bildkachel-bild {
    display: block;
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.ms .ms-bildkacheln-breit .ms-bildkachel-bild {
    width: 100%;
    height: 100%;
}

.ms .ms-bildkachel .ms-bildkachel-loeschen {
    position: absolute;
    top: 4px;
    right: 4px;
    width: 26px;
    height: 26px;
    background: rgba(255, 255, 255, .92);
    border-color: var(--ms-rand);
}

.ms .ms-bildkachel .ms-bildkachel-marke {
    position: absolute;
    left: 4px;
    bottom: 4px;
    height: 18px;
    padding: 0 7px;
    font-size: 11px;
}