/* ===========================================================================
PMA Service Group — Landingpage-Schicht "SOMBRA"
backend/static/css/site.css
Laedt NACH tokens/base/components/pages und NUR auf der oeffentlichen
Website. Portal, /owner und /ops haengen weiter an "JUNTA"; diese Datei
fasst deren Schichten nicht an, sie legt sich darueber.
Der Layername `site` steht nicht in der Schichtliste von tokens.css und wird
deshalb hinten angehaengt — er gewinnt gegen `components`, `pages`,
`utilities` und `tenant`. Die TOKENS stehen dagegen bewusst in `@layer
tokens`, damit ein Mandanten-Override in `@layer tenant` sie weiterhin
schlagen kann (White-Label-Naht bleibt intakt).
---------------------------------------------------------------------------
DIE IDEE IN EINEM SATZ
Mittags in Miami ist die Welt entweder gleissend hell oder hart blau
verschattet, und die Grenze dazwischen ist ein gerader Schnitt, kein
Verlauf. Die Seite hat deshalb genau zwei Materialien — Glast und Schatten —
und jeder Text, der auf einem Foto liegt, liegt in einem DECKENDEN,
hartkantigen Schattenblock, nie in einem transluzenten Verlauf. Das loest
die Gestaltungsfrage und die Technikfrage zugleich: der Ort ist erkennbar,
und der Kontrast ueber einem Handyfoto, dessen Helligkeit niemand
kontrolliert, ist garantiert.
DIE FUENF REGELN DIESER SCHICHT
1 SCHIENE Alles fluchtet an einer linken Schiene (--ln-rail), von der
Kopfzeile bis zum Fuss. Nur Fotos duerfen sie brechen und
randlos laufen. Nichts ist zentriert.
2 SCHATTEN Kein Verlauf ueber einem Foto. Text auf Bild sitzt in einer
deckenden Flaeche --ln-shade. `linear-gradient` kommt in
dieser Datei nicht vor.
3 GEWICHT Rhythmus entsteht aus Flaeche und Material, nicht aus
Karten. Bildabschnitte bekommen viewportbezogene Hoehen,
Textabschnitte wachsen mit ihrem Inhalt (Spanisch laeuft
~20 % laenger als Englisch — eine vh-Hoehe fuer Text
laeuft auf dem Telefon ueber). Nie zwei helle Textbahnen
desselben Materials hintereinander.
4 RADIUS Zwei Werte, beide tragen Information: `--ln-r-control` (6px)
fuer Eingabefelder und Chips, `999px` ausschliesslich fuer
die Primaeraktion. Fotos und Flaechen haben 0 — ein
geschnittener Fliesenstein hat keinen Radius.
5 SCHATTENWURF `box-shadow` mit Blur existiert hier nicht. Erhebung kommt
aus dem Materialwechsel. Die einzige Trennung zweier
benachbarter Flaechen ist eine 2px-Fuge in --ln-cement.
NICHT VORHANDEN, mit Absicht: Monospace, ALL-CAPS-Label ueber
Ueberschriften, Metastrings mit Mittelpunkt, Haarlinien als
Abschnittstrenner, "→" hinter Links, getoentes Fast-Schwarz.
=========================================================================== */
@layer tokens {
:root[data-surface="site"] {
/* --- Material --------------------------------------------------------
--ln-glare echtes Weiss. Auf einem Telefon in der Mittagssonne ist
Papierweiss mit schwarzer Tinte die einzige Kombination,
die ueberlebt; es ist ausserdem die Farbe frischer Fuge.
--ln-cement kuehles Fugengrau mit leichtem Gruenstich. Die zweite
Flaeche — und bewusst KEIN warmes Creme.
--ln-shade der Schattenwurf. Ein echt chromatisches Blauschwarz
(Farbton ~205 Grad), weil im Schatten der Himmel die
einzige Lichtquelle ist. Das ist die ausdrueckliche
Absage an getoentes Fast-Schwarz; #111 und #0B0B0B gibt
es in diesem System nicht.
--ln-ink echtes Schwarz. 21:1 auf Weiss.
--ln-azulejo das Gruen kubanischer Hydraulikfliese — das Material, das
PMA verlegt. Bewusst NICHT das WhatsApp-Gruen #25D366,
damit der Akzent als PMAs Farbe liest und nicht als
geliehenes Logo. Es ist derselbe Hexwert wie der Akzent
von Portal und Owner-Dashboard: vier Flaechen, ein Gruen.
Gemessene Kontraste (WCAG 2.1):
ink/glare 21.0 · ink/cement 16.6 · shade/glare 16.6 · shade/cement 13.1
ink-2/glare 7.1 · ink-2/cement 5.6
azulejo/glare 8.9 · azulejo/cement 7.0 · glare/azulejo 8.9
glare/shade 16.6 · on-shade-2/shade 11.1 · azulejo-lit/shade 9.0
edge/glare 4.7 · edge/cement 3.7 · edge-shade/shade 4.5 (1.4.11: >=3)
HARTE REGEL: --ln-azulejo auf --ln-shade misst 1.5:1 und ist dort fuer
Text und fuer Bedienelement-Grenzen VERBOTEN. Im Schattenfeld ist die
Primaeraktion mit --ln-glare gefuellt (16.6:1) — damit ist das
wichtigste Element der Seite der hellste Gegenstand im dunkelsten Feld.
------------------------------------------------------------------- */
--ln-glare: #FFFFFF;
--ln-cement: #E3E5E0;
--ln-shade: #072033;
--ln-ink: #000000;
--ln-ink-2: #4A5C57;
--ln-azulejo: #08534F;
--ln-azulejo-lit: #58D2BE;
--ln-on-shade: #FFFFFF;
--ln-on-shade-2: #C9D6D2;
--ln-edge: #5F7A73;
--ln-edge-shade: #6E8A84;
/* Die Tinte AUF dem Akzent und AUF der hellen Aktion im Schattenfeld.
Eigene Tokens, weil beides im Dunkelmodus kippt: dort ist der Akzent
hell (#37C9AB) und braucht dunkle Tinte, nicht weisse.
Gemessen hell: #FFFFFF auf #0C6B5E 6.40 · #072033 auf #FFFFFF 16.62
Gemessen dunkel: #04161F auf #37C9AB 8.87 · #04161F auf #EDF1F0 15.4 */
--ln-accent-ink: #FFFFFF;
--ln-accent-hover: #06423F;
--ln-cta-bg: #FFFFFF;
--ln-cta-ink: #072033;
--ln-cta-hover: #E3E5E0;
/* Fehlerfarbe des Formulars. Hell: 8.24:1 auf Weiss. Dunkel: 7.1:1 auf
dem dunklen Panelgrund. Farbe steht nie allein — der Fehlertext nennt
immer auch, was zu tun ist, und das Feld traegt aria-invalid. */
--ln-error: #A11212;
/* Gilt je Flaeche; die Bahnen setzen sie um (siehe .ln-band--shade). */
--ln-bg: var(--ln-glare);
--ln-fg: var(--ln-ink);
--ln-fg-2: var(--ln-ink-2);
--ln-accent: var(--ln-azulejo);
--ln-border: var(--ln-edge);
--ln-focus: var(--ln-azulejo);
/* --- Schrift ---------------------------------------------------------
Keine neue Schriftdatei. Die vorhandenen Subsets unter /static/fonts
tragen die Richtung; die Aenderung liegt in Groesse, Laufweite,
Schreibung und Ziffernsatz, nicht im Dateinamen.
Archivo 800 — Display. Nur drei Groessen, Satzschreibung, negative
Laufweite. Es ist das einzige Subset im Repo, das
`tnum` traegt — deshalb stehen dort die Zahlen, die
untereinander fluchten muessen (.ln-stat), und NICHT
in einer Monospace.
Source Sans 3 400/600 — Fliesstext, Formular, Navigation und die
Zahlen IM SATZ (.ln-num). Dieses Subset hat kein
`tnum`; das ist folgenlos, weil im Satz stehende
Ziffern nichts auszurichten haben.
IBM Plex Mono wird auf der Website nirgends benutzt. Die Datei bleibt
im Repo, weil die Ledger-Spalten im Portal noch daran haengen
(Migration Schritt 2, docs/DESIGN-LANDING.md §Migration). */
--ln-display: "Archivo", "Archivo Expanded", system-ui, sans-serif;
--ln-text: "Source Sans 3", system-ui, -apple-system, sans-serif;
/* Skala ~1.25 unten, ~1.4 oben; jeder clamp mit rem-Anteil, damit 200 %
Zoom funktioniert (WCAG 1.4.4). */
--ln-s-1: clamp(0.875rem, 0.845rem + 0.15vw, 0.9375rem);
--ln-s0: clamp(1.0625rem, 1.02rem + 0.22vw, 1.1875rem);
--ln-s1: clamp(1.25rem, 1.18rem + 0.35vw, 1.4375rem);
--ln-s2: clamp(1.5rem, 1.35rem + 0.75vw, 2rem);
--ln-s3: clamp(1.9rem, 1.45rem + 2.2vw, 3.25rem);
--ln-s4: clamp(2.6rem, 1.6rem + 4.6vw, 5.5rem);
/* --- Mass und Raum --------------------------------------------------- */
--ln-rail: clamp(20px, 4vw, 72px);
--ln-measure: 62ch;
--ln-1: 0.25rem; --ln-2: 0.5rem; --ln-3: 0.75rem;
--ln-4: 1rem; --ln-5: 1.5rem; --ln-6: 2.25rem;
--ln-7: 3.25rem; --ln-8: 4.5rem; --ln-9: 6.5rem;
--ln-joint: 2px;
--ln-r-control: 6px;
--ln-head-h: 56px;
--ln-thumb-h: 56px;
}
/* Dunkel. Keine Invertierung: eine eigene Tinte (#EDF1F0), und die
Schattenbahn wird HELLER als der Grund, damit die Bahnenfolge ihre
Abwechslung behaelt statt in einem einzigen Schwarz zu verschwinden.
Gemessen: ink/ground 16.2 · ink/band 11.8 · ink-2/ground 9.1 ·
accent/ground 8.9 · accent/band 6.5 · edge/ground 4.1. */
@media (prefers-color-scheme: dark) {
:root[data-surface="site"] {
--ln-glare: #04161F;
--ln-cement: #0A2531;
--ln-shade: #0F3245;
--ln-ink: #EDF1F0;
--ln-ink-2: #A8BAB6;
--ln-azulejo: #58D2BE;
--ln-azulejo-lit: #58D2BE;
--ln-on-shade: #EDF1F0;
--ln-on-shade-2: #A8BAB6;
--ln-edge: #5E7C84;
--ln-edge-shade: #5E7C84;
--ln-accent-ink: #04161F;
--ln-accent-hover: #7BE6D4;
--ln-cta-bg: #EDF1F0;
--ln-cta-ink: #04161F;
--ln-cta-hover: #FFFFFF;
--ln-error: #FF9A94;
}
}
}
@layer site {
/* =========================================================================
GRUND
========================================================================= */
[data-surface="site"] {
scroll-padding-block-start: calc(var(--ln-head-h) + var(--ln-4));
}
/* Auch das -Element: base.css faerbt es mit dem JUNTA-Grund, und die
Leinwandfarbe wird vom Wurzelelement uebernommen, nicht vom Body. */
[data-surface="site"] { background: var(--ln-glare); }
[data-surface="site"] body {
background: var(--ln-glare);
color: var(--ln-ink);
font-family: var(--ln-text);
font-size: var(--ln-s0);
line-height: 1.6;
letter-spacing: 0;
-webkit-font-smoothing: antialiased;
padding-block-end: 0;
}
/* Die Daumenleiste liegt fix ueber dem Fussende. Ohne diesen Puffer
verdeckt sie die letzte Zeile des Fusses. */
@media (max-width: 55.999rem) {
[data-surface="site"] body {
padding-block-end: calc(var(--ln-thumb-h) + env(safe-area-inset-bottom));
}
}
/* INVARIANTE. Auf dieser Seite gibt es keine Versalien-Auszeichnung — kein
Eyebrow, kein Label, keine Bildunterschrift, nicht einmal die Wortmarke.
JUNTA setzt an mehreren Stellen `text-transform: uppercase`; weil `@layer
site` nach `components` sortiert, genuegt hier eine Regel mit niedriger
Spezifitaet, um das fuer die ganze Flaeche abzuschalten. */
[data-surface="site"] body * { text-transform: none; }
[data-surface="site"] :focus-visible {
outline: 3px solid var(--ln-focus);
outline-offset: 2px;
}
[data-surface="site"] ::selection {
background: var(--ln-azulejo);
color: var(--ln-accent-ink);
}
[data-surface="site"] .u-skip {
position: absolute;
inset-block-start: 0;
inset-inline-start: 0;
z-index: 100;
background: var(--ln-shade);
color: var(--ln-on-shade);
padding: var(--ln-3) var(--ln-4);
border-radius: 0;
text-decoration: none;
}
/* =========================================================================
TYPOGRAFIE
Display nur an drei Stellen: Seitentitel, Abschnittsueberschrift,
Unterueberschrift. Sonst nirgends. Satzschreibung ueberall — es gibt auf
dieser Seite keine Versalien-Auszeichnung, auch nicht in der Wortmarke.
========================================================================= */
[data-surface="site"] .ln-display,
[data-surface="site"] h1,
[data-surface="site"] h2,
[data-surface="site"] h3 {
font-family: var(--ln-display);
font-weight: 800;
line-height: 1.02;
letter-spacing: -0.018em;
text-wrap: balance;
text-transform: none;
}
[data-surface="site"] h1 { font-size: var(--ln-s3); }
[data-surface="site"] h2 { font-size: var(--ln-s3); }
[data-surface="site"] h3 { font-size: var(--ln-s1); letter-spacing: -0.01em; line-height: 1.12; }
[data-surface="site"] p { max-inline-size: var(--ln-measure); }
/* ZAHLEN OHNE MONOSPACE — zwei Rollen, zwei Behandlungen.
.ln-num Zahlen IM SATZ: Lizenznummer, Telefonnummer. Sie laufen in der
Textschrift, halbfett und minimal gesperrt. Sie duerfen nicht
lauter sein als der Satz, in dem sie stehen — genau das ist der
Fehler, den eine Monospace an dieser Stelle macht.
.ln-stat Zahlen ALS FLAECHE: die drei Raten von 50/25/25, die Fakten
unter einem Vergleich. Display-Schnitt mit `tnum` (Archivo
traegt das Feature, Source Sans in diesem Subset nicht), damit
untereinander stehende Betraege fluchten. Das ist die einzige
Stelle, an der ueberhaupt Ziffern untereinander stehen. */
[data-surface="site"] .ln-num {
font-weight: 600;
letter-spacing: 0.012em;
font-variant-numeric: lining-nums;
}
[data-surface="site"] .ln-stat {
font-family: var(--ln-display);
font-weight: 800;
font-variant-numeric: tabular-nums lining-nums;
font-feature-settings: "tnum" 1;
letter-spacing: -0.01em;
font-size: var(--ln-s2);
line-height: 1;
}
[data-surface="site"] .ln-lead {
font-size: var(--ln-s1);
line-height: 1.45;
max-inline-size: 46ch;
}
[data-surface="site"] .ln-small {
font-size: var(--ln-s-1);
color: var(--ln-fg-2);
}
[data-surface="site"] a {
color: var(--ln-accent);
text-decoration-thickness: 1px;
text-underline-offset: 0.18em;
}
[data-surface="site"] a:hover { text-decoration-thickness: 3px; }
/* =========================================================================
BAHNEN. Jede Bahn ist randlos (100 %), der Inhalt sitzt in .ln-rail.
Bildbahnen bekommen viewportbezogene Hoehen, Textbahnen wachsen mit dem
Inhalt — deshalb `min-block-size`, nie `block-size`, bei allem, was Text
traegt (Regel 3).
========================================================================= */
[data-surface="site"] .ln-band {
background: var(--ln-bg);
color: var(--ln-fg);
padding-block: var(--ln-8);
}
[data-surface="site"] .ln-band--tight { padding-block: var(--ln-6); }
[data-surface="site"] .ln-band--tall { padding-block: var(--ln-9); }
[data-surface="site"] .ln-band--flush { padding-block: 0; }
/* Bahn, deren letztes Element randlos bis an die naechste Bahn stossen
soll (Leistungsraster, Vergleichsbilder). */
[data-surface="site"] .ln-band--edge-end { padding-block-end: 0; }
[data-surface="site"] .ln-band--glare { --ln-bg: var(--ln-glare); --ln-fg: var(--ln-ink); }
[data-surface="site"] .ln-band--cement { --ln-bg: var(--ln-cement); --ln-fg: var(--ln-ink); }
[data-surface="site"] .ln-band--shade {
--ln-bg: var(--ln-shade);
--ln-fg: var(--ln-on-shade);
--ln-fg-2: var(--ln-on-shade-2);
--ln-accent: var(--ln-azulejo-lit);
--ln-border: var(--ln-edge-shade);
--ln-focus: var(--ln-azulejo-lit);
}
[data-surface="site"] .ln-rail {
padding-inline: var(--ln-rail);
}
/* Abstand zwischen der Ueberschrift einer Bahn und dem, was darunter kommt.
Bewusst als eigene Regel statt als `gap` auf der Bahn: die randlosen
Elemente (Raster, Vergleichsbilder) duerfen kein Raster-Kind sein, sonst
verlieren sie ihre volle Breite. */
[data-surface="site"] .ln-grid,
[data-surface="site"] .ln-steps,
[data-surface="site"] .ln-ba {
margin-block-start: var(--ln-6);
}
[data-surface="site"] .ln-quotes { margin-block-start: var(--ln-7); }
[data-surface="site"] .ln-stack { display: grid; gap: var(--ln-5); justify-items: start; }
[data-surface="site"] .ln-stack--tight { display: grid; gap: var(--ln-3); justify-items: start; }
[data-surface="site"] .ln-row { display: flex; flex-wrap: wrap; gap: var(--ln-4); align-items: center; }
/* =========================================================================
KNOEPFE. Genau eine gefuellte Primaeraktion pro Viewport; alles andere ist
Ghost oder Textlink. Der Pillenradius ist ausschliesslich der
Primaeraktion vorbehalten: rund heisst "das ist das Ziel".
========================================================================= */
[data-surface="site"] .ln-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: var(--ln-2);
min-block-size: 52px;
padding-inline: var(--ln-5);
border: 2px solid transparent;
border-radius: 999px;
background: transparent;
color: var(--ln-fg);
font-family: var(--ln-text);
font-size: var(--ln-s0);
font-weight: 600;
line-height: 1.1;
text-align: center;
text-decoration: none;
cursor: pointer;
}
[data-surface="site"] .ln-btn--primary {
background: var(--ln-azulejo);
color: var(--ln-accent-ink);
border-color: var(--ln-azulejo);
}
[data-surface="site"] .ln-btn--primary:hover {
background: var(--ln-accent-hover);
border-color: var(--ln-accent-hover);
}
/* Die Aktion im Schattenfeld: der hellste Gegenstand im dunkelsten Feld. */
[data-surface="site"] .ln-btn--onshade {
background: var(--ln-cta-bg);
color: var(--ln-cta-ink);
border-color: var(--ln-cta-bg);
}
[data-surface="site"] .ln-btn--onshade:hover {
background: var(--ln-cta-hover);
border-color: var(--ln-cta-hover);
}
[data-surface="site"] .ln-btn--ghost {
border-color: var(--ln-border);
color: var(--ln-fg);
}
[data-surface="site"] .ln-btn--ghost:hover { border-color: var(--ln-fg); }
[data-surface="site"] .ln-btn--sm { min-block-size: 40px; padding-inline: var(--ln-4); font-size: var(--ln-s-1); }
[data-surface="site"] .ln-btn[disabled],
[data-surface="site"] .ln-btn[aria-busy="true"] { opacity: .65; pointer-events: none; }
/* =========================================================================
KOPFZEILE. Schlank, klebend, Materialwechsel statt Schatten. Sprache
steht hier und nicht im Fuss — in Miami-Dade ist sie ein Verkaufsargument.
========================================================================= */
[data-surface="site"] .ln-head {
position: sticky;
inset-block-start: 0;
z-index: 40;
display: flex;
align-items: center;
gap: var(--ln-4);
min-block-size: var(--ln-head-h);
padding-inline: var(--ln-rail);
padding-block: var(--ln-2);
background: var(--ln-glare);
border-block-end: var(--ln-joint) solid var(--ln-cement);
}
[data-surface="site"] .ln-head__brand {
font-family: var(--ln-display);
font-weight: 800;
font-size: var(--ln-s0);
letter-spacing: -0.015em;
margin-inline-end: auto;
}
/* Tippziel: die Wortmarke ist die Heimatmarke und muss auf dem Telefon
getroffen werden koennen. Die Schriftzeile allein ist 19px hoch (WCAG
2.5.8 verlangt 24), deshalb wird der Link auf die volle Kopfzeilenhoehe
gestreckt — sichtbar aendert sich nichts. */
[data-surface="site"] .ln-head__brand a {
color: var(--ln-ink);
text-decoration: none;
display: inline-flex;
align-items: center;
min-block-size: 44px;
}
[data-surface="site"] .ln-head__tel {
color: var(--ln-ink);
text-decoration: none;
font-weight: 600;
}
[data-surface="site"] .ln-head__tel:hover { text-decoration: underline; }
@media (max-width: 47.999rem) {
[data-surface="site"] .ln-head__tel,
[data-surface="site"] .ln-head .ln-btn { display: none; }
}
[data-surface="site"] .ln-lang {
display: flex;
border: 2px solid var(--ln-edge);
border-radius: var(--ln-r-control);
overflow: hidden;
}
[data-surface="site"] .ln-lang button {
appearance: none;
border: 0;
background: transparent;
color: var(--ln-ink);
font-family: var(--ln-text);
font-size: var(--ln-s-1);
font-weight: 600;
min-block-size: 36px;
padding-inline: var(--ln-3);
cursor: pointer;
}
[data-surface="site"] .ln-lang button + button { border-inline-start: 2px solid var(--ln-edge); }
[data-surface="site"] .ln-lang button[aria-pressed="true"] {
background: var(--ln-azulejo);
color: var(--ln-accent-ink);
}
/* =========================================================================
HERO. Ein randloses Bild, darueber ein DECKENDER Schattenblock unten
links — der Schatten im Bild und der Schatten im Interface sind derselbe
Schatten. Kein Verlauf, kein Kasten mit Rand, keine leere Bildschirmhaelfte.
Gebaut als 1x1-Raster statt mit `position:absolute`, damit ein langer
spanischer Satz die Bahn wachsen laesst statt aus dem Bild zu laufen.
========================================================================= */
[data-surface="site"] .ln-hero { display: block; background: var(--ln-shade); }
[data-surface="site"] .ln-hero__media { display: block; }
/* Auf dem Telefon ist die Bildhoehe GEDECKELT. Vorher stand das Bild im
Verhaeltnis 4:5 und war auf einem 375er Geraet 469px hoch — die Ueber-
schrift begann bei 563px und die Aktion lag unter der Daumenleiste. Wer
die Seite oeffnete, sah eine Flaeche und kein Versprechen. Mit dem Deckel
steht die Ueberschrift ueber der Falz und die Aktion darueber. `min()`
statt einer reinen vh-Hoehe, damit auch ein sehr flaches Fenster
(Landscape) nicht ein Bild von 40px erzeugt. */
[data-surface="site"] .ln-hero__media img {
inline-size: 100%;
block-size: auto;
aspect-ratio: 4 / 5;
max-block-size: min(38vh, 62vw);
min-block-size: 180px;
object-fit: cover;
object-position: 50% 42%;
display: block;
}
[data-surface="site"] .ln-hero__block {
background: var(--ln-shade);
color: var(--ln-on-shade);
padding-inline: var(--ln-rail);
padding-block: var(--ln-6) var(--ln-7);
display: grid;
gap: var(--ln-4);
justify-items: start;
}
[data-surface="site"] .ln-hero__h {
font-size: var(--ln-s4);
line-height: 0.98;
letter-spacing: -0.03em;
max-inline-size: 15ch;
}
[data-surface="site"] .ln-hero__sub {
font-size: var(--ln-s1);
line-height: 1.4;
max-inline-size: 34ch;
color: var(--ln-on-shade);
}
[data-surface="site"] .ln-hero__note {
font-size: var(--ln-s0);
color: var(--ln-on-shade-2);
max-inline-size: 60ch;
}
[data-surface="site"] .ln-hero__note a { color: var(--ln-azulejo-lit); }
@media (min-width: 56rem) {
[data-surface="site"] .ln-hero {
display: grid;
grid-template-columns: minmax(0, 1fr);
}
[data-surface="site"] .ln-hero > * { grid-area: 1 / 1; }
[data-surface="site"] .ln-hero__media { align-self: stretch; }
[data-surface="site"] .ln-hero__media img {
aspect-ratio: 16 / 9;
block-size: 100%;
min-block-size: min(82vh, 52vw);
max-block-size: none; /* hebt den Telefon-Deckel wieder auf */
object-position: 50% 50%;
}
[data-surface="site"] .ln-hero__block {
align-self: end;
justify-self: start;
inline-size: min(62vw, 52rem);
padding-block: var(--ln-6) var(--ln-6);
padding-inline-end: var(--ln-6);
}
/* LEISTUNGSSEITE. Ihre Zeichnung ist im Hochformat 4:5 gezeichnet. In die
randlose Breitbahn der Startseite gelegt wird sie so stark beschnitten,
dass eine Fliese 290px breit wird und die Duschnische als schwebendes
Rechteck in der Luft haengt. Deshalb steht sie hier NEBEN dem
Schattenblock, in ihrem eigenen Verhaeltnis — der Block fuellt die
andere Haelfte, es bleibt nichts leer. */
[data-surface="site"] .ln-hero--split {
grid-template-columns: minmax(0, 6fr) minmax(0, 7fr);
align-items: stretch;
}
[data-surface="site"] .ln-hero--split > * { grid-area: auto; }
[data-surface="site"] .ln-hero--split .ln-hero__media img {
aspect-ratio: 4 / 5;
block-size: 100%;
min-block-size: 0;
max-block-size: min(78vh, 42vw);
}
[data-surface="site"] .ln-hero--split .ln-hero__block {
align-self: center;
inline-size: auto;
padding-block: var(--ln-7);
}
}
/* =========================================================================
VERTRAUENSZEILE. Ein Satz, kein Badge, kein "A · B · C". Sie waechst mit
ihrem Inhalt; eine vh-Hoehe wuerde auf dem Telefon ueberlaufen.
========================================================================= */
[data-surface="site"] .ln-trust p {
max-inline-size: 76ch;
font-size: var(--ln-s1);
line-height: 1.45;
}
[data-surface="site"] .ln-trust p + p {
margin-block-start: var(--ln-3);
font-size: var(--ln-s0);
color: var(--ln-fg-2);
}
/* =========================================================================
ANTES Y DESPUES — der schwerste Block der Seite.
Ohne JavaScript: zwei Bilder nebeneinander, beschriftet, mit 2px-Fuge.
Mit JavaScript (backend/static/js/ba.js, ~10 Zeilen): dieselben Bilder
uebereinander, das "Despues" per clip-path auf --ba beschnitten, der
Griff faehrt mit. Bedienung ueber ein echtes , also
Tastatur, Screenreader und Touch ohne Zusatzcode.
Das ist die EINZIGE Bewegung der Seite, und sie antwortet auf eine
Handlung. Es gibt keine Einblend-Animation und keinen Hover-Effekt auf
irgendeiner Kachel.
========================================================================= */
[data-surface="site"] .ln-ba { display: grid; gap: var(--ln-4); }
[data-surface="site"] .ln-ba + .ln-ba { margin-block-start: var(--ln-8); }
[data-surface="site"] .ln-ba__stage { position: relative; }
[data-surface="site"] .ln-ba .pair {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--ln-joint);
background: var(--ln-cement);
border: 0;
margin: 0;
}
[data-surface="site"] .ln-ba .pair figure { position: relative; margin: 0; min-inline-size: 0; }
[data-surface="site"] .ln-ba .pair img {
inline-size: 100%;
block-size: 100%;
aspect-ratio: 3 / 2;
object-fit: cover;
display: block;
border-radius: 0;
}
/* Satzschreibung — components.css setzt hier Versalien mit Sperrung, und
genau das ist eines der Muster, die von dieser Seite verschwinden. */
[data-surface="site"] .ln-ba .pair figcaption {
position: absolute;
inset-block-end: 0;
inset-inline-start: 0;
background: var(--ln-shade);
color: var(--ln-on-shade);
font-family: var(--ln-text);
font-size: var(--ln-s-1);
font-weight: 600;
text-transform: none;
letter-spacing: 0;
padding: var(--ln-2) var(--ln-4);
}
[data-surface="site"] .ln-ba .pair figure:last-child figcaption {
inset-inline-start: auto;
inset-inline-end: 0;
}
/* Steuerung erscheint erst, wenn JavaScript sie auch bedienen kann. */
[data-surface="site"] .ln-ba__control { display: none; position: absolute; inset: 0; }
[data-surface="site"] .ln-ba[data-live] .pair { grid-template-columns: minmax(0, 1fr); gap: 0; }
[data-surface="site"] .ln-ba[data-live] .pair figure { grid-area: 1 / 1; }
[data-surface="site"] .ln-ba[data-live] .pair figure:last-child {
clip-path: inset(0 0 0 calc(var(--ba, 50) * 1%));
}
[data-surface="site"] .ln-ba[data-live] .ln-ba__control { display: block; }
[data-surface="site"] .ln-ba__range {
position: absolute;
inset: 0;
inline-size: 100%;
block-size: 100%;
margin: 0;
appearance: none;
background: transparent;
cursor: ew-resize;
}
[data-surface="site"] .ln-ba__range::-webkit-slider-thumb {
appearance: none;
inline-size: 56px;
block-size: 100%;
background: transparent;
}
[data-surface="site"] .ln-ba__range::-moz-range-thumb {
width: 56px;
height: 100%;
border: 0;
background: transparent;
}
[data-surface="site"] .ln-ba__range::-moz-range-track { background: transparent; }
/* Griff: gruene Scheibe in einem weissen Ring auf einem weissen Steg. Der
Ring garantiert die Trennung von dunklen Fotos, die gruene Scheibe die
Trennung von weisser Fliese — und diese Fotos sind ueberwiegend weisse
Fliese. */
[data-surface="site"] .ln-ba__grip {
position: absolute;
inset-block: 0;
inset-inline-start: calc(var(--ba, 50) * 1%);
inline-size: 3px;
margin-inline-start: -1.5px;
background: #FFFFFF;
pointer-events: none;
}
[data-surface="site"] .ln-ba__grip::after {
content: "";
position: absolute;
inset-block-start: 50%;
inset-inline-start: 50%;
inline-size: 44px;
block-size: 44px;
margin: -22px 0 0 -22px;
border-radius: 999px;
background: var(--ln-azulejo);
box-shadow: 0 0 0 3px #FFFFFF;
}
[data-surface="site"] .ln-ba__stage:has(.ln-ba__range:focus-visible) .ln-ba__grip::after {
box-shadow: 0 0 0 3px #FFFFFF, 0 0 0 7px var(--ln-azulejo);
}
/* Die Fakten stehen als SATZ unter dem Bild, nicht als "A · B · C". */
[data-surface="site"] .ln-ba__facts {
max-inline-size: 70ch;
font-size: var(--ln-s0);
}
[data-surface="site"] .ln-ba__facts .ln-stat { font-size: var(--ln-s1); }
/* =========================================================================
LEISTUNGEN — randloses Raster, 2px-Fuge, Text UNTER dem Bild. Der
Schattenblock bleibt dem Hero und den Bahnen vorbehalten; sonst waere er
kein Ereignis mehr.
========================================================================= */
[data-surface="site"] .ln-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: var(--ln-joint);
background: var(--ln-cement);
}
@media (min-width: 56rem) {
[data-surface="site"] .ln-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
[data-surface="site"] .ln-svc {
display: grid;
grid-template-rows: auto 1fr;
background: var(--ln-glare);
color: var(--ln-ink);
text-decoration: none;
}
[data-surface="site"] .ln-svc img {
inline-size: 100%;
aspect-ratio: 4 / 5;
object-fit: cover;
display: block;
}
[data-surface="site"] .ln-svc__txt { padding: var(--ln-4) var(--ln-4) var(--ln-5); display: grid; gap: var(--ln-2); }
[data-surface="site"] .ln-svc__txt p { font-size: var(--ln-s-1); color: var(--ln-ink-2); max-inline-size: 34ch; }
[data-surface="site"] .ln-svc h3 { color: var(--ln-ink); }
[data-surface="site"] .ln-svc:hover h3 { text-decoration: underline; text-decoration-thickness: 3px; text-underline-offset: 0.18em; }
/* =========================================================================
ABLAUF. Nummerierung ist hier zulaessig, weil der Inhalt tatsaechlich eine
Abfolge ist — es ist die einzige Stelle der Seite mit Ziffernmarken.
========================================================================= */
[data-surface="site"] .ln-steps {
display: grid;
gap: var(--ln-6);
margin-block-end: 0;
margin-inline: 0;
padding: 0;
list-style: none;
counter-reset: paso;
}
@media (min-width: 56rem) {
[data-surface="site"] .ln-steps { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--ln-5); }
}
[data-surface="site"] .ln-steps li { counter-increment: paso; display: grid; gap: var(--ln-2); align-content: start; }
[data-surface="site"] .ln-steps li::before {
content: counter(paso);
font-family: var(--ln-display);
font-weight: 800;
font-variant-numeric: tabular-nums;
font-size: var(--ln-s2);
line-height: 1;
color: var(--ln-accent);
}
[data-surface="site"] .ln-steps p { font-size: var(--ln-s0); max-inline-size: 38ch; }
/* =========================================================================
CONDOMINIO — die dunkle Bahn. Der Abschnitt, den kein Wettbewerber in
dieser Preisklasse auf der Seite hat.
========================================================================= */
[data-surface="site"] .ln-two {
display: grid;
gap: var(--ln-6);
}
@media (min-width: 56rem) {
[data-surface="site"] .ln-two { grid-template-columns: minmax(0, 7fr) minmax(0, 9fr); gap: var(--ln-8); align-items: start; }
}
[data-surface="site"] .ln-points {
display: grid;
gap: var(--ln-5);
margin-block-end: 0;
margin-inline: 0;
padding: 0;
list-style: none;
}
@media (min-width: 40rem) {
[data-surface="site"] .ln-points { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
[data-surface="site"] .ln-points li { display: grid; gap: var(--ln-1); }
/* Zahlungsplan: die Rate links, wogegen sie faellt rechts, auf einer Zeile
und auf der Grundlinie ausgerichtet. Drei Zeilen untereinander lesen sich
als Plan; drei nebeneinander lesen sich als Preistabelle. */
[data-surface="site"] .ln-terms { display: grid; gap: var(--ln-3); margin-block-end: 0; margin-inline: 0; padding: 0; list-style: none; }
/* Die Ratenspalte richtet sich nach dem laengsten Wert statt nach einem
geratenen Mass. Mit 4.5rem brach "50 %" hinter der Zahl um und der
wichtigste Zahlenblock der Seite sah kaputt aus. `max-content` plus
`nowrap` macht das unmoeglich, auch wenn spaeter "100 %" dort steht. */
[data-surface="site"] .ln-terms li {
display: grid;
grid-template-columns: minmax(5.75rem, max-content) minmax(0, 1fr);
gap: var(--ln-4);
align-items: baseline;
}
[data-surface="site"] .ln-terms .ln-stat { white-space: nowrap; }
[data-surface="site"] .ln-points b { font-weight: 600; }
[data-surface="site"] .ln-points b.ln-stat { font-weight: 800; }
[data-surface="site"] .ln-points p { font-size: var(--ln-s-1); color: var(--ln-fg-2); max-inline-size: 38ch; }
/* =========================================================================
STIMMEN. Prosa im Satzspiegel, keine Karten, keine Sterne. Jede Stimme
traegt Vorname, Stadtteil und Monat — nachpruefbar oder gar nicht.
========================================================================= */
[data-surface="site"] .ln-quotes {
display: grid;
gap: var(--ln-7);
margin-block-end: 0;
margin-inline: 0;
padding: 0;
}
@media (min-width: 52rem) {
[data-surface="site"] .ln-quotes { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--ln-7) var(--ln-8); }
}
[data-surface="site"] .ln-quote { margin: 0; display: grid; gap: var(--ln-3); align-content: start; }
[data-surface="site"] .ln-quote blockquote {
margin: 0;
font-size: var(--ln-s1);
line-height: 1.45;
max-inline-size: 42ch;
}
[data-surface="site"] .ln-quote figcaption { font-size: var(--ln-s-1); color: var(--ln-fg-2); font-weight: 600; }
/* =========================================================================
DER INHABER. Portraet-Platz liegt im richtigen Verhaeltnis bereit; fehlt
das Foto, faellt die Spalte weg statt eine graue Flaeche zu zeigen.
========================================================================= */
[data-surface="site"] .ln-owner { display: grid; gap: var(--ln-6); }
/* Zwei Spalten NUR, wenn es ein Portraet gibt. Ohne Foto bleibt die zweite
Spalte sonst leer — und eine leere Bildschirmhaelfte liest der Besucher
als kaputte Seite. */
@media (min-width: 56rem) {
[data-surface="site"] .ln-owner--photo { grid-template-columns: minmax(0, 5fr) minmax(0, 11fr); gap: var(--ln-8); align-items: start; }
}
[data-surface="site"] .ln-owner__photo img { inline-size: 100%; aspect-ratio: 4 / 5; object-fit: cover; display: block; }
[data-surface="site"] .ln-owner__body { display: grid; gap: var(--ln-5); }
@media (min-width: 56rem) {
[data-surface="site"] .ln-owner:not(.ln-owner--photo) .ln-owner__body {
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: var(--ln-7);
}
[data-surface="site"] .ln-owner:not(.ln-owner--photo) .ln-owner__body p { max-inline-size: 32ch; }
}
[data-surface="site"] .ln-owner__sig {
font-family: var(--ln-display);
font-weight: 800;
font-size: var(--ln-s1);
letter-spacing: -0.015em;
}
/* =========================================================================
ZONA. Der duennste Abschnitt der Seite, reiner Text, kein Kartenwidget —
und genau deshalb wirken die Bahnen darueber und darunter schwer.
========================================================================= */
[data-surface="site"] .ln-zona {
font-family: var(--ln-display);
font-weight: 800;
font-size: var(--ln-s2);
line-height: 1.22;
letter-spacing: -0.015em;
max-inline-size: 48ch;
}
/* Der Nachsatz stand in .ln-small (15px) unter einer 32px-Displayzeile und
las sich wie versehentliches Kleingedrucktes. Er ist eine Zusage, keine
Fussnote. */
[data-surface="site"] .ln-zona + .ln-small {
font-size: var(--ln-s0);
max-inline-size: 56ch;
}
/* =========================================================================
FAQ. statt Zubehoer: der Zustand ist echte Information.
========================================================================= */
/* Die Spalte neben der FAQ traegt die Aktion und klebt mit; sonst stuende
unter der Ueberschrift eine halbe leere Bildschirmhaelfte. */
[data-surface="site"] .ln-faq__aside { justify-items: start; }
/* Auf dem Telefon traegt die Daumenleiste dieselbe Aktion dauerhaft am
unteren Rand. Die Aktion hier waere die dritte gleiche Schaltflaeche auf
einem Bildschirm — sie erscheint deshalb erst, wo sie gebraucht wird:
in der sonst leeren Spalte neben der FAQ. */
@media (max-width: 55.999rem) {
[data-surface="site"] .ln-faq__aside .ln-btn,
[data-surface="site"] .ln-faq__aside .ln-small { display: none; }
}
@media (min-width: 56rem) {
[data-surface="site"] .ln-faq__aside {
position: sticky;
inset-block-start: calc(var(--ln-head-h) + var(--ln-5));
}
}
[data-surface="site"] .ln-faq { display: grid; max-inline-size: 72ch; align-content: start; }
[data-surface="site"] .ln-faq details {
border-block-start: var(--ln-joint) solid var(--ln-border);
padding-block: var(--ln-4);
}
[data-surface="site"] .ln-faq details:last-of-type { border-block-end: var(--ln-joint) solid var(--ln-border); }
[data-surface="site"] .ln-faq summary {
display: flex;
gap: var(--ln-4);
align-items: baseline;
justify-content: space-between;
cursor: pointer;
list-style: none;
font-family: var(--ln-display);
font-weight: 800;
font-size: var(--ln-s1);
letter-spacing: -0.01em;
line-height: 1.2;
}
[data-surface="site"] .ln-faq summary::-webkit-details-marker { display: none; }
[data-surface="site"] .ln-faq summary::after {
content: "+";
font-size: var(--ln-s2);
line-height: 1;
color: var(--ln-accent);
flex: none;
}
[data-surface="site"] .ln-faq details[open] summary::after { content: "\2013"; }
[data-surface="site"] .ln-faq details p { margin-block-start: var(--ln-3); }
/* =========================================================================
KONTAKT. Das Formular sitzt auf einer hellen Flaeche IN der dunklen Bahn —
ein Materialwechsel, keine Karte: kein Radius, kein Schatten.
========================================================================= */
[data-surface="site"] .ln-contact { display: grid; gap: var(--ln-7); }
@media (min-width: 60rem) {
[data-surface="site"] .ln-contact { grid-template-columns: minmax(0, 6fr) minmax(0, 7fr); gap: var(--ln-8); align-items: start; }
/* Das Formular ist rund 1100px hoch, die linke Spalte rund 450. Ohne
`sticky` stand darunter eine halbe Bildschirmhoehe totes Dunkelblau —
dieselbe leere Haelfte, wegen der die vorige Fassung durchgefallen ist.
Klebend ist die Spalte kein Rest, sondern eine Funktion: Telefonnummer
und WhatsApp bleiben neben jedem Feld erreichbar, auch am Ende des
Formulars. */
[data-surface="site"] .ln-contact__aside {
position: sticky;
inset-block-start: calc(var(--ln-head-h) + var(--ln-5));
}
}
[data-surface="site"] .ln-contact__aside { display: grid; gap: var(--ln-5); justify-items: start; }
[data-surface="site"] .ln-contact__aside p { color: var(--ln-fg-2); }
[data-surface="site"] .ln-contact__aside .ln-lead { color: var(--ln-fg); }
[data-surface="site"] .ln-panel {
background: var(--ln-glare);
color: var(--ln-ink);
padding: var(--ln-6) var(--ln-5);
border-radius: 0;
box-shadow: none;
}
@media (min-width: 40rem) {
[data-surface="site"] .ln-panel { padding: var(--ln-7) var(--ln-6); }
}
/* --- Formular ----------------------------------------------------------
Vier sichtbare Felder plus das optionale Foto. Alles, was seltener
gebraucht wird (Korrespondenz-Adresse, freie Beschreibung), liegt hinter
einer Aufklappzeile — die Felder bleiben im Formular, die Seite fragt
aber nur vier Dinge. */
[data-surface="site"] .ln-panel .form { display: grid; gap: var(--ln-5); }
[data-surface="site"] .ln-panel .field { display: grid; gap: var(--ln-2); }
[data-surface="site"] .ln-panel .field__label {
font-family: var(--ln-text);
font-weight: 600;
font-size: var(--ln-s0);
line-height: 1.2;
text-transform: none;
letter-spacing: 0;
}
[data-surface="site"] .ln-panel .field__label .req { color: var(--ln-ink); }
[data-surface="site"] .ln-panel .field__hint { font-size: var(--ln-s-1); color: var(--ln-ink-2); max-inline-size: 46ch; }
[data-surface="site"] .ln-panel .field__err {
display: none;
font-size: var(--ln-s-1);
font-weight: 600;
color: var(--ln-error);
}
[data-surface="site"] .ln-panel .field:has([aria-invalid="true"]) .field__err { display: block; }
/* Die Meldung, die das GANZE Formular betrifft (abgelaufenes Token, zu
schnell abgeschickt), haengt nicht in einem `.field` — mit der Regel
darueber allein blieb sie unsichtbar und der Absender sah auf ein
Formular, das nichts tat. Sie steht immer und traegt `role="alert"`. */
[data-surface="site"] .ln-panel .field__err[role="alert"] {
display: block;
font-size: var(--ln-s0);
margin-block-end: var(--ln-5);
}
[data-surface="site"] .ln-panel .input {
inline-size: 100%;
min-block-size: 52px;
padding: var(--ln-3) var(--ln-4);
background: var(--ln-glare);
color: var(--ln-ink);
border: 2px solid var(--ln-edge);
border-radius: var(--ln-r-control);
font-family: var(--ln-text);
font-size: var(--ln-s0);
box-shadow: none;
}
[data-surface="site"] .ln-panel textarea.input { min-block-size: 6rem; }
[data-surface="site"] .ln-panel .input::placeholder { color: var(--ln-ink-2); opacity: 1; }
[data-surface="site"] .ln-panel .input:hover { border-color: var(--ln-ink); }
[data-surface="site"] .ln-panel .input[aria-invalid="true"] { border-color: var(--ln-error); border-width: 3px; }
[data-surface="site"] .ln-panel .input--data { font-family: var(--ln-text); font-variant-numeric: normal; }
[data-surface="site"] .ln-panel .optset { display: flex; flex-wrap: wrap; gap: var(--ln-2); }
[data-surface="site"] .ln-panel .opt {
position: relative;
display: inline-flex;
align-items: center;
min-block-size: 48px;
padding-inline: var(--ln-4);
border: 2px solid var(--ln-edge);
border-radius: var(--ln-r-control);
background: var(--ln-glare);
font-weight: 600;
cursor: pointer;
}
[data-surface="site"] .ln-panel .opt:has(input:checked) {
background: var(--ln-azulejo);
border-color: var(--ln-azulejo);
color: var(--ln-accent-ink);
}
[data-surface="site"] .ln-panel .opt:has(input:focus-visible) {
outline: 3px solid var(--ln-focus);
outline-offset: 2px;
}
[data-surface="site"] .ln-more { border: 0; padding: 0; }
[data-surface="site"] .ln-more > summary {
cursor: pointer;
list-style: none;
font-weight: 600;
color: var(--ln-azulejo);
text-decoration: underline;
text-underline-offset: 0.18em;
min-block-size: 44px;
display: flex;
align-items: center;
}
[data-surface="site"] .ln-more > summary::-webkit-details-marker { display: none; }
[data-surface="site"] .ln-more[open] > summary { margin-block-end: var(--ln-5); }
[data-surface="site"] .ln-more .form,
[data-surface="site"] .ln-more > div { display: grid; gap: var(--ln-5); }
/* =========================================================================
FUSS. Setzt die Schattenbahn des Kontaktabschnitts fort — ein Block, kein
zweiter dunkler Kasten.
========================================================================= */
[data-surface="site"] .ln-foot { display: grid; gap: var(--ln-5); }
[data-surface="site"] .ln-foot nav { display: flex; flex-wrap: wrap; gap: var(--ln-2) var(--ln-5); }
[data-surface="site"] .ln-foot a { color: var(--ln-on-shade); }
[data-surface="site"] .ln-foot p { color: var(--ln-on-shade-2); font-size: var(--ln-s-1); max-inline-size: 70ch; }
[data-surface="site"] .ln-foot__contact { display: flex; flex-wrap: wrap; gap: var(--ln-2) var(--ln-5); }
[data-surface="site"] .ln-foot .ln-foot__brand {
font-family: var(--ln-display);
font-weight: 800;
font-size: var(--ln-s1);
color: var(--ln-on-shade);
letter-spacing: -0.015em;
}
/* =========================================================================
DAUMENLEISTE. 71 % des Verkehrs ist mobil; Kontakt darf nie weiter als
einen Tap entfernt sein. 62/38 geteilt, damit auch hier genau EINE
Aktion dominiert.
========================================================================= */
[data-surface="site"] .ln-thumb {
position: fixed;
inset-block-end: 0;
inset-inline: 0;
z-index: 50;
display: grid;
grid-template-columns: 62fr 38fr;
background: var(--ln-shade);
padding-block-end: env(safe-area-inset-bottom);
border-block-start: var(--ln-joint) solid var(--ln-azulejo-lit);
}
[data-surface="site"] .ln-thumb a {
display: flex;
align-items: center;
justify-content: center;
min-block-size: var(--ln-thumb-h);
padding-inline: var(--ln-3);
font-weight: 600;
font-size: var(--ln-s0);
text-decoration: none;
text-align: center;
}
[data-surface="site"] .ln-thumb__wa { background: var(--ln-cta-bg); color: var(--ln-cta-ink); }
[data-surface="site"] .ln-thumb__tel { background: var(--ln-shade); color: var(--ln-on-shade); }
@media (min-width: 56rem) {
[data-surface="site"] .ln-thumb { display: none; }
}
/* =========================================================================
LEERZUSTAND, DANKE-SEITE, INHALTSSEITEN (Leistung, Galerie, Legal)
========================================================================= */
[data-surface="site"] .empty {
border: 0;
background: var(--ln-cement);
padding: var(--ln-7) var(--ln-6);
display: grid;
gap: var(--ln-4);
justify-items: start;
max-inline-size: 60ch;
}
/* Lesebahn der Leistungsseite: der Text bekommt die groessere Spalte, die
Umfangsliste die kleinere. `.ln-two` allein waere andersherum. */
@media (min-width: 56rem) {
[data-surface="site"] .ln-two:has(> .ln-prose) {
grid-template-columns: minmax(0, 9fr) minmax(0, 7fr);
}
}
[data-surface="site"] .ln-prose { display: grid; gap: var(--ln-5); max-inline-size: var(--ln-measure); }
[data-surface="site"] .ln-prose h2 { font-size: var(--ln-s2); margin-block-start: var(--ln-4); }
[data-surface="site"] .ln-list { display: grid; gap: var(--ln-3); margin: 0; padding-inline-start: 1.1em; }
[data-surface="site"] .ln-list li { max-inline-size: var(--ln-measure); }
/* =========================================================================
BEWEGUNG UND DRUCK
========================================================================= */
@media (prefers-reduced-motion: reduce) {
[data-surface="site"] *,
[data-surface="site"] *::before,
[data-surface="site"] *::after {
animation-duration: 0.001ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.001ms !important;
scroll-behavior: auto !important;
}
}
@media print {
[data-surface="site"] .ln-head,
[data-surface="site"] .ln-thumb,
[data-surface="site"] .ln-ba__control,
[data-surface="site"] .ln-lang { display: none !important; }
[data-surface="site"] .ln-band,
[data-surface="site"] .ln-band--shade,
[data-surface="site"] .ln-hero,
[data-surface="site"] .ln-hero__block {
background: #FFFFFF !important;
color: #000000 !important;
padding-block: 1rem;
}
[data-surface="site"] .ln-ba[data-live] .pair { grid-template-columns: 1fr 1fr; gap: 2px; }
[data-surface="site"] .ln-ba[data-live] .pair figure { grid-area: auto; clip-path: none; }
[data-surface="site"] .ln-ba__grip { display: none; }
}
}