/* Nur im Quellort verändern */

/* === CSS Custom Properties (Globale Variablen) === */
:root {
    --link-hover-color: var(--color-primary-dark);
}

/* Lokale Fonts - DSGVO-konform, keine externen Requests */
@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;
}

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: #222;
    box-sizing: border-box;
    overflow-x: hidden;
    /* font-stretch: condensed; */
}


a {
    color: #444;
}

p{
    line-height: 1.3em;
    margin: 0.2em;
}

nav{
    background-color: rgb(242,242,242);
    margin-bottom: 1em;
}

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

.ObjektData{
    font-weight: 700;
    line-height: 140%;
    max-height: 1.4em;
    max-width: 100%;
    overflow: hidden;
}

.Space{
   line-height: 49%;
}

.noimage{
  float: left;
  width: 192px;
  height: 144px;
  line-height: 7em;
  text-align: center;
  background-color: #ccc;
  color: white;
  margin-right: 16px;
  color: #777;
}

.menu ul{
    color: #585858;
    padding-inline-start: 4px;
    margin:0;
}
/* ############################################################################################# */
.wfl {
    float:left;
    padding-right:1em;

}
/* Symbol-Definition ausgelagert nach symbols.css (Unicode-Escapes gegen Encoding-Probleme) */

.jahr {
    float:left;
    padding-right:1em;
}
/* Symbol-Definition ausgelagert nach symbols.css */

.grund {
    float:left;
    padding-right:1em;
}
/* Symbol-Definition ausgelagert nach symbols.css */

.additional {
    float:left;
    padding-right:1em;
}
/* Symbol-Definition ausgelagert nach symbols.css */

.datecreated {
    float: right;
    font-weight: 500;
    opacity: 50%;
}
/* Symbol-Definition ausgelagert nach symbols.css */

.zimmer {
    float:left;
    padding-right:1em;
}
/* Symbol-Definition ausgelagert nach symbols.css */

.Rating{
    float: right;
    margin-top: -1.6em;
    padding-right: 1em;
    /* background-color: var(--color-success); */
    opacity: 1;
    padding-left: 1em;
    /* display: inline-block; - entfernt, da float bereits block erzwingt */
}

