/* Nur fuer index-weiche.html. Laedt NACH handy.css und darf deshalb
ueberschreiben. index.html und index-neu.html binden diese Datei nicht ein
und bleiben unveraendert.
Zwei Aufgaben:
1) Die Umschaltung der beiden Straenge.
2) Die sechs Handy-Regeln aus SEITEN-KONZEPT.md. Gemessen wurde vorher:
30,9 Bildschirme, erster Betrag auf Bildschirm 5,5, drei gleichzeitig
sichtbare Spendenknoepfe, sechs Bildschirme am Stueck ohne Bild. */
/* ---------- 1 · Umschaltung ---------- */
/* Vor der Wahl sind beide Straenge zu. Kein display:none, sondern content-
visibility: der Inhalt bleibt im Quelltext und fuer die Suche lesbar. */
.strang { display: none; }
body[data-weg="bau"] #strang-bau,
body[data-weg="paket"] #strang-paket,
body[data-weg="ziege"] #strang-ziege,
body[data-weg="brunnen"] #strang-brunnen { display: block; }
/* ACHTUNG bei einem weiteren Weg: diese Liste zaehlt die Wege EINZELN auf.
Beim vierten Weg am 27.08.2026 war sie die einzige Stelle, die uebersehen
wurde — Knopf, Strang, Umschalter und Navigation waren fertig, und trotzdem
blieb die Seite leer, weil hier eine Zeile fehlte. Der Fehler ist im DOM
nicht zu sehen: das data-weg am body stand richtig, der Strang war da, nur
unsichtbar. Gemessen wird das mit getComputedStyle().display, nicht mit
dem Auge. */
.wahl {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 1.1rem;
margin-top: 1.4rem;
}
.wahl-karte {
display: flex;
flex-direction: column;
align-items: stretch;
text-align: left;
min-width: 0; /* sonst schrumpfen Grid-Kinder nie */
padding: 0 0 1rem;
border: 1px solid rgba(30, 91, 69, .16);
border-radius: 16px;
background: #fff;
cursor: pointer;
overflow: hidden;
transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.wahl-karte:hover,
.wahl-karte:focus-visible {
transform: translateY(-3px);
border-color: rgba(30, 91, 69, .4);
box-shadow: 0 14px 34px rgba(30, 91, 69, .13);
}
.wk-bild { display: block; aspect-ratio: 1200 / 560; overflow: hidden; background: #EFE7D9; }
.wk-bild img { width: 100%; height: 100%; object-fit: cover; display: block; }
.wk-text { display: block; padding: 1rem 1.15rem .2rem; }
.wk-text b { display: block; font-family: Fraunces, Georgia, serif; font-size: 1.32rem; line-height: 1.2; }
.wk-satz { display: block; margin-top: .45rem; color: #4a4a45; line-height: 1.5; }
.wk-zahl {
display: inline-block; margin-top: .7rem;
font-family: "JetBrains Mono", ui-monospace, monospace;
font-size: .82rem; letter-spacing: .04em;
color: #1E5B45; background: rgba(30, 91, 69, .08);
padding: .3rem .6rem; border-radius: 999px;
}
.wk-los {
margin: .9rem 1.15rem 0; padding: .8rem 1rem;
text-align: center; border-radius: 999px;
background: #1E5B45; color: #FAF7F0; font-weight: 600;
}
.wahl-karte.paket .wk-los { background: #C0A050; color: #2b2410; }
/* Nach der Wahl: eine ruhige Zeile statt zweier grosser Karten. */
.wahl-zeile {
display: flex; flex-wrap: wrap; gap: .8rem 1.2rem;
align-items: center; justify-content: space-between;
margin-top: 1.2rem; padding: .9rem 1.1rem;
border: 1px dashed rgba(30, 91, 69, .3); border-radius: 14px;
background: rgba(30, 91, 69, .05);
}
.wz-text { color: #4a4a45; }
.wz-text b { color: #1E5B45; }
.wz-wechsel {
min-height: 44px; padding: .55rem 1rem;
border: 1px solid rgba(30, 91, 69, .35); border-radius: 999px;
background: #fff; color: #1E5B45; font: inherit; font-weight: 600; cursor: pointer;
}
.wz-wechsel:hover { background: #1E5B45; color: #FAF7F0; }
/* Die Karte auf den anderen Weg, am Ende jedes Strangs. */
.kreuz-karte {
display: flex; flex-wrap: wrap; gap: 1.2rem;
align-items: center; justify-content: space-between;
padding: 1.5rem 1.6rem; border-radius: 18px;
background: linear-gradient(135deg, rgba(30, 91, 69, .07), rgba(192, 160, 80, .1));
border: 1px solid rgba(30, 91, 69, .14);
}
.kreuz-karte h2 { margin: .2rem 0 .4rem; font-size: 1.5rem; }
.kreuz-karte p { margin: 0; max-width: 46ch; color: #4a4a45; }
.kreuz-karte .btn { flex: none; }
/* ---------- 2 · Vertrauensblock ---------- */
.vt-karte {
display: grid; grid-template-columns: auto 1fr; gap: 1.6rem;
align-items: start; padding: 1.6rem 1.8rem;
border: 1px solid rgba(30, 91, 69, .14); border-radius: 18px; background: #fff;
}
.vt-koepfe { display: flex; gap: .7rem; }
.vt-kopf {
flex: none;
width: 92px; height: 92px; border-radius: 50%;
background: #EFE7D9; border: 1px dashed rgba(30, 91, 69, .3);
display: grid; place-items: center; text-align: center; padding: .5rem;
overflow: hidden;
}
/* Im Kreis darf die Beschriftung umbrechen — sonst laeuft sie ueber den Rand
hinaus und die zwei Kreise sehen aus, als waeren sie kaputt. */
.vt-kopf .kommt-noch {
white-space: normal; word-break: break-word;
font-size: .54rem; line-height: 1.3; letter-spacing: .04em;
border: 0; background: none; padding: 0;
}
.vt-text h2 { margin: .2rem 0 .6rem; }
.vt-text p { margin: 0 0 .7rem; line-height: 1.6; color: #3c3c38; }
.vt-text p:last-child { margin-bottom: 0; }
.txt-link { color: #1E5B45; text-decoration: underline; text-underline-offset: 3px; }
/* Platzhalter werden benannt, nicht kaschiert (Entscheidung vom 18.08.). */
.kommt-noch {
display: inline-block;
font-family: "JetBrains Mono", ui-monospace, monospace;
font-size: .64rem; letter-spacing: .06em; text-transform: uppercase;
color: #8a7a4a; background: rgba(192, 160, 80, .16);
border: 1px dashed rgba(192, 160, 80, .5);
padding: .16rem .45rem; border-radius: 6px; white-space: nowrap;
}
/* ---------- 3 · Untere Leiste: EIN Knopf ---------- */
.leiste2 { display: none !important; } /* die alte Doppelleiste bleibt weg */
.leiste1 { display: none; }
.leiste1-knopf {
display: block; text-align: center;
min-height: 52px; line-height: 52px;
border-radius: 999px; font-weight: 700; text-decoration: none;
background: #1E5B45; color: #FAF7F0;
}
.leiste1-knopf.paket { background: #C0A050; color: #2b2410; }
/* ---------- 4 · Handy ---------- */
@media (max-width: 760px) {
/* Regel: EIN sichtbarer Handlungsknopf. Der in der Kopfzeile verschwindet,
die untere Leiste uebernimmt. Vorher waren es drei gleichzeitig. */
.topbar .btn-sm { display: none; }
.leiste1 {
display: block;
position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
padding: .55rem .8rem calc(.55rem + env(safe-area-inset-bottom));
background: rgba(250, 247, 240, .96);
backdrop-filter: blur(8px);
border-top: 1px solid rgba(30, 91, 69, .14);
}
body { padding-bottom: 74px; }
/* Regel: ein Gedanke je Bildschirm — die Wahlkarten untereinander,
jede gross genug zum sicheren Treffen. */
.wahl { grid-template-columns: 1fr; gap: .9rem; }
.wk-text b { font-size: 1.24rem; }
.vt-karte { grid-template-columns: 1fr; gap: 1rem; padding: 1.2rem 1.1rem; }
.vt-koepfe { justify-content: flex-start; }
.vt-kopf { width: 72px; height: 72px; }
.kreuz-karte { padding: 1.2rem 1.1rem; }
.kreuz-karte .btn { width: 100%; text-align: center; }
.wahl-zeile { flex-direction: column; align-items: stretch; text-align: center; }
.wz-wechsel { width: 100%; }
/* Regel: hoechstens rund 40 Woerter am Stueck. Der Rest wartet auf einen
Tipp, statt den Daumen zu beschaeftigen. */
.klapp {
display: -webkit-box; -webkit-box-orient: vertical;
-webkit-line-clamp: 3; overflow: hidden;
}
.klapp.klapp-auf { -webkit-line-clamp: unset; overflow: visible; }
.klapp-mehr {
display: inline-block; margin: .35rem 0 .2rem;
min-height: 44px; padding: .5rem 0;
border: 0; background: none; font: inherit; font-weight: 600;
color: #1E5B45; text-decoration: underline; text-underline-offset: 3px;
cursor: pointer;
}
/* Kapitelbilder waren am Handy so hoch wie ein halber Bildschirm. */
.chapter .ch-img img { max-height: 30vh; object-fit: cover; }
/* Gefaltete Abschnitte: Ueberschrift bleibt, der Rest wartet auf einen Tipp. */
.gefaltet .falt-inhalt { display: none; }
.gefaltet.offen .falt-inhalt { display: block; }
.falt-knopf {
display: flex; align-items: center; justify-content: space-between; gap: 1rem;
width: 100%; min-height: 56px; margin-top: .5rem; padding: .9rem 1.1rem;
border: 1px solid rgba(30, 91, 69, .2); border-radius: 14px;
background: #fff; font: inherit; text-align: left; color: #1E5B45;
cursor: pointer;
}
.fk-text { font-weight: 600; line-height: 1.35; }
.fk-zeichen {
flex: none; width: 26px; height: 26px; border-radius: 50%;
background: rgba(30, 91, 69, .1); position: relative;
}
.fk-zeichen::before, .fk-zeichen::after {
content: ""; position: absolute; left: 50%; top: 50%;
width: 12px; height: 2px; margin: -1px 0 0 -6px;
background: #1E5B45; transition: transform .2s ease;
}
.fk-zeichen::after { transform: rotate(90deg); }
.offen .fk-zeichen::after { transform: rotate(0deg); }
}
/* ---------- 5 · Bildarmer Moschee-Strang (19.08.) ---------- */
/* Kapitel ohne Bild: einspaltig, sonst bleibt die halbe Zeile leer. */
.chapter.ohne-bild { grid-template-columns: 1fr; display: block; }
.chapter.ohne-bild > div { max-width: 62ch; }
/* Der Platzhalter „Foto folgt" im Bautagebuch und beim Team sieht jetzt aus
wie die uebrigen „kommt noch"-Marken, statt wie ein kaputtes Bild. */
.entry .ph, .tcard .ph {
display: grid; place-items: center; text-align: center;
min-height: 96px; padding: .6rem;
border: 1px dashed rgba(192, 160, 80, .55);
border-radius: 10px; background: rgba(192, 160, 80, .1);
font-family: "JetBrains Mono", ui-monospace, monospace;
font-size: .62rem; letter-spacing: .06em; text-transform: uppercase;
color: #8a7a4a;
}
/* ---------- 6 · Der Bilderfaecher groesser (19.08.) ---------- */
/* Gemessen vorher: Mittelkarte 144 px hoch, im Paket-Faecher nur 67 px breit —
die Fotos aus Tansania sind 597 bis 1080 px breit und damit das einzige
echte Material der Seite. Zu klein, um etwas zu erkennen.
Die Buehne waechst mit, sonst schneidet sie die Karten oben und unten ab.
Verhaeltnis wie vorher rund 1,44 zwischen Buehne und Karte. */
/* Die Buehne braucht mehr als die Kartenhoehe: die aeusseren Karten sind um
21 Grad gedreht und bauen dadurch hoeher als sie sind. Gemessen standen sie
sonst 26 px unten ueber und wurden abgeschnitten (overflow: hidden). */
.kg-buehne { height: 23.5rem; --kg-hoehe: 14rem; }
/* Die Bildunterschrift bekommt etwas mehr Luft, damit der laengere Text der
Paketbilder nicht gegen den Rand stoesst. */
.kg-bu { min-height: 5rem; }
@media (max-width: 760px) {
/* Am Handy ist die Breite der Engpass, nicht die Hoehe: eine Hochkantkarte
von 15 rem waere 130 px breit und der Faecher wuerde ueber den Kasten
hinausragen. Deshalb hier etwas kleiner als am Rechner. */
.kg-buehne { height: 21rem; --kg-hoehe: 12rem; }
.kg-bu { min-height: 5.6rem; }
}
/* ---------- 7 · Eine Spendenbox statt zweier ---------- */
/* `.entscheidung` ist ein Zweispalter fuer die beiden alten Kaesten. In der
Weichen-Fassung hat jeder Strang nur noch SEINE Box — sie stand dadurch in
der linken Spalte und die rechte Haelfte blieb leer.
Eine Spalte, mittig, und etwas breiter als eine halbe Seite. */
.entscheidung.eins {
grid-template-columns: minmax(0, 40rem);
justify-content: center;
}
/* ---------- 8 · Dritter Weg: das Opfertier (19.08.) ---------- */
/* Die Rangfolge steht in der Groesse, nicht im Text: zwei grosse Karten,
darunter eine schmale Zeile. Wer sie gleich gross macht, sagt damit
„alles gleich wichtig" — und genau das soll die Seite nicht sagen. */
.wahl-schmal {
display: flex; align-items: center; gap: 1rem;
width: 100%; margin-top: .9rem; padding: .95rem 1.2rem;
border: 1px solid rgba(30, 91, 69, .16); border-radius: 14px;
background: #fff; font: inherit; text-align: left; cursor: pointer;
transition: border-color .18s ease, box-shadow .18s ease;
}
.wahl-schmal:hover, .wahl-schmal:focus-visible {
border-color: rgba(30, 91, 69, .4);
box-shadow: 0 8px 20px rgba(30, 91, 69, .1);
}
.ws-text { flex: 1 1 auto; min-width: 0; }
/* NUR das direkte b ist die Ueberschrift. Ohne das > erwischt die Regel auch
das mit der Familienzahl im Satz darunter, und die Acht steht dann als
eigene Zeile mitten im Text. */
.ws-text > b { display: block; font-family: Fraunces, Georgia, serif; font-size: 1.1rem; }
.ws-text > span { display: block; margin-top: .15rem; color: #4a4a45; font-size: .92rem; }
.ws-text > span b { font-weight: 700; color: #1E5B45; }
.ws-zahl {
flex: none;
font-family: "JetBrains Mono", ui-monospace, monospace; font-size: .8rem;
color: #1E5B45; background: rgba(30, 91, 69, .08);
padding: .3rem .6rem; border-radius: 999px; white-space: nowrap;
}
.ws-pfeil { flex: none; width: 20px; height: 20px; color: #1E5B45; }
.ws-pfeil svg { width: 100%; height: 100%; }
/* Die drei Karten des Opfertier-Strangs */
.zg-raster { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.1rem; margin-top: 1.4rem; }
.zg-karte {
padding: 1.3rem 1.4rem; border-radius: 16px; background: #fff;
border: 1px solid rgba(30, 91, 69, .14);
}
.zg-karte.platzhalter { background: rgba(192, 160, 80, .06); border-style: dashed; }
/* Am Strangende stehen jetzt ZWEI andere Wege statt einem. */
.kreuz-liste { display: grid; gap: .9rem; margin-top: 1rem; }
.kreuz-liste .kreuz-karte { margin: 0; }
.kreuz-liste h3 { margin: 0 0 .3rem; font-family: Fraunces, Georgia, serif; font-size: 1.25rem; }
@media (max-width: 760px) {
/* Die dritte Zeile behielt ihren Erklaersatz, waehrend die zwei darueber
ihren verloren haben — dadurch war ausgerechnet der kleinste Weg der
hoechste Kasten. Am Handy tragen alle drei nur Titel und Zahl, die
Rangfolge steht dann in der Reihenfolge. */
.wahl-schmal { padding: .7rem .9rem; gap: .85rem; }
.ws-text > span { display: none; }
.ws-text > b { font-size: 1.05rem; }
.ws-zahl { font-size: .74rem; padding: .22rem .5rem; }
.zg-raster { grid-template-columns: 1fr; gap: .8rem; }
}
/* ---------- 9 · Auswahl bleibt stehen (24.08.) ---------- */
/* Die laufende Karte wird markiert statt die anderen zu verstecken. */
.wahl-karte.aktiv, .wahl-schmal.aktiv {
border-color: #1E5B45;
box-shadow: 0 0 0 2px rgba(30, 91, 69, .18);
}
.wahl-karte.aktiv .wk-los::after,
.wahl-schmal.aktiv .ws-zahl::after {
content: " · läuft gerade";
font-size: .78em; opacity: .8;
}
.wahl-karte.aktiv .wk-los { background: #143f31; }
/* Der eine Knopf im Hero, der nach unten zur Auswahl fuehrt. */
.hero2-los { display: inline-block; margin-top: 1.1rem; }
/* ---------- 10 · Auswahl am Handy kompakt (24.08.) ---------- */
/* Seit die Auswahl stehen bleibt, kostet sie am Handy Platz: der erste Betrag
rutschte von Bildschirm 5,3 auf 6,4. Am Rechner ist genug Raum fuer die
grossen Karten — dort bleibt alles wie es ist. Am Handy werden daraus
Zeilen mit kleinem Bild, so wie die dritte Zeile ohnehin schon aussieht. */
@media (max-width: 760px) {
.wahl-karte {
flex-direction: row; align-items: center; gap: .85rem;
padding: .7rem .9rem;
}
.wk-bild {
flex: none; width: 68px; height: 68px;
aspect-ratio: auto; border-radius: 10px;
}
.wk-text { flex: 1 1 auto; min-width: 0; padding: 0; }
.wk-text b { font-size: 1.05rem; }
/* Der Satz erklaert am Rechner den Weg; in der Zeile ist dafuer kein Platz,
und der Weg selbst erklaert sich gleich darunter ausfuehrlich. */
.wk-satz { display: none; }
.wk-zahl { margin-top: .25rem; font-size: .74rem; padding: .22rem .5rem; }
/* Aus dem breiten Knopf wird ein Pfeil, die ganze Zeile ist ja anklickbar. */
.wk-los {
flex: none; margin: 0; padding: 0;
width: 30px; height: 30px; border-radius: 50%;
font-size: 0; position: relative;
}
.wk-los::before {
content: ""; position: absolute; left: 10px; top: 9px;
width: 8px; height: 8px;
border-right: 2px solid currentColor; border-top: 2px solid currentColor;
transform: rotate(45deg);
}
.wahl-karte.aktiv .wk-los::after { content: none; }
/* Die laufende Zeile bekommt links einen Balken statt der Beschriftung. */
.wahl-karte.aktiv, .wahl-schmal.aktiv { border-left: 4px solid #1E5B45; }
}
/* ---------- 11 · Handy-Feinschliff (25.08.) ---------- */
@media (max-width: 760px) {
/* Die dritte Zeile brach zweizeilig um, weil Preis und Pfeil ihr die
Breite nahmen — dadurch war ausgerechnet der kleinste Weg der unruhigste
Kasten. Jetzt derselbe Aufbau wie bei den zwei Karten: Titel oben,
Preis darunter. */
/* Der Preis bleibt in DERSELBEN Zeile — ihn darunter zu setzen machte die
Zeile 110 px hoch und damit hoeher als die zwei Karten darueber, also
genau verkehrt herum. Es passt: Titel 160 px + Preis 110 px + Pfeil 20 px
+ Abstaende sind rund 315 px von 345 verfuegbaren. */
.wahl-schmal { flex-wrap: nowrap; align-items: center; }
.ws-text { flex: 0 1 auto; min-width: 0; }
.ws-text > b { white-space: nowrap; }
/* Ohne diesen Abstand klebt der Preis am Titel, und der Pfeil steht
irgendwo dazwischen statt am rechten Rand. */
.ws-zahl { margin-left: .7rem; }
.ws-pfeil { margin-left: auto; }
/* Der Haken fuer die Widmung war 28 px gross. Die ganze Zeile schaltet ihn
zwar mit, aber ein Kaestchen, das man mit dem Daumen kaum trifft, sieht
aus wie ein Fehler. Die Seite soll auch fuer aeltere Leute bequem sein. */
.dn-note input[type="checkbox"] {
width: 24px; height: 24px; flex: none;
margin-right: .55rem;
accent-color: #1E5B45;
}
.dn-note { display: flex; align-items: flex-start; gap: .2rem; padding: .5rem 0; }
}
/* ---------------------------------------------------------------------------
Bautagebuch ohne Eintraege (26.08.2026)
Die drei erfundenen Beispieleintraege sind aus data.js raus. Damit die
Sektion nicht als Ueberschrift mit leerem Kasten dasteht, setzt
entwurf-a.js einen Wartehinweis. Bewusst ruhig gehalten und NICHT als
gestrichelter Platzhalter-Kasten (.ph): ein leeres Bautagebuch ist hier
kein fehlendes Bauteil, sondern der ehrliche Zustand.
--------------------------------------------------------------------------- */
.feed-wartet {
grid-column: 1 / -1;
max-width: 46ch;
margin: .4rem auto 0;
padding: 1.5rem 1.3rem;
border: 1px solid var(--line);
border-radius: 12px;
background: var(--sand);
color: var(--mut);
font: italic 400 1rem/1.7 var(--serif);
text-align: center;
}
/* ---------------------------------------------------------------------------
Bilderfaecher: Kartenbreite begrenzen (26.08.2026)
Die fuenf echten Baufotos sind QUERformat (1000x467, Seitenverhaeltnis 2,14).
Alle bisherigen Faecherbilder sind Hochformat: 0,47 (Paketfotos) und 0,75
(Beispielfotos). galerie-klein.js rechnet die Kartenbreite aus dem echten
Seitenverhaeltnis (`h * naturalWidth / naturalHeight`) und schreibt sie
inline. Gemessen am 26.08.: Karten zwischen 101 px und 463 px, Faktor 4,58
bei 638 px Buehnenbreite. Auf dem Handy lief die breite Karte ueber den
Rand, die Karten dahinter standen schief darunter heraus.
`max-width` schlaegt die Inline-Breite, ohne dass am Skript etwas geaendert
werden muss. `object-fit: cover` steht schon in galerie-klein.css, das Bild
fuellt die schmalere Karte also von selbst.
BEWUSST KEIN `contain`: die Komponente vermeidet Fuellraender absichtlich,
siehe Kommentar in galerie-klein.css.
Die vier Querformate werden dadurch links und rechts beschnitten. Wenn ein
Motiv dabei etwas Wichtiges verliert, gehoert das Bild zugeschnitten, nicht
diese Regel gelockert.
--------------------------------------------------------------------------- */
.kg-karte {
max-width: calc(var(--kg-hoehe, 9rem) * 1.35);
}
/* ---------------------------------------------------------------------------
Dritter Weg: drei Tiere statt einem (27.08.2026)
Frueher standen dort zwei feste Kaesten fuer EIN Opfertier. Jetzt rendert
pakete.js eine Karte je Tier aus data.js. Zwei neue Zeilen brauchen Stil:
die Familienzahl unter dem Preis, und der Fall, dass sie noch fehlt.
--------------------------------------------------------------------------- */
.zg-wer {
display: block;
font: 400 .95rem/1.55 var(--serif);
color: var(--tinte);
padding: .1rem 0 .6rem;
}
.zg-wer b { font-weight: 700; }
/* Fehlende Angabe wird als solche gezeigt, nicht kaschiert. Gleiche Haltung
wie beim leeren Bautagebuch: lieber offen warten als etwas behaupten. */
.zg-offen {
font-style: italic;
color: var(--mut);
}
.zg-hinweis {
max-width: 60ch;
margin: 1.1rem auto 1.6rem;
text-align: center;
font: italic 400 .98rem/1.65 var(--serif);
color: var(--mut);
}
/* Preis auf der Tierkarte war unlesbar (27.08.2026).
`.pk-zahl b` traegt `color: var(--ivory)` und `.pk-zahl span` ein helles
Cremeweiss — beides ist fuer die DUNKLE Kartenvariante `.pk-preis` gemacht.
Die Tierkarten sind weiss, dadurch stand die wichtigste Zahl der Karte
nahezu unsichtbar da. Aufgefallen erst auf dem Bildschirmfoto, nicht im DOM:
die Zahl war vorhanden und messbar, nur eben nicht zu sehen. */
.zg-karte .pk-zahl b { color: var(--palm-deep); }
.zg-karte .pk-zahl span { color: var(--mut); }