/* Rahmen aller Seiten (Site.master, body.rahmen) - 27.10.2026.
   Kopf, Menü und Inhaltsfläche im Erscheinungsbild der Einstellungsseiten (Styles/einstellungen.css).
   Steuerelemente, IDs und Abläufe der Masterseite bleiben dieselben; Site.Master.vb setzt weiterhin die
   Kundenfarben als Inline-Stil (Kopf, Kopfschrift, Seitenhintergrund, Menübereich) - die wirken über diesen
   Regeln. Die Farben der Menüpunkte kommen als Variablen aus clsCloud.GetCloudStyleItems (--menu-*), aber nur,
   wenn die Cloud sie gesetzt hat; sonst gelten die Vorgaben hier.
   Logo: Höhe fest 44 px, Breite aus dem Seitenverhältnis - Site.Master.vb rechnet die Breite noch für 60 px aus.
----------------------------------------------------------*/

body.rahmen {
    background: #eef2f6;
    font-family: "Segoe UI", system-ui, -apple-system, Roboto, Arial, sans-serif;
}

.rahmen .page {
    width: auto !important;
    min-width: 960px;
    margin: 0;
    border: none;
    background: transparent;
}

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

.rahmen .header {
    display: flex;
    align-items: center;
    gap: 20px;
    box-sizing: border-box;
    height: 70px;      /* 28.10.2026 (Augustin): 64 war zu knapp - oben 2 px, unten 4 px mehr, siehe .loginDisplay */
    padding: 0 20px 0 16px;
    background: #1e3a5f;
    box-shadow: 0 1px 3px rgba(15, 23, 42, .18);
}

.rahmen .header .title {
    float: none;
    display: flex;
    align-items: center;
    gap: 14px;
    flex: 1;
    min-width: 0;
}

.rahmen #divLogo {
    width: auto !important;
    margin: 0 !important;
    flex: none;
    display: flex;
    align-items: center;
}

.rahmen #imgHeader {
    display: block;
    height: 44px !important;
    width: auto !important;
    max-width: 260px;
}

.rahmen #divTitle {
    margin: 0 !important;
    min-width: 0;
}

/* Kopftext: Kunden setzen darin auch <br /> und <font size> für eine zweite Zeile */
.rahmen .header h1 {
    margin: 0;
    padding: 0;
    font-size: 19px;
    font-weight: 600;
    font-variant: normal;
    line-height: 1.25;
    letter-spacing: 0;
    overflow: hidden;
    max-height: 48px;
}

.rahmen .header h1 font[size="2"] {
    font-size: 13px;
    font-weight: 400;
    opacity: .9;
}

.rahmen .loginDisplay {
    flex: none;
    height: auto;
    padding: 0 0 2px 0;      /* mit der Kopfhöhe 70: oben 2 px, unten 4 px mehr Luft als vorher */
    font-size: 12.5px;
    line-height: 1.5;
    text-align: right;
}

.rahmen .loginDisplay a {
    /* Flex mit fester Höhe: als inline-block lag der Text durch die Zeilenhöhe des Kopfes zu tief (saß unter der Mitte). Segoe UI hat unter der Grundlinie mehr Raum als über den Versalien - rechnerisch
       mittig wirkt die Schrift deshalb tief; 3 px Abstand unten gleichen das aus (im Browser verglichen). */
    display: inline-flex;
    align-items: center;
    box-sizing: border-box;
    height: 20px;
    margin: 3px 0 0 6px;
    padding: 0 9px 3px 9px;
    line-height: 1;
    vertical-align: middle;
    border-radius: 6px;
    background: color-mix(in srgb, currentColor 14%, transparent);
    font-size: 12px;
    font-weight: 600;
    text-decoration: none;
    transition: background-color .15s;
}

.rahmen .loginDisplay a:hover {
    background: color-mix(in srgb, currentColor 24%, transparent);
}


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

