/* ==========================================================
   Anita Lindenthaler – Grundlayout
   4 Blöcke, Desktop: 2x2 Grid (je 50% Breite/Höhe)
   Mobile: untereinander, Reihenfolge: links oben, links unten,
           rechts oben, rechts unten
   ========================================================== */

:root {
  --color-green: #78c193;
  --color-salmon: #e19482;
  --bg-block-tl: rgba(120, 193, 147, 0.1);
}

html, body {
  margin: 0;
  padding: 0;
}

body {
  overflow-x: hidden;
}

.site-grid {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-areas: "tl" "bl" "tr" "br";
}

.grid-block {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 60vh;
  padding: 3rem 2rem;
  box-sizing: border-box;
}

.block-tl {
  grid-area: tl;
  background-color: var(--bg-block-tl);
}

.block-bl {
  grid-area: bl;
  background-color: #ffffff;
}

.block-tr {
  grid-area: tr;
  background-color: #ffffff;
}

.block-br {
  grid-area: br;
  background-color: var(--color-salmon);
}

/* Bild-Grundverhalten */

.block-img {
  max-width: 100%;
  height: auto;
}

.img-logo-physio {
  width: 80%;
  max-width: 480px;
}

.img-logo-zentrum {
  width: 55%;
  max-width: 200px;
}

.img-map {
  width: 60%;
  max-width: 220px;
}

.img-kontakt {
  width: 65%;
  max-width: 280px;
}

.img-kontakt-adresse {
  width: 65%;
  max-width: 300px;
}

/* Block 2: Karte + Kontaktdaten nebeneinander (ab Tablet), untereinander auf sehr kleinen Screens */

.bl-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 2rem;
}

.bl-inner .img-map, .bl-inner .img-kontakt {
  width: auto;
}

.bl-inner .img-map {
  max-width: 180px;
}

.bl-inner .img-kontakt {
  max-width: 260px;
}

/* ==========================================================
   Desktop: 2x2 Grid – oben links/rechts, unten links/rechts
   ========================================================== */

@media (min-width: 768px) {
  .site-grid {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    grid-template-areas: "tl tr" "bl br";
    min-height: 100vh;
  }
}

@media (min-width: 768px) {
  .grid-block {
    min-height: 50vh;
  }
}