/* MW Elektroservice – eigene Ergänzungen (nach dem Webflow-CSS geladen).
   Seitenspezifische Regeln sind über die Body-Klassen eingegrenzt:
   mw-le (leistungen), mw-kd (elektroinstallation-kundendienst), mw-rl (rolladen),
   mw-sh (smart-home), mw-home (index), mw-rh (reparaturarbeiten), mw-mo (montage),
   mw-dg (diagnose), mw-um (uber-mich), mw-ref (referenzen), mw-bew (bewertungen),
   mw-an (antennen-und-netzwerktechnik). */

/* ==========================================================================
   Aufgabe 1 – Leistungen-Kacheln wieder weiß (alle Breakpoints)
   ========================================================================== */
.content_3 {
  background-color: #ffffff;
}

/* ==========================================================================
   Aufgabe 2 – elektroinstallation-kundendienst: Aufbau wie Muster
   ========================================================================== */
.mw-kd .div-block-207 > h1 {
  font-size: 36px;
  line-height: 1.15;
  margin: 0;
}
.mw-kd .div-block-207 > h2 {
  color: #1e3970;
  font-size: 40px;
  line-height: 1.2;
  margin: 0 0 4px;
}
/* Häkchen-Liste in zwei Spalten, spaltenweise gefüllt wie im Muster */
.mw-kd .grid-34 .list-4 {
  grid-auto-flow: column;
  grid-template-rows: repeat(5, auto);
  grid-template-columns: 1fr 1fr;
  grid-column-gap: 18px;
  grid-row-gap: 4px;
}
/* Box "Wir planen und installieren": Überschrift + erste 3 Zeilen zentriert */
.mw-kd .div-block-2015 {
  align-items: center;
}
.mw-kd .div-block-2015 > h2 {
  font-size: 32px;
  line-height: 1.2;
  text-align: center;
  width: 100%;
}
.mw-kd .div-block-2015 > p {
  text-align: center;
  width: 100%;
}
.mw-kd .div-block-2015 > .divider23 {
  margin-left: auto;
  margin-right: auto;
}
.mw-kd .div-block-2015 .grid-36 {
  width: 100%;
}
.mw-kd .div-block-2015 .div-block-2016 p.text-links1.flie-text {
  hyphens: manual;
  overflow-wrap: normal;
  word-break: normal;
}

@media screen and (min-width: 992px) {
  /* Zwei Spalten: links Box Kundendienst (breiter), rechts "Wir planen" + "Unser Anspruch" */
  .mw-kd .div-block-208 {
    display: grid;
    grid-template-columns: minmax(0, 1.85fr) minmax(0, 1fr);
    grid-column-gap: 20px;
    align-items: stretch;
    margin-top: 10px;
  }
  .mw-kd .div-block-209-exceed {
    width: auto;
    height: auto;
    margin: 0;
  }
  .mw-kd .grid-34 {
    grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr);
    grid-template-rows: auto 1fr;
    height: 100%;
  }
  .mw-kd .div-block-2022 {
    padding-top: 6px;
    display: flex;
    flex-direction: column;
  }
  .mw-kd .grid-34 .list-4 {
    flex: 1 1 auto;
    align-content: space-evenly;
  }
  .mw-kd .div-block-2011 {
    width: 100%;
  }
  .mw-kd .div-block-2030,
  .mw-kd .div-block-2014 {
    height: 100%;
  }
  .mw-kd .image-121-exceed {
    height: 100%;
    object-fit: cover;
    object-position: 50% 50%;
  }
  .mw-kd .div-block-2010 {
    width: auto;
    padding-left: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
  }
  .mw-kd .div-block-2015 {
    flex: 1 1 auto;
    margin: 0;
    padding: 20px 16px;
  }
  .mw-kd .div-block-2018 {
    flex: 0 0 auto;
  }
  .mw-kd .div-block-2015 > h2 {
    font-size: 28px;
  }
  .mw-kd .div-block-2015 .div-block-2016 {
    padding-left: 4px;
    padding-right: 4px;
  }
  .mw-kd .div-block-2015 .div-block-2016 p.text-links1.flie-text {
    font-size: 13px;
    line-height: 1.4;
  }
  .mw-kd .grid-37 {
    grid-template-columns: 110px minmax(0, 1fr);
    align-items: center;
  }
  .mw-kd .div-block-2021 {
    padding-right: 16px;
  }
  .mw-kd .div-block-2021 > p:first-child {
    font-size: 19px;
  }
  .mw-kd .div-block-2021 > p.width {
    font-size: 14px;
    width: auto;
  }
  .mw-kd .div-block-2026 {
    margin-top: 20px;
  }
}

/* ==========================================================================
   Aufgabe 5 – Startseite: Block "Über mich" wie Muster
   ========================================================================== */
.mw-home .section_1.mitting ._2er_grid.small {
  background-color: #ffffff;
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 2px 14px rgba(0, 0, 0, 0.06);
}
.mw-home .section_1.mitting .content_2.margin {
  background-color: #ffffff;
  border: 0;
  border-radius: 0;
}
/* Icons freigestellt, ohne eigene Kästchen, gleichmäßig nebeneinander */
.mw-home .section_1.mitting .icon-grid {
  display: flex;
  flex-flow: row nowrap;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  max-width: 420px;
  grid-column-gap: 0;
}
.mw-home .section_1.mitting .icon-grid > div {
  background: transparent;
  border: 0;
  box-shadow: none;
  padding: 0;
  flex: 0 0 auto;
}
.mw-home .section_1.mitting .icon-grid img {
  background: transparent;
  box-shadow: none;
  border: 0;
}
@media screen and (min-width: 992px) {
  .mw-home .section_1.mitting ._2er_grid.small {
    grid-template-columns: 46fr 54fr;
    grid-column-gap: 0;
    align-items: stretch;
    justify-items: stretch;
  }
  /* Bild füllt die linke Hälfte bis unten – kein weißer Streifen */
  .mw-home .section_1.mitting ._2er_grid.small > .image.small {
    width: 100%;
    height: 100%;
    min-height: 100%;
    object-fit: cover;
    object-position: 50% 100%;
    align-self: stretch;
  }
  .mw-home .section_1.mitting .content_2.margin {
    justify-content: center;
    align-self: stretch;
    padding: 48px 30px 48px 44px;
  }
  .mw-home .section_1.mitting .paragraph {
    font-size: 15px;
  }
}
@media screen and (max-width: 991px) {
  .mw-home .section_1.mitting ._2er_grid.small {
    grid-row-gap: 0;
  }
  .mw-home .section_1.mitting ._2er_grid.small > .image.small {
    width: 100%;
    object-fit: cover;
    object-position: 50% 100%;
  }
  .mw-home .section_1.mitting .content_2.margin {
    padding: 30px 20px 36px;
  }
  .mw-home .section_1.mitting .icon-grid {
    justify-content: space-evenly;
    margin-left: auto;
    margin-right: auto;
  }
}

/* ==========================================================================
   Aufgabe 10 – uber-mich: Slogan als eigene, hervorgehobene Zeile
   ========================================================================== */
.mw-um .mw-motto {
  width: 100%;
  margin: 0 0 12px;
  font-size: 30px;
  line-height: 1.25;
  font-weight: 600;
}
.mw-um .mw-motto-text {
  width: 100%;
  margin: 0;
}
@media screen and (max-width: 991px) {
  .mw-um .mw-motto {
    font-size: 26px;
    text-align: center;
  }
  .mw-um .mw-motto-text {
    text-align: center;
  }
}
@media screen and (max-width: 479px) {
  .mw-um .mw-motto {
    font-size: 24px;
  }
}

/* ==========================================================================
   Aufgabe 3 – Rolläden: Foto sichtbar, Spalten unten bündig, Inhalte mittig
   ========================================================================== */
.mw-rl .div-block-2041 .image-127 {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 60% 50%;
}
@media screen and (min-width: 992px) {
  .mw-rl .grid-40 {
    align-items: stretch;
  }
  /* linke Spalte: volle Höhe, Box unten, Mittelteil vertikal mittig */
  .mw-rl .grid-40 > .div-block-2042 {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    height: auto;
    padding-right: 24px;
  }
  .mw-rl .grid-40 > .div-block-2042 > .grid-42 {
    margin-top: auto;
    margin-bottom: auto;
    padding-top: 20px;
    padding-bottom: 20px;
    align-items: center;
  }
  .mw-rl .grid-40 > .div-block-2042 > .div-block-2018 {
    margin-top: 0;
    margin-bottom: 0;
  }
  /* rechte Spalte: Foto oben rechts, darunter Leistungs-Box bis zur gleichen Unterkante */
  .mw-rl .grid-40 > .div {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    height: auto;
  }
  .mw-rl .div-block-2041 {
    flex: 0 0 auto;
    height: 380px;
  }
  .mw-rl .div-block-2043 {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    inset: auto;
    width: auto;
    margin: -70px 72px 0 40px;
    z-index: 2;
  }
  .mw-rl .div-block-2044 {
    flex: 1 1 auto;
    width: 100%;
    justify-content: center;
  }
  .mw-rl .div-block-2044 .grid-35 {
    height: auto;
    align-items: center;
  }
}

/* ==========================================================================
   Aufgabe 4 – Smart Home: alle 8 Kacheln einheitlich
   ========================================================================== */
.mw-sh .div-block-2090-2 {
  grid-auto-rows: 1fr;
  grid-row-gap: 12px;
  grid-column-gap: 12px;
}
.mw-sh .div-block-2090-2 > .grid-35 {
  grid-template-columns: 72px minmax(0, 1fr);
  grid-column-gap: 16px;
  align-items: center;
  height: 100%;
  margin: 0;
  padding: 16px 18px 16px 12px;
}
.mw-sh .div-block-2090-2 > .grid-35 > .div-block-2012 {
  width: 72px;
  height: auto;
  justify-content: center;
  align-items: center;
}
.mw-sh .div-block-2090-2 > .grid-35 > .div-block-2012 img {
  width: 56px;
  height: 56px;
  object-fit: contain;
}
.mw-sh .div-block-2090-2 > .grid-35 > .div-block-2013 {
  height: auto;
  padding: 0;
  align-items: center;
}
@media screen and (min-width: 992px) {
  .mw-sh .div-block-2090-2 {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: none;
  }
  /* feste Höhe aufheben, damit die untere Leiste nie über den Kacheln liegt */
  body.mw-sh .div-block-2044-2-22.width.bg-white.transparent.vh.vh-2,
  body.mw-sh .div-block-2090-2.vh {
    height: auto;
  }
}

/* ==========================================================================
   Aufgabe 6 – Reparaturarbeiten rund ums Haus: Häkchen-Absätze mittig links neben dem Bild
   ========================================================================== */
@media screen and (min-width: 992px) {
  .mw-rh section.down-0 .grid-40 {
    align-items: stretch;
  }
  .mw-rh .div-block-2042.center-3.vh {
    height: auto;
    min-height: 100%;
    align-items: stretch;
  }
  .mw-rh .div-block-2034.space {
    height: auto;
    min-height: 100%;
    padding-bottom: 24px;
  }
  .mw-rh .div-block-2135.vh {
    height: auto;
    min-height: 100%;
    display: flex;
  }
  .mw-rh .div-block-2135.vh > .div-block-2096 {
    flex: 1 1 auto;
    height: auto;
  }
  .mw-rh .div-block-2135.vh .image-130 {
    position: static;
    height: 100%;
    min-height: 420px;
    object-fit: cover;
    object-position: 100% 50%;
  }
  .mw-rh .div-block-2034.space > .list-4 {
    margin-top: auto;
    margin-bottom: auto;
    padding-top: 28px;
    padding-right: 24px;
  }
}

/* ==========================================================================
   Aufgabe 11 – Handy- und Tablet-Ansicht (bis 991 px)
   ========================================================================== */