/* Rating-Zahl visuell ausblenden (SEO-sicher: bleibt für Schema.org + Screenreader) */
/* Technik: "visually hidden" - kein Google-Penalty, da semantisch korrekt */
.Rating [itemprop="ratingValue"] {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.fullStar{
    position: relative;
    transform: rotate(10deg);
    float: left;
    /* padding-right: 1em; */
    /* display: inline-block; - entfernt, da float bereits block erzwingt */
    font-size: 1.4em;
    font-weight: bold;
    background: linear-gradient(115deg, #ffffff 20%, #ffa646 40%, #ffe660 60%, #ca6600 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;

  /* Text-Stroke (Chrome/Safari) */
    -webkit-text-stroke: 0.5px #b8860b; 

  /* mehrfache Schatten */
    text-shadow: 0 0 5px rgba(255, 215, 0, 0.7), 0 0 10px rgb(255 255 255 / 77%);
}

.fullStar::after {
  content: "";
  position: absolute;
  z-index: 900;
  top: 23%;
  left: 37%;
  width: 61%;
  height: 35%;
  pointer-events: none;
  background: radial-gradient(circle, 
    rgba(255,255,255,1) 0%, 
    rgba(255,255,255,0) 60%);
  transform: rotate(-50deg);
  opacity: 1;
}

.lightStar{
    position: relative;
    float: left;
    transform: rotate(10deg);

    /* padding-right: 1em; */
    /* display: inline-block; - entfernt, da float bereits block erzwingt */
    font-size: 1.4em;
    font-weight: bold;
    background: linear-gradient(135deg, #faf6de 0%, #a4a4a4 30%, #e8e8e8 60%, #777 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;

  /* Text-Stroke (Chrome/Safari) */
    -webkit-text-stroke: 0.5px #777; 

  /* mehrfache Schatten */
    /* text-shadow:
    0 0 5px rgba(255, 215, 0, 0.7),
    0 0 10px rgba(255, 215, 0, 0.5),
    0 1px 2px rgba(0, 0, 0, 0.5); */
}

.lightStar::after {
  content: "";
  position: absolute;
  top: 23%;
  left: 31%;
  width: 60%;
  height: 36%;
  pointer-events: none;
  background: radial-gradient(circle, 
    rgba(255,255,255,1) 0%, 
    rgba(255,255,255,0) 55%);
  transform: rotate(-44deg);
  opacity: 1;
}

.basicStar{

    position: relative;
    transform: rotate(10deg);
    opacity: 80%;
    float: left;
    /* padding-right: 1em; */
    /* display: inline-block; - entfernt, da float bereits block erzwingt */
    font-size: 1.4em;
    font-weight: bold;
    background: linear-gradient(115deg, #ffffff 20%, #50b572 40%, #ffffff 60%, #074213 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: #75dd6433;
    -webkit-text-stroke: 0.5px #22347873;
    text-shadow: 0 0 5px rgb(197 255 230 / 5%), 0 0 10px rgb(255 255 255 / 77%);
}

.basicStar::after {
    content: "";
    position: absolute;
    z-index: 900;
    top: 23%;
    left: 37%;
    width: 61%;
    height: 35%;
    pointer-events: none;
    background: radial-gradient(circle, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0) 60%);
    transform: rotate(-50deg);
    opacity: .8;
}

.Objekttitel-Wrapper {
    /* Wrapper über volle Breite mit grauem Hintergrund */
    width: 100%;
    background-color: var(--color-success);
}

.Objekttitel {
    /* Der Container bekommt den grünen Hintergrund */
    background-color: var(--color-success);
    /* Breite auf 90% des Article-Bereichs begrenzen */
    max-width: 85%;
    margin: 0;
    overflow: hidden;
    position: relative;
}

.Objekttitel h4 {
    width: 100%;
    max-width: 100%;
    margin: 0;
    white-space: nowrap;
    overflow: hidden;
    color: #222;
    font-style: italic;
    font-weight: 600;
    letter-spacing: -0.01em;
    padding-right: 2em;
}

/* Fade-Effekt am rechten Rand des Titels */
.Objekttitel::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 20%;
    background: linear-gradient(to right, transparent, var(--color-success));
    pointer-events: none;
}
  

nav hr{
    border:4px solid #3245A3;
    padding-top:0px;
}

.site-title{
    margin-bottom: -28px;
}

h1 {
    color:#000000;
    margin:0;
    text-align: center;
    font-size: larger;
}

.exposee_main_title h1
{
    width: 31em;
    margin: 0;
    white-space: nowrap;
    overflow: hidden;
    color: black;
    background: linear-gradient(to right, black 80%, rgba(0, 0, 0, 0) 90%, rgba(0, 0, 0, 0) 100%);
    background-size: 36em 100%;
    background-repeat: no-repeat;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    padding-left: 1em;
}

h2 {
    font-weight: normal;
    color:rgb(88, 88, 88);
    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: #555;
    margin-bottom:0;
}
.index-layout h3 {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-weight: 500;
    /* font-size: x-large; */
    background: unset;
    Background-color:#00000014;
    max-width: 20em;
    padding-left: 1em;
    color: #555;
    margin-bottom:0;
}

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

h3 button{
 font-size: 0.6em;   
 min-width: 7em;
}

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

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

/* === Site-Logo (Header) === */
.site-logo { /* Logo-Link im Header */ }

.site-title{
    margin-bottom: 0px;
    margin-top: 1em;
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end; /* Claim und Share bündig mit Logo-Unterkante */
}

.site-title a {
    /* margin-top: 1em; */
    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);
}

.breadcrumb{
    /* font-weight: bolder; */
    /* color:rgb(88, 88, 88); */
    background-color: unset;
    /* background-color: rgb(242, 242, 242); */
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 0.3em;
}

.breadcrumb-prefix {
    color: var(--color-text-breadcrumb);
    font-weight: lighter;
    white-space: nowrap;
    padding-right: .5em;
}

.breadcrumb ol {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    margin: 0;
    padding: 0;
    list-style: none;
}

.breadcrumb ol li {
    display: flex;
    align-items: baseline;
}

.breadcrumb ol li:not(:last-child)::after {
    content: ">";
    margin: 0 0.4em;
    color: var(--color-text-breadcrumb);
    font-weight: normal;
}

.tpl-breadcrumb {
    margin-left: 20em;
    /* font-weight: bolder; */
    /* color:rgb(88, 88, 88); */
    background-color: unset;
    /* background-color: rgb(242, 242, 242); */
}
.tpl-aside3-unterkategorien{
    font-size: 117%;
}

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

/* v2.61: Breadcrumb-Filter-Anzeige */
.breadcrumb-filter {
    display: inline-flex;
    align-items: center;
    gap: 0.4em;
    margin-left: 0.5em;
    padding: 0.2em 0.6em;
    background-color: var(--color-accent-light, #e8f4f8);
    border-radius: 4px;
    font-size: 0.9em;
    color: var(--color-text-muted, #666);
}
.breadcrumb-filter-label {
    font-weight: normal;
    color: var(--color-text-muted, #888);
}
.breadcrumb-filter-text {
    font-weight: 500;
    color: var(--color-primary, #1a73e8);
}
.breadcrumb-filter-reset {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.4em;
    height: 1.4em;
    padding: 0;
    margin-left: 0.3em;
    border: none;
    background-color: transparent;
    color: var(--color-text-muted, #888);
    font-size: 0.9em;
    cursor: pointer;
    border-radius: 50%;
    transition: background-color 0.15s ease, color 0.15s ease;
}
.breadcrumb-filter-reset:hover {
    background-color: var(--color-danger-light, #ffebee);
    color: var(--color-danger, #d32f2f);
}

/* Breadcrumb-Current: Visueller Hinweis dass klickbar */
#breadcrumb-current {
    font-weight: 500;
}

main {
    padding-top:1.8em;
}

.img {
    top:50%;
}

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

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

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

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

form{
    font-size: smaller;
    text-align: justify;
}
input {
    font-size: medium;
    margin-left:0em;
}
button{
    font-size: 1em;
    background-color: var(--color-success);
    border: none;
}

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

input,
textarea,
select {
    font-size: medium;
    padding: 0.3em 0.4em;
    border: 1.5px solid #c2c6d1;
    border-radius: 0.5em;
    background: #f8f9fa;
    color: #222;
    transition: border-color 0.2s, box-shadow 0.2s;
    box-shadow: 0 1px 1px rgba(50,69,163,0.07);
    outline: none;
    margin-bottom: 0.2em;
}

input:focus,
textarea:focus,
select:focus {
    border-color: var(--color-primary-dark);
    box-shadow: 0 0 0 2px var(--color-primary-dark)22;
    background: #fff;
}

.box {
    margin-bottom: 0.5em;
    background-color: #00000008;
    padding:1em;
    margin-top: 1.5em;
}

.box h3{
    background-color: #00000014;
    Margin-left: -1em;
    margin-right: -1em;
    margin-top: -1em;
    padding-left: 1em;
    padding-right: 1em;
    padding-top: .5em;
    padding-bottom: .5em;
    color: black;
    font-size:100%;
}

.box .Preisinfo{
    margin: 0;
    font-size: smaller;
    font-weight: 300;
    font-style: italic;
}

/* =====================
   basic_data: Zwei-Spalten-Layout für rows
   ===================== */
.basic-data-row {
  display: flex;
  flex-direction: row;
  gap: 2em;
}
.basic-data-row .basic-data-col {
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  gap: 0.5em;
}

/* Optional: Style für .data-item, damit die Spalten klarer wirken */
.basic-data-row .data-item {
  margin-bottom: 0.3em;
}

/* =====================
   Energieausweis-Balken nach deutschen Vorgaben
   ===================== */
.energie {
margin-top: 2em;}
.energy-bar {
  width: 300px;
  position: relative;
  margin-left: 2em;
  margin-top:2em;
}
.energy-gradient {
  width: 100%;
  height: 40px;
  display: flex;
  align-items: center;
  position: relative;
  background: linear-gradient(90deg, #02973B 0%, #4CAF50 7.5%, #8BC34A 15%, #CDDC39 25%, #FFEB3B 38%, #FFC107 49%, #FF9800 60%, #FF5722 75%, #F44336 85%, #BDBDBD 100%);
  border-radius: 8px;
  box-shadow: 0 2px 8px #0001;
}
.energy-classes {
  display: flex;
  width: 100%;
  justify-content: space-between;
  text-align: center;
  position: absolute;
  top: 0;
  left: 0;
  height: 40px;
  width: 100%;
  pointer-events: none;
}
.energy-class {
  flex: 1 1 0;
  font-size: 1.1em;
  color: #333;
  font-weight: normal;
  line-height: 40px;
  z-index: 2;
}
.energy-class.active {
  font-weight: bold;
  background: none;
}
.energy-marker {
  position: absolute;
  top: -20px;
  left: 0;
  transform: translateX(-50%);
  z-index: 10;
  width: 120px;
  pointer-events: none;
  margin-top: -0.5em;
  text-align: center;
}
.marker-value {
  display: block;
  font-size: 13px;
  font-weight: bold;
  margin-bottom: 2px;
  color: #222;
}
.marker-icon {
  width: 22px;
  height: 18px;
  display: block;
  margin: 0 auto;
}

/* =====================
   Unbenutzte CSS-Klassen/IDs (Karteileichen, auskommentiert)
   ===================== */
/*
.Nachbarn li{
    margin-bottom: 10px;
    list-style: none;
    border-top-style: solid;
    border-top-width: thin;
    border-top-color: #ffffff73;
    border-left-style: solid;
    border-left-width: thin;
    border-left-color: #ffffff73;
    border-bottom-style: solid;
    border-bottom-width: thin;
    border-bottom-color: #00000008;
    padding-left: .5em;
    margin-left: -.5em;
}

.ortsliste{
    margin:auto;
}

.Ortsliste2spaltig ul{
    column-count: 2;
    list-style: none;
    display: block;
    page-break-inside: avoid;
    break-inside: avoid;
    padding-top: 1.5em;
}

.zweispaltig{
    column-count: 2;
    padding-top: 0.5em;
    padding-bottom: 1.5em;
    column-gap: 2em;
}

.zweispaltig .box{
    margin-top:0;
}

.zweispaltig ul{
    list-style: none;
}

.Ortsliste2spaltig li{
    padding-bottom: 8px;
    list-style:none;
    color:#555;
}

.werbebox {
    margin-top: 2em;
    padding:0;
    min-height: 180px;
}
.werbebox figure{
    width:100%;
    padding:0;
    
}
.quickjumper{
    background-color: #f2f2f2;
    padding: 0.5em;
}
.quickjumper ul{
    padding-left: 0;
    margin: 0;
    display: inline;
    color:rgb(88, 88, 88);
}
.quickjumper li{
    list-style: none;
    display: inline-block;
    padding-left: 1em;
    padding-right: 1em;
}

.statistikbox h3{
    background-color: #00000014;
    Margin-left: -1em;
    margin-right: -1em;
    margin-top: -1em;
    padding-left: 1em;
    padding-right: 1em;
    padding-top: .5em;
    padding-bottom: .5em;
    color: black;
    font-size:100%;
}

.statistikbox ul{
    font-size:90%;
}

.Landkreis {
    margin-top: -0.8em;
    margin-bottom: 1.5em;
    font-size:85%;
}

.StatistikDetails {
    float: right;
    font-weight: 500;
    font-size: smaller;
}
*/
/* =====================
   Leere Container für fehlende/erwartete Bereiche
   Diese Klassen werden in den Templates verwendet und können später mit Styles gefüllt werden.
   ===================== */

/* === Layout & Container === */
.sidebar { /* Seitenleiste */ }
.panel { /* Panel-Container */ }
.box { /* Box-Container */ }
.content { /* Inhaltsbereich */ }
.main { /* Hauptbereich */ }
.section { /* Abschnitt */ }
.col { /* Spalte */ }
.container { /* Container */ }
.row { /* Zeile */ }

/* === Provider/Anbieter === */
.sidebar-provider { /* Anbieter in Sidebar */ }
.provider-logo { /* Anbieter-Logo */ }
.provider-name { /* Anbieter-Name */ }
.provider-street { /* Anbieter-Straße */ }
.provider-city { /* Anbieter-Stadt */ }
.provider-address { /* Anbieter-Adresse */ }
.provider-email { /* Anbieter-E-Mail */ }
.provider-email h5 { margin: 0.5em 0 0.2em 0; font-size: 0.9em; color: #555; }

/* === Email-Security: Verschlüsselte/Entschlüsselte Emails === */
.email-verschluesselt {
    /* Schriftart */ font-family: 'Source Sans 3', monospace;
    /* Zeichenabstand */ letter-spacing: 0.05em;
    /* Schriftfarbe */ color: #999;
    /* Schriftgröße */ font-size: inherit;
    /* Cursor */ cursor: default;
    /* Nicht selektierbar */ user-select: none;
    /* Übergang */ transition: color 0.3s ease;
    /* Hintergrund */ background: transparent;
    /* Rahmen */ border: none;
    /* Innenabstand */ padding: 0;
    /* Außenabstand */ margin: 0;
}
.email-entschluesselt {
    /* Schriftart */ font-family: 'Source Sans 3', sans-serif;
    /* Zeichenabstand */ letter-spacing: normal;
    /* Schriftfarbe */ color: #2a7ae2;
    /* Schriftgröße */ font-size: inherit;
    /* Cursor */ cursor: pointer;
    /* Selektierbar */ user-select: text;
    /* Unterstreichung */ text-decoration: underline;
    /* Unterstreichungsfarbe */ text-decoration-color: transparent;
    /* Übergang */ transition: color 0.2s ease, text-decoration-color 0.2s ease;
    /* Hintergrund */ background: transparent;
    /* Rahmen */ border: none;
    /* Innenabstand */ padding: 0;
    /* Außenabstand */ margin: 0;
}
.email-entschluesselt:hover {
    /* Schriftfarbe Hover */ color: #1a5bb5;
    /* Unterstreichungsfarbe Hover */ text-decoration-color: #1a5bb5;
    /* Hintergrund Hover */ background: transparent;
}
.anbieter-email-zentrale .email-verschluesselt { /* Zentrale Email im Anbieter-Header verschlüsselt */ }
.anbieter-email-zentrale .email-entschluesselt { /* Zentrale Email im Anbieter-Header entschlüsselt */ }
.contact-email .email-verschluesselt { /* Direktmail im Exposee verschlüsselt */ }
.contact-email .email-entschluesselt { /* Direktmail im Exposee entschlüsselt */ }
.contact-email-feedback .email-verschluesselt { /* Feedbackmail im Exposee verschlüsselt */ }
.contact-email-feedback .email-entschluesselt { /* Feedbackmail im Exposee entschlüsselt */ }
.makler-email .email-verschluesselt { /* Makler-Email in Makler-Karte verschlüsselt */ }
.makler-email .email-entschluesselt { /* Makler-Email in Makler-Karte entschlüsselt */ }
.makler-email-page .email-verschluesselt { /* Makler-Email auf Maklerseite verschlüsselt */ }
.makler-email-page .email-entschluesselt { /* Makler-Email auf Maklerseite entschlüsselt */ }
.provider-phone { /* Anbieter-Telefon */ }
.provider-website { /* Anbieter-Website */ }
.provider-imprint { /* Anbieter-Impressum */ }
.provider-number { /* Anbieter-Nummer */ }

/* === Exposee Hauptbereiche === */
.exposee_main_title { /* Exposee Haupttitel */ }
.exposee_footer { /* Exposee Footer */ }
.exposee-footer { /* Exposee Footer (alt) */ }
.exposee_slider { /* Exposee Slider */ }
.typ { /* Objekttyp */ }
.preis { /* Preis */ }
.merkmale { /* Merkmale */ }
.lage { /* Lage */ }
.lage_detail { /* Lage Detail */ }
.lagetext { /* Lagetext */ }
.weitere_infos { /* Weitere Infos */ }
.anbieter_detail { /* Anbieter Detail */ }
.anbieter_impressum { padding-bottom: 2em; /* Anbieter Impressum */ }
.anbieter_kontakt { /* Anbieter Kontakt */ }
.kontakt_detail { /* Kontakt Detail */ }
.provision_detail { color: #555; padding-left: 2em; /* Provision Detail */ }
.provision-detail { /* Provision Detail (Bindestrich-Variante) */ }
.preis_detail { /* Preis Detail */ }
.price-detail { /* Preis Detail (engl.) */ }
.price-description { /* Preisbeschreibung */ }
.mehrwertsteuer { /* Mehrwertsteuer */ }
.provision { /* Provision */ }

/* === Beschreibungen & Texte === */
.beschreibung { /* Beschreibung */ }
.description { /* Description */ }
.ausstattung { /* Ausstattung */ }
.equipment { /* Equipment */ }
.features { /* Features */ }
.zustand { /* Zustand */ }
.location { /* Location */ }
.location-detail { /* Location Detail */ }
.location-link { /* Location Link */ }
.location-main { /* Location Main */ }
.location-sub { /* Location Sub */ }
.location-map { /* Location Map */ }
.location-map-embed { /* Location Map Embed */ }
.location-static-map { /* Location Static Map */ }
.location-text { /* Location Text */ }
.location-text-preview { /* entfernt, siehe .*-box Klassen */ }
.location-text-full { /* entfernt, siehe .*-box Klassen */ }
.equipment-preview { /* entfernt, siehe .*-box Klassen */ }
.equipment-full { /* entfernt, siehe .*-box Klassen */ }
.features-preview { /* entfernt, siehe .*-box Klassen */ }
.features-full { /* entfernt, siehe .*-box Klassen */ }
.zustand-preview { /* entfernt, siehe .*-box Klassen */ }
.zustand-full { /* entfernt, siehe .*-box Klassen */ }
.description-preview { /* entfernt, siehe .*-box Klassen */ }
.description-full { /* entfernt, siehe .*-box Klassen */ }
.price-description-preview { /* entfernt, siehe .*-box Klassen */ }
.price-description-full { /* entfernt, siehe .*-box Klassen */ }

/* === Footer === */
.site-footer {
    background: var(--color-primary-dark);
    color: #ecf0f1;
    padding: 1.5rem 1rem;
    text-align: center;
    margin-top: 3em;
}

.site-footer .footer-navigation {
    margin-bottom: 0.8rem;
}

.site-footer .footer-links {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 0.5rem 1.5rem;
}

.site-footer .footer-links li {
    display: inline;
}

.site-footer .footer-links a {
    color: #fc6c00;
    font-weight: 600;
    text-decoration: none;
    font-size: 110%;
    transition: color 0.2s ease;
}

.site-footer .footer-links a:hover {
    color: #3498db;
    text-decoration: underline;
}

.site-footer .footer-copyright {
    font-size: 0.85rem;
    color: #bdc3c7;
}

.site-footer .footer-copyright p {
    margin: 0;
}

/* Generierungs-Zeitstempel (Debug-Hilfe: wann wurde die Seite generiert?) */
.generated-timestamp {
    font-size: 0.75rem;
    color: #999;
}

.footer-content { /* Footer Inhalt (alt) */ }
.footer-help { /* Footer Hilfe-Bereich */ }
.footer-info { /* Footer Info (alt) */ }

/* === Slider === */
.anhang_anhangtitel { /* Anhang Titel */ }
.anhang_anhangtitel-vollbild { /* Anhang Titel Vollbild */ }
#slider-main { /* Slider Main */ }
#slider-nav-left { /* Slider Nav Links */ }
#slider-nav-right { /* Slider Nav Rechts */ }
#slider-thumbnails { /* Slider Thumbnails */ }
#thumb-scroll-left { /* Thumb Scroll Links */ }
#thumb-scroll-right { /* Thumb Scroll Rechts */ }
#thumb-track { /* Thumb Track */ }
#slider-fullscreen-overlay { /* Slider Fullscreen Overlay */ }
#slider-fullscreen-content { /* Slider Fullscreen Content */ }
#slider-fullimage { /* Slider Fullimage */ }
#slider-fullnav-left { /* Slider Fullnav Links */ }
#slider-fullnav-right { /* Slider Fullnav Rechts */ }
#slider-fullnav-close { /* Slider Fullnav Close */ }

/* === Kontakt & Formular === */
.contact { /* Kontakt */ }
.contact-address { /* Kontakt Adresse */ }
.contact-email { display: block; margin-top: 0.3em; }
.contact-email-feedback { display: block; margin-top: 0.3em; }
.contact h5, .boxed-shadow h5 { margin: 0.6em 0 0.15em 0; font-size: 0.85em; color: #666; font-weight: 600; }
.contact-form { /* Kontakt Formular */ }
.contact-name { /* Kontakt Name */ }
.contact-phone { /* Kontakt Telefon */ }
.contact-photo { /* Kontakt Foto */ }
.sidebar-contact { /* Sidebar Kontakt */ }
.email { /* E-Mail */ }

/* === Index-Seiten Elemente === */
.Index_Element { /* Index Element */ }
.Index_Footer { /* Index Footer */ }
.Index_Makler { /* Index Makler */ }
.Index_Objektart { /* Index Objektart */ }
.Index_ObjektlisteAndereUnterkategorien { /* Index Objektliste Andere Unterkategorien */ }
.Index_ObjektlisteNachbarorte { /* Index Objektliste Nachbarorte */ }
.Index_ObjektlisteOrt { /* Index Objektliste Ort */ }
.Index_Unterkategorie { /* Index Unterkategorie */ }
.Index_Werbung { /* Index Werbung */padding-top: 1em;}
.Index_andereObjektart { /* Index andere Objektart */ }
.Index_andereUnterkategorie { /* Index andere Unterkategorie */ }

/* === Index-Seiten Listen === */
.objektarten-liste { /* Objektarten Liste */list-style-type: none;}
.unterkategorien-liste { /* Unterkategorien Liste */ }
.andere-immobilien-liste { /* Andere Immobilien Liste */ }
.andere-unterkategorien-liste { /* Andere Unterkategorien Liste */ }
.alle-immobilien-liste { /* Alle Immobilien Liste */ }
.andere-objektart-liste { /* Andere Objektart Liste (Main Ebene 3) */list-style: none;}
.andere-unterkategorie-liste { /* Andere Unterkategorie Liste (Main Ebene 4) */list-style: none;}

/* === LeanList.js Querverweis-Spans === */
.immobilien-name { /* Name in Querverweis-Listen (z.B. "Häuser kaufen") */ }
.objektart-name { /* Objektart-Name in Listen */ }
.unterkategorie-name { /* Unterkategorie-Name in Listen */ }

/* === Index-Seiten Aside === */
.idx-immobilien-auswahl { /* Index Immobilien Auswahl */ }
.idx-kategorie-auswahl { /* Index Kategorie Auswahl */ }
.idx-nachbarorte-auswahl { /* Index Nachbarorte Auswahl */ }
.aside-nachbarorte { /* Aside Nachbarorte */ }

/* === Template-Marker (tpl-*) === */
.tpl-andereobjektart { /* Template: andere Objektart */ }
.tpl-andereunterkategorie { /* Template: andere Unterkategorie */ }
.tpl-aside1-nachbarortelinks { /* Template: Aside1 Nachbarorte Links */ }
.tpl-aside2-nachbarortevermarktung { /* Template: Aside2 Nachbarorte Vermarktung */ }
.tpl-aside2-objektarten { /* Template: Aside2 Objektarten */ }
.tpl-aside3-andereimmobilien { /* Template: Aside3 Andere Immobilien */ }
.tpl-aside3-nachbarorteobjektart { /* Template: Aside3 Nachbarorte Objektart */ }
.tpl-aside4-alleimmobilien { /* Template: Aside4 Alle Immobilien */ }
.tpl-aside4-andereunterkategorien { /* Template: Aside4 Andere Unterkategorien */ }
.tpl-aside4-nachbarorteunterkategorie { /* Template: Aside4 Nachbarorte Unterkategorie */ }
.tpl-footer { /* Template: Footer */ }
.tpl-header { /* Template: Header */ }
.tpl-index-titel { /* Template: Index Titel */ }
.tpl-makler { /* Template: Makler */ }
.tpl-nachbarorte { /* Template: Nachbarorte */ }
.tpl-navigation { /* Template: Navigation */ }
.tpl-objektart { /* Template: Objektart */ }
.tpl-objektlisteandereunterkategorien { /* Template: Objektliste Andere Unterkategorien */ }
.tpl-objektlistenachbarorte { /* Template: Objektliste Nachbarorte */margin-top: 4em;}
.tpl-anderevermarktungsart { /* Template: Andere Vermarktungsart */ }
.tpl-aside1-vermarktungsart { /* Template: Aside1 Vermarktungsart */ }
.tpl-aside-nachbarorte { /* Template: Aside Nachbarorte */ }
.tpl-objektlisteort { /* Template: Objektliste Ort */ }
.tpl-statistik { /* Template: Statistik */ }
.tpl-unterkategorie { /* Template: Unterkategorie */ }
.tpl-vermarktungsart { /* Template: Vermarktungsart */ }
.tpl-weitereauswahl { /* Template: Weitere Auswahl */ }
.tpl-werbung { /* Template: Werbung */}

/* === Objekt-Daten === */
.object-type { /* Objekttyp */ }
.object-category { /* Objektkategorie */ }
.object-number { /* Objektnummer */ }
.ObjektArt { /* Objektart */ }
.marketing-type { /* Vermarktungsart */ }

/* === Schema.org itemprop-Selektoren === */
/* Für Browser-Tools: Leere Sektionen zum späteren Befüllen */

/* --- Adresse & Ort --- */
[itemprop="address"] { /* PostalAddress-Container */ }
[itemprop="postalCode"] { /* Postleitzahl */ }
[itemprop="addressLocality"] { /* Ortsname */ }

/* --- Angebot & Preis --- */
[itemprop="offers"] { /* Angebots-Container (Offer) */ }
[itemprop="price"] { /* Preis */ }
[itemprop="priceCurrency"] { /* Währung */ }
[itemprop="availability"] { /* Verfügbarkeit */ }
[itemprop="itemOffered"] { /* Angebotenes Objekt */ }

/* --- Objekt-Eigenschaften --- */
[itemprop="name"] { /* Name (Objekttitel, Firmenname) */ }
[itemprop="description"] { /* Beschreibung */ }
[itemprop="url"] { /* URL */ }
[itemprop="numberOfRooms"] { /* Zimmeranzahl */ }
[itemprop="floorSize"] { /* Wohnfläche */ }
[itemprop="landSize"] { /* Grundstücksfläche */ }
[itemprop="yearBuilt"] { /* Baujahr */ }

/* --- Bewertung --- */
[itemprop="aggregateRating"] { /* Bewertungs-Container */ }
[itemprop="ratingValue"] { /* Bewertungswert (bereits in .Rating verwendet) */ }
[itemprop="bestRating"] { /* Beste Bewertung */ }
[itemprop="worstRating"] { /* Schlechteste Bewertung */ }

/* --- Kombinierte Selektoren (Kontext-spezifisch) --- */
/* Adresse innerhalb Objektlisten-Ort */
.Ort [itemprop="postalCode"] { /* PLZ im Ort-Span */ }
.Ort [itemprop="addressLocality"] { /* Ortsname im Ort-Span */padding-left: .3em;}

/* Adresse innerhalb Exposee */
.exposee-layout [itemprop="address"] { /* Adresse im Exposee */ }
.exposee-layout [itemprop="postalCode"] { /* PLZ im Exposee */ }
.exposee-layout [itemprop="addressLocality"] { /* Ort im Exposee */ }

/* Preis innerhalb Objektlisten */
article [itemprop="price"] { /* Preis im Article */ }
article [itemprop="priceCurrency"] { /* Währung im Article */ }

/* Objekt-Eigenschaften innerhalb Article */
article [itemprop="name"] { /* Objekttitel im Article */ }
article [itemprop="description"] { /* Beschreibung im Article */ }
article [itemprop="numberOfRooms"] { /* Zimmer im Article */ }
article [itemprop="floorSize"] { /* Fläche im Article */ }
article [itemprop="yearBuilt"] { /* Baujahr im Article */ }

/* Bewertung innerhalb Article */
article [itemprop="aggregateRating"] { /* Rating-Container im Article */ }
article [itemprop="ratingValue"] { /* Rating-Wert im Article */ }

/* Anbieter-/Maklerseiten */
.anbieter-info [itemprop="name"] { /* Firmenname auf Anbieterseite */ }
.makler-info [itemprop="name"] { /* Maklername auf Makler-Karte */ }
.makler-info-page [itemprop="name"] { /* Maklername auf Maklerseite */ }

/* Index-Seiten: Anbieter-Karten */
.idx-anbieter-firma [itemprop="name"] { /* Firmenname in Anbieter-Karte */ }
.idx-anbieter-firma [itemprop="url"] { /* URL in Anbieter-Karte (v1.04: Link im Firmennamen) */ }

/* === itemscope/itemtype Container === */
[itemtype="https://schema.org/PostalAddress"] { /* PostalAddress-Schema */ }
[itemtype="https://schema.org/Offer"] { /* Offer-Schema */ }
[itemtype="https://schema.org/AggregateRating"] { /* AggregateRating-Schema */ }
[itemtype="https://schema.org/RealEstateAgent"] { /* RealEstateAgent-Schema */ }
[itemtype="https://schema.org/BreadcrumbList"] { /* BreadcrumbList-Schema */ }

/* === Breadcrumb === */
.breadcrumb-navigation { /* Breadcrumb Navigation */ }
.breadcrumb_main_title { /* Breadcrumb Haupttitel */ }
.title-breadcrumb { /* Titel Breadcrumb */ }

/* === Share & Social === */
.share { /* Share */ }
.share-icon { /* Share Icon */ }
.share-section { /* Share Section */ }
.facebook { /* Facebook */ }
.linkedin { /* LinkedIn */ }
.whatsapp { /* WhatsApp */ }
.telegram { /* Telegram */ }
.imessage { /* iMessage */ }
.sms { /* SMS */ }
.print { /* Print */ }
.copy { /* Copy */ }
.x { /* X (Twitter) */ }

/* === Font Awesome Klassen === */
.fa-brands { /* Font Awesome Brands */ }
.fa-solid { /* Font Awesome Solid */ }
.fa-comment-dots { /* FA Comment Dots */ }
.fa-envelope { /* FA Envelope */ }
.fa-facebook-f { /* FA Facebook */ }
.fa-link { /* FA Link */ }
.fa-linkedin-in { /* FA LinkedIn */ }
.fa-message { /* FA Message */ }
.fa-print { /* FA Print */ }
.fa-telegram { /* FA Telegram */ }
.fa-whatsapp { /* FA WhatsApp */ }
.fa-x-twitter { /* FA X Twitter */ }

/* === Badges === */
.badge { /* Badge */ }
.badge-danger { /* Badge Danger */ }
.badge-info { /* Badge Info */ }
.badge-success { /* Badge Success */ }
.badge-warning { /* Badge Warning */ }

/* === Sonstiges === */
.answer { /* Antwort */ }
.basic-data { /* Basis-Daten */ }
.basic_data { /* Basis-Daten (alt) */ }
.claim { 
    /* Claim - rechts neben Logo, bündig mit Grundlinie */
    margin-left: auto; /* Schiebt Claim nach rechts */
    padding-left: 1em;
    font-style: italic;
    color: #666;
    align-self: flex-end;
    margin-bottom: 0.15em; /* Fein-Ausrichtung zur Grundlinie */
}
.currency { /* Währung */ }
.faq-item { /* FAQ Item */ }
.H2location { /* H2 Location */ }
.impressum-link { /* Impressum Link */ }
.impressum-text { /* Impressum Text */ }
.info-box { /* Info Box */ }
.main-title { /* Haupttitel */ }
.quality-index { /* Quality Index */ }
.report-link { /* Report Link */ }
.report-offer { /* Report Offer */ }
.angebot_melden { /* Angebot melden */ }
.search-box { /* Suchbox */ }
.stars { /* Sterne */ }
.suche_speichern { /* Suche speichern */ }
.tip { /* Tipp */ }
.toc { /* Table of Contents */ }
.version { /* Version */ }
.visually-hidden { /* Visuell versteckt */ }
.warning { /* Warnung */ }

.location-text-box {
    max-height: 7em;
    overflow: hidden;
    position: relative;
    transition: max-height 0.3s, color 0.3s;
    color: #222; /* Standard: schwarz */
}
.location-text-box.full {
    max-height: none;
    -webkit-mask-image: none;
    mask-image: none;
}
.location-text-box.has-overflow {
    color: #555; /* abgeblendet nur bei Ãœberlauf */
    -webkit-mask-image: linear-gradient(to bottom, black calc(100% - 1em), transparent 100%);
    mask-image: linear-gradient(to bottom, black calc(100% - 1em), transparent 100%);
}

.price-description-box {
    max-height: 15em;
    overflow: hidden;
    position: relative;
    transition: max-height 0.3s, color 0.3s;
    color: #222; 
}
.price-description-box.full {
    max-height: none;
    -webkit-mask-image: none;
    mask-image: none;
}
.price-description-box.has-overflow {
    color: #555; /* abgeblendet nur bei Ãœberlauf */
    -webkit-mask-image: linear-gradient(to bottom, black calc(100% - 1em), transparent 100%);
    mask-image: linear-gradient(to bottom, black calc(100% - 1em), transparent 100%);
}

.equipment-box {
    max-height: 7em;
    overflow: hidden;
    position: relative;
    transition: max-height 0.3s, color 0.3s;
}
.equipment-box.full {
    max-height: none;
    -webkit-mask-image: none;
    mask-image: none;
}
.equipment-box.has-overflow {
    color: #555; /* abgeblendet nur bei Ãœberlauf */
    -webkit-mask-image: linear-gradient(to bottom, black calc(100% - 1em), transparent 100%);
    mask-image: linear-gradient(to bottom, black calc(100% - 1em), transparent 100%);
}

.features-box {
    max-height: 7em;
    overflow: hidden;
    position: relative;
    transition: max-height 0.3s, color 0.3s;
    color: #222;
}
.features-box.full {
    max-height: none;
    -webkit-mask-image: none;
    mask-image: none;
}
.features-box.has-overflow {
    color: #555; /* abgeblendet nur bei Ãœberlauf */
    -webkit-mask-image: linear-gradient(to bottom, black calc(100% - 1em), transparent 100%);
    mask-image: linear-gradient(to bottom, black calc(100% - 1em), transparent 100%);
}

.zustand-box {
    max-height: 7em;
    overflow: hidden;
    position: relative;
    transition: max-height 0.3s, color 0.3s;
    color: #222;
}
.zustand-box.full {
    max-height: none;
    -webkit-mask-image: none;
    mask-image: none;
}
.zustand-box.has-overflow {
    color: #555; /* abgeblendet nur bei Ãœberlauf */
    -webkit-mask-image: linear-gradient(to bottom, black calc(100% - 1em), transparent 100%);
    mask-image: linear-gradient(to bottom, black calc(100% - 1em), transparent 100%);
}

.energy {
    display: none;
}
.energy-details ul {
    margin-left:1em;
    list-style-type: circle;
}
.energy-class {}
.efficiency-box {}
.condition {}
.data-item {}

section{
    margin:0;
    padding:0;
    /* padding-top: 2em; */
}
section h3{
    color:#222431;
    margin:0;
    margin-top:2em;
    margin-bottom: 1em;;
}
section h2{
    color: #333;
    margin:0;
    margin-top:2em;
    margin-bottom: 1em;
    font-weight: bold;
}

article {
    background-color: var(--color-article-bg);
    margin-top: 1em;
    min-height: 9.3em;
    line-height: 150%;
    max-width: 50em;
    transition: background-color 0.2s ease, box-shadow 0.2s ease;
}

article:hover {
    background-color: var(--color-article-bg-hover);
    box-shadow: var(--hover-shadow);
}

details{
    padding-left:1em;
}

article h4{
    margin:0;
    padding-top: 0.2em;
    padding-right: 1em;
    padding-left: 0.5em;
    background-color: var(--color-success);
    font-size: 1.1em;
    white-space: nowrap;
    overflow: hidden;
    /* max-width: 37em; */
    padding-bottom: 0.1em;
}

article a {
    text-decoration: none;
    color: inherit;
}

article .Daten {
    line-height: 2em;
    padding-right: 1em;
    padding-top: 0.5em;
    position: relative;
}
article .Description{
    line-height: 138%;
    margin:0;
    font-size: 121%;
    /* padding-top: 0.0em; */
    min-height: 60px;
    max-height: 2em;
    overflow: hidden;
    color:#555;
}

.Preis{
    position: absolute;
    right: 0;
    bottom: 0;
    background-color: var(--color-preis-bg-overlay);
    padding-left: 1em;
    padding-right: 1em;
    font-weight: 600;
    font-size: 133%;
    z-index: 10;
}

.Ort{
    font-size:x-smaller;
}


figure {
    margin:0;
    float:left;
    margin-right: 1em;
    /* min-height: 139px; */
    height: 144px;
    /* min-width: 190px; */
    align-content: center;
    background-color: #ccc;
    text-align: center;
    width: 192px;
}
article figure img {
    width: 192px;
    height: 144px;
    object-fit: cover;
}

.Richtung{
    font-weight: 300;
    display:inline-block;
    width:1em;
}
.Pfeil{
    font-weight: 600;
    display:inline-block;
    width:1em;
}


@media only screen and (max-width: 950px) {
    .Preis
    {
        font-size: 144%;
    }
}
@media only screen and (max-width: 950px) {
  aside {
    display:none;
    
  }
  main
  {
    margin-left: 0em;
    
  }
  .breadcrumb{
        margin-left:0em;
        font-weight: lighter;
        color:rgb(88, 88, 88);

    }

}

.exposee_main_title{
    background-color: #94c120;
    padding-top: 0.5em;
    padding-bottom: 0.5em;
    color: #222;
}



#slider-container {
    position: relative;
    width: 768px; /* geändert von 786 -> 768 */
    margin: 0 auto;
    margin-top: -1.1em;
  }
  
  #slider-container img {
    display: none;
    object-fit: contain;
    width: 768px;
    height: 567px;
    margin: 0 auto;
  }
  
  #slider-container img[data-active="true"] {
    display: block;
  }
  
  #slider-nav-left, #slider-nav-right {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 70px;
    height: 70px;
    line-height: 70px;
    text-align: center;
    font-size: 2em;
    color: #ffffff;
    background-color: rgba(0,0,0,0.2);
    cursor: pointer;
    z-index: 10;
  }
  
  #slider-nav-left {
    left: 0;
  }
  #slider-nav-right {
    right: 0;
  }
  
  
  /* Thumbnail scroller */
  #slider-thumbnails {
    width: 768px;
    margin: 8px auto;
    display: flex;
    align-items: center;
    position: relative;
  }
  
  #thumb-scroll-left, #thumb-scroll-right {
    width: 30px;
    height: 96px;
    line-height: 96px;
    text-align: center;
    font-size: 1.5em;
    color: #ffffff;
    background-color: rgba(0,0,0,0.6);
    cursor: pointer;
    display: none; 
    user-select: none;
    min-width: 30px;
  }
  
  #thumb-scroll-left {
    margin-right: 2px;
  }
  #thumb-scroll-right {
    margin-left: 2px;
  }
  
  #thumb-track {
    display: flex;
    flex-wrap: nowrap;
    overflow: hidden; /* hide content when scrolling */
  }
  
  #thumb-track img {
    width: 128px;
    height: 96px;
    margin-right: 1px;
    background-color: #444444; /* dark grey if no image */
    object-fit: cover;
    cursor: pointer;
  }
  
  #slider-fullscreen-overlay {
    display: none;
    position: fixed;
    z-index: 999;
    left: 0; right: 0; top: 0; bottom: 0;
    background-color: rgba(0,0,0,0.7);
  }
  
  #slider-fullscreen-content {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    max-width: 100%;
    max-height: 90%;
    background-color: #111;
  }
  
  #slider-fullimage {
    display: block;
    max-width: 100%;
    max-height: 100%;
    min-width: 1024px;
    min-height: 768px;
    margin: auto;
    object-fit: contain;
  }
  
  @media only screen and (max-width: 950px) {
    #slider-fullimage {
        display: block;
        max-width: 100%;
        max-height: 100%;
        min-width: 800px;
        min-height: 600px;
        margin: auto;
        object-fit: contain;
      }
    }
    @media only screen and (max-width: 400px) {
        #slider-fullimage {
            display: block;
            max-width: 100%;
            max-height: 100%;
            min-width: 400px;
            min-height: 300px;
            margin: auto;
            object-fit: contain;
          }
        }

