/* ============================================================
   LA WALLY /patenschaften — Patenliste + Bild-Screen
   Wird NACH tasca.css + tasca-geschichte.css + tasca-overrides.css geladen.
   ============================================================ */

/* ---------- Hero-Titel: an die Viewport-Breite anpassen ----------
   „PATENSCHAFTEN" ist länger als „LA WALLY"; der Titel sitzt ~1,08vh
   vom Panel-Anfang versetzt und darf nicht aus dem Viewport laufen. */
@media (min-width: 48em) and (orientation: landscape) {
  .pat-page .title-text__title[data-v-0e7fdd29] {
    font-size: clamp(30px, calc((100vw - 108vh) / 8.7), 7.4074vh);
  }
}

/* ---------- Patenliste (Screen mit Sticky-Mechanik wie die Zeitleiste) ---------- */
.pat-list { min-width: 100vw; }

.pat-list .list-image__title {
  margin: 0 0 calc(var(--grid-val-vertical) * .7);
}

.pat-list .list__wrap {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  column-gap: clamp(18px, 2.4vw, 44px);
  margin: 0;
  padding: 0;
  align-content: start;
  list-style: none;
}

/* Desktop-Sticky-Modus: Liste mindestens viewport-hoch halten.
   Sonst wird die gemessene Strecke negativ und der Engine-Handler
   verschiebt die Liste fälschlich nach unten (letzte Zeilen abgeschnitten). */
@media (min-width: 1024px) and (orientation: landscape) {
  .pat-list .list__wrap { min-height: 80vh; }
}

.pat-row {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: calc(var(--grid-val-vertical) * .21) 0;
  border-bottom: 1px solid rgba(93, 16, 16, .14);
  font-size: clamp(12.5px, 1.02vw, 15px);
  font-weight: 300;
  line-height: 1.35;
  color: #5d1010;
}

.pat-row .pat-num {
  flex: 0 0 auto;
  min-width: 2.7em;
  font-weight: 500;
  color: #5d1010;
  letter-spacing: .06em;
}

.pat-row--empty { opacity: .45; }

.pat-flag {
  display: inline-block;
  flex: 0 0 auto;
  width: 13px;
  height: auto;
  align-self: center;
  margin-left: 2px;
  border-radius: 1px;
  box-shadow: 0 0 0 1px rgba(28, 22, 22, .28);
}

/* < 1024px / Portrait: Liste normal im Fluss (kein Sticky; nichts wird abgeschnitten) */
@media (max-width: 1023.98px), (orientation: portrait) {
  .pat-list .list__inner { position: static; height: auto; width: auto; overflow: visible; }
  .pat-list .list__inner-scrolling { overflow: visible; }
  .pat-list .list__wrap { grid-template-columns: repeat(2, minmax(0, 1fr)); min-height: 0; }
  /* Mobil kompakter: weniger Abstand Nummer<->Name, damit jeder Eintrag einzeilig bleibt (30.09.26) */
  .pat-row { gap: 5px; font-size: 12px; }
  .pat-row .pat-num { min-width: 1.8em; }
  .pat-flag { margin-left: 0; }
}

/* ---------- Bild-Screen (Fullscreen-Cover, Reveal via data-animation="estates-map") ---------- */
.pat-img { position: relative; padding: 0 !important; }
.pat-img picture { display: block; position: absolute; inset: 0; }
.pat-img .pat-img__img {
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
}


/* ---------- Knospe-Screen: Bild zwischen Hero und Text (30.09.26) ----------
   Desktop (horizontale Buehne): Bild exakt screenhoch (100vh); links und rechts
   der gleiche Abstand zum Text. Gemessen: Hero-Text endet 0.57u vor dem
   Panel-Ende, das Text-Panel hat 2.43u Einzug -> Abstand 3u beidseitig
   (padding-left 2.43u, padding-right 0.57u). */
.pat-knospe { background: #fff; padding: 0 !important; }
.pat-knospe .pat-knospe__img { display: block; }
@media (min-width: 48em) and (orientation: landscape) {
  .pat-knospe { padding: 0 calc(var(--grid-val-vertical) * .57) 0 calc(var(--grid-val-vertical) * 2.43) !important; }
  .pat-knospe .pat-knospe__img { height: calc(var(--vh, 1vh) * 100); width: auto; max-width: none; }
}
@media (max-width: 47.99em), (orientation: portrait) {
  .pat-knospe { padding: calc(var(--grid-val-vertical) * 2) calc(var(--grid-val-vertical) * .4) calc(var(--grid-val-vertical) * 2) 0 !important; }
  .pat-knospe .pat-knospe__img { width: 100%; max-width: 100%; height: auto; }
}

/* ---------- Cursor: kleine Pflanze (Spross) statt Punkt (30.09.26) ---------- */
.cursor--glass .cursor__glass svg { filter: drop-shadow(0 0 1px #fff) drop-shadow(0 1px 3px rgba(0, 0, 0, .45)); }

/* ---------- Textmarkierung: Beige statt Browser-Blau (30.09.26) ---------- */
::selection { background-color: #8f5a33; color: #ffffff; }


/* ---------- H2 „Wo Gemeinschaft Platz bekommt": feste 2-Zeilen-Aufteilung (30.09.26) ----------
   Zeilenumbruch per <br> im Markup („Wo Gemeinschaft" / „Platz bekommt").
   Desktop-Landscape minimal kleiner (7vh statt 7.4074vh), damit die erste
   Zeile in die Textspalte passt (sonst 3 Zeilen). Mobil/Portrait unverändert. */
@media (min-width: 48em) and (orientation: landscape) {
  .pat-page .single-col-media .single-col-media__title { font-size: 7vh; }
}

/* ---------- „Die Paten“ in Oswald + Weinrot (30.09.26) ----------
   Konsistent mit den übrigen Überschriften (wie „Seit 2023“ auf /geschichte):
   font-weight/letter-spacing nicht mehr überschreiben, damit .title--small greift. */
.pat-page .pat-list .list-image__title {
  font-family: "Oswald", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  color: #5d1010;
}


/* ---------- Hero-Untertitel mobil: mehr Zeilenabstand (02.10.26) ----------
   „Ein Stück Weingarten, das wächst.“ bricht mobil auf zwei Zeilen. Mit
   line-height:1 (aus .title--small) stiessen die Umlaut-Punkte des „Ä“ an das
   Komma der Zeile darueber (DE; EN/IT gleiche Zeilenlaenge). Mobil daher 1.3 —
   Desktop bleibt unveraendert (dort einzeilig). */
@media screen and (max-width: 47.99em) {
  .title-text__subtitle[data-v-0e7fdd29] { line-height: 1.3; }
}