/* ============================================================ Auf einem Nenner — Design System Mobile-first. Dark mode by default. Warm, intim, ruhig. ============================================================ */ :root { /* Goethe-inspiriertes Schema · Main 60% Orange · Split A 20% Cyan · Split B 20% Indigo */ --bg: #07101c; --bg-soft: #0e1929; --bg-elev: #15233a; --bg-glass: rgba(15, 26, 42, 0.72); --line: rgba(255, 255, 255, 0.07); --line-2: rgba(255, 255, 255, 0.14); --text: #f0f4fb; --text-mute: #a6b3c8; --text-dim: #6f7e98; --accent: #ff7700; /* Main 60% — Orange */ --accent-2: #00ccff; /* Split A 20% — Cyan */ --accent-3: #4400ff; /* Split B 20% — Indigo */ /* Semantische Mappings: warm = Zustimmung, kühl-mittig = unklar, tief = Ablehnung */ --good: #ff7700; /* MATCH */ --soft: #00ccff; /* SOFT */ --bad: #4400ff; /* BOUNDARY */ --grad-hero: linear-gradient(135deg, #ff7700 0%, #ff3d8a 35%, #00ccff 70%, #4400ff 100%); --grad-warm: linear-gradient(135deg, #ff7700 0%, #ff3d8a 100%); --grad-cool: linear-gradient(135deg, #00ccff 0%, #4400ff 100%); --grad-card: linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0.01)); --r-sm: 10px; --r-md: 16px; --r-lg: 24px; --r-xl: 32px; --shadow-1: 0 1px 2px rgba(0,0,0,0.4); --shadow-2: 0 8px 30px rgba(0,0,0,0.35); --shadow-3: 0 24px 60px rgba(0,0,0,0.45); --maxw: 720px; } * { box-sizing: border-box; } /* Hintergrund-Atmosphäre liegt auf , damit beim Scrollen über den Viewport hinaus kein heller Streifen sichtbar wird. Fixed-Attachment hält die Goethe-Gradienten am Viewport haften. */ html { min-height: 100%; background-color: var(--bg); background-image: radial-gradient(ellipse at 12% -10%, rgba(255,119,0,0.14), transparent 55%), radial-gradient(ellipse at 92% -5%, rgba(0,204,255,0.10), transparent 55%), radial-gradient(ellipse at 50% 110%, rgba(68,0,255,0.12), transparent 60%); background-attachment: fixed; background-repeat: no-repeat; } body { margin: 0; min-height: 100dvh; font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", Inter, "Segoe UI", Roboto, system-ui, sans-serif; font-size: 16px; line-height: 1.5; color: var(--text); background: transparent; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; overflow-x: hidden; } /* Serif für die markante Hero-Headline (Goethe-inspirierte Anmutung) */ .hero h1, .serif { font-family: "New York", "Iowan Old Style", "Apple Garamond", "Hoefler Text", Georgia, "Times New Roman", serif; font-feature-settings: "ss01", "ss02"; } button { font: inherit; color: inherit; } input, textarea, button { font-family: inherit; } a { color: inherit; } /* ===== Layout ===== */ .app-shell { min-height: 100dvh; display: flex; flex-direction: column; } .topbar { position: sticky; top: 0; z-index: 50; display: flex; align-items: center; justify-content: space-between; padding: 14px 20px; backdrop-filter: blur(14px) saturate(140%); -webkit-backdrop-filter: blur(14px) saturate(140%); background: linear-gradient(180deg, rgba(7,16,28,0.85), rgba(7,16,28,0.55)); border-bottom: 1px solid var(--line); } .brand { display: inline-flex; align-items: center; gap: 10px; background: transparent; border: 0; cursor: pointer; padding: 0; } .brand-mark { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 10px; background: var(--grad-hero); color: white; box-shadow: 0 6px 20px rgba(255,119,0,0.35); } .brand-text { font-weight: 700; font-size: 16px; letter-spacing: -0.01em; font-family: "New York", "Iowan Old Style", "Apple Garamond", "Hoefler Text", Georgia, serif; } .topbar-meta { font-size: 12px; color: var(--text-dim); display: flex; align-items: center; gap: 10px; } .topbar-meta .pill { background: var(--bg-elev); border: 1px solid var(--line); padding: 4px 10px; border-radius: 999px; color: var(--text-mute); font-weight: 500; } /* ===== Tab-Bar (Hauptbereiche) ===== */ .tab-bar { display: none; position: sticky; top: 60px; /* Höhe der Topbar */ z-index: 49; padding: 8px 12px; gap: 6px; backdrop-filter: blur(14px) saturate(140%); -webkit-backdrop-filter: blur(14px) saturate(140%); background: linear-gradient(180deg, rgba(7,16,28,0.75), rgba(7,16,28,0.55)); border-bottom: 1px solid var(--line); } .tab-bar.is-visible { display: flex; justify-content: center; } .tab-btn { flex: 1 1 auto; max-width: 220px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 10px 14px; background: transparent; border: 1px solid transparent; border-radius: 999px; color: var(--text-mute); font-size: 13px; font-weight: 600; cursor: pointer; transition: background .15s ease, color .15s ease, border-color .15s ease; white-space: nowrap; } .tab-btn:hover { color: var(--text); background: rgba(255,255,255,0.04); } .tab-btn.is-active { background: var(--grad-warm); color: white; box-shadow: 0 6px 18px rgba(255,119,0,0.30); border-color: transparent; } .tab-btn-icon { display: inline-flex; flex: 0 0 auto; opacity: 0.8; } .tab-btn.is-active .tab-btn-icon { opacity: 1; } .tab-btn-label { flex: 0 1 auto; } .tab-btn-count { flex: 0 0 auto; font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 999px; background: rgba(255,255,255,0.10); color: inherit; font-variant-numeric: tabular-nums; } .tab-btn.is-active .tab-btn-count { background: rgba(255,255,255,0.22); } .tab-btn-sub { font-weight: 500; opacity: 0.65; font-size: 10.5px; } /* Gesperrter Tab: ausgegraut, kursiver Hinweis-Look, aber klickbar (Toast erscheint) */ .tab-btn.is-locked { opacity: 0.5; cursor: help; } .tab-btn.is-locked .tab-btn-icon { opacity: 0.45; } .tab-btn.is-locked .tab-btn-label svg { opacity: 0.7; } .tab-btn.is-locked.is-active { opacity: 0.7; } .tab-btn-lock-info { background: rgba(255,255,255,0.04) !important; font-style: italic; font-weight: 500; opacity: 0.85; } @media (max-width: 480px) { .tab-btn-count { display: none; } .tab-btn { padding: 10px 10px; } } .view-root { flex: 1; width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 24px 20px 80px; } @media (min-width: 720px) { .view-root { padding: 40px 24px 120px; } } .footer { border-top: 1px solid var(--line); padding: 16px 20px; color: var(--text-dim); font-size: 12px; } .footer-row { max-width: var(--maxw); margin: 0 auto; display: flex; flex-wrap: wrap; align-items: center; gap: 14px; } /* ===== Buttons ===== */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 14px 22px; border-radius: 14px; border: 1px solid var(--line-2); background: var(--bg-elev); color: var(--text); font-weight: 600; font-size: 15px; cursor: pointer; text-decoration: none; transition: transform .12s ease, background .2s ease, border-color .2s ease; -webkit-tap-highlight-color: transparent; } .btn:hover { background: #221d33; } .btn:active { transform: scale(0.98); } .btn[disabled], .btn.is-disabled { opacity: 0.45; cursor: not-allowed; pointer-events: none; } .btn-primary { background: var(--grad-warm); border: 0; color: white; box-shadow: 0 10px 30px rgba(255,119,0,0.32); } .btn-primary:hover { box-shadow: 0 12px 38px rgba(255,119,0,0.45); } .btn-primary:hover { filter: brightness(1.05); } .btn-ghost { background: transparent; border-color: var(--line); } .btn-block { display: flex; width: 100%; } .btn-sm { padding: 10px 14px; font-size: 13px; border-radius: 10px; } .link-btn { background: transparent; border: 0; color: var(--text-dim); cursor: pointer; padding: 0; font-size: 12px; text-decoration: underline; text-underline-offset: 3px; } .link-btn:hover { color: var(--text); } .link-btn.danger { color: #ff8c8c; } .icon-btn { display: inline-grid; place-items: center; width: 38px; height: 38px; border-radius: 10px; background: var(--bg-elev); border: 1px solid var(--line); cursor: pointer; } /* ===== Cards ===== */ .card { background: var(--grad-card); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 24px; box-shadow: var(--shadow-2); } .card + .card { margin-top: 16px; } .card-tight { padding: 18px; border-radius: var(--r-md); } /* ===== Hero (Landing) ===== */ .hero { text-align: left; padding: 12px 0 32px; } .hero-eyebrow { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px; border: 1px solid var(--line-2); border-radius: 999px; font-size: 12px; color: var(--text-mute); background: var(--bg-glass); margin-bottom: 22px; } .hero-eyebrow .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 4px rgba(255,107,157,0.18); } .hero h1 { margin: 0; font-size: clamp(34px, 7vw, 52px); line-height: 1.05; letter-spacing: -0.02em; font-weight: 800; background: var(--grad-hero); -webkit-background-clip: text; background-clip: text; color: transparent; } .hero p.lead { margin: 16px 0 0; color: var(--text-mute); font-size: 17px; max-width: 56ch; } .hero-cta { margin-top: 28px; display: flex; flex-wrap: wrap; gap: 12px; } /* Concept tiles */ .concept-grid { margin-top: 28px; display: grid; gap: 14px; } @media (min-width: 640px) { .concept-grid { grid-template-columns: repeat(2, 1fr); } } .concept { display: flex; gap: 14px; padding: 18px; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--bg-glass); } .concept .num { flex: 0 0 auto; width: 36px; height: 36px; display: grid; place-items: center; border-radius: 10px; background: var(--grad-hero); color: white; font-weight: 800; font-size: 14px; } .concept h4 { margin: 0 0 4px; font-size: 15px; } .concept p { margin: 0; color: var(--text-mute); font-size: 13.5px; line-height: 1.5; } /* Section headings */ .section-title { display: flex; align-items: baseline; gap: 12px; margin: 28px 0 12px; } .section-title h2 { margin: 0; font-size: 18px; letter-spacing: -0.01em; } .section-title .hint { color: var(--text-dim); font-size: 13px; } /* ===== Forms ===== */ .field { display: flex; flex-direction: column; gap: 6px; } .field + .field { margin-top: 14px; } .field label { font-size: 13px; color: var(--text-mute); font-weight: 500; } .field input[type="text"], .field input[type="number"] { background: var(--bg); border: 1px solid var(--line-2); color: var(--text); padding: 12px 14px; border-radius: 12px; font-size: 16px; outline: none; transition: border-color .15s ease; } .field input:focus { border-color: var(--accent); } .field .hint { font-size: 12px; color: var(--text-dim); } .checkbox { display: flex; align-items: flex-start; gap: 12px; padding: 12px; border: 1px solid var(--line); border-radius: var(--r-md); background: rgba(255,255,255,0.02); cursor: pointer; } .checkbox input { margin-top: 3px; flex: 0 0 auto; accent-color: var(--accent); width: 18px; height: 18px; } .checkbox span { font-size: 13.5px; color: var(--text-mute); line-height: 1.45; } .checkbox.is-required { border-color: rgba(255,107,157,0.45); } /* ===== Slider ===== */ .q-card { display: flex; flex-direction: column; gap: 26px; padding: 28px 22px 22px; border-radius: var(--r-lg); background: linear-gradient(180deg, rgba(255,255,255,0.05), rgba(255,255,255,0.01)); border: 1px solid var(--line); box-shadow: var(--shadow-3); position: relative; } .q-cat-tag { align-self: flex-start; padding: 5px 11px; border-radius: 999px; font-size: 11.5px; font-weight: 600; letter-spacing: 0.02em; text-transform: uppercase; border: 1px solid var(--line-2); background: var(--bg-elev); color: var(--text-mute); } .q-cat-tag[data-tier="1"] { color: #ffb35c; border-color: rgba(255,119,0,0.32); background: rgba(255,119,0,0.08); } .q-cat-tag[data-tier="2"] { color: #6dd6ff; border-color: rgba(0,204,255,0.32); background: rgba(0,204,255,0.08); } .q-cat-tag[data-tier="3"] { color: #b8a8ff; border-color: rgba(68,0,255,0.34); background: rgba(68,0,255,0.10); } .q-text { margin: 0; font-size: clamp(20px, 4.6vw, 26px); line-height: 1.3; letter-spacing: -0.01em; font-weight: 600; /* Reserviert Platz für ~3 Zeilen Hauptfrage + 2 Zeilen Hinweis, damit Slider und Buttons zwischen Fragen nicht springen. */ min-height: 9.5rem; display: flex; flex-direction: column; justify-content: flex-start; /* Ausgewogene Zeilenumbrüche für mehrzeilige Fragen */ text-wrap: balance; } @media (min-width: 720px) { .q-text { min-height: 10rem; } } .q-text small { display: block; margin-top: auto; padding-top: 12px; color: var(--text-dim); font-size: 13px; line-height: 1.45; font-weight: 400; text-wrap: balance; } .slider-wrap { display: flex; flex-direction: column; gap: 14px; } .slider-row { position: relative; height: 64px; display: flex; align-items: center; } input[type="range"].slider { -webkit-appearance: none; appearance: none; width: 100%; height: 8px; border-radius: 999px; /* Goethe: kalt/tief (Ablehnung) → mittig (offen) → warm (Zustimmung) */ background: linear-gradient(90deg, rgba(68, 0, 255, 0.55) 0%, rgba(68, 0, 255, 0.40) 18%, rgba(0, 204, 255, 0.50) 50%, rgba(255, 119, 0, 0.55) 82%, rgba(255, 119, 0, 0.70) 100%); outline: none; cursor: pointer; /* Mobile: nur horizontal pan, vertikales Scrollen freigeben */ touch-action: pan-x; } input[type="range"].slider::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 32px; height: 32px; border-radius: 50%; background: white; border: 4px solid var(--accent); box-shadow: 0 6px 20px rgba(255,119,0,0.4); cursor: grab; transition: transform .1s ease, opacity .15s ease; } input[type="range"].slider::-webkit-slider-thumb:active { transform: scale(1.1); cursor: grabbing; } input[type="range"].slider::-moz-range-thumb { width: 28px; height: 28px; border-radius: 50%; background: white; border: 4px solid var(--accent); cursor: grab; transition: opacity .15s ease; } /* Slider ohne Antwort: Daumen unsichtbar, aber Track tappable */ input[type="range"].slider.is-empty::-webkit-slider-thumb { opacity: 0; box-shadow: none; transform: scale(0.6); } input[type="range"].slider.is-empty::-moz-range-thumb { opacity: 0; } input[type="range"].slider.is-empty { opacity: 0.55; filter: grayscale(0.35); } input[type="range"].slider.is-empty:hover { opacity: 0.85; filter: none; } .slider-scale { display: flex; justify-content: space-between; font-size: 11px; color: var(--text-dim); padding: 0 4px; } .slider-readout { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 16px; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--bg-glass); flex-wrap: wrap; min-height: 64px; /* stabilisiert Höhe bei kurzem oder langem Hinweistext */ } .slider-readout > .dim { flex: 1 1 100%; font-size: 12px; } @media (min-width: 480px) { .slider-readout > .dim { flex: 1 1 auto; text-align: right; } } .slider-readout .val { font-size: 32px; font-weight: 800; letter-spacing: -0.02em; } .slider-readout .verdict { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; padding: 6px 12px; border-radius: 999px; } .slider-readout .verdict[data-v="no"] { background: rgba(68, 0, 255, 0.18); color: #b8a8ff; } .slider-readout .verdict[data-v="maybe"] { background: rgba(0, 204, 255, 0.14); color: #7fdfff; } .slider-readout .verdict[data-v="yes"] { background: rgba(255, 119, 0, 0.16); color: #ffb35c; } .slider-readout .verdict[data-v="none"] { background: rgba(255,255,255,0.06); color: var(--text-dim); } /* ===== Progress ===== */ .progress { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; } .progress-bar { flex: 1; height: 10px; border-radius: 999px; background: rgba(255,255,255,0.08); position: relative; } /* Tier-Hintergrund-Sektionen: blasser als die Füllung, zeigen wo welcher Tier sitzt */ .progress-bar-tiers { position: absolute; inset: 0; border-radius: inherit; overflow: hidden; display: flex; pointer-events: none; } .progress-bar-tiers > span { display: block; height: 100%; } .progress-bar-tiers > span[data-tier="1"] { background: rgba(255,119,0,0.16); } .progress-bar-tiers > span[data-tier="2"] { background: rgba(0,204,255,0.16); } .progress-bar-tiers > span[data-tier="3"] { background: rgba(68,0,255,0.18); } .progress-bar > .progress-fill { position: absolute; top: 0; bottom: 0; left: 0; border-radius: inherit; transition: width .25s ease, background .3s ease; z-index: 1; } .progress-fill[data-tier="1"] { background: linear-gradient(90deg, #ff9a40, #ff7700); } .progress-fill[data-tier="2"] { background: linear-gradient(90deg, #4dd2ff, #00ccff); } .progress-fill[data-tier="3"] { background: linear-gradient(90deg, #8a7aff, #4400ff); } .progress-text { font-size: 12px; color: var(--text-dim); font-variant-numeric: tabular-nums; } .progress-text [data-tier="1"] { color: #ffb35c; } .progress-text [data-tier="2"] { color: #6dd6ff; } .progress-text [data-tier="3"] { color: #b8a8ff; } /* Tier-Markierungen: dünne Trennlinien zwischen den Tier-Sektionen */ .tier-marker { position: absolute; top: -2px; bottom: -2px; width: 1px; background: rgba(255,255,255,0.45); pointer-events: none; z-index: 3; } .tier-marker::after { content: attr(data-label); position: absolute; top: -17px; left: 50%; transform: translateX(-50%); font-size: 9px; font-weight: 600; letter-spacing: 0.04em; white-space: nowrap; background: var(--bg); padding: 0 5px; border-radius: 3px; border: 1px solid var(--line); } .tier-marker[data-tier="1"]::after { color: #ffb35c; border-color: rgba(255,119,0,0.40); } .tier-marker[data-tier="2"]::after { color: #6dd6ff; border-color: rgba(0,204,255,0.40); } /* Mode-Toggle (Nur offene / Alle Fragen) */ .mode-toggle { display: flex; gap: 4px; padding: 4px; margin: 14px 0 10px; border: 1px solid var(--line); border-radius: 999px; background: var(--bg-elev); } .mode-tab { flex: 1; display: flex; align-items: center; justify-content: center; gap: 8px; padding: 8px 14px; background: transparent; border: 0; border-radius: 999px; cursor: pointer; font-size: 12.5px; font-weight: 600; color: var(--text-mute); transition: background .15s ease, color .15s ease; } .mode-tab:hover { color: var(--text); } .mode-tab.is-active { background: var(--grad-warm); color: white; box-shadow: 0 4px 14px rgba(255,119,0,0.30); } .mode-tab-count { font-variant-numeric: tabular-nums; font-size: 11px; padding: 1px 7px; border-radius: 999px; background: rgba(255,255,255,0.08); color: var(--text-dim); min-width: 22px; text-align: center; } .mode-tab.is-active .mode-tab-count { background: rgba(255,255,255,0.22); color: white; } /* Question nav */ .q-nav { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 6px; flex-wrap: wrap; } .q-nav > .dim { flex: 1 1 100%; text-align: center; order: -1; /* Frage-Counter oben (mobile-friendly) */ } @media (min-width: 480px) { .q-nav > .dim { flex: 0 0 auto; order: 0; } } .q-skip-row { display: flex; justify-content: center; margin-top: 14px; } /* ===== Stats / Results ===== */ .score-card { display: flex; align-items: center; gap: 22px; padding: 22px; border-radius: var(--r-lg); border: 1px solid var(--line); background: radial-gradient(60% 80% at 0% 0%, rgba(255,107,157,0.15), transparent 60%), radial-gradient(60% 80% at 100% 100%, rgba(111,123,255,0.12), transparent 60%), var(--bg-elev); } .score-ring { flex: 0 0 auto; position: relative; width: 120px; height: 120px; } .score-ring svg { transform: rotate(-90deg); } .score-ring .label { position: absolute; inset: 0; display: grid; place-items: center; font-weight: 800; letter-spacing: -0.02em; font-size: 28px; } .score-meta h3 { margin: 0; font-size: 13px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-dim); } .score-meta .big { margin: 4px 0; font-size: 22px; letter-spacing: -0.01em; font-weight: 700; } .score-meta p { margin: 6px 0 0; color: var(--text-mute); font-size: 13.5px; max-width: 38ch; } /* Sicherheitswert / Konfidenz-Anzeige */ .confidence { display: flex; align-items: center; gap: 12px; margin-top: 14px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 12px; background: rgba(255,255,255,0.02); } .confidence-bars { display: flex; align-items: flex-end; gap: 3px; height: 18px; flex: 0 0 auto; } .confidence-bars span { display: block; width: 4px; background: rgba(255,255,255,0.12); border-radius: 1px; } .confidence-bars span:nth-child(1) { height: 30%; } .confidence-bars span:nth-child(2) { height: 55%; } .confidence-bars span:nth-child(3) { height: 80%; } .confidence-bars span:nth-child(4) { height: 100%; } .confidence[data-tone="very-low"] .confidence-bars span.on { background: var(--text-dim); } .confidence[data-tone="low"] .confidence-bars span.on { background: #c08060; } .confidence[data-tone="medium"] .confidence-bars span.on { background: #ffb35c; } .confidence[data-tone="high"] .confidence-bars span.on { background: #7fdfff; } .confidence[data-tone="very-high"] .confidence-bars span.on { background: #58e6a3; } .confidence-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; } .confidence-label { font-size: 12px; font-weight: 700; letter-spacing: 0.02em; color: var(--text); } .confidence-hint { font-size: 11.5px; color: var(--text-dim); line-height: 1.4; } /* Stat tiles */ .stat-grid { margin-top: 16px; display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; } @media (min-width: 640px) { .stat-grid { grid-template-columns: repeat(4, 1fr); } } .stat { padding: 14px 16px; border: 1px solid var(--line); border-radius: var(--r-md); background: rgba(255,255,255,0.02); } .stat .k { font-size: 11px; color: var(--text-dim); text-transform: uppercase; letter-spacing: 0.06em; } .stat .v { font-size: 22px; font-weight: 800; letter-spacing: -0.02em; } .stat .h { font-size: 12px; color: var(--text-mute); } .stat[data-tone="match"] .v { color: #ffa64d; } .stat[data-tone="boundary"] .v { color: #b8a8ff; } .stat[data-tone="soft"] .v { color: #7fdfff; } .stat[data-tone="hidden"] .v { color: var(--text-dim); } .stat[data-tone="tension"] .v { color: #ff7a90; } /* Result list */ .result-list { display: flex; flex-direction: column; gap: 10px; } /* Pagination innerhalb der Result-Liste — minimal: nur ein Pfeil */ .result-rotate { align-self: center; display: grid; place-items: center; width: 44px; height: 44px; margin: 8px auto 0; border: 1px solid var(--line); border-radius: 50%; background: var(--bg-elev); color: var(--text-mute); cursor: pointer; transition: background .15s ease, color .15s ease, border-color .15s ease, transform .12s ease; } .result-rotate:hover { color: var(--text); background: var(--bg-soft); border-color: var(--line-2); } .result-rotate:active { transform: scale(0.95); } .result-rotate:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } .result-item { padding: 14px 16px; border: 1px solid var(--line); border-radius: var(--r-md); background: rgba(255,255,255,0.025); display: flex; flex-direction: column; gap: 10px; } .result-item .head { display: flex; align-items: center; justify-content: space-between; gap: 10px; } .result-item .badge { flex: 0 0 auto; padding: 3px 9px; border-radius: 999px; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; } .result-item[data-kind="MATCH"] { border-color: rgba(255,119,0,0.32); } .result-item[data-kind="MATCH"] .badge { background: rgba(255,119,0,0.18); color: #ffb35c; } .result-item[data-kind="BOUNDARY"] { border-color: rgba(68,0,255,0.36); } .result-item[data-kind="BOUNDARY"] .badge { background: rgba(68,0,255,0.22); color: #b8a8ff; } .result-item[data-kind="SOFT"] { border-color: rgba(0,204,255,0.30); } .result-item[data-kind="SOFT"] .badge { background: rgba(0,204,255,0.16); color: #7fdfff; } .result-item[data-kind="VETO"] { border-color: rgba(255,80,110,0.34); } .result-item[data-kind="VETO"] .badge { background: rgba(255,80,110,0.18); color: #ff7a90; } .result-item .text { font-size: 15px; line-height: 1.4; } .result-item .meta { font-size: 12px; color: var(--text-dim); } .result-item .ice { margin-top: 6px; padding: 12px 14px; background: rgba(255,119,0,0.08); border: 1px dashed rgba(255,119,0,0.35); border-radius: 12px; font-size: 13.5px; color: #ffd0a3; font-style: italic; } /* ===== Insights (Auswertungstexte) ===== */ .insights { display: grid; gap: 12px; margin-bottom: 16px; } @media (min-width: 720px) { .insights { grid-template-columns: repeat(2, 1fr); } .insights .insight-card[data-tone="score"] { grid-column: 1 / -1; } .insights .insight-card[data-tone="veto"] { grid-column: 1 / -1; } } .insight-card { position: relative; padding: 16px 18px; border: 1px solid var(--line); border-radius: var(--r-md); background: rgba(255,255,255,0.025); display: flex; flex-direction: column; gap: 8px; } .insight-card::before { content: ""; position: absolute; left: 0; top: 14px; bottom: 14px; width: 3px; border-radius: 0 3px 3px 0; background: var(--accent); } .insight-card h4 { margin: 0; font-size: 15px; letter-spacing: -0.01em; font-weight: 700; font-family: "New York","Iowan Old Style","Apple Garamond","Hoefler Text",Georgia,serif; } .insight-card p { margin: 0; color: var(--text-mute); font-size: 14px; line-height: 1.55; } .insight-card[data-tone="score"] { background: linear-gradient(180deg, rgba(255,119,0,0.10), rgba(255,119,0,0.02)); border-color: rgba(255,119,0,0.30); } .insight-card[data-tone="score"]::before { background: var(--accent); } .insight-card[data-tone="score"] h4 { font-size: 17px; } .insight-card[data-tone="fun"]::before { background: #ff9f3d; } .insight-card[data-tone="values"]::before { background: #00ccff; } .insight-card[data-tone="intim"]::before { background: #ff3d8a; } .insight-card[data-tone="boundary"]::before{ background: #b8a8ff; } .insight-card[data-tone="watch"]::before { background: #ffd166; } .insight-card[data-tone="strong"]::before { background: #00ccff; } .insight-card[data-tone="weak"]::before { background: #ff7700; } .insight-card[data-tone="veto"] { background: rgba(255,255,255,0.015); border-style: dashed; border-color: rgba(255,255,255,0.12); } .insight-card[data-tone="veto"]::before { background: var(--text-dim); } .insight-card[data-tone="veto"] p { color: var(--text-dim); font-style: italic; } /* Radar */ .radar-card { padding: 20px; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--bg-elev); } .radar-card h3 { margin: 0 0 6px; font-size: 16px; } .radar-card p.hint { margin: 0 0 12px; color: var(--text-dim); font-size: 12.5px; } /* ===== Tabs ===== */ .tabs { display: flex; gap: 6px; padding: 4px; border: 1px solid var(--line); border-radius: 999px; background: var(--bg-elev); flex-wrap: wrap; } .tab { flex: 1; text-align: center; background: transparent; border: 0; color: var(--text-mute); font-size: 13px; font-weight: 600; padding: 8px 12px; border-radius: 999px; cursor: pointer; white-space: nowrap; } .tab.is-active { background: var(--grad-hero); color: white; } /* ===== Code-like / share box ===== */ .share-box { display: flex; flex-direction: column; gap: 10px; padding: 18px; border: 1px solid var(--line-2); border-radius: var(--r-md); background: rgba(0,0,0,0.18); } .share-row { display: flex; align-items: center; gap: 8px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--bg); } .share-row code { flex: 1; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 13px; word-break: break-all; color: var(--text); } .pin-display { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 28px; letter-spacing: 0.5em; color: white; text-align: center; padding: 14px 0; background: radial-gradient(40% 100% at 50% 0%, rgba(255,107,157,0.20), transparent 70%), var(--bg); border-radius: 12px; border: 1px solid var(--line); } /* ===== Toast ===== */ .toast-root { position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%); display: flex; flex-direction: column; gap: 8px; z-index: 99; pointer-events: none; } .toast { pointer-events: auto; background: var(--bg-elev); border: 1px solid var(--line-2); color: var(--text); font-size: 13px; padding: 10px 14px; border-radius: 999px; box-shadow: var(--shadow-2); animation: toast-in .3s ease; } .toast-milestone { border-radius: 14px; padding: 14px 18px; max-width: 460px; background: linear-gradient(180deg, rgba(255,119,0,0.10), rgba(0,204,255,0.06)); border: 1px solid rgba(255,119,0,0.32); box-shadow: 0 18px 40px rgba(0,0,0,0.45); display: flex; flex-direction: column; gap: 4px; } .toast-title { font-size: 14px; font-weight: 700; letter-spacing: -0.01em; color: var(--text); font-family: "New York","Iowan Old Style","Apple Garamond","Hoefler Text",Georgia,serif; } .toast-body { font-size: 13px; color: var(--text-mute); line-height: 1.45; } @keyframes toast-in { from { transform: translateY(8px); opacity: 0; } to { transform: translateY(0); opacity: 1; } } /* ===== Dialogs ===== */ .dialog-backdrop { position: fixed; inset: 0; background: rgba(0,0,0,0.55); backdrop-filter: blur(4px); z-index: 80; display: grid; place-items: center; padding: 18px; animation: fade .15s ease; } .dialog { width: 100%; max-width: 460px; background: var(--bg-elev); border: 1px solid var(--line-2); border-radius: var(--r-lg); padding: 22px; box-shadow: var(--shadow-3); } .dialog h3 { margin: 0 0 8px; font-size: 18px; } .dialog p { margin: 0; color: var(--text-mute); font-size: 14px; } .dialog-actions { display: flex; gap: 10px; justify-content: flex-end; margin-top: 18px; flex-wrap: wrap; } @keyframes fade { from { opacity: 0; } to { opacity: 1; } } /* ===== Misc ===== */ .note { margin-top: 10px; padding: 12px 14px; border-radius: var(--r-md); background: rgba(192,132,252,0.10); border: 1px solid rgba(192,132,252,0.25); color: #ddd0f7; font-size: 13px; } .note.warn { background: rgba(255,209,102,0.08); border-color: rgba(255,209,102,0.25); color: #ffe5a3; } .note.danger { background: rgba(255,107,107,0.08); border-color: rgba(255,107,107,0.25); color: #ffc1c1; } .kbd { font-family: ui-monospace, monospace; font-size: 12px; padding: 2px 6px; border: 1px solid var(--line-2); background: var(--bg); border-radius: 6px; color: var(--text); } .row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .col { display: flex; flex-direction: column; gap: 8px; } .spacer { flex: 1; } .muted { color: var(--text-mute); } .dim { color: var(--text-dim); } .center { text-align: center; } .hide { display: none !important; } /* Cat selector */ .cat-grid { display: grid; gap: 12px; } @media (min-width: 640px) { .cat-grid { grid-template-columns: repeat(2, 1fr); } } .cat-tile { position: relative; text-align: left; padding: 18px; border: 1px solid var(--line); border-radius: var(--r-md); background: rgba(255,255,255,0.025); cursor: pointer; transition: border-color .15s ease, transform .12s ease; display: flex; flex-direction: column; gap: 8px; } .cat-tile:hover { border-color: var(--line-2); } .cat-tile:active { transform: scale(0.99); } .cat-tile.is-done { opacity: 0.6; } .cat-tile h4 { margin: 0; font-size: 16px; } .cat-tile p { margin: 0; color: var(--text-mute); font-size: 13px; } .cat-tile-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; } .empty-pill { flex: 0 0 auto; font-size: 10.5px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; padding: 3px 9px; border-radius: 999px; background: rgba(255,119,0,0.15); color: #ffa64d; border: 1px solid rgba(255,119,0,0.35); } .done-pill { flex: 0 0 auto; font-size: 10.5px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; padding: 3px 9px; border-radius: 999px; background: rgba(0,204,255,0.10); color: #7fdfff; border: 1px solid rgba(0,204,255,0.30); } .cat-tile.is-empty-cat { border-color: rgba(255,119,0,0.30); background: rgba(255,119,0,0.04); } .cat-tiers { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; } .tpill { font-size: 11px; padding: 2px 8px; border-radius: 999px; background: rgba(255,255,255,0.04); color: var(--text-dim); border: 1px solid var(--line); font-variant-numeric: tabular-nums; } .tpill[data-done="some"] { background: rgba(255,119,0,0.10); color: #ffb35c; border-color: rgba(255,119,0,0.25); } .tpill[data-done="full"] { background: rgba(0,204,255,0.10); color: #7fdfff; border-color: rgba(0,204,255,0.30); } /* Tier-Progress im Dashboard-Header */ .tier-progress { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; } .tier-stage { font-size: 11.5px; padding: 4px 10px; border-radius: 999px; background: rgba(255,255,255,0.03); color: var(--text-dim); border: 1px solid var(--line); font-variant-numeric: tabular-nums; } .tier-stage b { color: var(--text); margin-right: 2px; } /* Tier-Färbung an die Tier-Nummer gebunden (orange/cyan/indigo). .active und .reached erhöhen die Intensität. */ .tier-stage[data-tier="1"] b { color: rgba(255,179,92,0.7); } .tier-stage[data-tier="2"] b { color: rgba(109,214,255,0.7); } .tier-stage[data-tier="3"] b { color: rgba(184,168,255,0.7); } .tier-stage[data-tier="1"].active, .tier-stage[data-tier="1"].reached { background: rgba(255,119,0,0.10); color: #ffb35c; border-color: rgba(255,119,0,0.30); } .tier-stage[data-tier="1"].active b, .tier-stage[data-tier="1"].reached b { color: #ffd0a3; } .tier-stage[data-tier="2"].active, .tier-stage[data-tier="2"].reached { background: rgba(0,204,255,0.08); color: #6dd6ff; border-color: rgba(0,204,255,0.30); } .tier-stage[data-tier="2"].active b, .tier-stage[data-tier="2"].reached b { color: #b6e9ff; } .tier-stage[data-tier="3"].active, .tier-stage[data-tier="3"].reached { background: rgba(68,0,255,0.10); color: #b8a8ff; border-color: rgba(68,0,255,0.32); } .tier-stage[data-tier="3"].active b, .tier-stage[data-tier="3"].reached b { color: #d8ccff; } .cat-tile .cat-bar { margin-top: 6px; height: 6px; border-radius: 999px; background: rgba(255,255,255,0.06); overflow: hidden; } .cat-tile .cat-bar > span { display: block; height: 100%; background: var(--grad-hero); } .cat-tile .cat-meta { display: flex; justify-content: space-between; align-items: baseline; font-size: 12px; color: var(--text-dim); } /* user-pill (in topbar) */ .user-pill { display: inline-flex; align-items: center; gap: 8px; padding: 4px 10px 4px 4px; background: var(--bg-elev); border: 1px solid var(--line); border-radius: 999px; font-size: 12px; } .avatar { width: 22px; height: 22px; border-radius: 50%; background: var(--grad-hero); display: grid; place-items: center; color: white; font-weight: 700; font-size: 11px; } /* Tester quick-toggle */ .demo-banner { margin: 12px 0 0; padding: 10px 14px; border-radius: var(--r-md); background: rgba(111,123,255,0.10); border: 1px dashed rgba(111,123,255,0.35); color: #c8cfff; font-size: 12.5px; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; } .demo-banner b { color: white; } /* Copy state */ .copied { color: var(--good) !important; } /* ========================================================== Bericht-Komponenten (Auswertung) ========================================================== */ /* ---- Sektions-Header ---- */ .report-section { margin-top: 36px; padding-top: 28px; border-top: 1px solid var(--line); } .report-section:first-of-type { border-top: 0; padding-top: 16px; margin-top: 16px; } .report-section-head { display: flex; align-items: flex-start; gap: 14px; margin-bottom: 18px; } .report-section-num { flex: 0 0 auto; font-family: "New York","Iowan Old Style","Apple Garamond","Hoefler Text",Georgia,serif; font-size: 28px; font-weight: 700; letter-spacing: -0.02em; background: var(--grad-hero); -webkit-background-clip: text; background-clip: text; color: transparent; line-height: 1; padding-top: 4px; min-width: 44px; } .report-section-title { margin: 0; font-size: 22px; letter-spacing: -0.01em; font-family: "New York","Iowan Old Style","Apple Garamond","Hoefler Text",Georgia,serif; } .report-section-sub { margin: 4px 0 0; color: var(--text-mute); font-size: 13.5px; line-height: 1.5; max-width: 60ch; } /* ---- Personen-Karten ---- */ .person-grid { display: grid; gap: 14px; } @media (min-width: 720px) { .person-grid { grid-template-columns: 1fr 1fr; } } .person-card { padding: 20px; border: 1px solid var(--line); border-radius: var(--r-md); background: radial-gradient(60% 80% at 0% 0%, rgba(255,119,0,0.08), transparent 60%), var(--bg-elev); display: flex; flex-direction: column; gap: 14px; } .person-card.is-you { background: radial-gradient(60% 80% at 0% 0%, rgba(255,119,0,0.14), transparent 60%), var(--bg-elev); border-color: rgba(255,119,0,0.30); } .person-card-head { display: flex; align-items: center; gap: 14px; } .person-avatar { width: 48px; height: 48px; border-radius: 12px; display: grid; place-items: center; background: var(--grad-hero); color: white; font-weight: 800; font-size: 16px; letter-spacing: 0.02em; flex: 0 0 auto; } .person-eyebrow { font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-dim); } .person-name { margin: 2px 0 4px; font-size: 19px; font-family: "New York","Iowan Old Style","Apple Garamond","Hoefler Text",Georgia,serif; } .person-headline { font-size: 13px; color: var(--text-mute); font-weight: 600; letter-spacing: 0.01em; } .person-narrative { margin: 0; font-size: 14px; line-height: 1.55; color: var(--text); } .person-axes { display: flex; flex-direction: column; gap: 6px; margin-top: 6px; } .axis-row { display: grid; grid-template-columns: 100px 1fr 100px; align-items: center; gap: 8px; font-size: 11px; color: var(--text-dim); } .axis-row[data-known="strong"] { color: var(--text); } .axis-row[data-known="mild"] { color: var(--text-mute); } .axis-row[data-known="unknown"]{ opacity: 0.45; } .axis-label { text-align: right; line-height: 1.2; } .axis-label-r { text-align: left; } .axis-track { position: relative; height: 8px; border-radius: 999px; background: linear-gradient(90deg, rgba(68,0,255,0.20) 0%, rgba(0,204,255,0.18) 50%, rgba(255,119,0,0.20) 100%); border: 1px solid rgba(255,255,255,0.06); } .axis-mid { position: absolute; left: 50%; top: -2px; bottom: -2px; width: 1px; background: rgba(255,255,255,0.18); } .axis-dot { position: absolute; top: 50%; width: 12px; height: 12px; border-radius: 50%; transform: translate(-50%, -50%); background: white; border: 2px solid var(--accent); box-shadow: 0 2px 8px rgba(255,119,0,0.35); } .person-tops { margin-top: 4px; padding-top: 12px; border-top: 1px solid var(--line); } .person-tops-label { font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-dim); margin-bottom: 6px; } .person-tops-list { display: flex; flex-wrap: wrap; gap: 4px; } .person-top-pill { font-size: 11.5px; padding: 3px 9px; border-radius: 999px; background: rgba(0,204,255,0.10); color: #7fdfff; border: 1px solid rgba(0,204,255,0.28); } /* ---- Achsen-Doppelprofil (8-Achsen-Vergleich) ---- */ .axes-cmp-legend { display: flex; align-items: center; font-size: 12px; color: var(--text-mute); margin-bottom: 14px; } .legend-dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 6px; vertical-align: middle; } .legend-dot.owner { background: #ff7700; box-shadow: 0 0 0 3px rgba(255,119,0,0.18); } .legend-dot.partner { background: #00ccff; box-shadow: 0 0 0 3px rgba(0,204,255,0.18); } .axes-cmp { display: flex; flex-direction: column; gap: 14px; } .axis-cmp { padding: 10px 14px; border: 1px solid var(--line); border-radius: var(--r-md); background: rgba(255,255,255,0.02); } .axis-cmp[data-closeness="close"] { border-color: rgba(0,204,255,0.30); } .axis-cmp[data-closeness="far"] { border-color: rgba(68,0,255,0.30); } .axis-cmp-head { display: flex; justify-content: space-between; font-size: 12px; color: var(--text-dim); margin-bottom: 8px; } .axis-cmp-name { color: var(--text); font-weight: 600; } .axis-cmp-track { position: relative; height: 10px; border-radius: 999px; background: linear-gradient(90deg, rgba(68,0,255,0.22) 0%, rgba(0,204,255,0.18) 50%, rgba(255,119,0,0.22) 100%); border: 1px solid rgba(255,255,255,0.06); } .axis-cmp-track .axis-dot { width: 14px; height: 14px; border-width: 3px; z-index: 2; } .axis-cmp-track .axis-dot.owner { border-color: #ff7700; box-shadow: 0 2px 10px rgba(255,119,0,0.45); } .axis-cmp-track .axis-dot.partner { border-color: #00ccff; box-shadow: 0 2px 10px rgba(0,204,255,0.45); } .axis-link { position: absolute; top: 50%; height: 2px; background: linear-gradient(90deg, rgba(255,119,0,0.55), rgba(0,204,255,0.55)); transform: translateY(-50%); z-index: 1; border-radius: 2px; } .axis-cmp-foot { margin-top: 6px; font-size: 11.5px; text-align: right; } .tone-match { color: #7fdfff; font-weight: 600; } .tone-soft { color: #ffd97a; font-weight: 600; } .tone-bound { color: #b8a8ff; font-weight: 600; } /* ---- Sub-Cluster-Heatmap ---- */ .heat-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; } @media (min-width: 600px) { .heat-grid { grid-template-columns: repeat(3, 1fr); } } @media (min-width: 900px) { .heat-grid { grid-template-columns: repeat(4, 1fr); } } .heat-cell { padding: 12px 14px; border-radius: 12px; border: 1px solid var(--line); background: rgba(255,255,255,0.02); display: flex; flex-direction: column; gap: 4px; transition: transform .12s ease, border-color .15s ease; } .heat-cell:hover { transform: translateY(-1px); } .heat-cell-name { font-size: 12px; font-weight: 600; color: var(--text); letter-spacing: -0.005em; line-height: 1.3; } .heat-cell-score { font-size: 22px; font-weight: 800; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; } .heat-cell-meta { font-size: 10.5px; color: var(--text-dim); text-transform: uppercase; letter-spacing: 0.06em; } .heat-cell[data-tone="high"] { background: rgba(0,204,255,0.10); border-color: rgba(0,204,255,0.28); } .heat-cell[data-tone="high"] .heat-cell-score { color: #7fdfff; } .heat-cell[data-tone="mid"] { background: rgba(255,119,0,0.08); border-color: rgba(255,119,0,0.25); } .heat-cell[data-tone="mid"] .heat-cell-score { color: #ffb35c; } .heat-cell[data-tone="low"] { background: rgba(68,0,255,0.10); border-color: rgba(68,0,255,0.25); } .heat-cell[data-tone="low"] .heat-cell-score { color: #b8a8ff; } .heat-cell[data-tone="vlow"] { background: rgba(255,107,107,0.06); border-color: rgba(255,107,107,0.22); } .heat-cell[data-tone="vlow"] .heat-cell-score { color: #ff8c8c; } .heat-cell[data-tone="unknown"] { opacity: 0.55; } .heat-cell[data-tone="unknown"] .heat-cell-score { color: var(--text-dim); } /* Teaser-Zellen: Bereich noch nicht vergleichbar — soll Lust auf mehr machen */ .heat-cell[data-tone="teaser"] { background: linear-gradient(135deg, rgba(0,204,255,0.06), rgba(68,0,255,0.05)); border: 1px dashed rgba(0,204,255,0.30); position: relative; overflow: hidden; transition: transform 0.15s ease, border-color 0.15s ease; } .heat-cell[data-tone="teaser"]:hover { border-color: rgba(0,204,255,0.55); transform: translateY(-1px); } .heat-cell[data-tone="teaser"] .heat-cell-name { color: var(--text); opacity: 0.85; } .heat-cell[data-tone="teaser"] .teaser-icon { font-size: 22px; color: rgba(0,204,255,0.85); } .heat-cell[data-tone="teaser"] .heat-cell-meta { color: var(--text-mute); font-size: 11px; line-height: 1.4; } /* dezenter Schimmer-Effekt damit's "noch zu holen" suggeriert */ .heat-cell[data-tone="teaser"]::before { content: ""; position: absolute; top: 0; left: -100%; width: 50%; height: 100%; background: linear-gradient(90deg, transparent, rgba(0,204,255,0.06), transparent); animation: teaser-shimmer 4s ease-in-out infinite; pointer-events: none; } @keyframes teaser-shimmer { 0%, 100% { left: -100%; } 50% { left: 200%; } } .risk-row[data-level="unknown"] .risk-summary { color: rgba(0,204,255,0.85); font-style: italic; } /* ---- Risiko-Ampel ---- */ .risk-grid { display: flex; flex-direction: column; gap: 8px; } .risk-row { display: flex; align-items: center; gap: 14px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 12px; background: rgba(255,255,255,0.02); } .risk-dot { flex: 0 0 auto; width: 14px; height: 14px; border-radius: 50%; background: var(--text-dim); box-shadow: 0 0 0 4px rgba(255,255,255,0.04); } .risk-row[data-level="low"] .risk-dot { background: #58e6a3; box-shadow: 0 0 0 4px rgba(88,230,163,0.18); } .risk-row[data-level="medium"] .risk-dot { background: #ffd166; box-shadow: 0 0 0 4px rgba(255,209,102,0.18); } .risk-row[data-level="high"] .risk-dot { background: #ff6b6b; box-shadow: 0 0 0 4px rgba(255,107,107,0.18); } .risk-row[data-level="low"] { border-color: rgba(88,230,163,0.22); } .risk-row[data-level="medium"] { border-color: rgba(255,209,102,0.22); } .risk-row[data-level="high"] { border-color: rgba(255,107,107,0.25); background: rgba(255,107,107,0.04); } .risk-name { font-weight: 700; font-size: 14px; } .risk-summary { font-size: 12.5px; color: var(--text-mute); margin-top: 2px; } .risk-body { flex: 1; min-width: 0; } /* ---- Konflikt-Hotspots ---- */ .hotspots { display: grid; gap: 12px; } @media (min-width: 720px) { .hotspots { grid-template-columns: 1fr 1fr; } } .hotspot-card { padding: 16px 18px; border-radius: var(--r-md); border: 1px solid rgba(255,209,102,0.30); background: rgba(255,209,102,0.06); } .hotspot-title { font-size: 14px; font-weight: 700; font-family: "New York","Iowan Old Style","Apple Garamond","Hoefler Text",Georgia,serif; color: #ffd97a; margin-bottom: 6px; } .hotspot-card p { margin: 0; font-size: 13.5px; line-height: 1.55; color: var(--text-mute); } /* ---- Date-Ideen ---- */ .date-ideas { display: grid; gap: 12px; } @media (min-width: 720px) { .date-ideas { grid-template-columns: 1fr 1fr; } } .date-idea-card { padding: 16px 18px; border-radius: var(--r-md); border: 1px solid rgba(255,119,0,0.28); background: linear-gradient(180deg, rgba(255,119,0,0.08), rgba(255,119,0,0.02)); } .date-idea-eyebrow { font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em; color: #ffb35c; margin-bottom: 6px; font-weight: 600; } .date-idea-card p { margin: 0; font-size: 14.5px; line-height: 1.55; color: var(--text); font-family: "New York","Iowan Old Style","Apple Garamond","Hoefler Text",Georgia,serif; } /* ===== Comparison row (Dashboard) ===== */ .comparison-row { display: flex; flex-direction: column; gap: 12px; text-align: left; padding: 16px 18px; border: 1px solid var(--line); border-radius: var(--r-md); background: rgba(255,255,255,0.025); cursor: pointer; transition: border-color .15s ease, transform .12s ease, background .15s ease; font: inherit; color: inherit; width: 100%; position: relative; } .comparison-row:hover { border-color: var(--line-2); background: rgba(255,255,255,0.04); } .comparison-row:active { transform: scale(0.99); } .comparison-row:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } .comparison-row .row-delete { position: absolute; top: 10px; right: 10px; width: 30px; height: 30px; display: grid; place-items: center; border: 1px solid transparent; border-radius: 8px; background: transparent; color: var(--text-dim); cursor: pointer; opacity: 0; transition: opacity .15s ease, background .15s ease, color .15s ease, border-color .15s ease; } .comparison-row:hover .row-delete, .comparison-row:focus-within .row-delete { opacity: 1; } .comparison-row .row-delete:hover { background: rgba(255, 107, 107, 0.12); color: #ff8c8c; border-color: rgba(255, 107, 107, 0.30); } @media (hover: none) { /* Touch-Geräte: Trash dauerhaft sichtbar (kein Hover) */ .comparison-row .row-delete { opacity: 0.55; } .comparison-row .row-delete:active { opacity: 1; } } .comparison-row .head { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; } .comparison-row .name { font-size: 16px; font-weight: 700; letter-spacing: -0.01em; } .comparison-row .meta { font-size: 12px; color: var(--text-dim); margin-top: 2px; } .comparison-row .score .big { font-size: 26px; font-weight: 800; letter-spacing: -0.02em; background: var(--grad-hero); -webkit-background-clip: text; background-clip: text; color: transparent; } .comparison-row .bars { display: flex; flex-direction: column; gap: 6px; } .comparison-row .bar { display: flex; align-items: center; gap: 10px; } .comparison-row .bar .lbl { flex: 0 0 64px; font-size: 12px; color: var(--text-dim); } .comparison-row .bar .num { flex: 0 0 auto; font-size: 11px; color: var(--text-dim); font-variant-numeric: tabular-nums; } .comparison-row .bar-track { flex: 1; height: 6px; border-radius: 999px; background: rgba(255,255,255,0.06); overflow: hidden; } .comparison-row .bar-track > span { display: block; height: 100%; background: var(--grad-hero); border-radius: inherit; } .comparison-row .bar-track.partner > span { background: linear-gradient(90deg, #00ccff, #4400ff); } .comparison-row .chips { display: flex; flex-wrap: wrap; gap: 6px; } .comparison-row .chip { font-size: 11px; font-weight: 600; padding: 3px 9px; border-radius: 999px; background: rgba(255,255,255,0.06); color: var(--text-mute); border: 1px solid var(--line); } .comparison-row .chip[data-tone="match"] { background: rgba(255,119,0,0.12); color: #ffb35c; border-color: rgba(255,119,0,0.30); } .comparison-row .chip[data-tone="boundary"] { background: rgba(68,0,255,0.16); color: #b8a8ff; border-color: rgba(68,0,255,0.32); } .comparison-row .chip[data-tone="soft"] { background: rgba(0,204,255,0.10); color: #7fdfff; border-color: rgba(0,204,255,0.28); } .comparison-row .chip[data-tone="hidden"] { color: var(--text-dim); } .comparison-row .chip[data-tone="tension"] { background: rgba(255,80,110,0.12); color: #ff7a90; border-color: rgba(255,80,110,0.30); } /* ===== Persönlichkeits-Profil (ECR-R + Big Five) ===== */ .traits-intro { margin: -4px 0 18px; padding: 14px 16px; border: 1px solid var(--line); border-radius: var(--r-md); background: rgba(0,204,255,0.05); font-size: 13px; line-height: 1.55; color: var(--text-mute); } .traits-intro p { margin: 0; } .traits-intro strong { color: var(--text); } .traits-intro em { color: var(--text-mute); font-style: normal; opacity: 0.85; } .traits-card .traits-section { margin-top: 8px; padding-top: 14px; border-top: 1px solid rgba(255,255,255,0.06); } .traits-card .traits-section:first-of-type { border-top: none; padding-top: 4px; margin-top: 0; } .traits-section-label { font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-dim); margin-bottom: 8px; } .traits-source { text-transform: none; letter-spacing: 0; font-weight: 400; color: var(--text-dim); opacity: 0.7; } .traits-style-name { font-size: 16px; font-family: "New York","Iowan Old Style","Apple Garamond","Hoefler Text",Georgia,serif; color: var(--text); margin-bottom: 4px; } .traits-style-desc { margin: 0 0 10px; font-size: 13px; line-height: 1.5; color: var(--text); } .traits-locked { font-size: 13px; color: var(--text-dim); font-style: italic; margin: 4px 0 0; } .traits-bars, .traits-rows { display: flex; flex-direction: column; gap: 4px; } .traits-row { display: grid; grid-template-columns: 140px 1fr; align-items: center; gap: 10px; font-size: 12px; color: var(--text-mute); } .traits-row[data-locked="true"] { opacity: 0.6; } .traits-row-label { white-space: nowrap; cursor: help; } .traits-locked-mini { font-size: 11px; color: var(--text-dim); font-style: italic; } .trait-bar-row { display: grid; grid-template-columns: 110px 1fr 32px; align-items: center; gap: 8px; font-size: 12px; color: var(--text-mute); } .trait-bar-row.compact { grid-template-columns: 1fr 32px; } .trait-bar-label { text-align: right; } .trait-bar { position: relative; height: 6px; border-radius: 999px; background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.04); overflow: hidden; } .trait-bar-fill { position: absolute; left: 0; top: 0; bottom: 0; background: var(--accent); border-radius: 999px; transition: width .3s ease; } .trait-bar-fill.low { background: linear-gradient(90deg, rgba(68,0,255,0.6), rgba(68,0,255,0.9)); } .trait-bar-fill.mid { background: linear-gradient(90deg, rgba(0,204,255,0.5), rgba(0,204,255,0.85)); } .trait-bar-fill.high { background: linear-gradient(90deg, rgba(255,119,0,0.6), rgba(255,119,0,0.95)); } .trait-bar-num { font-variant-numeric: tabular-nums; font-size: 11px; color: var(--text); text-align: right; } .trait-bar-num.dim { color: var(--text-dim); } /* Tiefen-Block: Stärken / Worauf achten / Was hilft */ .traits-deep-grid { display: grid; grid-template-columns: 1fr; gap: 10px; margin-top: 14px; } @media (min-width: 880px) { .traits-deep-grid { grid-template-columns: repeat(3, 1fr); } } .traits-deep-block { padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--r-sm); background: rgba(255,255,255,0.02); } .traits-deep-block ul { margin: 0; padding-left: 18px; font-size: 12.5px; line-height: 1.5; color: var(--text); } .traits-deep-block ul li { margin-bottom: 4px; } .traits-deep-block ul li:last-child { margin-bottom: 0; } .traits-deep-label { font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-dim); margin-bottom: 6px; font-weight: 600; } .traits-deep-strengths { background: rgba(255,119,0,0.04); border-color: rgba(255,119,0,0.20); } .traits-deep-strengths .traits-deep-label { color: #ffa252; } .traits-deep-watchouts { background: rgba(0,204,255,0.04); border-color: rgba(0,204,255,0.20); } .traits-deep-watchouts .traits-deep-label { color: #6dd6ff; } .traits-deep-helps { background: rgba(68,0,255,0.05); border-color: rgba(68,0,255,0.22); } .traits-deep-helps .traits-deep-label { color: #a899ff; } /* Erweiterte OCEAN-Zeilen mit Beschreibung */ .traits-row { display: block; padding: 10px 0; border-bottom: 1px solid rgba(255,255,255,0.04); } .traits-row:last-child { border-bottom: none; } .traits-row[data-locked="true"] { opacity: 0.55; } .traits-row-head { display: grid; grid-template-columns: 140px 1fr; align-items: center; gap: 10px; } .traits-row-desc { margin: 8px 0 4px; font-size: 13px; line-height: 1.5; color: var(--text); } .traits-row-watch { margin: 0; font-size: 12.5px; line-height: 1.5; color: var(--text-mute); } .traits-row-watch strong { color: #6dd6ff; font-weight: 600; } /* Konstellations-Sektion */ .constellation-title { margin: 28px 0 12px; font-size: 16px; font-family: "New York","Iowan Old Style","Apple Garamond","Hoefler Text",Georgia,serif; color: var(--text); text-transform: none; letter-spacing: 0; } .constellation-card { display: flex; flex-direction: column; gap: 22px; padding: 20px; border: 1px solid var(--line); border-radius: var(--r-md); background: radial-gradient(80% 60% at 100% 0%, rgba(68,0,255,0.06), transparent 60%), var(--bg-elev); } .constellation-card.constellation-empty { padding: 18px 20px; color: var(--text-dim); font-size: 13px; font-style: italic; } .constellation-card.constellation-empty p { margin: 0; } .constellation-block { display: flex; flex-direction: column; gap: 8px; } .constellation-eyebrow { font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-dim); } .constellation-headline { margin: 0; font-size: 17px; font-family: "New York","Iowan Old Style","Apple Garamond","Hoefler Text",Georgia,serif; color: var(--text); } .constellation-summary { margin: 0 0 8px; font-size: 13.5px; line-height: 1.55; color: var(--text); } .constellation-subhead { font-size: 12px; text-transform: uppercase; letter-spacing: 0.07em; color: var(--text-mute); margin: 6px 0 4px; font-weight: 600; } /* OCEAN-Vergleichs-Zeilen */ .ocean-compare-row { padding: 10px 12px; margin-bottom: 6px; border: 1px solid var(--line); border-radius: var(--r-sm); background: rgba(255,255,255,0.02); } .ocean-compare-row[data-kind="veryDifferent"] { border-color: rgba(0,204,255,0.30); background: rgba(0,204,255,0.05); } .ocean-compare-row[data-kind="different"] { border-color: rgba(0,204,255,0.18); } .ocean-compare-row[data-kind="aligned"] { border-color: rgba(255,119,0,0.22); background: rgba(255,119,0,0.04); } .ocean-compare-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 6px; } .ocean-compare-label { font-size: 13px; font-weight: 600; color: var(--text); } .ocean-compare-tag { font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.06em; padding: 2px 8px; border-radius: 999px; font-weight: 600; } .ocean-compare-tag.tag-veryDifferent { color: #6dd6ff; background: rgba(0,204,255,0.12); } .ocean-compare-tag.tag-different { color: #6dd6ff; background: rgba(0,204,255,0.07); } .ocean-compare-tag.tag-aligned { color: #ffb35c; background: rgba(255,119,0,0.10); } .ocean-compare-bars { display: flex; flex-direction: column; gap: 3px; margin: 6px 0 8px; } .ocean-bar-row { display: grid; grid-template-columns: 90px 1fr; align-items: center; gap: 8px; font-size: 11.5px; color: var(--text-mute); } .ocean-bar-name { text-align: right; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .ocean-compare-text { margin: 4px 0 0; font-size: 12.5px; line-height: 1.5; color: var(--text); } /* Liebessprachen-Mini-Vergleich in der Konstellation */ .ll-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 10px; } .ll-mini { padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--r-sm); background: rgba(255,255,255,0.02); } .ll-mini-name { font-size: 11px; text-transform: uppercase; letter-spacing: 0.07em; color: var(--text-dim); margin-bottom: 6px; font-weight: 600; } .ll-mini-rank { font-size: 13px; line-height: 1.6; color: var(--text); } .ll-mini-rank b { color: var(--accent); margin-right: 4px; } .ll-mini-rank .dim { font-size: 11px; } /* ===== Hero-Block (Sektionen mit einer einzelnen Klassifikation) ===== */ .trait-hero { margin-top: 4px; margin-bottom: 14px; padding: 14px 16px; border-radius: var(--r-md); background: linear-gradient(135deg, rgba(255,119,0,0.06), rgba(68,0,255,0.05)); border: 1px solid var(--line); } .trait-hero-eyebrow { font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-dim); font-weight: 600; margin-bottom: 4px; } .trait-hero-headline { font-size: 18px; font-family: "New York","Iowan Old Style","Apple Garamond","Hoefler Text",Georgia,serif; color: var(--text); margin-bottom: 6px; line-height: 1.25; } .trait-hero-sub { font-size: 12.5px; color: var(--text-mute); margin-bottom: 8px; } .trait-hero-sub b { color: var(--text); font-weight: 600; } .trait-hero-desc { margin: 6px 0 0; font-size: 13.5px; line-height: 1.55; color: var(--text); } .trait-hero-tip { margin: 0 0 14px; padding: 10px 12px; border-radius: var(--r-sm); background: rgba(0,204,255,0.06); border: 1px solid rgba(0,204,255,0.20); font-size: 12.5px; line-height: 1.5; color: var(--text); } .trait-hero-tip strong { color: #6dd6ff; font-weight: 600; } .trait-section-intro { margin: 4px 0 14px; font-size: 13px; line-height: 1.55; color: var(--text-mute); } /* ===== Dimensions-Karten (für OCEAN, Wahrnehmungsstil, LL-Ranking, Gottman, SIS/SES) ===== */ .dim-cards-stack { display: flex; flex-direction: column; gap: 8px; } .dim-cards-group { margin-top: 14px; } .dim-cards-group-label { font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.07em; font-weight: 600; margin-bottom: 6px; } .dim-cards-group-risk .dim-cards-group-label { color: #6dd6ff; } .dim-cards-group-protect .dim-cards-group-label { color: #ffa252; } .dim-cards-group .dim-cards-group { margin-top: 8px; } .dim-cards-group .dim-card { margin-bottom: 6px; } .dim-cards-group .dim-card:last-child { margin-bottom: 0; } .dim-card { padding: 11px 14px 10px; border: 1px solid var(--line); border-radius: var(--r-sm); background: rgba(255,255,255,0.025); border-left: 3px solid rgba(255,255,255,0.12); transition: background 0.15s ease; } .dim-card[data-tone="high"] { border-left-color: rgba(255,119,0,0.7); } .dim-card[data-tone="mid"] { border-left-color: rgba(0,204,255,0.55); } .dim-card[data-tone="low"] { border-left-color: rgba(68,0,255,0.55); } .dim-card[data-tone="locked"] { opacity: 0.55; border-left-color: rgba(255,255,255,0.08); } .dim-card[data-tone="unknown"] { opacity: 0.45; border-left-color: rgba(255,255,255,0.08); } .dim-card.is-highlight { background: rgba(255,119,0,0.06); border-color: rgba(255,119,0,0.30); } .dim-card-head { display: grid; grid-template-columns: auto 1fr 1fr; align-items: center; gap: 10px; } .dim-card-head:has(.dim-card-rank) { grid-template-columns: auto 1fr 1fr; } /* Wenn kein Rank vorhanden: zwei Spalten (Label, Bar) */ .dim-card-head:not(:has(.dim-card-rank)) { grid-template-columns: minmax(140px, 1fr) 1fr; } .dim-card-rank { font-size: 12px; font-weight: 700; color: var(--accent); font-variant-numeric: tabular-nums; width: 18px; flex: 0 0 18px; } .dim-card-label { font-size: 13px; font-weight: 600; color: var(--text); cursor: help; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .dim-card-bar { min-width: 0; } .dim-card-desc { margin: 8px 0 0; font-size: 12.5px; line-height: 1.5; color: var(--text); } .dim-card-watch { margin: 6px 0 0; padding-top: 6px; border-top: 1px dashed rgba(255,255,255,0.07); font-size: 11.5px; line-height: 1.45; color: var(--text-mute); } .dim-card-watch strong { color: #6dd6ff; font-weight: 600; } /* ===== Konstellations-Visualisierungen ===== */ .const-visual { margin: 12px 0 16px; padding: 12px; border-radius: var(--r-sm); background: rgba(0,0,0,0.18); border: 1px solid var(--line); } .const-visual svg { display: block; width: 100%; height: auto; max-width: 360px; margin: 0 auto; } /* Quadrant */ .quadrant-vis { display: flex; flex-direction: column; gap: 6px; align-items: center; } .quadrant-axes { display: flex; flex-direction: column; gap: 2px; font-size: 11px; color: var(--text-mute); text-align: center; margin-top: 2px; } .quadrant-axes b { color: var(--text); font-weight: 600; } .quadrant-axis-y { font-size: 10.5px; opacity: 0.8; } .quadrant-legend { display: flex; align-items: center; gap: 4px; font-size: 11.5px; color: var(--text-mute); margin-top: 4px; } /* Spektrum */ .spectrum-vis { display: flex; flex-direction: column; gap: 4px; align-items: center; } .spectrum-label { font-size: 11px; text-transform: uppercase; letter-spacing: 0.07em; color: var(--text-dim); font-weight: 600; } /* Gap-Bars */ .gap-bars-vis { display: flex; flex-direction: column; gap: 10px; } .gap-bar-row { padding: 8px 10px; border-radius: var(--r-sm); border: 1px solid var(--line); background: rgba(255,255,255,0.02); } .gap-bar-row[data-tone="large"] { border-color: rgba(0,204,255,0.30); background: rgba(0,204,255,0.05); } .gap-bar-row[data-tone="mild"] { border-color: rgba(0,204,255,0.18); } .gap-bar-row[data-tone="close"] { border-color: rgba(255,119,0,0.22); background: rgba(255,119,0,0.04); } .gap-bar-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px; font-size: 12px; } .gap-bar-label { color: var(--text); font-weight: 600; } .gap-bar-meta { color: var(--text-dim); font-variant-numeric: tabular-nums; font-size: 11px; } .gap-bar-track { position: relative; height: 8px; border-radius: 999px; background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.04); } .gap-bar-link { position: absolute; top: 50%; transform: translateY(-50%); height: 3px; border-radius: 999px; background: rgba(0,204,255,0.4); } .gap-bar-row[data-tone="close"] .gap-bar-link { background: rgba(255,119,0,0.4); } .gap-bar-dot { position: absolute; top: 50%; width: 11px; height: 11px; border-radius: 50%; transform: translate(-50%, -50%); border: 1.5px solid white; } .gap-bar-dot.owner { background: rgba(255,119,0,0.95); border-color: rgba(255,119,0,0.4); } .gap-bar-dot.partner { background: rgba(0,204,255,0.95); border-color: rgba(0,204,255,0.4); } /* Konstellations-Block-Voll-Layout */ .constellation-block-full { padding-bottom: 6px; } /* Wissenswertes-Box (Forschungs-Hintergrund) */ .const-knowledge { margin-top: 14px; padding: 10px 12px; border-radius: var(--r-sm); background: rgba(68,0,255,0.06); border: 1px solid rgba(68,0,255,0.22); display: flex; gap: 10px; align-items: flex-start; font-size: 12.5px; line-height: 1.5; color: var(--text); } .const-knowledge-icon { flex: 0 0 auto; font-size: 16px; } .const-knowledge-body b { color: #b8a8ff; font-weight: 600; } /* Tipp-Box (konkrete Übung) */ .const-tip { margin-top: 8px; padding: 10px 12px; border-radius: var(--r-sm); background: rgba(0,204,255,0.06); border: 1px solid rgba(0,204,255,0.22); display: flex; gap: 10px; align-items: flex-start; font-size: 12.5px; line-height: 1.5; color: var(--text); } .const-tip-icon { flex: 0 0 auto; font-size: 16px; } .const-tip-body b { color: #6dd6ff; font-weight: 600; } /* ===== Print-Header (nur in PDF/Druck sichtbar) und Print-Only-Helper ===== */ .print-header { display: none; } .print-only { display: none !important; } /* ============================================================ PRINT-STYLESHEET — optimiert für PDF-Export via Browser-Druck Dunkles Theme → druckfreundliches helles Layout ============================================================ */ @media print { /* Page-Setup: A4 mit moderaten Rändern */ @page { size: A4; margin: 14mm 12mm 14mm 12mm; } /* Reset & Grundfarben — alles auf hell, klar, druckbar. KEIN box-shadow:none auf *, weil gap-bar-dot Marker box-shadow als Border-Trick nutzen. */ * { -webkit-print-color-adjust: exact !important; print-color-adjust: exact !important; } /* Glasmorphismus-Schatten der Karten in Print abschalten — gezielt */ .card, .card-tight, .person-card, .traits-card, .constellation-card, .topbar, .tab-bar, .toast, .dialog { box-shadow: none !important; } html, body { background: white !important; color: #1a1a1a !important; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif !important; font-size: 10.5pt; line-height: 1.45; } /* Verstecke alle UI-Chrome-Elemente, die in PDF nicht hingehören */ .topbar, .tab-bar, #toast-root, #dialog-root, .no-print, .btn, button[data-action], .row-delete, .pagination, /* spezifisch */ #app-header, .splash, .footer { display: none !important; } /* WICHTIG: KEIN globales position:static — das würde Slider-Handles (gap-bar-dot, trait-bar-fill, axis-dot, spectrum-Marker) aus der Position reissen, weil die alle position:absolute brauchen, um auf ihrer Bar/Track zu sitzen. Die wenigen sticky/fixed Elemente (topbar, tab-bar) werden bereits oben mit display:none ausgeblendet, also entfällt das Problem. */ /* Container Reset */ #view-root, .container, main { padding: 0 !important; margin: 0 !important; max-width: 100% !important; } /* Print-Header (am Anfang jeder Druck-Seite via fixed Image-Trick nicht möglich ohne Header/Footer-Templates; daher nur einmal oben) */ .print-header { display: block !important; border-bottom: 1px solid #d0d0d0; padding-bottom: 8px; margin-bottom: 14px; } .print-header-brand { font-family: "New York","Iowan Old Style",Georgia,serif; font-size: 14pt; color: #ff7700; font-weight: 600; } .print-header-meta { font-size: 9pt; color: #666; margin-top: 2px; } .print-only { display: block !important; } .print-intro { font-size: 9.5pt; color: #555; font-style: italic; margin: 0 0 16px; } /* Headlines */ h1, h2 { color: #1a1a1a !important; font-family: "New York","Iowan Old Style",Georgia,serif !important; } h1 { font-size: 22pt; margin: 0 0 6pt; } h2 { font-size: 14pt; margin: 14pt 0 6pt; } h3 { font-size: 12pt; margin: 10pt 0 4pt; color: #1a1a1a !important; } h4 { font-size: 11pt; margin: 8pt 0 4pt; color: #1a1a1a !important; } p, li { color: #333 !important; } /* Karten — weißer Hintergrund mit subtiler Border */ .card, .card-tight, .person-card, .traits-card, .constellation-card, .radar-card, .heat-cell { background: white !important; border: 1px solid #ddd !important; border-radius: 4px !important; padding: 10pt !important; margin-bottom: 10pt !important; page-break-inside: avoid; } .person-card.is-you { border-color: #ff7700 !important; } .traits-card { padding: 12pt !important; } /* Sektion-Headers im Bericht */ .report-section-head { margin: 14pt 0 8pt !important; page-break-after: avoid; } .report-section-num { color: #ff7700 !important; font-size: 14pt !important; background: none !important; } .report-section-title { color: #1a1a1a !important; font-size: 13pt !important; } .report-section-sub { color: #666 !important; font-size: 9.5pt !important; } .report-section { page-break-inside: auto; } /* Hero-Block bleibt mit Akzent, aber gedämpft */ .trait-hero { background: #faf6f0 !important; border: 1px solid #ddd !important; page-break-inside: avoid; } .trait-hero-eyebrow { color: #ff7700 !important; } .trait-hero-headline { color: #1a1a1a !important; } .trait-hero-desc, .trait-hero-sub { color: #333 !important; } /* Dimension-Karten */ .dim-card { background: #fafafa !important; border: 1px solid #ddd !important; page-break-inside: avoid; } .dim-card[data-tone="high"] { border-left: 3px solid #ff7700 !important; } .dim-card[data-tone="mid"] { border-left: 3px solid #0099cc !important; } .dim-card[data-tone="low"] { border-left: 3px solid #5544cc !important; } .dim-card-label, .dim-card-desc { color: #1a1a1a !important; } .dim-card-watch { color: #444 !important; border-color: #ddd !important; } .dim-card-watch strong { color: #0099cc !important; } /* Bars und Tracks — sichtbar im Print */ .trait-bar, .gap-bar-track, .axis-track, .progress, .progress-bar, .bar-track, .cat-bar { background: #e8e8e8 !important; border: 1px solid #ccc !important; } .trait-bar-fill { background: #ff7700 !important; } .trait-bar-fill.low { background: #5544cc !important; } .trait-bar-fill.mid { background: #0099cc !important; } .trait-bar-fill.high { background: #ff7700 !important; } .trait-bar-num { color: #1a1a1a !important; } /* 3-Spalten-Boxen (Stärken / Watchouts / Helps) — flach drucken */ .traits-deep-grid { gap: 8pt !important; } .traits-deep-block { background: #fafafa !important; border: 1px solid #ddd !important; page-break-inside: avoid; } .traits-deep-strengths { background: #fff5ed !important; border-color: #ffd5b3 !important; } .traits-deep-watchouts { background: #f0f9fc !important; border-color: #b3dff0 !important; } .traits-deep-helps { background: #f3f1ff !important; border-color: #ccc4ff !important; } .traits-deep-strengths .traits-deep-label { color: #cc5500 !important; } .traits-deep-watchouts .traits-deep-label { color: #006d99 !important; } .traits-deep-helps .traits-deep-label { color: #4433aa !important; } .traits-deep-block ul li { color: #333 !important; } /* Wissen + Tipp Boxen */ .const-knowledge { background: #f3f1ff !important; border: 1px solid #ccc4ff !important; page-break-inside: avoid; } .const-knowledge-body b { color: #4433aa !important; } .const-tip { background: #f0f9fc !important; border: 1px solid #b3dff0 !important; page-break-inside: avoid; } .const-tip-body b { color: #006d99 !important; } /* SVG-Visualisierungen */ .const-visual { background: white !important; border: 1px solid #ddd !important; page-break-inside: avoid; } .const-visual svg { max-width: 280px !important; } .quadrant-vis svg rect { fill: #fafafa !important; stroke: #ccc !important; } .quadrant-vis svg line { stroke: #d0d0d0 !important; } /* SVG-Texte behalten ihre Inline-Farben (Quadranten-Labels grau, Marker-Buchstaben orange/cyan) */ .quadrant-axes, .quadrant-axes b { color: #333 !important; } .quadrant-legend { color: #555 !important; } .spectrum-vis svg line { stroke: #ccc !important; } .spectrum-label { color: #666 !important; } /* Bar-Tracks brauchen position:relative damit absolute Marker-Punkte korrekt sitzen */ .gap-bar-track, .trait-bar, .axis-track, .progress, .bar-track, .cat-bar { position: relative !important; } /* Gap-Bar-Punkte für beide Personen — kontrastreich */ .gap-bar-dot.owner { background: #ff7700 !important; border-color: #fff !important; box-shadow: 0 0 0 1px #ff7700 !important; } .gap-bar-dot.partner { background: #0099cc !important; border-color: #fff !important; box-shadow: 0 0 0 1px #0099cc !important; } .gap-bar-link { background: #0099cc !important; opacity: 0.4; } /* OCEAN-Compare-Reihen */ .ocean-compare-row { background: #fafafa !important; border: 1px solid #ddd !important; page-break-inside: avoid; } .ocean-compare-row[data-kind="veryDifferent"] { border-color: #b3dff0 !important; background: #f0f9fc !important; } .ocean-compare-row[data-kind="aligned"] { border-color: #ffd5b3 !important; background: #fff5ed !important; } .ocean-compare-label, .ocean-compare-text { color: #1a1a1a !important; } .ocean-bar-name { color: #555 !important; } .ocean-compare-tag.tag-veryDifferent { background: #e0f4fa !important; color: #006d99 !important; } .ocean-compare-tag.tag-different { background: #f0f9fc !important; color: #006d99 !important; } .ocean-compare-tag.tag-aligned { background: #ffe5cc !important; color: #cc5500 !important; } /* Tabs (im Bericht-Detail) ausblenden, nur Inhalt zeigen */ .tabs { display: none !important; } .result-list { display: block !important; } /* Person-Card-Avatar */ .person-avatar { background: #ff7700 !important; color: white !important; } .person-eyebrow { color: #ff7700 !important; } .person-name { color: #1a1a1a !important; } .person-headline { color: #555 !important; } .person-narrative { color: #333 !important; } /* Section-Title (im Profil-Tab) */ .section-title h2 { font-size: 13pt !important; } .section-title .hint { color: #666 !important; } /* Tier-Progress */ .tier-stage { background: #fafafa !important; color: #555 !important; border: 1px solid #ddd !important; } .tier-stage.reached { background: #fff5ed !important; color: #cc5500 !important; border-color: #ffd5b3 !important; } .tier-stage.active { background: #f0f9fc !important; color: #006d99 !important; border-color: #b3dff0 !important; } /* Page breaks vor wichtigen Sektionen, nach 1. Seite */ .report-section + .report-section, .traits-section + .traits-section, .constellation-block + .constellation-block-full { page-break-before: auto; } .traits-section { page-break-inside: avoid; } /* Footer-Hinweis */ .traits-intro { background: #f5f5f5 !important; border: 1px solid #ddd !important; color: #555 !important; } .traits-intro strong { color: #1a1a1a !important; } /* Locked-Items: in Print uninteressant, weg */ [data-locked="true"], .traits-locked, .traits-locked-mini { display: none !important; } }