/* ---------------------------------------------------------------------------
   Üse Lade — die Seite über den Laden.

   Der alte Aufbau reihte Text und Bild in immer demselben Takt aneinander.
   Hier wechseln sich drei Formen ab: das Nebeneinander von Text und Bild,
   das Zitat über die volle Breite, und die Doppelseite mit den beiden
   Menschen. So liest sich die Seite als Besuch und nicht als Liste.
   --------------------------------------------------------------------------- */

/* Einstieg: gleicher Takt wie auf der Startseite, damit die Seite dazugehört. */
.lade-hero{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);
  gap:var(--gut);align-items:center;padding:clamp(2.5rem,7vw,6rem) 0 clamp(2rem,4vw,3rem)}
.lade-hero h1{margin:0 0 var(--s3)}
.lade-lede{font-size:1.05rem;max-width:42ch;color:var(--steel);margin:0 0 var(--s4)}
.lade-hero figure{margin:0}
.lade-hero figure img{width:100%;aspect-ratio:3/2;object-fit:cover}
@media (max-width:60rem){
  .lade-hero{grid-template-columns:1fr}
  .lade-hero figure{order:-1}
}

/* Jedes Kind holt sich den Satzspiegel selbst — so kann das Zitatband
   ausscheren, ohne mit Viewport-Einheiten gegen die Bildlaufleiste zu
   rechnen. */
.lade-body{padding-bottom:var(--s6)}
.lade-body>*{max-width:78rem;margin-inline:auto;padding-inline:var(--gut)}
.lade-body>*+*{margin-top:clamp(2.5rem,6vw,4.5rem)}
.lade-body p{max-width:62ch}
.lade-h2{margin-block:0}

/* Text und Bild nebeneinander. Das Bild ist die groessere Haelfte — es
   zeigt den Laden, und darum geht es auf dieser Seite. */
.lade-split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);
  gap:var(--gut);align-items:center}
.lade-split figure{margin:0}
/* Hochformate nicht ins Querformat zwingen, aber auch nicht die halbe
   Seite fuellen lassen: gedeckelt und beschnitten statt gestaucht. */
.lade-split figure img{width:100%;height:auto;display:block;
  max-height:34rem;object-fit:cover}
.lade-split h2{margin:0 0 var(--s3)}
.lade-split-rev>figure{order:-1}
@media (max-width:60rem){
  .lade-split{grid-template-columns:1fr}
  .lade-split-rev>figure{order:0}
}

/* Die beiden Menschen: gleiches Gewicht, gleicher Schnitt. */
.lade-people{display:grid;grid-template-columns:1fr 1fr;gap:var(--gut);margin-top:var(--s4)}
.lade-people article{margin:0}
.lade-people figure{margin:0 0 var(--s3)}
.lade-people figure img{width:100%;aspect-ratio:4/3;object-fit:cover;display:block}
.lade-people h3{font-family:var(--display);font-weight:700;font-size:1.25rem;margin:0 0 var(--s2)}
@media (max-width:52rem){.lade-people{grid-template-columns:1fr}}

/* Das Zitat traegt die Stimme des Ladens. Dunkles Band ueber die volle
   Breite — dieselbe Form wie der Beitrag auf der Startseite, damit die
   Seite nicht eine eigene Sprache erfindet. */
.lade-quote{background:var(--ink);color:var(--paper);
  margin-block:clamp(2.5rem,6vw,4.5rem);
  /* Das Band selbst kennt keine Grenze; sein Inhalt bleibt im Satzspiegel. */
  max-width:none;
  padding-block:clamp(2.5rem,6vw,4rem);
  padding-inline:max(var(--gut),calc((100% - 78rem) / 2 + var(--gut)))}
.lade-quote p{font-family:var(--display);font-weight:300;
  font-size:clamp(1.35rem,3.2vw,2.1rem);line-height:1.28;
  max-width:26ch;margin:0 auto;text-align:center;text-wrap:balance}
/* Mit Bild wird aus dem Band eine Doppelseite. Der Inhalt bleibt im
   Satzspiegel — das Band laeuft aus, der Text nicht. */
.lade-quote-media{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:var(--gut);align-items:center}
.lade-quote-media p{text-align:left;margin:0;max-width:18ch}
.lade-quote-media figure{margin:0}
.lade-quote-media figure img{width:100%;aspect-ratio:4/3;object-fit:cover;display:block}
@media (max-width:60rem){
  .lade-quote-media{grid-template-columns:1fr;gap:var(--s4)}
  .lade-quote-media p{text-align:center;max-width:26ch;margin:0 auto}
}

/* Besuchskarte: die Antwort auf wo, wann, wie. Kein Kasten mit Schatten,
   sondern eine abgesetzte Flaeche mit klaren Feldern. */
.lade-visit{background:var(--surface);border-top:1px solid var(--line);
  padding:clamp(2.5rem,6vw,4.5rem) 0}
.lade-visit .wrap{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.2fr);
  gap:var(--gut);align-items:start}
.lade-visit h2{margin:0 0 var(--s3)}
.lade-visit p{max-width:44ch;color:var(--steel)}
.lade-visit dl{display:grid;grid-template-columns:1fr 1fr;gap:var(--s4) var(--gut);margin:0}
.lade-visit dt{font-family:var(--display);font-weight:300;font-size:.8rem;
  letter-spacing:.14em;text-transform:uppercase;color:var(--steel);
  border-bottom:1px solid var(--line);padding-bottom:.35rem;margin-bottom:.6rem}
.lade-visit dd{margin:0;line-height:1.55}
.lade-visit dd a{color:var(--ink);text-decoration:none;
  border-bottom:1px solid var(--coral)}
.lade-visit dd a:hover,.lade-visit dd a:focus-visible{color:var(--coral);outline:none}
@media (max-width:60rem){
  .lade-visit .wrap{grid-template-columns:1fr}
}
@media (max-width:40rem){
  .lade-visit dl{grid-template-columns:1fr}
}