/* ================================================================
   BLOCK 12 · Direktbucher-Vorteile — v6.7.59 Desktop-Neukomposition
   ----------------------------------------------------------------
   Zwei ruhige Zeilen (Referenzbild):
     OBEN  = Intro links (Headline · Akzentlinie · Text · Button, ~41%)
             + gruenes Vorteilspanel rechts (~59%)
     UNTEN = Zitat links + Zimmerbild rechts (~50/50, gleiche Hoehe)
   Nur Block-12-Selektoren. Bestehende Tokens + Fraunces/Sans-Typografie.
   Icon-Rahmen: quadratisch (Markenlinie 0px Radius), dezente Gold-Kontur,
   weisses SVG, generischer Clipping-Schutz (object-fit:contain + overflow).
   ================================================================ */

.loewen-redesign .zl-benefits{padding-block:var(--zl-section-y);background:var(--zl-paper-soft);}

/* Gesamtkomposition: zwei Zeilen, kompakter vertikaler Rhythmus (keine grosse Leerflaeche).
   v6.7.60: Abstand obere Zeile → untere Zeile bewusst 40–64px (Desktop ~48px). */
.zl-benefits__inner{display:flex;flex-direction:column;gap:clamp(32px,3.4vw,52px);}

/* ---------------------------------------------------------------
   OBERE ZEILE — Intro (≈41%) + Panel (≈59%)
   --------------------------------------------------------------- */
.zl-benefits__top{
  display:grid;
  grid-template-columns:minmax(0,0.92fr) minmax(0,1.08fr);   /* v6.7.88: ausgewogener ~46% / ~54% (vorher 41/59) */
  gap:clamp(32px,4vw,64px);
  align-items:center;                                         /* v6.7.88: Intro vertikal mittig zum gruenen Kasten */
}

/* Intro kompakt halten. */
.zl-benefits__intro{min-width:0;}
.zl-benefits__title{margin:0 0 clamp(16px,1.6vw,22px);}
/* orange/goldene horizontale Akzentlinie unter der Headline */
.zl-benefits__rule{display:block;width:56px;height:2px;background:var(--zl-ember-line);margin:0 0 clamp(20px,2vw,26px);}
.zl-benefits__lead{margin:0 0 clamp(22px,2.4vw,30px);max-width:46ch;}
.zl-benefits__cta{align-self:start;}

/* ---------------------------------------------------------------
   GRUENES VORTEILSPANEL (rechts) — bestimmt seine Hoehe durch Inhalt
   --------------------------------------------------------------- */
.zl-benefits__panel{
  position:relative;box-sizing:border-box;width:100%;margin:0;
  margin-right:clamp(0px,1.4vw,24px);                         /* v6.7.88: Kasten dezent vom rechten Rand einruecken */
  padding:clamp(26px,2.6vw,38px) clamp(24px,2.6vw,38px);
  background:linear-gradient(157deg,#22301f 0%,var(--zl-forest-700,#2C3F31) 58%,#26392c 100%);
  color:var(--zl-on-dark);
  box-shadow:0 22px 44px -26px rgba(16,24,18,.55);
}
.zl-benefits__panel::before{content:"";position:absolute;left:0;right:0;top:0;height:2px;background:var(--zl-ember-line);pointer-events:none;}
/* Eyebrow im Panel — jetzt mehr Luft bis Benefit 1 (24–32px). */
/* v6.7.62: deutlich mehr Luft Eyebrow → Benefit 1 (Panel-Padding oben bleibt, nur dieser Abstand waechst). */
.zl-benefits__panel-head{font-family:var(--zl-font-body);font-size:12px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--zl-ember-3);margin:0 0 clamp(42px,3.4vw,56px);}   /* v6.7.99: ausgewogener Abstand Ueberschrift -> Benefit 1 (Inline in front-blocks-static.php gleichwertig) */

/* Benefit-Zeilen — grosszuegige, gleichmaessige Luft; feine Trennlinien NICHT durch den Icon-Rahmen. */
.zl-benefits__rows{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;}
.zl-benefits__row{display:flex;align-items:center;gap:clamp(20px,1.9vw,26px);min-width:0;padding:clamp(18px,1.9vw,24px) 0;border-top:1px solid rgba(239,233,220,.14);}   /* v6.7.61: Panel etwas kompakter */
.zl-benefits__row:first-child{border-top:0;padding-top:0;}
.zl-benefits__row:last-child{padding-bottom:0;}

