/*
 * Über uns page (page-ueber-uns.php) — dark-editorial.
 * Reuses fsr-* tokens. Mobile-first; stacks ≤860px. Base specificity, no !important.
 */

.ab-rule { display:block; width:64px; height:2px; background:var(--fsr-gold); margin:22px 0 0; }
.ab-rule--center { margin:18px auto 0; }
.ab-ico { width:100%; height:100%; }

/* ---------- Ivory split hero (only light hero) ---------- */
.ab-hero { display:grid; grid-template-columns:1fr 1fr; background:var(--fsr-ivory); min-height:clamp(460px,60vh,640px); align-items:stretch; }
/* Vertical rhythm only — horizontal (left rail + inner gutter) owned by salon.css round-4. */
.ab-hero__text { display:flex; flex-direction:column; justify-content:center; padding-block:clamp(48px,5vw,88px); }
.ab-hero__text .fsr-h1 { color:var(--fsr-black); margin:0; }
.ab-hero__lead { max-width:34em; margin:26px 0 0; color:#5a5148; }
.ab-hero__sig { font-size:clamp(46px,5vw,66px); margin:24px 0 0; }
.ab-hero__role { font-family:var(--fsr-sans); font-size:12px; letter-spacing:.16em; text-transform:uppercase; color:#7a6f60; margin-top:6px; }
.ab-hero__media { position:relative; overflow:hidden; min-height:320px; }
.ab-hero__media img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }

/* ---------- "Schönes Haar beginnt mit Zuhören." dark split ---------- */
.ab-listen { display:grid; grid-template-columns:1fr 1fr; background:var(--fsr-black); align-items:stretch; }
.ab-listen__text { display:flex; flex-direction:column; justify-content:center; padding-block:clamp(48px,5vw,88px); }
.ab-listen__text .fsr-h2 { color:#fff; max-width:12em; }
.ab-listen__text p { color:rgba(243,237,227,.78); line-height:1.75; margin:22px 0 0; max-width:34em; }
.ab-listen__text .fsr-link { margin-top:28px; align-self:flex-start; }
.ab-listen__media { position:relative; overflow:hidden; min-height:340px; }
.ab-listen__media img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }

/* ---------- Unsere Philosophie (ivory, 3 gold-icon columns) ---------- */
.ab-phil { display:grid; grid-template-columns:repeat(3,1fr); gap:0; margin-top:52px; }
.ab-phil__col { text-align:center; padding:0 clamp(20px,3vw,40px); }
.ab-phil__col + .ab-phil__col { border-left:1px solid rgba(198,161,91,.3); }
.ab-phil__ic { display:inline-flex; width:46px; height:46px; color:var(--fsr-gold-ink); margin-bottom:22px; }
.ab-phil__head { font-family:var(--fsr-serif); font-size:24px; color:var(--fsr-black); margin:0 0 14px; }
.ab-phil__col p { color:#5a5148; font-size:14.5px; line-height:1.7; margin:0; max-width:26em; margin-inline:auto; }

/* ---------- Full-width interior band ---------- */
.ab-band { position:relative; height:clamp(300px,42vw,480px); overflow:hidden; background:var(--fsr-black); }
.ab-band__img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.ab-band__mark { position:absolute; right:clamp(24px,5vw,72px); bottom:clamp(24px,4vw,52px); display:flex; flex-direction:column; align-items:flex-end; text-shadow:0 2px 18px rgba(0,0,0,.55); }
.ab-band__word { font-family:var(--fsr-serif); font-weight:600; font-size:clamp(24px,3vw,34px); letter-spacing:.14em; text-transform:uppercase; color:#fff; }
.ab-band__script { font-family:var(--fsr-script); font-size:clamp(22px,2.6vw,30px); color:var(--fsr-gold); margin-top:2px; }

/* ---------- Unser Handwerk – Schritt für Schritt (dark, 5 steps) ---------- */
.ab-steps { display:grid; grid-template-columns:repeat(5,1fr); gap:20px; margin:52px 0 0; padding:0; list-style:none; }
.ab-step { position:relative; text-align:center; padding:0 6px; }
.ab-step__ic { display:inline-flex; width:42px; height:42px; color:var(--fsr-gold); margin-bottom:16px; }
.ab-step__num { display:block; font-family:var(--fsr-serif); font-size:26px; color:var(--fsr-gold); margin-bottom:8px; }
.ab-step__head { font-family:var(--fsr-serif); font-size:19px; color:#fff; margin:0 0 8px; }
.ab-step p { color:rgba(243,237,227,.65); font-size:13.5px; line-height:1.6; margin:0; }
.ab-step__arrow { position:absolute; top:14px; right:-16px; color:var(--fsr-gold); font-size:18px; }

/* ---------- Produkte, denen wir vertrauen (ivory partner row) ---------- */
.ab-partners { display:flex; flex-wrap:wrap; justify-content:center; align-items:center; gap:0; margin-top:48px; }
.ab-partner { padding:0 clamp(24px,4vw,54px); }
.ab-partner + .ab-partner { border-left:1px solid rgba(198,161,91,.35); }
.ab-partner a, .ab-partner span { font-family:var(--fsr-serif); font-weight:500; font-size:clamp(20px,2.4vw,28px); letter-spacing:.03em; color:var(--fsr-black); text-decoration:none; }
.ab-partner a:hover { color:var(--fsr-gold-ink); }

/* ---------- Location band (address + wayfinding panel) ----------
   The media side carries no photograph: no verified photo of the salon's exterior
   exists, so a storefront image here would assert a building. Typographic wayfinding
   instead — real transit/parking marks over a decorative ornament. */
.ab-loc { display:grid; grid-template-columns:1fr 1.15fr; background:var(--fsr-black); align-items:stretch; }
.ab-loc__text { display:flex; flex-direction:column; justify-content:center; padding-block:clamp(44px,5vw,80px); }
.ab-loc__pin { color:var(--fsr-gold); font-size:26px; margin-bottom:14px; }
.ab-loc__text .fsr-h2 { color:#fff; margin:0 0 26px; }
.ab-loc__text .fsr-btn { align-self:flex-start; }
.ab-loc__media { position:relative; overflow:hidden; min-height:320px; display:flex; }
.ab-loc__wayfind { position:relative; flex:1 1 auto; min-width:0; display:flex; flex-direction:column;
	justify-content:center; gap:22px; padding:clamp(28px,4vw,56px); background:var(--fsr-black-2);
	border-left:1px solid rgba(198,161,91,.22); }
.ab-loc__deco { position:absolute; inset:0; color:var(--fsr-gold); opacity:.22; pointer-events:none; }
.ab-loc__deco svg { width:100%; height:100%; display:block; }
.ab-loc__marks { position:relative; list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:16px; }
.ab-loc__mark { display:flex; align-items:center; gap:14px; color:#f3ede3; }
.ab-loc__badge { width:36px; height:36px; flex:0 0 auto; border:1px solid var(--fsr-gold); border-radius:4px;
	display:flex; align-items:center; justify-content:center; color:var(--fsr-gold);
	font-family:var(--fsr-sans); font-weight:600; font-size:13px; letter-spacing:.02em; }
.ab-loc__mark > span:last-child { font-family:var(--fsr-sans); font-size:15px; line-height:1.35; }
.ab-loc__route { position:relative; align-self:flex-start; color:var(--fsr-gold); font-family:var(--fsr-sans);
	font-size:14px; letter-spacing:.02em; text-decoration:none; padding-bottom:3px;
	border-bottom:1px solid rgba(198,161,91,.45); }
.ab-loc__route:hover, .ab-loc__route:focus-visible { color:#e2c489; border-bottom-color:#e2c489; }

/* ================= RESPONSIVE ================= */
@media (max-width:1024px){
	.ab-steps { grid-template-columns:repeat(2,1fr); gap:36px 20px; }
	.ab-step__arrow { display:none; }
}
@media (max-width:860px){
	.ab-hero, .ab-listen, .ab-loc { grid-template-columns:1fr; }
	.ab-hero__media { min-height:280px; order:-1; }
	.ab-listen__media, .ab-loc__media { min-height:260px; }
	.ab-loc__wayfind { border-left:0; border-top:1px solid rgba(198,161,91,.22); }
	.ab-phil { grid-template-columns:1fr; gap:44px; }
	.ab-phil__col + .ab-phil__col { border-left:0; border-top:1px solid rgba(198,161,91,.3); padding-top:44px; }
	.ab-partners { flex-direction:column; }
	.ab-partner { padding:16px 0; }
	.ab-partner + .ab-partner { border-left:0; border-top:1px solid rgba(198,161,91,.3); }
}
@media (max-width:560px){
	.ab-steps { grid-template-columns:1fr; gap:32px; }
}

/* Partner logos (real, from live) — warm-neutral treatment */
.ab-partner__logo { max-height:56px; width:auto; filter:brightness(0) saturate(0) opacity(.72); transition:opacity .25s ease; }
.ab-partner:hover .ab-partner__logo { opacity:1; filter:brightness(0) saturate(0); }

/* ---------- Unser Salon gallery (editorial masonry — real salon photos) ---------- */
.ab-gallery__grid { display:grid; grid-template-columns:repeat(6,1fr); grid-auto-rows:150px; gap:14px; margin-top:44px; }
.ab-gallery__item { overflow:hidden; margin:0; }
.ab-gallery__img { width:100%; height:100%; object-fit:cover; display:block; transition:transform .6s ease; }
.ab-gallery__item:hover .ab-gallery__img { transform:scale(1.05); }
/* editorial rhythm: feature the first two (real salon shots) larger */
.ab-gallery__item--0 { grid-column:span 3; grid-row:span 2; }
.ab-gallery__item--1 { grid-column:span 3; grid-row:span 2; }
.ab-gallery__item--2 { grid-column:span 2; grid-row:span 2; }
.ab-gallery__item--3 { grid-column:span 2; grid-row:span 1; }
.ab-gallery__item--4 { grid-column:span 2; grid-row:span 1; }
.ab-gallery__item--5 { grid-column:span 2; grid-row:span 2; }
@media (max-width:860px){
  .ab-gallery__grid { grid-template-columns:repeat(4,1fr); grid-auto-rows:130px; }
  .ab-gallery__item--0,.ab-gallery__item--1 { grid-column:span 2; grid-row:span 2; }
  .ab-gallery__item--2,.ab-gallery__item--3,.ab-gallery__item--4,.ab-gallery__item--5 { grid-column:span 2; grid-row:span 1; }
}
@media (max-width:480px){
  .ab-gallery__grid { grid-template-columns:repeat(2,1fr); grid-auto-rows:120px; gap:10px; }
  .ab-gallery__item { grid-column:span 1 !important; grid-row:span 1 !important; }
  .ab-gallery__item--0,.ab-gallery__item--1 { grid-column:span 2 !important; grid-row:span 2 !important; }
}

/* ---- Three-image band ----------------------------------------------------
   When the editor supplies exactly three photos the six-slot mosaic above
   leaves a ragged half-empty final row, so the band switches to a staggered
   editorial rhythm sized for three. Tile heights are tuned to the natural
   orientations (tall / wide / square) rather than forcing one crop shape, and
   the row is deliberately unlevel — that is the composition, not a gap. */
.ab-gallery__grid--3 {
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: auto;
  align-items: stretch;
  gap: clamp(14px, 1.6vw, 22px);
}
/* One level baseline, three equal tiles: with three photographs of people the
   staggered treatment read as scattered rather than composed. The rhythm comes
   from the centre tile being a touch taller, not from a ragged edge. */
.ab-gallery__grid--3 .ab-gallery__item { grid-column:auto; grid-row:auto; height: clamp(300px, 30vw, 440px); }
.ab-gallery__grid--3 .ab-gallery__item--1 { height: clamp(330px, 33vw, 484px); margin-top: clamp(-22px, -2.2vw, -14px); }

@media (max-width:860px){
  /* Two columns: the first photo takes the full row so it is never squeezed
     into a third of the width, the other two share the row below. */
  .ab-gallery__grid--3 { grid-template-columns: 1fr 1fr; }
  .ab-gallery__grid--3 .ab-gallery__item { height: clamp(200px, 30vw, 300px); margin-top:0; }
  .ab-gallery__grid--3 .ab-gallery__item--0 { grid-column: span 2; height: clamp(280px, 46vw, 420px); }
}
@media (max-width:480px){
  /* Single column: each photo keeps a shape close to its original ratio. */
  .ab-gallery__grid--3 { grid-template-columns: 1fr; grid-auto-rows:auto; }
  .ab-gallery__grid--3 .ab-gallery__item { grid-column:1 !important; grid-row:auto !important; min-height:0; height:auto; }
  .ab-gallery__grid--3 .ab-gallery__item--0 { aspect-ratio: 4 / 5; }
  .ab-gallery__grid--3 .ab-gallery__item--1 { aspect-ratio: 16 / 10; }
  .ab-gallery__grid--3 .ab-gallery__item--2 { aspect-ratio: 1 / 1; }
}

/* Five-image band: two wide tiles on top, three equal tall tiles below — no
   ragged cells (the 6-item span pattern leaves holes at 5/6 items). */
.ab-gallery__grid--5 .ab-gallery__item--0,
.ab-gallery__grid--5 .ab-gallery__item--1 { grid-column:span 3; grid-row:span 2; }
.ab-gallery__grid--5 .ab-gallery__item--2,
.ab-gallery__grid--5 .ab-gallery__item--3,
.ab-gallery__grid--5 .ab-gallery__item--4 { grid-column:span 2; grid-row:span 2; }
@media (max-width:860px){
  .ab-gallery__grid--5 .ab-gallery__item--0,
  .ab-gallery__grid--5 .ab-gallery__item--1 { grid-column:span 2; }
  .ab-gallery__grid--5 .ab-gallery__item--2,
  .ab-gallery__grid--5 .ab-gallery__item--3 { grid-column:span 1; grid-row:span 1; }
  .ab-gallery__grid--5 .ab-gallery__item--4 { grid-column:span 2; grid-row:span 1; }
}