@media screen and (max-width: 991px) {

  /* --- Seitentitel "MW Elektroservice Mathias Welsch" in einer Zeile --- */
  /* Grundgroesse passt auch mit breiter Ersatzschrift (Webfont nicht geladen);
     sobald WebFont.js die Schrift geladen hat (html.wf-active), groesser. */
  .navbar1 .heading.heading-1.farbe-der-headings,
  .mw-le .heading_center.heading-1.farbe-der-headings.subheading.big2 {
    white-space: nowrap;
    font-size: clamp(11px, 3.8vw, 36px);
    line-height: 1.2;
    max-width: 100%;
  }
  html.wf-active .navbar1 .heading.heading-1.farbe-der-headings,
  html.wf-active .mw-le .heading_center.heading-1.farbe-der-headings.subheading.big2 {
    font-size: clamp(18px, 7.6vw, 44px);
  }

  /* --- Icons neben/über Text mind. 44 px --- */
  .image-icons,
  .icons-image,
  .icon-contain,
  .icons,
  .mw-rl .div-block-2038 img,
  .mw-rl .image-120-2.small {
    width: 44px;
    height: 44px;
    min-width: 44px;
    object-fit: contain;
  }
  .div-block-2012,
  .div-block-2029,
  .div-block-2029-2,
  .div-block-2017,
  .div-block-2139,
  .mw-rl .div-block-2038 {
    min-width: 44px;
    min-height: 44px;
  }
  .div-block-176 .icon,
  .div-block-176-2 .icon {
    width: 44px;
    height: 44px;
  }
  .navbar1 .grid-21 .image-109,
  .mw-home .section_1.mitting .icon-grid .image-109 {
    width: 44px;
    height: 44px;
    padding: 0;
    object-fit: contain;
  }
  .navbar1 .grid-21 {
    padding-top: 8px;
  }

  /* --- Icon-Reihen unten: nebeneinander, zentriert --- */
  .mw-kd .grid-38,
  body.mw-dg .div-block-2091.dark.down.div_area.top.margin,
  body.mw-sh .div-block-2091.dark.down.div_area.top,
  .mw-rl .div-block-2036 {
    display: flex;
    flex-flow: row wrap;
    justify-content: center;
    align-items: flex-start;
    grid-column-gap: 16px;
    grid-row-gap: 18px;
  }
  .mw-kd .grid-38 > .grid-39 {
    flex: 0 0 calc(25% - 12px);
    width: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  .mw-kd .div-block-2028 p {
    text-align: center;
  }
  .mw-kd .div-block-2015 .grid-36,
  .mw-dg .grid-36 {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    grid-column-gap: 12px;
    grid-row-gap: 16px;
    height: auto;
  }
  .mw-kd .div-block-2015 .grid-36 > .div-block-2016,
  .mw-dg .grid-36 > .div-block-2016 {
    width: auto;
    border: 0;
    padding: 8px 2px;
    justify-content: flex-start;
  }
  .mw-dg .div-block-2091 > .grid-35:first-child,
  .mw-sh .div-block-2091 > .grid-35:first-child {
    flex: 0 0 100%;
  }
  .mw-dg .div-block-2091 > .grid-35.set-2 {
    flex: 0 0 calc(33.333% - 11px);
    width: auto;
    margin: 0;
    align-items: center;
  }
  .mw-dg .div-block-2091 > .grid-35.set-2 p {
    text-align: center;
  }
  .mw-sh .div-block-2091 > .grid-35-copy {
    flex: 0 0 auto;
    width: auto;
    margin: 0;
    display: flex;
    flex-flow: row nowrap;
    justify-content: center;
    grid-column-gap: 16px;
  }
  .mw-rl .div-block-2036 > .div-block-2037 {
    flex: 0 0 calc(33.333% - 11px);
    width: auto;
  }
  .mw-rl .div-block-2036 > .div-block-2038.hide {
    display: none;
  }

  /* --- Reihenfolge Leistungsseiten: Überschrift → Einleitung → Bild --- */
  /* Kundendienst */
  .mw-kd .div-block-206 {
    display: flex;
    flex-direction: column;
  }
  .mw-kd .div-block-207 > h2 {
    font-size: 40px;
  }
  .mw-kd .grid-34 {
    display: flex;
    flex-direction: column;
  }
  .mw-kd .grid-34 > .div-block-2030 {
    order: -1;
    height: 240px;
    margin-bottom: 0;
  }
  .mw-kd .grid-34 > .div-block-2030 .div-block-2014,
  .mw-kd .grid-34 > .div-block-2030 .image-121-exceed {
    height: 100%;
    width: 100%;
    object-fit: cover;
    border-radius: 0;
  }
  .mw-kd .div-block-2011 {
    width: 100%;
    margin-top: 0;
  }

  /* Rolläden */
  .mw-rl .grid-40 {
    display: flex;
    flex-direction: column;
    align-items: stretch;
  }
  .mw-rl .grid-40 > .div-block-2042,
  .mw-rl .grid-40 > .div {
    display: contents;
  }
  .mw-rl .grid-40 .grid-41 { order: 1; }
  .mw-rl .grid-40 .div-block-207.width.top { order: 2; }
  .mw-rl .grid-40 .div-block-2041 { order: 3; }
  .mw-rl .grid-40 .grid-42 { order: 4; }
  .mw-rl .grid-40 .div-block-2018 { order: 5; }
  .mw-rl .grid-40 .div-block-2043 { order: 6; }
  .mw-rl .div-block-2041 {
    display: block;
    height: 300px;
    margin: 10px 0 24px;
    clip-path: polygon(70px 0, 100% 0, 100% 100%, 0 100%, 0 240px);
  }
  .mw-rl .div-block-2043 {
    margin-top: 24px;
  }

  /* Diagnose */
  .mw-dg .grid-54 {
    display: flex;
    flex-direction: column;
    align-items: stretch;
  }
  .mw-dg .grid-54 > .div-block-2150 {
    display: contents;
  }
  .mw-dg .div-block-2150 > h1 { order: 1; }
  .mw-dg .div-block-2150 > h2 { order: 2; }
  .mw-dg .div-block-2150 > p { order: 3; }
  .mw-dg .grid-54 > .div-block-2151 { order: 4; margin: 10px 0 24px; }
  .mw-dg .div-block-2150 > .grid-36 { order: 5; }
  .mw-dg .div-block-2150 > .div-block-2154 { order: 6; }
  .mw-dg .div-block-2150 > .div-block-2156 { order: 7; }

  /* Smart Home */
  .mw-sh .grid-40 {
    display: flex;
    flex-direction: column;
    align-items: stretch;
  }
  .mw-sh .grid-40 > .div-block-2042,
  .mw-sh .grid-40 > .div-block-2042 > .div-block-207 {
    display: contents;
  }
  .mw-sh .grid-40 .grid-41 { order: 1; }
  .mw-sh .grid-40 .div-block-207 > p { order: 2; }
  .mw-sh .grid-40 > .div-block-2092 { order: 3; margin: 10px 0 24px; }
  .mw-sh .grid-40 .div-block-207 > .divider23 { order: 4; align-self: center; }
  .mw-sh .grid-40 .div-block-207 > h2 { order: 5; }
  .mw-sh .grid-40 .div-block-2044-2-22 { order: 6; }
  .mw-sh .div-block-2090-2 {
    grid-template-columns: 1fr;
    grid-template-rows: none;
  }

  /* --- Montagearbeiten: Text vollständig, Trennlinie zwischen den zwei Texten --- */
  .mw-mo .div-block-2096,
  .mw-mo .div-block-2132,
  .mw-mo .div-block-2098,
  .mw-mo .div-block-2099,
  .mw-mo .div-block-2099 .div-block-207 {
    height: auto;
    max-height: none;
    overflow: visible;
  }
  body.mw-mo .div-block-2132 p.text-mittig1.flie-text.left.white.width.absolute {
    position: static;
    inset: auto;
    width: 100%;
    margin-right: 0;
  }
  body.mw-mo .div-block-2096.left.height.set.vh {
    padding-left: 52px;
    padding-right: 20px;
  }
  .mw-mo .grid-43 > .div-block-2099 + .div-block-2099::before {
    content: "";
    display: block;
    width: 60px;
    height: 1px;
    margin: 4px auto 24px;
    background-color: #23b4e9;
  }
  /* "Warum wir?" – schräger Zuschnitt schnitt den Text ab */
  .mw-mo .div-block-2105.image-wrap {
    clip-path: none;
    height: auto;
    overflow: visible;
    padding: 24px 16px;
  }

  /* --- Referenzen: Bilder vollständig sichtbar, Restfläche weiß --- */
  .mw-ref .w-slide img {
    object-fit: contain;
    background-color: #ffffff;
  }
  .mw-home .slider-2 .w-slide img {
    object-fit: contain;
    background-color: #ffffff;
  }
}

@media screen and (max-width: 767px) {
  /* Kundendienst (Aufgabe 8, Prompt 2): einspaltig, Icon mittig über dem Text */
  .mw-kd .grid-38 {
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: center;
    grid-row-gap: 18px;
    row-gap: 18px;
  }
  .mw-kd .grid-38 > .grid-39 {
    flex: 0 0 auto;
    width: 100%;
    align-items: center;
    text-align: center;
  }
  .mw-kd .div-block-2015 .grid-36 {
    grid-template-columns: minmax(0, 1fr);
    grid-row-gap: 18px;
    row-gap: 18px;
  }
  /* Diagnose (Aufgabe 11, Prompt 2): einspaltig, Icon mittig über dem Text */
  .mw-dg .grid-36 {
    grid-template-columns: minmax(0, 1fr);
    grid-row-gap: 18px;
    row-gap: 18px;
  }
  .mw-dg .div-block-2091 > .grid-35.set-2 {
    flex: 0 0 auto;
    width: 100%;
  }
  .mw-rl .div-block-2041 {
    height: 240px;
    clip-path: polygon(50px 0, 100% 0, 100% 100%, 0 100%, 0 200px);
  }
}

/* Repair: Kopfzeile "Kundendienst/Elektroinstallation" in der linken Box darf
   nie unter das Foto laufen – schmalere Icon-Spalte, kleinere Schrift,
   Umbruch nach dem Schrägstrich erlaubt, Höhe wächst mit dem Inhalt. */
.mw-kd .grid-34 .div-block-2011 {
  height: auto;
  min-height: 60px;
  padding-top: 10px;
  padding-bottom: 10px;
  overflow: visible;
}
.mw-kd .grid-34 .div-block-2011 .flex--icon {
  grid-template-columns: auto minmax(0, 1fr);
  grid-column-gap: 14px;
  padding-left: 16px;
}
.mw-kd .grid-34 .div-block-2011 .div-block-2012 {
  padding-bottom: 0;
}
.mw-kd .grid-34 .div-block-2011 .div-block-2013 {
  min-width: 0;
}
.mw-kd .grid-34 .div-block-2011 h3.heading-links.small.white {
  min-width: 0;
  max-width: 100%;
  margin-top: 0;
  margin-bottom: 0;
  padding-bottom: 0;
  font-size: 22px;
  line-height: 1.15;
  overflow-wrap: anywhere;
}

/* Ersatzschrift (Webfont nicht geladen): kein Text darf ueber den Rand laufen */
@media screen and (min-width: 768px) and (max-width: 991px) {
  .div-block-footer1 {
    flex-wrap: wrap;
  }
}
@media screen and (max-width: 479px) {
  html:not(.wf-active) .bold-text-15,
  html:not(.wf-active) h1.heading_left.heading-1 > strong.heading_center {
    font-size: min(30px, 7vw);
  }
}

/* ==========================================================================
   Prompt 1 / Aufgabe 1 – Startseite "Über mich": wieder weiß wie im Muster,
   weiße Karte, blaue Ecke oben links (aus dem Foto), Icons freigestellt, kein Streifen
   ========================================================================== */
.mw-home .section_1.mitting.zweitfarbe {
  background-color: #ffffff;
}
.mw-home .section_1.mitting ._2er_grid.small {
  position: relative;
  border: 1px solid #e6e9ef;
  box-shadow: 0 4px 22px rgba(16, 42, 92, 0.08);
}
.mw-home .section_1.mitting .icon-grid .div-block-180,
.mw-home .section_1.mitting .icon-grid .div-block-180.border {
  border: 0;
  padding-right: 0;
  background: transparent;
}
@media screen and (min-width: 992px) {
  /* Bild füllt die linke Spalte vollständig bis zur Kartenunterkante */
  /* Die blaue Ecke oben links ist Teil des Fotos: Bild nie oben/unten
     beschneiden (Mindesthöhe = Seitenverhältnis des Fotos), links verankert */
  .mw-home .section_1.mitting ._2er_grid.small > .image.small {
    height: auto;
    aspect-ratio: 1236 / 1459;
    min-height: 100%;
    display: block;
    object-position: 0% 100%;
  }
}
@media screen and (max-width: 991px) {
  .mw-home .section_1.mitting ._2er_grid.small {
    gap: 0;
  }
  /* Foto vollständig, natürliches Seitenverhältnis, kein Zuschnitt */
  .mw-home .section_1.mitting ._2er_grid.small > .image.small {
    width: 100%;
    height: auto;
    aspect-ratio: 1236 / 1459;
    display: block;
    object-fit: contain;
    object-position: 50% 50%;
  }
}

/* ==========================================================================
   Prompt 1 / Aufgabe 2 – /leistungen (und Startseite): alle 7 Kacheln weiß,
   auch bei Hover und auf allen Breakpoints; Abschnitt bleibt hellgrau
   ========================================================================== */
.mw-le .section_1 .content_3,
.mw-le .section_1 .content_3:hover,
.mw-home .section_1 .content_3,
.mw-home .section_1 .content_3:hover {
  background-color: #ffffff;
}

/* ==========================================================================
   Prompt 1 / Aufgabe 3 – elektroinstallation-kundendienst wie Muster:
   Box "Wir planen und installieren" mit linksbündiger Überschrift und
   Einleitung, darunter 4 Icons mit Trennlinien
   ========================================================================== */
.mw-kd .div-block-2015 {
  align-items: stretch;
}
.mw-kd .div-block-2015 > h2,
.mw-kd .div-block-2015 > p {
  text-align: left;
}
.mw-kd .div-block-2015 > .divider23 {
  margin-left: 0;
  margin-right: auto;
}
@media screen and (min-width: 992px) {
  .mw-kd .div-block-2015 {
    padding: 22px 20px;
  }
  .mw-kd .div-block-2015 > h2 {
    font-size: 30px;
    line-height: 1.15;
    margin-top: 0;
  }
}
@media screen and (max-width: 991px) {
  .mw-kd .div-block-2015 > h2,
  .mw-kd .div-block-2015 > p {
    text-align: center;
  }
  .mw-kd .div-block-2015 > .divider23 {
    margin-left: auto;
  }
}

/* ==========================================================================
   Prompt 1 / Aufgabe 4 – Rolläden: linke Spalte unten bündig mit der rechten
   Leistungs-Box (Titel "Leistungen –" und Werkzeug-Icon in Prompt 2 entfernt)
   ========================================================================== */
.mw-rl .grid-41 .div-block-2034.ceter-4 > h1,
.mw-rl .grid-41 .div-block-2034.ceter-4 > h2 {
  margin-top: 0;
  margin-bottom: 4px;
}
@media screen and (min-width: 992px) {
  /* Überschrift nimmt die ganze Breite, gleicher linker Rand wie der Einleitungstext */
  .mw-rl .grid-40 > .div-block-2042 > .grid-41 {
    grid-template-columns: minmax(0, 1fr);
    grid-column-gap: 0;
    align-items: start;
  }
  .mw-rl .grid-41 .div-block-2034.ceter-4 {
    padding-left: 0;
    margin-left: 0;
  }
  .mw-rl .grid-41 .div-block-2034.ceter-4 > h1 {
    font-size: 40px;
  }
  .mw-rl .grid-41 .div-block-2034.ceter-4 > h2 {
    font-size: 50px;
    line-height: 1.2;
  }
}
@media screen and (max-width: 991px) {
  .mw-rl .grid-41 .div-block-2034.ceter-4 {
    align-items: center;
  }
}
@media screen and (min-width: 992px) {
  /* Akzent-Schatten nur noch seitlich, damit die Unterkante der rechten Box
     exakt mit der dunklen Box links abschließt */
  .mw-rl .div-block-2043 .div-block-2044.service-card {
    box-shadow: -15px 0 0 0 #23b4e9 !important;
  }
}
@media screen and (max-width: 479px) {
  .mw-rl .grid-41 .div-block-2034.ceter-4 > h2 {
    max-width: 100%;
  }
}

/* ==========================================================================
   Prompt 1 / Aufgabe 5 – Smart Home: alle 8 Kacheln auch auf Tablet/Handy
   im Format der unteren Kacheln (Icon links, Titel + Text rechts)
   ========================================================================== */
@media screen and (max-width: 991px) {
  .mw-sh .div-block-2090-2 > .grid-35 {
    display: grid;
    grid-template-columns: 64px minmax(0, 1fr);
    grid-column-gap: 14px;
    align-items: center;
    text-align: left;
  }
  .mw-sh .div-block-2090-2 > .grid-35 > .div-block-2012 {
    width: 64px;
  }
  .mw-sh .div-block-2090-2 > .grid-35 > .div-block-2012 img {
    width: 48px;
    height: 48px;
  }
  .mw-sh .div-block-2090-2 > .grid-35 > .div-block-2013 {
    align-items: flex-start;
    text-align: left;
  }
  .mw-sh .div-block-2090-2 > .grid-35 > .div-block-2013 p {
    text-align: left;
  }
}

/* ==========================================================================
   Prompt 1 / Aufgabe 6 – Reparaturarbeiten rund ums Haus: die beiden
   Häkchen-Absätze größer und vertikal mittig im freien Bereich neben dem Hausbild
   ========================================================================== */
.mw-rh .div-block-2034.space > .list-4 .custom-list-icon {
  padding-left: 36px !important;
  margin-bottom: 18px;
}
.mw-rh .div-block-2034.space > .list-4 .custom-list-icon:last-child {
  margin-bottom: 0;
}
.mw-rh .div-block-2034.space > .list-4 .custom-list-icon::before {
  top: 3px;
  width: 24px;
  height: 24px;
  font-size: 15px;
}
.mw-rh .div-block-2034.space > .list-4 p.text-links1.flie-text {
  font-size: 16px;
  line-height: 1.5;
  margin-top: 0;
  margin-bottom: 0;
}
@media screen and (min-width: 992px) {
  .mw-rh .div-block-2034.space {
    display: flex;
    flex-direction: column;
  }
  .mw-rh .div-block-2034.space {
    padding-bottom: 12px;
  }
  .mw-rh .div-block-2034.space > .list-4 {
    padding-top: 16px;
    padding-bottom: 0;
  }
  .mw-rh .div-block-2034.space > .list-4 p.text-links1.flie-text {
    font-size: 17px;
  }
}
@media screen and (min-width: 992px) {
  /* Hausbild vollständig (inkl. weißem Bogen links), nie beschnitten,
     natürliches Seitenverhältnis, vertikal mittig in der rechten Spalte */
  .mw-rh .div-block-2135.vh > .div-block-2096 {
    justify-content: center;
  }
  .mw-rh .div-block-2135.vh .image-130 {
    width: 100%;
    height: auto;
    min-height: 0;
    aspect-ratio: 1500 / 979;
    object-fit: contain;
    object-position: 100% 50%;
    top: 0;
  }
}

/* ==========================================================================
   Prompt 2 – Desktop- und Handy-Korrekturen laut Kundenliste vom 13./14.10.
   ========================================================================== */

/* --- Aufgabe 1/2 – Startseite "Über mich": Inhalt der weißen Spalte mittig,
       Button "Mehr erfahren" wie die übrigen Buttons der Startseite --- */
.mw-home .section_1.mitting .content_2.margin > a.button.btn-white {
  width: auto;
  margin-top: 10px;
  margin-left: auto;
  margin-right: auto;
  white-space: nowrap;
}
@media screen and (min-width: 992px) {
  .mw-home .section_1.mitting.zweitfarbe .content_2.margin {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
  }
  .mw-home .section_1.mitting.zweitfarbe .content_2.margin > .divider.highlights.small,
  .mw-home .section_1.mitting.zweitfarbe .content_2.margin > .divider-wrap,
  .mw-home .section_1.mitting.zweitfarbe .content_2.margin > .icon-grid {
    margin-left: auto;
    margin-right: auto;
  }
  .mw-home .section_1.mitting.zweitfarbe .content_2.margin > .icon-grid {
    justify-content: space-between;
  }
  .mw-home .section_1.mitting.zweitfarbe .content_2.margin > h2,
  .mw-home .section_1.mitting.zweitfarbe .content_2.margin > h3,
  .mw-home .section_1.mitting.zweitfarbe .content_2.margin > p {
    text-align: center;
  }
}

/* --- Aufgabe 4 – Startseite Referenz-Slider: Bilder komplett, Restfläche weiß --- */
.mw-home .slider-2 .w-slide,
.mw-home .slider-2 .div-block-179,
.mw-home .slider-2 .lightbox-link-7 {
  background-color: #ffffff;
}
@media screen and (min-width: 992px) {
  .mw-home .slider-2 img.image-156 {
    object-fit: contain;
    object-position: 50% 50%;
    background-color: #ffffff;
  }
}

/* --- Aufgabe 5 – Handy-/Tablet-Menü dunkelblau wie die Desktop-Menüleiste,
       aktiver/gehoverter Punkt in Akzentfarbe (alle Seiten) --- */
@media screen and (max-width: 991px) {
  .navbar-6 .nav-men-1.w-nav-menu,
  .navbar-6 .nav-men-1.w-nav-menu.hauptfarbe {
    background-color: #3a608d;
    background-image: none;
  }
  .navbar-6 .nav-men-1 .dropdown-list-18,
  .navbar-6 .nav-men-1 .dropdown-list-18.w--open {
    background-color: #3a608d;
  }
  .navbar-6 .nav-men-1 .nav-link-3.flie-text,
  .navbar-6 .nav-men-1 .nav-link-dp.flie-text,
  .navbar-6 .nav-men-1 .nav-link-dropdown.flie-text {
    color: #ffffff;
  }
  .navbar-6 .nav-men-1 .nav-link-3.flie-text:hover,
  .navbar-6 .nav-men-1 .nav-link-3.flie-text.w--current,
  .navbar-6 .nav-men-1 .nav-link-dp.flie-text:hover,
  .navbar-6 .nav-men-1 .nav-link-dp.flie-text.w--current,
  .navbar-6 .nav-men-1 .nav-link-dropdown.flie-text:hover > .nav-link-3.flie-text,
  .navbar-6 .nav-men-1 .nav-link-dropdown.flie-text.w--current,
  .navbar-6 .nav-men-1 .nav-link-dropdown.flie-text.w--current > .nav-link-3.flie-text {
    color: #23b4e9;
  }
}

/* --- Aufgabe 6 – Kundendienst: Überschrift auf dem Handy vollständig sichtbar,
       Umbruch nach dem Schrägstrich, zentriert --- */
@media screen and (max-width: 479px) {
  .mw-kd .div-block-207 > h2.heading-links.heading-1.padding-down.big-2 {
    width: min-content;
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
    font-size: 30px;
    line-height: 1.2;
    text-align: center;
    overflow-wrap: break-word;
  }
}

/* --- Aufgabe 7 – Kundendienst "Unser Anspruch": Haken mittig im Schild --- */
.mw-kd .div-block-2020.relative {
  position: relative;
}
.mw-kd .div-block-2020.relative > img.image-123 {
  display: block;
}
.mw-kd .div-block-2020.relative > img.image-conatin {
  position: absolute;
  inset: auto;
  top: 50%;
  left: 50%;
  margin: 0;
  transform: translate(-50%, -50%);
}

/* --- Aufgabe 8 – Kundendienst: Icon direkt über dem Text (Handy) --- */
@media screen and (max-width: 767px) {
  .mw-kd .div-block-2015 .grid-36 > .div-block-2016 {
    justify-content: flex-start;
    align-items: center;
    text-align: center;
    padding-top: 0;
    padding-bottom: 0;
  }
  .mw-kd .div-block-2015 .grid-36 > .div-block-2016 p.text-links1 {
    margin-top: 6px;
    margin-bottom: 0;
    text-align: center;
  }
  .mw-kd .div-block-2015 .grid-36 > .div-block-2016 p.text-links1 strong > br:first-child {
    display: none;
  }
  .mw-kd .grid-38 > .grid-39 > .div-block-2027,
  .mw-kd .grid-38 > .grid-39 > .div-block-2028 {
    align-items: center;
    text-align: center;
  }
  .mw-kd .grid-38 > .grid-39 > .div-block-2028 p {
    margin-top: 0;
    margin-bottom: 0;
  }
}

/* --- Aufgabe 9 – Rolläden: hellblaues Eck-Feld auf Tablet/Handy ausblenden --- */
@media screen and (max-width: 991px) {
  .mw-rl .div-block-2040.service-header-card {
    display: none;
  }
}

/* --- Aufgabe 10 – Rolläden: "per Schalter / Fernbedienung / App" untereinander --- */
@media screen and (max-width: 767px) {
  .mw-rl .div-block-2036 {
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: center;
    width: 100%;
    grid-row-gap: 18px;
    row-gap: 18px;
  }
  .mw-rl .div-block-2036 > .div-block-2037 {
    flex: 0 0 auto;
    width: 100%;
    height: auto;
    min-height: 0;
    padding-top: 0;
    border-right-width: 0;
    flex-direction: column;
    align-items: center;
    text-align: center;
    grid-row-gap: 8px;
    row-gap: 8px;
  }
  .mw-rl .div-block-2036 > .div-block-2037 p.text-mittig1 {
    display: block;
    margin: 0;
    text-align: center;
    white-space: nowrap;
  }
  /* leere Zeilen (<br>‍) nach den Texten ohne zusätzlichen Abstand */
  .mw-rl .div-block-2036 > .div-block-2037 p.text-mittig1 br {
    display: none;
  }
}

/* --- Aufgabe 11 – Diagnose: Text näher am Icon (Desktop), einspaltig mittig (Handy) --- */
@media screen and (min-width: 992px) {
  /* gleiche Gesamtbreite; schmale Spalten nie schmaler als Icon + längstes Wort */
  body.mw-dg .div-block-2091.dark.down.div_area.top.margin {
    grid-template-columns: minmax(0, 2.25fr) minmax(min-content, 1fr) minmax(min-content, 1fr) minmax(min-content, 1fr);
    height: auto;
    min-height: 15vh;
  }
  .mw-dg .div-block-2091.dark.down.div_area.top.margin > .grid-35 {
    grid-column-gap: 15px;
    column-gap: 15px;
    align-items: center;
  }
  .mw-dg .div-block-2091.dark.down.div_area.top.margin > .grid-35.set-2 {
    grid-template-columns: 4em minmax(min-content, max-content);
    justify-content: center;
  }
  .mw-dg .div-block-2091.dark.down.div_area.top.margin > .grid-35 {
    grid-template-columns: 4em minmax(0, 1fr);
  }
  .mw-dg .div-block-2091.dark.down.div_area.top.margin > .grid-35 > .div-block-2012 {
    width: 4em;
  }
  .mw-dg .div-block-2091.dark.down.div_area.top.margin > .grid-35 > .div-block-2012 > img.image-icons {
    width: 4em;
  }
}
@media screen and (max-width: 767px) {
  .mw-dg .grid-36.vh > .div-block-2016.top {
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    text-align: center;
    padding-top: 0;
    padding-bottom: 0;
  }
  .mw-dg .grid-36.vh > .div-block-2016.top > .div-block-2017 {
    margin-left: auto;
    margin-right: auto;
  }
  .mw-dg .grid-36.vh > .div-block-2016.top > p {
    width: 100%;
    text-align: center;
  }
  .mw-dg .grid-36.vh > .div-block-2016.top > p.text-links1 {
    margin-top: 6px;
    margin-bottom: 4px;
  }
  .mw-dg .grid-36.vh > .div-block-2016.top > p.text-links1 strong > br:first-child {
    display: none;
  }
  .mw-dg .div-block-2091 > .grid-35.set-2,
  .mw-dg .div-block-2091 > .grid-35:first-child {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    grid-row-gap: 8px;
    row-gap: 8px;
  }
  .mw-dg .div-block-2091 > .grid-35 > .div-block-2012 {
    padding-top: 0;
    padding-bottom: 0;
  }
  .mw-dg .div-block-2091 > .grid-35 > .div-block-2013 {
    justify-content: center;
  }
  .mw-dg .div-block-2091 > .grid-35 p {
    margin-bottom: 0;
    text-align: center;
  }
}

/* --- Aufgabe 12 – Smart Home: die sechs Icons der blauen Box in EINER Reihe (Handy) --- */
@media screen and (max-width: 767px) {
  body.mw-sh .div-block-2091.dark.down.div_area.top {
    display: grid;
    grid-template-columns: repeat(6, auto);
    justify-content: center;
    align-items: center;
    grid-column-gap: clamp(4px, 2vw, 14px);
    column-gap: clamp(4px, 2vw, 14px);
    grid-row-gap: 14px;
    row-gap: 14px;
  }
  body.mw-sh .div-block-2091.dark.down.div_area.top > .grid-35:first-child {
    grid-column: 1 / -1;
  }
  body.mw-sh .div-block-2091.dark.down.div_area.top > .grid-35-copy {
    display: contents;
  }
  body.mw-sh .div-block-2091.dark.down.div_area.top > .grid-35-copy > .div-block-2012 {
    width: clamp(28px, 10vw, 44px);
    min-width: 0;
    height: clamp(28px, 10vw, 44px);
    min-height: 0;
    padding: 0;
  }
  body.mw-sh .div-block-2091.dark.down.div_area.top > .grid-35-copy > .div-block-2012 > img.image-icons {
    width: clamp(28px, 10vw, 44px);
    min-width: 0;
    height: clamp(28px, 10vw, 44px);
    object-fit: contain;
  }
}

/* --- Aufgabe 13 – Antennen/Netzwerk: fettes Wort in eigener Zeile, Text darunter --- */
.mw-an p.text-links1.flie-text.margin.white._0padding-down > strong {
  display: block;
  margin-bottom: 2px;
}

/* --- Aufgabe 14 – Montagearbeiten: Schwerpunkt-Icon auf Tablet/Handy aus,
       "Warum wir?"-Texte zentriert (Häkchen: images/check-3.webp im HTML) --- */
@media screen and (max-width: 991px) {
  .mw-mo .grid-41 > .div-block-2032 {
    display: none;
  }
  .mw-mo p.text-mittig1.flie-text.left.white.left-2 {
    justify-content: center;
    text-align: center;
  }
}

/* --- Aufgabe 15 – Reparaturarbeiten rund ums Haus --- */
@media screen and (min-width: 992px) {
  /* Überschriften und Häkchen-Absätze ca. 30 px tiefer */
  .mw-rh .div-block-2034.space {
    padding-top: 70px;
  }
  .mw-rh .div-block-2034.space > .list-4 {
    padding-top: 46px;
  }
}
@media screen and (max-width: 991px) {
  /* Hausbild vollständig, volle Breite, natürliches Seitenverhältnis */
  .mw-rh .div-block-2135.vh,
  .mw-rh .div-block-2135.vh > .div-block-2096 {
    height: auto;
    min-height: 0;
  }
  .mw-rh .div-block-2135.vh img.image-130 {
    position: static;
    top: 0;
    display: block;
    width: 100%;
    height: auto;
    min-height: 0;
    aspect-ratio: 1500 / 979;
    object-fit: contain;
    object-position: 50% 50%;
  }
}
@media screen and (max-width: 767px) {
  .mw-rh .div-block-2034.space {
    align-items: center;
  }
  .mw-rh .div-block-2034.space > h1,
  .mw-rh .div-block-2034.space > h2 {
    width: 100%;
    text-align: center;
  }
  .mw-rh .div-block-2034.space > .list-4 p.text-links1.flie-text {
    font-size: 15px;
    line-height: 1.5;
  }
}

/* --- Aufgabe 16 – Referenzen: alle Slider-Bilder komplett sichtbar, Restfläche weiß --- */
.mw-ref .slider-12.reference-slider,
.mw-ref .slider-12.reference-slider .w-slider-mask,
.mw-ref .slider-12.reference-slider .w-slide,
.mw-ref .slider-12.reference-slider .w-slide > *,
.mw-ref .slider-12.reference-slider .w-lightbox {
  background-color: #ffffff;
}
.mw-ref .slider-12.reference-slider img.image-149,
.mw-ref .slider-12.reference-slider img.image-150,
.mw-ref .slider-12.reference-slider img.image-150.set,
.mw-ref .slider-12.reference-slider img.image-151,
.mw-ref .slider-12.reference-slider img.image-152,
.mw-ref .slider-12.reference-slider img.image-152.set-it,
.mw-ref .slider-12.reference-slider img.image-153,
.mw-ref .slider-12.reference-slider img.image-154 {
  object-fit: contain;
  object-position: 50% 50%;
  background-color: #ffffff;
}

/* --- Aufgabe 18 – Über mich: Icon-Text-Liste nach links (Desktop),
       Icons bündig mit Überschrift/Slogan-Box, Abstand Icon–Text 24 px.
       Schrift- und Icon-Größen unverändert (Icon bleibt 4em hoch/breit). --- */
@media screen and (min-width: 992px) {
  .mw-um .div-block-2044-2-22 > .div-block-2090-2-4 > .grid-35 {
    grid-template-columns: auto minmax(0, 1fr);
    grid-column-gap: 24px;
    column-gap: 24px;
    padding-left: 0;
    margin-left: 0;
  }
  .mw-um .div-block-2044-2-22 > .div-block-2090-2-4 > .grid-35 > .div-block-2012 {
    width: auto;
    align-items: flex-start;
  }
  .mw-um .div-block-2044-2-22 > .div-block-2090-2-4 > .grid-35 > .div-block-2012 > img.image-icons {
    width: 4em;
  }
}

/* --- Prompt 3 / Aufgabe 1 – Referenzen: kein blauer Rahmen, Box weiß, volle Spaltenbreite --- */
.mw-ref .div-block-2159.border {
  border: 0;
  height: auto;
  background-color: #ffffff;
  box-shadow: none;
}

/* --- Prompt 3 / Aufgabe 2 – Referenzen: Slides einheitlich 4:3, Bilder vollständig auf Weiß --- */
.mw-ref .slider-12.reference-slider {
  height: auto;
  background-color: #ffffff;
}
.mw-ref .slider-12.reference-slider .w-slider-mask {
  height: auto;
}
.mw-ref .slider-12.reference-slider .w-slide {
  height: auto;
  padding: 0;
  background-color: #ffffff;
}
.mw-ref .slider-12.reference-slider .w-slide > .w-lightbox {
  display: block;
  width: 100%;
  height: auto;
  line-height: 0;
}
.mw-ref .slider-12.reference-slider .w-slide img {
  display: block;
  width: 100%;
  max-width: 100%;
  aspect-ratio: 4 / 3;
  height: auto;
  object-fit: contain;
  object-position: 50% 50%;
  background-color: #ffffff;
}

/* --- Prompt 3 / Aufgabe 3 – Referenzen: Bildunterschrift zentriert unter dem Bild,
       Pfeile auf Bildmitte (4:3 → Mitte bei 37,5 % der Breite), Punkte unter der Unterschrift --- */
.mw-ref .slider-12.reference-slider .text-span.position {
  position: static;
  inset: auto;
  display: block;
  width: 100%;
  padding: 12px 8px 4px;
  text-align: center;
  background-color: #ffffff;
  color: #3a608d;
  font-family: Yanone Kaffeesatz, sans-serif;
  font-size: 28px;
  line-height: 1.3;
  white-space: normal;
  overflow-wrap: break-word;
}
.mw-ref .slider-12.reference-slider > .slider-arrow {
  top: 0;
  bottom: auto;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 40px;
  height: 40px;
  margin: calc(37.5% - 20px) 0 0;
  border-radius: 50%;
  background-color: var(--dark-blue);
  color: #ffffff;
  font-size: 18px;
  transition: background-color 0.2s ease;
}
.mw-ref .slider-12.reference-slider > .slider-arrow.w-slider-arrow-left {
  left: 8px;
  right: auto;
}
.mw-ref .slider-12.reference-slider > .slider-arrow.w-slider-arrow-right {
  right: 8px;
  left: auto;
}
.mw-ref .slider-12.reference-slider > .slider-arrow:hover {
  background-color: #2f4f75;
}
.mw-ref .slider-12.reference-slider > .slider-arrow > [class*="w-icon-slider"] {
  font-size: 18px;
  line-height: 1;
  color: #ffffff;
  background-color: transparent;
}
.mw-ref .slider-12.reference-slider > .slide-nav-4.w-slider-nav {
  position: relative;
  inset: auto;
  height: auto;
  margin-top: 16px;
  padding: 0;
}

@media screen and (max-width: 767px) {
  .mw-ref .slider-12.reference-slider .w-slide img {
    width: 100%;
    aspect-ratio: 4 / 3;
    height: auto;
    object-fit: contain;
  }
  .mw-ref .slider-12.reference-slider .text-span.position {
    font-size: 22px;
  }
  .mw-ref .slider-12.reference-slider > .slider-arrow {
    width: 36px;
    height: 36px;
    margin-top: calc(37.5% - 18px);
  }
  .mw-ref .slider-12.reference-slider > .slider-arrow > [class*="w-icon-slider"] {
    font-size: 16px;
  }
}

/* ==========================================================================
   Prompt 1 (22.10.) – Slider-Pfeile, Panel-Farben, Schriften/Abstände
   Leistungen, Referenzen, Häkchen (Desktop + Mobil)
   ========================================================================== */

/* --- Aufgabe 1 – Slider-Pfeile überall runde Buttons: Kreis #3a608d, Pfeil weiß --- */
/* Bewertungs-Slider (Startseite: Google + My Hammer, Seite meine-bewertungen) */
.slider-8 > .left-arrow.w-slider-arrow-left,
.slider-8 > .custom-arrow-right.w-slider-arrow-right {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 40px;
  padding: 0;
  overflow: visible;
}
.slider-8 > .left-arrow.w-slider-arrow-left {
  left: 0;
  right: auto;
}
.slider-8 > .custom-arrow-right.w-slider-arrow-right {
  right: 0;
  left: auto;
}
.slider-8 .div-block-183 {
  left: 0;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background-color: var(--dark-blue);
  transition: background-color 0.2s ease;
}
.slider-8 .w-slider-arrow-left:hover .div-block-183,
.slider-8 .w-slider-arrow-right:hover .div-block-183 {
  background-color: #2f4f75;
}
.slider-8 .div-block-183 > img.image-111 {
  width: 18px;
  height: 18px;
  border-radius: 0;
  filter: brightness(0) invert(1);
}
/* Kartentext nie unter den Pfeilen */
.slider-8 .content-block-3 {
  padding-right: 52px;
}
@media screen and (min-width: 992px) {
  .slider-8 .div-block-182 {
    width: calc(100% - 67px);
  }
}
@media screen and (max-width: 991px) {
  .slider-8 .content-block-3 {
    padding-left: 52px;
    padding-right: 52px;
  }
}
@media screen and (max-width: 767px) {
  .slider-8 > .left-arrow.w-slider-arrow-left,
  .slider-8 > .custom-arrow-right.w-slider-arrow-right {
    width: 36px;
  }
  .slider-8 .div-block-183 {
    width: 36px;
    height: 36px;
  }
  .slider-8 .div-block-183 > img.image-111 {
    width: 16px;
    height: 16px;
  }
  .slider-8 .content-block-3 {
    padding-left: 46px;
    padding-right: 46px;
  }
}

/* Referenz-Slider Startseite: Pfeile auf Bildmitte (Bildbereich 4:3 → 37,5 % der Breite) */
.mw-home .slider-2 > .slider-arrow {
  top: 0;
  bottom: auto;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 40px;
  height: 40px;
  margin: calc(37.5% - 20px) 0 0;
  border-radius: 50%;
  background-color: var(--dark-blue);
  color: #ffffff;
  font-size: 18px;
  transition: background-color 0.2s ease;
}
.mw-home .slider-2 > .slider-arrow.w-slider-arrow-left {
  left: 8px;
  right: auto;
}
.mw-home .slider-2 > .slider-arrow.w-slider-arrow-right {
  right: 8px;
  left: auto;
}
.mw-home .slider-2 > .slider-arrow:hover {
  background-color: #2f4f75;
}
.mw-home .slider-2 > .slider-arrow > .icon-9,
.mw-home .slider-2 > .slider-arrow > .icon-10 {
  background-color: transparent;
  color: #ffffff;
  -webkit-text-fill-color: #ffffff;
  font-size: 18px;
  line-height: 1;
}
@media screen and (max-width: 767px) {
  .mw-home .slider-2 > .slider-arrow {
    width: 36px;
    height: 36px;
    margin-top: calc(37.5% - 18px);
  }
  .mw-home .slider-2 > .slider-arrow > .icon-9,
  .mw-home .slider-2 > .slider-arrow > .icon-10 {
    font-size: 16px;
  }
}

/* --- Aufgabe 2 – Startseite "Über mich": Bild bei allen Breiten vollständig --- */
@media screen and (min-width: 992px) {
  .mw-home .section_1.mitting ._2er_grid.small > .image.small {
    display: block;
    width: 100%;
    max-width: 100%;
    height: auto;
    min-height: 0;
    aspect-ratio: 1236 / 1459;
    object-fit: contain;
    object-position: 50% 50%;
    align-self: center;
    flex-shrink: 0;
    background-color: #ffffff;
  }
  .mw-home .section_1.mitting ._2er_grid.small > .content_2.margin {
    min-width: 0;
  }
}

/* --- Aufgabe 3 – Referenz-Slider Startseite: Bild → Unterschrift → Punkte → Button --- */
.mw-home .slider-2,
.mw-home .slider-2 > .w-slider-mask,
.mw-home .slider-2 .w-slide,
.mw-home .slider-2 .div-block-179 {
  height: auto;
}
.mw-home .slider-2 .div-block-179 {
  justify-content: flex-start;
}
.mw-home .slider-2 .lightbox-link-7 {
  display: block;
  width: 100%;
  height: auto;
  line-height: 0;
}
.mw-home .slider-2 img.image-156 {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: contain;
  object-position: 50% 50%;
  background-color: #ffffff;
}
.mw-home .slider-2 .div-block-178 {
  height: auto;
  margin-top: 12px;
  padding: 0;
}
.mw-home .slider-2 .div-block-178 > h3 {
  position: static;
  margin: 0;
  line-height: 1.2;
  text-align: center;
}
.mw-home .slider-2 > .slide-nav-2 {
  position: relative;
  inset: auto;
  height: auto;
  margin-top: 16px;
  padding: 0;
}
.mw-home .slider-2 + a.button.flie-text.highlights.top-padding.transp.top {
  margin-top: 16px;
}
/* Referenzen-Seite: Button "Mehr erfahren" mind. 16 px unter Unterschrift/Punkten */
.mw-ref .div-block-2168 {
  margin-top: 16px;
}

/* --- Aufgabe 4 – Häkchen-Listen (Zuverlässig/Fachgerecht/Termintreu, Warum wir?) --- */
.mw-mo .grid-42.set.spacing {
  height: auto;
  margin: 20px 0 0;
}
.mw-mo .div-block-2097 > .grid-42.set.spacing:first-child {
  margin-top: 10px;
}
.mw-mo .grid-42.set.spacing p {
  margin: 0;
}
@media screen and (min-width: 992px) {
  .mw-mo .grid-42.set.spacing {
    grid-template-columns: 2em minmax(0, 1fr);
    grid-column-gap: 14px;
    column-gap: 14px;
    align-items: center;
  }
  .mw-mo .grid-42.set.spacing > .div-block-207.width.height-set {
    justify-content: center;
    align-items: flex-start;
  }
}
@media screen and (max-width: 991px) {
  .mw-mo .grid-42.set.spacing {
    display: flex;
    flex-direction: column;
    align-items: center;
    grid-row-gap: 10px;
    row-gap: 10px;
  }
}

/* --- Aufgabe 5 – Leistungsseiten: dunkle Panels in var(--dark-blue) #3a608d, Text weiß --- */
.mw-kd .div-block-2011.service-header-card,
.mw-kd .div-block-2018,
.mw-rl .div-block-2018,
.mw-rl .div-block-2044,
.mw-rl .div-block-2088,
.mw-rl .div-block-2089:not(.blue),
.mw-dg .div-block-2154.dark-blue-colour,
.mw-mo .div-block-2017.center.width,
.mw-mo .div-block-2105,
.mw-mo .div-block-2091.dark.down._100.radius-0 {
  background-color: var(--dark-blue);
}
/* Montage-Einleitung: bisher marineblaues Hintergrundbild mit schrägem Rand links –
   jetzt Fläche #3a608d, schräger Zuschnitt mit hellblauer Kante per clip-path */
body.mw-mo .div-block-2096.left.height.set.vh {
  position: relative;
  isolation: isolate;
  background-image: none;
  background-color: var(--light-blue);
  clip-path: polygon(100px 0, 100% 0, 100% 100%, 100px 100%, 40px 50%);
}
body.mw-mo .div-block-2096.left.height.set.vh::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-color: var(--dark-blue);
  clip-path: polygon(112px 0, 100% 0, 100% 100%, 112px 100%, 52px 50%);
}
@media screen and (max-width: 991px) {
  body.mw-mo .div-block-2096.left.height.set.vh {
    background-image: none;
    clip-path: polygon(36px 0, 100% 0, 100% 100%, 36px 100%, 0 50%);
  }
  body.mw-mo .div-block-2096.left.height.set.vh::before {
    clip-path: polygon(44px 0, 100% 0, 100% 100%, 44px 100%, 8px 50%);
  }
}

