/* roboto-200 - latin */
@font-face {
  font-display: swap; 
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 200;
  src: url('./fonts/roboto-v47-latin-200.woff2') format('woff2'); 
}
/* roboto-200italic - latin */
@font-face {
  font-display: swap; 
  font-family: 'Roboto';
  font-style: italic;
  font-weight: 200;
  src: url('../fonts/roboto-v47-latin-200italic.woff2') format('woff2'); 
}
/* roboto-regular - latin */
@font-face {
  font-display: swap; 
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/roboto-v47-latin-regular.woff2') format('woff2'); 
}
/* roboto-italic - latin */
@font-face {
  font-display: swap; 
  font-family: 'Roboto';
  font-style: italic;
  font-weight: 400;
  src: url('../fonts/roboto-v47-latin-italic.woff2') format('woff2'); 
}
/* roboto-600 - latin */
@font-face {
  font-display: swap; 
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 600;
  src: url('../fonts/roboto-v47-latin-600.woff2') format('woff2'); 
}
/* roboto-600italic - latin */
@font-face {
  font-display: swap; 
  font-family: 'Roboto';
  font-style: italic;
  font-weight: 600;
  src: url('../fonts/roboto-v47-latin-600italic.woff2') format('woff2'); 
}
/* roboto-800 - latin */
@font-face {
  font-display: swap; 
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 800;
  src: url('../fonts/roboto-v47-latin-800.woff2') format('woff2'); 
}
/* roboto-800italic - latin */
@font-face {
  font-display: swap; 
  font-family: 'Roboto';
  font-style: italic;
  font-weight: 800;
  src: url('../fonts/roboto-v47-latin-800italic.woff2') format('woff2'); 
}
/* ===================================================== */
/* === GLOBALE CSS-VARIABLEN (CUSTOM PROPERTIES) ====== */
/* ===================================================== */
:root {
    /* ----- FARBEN ----- */
    /* Primärfarbe (Blau) mit verschiedenen Transparenzstufen */
    /* Primärfarbe (Blau) mit verschiedenen Transparenzstufen */
    --primarfarbe-solid: #003366;     /* 100% Deckkraft */
    --primarfarbe-semi: hsla(210, 100%, 20%, 0.75);   /* 75% Deckkraft */
    --primarfarbe-light: hsla(210, 100%, 20%, 0.5);   /* 50% Deckkraft */
    --primarfarbe-verylight: hsla(210, 100%, 20%, 0.25); /* 25% Deckkraft */
    
        /* Sekundärfarbe (Grün) - KORREKTUR: Eindeutige Variablennamen */
    --sekundarfarbe-solid: hsla(145, 25%, 40%, 1);     /* 100% Deckkraft */
    --sekundarfarbe-semi: hsla(145, 25%, 40%, 0.75);   /* 75% Deckkraft */
    --sekundarfarbe-light: hsla(145, 25%, 40%, 0.5);   /* 50% Deckkraft */
    --sekundarfarbe-verylight: hsla(145, 25%, 40%, 0.25); /* 25% Deckkraft */
  
    /* Akzentfarben (Grün/Rot) */
    --akzentfarbe: hsla(85, 35%, 53%, 0.75);                /* Standard mit 75% Deckkraft */
    --akzentfarbe-hover: hsla(85, 50%, 53%, 1);             /* Hover-Zustand */

    /* Hier keine Veränderungen Vornehmen! */
    --akzentfarbe-gruen: hsla(145, 25%, 40%, 1);            /* Grün Akzentfarbe */
    --akzentfarbe-semi: hsla(145, 25%, 40%, 0.75);          /* 75% Deckkraft */
    --akzentfarbe-light: hsla(145, 25%, 40%, 0.5);          /* 50% Deckkraft */
    --akzentfarbe-verylight: hsla(145, 25%, 40%, 0.25);     /* 25% Deckkraft */   
    --akzentfarbe-orange: hsla(20, 100%, 58%, 0.75);        /* Orange Akzentfarbe */
    --akzentfarbe-orange-hover: hsla(20, 100%,58%, 1);      /* Etwas dunkler für Hover */      
    --akzentfarbe-rot: hsla(0, 68%, 31%, 0.75);             /* 75% Deckkraft */
    --sekundarfarbe-rot-hover: hsla(0, 68%, 31%, 1);        /* 100% Deckkraft */
  
       /* Neutrale Farben */
    --neutraldunklefarbe-solid: #595959;     /* 100% Deckkraft */
    --neutraldunklefarbe-semi: hsla(0, 0%, 35%, 0.75);   /* 75% Deckkraft */
    --neutraldunklefarbe-light: hsla(0, 0%, 35%, 0.5);   /* 50% Deckkraft */
    --neutraldunklefarbe-light2: hsla(0, 0%, 35%, 0.45); /* 45% Deckkraft */
    --neutraldunklefarbe-verylight: hsla(0, 0%, 35%, 0.25); /* 25% Deckkraft */
        
    --neutralhellefarbe: rgb(247, 244, 241);      /* Helle Hintergrundfarbe */
    --white: hsla(0, 0%, 100%, 1);   
                    /* Weiß */
     /* Farben für den Finanzierungspartner-Banner */
    --partner-orange: hsla(20, 100%, 58%, 1);      /* #ff6129 */
    --partner-orange-hover: hsla(17, 100%, 46%, 1); /* Etwas dunkler für Hover */
    --partner-blau: hsla(210, 100%, 20%, 1); 
    --partner-purple:hsla(295, 63%, 29%, 1);     /* #245375 */

    /* ---- Styling für  Cookie-Banner ---- */
    --cc-bg: var(--white);
    --cc-text: var(--neutraldunklefarbe-solid);
    --cc-btn-primary-bg: var(--primarfarbe-solid);
    --cc-btn-primary-text: var(--white);
    --cc-btn-primary-hover-bg: var(--partner-blau);
    --cc-btn-secondary-bg: #e6e6e6;
    --cc-btn-secondary-text: var(--neutraldunklefarbe-solid);
    --cc-btn-secondary-hover-bg: #d4d4d4;
    --cc-border-radius: 8px;
    --cc-separator-border-color: var(--neutralhellefarbe);

    /* ----- ABSTÄNDE ----- */
    --space-xxs: 0.25rem;  /* Extra kleiner Abstand (4px bei 16px base) */
    --space-xs: 0.5rem;    /* Kleiner Abstand */
    --space-sm: 1rem;      /* Standardabstand */
    --space-md: 1.5rem;    /* Mittlerer Abstand */
    --space-lg: 2rem;      /* Großer Abstand */
    --space-xl: 3rem;      /* Extra großer Abstand */
  
    /* ----- Z-INDEX-EBENEN ----- */
    --z-index-base: 1;      /* Standardebene */
    --z-index-dropdown: 10; /* Für Dropdown-Menüs */
    --z-index-sticky: 100;  /* Für fixierte Elemente */
    --z-index-modal: 1000;  /* Für Modale/Overlays */
  
    /* ----- RESPONSIVE BREAKPOINTS ----- */
    --breakpoint-mobile: 480px;   /* Smartphones */
    --breakpoint-tablet: 768px;   /* Tablets */
    --breakpoint-desktop: 1024px; /* Desktop */


  }

/* ===================================================== */
/* === GRUNDLEGENDE STYLE-RESETS & GLOBAL STYLES ======= */
/* ===================================================== */
/* Box-Sizing für alle Elemente */
*, *::before, *::after {
    box-sizing: border-box; /* Padding/Border in Elementgröße inkludieren */
    margin: 0;              /* Standardmargins entfernen */
    padding: 0;             /* Standardpaddings entfernen */
    }
  /* HTML-/Body-Styles */
  html, body {
    font-family: 'Roboto', system-ui, -apple-system, sans-serif; /* Font-Stack mit Fallback */
  }

  /* HTML-Spezifische Styles */
  html {
    line-height: 1.5;               /* Optimale Lesbarkeit */
    -webkit-text-size-adjust: 100%; /* Zoom-Verhalten auf iOS kontrollieren */
    scroll-behavior: smooth;        /* Sanftes Scrollen */
  }
  
  /* Body-Styles */
  body {
    color: var(--neutraldunklefarbe-solid); /*Schriftfarbe = Neutral Dunkel*/
    background-color: var(--neutralhellefarbe); /*Hintergrundfarbe = neutral Hell*/
    min-height: 100vh;              /* Mindesthöhe = Viewport-Höhe */
    font-synthesis: none;           /* Automatische Fett/Kursiv verhindern */
    text-rendering: optimizeLegibility; /* Bessere Schriftdarstellung */
    -webkit-font-smoothing: antialiased; /* Glättung für WebKit-Browser */
    font-size: clamp(1rem, calc(1rem + 1vw), 1.2rem); /* Responsive Schriftgröße */
    overflow-x: hidden;           /*verhindert einen Scrollbar links-rechts*/
  }
  /* Zusätzliche Resets */
  ul[class], ol[class] {
      list-style: none;       /* Keine Aufzählungszeichen */
  }
  input, button, textarea, select {
      font: inherit;          /* Erben die Schrift des übergeordneten Elements */
  }
 
  /* ===================================================== */
  /* === MEDIEN-ELEMENTE ================================ */
  /* ===================================================== */
  img, picture, video, iframe {
    max-width: 100%; /* Responsive Skalierung */
    height: auto;    /* Proportionen erhalten */
    display: block;  /* Whitespace unter Bildern vermeiden */
  }
/* ===================================================== */
/* === INTERAKTIVE ELEMENTE =========================== */
/* ===================================================== */
/* Link-Styles */
  a {
    text-decoration: none;                                                  /* Unterstreichung entfernen */
    color: var(--neutralhellefarbe);                                        /* Standardfarbe */
    font-weight: 800;                                                      /* Hervorhebung */
    transition: transform 0.3s ease, color 0.3s ease, fill 0.3s ease;       /* Übergänge */
  }
  
  a:hover {
    color: var(--akzentfarbe-hover);    /* Hover-Farbe */
    transform: scale(1.01);             /* Leichte Vergrößerung */
  }
  
  a:foxus, a:focus-visible {
    outline: 0.125rem solid var(--akzentfarbe);   /* Fokus-Rand */
    outline-offset: 0.25rem;                      /* Abstand zum Element */
  }
  /* Button-Styles */
  button {
    cursor: pointer;                                                /* Zeigt an, dass das Element klickbar ist */
    max-width: 30rem;                                               /* Maximale Breite des Buttons */
    min-width: auto;                                                /* Keine minimale Breite festgelegt */
    white-space: nowrap;                                            /* Verhindert Zeilenumbrüche im Button-Text */
    padding: 0.5rem 1rem;                                           /* Innenabstand: vertikal 0.5rem, horizontal 1rem */
    border: none;                                                   /* Entfernt den Standardrahmen */
    border-radius: 0.2rem;                                          /* Leicht abgerundete Ecken */
    background-color: var(--akzentfarbe);                           /* Setzt die Hintergrundfarbe auf die Akzentfarbe */
    color: var(--neutralhellefarbe);                                /* Legt die Textfarbe fest */
    transition: transform 0.3s ease, background-color 0.3s ease;    /* Sanfte Übergänge für Vergrößerung und Farbwechsel */
  }
  
  button:hover {
    background-color: var(--akzentfarbe-hover);                     /* Hover-Farbe */
    transform: scale(1.01);                                         /* Leichte Vergrößerung */
  }

  /*Fokus-Stille für Buttons*/
 button:focus, button:focus-visible {
    outline: 0.125rem solid var(--akzentfarbe);                   /* Fokus-Rand */
    outline-offset: 0.25rem;                                      /* Abstand zum Element */
  }
  
hr {
  border: none;   	                                              /* Entfernt den Standard-Rahmen */
  height: 0.1rem;                                                 /* Definiert die Höhe der Linie */
  background-color: var(--neutralhellefarbe);                     /* Setzt die Farbe der Linie */
  margin-left: auto;                                              /* Richtet die Linie am rechten Rand aus */
  margin: 0.5rem 0;                                               /* Fügt vertikalen Abstand oberhalb und unterhalb ein */
  width: 100%;                                                    /* Dehnt die Linie über die gesamte Breite aus */
}
h1, h2, h3, h4, h5, h6 { 
  margin: var(--space-sm) 0;                                      /* Set vertical margins */ 
  line-height: 1.2;                                               /* Set line-height */ 
  font-weight: 800;                                               /* Set font weight to bold */ 
}
  
h1 {font-size: clamp(1.75rem, 4vw + 1rem, 2.25rem);}                     /* Responsive font size for h1 */
h2 {font-size: clamp(1.62rem, 3.8vw + 0.96rem, 2.05rem);}                /* Responsive font size for h2 */
h3 {font-size: clamp(1.49rem, 3.6vw + 0.92rem, 1.85rem);}                /* Responsive font size for h3 */
h4 {font-size: clamp(1.36rem, 3.4vw + 0.88rem, 1.65rem);}                /* Responsive font size for h4 */
h5 {font-size: clamp(1.23rem, 3.2vw + 0.84rem, 1.45rem);}                /* Responsive font size for h5 */
h6 {font-size: clamp(1.1rem, 3vw + 0.8rem, 1.25rem);}                    /* Responsive font size for h6 */
  
p { 
  margin-bottom: var(--space-sm);                               	              /* Bottom margin for paragraphs */ 
  line-height: 1.5;                               	                            /* Set line-height for paragraphs */ 
}

/* ===================================================== */
/* === UTILITY-KLASSEN ================================ */
/* ===================================================== */
/* Text-Styles */
.text-primarfarbe,  #aboutregion  { color: var(--primarfarbe-solid); }          /* Primärfarbe */
.text-sekundurfarbe { color: var(--sekundarfarbe-solid); }      /* Sekundärfarbe */
.text-akzentfarbe { color: var(--akzentfarbe); }                /* Akzentfarbe */
.text-dark { color: var(--neutraldunklefarbe-solid); }          /* Dunkle Textfarbe */
.text-hell { color: var(--neutralhellefarbe); }                 /* Helle Textfarbe */
.text-left { text-align: left; }                                /* Links ausgerichtet */
.text-center { text-align: center; }                            /* Zentrierte Ausrichtung */
.text-block { text-align: justify; }                            /* Blocksatz */
.text-right { text-align: right; }
.text-fett {font-weight: 600;}                              /* Rechts ausgerichtet */
.text-margin-bottom2{margin-bottom:2rem;}                       /* Außenabstand von unten 2rem*/
.text-margin-top2{margin-top:2rem;}                             /* Außenabstand von oben 2rem*/
.text-margin-bottom4{margin-bottom:4rem;}                       /* Außenabstand von unten 4rem*/
.text-margin-top4{margin-top:4rem;}                             /* Außenabstand von oben 4rem*/

/*Inhalt zentrieren*/
.inhalt-zentriert {  
  display: block;          /* Element wird als Block dargestellt */
  margin: 0 auto;          /* Zentriert das Element horizontal */
}  

/* Visuell verstecken, aber für Screenreader sichtbar */
.visually-hidden {
  position: absolute;        /* Element aus dem normalen Dokumentenfluss nehmen */
  width: 1px;                /* Sehr schmal */
  height: 1px;               /* Sehr klein */
  padding: 0;                /* Kein Innenabstand */
  margin: -1px;              /* Negativer Außenabstand, um das Element aus dem Blick zu nehmen */
  overflow: hidden;          /* Überlauf verbergen */
  clip: rect(0, 0, 0, 0);     /* Clipping, um den Inhalt zu verstecken */
  white-space: nowrap;       /* Verhindert Zeilenumbruch */
  border: 0;                 /* Kein Rahmen */
}



.flex{
    display: flex;
    gap: var(--gap, 1rem);
}

.grid{
    display: grid;
    gap: var(--gap, 1rem);
}


/* ===================================================== */
/* === Positionierungs-KLASSEN ========================= */
/* ==== Header-Menüzeile =============================== */
/* ===================================================== */


.primary-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.5rem 1rem;
  width: 100%;
  min-height: 110px;
  position: fixed;
  top: 0;
  z-index: 900;
  box-sizing: border-box;
  overflow: hidden;
  flex-wrap: nowrap;
}

.header-left {
  flex-shrink: 0;
}

.header-right {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-grow: 1;
  justify-content: flex-end;
}

.hidden-header { /* Auskommentieren wenn die Menüzeile angezeigt bleiben soll */
    top: -105%;
}

nav {
  flex: 1;
  display: flex;
  justify-content: flex-end;
  align-items: center;
}

.header-image {
  max-height: 100px;
  width: auto;
  height: auto;
  max-width: 100%;
  display: block;
  flex-shrink: 0;
}


.primary-navigation {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: flex-end;
  list-style: none;
  padding: 0 1rem;
  margin: 0;
  gap: 1.5rem;
  white-space: nowrap;
  overflow: hidden;
  max-width: 100%;
  box-sizing: border-box;
  background: var(--primarfarbe-semi);
}


@supports (backdrop-filter: blur(1rem)) {
  .primary-navigation {
      background: var(--primarfarbe-semi);
      backdrop-filter: blur(1rem);
  }
}

.primary-navigation a {
  position: relative; /* Notwendig für das ::after-Element */
  text-decoration: none;
  color: var(--neutralhellefarbe);
  font-size: 1rem;
  white-space: nowrap;
  padding-bottom: 0.5rem; /* Etwas Platz für den Unterstrich schaffen */
}

.primary-navigation a::after {
    content: ''; /* Pseudo-Elemente benötigen immer einen 'content' */
    position: absolute;
    bottom: 0;
    left: 0;
    
    /* Die sichtbaren Eigenschaften des Strichs */
    width: 100%;
    height: 2px;
    background-color: var(--akzentfarbe-hover); /* Ihre Akzentfarbe für den Hover-Effekt */
    
    /* Die Animationseigenschaften */
    transform: scaleX(0); /* Startet mit 0% Breite (unsichtbar) */
    transform-origin: center; /* Die Animation startet von der Mitte aus */
    transition: transform 0.4s cubic-bezier(0.19, 1, 0.22, 1); /* Weiche Animation */
}

/* 3. Der sichtbare Zustand beim Hovern */
.primary-navigation a:hover::after {
    transform: scaleX(1); /* Skaliert auf 100% Breite */
}

