/* A_055_05p21_7 · Zentrale Komponente fuer alle i-Informationsfenster.
   Alle 21 aktiven i-Informationsfenster verwenden dieselben Fenster-, Positions- und Textwerte.
   Die Breitenstufe wird in assets/js/informationsfenster.js ausschliesslich aus der Anzahl
   der sichtbaren Zeichen des Informationstextes bestimmt.
   style.css bleibt eingefroren und unveraendert.
*/

:root {
    --i-infofenster-hintergrund-aussen: rgba(0, 31, 61, 0.28);
    --i-infofenster-hintergrund: #FFFFFF;
    --i-infofenster-rahmenfarbe: #0000FF;
    --i-infofenster-textfarbe: #0000FF;
    --i-infofenster-ueberschriftfarbe: #000000;
    --i-infofenster-rundung: 18px;
    --i-infofenster-innenabstand: 22px;
    --i-infofenster-aussenabstand: 20px;
    --i-infofenster-maxhoehe-abzug: 48px;
    --i-infofenster-schatten: 0 18px 60px rgba(0, 31, 61, 0.22);
    --i-infofenster-maxbreite-kurz: 350px;
    --i-infofenster-maxbreite-mittel: 550px;
    --i-infofenster-maxbreite-lang: 750px;
}

/* Gemeinsamer Bildschirm-Hintergrund fuer alle nicht-nativen i-Informationsfenster. */
.i-infofenster-backdrop-modular {
    position: fixed !important;
    inset: 0 !important;
    display: flex !important;
    align-items: flex-start !important;
    justify-content: center !important;
    box-sizing: border-box !important;
    padding: var(--i-infofenster-aussenabstand) !important;
    background: var(--i-infofenster-hintergrund-aussen) !important;
    overflow-y: auto !important;
}

.i-infofenster-backdrop-modular[hidden] {
    display: none !important;
}

/* Gemeinsame Fensterwerte. Die jeweilige Maximalbreite wird per Breitenklasse gesetzt. */
.i-infofenster-window-modular {
    --i-infofenster-aktuelle-maxbreite: var(--i-infofenster-maxbreite-kurz);
    box-sizing: border-box !important;
    width: fit-content !important;
    max-width: min(var(--i-infofenster-aktuelle-maxbreite), calc(100vw - 40px)) !important;
    max-height: calc(100vh - var(--i-infofenster-maxhoehe-abzug)) !important;
    overflow: auto !important;
    border: 1px solid var(--i-infofenster-rahmenfarbe) !important;
    border-radius: var(--i-infofenster-rundung) !important;
    background: var(--i-infofenster-hintergrund) !important;
    box-shadow: var(--i-infofenster-schatten) !important;
    padding: var(--i-infofenster-innenabstand) !important;
    margin: 0 !important;
    color: var(--i-infofenster-textfarbe) !important;
}

.i-infofenster-window-modular.i-infofenster-breite-kurz {
    --i-infofenster-aktuelle-maxbreite: var(--i-infofenster-maxbreite-kurz);
}

.i-infofenster-window-modular.i-infofenster-breite-mittel {
    --i-infofenster-aktuelle-maxbreite: var(--i-infofenster-maxbreite-mittel);
}

.i-infofenster-window-modular.i-infofenster-breite-lang {
    --i-infofenster-aktuelle-maxbreite: var(--i-infofenster-maxbreite-lang);
}

/* Native <dialog>-Fenster liegen in der Browser-Top-Layer und werden deshalb separat oben positioniert. */
dialog.i-infofenster-window-modular {
    position: fixed !important;
    top: var(--i-infofenster-aussenabstand) !important;
    right: 0 !important;
    bottom: auto !important;
    left: 0 !important;
    margin: 0 auto !important;
}

dialog.i-infofenster-window-modular::backdrop {
    background: var(--i-infofenster-hintergrund-aussen) !important;
}

/* H2 und H3 gelten ausnahmslos fuer alle i-Informationsfenster. */
.i-infofenster-ueberschrift-a05505p12,
.i-infofenster-ueberschrift-a05505p12.i-infofenster-ueberschrift-blau-a05505p12,
.i-infofenster-window-modular h2,
.i-infofenster-window-modular h3 {
    color: var(--i-infofenster-ueberschriftfarbe) !important;
}

.i-infofenster-window-modular h2 {
    font-size: 22px !important;
}

.i-infofenster-window-modular h3 {
    font-size: 18px !important;
    font-weight: 800 !important;
    margin-bottom: 14px !important;
}

/* Normaler Informationstext. */
.i-infofenster-window-modular p {
    font-size: 15px !important;
    color: var(--i-infofenster-textfarbe) !important;
    font-weight: 500 !important;
    line-height: 1.5 !important;
    margin-bottom: 14px !important;
}

/* Hervorgehobener Informationstext. */
.i-infofenster-window-modular p strong,
.i-infofenster-window-modular p b,
.i-infofenster-window-modular li strong,
.i-infofenster-window-modular li b {
    color: var(--i-infofenster-textfarbe) !important;
    font-weight: 700 !important;
}

/* Aufzaehlungen. */
.i-infofenster-window-modular ul,
.i-infofenster-window-modular ol {
    color: var(--i-infofenster-textfarbe) !important;
    font-weight: 500 !important;
    padding-left: 22px !important;
    margin-bottom: 14px !important;
}

.i-infofenster-window-modular li {
    font-size: 15px !important;
    color: var(--i-infofenster-textfarbe) !important;
    font-weight: 500 !important;
}


/* A_055_05r_19 · Gemeinsames Tiergruppen-Informationsfenster für Besatz anlegen und Besatz ändern. */
body main.container .livestock-tiergroup-info-green-r2 {
    color: #008000;
    font-weight: 700;
}