/* DESIGN-UPDATE 2026 - Hauptmenü und Seitenmenü
----------------------------------------------------------
   Nur Aussehen: Farben, Linien, Hover und Klickfläche. Wird nach Site_2023.css geladen und überschreibt dort.
   Bewusst NICHT geändert: Gesamtmaße der Menüpunkte, Rahmenstärken und die Klassennamen
   (Menu/Menu2/Menu3, leftMenuIn/leftMenuOut, mainRight/mainRightWide werden per Skript umgeschaltet;
   das Home-Symbol ist absolut auf die Menühöhe positioniert).
   Hinweis: Die Ausklappmenüs setzt ASP.NET per Skript auf clip:rect(...) - Schatten oder Rahmen außerhalb
   des Menüs werden abgeschnitten. Rahmen deshalb über die vorhandenen Ränder der Menüpunkte.
   Zurück zum alten Design: <link> auf diese Datei in Site.Master entfernen. */

/* Hauptmenü (1. Ebene) */
.menuBar .Menu,
.menuBar .Menu2,
.menuBar .Menu3 {
    background: #2c48e1;
    filter: none;
    box-shadow: 0 2px 10px rgba(27, 33, 48, 0.14);
}

/* Hauptmenüpunkte nebeneinander in natürlicher Breite (wie bisher). Der rechte Innenabstand
   (Menu3: 30%) schob bei vielen Menüpunkten (z. B. Admin) die ganze Seite seitlich über den Rand -
   er ist überflüssig, weil die Menüpunkte durch flex ohnehin links stehen und nicht gestreckt werden. */
#menu > tbody > tr {
    display: flex;
}

#menu > tbody > tr > td {
    flex: none;
}

.menuBar .Menu,
.menuBar .Menu2,
.menuBar .Menu3 {
    padding-right: 0;
}

.menuBar .MenuFirstLayer,
.menuBar a.MenuFirstLayer {
    color: #ffffff;
}

.menuBar .MenuFirstLayer:hover {
    background: #2136a9;
    filter: none;
}

/* Hauptmenü (2. Ebene, Ausklappmenü)
   Klickfläche: Abstände von der Tabelle in den Link verschoben (Summe gleich wie bisher),
   der Link füllt damit die ganze Zeile */
.menuBar table.MenuSecondLayer {
    padding: 0;
    color: #1b2130;
    background-color: #ffffff;
    border-color: transparent #b6bfd4 #e6e9f1 #b6bfd4;
}

.menuBar a.MenuSecondLayer {
    display: block;
    padding: 8px 60px 5px 11px;
    color: #1b2130;
    background-color: transparent;
    border: 0;
}

/* Schatten unter dem Ausklappmenü: nur wenn ASP.NET nicht scrollt (clip steht dann auf "auto" -
   das entspricht keinem Abschneiden). Beim Scrollen langer Menüs setzt ASP.NET Pixelwerte,
   dann greift diese Regel nicht und alles bleibt wie bisher. */
.menuBar div[id$="Items"][style*="rect(auto, auto, auto, auto)"] {
    clip: auto !important;
}

/* Schatten an der Tabelle der Menüpunkte, nicht am Container: ASP.NET rundet die Höhe des Containers
   auf ganze Pixel, bei Bildschirmskalierung (z. B. 150 %) entstünde sonst ein Spalt unter dem Rand */
.menuBar div[id$="Items"][style*="rect(auto, auto, auto, auto)"] > table {
    box-shadow: 0 8px 16px rgba(27, 33, 48, 0.12), 0 20px 40px -8px rgba(27, 33, 48, 0.30);
}

/* Rahmen unten am letzten Menüpunkt (oben schließt der blaue Menübalken ab) */
.menuBar div[id$="Items"] > table > tbody > tr:last-child table.MenuSecondLayer {
    border-bottom-color: #b6bfd4;
}

.menuBar table.MenuSecondLayer:hover,
.menuBar table.MenuSecondLayer:hover a.MenuSecondLayer {
    color: #2c48e1;
    background-color: #eef1fd;
}

/* Unsichtbares Feld für die Farbe des Content Scores (visibility: hidden, Wert wird per Skript gelesen)
   belegt sonst unter dem Inhalt eine Zeile - zusammen mit der Seitenmenü-Höhe (Fenster - 120px) war jede
   Seite dadurch ein paar Pixel höher als das Fenster und ließ sich auch ohne Inhalt scrollen */
input[id$="scoreColorTbx"] {
    position: absolute;
    top: 0;
    left: 0;
}

