@import url(lightbox.min.css);
    :root {
      --color-primary: #0d3c47;
      --color-primary-light: #f4f7fb;
      --color-accent: #9d680e;
      --color-text: #1f2933;
      --color-muted: #6b7280;
      --color-border: #e5e7eb;
      --color-bg: #ffffff;
      --max-width: 1200px;
      --radius-soft: 12px;
      --radius-card: 16px;
      --shadow-soft: 0 8px 24px rgba(15, 23, 42, 0.08);

      /* 
      petrol  #0d3c47
      
      */
    }
/*offset- versatz*/

:root {
  /* ... deine anderen Variablen ... */
  --anchor-offset: 90px; /* Abstand unter dem fixierten Header */
}


section[id] {
  scroll-margin-top: var(--anchor-offset);
}


[id].section-anchor,
section[id],
h2[id] {
  scroll-margin-top: var(--anchor-offset);
}



    * {
      box-sizing: border-box;
    }

    html {
      scroll-behavior: smooth;
    }

    body {
      margin: 0;
      font-family:Outfit, sans-serif;
      color: var(--color-text);
      background-color: #fff;
      line-height: 1.6;
    }

    img {
      max-width: 100%;
      display: block;
    }

    a {
      color: var(--color-primary);
      text-decoration: none;
    }

    a:hover {
      text-decoration: underline;
    }

    .container {
      max-width: var(--max-width);
      margin: 0 auto;
      padding: 0 1.5rem;
    }

    section {
      padding: 60px 0;
    }

.btn-primary,.lagevorteile-cta-button,.hero-video-button{text-transform: uppercase !important;}

    section.padding-unten{padding-bottom:0 !important}
    h1, h2, h3, h4 {
      color: #111827;
      margin-top: 0;
      line-height: 1.2;
      font-family: 'DM Serif Display';
    }
h2{font-weight:400 !important;
}
      h3, h4 {
      font-family:inherit;
    }
    h1 {
      font-size: clamp(2.2rem, 3vw, 3rem);
      letter-spacing: 0.02em;
    }

    h2 {
      font-size: clamp(1.8rem, 2.4vw, 2.4rem);
      margin-bottom: 0.75rem;
    }

    h3{
      font-size: 1.3rem;
      margin:2em 0 0.5rem;

    }
h2,h3{font-weight: 400 !important;}
      h3.eyebrow {
      font-size: 1.3rem;
      margin:1em 0 1rem;

    }
      footer h3.eyebrow {
      font-size: 0.8rem !important;
      margin:1em 0 1rem;

    }
    p {
      margin: 0 0 0.75rem;
    }

    .eyebrow {
  
      letter-spacing: 0.16em;
      font-size: 1.1rem !important;
      font-weight: 400;
      color: var(--color-accent);
    }

    /* Header & Navigation */

    header {
      position: sticky;
      top: 0;
      z-index: 1000;
      background-color: rgba(255, 255, 255, 0.98);
      backdrop-filter: blur(10px);
      border-bottom: 1px solid var(--color-border);
    }

    .header-inner {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 0.9rem 1.5rem;
      max-width: var(--max-width);
      margin:auto;
    }

    .logo {
      display: flex;
      flex-direction: column;
      gap: 0.1rem;
    }

    .logo-main img{
        width:100%;
max-width:200px;
    }

    .logo-sub {
      font-size: 0.8rem;
      color: var(--color-muted);
    }

    nav {
      display: flex;
      align-items: center;
      gap: 1.5rem;
    }

    .nav-links {
      list-style: none;
      display: flex;
      gap: 1.5rem;
      margin: 0;
      padding: 0;
    }

    .nav-links a {
      font-size: 0.95rem;
      font-weight: 500;
      color: #374151;
      color:#fff;
    }

    .nav-links a:hover,
    .nav-links a:focus-visible {
      color: var(--color-primary);
    }

.menu-toggle {
 border: 0px solid var(--color-border);
  background-color: #ffffff;
  border-radius: 999px;
  padding: 0.4rem 0.75rem;
  font-size: 0.9rem;
  align-items: center;
  gap: 0.4rem;
  cursor: pointer;
  display: none; /* wird nur mobil eingeblendet */
}

/* Nur das sichtbare Icon bekommt die Striche */
.menu-toggle .menu-icon {
  display: block;
  width: 16px;
  height: 2px;
  background-color: #111827;
  position: relative;
  transition: background-color 0.2s ease;
}

/* obere + untere Linie */
.menu-toggle .menu-icon::before,
.menu-toggle .menu-icon::after {
  content: "";
  position: absolute;
  left: 0;
  width: 16px;
  height: 2px;
  background-color: #111827;
  transition: transform 0.2s ease, top 0.2s ease;
}

.menu-toggle .menu-icon::before {
  top: -5px;
}

.menu-toggle .menu-icon::after {
  top: 5px;
}

/* Optionale „X“-Animation, wenn geöffnet (aria-expanded = true) */
.menu-toggle[aria-expanded="true"] .menu-icon {
  background-color: transparent;
}

.menu-toggle[aria-expanded="true"] .menu-icon::before {
  top: 0;
  transform: rotate(45deg);
}

.menu-toggle[aria-expanded="true"] .menu-icon::after {
  top: 0;
  transform: rotate(-45deg);
}


    .btn-primary,
    .btn-outline {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 0.35rem;
      padding: 0.7rem 1.4rem;
      border-radius: 999px;
      font-size: 0.95rem;
      font-weight: 600;
      border: none;
      cursor: pointer;
      text-decoration: none;
      white-space: nowrap;
    }

    .btn-primary {
      background:#0d3c47;
      color: #ffffff;
      box-shadow: var(--shadow-soft);
    }

    .btn-primary:hover,.lagevorteile-cta-button:hover,
    .btn-primary:focus-visible {
      filter: brightness(1.05);
      text-decoration: none;
      background:var(--color-accent) !important;
    }

    .btn-outline {
      background-color: transparent;
      color: var(--color-primary);
      border: 1px solid var(--color-border);
    }

    .btn-outline:hover,
    .btn-outline:focus-visible {
      background-color: #eef2f7;
      text-decoration: none;
    }

.hero-video {
  position: relative;
  background-color: #000;
  color: #ffffff;
}


/* Platz nach oben schaffen, damit der fixe Header nichts überdeckt */



















  /* Abschnitt allgemein */
/* Abschnitt allgemein */
.apartments-section {
  padding: 80px 0;
  background-color: #ffffff;
}

.apartments-header {
  text-align: center;
  margin-bottom: 2.5rem;
}

.apartments-header h2 {
  margin: 0 0 0.5rem;
  font-size: clamp(2rem, 2.6vw, 2.4rem);
}

.apartments-header p {
  margin: 0;
  color: var(--color-muted, #4b5563);
}

/* Grid: 3 → 2 → 1 Spalte */
.apartments-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 2.5rem;
}

/* Karten */
.apartment-card {
  display: flex;
  flex-direction: column;
  background-color: #ffffff;
  border-radius: 16px;
  border-radius: 0px;
  overflow: hidden;
  box-shadow: 0 12px 30px rgba(15, 23, 42, 0.12);
}

