/* ───────────────────────────────────────────────────────────────── Karten Ein Raster, dessen Spaltenzahl aus dem Editor kommt. Auf schmalen Schirmen bricht es auf eine Spalte - zwei nebeneinander sind bei 380 Pixeln keine zwei Karten mehr, sondern zwei Streifen. ───────────────────────────────────────────────────────────────── */ .lt-karten{padding:64px 0} .lt-karten__kopf{margin-bottom:32px;max-width:44rem} .lt-karten__titel{font-family:var(--schrift_titel); font-size:clamp(1.6rem,3vw,2.4rem);line-height:1.15;margin:0} .lt-karten__sub{margin:.5em 0 0;font-size:1.05rem;line-height:1.6; color:color-mix(in srgb, var(--text) 72%, transparent)} /* Die Spaltenzahl steht als Attribut am Raster, nicht als Klasse: So braucht eine weitere Stufe keine neue Regel, nur einen weiteren Eintrag im Manifest. */ /* Flex statt Grid. Grid richtet SPALTEN aus, nicht Elemente: Bei vier Spalten und drei Karten steht die vierte Spalte leer, und die Karten kleben links. justify-content hilft dort nicht, weil 1fr-Spalten den Platz ohnehin aufbrauchen. Flex mit Umbruch und fester Kartenbreite löst es: Eine unvollständige Zeile wird zentriert - dieselbe Wirkung wie justify-content-center in Bootstrap. Die Breite kommt aus der Spaltenzahl: 100 % geteilt durch die Zahl, abzüglich der Lücken dazwischen. */ /* Grid statt Flex - zurück, aber anders. Flex war der Versuch, unvollständige Zeilen zu zentrieren. Das klappte, kostete aber die gleiche Höhe: Grid streckt seine Zellen von selbst, Flex braucht align-items - und mein height:100% machte es vollends kaputt, weil eine berechnete Höhe die Streckung aufhebt. Grid kann beides, wenn die Spalten eine feste Breite haben statt 1fr: Dann bleibt Platz übrig, und justify-content verteilt ihn. Bei voller Zeile füllen die Karten die Breite, bei unvollständiger stehen sie mittig. */ .lt-karten__raster{ display:grid; gap:22px; justify-content:center; align-items:stretch; } /* minmax(0,340px): Die Karte wächst bis 340 Pixel und schrumpft darunter mit. Ohne die 0 als Untergrenze bricht ein langes Wort die Spalte auf. */ .lt-karten__raster[data-spalten="2"]{ grid-template-columns:repeat(2,minmax(0,340px))} .lt-karten__raster[data-spalten="3"]{ grid-template-columns:repeat(3,minmax(0,340px))} .lt-karten__raster[data-spalten="4"]{ grid-template-columns:repeat(4,minmax(0,340px))} @media(max-width:900px){ .lt-karten__raster[data-spalten="3"], .lt-karten__raster[data-spalten="4"]{ grid-template-columns:repeat(2,minmax(0,340px))} } @media(max-width:560px){ .lt-karten__raster{grid-template-columns:minmax(0,1fr) !important} .lt-karten{padding:44px 0} /* ── Überschrift und Text mitzentrieren ────────────────────── Karten mit Symbol stehen mittig - das bleibt so, nebeneinander wie untereinander. Nur der Kopf darüber blieb links stehen. Nebeneinander fällt das nicht auf: Die Überschrift links, darunter eine Reihe Karten - zwei Achsen, die sich nicht berühren. Untereinander liegt der Kopf direkt über der ersten Karte, und dann sieht der Versatz nach Fehler aus. Also zieht der Kopf mit. Nur bei Karten MIT Symbol - ohne bleibt alles links, und dann muss der Kopf es auch. */ .lt-karten:has(.lt-karte__symbol) .lt-karten__kopf{ text-align:center;margin-inline:auto} } /* ── Eine Karte ──────────────────────────────────────────────── Eine echte Karte: Fläche, Rundung, Innenabstand. Ohne sie standen die Einträge als freie Textspalten nebeneinander - bei drei gleich langen Texten sah das ordentlich aus, bei unterschiedlichen wie ein Umbruchunfall. Die Fläche fasst zusammen, was zusammengehört, und macht die Gruppe auf einen Blick zählbar. --flaeche statt einer eigenen Farbe: Sie sitzt zwischen Grund und Text und funktioniert in beiden Farbschemata. */ .lt-karte-el{ display:flex; flex-direction:column; gap:9px; padding:26px 24px; border-radius:var(--radius); /* Nur halb so dunkel wie --flaeche. --flaeche war zu kräftig: Bei drei Karten nebeneinander verschwimmt das zu einem grauen Band, in dem die einzelne Karte untergeht. Auf weißem Grund kann eine Karte nicht heller werden - dort trägt der Schatten die Abgrenzung, und die Fläche darf fast verschwinden. Im dunklen Schema hellt derselbe Ausdruck auf, weil --flaeche dort heller ist als --grund. */ background:color-mix(in srgb, var(--flaeche) 45%, var(--grund)); /* Eine feine Linie in der Akzentfarbe. 0,75 px statt 1: Bei einem vollen Pixel wird die Umrandung zum Merkmal der Karte, hier bleibt sie eine Kante. Auf Bildschirmen mit doppelter Auflösung ist sie exakt darstellbar, auf einfachen rechnet der Browser sie auf einen Pixel mit weniger Deckkraft - was genau der gewünschte Eindruck ist. 55 % Akzent: Voll gesetzt umrandet sie bei einem kräftigen Ton drei Karten so laut, dass der Inhalt dahinter zurücktritt. */ border:.75px solid color-mix(in srgb, var(--akzent) 55%, transparent); /* Der mittlere Schatten statt des kleinen: Er trägt jetzt die Abgrenzung, weil die Fläche fast verschwunden ist. */ box-shadow:var(--schatten, 0 2px 4px rgba(15,20,28,.06), 0 3px 8px rgba(15,20,28,.07)); transition:transform .18s ease-out, box-shadow .18s ease-out, border-color .18s ease-out; } /* Eine Karte MIT Knopf hebt sich beim Überfahren leicht an - sie ist anklickbar, auch wenn nur der Knopf es ist. Karten ohne Knopf bleiben still: Eine Bewegung ohne Ziel ist eine Behauptung. */ .lt-karte-el:has(.lt-karte__btn):hover{ transform:translateY(-2px); /* Die Linie zieht mit an - so gehört die Bewegung zur Karte und nicht nur zum Schatten. */ border-color:var(--akzent); box-shadow:var(--schatten, 0 2px 4px rgba(15,20,28,.06), 0 8px 24px rgba(15,20,28,.10)); } @media(prefers-reduced-motion:reduce){ .lt-karte-el{transition:none} .lt-karte-el:has(.lt-karte__btn):hover{transform:none} } .lt-karte-el h3{font-family:var(--schrift_titel); font-size:1.15rem;line-height:1.3;margin:0} .lt-karte__unter{margin:0;font-size:.86rem;font-weight:600; color:var(--akzent)} /* Der Text kommt aus dem Richtext-Editor und kann Absätze, Listen und Links enthalten - die Regeln gelten deshalb für den Inhalt, nicht nur für das Element. */ .lt-karte__text{font-size:.94rem;line-height:1.65; color:color-mix(in srgb, var(--text) 78%, transparent)} .lt-karte__text p{margin:0 0 .6em} .lt-karte__text p:last-child{margin-bottom:0} .lt-karte__text ul{margin:0 0 .6em;padding-left:1.2em} .lt-karte__text a{color:var(--link, var(--akzent)); font-weight:var(--link-gewicht, inherit);text-decoration:underline; text-underline-offset:2px} .lt-karte__text strong{color:var(--text)} /* Der Knopf sitzt unten - bei unterschiedlich langen Texten fluchten die Knöpfe sonst nicht, und die Karten sehen ungleich hoch aus. margin-top:auto verlangt, dass die Karte die volle Höhe der Rasterzelle einnimmt; deshalb height:100% weiter oben. */ .lt-karte-el{height:100%} /* Der Knopf sitzt UNTEN. margin-top:auto schiebt ihn ans Ende der Karte - so stehen die Knöpfe mehrerer Karten auf einer Linie, auch wenn die Texte verschieden lang sind. Ohne das folgt er direkt dem Text und hängt bei jeder Karte woanders. */ .lt-karte__btn{ align-self:flex-start;margin-top:auto;padding:9px 18px; font-size:.86rem} :where(.lt-karten.lt-block--aus-mitte) .lt-karte__btn{align-self:center} :where(.lt-karten.lt-block--aus-rechts) .lt-karte__btn{align-self:flex-end} /* Bei Zeiten und Zahlen kein Knopf-Abstand nach oben - dort steht er direkt am Inhalt, nicht am Kartenende. */ .lt-karten--zeiten .lt-karte__btn, .lt-karten--zahlen .lt-karte__btn{margin-top:6px} /* ── Symbol ─────────────────────────────────────────────────── Mittig über der Überschrift, bei jeder Variante. Ein Kreis statt eines abgerundeten Quadrats: Er nimmt die Eckenrundung der Seite nicht mit und bleibt dadurch bei "kantig" wie bei "rund" derselbe ruhige Punkt über dem Text. */ .lt-karte__symbol{display:flex;align-items:center;justify-content:center; width:68px;height:68px;border-radius:50%; background:color-mix(in srgb, var(--akzent) 12%, transparent); color:var(--akzent);flex:0 0 auto; /* Negativer Abstand nach unten. Die Karte hat gap:9px zwischen ihren Kindern, und die Überschrift bringt zusätzlich Zeilenluft mit. Zusammen standen Symbol und Titel weiter auseinander als Titel und Text - was die Zuordnung umkehrt: Das Symbol gehört zur Überschrift, nicht zum Abstand darüber. */ margin:0 auto -2px} .lt-karte__symbol svg{width:32px;height:32px} /* Font Awesome statt Strichzeichnung (siehe includes/layout_symbole.php): Eine Schrift wird über die Größe gesteuert, nicht über width. 28 px wirken neben den 32-px-Strichen gleich groß - gefüllte Formen tragen mehr Gewicht. */ .lt-karte__symbol i{font-size:28px;line-height:1} /* Mit Symbol steht die ganze Karte mittig - ein zentriertes Zeichen über linksbündigem Text sieht aus wie ein Versehen. */ .lt-karte-el:has(.lt-karte__symbol){align-items:center;text-align:center} .lt-karte-el:has(.lt-karte__symbol) .lt-karte__btn{align-self:center} /* ── Team ─────────────────────────────────────────────────────── */ /* ── Bild ───────────────────────────────────────────────────── Füllt die Karte bis an den Rand - ein Bild mit Abstand IN einem Kasten wirkt wie ein Bild in einem Rahmen in einem Rahmen. Gilt für jede Variante, nicht nur fürs Team: Wer bei einer Leistung ein Foto statt eines Symbols nimmt, will es genauso sehen. */ .lt-karte-el:has(.lt-karte__foto){padding:0 0 24px;overflow:hidden} .lt-karte-el:has(.lt-karte__foto) > *:not(.lt-karte__foto){ margin-left:24px;margin-right:24px} .lt-karte__foto{display:block;width:100%;object-fit:cover;margin-bottom:16px; /* 4:3 statt 4:5 - ein Hochformat ist beim Team richtig, bei einer Leistung ungewöhnlich. Das Team bekommt seins weiter unten. */ aspect-ratio:4/3} .lt-karten--team .lt-karte__foto{aspect-ratio:4/5} /* Beim Team gehört die Rolle unter den Namen und nicht in die Akzentfarbe - sie ist eine Angabe, keine Hervorhebung. */ .lt-karten--team .lt-karte__unter{color:var(--text);opacity:.65; font-weight:400} /* ── Öffnungszeiten ─────────────────────────────────────────── Tag links, Zeit rechts - wie an einer Ladentür. Deshalb hier ausnahmsweise eine Trennlinie: Sie führt das Auge über die Lücke. */ /* Öffnungszeiten sind KEINE Karten, sondern eine Tabelle - Tag links, Zeit rechts, wie an einer Ladentür. Sieben Kästen untereinander wären sieben Kästen zu viel. Die ganze Gruppe steht dafür auf einer gemeinsamen Fläche. */ .lt-karten--zeiten .lt-karten__raster{display:block;gap:0;max-width:34rem; padding:8px 24px;border-radius:var(--radius);background:var(--flaeche); border:.75px solid color-mix(in srgb, var(--akzent) 55%, transparent); box-shadow:var(--schatten-klein, 0 1px 2px rgba(15,20,28,.06))} .lt-karten--zeiten .lt-karte-el{flex-direction:row;align-items:baseline; gap:12px;padding:13px 0;background:none;box-shadow:none;border-radius:0; border-bottom:1px solid color-mix(in srgb, var(--text) 12%, transparent)} .lt-karten--zeiten .lt-karte-el:last-child{border-bottom:0} .lt-karten--zeiten h3{flex:1;font-size:1rem;font-family:var(--schrift_text)} .lt-karten--zeiten .lt-karte__unter{color:var(--text);font-weight:600; font-variant-numeric:tabular-nums} .lt-karten--zeiten .lt-karte__text{flex:0 0 100%;font-size:.84rem} /* ── Zahlen ───────────────────────────────────────────────────── */ /* Die Schriftgröße ist für Ziffern gedacht. Steht dort trotzdem ein Wort - "Inhabergeführt", "Hohen Neuendorf & Berlin" -, lief es bisher über den Kartenrand in die Nachbarkarte. Ein Modul soll das aushalten, statt sich auf gute Eingaben zu verlassen: Der Text bricht jetzt um, notfalls mitten im Wort. Zu groß sieht er dann immer noch aus, aber nichts liegt mehr übereinander. */ .lt-karte__zahl{font-family:var(--schrift_titel); font-size:clamp(2.4rem,5vw,3.6rem);line-height:1.05;margin:0; color:var(--akzent);font-variant-numeric:tabular-nums; max-width:100%;min-width:0;overflow-wrap:anywhere;hyphens:auto} /* Zahlen stehen mittig und brauchen weniger Höhe - es sind zwei Zeilen, keine Beschreibung. */ .lt-karten--zahlen .lt-karte-el{gap:4px;padding:26px 20px; align-items:center;text-align:center} /* ── Ausrichtung ──────────────────────────────────────────────── */ :where(.lt-karten.lt-block--aus-mitte) .lt-karten__kopf{margin-left:auto; margin-right:auto;text-align:center} :where(.lt-karten.lt-block--aus-mitte) .lt-karte-el{align-items:center; text-align:center} :where(.lt-karten.lt-block--aus-rechts) .lt-karten__kopf{margin-left:auto; text-align:right} :where(.lt-karten.lt-block--aus-rechts) .lt-karte-el{align-items:flex-end; text-align:right} /* Zeiten bleiben immer links - eine zentrierte Öffnungszeitentabelle ist nicht zu lesen. */ .lt-karten--zeiten .lt-karte-el{align-items:baseline !important; text-align:left !important}