/*
 * Stylesheet für die Maklerkanzlei-Website
 *
 * Hell gehaltenes Farbschema, Work Sans als Schrift und ein flexibles
 * responsives Layout. Logos wurden 30 % größer als in der vorherigen
 * Version dimensioniert. Die Überschriften blenden beim Laden sanft ein.
 */

@import url('https://fonts.googleapis.com/css2?family=Work+Sans:wght@300;400;600&display=swap');

/* Farbdefinitionen */
:root {
    --primary-colour: #f4f4f4;    /* Kopf- und Fußbereich */
    --secondary-colour: #c2c2c2;  /* Akzente (z.B. Buttons, Linien) */
    --light-grey: #ffffff;        /* Hintergründe von Karten */
    --dark-grey: #7a7a7a;         /* Fließtexte */
    --text-colour: #2e2e2e;       /* Haupttext */
    --max-width: 1200px;
    --transition-speed: 0.3s;
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    font-family: 'Work Sans', sans-serif;
    font-weight: 300;
    color: #7a7a7a;
    line-height: 1.6;
    background: #f9f9f9;
	max-width: 1900px; /* oder größer */
    margin: 0 center;    /* mittig ausrichten */
}


/* Header & Navigation */
header {
    background: var(--primary-colour);
    color: var(--text-colour);
    padding: 15px 0;
    position: sticky;
    top: 0;
    z-index: 1000;
    border-bottom: 1px solid var(--secondary-colour);
}

.container {
    var(--max-width);
    text-align: left;
    margin: 0 auto;
    padding: 0 20px;
}

.under {
    max-width: var(--max-width);
	text-align: center;
    margin: 0 auto;
    padding: 0 20px;
}

.Impressum {
  text-align: center;  /* Text, Überschriften und Links mittig */
  max-width: 900px;    /* optional: Lesbarkeit sichern */
  margin: 0 auto;      /* mittig im Viewport platzieren */
}

.Impressum h2 {
  margin-top: 20px;
}

.Impressum p {
  margin-bottom: 10px;
}

.privacy {
  text-align: center;  /* Text, Überschriften und Links mittig */
  max-width: 800px;    /* optional: Lesbarkeit sichern */
  margin: 0 auto;      /* mittig im Viewport platzieren */
}

.privacy h2 {
  margin-top: 20px;
}

.privacy p {
  margin-bottom: 10px;
}

nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

nav .logo img {
    height: 52px; /* 30 % größer als zuvor */
    width: auto;
}

nav ul {
    /*
     * By default hide the inline navigation list. On large screens this
     * rule could be overridden via a media query, but in dieser Version
     * bleibt sie verborgen, damit immer das Off‑Canvas‑Menü verwendet wird.
     */
    list-style: none;
    display: none;
    align-items: center;
}

nav ul li {
    margin-left: 25px;
}

nav ul li a {
    color: #7a7a7a;
    text-decoration: none;
    font-weight: 400;
    transition: #7a7a7a;
}

nav ul li a:hover {
    color: #7a7a7a;
}

/* Hero section mit Verlauf und Hintergrundbild */
.hero {
    background-image:
        linear-gradient(135deg, rgba(240,240,240,0.8), rgba(225,225,225,0.8)),
        url('images/Header2.png');
    background-size: cover;
    background-position: center 75%;
    background-repeat: no-repeat;
    min-height: 55vh;
    max-height: 600px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding: 20px 40px;
    color: #707070;
    position: relative;
    overflow: hidden;
}

/* Hintergrundbild */
.hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: url('../images/header2.png');
    background-size: cover;
    background-position: center 75%;
    filter: brightness(0.99); /* fast originalhell */
    z-index: 0;
}

/* Heller Verlauf oben drüber */
.hero::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(250,250,250,0.7), rgba(237,237,237,0.7));
    z-index: 1;
    filter: brightness(0.99); /* fast originalhell */
}

/* Text */
.hero > * {
    position: center;
    z-index: 2;
}

.hero h1 {
    font-weight: 500;
    font-size: 1.4rem;
    letter-spacing: 300;
	color: #7a7a7a;
    position: relative;
    animation: fadeInUp 1s ease-out both;
}
.hero h5 {
    font-weight: 500;
    font-size: 1.4rem;
    letter-spacing: 300;
	color: #7a7a7a;
    position: relative;
    animation: fadeInUp 1s ease-out both;
}

.btn-primary {
    background: #989898; /* Dunklerer Startwert */
    color: #fff;
    padding: 12px 28px;
    border-radius: 25px;
    text-decoration: none;
    font-weight: 400;
    transition: background var(--transition-speed);
}

.btn-primary:hover {
    background: #7a7a7a;
}



section h2 {
    text-align: center;
    font-weight: 500;
    font-size: 1.4rem;
    margin-bottom: 35px;
    color: #7a7a7a;
    position: relative;
    animation: fadeInUp 0.8s ease-out both;
}