/* Bild */
.apartment-image img {
  display: block;
  width: 100%;
  height: auto;
}

/* Inhalt */
.apartment-body {
  padding: 1.8rem 1.6rem 1.9rem;
  text-align: center;
}

.apartment-body h3 {
  margin: 0 0 0.3rem;
  font-size: 1.25rem;
  color: #0b3b45; /* Hauptfarbe */
}

.apartment-subtitle {
  margin: 0 0 1.6rem;
  font-size: 1rem;
  color: #c49a47; /* goldener Ton wie im Layout */
}

/* Attribute: alles untereinander */
.apartment-attributes {
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
  margin-bottom: 1.6rem;
}

.apartment-attr {
  text-align: center;
}

.apartment-attr .attr-label {
  font-size: 0.75rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-muted, #6b7280);
  margin-bottom: 0.15rem;
}

.apartment-attr .attr-value {
  font-size: 0.95rem;
  font-weight: 600;
  color: #111827;
}

/* Button – nutzt deine vorhandene .btn-primary, hier nur Breite anpassen */
.primary-button {
  width: 100%;
  justify-content: center;
  margin-top: 0.3rem;
}

/* Breakpoints */
@media (max-width: 1024px) {
  .apartments-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 640px) {
  .apartments-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .apartments-section {
    padding-inline: 1.1rem;
  }
}


.avenia-about-section {
  padding: 80px 0;
  background-color: #ffffff;
}

/* 2-Spalten-Layout gesamt */
.avenia-about-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  gap: 2.5rem;
  align-items: flex-start;
}

/* Linke Spalte */
.avenia-about-left h2 {
  margin: 0 0 0.3rem;
  font-size: clamp(2rem, 2.6vw, 2.4rem);
  color: #0b3b45;
}

.avenia-about-subtitle {
  margin: 0 0 1.6rem;
  font-size: 1.05rem;
  color: #c49a47;
}

.avenia-about-subheading {
  margin: 1.4rem 0 0.4rem;
  font-size: 1.02rem;
  color: #c49a47;
  font-weight: 400;
}

.avenia-about-section p {
  margin: 0 0 0.9rem;
  font-size: 0.98rem;
  line-height: 1.7;
  color: #111827;
}

/* Bilder in beiden Spalten */
.avenia-about-image {
  margin: 0;
}

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

.avenia-about-image-bottom {
  margin-top: 1.8rem;
}

.avenia-about-image-top {
  margin-bottom: 1.6rem;
}

/* Rechte Spalte */
.avenia-about-right {
  display: flex;
  flex-direction: column;
}

.avenia-about-cta {
  margin-top: 1.4rem;
  display: inline-flex;
  justify-content: center;
  padding-inline: 2rem;
}

/* Responsiv: unter 900px einspaltig */
@media (max-width: 900px) {
  .avenia-about-layout {
    grid-template-columns: minmax(0, 1fr);
  }

  .avenia-about-section {
    padding-inline: 1.1rem;
  }

  .avenia-about-cta {
    width: 100%;
  }
}











  .wohnen-wuensche-section {
  padding: 80px 0;
  background-color: #ffffff;
}

/* 2-Spalten-Layout */
.wohnen-wuensche-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  gap: 2.5rem;
  align-items: flex-start;
}

/* Typografie allgemein */
.wohnen-wuensche-section h2 {
  margin: 0 0 0.3rem;
  font-size: clamp(2rem, 2.6vw, 2.4rem);
  color: #0b3b45; /* dunkelgrün/blau */
}

.wohnen-subtitle {
  margin: 0 0 1.6rem;
  font-size: 1.05rem;
  color: #c49a47; /* goldener Akzent */
}

.wohnen-subheading {
  margin: 1.6rem 0 0.4rem;
  font-size: 1.02rem;
  color: #c49a47;
}

.wohnen-wuensche-section p {
  margin: 0 0 0.9rem;
  font-size: 0.98rem;
  line-height: 1.7;
  color: #111827;
}

/* Bilder */
.wohnen-image {
  margin: 0;
}

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

.wohnen-image-top {
  margin-bottom: 1.6rem;
}

.wohnen-image-bottom {
  margin-top: 1.8rem;
}

/* CTA-Button links */
.wohnen-cta {
  margin-top: 1.4rem;
  display: inline-flex;
  justify-content: center;
  padding-inline: 2rem;
}

/* Rechte Spalte leicht strukturieren */
.wohnen-right {
  display: flex;
  flex-direction: column;
}

/* Responsiv: unter 900px einspaltig */
@media (max-width: 900px) {
  .wohnen-wuensche-layout {
    grid-template-columns: minmax(0, 1fr);
  }

  .wohnen-wuensche-section {
    padding-inline: 1.1rem;
  }

  .wohnen-cta {
    width: 100%;
  }

  .wohnen-image-top,
  .wohnen-image-bottom {
    margin-top: 1.2rem;
    margin-bottom: 1.6rem;
  }
}











.faq-section {
  padding: 80px 0;
  background-color: #ffffff;
}

.faq-header {
  text-align: center;
  max-width: 800px;
  margin: 0 auto 2.5rem;
}

.faq-header h2 {
  margin: 0 0 0.4rem;
  font-size: clamp(2rem, 2.6vw, 2.4rem);
  color: #0b3b45; /* Haupttitel-Farbe */
}

.faq-subtitle {
  margin: 0;
  font-size: 1rem;
  color: #c49a47; /* goldener Akzent */
}

