@font-face {
    font-family: 'Source Sans 3';
    font-style: normal;
    font-weight: 400;
    src: url('/fonts/source-sans-3-v19-latin-regular.woff2') format('woff2');
    font-display: swap;
}
@font-face {
    font-family: 'Source Sans 3';
    font-style: italic;
    font-weight: 400;
    src: url('/fonts/source-sans-3-v19-latin-italic.woff2') format('woff2');
    font-display: swap;
}
@font-face {
    font-family: 'Source Sans 3';
    font-style: normal;
    font-weight: 700;
    src: url('/fonts/source-sans-3-v19-latin-700.woff2') format('woff2');
    font-display: swap;
}
@font-face {
    font-family: 'Source Sans 3';
    font-style: italic;
    font-weight: 700;
    src: url('/fonts/source-sans-3-v19-latin-700italic.woff2') format('woff2');
    font-display: swap;
}

:root {

    --color-primary: #2171b5;
    --color-primary-dark: #3245a3;
    --color-primary-light: #eff3ff;
    --color-accent: #fc6c00;

    --color-success: #eff3ff;

    --color-success-transparent: #9c28;
    --color-error: #c44;
    --color-error-dark: #dc3545;

    --color-favorit: #df3343;
    --color-favorit-hover: #e22;
    --color-favorit-bg: #fff0f0;
    --color-favorit-bg-hover: #fee;
    --color-favorit-titel: #ffc5c5;

    --color-slider-track: lightgray;
    --color-slider-umkreis: #f6cbcb;
    --color-slider-umkreis-aktiv: #b7ddc4;
    --color-slider-thumb-light: #6cb0d7;
    --color-slider-thumb-dark: #2171b5;
    --color-slider-thumb-hover-light: #5a6fd4;
    --color-slider-thumb-hover-dark: #3a4da3;

    --color-text: #222;
    --color-text-muted: #555;
    --color-text-light: #666;
    --color-text-lighter: #888;
    --color-text-link: #444;
    --color-text-breadcrumb: rgb(33 113 182);

    --color-bg: #fff;
    --color-bg-light: #f8f9fa;
    --color-bg-muted: #f2f2f2;
    --color-bg-overlay: #00000014;
    --color-bg-overlay-light: #00000010;
    --color-bg-overlay-lighter: #00000008;
    --color-bg-h3-light: #ccc;
    --color-article-bg: #f1f1f1;
    --color-article-bg-hover: #ffffff;
    --color-objekttitel-bg: #e0e0e0;
    --color-preis-bg: #ccc;
    --color-preis-bg-overlay: rgba(204, 204, 204, 0.85);

    --color-border: #ccc;
    --color-border-light: #ddd;
    --color-border-dark: #999;

    --link-hover-color: var(--color-primary);
    --hover-border: 1px solid var(--color-border);
    --hover-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);

    --mobile-tab: #f5d442;
    --mobile-active-tab: #a8e6a1;
}

html {
    overflow-x: hidden;
    max-width: 100%;
}

body {
    font-family: "Source Sans 3", sans-serif;
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: normal;
    padding-left: 0.5em;
    padding-right: 0.5em;
    margin-right: auto;
    margin-left: auto;
    max-width: 73em;
    min-width: 0;
    font-size: 120%;
    margin-top: 0;
    color: var(--color-text);
    box-sizing: border-box;
    overflow-x: hidden;
}

a {
    color: var(--color-text-link);
}

.site-title {
    margin-bottom: 0px;
    margin-top: 1em;
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
}

.site-title a {
    font-size: 4.5em;
    line-height: 1em;
    color: var(--color-primary);
    font-weight: bolder;
    text-decoration: none;
}

.site-title a:hover {
    text-decoration: none;
}

.site-title .logo-o {
    color: var(--color-accent);
}

.claim {
    margin-left: auto;
    padding-left: 1em;
    font-style: italic;
    color: var(--color-text-light);
    align-self: flex-end;
    margin-bottom: 0.15em;
}

nav {
    background-color: var(--color-bg-muted);
    margin-bottom: 0.5em;
}

nav hr {
    border: 4px solid var(--color-primary-dark);
    padding-top: 0px;
}

.menu li {
    display: inline;
    padding: 0.5em;
    padding-right: 2em;
    padding-left: 2em;
    min-width: 6em;
}

.menu ul {
    color: var(--color-text-muted);
    padding-inline-start: 4px;
    margin: 0;
}

