/* Design 6: Zwei Hälften. Musik und Sound als eigene Farbwelten. */
body.d6{--c-bg:#10202c;--c-accent:var(--orange);--c-btn:var(--orange);--c-btn-ink:#fff;--c-radius:12px;--wrap:1240px;background:#fff}
.over{position:absolute;z-index:70;top:0;left:0;right:0;display:flex;justify-content:space-between;align-items:center;gap:16px;padding:16px clamp(16px,3vw,36px)}
.logo-pill{background:#fff;border-radius:999px;padding:10px 20px;box-shadow:0 8px 24px rgba(0,0,0,.18)}.logo-pill img{height:30px;width:auto}
.glass{display:flex;gap:4px;padding:5px;border-radius:999px;background:rgba(255,255,255,.88);backdrop-filter:blur(8px);box-shadow:0 8px 24px rgba(0,0,0,.18)}.glass a{padding:9px 16px;border-radius:999px;font-weight:700;font-size:14px}.glass a:hover{background:#eef2f5}.glass a[aria-current]{background:#10202c;color:#fff}.menu-btn{display:none}
.word{display:block;font-size:clamp(4rem,12.6vw,15rem);line-height:.82;letter-spacing:-.08em;font-weight:800;margin-left:-.05em}.what{font-weight:800;font-size:15px;margin-bottom:8px;color:inherit}.line{font-size:clamp(1.1rem,1.8vw,1.6rem);font-weight:700;line-height:1.35;max-width:22ch;margin-top:18px;color:inherit}
.go{display:inline-flex;align-items:center;gap:10px;margin-top:26px;padding:14px 28px;background:#fff;color:#10202c;border-radius:999px;font-weight:800;transition:transform .2s}.go:after{content:'→';font-size:1.2em}
/* Hälften */
.split{display:flex;min-height:100vh}
.world{position:relative;flex:1;display:flex;align-items:flex-end;padding:clamp(24px,4vw,64px);overflow:hidden;transition:flex .6s cubic-bezier(.2,.7,.2,1)}
.w-music{background:var(--orange);color:#fff}.w-sound{background:var(--blue);color:#fff}
.world:hover,.world:focus-visible{flex:1.45}.split:has(.world:hover) .world:not(:hover){flex:.8}.world:hover .go{transform:translateX(8px)}.world:focus-visible{outline:5px solid #10202c;outline-offset:-5px}
.wtext{position:relative;z-index:2}.world .word{font-size:clamp(4rem,12.6vw,15rem)}
.pillars{position:absolute;right:clamp(20px,5vw,80px);top:0;bottom:0;display:flex;align-items:flex-start;gap:1.6vw;width:min(34vw,420px);z-index:1}.pillars i{flex:1;height:var(--h);background:var(--c);border-radius:0 0 999px 999px;transform-origin:top;transition:transform .6s cubic-bezier(.3,1.4,.4,1)}.world:hover .pillars i:nth-child(odd){transform:scaleY(1.18)}.world:hover .pillars i:nth-child(even){transform:scaleY(.86)}
.rings{position:absolute;right:-18vmin;top:-14vmin;width:84vmin;height:84vmin;z-index:1}.rings i{position:absolute;border-radius:50%;border:clamp(10px,2.4vmin,26px) solid rgba(255,255,255,.9);transition:transform .8s cubic-bezier(.2,.7,.2,1)}.rings i:nth-child(1){inset:0}.rings i:nth-child(2){inset:12%;border-color:var(--orange)}.rings i:nth-child(3){inset:24%;border-color:#fff}.rings i:nth-child(4){inset:36%;background:#10202c;border-color:#10202c}.world:hover .rings i:nth-child(1){transform:scale(1.08)}.world:hover .rings i:nth-child(2){transform:scale(1.05)}
.strip{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}.strip>div{display:grid;gap:8px;align-content:start;padding:clamp(20px,3vw,40px);background:var(--c);color:#fff}.strip b{font-size:clamp(1.4rem,2.4vw,2.2rem);letter-spacing:-.04em;line-height:1}.strip span{font-size:15px;line-height:1.4;font-weight:600}
/* Unterseiten */
.hero{position:relative;min-height:88vh;display:flex;align-items:flex-end;overflow:hidden;padding:140px 0 clamp(36px,5vw,72px)}.hero-music{background:var(--orange);color:#fff}.hero-sound{background:var(--blue);color:#fff}.hero .wrap{position:relative;z-index:2}.hero .lead{font-size:clamp(1.1rem,1.8vw,1.5rem);font-weight:600;line-height:1.4;max-width:34ch;margin-top:22px;color:inherit}
.pill{display:inline-flex;margin-top:26px;padding:15px 34px;background:#fff;color:#10202c;border-radius:999px;font-weight:800;transition:transform .2s}.pill:hover{transform:translateY(-3px)}
.stack{background:#10202c}.row{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr);gap:clamp(20px,4vw,64px);align-items:start;padding:clamp(28px,4vw,56px) max(24px,calc((100% - var(--wrap)) / 2));border-top:10px solid var(--c);color:#fff}.row h2{overflow-wrap:anywhere;font-size:clamp(2rem,4.6vw,5.2rem);line-height:.9;letter-spacing:-.06em;font-weight:800}.row li{padding:12px 0;border-top:1px solid #35516a;font-size:1.05rem;color:#d3dfe8}.row li:first-child{border-top:0;padding-top:4px}
.tiles{display:grid;grid-template-columns:1fr 1fr}.tiles article{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1fr);gap:20px;align-items:center;padding:clamp(22px,3vw,44px);background:var(--c);color:#fff}.tiles figure{aspect-ratio:1;display:grid;place-items:center}.tiles img{max-width:92%;max-height:92%;object-fit:contain;filter:drop-shadow(0 18px 14px rgba(0,0,0,.35))}.tiles h2{font-size:clamp(1.8rem,3.4vw,3rem);letter-spacing:-.05em;line-height:1}.tiles p{font-size:15px;line-height:1.45;margin-top:8px;color:inherit;font-weight:600}.tiles .role{font-weight:800}
.cross{display:grid;gap:4px;padding:clamp(28px,4vw,56px) max(24px,calc((100% - var(--wrap)) / 2));transition:filter .2s}.cross:hover{filter:brightness(1.08)}.cross span{font-weight:800;font-size:14px}.cross b{font-size:clamp(2.2rem,6vw,5.4rem);letter-spacing:-.06em;line-height:.95}.cross-sound{background:var(--blue);color:#fff}.cross-music{background:var(--orange);color:#fff}
.d6 .contact{background:#0b141c}.d6 .footer{background:#0b141c}.d6 .footer-inner{color:#8da0ae}
@media(max-width:900px){.split{flex-direction:column;min-height:0}.world{min-height:62vh}.world:hover,.split:has(.world:hover) .world:not(:hover){flex:1}.strip,.tiles{grid-template-columns:1fr 1fr}.row{grid-template-columns:1fr}.pillars{width:40vw}}
@media(max-width:700px){.menu-btn{display:flex;flex-direction:column;gap:6px;width:46px;height:46px;align-items:center;justify-content:center;border:0;border-radius:50%;background:#fff;box-shadow:0 8px 24px rgba(0,0,0,.18)}.menu-btn span{width:20px;height:2px;background:#10202c}.logo-pill img{height:24px}.logo-pill{padding:9px 16px}
.js .glass{display:none;position:absolute;top:100%;right:16px;left:16px;flex-direction:column;border-radius:20px;padding:8px}.js .glass.is-open{display:flex}.glass a{padding:14px 16px;font-size:16px}.strip,.tiles{grid-template-columns:1fr}.tiles article{grid-template-columns:110px 1fr}}
@media(prefers-reduced-motion:reduce){.world,.pillars i,.rings i{transition:none}}

/* ---- Weiterentwicklung ---- */
/* Lesbarkeit: Säulen und Ringe enden oberhalb der großen Wörter */
.world .pillars{bottom:auto;height:50%}
.world .rings{width:70vmin;height:70vmin;top:-22vmin;right:-14vmin}
.hero .pillars{bottom:auto;height:62%}
/* Gemeinsame große Überschrift */
.big{font-size:clamp(2.6rem,8vw,8rem);letter-spacing:-.07em;line-height:.9;font-weight:800;color:#10202c;overflow-wrap:anywhere}
/* Für jede Fläche */
.areas{background:#fff;padding:clamp(48px,7vw,110px) max(24px,calc((100% - var(--wrap)) / 2))}
.pills{list-style:none;display:flex;flex-wrap:wrap;gap:12px;margin:clamp(24px,4vw,48px) 0 0;padding:0}
.pills li{padding:12px 26px;border-radius:999px;background:var(--c);font-weight:800;font-size:1.15rem;color:#fff}
/* Musik folgt dem Tag */
.day{background:#fff;padding:clamp(48px,7vw,110px) max(24px,calc((100% - var(--wrap)) / 2))}
.day-lead{margin-top:18px;font-size:1.1rem;font-weight:600;color:#44525c;max-width:46ch}
.bars{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(12px,2vw,28px);margin-top:clamp(28px,5vw,64px);align-items:end}
.bars article{display:grid;gap:6px;align-content:start}
.barwrap{height:clamp(150px,22vw,300px);display:flex;align-items:flex-end}
.bar{width:100%;height:calc(var(--l) * 100%);background:var(--c);border-radius:999px 999px 0 0;transform-origin:bottom}
.bars .t{margin-top:14px;font-weight:800;font-size:14px;color:#5b6872}
.bars h3{font-size:clamp(1.3rem,2vw,1.8rem);letter-spacing:-.04em;line-height:1.05}
.bars p:not(.t){font-size:15px;line-height:1.45;color:#2d3d49}
.bars span{margin-top:4px;font-weight:800;font-size:14px;padding:3px 12px;border-radius:99px;background:var(--c);justify-self:start;color:#fff}
@media(max-width:900px){.bars{grid-template-columns:1fr 1fr;row-gap:36px}}
@media(max-width:520px){.bars{grid-template-columns:1fr}.barwrap{height:110px}}
/* Bewegung beim Laden und Scrollen (nur ohne reduzierte Bewegung) */
@media(prefers-reduced-motion:no-preference){
@keyframes drop{from{transform:scaleY(0)}}
@keyframes grow{from{transform:scale(.55);opacity:0}}
@keyframes up{from{transform:translateY(.2em);opacity:0}}
.pillars i{animation:drop .9s cubic-bezier(.2,.8,.2,1) backwards}
.pillars i:nth-child(2){animation-delay:.08s}.pillars i:nth-child(3){animation-delay:.16s}.pillars i:nth-child(4){animation-delay:.24s}.pillars i:nth-child(5){animation-delay:.32s}
.rings i{animation:grow .9s cubic-bezier(.2,.8,.2,1) backwards}
.rings i:nth-child(2){animation-delay:.1s}.rings i:nth-child(3){animation-delay:.2s}.rings i:nth-child(4){animation-delay:.3s}
.word{animation:up .8s .15s cubic-bezier(.2,.8,.2,1) backwards}
.js [data-reveal]:not(.is-in) .bar{transform:scaleY(.08)}
.js [data-reveal] .bar{transition:transform 1s cubic-bezier(.2,.8,.2,1)}
.js [data-reveal]:not(.is-in) .pills li,.js [data-reveal]:not(.is-in) .big{opacity:0;transform:translateY(18px)}
.js [data-reveal] .pills li,.js [data-reveal] .big{transition:opacity .6s,transform .6s}
.js [data-reveal].is-in .pills li:nth-child(2){transition-delay:.05s}.js [data-reveal].is-in .pills li:nth-child(3){transition-delay:.1s}.js [data-reveal].is-in .pills li:nth-child(4){transition-delay:.15s}.js [data-reveal].is-in .pills li:nth-child(n+5){transition-delay:.2s}
.js [data-reveal].is-in .bars article:nth-child(2) .bar{transition-delay:.1s}.js [data-reveal].is-in .bars article:nth-child(3) .bar{transition-delay:.2s}.js [data-reveal].is-in .bars article:nth-child(4) .bar{transition-delay:.3s}
}