.primary-navigation a > [aria-hidden="true"] {
    font-weight: 700;
    margin-inline-end: 0.75em;
}

.logo-large {
    display: block;
}
.logo-small {
    display: none;
}

.home{
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background-image: url('/images/video/background.png');
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    z-index: -2;
    display: flex;
    justify-content: flex-end;  /* Schiebt das Kind-Element nach rechts */
    align-items: flex-end;      /* Schiebt das Kind-Element nach unten */
}

.home > video{     
    position: absolute;
    top: 0; left: 0;
    width: 100vw;
    height: 100vh;
    object-fit: cover;
    z-index: -1;
}

.home-textfeld {
    margin: 0 10vw 8vh 0;
    padding: 1.5rem;
    background-color: var(--neutraldunklefarbe-semi);
    border-radius: 0.6rem;
    color: var(--neutralhellefarbe);
    box-shadow: 0 0.25rem 0.5rem var(--neutraldunklefarbe-verylight);
    text-align: center;
    max-width: clamp(350px, 20vw, 550px);
}

.home-textfeld p {
    font-size: clamp(0.9rem, 2vw, 1.1rem);
    margin-bottom: 1.5rem;
    opacity: 0.9;
}

.home-textfeld button {
    font-size: clamp(0.9rem, 1.8vw, 1.1rem);
    padding: 0.6rem 1.8rem;
}

.home-textfeld h3 {
    font-size: clamp(1.2rem, 5vw, 1.5rem);
}

main {
    margin-top: 15vh;
    padding: 2rem 0rem;
    background-color: var(--neutralhellefarbe);
    display: flex;
    align-items: flex-start; /* Oben ausrichten */
    flex-direction: column;
    align-items: center; /* Sektionen innerhalb von main horizontal zentrieren */
    gap: 1rem; /* Abstand zwischen den Sektionen */
    width: 100%; /* Nimmt die volle Breite ein */
    min-height: calc(85vh- 4rem); /* Mindesthöhe für den Main-Bereich, wenn der Inhalt kurz ist */
}
body.has-hero-video main {
  margin-top: 100vh;
}

.content-section {
    background-color: var(--white); /* Fester Hintergrund für Sektionen */
    box-shadow: 0 0.25rem 0.5rem var(--neutraldunklefarbe-verylight); /* Schatten für Sektionen */
    width:100%;
    max-width: clamp(375px, 90%, 120rem); /* Maximale Breite für den Inhalt jeder Sektion */
    margin: 0 auto; /* Zentriert den Inhalt der Sektionen */
    padding: 1rem 1.5rem; /* Innenabstand für die Sektionen */
    position: relative; /* Oder 'unset'/'static', je nach Bedarf */
    top: auto;
    margin-bottom: 2rem; /* Abstand zwischen den Sektionen */
}

footer{
    display: flex;
    flex-direction: column;
    text-align: center;
    align-items: center;
    background: var(--neutraldunklefarbe-solid);
    color: var(--neutralhellefarbe);
    padding: 1.8rem;
    width: 100%;
    box-sizing: border-box;
    z-index: 10;
}
.site-footer {
    background-color: var(--neutraldunklefarbe-solid);
    color: var(--neutralhellefarbe);
    padding: var(--space-xl) var(--space-md) 0;
    font-size: 0.9rem;
}

.footer-main {
    display: grid;
    /* Erstellt ein flexibles Grid mit Spalten, die mind. 200px breit sind */
    grid-template-columns: repeat(4, 1fr);
    gap: 2rem;
    max-width: 1200px;
    margin: 0 auto;
    padding-bottom: var(--space-lg);
}

.footer-title {
    font-weight: 700;
    color: var(--white);
    margin-bottom: 1rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.footer-col p {
    line-height: 1.7;
    opacity: 0.8;
    margin-bottom: 0;
}

.footer-col ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.footer-col ul li {
    margin-bottom: 0.75rem;
}

.footer-col a {
    color: var(--neutralhellefarbe);
    text-decoration: none;
    font-weight: 400; /* Normales Gewicht für Links im Footer */
    transition: color 0.2s, padding-left 0.2s;
}

.footer-col a:hover {
    color: var(--akzentfarbe-hover);
    padding-left: 0.5rem; /* Leichter Einrück-Effekt */
    transform: none; /* Deaktiviert den globalen Zoom-Effekt */
}

.footer-bottom {
    border-top: 1px solid var(--neutraldunklefarbe-light2);
    text-align: center;
    padding: 1.5rem 0;
    margin-top: 2rem;
}

.footer-bottom p {
    margin: 0;
    font-size: 0.8rem;
    opacity: 0.6;
}

.footer-social-icons {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem; /* Abstand zwischen den Icons */
    margin-top: 0.5rem; /* Abstand zum Kontakt-Text darüber */

}

.footer-social-icons a {
    display: inline-block;
    line-height: 0; /* Verhindert zusätzlichen Leerraum durch Zeilenhöhe */
}

.footer-social-icons svg {
    width: 1rem;
    height: 1rem;
    fill: var(--white);
    opacity: 0.7;
    transition: opacity 0.3s ease,
}

.footer-social-icons a:hover svg {
    opacity: 1;
    scale: 1;
    transform: none;
}
/* ===================================================== */
/* === Benutzerdefinierte Größenänderungen ============= */
/* ==== Handy-Hochformat =============================== */
/* ===================================================== */
@media (max-width: 45em ) {
  *{
    font-size: 1rem;
  }
  .primary-navigation {
    position: fixed;
    inset: 0;
    z-index: var(--z-index-modal);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2rem;
    background: var(--primarfarbe-semi);
    padding: 2rem;
    transform: translateX(100%);
    transition: transform 500ms ease-out;
    overflow-y: auto;
    overflow-x: hidden;
  }

  .primary-navigation[data-visible="true"] {
      transform: translateX(0%);
  }

  .primary-navigation a {
    white-space: normal;
    word-break: break-word;
    text-align: center;
  }

  .mobile-nav-toggle {
    display: block;
    position: absolute;
    top: 1.5rem;
    right: 1.5rem;
    z-index: 9999;
    cursor: pointer;
    border-radius: 0.5rem;
    background-color: var(--primarfarbe-semi);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    background-image: url('images/svg/burger-menu-svgrepo-com.svg');
    background-repeat: no-repeat;
    background-position: center;
    background-size: 60%;
    width: 3rem;
    height: 3rem;
    aspect-ratio: 1;
    transition: background-color 0.3s ease, transform 0.3s ease;
  }

  .mobile-nav-toggle:hover {
    background-color: var(--primarfarbe-semi);
    transform: scale(1.05);
  }

  .mobile-nav-toggle[aria-expanded="true"] {
    background-image: url('images/svg/close-x-svgrepo-com.svg');
  }

  .logo-large {
    display: block; /* Großes Logo wieder einblenden */
  }

  .logo-small {
    display: none;  /* Kleines Logo wieder ausblenden */
  }

  .home-textfeld {
    position: absolute;
    bottom: 5vh;                /* Etwas Abstand von unten */
   
    right: 1rem;                /* Sicherer Abstand von rechts */
    width: auto;                /* Die Breite wird durch die Abstände bestimmt */
    /* Die Mindestbreite wird für kleine Bildschirme reduziert */
    max-width: clamp(35%, 80vw, 400px);
  }

  .home-textfeld h3 {
    font-size: clamp(1.1rem, 5vw, 1.4rem);  /* Schriftgröße an den kleineren Platz anpassen */
  }

  main {
    padding: 1rem 0;   /* Vertikales Padding reduzieren */
  }

  .content-section {
    max-width: clamp(375px, 90%, 120rem);
    margin: 0 auto;
    padding: 1rem;
  }
    
    /* Zweispaltige Layouts werden einspaltig */
  .projects, .appartments {
    display: grid;
    gap: 3rem;
    align-items: center;
    grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
      }

    /*  Korrektur für die Kontakt-Sektion in der Appartments-Box */
  .appartments {
    flex-direction: column; /* Stellt die Reihenfolge wieder her */
  }
  
  .left, .right {
    display: grid;
    margin: 1rem 0;
    align-items: center;
    grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
  }


  .vertical-line {
    display: none; /* Trennlinie ausblenden */
  }

  .footer-main {
    grid-template-columns: 1fr;
    padding: 0 1rem;
    gap: 1.5rem; 
  }
}

@media (min-width: 45em) {
    .mobile-nav-toggle {
        display: none;
    }
    

    .primary-navigation {
      display: flex;
      flex-direction: row;
      flex-wrap: nowrap;
      align-items: center;
      justify-content: flex-end;
      gap: clamp(0.5rem, 2vw, 1.25rem);
      padding-inline: clamp(1rem, 6vw, 6rem);
      padding-block: 1rem;
      overflow: hidden;
    }


}

@media  (min-width:45em) and (max-width: 75em) {
  .primary-navigation a > [aria-hidden="true"] {
      display: none;
  }

  .primary-navigation {
    gap: clamp(0.5rem, 2vw, 1.25rem);
    padding-inline: 1rem;
    padding-block: 0.75rem;
  }
  
  .primary-navigation a {
    font-size: 0.9rem;
  }

  .logo-large {
        display: none;  /* Großes Logo ausblenden */
  }

  .logo-small {
        display: block; /* Kleines Logo einblenden */
  }

  .site-footer{
    padding:1.5rem 0.5rem 0.5rem 0.5rem;
  }
  .footer-main {
        grid-template-columns: repeat(2, 1fr);
        gap: 1.2rem; /* Weniger Gap für engeren Raum */
    }
    
    /* About-Spalte bekommt etwas mehr Platz */
    .footer-col.about {
        grid-column:  1/-1;
    }
    .footer-col.contact {
        grid-column: 1/-1;
    }
    
}
/* Handy Querformat - niedriger Viewport */
@media (max-width: 75em) and (max-height: 500px) and (orientation: landscape) {
    .home-textfeld {
        /* Weniger Padding für mehr Platz */
        padding: 1rem;
        /* Näher zum Rand positionieren */
        bottom: 2vh;
        right: 0.5rem;
        /* Kleinere maximale Breite */
        max-width: clamp(30%, 70vw, 350px);
        /* Weniger margin-bottom bei Elementen */
    }
    
    .home-textfeld h2 {
        font-size: clamp(1rem, 4vw, 1.3rem);
        margin-bottom: 0.5rem; /* Weniger Abstand */
    }
    
    .home-textfeld p {
        font-size: clamp(0.8rem, 1.8vw, 1rem);
        margin-bottom: 1rem; /* Weniger Abstand */
        line-height: 1.4; /* Kompaktere Zeilenhöhe */
    }
    
    .home-textfeld button {
        font-size: clamp(0.8rem, 1.6vw, 1rem);
        padding: 0.5rem 1.5rem; /* Kompakterer Button */
    }
}

/* Sehr kleine Querformate (iPhone SE, etc.) */
@media (max-width: 45em) and (max-height: 400px) and (orientation: landscape) {
    .home-textfeld {
        padding: 0.8rem;
        bottom: 1vh;
        right: 0.5rem;
        max-width: clamp(25%, 65vw, 300px);
    }
    
    .home-textfeld h2 {
        font-size: clamp(0.9rem, 3.5vw, 1.2rem);
        margin-bottom: 0.3rem;
    }
    
    .home-textfeld p {
        font-size: clamp(0.75rem, 1.6vw, 0.9rem);
        margin-bottom: 0.8rem;
        line-height: 1.3;
    }
    
    .home-textfeld button {
        font-size: clamp(0.75rem, 1.4vw, 0.9rem);
        padding: 0.4rem 1.2rem;
    }
}

/* Stile für die SVG-Icons in der Kontakt-Sektion */
.contact-icons {
    display: flex;
    justify-content: flex-end;
    gap: 1rem;
}
.contact-icons a {
    display: inline-block;
    transition: transform 0.5s ease, fill 0.3s ease;
}
.contact-icons .icon { fill: var(--neutralhellefarbe); }
.contact-icons a:hover .icon { fill: var(--akzentfarbe-hover); }

/* Stil für abschnitt Appartments (Spezifisch für die Zwei-Spalten-Ansicht) */
.appartments {
    display: flex;
    flex-wrap: wrap; /* Erlaubt Umbruch auf kleineren Bildschirmen */
    align-items: stretch;
    padding: 1rem;
    width: 100%;
    background-color: var(--neutraldunklefarbe-solid); /* Wenn dies eine Komponente ist, muss es einen soliden Hintergrund haben, damit es nicht transparent ist */
    color: var(--neutralhellefarbe); /* ersetzte hsla(25, 29%, 97%, 1) */
}
.left-column {
    flex: 1 1 45%; /* Flex-Grow, Flex-Shrink, Basisbreite */
    text-align: right;
    padding-right: 1rem; /* Abstand zur Trennlinie/rechten Spalte */
}
.right-column {
    flex: 1 1 50%; /* Flex-Grow, Flex-Shrink, Basisbreite */
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding-left: 1rem; /* Abstand zur Trennlinie/linken Spalte */
}
.vertical-line {
    min-width: 0.1rem;
    background-color: var(--neutralhellefarbe);
    align-self: stretch;
    margin: 0 1rem; /* Vertikaler Strich mit Abstand */
}
.custom-list {
    list-style-type: none;
    width: 100%;
    padding: 0;
    margin: 0;
}
.custom-list li {
    display: flex;
    align-items: flex-start;
    margin-bottom: 1.5rem;
    padding: 0.5rem 0;
}
.custom-list li > div {
    order: 1;
    flex: 1;
    padding-right: 1rem;
    text-align: right;
}
.custom-list li svg {
    order: 2;
    margin-left: auto;
    fill: var(--akzentfarbe);
    line-height: 1.2;
    Padding-top:var(--space-sm);
    height: 2em;
    width: auto;
    flex-shrink: 0;
}
.custom-list li h4 { margin-bottom: 0.25rem; }

/* Wrapper-Container für Appartments Übersicht (spezifisch) */
.appartments-uebersicht {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 2rem;
    padding: 1rem;
}
.appartments-uebersicht article {
    background-color: var(--white);
    padding: 1.5rem;
    border-radius: 10px;
    box-shadow: 0 4px 8px var(--neutraldunklefarbe-verylight);
    display: flex;
    flex-direction: column;
}
.appartments-uebersicht article > div {
    display: flex;
    align-items: center;
    gap: 1rem;
}
.appartments-uebersicht article svg {
    width: 1rem;
    height: 1rem;
    fill: var(--akzentfarbe); /* ersetzte hsla(85, 35%, 53%, 1) */
}
.appartments-uebersicht article h3 {
    font-size: 1rem;
    margin: 0;
    color: var(--neutraldunklefarbe-solid);
}
.appartments-uebersicht article ul {
    list-style-type: none;
    padding: 0;
    margin: 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(50px, 1fr));
    gap: 1rem;
}
.appartments-uebersicht article ul li {
    font-size: 1rem;
    margin-bottom: 0.5rem;
    color: var(--neutraldunklefarbe-light);
}
.appartments-uebersicht article ul li::before {
    content: "";
    color: var(--akzentfarbe); /* ersetzte hsla(85, 35%, 53%, 1) */
    margin-right: 0.5rem;
}
.appartments-uebersicht article h4 {
    font-size: 1rem;
    margin: 0 0 0.5rem 0;
    color: var(--neutraldunklefarbe-solid);
}

@media (max-width: 840px) {
    .appartments {
        flex-direction: column-reverse;
        gap: 0;
    }
    .left-column, .right-column {
        width: 100%;
        text-align: left;
    }
    .vertical-line {
        display: none;
    }
    .left-column { order: 2; }
    .right-column { order: 1; }

    .custom-list > li {
        margin-bottom: 1rem;
        padding: 0.5rem 0;
    }
  
     .custom-list li > div {
        flex: 1;
        padding-right: 0;
        padding-left: 1rem; /* Abstand zum SVG */
        text-align: left; /* Linksbündig auf Mobile */
    }

    .custom-list li svg {
        order: 1;
        margin-left: 0;
        margin-right: 0;
        flex-shrink: 0;
        align-self: flex-start;
        margin-top: 0.2rem;
    }
    

}

.projects {
     display: grid;
    /* Erstellt ein 2-spaltiges Grid, das sich anpasst */
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
    gap: 3rem;
    align-items: center;
}
.project-block {
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: 100%;
}

.projects  h2, .projects h3 {
    margin-top: 0;
    color: var(--primarfarbe-solid);
}


.projects p {
    line-height: 1.7;
    color: var(--neutraldunklefarbe-solid);
}

.projects img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 8px;
}

.grid-span2,
.grid-span-full { 
    grid-column: 1 / -1;
}
.left, .right {
    display: flex; /* Verwenden Sie flex für Inhalt in Spalten */
    flex-direction: column;
    justify-content: center;
    height: 100%; /* Füllt die Höhe der Grid-Zelle */
}
.text-center {
    text-align: center;
}

.ausstattung-section {
    /* Optional: Fügen Sie einen Rahmen hinzu, um die Sektion abzugrenzen */
    padding: 2rem 0;
    border-top: 1px solid var(--neutralhellefarbe);
    border-bottom: 1px solid var(--neutralhellefarbe);
}

.ausstattung-section h3 {
    margin-bottom: 2rem;
}

/* Der innere Container für den Inhalt */
.ausstattung-content {
    /* Wir entfernen den alten, störenden Hintergrund */
    background-color: transparent;
    padding: 0;
    border-radius: 0;
}

/* Stil für den Einleitungstext */
.ausstattung-intro {
    text-align: center;
    max-width: 70ch;
    margin: 0 auto 2.5rem auto; /* Zentriert und gibt Abstand nach unten */
    line-height: 1.7;
    font-size: 1.1rem;
    color: var(--neutraldunklefarbe-solid);
}

/* Die Liste selbst, jetzt als zwei Spalten */
.grid-span-full ul {
    list-style: none;
    padding: 0;
    margin: 0 auto;
    column-count: 2;
    column-gap: 3rem;
    max-width: 1000px; /* Begrenzt die Breite der Liste für bessere Lesbarkeit */
}

