/* ═══════════════════════════════════════════════════════════════════════════ VidaJob TIEFE — das zentrale taktile 3D-Interaktionssystem (v226) Lastenheft Thomas 14.08.2026: „80 % seriöse SaaS-Oberfläche, 20 % magische, fühlbare Tiefe. Weiches Glas, Licht und Berührung." EINE Quelle für alle Seiten. Keine Seite definiert eigene Button-Stile. Zustände: Normal · Hover · Gedrückt · Ausgewählt · Fokus · Deaktiviert · Laden. Jede :hover/:active-Regel hat eine Zwillingsklasse (.zHover/.zAktiv/…), damit die Komponentenübersicht jeden Zustand nebeneinander ZEIGEN kann. Tiefe entsteht aus vier Lichtern, nie aus dicken Rahmen: 1. Lichtreflex oben inset 0 1px 0 rgba(255,255,255,…) 2. dunkle Unterkante inset 0 -1px 0 rgba(0,0,0,…) 3. weicher Wurfschatten 0 Ypx Blur -Spread rgba(0,0,0,…) 4. persönlicher Lichtschein 0 0 Blur -Spread var(--acc) ═══════════════════════════════════════════════════════════════════════ */ :root{ /* Farben — --acc wird von der Farbwahl der Seite überschrieben */ --acc:#2be3a7; --violett:#8b5cf6; --gold:#e8b437; --t-text:#eef2f9; --t-muted:#93a0b8; --t-ink:#0b0d1a; --t-line:rgba(255,255,255,.09); --t-glas:rgba(255,255,255,.045); --t-glas2:rgba(255,255,255,.075); /* Tiefen-Stufen (Wurfschatten) */ --t-schatten-1:0 2px 10px -6px rgba(0,0,0,.55); --t-schatten-2:0 6px 18px -8px rgba(0,0,0,.6); --t-schatten-3:0 12px 34px -12px rgba(0,0,0,.65); /* Kanten-Licht */ --t-licht:inset 0 1px 0 rgba(255,255,255,.16); --t-licht-stark:inset 0 1px 0 rgba(255,255,255,.28); --t-kante:inset 0 -1px 0 rgba(0,0,0,.35); /* eingedrückt */ --t-innen:inset 0 2px 6px rgba(0,0,0,.45); /* Lichtschein */ --t-glow-leise:0 0 12px -7px var(--acc); --t-glow:0 0 19px -7px var(--acc); --t-glow-laut:0 0 29px -9px var(--acc); /* Bewegung */ --t-hub:-2px; --t-senk:1.5px; --t-schnell:.14s; --t-ruhig:.32s; --t-farbe:.5s; --t-rund:13px; } /* ─── Basisverhalten aller taktilen Elemente ─── */ .kn3, .kn3-sek, .icon-kn, .kugel, .segment button{ transition:transform var(--t-schnell) ease, box-shadow var(--t-ruhig) ease, background-color var(--t-farbe), border-color var(--t-farbe), color var(--t-farbe), filter var(--t-ruhig); will-change:transform; -webkit-tap-highlight-color:transparent; } /* ═══ 1 · PRIMÄRER KNOPF — die eine wichtigste Aktion der Ansicht ═══ */ .kn3{ display:inline-flex;align-items:center;justify-content:center;gap:9px; padding:15px 22px;border-radius:var(--t-rund);border:0;cursor:pointer; font:700 1.02rem/1.2 system-ui,sans-serif;color:#fff; background:linear-gradient(180deg, color-mix(in oklab, var(--acc) 82%, #fff 6%), color-mix(in oklab, var(--acc) 62%, var(--violett) 38%)); box-shadow:var(--t-licht-stark), var(--t-kante), var(--t-schatten-2), var(--t-glow); text-shadow:0 1px 2px rgba(0,0,0,.25); } .kn3:hover,.kn3.zHover{ transform:translateY(var(--t-hub)); box-shadow:var(--t-licht-stark), var(--t-kante), var(--t-schatten-3), var(--t-glow-laut); filter:brightness(1.05); } .kn3:active,.kn3.zAktiv{ transform:translateY(var(--t-senk)); box-shadow:var(--t-licht), var(--t-innen), var(--t-schatten-1), var(--t-glow-leise); filter:brightness(.97); } /* ═══ 2 · SEKUNDÄRER KNOPF — dunkles Glas mit erhabener Kante ═══ */ .kn3-sek{ display:inline-flex;align-items:center;justify-content:center;gap:8px; padding:13px 18px;border-radius:var(--t-rund);cursor:pointer; font:600 .95rem/1.2 system-ui,sans-serif;color:var(--t-text); background:linear-gradient(180deg, rgba(255,255,255,.09), rgba(255,255,255,.04)); border:1px solid var(--t-line); box-shadow:var(--t-licht), var(--t-kante), var(--t-schatten-1); } .kn3-sek:hover,.kn3-sek.zHover{ transform:translateY(var(--t-hub)); border-color:color-mix(in oklab, var(--acc) 55%, transparent); box-shadow:var(--t-licht), var(--t-kante), var(--t-schatten-2), var(--t-glow-leise); } .kn3-sek:active,.kn3-sek.zAktiv{ transform:translateY(var(--t-senk)); box-shadow:var(--t-innen), var(--t-schatten-1); } /* Ausgewählt — nie nur über Farbe: Rand + Haken ✓ */ .kn3-sek[aria-pressed="true"], .kn3-sek.zGewaehlt{ border-color:var(--acc); color:var(--t-text); background:linear-gradient(180deg, rgba(255,255,255,.12), rgba(255,255,255,.06)); box-shadow:var(--t-licht-stark), var(--t-kante), var(--t-schatten-2), var(--t-glow-leise); } .kn3-sek[aria-pressed="true"]::before, .kn3-sek.zGewaehlt::before{ content:"✓"; font-size:.85em; color:var(--acc); font-weight:800; } /* ═══ Gemeinsame Zustände: Fokus · Deaktiviert · Laden ═══ */ .kn3:focus-visible,.kn3-sek:focus-visible,.icon-kn:focus-visible, .kugel:focus-visible,.segment button:focus-visible,.tief-fokus{ outline:2px solid #fff; outline-offset:3px; box-shadow:var(--t-licht), var(--t-kante), var(--t-schatten-1); /* Glow weicht — der Rahmen gewinnt */ } .kn3:disabled,.kn3-sek:disabled,.icon-kn:disabled,.zAus{ cursor:not-allowed; opacity:.68; transform:none!important; box-shadow:var(--t-innen); filter:saturate(.65); } .laedt{ position:relative; pointer-events:none; color:transparent!important; text-shadow:none!important; } .laedt::after{ content:""; position:absolute; inset:0; margin:auto; width:18px; height:18px; border-radius:50%; border:2.5px solid rgba(255,255,255,.35); border-top-color:#fff; animation:tiefDrehen 1s linear infinite; } @keyframes tiefDrehen{to{transform:rotate(360deg)}} /* ═══ 3 · SEGMENT-STEUERUNG — der physische Umschalter ═══ */ .segment{ display:flex;padding:5px;gap:5px;border-radius:15px; background:rgba(0,0,0,.28); border:1px solid var(--t-line); box-shadow:var(--t-innen); /* die Mulde, in der der Schalter läuft */ } .segment button{ flex:1;padding:12px 10px;border-radius:11px;border:1px solid transparent;cursor:pointer; font:600 .95rem/1.2 system-ui,sans-serif;color:var(--t-muted);background:transparent; white-space:nowrap; } .segment button.an,.segment button.zGewaehlt{ color:var(--t-text); background:linear-gradient(180deg, rgba(255,255,255,.13), rgba(255,255,255,.05)); border-color:color-mix(in oklab, var(--acc) 65%, transparent); box-shadow:var(--t-licht-stark), var(--t-kante), var(--t-schatten-1), var(--t-glow-leise); transform:translateY(-1px); } .segment button:not(.an):hover,.segment button.zHover{ color:var(--t-text); } .segment button:not(.an):active,.segment button.zAktiv{ transform:translateY(var(--t-senk)); } /* ═══ 4 · FARBKUGEL — kleine beleuchtete Glaskugel ═══ */ .kugel{ --kf:#2be3a7; /* Kugelfarbe, je Knopf gesetzt */ width:50px;height:50px;border-radius:50%;border:3px solid transparent;cursor:pointer; position:relative;flex:none; background:radial-gradient(circle at 32% 26%, rgba(255,255,255,.9), color-mix(in oklab, var(--kf) 90%, #fff) 26%, var(--kf) 55%, color-mix(in oklab, var(--kf) 68%, #000) 100%); box-shadow:0 4px 12px -4px color-mix(in oklab, var(--kf) 60%, #000), 0 0 13px -7px var(--kf), var(--t-kante); } .kugel::after{ /* der kleine Lichtpunkt oben */ content:"";position:absolute;top:6px;left:11px;width:10px;height:6px;border-radius:50%; background:rgba(255,255,255,.75);filter:blur(1px);transform:rotate(-18deg); } .kugel:hover,.kugel.zHover{ transform:translateY(var(--t-hub)); } .kugel:active,.kugel.zAktiv{ transform:translateY(var(--t-senk)) scale(.96); } .kugel.an,.kugel.zGewaehlt{ border-color:#fff; transform:translateY(-1px) scale(1.06); box-shadow:0 6px 16px -5px color-mix(in oklab, var(--kf) 60%, #000), 0 0 26px -4px var(--kf), var(--t-kante); } .kugel.an::before,.kugel.zGewaehlt::before{ /* Auswahl auch ohne Farbe erkennbar */ content:"✓";position:absolute;inset:0;display:flex;align-items:center;justify-content:center; color:#fff;font-weight:800;font-size:1.05rem;text-shadow:0 1px 3px rgba(0,0,0,.55); } /* ═══ 5 · REGLER — Schiene mit Mulde, Knopf als Glaskugel ═══ */ .tief-regler{ width:100%;height:40px;margin:6px 0 2px; -webkit-appearance:none;appearance:none;background:transparent;cursor:pointer; } .tief-regler::-webkit-slider-runnable-track{ height:10px;border-radius:99px; background:linear-gradient(90deg,var(--violett),var(--acc) 55%,var(--gold)); box-shadow:var(--t-innen); } .tief-regler::-webkit-slider-thumb{ -webkit-appearance:none;width:30px;height:30px;margin-top:-10px; border-radius:50%;border:2px solid rgba(255,255,255,.9); background:radial-gradient(circle at 32% 26%, #fff, var(--acc) 45%, color-mix(in oklab, var(--acc) 70%, #000)); box-shadow:0 4px 10px -3px rgba(0,0,0,.6), 0 0 16px -4px var(--acc); transition:transform var(--t-schnell); } .tief-regler:active::-webkit-slider-thumb{ transform:scale(1.12); } .tief-regler::-moz-range-track{ height:10px;border-radius:99px; background:linear-gradient(90deg,var(--violett),var(--acc) 55%,var(--gold)); box-shadow:var(--t-innen); } .tief-regler::-moz-range-thumb{ width:28px;height:28px;border-radius:50%; border:2px solid rgba(255,255,255,.9); background:radial-gradient(circle at 32% 26%, #fff, var(--acc) 45%, color-mix(in oklab, var(--acc) 70%, #000)); box-shadow:0 4px 10px -3px rgba(0,0,0,.6), 0 0 16px -4px var(--acc); } .tief-regler:focus-visible{ outline:2px solid #fff;outline-offset:5px;border-radius:8px; } /* ═══ 6 · RUNDER ICON-KNOPF — schwebendes Glaselement ═══ */ .icon-kn{ width:52px;height:52px;border-radius:50%;border:1px solid rgba(255,255,255,.25);cursor:pointer; display:inline-flex;align-items:center;justify-content:center;font-size:1.3rem;flex:none; color:var(--t-ink); background:radial-gradient(circle at 34% 28%, #fff, #e9edf5 60%, #cdd6e4); box-shadow:var(--t-licht-stark), 0 6px 16px -6px rgba(0,0,0,.55), var(--t-glow-leise); } .icon-kn:hover,.icon-kn.zHover{ transform:translateY(var(--t-hub)); box-shadow:var(--t-licht-stark), 0 10px 22px -8px rgba(0,0,0,.6), var(--t-glow); } .icon-kn:active,.icon-kn.zAktiv{ transform:translateY(var(--t-senk)) scale(.97); box-shadow:var(--t-innen), 0 3px 8px -4px rgba(0,0,0,.5); } .icon-kn.klein{ width:44px;height:44px;font-size:1.02rem; } /* v241 (VidaPulse F-04): echte 44er-Box statt Pseudo-Flaeche */ .icon-kn.dunkel{ color:var(--t-text); background:linear-gradient(180deg, rgba(255,255,255,.12), rgba(255,255,255,.05)); border-color:var(--t-line); } /* ═══ 7–9 · KARTEN in drei Tiefenebenen ═══ */ .karte-e1{ background:var(--t-glas); border:1px solid var(--t-line); border-radius:20px; padding:18px; box-shadow:var(--t-licht), var(--t-schatten-1); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px); } .karte-e2{ background:var(--t-glas2); border:1px solid color-mix(in oklab, var(--acc) 35%, var(--t-line)); border-radius:20px; padding:18px; box-shadow:var(--t-licht-stark), var(--t-schatten-2), var(--t-glow-leise); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px); } .karte-e3{ position:relative; background:var(--t-glas2); border:1px solid var(--acc); border-radius:20px; box-shadow:var(--t-licht-stark), var(--t-schatten-3), var(--t-glow); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px); } .karte-e3::before{ /* der Lichtschein HINTER der wichtigsten Karte */ content:"";position:absolute;inset:-14px;border-radius:26px;z-index:-1; background:radial-gradient(60% 55% at 50% 30%, color-mix(in oklab, var(--acc) 22%, transparent), transparent 75%); filter:blur(10px); } /* ═══ 12 · Ruhe & Rücksicht ═══ */ @media (prefers-reduced-motion: reduce){ .kn3,.kn3-sek,.icon-kn,.kugel,.segment button,.tief-regler{ transition:none!important; } .kn3:hover,.kn3-sek:hover,.icon-kn:hover,.kugel:hover, .kn3:active,.kn3-sek:active,.icon-kn:active,.kugel:active{ transform:none!important; } .laedt::after{ animation-duration:2s; } } /* Geräte ohne Backdrop-Unterstützung bekommen ruhige Vollflächen statt Milchglas */ @supports not (backdrop-filter: blur(1px)){ .karte-e1,.karte-e2,.karte-e3{ background:rgba(20,24,40,.92); } } /* ═══════════════════════════════════════════════════════════════════════════ ORGANIC LIQUID GLASS FLOW (Ergänzung Thomas 14.08.2026) „Die Website wechselt nicht einfach ihre Farbe — die persönliche Farbe beginnt durch sie zu leben." Die gewählte Farbe fließt in ruhigen Wellen: Farbkugel → Umschalter → Regler → Entdeckung → Erkenntniskarte → Universum. Technik: gestaffelte Übergangs-VERZÖGERUNG nur auf den Farbkanälen (--fd). Druck und Hub bleiben immer sofort — Verzögerung gilt nie für Bewegung. ═ */ .kn3, .kn3-sek, .icon-kn, .kugel, .segment button, .segment::before, .karte-e1, .karte-e2, .karte-e3, .tief-regler{ transition:transform var(--t-schnell) ease, filter var(--t-ruhig), box-shadow var(--t-ruhig) ease var(--fd,0s), background-color var(--t-farbe) var(--fd,0s), background-position var(--t-farbe) var(--fd,0s), border-color var(--t-farbe) var(--fd,0s), color var(--t-farbe) var(--fd,0s); } .fluss-1{--fd:.05s} .fluss-2{--fd:.18s} .fluss-3{--fd:.32s} .fluss-4{--fd:.48s} .fluss-5{--fd:.65s} .fluss-6{--fd:.85s} /* Der Umschalter als zusammenhängendes Flüssigkeitselement: EIN gläserner Tropfen gleitet zur gewählten Seite — mit winzigem organischem Nachschwingen. */ .segment.fluid{position:relative} .segment.fluid::before{ content:"";position:absolute;top:5px;bottom:5px;left:5px;width:calc(50% - 7px); border-radius:11px;z-index:0; background:linear-gradient(180deg, rgba(255,255,255,.13), rgba(255,255,255,.05)); border:1px solid color-mix(in oklab, var(--acc) 65%, transparent); box-shadow:var(--t-licht-stark), var(--t-kante), var(--t-schatten-1), var(--t-glow-leise); transition:transform .38s cubic-bezier(.34,1.35,.45,1), border-color var(--t-farbe) var(--fd,0s), box-shadow var(--t-ruhig) var(--fd,0s); } .segment.fluid[data-an="2"]::before{transform:translateX(calc(100% + 4px))} .segment.fluid button{position:relative;z-index:1;background:transparent!important; border-color:transparent!important;box-shadow:none!important;transform:none!important} .segment.fluid button.an{color:var(--t-text)} .segment.fluid button.an::before{content:"✓ ";color:var(--acc);font-weight:800} /* Erkenntnisse fließen aus dem Hintergrund nach vorn — einmal, dann Ruhe. */ @keyframes tiefAuf{from{opacity:.25;transform:translateY(10px) scale(.985)}to{opacity:1;transform:none}} .taucht-auf{animation:tiefAuf .5s cubic-bezier(.25,.9,.35,1)} @keyframes tiefZurueck{from{opacity:1}to{opacity:.45;transform:translateY(6px) scale(.99)}} .sinkt-zurueck{animation:tiefZurueck .4s ease forwards} @media (prefers-reduced-motion: reduce){ .segment.fluid::before{transition:none} .taucht-auf,.sinkt-zurueck{animation:none} .fluss-1,.fluss-2,.fluss-3,.fluss-4,.fluss-5,.fluss-6{--fd:0s} } /* ═══════════════════════════════════════════════════════════════════════════ DER ENTDECKUNGSRAUM (v227) — ein Panel des persönlichen Universums. Wiederverwendbar: weitere Länder, später Stellen, Portale, Favoriten. AUSWEG-GRUNDGESETZ (Thomas 14.08.2026): sichtbares ✕, Escape, Browser- Zurück, Fußweg zurück zur Entdeckung — nie eine Einbahnstraße. ═ */ .raum{position:fixed;inset:0;z-index:9000;display:flex;flex-direction:column; background:var(--t-ink); background-image:radial-gradient(700px 380px at 85% -5%, rgba(139,92,246,.14), transparent 60%)} .raum[hidden]{display:none} .raum .kopf{position:sticky;top:0;z-index:2;display:flex;align-items:flex-start;gap:12px; padding:16px 16px 12px;background:rgba(11,13,26,.88); backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px); border-bottom:1px solid var(--t-line)} .raum .kopf h2{margin:0;font-size:1.2rem;line-height:1.25} .raum .kopf p{margin:3px 0 0;font-size:.82rem;color:var(--t-muted);line-height:1.45} .raum .kopf .zu{margin-left:auto} .raum .werkzeuge{padding:10px 16px;border-bottom:1px solid var(--t-line); display:flex;flex-direction:column;gap:10px;background:rgba(11,13,26,.6)} .raum .suche{width:100%;padding:12px 14px;font-size:1rem;border-radius:12px; border:1px solid var(--t-line);background:var(--t-glas2);color:var(--t-text); box-shadow:var(--t-innen)} .raum .suche:focus-visible{outline:2px solid #fff} .raum .chips{display:flex;gap:8px;overflow-x:auto;padding:2px 2px 6px; scrollbar-width:none;-webkit-overflow-scrolling:touch} .raum .chips::-webkit-scrollbar{display:none} .chip{flex:none;padding:9px 15px;border-radius:99px;font:600 .88rem/1 system-ui,sans-serif} .raum .inhalt{flex:1;overflow-y:auto;padding:14px 16px 90px;-webkit-overflow-scrolling:touch} .raum .gruppe{margin:18px 0 6px;font-size:.82rem;letter-spacing:.02em;color:var(--t-muted); line-height:1.4} .raum .gruppe b{display:block;color:var(--t-text);font-size:.95rem;letter-spacing:0;margin-bottom:2px} .raum .fuss{position:sticky;bottom:0;z-index:2;display:flex;gap:10px;padding:12px 16px; background:rgba(11,13,26,.92);border-top:1px solid var(--t-line); backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)} .raum .fuss .kn3-sek{flex:1} @keyframes raumAuf{from{opacity:0;transform:translateY(26px)}to{opacity:1;transform:none}} .raum.taucht{animation:raumAuf .38s cubic-bezier(.25,.9,.35,1)} @media (prefers-reduced-motion: reduce){.raum.taucht{animation:none}} /* Rückgängig-Meldung (Ausweg aus Fehlentscheidungen) */ .toast{position:fixed;left:50%;bottom:calc(18px + env(safe-area-inset-bottom,0px)); transform:translateX(-50%);z-index:9500; display:flex;align-items:center;gap:12px;padding:12px 16px;border-radius:14px; background:rgba(20,24,40,.96);border:1px solid var(--t-line); box-shadow:var(--t-licht), var(--t-schatten-2);font-size:.92rem;color:var(--t-text); width:max-content;max-width:calc(100vw - 32px); animation:toastAuf .28s ease;transition:opacity .3s ease, transform .3s ease} .toast button{flex:none;white-space:nowrap} .toast.geht{opacity:0;transform:translateX(-50%) translateY(8px);pointer-events:none} @keyframes toastAuf{from{opacity:0;transform:translateX(-50%) translateY(10px)}} @media (prefers-reduced-motion:reduce){ .toast{animation:none;transition:opacity .3s ease} /* nur Ein-/Ausblenden, keine Bewegung */ .toast.geht{transform:translateX(-50%)}} .toast button{border:0;background:none;color:var(--acc);font-weight:700;cursor:pointer; font-size:.92rem;padding:4px} /* ═══ HELLES THEMA — Tiefe aus Licht statt Dunkelheit (v229) ═══ Seiten mit data-theme="hell" (Startseite, Kompass, Wegweiser …) erben dieselben vier Lichter, nur mit Tages-Werten: Schatten aus Blaugrau statt Schwarz, Lichtreflex fast weiß, Kanten zart. */ [data-theme="hell"]{ --t-text:#12222e; --t-muted:#5b6b7a; --t-ink:#eff4f7; --t-line:rgba(18,50,70,.14); --t-glas:rgba(18,50,70,.05); --t-glas2:rgba(18,50,70,.08); --t-schatten-1:0 2px 10px -6px rgba(18,50,70,.30); --t-schatten-2:0 6px 18px -8px rgba(18,50,70,.32); --t-schatten-3:0 12px 30px -12px rgba(18,50,70,.34); --t-licht:inset 0 1px 0 rgba(255,255,255,.85); --t-licht-stark:inset 0 1px 0 rgba(255,255,255,.95); --t-kante:inset 0 -1px 0 rgba(18,50,70,.16); --t-innen:inset 0 2px 6px rgba(18,50,70,.18); } /* ═══ TIEFE-ADAPTER — die bestehenden Seiten erben die Tiefe (v229) ═══ Die historischen Bausteine (.card, .cta, .btn, .tg, .kkarte …) bekommen die vier Lichter und das taktile Heben/Senken, ohne dass Farben, Skripte oder Zähler angefasst werden. Haut, nicht Skelett. WICHTIG: /tiefe.css wird auf diesen Seiten NACH dem Seiten-