.anhang_anhangtitel {
    width: 768px;
    font-size: 0.9em;
    margin-top: -30px;
    color: #222;
    min-height: 20px;
    padding-left:1em;
    display:none;
}
  .anhang_anhangtitel-vollbild {
    text-align: center;
    color: #dddddd;
    font-size: 1.0em;
    margin: 6px 0;
    min-height: 20px;
  }
  
  #slider-fullnav-left, #slider-fullnav-right, #slider-fullnav-close {
    position: absolute;
    color: #ffffff;
    font-size: 2em;
    background-color: rgba(0,0,0,0.2);
    cursor: pointer;
    text-align: center;
    line-height: 70px;
    width: 70px;
    height: 70px;
  }
  
  #slider-fullnav-left {
    left: 0;
    top: 50%;
    transform: translateY(-50%);
  }
  #slider-fullnav-right {
    right: 0;
    top: 50%;
    transform: translateY(-50%);
  }
  #slider-fullnav-close {
    right: 0;
    top: 0;
  }

  /* ab hier Spezialitäten für das Exposee */

/* Exposee-Titel mit Favoriten-Herz am rechten Rand */
.exposee-title-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1em;
}

.exposee-title-row h1 {
    flex: 1;
    margin: 0;
}

/* Exposee-Favoriten-Symbole (Container für +/- und Herz) */
.exposee-symbole {
    display: inline-flex;
    gap: 0.4em;
    font-size: 1.6em;
    flex-shrink: 0;
    align-items: center;
}

.exposee-symbole .uf-minusplus,
.exposee-symbole .uf-herz {
    cursor: pointer;
    transition: transform 0.15s ease;
    user-select: none;
}

.exposee-symbole .uf-minusplus {
    color: #666;
    font-weight: bold;
}

.exposee-symbole .uf-minusplus:hover {
    color: #333;
    transform: scale(1.15);
}

.exposee-symbole .uf-herz {
    color: #555;
}

.exposee-symbole .uf-herz:hover {
    color: var(--color-favorit-hover);
    transform: scale(1.15);
}

/* Aktive Zustände im Exposee */
.exposee-symbole.uf-favorit-aktiv .uf-herz {
    color: var(--color-favorit);
}

.exposee-symbole.uf-dislike-aktiv .uf-minusplus {
    color: #4a4;
}

.impressum-preview {
  color:#555;
  font-size: smaller;
  }
.impressum-full {
 color:#222;
 font-size:small    ;
}

.object-type h2 {
    font-size: 1.4em;
    font-weight: bold;
    text-align: center;
    margin: 0px 0;
    color: #454;
    position:relative;
    z-index: 100;
    background-color: #eeea;
}
.preis-value {
    font-weight: bold;
    color: #222;
    font-size: 3.2em;
}

.currency-value {
    color: #222;
    font-size: 120%;
}
    
.price {
    text-align: right;
}

.price-description-box {
    max-height: 7em;
    overflow: hidden;
    position: relative;
    transition: max-height 0.3s, color 0.3s;
    color: #000;
}
.price-description-box.full {
    max-height: none;
    -webkit-mask-image: none;
    mask-image: none;
}
.price-description-box.has-overflow {
    color: #555; /* abgeblendet nur bei Ãœberlauf */
    -webkit-mask-image: linear-gradient(to bottom, black calc(100% - 1em), transparent 100%);
    mask-image: linear-gradient(to bottom, black calc(100% - 1em), transparent 100%);
}

.description-box {
    max-height: 15em;
    overflow: hidden;
    position: relative;
    transition: max-height 0.3s, color 0.3s;
}
.description-box.full {
    max-height: none;
    -webkit-mask-image: none;
    mask-image: none;
}
.description-box.has-overflow {
    color: #555; /* abgeblendet nur bei Ãœberlauf */
    -webkit-mask-image: linear-gradient(to bottom, black calc(100% - 1em), transparent 100%);
    mask-image: linear-gradient(to bottom, black calc(100% - 1em), transparent 100%);
}

.amount{
    background-color: var(--color-success);
    padding-left: 1em;
    padding-right: 1em;
}

.exposee-layout {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: 2em;
    max-width: 70em;
    margin: 0 auto;
}

.exposee-layout main {
    flex: 1 1 0;
    min-width: 0;
    min-width:768px
}

.exposee-layout aside {
    width: 320px;
    flex-shrink: 0;
    margin-left: 0;
    margin-top: 0;
    padding-top:2em;
    padding-left:1em;
}

@media (max-width: 1000px) {
    .exposee-layout {
        flex-direction: column;
    }
    .exposee-layout main {
        min-width: 0;
        width: 100%;
    }
    .exposee-layout aside {
        width: 100%;
        margin-left: 0;
        margin-top: 2em;
    }
}

.provider {
 padding-bottom: 0em;   
}

/* === Anbieterobjekte-Sektion im Exposee (zwischen Anbieter-Detail und Anbieter-Kontakt) === */
.anbieter-objekte {
    padding-bottom: 0.5em;
}
.anbieter-objekte h3 {
    margin-bottom: 0.5em;
}
.anbieter-objekte-links ul {
    list-style: none;
    padding: 0;
    margin: 0;
}
.anbieter-objekte-links li {
    padding: 0;
    margin: 0;
}
.anbieter-objekte-links li a {
    display: block;
    /* padding: 0.5em 0.8em; */
    color: #1a73e8;
    text-decoration: none;
    border-bottom: 1px solid #eee;
    transition: background-color 0.15s;
}
.anbieter-objekte-links li:last-child a {
    border-bottom: none;
}
.anbieter-objekte-links li a:hover {
    background-color: #f0f4ff;
    text-decoration: underline;
}
/* Anzahl-Klammer wird in Schritt 2 per JS ergänzt */
.anbieter-objekte-links .anzahl-objekte {
    color: #666;
    font-size: 0.9em;
}

.formular-feld {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
}
.formular-feld label {
    flex: 1 0 40%;
    text-align: left;
}
.formular-feld input,
.formular-feld textarea {
    min-width: 0;
}
@media (max-width: 650px) {
    .formular-feld {
        flex-direction: column;
        align-items: stretch;
    }
    .formular-feld label,
    .formular-feld input,
    .formular-feld textarea {
        flex: unset;
        text-align: left;
        margin-right: 0;
    }
}

.contact {
    padding-bottom: 1em;
}

.formular-feld.vertical-label {
    flex-direction: column !important;
    align-items: stretch !important;
}
.formular-feld.vertical-label label {
    margin-bottom: 0.3em;
    text-align: left;
}
.formular-feld.vertical-label textarea {
    text-align: left;
}

.kontakt_datenschutz {
     font-size:small;
     text-align: justify;
}

.kontakt_datenschutz h4 {
    font-size: 1em;
    font-weight: bold;
}

.quality_index_stars {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    margin: 0.4em 0 0.4em 0;
    /* Optional: Abstand nach oben/unten */
}
.quality_index_text {
    text-align: justify;
    font-size: medium;
}

.quality_index_info {
    text-align: justify;
    font-size: small;
}

.quality_index_info ul {
    list-style-type: none;
    padding-left: 1em;
}

.quality_index_info li {
    padding-left: 1em;
    margin-bottom:0px;
    margin-top:0px;
    line-height: 1.2em;
}

.small_btn {
    background: none;
    border: none;
    color: #555;
    cursor: pointer;
    font-size: small;
    /* margin-top: 0.5em; */
    /* margin-bottom: 0.5em; */
    /* padding: 0.2em 0.5em; */
    /* transition: color 0.2s; */
    text-align: right;
    /* max-width: 3em; */
}
.small_btn:hover {
    color: #1a265a;
    text-decoration: underline;
}
.quality_index_info {
    font-size: small;
}
.boxed-shadow {
    background: #f8f9fa;
    border-radius: 0 0 1em 1em;
    box-shadow: 0 1px 4px rgba(0,0,0,0.1);
    padding: 0.8em 1em;
    margin-left: 1px;
    margin-right: 1px;
    margin-bottom: 1em;
}
.description-toggle {   
    color: #222;
}
.description-toggle:hover {
    color: #005;
    text-decoration: underline;
    cursor:pointer;
}

.button-toggle {
    color: #555;
}
.button-toggle:hover {
    color: #005;
    text-decoration: underline;
    cursor:pointer;
}
    
.mailto-button, .save-button, .delete-button {
    font-size: 1.15em;
    padding: 0.15em 0.35em;
    border-radius: 0.4em;
    border: none;
    background: #f5f5f5;
    color: #333;
    margin-right: 0.1em;
    cursor: pointer;
    transition: background 0.2s, color 0.2s;
    vertical-align: middle;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 0;
    min-height: 0;
}
.mailto-button:hover, .save-button:hover, .delete-button:hover {
    background: #e0e0e0;
    color: #1976d2;
}
.mailto-button span, .save-button span, .delete-button span {
    pointer-events: none;
}
.submit-button {
    margin-right: 0.3em;
}
.button-row {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 0.2em;
    margin-top: 0.5em;
    flex-wrap: wrap;
}
.submit-button {
    font-size: 1em;
    padding: 0.25em 0.8em;
    border-radius: 0.4em;
    margin-right: 0.5em;
    min-width: 0;
    background: #e0e0e0;
    color: #1976d2;
    border: none;
    transition: background 0.2s, color 0.2s;
}
.submit-button:hover {
    background: #1976d2;
    color: #fff;
}
.share-section a {
    padding-left: 1em;
}
.share-icons {
    text-align:right;
}
/* SVG-Icons für Share-Buttons */
.share-svg {
    width: 24px;
    height: 24px;
    vertical-align: middle;
    transition: transform 0.2s, filter 0.2s;
}
.share-icon:hover .share-svg {
    transform: scale(1.15);
    filter: brightness(1.2);
}
/* Farben für die einzelnen Share-Icons */
.share-icon.email .share-svg { filter: invert(30%) sepia(90%) saturate(500%) hue-rotate(180deg); }
.share-icon.whatsapp .share-svg { filter: invert(50%) sepia(90%) saturate(500%) hue-rotate(90deg); }
.share-icon.facebook .share-svg { filter: invert(30%) sepia(90%) saturate(1000%) hue-rotate(200deg); }
.share-icon.x .share-svg { filter: invert(0%); }
.share-icon.telegram .share-svg { filter: invert(40%) sepia(90%) saturate(500%) hue-rotate(180deg); }
.share-icon.linkedin .share-svg { filter: invert(30%) sepia(90%) saturate(800%) hue-rotate(190deg); }
.share-icon.sms .share-svg { filter: invert(50%) sepia(90%) saturate(400%) hue-rotate(90deg); }
.share-icon.imessage .share-svg { filter: invert(50%) sepia(90%) saturate(400%) hue-rotate(90deg); }
.share-icon.copy .share-svg { filter: invert(40%) sepia(0%) saturate(0%); }
.share-icon.print .share-svg { filter: invert(40%) sepia(0%) saturate(0%); }

    
@media print {
  h3, h3 + .boxed-shadow, h3 + .basic_data, h3 + .share-icons, h3 + .merkmale, h3 + .lage, h3 + .zustand, h3 + .preis, h3 + .kontakt, h3 + .ausstattung {
    break-after: avoid;
    page-break-after: avoid;
  }
  h3 + * {
    break-before: avoid;
    page-break-before: avoid;
  }

  /* Immer ausgeklappt drucken */
  .impressum-full,
  .toggle-content,
  .hidden,
  .collapsed,
  .expandable-section,
  .beschreibung-full,
  .ausstattung-full,
  .sonstiges-full,
  .lagebeschreibung-full,
  .zustand-full,
  .preis-detail-full {
    display: block !important;
    max-height: none !important;
    opacity: 1 !important;
    visibility: visible !important;
  }
  /* Toggle-Buttons und Pfeile beim Druck ausblenden */
  .impressum-toggle,
  .toggle-btn,
  .toggle-arrow {
    display: none !important;
  }
}

/* =====================================================================================
   INDEX-SEITEN STYLES (Präfix .idx- um Kollisionen mit Exposee-Styles zu vermeiden)
   ===================================================================================== */

/* Hauptlayout: main + aside nebeneinander */
.index-layout {
    display: flex;
    flex-direction: row;
    gap: 2em;
    max-width: 70em;
    margin: 0 auto;
    margin-top: 1em;
}
.index-layout > main {
    flex: 1 1 auto;
    min-width: 0;
    padding-top: 0;
}
.index-layout > aside {
    flex: 0 0 18em;
    width: 18em;
    float: none;
    margin-top: 0;
}
.aside-block,
.index-layout aside section
{
    /* margin-top:2em; */
    margin-bottom: 0.5em;
    background-color: #00000008;
    /* padding: 1em; */
    padding-top: 1em;
    /* margin-top: 1.5em; */
    font-size: 100%;
}

/* Titel-Bereich (H1, H2) */
.idx-titel {
    margin-bottom: 1em;
    padding-top: .1em;
}
.idx-titel h1 {
    font-size: 1.8em;
    font-weight: 700;
    color: #333;
    /* margin-top: 0; */
    margin: 0 0 0.2em 0;
    /* text-align: left; */
}
.idx-titel h2 {
    font-size: 1.1em;
    font-weight: 400;
    color: #585858;
    margin: 0;
    line-height: 1.4;
}
.idx-titel .timestamp {
    font-size: 0.8em;
    color: #888;
    margin-top: 0.3em;
}

/* H2 Zahlen-Spans (für spätere Hervorhebung vorbereitet) */
/* Gilt für statischen Titel UND dynamischen Filter-Header */
.idx-titel h2 .anzahl,
.filter-result-header .anzahl {
    /* Anzahl der Immobilien - wie Zentrum-Marker auf Karte, aber größer */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1em;
    padding-left: 0.2em;
    /* background: var(--color-primary); */
    /* border-radius: 1em; */
    /* border: 3px solid white; */
    /* box-shadow: 0 2px 6px rgba(0,0,0,0.4); */
    /* color: white; */
    font-weight: bold;
    padding-right: 0.2em;
}
.idx-titel h2 .min-preis {
    /* Mindestpreis */
}
.idx-titel h2 .max-preis {
    /* Höchstpreis */
}

/* Statistik-Box */
.idx-statistik {
    /* background-color: #f8f8f8; */
    /* margin-bottom: 1.5em; */
    margin-bottom: 0.5em;
    background-color: #00000008;
    padding: 1em;
    /* margin-top: 1.5em; */
}

.idx-statistik h3 {
    background-color: #00000014;
    Margin-left: -1em;
    margin-right: -1em;
    margin-top: -1em;
    padding-left: 1em;
    padding-right: 1em;
    padding-top: .5em;
    padding-bottom: .5em;
    color: black;
    font-size: 100%;
}
.idx-statistik .landkreis {
    font-size: 0.85em;
    color: #666;
    margin-bottom: 0.8em;
}
.idx-statistik ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    /* gap: 1em 2em; */
}
.idx-statistik li {
    display: flex;
    align-items: center;
    gap: 0.3em;
    font-size: 0.95em;
}
.idx-statistik li::before {
    font-size: 1.1em;
}
/* Statistik-Symbole ausgelagert nach symbols.css (Unicode-Escapes gegen Encoding-Probleme) */
.idx-statistik .stat-link {
    margin-top: 0.5em;
    font-size: 0.9em;
}
.idx-statistik .stat-link a {
    color: inherit;
}

/* Quickjumper (Sprungmarken) */
.idx-quickjumper {
    background-color: #f2f2f2;
    padding: 0.5em 1em;
    margin-bottom: 1.5em;
}
.idx-quickjumper ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 0.5em 1.5em;
}
.idx-quickjumper li {
    display: inline;
}
.idx-quickjumper a {
    color: #585858;
    text-decoration: none;
}
.idx-quickjumper a:hover {
    text-decoration: underline;
}

/* Aside-Bereich Ãœberschriften */
.index-layout aside h3 {
    background: unset;
    background-color: #00000014;
    /* Margin-left: -.8em; */
    /* margin-right: -.8em; */
    margin-top: -.8em;
    padding-left: 1em;
    padding-right: 1em;
    padding-top: .5em;
    padding-bottom: .5em;
    color: black;
    min-height: 1.25em;
    font-size: 113%;
    /* font-weight: 600; */
}
/* .index-layout aside section - Styling jetzt in kombinierter Regel mit .aside-block */
.index-layout aside ul {
    list-style: none;
    padding: 0;
    margin: 0;
}
.index-layout aside li {
    /* padding: 0.5em 0; */
    /* border-bottom: 1px solid #eee; */
    font-size: 0.9em;
    /* line-height: 1.5; */
    margin: 0;
    /* padding: 0; */
}
.index-layout aside li:last-child {
    border-bottom: none;
}
.index-layout aside a {
    color: inherit;
    text-decoration: none;
    letter-spacing: -0.01em;
}
.index-layout aside a:hover {
    text-decoration: underline;
}