/* Jeder einzelne Listenpunkt */
.grid-span-full ul li {
    padding-left: 2.5rem;
    position: relative;
    line-height: 1.6;
    color: var(--neutraldunklefarbe-solid);
    text-align: left;
    break-inside: avoid-column; /* Verhindert, dass Punkte umgebrochen werden */

}

/* Das benutzerdefinierte Icon als Aufzählungszeichen */
.grid-span-full ul li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 5px; /* Vertikale Ausrichtung des Icons */
    width: 22px;
    height: 22px;
    background-color: var(--akzentfarbe-hover);
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z'/%3E%3C/svg%3E");
    -webkit-mask-size: contain;
    mask-size: contain;
}

/* Der Schlusstext */
.ausstattung-outro {
    text-align: center;
    margin: 2.5rem auto 0 auto;
    font-weight: 500;
    color: var(--neutraldunklefarbe-solid);
}
@media (max-width: 45em){
   .grid-span-full >ul {
        column-count: 1; /* Liste wird einspaltig */
    }
}
/* About Us Sektion (spezifisch) */
.aboutus {
    text-align: center;
    align-items: center;
    justify-content: center;
    max-width: 100rem;
    margin: 0 auto;
}

/* Contact Form (spezifisch) */
#kontakt-form-api {
    max-width: 850px;
    margin: 0 auto;
    padding: Clamp(1.5rem, 5vw, 2.5rem);
    background: var(--neutralhellefarbe); /* Fester Hintergrund */
    border-radius: 8px;
    box-shadow: 0 2px 10px var(--neutraldunklefarbe-verylight);
}
#kontakt-form-api fieldset { border: none; padding: 0; }
#kontakt-form-api legend { font-size: 1.2em; font-weight: bold; margin-bottom: 1.25rem; }
#kontakt-form-api label { display: block; margin: 10px 0 5px; font-weight: 600; }
#kontakt-form-api input, #kontakt-form-api textarea {
    width: calc(100% - 2rem);
    padding: 1.25rem;
    border: 1px solid var(--white);
    border-radius: 0.3rem;
    font-size: 1em;
    transition: 0.3s ease-in-out;
}
#kontakt-form-api input:focus, #kontakt-form-api textarea:focus {
    border-color: var(--akzentfarbe-hover);
    outline: none;
    box-shadow: 0 0 0.25rem var(--akzentfarbe);
}
.AsteriskRot { color: var(--akzentfarbe-rot); font-size: 1em; font-weight: bold; }
#kontakt-form-api button {
    width: 100%;
    padding: 0.75rem;
    margin-top: 0.9rem;
    background: var(--akzentfarbe);
    color: var(--neutralhellefarbe);
    font-size: 1em;
    border: none;
    border-radius: 0.4rem;
    cursor: pointer;
    transition: 0.3s;
}
#kontakt-form-api button:hover { background: var(--akzentfarbe-hover); }
#kontaktwahl-input {
    background: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiIgdmlld0JveD0iMCAwIDE2IDE2Ij4KICA8cGF0aCBkPSJNOC4wMDEgMTEuOTk5bC00LjI5OS00LjI5OWEuNzUuNzUgMCAxIDEgMS4wNi0xLjA2bDMuNzY5IDMuNzY5IDMuNzY5LTMuNzY5YS43NS43NSAwIDAgMSAxLjA2IDEuMDZsLTQuMjk5IDQuMjk5YS43NS43NSAwIDAgMS0xLjA2IDBsLS4wMDEtLjAwMXoiLz4KPC9sdiPg==') no-repeat right 10px center; /* URL ist hier abgeschnitten, sicherstellen dass es passt */
    background-size: 0.8rem;
    padding-right: 1.9rem;
    width: calc(100% - 1.25rem);
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}
/* Placeholder styles for contact form (unverändert) */
#kontakt-form-api input::-webkit-input-placeholder, #kontakt-form-api textarea::-webkit-input-placeholder, #kontakt-form-api datalist::-webkit-input-placeholder { color: silver; transition: color 1s; }
#kontakt-form-api input::-moz-placeholder, #kontakt-form-api textarea::-moz-placeholder, #kontakt-form-api datalist::-moz-placeholder { color: silver; transition: color 1s; }
#kontakt-form-api input:-ms-input-placeholder, #kontakt-form-api textarea:-ms-input-placeholder, #kontakt-form-api datalist:-ms-input-placeholder { color: silver; transition: color 1s; }
#kontakt-form-api input:-moz-placeholder, #kontakt-form-api textarea:-moz-placeholder, #kontakt-form-api datalist:-moz-placeholder { color: silver; transition: color 1s; }
#kontakt-form-api input:focus::-webkit-input-placeholder, #kontakt-form-api textarea:focus::-webkit-input-placeholder, #kontakt-form-api datalist:focus::-webkit-input-placeholder { color: transparent; }
#kontakt-form-api input:focus::-moz-placeholder, #kontakt-form-api textarea:focus::-moz-placeholder, #kontakt-form-api datalist:focus::-moz-placeholder { color: transparent; }
#kontakt-form-api input:focus:-ms-input-placeholder, #kontakt-form-api textarea:focus:-ms-input-placeholder, #kontakt-form-api datalist:focus:-ms-input-placeholder { color: transparent; }
#kontakt-form-api input:focus:-moz-input-placeholder, #kontakt-form-api textarea:focus:-moz-input-placeholder, #kontakt-form-api datalist:focus:-moz-input-placeholder { color: transparent; }

.checkbox-container label {
    display: flex;
    align-items: center; /* Richtet Box und Text vertikal aus */
    gap: 0.5rem;         /* Kleiner Abstand zwischen Box und Text */
    cursor: pointer;
    white-space: nowrap; /* Verhindert Zeilenumbruch */
}

#kontakt-form-api .checkbox-container input[type="checkbox"] {
    width: auto;      /* Setzt die Breite auf den Standardwert zurück */
    height: auto;     /* Setzt die Höhe auf den Standardwert zurück */
    flex-shrink: 0; 
}
.checkbox-container a {
    color: inherit; /* Erbt die Farbe vom übergeordneten .text-dark Label */
    text-decoration: underline;
}

/* Grund-Container für die Nachrichten. Standardmäßig ist er unsichtbar. */
.form-message-container {
    padding: 0;
    margin-bottom: 1rem;
    border-radius: 5px; /* Etwas weichere Ecken */
    font-size: 0.95em;
    font-weight: 500;
    transition: all 0.4s ease-in-out;
    max-height: 0; /* Beginnt mit Höhe 0 */
    overflow: hidden;
    opacity: 0;   /* Beginnt komplett transparent */
    border: 1px solid transparent;
}

/* Klasse, die per JavaScript hinzugefügt wird, um die Box sichtbar zu machen */
.form-message-container.visible {
    padding: 1rem;
    min-height: 4rem; /* Ausreichend Höhe für mehrere Zeilen Text */
    opacity: 1;
}

/* Styling für Erfolgsmeldungen (grün) */
.form-message-container.success {
    background-color: #d4edda;
    color: #155724;
    border-color: #c3e6cb;
}

/* Styling für Fehlermeldungen (rot) */
.form-message-container.error {
    background-color: #f8d7da;
    color: #721c24;
    border-color: #f5c6cb;
}

/* Styling für Warnungen (gelb) */
.form-message-container.warning {
    background-color: #fff3cd;
    color: #856404;
    border-color: #ffeeba;
}

/* Styling für Info-Meldungen (blau) */
.form-message-container.info {
    background-color: #d1ecf1;
    color: #0c5460;
    border-color: #bee5eb;
}

/* Styling für Listen innerhalb der Nachrichtenbox (für detaillierte Fehler) */
.form-message-container ul {
    margin-top: 0.75rem;
    margin-bottom: 0;
    padding-left: 20px;
    text-align: left;
}

.form-message-container p {
    margin: 0;
    padding: 0;
}



.wohnungsfilter-wrapper {
    background-color: var(--white);
    box-shadow: 0 0.25rem 0.5rem var(--neutraldunklefarbe-verylight);
    padding: 1.5rem;
    border-radius: 0.6rem;
    max-width: 1200px;
    margin: 2rem auto 2rem auto; /* Zentriert horizontal */
    width: 100%;
}

#filter-form {
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

.filter-layout {
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

@media (min-width: 768px) {
    .filter-layout {
        flex-direction: row;
        gap: 2rem;
        justify-content: space-between;
    }

    .filter-left,
    .filter-right {
        flex: 1;
    }

    .filter-left .filter-group,
    .filter-right .filter-group {
        margin-bottom: 1.5rem;
    }
}

.filter-group label {
    display: block;
    margin-bottom: 0.5rem;
    font-weight: bold;
    color: var(--neutraldunklefarbe-solid);
}

.options-container {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.options-container .option {
    padding: 0.5rem 1rem;
    border: 1px solid var(--neutraldunklefarbe-light);
    border-radius: 0.3rem;
    cursor: pointer;
    transition: background-color 0.2s, border-color 0.2s;
    color: var(--neutraldunklefarbe-solid);
    font-size: 0.9em;
}

.options-container .option:hover {
    background-color: var(--neutraldunklefarbe-verylight);
}

.options-container .option.selected {
    background-color: var(--akzentfarbe);
    color: var(--white);
    border-color: var(--akzentfarbe);
}

.slider-container {
    position: relative;
    height: 2.5rem; /* Platz für Slider und Werte */
    display: flex;
    align-items: center;
}
.slider-container input[type="range"] {
    -webkit-appearance: none;
    width: 100%;
    height: 0.5rem;
    background: transparent;
    outline: none;
    position: absolute;
    margin: 0;
    pointer-events: none; /* Macht den Slider klickbar */
}
.slider-container input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 1rem;
    height: 1rem;
    background: var(--akzentfarbe);
    border-radius: 50%;
    cursor: grab;
    pointer-events: auto; /* Macht den Daumen klickbar */
    position: relative;
    z-index: 2;
    box-shadow: 0 0 0 2px var(--white);
}
.slider-container input[type="range"]::-moz-range-thumb {
    width: 1rem;
    height: 1rem;
    background: var(--akzentfarbe);
    border-radius: 50%;
    cursor: grab;
    pointer-events: auto;
    position: relative;
    z-index: 2;
    box-shadow: 0 0 0 2px var(--white);
}
.range-slider {
    position: relative;
    width: 100%;
    height: 0.5rem;
    background: var(--neutraldunklefarbe-light2);
    border-radius: 5px;
}
.range-progress {
    height: 100%;
    background: var(--akzentfarbe);
    border-radius: 5px;
    position: absolute;
    left: 0;
    width: 100%; /* Wird durch JS angepasst */
}
.slider-value {
    position: absolute;
    top: -1.5rem; /* Position über dem Slider */
    left: 0;
    right: 0;
    text-align: center;
    font-size: 0.85rem;
    color: var(--neutraldunklefarbe-solid);
}
.filter-footer {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    margin-top: 2rem;
}

.view-switcher-container {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    word-break: break-word;
    max-width: 100%;
    gap: 1rem;
}

.view-switcher-container .view-label {
    font-size: 0.9em;
    color: var(--neutraldunklefarbe-solid);
}

.switch {
    position: relative;
    display: inline-block;
    min-width: 60px;
    max-width: 60px;
    flex-shrink: 0;
    height: 34px;
}

.switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

/* Zusammengefasste und korrigierte Definition für den Toggle-Slider */
.slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: var(--neutraldunklefarbe-light2);
    -webkit-transition: .4s;
    transition: .4s;
}

.slider:before {
    position: absolute;
    content: "";
    height: 26px;
    width: 26px;
    left: 4px;
    bottom: 4px;
    background-color: var(--white);
    -webkit-transition: .4s;
    transition: .4s;
}

input:checked + .slider {
    background-color: var(--akzentfarbe);
}

input:focus + .slider {
    box-shadow: 0 0 1px var(--akzentfarbe);
}

input:checked + .slider:before {
    -webkit-transform: translateX(26px);
    -ms-transform: translateX(26px);
    transform: translateX(26px);
}

.slider.round {
    border-radius: 34px;
}

.slider.round:before {
    border-radius: 50%;
}

[title] {
    position: relative;
}

.tooltip-info {
    display: inline-block;
    margin-left: 0.25rem;
    width: 1rem;
    height: 1rem;
    background: var(--primarfarbe-solid);
    color: var(--white); 
    border-radius: 50%;
    text-align: center;
    line-height: 1rem;
    font-size: 0.85rem;
    cursor: help;
}
@media (max-width: 480px) {
    .slider-value {
        font-size: 0.75rem;
        top: -2rem;
    }

    .option {
        flex: 1 1 calc(50% - 1rem);
        text-align: center;
    }

    .options-container {
        flex-wrap: nowrap;
        overflow-x: auto;
        scrollbar-width: thin;
        -webkit-overflow-scrolling: touch;
    }
}

/* --- Grid-Container und zugehörige Stile --- */
.grid-scroll-wrapper {
    overflow-x: auto; 
    -webkit-overflow-scrolling: touch;
    padding-bottom: 1rem; 
    margin: 0 auto; 
    max-width: min(1380px, 100%); 
}

.grid-container {
    display: grid; /* display: grid wurde hier belassen, da es für die Grid-Ansicht essenziell ist */
    grid-auto-flow: column; /* Weist das Grid an, Items horizontal anzuordnen */
    grid-auto-columns: 250px; /* Definiert die Breite für jede automatisch erstellte Spalte */
    gap: 1.5rem;
    padding: 1rem;
    margin: 0 auto;
    min-width: fit-content;
}

.grid-item {
    display: flex;
    flex-direction: column;
    justify-content: space-between; /* Verteilt den Inhalt */
    align-items: center;
    text-align: center;
    padding: 1.5rem;
    border-radius: 8px;
    background-color: var(--white);
    box-shadow: 0 4px 8px var(--neutraldunklefarbe-verylight);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.grid-item:hover {
    transform: scale(1.05);
    box-shadow: 0 6px 12px var(--neutraldunklefarbe-verylight);
}

.grid-item-image-container { 
    width: 100%;
    aspect-ratio: 4 / 3; 
    border-radius: 8px;
    margin-bottom: 1rem;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
}

.floorplan-flats {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.grid-item > a {
    color: var(--primarfarbe-solid);
}

/* Korrigierter, lokaler Fokus-Stil */
.grid-item > a:hover,
.grid-item > a:focus {
    color: var(--akzentfarbe-hover);
}

.grid-item p {
    font-size:1rem;
    margin: 0;
    color: var(--neutraldunklefarbe-solid);
}

.icons-container {
    display: flex;
    gap: 0.8rem;
    margin: 0.5rem 0;
    justify-content: center;
    flex-wrap: wrap;
}

.icons-flats {
    /* `display: flex` und `gap` entfernt, da sie auf <img> keine Wirkung haben */
    margin-top: 0.5rem; 
    width: 24px;
    height: 24px;
    object-fit: contain;
}
.grid-item-link {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 100%;
    text-decoration: none;
}

/* NEU: Der Footer-Container am Ende der Karte */
.grid-item-footer {
    display: flex;
    justify-content: space-between; /* Verteilt Badge und Button an die Enden */
    align-items: center;
    width: 100%;
    margin-top: auto; /* Schiebt den Footer an den unteren Rand der Karte */
    padding-top: 1rem; /* Abstand nach oben */
}





/* Hover-Effekt: Ändert den Button, wenn die Karte überfahren wird */
.grid-item:hover .details-button {
    background-color: var(--akzentfarbe-hover);
    color: var(--white);
}

/* Deaktiviert Hover-Effekte für verkaufte/reservierte Karten */
.grid-item.status-verkauft:hover,
.grid-item.status-reserviert:hover {
    transform: none;
    box-shadow: 0 4px 8px var(--neutraldunklefarbe-verylight);
    cursor: default;
}

.grid-item.status-verkauft:hover .details-button,
.grid-item.status-reserviert:hover .details-button {
    background-color: var(--neutraldunklefarbe-light);
    color: var(--neutraldunklefarbe-solid);
}

/* Permanenter inaktiver Stil für den Button auf verkauften Karten */
.grid-item.status-verkauft .details-button {
     background-color: var(--neutraldunklefarbe-light);
     color: var(--neutraldunklefarbe-solid);
     pointer-events: none;
}


/* Der Container für die Hinweismeldung */
.info-message.grid-span-full {
    background-color: var(--akzentfarbe-gruen-verylight); 
    border: 1px solid var(--akzentfarbe-gruen-light);
    border-left: 5px solid var(--primarfarbe-solid); /* Eine stärkere linke Kante zur Hervorhebung */
    border-radius: 8px;
    padding: 1.5rem 1.5rem 1.5rem 2rem;
    margin: 1rem 0;
    
    /* Flexbox für die Ausrichtung von Icon und Text */
    display: flex;
    align-items: center;
    gap: 1.5rem;
}

/* Ein Icon, das vor dem Text angezeigt wird */
.info-message.grid-span-full::before {
    content: '';
    display: block;
    margin-top: 3rem;
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    background-color: var(--primarfarbe-solid);
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    /* SVG-Icon für "Information" */
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M11 7h2v2h-2zm0 4h2v6h-2zm1-9C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M11 7h2v2h-2zm0 4h2v6h-2zm1-9C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8z'/%3E%3C/svg%3E");
}

/* Styling für den Text innerhalb der Meldung */
.info-message.grid-span-full p {
    margin: 0;
    font-size: 0.95rem;
    color: var(--primarfarbe-solid);
    font-weight: 500;
    line-height: 1.6;
}
/* --- Tabellen-Ansicht --- */
#wohnungs-liste {
    display: none; /* Wird von JS gesteuert */
    margin: 0 auto;
    width: 100%;
    max-width: 1200px;
    /* overflow-x: auto; bleibt als Fallback für sehr breite Inhalte wichtig */
    overflow-x: auto; 
}

#wohnungsTabelle {
    width: calc(100% - 2rem);
    margin: 1rem auto;
    border-collapse: collapse; /* Wir steuern Linien jetzt über 'border-bottom' */
    margin-top: 1rem;
    background-color: var(--white);
    color: var(--neutraldunklefarbe-solid);
    font-size: 0.95rem;
}

