/* ──Reset & Scope ──────────────────────────────────────────*/
  .co-teaser-wrap *,
  .co-teaser-wrap *::before,
  .co-teaser-wrap *::after { box-sizing: border-box; margin: 0; padding: 0; }.co-teaser-wrap {
    font-family: 'Open Sans', sans-serif;
    background: #ffffff;
    padding: 56px 20px 64px;
    color: #333333;
    max-width: 1200px;
    margin: 0 auto;
  }/* ── Header — passt zum Seitenstil ───────────────────────── */.co-teaser-header {
    text-align: center;
    margin-bottom: 40px;
  }.co-teaser-header .co-eyebrow {
    display: block;
    font-style: italic;
    font-weight: 400;
    font-size: 0.9rem;
    color: #888888;
    letter-spacing: 0.04em;
    margin-bottom: 8px;
  }.co-teaser-header h2 {
    font-family: 'Open Sans', sans-serif;
    font-weight: 600;
    font-size: clamp(1.5rem, 3vw, 2.1rem);
    color: #1a2535;
    letter-spacing: 0.01em;
    line-height: 1.2;
  }/* ── Asymmetrisches Grid ──────────────────────────────────── */.co-teaser-grid {
    display: grid;
    grid-template-rows: auto auto;
    gap: 12px;
  }/* Obere Reihe: 1 großes Bild links (2/3) + 2 gestapelt rechts (1/3) */.co-teaser-row-top {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 12px;
  }/* Das große linke Bild — deckt beide rechten Bilder in der Höhe ab */.co-teaser-cell-main {
    grid-row: 1 / 2;
    aspect-ratio: 4/3;
    overflow: hidden;
    position: relative;
  }/* Rechte Spalte: zwei gestapelte Bilder */.co-teaser-col-right {
    display: grid;
    grid-template-rows: 1fr 1fr;
    gap: 12px;
  }.co-teaser-col-right .co-teaser-cell {
    aspect-ratio: unset;
    height: 100%;
  }/* Untere Reihe: 3 gleich breite Bilder */.co-teaser-row-bottom {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
  }.co-teaser-row-bottom .co-teaser-cell {
    aspect-ratio: 3/4;
  }/* ── Bild-Zelle ───────────────────────────────────────────── */.co-teaser-cell {
    position: relative;
    overflow: hidden;
    display: block;
    cursor: pointer;
    background: #e8ecf2;
    text-decoration: none;
  }.co-teaser-cell img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.45s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    -webkit-user-drag: none;
    user-select: none;
  }/* Blauer Overlay mit Lupe */.co-teaser-cell .co-overlay {
    position: absolute;
    inset: 0;
    background: rgba(29, 80, 150, 0.0);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.35s ease;
    pointer-events: none;
  }.co-teaser-cell .co-overlay-icon {
    opacity: 0;
    transform: scale(0.7);
    transition: opacity 0.3s ease, transform 0.3s ease;
    color: #ffffff;
    width: 44px;
    height: 44px;
    padding: 10px;
    border-radius: 50%;
    background: rgba(6, 57, 113, 0.88);
    box-shadow: 0 3px 14px rgba(0, 0, 0, 0.22);
  }.co-teaser-cell .co-overlay-icon svg {
    width: 100%;
    height: 100%;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
  }/* Hover-Zustand */.co-teaser-cell:hover img {
    transform: scale(1.04);
  }.co-teaser-cell:hover .co-overlay {
    background: transparent;
  }.co-teaser-cell:hover .co-overlay-icon {
    opacity: 1;
    transform: scale(1);
  }/* ── CTA-Button ───────────────────────────────────────────── */.co-teaser-cta {
    text-align: center;
    margin-top: 40px;
  }.co-teaser-btn {
    display: inline-block;
    background: #1d5096;
    color: #ffffff;
    text-decoration: none;
    font-family: 'Open Sans', sans-serif;
    font-weight: 600;
    font-size: 0.85rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    padding: 12px 32px;
    border-radius: 2px;
    transition: background 0.25s ease, box-shadow 0.25s ease;
    border: none;
    cursor: pointer;
    box-shadow: 0 2px 10px rgba(29,80,150,0.18);
  }.co-teaser-btn:hover {
    background: #152f5e;
    box-shadow: 0 4px 18px rgba(29,80,150,0.28);
    color: #ffffff;
    text-decoration: none;
  }#section-id-1583092450138 .home-photo-gallery-ctas {
    clear: both;
    padding: 20px 0 8px;
    text-align: center;
    width: 100%;
  }#section-id-1583092450138 .home-photo-gallery-cta {
    margin: 0;
    text-align: center;
  }#section-id-2e83cf2e-5e4c-4c33-b187-cbf9272fde6b #section-id-599561ee-9390-4280-8779-1c452bef7814 .city-row,
  #section-id-2e83cf2e-5e4c-4c33-b187-cbf9272fde6b #section-id-09c966f1-e67b-4ed5-87a4-d719677551e5 .city-row,
  #section-id-2e83cf2e-5e4c-4c33-b187-cbf9272fde6b #section-id-64cd7514-70ae-4c87-ae00-f9c13f613d7e .city-row {
    display: grid !important;
    gap: 24px;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    margin: 0;
  }@media (max-width: 768px){#section-id-2e83cf2e-5e4c-4c33-b187-cbf9272fde6b #section-id-599561ee-9390-4280-8779-1c452bef7814 .city-row,
    #section-id-2e83cf2e-5e4c-4c33-b187-cbf9272fde6b #section-id-09c966f1-e67b-4ed5-87a4-d719677551e5 .city-row,
    #section-id-2e83cf2e-5e4c-4c33-b187-cbf9272fde6b #section-id-64cd7514-70ae-4c87-ae00-f9c13f613d7e .city-row {
      grid-template-columns: 1fr !important;
      gap: 28px;
    }}#section-id-2e83cf2e-5e4c-4c33-b187-cbf9272fde6b #section-id-599561ee-9390-4280-8779-1c452bef7814 .city-row-column,
  #section-id-2e83cf2e-5e4c-4c33-b187-cbf9272fde6b #section-id-09c966f1-e67b-4ed5-87a4-d719677551e5 .city-row-column,
  #section-id-2e83cf2e-5e4c-4c33-b187-cbf9272fde6b #section-id-64cd7514-70ae-4c87-ae00-f9c13f613d7e .city-row-column {
    flex-basis: auto !important;
    float: none !important;
    max-width: none !important;
    min-width: 0;
    padding: 0 !important;
    width: auto !important;
  }#section-id-2e83cf2e-5e4c-4c33-b187-cbf9272fde6b .city-block-overlay-image-content {
    aspect-ratio: 3 / 4;
    height: auto;
    overflow: visible;
  }#section-id-2e83cf2e-5e4c-4c33-b187-cbf9272fde6b .city-block-wrapper {
    padding-bottom: 40px;
  }#section-id-2e83cf2e-5e4c-4c33-b187-cbf9272fde6b .overlay-image-title {
    bottom: -32px;
    left: 0;
    right: 0;
    text-align: center;
    top: auto;
  }#section-id-2e83cf2e-5e4c-4c33-b187-cbf9272fde6b .overlay-image-title .city-block-title {
    color: #1d5096;
    text-shadow: none;
  }.feature-reveal-ready,
  .section-reveal-ready {
    opacity: 0;
    transform: translateY(16px);
    transition: opacity 420ms ease-out, transform 420ms ease-out;
  }.feature-reveal-ready.is-visible,
  .section-reveal-ready.is-visible {
    opacity: 1;
    transform: translateY(0);
  }@media (max-width: 768px){#Handwerk-in-Perfektion .city-block-feature,
    #section-id-1583266395725 .city-block-feature {
      padding: 28px 0 34px;
    }#Handwerk-in-Perfektion .city-block-feature .sppb-icon,
    #section-id-1583266395725 .city-block-feature .sppb-icon {
      line-height: 1;
      margin: 0 0 16px;
    }#Handwerk-in-Perfektion .feature-reveal .sppb-icon i,
    #section-id-1583266395725 .feature-reveal .sppb-icon i {
      color: #43484d;
      transform: scale(1);
      transition: color 360ms ease-out, transform 360ms ease-out;
    }#Handwerk-in-Perfektion .feature-reveal.is-visible .sppb-icon i,
    #section-id-1583266395725 .feature-reveal.is-visible .sppb-icon i {
      color: #1d5096 !important;
      transform: scale(1.22);
    }#section-id-2e83cf2e-5e4c-4c33-b187-cbf9272fde6b .overlay-image-title {
      display: block !important;
      visibility: visible !important;
      opacity: 0;
      transform: translateY(8px);
      padding: 7px 10px;
      background: rgba(16, 45, 83, 0.84);
      transition: opacity 360ms ease-out, transform 360ms ease-out;
    }#section-id-2e83cf2e-5e4c-4c33-b187-cbf9272fde6b .overlay-image-title .city-block-title {
      margin: 0;
      color: #fff !important;
    }#section-id-2e83cf2e-5e4c-4c33-b187-cbf9272fde6b .city-block-overlay-image.home-image-is-visible .overlay-image-title {
      opacity: 1;
      visibility: visible !important;
      transform: translateY(0);
    }#section-id-2e83cf2e-5e4c-4c33-b187-cbf9272fde6b .city-block-overlay-image.home-image-is-visible .city-block-title {
      transform: translate3d(0, 0, 0) !important;
    }/* Auf Touch-Geräten ausschließlich die Scroll-Klasse auswerten. */#site-main .co-teaser-cell:hover img {
      transform: none;
    }#site-main .co-teaser-cell:hover .co-overlay-icon {
      opacity: 0;
      transform: scale(0.7);
    }#site-main .overlay-show-content-on-hover:hover .overlay-image-title {
      opacity: 0 !important;
      visibility: hidden !important;
    }#site-main .overlay-show-content-on-hover.home-image-is-visible .overlay-image-title {
      opacity: 1 !important;
      visibility: visible !important;
    }#site-main .city-block-overlay-image.home-image-is-visible,
    #site-main .co-teaser-grid .co-teaser-cell.home-image-is-visible {
      box-shadow: 0 8px 20px rgba(16, 45, 83, 0.14);
      transition: box-shadow 420ms ease-out;
    }#site-main .co-teaser-grid .co-teaser-cell.home-image-is-visible img {
      transform: scale(1.018);
    }}.city-optik-current-word {
    display: inline-block;
    min-width: 12ch;
    opacity: 1;
    transform: translateY(0);
    transition: opacity 160ms ease-out, transform 160ms ease-out;
  }.city-optik-current-word.is-changing {
    opacity: 0;
    transform: translateY(0.2em);
  }@media (prefers-reduced-motion: reduce){.feature-reveal-ready,
    .section-reveal-ready {
      opacity: 1;
      transform: none;
      transition: none;
    }}@media (min-width: 769px) and (max-width: 991px){#city-block-1583092450163 .city-block-overlay-image-content,
    #city-block-1583092450171 .city-block-overlay-image-content {
      height: 385px;
    }.home-photo-gallery-cta .co-teaser-btn {
      padding: 12px 8px;
      font-size: 0.65rem;
      letter-spacing: 0.055em;
      white-space: nowrap;
    }}@media (max-width: 480px){.co-teaser-header h2 { font-size: 1.25rem; }}.co-credit {
    text-align: center;
    margin-top: 10px;
    font-size: 0.88rem;
    color: #555;
    letter-spacing: 0.05em;
  }.co-credit a {
    color: #1d5096;
    text-decoration: none;
    font-weight: 600;
    border-bottom: 1px solid rgba(29,80,150,0.3);
    transition: color 0.2s, border-color 0.2s;
  }.co-credit a:hover { color: #152f5e; border-color: #152f5e; }/* ── Mobile Flattening ────────────────────────────────────── *//* Auf Mobile alle strukturellen Container auflösen und
     die Bilder untereinander anzeigen.                         */@media (max-width: 768px){.co-teaser-wrap { padding: 40px 14px 48px; }.co-teaser-grid-outer { display: block; }/*
      Keine "display: contents"-Auflösung: Sie ist in mobilen Safari-Versionen
      nicht zuverlässig und kann die Bildzellen zu schmalen Spalten machen.
      Die Galerie wird bewusst als einfache vertikale Liste ausgegeben.
    */.co-desktop-grid,
    .co-teaser-row-top,
    .co-teaser-row-bottom,
    .co-teaser-col-right {
      display: block !important;
    }/* Alle Bilder stehen nacheinander und erhalten dieselbe Fläche. */.co-desktop-grid .co-teaser-cell,
    .co-desktop-grid .co-teaser-cell-main {
      display: block !important;
      width: 100% !important;
      margin: 0 0 10px !important;
      aspect-ratio: 3/4 !important;
      height: auto !important;
      grid-row: unset !important;
      grid-column: unset !important;
    }}#city-block-1499426131380{
}#city-block-1499426131380{
}#city-block-wrapper-1499426131380{
}#city-block-1499426131380 .city-block-title{
}#city-block-1499426131380 .city-block-single-image-container img{
}#city-block-1499426131380 img{
}#city-block-1499426131380 .city-block-single-image-container{
}#city-block-1499426131380{
text-align: left;
}#city-block-1499426729472{
}#city-block-1499426729472{
}#city-block-wrapper-1499426729472{
}#city-block-1499426729472 .city-block-title{
}#city-block-1499426729472 .city-block-text-block{
text-align: left;
}#city-block-1499426729472 .city-block-text-block .city-block-content{
}@media (max-width: 1199.98px){#city-block-1499426729472 .city-block-text-block .city-block-content{}}@media (max-width: 991.98px){#city-block-1499426729472 .city-block-text-block .city-block-content{}}@media (max-width: 767.98px){#city-block-1499426729472 .city-block-text-block .city-block-content{}}@media (max-width: 575.98px){#city-block-1499426729472 .city-block-text-block .city-block-content{}}#city-block-1499426729472 .city-block-text-block .city-block-content h1,#city-block-1499426729472 .city-block-text-block .city-block-content h2,#city-block-1499426729472 .city-block-text-block .city-block-content h3,#city-block-1499426729472 .city-block-text-block .city-block-content h4,#city-block-1499426729472 .city-block-text-block .city-block-content h5,#city-block-1499426729472 .city-block-text-block .city-block-content h6{
}@media (max-width: 1199.98px){#city-block-1499426729472 .city-block-text-block .city-block-content h1,#city-block-1499426729472 .city-block-text-block .city-block-content h2,#city-block-1499426729472 .city-block-text-block .city-block-content h3,#city-block-1499426729472 .city-block-text-block .city-block-content h4,#city-block-1499426729472 .city-block-text-block .city-block-content h5,#city-block-1499426729472 .city-block-text-block .city-block-content h6{}}@media (max-width: 991.98px){#city-block-1499426729472 .city-block-text-block .city-block-content h1,#city-block-1499426729472 .city-block-text-block .city-block-content h2,#city-block-1499426729472 .city-block-text-block .city-block-content h3,#city-block-1499426729472 .city-block-text-block .city-block-content h4,#city-block-1499426729472 .city-block-text-block .city-block-content h5,#city-block-1499426729472 .city-block-text-block .city-block-content h6{}}@media (max-width: 767.98px){#city-block-1499426729472 .city-block-text-block .city-block-content h1,#city-block-1499426729472 .city-block-text-block .city-block-content h2,#city-block-1499426729472 .city-block-text-block .city-block-content h3,#city-block-1499426729472 .city-block-text-block .city-block-content h4,#city-block-1499426729472 .city-block-text-block .city-block-content h5,#city-block-1499426729472 .city-block-text-block .city-block-content h6{}}@media (max-width: 575.98px){#city-block-1499426729472 .city-block-text-block .city-block-content h1,#city-block-1499426729472 .city-block-text-block .city-block-content h2,#city-block-1499426729472 .city-block-text-block .city-block-content h3,#city-block-1499426729472 .city-block-text-block .city-block-content h4,#city-block-1499426729472 .city-block-text-block .city-block-content h5,#city-block-1499426729472 .city-block-text-block .city-block-content h6{}}.static-page-layout .page-content #section-id-1499425868822{padding-top:0px;padding-right:0px;padding-bottom:0px;padding-left:0px;margin-top:0px;margin-right:0px;margin-bottom:0px;margin-left:0px;}#column-wrap-id-1499425868823{max-width:100%;flex-basis:100%;}@media (max-width:1199.98px){#column-wrap-id-1499425868823{max-width:100%;flex-basis:100%;}}@media (max-width:991.98px){#column-wrap-id-1499425868823{max-width:100%;flex-basis:100%;}}@media (max-width:767.98px){#column-wrap-id-1499425868823{max-width:100%;flex-basis:100%;}}@media (max-width:575.98px){#column-wrap-id-1499425868823{max-width:100%;flex-basis:100%;}}#city-block-15015008494825{
}#city-block-15015008494825{
}#city-block-wrapper-15015008494825{
}#city-block-15015008494825 .city-block-title{
}#city-block-15015008494825 .city-block-text-block{
text-align: left;
}#city-block-15015008494825 .city-block-text-block .city-block-content{
}@media (max-width: 1199.98px){#city-block-15015008494825 .city-block-text-block .city-block-content{}}@media (max-width: 991.98px){#city-block-15015008494825 .city-block-text-block .city-block-content{}}@media (max-width: 767.98px){#city-block-15015008494825 .city-block-text-block .city-block-content{}}@media (max-width: 575.98px){#city-block-15015008494825 .city-block-text-block .city-block-content{}}#city-block-15015008494825 .city-block-text-block .city-block-content h1,#city-block-15015008494825 .city-block-text-block .city-block-content h2,#city-block-15015008494825 .city-block-text-block .city-block-content h3,#city-block-15015008494825 .city-block-text-block .city-block-content h4,#city-block-15015008494825 .city-block-text-block .city-block-content h5,#city-block-15015008494825 .city-block-text-block .city-block-content h6{
}@media (max-width: 1199.98px){#city-block-15015008494825 .city-block-text-block .city-block-content h1,#city-block-15015008494825 .city-block-text-block .city-block-content h2,#city-block-15015008494825 .city-block-text-block .city-block-content h3,#city-block-15015008494825 .city-block-text-block .city-block-content h4,#city-block-15015008494825 .city-block-text-block .city-block-content h5,#city-block-15015008494825 .city-block-text-block .city-block-content h6{}}@media (max-width: 991.98px){#city-block-15015008494825 .city-block-text-block .city-block-content h1,#city-block-15015008494825 .city-block-text-block .city-block-content h2,#city-block-15015008494825 .city-block-text-block .city-block-content h3,#city-block-15015008494825 .city-block-text-block .city-block-content h4,#city-block-15015008494825 .city-block-text-block .city-block-content h5,#city-block-15015008494825 .city-block-text-block .city-block-content h6{}}@media (max-width: 767.98px){#city-block-15015008494825 .city-block-text-block .city-block-content h1,#city-block-15015008494825 .city-block-text-block .city-block-content h2,#city-block-15015008494825 .city-block-text-block .city-block-content h3,#city-block-15015008494825 .city-block-text-block .city-block-content h4,#city-block-15015008494825 .city-block-text-block .city-block-content h5,#city-block-15015008494825 .city-block-text-block .city-block-content h6{}}@media (max-width: 575.98px){#city-block-15015008494825 .city-block-text-block .city-block-content h1,#city-block-15015008494825 .city-block-text-block .city-block-content h2,#city-block-15015008494825 .city-block-text-block .city-block-content h3,#city-block-15015008494825 .city-block-text-block .city-block-content h4,#city-block-15015008494825 .city-block-text-block .city-block-content h5,#city-block-15015008494825 .city-block-text-block .city-block-content h6{}}.static-page-layout .page-content #section-id-1499425868822{padding-top:0px;padding-right:0px;padding-bottom:0px;padding-left:0px;margin-top:0px;margin-right:0px;margin-bottom:0px;margin-left:0px;}#column-wrap-id-1499425868823{max-width:100%;flex-basis:100%;}@media (max-width:1199.98px){#column-wrap-id-1499425868823{max-width:100%;flex-basis:100%;}}@media (max-width:991.98px){#column-wrap-id-1499425868823{max-width:100%;flex-basis:100%;}}@media (max-width:767.98px){#column-wrap-id-1499425868823{max-width:100%;flex-basis:100%;}}@media (max-width:575.98px){#column-wrap-id-1499425868823{max-width:100%;flex-basis:100%;}}.static-page-layout .page-content #section-id-1501830825005{padding-top:0px;padding-right:0;padding-bottom:0;padding-left:0;margin-top:0px;margin-right:0px;margin-bottom:0px;margin-left:0px;}#column-id-14996635883266{padding-top:50px;padding-right:15px;padding-bottom:50px;padding-left:15px;px;}#column-wrap-id-14996635883266{max-width:100%;flex-basis:100%;}@media (max-width:1199.98px){#column-wrap-id-14996635883266{max-width:100%;flex-basis:100%;}}@media (max-width:991.98px){#column-wrap-id-14996635883266{max-width:100%;flex-basis:100%;}}@media (max-width:767.98px){#column-wrap-id-14996635883266{max-width:100%;flex-basis:100%;}}@media (max-width:575.98px){#column-wrap-id-14996635883266{max-width:100%;flex-basis:100%;}}/* ── Sanfter Parallax auf Touch-Geräten ───────────────────────────
   Am Desktop gibt der Hover-Effekt eine Rückmeldung auf die Bilder.
   Ohne Mauszeiger fehlt sie, deshalb wandert das Bild dort leicht mit
   der Scrollposition. Die Bildzelle bleibt unverändert groß; nur das
   Bild ist 16 % höher und verschiebt sich innerhalb des Rahmens.
   Die Bewegung setzt teaser-parallax in feature-reveal.js.            */@media (hover: none) and (pointer: coarse){#site-main .co-teaser-grid .co-teaser-cell img,
  #site-main .co-teaser-grid .co-teaser-cell.home-image-is-visible img {
    position: absolute;
    top: 50%;
    left: 0;
    width: 100%;
    height: 116%;
    transform: translate3d(0, -50%, 0);
    transition: none;
  }#site-main .co-teaser-grid .co-teaser-cell img.co-parallax-active {
    will-change: transform;
  }}/* Wer reduzierte Bewegung eingestellt hat, bekommt das ruhige Bild. */@media (hover: none) and (pointer: coarse) and (prefers-reduced-motion: reduce){#site-main .co-teaser-grid .co-teaser-cell img,
  #site-main .co-teaser-grid .co-teaser-cell.home-image-is-visible img {
    position: static;
    height: 100%;
    transform: none;
  }}