/* Icon-Rahmen: quadratisch, feste identische Groesse, Icon exakt mittig. */
.zl-benefits__row-icon{
  flex:0 0 80px;width:80px;height:80px;box-sizing:border-box;
  display:flex;align-items:center;justify-content:center;
  border:1px solid var(--zl-ember-3);       /* duenne gold/orange Kontur, 0px Radius (Marke) */
  color:#fff;overflow:visible;              /* Rahmen darf das Icon NIE beschneiden */
}
/* Icon fuellt ~68% des Rahmens (innerer Sicherheitsabstand) · object-fit:contain haelt jedes
   Seitenverhaeltnis komplett sichtbar · overflow:visible verhindert Kanten-Clipping. Generisch fuer ALLE Icons. */
.zl-benefits__row-icon svg,.zl-benefits__row-icon img{
  width:68%;height:68%;max-width:68%;max-height:68%;
  object-fit:contain;object-position:center;overflow:visible;display:block;
}
.zl-benefits__row-icon svg{fill:none;stroke:currentColor;stroke-width:1.5;}
/* Weiss erzwingen – auch bei INLINE-Icons mit fest kodierter dunkler Farbe (Linien-Icons bleiben Linien). */
.zl-benefits__row-icon svg [fill]:not([fill="none"]){fill:currentColor;}
.zl-benefits__row-icon svg [stroke]:not([stroke="none"]){stroke:currentColor;}

/* Text rechts, vertikal mittig zur gesamten Textgruppe (row: align-items:center). */
.zl-benefits__row-body{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:5px;}
.zl-benefits__row-title{font-family:var(--zl-font-head);font-weight:500;font-size:clamp(18px,1.45vw,21px);line-height:1.2;color:var(--zl-on-dark);}
.zl-benefits__row-text{font-size:14px;line-height:1.55;color:var(--zl-on-dark-muted);overflow-wrap:anywhere;}

/* ---------------------------------------------------------------
   UNTERE ZEILE — v6.7.62: Bild LINKS (gross, ~62%) + Slogan RECHTS (kompakt, ~38%) als EINE Komposition.
   Diagonale Blickfuehrung: Headline oben-links · Panel oben-rechts · Bild unten-links · Slogan unten-rechts.
   Bild ragt kontrolliert nach RECHTS in den Sloganbereich (subtiler Ueberstand) → bricht die 2×2-Rasteroptik.
   Slogan OHNE Kasten/Hintergrund, leicht oberhalb der geometrischen Mitte.
   --------------------------------------------------------------- */
.zl-benefits__bottom{position:relative;display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,0.75fr);gap:0;align-items:center;}
/* Fallback: ohne Slogan fuellt das Bild die ganze Zeile (progressive enhancement). */
.zl-benefits__bottom:has(.zl-benefits__photo:only-child) .zl-benefits__photo{grid-column:1/-1;width:100%;box-shadow:none;}

.zl-benefits__closing{
  display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;
  gap:14px;
  /* leicht oberhalb der geometrischen Mitte (margin-bottom schiebt den zentrierten Block nach oben). */
  margin:0 0 clamp(24px,3.5vw,48px);
  /* KEINE Box/Border/Hintergrund – Slogan liegt direkt auf dem hellen Block-Grund.
     LINKER Innenabstand > Bild-Ueberstand → Text liegt NIE unter dem Bild; Slogan bleibt kompakt. */
  padding:clamp(20px,2.4vw,34px) clamp(20px,2.4vw,36px) clamp(20px,2.4vw,34px) clamp(80px,7vw,104px);
}
/* kleines Herz/Symbol oben, flankiert von zwei feinen orangen Linien */
.zl-benefits__closing-icon{display:inline-flex;align-items:center;justify-content:center;gap:14px;margin:0 auto;color:var(--zl-ember-1);}
.zl-benefits__closing-icon::before,.zl-benefits__closing-icon::after{content:"";flex:none;width:36px;height:1px;background:var(--zl-ember-line);opacity:.7;}
.zl-benefits__closing-icon svg,.zl-benefits__closing-icon img{flex:none;width:32px;height:32px;object-fit:contain;display:block;}
.zl-benefits__closing-text{font-family:var(--zl-font-head);font-size:clamp(18px,1.6vw,23px);line-height:1.45;color:var(--zl-ink);max-width:34ch;margin:0;}
.zl-benefits__sign{margin-top:6px;display:flex;align-items:center;justify-content:center;gap:8px;}
.zl-benefits__sign span{font-family:var(--zl-font-head);font-style:italic;font-size:20px;color:var(--zl-forest-700);}
.zl-benefits__sign b{color:var(--zl-ember-1);font-weight:400;}