section h2::after {
    content: '';
    display: block;
    width: 80px;
    height: 1px;
    background: #8a8a8a;
    margin: 5px auto 55px; /* letzter Wert = Abstand nach unten */
}
section h7 {
    text-align: center;
    font-weight: 500;
    font-size: 1.4rem;
    margin-bottom: 35px;
    color: #7a7a7a;
    position: relative;
    animation: fadeInUp 0.8s ease-out both;
}
.no-line {
    border: none;
}

/* Features Wrapper */
.features,
.features-center {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 40px;        /* Abstand zwischen Kästchen */
  margin-bottom: 40px; /* Abstand zwischen Reihen = gap */
}

/* Obere Reihe: 3 Karten – gleiche Innenbreite wie unten (3*350 + 2*40) */
.features {
  max-width: max-width: calc(350px * 3 + 40px * 2);
  margin-left: auto;
  margin-right: auto;
}

/* Untere Reihe: 2 Karten – (2*350 + 1*40) */
.features-center {
  max-width: calc(350px * 2 + 40px);
  margin-left: auto;
  margin-right: auto;
}

/* Kästchen – gleiche Höhe im geschlossenen Zustand */
.feature {
  flex: 0 0 350px;
  max-width: 350px;
  min-width: 350px;
  background: var(--light-grey);
  border-radius: 8px;
  padding: 25px;
  text-align: center;
  box-shadow: 0 1px 4px rgba(0,0,0,0.03);
  cursor: pointer;
  transition: transform var(--transition-speed),
              box-shadow var(--transition-speed),
              max-height 0.4s ease;
  overflow: hidden;

  /* sorgt für gleiche Höhe */
  max-height: 140px; /* geschlossener Zustand */
  min-height: 140px;

  display: flex;
  flex-direction: column;
  justify-content: center; /* Inhalt mittig */
}



/* Überschrift */
.feature h3 {
  font-weight: 600;
  font-size: 1.3rem;
  margin: 0;
}

/* Text versteckt */
.feature p {
  font-size: 0.95rem;
  color: var(--dark-grey);
  opacity: 0;
  max-height: 0;
  overflow: hidden;
  margin-top: 0;
  transition: opacity 0.35s ease, max-height 0.35s ease, margin-top 0.35s ease;
}

/* Hover */
.feature:hover {
  transform: translateY(-3px);
  box-shadow: 0 2px 8px rgba(0,0,0,0.06);

  /* beim Aufklappen → Höhe freigeben */
  max-height: 1000px;
  min-height: unset;
  justify-content: flex-start;
}
.feature:hover p {
  opacity: 1;
  max-height: 500px;
  margin-top: 15px;
}

/* Titel */
.feature h3 {
  font-weight: 400;
  font-size: 1.3rem;
  margin: 0;
  color: #7a7a7a
}

/* Text: versteckt bis Hover */
.feature p {
  font-size: 0.95rem;
  color: #989898
  opacity: 0;
  max-height: 0;
  overflow: hidden;
  margin-top: 0;
  transition: opacity 0.35s ease, max-height 0.35s ease, margin-top 0.35s ease;
}
/* Text anzeigen bei Hover */
.feature:hover {
  transform: translateY(-3px);
  box-shadow: 0 2px 8px rgba(0,0,0,0.06);
  max-height: 1000px;
  justify-content: flex-start; /* sorgt dafür, dass beim Öffnen Titel + Text oben anfangen */
}

.feature:hover p {
  opacity: 1;
  max-height: 500px;
  margin-top: 15px;
}

/* ≤1200px: .features-Gruppen exakt mittig zum Viewport + Boxen mittig
   UND gemeinsame (gleiche) Box-Höhen per CSS-Variable (Fallback-Wert anpassen) */
