/* OCM Office Center Mühlweg — gleicher Baukasten, eigene Farben.
   Grundlage sind die "ColorFields" von Günter Trautner: das Orange der
   Design-Tiefgarage auf einem kühlen Schiefer-Blau. */
:root {
  --ink:#1D2A33;
  --accent:#D25E2A;
  --paper:#E7EAEA;
  --paper2:#F6F7F7;
  --highlight:#F7F1E6;
  --on-dark:#DCE2E5;
  --hairline:rgba(29,42,51,0.24);
  --scrim:29,42,51;
  --field-green:#7C9A3E;
}

/* Wortmarke als Platzhalter, bis Jan das OCM-Logo entwickelt hat */
.wordmark { display:flex; align-items:center; gap:14px; color:var(--on-dark); }
.wordmark b { font-family:var(--font); font-weight:500; font-size:34px; letter-spacing:0.02em; line-height:1; color:var(--highlight); }
.wordmark b i { font-style:normal; color:var(--accent); }
.wordmark span { font-family:var(--mono); font-size:9px; letter-spacing:0.22em; text-transform:uppercase; line-height:1.5; border-left:1px solid rgba(255,255,255,0.3); padding-left:14px; }
.wordmark:hover { color:var(--on-dark); }

/* Farbfelder statt Fotos bei den Flaechenarten */
.field { padding:34px 30px 36px; min-height:300px; display:flex; flex-direction:column; justify-content:space-between; gap:40px; color:var(--on-dark); }
.field h3 { color:var(--highlight); }
.field .body { opacity:0.9; }
.field.orange { background:var(--accent); }
.field.slate { background:var(--ink); }
.field.green { background:var(--field-green); }
.field.light { background:var(--paper2); color:var(--ink); }
.field.light h3 { color:var(--ink); }
.field .n { font-family:var(--mono); font-size:11px; letter-spacing:0.22em; opacity:0.7; }

.plans figure { background:#fff; padding:16px; }
.plans img { aspect-ratio:4/3; object-fit:contain; }
.plans figcaption { font-family:var(--mono); font-size:10px; letter-spacing:0.14em; text-transform:uppercase; margin-top:10px; }
.garage .strip figcaption { color:var(--on-dark); }

.place { display:flex; gap:20px; align-items:flex-start; border-top:1px solid var(--hairline); padding-top:22px; }
.place img { width:96px; height:96px; object-fit:cover; flex:0 0 96px; }
.place h3 { margin-bottom:8px; }
.place p.body { font-size:15px; line-height:1.6; }

.table td:first-child { width:46%; }

@media (max-width:1150px) {
  .wordmark b { font-size:28px; }
  .wordmark span { display:none; }
  .field { min-height:220px; }
}