/* prio.css Version 1.0 - Critical CSS für Above-the-Fold */
/* Wird inline oder als erstes CSS geladen für schnelles LCP */
/* Coding-Rules: 1.2, Direktiven: 2.43 */

/* === Font-Face (Critical) - font-display: swap für sofortiges Rendering === */
@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: normal;
    font-weight: 700;
    src: url('/fonts/source-sans-3-v19-latin-700.woff2') format('woff2');
    font-display: swap;
}

/* === CSS Custom Properties - Farbschema === */
/* Zum Wechseln des Farbschemas nur diese Variablen ändern */
:root {
    /* === Primärfarben (Marke) === */
    --color-primary: #2171b5;           /* Logo, H1, wichtige Elemente */
    --color-primary-dark: #3245a3;      /* Links, Hover, Navigation */
    --color-primary-light: #eff3ff;     /* H1 Hintergrund, helle Akzente */
    --color-accent: #fc6c00;            /* Logo "o", Highlights */
    
    /* === Sekundärfarben (Akzente) === */
    --color-success: #b2e49a;              /* Grün: Preis, Buttons, H3-Unterstrich */
    --color-success-transparent: #9c28; /* Grün mit Transparenz */
    --color-error: #c44;                /* Rot: Fehler, Warnungen */
    --color-error-dark: #dc3545;        /* Rot dunkel */
    
    /* === Favoriten-Farben === */
    --color-favorit: #df3343;              /* Herz aktiv, Überschriften */
    --color-favorit-hover: #e22;        /* Herz Hover */
    --color-favorit-bg: #fff0f0;        /* Heller Hintergrund */
    --color-favorit-bg-hover: #fee;     /* Hintergrund Hover */
    --color-favorit-titel: #ffc5c5;   /* Objekttitel-Hintergrund (Orange) */
    
    /* === Slider-Farben === */
    --color-slider-track: lightgray;    /* Standard-Track */
    --color-slider-umkreis: #f6cbcb;    /* Umkreis inaktiv (rosa) */
    --color-slider-umkreis-aktiv: #b7ddc4; /* Umkreis aktiv (grün) */
    --color-slider-thumb-light: #6cb0d7;  /* Thumb Gradient hell */
    --color-slider-thumb-dark: #2171b5;   /* Thumb Gradient dunkel */
    --color-slider-thumb-hover-light: #5a6fd4; /* Thumb Hover hell */
    --color-slider-thumb-hover-dark: #3a4da3;  /* Thumb Hover dunkel */
    
    /* === Textfarben === */
    --color-text: #222;                 /* Haupttext */
    --color-text-muted: #555;           /* Gedämpfter Text, H3 */
    --color-text-light: #666;           /* Claim, Beschreibungen */
    --color-text-lighter: #888;         /* Sehr heller Text */
    --color-text-link: #444;            /* Standard-Links */
    --color-text-breadcrumb: rgb(33 113 182); /* Breadcrumb */
    
    /* === Hintergrundfarben === */
    --color-bg: #fff;                   /* Seiten-Hintergrund */
    --color-bg-light: #f8f9fa;          /* Helle Bereiche */
    --color-bg-muted: #f2f2f2;          /* Navigation, Aside */
    --color-bg-overlay: #00000014;      /* Transparente Overlays */
    --color-bg-overlay-light: #00000010;
    --color-bg-overlay-lighter: #00000008;
    --color-bg-h3-light: #ccc;
    --color-article-bg: #f1f1f1;        /* Article Hintergrund */
    --color-article-bg-hover: #ffffff;  /* Article Hover (hellblau) */
    --color-objekttitel-bg: #e0e0e0;    /* Objekttitel-Zeile Hintergrund (grau) */
    --color-preis-bg: #ccc;             /* Preis Hintergrund */
    --color-preis-bg-overlay: rgba(204, 204, 204, 0.85); /* Preis Overlay (transparent) */
    
    /* === Rahmen & Trennlinien === */
    --color-border: #ccc;               /* Standard-Rahmen */
    --color-border-light: #ddd;         /* Helle Rahmen */
    --color-border-dark: #999;          /* Dunkle Rahmen */
    
    /* === Hover-Effekte === */
    --link-hover-color: var(--color-primary);
    --hover-border: 1px solid var(--color-border);
    --hover-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

/* === Basis-Layout (Critical) === */
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: 69em;
    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);
}

/* === Header & Logo (Critical - Above the Fold) === */
.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;
}

/* === Navigation (Critical) === */
nav {
    background-color: var(--color-bg-muted);
    margin-bottom: 1em;
}

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 (Critical) === */
.breadcrumb {
    background-color: unset;
}

.tpl-breadcrumb {
    margin-left: 20em;
    background-color: unset;
}

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

/* === Index-Layout (Critical - LCP Element) === */
.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 & Main (Critical) === */
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;
}

/* === Überschriften (Critical) === */
h1 {
    color: var(--color-primary) !important;
    margin: 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;
}

/* === Listen (Critical für Navigation) === */
ol {
    padding-inline-start: 0px;
    margin-block-start: 0px;
    margin-block-end: 0px;
}

ol li {
    display: inline;
    /* padding-right: 0.77em; */
}

/* === Buttons (für Filter, etc.) === */
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);
}

/* === 404-Fehlerseiten === */
.error-404-main {
    text-align: center;
    max-width: 1200px;
    margin: 0 auto;
    padding: 2rem;
}

.error-404-main h1 {
    font-size: 200%;
    margin-bottom: 1rem;
    text-align: center;
}

.error-404-main p {
    font-size: 200%;
    margin-bottom: 1rem;
    line-height: 1.5;
}

.error-404-main a {
    color: var(--link-hover-color, #3245A3);
    text-decoration: underline;
}

.error-404-bild {
    margin: 2rem auto;
    max-width: 1024px;
}

.error-404-bild img {
    max-width: 100%;
    height: auto;
    display: block;
    margin: 0 auto;
}

.error-404-toporte {
    display: flex;
    justify-content: center;
    gap: 4rem;
    flex-wrap: wrap;
    margin-top: 2rem;
}

.error-404-toporte > div {
    text-align: left;
}

.error-404-toporte h3 {
    font-size: 150%;
}

/* prio.css Version 1.1 */
/* Coding-Rules: 1.2, Direktiven: 2.43 */
/* Critical CSS für schnelles Above-the-Fold Rendering */