/* Liste einspaltig, zentriert */
.faq-list {
  max-width: 900px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

/* Grundstil für das Akkordeon-Element */
.faq-item {
  border-radius: 6px;
  overflow: hidden;
  background-color: transparent;
}

/* Frage-Zeile wie breiter Button */
.faq-question {
  list-style: none;
  cursor: pointer;
  padding: 0.9rem 1.4rem;
  background-color: #0b3b45; /* dunkles Grün/Blau wie Buttons */
  color: #ffffff;
  font-weight: 600;
  font-size: 0.98rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* Standard-Dreieck von summary entfernen */
.faq-question::-webkit-details-marker {
  display: none;
}

/* Pfeil-Symbol rechts */
.faq-question::after {
  content: "▾";
  font-size: 0.9rem;
  margin-left: 0.75rem;
}

/* Geöffneter Zustand */
.faq-item[open] .faq-question::after {
  content: "▴";
}

/* Antwortbereich */
.faq-answer {
  border: 1px solid #d1d5db;
  border-top: none;
  border-radius: 0 0 6px 6px;
  padding: 1.1rem 1.4rem 1.2rem;
  font-size: 0.95rem;
  line-height: 1.7;
  color: #111827;
  background-color: #ffffff;
}

/* Zusammen mit Frage optisch verbinden */
.faq-item[open] .faq-question {
  border-radius: 6px 6px 0 0;
}

/* Responsiv */
@media (max-width: 640px) {
  .faq-section {
    padding-inline: 1.1rem;
  }

  .faq-question {
    font-size: 0.95rem;
  }
}



  .contact-section {
  padding: 80px 0;
  background-color: #f9fafb;
}

/* Header / Intro */
.contact-header {
  max-width: 720px;
  margin: 0 auto 2.5rem;
  text-align: center;
}

.contact-header h2 {
  margin: 0 0 0.3rem;
  font-size: clamp(2rem, 2.6vw, 2.4rem);
  color: #0b3b45; /* Hauptfarbe */
}

.contact-subtitle {
  margin: 0 0 1rem;
  font-size: 1.05rem;
  color: #c49a47; /* Gold-Akzent */
}

.contact-intro {
  margin: 0;
  font-size: 0.96rem;
  line-height: 1.7;
  color: #4b5563;
}

/* Formular-Layout */
.contact-form {
  max-width: 900px;
  margin: 0 auto;
  background-color: #ffffff;
  padding: 2.2rem 2.1rem;
  border-radius: 16px;
  box-shadow: 0 12px 30px rgba(15, 23, 42, 0.08);
}

/* 2-spaltiges Grid für Felder */
.contact-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.4rem 1.6rem;
}

/* Volle Breite für Textarea */
.form-field-full {
  grid-column: 1 / -1;
}

/* Form-Felder */
.form-field label {
  display: block;
  margin-bottom: 0.25rem;
  font-size: 0.78rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #6b7280;
}

.form-field input,
.form-field textarea {
  width: 100%;
  padding: 0.65rem 0.75rem;
  border-radius: 8px;
  border: 1px solid #d1d5db;
  font-size: 0.95rem;
  color: #111827;
  background-color: #ffffff;
  outline: none;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}


.form-field select{
  width: 100%;
  padding: 0.65rem 0.75rem;
  border-radius: 8px;
  border: 1px solid #d1d5db;
  font-size: 0.95rem;
  color: #111827;
  background-color: #ffffff;
  outline: none;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.form-field input:focus,
.form-field textarea:focus {
  border-color: #0b3b45;
  box-shadow: 0 0 0 2px rgba(11, 59, 69, 0.15);
}

/* Footer: Checkbox + Button */
.contact-footer {
  margin-top: 1.8rem;
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
}

/* Checkbox */
.checkbox-field {
  display: flex;
  align-items: flex-start;
  gap: 0.55rem;
  font-size: 0.85rem;
  color: #4b5563;
}

.checkbox-field input[type="checkbox"] {
  margin-top: 0.18rem;
}

/* Submit-Button nutzt vorhandene .btn-primary */
.contact-submit {
  align-self: flex-start;
  padding: 0.7rem 2.4rem;
  font-size: 0.95rem;
  font-weight: 600;
}

/* Responsiv */
@media (max-width: 900px) {
  .contact-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .contact-form {
    padding: 1.7rem 1.4rem;
  }

  .contact-section {
    padding-inline: 1.1rem;
  }

  .contact-submit {
    width: 100%;
    justify-content: center;
  }
}














.nachhaltig-section {
padding: 80px 0;
background-color: #ffffff;
}

/* Header / Intro */
.nachhaltig-header {
text-align: center;
max-width: 800px;
margin: 0 auto 2.5rem;
}

.nachhaltig-header h2 {
margin: 0 0 0.3rem;
font-size: clamp(2rem, 2.7vw, 2.5rem);
color: #0b3b45; /* dunkles Blau/Grün */
}

.nachhaltig-subtitle {
margin: 0 0 1.3rem;
font-size: 1.05rem;
color: #c49a47; /* Gold-Akzent */
}

.nachhaltig-intro {
margin: 0;
font-size: 0.98rem;
line-height: 1.7;
color: #111827;
}

/* 2-spaltiges Grid */
.nachhaltig-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 3.75rem 3.75rem; /* ca. 60px vertikal/horizontal */
margin-top: 3rem;
}

/* Karten */
.eco-card {
background-color: #05333a;  /* dunkler Petrol-Ton */
color: #ffffff;
border-radius: 16px;
padding: 2.4rem 2.2rem;
text-align: center;
box-shadow: 0 12px 30px rgba(0, 0, 0, 0.18);
}

.eco-icon {
font-size: 2.6rem;
margin-bottom: 1.4rem;
}

.eco-card h3 {
margin: 0 0 0.8rem;
font-size: 1.15rem;
color: #c49a47; /* Titel in Gold */
font-weight: 400;
}

.eco-card p {
margin: 0;
font-size: 0.95rem;
line-height: 1.7;
}

/* CTA */
.nachhaltig-cta {
margin-top: 3rem;
text-align: center;
}

.nachhaltig-btn {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0.7rem 2.2rem;
font-size: 0.95rem;
font-weight: 600;
text-decoration: none;
}

/* Responsiv: unter 900px einspaltig */
@media (max-width: 900px) {
.nachhaltig-section {
  padding-inline: 1.1rem;
}

.nachhaltig-grid {
  grid-template-columns: minmax(0, 1fr);
}

.eco-card {
  padding: 2rem 1.6rem;
}

.nachhaltig-btn {
  width: 100%;
}
}










/* Ihre Vorteile im Überblick*/

  .vorteile-section {
  padding: 80px 0;
  background-color: #ffffff;
}

/* Zweispaltiges Layout */
.vorteile-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  gap: 2.5rem;
  align-items: flex-start;
}

/* Typografie links */
.vorteile-left h2 {
  margin: 0 0 0.3rem;
  font-size: clamp(2rem, 2.6vw, 2.4rem);
  color: #0b3b45;               /* dunkles Grün/Blau */
}

.vorteile-subtitle {
  margin: 0 0 1.6rem;
  font-size: 1.05rem;
  color: #c49a47;               /* goldener Akzent */
}

.vorteile-left p {
  margin: 0 0 0.9rem;
  font-size: 0.98rem;
  line-height: 1.7;
  color: #111827;
}

/* Bilder */
.vorteile-image {
  margin: 1.8rem 0 0;
}

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

.vorteile-image-top {
  margin-top: 0;
  margin-bottom: 1.6rem;
}

/* Rechte Spalte */
.vorteile-right-text p {
  margin: 0 0 0.9rem;
  font-size: 0.98rem;
  line-height: 1.7;
  color: #111827;
}

/* Goldene Zwischenüberschriften */
.vorteile-section strong {
  font-weight: 400;
  color: #c49a47;
}

/* CTA-Button rechts */
.vorteile-cta {
  margin-top: 1.6rem;
  display: inline-flex;
  justify-content: center;
  width: 100%;
}

/* Responsiv – ab 900px einspaltig */
@media (max-width: 900px) {
  .vorteile-layout {
    grid-template-columns: minmax(0, 1fr);
  }

  .vorteile-section {
    padding-inline: 1.1rem;
  }

  .vorteile-image-top {
    margin-top: 1rem;
  }

  .vorteile-cta {
    width: 100%;
  }
}








  .besonderes-section {
  padding: 80px 0;
  background-color: #ffffff;
}

/* Grid-Layout: 2-spaltig, später 1-spaltig */
.besonderes-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
  gap: 2.5rem;
  align-items: flex-start;
}

/* Linke Spalte */
.besonderes-left h2 {
  margin: 0 0 0.25rem;
  font-size: clamp(2rem, 2.6vw, 2.4rem);
  color: #0b3b45; /* dunkles Grün/Blau wie im Layout */
}