/* --- Aufgabe 6 – Leistungsseiten: "Schwerpunkt"-Überschriften einheitlich
       (Muster Kundendienst), gleiche Schrift, Abstand Überschrift → Text 18 px --- */
body.mw-kd h1.heading-links.heading-1.padding-down.colour,
body.mw-rl h1.heading-links.heading-1.padding-down.colour,
body.mw-rh h1.heading-links.heading-1.padding-down.colour,
body.mw-dg h1.heading-links.heading-1.padding-down.colour,
body.mw-sh h1.heading-links.heading-1.padding-down.colour,
body.mw-an h1.heading-links.heading-1.padding-down.colour,
body.mw-mo h1.heading-links.heading-1.padding-down.colour {
  font-family: Yanone Kaffeesatz, sans-serif;
  font-size: 40px;
  line-height: 1.2;
  margin: 0 0 4px;
}
body.mw-kd h2.heading-links.heading-1.padding-down.big-2,
body.mw-rl h2.heading-links.heading-1.padding-down.big-2,
body.mw-dg h2.heading-links.heading-1.padding-down.big-2,
body.mw-sh h2.heading-links.heading-1.padding-down.big-2,
body.mw-an h2.heading-links.heading-1.padding-down.big-2,
body.mw-rh h2.heading-links.heading-1.padding-down.font-3.big3,
body.mw-mo h2.heading-links.heading-1.padding-down.font-3.big3 {
  font-family: Yanone Kaffeesatz, sans-serif;
  font-size: 50px;
  line-height: 1.2;
  margin-top: 0;
  margin-bottom: 18px;
}
.mw-rh .div-block-2034.space > h2 {
  margin-bottom: 20px;
}
@media screen and (max-width: 991px) {
  body.mw-kd h1.heading-links.heading-1.padding-down.colour,
  body.mw-rl h1.heading-links.heading-1.padding-down.colour,
  body.mw-rh h1.heading-links.heading-1.padding-down.colour,
  body.mw-dg h1.heading-links.heading-1.padding-down.colour,
  body.mw-sh h1.heading-links.heading-1.padding-down.colour,
  body.mw-an h1.heading-links.heading-1.padding-down.colour,
  body.mw-mo h1.heading-links.heading-1.padding-down.colour {
    font-size: 35px;
  }
  body.mw-kd h2.heading-links.heading-1.padding-down.big-2,
  body.mw-rl h2.heading-links.heading-1.padding-down.big-2,
  body.mw-dg h2.heading-links.heading-1.padding-down.big-2,
  body.mw-sh h2.heading-links.heading-1.padding-down.big-2,
  body.mw-an h2.heading-links.heading-1.padding-down.big-2,
  body.mw-rh h2.heading-links.heading-1.padding-down.font-3.big3,
  body.mw-mo h2.heading-links.heading-1.padding-down.font-3.big3 {
    font-size: 40px;
  }
}
@media screen and (max-width: 767px) {
  body.mw-kd h1.heading-links.heading-1.padding-down.colour,
  body.mw-rl h1.heading-links.heading-1.padding-down.colour,
  body.mw-rh h1.heading-links.heading-1.padding-down.colour,
  body.mw-dg h1.heading-links.heading-1.padding-down.colour,
  body.mw-sh h1.heading-links.heading-1.padding-down.colour,
  body.mw-an h1.heading-links.heading-1.padding-down.colour,
  body.mw-mo h1.heading-links.heading-1.padding-down.colour {
    font-size: 25px;
  }
  body.mw-kd h2.heading-links.heading-1.padding-down.big-2,
  body.mw-rl h2.heading-links.heading-1.padding-down.big-2,
  body.mw-dg h2.heading-links.heading-1.padding-down.big-2,
  body.mw-sh h2.heading-links.heading-1.padding-down.big-2,
  body.mw-an h2.heading-links.heading-1.padding-down.big-2,
  body.mw-rh h2.heading-links.heading-1.padding-down.font-3.big3,
  body.mw-mo h2.heading-links.heading-1.padding-down.font-3.big3 {
    font-size: 30px;
  }
}
/* Kundendienst-Balken: zweizeilige Überschrift ohne Überlappung */
.mw-kd .grid-34 .div-block-2011 h3.heading-links.small.white {
  line-height: 1.2;
}
/* Rolläden: Fließtext läuft nie über die Icons */
.mw-rl .grid-42 > * {
  min-width: 0;
}
.mw-rl .grid-42 > .div-block-2027 {
  flex: 0 0 auto;
}
/* Reparaturen: Listentext bleibt rechts neben dem Häkchen-Icon (auch Handy) */
@media screen and (max-width: 991px) {
  .mw-rh .div-block-2034.space > .list-4 .custom-list-icon {
    padding-left: 36px !important;
  }
}