/* Inhalt bei eingeklapptem Seitenmenü: bisher calc(100% - 60px) + 2% Innenabstand + 20px Menü - passt
   nur bis ca. 2000px Breite, darüber rutschte der Inhalt unter das Menü. min() begrenzt auf die
   größte passende Breite, bis 2000px bleibt alles wie bisher. */
.mainRightWide {
    width: min(calc(100% - 60px), calc(98% - 20px));
}

/* Seitenmenü */
.leftMenuOut {
    background: #f6f7fb;
    box-shadow: inset -1px 0 0 #e3e6ee;
}

.leftMenuIn {
    background: #f6f7fb;
}

#leftMenu table.MenuFirstLayerLeft {
    padding: 0;
    color: #1b2130;
    border-top-color: transparent;
    border-bottom-color: #e6e8ef;
}

#leftMenu a.MenuFirstLayerLeft {
    display: block;
    padding: 10px 6px 10px 12px;
    color: #1b2130;
    border: 0;
}

#leftMenu table.MenuFirstLayerLeft:hover,
#leftMenu table.MenuFirstLayerLeft:hover a.MenuFirstLayerLeft {
    padding: 0;
    color: #2c48e1;
    background-color: #eef1fd;
    border-top-color: transparent;
    border-bottom-color: #e6e8ef;
}

#leftMenu table.MenuFirstLayerLeft:hover a.MenuFirstLayerLeft {
    padding: 10px 6px 10px 12px;
    border: 0;
}

/* aktuelle Seite (Klasse is-current setzt ein Skript in Site.Master); Linie links als inset-Schatten,
   damit sich keine Maße ändern */
#leftMenu a.MenuFirstLayerLeft.is-current,
#leftMenu table.MenuFirstLayerLeft:hover a.MenuFirstLayerLeft.is-current,
#leftMenu a.MenuSecondLayerLeft.is-current {
    color: #2c48e1;
    background-color: #e4e9fc;
    box-shadow: inset 3px 0 0 #2c48e1;
}

/* Seitenmenü (2. Ebene, Ausklappmenü) */
#leftMenu table.MenuSecondLayerLeft,
#leftMenu table.MenuSecondLayerLeft:hover {
    padding: 0;
    border-color: transparent #b6bfd4 #e6e9f1 #b6bfd4;
}

#leftMenu a.MenuSecondLayerLeft,
#leftMenu table.MenuSecondLayerLeft:hover a.MenuSecondLayerLeft {
    display: block;
    padding: 8px 100px 5px 12px;
    border: 0;
}

#leftMenu table.MenuSecondLayerLeft,
#leftMenu a.MenuSecondLayerLeft {
    color: #1b2130;
    background-color: #ffffff;
}

#leftMenu div[id$="Items"] > table > tbody > tr:first-child table.MenuSecondLayerLeft {
    border-top-color: #2c48e1;
}

#leftMenu div[id$="Items"] > table > tbody > tr:last-child table.MenuSecondLayerLeft {
    border-bottom-color: #b6bfd4;
}

#leftMenu table.MenuSecondLayerLeft:hover,
#leftMenu table.MenuSecondLayerLeft:hover a.MenuSecondLayerLeft {
    color: #2c48e1;
    background-color: #eef1fd;
}

/* MELDUNGEN / DIALOGE (jQuery UI)
----------------------------------------------------------
   Nur Aussehen. Dialog-Optionen, Buttons und Logik bleiben unverändert.
   Dialoge mit eigenem Design (dialogClass "exampleDialog") behalten ihre Titelleiste. */

