und keine Ueberschrift: es steht in der Gliederung nichts, es ist
ein Etikett. Farbe ist --lq-kompass-tief, nicht --lq-kompass — hier traegt
die Akzentfarbe Text.
---------------------------------------------------------------------------- */
.lq-marke {
font-family: var(--lq-schrift-fest);
font-size: .75rem;
text-transform: uppercase;
letter-spacing: .12em;
color: var(--lq-kompass-tief);
margin-bottom: .6rem;
display: flex;
align-items: center;
gap: .6rem;
}
/* Der Strich hinter der Marke laeuft aus wie eine Wegmarkierung. */
.lq-marke::after {
content: "";
flex: 0 1 3.5rem;
height: 0;
border-top: 1px dashed currentColor;
opacity: .55;
}
/* Auf dunklem Grund: das Terrakotta hat dort keinen Kontrast mehr. */
.lq-marke-hell { color: #e8c3a8; }
/* ---- Der gestrichelte Weg zwischen zwei Abschnitten ------------------------
Er macht aus einer Folge von Kaesten eine Route. Ein leeres
mit
aria-hidden, weil es nichts ist, was jemand vorgelesen bekommen will.
background-size "auto 100%" haelt das Seitenverhaeltnis der SVG fest, die
Hoehe des Elements bestimmt also die Breite. Auf schmalen Schirmen ragt der
Weg damit ueber den Rand hinaus und wird beschnitten — das ist gewollt: ein
Weg, der am Bildrand weitergeht, sieht richtiger aus als einer, der auf 200
Pixel gestaucht wurde.
---------------------------------------------------------------------------- */
.lq-wegstrich {
height: 4.5rem;
background: url("/img/wegstrich.svg") no-repeat center center;
background-size: auto 100%;
}
@media (max-width: 575.98px) {
.lq-wegstrich { height: 3rem; }
}
/* ---- Die Kartennadel -------------------------------------------------------
Vor jedem Ortsnamen — in der Kachel und in der Ortsliste. Aus einem
Randradius gebaut statt aus einer Grafik: eine Nadel ist ein Kreis mit einer
Spitze, und dafuer laedt niemand eine Datei.
---------------------------------------------------------------------------- */
.lq-nadel {
display: inline-block;
width: .55rem;
height: .55rem;
margin-right: .45rem;
background: var(--lq-kompass);
border-radius: 50% 50% 50% 0;
transform: rotate(-45deg);
flex: 0 0 auto;
}
/* baseline und nicht center: ein langer Ortsname bricht auf zwei Zeilen um, und
eine mittig ausgerichtete Nadel saesse dann zwischen den Zeilen statt vor dem
Namen. */
.lq-kachel-ort { display: flex; align-items: baseline; }
/* ---- Held ------------------------------------------------------------------ */
/* Die Kompassrose sitzt ueber der unteren linken Ecke des Heldenbildes und
ragt bewusst darueber hinaus. Auf dem Handy ist sie weg: dort ist das Bild
halb so gross, und ein Siegel, das ein Viertel davon verdeckt, ist kein
Siegel mehr, sondern ein Fleck.
Es ist img/logo.svg, dieselbe Datei wie die Marke in der Kopfzeile — nur
gross. Der Schatten liegt deshalb als filter am Bild und nicht im SVG: eine
Rose mit eingebautem Schatten koennte in der Kopfzeile nicht stehen. */
.lq-heldbild { position: relative; }
.lq-kompassrose {
position: absolute;
left: -1.25rem;
bottom: -1.25rem;
filter: drop-shadow(0 6px 16px rgba(18, 49, 74, .18));
}
@media (max-width: 575.98px) {
.lq-kompassrose { display: none; }
}
/* Die drei Zusagen unter dem Knopf: eine Zeile, drei Worte, durch Wegpunkte
getrennt. Sie beantworten die Einwaende, die zwischen dem Knopf und dem
Klick stehen — laenger als drei Worte waeren sie eine Aufzaehlung, die man
liest statt ueberfliegt. */
.lq-versprechen {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-wrap: wrap;
align-items: center;
gap: .35rem .9rem;
font-family: var(--lq-schrift-fest);
font-size: .8125rem;
letter-spacing: .02em;
color: var(--lq-text-leise);
}
.lq-versprechen li { display: flex; align-items: center; gap: .9rem; }
.lq-versprechen li + li::before {
content: "";
width: .3rem;
height: .3rem;
border-radius: 50%;
background: var(--lq-kompass);
}
/* Die Ortszeile im Held: "Schon spielbar in: Walsrode, Lueneburg, ...".
Getrennt wird ueber den Abstand und nicht ueber ein Zeichen im Markup — ein
Trennpunkt im Text ist Text, den ein Screenreader mitspricht. */
.lq-orte-kurz {
display: flex;
flex-wrap: wrap;
align-items: baseline;
gap: .3rem .75rem;
font-size: .9375rem;
color: var(--lq-text-leise);
}
.lq-orte-kurz > span { font-weight: 600; }
.lq-orte-kurz a { text-decoration: none; border-bottom: 1px dashed var(--lq-linie); }
.lq-orte-kurz a:hover { border-bottom-color: var(--lq-see); }
/* ---- Das dunkle Band -------------------------------------------------------
"Jeder Ort hat eine Geschichte." Der einzige Abschnitt der Seite auf dunklem
Grund, und das ist seine Aufgabe: er teilt die Seite in ein Oben (der Held)
und ein Unten (das Angebot) und markiert dazwischen, was hier eigentlich
verkauft wird.
---------------------------------------------------------------------------- */
.lq-nacht {
background: var(--lq-tief);
color: #dce7ef;
}
.lq-nacht h2, .lq-nacht h3 { color: #fff; }
.lq-nacht p { color: #b9cddb; }
.lq-nacht-kopf { max-width: 46ch; }
.lq-nacht-kopf h2 { font-size: clamp(1.75rem, 1.3rem + 1.8vw, 2.6rem); }
.lq-nacht-kopf p { font-size: 1.05rem; margin-bottom: 0; }
/* Die drei Sorten Geschichte. Kein Rahmen und kein Hintergrund: sie sind
Aussagen und keine Knoepfe — es gibt keine Kategorie an einer Rally, nach
der man hier filtern koennte, und eine Kachel, die aussieht wie ein Link,
verspricht genau das. */
.lq-sorte { padding-top: 1.25rem; border-top: 1px solid rgba(255, 255, 255, .18); }
.lq-sorte h3 { font-size: 1.25rem; margin: .85rem 0 .4rem; }
.lq-sorte p { margin-bottom: 0; font-size: .9375rem; }
.lq-sorte .lq-zeichen { color: #e0a06d; }
/* ---- Die Zeichen ----------------------------------------------------------- */
.lq-zeichen {
display: block;
width: 1.75rem;
height: 1.75rem;
color: var(--lq-kompass-tief);
}
/* ---- Die Ortsliste ---------------------------------------------------------
Die Karte in Textform. Jeder Eintrag ist ein echter Link — das ist der
zweite Grund fuer diese Liste: sie ist neben den Kacheln der einzige Weg,
auf dem ein Crawler zu einer Rally-Seite kommt.
---------------------------------------------------------------------------- */
.lq-ortliste {
list-style: none;
margin: 0 0 1.25rem;
padding: 0;
display: grid;
gap: .25rem;
grid-template-columns: 1fr;
}
@media (min-width: 576px) {
.lq-ortliste { grid-template-columns: repeat(2, 1fr); column-gap: 1.5rem; }
}
.lq-ortliste a {
display: flex;
align-items: center;
gap: .5rem;
padding: .5rem .25rem;
color: var(--lq-text);
text-decoration: none;
border-bottom: 1px dashed var(--lq-linie);
}
.lq-ortliste a:hover, .lq-ortliste a:focus-visible {
color: var(--lq-see);
border-bottom-style: solid;
border-bottom-color: var(--lq-see);
}
.lq-ortliste-name { font-weight: 600; }
/* Die Koordinate wandert ganz nach rechts und wird als Erstes weggelassen,
wenn der Platz eng wird: sie ist Zierde mit Wahrheitsgehalt, nicht Inhalt. */
.lq-ortliste-koord {
margin-left: auto;
font-family: var(--lq-schrift-fest);
font-size: .75rem;
color: var(--lq-text-leise);
white-space: nowrap;
}
.lq-ortliste-zahl {
font-size: .75rem;
color: var(--lq-text-leise);
}
@media (max-width: 399.98px) {
.lq-ortliste-koord { display: none; }
}
.lq-ortliste-fuss { font-size: .9375rem; color: var(--lq-text-leise); }
/* ---- Fuer wen -------------------------------------------------------------- */
.lq-zielgruppe { border-top: 2px solid var(--lq-kompass); padding-top: 1rem; }
.lq-zielgruppe h3 { font-size: 1.1rem; margin: .75rem 0 .35rem; }
.lq-zielgruppe p { color: var(--lq-text-leise); font-size: .9375rem; margin-bottom: 0; }
/* ---- Der Anbieterstreifen --------------------------------------------------
Dunkel und ohne gruenen Knopf. Er ist die Tuer in die andere Zielgruppe, und
die soll man als solche erkennen, bevor man sie oeffnet: wer hier einen
Ausflug sucht, soll nicht versehentlich in einer Geschaeftsanbahnung landen.
---------------------------------------------------------------------------- */
.lq-anbieterband {
background: var(--lq-tief);
color: #cddbe6;
border-radius: var(--lq-radius);
padding: clamp(1.5rem, 1rem + 2vw, 2.5rem);
}
.lq-anbieterband h2 { color: #fff; }
.lq-anbieterband > :last-child { margin-bottom: 0; }