/* --- Aufgabe 7 – Smart Home: Häkchen-Kreis hellblau, Haken weiß
       (images/check-3.webp; der Haken ist transparent → weiße Fläche dahinter) --- */
.mw-sh .div-block-2091.dark .div-block-2012 > img[src$="check-3.webp"] {
  border-radius: 50%;
  background-image: radial-gradient(circle closest-side, #ffffff 78%, rgba(255, 255, 255, 0) 80%);
}
/* Montage: Haken exakt mittig im Kreis */
.mw-mo .div-block-2027.top {
  justify-content: center;
}
.mw-mo .div-block-2029-2-2.set {
  display: flex;
  justify-content: center;
  align-items: center;
  flex: 0 0 auto;
}
.mw-mo .div-block-2029-2-2.set > img {
  display: block;
  position: static;
  width: 100%;
  height: 100%;
  margin: 0;
  object-fit: contain;
}
@media screen and (min-width: 992px) {
  /* schmale Textspalte (992–1100 px): Icons verkleinern sich statt abgeschnitten zu werden */
  .mw-home .section_1.mitting .icon-grid > div {
    flex: 0 1 64px;
    min-width: 0;
  }
  .mw-home .section_1.mitting .icon-grid > div img {
    max-width: 100%;
    height: auto;
  }
}

/* ==========================================================================
   Prompt 4 – Handy- (≤767 px) und Desktop-Korrekturen (≥992 px)
   ========================================================================== */

/* ---------- A) HANDY / MOBIL ---------- */
@media screen and (max-width: 767px) {
  /* A1 – Bewertungs-Slider (Startseite + meine-bewertungen): runde Pfeile 11 px weiter
     nach innen, Größe/Farbe unverändert; Kartentext rückt entsprechend mit ein */
  body.mw-home .slider-8 > .left-arrow.w-slider-arrow-left,
  body.mw-bew .slider-8 > .left-arrow.w-slider-arrow-left {
    left: 11px;
  }
  body.mw-home .slider-8 > .custom-arrow-right.w-slider-arrow-right,
  body.mw-bew .slider-8 > .custom-arrow-right.w-slider-arrow-right {
    right: 11px;
  }
  body.mw-home .slider-8 .content-block-3,
  body.mw-bew .slider-8 .content-block-3 {
    padding-left: 57px;
    padding-right: 57px;
  }

  /* A2 – Bewertungskarten: "MyHammer-Kunde aus Großkrotzenburg" und "Bewertet am …"
     auf einer gemeinsamen Mittelachse, gleiche Schriftgröße und Zeilenhöhe */
  body.mw-home .slider-8 .absolute-block-3 > .horizontal-div,
  body.mw-bew .slider-8 .absolute-block-3 > .horizontal-div {
    justify-content: center;
  }
  body.mw-home .slider-8 .vertical-block,
  body.mw-bew .slider-8 .vertical-block {
    width: 100%;
    flex-direction: column;
    align-items: center;
    text-align: center;
  }
  body.mw-home .slider-8 .vertical-block > h3.heading-mittig-klein1.small,
  body.mw-bew .slider-8 .vertical-block > h3.heading-mittig-klein1.small,
  body.mw-home .slider-8 .vertical-block > .horizontal-div > p.paragraph-review,
  body.mw-bew .slider-8 .vertical-block > .horizontal-div > p.paragraph-review {
    width: 100%;
    margin-top: 0;
    margin-bottom: 0;
    font-size: 15px;
    line-height: 1.4;
    text-align: center;
  }
  body.mw-home .slider-8 .vertical-block > .horizontal-div,
  body.mw-bew .slider-8 .vertical-block > .horizontal-div {
    width: 100%;
    justify-content: center;
  }

  /* A3 – Kundendienst: Überschrift im helleren Dunkelblau wie Rolläden/Diagnose
     (gleiche Größe 30 px / Zeilenhöhe 1.2 wie dort) */
  body.mw-kd .div-block-207 > h2.heading-links.heading-1.padding-down.big-2 {
    color: var(--dark-blue);
    font-size: 30px;
    line-height: 1.2;
  }

  /* A4 – Rolläden: Abstand Überschrift → Text 8 px kleiner (18 → 10 px) */
  body.mw-rl .div-block-2034 > h2.heading-links.heading-1.padding-down.big-2 {
    margin-bottom: 10px;
  }

  /* A5 – Diagnose: das Flex-Raster setzte zusätzlich 16 px Lücke zwischen
     "Schwerpunkt", Überschrift und Text → Abstände wie auf den anderen
     Leistungsseiten (4 px bzw. 18 px); oberer Abstand bleibt 40 px wie dort */
  body.mw-dg .grid-54 > .div-block-2150 > h1.heading-links.heading-1.padding-down.colour {
    margin-bottom: -12px;
  }
  body.mw-dg .grid-54 > .div-block-2150 > h2.heading-links.heading-1.padding-down.big-2 {
    margin-bottom: 2px;
  }
  body.mw-dg .grid-54 > .div-block-2150 > p.text-mittig1 {
    margin-top: 0;
  }

  /* A6 – Montage, Blau-Block: Icon links, Beschriftung rechts, beide vertikal mittig;
     alle Icons auf derselben senkrechten Achse, kein Versatz */
  body.mw-mo .div-block-2091.dark.down._100.radius-0.height > .grid-35.set-2 {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    grid-column-gap: 16px;
    column-gap: 16px;
    width: 190px;
    max-width: 100%;
    margin: 0 auto;
    padding: 0;
  }
  body.mw-mo .div-block-2091.dark.down._100.radius-0.height > .grid-35.set-2 > .div-block-2012.padding {
    display: flex;
    flex: 0 0 48px;
    justify-content: center;
    align-items: center;
    width: 48px;
    height: 48px;
    margin: 0;
    padding: 0;
  }
  body.mw-mo .div-block-2091.dark.down._100.radius-0.height > .grid-35.set-2 > .div-block-2012.padding > img {
    width: 44px;
    height: 44px;
    margin: 0;
    object-fit: contain;
  }
  body.mw-mo .div-block-2091.dark.down._100.radius-0.height > .grid-35.set-2 > .div-block-2013 {
    display: flex;
    flex: 1 1 auto;
    justify-content: flex-start;
    align-items: center;
    width: auto;
    min-width: 0;
    margin: 0;
    padding: 0;
    text-align: left;
  }
  body.mw-mo .div-block-2091.dark.down._100.radius-0.height > .grid-35.set-2 > .div-block-2013 > p {
    justify-content: center;
    align-items: flex-start;
    margin: 0;
    text-align: left;
  }

  /* A7 – Montage: Häkchen-Icons in beiden Listen 4 px größer (≈20 → 24 px) */
  body.mw-mo .grid-42.set.spacing .div-block-2029-2-2.set {
    width: 24px;
    height: 24px;
  }

  /* A8 – Montage: wieder Luft zwischen "Warum wir?" und dem Blau-Block */
  body.mw-mo .div-block-2091.dark.down._100.radius-0.height {
    margin-top: 24px;
  }

  /* A9 – Reparaturarbeiten: Häkchen und Text 8 px weiter auseinander (36 → 44 px) */
  body.mw-rh .div-block-2034.space > .list-4 .custom-list-icon {
    padding-left: 44px !important;
  }

  /* A10 – Referenzen: Slider-Pfeile 10 px weiter nach außen (8 → -2 px) */
  body.mw-ref .slider-12.reference-slider > .slider-arrow.w-slider-arrow-left {
    left: -2px;
    right: auto;
  }
  body.mw-ref .slider-12.reference-slider > .slider-arrow.w-slider-arrow-right {
    right: -2px;
    left: auto;
  }
}

/* ---------- B) DESKTOP / LAPTOP ---------- */
@media screen and (min-width: 992px) {
  /* B1 – Kundendienst: Überschrift im helleren Dunkelblau wie die anderen Leistungsseiten */
  body.mw-kd .div-block-207 > h2.heading-links.heading-1.padding-down.big-2 {
    color: var(--dark-blue);
    font-size: 50px;
    line-height: 1.2;
  }

  /* B2 – Kundendienst: linke Box und rechte Spalte gleich hoch, Ober- und Unterkanten
     bündig (die rechte Spalte war per Webflow um 20 px nach oben verschoben) */
  body.mw-kd .div-block-208 {
    align-items: stretch;
  }
  body.mw-kd .div-block-208 > .div-block-2010 {
    top: 0;
    height: auto;
    margin-top: 0;
    margin-bottom: 0;
  }
  body.mw-kd .div-block-208 > .div-block-2010 > .div-block-2018 {
    margin-bottom: 0;
  }

  /* B3 – Diagnose: Icons und Schrift in den Fenstern vertikal mittig, auf einer Linie */
  body.mw-dg .div-block-2156 .div-block-2155 > .grid-35 {
    align-items: center;
    padding-top: 10px;
    padding-bottom: 10px;
  }
  body.mw-dg .div-block-2156 .div-block-2155 > .grid-35 > .div-block-2012,
  body.mw-dg .div-block-2156 .div-block-2155 > .grid-35 > .div-block-2013 {
    display: flex;
    align-items: center;
    margin-top: 0;
    margin-bottom: 0;
    padding-top: 0;
    padding-bottom: 0;
  }
  body.mw-dg .div-block-2156 .div-block-2155 > .grid-35 > .div-block-2013 > p {
    margin-top: 0;
    margin-bottom: 0;
  }
  body.mw-dg .div-block-2091.dark.down.div_area.top {
    align-items: center;
    padding-top: 20px;
    padding-bottom: 20px;
  }
  body.mw-dg .div-block-2091.dark.down.div_area.top > .grid-35 {
    align-items: center;
    margin-top: 0;
    margin-bottom: 0;
    padding-top: 0;
    padding-bottom: 0;
  }
  body.mw-dg .div-block-2091.dark.down.div_area.top > .grid-35 > .div-block-2012,
  body.mw-dg .div-block-2091.dark.down.div_area.top > .grid-35 > .div-block-2013 {
    display: flex;
    align-items: center;
    margin-top: 0;
    margin-bottom: 0;
    padding-top: 0;
    padding-bottom: 0;
  }
  body.mw-dg .div-block-2091.dark.down.div_area.top > .grid-35 p {
    margin-top: 0;
    margin-bottom: 0;
  }
  /* Fenster mit Haus-Icon usw.: gleiche Innenabstände oben und unten; Icons und
     Überschriften aller vier Fenster bleiben jeweils auf einer gemeinsamen Linie */
  body.mw-dg .grid-36.vh > .div-block-2016.top {
    justify-content: flex-start;
    padding-top: 16px;
    padding-bottom: 16px;
  }
  body.mw-dg .grid-36.vh > .div-block-2016.top > .div-block-2017 {
    margin-top: 0;
  }

  /* B4 – Antennen- und Netzwerktechnik: Anordnung nach Muster */
  body.mw-an .div-block-2093 {
    align-items: center;
    text-align: center;
  }
  body.mw-an .div-block-2093 > p.text-mittig1 {
    max-width: 900px;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
  }
  body.mw-an .grid-50 {
    align-items: stretch;
  }
  body.mw-an .grid-50 > .div-block-2143 {
    display: flex;
    align-items: stretch;
    overflow: hidden;
    border-radius: 12px;
    background-color: #ffffff;
    box-shadow: 0 6px 22px rgba(30, 57, 112, 0.12);
  }
  body.mw-an .grid-50 > .div-block-2143 > .div-block-2144,
  body.mw-an .grid-50 > .div-block-2143 > .div-block-2144.none {
    display: block;
  }
  body.mw-an .grid-50 > .div-block-2143 > .div-block-2145 {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    flex: 1 1 auto;
    min-width: 0;
    padding: 24px 28px 24px 8px;
    border-radius: 0;
  }
  /* Kartenkopf: runder Icon-Kreis links, Überschrift mit kurzer Linie rechts, mittig */
  body.mw-an .div-block-2145 > .grid-51 {
    display: flex;
    align-items: center;
    grid-column-gap: 16px;
    column-gap: 16px;
    margin-bottom: 18px;
  }
  body.mw-an .div-block-2145 > .grid-51 > .div-block-2012 {
    display: flex;
    flex: 0 0 64px;
    justify-content: center;
    align-items: center;
    width: 64px;
    height: 64px;
    padding: 0;
  }
  body.mw-an .div-block-2145 > .grid-51 > .div-block-2012 > img {
    width: 64px;
    height: 64px;
    object-fit: contain;
  }
  body.mw-an .div-block-2145 > .grid-51 > .div-block-2013 {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    margin: 0;
    padding: 0;
  }
  body.mw-an .div-block-2145 > .grid-51 h3 {
    margin: 0 0 8px;
    padding-bottom: 0;
  }
  body.mw-an .div-block-2145 > .grid-51 .divider23 {
    margin: 0;
  }
  body.mw-an .div-block-2145 > p.text-links1 {
    margin-top: 0;
    margin-bottom: 14px;
  }
  /* Häkchen-Liste mit blauen Häkchen, gleichmäßiger Zeilenabstand */
  body.mw-an .div-block-2145 > .list-4 {
    grid-row-gap: 12px;
    row-gap: 12px;
    flex: 1 0 auto;
    align-content: space-evenly;
    margin: 0 0 22px;
    padding-left: 0;
    list-style: none;
  }
  body.mw-an .div-block-2145 > .list-4 > .custom-list-icon {
    position: relative;
    padding-left: 34px;
    list-style: none;
  }
  body.mw-an .div-block-2145 > .list-4 > .custom-list-icon::before {
    content: "✓";
    position: absolute;
    top: 0;
    left: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background-color: var(--light-blue);
    color: #ffffff;
    font-size: 14px;
    font-weight: 700;
    line-height: 1;
  }
  body.mw-an .div-block-2145 > .list-4 > .custom-list-icon > p {
    margin: 0;
  }
  /* Fußzeile: dünne Trennlinie, Icon links, Text rechts, vertikal mittig */
  body.mw-an .div-block-2145 > .grid-52 {
    display: flex;
    align-items: center;
    grid-column-gap: 18px;
    column-gap: 18px;
    margin-top: auto;
    padding-top: 18px;
    border-top: 1px solid var(--light-blue);
  }
  body.mw-an .div-block-2145 > .grid-52 > .div-block-2012 {
    display: flex;
    flex: 0 0 64px;
    justify-content: center;
    align-items: center;
    width: 64px;
    height: 64px;
    padding: 0;
  }
  body.mw-an .div-block-2145 > .grid-52 > .div-block-2012 > img {
    width: 64px;
    height: 64px;
    object-fit: contain;
  }
  body.mw-an .div-block-2145 > .grid-52 > .div-block-2146 {
    display: flex;
    flex: 1 1 auto;
    align-items: center;
    min-width: 0;
  }
  body.mw-an .div-block-2145 > .grid-52 > .div-block-2146 > p {
    margin: 0;
  }
  body.mw-an .div-block-2145 > .grid-52 > .div-block-2146 > p > br {
    display: none;
  }
  /* Balken unten: vier Punkte, runder Icon-Kreis links, zweizeiliger Text rechts,
     dünne senkrechte Trennlinien */
  body.mw-an .div-block-2026.width {
    padding: 20px 10px;
    border-radius: 12px;
    background-color: var(--dark-blue);
  }
  body.mw-an .div-block-2026.width > .grid-38 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    grid-column-gap: 0;
    column-gap: 0;
    align-items: stretch;
  }
  body.mw-an .div-block-2026.width .grid-39.set {
    display: flex;
    justify-content: center;
    align-items: center;
    grid-column-gap: 14px;
    column-gap: 14px;
    padding: 4px 20px;
    border-right: 1px solid rgba(255, 255, 255, 0.5);
  }
  body.mw-an .div-block-2026.width .grid-39.set:last-child {
    border-right: 0;
  }
  body.mw-an .div-block-2026.width .grid-39.set > .div-block-2027 {
    flex: 0 0 56px;
    width: 56px;
  }
  body.mw-an .div-block-2026.width .grid-39.set .div-block-2029 {
    width: 56px;
    height: 56px;
  }
  body.mw-an .div-block-2026.width .grid-39.set > .div-block-2028 {
    flex: 1 1 auto;
    align-items: center;
    min-width: 0;
    border-right: 0;
  }
  body.mw-an .div-block-2026.width .grid-39.set > .div-block-2028 p {
    margin: 0;
  }
  body.mw-an .div-block-2026.width .grid-39.set > .div-block-2028 p > strong {
    display: block;
    text-transform: uppercase;
  }

  /* B5 – Montage: Abstand über "Unser Leistungsspektrum" (insg. 40 px) und über dem
     Blau-Block "Ob Einzelaufträge oder komplexe Montageprojekte" (40 px) */
  body.mw-mo .div-block-2104.left {
    margin-top: 20px;
  }
  body.mw-mo .div-block-2091.dark.down._100.radius-0.height {
    margin-top: 40px;
  }
}
@media screen and (min-width: 992px) and (max-width: 1199px) {
  /* B4 – schmale Desktop-Breite: Kartenüberschrift bleibt vollständig neben dem Icon-Kreis */
  body.mw-an .div-block-2145 > .grid-51 {
    grid-column-gap: 12px;
    column-gap: 12px;
  }
  body.mw-an .div-block-2145 > .grid-51 > .div-block-2012,
  body.mw-an .div-block-2145 > .grid-51 > .div-block-2012 > img {
    flex-basis: 52px;
    width: 52px;
    height: 52px;
  }
  body.mw-an .div-block-2145 > .grid-51 > .div-block-2013 {
    min-width: 0;
  }
  body.mw-an .div-block-2145 > .grid-51 h3 {
    font-size: 34px;
    line-height: 1.15;
  }
}