#wohnungsTabelle th {
    background-color: transparent; /* Kein Hintergrund mehr */
    color: var(--primarfarbe-solid);
    padding: 1rem 1.25rem;
    text-align: left;
    font-weight: 600; /* Etwas dicker als normal, aber nicht 'bold' */
    text-transform: uppercase;
    letter-spacing: 0.05em; /* Gibt den Buchstaben etwas Luft */
    border-bottom: 2px solid var(--primarfarbe-verylight); /* Starke, aber dezente untere Linie */
}

#wohnungsTabelle td {
    padding: 1rem 1.25rem;
    border: none; /* Alle Standard-Ränder entfernen */
    border-bottom: 1px solid var(--neutralhellefarbe); /* Sehr feine Linie zwischen den Zeilen */
    vertical-align: middle;
    color: var(--neutraldunklefarbe-semi);
}

#wohnungsTabelle tbody tr {
    transition: background-color 0.2s ease-in-out, transform 0.2s ease-in-out;
    cursor: pointer;
}
#wohnungsTabelle tbody tr:hover {
    background-color: var(--neutralhellefarbe);
    /* Leichter "Lift"-Effekt beim Hovern */
    position: relative;
    z-index: 10;
    transform: scale(1.015); 
    box-shadow: 0 8px 20px -5px var(--neutraldunklefarbe-verylight);
}

#wohnungsTabelle tbody tr:last-child td {
    border-bottom: none;
}


#wohnungsTabelle .details-button,
.grid-item .details-button {
    display: inline-block;
    background-color: var(--primarfarbe-semi);
    color: var(--white);
    padding: 0.3rem 0.75rem;
    margin: 0 auto; /* Zentriert den Button in der Zelle */
    border-radius: 20px; /* Abgerundete "Pill"-Form */
    text-decoration: none;
    font-size: 0.8em;
    font-weight: bold;
    white-space: nowrap;
    transition: background-color 0.2s, transform 0.2s;
}

#wohnungsTabelle .details-button:hover {
    background-color: var(--akzentfarbe-hover);
    transform: scale(1.05);
}

.table-icon-container {
    display: flex;
    align-items: center;
    gap: 0.75rem; /* Abstand zwischen den Icons */
}
#wohnungsTabelle .icons-flats-table {
    width: 24px;
    height: 24px;
    object-fit: contain;
    display: inline-block;
    vertical-align: middle;
}

.status-badge-table, .status-badge-grid {
    display: inline-block;
    padding: 0.3rem 0.75rem;
    border-radius: 20px;
    font-size: 0.8em;
    font-weight: bold;
    text-align: center;
    text-transform: uppercase;
    color: var(--white);
    min-width: 60px;
}
.status-badge-grid {
    z-index: 10;    /* Stellt sicher, dass der Badge über dem Bild liegt */
    font-size: 0.6em;
    margin: 0 auto;
    padding: 0.3rem 1rem;
}

.status-badge-table.status-frei,
.status-badge-grid.status-frei {
    background-color: var(--akzentfarbe-gruen);
}

.status-badge-table.status-reserviert,
.status-badge-grid.status-reserviert {
    background-color: var(--akzentfarbe-orange);
}

.status-badge-table.status-verkauft,
.status-badge-grid.status-verkauft {
    background-color: var(--akzentfarbe-rot);
}


/* --- RESPONSIVE ANPASSUNG (Karten-Layout auf kleinen Bildschirmen) --- */
@media (max-width: 800px) {
    /* Den normalen Tabellenkopf ausblenden */
    #wohnungsTabelle thead {
        display: none;
    }

    /* Jede Zelle und Zeile als eigenen Block behandeln */
    #wohnungsTabelle, #wohnungsTabelle tbody, #wohnungsTabelle tr, #wohnungsTabelle td {
        display: block;
        width: 100%;
    }

    /* Jede Zeile wird zu einer Karte */
    #wohnungsTabelle tr {
        margin-bottom: 1.5rem;
        border: 1px solid var(--neutralhellefarbe);
        border-radius: 8px;
        box-shadow: 0 4px 8px var(--neutraldunklefarbe-verylight);
        padding: 0.5rem 0; /* Innenabstand für die Karte */
    }
    
    #wohnungsTabelle tbody tr:hover {
        transform: translateY(-5px) scale(1.01); /* Angepasster Hover-Effekt für Karten */
    }

    /* Die Zellen innerhalb der Karte anordnen */
    #wohnungsTabelle td {
        display: flex; /* Flexbox für einfache Ausrichtung von Label und Wert */
        justify-content: space-between;
        align-items: center;
        padding: 0.75rem 1rem;
        border: none; /* Keine Linien innerhalb der Karte */
        text-align: right; /* Den Wert rechts ausrichten */
    }
    
    /* Die unterste Zelle soll keinen unteren Abstand haben */
    #wohnungsTabelle td:last-child {
       padding-bottom: 1rem;
    }

    /* Das ist die Magie: Das Label aus dem data-cell Attribut einfügen */
    #wohnungsTabelle td:before {
        content: attr(data-cell); /* Holt den Text aus z.B. data-cell="Top" */
        font-weight: 600;
        text-align: left;
        color: var(--neutraldunklefarbe-solid);
        padding-right: 1rem;
    }

    /* Spezielle Behandlung für den Details-Button, damit er mittig steht */
    #wohnungsTabelle td[data-cell="details"] {
        justify-content: center; /* Button zentrieren */
        padding-top: 1rem;
    }
    #wohnungsTabelle td[data-cell="details"]:before {
        display: none; /* Das "Details" Label hier ausblenden */
    }
}
/* --- Scroll-Buttons (einmalige, korrekte Definition) --- */
.scroll-buttons {
    display: none; /* Standardmäßig ausgeblendet, von JS gesteuert */
    justify-content: center;
    gap: 1rem;
    margin-top: 1rem;
}

.scroll-button {
    background-color: var(--primarfarbe-semi);
    color: var(--white);
    padding: 0.5rem 1rem;
    border-radius: 50%;
    border: none;
    cursor: pointer;
    font-size: 1.2rem;
    transition: background-color 0.2s, box-shadow 0.2s; /* Für sanfte Übergänge */
    box-shadow: 0 2px 6px var(--neutraldunklefarbe-verylight);
}

@media (max-width: 768px) {
    .scroll-button {
        font-size: 1.5rem;
        padding: 0.6rem 0.8rem;
    }
}

.scroll-button:not([disabled]):hover,
.scroll-button:not([disabled]):focus {
    background-color: var(--akzentfarbe-hover);
    outline: none;
}

.scroll-button.is-scrolling {
    background-color: var(--akzentfarbe-hover);
    box-shadow: 0 4px 8px var(--neutraldunklefarbe-light);
}

.scroll-button[disabled] {
    background-color: var(--neutraldunklefarbe-light);
    cursor: not-allowed;
    box-shadow: none;
}

.scroll-button[disabled]:hover {
    background-color: var(--neutraldunklefarbe-light);
}

.scroll-button.pressed {
    background-color: var(--akzentfarbe-hover);/* Standardmäßig ausgeblendet */
}

/* ==========================================================================
   KOMPLETTES STYLING FÜR DIE WOHNUNGS-DETAILSEITE
   ========================================================================== */

/* --- 1. Grund-Layout und Container --- */

.wohnung-detail-page {
    width: 100%;
    max-width: clamp(700px, 90%, calc(100vw - 15rem));
    margin: 2rem auto;
    padding: clamp(1rem, 4vw, 3rem); /* Responsive Innenabstand */
    background-color: var(--white);
}

.detail-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 1rem;
    border-bottom: 1px solid var(--neutralhellefarbe);
    padding-bottom: 1.5rem;
    margin-bottom: 2rem;
}

.detail-page-title {
    color: var(--primarfarbe-solid);
    font-size: clamp(1.8rem, 4vw, 2.5rem); /* Responsive Schriftgröße */
    margin: 0;
}

.back-link-container-top .back-to-overview-button {
    background-color: var(--neutralhellefarbe);
    color: var(--primarfarbe-solid);
    font-weight: 500;
    padding: 0.6rem 1.2rem;
    text-decoration: none;
    border-radius: 30px;
    transition: all 0.3s ease;
    border: 1px solid transparent;
}

.back-link-container-top .back-to-overview-button:hover,
.back-link-container-top .back-to-overview-button:active {
    background-color: var(--white);
    border-color: var(--primarfarbe-solid);
    box-shadow: 0 4px 10px var(--neutraldunklefarbe-verylight);
}

.back-link-container-top  {
margin-bottom: 0;

}

/* --- 2. Zweispaltiges Haupt-Layout --- */

.detail-layout-wrapper {
    display: flex;
    flex-wrap: wrap;
    gap: 3rem; /* Größerer Abstand für eine luftigere Optik */
    align-items: flex-start;
    margin-bottom: 3rem;
}

.detail-content { /* Linke Spalte */
    flex: 2.5; /* Hauptinhalt bekommt mehr Platz */
    min-width: 0; /* Wichtig für Flexbox-Wrapping */
}

.detail-sidebar { /* Rechte Spalte */
    flex: 1;
    min-width: 320px;
}

.sticky-box {
    position: -webkit-sticky;
    position: sticky;
    top: 2rem; /* Abstand vom oberen Rand beim Scrollen */
}

.detail-section {
    margin-bottom: 3rem;
    background-color:var(--white);
    padding: 1.5rem;
    border-radius: 8px;
    border: 1px solid var(--neutralhellefarbe);
    box-shadow: 0 8px 30px var(--neutraldunklefarbe-verylight);

}
.downloads-box {
    margin-top: 0rem;
}

/* --- Wohnung-Kosten (regelt die Div-Box Kosten-Block & Rechtliche Angaben */
.kosten-block {
    margin-bottom: 2rem;
}

.kosten-block h4 {
    margin-top: 0;
    margin-bottom: 0.5rem;
    font-weight: 600;
    color: var(--neutraldunklefarbe-solid);
}

.kosten-block p {
    font-size: 0.9rem;
    color: var(--neutraldunklefarbe-semi);
    line-height: 1.6;
    margin-bottom: 1.5rem;
}

.kosten-disclaimer{
    font-size: 0.8rem;color: var(--neutraldunklefarbe-semi);
    line-height: 1.6;
    margin-bottom: 1.5rem;
}


/* --- 3. Bildergalerie (Löst Bildgrößen- & Seitenverhältnis-Problem) --- */
#wohnung-galerie {
    text-align: center; /* Zentriert das inline-grid */
}

.gallery-hero {
    margin: 0 auto 1rem auto; 
    border-radius: 8px;
    overflow: hidden;
    max-width: 800px;
    max-height: 600px;
    min-height: 400px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #f5f5f5;
}

/* Custom Image Comparison Slider*/
.custom-img-comparison-slider {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 10;
    overflow: hidden;
    border-radius: 8px;
    cursor: col-resize;
    user-select: none;

}

.custom-img-comparison-slider img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: contain !important;
    object-position: center !important;
}

.custom-img-comparison-slider .after-image {
    clip-path: inset(0 0 0 50%);
}

.comparison-divider {
    position: absolute;
    top: 0;
    left: 50%;
    width: 3px;
    height: 100%;
    background: var(--white);
    z-index: 10;
    transform: translateX(-50%);
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
    pointer-events: none; /* Wichtig, damit der Klick durchfällt */
}

.comparison-handle {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 44px;
    height: 44px;
    background-color: var(--neutraldunklefarbe-light);
    border: 3px solid var(--primarfarbe-solid);
    border-radius: 50%;
    transform: translate(-50%, -50%);
    cursor: col-resize;
    z-index: 11;
    display: flex;
    align-items: center;
    justify-content: space-between; /* Verteilt die Pfeile */
    padding: 0 4px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.handle-arrows {
    font-family: monospace;
    font-size: 22px; /* Etwas größer für mehr Präsenz */
    font-weight: bold; /* Macht die Pfeile dicker */
    color: var(--white);
    text-shadow: 0 0 5px rgba(0,0,0,0.5);
}

.comparison-handle:hover {
    transform: translate(-50%, -50%) scale(1.1);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
}

.custom-img-comparison-slider.dragging .comparison-handle {
    transform: translate(-50%, -50%) scale(1.1);
    background: linear-gradient(45deg, var(--primarfarbe-solid), var(--primarfarbe-light));
    border-color: var(--white);
    box-shadow: 0 6px 20px rgba(0, 86, 179, 0.4);
}
              
.custom-img-comparison-slider:hover .comparison-divider {
    background: var(--primarfarbe-solid);
    width: 3px;
}

 .custom-img-comparison-slider.dragging {
            cursor: col-resize;
}

 .custom-img-comparison-slider.dragging .comparison-handle {
            transform: translate(-50%, -50%) scale(1.15);
            box-shadow: 0 8px 25px var(--primarfarbe-verylight);
}      

.custom-img-comparison-slider.dragging .comparison-divider {
    width: 5px;
    background: var(--primarfarbe-semi);
}

/* Responsive */
@media (max-width: 768px) {
    .comparison-handle {
        width: 44px;
        height: 44px;
    }
    
    .comparison-label {
        font-size: 12px;
        padding: 6px 12px;
        top: 15px;
    }
    
    .comparison-label.before-label {
        left: 15px;
    }
    
    .comparison-label.after-label {
        right: 15px;
    }
}

@media (max-width: 480px) {
    .comparison-handle {
        width: 40px;
        height: 40px;
    }
    
    .comparison-label {
        font-size: 11px;
        padding: 5px 10px;
        top: 12px;
    }
}

/* Loading Animation */
.custom-img-comparison-slider.loading::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 40px;
    height: 40px;
    border: 3px solid hsla(0, 0%, 95%, 0.5);
    border-top: 3px solid var(--primarfarbe-solid);
    border-radius: 50%;
    animation: spin 1s linear infinite;
    transform: translate(-50%, -50%);
    z-index: 20;
}

@keyframes spin {
    0% { transform: translate(-50%, -50%) rotate(0deg); }
    100% { transform: translate(-50%, -50%) rotate(360deg); }
}


/* 3. Ein normales Bild (Fallback) füllt den Container ebenfalls aus */
.gallery-hero .detail-main-image {
    width: 100%;
    height: 100%;
    object-fit: contain; /* Zeigt das komplette Bild ohne Beschneidung */
    object-position: center;
    max-height: 600px;
}


.detail-main-image {
    display: block;
    width: 100%;
    height: auto; /* Automatische Höhe basierend auf Seitenverhältnis */
    max-height: 600px;
    object-fit: contain; /* Behält Seitenverhältnis bei */
    object-position: center;
    transition: transform 0.4s ease;    
}


.gallery-hero a:hover .detail-main-image {
    transform: scale(1.05);
}

.gallery-thumbnails {
    display: grid;
    gap: 0.75rem;
    grid-template-columns: repeat(auto-fit, 90px);
    justify-content: center;  
    max-width: min(100%, 810px);
    /* Zentriert den gesamten Container, wenn er schmaler als die Inhaltsspalte ist. */
    margin: 0 auto;
}

.gallery-thumbnails > a{
    flex-basis: 90px;
    flex-shrink: 0;
    height: 90px;
}

.thumbnail-image {
    display: block;
    width: 100%;
    /* Quadratisches Seitenverhältnis für alle Thumbnails */
    aspect-ratio: 1 / 1;
    object-fit: cover; /* Stellt sicher, dass alle Thumbnails einheitlich aussehen */
    border-radius: 4px;
    cursor: pointer;
    border: 1px solid var(--neutraldunklefarbe-verylight);
    transition: all 0.3s ease;
}

.thumbnail-image:hover, .tour-thumbnail:hover {
    box-shadow: 0 0 0 2px var(--akzentfarbe-hover);
    transform: scale(1.03);
}

.tour-thumbnail {
    background-color: var(--primarfarbe-solid);
    color: var(--white);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    font-weight: bold;
    height: 100%; /* Nimmt die Höhe des Rasters ein */
}
.tour-thumbnail span { font-size: 1.5rem; }
.tour-thumbnail p { font-size: 0.7rem; margin: 0; line-height: 1.2; }



/* ===================================================== */
/* === diverse Bausparkassen Panner ==================== */
/* ===================================================== */

#finanzierungs-banner {
    margin-top: 3rem;
    margin-bottom: 3rem;
    padding: 0;
    border: none;
    box-shadow: none;
    background-color: transparent;
}

.financing-wrapper{    
    max-width: 1200px;
    margin: 3rem auto;
    padding: 0 1rem; 
    container-type: inline-size;
    container-name: financing-banner;
}
 
.financing-box {
    display: flex;
    align-items: center;
    background-color: var(--partner-purple);
    color: var(--white);
    border-radius: 12px;
    transition: all 0.3s ease-in-out;
    position: relative; /* Wichtig für die mobile Ansicht */
    overflow: hidden; /* Verhindert, dass Inhalte überstehen */
}
.financing-box {
    padding: 1.25rem 2rem;
    gap: 1.5rem;
}

