/* Karten und Stimmen. Eigene Datei, weil komponenten.css an der
   Zeilengrenze steht. Nur vorhandene Custom Properties. */

/* ==========================================================================
   Karte — Schwerpunkt, Standort, Beitragshinweis
   ========================================================================== */

/* Ein selbstordnendes Raster: die Spaltenzahl entsteht aus der Breite,
   nicht aus einer Vorgabe. */
.karten {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
    gap: var(--space-xl);
    margin-block: var(--space-2xl);
    align-items: stretch;
}

/* Zwei feste Spalten: vier Karten stehen dann als Quadrat und nicht in
   einer langen Reihe. */
@media (min-width: 40rem) {
    .karten-zwei {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Die ganze Karte ist der Verweis: kein unterstrichener Text, sondern
   eine Flaeche, die beim Zeigen deutlicher wird. */
.karte {
    display: flex;
    min-width: 0;
    flex-direction: column;
    padding: var(--space-xl);
    border: 1px solid var(--color-primary-light);
    border-radius: var(--radius-lg);
    background: var(--color-white);
    text-align: left;
    color: inherit;
    text-decoration: none;
    transition: border-color var(--transition-base), box-shadow var(--transition-base);
}

/* Die Karte bleibt beim Zeigen an ihrem Platz; Rahmen und Schatten
   genuegen als Rueckmeldung. Eine Bewegung liesse die Reihe unruhig
   wirken. */
a.karte:hover,
a.karte:focus-visible {
    border-color: var(--color-secondary);
    box-shadow: var(--shadow-md);
}

/* Der Hinweis am Fuss war frueher der Verweis; er bleibt als Zeichen,
   wohin die Karte fuehrt, ohne selbst einer zu sein. */
.karte-hinweis {
    display: block;
    /* #c99e67 trug auf Weiss nur 2.45; der Textton 4.80. */
    color: var(--color-secondary-text);
    font-size: var(--font-size-sm);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

a.karte:hover .karte-hinweis {
    text-decoration: underline;
}

.karte > :first-child {
    margin-top: 0;
}

/* Der Verweis sitzt unten, damit die Karten trotz verschieden langer
   Texte auf einer Linie enden. */
.karte > :last-child {
    margin-top: auto;
    margin-bottom: 0;
    padding-top: var(--space-md);
}

/* Die Ueberschrift einer Karte, gleich welcher Ebene: eine Standortkarte
   traegt eine h2, eine Themenkarte eine h3. Die Ebene richtet sich nach
   dem Inhalt, die Groesse nach der Karte. */
.karte h2,
.karte h3 {
    font-size: var(--font-size-xl);
    line-height: 1.2;
}

/* Der kleine Vorsatz traegt die Zeile, nicht die Aussage: er steht ueber
   ihr. Der Nachsatz bleibt in der Zeile der Aussage. */
.karte h2 small,
.karte h3 small {
    font-family: var(--font-body);
    font-size: var(--font-size-sm);
    font-weight: 400;
    color: var(--color-text-light);
    letter-spacing: 0.04em;
}

.karte h2 small:first-child,
.karte h3 small:first-child {
    display: block;
    margin-bottom: var(--space-xs);
}

/* Das Element vor der Klasse, damit die Regel schwerer wiegt als die
   allgemeine Regel fuer h2 im Lesebereich: inhalt.css wird spaeter geladen
   und wuerde den Trennstrich sonst durchsetzen. Fuer h3 gibt es dort keine
   Regel, deshalb genuegt die Klasse. */
div.karte h2::after,
.karte h3::after {
    content: none;
}

/* Der Standort: Ueberschrift, Adresse, Schaltflaeche. Anders als eine
   Themenkarte ist nicht die Flaeche der Verweis, sondern die Schaltflaeche
   darin - deshalb ein div und kein a. */
.karte.standort {
    text-align: center;
}

.karte.standort .knopf {
    align-self: center;
}

/* Das Ortszeichen steht ueber der Ueberschrift und traegt dieselben
   Groessen wie in der Symbolreihe: ein Zeichen soll ueberall gleich gross
   wirken, sonst liest der Satz uneinheitlich. Ohne diese Regel stuende es
   in seiner natuerlichen Breite von 314px in der Karte. */
.karte.standort img {
    display: block;
    /* Eine Stufe kleiner als in der Symbolreihe, so verlangt: in einer
       Karte von rund 280px Breite wirkte das Zeichen auf 3.5rem wie ein
       Bild statt wie ein Akzent zur Ueberschrift. */
    width: 2.5rem;
    margin: 0 auto var(--space-sm);
}

@media (min-width: 48rem) {
    .karte.standort img {
        width: 2.75rem;
    }
}

/* Zeichen und Ueberschrift sind ein Paar und stehen dicht beieinander.
   Ohne diese Regel gewinnt der obere Abstand der h2 aus grundlage.css,
   und zwischen dem Fuss des Zeichens und dem Wort Therapiepraxis lagen
   gemessene 130 Pixel - die beiden lasen als zwei getrennte Dinge. */
.karte.standort img + h2 {
    margin-top: 0;
}



/* ==========================================================================
   Symbole — eine Reihe aus Zeichen mit Beschriftung
   ========================================================================== */

/* Der Zusatz symbole nimmt der Karte den Kasten. Ein Symbol soll auf dem
   Seitengrund stehen, nicht in einem Rahmen: gerahmt liest es sich als
   Schaltfläche, und drei Rahmen nebeneinander sind mehr Linie als Inhalt.

   Warum kein eigener Baustein: karten ist an allen vier Stellen schon
   bekannt gemacht (62-bausteine.yaml). Ein zweiter Baustein für dieselbe
   Anordnung wäre Aufwand ohne Gegenwert.

   Warum überhaupt eine Reihe: einzeln und groß ist ein Symbol Zierat -
   nachzusehen auf /krise-trennung, wo je Abschnitt eines allein in einem
   leeren Band steht. Als Reihe mit Beschriftung wird daraus ein Satz, den
   man auf einen Blick liest. */
.karten.symbole {
    /* Enger als die Karten: bei 9rem passen drei bis fünf Zeichen in eine
       Reihe, bei 17rem nur zwei. */
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 9rem), 1fr));
    gap: var(--space-xl) var(--space-lg);
    max-width: var(--container-narrow);
    margin-inline: auto;
}