/* ==========================================================================
   Prompt 5 – Feinschliff Handy (≤767 px) und Desktop (≥992 px)
   ========================================================================== */
@media screen and (max-width: 767px) {
  /* C1 – Montage: Blau-Block "Ob Einzelaufträge …" lief ohne Trennung in den
     gleichfarbigen Footer → weißer Abstand davor wie auf den anderen Leistungsseiten */
  body.mw-mo .div-block-2091.dark.down._100.radius-0.height {
    margin-bottom: 32px;
  }
  /* C1 – Montage-Einleitung: Häkchen und Schrift auf einer gemeinsamen Mittelachse
     mit der Zielscheibe darunter. Das Panel hat links 52 px, rechts 20 px Innenabstand
     (schräger Rand) – die Liste nutzt deshalb links und rechts je 20 px. */
  body.mw-mo .div-block-2096.left.height.set.vh > .div-block-2097 {
    align-items: center;
    width: calc(100% + 32px);
    margin-left: -32px;
  }
  body.mw-mo .div-block-2097 > .grid-42.set.spacing,
  body.mw-mo .div-block-2105 > .grid-42.set.spacing {
    width: 100%;
    align-items: center;
    row-gap: 10px;
  }
  body.mw-mo .div-block-2097 > .grid-42.set.spacing > .div-block-2027.top,
  body.mw-mo .div-block-2105 > .grid-42.set.spacing > .div-block-2027.top,
  body.mw-mo .div-block-2097 > .grid-42.set.spacing > .div-block-207.width.height-set,
  body.mw-mo .div-block-2105 > .grid-42.set.spacing > .div-block-207.width.height-set {
    width: 100%;
    align-items: center;
    justify-content: center;
    text-align: center;
  }
  body.mw-mo .div-block-2097 > .grid-42.set.spacing p,
  body.mw-mo .div-block-2105 > .grid-42.set.spacing p {
    text-align: center;
  }

  /* C2 – Reparaturarbeiten: Abstand Überschrift → erster Absatz 8 px größer (18 → 26 px) */
  body.mw-rh .div-block-2034.space > h2.heading-links.heading-1.padding-down.font-3.big3 {
    margin-bottom: 26px;
  }
}

