/*
Mr. Lister – Gemeinsames Stylesheet (style.css)
===============================================
Diese eine Datei bestimmt das Aussehen ALLER Seiten (Landing, Privacy, Support).
Jede HTML-Seite bindet sie im ein mit:
Vorteil: Design nur EINMAL pflegen. Aenderst du hier z.B. das Gruen,
aendert es sich automatisch auf allen Seiten.
Aufbau der Datei (von oben nach unten):
1. Farb- und Schrift-Variablen (hell + dunkel)
2. Reset + Grundlagen
3. Layout (der zentrale Lesebereich)
4. Navigation + Kopf
5. Typografie (Ueberschriften, Text, Links)
6. Bausteine (Buttons, Karten, Feature-Raster, FAQ, Hinweis-Boxen)
7. Fusszeile
8. Barrierefreiheit
*/
/* ============================================================
1. VARIABLEN
============================================================ */
:root {
--brand: #006446; /* BrandGreen hell (RGB 0,100,70) */
--ink: #1a1a1a; /* fast-schwarzer Fliesstext */
--muted: #5a5a5a; /* gedaempfter Text (Datum, Fusszeile) */
--bg: #fbfbf9; /* ganz leicht warmes Weiss */
--card: #f3f4f0; /* Hintergrund von Boxen/Karten */
--hairline: #e5e5e1; /* duenne Trennlinien */
--measure: 42rem; /* max. Lesebreite fuer Fliesstext */
/* "New York" ist Apples Serifenschrift = deine App-Titelschrift.
Auf Nicht-Apple-Geraeten faellt es sauber auf Georgia/Times zurueck. */
--serif: "New York", ui-serif, Georgia, "Times New Roman", serif;
--sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}
/* Dunkelmodus: der Browser nimmt diese Werte, wenn das Geraet dunkel ist. */
@media (prefers-color-scheme: dark) {
:root {
--brand: #00785a; /* BrandGreen dunkel (RGB 0,120,90) */
--ink: #ededed;
--muted: #a0a0a0;
--bg: #101010;
--card: #1a1c1a;
--hairline: #2a2a2a;
}
}
/* ============================================================
2. RESET + GRUNDLAGEN
============================================================ */
* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
font-family: var(--sans);
color: var(--ink);
background: var(--bg);
line-height: 1.65;
font-size: 1.0625rem; /* ~17px */
-webkit-font-smoothing: antialiased;
}
/* ============================================================
3. LAYOUT
============================================================ */
/* Der zentrale Lesebereich fuer Text-Seiten (Privacy/Support). */
.wrap {
max-width: var(--measure);
margin-inline: auto; /* horizontal zentrieren */
padding: 2.5rem 1.5rem 4rem;
}
/* Ein breiterer Bereich fuer die Landing-Page (Hero, Feature-Raster). */
.wide {
max-width: 60rem;
margin-inline: auto;
padding: 2.5rem 1.5rem 4rem;
}
/* ============================================================
4. NAVIGATION + KOPF
============================================================ */
.nav {
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
gap: 0.75rem 1rem;
margin-bottom: 2.5rem;
}
.wordmark {
font-family: var(--serif);
font-size: 1.5rem;
font-weight: 600;
letter-spacing: -0.01em;
color: var(--brand);
text-decoration: none;
}
.nav-links {
display: flex;
gap: 1.25rem;
font-size: 0.9375rem;
}
.nav-links a {
color: var(--muted);
text-decoration: none;
}
.nav-links a:hover { color: var(--brand); }
/* Sprachumschalter EN/DE in der Navigation.
Die aktuelle Sprache ist gruen hervorgehoben (kein Link), die andere
ist ein Link auf die entsprechende Seite in der anderen Sprache. */
.nav-lang { color: var(--muted); white-space: nowrap; }
.nav-lang .current { color: var(--brand); font-weight: 600; }
.nav-lang a { color: var(--muted); text-decoration: none; }
.nav-lang a:hover { color: var(--brand); }
.nav-lang .sep { opacity: 0.45; margin: 0 0.35rem; }
/* duenne gruene Linie als ruhiges Marken-Signal (z.B. unter Seitentiteln) */
.rule {
height: 2px;
width: 3rem;
background: var(--brand);
border: none;
margin: 1.75rem 0 1.25rem;
}
/* ============================================================
5. TYPOGRAFIE
============================================================ */
h1 {
font-family: var(--serif);
font-size: clamp(1.9rem, 5vw, 2.6rem); /* waechst mit der Bildschirmbreite */
font-weight: 600;
line-height: 1.15;
letter-spacing: -0.02em;
margin-bottom: 0.6rem;
}
h2 {
font-family: var(--serif);
font-size: 1.35rem;
font-weight: 600;
letter-spacing: -0.01em;
margin-bottom: 0.75rem;
}
.updated {
color: var(--muted);
font-size: 0.9375rem;
}
p { margin-bottom: 1rem; }
p:last-child { margin-bottom: 0; }
ul.body-list { margin: 0 0 1rem 1.25rem; }
ul.body-list li { margin-bottom: 0.5rem; }
a {
color: var(--brand);
text-decoration: underline;
text-underline-offset: 2px;
}
a:hover { text-decoration: none; }
strong { font-weight: 650; }
/* address = semantisches HTML fuer Kontaktdaten. Kursiv abschalten. */
address {
font-style: normal;
line-height: 1.5;
margin: 0.5rem 0 1rem;
}
/* Abstand zwischen Inhaltssektionen auf den Textseiten. */
section { margin-top: 2.5rem; }
/* ============================================================
6. BAUSTEINE
============================================================ */
/* --- Zusammenfassungs-/Info-Box (Privacy: "In plain terms") --- */
.summary {
background: var(--card);
border-radius: 14px;
padding: 1.4rem 1.5rem;
margin: 2.5rem 0;
}
.summary h2 {
font-family: var(--sans);
font-size: 0.8125rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.08em;
color: var(--brand);
margin-bottom: 0.75rem;
}
.summary ul { list-style: none; }
.summary li {
position: relative;
padding-left: 1.5rem;
margin-bottom: 0.5rem;
}
.summary li:last-child { margin-bottom: 0; }
.summary li::before { /* gruenes Haekchen, per CSS erzeugt */
content: "✓";
position: absolute;
left: 0;
color: var(--brand);
font-weight: 700;
}
/* --- Buttons / Handlungsaufforderungen --- */
.btn {
display: inline-block;
font-family: var(--sans);
font-size: 1rem;
font-weight: 600;
text-decoration: none;
padding: 0.7rem 1.4rem;
border-radius: 999px; /* voll abgerundet ("Pillenform") */
border: 1.5px solid var(--brand);
transition: transform 0.15s ease, opacity 0.15s ease;
}
.btn:hover { transform: translateY(-1px); }
.btn-primary {
background: var(--brand);
color: #ffffff; /* weisser Text auf gruenem Grund */
}
/* Im Dunkelmodus bleibt Weiss auf dem dunkleren Gruen gut lesbar. */
.btn-ghost {
background: transparent;
color: var(--brand);
}
/* Ein "Button", der noch nicht klickbar ist (App noch nicht live). */
.btn-soon {
display: inline-block;
font-weight: 600;
padding: 0.7rem 1.4rem;
border-radius: 999px;
background: var(--card);
color: var(--muted);
cursor: default;
}
/* --- Hero (Landing-Page) --- */
.hero { padding: 1rem 0 2.5rem; }
.hero h1 {
font-size: clamp(2.4rem, 7vw, 4rem);
margin-bottom: 1rem;
}
.hero .lede {
font-size: clamp(1.1rem, 2.5vw, 1.35rem);
color: var(--muted);
max-width: 34rem;
margin-bottom: 1.75rem;
}
.hero-actions { display: flex; flex-wrap: wrap; gap: 0.75rem; align-items: center; }
/* Der Marken-Slogan als eigenstaendiges, ruhiges Element. */
.slogan {
font-family: var(--serif);
color: var(--brand);
}
/* --- Beispiel-Listenkarte (das Signature-Element der Landing-Page) ---
Zeigt in echtem HTML/CSS, was die App macht: eine gerankte, bewertete
Liste. Kein Bild noetig, dadurch gestochen scharf und winzig klein. */
.list-card {
background: var(--card);
border-radius: 18px;
padding: 1.25rem 1.4rem;
max-width: 22rem;
}
.list-card .card-title {
font-family: var(--serif);
font-size: 1.15rem;
font-weight: 600;
margin-bottom: 0.9rem;
display: flex;
align-items: center;
gap: 0.5rem;
}
.list-card .dot { /* kleiner Akzentpunkt vor dem Titel */
width: 0.6rem; height: 0.6rem;
border-radius: 50%;
background: var(--brand);
flex: none;
}
.list-item {
display: flex;
align-items: center;
gap: 0.75rem;
padding: 0.55rem 0;
border-top: 1px solid var(--hairline);
}
.list-item .rank {
font-family: var(--serif);
font-weight: 600;
color: var(--brand);
width: 1.25rem;
text-align: center;
flex: none;
}
.list-item .name { flex: 1; }
.list-item .stars { color: var(--brand); letter-spacing: 0.1em; flex: none; }
/* --- Feature-Raster (Landing-Page) --- */
.features {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
gap: 1.5rem 2rem;
margin-top: 1rem;
}
.feature h3 {
font-family: var(--serif);
font-size: 1.15rem;
font-weight: 600;
margin-bottom: 0.35rem;
}
.feature p { color: var(--muted); font-size: 0.9688rem; }
/* Zwei-Spalten-Anordnung fuer den Hero (Text links, Karte rechts). */
.split {
display: grid;
grid-template-columns: 1fr;
gap: 2.5rem;
align-items: center;
}
@media (min-width: 48rem) { /* ab ~768px zwei Spalten */
.split { grid-template-columns: 1.1fr 0.9fr; }
}
/* --- FAQ (Support-Seite) ---
/ ist natives HTML: aufklappbare Abschnitte OHNE
JavaScript. Der Browser uebernimmt das Auf-/Zuklappen von selbst. */
.faq details {
border-top: 1px solid var(--hairline);
padding: 0.9rem 0;
}
.faq details:last-of-type { border-bottom: 1px solid var(--hairline); }
.faq summary {
font-weight: 600;
cursor: pointer;
list-style: none; /* Standard-Dreieck weg */
display: flex;
justify-content: space-between;
align-items: center;
gap: 1rem;
}
.faq summary::-webkit-details-marker { display: none; } /* Safari-Dreieck weg */
.faq summary::after { /* eigenes "+"-Zeichen rechts */
content: "+";
color: var(--brand);
font-weight: 700;
font-size: 1.3rem;
line-height: 1;
}
.faq details[open] summary::after { content: "–"; } /* offen: Minuszeichen */
.faq details p { margin-top: 0.75rem; color: var(--muted); }
/* --- Kontakt-Block (Support-Seite) --- */
.contact-card {
background: var(--card);
border-radius: 14px;
padding: 1.5rem;
margin: 1.5rem 0;
}
/* --- Hinweis-Box NUR fuer dich (Platzhalter/Review) ---
Diese Boxen ENTFERNST du vor dem Veroeffentlichen. */
.todo {
border-left: 3px solid #c2410c;
background: rgba(194, 65, 12, 0.06);
padding: 0.75rem 1rem;
margin: 1rem 0;
font-size: 0.9375rem;
border-radius: 0 8px 8px 0;
}
.todo strong { color: #c2410c; }
/* ============================================================
7. FUSSZEILE
============================================================ */
footer {
margin-top: 3.5rem;
padding-top: 1.5rem;
border-top: 1px solid var(--hairline);
color: var(--muted);
font-size: 0.9375rem;
}
footer .footer-links {
margin-top: 0.75rem;
display: flex;
gap: 1.25rem;
flex-wrap: wrap;
}
footer .footer-links a { color: var(--muted); text-decoration: none; }
footer .footer-links a:hover { color: var(--brand); }
/* ============================================================
8. BARRIEREFREIHEIT
============================================================ */
/* Sichtbarer Fokusrahmen fuer Tastatur-Navigation. */
a:focus-visible,
summary:focus-visible,
.btn:focus-visible {
outline: 2px solid var(--brand);
outline-offset: 3px;
border-radius: 4px;
}
/* Nutzer, die weniger Bewegung wollen, bekommen kein sanftes Scrollen. */
@media (prefers-reduced-motion: reduce) {
html { scroll-behavior: auto; }
.btn { transition: none; }
}