.financing-icon {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    background-image: url('/images/sbau/icon-house-health-medical-4.svg');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

.financing-details {
    display: flex;
    align-items: center;
    flex-grow: 1;
    gap: 2rem;
}

.financing-logo {
    border-right: 1px solid var(--neutraldunklefarbe-light);
    padding-right: 2rem;
}
.financing-logo img { max-height: 35px; }

.financing-content {
    display: flex;
    align-items: center;
    text-align: center;
    white-space: nowrap;
    font-size: 1.2rem;
}
.financing-content > p {
    text-align: center;
    margin-bottom: 0;
}

.financing-content > p:not(:last-of-type)::after {
    content: '|';
    margin: 0 1rem; 
    opacity: 0.5;
}
.financing-content > p:is(:last-of-type)::after{
    content: ''; 
    margin-right: 1.5rem;
}

.financing-cta-button { 
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    line-height: 1.5rem;
    padding: 0.75rem 2rem;
    border-radius: 0.25rem;
    cursor: pointer;
    text-align: center;
    text-decoration: none;
    transition: all 0.25s ease;
    width: fit-content;
    align-self: center;
    background-color: var(--partner-orange);
    color: var(--white);
    border: .125rem solid var(--partner-orange);
 }


/* === 2. Zustand: Desktop Schmal (zwischen 1030px und 1080px) === */
@container (max-width: 1080px) {
    .financing-icon {
        display: none; /* Icon wird ausgeblendet */
    }
}

/* === 3. Zustand: Tablet (zwischen 750px und 1030px) === */
@container (max-width: 1030px) {
    .financing-box {
        padding: 1.5rem;
        gap: 2rem;
    }

    .financing-icon {
        display: block; /* Icon wird wieder eingeblendet */
        flex-basis: 120px; /* Nimmt eine feste Breite ein */
        height: 120px;
        flex-shrink: 0;
        /* Das Bild wird ausgetauscht */
        background-image: url('/images/sbau/box_wohnglueck-online_unterlagen.jpg');
        background-size: cover;
        border-radius: 8px;
    }

    .financing-details {
        flex-direction: column; /* Logo und Text stapeln sich vertikal */
        align-items: flex-start; /* Links ausrichten */
        gap: 1.5rem;
    }

    .financing-logo {
        border-right: none; /* Trennlinie entfernen */
        padding-right: 0;
    }
    .financing-logo img { max-height: 40px; }
}

/* === 4. Zustand: Mobil (< 1030px) === */
@container (max-width: 1030px) {
    .financing-box {
        padding: 0;
        min-height: 300px; /* Feste Mindesthöhe */
        align-items: flex-start; /* Inhalt oben ausrichten */
        text-align: center;
    }

    .financing-icon {
        /* Das Icon wird zum vollflächigen Hintergrundbild */
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: 1;
        opacity: 0.2; /* Leicht transparent */
        border-radius: 0;
    }

    .financing-details {
        /* Der Details-Container liegt über dem Hintergrundbild */
        position: relative;
        z-index: 2;
        width: 100%;
        padding: 2rem 1.5rem;
        align-items: center; /* Inhalt zentrieren */
        gap: 1.5rem;
      
    }

    .financing-logo {
        /* Logo wird als eigenständiges Element platziert */
        order: -1; /* Schiebt das Logo nach ganz oben */
        border-bottom: 1px solid var(--neutraldunklefarbe-verylight);
        padding-bottom: 1.5rem;
    }

    .financing-content {
        flex-direction: column;
        white-space: normal;
        gap: 0.75rem;
        font-size: 1.1rem;
    }
    
    .financing-content > p:not(:last-of-type)::after {
        display: none;
    }
}

/* Der Haupt-Container für den Banner */
.financing-box-v2 {
    display: flex;
    position: relative; /* Wichtig für die Positionierung des Logos */
    background-color: var(--partner-blau); /* Dunkelblau als Hintergrund */
    border-radius: 12px;
    overflow: hidden; /* Stellt sicher, dass die Ecken des Bildes rund sind */
    min-height: 400px;
}

/* Absolut positioniertes Logo oben links */
.financing-partner-logo-v2 {
    position: absolute;
    top: 1.5rem;
    left: 1.5rem;
    max-height: 35px; /* Etwas dezenter */
    width: auto;
    z-index: 10;
}

/* Linke Spalte: Text und CTA */
.financing-content-v2 {
    flex: 1.2; /* Nimmt etwas mehr als die Hälfte des Platzes ein */
    padding: 3rem;
    padding-left: 1.5rem; /* Der Abstand ist bereits durch Logo vorgegeben */
    display: flex;
    flex-direction: column;
    justify-content: center;
    color: var(--white);
    /* Platz für das Logo schaffen */
    margin-top: 3rem; 
}

.financing-content-v2 h3 {
    font-size: clamp(1.5rem, 4vw, 2.2rem);
    margin: 0 0 1rem 0;
    font-weight: 600;
    color: var(--white);
}

.financing-content-v2 p {
    margin: 1.5rem auto 1.0rem auto;
    opacity: 0.9;
    line-height: 1.6;
    color: var(--white);
    max-width: 75ch;
    font-size: 0.95rem; /* <-- GEÄNDERT */
}

.financing-disclaimer-v2 {
    font-size: 0.6rem; /* <-- NEU */
    opacity: 0.7;      /* <-- NEU: Etwas transparenter für "Kleingedrucktes" */
    margin-top: -1.5rem; /* <-- NEU: Rückt näher an den Haupttext */
    margin-bottom: 2.5rem;
}

/* Rechte Spalte: Bild */
.financing-image-v2 {
    flex: 1;
    display: flex;
}

.financing-image-v2 img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    /* Rundet nur die rechten Ecken ab, passend zum Container */
    border-radius: 0 10px 10px 0; 
}

/* --- Responsive Anpassungen --- */
@media (max-width: 1450px) {
    .financing-box-v2 {
        flex-direction: column;
    }
    
    .financing-image-v2 {
        width: 100%;
        height: 250px; /* Feste Höhe für das Bild auf Mobilgeräten */
        order: -1; /* Schiebt das Bild nach oben */
    }

    .financing-image-v2 img {
        /* Oben rund, unten eckig */
        border-radius: 10px 10px 0 0;
    }

    .financing-content-v2 {
        padding: 2rem 1.5rem;
        margin-top: 0rem;
        text-align: center;
    }

    .financing-cta-button-v2 {
        margin: 0 auto; /* Zentriert den Button */
    }
}

.financing-cta-button {
    /* Basis-Stile, inspiriert von Ihrer .btn Klasse */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    line-height: 1.5rem;
    padding: 0.75rem 2rem; /* Etwas größer für mehr Wirkung */
    border-radius: 0.25rem;
    cursor: pointer;
    text-align: center;
    text-decoration: none;
    transition: background-color 0.25s, transform 0.2s, box-shadow 0.25s;

    /* Spezifische Farben für den CTA */
    background-color: var(--partner-orange);
    color: var(--white);
    border: .125rem solid transparent; /* Transparenter Rand für konsistente Größe */
}

.financing-cta-button:hover {
    background-color: var(--partner-orange-hover);
    color: var(--white);
    border-color: var(--partner-orange-hover);
}
/* Dekorative Bilder im Hintergrund */
.financing-image-left, .financing-image-right {
    position: absolute;
    top: 0;
    height: 100%;
    opacity: 0.1;
    z-index: 1;
}
.financing-image-left { left: 0; }
.financing-image-right { right: 0; }

.financing-image-left img, .financing-image-right img {
    height: 100%;
    width: auto;
    object-fit: cover;
}

/* Responsivität für den Banner */
@media (max-width: 768px) {
    .financing-box {
        flex-direction: column;
        padding: 2rem 1.5rem;
    }
    .financing-image-left, .financing-image-right {
        display: none; /* Bilder auf kleinen Bildschirmen ausblenden, um Platz zu sparen */
    }
}

/* --- 4. Info-Box in der Sidebar (Löst Textlesbarkeit-Problem) --- */
.detail-card {
    display: flex;
    flex-direction: column;
    background-color: var(--white);
    padding: 1.5rem;
    border-radius: 8px;
    border: 1px solid var(--neutralhellefarbe);
    box-shadow: 0 8px 30px var(--neutraldunklefarbe-light);
    margin-top: 2rem;
}


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

.status-badge {
    display: inline-block;
    margin-bottom: 1.5rem;
    padding: 0.4rem 0.8rem;
    border-radius: 20px;
    font-size: 0.8em;
    font-weight: bold;
    color: var(--white);
    text-transform: uppercase;
    align-self: flex-end;
}
.status-verfuegbar, .status-frei { background-color: var(--akzentfarbe-gruen); }
.status-reserviert { background-color: var(--akzentfarbe-orange); }
.status-verkauft, .status-vergeben { background-color: var(--akzentfarbe-rot);}

.info-box-title, .detail-section-title {
    color: var(--primarfarbe-solid);
    margin-top: 0;
    margin-bottom: 1rem;
    font-size: 1rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    border-bottom: 1px solid var(--neutralhellefarbe);
    padding-bottom: 0.75rem;
}
.info-box-title:not(:first-of-type) {
    margin-top: 2rem;
}

.detail-info-list {
    list-style: none;
    padding: 0;
    margin: 0;
    font-size: 0.95rem;
}

.detail-info-list li {
    display: flex;
    justify-content: space-between;
    text-align: end;
    padding: 0.8rem 0.5rem;
    border-bottom: 1px solid var(--neutralhellefarbe);
}
.detail-info-list li:last-child {
    border-bottom: none;
}

.info-label {
    color: var(--neutraldunklefarbe-semi);
}
.info-wert {
    font-weight: 500;
    color: var(--neutraldunklefarbe-solid);
}

.detail-kaufpreis-wrapper {
    margin-top: 1.5rem;
    padding: 1.5rem;
    background-color: var(--neutralhellefarbe);
    border-radius: 4px;
    text-align: center;
}
.detail-kaufpreis-wrapper .info-label {
    font-size: 0.9rem;
    display: block;
    margin-bottom: 0.25rem;
}
.detail-kaufpreis {
    font-size: 1.8rem;
    font-weight: bold;
    color: var(--primarfarbe-solid);
    display: block;
}
.rechner-trigger-container 
{
    margin-top: 1.5rem;
    text-align: center;
}

/* Vorher/Nachher Slider Anpassung */
img-comparison-slider {
   width: 100%;
    height: 100%; /* Passt sich an die max-height des .gallery-hero Containers an */
    aspect-ratio: 16 / 10;
    border-radius: 8px;
    overflow: hidden;
    cursor: col-resize;
    
    /* NEU: Styling des Sliders über CSS-Variablen */
    --divider-width: 5px; /* Macht die Linie dicker */
    --divider-color: var(--neutraldunklefarbe-light); /* Nutzt Ihr auffälliges Orange */
}

img-comparison-slider::part(handle) {
    /* Filter, um die Standard-Pfeile im Griff weiß zu machen */
    width: 50px;
    height: 50px;
    background-color: var(--partner-orange);
    border: 3px solid var(--white);
    color: var(--white); 
    /* Schatten für einen 3D-Effekt */
    box-shadow: 0 0 15px var(--neutraldunklefarbe-semi);
}

img-comparison-slider::part(handle):active + ::part(divider) {
    width: 6px;
}

/* Lageplan */
.lageplan-image {
    width: 100%;
    height: auto;
    border-radius: 8px;
    border: 1px solid var(--neutralhellefarbe);
}

.project-marker {
    background-color: var(--partner-orange);
    color: var(--white);
    border-radius: 50%;
    text-align: center;
    line-height: 30px;
    font-size: 20px;
    border: 2px solid var(--white);
    box-shadow: 0 0 10px var(--neutraldunklefarbe-semi);
}
/* --- Stile für die interaktive Lage-Sektion --- */
.leaflet-marker-icon > span{
    margin: 0;
    padding: 0;
}

.lage-wrapper {
    display: flex;
    flex-wrap: wrap;
    gap: 2rem;
}

#interactive-map-container {
    flex: 2; /* Karte nimmt mehr Platz ein */
    border-radius: 8px;
      overflow: hidden;
    border: 1px solid var(--neutralhellefarbe);
}

#interactive-map {
    width: 100%;
    height: 100%;
}

.poi-list-container {
    flex: 1;
    min-width: 250px;
    min-height: 800px;
}

.poi-list-container h4 {
    margin-top: 0;
    color: var(--neutraldunklefarbe-solid);
}

.poi-list {
   list-style: none;
   padding: 0;
   margin: 0;
   transition: all 0.3s ease;
   overflow: hidden;
}

.poi-list li {
   display: flex;
   align-items: center;
   justify-content: space-between;
   padding: 0.5rem;
   font-size: 0.9rem;
   cursor: pointer;
   transition: all 0.2s ease;
   border-radius: 4px;
}

.poi-list li:hover {
    background-color: var(--neutralhellefarbe);
}

.poi-name { 
    flex-grow: 1;
}

.poi-distance {
    font-weight: 600;
    color: var(--primarfarbe-solid);
    white-space: nowrap;
    margin-left: 1rem;
}

.poi-icon {
    display: inline-block;
    width: 24px;
    height: 24px;
    margin-right: 1rem;
    background-color: var(--primarfarbe-solid);
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
}