/* Nachbarorte-Formatierung im Aside und Main */
/* Darstellung: Zeile 1 = Ortsname (verlinkt), Zeile 2 = Pfeil Richtung Entfernung ab Preis */
.idx-nachbarort-liste {
    list-style: none;
    padding: 0;
    margin: 0;
}
.idx-nachbarort-liste li {
    display: block;
    margin-bottom: 0.8em;
    padding: 0.3em;
    padding-left: 1em;
    border-radius: 4px;
    transition: background-color 0.2s ease, box-shadow 0.2s ease;
}
.idx-nachbarort-liste li:hover {
    background-color: var(--color-article-bg-hover);
    box-shadow: var(--hover-shadow);
}
.idx-nachbarort-liste li:last-child {
    border-bottom: none;
    margin-bottom: 0;
}
/* Gesamter Block ist ein Link */
.idx-nachbarort-liste a {
    display: block;
    text-decoration: none;
    color: inherit;
}
/* Zeile 1: Ortsname */
.idx-nachbarort-liste .ort-name {
    display: block;
    font-weight: 500;
    color: inherit;
    transition: text-decoration 0.2s;
}
/* Hover-Effekt NUR auf Ortsnamen */
.idx-nachbarort-liste a:hover .ort-name {
    text-decoration: underline;
}
/* Zeile 2: Meta-Infos (Pfeil, Richtung, Entfernung, Preis) */
.idx-nachbarort-liste .ort-meta {
    display: block;
    font-size: 0.85em;
    color: #666;
    margin-top: 0.1em;
}
/* Kein Hover-Underline auf Meta */
.idx-nachbarort-liste a:hover .ort-meta {
    text-decoration: none;
}
.idx-nachbarort-liste .richtung-pfeil {
    display: inline-block;
    width: 1.1em;
    font-family: Arial, sans-serif;
    /* font-weight: bold; */
    /* font-style: italic; */
}
.idx-nachbarort-liste .richtung-text {
    display: inline-block;
    /* width: 2em; */
    color: #888;
    font-style: italic;
    padding-right: 0.3em;
}
.idx-nachbarort-liste .entfernung {
    color: #888;
    font-weight: normal;
    font-style: italic;
}
/* Hervorhebung für Nachbarorte mit gefundenem Preis */
.idx-nachbarort-liste .ort-name.relevant,
.idx-nachbarort-liste .ort-meta.relevant {
    font-weight: 600;
    color: #333;
}
.idx-nachbarort-liste .min-preis {
    color: #888;
    font-weight: 500;
    font-style: italic;
}

/* Objektarten/Unterkategorien-Liste im Aside */
.idx-kategorie-liste li {
    display: block;
    line-height: 1.6;
}
.idx-kategorie-liste a {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 0.5em;
}
.idx-kategorie-liste .kategorie-name {
    flex: 1 1 auto;
}
.idx-kategorie-liste .ab-preis {
    flex: 0 0 auto;
    font-size: 0.85em;
    color: #666;
    white-space: nowrap;
}
.idx-kategorie-liste .ab-preis::before {
    content: "≻ ab ";
}


/* Sektionen im Main-Bereich */
.index-layout main section h2 {
    font-size: 1.3em;
    font-weight: 600;
    color: #222;
    margin: 1.5em 0 0.8em 0;
    padding-bottom: 0.3em;
    /* border-bottom: 2px solid var(--color-success); */
}
.index-layout main section h3 {
    font-size: 1.1em;
    font-weight: 600;
    color: #444;
    /* margin: 2em 0 0.5em 0; */
    background: none;
    max-width: none;
    padding-left: 0.5em;
    /* background-color: #00000014; */
    /* text-align: center; */
}

/* "Weitere Auswahlmöglichkeiten" - redundante Inhalte für Mobile */
.idx-weitere-auswahl {
    display: none;
}

/* Werbe-Banner im Aside */
.idx-werbung {
    margin-top: 2em;
    padding: 0;
    min-height: 180px;
    background-color: #f0f0f0;
    text-align: center;
    border: 1px solid #ddd;
}
.idx-werbung figure {
    width: 100%;
    padding: 0;
    margin: 0;
}

/* Immobilien-Links (andere Vermarktungsarten/Objektarten) */
.idx-immobilien-links ul {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.3em;
}
.idx-immobilien-links li {
    padding: 0.4em 0;
}



/* Mobile/Touch-Geräte: Volle Breite nutzen */
@media (hover: none) {
    html, body {
        max-width: 100vw !important;
        width: 100% !important;
        min-width: 0 !important;
        padding: 0 !important;
        margin: 0 !important;
        box-sizing: border-box;
        overflow-x: hidden;
    }
    body {
        padding-left: 0.5em !important;
        padding-right: 0.5em !important;
    }
    .index-layout {
        max-width: 100% !important;
        width: 100% !important;
    }
}

/* Responsive: Aside unter main auf kleinen Bildschirmen */
@media only screen and (max-width: 950px) {
    .index-layout {
        flex-direction: column;
        max-width: 100%;
        width: 100%;
        padding: 0 1em;
        box-sizing: border-box;
    }
    .index-layout > main {
        width: 100%;
        max-width: 100%;
        order: 1;
    }
    .index-layout > aside {
        display: none;
    }
    /* Zeige redundante Inhalte in Main */
    .idx-weitere-auswahl {
        display: block;
        margin-top: 2em;
        padding-top: 2em;
        border-top: 2px solid #ddd;
    }
    .idx-weitere-auswahl section {
        margin-bottom: 2em;
    }
    .idx-weitere-auswahl h2 {
        font-size: 1.2em;
        font-weight: 600;
        color: #222;
        margin: 0 0 0.8em 0;
        padding-bottom: 0.3em;
        border-bottom: 2px solid var(--color-success);
    }
    .idx-weitere-auswahl h3 {
        font-size: 1em;
        font-weight: 600;
        color: #222;
        background: linear-gradient(to bottom, transparent 0%, transparent 60%, var(--color-success) 60%, var(--color-success) 100%);
        max-width: 20em;
        padding: 0 0.5em;
        margin: 1em 0 0.8em 0;
    }
}

/* =====================
   Vermarktungsart zweispaltig (Ebene 1)
   Kaufen links, Mieten rechts
   ===================== */
.Index_Vermarktungsart {
    display: flex;
    flex-wrap: wrap;
    gap: 2em;
}
.Index_Vermarktungsart .vermarktungsart-block {
    flex: 1 1 45%;
    min-width: 12em;
}
.Index_Vermarktungsart h3 {
    background: unset;
    background-color: unset;
}

.Index_Vermarktungsart .vermarktungsart-block h3 {
    margin-bottom: 0.5em;
    font-size: 1.1em;
    max-width: none;
    background: unset;
    background-color: #00000014;
}

.Index_Vermarktungsart .vermarktungsart-block ul {
    list-style: none;
    padding-left: 1em;
    margin: 0;
}

.Index_Vermarktungsart .vermarktungsart-block li {
    margin-bottom: 0.3em;
}

@media (max-width: 600px) {
    .Index_Vermarktungsart {
        flex-direction: column;
    }
    .Index_Vermarktungsart .vermarktungsart-block {
        flex: 1 1 100%;
    }
}

/* Aside-Version: Vermarktungsart-Blöcke untereinander */
.Index_Vermarktungsart.aside-version {
    flex-direction: column;
    gap: 1em;
}

.Index_Vermarktungsart.aside-version .vermarktungsart-block {
    flex: 1 1 100%;
    min-width: unset;
}

.Index_Vermarktungsart.aside-version .vermarktungsart-block h3 {
    font-size: 1em;
    padding: 0.3em 0.5em;
}

.Index_Vermarktungsart.aside-version .vermarktungsart-block ul {
    padding-left: 0.8em;
}

.Index_Vermarktungsart.aside-version .vermarktungsart-block li {
    margin-bottom: 0.2em;
    font-size: 0.95em;
}

/* =====================
   Nachbarorte-Liste im Main-Bereich (zweispaltig)
   ===================== */
.Index_Nachbarorte {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.1em 2em;
    padding-top: 0.5em;
}

/* Listeneinträge - identische Struktur wie idx-nachbarort-liste */
.Index_Nachbarorte li {
    list-style: none;
    margin-bottom: 0.3em;
}

.Index_Nachbarorte li a {
    display: block;
    text-decoration: none;
    color: inherit;
}

.Index_Nachbarorte li a:hover {
    text-decoration: underline;
}

.Index_Nachbarorte .ort-name {
    display: block;
    font-weight: 500;
    color: inherit;
}

.Index_Nachbarorte .ort-meta {
    display: block;
    font-size: 0.85em;
    color: #666;
}

.Index_Nachbarorte .entfernung {
    color: #888;
}

.Index_Nachbarorte .min-preis {
    font-weight: 500;
    color: #555;
}

/* LeanList: Anzahl vor min-preis (clientseitig generiert) */
.Index_Nachbarorte .anzahl-ll,
.aside-nachbarorte .anzahl-ll {
    font-weight: 600;
    color: #3245A3;
}

/* Hervorhebung für Nachbarorte mit Immobilien */
.Index_Nachbarorte .ort-name.relevant,
.Index_Nachbarorte .ort-meta.relevant {
    font-weight: 600;
    color: #333;
}

/* Responsive: Einspaltig auf kleinen Bildschirmen */
@media (max-width: 600px) {
    .Index_Nachbarorte {
        grid-template-columns: 1fr;
    }
}

/* =====================
   GLOBALE LINK-STYLES FÃœR INDEX-SEITEN
   - Hover-Effekt für alle Links
   - Erweiterte Klickfläche (ganzer li/div-Bereich)
   - Gilt NICHT für inc-Bereiche (Exposee-Includes)
   ===================== */

/* === Vermarktungsart-Blöcke (Main + Aside) === */

/* H3-Links: Erweiterte Klickfläche */
.Index_Vermarktungsart .vermarktungsart-block h3 a {
    display: block;
    text-decoration: none;
    color: inherit;
    padding: 0.3em 0.5em;
    margin: -0.3em -0.5em;
    border-radius: 3px;
    transition: background-color 0.15s ease;
}

.Index_Vermarktungsart .vermarktungsart-block h3 a:hover {
    background-color: #00000010;
    text-decoration: underline;
}

/* Listen-Links: Erweiterte Klickfläche */
.Index_Vermarktungsart .vermarktungsart-block li {
    position: relative;
}

.Index_Vermarktungsart .vermarktungsart-block li a {
    display: block;
    padding: 0.2em 0.3em;
    margin: -0.2em -0.3em;
    text-decoration: none;
    color: inherit;
    border-radius: 3px;
    transition: background-color 0.15s ease;
}

.Index_Vermarktungsart .vermarktungsart-block li a:hover {
    background-color: #00000010;
    text-decoration: underline;
    color: var(--link-hover-color);
}

/* === Breadcrumb === */
.breadcrumb a {
    padding: 0.2em 0.4em;
    margin: -0.2em -0.4em;
    border-radius: 3px;
    transition: background-color 0.15s ease;
}

.breadcrumb a:hover {
    background-color: #00000010;
    text-decoration: underline;
    color: var(--link-hover-color);
}

/* === Navigation / Menu Links === */
.menu li a {
    display: inline-block;
    padding: 0.4em 0.6em;
    margin: -0.4em -0.6em;
    text-decoration: none;
    color: inherit;
    border-radius: 3px;
    transition: background-color 0.15s ease;
}

.menu li a:hover {
    background-color: #00000010;
    text-decoration: underline;
    color: var(--link-hover-color);
}

nav a {
    transition: background-color 0.15s ease;
}

nav a:hover {
    background-color: #00000010;
    color: var(--link-hover-color);
}

/* === Statistik-Box (Single-Link-Container) === */
/* Die gesamte Box ist klickbar, Hover-Effekt nur auf dem Link-Text */
.tpl-statistik {
    position: relative;
    cursor: pointer;
    transition: background-color 0.15s ease;
}

/* Der Link spannt die gesamte Box auf (Overlay-Technik) */
.tpl-statistik .stat-link a::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1;
}

.tpl-statistik .stat-link a {
    position: relative;
    z-index: 2;
    transition: color 0.15s ease;
}

/* Hover auf der gesamten Box: Link-Text bekommt Unterstreichung */
.tpl-statistik:hover .stat-link a {
    text-decoration: underline;
    color: var(--link-hover-color);
}

/* Leichter Hintergrund-Effekt auf der Box beim Hover */
.tpl-statistik:hover {
    background-color: #00000008;
}

/* === Aside Nachbarorte-Liste === */
.idx-nachbarort-liste li a:hover {
    color: var(--link-hover-color);
}

/* === Quickjumper === */
.idx-quickjumper a {
    padding: 0.2em 0.4em;
    margin: -0.2em -0.4em;
    border-radius: 3px;
    transition: background-color 0.15s ease;
}

.idx-quickjumper a:hover {
    background-color: #00000010;
    text-decoration: underline;
    color: var(--link-hover-color);
}

/* === Allgemeine Hover-Transition für Index-Layout Links === */
.index-layout a {
    /* transition: background-color 0.15s ease, color 0.15s ease; */
    text-decoration: none;
    color: inherit;
}

/* === Globaler Hover-Effekt: Dunkles Blau für alle Links (nur Desktop) === */
/* AUSNAHME: Objektlisten (.inc-Bereiche) bekommen keinen Hover-Effekt */
@media (hover: hover) {
    .index-layout a:hover {
        color: var(--link-hover-color);
    }
    
    /* Ausnahme: Objektlisten (Exposee-Includes) - kein Hover-Farbwechsel */
    .Index_ObjektlisteOrt a:hover,
    .Index_ObjektlisteNachbarorte a:hover,
    .Index_ObjektlisteAndereUnterkategorien a:hover {
        color: inherit;
    }
}

/* =====================
   MOBILE: Links blau + unterstrichen (kein Hover möglich)
   Gilt für Touch-Geräte ohne Hover-Fähigkeit
   ===================== */
@media (hover: none), (max-width: 950px) {
    /* Nachbarorte-Listen */
    .idx-nachbarort-liste .ort-name,
    .Index_Nachbarorte .ort-name {
        color: var(--color-primary-dark) !important;
        text-decoration: underline;
    }
    
    /* Vermarktungsart-Blöcke */
    .Index_Vermarktungsart .vermarktungsart-block li a,
    .Index_Vermarktungsart .vermarktungsart-block h3 a {
        color: var(--color-primary-dark) !important;
        text-decoration: underline;
    }
    
    /* Navigation / Menu */
    .menu li a {
        color: var(--color-primary-dark) !important;
        text-decoration: underline;
    }
    
    /* Breadcrumb */
    .breadcrumb a {
        color: var(--color-primary-dark) !important;
        text-decoration: underline;
    }
    
    /* Statistik-Box Links */
    .idx-statistik .stat-link a {
        color: var(--color-primary-dark) !important;
        text-decoration: underline;
    }
    
    /* Quickjumper */
    .idx-quickjumper a {
        color: var(--color-primary-dark) !important;
        text-decoration: underline;
    }
    
    /* Aside-Blöcke allgemein */
    .aside-block a {
        color: var(--color-primary-dark) !important;
        text-decoration: underline;
    }
    
    /* Alle Links im index-layout */
    .index-layout a {
        color: var(--color-primary-dark) !important;
        text-decoration: underline;
    }
    
    /* Ausnahme: Objektlisten (Exposee-Includes) - keine Unterstreichung, keine blaue Farbe */
    .Index_ObjektlisteOrt a,
    .Index_ObjektlisteNachbarorte a,
    .Index_ObjektlisteAndereUnterkategorien a {
        color: inherit !important;
        text-decoration: none !important;
    }
    
    /* Ãœberschriften mit Links */
    section h2,
    .idx-titel h1 {
        color: var(--color-primary-dark) !important;
    }
}

/* =====================
   RESPONSIVE SKALIERUNG für kleine Viewports
   Proportionale Verkleinerung aller Elemente
   ===================== */

/* Ab 700px: leicht kleiner */
@media only screen and (max-width: 700px) {
    html {
        font-size: 90%;
    }
    
    /* Objektlisten: Bild über den Daten statt daneben */
    article {
        min-height: auto;
        /* margin-bottom: 3em; */
    }
    article figure {
        float: none;
        width: 100%;
        height: auto;
        margin-right: 0;
        margin-bottom: 0.5em;
    }
    article figure img {
        width: 100%;
        height: auto;
        max-height: 200px;
        object-fit: cover;
    }
    article .Daten {
        clear: both;
    }
}

/* Ab 500px: noch kleiner */
@media only screen and (max-width: 500px) {
    html {
        font-size: 95%;
    }
}

/* Ab 400px: kompakt */
@media only screen and (max-width: 400px) {
    html {
        font-size: 90%;
    }
}

/* Ab 350px: sehr kompakt */
@media only screen and (max-width: 350px) {
    html {
        font-size: 85%;
    }
}

/* ================================================
   LeanList - Pseudo-Dynamische Objektlisten
   ================================================ */

/* Vermarktungsart-Block Container */
.vermarktungsart-block {
}

/* Objektart-Liste innerhalb Vermarktungsart */
.objektart-liste {
}

.objektart-liste li {
}

.objektart-liste li a {
}

/* Objektart-Name (z.B. "Häuser", "Wohnungen") */
.objektart-name {
}