@media screen and (min-width: 992px) {
  /* C3 – Diagnose, blauer Balken: Icon und Schrift in jedem Fenster auch
     horizontal mittig (vertikale Zentrierung aus B3 bleibt). Spalten passen sich
     dem Inhalt an, das Paar steht mittig; Mindestbreite = Icon + längstes Wort. */
  body.mw-dg .div-block-2091.dark.down.div_area.top.margin > .grid-35 {
    grid-template-columns: auto auto;
    justify-content: center;
    align-items: center;
    grid-column-gap: 14px;
    column-gap: 14px;
  }
  body.mw-dg .div-block-2091.dark.down.div_area.top.margin > .grid-35 > .div-block-2012 {
    justify-content: center;
  }

  /* C4 – Montage: weißer Abstand zwischen Blau-Block und gleichfarbigem Footer */
  body.mw-mo .div-block-2091.dark.down._100.radius-0.height {
    margin-bottom: 48px;
  }
}

/* ==========================================================================
   Prompt 6 – Handy- (≤767 px) und Desktop-Korrekturen (≥992 px), 29.10.
   ========================================================================== */

/* D3 – Kundendienst: Hauptüberschrift auf allen Breiten #3a608d
   (zwischen 768 und 991 px stand noch #1e3970) */
body.mw-kd .div-block-207 > h2 {
  color: var(--dark-blue);
}