@media (max-width: 1200px) {

  /* Gemeinsame Mindesthöhe für ALLE .feature-Boxen
     → Anpassen, z. B.: clamp(320px, 40vw, 560px) oder ein fixer Wert wie 420px.
     Hinweis: Rein mit CSS kann keine dynamische Messung über Container hinweg erfolgen. */
  :root {
    --feature-min-h: auto; /* Beispiel: clamp(320px, 40vw, 560px) */
  }
	.features-center .feature + .feature {
    margin-top: 24px; /* ggf. an deinen bestehenden Zwischenabstand anpassen */
  }

  /* Gruppe zentrieren – unabhängig von äußeren Offsets/Padding */
  .features,
  .features-center {
    /* Layout */
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 40px;

    /* HARTE Zentrierung zum Viewport */
    width: 100vw !important;
    max-width: 100vw !important;
    margin-left: calc(50% - 50vw) !important;
    margin-right: calc(50% - 50vw) !important;

    /* mögliche Rechts-Verschiebungen neutralisieren */
    padding-left: 0 !important;
    padding-right: 0 !important;
    position: static !important;
    left: auto !important;
    right: auto !important;
    float: none !important;
    transform: none !important;

    /* falls Parent ein CSS-Grid ist, damit nicht „justify-content:end“ greift */
    justify-self: center !important;
  }

  /* Inhalt definitiv anzeigen (Text, Überschrift usw.) */
  .feature > * {
    display: block !important;
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
    filter: none !important;
  }

  /* Hover-/Active-Zustände dürfen nichts verstecken */
  .feature:hover > *,
  .feature:active > *,
  .feature:focus > *,
  .features:hover .feature > *,
  .features-center:hover .feature > * {
    opacity: 1 !important;
    max-height: none !important;
    transform: none !important;
    filter: none !important;
  }

  /* NUR Höhe der Boxen anpassen: alles sichtbar */
  .feature {
    height: auto !important;
    min-height: 0 !important;   /* evtl. frühere min-height aufheben */
    max-height: none !important;
    overflow: visible !important;
  }

  /* Jede Box wirklich mittig halten */
  .features > .feature,
  .features-center > .feature {
    width: min(100%, 350px) !important;
    margin-left: auto !important;
    margin-right: auto !important;
    box-sizing: border-box !important;
    float: none !important;
    position: static !important;
    left: auto !important;
    right: auto !important;
    transform: none !important;
  }

  /* Gemeinsame (gleiche) Box-Höhen für beide Gruppen
     – CSS-only Fallback über Variable (oben anpassen) */
  .features .feature,
  .features-center .feature {
    min-height: var(--feature-min-h) !important;
    /* Falls strikt exakt gleiche Höhe gewünscht (kann Inhalte beschneiden):
       height: var(--feature-min-h) !important;
       overflow: clip; */
  }
}
/* Mobil / schmal: Boxen reagieren nicht mehr auf Tippen */
@media (max-width: 1200px) {
  /* 1) Klicks treffen NICHT die Box selbst → keine :active/:focus-Regeln der Box */
  .feature { pointer-events: none; }

  /* 3) Falls doch irgendein Bewegungsstil an der Box hängt, Bewegung hart unterbinden */
  .feature,
  .feature * {
    transition-property: none !important; /* stoppt animierte Bewegungen */
    animation: none !important;
  }
  .feature:active,
  .feature:focus,
  .feature:focus-within {
    transform: none !important; /* kein Springen/Zoomen/Shift */
  }
}
@media (max-width: 1200px) {
  details.feature > summary { pointer-events: none; }
}
/* Mobil: Feature-Boxen reagieren NICHT mehr auf Tap/Klick */
@media (max-width: 1200px) {
  /* komplett „unta p pable“ machen – verhindert auch JS-Delegation */
  .feature { pointer-events: none !important; }

  /* Bewegungen/Animationen sicherheitshalber aus */
  .feature, .feature * {
    transition: none !important;
    animation: none !important;
    transform: none !important;
  }

  /* Falls Zustandsklassen/ARIA oder <details open> via JS gesetzt werden,
     sollen sie optisch NICHTS ändern */
  .feature.open,
  .feature.is-open,
  .feature.active,
  .feature.--open,
  .feature[aria-expanded="true"],
  .feature[aria-pressed="true"],
  details.feature[open] {
    transform: none !important;
  }

  /* <details> explizit: Summary nicht tappable */
  details.feature > summary { pointer-events: none !important; }
}