/* eindeutige Icons */
.poi-icon-einkaufen { background-color: var(--sekundarfarbe-solid); -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M18 6h-2c0-2.21-1.79-4-4-4S8 3.79 8 6H6c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2V8c0-1.1-.9-2-2-2zm-6-2c1.1 0 2 .9 2 2h-4c0-1.1.9-2 2-2zm6 16H6V8h2v2c0 .55.45 1 1 1s1-.45 1-1V8h4v2c0 .55.45 1 1 1s1-.45 1-1V8h2v12z'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M18 6h-2c0-2.21-1.79-4-4-4S8 3.79 8 6H6c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2V8c0-1.1-.9-2-2-2zm-6-2c1.1 0 2 .9 2 2h-4c0-1.1.9-2 2-2zm6 16H6V8h2v2c0 .55.45 1 1 1s1-.45 1-1V8h4v2c0 .55.45 1 1 1s1-.45 1-1V8h2v12z'/%3E%3C/svg%3E"); }
.poi-icon-bildung { background-color: var(--neutraldunklefarbe-solid); -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 3L1 9l11 6 9-4.91V17h2V9L12 3z'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 13.18v4L12 21l7-3.82v-4L12 17l-7-3.82zM12 3L1 9l11 6 9-4.91V17h2V9L12 3z'/%3E%3C/svg%3E"); }
.poi-icon-gesundheit { background-color: var(--akzentfarbe-rot); -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M19 3H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm-1 11h-4v4h-4v-4H6v-4h4V6h4v4h4v4z'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M19 3H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm-1 11h-4v4h-4v-4H6v-4h4V6h4v4h4v4z'/%3E%3C/svg%3E"); }
.poi-icon-verkehr { background-color: var(--primarfarbe-solid); -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2c-4 0-8 .5-8 4v10c0 .89.39 1.68 1 2.23V20c0 .55.45 1 1 1h1c.55 0 1-.45 1-1v-1h8v1c0 .55.45 1 1 1h1c.55 0 1-.45 1-1v-1.77c.61-.55 1-1.34 1-2.23V6c0-3.5-4-4-8-4zM8 15c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2zm8 0c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2zM18 8H6V6h12v2z'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2c-4 0-8 .5-8 4v10c0 .89.39 1.68 1 2.23V20c0 .55.45 1 1 1h1c.55 0 1-.45 1-1v-1h8v1c0 .55.45 1 1 1h1c.55 0 1-.45 1-1v-1.77c.61-.55 1-1.34 1-2.23V6c0-3.5-4-4-8-4zM8 15c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2zm8 0c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2zM18 8H6V6h12v2z'/%3E%3C/svg%3E");}
.poi-icon-finanzen { background-color: var(--primarfarbe-semi); -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 10h3v7H4zM10.5 10h3v7h-3zM2 19h20v2H2zM17 10h3v7h-3zM12 1L2 6v2h20V6z'/%3E%3C/svg%3E");mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 10h3v7H4zM10.5 10h3v7h-3zM2 19h20v2H2zM17 10h3v7h-3zM12 1L2 6v2h20V6z'/%3E%3C/svg%3E");}
.poi-icon-familie { background-color: var(--partner-orange);-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M16 11c1.66 0 2.99-1.34 2.99-3S17.66 5 16 5c-1.66 0-3 1.34-3 3s1.34 3 3 3zm-8 0c1.66 0 2.99-1.34 2.99-3S9.66 5 8 5C6.34 5 5 6.34 5 8s1.34 3 3 3zm0 2c-2.33 0-7 1.17-7 3.5V19h14v-2.5c0-2.33-4.67-3.5-7-3.5zm8 0c-.29 0-.62.02-.97.05 1.16.84 1.97 1.97 1.97 3.45V19h6v-2.5c0-2.33-4.67-3.5-7-3.5z'/%3E%3C/svg%3E");mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M16 11c1.66 0 2.99-1.34 2.99-3S17.66 5 16 5c-1.66 0-3 1.34-3 3s1.34 3 3 3zm-8 0c1.66 0 2.99-1.34 2.99-3S9.66 5 8 5C6.34 5 5 6.34 5 8s1.34 3 3 3zm0 2c-2.33 0-7 1.17-7 3.5V19h14v-2.5c0-2.33-4.67-3.5-7-3.5zm8 0c-.29 0-.62.02-.97.05 1.16.84 1.97 1.97 1.97 3.45V19h6v-2.5c0-2.33-4.67-3.5-7-3.5z'/%3E%3C/svg%3E");}
.poi-icon-gastronomie { background-color: var(--akzentfarbe);-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3E%3Cpath d='M23,19l-3.328-3.232C19.239,15.273,19,14.637,19,13.98V12c0-4.945,3.157-9.535,3.157-9.535L23,2.999V19z'/%3E%3Ccircle cx='23' cy='3' r='1'/%3E%3Cpath d='M24,3h-2l-1,10v13.5c0,0.828,0.672,1.5,1.5,1.5h0c0.828,0,1.5-0.672,1.5-1.5V3z'/%3E%3Cpath d='M13.087,2.445C13.037,2.186,12.811,2,12.548,2C12.245,2,12,2.245,12,2.548v5.807C12,8.711,11.711,9,11.355,9 c-0.329,0-0.605-0.247-0.641-0.574l-0.66-5.939C10.023,2.21,9.789,2,9.509,2H9.5H9.491C9.211,2,8.977,2.21,8.946,2.488l-0.66,5.939 C8.25,8.753,7.974,9,7.645,9C7.289,9,7,8.711,7,8.355V2.548C7,2.245,6.755,2,6.452,2C6.189,2,5.963,2.186,5.913,2.445 C5.671,3.713,5,7.362,5,9c0,4,3,5,3,5v12.5C8,27.328,8.672,28,9.5,28s1.5-0.672,1.5-1.5V14c0,0,3-1,3-5 C14,7.362,13.329,3.713,13.087,2.445z'/%3E%3C/svg%3E");mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3E%3Cpath d='M23,19l-3.328-3.232C19.239,15.273,19,14.637,19,13.98V12c0-4.945,3.157-9.535,3.157-9.535L23,2.999V19z'/%3E%3Ccircle cx='23' cy='3' r='1'/%3E%3Cpath d='M24,3h-2l-1,10v13.5c0,0.828,0.672,1.5,1.5,1.5h0c0.828,0,1.5-0.672,1.5-1.5V3z'/%3E%3Cpath d='M13.087,2.445C13.037,2.186,12.811,2,12.548,2C12.245,2,12,2.245,12,2.548v5.807C12,8.711,11.711,9,11.355,9 c-0.329,0-0.605-0.247-0.641-0.574l-0.66-5.939C10.023,2.21,9.789,2,9.509,2H9.5H9.491C9.211,2,8.977,2.21,8.946,2.488l-0.66,5.939 C8.25,8.753,7.974,9,7.645,9C7.289,9,7,8.711,7,8.355V2.548C7,2.245,6.755,2,6.452,2C6.189,2,5.963,2.186,5.913,2.445 C5.671,3.713,5,7.362,5,9c0,4,3,5,3,5v12.5C8,27.328,8.672,28,9.5,28s1.5-0.672,1.5-1.5V14c0,0,3-1,3-5 C14,7.362,13.329,3.713,13.087,2.445z'/%3E%3C/svg%3E");}
.poi-icon-freizeit { background-color: var(--akzentfarbe-hover);-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M11.5 12.5c0-3.04 2.46-5.5 5.5-5.5s5.5 2.46 5.5 5.5-2.46 5.5-5.5 5.5-5.5-2.46-5.5-5.5zm8.95-3.55c-.2-.3-.5-.5-.85-.5s-.65.2-.85.5-.2.65 0 1 .5.5.85.5.65-.2.85-.5.2-.65 0-1zm-4.7 6.4c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm-7.4-4.25L5.5 15l-3-4 6-5.5 4.5 4.25-2.1 2.1z'/%3E%3C/svg%3E");mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M11.5 12.5c0-3.04 2.46-5.5 5.5-5.5s5.5 2.46 5.5 5.5-2.46 5.5-5.5 5.5-5.5-2.46-5.5-5.5zm8.95-3.55c-.2-.3-.5-.5-.85-.5s-.65.2-.85.5-.2.65 0 1 .5.5.85.5.65-.2.85-.5.2-.65 0-1zm-4.7 6.4c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm-7.4-4.25L5.5 15l-3-4 6-5.5 4.5 4.25-2.1 2.1z'/%3E%3C/svg%3E");}
.poi-icon-ort { background-color: var(--neutraldunklefarbe-solid);-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2C8.13 2 5 5.13 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-3.87-3.13-7-7-7zm0 9.5c-1.38 0-2.5-1.12-2.5-2.5s1.12-2.5 2.5-2.5 2.5 1.12 2.5 2.5-1.12 2.5-2.5 2.5z'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2C8.13 2 5 5.13 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-3.87-3.13-7-7-7zm0 9.5c-1.38 0-2.5-1.12-2.5-2.5s1.12-2.5 2.5-2.5 2.5 1.12 2.5 2.5-1.12 2.5-2.5 2.5z'/%3E%3C/svg%3E");}
.poi-icon-projekt { background-color: var(--primarfarbe-solid);-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z'/%3E%3C/svg%3E");mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z'/%3E%3C/svg%3E");}


/* Farbespezifische Marker-Klassen */
.poi-marker-verkehr, .poi-marker-einkaufen, .poi-marker-gesundheit, .poi-marker-finanzen, .poi-marker-familie, .poi-marker-bildung, .poi-marker-freizeit, .poi-marker-gastronomie, .poi-marker-ort, .poi-marker-projekt {
   color: var(--white);
   border-radius: 50%;
   text-align: center;
   line-height: 30px;
   font-size: 20px;
   border: 2px solid var(--white);
   box-shadow: 0 0 10px var(--neutraldunklefarbe-semi);
}

.poi-marker-verkehr { background-color: var(--primarfarbe-solid); }
.poi-marker-einkaufen { background-color: var(--sekundarfarbe-solid); }
.poi-marker-gesundheit { background-color: var(--akzentfarbe-rot); }
.poi-marker-finanzen { background-color: var(--primarfarbe-semi); }
.poi-marker-familie { background-color: var(--partner-orange); }
.poi-marker-bildung { background-color: var(--neutraldunklefarbe-solid); }
.poi-marker-freizeit { background-color: var(--akzentfarbe-hover); }
.poi-marker-gastronomie { background-color: var(--akzentfarbe); }
.poi-marker-ort { background-color: var(--neutraldunklefarbe-solid);}
.poi-marker-projekt {background-color: var(--partner-orange);}

/* Optional: Spezielle Styling für große Distanzen */
.poi-list li[data-poi-name*="München"],
.poi-list li[data-poi-name*="Salzburg"],
.poi-list li[data-poi-name*="Innsbruck"] {
    opacity: 0.8;
    font-size: 0.85rem;
}

.poi-list li[data-poi-name*="München"] .poi-distance,
.poi-list li[data-poi-name*="Salzburg"] .poi-distance,
.poi-list li[data-poi-name*="Innsbruck"] .poi-distance {
    color: var(--neutraldunklefarbe-solid);
    font-weight: 500;
}

/* Accordion Styles */
.accordion-section {
   margin-bottom: 1rem;
}

.accordion-header {
   cursor: pointer;
   font-weight: bold;
   background-color: var(--neutralhellefarbe);
   padding: 0.5rem;
   border-radius: 4px;
   display: flex;
   align-items: center;
   transition: background-color 0.2s ease;
}

.accordion-header:hover {
   background-color: var(--primarfarbe-light);
}

.accordion-header .poi-count {
    font-size: 0.9em;
    opacity: 0.7;
    margin-left: 0.5rem;
}

.accordion-toggle {
   margin-right: 0.5rem;
   font-weight: bold;
}

.poi-list li.hover {
   background-color: var(--neutralhellefarbe);
   font-weight: 500;
}

.poi-list li.active {
   background-color: var(--primarfarbe-light);
   color: var(--white);
}

/* Responsive Anpassungen */
@media (max-width: 768px) {
   .poi-list-container {
       min-width: 100%;
       height: auto;
       max-height: 400px;
       overflow-y: auto;
   }
   
   .interactive-map-container {
       min-height: 300px;
   }
   .poi-list li {
        font-size: 0.8rem;
        padding: 0.4rem;
    }
    
    .poi-icon {
        width: 20px;
        height: 20px;
        margin-right: 0.75rem;
    }
}
/* Dokumenten-Liste */
.document-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.document-list li {
    display: flex;
    align-items: center;
    background-color: var(--neutralhellefarbe);
    border-radius: 8px;
    transition: all 0.3s ease;
    box-shadow: 0 4px 10px var(--neutraldunklefarbe-verylight);
}
.document-list li:hover {
    background-color: var(--white);
    transform: translateY(-3px);
    box-shadow: 0 6px 15px var(--neutraldunklefarbe-verylight);
}

.document-link {
    flex-grow: 1;
    display: flex;
    align-items: center;
    padding: 1rem 0 1rem 1.5rem;
    text-decoration: none;
    color: var(--neutraldunklefarbe-solid);
    cursor: pointer;
     min-width: 0
}
.document-list li:hover .document-link {
    color: var(--primarfarbe-solid);
}

.doc-icon {
    display: inline-block;
    width: 24px;
    height: 24px;
    margin-right: 1rem;
    flex-shrink: 0;
    /* PDF-Icon via SVG als Background-Image */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23333'%3E%3Cpath d='M14 2H6c-1.1 0-2 .9-2 2v16c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2V8l-6-6zM6 20V4h7v5h5v11H6z'/%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
}

.doc-title {
    flex-grow: 1; /* Nimmt den restlichen Platz ein */
    font-weight: 500;
    white-space: nowrap;      /* Verhindert den Umbruch auf mehrere Zeilen */
    overflow: hidden;         /* Schneidet den Text ab, der nicht mehr passt */
    text-overflow: ellipsis;  /* fügt die ... am Ende hinzu */
}

.doc-action-icon {
    padding: 0 1.5rem 0 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.doc-action-icon svg {
    fill: var(--akzentfarbe); /* Nutzt Ihre Akzentfarbe */
    transition: all 0.3s ease;
}

.doc-action-icon:hover svg {
    fill: var(--akzentfarbe-hover); /* Farbe ändert sich beim Hovern */
    transform: scale(1.1);
}
.cta-buttons-wrapper {
    display: flex;
    gap: 1rem;    /* vertikal */

    flex-wrap: wrap;
}

.cta-container {
    margin: 1.5rem auto 0 auto;
}
.cta-button, .cta-button-secondary {
    display: inline-block;
    cursor: pointer;
    width: 100%;
    max-width: 30ch;
    background-color: var(--akzentfarbe);
    color: var(--white);
    padding: 1rem;
    text-decoration: none;
    border-radius: 5px;
    font-size: 1.1rem;
    font-weight: bold;
    text-align: center;
    transition: all 0.3s ease;
}
.cta-button:hover {
    background-color: var(--akzentfarbe-hover);
    color: var(--white);
    box-shadow: 0 4px 15px var(--neutraldunklefarbe-light2);
}

.cta-button-secondary {
    background-color: var(--primarfarbe-semi);
    color: var(--neutralhellefarbe);
    cursor: pointer;
}

.cta-button-secondary:hover {
    background-color: var(--primarfarbe-solid);
    color: var(--neutralhellefarbe);
    box-shadow: 0 4px 15px var(--neutraldunklefarbe-verylight);
}
/* --- 5. Beschreibungstext --- */



.description-content {
    line-height: 1.8; /* WICHTIG für Lesbarkeit */
    color: var(--neutraldunklefarbe-solid);
    max-width: 95%; /* Limitiert die Zeilenlänge für bessere Lesbarkeit */
    padding: 0 0.25rem;
}

.description-content h3 {
    margin-bottom: 0.15rem;
    color: var(--primarfarbe-solid);
}

.description-content h3 + p {
    font-size: 0.85rem;
    color: var(neutraledunklefarbe-semi);
    margin-bottom: 2.5rem; /* Abstand zwischen Absätzen */
}
.description-content h4 {
    margin-bottom: 1.5rem; /* Abstand zwischen Absätzen */
    font-size: clamp(1.36rem, 3.4vw + 0.88rem, 1.65rem);
    color: var(--neutraldunklefarbe-solid);
}
.description-content p {
    margin-bottom: 2.0rem; /* Abstand zwischen Absätzen */
    line-height : 1.6;
    font-size: clamp(0.9rem, 2.4vw + 0.6rem, 1.1rem);
    color: var(--neutraldunklefarbe-solid);
}
.description-content ul {
    margin: 0 0 3.5rem 1.5rem; /* Abstand zum vorherigen Element */
    padding-left: 1.5rem; /* Einrückung für die Liste */
    list-style-type: disc; /* Standard Aufzählungszeichen */
}
.description-content ul li {
    margin-bottom: 0.5rem; /* Abstand zwischen Listenelementen */
    font-size: clamp(0.9rem, 2.4vw + 0.6rem, 1.1rem);
    color: var(--neutraldunklefarbe-solid);
}


/* --- 6. Responsive Anpassungen --- */
@media (max-width: 1200px) {
    .detail-layout-wrapper {
        flex-direction: column;
    }
    .detail-sidebar {
        width: 100%;
        min-width: 100%;
        flex: 1;
    }
    /* Sticky-Position aufheben, wenn die Spalten untereinander stehen */
    .sticky-box {
        position: static;
    }
}
/* --- Stil für Projektübersicht (projects.php) --- */
.projects {
    display: grid;
    grid-template-columns: 1fr;
    text-align: center;
    align-items: center;
    justify-content: center;
    gap: 0;
}

@media (min-width: 500px) {
    .projects {
        grid-template-columns: 1fr 1fr;
        gap: 1.5rem;
    }
}


/* --- CUSTOM LIGHTBOX STILE --- */

.custom-lightbox-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(15, 23, 42, 0.6);
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

.custom-lightbox-overlay.visible {
    opacity: 1;
    visibility: visible;
}

.custom-lightbox-content {
    position: relative;
    max-width: 90vw;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
#lightbox-media-container {
    width: 90vw;
    height: 85vh;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Das Bild passt sich dem Rahmen an, ohne sich zu verzerren */
.custom-lightbox-content img {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain; /* Wichtigste Eigenschaft: Skaliert das Bild passend */
}

/* Die Regel für den iframe bleibt davon unberührt */
.custom-lightbox-content iframe {
    width: 85vw;
    height: 85vh;
    border: none;
    background: #000;
    overflow-y: auto; 
    position: relative;
}


.lightbox-close, .lightbox-nav {
    position: absolute;
    cursor: pointer;
    color: var(--white);
    background: var(--neutraldunklefarbe-light2);
    border: none;
    font-size: 2rem;
    font-weight: bold;
    padding: 0.5rem 1rem;
    transition: background-color 0.2s;
}
.lightbox-close:hover, .lightbox-nav:hover {
    background: var(--neutraldunklefarbe-semi);
}

.lightbox-close {
    top: -10px;
    right: -10px;
    border-radius: 50%;
    line-height: 1;
    padding: 0.5rem 0.8rem;
}

.lightbox-nav.prev {
    left: -50px;
}
.lightbox-nav.next {
    right: -50px;
}

.lightbox-counter {
    color: var(--neutralhellefarbe);
    margin-top: 0.5rem;
    font-size: 0.9rem;
}
#lightbox-media-container.has-scrollable-content { 
    align-items: flex-start; /* WICHTIG: Richtet den Inhalt oben aus, statt ihn zu zentrieren */
    max-height: 85vh;/* Setzt eine maximale Höhe */
    overflow-y: auto;/* Macht den Container scrollbar */
}


/* Der innere Wrapper (.wizard-container) für den Text */
#lightbox-media-container.has-scrollable-content .wizard-container {
    width: 100%;
    padding: 2rem 3rem;
}

/* Optional: Styling der Scrollbar für die neue Klasse */
#lightbox-media-container.has-scrollable-content::-webkit-scrollbar {
    width: 8px;
}
#lightbox-media-container.has-scrollable-content::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 0 8px 8px 0;
}
#lightbox-media-container.has-scrollable-content::-webkit-scrollbar-thumb {
    background: #ccc;
    border-radius: 10px;
}

/**
Projekt-Seite
*/
.projects > img {
    height: auto;
    max-height: 500px;
    width: 100%;
    object-fit: cover;
}

.projects-grid, .gallery-grid {
    display: grid;
    gap: var(--space-lg);
    margin-top: var(--space-lg);
    justify-content: center;
    align-items: stretch;
}

.projects-grid {
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}

.gallery-grid {
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: var(--space-md);
}

.project-item {
    background-color: var(--white);
    box-shadow: 0 4px 8px var(--neutraldunklefarbe-verylight);
    border-radius: 8px;
    overflow: hidden;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    display: flex;
    flex-direction: column;
}

.project-item:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 16px var(--neutraldunklefarbe-light);
}

.project-link {
    display: block;
    text-decoration: none;
    color: var(--neutraldunklefarbe-solid);
    height: 100%;
}

.project-image-wrapper {
    position: relative;
    width: 100%;
    padding-top: 60%; /* Seitenverhältnis 5:3 */
    overflow: hidden;
}

.project-main-image,
.project-placeholder-image,
.project-main-image-detail,
.project-placeholder-image-detail,
.gallery-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
    border-radius: 4px;
    border: 1px solid var(--neutraldunklefarbe-verylight);
}

.gallery-image {
    position: static;
    height: 150px;
    max-width: 100%;
}

.gallery-image:hover {
    transform: scale(1.03);
    box-shadow: 0 4px 10px var(--neutraldunklefarbe-light);
}

.project-item:hover .project-main-image {
    transform: scale(1.05);
}

.project-placeholder-image, .project-placeholder-image-detail {
    background-color: var(--neutraldunklefarbe-verylight);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--neutraldunklefarbe-light);
    font-style: italic;
    font-size: 1.2rem;
}

.project-placeholder-image-detail {
    height: 250px;
    position: static;
    flex: 1 1 400px;
}

.project-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    background: linear-gradient(to top, var(--neutraldunklefarbe-semi) 0%, var(--neutraldunklefarbe-solid) 100%);
    color: var(--white);
    padding: var(--space-md);
    transform: translateY(100%);
    transition: transform 0.3s ease;
}

.project-item:hover .project-overlay {
    transform: translateY(0);
}

.project-overlay h3 {
    margin: 0 0 0.var(--space-xs) 0;
    font-size: 1.3rem;
    color: var(--white);
}

.project-overlay p {
    font-size: 0.9rem;
    margin: 0 0 0.var(--space-sm) 0;
    color: var(--neutralhellefarbe);
    line-height: 1.5;
    opacity: 0.9;
}

.project-details-button {
    background-color: var(--akzentfarbe);
    color: var(--white);
    padding: 0.5rem 1rem;
    border-radius: 4px;
    font-size: 0.85rem;
    font-weight: bold;
    text-decoration: none;
    transition: background-color 0.3s ease;
}

.project-details-button:hover {
    background-color: var(--akzentfarbe-hover);
}

/* --- Stil für Projekt Detail Seite --- */

.project-detail {
    max-width: 960px;
    margin: 0 auto;
    padding: var(--space-lg);
    background-color: var(--white);
    box-shadow: 0 4px 8px var(--neutraldunklefarbe-verylight);
    border-radius: 8px;
}

.project-detail-title {
    text-align: center;
    margin-bottom: var(--space-lg);
    color: var(--primarfarbe-solid);
    font-size: clamp(1.8rem, 4.5vw + 1rem, 2.5rem);
}

.project-detail-main-info {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-xl);
    margin-bottom: var(--space-lg);
    align-items: flex-start;
}

.project-main-image-detail {
    flex: 1 1 400px;
    height: auto;
    position: static;
}

.project-detail-meta {
    flex: 1 1 300px;
    padding: var(--space-sm);
    background-color: var(--neutralhellefarbe);
    border-radius: 4px;
}

.project-detail-meta h3 {
    margin-top: 0;
    margin-bottom: var(--space-md);
    color: var(--neutraldunklefarbe-solid);
    border-bottom: 1px solid var(--neutraldunklefarbe-verylight);
    padding-bottom: var(--space-xs);
}

.project-detail-meta .detail-info-list {
    line-height: 1.6;
}

.project-detail-description {
    margin-top: var(--space-lg);
    margin-bottom: var(--space-lg);
}