/* Anzahl-Anzeige aus LeanList (z.B. "8 x") */
.anzahl-ll {color: #999;font-style: italic;}

/* Mindestpreis-Anzeige (z.B. "ab 125.000 €") */
.objektart-liste .min-preis {color: #999;font-style: italic;}
.objektarten-liste .min-preis {color: #999;font-style: italic;}

/* ================================================
   Ebene 2: Objektarten-Auswahl (Vermarktungsart-Seiten)
   ================================================ */

/* Main: Objektart-Template Container */
.tpl-objektart {
}

/* Aside: Objektarten-Block */
.tpl-aside2-objektarten {
}

/* Objektarten-Liste (gemeinsam für Main + Aside) */
.objektarten-liste {
}

.objektarten-liste li {
}

.objektarten-liste li a {
}

/* ================================================
   Ebene 3: Unterkategorien-Auswahl (Objektart-Seiten)
   ================================================ */

/* Main: Unterkategorie-Template Container */
.tpl-unterkategorie {
}

/* Aside: Unterkategorien-Block */
.tpl-aside3-unterkategorien {
}

/* Unterkategorie-Liste Main */
.unterkategorie-liste {list-style: none;}

.unterkategorie-liste li {
}

.unterkategorie-liste li a {
}

/* Unterkategorien-Liste Aside */
.unterkategorien-liste {
}

.unterkategorien-liste li {
}

.unterkategorien-liste li a {
}

/* Unterkategorie-Name (z.B. "3 Zimmer", "Baugrund") */
.unterkategorie-name {font-weight: 600;}

/* Min-Preis für Unterkategorien */
.unterkategorie-liste .min-preis {color: #999;font-style: italic;}
.unterkategorien-liste .min-preis {color: #999;font-style: italic;}
.objektarten-liste li a:not(.relevant),

.unterkategorien-liste li a:not(.relevant) .unterkategorie-name {
    opacity: 0.5;
    font-weight:500;
    /* oder: color: #999; */
}
.unterkategorie-liste li a:not(.relevant) .unterkategorie-name {
    opacity: 0.5;
    font-weight:500;
    /* oder: color: #999; */
}
.andere-immobilien-liste li a.relevant {
    font-weight: 600;
    /* oder: color: #999; */
}

.andere-objektart-liste li a.relevant {
    font-weight: 600;
    /* oder: color: #999; */
}

.andere-unterkategorien-liste li a:not(.relevant) .unterkategorie-name {
    font-weight: 500;
    opacity: 0.5 ;
    /* oder: color: #999; */
}

.andere-unterkategorie-liste li a:not(.relevant) .unterkategorie-name{
    font-weight: 500;
    opacity: 0.5;
    /* oder: color: #999; */
}
.objektart-liste li a.relevant .objektart-name{
    font-weight:600;
}

/* ========== FILTER-PANEL (LeanList) ========== */
/* Filter-Container im Aside */
.tpl-filter {
    margin-bottom: 0.5em;
}

/* Filter-Toggle Button im H3 */
.tpl-filter h3 {
    margin-bottom: 0;
    padding: 0;
}
.tpl-filter h3 button {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: none;
    border: none;
    cursor: pointer;
    font-size: inherit;
    font-weight: 600;
    color: inherit;
    /* padding: 0.5em 1em; */
    text-align: left;
}
.tpl-filter h3 button:hover {
    background-color: #00000008;
}
.tpl-filter .filter-icon {
    margin-right: 0.5em;
}
.tpl-filter .filter-arrow {
    font-size: 0.7em;
    transition: transform 0.2s ease;
}
.tpl-filter h3 button[aria-expanded="true"] .filter-arrow {
    transform: rotate(180deg);
}

/* Roter Hintergrund bei 0 gefilterten Ergebnissen (v2.42) */
.tpl-filter h3.filter-zero-results {
    background-color: #f6cbcb;
    border-radius: 4px;
}

/* Filter-Body - Desktop: immer sichtbar */
.filter-body {
    /* padding: 1em; */
    padding-top: 0.5em;
}

/* Desktop: Toggle-Button verstecken, Filter immer sichtbar */
@media (min-width: 769px) {
    .filter-toggle-mobile {
        pointer-events: none;
        cursor: default;
    }
    .filter-toggle-mobile .filter-arrow {
        display: none;
    }
    .filter-body {
        display: block !important;
    }
}

/* Filter-Gruppe */
.filter-group {
    margin-bottom: .1em;
}
.filter-group:last-child {
    margin-bottom: 0;
}

/* Label-Zeile mit Output daneben */
.filter-label-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    /* margin-bottom: 0.3em; */
}
.filter-label-row label {
    font-size: 0.85em;
    font-weight: 600;
    color: #555;
}
.filter-label-row output {
    font-size: 0.85em;
    color: var(--color-primary-dark);
    font-weight: 500;
}

/* Slider-Container */
/* ========== UNIVERSELLER SLIDER-TRACK (Fake-Track) ========== */
/* Der Fake-Track wird im Hintergrund angezeigt.
   Die eigentlichen Slider liegen mit transparentem Track als Overlay darüber. */
.slider-track {
    position: relative;
    height: 13px;
    /* background: linear-gradient(to right, 
        var(--color-primary-dark) 0%,
        #5a6fc7 25%,
        #9ca8d9 50%,
        #c8cfe8 75%,
        #e8ebf4 100%); */
    border-radius: 6px;
    box-shadow: inset 0 1px 3px rgba(0,0,0,0.15), 0 1px 0 rgba(255,255,255,0.5);
    background-color: var(--color-slider-track);
}

/* Container für Slider mit Fake-Track */
.slider-container {
    display: flex;
    flex-direction: column;
    gap: 0.3em;
    position: relative;
    margin-top: -0.4em;
}

/* Fake-Track im Slider-Container (für Einzel-Slider wie Umkreis) */
.slider-container .slider-track {
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    transform: translateY(-50%);
    z-index: 0;
    pointer-events: none;
}

/* Range-Slider Styling - TRANSPARENTER TRACK */
.filter-group input[type="range"] {
    width: 100%;
    height: 30px;
    -webkit-appearance: none;
    appearance: none;
    background: transparent !important;
    outline: none !important;
    border: none !important;
    box-shadow: none !important;
    cursor: pointer;
    position: relative;
    z-index: 1;
}
/* Focus-Outline komplett entfernen (kein blauer Rahmen) */
.filter-group input[type="range"]:focus {
    outline: none !important;
    box-shadow: none !important;
    border: none !important;
}
.filter-group input[type="range"]:focus-visible {
    outline: none !important;
}
/* WebKit: Track transparent */
.filter-group input[type="range"]::-webkit-slider-runnable-track {
    height: 6px;
    background: transparent;
    border-radius: 3px;
}
/* Firefox: Track transparent */
.filter-group input[type="range"]::-moz-range-track {
    height: 6px;
    background: transparent;
    border-radius: 3px;
}
/* Thumb-Styling (WebKit) */
.filter-group input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 20px;
    height: 20px;
    background: linear-gradient(145deg, var(--color-slider-thumb-light), var(--color-slider-thumb-dark));
    border-radius: 50%;
    cursor: pointer;
    border: 2px solid #fff;
    box-shadow: 0 2px 4px rgba(0,0,0,0.3), inset 0 1px 0 rgba(255,255,255,0.3);
    margin-top: -7px;
}
/* Thumb-Styling (Firefox) */
.filter-group input[type="range"]::-moz-range-thumb {
    width: 20px;
    height: 20px;
    background: linear-gradient(145deg, var(--color-slider-thumb-light), var(--color-slider-thumb-dark));
    border-radius: 50%;
    cursor: pointer;
    border: 2px solid #fff;
    box-shadow: 0 2px 4px rgba(0,0,0,0.3), inset 0 1px 0 rgba(255,255,255,0.3);
}
/* Thumb-Hover (WebKit) */
.filter-group input[type="range"]:hover::-webkit-slider-thumb {
    background: linear-gradient(145deg, var(--color-slider-thumb-hover-light), var(--color-slider-thumb-hover-dark));
    box-shadow: 0 2px 6px rgba(0,0,0,0.4), inset 0 1px 0 rgba(255,255,255,0.3);
}
/* Thumb-Hover (Firefox) */
.filter-group input[type="range"]:hover::-moz-range-thumb {
    background: linear-gradient(145deg, var(--color-slider-thumb-hover-light), var(--color-slider-thumb-hover-dark));
    box-shadow: 0 2px 6px rgba(0,0,0,0.4), inset 0 1px 0 rgba(255,255,255,0.3);
}

/* Output-Anzeige (jetzt in .filter-label-row) */
/* Alte Styles für Kompatibilität */
.filter-group > output {
    font-size: 0.9em;
    color: #333;
    text-align: center;
    font-weight: 500;
}

/* Mobile: Filter über der Objektliste */
@media (max-width: 768px) {
    .tpl-filter {
        position: sticky;
        top: 0;
        z-index: 100;
        background: #fff;
        border-bottom: 1px solid #ddd;
    }
}

/* Filter-Header: Normal vs. Ergebnis-Ansicht */
.filter-text { /* Filter-Text im Toggle-Button */ }
.filter-no-results-headline { /* Filter: Ãœberschrift bei 0 Ergebnissen */ }

.filter-normal, .filter-result {
    display: inline-flex;
    align-items: center;
    gap: 0.3em;
}
.filter-result {
    color: var(--color-primary-dark);
    font-weight: 500;
}
.filter-found {
    font-size: 0.95em;
}
.filter-found .filter-time {
    font-size: 0.85em;
    color: #666;
    font-weight: 400;
}

/* Reset-Button */
.filter-reset-btn {
    width: 100%;
    padding: 0.6em 1em;
    margin-top: 1em;
    background: #f0f0f0;
    border: 1px solid #ccc;
    border-radius: 4px;
    cursor: pointer;
    font-size: 0.9em;
    color: #333;
    transition: background 0.2s, border-color 0.2s;
}
.filter-reset-btn:hover {
    background: #e0e0e0;
    border-color: #999;
}

/* ========== NEUE FILTER-ELEMENTE (v2.00) ========== */

/* 2-Spalten-Layout für von-bis Felder */
.filter-row-2col {
    display: flex;
    align-items: center;
    gap: 0.5em;
}
.filter-separator {
    color: #666;
    font-weight: 500;
}
.filter-unit {
    color: #666;
    font-size: 0.9em;
}

/* Select-Felder (Baujahr, Sortierung) */
.filter-group select {
    width: 100%;
    /* padding: 0.5em; */
    border: 1px solid #ccc;
    border-radius: 4px;
    font-size: 0.95em;
    background: #fff;
    cursor: pointer;
}
.filter-row-2col select {
    flex: 1;
    min-width: 0;
}
.filter-group select:focus {
    outline: none;
    border-color: var(--color-primary-dark);
    box-shadow: 0 0 0 2px rgba(50, 69, 163, 0.2);
}

/* Number-Inputs (Zimmer, Wohnfläche) */
.filter-group input[type="number"] {
    flex: 1;
    min-width: 0;
    padding: 0.5em;
    border: 1px solid #ccc;
    border-radius: 4px;
    font-size: 0.95em;
    text-align: center;
}
.filter-group input[type="number"]:focus {
    outline: none;
    border-color: var(--color-primary-dark);
    box-shadow: 0 0 0 2px rgba(50, 69, 163, 0.2);
}
/* Spinner-Buttons entfernen */
.filter-group input[type="number"]::-webkit-inner-spin-button,
.filter-group input[type="number"]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
.filter-group input[type="number"] {
    -moz-appearance: textfield;
    appearance: textfield;
}

/* ========================================
   Filter-Orts-Suche (Autocomplete)
   Design wie Vermarktungsart-Dropdown
   ======================================== */
.filter-ort-group {
    margin-bottom: .1em;
}
.filter-ort-wrapper {
    position: relative;
}
.filter-ort-input {
    width: 100%;
    border: 1px solid #ccc;
    border-radius: 4px;
    font-size: 0.95em;
    background: #fff;
    box-sizing: border-box;
    cursor: text;
}
.filter-ort-input:focus {
    outline: none;
    border-color: var(--color-primary-dark);
    box-shadow: 0 0 0 2px rgba(50, 69, 163, 0.2);
}
.filter-ort-input::placeholder {
    color: #999;
}
/* Vorschlagsliste */
.filter-ort-vorschlaege {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    max-height: 280px;
    overflow-y: auto;
    background: #fff;
    border: 1px solid #ccc;
    border-top: none;
    border-radius: 0 0 4px 4px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    list-style: none;
    margin: 0;
    padding: 0;
    z-index: 1000;
}
.filter-ort-vorschlag-item {
    padding: 0.6em 0.8em;
    cursor: pointer;
    border-bottom: 1px solid #f0f0f0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.9em;
}
.filter-ort-vorschlag-item:last-child {
    border-bottom: none;
}
.filter-ort-vorschlag-item:hover {
    background: #f0f4ff;
}
.filter-ort-vorschlag-aktiv {
    background: #e0e8ff !important;
    outline: 2px solid var(--color-primary-dark);
    outline-offset: -2px;
}
.filter-ort-vorschlag-anzahl {
    font-size: 0.85em;
    color: #666;
    background: #f0f0f0;
    padding: 0.2em 0.5em;
    border-radius: 3px;
    white-space: nowrap;
    margin-left: 0.5em;
}
.filter-ort-vorschlag-keine {
    color: #999;
    font-style: italic;
}

/* Dual-Slider für Preis (logarithmisch) */
.dual-slider-container {
    position: relative;
    height: 30px;
    margin-top: -0.25em;
}
/* Universeller Fake-Track im Dual-Slider-Container */
/* Track ist klickbar für adaptive Thumb-Positionierung (v2.41) */
.dual-slider-container .slider-track {
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    transform: translateY(-50%);
    z-index: 0;
    pointer-events: auto;
    cursor: pointer;
}
/* Dual-Slider mit transparentem Track */
.dual-slider {
    position: absolute;
    width: 100%;
    height: 30px;
    top: 0;
    left: 0;
    margin: 0;
    padding: 0;
    pointer-events: none;
    -webkit-appearance: none;
    appearance: none;
    background: transparent !important;
    outline: none !important;
    border: none !important;
    box-shadow: none !important;
}
/* Focus-Outline für Dual-Slider entfernen */
.dual-slider:focus {
    outline: none;
    box-shadow: none;
}
.dual-slider:focus-visible {
    outline: none;
}
.dual-slider::-webkit-slider-runnable-track {
    height: 100%;
    background: transparent;
}
.dual-slider::-moz-range-track {
    height: 100%;
    background: transparent;
}
/* Dual-Slider Thumb (WebKit) - auf Track-Mitte zentriert */
.dual-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    pointer-events: auto;
    width: 20px;
    height: 20px;
    background: linear-gradient(145deg, var(--color-slider-thumb-light), var(--color-slider-thumb-dark));
    border-radius: 50%;
    cursor: pointer;
    border: 2px solid #fff;
    box-shadow: 0 2px 4px rgba(0,0,0,0.3), inset 0 1px 0 rgba(255,255,255,0.3);
    margin-top: -7px;
}
/* Dual-Slider Thumb (Firefox) */
.dual-slider::-moz-range-thumb {
    pointer-events: auto;
    width: 20px;
    height: 20px;
    background: linear-gradient(145deg, var(--color-slider-thumb-light), var(--color-slider-thumb-dark));
    border-radius: 50%;
    cursor: pointer;
    border: 2px solid #fff;
    box-shadow: 0 2px 4px rgba(0,0,0,0.3), inset 0 1px 0 rgba(255,255,255,0.3);
}
/* Dual-Slider Thumb-Hover (WebKit) */
.dual-slider:hover::-webkit-slider-thumb {
    background: linear-gradient(145deg, var(--color-slider-thumb-hover-light), var(--color-slider-thumb-hover-dark));
    box-shadow: 0 2px 6px rgba(0,0,0,0.4), inset 0 1px 0 rgba(255,255,255,0.3);
}
/* Dual-Slider Thumb-Hover (Firefox) */
.dual-slider:hover::-moz-range-thumb {
    background: linear-gradient(145deg, var(--color-slider-thumb-hover-light), var(--color-slider-thumb-hover-dark));
    box-shadow: 0 2px 6px rgba(0,0,0,0.4), inset 0 1px 0 rgba(255,255,255,0.3);
}

/* ========== DUAL-SLIDER MIN/MAX POSITIONIERUNG ========== */
/* Separate Klassen für individuelle Thumb-Positionierung per translateY */
.dual-slider-min {
    /* Position des Min-Thumbs anpassen */
}
.dual-slider-min::-webkit-slider-thumb {
    /* WebKit: Min-Thumb Position */
}
.dual-slider-min::-moz-range-thumb {
    /* Firefox: Min-Thumb Position */
}

.dual-slider-max {
    /* Position des Max-Thumbs anpassen */
    transform: translateY(-128%);
}
.dual-slider-max::-webkit-slider-thumb {
    /* WebKit: Max-Thumb Position */
}
.dual-slider-max::-moz-range-thumb {
    /* Firefox: Max-Thumb Position */
}

/* ========== INDIVIDUELLE SLIDER-KLASSEN ========== */
/* Jeder Slider hat eine eigene Klasse für individuelles Styling */

/* Umkreis-Slider (Einzel-Slider) */
.slider-umkreis {
    /* Individuelles Design für Umkreis-Slider */
}
.slider-umkreis .slider-track {
    /* Track-Design für Umkreis */
}
.slider-umkreis input[type="range"]::-webkit-slider-thumb {
    /* Thumb-Design für Umkreis (WebKit) */
}
.slider-umkreis input[type="range"]::-moz-range-thumb {
    /* Thumb-Design für Umkreis (Firefox) */
}

/* Baujahr-Slider (Dual-Slider) */
.slider-baujahr {
    /* Individuelles Design für Baujahr-Slider */
}
.slider-baujahr .slider-track {
    /* Track-Design für Baujahr */
}
.slider-baujahr .dual-slider::-webkit-slider-thumb {
    /* Thumb-Design für Baujahr (WebKit) */
}
.slider-baujahr .dual-slider::-moz-range-thumb {
    /* Thumb-Design für Baujahr (Firefox) */
}

/* Preis-Slider (Dual-Slider) */
.slider-preis {
    /* Individuelles Design für Preis-Slider */
}
.slider-preis .slider-track {
    /* Track-Design für Preis */
}
.slider-preis .dual-slider::-webkit-slider-thumb {
    /* Thumb-Design für Preis (WebKit) */
}
.slider-preis .dual-slider::-moz-range-thumb {
    /* Thumb-Design für Preis (Firefox) */
}

/* Zimmer-Slider (Dual-Slider) */
.slider-zimmer {
    /* Individuelles Design für Zimmer-Slider */
}
.slider-zimmer .slider-track {
    /* Track-Design für Zimmer */
}
.slider-zimmer .dual-slider::-webkit-slider-thumb {
    /* Thumb-Design für Zimmer (WebKit) */
}
.slider-zimmer .dual-slider::-moz-range-thumb {
    /* Thumb-Design für Zimmer (Firefox) */
}

/* Wohnfläche-Slider (Dual-Slider) */
.slider-wohnflaeche {
    /* Individuelles Design für Wohnfläche-Slider */
}
.slider-wohnflaeche .slider-track {
    /* Track-Design für Wohnfläche */
}
.slider-wohnflaeche .dual-slider::-webkit-slider-thumb {
    /* Thumb-Design für Wohnfläche (WebKit) */
}
.slider-wohnflaeche .dual-slider::-moz-range-thumb {
    /* Thumb-Design für Wohnfläche (Firefox) */
}

/* ========== DYNAMISCHE OBJEKTLISTE (bei aktivem Filter) ========== */

/* Statische Sektionen ausblenden bei aktivem Filter - mit Animation */
/* WICHTIG: ID-Selektoren brauchen höhere Spezifität als die Normalzustand-Regel */
#angebote.filter-hidden,
#nachbarorte.filter-hidden,
.idx-quickjumper.filter-hidden,
.Index_Nachbarorte.filter-hidden,
.tpl-nachbarorte-objektliste.filter-hidden,
.tpl-unterkategorien.filter-hidden,
.tpl-andere-objektart.filter-hidden,
.tpl-andere-unterkategorie.filter-hidden,
.idx-titel.filter-hidden,
.tpl-vermarktungsart.filter-hidden,
.tpl-objektart.filter-hidden,
.tpl-unterkategorie.filter-hidden,
.filter-hidden {
    max-height: 0 !important;
    overflow: hidden !important;
    opacity: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    transition: max-height 0.4s ease-out, opacity 0.3s ease-out, margin 0.3s ease-out;
}

/* Sektionen im Normalzustand (für Animation) */
#angebote, #nachbarorte, .Index_Nachbarorte, .tpl-nachbarorte-objektliste {
    /* max-height: 5000px; */ /* Großer Wert für beliebige Höhe */
    opacity: 1;
    overflow: visible;
    transition: max-height 0.4s ease-in, opacity 0.3s ease-in;
}

/* Dynamische Objektliste Container */
.dynamische-objektliste {
    margin: 1em 0;
}

/* Header für Filter-Ergebnis */
.filter-result-header {
    font-size: 1.2em;
    font-weight: 600;
    color: #333;
    margin-bottom: 1em;
    padding: 0.5em;
    background: #f0f4ff;
    border-left: 4px solid #4356b4;
    border-radius: 4px;
}

/* Keine Ergebnisse - Container mit 404-Bild */
.filter-no-results-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 2em;
    text-align: center;
    background: #f9f9f9;
    border-radius: 8px;
}

.filter-no-results-image {
    max-width: 100%;
    width: 768px;
    height: auto;
    border-radius: 8px;
    margin-bottom: 1em;
}

.filter-no-results {
    padding: 1em 2em;
    text-align: center;
    color: #666;
    font-size: 1.1em;
}

/* Loading-Spinner */
.dynamische-objektliste .loading-spinner {
    padding: 1em;
    text-align: center;
    color: #666;
    font-style: italic;
}

/* Dynamisch geladene .inc Wrapper */
.inc-wrapper.dyn-loaded {
    margin-bottom: 1em;
}

/* Entfernungs-Anzeige bei Sortierung nach Entfernung */
.entfernung-anzeige {
    font-weight: 600;
    color: var(--color-primary-dark);
}

/* Wrapper für Entfernung + Ort - verhindert Zeilenumbruch zwischen beiden */
.entfernung-ort-wrapper {
    white-space: nowrap;
}
/* Address-Element (div oder span) im Wrapper muss inline sein */
.entfernung-ort-wrapper [itemprop="address"],
.entfernung-ort-wrapper .Ort {
    display: inline;
}

/* Bedingt sichtbare Filter-Gruppen (Objektart, Unterkategorie) */
.filter-hidden-conditional {
    transition: opacity 0.2s ease, max-height 0.2s ease;
}
.filter-hidden-conditional[style*="display: none"] {
    opacity: 0;
    max-height: 0;
    overflow: hidden;
    margin: 0;
    padding: 0;
}

/* Warnung bei vielen Objekten */
.filter-warning {
    background-color: #fef3cd;
    border: 1px solid #ffc107;
    border-radius: 4px;
    padding: 0.5em 0.75em;
    margin-bottom: 0.75em;
    display: flex;
    align-items: flex-start;
    gap: 0.5em;
    font-size: 0.85em;
    line-height: 1.3;
}
.filter-warning-icon {
    color: #d63384;
    font-size: 1.1em;
    flex-shrink: 0;
}
.filter-warning-text {
    color: #664d03;
}

/* Fake-Spinner Overlay für Filter-Verzögerung */
.filter-spinner-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(255, 255, 255, 0.7);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999;
}
.filter-spinner {
    width: 40px;
    height: 40px;
    border: 4px solid #e0e0e0;
    border-top-color: var(--color-primary-dark);
    border-radius: 50%;
    animation: filter-spin 0.8s linear infinite;
}
@keyframes filter-spin {
    to { transform: rotate(360deg); }
}

.slider-umkreis .slider-track {
    background-color: var(--color-slider-umkreis);
    transition: background-color 0.3s ease;
}
.slider-umkreis.umkreis-aktiv .slider-track {
    background-color: var(--color-slider-umkreis-aktiv);
}

/* ========== USER FAVORITES (UserFavorites.js) ========== */

/* Symbol-Container: Herz und Minus/Plus vor dem Objekttitel */
.uf-symbole {
    display: inline-flex;
    gap: 0.3em;
    margin-right: 0.5em;
    vertical-align: middle;
    font-size: 1.1em;
}

/* Minus/Plus Symbol - background-clip und text-fill-color zurücksetzen wegen Vererbung aus .Objekttitel h4 */
.uf-minusplus {
    cursor: pointer;
    color: #888;
    font-weight: bold;
    width: 1.4em;
    height: 1.4em;
    line-height: 1.4em;
    text-align: center;
    transition: color 0.2s ease;
    user-select: none;
    text-shadow: 0 0 3px #fff, 0 0 6px #fff, 0 0 9px #fff;
    -webkit-background-clip: unset;
    background-clip: unset;
    -webkit-text-fill-color: #888;
    display: inline-block;
}
.uf-minusplus:hover {
    color: #333;
    -webkit-text-fill-color: #333;
}

