/* LIPEGA – Website
*
* Ein einziges Stylesheet, keine Vorverarbeitung, keine Abhängigkeiten.
* Wer eine Farbe ändern will, ändert sie hier oben und nirgends sonst.
*/
:root {
--gruen: #4a5c50; /* Kopfzeile, Überschriften – wie $primary der App */
--gruen-hell: #6b8471;
--gruen-blass: #eef2ef;
--text: #23291f;
--text-leise: #5c6659;
--linie: #dfe4e0;
--grund: #ffffff;
--grund-warm: #f7f8f6;
--breite: 68rem;
--radius: 8px;
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
margin: 0;
font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
font-size: 1.0625rem;
line-height: 1.65;
color: var(--text);
background: var(--grund);
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--gruen); }
a:hover { color: var(--gruen-hell); }
.mitte { width: 100%; max-width: var(--breite); margin: 0 auto; padding: 0 1.25rem; }
/* ── Kopfzeile ─────────────────────────────────────────────────────────── */
/* Die Kopfzeile klebt oben. Ohne das hier landet jedes Sprungziel darunter
und die angesprungene Überschrift ist unsichtbar — bei den vielen
Paragraphen-Sprungmarken im Vertragstext besonders ärgerlich. */
html { scroll-padding-top: 5.25rem; }
.kopf {
background: var(--gruen);
color: #fff;
position: sticky;
top: 0;
z-index: 20;
}
.kopf .mitte {
display: flex;
align-items: center;
gap: 1rem;
min-height: 4.25rem;
}
.kopf a { color: #fff; text-decoration: none; }
.marke img {
height: 2rem;
width: auto;
/* Das Logo ist einfarbig #484848 auf transparent und damit auf dem grünen
Kopf praktisch unsichtbar. brightness(0) macht jeden deckenden Punkt
schwarz, invert(1) daraus weiß — die Transparenz bleibt erhalten.
Entfällt, sobald es eine helle Fassung der Bilddatei gibt. */
filter: brightness(0) invert(1);
}
.marke { display: flex; align-items: center; }
.navigation { margin-left: auto; }
.navigation ul {
list-style: none;
display: flex;
gap: 0.35rem;
margin: 0;
padding: 0;
}
.navigation a {
display: block;
padding: 0.45rem 0.8rem;
border-radius: var(--radius);
font-weight: 500;
}
.navigation a:hover { background: rgba(255, 255, 255, 0.12); }
.navigation a[aria-current="page"] { background: rgba(255, 255, 255, 0.18); }
/* Die Web-App ist kein weiterer Menuepunkt, sondern fuehrt aus der Seite
heraus. Deshalb umrandet statt schlicht, in normaler statt halbfetter
Schrift, und mit dem Zeichen fuer "oeffnet auswaerts".
Das Innenmass ist um die Rahmenstaerke verringert — ohne das staende der
Punkt zwei Punkte hoeher als seine Nachbarn und die Reihe liefe schief. */
.navigation a.auswaerts {
display: flex;
align-items: center;
gap: 0.4rem;
font-weight: 400;
border: 1px solid rgba(255, 255, 255, 0.45);
padding: calc(0.45rem - 1px) calc(0.8rem - 1px);
}
.navigation a.auswaerts:hover {
background: rgba(255, 255, 255, 0.12);
border-color: rgba(255, 255, 255, 0.7);
}
/* Kleiner und feiner als das Zeichen im Knopf auf der Startseite: Es steht hier
neben kleinerer Schrift. */
.navigation .zeichen-extern { width: 0.9rem; height: 0.9rem; stroke-width: 1.6; }
/* Umschalter fürs Handy – ohne JavaScript über eine Checkbox */
.nav-schalter, .nav-knopf { display: none; }
/* ── Abschnitte ────────────────────────────────────────────────────────── */
main { display: block; }
.blende {
background: var(--gruen-blass);
padding: 3.5rem 0 3rem;
}
.blende h1 { margin-top: 0; }
.blende p.vorspann {
font-size: 1.2rem;
color: var(--text-leise);
max-width: 44rem;
}
/* Zentrierter Einstieg — nur auf der Startseite.
Die übrigen Seiten behalten den linksbündigen Kopf: Dort steht unter der
Überschrift ein längerer Vorspann, und zentrierter Fließtext über mehrere
Zeilen liest sich schlecht, weil jede Zeile woanders anfängt. */
.blende.mittig { text-align: center; }
/* Zweizeilige Ueberschrift. Als Blockelemente statt : Der Umbruch bleibt
damit eine Sache des Stylesheets, und zwischen den Spans steht ein echtes
Leerzeichen — vorgelesen wird weiterhin ein Satz. */
.blende.mittig h1 .zeile { display: block; }
.blende.mittig h1 { line-height: 1.15; }
/* Vorzeile: fuehrt hin, traegt aber nicht die Aussage. Deshalb kleiner,
leichter und zurueckgenommen — das Gewicht liegt auf der zweiten Zeile.
Masse in em, damit sie der clamp()-Groesse der Ueberschrift folgt. */
.blende.mittig h1 .vorzeile {
/* Eigenes clamp() statt eines em-Anteils der Ueberschrift: Als Anteil fiel
die Vorzeile auf schmalen Bildschirmen unter die 1,2rem des Vorspanns und
stand damit kleiner da als der Fliesstext unter ihr. Die Untergrenze liegt
jetzt bewusst darueber. */
font-size: clamp(1.3rem, 2.2vw, 1.55rem);
font-weight: 600;
color: var(--text-leise);
letter-spacing: .005em;
margin-bottom: .5rem;
}
/* Der Vorspann nutzt hier die volle Inhaltsbreite statt der sonst ueblichen
44rem: Zentriert und schmal entstuende eine hohe schmale Saeule, die den
Einstieg unruhig macht. Auf den uebrigen Seiten bleibt die Beschraenkung -
dort ist der Vorspann linksbuendig und laenger. */
.blende.mittig p.vorspann { max-width: none; }
.blende.mittig .knopfreihe { justify-content: center; }
section { padding: 3rem 0; }
section.warm { background: var(--grund-warm); }
section + section { border-top: 1px solid var(--linie); }
section.warm + section, section + section.warm { border-top: 0; }
/* Ein Abschnitt, der mittig steht. Die Zellen von .streifen und die
Ueberschrift erben die Ausrichtung; .knopfreihe ist ein Flex-Kasten und
richtet sich nicht nach text-align, deshalb die zweite Zeile. */
section.mittig { text-align: center; }
section.mittig .knopfreihe { justify-content: center; }
/* Die vier Spalten darin bleiben linksbuendig: Ueberschrift und Knopf sind
je eine Zeile und stehen mittig gut, ein Absatz ueber mehrere Zeilen nicht
— dort faengt sonst jede Zeile woanders an. Dieselbe Ueberlegung wie beim
Vorspann der uebrigen Seiten. */
section.mittig .streifen > div { text-align: left; }
/* Die Vorhaben stehen untereinander, nicht in Spalten: Überschrift, Absatz,
Überschrift, Absatz. Die Überschrift ist nicht größer als der Fließtext,
nur fett — sie benennt den Absatz darunter und macht keine neue Ebene auf.
Linksbündig und auf Lesebreite begrenzt, mittig im Abschnitt. */
/* Zwei Drittel Text, ein Drittel Bild. Die 2fr/1fr ergeben bei voller
Inhaltsbreite rund 44rem für die Aufzählung — dieselbe Lesebreite, die sie
vorher als zentrierter Block hatte. */
.vorhaben-block {
display: grid;
grid-template-columns: 2fr 1fr;
gap: 2rem;
align-items: start;
margin-top: 1.75rem;
text-align: left;
}
@media (max-width: 60rem) {
.vorhaben-block { grid-template-columns: 1fr; gap: 1.5rem; }
}
/* Festes Seitenverhältnis statt height:100%: Beim Umbruch auf eine Spalte
fiele die Höhe sonst zusammen.
2:3 neben dem Text — das trifft die Höhe der vier Punkte fast genau und
liegt nah am Hochformat der Vorlage (9:16), sodass wenig wegfällt.
Auf dem Handy 4:3: Ein Hochformat über die volle Breite wäre dort über
500 px hoch. Der Ausschnitt rutscht dafür nach oben, sonst schnitte er den
beiden Personen die Gesichter ab — sie sitzen im oberen Drittel. */
.vorhaben-bild {
display: block;
width: 100%;
aspect-ratio: 2 / 3;
object-fit: cover;
border-radius: var(--radius);
background: var(--gruen-blass);
}
@media (max-width: 60rem) {
.vorhaben-bild { aspect-ratio: 4 / 3; object-position: center 20%; }
}
.vorhaben { text-align: left; }
/* Haarlinie zwischen der Aufzählung und dem Schlusssatz. Nachbarschafts-
Auswahl statt eigener Klasse: Es ist genau der Absatz, der auf den Block
folgt. Der Abstand liegt auf beiden Seiten der Linie — oben als margin,
unten als padding. */
.vorhaben-block + p {
border-top: 1px solid var(--linie);
margin-top: 2.5rem;
padding-top: 2rem;
}
.vorhaben h3 {
font-size: inherit;
font-weight: 700;
color: var(--text);
margin: 1.4rem 0 0.15rem;
}
.vorhaben h3:first-child { margin-top: 0; }
.vorhaben p { margin: 0; color: var(--text-leise); }
/* Der Einstieg ist zart gruen. Ein warmer Abschnitt direkt darunter waere nur
eine Spur heller — die Kante verschwaende ohne Linie. Auf der Startseite
steht dort inzwischen der weisse Bildstreifen, auf den uebrigen Seiten
greift die Regel weiterhin. */
.blende + section.warm { border-top: 1px solid var(--linie); }
h1 { font-size: clamp(1.9rem, 4vw, 2.6rem); line-height: 1.2; color: var(--gruen); margin: 0 0 0.75rem; }
h2 { font-size: clamp(1.4rem, 3vw, 1.8rem); line-height: 1.25; color: var(--gruen); margin: 0 0 0.75rem; }
h3 { font-size: 1.15rem; margin: 1.75rem 0 0.4rem; }
h4 { font-size: 1.02rem; margin: 1.5rem 0 0.35rem; }
p { margin: 0 0 1rem; }
.leise { color: var(--text-leise); }
/* ── Karten ────────────────────────────────────────────────────────────── */
.karten {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
gap: 1.25rem;
margin-top: 1.75rem;
}
.karte {
background: var(--grund);
border: 1px solid var(--linie);
border-radius: var(--radius);
padding: 1.25rem 1.35rem;
}
.karte h3 { margin-top: 0; color: var(--gruen); }
.karte p:last-child { margin-bottom: 0; }
.karte .schluessel {
display: block;
margin-top: 0.6rem;
font-size: 0.85rem;
color: var(--text-leise);
}
/* Lange Adressen und Pfade dürfen auf schmalen Geräten umbrechen, statt die
Seite quer scrollen zu lassen. */
code { overflow-wrap: anywhere; }
.karte .schluessel code {
background: var(--gruen-blass);
border-radius: 4px;
padding: 0.1rem 0.35rem;
}
/* ── Bildstreifen ──────────────────────────────────────────────────────── */
/* Läuft als einziger Abschnitt über die volle Fensterbreite, ohne .mitte und
ohne Innenabstand — ein durchgehendes Band zwischen Einstieg und Kacheln.
Das ist Absicht: In der Inhaltsbreite und mit fünf gleichen Spalten stand er
Spalte für Spalte über den fünf Plattform-Kacheln und las sich, als gehöre
je ein Bild zu je einer Plattform. Das tut es nicht. */
.bildstreifen { padding: 0; }
/* Die Hoehe sitzt an der Rasterzeile, nicht am Bild. Vorher trug das Bild sie
selbst (aspect-ratio plus min-/max-height) und die Zelle richtete sich
danach — sobald eine der Grenzen griff, konnten Bild und Zelle
auseinanderlaufen und es standen helle Balken dazwischen. So kann das nicht
mehr passieren: Die Zeile gibt die Hoehe vor, das Bild fuellt sie mit
height:100% restlos aus.
clamp() bildet dieselben Masse ab wie zuvor: Untergrenze 160 px, dann 16:9
der Spaltenbreite (bei fuenf Spalten ein Fuenftel der Fensterbreite, also
100/5*9/16 = 11,25vw), Deckel 345 px. Dass vw die Bildlaufleiste mitzaehlt,
macht die Zeile um gut einen Punkt hoeher als das genaue 16:9 — object-fit
faengt das ab, verzerrt wird nichts.
line-height:0 am Behaelter ist Vorsorge: Sollte ein Bild je doch im
Inline-Fluss landen, entsteht daraus kein Zeilenabstand. */
.bildstreifen .bilder {
display: grid;
grid-template-columns: repeat(5, 1fr);
grid-auto-rows: clamp(160px, 11.25vw, 345px);
gap: 0;
line-height: 0;
}
/* Fuenf Bilder gehen in drei oder zwei Spalten nicht auf — die letzte Reihe
bliebe halb leer, und bei einem lueckenlosen Band faellt das als Loch auf.
Das letzte Bild ueberspannt deshalb die freie Spur. Eine eigene Angabe zum
Seitenverhaeltnis braucht es dafuer nicht mehr: Die Zeilenhoehe gilt auch
fuer das breitere Bild, es wird nur staerker beschnitten. */
@media (max-width: 60rem) {
.bildstreifen .bilder {
grid-template-columns: repeat(3, 1fr);
grid-auto-rows: clamp(160px, 18.75vw, 345px);
}
.bildstreifen img:last-child { grid-column: span 2; }
}
@media (max-width: 34rem) {
.bildstreifen .bilder {
grid-template-columns: repeat(2, 1fr);
grid-auto-rows: clamp(160px, 28.125vw, 345px);
}
.bildstreifen img:last-child { grid-column: span 2; }
}
/* min-width:0 hebt die Vorgabe auf, dass ein Rasterelement mindestens so breit
bleibt wie sein Inhalt — ohne das koennte ein 1280 px breites Bild die
Spalte auseinanderdruecken. */
.bildstreifen img {
display: block;
width: 100%;
height: 100%;
min-width: 0;
object-fit: cover;
background: var(--gruen-blass);
}
/* Der Deckel schneidet oben und unten weg — bei 2560 px Fensterbreite bleibt
nur noch gut die Hälfte der Bildhöhe stehen. In drei der fünf Fotos sitzt
das Wesentliche (Kopf, Gesicht) im oberen Drittel und fiele bei mittigem
Ausschnitt heraus. Jedes Foto bekommt deshalb seinen eigenen Ausschnitt,
gerechnet auf 2560 px. Die Klasse benennt das Motiv, nicht die Position —
so bleiben die Werte richtig, wenn die Reihenfolge sich ändert. */
.bildstreifen .b-navi { object-position: center 30%; } /* Karte auf dem Tablet */
.bildstreifen .b-feld { object-position: center 25%; } /* Kopf und Tablet, beides knapp */
.bildstreifen .b-keller { object-position: center 20%; } /* Kopf und Handy */
.bildstreifen .b-unterschrift { object-position: center 25%; } /* Unterschriftenfeld */
.bildstreifen .b-buero { object-position: center 5%; } /* Gesicht sitzt ganz oben */
/* ── Plattform-Kacheln ─────────────────────────────────────────────────── */
/* Überschrift und Vorspann stehen zentriert über den Kacheln. Der Vorspann
bekommt dafür eine Breitengrenze: Über die vollen 68rem zentriert faengt
jede Zeile woanders an und liest sich schlecht — dieselbe Ueberlegung wie
beim Einstieg der uebrigen Seiten. */
.einstieg-plattformen .mitte > h2,
.einstieg-plattformen .mitte > p { text-align: center; }
.einstieg-plattformen .mitte > p {
max-width: 44rem;
margin-left: auto;
margin-right: auto;
}
/* Der Hinweis auf die Web-App und der Knopf darunter stehen mittig unter den
Kacheln. .knopfreihe ist sonst linksbündig. */
.einstieg-plattformen .knopfreihe { justify-content: center; margin-top: 0.75rem; }
.web-hinweis { margin: 2rem 0 0; }
/* Fünf feste Spalten statt auto-fit: Bei auto-fit mit einer Mindestbreite
entstehen auf der vollen Inhaltsbreite mehr Spuren als Kacheln — die letzten
beiden blieben leer und die Reihe stünde sichtbar links. Die Umbrüche sind
deshalb von Hand gesetzt: 5 → 3 → 2. */
.plattformen {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 1rem;
margin-top: 1.75rem;
}
@media (max-width: 60rem) { .plattformen { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 34rem) { .plattformen { grid-template-columns: repeat(2, 1fr); } }
.plattform {
background: var(--grund);
border: 1px solid var(--linie);
border-radius: var(--radius);
padding: 1.25rem 0.9rem;
text-align: center;
/* Nur zwei der fünf Kacheln tragen ein Store-Abzeichen. Als Flex-Spalte mit
margin-top:auto sitzen die beiden auf einer gemeinsamen Grundlinie am
Kachelfuß, statt je nach Textlänge zu wandern — und die drei Kacheln ohne
Abzeichen sehen dadurch nicht abgeschnitten aus, sondern bewusst leer. */
display: flex;
flex-direction: column;
}
.plattform .laden { margin: auto 0 0; padding-top: 1rem; }
/* Die fünf Abzeichen kommen von fünf Herstellern und haben deshalb fünf
Seitenverhältnisse — von 2,58:1 (Google Play) bis 3,90:1 (Mac App Store).
Angeglichen wird deshalb die Höhe, nicht die Breite: Über die Breite
gerechnet stünde das Mac-Abzeichen sichtbar flacher als die übrigen.
Damit gleiche Bildhöhe auch gleich hohe schwarze Fläche bedeutet, dürfen
die Dateien keinen Leerrand tragen. Googles Abzeichen kam mit je 29 px
durchsichtigem Rand oben und unten — seine Fläche stand dadurch auf 77 %
der Höhe der übrigen. Der Rand ist aus der Datei geschnitten (17.09.2026).
Wer ein Abzeichen erneuert, misst das nach.
max-width plus object-fit fängt den Fall ab, dass die Kachel auf sehr
schmalen Geräten schmaler wird als das breiteste Abzeichen — es schrumpft
dann mit, statt verzerrt oder abgeschnitten zu werden. */
.plattform .laden img {
height: 2.2rem;
width: auto;
max-width: 100%;
object-fit: contain;
margin: 0 auto;
}
@media (max-width: 34rem) { .plattform .laden img { height: 1.6rem; } }
/* Die Gerätesymbole: Handy, Tablet und Desktop stehen nebeneinander auf einer
gemeinsamen Grundlinie und behalten ihr Größenverhältnis zueinander — daran
erkennt man die Geräteklasse noch vor dem Lesen. */
.plattform .geraete {
display: flex;
align-items: flex-end;
justify-content: center;
gap: 0;
min-height: 4.2rem;
/* Knapp über dem Namen: Die Symbole gehören zur Angabe darunter, nicht als
eigene Zeile darüber. */
margin: 0 0 0.4rem;
}
/* stroke-width gilt in Symbol-Einheiten und wird mitskaliert. Weil die drei
Symbole dasselbe 24er-Koordinatensystem haben, aber verschieden groß
gezeichnet werden, ergaben 1,6 Einheiten je nach Symbol 2,3 bis 4,5 px —
der Desktop stand doppelt so fett da wie das Handy. Mit
vector-effect="non-scaling-stroke" (als Attribut an jeder Form, weil sich
die Eigenschaft nicht vererbt) zählt die Angabe in Bildschirmpunkten:
2 px, überall gleich. */
.plattform .geraete svg {
fill: none;
stroke: var(--gruen);
stroke-width: 2;
stroke-linecap: round;
stroke-linejoin: round;
display: block;
}
/* Handy und Tablet stehen leicht übereinander statt nebeneinander.
Die Symbole sitzen mittig in ihrem 24er-viewBox, tragen also Leerraum im
eigenen Kasten: rechts im Handy 0,642rem, links im Tablet 0,483rem. Bündig
aneinandergeschoben blieben 1,125rem Luft — deshalb 1,46rem zurück, das
ergibt rund 0,33rem Überlagerung. Wer die Symbolgrößen ändert, rechnet das
neu.
Das Handy liegt vorn: eigene Füllung in Kachelfarbe, damit die Kante des
Tablets nicht hindurchscheint, dazu z-index — ohne den läge das Tablet oben,
weil es später im Quelltext steht. */
.plattform .geraete .g-handy {
width: 2.2rem;
height: 3rem;
margin-right: -1.46rem;
position: relative;
z-index: 1;
fill: var(--grund);
}
.plattform .geraete .g-tablet { width: 2.9rem; height: 3.6rem; }
.plattform .geraete .g-desktop { width: 4.2rem; height: 4.2rem; }
/* Name und Geräteklasse sind eine Angabe, keine zwei: enge Zeilen, kein
Abstand dazwischen. Ohne diese Regeln greift der Fließtext-Zeilenabstand
von 1,65 und der Standardabstand einer h3 (1,75rem oben) — dann fällt die
Kachel auseinander. */
.plattform h3 {
margin: 0;
font-size: 1.05rem;
line-height: 1.3;
color: var(--gruen);
}
.plattform .klasse {
margin: 0;
font-size: 0.9rem;
line-height: 1.3;
color: var(--text-leise);
}
/* Der Symbolvorrat selbst wird nie gezeigt. display:none würde ihn in
manchen Browsern auch für