.project-detail-description .detail-section-title {
    border-top: 1px solid var(--neutraldunklefarbe-verylight);
    padding-top: var(--space-md);
    margin-top: var(--space-md);
}

.project-detail-gallery {
    margin-top: var(--space-lg);
    margin-bottom: var(--space-lg);
}

.project-detail-gallery .detail-section-title {
    margin-bottom: var(--space-lg);
    padding-top: var(--space-md);
    border-top: 1px solid var(--neutraldunklefarbe-verylight);
}


/* =======================================================
STYLING FÜR DEN LEGAL BLOCK (AGB/Impressum)
======================================================= */

/* Haupt-Container für Impressum, AGB, Datenschutz und FAQ */
.legal-content,
.faq-content {
    margin: 2rem auto 0 auto;
    text-align: left;
    font-size: 1rem;
}

.legal-intro,
.faq-intro {
    font-size: 1.1rem;
    line-height: 1.7;
    margin-bottom: 3rem;
    text-align: center;
    color: var(--neutraldunklefarbe-solid);
}

.legal-intro-datum,
.faq-intro-datum {
    text-align: right;
    font-style: italic;
    color: var(--neutraldunklefarbe-semi);
    margin-bottom: 3rem;
    font-size: 0.9rem;
}

.legal-block,
.faq-block {
    margin-bottom: 2.5rem;
}

.legal-block .info-box-title,
.faq-block .info-box-title {
    font-size: 1.3rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid var(--neutralhellefarbe);
    margin-bottom: 1rem;
}

.legal-block p,
.faq-block p {
    font-size: 0.95rem;
    line-height: 1.8;
    color: var(--neutraldunklefarbe-semi);
    margin-bottom: 1rem;
}

.legal-block a,
.faq-block a {
    color: var(--primarfarbe-solid);
    font-weight: 500;
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
}

.legal-block a:hover,
.faq-block a:hover {
    color: var(--akzentfarbe-hover);
}
/**
Wohnungsfinder Wizard 
*/

/* Schritt 2: Der Wizard-Container als flexibles Layout, das den ganzen Platz nutzt */
.wizard-container {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    padding: 2rem 1rem;
    color: var(--white);
    text-align: center;
    opacity: 0;
    transform: scale(0.95);
    transition: opacity 0.4s ease-out, transform 0.4s ease-out;
    box-sizing: border-box;
}

.wizard-header {
    display: flex;
    justify-content: space-between; /* Verteilt die Elemente an die Enden */
    align-items: center;
    width: 100%;
    margin-bottom: 2rem;
    gap: 1.5rem;
    box-sizing: border-box; /* Stellt sicher, dass Padding die Breite nicht beeinflusst */
}


.wizard-container.visible {
    opacity: 1;
    transform: scale(1);
}

.wizard-progress-bar {
    flex-grow: 1; /* Nimmt allen übrigen Platz ein */
    z-index: 10100;
    height: 8px;
    background-color: var(--neutralhellefarbe-verylight);
    border-radius: 4px;
    overflow: hidden;
}

.wizard-progress {
    height: 100%;
    background-color: var(--akzentfarbe-hover);
    border-radius: 4px;
    transition: width 0.5s ease-out; /* Etwas längere Animation für einen sanfteren Effekt */
}

.wizard-step-counter {
    flex-shrink: 0;
    text-align: right;
    font-size: 0.9rem;
    color: var(--neutralhellefarbe);
}

/* Styling für den Zurück-Button */
.wizard-back-btn {
    flex-shrink: 0; /* Verhindert, dass der Button schrumpft */
    display: flex;
    align-items: center;
    gap: 0.25rem;
    background: var(--neutralhellefarbe-verylight);
    border: 1px solid var(--neutralhellefarbe-light2);
    color: var(--white);
    font-size: 0.9rem;
    padding: 0.5rem 1rem;
    border-radius: 20px;
    cursor: pointer;
    transition: all 0.2s ease;
}
.wizard-back-btn:hover {
    background: var(--neutralhellefarbe-verylight);
    border-color: var(--neutralhellefarbe-light2);
    transform: scale(1.03);
}
.wizard-back-btn svg {
    width: 20px;
    height: 20px;
    fill: currentColor;
}
.wizard-back-btn-placeholder {
    width: 105px; /* Ungefähre Breite des Buttons, um Layout-Sprünge zu vermeiden */
    flex-shrink: 0;
}

/* === Frage-Text === */
.wizard-container h2 {
    font-size: clamp(1.6rem, 4vw, 2.5rem);
    margin: 1rem 0 2rem 0;
    text-shadow: 0px 2px 8px var(--neutralhellefarbe-light);
    flex-shrink: 0;
}

/* === Antwort-Bereich (nicht scrollbar) === */
.wizard-answers {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
    width: 100%;
    max-width: 450px;
    margin: 0 auto;
    padding: 0;
}

/* === Antwort-Karten === */
.wizard-answer-card {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 10;
    border-radius: 12px;
    overflow: hidden;
    cursor: pointer;
    border: 1px solid var(--neutralldunklefarbe-light2);
    transition: transform 0.3s ease;
    background: var(--neutralldunklefarbe-verylight);
}

.wizard-answer-card:hover {
    transform: scale(1.03);
    border-color: var(--neutralhellefarbe-light2);
}

.wizard-answer-card img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 1;
    z-index: -1;
    transition: transform 0.4s ease;
}

.wizard-answer-card:hover img {
    transform: scale(1.1);
}

.wizard-answer-overlay {
    position: absolute;
    inset: 0;
    padding: 1rem;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    background: linear-gradient(to top, rgba(0,0,0,0.7) 0%, rgba(0,0,0,0) 70%);
}

.wizard-answer-overlay span {
    font-size: clamp(1.1rem, 3vw, 1.3rem);
    font-weight: 600;
    color: var(--white);
    text-shadow: 0px 1px 4px rgba(0,0,0,0.8);
}

.loading-spinner {
  border: 8px solid var(--white); 
  border-top: 8px solid var(--neutraldunklefarbe-solid); 
  border-radius: 50%;
  width: 60px;
  height: 60px;
  animation: spin 1s linear infinite;
  margin: 0 auto;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* =======================================================
   STYLING FÜR PDF-LADE-OVERLAY
   ======================================================= */
.pdf-loading-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(5px);
    z-index: 9999;
    display: none; /* Standardmäßig ausgeblendet */
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    color: var(--white);
    font-size: 1.1rem;
    font-weight: 500;
}

.pdf-loading-overlay.visible {
    display: flex; /* Wird per JavaScript eingeblendet */
}

.pdf-spinner {
    width: 50px;
    height: 50px;
    border: 5px solid var(--neutralehelfarbe-light);
    border-top: 5px solid var(--white);
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

/* Die Keyframe-Animation für die Drehung (falls noch nicht vorhanden) */
@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}
/* =======================================================
   STYLING FÜR DEN FINANZ-CHECK-RECHNER (FAQ-SEITE)
   ======================================================= */

/* 1. Haupt-Container des Rechners */
.finanz-check-container {
    max-width: 1200px;
    margin: 2rem auto;
    background-color: var(--white);
    border-radius: 12px;
    padding: clamp(1.5rem, 4vw, 2.5rem);
    border: 1px solid var(--neutralhellefarbe);
    box-shadow: 0 8px 30px hsla(0, 0%, 0%, 0.05);
}

/* 2. Styling für jeden einzelnen Schritt-Block */
.rechner-schritt {
    margin-bottom: 3rem;
}
.rechner-schritt:last-of-type {
    margin-bottom: 1rem;
}

.schritt-header {
    display: flex;
    align-items: center;
    gap: 1rem;
    border-bottom: 1px solid var(--neutralhellefarbe);
    padding-bottom: 1rem;
    margin-bottom: 2rem;
}

.schritt-nummer {
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    flex-shrink: 0;
    border-radius: 50%;
    background-color: var(--primarfarbe-solid);
    color: var(--white);
    font-weight: bold;
    font-size: 1.1rem;
}

.schritt-header h3 {
    margin: 0;
    color: var(--primarfarbe-solid);
}

/* Zweispaltiges Layout für Eingabe und Ergebnis */
.schritt-inhalt {
    display: grid;
    grid-template-columns: 1fr 1.2fr; /* Ergebnisspalte bekommt etwas mehr Platz */
    gap: 2.5rem;
    align-items: start;
}

.erklaerung {
    font-size: 0.9rem;
    color: var(--neutraldunklefarbe-semi);
    line-height: 1.6;
    margin-bottom: 2rem;
}

/* 3. Eingabefelder und Labels */
.input-gruppe {
    margin-bottom: 1.5rem;
}

.input-gruppe label {
    display: block;
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--neutraldunklefarbe-solid);
    margin-bottom: 0.5rem;
}

.rechner-input {
    width: 100%;
    padding: 0.75rem;
    border: 1px solid var(--neutraldunklefarbe-verylight);
    border-radius: 4px;
    font-size: 1.1rem;
    font-weight: 500;
    text-align: right;
    transition: border-color 0.3s, box-shadow 0.3s;
}

.rechner-input:focus {
    outline: none;
    border-color: var(--akzentfarbe-hover);
    box-shadow: 0 0 0 3px hsla(85, 50%, 53%, 0.2);
}
.rechner-input[disabled] {
    background-color: var(--neutralhellefarbe);
    cursor: not-allowed;
}

/* 4. Ergebnis-Blöcke  */
.schritt-ergebnis-wrapper {
    display: flex;
    flex-direction: column;
    height: 100%;
    justify-content: space-around   ;
}

.schritt-ergebnis {
    background-color: var(--neutralhellefarbe);
    padding: 1.5rem;
    border-radius: 8px;
}

/* Wiederverwendung Ihrer .detail-info-list für ein konsistentes Aussehen */
.kosten-liste li {
    padding: 0.7rem 0.5rem;
}
.kosten-liste .info-sub-label {
    font-weight: bold;
    color: var(--neutraldunklefarbe-solid);
    padding-top: 1rem;
    border-top: 1px solid var(--neutraldunklefarbe-verylight);
}
.kosten-liste .indent {
    padding-left: 1rem;
    font-size: 0.9em;
}
.kosten-liste .vorteil-zeile .info-wert {
    color: var(--akzentfarbe-gruen);
    font-weight: bold;
}

.ergebnis-zeile {
    margin-top: 1.5rem;
    padding-top: 1.5rem;
    border-top: 2px solid var(--white);
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 1.1rem;
}
.ergebnis-zeile.gesamt strong,
 .ergebnis-zeile.kredit strong {
    font-size: 1.5rem;
    color: var(--primarfarbe-solid);
}

/* Ergebnistabelle für Laufzeiten */
.laufzeit-tabelle {
    width: 100%;
    margin-top: 1.5rem;
    border-collapse: collapse;
}
.laufzeit-tabelle th, .laufzeit-tabelle td {
    padding: 0.75rem;
    text-align: right;
    border-bottom: 1px solid var(--neutraldunklefarbe-verylight);
}
.laufzeit-tabelle th { text-align: right; font-weight: 600; font-size: 0.9rem; }
.laufzeit-tabelle tbody tr:hover { background-color: hsla(85, 50%, 53%, 0.1); }


/* Die Finanzierungs-Ampel */
.ampel-container {
    margin-top: 2rem;
    padding: 1rem;
    border-radius: 8px;
    text-align: center;
}
.ampel-licht {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    margin: 0 auto 0.5rem auto;
    box-shadow: 0 0 10px currentColor;
}
.ampel-container.gruen { background-color: hsla(120, 60%, 95%, 1); color: hsla(120, 80%, 25%, 1); }
.ampel-container.gelb { background-color: hsla(45, 100%, 95%, 1); color: hsla(45, 100%, 35%, 1); }
.ampel-container.rot { background-color: hsla(0, 100%, 95%, 1); color: hsla(0, 80%, 40%, 1); }
.ampel-container.gruen .ampel-licht { background-color: currentColor; }
.ampel-container.gelb .ampel-licht { background-color: currentColor; }
.ampel-container.rot .ampel-licht { background-color: currentColor; }

/* Disclaimer-Text */
small.disclaimer {
    display: block;
    text-align: center;
    margin-top: 2rem;
    font-size: 0.8rem;
    color: var(--neutraldunklefarbe-light);
}


/* --- 5. Responsive Anpassungen --- */
@media (max-width: 850px) {
    .schritt-inhalt {
        grid-template-columns: 1fr; /* Stapelt Eingabe und Ergebnis untereinander */
        gap: 2rem;
    }
}


/**
* Kann ich mir das leisten? Wizard
*/
/* Hauptcontainer für den Wizard in der Lightbox */
.finanz-check-wizard-container {
    padding: 1rem;
    background: var(--white);
    color: var(--neutraldunklefarbe-semi);
    max-width: 650px; /* Etwas breiter für bessere Übersicht */
    width: 100%;
    margin: auto;
    text-align: left;
    display: flex;
    flex-direction: column;
    height: 100%;
    border-radius: 1.5rem;
}
.wizard-progress-tracker {
    display: flex;
    justify-content: space-between;
    width: 100%;
    position: relative;
    margin-bottom: 0.5rem;
}
.wizard-progress-tracker::before {
    content: '';
    position: absolute;
    top: 12px;
    left: 10%;
    right: 10%;
    height: 4px;
    background-color: var(--neutraldunklefarbe-verylight);
    z-index: 1;
}
.progress-step {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    position: relative;
    z-index: 2;
}
.progress-dot {
    width: 24px;
    height: 24px;
    line-height: 24px;
    border-radius: 50%;
    background-color: var(--neutraldunklefarbe-light);
    color: var(--white);
    font-weight: bold;
    transition: all 0.3s ease;
}
.progress-label {
    font-size: 0.8rem;
    margin-top: 0.5rem;
    color: var(--neutraldunklefarbe-light);
    transition: all 0.3s ease;
}
.progress-step.active .progress-dot,
.progress-step.completed .progress-dot {
    background-color: var(--primarfarbe-solid);
}
.progress-step.completed .progress-dot {
    background-color: var(--akzentfarbe-gruen);
}
.progress-step.active .progress-label {
    color: var(--primarfarbe-solid);
    font-weight: bold;
}
.finanz-check-container h3.step-title {
    width: 100%;
    text-align: center;
    margin-top: 1.5rem;
}
/* Fortschrittsanzeige */
.wizard-progress-container {
    flex-grow: 1;
    height: 6px;
    background-color: var(--neutraldunklefarbe-verylight);
    border-radius: 3px;
    margin: 0 1rem;
    overflow: hidden;
}
.wizard-progress-bar {
    height: 100%;
    background: linear-gradient(90deg, var(--akzentfarbe-gruen), var(--akzentfarbe-hover));
    border-radius: 3px;
    transition: width 0.4s ease-out;
}
/* Header des jeweiligen Schritts */
.wizard-schritt-header {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.wizard-schritt-nummer {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    line-height: 40px;
    text-align: center;
    background-color: var(--akzentfarbe);
    color: var(--white);
    border-radius: 50%;
    font-weight: 700;
}


/* Inhalt des Schritts (Eingaben und Ergebnis) */
.wizard-schritt-inhalt {
    flex-grow: 1; /* Sorgt dafür, dass der Inhalt den verfügbaren Platz füllt */
}

/* Navigationsleiste am Ende (Zurück / Weiter Buttons) */
.wizard-navigation {
    margin-top: 2rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
}


/* Spezifisches Styling für die Ergebnis-Ansicht */
.wizard-schritt-inhalt.ergebnis {
    background-color: rgba(0,0,0,0.2);
    padding: 1.5rem;
    border-radius: 8px;
}

.finanz-check-container th, .finanz-check-container td {
    padding: 0.25rem;
    font-size: 1rem;
    text-align: right;
    border-bottom: 1px solid var(--neutraldunklefarbe-verylight);
}

.finanz-check-container .schritt-header h3 {
    margin: 0;
    flex-shrink: 0;
}

/*  Styling für die neue zweispaltige Ergebnis-Ansicht */
.schritt-inhalt.ergebnis {
    display: grid;
    grid-template-columns: 1fr 2fr;
    gap: 2rem;
    align-items: start;
}
.laufzeit-tabelle .puffer-cell.positiv {
    color: var(--akzentfarbe-gruen);
    font-weight: bold;
}
.laufzeit-tabelle .puffer-cell.neutral {
    color: var(--akzentfarbe-orange);
}
.laufzeit-tabelle .puffer-cell.negativ {
    color: var(--akzentfarbe-rot);
    font-weight: bold;
}

@media (max-width: 850px) {
    .schritt-inhalt.ergebnis {
        grid-template-columns: 1fr;
    }
}

/* =======================================================
   STYLING FÜR FAQ- & INFO-BLÖCKE
   ======================================================= */

/* Stile für jeden thematischen Block innerhalb einer Karte */
.faq-item {
    margin-top: 2rem;
    padding-top: 2rem;
    border-top: 1px solid var(--neutralhellefarbe);
}
.faq-item:first-of-type {
    margin-top: 0;
    padding-top: 0;
    border-top: none;
}

/* Stil für die Unter-Überschriften (h4) */
.faq-item h4 {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--neutraldunklefarbe-solid);
    margin-bottom: 1rem;
}

/* Absätze innerhalb der Blöcke */
.faq-item p {
    font-size: 0.95rem;
    line-height: 1.7;
    color: var(--neutraldunklefarbe-semi);
}

/* Wiederverwendung Ihrer bestehenden .ausstattung-liste für ein konsistentes Aussehen */
.faq-item .ausstattung-liste {
    list-style: disc; /* Setzt den Stil auf gefüllte Kreise */
    padding-left: 2rem; 
    margin: 1.5rem 0;
    column-count: 1; 
}
/* Jeder Listenpunkt erhält einen sauberen Abstand */
.faq-item .ausstattung-liste >li {
    padding-left: 0.5rem; /* Kleiner Abstand zwischen Aufzählungszeichen und Text */
    margin-bottom: 0.75rem;
}
/* Deaktiviert das SVG-Icon NUR für die Hauptliste */
.faq-item .ausstattung-liste > li::before {
    content: none;
    display: none;
}
/* Die Unterliste selbst */
.ausstattung-liste-unterliste {
    list-style: none;
    padding: 0;
    margin: 1rem 0 1rem 2.5rem; 
}