/* Herz Symbol - background-clip und text-fill-color zurücksetzen wegen Vererbung aus .Objekttitel h4 */
.uf-herz {
    cursor: pointer;
    color: #444;
    font-weight: bold;
    width: 1.4em;
    height: 1.4em;
    line-height: 1.4em;
    text-align: center;
    transition: color 0.2s ease, transform 0.15s ease;
    user-select: none;
    text-shadow: 0 0 3px #fff, 0 0 6px #fff, 0 0 9px #fff, 0 0 2px #fff;
    -webkit-background-clip: unset;
    background-clip: unset;
    -webkit-text-fill-color: #444;
    display: inline-block;
}
.uf-herz:hover {
    color: var(--color-favorit-hover);
    -webkit-text-fill-color: var(--color-favorit-hover);
    transform: scale(1.15);
}

/* Favorit-Objekt: Hellroter Hintergrund, roter Rand */
/* v1.12: Selektor geändert von [itemprop="offers"] auf article[itemscope] */
article[itemscope].uf-favorit {
    background-color: var(--color-favorit-bg) !important;
    /* border-left: 5px solid #d44b4b !important; */
}
article[itemscope].uf-favorit .Objekttitel-Wrapper,
article[itemscope].uf-favorit .Objekttitel,
article[itemscope].uf-favorit h4 {
    background-color: var(--color-favorit-titel) !important;
}

/* Fade-Effekt für Favorit-Objekttitel */
article[itemscope].uf-favorit .Objekttitel::after {
    background: linear-gradient(to right, transparent, var(--color-favorit-titel)) !important;
}

/* Herz bei Favorit rot darstellen */
.uf-favorit .uf-herz {
    color: var(--color-favorit);
    -webkit-text-fill-color: var(--color-favorit);
}
.uf-favorit .uf-herz:hover {
    color: var(--color-favorit-hover);
    -webkit-text-fill-color: var(--color-favorit-hover);
}

/* Dislike-Objekt: Graustufen, hellgrauer Hintergrund */
/* v1.12: Selektor geändert von [itemprop="offers"] auf article[itemscope] */
article[itemscope].uf-dislike {
    filter: grayscale(100%);
    opacity: 0.6;
    transition: filter 0.3s ease, opacity 0.3s ease;
}
article[itemscope].uf-dislike .Objekttitel-Wrapper,
article[itemscope].uf-dislike .Objekttitel,
article[itemscope].uf-dislike h4 {
    background-color: #e8e8e8 !important;
}

/* Fade-Effekt für Dislike-Objekttitel */
article[itemscope].uf-dislike .Objekttitel::after {
    background: linear-gradient(to right, transparent, #e8e8e8) !important;
}

/* Hover auf Dislike: Leicht aufhellen für bessere Erkennbarkeit */
article[itemscope].uf-dislike:hover {
    opacity: 0.85;
}

/* Plus-Symbol bei Dislike-Objekten grün hervorheben */
.uf-dislike .uf-minusplus {
    color: #4a4;
    -webkit-text-fill-color: #4a4;
}
.uf-dislike .uf-minusplus:hover {
    color: #2a2;
    -webkit-text-fill-color: #2a2;
}

/* ========== HEADER TEILEN-BUTTON (v2.50 - SVG-Icons, Desktop Inline, Mobile Dropdown) ========== */

/* Container für Teilen-Buttons im Header (zwischen Logo und Claim) */
/* Deferred Loading: Initial komplett ausgeblendet (display:none), wird nach Seitenaufbau eingeblendet (v2.52) */
/* Verhindert Layout-Shift durch nachladende SVG-Icons */
.header-share {
    display: none; /* Initial ausgeblendet - wird per JS nach load auf inline-flex gesetzt */
    align-items: flex-end;
    align-self: flex-end; /* Im Flexbox-Container unten ausrichten */
    position: relative;
    margin-left: 1.5em;
    margin-right: 0.5em;
    margin-bottom: -0.95em; /* Bündig mit Grundlinie von Logo/Claim */
}

/* Nach dem Laden der Seite: Teilen-Leiste einblenden */
.header-share.share-loaded {
    display: inline-flex;
}

/* === INLINE-DARSTELLUNG (Desktop) === */
.share-inline {
    display: inline-flex;
    align-items: center;
    gap: 0.3em;
}

.share-inline .share-icon {
    display: inline-block;
    padding: 0.02em;
    border-radius: 4px;
    transition: background-color 0.2s ease, transform 0.15s ease;
}

.share-inline .share-icon:hover {
    background-color: rgba(50, 69, 163, 0.1);
    transform: scale(1.1);
}

.share-inline .share-svg {
    width: 20px;
    height: 20px;
    vertical-align: middle;
    opacity: 0.7;
    transition: opacity 0.2s ease;
}

.share-inline .share-icon:hover .share-svg {
    opacity: 1;
}

/* SVG-Icon-Farben für Inline-Darstellung (via CSS filter) */
.share-inline .email .share-svg { filter: invert(30%) sepia(90%) saturate(500%) hue-rotate(180deg); }
.share-inline .whatsapp .share-svg { filter: invert(50%) sepia(90%) saturate(500%) hue-rotate(90deg); }
.share-inline .facebook .share-svg { filter: invert(30%) sepia(90%) saturate(1000%) hue-rotate(200deg); }
.share-inline .x .share-svg { filter: invert(0%); }
.share-inline .telegram .share-svg { filter: invert(40%) sepia(90%) saturate(500%) hue-rotate(180deg); }
.share-inline .linkedin .share-svg { filter: invert(30%) sepia(90%) saturate(800%) hue-rotate(190deg); }
.share-inline .sms .share-svg { filter: invert(50%) sepia(90%) saturate(400%) hue-rotate(90deg); }
.share-inline .imessage .share-svg { filter: invert(40%) sepia(90%) saturate(600%) hue-rotate(200deg); }
.share-inline .copy .share-svg { filter: invert(40%) sepia(0%) saturate(0%); }
.share-inline .print .share-svg { filter: invert(40%) sepia(0%) saturate(0%); }

/* === TOGGLE-BUTTON (nur Mobile sichtbar) === */
.share-toggle {
    display: none; /* Desktop: versteckt */
    background: none;
    border: none;
    cursor: pointer;
    padding: 0.3em 0.5em;
    border-radius: 4px;
    transition: background-color 0.2s ease;
}

.share-toggle:hover {
    background-color: rgba(50, 69, 163, 0.1);
}

.share-toggle:focus {
    outline: 2px solid var(--color-primary-dark);
    outline-offset: 2px;
}

.share-svg-toggle {
    width: 24px;
    height: 24px;
    vertical-align: middle;
    filter: invert(25%) sepia(50%) saturate(1000%) hue-rotate(200deg);
}

/* === DROPDOWN (nur Mobile sichtbar) === */
.share-dropdown {
    display: none; /* Desktop: versteckt */
    position: absolute;
    left: 0;
    top: 100%;
    margin-top: 0.5em;
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    padding: 0.5em;
    z-index: 1000;
    min-width: 160px;
}

.share-dropdown[hidden] {
    display: none !important;
}

/* Teilen-Links im Dropdown */
.share-dropdown a {
    display: flex;
    align-items: center;
    gap: 0.6em;
    padding: 0.5em 0.8em;
    color: #333;
    text-decoration: none;
    border-radius: 4px;
    transition: background-color 0.15s ease;
    font-size: 0.9em;
}

.share-dropdown a:hover {
    background-color: #f0f0f0;
}

.share-dropdown .share-svg {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
}

/* SVG-Icon-Farben für Dropdown (via CSS filter) */
.share-dropdown .email .share-svg { filter: invert(30%) sepia(90%) saturate(500%) hue-rotate(180deg); }
.share-dropdown .whatsapp .share-svg { filter: invert(50%) sepia(90%) saturate(500%) hue-rotate(90deg); }
.share-dropdown .facebook .share-svg { filter: invert(30%) sepia(90%) saturate(1000%) hue-rotate(200deg); }
.share-dropdown .x .share-svg { filter: invert(0%); }
.share-dropdown .telegram .share-svg { filter: invert(40%) sepia(90%) saturate(500%) hue-rotate(180deg); }
.share-dropdown .linkedin .share-svg { filter: invert(30%) sepia(90%) saturate(800%) hue-rotate(190deg); }
.share-dropdown .sms .share-svg { filter: invert(50%) sepia(90%) saturate(400%) hue-rotate(90deg); }
.share-dropdown .imessage .share-svg { filter: invert(40%) sepia(90%) saturate(600%) hue-rotate(200deg); }
.share-dropdown .copy .share-svg { filter: invert(40%) sepia(0%) saturate(0%); }
.share-dropdown .print .share-svg { filter: invert(40%) sepia(0%) saturate(0%); }

/* ========== COUNTDOWN-POPUP FÃœR GETEILTE URLS ========== */

/* Overlay (halbtransparenter Hintergrund) */
.filter-popup-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10000;
}

/* Popup-Container */
.filter-popup {
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.25);
    max-width: 480px;
    width: 90%;
    padding: 1.5em;
    animation: popupFadeIn 0.3s ease;
}
@keyframes popupFadeIn {
    from { opacity: 0; transform: scale(0.95); }
    to { opacity: 1; transform: scale(1); }
}

/* Popup-Header */
.filter-popup-header {
    display: flex;
    align-items: center;
    gap: 0.5em;
    margin-bottom: 1em;
}
.filter-popup-icon {
    font-size: 1.5em;
    color: #e67e22;
}
.filter-popup-title {
    font-size: 1.3em;
    font-weight: 600;
    color: #333;
}

/* Popup-Text */
.filter-popup-text {
    color: #555;
    line-height: 1.5;
    margin-bottom: 1.5em;
}

/* Popup-Aktionen (Links untereinander) */
.filter-popup-actions {
    display: flex;
    flex-direction: column;
    gap: 0.8em;
}

/* OK-Link mit Fortschrittsbalken */
.filter-popup-ok {
    position: relative;
    display: block;
    padding: 0.8em 1em;
    background: transparent;
    border-radius: 6px;
    color: #333;
    text-decoration: none;
    overflow: hidden;
    z-index: 0;
}

/* Text über dem Fortschrittsbalken */
.filter-popup-ok .popup-countdown,
.filter-popup-ok .popup-ok-text,
.filter-popup-ok {
    position: relative;
    z-index: 2;
}

/* Countdown-Zahl */
.popup-countdown {
    font-weight: 700;
    color: #2a7a2a;
}