@media screen and (max-width: 767px) {
  /* D2a – Bewertungs-Slider: runde Pfeile 18 px vom Rand (statt 11 px);
     Kartentext behält 57 px Innenabstand (Pfeil 36 px + 18 px = 54 px) */
  body.mw-home .slider-8 > .left-arrow.w-slider-arrow-left,
  body.mw-bew .slider-8 > .left-arrow.w-slider-arrow-left {
    left: 18px;
  }
  body.mw-home .slider-8 > .custom-arrow-right.w-slider-arrow-right,
  body.mw-bew .slider-8 > .custom-arrow-right.w-slider-arrow-right {
    right: 18px;
  }
  body.mw-home .slider-8 .content-block-3,
  body.mw-bew .slider-8 .content-block-3 {
    padding-left: 57px;
    padding-right: 57px;
  }

  /* D2b – Name/Ort und "Bewertet am …" bei allen Slides mittig, auch mit Umbruch */
  body.mw-home .slider-8 .vertical-block,
  body.mw-bew .slider-8 .vertical-block {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    margin-left: 0;
    margin-right: 0;
    text-align: center;
  }
  body.mw-home .slider-8 .vertical-block > *,
  body.mw-bew .slider-8 .vertical-block > *,
  body.mw-home .slider-8 .vertical-block h3.heading-mittig-klein1.small,
  body.mw-bew .slider-8 .vertical-block h3.heading-mittig-klein1.small,
  body.mw-home .slider-8 .vertical-block .horizontal-div,
  body.mw-bew .slider-8 .vertical-block .horizontal-div,
  body.mw-home .slider-8 .vertical-block p.paragraph-review,
  body.mw-bew .slider-8 .vertical-block p.paragraph-review {
    width: 100%;
    max-width: 100%;
    margin-left: 0;
    margin-right: 0;
    padding-left: 0;
    padding-right: 0;
    justify-content: center;
    align-self: center;
    text-align: center;
  }
  body.mw-home .slider-8 .vertical-block h3.heading-mittig-klein1.small,
  body.mw-bew .slider-8 .vertical-block h3.heading-mittig-klein1.small,
  body.mw-home .slider-8 .vertical-block p.paragraph-review,
  body.mw-bew .slider-8 .vertical-block p.paragraph-review {
    display: block;
  }

  /* D4 – Rolläden: Abstand Überschrift → Fließtext 8 px kleiner (30 → 22 px) */
  body.mw-rl .div-block-2042 .div-block-207.width.top {
    margin-top: 22px;
  }

  /* D5 – Diagnose: Abstände wie auf der Rolläden-Seite – 40 px über "Schwerpunkt",
     4 px "Schwerpunkt" → Überschrift, 32 px Überschrift → Text */
  body.mw-dg .grid-54 {
    grid-row-gap: 0;
    row-gap: 0;
  }
  body.mw-dg .grid-54 > .div-block-2150 > h1.heading-links.heading-1.padding-down.colour {
    margin-top: 0;
    margin-bottom: 4px;
  }
  body.mw-dg .grid-54 > .div-block-2150 > h2.heading-links.heading-1.padding-down.big-2 {
    margin-top: 0;
    margin-bottom: 32px;
  }
  body.mw-dg .grid-54 > .div-block-2150 > p.text-mittig1 {
    margin-top: 0;
  }

  /* D7a – Montage: Häkchen links neben dem Text, beide vertikal mittig, 10 px Abstand;
     alle Häkchen einer Liste auf einer gemeinsamen senkrechten Achse, Liste mittig */
  body.mw-mo .div-block-2096.left.height.set.vh > .div-block-2097,
  body.mw-mo .div-block-2106 > .div-block-2105 {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, max-content) minmax(0, 1fr);
    grid-row-gap: 0;
    row-gap: 0;
    align-items: center;
  }
  body.mw-mo .div-block-2105 > :not(.grid-42) {
    grid-column: 1 / -1;
  }
  body.mw-mo .div-block-2097 > .grid-42.set.spacing,
  body.mw-mo .div-block-2105 > .grid-42.set.spacing {
    grid-column: 2;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: flex-start;
    align-items: center;
    grid-column-gap: 10px;
    column-gap: 10px;
    width: auto;
    min-width: 0;
  }
  body.mw-mo .div-block-2097 > .grid-42.set.spacing > .div-block-2027.top,
  body.mw-mo .div-block-2105 > .grid-42.set.spacing > .div-block-2027.top {
    flex: 0 0 auto;
    width: auto;
    margin: 0;
    padding: 0;
  }
  body.mw-mo .div-block-2097 > .grid-42.set.spacing > .div-block-207.width.height-set,
  body.mw-mo .div-block-2105 > .grid-42.set.spacing > .div-block-207.width.height-set {
    flex: 0 1 auto;
    width: auto;
    min-width: 0;
    height: auto;
    margin: 0;
    padding: 0;
    align-items: flex-start;
    justify-content: center;
    text-align: left;
  }
  body.mw-mo .div-block-2097 > .grid-42.set.spacing p,
  body.mw-mo .div-block-2105 > .grid-42.set.spacing p,
  body.mw-mo .div-block-2105 > .grid-42.set.spacing p.text-mittig1.flie-text.left.white.left-2 {
    margin: 0;
    justify-content: flex-start;
    text-align: left;
  }

  /* D7b – Montage: Häkchen-Kreise 4 px größer (24 → 28 px Kasten, Kreis ≈ 20 px sichtbar),
     Symbole im Blau-Block 4 px größer (44 → 48 px) */
  body.mw-mo .grid-42.set.spacing .div-block-2029-2-2.set {
    width: 28px;
    height: 28px;
  }
  body.mw-mo .grid-42.set.spacing .div-block-2029-2-2.set > img {
    width: 28px;
    height: 28px;
    max-width: none;
  }
  body.mw-mo .div-block-2091.dark.down._100.radius-0.height > .grid-35.set-2 > .div-block-2012.padding {
    flex: 0 0 52px;
    width: 52px;
    height: 52px;
  }
  body.mw-mo .div-block-2091.dark.down._100.radius-0.height > .grid-35.set-2 > .div-block-2012.padding > img {
    width: 48px;
    height: 48px;
  }

  /* D8 – Reparaturarbeiten: Überschrift → erster Absatz +10 px (26 → 36 px),
     Häkchen-Kreis → Text +6 px (44 → 50 px) */
  body.mw-rh .div-block-2034.space > h2.heading-links.heading-1.padding-down.font-3.big3 {
    margin-bottom: 36px;
  }
  body.mw-rh .div-block-2034.space > .list-4 .custom-list-icon {
    padding-left: 50px !important;
  }

  /* D9 – Referenzen: Bild 44 px Innenabstand links/rechts, Pfeile (36 px, bei -2 px)
     liegen daneben statt über dem Bild; Pfeile auf Bildmitte (4:3) */
  body.mw-ref .slider-12.reference-slider .w-slide > .w-lightbox {
    width: auto;
    margin-left: 44px;
    margin-right: 44px;
  }
  body.mw-ref .slider-12.reference-slider > .slider-arrow {
    margin-top: calc((100% - 88px) * 0.375 - 18px);
  }
}