@font-face {
    font-family: LensGroteskMedium;
    src: url(images/login/fonts/LensGrotesk-Medium.woff2) format("woff2"), url(images/login/fonts/LensGrotesk-Medium.woff) format("woff");
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

.ui-widget-overlay {
    background: #1b2130;
    opacity: 0.45;
    filter: Alpha(Opacity=45);
}

.ui-dialog.ui-widget.ui-widget-content {
    padding: 0;
    font-family: 'LensGrotesk-Light', Arial;
    color: #1b2130;
    background: #ffffff;
    border: 0;
    border-radius: 12px;
    box-shadow: 0 0 0 1px rgba(27, 33, 48, 0.06), 0 24px 60px -12px rgba(27, 33, 48, 0.45);
}

.ui-dialog:not(.exampleDialog) .ui-dialog-titlebar.ui-widget-header {
    padding: 13px 52px 13px 16px;
    color: #ffffff;
    background: #2c48e1;
    border: 0;
    border-radius: 12px 12px 0 0;
}

.ui-dialog:not(.exampleDialog) .ui-dialog-title {
    margin: 0;
    font-family: LensGroteskMedium, 'LensGrotesk-Light', Arial;
    font-size: 15px;
    font-weight: 500;
    letter-spacing: 0.01em;
}

/* Schließen-Kreuz (wo nicht ausgeblendet): rund, dezent */
.ui-dialog:not(.exampleDialog) .ui-dialog-titlebar-close {
    right: 14px;
    width: 30px;
    height: 30px;
    margin: -15px 0 0 0;
    padding: 0;
    color: rgba(255, 255, 255, 0.8);
    font-size: 0;
    text-indent: 0;
    background: transparent;
    border: 0;
    border-radius: 50%;
    overflow: hidden;
}

.ui-dialog:not(.exampleDialog) .ui-dialog-titlebar-close .ui-icon,
.ui-dialog:not(.exampleDialog) .ui-dialog-titlebar-close .ui-button-text {
    display: none;
}

.ui-dialog:not(.exampleDialog) .ui-dialog-titlebar-close::before {
    content: "\00d7";
    display: block;
    font-size: 22px;
    line-height: 30px;
    text-align: center;
}

.ui-dialog:not(.exampleDialog) .ui-dialog-titlebar-close:hover,
.ui-dialog:not(.exampleDialog) .ui-dialog-titlebar-close:focus {
    padding: 0;
    color: #ffffff;
    background: rgba(255, 255, 255, 0.16);
    border: 0;
}

.ui-dialog:not(.exampleDialog) .ui-dialog-content {
    padding: 14px 16px;
    font-size: 14px;
    line-height: 1.5;
}

.ui-dialog .ui-dialog-content p:first-child {
    margin-top: 0;
}

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

.ui-dialog .ui-dialog-buttonpane {
    margin: 0;
    padding: 10px 12px;
    background: #f6f7fb;
    border-top: 1px solid #eceef4;
    border-radius: 0 0 12px 12px;
}

.ui-dialog .ui-dialog-buttonpane button {
    margin: 0 0 0 6px;
}

.ui-dialog .ui-dialog-buttonpane .ui-button {
    font-family: LensGroteskMedium, 'LensGrotesk-Light', Arial;
    font-size: 13px;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: #2c48e1;
    background: #ffffff;
    border: 1px solid #2c48e1;
    border-radius: 9999px;
}

.ui-dialog .ui-dialog-buttonpane .ui-button .ui-button-text {
    padding: 7px 16px;
}

/* der zuerst fokussierte (Standard-)Button und Hover: gefüllt */
.ui-dialog .ui-dialog-buttonpane .ui-button.ui-state-hover,
.ui-dialog .ui-dialog-buttonpane .ui-button.ui-state-focus {
    color: #ffffff;
    background: #2c48e1;
    border-color: #2c48e1;
}

.ui-dialog .ui-dialog-buttonpane .ui-button.ui-state-active {
    color: #ffffff;
    background: #2136a9;
    border-color: #2136a9;
}

/* Fokus sichtbar, aber im CapCorn-Blau statt schwarzem Browser-Rahmen */
.ui-dialog .ui-dialog-buttonpane .ui-button:focus {
    outline: none;
    box-shadow: 0 0 0 3px rgba(44, 72, 225, 0.28);
}

/* Eingabefelder mit fester Breite nicht breiter als den Dialog werden lassen
   (z. B. Kommentarfeld 380px im 300px breiten Pause-Dialog: waagrechte Scrollleiste) */
.ui-dialog .ui-dialog-content textarea,
.ui-dialog .ui-dialog-content input[type="text"] {
    max-width: 100%;
    box-sizing: border-box;
}

/* Hilfe-Symbol oben rechts (Site.Master, HelpButton): Strichsymbol wie auf der Login-Seite,
   runde Klickflaeche mit leichtem Hintergrund beim Darueberfahren */
input.portalHelp {
    box-sizing: content-box;
    width: 24px;
    height: 24px;
    padding: 5px;
    vertical-align: middle;
    border-radius: 50%;
    cursor: pointer;
    transition: background-color 150ms ease;
}

input.portalHelp:hover,
input.portalHelp:focus-visible {
    background-color: rgba(44, 72, 225, 0.1);
    outline: none;
}

input.portalHelp:focus-visible {
    box-shadow: 0 0 0 2px #2c48e1;
}

@media (prefers-reduced-motion: reduce) {
    input.portalHelp {
        transition: none;
    }
}