/* Desktop wie gehabt (dein bisheriger Stil) */
.timeline{
  display:flex; flex-wrap:nowrap; justify-content:center; align-items:flex-start;
  gap:20px; position:relative;
}
.step{ flex:1 1 120px; max-width:120px; text-align:center; position:relative; }
.step i{
  font-size:28px; color:#D61C1C; background:#fff; padding:10px; border-radius:50%;
  border:2px solid #D61C1C; display:inline-block;
}
.step p{ margin-top:8px; font-size:14px; line-height:1.2; color:#7a7a7a; white-space:normal; }
/* horizontale Linie hinter Icons (nur Desktop) */
.timeline::before{
  content:""; position:absolute; top:38px; left:0; right:0; height:1px; background:#cfcfcf; z-index:0;
}
.step i{ position:relative; z-index:1; }
.icon-circle {
  --size: 54px;                 /* Kreis-Durchmesser */
  width: var(--size);
  height: var(--size);
  display: inline-flex;         /* sauber zentrieren */
  align-items: center;
  justify-content: center;
  background: #fff;
  color: #D61C1C;
  border: 2px solid #D61C1C;
  border-radius: 50%;           /* macht es rund */
  font-size: 24px;              /* Icon-Größe im Kreis */
  line-height: 1;               /* verhindert Extra-Höhe */
  box-sizing: border-box;       /* Border zählt zur Größe */
  vertical-align: middle;
}


/* ===== MOBIL ≤700px: 3–3–2 + Verbindungen Exposé→Marketing & Berichte→Kaufvertrag ===== */
@media (max-width:700px){
  :root{
    --line:#c31313;
    --iconHalf:22px;                /* halber Icon-Durchmesser inkl. Padding/Border */
  }

  .timeline{
    display:grid;
    grid-template-columns:repeat(3, minmax(0,1fr));
    gap:40px 0;                     /* Abstand zwischen Reihen */
    position:relative;
  }

  /* Desktop-Grundlinie ausblenden */
  .timeline::before{ display:none; }

  .step{
    max-width:none;
    text-align:center;
    position:relative;              /* Bezug für ::before/::after */
    z-index:1;
  }
  .step i, .step p{ position:relative; z-index:2; }

  /* ===== Platzierung (DOM bleibt unverändert) ===== */
  /* Reihe 1 */
  .step:nth-child(1){ grid-column:1; grid-row:1; } /* Beratung   */
  .step:nth-child(2){ grid-column:2; grid-row:1; } /* Bewertung  */
  .step:nth-child(3){ grid-column:3; grid-row:1; } /* Exposé     */

  /* Reihe 2  →  Marketing links, Besichtigung Mitte, Berichte rechts */
  .step:nth-child(6){ grid-column:1; grid-row:2; } /* Marketing   */
  .step:nth-child(5){ grid-column:2; grid-row:2; } /* Besichtigung*/
  .step:nth-child(4){ grid-column:3; grid-row:2; } /* Berichte    */

  /* Reihe 3  →  linksbündig */
  .step:nth-child(7){ grid-column:1; grid-row:3; } /* Kaufvertrag */
  .step:nth-child(8){ grid-column:2; grid-row:3; } /* After Sales */

  /* ===== Horizontale Linien (bündig an Icon-Rand) ===== */
  /* Reihe 1: 1→2, 2→3 | Reihe 2: 6→5, 5→4 | Reihe 3: 7→8 */
  .step:nth-child(1)::after,
  .step:nth-child(2)::after,
  .step:nth-child(6)::after,
  .step:nth-child(5)::after,
  .step:nth-child(7)::after{
    content:"";
    position:absolute;
    top:37px;                                   /* Icon-Mitte ggf. feinjustieren */
    left: calc(48% + var(--iconHalf));          /* Start am rechten Icon-Rand   */
    width: calc(100% - (2 * var(--iconHalf)));  /* bis linken Rand des nächsten */
    height:1px;
    background:var(--line);
    z-index:1;
  }

  /* ===== Vertikale Linien ===== */
  /* Exposé (3) → Berichte (4) */
  .step:nth-child(3)::before{
    content:"";
    position:absolute;
    top: calc(80% + var(--iconHalf));           /* unterer Icon-Rand */
    left:50%;
    transform:translateX(-0.5px);
    width:1px;
    height: calc(40px + var(--iconHalf));       /* bis zur nächsten Reihe */
    background:var(--line);
    z-index:1;
  }

  /* Marketing (6) → Kaufvertrag (7) */
  .step:nth-child(6)::before{
    content:"";
    position:absolute;
    top: calc(80% + var(--iconHalf));
    left:50%;
    transform:translateX(-0.5px);
    width:1px;
    height: calc(40px + var(--iconHalf));
    background:var(--line);
    z-index:1;
  }
}

/* === SERVICES-GRID (2x2, mobil 1-spaltig) === */
.services {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
  max-width: 1100px;
  margin: auto;
  align-items: stretch; /* Boxen in einer Reihe gleich hoch */
}

.services-box {
  background: #fff;
  border: 1px solid #ccc;
  border-radius: 8px;
  padding: 20px;
  box-shadow: 0 2px 5px rgba(0,0,0,0.1);
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  min-height: 200px; /* gleiche Grundhöhe */
}

.services-box h3 {
  margin-top: 0;
}

/* ===== Services-Grid: Gleich hohe Boxen (ohne andere Bereiche zu berühren) ===== */

/* Basis: nichts erzwingen – Höhe wird per JS gesetzt */
.services .services-box { min-height: auto; }

/* Responsiv NUR fürs Services-Grid beibehalten (dein bestehender Wunsch) */
@media (max-width: 768px) {
  .services { grid-template-columns: 1fr; }
  .services .services-box { min-height: auto; } /* mobil: natürliche Höhe */
}



/* Optional: auf sehr schmalen Screens etwas Luft am Rand */
@media (max-width:600px){
  .faq-page .services-list{max-width:100%; padding:0 16px;}
}

/* ===== FAQ Seite (scoped auf .faq-page) ===== */

/* Liste: mittig, untereinander, gleicher Max-Breitenrahmen */
.faq-page .services-list{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:48px;                 /* Abstand zwischen den Kästchen */
  max-width:800px;          /* einheitliche Breite */
  margin: 0 auto 80px auto; /* oben 0, links/rechts auto, unten 80px */
}

/* Kästchen */
.faq-page .service-item{
  width:100%;
  background:var(--light-grey);
  border-radius:8px;
  padding:24px 28px;
  text-align:center;        /* Überschrift mittig */
  box-shadow:0 1px 4px rgba(0,0,0,0.05);
  cursor:pointer;
  transition:transform var(--transition-speed), box-shadow var(--transition-speed);
}
.faq-page .service-item:hover{
  transform:translateY(-3px);
  box-shadow:0 2px 10px rgba(0,0,0,0.08);
}

/* Titel */
.faq-page .service-item h3{
  margin:0;
  font-weight:400;
  font-size:1.3rem;
  color:#7a7a7a;
  text-align: center; /* Überschrift mittig */
}

/* Inhalt: standardmäßig ZU (versteckt) */
.faq-page .service-item .service-content{
  max-height:0;
  opacity:0;
  overflow:hidden;
  margin-top:0;
  transition:max-height .35s ease, opacity .35s ease, margin-top .35s ease;
  text-align:left;          /* Text linksbündig beim Öffnen */
}

/* Inhalt: BEI HOVER offen – Höhe wächst mit Text */
.faq-page .service-item:hover .service-content{
  max-height:2000px;        /* groß genug, damit alles reinpasst */
  opacity:1;
  margin-top:12px;
}

/* Text im Inhalt */
.faq-page .service-item .service-content p{
  font-size:.95rem;
  color:var(--dark-grey);
  margin:.25rem 0;
}

/* Geschlossene Kästchen: Überschrift vertikal mittig */
.faq-page .service-item {
  display: flex;
  flex-direction: column;
  justify-content: center; /* vertikal mittig */
  align-items: center;     /* horizontal mittig */
}

/* Sobald geöffnet (Hover oder Active): Überschrift + Text oben anfangen */
.faq-page .service-item:hover,
.faq-page .service-item.active {
  justify-content: flex-start; /* oben ausrichten */
  align-items: flex-start;     /* Text links ausrichten */
}


/* Optional: auf sehr schmalen Screens etwas Rand */
@media (max-width:600px){
  .faq-page .services-list {
    max-width:100%;
    padding:0 16px;
  }
}

/* Mobile-Klick-Version: Inhalt standardmäßig zu, per .active offen */
@media (max-width: 768px) {
  .faq-page .service-item .service-content {
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    margin-top: 0;
    transition: max-height .35s ease, opacity .35s ease, margin-top .35s ease;
    text-align: left;
  }

  .faq-page .service-item.active .service-content {
    max-height: 2000px; /* groß genug für langen Text */
    opacity: 1;
    margin-top: 12px;
  }
}

/* Services list */
.services-list {
    display: flex;
    flex-wrap: wrap;
    gap: 40px;
    justify-content: space-between;
}

.service-item {
    flex: 1 1 280px;
    background: var(--light-grey);
    border-radius: 8px;
    padding: 25px;
    box-shadow: 0 1px 4px rgba(0,0,0,0.03);
}

.service-item h3 {
    font-weight: 600;
    font-size: 1.2rem;
    margin-bottom: 10px;
    text-align: center; /* Titel mittig */
}

.service-item p {
    font-size: 0.95rem;
    color: var(--dark-grey);
}


/* Property cards */
.property-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 40px;
    justify-content: space-between;
}