/* Jeder Punkt in der Unterliste */
.ausstattung-liste-unterliste li {
    padding-left: 1.5rem; /* Platz für das kleinere Icon */
    position: relative;
    margin-bottom: 0.75rem;
    font-size: 0.9em; 
    line-height: 1.6;

}


/* Das kleinere Icon für die Unterliste */
.ausstattung-liste-unterliste li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 8px; /* Vertikale Ausrichtung anpassen */
    width: 12px; /* Kleineres Icon */
    height: 12px;
    background-color: var(--neutraldunklefarbe-semi); /* Dezentere Farbe */
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;
    /* SVG für einen einfachen Pfeil oder Punkt */
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M8.59 16.59L13.17 12 8.59 7.41 10 6l6 6-6 6-1.41-1.41z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M8.59 16.59L13.17 12 8.59 7.41 10 6l6 6-6 6-1.41-1.41z'/%3E%3C/svg%3E");
}

/* Die Box, die den Provisions-Vorteil hervorhebt */
.vorteil-box {
    background-color: hsla(145, 25%, 96%, 1); /* Helles, dezentes Grün */
    border-left: 5px solid var(--sekundarfarbe-solid); /* Grüne Akzent-Linie */
    padding: 1.5rem;
    margin-top: 1.5rem;
    border-radius: 4px;
    font-size: 0.95rem;
    line-height: 1.6;
    color: var(--neutraldunklefarbe-solid);
}
.vorteil-box strong {
    font-weight: 600;
}

/* === Größere Bildschirme: zentriert & größer === */
@media (min-width: 1024px) {
    .wizard-container {
        max-width: 900px;
        margin: 0 auto;
        justify-content: center;
        padding: 3rem 2rem;
    }

    .wizard-answers {
        grid-template-columns: repeat(3, 1fr);
        gap: 2rem;
        max-width: 100%;
    }

    .wizard-answer-card {
        aspect-ratio: 4 / 3;
    }

    .wizard-container h2 {
        font-size: clamp(2.5rem, 4vw, 3rem);
    }
}

/* === Tablets (600px – 1023px) === */
@media (min-width: 600px) and (max-width: 1023px) {
    .wizard-answers {
        grid-template-columns: repeat(2, 1fr);
        gap: 1.5rem;
    }

    .wizard-answer-card {
        aspect-ratio: 5 / 4;
    }
}

/* === Kleine Smartphones (Hoch- und Querformat) === */
@media (max-width: 599px) {
    #lightbox-media-container {
        width: 100%;
        height: 100%;
    }
    .wizard-container {
        padding: 1rem 0.5rem;
    }

    .wizard-answers {
        grid-template-columns: 1fr;
        gap: 1rem;
        max-width: 80%;
    }

    .wizard-answer-card {
        aspect-ratio: 16 / 10;
    }

    .wizard-container h2 {
        font-size: clamp(1.4rem, 5vw, 1.8rem);
    }

    .wizard-answer-overlay span {
        font-size: clamp(1rem, 4vw, 1.2rem);
    }
    .wizard-header {
        gap: 1rem;
    }

    .wizard-back-btn {
        /* Nur das Icon anzeigen, um Platz zu sparen */
        font-size: 0; /* Versteckt den Text "Zurück" */
        padding: 0.5rem;
        border-radius: 50%; /* Macht den Button rund */
    }

    .wizard-back-btn svg {
        margin: 0;
    }

    .wizard-back-btn-placeholder {
        width: 36px; /* Passt zur Breite des runden Buttons */
    }
}

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

@media (max-width: 768px) {
    .project-detail-main-info {
        flex-direction: column;
        gap: var(--space-md);
    }
    .project-main-image-detail,
    .project-placeholder-image-detail,
    .project-detail-meta {
        flex: auto;
    }
    .gallery-grid {
        grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    }
    .detail-info-list li {
        flex-direction: column; /* Stapelt Label und Wert untereinander */
        align-items: flex-start;
        gap: 0.25rem;
    }
    .detail-info-list .info-wert {
        text-align: left;
    }
}

@media (max-width: 480px) {
    .project-detail {
        padding: var(--space-md);
    }
    .gallery-grid {
        grid-template-columns: 1fr;
    }
      .home-textfeld {
        position: absolute;
        bottom: 5vh;    /* Sicherer Abstand von unten */
        left: 1rem;     /* Sicherer Abstand von links */
        right: 1rem;    /* Sicherer Abstand von rechts */
        margin: 0;
        width: auto;    /* Die Breite wird durch left/right bestimmt */
        max-width: none; /* Hebt die clamp()-Mindestbreite auf */
    }

    /*  Korrektur für die Hauptinhalts-Sektionen */
    .content-section {
        /*
         * Die maximale Breite wird so angepasst, dass sie immer in den
         * Bildschirm passt, mit 1rem Abstand zu den Seiten.
        */
        max-width: calc(100% - 2rem);
    }
    
    /*  Sicherstellen, dass alle Grids einspaltig werden */
    .projects, .appartments, .left, .right {
        grid-template-columns: 1fr;
    }

    /*  Korrektur für das appartments-Flex-Layout auf Mobilgeräten */
    .appartments {
        flex-direction: column;
    }
    .vertical-line {
        display: none; /* Die Trennlinie wird ausgeblendet */
    }
}

   ::after.vorteil-box {
        background-color: #d4edda;
        color: #155724;
        border: 1px solid #c3e6cb;
        border-left: 5px solid #28a745;
        padding: 1.5rem;
        margin: 1.5rem 0;
        border-radius: 8px;
    }
    .vorteil-box strong {
        display: block;
        margin-bottom: 0.5rem;
    }
    .warn-box {
        background-color: hsla(0, 100%, 97%, 1); /* Helles, dezentes Rot */
        border-left: 5px solid var(--akzentfarbe-rot); /* Rote Akzent-Linie */
        padding: 1.5rem;
        margin-top: 1.5rem;
        border-radius: 4px;
        font-size: 0.95rem;
        line-height: 1.6;
        color: var(--neutraldunklefarbe-solid);
    }
    .warn-box strong {
        color: var(--akzentfarbe-rot);
        font-weight: 600;
    }
    .vorteil-box.partner-orange {
        border-color: var(--partner-orange);
        background-color: rgb(255, 248, 240);
        
    }
  
    .vorteil-box .primarfarbe-solid {
        color: var(--primarfarbe-solid);
    }
    .ausstattung-liste {
        margin-bottom: 1rem;
    }
   
    .vorteil-box .small-text {
        font-size: 0.8rem;
        opacity: 0.8;
    }
    .vorteil-box .margin-top {
        margin-top: 0.5rem;
    }
    h3.info-box-title.accordion-trigger {
        cursor: pointer;
        position: relative;
        left:3rem;
    }
    h3.info-box-title.accordion-trigger::before {
        content: '+';
        position: absolute;
        left: -1rem;
           transition: transform 0.3s ease;
    }
    h3.info-box-title.accordion-trigger.open::before {
        content: '-';
    }
    .cta-grid {
    display: grid;
    grid-template-columns: 1fr; /* Eine Spalte für Mobilgeräte */
    gap: 2rem;
    margin-top: 2rem;
}

.cta-card {
    background-color: var(--white);
    border: 1px solid var(--neutralhellefarbe);
    border-radius: 12px;
    padding: 2rem;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    box-shadow: 0 4px 15px hsla(0, 0%, 0%, 0.05);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.cta-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 25px hsla(0, 0%, 0%, 0.1);
}

.cta-icon-wrapper {
    display: grid;
    place-items: center;
    width: 60px;
    height: 60px;
    background-color: var(--primarfarbe-verylight);
    border-radius: 50%;
    margin-bottom: 1.5rem;
}
.cta-icon {
    width: 32px;
    height: 32px;
    fill: var(--primarfarbe-solid);
}

.finance3 {
    background-color:hsla(163, 97%, 27%, 1.00);
}


/* Stufe 2: Tablet-Ansicht (700px und breiter) */
@media (min-width: 700px) {
    .cta-grid {
        /* Zwei Spalten für die ersten beiden Karten */
        grid-template-columns: 1fr 1fr;
    }

    /* Die letzte Karte (Partner) nimmt die volle Breite ein */
    .cta-card:last-child {
        grid-column: 1 / -1; /* Erstreckt sich über alle Spalten */
        flex-direction: row; /* Wechselt zu horizontalem Layout */
        text-align: left;
        align-items: center;
        gap: 2rem;
        padding: 1.5rem 2rem; /* Weniger Höhe durch reduziertes Padding */
    }

    .cta-card:last-child .cta-icon-wrapper {
        margin-bottom: 0;
        flex-shrink: 0;
    }
    
    /* Passt die Text- und Buttonausrichtung an */
    .cta-card:last-child .cta-text-content {
        flex-grow: 1;
    }

    .cta-card:last-child .cta-button {
        width: auto; /* Button nimmt nur die benötigte Breite ein */
        flex-shrink: 0;
    }
    
    /* KORREKTUR: Bausparkassen-Logo wird größer */
    .cta-card.financing-partner .partner-logo {
        max-height: 45px; /* Größeres Logo */
        width: auto;
    }
}


/* Stufe 3: Desktop-Ansicht (1000px und breiter) */
@media (min-width: 1000px) {
    .cta-grid {
        /* Drei Spalten für die Desktop-Ansicht */
        grid-template-columns: 1fr 1fr 1fr;
    }
    
    /* Setzt das Layout der letzten Karte auf den Standard zurück */
    .cta-card:last-child {
        grid-column: auto; /* Hebt die volle Breite auf */
        flex-direction: column; /* Wieder vertikal */
        text-align: center;
        padding: 2rem;
    }
    
    .cta-card:last-child .cta-icon-wrapper {
        margin-bottom: 1.5rem;
    }
    .cta-card:last-child .cta-button {
        width: 100%;
    }
}

.finanz-check-wizard-container .schritt-inhalt {
    display: grid;
    /* Nutzt das bewährte zweispaltige Layout */
    grid-template-columns: 1fr 1.2fr;
    gap: 2.5rem;
    align-items: start;
}

.finanz-check-wizard-container .schritt-eingabe {
    /* Nimmt die linke Spalte ein */
}

.finanz-check-wizard-container .schritt-ergebnis {
    /* Nimmt die rechte Spalte ein */
    background-color: var(--neutralhellefarbe);
    padding: 1.5rem;
    border-radius: 8px;
    height: 100%;
}

.finanz-check-wizard-container .ergebnis-zeile {
    font-size: 1.1rem;
    margin-top: 1.5rem;
    padding-top: 1.5rem;
    border-top: 2px solid var(--white);
}

/* Responsive Anpassung für Mobilgeräte */
@media (max-width: 768px) {
    .finanz-check-wizard-container .schritt-inhalt {
        grid-template-columns: 1fr; /* Stapelt die Spalten untereinander */
    }
}
/* Hauptcontainer für die Smart Bar */
.smart-bar {
    position: fixed;
    bottom: 2rem;
    right: 2rem;
    z-index: 1000;
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.4s ease, transform 0.4s ease;
    pointer-events: none;
}
.smart-bar.visible {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}
/* Haupt-Trigger-Button */
.smart-trigger {
    width: 56px;
    height: 56px;
    background: rgba(20, 20, 20, 0.8);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 20px rgba(0,0,0,0.25);
    transition: transform 0.3s ease;
    position: relative;
    z-index: 10;
}
.smart-trigger:hover {
    transform: scale(1.05);
}
.smart-trigger svg {
    width: 24px;
    height: 24px;
    fill: #fff;
    transition: transform 0.3s ease, opacity 0.3s ease;
}
.smart-trigger .icon-close {
    position: absolute;
    transform: scale(0.5);
    opacity: 0;
}
.smart-bar.is-open .smart-trigger .icon-open {
    transform: scale(0.5);
    opacity: 0;
}
.smart-bar.is-open .smart-trigger .icon-close {
    transform: scale(1);
    opacity: 1;
}
/* Container für die Optionen */
.smart-options {
    position: absolute;
    bottom: 0;
    right: 0;
    display: flex;
    flex-direction: column-reverse; /* Kehrt die visuelle Reihenfolge um */
    align-items: flex-end;
    gap: 12px;
    padding-bottom: 64px;
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    transition: all 0.3s ease-out;
}
.smart-bar.is-open .smart-options {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}
/* Styling der einzelnen Options-Zeilen (Link) */
.smart-option {
    display: flex;
    align-items: center;
    gap: 12px;
    text-decoration: none;
    color: #fff;
    opacity: 0; /* Gesteuert durch die gestaffelte Animation */
    transform: translateY(10px);
    transition: opacity 0.3s ease, transform 0.3s ease;
}
/* Der sichtbare Text */
.option-label {
    background: rgba(20, 20, 20, 0.8);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    padding: 6px 14px;
    border-radius: 16px;
    font-size: 0.9rem;
    white-space: nowrap;
    transition: background-color 0.2s ease;
}
/* Der Icon-Button */
.option-icon {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: rgba(20, 20, 20, 0.8);
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 2px 8px rgba(0,0,0,0.15);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.2s ease, background-color 0.2s ease;
}
.option-icon svg {
    width: 22px;
    height: 22px;
    fill: #fff;
}
.smart-option:hover .option-icon,
.smart-option:hover .option-label {
    background: var(--primarfarbe-solid); /* Akzentfarbe beim Hover */
}
/* Trennlinie */
.smart-divider {
    width: 100%;
    height: 1px;
    background: rgba(255, 255, 255, 0.2);
    margin: 4px 0;
    opacity: 0;
    transition: opacity 0.3s;
}
/* Gestaffelte Animation von unten nach oben */
.smart-bar.is-open .smart-option,
.smart-bar.is-open .smart-divider {
    opacity: 1;
    transform: translateY(0);
}
.smart-bar.is-open .smart-option:nth-last-child(1) { transition-delay: 0.0s; }
.smart-bar.is-open .smart-option:nth-last-child(2) { transition-delay: 0.02s; }
.smart-bar.is-open .smart-divider { transition-delay: 0.04s; }
.smart-bar.is-open .smart-option:nth-last-child(4) { transition-delay: 0.06s; }
.smart-bar.is-open .smart-option:nth-last-child(5) { transition-delay: 0.08s; }
.smart-bar.is-open .smart-option:nth-last-child(6) { transition-delay: 0.10s; }
.smart-bar.is-open .smart-option:nth-last-child(7) { transition-delay: 0.12s; }

/* Logik für Web Share API vs. Fallback */
.smart-option.native-share,
.smart-option.fallback-share {
    display: none;
}
.smart-bar.supports-native-share .native-share {
    display: flex;
}
.smart-bar:not(.supports-native-share) .fallback-share {
    display: flex;
}
/* Responsive Anpassungen */
@media (max-width: 768px) {
    .smart-bar {
        bottom: 1rem;
        right: 1rem;
    }
}

/* ==========================================================================
   Share Formular Styling (im Wizard-Look)
   ========================================================================== */

/* Hauptcontainer, der die Animation und das Layout des Wizards übernimmt */
.share-form-container {
    opacity: 0;
    transform: scale(0.98);
    transition: opacity 0.3s ease, transform 0.3s ease;
}
.share-form-container.visible { /* Diese Klasse wird von wizard.js gesetzt */
    opacity: 1;
    transform: scale(1);
}
.share-form-header {
    display: flex;
    align-items: center;
    justify-content: center;
    border-bottom: 1px solid #eee;
    padding-bottom: 1rem;
    margin-bottom: 1.5rem;
}
.share-form-icon-wrapper {
    width: 32px;
    height: 32px;
    margin-right: 12px;
    flex-shrink: 0;
}
.share-form-icon-wrapper svg {
    width: 100%;
    height: 100%;
    fill: var(--white);
}


.share-form-title {
    font-size: 1.5rem;
    color: var(--neutraldunkel-solid); /* Annahme deiner Farbvariablen */
    text-align: center;
    flex-grow: 1;
    padding-right: 0; /* Überschreibt den alten Platzhalter-Stil */
    margin: 0;
}

/* Modernes Textarea-Styling */
#shareCustomText {
    width: 100%;
    min-height: 6rem;
    padding: 1rem;
    border: 1px solid var(--neutralhellefarbe-verylight);
    border-radius: 8px;
    resize: vertical;
    font-family: inherit;
    font-size: 1rem;
    margin-bottom: 1.5rem;
    transition: border-color 0.2s, box-shadow 0.2s;
}
#shareCustomText:focus {
    outline: none;
    border-color: var(--primarfarbe-solid);
    box-shadow: 0 0 0 3px rgba(var(--neutraldunklefarbe-light), 0.1); /* Annahme einer RGB-Variable */
}

/* Vorschau-Karte im WhatsApp-Stil */
.share-preview-card.whatsapp-style {
    border: 1px solid var(--white);
    border-radius: 8px;
    overflow: hidden;
    margin-bottom: 2rem;
    background: var(--white);
    text-align: left;
}
.share-preview-image {
    width: 100%;
    /* Seitenverhältnis für og:image (1200x630 -> 100 / (1200/630) = 52.5%) */
    padding-top: 52.5%; 
    background-size: cover;
    background-position: center;
    border-bottom: 1px solid var(white);
}
.share-preview-content {
    padding: 1rem;
}

/* Live-Vorschau des Kommentars */
.share-preview-custom-text {
    font-style: italic;
    color: #555;
    margin: 0 0 0.75rem 0;
    padding: 0;
    white-space: pre-wrap;
    display: none; /* Standardmäßig ausblenden */
}
.share-preview-custom-text:not(:empty) {
    display: block; /* Anzeigen, wenn Text vorhanden ist */
}
.share-preview-title {
    margin: 0;
    font-weight: bold;
    font-size: 1rem;
    color: #111;
}
.share-preview-description {
    margin: 0.25rem 0;
    font-size: 0.9rem;
    color: #666;
    /* Zeilenumbruch nach 2 Zeilen (optional) */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.share-preview-url {
    font-size: 0.8rem;
    color: #888;
    margin-top: 0.25rem;
    text-transform: uppercase;
}