.karten.symbole .karte {
    padding: 0;
    border: 0;
    border-radius: 0;
    background: none;
    box-shadow: none;
    text-align: center;
    align-items: center;
    gap: var(--space-xs);
}

/* Ohne das gilt inhalt.css für Bilder ohne Alternativtext: 9.4rem und
   margin auto. In einer Reihe füllt das Zeichen damit seine Zelle und
   drückt die Beschriftung nach unten aus dem Blickfeld.

   Die Größen sind nicht gewählt, sie stehen in der Symbolrichtlinie unter
   groessenrollen_px für Karten: 56px unter 360px Viewport, 64px bis 767px,
   72px bis 1023px, 80px darüber. Die Richtlinie verlangt ausdrücklich,
   dass bei zu feinem Strich die Box wächst und nicht die Strichstärke.
   Bei rem = 19px ergeben 3.5rem 66px, 4rem 76px und 4.5rem 85px; die
   Stufen liegen damit auf oder knapp über den geforderten Werten. */
.karten.symbole .karte img {
    width: 3.5rem;
    height: auto;
    margin: 0 auto;
}

/* Symbolbeschriftungen folgen direkt; die Fußregel normaler Karten
   darf hier weder Leerraum noch zusätzlichen Innenabstand erzeugen.
   pgdoc://lisa-public/rules/47-symbole */
.karten.symbole .karte > :last-child {
    margin-top: 0;
    padding-top: 0;
}

@media (min-width: 48rem) {
    .karten.symbole .karte img {
        width: 4rem;
    }
}

@media (min-width: 64rem) {
    .karten.symbole .karte img {
        width: 4.5rem;
    }
}

/* Die Beschriftung ist eine Überschrift, aber keine Schlagzeile: sie steht
   in Lesegröße, damit das Zeichen darüber die Aufmerksamkeit behält. */