.property-card {
    flex: 1 1 300px;
    border: 1px solid #989898;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 1px 4px rgba(0,0,0,0.03);
    background: var(--light-grey);
    display: flex;
    flex-direction: column;
    transition: transform var(--transition-speed), box-shadow var(--transition-speed);
}

.property-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}

.property-image {
    width: 100%;
    height: 200px;
    object-fit: cover;
    display: block;
}

.property-details {
    padding: 20px;
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.property-details h3 {
    font-weight: 600;
    font-size: 1.2rem;
    margin-bottom: 5px;
    color: var(--text-colour);
}

.property-details .location {
    font-size: 0.9rem;
    color: var(--secondary-colour);
    display: block;
    margin-bottom: 10px;
}

.property-details .description {
    font-size: 0.9rem;
    color: var(--dark-grey);
    margin-bottom: 15px;
    flex: 1;
}

.property-details .price {
    font-weight: 700;
    color: var(--text-colour);
    font-size: 1.1rem;
}

/* Team Grid */
.team-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 40px;
    justify-content: space-between;
}

.team-member {
    flex: 1 1 250px;
    text-align: center;
}

.team-member .photo {
    width: 120px;
    height: 120px;
    border-radius: 50%;
    object-fit: cover;
    margin: 0 auto 15px;
    display: block;
    background: var(--secondary-colour);
}