/* D7c – Montage (Handy und Desktop): dünne Trennlinie mit je 24 px Abstand zwischen
   Icon-Block (ZUVERLÄSSIG … KUNDENNAH) und Kontaktbereich im Footer */
body.mw-mo .div-block-2091.dark.down._100.radius-0.height {
  margin-bottom: 0;
  padding-bottom: 24px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.35);
}
body.mw-mo section.footer-2 {
  padding-top: 24px;
}
@media screen and (max-width: 767px) {
  body.mw-mo .div-block-2091.dark.down._100.radius-0.height {
    margin-bottom: 0;
  }
}

@media screen and (min-width: 992px) {
  body.mw-mo .div-block-2091.dark.down._100.radius-0.height {
    height: auto;
    margin-bottom: 0;
    padding-top: 24px;
    padding-bottom: 24px;
  }
  body.mw-mo .div-block-2091.dark.down._100.radius-0.height > .grid-35 {
    height: auto;
    margin-bottom: 0;
    align-self: center;
  }
  /* Footer-Überschriften (eine Reihe) haben 10 px eigenen Abstand → zusammen 24 px */
  body.mw-mo section.footer-2 {
    padding-top: 14px;
  }

  /* D3 – Kundendienst: linke Kachel und rechte Spalte gleich hoch, rechte Spalte
     teilt sich die Höhe ohne feste Mindesthöhen, Inhalte vertikal mittig */
  body.mw-kd .div-block-208 {
    display: grid;
    align-items: stretch;
  }
  body.mw-kd .div-block-208 > .div-block-209-exceed,
  body.mw-kd .div-block-208 > .div-block-2010 {
    align-self: stretch;
    height: auto;
    min-height: 0;
  }
  body.mw-kd .div-block-208 > .div-block-2010 {
    display: flex;
    flex-direction: column;
  }
  body.mw-kd .div-block-208 > .div-block-2010 > .div-block-2015,
  body.mw-kd .div-block-208 > .div-block-2010 > .div-block-2018 {
    display: flex;
    flex-direction: column;
    justify-content: center;
    flex: 1 1 auto;
    height: auto;
    min-height: 0;
  }
  body.mw-kd .div-block-208 > .div-block-2010 > .div-block-2018 {
    margin-bottom: 0;
  }

  /* D5 – Diagnose: Liste in der weißen Karte – Icon und Text je Zeile vertikal mittig,
     gleiche Spalten und Innenabstände in allen Zeilen */
  body.mw-dg .div-block-2156 .div-block-2155 > .grid-35 {
    grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
    align-items: center;
    padding: 12px 5px 12px 0;
  }
  body.mw-dg .div-block-2156 > .div-block-2155 {
    justify-content: flex-start;
    padding-top: 0;
  }
  body.mw-dg .div-block-2156 > .div-block-2155:first-child {
    padding-top: 10px;
  }
  body.mw-dg .div-block-2156 .div-block-2155 > .grid-35 > .div-block-2012 {
    justify-content: center;
    align-items: center;
  }
  body.mw-dg .div-block-2156 .div-block-2155 > .grid-35 > .div-block-2013 {
    justify-content: flex-start;
  }
  body.mw-dg .div-block-2156 .div-block-2155 > .grid-35 > .div-block-2013 > p > br {
    display: none;
  }
  /* blauer Streifen: bisher absolut im unteren Sektionsrand (20vh) verankert und
     85 % breit, linksbündig → jetzt im normalen Fluss unter Karte und Bild, gleiche
     Breite wie diese, zentriert (überlappt auch bei niedrigen Fenstern nicht mehr);
     Gruppen gleichmäßig verteilt, Icon und Text je Gruppe mittig auf einer Linie */
  body.mw-dg .section-60.zweitfarbe.top.dottom.padding-side.white-bg {
    padding-bottom: 48px;
  }
  body.mw-dg .div-block-2091.dark.down.div_area.top.margin {
    position: relative;
    top: auto;
    right: auto;
    bottom: auto;
    left: auto;
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: space-evenly;
    box-sizing: border-box;
    width: 100%;
    max-width: 100%;
    margin: 24px auto 0;
    padding: 20px 16px;
  }
  body.mw-dg .div-block-2091.dark.down.div_area.top.margin > .grid-35 {
    flex: 0 1 auto;
    width: auto;
    min-width: 0;
  }
  body.mw-dg .div-block-2091.dark.down.div_area.top.margin > .grid-35:first-child {
    flex: 0 1 40%;
  }
  body.mw-dg .div-block-2091.dark.down.div_area.top.margin > .grid-35 {
    display: flex;
    justify-content: center;
    align-items: center;
    grid-column-gap: 14px;
    column-gap: 14px;
  }
  body.mw-dg .div-block-2091.dark.down.div_area.top.margin > .grid-35 > .div-block-2012 {
    flex: 0 0 56px;
    width: 56px;
  }
  body.mw-dg .div-block-2091.dark.down.div_area.top.margin > .grid-35 > .div-block-2012 > img {
    width: 56px;
    max-width: 100%;
    height: auto;
  }
  body.mw-dg .div-block-2091.dark.down.div_area.top.margin > .grid-35 > .div-block-2013 {
    flex: 0 1 auto;
    width: auto;
    min-width: 0;
  }
  /* Schlagworte zweizeilig (z. B. PRÄZISE / ANALYSE), Box so breit wie das längste Wort */
  body.mw-dg .div-block-2091.dark.down.div_area.top.margin > .grid-35:not(:first-child) > .div-block-2013 > p {
    width: min-content;
    max-width: 100%;
  }

  /* D6 – Antennen- und Netzwerktechnik: Titel in Versalien, Kopfzeile mit Icon und
     Titel gleich hoch und mittig, Häkchen auf Höhe der ersten Textzeile,
     Hinweiszeile mit 48-px-Icon links, Text mittig daneben, unten bündig */
  body.mw-an .grid-50 {
    align-items: stretch;
  }
  body.mw-an .grid-50 > .div-block-2143 {
    height: 100%;
  }
  body.mw-an .div-block-2145 > .grid-51 {
    align-items: center;
  }
  body.mw-an .div-block-2145 > .grid-51 > .div-block-2013 {
    align-self: stretch;
    justify-content: center;
  }
  /* Titel in Versalien; Schriftgröße folgt der Breite der Titelspalte, damit der
     längere Versalien-Titel neben dem Icon-Kreis vollständig bleibt */
  body.mw-an .div-block-2145 > .grid-51 > .div-block-2013 {
    flex: 1 1 0;
    min-width: 0;
    container-type: inline-size;
  }
  body.mw-an .div-block-2145 > .grid-51 h3 {
    font-size: min(42px, 12.5cqi);
    line-height: 1.15;
    text-transform: uppercase;
    overflow-wrap: anywhere;
  }
  /* Häkchen-Kreis (22 px) mittig zur ersten Textzeile (15 px / 22,5 px Zeilenhöhe) */
  body.mw-an .div-block-2145 > .list-4 > .custom-list-icon {
    min-height: 22px;
    text-align: left;
  }
  body.mw-an .div-block-2145 > .list-4 > .custom-list-icon::before {
    top: 0;
  }
  /* Beide Karten zeilengleich (Subgrid): Kopfzeile, Einleitung, Liste und Hinweiszeile
     stehen in beiden Fenstern auf gleicher Höhe, Hinweiszeilen gleich hoch und unten */
  body.mw-an .grid-50 {
    grid-template-rows: auto auto 1fr auto;
  }
  body.mw-an .grid-50 > .div-block-2143 {
    display: grid;
    grid-row: span 4;
    grid-template-columns: 40% minmax(0, 1fr);
    grid-template-rows: subgrid;
    grid-row-gap: 0;
    row-gap: 0;
  }
  body.mw-an .grid-50 > .div-block-2143 > .div-block-2144 {
    grid-column: 1;
    grid-row: 1 / -1;
    width: auto;
  }
  body.mw-an .grid-50 > .div-block-2143 > .div-block-2145 {
    display: grid;
    grid-column: 2;
    grid-row: 1 / -1;
    grid-template-rows: subgrid;
    grid-template-columns: minmax(0, 1fr);
    grid-row-gap: 0;
    row-gap: 0;
    width: auto;
  }
  body.mw-an .div-block-2145 > .grid-51 {
    align-self: center;
  }
  body.mw-an .div-block-2145 > p.text-links1 {
    align-self: start;
  }
  body.mw-an .div-block-2145 > .list-4 {
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    align-self: stretch;
  }
  body.mw-an .div-block-2145 > .grid-52 {
    align-self: stretch;
    margin-top: 0;
  }
  body.mw-an .div-block-2145 > .grid-52 {
    align-items: center;
  }
  body.mw-an .div-block-2145 > .grid-52 > .div-block-2012 {
    flex: 0 0 48px;
    width: 48px;
    height: 48px;
  }
  body.mw-an .div-block-2145 > .grid-52 > .div-block-2012 > img {
    width: 48px;
    height: 48px;
  }
  body.mw-an .div-block-2145 > .grid-52 > .div-block-2146,
  body.mw-an .div-block-2145 > .grid-52 > .div-block-2146 > p {
    justify-content: flex-start;
    text-align: left;
  }
}