/* theme.css — EIN Dark-Mode (Light bleibt unverändert) Wirkung aktiv, sobald gesetzt ist. Benötigte Assets (relativ zum Projekt): - bg-dark.jpg → Hero (nur im Dark-Mode) - about-dark.png → About (nur im Dark-Mode) */ /* ==================== Design‑Tokens (Dark) ==================== */ :root[data-theme="dark"]{ /* Flächen & Text */ --page:#0b1020; /* Seitenhintergrund */ --text:#e6edf6; /* Grundtext */ --muted:#9fb0c3; /* Sekundärtext */ /* Akzent / Verläufe (optional, falls im Light genutzt) */ --pill:#5b8dff; --pill-2:#8fb1ff; --ring:rgba(91,141,255,.26); /* Schatten */ --shadow:0 16px 40px rgba(0,0,0,.35); } /* System UI (Form Controls etc.) */ :root[data-theme="dark"]{ color-scheme: dark; } /* Grundfläche & Text */ :root[data-theme="dark"] body{ background:var(--page); color:var(--text); -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; transition: background .25s ease, color .25s ease; } /* Links (generisch) */ :root[data-theme="dark"] a{ color:#cfe0ff; } :root[data-theme="dark"] a:hover{ color:#e6f0ff; } /* ================= Header / Navbar ================= */ :root[data-theme="dark"] header{ background: transparent; box-shadow: none; } :root[data-theme="dark"] .menu a{ color:#c9d5e2; } :root[data-theme="dark"] .sun{ box-shadow:0 0 0 6px var(--ring); } /* ============= HERO (Dark) ============= */ :root[data-theme="dark"] .hero{ /* getrennt festlegen – sicherer als die shorthand "background:" */ background-color: #0e1526; background-image: url('./assets/backgrounds/bg-dark.jpg'); /* Pfad hier prüfen! */ background-repeat: no-repeat; background-position: center; background-size: cover; } /* Dark-Variante für den Parallax-Vordergrund */ :root[data-theme="dark"] .parallax-min .layer.fg{ /* Achtung: Web-Pfad mit Schrägstrichen, nicht Backslashes */ background-image: url('./assets/clouds-blue.svg'); /* Optional: gleiche Größe/Position wie im Light-Mode spiegeln */ /* Falls du im Light-Mode z. B. 180% nutzt, hier übernehmen: */ /* background-size: 180% auto; */ background-position: center 38%; } :root[data-theme="dark"] .hero .title, :root[data-theme="dark"] .hero .subtitle{ color:var(--text); } /* ============== ABOUT (Dark) ============== */ :root[data-theme="dark"] #about{ background:#0e1526 url('about-dark.png') center/cover no-repeat; } :root[data-theme="dark"] .aboutTitle{ color:#e6edf6; } :root[data-theme="dark"] .aboutSub{ color:var(--pill); } :root[data-theme="dark"] .aboutText{ color:var(--muted); } /* ================= Tech / Badges ================= */ :root[data-theme="dark"] .tech{ background:#111a2b; border:1px solid rgba(255,255,255,.06); box-shadow:0 6px 18px rgba(0,0,0,.25); } :root[data-theme="dark"] .techLabel{ color:#d7e1ee; } /* ================= Services ================= */ :root[data-theme="dark"] #services{ background:#0e1524; } :root[data-theme="dark"] .svcCard{ background:#101a2b; border:1px solid rgba(255,255,255,.07); box-shadow:0 10px 26px rgba(0,0,0,.35); color:#d2dceb; } :root[data-theme="dark"] .svcCard p{ color:#c4d0e0; } /* ================= Projects ================= */ :root[data-theme="dark"] #projects{ background:#0b1020; } :root[data-theme="dark"] .projCard{ background:#0f1728; border:1px solid rgba(255,255,255,.07); box-shadow:0 10px 26px rgba(0,0,0,.35); color:#d2dceb; } :root[data-theme="dark"] .projThumb{ background:#0b111c; } :root[data-theme="dark"] .projDesc{ color:#c6d2e1; } :root[data-theme="dark"] .tag{ background:#121b2a; border-color:rgba(255,255,255,.09); color:#c9d5e2; } /* ================= Contact ================= */ :root[data-theme="dark"] #contact{ background:#0e1524; } :root[data-theme="dark"] .contactTitle{ color:#e6edf6; } :root[data-theme="dark"] .contactSub{ color:var(--pill); } :root[data-theme="dark"] .contactLead{ color:#98a9bc; } :root[data-theme="dark"] .field input, :root[data-theme="dark"] .field textarea{ background:#1a2336; color:#e8f0fa; border-color:rgba(255,255,255,.08); } :root[data-theme="dark"] .field input::placeholder, :root[data-theme="dark"] .field textarea::placeholder{ color:#9bb0c6; } /* ================= Footer ================= */ :root[data-theme="dark"] footer{ background:#0f1626; color:#9fb0c3; border-top:1px solid rgba(255,255,255,.08); } /* ================= Buttons / Icons ================= */ :root[data-theme="dark"] .btn{ box-shadow:var(--shadow); } :root[data-theme="dark"] .btnGhost{ background:#0f1728; color:#e6edf6; border-color:rgba(255,255,255,.12); } :root[data-theme="dark"] .icon{ filter:saturate(1.05) brightness(1.08); } :root[data-theme="dark"] #jobs{ background:#0e1524; } :root[data-theme="dark"] .job{ background:#101a2b; border:1px solid rgba(255,255,255,.07); box-shadow:0 10px 26px rgba(0,0,0,.35); color:#d2dceb; } :root[data-theme="dark"] .job .job-meta{ color:#9fb0c3; } /* === My Jobs (Layout & Cards) === */ #jobs{ align-items:start; background:#f4f6fb; } #jobs .inner{ max-width: var(--maxw, 1100px); margin: 0 auto; padding: calc(var(--header-h, 72px) + 32px) clamp(16px,3vw,40px) 88px; } .jobsTitle{ text-align:center; margin:0 0 26px; font-size: clamp(28px, 3.6vw, 48px); font-weight: 900; } .jobsSub{ color: var(--pill, #4f7df0); font-weight: 800; font-size: clamp(20px, 2.2vw, 28px); margin: 12px 0 22px; text-align:center; } .jobsList{ display:grid; gap:18px; } .job{ background:#fff; border:1px solid rgba(0,0,0,.06); border-radius:16px; padding:18px 20px; box-shadow:0 1px 0 rgba(0,0,0,.03), 0 14px 26px rgba(0,0,0,.06); cursor:pointer; transition:transform .2s ease, background .2s ease; } .job:hover{ transform: translateY(-1px); background:#fff; } .job-head{ display:flex; flex-wrap:wrap; gap:.5rem; align-items:center; justify-content:space-between; } .job-title{ display:flex; gap:.5rem; align-items:center; font-weight:800; } .job-title .logo{ width:42px; height:42px; border-radius:.5rem; object-fit:cover; background:#e9eef7; display:inline-block; } .job-meta{ color:#6b7b8b; font-size:.9rem; } /* Smooth expand/collapse */ .job-detail{ margin-top:.75rem; overflow:hidden; max-height:0; opacity:0; transform: translateY(-4px); transition: max-height .35s ease, opacity .25s ease, transform .35s ease; } .job.open .job-detail{ /* Für reine CSS-Variante: ausreichend große Obergrenze wählen */ max-height: 800px; opacity:1; transform: translateY(0); } /* Optional: offener Card-State etwas „gehobener“ aussehen lassen */ .job{ transition: transform .2s ease, background .2s ease, box-shadow .25s ease, border-color .25s ease; } .job.open{ box-shadow:0 12px 30px rgba(0,0,0,.10); border-color:rgba(0,0,0,.08); } /* Respektiere Nutzer, die reduzierte Bewegung wünschen */ @media (prefers-reduced-motion: reduce){ .job-detail{ transition: none; } .job{ transition:none; } } .job ul{ margin:.5rem 0 0 1.25rem; } .job a{ color: var(--pill, #4f7df0); text-decoration: none; } .job a:hover{ text-decoration: underline; } /* Dark-Mode */ :root[data-theme="dark"] #jobs{ background:#0e1524; } :root[data-theme="dark"] .job{ background:#101a2b; border:1px solid rgba(255,255,255,.07); box-shadow:0 10px 26px rgba(0,0,0,.35); color:#d2dceb; } :root[data-theme="dark"] .job .job-meta{ color:#9fb0c3; } :root[data-theme="dark"] .job-title .logo{ background:#0b1220; } :root[data-theme="dark"] .job a{ color:#7aa2ff; } /* Educations: gleiche Optik wie Jobs */ #edu{ align-items:start; background:#f4f6fb; } :root[data-theme="dark"] #edu{ background:#0e1524; } /* Logo-Swap je nach Theme */ .job-title .logo.light, .job-title .logo.dark{ width:42px; height:42px; border-radius:.5rem; object-fit:cover; display:inline-block; } /* Standard: Light-Logo sichtbar, Dark-Logo versteckt */ .job-title .logo.dark{ display:none; } /* Dark-Mode: Switch */ :root[data-theme="dark"] .job-title .logo.light{ display:none; } :root[data-theme="dark"] .job-title .logo.dark{ display:inline-block; } /* CTA unter Projects */ .projects-cta{ display:flex; justify-content:center; margin-top: 18px; } /* Button: kompakt, rund, Theme-Farben */ .btn.see-more{ display:inline-flex; align-items:center; justify-content:center; padding: 10px 18px; border-radius: 999px; background: linear-gradient(90deg, var(--pill, #4f7df0), var(--pill-2, #7aa2ff)); color:#fff; text-decoration:none; font-weight: 800; box-shadow: 0 0 0 6px var(--ring, rgba(79,125,240,.28)); transition: transform .15s ease, box-shadow .2s ease, opacity .2s ease; } .btn.see-more:hover{ transform: translateY(-1px); opacity:.95; } .btn.see-more:active{ transform: translateY(0); } /* ===== Theme Toggle (Lucide + Motion-ähnlicher Effekt) ===== */ .mode-toggle{ -webkit-appearance: none; appearance: none; background: transparent; border: 0; box-shadow: none; -webkit-tap-highlight-color: transparent; /* Safari/Chrome Tap-Highlight aus */ outline: none; width: 28px; height: 28px; border-radius: 9999px; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; flex-shrink: 0; transition: transform .15s ease, opacity .2s ease; } .mode-toggle:focus, .mode-toggle:active, .mode-toggle:focus-visible{ outline: none; box-shadow: none; background: transparent; } .menu .mode-toggle{ background: transparent !important; box-shadow: none !important; } .mode-toggle::-moz-focus-inner{ border: 0; } /* Firefox-Kante */ .mode-toggle:active{ transform:scale(.96); } /* Dark Variant wie im neuen Projekt */ html[data-theme="dark"] .mode-toggle{ background:transparent; border:0; box-shadow:none; } /* Icons stapeln + Motion-ähnliches Ein-/Ausblenden */ .mode-toggle .icon{ position:absolute; width:1.5rem; height:1.5rem; transition:opacity .30s ease, transform .30s ease; color:#1b2735; /* sichtbare Linie im Light */ box-shadow: none !important; background: transparent !important; pointer-events: none; /* nie Fokus aufs SVG selbst */ } html[data-theme="dark"] .mode-toggle .icon{ color:#e6edf6; } /* Sichtbarkeit/Slide-Effekt */ .mode-toggle .sun{ opacity:1; transform:translateY(0); } .mode-toggle .moon{ opacity:0; transform:translateY(-10px); } html[data-theme="dark"] .mode-toggle .sun{ opacity:0; transform:translateY(10px); } html[data-theme="dark"] .mode-toggle .moon{ opacity:1; transform:translateY(0); } /* A11y helper */ .sr-only{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); border:0; white-space:nowrap; } /* === Contact Popup === */ .popup{ position: fixed; inset: 0; display: grid; place-items: center; pointer-events: none; opacity: 0; transition: opacity .25s ease; z-index: 9999; } .popup.is-open{ opacity: 1; pointer-events: auto; } .popup__backdrop{ position: absolute; inset: 0; backdrop-filter: blur(6px) saturate(1.1); background: rgba(0,0,0,.12); } :root[data-theme="dark"] .popup__backdrop{ background: rgba(0,0,0,.35); } .popup__card{ position: relative; width: min(92vw, 500px); border-radius: 20px; padding: 18px 18px 18px 16px; background: var(--surface, #ffffff); color: var(--text, #0e1320); box-shadow: 0 40px 70px rgba(0,0,0,.25), 0 4px 14px rgba(0,0,0,.18); transform: scale(.94) translateY(6px); opacity: 0; animation: pop-enter .28s cubic-bezier(.2,.7,.2,1) forwards; display: grid; grid-template-columns: auto 1fr auto; gap: 14px; } :root[data-theme="dark"] .popup__card{ background: #0f1626; color: #e6edf6; box-shadow: 0 40px 70px rgba(0,0,0,.6), 0 4px 14px rgba(0,0,0,.5); } .popup__icon{ display: grid; place-items: center; color: var(--accent, #2b8cff); width: 36px; height: 36px; } .popup__content h3{ margin: 2px 0 4px; font-size: 1.05rem; font-weight: 700; } .popup__content p{ margin: 0; opacity: .9; line-height: 1.35; } .popup__close{ align-self: start; width: 28px; height: 28px; border-radius: 999px; border: none; background: transparent; color: inherit; font-size: 20px; line-height: 1; cursor: pointer; transition: transform .15s ease, background .15s ease, opacity .15s ease; opacity: .8; } .popup__close:hover{ transform: scale(1.08); background: rgba(0,0,0,.06); opacity: 1; } :root[data-theme="dark"] .popup__close:hover{ background: rgba(255,255,255,.06); } @keyframes pop-enter{ from{ transform: scale(.94) translateY(6px); opacity: 0; } to { transform: scale(1) translateY(0); opacity: 1; } } /* optional: leichter „pulse“ Glow um das Icon */ .popup__icon::after{ content:""; position:absolute; inset:auto; } /* === FORCE LEFT RAIL ON DESKTOP === */ :root{ --rail: clamp(20px, 5.5vw, 48px); /* linker/rechter Seiten-Gutter */ --textw: 1680px; /* max Breite deiner Intro-Textspalte */ } /* Hero-Container soll NICHT zentrieren, sondern volle Breite nutzen */ .heroInner{ max-width: none !important; width: 100% !important; margin: 0 !important; padding-left: var(--rail) !important; padding-right: var(--rail) !important; /* Links die Textspalte (fixe Maxbreite), rechts der Rest */ display: grid !important; grid-template-columns: minmax(0, var(--textw)) 1fr !important; justify-items: start !important; /* Inhalt in Zellen links halten */ } /* Sicherheitsnetz: alle direkten Kinder im Grid links ankern */ .heroInner > *{ justify-self: start !important; text-align: left !important; } /* Die eigentliche Intro-Spalte: Breite begrenzen, nicht zentrieren */ .intro{ max-width: var(--textw) !important; margin: 0 !important; text-align: left !important; } /* Falls ein übergeordneter Wrapper den Hero zentriert: entkoppeln */ .hero, .hero > .wrap, .hero > .container{ max-width: none !important; margin: 0 !important; width: 100% !important; } /* Mobile bleibt 1-spaltig – die Rail bleibt gleich */ @media (max-width: 900px){ .heroInner{ grid-template-columns: 1fr !important; } } @media (max-width: 900px){ .menu{ position: absolute; top: calc(100% + 8px); left: 0; right: 0; display: none; /* bleibt zu, bis .open gesetzt wird */ flex-direction: column; gap: 8px; padding: 14px clamp(18px, 6vw, 24px); /* 👇 Jetzt deckend + hoher Kontrast */ background: var(--page); /* voll deckend */ border: 1px solid color-mix(in oklab, var(--text) 12%, transparent); border-radius: 14px; box-shadow: 0 12px 32px rgba(0,0,0,.28); z-index: 1000; } .menu.open{ display:flex; } /* Tap-Ziele und Text sicher lesbar */ .menu a{ display:block; width:100%; padding: 12px 10px; border-radius: 10px; font-size: clamp(14px, 4.2vw, 16px); color: var(--text); background: transparent; } } /* Overlay NUR mobil */ @media (max-width: 900px){ body.nav-open::before{ content:""; position: fixed; inset: 0; z-index: 999; background: rgba(0,0,0,.35); backdrop-filter: blur(4px) saturate(1.05); } header{ z-index: 1000; } /* Menü über dem Overlay */ } /* Desktop-Schutz: falls doch 'nav-open' gesetzt ist */ @media (min-width: 901px){ body.nav-open::before{ content:none !important; } } /* Desktop-Reset für Menü */ @media (min-width: 901px){ .menu{ position: static !important; display: flex !important; padding: 0 !important; background: transparent !important; border: 0 !important; box-shadow: none !important; } } /* Desktop: Toggle komplett verstecken */ @media (min-width: 901px){ #navToggle{ display: none !important; } } /* === Parallax Mobile-Fix (<= 900px) === */ @media (max-width: 900px){ /* Hero-Hintergrund (Light & Dark) */ .hero{ /* weiter runter schieben, damit oben nichts abgeschnitten wirkt */ background-position: center 30% !important; background-size: cover !important; } :root[data-theme="dark"] .hero{ /* im Dark-Mode meistens etwas höher skaliert → noch etwas tiefer setzen */ background-position: center 36% !important; } /* Vordergrund-Layer (Wolken) */ .parallax-min .layer.fg{ /* größer und tiefer, damit die Wolken erst später ins Bild “fahren” */ background-size: 310% auto !important; background-position: center 51% !important; } :root[data-theme="dark"] .parallax-min .layer.fg{ /* Dark-Variante nutzt clouds-blue.svg – leicht andere Sweet-Spot-Position */ background-size: 310% auto !important; background-position: center 51% !important; } } /* Mobile: Lead-Satz in weiß */ @media (max-width: 900px){ .intro .lead{ color: #fff !important; text-shadow: 0 1px 2px rgba(0,0,0,.35); /* leichte Lesbarkeit auf Bild */ } } /* === Mobile: NavToggle als Icon statt Bars === */ @media (max-width: 900px){ #navToggle{ display: inline-flex; /* nur mobil sichtbar */ align-items: center; justify-content: center; width: 40px; height: 40px; padding: 0; border: 0; background: transparent; border-radius: 12px; } /* Bars ausblenden */ #navToggle .bar{ display: none !important; } /* Icon (Light-Mode) */ #navToggle::before{ content: ""; display: block; width: 24px; height: 24px; background: center / contain no-repeat url("/assets/icons/menu-for-light.png"); } /* Icon (Dark-Mode) */ :root[data-theme="dark"] #navToggle::before{ background-image: url("/assets/icons/menu-for-dark.png"); } /* Optional: anderes Icon, wenn geöffnet (falls du Close-Icons hast) */ #navToggle.active::before{ background-image: url("./assets/menu-for-light.png"); } :root[data-theme="dark"] #navToggle.active::before{ background-image: url("./assets/menu-for-dark.png"); } /* Fokus sichtbar für Keyboard-Nutzer */ #navToggle:focus-visible{ outline: 2px solid currentColor; outline-offset: 2px; } } @media (max-width: 900px){ /* Button selbst sichtbar & tappbar machen */ #navToggle{ display: inline-flex !important; align-items: center; justify-content: center; width: 44px; height: 44px; position: relative; z-index: 1001; /* über allem */ border: 0; padding: 0; background: color-mix(in oklab, var(--page) 78%, transparent); /* dezente Kachel */ border-radius: 12px; } /* alte Hamburger-Bars ausblenden */ #navToggle .bar{ display: none !important; } /* ICON VOR DEM KLICK – IMMER ZEIGEN */ #navToggle::before{ content: ""; display: block; width: 24px; height: 24px; background-position: center; background-repeat: no-repeat; background-size: contain; opacity: 1 !important; background-image: url("/assets/menu-for-light.png"); } /* Dark-Mode-Icon */ :root[data-theme="dark"] #navToggle::before{ background-image: url("/assets/menu-for-dark.png"); } #navToggle.active::before{ background-image: url("/assets/menu-for-light.png"); } :root[data-theme="dark"] #navToggle.active::before{ background-image: url("/assets/menu-for-dark.png"); } } /* === Rolling Tools Belt (Icons + Label darunter) === */ .tools-belt{ --icon: clamp(140px, 16vw, 200px); /* Icon-Größe */ --gap: clamp(24px, 5vw, 56px); /* Abstand zwischen Zellen */ --speed: 30s; /* kleiner = schneller */ --label-size: clamp(112px, 1.6vw, 16px); --label-gap: 8px; margin-top: 20px; mask-image: linear-gradient(90deg, transparent 0 4%, #000 10% 90%, transparent 96% 100%); -webkit-mask-image: linear-gradient(90deg, transparent 0 4%, #000 10% 90%, transparent 96% 100%); } .tools-belt .belt{ position: relative; overflow: hidden; /* Höhe = Icon + Label + Abstand */ height: calc(var(--icon) + var(--label-gap) + (var(--label-size) * 1.2)); } .tools-belt .belt-track{ position: absolute; top: 50%; display: inline-flex; flex-wrap: nowrap; /* nichts umbrechen */ gap: var(--gap); align-items: center; transform: translateY(-50%); animation: belt-move var(--speed) linear infinite; will-change: transform; } .tools-belt .belt-track:nth-of-type(1){ left: 0; } .tools-belt .belt-track:nth-of-type(2){ left: 100%; } /* jede Zelle ist so breit wie das Icon, aber höher wegen Label */ .tools-belt .belt-track li{ flex: 0 0 auto; width: var(--icon); height: calc(var(--icon) + var(--label-gap) + (var(--label-size) * 1.2)); display: grid; grid-template-rows: var(--icon) auto; place-items: center; row-gap: var(--label-gap); } .tools-belt .belt-track img{ width: 100%; height: 100%; object-fit: contain; display: block; filter: saturate(1.05); opacity: .98; transition: transform .2s ease, filter .2s ease, opacity .2s ease; } /* Labels unter den Icons gut lesbar machen */ /* Standard (Light & Dark via --text) */ .tools-belt .belt-track .label{ color: var(--text); /* nutzt deine Theme-Textfarbe */ font-weight: 700; text-shadow: none; } /* Optional: im Dark-Mode leicht glühen lassen */ :root[data-theme="dark"] .tools-belt .belt-track .label{ color: #e6edf6; text-shadow: 0 1px 2px rgba(0,0,0,.35); } /* Hover */ .tools-belt:hover .belt-track{ animation-play-state: paused; } .tools-belt .belt-track img:hover{ transform: translateY(-2px) scale(1.04); filter: saturate(1.2); opacity: 1; } @keyframes belt-move{ from{ transform: translate3d(0, -50%, 0); } to { transform: translate3d(-100%, -50%, 0); } } /* Reduced Motion */ @media (prefers-reduced-motion: reduce){ .tools-belt .belt-track{ position: static; transform: none; animation: none; gap: calc(var(--gap) * .8); } .tools-belt{ mask: none; -webkit-mask: none; } } /* Dark-Mode leichte Betonung (optional) */ :root[data-theme="dark"] .tools-belt .belt-track img{ filter: saturate(1.12) brightness(1.06); } .tools-belt{ -webkit-mask-image: none !important; mask-image: none !important; } .tools-belt .belt-track img{ filter: none !important; opacity: 1 !important; } /* Light-Theme: dunkle Schrift */ :root:not([data-theme="dark"]) .tools-belt .belt-track .label{ color: #0e1320 !important; font-weight: 800 !important; text-shadow: none !important; } /* Dark-Theme: helle Schrift mit leichter Kontur */ :root[data-theme="dark"] .tools-belt .belt-track .label{ color: #ffffff !important; font-weight: 800 !important; text-shadow: 0 1px 2px rgba(0,0,0,.55) !important; } /* === Ink Nav (animated highlight) ======================================= */ /* Farb-Tokens, greifen deine data-theme-Logik auf */ /* Aktiver Link: Schrift immer sichtbar, niemals übermalt */ .nav-ink .nav-ink-list a[data-active="true"] span { color: #fff !important; background: transparent !important; /* falls irgendwo Hover-Background greift */ position: relative; /* Safety: Z-Layer für Text */ z-index: 2; } /* Auch beim Hover/Fokus den Active-Text nicht übermalen */ .nav-ink .nav-ink-list a[data-active="true"]:is(:hover, :focus-visible) span { background: transparent !important; } :root { /* helle Akzent-Verläufe passend zu deinem Blau/Violett */ --ink-bg-light: linear-gradient(90deg, #4f7df0, #7a5af8); --ink-text-light: #0e1526; --ink-hover-light: hsl(0 0% 85% / 1); } [data-theme="dark"] { /* dunkle Variante: etwas kräftiger, bessere Kontraste */ --ink-bg-dark: linear-gradient(90deg, #7a5af8, #4f7df0); --ink-text-dark: #ffffff; --ink-hover-dark: hsl(0 0% 30% / 1); } /* Alias, so musst du oben nichts doppelt ändern */ :root { --ink-bg: var(--ink-bg-light, linear-gradient(90deg, #4f7df0, #7a5af8)); --ink-fg: var(--ink-text-light, #0e1526); --ink-hover: var(--ink-hover-light, hsl(0 0% 85%)); } [data-theme="dark"] { --ink-bg: var(--ink-bg-dark, linear-gradient(90deg, #7a5af8, #4f7df0)); --ink-fg: var(--ink-text-dark, #fff); --ink-hover: var(--ink-hover-dark, hsl(0 0% 30%)); } /* Layout der Liste – neutral, kein globales body-Reset */ .nav-ink .nav-ink-list { --gutter: .25rem; display: flex; gap: var(--gutter); list-style: none; margin: 0; padding: .75rem 1rem; position: relative; /* Ankerfläche fürs ::after */ overflow: auto; scrollbar-width: none; isolation: isolate; } .nav-ink .nav-ink-list::-webkit-scrollbar { display: none; } /* Links + Kapsel für bessere Klickfläche */ .nav-ink .nav-ink-list a { text-decoration: none; color: var(--ink-fg); display: inline-block; padding: 0 .125rem; } .nav-ink .nav-ink-list a span { transition: background .12s ease-out; border-radius: 999px; padding: .375rem .85rem; pointer-events: none; display: inline-block; } /* Hover, nur wenn NICHT aktiv */ .nav-ink .nav-ink-list a:is(:hover, :focus-visible):not([data-active="true"]) span { background: var(--ink-hover); outline: none; } /* ---- Magie: Active-Anchor meldet eine Anker-Box ----------------------- */ /* Das ist die “exakte” Technik aus deiner Demo: der aktive Link setzt einen Ankernamen … */ .nav-ink .nav-ink-list a[data-active="true"] span { anchor-name: --active; } /* … und das ::after positioniert sich per position-anchor dort hin und animiert dorthin. */ .nav-ink .nav-ink-list::after { content: ""; position: absolute; z-index: 0; /* Diese Werte lesen die Box von --active aus */ top: anchor(top); bottom: anchor(bottom); left: anchor(left); right: anchor(right); position-anchor: --active; background: var(--ink-bg); border-radius: 999px; mix-blend-mode: normal; transition: all .26s ease-out; pointer-events: none; } /* Text über die Tinten-Kapsel */ .nav-ink .nav-ink-list a span { position: relative; z-index: 2; } /* ---- Progressive Fallback (wenn Anchor Positioning fehlt) -------------- */ @supports not (position-anchor: --x) { .nav-ink .nav-ink-list { position: relative; } .nav-ink .nav-ink-list::after { content: none; } /* aus */ .nav-ink .nav-ink-list .ink { content: ""; position: absolute; z-index: 0; border-radius: 999px; background: var(--ink-bg); transition: transform .26s ease-out, width .26s ease-out, height .26s ease-out; pointer-events: none; isolation: isolate; /* eigener Stacking-Context: Text kann sicher drüber liegen */ } } /* Aktiver Link: Schrift oben auf der Pill immer klar sichtbar */ .nav-ink .nav-ink-list a[data-active="true"] { color: #fff; text-shadow: 0 1px 1px rgba(0,0,0,.12); /* minimaler Kontrast-Boost */ } /* === FORCE TRUE FULLSCREEN HERO (no peeking) =================== */ .hero{ height: 100svh !important; /* exakt eine Viewport-Höhe */ min-height: 0 !important; /* Sicherheitsnetz: keine min-height erben */ } @supports not (height: 1svh){ /* Fallback: dynamische oder normale Viewporthöhe */ .hero{ height: 100dvh !important; } } @supports not (height: 1dvh){ .hero{ height: 100vh !important; } }