*{
  margin:0;
  padding:0;
  box-sizing:border-box;
  font-family:Arial, Helvetica, sans-serif;
}

header {
  padding:0 40px;
  /* clamp statt reinem vh: auf flachen Viewports (Handy quer) waeren 20vh
     unter 80px und wuerden die Logos zerquetschen.

     Die Hoehe steht als Variable, weil die Logos ihre Groesse daran messen:
     ihre Links sind nur so gross wie das Bild und haben damit selbst keine
     Hoehe mehr, gegen die sich Prozente rechnen liessen. */
  --kopf-hoehe:clamp(110px, 20vh, 190px);
  height:var(--kopf-hoehe);
  background:#101c3c;
  box-sizing:border-box;

  position: relative;
  display: flex;
  align-items:center;
  gap:16px;
}

/* Der Link umschliesst nur sein Logo - anklickbar ist damit genau das Bild
   und nicht der freie Platz daneben. */
.logo {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  z-index: 1;
}
.logo img {
  max-height: calc(var(--kopf-hoehe) * 0.49);
  max-width: 100%;
  height: auto;
  width: auto;
  display: block;
}

/* Die beiden Seitenfelder teilen sich den Restplatz zu gleichen Teilen, dadurch
   sitzt Reftreff optisch mittig - ohne absolute Positionierung, bei der sich
   die Logos auf schmalen Fenstern ueberlappt haben. Den Platz haelt das Feld,
   nicht der Link darin. */
.logo-platz {
    display:flex;
    align-items:center;
    flex:1 1 0;
    min-width:0;
}
.vst { justify-content:flex-start; }
.hfu { justify-content:flex-end; }

.reftreff {
  flex:0 1 auto;
  min-width:0;
}

/* Reftreff steht in der Mitte und darf groesser sein als die beiden anderen. */
.reftreff img {
  max-height: calc(var(--kopf-hoehe) * 0.7);
}

body{
  margin:0;
  min-height:100dvh;
  display:flex;
  flex-direction:column;
}

/* main fuellt den Rest unter dem Header, statt fix 80vh anzunehmen */
main{
  flex:1;
  display:flex;
  flex-direction:column;
}

.locations{
  flex:1;
  display:grid;
  /* Feste Stufen 4 -> 2 statt auto-fit mit minmax(200px,1fr): auto-fit legt
     zwischen ~600px und ~800px Breite drei Spalten an und laesst damit eine
     angebrochene Reihe mit zwei leeren Zellen stehen (3/1). */
  grid-template-columns:repeat(4,1fr);
  grid-auto-rows:minmax(150px,1fr);
  gap:1px;
  border-top: 1px solid white;
  background:white;
}

.location{
  display:flex;
  flex-direction:column;
  overflow:hidden;
  text-decoration:none;
}

.location h2{
  margin:0;
  padding:15px;
  background:black;
  color:white;
  text-align:center;
}

/* corrals.jpg ist hochkant (630x1280) und bringt als ersetztes Element seine
   Eigenhoehe als Mindestgroesse mit. Bei zwei Reihen wuerde Reihe 1 damit die
   1fr-Verteilung auffressen und Reihe 2 nur den Rest lassen. height:0 koppelt
   die Eigenhoehe ab, die Hoehe kommt allein aus dem Flex-Grow. */
.location img{
  flex:1 1 0;
  height:0;
  min-height:0;
  width:100%;
  object-fit:cover;
}

/* nur auf Geraeten mit echtem Zeiger, sonst bleibt der Hover-Zustand
   auf Touch nach dem Antippen haengen */
@media (hover:hover){
  .location:hover img{
    filter:brightness(.8);
  }

  .location:hover h2{
    background:#111;
  }
}

.location:active img{
  filter:brightness(.8);
}

.location:active h2{
  background:#111;
}


/* ==========================
   Tablet / schmales Fenster
   ========================== */
/* Unter ~800px passen keine vier 200px-Spalten mehr - direkt auf 2x2,
   damit nie eine angebrochene Reihe entsteht. */
@media (max-width: 820px){
.locations{
  grid-template-columns:repeat(2,1fr);
}

/* schmaleres Padding und kleinere Logos, damit die drei nicht aneinander kleben */
header{
  padding:0 24px;
}

.logo img{
  max-height:calc(var(--kopf-hoehe) * 0.41);
}

.reftreff img{
  max-height:calc(var(--kopf-hoehe) * 0.58);
}
}

/* ==========================
   Mobile
   ========================== */
@media (max-width: 640px){
header{
  --kopf-hoehe:96px;
  padding:0 16px;
  gap:12px;
}

/* VSt und HFU raus: zu dritt bleibt fuer keins der Logos genug Breite.
   Reftreff steht auf Mobile allein, die beiden Links sind ueber den
   Footer der Campus-Seiten weiterhin erreichbar. */
.vst, .hfu{
  display:none;
}

/* allein im Header: mittig ueber die freie Breite, der Link bleibt aber auch
   hier so gross wie das Logo */
.reftreff{
  margin-inline:auto;
}

.reftreff img{
  max-width:100%;
  max-height:64px;
}

.location h2{
  font-size:1rem;
  padding:10px 6px;
}
}