/* Kachelseite fuer die Info-Stele im Dorf - das gemeinsame Aussehen.
   Jede Site bringt nur das Markup mit ihren eigenen Zielen mit (siehe
   leben-in-hoerste, user/pages/99.stele); Raster, Kacheln und der
   Rollstuhl-Modus kommen von hier. Ohne dieses Markup ist die Datei
   wirkungslos und wird deshalb wie stele.css ohne Schalter geladen.

   Eigene Route statt umgebautes Menue: Auf der Stele zaehlt eine kurze,
   eindeutige Auswahl, nicht die vollstaendige Website-Navigation.

   Farben: --stele-akzent setzt jede Site in ihrem Branding-Modul
   (user/data/grav-mcp/css/), --ton je Kachel im Markup. Die Rueckfaelle
   sind das Gruen von leben-in-hoerste, wo die Stele herkommt.

   Alle Groessen haengen an clamp() mit vmin-Anteil. Das waechst von selbst
   mit dem Display mit - auf einem 1080 px breiten Panel wird ein Kacheltitel
   rund 37 px gross, auf dem Handy bleibt er bei gut 22 px. So passt die Seite
   auch, solange die echten Werte der Stele nicht gemessen sind; feste
   Breakpoints muessten wir danach nachziehen. */

.stele-intro {
  margin: 0 0 clamp(1rem, 2.5vmin, 2.5rem);
  font-size: clamp(1rem, 2.1vmin, 1.8rem);
  opacity: .75;
}

.stele-raster {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(.8rem, 2vmin, 2rem);
  margin-bottom: clamp(.8rem, 2vmin, 2rem);
}

/* Zwei Spalten nur, wenn breit UND quer. Die Stele ist zwar breit, aber
   hochkant - dort bleiben die Kacheln untereinander, sonst werden sie zu
   flachen Streifen unter einem meterhohen leeren Rest. */
@media (min-width: 700px) and (min-aspect-ratio: 3/4) {
  .stele-raster { grid-template-columns: 1fr 1fr; }
  .stele-raster.klein { grid-template-columns: repeat(4, 1fr); }
}

/* Quer wird die Stele nur in einem Fall: Der Knopf fuer Barrierefreiheit holt
   das Bild in die untere Haelfte des Panels, aus 1080x1920 werden 1080x960.
   Damit trifft die Abfrage oben zu - und mit ihr treten zwei Dinge zutage,
   die hochkant nie auffallen.

   Erstens standen die drei Hauptkacheln zu zweit in Reihe eins und die dritte
   allein in einer halb leeren Reihe zwei. Sie gehoeren in eine Reihe:
   hochkant ueber die volle Breite, quer zu dritt nebeneinander.

   Zweitens - und das ist der eigentliche Fehler - passt der Inhalt gar nicht
   in die schmalen Spalten. Alle Groessen oben stehen als clamp(rem, vmin,
   rem), und gemeint war der vmin-Anteil als der fuehrende. Auf der Stele ist
   die Wurzelgroesse aber 36 px (stele.css), damit ist schon der untere
   rem-Wert groesser als jeder vmin-Anteil: Der Kacheltitel steht bei 48,6 px
   statt bei 36,7, das Symbol bei 57,6 statt bei 43 - und keine dieser Zahlen
   reagiert noch auf die Breite. Ueber die volle Breite faellt das nicht auf.
   In einer Spalte von einem Drittel oder einem Viertel schon: Eine 1fr-Spur
   schrumpft nicht unter ihren Inhalt, das Raster wird also breiter als das
   Panel, und ein ueberbreites Layout zoomt der WebView als Ganzes heraus.
   Dann ist nicht eine Kachel zu gross, sondern die ganze Seite zu klein.

   Deshalb hier Groessen in vw: Eine Spalte ist ein fester Bruchteil der
   Fensterbreite, also soll es die Schrift darin auch sein. Die Zahlen ergeben
   auf 1080 px rund 30 px Kacheltitel und 26 px bei den Nebenzielen - kleiner
   als hochkant, aber im Rollstuhl-Modus sitzt man auch unmittelbar davor.

   Dazu minmax(0, 1fr) und ein umbruchfaehiger Text als Sicherung: Keine Spur
   kann breiter werden als ihr Anteil, was auch immer einmal in einer Kachel
   steht. Das ist der Teil, der den Ueberlauf wirklich ausschliesst - die
   Groessen sorgen dafuer, dass es darin auch gut aussieht. */
@media (min-aspect-ratio: 3/4) {
  html.stele .stele-raster { gap: 1.5vw; margin-bottom: 1.5vw; }
  html.stele .stele-raster.gross { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  html.stele .stele-raster.klein { grid-template-columns: repeat(4, minmax(0, 1fr)); }

  html.stele .stele-kachel { gap: 1.5vw; padding: 2vw; }
  html.stele .stele-wort { min-width: 0; overflow-wrap: break-word; }

  html.stele .stele-raster.gross .stele-icon { font-size: 4.6vw; }
  html.stele .stele-raster.gross .stele-titel { font-size: 2.8vw; }
  html.stele .stele-raster.gross .stele-text { font-size: 1.9vw; }

  html.stele .stele-raster.klein .stele-icon { font-size: 3.4vw; }
  html.stele .stele-raster.klein .stele-titel { font-size: 2.4vw; }
}

.stele-kachel {
  display: flex;
  align-items: center;
  gap: clamp(.8rem, 2.2vmin, 2.2rem);
  min-height: clamp(120px, 22vmin, 340px);
  padding: clamp(1rem, 2.5vmin, 2.5rem);
  border: 3px solid var(--stele-akzent-rand, rgba(39, 98, 56, .25));
  border-radius: clamp(10px, 1.6vmin, 22px);
  background: var(--ton, #eef4e6);
  color: var(--stele-akzent, #276238) !important;
  text-decoration: none !important;
  /* Kein Warten auf einen moeglichen Doppeltipp - auf traegen Panels ist
     jede zusaetzliche Verzoegerung spuerbar. */
  touch-action: manipulation;
}

/* Rueckmeldung beim Antippen: Wer nichts sieht, tippt ein zweites Mal. */
.stele-kachel:active {
  border-color: var(--stele-akzent, #276238);
  transform: scale(.985);
  filter: brightness(.94);
}
.stele-kachel:focus-visible { outline: 4px solid var(--stele-akzent, #276238); outline-offset: 3px; }

.stele-icon { font-size: clamp(2.2rem, 6.5vmin, 6rem); line-height: 1; }
.stele-wort { display: flex; flex-direction: column; gap: .25em; }
.stele-titel { font-size: clamp(1.35rem, 3.4vmin, 3rem); font-weight: 700; line-height: 1.15; }
.stele-text { font-size: clamp(.95rem, 1.9vmin, 1.6rem); line-height: 1.3; opacity: .8; }

/* Der Display-Check gehoert nicht zum Angebot, sondern zur Wartung -
   deshalb blasser als die Nebenziele, aber erreichbar, ohne die Adresse
   eintippen zu muessen. */
.stele-kachel.technik { border-style: dashed; opacity: .75; }

/* Die Nebenziele kleiner, damit die drei Hauptkacheln die Auswahl fuehren. */
.stele-raster.klein .stele-kachel { min-height: clamp(80px, 12vmin, 180px); }
.stele-raster.klein .stele-icon { font-size: clamp(1.6rem, 4vmin, 3.4rem); }
.stele-raster.klein .stele-titel { font-size: clamp(1.05rem, 2.4vmin, 2rem); }