.team-member h4 {
    font-weight: 600;
    font-size: 1.2rem;
    margin-bottom: 5px;
    color: #7a7a7a;
}

.team-member span {
    font-size: 0.9rem;
    color: var(--dark-grey);
}


/* Contact Form */
.contact-form {
    max-width: 600px;
    margin: 0 auto;
    background: var(--light-grey);
    padding: 40px;
    border-radius: 8px;
    box-shadow: 0 2px 6px rgba(0,0,0,0.05);
	colour: #FFF;
}

.contact-form label {
    display: block;
    margin-bottom: 5px;
    font-weight: 600;
	
}

.contact-form input,
.contact-form textarea {
    width: 100%;
    padding: 12px;
    margin-bottom: 20px;
    border: 1px solid #dcdcdc;
    border-radius: 4px;
    font-size: 0.95rem;
	
}

.contact-form textarea {
    resize: vertical;
    min-height: 120px;
	
}

.contact-form button {
    background: #989898;
    color: #ffffff;
    padding: 12px 28px;
    border: none;
    border-radius: 30px;
    font-weight: 600;
    font-size: 1rem;
    cursor: pointer;
    transition: background var(--transition-speed);
}

.contact-form button:hover {
    background: #7a7a7a;
}


/* Zentrierter Text mit maximaler Breite */
.centered-text {
    text-align: center;
    margin: 0 auto 20px;
    max-width: 1200px; /* maximale Breite, z. B. 800px */
    line-height: 1.6; /* bessere Lesbarkeit */
	padding: 0 15px;      /* kleiner Innenabstand */
}
@media (max-width: 768px) {
  .centered-text {
    max-width: 90%;     /* auf Handy schmaler */
    font-size: 1rem;    /* angenehme Größe */
    line-height: 1.6;   /* bessere Lesbarkeit */
  }
}

.philosophie-text {
  max-width: 700px;   /* nur dieser Bereich wird schmal */
  margin: 0 auto;     /* mittig */
  text-align: center; /* zentriert */
  line-height: 1.3;
  
}


/* Footer */
footer {
    background: var(--primary-colour);
    color: var(--text-colour);
    padding: 40px 20px;
    position: flex; /* bleibt im normalen Dokumentfluss */
    overflow: visible; /* nichts abschneiden */
}

/* 4 Spalten im Footer */
footer .footer-content {
  display: flex;
  justify-content: space-between; /* verteilt die Spalten */
  align-items: flex-start;
  gap: 20px;                      /* Abstand zwischen Spalten */
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 10px;                /* nur 10px links & rechts */
}

.footer-column,
.footer-about,
.footer-contact,
.footer-links-list,
.footer-partner {
  flex: 1;              /* alle Spalten gleich breit */
  min-width: 200px;     /* damit nichts zu schmal wird */
  box-sizing: border-box;
}
.footer-contact .contact-row {
  display: flex;
  align-items: center;   /* Icons & Text auf einer Höhe */
  gap: 10px;             /* Abstand zwischen Text und Icons */
}



.footer-partner img{
  max-width:150px;
  height:auto;
  display:block;
  margin:8px 0 0;
}


/* Überschriften im Footer */
footer h4 {
    font-weight: 600;
    font-size: 1.2rem;
    margin-bottom: 10px;
    color: var(--text-colour);
}

/* Text- und Link-Formatierung */
footer p,
footer a {
    font-size: 0.9rem;
    color: #7a7a7a;
    margin-bottom: 8px;
    text-decoration: none;
}

footer a:hover {
    color: var(--secondary-colour);
}

/* Kontakt-Icons */
.footer-contact .contact-row {
    display: flex;
    align-items: flex-start;
    margin-bottom: 8px;
}

.footer-contact .icon {
    flex: 0 0 20px;
    width: 20px;
    margin-right: 8px;
    color: #989898;
    font-size: 1rem;
    line-height: 1.4;
}


/* Instagram Icon */
.footer-contact .social-label {
    font-size: 0.9rem; /* gleiche Größe wie footer p,a */
    color: #7a7a7a;
    margin-bottom: 8px;
    display: inline-block;
}

.instagram-icon:hover {
    color: #989898;
}

/* Liste in der Links-Spalte */
.footer-links-list {
    list-style: none;     /* entfernt Punkte */
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    row-gap: 8px;         /* gleichmäßiger Abstand */
}
.footer-partner img {
  max-width: 150px;   /* maximale Breite */
  height: auto;       /* Höhe passt sich proportional an */
  display: block;     /* sorgt für sauberes Verhalten */
  margin: 0;     /* optional: Bild mittig */
}


/* Copyright */
footer .copyright {
    text-align: center;
    width: 100%;
    margin-top: 30px;
}



