/* =============================================================================
   REboxBlue Service-Box ("Unser Service für Sie")
   Alle Regeln aus myOwnStyles_MH_start.css, die auf diesen HTML-Block wirken.
============================================================================= */

/* --- Blauer Container: fester Rahmen, scrollbar --- */
.REboxBlue {
    float: left;
    margin: 0 0 0 15px;
    padding: 4px;
    height: 23.1em;
    overflow-y: auto;
    width: 28em;
    background: #005ca9;
}

/* --- Grund-Ausblendung, Sichtbarkeit schaltet JavaScript per Inline-Style --- */
div.ToolBoxContent,
div.REboxBlueContent div.csc-default,
div.REboxBlueContent {
    display: none;
}

/* --- Verlaufskante am Ende (greift statisch auf das einzige Kind, display:none) --- */
.REboxBlueContent > div:nth-last-child(1) {
    background: linear-gradient(to top, #004f8f 30%, rgba(0,79,143,.7) 70%, rgba(0,79,143,0));
    display: none;
}

/* --- Tooltip-Box mit den Beschreibungstexten --- */
.ToolBoxContent {
    background: #ddd;
    color: #666;
    display: none;
    font-size: .9em;
    max-width: 24em !important;
    padding: 1em;
    position: absolute;
    z-index: 90;
    box-shadow: 8px 5px 12px rgba(0,0,0,.5);
}

/* --- Textumbruch in der Tooltip-Box --- */
div.ToolBoxContent p,
div.ToolBoxContent div {
    word-wrap: break-word;
}

/* --- Bild-Wrapper je Kachel positionieren --- */
div.REboxBlue div.REboxBlueContent div.ToolBox div.ToolBoxImage {
    top: -7em !important;
    height: auto;
    margin: 0 0 4em;
    position: relative;
    width: 100%;
}

/* --- Die Kachel-Bilder selbst --- */
.ToolBoxImage img {
    width: 90% !important;
    height: auto !important;
    padding: 0;
    float: left;
    margin: 0 .25em;
    position: relative;
    top: 4em;
}

/* =============================================================================
   Responsive (max-width: 800px)
============================================================================= */
@media only screen and (max-width: 800px) {

    /* Service-Box auf schmalen Viewports ganz ausblenden */
    .REboxBlue {
        display: none;
    }

    /* Globale Absatz-Regel – wirkt auch auf die <p> in den Kacheln */
    p {
        margin: 1em 0 0;
    }
}