/* ============================================================================
Zeitgeist — Startseite NEU (Testversion, nicht live)
Designsystem „Mitternacht und Gold" nach den Skills visuelles-design,
typografie und seitenaufbau sowie Abschnitt 4 des Umbau-Plans aus Lauf 17.
Grundregeln, die dieses Blatt durchsetzt:
· EIN durchgehender Grund. Keine elf Sektions-Hintergründe.
· Gold ist Währung: es trägt die Handlung und die Kernzahlen, sonst nichts.
· Gold ist die einzige Aktionsfarbe. Ein Vollton-Knopf pro Bildschirm.
· Fließtext nie unter 18 px. Berührungsziele nie unter 48 px.
FARBWELT 15.08.2026 (Toms Rückmeldung): Die Testfassung lief vorher auf einem
helleren Blau mit violetten Knöpfen. Zurückgeholt ist jetzt die Farbwelt der
Live-Startseite — tiefes Mitternachtsblau als Grund, Gold als einzige Akzent-
und Aktionsfarbe, Creme statt Blauweiß im Text. Die Werte sind eins zu eins aus
/style.css der Live-Seite übernommen (dort --navy, --navy-deep, --surface,
--gold, --gold-light, --gold-dark, --text), damit Klon und Live-Seite denselben
Ton haben. Violett und Türkis bleiben nur noch im Lichtschein des Grundes.
========================================================================== */
:root {
/* Grund — 1:1 aus der Live-Seite */
--nacht-tief: #0A0A0F; /* Live --navy · der Grund der ganzen Seite */
--nacht: #0B1020; /* Live-Hero oben · das kühle Mitternachtsblau */
--nacht-satt: #06060A; /* Live --navy-deep · Schrift auf Gold */
/* Flächen — immer heller als der Grund */
--panel: #12121A; /* Live --surface */
--panel-hell: #1A1F3C; /* Live-Karte, der blaue Ton aus style.css:1006 */
/* Wert und Handlung */
--gold: #C9A84C; /* Live --gold */
--gold-tief: #B8860B; /* Live --gold-dark */
--gold-hell: #E8D5A3; /* Live --gold-light */
/* Mystik — nie flächig, nur im Lichtschein des Grundes */
--violett: #7B68EE; /* Live --purple */
--tuerkis: #00D4AA; /* Live --teal */
/* Text — Creme wie live, nicht Blauweiß */
--text: #F0E6D3; /* Live --text / --cream */
--slate: #B6AC99; /* Live --text-muted, als Volltonwert gerechnet */
--linie: rgba(240,230,211,0.18);
--linie-gold: rgba(201,168,76,0.34);
--serif: 'Playfair Display','Playfair Ersatz', Georgia, 'Times New Roman', serif;
--sans: 'Montserrat','Montserrat Ersatz', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
/* Typo-Skala mobil/Desktop — 18 px ist die Fließtext-Untergrenze */
--t-13: 0.8125rem;
--t-16: 1rem;
--t-18: 1.125rem;
--t-20: 1.25rem;
--t-22: 1.375rem;
--t-28: 1.75rem;
--t-34: 2.125rem;
--t-44: 2.75rem;
--rand: 22px;
--spalte: 1080px;
}
/* ---------- Rücksetzung ---------- */
*, *::before, *::after { box-sizing: border-box; }
/* 28.08.2026, Toms Befund: "wenn ich scrolle, bewegt sich die Seite nach links
oder rechts, es muss doch fixiert werden". body hatte zwar overflow-x: hidden,
das reicht auf dem Telefon aber nicht: solange nur der BODY zumacht, kann der
Wurzel-Container weiterhin seitlich mitgezogen werden. Beides muss zu, und die
Kette nach aussen muss unterbunden werden, damit eine waagerechte Wischgeste
in den Stimmen nicht die ganze Seite mitnimmt. */
html {
-webkit-text-size-adjust: 100%;
scroll-behavior: smooth;
/* 28.08.2026: Hier stand ZUSAETZLICH overflow-x:hidden, und dasselbe noch einmal
auf body. Stehen beide, rechnet der Browser overflow-y auf "auto": body wird
ein eigener Rollbereich, der selbst nie rollt — und damit verliert
position:sticky seinen Anker. Gemessen: auf 9 von 11 Seiten stand die
Kopfleiste nach 1800 px Rollen bei -1800 statt bei 0, klebte also nicht.
Der Kaufknopf "Deinen Abdruck erstellen" war nach dem ersten Wisch weg; auf
/ueber-mich.php sind das 19.769 px Seite ohne sichtbaren Kaufweg. Nur die zwei
Seiten, die stil.css NICHT laden, klebten richtig.
Nachgeprueft, ob hidden hier ueberhaupt etwas verdeckt: mit overflow-x:visible
liegt scrollWidth auf allen 11 Seiten exakt auf Fensterbreite. Es verdeckt
nichts. Gegen das seitliche Wackeln, weswegen es einmal eingebaut wurde, wirkt
.stimmen-bahn { overscroll-behavior-x: contain }.
Die Regel bleibt deshalb NUR auf body stehen, hier nicht.
(Die doppelten max-width- und overscroll-Zeilen waren ebenfalls Dubletten.) */
max-width: 100%;
overscroll-behavior-x: none;
}
body {
margin: 0;
background: var(--nacht-tief);
color: var(--text);
font-family: var(--sans);
font-size: var(--t-18);
font-weight: 400;
line-height: 1.65;
-webkit-font-smoothing: antialiased;
overflow-x: hidden;
}
img { max-width: 100%; display: block; }
a { color: var(--gold); }
::selection { background: rgba(201,168,76,0.38); color: var(--text); }
/* Ein einziger, sehr ruhiger Lichtschein über dem Grund — kein Sektionswechsel.
Dieselben drei Lichter wie die Live-Seite: Gold rechts oben über dem Hero,
ein kaltes Blau links, ein sehr leiser Goldschein von unten. */
body::before {
content: '';
position: fixed;
inset: 0;
pointer-events: none;
z-index: 0;
background:
radial-gradient(900px 640px at 82% -8%, rgba(201,168,76,0.10), transparent 64%),
radial-gradient(820px 620px at 4% 16%, rgba(30,58,95,0.28), transparent 62%),
radial-gradient(1100px 800px at 50% 108%, rgba(201,168,76,0.05), transparent 62%);
}
/* ---------- Raster ---------- */
.spalte {
width: 100%;
max-width: var(--spalte);
margin: 0 auto;
padding: 0 var(--rand);
position: relative;
z-index: 1;
}
.spalte-schmal { max-width: 720px; }
section { position: relative; z-index: 1; }
.abschnitt { padding: 62px 0; }
.abschnitt-eng { padding: 56px 0; }
/* Eine feine Linie statt eines neuen Hintergrunds */
.trennung { border-top: 1px solid var(--linie); }
/* ---------- Typografie ---------- */
h1, h2, h3 {
font-family: var(--serif);
font-weight: 700;
line-height: 1.16;
letter-spacing: -0.01em;
margin: 0 0 18px;
color: var(--text);
text-wrap: balance;
}
h1 { font-size: var(--t-34); line-height: 1.12; }
h2 { font-size: var(--t-28); }
h3 { font-size: var(--t-22); }
p { margin: 0 0 18px; max-width: 62ch; }
.gross { font-size: var(--t-20); line-height: 1.6; }
.sekundaer { color: var(--slate); }
.klein { font-size: var(--t-16); color: var(--slate); line-height: 1.6; }
.winzig { font-size: var(--t-13); color: var(--slate); letter-spacing: 0.14em; text-transform: uppercase; }
.marke {
display: inline-block;
font-size: var(--t-13);
letter-spacing: 0.2em;
text-transform: uppercase;
color: var(--gold);
margin-bottom: 16px;
}
em, .kursiv { font-family: var(--serif); font-style: italic; font-weight: 400; }
.zitat-gross {
font-family: var(--serif);
font-size: var(--t-22);
line-height: 1.5;
font-style: italic;
color: var(--text);
max-width: 24ch;
}
/* Die vier Gold-Höhepunkte. Mehr gibt es auf dieser Seite nicht. */
.hoehepunkt {
font-family: var(--serif);
font-weight: 700;
color: var(--gold-hell);
line-height: 1;
}
/* ---------- Knöpfe ---------- */
.knopf {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 10px;
min-height: 56px;
padding: 15px 28px;
border-radius: 12px;
font-family: var(--sans);
font-size: var(--t-18);
font-weight: 600;
letter-spacing: 0.01em;
text-decoration: none;
text-align: center;
border: 1px solid transparent;
cursor: pointer;
transition: transform .16s ease, box-shadow .16s ease, background .16s ease;
}
/* Vollton — Gold, wie auf der Live-Seite. Ein Stück pro Bildschirmhöhe. */
.knopf-voll {
background: var(--gold);
color: var(--nacht-satt);
box-shadow: 0 10px 30px rgba(201,168,76,0.22);
}
.knopf-voll:hover {
background: var(--gold-hell);
transform: translateY(-2px);
box-shadow: 0 12px 36px rgba(201,168,76,0.32);
}
/* Umriss — der zweite Weg, goldene Haarlinie statt zweiter Aktionsfarbe */
.knopf-umriss {
background: transparent;
color: var(--gold-hell);
border-color: rgba(201,168,76,0.6);
}
.knopf-umriss:hover { border-color: var(--gold); color: var(--gold); }
/* Textlink — der dritte Weg */
.textlink {
display: inline-flex;
align-items: center;
min-height: 48px;
color: var(--slate);
font-size: var(--t-18);
text-decoration: none;
border-bottom: 1px solid var(--linie-gold);
}
.textlink:hover { color: var(--gold-hell); }
.beruhigung {
display: block;
font-size: var(--t-16);
color: var(--slate);
margin-top: 12px;
}
.knopf-zeile { display: flex; flex-wrap: wrap; gap: 14px 26px; align-items: center; }
/* ---------- Karten ---------- */
.karte {
background: var(--panel);
border: 1px solid var(--linie);
border-radius: 18px;
padding: 30px;
}
.karte-hell { background: var(--panel-hell); }
.raster-2 { display: grid; grid-template-columns: 1fr; gap: 20px; }
.raster-3 { display: grid; grid-template-columns: 1fr; gap: 20px; }
/* ---------- Fuß einer Stimme (Sektion 7) ----------
Zugefügt 15.08.2026 mit dem Austausch der März-Stimmen. Gebaut wie der
Stimmen-Fuß auf /astro.php (.voice .who / .initial), damit Startseite und
Produktseiten dieselbe Handschrift haben. Das Goldmedaillon ist der einzige
Goldakzent der Sektion — Gold bleibt Währung, der Vollton-Knopf steht
woanders auf dem Bildschirm. */
.stimme-fuss {
margin: 18px 0 0;
display: flex;
align-items: center;
gap: 11px;
font-size: var(--t-16);
color: var(--slate);
line-height: 1.5;
}
.stimme-initial {
width: 38px;
height: 38px;
flex: 0 0 38px;
border-radius: 50%;
background: linear-gradient(135deg, var(--gold), var(--gold-tief));
color: var(--nacht-satt);
font-family: var(--sans);
font-weight: 700;
font-size: 0.9rem;
display: flex;
align-items: center;
justify-content: center;
}
/* ---------- Aktions-Banner über der Kopfleiste ----------
Bauform aus /inc-topnav.php der Live-Seite übernommen, aber in den Farben
dieser Kopie und ohne Streichpreis, ohne Stückzahl. */
.zg-banner {
background: linear-gradient(90deg, rgba(201,168,76,0.18), rgba(201,168,76,0.05));
border-bottom: 1px solid rgba(201,168,76,0.28);
text-align: center;
}
.zg-banner a {
display: block;
padding: 11px var(--rand);
color: var(--gold-hell);
font-size: var(--t-16);
letter-spacing: 0.02em;
text-decoration: none;
}
.zg-banner a:hover { color: var(--text); }
.zg-banner strong { color: var(--text); font-weight: 600; }
.zg-banner-funke { color: var(--gold); margin-right: 6px; }
/* ---------- Kopfleiste ---------- */
.kopf {
position: sticky;
top: 0;
z-index: 40;
/* 28.08.2026: hier stand rgba(10,10,15,0.92) + backdrop-filter: blur(10px).
Unter dem Weichzeichner wurde der neue Reiter "Meine Arbeit" samt seiner
Tafel nicht mitgezeichnet (im Browser gemessen: Kasten 104x48 und Tafel
320x462 vorhanden, nichts beschneidet sie, trotzdem kein Pixel). Ein
Weichzeichner auf einer Leiste, die ohnehin fast deckend ist, bringt nichts
und kostet Risiko. Jetzt deckend, wie auf der Live-Seite. */
background: #0A0A0F;
border-bottom: 1px solid var(--linie);
}
.kopf-inner {
position: relative;
/* Die Kopfleiste darf breiter laufen als der Textkörper (1080 px): sechs
Menüpunkte, das Etikett und der Kauf-Knopf brauchen die Luft, sonst
drückt es den Knopf aus der Leiste. */
max-width: 1280px;
margin: 0 auto;
padding: 12px var(--rand);
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
}
.kopf-marke {
font-family: var(--serif);
font-size: var(--t-20);
letter-spacing: 0.16em;
color: var(--gold);
text-decoration: none;
line-height: 1.1;
display: inline-flex;
flex-direction: column;
justify-content: center;
min-height: 48px;
}
/* Die zweite Zeile der Marke, wie in der Live-Kopfleiste */
/* 28.08.2026, Toms Befund: "oben links Dein Schmerz sucht Heilung muss eine andere
Farbe, das sieht man nicht". Nachgerechnet war die Farbe nicht das Problem:
#E8D5A3 auf #0A0A0F ergibt 13,6:1, weit ueber der Schwelle. Es war die GROESSE.
0,58rem sind rund 9 px, dazu Grossbuchstaben, 0,13em Sperrung und 85 % Deckkraft —
damit steht der Satz zwar da, aber niemand liest ihn. Jetzt groesser, enger
gesperrt und mit voller Deckkraft. Es ist unser Leitsatz, er darf gesehen werden. */
.kopf-marke small {
display: block;
font-family: var(--serif);
font-style: italic;
font-size: 0.72rem;
letter-spacing: 0.09em;
text-transform: uppercase;
color: var(--gold-hell);
margin-top: 4px;
font-weight: 400;
white-space: nowrap;
}
@media (max-width: 420px) {
.kopf-marke small { font-size: 0.63rem; letter-spacing: 0.06em; }
.test-etikett { padding: 0 10px; font-size: 0.75rem; margin-right: 8px; }
}
/* Auf den schmalsten Telefonen (unter 380 px) hat die Zeile unter der Marke
keinen Platz mehr. Sie geht, das Etikett bleibt — der Hinweis, dass diese
Fassung nicht live ist, wiegt schwerer als der Untertitel. */
@media (max-width: 379px) {
.kopf-inner { padding-left: 14px; padding-right: 14px; gap: 10px; }
.kopf-marke small { display: none; }
}
/* Und auf den ganz alten kleinen Geräten (320 px) noch eine Spur enger. */
@media (max-width: 339px) {
.kopf-inner { gap: 8px; }
.kopf-marke { font-size: 1rem; letter-spacing: 0.1em; }
}
.kopf-links { display: none; gap: 20px; list-style: none; margin: 0; padding: 0; }
.kopf-links a {
/* 28.08.2026: stand auf var(--slate) = #B6AC99 bei 0,95rem (gemessen 13,5 px).
Die Live-Seite, die Tom gefaellt, traegt #E8E4D8 bei 14,4 px. Der Kontrast
war mit 8,79:1 nie das Problem, der TON war es: mattes Beige liest sich wie
ausgegraut, fast weiss liest sich wie ein Menue. */
color: var(--text);
text-decoration: none;
font-size: 14.4px;
display: inline-flex;
align-items: center;
min-height: 48px;
/* Sechs Menüpunkte in einer Zeile: keiner darf umbrechen, sonst steht die
Leiste zweizeilig und die Kopfhöhe springt. */
white-space: nowrap;
}
.kopf-links a:hover { color: var(--text); }
/* Wo man gerade ist, steht in Gold — die einzige Stelle, an der das Menü Gold trägt. */
.kopf-links a.hier { color: var(--gold); }
.kopf-handlung { display: flex; align-items: center; gap: 10px; }
/* Der Kauf-Knopf der Kopfleiste. Klein gehalten: der große Vollton-Knopf
gehört dem Hero, hier steht nur die Abkürzung für Wiederkehrer. */
.kopf-knopf {
display: none;
align-items: center;
min-height: 44px;
padding: 0 15px;
border-radius: 999px;
background: var(--gold);
color: var(--nacht-satt);
font-size: 0.95rem;
font-weight: 700;
letter-spacing: 0.01em;
text-decoration: none;
white-space: nowrap;
transition: transform .16s ease, background .16s ease;
}
.kopf-knopf:hover { background: var(--gold-hell); transform: translateY(-1px); }
.kopf-hamburger {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 48px;
min-height: 48px;
background: none;
border: 1px solid var(--linie-gold);
border-radius: 12px;
color: var(--gold);
font-size: 1.35rem;
line-height: 1;
cursor: pointer;
}
.kopf-hamburger:hover { border-color: var(--gold); }
/* Solange die sechs Menüpunkte nicht nebeneinander passen, klappt das Menü
unter der Leiste auf — auf dem Telefon und auf schmalen Notebooks. */
/* 21.08.2026: Der Hamburger erscheint seit heute bis 1319 px (neunter
Menuepunkt "Hoerbuecher"), das Aufklapp-Menue endete aber bei 1199 px.
Zwischen 1200 und 1319 px tat der Hamburger deshalb gar nichts:
.kopf-links blieb auf display:none, die .offen-Regel griff nicht.
Beide Grenzen liegen jetzt aufeinander. */
@media (max-width: 1319px) {
.kopf-links.offen {
display: flex;
flex-direction: column;
gap: 0;
position: absolute;
top: 100%;
left: 0;
right: 0;
/* Volldeckend, ohne eigenen backdrop-filter: liegt dieser innerhalb der
ebenfalls gefilterten Kopfleiste, zeichnet Chrome die Fläche durchsichtig
und der Hero-Text scheint durch die Menüpunkte. */
background: var(--nacht-tief);
border-bottom: 1px solid var(--linie);
box-shadow: 0 18px 40px rgba(0,0,0,0.55);
padding: 8px var(--rand) 14px;
}
.kopf-links.offen li { width: 100%; }
.kopf-links.offen a {
display: flex;
width: 100%;
padding: 4px 0;
border-bottom: 1px solid rgba(240,230,211,0.08);
font-size: var(--t-18);
}
}
/* ---------- Sektion 1 · Hero ----------
STRAFFUNG 16.08.2026. Vorher: padding 22/52, Absatz 56ch, Bild 430 px breit
(bei Seitenverhältnis 1:1,15 also 495 px hoch). Das ergab auf dem Telefon
einen 1308 px hohen Hero, in dem unter dem Kauf-Knopf noch einmal fast zwei
Bildschirmhöhen fast leere Fläche standen.
Jetzt trägt der erste Bildschirm genau das, was die Hero-Formel verlangt:
Marke, Überschrift, ein Absatz, ein Knopf mit Preis, ein leiser Textlink.
Alles darunter beginnt sichtbar, damit klar ist, dass die Seite weitergeht. */
.hero { padding: 12px 0 36px; }
.hero .marke { margin-bottom: 8px; }
.hero h1 { margin-bottom: 14px; }
/* 46ch statt 56ch: Der Absatz bleibt auch auf breiten Schirmen dreizeilig,
statt zu zwei langen Zeilen auseinanderzulaufen. 20 px Abstand nach unten
binden ihn an den Knopf, statt ihn im Raum stehen zu lassen. */
.hero-text {
font-size: var(--t-18);
color: var(--slate);
max-width: 46ch;
margin-bottom: 20px;
}
/* Der zweite Weg ist ein leiser Nachsatz, kein eigener Block. Vorher standen
hier 26 px Abstand und zwei Links; einer genügt und rückt näher heran. */
.hero-zweitweg { margin-top: 10px; }
/* Wort und Buch-Animation nebeneinander. Auf dem Telefon untereinander:
erst die H1 mit dem Knopf, darunter die Animation — die Reihenfolge im
Quelltext ist zugleich die Lesereihenfolge, es wird nichts umsortiert. */
.hero-raster {
display: grid;
grid-template-columns: 1fr;
gap: 18px;
align-items: center;
}
/* Nur der Platz für die Animation, mehr nicht. Ihre eigene Größe, ihre Farben
und ihr Ablauf bleiben unangetastet — sie bringt ihren eigenen durchsichtigen
Grund mit, sodass das Mitternachtsblau der Seite hindurchscheint und das Gold
der Wörter darauf sitzt.
Die Höhe folgt aus der Breite (.ka-anim hat aspect-ratio 1 / 1,15). Auf dem
Telefon deshalb 250 px statt 430 px: das sind 288 px Höhe statt 495 px. Die
Figur bleibt erkennbar, aber sie schiebt nicht mehr die halbe Seite nach
unten. Angefasst wird nur dieser Rahmen, nicht die Animation selbst. */
.hero-bild {
width: 100%;
max-width: 250px;
margin: 0 auto;
}
/* ---------- Sektion 2 · Lebenszahl ---------- */
.zahl-feld {
display: flex;
flex-wrap: wrap;
gap: 12px;
align-items: flex-end;
}
/* Auf dem Telefon steht jedes Feld für sich über die volle Breite. Sonst
wäre das Datumsfeld schmaler als das Adressfeld, und die beiden Pflicht-
felder sähen unterschiedlich wichtig aus. */
.zahl-feld > div { flex: 1 1 100%; }
.zahl-feld label {
display: block;
font-size: var(--t-16);
color: var(--slate);
margin-bottom: 8px;
}
.zahl-feld input {
width: 100%;
min-height: 56px;
padding: 14px 16px;
background: var(--nacht);
border: 1px solid rgba(240,230,211,0.26);
border-radius: 12px;
color: var(--text);
font-family: var(--sans);
font-size: var(--t-18);
}
.zahl-feld input:focus { outline: 2px solid var(--gold); outline-offset: 1px; }
.zahl-feld input.fehlt {
border-color: #E5876F;
background: rgba(229,135,111,0.07);
}
/* Das Wort „Pflicht" hinter dem Feldnamen. Klein, gold, ohne Sternchen —
ein Sternchen erklärt sich nicht von selbst, das Wort schon. */
.pflicht {
color: var(--gold);
font-size: 0.78em;
letter-spacing: 0.08em;
text-transform: uppercase;
margin-left: 6px;
}
/* Der Datenschutz-Satz unter den Feldern. Er soll lesbar sein, aber nicht
mit der Überschrift oder dem Ergebnis um Aufmerksamkeit streiten. */
.zahl-datenschutz {
color: var(--slate);
margin: 16px 0 0;
max-width: 62ch;
line-height: 1.6;
}
.zahl-datenschutz a { color: var(--gold); }
/* Zustand während gespeichert wird: der Knopf bleibt stehen, wird aber ruhig. */
#zahl-knopf[disabled] { opacity: 0.55; cursor: progress; }
/* Honigtopf — für Menschen unsichtbar, für Roboter ein sichtbares Feld.
Kein display:none, das erkennen die besseren Roboter. */
.honigtopf {
position: absolute;
left: -9999px;
width: 1px;
height: 1px;
overflow: hidden;
}
#zahl-form { position: relative; }
#zahl-ergebnis { display: none; margin-top: 26px; }
.zahl-gross {
font-size: 4.5rem; /* Gold 1 */
letter-spacing: -0.03em;
}
.zahl-hinweis { font-size: var(--t-16); color: var(--slate); }
/* ---------- Sektion 5 · Der Beleg ----------
Vorher lag hier ein voller Seiten-Screenshot über die ganze Breite: die Schrift
darin war winzig und die Seite unten abgeschnitten. Jetzt eine geschlossene
Bildeinheit in eigener Breite, im eigenen Seitenverhältnis, nichts beschnitten. */
.beleg {
margin: 0 auto 32px;
max-width: 640px;
padding: 14px;
background: var(--panel);
border: 1px solid var(--linie-gold);
border-radius: 18px;
box-shadow: 0 24px 60px rgba(0,0,0,0.45);
}
.beleg img {
width: 100%;
height: auto;
border-radius: 12px;
border: 1px solid var(--linie);
}
.beleg figcaption {
margin-top: 14px;
padding: 0 4px;
font-size: var(--t-16);
line-height: 1.55;
color: var(--slate);
}
/* ---------- Sektion 6 · Preis ---------- */
.preis-karte { display: flex; flex-direction: column; height: 100%; position: relative; }
.preis-karte .preis {
font-family: var(--serif);
font-size: var(--t-44);
font-weight: 700;
line-height: 1;
margin: 6px 0 4px;
color: var(--text);
}
.preis-karte.empfohlen {
border-color: var(--linie-gold);
background: var(--panel-hell);
box-shadow: 0 0 0 1px rgba(201,168,76,0.18), 0 24px 60px rgba(0,0,0,0.45);
}
.preis-karte.empfohlen .preis { color: var(--gold); } /* Gold 2 — nur die
empfohlene Karte trägt den Preis in Gold. Die zweite Karte behält Creme,
sonst stehen zwei gleich laute Preise nebeneinander. */
.etikett {
display: inline-block;
align-self: flex-start;
font-size: var(--t-13);
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--nacht-satt);
background: var(--gold);
border-radius: 999px;
padding: 6px 14px;
margin-bottom: 14px;
}
.liste { list-style: none; margin: 16px 0 24px; padding: 0; }
.liste li {
position: relative;
padding-left: 28px;
margin-bottom: 12px;
font-size: var(--t-18);
color: var(--slate);
line-height: 1.55;
}
.liste li::before {
content: '✦';
position: absolute;
left: 0;
top: 0;
color: var(--gold-tief);
}
.preis-karte .knopf { margin-top: auto; }
.garantie-streifen {
margin-top: 22px;
padding: 18px 22px;
border: 1px solid var(--linie);
border-radius: 14px;
background: rgba(18,18,26,0.75);
font-size: var(--t-18);
color: var(--slate);
}
.garantie-streifen strong { color: var(--text); font-weight: 600; }
/* ---------- Sektion 8 · Kalender ---------- */
.abo-preis { font-size: var(--t-44); } /* Gold 3 */
.stufen { display: grid; grid-template-columns: 1fr; gap: 14px; margin-top: 24px; }
.stufe {
display: flex;
justify-content: space-between;
align-items: baseline;
gap: 16px;
padding: 16px 20px;
border: 1px solid var(--linie);
border-radius: 12px;
background: rgba(18,18,26,0.7);
}
.stufe b { font-family: var(--serif); font-size: var(--t-22); font-weight: 700; white-space: nowrap; }
.stufe span { font-size: var(--t-16); color: var(--slate); }
/* ---------- Sektion 9 · Tom ---------- */
.tom { display: grid; grid-template-columns: 1fr; gap: 28px; align-items: center; }
.tom img {
width: 168px;
height: 168px;
object-fit: cover;
object-position: 50% 20%;
border-radius: 50%;
border: 1px solid var(--linie-gold);
}
/* ---------- Sektion 10 · Weitere Wege ---------- */
.weg-gross .karten-preis { font-size: var(--t-34); } /* Gold 4 */
/* Der Platz für die Kraftorte-Animation (astro-animation.php). Bis zum
15.08.2026 stand hier eine zweite Instanz der Buch-Animation; seit Toms
Auftrag an diesem Tag läuft an dieser Stelle der Globus mit den goldenen
Planetenlinien. Er bringt seinen eigenen durchsichtigen Grund mit und
braucht hier nur Platz und etwas Luft nach unten. */
.weg-anim {
width: 100%;
max-width: 360px;
margin: 0 auto 18px;
}
/* ---------- Toms laufende Kraftorte-Karte (kraftlinien-karte.js) ----------
15.08.2026, Toms Auftrag: An dieser Stelle stand ein Standbild von Toms
Astrokartographie (kraftorte-beispiel.png). Jetzt läuft hier dieselbe Karte
als Animation — vierzig echte Linien, gerechnet mit der Swiss Ephemeris,
eingefärbt nach Thema und mit sichtbaren Schildern beschriftet.
Die Klassen tragen den eigenen Vorsatz zgm-, damit sie sich mit nichts aus
der Live-Seite oder aus der Globus-Animation (zgk-) beißen. */
.weg-beleg {
margin: 0 0 20px;
padding: 0;
overflow: hidden;
background: var(--nacht);
border: 1px solid var(--linie-gold);
border-radius: 14px;
}
.weg-beleg img { /* nur noch der noscript-Fall */
width: 100%;
height: auto;
display: block;
}
.zgm-kopf { padding: 16px 18px 12px; }
.zgm-kopf .marke { margin-bottom: 8px; }
.zgm-satz {
margin: 0;
min-height: 3.2em;
font-size: var(--t-16);
line-height: 1.5;
color: var(--slate);
transition: opacity .3s;
}
.zgm-satz b { font-family: var(--serif); font-size: var(--t-20); font-weight: 700; }
.zgm-hilfe { display: block; margin-top: 5px; font-size: var(--t-13); color: var(--slate); opacity: .8; }
.zgm-flaeche {
position: relative;
background: #07070C;
border-top: 1px solid var(--linie);
border-bottom: 1px solid var(--linie);
line-height: 0;
}
.zgm-svg { width: 100%; height: auto; display: block; }
.zgm-land path { fill: #1E2A49; stroke: #3D4E77; stroke-width: .8; vector-effect: non-scaling-stroke; }
.zgm-netz line { stroke: rgba(201,168,76,0.10); stroke-width: .7; vector-effect: non-scaling-stroke; }
.zgm-netz .zgm-netz-aequator { stroke: rgba(201,168,76,0.24); }
.zgm-netz .zgm-netz-null { stroke: rgba(201,168,76,0.20); }
.zgm-netz .zgm-netz-wk { stroke: rgba(201,168,76,0.08); stroke-dasharray: 3 7; }
/* Grundzustand ist SICHTBAR: fällt die Animation aus, steht die ganze Karte da. */
.zgm-thema { transition: opacity .35s; }
.zgm-thema.zgm-gedimmt { opacity: .10; }
.zgm-linie {
vector-effect: non-scaling-stroke;
filter: drop-shadow(0 0 3px rgba(0,0,0,.85));
stroke-dashoffset: 0;
transition: opacity .5s;
}
.zgm-linie-zart { opacity: .55; }
/* Wenn alle vierzig stehen, nimmt sich das Bild etwas zurück, damit die Erde
sichtbar bleibt und die Schilder oben liegen. */
.zgm-linien.zgm-ruhe .zgm-linie { opacity: .78; }
.zgm-linien.zgm-ruhe .zgm-linie-zart { opacity: .38; }
.zgm-thema:hover .zgm-linie,
.zgm-linien.zgm-ruhe .zgm-thema:hover .zgm-linie { opacity: 1; }
.zgm-linien.zgm-gefiltert .zgm-thema:not(.zgm-gedimmt) .zgm-linie { opacity: 1; }
.zgm-linien.zgm-gefiltert .zgm-thema:not(.zgm-gedimmt) .zgm-linie-zart { opacity: .7; }
.zgm-linien.zgm-zeichnet .zgm-linie {
stroke-dasharray: var(--dash);
animation-name: zgm-zeichnen;
animation-timing-function: cubic-bezier(.22,.61,.36,1);
animation-fill-mode: backwards;
}
@keyframes zgm-zeichnen { from { stroke-dashoffset: var(--dash); } to { stroke-dashoffset: 0; } }
/* Die Schilder: der Name des Themas, an seiner Leitlinie. */
.zgm-schild { opacity: 1; transition: opacity .45s; }
.zgm-schilder.zgm-da .zgm-schild { opacity: 0; }
.zgm-schilder.zgm-da .zgm-schild.zgm-schild-da { opacity: 1; }
/* Beim Filtern müssen die anderen Schilder auch dann zurücktreten, wenn sie
die Animation schon sichtbar geschaltet hat — deshalb dieselbe Stärke der
Auswahl und ein Platz weiter unten. */
.zgm-schilder .zgm-schild.zgm-gedimmt,
.zgm-schilder.zgm-da .zgm-schild.zgm-schild-da.zgm-gedimmt { opacity: .12; }
/* Ränder und Striche der Schilder in Bildpunkten statt in Karten-Einheiten,
sonst verschwinden sie auf dem Telefon. */
.zgm-schild-kasten { fill: rgba(6,6,10,0.82); stroke: var(--zgm-farbe, #C9A84C);
stroke-width: 1.4; vector-effect: non-scaling-stroke; }
.zgm-schild-strich { stroke: var(--zgm-farbe, #C9A84C); stroke-width: 2;
vector-effect: non-scaling-stroke; }
.zgm-schild-punkt { fill: var(--zgm-farbe, #C9A84C); }
/* Die Schriftgröße setzt kraftlinien-karte.js selbst, gerechnet aus der
tatsächlichen Breite der Bühne — hier steht deshalb bewusst keine, sonst
überstimmte das Blatt die Rechnung und die Wörter blieben am Telefon winzig. */
.zgm-schild-text {
fill: var(--zgm-farbe, #C9A84C);
font-family: var(--sans);
font-weight: 600;
letter-spacing: .1em;
}
.zgm-ort { opacity: 0; transition: opacity .6s; }
.zgm-ort.zgm-ort-da { opacity: 1; }
.zgm-ort-punkt { fill: #FFF6DC; stroke: var(--gold); stroke-width: 1.6; vector-effect: non-scaling-stroke; }
.zgm-ort-halo { fill: none; stroke: var(--gold); stroke-width: 1; opacity: .55;
vector-effect: non-scaling-stroke; animation: zgm-puls 2.8s ease-out infinite; }
@keyframes zgm-puls { 0% { r: 5; opacity: .75; } 70% { r: 17; opacity: 0; } 100% { r: 17; opacity: 0; } }
/* Auch hier setzt das Skript die Größe, aus demselben Grund. */
.zgm-ort-text {
fill: var(--gold-hell); font-family: var(--sans); font-weight: 600;
letter-spacing: .06em; paint-order: stroke; stroke: #07070C; stroke-width: 6px; stroke-linejoin: round;
}
/* Am Telefon ist die Karte nur rund 300 Bildpunkte breit. Dort dürfen die
Linien dünner sein, sonst deckt das Bündel die Erde zu. */
@media (max-width: 640px) {
.zgm-linie { stroke-width: 2.2px; }
.zgm-linie-zart { stroke-width: 1.3px; }
}
.zgm-chips { display: flex; flex-wrap: wrap; gap: 6px; padding: 13px 14px 3px; }
.zgm-chip {
display: inline-flex; align-items: center; gap: 6px;
background: rgba(255,255,255,0.03); border: 1px solid var(--linie); color: var(--slate);
font-family: var(--sans); font-size: var(--t-13); letter-spacing: .03em;
padding: 6px 11px; border-radius: 999px; cursor: pointer; transition: all .2s;
}
.zgm-chip i { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }
.zgm-chip:hover { border-color: var(--linie-gold); color: var(--text); }
.zgm-chip.zgm-chip-an { background: rgba(201,168,76,0.16); border-color: var(--gold); color: var(--gold-hell); }
.zgm-chip.zgm-chip-blitz { border-color: var(--gold); color: var(--gold-hell); transform: translateY(-1px); }
.zgm-fuss { padding: 12px 15px 16px; font-size: var(--t-13); color: var(--slate); line-height: 1.55; }
.zgm-neu {
/* 20.08.2026: war 30 px hoch. Der Knopf baut die Kraftlinien noch einmal
auf — der einzige Knopf im Kartenbeleg, und am Handy zu schmal zum
Treffen. Auf 44 px gebracht wie die übrigen Tippziele. */
display: inline-flex; align-items: center; min-height: 44px;
margin: 0 9px 5px 0; background: none;
border: 1px solid var(--linie-gold); color: var(--gold);
font-family: var(--sans); font-size: var(--t-13); padding: 0 15px;
border-radius: 999px; cursor: pointer; transition: all .2s;
}
.zgm-neu:hover:not(:disabled) { background: rgba(201,168,76,0.12); border-color: var(--gold); }
.zgm-neu:disabled { opacity: .4; cursor: default; }
@media (min-width: 640px) {
.zgm-kopf { padding: 20px 22px 14px; }
.zgm-chips { padding: 16px 20px 4px; }
.zgm-fuss { padding: 14px 20px 18px; }
.zgm-satz { min-height: 2.8em; }
}
/* ============================================================================
WIEDERHERGESTELLTE SEKTIONEN (15.08.2026)
Sektionen, die auf der Live-Startseite stehen und in der ersten Fassung dieser
Kopie fehlten. Sie bekommen keine eigenen Hintergründe und keine eigene
Akzentfarbe — sie benutzen dieselben Bausteine wie der Rest: .karte, .liste,
.marke, .hoehepunkt, eine Haarlinie als Trennung.
========================================================================== */
/* ---------- Sektion 1b · Die Zahlen ---------- */
.zahlen-streifen {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 26px 18px;
text-align: center;
}
.zahl-block { display: flex; flex-direction: column; gap: 6px; }
.zahl-block .zahl-kopf { font-size: var(--t-34); }
.zahl-block .klein { max-width: 22ch; margin: 0 auto; }
/* ---------- Sektion 5b · So wirst du dich fühlen ---------- */
.raute {
display: block;
color: var(--gold-tief);
font-size: var(--t-22);
line-height: 1;
margin-bottom: 14px;
}
/* ---------- Sektion 5c · Vergleich ---------- */
.vergleich-karte { display: flex; flex-direction: column; height: 100%; }
.vergleich-liste { list-style: none; margin: 8px 0 0; padding: 0; }
.vergleich-liste li {
position: relative;
padding-left: 30px;
margin-bottom: 12px;
font-size: var(--t-18);
line-height: 1.55;
}
.vergleich-liste.gegen li { color: var(--slate); }
.vergleich-liste.gegen li::before {
content: '×';
position: absolute;
left: 2px;
top: -1px;
color: rgba(240,230,211,0.42);
font-size: var(--t-22);
line-height: 1.2;
}
.vergleich-liste.dafuer li { color: var(--text); }
.vergleich-liste.dafuer li::before {
content: '✦';
position: absolute;
left: 0;
top: 0;
color: var(--gold);
}
/* Nur die rechte Karte ist hervorgehoben — .empfohlen kommt aus dem Preis-Block,
das Etikett sitzt hier über der Überschrift statt über dem Preis. */
.vergleich-karte.empfohlen {
border-color: var(--linie-gold);
background: var(--panel-hell);
box-shadow: 0 0 0 1px rgba(201,168,76,0.18), 0 24px 60px rgba(0,0,0,0.45);
}
/* ---------- Sektion 5d · Drei Schritte ---------- */
.schritt-karte { position: relative; }
.schritt-zahl {
display: block;
font-family: var(--serif);
font-size: var(--t-28);
font-weight: 700;
line-height: 1;
color: var(--gold-tief);
margin-bottom: 12px;
}
/* ---------- Sektion 7b · Heilungs-Audio ---------- */
/* Der eine gerahmte Satz mitten im Text — zwei Haarlinien, kein Kasten. */
.zitat-gross.balken {
margin: 26px 0;
padding: 22px 0;
border-top: 1px solid var(--linie-gold);
border-bottom: 1px solid var(--linie-gold);
text-align: center;
max-width: none;
}
/* ---------- Sektion 7c · Hörproben — ENTFERNT am 15.08.2026 ----------
Die Regeln .hoerprobe und .hoerprobe audio sind mit der Sektion gestrichen
worden. Sie standen an keiner anderen Stelle der Seite. */
/* ---------- Sektion 9 · Über mich ---------- */
.signatur {
font-family: var(--serif);
font-style: italic;
font-size: var(--t-20);
color: var(--gold-hell);
margin: 22px 0 6px;
}
/* ---------- Sektion 11 · Fragen ---------- */
details.frage {
border-bottom: 1px solid var(--linie);
padding: 6px 0;
}
details.frage summary {
list-style: none;
cursor: pointer;
padding: 18px 40px 18px 0;
min-height: 48px;
font-family: var(--serif);
font-size: var(--t-20);
font-weight: 700;
color: var(--text);
position: relative;
}
details.frage summary::-webkit-details-marker { display: none; }
details.frage summary::after {
content: '+';
position: absolute;
right: 4px;
top: 50%;
transform: translateY(-50%);
color: var(--gold-tief);
font-family: var(--sans);
font-size: var(--t-28);
font-weight: 300;
line-height: 1;
}
details.frage[open] summary::after { content: '–'; }
details.frage p { font-size: var(--t-18); color: var(--slate); padding-bottom: 8px; }
/* ---------- Sektion 12 + Fuß ---------- */
.fuss {
border-top: 1px solid var(--linie);
padding: 44px 0 120px;
font-size: var(--t-16);
color: var(--slate);
}
.fuss a { color: var(--slate); text-decoration: none; border-bottom: 1px solid var(--linie); }
.fuss a:hover { color: var(--gold-hell); }
/* 28.08.2026, Toms Befund: "das Impressum und so sieht auch komisch aus, alles auf
der linken Seite, aber derselbe Stil Header und Button."
Die Fusszeile klebte linksbuendig an der Spaltenkante, waehrend Kopf und
Kaufleiste darueber mittig ausgerichtet sind. Auf einem breiten Bildschirm sah
das aus, als sei sie vergessen worden. Jetzt steht sie mittig, die Linkzeile
ebenso, und der Beschreibungssatz darunter in einer lesbaren Breite. */
.fuss { text-align: center; }
.fuss-links { display: flex; flex-wrap: wrap; justify-content: center;
gap: 12px 24px; margin: 0 0 20px; padding: 0; list-style: none; }
.fuss p { margin-left: auto; margin-right: auto; }
.fuss-links a { display: inline-flex; align-items: center; min-height: 48px; }
/* ---------- Sticky-Kaufleiste ---------- */
.kaufleiste {
position: fixed;
left: 0; right: 0; bottom: 0;
z-index: 50;
background: rgba(10,10,15,0.96);
backdrop-filter: blur(12px);
border-top: 1px solid var(--linie-gold);
padding: 12px var(--rand) calc(12px + env(safe-area-inset-bottom));
transform: translateY(120%);
transition: transform .22s ease;
}
.kaufleiste.sichtbar { transform: translateY(0); }
.kaufleiste-inner {
max-width: var(--spalte);
margin: 0 auto;
display: flex;
align-items: center;
justify-content: space-between;
gap: 14px;
}
.kaufleiste .was { line-height: 1.3; }
.kaufleiste .was strong { display: block; font-size: var(--t-16); color: var(--text); font-weight: 600; }
.kaufleiste .was span { font-size: var(--t-16); color: var(--slate); }
.kaufleiste .knopf { min-height: 52px; padding: 12px 22px; font-size: var(--t-16); white-space: nowrap; }
/* ---------- Kennzeichnung der Testversion ----------
Sitzt in der Kopfleiste und kostet dadurch keine eigene Bauhöhe.
Beim Livegang ersatzlos entfernen (ein Element im HTML, eine Regel hier). */
.test-etikett {
display: inline-flex;
align-items: center;
min-height: 48px;
padding: 0 14px;
margin-left: auto;
margin-right: 12px;
border: 1px solid rgba(201,168,76,0.6);
border-radius: 999px;
background: rgba(201,168,76,0.12);
color: var(--gold-hell);
font-size: var(--t-13);
letter-spacing: 0.08em;
text-decoration: none;
white-space: nowrap;
}
.test-etikett:hover { border-color: var(--gold); background: rgba(201,168,76,0.2); }
/* ---------- Ruhige Einblendung ----------
Nur wenn JavaScript läuft. Ohne JS (oder wenn skript.js nicht lädt) bleibt
die Seite vollständig sichtbar, statt bei opacity 0 hängen zu bleiben. */
.hat-js .auf { opacity: 0; transform: translateY(16px); transition: opacity .6s ease, transform .6s ease; }
.hat-js .auf.da { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
* { animation: none !important; transition: none !important; }
.hat-js .auf { opacity: 1; transform: none; }
html { scroll-behavior: auto; }
}
/* ---------- Ab 720 px ---------- */
@media (min-width: 720px) {
:root {
--t-28: 2.25rem;
--t-34: 3.25rem;
--t-44: 4rem;
--t-22: 1.5rem;
--t-20: 1.3125rem;
--rand: 32px;
}
.abschnitt { padding: 104px 0; }
.abschnitt-eng { padding: 72px 0; }
/* 16.08.2026: vorher 64/88. Auf einem 768 px hohen Laptop-Fenster endete der
Kauf-Knopf damit bei 685 px, der Beruhigungssatz darunter lag schon halb
unter der Faltkante. Jetzt beginnt die H1 höher und alles Wichtige steht
mit Abstand über der Kante. */
.hero { padding: 34px 0 52px; }
.raster-2 { grid-template-columns: 1fr 1fr; gap: 24px; }
.raster-3 { grid-template-columns: repeat(3, 1fr); gap: 22px; }
.stufen { grid-template-columns: repeat(3, 1fr); }
.tom { grid-template-columns: 168px 1fr; gap: 36px; }
/* Ab 720 px stehen Geburtsdatum und E-Mail nebeneinander, der Knopf rutscht
darunter über die volle Breite. Drei Dinge in einer Zeile wären hier zu
eng — die E-Mail-Adresse braucht mehr Platz als ein Datum. */
.zahl-feld > div { flex: 1 1 0; min-width: 0; }
.zahl-feld .knopf { flex: 1 0 100%; justify-content: center; }
.zahlen-streifen { grid-template-columns: repeat(4, 1fr); gap: 22px; }
.zahl-block .zahl-kopf { font-size: var(--t-44); }
.kopf-knopf { display: inline-flex; }
}
@media (min-width: 940px) {
.weg-raster { display: grid; grid-template-columns: 1.35fr 1fr; gap: 24px; align-items: start; }
/* Seit dem 15.08.2026 steht in diesem Abschnitt nur noch die Astro-Karte —
das Hörbuch-Angebot daneben ist raus. Eine Karte allein wird nicht in
eine zweispaltige Rinne gezwängt, sie nimmt die ganze Spalte. */
.weg-raster-einzeln { grid-template-columns: 1fr; }
/* Ab hier steht die Buch-Animation rechts neben dem Text. Der Text behält
die größere Spalte, damit die H1 nicht umbricht.
16.08.2026: Die Animation war 430 px breit und damit 495 px hoch — höher
als die ganze Textspalte, sie hat den Hero auf 901 px aufgeblasen. 360 px
Breite ergeben 414 px Höhe; damit richtet sich die Hero-Höhe wieder nach
dem Text und nicht nach dem Bild. */
.hero-raster { grid-template-columns: 1.1fr 0.9fr; gap: 40px; }
.hero-bild { margin: 0; justify-self: end; max-width: 360px; }
}
/* Ab hier stehen alle sechs Menüpunkte nebeneinander, ohne dass der Kauf-Knopf
aus der Leiste gedrückt wird. Darunter übernimmt der Hamburger. */
/* 21.08.2026: Mit dem neunten Punkt („Hörbücher") ragte der Kauf-Knopf bei
1200 px 57 px aus der Leiste (gemessen). Das volle Menü erscheint deshalb
erst ab 1320 px, darunter übernimmt der Hamburger. */
/* 28.08.2026: die Schwelle lag bei 1320 px, weil frueher NEUN Menuepunkte
nebeneinander standen und bei 1200 px 57 px aus der Leiste ragten. Seit die
Produkte unter "Deine Wege" liegen, sind es fuenf Punkte und 433 px statt 707.
Damit passt das Menue laengst ab 1100. Bei 1280, der haeufigsten Laptop-Breite,
bekam der Mensch sonst das Burger-Menue wie auf dem Telefon. */
@media (min-width: 1100px) {
.kopf-links { display: flex; }
.kopf-hamburger { display: none; }
}
/* Erst wenn wirklich Platz ist, trägt das Etikett seinen ganzen Satz. */
.etikett-zusatz { display: none; }
@media (min-width: 1400px) {
.etikett-zusatz { display: inline; }
}
/* ═══════════════════════════════════════════════════════════════════════════
UNTERSEITEN DER KOPIE
Ab hier stehen nur Bausteine, die es auf der Startseite nicht gibt: der
Seitenkopf der Unterseiten, die Kapitel-Typografie von „Über mich", das
Raster der Hörbücher und Artikel und das Kontaktformular. Alles benutzt
dieselben Farb- und Schrift-Werte wie oben — kein zweites Designsystem.
═══════════════════════════════════════════════════════════════════════════ */
/* ---------- Seitenkopf jeder Unterseite ---------- */
.seiten-kopf { padding: 48px 0 8px; }
.seiten-kopf h1 { margin-bottom: 18px; }
.seiten-kopf .fuehrung { font-size: var(--t-20); color: var(--slate); max-width: 60ch; }
.seiten-raster { display: grid; grid-template-columns: 1fr; gap: 34px; align-items: center; }
/* ---------- „Über mich": die Kapitel ----------
Die Klassennamen der Live-Seite (chapter-label, story-quote …) bleiben
erhalten, damit der Text ohne eine einzige Änderung übernommen werden
konnte. Ihr Aussehen kommt aus dieser Kopie. */
.kapitel-marke {
display: block;
font-size: var(--t-13);
letter-spacing: 0.2em;
text-transform: uppercase;
color: var(--gold);
margin-bottom: 10px;
}
.kapitel-titel { margin-bottom: 20px; }
.geschichte p { color: var(--slate); }
.geschichte-stark { color: var(--text); font-weight: 600; }
.geschichte-gold { color: var(--gold-hell); }
.geschichte-zitat {
font-family: var(--serif);
font-style: italic;
font-size: var(--t-22);
line-height: 1.5;
color: var(--text);
border-left: 2px solid var(--linie-gold);
padding: 6px 0 6px 22px;
margin: 30px 0;
max-width: 34ch;
}
.geschichte-trennung {
color: var(--gold);
opacity: 0.55;
letter-spacing: 0.6em;
text-align: center;
margin: 46px 0;
}
.signatur-gross {
font-family: var(--serif);
font-size: var(--t-22);
color: var(--gold-hell);
margin-top: 40px;
}
/* ---------- Hörbücher ---------- */
.hoer-raster { display: grid; grid-template-columns: 1fr; gap: 18px; }
.hoer-karte {
background: var(--panel);
border: 1px solid var(--linie);
border-radius: 18px;
padding: 24px 26px;
display: flex;
flex-direction: column;
gap: 6px;
}
.hoer-karte h3 { font-size: var(--t-20); margin-bottom: 4px; }
.hoer-karte .dauer { font-size: var(--t-13); letter-spacing: 0.14em; text-transform: uppercase; color: var(--slate); }
.hoer-karte .zeichen { font-size: 1.6rem; line-height: 1; margin-bottom: 8px; }
.hoer-karte .knopf { margin-top: 14px; align-self: flex-start; }
.hoer-preis { font-family: var(--serif); font-weight: 700; color: var(--gold-hell); font-size: var(--t-20); }
/* ---------- Artikel ---------- */
.artikel-raster { display: grid; grid-template-columns: 1fr; gap: 20px; }
.artikel-karte {
display: flex;
flex-direction: column;
background: var(--panel);
border: 1px solid var(--linie);
border-radius: 18px;
overflow: hidden;
text-decoration: none;
color: inherit;
transition: border-color .18s ease, transform .18s ease;
}
.artikel-karte:hover { border-color: var(--linie-gold); transform: translateY(-3px); }
.artikel-karte .bild { height: 176px; background-size: cover; background-position: center; background-color: var(--panel-hell); }
/* 29.08.2026: Die Karten zeigen jetzt ein echtes statt eines Hintergrunds,
damit der Browser verzoegert laden kann (vorher holte er alle elf sofort,
2.917 KB). Das Bild muss den Kasten fuellen wie vorher der Hintergrund. */
.artikel-karte .bild { overflow: hidden; }
.artikel-karte .bild img { width: 100%; height: 176px; object-fit: cover;
display: block; }
.artikel-karte .inhalt { padding: 22px 24px 26px; display: flex; flex-direction: column; flex: 1; }
.artikel-karte h2 { font-size: var(--t-22); margin-bottom: 10px; }
.artikel-karte .anriss { color: var(--slate); font-size: var(--t-16); flex: 1; }
.artikel-karte .fuss-zeile { font-size: var(--t-13); letter-spacing: 0.12em; text-transform: uppercase; color: var(--slate); margin-top: 14px; }
/* ---------- Kontakt ---------- */
.formular label { display: block; margin-bottom: 20px; font-size: var(--t-16); color: var(--text); }
.formular input,
.formular textarea {
display: block;
width: 100%;
margin-top: 8px;
min-height: 56px;
padding: 14px 16px;
border-radius: 12px;
border: 1px solid var(--linie);
background: rgba(255,255,255,0.03);
color: var(--text);
font-family: var(--sans);
font-size: var(--t-18);
}
.formular textarea { min-height: 190px; resize: vertical; line-height: 1.6; }
.formular input:focus,
.formular textarea:focus { outline: 2px solid var(--gold); outline-offset: 2px; border-color: transparent; }
.formular .hinweis { display: block; margin-top: 8px; font-size: var(--t-16); color: var(--slate); }
.formular .honig { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
/* ---------- Der Globus auf der Kraftorte-Unterseite ----------
Nur der Platz. Die Animation bringt ihre Maße selbst mit
(siehe astro-animation.php). */
.globus-platz { display: flex; justify-content: center; }
/* ---------- Raster der Unterseiten ----------
Steht bewusst am Ende des Blattes: die Grundregeln dieser Raster stehen
weiter oben im Abschnitt UNTERSEITEN, und eine Media-Query weiter vorn
würde von ihnen überschrieben. */
@media (min-width: 720px) {
.hoer-raster { grid-template-columns: repeat(2, 1fr); }
.artikel-raster { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 940px) {
/* Die Kraftorte-Seite: Text links, Globus rechts. */
.seiten-raster { grid-template-columns: 1.05fr 0.95fr; gap: 48px; align-items: center; }
.artikel-raster { grid-template-columns: repeat(3, 1fr); }
}
/* ═══════════════════════════════════════════════════════════════════════════
BEWERTUNGS-SLIDER (Sektion 7 "Echte Stimmen")
Zugefügt 15.08.2026 mit dem Umbau vom starren Raster zum wischbaren Slider.
Die Bewegung liegt beim Scroll-Container selbst, nicht bei einem transform.
Damit wischt das Handy nativ und mit dem richtigen Trägheitsgefühl, und die
Sektion funktioniert vollständig auch dann, wenn skript.js nicht lädt: dann
bleibt eine wischbare Reihe ohne Pfeile und ohne Punkte. Kein toter Block.
Gold bleibt Währung. Der einzige Goldakzent hier ist das Medaillon mit dem
Buchstaben, das aus der Vorfassung übernommen ist, plus die Haarlinie der
Pfeile und der aktive Punkt. Kein Vollton-Knopf — der steht in Sektion 6
und in der klebenden Leiste, und zwei Vollton-Gold auf einem Bildschirm
nähmen beiden die Bedeutung.
═══════════════════════════════════════════════════════════════════════════ */
.stimmen-slider {
margin-top: 30px;
position: relative;
}
/* ---------- Die Bahn: der eigentliche Wischbereich ---------- */
.stimmen-bahn {
display: grid;
grid-auto-flow: column;
/* Feste Spaltenbreite, KEIN 1fr.
1fr wuerde die verfuegbare Breite auf alle achtzehn Karten aufteilen —
dann steht der ganze Slider auf einem Bildschirm und ist 25 px pro Karte
breit. Der Wert unten ist die Breite EINER Karte; die Bahn wird dadurch
laenger als das Fenster, und genau das ist der Sinn. */
grid-auto-columns: 100%;
gap: 20px;
overflow-x: auto;
overscroll-behavior-x: contain;
scroll-snap-type: x mandatory;
/* 28.08.2026, Toms Befund: "beim Telefon bewegt sich die Seite nach links und
rechts beim Runterscrollen". Die Bahn scrollt waagerecht; ohne touch-action
faengt sie beim Wischen nach unten auch den seitlichen Anteil der Geste ab,
und die Karten rutschen mit. Mit pan-y bleibt das Senkrechte der Seite und
nur eine bewusst waagerechte Wischbewegung bewegt die Bahn. */
/* 28.08.2026 KORRIGIERT: hier stand pan-y. Das verbietet dem Browser das
waagerechte Wischen, und die Bahn scrollt ueber genau dieses native Wischen.
Ergebnis: das Wackeln war weg, das Wischen aber auch. Richtig ist beides
erlauben; gegen das Mitziehen der Seite wirkt overscroll-behavior-x. */
touch-action: pan-x pan-y pinch-zoom;
overscroll-behavior-x: contain;
scroll-behavior: smooth;
/* Der Rand wird nach innen geholt, damit der Fokusrahmen einer Karte nicht
abgeschnitten wird. scroll-padding zieht die Rastung um denselben Betrag
mit, sonst rastet die erste Karte vier Pixel neben der Kante ein. */
padding: 4px 4px 22px;
margin: -4px -4px 0;
scroll-padding-inline: 4px;
/* Die native Leiste stört die Ruhe der Seite; gewischt wird trotzdem. */
scrollbar-width: none;
-ms-overflow-style: none;
}
.stimmen-bahn::-webkit-scrollbar { display: none; }
.stimmen-bahn:focus-visible {
outline: 2px solid var(--gold);
outline-offset: 6px;
border-radius: 20px;
}
/* Beim Ziehen mit der Maus: kein Textmarkieren, anderer Zeiger. */
.stimmen-bahn.zieht { cursor: grabbing; scroll-behavior: auto; user-select: none; }
/* ---------- Eine Karte ---------- */
.stimme-karte {
scroll-snap-align: start;
display: flex;
flex-direction: column;
min-width: 0;
padding: 28px 26px 24px;
}
/* Die Produkt-Marke oben — sagt, worauf sich der Satz bezieht. Kein Gold,
sonst konkurriert sie mit dem Medaillon. */
.stimme-produkt {
display: inline-block;
align-self: flex-start;
font-size: var(--t-13);
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--slate);
border: 1px solid var(--linie);
border-radius: 999px;
padding: 5px 12px;
margin-bottom: 18px;
}
.stimme-zitat {
margin: 0;
font-size: var(--t-20);
line-height: 1.55;
color: var(--text);
max-width: none;
/* Das Zitat trägt die Karte. Was darunter kommt, wird an den Fuß gedrückt. */
flex: 1 1 auto;
}
/* Der Fuß erbt aus der Vorfassung (.stimme-fuss / .stimme-initial weiter oben)
und bekommt hier nur den Abstand zum aufklappbaren Beleg. */
.stimme-karte .stimme-fuss { margin-bottom: 0; }
/* ---------- Die Belegquelle ---------- */
.stimme-beleg {
margin-top: 16px;
padding-top: 14px;
border-top: 1px solid var(--linie);
}
.stimme-beleg > summary {
cursor: pointer;
list-style: none;
display: inline-flex;
align-items: center;
gap: 8px;
/* 20.08.2026: stand auf 32 px und blieb beim Tippziel-Durchgang vom selben
Tag übrig — 18 Stück davon auf der Startseite, je einer unter jeder
Kundenstimme. Am Handy nachgemessen. Jetzt dieselben 44 px wie überall. */
min-height: 44px;
font-size: var(--t-13);
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--slate);
}
.stimme-beleg > summary::-webkit-details-marker { display: none; }
.stimme-beleg > summary::before {
content: '+';
display: inline-flex;
align-items: center;
justify-content: center;
width: 18px;
height: 18px;
border: 1px solid var(--linie-gold);
border-radius: 50%;
font-size: 0.75rem;
line-height: 1;
color: var(--gold);
}
.stimme-beleg[open] > summary::before { content: '−'; }
.stimme-beleg > summary:hover { color: var(--gold-hell); }
.stimme-beleg > summary:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; border-radius: 6px; }
.stimme-beleg dl {
margin: 12px 0 0;
display: grid;
grid-template-columns: auto 1fr;
gap: 6px 14px;
font-size: var(--t-16);
line-height: 1.5;
}
.stimme-beleg dt { color: var(--slate); white-space: nowrap; }
.stimme-beleg dd { margin: 0; color: var(--text); overflow-wrap: anywhere; }
/* ---------- Steuerung unter der Bahn ---------- */
.stimmen-steuerung {
display: flex;
align-items: center;
gap: 18px;
flex-wrap: wrap;
margin-top: 6px;
}
.stimmen-pfeile { display: flex; gap: 10px; margin-left: auto; }
.stimmen-pfeil {
width: 48px;
height: 48px;
border-radius: 50%;
background: transparent;
border: 1px solid var(--linie-gold);
color: var(--gold-hell);
font-size: 1.15rem;
line-height: 1;
cursor: pointer;
display: inline-flex;
align-items: center;
justify-content: center;
transition: border-color .16s ease, color .16s ease, transform .16s ease;
}
.stimmen-pfeil:hover:not(:disabled) { border-color: var(--gold); color: var(--gold); transform: translateY(-1px); }
.stimmen-pfeil:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
.stimmen-pfeil:disabled { opacity: 0.3; cursor: default; }
/* 28.08.2026, Toms Wort: "bei den Bewertungen die Kreise sollen weg, es reicht
wenn da ein Pfeil ist nach rechts, wo sie swipen koennen." Bei 18 Zitaten waren
es 18 Punkte, die auf dem Telefon umbrachen und mehr Platz brauchten als die
Zitate selbst. Die Punkte bleiben im Markup, damit die Tastatur- und
Vorlese-Bedienung erhalten bleibt, sie werden nur nicht mehr angezeigt. */
.stimmen-punkte {
position: absolute; width: 1px; height: 1px; overflow: hidden;
clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}
.stimmen-punkte-alt { display: flex; gap: 8px; flex-wrap: wrap; flex: 1 1 auto; }
.stimmen-punkt {
width: 9px;
height: 9px;
padding: 0;
border: 0;
border-radius: 50%;
background: var(--linie);
cursor: pointer;
transition: background .18s ease, width .18s ease;
/* Die Trefferfläche ist größer als der sichtbare Punkt — Daumen, nicht Maus. */
box-shadow: 0 0 0 8px transparent;
}
.stimmen-punkt[aria-selected="true"] { background: var(--gold); width: 24px; border-radius: 999px; }
.stimmen-punkt:focus-visible { outline: 2px solid var(--gold); outline-offset: 4px; }
.stimmen-zaehler {
margin: 0;
font-variant-numeric: tabular-nums;
letter-spacing: 0.08em;
}
/* Der Wischhinweis steht nur da, solange noch nicht gewischt wurde, und nur
dort, wo gewischt wird. Am Rechner gibt es Pfeile, da wäre er falsch. */
.stimmen-wischhinweis {
margin: 10px 0 0;
color: var(--slate);
opacity: 0.8;
transition: opacity .3s ease;
}
.stimmen-wischhinweis::before { content: '↔ '; color: var(--gold); }
.stimmen-slider.gewischt .stimmen-wischhinweis { opacity: 0; }
/* Ohne JavaScript gibt es nichts zu steuern — dann bleibt die Bahn allein. */
.stimmen-slider:not(.bereit) .stimmen-steuerung { display: none; }
/* ---------- Breiten ----------
Handy: eine Karte. Tablet: zwei. Rechner: drei. Die Bahn bekommt die
Spaltenbreite über grid-auto-columns, damit scroll-snap sauber rastet. */
@media (min-width: 640px) {
.stimmen-bahn { grid-auto-columns: calc((100% - 20px) / 2); }
.stimmen-wischhinweis { display: none; }
}
@media (min-width: 940px) {
.stimmen-bahn { grid-auto-columns: calc((100% - 40px) / 3); gap: 20px; }
}
/* Wer Bewegung reduziert haben will, bekommt Sprünge statt Fahrten. */
@media (prefers-reduced-motion: reduce) {
.stimmen-bahn { scroll-behavior: auto; }
.stimmen-pfeil:hover:not(:disabled) { transform: none; }
}
/* ---------- Zeichen-Karten im kostenlosen Rechner (16.08.2026) ----------
Vier weitere Werte aus demselben Geburtsdatum. Erscheinen zusammen mit der
Lebenszahl, damit der Besucher den Beweis selbst erzeugt. */
.zeichen-karte {
background: rgba(255,255,255,0.03);
border: 1px solid var(--linie);
border-radius: 12px;
padding: 14px 16px;
text-align: center;
}
.zeichen-karte .zeichen-oben { color: var(--gold); margin: 0 0 6px; letter-spacing: 0.12em; text-transform: uppercase; }
.zeichen-karte .zeichen-wert { font-family: var(--serif); font-size: var(--t-22); margin: 0 0 4px; line-height: 1.25; }
.zeichen-karte .zeichen-unten { color: var(--slate); margin: 0; }
@media (max-width: 520px) { #zahl-zeichen { grid-template-columns: 1fr !important; } }
/* ══════════════════════════════════════════════════════════════════════════
TIPPZIELE AM HANDY (20.08.2026)
Im echten Browser gemessen: 30 Links und Knöpfe waren unter 44 px hoch —
darunter die Rechts-Links in der Fußzeile und der Ton-Knopf. Unter 44 px
trifft ein Daumen unzuverlässig. Die Fläche wird vergrößert, ohne dass
sich am Aussehen etwas ändert: der Text bleibt, wo er ist.
══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 760px) {
footer a,
.rechtliches a,
.fuss-links a {
display: inline-block;
min-height: 44px;
line-height: 44px;
padding-inline: 2px;
}
/* Knöpfe ohne Text (Ton an/aus, Menü) brauchen eine echte Fläche */
button[aria-label],
.ton-knopf,
.menue-knopf {
min-width: 44px;
min-height: 44px;
}
}
/* Themen-Chips ("Liebe", "Beruf", "Heilung" …) und der Datenschutz-Hinweis
waren 19 bis 30 px hoch. Beides wird angetippt, beides bekommt jetzt eine
Fläche, die ein Daumen sicher trifft. Die Chips bleiben optisch gleich groß,
sie bekommen nur mehr Luft. */
@media (max-width: 760px) {
.zgm-chips a,
.zgm-chips button {
min-height: 44px;
display: inline-flex;
align-items: center;
}
.zahl-datenschutz a {
display: inline-block;
min-height: 44px;
line-height: 44px;
}
}
/* ── Der Geschichte-Aufklapper (20.08.2026): Kapitel 1 offen, Rest auf Klick ── */
.geschichte-weiter > summary {
cursor: pointer; list-style: none; text-align: center;
color: var(--gold, #C9A84C); font-size: 15px; font-weight: 600;
padding: 18px 20px; margin: 10px 0 0;
border: 1px solid rgba(201, 168, 76, .35); border-radius: 12px;
transition: background .15s, border-color .15s;
}
.geschichte-weiter > summary::-webkit-details-marker { display: none; }
.geschichte-weiter > summary:hover {
background: rgba(201, 168, 76, .08); border-color: rgba(201, 168, 76, .6);
}
.geschichte-weiter[open] > summary { display: none; }
/* ── Kopfleiste, wenn der Desktop knapp wird (20.08.2026) ────────────────────
Marke + Etikett + 6 Menüpunkte + Kauf-Knopf brauchten zusammen mehr als die
1280 px der Leiste — der Knopf ragte auf JEDER Desktop-Breite rechts hinaus
(im Browser gemessen bei 1280 und 1440 auf uebersicht.php). Deshalb gilt
die engere Setzung auf allen Desktops, nicht nur auf schmalen. */
@media (min-width: 1098px) {
/* 20.08.2026: „Astrokartographie" (statt „Kraftorte-Karte") + neuer Punkt
„Abdruck" machten die Zeile bei 1200 px 18 px zu breit (gemessen).
Gap 12→9 und Schrift 14→13.5 holen rund 30 px zurück. */
/* 28.08.2026 ZURUECKGENOMMEN: die Quetschung war noetig, solange NEUN Punkte
in der Leiste standen. Seit die fuenf Produkte unter dem Reiter "Meine
Arbeit" liegen, sind es fuenf und 351 px statt 707 px (im Browser gemessen
bei 1440). Jetzt Luft und dieselbe Groesse wie auf der Live-Seite. */
.kopf-links { gap: 22px; }
.kopf-links a,
.kopf-links .kopf-gruppe-knopf { font-size: 14.4px; }
.test-etikett { font-size: 0.72rem; padding-left: 8px; padding-right: 8px; }
}
/* ══ Reiter "Meine Arbeit" (28.08.2026) ═══════════════════════════════════════
Neun Menuepunkte standen gequetscht in einer Zeile. Die fuenf Produkte liegen
jetzt hinter EINEM Reiter; darunter faehrt ein Band aus, das alle fuenf mit
einer Zeile Erklaerung zeigt. Ein Klick fuehrt auf die jeweilige Landingpage.
WICHTIG: das Band ist ein Geschwister der Menuezeile, kein Kind des
Menuepunkts. In der ersten Fassung steckte es im
; beim Aufklappen rutschte
die ganze Zeile 16 px nach unten (gemessen: der Reiter sprang von y=12 auf
y=28, also unter die Unterkante der 73 px hohen Leiste) und war weg. Toms
Befund: "wenn ich auf Meine Arbeit klicke, verschwindet der Reiter". */
.kopf { position: sticky; }
/* 28.08.2026, Toms Befund (dreimal gemeldet): "die sind nicht in einer Linie, ich
sehe das". Im Browser gemessen: die Schrift-Grundlinie aller Reiter lag bei
y=46,9 — nur "Deine Wege" bei 45,9. Ursache war genau dieses display:flex.
Ein flex-Element ist ein BLOCK; es haengt sich nicht an die Textlinie seiner
Zeile, sondern setzt sich oben an. Alle Nachbarn sind inline-flex und stehen
deshalb auf der Grundlinie. Ein Pixel, aber in einer Reihe von sechs Woertern
sieht man es sofort. inline-flex ordnet ihn wieder ein. */
.kopf-gruppe { display: inline-flex; align-items: center; }
.kopf-gruppe-knopf {
font: inherit; font-size: 14.4px; text-decoration: none; color: var(--text);
background: none; border: 0; cursor: pointer; padding: 0;
display: inline-flex; align-items: center; gap: 6px; min-height: 48px;
white-space: nowrap;
}
.kopf-gruppe-knopf:hover { color: var(--gold-hell, #F6DFA8); }
.kopf-gruppe-knopf.hier { color: var(--gold); }
.kopf-pfeil { font-size: 0.7em; opacity: .7; transition: transform .18s ease-out; }
.kopf.arbeit-auf .kopf-pfeil { transform: rotate(180deg); }
/* Das Band: volle Breite unter der Leiste, faellt niemandem in die Zeile. */
.kopf-band { display: none; background: #0F1220; border-bottom: 1px solid var(--linie); }
.kopf.arbeit-auf .kopf-band { display: block; }
.kopf-band-inner {
max-width: 1280px; margin: 0 auto; padding: 14px 24px;
display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 6px;
}
.kopf-band a {
display: block; padding: 12px 14px; border-radius: 10px; text-decoration: none;
border: 1px solid transparent;
}
.kopf-band a:hover { background: rgba(227,183,120,.08); border-color: var(--linie); }
.kopf-band a b {
display: block; color: var(--text); font-size: 0.98rem; font-weight: 600;
}
.kopf-band a.hier b { color: var(--gold); }
.kopf-band a small {
display: block; margin-top: 3px; color: var(--slate);
font-size: 0.8rem; line-height: 1.45;
}
@media (prefers-reduced-motion: reduce) { .kopf-pfeil { transition: none; } }
/* ── Telefon: flach statt verschachtelt ─────────────────────────────────────
Ein Aufklapp-Menue IM Burger-Menue ist auf dem Telefon der klassische Fehler:
zwei Tipps bis zum Ziel, und wenn das Band schwebt, deckt es die Liste zu.
Genau das ist hier passiert (gemessen: Liste und Band beide bei y=72).
Deshalb: die fuenf stehen offen unter "Meine Arbeit", der Reiter ist dort nur
noch eine Ueberschrift und kein Schalter. */
.kopf-unter { display: none; }
@media (max-width: 900px) {
.kopf-band { display: none !important; }
.kopf-unter {
display: block; list-style: none; margin: 0 0 6px 0; padding: 0 0 0 14px;
border-left: 1px solid var(--linie);
}
/* 44 px ist die Fingerkuppen-Grenze von Apple und Google. Bei 11 px Polster
kamen die fuenf auf 39 px (gemessen) und lagen darunter. */
/* 28.08.2026, Toms Wort: "Deine Lesung stimmt im Reiter nicht, danach koennen
sie ja auch Partner auswaehlen, das muss nebeneinander wenn es aufklappt, ich
rede von der Telefon-Ansicht". Die zwei Links standen untereinander wie zwei
getrennte Punkte. Es ist EIN Produkt mit zwei Wegen, also eine Zeile. */
.kopf-unter li { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.kopf-unter a {
display: inline-flex; align-items: center; min-height: 46px; padding: 4px 0;
color: var(--slate); text-decoration: none; font-size: 14.4px;
}
.kopf-unter a.hier { color: var(--gold); }
.kopf-gruppe { display: block; }
.kopf-gruppe-knopf { pointer-events: none; color: var(--slate); font-size: 12px;
letter-spacing: .12em; text-transform: uppercase; min-height: 34px; }
.kopf-pfeil { display: none; }
}
/* Einwilligung beim Eintrag (28.08.2026). Bewusst gross genug zum Antippen und
mit sichtbarem Kaestchen: eine Einwilligung, die man uebersieht, ist keine. */
.zahl-einwilligung {
display: flex; gap: 11px; align-items: flex-start; margin: 4px 0 14px;
cursor: pointer; line-height: 1.6; font-size: 0.92rem; color: var(--slate);
max-width: 56ch;
}
.zahl-einwilligung input { width: 20px; height: 20px; margin: 2px 0 0; flex: 0 0 auto;
accent-color: var(--gold); cursor: pointer; }
.zahl-einwilligung:hover span { color: var(--text); }
/* Wisch-Hinweis am Stimmen-Slider (28.08.2026). Auf dem Telefon steht er, auf
dem Rechner nicht - dort gibt es keine Hand, dort sind die Pfeile richtig. */
.stimmen-wisch {
display: none; font-size: 12px; letter-spacing: .10em; text-transform: uppercase;
color: var(--slate); opacity: .8; align-self: center;
}
@media (max-width: 900px) {
.stimmen-wisch { display: inline-block; }
.stimmen-pfeile { display: none; }
}
/* Deine und Eure Lesung stehen in EINER Zeile (28.08.2026, Toms Wort). Es ist ein
Produkt mit zwei Wegen, also auch ein Eintrag, nicht zwei. */
.kopf-band-paar { display:block; padding:12px 14px; border-radius:10px; border:1px solid transparent; }
.kopf-band-paar:hover { background: rgba(227,183,120,.08); border-color: var(--linie); }
.kopf-band-paar b { display:block; font-size:0.98rem; font-weight:600; }
.kopf-band-paar b a { color: var(--text); text-decoration:none; }
.kopf-band-paar b a:hover, .kopf-band-paar b a.hier { color: var(--gold); }
.kopf-band-paar small { display:block; margin-top:3px; color:var(--slate); font-size:0.8rem; line-height:1.45; }
.kopf-band-trenn { color: var(--slate); opacity:.6; margin: 0 4px; }
/* Schliessen-Knopf am Fuss des Bandes (28.08.2026). Bewusst gross genug zum
Antippen (44 px) und mit Wort statt Kreuz: ein Symbol muss man deuten,
ein Wort liest man. Aeltere Menschen sind die Haelfte der Besucher. */
.kopf-band-zu {
display: block; margin: 4px auto 12px; padding: 12px 26px; min-height: 44px;
font: inherit; font-size: 14.4px; color: var(--slate);
background: none; border: 1px solid var(--linie); border-radius: 999px; cursor: pointer;
}
.kopf-band-zu:hover { color: var(--text); border-color: var(--gold); }
.kopf-band-zu:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
/* Markenzeile am Maennchen (28.08.2026, Toms Wort). Klein und leise: sie ist die
Unterschrift unter dem Bild, nicht die zweite Ueberschrift. Sonst kaempft sie
mit dem H1 daneben. */
.hero-marke {
margin: 10px 0 0; text-align: center;
font-family: Georgia, 'Cormorant Garamond', serif; font-style: italic;
font-size: 0.95rem; letter-spacing: .04em; color: var(--gold);
opacity: .85;
}
@media (max-width: 900px) { .hero-marke { font-size: 0.9rem; } }
/* Die Paar-Zeile im offenen Telefon-Menue (28.08.2026). .kopf-links.offen a setzt
width:100%, dadurch stand jeder Link in einer eigenen Zeile. Fuer die zwei
Lesungen gilt das nicht: sie sind EIN Produkt mit zwei Wegen und gehoeren
nebeneinander. Steht am Ende der Datei, damit es die Regel darueber schlaegt. */
@media (max-width: 900px) {
.kopf-links.offen .kopf-unter li { display: flex; align-items: center; gap: 6px; flex-wrap: nowrap; }
.kopf-links.offen .kopf-unter li a { width: auto; flex: 0 0 auto; border-bottom: 0; }
.kopf-links.offen .kopf-unter li .kopf-band-trenn { flex: 0 0 auto; }
}
/* Kleine Symbole vor den Menue-Woertern (28.08.2026, Toms Wort). Ruhige Linie in
Gold, dieselben Bilder wie die grossen Animationen, nur ohne Bewegung: im
Menue darf nichts ziehen. */
.kopf-sym {
width: 18px; height: 18px; flex: 0 0 auto; margin-right: 8px;
fill: none; stroke: var(--gold); stroke-width: 1.5;
stroke-linecap: round; stroke-linejoin: round; opacity: .75;
vertical-align: -3px;
}
.kopf-band-paar b, .kopf-band a b { display: flex; align-items: center; }
.kopf-unter li .kopf-sym { margin-right: 6px; }
/* Menue schliessen, nur im offenen Burger-Menue (28.08.2026). */
.kopf-liste-zu { display: none; }
@media (max-width: 900px) {
.kopf-links.offen .kopf-liste-zu { display: block; width: 100%; margin-top: 8px; }
.kopf-links.offen .kopf-liste-zu button {
width: 100%; min-height: 46px; font: inherit; font-size: 14.4px;
color: var(--slate); background: none; cursor: pointer;
border: 1px solid var(--linie); border-radius: 999px;
}
.kopf-links.offen .kopf-liste-zu button:hover { color: var(--text); border-color: var(--gold); }
}
/* Die Paar-Zeile im Band soll nicht umbrechen (28.08.2026). Mit Symbol davor
wurde aus "Deine Lesung · Eure Lesung" ein Zweizeiler, der wie zwei Eintraege
aussah. Es ist einer. */
/* 28.08.2026 KORRIGIERT: nowrap plus min-width 260px sprengte die Rasterspalte,
"Eure Lesung" lag auf dem Nachbareintrag. Die Zelle darf umbrechen, nur die
einzelnen Namen bleiben zusammen. */
.kopf-band-paar { min-width: 0; }
.kopf-band-paar b { display: flex; align-items: center; flex-wrap: wrap; gap: 2px 4px; }
.kopf-band-paar b a { white-space: nowrap; }
/* ── 44 Pixel, ueberall (28.08.2026) ────────────────────────────────────────
Apple und Google verlangen 44 px fuer alles, was ein Finger treffen soll.
Toms Zielgruppe ist ueberwiegend 40+, ein Teil deutlich aelter. Kaestchen und
Auswahlknoepfe bleiben optisch 22 px, bekommen aber ueber das umgebende Label
eine Trefferflaeche von 44. Der Honigtopf (name="website") ist ausgenommen,
er soll unsichtbar bleiben. */
label:has(> input[type="checkbox"]), label:has(> input[type="radio"]) { min-height: 44px; }
input[type="checkbox"]:not([name="website"]), input[type="radio"] {
width: 22px; height: 22px; accent-color: var(--gold, #C9A84C); cursor: pointer;
}
a, button, summary, select { min-height: 44px; }
a { display: inline-flex; align-items: center; }
.kopf-marke, .hero-marke a, .stimme-beleg a, p a, li a, small a {
display: inline; min-height: 0;
}
/* Die Marke ist der Weg zurueck und wird oft getippt: sie bekommt die vollen
44 px. Reine Textlinks INNERHALB eines Satzes bleiben ausgenommen, sie sind
Teil des Lesetextes und keine Schaltflaeche. Das ist auch so gemeint: die
44-px-Regel gilt fuer Bedienelemente, nicht fuer jedes Wort mit Unterstrich. */
.kopf-marke { min-height: 44px; display: inline-flex; flex-direction: column; justify-content: center; }
/* 28.08.2026: die 44-px-Regel weiter oben machte JEDEN Link 44 px hoch. Im
Reiter-Band standen dadurch zwei Links nicht mehr nebeneinander, die Zeile
brach um und ein einsamer Trennpunkt blieb haengen. Die Trefferflaeche traegt
hier die ganze Zelle, die ohnehin weit ueber 44 px hoch ist. */
.kopf-band-paar b a, .kopf-band a, .kopf-unter a, .kopf-links a {
min-height: 0;
}
.kopf-band-paar b { flex-wrap: nowrap; }
.kopf-band-paar b a { padding: 2px 0; }
@media (max-width: 900px) {
.kopf-links.offen a, .kopf-unter a { min-height: 46px; }
}
/* 28.08.2026: Der Paar-Eintrag traegt zwei Namen und braucht darum zwei Spalten.
Mit einer stiess "Eure Lesung" in den Nachbarn. Auf schmalen Schirmen faellt
die Spannung von selbst weg, weil das Raster dort ohnehin einspaltig wird. */
.kopf-band-paar { grid-column: span 2; }
@media (max-width: 900px) { .kopf-band-paar { grid-column: auto; } }
/* ────────────────────────────────────────────────────────────────────────────
28.08.2026, Toms Befund: "die sind auch nicht genau auf einer Reihe".
Gemessen: alle Reiter hatten ihre Mitte bei y=35, nur "Deine Wege" bei y=34.
Der Punkt ist als