.besonderes-subtitle {
  margin: 0 0 1.8rem;
  font-size: 1.05rem;
  color: #c49a47; /* goldener Akzentton */
  font-weight: 400;
}

.besonderes-left p {
  margin: 0 0 0.9rem;
  font-size: 0.98rem;
  line-height: 1.7;
  color: #111827;
}

/* Bild unter dem Text */
.besonderes-image {
  margin: 1.8rem 0 0;
}

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

/* Rechte Spalte */
.besonderes-right p {
  margin: 0 0 0.9rem;
  font-size: 0.98rem;
  line-height: 1.7;
  color: #111827;
}

/* Hervorhebung der Stichworte */
.besonderes-section strong {
  font-weight: 400;
  color: #c49a47; /* goldener Akzent */
}

/* Responsiv: ab 900px einspaltig */
@media (max-width: 900px) {
  .besonderes-layout {
    grid-template-columns: minmax(0, 1fr);
  }

  .besonderes-section {
    padding-inline: 1.1rem;
  }

  .besonderes-image {
    margin-top: 1.5rem;
  }
}














/* Fixierter, halbtransparenter Header */
.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: var(--header-height);
  z-index: 999999;
  background-color: rgba(11, 59, 69, 0.7); /* halbtransparentes Weiß */
  backdrop-filter: blur(10px);                 /* leichter Blur-Effekt */
  border-bottom: 1px solid var(--color-border);
  
}

/* Inhalt im Header ausrichten wie zuvor */
.header-inner {
  max-width: var(--max-width);
  margin: 0 auto;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* Optional: kleine Anpassung für Mobile */
@media (max-width: 960px) {
  .header-inner {
    padding-inline: 1rem;
  }
}



  /* ===== Hero Video Section ===== */

  .hero-video-section {
    position: relative;
    width: 100%;
    min-height: 100vh;              /* Höhe des Heroes, gern anpassen */
    overflow: hidden;
    background-color: #000;        /* Fallback, falls Video nicht lädt */
  }
  
  /* Hintergrund-Video füllt die komplette Section */
  .hero-video-bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;             /* "cover" über die ganze Section */
    z-index: 0;
  }
  
  /* halbtransparenter Overlay-Layer über dem Video */
  .hero-video-layer {
    position: absolute;
    inset: 0;
    z-index: 1;
    background: rgba(0, 0, 0, 0.1);
  }
  
  .hero-video-content,
  .hero-video-content h1,
  .hero-video-content h2,
  .hero-video-content p,
  .hero-video-content .hero-video-eyebrow {
    color: #ffffff;
  }
  
  /* Container füllt die volle Höhe → Inhalt unten ausrichten */
  .hero-video-container {
    height: 100%;
    display: flex;
    align-items: flex-end;         /* vertikal nach unten */
  }
  
  /* Textblock unten links im Container */
  .hero-video-content {
    max-width: 520px;
    color: #ffffff;       /* Abstand zum unteren Rand */
    padding:20px;
    background:rgba(11, 59, 69, 0.3);
    margin-bottom:30px;
  }
  
  /* Typo & Button im Hero */
  .hero-video-eyebrow {
    margin: 0 0 0.4rem;
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.16em;
    opacity: 0.85;
  }
  
  .hero-video-title {
    margin: 0 0 0.7rem;
    font-size: clamp(2rem, 3.2vw, 2.6rem);
    line-height: 1.2;
  }
  
  .hero-video-text {
    margin: 0 0 1.1rem;
    font-size: 0.98rem;
    max-width: 40rem;
  }
  
  /* Button – gern an deine bestehenden Button-Styles anpassen */
  .hero-video-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.7rem 1.6rem;
    border-radius: 999px;
    border: none;
    background:#0d3c47;
    color: #ffffff;
    font-size: 0.95rem;
    font-weight: 600;
    text-decoration: none;
    box-shadow: 0 10px 30px rgba(15, 23, 42, 0.6);
  }
  
  .hero-video-button:hover,
  .hero-video-button:focus-visible {
    filter: brightness(1.08);
    text-decoration: none;
  }
  
  /* ===== Responsive Anpassungen ===== */
  
  @media (max-width: 900px) {
    .hero-video-section {
      min-height: 55vh;
    }
  
    .hero-video-content {
      padding-bottom: 2.2rem;
    }
  }
  
  @media (max-width: 640px) {
    .hero-video-section {
      min-height: 50vh;
    }
  
    .hero-video-title {
      font-size: 1.6rem;
    }
  
    .hero-video-text {
      font-size: 0.9rem;
    }
  
    .hero-video-content {
      padding-bottom: 0rem !important;

    }
  }







/* Wrapper bleibt im Container zentriert */
.hero-video-wrapper {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: 20px;
}

/* Video füllt den Bereich */
.hero-video-element {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Overlay soll zur linken Containerkante bündig sein */
.hero-video-overlay {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 2rem;
  display: flex;
  justify-content: flex-start; /* linksbündig */
}

/* Die eigentliche Box */
.hero-video-overlay-inner {
  max-width: 420px;
  background: rgba(15, 23, 42, 0.82);
  backdrop-filter: blur(6px);
  padding: 1.25rem 1.5rem;
  border-radius: 14px;
  box-shadow: 0 12px 35px rgba(0, 0, 0, 0.45);
}

/* Typo */
.overlay-eyebrow {
  margin: 0 0 0.25rem;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: #e5e7eb;
  opacity: 0.85;
}

.overlay-title {
  margin: 0 0 0.5rem;
  font-size: clamp(1.4rem, 2.3vw, 1.8rem);
  line-height: 1.2;
}

.overlay-text {
  margin: 0 0 0.9rem;
  font-size: 0.9rem;
  color: #e5e7eb;
}

/* Button */
.overlay-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.55rem 1.25rem;
  border-radius: 999px;
  border: none;
  background: linear-gradient(135deg, #1f3a5a, #122740);
  color: #ffffff;
  font-size: 0.9rem;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.5);
}

.overlay-button:hover,
.overlay-button:focus-visible {
  filter: brightness(1.08);
  text-decoration: none;
}