/* Fortschrittsbalken (wächst von links nach rechts) */
.popup-progress {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 0;
    background: linear-gradient(90deg, #7bc47f 0%, #4a9e4f 100%);
    opacity: 0.5;
    z-index: 1;
    border-radius: 6px;
}

/* Reset-Link */
.filter-popup-reset {
    display: block;
    padding: 0.8em 1em;
    background: #f6cbcb;
    border-radius: 6px;
    color: #333;
    text-decoration: none;
    text-align: center;
    transition: background-color 0.2s ease;
}
.filter-popup-reset:hover {
    background: #f0b0b0;
}

/* Mobile Anpassungen */
@media (max-width: 768px) {
    /* Header-Share: Inline verstecken, Toggle + Dropdown anzeigen */
    .share-inline {
        display: none;
    }
    .share-toggle {
        display: inline-block;
    }
    .share-dropdown:not([hidden]) {
        display: block;
    }
    .header-share {
        margin-left: 0.3em;
        margin-right: 0.3em;
    }
    .filter-popup {
        padding: 1em;
    }
    .filter-popup-title {
        font-size: 1.1em;
    }
}

/* ============================================================================
 * UMGEBUNGSKARTE (Phase 1 - Karten.js)
 * Ersetzt vorübergehend die Statistik-Box
 * ============================================================================ */

.tpl-karten {
    background: var(--aside-bg, #f8f9fa);
    border-radius: 8px;
    padding: 1em;
    margin-bottom: 1em;
}

.tpl-karten h3 {
    margin: 0 0 0.5em 0;
    font-size: 1.1em;
    color: var(--text-color, #1e293b);
}

.karten-box {
    width: 300px;
    height: 300px; /* Quadratisch für 50x50 km Bereich */
    background: #d4c4a8; /* Saharagrau - Fallback */
    border-radius: 4px;
    overflow: hidden;
    position: relative;
}

.karten-box canvas.umgebungskarte {
    display: block;
    width: 100%;
    height: 100%;
}

.karten-fallback {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    color: #64748b;
    font-size: 0.9em;
}

/* Mobile: Karte auf volle Breite */
@media (max-width: 949px) {
    .karten-box {
        width: 100%;
        max-width: 300px;
        margin: 0 auto;
    }
}

/* ============================================================================
 * EBENE 0 - STARTSEITE (Index0)
 * Suchfeld, Objektlisten, Statistik-Links, Aside
 * ============================================================================ */

/* === Layout: Main + Aside === */
.index0-layout {
    display: flex;
    flex-wrap: wrap;
    gap: 2em;
}

.index0-layout main {
    flex: 1 1 600px;
    min-width: 0;
}

.index0-layout .idx0-aside {
    flex: 0 0 auto;
    width: 24em; /* ~416px bei 16px base */
    max-width: 100%;
}

/* === Suchfeld === */
.idx0-suchfeld-container {
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    padding: 2em;
    border-radius: 12px;
    margin-bottom: 2em;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}

.idx0-suchfeld-container h2 {
    margin: 0 0 1em 0;
    font-size: 1.5em;
    color: #333;
    text-align: center;
}

.idx0-suchfeld-wrapper {
    position: relative;
    max-width: 320px;
    margin: 0 auto;
}

.idx0-suchfeld-input {
    /* width: 100%; */
    padding: 0.8em 3em 0.8em 1em;
    font-size: 1.1em;
    border: 2px solid #c2c6d1;
    border-radius: 8px;
    background: #fff;
    box-sizing: border-box;
}

.idx0-suchfeld-input:focus {
    border-color: var(--color-primary-dark);
    outline: none;
    box-shadow: 0 0 0 3px rgba(50,69,163,0.15);
}

.idx0-suchfeld-button {
    position: absolute;
    /* right: 6px; */
    top: 47%;
    transform: translateY(-50%);
    background: #77777733;
    border: none;
    border-radius: 6px;
    padding: 0.6em 0.8em;
    cursor: pointer;
    color: #fff;
    font-size: 1.0em;
}

.idx0-suchfeld-button:hover {
    background: #2a3a8a;
}

.idx0-suchfeld-icon {
    display: block;
}

.idx0-suchfeld-hint {
    text-align: center;
    margin-top: 0.8em;
    color: #666;
    font-size: 0.9em;
}

/* === Vorschlagsliste (Autocomplete) === */
.idx0-suchfeld-vorschlaege {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: #fff;
    border: 1px solid #c2c6d1;
    border-top: none;
    border-radius: 0 0 8px 8px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    list-style: none;
    padding: 0;
    margin: 0;
    max-height: 400px;
    overflow-y: auto;
    z-index: 1000;
    display: none;
}

.idx0-vorschlag-item {
    padding: 0.8em 1em;
    cursor: pointer;
    border-bottom: 1px solid #f0f0f0;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.idx0-vorschlag-item:last-child {
    border-bottom: none;
}

.idx0-vorschlag-item:hover {
    background: #f0f4ff;
}

/* Aktiver Vorschlag (Tastatur-Navigation) */
.idx0-vorschlag-aktiv {
    background: #e0e8ff !important;
    outline: 2px solid var(--color-primary-dark);
    outline-offset: -2px;
}

.idx0-vorschlag-anzahl {
    font-size: 0.85em;
    color: #666;
    background: #f0f0f0;
    padding: 0.2em 0.6em;
    border-radius: 4px;
    white-space: nowrap;
}

.idx0-vorschlag-keine {
    color: #999;
    font-style: italic;
}

/* === Objektlisten (Sektion 2) === */
.idx0-objektlisten-container {
    display: flex;
    flex-wrap: wrap;
    gap: 1.5em;
    margin-bottom: 2em;
}

.idx0-liste {
    flex: 1 1 300px;
    min-width: 280px;
    /* background: #f8f9fa; */
    border-radius: 8px;
    padding: 1em;
}

.idx0-liste h3 {
    margin: 0 0 1em 0;
    font-size: 1.1em;
    padding-left: 1em;
    font-weight: 600;
    background: var(--color-bg-h3-light);
    color: #333;
}

.idx0-liste-items {
    display: flex;
    flex-direction: column;
    gap: 0.5em;
}

.idx0-keine-objekte {
    color: #666;
    font-style: italic;
    padding: 1em;
    text-align: center;
}

/* === Statistik-Links (Sektion 3) === */
.idx0-statistik-container {
    display: flex;
    flex-wrap: wrap;
    gap: 2em;
    margin-bottom: 2em;
}

.idx0-statistik-liste {
    flex: 1 1 300px;
    min-width: 250px;
}

.idx0-statistik-liste h3 {
    margin: 0 0 0.8em 0;
    font-size: 1.1em;
    padding-left: 0;
    background: none;
    color: #333;
}

.idx0-statistik-items {
    list-style: none;
    padding: 0;
    margin: 0;
    column-count: 2;
    column-gap: 1.5em;
}

.idx0-statistik-items li {
    break-inside: avoid;
    padding: 0.3em 0;
}

.idx0-statistik-items a {
    color: #444;
    text-decoration: none;
    display: block;
}

.idx0-statistik-items a:hover {
    color: var(--link-hover-color, #3245A3);
    text-decoration: underline;
}

.idx0-anzahl {
    font-size: 0.85em;
    color: #888;
}

.idx0-keine-orte {
    color: #666;
    font-style: italic;
}

/* === Aside (Teuerste Häuser) === */
.idx0-aside-container {
    /* background: #f8f9fa; */
    border-radius: 8px;
    padding: 1em;
}

.idx0-aside-container h3 {
    margin: 0 0 1em 0;
    font-size: 1.1em;
    padding-left: 1em;
    background: var(--color-bg-h3-light);
    color: #333;
    font-weight: 600;
}

.idx0-aside-items {
    display: flex;
    flex-direction: column;
    gap: 0.5em;
    width: 100%;
    /* max-width: 35em; */
}

.idx0-aside-item {
    /* Container für .inc-Dateien in der Aside */
    margin-bottom: -41px;
}

.idx0-aside-item article {
    max-width: 167%;
}

/* === Objektlisten & Aside: Skalierung und Ausblendungen === */
/* Skalierung 80% - gemeinsame Basis */
.idx0-liste-items article,
.idx0-aside-items article {
    transform: scale(0.8);
    transform-origin: top left;
}

/* Main-Objektlisten: Abstände anpassen */
.idx0-liste-items article {
    width: 125%; /* Kompensation für scale(0.8): 100% / 0.8 = 125% */
    margin-bottom: -2em; /* Fester negativer Margin für konsistente Abstände */
}

/* Aside-Objektlisten: Feste Werte */
.idx0-aside-items article {
    /* width: 523px; */ /* Feste Breite statt prozentual (416px * 1.25) */
    margin-bottom: 1em; /* Fester negativer Margin */
    margin-top: 0px;
    width: 126%;
}

/* Herz- und Plus/Minus-Buttons ausblenden */
.idx0-liste-items .uf-symbole,
.idx0-aside-items .uf-symbole {
    display: none !important;
}

/* Rating-Sterne ausblenden */
.idx0-liste-items .Rating,
.idx0-aside-items .Rating {
    display: none !important;
}

/* Like/Dislike-Effekte deaktivieren in Objektlisten */
.idx0-liste-items [itemprop="offers"].uf-dislike,
.idx0-aside-items [itemprop="offers"].uf-dislike {
    filter: none;
    opacity: 1;
}

/* Objekttitel-Wrapper: transparent auf Index 0 */
.idx0-liste-items .Objekttitel-Wrapper,
.idx0-aside-items .Objekttitel-Wrapper {
    background-color: #cccccc00;
}

/* Objekttitel: Nicht überlaufen, sanft ausblenden */
.idx0-liste-items .Objekttitel,
.idx0-aside-items .Objekttitel {
    position: relative;
    overflow: hidden;
    white-space: nowrap;
    background-color: transparent;
}

/* Gradient-Fade am rechten Rand des Titels */
.idx0-liste-items .Objekttitel::after,
.idx0-aside-items .Objekttitel::after {
    content: '';
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    width: 30px;
    background: linear-gradient(to right, transparent, #f8f9fa);
    pointer-events: none;
}

/* Titel-Text nicht umbrechen, grauer Text */
.idx0-liste-items .Objekttitel h4,
.idx0-aside-items .Objekttitel h4 {
    white-space: nowrap;
    overflow: hidden;
    margin-right: 30px;
    color: var(--color-text);
}

/* Description kleiner mit max-height und Fade-Out */
.idx0-liste-items .Description,
.idx0-aside-items .Description {
    font-size: 90%;
    line-height: 95%;
    position: relative;
    /* max-height: 4.5em; */ /* Anpassbare maximale Höhe */
    overflow: hidden;
}

/* Sanfter Fade am unteren Rand der Description */
.idx0-liste-items .Description::after,
.idx0-aside-items .Description::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 1.5em; /* Höhe des Fade-Bereichs */
    background: linear-gradient(to bottom, transparent, #f8f9fa);
    pointer-events: none;
}

/* === MAIN Objektlisten - gemeinsame Formatierung === */
.idx0-liste-items article {
    /* Article braucht position: relative für absolute Positionierung von Preis/Ort */
    position: relative;
}
.idx0-liste-items .Objekttitel {
    /* Titel in Main */
}
.idx0-liste-items .Description {
    /* Beschreibung in Main */
}
.idx0-liste-items .Daten {
    /* Datenbereich in Main - kein position: relative, damit Preis/Ort relativ zum article positioniert werden */
    position: static;
    padding-bottom: 2em;
}
.idx0-liste-items .Preis {
    /* Preis in Main - absolut positioniert, unten rechts */
    position: absolute;
    right: 0;
    bottom: 0;
    z-index: 10;
    margin: 0;
}
.idx0-liste-items .Ort {
    /* Ort in Main - analog zu Aside anpassbar */
    position: absolute;
    bottom: 0;
    left: 0;
    z-index: 1;
    /* font-size: 0.85em; */
    color: #666;
    max-width: 60%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    background: #20345bad;
    padding-left: 0.5em;
    padding-right: 0.5em;
    color: white;
    transform: translateY(0.01em);
}
.idx0-liste-items figure {
    /* Bild in Main */
}

/* === Einzelne Objektlisten - separate Klassen === */
/* Liste 1: Neueste Immobilien */
.idx0-liste-neueste {
    /* Container für Neueste */
}
.idx0-liste-neueste .idx0-liste-items article {
    /* Artikel in Neueste */
}

/* Liste 2: Hervorgehobene Angebote */
.idx0-liste-hervorgehoben {
    /* Container für Hervorgehobene */
}
.idx0-liste-hervorgehoben .idx0-liste-items article {
    /* Artikel in Hervorgehobene */
}

/* Liste 3: Günstigste Kaufimmobilien */
.idx0-liste-guenstigste {
    /* Container für Günstigste Kauf */
}
.idx0-liste-guenstigste .idx0-liste-items article {
    /* Artikel in Günstigste Kauf */
}

/* Liste 4: Günstigste Mietimmobilien */
.idx0-liste-guenstigste-miete {
    /* Container für Günstigste Miete */
}
.idx0-liste-guenstigste-miete .idx0-liste-items article {
    /* Artikel in Günstigste Miete - gleiche Höhe wie Kaufimmobilien */
}

/* === ASIDE Objektlisten - individuelle Anpassungen === */
.idx0-aside-items article {
    /* Article braucht position: relative für absolute Positionierung von Preis/Ort */
    position: relative;
}
.idx0-aside-items .Objekttitel {
    /* Titel in Aside */
}
.idx0-aside-items .Description {
    /* Beschreibung in Aside */
}
.idx0-aside-items .Daten {
    /* Datenbereich in Aside - kein position: relative, damit Preis/Ort relativ zum article positioniert werden */
    position: static;
    padding-bottom: 2em;
}
.idx0-aside-items .Preis {
    /* Preis in Aside - absolut positioniert, unten rechts */
    position: absolute;
    right: 0;
    bottom: 0;
    z-index: 10;
    margin: 0;
    font-weight: 600;
}
.idx0-aside-items .Ort {
    /* Ort unter dem Bild, links neben Preis */
    position: absolute;
    bottom: 0;
    left: 0;
    z-index: 1;
    /* font-size: 0.85em; */
    color: #666;
    max-width: 60%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    background: #20345bad;
    padding-left: 0.5em;
    padding-right: 0.5em;
    color: white;
    /* transform: translateY(1.9em); */
}
.idx0-aside-items figure {
    /* Bild in Aside */
    position: relative;
}

/* === Ebene 0: Sektionen === */
.idx0-suche { /* Ebene 0: Such-Sektion */ }
.idx0-listen { /* Ebene 0: Listen-Wrapper */ }
.idx0-statistik { /* Ebene 0: Statistik-Sektion */ }
.idx0-statistik-kaufen { /* Ebene 0: Statistik Kaufen */ }
.idx0-statistik-mieten { /* Ebene 0: Statistik Mieten */ }
.idx0-platzhalter-container { /* Ebene 0: Platzhalter-Container */ }

/* === Platzhalter (Sektion 4) === */
.idx0-mehr {
    /* Reserviert für zukünftige Inhalte */
}

/* === Favoriten-Aside (Ebene 0) === */
.aside-favoriten-container {
    margin-bottom: 1.5em;
    padding-bottom: 1em;
    border-bottom: 1px solid #e0e0e0;
}

.aside-favoriten-container h3 {
    margin: 0 0 1em 0;
    font-size: 1.1em;
    padding-left: 1em;
    color: #c44;
    font-weight: 600;
}

.aside-favoriten-items {
    display: flex;
    flex-direction: column;
    gap: 0.5em;
}

.aside-favoriten-items article {
    transform: scale(0.8);
    transform-origin: top left;
    width: 523px;
    margin-bottom: 1em;
    margin-top: 0px;
}

.aside-favoriten-mehr {
    text-align: right;
    margin-top: 0.5em;
    margin-bottom: 1em;
    padding-right: 2em;
}

.aside-favoriten-mehr-btn {
    /* background: linear-gradient(135deg, #c44 0%, #a33 100%); */
    color: var(--color-text);
    border: none;
    padding: 0.2em 0.5em;
    border-radius: 3px;
    cursor: pointer;
    /* font-size: 0.7em; */
    font-weight: 600;
    transition: transform 0.2s, box-shadow 0.2s;
    width: auto;
    display: inline-block;
}

.aside-favoriten-mehr-btn:hover {
    transform: scale(1.02);
    box-shadow: 0 2px 8px rgba(204, 68, 68, 0.3);
}

/* Buttons-Container (mehr + Papierkorb nebeneinander) */
.aside-favoriten-buttons {
    display: inline-flex;
    gap: 0.3em;
    align-items: center;
    margin-top: 0.3em;
    margin-left: 1em;
}

.aside-favoriten-trash-btn {
    background: #f5f5f5;
    border: 1px solid #ddd;
    padding: 0.1em 0.2em;
    border-radius: 3px;
    cursor: pointer;
    /* font-size: 0.7em; */
    transition: background 0.2s, transform 0.2s;
    line-height: 1;
    width: auto;
    min-width: 0;
}

.aside-favoriten-trash-btn:hover {
    background: var(--color-favorit-bg-hover);
    transform: scale(1.05);
}

/* === Favoriten-Seite (zwei Spalten) === */
.favoriten-seite {
    padding: 1em;
    max-width: 100%;
}

.favoriten-seite-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 1em;
    margin-bottom: 1.5em;
    padding-bottom: 1em;
    border-bottom: 2px solid var(--color-favorit);
}

.favoriten-seite h1 {
    color: var(--color-favorit);
    margin: 0;
    font-size: 1.6em;
}

.favoriten-seite h1 .anzahl {
    font-weight: 400;
    font-size: 0.7em;
    color: #888;
}

.favoriten-seite-actions {
    display: flex;
    gap: 0.8em;
}

.favoriten-zurueck-btn {
    background: #f0f0f0;
    border: 1px solid #ccc;
    padding: 0.5em 1em;
    border-radius: 4px;
    cursor: pointer;
    font-size: 0.95em;
    transition: background 0.2s;
}

.favoriten-zurueck-btn:hover {
    background: #e8e8e8;
}

.favoriten-trash-btn {
    background: var(--color-favorit-bg);
    border: 1px solid #dcc;
    padding: 0.5em 1em;
    border-radius: 4px;
    cursor: pointer;
    font-size: 0.95em;
    color: #a44;
    transition: background 0.2s;
}

.favoriten-trash-btn:hover {
    background: var(--color-favorit-bg-hover);
}

.favoriten-seite-spalten {
    display: flex;
    gap: 2em;
}

.favoriten-spalte {
    flex: 1;
    min-width: 0;
}

.favoriten-spalte h2 {
    font-size: 1.2em;
    margin: 0 0 1em 0;
    padding-bottom: 0.5em;
    border-bottom: 1px solid #ddd;
}

.favoriten-spalte-kaufen h2 {
    color: #2a7;
}

.favoriten-spalte-mieten h2 {
    color: #47a;
}

.favoriten-spalte h2 .spalte-anzahl {
    font-weight: 400;
    font-size: 0.8em;
    color: #888;
}

.favoriten-spalte-liste {
    display: flex;
    flex-direction: column;
    gap: 1em;
}

.favorit-seite-item {
    border-bottom: 1px solid #eee;
    padding-bottom: 1em;
    transition: opacity 0.3s, transform 0.3s;
}

.favorit-seite-item:last-child {
    border-bottom: none;
}

/* Mobile: Spalten untereinander */
@media (max-width: 800px) {
    .favoriten-seite-spalten {
        flex-direction: column;
    }
    
    .favoriten-seite-header {
        flex-direction: column;
        align-items: flex-start;
    }
}

/* === Favoriten-Vollansicht (Legacy, ersetzt Main+Aside) === */
.favoriten-vollansicht {
    padding: 1em;
}

.favoriten-vollansicht h1 {
    color: var(--color-favorit);
    margin-bottom: 0.3em;
}

.favoriten-vollansicht h1 .anzahl {
    font-weight: 400;
    font-size: 0.7em;
    color: #666;
}

.favoriten-vollansicht .favoriten-info {
    color: #666;
    margin-bottom: 1em;
}

.favoriten-zurueck-btn {
    background: #f0f0f0;
    border: 1px solid #ccc;
    padding: 0.5em 1em;
    border-radius: 4px;
    cursor: pointer;
    margin-bottom: 1.5em;
    font-size: 0.95em;
}

.favoriten-zurueck-btn:hover {
    background: #e8e8e8;
}

.favoriten-liste {
    display: flex;
    flex-direction: column;
    gap: 1em;
}

.favorit-item {
    border-bottom: 1px solid #eee;
    padding-bottom: 1em;
}

.favorit-nicht-gefunden {
    background: #fff8f8;
    border: 1px dashed #dcc;
    border-radius: 4px;
    padding: 1em;
}

.favorit-fehler p {
    color: #966;
    margin: 0 0 0.3em 0;
}

.favorit-fehler small {
    color: #999;
    font-size: 0.85em;
}

/* === Mobile Anpassungen Index0 === */

/* Tablet: 950px - 811px */
@media (max-width: 949px) {
    .index0-layout {
        flex-direction: column;
    }
    
    /* Aside bleibt sichtbar auf Index0, aber volle Breite */
    .index0-layout .idx0-aside {
        flex: 1 1 auto;
        width: 100%;
        order: 0; /* Aside bleibt nach Main */
    }
    
    .idx0-statistik-items {
        column-count: 1;
    }
    
    /* Suchfeld: Volle Breite auf Mobile */
    .idx0-suchfeld-container {
        padding: 1em;
        margin: 0 -0.5em 1.5em -0.5em;
        border-radius: 0;
    }
    
    .idx0-suchfeld-wrapper {
        /* max-width: 100%; */
    }
    
    /* Objektlisten auf Mobile: Einzeln untereinander */
    .idx0-objektlisten-container {
        flex-direction: column;
    }
    
    .idx0-liste {
        min-width: 100%;
        overflow: hidden; /* Verhindert horizontales Scrollen */
    }
}

/* Schmales Tablet / Großes Handy: 810px - 701px */
@media (max-width: 810px) {
    /* Overflow-Problem beheben */
    .idx0-liste-items article,
    .idx0-aside-items article {
        width: 100%;
        max-width: calc(100vw - 2em);
    }
    
    /* Suchfeld anpassen */
    .idx0-suchfeld-input {
        font-size: 1em;
        padding-right: 3.5em; /* Platz für Button */
    }
    
    .idx0-suchfeld-container h2 {
        font-size: 1.2em;
    }
    
    /* Aside-Items responsive */
    .idx0-aside-items {
        width: 100%;
        max-width: 100%;
    }
}

/* Handy: <= 700px - Skalierung entfernen */
@media (max-width: 700px) {
    /* Skalierung entfernen für bessere Lesbarkeit */
    .idx0-liste-items article,
    .idx0-aside-items article {
        transform: none;
        width: 100%;
        max-width: calc(100vw - 2em);
        margin-bottom: 1em;
    }
    
    /* Artikel-Bilder anpassen */
    .idx0-liste-items figure,
    .idx0-aside-items figure {
        width: 120px;
        height: 90px;
    }
    
    .idx0-liste-items figure img,
    .idx0-aside-items figure img {
        width: 120px;
        height: 90px;
        object-fit: cover;
    }
    
    /* Titel und Preis anpassen */
    .idx0-liste-items .Objekttitel h4,
    .idx0-aside-items .Objekttitel h4 {
        font-size: 0.95em;
    }
    
    .idx0-liste-items .Preis,
    .idx0-aside-items .Preis {
        font-size: 1em;
    }
    
    /* Suchfeld: Kompakter */
    .idx0-suchfeld-container {
        padding: 0.8em;
    }
    
    .idx0-suchfeld-container h2 {
        font-size: 1.1em;
        margin-bottom: 0.5em;
    }
    
    .idx0-suchfeld-hint {
        font-size: 0.8em;
    }
    
    /* Header: Logo kleiner */
    .site-title a {
        font-size: 2.5em;
    }
    
    .claim {
        font-size: 0.85em;
    }
    
    .header-share {
        margin-left: 0.5em;
    }
}

/* ================================================
   Ebene 2: Querverweislisten (Andere Vermarktungsarten)
   ================================================ */

/* Main: Andere Vermarktungsarten Container */
.main2-andere-vermarktung {
    margin-top: 2em;
    padding: 1.5em;
    background-color: #f8f9fa;
    border-radius: 8px;
}

.main2-andere-vermarktung h2 {
    margin-bottom: 1em;
    font-size: 1.3em;
    color: #333;
}

/* Grid-Layout für nebeneinander */
.vermarktung-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 2em;
}

.vermarktung-grid .vermarktungsart-block {
    flex: 1 1 45%;
    min-width: 250px;
}

/* Aside: Andere Vermarktungsarten */
.tpl-aside2-andere-vermarktung {
    margin-top: 1em;
}

.tpl-aside2-andere-vermarktung .vermarktungsart-block {
    margin-bottom: 2em;
}

.tpl-aside2-andere-vermarktung .vermarktungsart-block h3 {
    font-size: 1em;
    margin-bottom: 0.5em;
    background-color: #00000014;
    padding: 0.4em 0.6em;
    border-radius: 4px;
}

.tpl-aside2-andere-vermarktung .vermarktungsart-block h3 a {
    display: block;
    text-decoration: none;
    color: inherit;
}

.tpl-aside2-andere-vermarktung .vermarktungsart-block h3 a:hover {
    text-decoration: underline;
}

.tpl-aside2-andere-vermarktung .objektart-liste {
    list-style: none;
    padding-left: 0.8em;
    margin: 0;
}

.tpl-aside2-andere-vermarktung .objektart-liste li {
    margin-bottom: 0.3em;
}

.tpl-aside2-andere-vermarktung .objektart-liste li a {
    display: block;
    padding: 0.2em 0.3em;
    text-decoration: none;
    color: #3245A3;
    border-radius: 3px;
    transition: background-color 0.15s ease;
}

.tpl-aside2-andere-vermarktung .objektart-liste li a:hover {
    background-color: #00000010;
    text-decoration: underline;
}

/* Mobile: Vertikal statt nebeneinander */
@media (max-width: 768px) {
    .vermarktung-grid {
        flex-direction: column;
    }
    
    .vermarktung-grid .vermarktungsart-block {
        flex: 1 1 100%;
    }
    
    .main2-andere-vermarktung {
        padding: 1em;
    }
}

/* ================================================
   UNTERSCHEIDUNG: Statische vs. Dynamische Objektlisten
   Statisch = .Index_ObjektlisteOrt (kein km-Anzeige)
   Dynamisch = .dynamische-objektliste .dyn-loaded (mit km-Anzeige)
   ================================================ */

/* --- STATISCHE OBJEKTLISTE (ohne Entfernung) --- */
/* Preis-Position für statische Listen: im normalen Textfluss */
.Index_ObjektlisteOrt article .Preis,
.Index_ObjektlisteNachbarorte article .Preis {
    float: right;
}

/* Ort bei statischen Listen: im normalen Textfluss */
.Index_ObjektlisteOrt article .Ort,
.Index_ObjektlisteNachbarorte article .Ort {
    clear: both;
}

/* --- DYNAMISCHE OBJEKTLISTE (mit Entfernung) --- */
/* Preis-Position für dynamische Listen: im normalen Textfluss */
.dynamische-objektliste .dyn-loaded article .Preis {
    float: right;
}

/* Ort bei dynamischen Listen: inline mit Entfernung */
.dynamische-objektliste .dyn-loaded article .Ort {
    display: inline;
}

/* Entfernungs-Ort-Wrapper: Flex für saubere Ausrichtung */
.dynamische-objektliste .entfernung-ort-wrapper {
    display: flex;
    flex-wrap: nowrap;
    align-items: baseline;
    gap: 0.3em;
}

/* Entfernungs-Anzeige bei dynamischen Listen */
.dynamische-objektliste .entfernung-anzeige {
    font-weight: 600;
    color: var(--color-primary-dark);
    white-space: nowrap;
}

/* --- MOBILE ANPASSUNGEN --- */
@media (max-width: 700px) {
    /* Statische Listen: Preis kompakter */
    .Index_ObjektlisteOrt article .Preis,
    .Index_ObjektlisteNachbarorte article .Preis {
        font-size: 2em;
        /* padding: 0.3em 0.5em; */
    }
    
    /* Dynamische Listen: Preis gleiche Anpassung */
    .dynamische-objektliste .dyn-loaded article .Preis {
        font-size: 1em;
        padding: 0.3em 0.5em;
    }
}

/* ==========================================================================
   GELÖSCHTE EXPOSEES - Platzhalter für entfernte Angebote
   Version 1.0 - 06.12.2025
   ========================================================================== */

/* Container für gelöschte Exposees */
article.geloescht {
    background: linear-gradient(135deg, #f8d7da 0%, #f5c6cb 100%);
    border: 2px solid #dc3545;
    border-radius: 8px;
    opacity: 0.85;
    position: relative;
}

article.geloescht a {
    color: #721c24;
    text-decoration: none;
    cursor: default;
    pointer-events: none;
}

/* Titel für gelöschte Exposees */
.geloescht-titel h4 {
    color: #721c24;
    font-style: italic;
}

/* Hinweis-Box für gelöschte Exposees */
.geloescht-hinweis {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 1.5em;
    min-height: 120px;
    background: rgba(220, 53, 69, 0.1);
    border-radius: 4px;
    margin: 0.5em;
}

.geloescht-icon {
    font-size: 3em;
    color: #dc3545;
    font-weight: bold;
    line-height: 1;
    margin-bottom: 0.3em;
}

.geloescht-text {
    font-size: 0.9em;
    color: #721c24;
    text-align: center;
    font-weight: 500;
}

/* Exposee-Seite: Gelöscht-Banner */
.exposee-geloescht-banner {
    background: linear-gradient(135deg, #dc3545 0%, #c82333 100%);
    color: white;
    padding: 2em;
    text-align: center;
    border-radius: 8px;
    margin: 1em 0;
}

.exposee-geloescht-banner h2 {
    margin: 0 0 0.5em 0;
    font-size: 1.5em;
}

.exposee-geloescht-banner p {
    margin: 0;
    opacity: 0.9;
}

.fresh-liste-item{
    margin-bottom: -2em;
}
.fresh-liste-items { /* FreshList: Container für Items */ }

/* =============================================
   404-Fehlerseiten: Fehlende Sektionen
   ============================================= */
.error-404-suche { /* 404: Suchfeld-Sektion */ }
.error-404-text { /* 404: Text-Sektion (gelöschte Exposees) */ }
.error-404-alternativen { /* 404: Alternativen-Sektion */ }
.alternativen-liste { /* 404: Alternativ-Vorschläge Liste */ }
.alternativ-item { /* 404: Einzelner Alternativ-Vorschlag */ }
.cta-button { /* Call-to-Action Button (404-Seite) */ }

/* ============================================= */
/* Anbieter- und Maklerseiten                    */
/* (ehemals anbieter.css, integriert 06.02.2026) */
/* ============================================= */

/* Anbieter-/Maklerseiten nutzen .index-layout (wie Index-Seiten) */
/* Die alte .anbieter-layout und primitive .filter-panel wurden entfernt (v2.62) */
/* Filterbox wird über .tpl-filter (LeanList-kompatibel) gesteuert */

/* Anbieter-Header (Anbieterseite) */
.anbieter-header {
    padding: 1.5em;
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    border-radius: 12px;
    margin-bottom: 2em;
}

.anbieter-header > h1 {
    margin: 0 0 1em 0;
    font-size: 1.6em;
    color: #222;
    background: #9bc3f955;
}

.anbieter-header-body {
    display: flex;
    gap: 1.5em;
}

.anbieter-logo-container {
    flex: 0 0 192px;
}

.anbieter-logo {
    width: 192px;
    height: 144px;
    object-fit: contain;
    border-radius: 8px;
    background: white;
    padding: 8px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.anbieter-logo-placeholder {
    width: 192px;
    height: 144px;
    border-radius: 8px;
    overflow: hidden;
}

.anbieter-logo-placeholder .placeholder-svg {
    width: 100%;
    height: 100%;
}

.anbieter-info {
    flex: 1;
    min-width: 0;
}

/* Adresse links + Rating rechts in einer Zeile */
.anbieter-adresse-rating-row {
    display: flex;
    justify-content: space-between;
    /* align-items: unset; */
    margin-bottom: 0.5em;
}

.anbieter-adresse-rating-row .anbieter-adresse {
    color: #555;
    font-size: 0.95em;
    margin-bottom: 0;
}

.anbieter-adresse-rating-row .anbieter-rating {
    color: #f5a623;
    font-size: 1.2em;
    flex-shrink: 0;
    margin-left: 1em;
}

.anbieter-telefon,
.anbieter-telefon-zentrale,
.anbieter-email-zentrale,
.anbieter-website {
    display: flex;
    align-items: center;
    gap: 0.5em;
    margin-bottom: 0.4em;
    color: #555;
    font-size: 0.95em;
}

.anbieter-telefon svg,
.anbieter-telefon-zentrale svg,
.anbieter-email-zentrale svg,
.anbieter-website svg {
    color: #888;
    flex-shrink: 0;
}

.anbieter-telefon a,
.anbieter-telefon-zentrale a,
.anbieter-website a {
    color: #0066cc;
    text-decoration: none;
}

.anbieter-telefon a:hover,
.anbieter-telefon-zentrale a:hover,
.anbieter-website a:hover {
    text-decoration: underline;
}

.anbieter-stats {
    margin-top: 1em;
}

.stat-line {
    color: #666;
    font-size: 0.95em;
    /* margin-bottom: 0.2em; */
}

.stat-line strong {
    color: #0066cc;
    font-size: 1.1em;
}

.stat-filter-link {
    color: inherit;
    text-decoration: none;
}

.stat-filter-link:hover {
    text-decoration: underline;
    color: #0066cc;
}

.stat-filter-link strong {
    color: #0066cc;
}

.kontakt-label {
    color: #999;
    font-size: 0.85em;
}

.stat-item {
    color: #666;
    font-size: 0.95em;
}

.stat-item strong {
    color: #0066cc;
    font-size: 1.1em;
}

/* Makler-Sektion (Anbieterseite) */
.makler-section {
    margin-bottom: 2em;
}

.makler-section h2 {
    font-size: 1.3em;
    color: #333;
    margin-bottom: 1em;
    padding-bottom: 0.5em;
    border-bottom: 2px solid #e0e0e0;
}

.makler-liste {
    display: flex;
    flex-direction: column;
    gap: 1em;
}

/* Makler-Card */
.makler-card {
    background: white;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    overflow: hidden;
    transition: box-shadow 0.2s, transform 0.2s;
}

.makler-card:hover {
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
    transform: translateY(-2px);
}

.makler-link {
    display: flex;
    gap: 1em;
    padding: 1em;
    text-decoration: none;
    color: inherit;
}

.makler-foto-container {
    flex: 0 0 192px;
}

.makler-foto {
    width: 192px;
    height: 144px;
    object-fit: cover;
    border-radius: 8px;
}

.makler-foto-placeholder {
    width: 192px;
    height: 144px;
    border-radius: 8px;
    overflow: hidden;
}

.makler-foto-placeholder svg {
    width: 100%;
    height: 100%;
}

.makler-info {
    flex: 1;
    min-width: 0;
}

.makler-name {
    margin: 0 0 0.3em 0;
    font-size: 1.05em;
    color: #222;
    background: #9bc3f955;
    padding: 0.2em 0.5em;
    margin-left: -0.5em;
    border-radius: 4px;
}

.makler-adresse,
.makler-telefon,
.makler-email {
    display: flex;
    align-items: center;
    gap: 0.4em;
    font-size: 0.85em;
    color: #666;
    margin-bottom: 0.2em;
}

.makler-adresse svg,
.makler-telefon svg,
.makler-email svg {
    color: #999;
    flex-shrink: 0;
}

.makler-stats {
    margin-top: 0.5em;
    display: flex;
    gap: 0.5em;
}

.stat-badge {
    background: #f0f0f0;
    padding: 0.2em 0.6em;
    border-radius: 12px;
    font-size: 0.8em;
    color: #555;
}

/* Objekte-Sektion (Anbieterseite) */
.objekte-section {
    margin-bottom: 2em;
}

.objekte-section h2 {
    font-size: 1.3em;
    color: #333;
    margin-bottom: 1em;
    padding-bottom: 0.5em;
    border-bottom: 2px solid #e0e0e0;
}

.objekte-liste {
    display: flex;
    flex-direction: column;
    gap: 1em;
}

/* Loading Indicator */
.loading-indicator {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1em;
    padding: 2em;
    color: #666;
}

.spinner {
    width: 24px;
    height: 24px;
    border: 3px solid #e0e0e0;
    border-top-color: #0066cc;
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

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

/* Share Button (Anbieterseite) */
.share-btn {
    background: #f0f0f0;
    border: none;
    padding: 0.5em;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

.share-btn:hover {
    background: #e0e0e0;
}

/* ============================================= */
/* Index-Seiten: Anbieter-Karten (idx-anbieter-) */
/* ============================================= */

/* Gesamte Anbieter-Karte in der Index-Seite */
.anbieter-inc {
}

/* Header-Bereich der Karte (umschließt Logo + Info) */
/* v1.04: Kein umschließender <a>-Tag mehr, stattdessen data-href + JS-Click-Handler */
.idx-anbieter-header {
    display: flex;
    gap: 1em;
    padding: 0.8em;
    border-radius: 8px;
    transition: background 0.2s;
}

.idx-anbieter-header[data-href] {
    cursor: pointer;
}

.idx-anbieter-header[data-href]:hover {
    background: #f0f4f8;
}

/* Firmenname-Link: erbt Farbe vom Eltern-Element, kein Unterstrich */
.idx-anbieter-firma a {
    color: inherit;
    text-decoration: none;
}

.idx-anbieter-firma a:hover {
    text-decoration: underline;
}

/* Logo-Container */
.idx-anbieter-logo {
}

.idx-anbieter-logo img {
    border-radius: 8px;
    background: white;
    object-fit: contain;
}

.idx-anbieter-logo .placeholder-svg {
    border-radius: 8px;
}

/* Info-Bereich rechts vom Logo */
.idx-anbieter-info {
    flex: 1;
    min-width: 0;
}

/* Firmenname */
.idx-anbieter-firma {
    font-weight: 600;
    font-size: 1.05em;
    color: var(--color-primary);
    background: #9bc3f955;
    padding: 0.15em 0.5em;
    border-radius: 4px;
    margin-bottom: 0.3em;
}

/* Statistik-Zeile: Objektanzahl links, Rating-Sterne rechts */
.idx-anbieter-stats-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5em;
    margin-bottom: 0.2em;
}

/* Objektanzahl-Badge */
.idx-anbieter-objekt-anzahl {
    font-size: 0.9em;
    color: #555;
}

/* Rating-Sterne (rechtsbündig durch Flexbox) */
.idx-anbieter-rating {
    flex-shrink: 0;
}

/* Adress-Zeile in Anbieter-Karte: einzeilig, overflow hidden, kein Umbruch */
.idx-anbieter-adresse {
    font-size: 0.82em;
    color: #666;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Orts-Verteilung in Anbieter-Karte: max 3 Zeilen, overflow hidden */
/* v1.04: Jetzt innerhalb der Info-Sektion (unterhalb Adresse), eigene Links */
.idx-anbieter-orte {
    font-size: 0.78em;
    color: #555;
    line-height: 1.4;
    max-height: 4.2em; /* 3 Zeilen × 1.4 line-height = 4.2em */
    overflow: hidden;
    margin-top: 0.2em;
}

.idx-anbieter-orte a {
    color: #1a73a7;
    text-decoration: none;
    white-space: nowrap;
}

.idx-anbieter-orte a:hover {
    text-decoration: underline;
    color: #0d5a8a;
}

/* Makler-Detailseite (Maklerseite.template.html) */
.makler-header {
    padding: 1.5em;
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    border-radius: 12px;
    margin-bottom: 2em;
}

.makler-header > h1 {
    margin: 0 0 1em 0;
    font-size: 1.5em;
    color: #222;
    background: #9bc3f955;
}

.makler-header-body {
    display: flex;
    gap: 1.5em;
}

.makler-foto-container-page {
    flex: 0 0 192px;
}

.makler-foto-page {
    width: 192px;
    height: 144px;
    object-fit: cover;
    border-radius: 8px;
    background: white;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.makler-foto-placeholder-page {
    width: 192px;
    height: 144px;
    border-radius: 8px;
    overflow: hidden;
}

.makler-foto-placeholder-page .placeholder-svg {
    width: 100%;
    height: 100%;
}

.makler-info-page {
    flex: 1;
    min-width: 0;
}

.makler-info-page h1 {
    margin: 0 0 0.3em 0;
    font-size: 1.5em;
    color: #222;
}

.makler-firma-link {
    margin-bottom: 0.8em;
    color: #555;
}

.makler-firma-link a {
    color: #0066cc;
    text-decoration: none;
}

.makler-firma-link a:hover {
    text-decoration: underline;
}

.makler-adresse-page,
.makler-telefon-page,
.makler-email-page {
    display: flex;
    align-items: center;
    gap: 0.5em;
    margin-bottom: 0.4em;
    color: #555;
    font-size: 0.95em;
}

.makler-adresse-page svg,
.makler-telefon-page svg,
.makler-email-page svg {
    color: #888;
    flex-shrink: 0;
}

.makler-telefon-page a {
    color: #0066cc;
    text-decoration: none;
}

.makler-telefon-page a:hover {
    text-decoration: underline;
}

.makler-stats-page {
    margin-top: 1em;
    display: flex;
    gap: 1.5em;
}

/* Responsive: Anbieter- und Maklerseiten */
@media (max-width: 950px) {
    .anbieter-header-body {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }
    
    .anbieter-header > h1 {
        text-align: center;
    }
    
    .anbieter-adresse-rating-row {
        flex-direction: column;
        gap: 0.3em;
    }
    
    .anbieter-adresse-rating-row .anbieter-rating {
        margin-left: 0;
    }
    
    .anbieter-adresse,
    .anbieter-telefon,
    .anbieter-telefon-zentrale,
    .anbieter-email-zentrale,
    .anbieter-website {
        justify-content: center;
    }
    
    .anbieter-stats {
        justify-content: center;
    }
    
    .makler-header-body {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }
    
    .makler-header > h1 {
        text-align: center;
    }
    
    .makler-adresse-page,
    .makler-telefon-page,
    .makler-email-page {
        justify-content: center;
    }
    
    .makler-stats-page {
        justify-content: center;
    }
}

@media (max-width: 600px) {
    .makler-link {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }
    
    .makler-info {
        text-align: center;
    }
    
    .makler-adresse,
    .makler-telefon,
    .makler-email {
        justify-content: center;
    }
    
    .makler-stats {
        justify-content: center;
    }
}

/* ==========================================================================
   ORTS-ANBIETER-SEITE (makler.html) + "alle anzeigen"-Link
   Version 1.00 - 06.02.2026
   ========================================================================== */

/* Header-Zeile: h3 + "alle anzeigen" nebeneinander */
.makler-header-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1em;
    flex-wrap: wrap;
    background: #00000014;
}

.makler-header-row h3 {
    margin: 0;
}

.makler-alle-link {
    font-size: 0.9em;
    color: #2563eb;
    text-decoration: none;
    white-space: nowrap;
}

.makler-alle-link:hover {
    text-decoration: underline;
}

/* Orts-Anbieter-Seite: Header */
.orts-anbieter-header {
    margin-bottom: 1.5em;
}

.orts-anbieter-header h1 {
    font-size: 1.5em;
    margin: 0 0 0.3em 0;
    color: #1a1a2e;
}

.orts-anbieter-header h2 {
    font-size: 1em;
    margin: 0 0 0.5em 0;
    color: #555;
    font-weight: normal;
}

.orts-anbieter-beschreibung {
    font-size: 0.9em;
    color: #666;
    line-height: 1.5;
    margin: 0;
}

/* Orts-Anbieter-Seite: Keine Anbieter */
.keine-anbieter {
    padding: 2em;
    text-align: center;
    color: #888;
    font-style: italic;
}

/* ============================================ */
/* Such-Anbieter-Seite (/Anbieter/index.html)   */
/* ============================================ */

/* Layout: Main + Aside nebeneinander */
.such-anbieter-layout {
    display: flex;
    max-width: 70em;
    gap: 2em;
    margin: 0 auto;
    padding: 0 1em;
}

.such-anbieter-main {
    flex: 1 1 auto;
    min-width: 0;
}

.such-anbieter-aside {
    flex: 0 0 18em;
    width: 18em;
}

/* Suchbereich: Prominentes Suchfeld */
.such-anbieter-suche {
    text-align: center;
    padding: 2.5em 1em 2em;
    background: linear-gradient(135deg, #f0f4f8 0%, #e8eef5 100%);
    border-radius: 12px;
    margin-bottom: 2em;
}

.such-anbieter-suche h1 {
    font-size: 1.8em;
    margin: 0 0 0.5em 0;
    color: #1a1a2e;
}

.such-anbieter-intro {
    font-size: 1.05em;
    color: #555;
    margin: 0 0 1.5em 0;
    line-height: 1.5;
}

.such-anbieter-suchfeld-wrapper {
    max-width: 32em;
    margin: 0 auto;
}

.such-anbieter-suchfeld {
    position: relative;
}

.such-anbieter-input {
    width: 100%;
    padding: 0.9em 1.2em;
    font-size: 1.1em;
    border: 2px solid #cbd5e1;
    border-radius: 8px;
    outline: none;
    transition: border-color 0.2s, box-shadow 0.2s;
    box-sizing: border-box;
}

.such-anbieter-input:focus {
    border-color: #2563eb;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15);
}

.such-anbieter-stats {
    font-size: 0.9em;
    color: #888;
    margin: 1.2em 0 0 0;
}

/* Zusatz-Inhalt (erweiterbar) */
.such-anbieter-zusatz:empty {
    display: none;
}

.such-anbieter-zusatz {
    margin-bottom: 2em;
}

/* Top-Anbieter-Sektion */
.such-anbieter-top {
    margin-bottom: 2em;
}

.such-anbieter-top h2 {
    font-size: 1.3em;
    margin: 0 0 0.3em 0;
    color: #1a1a2e;
}

.such-anbieter-top-beschreibung {
    font-size: 0.9em;
    color: #666;
    margin: 0 0 1em 0;
}

.such-anbieter-top-liste {
    display: flex;
    flex-direction: column;
    gap: 0.5em;
}

/* Aside: Info-Boxen */
.such-anbieter-info-box,
.such-anbieter-vorteile-box {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    padding: 1.2em;
    margin-bottom: 1em;
}

.such-anbieter-info-box h3,
.such-anbieter-vorteile-box h3 {
    font-size: 1em;
    margin: 0 0 0.6em 0;
    color: #1a1a2e;
}

.such-anbieter-info-box p {
    font-size: 0.9em;
    color: #555;
    line-height: 1.5;
    margin: 0 0 0.6em 0;
}

.such-anbieter-info-box p:last-child {
    margin-bottom: 0;
}

.such-anbieter-vorteile-liste {
    list-style: none;
    padding: 0;
    margin: 0;
}

.such-anbieter-vorteile-liste li {
    font-size: 0.9em;
    color: #555;
    padding: 0.4em 0 0.4em 1.5em;
    position: relative;
    line-height: 1.4;
}

.such-anbieter-vorteile-liste li::before {
    content: "\2713";
    position: absolute;
    left: 0;
    color: #22c55e;
    font-weight: bold;
}

/* Aktiver Menüpunkt */
.menu a.active {
    font-weight: bold;
    color: #2563eb;
}

/* === Blog-Seiten === */
.blog-post { /* Blog-Post Hauptcontainer */ }
.blog-index { /* Blog-Index Hauptcontainer */ }
.blog-breadcrumb { /* Breadcrumb */ margin-bottom: 1.5em; font-size: 0.9em; color: #666; }
.blog-breadcrumb a { /* Breadcrumb-Links */ color: #2a7ae2; text-decoration: none; }
.blog-breadcrumb a:hover { /* Breadcrumb-Links Hover */ text-decoration: underline; }
.blog-article { /* Blog-Artikel */ }
.blog-header { /* Blog-Header */ margin-bottom: 2em; }
.blog-header h1 { /* Blog-Titel */ font-size: 1.8em; line-height: 1.3; margin-bottom: 0.3em; }
.blog-meta { /* Blog-Meta (Datum, Autor) */ font-size: 0.9em; color: #888; }
.blog-meta time { /* Blog-Datum */ }
.blog-meta .blog-author { /* Blog-Autor */ margin-left: 1em; }
.blog-content { /* Blog-Inhalt */ line-height: 1.7; }
.blog-content h2 { /* Blog-Zwischenüberschriften */ font-size: 1.4em; margin: 1.8em 0 0.6em 0; padding-bottom: 0.3em; border-bottom: 1px solid #eee; }
.blog-content p { /* Blog-Absätze */ margin-bottom: 1em; }
.blog-content ol, .blog-content ul { /* Blog-Listen */ margin: 0.8em 0 1em 1.5em; }
.blog-content li { /* Blog-Listenelemente */ margin-bottom: 0.4em; }
.blog-content code { /* Blog-Inline-Code */ background: #f4f4f4; padding: 0.15em 0.4em; border-radius: 3px; font-size: 0.9em; }
.blog-lead { /* Blog-Einleitung */ font-size: 1.1em; color: #444; line-height: 1.6; margin-bottom: 1.5em; }
.blog-toc { /* Blog-Inhaltsverzeichnis */ background: #f8f9fa; padding: 1.2em 1.5em; border-radius: 6px; margin-bottom: 2em; }
.blog-toc h2 { /* Blog-TOC Überschrift */ font-size: 1.1em; margin: 0 0 0.6em 0; border: none; padding: 0; }
.blog-toc ul { /* Blog-TOC Liste */ margin: 0; padding-left: 1.2em; }
.blog-toc li { /* Blog-TOC Listenelement */ margin-bottom: 0.3em; }
.blog-toc a { /* Blog-TOC Links */ color: #2a7ae2; text-decoration: none; }
.blog-toc a:hover { /* Blog-TOC Links Hover */ text-decoration: underline; }
.blog-footer { /* Blog-Post Footer */ margin-top: 3em; padding-top: 1.5em; border-top: 1px solid #eee; }
.blog-disclaimer { /* Blog-Disclaimer */ font-size: 0.85em; color: #888; font-style: italic; margin-bottom: 1em; }
.blog-back-link { /* Zurück-Link */ color: #2a7ae2; text-decoration: none; font-weight: 600; }
.blog-back-link:hover { /* Zurück-Link Hover */ text-decoration: underline; }
.blog-intro { /* Blog-Index Einleitung */ font-size: 1.1em; color: #555; margin-bottom: 2em; }
.blog-post-list { /* Blog-Post-Liste */ }
.blog-card { /* Blog-Karte */ background: #fff; border: 1px solid #e8e8e8; border-radius: 8px; padding: 1.5em; margin-bottom: 1.2em; transition: box-shadow 0.2s ease; }
.blog-card:hover { /* Blog-Karte Hover */ box-shadow: 0 2px 12px rgba(0,0,0,0.08); }
.blog-card h2 { /* Blog-Karte Titel */ font-size: 1.3em; margin: 0 0 0.4em 0; }
.blog-card h2 a { /* Blog-Karte Titel-Link */ color: #222; text-decoration: none; }
.blog-card h2 a:hover { /* Blog-Karte Titel-Link Hover */ color: #2a7ae2; }
.blog-card-meta { /* Blog-Karte Meta */ font-size: 0.85em; color: #888; margin-bottom: 0.6em; }
.blog-card-excerpt { /* Blog-Karte Kurztext */ color: #555; line-height: 1.5; margin-bottom: 0.8em; }
.blog-card-link { /* Blog-Karte Weiterlesen */ color: #2a7ae2; text-decoration: none; font-weight: 600; font-size: 0.95em; }
.blog-card-link:hover { /* Blog-Karte Weiterlesen Hover */ text-decoration: underline; }

/* Responsive: Mobile */
@media (max-width: 950px) {
    .such-anbieter-layout {
        flex-direction: column;
    }
    .such-anbieter-aside {
        flex: none;
        width: 100%;
    }
    .such-anbieter-suche h1 {
        font-size: 1.4em;
    }
}