/* Mix Immobilien Gruppe — gleicher Baukasten wie Eiswerder, eigene Farben:
   Schwarz/Weiss aus dem Logo, dazu ein warmes Steingrau. Bewusst unaufgeregt. */
:root {
  --ink:#14130F;
  --accent:#7D7468;
  --paper:#ECE9E4;
  --paper2:#F7F6F3;
  --highlight:#FFFFFF;
  --on-dark:#ECE9E4;
  --hairline:rgba(20,19,15,0.22);
  --scrim:20,19,15;
}
.site-header .logo img { height:58px; }

/* Bildband: Fassaden nebeneinander, das Bild unter der Maus wird groesser.
   Eiswerder nimmt im Ruhezustand gut ein Drittel der Breite ein. */
.band { display:flex; height:100vh; min-height:560px; background:var(--ink); gap:2px; }
.band .panel { position:relative; flex:1 1 0; min-width:0; overflow:hidden; color:var(--on-dark);
  transition:flex-grow .7s var(--ease); }
.band .panel.lead-panel { flex-grow:2.3; }
.band:hover .panel { flex-grow:1; }
.band .panel:hover, .band .panel:focus-visible { flex-grow:3.2; }
.band .panel img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:transform 1.2s var(--ease), filter .6s ease; filter:saturate(0.9); }
.band .panel:hover img { transform:scale(1.03); filter:none; }
.band .panel::after { content:''; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(var(--scrim),0.55) 0%, rgba(var(--scrim),0) 28%, rgba(var(--scrim),0) 55%, rgba(var(--scrim),0.85) 100%); }
.band .label { position:absolute; left:24px; right:24px; bottom:30px; z-index:2; overflow:hidden; }
.band .label h2 { font-size:clamp(16px,1.35vw,20px); letter-spacing:0.16em; font-weight:400; color:var(--highlight); margin-top:10px; }
.band .label .more { display:block; margin-top:14px; opacity:0; transform:translateY(8px); transition:opacity .4s ease .15s, transform .4s ease .15s; }
.band .panel:hover .more, .band .panel:focus-visible .more { opacity:0.85; transform:none; }
.band .panel.lead-panel .more { opacity:0.85; transform:none; }
.band:hover .panel.lead-panel:not(:hover) .more { opacity:0; }

/* Referenzen */
.refs { display:grid; grid-template-columns:repeat(4,1fr); gap:20px; }
.ref { display:flex; flex-direction:column; background:var(--paper2); color:var(--ink); transition:transform .5s var(--ease), opacity .9s var(--ease); }
a.ref:hover { transform:translateY(-6px); color:var(--ink); }
.ref .ph { aspect-ratio:4/3; overflow:hidden; background:#fff; }
.ref .ph img { width:100%; height:100%; object-fit:cover; display:block; }
.ref .ph.plan img { object-fit:contain; padding:14px; }
.ref .ref-in { padding:24px 22px 26px; display:flex; flex-direction:column; gap:10px; flex:1; }
.ref .tags { font-family:var(--mono); font-size:10px; letter-spacing:0.14em; text-transform:uppercase; opacity:0.6; line-height:1.6; }
.ref p.body { font-size:15px; line-height:1.6; }
.ref .out { margin-top:auto; padding-top:8px; color:var(--accent); }
.ref.wide { grid-column:span 2; }
.ref.wide .ph { aspect-ratio:16/9; }

.pillar { border-top:1px solid var(--hairline); padding-top:24px; }
.pillar h3 { margin-bottom:12px; }

.company { border-top:1px solid rgba(255,255,255,0.18); padding-top:22px; }
.company + .company { margin-top:30px; }
.company h3 { color:var(--highlight); margin-bottom:10px; }

@media (max-width:1150px) {
  .site-header .logo img { height:46px; }
  .refs { grid-template-columns:1fr 1fr; }
  .band { height:auto; min-height:0; display:grid; grid-template-columns:1fr 1fr; gap:2px; }
  .band .panel { height:34svh; min-height:220px; }
  .band .panel.lead-panel { grid-column:span 2; height:58svh; }
  .band .label { white-space:normal; left:18px; right:18px; bottom:20px; }
  .band .label .more { opacity:0.85; transform:none; }
}
@media (max-width:640px) {
  .refs { grid-template-columns:1fr; }
  .ref.wide { grid-column:auto; }
  .ref.wide .ph { aspect-ratio:4/3; }
  .band .panel { height:30svh; }
}