/* Responsive */
@media (max-width: 768px) {
  .hero-video-wrapper {
    border-radius: 0;
  }

  .hero-video-overlay {
    bottom: 1rem;
  }

  .hero-video-overlay-inner {
    max-width: none;
    width: 100%;
    margin-right: 1.5rem; /* wirkt gemeinsam mit .container Padding */
  }

  .overlay-title {
    font-size: 1.2rem;
  }

  .overlay-text {
    font-size: 0.85rem;
  }
}


    /* Hero */

    .hero {
      background: radial-gradient(circle at top left, #e5edf7 0, #f9fafb 40%, #ffffff 100%);
      padding-top: 80px;
      padding-bottom: 60px;
    }

    .hero-grid {
      display: grid;
      grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
      gap: 3rem;
      align-items: center;
    }

    .hero-lead {
      font-size: 1.05rem;
      color: #4b5563;
      max-width: 40rem;
    }

    .hero-badges {
      display: flex;
      flex-wrap: wrap;
      gap: 0.5rem;
      margin: 1rem 0 1.5rem;
    }

    .badge {
      font-size: 0.8rem;
      padding: 0.25rem 0.7rem;
      border-radius: 999px;
      border: 1px solid #d1d5db;
      background-color: #ffffff;
      color: #4b5563;
    }

    .hero-cta {
      display: flex;
      flex-wrap: wrap;
      gap: 0.75rem;
      align-items: center;
      margin-bottom: 1rem;
    }

    .hero-note {
      font-size: 0.85rem;
      color: var(--color-muted);
    }

    .hero-highlight {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 1.5rem;
      margin-top: 1.5rem;
      font-size: 0.9rem;
    }

    .hero-highlight-item span {
      display: block;
    }

    .hero-highlight-item .label {
      text-transform: uppercase;
      letter-spacing: 0.12em;
      font-size: 0.75rem;
      color: var(--color-muted);
      margin-bottom: 0.25rem;
    }

    .hero-highlight-item .value {
      font-weight: 600;
      color: #111827;
    }

    .hero-media {
      max-width: 520px;
      margin-left: auto;
    }

    .hero-media-inner {
      background-color: #111827;
      border-radius: 24px;
      padding: 1.2rem;
      box-shadow: var(--shadow-soft);
      color: #f9fafb;
      position: relative;
      overflow: hidden;
    }

    .hero-media-tag {
      font-size: 0.75rem;
      text-transform: uppercase;
      letter-spacing: 0.14em;
      color: #9ca3af;
      margin-bottom: 0.4rem;
    }

    .hero-media-main {
      background: linear-gradient(135deg, #1f2937, #111827);
      border-radius: 18px;
      padding: 1rem;
      min-height: 200px;
      display: flex;
      align-items: center;
      justify-content: center;
      position: relative;
    }

    .hero-media-main::before {
      content: "";
      position: absolute;
      inset: 14px;
      border-radius: 14px;
      border: 1px dashed rgba(209, 213, 219, 0.7);
    }

    .hero-media-placeholder {
      text-align: center;
      max-width: 16rem;
      z-index: 1;
    }

    .hero-media-placeholder h3 {
      color: #e5e7eb;
      font-size: 1.05rem;
      margin-bottom: 0.25rem;
    }

    .hero-media-placeholder p {
      font-size: 0.85rem;
      color: #9ca3af;
    }

    .hero-media-footer {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-top: 0.8rem;
      font-size: 0.8rem;
      color: #9ca3af;
    }

    .hero-tag-pill {
      border-radius: 999px;
      padding: 0.25rem 0.7rem;
      background-color: rgba(31, 41, 55, 0.7);
      display: inline-flex;
      align-items: center;
      gap: 0.4rem;
      font-size: 0.78rem;
    }

    .hero-tag-dot {
      width: 7px;
      height: 7px;
      border-radius: 999px;
      background-color: #22c55e;
    }




    /*spalten-layout*/
    .section-zweispaltig {
      padding: 80px 0; /* oben / unten 80px, wie gewünscht */
      background-color: #ffffff;
    }
    
    /* Grid mit 2 Spalten */
    .section-zweispaltig-grid {
      display: grid;
      grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
      gap: 2.5rem;
      align-items: flex-start;
    }
    
    /* Allgemeine Spalten-Styles */
    .section-zweispaltig-col h2 {
      margin-top: 0;
      margin-bottom: 0.75rem;
      font-size: clamp(1.8rem, 2.4vw, 2.2rem);
    }
    
    .section-zweispaltig-col p {
      margin: 0 0 0.75rem;
      font-size: 0.98rem;
    }
    
    /* Medien-Platzhalter (kannst du durch <img> etc. ersetzen) */
    .section-zweispaltig-media .media-placeholder {
      border-radius: 16px;
      border: 1px dashed var(--color-border);
      padding: 2.5rem 1.5rem;
      text-align: center;
      font-size: 0.9rem;
      color: var(--color-muted);
      background: #f9fafb;
    }
    
    /* Breakpoint: ab 768px und kleiner → einspaltig, untereinander */
    @media (max-width: 768px) {
      .section-zweispaltig-grid {
        grid-template-columns: minmax(0, 1fr);
      }
    
      .section-zweispaltig {
        padding: 80px 1.1rem; /* optional seitlich etwas enger auf Handy */
      }
    }






    /*Lage-vorteile*/
    .lagevorteile {
      padding: 80px 0;
      background-color: #ffffff;
    }
    
    .lagevorteile-header {
      text-align: center;
      margin-bottom: 2.5rem;
    }
    
    .lagevorteile-header h2 {
      margin: 0;
      font-size: clamp(1.9rem, 2.6vw, 2.3rem);
    }
    
    /* Grid: 3 Spalten → bei 900px 2 Spalten → bei schmal 1 Spalte */
    .lagevorteile-grid {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 2.5rem;
    }
    
    /* Card-Design */
    .lagevorteile-card {
      background-color: #0d3c47; /* dunkler Petrol-Ton wie im Screenshot */
      color: #ffffff;
      border-radius: 16px;
      padding: 2.2rem 2rem;
      min-height: 260px;
      display: flex;
      flex-direction: column;
      justify-content: flex-start;
      box-shadow: 0 10px 30px rgba(0, 0, 0, 0.18);
     
    }
    .lagevorteile-card img,
    .eco-card img
    {width:80px; display:block;margin:0 auto 30px;}
    
    .lagevorteile-icon {
      font-size: 2.4rem;
      margin-bottom: 1.4rem;
    }
    
    .lagevorteile-card h3 {
      margin: 0 0 0.7rem;
      font-size: 1.15rem;
      text-align: center;
    }
    
    .lagevorteile-card ul {
      margin: 0;
      padding-left: 1.1rem;
      font-size: 0.95rem;
      line-height: 1.6;
    
    }
    
    /* CTA-Button unter den Cards */
    .lagevorteile-cta {
      margin-top: 2.5rem;
      text-align: center;
    }
    
    .lagevorteile-cta-button {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      padding: 0.7rem 1.8rem;
      border-radius: 999px;
      border: none;
      background-color: #0d3c47;
      color: #ffffff;
      font-size: 0.95rem;
      font-weight: 600;
      text-decoration: none;
      letter-spacing: 0.06em;
    }
    
    .lagevorteile-cta-button:hover,
    .lagevorteile-cta-button:focus-visible {
      filter: brightness(1.08);
      text-decoration: none;
    }
    
    /* Breakpoints */
    @media (max-width: 900px) {
      .lagevorteile-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }
    }
    
    @media (max-width: 640px) {
      .lagevorteile-grid {
        grid-template-columns: minmax(0, 1fr);
      }
    
      .lagevorteile {
        padding-inline: 1.1rem;
      }
    }














    /*intro-text*/
    .avenia-overview {
      background-color: #0b3b45;   /* Petrol-Ton aus dem Screenshot */
      color: #ffffff;
      padding: 80px 0;             /* oben/unten immer 80px */
    }
    
    .avenia-overview-inner {
      max-width: 800px;            /* Textbreite begrenzen */
      margin: 0 auto;              /* im Container zentrieren */
      text-align: center;
    }
    
    /* Überschriften passend zum restlichen Layout */
    .avenia-overview h2 {
      margin: 0 0 0.5rem;
      font-size: clamp(2rem, 3vw, 2.6rem);
      letter-spacing: 0.12em;
  
      color:#fff;
    }
    main a{text-decoration: underline;}
    
    .avenia-overview-subtitle {
      margin: 0 0 1.8rem;
      font-size: 1.3rem;
    }
    
    /* Fließtext */
    .avenia-overview p {
      margin: 0 0 1rem;
      font-size: 0.98rem;
      line-height: 1.7;
    }
    
    /* Letzter, betonter Satz */
    .avenia-overview-highlight {
      margin-top: 1.5rem;
      font-weight: 700;
    }




    /* Section helpers */

    .section-header {
      max-width: 48rem;
      margin-bottom: 1.5rem;
    }

    .section-header p {
      color: var(--color-muted);
    }

    .section-layout {
      display: grid;
      grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
      gap: 2.5rem;
      align-items: flex-start;
    }

    .section-layout.reverse {
      grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
    }

    .card {
      background-color: var(--color-bg);
      border-radius: var(--radius-card);
      padding: 1.5rem;
      box-shadow: var(--shadow-soft);
      border: 1px solid rgba(15, 23, 42, 0.04);
    }

    .card-muted {
      background-color: var(--color-primary-light);
      border-color: rgba(148, 163, 184, 0.3);
    }

    /* Wohnlage & Karte */

    .pill-row {
      display: flex;
      flex-wrap: wrap;
      gap: 0.5rem;
      margin-bottom: 1rem;
    }

    .pill {
      font-size: 0.8rem;
      padding: 0.25rem 0.7rem;
      border-radius: 999px;
      border: 1px solid #d1d5db;
      background-color: #ffffff;
      color: #4b5563;
    }

    .feature-columns {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
      gap: 1.5rem;
      margin-top: 1rem;
    }

    .feature-columns h3 {
      font-size: 1rem;
    }

    .feature-columns ul {
      margin: 0.4rem 0 0;
      padding-left: 1.1rem;
      font-size: 0.9rem;
      color: var(--color-muted);
    }

    .media-card {
      background-color: #111827;
      border-radius: 18px;
      padding: 1rem;
      box-shadow: var(--shadow-soft);
      color: #e5e7eb;
    }

    .media-card-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      font-size: 0.85rem;
      margin-bottom: 0.5rem;
      color: #9ca3af;
    }

    .media-tag {
      text-transform: uppercase;
      letter-spacing: 0.14em;
      font-size: 0.72rem;
    }

    .media-badge {
      padding: 0.2rem 0.6rem;
      border-radius: 999px;
      border: 1px solid rgba(148, 163, 184, 0.8);
      font-size: 0.72rem;
    }

    .map-preview {
      background: radial-gradient(circle at top, #334155 0, #020617 60%);
      border-radius: 14px;
      min-height: 260px;
      position: relative;
      overflow: hidden;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .map-preview::before {
      content: "";
      position: absolute;
      inset: 16px;
      border-radius: 10px;
      border: 1px dashed rgba(148, 163, 184, 0.7);
    }

    .map-preview-label {
      position: relative;
      text-align: center;
      max-width: 16rem;
      font-size: 0.9rem;
    }

    .map-preview-label strong {
      display: block;
      margin-bottom: 0.25rem;
      color: #f9fafb;
    }

    .map-preview-label span {
      color: #9ca3af;
      font-size: 0.8rem;
    }

    .media-card-footer {
      margin-top: 0.7rem;
      display: flex;
      justify-content: space-between;
      align-items: center;
      font-size: 0.78rem;
      color: #9ca3af;
    }

    /*Parallax-effekt break*/

      

.avenia-parallax {
position: relative;
min-height: 50vh; /* 30% der Viewport-Höhe */
background-image: url("../bilder/04_Break/04-break-image-avenia.jpg"); /* >>> Bildpfad anpassen */
background-size: cover;
background-position: center center;
background-repeat: no-repeat;
background-attachment: fixed; /* Parallax-Effekt beim Scrollen */
overflow: hidden;
}

.avenia-parallax-2 {
position: relative;
min-height: 50vh; /* 30% der Viewport-Höhe */
background-image: url("../bilder/11_Break/11-break-image-avenia.jpg"); /* >>> Bildpfad anpassen */
background-size: cover;
background-position: center center;
background-repeat: no-repeat;
background-attachment: fixed; /* Parallax-Effekt beim Scrollen */
overflow: hidden;
}

.avenia-parallax-3 {
position: relative;
min-height: 50vh; /* 30% der Viewport-Höhe */
background-image: url("../bilder/15_Break/15-break-image-avenia.jpg"); /* >>> Bildpfad anpassen */
background-size: cover;
background-position: center center;
background-repeat: no-repeat;
background-attachment: fixed; /* Parallax-Effekt beim Scrollen */
overflow: hidden;
}
/* Halbtransparente Tönung über dem Bild (optional) */
.avenia-parallax-overlay {
position: absolute;
inset: 0;
background: radial-gradient(circle at top, rgba(15, 23, 42, 0.35), rgba(15, 23, 42, 0.65));
}

/* Inhalt mittig zur Containerbreite ausrichten */
.avenia-parallax-inner {
position: relative;
height: 100%;
display: flex;
align-items: center;
}

/* Textblock */
.avenia-parallax-content {
max-width: 520px;
color: #ffffff;
}

.avenia-parallax-content h2 {
margin: 0 0 0.5rem;
font-size: clamp(1.8rem, 3vw, 2.4rem);
color:#fff;
}

.avenia-parallax-content p {
margin: 0 0 0.5rem;
font-size: 0.98rem;
}

/* Kleinere Screens: Parallax-Fallback, damit iOS nicht spinnt */
@media (max-width: 768px) {
.avenia-parallax {
  background-attachment: scroll; /* Fallback auf Mobile */
  min-height: 30vh;
}
}


    /* Wohnungen / Apartment-Typen */

    .apartment-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
      gap: 1.75rem;
      margin-top: 1.5rem;
    }

    .apartment-card {
      position: relative;
      overflow: hidden;
    }

    .apartment-tag {
      font-size: 0.78rem;
      text-transform: uppercase;
      letter-spacing: 0.12em;
      color: var(--color-accent);
      margin-bottom: 0.35rem;
    }

    .apartment-sub {
      font-size: 0.9rem;
      color: var(--color-muted);
      margin-bottom: 0.75rem;
    }

    .apartment-meta {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 0.5rem 1rem;
      font-size: 0.85rem;
      margin-bottom: 0.9rem;
    }

    .meta-label {
      text-transform: uppercase;
      letter-spacing: 0.12em;
      font-size: 0.72rem;
      color: var(--color-muted);
    }

    .meta-value {
      font-weight: 600;
      color: #111827;
    }

    .media-box {
      margin-top: 0.9rem;
      border-radius: 10px;
      border: 1px dashed #e5e7eb;
      padding: 0.7rem 0.9rem;
      font-size: 0.8rem;
      background: repeating-linear-gradient(
        -45deg,
        #f9fafb,
        #f9fafb 6px,
        #f3f4f6 6px,
        #f3f4f6 12px
      );
    }

    .media-box strong {
      display: block;
      margin-bottom: 0.1rem;
    }

    /* Besonderheiten / Ausstattung */

    .icon-list {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
      gap: 1rem 1.5rem;
      margin-top: 1.25rem;
      font-size: 0.95rem;
    }

    .icon-list-item {
      display: grid;
      grid-template-columns: 32px minmax(0, 1fr);
      gap: 0.6rem;
      align-items: flex-start;
    }

    .icon-circle {
      width: 32px;
      height: 32px;
      border-radius: 999px;
      border: 1px solid #d1d5db;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 0.8rem;
      background-color: #ffffff;
    }

    .icon-list-item h3 {
      font-size: 0.95rem;
      margin-bottom: 0.15rem;
    }

    .icon-list-item p {
      font-size: 0.85rem;
      color: var(--color-muted);
      margin: 0;
    }

    /* Vorteile & Nachhaltigkeit */

    .benefit-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
      gap: 1.5rem;
      margin-top: 1.5rem;
    }

    .benefit-card h3 {
      font-size: 1rem;
      margin-bottom: 0.35rem;
    }

    .benefit-card p {
      font-size: 0.9rem;
      color: var(--color-muted);
      margin-bottom: 0.2rem;
    }

    .benefit-label {
      font-size: 0.8rem;
      text-transform: uppercase;
      letter-spacing: 0.14em;
      color: var(--color-muted);
      margin-bottom: 0.15rem;
    }

    .benefit-headline {
      font-weight: 600;
      color: #111827;
    }

    .benefit-list {
      margin: 0.4rem 0 0;
      padding-left: 1.1rem;
      font-size: 0.9rem;
      color: var(--color-muted);
    }

    /* Wohnen nach Ihren Wünschen */

    .customization-grid {
      display: grid;
      grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
      gap: 2rem;
      align-items: stretch;
      margin-top: 1.5rem;
    }

    .timeline {
      border-left: 2px solid #e5e7eb;
      padding-left: 1.25rem;
      margin-top: 0.75rem;
    }

    .timeline-step {
      margin-bottom: 1rem;
      position: relative;
    }

    .timeline-step::before {
      content: "";
      position: absolute;
      left: -1.4rem;
      top: 0.2rem;
      width: 9px;
      height: 9px;
      border-radius: 999px;
      background-color: var(--color-accent);
      box-shadow: 0 0 0 3px #fef3c7;
    }

    .timeline-step h3 {
      font-size: 0.95rem;
      margin-bottom: 0.15rem;
    }

    .timeline-step p {
      font-size: 0.9rem;
      color: var(--color-muted);
      margin: 0;
    }

    /* FAQs */

    .faq-grid {
      display: grid;
      grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
      gap: 2rem;
      align-items: flex-start;
    }

    details {
      border-radius: 10px;
      /*border: 1px solid #e5e7eb;*/
      background-color: #ffffff;
      padding: 0.9rem 1rem;
      margin-bottom: 0.7rem;
    }

    summary {
      cursor: pointer;
      list-style: none;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 0.75rem;
      font-weight: 500;
      font-size: 0.95rem;
    }

    summary::-webkit-details-marker {
      display: none;
    }

    .faq-icon {
      width: 18px;
      height: 18px;
      border-radius: 999px;
      border: 1px solid #d1d5db;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 0.9rem;
      color: #6b7280;
      flex-shrink: 0;
    }

    details[open] .faq-icon {
      background-color: #e5e7eb;
    }

    details p {
      margin-top: 0.5rem;
      font-size: 0.9rem;
      color: var(--color-muted);
    }

    /* Kontaktformular */

    .contact-section {
      background: linear-gradient(135deg, #0f172a, #1f2937);
      color: #e5e7eb;
    }

    .contact-layout {
      display: grid;
      grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
      gap: 2.5rem;
      align-items: flex-start;
    }

    .contact-left h2 {
      color: #f9fafb;
    }

    .contact-left p {
      color: #e5e7eb;
    }

    .contact-highlight {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
      gap: 1.25rem;
      margin-top: 1.25rem;
      font-size: 0.9rem;
    }

    .contact-highlight-item span {
      display: block;
    }

    .contact-highlight-item .label {
      text-transform: uppercase;
      letter-spacing: 0.14em;
      font-size: 0.75rem;
      color: #9ca3af;
      margin-bottom: 0.2rem;
    }

    .contact-highlight-item .value {
      font-weight: 600;
      color: #f9fafb;
    }

    form {
      background-color: #020617;
      border-radius: 16px;
      padding: 1.5rem;
      box-shadow: 0 14px 40px rgba(15, 23, 42, 0.55);
      border: 1px solid rgba(148, 163, 184, 0.5);
    }

    .form-grid {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 1rem;
    }

    .form-group {
      display: flex;
      flex-direction: column;
      gap: 0.25rem;
      margin-bottom: 0.75rem;
    }

    .form-group.full {
      grid-column: 1 / -1;
    }

    label {
      font-size: 0.8rem;
      text-transform: uppercase;
      letter-spacing: 0.14em;
      color: #9ca3af;
    }


    input::placeholder,
    textarea::placeholder {
      color: #6b7280;
    }

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

    .form-row-inline {
      display: flex;
      align-items: flex-start;
      gap: 0.5rem;
      font-size: 0.8rem;
      color: #e5e7eb;
      margin: 0.5rem 0 1rem;
    }

    .form-row-inline input[type="checkbox"] {
      margin-top: 0.1rem;
    }

    .form-help {
      font-size: 0.75rem;
      color: #9ca3af;
      margin-top: 0.25rem;
    }

    .btn-primary.btn-contact {
      width: 100%;
      justify-content: center;
      margin-top: 0.5rem;
    }

    /* Footer */

    footer {
      background-color: #020617;
      color: #9ca3af;
      padding: 2rem 0 0;
      font-size: 0.85rem;
    }

    .footer-top {
      display: grid;
      grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 1fr);
      gap: 2rem;
      margin-bottom: 1.5rem;
    }

    .footer-title {
      font-size: 0.85rem;
      text-transform: uppercase;
      letter-spacing: 0.16em;
      color: #e5e7eb;
      margin-bottom: 0.5rem;
    }

    .footer-brand h3 {
      margin: 0 0 0.35rem;
      font-size: 1rem;
      color: #f9fafb;
      letter-spacing: 0.12em;
      text-transform: uppercase;
    }

    .footer-brand p {
      margin: 0;
    }

    .footer-list {
      list-style: none;
      padding: 0;
      margin: 0.25rem 0 0;
    }

    .footer-list li {
      margin-bottom: 0.2rem;
    }

    .footer-list a {
      color: #e5e7eb;
      text-decoration: none;
    }

    .footer-list a:hover {
      text-decoration: underline;
    }

    .footer-bottom {
      border-top: 1px solid #111827;
      padding-top: 0.75rem;
      display: flex;
      justify-content: space-between;
      gap: 1rem;
      flex-wrap: wrap;
      align-items: center;
    }

    .footer-bottom a {
      color: #e5e7eb;
    }

    .footer-meta {
      display: flex;
      flex-wrap: wrap;
      gap: 1rem;
      align-items: center;
    }

    .footer-social {
      display: flex;
      gap: 0.75rem;
      align-items: center;
      font-size: 0.8rem;
    }

    .footer-social span {
      text-transform: uppercase;
      letter-spacing: 0.16em;
      font-size: 0.72rem;
      color: #6b7280;
    }

    .footer-social a {
      color: #9ca3af;
      text-decoration: none;
    }

    .footer-social a:hover {
      color: #e5e7eb;
    }

    /* Back to top button */

    .back-to-top {
      position: fixed;
      right: 1.25rem;
      bottom: 1.25rem;
      z-index: 900;
      background-color: #111827;
      color: #e5e7eb;
      border-radius: 999px;
      padding: 0.5rem 0.75rem;
      display: flex;
      align-items: center;
      gap: 0.4rem;
      font-size: 0.8rem;
      border: 1px solid #374151;
      cursor: pointer;
      box-shadow: 0 10px 30px rgba(15, 23, 42, 0.5);
    }

    .back-to-top span.icon {
      width: 18px;
      height: 18px;
      border-radius: 999px;
      border: 1px solid #9ca3af;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 0.8rem;
    }

    .back-to-top:hover {
      filter: brightness(1.1);
    }

    .sr-only {
      position: absolute;
      width: 1px;
      height: 1px;
      padding: 0;
      margin: -1px;
      overflow: hidden;
      clip: rect(0, 0, 0, 0);
      border: 0;
    }

    /*Spalten*/
    .section-zweispaltig-col img{width:100%;}
    .abstand-30px{margin-bottom:30px}

    /* Responsive */

    @media (max-width: 960px) {
      .hero-grid,
      .section-layout,
      .section-layout.reverse,
      .contact-layout,
      .customization-grid,
      .faq-grid {
        grid-template-columns: minmax(0, 1fr);
      }

      .hero-media {
        max-width: none;
      }

      .header-inner {
        padding-inline: 1rem;
      }

      .hero {
        padding-top: 70px;
      }
    }

    @media (max-width: 800px) {
      nav {
        position: relative;
      }

      .menu-toggle {
        display: inline-flex;
      }

      .nav-links {
        position: absolute;
        right: 0;
        top: calc(100% + 0.6rem);
        flex-direction: column;
        align-items: flex-start;
        background-color: #ffffff;
        border-radius: 12px;
        padding: 0.6rem 0.9rem;
        box-shadow: var(--shadow-soft);
        min-width: 220px;
        display: none;
      }

      
    .nav-links a {
      color: #374151;
    }


      .nav-links.open {
        display: flex;
      }

      .hero-highlight {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }

      .footer-top {
        grid-template-columns: minmax(0, 1fr);
      }
    }

    @media (max-width: 640px) {
      .hero-highlight {
        grid-template-columns: minmax(0, 1fr);
      }

      .form-grid {
        grid-template-columns: minmax(0, 1fr);
      }

      .hero {
        padding-top: 64px;
      }

      section {
        padding-inline: 1.1rem;
      }

      .back-to-top {
        bottom: 1rem;
        right: 1rem;
      }
    }





    .avenia-footer {
      background-color: #05414b;        /* dunkles Petrol wie in der Vorlage */
      color: #ffffff;
      padding-top: 30px;
      font-size: 0.9rem;
    }
    
    /* Logo zentriert */
    .avenia-footer-logo {
      text-align: center;
      margin-bottom: 24px;
    }
    
    .avenia-footer-logo img {
      display: inline-block;
      max-width: 180px;
      height: auto;
    }
    
    /* 4-Spalten-Grid */
    .avenia-footer-grid {
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: 2.5rem;
      padding-bottom: 26px;
    }
    
    .footer-col {
      color: #e5e7eb;
    }
    
    /* Kleine Labels wie in der Vorlage */
    .footer-label {
      margin: 0 0 0.25rem;
      font-size: 0.7rem;
      letter-spacing: 0.18em;
      text-transform: uppercase;
      color: #cbd5f5;
    }
    
    .footer-text {
      margin: 0 0 0.8rem;
      line-height: 1.6;
      text-align: left !important;
    }
    
    .footer-text a {
      color: #ffffff;
      text-decoration: none;
    }
    
    .footer-text a:hover,
    .footer-text a:focus-visible {
      text-decoration: underline;
    }
    
    /* Rechte Spalte: rechtsbündig auf groß */
    .footer-col-right {
      text-align: right;
    }
    
    /* Social-Icons (Platzhalter) */
    .footer-social {
      margin-top: 0.5rem;
      
      text-align: left;
    }
    
    .footer-social a {
      width: 26px;
      height: 26px;
    
      display: inline-flex;
      align-items: center;
      justify-content: center;
      font-size: 0.78rem;
      text-decoration: none;
      color: #ffffff;
    }
    
    /* Untere Copyright-Zeile */
    .avenia-footer-bottom {
      background-color: #043741;
      padding: 10px 0 14px;
      font-size: 0.75rem;
      color: #d1d5db;
    }
    
    .avenia-footer-bottom p {
      margin: 0;
      text-align: center;
    }
    
    /* RESPONSIVE: 4 → 2 Spalten */
    @media (max-width: 960px) {
      .avenia-footer-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        row-gap: 1.8rem;
      }
    
      .footer-col-right {
        text-align: left;
      }
    }
    
    /* RESPONSIVE: 2 → 1 Spalte */
    @media (max-width: 640px) {
      .avenia-footer-grid {
        grid-template-columns: minmax(0, 1fr);
      }
    
      .avenia-footer {
        padding-inline: 1.1rem;
      }
    
      .footer-social {
        margin-top: 0.75rem;
      }
    }
    

    
    @media screen and (max-width:768px) {

      .item-1 {
      order: 1;
     
    }

    .item-2 {
      order: 2;
  
    }
  }

.back-to-top {
 position: fixed;
 right: 20px;
 bottom: 20px;
 width: 60px;
 height: 60px;
 background-color: #0b3b45; /* dunkles Petrol */
 border: none;
 border-radius: 4px;
 cursor: pointer;
 display: flex;
 align-items: center;
 justify-content: center;
 box-shadow: 0 8px 20px rgba(0, 0, 0, 0.25);
 z-index: 999;

 /* Standard: unsichtbar */
 opacity: 0;
 visibility: hidden;
 pointer-events: none;
 transition: opacity 0.25s ease;
}

/* sichtbarer Zustand */
.back-to-top--visible {
 opacity: 1;
 visibility: visible;
 pointer-events: auto;
}

/* Pfeil-Icon */
.back-to-top-icon {
 display: block;
 width: 18px;
 height: 18px;
 border-top: 3px solid #ffffff;
 border-left: 3px solid #ffffff;
 transform: rotate(45deg);
 margin-bottom: -3px;
}

.back-to-top:hover,
.back-to-top:focus-visible {
 filter: brightness(1.05);
}






    /* outfit-regular - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Outfit';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/outfit-v15-latin-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}


/* dm-serif-display-regular - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'DM Serif Display';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/dm-serif-display-v17-latin-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}