/* Mobile Ansicht: Spalten untereinander */
@media (max-width: 568px) {
  footer .footer-content {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 14px; /* gleicher Abstand zwischen ALLEN Spalten */
  }

  footer .footer-content > div {
    display: flex;
    flex-direction: column;
    row-gap: 6px; /* Zeilenabstand innerhalb der Spalte */
  }

  footer .footer-content > div > * {
    margin: 0 !important;
  }

  .footer-contact .contact-row {
    margin: 0 !important;
    column-gap: 8px;
  }
/* Liste in der Links-Spalte hübsch machen */
  .footer-links-list {
   list-style: none;
   padding: 0;
   margin: 0;
   display: flex;
   flex-direction: column;
   row-gap: 8px;
}
}
@media (max-width: 568px) {
  /* Social-Zeile: Text + 2 Icons in einer Reihe */
  .footer-contact .social-row{
    display: flex;
    align-items: center;
    gap: 10px;         /* Abstand zwischen Label und Icons */
    flex-wrap: nowrap; /* nicht umbrechen */
  }

  /* Links als kompakte Inline-Elemente */
  .footer-contact .social-row a{
    display: inline-flex;
    align-items: center;
    width: auto;       /* falls irgendwo a {width:100%} gesetzt ist */
  }

  /* Abstand zwischen den beiden Icons */
  .footer-contact .social-row a + a{
    margin-left: 8px;
  }

  /* optional: Icon-Größe etwas kleiner auf Mobile */
  .footer-contact .social-row i{
    font-size: 1.1rem;
    line-height: 1;
  }
}


/* Breite Ansicht: Spalten nebeneinander */
@media (min-width: 569px) {
  footer .footer-content {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: flex-start;
    gap: 60px; /* Abstand zwischen den Spalten */
  }

  footer .footer-content > div {
    flex: 1 1 250px;
    min-width: 200px;
  }
}


/* Responsive Design für Spalten, Karten etc. */
@media (max-width: 768px) {
    nav ul li {
        margin-left: 15px;
    }
    .hero h1 {
        font-size: 2.2rem;
    }
    .hero p {
        font-size: 1rem;
    }
    .features,
    .services-list,
    .property-grid,
    .team-grid {
        flex-direction: column;
    }
    .features .feature,
    .services-list .service-item,
    .property-grid .property-card,
    .team-grid .team-member {
        flex: 1 1 100%;
        margin-bottom: 30px;
    }
}
/* Hero-Position anpassen bei sehr breiten Bildschirmen */
@media (min-width: 1600px) {
    .hero {
        background-position: center -10%;
    }
}

/* Fade-In Animation */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Off‑canvas und responsive Navigation */
/* Hamburger‑Button anzeigen, Linkliste ausblenden */
nav .menu-toggle {
    display: block;
    background: none;
    border: none;
    font-size: 1.8rem;
    cursor: pointer;
    color: var(--text-colour);
}

/* Off‑canvas‑Panel */
.offcanvas {
    position: fixed;
    top: 0;
    right: -80%;
    width: 80%;
    max-width: 300px;
    height: 100%;
    background: var(--primary-colour);
    box-shadow: -2px 0 8px rgba(0,0,0,0.2);
    transition: right var(--transition-speed) ease;
    padding: 20px;
    z-index: 1001;
    overflow-y: auto;
}

.offcanvas.open {
    right: 0;
}

.offcanvas .close-btn {
    position: absolute;
    top: 15px;
    right: 20px;
    background: none;
    border: none;
    font-size: 2rem;
    cursor: pointer;
    color: var(--text-colour);
}

.offcanvas ul {
    list-style: none;
    margin-top: 60px;
}

.offcanvas ul li {
    margin-bottom: 20px;
}

.offcanvas ul li a {
    color: var(--text-colour);
    text-decoration: none;
    font-size: 1.2rem;
}

/* ------------------------------------------------------------------ */
/* Responsive rules */
/*
 * Die Navigation zeigt standardmäßig den Hamburger‑Button und blendet die
 * klassische Linkliste aus. Auch bei breiten Bildschirmen soll das
 * Off‑Canvas‑Menü verwendet werden, daher bleiben die Links verborgen
 * und der Toggle sichtbar. Diese Regeln überschreiben gegebenenfalls
 * frühere Einstellungen für Viewport‑größen ab 769px.
 */
/* Bei größeren Bildschirmen bleibt der Toggle sichtbar und die
   Linkliste weiterhin ausgeblendet, damit das Off‑Canvas‑Menü immer
   genutzt wird. */
@media (min-width: 769px) {
    nav ul {
        display: none;
    }
    nav .menu-toggle {
        display: block;
    }
}




/* Global responsive images */
img { max-width: 100%; height: auto; }

/* Prevent horizontal overflow for feature cards on very small screens */
@media (max-width: 360px) {
  .feature {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    flex: 1 1 auto;
  }
}


