/* ===== Calculator page (builds on design system) ===== */ .calc-wrap{max-width:1360px;margin:0 auto;padding:0 var(--space-lg) var(--space-2xl)} .calc-hero{background:linear-gradient(135deg,var(--color-cream) 0%,var(--color-bg) 60%,var(--color-sand-light) 100%);padding:var(--space-2xl) 0 var(--space-xl);text-align:center} .calc-hero h1{margin-bottom:var(--space-sm)} .calc-hero p{color:var(--color-text-soft);font-size:var(--font-size-md);max-width:520px;margin:0 auto} /* ===== Layout ===== Before calc : centered birth-data form. After calc : compact recalc bar, then chart + "Dein Design" side by side, slim planet tables, full-width detail section, CTA. */ /* form: centered card (hidden after calculation via .hidden) */ .form-panel{background:var(--color-surface);border:1px solid var(--color-border-light);border-radius:var(--radius-lg);padding:var(--space-xl);box-shadow:var(--shadow-sm);width:100%;max-width:560px;margin:var(--space-lg) auto 0} /* compact bar that replaces the form after calculation */ .recalc-bar{display:flex;align-items:center;justify-content:space-between;gap:var(--space-md);flex-wrap:wrap;background:var(--color-surface);border:1px solid var(--color-border-light);border-radius:var(--radius-lg);box-shadow:var(--shadow-sm);padding:14px 20px;margin-top:var(--space-lg)} .recalc-bar__info{display:flex;flex-direction:column;gap:2px;min-width:0} .recalc-bar__eyebrow{font-size:var(--font-size-xs);font-weight:600;text-transform:uppercase;letter-spacing:0.12em;color:var(--color-taupe)} .recalc-bar__summary{font-family:var(--font-serif);font-size:var(--font-size-md);color:var(--color-warm-dark)} /* darf schrumpfen + umbrechen — mit flex-shrink:0 schob die Leiste auf schmalen Handys (3 Buttons seit dem ICS-Export) ~90px aus dem Viewport */ .recalc-bar__actions{display:flex;gap:var(--space-sm);flex-wrap:wrap;min-width:0;max-width:100%} /* elegant pill buttons */ .ghost-btn{display:inline-flex;align-items:center;gap:7px;font-family:var(--font-sans);font-size:var(--font-size-xs);font-weight:600;letter-spacing:0.02em;color:var(--color-taupe-dark);background:transparent;border:1px solid var(--color-border);border-radius:999px;padding:9px 18px;cursor:pointer;transition:all var(--transition);white-space:nowrap} .ghost-btn:hover{border-color:var(--color-taupe);background:var(--color-cream);transform:translateY(-1px)} .ghost-btn--solid{background:var(--color-warm-dark);color:var(--color-white);border-color:var(--color-warm-dark)} .ghost-btn--solid:hover{background:var(--color-taupe-dark);border-color:var(--color-taupe-dark);color:var(--color-white)} /* results stack (revealed after calculation) */ .results-below{margin-top:var(--space-lg);display:flex;flex-direction:column;gap:var(--space-xl)} .results-below.hidden{display:none} /* Bodygraph stage: one cohesive canvas with flanking activation rails. */ .chart-flank{display:grid;grid-template-columns:minmax(108px,120px) minmax(0,460px) minmax(108px,120px) minmax(245px,285px);grid-template-areas:"des chart pers design";justify-content:center;align-items:start;gap:14px;position:relative;overflow:hidden;background:linear-gradient(145deg,rgba(251,248,242,.98),rgba(242,236,226,.92));border:1px solid var(--color-border-light);border-radius:var(--radius-xl);padding:clamp(18px,2vw,28px);box-shadow:0 18px 48px rgba(51,45,40,.08)} .chart-flank::before{content:'';position:absolute;inset:-20% 34% 18% 14%;background:radial-gradient(circle,rgba(169,177,159,.2),transparent 68%);pointer-events:none} .chart-flank>*{position:relative;z-index:1} .planet-rail--des{grid-area:des} .chart-flank .chart-panel{grid-area:chart} .planet-rail--pers{grid-area:pers} .chart-flank #resultsSection{grid-area:design} /* medium screens: Dein Design drops to a full-width row under the chart */ @media(max-width:1180px){ .chart-flank{grid-template-columns:minmax(108px,120px) minmax(0,470px) minmax(108px,120px);grid-template-areas:"des chart pers" "design design design"} } @media(max-width:820px){ /* Mobil: erst das Ergebnis in Klartext (Glance), DANN die Planeten-Zahlen — Neulinge sollen Typ/Strategie sehen, bevor 26 Tor-Zahlen kommen. */ .chart-flank{grid-template-columns:1fr 1fr;grid-template-areas:"chart chart" "design design" "des pers";gap:var(--space-md)} } /* Planet rails: names make the astronomical activations readable without tooltips. */ .planet-rail{display:flex;flex-direction:column;gap:5px} .rail-head{display:flex;flex-direction:column;align-items:center;justify-content:flex-end;text-align:center;min-height:48px;margin-bottom:8px;font-size:0.63rem;font-weight:700;text-transform:uppercase;letter-spacing:0.13em;color:var(--color-taupe-dark);line-height:1.35} .rail-head small{font-weight:500;text-transform:none;letter-spacing:0.01em;opacity:0.75} .planet-tile{display:flex;align-items:center;gap:8px;width:100%;min-height:43px;padding:7px 9px;border-radius:11px;font-size:0.76rem;border:1px solid;background:rgba(255,255,255,.62);transition:transform 0.15s,box-shadow 0.15s,border-color 0.15s;opacity:0;animation:cardIn 0.45s ease forwards} .planet-tile:hover{transform:translateY(-1px);box-shadow:var(--shadow-sm)} .planet-tile .ps{font-size:1rem;line-height:1;flex-shrink:0;width:18px;text-align:center} .planet-meta{display:flex;min-width:0;flex:1;flex-direction:column;gap:1px} .planet-tile .pn{overflow:hidden;font-size:.53rem;font-weight:600;line-height:1.15;text-overflow:ellipsis;text-transform:uppercase;letter-spacing:.06em;white-space:nowrap;color:var(--color-text-muted)} .planet-tile .pg{font-size:.79rem;font-weight:700;font-variant-numeric:tabular-nums;line-height:1.15;letter-spacing:0.01em} /* Design = soft terracotta tint */ .planet-rail--des .planet-tile{background:rgba(246,233,225,.82);border-color:#E5D0C5} .planet-rail--des .planet-tile .ps{color:#9E5640} .planet-rail--des .planet-tile .planet-meta{align-items:flex-end;text-align:right} .planet-rail--des .planet-tile .pg{color:#9A4E3A} .planet-rail--des .planet-tile:hover{border-color:#CDA491} /* Persönlichkeit = soft warm-ink tint */ .planet-rail--pers .planet-tile{background:rgba(237,233,225,.88);border-color:#D8D0C3} .planet-rail--pers .planet-tile .ps{color:#6F6557} .planet-rail--pers .planet-tile .planet-meta{align-items:flex-start;text-align:left} .planet-rail--pers .planet-tile .pg{color:var(--color-warm-dark)} .planet-rail--pers .planet-tile:hover{border-color:#BCB1A0} @media(max-width:820px){ .planet-rail{flex-direction:column} .planet-tile{width:100%} } .form-panel h2{font-family:var(--font-serif);font-size:var(--font-size-lg);margin-bottom:var(--space-lg);color:var(--color-warm-dark)} .form-group{margin-bottom:var(--space-md)} .form-group label{display:block;font-size:var(--font-size-xs);font-weight:600;text-transform:uppercase;letter-spacing:0.1em;color:var(--color-text-muted);margin-bottom:6px} .form-group input,.form-group select{width:100%;padding:12px 14px;border:1px solid var(--color-border);border-radius:var(--radius-sm);font-size:var(--font-size-sm);font-family:var(--font-sans);background:var(--color-surface);color:var(--color-text);transition:border-color var(--transition),box-shadow var(--transition)} .form-group input:focus,.form-group select:focus{outline:none;border-color:var(--color-taupe);box-shadow:0 0 0 3px rgba(79,94,73,0.14)} .form-row{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-md)} .place-group{position:relative} .place-input-wrap{position:relative} .place-input-wrap::after{content:'⌖';position:absolute;right:14px;top:50%;transform:translateY(-50%);color:var(--color-taupe);font-size:1rem;pointer-events:none} .place-input-wrap input{padding-right:42px} .place-suggestions{display:none;position:absolute;z-index:30;top:calc(100% + 6px);left:0;right:0;overflow:hidden;border:1px solid var(--color-border);border-radius:var(--radius-md);background:var(--color-surface);box-shadow:var(--shadow-lg)} .place-suggestions.show{display:block} /* Pflicht-Attribution fuer Geoapify und OpenStreetMap — direkt bei den angezeigten Ortsdaten, deshalb als letzte Zeile der Liste. */ .place-attrib{margin:0;padding:8px 14px;border-top:1px solid var(--color-border-light); background:var(--color-cream);font-size:.68rem;color:var(--color-text-muted)} .place-attrib a{color:inherit;text-decoration:underline;text-underline-offset:2px} .place-option{display:flex;width:100%;align-items:center;justify-content:space-between;gap:var(--space-md);padding:11px 14px;border:0;border-bottom:1px solid var(--color-border-light);background:transparent;color:var(--color-text);font:inherit;text-align:left;cursor:pointer} .place-option:last-child{border-bottom:0} .place-option:hover,.place-option:focus,.place-option.is-active{outline:none;background:var(--color-cream)} .place-option.is-active{box-shadow:inset 3px 0 0 #5C3D54} .place-option b{display:block;font-size:var(--font-size-sm)} .place-option small{display:block;color:var(--color-text-muted);font-size:var(--font-size-xs)} .place-option__zone{flex-shrink:0;color:var(--color-taupe);font-size:.66rem;font-weight:700;letter-spacing:.04em} .place-status{display:flex;align-items:center;gap:7px;min-height:22px;margin:7px 0 0;font-size:var(--font-size-xs);color:var(--color-text-muted)} .place-status::before{content:'';width:7px;height:7px;border-radius:50%;background:var(--color-border)} .place-status[data-state="loading"]::before{border:1.5px solid var(--color-border);border-top-color:var(--color-taupe);background:transparent;animation:spin .7s linear infinite} .place-status[data-state="ready"]{color:var(--color-taupe-dark)} .place-status[data-state="ready"]::before{background:var(--color-accent)} .place-status[data-state="error"]{color:#98543f;font-weight:600} .place-status[data-state="error"]::before{background:#B7654C} .place-status--attention{animation:statusNudge .5s ease 2} @keyframes statusNudge{0%,100%{transform:translateX(0)}25%{transform:translateX(-4px)}75%{transform:translateX(4px)}} .timezone-fallback{margin:-2px 0 var(--space-md);border-top:1px solid var(--color-border-light);padding-top:10px} .timezone-fallback summary{width:max-content;color:var(--color-text-muted);font-size:var(--font-size-xs);cursor:pointer} .timezone-fallback[open] summary{margin-bottom:10px;color:var(--color-taupe-dark)} .timezone-fallback .form-group{margin-bottom:0} .calc-btn{display:flex;align-items:center;justify-content:center;width:100%;padding:15px 24px;margin-top:var(--space-lg);background:var(--color-warm-dark);color:var(--color-white);border:none;border-radius:999px;font-family:var(--font-sans);font-size:var(--font-size-sm);font-weight:600;letter-spacing:0.02em;cursor:pointer;transition:background var(--transition),transform var(--transition),box-shadow var(--transition);position:relative} .calc-btn:hover{background:var(--color-taupe-dark);transform:translateY(-2px);box-shadow:var(--shadow-md)} .calc-btn:active{transform:translateY(0)} .calc-btn.loading{pointer-events:none;opacity:0.85} .calc-btn.loading::after{content:'';position:absolute;width:18px;height:18px;border:2px solid transparent;border-top-color:#fff;border-radius:50%;animation:spin 0.6s linear infinite;right:18px} @keyframes spin{to{transform:rotate(360deg)}} .form-hint{margin-top:var(--space-md);font-size:var(--font-size-xs);color:var(--color-text-muted);line-height:1.6} /* WEB-20260806-DST-FOLD: Auswahl bei Herbst-Zeitumstellung (Ortszeit existiert zweimal). Nur sichtbar, wenn showDstFoldChoice() sie befuellt. */ .dst-fold-choice{margin-top:var(--space-md);padding:var(--space-md);background:var(--color-cream);border:1px solid var(--color-border);border-radius:var(--radius-lg,12px)} .dst-fold-choice p{margin:0 0 var(--space-sm);font-size:var(--font-size-xs);font-weight:600;color:#98543f;line-height:1.6} .dst-fold-choice__options{display:flex;flex-direction:column;gap:8px} .dst-fold-choice__opt{width:100%;justify-content:center;text-align:center} /* --- Chart panel --- */ .chart-panel{background:radial-gradient(circle at 50% 38%,#FFFDF9 0%,#FBF7F0 58%,#F2EBE0 100%);border:1px solid rgba(222,212,200,.88);border-radius:20px;padding:16px 12px 14px;box-shadow:0 14px 36px rgba(51,45,40,.09),inset 0 1px 0 rgba(255,255,255,.8);width:100%;max-width:470px;margin-inline:auto} /* flex-wrap:wrap ist Pflicht, nicht Kosmetik: Das Panel selbst hat overflow:hidden. Passt die Legende neben den Titel nicht mehr (schmale Chart-Spalte im Sidebar-Layout ab 1260px), wird sie sonst stumm abgeschnitten — im Connection-Rechner fehlte so die halbe „zusammen“-Pille. Mit wrap rutscht sie in die nächste Zeile, statt zu verschwinden (WEB-20260804-LEGENDE). */ .chart-panel__head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:var(--space-md);padding:0 6px 12px;border-bottom:1px solid var(--color-border-light);margin-bottom:10px} /* Essenz-Zeile: grundsätzlich aus. Sie erscheint NUR ≤820px und NUR nach der Berechnung (body.results-mode) — s. Media Query weiter unten. */ .chart-essence{display:none;margin:0} .chart-panel__kicker{display:block;font-size:.56rem;font-weight:700;text-transform:uppercase;letter-spacing:.18em;color:var(--color-taupe);margin-bottom:2px} .chart-panel__head h2{font-size:1.25rem;margin:0} .chart-panel .legend-row{display:flex;justify-content:flex-end;gap:8px;margin:0} .chart-panel .legend-row>span{padding:5px 9px;border:1px solid var(--color-border-light);border-radius:999px;background:rgba(255,255,255,.66);font-size:.61rem} .chart-panel>svg{width:100%;height:auto;display:block;max-height:720px;margin:0 auto;overflow:visible} /* Variable / vier Pfeile — flankieren den Kopf (Design links, Persönlichkeit rechts) */ .variable-arrows{display:none;flex-direction:column;align-items:center;gap:7px;margin:0 auto 2px;padding:4px 0 0} .variable-arrows.show{display:flex} .variable-cap{font-size:0.52rem;font-weight:700;letter-spacing:0.22em;text-transform:uppercase;color:var(--color-text-muted)} .variable-row{display:flex;justify-content:center;align-items:flex-start;gap:clamp(56px,16%,120px)} .vside{display:flex;flex-direction:column;gap:12px} .vside--left{align-items:flex-end} .vside--right{align-items:flex-start} .vk{display:flex;align-items:center;gap:10px;white-space:nowrap;opacity:0;animation:vIn .5s ease both} .vk__num{font-family:var(--font-serif);font-weight:700;font-size:1.15rem;line-height:1;min-width:30px} .vk__num sub{font-family:var(--font-serif);font-style:italic;font-weight:500;font-size:0.66em;vertical-align:-0.15em;margin-left:1px;opacity:0.72} .vk__ar{flex-shrink:0;width:30px;height:11px} .vk--left .vk__ar{transform:scaleX(-1)} .vside--left .vk__num{text-align:left} .vside--right .vk__num{text-align:right} /* Farbtrennung: Design (unbewusst) = Terrakotta · Persönlichkeit (bewusst) = Dunkel */ .vside--left .vk__num,.vside--left .vk__ar{color:#A85A44} .vside--right .vk__num,.vside--right .vk__ar{color:#2F2B27} .vside--left .vk:nth-child(1),.vside--right .vk:nth-child(1){animation-delay:.05s} .vside--left .vk:nth-child(2),.vside--right .vk:nth-child(2){animation-delay:.14s} @keyframes vIn{from{opacity:0;transform:translateY(-5px)}to{opacity:1;transform:translateY(0)}} @media(max-width:820px){.variable-arrows{gap:64px}} .chart-toolbar{display:flex;align-items:center;justify-content:space-between;gap:var(--space-md);margin-bottom:var(--space-sm);flex-wrap:wrap} .legend-row{display:flex;gap:var(--space-lg);font-size:var(--font-size-xs);color:var(--color-text-muted);letter-spacing:0.04em} .legend-row span{display:flex;align-items:center;gap:6px} .legend-row .dot{width:9px;height:9px;border-radius:50%;display:inline-block} .legend-row .dot--both{background:linear-gradient(180deg,#2F2B27 0 50%,#A85A44 50% 100%)} /* „Zahl = Tor.Linie"-Hinweis: dezente Fußnote, kein Farb-Key-Pill */ .chart-panel .legend-row .legend-note{border:none!important;background:none!important;box-shadow:none!important;padding:0!important;font-style:italic;opacity:.72} @media(max-width:680px){ /* Mobil: Legende unter den Titel umbrechen statt rechts abzuschneiden */ .chart-panel__head{flex-wrap:wrap;align-items:flex-start} .chart-panel .legend-row{flex-wrap:wrap;justify-content:flex-start;row-gap:4px} } .download-btn{display:none;align-items:center;gap:6px;font-size:var(--font-size-xs);font-weight:600;color:var(--color-taupe-dark);background:transparent;border:1px solid var(--color-border);border-radius:999px;padding:6px 14px;cursor:pointer;font-family:var(--font-sans);transition:all var(--transition)} .download-btn:hover{border-color:var(--color-taupe);background:var(--color-cream)} .download-btn.visible{display:inline-flex} /* --- Side panel --- */ .side-panel{flex-shrink:0} .profile-box{text-align:center;margin-bottom:var(--space-md);font-size:var(--font-size-xs);font-weight:600;text-transform:uppercase;letter-spacing:0.12em;color:var(--color-text-muted)} .profile-box .nums{font-family:var(--font-serif);font-size:var(--font-size-2xl);font-weight:600;color:var(--color-warm-dark);margin-top:2px;letter-spacing:0} .planet-col{background:var(--color-surface);border:1px solid var(--color-border-light);border-radius:var(--radius-md);padding:var(--space-sm);box-shadow:var(--shadow-sm);margin-bottom:var(--space-sm)} .planet-col h4{font-family:var(--font-sans);font-size:0.62rem;font-weight:600;text-transform:uppercase;letter-spacing:0.12em;color:var(--color-text-muted);margin-bottom:8px;text-align:center} .planet-row{display:flex;justify-content:space-between;align-items:center;padding:4px 8px;border-radius:6px;font-size:0.76rem;margin-bottom:2px;transition:background 0.15s} .planet-row:hover{background:var(--color-cream)!important} .planet-row.pers-row{background:var(--color-bg)} .planet-row.des-row{background:#F5EBE5} .planet-row .gate-val{font-weight:700;font-variant-numeric:tabular-nums} .planet-row .gate-val.pers{color:var(--color-warm-dark)} .planet-row .gate-val.des{color:#A85A44} .planet-row .sym{width:18px;text-align:center;font-size:0.85rem;color:var(--color-taupe-dark)} .planet-row .pname{color:var(--color-text-muted);flex:1;margin:0 4px} @media(max-width:900px){.side-panel{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-sm)}.profile-box{grid-column:1/-1}} @media(max-width:560px){.side-panel{grid-template-columns:1fr}} /* --- Results --- */ .results-panel{background:var(--color-surface);border:1px solid var(--color-border-light);border-radius:var(--radius-lg);padding:var(--space-xl);box-shadow:var(--shadow-sm);margin-top:0;animation:fadeUp 0.5s ease;height:100%} .results-panel h2{font-family:var(--font-serif);font-size:var(--font-size-lg);color:var(--color-warm-dark);margin-bottom:var(--space-md)} .results-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:var(--space-sm);margin-top:var(--space-sm)} @media(max-width:900px){.results-grid{grid-template-columns:repeat(3,1fr)}} @media(max-width:480px){.results-grid{grid-template-columns:repeat(2,1fr)}} .result-card{background:var(--color-cream);border:1px solid var(--color-border-light);border-radius:var(--radius-md);padding:12px 14px;text-align:left;display:flex;flex-direction:column;gap:2px;transition:transform 0.15s,box-shadow 0.15s} .result-card:hover{transform:translateY(-2px);box-shadow:var(--shadow-sm)} .result-card .label{font-size:0.62rem;font-weight:600;text-transform:uppercase;letter-spacing:0.12em;color:var(--color-taupe)} .result-card .value{font-family:var(--font-serif);font-size:var(--font-size-md);font-weight:600;color:var(--color-warm-dark);line-height:1.3} .hidden{display:none} /* --- Dein Design: clean label/value list beside the chart --- */ .design-summary{background:rgba(247,242,234,.9);border:1px solid rgba(222,212,200,.92);border-radius:18px;padding:var(--space-lg);box-shadow:0 10px 26px rgba(51,45,40,.06);animation:fadeUp 0.5s ease;align-self:start} @media(max-width:1180px){.design-summary{max-width:796px;margin:10px auto 0;width:100%}} .summary-kicker{font-size:.57rem;font-weight:700;text-transform:uppercase;letter-spacing:.17em;color:var(--color-taupe);margin:0 0 2px} .design-summary h2{font-family:var(--font-serif);font-size:var(--font-size-lg);color:var(--color-warm-dark);margin-bottom:var(--space-xs)} .design-summary .results-grid{display:flex;flex-direction:column;gap:0;margin-top:var(--space-xs)} .design-summary .result-card{flex-direction:row;justify-content:space-between;align-items:baseline;gap:var(--space-md);background:transparent;border:none;border-bottom:1px solid var(--color-border-light);border-radius:0;padding:13px 2px;text-align:left} .design-summary .result-card:hover{transform:none;box-shadow:none} .design-summary .result-card .label{align-self:center;white-space:nowrap} .design-summary .result-card .value{text-align:right;font-size:var(--font-size-md)} /* „Auf einen Blick": jede Zeile als klickbarer Wissen-Link (Stretched-Link + Chevron via CSS). Einheitliches Muster für Typ/Strategie/Autorität/ Profil/Definition (→ Wissen-Artikel) und Kreuz (→ Kreuz-Rechner). */ .design-summary .rc-link{position:relative;cursor:pointer;border-radius:7px;transition:background .15s} .design-summary .rc-link:hover{background:rgba(92,61,84,.05)} .design-summary .result-card.rc-link{padding-left:8px;padding-right:26px} body.results-mode .design-summary .result-card.rc-link{padding-left:8px;padding-right:26px} .design-summary .rc-link::after{content:'→';position:absolute;right:7px;top:50%;transform:translateY(-50%);font-family:var(--font-sans);font-size:.9rem;color:var(--color-taupe);opacity:.5;transition:opacity .15s,color .15s,right .15s;pointer-events:none} .design-summary .rc-link:hover::after{opacity:1;color:#5C3D54;right:3px} .design-summary .rc-link:hover .value{color:#5C3D54} .rc-stretch{position:absolute;inset:0;z-index:1;border-radius:7px;text-indent:-9999px;overflow:hidden} .rc-stretch:focus-visible{outline:2px solid #5C3D54;outline-offset:2px} /* --- Result CTA --- */ .result-cta{background:var(--color-warm-dark);border-radius:var(--radius-lg);padding:var(--space-2xl);margin-top:0;text-align:center;animation:fadeUp 0.6s ease;width:100%;max-width:680px;margin-inline:auto} .result-cta h3{font-family:var(--font-serif);color:var(--color-white);font-size:var(--font-size-lg);margin-bottom:var(--space-xs)} .result-cta p{color:rgba(255,255,255,0.7);font-size:var(--font-size-sm);line-height:1.7;margin-bottom:var(--space-lg);max-width:480px;margin-inline:auto} .result-cta .btn{width:auto;min-width:240px;margin-bottom:var(--space-sm)} .result-cta .btn--accent{background:var(--color-accent)} .result-cta .btn--accent:hover{background:var(--color-accent-hover)} .result-cta .result-cta__link{display:inline-block;font-size:var(--font-size-xs);color:rgba(255,255,255,0.6);border-bottom:1px solid rgba(255,255,255,0.25);padding-bottom:2px;transition:color var(--transition)} .result-cta .result-cta__link:hover{color:var(--color-white)} /* Abschluss-Block mit integriertem Einstiegs-Reading (bodygraph-rechner): Eyebrow wird nach der Berechnung von reading-reco.js personalisiert */ .result-cta .result-cta__kicker{font-size:var(--font-size-xs);font-weight:600;text-transform:uppercase;letter-spacing:0.14em;color:#E6CE9A;margin-bottom:6px} .result-cta__row{margin-top:4px} .result-cta__sep{color:rgba(255,255,255,0.35);margin:0 10px;font-size:var(--font-size-xs)} /* --- Kostenloses Einstiegs-Reading (Lead-Magnet) --- */ .free-reading{display:flex;align-items:center;gap:var(--space-lg);width:100%;max-width:760px;margin-inline:auto;text-decoration:none;background:linear-gradient(135deg,var(--color-cream),var(--color-sand-light));border:1px solid var(--color-border-light);border-radius:var(--radius-lg);padding:var(--space-lg) var(--space-xl);box-shadow:var(--shadow-sm);transition:transform 0.15s,box-shadow 0.15s,border-color 0.15s;animation:fadeUp 0.6s ease} .free-reading:hover{transform:translateY(-2px);box-shadow:var(--shadow-md);border-color:var(--color-taupe)} .free-reading__icon{flex-shrink:0;width:52px;height:52px;border-radius:50%;background:var(--color-surface);border:1px solid var(--color-border-light);display:flex;align-items:center;justify-content:center;color:var(--color-taupe-dark)} .free-reading__text{flex:1;min-width:0} .free-reading__eyebrow{display:block;font-size:var(--font-size-xs);font-weight:600;text-transform:uppercase;letter-spacing:0.12em;color:var(--color-taupe);margin-bottom:3px} .free-reading__text h3{font-family:var(--font-serif);font-size:var(--font-size-lg);color:var(--color-warm-dark);margin:0 0 4px} .free-reading__text p{font-size:var(--font-size-sm);color:var(--color-text-soft);line-height:1.6;margin:0} .free-reading__btn{flex-shrink:0;white-space:nowrap} @media(max-width:680px){.free-reading{flex-direction:column;text-align:center;padding:var(--space-lg)}.free-reading__btn{width:100%}} @keyframes fadeUp{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}} /* Bodygraph: open centers stay light; defined centers and active circuitry lead. */ #bodygraph #Head>path,#bodygraph #Ajna>path,#bodygraph #Throat>path,#bodygraph #G>path,#bodygraph #Ego>path,#bodygraph #Sacral>path,#bodygraph #SolarPlexus>path,#bodygraph #Spleen>path,#bodygraph #Root>path{stroke:#B8AA97;stroke-width:2px;stroke-linejoin:round} #bodygraph #Channels>*{transition:fill .55s ease,opacity .55s ease,filter .55s ease} #bodygraph .gate-inactive{fill:#EAE3D8 !important;opacity:.72} #bodygraph .gate-pers{fill:#292622 !important;opacity:1;filter:drop-shadow(0 1px 1px rgba(41,38,34,.18))} #bodygraph .gate-des{fill:#B45F47 !important;opacity:1;filter:drop-shadow(0 1px 1px rgba(180,95,71,.2))} /* „Beides"-Tore: KEIN erzwungener Fill mehr. renderChart() setzt das Fill-Attribut pro Tor auf ein Streifenmuster (url(#hdBoth-)), das ENTLANG der Kanalachse verläuft — ein !important-Fill hier würde dieses Muster überschreiben. Der frühere harte Links-rechts-Verlauf url(#hdBothGrad) bleibt nur als Alt-Definition im SVG (Fallback für Mini-Locator/Share-Bild). Spotlight-Dimmen greift weiter, weil dessen Regel in neu-theme.css !important ist und das Attribut schlägt. */ /* Fallback-Ton für „definiert", falls hdTintCenters() einmal nicht liefe. Früher standen hier neun BUNTE Klassik-Farben. Sie waren der Grund der seit Wochen wiederkehrenden „bunten Zentren": renderChart() schrieb sie zusätzlich als fill-Attribut, die richtige Quellenfarbe überdeckte sie nur per Klasse — überall ohne dieses CSS (SVG-Export, Seiten ohne neu-theme.css) kamen sie zurück. Seit 11.08.2026 setzt hdTintCenters() die Quellenfarbe als ATTRIBUT (WEB-20260811-KLASSIKDEFAULT); dieser Ton ist nur noch Notnagel und bewusst neutral: sichtbar „definiert", aber weder Aubergine noch Salbei — ein Fehlzustand fällt so auf, ohne eine falsche Quelle zu behaupten. */ #bodygraph .center-def-head path{fill:#6E6A72 !important;stroke:#4F4B54 !important} #bodygraph .center-def-ajna path{fill:#6E6A72 !important;stroke:#4F4B54 !important} #bodygraph .center-def-throat path{fill:#6E6A72 !important;stroke:#4F4B54 !important} #bodygraph .center-def-g path{fill:#6E6A72 !important;stroke:#4F4B54 !important} #bodygraph .center-def-ego path{fill:#6E6A72 !important;stroke:#4F4B54 !important} #bodygraph .center-def-sacral path{fill:#6E6A72 !important;stroke:#4F4B54 !important} #bodygraph .center-def-sp path{fill:#6E6A72 !important;stroke:#4F4B54 !important} #bodygraph .center-def-spleen path{fill:#6E6A72 !important;stroke:#4F4B54 !important} #bodygraph .center-def-root path{fill:#6E6A72 !important;stroke:#4F4B54 !important} #bodygraph text[id^="GateText"]{fill:#968B7C} /* Kontur um aktive Tor-Zahlen: hebt sie von der Zentrumsfläche ab. stroke-width in SVG-Einheiten bei font-size 21 — die Kontur wächst nach AUSSEN, also frisst jede Einheit auch in die Nachbarziffer. Bei 4–5 Einheiten (≈24 % der Schriftgröße) liefen zweistellige Zahlen ineinander: aus „13“/„17“ wurde im gerenderten Chart ein Klecks, weil die schmale „1“ ihre halbe Laufweite frei lässt und der Halo den Nachbarn überdeckt. 2,2 Einheiten + etwas Laufweite halten die Ziffern getrennt und die Kontur sichtbar (WEB-20260804-TORZAHLEN). */ #bodygraph .gate-text-active{font-weight:700;paint-order:stroke;stroke:#FFFCF7;stroke-width:2.2px;stroke-linejoin:round;letter-spacing:.04em} #bodygraph .gate-text-pers{fill:#292622 !important} #bodygraph .gate-text-des{fill:#B45F47 !important} #bodygraph .gate-text-both{fill:#6B4740 !important} #bodygraph .gate-textbg-pers,#bodygraph .gate-textbg-des,#bodygraph .gate-textbg-both{fill:transparent !important;opacity:0 !important} /* --- Animated chart reveal --- */ #bodygraph path,#bodygraph polygon,#bodygraph rect{transition:fill 0.8s ease} #bodygraph.calculating{animation:chartPulse 0.9s ease} @keyframes chartPulse{0%{opacity:1}35%{opacity:0.35;transform:scale(0.992)}100%{opacity:1;transform:scale(1)}} /* staggered result cards */ .results-grid .result-card{opacity:0;animation:cardIn 0.5s ease forwards} .results-grid .result-card:nth-child(1){animation-delay:0.05s} .results-grid .result-card:nth-child(2){animation-delay:0.13s} .results-grid .result-card:nth-child(3){animation-delay:0.21s} .results-grid .result-card:nth-child(4){animation-delay:0.29s} .results-grid .result-card:nth-child(5){animation-delay:0.37s} .results-grid .result-card:nth-child(6){animation-delay:0.45s} @keyframes cardIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}} /* --- Type description card --- */ .type-card{background:linear-gradient(135deg,var(--color-cream),var(--color-sand-light));border:1px solid var(--color-border-light);border-radius:var(--radius-md);padding:var(--space-lg);margin-top:var(--space-sm);animation:cardIn 0.5s 0.5s ease both} .type-card p{font-size:var(--font-size-sm);color:var(--color-text-soft);line-height:1.7;margin:0} .type-card .type-card__name{font-family:var(--font-serif);font-style:italic;color:var(--color-taupe-dark)} /* --- Toolbar buttons --- */ .chart-actions{display:flex;gap:8px} .share-btn{display:none;align-items:center;gap:6px;font-size:var(--font-size-xs);font-weight:600;color:var(--color-taupe-dark);background:transparent;border:1px solid var(--color-border);border-radius:999px;padding:6px 14px;cursor:pointer;font-family:var(--font-sans);transition:all var(--transition)} .share-btn:hover{border-color:var(--color-taupe);background:var(--color-cream)} .share-btn.visible{display:inline-flex} .share-btn.copied{background:var(--color-warm-dark);color:var(--color-white);border-color:var(--color-warm-dark)} /* --- Design im Detail --- */ /* Gemeinsame, zentrierte Zwischenüberschrift für Ergebnis-Sektionen (einheitlich mit .fam-section-head / .ik-Sektionen) */ .section-head{max-width:820px;margin:0 auto var(--space-md);text-align:center} .section-head h2{font-family:var(--font-serif);font-size:var(--font-size-xl);color:var(--color-warm-dark);margin:0 0 8px} .section-head p{font-size:var(--font-size-sm);color:var(--color-text-soft);line-height:1.7;max-width:640px;margin:0 auto} .detail-section{background:var(--color-surface);border:1px solid var(--color-border-light);border-radius:var(--radius-lg);box-shadow:var(--shadow-sm);margin-top:0;padding:var(--space-2xl);animation:fadeUp 0.6s ease;max-width:1040px;margin-inline:auto} .detail-head{text-align:center;max-width:560px;margin:0 auto var(--space-xl)} .detail-head h2{font-family:var(--font-serif);font-size:clamp(1.5rem,1.2rem + 1vw,2rem);color:var(--color-warm-dark);margin-bottom:var(--space-xs)} .detail-head p{font-size:var(--font-size-sm);color:var(--color-text-soft);margin:0} .detail-row{display:grid;grid-template-columns:170px 230px 1fr;gap:var(--space-lg);padding:var(--space-lg) 0;border-top:1px solid var(--color-border-light);align-items:baseline} .detail-row:first-child{border-top:none} .detail-row__label{font-size:var(--font-size-xs);font-weight:600;text-transform:uppercase;letter-spacing:0.14em;color:var(--color-taupe)} .detail-row__value{font-family:var(--font-serif);font-size:var(--font-size-lg);color:var(--color-warm-dark);line-height:1.35} .detail-row__value small{display:block;font-family:var(--font-sans);font-size:var(--font-size-xs);color:var(--color-text-muted);margin-top:2px;letter-spacing:0.02em} .detail-row__text{font-size:var(--font-size-sm);color:var(--color-text-soft);line-height:1.75} /* „Weiterlesen"-Link am Ende jeder Element-Beschreibung → Wissen-Artikel/Tool */ .detail-more{display:block;margin-top:10px;font-size:var(--font-size-xs);font-weight:700;color:#5C3D54;text-decoration:none;transition:color .15s} .detail-more:hover{color:#432C3E;text-decoration:underline;text-underline-offset:3px} @media(max-width:860px){.detail-row{grid-template-columns:1fr;gap:4px;padding:var(--space-md) 0}.detail-row__value{font-size:var(--font-size-md)}} .channel-list{display:flex;flex-direction:column;gap:6px} .channel-chip{display:flex;align-items:baseline;gap:10px;font-size:var(--font-size-sm)} .channel-chip b{font-family:var(--font-serif);font-size:var(--font-size-base);color:var(--color-warm-dark);font-weight:600;white-space:nowrap} .channel-chip span{color:var(--color-text-soft)} .channel-chip__gloss{display:block;font-style:normal;font-size:var(--font-size-xs);color:var(--color-text-muted);margin-top:1px} /* Nicoles Kanal-Volltexte (Bodygraph-Kanalliste): die Kanal-Zeile spannt Wert- + Textspalte, sonst würden die Texte zum Schlauchtext. */ .detail-row--channels .detail-row__value{grid-column:2/4;max-width:640px} @media(max-width:860px){.detail-row--channels .detail-row__value{grid-column:auto}} .channel-intro{font-family:var(--font-sans);font-size:var(--font-size-sm);color:var(--color-text-soft);line-height:1.7;margin:0 0 14px} .channel-chip__text{display:block;font-family:var(--font-sans);font-style:normal;font-size:var(--font-size-sm);color:var(--color-text-soft);line-height:1.7;margin:3px 0 10px} /* staggered reveal of each detail entry */ .detail-row{opacity:0;animation:cardIn 0.5s ease forwards} .detail-row:nth-child(1){animation-delay:0.05s}.detail-row:nth-child(2){animation-delay:0.11s} .detail-row:nth-child(3){animation-delay:0.17s}.detail-row:nth-child(4){animation-delay:0.23s} .detail-row:nth-child(5){animation-delay:0.29s}.detail-row:nth-child(6){animation-delay:0.35s} .detail-row:nth-child(7){animation-delay:0.41s}.detail-row:nth-child(8){animation-delay:0.47s} .detail-row:nth-child(9){animation-delay:0.53s} /* ============================================================ BLUEPRINT STUDIO — immersive result view The complete chart stage fits into the first desktop viewport. ============================================================ */ body.results-mode{background:#EEE9E1} body.results-mode .calc-hero{display:none} body.results-mode .calc-wrap{max-width:1600px;padding:0 18px var(--space-2xl)} body.results-mode .recalc-bar{ min-height:58px; margin-top:10px; padding:8px 14px 8px 18px; border-color:rgba(72,78,70,.16); border-radius:15px; background:rgba(251,248,242,.86); box-shadow:0 8px 24px rgba(35,39,35,.06); backdrop-filter:blur(14px); } body.results-mode .recalc-bar__info{flex-direction:row;align-items:baseline;gap:16px} body.results-mode .recalc-bar__summary{font-size:1rem} body.results-mode .results-below{gap:var(--space-xl);margin-top:10px} body.results-mode .chart-flank{ grid-template-columns:112px minmax(420px,1fr) 112px 286px; grid-template-areas:"des chart pers design"; height:calc(100svh - var(--nav-height) - 146px); min-height:690px; max-height:900px; gap:14px; padding:18px; overflow:hidden; border:1px solid rgba(223,196,161,.18); border-radius:28px; color:#F7F0E7; background: radial-gradient(circle at 50% 42%,rgba(114,140,121,.18),transparent 30%), radial-gradient(circle at 15% 10%,rgba(196,111,82,.13),transparent 28%), radial-gradient(circle at 92% 82%,rgba(106,72,91,.22),transparent 34%), linear-gradient(135deg,#1D211E 0%,#282723 52%,#30252D 100%); box-shadow:0 28px 70px rgba(35,28,27,.24); } body.results-mode .chart-flank::before{ inset:0; background: linear-gradient(rgba(255,255,255,.025) 1px,transparent 1px), linear-gradient(90deg,rgba(255,255,255,.025) 1px,transparent 1px); background-size:42px 42px; mask-image:linear-gradient(to bottom,rgba(0,0,0,.8),transparent 90%); } body.results-mode .chart-flank::after{ content:''; position:absolute; left:50%; top:7%; bottom:7%; width:min(38vw,580px); transform:translateX(-50%); border:1px solid rgba(236,220,198,.08); border-radius:50%; box-shadow:0 0 100px rgba(181,198,174,.08),inset 0 0 100px rgba(181,198,174,.035); pointer-events:none; } body.results-mode .chart-panel{ height:100%; min-height:0; max-width:none; display:flex; flex-direction:column; padding:0; overflow:hidden; border:0; border-radius:0; color:#F7F0E7; background:transparent; box-shadow:none; } body.results-mode .chart-panel__head{ flex:0 0 auto; min-height:54px; margin:0 0 4px; padding:2px 8px 9px; border-bottom-color:rgba(247,240,231,.12); } body.results-mode .chart-panel__kicker{color:#B7C4B0} body.results-mode .chart-panel__head h2{color:#FFF9F1} body.results-mode .chart-panel .legend-row>span{ color:rgba(247,240,231,.78); border-color:rgba(247,240,231,.14); background:rgba(255,255,255,.055); } body.results-mode .variable-arrows{flex:0 0 auto;margin-bottom:0} body.results-mode .vside--left .vk__num, body.results-mode .vside--left .vk__ar{color:#DF8465} body.results-mode .vside--right .vk__num, body.results-mode .vside--right .vk__ar{color:#F3E9DA} body.results-mode .chart-panel>svg{ flex:1 1 auto; min-height:0; width:100%; height:100%; max-height:none; filter:drop-shadow(0 18px 28px rgba(0,0,0,.22)); } body.results-mode .planet-rail{ height:100%; min-height:0; display:flex; gap:6px; } body.results-mode .rail-head{ flex:0 0 50px; min-height:0; margin:0; color:#D8E0D3; } body.results-mode .rail-head small{color:rgba(247,240,231,.52)} body.results-mode .planet-rail>div[id]{ flex:1 1 auto; min-height:0; display:grid; grid-template-rows:repeat(13,minmax(0,1fr)); gap:4px; } body.results-mode .planet-tile{ min-height:0; height:100%; padding:3px 8px; border-radius:8px; box-shadow:none; } body.results-mode .planet-tile .pn{font-size:.48rem} body.results-mode .planet-tile .pg{font-size:.74rem} body.results-mode .planet-rail--des .planet-tile{ border-color:rgba(223,132,101,.22); background:linear-gradient(90deg,rgba(223,132,101,.16),rgba(223,132,101,.055)); } body.results-mode .planet-rail--des .planet-tile .ps, body.results-mode .planet-rail--des .planet-tile .pg{color:#F09A78} body.results-mode .planet-rail--des .planet-tile .pn{color:rgba(247,220,208,.56)} body.results-mode .planet-rail--pers .planet-tile{ border-color:rgba(240,232,217,.16); background:linear-gradient(90deg,rgba(255,255,255,.045),rgba(255,255,255,.09)); } body.results-mode .planet-rail--pers .planet-tile .ps, body.results-mode .planet-rail--pers .planet-tile .pg{color:#F3E9DA} body.results-mode .planet-rail--pers .planet-tile .pn{color:rgba(243,233,218,.48)} body.results-mode .design-summary{ height:100%; min-height:0; display:flex; flex-direction:column; padding:22px; overflow:hidden; color:#F7F0E7; border-color:rgba(247,240,231,.12); background:linear-gradient(155deg,rgba(255,255,255,.095),rgba(255,255,255,.035)); box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 18px 38px rgba(0,0,0,.15); backdrop-filter:blur(18px); } body.results-mode .summary-kicker{color:#B7C4B0} body.results-mode .design-summary h2{color:#FFF9F1;font-size:1.65rem} body.results-mode .design-summary .results-grid{flex:0 0 auto} body.results-mode .design-summary .result-card{ padding:12px 0; border-bottom-color:rgba(247,240,231,.1); } body.results-mode .design-summary .result-card .label{color:#AEBBA8} body.results-mode .design-summary .result-card .value{color:#FFF9F1} body.results-mode .type-card{ flex:1 1 auto; min-height:0; margin-top:14px; display:flex; align-items:center; position:relative; padding:18px; overflow:hidden; border-color:rgba(223,132,101,.17); background:linear-gradient(145deg,rgba(223,132,101,.13),rgba(255,255,255,.035)); } body.results-mode .type-card::before{ content:attr(data-type); position:absolute; top:10px; right:10px; max-width:95%; overflow:hidden; color:#FFF8EF; font-family:var(--font-serif); font-size:clamp(2.4rem,4vw,4.6rem); font-style:italic; line-height:.9; text-align:right; text-overflow:clip; white-space:nowrap; opacity:.045; pointer-events:none; } body.results-mode .type-card p{color:rgba(247,240,231,.72)} body.results-mode .type-card .type-card__name{color:#E9B497} body.results-mode #bodygraph #Head>path, body.results-mode #bodygraph #Ajna>path, body.results-mode #bodygraph #Throat>path, body.results-mode #bodygraph #G>path, body.results-mode #bodygraph #Ego>path, body.results-mode #bodygraph #Sacral>path, body.results-mode #bodygraph #SolarPlexus>path, body.results-mode #bodygraph #Spleen>path, body.results-mode #bodygraph #Root>path{ fill:#252925; stroke:#8D8B80; stroke-width:2px; filter:none; } body.results-mode #bodygraph .gate-inactive{fill:#4E514B !important;opacity:.5} body.results-mode #bodygraph .gate-pers{fill:#F3E9DA !important;filter:drop-shadow(0 0 3px rgba(243,233,218,.28))} body.results-mode #bodygraph .gate-des{fill:#DF8465 !important;filter:drop-shadow(0 0 4px rgba(223,132,101,.3))} body.results-mode #bodygraph text[id^="GateText"]{fill:#9C9B91} body.results-mode #bodygraph .gate-text-active{stroke:#252925;stroke-width:2.2px} body.results-mode #bodygraph .gate-text-pers{fill:#FFF7E9 !important} body.results-mode #bodygraph .gate-text-des{fill:#F09A78 !important} body.results-mode #bodygraph .gate-text-both{fill:#E7B29B !important} /* Hier standen neun weitere Klassik-Regeln mit EXAKT demselben Selektor wie der Block weiter unten — bei gleicher Spezifität gewann immer der spätere. Toter Code, entfernt 11.08.2026. */ @media(max-width:1260px){ body.results-mode .chart-flank{ grid-template-columns:minmax(112px,130px) minmax(390px,1fr) minmax(112px,130px); grid-template-areas:"des chart pers" "design design design"; height:auto; max-height:none; min-height:0; overflow:visible; } body.results-mode .chart-panel{height:min(760px,calc(100svh - 170px))} body.results-mode .planet-rail{height:min(760px,calc(100svh - 170px))} body.results-mode .design-summary{height:auto;max-width:none;margin-top:0} } @media(max-width:820px){ body.results-mode .calc-wrap{padding-inline:12px} body.results-mode .recalc-bar__info{flex-direction:column;gap:1px} body.results-mode .chart-flank{ grid-template-columns:1fr 1fr; /* Glance vor den Planeten-Spalten — s. Kommentar am Basis-Breakpoint */ grid-template-areas:"chart chart" "design design" "des pers"; padding:12px; border-radius:20px; } /* Verdichtung ganz oben (ERWARTUNGEN.md): Auf schmalen Schirmen stapelt das Grid die Glance UNTER das 720px hohe Chart — bei 375px erst ab ~1160px. Eine Zeile Typ ◆ Autorität ◆ Profil im Chart-Kopf beantwortet „Was heißt das für mich?" vor dem Scrollen, ohne die Details zu duplizieren. Auf Desktop bleibt sie aus (Glance steht dort bei ~250px). */ body.results-mode .chart-essence{ display:block;margin:2px 0 12px;text-align:center; font-family:var(--font-serif);font-size:1.05rem;line-height:1.45; color:#5C3D54;letter-spacing:.01em; } body.results-mode .chart-panel{height:720px} body.results-mode .planet-rail{height:auto} body.results-mode .planet-rail>div[id]{display:flex;flex-direction:column} body.results-mode .planet-tile{min-height:41px} } /* ============================================================ AURORA GARDEN — light studio palette Warm enough for the homepage, with living botanical depth. ============================================================ */ body.results-mode{background:#F3EEE6} body.results-mode .recalc-bar{ border-color:rgba(91,105,86,.16); background:rgba(255,252,246,.9); box-shadow:0 10px 30px rgba(74,64,58,.07); } body.results-mode .chart-flank{ color:#332D28; border-color:rgba(126,137,116,.22); background: radial-gradient(circle at 48% 42%,rgba(190,205,181,.44),transparent 31%), radial-gradient(circle at 8% 12%,rgba(215,145,116,.22),transparent 29%), radial-gradient(circle at 94% 86%,rgba(130,94,120,.22),transparent 34%), linear-gradient(135deg,#F8F3EA 0%,#E9EADF 48%,#E8DED8 100%); box-shadow:0 28px 70px rgba(75,65,59,.16); } body.results-mode .chart-flank::before{ background: linear-gradient(rgba(74,86,68,.045) 1px,transparent 1px), linear-gradient(90deg,rgba(74,86,68,.045) 1px,transparent 1px); background-size:42px 42px; animation:auroraGrid 24s linear infinite; } body.results-mode .chart-flank::after{ border-color:rgba(82,96,77,.13); box-shadow:0 0 100px rgba(114,137,105,.16),inset 0 0 100px rgba(255,255,255,.2); } body.results-mode .chart-panel{color:#332D28} body.results-mode .chart-panel__head{border-bottom-color:rgba(74,86,68,.14)} body.results-mode .chart-panel__kicker, body.results-mode .summary-kicker{color:#52604D} body.results-mode .chart-panel__head h2, body.results-mode .design-summary h2{color:#332D28} body.results-mode .chart-panel .legend-row>span{ color:#645C55; border-color:rgba(91,105,86,.17); background:rgba(255,252,246,.64); box-shadow:inset 0 1px 0 rgba(255,255,255,.7); } body.results-mode .vside--left .vk__num, body.results-mode .vside--left .vk__ar{color:#B7654C} body.results-mode .vside--right .vk__num, body.results-mode .vside--right .vk__ar{color:#5E4A57} body.results-mode .chart-panel>svg{ filter:drop-shadow(0 20px 26px rgba(73,61,55,.14)); transform-origin:50% 52%; animation:chartHover 8s ease-in-out infinite; } body.results-mode .rail-head{color:#465440} body.results-mode .rail-head small{color:#716A62} body.results-mode .planet-rail--des .planet-tile{ border-color:rgba(183,101,76,.25); background:linear-gradient(90deg,rgba(255,247,240,.84),rgba(225,174,151,.2)); box-shadow:inset 3px 0 0 rgba(183,101,76,.3); } body.results-mode .planet-rail--des .planet-tile .ps, body.results-mode .planet-rail--des .planet-tile .pg{color:#A9533C} body.results-mode .planet-rail--des .planet-tile .pn{color:#82665B} body.results-mode .planet-rail--pers .planet-tile{ border-color:rgba(94,74,87,.19); background:linear-gradient(90deg,rgba(255,252,246,.62),rgba(94,74,87,.11)); box-shadow:inset -3px 0 0 rgba(94,74,87,.22); } body.results-mode .planet-rail--pers .planet-tile .ps, body.results-mode .planet-rail--pers .planet-tile .pg{color:#4E3E49} body.results-mode .planet-rail--pers .planet-tile .pn{color:#746B63} body.results-mode .design-summary{ color:#332D28; border-color:rgba(94,74,87,.18); background:linear-gradient(155deg,rgba(255,252,247,.78),rgba(232,218,218,.58)); box-shadow:inset 0 1px 0 rgba(255,255,255,.72),0 18px 38px rgba(79,64,71,.1); } body.results-mode .design-summary .result-card{border-bottom-color:rgba(94,74,87,.13)} body.results-mode .design-summary .result-card .label{color:#52604D} body.results-mode .design-summary .result-card .value{color:#3B3037} body.results-mode .type-card{ border-color:rgba(183,101,76,.2); background:linear-gradient(145deg,rgba(255,248,241,.84),rgba(196,146,159,.2)); container-type:inline-size; /* Wasserzeichen skaliert an der Kartenbreite, nicht am Viewport */ } body.results-mode .type-card::before{color:#5E4A57;opacity:.055} body.results-mode .type-card p{color:#6B625A} body.results-mode .type-card .type-card__name{color:#8A4F65} body.results-mode .type-card::before{ top:14px; left:12px; right:12px; max-width:none; overflow:visible; /* cqi = 1% der Kartenbreite: „Manifestierender Generator" (längster Typ) passt bei jeder Breite hinein, ohne dass overflow:hidden mitten im Wort abschneidet. */ font-size:clamp(1.6rem,11cqi,2.7rem); line-height:.82; text-align:center; white-space:normal; overflow-wrap:break-word; } body.results-mode #bodygraph #Head>path, body.results-mode #bodygraph #Ajna>path, body.results-mode #bodygraph #Throat>path, body.results-mode #bodygraph #G>path, body.results-mode #bodygraph #Ego>path, body.results-mode #bodygraph #Sacral>path, body.results-mode #bodygraph #SolarPlexus>path, body.results-mode #bodygraph #Spleen>path, body.results-mode #bodygraph #Root>path{ fill:rgba(255,252,246,.7); stroke:#8E897E; filter:drop-shadow(0 4px 6px rgba(67,56,51,.08)); transition:filter .35s ease,transform .35s ease,fill .55s ease; transform-box:fill-box; transform-origin:center; } body.results-mode #bodygraph .gate-inactive{fill:#C8C8BC !important;opacity:.42} body.results-mode #bodygraph .gate-pers{fill:#5E4A57 !important;filter:drop-shadow(0 0 3px rgba(94,74,87,.24))} body.results-mode #bodygraph .gate-des{fill:#C36F53 !important;filter:drop-shadow(0 0 4px rgba(195,111,83,.28))} body.results-mode #bodygraph text[id^="GateText"]{fill:#958E84} body.results-mode #bodygraph .gate-text-active{stroke:#F7F3EC;stroke-width:2.2px} body.results-mode #bodygraph .gate-text-pers{fill:#4C3946 !important} body.results-mode #bodygraph .gate-text-des{fill:#B55D43 !important} body.results-mode #bodygraph .gate-text-both{fill:#7A4D56 !important} /* Fallback-Ton für „definiert", falls hdTintCenters() einmal nicht liefe. Früher standen hier neun BUNTE Klassik-Farben. Sie waren der Grund der seit Wochen wiederkehrenden „bunten Zentren": renderChart() schrieb sie zusätzlich als fill-Attribut, die richtige Quellenfarbe überdeckte sie nur per Klasse — überall ohne dieses CSS (SVG-Export, Seiten ohne neu-theme.css) kamen sie zurück. Seit 11.08.2026 setzt hdTintCenters() die Quellenfarbe als ATTRIBUT (WEB-20260811-KLASSIKDEFAULT); dieser Ton ist nur noch Notnagel und bewusst neutral: sichtbar „definiert", aber weder Aubergine noch Salbei — ein Fehlzustand fällt so auf, ohne eine falsche Quelle zu behaupten. */ body.results-mode #bodygraph .center-def-head path{fill:#6E6A72 !important;stroke:#4F4B54 !important} body.results-mode #bodygraph .center-def-ajna path{fill:#6E6A72 !important;stroke:#4F4B54 !important} body.results-mode #bodygraph .center-def-throat path{fill:#6E6A72 !important;stroke:#4F4B54 !important} body.results-mode #bodygraph .center-def-g path{fill:#6E6A72 !important;stroke:#4F4B54 !important} body.results-mode #bodygraph .center-def-ego path{fill:#6E6A72 !important;stroke:#4F4B54 !important} body.results-mode #bodygraph .center-def-sacral path{fill:#6E6A72 !important;stroke:#4F4B54 !important} body.results-mode #bodygraph .center-def-sp path{fill:#6E6A72 !important;stroke:#4F4B54 !important} body.results-mode #bodygraph .center-def-spleen path{fill:#6E6A72 !important;stroke:#4F4B54 !important} body.results-mode #bodygraph .center-def-root path{fill:#6E6A72 !important;stroke:#4F4B54 !important} body.results-mode #bodygraph .gate-pers, body.results-mode #bodygraph .gate-des, body.results-mode #bodygraph .gate-both{ transform-box:fill-box; transform-origin:center; animation:energyCurrent 2.45s ease-in-out infinite; animation-delay:var(--energy-delay,0s); } body.results-mode #bodygraph .gate-text-active{ animation:gateSpark 2.9s ease-in-out infinite; animation-delay:var(--energy-delay,0s); } body.results-mode #bodygraph [class*="center-def-"]>path{ animation:centerAura 5.4s ease-in-out infinite; animation-delay:var(--center-delay,0s); } /* Auf dem Telefon atmen die Zentren NICHT (WEB-20260831-IOS-LEERE-FLAECHEN). `centerAura` und `gateSpark` animieren die `filter`-Eigenschaft — der einzige Animationstyp auf dieser Seite, den kein Browser auf der GPU halten kann: Jedes Bild muss neu gerastert werden. Gemessen sind das auf dem Connection-Rechner neun Zentren plus die aktiven Tor-Zahlen, in einem Dokument von 13.383 px mit 4.368 SVG-Knoten. iOS Safari verwirft daraufhin Kacheln und zeichnet sie beim Zurueckscrollen erst nach Sekunden nach. Der statische Schatten bleibt, nur der Puls entfaellt — auf Armlaenge kaum wahrnehmbar, das Ruckeln dagegen sehr. Desktop behaelt ihn. */ @media (max-width:900px){ body.results-mode #bodygraph [class*="center-def-"]>path, body.results-mode #bodygraph .gate-text-active{ animation:none; } } body.results-mode #bodygraph [class*="center-def-"]:hover>path{ filter:drop-shadow(0 0 14px rgba(94,74,87,.25)); transform:scale(1.025); } @keyframes auroraGrid{ from{background-position:0 0,0 0} to{background-position:42px 42px,-42px 42px} } @keyframes chartHover{ 0%,100%{transform:translateY(0)} 50%{transform:translateY(-4px)} } @keyframes energyCurrent{ 0%,100%{opacity:.7;filter:drop-shadow(0 0 1px rgba(94,74,87,.1));transform:scale(.995)} 45%,60%{opacity:1;filter:drop-shadow(0 0 10px rgba(195,111,83,.42));transform:scale(1.018)} } @keyframes gateSpark{ 0%,100%{opacity:.76;filter:none} 50%{opacity:1;filter:drop-shadow(0 0 4px rgba(183,101,76,.42))} } @keyframes centerAura{ 0%,100%{filter:drop-shadow(0 4px 6px rgba(67,56,51,.08))} 50%{filter:drop-shadow(0 6px 13px rgba(94,74,87,.2))} } @media(prefers-reduced-motion:reduce){ body.results-mode .chart-flank::before, body.results-mode .chart-panel>svg, body.results-mode #bodygraph .gate-pers, body.results-mode #bodygraph .gate-des, body.results-mode #bodygraph .gate-both, body.results-mode #bodygraph [class*="center-def-"]>path{ animation:none !important; } } /* ============================================================ CHART-SWITCHER — kleine Werkzeug-Pills unter dem Hero (Charts-Hub-Familie: Bodygraph · Connection · Transit · Zyklen) ============================================================ */ .chart-switcher{display:flex;justify-content:center;flex-wrap:wrap;gap:8px;position:relative;z-index:5;margin:-16px auto 0;padding:0 16px} .chart-switcher a{font-size:var(--font-size-xs);font-weight:600;color:var(--color-taupe-dark);border:1px solid var(--color-border);border-radius:999px;padding:7px 16px;background:var(--color-surface);text-decoration:none;transition:all var(--transition)} .chart-switcher a:hover{border-color:var(--color-taupe);transform:translateY(-1px)} .chart-switcher a.on{background:#5C3D54;border-color:#5C3D54;color:#FBF8F2} body.results-mode .chart-switcher{margin-top:10px} /* Mobil: 13 Pills brachen auf 375px in VIER Reihen um (170px) — zusammen mit der Geburtsdaten-Leiste standen 315px vor dem ersten Inhalt. Die Werkzeugwahl ist auf einer Ergebnisseite aber zweitrangig; das Ergebnis gehört nach oben. Deshalb eine Reihe zum Wischen: gleiche Pills, ein Tap wie vorher, nur ~128px weniger Höhe. Die weiche Kante rechts signalisiert, dass es weitergeht; scrollActivePillIntoView() in main.js holt den aktiven Pill in den Blick. */ @media(max-width:820px){ .chart-switcher{ flex-wrap:nowrap; justify-content:flex-start; overflow-x:auto; overscroll-behavior-x:contain; scroll-snap-type:x proximity; -webkit-overflow-scrolling:touch; scrollbar-width:none; padding:2px 16px; } .chart-switcher::-webkit-scrollbar{display:none} .chart-switcher a{flex:0 0 auto;scroll-snap-align:start} /* Weiche Kante nur zu der Seite, wo wirklich noch etwas liegt (data-edge setzt main.js beim Laden und beim Wischen). Eine feste Blende an beiden Rändern würde am Anfang den ersten Pill anschneiden — das liest sich als Fehler statt als Hinweis. */ .chart-switcher[data-edge="right"]{ -webkit-mask-image:linear-gradient(to right,#000 calc(100% - 26px),transparent); mask-image:linear-gradient(to right,#000 calc(100% - 26px),transparent); } .chart-switcher[data-edge="left"]{ -webkit-mask-image:linear-gradient(to right,transparent,#000 26px); mask-image:linear-gradient(to right,transparent,#000 26px); } .chart-switcher[data-edge="both"]{ -webkit-mask-image:linear-gradient(to right,transparent,#000 26px,#000 calc(100% - 26px),transparent); mask-image:linear-gradient(to right,transparent,#000 26px,#000 calc(100% - 26px),transparent); } } /* ---------- „Meine Charts" — Profil-Zeile im Formular (chart-library.js) ---------- */ .chart-lib{display:flex;align-items:center;gap:8px;margin-bottom:var(--space-md);padding:9px 12px;background:var(--color-cream);border:1px dashed var(--color-border);border-radius:var(--radius-sm)} .chart-lib__ico{flex-shrink:0;color:var(--color-taupe-dark);opacity:.75} .chart-lib__sel{flex:1;min-width:0;padding:8px 10px;border:1px solid var(--color-border);border-radius:var(--radius-sm);font-size:var(--font-size-xs);font-family:var(--font-sans);background:var(--color-surface);color:var(--color-text)} .chart-lib__sel:focus{outline:none;border-color:var(--color-taupe)} .chart-lib__save{flex-shrink:0;font-family:var(--font-sans);font-size:var(--font-size-xs);font-weight:600;color:var(--color-taupe-dark);background:transparent;border:1px solid var(--color-border);border-radius:999px;padding:7px 14px;cursor:pointer;transition:all var(--transition);white-space:nowrap} .chart-lib__save:hover{border-color:var(--color-taupe);color:var(--color-warm-dark)} .chart-lib__save:disabled{cursor:default;color:var(--color-taupe-dark)} .chart-lib__del{flex-shrink:0;width:26px;height:26px;display:flex;align-items:center;justify-content:center;font-size:16px;line-height:1;color:var(--color-text-muted);background:transparent;border:1px solid transparent;border-radius:50%;cursor:pointer;transition:all var(--transition)} .chart-lib__del:hover{color:#B0704F;border-color:currentColor} .chart-lib--empty .chart-lib__save{margin-left:auto} /* ---------- Geführter Pfad „Dein Chart in 5 Schritten" (bodygraph + familie) ---------- */ /* width:100% nötig: die Ergebnis-Container sind zentrierte Flex-Spalten, sonst schrumpft die Karte auf Textbreite (~686px statt 880px). */ .guide{width:100%;max-width:880px;margin:0 auto;animation:fadeUp .6s ease} .guide__head{text-align:center;margin-bottom:var(--space-md)} .guide__eyebrow{font-size:var(--font-size-xs);font-weight:600;text-transform:uppercase;letter-spacing:.12em;color:var(--color-taupe-dark);margin-bottom:4px} .guide__head h2{font-family:var(--font-serif);font-size:clamp(1.4rem,1.1rem + 1vw,1.85rem);color:var(--color-warm-dark)} .guide__card{background:var(--color-surface);border:1px solid var(--color-border-light);border-radius:var(--radius-lg);box-shadow:var(--shadow-sm);padding:var(--space-xl)} /* Wegpunkte statt nackter Dots: der Newbie-Weg füllt sich Schritt für Schritt (Plum = Weg-Farbe) */ .guide__dots{position:relative;display:flex;justify-content:space-between;align-items:center;max-width:300px;margin:0 auto var(--space-md)} .guide__dots::before{content:"";position:absolute;left:5px;right:5px;top:50%;height:1.5px;background:var(--color-border-light);transform:translateY(-50%)} .guide__trail{position:absolute;left:5px;top:50%;height:1.5px;background:#5C3D54;transform:translateY(-50%);transition:width .35s ease;max-width:calc(100% - 10px);pointer-events:none} .guide__dot{position:relative;z-index:1;width:11px;height:11px;border-radius:50%;border:1px solid var(--color-taupe);background:var(--color-surface);cursor:pointer;padding:0;transition:all var(--transition)} .guide__dot.done{background:#5C3D54;border-color:#5C3D54} .guide__dot.on{background:#5C3D54;border-color:#5C3D54;transform:scale(1.3);box-shadow:0 0 0 4px rgba(92,61,84,.14)} /* Zweispalt: Mini-Chart mit Gold-Spotlight links („Das Bild zuerst"), Inhalt rechts */ .guide__grid{display:grid;grid-template-columns:190px 1fr;gap:var(--space-xl);align-items:center} .guide__chart{position:relative} .guide__chart svg{width:100%;height:auto;display:block} .guide__chart::before{content:"";position:absolute;inset:-12% -18%;border-radius:50%;background:radial-gradient(circle,rgba(197,168,110,.3) 0%,rgba(197,168,110,0) 66%);opacity:0;transition:opacity .5s ease;pointer-events:none} .guide__chart.aura-mode::before{opacity:1;animation:gaura 3s ease-in-out infinite} @keyframes gaura{0%,100%{transform:scale(.95)}50%{transform:scale(1.06)}} .guide__chart [data-c]{transition:filter .5s ease} .guide__chart .gspot{animation:gspot 2.8s ease-in-out infinite} @keyframes gspot{0%,100%{filter:drop-shadow(0 0 3px rgba(197,168,110,.8)) drop-shadow(0 0 8px rgba(197,168,110,.45))}50%{filter:drop-shadow(0 0 6px rgba(197,168,110,1)) drop-shadow(0 0 14px rgba(197,168,110,.65))}} .guide__body{text-align:left;min-height:220px;transition:opacity .22s ease,transform .22s ease} .guide__body.swap{opacity:0;transform:translateY(8px)} .guide__q{font-family:var(--font-serif);font-size:clamp(1.15rem,1rem + .6vw,1.45rem);color:var(--color-warm-dark);margin-bottom:6px} .guide__label{font-size:var(--font-size-xs);font-weight:600;text-transform:uppercase;letter-spacing:.1em;color:var(--color-text-muted);margin-bottom:6px} .guide__value{font-family:var(--font-serif);font-size:clamp(1.4rem,1.05rem + 1.2vw,2rem);color:#5C3D54;margin-bottom:10px} .guide__text{font-size:var(--font-size-base);line-height:1.75;color:var(--color-text-soft);max-width:620px;margin:0 auto} .guide__cta{display:inline-block;margin-top:var(--space-md);font-size:var(--font-size-sm);font-weight:600;color:#5C3D54;text-decoration:none;border-bottom:1px solid currentColor;padding-bottom:1px} .guide__cta:hover{color:#432C3E} .guide__text .type-card__name{color:var(--color-warm-dark);font-weight:600} .guide__nav{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:var(--space-lg)} .guide__count{font-size:var(--font-size-xs);color:var(--color-text-muted)} .guide__nav .ghost-btn:disabled{opacity:.35;cursor:default} /* ── „Dein Chart verstehen" — Zielgruppen-Weiche (Startseiten-Fork-Muster als Umschalter über Guide- und Detail-Panel, nur bodygraph-rechner) ── */ .understand{width:100%;max-width:1040px;margin:0 auto;animation:fadeUp .6s ease} /* Zwei-Wege-Weiche im Gabelungs-Schema der Startseite: Frage → goldener Ursprung → Äste in Wegfarben (Plum = geführt, Salbei = Detail). Der Ast des aktiven Tabs bleibt kräftig (data-view auf #understandSection, gesetzt von understandGo). */ /* Weggabelung (WEB-20260805-GABELUNG): zwei Testleser haben die Abzweigung übersehen — die Gabel war ein dünner Strich (1,6 px, Opacity .3) mit Mini-Punkten. Jetzt eine echte Bühne: große Frage, kräftige Äste, auf denen dauerhaft Licht-Läufer vom goldenen Ursprung in die Karten fließen (SMIL animateMotion, filterlos = billig), und die wartende Karte lädt per Puls-Ring zum Klick ein. Detail ist seitdem der Default, der Guide bleibt einen Klick entfernt. */ /* Gold-Lichtkegel am Ursprung — identisch zur Startseiten-Gabel (.fork::before). Der Mount ist die Sektion selbst (.path-wrap / .understand), deshalb position:relative. */ .path-wrap,.understand{position:relative} .path-wrap::before,.understand::before{content:"";position:absolute;left:50%;top:0;width:min(520px,80%);height:150px; transform:translateX(-50%);pointer-events:none;z-index:0; background:radial-gradient(closest-side,rgba(197,168,110,.16),rgba(197,168,110,0))} .path-head,.path-branches,.path-fork{position:relative;z-index:1} /* Schriftgrad der Gabel-Frage: EIN Wert für Startseite und alle Rechner (Alex, 05.08.2026 „v. a. die Größe der Überschrift"). Wer ihn ändert, ändert ihn hier UND in .fork-head auf index.html — sonst laufen die Gabeln auseinander. */ .path-head{text-align:center;font-family:var(--font-serif);font-size:clamp(1.25rem,1.05rem + 1vw,1.7rem);letter-spacing:.02em;color:var(--color-warm-dark)} .path-branches{display:block;width:100%;height:76px;margin:4px auto 2px;overflow:visible} .path-branches path{fill:none;stroke-width:2.6;vector-effect:non-scaling-stroke;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:1;animation:pathDraw .9s cubic-bezier(.22,.61,.36,1) .35s forwards} @keyframes pathDraw{to{stroke-dashoffset:0}} .path-branch--new{stroke:#5C3D54;stroke-opacity:.42;transition:stroke-opacity .3s ease} .path-branch--pro{stroke:#5F6E55;stroke-opacity:.48;transition:stroke-opacity .3s ease} .path-dot{fill:#C5A86E} .path-dot--halo{fill:#C5A86E;opacity:.45;transform-origin:center;transform-box:fill-box;animation:pathPulse 3.2s ease-in-out 1.3s infinite} /* Licht-Läufer: kleine Leuchtpunkte wandern die Äste entlang in die Karten — die Bewegung selbst erklärt „hier geht es lang". Filterlos, SMIL-getaktet. */ .path-runner .pr-halo{fill:#C5A86E;opacity:.35} .path-runner--new .pr-core{fill:#5C3D54} .path-runner--pro .pr-core{fill:#5F6E55} @keyframes pathPulse{0%,100%{transform:scale(1);opacity:.45}50%{transform:scale(1.4);opacity:.2}} .path-tip{opacity:0;animation:pathTip .4s ease 1.15s forwards;transform-origin:center;transform-box:fill-box;transition:transform .25s ease} .path-tip--new{fill:#5C3D54} .path-tip--pro{fill:#5F6E55} @keyframes pathTip{to{opacity:1}} .understand[data-view="guide"] .path-branch--new,.understand[data-view="detail"] .path-branch--pro, .path-wrap[data-view="guide"] .path-branch--new,.path-wrap[data-view="detail"] .path-branch--pro, .understand:has(.path-card--new:hover) .path-branch--new,.understand:has(.path-card--pro:hover) .path-branch--pro, .path-wrap:has(.path-card--new:hover) .path-branch--new,.path-wrap:has(.path-card--pro:hover) .path-branch--pro{stroke-opacity:.9} .understand[data-view="guide"] .path-tip--new,.understand[data-view="detail"] .path-tip--pro, .path-wrap[data-view="guide"] .path-tip--new,.path-wrap[data-view="detail"] .path-tip--pro{transform:scale(1.45)} /* Frei stehende Weiche-Mounts (Transit/Connection/Familie/Kinder/IK): gleiche Bühne wie die .understand-Sektion des Bodygraphs — nie volle Seitenbreite. */ .path-wrap{width:100%;max-width:1040px;margin:0 auto var(--space-md);padding-inline:var(--space-xl)} @media (max-width:680px){.path-wrap{padding-inline:var(--space-md)}} /* Karten-Maße identisch zur Startseiten-Gabel (.fork-card) — Padding, Radius, Abstand, Kicker, Mini-Chart und Titelgrad. Zwilling in index.html. */ .path-fork{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:var(--space-lg)} .path-card{position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:10px;text-align:left;padding:28px 30px 24px;border-radius:22px;border:1px solid var(--color-border-light);background:var(--color-surface);cursor:pointer;font:inherit;transition:opacity var(--transition),transform var(--transition),box-shadow var(--transition),border-color var(--transition);opacity:.72} .path-card--new{background:linear-gradient(135deg,#F6EFF4 0%,#FFFDF8 72%)} .path-card--pro{background:linear-gradient(135deg,#F0F3EC 0%,#FFFDF8 72%)} /* Farb-Topline (Andock-Punkt der Äste) + Mini-Bodygraph als Scan-Anker */ .path-card::before{content:"";position:absolute;inset:0 0 auto;height:3px;border-radius:var(--radius-lg) var(--radius-lg) 0 0;opacity:.55;transition:opacity var(--transition)} .path-card--new::before{background:linear-gradient(90deg,rgba(92,61,84,0),rgba(92,61,84,.55) 50%,rgba(92,61,84,0))} .path-card--pro::before{background:linear-gradient(90deg,rgba(95,110,85,0),rgba(95,110,85,.6) 50%,rgba(95,110,85,0))} .path-card[aria-selected="true"]::before{opacity:1} .path-mini{position:absolute;top:22px;right:24px;height:58px;width:auto;opacity:.5;transition:opacity var(--transition)} .path-card:hover .path-mini,.path-card[aria-selected="true"] .path-mini{opacity:.8} .path-mini--new{color:#5C3D54} .path-mini--pro{color:#5F6E55} .path-card:hover{opacity:1;transform:translateY(-2px);box-shadow:var(--shadow-sm)} .path-card:focus-visible{outline:2px solid #5C3D54;outline-offset:2px} .path-card[aria-selected="true"]{opacity:1;box-shadow:var(--shadow-md)} .path-card--new[aria-selected="true"]{border-color:rgba(92,61,84,.65);box-shadow:var(--shadow-md),inset 0 0 0 1px rgba(92,61,84,.45)} .path-card--pro[aria-selected="true"]{border-color:rgba(95,110,85,.75);box-shadow:var(--shadow-md),inset 0 0 0 1px rgba(95,110,85,.5)} /* Die NICHT gewählte Karte lädt ein: sanfter Puls-Ring in ihrer Wegfarbe, versetzt zum Herz-Rhythmus der Site. Macht sichtbar, dass hier eine zweite Tür offen steht — genau die Abzweigung, die Testleser übersehen haben. */ .path-card--new[aria-selected="false"]{animation:pathInviteNew 4.6s ease-in-out 1.8s infinite} .path-card--pro[aria-selected="false"]{animation:pathInvitePro 4.6s ease-in-out 1.8s infinite} @keyframes pathInviteNew{0%,100%{box-shadow:0 0 0 0 rgba(92,61,84,0)}50%{box-shadow:0 8px 22px rgba(51,45,40,.08),0 0 0 6px rgba(92,61,84,.16)}} @keyframes pathInvitePro{0%,100%{box-shadow:0 0 0 0 rgba(95,110,85,0)}50%{box-shadow:0 8px 22px rgba(51,45,40,.08),0 0 0 6px rgba(95,110,85,.2)}} .path-card[aria-selected="true"]::after{content:"";position:absolute;left:50%;bottom:-7px;width:12px;height:12px;transform:translateX(-50%) rotate(45deg);background:#FFFDF8;border-right:1px solid;border-bottom:1px solid;border-color:inherit} /* Freiraum für den Mini-Bodygraph oben rechts — sonst läuft ein langer Titel („Lies dein Wetter in 5 Schritten") in die Grafik. */ .path-card__k,.path-card__t{padding-right:64px} .path-card__k{font-size:.72rem;font-weight:700;letter-spacing:.19em;text-transform:uppercase} .path-card--new .path-card__k{color:#5C3D54} .path-card--pro .path-card__k{color:#5F6E55} .path-card__t{font-family:var(--font-serif);font-size:clamp(1.15rem,1rem + .6vw,1.375rem);color:var(--color-warm-dark);line-height:1.3} .path-card__p{font-size:.9rem;color:var(--color-text-soft);line-height:1.6} .understand .guide,.understand .detail-section{margin-inline:auto} .guide__study{display:block;text-align:center;margin-top:12px;font-size:var(--font-size-sm);font-weight:600;color:#5C3D54;text-decoration:none} .guide__study:hover{color:#432C3E;text-decoration:underline;text-underline-offset:3px} @media (max-width:680px){ /* Wie die Startseiten-Gabel: gestapelt statt zwei enge Spalten — die zweite Tür bleibt dadurch auch mobil eine sichtbare Karte, keine halbe Kachel. */ .path-fork{grid-template-columns:1fr;gap:10px} .path-card{padding:20px 22px 18px;gap:8px} .path-card[aria-selected="true"]::after{display:none} .path-mini{height:46px;top:20px;right:20px} .path-card__k,.path-card__t{padding-right:52px} /* Gestapelt trägt die Gabel-Grafik nicht mehr: Die Äste enden über einer einspaltigen Karte und zeigen ins Leere. Gleiches Vorgehen wie auf der Startseite — Grafik aus, die Frage plus die zwei Karten machen die Wahl. */ .path-branches{display:none} .path-head{margin-bottom:14px} .path-wrap::before,.understand::before{height:100px} } @media(max-width:680px){.guide__card{padding:var(--space-lg)}.guide__body{min-height:190px;text-align:center} .guide__grid{grid-template-columns:1fr;gap:var(--space-md)} .guide__chart{width:132px;margin:0 auto} } @media(prefers-reduced-motion:reduce){ .path-branches path{animation:none;stroke-dashoffset:0} .path-tip{animation:none;opacity:1;transition:none} .path-dot--halo{animation:none} .path-runner{display:none} .path-card[aria-selected="false"]{animation:none} .guide__chart.aura-mode::before{animation:none} .guide__chart .gspot{animation:none;filter:drop-shadow(0 0 4px rgba(197,168,110,.85)) drop-shadow(0 0 9px rgba(197,168,110,.5))} .guide__body,.guide__body.swap{transition:none;opacity:1;transform:none} .guide__trail{transition:none} } /* ---------- „Fortgeschritten"-Trenner in „Design im Detail" ---------- */ .detail-divider{grid-column:1/-1;text-align:center;margin:var(--space-xl) auto var(--space-sm);max-width:560px} .detail-divider__tag{display:inline-block;font-size:10.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;padding:4px 12px;border-radius:999px;background:rgba(92,61,84,.1);color:#5C3D54;margin-bottom:8px} .detail-divider h4{font-family:var(--font-serif);font-size:var(--font-size-md);color:var(--color-warm-dark);margin:0 0 6px} .detail-divider p{font-size:var(--font-size-xs);line-height:1.65;color:var(--color-text-soft);margin:0} /* Kurs-Verweis unter dem Advanced-Hinweis (28.08.2026) */ .detail-divider__course{margin-top:8px !important;font-weight:600} .detail-divider__course a{color:#5C3D54;text-decoration:underline;text-underline-offset:3px} /* ---------- „Deine neun Zentren" (bodygraph-rechner) ---------- */ .centers-head{text-align:center;max-width:560px;margin:var(--space-2xl) auto var(--space-lg)} .centers-head h3{font-family:var(--font-serif);font-size:clamp(1.3rem,1.05rem + .9vw,1.7rem);color:var(--color-warm-dark);margin-bottom:var(--space-xs)} .centers-intro{font-size:var(--font-size-sm);color:var(--color-text-soft);line-height:1.65;margin:0} .centers-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px} .center-card{background:var(--color-cream);border:1px solid var(--color-border-light);border-left:3px solid #5C3D54;border-radius:var(--radius-md);padding:16px 18px} .center-card--open{border-left:3px dashed var(--color-border)} .center-card__top{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:8px} .center-card__name{font-family:var(--font-serif);font-size:var(--font-size-sm);color:var(--color-warm-dark)} .center-card__chip{flex-shrink:0;font-size:10.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;padding:3px 9px;border-radius:999px;background:#5C3D54;color:#FBF8F2} .center-card--open .center-card__chip{background:transparent;border:1px solid var(--color-border);color:var(--color-text-muted)} .center-card p{font-size:var(--font-size-xs);line-height:1.65;color:var(--color-text-soft);margin:0} @media(max-width:1000px){.centers-grid{grid-template-columns:1fr 1fr}} @media(max-width:640px){.centers-grid{grid-template-columns:1fr}} /* ============================================================ ERGEBNIS-STANDARD-BLÖCKE (alle Rechner) 1) .result-reveal — Kernaussage-Banner über der Bühne 2) .channel-group — gruppierte Kanal-Listen (Familie) 3) .discover — „Entdecke mehr"-Karten am Ergebnis-Ende (gerendert von hdRenderDiscover in hd-core.js über
) ============================================================ */ .result-reveal, body.results-mode .design-summary.result-reveal{display:block;width:100%;max-width:860px;height:auto;overflow:visible;margin-inline:auto;padding:var(--space-xl);text-align:center} .result-reveal__kicker{font-size:var(--font-size-xs);letter-spacing:.24em;text-transform:uppercase;color:#5F6E55;margin:0 0 12px} .result-reveal__title{font-family:var(--font-serif);font-size:clamp(1.55rem,3.4vw,2.15rem);line-height:1.18;color:var(--color-warm-dark);margin:0} .result-reveal__sub{font-size:var(--font-size-sm);color:var(--color-text-soft);line-height:1.7;max-width:640px;margin:10px auto 0} .channel-group+.channel-group{margin-top:var(--space-2xl)} .channel-group__title{font-family:var(--font-serif);font-size:clamp(1.1rem,1rem + .5vw,1.35rem);color:var(--color-warm-dark);margin:0 0 4px;text-align:center} .channel-group__title .count{font-family:var(--font-sans);font-size:var(--font-size-xs);font-weight:600;color:var(--color-text-muted);vertical-align:middle;margin-left:8px} .channel-group__sub{font-size:var(--font-size-xs);color:var(--color-text-soft);line-height:1.65;max-width:560px;margin:0 auto var(--space-md);text-align:center} .channel-chip--group b{color:#5C3D54} .channel-chip--group .chip-badge{flex-shrink:0;font-size:10px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;padding:2px 8px;border-radius:999px;background:rgba(139,154,130,.18);color:#5F7057} .discover{max-width:980px;margin:0 auto;text-align:center;animation:fadeUp .6s ease} .discover__title{font-family:var(--font-serif);font-size:clamp(1.3rem,1.05rem + .9vw,1.7rem);color:var(--color-warm-dark);margin:0 0 6px} .discover__sub{font-size:var(--font-size-sm);color:var(--color-text-soft);margin:0 0 var(--space-lg)} .discover__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px} .discover-card{display:block;background:var(--color-surface);border:1px solid var(--color-border-light);border-radius:var(--radius-md);box-shadow:var(--shadow-sm);padding:18px 20px;text-align:left;text-decoration:none;transition:all var(--transition)} .discover-card:hover{transform:translateY(-3px);box-shadow:var(--shadow-md);border-color:var(--color-taupe)} .discover-card__kicker{font-size:10.5px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--color-text-muted);margin:0 0 6px} .discover-card__name{font-family:var(--font-serif);font-size:var(--font-size-md);color:var(--color-warm-dark);margin:0 0 6px} .discover-card__text{font-size:var(--font-size-xs);line-height:1.6;color:var(--color-text-soft);margin:0 0 10px} .discover-card__go{font-size:var(--font-size-xs);font-weight:600;color:#5C3D54} @media(max-width:820px){.discover__grid{grid-template-columns:1fr;max-width:420px;margin-inline:auto}} /* ============================================================ WISSENSSEITEN-VISUALS Geteilte Bausteine für die Artikelseiten (bisher lagen die .hd-viz-Regeln inline auf jeder Zentren-/Typ-/Autoritätsseite). Neu hier: die interaktive Zentren-Landkarte (.hd-map), die Zustands-Reihe (.hd-states) und die Kanal-Animation (.ch-viz). ============================================================ */ .hd-viz{margin:var(--space-2xl) 0;padding:var(--space-xl) var(--space-lg) var(--space-lg);background:radial-gradient(120% 90% at 50% 6%,#FBF8F2 0%,#F1E9DB 82%);border:1px solid var(--color-border-light);border-radius:var(--radius-xl);box-shadow:var(--shadow-sm);text-align:center} .hd-viz__stage{display:flex;justify-content:center;align-items:center} .hd-viz svg{width:auto;max-width:100%;overflow:visible} .hd-viz figcaption{max-width:46ch;margin:var(--space-md) auto 0;font-size:var(--font-size-sm);color:var(--color-text-soft);line-height:1.7} .hd-viz figcaption b{color:var(--color-warm-dark)} .bgv-ch{fill:none;stroke:#DBCFBB;stroke-width:2.4;stroke-linecap:round;vector-effect:non-scaling-stroke} .bgv-center{fill:#FBF8F2;stroke:#BBA88C;stroke-width:2.2;vector-effect:non-scaling-stroke} /* ---- Interaktive Zentren-Landkarte ---- Breitere Bühne als die 720er-Textspalte. Ausbruch über margin, NICHT über transform: .reveal.revealed setzt transform:translateY(0) und würde ein translateX(-50%) überschreiben. */ .hd-map{width:min(100vw - 32px,960px);margin:var(--space-2xl) 0;margin-left:calc((100% - min(100vw - 32px,960px))/2);padding:var(--space-xl) var(--space-xl) var(--space-lg)} .hd-map__grid{display:grid;grid-template-columns:minmax(0,300px) minmax(0,1fr);gap:var(--space-xl);align-items:start} .hd-map__stage{position:sticky;top:104px} .hd-map svg{display:block;width:100%;height:auto;max-width:300px;margin:0 auto;overflow:visible} .hd-map .bgv-ch{stroke:#CDBCA1;stroke-width:2.8} .hdm-c{cursor:pointer;transform-box:fill-box;transform-origin:center} .hdm-c path,.hdm-c rect{stroke:#A38B6B;stroke-width:2.8;transition:fill .28s ease,stroke .28s ease,opacity .28s ease} .hdm-halo{opacity:0;transition:opacity .28s ease;pointer-events:none} /* Aufbau-Choreografie. Wichtig: KEIN Keyframe blendet auf opacity:0 oder auf eine Nullbreite — sonst hängt die Lesbarkeit des Charts daran, dass die Animation tatsächlich läuft und durchläuft. Steht die Animationsuhr (Hintergrund-Tab, Prerender) oder fehlt JS, bleibt der Chart so in jedem Fall sichtbar. */ .hd-map.js-anim.is-in .bgv-ch{animation:hdmDraw .8s ease backwards;animation-delay:calc(var(--i)*.045s)} .hd-map.js-anim.is-in .hdm-c{animation:hdmPop .62s cubic-bezier(.2,.9,.3,1.35) backwards;animation-delay:calc(.42s + var(--i)*.085s)} @keyframes hdmDraw{from{opacity:.25}to{opacity:1}} @keyframes hdmPop{0%{transform:scale(.72)}62%{transform:scale(1.05)}100%{transform:scale(1)}} .hd-map.is-on .hdm-c path,.hd-map.is-on .hdm-c rect,.hd-map.is-on .hdm-c text{opacity:.32} .hd-map.is-on .hdm-c.on path,.hd-map.is-on .hdm-c.on rect{opacity:1;fill:#5C3D54;stroke:#4A3044} .hd-map.is-on .hdm-c.on text{opacity:1} .hd-map.is-on .hdm-c.on .hdm-halo{opacity:1} .hd-map__list{display:flex;flex-direction:column;gap:2px;text-align:left} .article-wrap a.hd-map__row,.hd-map__list button.hd-map__row{display:block;width:100%;background:none;font:inherit;color:inherit;text-align:left;cursor:pointer;padding:10px 14px;border:1px solid transparent;border-left:3px solid transparent;border-radius:var(--radius-lg);text-decoration:none;transition:background .2s,border-color .2s,transform .2s} .article-wrap a.hd-map__row:hover,.article-wrap a.hd-map__row:focus-visible,.article-wrap a.hd-map__row.on,.hd-map__list button.hd-map__row:hover,.hd-map__list button.hd-map__row:focus-visible,.hd-map__list button.hd-map__row.on{background:rgba(251,248,242,.92);border-color:rgba(92,61,84,.2);border-left-color:#5C3D54;transform:translateX(3px)} .hd-map__t{display:block;font-family:var(--font-serif);font-size:var(--font-size-md);color:var(--color-warm-dark);line-height:1.35} .hd-map__b{display:inline-block;margin-left:8px;padding:2px 9px;border-radius:999px;font-family:var(--font-sans);font-size:.6rem;font-weight:700;text-transform:uppercase;letter-spacing:.1em;color:#5C3D54;background:rgba(92,61,84,.1);vertical-align:middle} .hd-map__d{display:block;margin-top:3px;font-size:var(--font-size-xs);color:var(--color-text-soft);line-height:1.6} .hd-map__hint{margin:var(--space-md) 0 0;font-size:var(--font-size-xs);color:var(--color-taupe);text-align:center} @media (max-width:640px){ .hd-map{padding:var(--space-lg) var(--space-md)} .hd-map__grid{grid-template-columns:1fr;gap:var(--space-md)} .hd-map__stage{position:static} .hd-map svg{max-width:195px} } /* ---- Zustands-Reihe: definiert / undefiniert / offen ---- */ .hd-states__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-lg)} .hd-states__item svg{display:block;width:100%;max-width:110px;height:auto;margin:0 auto var(--space-sm)} .hd-states__t{display:block;font-family:var(--font-serif);font-size:var(--font-size-base);color:var(--color-warm-dark);margin-bottom:4px} .hd-states__d{display:block;font-size:var(--font-size-xs);color:var(--color-text-soft);line-height:1.6} .hds-box{stroke:#A38B6B;stroke-width:3;vector-effect:non-scaling-stroke} .hds-box.def{fill:#5C3D54;stroke:#4A3044} .hds-box.open{fill:#FBF8F2} /* Cremerand, damit ein aktives Tor auch auf dem gefärbten Zentrum lesbar bleibt. */ .hds-gate{fill:#5C3D54;stroke:#FBF8F2;stroke-width:2.5;vector-effect:non-scaling-stroke} .hds-gate.off{fill:#E3D8C6;stroke:#F1E9DB} @media (max-width:560px){.hd-states__grid{grid-template-columns:1fr;gap:var(--space-md);max-width:280px;margin-inline:auto}} /* ---- „Vom Tor zum Kanal" ---- */ .ch-viz svg{height:clamp(160px,36vw,225px)} .chv-line{fill:none;stroke:#5C3D54;stroke-width:9;stroke-linecap:round;stroke-dasharray:200;stroke-dashoffset:200;animation:chvDraw 7s ease-in-out infinite} .chv-gate{fill:#FBF8F2;stroke:#5C3D54;stroke-width:3.5;vector-effect:non-scaling-stroke;transform-box:fill-box;transform-origin:center;animation:chvGate 7s ease-in-out infinite} .chv-gate-t{fill:#5C3D54;font-family:var(--font-sans);font-size:27px;font-weight:700;text-anchor:middle;dominant-baseline:central} .chv-fill{animation:chvFill 7s ease-in-out infinite} .chv-bloom{fill:none;stroke:#5C3D54;stroke-width:4;opacity:0;transform-box:fill-box;transform-origin:center;animation:chvBloom 7s ease-out infinite} .chv-tag{fill:var(--color-taupe);font-family:var(--font-sans);font-size:21px;letter-spacing:.06em;text-anchor:middle;opacity:0;animation:chvTag 7s ease-in-out infinite} @keyframes chvDraw{0%,12%{stroke-dashoffset:200}42%,92%{stroke-dashoffset:0}100%{stroke-dashoffset:200}} @keyframes chvFill{0%,40%{fill:#FBF8F2;stroke:#BBA88C}52%,92%{fill:#5C3D54;stroke:#4A3044}100%{fill:#FBF8F2;stroke:#BBA88C}} @keyframes chvGate{0%,6%{transform:scale(1)}9%{transform:scale(1.18)}14%,100%{transform:scale(1)}} @keyframes chvBloom{0%,44%{transform:scale(.35);opacity:0}52%{opacity:.5}72%,100%{transform:scale(2.4);opacity:0}} @keyframes chvTag{0%,46%{opacity:0}56%,90%{opacity:1}100%{opacity:0}} @media (prefers-reduced-motion:reduce){ .chv-line{animation:none;stroke-dashoffset:0} .chv-fill{animation:none;fill:#5C3D54;stroke:#4A3044} .chv-gate,.chv-bloom{animation:none} .chv-tag{animation:none;opacity:1} .hdm-c path,.hdm-halo{transition:none} .hd-map.js-anim.is-in .bgv-ch,.hd-map.js-anim.is-in .hdm-c{animation:none} } /* ---- Autoritäts-Kaskade (innere-autoritaet) ---- Die Rangordnung als Fluss statt als Aufzählung. Die Aufbau-Animation hängt an .revealed, das der Scroll-Reveal aus main.js ohnehin setzt — kein eigenes JS. */ .auth-flow{padding:var(--space-xl) var(--space-lg) var(--space-lg)} .af{position:relative;list-style:none;max-width:520px;margin:0 auto;padding:0;text-align:left} .af::before{content:"";position:absolute;left:20px;top:24px;bottom:24px;width:2px;background:linear-gradient(#5C3D54,rgba(92,61,84,.18))} .af__step{position:relative;display:grid;grid-template-columns:42px minmax(0,1fr);gap:14px;align-items:center;padding:10px 0} .af__n{position:relative;z-index:1;width:42px;height:42px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:#FBF8F2;border:2px solid #5C3D54;color:#5C3D54;font-family:var(--font-sans);font-size:.82rem;font-weight:700} .af__cond{display:block;font-size:var(--font-size-xs);color:var(--color-text-soft);line-height:1.5} .af__res{display:block;margin-top:2px;font-family:var(--font-serif);font-size:var(--font-size-md);color:var(--color-warm-dark);line-height:1.3} .af__step:last-child .af__n{background:#5C3D54;border-color:#4A3044;color:#FBF8F2} .af__pulse{position:absolute;left:15px;width:12px;height:12px;border-radius:50%;background:#5C3D54;box-shadow:0 0 0 6px rgba(92,61,84,.16);opacity:0} .reveal.auth-flow.revealed .af__step{animation:afIn .52s cubic-bezier(.2,.8,.3,1) backwards;animation-delay:calc(.15s + var(--i)*.1s)} .reveal.auth-flow.revealed .af__pulse{animation:afPulse 2.6s ease-in-out 1.1s infinite} @keyframes afIn{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}} @keyframes afPulse{0%{top:18px;opacity:0}12%{opacity:1}88%{opacity:1}100%{top:calc(100% - 30px);opacity:0}} @media (max-width:560px){.af__step{gap:11px;grid-template-columns:36px minmax(0,1fr)}.af__n{width:36px;height:36px;font-size:.76rem}.af::before{left:17px}.af__pulse{left:12px}} @media (prefers-reduced-motion:reduce){ .reveal.auth-flow.revealed .af__step{animation:none} .af__pulse{display:none} } /* ---- Aura-Reihe (typen) ---- Vier Aura-Mechaniken als Bewegung: einhüllend, fokussiert, stoßend, abtastend. Skaliert wird per transform (nicht per SVG-Attribut r), damit die Animation überall läuft. */ .hd-wide{width:min(100vw - 32px,960px);margin-left:calc((100% - min(100vw - 32px,960px))/2)} .aura-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:var(--space-md)} .article-wrap a.aura-card{display:block;text-align:center;text-decoration:none;padding:10px 6px;border:1px solid transparent;border-radius:var(--radius-lg);transition:background .2s,border-color .2s,transform .2s} .article-wrap a.aura-card:hover,.article-wrap a.aura-card:focus-visible{background:rgba(251,248,242,.92);border-color:rgba(92,61,84,.2);transform:translateY(-3px)} .aura-card svg{display:block;width:100%;max-width:112px;height:auto;margin:0 auto 10px;overflow:visible} .aura-card__n{display:block;font-family:var(--font-serif);font-size:var(--font-size-base);color:var(--color-warm-dark);line-height:1.25} .aura-card__s{display:block;margin-top:4px;font-size:.58rem;font-weight:700;text-transform:uppercase;letter-spacing:.09em;color:#5C3D54} .aura-card__d{display:block;margin-top:6px;font-size:var(--font-size-xs);color:var(--color-text-soft);line-height:1.55} .aura-core{fill:#5C3D54} .aura-w{fill:none;stroke:#5C3D54;stroke-width:3;stroke-linecap:round;transform-box:fill-box;transform-origin:center} .aura-cone{fill:#5C3D54;transform-box:fill-box;transform-origin:left center} .reveal.aura-viz.revealed .aura-w{animation:auraOut 3.4s ease-out infinite} .reveal.aura-viz.revealed .a-mg .aura-w{animation-duration:2s} .reveal.aura-viz.revealed .a-proj .aura-cone{animation:auraFocus 3.4s ease-in-out infinite} .reveal.aura-viz.revealed .a-refl .aura-w{animation:auraSpin 14s linear infinite} @keyframes auraOut{0%{transform:scale(.42);opacity:0}18%{opacity:.6}100%{transform:scale(1);opacity:0}} @keyframes auraFocus{0%,100%{transform:scaleX(.55);opacity:.25}50%{transform:scaleX(1);opacity:.6}} @keyframes auraSpin{to{transform:rotate(360deg)}} @media (max-width:820px){.aura-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-lg)}} @media (max-width:359px){.aura-grid{grid-template-columns:1fr;max-width:250px;margin-inline:auto}} @media (prefers-reduced-motion:reduce){ .reveal.aura-viz.revealed .aura-w,.reveal.aura-viz.revealed .aura-cone{animation:none;opacity:.5} } /* Manifestor: verschlossene Hülle + nach außen stoßende Impulse. */ .aura-shell{fill:none;stroke:#5C3D54;stroke-width:3;opacity:.5} .aura-push{fill:none;stroke:#5C3D54;stroke-width:3;stroke-linecap:round} .reveal.aura-viz.revealed .a-man .aura-push{animation:auraPush 2.6s ease-out infinite} @keyframes auraPush{0%{opacity:0;stroke-dasharray:0 18}25%{opacity:.75}100%{opacity:0;stroke-dasharray:18 0;transform:translateY(-14px)}} @media (prefers-reduced-motion:reduce){.reveal.aura-viz.revealed .a-man .aura-push{animation:none;opacity:.6}} /* ---- Linien-Leiter (profile) — nutzt denselben .hd-map-Baustein ---- */ .line-ladder svg{max-width:250px} .ll-bar{fill:#FBF8F2} .ll-num{fill:#5C3D54;font-family:var(--font-sans);font-size:19px;font-weight:700;text-anchor:middle;dominant-baseline:central} .ll-split{stroke:#C4AF92;stroke-width:2;stroke-dasharray:6 7} /* ---- Rave-Mandala-Rad (rave-mandala) — nutzt den .hd-map-Baustein ---- */ .rave-wheel svg{max-width:290px} .rw-seg{fill:#FBF8F2} .rw-band{fill:none;stroke:#A38B6B;stroke-width:21;opacity:.16} .rw-tick{stroke:#A38B6B;stroke-width:1.6;stroke-linecap:round} .rw-core path,.rw-core rect{fill:#EFE4D2;stroke:#C4AF92;stroke-width:1.6} .hd-map.is-on .hdm-c.on .rw-band{stroke:#5C3D54;opacity:.32} .hd-map.is-on .hdm-c.on .rw-tick{stroke:#5C3D54;opacity:1} .hd-map.is-on .hdm-c line{opacity:.32;transition:opacity .28s ease,stroke .28s ease} .hd-map.is-on .hdm-c circle{transition:opacity .28s ease,stroke .28s ease} /* ---- Inkarnationskreuz: die zwei Achsen ---- Höhere Spezifität als `.hdm-c path`, sonst überschreibt der generische Landkarten-Strich die Achsenfarben. Farbwerte aus neu-theme.css, damit Aubergine/Salbei identisch zum Rechner bleiben. */ .inc-cross svg{max-width:260px} .inc-cross .hdm-c .ic-arm{fill:none;stroke:var(--neu-pers,#5C3D54);stroke-width:5;stroke-linecap:round} .inc-cross .hdm-c .ic-arm--des{stroke:var(--neu-des,#8B9A82)} .inc-cross .hdm-c .ic-node{fill:#FBF8F2;stroke:var(--neu-pers,#5C3D54);stroke-width:3} .inc-cross .hdm-c .ic-node--des{stroke:var(--neu-des,#8B9A82)} .ic-g{fill:var(--neu-pers,#5C3D54);font-size:25px;text-anchor:middle;dominant-baseline:central} .ic-des .ic-g{fill:var(--neu-des-text,#5F6E55)} .ic-hub{fill:var(--neu-pers,#5C3D54)} .hd-map__b--des{color:#5F6E55;background:rgba(139,154,130,.22)} .inc-cross.is-on .hdm-c circle,.inc-cross.is-on .hdm-c text,.inc-cross.is-on .hdm-c path{opacity:.3;transition:opacity .28s ease,fill .28s ease} .inc-cross.is-on .hdm-c.on circle,.inc-cross.is-on .hdm-c.on text,.inc-cross.is-on .hdm-c.on path{opacity:1} .inc-cross.is-on .hdm-c.on .ic-node{fill:var(--neu-pers,#5C3D54)} .inc-cross.is-on .hdm-c.on.ic-des .ic-node{fill:var(--neu-des,#8B9A82)} .inc-cross.is-on .hdm-c.on .ic-g{fill:#FBF8F2} .aura-grid--4{grid-template-columns:repeat(4,minmax(0,1fr))} /* ---- Profil-Linien-Leiter (12 Profil-Detailseiten) ---- Aktive Linien sind über Klassen eingefärbt, nicht über Keyframes: Läuft die Animation nicht, steht die Aussage trotzdem. Die Choreografie ergänzt nur Aufblühen, Puls und die Verbindung der beiden Linien. */ .prof-lines{padding:var(--space-xl) var(--space-lg) var(--space-lg)} .pl__grid{display:grid;grid-template-columns:minmax(0,215px) minmax(0,1fr);gap:var(--space-xl);align-items:center} .pl__grid svg{display:block;width:100%;max-width:215px;height:auto;margin:0 auto;overflow:visible} .pl__list{display:flex;flex-direction:column;gap:var(--space-sm);text-align:left} .pl__row{border-left:3px solid var(--neu-pers,#5C3D54);padding:6px 0 6px 14px} .pl__row--d{border-left-color:var(--neu-des,#8B9A82)} .pl__t{display:block;font-family:var(--font-serif);font-size:var(--font-size-md);color:var(--color-warm-dark);line-height:1.3} .pl__b{display:inline-block;margin-left:8px;padding:2px 9px;border-radius:999px;font-family:var(--font-sans);font-size:.58rem;font-weight:700;text-transform:uppercase;letter-spacing:.09em;color:var(--neu-pers,#5C3D54);background:rgba(92,61,84,.1);vertical-align:middle} .pl__row--d .pl__b{color:var(--neu-des-text,#5F6E55);background:rgba(139,154,130,.22)} .pl__d{display:block;margin-top:3px;font-size:var(--font-size-xs);color:var(--color-text-soft);line-height:1.6} .pl-bar{fill:#FBF8F2;stroke:#C6B295;stroke-width:2.4;vector-effect:non-scaling-stroke} .pl-bar.on-p{fill:var(--neu-pers,#5C3D54);stroke:#432C3E} .pl-bar.on-d{fill:var(--neu-des,#8B9A82);stroke:#66755C} .pl-num{fill:#B0997B;font-family:var(--font-sans);font-size:19px;font-weight:700;text-anchor:middle;dominant-baseline:central} .pl-num.on-p{fill:var(--neu-pers,#5C3D54)} .pl-num.on-d{fill:var(--neu-des-text,#5F6E55)} .pl-split{stroke:#D3C1A6;stroke-width:2;stroke-dasharray:6 7} .pl-link{fill:none;stroke:#C0A9C0;stroke-width:2.5;stroke-dasharray:5 6} .pl-bloom{fill:none;stroke:var(--neu-pers,#5C3D54);stroke-width:3;opacity:0;transform-box:fill-box;transform-origin:center} .pl-bloom--d{stroke:var(--neu-des,#8B9A82)} .reveal.prof-lines .pl-row-g{opacity:.25} .reveal.prof-lines.revealed .pl-row-g{animation:plIn .6s ease forwards;animation-delay:calc(var(--i)*.09s)} .reveal.prof-lines.revealed .pl-bloom{animation:plBloom 4.4s ease-out infinite;animation-delay:.75s} .reveal.prof-lines.revealed .pl-bloom--d{animation-delay:1.25s} .reveal.prof-lines.revealed .pl-link{animation:plLink 4.4s ease-in-out infinite;animation-delay:1.5s} @keyframes plIn{to{opacity:1}} @keyframes plBloom{0%{transform:scale(.9);opacity:0}12%{opacity:.55}40%,100%{transform:scale(1.35);opacity:0}} @keyframes plLink{0%,20%{stroke-dashoffset:60;opacity:0}38%{opacity:1}90%{stroke-dashoffset:0;opacity:1}100%{opacity:0}} @media (max-width:600px){ .pl__grid{grid-template-columns:1fr;gap:var(--space-md)} .pl__grid svg{max-width:180px} } @media (prefers-reduced-motion:reduce){ .reveal.prof-lines .pl-row-g{opacity:1} .reveal.prof-lines.revealed .pl-row-g,.reveal.prof-lines.revealed .pl-bloom{animation:none} .reveal.prof-lines.revealed .pl-link{animation:none;stroke-dashoffset:0} } /* ---- Autoritäts-Visuals: Halo/Puls (bisher inline auf den 7 bebilderten Seiten) ---- */ .bg-viz svg{height:clamp(332px,60vw,454px)} .vz-halo{transform-box:fill-box;transform-origin:center;animation:vzGlow 3.6s ease-in-out infinite} .vz-def{transform-box:fill-box;transform-origin:center;animation:vzBreathe 3.6s ease-in-out infinite} .vz-pulse{fill:none;stroke:#5C3D54;stroke-width:5;transform-box:fill-box;transform-origin:center;opacity:0;animation:vzRing 3.6s ease-out infinite} @keyframes vzBreathe{0%,100%{transform:scale(1)}50%{transform:scale(1.05)}} @keyframes vzGlow{0%,100%{opacity:.3}50%{opacity:.68}} @keyframes vzRing{0%{transform:scale(.5);opacity:.55}70%{opacity:0}100%{transform:scale(2.3);opacity:0}} /* Mentale Autorität: Trennlinie unter der Kehle — die Aussage ist „unten nichts". */ .vz-split{stroke:#5C3D54;stroke-width:3;stroke-dasharray:9 9;opacity:.5} .vz-label{fill:#5C3D54;font-family:var(--font-sans);font-size:26px;font-weight:700;letter-spacing:.08em;text-anchor:start} .vz-label--muted{fill:#A8967F} /* Mond-Autorität: der Zyklus als Uhr um den vollständig offenen Bodygraph. */ .mn-ring{fill:none;stroke:#5C3D54;stroke-width:3;stroke-dasharray:10 16;opacity:.45;transform-box:fill-box;transform-origin:center;animation:mnSpin 90s linear infinite} .mn-phase{fill:#FBF8F2;stroke:#5C3D54;stroke-width:3;vector-effect:non-scaling-stroke} .mn-fill{fill:#5C3D54;animation:mnWax 11s ease-in-out infinite} @keyframes mnSpin{to{transform:rotate(360deg)}} @keyframes mnWax{0%,8%{opacity:0}22%,72%{opacity:1}86%,100%{opacity:0}} @media (prefers-reduced-motion:reduce){ .vz-halo,.vz-def,.vz-pulse,.mn-ring,.mn-fill{animation:none} .vz-pulse{display:none} .mn-fill{opacity:1} } /* ---- Mondzyklus: der Mond schließt vorübergehend einen Kanal ---- Eine gemeinsame 14-s-Uhr für Umlauf und Kanalschluss. Der Mond erreicht den Solarplexus bei ~36,6 % des Umlaufs (Winkel 131,6° vom Scheitel) — dort liegt das Zeitfenster der Aktivierung. Grundzustand ist immer lesbar: Das Natal-Tor bleibt gefärbt, nur die Mond-Aktivierung kommt und geht. */ .mz-viz svg{height:clamp(340px,62vw,470px)} .mz-orbit{fill:none;stroke:#5C3D54;stroke-width:3;stroke-dasharray:10 16;opacity:.32} .mz-moon-g{transform-box:view-box;transform-origin:420px 660px;animation:mzOrbit 14s linear infinite} .mz-moon{fill:#FBF8F2;stroke:#5C3D54;stroke-width:3} .mz-moon-c{fill:#5C3D54} .mz-gate{stroke:#FBF8F2;stroke-width:2.5;vector-effect:non-scaling-stroke} .mz-gate--nat{fill:var(--neu-pers,#5C3D54)} .mz-gate--moon{fill:var(--neu-des,#8B9A82);opacity:0;animation:mzOn 14s ease-in-out infinite} .mz-gate-t{font-family:var(--font-sans);font-size:26px;font-weight:700;fill:#FBF8F2;text-anchor:middle;dominant-baseline:central} .mz-chan{fill:none;stroke:var(--neu-des,#8B9A82);stroke-width:9;stroke-linecap:round;opacity:0;animation:mzOn 14s ease-in-out infinite} .mz-lit{opacity:0;animation:mzOn 14s ease-in-out infinite} /* Farbe per Klasse, NICHT per fill-Attribut: .bgv-center setzt fill in CSS und würde ein Präsentationsattribut immer schlagen. */ .mz-center-lit{fill:var(--neu-des,#8B9A82);stroke:#66755C;stroke-width:2.6} .mz-note{fill:var(--color-taupe,#9C8C77);font-family:var(--font-sans);font-size:27px;text-anchor:middle;opacity:0;animation:mzOn 14s ease-in-out infinite} @keyframes mzOrbit{to{transform:rotate(360deg)}} @keyframes mzOn{0%,32%{opacity:0}37%,48%{opacity:1}54%,100%{opacity:0}} @media (prefers-reduced-motion:reduce){ .mz-moon-g{animation:none;transform:rotate(131.6deg)} .mz-gate--moon,.mz-chan,.mz-lit,.mz-note{animation:none;opacity:1} } /* ---------- Fortgeschritten-Gruppen + Kanal-Aufklapper (30.08.2026) ---------- Bodygraph-Rechner, „Dein Design im Detail": PHS und die 16 Faces starten zugeklappt (Fein-Mechanik), die Kopfzeile trägt eine Werte-Vorschau. Kanal-Volltexte öffnen je Chip — Chips mit Nicoles Namen bleiben sichtbar. */ .adv-group{margin:var(--space-lg) auto 0;border:1px solid var(--color-border-light);border-radius:var(--radius-md);background:var(--color-cream)} .adv-group summary{list-style:none;cursor:pointer;display:flex;flex-wrap:wrap;align-items:center;gap:6px 14px;padding:16px 20px} .adv-group summary::-webkit-details-marker{display:none} .adv-group summary:hover .adv-group__t{color:#5C3D54} .adv-group__t{font-family:var(--font-serif);font-size:var(--font-size-md);color:var(--color-warm-dark)} .adv-group__v{font-size:var(--font-size-xs);color:var(--color-text-muted)} .adv-chev{margin-left:auto;color:var(--color-text-muted);transition:transform .25s ease;line-height:1} .adv-group[open] .adv-chev{transform:rotate(180deg)} .adv-group__body{padding:0 20px 18px} .adv-group__body .detail-row:first-of-type{border-top:none} .adv-group__intro{font-size:var(--font-size-sm);color:var(--color-text-soft);line-height:1.7;max-width:640px;margin:0 0 6px} .adv-group__course{font-size:var(--font-size-xs);color:var(--color-text-muted);line-height:1.65;margin:0 0 4px} .adv-group__course a{color:#5C3D54} .dv-sub{display:block;font-size:.78em;color:var(--color-text-muted);font-variant-numeric:tabular-nums;margin-top:2px;font-weight:400} details.channel-chip{display:block} details.channel-chip summary{list-style:none;cursor:pointer;display:flex;align-items:baseline;gap:10px} details.channel-chip summary::-webkit-details-marker{display:none} .chip-more{margin-left:auto;flex-shrink:0;font-size:var(--font-size-xs);color:#5C3D54;white-space:nowrap;border-bottom:1px dotted currentColor} details.channel-chip[open] .chip-more{opacity:.45} details.channel-chip .channel-chip__text{margin-left:0} @media(max-width:640px){.adv-group summary{padding:14px 16px}.adv-group__body{padding:0 16px 16px}.adv-group__v{width:100%}} /* Zentren-Karten als Aufklapper (31.08.2026): Kopf (Name + definiert/offen) bleibt scannbar, der Deutungstext öffnet je Karte. */ /* Grid darf zugeklappte Nachbarn nicht auf die Höhe einer offenen Karte strecken (align-items:stretch ist der Grid-Default). */ .centers-grid{align-items:start} details.center-card{padding:0} details.center-card summary{list-style:none;cursor:pointer;display:block;padding:14px 18px} details.center-card summary::-webkit-details-marker{display:none} details.center-card .center-card__top{margin-bottom:0} details.center-card p{padding:0 18px 14px;margin:0} .cc-chev{flex-shrink:0;color:var(--color-text-muted);font-size:.85em;line-height:1;transition:transform .25s ease} details.center-card[open] .cc-chev{transform:rotate(180deg)} /* Pfeil-Legende der Variablen-Gruppe: eigene kleine Zeile unter dem Intro */ .adv-group__legend{font-size:var(--font-size-xs);color:var(--color-text-muted);line-height:1.6;margin:0 0 6px} details.center-card .center-card__top{justify-content:flex-start} details.center-card .center-card__chip{margin-left:auto} /* ---------- Mini-Visuals der Detail-Sektion (31.08.2026) ---------- Vier-Pfeile-Glyph (PHS), 16-Segment-Spiegelrad (Faces), Mini-Bodygraph in Zentren-Karten und Kanal-Chips; sanfte Öffnungs-Choreografie. */ /* Pfeile (PHS) und Faces-Rad stehen MITTIG zur Textspalte, nicht an deren Oberkante: Der Text ist rund 360 px hoch, die Grafik 132 — mit `flex-start` sass sie oben und liess darunter ein Viertel der Karte leer. Auf dem Telefon rutschen beide untereinander; dort sorgt der gleiche Abstand oben wie unten dafuer, dass die Grafik nicht am Text klebt (gemessen 31.08.2026: 28 px oben, 0 px unten). */ .adv-group__lead{display:flex;gap:26px;align-items:center;flex-wrap:wrap} .adv-group__leadtxt{flex:1 1 340px;min-width:0} .adv-group__viz{flex:0 0 auto;margin-left:auto} .adv-group__viz .faces-wheel{width:132px;height:132px;display:block} @media(max-width:640px){.adv-group__viz{margin:14px auto}} .phs-viz{position:relative;display:grid;grid-template-columns:34px 34px;grid-template-rows:34px 34px;gap:10px;padding:6px} .phs-viz__k{display:flex;align-items:center;justify-content:center;border-radius:9px;font-size:1.05rem;font-weight:600;background:var(--color-cream);border:1px solid var(--color-border-light);box-shadow:0 1px 2px rgba(60,45,40,.06)} .phs-viz__k--des{color:#B45F47} .phs-viz__k--pers{color:#292622} .phs-viz__head{position:absolute;left:50%;top:50%;width:22px;height:22px;transform:translate(-50%,-50%);border-radius:50%;background:#FFFDF8;border:2px solid #C5A86E;box-shadow:0 0 0 4px rgba(197,168,110,.14)} .cc-glyph{flex:0 0 auto;width:26px;height:42px} .cc-glyph svg{width:100%;height:100%;display:block} .cc-glyph svg path{stroke-width:6} .ccg-focus{stroke:#C5A86E !important;stroke-width:14 !important} .ccg-focus--open{fill:#F4EBD8 !important;stroke-dasharray:14 10} .ch-glyph{flex:0 0 auto;width:22px;height:36px;align-self:center} .ch-glyph svg{width:100%;height:100%;display:block} .ch-glyph svg path{stroke-width:7} /* Nummer, Name und „Text lesen" teilen EINE Text-Baseline (wie das chip-Original); nur der Glyph zentriert sich unabhängig davon. */ details.channel-chip summary{align-items:baseline} /* Öffnungs-Choreografie — respektiert reduzierte Bewegung */ @keyframes advBodyIn{from{opacity:0;transform:translateY(7px)}to{opacity:1;transform:none}} @keyframes wheelIn{from{opacity:0;transform:rotate(-14deg) scale(.94)}to{opacity:1;transform:none}} .adv-group[open] .adv-group__body{animation:advBodyIn .38s ease} .adv-group[open] .faces-wheel{animation:wheelIn .7s cubic-bezier(.2,.7,.3,1)} details.center-card[open] p,details.channel-chip[open] .channel-chip__text{animation:advBodyIn .3s ease} @media (prefers-reduced-motion:reduce){ .adv-group[open] .adv-group__body,.adv-group[open] .faces-wheel, details.center-card[open] p,details.channel-chip[open] .channel-chip__text{animation:none} }