.rahmen div.menuLeft ul li a,
.rahmen div.menuLeft ul li a:visited {
    display: flex;
    align-items: center;
    gap: 9px;
    box-sizing: border-box;
    width: 100%;
    margin: 0 0 2px 0;
    padding: 7px 9px;
    border: none;
    border-radius: 8px;
    background-color: var(--menu-punkt, transparent);
    color: var(--menu-punkt-text, #334155);
    font-size: 13px;
    line-height: 1.3;
    text-decoration: none;
    white-space: normal;      /* lange Einträge brechen um statt abgeschnitten zu werden (28.10.2026) */
    transition: background-color .15s, color .15s;
}

/* Die Liste des asp:Menu ist aus alter Zeit "float: left; width: auto" und wuchs mit dem längsten Eintrag über
   das Menü hinaus - "Impressum / Datenschutzerklärung" wurde rechts abgeschnitten (Augustin, 28.10.2026). */
.rahmen div.menuLeft > ul {
    float: none !important;
    width: 100% !important;
}

.rahmen div.menuLeft ul li a:hover {
    background-color: var(--menu-punkt-hover, rgba(15, 23, 42, .07));
    color: var(--menu-punkt-hover-text, #0f172a);
}

.rahmen div.menuLeft ul li a.menue-aktiv {
    background-color: var(--menu-punkt-hover, #ffffff);
    color: var(--menu-punkt-hover-text, var(--cloud-akzent-schrift, #2563eb));
    font-weight: 600;
    box-shadow: 0 1px 2px rgba(15, 23, 42, .08), inset 3px 0 0 var(--cloud-akzent, #2563eb);
}

.rahmen div.menuLeft ul li a img.icon {
    flex: none;
    width: 20px;
    height: 20px;
}

/* Der Text steht aus alter Zeit per Inline-Stil um 30 px versetzt neben dem Symbol (Site.Master.vb) */
.rahmen div.menuLeft ul li a span {
    position: static !important;
    min-width: 0;
    overflow-wrap: anywhere;
}

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

.rahmen #divMainLeft {
    margin: 14px 0 0 12px !important;
}

.rahmen #divMainRight {
    margin-top: 14px;
    height: calc(100% - 14px) !important;
    padding: 6px 22px 12px 22px !important;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    box-shadow: 0 1px 3px rgba(15, 23, 42, .06);
}

/* Menüeinträge ohne die frühere feste Größe (bis 27.10.2026 .level1 { height: 24px; width: 230px; }) */
.rahmen .level1 {
    height: auto;
    width: auto;
}

/* =========================================================================================
   Schicht 2 (27.10.2026): gemeinsame Bausteine aller Seiten im neuen Erscheinungsbild -
   Panels, Felder, Knöpfe, Reiter, Akkordeon, Dialoge, Listen. Nur Aussehen: Höhen der Zeilen
   und Felder bleiben nahe am Bisherigen, damit Seiten mit fester Höhe (rahmenhoehe.js,
   tabelle.js) nicht anders umbrechen. Die neu gebauten Seiten (.ms, Styles/einstellungen.css)
   werden danach geladen und behalten ihre eigenen Regeln.
   Kundenfarben der Panels kommen als --panel-* aus clsCloud.GetCloudStyleItems (nur wenn gesetzt).
   ========================================================================================= */

body.rahmen {
    --r-akzent: var(--cloud-akzent, #2563eb);
    --r-akzent-text: var(--cloud-akzent-text, #ffffff);
    --r-akzent-schrift: var(--cloud-akzent-schrift, #2563eb);
    --r-akzent-hell: color-mix(in srgb, var(--r-akzent) 9%, #fff);
    --r-ring: color-mix(in srgb, var(--r-akzent) 25%, transparent);
    --r-text: #334155;
    --r-text-stark: #0f172a;
    --r-leise: #64748b;
    --r-rand: #e2e8f0;
    --r-rand-leicht: #eef2f7;
    --r-feldrand: #cbd5e1;
    --r-flaeche: #f8fafc;
}

.rahmen #divMainRight {
    color: var(--r-text);
}

:where(.rahmen #divMainRight) a:link,
:where(.rahmen #divMainRight) a:visited {
    color: var(--r-akzent-schrift);
}

:where(.rahmen #divMainRight) h1,
:where(.rahmen #divMainRight) h2,
:where(.rahmen #divMainRight) h3,
:where(.rahmen #divMainRight) h4 {
    font-variant: normal;
    font-weight: 600;
    color: var(--r-text-stark);
}

/* Panels: Kopfzeile und Rahmen darunter bilden eine Karte ---------------------------------- */

.rahmen div.panelHeader {
    border: 1px solid var(--panel-rand, var(--r-rand));
    border-bottom: none;
    border-radius: 10px 10px 0 0;
    background: var(--panel-kopf, var(--r-flaeche));
    /* Kein overflow: hidden - im Kopf klappen Menüs auf (List_Data: Download), die sonst abgeschnitten wären.
       Die Zellen sind durchsichtig, die Rundung trägt der Kopf selbst. */
}

.rahmen td.panelHeaderTableCellImage,
.rahmen td.panelHeaderTableCellText,
.rahmen td.panelHeaderTableCellTextLower,
.rahmen td.panelHeaderTableCellButtons {
    height: 28px;
    padding-top: 0;
    padding-bottom: 0;
    background-color: transparent;
    vertical-align: middle;
}

.rahmen td.panelHeaderTableCellImage {
    padding-left: 10px;
}

.rahmen td.panelHeaderTableCellText,
.rahmen td.panelHeaderTableCellTextLower {
    font-size: 14.5px;
    font-weight: 600;
    color: var(--panel-kopf-text, var(--r-text-stark));
}

/* Anzahl und Filterstatus hinter dem Titel (clsFunction.KopfAnzahl, 28.10.2026 - Augustin: kleiner als der Kopf, nicht
   fett). Ersetzt die Zeile "Filter gesetzt, x Beobachtungen" unter dem Kopf in Karten, List_Data, List_Orte und Tree_Orte. */
.rahmen .kopf-anzahl {
    margin-left: 10px;
    font-size: 12.5px;
    font-weight: 400;
    opacity: .8;
    white-space: nowrap;
}

.rahmen td.panelHeaderTableCellButtons {
    padding-right: 4px;
}

/* Die Symbolknöpfe tragen im Code feste 16 x 16 px und Site.css setzt box-sizing: border-box - ein Innenabstand
   würde das Bild stauchen. Die Hover-Fläche ist deshalb ein Schatten, der nichts verschiebt. */
.rahmen td.panelHeaderTableCellButtons input[type=image] {
    border-radius: 3px;
    transition: background-color .15s, box-shadow .15s;
}

.rahmen td.panelHeaderTableCellButtons input[type=image]:not(:disabled):hover {
    background-color: rgba(15, 23, 42, .08);
    box-shadow: 0 0 0 4px rgba(15, 23, 42, .08);
}

.rahmen div.panelContent {
    border: 1px solid var(--panel-rand, var(--r-rand));
    border-radius: 10px;
    background-color: #fff;
}

.rahmen div.panelHeader + div.panelContent {
    border-radius: 0 0 10px 10px;
}

/* Felder ------------------------------------------------------------------------------------
   Einheitlich 22 px hoch, Knöpfe 24 px (27.10.2026). Maßstab ist die zentrale Eingabe (Edit_Data):
   rund 25-30 Feldzeilen in Tabellen ohne eigenen Zellabstand, die auf eine Seite passen müssen.
   Gemessen: bisher Feld 21 px / Zeile 23-25 px; mit 3 px Innenabstand wären es 25 bzw. 31 px
   geworden - bei 30 Zeilen 150-180 px mehr. Mit 22 px ist es 1 px je Zeile. Höhen aus dem Code
   (Inline-Stil) gehen weiterhin vor. */

.rahmen input[type=text],
.rahmen input[type=password],
.rahmen input[type=email],
.rahmen input[type=number],
.rahmen input[type=search],
.rahmen input[type=date],
.rahmen input:not([type]),
.rahmen select,
.rahmen textarea {
    height: 22px;
    padding: 0 6px;
    line-height: 20px;
    border: 1px solid var(--r-feldrand);
    border-radius: 5px;
    background-color: #fff;
    color: var(--r-text-stark);
    font-family: inherit;
    font-size: 13px;
    transition: border-color .15s, box-shadow .15s;
}

.rahmen textarea {
    height: auto;
    padding: 2px 6px;
    line-height: 1.4;
}

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

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

.rahmen input[type=text]:read-only,
.rahmen input:not([type]):read-only,
.rahmen textarea:read-only {
    background-color: var(--r-flaeche);
    color: var(--r-leise);
}

.rahmen select:disabled {
    background-color: var(--r-flaeche);
}

/* Abstand zwischen den Feldern überall 4 px, untereinander wie nebeneinander (Augustin, 28.10.2026). Vorher
   2 px aus dem Innenabstand, den der Browser jeder Zelle gibt (1 px). Gilt für Zellen, die ein Feld direkt
   enthalten - die Feldzeilen der Eingabe, Biber, Fischkataster und Ort entstehen so im Code (clsFunction,
   GetTableRow_*). Eine Zeile wird damit 26 statt 24 px hoch, die Eingabe bei rund 25 Zeilen etwa 50 px. */
.rahmen div.panelContent td:has(> input[type=text], > input[type=password], > input[type=number],
                                > input[type=date], > input:not([type]), > select, > textarea) {
    padding: 2px;
}

.rahmen input[type=checkbox],
.rahmen input[type=radio] {
    accent-color: var(--r-akzent);
}

/* Merkmale aus Site.css, die die Felder oben sonst überdecken würden */
.rahmen input.preserve,
.rahmen select.preserve,
.rahmen textarea.preserve {
    border-color: #f59e0b;
}

.rahmen input.required,
.rahmen select.required,
.rahmen textarea.required {
    background-color: #e0edff;
}

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

.rahmen input[type=submit]:not(.ms-knopf),
.rahmen input[type=button]:not(.ms-knopf),
.rahmen input[type=reset] {
    height: 24px;
    padding: 0 12px;
    border: 1px solid var(--r-feldrand);
    border-radius: 5px;
    background: #fff;
    color: var(--r-text);
    font-family: inherit;
    font-size: 12.5px;
    font-weight: 600;
    cursor: pointer;
    transition: background-color .15s, border-color .15s;
}

.rahmen input[type=submit]:not(.ms-knopf):hover,
.rahmen input[type=button]:not(.ms-knopf):hover,
.rahmen input[type=reset]:hover {
    background: var(--r-flaeche);
    border-color: #94a3b8;
}

.rahmen input[type=submit]:not(.ms-knopf):active,
.rahmen input[type=button]:not(.ms-knopf):active {
    background: var(--r-akzent-hell);
}

.rahmen input[type=submit]:disabled,
.rahmen input[type=button]:disabled {
    opacity: .5;
    cursor: not-allowed;
}

/* Fokus wie bei den Feldern: Ring in der Akzentfarbe statt des schwarzen Browserrahmens (Augustin, 28.10.2026 -
   "zurück" in Show_Map_Biber sah sonst wie ein eigener Knopfstil aus). Nur bei Tastaturbedienung sichtbar. */
.rahmen input[type=submit]:focus,
.rahmen input[type=button]:focus,
.rahmen input[type=reset]:focus,
.rahmen button:focus {
    outline: none;
}

.rahmen input[type=submit]:focus-visible,
.rahmen input[type=button]:focus-visible,
.rahmen input[type=reset]:focus-visible,
.rahmen button:focus-visible {
    border-color: var(--r-akzent);
    box-shadow: 0 0 0 3px var(--r-ring);
}

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

.rahmen .reiter-leiste {
    padding-right: 10px;
}

.rahmen .reiter-knopf,
.rahmen .reiter-knopf:link,
.rahmen .reiter-knopf:visited {
    margin: 0 0 2px 0;
    padding: 7px 10px;
    border: none;
    border-radius: 8px;
    background: none;
    color: var(--r-text);
    font-family: inherit;
    font-size: 12.5px;
}

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

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

.rahmen .reiter-inhalt {
    border: 1px solid var(--panel-rand, var(--r-rand));
    border-radius: 10px;
    overflow: hidden;
}

.rahmen .reiter-seite {
    padding: 8px 12px;
}

/* Akkordeon (Scripts/akkordeon.js): Abschnitte als Karten, Pfeil statt Plus/Minus-Bild ----- */

.rahmen .akkordeon-abschnitt {
    margin: 0 0 8px 0;
    border: 1px solid var(--panel-rand, var(--r-rand));
    border-radius: 10px;
    background: #fff;
    overflow: hidden;
}

.rahmen .akkordeon-kopf.accordionHeader,
.rahmen .akkordeon-kopf.accordionHeaderSelected {
    position: relative;
    margin: 0;
    padding: 10px 14px 10px 38px;
    border: none;
    background: var(--panel-kopf, #fff) none;
    font-weight: 600;
}

.rahmen .akkordeon-kopf.accordionHeader:hover {
    background-color: var(--r-flaeche);
}

.rahmen .akkordeon-kopf.accordionHeaderSelected {
    background-color: var(--panel-kopf, var(--r-akzent-hell));
    border-bottom: 1px solid var(--panel-rand, var(--r-rand));
}

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

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

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

.rahmen .akkordeon-inhalt.accordionContent {
    padding: 8px 14px 12px 14px;
    border: none;
}

/* Dialoge (jQuery UI): alle Knöpfe gleich - welcher der wichtigste ist, weiß nur die Seite -- */

body.rahmen .ui-dialog {
    padding: 0;
    border: none;
    border-radius: 12px;
    box-shadow: 0 20px 50px rgba(15, 23, 42, .25);
    overflow: hidden;
    font-family: "Segoe UI", system-ui, -apple-system, Roboto, Arial, sans-serif;
}

body.rahmen .ui-dialog .ui-dialog-titlebar {
    padding: 12px 16px;
    border: none;
    border-bottom: 1px solid var(--r-rand);
    /* Rundung selbst tragen: Seiten mit Autovervollständigung im Dialog stellen dessen overflow auf visible,
       dann schneidet der Dialog Kopf und Knopfleiste nicht mehr ab - die Ecken wurden eckig (27.10.2026). */
    border-radius: 12px 12px 0 0;
    background: var(--panel-kopf, #fff);
    color: var(--panel-kopf-text, var(--r-text-stark));
    font-size: 14.5px;
    font-weight: 600;
}

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

body.rahmen .ui-dialog .ui-dialog-content {
    padding: 14px 16px;
    color: var(--r-text);
}

/* Viele Dialoge fassen ihren Inhalt in <p> - dessen Außenabstand kam oben und unten zum Innenabstand hinzu
   (27.10.2026, Augustin: "zu viel Platz vor Bezeichnung"). */
body.rahmen .ui-dialog .ui-dialog-content > p:first-child {
    margin-top: 0;
}

body.rahmen .ui-dialog .ui-dialog-content > p:last-child {
    margin-bottom: 0;
}

body.rahmen .ui-dialog .ui-dialog-buttonpane {
    margin: 0;
    padding: 8px 12px;
    border-top: 1px solid var(--r-rand);
    border-radius: 0 0 12px 12px;
    background: var(--r-flaeche);
}

body.rahmen .ui-dialog .ui-dialog-buttonpane button {
    padding: 5px 14px;
    border: 1px solid var(--r-feldrand);
    border-radius: 6px;
    background: #fff;
    color: var(--r-text);
    font-family: inherit;
    font-size: 12.5px;
    font-weight: 600;
}

body.rahmen .ui-dialog .ui-dialog-buttonpane button:hover {
    background: #f1f5f9;
}

/* Listen ----------------------------------------------------------------------------------- */

:where(.rahmen #divMainRight) th {
    color: var(--r-leise);
    font-weight: 600;
}

.rahmen td.withbottomborder {
    border-bottom-color: var(--r-rand-leicht);
}

.rahmen tr.tablerow:hover > td {
    background-color: var(--r-flaeche);
}

/* Tabellen über Scripts/tabelle.js (Tabulator): Zeilenhöhen bleiben (26 px), nur Farben und Rahmen */
.rahmen .tabelle-leiste {
    padding: 4px 6px;
    border-color: var(--panel-rand, var(--r-rand));
    border-radius: 10px 10px 0 0;
    background-color: var(--panel-kopf, var(--r-flaeche));
}

.rahmen .tabelle-knopf {
    border-radius: 6px;
}

.rahmen .tabelle-knopf:hover {
    border-color: transparent;
    background-color: rgba(15, 23, 42, .08);
}

.rahmen .tabelle .tabulator {
    border-color: var(--panel-rand, var(--r-rand));
    font-family: inherit;
    font-size: 13.5px;
    color: var(--r-text-stark);
}

.rahmen .tabelle .tabulator .tabulator-header,
.rahmen .tabelle .tabulator .tabulator-header .tabulator-col {
    background-color: var(--r-flaeche);
    color: var(--r-leise);
    font-weight: 600;
}

.rahmen .tabelle .tabulator .tabulator-header {
    border-bottom-color: var(--r-rand);
}

.rahmen .tabelle .tabulator-row {
    border-bottom-color: var(--r-rand-leicht);
}

.rahmen .tabelle .tabulator-row .tabulator-cell,
.rahmen .tabelle .tabulator .tabulator-header .tabulator-col {
    border-right-color: var(--r-rand-leicht);
}

.rahmen .tabelle .tabulator-row.tabulator-row-even {
    background-color: #fbfcfe;
}

.rahmen .tabelle .tabulator-row.tabulator-selectable:hover {
    background-color: var(--r-flaeche);
}

.rahmen .tabelle .tabulator-row.tabulator-selected,
.rahmen .tabelle .tabulator-row.tabulator-selected:hover {
    background-color: var(--r-akzent-hell);
    color: var(--r-text-stark);
    box-shadow: inset 3px 0 0 var(--r-akzent);
}

.rahmen .tabelle .tabulator .tabulator-footer {
    border-top-color: var(--r-rand);
    background-color: var(--r-flaeche);
}

.rahmen .tabelle .tabulator .tabulator-footer .tabulator-page {
    border-radius: 6px;
}

.rahmen .tabelle .tabulator .tabulator-footer .tabulator-page.active {
    background-color: var(--r-akzent);
    border-color: var(--r-akzent);
    color: var(--r-akzent-text);
}

/* Aufklappmenüs ---------------------------------------------------------------------------- */

/* dropit (Scripts/dropit.js) in Panelköpfen, z. B. Download in List_Data */
.rahmen .menu ul.dropit-submenu {
    margin: 6px 0 0 0;
    padding: 6px;
    border: 1px solid var(--r-rand);
    border-radius: 10px;
    box-shadow: 0 10px 30px rgba(15, 23, 42, .14);
}

.rahmen .menu ul.dropit-submenu a {
    padding: 0 10px;
    border-radius: 6px;
    color: var(--r-text);
    font-size: 13px;
    line-height: 30px;
    text-decoration: none;
    white-space: nowrap;
}

.rahmen .menu ul.dropit-submenu a:hover {
    background: var(--r-akzent-hell);
    color: var(--r-akzent-schrift);
}

/* Kontextmenü der Tabellen (Tabulator, hängt am body) */
body.rahmen .tabulator-menu {
    padding: 6px;
    border: 1px solid var(--r-rand);
    border-radius: 10px;
    box-shadow: 0 10px 30px rgba(15, 23, 42, .14);
}

body.rahmen .tabulator-menu .tabulator-menu-item {
    padding: 6px 10px;
    border-radius: 6px;
}

body.rahmen .tabulator-menu .tabulator-menu-item:not(.tabulator-menu-item-disabled):hover {
    background: var(--r-akzent-hell);
    color: var(--r-akzent-schrift);
}

/* Hauptaktion einer Seite (z. B. "Beobachtung speichern" in Edit_Data) in der Akzentfarbe */
.rahmen input[type=submit].knopf-primaer,
.rahmen input[type=button].knopf-primaer {
    border-color: var(--r-akzent);
    background: var(--r-akzent);
    color: var(--r-akzent-text);
}

.rahmen input[type=submit].knopf-primaer:hover,
.rahmen input[type=button].knopf-primaer:hover {
    border-color: color-mix(in srgb, var(--r-akzent) 84%, #000);
    background: color-mix(in srgb, var(--r-akzent) 84%, #000);
}

/* Platz in der Höhe (27.10.2026, gemessen an Edit_Data): Die Leerzeile oben in jeder Inhaltsfläche
   (Site.master, divMainContent) entfällt - die Karte hat ihren eigenen Innenabstand. Die Feldtabellen der
   Eingabeseiten (Edit_Data, Edit_Ort, Edit_Data_Biber) stehen im Code in einem Panel panData_*_Int mit 8 px Rand innerhalb eines
   Panels; der Rand der Tabelle selbst wirkt wegen border-collapse nicht. Hier 4 px oben/unten - gemessen
   endet die Eingabe damit 7 px höher als vor dem neuen Erscheinungsbild. */
.rahmen #divMainContent > br:first-child {
    display: none;
}

.rahmen #divMainRight {
    padding-top: 14px !important;
}

.rahmen div.panelContent > div[id*="panData_"][id$="_Int"] {
    padding: 4px 8px !important;
}

/* Panelköpfe ohne Symbolzelle (Edit_Data: Ort, Artspezifische Angaben) - sonst klebt der Titel am Rand */
.rahmen td.panelHeaderTableCellText:first-child {
    padding-left: 10px;
}

/* Köpfe innerhalb eines Rahmens (Edit_Data_Biber: Details, Beobachtungen, Gefährdungen; Tree_Orte: Ordner rechts)
   sind ein panelContent, dessen Tabelle eine Kopfzelle trägt - sie sehen aus wie die übrigen Köpfe (27.10.2026,
   Augustin). Nur die eigene Tabelle zählt, kein tiefer liegender Rahmen. Rundung 9 px: innen am 1-px-Rand der
   Karte mit 10 px. */
.rahmen div.panelContent > div.panelContent:first-child:has(> table > tbody > tr > td.panelHeaderTableCellTextLower),
.rahmen div.panelContent > div.panelContent:first-child:has(> table > tbody > tr > td.panelHeaderTableCellText) {
    border-radius: 9px 9px 0 0;
    background: var(--panel-kopf, var(--r-flaeche));
}

.rahmen td.panelHeaderTableCellTextLower:first-child {
    padding-left: 10px;
}

/* Ein Kopf ohne Rahmen darunter (Tree_Orte: "Vorhandene Orte ..." steht allein, danach ein <br />) ist rundum
   geschlossen - sonst fehlte ihm die Unterkante (27.10.2026). */
.rahmen div.panelHeader:has(+ br) {
    border-bottom: 1px solid var(--panel-rand, var(--r-rand));
    border-radius: 10px;
}

/* Umschalter Listen-/Baumansicht als Text hinter dem Titel (List_Orte, Tree_Orte - 28.10.2026, Augustin: das
   Symbol rechts allein fanden die Nutzer schlecht). Pille in der Akzentfarbe der Cloud, ruhig bis zum Darüberfahren. */
.rahmen a.ansicht-wechsel {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 20px;
    margin-left: 12px;
    padding: 0 10px 0 7px;
    border: 1px solid color-mix(in srgb, var(--r-akzent) 35%, #fff);
    border-radius: 999px;
    background: var(--r-akzent-hell);
    color: var(--r-akzent-schrift);
    font-size: 12px;
    font-weight: 600;
    line-height: 1;
    text-decoration: none;
    vertical-align: 1px;
    white-space: nowrap;
    transition: background-color .15s, border-color .15s;
}

.rahmen a.ansicht-wechsel:hover {
    border-color: var(--r-akzent);
    background: color-mix(in srgb, var(--r-akzent) 16%, #fff);
}

.rahmen a.ansicht-wechsel img {
    width: 14px;
    height: 14px;
}

/* Zusatzfelder und Ortsdetails als Liste (28.10.2026, Augustin: "schick, modern und klar") - nach Kategorie
   gruppiert, Beschriftung klein über dem Wert; passt auch in die schmale Seitenansicht. Gebaut von List_Data
   (zusatzfelderListe) und Scripts/seitenansicht.js (List_Orte, Tree_Orte). */
.zusatzfelder-liste { padding: 4px 0 6px 0; }
.zusatzfelder-gruppe {
    padding: 10px 12px 4px 12px;
    color: #64748b;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
}
.zusatzfelder-eintrag { padding: 5px 12px 6px 12px; border-top: 1px solid #f1f5f9; }
.zusatzfelder-gruppe + .zusatzfelder-eintrag { border-top: none; }
.zusatzfelder-feld { color: #64748b; font-size: 12px; line-height: 1.35; }
.zusatzfelder-wert {
    color: #0f172a;
    font-size: 13.5px;
    font-weight: 500;
    line-height: 1.4;
    overflow-wrap: anywhere;
}
.zusatzfelder-wert.leer { color: #cbd5e1; font-weight: 400; }
.zusatzfelder-vd {
    display: inline-block;
    margin-left: 6px;
    padding: 0 5px;
    border-radius: 4px;
    background: #f1f5f9;
    color: #64748b;
    font-size: 10.5px;
    font-weight: 600;
    line-height: 16px;
    vertical-align: 1px;
}
.zusatzfelder-keine { padding: 14px 12px; color: #94a3b8; font-size: 12.5px; }

/* Seitenansicht neben den Ortslisten (Scripts/seitenansicht.js): Rahmen rechts, Details mit eigenem Bildlauf. */
.rahmen .seitenansicht { float: right; box-sizing: border-box; }
.rahmen .seitenansicht .seitenansicht-details { overflow-y: auto; }
/* Kopf und Rahmen samt Rand in der Breite der Seitenansicht - mit width:100% und Rand ragten sie 2 px hinaus und
   wurden in Tree_Orte rechts abgeschnitten (28.10.2026). */
.rahmen .seitenansicht > * { box-sizing: border-box; }

/* Einklappbare Bereiche (Scripts/einklappen.js, FFH-Monitoring - 28.10.2026): Kurzfassung im Kopf;
   eingeklappt ist der Kopf rundum geschlossen, weil der Rahmen darunter fehlt. */
.rahmen .einklapp-kurz {
    margin-left: 14px;
    color: var(--r-text-stark);
    font-size: 13px;
    font-weight: 500;
}

/* Keine Symbole vorn in den Panelköpfen (Augustin, 28.10.2026: "generell auf die Icons in den Headern verzichten").
   Die Zellen sind reine Bilder ohne Funktion - im Markup wie im Code gebaut (Edit_Data: Kategoriebild, Edit_Ort,
   Edit_Query, FFH-Dialog); ausgeblendet statt aus 36 Dateien entfernt. Der Titel bekommt dafür den Abstand vorn. */
.rahmen td.panelHeaderTableCellImage {
    display: none;
}

.rahmen td.panelHeaderTableCellImage + td.panelHeaderTableCellText,
.rahmen td.panelHeaderTableCellImage + td.panelHeaderTableCellTextLower {
    padding-left: 10px;
}

/* Ausnahme: der Globus der Ortszuordnung im Kopf "Ort / Koordinaten" der Eingabe - blau Basisort, gold feste
   Zuordnung. Er trägt Information, kein Schmuck, und ist ein bekanntes MultiBaseCS-Zeichen (Augustin, 28.10.2026). */
.rahmen td.panelHeaderTableCellImage.kopf-ortszuordnung {
    display: table-cell;
    width: 16px;
    padding-right: 0;
}

.rahmen td.panelHeaderTableCellImage.kopf-ortszuordnung + td.panelHeaderTableCellText {
    padding-left: 6px;
}

/* Abschnittsüberschriften in Reitern (Site.css: Balken mit Strich links, z. B. Datenbank-Funktionen) in der
   Akzentfarbe statt Orange - wie die Zwischenüberschriften der Einstellungsseiten (28.10.2026). */
.rahmen .reiter-seite h3 {
    border-left-color: var(--r-akzent);
}

/* Kopf als Schaltfläche wie die Akkordeons in Edit_User (28.10.2026, Augustin - statt eines Textlinks): Winkel vorn,
   eingeklappt nach rechts, offen nach unten in der Akzentfarbe. Das Symbol vorn im Kopf ist dafür entfallen. */
.rahmen div.panelHeader.einklappbar {
    cursor: pointer;
    transition: background-color .15s;
}

.rahmen div.panelHeader.einklappbar:hover {
    background-color: color-mix(in srgb, var(--panel-kopf, var(--r-flaeche)) 94%, #0f172a);
}

.rahmen div.panelHeader.einklappbar td.panelHeaderTableCellText:first-child {
    position: relative;
    padding-left: 34px;
}

.rahmen div.panelHeader.einklappbar td.panelHeaderTableCellText:first-child::before {
    content: "";
    position: absolute;
    left: 14px;
    top: 50%;
    width: 7px;
    height: 7px;
    border-right: 2px solid var(--r-akzent);
    border-bottom: 2px solid var(--r-akzent);
    transform: translateY(-75%) rotate(45deg);
    transition: transform .15s;
}

.rahmen div.panelHeader.einklappbar.eingeklappt td.panelHeaderTableCellText:first-child::before {
    border-color: var(--r-leise);
    transform: translateY(-50%) rotate(-45deg);
}

.rahmen div.panelHeader.eingeklappt {
    border-bottom: 1px solid var(--panel-rand, var(--r-rand));
    border-radius: 10px;
}

/* Feldabstand überall wie bei Biber (Augustin, 28.10.2026): Tabellen mit Eingabefeldern ohne eigenen Zellabstand -
   cellspacing="5" (FFH, Listenfilter) kam sonst zu den 4 px aus der Zellregel oben dazu, 9 statt 4 px. Die
   Filterliste in Edit_Query hat ihren eigenen Aufbau. */
.rahmen div.panelContent table:not(.filterliste):has(> tbody > tr > td > input[type=text], > tbody > tr > td > select, > tbody > tr > td > textarea) {
    border-spacing: 0;
}

/* Karten (OpenLayers) direkt in einem Rahmen: Die Kacheln zeichnen eckig über die runden Ecken - der Rahmen schneidet
   sie ab (28.10.2026, Augustin: weiße Ecken bei FFH). Nur wo die Karte unmittelbar im Rahmen liegt. */
.rahmen div.panelContent:has(> div > .ol-viewport) {
    overflow: hidden;
}

/* Säulendiagramm (Scripts/diagramm.js, Fischkataster: Verteilung der Fischlängen) - gezeichnet mit fester Breite,
   verkleinert sich auf den Rahmen statt über ihn hinauszuragen (27.10.2026). */
.rahmen svg.diagramm-saeulen {
    display: block;
    max-width: 100%;
    height: auto;
}

/* Filter- und Darstellungsblock der Karten (Show_Overview_Map, Show_Map) - 27.10.2026, Augustin: links der
   Filter mit Ja/Nein-Auswahl statt Häkchen, rechts die Darstellung. Show_Map hat nur den Filter. */
.rahmen .karte-optionen {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr);
}

.rahmen .karte-optionen-eine {
    grid-template-columns: minmax(0, 1fr);
}

.rahmen .karte-spalte {
    padding: 8px 14px 10px 14px;
}

.rahmen .karte-spalte + .karte-spalte {
    border-left: 1px solid var(--r-rand-leicht);
}

.rahmen .karte-spalte-titel {
    margin-bottom: 6px;
    color: var(--r-leise);
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.rahmen .karte-filtertext {
    margin-bottom: 6px;
    color: var(--r-text-stark);
}

.rahmen .karte-felder {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 4px 10px;
    align-items: center;
}

.rahmen .karte-felder-zwei {
    grid-template-columns: auto minmax(0, 1fr) auto minmax(0, 1fr);
}

.rahmen .karte-felder-zwei > span:nth-of-type(even) {
    padding-left: 10px;
}

.rahmen .karte-felder > span {
    white-space: nowrap;
}

.rahmen .karte-felder select {
    width: 100%;
}

.rahmen .karte-bild {
    margin-top: 12px;
}

.rahmen #kartenflaeche {
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.rahmen #kartenflaeche img {
    display: block;
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 100%;
    cursor: zoom-in;
}

.rahmen .karte-hinweis {
    margin-top: 6px;
    color: var(--r-leise);
    font-size: 12px;
}

/* FFH-Monitoring: Die Merkmalstabelle rollt in ihrem Bereich (mitteBisUnten) - ihre Spaltenköpfe bleiben stehen */
.rahmen #MainContent_panDataInt th {
    position: sticky;
    top: 0;
    z-index: 1;
    background: #fff;
    box-shadow: inset 0 -1px 0 var(--r-rand);
}

/* Tabellen mit GridLines (ASP.NET: rules und border="1" - harte schwarze Linien): Info_Cloud, FFH-Zusammenfassungen.
   Wie die Listen: abgerundeter Rahmen, heller Kopf, feine Zeilenlinien; beim Gitter (rules="all") auch Spaltenlinien. */
.rahmen table[rules] {
    border: 1px solid var(--r-rand);
    border-collapse: separate !important;
    border-spacing: 0;
    border-radius: 10px;
    overflow: hidden;
    background: #fff;
}

.rahmen table[rules] > * > tr > th,
.rahmen table[rules] > * > tr > td {
    border: 0;
}

.rahmen table[rules="rows"] > * > tr > th,
.rahmen table[rules="rows"] > * > tr > td {
    padding: 7px 12px;
}

.rahmen table[rules] > * > tr > th {
    border-bottom: 1px solid var(--r-rand);
    background: var(--r-flaeche);
    color: var(--r-leise);
    font-weight: 600;
}

.rahmen table[rules] > * > tr:not(:last-child) > td {
    border-bottom: 1px solid var(--r-rand-leicht);
}

.rahmen table[rules="all"] > * > tr > td + td,
.rahmen table[rules="all"] > * > tr > th + th {
    border-left: 1px solid var(--r-rand-leicht);
}

.rahmen table[rules] > * > tr:hover > td {
    background: var(--r-flaeche);
}

/* Köpfe nach ihrer Spalte: Text links, die mittig gesetzten Zahlenspalten (Info_Cloud) rechts über den Zahlen */
.rahmen table[rules="rows"] > * > tr > th {
    text-align: left;
}

.rahmen table[rules="rows"] > * > tr > th[align="center"],
.rahmen table[rules="rows"] > * > tr > th[style*="text-align:center"] {
    text-align: right !important;
}

/* Tabelle direkt unter einem Panelkopf (Fischkataster: Fangprotokoll, Biber): Die Leiste schließt an den Kopf an -
   ohne eigene obere Rundung, sonst entstehen Kerben unter dem Kopf. Unten rundet die Tabelle selbst. */
.rahmen div.panelHeader + div .tabelle-leiste,
.rahmen div.panelHeader + .tabelle .tabelle-leiste {
    border-radius: 0;
}

.rahmen .tabelle-leiste + .tabulator {
    border-radius: 0 0 10px 10px;
}

/* Gitter-Tabellen (FFH-Zusammenfassungen): mehr Luft um die Werte (Augustin, 27.10.2026) */
.rahmen table[rules="all"] > * > tr > th,
.rahmen table[rules="all"] > * > tr > td {
    padding: 6px 14px;
}

/* Filter bearbeiten (Edit_Query, Edit_Query_Orte) - 27.10.2026 ----------------------------------------------
   Zeilen mit feinen Trennlinien; Ein/Aus als Schalter; Werte als Chips mit "+ Wert" dahinter; Papierkorb dezent. */
.rahmen table.filterliste {
    border-collapse: collapse;
    border-spacing: 0;
}

.rahmen tr.filterzeile > td {
    padding: 5px 8px;
    border-bottom: 1px solid var(--r-rand-leicht);
    vertical-align: middle;
}

.rahmen tr.filterzeile:last-child > td {
    border-bottom: none;
}

.rahmen tr.filterzeile:hover > td {
    background: var(--r-flaeche);
}

.rahmen tr.filterzeile-aus td.filter-feld,
.rahmen tr.filterzeile-aus .filterwert {
    opacity: .5;
}

.rahmen td.filter-feld {
    color: var(--r-text-stark);
    font-weight: 600;
}

/* Schalter aus dem Häkchen - der Knopf ist ein Verlauf, kein Pseudo-Element, damit es überall gleich aussieht */
.rahmen tr.filterzeile input[type=checkbox] {
    -webkit-appearance: none;
    appearance: none;
    width: 30px;
    height: 18px;
    margin: 0;
    border-radius: 9px;
    background: radial-gradient(circle at 9px 50%, #fff 6px, transparent 6.5px), #cbd5e1;
    cursor: pointer;
    vertical-align: middle;
    transition: background .15s;
}

.rahmen tr.filterzeile input[type=checkbox]:checked {
    background: radial-gradient(circle at 21px 50%, #fff 6px, transparent 6.5px), var(--r-akzent);
}

.rahmen tr.filterzeile input[type=checkbox]:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px var(--r-ring);
}

.rahmen .filterwert {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin: 2px 6px 2px 0;
    padding: 2px 6px 2px 10px;
    border: 1px solid color-mix(in srgb, var(--r-akzent) 25%, #fff);
    border-radius: 999px;
    background: var(--r-akzent-hell);
    color: var(--r-text-stark);
    font-size: 12.5px;
    line-height: 18px;
    vertical-align: middle;
}

.rahmen .filterwert input[type=image] {
    padding: 3px !important;
    border-radius: 50%;
    opacity: .6;
    transition: opacity .15s, background-color .15s;
}

.rahmen .filterwert input[type=image]:hover {
    opacity: 1;
    background: rgba(15, 23, 42, .08);
}

.rahmen a.filter-hinzu,
.rahmen a.filter-hinzu:link,
.rahmen a.filter-hinzu:visited {
    display: inline-flex;
    align-items: center;
    margin: 2px 0;
    padding: 2px 10px;
    border: 1px dashed var(--r-feldrand);
    border-radius: 999px;
    color: var(--r-leise);
    font-size: 12.5px;
    font-weight: 600;
    line-height: 18px;
    text-decoration: none;
    vertical-align: middle;
    transition: color .15s, border-color .15s, background-color .15s;
}

.rahmen a.filter-hinzu:hover {
    border-color: var(--r-akzent);
    background: var(--r-akzent-hell);
    color: var(--r-akzent-schrift);
}

.rahmen td.filter-leeren input[type=image] {
    opacity: .35;
    transition: opacity .15s;
}

.rahmen tr.filterzeile:hover td.filter-leeren input[type=image] {
    opacity: 1;
}

/* Felder in Dialogen: Schrift wie in der Eingabe - das jQuery-UI-Thema setzt sonst Verdana in 1.1em (14,3 px),
   zu groß für die 22 px hohen Felder (Augustin, 27.10.2026: "Felder zu eng"). */
body.rahmen .ui-dialog input,
body.rahmen .ui-dialog select,
body.rahmen .ui-dialog textarea,
body.rahmen .ui-dialog button {
    font-family: inherit;
    font-size: 13px;
}

/* Dialog-Formular: Beschriftung links, Feld rechts, mit Abstand (Filter hinzufügen in Edit_Query/_Orte) */
body.rahmen .dialog-formular {
    display: grid;
    grid-template-columns: 80px minmax(0, 1fr);
    gap: 4px 12px;      /* Zeilenabstand 4 px wie überall in den Eingaben (Augustin, 28.10.2026) */
    align-items: center;
    padding: 4px 0;
}

body.rahmen .dialog-formular > span {
    color: var(--r-text);
    font-size: 12.5px;
    font-weight: 600;
}

body.rahmen .dialog-formular [id$="_lblItem"] {
    display: block;
    margin-top: 4px;
    color: var(--r-leise);
    font-size: 11.5px !important;
}

/* Neues Biberrevier anlegen: Felder oben, die Karte füllt den Rest des aufziehbaren Kartendialogs (28.10.2026,
   Scripts/kartendialog.js) - vorher fest 465 px in einem Dialog fester Pixelgröße. Erst im Dialog, sonst stünde das
   Panel vor dem Einrichten sichtbar auf der Seite. */
.rahmen .ui-dialog > #MainContent_dialog_create_biberrevier {
    display: flex !important;
    flex-direction: column;
}

.rahmen #MainContent_dialog_create_biberrevier > #divMap3 {
    flex: 1 1 auto;
    height: auto !important;
    min-height: 200px;
}

/* Listen in Dialogen ohne eigene Leiste (Suchdialoge im Fischkataster u. a.) mit runden Ecken wie die Suchliste
   darunter (Augustin, 28.10.2026). Tabulator schneidet seinen Inhalt selbst ab (overflow: hidden). */
.rahmen .ui-dialog-content .tabelle > .tabulator:first-child {
    border-radius: 8px;
}

/* Suchliste in Dialogen (Edit_Data: gespeicherten Fundort wählen, 28.10.2026) - wie die Suchraster im Fischkataster:
   Kopf, Zeilen, gewählte Zeile in der Akzentfarbe; das Suchfeld steht darunter. */
.rahmen .such-liste {
    height: 300px;
    overflow-y: auto;
    border: 1px solid var(--r-rand);
    border-radius: 8px;
    background: #fff;
}

.rahmen .such-liste-kopf,
.rahmen .such-liste-zeile {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 200px;
    gap: 12px;
    padding: 5px 10px;
}

.rahmen .such-liste-kopf {
    position: sticky;
    top: 0;
    border-bottom: 1px solid var(--r-rand);
    background: var(--r-flaeche);
    color: var(--r-leise);
    font-size: 12px;
    font-weight: 600;
}

.rahmen .such-liste-zeile {
    border-bottom: 1px solid #f1f5f9;
    cursor: default;
    font-size: 13px;
}

.rahmen .such-liste-zeile:hover {
    background: var(--r-flaeche);
}

.rahmen .such-liste-zeile.gewaehlt {
    background: var(--r-akzent-hell);
    color: var(--r-akzent-schrift);
}

.rahmen .such-liste-zeile span,
.rahmen .such-liste-kopf span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.rahmen .such-liste-leer {
    padding: 14px 10px;
    color: var(--r-leise);
    font-size: 12.5px;
}

/* Seite im schwebenden Fenster (Scripts/fenster.js): Die Knöpfe stehen in der Fußleiste des Fensters, die eigenen der
   Seite bleiben dort aus (28.10.2026). */
.im-fenster .fenster-knoepfe {
    display: none;
}

/* Schließen-Kreuz der Dialoge: kein Fokuskasten - jQuery UI setzt den Fokus beim Öffnen oft darauf. */
body.rahmen .ui-dialog .ui-dialog-titlebar-close:focus {
    outline: none;
    box-shadow: none;
}

/* Kategorieauswahl der Eingabe als Kacheln (Augustin, 28.10.2026: "modern, schick und klar") statt einer Linkliste.
   Die Tabelle aus Edit_Data.aspx.vb (AddKategorieTableRows) bleibt - sie wird hier zum Raster: je Zeile eine Kachel
   mit dem Symbol in einem hellen Akzentkreis und dem Namen; die ganze Kachel ist der Link. */
#MainContent_tblData_BeobachtungErfassen {
    display: block;
    width: auto !important;
    margin: 0 !important;
    padding: 14px;
}

#MainContent_tblData_BeobachtungErfassen > tbody {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
    gap: 10px;
}

#MainContent_tblData_BeobachtungErfassen tr {
    position: relative;
    display: flex;
    align-items: center;
    gap: 12px;
    height: auto !important;
    padding: 10px 14px;
    border: 1px solid var(--r-rand);
    border-radius: 10px;
    background: #fff;
    transition: border-color .15s, background-color .15s, box-shadow .15s;
}

#MainContent_tblData_BeobachtungErfassen tr:hover {
    border-color: var(--r-akzent);
    background: var(--r-akzent-hell);
    box-shadow: 0 2px 8px rgba(15, 23, 42, .08);
}

#MainContent_tblData_BeobachtungErfassen td {
    display: block;
    width: auto !important;
    padding: 0 !important;
}

#MainContent_tblData_BeobachtungErfassen td:first-child a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--r-akzent-hell);
}

#MainContent_tblData_BeobachtungErfassen tr:hover td:first-child a {
    background: #fff;
}

#MainContent_tblData_BeobachtungErfassen td:last-child a {
    color: var(--r-text-stark);
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
}

/* Die ganze Kachel ist der Link: unsichtbare Fläche über der Kachel. */
#MainContent_tblData_BeobachtungErfassen td:last-child a::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 10px;
}

#MainContent_tblData_BeobachtungErfassen tr:hover td:last-child a {
    color: var(--r-akzent-schrift);
}

#MainContent_tblData_BeobachtungErfassen td:last-child a:focus-visible {
    outline: none;
}

#MainContent_tblData_BeobachtungErfassen tr:focus-within {
    border-color: var(--r-akzent);
    box-shadow: 0 0 0 3px var(--r-ring);
}

/* Alle Knöpfe in der Akzentfarbe der Cloud (Augustin, 28.10.2026: "warum ist nur Beobachtung speichern blau?" - sie
   sollen überall gleich sein). Gilt für Text-Knöpfe der Seiten, die Knöpfe der Einstellungsseiten (.ms-knopf) und die
   Knöpfe in Dialogen. Steht am Ende und mit !important, weil die älteren Regeln (oben, Styles/einstellungen.css) je nach
   Seite spezifischer sind. Ausgenommen bleibt nur der rote Löschknopf in Gefahr-Dialogen (ms-dialog-gefahr). */
.rahmen input[type=submit],
.rahmen input[type=button],
.rahmen input[type=reset],
.rahmen a.ms-knopf,
.rahmen button.ms-knopf,
body.rahmen .ui-dialog .ui-dialog-buttonpane button {
    border-color: var(--r-akzent) !important;
    background: var(--r-akzent) !important;
    color: var(--r-akzent-text) !important;
}

.rahmen input[type=submit]:hover:not(:disabled),
.rahmen input[type=button]:hover:not(:disabled),
.rahmen input[type=reset]:hover:not(:disabled),
.rahmen a.ms-knopf:hover,
.rahmen button.ms-knopf:hover,
body.rahmen .ui-dialog .ui-dialog-buttonpane button:hover {
    border-color: color-mix(in srgb, var(--r-akzent) 84%, #000) !important;
    background: color-mix(in srgb, var(--r-akzent) 84%, #000) !important;
}

body.rahmen .ui-dialog.ms-dialog-gefahr .ui-dialog-buttonpane button:last-child,
body.rahmen .ui-dialog.ms-dialog-gefahr .ui-dialog-buttonpane button:last-child:hover {
    border-color: #b91c1c !important;
    background: #b91c1c !important;
    color: #fff !important;
}

/* Ausgenommen auch die kleinen Auswahlknöpfe "..." direkt neben einem Feld (Fischkataster: Gewässer, Startpunkt) - sie
   gehören zum Feld, nicht zu den Aktionen der Seite, und sehen deshalb wie ein Feld aus (Augustin, 28.10.2026). */
.rahmen input.knopf-neben-feld,
.rahmen input.knopf-neben-feld:hover:not(:disabled) {
    border-color: var(--r-rand) !important;
    background: #fff !important;
    color: var(--r-text-stark) !important;
    padding: 0 !important;
    font-weight: 600;
}

.rahmen input.knopf-neben-feld:hover:not(:disabled) {
    border-color: var(--r-akzent) !important;
    color: var(--r-akzent-schrift) !important;
}