@import url("https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,500;0,700;1,500&family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;1,400&family=Lora:ital,wght@0,400;0,500;1,400&family=Baloo+2:wght@500;600;700&family=Alex+Brush&display=swap");
:root {
--color-ink: #1b1420;
--color-ink-deep: #120d16;
--color-ink-light: #2c2032;
--color-parchment: #f3e9d8;
--color-parchment-dim: #d8c9ae;
--color-gold: #c9a24d;
--color-gold-light: #e3c583;
--color-burgundy: #7a2e3a;
--color-gold-rgb: 201, 162, 77;
--surface-rgb: 255, 255, 255;
--surface-alpha: 0.03;
--font-heading: "Playfair Display", serif;
--font-body: "Cormorant Garamond", serif;
}
/* Startseite: zartes Pastellrosa-Thema (klares Rosa, kein Mauve/Lila-Unterton) */
body.theme-pastel-pink {
--color-ink: #fbd7e3;
--color-ink-deep: #7a1440;
--color-ink-light: #fff0f5;
--color-parchment: #5c1030;
--color-parchment-dim: #9c6478;
--color-gold: #e8799e;
--color-gold-light: #c2185b;
--color-burgundy: #b23a6b;
--color-gold-rgb: 194, 24, 91;
--surface-rgb: 255, 255, 255;
--surface-alpha: 0.6;
background: var(--color-ink);
}
/* Lumaria-Seite: klares Pastellgrün-Thema */
body.theme-pastel-green {
--color-ink: #c8ecd0;
--color-ink-deep: #1d5c34;
--color-ink-light: #eaf7ec;
--color-parchment: #1f4a2c;
--color-parchment-dim: #5f8a6b;
--color-gold: #6fbf7f;
--color-gold-light: #1d5c34;
--color-burgundy: #3f8a5b;
--color-gold-rgb: 111, 191, 127;
--surface-rgb: 255, 255, 255;
--surface-alpha: 0.6;
background: var(--color-ink);
}
/* Lumarias Marktplatz (Shop-Seite): warmes Cremeweiß mit Lavendel/Violett-Schatten und Gold-Akzent */
body.theme-marketplace {
--color-ink: #faf6ec;
--color-ink-deep: #3f3550;
--color-ink-light: #fffdf8;
--color-parchment: #4a3f5c;
--color-parchment-dim: #8c7f9c;
--color-gold: #c9a24d;
--color-gold-light: #8a6a24;
--color-burgundy: #a488c9;
--color-gold-rgb: 154, 118, 46;
--color-lavender: #e4d9f5;
--color-lavender-rgb: 170, 140, 205;
--color-violet: #a488c9;
--color-leaf: #7c9a6c;
--surface-rgb: 255, 255, 255;
--surface-alpha: 0.6;
background: var(--color-ink);
}
/* Über mich: sehr helles Pastell-Lila, dezenter Verlauf (explizit gewuenscht) */
body.theme-pastel-lilac {
--color-ink: #f7f2fc;
--color-ink-deep: #2f2547;
--color-ink-light: #faf7fd;
--color-parchment: #4a3f66;
--color-parchment-dim: #8b7fa3;
--color-gold: #c9a24d;
--color-gold-light: #6a3fa0;
--color-burgundy: #a98fd1;
--color-gold-rgb: 201, 162, 77;
--surface-rgb: 255, 255, 255;
--surface-alpha: 0.6;
background: linear-gradient(180deg, #faf7fd 0%, #f7f2fc 100%);
}
/* Nur "Meine Werkstatt": bereitgestelltes Vollbild statt der einzeln
programmierten Blueten/Sterne-Elemente. background-size:100% auto
skaliert die Bildbreite exakt auf die Seitenbreite ohne das
Seitenverhaeltnis zu veraendern (kein Strecken/Verzerren);
background-repeat:repeat-y setzt es bei Bedarf nahtlos nach unten
fort, da die Seite hoeher ist als ein einzelnes Bild. Die eigentliche
Randdekoration (Blueten, Graeser, Sterne, Lichtpunkte) ist bereits
Teil dieser Bilddatei. */
/* background-attachment:fixed statt repeat-y: die Seite waechst mit
jedem neuen Abschnitt weiter (zuletzt der Kachelbereich) und
irgendwann reicht ein einzelnes Bild per background-size:100% auto
nicht mehr fuer die volle Seitenhoehe -- an der Stelle, an der sich
das Bild dann per repeat-y wiederholt, trifft Bildunterkante auf
Bildoberkante und erzeugt eine sichtbare Naht (genau das vom
Nutzer gemeldete Problem, diesmal direkt unterhalb der Kacheln).
Eine einzelne, am Viewport fixierte, nicht wiederholte Ebene kann
diese Naht grundsaetzlich nicht mehr erzeugen, unabhaengig davon,
wie lang die Seite noch waechst -- behebt die Ursache dauerhaft
statt die Position der Naht nur zu verschieben. */
body.werkstatt-page {
background-color: #f6e6c9;
background-image: url("../img/werkstatt-bg.jpg?v=4");
background-repeat: no-repeat;
background-size: cover;
background-position: top center;
background-attachment: fixed;
}
/* Eigener, alleiniger Seitenhintergrund NUR fuer "Ein Blick auf meinen
Schreibtisch" -- bewusst ruhiges, cremefarbenes Pergament ohne
grosse Motive (Buecher/Feder/Tasse folgen spaeter separat als
freigestellte PNGs), das exakt auf die Seitenhoehe gestreckt wird
(background-size:100% 100%, scroll statt fixed). So entsteht
unabhaengig von der tatsaechlichen Seitenlaenge IMMER eine einzige,
nicht wiederholte Flaeche ohne Naht. Ueberschreibt gezielt nur die
Hintergrund-Eigenschaften von body.werkstatt-page, alle anderen
Werkstatt-Seiten bleiben beim bisherigen floralen Hintergrund. */
body.werkstatt-page.werkstatt-schreibtisch-page {
background-color: #f8ebcb;
background-image: url("../img/werkstatt-schreibtisch-bg-plain.png?v=1");
background-repeat: no-repeat;
background-position: top center;
background-size: 100% 100%;
background-attachment: scroll;
}
/* Eigener, alleiniger Seitenhintergrund NUR fuer "Wenn Magie mehrere
Anlaeufe braucht" -- bewusst neutrales, dekofreies Pergament
(Tintenkleckse/Fussspuren/Skizzen folgen spaeter separat). Gleiches
Streckungsverfahren wie bei der Schreibtisch-Seite: no-repeat,
100% 100%, scroll statt fixed, damit unabhaengig von der
tatsaechlichen Seitenlaenge nie eine Wiederholungsnaht entstehen
kann. Ueberschreibt gezielt nur body.werkstatt-page, andere
Werkstatt-Seiten bleiben unveraendert. */
body.werkstatt-page.werkstatt-anlaeufe-page {
background-color: #fbedce;
background-image: url("../img/werkstatt-anlaeufe-bg-plain.png?v=1");
background-repeat: no-repeat;
background-position: top center;
background-size: 100% 100%;
background-attachment: scroll;
}
/* Eigener, alleiniger Seitenhintergrund NUR fuer "Von der ersten Idee
zum fertigen Bild" -- gleiches Streckungsverfahren wie bei den
anderen Werkstatt-Unterseiten (no-repeat, 100% 100%, scroll statt
fixed), damit unabhaengig von der tatsaechlichen Seitenlaenge nie
eine Wiederholungsnaht entstehen kann. Ueberschreibt gezielt nur
body.werkstatt-page, andere Werkstatt-Seiten bleiben unveraendert. */
body.werkstatt-page.werkstatt-idee-page {
background-color: #f7e9c4;
background-image: url("../img/werkstatt-idee-bg-plain.png?v=1");
background-repeat: no-repeat;
background-position: top center;
background-size: 100% 100%;
background-attachment: scroll;
}
/* Für Eltern & Pädagogen: helles, ruhiges Editorial-Theme statt des
frueheren dunklen Violetts (Standard-:root-Theme) — soll
vertrauenswuerdig, hochwertig und freundlich wirken, nicht verspielt
wie eine Kinderseite. --color-ink/-deep/-light bleiben schlichte
Volltoene fuer einzelne Komponenten (Buttons, Badges etc.); die
eigentliche, mehrfarbige "Aquarellnebel"-Flaeche kommt separat ueber
background-image auf body selbst (weiche, grossflaechige radiale
Verlaeufe in Creme/Salbei/Flieder/Roseacute; -- bewusst KEIN Streifen-
Verlauf, jede Farbe blendet einzeln in Transparenz aus und ueber-
lappt die naechste). Ein einziges, extrem dezentes Ranken-Wasser-
zeichen (5% Deckkraft, direkt in die SVG gebacken) sorgt fuer eine
kaum wahrnehmbare Lumaria-Atmosphaere, ohne wie eine zusaetzliche
Illustration zu wirken. Ausschliesslich body.theme-sage-parents,
also nur auf fuer-eltern-paedagogen.html -- kein anderes Theme/keine
andere Seite nutzt diese Klasse. */
body.theme-sage-parents {
--color-ink: #fbf7ee;
--color-ink-deep: #f2ebdc;
--color-ink-light: #fffdf9;
--color-parchment: #3f4a3f;
--color-parchment-dim: #6b7a6b;
--color-gold: #d8b45a;
--color-gold-light: #7a5aa6;
--color-burgundy: #9b7bc0;
--color-gold-rgb: 216, 180, 90;
--surface-rgb: 255, 255, 255;
--surface-alpha: 1;
background-color: #fbf7ee;
background-image:
url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHZpZXdCb3g9JzAgMCAyNDAgMjQwJz4KICA8ZyBmaWxsPSdub25lJyBzdHJva2U9JyM2YjdhNmInIHN0cm9rZS13aWR0aD0nMicgc3Ryb2tlLWxpbmVjYXA9J3JvdW5kJyBvcGFjaXR5PScwLjA1Jz4KICAgIDxwYXRoIGQ9J00yMCAyMjAgQyA2MCAxNjAsIDQwIDEwMCwgOTUgNDAnIC8+CiAgICA8cGF0aCBkPSdNNDUgMTY1IEMgNjUgMTU1LCA4NSAxNDUsIDk4IDEyMicgLz4KICAgIDxwYXRoIGQ9J00zMiAxOTUgQyA1MiAxODUsIDY4IDE3OCwgODQgMTYyJyAvPgogIDwvZz4KICA8ZyBmaWxsPScjYzlhMjRkJyBvcGFjaXR5PScwLjA1Jz4KICAgIDxlbGxpcHNlIGN4PScxMDAnIGN5PSc0NCcgcng9JzE0JyByeT0nNycgdHJhbnNmb3JtPSdyb3RhdGUoLTQwIDEwMCA0NCknLz4KICAgIDxlbGxpcHNlIGN4PSc3NScgY3k9JzE0OCcgcng9JzEyJyByeT0nNicgdHJhbnNmb3JtPSdyb3RhdGUoLTIwIDc1IDE0OCknLz4KICAgIDxlbGxpcHNlIGN4PSc2MicgY3k9JzE3OCcgcng9JzEwJyByeT0nNScgdHJhbnNmb3JtPSdyb3RhdGUoLTEwIDYyIDE3OCknLz4KICA8L2c+Cjwvc3ZnPg=="),
radial-gradient(900px 650px at 8% 2%, rgba(192, 216, 192, 0.28), transparent 68%),
radial-gradient(820px 620px at 96% 10%, rgba(216, 201, 232, 0.20), transparent 68%),
radial-gradient(900px 700px at 100% 55%, rgba(241, 211, 214, 0.18), transparent 70%),
radial-gradient(880px 660px at 0% 62%, rgba(192, 216, 192, 0.20), transparent 70%),
radial-gradient(820px 620px at 25% 100%, rgba(216, 201, 232, 0.15), transparent 68%),
radial-gradient(820px 620px at 85% 100%, rgba(241, 211, 214, 0.14), transparent 68%);
background-repeat: no-repeat;
background-position: top right, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0;
background-size: 560px 560px, auto, auto, auto, auto, auto, auto;
}
/* Buttons in Tuerkis statt Gold, mit dezentem goldenem Hover-Akzent
(Gold bleibt die allgemeine Akzentfarbe fuer Rahmen/Trenner). */
body.theme-sage-parents .btn-primary {
background: #3fa8a4;
border-color: #3fa8a4;
color: #ffffff;
}
body.theme-sage-parents .btn-primary:hover {
background: var(--color-gold);
border-color: var(--color-gold);
color: #3f2f10;
}
body.theme-sage-parents .btn-outline {
color: #3fa8a4;
border-color: #3fa8a4;
}
body.theme-sage-parents .btn-outline:hover {
background: rgba(216, 180, 90, 0.14);
border-color: var(--color-gold);
color: var(--color-parchment);
}
/* Kontakt: uebernimmt die Farbwelt der Hintergrundillustration (Lavendel,
Creme, Gold); die eigentliche Flaeche kommt ueber .kontakt-bg (ein
fixiertes ![]()
, siehe unten), daher hier bewusst kein eigener
Verlaufshintergrund. */
body.theme-kontakt {
--color-ink: #f7f2fc;
--color-ink-deep: #2f2547;
--color-ink-light: #faf7fd;
--color-parchment: #4a3f66;
--color-parchment-dim: #8b7fa3;
--color-gold: #c9a24d;
--color-gold-light: #6a3fa0;
--color-burgundy: #a98fd1;
--color-gold-rgb: 201, 162, 77;
--surface-rgb: 255, 250, 240;
--surface-alpha: 0.6;
background: none;
}
/* "Lumarias Marktplatz" (shop.html): Das Header-Video steht im HTML
als erstes Element, direkt gefolgt vom ganz normalen .site-header
(keine Sonderklasse mehr -- ein frueherer Versuch, die Navigation
per negativem margin-top + position:sticky ALS OVERLAY auf das
Video zu legen, zog dabei unbeabsichtigt auch den kompletten
nachfolgenden Seiteninhalt mit nach oben in den Videobereich hinein,
siehe Korrektur weiter unten bei .site-header). Da das runde Logo
im Header dieser Seite komplett aus dem HTML entfernt ist, bleibt
die Zeile ohnehin schon kompakt -- kein Zusatzabstand noetig, damit
sie direkt am unteren Rand des Videos beginnt. */
.marktplatz-header-video-wrap {
width: 100%;
height: 460px;
overflow: hidden;
line-height: 0;
}
.marktplatz-header-video {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
}
@media (max-width: 900px) {
.marktplatz-header-video-wrap {
height: 380px;
}
}
@media (max-width: 640px) {
.marktplatz-header-video-wrap {
height: 300px;
}
}
/* "Karte von Lumaria" (lumaria-karte.html): identische Technik wie
.marktplatz-header-video-wrap oben -- Video als normaler Block VOR
der Navigation (kein Overlay), Rundlogo + "Tintenzauber Verlag"-
Schriftzug sind auf dieser Seite komplett aus dem HTML entfernt
(nicht nur ausgeblendet), die Navigation (unveraendert, keine
Sonderklasse) beginnt dadurch direkt am unteren Videorand, ohne
Leerraum. object-fit:contain (statt cover) KORRIGIERT einen
Beschnitt-Bug: cover fuellte die feste Containerhoehe/-breite ohne
Ruecksicht auf das Video-Seitenverhaeltnis und schnitt dadurch Kopf/
Geweih des Zauberwaldwaechters ab. contain zeigt das komplette Video
unverzerrt (Seitenverhaeltnis erhalten), notfalls etwas kleiner
dargestellt -- der dadurch bei abweichendem Seitenverhaeltnis
entstehende Leerraum (meist seitlich, da das Video breiter als hoch
ist) wird von background:var(--color-ink) auf dem Wrapper mit
demselben hellgruenen Ton wie Seite/Navigation aufgefangen (kein
dunkler Farbton mehr -- siehe Korrektur unten zu .lumaria-karte-
header-video-bg). */
.lumaria-karte-header-video-wrap {
position: relative;
width: 100%;
height: 460px;
overflow: hidden;
line-height: 0;
background: var(--color-ink);
}
/* Vormals eine kraeftig weichgezeichnete/abgedunkelte Hintergrundebene
(object-fit:cover + filter:blur+brightness) zur Auffuellung der
seitlichen Leerraeume -- wirkte dort wie ein dunkler, unscharfer
Schatten und wurde deshalb ausdruecklich entfernt/deaktiviert. Die
Leerraeume werden jetzt stattdessen von der einfachen, hellgruenen
Wrapper-Flaeche (background:var(--color-ink) oben) gefuellt, exakt
im selben Farbton wie Seite und Navigation. display:none statt
Entfernen aus dem HTML, um am Markup nichts aendern zu muessen. */
.lumaria-karte-header-video-bg {
display: none;
}
/* Scharfes Hauptvideo: Groesse/Position bewusst unveraendert (weiterhin
object-fit:contain, siehe Kommentar oben zum Beschnitt-Fix). mask-
image wird zur Laufzeit per JS gesetzt (updateFade in lumaria-karte.
html) und laesst NUR das Video selbst an seiner tatsaechlichen
sichtbaren Kante weich in Transparenz auslaufen -- kein Overlay, kein
Blur, kein dunkler Farbverlauf. Darunter wird jetzt direkt die
hellgruene Wrapper-Flaeche sichtbar (background:var(--color-ink)
oben), exakt derselbe Ton wie Seite/Navigation. */
.lumaria-karte-header-video {
position: relative;
display: block;
width: 100%;
height: 100%;
object-fit: contain;
object-position: center;
z-index: 1;
}
@media (max-width: 900px) {
.lumaria-karte-header-video-wrap {
height: 380px;
}
}
@media (max-width: 640px) {
.lumaria-karte-header-video-wrap {
height: 300px;
}
}
/* Bewohner Lumarias (bewohner-lumarias.html): identische Zwei-Ebenen-/
Fade-Technik wie .lumaria-karte-header-video-wrap oben, nur mit
eigenen Klassennamen fuer diese Seite. Sitzt VOR der Navigation
(Reihenfolge: Video, dann Nav, dann Erzaehlbereich). */
/* Nutzerkorrektur: Video-Header durch ein einzelnes statisches Bild
ersetzt (die_magischen_bewohner_lumarias.png, enthaelt den Titel
bereits eingebrannt). Bewusst KEIN fester Container mit object-fit
(wie zuvor beim Video) -- width:100%+height:auto laesst die Bild-
hoehe strikt aus dem eigenen Seitenverhaeltnis folgen, dadurch immer
vollstaendig, unverzerrt und unbeschnitten bei jeder Viewportbreite,
ganz ohne Breakpoint-Sondermasse. */
.bewohner-header-image-wrap {
width: 100%;
line-height: 0;
}
.bewohner-header-image {
display: block;
width: 100%;
height: auto;
}
/* "Meine Tintenzauberwerkstatt" (werkstatt.html): neuer, separater
Header-Videobereich NACH der Navigation (anders als bei .marktplatz-
header-video-wrap/.lumaria-karte-header-video-wrap, die VOR der Nav
sitzen) -- Reihenfolge auf dieser Seite: Navigation, dann dieses
Video, dann das urspruengliche "Willkommen..."-Bild im bestehenden
Erzaehlbereich weiter unten (unveraendert). Gleiche Technik/Hoehen
wie die anderen Header-Videos. object-fit:cover ist hier unbedenklich:
das Container-Seitenverhaeltnis ist auf allen drei Breakpoints breiter
als das Video (1280x688, 1.86:1), wodurch cover ausschliesslich oben/
unten beschneidet, nie seitlich -- der KI-Geist (links) und das
Zauberbuch (rechts) bleiben dadurch auf voller Breite sichtbar. */
.werkstatt-header-video-wrap {
width: 100%;
height: 460px;
overflow: hidden;
line-height: 0;
}
.werkstatt-header-video {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
}
@media (max-width: 900px) {
.werkstatt-header-video-wrap {
height: 380px;
}
}
@media (max-width: 640px) {
.werkstatt-header-video-wrap {
height: 300px;
}
}
body.theme-pastel-pink .hero::before {
background-image: url("../img/ink-splash-pink.svg?v=2");
}
* {
box-sizing: border-box;
}
html {
scroll-behavior: smooth;
}
body {
margin: 0;
background: radial-gradient(ellipse at top, var(--color-ink-light) 0%, var(--color-ink) 45%, var(--color-ink-deep) 100%);
color: var(--color-parchment);
font-family: var(--font-body);
font-size: 1.15rem;
line-height: 1.7;
min-height: 100vh;
display: flex;
flex-direction: column;
}
h1, h2, h3 {
font-family: var(--font-heading);
font-weight: 700;
color: var(--color-gold-light);
letter-spacing: 0.02em;
margin: 0 0 0.6em;
}
a {
color: var(--color-gold-light);
text-decoration: none;
transition: color 0.2s ease;
}
a:hover {
color: var(--color-parchment);
}
img {
max-width: 100%;
display: block;
}
/* Header / Navigation */
.brand-banner {
display: flex;
justify-content: center;
padding: 2.5rem 1.5rem 0.5rem;
}
.logo-wordmark {
height: 150px;
width: auto;
display: block;
}
.site-header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 1rem 2rem 1.5rem;
border-bottom: 1px solid rgba(var(--color-gold-rgb), 0.25);
}
/* Home-Header (Nutzerkorrektur): das grosse Text-Logo "Tintenzauber
Verlag" (.brand-banner/.logo-wordmark) wurde entfernt, das bereits
vorhandene runde Bildlogo (.logo-badge, Foto von Martina) uebernimmt
jetzt allein dessen Platz -- daher hier zentriert (statt der
Basisregel justify-content:space-between, die fuer ein einzelnes
Kind zu einer linksbuendigen Position fuehren wuerde) und ohne die
sonst ueberall sichtbare untere Trennlinie, damit das Foto frei und
ruhig ueber dem Video schwebt -- gleiche Wirkung wie zuvor der
zentrierte Schriftzug. Nur diese eine Kopie von .site-header (die
Logo-Zeile im Home-Header) betroffen, die echte Navigation
(.main-nav) bleibt unangetastet. */
.home-header-logo {
justify-content: center;
padding: 2.5rem 1.5rem 0.5rem;
border-bottom: none;
}
/* Mobile (Nutzerkorrektur): kein zusaetzliches Logo im Home-Header, da
die mobile Navigationszeile bereits ihr eigenes Tintenzauber-Verlag-
Logo mitbringt (siehe .mobile-nav-logo-link/-img, von main.js in
JEDE Seite eingefuegt) -- ein zweites Logo (das runde Foto) direkt
darueber waere doppelt. Nur diese eine Zeile betroffen.
Nutzerkorrektur (Folgefehler): .home-header-wrap selbst hat KEINE
eigene Hoehe (nur position:relative, siehe oben) -- auf Desktop kommt
die Hoehe allein aus dem Platz, den .home-header-logo im normalen
Fluss einnimmt (Padding + 144px-Rundfoto). Sobald dieses Logo hier
per display:none verschwindet, hat der Wrapper KEIN Kind mehr im
normalen Fluss (Video/Overlay sind position:absolute, tragen nicht
zur Hoehe bei) und faellt auf 0px Hoehe zusammen -- der komplette
Home-Header (Video/Szene) verschwand dadurch auf dem Handy, obwohl
nichts direkt auf display:none stand. Feste Mobile-Hoehe stellt die
Szene wieder her, gestuft wie beim gleichartigen
.autorin-header-wrap oben. */
@media (max-width: 767px) {
.home-header-logo {
display: none;
}
.home-header-wrap {
height: 260px;
}
}
@media (max-width: 480px) {
.home-header-wrap {
height: 210px;
}
}
.logo-badge {
height: 144px;
width: 144px;
object-fit: cover;
border-radius: 50%;
display: block;
box-shadow: 0 0 0 3px rgba(var(--color-gold-rgb), 0.4);
}
/* Nur auf der Startseite (body.theme-pastel-pink ist ausschliesslich
dort gesetzt) rund 30% groesser; Breite und Hoehe bleiben gleich,
damit der Kreis (object-fit:cover) unverzerrt bleibt. */
body.theme-pastel-pink .logo-badge {
height: 187px;
width: 187px;
}
/* HOME-Header-Video-Hintergrund -- NUR auf der Startseite: .home-
header-wrap fasst .brand-banner (goldener Schriftzug) UND .site-
header (Rundlogo + Navigation) zu EINEM gemeinsamen Video-Hinter-
grundbereich zusammen, statt nur den unteren Nav-Teil abzudecken.
.brand-banner/.site-header haben bereits site-weit eigenes
position:relative + z-index:1 (siehe weiter unten, wegen der fixen
Sparkle-Ebene) -- dieses z-index:1 wird NICHT von einem neuen
Stapelkontext auf .home-header-wrap isoliert, da dieser Wrapper
bewusst KEIN eigenes z-index bekommt (nur position:relative als
Anker fuers Video). Video/Aufhellung (z-index:0) liegen dadurch
zuverlaessig dahinter, ganz ohne die Logo/Nav-Regeln anzufassen.
Bewusst kein overflow:hidden auf dem Wrapper: die Dropdown-Panels
der Navigation ragen unterhalb des Headers heraus (position:
absolute, top:calc(100% + 14px) relativ zu .nav-dropdown) und
wuerden sonst abgeschnitten -- top/left/width/height:100% reicht
fuers Video, um exakt auf die Wrapper-Box begrenzt zu bleiben.
Sehr dezente helle Aufhellung (kein dunkler Kasten) fuer Lesbarkeit
von Logo-Schriftzug/Navigation vor dem bewegten Hintergrund. */
.home-header-wrap {
position: relative;
}
.site-header-bg-video {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
z-index: 0;
pointer-events: none;
}
.site-header-bg-overlay {
position: absolute;
inset: 0;
background: rgba(255, 240, 245, 0.3);
z-index: 0;
pointer-events: none;
}
/* Die generische, dezent aufhellende .site-header-bg-overlay
(rgba(255,240,245,0.3), oben) liess die Header-Videos milchig/
ausgewaschen wirken. Auf HOME entfernt, damit das Video wieder
kraeftig/farbecht erscheint -- .home-header-wrap kommt
ausschliesslich in index.html vor (siehe Kommentar oben). */
.home-header-wrap .site-header-bg-overlay {
background: none;
}
@media (prefers-reduced-motion: reduce) {
.site-header-bg-video {
display: none;
}
}
/* Autorin-Header-Video-Hintergrund -- gleiches Prinzip wie
.home-header-wrap oben, nur fuer "Ueber die Autorin". Schriftlogo
und Rundlogo wurden hier entfernt (sitewide Header-Ueberarbeitung --
das Rundlogo lebt seitdem nur noch im Erzaehlbereich von HOME
weiter, siehe .home-story-seal). Ohne die frueher hier verschachtelten
Logo-Elemente braucht der Wrapper jetzt eine explizite Hoehe, sonst
wuerde das (weiterhin absolut positionierte, z-index:0) Video keine
Flaeche mehr zum Fuellen haben -- dieselben Werte wie beim bereits
bestehenden .marktplatz-header-video-wrap (460/380/300px). */
.autorin-header-wrap {
position: relative;
width: 100%;
height: 460px;
overflow: hidden;
}
@media (max-width: 900px) {
.autorin-header-wrap {
height: 380px;
}
}
@media (max-width: 640px) {
.autorin-header-wrap {
height: 300px;
}
}
/* Wie bei HOME (.home-header-wrap .site-header-bg-overlay oben):
dieselbe geteilte .site-header-bg-overlay liess das Header-Video
auch hier auf "Ueber mich" milchig/ausgewaschen wirken statt
kraeftig. Nur ueber diesen seiteneigenen Wrapper entfernt --
.autorin-header-wrap kommt ausschliesslich in ueber-mich.html vor
(siehe grep-Bestaetigung), Lumaria (.lumaria-header-wrap) bleibt
unangetastet. */
.autorin-header-wrap .site-header-bg-overlay {
background: none;
}
/* Nur auf "Ueber die Autorin" (body.theme-pastel-lilac ist
ausschliesslich dort gesetzt) rund 30% groesser. */
body.theme-pastel-lilac .logo-badge {
height: 187px;
width: 187px;
}
.main-nav {
display: flex;
align-items: center;
gap: 1.8rem;
font-family: var(--font-heading);
font-size: 1.05rem;
}
.main-nav a.active {
color: var(--color-parchment);
border-bottom: 1px solid var(--color-gold);
}
/* Dropdown-Menues der Hauptnavigation (Autorin/Lumaria/Lumarias
Marktplatz/Kids Club): auf Desktop per Hover/Tastaturfokus
eingeblendet, auf Mobil per Antippen (siehe main.js, das dafuer
.is-open auf .nav-dropdown togglet -- die Hover-Regel unten
funktioniert unabhaengig davon rein ueber CSS). Bewusst zurueckhaltend
gehalten: kein Standard-Browser-Dropdown-Look, sondern eine kleine
abgerundete Karte im bestehenden Kachel-Stil der Website (gleiche
Radien/Schatten/Gold-Rahmen-Sprache wie z.B. .lumaria-tile), mit
sanftem Fade+Slide statt eines harten Ein-/Ausblendens. */
.nav-dropdown {
position: relative;
}
.nav-dropdown-trigger {
font: inherit;
color: inherit;
background: none;
border: none;
padding: 0;
margin: 0;
cursor: pointer;
display: inline-flex;
align-items: center;
gap: 0.35em;
}
.nav-dropdown-trigger::after {
content: "▾";
font-size: 0.65em;
color: rgba(var(--color-gold-rgb), 0.85);
transition: transform 0.25s ease;
}
.nav-dropdown:hover .nav-dropdown-trigger::after,
.nav-dropdown:focus-within .nav-dropdown-trigger::after,
.nav-dropdown.is-open .nav-dropdown-trigger::after {
transform: rotate(180deg);
}
.nav-dropdown-trigger.active {
color: var(--color-parchment);
border-bottom: 1px solid var(--color-gold);
}
/* "Tintenzauber"-Dropdown-Karte (ab 1024px, Hover/Fokus-gesteuert):
warmes Creme statt der frueheren, themenunabhaengig weissen
rgba(var(--surface-rgb)) Flaeche -- feste, sitewide einheitliche
Palette (Creme/Violett-Text) analog zur neuen mobilen Navigation
(siehe .main-nav.is-open weiter unten), nur der Gold-Ton bleibt via
--color-gold-rgb je Seitenthema leicht unterschiedlich. */
.nav-dropdown-panel {
position: absolute;
top: calc(100% + 14px);
left: 50%;
min-width: 210px;
display: flex;
flex-direction: column;
gap: 0;
padding: 0.5rem;
background: #fdf6ea;
border: 1px solid rgba(var(--color-gold-rgb), 0.45);
border-radius: 14px;
box-shadow: 0 14px 30px rgba(47, 37, 71, 0.18);
opacity: 0;
visibility: hidden;
pointer-events: none;
transform: translate(-50%, -6px);
transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s;
z-index: 5;
}
/* Sternchen-Deko nur fuer die frei schwebende Desktop-Karte gedacht
(position:absolute) -- auf Tablet/Mobil wird .nav-dropdown-panel
weiter unten zu position:static (Teil des Akkordeon-Menues), dort
waere das Sternchen fehlplatziert, deshalb hier standardmaessig
ausgeblendet und erst ab 1024px wieder eingeblendet. */
.nav-dropdown-panel::before {
display: none;
content: "\2726";
position: absolute;
top: -8px;
left: 50%;
transform: translateX(-50%);
font-size: 0.7rem;
line-height: 1;
color: var(--color-gold-light);
background: #fdf6ea;
padding: 0 6px;
}
.nav-dropdown-panel a {
display: block;
padding: 0.5rem 0.85rem;
border-radius: 8px;
font-size: 0.94rem;
white-space: nowrap;
color: #6a5c8a;
text-decoration: none;
transition: background 0.18s ease, color 0.18s ease;
}
.nav-dropdown-panel a:not(:last-child) {
border-bottom: 1px solid rgba(var(--color-gold-rgb), 0.16);
}
.nav-dropdown-panel a:hover,
.nav-dropdown-panel a:focus-visible {
background: rgba(var(--color-gold-rgb), 0.14);
color: #4a3f66;
font-weight: 600;
}
.nav-dropdown-panel a.active {
color: var(--color-gold-light);
font-weight: 600;
}
/* Hover/Fokus oeffnet die Dropdown-Karte nur noch ab 1024px (echter
Desktop mit Maus). 768-1023px (Tablet, kein zuverlaessiger Hover)
hat eine eigene, per Tap gesteuerte Optik weiter unten. */
@media (min-width: 1024px) {
.nav-dropdown-panel::before {
display: block;
}
.nav-dropdown:hover .nav-dropdown-panel,
.nav-dropdown:focus-within .nav-dropdown-panel {
opacity: 1;
visibility: visible;
pointer-events: auto;
transform: translate(-50%, 0);
}
}
/* Drei per main.js zur Laufzeit ergaenzte Elemente der mobilen
Navigation (Logo-Link vor .main-nav, Abdunklungs-Overlay, Deko-
Grafik am Menue-Ende, siehe main.js) -- ausserhalb von
@media(max-width:767px) (Regeln dort) standardmaessig unsichtbar,
damit sie Desktop/Tablet in keinem Fall beeinflussen. */
.mobile-nav-logo-link,
.mobile-nav-backdrop,
.mobile-nav-menu-deco {
display: none;
}
/* Hamburger-Menue (nur Mobil, siehe @media weiter unten). Auf Desktop
unsichtbar; main.js togglet .is-active fuer die X-Verwandlung der
drei Balken und .is-open auf .main-nav fuer das Ein-/Ausklappen. */
.nav-toggle {
display: none;
flex-direction: column;
justify-content: center;
align-items: center;
gap: 5px;
width: 42px;
height: 42px;
padding: 0;
background: none;
border: 1px solid rgba(var(--color-gold-rgb), 0.4);
border-radius: 10px;
cursor: pointer;
flex-shrink: 0;
}
.nav-toggle-bar {
display: block;
width: 20px;
height: 2px;
background: var(--color-gold);
border-radius: 2px;
transition: transform 0.25s ease, opacity 0.25s ease;
}
.nav-toggle.is-active .nav-toggle-bar:nth-child(1) {
transform: translateY(7px) rotate(45deg);
}
.nav-toggle.is-active .nav-toggle-bar:nth-child(2) {
opacity: 0;
}
.nav-toggle.is-active .nav-toggle-bar:nth-child(3) {
transform: translateY(-7px) rotate(-45deg);
}
/* Hero */
.hero {
position: relative;
text-align: center;
padding: 0 0 5rem;
overflow: hidden;
}
.hero::before {
content: "";
position: absolute;
inset: 0;
background: url("../img/ink-splash.svg?v=2") no-repeat center / 900px;
opacity: 0.18;
pointer-events: none;
}
/* Neue maerchenhafte Erzaehl-Illustration (ersetzt die vorherige reine
Text-/Grafik-Ueberschrift): Seitenverhaeltnis erhalten, kein Rahmen/
Schatten/Box. Der untere (und leicht der obere) Bildbereich wird per
mask-image weich transparent ausgeblendet, damit die (im Bild bereits
sehr aehnliche) helle Rosa-Flaeche nahtlos in den echten Seiten-
hintergrund (body.theme-pastel-pink) uebergeht, statt eine harte
Bildkante zu zeigen.
Bewusst NICHT mehr volle Breite: width:82% (Prozent, keine feste
Pixelbreite -- skaliert responsiv mit) plus max-width:1100px als
Obergrenze fuer sehr breite Bildschirme, damit links/rechts/oben
durchgaengig der rosa Seitenhintergrund sichtbar bleibt. margin-top
schafft zusaetzlichen ruhigen Abstand zum Header darueber. */
.home-hero-illustration {
position: relative;
width: 82%;
max-width: 1100px;
margin: 60px auto 0;
line-height: 0;
}
/* "Glow"-Ebene: dieselbe Bilddatei (keine neue Grafik, keine Bearbeitung
des Originals), nur per CSS 2x vergroessert (inset:-33% dehnt Breite
UND Hoehe um denselben Faktor, das Seitenverhaeltnis bleibt exakt
erhalten -- background-size:cover verzerrt hier nichts), stark
weichgezeichnet und mit reduzierter Deckkraft hinter der scharfen
Grafik platziert. Ein zusaetzlicher radialer mask-image-Verlauf
sorgt dafuer, dass die Glow-Ebene selbst keine eigene harte Kante
hat, sondern schon deutlich vor ihrem eigenen Rand komplett
ausgeblendet ist -- reine Farbfortsetzung, keine sichtbare Box.
Nur die kleine 640w-Variante als Quelle, da der starke
Weichzeichner ohnehin jedes Detail aufloest -- spart Ladezeit. */
.home-hero-illustration-glow {
position: absolute;
inset: -33%;
z-index: 0;
background-image: url("../img/home-hero-illustration-640.png?v=1");
background-size: cover;
background-position: center;
filter: blur(65px) saturate(112%);
opacity: 0.65;
-webkit-mask-image: radial-gradient(ellipse 62% 62% at 50% 50%, black 35%, transparent 90%);
mask-image: radial-gradient(ellipse 62% 62% at 50% 50%, black 35%, transparent 90%);
pointer-events: none;
}
@media (max-width: 640px) {
.home-hero-illustration-glow {
filter: blur(36px) saturate(112%);
}
}
/* Die scharfe Grafik selbst faedet jetzt an allen VIER Seiten aus
(nicht mehr nur oben/unten): zwei sich ueberschneidende
mask-image-Verlaeufe (horizontal + vertikal), per mask-composite:
intersect kombiniert, damit jede Kante unabhaengig weich bis 0
ausblendet. Links/rechts bewusst breit (18%) wie gewuenscht, nicht
nur wenige Pixel -- die floralen Randmotive der Grafik (Feder,
Baumkrone) reichen im Original ohnehin fast bis an den Bildrand,
sollen dort also bewusst zunehmend transparent werden statt hart
abzuschneiden. */
.home-hero-illustration-img {
position: relative;
z-index: 1;
display: block;
width: 100%;
height: auto;
mask-image:
linear-gradient(to right, transparent 0%, black 18%, black 82%, transparent 100%),
linear-gradient(to bottom, transparent 0%, black 14%, black 76%, transparent 100%);
mask-composite: intersect;
-webkit-mask-image:
linear-gradient(to right, transparent 0%, black 18%, black 82%, transparent 100%),
linear-gradient(to bottom, transparent 0%, black 14%, black 76%, transparent 100%);
-webkit-mask-composite: source-in;
}
.hero-content {
position: relative;
max-width: 640px;
margin: 0 auto;
}
.hero-eyebrow {
font-family: var(--font-heading);
text-transform: uppercase;
letter-spacing: 0.25em;
font-size: 0.85rem;
color: var(--color-gold);
}
.hero h1 {
font-size: 3rem;
margin-top: 0.6rem;
}
.hero p {
font-size: 1.3rem;
color: var(--color-parchment-dim);
margin-bottom: 2.2rem;
}
/* Drei vom Nutzer gelieferte Sticker-Illustrationen (goldener Keim,
Lumi-Baum, Goldene Feder) -- zuvor am Videobereich auf "Ursprung
von Lumaria", jetzt stattdessen hier als kleine Randillustrationen im
laengeren Erzaehltext auf "Entdecke Lumaria" (der vierte, der
Lichtfunke/-kreisel am ersten Absatz, wurde auf Wunsch ersatzlos
entfernt -- keine neue Dekoration an seiner Stelle, der Absatz war
dank der absoluten, ausserhalb der Textspalte haengenden Positionierung
ohnehin nie von seiner Anwesenheit abhaengig). Jeder verbleibende Sticker haengt an
genau einem Absatz (position:relative direkt auf dem betreffenden ,
.lumaria-story-sticker-anchor) und wird position:absolute knapp
AUSSERHALB der linken/rechten Kante der 640px breiten Textspalte
platziert (right:100%/left:100% + Aussenabstand -- dadurch komplett
ausserhalb der Lesebreite, kann den Text nie ueberdecken, unabhaengig
von der vertikalen top-Position). .hero hat zwar overflow:hidden, ist
aber randlos ueber die volle Viewport-Breite gespannt (kein max-width
auf main/body), wodurch ab 1024px ausreichend freie Flaeche links/
rechts der Textspalte bleibt (mind. ~190px pro Seite bei 1024px
Viewport-Breite). Unterhalb 1024px komplett ausgeblendet, da dort kein
sauberer Platz neben der schmaleren Textspalte waere und der Text nie
schmaler werden soll. Loomus-Flugbereich, das grosse Wordmark-Bild oben
und der Feder-Schreibeffekt am Schlusssatz bleiben unberuehrt, da die
Sticker gezielt an anderen, eigenen Absaetzen haengen. */
.lumaria-story-sticker {
display: none;
}
@media (min-width: 1024px) {
.lumaria-story-sticker-anchor {
position: relative;
}
.lumaria-story-sticker {
display: block;
position: absolute;
height: auto;
pointer-events: none;
opacity: 0.97;
}
.lumaria-story-sticker-keim {
width: 68px;
top: 10%;
right: 100%;
margin-right: 26px;
}
.lumaria-story-sticker-feder {
width: 66px;
top: 38%;
left: 100%;
margin-left: 28px;
}
}
.button-row {
display: flex;
gap: 1rem;
justify-content: center;
flex-wrap: wrap;
}
.btn {
display: inline-block;
padding: 0.75rem 1.8rem;
border-radius: 999px;
font-family: var(--font-heading);
font-size: 1rem;
border: 1px solid var(--color-gold);
}
.btn-primary {
background: var(--color-gold);
color: var(--color-ink-deep);
}
.btn-primary:hover {
background: var(--color-gold-light);
color: var(--color-ink-deep);
}
.btn-outline {
color: var(--color-gold-light);
}
.btn-outline:hover {
background: rgba(var(--color-gold-rgb), 0.12);
color: var(--color-parchment);
}
/* Sections */
.section {
max-width: 900px;
margin: 0 auto;
padding: 3.5rem 1.5rem;
}
.section-narrow {
max-width: 700px;
}
.divider {
width: 60px;
height: 2px;
background: var(--color-gold);
margin: 1.2rem auto 2rem;
border: none;
}
.divider.left {
margin-left: 0;
}
.lumaria-map-image {
display: block;
max-width: 900px;
width: 100%;
height: auto;
margin: 0 auto;
border-radius: 14px;
box-shadow: 0 12px 32px rgba(0, 0, 0, 0.15);
}
/* Neue Ueberschrift-Grafik ersetzt den bisherigen einfachen Text-H1 +
Trennstrich; deutlich groesser als vorher, mittig, viel Luft zum
oberen Rand. */
.lumaria-karte-heading-img {
display: block;
width: 82%;
max-width: 720px;
height: auto;
margin: 0.4rem auto 1.8rem;
}
@media (max-width: 640px) {
.lumaria-karte-heading-img {
width: 94%;
}
}
/* "Reise-Komposition" zwischen Einfuehrungstext und der grossen
Lumaria-Karte -- nutzt den bereits vorhandenen Section-Zwischenraum
(keine zusaetzliche Hoehe erzeugt). .lumaria-karte-journey ist der
zentrale, schmalere Anker (680px) fuer Route + Einladungssatz in
normalem Textfluss; die drei Kartografie-Sticker haengen mit der
gleichen "Hanging-Margin"-Technik wie an anderer Stelle im Projekt
(position:absolute + left/right:calc(100% + Xpx)) an diesem Anker,
landen dadurch in einem MODERATEN Abstand zur Mitte (nicht am
aeussersten Seitenrand, da .lumaria-karte-journey selbst schon
schmaler ist als die 900px breite Section). Bewusst asymmetrisch:
unterschiedliche Seiten, Hoehen und Groessen statt einer Reihe.
Kein overflow/clip-path auf .lumaria-karte-journey -- Sicherheit
kommt aus der Section-Trennung (Text/Ueberschrift liegen in einer
eigenen Section DAVOR, die Karte in einer eigenen Section DANACH)
und aus moderaten top-Werten innerhalb dieses Abschnitts. */
.lumaria-karte-journey {
position: relative;
max-width: 680px;
margin: 0 auto;
}
.lumaria-karte-sticker {
position: absolute;
display: block;
pointer-events: none;
z-index: 1;
}
.lumaria-karte-sticker img {
display: block;
width: 100%;
height: auto;
}
.lumaria-karte-sticker-compass {
left: calc(100% + 20px);
top: -15px;
width: 88px;
}
.lumaria-karte-sticker-compass img {
animation: lumaria-karte-glow-pulse 4.5s ease-in-out infinite;
}
.lumaria-karte-sticker-scroll {
right: calc(100% + 26px);
top: 75px;
width: 104px;
}
.lumaria-karte-sticker-telescope {
left: calc(100% + 34px);
top: 210px;
width: 92px;
}
.lumaria-karte-sticker-telescope img {
animation: lumaria-karte-glint-pulse 5.5s ease-in-out infinite;
}
.lumaria-karte-sticker-spark {
position: absolute;
color: #f3d998;
font-size: 0.7rem;
animation-duration: 2.8s;
}
@keyframes lumaria-karte-glow-pulse {
0%, 100% { filter: drop-shadow(0 0 0 rgba(168, 123, 238, 0)); }
50% { filter: drop-shadow(0 0 7px rgba(168, 123, 238, 0.55)); }
}
@keyframes lumaria-karte-glint-pulse {
0%, 100% { filter: brightness(1); }
50% { filter: brightness(1.12); }
}
@media (max-width: 900px) {
.lumaria-karte-sticker {
display: none;
}
}
/* Goldene Reiseroute: klassische mask-image-linear-gradient-Reveal-
Technik (dieselbe wie beim Loomus-Entdeckungspfad) -- -18%/118%
als Start-/Endwert garantieren dank monotoner Clamping-Regel bei
CSS-Gradient-Stops vollstaendig unsichtbar bei 0% und vollstaendig
sichtbar bei 100%, ganz ohne SVG-Maske. --karte-reveal wird per JS
ueber IntersectionObserver + requestAnimationFrame animiert (siehe
Script vor
), sobald der Abschnitt in den Viewport kommt. */
.lumaria-karte-route {
position: relative;
display: block;
width: 100%;
margin: 0 auto 1.6rem;
}
.lumaria-karte-route-img {
display: block;
width: 100%;
height: auto;
mask-image: linear-gradient(90deg, #000 0%, #000 var(--karte-reveal, 0%), transparent calc(var(--karte-reveal, 0%) + 18%), transparent 100%);
-webkit-mask-image: linear-gradient(90deg, #000 0%, #000 var(--karte-reveal, 0%), transparent calc(var(--karte-reveal, 0%) + 18%), transparent 100%);
}
.lumaria-karte-route-spark {
color: #e9c77c;
font-size: 0.85rem;
animation-duration: 2.6s;
}
@media (prefers-reduced-motion: reduce) {
.lumaria-karte-route-img {
mask-image: none;
-webkit-mask-image: none;
}
}
/* Kleiner Entdecker-Satz zwischen Route und Karte. */
.lumaria-karte-invite {
text-align: center;
font-family: var(--font-heading);
font-style: italic;
color: var(--color-parchment);
font-size: 1.05rem;
margin: 0 0 0.3rem;
}
.lumaria-karte-invite-mark {
display: block;
margin-top: 0.5rem;
color: #caa356;
font-size: 0.8rem;
letter-spacing: 0.15em;
}
/* Schwebender Papierfetzen: JS-gesteuerter reiner Vorwaertsflug
(gleiche Technik wie die Eule/der Schmetterling auf "Der Ursprung
von Lumaria" -- mehrere feste Bahnen, ein durchgehender Ease-
Verlauf, einmalige Spiegelung je Flugrichtung, kein Zurueckspulen).
Bleibt innerhalb von .lumaria-karte-journey (0-100% Breite/Hoehe),
beruehrt dadurch nie Ueberschrift/Text (eigene Section davor) oder
die grosse Karte (eigene Section danach). */
.lumaria-karte-scrap-flyer {
position: absolute;
top: 0;
left: 0;
width: 15%;
max-width: 130px;
display: none;
pointer-events: none;
opacity: 0;
z-index: 2;
will-change: transform, opacity, left, top;
}
.lumaria-karte-scrap-flyer img {
display: block;
width: 100%;
height: auto;
}
@media (min-width: 640px) {
.lumaria-karte-scrap-flyer {
display: block;
}
}
@media (prefers-reduced-motion: reduce) {
.lumaria-karte-scrap-flyer {
display: none;
}
}
.map-placeholder {
aspect-ratio: 16 / 9;
max-width: 800px;
margin: 0 auto;
border: 1px dashed var(--color-gold);
border-radius: 14px;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
padding: 1rem;
color: var(--color-parchment-dim);
font-family: var(--font-heading);
font-style: italic;
font-size: 1rem;
background: rgba(var(--color-gold-rgb), 0.06);
}
/* Barrierefreiheit: visuell versteckt, aber für Screenreader/SEO vorhanden */
.visually-hidden {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
/* Lumaria: Bild-Überschrift "Tritt ein in Lumaria" -- breakout-and-
center-Technik (dieselbe wie .lumaria-hint-image weiter unten):
bewusst breiter als .hero-content (max-width:640px), damit die
sehr breite Banner-Grafik (Seitenverhaeltnis ca. 3:1) gross und
hochwertig wirkt statt auf 640px gestaucht zu werden. left:50% +
translateX(-50%) zentriert sie unabhaengig von der schmalen
Elternspalte; width:min(...) verhindert Ueberbreite auf sehr breiten
Bildschirmen. AUSGETAUSCHTE Grafik (v2): die neue Datei hat rundum
mehr Leerraum im Canvas selbst (die vorherige Version war oben/
seitlich bereits innerhalb der Bilddatei angeschnitten), dadurch
wirkt dieselbe angezeigte Breite bereits kleiner/luftiger als vorher
-- height:auto + object-fit:contain erhalten das Seitenverhaeltnis
garantiert verzerrungsfrei. */
/* Deutlich schmaler als die Vorgaengergrafik, obwohl der Schriftzug
dadurch NICHT kleiner wird als frueher -- im Gegenteil, er bleibt
gleich gross.
Der Grund steckt im Bild selbst: Bei "Tritt ein in Lumaria" nahm der
Schriftzug nur die mittleren 54 Prozent der Bildbreite ein, der Rest
waren Ranken, Laternen und die Waldszene. Beim neuen Schriftband sind
es nachgemessen 93 Prozent. Bei gleicher Breite waere die Schrift
also fast doppelt so gross erschienen -- und genau so sah es auch
aus.
72vw mal 54 Prozent ergibt 39vw Schrift. Damit die Schrift wieder
diese Groesse hat, braucht das neue Band 39 geteilt durch 0,93,
also rund 42vw. Die Obergrenze folgt derselben Rechnung. */
.lumaria-tritt-ein-heading {
display: block;
position: relative;
left: 50%;
transform: translateX(-50%);
max-width: none;
width: min(790px, 42vw);
height: auto;
object-fit: contain;
margin: 0.6rem auto 1.6rem;
}
/* Mobile (<=767px): das Bild-Canvas hat links/rechts breite dekorative
Ranken/Laternen/den kleinen Drachen -- der eigentliche Schriftzug
"Tritt ein in Lumaria" nimmt davon nur die mittleren ca. 54% ein.
Statt proportional mit dem Viewport zu schrumpfen (vorher 72vw ohne
eigene Mobile-Regel), wird die Grafik hier bewusst deutlich breiter
als der Viewport dargestellt (Breakout ueber left:50%+translateX,
wie bereits auf Desktop) -- die dekorativen Raender duerfen dabei
ausserhalb des sichtbaren Bereichs liegen, der zentrale Schriftzug
bleibt dadurch gross und gut lesbar statt zum Miniaturbanner zu
schrumpfen. Kein overflow-x auf der Seite, da body/section-weit
bereits Breakouts dieser Art sitewide unterstuetzt werden. */
/* Auf dem Handy stand die alte Grafik bewusst breiter als der
Bildschirm (168vw), damit ihr schmaler Schriftzug nicht zum
Miniaturbanner schrumpfte -- die Ranken am Rand durften dabei
ausserhalb liegen.
Das neue Band braucht diesen Kunstgriff nicht mehr: Seine Schrift
fuellt es fast ganz aus. Nach derselben Rechnung wie oben
(168vw mal 54 Prozent = 91vw Schrift, geteilt durch 0,93) genuegen
rund 98vw -- es passt also praktisch genau auf den Bildschirm. */
@media (max-width: 767px) {
.lumaria-tritt-ein-heading {
width: 98vw;
margin: 0.3rem auto 0.9rem;
}
}
/* Loomus-Fluegelschlag: wird von .hero-loomus-img (Lumaria-Erklaerbereich,
siehe weiter unten) wiederverwendet, deshalb bleibt dieses Keyframe
trotz Entfernung der frueheren einmaligen Quer-Flug-Animation
erhalten. */
@keyframes loomus-wingbeat {
0%, 100% { transform: translateY(0) scaleX(1) scaleY(1) rotate(0deg); }
25% { transform: translateY(-2px) scaleX(0.94) scaleY(1.03) rotate(1.2deg); }
50% { transform: translateY(0.5px) scaleX(1.02) scaleY(0.98) rotate(0deg); }
75% { transform: translateY(-1.5px) scaleX(0.96) scaleY(1.02) rotate(-1.2deg); }
}
/* Ueberschrift-Grafik "Entdecke Lumaria" (Nutzergrafik) ersetzt die
vorherige einfache Text-Ueberschrift; sitzt weiterhin innerhalb des