/* === Hero Variant A: image with object-fit and adjustable focal point === */
.hero { position: relative; background-image: none !important; }
.hero::before { background-image: none !important; } /* keep gradient in ::after */
.hero__media { position: absolute; inset: 0; z-index: 0; }
.hero__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--focal-x, 50%) var(--focal-y, 50%);
  display: block;
}
/* Default focal point variables (can be overridden per page/section) */
.hero { --focal-x: 50%; --focal-y: 50%; }

/* ========== ISOLATION: Feature-Sektion nur im Startseiten-Block ========== */
/* Die Regeln gelten nur für die Feature-Boxen innerhalb von .centered-text.
   So bleibt die FAQ-Seite (.faq-page) komplett unberührt. */

/* Variable bleibt global, greift aber nur in den gezielten Selektoren unten */
:root { --feature-min-h: auto; }

/* Nur Mobile-Anpassungen für die Feature-Sektion der Startseite */
@media (max-width: 768px) {
  /* Abstand NUR zwischen den beiden Boxen der 2. Reihe */
  .centered-text .features-center .feature + .feature {
    margin-top: 24px; /* ggf. anpassen */
  }

  /* optionale gemeinsame Mindesthöhe – wird ggf. per JS gesetzt */
  .centered-text .features .feature,
  .centered-text .features-center .feature {
    min-height: var(--feature-min-h);
  }
}

/* ========== SCHUTZ: FAQ-Layout explizit unangetastet lassen ========== */
/* (Nur falls irgendwo ältere, breitere Regeln noch greifen) */
@media (max-width: 1200px) {
  .faq-page .services-list { display: block; }           /* Kein erzwungenes Flex/Grid von außen */
  .faq-page .service-item {
    width: 100%;
    max-width: none;
    margin: 0 0 24px;                                   /* Standard-Abstand unten */
  }
  .faq-page .service-content { display: block; }
}
}

/* A11y Helper */
.visually-hidden {
  position:absolute !important;
  width:1px; height:1px;
  padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0);
  white-space:nowrap; border:0;
}

/* Modal Overlay – Grundzustand: aus */
#contact-modal,
.contact-modal {
  position: fixed !important;   /* immer vom Viewport gelöst */
  inset: 0 !important;          /* volle Fläche */
  display: none !important;     /* FOUC-Schutz */
  background: rgba(0,0,0,.5);
  z-index: 10000;
}

/* Sichtbar, wenn geöffnet:
   - JS: aria-hidden="false"
   - No-JS: URL-Hash (#contact-modal) → :target
   Zentrierung über Grid. */
#contact-modal[aria-hidden="false"],
.contact-modal[aria-hidden="false"],
#contact-modal:target,
.contact-modal:target {
  display: grid !important;
  place-items: center !important;
  z-index: 999999 !important;   /* über alles */
}

/* Dialog – Basis */
#contact-modal .contact-modal__dialog,
.contact-modal .contact-modal__dialog {
  background: #fff;
  width: min(92vw, 520px);
  max-height: 90vh;
  overflow: auto;
  border-radius: 16px;
  box-shadow: 0 10px 30px rgba(0,0,0,.18);
  padding: 24px;

  /* keine positionsabhängige Zentrierung mehr */
  position: static !important;
  top: auto !important;
  left: auto !important;
  margin: 0 !important;

  /* sanftes Einblenden */
  opacity: 0;
  transform: translateY(-6px);
  transition: transform .18s ease-out, opacity .18s ease-out;
}

/* Sichtbar-Zustand (JS + No-JS): Dialog fade-in */
#contact-modal[aria-hidden="false"] .contact-modal__dialog,
.contact-modal[aria-hidden="false"] .contact-modal__dialog,
#contact-modal:target .contact-modal__dialog,
.contact-modal:target .contact-modal__dialog {
  opacity: 1 !important;
  transform: translateY(0) !important;
}

/* Buttons */
#contact-modal .contact-modal__actions,
.contact-modal .contact-modal__actions {
  margin-top: 16px;
  display: flex;
  justify-content: flex-end;
  gap: 12px;
}
#contact-modal .contact-modal__btn,
.contact-modal .contact-modal__btn {
  padding: 10px 16px;
  border: 0;
  border-radius: 10px;
  cursor: pointer;
}

/* Body-Lock wenn Modal offen (wirksam nur bei JS-Variante) */
body.modal-open { overflow: hidden; touch-action: none; }

/* Kleinere Screens */
@media (max-width: 420px) {
  #contact-modal .contact-modal__dialog,
  .contact-modal .contact-modal__dialog {
    padding: 18px;
    border-radius: 12px;
  }
}

/* Reduced Motion */
@media (prefers-reduced-motion: reduce) {
  #contact-modal .contact-modal__dialog,
  .contact-modal .contact-modal__dialog {
    transition: none;
  }
}