body:has(.dph-uts-812) {
overflow-x: clip;
}
body:has(.dph-uts-812) main,
body:has(.dph-uts-812) .site-main,
body:has(.dph-uts-812) .content-area,
body:has(.dph-uts-812) .site-content,
body:has(.dph-uts-812) .entry-content,
body:has(.dph-uts-812) .post-content,
body:has(.dph-uts-812) .single-content {
overflow: visible !important;
}
body:has(.dph-uts-812) main article[id^=”post-“],
body:has(.dph-uts-812) .site-main article[id^=”post-“] {
max-width: none !important;
padding-left: 0 !important;
padding-right: 0 !important;
}
/* WordPress-Beitragsüberschrift bleibt als eigener Block, im Fenster zentriert. */
body:has(.dph-uts-812) .entry-header,
body:has(.dph-uts-812) .post-header,
body:has(.dph-uts-812) .single-post-header {
position: relative !important;
left: auto !important;
right: auto !important;
width: min(1130px, calc(100% – 64px)) !important;
max-width: 100% !important;
margin-left: auto !important;
margin-right: auto !important;
transform: none !important;
box-sizing: border-box !important;
clear: both !important;
text-align: left !important;
}
body:has(.dph-uts-812) .entry-header .entry-title,
body:has(.dph-uts-812) .post-header .entry-title,
body:has(.dph-uts-812) .single-post-header .entry-title,
body:has(.dph-uts-812) .entry-header h1,
body:has(.dph-uts-812) .post-header h1,
body:has(.dph-uts-812) .single-post-header h1 {
width: 100% !important;
max-width: none !important;
margin-left: 0 !important;
margin-right: 0 !important;
text-align: left !important;
}
/* Zentrierung des Blogposts: siehe massgeblichen Block am Ende des . */
.dph-uts-812 {
–uts-orange: #ff6a00;
–uts-orange-light: #ff9b59;
–uts-pink: #d42f76;
–uts-purple: #702696;
–uts-night: #100813;
–uts-panel: rgba(30, 14, 39, 0.92);
–uts-line: rgba(255, 255, 255, 0.12);
–uts-text: #fff8f2;
–uts-muted: #d2c3d7;
–uts-shadow: 0 24px 65px rgba(15, 3, 24, 0.38);
color: var(–uts-text);
margin-top: clamp(24px, 5vw, 64px);
margin-bottom: clamp(24px, 5vw, 64px);
font-family: inherit;
}
.dph-uts-812 *,
.dph-uts-812 *::before,
.dph-uts-812 *::after {
box-sizing: border-box;
}
.dph-uts-812 a {
color: inherit;
}
.dph-uts-812-hero,
.dph-uts-812-section,
.dph-uts-812-snapshot,
.dph-uts-812-app {
position: relative;
overflow: hidden;
border: 1px solid var(–uts-line);
box-shadow: var(–uts-shadow);
}
.dph-uts-812-hero::before,
.dph-uts-812-section::before,
.dph-uts-812-snapshot::before,
.dph-uts-812-app::before {
content: “”;
position: absolute;
inset: 0 auto auto 0;
width: 100%;
height: 2px;
background: linear-gradient(90deg, var(–uts-orange), var(–uts-pink), var(–uts-purple));
}
.dph-uts-812-hero {
display: grid;
grid-template-columns: minmax(0, 1.2fr) minmax(300px, 0.8fr);
gap: clamp(28px, 5vw, 76px);
align-items: center;
padding: clamp(30px, 5vw, 72px);
border-radius: 30px;
background:
radial-gradient(circle at 8% 4%, rgba(255, 106, 0, 0.34), transparent 34%),
radial-gradient(circle at 90% 15%, rgba(125, 38, 153, 0.42), transparent 36%),
linear-gradient(135deg, #251022 0%, #160b1d 45%, #240d37 100%);
}
.dph-uts-812-hero::after {
content: “”;
position: absolute;
width: 430px;
height: 430px;
right: -220px;
bottom: -280px;
border-radius: 50%;
border: 1px solid rgba(255, 255, 255, 0.08);
box-shadow:
0 0 0 45px rgba(255, 106, 0, 0.025),
0 0 0 90px rgba(113, 38, 139, 0.03);
pointer-events: none;
}
.dph-uts-812-hero-copy,
.dph-uts-812-hero-art {
position: relative;
z-index: 2;
}
.dph-uts-812-eyebrow,
.dph-uts-812-kicker {
display: inline-flex;
align-items: center;
gap: 9px;
color: #ffc29a;
font-size: 0.74rem;
font-weight: 800;
letter-spacing: 0.14em;
line-height: 1.3;
text-transform: uppercase;
}
.dph-uts-812-pulse {
width: 9px;
height: 9px;
border-radius: 50%;
background: var(–uts-orange);
box-shadow:
0 0 0 7px rgba(255, 106, 0, 0.13),
0 0 24px rgba(255, 106, 0, 0.8);
}
.dph-uts-812-code {
margin: 22px 0 4px;
color: transparent;
background: linear-gradient(90deg, #ff9b59, #ff6a00 38%, #d14891 70%, #a95bd1);
-webkit-background-clip: text;
background-clip: text;
font-size: clamp(3.3rem, 9vw, 7.4rem);
font-weight: 950;
letter-spacing: -0.075em;
line-height: 0.92;
}
.dph-uts-812-hero h2 {
max-width: 900px;
margin: 18px 0 16px;
color: var(–uts-text);
font-size: clamp(1.75rem, 4vw, 3.45rem);
font-weight: 850;
letter-spacing: -0.04em;
line-height: 1.03;
}
.dph-uts-812-lead {
max-width: 780px;
margin: 0;
color: var(–uts-muted);
font-size: clamp(1rem, 1.55vw, 1.17rem);
line-height: 1.75;
}
.dph-uts-812-actions {
display: flex;
flex-wrap: wrap;
gap: 12px;
margin-top: 28px;
}
.dph-uts-812-button {
display: inline-flex;
min-height: 48px;
align-items: center;
justify-content: center;
padding: 12px 19px;
border: 1px solid transparent;
border-radius: 999px;
font-size: 0.92rem;
font-weight: 800;
line-height: 1.2;
text-decoration: none !important;
transition: transform 180ms ease, border-color 180ms ease, background 180ms ease;
}
.dph-uts-812-button:hover {
transform: translateY(-2px);
}
.dph-uts-812-button-primary {
background: linear-gradient(115deg, var(–uts-orange), var(–uts-pink));
box-shadow: 0 12px 28px rgba(213, 64, 78, 0.28);
}
.dph-uts-812-button-secondary {
border-color: rgba(255, 255, 255, 0.19);
background: rgba(255, 255, 255, 0.055);
}
.dph-uts-812-button-app {
min-height: 54px;
padding-inline: 23px;
box-shadow:
0 13px 30px rgba(213, 64, 78, 0.34),
0 0 28px rgba(255, 106, 0, 0.16);
}
.dph-uts-812-button:focus-visible,
.dph-uts-812-card-link:focus-visible,
.dph-uts-812-faq summary:focus-visible {
outline: 3px solid rgba(255, 157, 91, 0.85);
outline-offset: 4px;
}
.dph-uts-812-hero-art img {
display: block;
width: min(100%, 470px);
margin-inline: auto;
aspect-ratio: 1 / 1;
border: 1px solid rgba(255, 255, 255, 0.16);
border-radius: 24px;
object-fit: cover;
box-shadow:
0 28px 70px rgba(7, 2, 12, 0.55),
0 0 55px rgba(141, 43, 154, 0.16);
transform: rotate(1.5deg);
}
.dph-uts-812-snapshot {
display: grid;
grid-template-columns: repeat(5, minmax(0, 1fr));
margin-top: 18px;
border-radius: 22px;
background: linear-gradient(135deg, rgba(35, 15, 39, 0.98), rgba(25, 11, 34, 0.98));
}
.dph-uts-812-stat {
min-width: 0;
padding: 22px 20px;
border-right: 1px solid rgba(255, 255, 255, 0.085);
}
.dph-uts-812-stat:last-child {
border-right: 0;
}
.dph-uts-812-stat span,
.dph-uts-812-mini-label {
display: block;
margin-bottom: 8px;
color: #beafc7;
font-size: 0.72rem;
font-weight: 750;
letter-spacing: 0.08em;
line-height: 1.35;
text-transform: uppercase;
}
.dph-uts-812-stat strong {
display: block;
overflow-wrap: anywhere;
color: #fff;
font-size: clamp(1rem, 2vw, 1.28rem);
line-height: 1.25;
}
.dph-uts-812-app {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
gap: 30px;
align-items: center;
margin-top: 18px;
padding: clamp(26px, 4vw, 44px);
border-radius: 24px;
background:
radial-gradient(circle at 12% 0%, rgba(255, 106, 0, 0.32), transparent 36%),
radial-gradient(circle at 92% 100%, rgba(122, 40, 160, 0.38), transparent 42%),
linear-gradient(130deg, #3a1423, #1b0c25 50%, #29103d);
}
.dph-uts-812-app-copy {
position: relative;
z-index: 2;
}
.dph-uts-812-app h2 {
max-width: 820px;
margin: 8px 0 10px;
color: #fff;
font-size: clamp(1.55rem, 3vw, 2.6rem);
line-height: 1.08;
letter-spacing: -0.035em;
}
.dph-uts-812-app p {
max-width: 860px;
margin: 0;
color: #e1d3e4;
line-height: 1.72;
}
.dph-uts-812-app-mark {
position: relative;
z-index: 2;
display: grid;
width: 118px;
height: 118px;
place-items: center;
border: 1px solid rgba(255, 255, 255, 0.18);
border-radius: 30px;
color: #fff;
background: linear-gradient(145deg, #ff7a00, #e42e68 52%, #6c2693);
box-shadow:
0 22px 50px rgba(13, 3, 21, 0.42),
0 0 42px rgba(255, 91, 44, 0.2);
font-size: 3.2rem;
font-weight: 950;
line-height: 1;
}
.dph-uts-812-section {
margin-top: 18px;
padding: clamp(25px, 4vw, 48px);
border-radius: 24px;
background:
radial-gradient(circle at 100% 0%, rgba(103, 33, 132, 0.15), transparent 28%),
linear-gradient(145deg, rgba(29, 14, 37, 0.97), rgba(18, 9, 24, 0.98));
}
.dph-uts-812-section-head {
max-width: 980px;
margin-bottom: 24px;
}
.dph-uts-812-section-head h2 {
margin: 8px 0 8px;
color: #fff;
font-size: clamp(1.45rem, 3vw, 2.35rem);
font-weight: 850;
letter-spacing: -0.03em;
line-height: 1.12;
}
.dph-uts-812-section-head p {
margin: 0;
color: var(–uts-muted);
line-height: 1.7;
}
.dph-uts-812-context-grid {
display: grid;
grid-template-columns: minmax(0, 1.35fr) minmax(270px, 0.65fr);
gap: 18px;
}
.dph-uts-812-editorial,
.dph-uts-812-opener,
.dph-uts-812-index-card {
border: 1px solid rgba(255, 255, 255, 0.095);
border-radius: 18px;
background: rgba(255, 255, 255, 0.038);
}
.dph-uts-812-editorial {
padding: clamp(20px, 3vw, 30px);
}
.dph-uts-812-editorial p {
margin: 0 0 1em;
color: #e9dfea;
font-size: 1rem;
line-height: 1.78;
}
.dph-uts-812-editorial p:last-child {
margin-bottom: 0;
}
.dph-uts-812-opener {
display: flex;
flex-direction: column;
justify-content: center;
padding: 26px;
background:
linear-gradient(145deg, rgba(255, 106, 0, 0.14), rgba(115, 32, 137, 0.17)),
rgba(255, 255, 255, 0.035);
}
.dph-uts-812-opener strong {
color: #fff;
font-size: clamp(1.05rem, 2vw, 1.35rem);
line-height: 1.45;
}
.dph-uts-812-opener small {
margin-top: 12px;
color: #ffc39d;
font-size: 0.84rem;
}
.dph-uts-812-listen iframe {
display: block;
width: 100%;
max-width: 100%;
border: 1px solid rgba(255, 255, 255, 0.1) !important;
border-radius: 18px;
box-shadow: 0 18px 44px rgba(6, 2, 10, 0.3);
}
.dph-uts-812-soundcloud-credit {
margin-top: 8px;
overflow: hidden;
color: #aaa0ae;
font-family: Interstate, “Lucida Grande”, “Lucida Sans Unicode”, “Lucida Sans”, Garuda, Verdana, Tahoma, sans-serif;
font-size: 10px;
font-weight: 100;
line-break: anywhere;
white-space: nowrap;
text-overflow: ellipsis;
}
.dph-uts-812-soundcloud-credit a {
color: #cfc4d2 !important;
text-decoration: none !important;
}
.dph-uts-812-post-copy {
padding: clamp(20px, 3vw, 30px);
border: 1px solid rgba(255, 255, 255, 0.095);
border-radius: 18px;
background: rgba(255, 255, 255, 0.035);
}
.dph-uts-812-post-copy p {
margin: 0 0 1.15em;
color: #eee6ef;
font-size: 1rem;
line-height: 1.76;
}
.dph-uts-812-post-copy p:last-child {
margin-bottom: 0;
}
.dph-uts-812-post-copy a {
color: #ffad79;
text-decoration-color: rgba(255, 173, 121, 0.48);
text-underline-offset: 3px;
}
.dph-uts-812-highlight-links {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 12px;
margin-bottom: 24px;
}
.dph-uts-812-card-link {
display: flex;
min-height: 112px;
flex-direction: column;
justify-content: center;
padding: 19px;
border: 1px solid rgba(255, 255, 255, 0.09);
border-radius: 16px;
color: #fff !important;
background: rgba(255, 255, 255, 0.038);
text-decoration: none !important;
transition: transform 180ms ease, border-color 180ms ease, background 180ms ease;
}
.dph-uts-812-card-link:hover {
transform: translateY(-3px);
border-color: rgba(255, 119, 32, 0.34);
background: linear-gradient(145deg, rgba(255, 106, 0, 0.10), rgba(101, 37, 138, 0.13));
}
.dph-uts-812-card-link strong {
display: block;
margin-bottom: 6px;
font-size: 1rem;
line-height: 1.35;
}
.dph-uts-812-card-link small {
color: #cbbdd0;
font-size: 0.83rem;
line-height: 1.5;
}
.dph-uts-812-tracklist {
display: grid;
gap: 9px;
}
.dph-uts-812-track {
display: grid;
grid-template-columns: 84px 42px minmax(0, 1fr);
gap: 12px;
align-items: center;
padding: 13px 15px;
border: 1px solid rgba(255, 255, 255, 0.085);
border-radius: 13px;
background: linear-gradient(90deg, rgba(255, 106, 0, 0.075), rgba(111, 37, 137, 0.075));
transition: transform 160ms ease, border-color 160ms ease, background 160ms ease;
}
.dph-uts-812-track:hover {
transform: translateX(3px);
border-color: rgba(255, 133, 58, 0.36);
background: linear-gradient(90deg, rgba(255, 106, 0, 0.12), rgba(111, 37, 137, 0.12));
}
.dph-uts-812-track-time {
color: #ffb17f;
font-variant-numeric: tabular-nums;
font-size: 0.78rem;
font-weight: 800;
}
.dph-uts-812-track-number {
display: inline-flex;
width: 32px;
height: 32px;
align-items: center;
justify-content: center;
border: 1px solid rgba(255, 255, 255, 0.11);
border-radius: 50%;
color: #fff;
background: rgba(255, 255, 255, 0.055);
font-size: 0.74rem;
font-weight: 850;
}
.dph-uts-812-track-info {
min-width: 0;
overflow-wrap: anywhere;
color: #f5edf5;
font-size: 0.94rem;
line-height: 1.55;
}
.dph-uts-812-track-info strong {
color: #fff;
}
.dph-uts-812-label {
color: #cdb9d7;
}
.dph-uts-812-tag {
display: inline-flex;
align-items: center;
min-height: 25px;
margin-left: 8px;
padding: 4px 8px;
border: 1px solid rgba(255, 148, 76, 0.28);
border-radius: 999px;
color: #ffd8bd;
background: rgba(255, 106, 0, 0.10);
font-size: 0.68rem;
font-weight: 800;
line-height: 1.2;
text-transform: uppercase;
vertical-align: middle;
}
.dph-uts-812-tag-week {
border-color: rgba(201, 82, 221, 0.35);
color: #f0d1f7;
background: rgba(111, 37, 137, 0.16);
}
.dph-uts-812-index {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 16px;
}
.dph-uts-812-index-card {
padding: 22px;
}
.dph-uts-812-index-card h3 {
margin: 0 0 15px;
color: #fff;
font-size: 1.05rem;
}
.dph-uts-812-chip-list {
display: flex;
flex-wrap: wrap;
gap: 8px;
}
.dph-uts-812-chip {
display: inline-flex;
align-items: center;
min-height: 34px;
padding: 7px 11px;
border: 1px solid rgba(255, 130, 49, 0.22);
border-radius: 999px;
color: #ffe5d3;
background: rgba(255, 106, 0, 0.075);
font-size: 0.82rem;
font-weight: 700;
line-height: 1.25;
}
.dph-uts-812-chip-label {
border-color: rgba(174, 82, 210, 0.25);
color: #ead1f4;
background: rgba(111, 37, 137, 0.11);
}
.dph-uts-812-link-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 12px;
}
.dph-uts-812-link-card {
position: relative;
display: flex;
min-height: 175px;
flex-direction: column;
padding: 20px;
border: 1px solid rgba(255, 255, 255, 0.09);
border-radius: 17px;
color: #fff !important;
background: rgba(255, 255, 255, 0.036);
text-decoration: none !important;
transition: transform 180ms ease, border-color 180ms ease, background 180ms ease;
}
.dph-uts-812-link-card:hover {
transform: translateY(-4px);
border-color: rgba(255, 119, 32, 0.34);
background: linear-gradient(145deg, rgba(255, 106, 0, 0.085), rgba(101, 37, 138, 0.12));
}
.dph-uts-812-link-card > span {
margin-bottom: 17px;
color: #ff9b59;
font-size: 0.76rem;
font-weight: 900;
letter-spacing: 0.12em;
}
.dph-uts-812-link-card strong {
display: block;
margin-bottom: 8px;
font-size: 1.02rem;
line-height: 1.3;
}
.dph-uts-812-link-card small {
display: block;
padding-right: 20px;
color: #cbbdd0;
font-size: 0.84rem;
line-height: 1.55;
}
.dph-uts-812-link-card b {
position: absolute;
right: 18px;
bottom: 17px;
color: #ffa46b;
font-size: 1.15rem;
}
.dph-uts-812-faq-list {
display: grid;
gap: 10px;
}
.dph-uts-812-faq {
border: 1px solid rgba(255, 255, 255, 0.095);
border-radius: 15px;
background: rgba(255, 255, 255, 0.035);
}
.dph-uts-812-faq summary {
position: relative;
padding: 18px 52px 18px 18px;
color: #fff;
cursor: pointer;
font-weight: 780;
line-height: 1.45;
list-style: none;
}
.dph-uts-812-faq summary::-webkit-details-marker {
display: none;
}
.dph-uts-812-faq summary::after {
content: “+”;
position: absolute;
top: 50%;
right: 18px;
width: 27px;
height: 27px;
display: grid;
place-items: center;
border-radius: 50%;
color: #fff;
background: linear-gradient(135deg, var(–uts-orange), var(–uts-purple));
transform: translateY(-50%);
}
.dph-uts-812-faq[open] summary::after {
content: “−”;
}
.dph-uts-812-faq > div {
padding: 0 18px 18px;
}
.dph-uts-812-faq p {
margin: 0;
color: #d5c8d8;
line-height: 1.7;
}
@supports not (overflow: clip) {
body:has(.dph-uts-812) {
overflow-x: hidden;
}
}
@media (max-width: 900px) {
body:has(.dph-uts-812) .entry-header,
body:has(.dph-uts-812) .post-header,
body:has(.dph-uts-812) .single-post-header,
.dph-uts-812 {
left: auto !important;
right: auto !important;
margin-left: auto !important;
margin-right: auto !important;
transform: none !important;
}
.dph-uts-812-hero,
.dph-uts-812-context-grid,
.dph-uts-812-app {
grid-template-columns: 1fr;
}
.dph-uts-812-hero-art {
order: -1;
}
.dph-uts-812-hero-art img {
width: min(100%, 430px);
transform: none;
}
.dph-uts-812-app-mark {
width: 92px;
height: 92px;
border-radius: 24px;
font-size: 2.5rem;
}
.dph-uts-812-snapshot {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.dph-uts-812-stat {
border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.dph-uts-812-stat:nth-child(2n) {
border-right: 0;
}
.dph-uts-812-stat:last-child {
grid-column: 1 / -1;
border-bottom: 0;
}
.dph-uts-812-highlight-links,
.dph-uts-812-link-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (max-width: 620px) {
body:has(.dph-uts-812) .entry-header,
body:has(.dph-uts-812) .post-header,
body:has(.dph-uts-812) .single-post-header,
.dph-uts-812 {
width: calc(100% – 24px) !important;
left: auto !important;
right: auto !important;
margin-left: auto !important;
margin-right: auto !important;
transform: none !important;
}
.dph-uts-812-hero,
.dph-uts-812-section,
.dph-uts-812-app {
border-radius: 18px;
}
.dph-uts-812-snapshot,
.dph-uts-812-index,
.dph-uts-812-highlight-links,
.dph-uts-812-link-grid {
grid-template-columns: 1fr;
}
.dph-uts-812-stat,
.dph-uts-812-stat:nth-child(2n),
.dph-uts-812-stat:last-child {
grid-column: auto;
border-right: 0;
border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.dph-uts-812-stat:last-child {
border-bottom: 0;
}
.dph-uts-812-track {
grid-template-columns: 72px 34px minmax(0, 1fr);
gap: 8px;
padding: 11px;
}
.dph-uts-812-tag {
display: flex;
width: fit-content;
margin: 7px 0 0;
}
}
@media (prefers-reduced-motion: reduce) {
.dph-uts-812 *,
.dph-uts-812 *::before,
.dph-uts-812 *::after {
scroll-behavior: auto !important;
transition: none !important;
}
}
/* EP. 812: cinematic full-width cover header */
body:has(.dph-uts-812) article[id^=”post-“] > .post-thumbnail,
body:has(.dph-uts-812) article[id^=”post-“] > .entry-media,
body:has(.dph-uts-812) article[id^=”post-“] > .featured-image,
body:has(.dph-uts-812) .single-post-thumbnail {
display: none !important;
}
.dph-uts-812-hero {
display: block;
padding: 0;
border-radius: 30px;
background: #160b1d;
isolation: isolate;
box-shadow:
0 30px 80px rgba(7, 2, 12, 0.58),
0 0 70px rgba(194, 28, 47, 0.13);
}
.dph-uts-812-hero::after {
content: “”;
position: absolute;
inset: auto 5% -55px;
width: auto;
height: 120px;
border: 0;
border-radius: 50%;
background: rgba(214, 30, 48, 0.28);
box-shadow: none;
filter: blur(65px);
opacity: 0.5;
pointer-events: none;
z-index: -1;
}
.dph-uts-812-hero-media {
position: relative;
z-index: 1;
overflow: hidden;
width: 100%;
aspect-ratio: 1920 / 1080;
border-radius: 29px 29px 0 0;
background:
radial-gradient(circle at 50% 50%, rgba(190, 24, 42, 0.20), transparent 55%),
#080507;
}
.dph-uts-812-hero-media::before {
content: “”;
position: absolute;
inset: 0;
z-index: 2;
pointer-events: none;
background:
linear-gradient(180deg, rgba(4, 2, 4, 0.08) 0%, transparent 38%, rgba(17, 7, 22, 0.18) 68%, #160b1d 100%),
radial-gradient(circle at 50% 44%, transparent 35%, rgba(5, 1, 6, 0.22) 100%);
}
.dph-uts-812-hero-media::after {
content: “”;
position: absolute;
inset: 0;
z-index: 3;
pointer-events: none;
background:
linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.035) 48%, rgba(255, 255, 255, 0.10) 50%, rgba(255, 255, 255, 0.035) 52%, transparent 100%);
background-size: 240% 100%;
background-position: 130% 0;
mix-blend-mode: screen;
opacity: 0.44;
animation: dph-uts-812-cover-sweep 11s ease-in-out infinite;
}
.dph-uts-812-hero-media img {
display: block;
width: 100%;
height: 100%;
margin: 0;
border: 0;
border-radius: inherit;
object-fit: cover;
object-position: center;
box-shadow: none;
transform: scale(1.002);
transition: transform 900ms cubic-bezier(.2,.7,.2,1), filter 900ms ease;
}
.dph-uts-812-hero:hover .dph-uts-812-hero-media img {
transform: scale(1.015);
filter: saturate(1.05) contrast(1.025);
}
.dph-uts-812-hero-shine {
position: absolute;
inset: auto 8% 2px;
z-index: 4;
height: 2px;
border-radius: 999px;
background: linear-gradient(90deg, transparent, rgba(255, 126, 63, 0.82), rgba(223, 42, 92, 0.82), transparent);
box-shadow: 0 0 24px rgba(226, 47, 66, 0.48);
pointer-events: none;
}
.dph-uts-812-hero-copy {
position: relative;
z-index: 5;
margin-top: clamp(-104px, -6vw, -66px);
padding: clamp(108px, 8vw, 142px) clamp(26px, 5vw, 72px) clamp(32px, 5vw, 58px);
background:
radial-gradient(circle at 8% 20%, rgba(255, 91, 32, 0.17), transparent 34%),
radial-gradient(circle at 94% 8%, rgba(114, 38, 150, 0.21), transparent 36%),
linear-gradient(180deg, rgba(22, 11, 29, 0) 0%, rgba(22, 11, 29, 0.88) 46%, #160b1d 72%);
}
.dph-uts-812-hero-copy::after {
content: “”;
position: absolute;
inset: auto 0 0;
height: 1px;
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.13), transparent);
pointer-events: none;
}
.dph-uts-812-hero-copy .dph-uts-812-eyebrow {
padding: 8px 12px;
border: 1px solid rgba(255, 170, 111, 0.20);
border-radius: 999px;
background: rgba(12, 5, 15, 0.42);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
}
.dph-uts-812-hero h2 {
max-width: 1040px;
margin: 18px 0 14px;
font-size: clamp(1.7rem, 3.8vw, 3.25rem);
line-height: 1.04;
}
.dph-uts-812-hero .dph-uts-812-lead {
max-width: 960px;
}
.dph-uts-812-code,
.dph-uts-812-hero-art {
display: none !important;
}
@keyframes dph-uts-812-cover-sweep {
0%, 28% {
background-position: 130% 0;
opacity: 0;
}
42% {
opacity: 0.42;
}
58% {
background-position: -130% 0;
opacity: 0.20;
}
72%, 100% {
background-position: -130% 0;
opacity: 0;
}
}
@media (max-width: 900px) {
.dph-uts-812-hero-media {
aspect-ratio: 1920 / 1080;
}
.dph-uts-812-hero-copy {
margin-top: -66px;
padding-top: 92px;
}
}
@media (max-width: 620px) {
.dph-uts-812-hero {
border-radius: 18px;
}
.dph-uts-812-hero-media {
border-radius: 17px 17px 0 0;
}
.dph-uts-812-hero-copy {
margin-top: -42px;
padding: 66px 18px 26px;
}
.dph-uts-812-hero-copy .dph-uts-812-eyebrow {
padding: 7px 10px;
font-size: 0.64rem;
letter-spacing: 0.10em;
}
.dph-uts-812-hero h2 {
font-size: clamp(1.45rem, 7vw, 2.05rem);
}
.dph-uts-812-hero .dph-uts-812-actions {
display: grid;
grid-template-columns: 1fr;
}
.dph-uts-812-hero .dph-uts-812-button {
width: 100%;
}
}
@media (prefers-reduced-motion: reduce) {
.dph-uts-812-hero-media::after {
animation: none !important;
opacity: 0.12;
}
.dph-uts-812-hero-media img {
transform: none !important;
filter: none !important;
}
}
/* =========================================================
ZENTRIERUNG — 1:1 aus dem funktionierenden EP-810-Beitrag.
———————————————————
Reines CSS muss die Position der Content-Spalte immer raten
und raet bei diesem Theme falsch. Das JavaScript am Ende
MISST die tatsaechliche Position und zieht den Block exakt
an den linken Fensterrand.
Hinweis: Der WordPress-Beitragstitel wird ausgeblendet, weil
das Design seinen eigenen Header/Hero mitbringt.
Soll der WP-Titel doch sichtbar bleiben, einfach den Block
“WP-Titel ausblenden” unten loeschen.
========================================================= */
html,
body {
overflow-x: hidden !important;
}
/* WP-Titel ausblenden (Design hat eigenen Header). Zum Behalten: loeschen. */
body:has(#dph-uts-812-root) .entry-title,
body:has(#dph-uts-812-root) h1.entry-title,
body:has(#dph-uts-812-root) .wp-block-post-title,
body:has(#dph-uts-812-root) header.entry-header,
body:has(#dph-uts-812-root) .post-title {
display: none !important;
}
/* Alle moeglichen Content-Container oeffnen. */
body:has(#dph-uts-812-root) .entry-content,
body:has(#dph-uts-812-root) .wp-block-post-content,
body:has(#dph-uts-812-root) .post-content,
body:has(#dph-uts-812-root) .content-area,
body:has(#dph-uts-812-root) .site-main,
body:has(#dph-uts-812-root) main,
body:has(#dph-uts-812-root) article,
body:has(#dph-uts-812-root) .wp-block-html {
max-width: none !important;
overflow: visible !important;
}
/* Root: volle Fensterbreite; der genaue Versatz kommt per JS
(–dph-uts812-shift), Fallback = klassischer Full-Bleed. */
#dph-uts-812-root {
position: relative !important;
display: block !important;
box-sizing: border-box !important;
float: none !important;
width: 100vw !important;
max-width: none !important;
margin-left: var(–dph-uts812-shift, calc(50% – 50vw)) !important;
margin-right: 0 !important;
left: auto !important;
right: auto !important;
transform: none !important;
/* Inhalt innen auf max. 1680px begrenzen und zentrieren. */
padding-left: max(24px, calc((100vw – 1680px) / 2)) !important;
padding-right: max(24px, calc((100vw – 1680px) / 2)) !important;
}
@media (max-width: 700px) {
#dph-uts-812-root {
padding-left: 14px !important;
padding-right: 14px !important;
}
}
(function () {
function dphUts812Fit() {
var root = document.getElementById(‘dph-uts-812-root’);
if (!root) { return; }
root.style.setProperty(‘–dph-uts812-shift’, ‘0px’);
root.style.width = window.innerWidth + ‘px’;
root.style.maxWidth = ‘none’;
var rect = root.getBoundingClientRect();
var shift = -rect.left;
root.style.setProperty(‘–dph-uts812-shift’, shift + ‘px’);
root.style.width = window.innerWidth + ‘px’;
root.style.maxWidth = ‘none’;
var parent = root.parentElement;
var i = 0;
while (parent && parent !== document.body && i < 25) {
parent.style.overflow = 'visible';
parent.style.maxWidth = 'none';
parent = parent.parentElement;
i++;
}
}
window.addEventListener('load', dphUts812Fit);
window.addEventListener('resize', dphUts812Fit);
setTimeout(dphUts812Fit, 50);
setTimeout(dphUts812Fit, 250);
setTimeout(dphUts812Fit, 800);
setTimeout(dphUts812Fit, 1600);
})();
Uplifting Trance Sessions EP. 812
The full episode, complete tracklist and your Track of the Week vote.
Listen to the new session with DJ Phalanx, follow all 19 timestamped entries and open the official Trance Podcast App for direct access to the show.
Episode
812
Published
Aug 11, 2026
Timestamped entries
19
Last listed cue
01:24:03
World premieres
1
Episode overview
What is inside Uplifting Trance Sessions EP. 812?
The published tracklist contains 19 timestamped entries, including the intro.
After the intro, the episode opens with Phillip Castle – Your Echo.
The mix also includes music from Gareth Emery, Darren Porter, Lost Witness, DJ CØSMIC DREAM, Nedea & Bryan Kearney and many more.
State72 & Snowman – The Poem appears as the world premiere in this episode.
Full episode
https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/tracks/soundcloud%3Atracks%3A2378482370%3Fsecret_token%3Ds-kn9p5TO0PhA&color=%23ff5500&auto_play=false&hide_related=false&show_comments=true&show_user=true&show_reposts=false&show_teaser=true
Listen to Uplifting Trance Sessions EP. 812
Play the complete episode on SoundCloud and follow the timestamps in the tracklist below.
Episode post
Fresh trance for #TranceTuesday
Vote for your track of the week
Choose your favorite track from EP. 812.
Follow DJ Phalanx on Spotify
Open the latest playlists and releases.
Install the Trance Podcast App
Direct access to episodes and tracklists.
📢 Vote for your track of the week: djphalanx.com/trance-family-track-of-the-week/
👉 Follow me on Spotify: djphalanx.com/spotify
It is #TranceTuesday
Hello dear Trance Nation. Welcome to episode 812. The speakers are warm, the playlist is loaded, and I’ve got another fresh dose of trance ready for you.
This week, you will hear new tracks from Gareth Emery, Darren Porter, Lost Witness, DJ CØSMIC DREAM, Nedea & Bryan Kearney, your Trance Family Track of the Week, and many more.
No long intro today. We open with Phillip Castle – Your Echo.
And now let the music speak.
Full tracklist
Uplifting Trance Sessions EP. 812 tracklist
Every published cue is listed below, including the world premiere and the Trance Family Track of the Week.
00:00:00
01
Intro
00:01:10
02
Phillip Castle – Your Echo [Magik Muzik]
00:06:02
03
Lost Witness & Mel Watts & Maria Nayler – My Gravity [Amsterdam Trance]
00:10:56
04
Cofee – Vanish [2Rock Uplifting]
00:16:02
05
CLass Inc. – Zero Gravity [Future Sequence]
00:21:22
06
Free State – Different Ways [Anjunabeats]
00:26:01
07
NyTiGen, Alexander Turok & Aniølkü – I Love You [2Rock Recordings]
00:32:04
08
Allan Berndtz & U-G – Prima Stella [Reason II Rise Music]
00:36:38
09
Darren Porter – Taurus [Unkonscious Recordings]
00:41:53
10
DJ CØSMIC DREAM – Ibiza Sunset [Enhanced Progressive]
00:46:56
11
Fisical Project & Jennifer Rene – I Remember (Victor Lobanov Remix) [Suanda Music]
00:51:16
12
Jon Mangan – Lodestar [Extrema Global Music]
Trance Family Track Of The Week
00:55:23
13
Krevix – We Can Be Free [High Voltage Recordings]
01:00:14
14
Laucco – Teshio (Casepeat Remix) [Aerodynamica Music]
01:05:15
15
State72 & Snowman – The Poem [State Control Records]
World Premiere
01:10:04
16
Jose Amnesia – The Eternal (CIElll Remix) [Armada Captivating]
01:15:02
17
Mariano San Pedro – Mustafar [Subculture]
01:19:59
18
Nedea & Bryan Kaerney – Back Once Again [Armada Music]
01:24:03
19
Gareth Emery, Annabel, djtry – Under The Sky (Broken Tides) [Create Music Group]
Tracklist index
Artists and labels in EP. 812
The names below are taken directly from the published tracklist.
Artists
Phillip Castle
Lost Witness & Mel Watts & Maria Nayler
Cofee
CLass Inc.
Free State
NyTiGen, Alexander Turok & Aniølkü
Allan Berndtz & U-G
Darren Porter
DJ CØSMIC DREAM
Fisical Project & Jennifer Rene
Jon Mangan
Krevix
Laucco
State72 & Snowman
Jose Amnesia
Mariano San Pedro
Nedea & Bryan Kaerney
Gareth Emery, Annabel, djtry
Labels
Magik Muzik
Amsterdam Trance
2Rock Uplifting
Future Sequence
Anjunabeats
2Rock Recordings
Reason II Rise Music
Unkonscious Recordings
Enhanced Progressive
Suanda Music
Extrema Global Music
High Voltage Recordings
Aerodynamica Music
State Control Records
Armada Captivating
Subculture
Armada Music
Create Music Group
Episode FAQ
Questions about Uplifting Trance Sessions EP. 812
How many entries are listed in Uplifting Trance Sessions EP. 812?
The published tracklist contains 19 timestamped entries, including the intro.
Which track opens EP. 812 after the intro?
Phillip Castle – Your Echo [Magik Muzik] is the first full track and starts at 00:01:10.
Where can I listen to Uplifting Trance Sessions EP. 812?
The complete episode is embedded on this page through SoundCloud. You can also open the official Trance Podcast App at djphalanx.com/app/.
Which track is the world premiere in EP. 812?
State72 & Snowman – The Poem [State Control Records] is marked as the world premiere and starts at 01:05:15.
Which track is the Trance Family Track of the Week in EP. 812?
Jon Mangan – Lodestar [Extrema Global Music] is the Trance Family Track of the Week and starts at 00:51:16.
[00:00:00] 1. Intro
[00:01:10] 2. Phillip Castle – Your Echo [Magik Muzik]
[00:06:02] 3. Lost Witness & Mel Watts & Maria Nayler – My Gravity [Amsterdam Trance]
[00:10:56] 4. Cofee – Vanish [2Rock Uplifting]
[00:16:02] 5. CLass Inc. – Zero Gravity [Future Sequence]
[00:21:22] 6. Free State – Different Ways [Anjunabeats]
[00:26:01] 7. NyTiGen, Alexander Turok & Aniølkü – I Love You [2Rock Recordings]
[00:32:04] 8. Allan Berndtz & U-G – Prima Stella [Reason II Rise Music]
[00:36:38] 9. Darren Porter – Taurus [Unkonscious Recordings]
[00:41:53] 10. DJ CØSMIC DREAM – Ibiza Sunset [Enhanced Progressive]
[00:46:56] 11. Fisical Project & Jennifer Rene – I Remember (Victor Lobanov Remix) [Suanda Music]
[00:51:16] 12. Jon Mangan – Lodestar [Extrema Global Music] Trance Family Track OF The Week
[00:55:23] 13. Krevix – We Can Be Free [High Voltage Recordings]
[01:00:14] 14. Laucco – Teshio (Casepeat Remix) [Aerodynamica Music]
[01:05:15] 15. State72 & Snowman- The Poem [State Control Records] World Premiere
[01:10:04] 16. Jose Amnesia – The Eternal (CIElll Remix) [Armada Captivating]
[01:15:02] 17. Mariano San Pedro – Mustafar [Subculture]
[01:19:59] 18. Nedea & Bryan Kaerney – Back Once Again [Armada Music]
[01:24:03] 19. Gareth Emery, Annabel, djtry – Under The Sky (Broken Tides) [Create Music Group]