:root {
  --dark: #2a2b2f;
  --text: #6b6d6f;
  --cyan: #42c0eb;
  --cyan-soft: #64bee6;
  --grey: #eee;
  --rule: #ddd;
  --line: #d3d3d3;
  --btn-hover: #d7d9dc;
  --highlight: #ffea00;
  --header-h: 94px;
  --container: 1170px;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

/* Das Icon-Sprite darf keinen Platz belegen - svg beachtet [hidden] nicht */
svg[hidden] { display: none !important; }

html.is-loading body { opacity: 0; }

/* Ladeanimation wie im Original: 240 ms Ueberblendung, sobald die Schriften stehen */
body {
  opacity: 1;
  transition: opacity 0.24s ease-in-out;
  margin: 0;
  background: #fff;
  font-family: "Open Sans", Arial, Helvetica, sans-serif;
  font-size: 14px;
  line-height: 25px;
  color: var(--text);
  -webkit-font-smoothing: antialiased;
}

h1,
h2,
h3,
h4,
h5 {
  font-family: Montserrat, Arial, Helvetica, sans-serif;
  font-weight: 400;
  color: var(--dark);
  margin: 0 0 18px;
}

h1 { font-size: 45px; line-height: 45px; font-weight: 600; }
h2 { font-size: 32px; line-height: 41.6px; }
h3 { font-size: 18px; line-height: 33px; font-weight: 700; }
h4 { font-size: 18px; line-height: 25px; }

p { margin: 0 0 18px; }

a {
  color: var(--dark);
  text-decoration: none;
  transition: color 0.3s ease;
}

a:hover { color: var(--cyan); }

img {
  max-width: 100%;
  height: auto;
}

mark {
  background-color: var(--highlight);
  color: var(--dark);
  padding: 0 3px;
}

.container {
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 15px;
}

/* Kurzer Strich unter Abschnittstiteln */
.rule::after {
  content: "";
  display: block;
  width: 100px;
  height: 3px;
  background: var(--dark);
  margin-top: 13px;
}

.rule-light::after { background: #fff; }

/* ---------- Kopfzeile ---------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 999;
  background: #fff;
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.08);
}

.header-inner {
  position: relative;
  max-width: none;
  padding: 0 34px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  height: var(--header-h);
  transition: height 0.7s ease;
}

.site-header.is-stuck .header-inner { height: 61px; }

.logo img {
  height: 50px;
  width: auto;
  display: block;
}

.nav-toggle {
  display: none;
  background: none;
  border: 0;
  padding: 6px 2px;
  color: var(--dark);
  cursor: pointer;
}

.main-nav > ul {
  display: flex;
  align-items: center;
  margin: 0;
  padding: 0;
  list-style: none;
}

.main-nav > ul > li { position: relative; }

.main-nav a {
  font-family: Poppins, Arial, Helvetica, sans-serif;
  font-size: 18px;
  line-height: 20px;
  color: var(--dark);
  display: inline-block;
}

.main-nav > ul > li > a {
  padding: 21px 3px 5px;
  margin: 0 12px;
  transition: padding-top 0.7s ease, color 0.3s ease;
}

.site-header.is-stuck .main-nav > ul > li > a { padding-top: 7px; }

@media (min-width: 1025px) {
  .main-nav {
    position: absolute;
    left: 50%;
    top: 17px;
    transform: translateX(-50%);
    transition: top 0.7s ease;
  }

  .site-header.is-stuck .main-nav { top: 13px; }
}

.main-nav > ul > li > a:hover,
.main-nav > ul > li.current > a { color: var(--cyan); }

/* ---------- Bühne ---------- */

.hero {
  position: relative;
  height: 900px;
  overflow: hidden;
  background: #101010;
}

/* Das Original rechnet seine Textlagen auf einer 1020 px breiten Flaeche */
.hero-canvas {
  width: 1020px;
  max-width: calc(100% - 60px);
  margin: 0 auto;
}

.slide {
  position: absolute;
  inset: 0;
  background-position: center;
  background-size: cover;
  display: flex;
  align-items: center;
  opacity: 0;
  visibility: hidden;
  transition: opacity 1.2s ease, visibility 1.2s;
}

.slide.is-active {
  opacity: 1;
  visibility: visible;
}

/* Textlagen fahren von unten herein - gemessen am Original:
   Start bei 126 px Versatz und Deckkraft 0, Dauer 1,3 s, weicher Ein- und Auslauf.
   Deckkraft und Bewegung sind bewusst entkoppelt: gekoppelt war die Ueberschrift
   bei Sekunde 1,0 erst zu 73 Prozent sichtbar, waehrend die Unterzeile schon voll
   dastand - heller Text auf dunklem Grund wirkt dabei grau statt weiss. Die
   Bewegung bleibt unveraendert, nur das Durchscheinen endet frueher. */
@keyframes heroIn {
  from {
    opacity: 0;
    transform: translateY(126px);
  }
  35% {
    opacity: 1;
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.slide.is-entering h1,
.slide.is-entering h2 {
  animation: heroIn 1.3s cubic-bezier(0.65, 0, 0.35, 1) 0.2s both;
}

/* Die Unterzeile bewegt sich im Original nicht - sie blendet nur verzoegert ein */
@keyframes heroFade {
  from { opacity: 0; }
  to { opacity: 1; }
}

.slide.is-entering p {
  animation: heroFade 0.3s ease 0.72s both;
}

/* Solange das Skript auf die Schriften wartet, bleiben die Textlagen
   verborgen. Ohne das steht der Text der ersten Lage fertig da und springt
   beim Anlauf der Animation sichtbar an den Anfang zurueck. Die Klasse setzt
   JavaScript selbst - ist es abgeschaltet, bleibt der Text normal sichtbar. */
.hero.is-holding .slide h1,
.hero.is-holding .slide h2,
.hero.is-holding .slide p {
  opacity: 0;
}

.slide h1,
.slide h2 {
  font-size: clamp(30px, 4.52vw, 56px);
  line-height: 1.107;
  font-weight: 700;
  color: #f7f7f7;
  max-width: 698px;
  margin-bottom: 26px;
}

/* Helle Motive brauchen dunklen Text */
.slide.on-light h1,
.slide.on-light h2 { color: var(--dark); }
.slide.on-light p { color: var(--dark); }

.slide p {
  font-family: Montserrat, Arial, Helvetica, sans-serif;
  font-size: clamp(20px, 2.02vw, 25px);
  line-height: 1.6;
  font-weight: 700;
  color: #fff;
  max-width: 607px;
  margin: 0;
}

.hero-scroll {
  position: absolute;
  left: 50%;
  bottom: 26px;
  transform: translateX(-50%);
  color: var(--dark);
  animation: nudge 2s ease-in-out infinite;
}

@keyframes nudge {
  0%, 100% { transform: translate(-50%, 0); }
  50% { transform: translate(-50%, 6px); }
}

.hero-dots {
  position: absolute;
  right: 24px;
  bottom: 24px;
  display: flex;
  gap: 0;
}

/* Sichtbarer Punkt bleibt 11 px, die Klickflaeche wird 24 px gross */
.hero-dots button {
  width: 24px;
  height: 24px;
  border: 0;
  background: transparent;
  padding: 0;
  cursor: pointer;
  display: grid;
  place-items: center;
}

.hero-dots button::after {
  content: "";
  width: 11px;
  height: 11px;
  border-radius: 50%;
  border: 2px solid #fff;
}

.hero-dots button[aria-current="true"]::after { background: #fff; }

/* ---------- Unterebene je Seite ---------- */

.sub-nav {
  position: sticky;
  top: 0;
  z-index: 999;
  background: #fff;
  border-top: 1px solid #ececec;
  /* symmetrisch, damit die Schrift senkrecht mittig steht: 6 + 33 + 6 + 1 = 46 */
  padding: 6px 0;
}

/* Kompaktes Zeichen, erscheint erst wenn der Schriftzug weg ist */
.sub-nav-mark {
  position: absolute;
  left: 43px;
  top: 50%;
  transform: translateY(-50%);
  opacity: 0;
  pointer-events: none;
  /* beim Verschwinden ohne Verzoegerung */
  transition: opacity 0.3s ease 0s;
}

.sub-nav-mark img {
  display: block;
  width: 28px;
  height: 40px;
}

body.has-subnav.is-stuck .sub-nav-mark {
  opacity: 1;
  pointer-events: auto;
  /* erst nach dem Ausblenden des Schriftzugs */
  transition: opacity 0.4s ease 0.5s;
}

/* Schriftzug im Kopf: verschwindet sofort, kommt verzoegert zurueck */
body.has-subnav .site-header .logo img {
  transition: opacity 0.35s ease 0.5s;
}

body.has-subnav.is-stuck .site-header .logo img {
  opacity: 0;
  transition: opacity 0.3s ease 0s;
}

/* Unterseiten: Kopf und Leiste haengen fest, der Inhalt beginnt darunter */
body.has-subnav { padding-top: 137px; }

body.has-subnav .header-inner,
body.has-subnav.is-stuck .header-inner { height: 80px; }

/* Der Kopf gleitet in 1 s aus dem Bild, gemessen am Original */
body.has-subnav .site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 999;
  box-shadow: none;
  transition: transform 1s ease;
  will-change: transform;
}

body.has-subnav.is-stuck .site-header { transform: translateY(-80px); }

/* Die Unterebene gleitet gleichzeitig nach oben und bleibt dort */
body.has-subnav .sub-nav {
  position: fixed;
  /* ein Pixel Ueberlappung: so kann zwischen den Leisten keine Naht aufreissen */
  top: 79px;
  left: 0;
  right: 0;
  z-index: 1000;
  margin-bottom: 0;
  transition: transform 1s ease;
  will-change: transform;
}

body.has-subnav.is-stuck .sub-nav { transform: translateY(-80px); }

body.has-subnav.is-stuck .sub-nav {
  border-bottom: 1px solid var(--line);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04);
}

.sub-nav ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  row-gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Die Polsterung sitzt wie im Original am Listenpunkt, nicht am Verweis */
.sub-nav li {
  padding: 4px 15px;
  border-radius: 20px;
  transition: background-color 0.3s ease;
}

.sub-nav li.is-active { background: var(--dark); }

.sub-nav a {
  display: inline-block;
  font-family: "Open Sans", Arial, Helvetica, sans-serif;
  font-size: 13px;
  line-height: 25px;
  color: var(--dark);
  transition: color 0.3s ease;
}

.sub-nav li.is-active a { color: #fff; }

.sub-nav li:not(.is-active) a:hover { color: var(--cyan); }

/* ---------- Titelband der Unterseiten ---------- */

.page-banner {
  min-height: 197px;
  display: flex;
  align-items: center;
  padding: 40px 0;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}

.page-banner h1 {
  font-family: "Open Sans", Arial, Helvetica, sans-serif;
  font-size: 42px;
  line-height: 45px;
  font-weight: 700;
  color: #fff;
  margin: 0;
}

/* ---------- Staerkerer Kontrast auf Anforderung ----------
   Greift nur bei Systemeinstellung "hoeherer Kontrast". Gemessene Werte des
   normalen Auftritts: Text #6b6d6f auf #eee ergibt 4,47:1 (Schwelle 4,5:1),
   das aktive Menue in #42c0eb auf Weiss ergibt 2,1:1. */

@media (prefers-contrast: more) {
  :root {
    --text: #55585a;          /* auf #eee: 5,4:1 */
    --line: #8d9093;
    --rule: #b4b6b8;
  }

  /* Aktiver Menuepunkt: dunkleres Blau, zusaetzlich unterstrichen,
     damit die Auszeichnung nicht allein an der Farbe haengt */
  .main-nav > ul > li.current > a,
  .main-nav > ul > li > a:hover {
    color: #0e7490;
    text-decoration: underline;
    text-underline-offset: 4px;
  }

  .sub-nav li:not(.is-active) a:hover { color: #0e7490; }

  .card li svg,
  .field em,
  .form-note em { color: #0e7490; }

  mark {
    background-color: #ffe100;
    color: #1c1d20;
  }

  .slide p { color: #fff; }

  .todo { color: #1c1d20; }
}

/* Windows mit erzwungenen Farben: eigene Hintergrundbilder zuruecknehmen,
   damit der Text auf dem Systemhintergrund lesbar bleibt */
@media (forced-colors: active) {
  .hero,
  .slide,
  .tile,
  .page-banner {
    background-image: none !important;
  }

  .slide h1,
.slide h2,
  .slide p,
  .tile h3,
  .tile p,
  .page-banner h1 { color: CanvasText; }

  .rule::after,
  .rule-light::after { background: CanvasText; }

  .sub-nav li.is-active { background: Highlight; }
  .sub-nav li.is-active a { color: HighlightText; }
}

/* ---------- Anfrageformular ---------- */

.form-intro { max-width: 760px; }

.request-form {
  max-width: 760px;
  margin-top: 30px;
  background: #fff;
  border: 1px solid var(--line);
  padding: 36px 40px 30px;
}

@media (max-width: 767px) {
  .request-form { padding: 26px 22px 22px; }
}

.field-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 30px;
}

.field {
  display: block;
  margin-bottom: 22px;
}

.field > span {
  display: block;
  font-family: "Open Sans", Arial, Helvetica, sans-serif;
  font-size: 13px;
  line-height: 20px;
  color: var(--dark);
  margin-bottom: 6px;
}

.field em {
  font-style: normal;
  color: var(--cyan);
}

.field input[type="text"],
.field input[type="email"],
.field input[type="tel"],
.field select,
.field textarea {
  width: 100%;
  font-family: "Open Sans", Arial, Helvetica, sans-serif;
  font-size: 14px;
  line-height: 25px;
  color: var(--dark);
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 0;
  padding: 9px 12px;
  transition: border-color 0.3s ease;
}

.field textarea { resize: vertical; }

.field input:focus,
.field select:focus,
.field textarea:focus {
  border-color: var(--cyan);
  outline: 2px solid rgba(66, 192, 235, 0.25);
  outline-offset: 0;
}

.field input:user-invalid,
.field textarea:user-invalid,
.field select:user-invalid {
  border-color: #c0392b;
}

.field-consent {
  display: grid;
  grid-template-columns: 18px 1fr;
  gap: 10px;
  align-items: start;
  margin: 8px 0 26px;
}

.field-consent input { margin-top: 5px; }

.field-consent span {
  margin: 0;
  font-size: 13px;
  line-height: 22px;
  color: var(--text);
}

.field-consent a { text-decoration: underline; }

/* Falle fuer automatische Eintraege - fuer Besucher nicht sichtbar */
.field-trap {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.form-actions { margin: 0 0 12px; }

.form-note {
  font-size: 13px;
  color: var(--text);
  margin: 0;
}

.form-note em {
  font-style: normal;
  color: var(--cyan);
}

@media (max-width: 767px) {
  .field-row { grid-template-columns: 1fr; }
}

/* ---------- Fliesstext, Aufklapper, Personen, Kontakt ---------- */

.prose { max-width: 900px; }

/* Verweise im Fliesstext werden unterstrichen - Farbe allein genuegt nicht,
   um sie als Verweis zu erkennen */
.prose p a,
.accordion-body a {
  text-decoration: underline;
  text-underline-offset: 2px;
}

.prose h3.wg-title { margin-top: 34px; }
.prose h3.wg-title:first-child { margin-top: 0; }

.todo {
  background: var(--highlight);
  display: inline-block;
  padding: 2px 6px;
}

.accordion details {
  border-top: 1px solid var(--rule);
  padding: 14px 0;
}

.accordion details:last-child { border-bottom: 1px solid var(--rule); }

.accordion summary {
  font-family: Montserrat, Arial, Helvetica, sans-serif;
  font-size: 18px;
  line-height: 25px;
  color: var(--dark);
  cursor: pointer;
}

.accordion-body { padding-top: 10px; max-width: 900px; }

.people {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
}

.person h4 { margin-bottom: 4px; }
.person p { margin: 0; }

/* ---------- Zentrierte Icon-Bloecke (Unterseiten) ---------- */

.feature-grid.is-centered {
  grid-template-columns: repeat(3, 1fr);
  gap: 60px 30px;
}

.feature.is-centered {
  display: block;
  text-align: center;
}

.feature.is-centered svg {
  width: 50px;
  height: 50px;
  margin: 8px 0;
}

.feature.is-centered h3 {
  font-weight: 400;
  margin: 0;
}

.feature.is-centered p { margin: 0; }

/* Unterseiten: groessere Titel und weitere Abstaende als auf der Startseite */
main.sub-page .section-head h2 {
  font-size: 36px;
  line-height: 40px;
}

main.sub-page .section { padding: 55px 0; }

main.sub-page .section-head { margin-bottom: 62px; }

/* Bloecke laufen nacheinander ein */
.reveal .feature {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}

.reveal.is-visible .feature {
  opacity: 1;
  transform: none;
}

.reveal.is-visible .feature:nth-child(1) { transition-delay: 0.06s; }
.reveal.is-visible .feature:nth-child(2) { transition-delay: 0.12s; }
.reveal.is-visible .feature:nth-child(3) { transition-delay: 0.18s; }
.reveal.is-visible .feature:nth-child(4) { transition-delay: 0.24s; }
.reveal.is-visible .feature:nth-child(5) { transition-delay: 0.30s; }
.reveal.is-visible .feature:nth-child(6) { transition-delay: 0.36s; }
.reveal.is-visible .feature:nth-child(7) { transition-delay: 0.42s; }
.reveal.is-visible .feature:nth-child(8) { transition-delay: 0.48s; }
.reveal.is-visible .feature:nth-child(9) { transition-delay: 0.54s; }
.reveal.is-visible .feature:nth-child(10) { transition-delay: 0.60s; }
.reveal.is-visible .feature:nth-child(11) { transition-delay: 0.66s; }
.reveal.is-visible .feature:nth-child(12) { transition-delay: 0.72s; }

@media (prefers-reduced-motion: reduce) {
  .reveal .feature {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* ---------- Einblendung beim Scrollen ---------- */

.reveal {
  opacity: 0;
  transition: opacity 1s ease;
}

.reveal.is-visible { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  .reveal {
    opacity: 1;
    transition: none;
  }

  .slide.is-entering h1,
.slide.is-entering h2,
  .slide.is-entering p {
    animation: none;
  }
}

/* ---------- Abschnitte ---------- */

.section { padding: 40px 0; }
.section-grey { background-color: var(--grey); }
.section-tight { padding-bottom: 0; }

.section-head { margin-bottom: 40px; }
.section-head h2 { margin-bottom: 0; padding-bottom: 0; }

.divider {
  height: 1px;
  background: var(--rule);
  border: 0;
  margin: 40px 0 0;
}

/* ---------- Schaltflächen ---------- */

.btn {
  display: inline-block;
  font-family: "Open Sans", Arial, Helvetica, sans-serif;
  font-size: 15px;
  line-height: 18px;
  padding: 15.5px 38px;
  background: transparent;
  color: var(--dark);
  border: 2px solid var(--dark);
  text-transform: uppercase;
  cursor: pointer;
  transition: background-color 0.3s ease, color 0.3s ease;
}

.btn:hover {
  background: var(--dark);
  color: #fff;
}

/* Gefuellte Ausfuehrung - im Original auf der Kontaktseite, ohne Rahmen */
.btn-solid {
  background: var(--dark);
  color: #fff;
  border: 2px solid var(--dark);
  font-size: 13px;
  line-height: 16px;
  padding: 13px 33px;
  text-transform: uppercase;
}

.btn-solid:hover {
  background: var(--btn-hover);
  color: var(--dark);
}

.btn-sm {
  font-size: 13px;
  line-height: 15.6px;
  padding: 13px 33px;
  text-transform: none;
}

.btn-light {
  color: #fff;
  border-color: #fff;
}

.btn-light:hover {
  background: #fff;
  color: var(--dark);
}

/* ---------- Icon-Blöcke ---------- */

.feature-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 36px 60px;
}

.feature {
  display: grid;
  grid-template-columns: 56px 1fr;
  gap: 8px;
}

.feature svg {
  width: 35px;
  height: 35px;
  color: var(--dark);
}

.feature h3 { margin-bottom: 6px; }
.feature p { margin-bottom: 0; }

.center { text-align: center; }

/* ---------- Farbkacheln ---------- */

.tiles {
  display: grid;
  /* minmax(0, ...) statt 1fr: sonst kann die Spalte nicht unter die Breite
     ihres Inhalts schrumpfen, und zwei 400-px-Kacheln sprengen schmale
     Bildschirme */
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.tile {
  min-height: 563px;
  padding: 0;
  background-position: center;
  background-size: cover;
  display: flex;
  align-items: center;
  justify-content: center;
}

.tile-inner {
  width: 400px;
  max-width: calc(100% - 60px);
}

/* Eine einzelne Kachel nimmt die ganze Breite und stellt den Inhalt mittig */
.tiles.is-single { grid-template-columns: 1fr; }

.tiles.is-single .tile { min-height: 420px; }

.tiles.is-single .tile-inner {
  width: 660px;
  text-align: center;
}

.tiles.is-single .rule::after {
  margin-left: auto;
  margin-right: auto;
}

.tile h3 {
  font-size: 45px;
  line-height: 50px;
  font-weight: 400;
  margin-bottom: 30px;
}

.tile p { margin-bottom: 30px; }

.tile-cyan { background-image: url("tile-desk.ea9d2b5a.jpg"); }

.tile-dark { background-image: url("tile-building.5f579466.jpg"); }
.tile-dark h3 { color: #fff; }
.tile-dark p { color: #fff; }

/* ---------- Preisboxen ---------- */

.cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
}

.card {
  border: 3px solid var(--dark);
  padding: 30px;
}

.card-featured { border-color: var(--cyan-soft); }
.card-featured h1 { color: var(--cyan-soft); }

/* Abstaende nach dem Original: Titel y+73, Ersparnis y+206, erster Eintrag y+279 */
/* Der Kartentitel ist eine h3, sieht aber aus wie zuvor als h1 - die Groesse
   kam aus der allgemeinen h1-Regel und muss deshalb hier ausdruecklich stehen */
.card h3 {
  font-size: 45px;
  line-height: 45px;
  font-weight: 600;
  margin-top: 40px;
  margin-bottom: 43px;
}

.card h4 {
  font-weight: 400;
  margin: 0 0 14px;
}

.card h4 strong { font-weight: 600; }

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

.card li {
  border-top: 1px solid var(--rule);
  padding: 9px 0;
}

.card li svg {
  width: 5px;
  height: 9px;
  margin-right: 3px;
  color: var(--cyan);
}

/* ---------- Ablauf ---------- */

.steps {
  margin: 40px 0 0;
  padding: 0;
  list-style: none;
  max-width: 900px;
}

.steps li {
  display: grid;
  grid-template-columns: 54px 1fr;
  gap: 22px;
  padding-bottom: 26px;
  position: relative;
}

.steps li:not(:last-child)::before {
  content: "";
  position: absolute;
  left: 26px;
  top: 54px;
  bottom: 0;
  width: 1px;
  background: var(--dark);
}

.step-icon {
  width: 54px;
  height: 54px;
  border: 1px solid var(--cyan);
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: #fff;
}

.step-icon svg {
  width: 28px;
  height: 28px;
  color: #000;
}

.steps h4 {
  font-size: 18px;
  line-height: 32px;
  margin: 0;
}

.steps p { margin: 0; }

/* ---------- Fußzeile ---------- */

.site-footer {
  background: var(--grey);
  padding: 60px 0 0;
}

.footer-grid {
  display: grid;
  grid-template-columns: 1.3fr 1fr 1fr 1fr;
  gap: 30px;
}

.site-footer .logo img {
  width: 211px;
  height: auto;
  margin-bottom: 30px;
}

.wg-title {
  font-family: Poppins, Arial, Helvetica, sans-serif;
  font-size: 18px;
  line-height: 25px;
  font-weight: 400;
  color: var(--dark);
  margin: 0 0 22px;
}

.site-footer address {
  font-style: normal;
  margin-bottom: 18px;
}

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

.site-footer ul li { padding-bottom: 7px; line-height: 25px; }

/* Verweise in der Fusszeile sind grau wie im Original */
.site-footer a { color: var(--text); }
.site-footer a:hover { color: var(--dark); }

.social {
  display: flex;
  gap: 18px;
}

.social svg {
  width: 16px;
  height: 16px;
  color: var(--text);
}

.social a:hover svg { color: var(--cyan); }

.footer-bottom {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 24px;
  justify-content: space-between;
  margin-top: 46px;
  border-top: 1px solid var(--rule);
  padding: 22px 0;
  font-size: 13px;
}

/* ---------- Schmale Bildschirme ---------- */

@media (max-width: 1024px) {
  .nav-toggle { display: block; }

  .main-nav {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: #fff;
    border-top: 1px solid #ececec;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.08);
    max-height: calc(100vh - var(--header-h));
    overflow-y: auto;
  }

  .main-nav[hidden] { display: none !important; }
  .main-nav > ul { display: block; padding: 8px 0; }

  .main-nav > ul > li > a {
    display: block;
    margin: 0;
    padding: 12px 30px;
  }

      .tile { min-height: 493px; }
  /* Der seitliche Einzug muss bleiben - mit max-width: 100% klebte der Text
     auf jedem Geraet unter 1024 px am Rand */
  .tile-inner,
  .tile:last-child .tile-inner { max-width: calc(100% - 60px); margin: 0; }

  .cards { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .people { grid-template-columns: repeat(2, 1fr); }
  .feature-grid.is-centered { grid-template-columns: repeat(2, 1fr); gap: 40px 30px; }
  .page-banner { min-height: 150px; }
  .page-banner h1 { font-size: 32px; line-height: 38px; }
}

@media (max-width: 1023px) {
  .slide h1,
.slide h2 { font-size: 40px; line-height: 45px; }
  .slide p { font-size: 22px; line-height: 35px; }
}

@media (max-width: 767px) {
  .tiles { grid-template-columns: minmax(0, 1fr); }
  .tile { min-height: 458px; }

  .slide h1,
.slide h2 { font-size: 30px; line-height: 35px; }
  .slide p { font-size: 20px; line-height: 30px; }
  .feature-grid,
  .feature-grid.is-centered { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr; }
  .people { grid-template-columns: 1fr; }
  .page-banner h1 { font-size: 26px; line-height: 32px; }
  .btn { padding: 13px 24px; font-size: 14px; }
}