/* you can add your own custom css here if you don't want to worry about SASS/SCSS */

header div.container {
    background-color:#fff;
    border-radius: 7px;
    border-color:#fff !important;
    border-style:solid;
}

header .slogan h5 {
    color:#00a5bc;
}

header {
    position: sticky;
    top: 0;
    z-index: 1030; /* über Bootstrap-Navigationen */
}

aside {
    position: sticky;
    top: 80px; /* Höhe des Headers eintragen */
    align-self: flex-start; /* wichtig bei Bootstrap rows */
    z-index: 1020; /* über Content, aber unter dem Header */
    background-color: #fff;
    border-radius: 7px;
    border-color:#fff !important;
    border-style:solid;
}

section {
    position:relative;
}

body {
    background-color:#a5d9e6 !important;
}

.table > :not(caption) > * > * {
    background-color:#f3f3f3 !important;
}

.com-content-article .item-image {
    display: inline-block;    /* Container für das Bild */
    border-radius: 7px;       /* abgerundete Ecken */
    overflow: hidden;          /* stellt sicher, dass der Rahmen sichtbar bleibt */
    border: 3px inset #a5d9e6;  /*  innerer Rahmen auf dem Container */
}

.com-content-article .item-image img {
    display: block;
    width: 100%;
    height: auto;
}

main {
    background-color:#f3f3f3;
    border-radius: 7px;
    border-color:#f3f3f3 !important;
    border-style:solid;
}

.fullscreen {
    width:100% !important;
    border-radius: 7px;
    border-style: solid;
    border-color:#f3f3f3;
}

.picker-image {
    float:right;
}

footer {
    margin-top: auto;
}

/* Button sichtbar machen */
.sidebar-toggler {
    border: 1px solid #ccc;
    background-color: #fff; /* Hintergrund sichtbar */
    padding: 0.25rem 0.5rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* Hamburger-Icon manuell einfügen */
.sidebar-toggler .navbar-toggler-icon {
    display: inline-block;
    width: 1.5em;
    height: 1.5em;
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3e%3cpath stroke='rgba%280,0,0,0.5%29' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 100% 100%;
}

.fontsize-switcher a.fontsmaller {
    margin: 0 5px;
    text-decoration: none;
    font-weight: bold;
    cursor: pointer;
    font-size: 14px;
    color:#00a5bc;
}

.fontsize-switcher a.fontreset {
    margin: 0 5px;
    text-decoration: none;
    font-weight: bold;
    cursor: pointer;
    font-size: 18px;
    color:#00a5bc;
}

.fontsize-switcher a.fontbigger {
    margin: 0 5px;
    text-decoration: none;
    font-weight: bold;
    cursor: pointer;
    font-size: 22px;
    color: #00a5bc;
}

a:link {
    color: #00a5bc;
    text-decoration: none;
}
a:visited {
    color: #00a5bc;
}
a:hover {
    color: #00a5bc;
    text-decoration: underline;
}
a:active {
    color: #00a5bc;
}

/* Menüpunkt mit Klasse highlight */
.nav-link.highlight {
    text-transform: uppercase;   /* alles Großbuchstaben */
    color: #00a5bc !important;      /* gewünschte Schriftfarbe */
    /* optional: fett */
}

/* Optional: Hover-Effekt */
.nav-link.highlight:hover {
    color: #00a5bc;                 /* hellere Farbe beim Hover */
}

/* Menüpunkt mit Klasse call_to_action */
.nav-link.call_to_action {
    color: gold !important;      /* gewünschte Schriftfarbe */
    /* optional: fett */
    font-weight:bold;
    font-style:italic;
}

.nav-link.call_to_action::before {
    content: "\f590";       /* Unicode des Font Awesome Icons */
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    margin-right: 0.5rem;   /* Abstand zum Text */
    font-style:normal;
}

/* Optional: Hover-Effekt */
.nav-link.call_to_action:hover {
    color: gold;                 /* hellere Farbe beim Hover */
}

a.nav-link:link, a.dropdown-item:link {
    color: #000;
    text-decoration: none;
}
a.nav-link:visited, a.dropdown-item:visited {
    color: #000;
}
a.nav-link:hover, a.dropdown-item:hover {
    color: #000;
    text-decoration: none;
}
a.nav-link:active, a.dropdown-item:active {
    color: #000;
}

.sticker {
    position: absolute;
    top: -20px;
    right: -20px;
    background: gold;
    border: 6px solid gold;       /* äußerer goldener Rahmen */
    border-radius: 50%;
    padding: 1.5rem 1.8rem;
    transform: rotate(20deg);
    box-shadow:
            inset 0 0 0 2px white,    /* innerer weißer Rahmen */
            0 6px 12px rgba(0,0,0,0.25); /* äußerer Schatten */
    z-index: 1050;
}

.sticker p {
    margin: 0;
    font-weight: bold;
    text-align: center;
    line-height: 1.6;
}

.sticker a:link {
    color: #fff;
    text-decoration: none;
}
.sticker a:visited {
    color: #fff;
}
.sticker a:hover {
    color: #fff;
    text-decoration: none;
}
.sticker a:active {
    color: #fff;
}

.vis_mandatory, div.required > label.visCSSlabel::after {
    color: #00a5bc !important;
}

.visform .btn {
    border: 1px solid #00a5bc;
    box-shadow:
            0 6px 12px rgba(0,0,0,0.25); /* äußerer Schatten */
}

.visform .btn:hover {
    border: 1px solid #00a5bc;
    box-shadow:
            0 6px 12px rgba(0,0,0,0.25); /* äußerer Schatten */
}

.visform input.error, .visform textarea.error {
    border: 1px dotted #00a5bc !important;
}

.visform:not(.bt5):not(.uikit3) label.error {
    font-size: 10px;
    color: #fff;
    padding: 10px;
    background-color: #00a5bc;
    border-radius: 5px;
    display: inline-block !important;
    max-width: 60%;
    margin: 0 0 0 30%;
}

.visform:not(.bt5):not(.uikit3) p.errorcontainer::after {
    width: 0;
    height: 0;
    display: block;
    margin-left: 35%;
    border-top: 12px solid #00a5bc;
    border-right: 12px solid transparent;
    border-left: 12px solid transparent;
    content: "";
    margin-bottom: 12px;
}

.btn-secondary {
    --bs-btn-color: #fff;
    --bs-btn-bg: #00a5bc !important;
}