.breadcrumb {
    background: none;
    background-color: transparent;
}

.tpl-breadcrumb {

    background: none;
    background-color: transparent;
}

.breadcrumb a {
    font-weight: lighter;
    color: var(--color-text-breadcrumb);
    text-decoration: none;
    padding-right: 1em;
}

.index-layout {
    display: block;
}

.index-layout h3 {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-weight: 500;
    font-size: x-large;
    background: unset;
    background-color: var(--color-bg-overlay);
    max-width: 20em;
    padding-left: 1em;
    color: var(--color-text-muted);
    margin-bottom: 0;
}

aside {
    float: left;
    width: 16em;
    margin-top: 1em;
}

aside h3 {
    margin-top: 0;
    margin-bottom: 0;
}

aside li {
    margin-bottom: 10px;
    list-style: none;
}

aside ul {
    padding-left: 0;
    margin: 0;
}

main {
    padding-top: 1.8em;
}

h1 {
    color: var(--color-primary) !important;
    margin:  0 0 0.5 0;
    text-align: center;
    font-size: larger;
    padding-top: .06em;
    background: var(--color-primary-light);
    text-align: center;
}

h2 {
    font-weight: normal;
    color: var(--color-text-breadcrumb);
    font-size: xx-large;
}

h3 {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-weight: 500;
    font-size: x-large;
    background: linear-gradient(to bottom, transparent 0%, transparent 60%, var(--color-success) 60%, var(--color-success) 100%);
    max-width: 20em;
    padding-left: 1em;
    color: var(--color-text-muted);
    margin-bottom: 0;
}

h4 {
    font-weight: 500;
    font-size: 100%;
    margin: 0;
    margin-bottom: -0.7em;
    padding-left: 1em;
}

ol {
    padding-inline-start: 0px;
    margin-block-start: 0px;
    margin-block-end: 0px;
}

ol li {
    display: inline;

}

button {
    font-size: 1em;
    background-color: var(--color-success-transparent);
    border: none;
}

aside button {
    font-size: 1em;
    background-color: var(--color-success-transparent);
    border: none;
    min-width: 100%;
    color: var(--color-text-muted);
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

.spinner {
    width: 20px;
    height: 20px;
    border: 3px solid #e0e0e0;
    border-top-color: #3245a3;
    border-radius: 50%;
    animation: spin 0.9s linear infinite;
}

.filter-init-spinner {
    display: flex;
    align-items: center;
    gap: 0.6em;
    padding: 0.5em 0 0.9em;
    color: #667085;
    font-size: 0.92em;
}

.filter-init-spinner .spinner {
    width: 18px;
    height: 18px;
    border-width: 2px;
}

.tpl-filter.is-initializing {
    position: relative;
}

.tpl-filter.is-initializing .filter-body {
    pointer-events: none;
    user-select: none;
}

.filter-init-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(245, 247, 250, 0.88);
    z-index: 30;
}

.filter-init-overlay-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.7em;
    color: #475467;
    font-size: 0.95em;
}

.filter-init-overlay .spinner {
    width: 48px;
    height: 48px;
    border-width: 4px;
}

.karten-box.is-loading,
#exposee_positionskarte.is-loading {
    position: relative;
}

.karten-box.is-loading::after,
#exposee_positionskarte.is-loading::after {
    content: '';
    position: absolute;
    inset: 0;
    margin: auto;
    width: 50%;
    height: 50%;
    min-width: 56px;
    min-height: 56px;
    max-width: 160px;
    max-height: 160px;
    border: 3px solid rgba(255, 255, 255, 0.85);
    border-top-color: #3245a3;
    border-radius: 50%;
    animation: spin 0.9s linear infinite;
    z-index: 12;
    pointer-events: none;
}

.anbieter-rating-below-logo {
    display: block;
    width: 100%;
    max-width: 192px;
    padding-inline: 8px;
    box-sizing: border-box;
    margin-top: 0.5em;
    line-height: 1.2;
    text-align: center;
}

.anbieter-rating-below-logo .anbieter-rating {
    display: inline-flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: center;
    align-items: center;
    gap: 0.08em;
    max-width: 100%;
    font-size: 1.2em;
    vertical-align: top;
    text-align: start;
}

.anbieter-rating-below-logo .anbieter-rating .fullStar,
.anbieter-rating-below-logo .anbieter-rating .lightStar,
.anbieter-rating-below-logo .anbieter-rating .basicStar {
    float: none;
    flex-shrink: 0;
}