.karten.symbole .karte h3,
.karten.symbole .karte h4 {
    margin: 0;
    font-size: var(--font-size-base);
    line-height: 1.3;
}

.karten.symbole .karte p {
    margin: 0;
    font-size: var(--font-size-sm);
    color: var(--color-text-light);
    text-wrap: balance;
}

/* Zweite Form der Reihe: jede Zelle zeigt auf einen Abschnitt derselben
   Seite. Damit wird aus Zierat eine Übersicht - man sieht beim Öffnen,
   was die Seite enthält, und springt hin.

   Die Beschriftung steht in einem span und nicht in einer Überschrift.
   Die Abschnittsüberschriften stehen weiter unten auf der Seite; ein
   zweiter Satz derselben Namen wäre in der Gliederung und im
   Vorleseprogramm nur Doppelung.

   Geschrieben als a.karte im Inhalt, nicht als div: Kartenverweis greift
   auf div class="karte" und würde die Beschriftung zu einem Hinweis
   machen. Ein selbst gesetzter Verweis bleibt unberührt. */
/* Eine Navigationsreihe steht breiter als der Text. Die Lesebreite gilt
   für Zeilen, die gelesen werden - eine Reihe von Sprungzielen wird
   überflogen. Auf 66ch passen nur drei Spalten, und fünf Zellen brachen
   deshalb als 3 plus 2 mit einer leeren dritten Spalte darunter.

   Gerechnet: 56rem sind 1064px, fünf Zellen bekommen darin je etwa
   213px; auto-fit klappt leere Spuren zusammen, es stehen also genau
   fünf in einer Zeile. Auf 390px bleiben bei 7rem zwei Spalten - fünf
   gestapelte Zellen wären ein sehr hoher Block.

   Erkannt am a: eine Navigationszelle ist ein Verweis, eine
   Aussagezelle ein div. Damit bleiben /erstgespraech und die
   Praxisstandorte unberührt auf der Lesebreite. */
.karten.symbole:has(> a.karte) {
    /* Alle Ziele sollen in eine Zeile passen, ohne dass eine Beschriftung
       mitten im Wort bricht. Maßgebend ist das längste Wort: bei
       font-size-sm braucht "Weiterentwicklung" etwa 133px, also 7rem.
       Gerechnet bei rem = 19px: acht Zellen von 7rem sind 1064px, sieben
       Lücken von space-md sind 133px - zusammen 1197px, und dafür sind
       64rem (1216px) nötig. Wer die Reihe erweitert oder ein längeres
       Wort aufnimmt, rechnet hier nach. */
    max-width: 64rem;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 7rem), 1fr));
    gap: var(--space-lg) var(--space-md);
}

.karten.symbole a.karte span {
    font-family: var(--font-heading);
    /* Eine Stufe kleiner als in der Aussagereihe: die Beschriftung eines
       Sprungziels wird überflogen, nicht gelesen, und erst damit passt das
       längste Wort ungetrennt in seine Zelle. Kein overflow-wrap
       break-word - der trennte "Weiterentwicklung" mitten im Wort, weil
       ohne Trennmuster kein sinnvoller Punkt gefunden wird. */
    font-size: var(--font-size-sm);
    line-height: 1.3;
    color: var(--color-heading);
    transition: color var(--transition-fast);
    max-width: 100%;
}

/* Rückmeldung nur über die Farbe. Die Zelle bewegt sich nicht - dieselbe
   Ruhe wie bei den Karten, siehe 62-bausteine.yaml unter karten.ruhe. */
.karten.symbole a.karte:hover span,
.karten.symbole a.karte:focus-visible span {
    color: var(--color-primary-dark);
}

/* ==========================================================================
   Stimmen — mehrere Rezensionen am Stueck
   ========================================================================== */

/* Untereinander, nicht nebeneinander: eine Stimme will gelesen werden,
   und nebeneinander gestellte Kaesten laden nicht dazu ein. */
.stimmen {
    display: flex;
    flex-direction: column;
    gap: var(--space-xl);
    max-width: var(--container-narrow);
    margin: var(--space-2xl) auto;
}