/* Bild LINKS: linke Kante buendig am Container, ragt per width:calc(100%+X) kontrolliert nach RECHTS
   in den Sloganbereich (X = --b12-overlap). Weiche rechte Kante per Schatten statt harter Trennlinie –
   rechteckig (0px-Radius Markenlinie), ruhig, hoteltypisch. Kein negatives Margin → kein Overflow links. */
.zl-benefits__photo{
  position:relative;z-index:2;margin:0;overflow:hidden;min-height:clamp(300px,32vw,430px);
  --b12-overlap:clamp(40px,4vw,70px);
  width:calc(100% + var(--b12-overlap));
  box-shadow:22px 0 44px -26px rgba(16,24,18,.5);
}
/* Tablet-Landscape (981–1080px): Ueberstand deutlich reduzieren (20–40px). */
@media (min-width:981px) and (max-width:1080px){
  .zl-benefits__photo{--b12-overlap:clamp(20px,3vw,40px);}
}
.zl-benefits__photo img{width:100%;height:100%;min-height:inherit;object-fit:cover;object-position:center;display:block;}

/* ---------------------------------------------------------------
   TABLET / STACK (≤980px) — alles gestapelt.
   Reihenfolge: Intro/Text/Button → Panel → Bild → Zitat.
   --------------------------------------------------------------- */
@media (max-width:980px){
  .zl-benefits__top{grid-template-columns:1fr;gap:30px;}
  .zl-benefits__panel{margin-right:0;}   /* v6.7.88: im Stapel-Layout volle Breite (kein rechtes Einruecken) */
  .zl-benefits__intro{max-width:680px;}
  .zl-benefits__lead{max-width:none;}
  /* Stapel-Layout: Ueberstand KOMPLETT aus – Bild volle Breite, kein Schatten. DOM-Reihenfolge Bild → Slogan. */
  .zl-benefits__bottom{grid-template-columns:1fr;gap:22px;align-items:stretch;}
  .zl-benefits__photo{min-height:clamp(220px,44vw,360px);width:100%;box-shadow:none;z-index:auto;}
  .zl-benefits__closing{margin:0;padding:clamp(24px,3.2vw,40px) clamp(24px,3vw,44px);}   /* Overlap-Innenabstand + Nudge zuruecksetzen */
  .zl-benefits__row-icon{flex:0 0 72px;width:72px;height:72px;}
}

/* ---------------------------------------------------------------
   MOBILE (≤600px) — Icon bleibt LINKS neben dem Text, nur kompakter.
   --------------------------------------------------------------- */
@media (max-width:600px){
  .zl-benefits__panel{padding:clamp(22px,5vw,28px) clamp(18px,5vw,24px);}
  .zl-benefits__panel-head{margin-bottom:clamp(26px,5vw,34px);}   /* Eyebrow→Benefit1 mobil proportional kleiner, aber deutlich */
  .zl-benefits__row-icon{flex:0 0 62px;width:62px;height:62px;}
  .zl-benefits__row{gap:16px;}
  .zl-benefits__closing{padding:clamp(24px,6vw,32px) var(--mobile-content-padding);}
  .zl-benefits__photo{min-height:220px;}
  .zl-benefits__closing-text{max-width:none;}
}
@media (max-width:360px){
  .zl-benefits__row-icon{flex:0 0 54px;width:54px;height:54px;}
  .zl-benefits__row{gap:13px;}
}

@media (prefers-reduced-motion: reduce){
  .zl-benefits [data-zl-reveal]{transition:none !important;}
}