/* ============================================================ KOSMISCHER BAUPLAN im neuen Gewand („Sternwarte“) Gleiche Familie wie die Liebesanalyse: Elfenbein und Kalkputz, Violett als Nachtband, Gold als feine Linie. Liegt als Schicht über den alten Stilen in index.html. Funktionen, IDs und Abläufe bleiben unverändert. ============================================================ */ /* ── Farben: hell als Grund, die alten dunklen Werte für alles Nächtliche ── */ :root { --paper: #f5f0e8; --paper-2: #ece4d6; --paper-3: #fbf8f2; --white: #fffdf9; --ink: #1f1d36; --ink-soft: #524f68; --ink-mute: #87849a; --gold: #9c7633; --gold-deep: #86642a; --gold-2: #c09d5c; --gold-line: rgba(156,118,51,.45); --plum: #15142e; --plum-2: #22214a; --accent: #3f529e; --accent-deep: #3f529e; --line: rgba(31,29,54,.12); --line-strong: rgba(31,29,54,.24); --glow: rgba(192,157,92,.3); --err: #a8394f; --plaster: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.75' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .45 0 0 0 0 .38 0 0 0 0 .28 0 0 0 .5 0'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23n)' opacity='.16'/%3E%3C/svg%3E"); } .night, #cookie, #calm, #sent, .mockup { --ground: #0f0e22; --ground-2: #13122a; --ground-3: #1a1936; --panel: #1a1936; --ink: #f6f1e8; --ink-soft: #d0c7e2; --ink-mute: #a69cbf; --gold: #e2c486; --gold-deep: #c9a560; --gold-2: #ecd29d; --gold-line: rgba(226,196,134,.42); --accent: #cbb5f3; --accent-deep: #b9a0ec; --line: rgba(201,164,255,.18); --line-strong: rgba(201,164,255,.30); --glow: rgba(226,196,134,.45); --err: #f2a9b5; } /* ── Grund ── */ body { background: var(--paper) var(--plaster); color: var(--ink); } #aura, #orb, #stars { display: none !important; } .night { position: relative; isolation: isolate; color: var(--ink); background: radial-gradient(120% 80% at 50% 0%, #3a2d6c 0%, #2a2052 45%, #1d1739 100%); } .night::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: url("/sterne.svg") repeat; background-size: 480px; opacity: .7; } .sternfeld { position: absolute; inset: 0; z-index: -1; width: 100%; height: 100%; pointer-events: none; } .night.sterne-live::before { display: none; } .step.night { min-height: 100vh; min-height: 100svh; } h1, h2, h3, h4 { color: var(--ink); } .script, .script-eyebrow { color: var(--gold); text-shadow: none; } .night .script, .night .script-eyebrow { text-shadow: 0 0 24px rgba(226,196,134,.25); } .eyebrow, .spaced { font-family: var(--sans); text-transform: uppercase; letter-spacing: .3em; font-size: 11.5px; font-weight: 700; color: var(--gold); } .rule { display: flex; align-items: center; justify-content: center; gap: 14px; color: var(--gold); font-size: 13px; margin: 22px auto; max-width: 300px; } .rule::before, .rule::after { content: ""; flex: 1; height: 1px; background: linear-gradient(90deg, transparent, var(--gold-line), transparent); } .rule.left { margin-left: 0; max-width: 220px; } .rule.left::before { display: none; } /* ── Knöpfe: dunkles Violett auf hellem Grund, Gold auf Nachtgrund ── */ .btn { border-radius: 2px; font-size: 12.5px; letter-spacing: .2em; text-transform: uppercase; padding: 17px 28px; background: var(--plum); color: #f6f1e8; box-shadow: 0 14px 30px -18px rgba(43,33,82,.9); } .btn:hover { background: var(--plum-2); filter: none; transform: translateY(-1px); box-shadow: 0 16px 34px -18px rgba(43,33,82,.9); } .btn:focus-visible { outline: 2px solid var(--gold); } .night .btn, #cookie .cbtn, #calm .cbtn, #sent .cbtn { background: linear-gradient(135deg, #e6c88c, #c9a560); color: #2a1f45; box-shadow: 0 0 0 1px rgba(236,210,157,.5), 0 14px 40px -14px rgba(226,196,134,.55); border-radius: 2px; } .night .btn:hover { background: linear-gradient(135deg, #eed39c, #d2ae6a); } .btn-ghost, .night .btn-ghost { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 1px var(--gold-line); } .floatcta { background: var(--plum); color: #f6f1e8; border-radius: 2px; font-size: 12px; letter-spacing: .18em; text-transform: uppercase; box-shadow: inset 0 0 0 1px rgba(226,196,134,.55), 0 14px 38px -12px rgba(20,14,40,.6); } /* ── Kopfzeile im Hero ── */ .topnav { position: relative; z-index: 4; display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 26px max(4vw, calc(50% - 640px)) 0; } .topnav .brand { flex-direction: column; align-items: flex-start; gap: 0; text-decoration: none; line-height: 1; } .topnav .brand .b-script { font-size: 30px; color: #f6f1e8; line-height: .9; } .topnav .brand .b-serif { font-size: 11px; letter-spacing: .42em; text-transform: uppercase; color: #e2c486; margin: 2px 0 0 26px; text-shadow: none; } .topnav .links { display: flex; gap: 28px; margin-left: auto; margin-right: 34px; } .topnav .links a { font-size: 11px; font-weight: 700; letter-spacing: .24em; text-transform: uppercase; text-decoration: none; color: #efe7d8; padding: 6px 0; border-bottom: 1px solid transparent; } .topnav .links a:hover, .topnav .links a.active { border-bottom-color: #e2c486; } .navcta { font-size: 11px; font-weight: 700; letter-spacing: .22em; text-transform: uppercase; text-decoration: none; white-space: nowrap; color: #f6f1e8; background: rgba(20,14,40,.45); padding: 12px 18px; box-shadow: inset 0 0 0 1px rgba(226,196,134,.55); } .navcta:hover { background: rgba(226,196,134,.15); } @media (max-width: 1100px) { .topnav .links { display: none; } } @media (max-width: 760px) { .topnav { padding: 18px 16px 0; } .navcta { padding: 10px 12px; letter-spacing: .16em; } } /* ── Hero „Sternwarte“: Licht aus der Kuppel auf die Sphäre ganz links. Links Titel und Leitsatz, rechts das Formular über beide Zeilen ── */ header.hero { position: relative; padding: 0; overflow: hidden; min-height: min(100svh, 1000px); background: #120d24; } .scene { position: absolute; inset: 0; } .scene picture, .scene img { position: absolute; inset: 0; width: 100%; height: 100%; display: block; } .scene img { object-fit: cover; object-position: 6% 50%; animation: raumlicht 2.8s ease-out both; } @keyframes raumlicht { from { filter: brightness(.3) saturate(.7); } to { filter: none; } } #lichtfeld { position: absolute; inset: 0; z-index: 1; pointer-events: none; } .scene::after { content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none; background: linear-gradient(180deg, rgba(10,7,22,.35) 0%, transparent 16%, transparent 80%, rgba(10,7,22,.5) 100%), linear-gradient(90deg, transparent 26%, rgba(10,7,22,.32) 48%, rgba(10,7,22,.2) 100%); } .hero-in { --gx: max(4vw, calc(50% - 720px)); position: relative; z-index: 3; display: grid; grid-template-columns: minmax(0, 1fr) minmax(330px, 390px); grid-template-rows: auto 1fr; column-gap: clamp(36px, 4vw, 72px); padding: 118px var(--gx) 70px max(calc(var(--gx) + 2vw), 30vw); } .hero-copy { grid-column: 1; grid-row: 1; position: relative; container-type: inline-size; } .hero-lead { grid-column: 1; grid-row: 2; position: relative; container-type: inline-size; padding-bottom: 10px; } header.hero .card { grid-column: 2; grid-row: 1 / span 2; align-self: start; margin-top: 34px; } .hero-copy::before { content: ""; position: absolute; z-index: -1; inset: -24% -16% -40%; background: radial-gradient(closest-side, rgba(12,8,26,.5), transparent); } header.hero h1.hero-title { font-family: var(--serif); font-weight: 500; font-size: clamp(30px, 10.2cqw, 60px); line-height: 1.06; letter-spacing: .18em; text-transform: uppercase; color: #f6f1e8; margin: 0; text-wrap: nowrap; text-shadow: 0 2px 30px rgba(10,7,22,.6); } .hero-title .s { display: block; font-family: var(--script); text-transform: none; letter-spacing: 0; color: #e2c486; font-size: .9em; line-height: 1; margin: 0 0 6px -2px; text-shadow: 0 0 30px rgba(226,196,134,.35); } .hero-tag { margin-top: 22px; font-family: var(--serif); text-transform: uppercase; letter-spacing: .15em; font-size: clamp(14px, 3.5cqw, 20px); line-height: 1.7; color: #efe8dc; } .hero-tag em { font-style: italic; color: #e2c486; letter-spacing: .12em; } .hero-systems { margin-top: 14px; white-space: nowrap; font-family: var(--sans); font-weight: 700; text-transform: uppercase; letter-spacing: .2em; font-size: clamp(8.5px, 2.05cqw, 11.5px); color: #e2c486; opacity: .92; } .hero-lead .rule { margin: 26px 0 18px; } .hero-lead .promise { margin: 0 0 16px; max-width: 30em; font-family: var(--serif); font-style: italic; font-size: clamp(19px, 4cqw, 24px); line-height: 1.38; color: #f6f1e8; } .hero-lead .promise b { font-weight: 500; color: #e2c486; } .hero-lead .herolead { display: flex; flex-direction: column; gap: 10px; max-width: 34em; margin: 0; padding-left: 18px; border-left: 1px solid rgba(226,196,134,.45); } .hero-lead .herolead p { font-size: 15px; line-height: 1.65; color: #d6cde6; } .hero-lead .herolead p.strong { color: #f6f1e8; font-weight: 600; } /* Auftritt: Titel zieht sich zusammen, dann folgen Zeile für Zeile */ .hero-copy > *, .hero-lead > * { animation: auftritt 1.3s cubic-bezier(.2,.7,.2,1) both; } .hero-copy > :nth-child(1) { animation: titelauftritt 2s cubic-bezier(.2,.7,.2,1) 1s both; } .hero-copy > :nth-child(2) { animation-delay: 1.7s; } .hero-copy > :nth-child(3) { animation-delay: 2s; } .hero-lead > :nth-child(1) { animation-delay: 2.2s; } .hero-lead > :nth-child(2) { animation-delay: 2.4s; } .hero-lead > :nth-child(3) { animation-delay: 2.6s; } header.hero .card { animation: kartenauftritt 1.4s cubic-bezier(.2,.7,.2,1) 1.3s both, kranzschein 5s ease-in-out 2.7s infinite; } @keyframes auftritt { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } } @keyframes titelauftritt { from { opacity: 0; letter-spacing: .42em; filter: blur(6px); } to { opacity: 1; letter-spacing: .18em; filter: none; } } @keyframes kartenauftritt { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } } @media (prefers-reduced-motion: reduce) { .scene img, .hero-copy > *, .hero-lead > *, header.hero .card { animation: none !important; } } @media (max-width: 1300px) and (min-width: 1101px) { .hero-in { grid-template-columns: minmax(0, 1fr) 330px; padding-left: 33vw; } header.hero .card .field input, header.hero .card .field select { font-size: 14px; padding-left: 10px; } header.hero .card .field select { padding-right: 24px; background-position: right 8px center; } } @media (max-width: 1100px) { header.hero { min-height: 0; } .scene { inset: 0 0 auto 0; height: 92svh; } .scene img { object-position: 50% 40%; } .scene::after { background: linear-gradient(180deg, rgba(10,7,22,.35) 0%, transparent 14%, transparent 74%, #120d24 100%); } .hero-in { grid-template-columns: 1fr; grid-template-rows: none; row-gap: 26px; padding: 70px 16px 56px; justify-items: center; } .hero-copy, .hero-lead, header.hero .card { grid-column: 1; grid-row: auto; } .hero-copy { width: min(100%, 560px); min-height: calc(74svh - 70px); text-align: center; padding-top: 10svh; } .hero-copy::before { inset: -10% -6% 30%; } header.hero .card { order: 2; width: min(100%, 520px); margin-top: 0; } .hero-lead { order: 3; width: min(100%, 560px); text-align: left; } .hero-lead .rule { margin: 8px auto 18px; } .hero-lead .rule.left::before { display: block; } .hero-lead .promise { text-align: center; margin-inline: auto; } } @media (max-width: 760px) { header.hero .card { padding: 24px 18px 16px; } .hero-copy { padding-top: 8svh; } } /* Formular als Glaskarte mit goldenem Lichtkranz: eine helle Linie läuft um die Karte, ein warmer Schein atmet */ @property --kranz { syntax: ""; inherits: false; initial-value: 0deg; } header.hero .card { position: relative; margin-top: 0; background: rgba(16,11,33,.66); backdrop-filter: blur(14px) saturate(1.15); -webkit-backdrop-filter: blur(14px) saturate(1.15); border: none; border-radius: 6px; padding: 30px 28px 20px; box-shadow: 0 0 0 1px rgba(226,196,134,.16), 0 0 70px -12px rgba(226,196,134,.38), 0 40px 80px -36px rgba(0,0,0,.8); } header.hero .card::before { content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1.5px; pointer-events: none; background: conic-gradient(from var(--kranz), rgba(226,196,134,.22) 0deg, rgba(226,196,134,.22) 210deg, #c9a560 262deg, #fff3d2 292deg, #f3dca6 306deg, #c9a560 330deg, rgba(226,196,134,.22) 360deg); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask-composite: exclude; animation: kranz 7s linear infinite; } @keyframes kranz { to { --kranz: 360deg; } } @keyframes kranzschein { 0%, 100% { box-shadow: 0 0 0 1px rgba(226,196,134,.16), 0 0 60px -14px rgba(226,196,134,.32), 0 40px 80px -36px rgba(0,0,0,.8); } 50% { box-shadow: 0 0 0 1px rgba(226,196,134,.24), 0 0 90px -8px rgba(226,196,134,.5), 0 40px 80px -36px rgba(0,0,0,.8); } } @media (prefers-reduced-motion: reduce) { header.hero .card, header.hero .card::before { animation: none; } } header.hero .card .traits { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 16px; margin: 14px 0 0; } header.hero .card .traits span { background: none; border: none; border-radius: 0; padding: 0; font-size: 12px; font-weight: 600; color: var(--ink-soft); } header.hero .card .traits span::before { content: "✦"; font-size: 9px; color: #e2c486; margin-right: 2px; } header.hero .card h3 { font-size: 25px; font-weight: 500; color: #f6f1e8; line-height: 1.2; } header.hero .card .hint { color: var(--ink-soft); font-size: 14px; margin-bottom: 18px; } .night .field label, .night .datewrap .subl { font-size: 10.5px; letter-spacing: .2em; text-transform: uppercase; font-weight: 700; color: #e2c486; } .night .field input, .night .field select { background: rgba(255,255,255,.07); border: 1px solid rgba(226,196,134,.28); border-radius: 3px; padding: 11px 12px; font-size: 15px; } .night .field select { padding-right: 32px; } .night .field input:focus, .night .field select:focus { border-color: #e2c486; box-shadow: 0 0 0 3px rgba(226,196,134,.18); } header.hero .field { margin-bottom: 12px; } header.hero .btn { margin-top: 6px; } header.hero .microcopy { color: var(--ink-mute); font-size: 11.5px; line-height: 1.5; } /* ── Leitsatz direkt unter dem Hero ── */ .intro-band { padding: 84px 0 76px; text-align: center; } .intro-band .promise { margin: 0 auto; max-width: 26em; font-family: var(--serif); font-style: normal; font-size: clamp(24px, 3vw, 34px); line-height: 1.35; color: var(--ink); } .intro-band .promise b { font-style: italic; font-weight: 500; color: var(--gold); } .intro-band .herolead { margin: 0 auto; max-width: 40em; gap: 14px; } .intro-band .herolead p { color: var(--ink-soft); font-size: 17px; line-height: 1.7; } .intro-band .herolead p.strong { color: var(--ink); font-weight: 600; } .intro-band .alles { margin-top: 26px; font-size: 11px; letter-spacing: .26em; text-transform: uppercase; font-weight: 700; color: var(--gold); } /* ── Abschnitte auf Elfenbein ── */ section.band { padding: 96px 0; } .band-2 { background: var(--paper-2) var(--plaster); } .sec-head h2 { font-size: clamp(30px, 4.2vw, 46px); line-height: 1.12; } .sec-head p, .intro p { color: var(--ink-soft); } .script-eyebrow { font-size: clamp(24px, 3vw, 30px); } .pain-grid { gap: 0 44px; } .pain { background: none; border: none; border-top: 1px solid var(--gold-line); border-radius: 0; padding: 22px 0 26px; } .pain .dot { background: none; box-shadow: none; width: auto; height: auto; color: var(--gold); font-size: 13px; margin-top: 4px; } .pain p { color: var(--ink); font-size: 16.5px; } .bridge p { color: var(--ink-soft); } .bridge p em { color: var(--ink); } /* ── Die Ebenen als Nachtband mit sechs Säulen ── */ .pillars { display: grid; grid-template-columns: repeat(3, 1fr); gap: 46px 0; max-width: 1040px; margin: 0 auto; } .pillar { text-align: center; padding: 8px 16px; position: relative; display: flex; flex-direction: column; align-items: center; } .pillar:not(:nth-child(3n+1))::before { content: ""; position: absolute; left: 0; top: 6%; bottom: 6%; width: 1px; background: linear-gradient(180deg, transparent, var(--gold-line), transparent); } .pillar svg { width: 44px; height: 44px; color: var(--gold); margin-bottom: 16px; } .pillar h3 { font-size: 17px; letter-spacing: .16em; line-height: 1.35; text-transform: uppercase; color: var(--ink); margin-bottom: 10px; } .pillar p { font-size: 15px; color: var(--ink-soft); line-height: 1.6; max-width: 19em; margin: 0 auto; } .ebenen .sec-head { margin-bottom: 46px; } .ebenen .midcta { text-align: center; margin-top: 46px; } @media (max-width: 900px) { .pillars { grid-template-columns: 1fr 1fr; gap: 34px 0; } .pillar::before { display: none !important; } } @media (max-width: 620px) { .pillars { grid-template-columns: 1fr; gap: 0; } .pillar { padding: 24px 10px; } .pillar + .pillar::before { display: block !important; left: 20%; right: 20%; top: 0; bottom: auto; width: auto; height: 1px; background: linear-gradient(90deg, transparent, var(--gold-line), transparent); } } /* ── Beispiel: Vorschau als Nachtkarte, Kacheln auf Elfenbein ── */ .mockup { border-radius: 4px; border: 1px solid rgba(226,196,134,.45); box-shadow: 0 30px 60px -32px rgba(30,20,60,.7); } .mockup .mock-h { color: var(--ink); } .mcard { background: var(--white); border: 1px solid var(--line); border-radius: 3px; color: var(--ink); } .mcard .ic { display: none; } .mcard::before { content: "✦"; color: var(--gold); font-size: 11px; flex: none; } /* ── Über mich: geteilter Block mit Foto ── */ .about2 { display: grid; grid-template-columns: 1fr 1fr; min-height: 560px; } .about2 .txt { display: flex; align-items: center; justify-content: flex-end; padding: 80px 64px; background: var(--paper-3) var(--plaster); } .about2 .txt > div { max-width: 480px; } .about2 .abeyebrow { font-family: var(--script); font-size: 30px; color: var(--gold); line-height: 1; margin-bottom: 10px; } .about2 h2 { font-size: clamp(32px, 4vw, 46px); line-height: 1.12; color: var(--ink); } .about2 .denise-name { color: var(--ink); } .about2 p { color: var(--ink-soft); font-size: 16.5px; line-height: 1.7; } .about2 .pic { position: relative; min-height: 380px; } .about2 .pic img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 25%; } @media (max-width: 900px) { .about2 { grid-template-columns: 1fr; } .about2 .txt { padding: 60px 16px; justify-content: center; } .about2 .pic { min-height: 0; aspect-ratio: 1; } } /* ── Fragen mit Haarlinien ── */ .faq { gap: 0; max-width: 800px; } .faq-item { background: none; border: none; border-top: 1px solid var(--gold-line); border-radius: 0; padding: 0; } .faq-item:last-child { border-bottom: 1px solid var(--gold-line); } .faq-item[open] { background: none; } .faq-q { font-size: 23px; color: var(--ink); padding: 20px 0; } .faq-q::after { color: var(--gold); } .faq-a { color: var(--ink-soft); } /* ── Abschluss als Nachtband ── */ .final-band { padding: 100px 0; text-align: center; } .finalcta { background: none; box-shadow: none; border-radius: 0; padding: 0; } .finalcta h2 { color: var(--ink); font-size: clamp(30px, 4.4vw, 48px); } .finalcta p { color: var(--ink-soft); } /* ── Fußzeile ── */ footer { border-top: 1px solid var(--line); margin-top: 0; color: var(--ink-mute); } .foot .fbrand .fs { color: var(--ink); } .foot .fbrand .fc { color: var(--gold); text-shadow: none; } .foot a { color: var(--ink-soft); } .disclaimer { color: var(--ink-mute); } /* ── Der Moment: zwei Sternenräder (Astrologie und Human Design) laufen zusammen ── */ #step2 .ritual { min-height: 100vh; min-height: 100svh; } .stage2 { position: relative; width: min(94vw, 620px); height: min(66vw, 390px); } .stage2 #ritualcv { position: absolute; inset: -30% -10%; width: 120%; height: 160%; } .wheelbox { position: absolute; top: 50%; width: min(58vw, 350px); aspect-ratio: 1; transition: transform 7s cubic-bezier(.45,.05,.2,1); } .wheelbox.wa { left: 0; transform: translate(-8%, -50%); } .wheelbox.wb { right: 0; transform: translate(8%, -50%); } .stage2.merge .wheelbox.wa { transform: translate(36%, -50%); } .stage2.merge .wheelbox.wb { transform: translate(-36%, -50%); } .wheelbox svg { width: 100%; height: 100%; overflow: visible; } .wheelbox .spinner { transform-origin: 160px 160px; animation: spin 40s linear infinite; } .wheelbox.wb .spinner { animation-direction: reverse; } .wheelbox .ring { fill: none; stroke: var(--gold); stroke-width: 1.1; opacity: .8; } .wheelbox .ring2 { fill: none; stroke: var(--gold); stroke-width: .8; opacity: .5; } .wheelbox .ring3 { fill: none; stroke: var(--gold); stroke-width: 1; opacity: .45; stroke-dasharray: 1 5; stroke-linecap: round; } .wheelbox .axis { stroke: var(--gold); stroke-width: .7; opacity: .35; } .wheelbox .tick { stroke: var(--gold); stroke-width: .9; opacity: .55; } .wheelbox .fine { stroke: var(--gold); stroke-width: .6; opacity: .35; } .wheelbox .wglyph { font-family: "Apple Symbols", "Segoe UI Symbol", var(--sans); fill: var(--ink-soft); font-size: 15px; text-anchor: middle; } .wheelbox .nm { font-family: var(--sans); fill: var(--gold); font-size: 10px; letter-spacing: .3em; text-anchor: middle; text-transform: uppercase; font-weight: 700; } .wheelbox .nm { transition: opacity 1.4s ease 1.6s; } .stage2.merge .wheelbox .nm { opacity: 0; } .heartcore { position: absolute; top: 50%; left: 50%; width: 16px; height: 16px; border-radius: 50%; transform: translate(-50%, -50%) scale(0); background: radial-gradient(circle, #fff, #e8c98a); box-shadow: 0 0 30px 10px rgba(236,210,157,.55), 0 0 110px 40px rgba(220,187,124,.25); transition: transform 1.2s ease 6.4s; } .stage2.merge .heartcore { transform: translate(-50%, -50%) scale(1); } .ritual-status { color: var(--ink); font-size: clamp(1.4rem, 3.2vw, 1.9rem); margin-top: 38px; } .ritual-sub { color: var(--gold); letter-spacing: .32em; font-size: 11.5px; } @media (prefers-reduced-motion: reduce) { .wheelbox .spinner { animation: none; } .wheelbox, .heartcore { transition: none; } } /* ── Vorschau, Öffnen und Bericht auf Nachtgrund: feinere Kanten ── */ .night .card, .mailcard, .preview-wrap, .report, .panel, .acc, .open-card, .cookie-card { border-radius: 6px; } .report { border-color: rgba(226,196,134,.45); } .rtab { border-radius: 2px; letter-spacing: .06em; } .rtab.active, .pv-pill.on { background: linear-gradient(135deg, #e6c88c, #c9a560); color: #2a1f45; } .cookie-card { background: rgba(27,19,56,.98); } /* ============================================================ Hervorgehobene Elemente: Karten, gerahmtes Statement, Glaskarten ============================================================ */ /* „Kommt dir das bekannt vor?“: vier edle Karten mit Goldkante */ .pain-grid { gap: 20px; } .pain { position: relative; overflow: hidden; background: var(--white); border: 1px solid var(--gold-line); border-top: 1px solid var(--gold-line); border-radius: 4px; padding: 28px 28px 28px 24px; gap: 18px; box-shadow: 0 26px 50px -36px rgba(60,40,20,.5); transition: transform .3s ease, box-shadow .3s ease; } .pain::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 2px; background: linear-gradient(90deg, transparent, #c9a560, transparent); } .pain:hover { transform: translateY(-3px); box-shadow: 0 30px 60px -34px rgba(60,40,20,.55); } .pain .dot { flex: none; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; margin-top: 0; border: 1px solid var(--gold-line); background: radial-gradient(circle, rgba(201,165,96,.16), transparent 70%); color: var(--gold); font-size: 13px; } .pain p { font-family: var(--serif); font-size: 20px; line-height: 1.42; color: var(--ink); } /* „Genau dafür habe ich …“ als gerahmtes Statement */ section.band > .wrap.bridge { max-width: 900px; padding: 70px 64px 60px; background: var(--white); border: 1px solid var(--gold-line); box-shadow: inset 0 0 0 9px var(--white), inset 0 0 0 10px rgba(156,118,51,.28), 0 36px 70px -46px rgba(60,40,20,.55); } section.band > .wrap.bridge::before { content: "✦"; position: absolute; top: -13px; left: 50%; transform: translateX(-50%); padding: 0 14px; background: var(--paper); color: var(--gold); font-size: 16px; line-height: 26px; } .bridge h2 { font-size: clamp(32px, 4.4vw, 48px); line-height: 1.12; margin: 6px 0 4px; } .bridge h2 .script { font-size: 1.12em; } .bridge > p { font-size: 17.5px; line-height: 1.75; } .bridge > p:last-child em { font-family: var(--serif); font-size: 21px; color: var(--gold); } @media (max-width: 760px) { section.band > .wrap.bridge { padding: 52px 22px 44px; margin-inline: 16px; width: auto; } } /* Die Ebenen als leuchtende Glaskarten */ .ebenen .pillars { gap: 18px; } .ebenen .pillar { background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02)); border: 1px solid rgba(226,196,134,.26); border-radius: 4px; padding: 32px 24px 30px; transition: transform .35s ease, border-color .35s ease, box-shadow .35s ease; } .ebenen .pillar::before { display: none !important; } .ebenen .pillar:hover { transform: translateY(-5px); border-color: rgba(226,196,134,.65); box-shadow: 0 24px 60px -26px rgba(226,196,134,.38); } .ebenen .pillar svg { width: 72px; height: 72px; padding: 14px; border-radius: 50%; border: 1px solid rgba(226,196,134,.38); background: radial-gradient(circle, rgba(226,196,134,.14), transparent 70%); margin-bottom: 18px; box-shadow: 0 0 30px -10px rgba(226,196,134,.45); } @media (max-width: 620px) { .ebenen .pillars { gap: 14px; } } /* Beispiel: Vorschaukarte mit Goldschein */ .mockup { box-shadow: 0 0 0 1px rgba(226,196,134,.2), 0 0 70px -20px rgba(226,196,134,.32), 0 40px 70px -40px rgba(30,20,60,.8); } .mcard { transition: transform .25s ease, border-color .25s ease; } .mcard:hover { transform: translateY(-2px); border-color: var(--gold-line); } /* Über mich: goldener Lichtrahmen im Foto, die Linie läuft langsam herum */ .about2 .pic::after { content: ""; position: absolute; inset: 22px; padding: 1.5px; pointer-events: none; background: conic-gradient(from var(--kranz), rgba(226,196,134,.35) 0deg, rgba(226,196,134,.35) 200deg, #c9a560 260deg, #fff3d2 292deg, #e2c486 316deg, rgba(226,196,134,.35) 360deg); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask-composite: exclude; animation: kranz 10s linear infinite; } /* Abschluss als Karte mit umlaufender Goldlinie */ .final-band .finalcta { position: relative; max-width: 820px; margin: 0 auto; padding: 64px 52px; border-radius: 6px; background: rgba(16,11,33,.5); box-shadow: 0 0 0 1px rgba(226,196,134,.14), 0 0 90px -24px rgba(226,196,134,.38); } .final-band .finalcta::before { content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1.5px; pointer-events: none; background: conic-gradient(from var(--kranz), rgba(226,196,134,.22) 0deg, rgba(226,196,134,.22) 210deg, #c9a560 262deg, #fff3d2 292deg, #f3dca6 306deg, #c9a560 330deg, rgba(226,196,134,.22) 360deg); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask-composite: exclude; animation: kranz 8s linear infinite; } @media (max-width: 760px) { .final-band .finalcta { padding: 46px 22px; margin-inline: 16px; } } @media (prefers-reduced-motion: reduce) { .about2 .pic::after, .final-band .finalcta::before { animation: none; } } /* ============================================================ Der Moment nach dem Klick: Sternwarte im Hintergrund, zwei Räder zeichnen sich, glimmen auf, laufen zusammen, ein Lichtring geht auf und dein Name erscheint in der Mitte ============================================================ */ #ritualwrap { position: relative; } .ritual-bg { position: absolute; z-index: -1; top: 0; left: 50%; width: 100vw; height: 100%; transform: translateX(-50%); overflow: hidden; pointer-events: none; } .ritual-bg::before { content: ""; position: absolute; inset: -20px; background: url("/bilder/sternwarte-licht-quer-1600.webp") 8% 50% / cover no-repeat; filter: blur(3px) brightness(.38) saturate(.85); animation: ritualraum 12s ease-out both; } .ritual-bg::after { content: ""; position: absolute; inset: 0; background: radial-gradient(60% 55% at 50% 45%, transparent 0%, rgba(14,10,30,.55) 60%, rgba(14,10,30,.92) 100%); } @keyframes ritualraum { from { transform: scale(1.12); } to { transform: scale(1); } } @media (max-width: 760px) { .ritual-bg::before { background-image: url("/bilder/sternwarte-licht-hoch-1080.webp"); background-position: 50% 40%; } } .stage2 .z { stroke-dasharray: 1; stroke-dashoffset: 1; } .stage2.go .z { animation: zeichnen 1.9s cubic-bezier(.6,.1,.2,1) forwards; animation-delay: var(--d, 0s); } .stage2 .wglyph { opacity: 0; transform-box: fill-box; transform-origin: center; } .stage2.go .wglyph { animation: aufglimmen 1s cubic-bezier(.2,.9,.3,1.3) forwards; animation-delay: var(--d, 1s); } .stage2 .ring3 { opacity: 0; transition: opacity 1.4s ease .8s; } .stage2.go .ring3 { opacity: .45; } @keyframes zeichnen { to { stroke-dashoffset: 0; } } @keyframes aufglimmen { 0% { opacity: 0; transform: scale(.3); } 55% { opacity: 1; transform: scale(1.35); fill: #fff3d2; } 100% { opacity: .9; transform: scale(1); } } .stage2 .wheelbox { transition: transform 4.6s cubic-bezier(.45,.05,.2,1), filter 1s ease; } .stage2.eins .wheelbox { filter: drop-shadow(0 0 18px rgba(226,196,134,.55)); } .lichtring { position: absolute; top: 50%; left: 50%; width: 120px; height: 120px; margin: -60px 0 0 -60px; border-radius: 50%; pointer-events: none; border: 1.5px solid rgba(255,236,190,.9); box-shadow: 0 0 40px 8px rgba(226,196,134,.45), inset 0 0 30px 4px rgba(226,196,134,.35); opacity: 0; transform: scale(.2); } .stage2.eins .lichtring { animation: lichtring 2.2s cubic-bezier(.15,.7,.2,1) forwards; } .stage2.eins .lichtring.l2 { animation-delay: .35s; } @keyframes lichtring { 0% { opacity: 0; transform: scale(.2); } 15% { opacity: 1; } 100% { opacity: 0; transform: scale(5.2); } } .heartcore { transition: transform 1.1s cubic-bezier(.2,.9,.3,1.3); } .stage2.merge .heartcore { transform: translate(-50%, -50%) scale(0); } .stage2.eins .heartcore { transform: translate(-50%, -50%) scale(1.6); } .ritual-name { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%) scale(.9); white-space: nowrap; pointer-events: none; font-family: var(--script); font-size: clamp(46px, 9vw, 86px); line-height: 1; color: #f3dca6; opacity: 0; filter: blur(8px); text-shadow: 0 0 28px rgba(226,196,134,.75), 0 0 70px rgba(226,196,134,.4); transition: opacity 1.6s ease .5s, filter 1.6s ease .5s, transform 2s cubic-bezier(.2,.7,.2,1) .5s; } .stage2.eins .ritual-name { opacity: 1; filter: none; transform: translate(-50%, -50%) scale(1); } .stage2.eins .heartcore { opacity: .0; transition: transform 1.1s cubic-bezier(.2,.9,.3,1.3), opacity 1.2s ease 1.4s; } @media (prefers-reduced-motion: reduce) { .ritual-bg::before { animation: none; } .stage2 .z { stroke-dashoffset: 0; } .stage2 .wglyph { opacity: .9; } .lichtring { display: none; } } /* ============================================================ Vorschau (nach dem Moment) und Bericht im neuen Gewand ============================================================ */ .g-greeting h2 { font-size: clamp(30px, 4.6vw, 48px); } .g-greeting .spark { color: var(--gold); } .preview-wrap { background: rgba(16,11,33,.55); border: 1px solid rgba(226,196,134,.3); box-shadow: 0 0 60px -26px rgba(226,196,134,.35); } .preview-label, .locked-wrap .lbl { letter-spacing: .3em; font-weight: 700; font-size: 10.5px; } .preview-body .pv-pill { border-radius: 2px; letter-spacing: .06em; } .locked-fold { border-radius: 4px; } /* E-Mail-Karte: wie das Formular oben mit umlaufender Goldlinie */ .mailcard { background: rgba(16,11,33,.66); border: none; border-radius: 6px; overflow: visible; box-shadow: 0 0 0 1px rgba(226,196,134,.16), 0 0 80px -16px rgba(226,196,134,.42), 0 40px 80px -36px rgba(0,0,0,.8); } .mailcard::before { inset: 0; border-radius: inherit; padding: 1.5px; pointer-events: none; background: conic-gradient(from var(--kranz), rgba(226,196,134,.22) 0deg, rgba(226,196,134,.22) 210deg, #c9a560 262deg, #fff3d2 292deg, #f3dca6 306deg, #c9a560 330deg, rgba(226,196,134,.22) 360deg); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask-composite: exclude; animation: kranz 7s linear infinite; } .mailcard h3 { font-size: 28px; font-weight: 500; } .mailcard .mail-sub { font-weight: 500; font-style: italic; } /* Bericht: Kopf wie ein Deckblatt, Reiter als feine Versalien, Karten aus Glas mit Goldkante */ #step3 > .wrap { max-width: 1060px; } .report { background: rgba(14,10,30,.62); border: 1px solid rgba(226,196,134,.32); border-radius: 6px; padding: 0 0 46px; box-shadow: 0 0 0 1px rgba(226,196,134,.08), 0 50px 110px -50px rgba(0,0,0,.9), 0 0 90px -30px rgba(226,196,134,.25); } .report::before { display: none; } .report-head { position: relative; margin: 0 0 6px; padding: 76px 36px 40px; overflow: hidden; isolation: isolate; } .report-head::before { content: ""; position: absolute; inset: 0; z-index: -2; background: url("/bilder/sternwarte-licht-quer-1600.webp") 12% 45% / cover no-repeat; filter: brightness(.55) saturate(.9); } .report-head::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(14,10,30,.15) 0%, rgba(14,10,30,.45) 55%, rgba(14,10,30,.96) 100%), radial-gradient(60% 70% at 50% 40%, rgba(14,10,30,.35), transparent); } .report-emblem { font-size: 22px; color: #e2c486; } .report-eyebrow { color: #e2c486; letter-spacing: .34em; } .report-title { font-size: clamp(26px, 3.6vw, 42px); letter-spacing: .2em; text-transform: uppercase; color: #f6f1e8; margin-top: 14px; } .report-name { font-size: clamp(54px, 9vw, 96px); color: #f3dca6; margin: 10px 0 8px; text-shadow: 0 0 34px rgba(226,196,134,.45); } .report-birth { letter-spacing: .2em; text-transform: uppercase; font-size: 11.5px; font-weight: 700; color: #d6cde6; } .report-greeting { font-family: var(--serif); font-style: italic; font-size: 20px; line-height: 1.55; color: #efe8dc; max-width: 34em; } .report-rule { max-width: 360px; margin: 30px auto 0; } .report > *:not(.report-head) { margin-left: 36px; margin-right: 36px; } .rtabs-hint { color: #e2c486; text-shadow: none; font-size: 12px; letter-spacing: .08em; } .rtabs-track { gap: 4px 26px; } .rtab { background: none; border: none; border-bottom: 1px solid transparent; border-radius: 0; padding: 10px 2px; font-size: 11.5px; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: #d6cde6; } .rtab:hover { color: #f6f1e8; border-bottom-color: rgba(226,196,134,.5); } .rtab.active { background: none; color: #f3dca6; border-bottom-color: #e2c486; } .panel { background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02)); border: 1px solid rgba(226,196,134,.24); border-radius: 4px; } .panel .cap, .cap2 { letter-spacing: .3em; font-weight: 700; } .factrow .f { border-radius: 3px; background: rgba(226,196,134,.06); border-color: rgba(226,196,134,.32); box-shadow: none; position: relative; overflow: hidden; } .factrow .f::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 2px; background: linear-gradient(90deg, transparent, #e2c486, transparent); } .factrow .f .v { font-size: 20px; color: #f3dca6; text-shadow: none; } .acc { border-radius: 4px; border-color: rgba(226,196,134,.2); background: rgba(255,255,255,.025); } .acc[open] { border-color: rgba(226,196,134,.5); background: rgba(255,255,255,.04); box-shadow: 0 0 40px -22px rgba(226,196,134,.4); } .acc-t { font-size: 21px; } .acc-take { border-radius: 0; background: rgba(226,196,134,.07); font-size: 17.5px; font-style: italic; } .ov-intro { font-family: var(--serif); font-size: 19px; color: #efe8dc; } .ov-start { border-radius: 4px; } .ov-start-b { border-radius: 2px; letter-spacing: .06em; } .closing { border-radius: 4px; font-style: italic; } @media (max-width: 760px) { .report-head { padding: 56px 18px 30px; } .report > *:not(.report-head) { margin-left: 16px; margin-right: 16px; } .rtabs-track { gap: 2px 16px; } } /* ============================================================ RUNDE 3: Astrologische Momente ============================================================ */ :root { --symbol: "Apple Symbols", "Segoe UI Symbol", "Noto Sans Symbols 2", "Noto Sans Symbols", sans-serif; } @keyframes drehen { to { transform: rotate(360deg); } } @keyframes einblend { from { opacity: 0; } } /* ── Sternbilder (Formular, Klick-Moment, Deckblatt): Sterne glimmen auf, dann ziehen sich die Linien ── */ .sternbild { display: block; width: 100%; height: 100%; overflow: visible; } .sternbild .sb-l { stroke: #e2c486; stroke-width: .9; stroke-linecap: round; opacity: .6; transition: stroke-dashoffset 1.1s cubic-bezier(.6,.1,.2,1) calc(var(--sb-start, 0s) + .5s + var(--d)); } .sternbild .sb-s { fill: #fff6df; opacity: 0; transform-box: fill-box; transform-origin: center; transform: scale(.2); transition: opacity .6s ease calc(var(--sb-start, 0s) + var(--d)), transform .9s cubic-bezier(.2,.9,.3,1.7) calc(var(--sb-start, 0s) + var(--d)); } .sternbild .sb-h { fill: rgba(243,220,166,.16); opacity: 0; transition: opacity 1.2s ease calc(var(--sb-start, 0s) + var(--d)); } .an > .sternbild .sb-l { stroke-dashoffset: 0 !important; } .an > .sternbild .sb-s { opacity: .95; transform: none; animation: sbfunkeln 2.8s ease-in-out calc(var(--sb-start, 0s) + 2.4s + var(--d)) infinite alternate; } .an > .sternbild .sb-h { opacity: 1; } @keyframes sbfunkeln { to { opacity: .45; } } /* ============================================================ „Was in deinem Bauplan steckt“: Nebel, Astrolabium mit dem Himmel von jetzt, Goldfäden zu den sechs Ebenen ============================================================ */ .ebenen { overflow: hidden; padding: 110px 0 120px; } .ebenen .nebel { position: absolute; inset: -12%; z-index: -2; pointer-events: none; background: linear-gradient(118deg, transparent 34%, rgba(190,205,255,.05) 46%, rgba(255,240,215,.09) 50%, rgba(190,205,255,.05) 54%, transparent 66%), radial-gradient(30% 26% at 50% 56%, rgba(226,196,134,.18), transparent 70%), radial-gradient(38% 34% at 27% 44%, rgba(58,78,178,.42), transparent 72%), radial-gradient(36% 32% at 75% 64%, rgba(196,160,96,.16), transparent 72%), radial-gradient(50% 30% at 62% 22%, rgba(90,120,220,.16), transparent 72%); animation: nebel 36s ease-in-out infinite alternate; } @keyframes nebel { from { transform: translate3d(-2%, -1.5%, 0) scale(1); } to { transform: translate3d(2%, 1.5%, 0) scale(1.07) rotate(1.5deg); } } .ebenen .sec-head { margin-bottom: 64px; } /* echte Milchstraße als Himmel (Bildschirm-Überblendung: Schwarz verschwindet, das Violett bleibt) */ .ebenen .himmelbild { position: absolute; inset: 0; z-index: -3; pointer-events: none; mix-blend-mode: screen; opacity: .95; background: url("/bilder/milchstrasse-2400.webp") 50% 55% / cover no-repeat; -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 14%, #000 86%, transparent 100%); mask-image: linear-gradient(180deg, transparent 0, #000 14%, #000 86%, transparent 100%); animation: himmeldrift 60s ease-in-out infinite alternate; } @keyframes himmeldrift { from { transform: scale(1.04) translate3d(-1%, 0, 0); } to { transform: scale(1.1) translate3d(1%, -1%, 0); } } @media (max-width: 1100px) { .ebenen .himmelbild { bottom: auto; height: min(1300px, 210vw); background-image: url("/bilder/milchstrasse-1400.webp"); background-position: 42% 50%; -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 12%, #000 60%, transparent 100%); mask-image: linear-gradient(180deg, transparent 0, #000 12%, #000 60%, transparent 100%); } } /* Messingfassung um das Live-Rad, ein Lichtschein wandert über das Metall */ .astrolab-rad .messing { position: absolute; inset: -5.35%; pointer-events: none; border-radius: 50%; background: url("/bilder/messingring.webp") center / contain no-repeat; filter: brightness(.86) saturate(.92) drop-shadow(0 0 22px rgba(226,196,134,.32)); } .astrolab-rad .messing::after { content: ""; position: absolute; inset: 0; border-radius: 50%; mix-blend-mode: screen; background: conic-gradient(from var(--kranz), transparent 0deg, transparent 290deg, rgba(255,244,214,.55) 325deg, rgba(255,255,255,.85) 335deg, transparent 352deg); -webkit-mask: radial-gradient(circle closest-side, transparent 79%, #000 80.5%, #000 96%, transparent 97.5%); mask: radial-gradient(circle closest-side, transparent 79%, #000 80.5%, #000 96%, transparent 97.5%); animation: kranz 9s linear infinite; } .ebenen > .wrap { max-width: 1340px; } .ebenen-buehne { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(300px, 380px) minmax(0, 1fr); grid-template-rows: repeat(3, auto); column-gap: clamp(30px, 3.4vw, 60px); row-gap: 22px; align-items: center; max-width: 1300px; margin: 0 auto; } .ebenen-buehne .pillars { display: contents; } .faeden { position: absolute; left: 0; top: 0; z-index: 0; pointer-events: none; overflow: visible; } .faden { fill: none; stroke-width: 1.1; opacity: .85; stroke-dasharray: 1; stroke-dashoffset: 0; transition: stroke-dashoffset 1.5s cubic-bezier(.6,.1,.2,1) calc(1.1s + var(--d)), stroke-width .35s ease, opacity .35s ease; } .ebenen-buehne.bereit:not(.an) .faden { stroke-dashoffset: 1; } .faden.hell { stroke-width: 2; opacity: 1; filter: drop-shadow(0 0 5px rgba(243,220,166,.9)); } .faden-puls { fill: none; stroke: #fff3d2; stroke-width: 2.4; stroke-linecap: round; stroke-dasharray: .05 1.2; stroke-dashoffset: .05; opacity: 0; } .ebenen-buehne.an .faden-puls { animation: fadenpuls 5s cubic-bezier(.5,0,.5,1) calc(3s + var(--d)) infinite; } @keyframes fadenpuls { 0% { stroke-dashoffset: .05; opacity: 0; } 8% { opacity: .95; } 55% { stroke-dashoffset: -1; opacity: .95; } 60%, 100% { stroke-dashoffset: -1; opacity: 0; } } .faden-knoten { fill: #f3dca6; opacity: .9; transition: opacity .5s ease calc(1.1s + var(--d)); } .ebenen-buehne.bereit:not(.an) .faden-knoten { opacity: 0; } .astrolab { grid-column: 2; grid-row: 1 / span 3; position: relative; z-index: 1; margin: 0; text-align: center; } .astrolab-rad { position: relative; width: 100%; aspect-ratio: 1; color: #e2c486; transition: filter .5s ease; } .astrolab-rad::before { content: ""; position: absolute; inset: 6%; border-radius: 50%; pointer-events: none; box-shadow: 0 0 80px 6px rgba(226,196,134,.16), 0 0 170px 50px rgba(110,80,200,.22); animation: atmen 7s ease-in-out infinite; } @keyframes atmen { 50% { box-shadow: 0 0 110px 14px rgba(226,196,134,.26), 0 0 190px 60px rgba(110,80,200,.28); } } .ebenen-buehne.fokus .astrolab-rad { filter: brightness(1.15); } .astrolab-rad > svg { position: relative; display: block; width: 100%; height: 100%; overflow: visible; } .al-kranz { transform-origin: 200px 200px; animation: drehen 240s linear infinite; } .al-skala { fill: none; } .al-zeichen text { font-family: var(--symbol); font-size: 17px; fill: #e2c486; text-anchor: middle; opacity: .92; transition: opacity .7s ease calc(.7s + var(--i) * .07s); } .al-zeiger { color: #f3dca6; } .al-p line { stroke: #f3dca6; stroke-width: 1.4; } .al-p text { font-family: var(--symbol); font-size: 17px; fill: #f6f1e8; text-anchor: middle; transform-box: fill-box; transform-origin: center; transform: scale(calc(1 + var(--hell, 0) * .35)); } .al-p.gross text { font-size: 21px; fill: #f3dca6; } .al-halo { fill: rgba(255,236,190,.28); opacity: var(--hell, 0); } .al-p { transition: opacity .7s ease calc(1.5s + var(--i) * .1s); } .al-mond-grund { fill: #17162f; } .al-mond-licht { fill: #f6ebcd; } .al-mond-rand { fill: none; stroke: rgba(243,220,166,.75); stroke-width: 1.1; } .ebenen-buehne.bereit:not(.an) .al-zeichen text, .ebenen-buehne.bereit:not(.an) .al-p { opacity: 0; } .ebenen-buehne.an .astrolab-rad { animation: astrolabauf 2s cubic-bezier(.2,.7,.2,1) backwards; } .ebenen-buehne.an .astrolab-text { animation: einblend 1.2s ease 1.4s backwards; } .ebenen-buehne.bereit:not(.an) .astrolab-rad, .ebenen-buehne.bereit:not(.an) .astrolab-text { opacity: 0; } @keyframes astrolabauf { from { opacity: 0; transform: scale(.82) rotate(-24deg); } } .astrolab-text { display: flex; flex-direction: column; align-items: center; gap: 8px; margin-top: 16px; } .al-kopf { font-family: var(--script); font-size: 30px; line-height: 1; color: #e2c486; text-shadow: 0 0 24px rgba(226,196,134,.35); } .al-zeile { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 4px 16px; font-size: 10.5px; letter-spacing: .2em; text-transform: uppercase; font-weight: 700; color: #d6cde6; } .al-zeile::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: #e2c486; box-shadow: 0 0 10px #e2c486; animation: livepunkt 2s ease-in-out infinite; } @keyframes livepunkt { 50% { opacity: .3; } } .al-zeile b { font-family: var(--symbol); font-weight: 400; letter-spacing: 0; color: #f3dca6; font-size: 13px; margin-right: 2px; } /* die sechs Ebenen links und rechts vom Astrolabium */ .ebenen .pillar { display: grid; grid-template-columns: 64px minmax(0, 1fr); grid-template-rows: auto auto; column-gap: 20px; align-items: center; text-align: left; padding: 22px 24px; position: relative; z-index: 1; background: linear-gradient(180deg, rgba(26,25,52,.72), rgba(16,15,34,.72)); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); } .ebenen .pillar svg { grid-column: 1; grid-row: 1 / span 2; width: 64px; height: 64px; padding: 13px; margin: 0; transition: transform .5s cubic-bezier(.2,.9,.3,1.5), box-shadow .5s ease, background .5s ease; } .ebenen .pillar h3 { grid-column: 2; align-self: end; font-size: 14.5px; margin: 0 0 6px; } .ebenen .pillar p { grid-column: 2; align-self: start; margin: 0; max-width: none; font-size: 14.5px; } .ebenen .pillar:hover svg { transform: scale(1.1) rotate(-6deg); box-shadow: 0 0 40px -6px rgba(226,196,134,.75); background: radial-gradient(circle, rgba(226,196,134,.3), transparent 72%); } .ebenen .pillar:hover { background: linear-gradient(180deg, rgba(38,36,74,.85), rgba(20,19,42,.85)); } .ebenen-buehne.an .pillar { animation: ebeneauf 1.1s cubic-bezier(.2,.7,.2,1) backwards; animation-delay: calc(.9s + var(--i, 0) * .14s); } .ebenen-buehne.bereit:not(.an) .pillar { opacity: 0; } @keyframes ebeneauf { from { opacity: 0; transform: translateX(var(--von, 0)) scale(.96); } } @media (min-width: 1101px) { .ebenen .pillar:nth-child(-n+3) { --von: 40px; grid-column: 1; grid-template-columns: minmax(0, 1fr) 64px; text-align: right; } .ebenen .pillar:nth-child(-n+3) svg { grid-column: 2; } .ebenen .pillar:nth-child(-n+3) h3, .ebenen .pillar:nth-child(-n+3) p { grid-column: 1; } .ebenen .pillar:nth-child(n+4) { --von: -40px; grid-column: 3; } .ebenen .pillar:nth-child(1), .ebenen .pillar:nth-child(4) { grid-row: 1; } .ebenen .pillar:nth-child(2), .ebenen .pillar:nth-child(5) { grid-row: 2; } .ebenen .pillar:nth-child(3), .ebenen .pillar:nth-child(6) { grid-row: 3; } /* leichter Bogen um das Rad */ .ebenen .pillar:nth-child(2) { margin-right: -26px; } .ebenen .pillar:nth-child(5) { margin-left: -26px; } .ebenen .pillar:nth-child(1), .ebenen .pillar:nth-child(3) { margin-right: 18px; } .ebenen .pillar:nth-child(4), .ebenen .pillar:nth-child(6) { margin-left: 18px; } } @media (max-width: 1100px) { .ebenen-buehne { display: block; } .faeden { display: none; } .astrolab { width: min(86vw, 400px); margin: 0 auto 40px; } .ebenen-buehne .pillars { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; max-width: 860px; margin: 0 auto; } .ebenen .pillar { --von: 0; } } @media (max-width: 620px) { .ebenen { padding: 76px 0 84px; } .ebenen-buehne .pillars { grid-template-columns: 1fr; gap: 12px; } .ebenen .pillar { grid-template-columns: 54px minmax(0, 1fr); column-gap: 16px; padding: 18px; } .ebenen .pillar svg { width: 54px; height: 54px; padding: 11px; } } .ebenen-pointe { text-align: center; margin: 64px auto 0; max-width: 32em; font-family: var(--serif); font-style: italic; font-size: clamp(20px, 2.3vw, 27px); line-height: 1.4; color: #efe8dc; } .ebenen-pointe .script { font-style: normal; font-size: 1.55em; color: #f3dca6; text-shadow: 0 0 26px rgba(226,196,134,.5); } .ebenen .midcta { margin-top: 30px; } @media (prefers-reduced-motion: reduce) { .ebenen .nebel, .ebenen .himmelbild, .al-kranz, .astrolab-rad::before, .astrolab-rad .messing::after, .al-zeile::before { animation: none; } } /* ============================================================ „Ein erster Blick“: Vorschau mit Lichtkranz, Karten fallen herein und steuern die Vorschau ============================================================ */ /* Vorschau etwas tiefer. Um den Kasten läuft ein Lichtband (Violett, Gold, Weiß): einmal scharf als Kante, einmal weich gezeichnet als Schein. Beides liegt hinter dem Kasten, der Rahmen hält den Stapel zusammen. */ #beispiel .mockup-rahmen { position: relative; isolation: isolate; margin-top: 46px; border-radius: 8px; } #beispiel .mockup-rahmen::before, #beispiel .mockup-rahmen::after { content: ""; position: absolute; z-index: 0; pointer-events: none; border-radius: 11px; background: conic-gradient(from var(--kranz), rgba(156,118,51,.55) 0deg, #8f72d4 40deg, #fff3d2 72deg, #c9a560 95deg, rgba(156,118,51,.55) 130deg, rgba(156,118,51,.55) 180deg, #b9924c 220deg, #fff6dc 252deg, #8f72d4 280deg, rgba(156,118,51,.55) 315deg, rgba(156,118,51,.55) 360deg); animation: kranz 6s linear infinite; } #beispiel .mockup-rahmen::before { inset: -3px; } #beispiel .mockup-rahmen::after { inset: -14px; filter: blur(22px); opacity: 1; } #beispiel .mockup { position: relative; z-index: 1; border: none; border-radius: 8px; padding: 30px 30px 26px; background: linear-gradient(180deg, #23224a, #17162f); box-shadow: 0 0 110px -20px rgba(226,196,134,.5), 0 50px 90px -40px rgba(30,20,60,.85); } @media (max-width: 900px) { #beispiel .mockup-rahmen { margin-top: 10px; } } #mcards { gap: 14px; grid-auto-rows: 1fr; } .mockup .zg { font-style: normal; font-family: var(--symbol); color: #e2c486; margin-right: 2px; } .mcard { position: relative; overflow: hidden; width: 100%; font: inherit; font-size: 15px; font-weight: 500; text-align: left; color: var(--ink); padding: 14px 16px; gap: 12px; font-size: 14.5px; line-height: 1.35; border-radius: 5px; border: 1px solid transparent; hyphens: auto; -webkit-hyphens: auto; cursor: default; background: linear-gradient(var(--white), var(--white)) padding-box, linear-gradient(135deg, rgba(201,165,96,.8), rgba(170,145,225,.65) 55%, rgba(201,165,96,.8)) border-box; box-shadow: 0 14px 30px -24px rgba(60,40,20,.55); transition: transform .5s cubic-bezier(.2,.9,.3,1.4), box-shadow .5s ease, color .3s ease; } .mcard::before { content: "✦"; flex: none; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; font-size: 11px; color: var(--gold); border: 1px solid var(--gold-line); background: radial-gradient(circle, rgba(201,165,96,.15), transparent 70%); transition: transform .7s cubic-bezier(.2,.9,.3,1.4), background .4s ease, color .4s ease, box-shadow .4s ease, border-color .4s ease; } .mcard::after { content: ""; position: absolute; top: -10%; bottom: -10%; left: -70%; width: 46%; pointer-events: none; background: linear-gradient(100deg, transparent, rgba(255,250,236,.85), transparent); transform: skewX(-18deg); opacity: 0; } .mcard:hover { transform: translateY(-7px) scale(1.045); z-index: 2; color: var(--plum); background: linear-gradient(135deg, #fffdf9, #f6efff) padding-box, linear-gradient(135deg, #c9a560, #8f72d4 52%, #e2c486) border-box; box-shadow: 0 24px 44px -20px rgba(111,87,168,.5), 0 0 0 4px rgba(201,165,96,.12), 0 0 36px -6px rgba(201,165,96,.5); } .mcard:hover::before { transform: rotate(180deg) scale(1.14); color: #fff; border-color: transparent; background: linear-gradient(135deg, #e6c88c, #b9924c); box-shadow: 0 0 18px rgba(201,165,96,.7); } .mcard:hover::after { animation: glanz 1s ease; } @keyframes glanz { from { left: -70%; opacity: 1; } to { left: 130%; opacity: 1; } } .mcard:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; } .cards.fall:not(.in) .mcard { opacity: 0; } .cards.fall.in .mcard { animation: kartenfall 1s cubic-bezier(.25,.8,.3,1) backwards; animation-delay: calc(.15s + var(--i) * .12s); } .cards.fall.in .mcard::before { animation: landung 1.2s ease backwards; animation-delay: calc(.6s + var(--i) * .12s); } .mcard:nth-child(even) { --r: 7deg; } @keyframes kartenfall { 0% { opacity: 0; transform: translateY(-110px) rotate(var(--r, -7deg)) scale(.94); } 55% { opacity: 1; transform: translateY(9px) rotate(calc(var(--r, -7deg) * -.2)); } 78% { transform: translateY(-3px) rotate(calc(var(--r, -7deg) * .06)); } 100% { opacity: 1; transform: none; } } @keyframes landung { 0% { box-shadow: 0 0 0 0 rgba(201,165,96,0); } 35% { box-shadow: 0 0 0 7px rgba(201,165,96,.22), 0 0 22px rgba(201,165,96,.7); } 100% { box-shadow: 0 0 0 14px rgba(201,165,96,0); } } @media (prefers-reduced-motion: reduce) { #beispiel .mockup-rahmen::before, #beispiel .mockup-rahmen::after { animation: none; } } /* ============================================================ Bericht: Deckblatt mit Sternbild und Siegeln, gleitende Reiterlinie, Diagramme bauen sich auf, Elemente, Zahlensiegel, Mond-Skala ============================================================ */ .step .sternfeld.fest { position: fixed; inset: 0; width: 100vw; height: 100vh; } .report { overflow: clip; } .report-head::before { animation: ritualraum 14s ease-out both; } .report-head > *:not(.cover-sternbild):not(.cover-gravur) { position: relative; z-index: 1; } .cover-gravur { position: absolute; z-index: 0; left: 50%; top: 50%; width: min(100%, 1200px); height: min(78vh, 720px); transform: translate(-50%, -52%) scale(1.06); background: center / contain no-repeat; opacity: 0; pointer-events: none; -webkit-mask-image: radial-gradient(closest-side, #000 50%, transparent); mask-image: radial-gradient(closest-side, #000 50%, transparent); transition: opacity 2.6s ease, transform 9s cubic-bezier(.2,.7,.2,1); } .cover-gravur.an { opacity: .3; transform: translate(-50%, -52%) scale(1); } .cover-sternbild { position: absolute; z-index: 0; left: 50%; top: 30px; width: min(96%, 900px); height: 470px; transform: translateX(-50%); pointer-events: none; opacity: .7; } .cover-sternbild .sb-l { opacity: .38; } .cover-sternbild .sb-h { fill: rgba(243,220,166,.09); } .report-name { animation: namenauf 2.2s cubic-bezier(.2,.7,.2,1) .3s backwards; } @keyframes namenauf { from { opacity: 0; filter: blur(10px); transform: scale(.92); } } .siegel-reihe { display: flex; flex-wrap: wrap; justify-content: center; gap: 22px 18px; max-width: 820px; margin: 34px auto 10px; } .siegel-reihe:empty { display: none; } .siegel { appearance: none; background: none; border: 0; padding: 0; margin: 0; cursor: pointer; width: 136px; color: inherit; font: inherit; display: flex; flex-direction: column; align-items: center; gap: 3px; animation: siegelauf 1s cubic-bezier(.2,.9,.3,1.3) backwards; animation-delay: calc(1s + var(--i) * .15s); } .siegel-k { position: relative; width: 88px; height: 88px; border-radius: 50%; display: grid; place-items: center; margin-bottom: 8px; background: radial-gradient(circle at 50% 38%, rgba(226,196,134,.24), rgba(16,11,33,.72) 72%); box-shadow: 0 0 34px -8px rgba(226,196,134,.6), inset 0 0 18px rgba(226,196,134,.16); transition: transform .45s cubic-bezier(.2,.9,.3,1.5), box-shadow .45s ease; } .siegel-k svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; } .siegel-k circle { fill: none; stroke: #e2c486; stroke-width: 1.2; } .siegel-k circle.s2 { stroke-width: .9; stroke-dasharray: 1.4 4.2; stroke-linecap: round; opacity: .75; transform-origin: 50px 50px; animation: drehen 36s linear infinite; } .siegel:nth-child(even) .siegel-k circle.s2 { animation-direction: reverse; } .siegel-g { position: relative; font-size: 36px; line-height: 1; color: #f3dca6; text-shadow: 0 0 18px rgba(226,196,134,.65); } .siegel-g.zeichen { font-family: var(--symbol); } .siegel-g.zahl { font-family: var(--serif); font-size: 44px; font-weight: 500; margin-top: -4px; } .siegel-g.profil { font-family: var(--serif); font-size: 27px; letter-spacing: .04em; } .siegel-l { font-size: 9.5px; letter-spacing: .28em; text-transform: uppercase; font-weight: 700; color: #e2c486; } .siegel-v { font-family: var(--serif); font-size: 17px; line-height: 1.18; color: #f6f1e8; text-align: center; hyphens: auto; -webkit-hyphens: auto; } .siegel:hover .siegel-k, .siegel:focus-visible .siegel-k { transform: translateY(-5px) scale(1.07); box-shadow: 0 0 50px -6px rgba(226,196,134,.85), inset 0 0 24px rgba(226,196,134,.28); } .siegel:focus-visible { outline: none; } @keyframes siegelauf { from { opacity: 0; transform: translateY(18px) scale(.8); } } @media (max-width: 760px) { .siegel { width: 104px; } .siegel-k { width: 72px; height: 72px; } .siegel-g { font-size: 29px; } .siegel-g.zahl { font-size: 36px; } .siegel-g.profil { font-size: 22px; } .siegel-v { font-size: 15px; } } /* Reiter: Glasleiste, eine Goldlinie gleitet unter den aktiven Reiter */ .rtabs-track { position: relative; } .rtab, .rtab.active, .rtab:hover { border-bottom-color: transparent; } .rtab-linie { position: absolute; left: 0; bottom: 0; height: 2px; width: 0; pointer-events: none; border-radius: 2px; background: linear-gradient(90deg, rgba(226,196,134,0), #f3dca6 22%, #e2c486 78%, rgba(226,196,134,0)); box-shadow: 0 0 14px rgba(226,196,134,.85); transition: transform .55s cubic-bezier(.2,.7,.2,1), width .55s cubic-bezier(.2,.7,.2,1); } @media (min-width: 901px) { .report > .rtabs { position: sticky; top: 0; z-index: 60; margin: 8px 0 32px; padding: 6px 36px; background: rgba(12,11,26,.9); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-top: 1px solid rgba(226,196,134,.14); border-bottom: 1px solid rgba(226,196,134,.14); } .rtabs-track { justify-content: center; } } @media (max-width: 900px) { .rtab-linie { bottom: 1px; } } /* Inhalte blenden beim Scrollen nacheinander ein */ .einblenden { opacity: 0; transform: translateY(16px); } .einblenden.auf { opacity: 1; transform: none; transition: opacity .8s ease calc(var(--k, 0) * .06s), transform .9s cubic-bezier(.2,.7,.2,1) calc(var(--k, 0) * .06s); } /* Natal-Rad und Bodygraph bauen sich auf */ @keyframes linieziehen { from { stroke-dasharray: 1; stroke-dashoffset: 1; } to { stroke-dasharray: 1; stroke-dashoffset: 0; } } @keyframes glimmauf { from { opacity: 0; } } @keyframes strichauf { from { opacity: 0; } to { opacity: .6; } } @keyframes planetauf { 0% { opacity: 0; transform: scale(.3); } 60% { opacity: 1; transform: scale(1.4); } 100% { opacity: 1; transform: none; } } .graphic .nw-z, .graphic .bg-l, .graphic .bg-k { animation: linieziehen 1.4s cubic-bezier(.6,.1,.2,1) both; animation-delay: var(--d, 0s); } .graphic text.nw-g { animation: glimmauf .8s ease both; animation-delay: var(--d, 0s); } .graphic line.nw-g { animation: strichauf .6s ease both; animation-delay: var(--d, 0s); } .graphic .nw-p { transform-box: fill-box; transform-origin: center; animation: planetauf .9s cubic-bezier(.2,.9,.3,1.3) both; animation-delay: var(--d, 0s); } .graphic .nw-kern { animation: glimmauf 1.8s ease .3s both; } .graphic .bg-z { transform-box: fill-box; transform-origin: center; animation: zentrumauf .8s cubic-bezier(.2,.9,.3,1.5) both; animation-delay: var(--d, 0s); } .graphic .bg-z.an { animation-name: zentrumzuenden; animation-duration: 1.2s; } .graphic .bg-t { animation: glimmauf .7s ease both; animation-delay: calc(var(--d, 0s) + .25s); } @keyframes zentrumauf { from { opacity: 0; transform: scale(.4); } } @keyframes zentrumzuenden { 0% { opacity: 0; transform: scale(.3); } 55% { opacity: 1; transform: scale(1.3); } 100% { opacity: 1; transform: none; } } .graphic.gwheel svg { filter: drop-shadow(0 0 30px rgba(120,90,200,.25)); } /* Planeten- und Zentrenkarten */ .pcard { border-radius: 4px; border-color: rgba(226,196,134,.18); background: rgba(255,255,255,.025); transition: border-color .3s ease, background .3s ease, box-shadow .3s ease; } .pcard:hover { border-color: rgba(226,196,134,.48); background: rgba(255,255,255,.045); } .pcard.open { border-color: rgba(226,196,134,.6); background: rgba(226,196,134,.05); box-shadow: 0 0 46px -24px rgba(226,196,134,.6); } .pcard .ph { padding: 11px 14px; } .pcard .pico { width: 42px; height: 42px; border-radius: 50%; font-family: var(--symbol); font-size: 19px; color: #f3dca6; border: 1px solid rgba(226,196,134,.45); background: radial-gradient(circle, rgba(226,196,134,.18), transparent 72%); box-shadow: 0 0 20px -6px rgba(226,196,134,.6); transition: transform .5s cubic-bezier(.2,.9,.3,1.5), box-shadow .4s ease; } .pcard:hover .pico, .pcard.open .pico { transform: rotate(-10deg) scale(1.08); box-shadow: 0 0 28px -4px rgba(226,196,134,.85); } .pcard .pv { font-size: 17px; } .pcard .pv .ps { font-family: var(--symbol); color: #f3dca6; } .kv { border-bottom-color: rgba(226,196,134,.14); } .kv .k { font-size: 11px; letter-spacing: .2em; text-transform: uppercase; font-weight: 700; color: #a69cbf; align-self: center; } .kv .v { font-size: 19px; color: #f6f1e8; } .graphic-flank { padding: 6px 0; } /* Elemente als alchemistische Zeichen mit Säulen */ .elemente { max-width: 680px; margin: 6px auto 34px; } .el-reihe { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; } .el { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 20px 10px 18px; border-radius: 4px; border: 1px solid rgba(226,196,134,.2); background: linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,.012)); transition: transform .45s cubic-bezier(.2,.9,.3,1.4), border-color .4s ease, box-shadow .4s ease; } .el:hover { transform: translateY(-5px); border-color: rgba(226,196,134,.5); } .el.stark { border-color: rgba(226,196,134,.62); box-shadow: 0 0 46px -16px rgba(226,196,134,.6); background: linear-gradient(180deg, rgba(226,196,134,.1), rgba(255,255,255,.015)); } .el-saeule { position: relative; width: 8px; height: 110px; border-radius: 6px; background: rgba(255,255,255,.07); overflow: hidden; margin-bottom: 16px; } .el-saeule span { position: absolute; left: 0; right: 0; bottom: 0; height: calc(var(--h) * 100%); border-radius: inherit; transform-origin: bottom; background: linear-gradient(0deg, #4e64b8, #e2c486 70%, #fff3d2); box-shadow: 0 0 14px rgba(226,196,134,.75); animation: saeule 1.4s cubic-bezier(.2,.7,.2,1) both; animation-delay: calc(.35s + var(--i) * .16s); } @keyframes saeule { from { transform: scaleY(0); } } .el svg { width: 36px; height: 36px; fill: none; stroke: #e2c486; stroke-width: 1.6; stroke-linejoin: round; stroke-linecap: round; } .el.stark svg { stroke: #f3dca6; filter: drop-shadow(0 0 7px rgba(226,196,134,.9)); } .el-n { font-family: var(--serif); font-size: 32px; line-height: 1; color: #f3dca6; margin-top: 10px; } .el-name { font-size: 10.5px; letter-spacing: .26em; text-transform: uppercase; font-weight: 700; color: #e2c486; margin-top: 6px; } .el-wort { font-size: 12.5px; line-height: 1.4; color: var(--ink-mute); margin-top: 5px; } @media (max-width: 560px) { .el-reihe { grid-template-columns: repeat(2, 1fr); } .el-saeule { height: 80px; } } /* Zahlensiegel um die Lebenszahl */ .num-siegel { position: relative; width: 220px; height: 220px; margin: 14px auto 10px; display: grid; place-items: center; } .num-siegel svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; } .ns-dreh { transform-origin: 100px 100px; animation: drehen 90s linear infinite; } .ns-punkte { fill: none; stroke: #e2c486; stroke-width: 1; stroke-dasharray: 1 5; stroke-linecap: round; opacity: .6; } .ns-ring { fill: none; stroke: rgba(226,196,134,.5); stroke-width: .8; } .ns-stern { fill: rgba(226,196,134,.035); stroke: rgba(226,196,134,.6); stroke-width: .8; animation: linieziehen 2.6s cubic-bezier(.6,.1,.2,1) .2s both; } .ns-dreh > circle:not([class]) { fill: #f3dca6; animation: glimmauf 1s ease 1.6s both; } .ns-innen { fill: rgba(16,11,33,.85); stroke: #e2c486; stroke-width: 1.2; } .num-siegel .num-big { position: relative; margin: 0; font-size: 66px; color: #f3dca6; text-shadow: 0 0 30px rgba(226,196,134,.7); font-variant-numeric: tabular-nums; } .numtile { border-radius: 4px; transition: transform .45s cubic-bezier(.2,.9,.3,1.5), border-color .4s ease, box-shadow .4s ease; } .numtile:hover { transform: translateY(-4px) scale(1.04); border-color: rgba(226,196,134,.5); } .numtile.on { border-color: rgba(226,196,134,.75); box-shadow: 0 0 34px -8px rgba(226,196,134,.7); } .numfact { border-radius: 4px; } .num-calc { border-radius: 2px; letter-spacing: .06em; } /* Intuitionstyp: Skizze im Medaillon, Ausprägung als Monde */ .intu > .intu-sketch svg { width: 176px; height: 176px; padding: 18px; border-radius: 50%; border: 1px solid rgba(226,196,134,.42); background: radial-gradient(circle, rgba(226,196,134,.14), transparent 72%); box-shadow: 0 0 60px -12px rgba(226,196,134,.5), inset 0 0 30px rgba(226,196,134,.08); animation: siegelauf 1.1s cubic-bezier(.2,.9,.3,1.3) both; } .intu-meter { gap: 11px; margin: 6px 0 12px; } .mdot { width: 17px; height: 17px; border-color: rgba(226,196,134,.45); background: radial-gradient(circle at 72% 40%, rgba(226,196,134,.2), transparent 62%); box-shadow: inset -5px 0 0 rgba(16,11,33,.55); } .mdot.on { background: radial-gradient(circle at 38% 34%, #fff6df, #e2c486 58%, #b9924c); border-color: #f3dca6; box-shadow: 0 0 16px -1px rgba(226,196,134,.85); animation: mondan .7s cubic-bezier(.2,.9,.3,1.5) both; } .mdot.on:nth-child(2) { animation-delay: .12s; } .mdot.on:nth-child(3) { animation-delay: .24s; } .mdot.on:nth-child(4) { animation-delay: .36s; } .mdot.on:nth-child(5) { animation-delay: .48s; } .mdot.on:nth-child(6) { animation-delay: .6s; } .mdot.on:nth-child(7) { animation-delay: .72s; } .mdot.on:nth-child(8) { animation-delay: .84s; } @keyframes mondan { from { opacity: 0; transform: scale(.3); } } .itype { border-radius: 4px; transition: transform .45s cubic-bezier(.2,.9,.3,1.4), border-color .4s ease, box-shadow .4s ease; } .itype:hover { transform: translateY(-5px); border-color: rgba(226,196,134,.5); box-shadow: 0 22px 44px -24px rgba(226,196,134,.5); } .itype.on { border: none; box-shadow: 0 0 0 1px rgba(226,196,134,.2), 0 0 50px -18px rgba(226,196,134,.65); } .itype.on::after { content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1.5px; pointer-events: none; background: conic-gradient(from var(--kranz), rgba(226,196,134,.25) 0deg, rgba(226,196,134,.25) 210deg, #c9a560 262deg, #fff3d2 292deg, #f3dca6 306deg, #c9a560 330deg, rgba(226,196,134,.25) 360deg); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask-composite: exclude; animation: kranz 7s linear infinite; } .itype-badge { border-radius: 2px; letter-spacing: .14em; background: linear-gradient(135deg, #e6c88c, #c9a560); color: #2a1f45; } .facet2 { border-radius: 4px; border-color: rgba(226,196,134,.18); border-left-color: #e2c486; } /* Übersicht: Startpunkte, Kurzwerte, Panels */ .ov-start { background: rgba(16,11,33,.45); border: 1px solid rgba(226,196,134,.28); border-left: 2px solid #e2c486; } .ov-start-b { transition: transform .35s cubic-bezier(.2,.9,.3,1.5), box-shadow .35s ease, background .35s ease; } .ov-start-b:hover { transform: translateY(-2px); box-shadow: 0 0 0 1px rgba(243,220,166,.8), 0 0 24px -4px rgba(226,196,134,.6); } .factrow .f { transition: transform .4s cubic-bezier(.2,.9,.3,1.5), border-color .4s ease; } .factrow .f:hover { transform: translateY(-3px); border-color: rgba(226,196,134,.6); } .panel.glowpanel, .panel.glowpanel-natal { border-radius: 4px; } .ov-fold { border-radius: 4px; } /* Deutung: Kapitelnummern als Goldmünzen, das Schlusswort als Brief */ .acc-h { align-items: center; padding: 18px 20px; } .acc-nr { width: 36px; height: 36px; margin-top: 0; border-radius: 50%; display: grid; place-items: center; font-size: 11px; letter-spacing: .04em; color: #f3dca6; border: 1px solid rgba(226,196,134,.45); background: radial-gradient(circle, rgba(226,196,134,.15), transparent 72%); transition: background .4s ease, color .4s ease, box-shadow .4s ease; } .acc:hover { border-color: rgba(226,196,134,.42); } .acc[open] .acc-nr { background: linear-gradient(135deg, #e6c88c, #c9a560); color: #2a1f45; border-color: transparent; box-shadow: 0 0 20px rgba(226,196,134,.65); } .dblock { border-radius: 4px; border-color: rgba(226,196,134,.22); background: rgba(255,255,255,.03); } .acc-tip { border-radius: 4px; } .acc-facts span, .story .blk .facts span { border-radius: 2px; border-color: rgba(226,196,134,.22); } .closing { position: relative; margin-top: 34px; padding: 50px 46px 42px; border: none; border-radius: 6px; font-size: 1.35rem; line-height: 1.65; color: #efe8dc; background: rgba(16,11,33,.55); box-shadow: 0 0 0 1px rgba(226,196,134,.14), 0 0 90px -26px rgba(226,196,134,.45); } .closing::before { content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1.5px; pointer-events: none; background: conic-gradient(from var(--kranz), rgba(226,196,134,.22) 0deg, rgba(226,196,134,.22) 210deg, #c9a560 262deg, #fff3d2 292deg, #f3dca6 306deg, #c9a560 330deg, rgba(226,196,134,.22) 360deg); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask-composite: exclude; animation: kranz 9s linear infinite; } .unterschrift { display: block; margin-top: 22px; font-family: var(--script); font-style: normal; font-size: 40px; line-height: 1; color: #f3dca6; text-shadow: 0 0 26px rgba(226,196,134,.45); } @media (max-width: 760px) { .closing { padding: 40px 22px 34px; font-size: 1.2rem; } } @media (prefers-reduced-motion: reduce) { .graphic *, .siegel, .siegel-k circle.s2, .report-name, .report-head::before, .el-saeule span, .ns-dreh, .ns-stern, .ns-dreh > circle, .mdot.on, .intu > .intu-sketch svg, .itype.on::after, .closing::before, .sternbild *, .cards.fall.in .mcard, .cards.fall.in .mcard::before { animation: none !important; } .sternbild * { transition: none !important; } .einblenden { opacity: 1; transform: none; } } /* ============================================================ Vorschau nach dem Klick-Moment: Blick durch die geöffnete Kuppel, Name groß in Gold, fünf Siegel, Vorschau und E-Mail-Karte aus Glas ============================================================ */ #step2 .g-wrap { max-width: 1180px; } #step2 .glimpse { max-width: none; } .g-buehne { position: relative; isolation: isolate; margin: -60px 0 54px; padding: 120px 0 70px; text-align: center; } .g-bild { position: absolute; z-index: -1; top: 0; bottom: 0; left: 50%; width: 100vw; transform: translateX(-50%); overflow: hidden; pointer-events: none; -webkit-mask-image: linear-gradient(180deg, #000 72%, transparent 100%); mask-image: linear-gradient(180deg, #000 72%, transparent 100%); } .g-bild::before { content: ""; position: absolute; inset: -40px; background: url("/bilder/kuppel-2400.webp") 50% 22% / cover no-repeat; filter: brightness(.72) saturate(1.05); } .glimpse.show .g-bild::before { animation: kuppelauf 14s cubic-bezier(.2,.7,.2,1) both; } @keyframes kuppelauf { from { transform: scale(1.18) translateY(30px); filter: brightness(.2) saturate(.8); } 30% { filter: brightness(.72) saturate(1.05); } to { transform: none; } } .g-bild::after { content: ""; position: absolute; inset: 0; background: radial-gradient(46% 62% at 50% 44%, rgba(14,10,30,.62), rgba(14,10,30,.2) 70%, transparent), linear-gradient(180deg, rgba(14,10,30,.35), transparent 30%); } .g-greeting { position: relative; isolation: isolate; max-width: 880px; margin: 0 auto; } .greet-sternbild { position: absolute; z-index: -1; left: 50%; top: -40px; width: min(98vw, 900px); height: 420px; transform: translateX(-50%); pointer-events: none; opacity: .6; } .greet-sternbild .sb-l { opacity: .4; } .g-greeting .spark { display: block; font-size: 24px; color: #f3dca6; text-shadow: 0 0 22px rgba(226,196,134,.8); animation: einblend 1s ease .2s backwards; } .g-greeting h2 { font-size: clamp(26px, 3.4vw, 40px); letter-spacing: .14em; text-transform: uppercase; font-weight: 500; line-height: 1.25; color: #f6f1e8; margin: 14px 0 6px; text-shadow: 0 2px 30px rgba(10,7,22,.8); } #g-hello-name { display: block; text-transform: none; letter-spacing: 0; font-size: 2.6em; line-height: 1.05; margin-top: 10px; color: #f3dca6; text-shadow: 0 0 40px rgba(226,196,134,.6), 0 0 90px rgba(226,196,134,.25); } #g-hello-name:empty { display: none; } .glimpse.show #g-hello-name { animation: namenauf 2.4s cubic-bezier(.2,.7,.2,1) .5s backwards; } .g-greeting .g-lead { max-width: 62ch; margin: 18px auto 0; font-size: 17px; line-height: 1.75; color: #e6def0; text-shadow: 0 1px 18px rgba(10,7,22,.9); } .g-greeting .g-lead b { color: #f3dca6; } .g-siegel { margin-top: 40px; } .glimpse.show .g-siegel .siegel { animation-delay: calc(1.4s + var(--i) * .16s); } .glimpse-cols { gap: 40px; align-items: start; } .glimpse-cols .preview-wrap { border: none; border-radius: 8px; padding: 30px 30px 0; background: rgba(16,11,33,.62); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); box-shadow: 0 0 0 1px rgba(226,196,134,.24), 0 0 90px -34px rgba(70,92,200,.55), 0 40px 80px -40px rgba(0,0,0,.85); } .preview-label { color: #e2c486; } .preview-body .pv-hint { color: #d6cde6; font-weight: 500; } .preview-seal .seal-text { font-size: 19px; color: #f6f1e8; } .preview-seal .seal-sub { color: #c4bad8; font-size: 13.5px; line-height: 1.6; max-width: 46ch; margin: 6px auto 0; } /* E-Mail-Karte: Lichtband wie beim Beispiel, nur kräftiger, denn hier geht es weiter */ .mail-rahmen { position: relative; isolation: isolate; display: flex; border-radius: 8px; } .mail-rahmen::before, .mail-rahmen::after { content: ""; position: absolute; z-index: 0; pointer-events: none; border-radius: 10px; background: conic-gradient(from var(--kranz), rgba(226,196,134,.36) 0deg, rgba(226,196,134,.36) 130deg, #6d84d6 200deg, #e2c486 250deg, #fff6dc 280deg, #f3dca6 300deg, #c9a560 325deg, rgba(226,196,134,.36) 360deg); animation: kranz 5.5s linear infinite; } .mail-rahmen::before { inset: -2px; } .mail-rahmen::after { inset: -10px; filter: blur(24px); opacity: .95; } .glimpse-cols .mail-rahmen .mailcard { position: relative; z-index: 1; flex: 1; margin: 0; border-radius: 8px; background: linear-gradient(180deg, #1c1b38, #100f24); box-shadow: 0 40px 80px -40px rgba(0,0,0,.85); } .mail-rahmen .mailcard::before { inset: 0; padding: 0; -webkit-mask: none; mask: none; animation: none; background: radial-gradient(circle at 50% -10%, rgba(243,220,166,.2), transparent 60%); } .mail-rahmen .mailcard h3 { font-size: 32px; color: #f6f1e8; } .mail-rahmen .mailcard .mail-sub { color: #f3dca6; } .mail-rahmen .mail-perks span { color: #e2c486; } @media (max-width: 780px) { .g-buehne { padding: 90px 0 50px; margin-bottom: 30px; } .g-bild::before { background-image: url("/bilder/kuppel-hoch.webp"); background-position: 50% 30%; } #g-hello-name { font-size: 2.2em; } .g-greeting .g-lead { font-size: 16px; } .glimpse-cols .mail-rahmen { max-width: 560px; margin: 26px auto 0; width: 100%; } } @media (max-width: 1100px) and (min-width: 781px) { .g-bild::before { background-image: url("/bilder/kuppel-1400.webp"); } } @media (prefers-reduced-motion: reduce) { .glimpse.show .g-bild::before, .glimpse.show #g-hello-name, .preview-seal .lock, .mail-rahmen::before, .mail-rahmen::after { animation: none; } } /* ============================================================ Bericht über die ganze Breite: Deckblatt als großer Auftakt, Reiterleiste über die volle Breite, Grafik links und Inhalt rechts ============================================================ */ #step3 > .bericht-wrap { max-width: none; padding: 0 !important; } #step3 .bericht-leiste { position: absolute; z-index: 6; top: 0; left: 0; right: 0; margin: 0 !important; justify-content: flex-end !important; align-items: center; padding: 24px max(4vw, calc(50% - 680px)); } #step3 .bericht-leiste .brand { margin-right: auto; flex-direction: column; align-items: flex-start; gap: 0; text-decoration: none; line-height: 1; } #step3 .bericht-leiste .brand .b-script { font-size: 30px; color: #f6f1e8; line-height: .9; } #step3 .bericht-leiste .brand .b-serif { font-size: 11px; letter-spacing: .42em; text-transform: uppercase; color: #e2c486; margin: 2px 0 0 26px; text-shadow: none; } #step3 .bericht-leiste .btn { padding: 13px 20px; font-size: 11px; } #step3 .report { max-width: none; border: none; border-radius: 0; background: transparent; box-shadow: none; padding: 0 0 70px; } #step3 .report-head { min-height: min(100svh, 1000px); display: flex; flex-direction: column; justify-content: center; align-items: center; padding: 150px 5vw 90px; margin: 0; } #step3 .report-head::before { -webkit-mask-image: linear-gradient(180deg, #000 70%, transparent); mask-image: linear-gradient(180deg, #000 70%, transparent); filter: brightness(.6) saturate(.95); } #step3 .report-head::after { background: radial-gradient(52% 60% at 52% 46%, rgba(14,10,30,.55), rgba(14,10,30,.12) 72%, transparent), linear-gradient(180deg, rgba(14,10,30,.4), transparent 22%); } #step3 .report-name { font-size: clamp(70px, 11vw, 150px); } #step3 .report-title { font-size: clamp(24px, 3vw, 40px); } #step3 .cover-sternbild { top: 50%; width: min(96%, 1100px); height: min(70vh, 620px); transform: translate(-50%, -54%); } #step3 .report > *:not(.report-head):not(.rtabs) { max-width: 1240px; margin-left: auto; margin-right: auto; padding-left: 32px; padding-right: 32px; box-sizing: border-box; } #step3 .report > .rpane { max-width: 1240px; } #step3 #pane-de, #step3 #pane-ov { max-width: 1000px !important; } @media (min-width: 901px) { #step3 .report > .rtabs { margin: 0 0 44px; padding: 6px max(32px, calc(50% - 620px)); border-radius: 0; } } @media (max-width: 900px) { #step3 .bericht-leiste { position: relative; padding: 18px 16px 6px; justify-content: center !important; } #step3 .bericht-leiste .brand { width: 100%; align-items: center; margin: 0 0 10px; } #step3 .bericht-leiste .brand .b-serif { margin-left: 0; } #step3 .report-head { min-height: 0; padding: 70px 18px 50px; } #step3 .report > *:not(.report-head):not(.rtabs) { padding-left: 16px; padding-right: 16px; } #step3 .report > .rtabs { margin-left: 10px; margin-right: 10px; } } /* zwei Spalten: links die Grafik (bleibt beim Lesen stehen), rechts der Inhalt */ .spalten { display: block; } @media (min-width: 1101px) { .spalten { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr); gap: 64px; align-items: start; } .sp-links { position: sticky; top: 96px; } #pane-na .sp-links .graphic.gwheel svg { max-width: 560px; } #pane-hd .sp-links .graphic.gbody svg { max-width: 360px; } .intu.gespalten { max-width: none; text-align: left; } .intu.gespalten .sp-links { text-align: center; padding-top: 10px; } .intu.gespalten .sp-rechts .cap2 { text-align: left; } .intu.gespalten .sp-rechts .intu-meter { justify-content: flex-start; } .intu.gespalten .sp-rechts .intu-level, .intu.gespalten .sp-rechts .intu-sum, .intu.gespalten .sp-rechts .intu-caveat, .intu.gespalten .sp-rechts .numfact, .intu.gespalten .sp-rechts .intu-note { text-align: left; margin-left: 0; } .intu.gespalten .sp-links .intu-script { font-size: clamp(54px, 5.4vw, 84px); } .intu.gespalten .sp-links .num-siegel { width: 300px; height: 300px; } .intu.gespalten .sp-links .num-siegel .num-big { font-size: 96px; } #pane-in .intu.gespalten .sp-links .intu-sketch svg { width: 240px; height: 240px; } } /* Lebenszahl genau in der Mitte: Versalziffern statt Mediävalziffern */ .num-siegel .num-big { font-feature-settings: "lnum" 1, "tnum" 1; font-variant-numeric: lining-nums tabular-nums; line-height: 1; margin: 0; } /* ── Aufklappen mit Wirkung ── */ .pcard, .acc, .ov-fold, .itype { position: relative; } .pcard .ph, .acc-h { transition: background .3s ease; } .pcard:not(.open):hover { transform: translateY(-2px); box-shadow: 0 16px 40px -24px rgba(226,196,134,.55); } .pcard { transition: border-color .3s ease, background .3s ease, box-shadow .3s ease, transform .35s cubic-bezier(.2,.9,.3,1.4); } .pcard.open::before, .acc[open]::before { content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1.5px; pointer-events: none; z-index: 3; background: conic-gradient(from var(--kranz), rgba(226,196,134,.25) 0deg, rgba(226,196,134,.25) 200deg, #6d84d6 240deg, #f3dca6 285deg, #fff6dc 300deg, #c9a560 325deg, rgba(226,196,134,.25) 360deg); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask-composite: exclude; animation: kranz 6s linear infinite; } .bam { animation: kartebam 1s cubic-bezier(.2,.9,.3,1.3); } @keyframes kartebam { 0% { transform: scale(.985); } 35% { transform: translateY(-5px) scale(1.012); box-shadow: 0 0 0 1px rgba(243,220,166,.9), 0 0 90px -4px rgba(226,196,134,.8), 0 30px 60px -30px rgba(0,0,0,.8); } 100% { transform: none; } } .bam::after { content: ""; position: absolute; top: 0; bottom: 0; left: -45%; width: 40%; pointer-events: none; z-index: 4; background: linear-gradient(100deg, transparent, rgba(255,246,222,.32), transparent); transform: skewX(-18deg); animation: kartenglanz 1.1s ease forwards; } @keyframes kartenglanz { to { left: 130%; } } .bam .pico, .bam .acc-nr { animation: medaille 1.1s cubic-bezier(.2,.9,.3,1.1); } @keyframes medaille { 0% { transform: perspective(300px) rotateY(0) scale(1); } 50% { transform: perspective(300px) rotateY(180deg) scale(1.3); box-shadow: 0 0 46px 8px rgba(243,220,166,.85); } 100% { transform: perspective(300px) rotateY(360deg) scale(1.08); } } .pcard.open .pin > *, .acc[open] .acc-b > *, .ov-fold[open] .ov-fold-b > * { animation: zeileauf .7s cubic-bezier(.2,.7,.2,1) backwards; } .pcard.open .pin > :nth-child(2), .acc[open] .acc-b > :nth-child(2), .ov-fold[open] .ov-fold-b > :nth-child(2) { animation-delay: .08s; } .pcard.open .pin > :nth-child(3), .acc[open] .acc-b > :nth-child(3), .ov-fold[open] .ov-fold-b > :nth-child(3) { animation-delay: .16s; } .pcard.open .pin > :nth-child(4), .acc[open] .acc-b > :nth-child(4), .ov-fold[open] .ov-fold-b > :nth-child(4) { animation-delay: .24s; } .pcard.open .pin > :nth-child(n+5), .acc[open] .acc-b > :nth-child(n+5), .ov-fold[open] .ov-fold-b > :nth-child(n+5) { animation-delay: .32s; } @keyframes zeileauf { from { opacity: 0; transform: translateY(12px); } } .pcard .pin { position: relative; } .pcard .pin > :not(.pc-himmel) { position: relative; z-index: 1; } /* Gravur und Sternbild des Zeichens im geöffneten Planetenkärtchen */ .pc-himmel { position: absolute; z-index: 0 !important; right: 0; top: -54px; bottom: 0; width: min(46%, 320px); pointer-events: none; animation: none !important; } .pc-gravur { position: absolute; inset: 0; background: center / contain no-repeat; opacity: 0; -webkit-mask-image: radial-gradient(closest-side, #000 55%, transparent); mask-image: radial-gradient(closest-side, #000 55%, transparent); transition: opacity 1.4s ease .2s; } .pcard.open .pc-gravur { opacity: .32; } .pcard.open .pin.mit-himmel .pc-gravur { opacity: .62; } .pc-linien { position: absolute; inset: 8% 6%; opacity: .9; } .pc-linien .sb-l { opacity: .65; stroke-width: 1.1; } .pcard.open .pbody { max-height: 1200px; } @media (max-width: 760px) { .pc-himmel { width: 60%; opacity: .7; } } @media (prefers-reduced-motion: reduce) { .pcard.open::before, .acc[open]::before { animation: none; } .bam, .bam::after, .bam .pico, .bam .acc-nr, .pcard.open .pin > *, .acc[open] .acc-b > *, .ov-fold[open] .ov-fold-b > * { animation: none !important; } } /* Gravur im Planetenkärtchen bekommt eine eigene Spalte, der Text bleibt frei lesbar */ .pcard .pin.mit-himmel { padding-right: min(36%, 250px); min-height: 190px; } .pcard .pin.mit-himmel .pc-himmel { top: 0; width: min(34%, 240px); right: 6px; } @media (max-width: 760px) { .pcard .pin.mit-himmel { padding-right: 15px; padding-top: 150px; } .pcard .pin.mit-himmel .pc-himmel { left: 0; right: 0; margin: 0 auto; width: 220px; height: 150px; bottom: auto; } } /* Zahlen in den Siegeln und im Zahlensiegel: gerade Ziffern, damit sie wirklich mittig sitzen */ .num-siegel .num-big, .siegel-g.zahl, .siegel-g.profil { font-family: "Bodoni 72", Didot, "Bodoni MT", "Times New Roman", serif; font-weight: 400; } .num-siegel .num-big { transform: translateY(2%); } .siegel-g.zahl { font-size: 40px; margin-top: 0; } .siegel-g.profil { font-size: 25px; letter-spacing: .02em; } /* ============================================================ Hauptseite: weitere astrologische Akzente ============================================================ */ /* Planeten-Medaillons in den vier Karten */ .pain .dot.planet { width: 48px; height: 48px; font-family: var(--symbol); font-size: 22px; color: var(--gold); border: 1px solid rgba(156,118,51,.45); background: radial-gradient(circle at 50% 38%, rgba(201,165,96,.2), rgba(255,253,249,0) 72%); box-shadow: 0 0 0 5px rgba(201,165,96,.06), 0 10px 24px -14px rgba(156,118,51,.7); transition: transform .7s cubic-bezier(.2,.9,.3,1.4), box-shadow .5s ease, background .5s ease, color .5s ease; } .pain:hover .dot.planet { transform: rotate(360deg) scale(1.08); color: #fff; background: linear-gradient(135deg, #e6c88c, #b9924c); box-shadow: 0 0 0 6px rgba(201,165,96,.14), 0 0 26px rgba(201,165,96,.6); } /* Tierkreisband: zwölf Zeichen zwischen zwei Goldlinien, eine Lichtwelle läuft hindurch */ .tierkreisband { display: flex; align-items: center; justify-content: center; gap: clamp(8px, 1.4vw, 16px); margin: 0 auto 22px; max-width: 680px; color: var(--gold); } .tierkreisband i { flex: 1; height: 1px; background: linear-gradient(90deg, transparent, var(--gold-line)); } .tierkreisband i:last-child { background: linear-gradient(90deg, var(--gold-line), transparent); } .tierkreisband span { font-family: var(--symbol); font-size: clamp(13px, 1.5vw, 17px); opacity: .5; animation: zeichenwelle 6s ease-in-out infinite; animation-delay: calc(var(--i) * .22s); } @keyframes zeichenwelle { 0%, 70%, 100% { opacity: .45; transform: none; text-shadow: none; } 12% { opacity: 1; transform: translateY(-2px); text-shadow: 0 0 12px rgba(201,165,96,.9); } } @media (max-width: 620px) { .tierkreisband { gap: 6px; } .tierkreisband i { min-width: 12px; } } /* Brücke: großes Tierkreisrad als Wasserzeichen hinter dem Statement, dreht sich sehr langsam */ .brueckenband { position: relative; overflow: hidden; isolation: isolate; } .wasserrad { position: absolute; z-index: -1; left: 50%; top: 50%; width: min(1100px, 130vw); aspect-ratio: 1; transform: translate(-50%, -50%); pointer-events: none; opacity: .14; color: var(--gold); } .wasserrad svg { width: 100%; height: 100%; } .wasserrad .wr-dreh { transform-origin: 200px 200px; animation: drehen 300s linear infinite; } .wasserrad circle, .wasserrad line { fill: none; stroke: currentColor; stroke-width: .8; } .wasserrad .fein { stroke-width: .5; } .wasserrad text { font-family: var(--symbol); font-size: 15px; fill: currentColor; text-anchor: middle; } /* Fragen: der Mond füllt sich beim Öffnen von der Sichel zum Vollmond */ .faq-q::after { content: ""; flex: none; width: 22px; height: 22px; border-radius: 50%; background: var(--gold); border: 1px solid var(--gold-line); box-shadow: inset 8px 0 0 0 var(--paper-2), 0 0 0 0 rgba(201,165,96,0); transform: rotate(-20deg); transition: box-shadow .9s cubic-bezier(.2,.7,.2,1), transform .9s cubic-bezier(.2,.7,.2,1); } #fragen .faq-q::after { box-shadow: inset 8px 0 0 0 var(--paper), 0 0 0 0 rgba(201,165,96,0); } .faq-item[open] .faq-q::after, #fragen .faq-item[open] .faq-q::after { transform: rotate(0); box-shadow: inset 0 0 0 0 var(--paper), 0 0 18px 2px rgba(201,165,96,.55); } #fragen .faq-item:not([open]) .faq-q:hover::after { box-shadow: inset 4px 0 0 0 var(--paper), 0 0 12px rgba(201,165,96,.35); } /* Abschluss: Blick durch die geöffnete Kuppel */ .final-band { overflow: hidden; } .final-bild { position: absolute; inset: 0; z-index: -2; pointer-events: none; background: url("/bilder/kuppel-2400.webp") 50% 30% / cover no-repeat; opacity: .55; -webkit-mask-image: linear-gradient(180deg, transparent, #000 25%, #000 80%, transparent); mask-image: linear-gradient(180deg, transparent, #000 25%, #000 80%, transparent); } @media (max-width: 900px) { .final-bild { background-image: url("/bilder/kuppel-hoch.webp"); } } @media (prefers-reduced-motion: reduce) { .tierkreisband span, .wasserrad .wr-dreh { animation: none; } } /* ============================================================ Übersicht: „Dein Bauplan auf einen Blick“ als Kartenlegung. Sechs Karten liegen verdeckt und drehen sich nacheinander um. ============================================================ */ #step3 #pane-ov { max-width: 1160px !important; } #pane-ov > .factrow { display: none; } .legung { margin: 4px 0 56px; } .legung-kopf { text-align: center; margin-bottom: 30px; } .legung-kopf .script-eyebrow { font-size: clamp(34px, 4vw, 48px); line-height: 1.1; } .legung-sub { margin: 10px auto 0; max-width: 46ch; color: #c4bad8; font-size: 15px; line-height: 1.6; } .legung-reihe { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 30px 28px; perspective: 1600px; } .tkarte { appearance: none; border: 0; padding: 0; margin: 0; background: none; font: inherit; color: inherit; cursor: pointer; text-align: center; position: relative; aspect-ratio: 3 / 4.25; transform-style: preserve-3d; transform: translateY(var(--hoch, 0)) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transition: transform .5s cubic-bezier(.2,.7,.2,1); } .tkarte:hover { --hoch: -10px; } .tk-dreh { position: absolute; inset: 0; transform-style: preserve-3d; transform: rotateY(180deg); transition: transform 1.3s cubic-bezier(.3,1.25,.45,1) calc(.2s + var(--i) * .24s); } .legung.an .tk-dreh { transform: none; } .tk-seite { position: absolute; inset: 0; border-radius: 12px; overflow: hidden; -webkit-backface-visibility: hidden; backface-visibility: hidden; } .tk-rueck { transform: rotateY(180deg); background: #0e0d20 url("/bilder/kartenrueckseite.webp") center / cover no-repeat; box-shadow: 0 0 0 1px rgba(226,196,134,.55), inset 0 0 0 7px #0e0d20, inset 0 0 0 8px rgba(226,196,134,.45), 0 30px 60px -30px rgba(0,0,0,.9); } .tk-vorn { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; padding: 22px 20px 22px; background: radial-gradient(90% 60% at 50% 30%, #22213f, #100f24 70%); box-shadow: 0 0 0 1px rgba(226,196,134,.6), inset 0 0 0 7px #100f24, inset 0 0 0 8px rgba(226,196,134,.4), 0 34px 70px -30px rgba(0,0,0,.95), 0 0 70px -24px rgba(226,196,134,.45); transition: box-shadow .5s ease; } .tk-vorn::after { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity .4s ease; background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 30%), rgba(255,244,214,.16), transparent 45%); } .tkarte:hover .tk-vorn { box-shadow: 0 0 0 1px rgba(243,220,166,.95), inset 0 0 0 7px #100f24, inset 0 0 0 8px rgba(243,220,166,.7), 0 40px 80px -30px rgba(0,0,0,.95), 0 0 90px -16px rgba(226,196,134,.75); } .tkarte:hover .tk-vorn::after { opacity: 1; } .tk-bild { position: absolute; left: 0; right: 0; top: 4%; height: 56%; background: center / contain no-repeat; opacity: .96; filter: drop-shadow(0 0 14px rgba(226,196,134,.25)); -webkit-mask-image: radial-gradient(closest-side, #000 62%, transparent); mask-image: radial-gradient(closest-side, #000 62%, transparent); transition: transform .8s cubic-bezier(.2,.7,.2,1); } .tkarte:hover .tk-bild { transform: scale(1.06); } .tk-zahlsiegel { position: absolute; left: 50%; top: 9%; width: 46%; aspect-ratio: 1; transform: translateX(-50%); border-radius: 50%; display: grid; place-items: center; background: radial-gradient(circle, rgba(226,196,134,.16), rgba(16,11,33,.2) 70%); box-shadow: 0 0 0 1px rgba(226,196,134,.7), 0 0 0 9px rgba(226,196,134,.07), 0 0 0 10px rgba(226,196,134,.35), 0 0 60px -6px rgba(226,196,134,.55); } .tk-zahlsiegel::before { content: ""; position: absolute; inset: -18%; border-radius: 50%; border: 1px dashed rgba(226,196,134,.45); animation: drehen 40s linear infinite; } .tk-zahlsiegel span { font-family: "Bodoni 72", Didot, "Bodoni MT", "Times New Roman", serif; font-size: clamp(56px, 6vw, 84px); line-height: 1; color: #f3dca6; text-shadow: 0 0 30px rgba(226,196,134,.75); } .tk-titel { position: relative; font-size: 10px; letter-spacing: .3em; text-transform: uppercase; font-weight: 700; color: #e2c486; } .tk-wert { position: relative; margin-top: 6px; font-family: var(--serif); font-size: clamp(22px, 2.2vw, 30px); line-height: 1.12; color: #f6f1e8; } .tk-wert.schrift { font-family: var(--script); font-size: clamp(30px, 3vw, 42px); color: #f3dca6; } .tk-g { font-style: normal; font-family: var(--symbol); color: #e2c486; font-size: .85em; } .tk-zeile { position: relative; margin-top: 6px; font-size: 10.5px; letter-spacing: .18em; text-transform: uppercase; color: #a69cbf; } .tk-text { position: relative; margin-top: 10px; font-family: var(--serif); font-style: italic; font-size: 16px; line-height: 1.4; color: #d6cde6; max-width: 22ch; } .tk-mehr { position: relative; margin-top: 14px; font-size: 10px; letter-spacing: .26em; text-transform: uppercase; font-weight: 700; color: #e2c486; opacity: .75; transition: opacity .3s, letter-spacing .4s; } .tkarte:hover .tk-mehr { opacity: 1; letter-spacing: .32em; } .legung.an .tkarte .tk-vorn { animation: kartenlicht 1.6s ease backwards; animation-delay: calc(.9s + var(--i) * .24s); } @keyframes kartenlicht { 0% { box-shadow: 0 0 0 1px rgba(255,246,222,1), inset 0 0 0 7px #100f24, inset 0 0 0 8px rgba(255,246,222,.9), 0 0 120px 10px rgba(243,220,166,.75); } } @media (max-width: 900px) { .legung-reihe { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: min(74vw, 300px); overflow-x: auto; scroll-snap-type: x mandatory; padding: 6px 18px 18px; margin: 0 -16px; scrollbar-width: none; } .legung-reihe::-webkit-scrollbar { display: none; } .tkarte { scroll-snap-align: center; } } @media (prefers-reduced-motion: reduce) { .tk-dreh { transition: none; } .tk-zahlsiegel::before, .legung.an .tkarte .tk-vorn { animation: none; } } /* Übersicht: das Vorwort als Brief mit großer Initiale */ #pane-ov .ov-intro { text-align: left; max-width: 64ch; font-size: 19px; line-height: 1.75; } #pane-ov .ov-intro::first-letter { float: left; font-family: var(--script); font-style: normal; font-size: 4.2em; line-height: .78; color: #f3dca6; margin: 8px 12px 0 0; text-shadow: 0 0 24px rgba(226,196,134,.5); } /* Deutung: Kapitelbild erscheint beim Aufklappen aus dem Licht */ .kap-bild { height: clamp(150px, 21vw, 250px); margin: -2px -18px 14px; background: center / cover no-repeat; opacity: 0; -webkit-mask-image: radial-gradient(62% 80% at 50% 50%, #000 45%, transparent 100%); mask-image: radial-gradient(62% 80% at 50% 50%, #000 45%, transparent 100%); } .acc[open] .acc-b > .kap-bild { animation: kapauf 1.8s cubic-bezier(.2,.7,.2,1) forwards; } @keyframes kapauf { 0% { opacity: 0; transform: scale(1.18); filter: brightness(2.4) blur(8px); } 35% { opacity: 1; } 100% { opacity: 1; transform: none; filter: none; } } @media (prefers-reduced-motion: reduce) { .acc[open] .acc-b > .kap-bild { animation: none; opacity: 1; } } /* Element-Gravuren: Intuitionstyp, die vier Typen, die Elemente im Natalchart */ .intu-sketch, .itype-sk { position: relative; } .el-gravur { position: absolute; inset: 0; z-index: 1; border-radius: 50%; background: center / 118% no-repeat; pointer-events: none; -webkit-mask-image: radial-gradient(closest-side, #000 70%, transparent); mask-image: radial-gradient(closest-side, #000 70%, transparent); } .intu > .intu-sketch .el-gravur, .intu .sp-links .intu-sketch .el-gravur { left: 50%; width: 176px; transform: translateX(-50%); } .intu-sketch:has(.el-gravur) svg path, .intu-sketch:has(.el-gravur) svg circle, .itype-sk:has(.el-gravur) svg > * { opacity: 0; } .itype-sk .el-gravur { left: 50%; width: 66px; transform: translateX(-50%); } @media (min-width: 1101px) { #pane-in .intu.gespalten .sp-links .intu-sketch .el-gravur { width: 240px; } } .el .el-gravur { inset: auto 0 0 0; height: 70%; border-radius: 0; opacity: .22; background-size: contain; background-position: 50% 80%; -webkit-mask-image: linear-gradient(0deg, #000 30%, transparent); mask-image: linear-gradient(0deg, #000 30%, transparent); z-index: 0; } .el > :not(.el-gravur) { position: relative; z-index: 1; } .el.stark .el-gravur { opacity: .38; } /* „Hier anfangen“ als drei Bildkacheln */ #pane-ov .ov-start { max-width: 1000px; padding: 26px 26px 24px; border-radius: 8px; border: none; text-align: center; background: rgba(16,11,33,.5); box-shadow: 0 0 0 1px rgba(226,196,134,.22), 0 0 80px -30px rgba(226,196,134,.4); } #pane-ov .ov-start-h { font-size: 1.6rem; font-weight: 500; color: #f3dca6; } #pane-ov .ov-start-p { color: #c4bad8; } #pane-ov .ov-start-btns { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: 18px; } .ov-start-b.mit-bild { position: relative; overflow: hidden; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; min-height: 190px; padding: 16px 14px; border-radius: 6px; background: radial-gradient(80% 70% at 50% 35%, #211f40, #0f0e22 75%); box-shadow: 0 0 0 1px rgba(226,196,134,.4); font-family: var(--serif); font-size: 19px; letter-spacing: 0; color: #f6f1e8; text-transform: none; transition: transform .45s cubic-bezier(.2,.9,.3,1.4), box-shadow .45s ease; } .ov-start-b.mit-bild .os-bild { position: absolute; inset: 6% 8% 30%; background: center / contain no-repeat; transition: transform .7s cubic-bezier(.2,.7,.2,1); } .ov-start-b.mit-bild:hover { transform: translateY(-6px); box-shadow: 0 0 0 1px rgba(243,220,166,.9), 0 0 50px -8px rgba(226,196,134,.7); background: radial-gradient(80% 70% at 50% 35%, #29274d, #100f24 75%); } .ov-start-b.mit-bild:hover .os-bild { transform: scale(1.08); } @media (max-width: 760px) { #pane-ov .ov-start-btns { grid-template-columns: 1fr; } .ov-start-b.mit-bild { min-height: 150px; } } /* Kacheln: eine einzelne letzte Kachel geht über beide Spalten, damit kein Wort getrennt wird */ #mcards .mcard:last-child:nth-child(odd) { grid-column: 1 / -1; } #mcards .mcard { hyphens: manual; -webkit-hyphens: manual; } /* Der mitlaufende Knopf tritt zurück, sobald der Abschluss oder der Fuß zu sehen ist */ body.ende-sichtbar #floatcta.show { opacity: 0; pointer-events: none; transform: translateX(-50%) translateY(24px); } /* Planetenkarten: die klassische Planetenfigur als Medaillon, das Symbol als kleines Abzeichen */ .pcard .pico.mit-figur { position: relative; width: 62px; height: 62px; font-size: 0; overflow: visible; background: radial-gradient(circle at 50% 40%, #201f3e, #0e0d20 72%); transition: width .5s cubic-bezier(.2,.9,.3,1.3), height .5s cubic-bezier(.2,.9,.3,1.3), transform .5s cubic-bezier(.2,.9,.3,1.5), box-shadow .4s ease; } .pico-figur { position: absolute; inset: 2px; border-radius: 50%; background: center / 128% no-repeat; } .pico-g { position: absolute; right: -5px; bottom: -5px; width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; font-family: var(--symbol); font-size: 12px; line-height: 1; color: #2a1f45; background: linear-gradient(135deg, #f3dca6, #c9a560); box-shadow: 0 0 0 2px #100f24, 0 0 12px rgba(226,196,134,.6); } .pcard.open .pico.mit-figur { width: 84px; height: 84px; box-shadow: 0 0 0 1px rgba(243,220,166,.9), 0 0 40px -2px rgba(226,196,134,.8); } .pcard:hover .pico.mit-figur { transform: scale(1.06); } @media (max-width: 560px) { .pcard .pico.mit-figur { width: 54px; height: 54px; } .pcard.open .pico.mit-figur { width: 70px; height: 70px; } } .pcard:hover .pico.mit-figur, .pcard.open .pico.mit-figur { transform: none; } .pcard:not(.open):hover .pico.mit-figur { transform: scale(1.06); } /* ============================================================ Runde 5: Elemente lesbar, Intuitionstyp als Bühne, Zahlenrad, Deutung vor der Himmelskarte mit goldener Weglinie ============================================================ */ /* Elemente im Natalchart: Gravur als Medaillon oben, Text frei darunter, der Anteil als Linie */ #pane-na .el { padding: 22px 12px 18px; } #pane-na .el .el-gravur { position: relative; inset: auto; order: 0; width: 92px; height: 92px; flex: none; border-radius: 50%; opacity: 1; z-index: 1; background-color: #0f0e22; background-size: 122%; background-position: center; box-shadow: 0 0 0 1px rgba(226,196,134,.45), 0 0 26px -6px rgba(226,196,134,.5); -webkit-mask-image: none; mask-image: none; } #pane-na .el.stark .el-gravur { box-shadow: 0 0 0 1px rgba(243,220,166,.9), 0 0 40px -2px rgba(226,196,134,.8); } #pane-na .el svg { order: 2; width: 22px; height: 22px; margin-top: 10px; } #pane-na .el .el-n { order: 1; margin-top: 12px; font-family: "Bodoni 72", Didot, "Bodoni MT", "Times New Roman", serif; } #pane-na .el .el-name { order: 3; } #pane-na .el .el-wort { order: 4; } #pane-na .el .el-saeule { order: 5; width: 74%; height: 5px; margin: 14px 0 0; border-radius: 3px; } #pane-na .el .el-saeule span { top: 0; bottom: 0; left: 0; right: auto; height: 100%; width: calc(var(--h) * 100%); transform-origin: left; animation-name: saeulequer; } @keyframes saeulequer { from { transform: scaleX(0); } } /* Intuitionstyp: große Element-Gravur mit Bewegung, die vier Typen als Karten */ #pane-in .intu-sketch { overflow: visible; } .intu-funken { position: absolute; left: 50%; top: 50%; width: 380px; height: 420px; transform: translate(-50%, -54%); pointer-events: none; z-index: 2; } @media (min-width: 1101px) { #pane-in .intu.gespalten .sp-links .intu-sketch svg { width: 300px; height: 300px; } #pane-in .intu.gespalten .sp-links .intu-sketch .el-gravur { width: 300px; } .intu-funken { width: 460px; height: 500px; } } #pane-in .intu-sketch .el-gravur { box-shadow: 0 0 120px -20px rgba(226,196,134,.55); animation: gravuratmen 6s ease-in-out infinite; } @keyframes gravuratmen { 50% { filter: brightness(1.18); } } .intu-gallery { gap: 16px; } .itype { padding: 22px 16px 20px; background: radial-gradient(90% 60% at 50% 25%, #201f3e, #0f0e22 72%); border: none; box-shadow: 0 0 0 1px rgba(226,196,134,.3), inset 0 0 0 6px #0f0e22, inset 0 0 0 7px rgba(226,196,134,.22); opacity: .78; filter: saturate(.75); } .itype:hover { opacity: 1; filter: none; } .itype.on { opacity: 1; filter: none; box-shadow: 0 0 0 1px rgba(243,220,166,.8), inset 0 0 0 6px #0f0e22, inset 0 0 0 7px rgba(243,220,166,.55), 0 0 60px -14px rgba(226,196,134,.75); } .itype-sk { height: 110px; } .itype-sk svg { width: 110px; height: 110px; } .itype-sk .el-gravur { width: 110px; } .itype-name { font-size: 19px; margin-top: 10px; } /* Numerologie: Zahlenrad, Rechnung leuchtet auf, Neun-Jahres-Zyklus */ .ns-zahl circle { fill: #100f24; stroke: rgba(226,196,134,.55); stroke-width: .8; } .ns-zahl text { font-family: "Bodoni 72", Didot, "Bodoni MT", "Times New Roman", serif; font-size: 10px; text-anchor: middle; fill: #d6cde6; } .ns-zahl { animation: glimmauf .6s ease both; animation-delay: calc(1.2s + var(--i) * .1s); } .ns-zahl.an circle { fill: #e2c486; stroke: #fff3d2; stroke-width: 1.2; filter: drop-shadow(0 0 5px rgba(243,220,166,.95)); } .ns-zahl.an text { fill: #2a1f45; font-weight: 700; } .ns-zahl.an { transform-box: fill-box; transform-origin: center; animation: zahlzuenden 1.2s cubic-bezier(.2,.9,.3,1.5) both; animation-delay: 2.2s; } @keyframes zahlzuenden { 0% { opacity: 0; transform: scale(.3); } 60% { opacity: 1; transform: scale(1.5); } 100% { opacity: 1; transform: scale(1.18); } } .num-calc span { display: inline-block; animation: zifferauf .5s cubic-bezier(.2,.9,.3,1.4) backwards; animation-delay: calc(.5s + var(--i) * .045s); } @keyframes zifferauf { from { opacity: 0; transform: translateY(-10px); color: #fff6dc; text-shadow: 0 0 12px rgba(243,220,166,1); } } .jahreszyklus { margin: 18px 0 6px; } .jz-titel { font-size: 10.5px; letter-spacing: .26em; text-transform: uppercase; font-weight: 700; color: #a69cbf; margin-bottom: 14px; } .jz-bahn { position: relative; display: grid; grid-template-columns: repeat(9, 1fr); gap: 4px; } .jz-bahn::before { content: ""; position: absolute; left: 5%; right: 5%; top: 17px; height: 1px; background: linear-gradient(90deg, rgba(226,196,134,.2), rgba(226,196,134,.6), rgba(226,196,134,.2)); } .jz-punkt { position: relative; display: flex; flex-direction: column; align-items: center; gap: 6px; animation: glimmauf .6s ease both; animation-delay: calc(.4s + var(--i) * .08s); } .jz-punkt span { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; font-family: "Bodoni 72", Didot, "Times New Roman", serif; font-size: 16px; color: #a69cbf; background: #100f24; box-shadow: 0 0 0 1px rgba(226,196,134,.35); } .jz-punkt small { font-size: 10.5px; letter-spacing: .06em; color: #8a80a6; } .jz-punkt.war span { color: #e2c486; background: rgba(226,196,134,.12); } .jz-punkt.jetzt span { width: 44px; height: 44px; margin-top: -5px; font-size: 21px; color: #2a1f45; background: linear-gradient(135deg, #f3dca6, #c9a560); box-shadow: 0 0 0 4px rgba(226,196,134,.18), 0 0 30px rgba(226,196,134,.8); animation: jetztpuls 2.6s ease-in-out infinite; } .jz-punkt.jetzt small { color: #f3dca6; font-weight: 700; } @keyframes jetztpuls { 50% { box-shadow: 0 0 0 8px rgba(226,196,134,.1), 0 0 44px rgba(226,196,134,.95); } } @media (max-width: 560px) { .jz-punkt span { width: 28px; height: 28px; font-size: 14px; } .jz-punkt.jetzt span { width: 36px; height: 36px; font-size: 18px; } .jz-punkt small { font-size: 9px; } } /* Deutung: Himmelskarte steht ruhig im Hintergrund und dreht sich ganz langsam */ #step3 #pane-de { position: relative; isolation: isolate; } .de-himmel { position: sticky; top: 0; height: 100vh; margin-bottom: -100vh; z-index: -1; pointer-events: none; overflow: visible; } .de-himmel div { position: absolute; left: 50%; top: 50%; width: min(1400px, 150vw); aspect-ratio: 1100 / 1473; transform: translate(-50%, -50%); background: url("/bilder/himmelskarte.webp") center / contain no-repeat; opacity: .2; -webkit-mask-image: radial-gradient(closest-side, #000 55%, transparent); mask-image: radial-gradient(closest-side, #000 55%, transparent); animation: kartedreh 420s linear infinite; } @keyframes kartedreh { to { transform: translate(-50%, -50%) rotate(360deg); } } #pane-de .acc { background: rgba(15,14,32,.86); backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(5px); } #pane-de .acc[open] { background: rgba(17,16,36,.92); } /* goldene Weglinie durch die Kapitelnummern, sie füllt sich beim Lesen */ #pane-de .story { position: relative; isolation: isolate; } #pane-de .story::before, #pane-de .story::after { content: ""; position: absolute; left: 38px; top: 34px; width: 2px; z-index: -1; border-radius: 2px; } #pane-de .story::before { bottom: 34px; background: linear-gradient(180deg, rgba(226,196,134,.15), rgba(226,196,134,.4), rgba(226,196,134,.15)); } #pane-de .story::after { height: calc((100% - 68px) * var(--weg, 0)); background: linear-gradient(180deg, #c9a560, #fff3d2); box-shadow: 0 0 14px rgba(243,220,166,.9); transition: height .25s linear; } #pane-de .acc-nr { position: relative; z-index: 2; } @media (prefers-reduced-motion: reduce) { .de-himmel div, .jz-punkt.jetzt span, #pane-in .intu-sketch .el-gravur { animation: none; } } /* ============================================================ Runde 6: Mitternachtsblau statt Lila, echte Milchstraße hinter Vorschau und Bericht ============================================================ */ .night { background: radial-gradient(120% 70% at 50% 0%, #1c1b3b 0%, #121129 42%, #0a0916 100%); } #step2.night, #step3.night { background: linear-gradient(180deg, #0c0b1b 0%, #0f0e23 45%, #0a0916 100%); } #step2.night.sterne-live::before, #step3.night.sterne-live::before { display: block; position: fixed; inset: 0; z-index: -2; pointer-events: none; background: url("/bilder/milchstrasse-2400.webp") 50% 45% / cover no-repeat; opacity: .32; mix-blend-mode: screen; } @media (max-width: 900px) { #step2.night.sterne-live::before, #step3.night.sterne-live::before { background-image: url("/bilder/milchstrasse-1400.webp"); background-position: 40% 50%; } } .cookie-card { background: rgba(14,13,30,.98); } /* Übersicht: zwei Himmelskarten mit Erklärung, Planeten und Zentren sprechen beim Darüberfahren */ .karten-kopf { text-align: center; margin: 56px auto 22px; max-width: 640px; } .karten-kopf .script-eyebrow { font-size: clamp(32px, 3.6vw, 44px); } .karten-kopf p { color: #c4bad8; font-size: 15px; line-height: 1.6; margin: 8px 0 0; } #pane-ov .grid2 { gap: 26px; } #pane-ov .grid2 .panel { padding: 30px 26px 24px; border: none; border-radius: 8px; background: radial-gradient(90% 70% at 50% 35%, #1d1c3c, #0e0d20 75%); box-shadow: 0 0 0 1px rgba(226,196,134,.35), inset 0 0 0 7px #0e0d20, inset 0 0 0 8px rgba(226,196,134,.22), 0 40px 80px -40px rgba(0,0,0,.9); } #pane-ov .grid2 .panel .cap { text-align: center; font-size: 11px; letter-spacing: .3em; } .karte-unterschrift { margin: 6px 0 0; text-align: center; font-family: var(--serif); font-style: italic; font-size: 16px; line-height: 1.45; color: #c4bad8; } .gwheel [data-k], .gbody [data-z] { cursor: pointer; } .gwheel text[data-k] { transition: fill .25s ease, font-size .25s ease; } .gwheel text[data-k].hl, .gwheel text[data-k]:hover { fill: #fff3d2; font-size: 21px; } .gbody [data-z]:hover { stroke: #fff3d2; stroke-width: 2; } .himmel-tip { position: fixed; z-index: 1200; left: 0; top: 0; max-width: 260px; padding: 12px 14px; border-radius: 6px; pointer-events: none; background: rgba(11,10,24,.97); box-shadow: 0 0 0 1px rgba(226,196,134,.55), 0 24px 40px -14px rgba(0,0,0,.9), 0 0 30px -8px rgba(226,196,134,.4); opacity: 0; transform: translateY(6px); transition: opacity .2s ease, transform .2s ease; } .himmel-tip.an { opacity: 1; transform: none; } .himmel-tip b { display: block; font-family: var(--serif); font-weight: 500; font-size: 18px; color: #f3dca6; } .himmel-tip span { display: block; margin-top: 2px; font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase; color: #a69cbf; } .himmel-tip i { display: block; margin-top: 6px; font-family: var(--serif); font-size: 15px; color: #e6def0; } .himmel-tip em { display: block; margin-top: 8px; font-style: normal; font-size: 10px; letter-spacing: .22em; text-transform: uppercase; color: #e2c486; } /* Human Design: Auftakt mit Typ-Gravur, drei Schlüssel als Bildkarten */ .hd-buehne { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: 52px; align-items: center; margin: 4px 0 34px; } .hd-bild { position: relative; aspect-ratio: 1; max-width: 440px; width: 100%; justify-self: center; background: center / contain no-repeat; filter: drop-shadow(0 0 50px rgba(226,196,134,.35)); animation: gravuratmen 6s ease-in-out infinite; } .hd-bild::before { content: ""; position: absolute; inset: -4%; border-radius: 50%; border: 1px dashed rgba(226,196,134,.35); animation: drehen 120s linear infinite; } .hd-text .script-eyebrow { font-size: clamp(26px, 2.6vw, 34px); } .hd-typ { font-family: var(--serif); font-size: clamp(36px, 4.2vw, 58px); line-height: 1.08; color: #f6f1e8; margin: 4px 0 16px; } .hd-kurz { font-family: var(--serif); font-style: italic; font-size: 19px; line-height: 1.62; color: #e6def0; margin: 0 0 20px; } .hd-flow { display: flex; flex-wrap: wrap; gap: 10px; } .hd-flow span { display: inline-flex; flex-direction: column; gap: 2px; padding: 10px 14px; border-radius: 4px; font-family: var(--serif); font-size: 17px; color: #f6f1e8; } .hd-flow b { font-family: var(--sans); font-size: 9.5px; letter-spacing: .22em; text-transform: uppercase; font-weight: 700; } .hd-flow .gut { box-shadow: 0 0 0 1px rgba(226,196,134,.55); background: rgba(226,196,134,.08); } .hd-flow .gut b { color: #e2c486; } .hd-flow .warn { box-shadow: 0 0 0 1px rgba(203,181,243,.45); background: rgba(203,181,243,.07); } .hd-flow .warn b { color: #cbb5f3; } .hd-schluessel { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; margin: 0 0 56px; } .hd-key { position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; padding: 18px 18px 22px; border-radius: 8px; background: radial-gradient(90% 60% at 50% 25%, #201f3e, #0f0e22 75%); box-shadow: 0 0 0 1px rgba(226,196,134,.38), inset 0 0 0 6px #0f0e22, inset 0 0 0 7px rgba(226,196,134,.2); animation: siegelauf .9s cubic-bezier(.2,.9,.3,1.3) backwards; animation-delay: calc(.4s + var(--i) * .15s); transition: transform .45s cubic-bezier(.2,.9,.3,1.4), box-shadow .45s ease; } .hd-key:hover { transform: translateY(-6px); box-shadow: 0 0 0 1px rgba(243,220,166,.85), inset 0 0 0 6px #0f0e22, inset 0 0 0 7px rgba(243,220,166,.45), 0 0 60px -14px rgba(226,196,134,.7); } .hk-bild { width: 100%; height: 120px; background: center / contain no-repeat; margin-bottom: 10px; } .hk-l { font-size: 10px; letter-spacing: .28em; text-transform: uppercase; font-weight: 700; color: #e2c486; } .hk-v { margin-top: 6px; font-family: var(--serif); font-size: 23px; line-height: 1.2; color: #f6f1e8; } .hk-d { margin-top: 10px; font-size: 14px; line-height: 1.6; color: #c4bad8; } #pane-hd .kv.doppelt { display: none; } @media (max-width: 900px) { .hd-buehne { grid-template-columns: 1fr; gap: 18px; text-align: center; } .hd-bild { max-width: 300px; } .hd-flow { justify-content: center; } .hd-schluessel { grid-template-columns: 1fr; } } /* Zentren als Medaillons: offene Zentren leiser, definierte leuchten */ .pcard .pico.mit-figur.offen .pico-figur { opacity: .5; filter: saturate(.6); } .pcard .pico.mit-figur.offen .pico-g { background: #0f0e22; color: #cbb5f3; box-shadow: 0 0 0 1px rgba(203,181,243,.6), 0 0 0 3px #0f0e22; } /* Natalchart: Planeten in Gruppen */ .pgruppe { margin: 34px 0 0; } .pgruppe:first-of-type { margin-top: 18px; } .pg-kopf { display: flex; gap: 16px; align-items: flex-start; margin: 0 0 14px; padding-bottom: 12px; border-bottom: 1px solid rgba(226,196,134,.2); } .pg-nr { font-family: "Bodoni 72", Didot, "Times New Roman", serif; font-size: 30px; line-height: 1; color: #e2c486; } .pg-t { font-family: var(--serif); font-size: 25px; line-height: 1.15; color: #f6f1e8; } .pg-d { margin-top: 4px; font-size: 14px; line-height: 1.55; color: #a69cbf; } @media (prefers-reduced-motion: reduce) { .hd-bild, .hd-bild::before, .hd-key { animation: none; } } /* Hero-Film: liegt über dem Standbild (das erste Filmbild), blendet weich ein; das gezeichnete Licht tritt dann zurück */ .hero-film { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 6% 50%; opacity: 0; transition: opacity 2s ease; pointer-events: none; } .hero-film.an { opacity: 1; } header.hero #lichtfeld { transition: opacity 2.5s ease; } header.hero.mit-film #lichtfeld { opacity: .45; } @media (max-width: 1100px) { .hero-film { display: none; } } /* Intuitionstyp: die Element-Gravur steht zusätzlich groß und sanft glimmend hinter der linken Seite */ #pane-in .intu { position: relative; isolation: isolate; } #pane-in .intu::before { content: ""; position: absolute; z-index: -1; left: 50%; top: 0; width: min(760px, 120vw); aspect-ratio: 1; transform: translate(-50%, -12%); background: var(--el-bild) center / contain no-repeat; opacity: .14; filter: blur(1px); pointer-events: none; animation: gravuratmen 7s ease-in-out infinite; -webkit-mask-image: radial-gradient(closest-side, #000 45%, transparent); mask-image: radial-gradient(closest-side, #000 45%, transparent); } @media (min-width: 1101px) { #pane-in .intu.gespalten::before { left: 24%; width: 820px; transform: translate(-50%, -16%); opacity: .16; } } /* ============================================================ „Mein Himmel“, Runde 7: Kuppel öffnet sich (Film), Geburtshimmel als Bogen über der Kuppel, Siegel mit Rückseite, Vorschau als fünf verdeckte Karten, Wachssiegel, das beim Absenden bricht, Sternschnuppe vom Knopf ============================================================ */ .g-buehne { padding-top: 150px; } .g-bild .kuppel-film { position: absolute; top: -40px; left: -40px; width: calc(100% + 80px); height: calc(100% + 80px); object-fit: cover; object-position: 50% 22%; filter: brightness(.72) saturate(1.05); } .glimpse.show .g-bild .kuppel-film { animation: kuppelauf 14s cubic-bezier(.2,.7,.2,1) both; } /* Geburtshimmel */ .geburtshimmel { position: absolute; z-index: 0; left: 0; top: 0; overflow: visible; pointer-events: none; } .g-greeting { z-index: 1; } .gh-bogen { fill: none; stroke: rgba(226,196,134,.5); stroke-width: 1; } .gh-strich { stroke: rgba(226,196,134,.5); stroke-width: 1; opacity: 0; transition: opacity 1.2s ease 2.4s; } .gh-zeichen { font-family: var(--symbol); font-size: 13px; fill: rgba(226,196,134,.42); text-anchor: middle; opacity: 0; transition: opacity 1.4s ease 2.6s; } .gh-p { opacity: 0; transition: opacity .8s ease var(--d); } .gh-kern { fill: #fffaf0; } .gh-blitz { fill: none; stroke: #fff3d2; stroke-width: 1.2; opacity: 0; transform-box: fill-box; transform-origin: center; } .gh-g { font-family: var(--symbol); font-size: 17px; fill: #f3dca6; text-anchor: middle; paint-order: stroke; stroke: rgba(10,9,22,.75); stroke-width: 3px; } .gh-p.sonne .gh-g { font-size: 21px; } .gh-fang { fill: transparent; pointer-events: all; cursor: help; } .geburtshimmel.an .gh-strich, .geburtshimmel.an .gh-zeichen, .geburtshimmel.an .gh-p, .geburtshimmel.fertig .gh-strich, .geburtshimmel.fertig .gh-zeichen, .geburtshimmel.fertig .gh-p { opacity: 1; } .geburtshimmel.fertig * { transition: none !important; } .geburtshimmel.an .gh-blitz { animation: ghblitz 1.6s ease-out var(--d) both; } @keyframes ghblitz { 0% { opacity: .95; transform: scale(.2); } 100% { opacity: 0; transform: scale(3.4); } } .geburtshimmel.an .gh-halo, .geburtshimmel.fertig .gh-halo { animation: ghfunkel 4.5s ease-in-out calc(var(--d) + 1.6s) infinite; } @keyframes ghfunkel { 50% { opacity: .5; } } .himmel-zeile { margin: 0 auto 14px; font-family: var(--serif); font-style: italic; font-size: 18px; line-height: 1.4; color: #e2c486; opacity: 0; transform: translateY(6px); transition: opacity 1.2s ease, transform 1.2s ease; text-shadow: 0 1px 14px rgba(10,7,22,.95); } .himmel-zeile.an { opacity: 1; transform: none; } .gh-tipp { position: absolute; z-index: 5; transform: translate(-50%, -100%); padding: 7px 12px; border-radius: 4px; background: rgba(14,13,32,.95); color: #f6f1e8; font-size: 13px; white-space: nowrap; box-shadow: 0 0 0 1px rgba(226,196,134,.45), 0 12px 30px -10px rgba(0,0,0,.9); opacity: 0; pointer-events: none; transition: opacity .2s ease; } .gh-tipp.an { opacity: 1; } /* Siegel mit Rückseite: dreht sich beim Darüberfahren um (Handy: erster Tipp) */ .siegel.mit-rueck { perspective: 700px; } .siegel-dreh { position: relative; display: grid; transform-style: preserve-3d; transition: transform .8s cubic-bezier(.3,1.3,.45,1); } .siegel-vorn, .siegel-rueck { grid-area: 1 / 1; -webkit-backface-visibility: hidden; backface-visibility: hidden; } .siegel-vorn { display: flex; flex-direction: column; align-items: center; gap: 3px; } .siegel-rueck { transform: rotateY(180deg); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; margin: -6px -10px; padding: 12px 10px; border-radius: 10px; background: radial-gradient(100% 80% at 50% 30%, #23224a, #0f0e22 80%); box-shadow: 0 0 0 1px rgba(226,196,134,.65), inset 0 0 0 4px #0f0e22, inset 0 0 0 5px rgba(226,196,134,.3), 0 0 40px -10px rgba(226,196,134,.75); } .sr-kopf { font-family: var(--script); font-size: 23px; line-height: 1.05; color: #f3dca6; text-align: center; } .sr-text { font-family: var(--serif); font-style: italic; font-size: 15px; line-height: 1.3; color: #f6f1e8; text-align: center; hyphens: auto; -webkit-hyphens: auto; } @media (hover: hover) { .siegel.mit-rueck:hover .siegel-dreh, .siegel.mit-rueck:focus-visible .siegel-dreh { transform: rotateY(180deg); } } .siegel.mit-rueck.umgedreht .siegel-dreh { transform: rotateY(180deg); } /* Vorschau: fünf verdeckte Karten */ .pv-karten { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; margin: 6px 0 24px; perspective: 900px; } .pv-karte { appearance: none; border: 0; padding: 0; margin: 0; background: none; font: inherit; color: inherit; cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: 8px; animation: kartegeben .8s cubic-bezier(.2,.8,.3,1.15) backwards; animation-delay: calc(.5s + var(--i) * .13s); } @keyframes kartegeben { from { opacity: 0; transform: translateY(-46px) rotate(calc((var(--i) - 2) * 8deg)) scale(.85); } } .pvk-dreh { position: relative; width: 100%; aspect-ratio: 3 / 4.3; transform-style: preserve-3d; transform: rotateY(180deg); transition: transform .9s cubic-bezier(.3,1.25,.45,1), translate .4s ease; } .pv-karte.offen .pvk-dreh { transform: none; } .pv-karte.offen.erst .pvk-dreh { transition-delay: 1.6s; } .pv-karte:hover .pvk-dreh { translate: 0 -5px; } .pvk-seite { position: absolute; inset: 0; border-radius: 7px; overflow: hidden; -webkit-backface-visibility: hidden; backface-visibility: hidden; } .pvk-rueck { transform: rotateY(180deg); background: #0e0d20 url("/bilder/kartenrueckseite.webp") center / cover no-repeat; box-shadow: 0 0 0 1px rgba(226,196,134,.5), inset 0 0 0 4px #0e0d20, inset 0 0 0 5px rgba(226,196,134,.35), 0 16px 30px -16px rgba(0,0,0,.9); } .pvk-vorn { display: grid; place-items: center; background: radial-gradient(90% 60% at 50% 35%, #24234a, #100f24 72%); box-shadow: 0 0 0 1px rgba(243,220,166,.85), inset 0 0 0 4px #100f24, inset 0 0 0 5px rgba(243,220,166,.55), 0 0 34px -8px rgba(226,196,134,.8); } .pvk-bild { position: absolute; inset: 10% 4%; background: center / contain no-repeat; -webkit-mask-image: radial-gradient(closest-side, #000 66%, transparent); mask-image: radial-gradient(closest-side, #000 66%, transparent); } .pvk-zahl { font-family: "Bodoni 72", Didot, "Bodoni MT", "Times New Roman", serif; font-size: clamp(30px, 3.2vw, 44px); line-height: 1; color: #f3dca6; text-shadow: 0 0 22px rgba(226,196,134,.7); } .pvk-name { font-family: var(--serif); font-size: 14px; line-height: 1.15; color: #b9b0cf; text-align: center; transition: color .3s; } .pv-karte.offen .pvk-name { color: #f3dca6; } .pv-karte:focus-visible { outline: none; } .pv-karte:focus-visible .pvk-dreh { outline: 2px solid #e2c486; outline-offset: 3px; border-radius: 8px; } #g-preview-panel { transition: opacity .22s ease, transform .22s ease; -webkit-mask-image: linear-gradient(180deg, #000 72%, transparent); mask-image: linear-gradient(180deg, #000 72%, transparent); } #g-preview-panel.wechsel { opacity: 0; transform: translateY(6px); } /* Wachssiegel statt Schloss: glimmt, bricht beim Absenden */ .preview-seal .lock.wachs { position: relative; width: 104px; height: 104px; margin-bottom: 14px; border-radius: 50%; background: none; box-shadow: none; animation: wachsglut 3.4s ease-in-out infinite; } @keyframes wachsglut { 0%, 100% { filter: drop-shadow(0 0 6px rgba(226,196,134,.25)) drop-shadow(0 10px 14px rgba(0,0,0,.6)); } 50% { filter: drop-shadow(0 0 20px rgba(243,220,166,.6)) drop-shadow(0 10px 14px rgba(0,0,0,.6)); } } .wachs-h { position: absolute; inset: 0; background: url("/bilder/wachssiegel-220.webp") center / contain no-repeat; background-image: image-set(url("/bilder/wachssiegel-220.webp") 1x, url("/bilder/wachssiegel-440.webp") 2x); transition: transform 1.2s cubic-bezier(.2,.8,.2,1), opacity 1.4s ease .6s; } .wachs-h.l { clip-path: polygon(0 0, 50% 0, 47% 12%, 53% 24%, 46% 36%, 54% 48%, 48% 60%, 55% 72%, 47% 84%, 52% 100%, 0 100%); } .wachs-h.r { clip-path: polygon(50% 0, 100% 0, 100% 100%, 52% 100%, 47% 84%, 55% 72%, 48% 60%, 54% 48%, 46% 36%, 53% 24%, 47% 12%); } .lock.wachs.gebrochen { animation: none; filter: drop-shadow(0 10px 14px rgba(0,0,0,.6)); } .lock.wachs.gebrochen .wachs-h.l { transform: translate(-18px, 8px) rotate(-17deg); opacity: .85; } .lock.wachs.gebrochen .wachs-h.r { transform: translate(18px, 10px) rotate(15deg); opacity: .85; } .wachs-licht { position: absolute; left: 50%; top: 50%; width: 8px; height: 8px; margin: -4px 0 0 -4px; border-radius: 50%; opacity: 0; background: #fff6dc; box-shadow: 0 0 30px 12px rgba(255,240,200,.85), 0 0 90px 40px rgba(243,220,166,.45); } .wachs-licht::after { content: ""; position: absolute; left: 50%; bottom: 50%; width: 3px; height: 190px; margin-left: -1.5px; transform-origin: 50% 100%; transform: scaleY(0); background: linear-gradient(0deg, rgba(255,246,222,.95), rgba(255,246,222,0)); filter: blur(.6px); } .lock.wachs.gebrochen .wachs-licht { animation: siegellicht 2s ease-out forwards; } .lock.wachs.gebrochen .wachs-licht::after { animation: lichtstrahl 1.8s ease-out .1s forwards; } @keyframes siegellicht { 0% { opacity: 0; transform: scale(.2); } 25% { opacity: 1; transform: scale(1.5); } 100% { opacity: .6; transform: scale(1); } } @keyframes lichtstrahl { 0% { transform: scaleY(0); opacity: 1; } 45% { transform: scaleY(1); opacity: 1; } 100% { transform: scaleY(1); opacity: .25; } } /* Sternschnuppe und Funken nach dem Absenden */ .schnuppe { position: fixed; z-index: 10000; width: 200px; height: 2px; margin: -1px 0 0 -200px; transform-origin: 100% 50%; pointer-events: none; border-radius: 2px; background: linear-gradient(90deg, rgba(243,220,166,0), rgba(255,246,222,.95)); filter: drop-shadow(0 0 6px rgba(243,220,166,.9)); } .schnuppe::after { content: ""; position: absolute; right: -4px; top: -4px; width: 10px; height: 10px; border-radius: 50%; background: #fffaf0; box-shadow: 0 0 14px 5px rgba(243,220,166,.95), 0 0 40px 14px rgba(226,196,134,.45); } .funke { position: fixed; z-index: 10000; width: 5px; height: 5px; margin: -2.5px 0 0 -2.5px; border-radius: 50%; pointer-events: none; background: #fff3d2; box-shadow: 0 0 8px 2px rgba(243,220,166,.9); } @media (max-width: 780px) { .g-buehne { padding-top: 128px; } .gh-g { font-size: 14px; } .gh-p.sonne .gh-g { font-size: 17px; } .himmel-zeile { font-size: 15.5px; margin-bottom: 10px; } .sr-kopf { font-size: 19px; } .sr-text { font-size: 12.5px; } } @media (max-width: 520px) { .pv-karten { gap: 6px; } .pvk-name { font-size: 10.5px; line-height: 1.1; hyphens: auto; -webkit-hyphens: auto; overflow-wrap: anywhere; } } /* Mitlaufender Knopf in Mitternachtsblau mit Goldkante statt Lila */ .floatcta { background: linear-gradient(180deg, #1c1b3b, #100f24); color: #f3dca6; box-shadow: 0 0 0 1px rgba(226,196,134,.6), 0 0 30px -8px rgba(226,196,134,.55), 0 14px 30px -12px rgba(0,0,0,.8); } @media (prefers-reduced-motion: reduce) { .gh-p, .gh-strich, .gh-zeichen, .himmel-zeile, .siegel-dreh, .pvk-dreh, .wachs-h { transition: none; } .pv-karte, .lock.wachs, .geburtshimmel .gh-halo { animation: none; } } /* ============================================================ Runde 8: Himmel heute im Hero, Wachssiegel als Stempel auf dem Bericht, PDF-Deckblatt als Vorschau am Ende des Berichts ============================================================ */ .hero-heute { display: inline-flex; align-items: center; gap: 10px; margin-top: 18px; font-family: var(--serif); font-style: italic; font-size: 17px; line-height: 1.3; color: #d6cde6; text-decoration: none; border-bottom: 1px solid rgba(226,196,134,.25); padding-bottom: 3px; transition: color .3s, border-color .3s; animation: einblend 1.2s ease 1.2s backwards; } .hero-heute[hidden] { display: none; } .hero-heute b { font-weight: 500; color: #f3dca6; } .hero-heute:hover { color: #f6f1e8; border-color: rgba(243,220,166,.7); } .hh-mond { font-family: var(--symbol); font-style: normal; font-size: 18px; color: #f3dca6; text-shadow: 0 0 14px rgba(226,196,134,.8); } #step3 .report-head > .cover-wachs { position: absolute; z-index: 2; top: 120px; right: max(5vw, calc(50% - 520px)); width: 112px; height: 112px; background: url("/bilder/wachssiegel-220.webp") center / contain no-repeat; background-image: image-set(url("/bilder/wachssiegel-220.webp") 1x, url("/bilder/wachssiegel-440.webp") 2x); transform: rotate(-12deg); filter: drop-shadow(0 12px 16px rgba(0,0,0,.65)) drop-shadow(0 0 18px rgba(226,196,134,.25)); animation: stempel .9s cubic-bezier(.3,1.4,.5,1) 2.2s backwards; pointer-events: none; } @keyframes stempel { from { opacity: 0; transform: rotate(-12deg) scale(1.9); } 60% { opacity: 1; } } @media (max-width: 760px) { #step3 .report-head > .cover-wachs { top: 12px; right: 12px; width: 58px; height: 58px; } } .pdf-karte { display: grid; grid-template-columns: minmax(0, 300px) minmax(0, 1fr); gap: 56px; align-items: center; max-width: 920px !important; margin: 70px auto 10px !important; padding: 44px 48px !important; border-radius: 8px; background: radial-gradient(80% 90% at 20% 30%, #22214a, #0f0e22 75%); box-shadow: 0 0 0 1px rgba(226,196,134,.3), inset 0 0 0 7px #0f0e22, inset 0 0 0 8px rgba(226,196,134,.16), 0 40px 80px -40px rgba(0,0,0,.9); } .pk-buehne { perspective: 1100px; cursor: pointer; } .pk-deck { position: relative; aspect-ratio: 210 / 297; border-radius: 4px; overflow: hidden; container-type: inline-size; text-align: center; background: #0b0a1a center / cover no-repeat; transform: rotateY(-18deg) rotateX(6deg) rotate(-3deg) translateY(30px); opacity: 0; transition: transform 1.2s cubic-bezier(.2,.8,.2,1), opacity 1s ease; box-shadow: 0 0 0 1px rgba(226,196,134,.35), 26px 44px 60px -24px rgba(0,0,0,.95), 0 0 80px -20px rgba(226,196,134,.45); } .pdf-karte.an .pk-deck { opacity: 1; transform: rotateY(-18deg) rotateX(6deg) rotate(-3deg); } .pdf-karte.an .pk-buehne:hover .pk-deck { transform: rotateY(-6deg) rotateX(2deg) rotate(-1deg) translateY(-4px); } .pk-deck::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(115deg, transparent 30%, rgba(255,248,230,.16) 45%, transparent 60%); background-size: 250% 100%; animation: pkglanz 6s ease-in-out 1.5s infinite; } @keyframes pkglanz { 0%, 55% { background-position: 120% 0; } 85%, 100% { background-position: -20% 0; } } .pk-titel { position: absolute; left: 0; right: 0; top: 9.4%; font-family: var(--serif); font-size: 3.6cqw; letter-spacing: .11em; white-space: nowrap; text-transform: uppercase; color: #f6f1e8; text-shadow: 0 1px 8px rgba(0,0,0,.7); } .pk-name { position: absolute; left: 0; right: 0; top: 14.2%; font-family: var(--script); font-size: 10.5cqw; line-height: 1; color: #e2c486; text-shadow: 0 0 18px rgba(226,196,134,.45); } .pk-geburt { position: absolute; left: 0; right: 0; top: 24.6%; font-size: 1.7cqw; letter-spacing: .12em; color: #d6cde6; } .pk-ringe { position: absolute; left: 12.6%; right: 12.6%; top: 29.6%; display: flex; justify-content: space-between; } .pk-ringe i { width: 10cqw; height: 10cqw; border-radius: 50%; display: grid; place-items: center; font-style: normal; font-family: var(--symbol), var(--serif); font-size: 4.4cqw; color: #f3dca6; background: rgba(14,13,32,.5); box-shadow: 0 0 0 1px rgba(226,196,134,.75), inset 0 0 8px rgba(226,196,134,.25); } .pk-marke { position: absolute; left: 0; right: 0; bottom: 5.8%; font-family: var(--script); font-size: 5.4cqw; color: #e2c486; } .pk-text .script-eyebrow { font-size: clamp(34px, 3.6vw, 46px); line-height: 1.1; } .pk-text p { margin: 12px 0 24px; color: #d6cde6; font-size: 16px; line-height: 1.7; max-width: 44ch; } @media (max-width: 760px) { .pdf-karte { grid-template-columns: none; gap: 30px; padding: 34px 22px !important; text-align: center; margin-top: 50px !important; } .pk-buehne { width: min(220px, 62vw); margin: 0 auto; } .pk-text p { margin-left: auto; margin-right: auto; } } @media (prefers-reduced-motion: reduce) { .pk-deck { transition: none; } .pk-deck::after { display: none; } #step3 .report-head > .cover-wachs, .hero-heute { animation: none; } } /* Runde 8b: Bericht mit Himmel heute, Lesezeichen, Lesefortschritt, Story-Bild, wie es weitergeht */ .report-heute { position: relative; z-index: 1; margin: 12px auto 0; max-width: 52ch; font-family: var(--serif); font-style: italic; font-size: 16.5px; line-height: 1.5; color: #d6cde6; } .report-heute b { font-weight: 500; color: #f3dca6; } .report-heute .hh-mond { margin-right: 8px; } .rtab.anfang { position: relative; } .rtab.anfang::after { content: ""; position: absolute; top: 4px; right: -9px; width: 7px; height: 7px; border-radius: 50%; background: #f3dca6; box-shadow: 0 0 10px rgba(226,196,134,.9); } .lesezeichen { flex: none; align-self: center; margin: 0 12px; padding: 6px 10px 6px 12px; font-family: var(--serif); font-style: italic; font-size: 14px; line-height: 1; color: #1d1733; background: linear-gradient(135deg, #ecd29d, #c9a560); clip-path: polygon(0 0, 100% 0, 92% 50%, 100% 100%, 0 100%); box-shadow: 0 6px 16px -8px rgba(226,196,134,.8); } details.acc.anfang { box-shadow: 0 0 0 1px rgba(226,196,134,.45), 0 0 40px -18px rgba(226,196,134,.7); } details.acc.gelesen .acc-t::after { content: " ✦"; color: #e2c486; font-size: .7em; vertical-align: middle; } .lesefortschritt { max-width: 760px; margin: 0 auto 26px; text-align: center; } .lf-text { font-family: var(--serif); font-style: italic; font-size: 17px; color: #d6cde6; margin-bottom: 10px; } .lf-balken { height: 3px; border-radius: 3px; background: rgba(226,196,134,.15); overflow: hidden; } .lf-balken span { display: block; height: 100%; width: 0; background: linear-gradient(90deg, #c9a560, #fff3d2); box-shadow: 0 0 12px rgba(226,196,134,.8); transition: width .8s cubic-bezier(.2,.7,.2,1); } .pk-knoepfe { display: flex; flex-wrap: wrap; gap: 12px; } .pk-hinweis { margin: 14px 0 0 !important; font-size: 12.5px !important; line-height: 1.55 !important; color: #a69cbf !important; max-width: 46ch; } .weiter { max-width: 920px !important; margin: 50px auto 10px !important; text-align: center; padding: 0 !important; } .weiter .script-eyebrow { font-size: clamp(32px, 3.4vw, 44px); line-height: 1.1; margin-bottom: 22px; } .wk-reihe { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 18px; } .wk { display: flex; flex-direction: column; gap: 8px; padding: 24px 24px 22px; border-radius: 8px; text-decoration: none; text-align: left; background: radial-gradient(90% 90% at 20% 20%, #201f44, #0f0e22 78%); box-shadow: 0 0 0 1px rgba(226,196,134,.3), 0 30px 60px -36px rgba(0,0,0,.9); transition: transform .4s cubic-bezier(.2,.9,.3,1.4), box-shadow .4s ease; } .wk:hover { transform: translateY(-4px); box-shadow: 0 0 0 1px rgba(243,220,166,.8), 0 0 50px -14px rgba(226,196,134,.6), 0 30px 60px -36px rgba(0,0,0,.9); } .wk-titel { font-family: var(--serif); font-size: 23px; line-height: 1.2; color: #f6f1e8; } .wk-text { font-size: 15px; line-height: 1.6; color: #c4bad8; } .wk-mehr { margin-top: 4px; font-size: 11px; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: #e2c486; } @media (max-width: 760px) { .lesezeichen { margin: 0 8px; font-size: 12.5px; padding: 5px 8px 5px 10px; } .pk-knoepfe { justify-content: center; } .pk-hinweis { margin-left: auto !important; margin-right: auto !important; } } /* ============================================================ Runde 9: Startseite edler. Prolog statt Text im Hero, römische Gedanken, Brief mit Siegel, Goldfolie, Zeilen-Enthüllung, Lichtschein, Galerie-Porträt, Seitenabschluss mit Siegel, Knopf unten rechts, letzte Lilatöne raus ============================================================ */ /* Knöpfe auf Papier: Mitternachtsblau mit Goldschrift, beim Darüberfahren goldenes Nachleuchten */ .btn { background: linear-gradient(180deg, #23224a, #121129); color: #f3dca6; box-shadow: inset 0 0 0 1px rgba(226,196,134,.45), 0 14px 30px -18px rgba(18,17,41,.9); transition: transform .35s cubic-bezier(.2,.9,.3,1.4), box-shadow .45s ease, background .45s ease, filter .3s; } .btn:hover { background: linear-gradient(180deg, #2a2956, #15142e); transform: translateY(-1px); box-shadow: inset 0 0 0 1px rgba(243,220,166,.85), 0 0 34px -6px rgba(226,196,134,.7), 0 16px 34px -18px rgba(18,17,41,.9); } .night .btn:hover, #cookie .cbtn:hover, #calm .cbtn:hover, #sent .cbtn:hover { box-shadow: 0 0 0 1px rgba(255,243,210,.9), 0 0 46px -4px rgba(226,196,134,.85), 0 14px 40px -14px rgba(226,196,134,.55); } .btn.btn-ghost { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 1px var(--gold-line); } .btn.btn-ghost:hover { background: rgba(226,196,134,.08); box-shadow: inset 0 0 0 1px rgba(226,196,134,.9), 0 0 30px -8px rgba(226,196,134,.6); } #progressbar { background: linear-gradient(90deg, #c9a560, #fff3d2); box-shadow: 0 0 12px rgba(226,196,134,.7); } /* Prolog: die Worte aus dem Hero, ruhig und groß */ .prolog { background: var(--paper-3) var(--plaster); padding: 96px 0 90px; } .prolog-zier { display: flex; align-items: center; justify-content: center; gap: 16px; color: var(--gold); font-size: 15px; margin: 0 auto 30px; } .prolog-zier span { width: 70px; height: 1px; background: linear-gradient(90deg, transparent, var(--gold-2)); } .prolog-zier span:last-child { transform: scaleX(-1); } .prolog .herolead { max-width: 34em; gap: 20px; } .prolog .herolead p { font-family: var(--serif); font-size: clamp(21px, 2.3vw, 27px); line-height: 1.5; color: var(--ink); } .prolog .herolead p.strong { font-style: italic; font-weight: 500; color: var(--gold-deep); } /* Kommt dir das bekannt vor: vier Gedanken mit römischen Ziffern und Gravuren */ .pain-liste { gap: 0 64px; max-width: 1080px; margin-left: auto; margin-right: auto; } .pain-liste .pain { display: grid; grid-template-columns: 50px 112px minmax(0, 1fr); align-items: center; gap: 0 20px; padding: 30px 0 32px; background: none; border: 0; border-top: 1px solid var(--gold-line); border-radius: 0; box-shadow: none; overflow: visible; } .pain-liste .pain::before { display: none; } .pain-liste .pain:hover { transform: none; box-shadow: none; } .pain-liste .pain:nth-child(n+3) { border-bottom: 1px solid var(--gold-line); } .pain .pn { font-family: "Bodoni 72", Didot, "Bodoni MT", "Times New Roman", serif; font-size: 30px; line-height: 1; color: var(--gold); text-align: center; } .pain-bild { width: 112px; height: 82px; background: center / 108% auto no-repeat; filter: brightness(.3) sepia(.6) saturate(1.6); opacity: .92; transition: transform 1s cubic-bezier(.2,.7,.2,1), opacity .6s; } .pain:hover .pain-bild { transform: scale(1.08); opacity: 1; } .pain-liste .pain p { font-family: var(--serif); font-size: clamp(18px, 1.7vw, 21px); line-height: 1.45; color: var(--ink); } .pain-liste .pain.reveal-init { transition-delay: calc(var(--i) * .12s); } /* Brief: Siegel oben, Zierecken, kursiver Auftakt, drei Gravuren */ section.band > .wrap.bridge.brief { max-width: 940px; padding: 92px 76px 70px; overflow: visible; } section.band > .wrap.bridge.brief::before { display: none; } .brief-siegel { position: absolute; top: -50px; left: 50%; width: 100px; height: 100px; transform: translateX(-50%) rotate(-8deg); z-index: 2; background: url("/bilder/wachssiegel-220.webp") center / contain no-repeat; background-image: image-set(url("/bilder/wachssiegel-220.webp") 1x, url("/bilder/wachssiegel-440.webp") 2x); filter: drop-shadow(0 12px 14px rgba(60,40,20,.35)); } .brief-ecken { position: absolute; inset: 22px; pointer-events: none; --e: rgba(156,118,51,.7); background: linear-gradient(var(--e), var(--e)) top left / 34px 1px no-repeat, linear-gradient(var(--e), var(--e)) top left / 1px 34px no-repeat, linear-gradient(var(--e), var(--e)) top right / 34px 1px no-repeat, linear-gradient(var(--e), var(--e)) top right / 1px 34px no-repeat, linear-gradient(var(--e), var(--e)) bottom left / 34px 1px no-repeat, linear-gradient(var(--e), var(--e)) bottom left / 1px 34px no-repeat, linear-gradient(var(--e), var(--e)) bottom right / 34px 1px no-repeat, linear-gradient(var(--e), var(--e)) bottom right / 1px 34px no-repeat; } .brief-auftakt { max-width: 36em; margin: 0 auto; } .brief-auftakt p { font-family: var(--serif); font-style: italic; font-size: clamp(19px, 2vw, 23px); line-height: 1.55; color: var(--ink-soft) !important; margin: 0 0 10px; } .brief .prolog-zier { margin: 26px auto 22px; } .brief .brief-lead { max-width: 34em; margin: 18px auto 0; font-size: 17.5px; line-height: 1.7; } .brief-drei { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 30px; margin: 46px 0 8px; text-align: center; } .bd-bild { display: block; height: 124px; margin: 0 auto 14px; background: center / contain no-repeat; filter: brightness(.3) sepia(.6) saturate(1.6); opacity: .92; transition: transform 1.2s cubic-bezier(.2,.7,.2,1); } .bd:hover .bd-bild { transform: scale(1.06) translateY(-3px); } .bd h3 { font-family: var(--serif); font-weight: 500; font-size: 23px; line-height: 1.2; color: var(--ink); margin: 0 0 8px; } .bd p { font-size: 15.5px !important; line-height: 1.62 !important; color: var(--ink-soft); margin: 0; } .bd.reveal-init { transition-delay: calc(var(--i) * .15s); } .brief .brief-schluss { margin-top: 38px; } .brief .brief-schluss em { font-family: var(--serif); font-size: 22px; color: var(--gold); } /* Goldfolie: die Schmuckwörter glänzen einmal auf, wenn sie ins Bild kommen */ #step1 h2 .script, .ebenen-pointe .script { background: linear-gradient(100deg, #86642a 0%, #9c7633 22%, #c9a560 38%, #fff3d2 50%, #c9a560 62%, #9c7633 78%, #86642a 100%); background-size: 300% 100%; background-position: 100% 0; -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; text-shadow: none; transition: background-position 2.2s cubic-bezier(.4,.1,.2,1); padding: 0 .08em; } #step1 .night h2 .script, .ebenen-pointe .script, header.hero h2 .script { background-image: linear-gradient(100deg, #c9a560 0%, #e2c486 30%, #fff3d2 48%, #ffffff 50%, #fff3d2 52%, #e2c486 70%, #c9a560 100%); filter: drop-shadow(0 0 16px rgba(226,196,134,.45)); } #step1 h2 .script.glanz, .ebenen-pointe .script.glanz { background-position: 0 0; } /* Überschriften enthüllen sich von oben nach unten */ #step1 .sec-head.reveal-init h2 { clip-path: inset(-20% 0 100% 0); transition: clip-path 1.5s cubic-bezier(.2,.7,.2,1) .1s; } #step1 .sec-head.in h2 { clip-path: inset(-20% -5% -30% -5%); } /* Lichtschein, der der Maus über den dunklen Abschnitten folgt (nur mit Maus) */ .lichtschein { position: absolute; inset: 0; z-index: 1; pointer-events: none; opacity: 0; transition: opacity .8s ease; mix-blend-mode: screen; background: radial-gradient(560px circle at var(--mx, 50%) var(--my, 30%), rgba(243,220,166,.075), transparent 62%); } .lichtschein.an { opacity: 1; } /* Siegel als Stempel an der Formularkarte, kräftigerer Goldrand */ .karten-siegel { position: absolute; top: -34px; right: -28px; z-index: 3; width: 88px; height: 88px; transform: rotate(12deg); pointer-events: none; background: url("/bilder/wachssiegel-220.webp") center / contain no-repeat; background-image: image-set(url("/bilder/wachssiegel-220.webp") 1x, url("/bilder/wachssiegel-440.webp") 2x); filter: drop-shadow(0 12px 14px rgba(0,0,0,.55)); animation: stempel .9s cubic-bezier(.3,1.4,.5,1) 2.4s backwards; } header.hero .card::before { background: conic-gradient(from var(--kranz), rgba(226,196,134,.32) 0deg, rgba(226,196,134,.32) 200deg, #c9a560 255deg, #fff3d2 288deg, #ffffff 296deg, #f3dca6 306deg, #c9a560 332deg, rgba(226,196,134,.32) 360deg); padding: 1.8px; } @keyframes kranzschein { 0%, 100% { box-shadow: 0 0 0 1px rgba(226,196,134,.2), 0 0 70px -12px rgba(226,196,134,.42), 0 40px 80px -36px rgba(0,0,0,.8); } 50% { box-shadow: 0 0 0 1px rgba(226,196,134,.3), 0 0 120px -6px rgba(226,196,134,.62), 0 40px 80px -36px rgba(0,0,0,.8); } } /* Denise: Porträt im Passepartout wie in einer Galerie, Unterschrift in Gold */ .about2 .pic { display: flex; align-items: center; justify-content: center; padding: 56px 48px; background: var(--paper-2) var(--plaster); } .about2 .pic::after { display: none; } .galerie { position: relative; margin: 0; width: min(100%, 500px); aspect-ratio: 1; padding: 22px; background: #fbf8f2; box-shadow: 0 0 0 1px rgba(156,118,51,.42), 0 0 0 8px #fbf8f2, 0 0 0 9px rgba(156,118,51,.22), 0 46px 80px -40px rgba(30,20,10,.55); } .about2 .pic .galerie img { position: static; display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 25%; } .galerie::after { content: ""; position: absolute; inset: 22px; padding: 1.5px; pointer-events: none; background: conic-gradient(from var(--kranz), rgba(226,196,134,.35) 0deg, rgba(226,196,134,.35) 200deg, #c9a560 260deg, #fff3d2 292deg, #e2c486 316deg, rgba(226,196,134,.35) 360deg); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask-composite: exclude; animation: kranz 10s linear infinite; } .denise-signatur { display: block; width: 188px; height: auto; margin: 26px 0 0; filter: brightness(.82) saturate(1.2) drop-shadow(0 1px 0 rgba(255,255,255,.4)); } /* Seitenabschluss: Siegel, Wortmarke, Goldlinie */ footer.fuss-start { border-top: none; background: var(--paper) var(--plaster); } .fuss-finale { text-align: center; padding: 76px 20px 34px; } .ff-siegel { display: block; width: 86px; height: 86px; margin: 0 auto 14px; transform: rotate(-6deg); background: url("/bilder/wachssiegel-220.webp") center / contain no-repeat; background-image: image-set(url("/bilder/wachssiegel-220.webp") 1x, url("/bilder/wachssiegel-440.webp") 2x); filter: drop-shadow(0 12px 14px rgba(60,40,20,.3)); } .ff-marke { font-family: var(--script); font-size: clamp(46px, 6vw, 68px); line-height: 1.1; color: var(--gold); } .fuss-finale .prolog-zier { margin: 16px auto 0; } footer.fuss-start .foot { border-top: 1px solid var(--line); padding-top: 22px; } /* Mitlaufender Knopf: am Desktop unten rechts, kleiner */ @media (min-width: 901px) { #floatcta { left: auto; right: 28px; bottom: 26px; transform: translateY(24px); font-size: 11px; padding: 14px 20px; } #floatcta.show { transform: none; } body.ende-sichtbar #floatcta.show { transform: translateY(24px); } } @media (max-width: 900px) { .pain-liste { gap: 0; } .pain-liste .pain:nth-child(3) { border-bottom: none; } .brief-drei { grid-template-columns: none; gap: 34px; } section.band > .wrap.bridge.brief { padding: 78px 26px 52px; } .brief-ecken { inset: 12px; } } @media (max-width: 620px) { .pain-liste .pain { grid-template-columns: 34px 70px minmax(0, 1fr); gap: 0 12px; padding: 24px 0; } .pain .pn { font-size: 24px; } .pain-bild { width: 70px; height: 54px; } .karten-siegel { top: -26px; right: -8px; width: 66px; height: 66px; } .about2 .pic { padding: 30px 20px; } .galerie { padding: 14px; } .galerie::after { inset: 14px; } .prolog { padding: 70px 0 64px; } } @media (prefers-reduced-motion: reduce) { #step1 .sec-head.reveal-init h2 { clip-path: none; transition: none; } #step1 h2 .script, .ebenen-pointe .script { transition: none; background-position: 50% 0; } .karten-siegel, .galerie::after { animation: none; } } /* Runde 9b: der Brief liegt auf dem nächtlichen Schreibtisch eines Sternkundigen (Samt, Messing, Kerzenlicht) */ .brueckenband { background: #020a18; } .brueckenband::after { content: ""; position: absolute; left: 0; right: 0; top: 50%; z-index: -2; width: 100%; aspect-ratio: 2400 / 1357; transform: translateY(-50%); pointer-events: none; background: url("/bilder/schreibtisch-2400.webp") center / cover no-repeat; -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 20%, #000 80%, transparent 100%); mask-image: linear-gradient(180deg, transparent 0, #000 20%, #000 80%, transparent 100%); } .brueckenband::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: linear-gradient(180deg, #020a18 0%, rgba(2,10,24,0) 18%, rgba(2,10,24,0) 82%, #020a18 100%), radial-gradient(60% 50% at 50% 50%, rgba(2,10,24,.35), transparent 70%); } .brueckenband .wasserrad { color: #e2c486; opacity: .07; } .brueckenband section.band > .wrap.bridge.brief, section.band.brueckenband > .wrap.bridge.brief { box-shadow: inset 0 0 0 9px var(--white), inset 0 0 0 10px rgba(156,118,51,.28), 0 60px 110px -30px rgba(0,0,0,.9), 0 0 120px -30px rgba(243,220,166,.28); } .brueckenband .brief-siegel { filter: drop-shadow(0 14px 16px rgba(0,0,0,.6)); } @media (max-width: 1100px) { .brueckenband::after { background-image: url("/bilder/schreibtisch-1400.webp"); width: 130%; left: -15%; } } @media (max-width: 760px) { .brueckenband::after { width: 300%; left: -100%; top: 0; transform: none; } } /* Runde 10: Häkchen werden Sterne, Inhaltsverzeichnis statt Knopf-Kästchen, Fragen im Briefstil, mitlaufender Knopf nur noch auf dem Handy */ .mail-perks span::before, .mail-rahmen .mail-perks span::before { content: "✦ "; color: #e2c486; font-size: .85em; } @media (min-width: 901px) { #floatcta { display: none !important; } } .cards.inhalt { display: block; position: relative; padding: 34px 38px 30px; background: var(--white) var(--plaster); box-shadow: 0 0 0 1px rgba(156,118,51,.4), inset 0 0 0 8px var(--white), inset 0 0 0 9px rgba(156,118,51,.22), 0 40px 70px -46px rgba(60,40,20,.55); } .iv-kopf { font-family: var(--script); font-size: 34px; line-height: 1; color: var(--gold); text-align: center; margin: 0 0 18px; } .cards.inhalt .mcard { display: flex; align-items: baseline; gap: 12px; padding: 9px 0; margin: 0; background: none; border: 0; border-radius: 0; box-shadow: none; font-family: var(--serif); font-size: 19px; color: var(--ink); transition: color .3s, transform .4s cubic-bezier(.2,.9,.3,1.4); } .cards.inhalt .mcard:hover { transform: translateX(4px); color: var(--gold-deep); background: none; border: 0; box-shadow: none; } .cards.inhalt .mcard::after { display: none; } .iv-nr { flex: none; width: 38px; font-family: "Bodoni 72", Didot, "Bodoni MT", "Times New Roman", serif; font-size: 16px; color: var(--gold); } .iv-titel { flex: none; } .iv-punkte { flex: 1; min-width: 20px; border-bottom: 1px dotted rgba(156,118,51,.55); transform: translateY(-5px); } .iv-stern { flex: none; color: var(--gold); font-size: 12px; } #fragen .faq { max-width: 760px; margin: 0 auto; padding: 30px 46px 26px; background: var(--white) var(--plaster); position: relative; box-shadow: 0 0 0 1px rgba(156,118,51,.4), inset 0 0 0 8px var(--white), inset 0 0 0 9px rgba(156,118,51,.22), 0 40px 70px -46px rgba(60,40,20,.55); } #fragen .faq::before { content: "✦"; position: absolute; top: -13px; left: 50%; transform: translateX(-50%); padding: 0 14px; background: var(--paper); color: var(--gold); font-size: 16px; line-height: 26px; } #fragen .faq-item summary { font-family: var(--serif); font-size: 21px; } #fragen .faq-item:last-child { border-bottom: 0; } @media (max-width: 620px) { .cards.inhalt { padding: 26px 20px 22px; } .cards.inhalt .mcard { font-size: 17px; } .iv-nr { width: 30px; } #fragen .faq { padding: 22px 20px 18px; margin-inline: 4px; } } @media (max-width: 760px) { .astrolab-rad .messing { background-image: url("/bilder/messingring-600.webp"); } } .cards.inhalt .mcard::before { display: none !important; } /* Runde 11 (technischer SEO-Block): lesbare Größen auf dem Handy, Goldfolie im Brief kräftiger */ #step1 .bridge h2 .script { background-image: linear-gradient(100deg, #7a5a22 0%, #8f6b2c 25%, #b38a43 42%, #d9bd82 50%, #b38a43 58%, #8f6b2c 75%, #7a5a22 100%); } @media (max-width: 760px) { .hero-systems { white-space: normal; font-size: 11px; line-height: 1.6; letter-spacing: .14em; } .night .field label, .night .datewrap .subl { font-size: 11.5px; } header.hero .microcopy { font-size: 12.5px; } .foot a { display: inline-block; padding: 12px 6px; } } /* ── SEO-Runde 11.10.2026: Systemzeile als Teil der H1, Rechenweg, Instagram ── */ header.hero h1.hero-title .hero-systems { display: block; line-height: 1.5; text-shadow: none; } .hs-trenn { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } .rechnung-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; max-width: 1180px; margin: 46px auto 0; } .rechnung-grid .rg { padding: 6px 26px 10px; border-left: 1px solid var(--gold-line); } .rechnung-grid .rg:first-child { border-left: none; } .rechnung-grid .rg h3 { font-family: var(--serif); font-weight: 500; font-size: 22px; color: var(--ink); margin: 0 0 10px; } .rechnung-grid .rg p { color: var(--ink-soft); font-size: 15.5px; line-height: 1.7; margin: 0; } .rechnung-schluss { max-width: 720px; margin: 42px auto 0; text-align: center; color: var(--ink-soft); font-style: italic; line-height: 1.75; } .about-insta { margin-top: 18px; color: var(--ink-soft); } .about-insta a { color: var(--gold); text-decoration: underline; text-underline-offset: 3px; } @media (max-width: 1100px) { .rechnung-grid { grid-template-columns: 1fr 1fr; gap: 30px 0; } .rechnung-grid .rg:nth-child(3) { border-left: none; } } @media (max-width: 620px) { .rechnung-grid { grid-template-columns: 1fr; gap: 0; margin-top: 30px; } .rechnung-grid .rg { border-left: none; border-top: 1px solid var(--gold-line); padding: 22px 4px; } .rechnung-grid .rg:first-child { border-top: none; } } /* Runde 12: Videogruß von Denise im Pop-up nach dem Eintragen */ #sent { overflow-y: auto; } #sent .cookie-card { padding-top: 26px; } #sent .cookie-card .st em { white-space: nowrap; } .gruss-pop { position: relative; margin: 0 auto 22px; width: min(250px, calc(44vh * 9 / 16), 100%); aspect-ratio: 9 / 16; border-radius: 14px; overflow: hidden; background: #0f0e22 url("/bilder/denise-gruss.jpg") center / cover no-repeat; box-shadow: 0 0 0 1px rgba(226,196,134,.55), 0 0 0 6px rgba(226,196,134,.08), 0 22px 50px -18px rgba(0,0,0,.7); } .gruss-pop video { display: block; width: 100%; height: 100%; object-fit: cover; cursor: pointer; } .gruss-pop::after { content: ""; position: absolute; inset: auto 0 0 0; height: 42%; pointer-events: none; background: linear-gradient(to top, rgba(10,9,22,.78), rgba(10,9,22,0)); } .gruss-zeile { position: absolute; left: 12px; right: 12px; bottom: 54px; z-index: 2; margin: 0 !important; pointer-events: none; font-family: var(--serif); font-size: 17px !important; line-height: 1.3 !important; color: #fff6e2; text-align: center; text-shadow: 0 1px 3px rgba(0,0,0,.85), 0 0 14px rgba(0,0,0,.6); opacity: 0; transition: opacity .2s ease; } .gruss-zeile.an { opacity: 1; } .gruss-ton { position: absolute; left: 50%; bottom: 14px; z-index: 3; transform: translateX(-50%); display: inline-flex; align-items: center; gap: 7px; padding: 8px 15px; border: 1px solid rgba(226,196,134,.75); border-radius: 999px; background: rgba(16,14,36,.72); color: #f3dfae; font-size: 12.5px; letter-spacing: .06em; white-space: nowrap; cursor: pointer; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); } .gruss-ton:hover { background: rgba(32,27,64,.85); } .gruss-ton[hidden] { display: none; } @media (max-height: 700px) { .gruss-pop { width: min(200px, calc(38vh * 9 / 16), 100%); margin-bottom: 16px; } } /* Runde 13: Versprechen im Hero, Denise an der Formularkarte, erster Bildschirm am Handy */ .hero-versprechen { margin-top: 14px; font-family: var(--serif); font-style: italic; font-size: clamp(17px, 4.2cqw, 21px); line-height: 1.45; color: #f3dca6; text-shadow: 0 1px 18px rgba(10,7,22,.95), 0 0 30px rgba(10,7,22,.8); text-wrap: balance; } .hero-copy > :nth-child(4) { animation-delay: 2.2s; } header.hero .card { padding-top: 54px; } .karte-denise { position: absolute; top: -42px; left: 50%; z-index: 3; width: 84px; height: 84px; margin-left: -42px; padding: 3px; border-radius: 50%; background: linear-gradient(140deg, #fff3d2, #e2c486 35%, #9c7a3c 70%, #e2c486); box-shadow: 0 0 0 5px rgba(12,10,28,.78), 0 14px 30px -8px rgba(0,0,0,.75), 0 0 42px -4px rgba(226,196,134,.6); animation: stempel .9s cubic-bezier(.3,1.4,.5,1) 2.1s backwards; } .karte-denise img { display: block; width: 100%; height: 100%; border-radius: 50%; object-fit: cover; } .kd-zeile { margin: 0 0 6px; text-align: center; font-family: var(--serif); font-style: italic; font-size: 16px; line-height: 1.2; color: #d6cde6; } .kd-zeile span { margin-left: 3px; font-family: var(--script); font-style: normal; font-size: 1.75em; color: #e2c486; text-shadow: 0 0 18px rgba(226,196,134,.45); } @media (max-width: 1100px) { .hero-in { row-gap: 60px; } } @media (max-width: 760px) { /* VORGABE VON DENISE, BITTE NICHT ÄNDERN: Am Handy zeigt der erste Bildschirm nur Titel und Kuppel, die Formularkarte kommt erst beim Scrollen. Wurde schon zweimal versehentlich wieder nach oben geholt. */ .hero-copy { min-height: calc(100svh - 96px); } header.hero .card { padding-top: 50px; } .hero-heute { display: none !important; } /* am Handy läge die Zeile über der Armillarsphäre; der Himmel heute steht auch im Bericht */ .karte-denise { width: 76px; height: 76px; top: -38px; margin-left: -38px; } } @media (prefers-reduced-motion: reduce) { .karte-denise { animation: none; } } header.hero .card h3, header.hero .card > .hint { text-align: center; } /* Runde 14: Herkunftsgruß an der Formularkarte, Sonnenzeichen leuchtet beim Eintippen auf */ .herkunft-gruss { margin: 0 0 4px; text-align: center; font-family: var(--serif); font-style: italic; font-size: 15.5px; line-height: 1.35; color: #f3dca6; } .zeichen-blick { margin: 10px 0 0; font-family: var(--serif); font-style: italic; font-size: 16.5px; line-height: 1.4; color: #e2c486; text-align: left; } .zeichen-blick .zb-glyph { display: inline-block; margin: 0 3px; font-family: var(--symbol); font-style: normal; font-size: 19px; color: #fff3d2; text-shadow: 0 0 10px rgba(243,220,166,.9), 0 0 24px rgba(226,196,134,.6); } .zeichen-blick.an { animation: zeichenAuf .9s cubic-bezier(.2,.7,.2,1) both; } .zeichen-blick.an .zb-glyph { animation: zeichenGlut 1.6s ease-out both; } @keyframes zeichenAuf { from { opacity: 0; transform: translateY(6px); filter: blur(3px); } } @keyframes zeichenGlut { 0% { text-shadow: 0 0 0 rgba(243,220,166,0); transform: scale(.6); } 40% { text-shadow: 0 0 22px #fff3d2, 0 0 46px rgba(226,196,134,.9); transform: scale(1.25); } 100% { transform: none; } } @media (prefers-reduced-motion: reduce) { .zeichen-blick.an, .zeichen-blick.an .zb-glyph { animation: none; } } @media (max-width: 760px) { header.hero .card .row3 { grid-template-columns: .74fr 1.5fr 1fr; gap: 8px; } header.hero .card .row3 select { padding-left: 11px; padding-right: 22px; background-position: right 7px center; font-size: 14.5px; } } /* Runde 15: Warteliste Liebesanalyse, Frage an Denise, Siegel für fertig Gelesenes, Instagram im Pop-up */ .wk-warte:hover { transform: none; } .wl-form { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 6px; } .wl-form[hidden], .wl-mail[hidden], .fb-form[hidden] { display: none !important; } .wl-mail { flex: 1 1 180px; min-width: 0; padding: 11px 13px; border-radius: 4px; border: 1px solid rgba(226,196,134,.3); background: rgba(10,9,22,.6); color: #f6f1e8; font: 14.5px var(--sans); } .wl-mail:focus { outline: none; border-color: #e2c486; box-shadow: 0 0 0 3px rgba(226,196,134,.18); } .wl-knopf { margin-top: 0; padding: 12px 16px; border: 0; border-radius: 2px; cursor: pointer; background: linear-gradient(135deg, #ecd29d, #c9a560); color: #1d1733; box-shadow: 0 10px 26px -12px rgba(226,196,134,.7); transition: filter .2s; } .wl-knopf:hover { filter: brightness(1.06); } .wl-knopf:disabled { opacity: .6; cursor: default; } .wl-info { font-family: var(--serif); font-style: italic; font-size: 16px; line-height: 1.45; color: #f3dca6; } .wl-info:empty { display: none; } .wk-warte.drauf { box-shadow: 0 0 0 1px rgba(243,220,166,.75), 0 0 46px -14px rgba(226,196,134,.55), 0 30px 60px -36px rgba(0,0,0,.9); } .fragebox { max-width: 640px !important; margin: 46px auto 10px !important; padding: 30px 28px 28px !important; text-align: center; border-radius: 8px; background: linear-gradient(180deg, rgba(28,27,56,.85), rgba(16,15,36,.92)); box-shadow: 0 0 0 1px rgba(226,196,134,.3), 0 30px 70px -34px rgba(0,0,0,.85); } .fragebox .script-eyebrow { font-size: clamp(30px, 3.2vw, 40px); line-height: 1.1; margin-bottom: 10px; } .fb-lead { margin: 0 auto 16px !important; max-width: 46ch; color: #d3cde0 !important; font-size: 15.5px !important; line-height: 1.6 !important; } .fb-form { display: flex; flex-direction: column; align-items: center; gap: 12px; } .fb-text { width: 100%; min-height: 92px; resize: vertical; padding: 13px 15px; border-radius: 4px; border: 1px solid rgba(226,196,134,.28); background: rgba(10,9,22,.6); color: #f6f1e8; font: 15.5px/1.55 var(--sans); } .fb-text::placeholder { color: #8a84a6; } .fb-text:focus { outline: none; border-color: #e2c486; box-shadow: 0 0 0 3px rgba(226,196,134,.18); } .fb-info { margin: 12px 0 0 !important; font-family: var(--serif); font-style: italic; font-size: 17px !important; color: #f3dca6 !important; } .fb-info:empty { display: none; } .vollendet { position: relative; z-index: 2; margin: 56px auto 10px; max-width: 520px; padding: 92px 30px 28px; text-align: center; border-radius: 8px; background: radial-gradient(80% 90% at 50% 0%, rgba(226,196,134,.16), rgba(18,17,41,0) 70%), #121129; box-shadow: 0 0 0 1px rgba(226,196,134,.32), 0 0 0 8px #0d0c20, 0 30px 70px -34px rgba(0,0,0,.9); } .vd-siegel { position: absolute; left: 50%; top: -30px; width: 108px; height: 108px; margin-left: -54px; background: url("/bilder/wachssiegel-220.webp") center / contain no-repeat; background-image: image-set(url("/bilder/wachssiegel-220.webp") 1x, url("/bilder/wachssiegel-440.webp") 2x); filter: drop-shadow(0 12px 16px rgba(0,0,0,.6)) drop-shadow(0 0 26px rgba(226,196,134,.45)); } .vollendet.neu .vd-siegel { animation: stempel 1s cubic-bezier(.3,1.4,.5,1) .2s backwards; } .vd-titel { margin: 0 0 8px !important; font-family: var(--serif); font-size: 25px !important; line-height: 1.25 !important; color: #f6f1e8 !important; } .vd-text { margin: 0 auto !important; max-width: 40ch; font-family: var(--serif); font-style: italic; font-size: 18px !important; line-height: 1.5 !important; color: #e2c486 !important; } .vd-name { margin: 10px 0 0 !important; font-family: var(--script); font-size: 40px !important; line-height: 1 !important; color: #e2c486 !important; } .sent-insta { display: inline-block; margin: -8px 0 22px; font-family: var(--serif); font-style: italic; font-size: 16px; color: #e2c486; text-decoration: none; border-bottom: 1px solid rgba(226,196,134,.35); padding-bottom: 2px; } .sent-insta:hover { color: #f3dca6; border-color: rgba(243,220,166,.8); } @media (prefers-reduced-motion: reduce) { .vollendet.neu .vd-siegel { animation: none; } } /* Runde 16: weniger Großbuchstaben im Hero, Hilfe zur Geburtszeit, echte Seiten zum Blättern, Aufklappen */ header.hero h1.hero-title .hero-systems { text-transform: none; font-family: var(--serif); font-style: italic; font-weight: 400; letter-spacing: .02em; font-size: clamp(16px, 1.5vw, 19px); color: #e2c486; white-space: normal; } .hero-tag { text-transform: none; letter-spacing: .01em; font-size: clamp(19px, 4.6cqw, 25px); line-height: 1.45; color: #f6f1e8; } .hero-tag em { letter-spacing: 0; } @media (max-width: 760px) { header.hero h1.hero-title .hero-systems { font-size: 15.5px; letter-spacing: .01em; line-height: 1.5; } .hero-tag { font-size: 20px; } } .zeit-hilfe { margin: 8px 0 0; } .zeit-hilfe summary { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; list-style: none; font-family: var(--serif); font-style: italic; font-size: 15.5px; color: #d6cde6; border-bottom: 1px dotted rgba(226,196,134,.5); padding-bottom: 1px; } .zeit-hilfe summary::-webkit-details-marker { display: none; } .zeit-hilfe summary::before { content: "?"; display: inline-grid; place-items: center; width: 17px; height: 17px; border-radius: 50%; font: 700 11px/1 var(--sans); font-style: normal; color: #1d1733; background: #e2c486; } .zeit-hilfe[open] summary { color: #f3dca6; } .zeit-hilfe p { margin: 8px 0 2px; font-size: 13.5px; line-height: 1.6; color: #c4bad8; } #beispiel .example-grid { align-items: center; } .blaetter { margin: 0; text-align: center; } .bl-stapel { position: relative; width: min(360px, 74vw); aspect-ratio: 760 / 1075; margin: 10px auto 0; perspective: 1700px; cursor: pointer; touch-action: pan-y; } .bl-seite { position: absolute; inset: 0; width: 100%; height: 100%; border-radius: 3px; object-fit: cover; transform-origin: 0% 50%; backface-visibility: hidden; z-index: calc(10 - var(--k, 0)); transform: translate(calc(var(--k, 0) * 9px), calc(var(--k, 0) * -7px)) rotate(calc(var(--k, 0) * 1.6deg)); filter: brightness(calc(1 - var(--k, 0) * .16)); opacity: calc(1 - max(0, var(--k, 0) - 2) * 1); box-shadow: 0 0 0 1px rgba(226,196,134,.32), 0 24px 50px -22px rgba(0,0,0,.85); transition: transform .65s cubic-bezier(.3,.7,.2,1), filter .65s, opacity .65s; } .bl-seite.vorn { box-shadow: 0 0 0 1px rgba(243,220,166,.55), 0 30px 70px -26px rgba(0,0,0,.9), 0 0 60px -24px rgba(226,196,134,.55); } .bl-seite.weg { z-index: 11; transform: rotateY(-118deg) translateX(-6%); opacity: 0; filter: brightness(.7); } .bl-leiste { display: flex; align-items: center; justify-content: center; gap: 14px; margin-top: 22px; } .bl-pfeil { width: 40px; height: 40px; border-radius: 50%; border: 1px solid rgba(226,196,134,.5); background: rgba(14,13,32,.6); color: #f3dca6; font: 22px/1 var(--serif); cursor: pointer; transition: background .25s, border-color .25s; } .bl-pfeil:hover { background: rgba(226,196,134,.14); border-color: #f3dca6; } .bl-zahl { min-width: 120px; font-family: var(--serif); font-style: italic; font-size: 17px; color: var(--ink-soft, #c4bad8); } .bl-zahl b { font-style: normal; font-weight: 500; color: #c9a560; } .bl-hinweis { margin: 10px auto 0 !important; max-width: 40ch; font-size: 12.5px !important; line-height: 1.5 !important; color: var(--ink-mute, #8a84a6) !important; } @media (prefers-reduced-motion: reduce) { .bl-seite { transition: none; } } .aufklapp { max-width: 1180px; margin: 30px auto 0; text-align: center; } .aufklapp > summary { display: inline-flex; align-items: center; gap: 12px; cursor: pointer; list-style: none; padding: 13px 22px; border-radius: 2px; font-family: var(--sans); font-size: 12px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: #8a6b2e; box-shadow: inset 0 0 0 1px rgba(201,165,96,.6); transition: background .25s; } .aufklapp > summary::-webkit-details-marker { display: none; } .aufklapp > summary:hover { background: rgba(201,165,96,.1); } .aufklapp .ak-zeichen { font: 400 20px/1 var(--serif); transition: transform .3s; } .aufklapp[open] .ak-zeichen { transform: rotate(45deg); } .aufklapp[open] > .rechnung-grid { animation: aufklappAuf .5s cubic-bezier(.2,.7,.2,1); } .aufklapp .rechnung-schluss { text-align: center; } @keyframes aufklappAuf { from { opacity: 0; transform: translateY(-8px); } } #beispiel .bl-pfeil { background: transparent; color: #8a6b2e; border-color: rgba(201,165,96,.75); } #beispiel .bl-pfeil:hover { background: rgba(201,165,96,.12); border-color: #8a6b2e; } #beispiel .bl-zahl { color: #5d566f; } #beispiel .bl-zahl b { color: #8a6b2e; } /* Runde 17: KI-Porträt von Denise an der Formularkarte, größer mit Mondschein (Galerie-Variante 5) */ .karte-denise { width: 108px; height: 108px; top: -54px; margin-left: -54px; box-shadow: 0 0 0 5px rgba(12,10,28,.72), 0 0 60px 6px rgba(243,220,166,.42), 0 0 120px 20px rgba(226,196,134,.2); } header.hero .card { padding-top: 66px; } @media (max-width: 1100px) { .hero-in { row-gap: 74px; } } @media (max-width: 760px) { .karte-denise { width: 100px; height: 100px; top: -50px; margin-left: -50px; } header.hero .card { padding-top: 62px; } } /* Runde 18: Brief je Sonnenzeichen, Heute für dich, Bauplan als App */ .zeichen-brief { position: relative; max-width: 620px; margin: 30px auto 6px; padding: 34px 34px 28px; text-align: left; border-radius: 4px; background: linear-gradient(180deg, #f8f2e6, #efe4cf); color: #2a2238; box-shadow: 0 0 0 1px rgba(201,165,96,.55), 0 0 0 7px rgba(10,9,22,.5), 0 30px 70px -30px rgba(0,0,0,.9); } .zb-zeichen { position: absolute; top: 18px; right: 24px; font-family: var(--symbol); font-size: 40px; line-height: 1; color: rgba(138,107,46,.35); } .zb-anrede { margin: 0 0 12px !important; font-family: var(--script); font-size: 38px !important; line-height: 1.1 !important; color: #8a6b2e !important; } .zb-text { margin: 0 !important; font-family: var(--serif); font-size: 20px !important; line-height: 1.6 !important; color: #2a2238 !important; } .zb-gruss { margin: 16px 0 0 !important; text-align: right; font-family: var(--serif); font-style: italic; font-size: 17px !important; color: #5d566f !important; } .zb-gruss span { margin-left: 6px; font-family: var(--script); font-style: normal; font-size: 34px; color: #8a6b2e; } @media (max-width: 620px) { .zeichen-brief { margin: 24px 6px 4px; padding: 28px 22px 22px; } .zb-text { font-size: 18.5px !important; } } .report-fuer-dich { margin: 6px auto 0 !important; max-width: 52ch; text-align: center; font-family: var(--serif); font-style: italic; font-size: 17px !important; line-height: 1.5 !important; color: #f3dca6 !important; } .wk-app:hover { transform: none; } .app-hilfe { margin-top: 4px; } .app-hilfe summary { cursor: pointer; list-style: none; } .app-hilfe summary::-webkit-details-marker { display: none; } .app-hilfe p { margin: 10px 0 0 !important; font-size: 14.5px !important; line-height: 1.6 !important; color: #d3cde0 !important; } /* Runde 20: Tempo. Große Hintergrundbilder weiter unten laden erst, wenn ihr Abschnitt in Scrollnähe ist (Klasse .nah setzt ein IntersectionObserver in index.html, ohne ihn bleibt alles wie vorher). */ html.bilder-spaet #step1 > section:not(.nah) .himmelbild, html.bilder-spaet #step1 > section:not(.nah) .astrolab-rad .messing, html.bilder-spaet #step1 > section:not(.nah) .final-bild, html.bilder-spaet #step1 > section:not(.nah) .pain-bild, html.bilder-spaet #step1 > section:not(.nah) .bd-bild { background-image: none !important; } html.bilder-spaet #step1 > section.brueckenband:not(.nah)::after { background-image: none !important; } /* Runde 21: Bauplan anhören */ .hoeren-box { position: relative; z-index: 3; margin: -8px auto 24px; max-width: 420px; text-align: center; } .hb-oben span { margin-right: 4px; } .hb-klein { margin: 8px 0 0 !important; font-size: 12.5px !important; color: #a69cbf !important; } .hoeren-box audio { display: block; width: 100%; margin: 12px 0 0; } .hoeren-box audio[hidden] { display: none; } .hb-info { margin: 8px 0 0 !important; font-family: var(--serif); font-style: italic; font-size: 15.5px !important; color: #f3dca6 !important; } .hb-info:empty { display: none; } /* Runde 23: Erklärfilm direkt nach dem ersten Bildschirm */ .film-band { padding-top: clamp(56px, 8vw, 96px); padding-bottom: clamp(48px, 7vw, 84px); } .film-band .sec-head { margin-bottom: 30px; } .erklaerfilm { position: relative; margin: 0 auto; width: min(100%, 1040px); aspect-ratio: 16 / 9; border-radius: 10px; overflow: hidden; background: #121129; box-shadow: 0 0 0 1px rgba(226,196,134,.45), 0 0 0 8px rgba(10,9,22,.6), 0 0 0 9px rgba(226,196,134,.16), 0 40px 90px -30px rgba(0,0,0,.9), 0 0 90px -30px rgba(226,196,134,.45); } .erklaerfilm.hoch { aspect-ratio: 9 / 16; width: min(100%, 420px); max-height: 82svh; } .erklaerfilm.hoch video { object-fit: cover; } .erklaerfilm video { display: block; width: 100%; height: 100%; object-fit: contain; background: #121129; } .film-ton { position: absolute; left: 50%; bottom: 18px; z-index: 2; transform: translateX(-50%); display: inline-flex; align-items: center; gap: 8px; padding: 11px 18px; border: 0; border-radius: 999px; cursor: pointer; background: rgba(16,14,36,.78); color: #f3dca6; font-family: var(--sans); font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; box-shadow: inset 0 0 0 1px rgba(226,196,134,.7); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); } .erklaerfilm:not(.hoch) .film-ton { bottom: auto; top: 18px; left: auto; right: 18px; transform: none; } .film-ton:hover { background: rgba(32,27,64,.9); } .film-ton[hidden] { display: none; } .film-band .midcta { margin-top: 30px; text-align: center; } .film-unter { margin: 12px 0 0 !important; text-align: center; font-family: var(--serif); font-style: italic; font-size: 17px !important; color: #e2c486 !important; } .erklaerfilm .film-ton, .erklaerfilm:not(.hoch) .film-ton { top: 14px; right: 14px; bottom: auto; left: auto; transform: none; } html.film-cta-da #floatcta { opacity: 0 !important; pointer-events: none !important; transform: translateY(20px); } /* Runde 24: Film und "Kennst du das?" in einem Abschnitt */ .film-raster { display: grid; grid-template-columns: 1fr; grid-template-areas: "kopf" "film" "lead" "aktion"; gap: 26px; justify-items: center; text-align: center; } .film-kopf { grid-area: kopf; } .film-raster .erklaerfilm { grid-area: film; } .film-lead { grid-area: lead; } .film-aktion { grid-area: aktion; } .film-kopf h2 { margin: 0; } .film-lead { margin: 0 auto; max-width: 36em; gap: 14px; } .film-lead p { font-size: 17px; line-height: 1.7; color: #d6cde6; } .film-lead p.strong { color: #f6f1e8; font-weight: 600; } .film-aktion .btn { margin: 0; } @media (min-width: 1000px) { .film-raster { grid-template-columns: minmax(0, .9fr) minmax(0, 1.25fr); grid-template-areas: "kopf film" "lead film" "aktion film"; grid-template-rows: auto auto 1fr; column-gap: clamp(40px, 5vw, 80px); row-gap: 22px; align-items: start; justify-items: start; text-align: left; } .film-raster .erklaerfilm { align-self: center; width: 100%; } .film-kopf { align-self: end; } .film-kopf .script-eyebrow { text-align: left; } .film-lead { margin: 0; padding-left: 20px; border-left: 1px solid rgba(226,196,134,.45); } .film-aktion { align-self: start; } .film-aktion .film-unter { text-align: left; } } @media (min-width: 1000px) { .film-band .wrap.film-raster { max-width: 1280px; grid-template-columns: minmax(0, .85fr) minmax(0, 1.35fr); } .film-kopf h2 { font-size: clamp(34px, 3.1vw, 48px); line-height: 1.12; } } /* Runde 25: Aha-Momente. Mondphase, Erkennst du dich?, Deckblatt im Mail-Kasten, Du und deine Freundin, Atem im Ritual, roter Faden */ .g-mond { display: flex; align-items: flex-start; justify-content: center; gap: 12px; max-width: 46ch; margin: 14px auto 0 !important; text-align: left; font-family: var(--serif); font-style: italic; font-size: 17.5px !important; line-height: 1.5 !important; color: #e8dfef !important; } .g-mond b { font-style: normal; font-weight: 500; color: #f3dca6; } .gm-mond { flex: none; width: 22px; height: 22px; margin-top: 3px; border-radius: 50%; position: relative; overflow: hidden; background: radial-gradient(circle at 50% 50%, #fff3d2 0 60%, #e2c486 100%); box-shadow: 0 0 14px rgba(243,220,166,.7); } .gm-mond::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: #1a1838; transform: translateX(calc(var(--hell) * 105%)); } .spiegel { margin: 30px auto 26px; max-width: 560px; text-align: center; } .spiegel .script-eyebrow { font-size: clamp(30px, 3.4vw, 40px); margin-bottom: 6px; } .sp-lead { margin: 0 0 16px !important; color: #c4bad8 !important; font-size: 15px !important; } .sp-satz { margin: 0 0 12px; padding: 16px 18px 14px; border-radius: 6px; text-align: left; background: rgba(16,15,36,.72); box-shadow: 0 0 0 1px rgba(226,196,134,.28); transition: box-shadow .35s, background .35s, opacity .35s; } .sp-satz p { margin: 0 0 12px !important; font-family: var(--serif); font-size: 19px !important; line-height: 1.45 !important; color: #f6f1e8 !important; } .sp-knoepfe { display: flex; gap: 8px; flex-wrap: wrap; } .sp-knoepfe button { padding: 9px 14px; border: 0; border-radius: 999px; cursor: pointer; font-family: var(--sans); font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: #f3dca6; background: transparent; box-shadow: inset 0 0 0 1px rgba(226,196,134,.55); transition: background .25s, color .25s; } .sp-knoepfe button[data-a="ja"]:hover { background: rgba(226,196,134,.14); } .sp-satz.beantwortet button { cursor: default; opacity: .45; } .sp-satz.beantwortet button.gewaehlt { opacity: 1; background: linear-gradient(135deg, #ecd29d, #c9a560); color: #1d1733; box-shadow: none; } .sp-satz.ja { box-shadow: 0 0 0 1px rgba(243,220,166,.75), 0 0 40px -14px rgba(226,196,134,.7); } .sp-satz.nein { opacity: .7; } .sp-fazit { margin: 14px 0 0 !important; font-family: var(--serif); font-style: italic; font-size: 18px !important; color: #f3dca6 !important; } .sp-fazit:empty { display: none; } .mail-deck { position: relative; width: 112px; aspect-ratio: 210 / 297; margin: 0 auto 8px; border-radius: 3px; background: #0b0a1a center / cover no-repeat; container-type: inline-size; transform: rotate(-3deg); box-shadow: 0 0 0 1px rgba(226,196,134,.4), 10px 18px 30px -12px rgba(0,0,0,.85), 0 0 40px -12px rgba(226,196,134,.5); } .md-titel { position: absolute; left: 0; right: 0; top: 9.4%; font-family: var(--serif); font-size: 5.6cqw; letter-spacing: .1em; text-transform: uppercase; color: #f6f1e8; text-align: center; white-space: nowrap; } .md-name { position: absolute; left: 0; right: 0; top: 14.6%; font-family: var(--script); font-size: 15cqw; line-height: 1; color: #e2c486; text-align: center; } .md-marke { position: absolute; left: 0; right: 0; bottom: 6%; font-family: var(--script); font-size: 8cqw; color: #e2c486; text-align: center; } .md-text { margin: 0 0 12px !important; text-align: center; font-family: var(--serif); font-style: italic; font-size: 15px !important; color: #f3dca6 !important; } .du-und { margin: 26px auto; max-width: 560px; padding: 22px 22px 16px; border-radius: 6px; text-align: center; background: radial-gradient(90% 100% at 50% 0%, rgba(226,196,134,.14), rgba(16,15,36,.85) 70%); box-shadow: 0 0 0 1px rgba(226,196,134,.4); } .du-und .script-eyebrow { font-size: clamp(30px, 3.4vw, 40px); margin-bottom: 8px; } .du-und p { margin: 0 0 8px !important; font-family: var(--serif); font-size: 18px !important; line-height: 1.5 !important; color: #f6f1e8 !important; } .atem { display: flex; flex-direction: column; align-items: center; gap: 12px; margin: 18px auto 0; opacity: 0; transition: opacity .8s ease; } .atem.an { opacity: 1; } .atem-ring { width: 46px; height: 46px; border-radius: 50%; box-shadow: 0 0 0 1px rgba(243,220,166,.75), 0 0 30px rgba(226,196,134,.35) inset, 0 0 24px rgba(226,196,134,.3); transform: scale(.75); transition: transform 1.7s ease-in-out, box-shadow 1.7s ease-in-out; } .atem.ein .atem-ring { transform: scale(1.35); box-shadow: 0 0 0 1px rgba(255,243,210,.95), 0 0 40px rgba(243,220,166,.5) inset, 0 0 46px rgba(226,196,134,.6); } .atem-text { font-family: var(--serif); font-style: italic; font-size: 17px; color: #f3dca6; min-height: 1.4em; } .roter-faden { position: relative; margin: 6px auto 0; max-width: 620px; text-align: center; opacity: 0; transform: translateY(10px); transition: opacity .9s ease .3s, transform .9s ease .3s; } .roter-faden.an { opacity: 1; transform: none; } .rf-linie { display: block; height: 2px; margin: 0 auto 14px; width: 0; border-radius: 2px; background: linear-gradient(90deg, transparent, #c9a560 15%, #fff3d2 50%, #c9a560 85%, transparent); box-shadow: 0 0 14px rgba(226,196,134,.7); transition: width 1.6s cubic-bezier(.2,.7,.2,1); } .roter-faden.an .rf-linie { width: 92%; } .rf-titel { margin: 0 0 4px !important; font-family: var(--script); font-size: 34px !important; line-height: 1.1 !important; color: #e2c486 !important; } .rf-text { margin: 0 !important; font-family: var(--serif); font-size: 20px !important; line-height: 1.5 !important; color: #f6f1e8 !important; } .wk-teilen-box { display: flex; flex-direction: column; gap: 10px; } .wk-teilen-box .wk { flex: 1; } .mit-himmel { display: flex; gap: 9px; align-items: flex-start; padding: 0 4px; text-align: left; font-size: 13px; line-height: 1.5; color: #c4bad8; cursor: pointer; } .mit-himmel input { flex: none; width: 17px; height: 17px; margin: 1px 0 0; accent-color: #c9a560; } @media (prefers-reduced-motion: reduce) { .atem-ring, .rf-linie, .roter-faden { transition: none; } } /* Runde 26: "Kennst du das?" bleibt wie vorher, der Film steht nur daneben */ .film-prolog .film-raster { display: grid; grid-template-columns: 1fr; grid-template-areas: "text" "film"; gap: 34px; justify-items: center; text-align: center; } .film-prolog .film-text { grid-area: text; } .film-prolog .erklaerfilm { grid-area: film; } @media (min-width: 1000px) { .film-prolog .wrap.film-raster { max-width: 1280px; grid-template-columns: minmax(0, .85fr) minmax(0, 1.25fr); grid-template-areas: "text film"; column-gap: clamp(40px, 5vw, 80px); align-items: center; text-align: left; justify-items: start; } .film-prolog .erklaerfilm { width: 100%; } .film-prolog .prolog-zier { justify-content: flex-start; } .film-prolog .herolead { margin: 0; } } /* Runde 27: drei Gedanken statt vier, Instagram mit Logo im Pop-up */ .pain-liste { grid-template-columns: 1fr !important; max-width: 760px; } .pain-liste .pain:last-child { border-bottom: 1px solid var(--gold-line); } .ig-knopf { display: inline-flex !important; align-items: center; gap: 12px; margin: -6px auto 22px !important; padding: 10px 18px 10px 12px !important; border: 0 !important; border-radius: 999px; text-align: left; text-decoration: none; background: rgba(226,196,134,.08); box-shadow: inset 0 0 0 1px rgba(226,196,134,.45); } .ig-knopf:hover { background: rgba(226,196,134,.15); } .ig-knopf span { display: flex; flex-direction: column; line-height: 1.25; } .ig-knopf b { font-family: var(--sans); font-style: normal; font-size: 14px; font-weight: 700; color: #f6f1e8; } .ig-knopf small { font-family: var(--serif); font-style: italic; font-size: 14.5px; color: #e2c486; } .ig-knopf .ig-logo { flex: none; filter: drop-shadow(0 6px 12px rgba(214,36,159,.35)); } /* Überraschungen beim Wiederkommen (11.10.2026) */ .ue-hinweis, .ue-karte { position: relative; max-width: 620px; margin: 26px auto; padding: 22px 22px 20px; text-align: center; border-radius: 18px; border: 1px solid rgba(226,196,134,.38); background: radial-gradient(120% 140% at 50% 0%, rgba(226,196,134,.13), rgba(14,12,30,.0) 70%), rgba(14,12,30,.55); } .ue-stern { display: block; font-size: 22px; color: #e2c486; margin-bottom: 4px; animation: ue-funkeln 2.6s ease-in-out infinite; } .ue-titel { margin: 0 0 6px !important; font-family: var(--script); font-size: 30px !important; line-height: 1.15 !important; color: #e2c486 !important; } .ue-text { margin: 0 auto !important; max-width: 46ch; font-size: 16px; line-height: 1.55; } .ue-naechste { margin: 12px auto 0 !important; font-family: var(--serif); font-style: italic; color: #f3dca6; font-size: 15px; } .ue-knoepfe { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-top: 16px; } .ue-geschenk { display: block; width: 38px; height: 38px; margin: 0 auto 6px; border-radius: 50%; background: radial-gradient(circle at 50% 50%, #fff3d2 0 18%, #e2c486 19% 34%, rgba(226,196,134,.25) 35% 100%); box-shadow: 0 0 26px rgba(226,196,134,.55); animation: ue-funkeln 2.6s ease-in-out infinite; } @keyframes ue-funkeln { 0%, 100% { opacity: .75; transform: scale(.94); } 50% { opacity: 1; transform: scale(1.06); } } .mondkalender { max-width: 620px; margin: 30px auto 6px; padding: 22px 20px 20px; border-radius: 18px; border: 1px solid rgba(226,196,134,.28); background: rgba(14,12,30,.5); text-align: center; } .mondkalender.neu { border-color: rgba(226,196,134,.6); box-shadow: 0 0 34px rgba(226,196,134,.16); } .mk-neu { margin: 0 0 2px !important; font-family: var(--serif); font-style: italic; color: #f3dca6; font-size: 15px; } .mk-titel { margin: 0 0 14px !important; font-family: var(--script); font-size: 32px !important; line-height: 1.1 !important; color: #e2c486 !important; } .mk-liste { list-style: none; margin: 0 0 16px; padding: 0; text-align: left; } .mk-liste li { display: flex; gap: 14px; align-items: flex-start; padding: 12px 2px; border-top: 1px solid rgba(226,196,134,.16); } .mk-liste li:first-child { border-top: 0; } .mk-mond { flex: 0 0 26px; height: 26px; margin-top: 2px; border-radius: 50%; } .mk-mond.voll { background: radial-gradient(circle at 40% 38%, #fff8e6, #e2c486 70%); box-shadow: 0 0 14px rgba(243,220,166,.55); } .mk-mond.neu { background: #0e0c1e; box-shadow: inset 0 0 0 1.5px rgba(226,196,134,.75); } .mk-inhalt { display: flex; flex-direction: column; gap: 2px; } .mk-inhalt b { font-family: var(--serif); font-size: 18px; color: #f3dca6; font-weight: 600; } .mk-datum { font-size: 13px; letter-spacing: .02em; opacity: .75; } .mk-satz { font-size: 15px; line-height: 1.5; margin-top: 2px; } @media (prefers-reduced-motion: reduce) { .ue-stern, .ue-geschenk { animation: none; } } /* Aus dem Inhalt: Kapitel antippen schlägt die Seite im Stapel auf (11.10.2026) */ .cards.inhalt .mcard { cursor: pointer; -webkit-tap-highlight-color: transparent; } .cards.inhalt .mcard.aktiv { color: var(--gold-deep); } .cards.inhalt .mcard.aktiv .iv-punkte { border-bottom-style: solid; border-bottom-color: var(--gold); } .cards.inhalt .mcard.aktiv .iv-stern { transform: scale(1.35); } .iv-stern { transition: transform .3s ease; } .iv-hinweis { text-align: center; margin: -10px 0 12px !important; font-family: var(--serif); font-style: italic; font-size: 15px; color: var(--ink-mute, #7a6a58); } /* Brief je Sonnenzeichen: dunkles Briefpapier statt Weiß, auf der Nachtseite blendete das helle Blatt (11.10.2026) */ .zeichen-brief { background: radial-gradient(120% 90% at 50% 0%, rgba(226,196,134,.10), rgba(226,196,134,0) 60%), linear-gradient(180deg, #1f1a36, #17132b); color: #efe6d2; box-shadow: 0 0 0 1px rgba(226,196,134,.5), 0 0 0 7px rgba(10,9,22,.55), 0 0 0 8px rgba(226,196,134,.18), 0 30px 60px -30px rgba(0,0,0,.8); } .zb-zeichen { color: rgba(226,196,134,.28); } .zb-anrede { color: #e2c486 !important; } .zb-text { color: #ece3cf !important; } .zb-gruss { color: #b9afcc !important; } .zb-gruss span { color: #e2c486; } /* Kein einzelnes Wort allein in der letzten Zeile (zentrierte Texte gleicht erlebnis.js aus) */ p, li, figcaption, summary, blockquote, dd, .mail-sub, .seal-sub, .seal-text, .wk-text { text-wrap: pretty; } @media (max-width: 620px) { .bericht-leiste .btn { width: min(300px, 100%) !important; justify-content: center; } } /* „Erkennst du dich?“ unter den Symbolen, Vorschau und Mailkarte wieder nebeneinander (11.10.2026) */ .spiegel { max-width: 1060px; margin: 34px auto 44px; } .sp-reihe { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; text-align: left; } .sp-satz { position: relative; display: flex; flex-direction: column; margin: 0; padding: 30px 22px 20px; border-radius: 10px; background: radial-gradient(120% 80% at 50% 0%, rgba(226,196,134,.12), rgba(226,196,134,0) 62%), linear-gradient(180deg, rgba(28,26,58,.86), rgba(14,13,32,.9)); box-shadow: 0 0 0 1px rgba(226,196,134,.32), 0 24px 50px -30px rgba(0,0,0,.9); transition: box-shadow .35s, transform .35s, opacity .35s; } .sp-satz:hover { transform: translateY(-3px); } .sp-nr { position: absolute; top: -13px; left: 50%; transform: translateX(-50%); min-width: 26px; padding: 0 10px; line-height: 26px; border-radius: 999px; text-align: center; font-family: "Bodoni 72", Didot, "Bodoni MT", "Times New Roman", serif; font-size: 13px; color: #1d1733; background: linear-gradient(135deg, #ecd29d, #c9a560); } .sp-satz p { flex: 1; text-align: center; font-style: italic; } .sp-knoepfe { justify-content: center; } .sp-satz.ja { box-shadow: 0 0 0 1px rgba(243,220,166,.85), 0 0 46px -12px rgba(226,196,134,.75); } .sp-fazit { text-align: center; } @media (max-width: 780px) { .spiegel { margin: 26px -16px 30px; } .spiegel .script-eyebrow, .sp-lead, .sp-fazit { padding: 0 16px; } .sp-reihe { display: flex; gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 16px 16px 10px; scrollbar-width: none; -webkit-overflow-scrolling: touch; } .sp-reihe::-webkit-scrollbar { display: none; } .sp-satz { flex: 0 0 82%; scroll-snap-align: center; } .sp-satz:hover { transform: none; } } /* Am Handy zuerst die Mailkarte, dann die lange Vorschau mit dem Siegel */ @media (max-width: 780px) { .glimpse-cols .mail-rahmen { order: -1; margin-top: 0; } .glimpse-cols .mail-rahmen .mailcard { margin-top: 0; } .glimpse-cols .g-left { margin-top: 26px; } } /* Überraschungen oben unter der Knopfleiste (11.10.2026) */ #step3 .ue-hinweis, #step3 .ue-karte, #step3 .mondkalender.neu { margin: 6px auto 30px; } .ue-karte.neu, .ue-hinweis { border-color: rgba(243,220,166,.7); box-shadow: 0 0 0 1px rgba(226,196,134,.25), 0 0 60px -18px rgba(226,196,134,.75); } .ue-hinweis .ue-titel { font-size: 32px !important; } .ue-info { margin: 10px auto 0 !important; max-width: 44ch; font-family: var(--serif); font-style: italic; font-size: 15px; color: #f3dca6; word-break: break-word; } .ue-info:empty { display: none; } .ue-karte .ue-naechste { margin-top: 16px !important; } .mondkalender .ue-geschenk { margin-bottom: 8px; } /* Bauplan anhören: am Desktop liegt die Knopfleiste über dem Deckblatt, der Player schwebt deshalb als kleines Fenster darunter (11.10.2026) */ .hoeren-box { padding: 16px 18px 12px; border-radius: 14px; background: rgba(14,12,30,.9); box-shadow: 0 0 0 1px rgba(226,196,134,.38), 0 24px 60px -24px rgba(0,0,0,.9); } .hoeren-box[hidden] { display: none; } .hb-zu { position: absolute; top: 6px; right: 8px; width: 30px; height: 30px; border: 0; border-radius: 50%; background: transparent; color: #e2c486; font-size: 22px; line-height: 1; cursor: pointer; } .hb-zu:hover { background: rgba(226,196,134,.12); } .hoeren-box audio { margin-top: 18px; } @media (min-width: 901px) { #step3 .hoeren-box { position: absolute; z-index: 7; top: 84px; right: max(4vw, calc(50% - 680px)); width: 400px; margin: 0; -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); } /* Überraschungen oben: unter der schwebenden Leiste beginnen (flow-root, sonst schiebt der Abstand die Leiste mit) */ #step3 > .bericht-wrap { display: flow-root; } #step3 > .bericht-wrap > .ue-hinweis, #step3 > .bericht-wrap > .ue-karte, #step3 > .bericht-wrap > .mondkalender { margin-top: 116px; margin-bottom: 0; } } /* Dritte Überraschung: Deine Karte für heute (11.10.2026) */ .tageskarte { max-width: 620px; margin: 6px auto 30px; padding: 24px 20px 22px; border-radius: 18px; text-align: center; border: 1px solid rgba(226,196,134,.28); background: rgba(14,12,30,.5); } .tageskarte.neu { border-color: rgba(243,220,166,.7); box-shadow: 0 0 0 1px rgba(226,196,134,.25), 0 0 60px -18px rgba(226,196,134,.75); } .tgk-lead { margin: -6px auto 18px !important; max-width: 42ch; font-size: 15.5px; line-height: 1.55; color: #d3cde0; } .tgk-karte { display: block; width: min(300px, 86%); aspect-ratio: 5 / 7.4; margin: 0 auto; padding: 0; border: 0; background: none; cursor: pointer; perspective: 1400px; font: inherit; color: inherit; } .tgk-karte.offen { cursor: default; } .tgk-innen { position: relative; display: block; width: 100%; height: 100%; transform-style: preserve-3d; transition: transform 1s cubic-bezier(.3,.7,.2,1); } .tgk-karte.offen .tgk-innen { transform: rotateY(180deg); } .tgk-rueck, .tgk-vorn { position: absolute; inset: 0; border-radius: 14px; -webkit-backface-visibility: hidden; backface-visibility: hidden; overflow: hidden; } .tgk-rueck { display: grid; place-items: center; background: radial-gradient(circle at 50% 50%, rgba(226,196,134,.22) 0 16%, transparent 17%), repeating-radial-gradient(circle at 50% 50%, transparent 0 22px, rgba(226,196,134,.12) 23px 24px), linear-gradient(160deg, #221c40, #120f26); box-shadow: inset 0 0 0 1px rgba(226,196,134,.7), inset 0 0 0 8px #15122b, inset 0 0 0 9px rgba(226,196,134,.35), 0 26px 60px -24px rgba(0,0,0,.95); } .tgk-stern { font-size: 44px; color: #f3dca6; text-shadow: 0 0 24px rgba(243,220,166,.8); animation: ue-funkeln 2.6s ease-in-out infinite; } .tgk-karte:not(.offen):hover .tgk-innen { transform: translateY(-4px) rotateY(8deg); } .tgk-vorn { transform: rotateY(180deg); display: flex; flex-direction: column; justify-content: center; gap: 14px; padding: 26px 22px; background: radial-gradient(120% 70% at 50% 0%, rgba(226,196,134,.16), transparent 60%), linear-gradient(180deg, #1f1a36, #15122a); box-shadow: inset 0 0 0 1px rgba(226,196,134,.75), inset 0 0 0 8px #17132b, inset 0 0 0 9px rgba(226,196,134,.3), 0 26px 60px -24px rgba(0,0,0,.95); } .tgk-kapitel { font-family: var(--serif); font-style: italic; font-size: 15px; color: #e2c486; } .tgk-satz { font-family: var(--serif); font-size: 21px; line-height: 1.4; color: #f6f1e8; text-wrap: balance; } .tgk-impuls { display: block; padding-top: 12px; border-top: 1px solid rgba(226,196,134,.25); font-size: 14px; line-height: 1.5; color: #d3cde0; text-wrap: balance; } .tgk-impuls b { display: block; margin-bottom: 4px; font-family: var(--serif); font-style: italic; font-weight: 400; font-size: 14px; color: #e2c486; } .tgk-morgen { margin: 16px 0 0 !important; font-family: var(--serif); font-style: italic; color: #f3dca6; font-size: 15px; } @media (min-width: 901px) { #step3 > .bericht-wrap > .tageskarte { margin-top: 116px; margin-bottom: 0; } } @media (prefers-reduced-motion: reduce) { .tgk-innen { transition: none; } .tgk-stern { animation: none; } } /* Karte für heute als Reise über 180 Karten: Fortschritt, Kartennummer, Archiv; Karte wächst mit dem Text */ .tgk-fortschritt { margin: -6px 0 8px !important; font-family: var(--serif); font-style: italic; font-size: 15px; color: #e2c486; } .tgk-balken { width: min(260px, 70%); height: 3px; margin: 0 auto 16px; border-radius: 3px; background: rgba(226,196,134,.18); overflow: hidden; } .tgk-balken span { display: block; height: 100%; background: linear-gradient(90deg, #c9a560, #f3dca6); transition: width .8s ease; } .tgk-karte { aspect-ratio: auto; } .tgk-innen { display: grid; height: auto; } .tgk-rueck, .tgk-vorn { position: relative; inset: auto; grid-area: 1 / 1; min-height: 400px; } .tgk-rueck { align-content: center; justify-items: center; gap: 14px; } .tgk-rnr { font-family: "Bodoni 72", Didot, "Bodoni MT", "Times New Roman", serif; font-size: 15px; letter-spacing: .1em; color: rgba(243,220,166,.75); } .tgk-archiv { margin: 22px auto 0; max-width: 520px; text-align: left; } .tgk-archiv summary { cursor: pointer; list-style: none; text-align: center; font-family: var(--serif); font-style: italic; color: #e2c486; font-size: 15.5px; } .tgk-archiv summary::-webkit-details-marker { display: none; } .tgk-archiv ol { list-style: none; margin: 14px 0 0; padding: 0; max-height: 420px; overflow-y: auto; } .tgk-archiv li { display: flex; gap: 12px; padding: 12px 4px; border-top: 1px solid rgba(226,196,134,.16); } .tgk-archiv li > span:last-child { display: flex; flex-direction: column; gap: 6px; } .tgk-a-nr { flex: 0 0 34px; font-family: "Bodoni 72", Didot, "Bodoni MT", "Times New Roman", serif; color: #e2c486; font-size: 15px; } .tgk-archiv .tgk-satz { font-size: 16px; } .tgk-archiv .tgk-impuls { font-size: 13.5px; } .tgk-neu { margin-top: 6px; } .tgk-anleitung { max-width: 460px; margin: 0 auto 18px; text-align: left; } .tgk-anleitung summary { cursor: pointer; list-style: none; text-align: center; font-family: var(--serif); font-style: italic; color: #e2c486; font-size: 15.5px; } .tgk-anleitung summary::-webkit-details-marker { display: none; } .tgk-anleitung ul { margin: 10px 0 0; padding: 0 0 0 18px; } .tgk-anleitung li { margin: 6px 0; font-size: 14.5px; line-height: 1.55; color: #d3cde0; } .tgk-anleitung li::marker { content: "✦ "; color: #e2c486; font-size: 11px; } .tgk-app { padding: 0; border: 0; background: none; color: #f3dca6; font: inherit; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }