
.loewen-redesign .zl-about{padding-block:var(--zl-section-y);background:var(--zl-paper);}
.zl-about__inner{display:grid;grid-template-columns:1fr 1.04fr;gap:clamp(36px,5vw,90px);align-items:center;}
.zl-about__title{margin-bottom:24px;}
.zl-about__copy{margin-bottom:34px;}
.zl-about__copy p{margin-bottom:1em;}
.zl-about__copy p:last-child{margin-bottom:0;}

.zl-about__media{position:relative;margin:0;}
.zl-about__media::before{
  content:"";position:absolute;left:-14px;top:-14px;width:46%;height:46%;
  border-left:2px solid var(--zl-forest-600);border-top:2px solid var(--zl-forest-600);pointer-events:none;
}
.zl-about__media img{width:100%;aspect-ratio:4/5;object-fit:cover;}
.zl-about__tag{
  position:absolute;left:0;bottom:26px;transform:translateX(-22px);
  display:inline-flex;align-items:center;gap:10px;
  background:var(--zl-forest-700);color:var(--zl-on-dark);
  padding:13px 22px;font-size:12.5px;font-weight:600;letter-spacing:.08em;
  box-shadow:var(--zl-shadow-md);
}
.zl-about__tag span{color:var(--zl-ember-3);}

@media (max-width:860px){
  .zl-about__inner{grid-template-columns:1fr;gap:36px;}
  .zl-about__media{order:-1;}
  .zl-about__media img{aspect-ratio:16/11;}
  .zl-about__media::before{left:-6px;top:-6px;width:40%;height:40%;}
  .zl-about__tag{transform:none;left:18px;}
}

@media (max-width:600px){
  .loewen-redesign .zl-about__title{font-size:clamp(25px,6.6vw,32px);line-height:1.12;margin-bottom:16px;overflow-wrap:break-word;}
  .zl-about__inner{gap:26px;}

  /* v6.7.32 · Block-2-Badge auf Mobil aus dem Bild loesen: statt absolut ueber dem Foto
     jetzt im normalen Fluss DIREKT UNTER dem Bild (Bild bleibt voll sichtbar). Reihenfolge
     dadurch: Bild -> Badge -> Eyebrow -> H2 -> Text. Nur <=600px; Desktop/Tablet unveraendert.
     Spezifitaet bewusst mit .loewen-redesign erhoeht (0,2,0), damit die Fluss-Position die
     absolute Desktop-Regel (0,1,0) sicher ueberschreibt – auch bei aggressivem CSS-Merge. */
  .loewen-redesign .zl-about__tag{
    position:static !important;transform:none !important;
    left:auto;right:auto;top:auto;bottom:auto;
    display:flex;width:-moz-fit-content;width:fit-content;max-width:100%;box-sizing:border-box;
    margin:8px 0;                 /* Bild->Badge ~8px; Badge->Eyebrow ~8px + Grid-Gap 26px = ~34px */
    padding:11px 18px;gap:8px;font-size:12px;
  }
  /* Dekorative Eck-Linie am Foto von der neuen Badge-Hoehe entkoppeln:
     feste Hoehe entspricht der bisherigen Mobil-Optik (~40% der Bildhoehe bei ~400px). */
  .loewen-redesign .zl-about__media::before{height:96px;}
}
